.toast-enter-active[data-v-24c3eb5c],
.toast-leave-active[data-v-24c3eb5c] {
  transition: all 0.3s;
}
.toast-enter-from[data-v-24c3eb5c],
.toast-leave-to[data-v-24c3eb5c] {
  opacity: 0;
  transform: translate(100%);
}
.fade-enter-active[data-v-1678604c],
.fade-leave-active[data-v-1678604c] {
  transition: opacity 0.25s;
}
.fade-enter-from[data-v-1678604c],
.fade-leave-to[data-v-1678604c] {
  opacity: 0;
}
.slide-enter-active[data-v-1678604c],
.slide-leave-active[data-v-1678604c] {
  transition: transform 0.25s;
}
.slide-enter-from[data-v-1678604c],
.slide-leave-to[data-v-1678604c] {
  transform: translate(100%);
}
:root,
:host {
  --font-sans:
    "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  --color-indigo-50: oklch(98% 0.012 156);
  --color-indigo-100: oklch(95.4% 0.025 156);
  --color-indigo-200: oklch(90.8% 0.047 156);
  --color-indigo-300: oklch(83.2% 0.088 156);
  --color-indigo-400: oklch(71.5% 0.138 156);
  --color-indigo-500: oklch(62.8% 0.156 156);
  --color-indigo-600: oklch(53.1% 0.137 156);
  --color-indigo-700: oklch(44.6% 0.11 156);
  --color-indigo-900: oklch(31.5% 0.07 156);
  --color-violet-100: oklch(95.7% 0.015 110);
  --color-violet-200: oklch(92.2% 0.028 110);
  --color-violet-300: oklch(86.8% 0.05 112);
  --color-violet-600: oklch(63.6% 0.093 118);
  --color-slate-50: oklch(98.4% 0.006 96);
  --color-slate-100: oklch(97% 0.008 98);
  --color-slate-200: oklch(93.6% 0.01 102);
  --color-slate-300: oklch(87.4% 0.015 104);
  --color-slate-400: oklch(71% 0.018 106);
  --color-slate-500: oklch(56.3% 0.017 108);
  --color-slate-600: oklch(45.1% 0.015 110);
  --color-slate-700: oklch(36.7% 0.014 114);
  --color-slate-800: oklch(28.8% 0.013 120);
  --color-slate-900: oklch(22.2% 0.012 128);
  --color-slate-950: oklch(17.4% 0.014 140);
  --color-background: oklch(98.3% 0.007 98);
  --color-foreground: oklch(28.6% 0.013 132);
}
body {
  background:
    radial-gradient(circle at top right, rgba(123, 163, 110, 0.18) 0%, rgba(123, 163, 110, 0) 34%),
    linear-gradient(180deg, #fbf8f1 0%, #f1f5ee 100%);
}
@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-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-divide-y-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-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-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --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% 0.013 17.38);
    --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-800: oklch(44.4% 0.177 26.899);
    --color-orange-100: oklch(95.4% 0.038 75.164);
    --color-orange-400: oklch(75% 0.183 55.934);
    --color-orange-500: oklch(70.5% 0.213 47.604);
    --color-orange-700: oklch(55.3% 0.195 38.402);
    --color-amber-100: oklch(96.2% 0.059 95.617);
    --color-amber-600: oklch(66.6% 0.179 58.318);
    --color-amber-700: oklch(55.5% 0.163 48.998);
    --color-amber-800: oklch(47.3% 0.137 46.201);
    --color-amber-900: oklch(41.4% 0.112 45.904);
    --color-yellow-600: oklch(68.1% 0.162 75.834);
    --color-green-50: oklch(98.2% 0.018 155.826);
    --color-green-200: oklch(92.5% 0.084 155.995);
    --color-green-500: oklch(72.3% 0.219 149.579);
    --color-green-800: oklch(44.8% 0.119 151.328);
    --color-emerald-100: oklch(95% 0.052 163.051);
    --color-emerald-600: oklch(59.6% 0.145 163.225);
    --color-cyan-100: oklch(95.6% 0.045 203.388);
    --color-cyan-600: oklch(60.9% 0.126 221.723);
    --color-sky-50: oklch(97.7% 0.013 236.62);
    --color-sky-100: oklch(95.1% 0.026 236.824);
    --color-sky-500: oklch(68.5% 0.169 237.323);
    --color-sky-600: oklch(58.8% 0.158 241.966);
    --color-blue-50: oklch(97% 0.014 254.604);
    --color-blue-100: oklch(93.2% 0.032 255.585);
    --color-blue-200: oklch(88.2% 0.059 254.128);
    --color-blue-700: oklch(48.8% 0.243 264.376);
    --color-blue-800: oklch(42.4% 0.199 265.638);
    --color-indigo-50: oklch(96.2% 0.018 272.314);
    --color-indigo-100: oklch(93% 0.034 272.788);
    --color-indigo-200: oklch(87% 0.065 274.039);
    --color-indigo-300: oklch(78.5% 0.115 274.713);
    --color-indigo-400: oklch(67.3% 0.182 276.935);
    --color-indigo-500: oklch(58.5% 0.233 277.117);
    --color-indigo-600: oklch(51.1% 0.262 276.966);
    --color-indigo-700: oklch(45.7% 0.24 277.023);
    --color-indigo-900: oklch(35.9% 0.144 278.697);
    --color-violet-100: oklch(94.3% 0.029 294.588);
    --color-violet-200: oklch(89.4% 0.057 293.283);
    --color-violet-300: oklch(81.1% 0.111 293.571);
    --color-violet-600: oklch(54.1% 0.281 293.009);
    --color-fuchsia-600: oklch(59.1% 0.293 322.896);
    --color-rose-50: oklch(96.9% 0.015 12.422);
    --color-rose-100: oklch(94.1% 0.03 12.58);
    --color-rose-500: oklch(64.5% 0.246 16.439);
    --color-rose-600: oklch(58.6% 0.253 17.585);
    --color-rose-700: oklch(51.4% 0.222 16.935);
    --color-slate-50: oklch(98.4% 0.003 247.858);
    --color-slate-100: oklch(96.8% 0.007 247.896);
    --color-slate-200: oklch(92.9% 0.013 255.508);
    --color-slate-300: oklch(86.9% 0.022 252.894);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-slate-600: oklch(44.6% 0.043 257.281);
    --color-slate-700: oklch(37.2% 0.044 257.287);
    --color-slate-800: oklch(27.9% 0.041 260.031);
    --color-slate-900: oklch(20.8% 0.042 265.755);
    --color-slate-950: oklch(12.9% 0.042 264.695);
    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-gray-100: oklch(96.7% 0.003 264.542);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-gray-900: oklch(21% 0.034 264.665);
    --color-stone-50: oklch(98.5% 0.001 106.423);
    --color-stone-100: oklch(97% 0.001 106.424);
    --color-stone-200: oklch(92.3% 0.003 48.717);
    --color-stone-300: oklch(86.9% 0.005 56.366);
    --color-stone-400: oklch(70.9% 0.01 56.259);
    --color-stone-500: oklch(55.3% 0.013 58.071);
    --color-stone-600: oklch(44.4% 0.011 73.639);
    --color-stone-700: oklch(37.4% 0.01 67.558);
    --color-stone-800: oklch(26.8% 0.007 34.298);
    --color-stone-900: oklch(21.6% 0.006 56.043);
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-7xl: 80rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tight: -0.025em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --radius-lg: 1rem;
    --radius-2xl: 1rem;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-3xl: 64px;
    --default-transition-duration: 0.15s;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-background: oklch(98.5% 0.004 260);
    --color-foreground: oklch(25% 0.02 260);
  }
}
@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;
    -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: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol,
  ul,
  menu {
    list-style: none;
  }
  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    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;
  }
  button:not(:disabled),
  [role="button"]:not([aria-disabled="true"]),
  a[href],
  label[for],
  summary {
    cursor: pointer;
  }
  button:disabled,
  [aria-disabled="true"] {
    cursor: not-allowed;
  }
  input[type="checkbox"] {
    accent-color: oklch(55% 0.2 270);
  }
}
@layer components;
@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }
  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }
  .-top-0\.5 {
    top: calc(var(--spacing) * -0.5);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-0\.5 {
    top: calc(var(--spacing) * 0.5);
  }
  .top-1 {
    top: calc(var(--spacing) * 1);
  }
  .top-1\/2 {
    top: 50%;
  }
  .top-2 {
    top: calc(var(--spacing) * 2);
  }
  .top-20 {
    top: calc(var(--spacing) * 20);
  }
  .top-24 {
    top: calc(var(--spacing) * 24);
  }
  .-right-0\.5 {
    right: calc(var(--spacing) * -0.5);
  }
  .-right-24 {
    right: calc(var(--spacing) * -24);
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .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-\[22\%\] {
    right: 22%;
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }
  .bottom-14 {
    bottom: calc(var(--spacing) * 14);
  }
  .bottom-20 {
    bottom: calc(var(--spacing) * 20);
  }
  .bottom-24 {
    bottom: calc(var(--spacing) * 24);
  }
  .-left-24 {
    left: calc(var(--spacing) * -24);
  }
  .-left-\[21px\] {
    left: -21px;
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .left-1\/2 {
    left: 50%;
  }
  .left-3 {
    left: calc(var(--spacing) * 3);
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-40 {
    z-index: 40;
  }
  .z-50 {
    z-index: 50;
  }
  .z-\[100\] {
    z-index: 100;
  }
  .z-\[200\] {
    z-index: 200;
  }
  .-mx-1 {
    margin-inline: calc(var(--spacing) * -1);
  }
  .-mx-4 {
    margin-inline: calc(var(--spacing) * -4);
  }
  .mx-1 {
    margin-inline: calc(var(--spacing) * 1);
  }
  .mx-1\.5 {
    margin-inline: calc(var(--spacing) * 1.5);
  }
  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.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-2\.5 {
    margin-top: calc(var(--spacing) * 2.5);
  }
  .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-14 {
    margin-top: calc(var(--spacing) * 14);
  }
  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .mr-4 {
    margin-right: calc(var(--spacing) * 4);
  }
  .mb-0\.5 {
    margin-bottom: calc(var(--spacing) * 0.5);
  }
  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .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-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }
  .-ml-1 {
    margin-left: calc(var(--spacing) * -1);
  }
  .ml-0\.5 {
    margin-left: calc(var(--spacing) * 0.5);
  }
  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }
  .ml-auto {
    margin-left: auto;
  }
  .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;
  }
  .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;
  }
  .aspect-\[4\/3\] {
    aspect-ratio: 4/3;
  }
  .aspect-square {
    aspect-ratio: 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-4\.5 {
    height: calc(var(--spacing) * 4.5);
  }
  .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-48 {
    height: calc(var(--spacing) * 48);
  }
  .h-64 {
    height: calc(var(--spacing) * 64);
  }
  .h-\[calc\(100dvh-8\.5rem\)\] {
    height: calc(100dvh - 8.5rem);
  }
  .h-fit {
    height: fit-content;
  }
  .h-full {
    height: 100%;
  }
  .h-px {
    height: 1px;
  }
  .max-h-56 {
    max-height: calc(var(--spacing) * 56);
  }
  .max-h-\[220px\] {
    max-height: 220px;
  }
  .max-h-full {
    max-height: 100%;
  }
  .min-h-\[50vh\] {
    min-height: 50vh;
  }
  .min-h-\[300px\] {
    min-height: 300px;
  }
  .min-h-\[calc\(100vh-12rem\)\] {
    min-height: calc(100vh - 12rem);
  }
  .min-h-full {
    min-height: 100%;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }
  .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-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-4\.5 {
    width: calc(var(--spacing) * 4.5);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .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-44 {
    width: calc(var(--spacing) * 44);
  }
  .w-48 {
    width: calc(var(--spacing) * 48);
  }
  .w-64 {
    width: calc(var(--spacing) * 64);
  }
  .w-\[5\.25rem\] {
    width: 5.25rem;
  }
  .w-\[160px\] {
    width: 160px;
  }
  .w-\[220px\] {
    width: 220px;
  }
  .w-\[calc\(100\%-0\.75rem\)\] {
    width: calc(100% - 0.75rem);
  }
  .w-auto {
    width: auto;
  }
  .w-full {
    width: 100%;
  }
  .w-px {
    width: 1px;
  }
  .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-7xl {
    max-width: var(--container-7xl);
  }
  .max-w-14 {
    max-width: calc(var(--spacing) * 14);
  }
  .max-w-full {
    max-width: 100%;
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }
  .min-w-3\.5 {
    min-width: calc(var(--spacing) * 3.5);
  }
  .min-w-4 {
    min-width: calc(var(--spacing) * 4);
  }
  .min-w-\[280px\] {
    min-width: 280px;
  }
  .flex-1 {
    flex: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    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);
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,)
      var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .list-inside {
    list-style-position: inside;
  }
  .list-disc {
    list-style-type: disc;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-baseline {
    align-items: baseline;
  }
  .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\.5 {
    gap: calc(var(--spacing) * 0.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-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  :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-2\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(
      calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse)
    );
    margin-block-end: calc(
      calc(var(--spacing) * 2.5) * 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-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-10 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(
      calc(var(--spacing) * 10) * var(--tw-space-y-reverse)
    );
    margin-block-end: calc(
      calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse))
    );
  }
  .gap-x-1 {
    column-gap: calc(var(--spacing) * 1);
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }
  .gap-y-1 {
    row-gap: calc(var(--spacing) * 1);
  }
  .gap-y-4 {
    row-gap: calc(var(--spacing) * 4);
  }
  .gap-y-6 {
    row-gap: calc(var(--spacing) * 6);
  }
  .gap-y-10 {
    row-gap: calc(var(--spacing) * 10);
  }
  :where(.divide-y > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  :where(.divide-gray-50 > :not(:last-child)) {
    border-color: var(--color-gray-50);
  }
  :where(.divide-stone-100 > :not(:last-child)) {
    border-color: var(--color-stone-100);
  }
  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-full {
    border-radius: 3.40282e38px;
  }
  .rounded-lg {
    border-radius: 1rem;
  }
  .rounded-md {
    border-radius: 0.625rem;
  }
  .rounded-sm {
    border-radius: 0.375rem;
  }
  .rounded-xl {
    border-radius: 1.25rem;
  }
  .rounded-l-lg {
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-blue-200 {
    border-color: var(--color-blue-200);
  }
  .border-gray-50 {
    border-color: var(--color-gray-50);
  }
  .border-gray-100 {
    border-color: var(--color-gray-100);
  }
  .border-gray-200 {
    border-color: var(--color-gray-200);
  }
  .border-green-200 {
    border-color: var(--color-green-200);
  }
  .border-indigo-100 {
    border-color: var(--color-indigo-100);
  }
  .border-indigo-200 {
    border-color: var(--color-indigo-200);
  }
  .border-indigo-500 {
    border-color: var(--color-indigo-500);
  }
  .border-red-200 {
    border-color: var(--color-red-200);
  }
  .border-slate-100 {
    border-color: var(--color-slate-100);
  }
  .border-slate-200 {
    border-color: var(--color-slate-200);
  }
  .border-slate-200\/80 {
    border-color: #e2e8f0cc;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-slate-200\/80 {
      border-color: color-mix(
        in oklab,
        var(--color-slate-200) 80%,
        transparent
      );
    }
  }
  .border-stone-100 {
    border-color: var(--color-stone-100);
  }
  .border-stone-200 {
    border-color: var(--color-stone-200);
  }
  .border-stone-300 {
    border-color: var(--color-stone-300);
  }
  .border-stone-300\/60 {
    border-color: #d6d3d199;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-stone-300\/60 {
      border-color: color-mix(
        in oklab,
        var(--color-stone-300) 60%,
        transparent
      );
    }
  }
  .border-stone-300\/80 {
    border-color: #d6d3d1cc;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-stone-300\/80 {
      border-color: color-mix(
        in oklab,
        var(--color-stone-300) 80%,
        transparent
      );
    }
  }
  .border-stone-800 {
    border-color: var(--color-stone-800);
  }
  .border-transparent {
    border-color: #0000;
  }
  .border-violet-200 {
    border-color: var(--color-violet-200);
  }
  .border-violet-300 {
    border-color: var(--color-violet-300);
  }
  .border-white\/5 {
    border-color: #ffffff0d;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/5 {
      border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }
  .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\/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);
    }
  }
  .bg-\[\#FAF7F2\] {
    background-color: #faf7f2;
  }
  .bg-\[\#FAF7F2\]\/80 {
    background-color: oklab(97.7061% 0.0011878 0.00727004/0.8);
  }
  .bg-amber-100 {
    background-color: var(--color-amber-100);
  }
  .bg-amber-800 {
    background-color: var(--color-amber-800);
  }
  .bg-blue-50 {
    background-color: var(--color-blue-50);
  }
  .bg-blue-100 {
    background-color: var(--color-blue-100);
  }
  .bg-cyan-100 {
    background-color: var(--color-cyan-100);
  }
  .bg-emerald-100 {
    background-color: var(--color-emerald-100);
  }
  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }
  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }
  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }
  .bg-gray-300 {
    background-color: var(--color-gray-300);
  }
  .bg-green-50 {
    background-color: var(--color-green-50);
  }
  .bg-indigo-50 {
    background-color: var(--color-indigo-50);
  }
  .bg-indigo-50\/50 {
    background-color: #eef2ff80;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-indigo-50\/50 {
      background-color: color-mix(
        in oklab,
        var(--color-indigo-50) 50%,
        transparent
      );
    }
  }
  .bg-indigo-100 {
    background-color: var(--color-indigo-100);
  }
  .bg-indigo-500 {
    background-color: var(--color-indigo-500);
  }
  .bg-indigo-500\/90 {
    background-color: #625fffe6;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-indigo-500\/90 {
      background-color: color-mix(
        in oklab,
        var(--color-indigo-500) 90%,
        transparent
      );
    }
  }
  .bg-indigo-600 {
    background-color: var(--color-indigo-600);
  }
  .bg-indigo-600\/10 {
    background-color: #4f39f61a;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-indigo-600\/10 {
      background-color: color-mix(
        in oklab,
        var(--color-indigo-600) 10%,
        transparent
      );
    }
  }
  .bg-orange-100 {
    background-color: var(--color-orange-100);
  }
  .bg-orange-400 {
    background-color: var(--color-orange-400);
  }
  .bg-red-50 {
    background-color: var(--color-red-50);
  }
  .bg-red-500 {
    background-color: var(--color-red-500);
  }
  .bg-rose-100 {
    background-color: var(--color-rose-100);
  }
  .bg-rose-500 {
    background-color: var(--color-rose-500);
  }
  .bg-rose-700 {
    background-color: var(--color-rose-700);
  }
  .bg-sky-50 {
    background-color: var(--color-sky-50);
  }
  .bg-sky-100 {
    background-color: var(--color-sky-100);
  }
  .bg-sky-500 {
    background-color: var(--color-sky-500);
  }
  .bg-slate-50 {
    background-color: var(--color-slate-50);
  }
  .bg-slate-50\/60 {
    background-color: #f8fafc99;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-slate-50\/60 {
      background-color: color-mix(
        in oklab,
        var(--color-slate-50) 60%,
        transparent
      );
    }
  }
  .bg-slate-100 {
    background-color: var(--color-slate-100);
  }
  .bg-slate-200 {
    background-color: var(--color-slate-200);
  }
  .bg-slate-700 {
    background-color: var(--color-slate-700);
  }
  .bg-slate-800\/40 {
    background-color: #1d293d66;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-slate-800\/40 {
      background-color: color-mix(
        in oklab,
        var(--color-slate-800) 40%,
        transparent
      );
    }
  }
  .bg-slate-800\/50 {
    background-color: #1d293d80;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-slate-800\/50 {
      background-color: color-mix(
        in oklab,
        var(--color-slate-800) 50%,
        transparent
      );
    }
  }
  .bg-slate-900 {
    background-color: var(--color-slate-900);
  }
  .bg-slate-950 {
    background-color: var(--color-slate-950);
  }
  .bg-stone-50 {
    background-color: var(--color-stone-50);
  }
  .bg-stone-100 {
    background-color: var(--color-stone-100);
  }
  .bg-stone-200 {
    background-color: var(--color-stone-200);
  }
  .bg-stone-800 {
    background-color: var(--color-stone-800);
  }
  .bg-stone-900\/50 {
    background-color: #1c191780;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-stone-900\/50 {
      background-color: color-mix(
        in oklab,
        var(--color-stone-900) 50%,
        transparent
      );
    }
  }
  .bg-transparent {
    background-color: #0000;
  }
  .bg-violet-100 {
    background-color: var(--color-violet-100);
  }
  .bg-violet-600\/8 {
    background-color: #7f22fe14;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-violet-600\/8 {
      background-color: color-mix(
        in oklab,
        var(--color-violet-600) 8%,
        transparent
      );
    }
  }
  .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\/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\/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\/95 {
    background-color: #fffffff2;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/95 {
      background-color: color-mix(
        in oklab,
        var(--color-white) 95%,
        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-gradient-to-br {
    --tw-gradient-position: to bottom right 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));
  }
  .from-indigo-50 {
    --tw-gradient-from: var(--color-indigo-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-indigo-500 {
    --tw-gradient-from: 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)
    );
  }
  .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-slate-950 {
    --tw-gradient-from: var(--color-slate-950);
    --tw-gradient-stops: var(
      --tw-gradient-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-950\/95 {
    --tw-gradient-from: #020618f2;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .from-slate-950\/95 {
      --tw-gradient-from: color-mix(
        in oklab,
        var(--color-slate-950) 95%,
        transparent
      );
    }
  }
  .from-slate-950\/95 {
    --tw-gradient-stops: var(
      --tw-gradient-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)
    );
  }
  .via-indigo-500 {
    --tw-gradient-via: var(--color-indigo-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-slate-900\/75 {
    --tw-gradient-via: #0f172bbf;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .via-slate-900\/75 {
      --tw-gradient-via: color-mix(
        in oklab,
        var(--color-slate-900) 75%,
        transparent
      );
    }
  }
  .via-slate-900\/75 {
    --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-violet-600 {
    --tw-gradient-via: var(--color-violet-600);
    --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-fuchsia-600 {
    --tw-gradient-to: var(--color-fuchsia-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-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-violet-600 {
    --tw-gradient-to: var(--color-violet-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-white {
    --tw-gradient-to: 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)
    );
  }
  .fill-indigo-500 {
    fill: var(--color-indigo-500);
  }
  .fill-red-500 {
    fill: var(--color-red-500);
  }
  .fill-rose-500 {
    fill: var(--color-rose-500);
  }
  .stroke-\[2\] {
    stroke-width: 2px;
  }
  .object-contain {
    object-fit: contain;
  }
  .object-cover {
    object-fit: cover;
  }
  .p-0 {
    padding: calc(var(--spacing) * 0);
  }
  .p-0\.5 {
    padding: calc(var(--spacing) * 0.5);
  }
  .p-1 {
    padding: calc(var(--spacing) * 1);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }
  .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-8 {
    padding: calc(var(--spacing) * 8);
  }
  .px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }
  .px-0\.5 {
    padding-inline: calc(var(--spacing) * 0.5);
  }
  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }
  .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-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .\!py-16 {
    padding-block: calc(var(--spacing) * 16) !important;
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.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-16 {
    padding-block: calc(var(--spacing) * 16);
  }
  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }
  .py-24 {
    padding-block: calc(var(--spacing) * 24);
  }
  .pt-0 {
    padding-top: calc(var(--spacing) * 0);
  }
  .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-10 {
    padding-top: calc(var(--spacing) * 10);
  }
  .pt-20 {
    padding-top: calc(var(--spacing) * 20);
  }
  .pr-11 {
    padding-right: calc(var(--spacing) * 11);
  }
  .pb-0\.5 {
    padding-bottom: calc(var(--spacing) * 0.5);
  }
  .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-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }
  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }
  .pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
  }
  .pb-24 {
    padding-bottom: calc(var(--spacing) * 24);
  }
  .pb-28 {
    padding-bottom: calc(var(--spacing) * 28);
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .font-serif {
    font-family: var(--font-serif);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    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-6xl {
    font-size: var(--text-6xl);
    line-height: var(--tw-leading, var(--text-6xl--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-\[9px\] {
    font-size: 9px;
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .leading-7 {
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }
  .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-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-\[0\.15em\] {
    --tw-tracking: 0.15em;
    letter-spacing: 0.15em;
  }
  .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);
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .whitespace-pre-line {
    white-space: pre-line;
  }
  .text-amber-600 {
    color: var(--color-amber-600);
  }
  .text-amber-900 {
    color: var(--color-amber-900);
  }
  .text-amber-900\/60 {
    color: #7b330699;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-900\/60 {
      color: color-mix(in oklab, var(--color-amber-900) 60%, transparent);
    }
  }
  .text-amber-900\/70 {
    color: #7b3306b3;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-900\/70 {
      color: color-mix(in oklab, var(--color-amber-900) 70%, transparent);
    }
  }
  .text-blue-700 {
    color: var(--color-blue-700);
  }
  .text-blue-800 {
    color: var(--color-blue-800);
  }
  .text-cyan-600 {
    color: var(--color-cyan-600);
  }
  .text-emerald-600 {
    color: var(--color-emerald-600);
  }
  .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-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-500 {
    color: var(--color-green-500);
  }
  .text-green-800 {
    color: var(--color-green-800);
  }
  .text-indigo-100 {
    color: var(--color-indigo-100);
  }
  .text-indigo-300\/80 {
    color: #a4b3ffcc;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .text-indigo-300\/80 {
      color: color-mix(in oklab, var(--color-indigo-300) 80%, transparent);
    }
  }
  .text-indigo-400 {
    color: var(--color-indigo-400);
  }
  .text-indigo-500 {
    color: var(--color-indigo-500);
  }
  .text-indigo-600 {
    color: var(--color-indigo-600);
  }
  .text-indigo-700 {
    color: var(--color-indigo-700);
  }
  .text-indigo-900 {
    color: var(--color-indigo-900);
  }
  .text-muted {
    color: oklch(96% 0.008 260);
  }
  .text-orange-700 {
    color: var(--color-orange-700);
  }
  .text-red-500 {
    color: var(--color-red-500);
  }
  .text-red-800 {
    color: var(--color-red-800);
  }
  .text-rose-500 {
    color: var(--color-rose-500);
  }
  .text-rose-600 {
    color: var(--color-rose-600);
  }
  .text-rose-700 {
    color: var(--color-rose-700);
  }
  .text-sky-600 {
    color: var(--color-sky-600);
  }
  .text-slate-200 {
    color: var(--color-slate-200);
  }
  .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-700 {
    color: var(--color-slate-700);
  }
  .text-slate-800 {
    color: var(--color-slate-800);
  }
  .text-slate-900 {
    color: var(--color-slate-900);
  }
  .text-stone-300 {
    color: var(--color-stone-300);
  }
  .text-stone-400 {
    color: var(--color-stone-400);
  }
  .text-stone-500 {
    color: var(--color-stone-500);
  }
  .text-stone-600 {
    color: var(--color-stone-600);
  }
  .text-stone-700 {
    color: var(--color-stone-700);
  }
  .text-stone-800 {
    color: var(--color-stone-800);
  }
  .text-stone-900 {
    color: var(--color-stone-900);
  }
  .text-violet-600 {
    color: var(--color-violet-600);
  }
  .text-white {
    color: var(--color-white);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .line-through {
    text-decoration-line: line-through;
  }
  .underline-offset-2 {
    text-underline-offset: 2px;
  }
  .underline-offset-4 {
    text-underline-offset: 4px;
  }
  .accent-indigo-600 {
    accent-color: var(--color-indigo-600);
  }
  .opacity-60 {
    opacity: 0.6;
  }
  .opacity-90 {
    opacity: 0.9;
  }
  .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_-4px_20px_rgba\(0\,0\,0\,0\.06\)\] {
    --tw-shadow: 0 -4px 20px var(--tw-shadow-color, #0000000f);
    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);
  }
  .ring,
  .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);
  }
  .shadow-indigo-500\/10 {
    --tw-shadow-color: #625fff1a;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .shadow-indigo-500\/10 {
      --tw-shadow-color: color-mix(
        in oklab,
        color-mix(in oklab, var(--color-indigo-500) 10%, transparent)
          var(--tw-shadow-alpha),
        transparent
      );
    }
  }
  .shadow-indigo-500\/25 {
    --tw-shadow-color: #625fff40;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .shadow-indigo-500\/25 {
      --tw-shadow-color: color-mix(
        in oklab,
        color-mix(in oklab, var(--color-indigo-500) 25%, transparent)
          var(--tw-shadow-alpha),
        transparent
      );
    }
  }
  .shadow-indigo-600\/20 {
    --tw-shadow-color: #4f39f633;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .shadow-indigo-600\/20 {
      --tw-shadow-color: color-mix(
        in oklab,
        color-mix(in oklab, var(--color-indigo-600) 20%, transparent)
          var(--tw-shadow-alpha),
        transparent
      );
    }
  }
  .shadow-indigo-600\/25 {
    --tw-shadow-color: #4f39f640;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .shadow-indigo-600\/25 {
      --tw-shadow-color: color-mix(
        in oklab,
        color-mix(in oklab, var(--color-indigo-600) 25%, transparent)
          var(--tw-shadow-alpha),
        transparent
      );
    }
  }
  .shadow-indigo-600\/30 {
    --tw-shadow-color: #4f39f64d;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .shadow-indigo-600\/30 {
      --tw-shadow-color: color-mix(
        in oklab,
        color-mix(in oklab, var(--color-indigo-600) 30%, transparent)
          var(--tw-shadow-alpha),
        transparent
      );
    }
  }
  .shadow-indigo-900\/40 {
    --tw-shadow-color: #312c8566;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .shadow-indigo-900\/40 {
      --tw-shadow-color: color-mix(
        in oklab,
        color-mix(in oklab, var(--color-indigo-900) 40%, transparent)
          var(--tw-shadow-alpha),
        transparent
      );
    }
  }
  .shadow-indigo-900\/50 {
    --tw-shadow-color: #312c8580;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .shadow-indigo-900\/50 {
      --tw-shadow-color: color-mix(
        in oklab,
        color-mix(in oklab, var(--color-indigo-900) 50%, transparent)
          var(--tw-shadow-alpha),
        transparent
      );
    }
  }
  .shadow-slate-900\/15 {
    --tw-shadow-color: #0f172b26;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .shadow-slate-900\/15 {
      --tw-shadow-color: color-mix(
        in oklab,
        color-mix(in oklab, var(--color-slate-900) 15%, transparent)
          var(--tw-shadow-alpha),
        transparent
      );
    }
  }
  .ring-amber-800\/40 {
    --tw-ring-color: #953d0066;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .ring-amber-800\/40 {
      --tw-ring-color: color-mix(
        in oklab,
        var(--color-amber-800) 40%,
        transparent
      );
    }
  }
  .ring-gray-100 {
    --tw-ring-color: var(--color-gray-100);
  }
  .ring-indigo-100 {
    --tw-ring-color: var(--color-indigo-100);
  }
  .ring-sky-100 {
    --tw-ring-color: var(--color-sky-100);
  }
  .ring-slate-100 {
    --tw-ring-color: var(--color-slate-100);
  }
  .ring-white\/25 {
    --tw-ring-color: #ffffff40;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .ring-white\/25 {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 25%, transparent);
    }
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .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,);
  }
  .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-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,);
  }
  .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-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-shadow {
    transition-property: box-shadow;
    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));
  }
  .duration-300 {
    --tw-duration: 0.3s;
    transition-duration: 0.3s;
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .\[writing-mode\:vertical-lr\] {
    writing-mode: vertical-lr;
  }
  @media (hover: hover) {
    .group-hover\:translate-x-0\.5:is(:where(.group):hover *) {
      --tw-translate-x: calc(var(--spacing) * 0.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .group-hover\:scale-105:is(:where(.group):hover *) {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-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\:animate-pulse:is(:where(.group):hover *) {
      animation: var(--animate-pulse);
    }
    .group-hover\:text-slate-600:is(:where(.group):hover *) {
      color: var(--color-slate-600);
    }
  }
  .placeholder\:text-slate-400::placeholder {
    color: var(--color-slate-400);
  }
  .after\:absolute:after {
    content: var(--tw-content);
    position: absolute;
  }
  .after\:inset-x-3:after {
    content: var(--tw-content);
    inset-inline: calc(var(--spacing) * 3);
  }
  .after\:bottom-0:after {
    content: var(--tw-content);
    bottom: calc(var(--spacing) * 0);
  }
  .after\:h-0\.5:after {
    content: var(--tw-content);
    height: calc(var(--spacing) * 0.5);
  }
  .after\:rounded-full:after {
    content: var(--tw-content);
    border-radius: 3.40282e38px;
  }
  .after\:bg-indigo-600:after {
    content: var(--tw-content);
    background-color: var(--color-indigo-600);
  }
  .last\:border-0:last-child {
    border-style: var(--tw-border-style);
    border-width: 0;
  }
  .focus-within\:shadow-md:focus-within {
    --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);
  }
  .focus-within\:shadow-indigo-500\/15:focus-within {
    --tw-shadow-color: #625fff26;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .focus-within\:shadow-indigo-500\/15:focus-within {
      --tw-shadow-color: color-mix(
        in oklab,
        color-mix(in oklab, var(--color-indigo-500) 15%, transparent)
          var(--tw-shadow-alpha),
        transparent
      );
    }
  }
  @media (hover: hover) {
    .hover\:-translate-y-0\.5:hover {
      --tw-translate-y: calc(var(--spacing) * -0.5);
      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\:border-indigo-300:hover {
      border-color: var(--color-indigo-300);
    }
    .hover\:border-indigo-400\/40:hover {
      border-color: #7d87ff66;
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-indigo-400\/40:hover {
        border-color: color-mix(
          in oklab,
          var(--color-indigo-400) 40%,
          transparent
        );
      }
    }
    .hover\:border-indigo-500\/30:hover {
      border-color: #625fff4d;
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-indigo-500\/30:hover {
        border-color: color-mix(
          in oklab,
          var(--color-indigo-500) 30%,
          transparent
        );
      }
    }
    .hover\:border-stone-300:hover {
      border-color: var(--color-stone-300);
    }
    .hover\:border-stone-800:hover {
      border-color: var(--color-stone-800);
    }
    .hover\:border-violet-300:hover {
      border-color: var(--color-violet-300);
    }
    .hover\:border-white\/50:hover {
      border-color: #ffffff80;
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-white\/50:hover {
        border-color: color-mix(in oklab, var(--color-white) 50%, transparent);
      }
    }
    .hover\:bg-gray-50:hover {
      background-color: var(--color-gray-50);
    }
    .hover\:bg-indigo-50:hover {
      background-color: var(--color-indigo-50);
    }
    .hover\:bg-indigo-100:hover {
      background-color: var(--color-indigo-100);
    }
    .hover\:bg-indigo-500\/10:hover {
      background-color: #625fff1a;
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-indigo-500\/10:hover {
        background-color: color-mix(
          in oklab,
          var(--color-indigo-500) 10%,
          transparent
        );
      }
    }
    .hover\:bg-indigo-600:hover {
      background-color: var(--color-indigo-600);
    }
    .hover\:bg-indigo-700:hover {
      background-color: var(--color-indigo-700);
    }
    .hover\:bg-orange-500:hover {
      background-color: var(--color-orange-500);
    }
    .hover\:bg-red-600:hover {
      background-color: var(--color-red-600);
    }
    .hover\:bg-slate-50:hover {
      background-color: var(--color-slate-50);
    }
    .hover\:bg-slate-100:hover {
      background-color: var(--color-slate-100);
    }
    .hover\:bg-slate-800:hover {
      background-color: var(--color-slate-800);
    }
    .hover\:bg-stone-50\/80:hover {
      background-color: #fafaf9cc;
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-stone-50\/80:hover {
        background-color: color-mix(
          in oklab,
          var(--color-stone-50) 80%,
          transparent
        );
      }
    }
    .hover\:bg-stone-200:hover {
      background-color: var(--color-stone-200);
    }
    .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\/30:hover {
      background-color: #ffffff4d;
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/30:hover {
        background-color: color-mix(
          in oklab,
          var(--color-white) 30%,
          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\:text-amber-700:hover {
      color: var(--color-amber-700);
    }
    .hover\:text-amber-900:hover {
      color: var(--color-amber-900);
    }
    .hover\:text-gray-600:hover {
      color: var(--color-gray-600);
    }
    .hover\:text-indigo-300:hover {
      color: var(--color-indigo-300);
    }
    .hover\:text-indigo-400:hover {
      color: var(--color-indigo-400);
    }
    .hover\:text-indigo-600:hover {
      color: var(--color-indigo-600);
    }
    .hover\:text-red-500:hover {
      color: var(--color-red-500);
    }
    .hover\:text-rose-700:hover {
      color: var(--color-rose-700);
    }
    .hover\:text-slate-900:hover {
      color: var(--color-slate-900);
    }
    .hover\:text-stone-800:hover {
      color: var(--color-stone-800);
    }
    .hover\:text-stone-900:hover {
      color: var(--color-stone-900);
    }
    .hover\:text-white:hover {
      color: var(--color-white);
    }
    .hover\:text-yellow-600:hover {
      color: var(--color-yellow-600);
    }
    .hover\:underline:hover {
      text-decoration-line: underline;
    }
    .hover\:opacity-95:hover {
      opacity: 0.95;
    }
    .hover\:opacity-100:hover {
      opacity: 1;
    }
    .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-md:hover {
      --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);
    }
    .hover\:shadow-sm:hover {
      --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);
    }
  }
  .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-indigo-500\/50:focus {
    --tw-ring-color: #625fff80;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-indigo-500\/50:focus {
      --tw-ring-color: color-mix(
        in oklab,
        var(--color-indigo-500) 50%,
        transparent
      );
    }
  }
  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }
  .focus-visible\:border-indigo-400:focus-visible {
    border-color: var(--color-indigo-400);
  }
  .focus-visible\:bg-white:focus-visible {
    background-color: var(--color-white);
  }
  .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-indigo-500\/20:focus-visible {
    --tw-ring-color: #625fff33;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-indigo-500\/20:focus-visible {
      --tw-ring-color: color-mix(
        in oklab,
        var(--color-indigo-500) 20%,
        transparent
      );
    }
  }
  .focus-visible\:ring-indigo-500\/40:focus-visible {
    --tw-ring-color: #625fff66;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-indigo-500\/40:focus-visible {
      --tw-ring-color: color-mix(
        in oklab,
        var(--color-indigo-500) 40%,
        transparent
      );
    }
  }
  .focus-visible\:outline-none:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }
  .active\:scale-\[0\.98\]:active {
    scale: 0.98;
  }
  .active\:bg-indigo-50:active {
    background-color: var(--color-indigo-50);
  }
  .active\:bg-rose-50:active {
    background-color: var(--color-rose-50);
  }
  .active\:bg-slate-50:active {
    background-color: var(--color-slate-50);
  }
  .active\:bg-white:active {
    background-color: var(--color-white);
  }
  .active\:text-indigo-700:active {
    color: var(--color-indigo-700);
  }
  .active\:text-rose-500:active {
    color: var(--color-rose-500);
  }
  .active\:opacity-60:active {
    opacity: 0.6;
  }
  .disabled\:pointer-events-none:disabled {
    pointer-events: none;
  }
  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }
  .disabled\:opacity-50:disabled {
    opacity: 0.5;
  }
  @media (width>=40rem) {
    .sm\:block {
      display: block;
    }
    .sm\:inline {
      display: inline;
    }
    .sm\:h-12 {
      height: calc(var(--spacing) * 12);
    }
    .sm\:h-28 {
      height: calc(var(--spacing) * 28);
    }
    .sm\:max-h-64 {
      max-height: calc(var(--spacing) * 64);
    }
    .sm\:max-h-\[280px\] {
      max-height: 280px;
    }
    .sm\:w-12 {
      width: calc(var(--spacing) * 12);
    }
    .sm\:w-28 {
      width: calc(var(--spacing) * 28);
    }
    .sm\:w-\[52\%\] {
      width: 52%;
    }
    .sm\:w-\[180px\] {
      width: 180px;
    }
    .sm\:w-auto {
      width: auto;
    }
    .sm\:max-w-\[50\%\] {
      max-width: 50%;
    }
    .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\:flex-col {
      flex-direction: column;
    }
    .sm\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }
    .sm\:via-slate-900\/60 {
      --tw-gradient-via: #0f172b99;
    }
    @supports (color: color-mix(in lab, red, red)) {
      .sm\:via-slate-900\/60 {
        --tw-gradient-via: color-mix(
          in oklab,
          var(--color-slate-900) 60%,
          transparent
        );
      }
    }
    .sm\:via-slate-900\/60 {
      --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);
    }
    .sm\:p-5 {
      padding: calc(var(--spacing) * 5);
    }
    .sm\:p-6 {
      padding: calc(var(--spacing) * 6);
    }
    .sm\:px-10 {
      padding-inline: calc(var(--spacing) * 10);
    }
    .sm\:pt-6 {
      padding-top: calc(var(--spacing) * 6);
    }
    .sm\:text-center {
      text-align: center;
    }
    .sm\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
    .sm\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  @media (width>=48rem) {
    .md\:col-span-2 {
      grid-column: span 2 / span 2;
    }
    .md\:mt-3 {
      margin-top: calc(var(--spacing) * 3);
    }
    .md\:block {
      display: block;
    }
    .md\:flex {
      display: flex;
    }
    .md\:hidden {
      display: none;
    }
    .md\:h-14 {
      height: calc(var(--spacing) * 14);
    }
    .md\:max-h-72 {
      max-height: calc(var(--spacing) * 72);
    }
    .md\:w-14 {
      width: calc(var(--spacing) * 14);
    }
    .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\:gap-3 {
      gap: calc(var(--spacing) * 3);
    }
    :where(.md\: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(.md\: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))
      );
    }
    .md\:rounded-2xl {
      border-radius: var(--radius-2xl);
    }
    .md\:px-4 {
      padding-inline: calc(var(--spacing) * 4);
    }
    .md\:px-5 {
      padding-inline: calc(var(--spacing) * 5);
    }
    .md\:py-4 {
      padding-block: calc(var(--spacing) * 4);
    }
    .md\:py-5 {
      padding-block: calc(var(--spacing) * 5);
    }
    .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-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }
  @media (width>=64rem) {
    .lg\:col-span-3 {
      grid-column: span 3 / span 3;
    }
    .lg\:col-span-9 {
      grid-column: span 9 / span 9;
    }
    .lg\:block {
      display: block;
    }
    .lg\:max-h-\[320px\] {
      max-height: 320px;
    }
    .lg\:min-h-\[360px\] {
      min-height: 360px;
    }
    .lg\:w-\[50\%\] {
      width: 50%;
    }
    .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-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    .lg\:grid-cols-\[1fr_280px\] {
      grid-template-columns: 1fr 280px;
    }
    .lg\:grid-cols-\[1fr_300px\] {
      grid-template-columns: 1fr 300px;
    }
    .lg\:gap-2 {
      gap: calc(var(--spacing) * 2);
    }
    .lg\:gap-8 {
      gap: calc(var(--spacing) * 8);
    }
    .lg\:gap-16 {
      gap: calc(var(--spacing) * 16);
    }
    .lg\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }
    .lg\:px-14 {
      padding-inline: calc(var(--spacing) * 14);
    }
    .lg\:pt-6 {
      padding-top: calc(var(--spacing) * 6);
    }
    .lg\:text-5xl {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
    .lg\:text-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }
  @media (width>=80rem) {
    .xl\:block {
      display: block;
    }
    .xl\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
}
* {
  box-sizing: border-box;
}
body {
  background: var(--color-background);
  min-height: 100vh;
  color: var(--color-foreground);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  font-family:
    Inter,
    Segoe UI,
    PingFang SC,
    Microsoft YaHei,
    system-ui,
    sans-serif;
}
#app {
  min-height: 100vh;
}
.ui-sans {
  font-family:
    Inter,
    Segoe UI,
    PingFang SC,
    Microsoft YaHei,
    system-ui,
    sans-serif;
}
.pt-safe {
  padding-top: env(safe-area-inset-top, 0px);
}
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.pb-tab {
  padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
}
.mobile-app {
  background: oklch(98.5% 0.004 260);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.page-eyebrow {
  letter-spacing: 0.05em;
  color: oklch(55% 0.2 270);
  font-size: 0.75rem;
  font-weight: 600;
}
.page-title {
  color: oklch(25% 0.02 260);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
}
.page-desc {
  color: oklch(52% 0.02 260);
  margin-top: 0.5rem;
  font-size: 0.875rem;
}
.section-title {
  color: oklch(25% 0.02 260);
  font-size: 1.375rem;
  font-weight: 700;
}
.section-title em {
  color: #fff;
  background: oklch(55% 0.2 270);
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
  min-width: 1.75rem;
  height: 1.75rem;
  margin-right: 0.5rem;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  display: inline-flex;
}
.panel {
  border-radius: var(--radius-lg);
  background: #fff;
  border: none;
  box-shadow:
    0 1px 3px oklch(25% 0.02 260/0.06),
    0 4px 12px oklch(25% 0.02 260/0.04);
}
.panel-head {
  color: oklch(25% 0.02 260);
  border-bottom: 1px solid oklch(93% 0.01 260);
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
}
.panel-body {
  padding: 1.25rem;
}
.price {
  color: oklch(55% 0.22 25);
  font-weight: 600;
}
.price-lg {
  color: oklch(55% 0.22 25);
  font-size: 1.5rem;
  font-weight: 700;
}
.text-muted {
  color: oklch(52% 0.02 260);
}
.text-subtle {
  color: oklch(62% 0.015 260);
}
.empty-state {
  text-align: center;
  color: oklch(62% 0.015 260);
  padding: 4rem 1rem;
}
.sticky-bar {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: oklch(99% 0.002 260/0.95);
  border-top: 1px solid oklch(91% 0.012 260);
}
.tab-item {
  color: oklch(52% 0.02 260);
  border-radius: 9999px;
  flex-shrink: 0;
  padding: 0.625rem 1.125rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.15s;
}
.tab-item.is-active {
  color: #fff;
  background: oklch(55% 0.2 270);
  font-weight: 600;
}
.scroll-snap-x {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.scroll-snap-item {
  scroll-snap-align: start;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
@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-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-divide-y-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-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-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}

/* Shared Hanbaimu theme: warm red + orange */
:root,
:host {
  --font-sans:
    "Noto Sans SC",
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei",
    system-ui,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  --color-indigo-50: #fff7f4;
  --color-indigo-100: #ffe8e1;
  --color-indigo-200: #ffcfc2;
  --color-indigo-300: #f9a28d;
  --color-indigo-400: #ef795d;
  --color-indigo-500: #e45b41;
  --color-indigo-600: #d94b45;
  --color-indigo-700: #bd353d;
  --color-indigo-900: #76252e;
  --color-violet-100: #fff1e8;
  --color-violet-200: #ffd9c8;
  --color-violet-300: #f9aa88;
  --color-violet-600: #e35f3f;
  --color-slate-50: #f8f8f8;
  --color-slate-100: #f1f1f1;
  --color-slate-200: #e5e5e5;
  --color-slate-300: #d0d0d0;
  --color-slate-400: #9a9a9a;
  --color-slate-500: #737373;
  --color-slate-600: #555;
  --color-slate-700: #404040;
  --color-slate-800: #2d2d2d;
  --color-slate-900: #1f1f1f;
  --color-slate-950: #171717;
  --color-background: #f5f5f5;
  --color-foreground: #2d2d2d;
}

body {
  background: linear-gradient(180deg, #f7f7f7 0%, #f3f3f3 100%);
  color: var(--color-foreground);
}

#app,
.mobile-app,
.min-h-screen.bg-slate-50 {
  background: transparent;
}

.ui-sans {
  font-family: var(--font-sans);
}

.bg-slate-50 {
  background-color: #f7f7f7;
}

.bg-slate-100 {
  background-color: #f0f0f0;
}

.bg-white,
.bg-white\/90,
.bg-white\/95 {
  background-color: rgb(255 255 255 / 96%);
}

.bg-white\/5 {
  background-color: rgb(255 255 255 / 8%);
}

.bg-white\/10 {
  background-color: rgb(255 255 255 / 12%);
}

.bg-white\/20 {
  background-color: rgb(255 255 255 / 18%);
}

.bg-indigo-50 {
  background-color: #fff7f4;
}

.bg-indigo-100 {
  background-color: #ffe8e1;
}

.bg-indigo-600,
.hover\:bg-indigo-600:hover {
  background: linear-gradient(135deg, #ef6b3b 0%, #d94b45 100%);
}

.bg-indigo-600\/10,
.hover\:bg-indigo-500\/10:hover {
  background-color: rgb(217 75 69 / 10%);
}

.bg-slate-950 {
  background: linear-gradient(180deg, #242424 0%, #171717 100%);
}

.text-indigo-600,
.hover\:text-indigo-600:hover {
  color: #d94b45;
}

.border-indigo-500,
.hover\:border-indigo-500\/30:hover {
  border-color: rgb(217 75 69 / 42%);
}

.from-indigo-500 {
  --tw-gradient-from: #ef6b3b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 107 59 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:
    var(--tw-gradient-from),
    var(--tw-gradient-to);
}

.to-violet-600 {
  --tw-gradient-to: #d94b45 var(--tw-gradient-to-position);
}

.page-eyebrow {
  letter-spacing: 0.18em;
  color: #d94b45;
}

.page-title,
.section-title,
.panel-head {
  color: #252525;
}

.page-title,
.section-title {
  letter-spacing: -0.03em;
}

.page-desc,
.text-muted,
.tab-item {
  color: #666;
}

.text-subtle,
.empty-state {
  color: #999;
}

.section-title em,
.tab-item.is-active {
  background:
    linear-gradient(135deg, #ef6b3b 0%, #d94b45 100%);
  color: #fff7f4;
  box-shadow: 0 10px 24px rgb(217 75 69 / 18%);
}

.rounded-2xl,
.md\:rounded-2xl {
  border-radius: 1.4rem;
}

.panel,
.rounded-2xl.bg-white,
.rounded-2xl.bg-slate-50,
.shadow-sm,
.shadow-lg {
  box-shadow:
    0 10px 30px rgb(0 0 0 / 7%),
    0 2px 10px rgb(217 75 69 / 5%);
}

.panel {
  border: 1px solid #ececec;
  background: rgb(255 255 255 / 96%);
}

.panel-head {
  border-bottom-color: #ececec;
  background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
}

.price,
.price-lg {
  color: #d94b45;
}

.sticky-bar {
  background: rgb(255 255 255 / 96%);
  border-top-color: #ececec;
  backdrop-filter: blur(16px);
}

header.bg-white.pt-safe.shadow-sm {
  background: rgb(255 255 255 / 96%);
  border-bottom: 1px solid #ececec;
  backdrop-filter: blur(18px);
}

header.sticky.top-0.z-40.flex.h-11.items-center.bg-indigo-500.px-1.pt-safe.shadow-sm {
  background:
    linear-gradient(135deg, #ef6b3b 0%, #d94b45 65%, #bd353d 100%);
}

footer.relative.mt-10.overflow-hidden.bg-slate-950.text-slate-300 {
  border-top: 1px solid rgb(217 75 69 / 14%);
}

.fixed.bottom-0.left-0.right-0.z-50.border-t.border-slate-100.bg-white\/95 {
  background: rgb(255 255 255 / 96%);
  border-top-color: #ececec;
}

.ui-sans.fixed.inset-y-0.right-0.z-50.flex.w-full.max-w-lg.flex-col.bg-\[\#FAF7F2\].shadow-2xl {
  background: linear-gradient(180deg, #fff 0%, #f7f7f7 100%);
}

button,
a,
.transition,
.hover\:bg-indigo-600:hover,
.hover\:text-indigo-600:hover {
  transition:
    background-color 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}

button:hover,
a:hover {
  box-shadow: 0 12px 24px rgb(36 31 26 / 6%);
}

input[type="checkbox"] {
  accent-color: #d94b45;
}

/* Layout refresh: lighter, airier home page */
.space-y-8 {
  gap: 2.6rem;
}

.mx-auto.max-w-7xl.px-4.pb-16.pt-4.lg\:px-6.lg\:pt-6 {
  padding-top: 1.4rem;
  padding-bottom: 5rem;
}

.relative.overflow-hidden.rounded-2xl.bg-slate-900.shadow-xl.shadow-slate-900\/15 {
  border: 1px solid rgb(223 211 194 / 45%);
  background:
    radial-gradient(circle at top right, rgb(240 230 200 / 72%), transparent 30%),
    linear-gradient(135deg, #f8f2e8 0%, #eff5ee 56%, #e2ecde 100%);
  box-shadow:
    0 20px 44px rgb(36 31 26 / 8%),
    0 6px 16px rgb(217 75 69 / 5%);
}

.relative.overflow-hidden.rounded-2xl.bg-slate-900.shadow-xl.shadow-slate-900\/15
  .absolute.inset-y-0.right-0.flex.w-full.items-center.justify-center.bg-slate-800\/40 {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 32%) 0%, rgb(255 255 255 / 12%) 100%);
}

.relative.overflow-hidden.rounded-2xl.bg-slate-900.shadow-xl.shadow-slate-900\/15
  .pointer-events-none.absolute.inset-0.bg-gradient-to-r.from-slate-950\/95.via-slate-900\/75.to-transparent {
  background:
    linear-gradient(90deg, rgb(255 248 239 / 96%) 0%, rgb(255 248 239 / 82%) 42%, rgb(255 248 239 / 12%) 100%);
}

.relative.overflow-hidden.rounded-2xl.bg-slate-900.shadow-xl.shadow-slate-900\/15
  .relative.z-10.flex.min-h-\[300px\].flex-col.justify-center.px-6.py-8.sm\:max-w-\[50\%\].sm\:px-10.lg\:min-h-\[360px\].lg\:px-14 {
  padding-top: 3.2rem;
  padding-bottom: 3.2rem;
}

.relative.overflow-hidden.rounded-2xl.bg-slate-900.shadow-xl.shadow-slate-900\/15
  .inline-block.rounded-full.bg-indigo-500\/90 {
  background: rgb(255 251 245 / 78%);
  color: #8a6a3f;
  border: 1px solid rgb(218 183 120 / 45%);
}

.relative.overflow-hidden.rounded-2xl.bg-slate-900.shadow-xl.shadow-slate-900\/15
  .mt-4.text-3xl.font-bold.leading-tight.text-white {
  color: #1f332b;
  font-size: clamp(2.3rem, 4vw, 3.6rem);
  letter-spacing: -0.05em;
}

.relative.overflow-hidden.rounded-2xl.bg-slate-900.shadow-xl.shadow-slate-900\/15
  .mt-3.text-sm.leading-relaxed.text-slate-200 {
  color: #5f665f;
  max-width: 32rem;
}

.relative.overflow-hidden.rounded-2xl.bg-slate-900.shadow-xl.shadow-slate-900\/15
  .shadow-lg.shadow-indigo-600\/30 {
  box-shadow:
    0 16px 34px rgb(217 75 69 / 18%),
    0 4px 10px rgb(217 75 69 / 10%);
}

.relative.overflow-hidden.rounded-2xl.bg-slate-900.shadow-xl.shadow-slate-900\/15
  .border-white\/30.bg-white\/10.text-white {
  border-color: rgb(217 75 69 / 16%);
  background: rgb(255 251 245 / 74%);
  color: #d94b45;
}

.relative.overflow-hidden.rounded-2xl.bg-slate-900.shadow-xl.shadow-slate-900\/15
  .border-white\/30.bg-white\/10.text-white:hover {
  border-color: rgb(217 75 69 / 28%);
  background: rgb(255 255 255 / 92%);
  color: #bd353d;
}

.grid.grid-cols-2.gap-3.sm\:grid-cols-4.sm\:gap-4 {
  gap: 1rem;
}

.group.flex.items-center.gap-3.rounded-2xl.bg-white.p-4.shadow-sm.ring-1.ring-slate-100 {
  background: rgb(255 255 255 / 98%);
  padding: 1.05rem 1rem;
  border: 1px solid #ececec;
}

.group.flex.items-center.gap-3.rounded-2xl.bg-white.p-4.shadow-sm.ring-1.ring-slate-100:hover {
  transform: translateY(-3px);
}

.group.flex.items-center.gap-3.rounded-2xl.bg-white.p-4.shadow-sm.ring-1.ring-slate-100
  .block.text-sm.font-semibold.text-slate-800 {
  font-size: 0.95rem;
}

.group.flex.items-start.gap-4.rounded-2xl.p-5.text-left.shadow-sm.ring-1.transition {
  padding: 1.25rem 1.2rem;
  border: 1px solid rgb(223 211 194 / 34%);
}

.mb-5.flex.items-center.justify-between,
.flex.items-center.justify-between {
  align-items: flex-end;
}

.mb-5.flex.items-center.justify-between .section-title,
.flex.items-center.justify-between .section-title {
  font-size: 1.7rem;
}

.mb-5.flex.items-center.justify-between + .-mx-1.flex.gap-4.overflow-x-auto.px-1.pb-2.scroll-snap-x.scrollbar-hide {
  gap: 1.15rem;
}

.grid.grid-cols-1.gap-4.sm\:grid-cols-2,
.grid.grid-cols-2.gap-x-4.gap-y-6.sm\:grid-cols-3.lg\:grid-cols-4 {
  gap: 1.35rem;
}

.group.cursor-pointer .relative.aspect-square.overflow-hidden.rounded-2xl.bg-slate-100.shadow-sm.ring-1.ring-slate-100,
.group.flex.cursor-pointer.gap-4.rounded-2xl.bg-white.p-3.shadow-sm.ring-1.ring-slate-100 {
  border: 1px solid #ececec;
  background: rgb(255 255 255 / 98%);
}

.group.flex.cursor-pointer.gap-4.rounded-2xl.bg-white.p-3.shadow-sm.ring-1.ring-slate-100 {
  padding: 0.95rem;
  gap: 1rem;
}

.group.cursor-pointer .mt-2\.5.space-y-1.px-0\.5,
.group.flex.cursor-pointer.gap-4.rounded-2xl.bg-white.p-3.shadow-sm.ring-1.ring-slate-100 .flex.min-w-0.flex-1.flex-col.justify-between.py-0\.5 {
  padding-inline: 0.15rem;
}

.group.cursor-pointer .line-clamp-2.text-sm.leading-snug.text-slate-700,
.group.flex.cursor-pointer.gap-4.rounded-2xl.bg-white.p-3.shadow-sm.ring-1.ring-slate-100 .line-clamp-2.text-sm.font-semibold.leading-snug.text-slate-800 {
  color: #394238;
}

.group.cursor-pointer .text-base.font-bold.text-rose-500,
.group.cursor-pointer .text-lg.font-bold.text-rose-500,
.group.flex.cursor-pointer.gap-4.rounded-2xl.bg-white.p-3.shadow-sm.ring-1.ring-slate-100 .text-lg.font-bold.text-rose-500 {
  color: #d94b45;
}

.group.cursor-pointer .text-xs.text-slate-400.line-through {
  color: #aaa;
}

.mx-4.mt-4.grid.grid-cols-4.gap-2.rounded-2xl.bg-white.p-4.shadow-sm.ring-1.ring-slate-100 {
  background: rgb(255 255 255 / 98%);
  border: 1px solid #ececec;
  padding: 1rem 0.85rem;
}

.px-4.pt-3 .relative.overflow-hidden.rounded-2xl.bg-slate-900.shadow-lg {
  background:
    radial-gradient(circle at top right, rgb(255 207 194 / 70%), transparent 34%),
    linear-gradient(145deg, #fffaf7 0%, #fff0eb 100%);
  border: 1px solid #f2dcd5;
  box-shadow:
    0 16px 36px rgb(0 0 0 / 8%),
    0 4px 14px rgb(217 75 69 / 5%);
}

.px-4.pt-3 .flex.aspect-\[4\/3\].items-center.justify-center.bg-slate-800\/50.p-5 {
  background: linear-gradient(180deg, rgb(255 255 255 / 30%) 0%, rgb(255 255 255 / 10%) 100%);
}

.px-4.pt-3 .bg-gradient-to-t.from-slate-950.to-slate-900.px-4.pb-4.pt-3 {
  background:
    linear-gradient(180deg, rgb(255 248 245 / 0%) 0%, rgb(255 248 245 / 72%) 18%, rgb(255 248 245 / 96%) 100%);
}

.px-4.pt-3 .inline-block.rounded-full.bg-indigo-500\/90 {
  background: rgb(255 245 242 / 92%);
  color: #d94b45;
  border: 1px solid rgb(217 75 69 / 20%);
}

.px-4.pt-3 .mt-2.text-lg.font-bold.leading-snug.text-white {
  color: #252525;
  font-size: 1.45rem;
}

.px-4.pt-3 .mt-3.rounded-full.bg-white.px-4.py-1\.5.text-xs.font-semibold.text-indigo-600 {
  background:
    linear-gradient(135deg, #ef6b3b 0%, #d94b45 100%);
  color: #fffaf2;
}

.mt-6.px-4,
.mt-8.px-4 {
  margin-top: 2rem;
}

.mt-3.space-y-3 {
  display: grid;
  gap: 1rem;
}

.mt-3.grid.grid-cols-2.gap-3 {
  gap: 1rem;
}

@media (min-width: 640px) {
  .group.flex.items-center.gap-3.rounded-2xl.bg-white.p-4.shadow-sm.ring-1.ring-slate-100 {
    padding: 1.25rem 1rem;
  }

  .mb-5.flex.items-center.justify-between + .-mx-1.flex.gap-4.overflow-x-auto.px-1.pb-2.scroll-snap-x.scrollbar-hide {
    padding-bottom: 0.55rem;
  }
}

@media (min-width: 1024px) {
  .space-y-8 {
    gap: 3rem;
  }

  .mx-auto.max-w-7xl.px-4.pb-16.pt-4.lg\:px-6.lg\:pt-6 {
    padding-top: 1.6rem;
    padding-inline: 2rem;
  }

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

/* Hanbaimu Mall refresh: bright marketplace style */
body {
  background:
    linear-gradient(180deg, #f6f6f6 0%, #f3f3f3 100%);
  color: #2d2d2d;
}

.min-h-screen.bg-slate-50 {
  background: transparent;
}

header.sticky.top-0.z-50.border-b.border-slate-200\/80.bg-white {
  border-bottom: 0;
  background: #fff;
  box-shadow: 0 8px 28px rgb(17 24 39 / 6%);
}

.bg-slate-900.text-white {
  background: #1f1f1f;
}

.bg-slate-900.text-white .text-slate-600 {
  color: rgb(255 255 255 / 26%);
}

.bg-slate-900.text-white .text-slate-400,
.bg-slate-900.text-white .opacity-90 {
  color: rgb(255 255 255 / 78%);
}

.bg-slate-900.text-white .hover\:text-indigo-300:hover {
  color: #ffcf8c;
}

.sticky.top-0.z-50.border-b.border-slate-200\/80.bg-white .mx-auto.max-w-7xl.px-4.py-3.lg\:px-6 {
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}

.sticky.top-0.z-50.border-b.border-slate-200\/80.bg-white
  .group.mt-0\.5.shrink-0.text-left
  img {
  border-radius: 0.9rem;
  box-shadow: 0 12px 24px rgb(217 75 69 / 18%);
}

.sticky.top-0.z-50.border-b.border-slate-200\/80.bg-white .block.text-xl.font-bold.tracking-tight.text-slate-900,
.sticky.top-0.z-50.border-b.border-slate-200\/80.bg-white .text-lg.font-bold.text-slate-800 {
  color: #1f1f1f;
}

.sticky.top-0.z-50.border-b.border-slate-200\/80.bg-white .block.text-\[10px\].text-slate-400 {
  color: #8a8a8a;
  letter-spacing: 0.12em;
}

.sticky.top-0.z-50.border-b.border-slate-200\/80.bg-white
  .flex.overflow-hidden.rounded-xl.border-2.border-indigo-500.bg-white.shadow-sm.shadow-indigo-500\/10.focus-within\:shadow-md.focus-within\:shadow-indigo-500\/15 {
  border: 2px solid #d94b45;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgb(217 75 69 / 10%);
}

.sticky.top-0.z-50.border-b.border-slate-200\/80.bg-white
  .flex.overflow-hidden.rounded-xl.border-2.border-indigo-500.bg-white.shadow-sm.shadow-indigo-500\/10.focus-within\:shadow-md.focus-within\:shadow-indigo-500\/15
  .shrink-0.bg-indigo-600.px-8.text-sm.font-semibold.text-white.transition.hover\:bg-indigo-700 {
  background: linear-gradient(135deg, #ef6b3b 0%, #d94b45 100%);
  color: #fff;
}

.sticky.top-0.z-50.border-b.border-slate-200\/80.bg-white
  .flex.overflow-hidden.rounded-xl.border-2.border-indigo-500.bg-white.shadow-sm.shadow-indigo-500\/10.focus-within\:shadow-md.focus-within\:shadow-indigo-500\/15
  .shrink-0.bg-indigo-600.px-8.text-sm.font-semibold.text-white.transition.hover\:bg-indigo-700:hover {
  background: linear-gradient(135deg, #ff7b45 0%, #c93637 100%);
}

.sticky.top-0.z-50.border-b.border-slate-200\/80.bg-white
  .ml-auto.hidden.items-start.gap-1.md\:flex.lg\:gap-2
  button:hover {
  background: #fff5f2;
  color: #d94b45;
  box-shadow: none;
}

nav.border-t.border-slate-100.bg-slate-50\/60 {
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #ececec;
  background: #fff;
}

nav.border-t.border-slate-100.bg-slate-50\/60
  .flex.shrink-0.items-center.gap-2.border-r.border-slate-200\/80.bg-indigo-600.px-5.py-2\.5.text-sm.font-semibold.text-white.transition.hover\:bg-indigo-700 {
  border-right-color: #ebd1c7;
  background: linear-gradient(135deg, #e45b41 0%, #d63d47 100%);
}

nav.border-t.border-slate-100.bg-slate-50\/60
  .relative.shrink-0.px-4.py-2\.5.text-sm.transition-colors.font-semibold.text-indigo-600.after\:absolute.after\:inset-x-3.after\:bottom-0.after\:h-0\.5.after\:rounded-full.after\:bg-indigo-600,
nav.border-t.border-slate-100.bg-slate-50\/60
  .text-slate-600.hover\:text-indigo-600:hover,
nav.border-t.border-slate-100.bg-slate-50\/60
  .text-slate-500.hover\:text-indigo-600:hover {
  color: #d94b45;
}

nav.border-t.border-slate-100.bg-slate-50\/60 .after\:bg-indigo-600:after {
  background: #d94b45;
}

.mx-auto.max-w-7xl.px-4.pb-16.pt-4.lg\:px-6.lg\:pt-6 {
  padding-top: 1.5rem;
  padding-bottom: 4rem;
}

.mall-home {
  display: grid;
  gap: 1.6rem;
}

.mall-hero,
.mall-flash,
.mall-boutique,
.mall-recommend {
  width: 100%;
}

.mall-hero {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.mall-hero-cats,
.mall-boutique,
.mall-recommend {
  border: 1px solid #ece8e3;
  background: #fff;
  box-shadow: 0 14px 30px rgb(0 0 0 / 5%);
}

.mall-hero-cats {
  border-radius: 18px;
  overflow: hidden;
}

.mall-hero-cats-head {
  padding: 1rem 1.1rem;
  background: linear-gradient(135deg, #3b3b3b 0%, #1f1f1f 100%);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.mall-cat-item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.96rem 1.1rem;
  border-bottom: 1px solid #f3f3f3;
  background: #fff;
  color: #3f3f46;
  font-size: 0.95rem;
  text-align: left;
}

.mall-cat-item:last-child {
  border-bottom: 0;
}

.mall-cat-item:hover {
  background: #fff5f2;
  color: #d94b45;
  box-shadow: none;
  transform: translateX(4px);
}

.mall-cat-arrow {
  height: 1rem;
  width: 1rem;
  opacity: 0.45;
}

.mall-hero-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  min-height: 430px;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid #ead8d2;
  background:
    radial-gradient(circle at right top, rgb(255 210 196 / 78%), transparent 28%),
    radial-gradient(circle at left bottom, rgb(255 240 214 / 72%), transparent 26%),
    linear-gradient(135deg, #fff8f1 0%, #fff 32%, #fef0e8 100%);
  box-shadow: 0 18px 42px rgb(217 75 69 / 9%);
}

.mall-hero-banner-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 2.8rem;
}

.mall-hero-tag {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: 999px;
  background: #fff;
  padding: 0.45rem 0.9rem;
  color: #d94b45;
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 8px 20px rgb(217 75 69 / 10%);
}

.mall-hero-title {
  margin-top: 1rem;
  color: #1f1f1f;
  font-size: clamp(2.25rem, 4vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.mall-hero-subtitle {
  margin-top: 1rem;
  max-width: 33rem;
  color: #666;
  font-size: 1rem;
  line-height: 1.8;
}

.mall-hero-actions {
  margin-top: 1.6rem;
}

.mall-primary-btn {
  min-height: 3rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ef6b3b 0%, #d94b45 100%);
  padding-inline: 1.55rem;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 16px 30px rgb(217 75 69 / 20%);
}

.mall-primary-btn:hover {
  transform: translateY(-1px);
}

.mall-hero-media {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 2rem 1.75rem 0;
}

.mall-hero-image {
  max-width: min(100%, 460px);
  max-height: 390px;
  object-fit: contain;
  filter: drop-shadow(0 26px 32px rgb(0 0 0 / 10%));
}

.mall-hero-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  height: 42px;
  width: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgb(31 31 31 / 70%);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  transform: translateY(-50%);
}

.mall-hero-prev {
  left: 1rem;
}

.mall-hero-next {
  right: 1rem;
}

.mall-hero-nav:hover {
  background: #d94b45;
}

.mall-hero-dots {
  position: absolute;
  left: 2.6rem;
  bottom: 1.55rem;
  z-index: 3;
  display: flex;
  gap: 0.55rem;
}

.mall-hero-dot {
  height: 0.55rem;
  width: 0.55rem;
  border-radius: 999px;
  background: rgb(31 31 31 / 18%);
}

.mall-hero-dot.is-active {
  width: 1.8rem;
  background: linear-gradient(135deg, #ef6b3b 0%, #d94b45 100%);
}

.mall-flash {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid #f0cdcf;
  background: #fff;
  box-shadow: 0 16px 34px rgb(217 75 69 / 7%);
}

.mall-flash-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 1.6rem;
  background:
    radial-gradient(circle at left top, rgb(255 255 255 / 18%), transparent 24%),
    linear-gradient(180deg, #ff6f54 0%, #d93b47 100%);
  color: #fff;
}

.mall-flash-label {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.mall-flash-slot {
  margin-top: 0.4rem;
  font-size: 1rem;
  opacity: 0.92;
}

.mall-flash-tip {
  margin-top: 1rem;
  font-size: 0.88rem;
  opacity: 0.84;
}

.mall-flash-time {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.8rem;
}

.mall-flash-time-box {
  min-width: 2.2rem;
  border-radius: 10px;
  background: rgb(255 255 255 / 18%);
  padding: 0.45rem 0.3rem;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
}

.mall-flash-time-sep {
  font-weight: 700;
}

.mall-flash-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  background: #fff;
}

.mall-flash-card {
  display: grid;
  gap: 0.85rem;
  padding: 1.25rem 1rem;
  border-right: 1px solid #f3f3f3;
  text-align: left;
  background: #fff;
}

.mall-flash-card:last-child {
  border-right: 0;
}

.mall-flash-card:hover {
  background: #fff9f8;
  box-shadow: none;
}

.mall-flash-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, #fff 0%, #fff6f4 100%);
  border-radius: 18px;
}

.mall-flash-card-image {
  max-width: 100%;
  max-height: 180px;
  object-fit: contain;
}

.mall-flash-card-title,
.mall-recommend-title,
.mall-boutique-title {
  display: -webkit-box;
  overflow: hidden;
  color: #2f2f2f;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mall-flash-card-price,
.mall-recommend-price,
.mall-boutique-price {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin-top: 0.35rem;
}

.mall-flash-card-price strong,
.mall-recommend-price strong,
.mall-boutique-price strong {
  color: #d93b47;
  font-size: 1.28rem;
}

.mall-flash-card-price del,
.mall-recommend-price del,
.mall-boutique-price del {
  color: #a8a8a8;
  font-size: 0.82rem;
}

.mall-boutique,
.mall-recommend {
  padding: 1.35rem;
  border-radius: 20px;
}

.mall-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.mall-section-title {
  color: #202020;
  font-size: 1.65rem;
  line-height: 1.2;
}

.mall-section-subtitle {
  margin-top: 0.25rem;
  color: #8a8a8a;
  font-size: 0.9rem;
}

.mall-more-btn {
  border-radius: 999px;
  background: #fff4f1;
  padding: 0.6rem 1rem;
  color: #d94b45;
  font-size: 0.9rem;
  font-weight: 700;
}

.mall-more-btn:hover {
  background: #ffe7e1;
  box-shadow: none;
}

.mall-boutique-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.mall-boutique-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: center;
  gap: 1rem;
  border-radius: 18px;
  background:
    linear-gradient(135deg, #fff 0%, #fff7f4 100%);
  padding: 1.15rem;
  border: 1px solid #f5e4df;
  text-align: left;
}

.mall-boutique-card:hover,
.mall-recommend-card:hover {
  transform: translateY(-3px);
}

.mall-boutique-copy {
  min-width: 0;
}

.mall-boutique-media,
.mall-recommend-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 16px;
  aspect-ratio: 1 / 1;
}

.mall-boutique-image,
.mall-recommend-image {
  max-width: 100%;
  max-height: 180px;
  object-fit: contain;
}

.mall-recommend-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.mall-recommend-card {
  display: grid;
  gap: 0.9rem;
  border: 1px solid #efefef;
  border-radius: 18px;
  background: #fff;
  padding: 1rem;
  text-align: left;
}

footer.relative.mt-10.overflow-hidden.bg-slate-950.text-slate-300 {
  margin-top: 2.2rem;
  border-top: 1px solid #ececec;
  background:
    linear-gradient(180deg, #fff 0%, #fbf7f4 100%);
  color: #666;
}

footer.relative.mt-10.overflow-hidden.bg-slate-950.text-slate-300
  .pointer-events-none.absolute,
footer.relative.mt-10.overflow-hidden.bg-slate-950.text-slate-300
  .pointer-events-none.absolute.inset-x-0.top-0.h-px.bg-gradient-to-r.from-transparent.via-indigo-500.to-transparent {
  display: none;
}

footer.relative.mt-10.overflow-hidden.bg-slate-950.text-slate-300 .relative.border-b.border-white\/5,
footer.relative.mt-10.overflow-hidden.bg-slate-950.text-slate-300 .relative.border-t.border-white\/5.py-5 {
  border-color: #f0ebe8;
}

footer.relative.mt-10.overflow-hidden.bg-slate-950.text-slate-300 .block.text-sm.font-semibold.text-white,
footer.relative.mt-10.overflow-hidden.bg-slate-950.text-slate-300 .text-sm.font-semibold.tracking-wide.text-white,
footer.relative.mt-10.overflow-hidden.bg-slate-950.text-slate-300 .block.text-lg.font-bold.text-white {
  color: #262626;
}

footer.relative.mt-10.overflow-hidden.bg-slate-950.text-slate-300 .text-xs.text-indigo-300\/80,
footer.relative.mt-10.overflow-hidden.bg-slate-950.text-slate-300 .mt-0\.5.block.truncate.text-xs.text-slate-400,
footer.relative.mt-10.overflow-hidden.bg-slate-950.text-slate-300 .mt-6.space-y-1\.5.text-xs.text-slate-500,
footer.relative.mt-10.overflow-hidden.bg-slate-950.text-slate-300 .text-sm.leading-relaxed.text-slate-400,
footer.relative.mt-10.overflow-hidden.bg-slate-950.text-slate-300 .text-sm.text-slate-400,
footer.relative.mt-10.overflow-hidden.bg-slate-950.text-slate-300 .mx-auto.max-w-7xl.px-4.text-center.text-xs.leading-relaxed.text-slate-500.lg\:px-6 {
  color: #8a8a8a;
}

footer.relative.mt-10.overflow-hidden.bg-slate-950.text-slate-300
  .group.flex.items-center.gap-3.rounded-2xl.border.border-white\/5.bg-white\/\[0\.03\].p-4.text-left.transition.hover\:border-indigo-500\/30.hover\:bg-white\/\[0\.06\] {
  border-color: #f1e7e1;
  background: #fff;
}

footer.relative.mt-10.overflow-hidden.bg-slate-950.text-slate-300
  .flex.h-10.w-10.shrink-0.items-center.justify-center.rounded-xl.bg-gradient-to-br.from-indigo-500.to-violet-600.text-white.shadow-lg.shadow-indigo-900\/40.transition.group-hover\:scale-105 {
  background: linear-gradient(135deg, #ef6b3b 0%, #d94b45 100%);
  box-shadow: 0 12px 24px rgb(217 75 69 / 16%);
}

footer.relative.mt-10.overflow-hidden.bg-slate-950.text-slate-300
  .inline-flex.items-center.gap-1.rounded-full.border.border-white\/10.bg-white\/5.px-3.py-1\.5.text-xs.font-medium.text-slate-300.transition.hover\:border-indigo-400\/40.hover\:bg-indigo-500\/10.hover\:text-white {
  border-color: #f3ddd6;
  background: #fff5f2;
  color: #d94b45;
}

footer.relative.mt-10.overflow-hidden.bg-slate-950.text-slate-300
  .hover\:text-indigo-400:hover,
footer.relative.mt-10.overflow-hidden.bg-slate-950.text-slate-300
  .text-sm.text-slate-400.transition-colors.hover\:text-indigo-300:hover {
  color: #d94b45;
}

header.sticky.top-0.z-40.flex.h-11.items-center.bg-indigo-500.px-1.pt-safe.shadow-sm {
  background: linear-gradient(135deg, #ef6b3b 0%, #d94b45 100%);
}

.mobile-app {
  background:
    linear-gradient(180deg, #f6f6f6 0%, #f2f2f2 100%);
}

.fixed.bottom-0.left-0.right-0.z-50.border-t.border-slate-100.bg-white\/95 {
  background: rgb(255 255 255 / 96%);
}

.fixed.bottom-0.left-0.right-0.z-50.border-t.border-slate-100.bg-white\/95
  .bg-indigo-100,
.fixed.bottom-0.left-0.right-0.z-50.border-t.border-slate-100.bg-white\/95
  .text-indigo-600 {
  color: #d94b45;
}

.fixed.bottom-0.left-0.right-0.z-50.border-t.border-slate-100.bg-white\/95
  .bg-indigo-100 {
  background: #fff1ec;
}

.text-sky-600,
.text-emerald-600 {
  color: #e45b41;
}

.bg-sky-100,
.bg-emerald-100 {
  background: #fff1ec;
}

.bg-rose-100 {
  background: #ffe8e1;
}

/* Normalize remaining utility colors across every lazy-loaded page. */
.text-indigo-300,
.text-indigo-400,
.text-indigo-500,
.text-indigo-600,
.text-indigo-700,
.text-indigo-900,
.text-violet-600,
.text-cyan-600,
.text-sky-600,
.text-emerald-600,
.text-green-500,
.text-green-800,
.text-amber-600,
.text-amber-700,
.text-amber-800,
.text-amber-900,
.text-amber-900\/60,
.text-amber-900\/70,
.text-orange-700,
.text-rose-500,
.text-rose-600,
.text-rose-700,
.text-red-500,
.text-red-600,
.text-red-800 {
  color: #d94b45;
}

.bg-indigo-500,
.bg-indigo-600,
.bg-indigo-700,
.bg-violet-600,
.bg-amber-800,
.bg-rose-500,
.bg-rose-700,
.bg-red-500 {
  background-color: #d94b45;
  background-image: linear-gradient(135deg, #ef6b3b 0%, #d94b45 100%);
}

.bg-indigo-50,
.bg-indigo-50\/50,
.bg-green-50,
.bg-red-50,
.bg-indigo-100,
.bg-violet-100,
.bg-cyan-100,
.bg-sky-100,
.bg-emerald-100,
.bg-amber-100,
.bg-orange-100,
.bg-rose-50,
.bg-rose-100 {
  background-color: #fff1ec;
}

.border-indigo-100,
.border-indigo-200,
.border-indigo-300,
.border-indigo-400,
.border-indigo-500,
.border-indigo-500\/30,
.border-violet-200,
.border-violet-300,
.border-amber-800,
.border-green-200,
.border-red-200 {
  border-color: rgb(217 75 69 / 42%);
}

.ring-indigo-100,
.ring-indigo-500\/20,
.ring-indigo-500\/40,
.ring-indigo-500\/50,
.ring-amber-800\/40 {
  --tw-ring-color: rgb(217 75 69 / 30%);
}

.fill-indigo-500 {
  fill: #e45b41;
}

.accent-indigo-600 {
  accent-color: #d94b45;
}

.from-indigo-50 {
  --tw-gradient-from: #fff7f4 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 247 244 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-indigo-500,
.from-indigo-600 {
  --tw-gradient-from: #ef6b3b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 107 59 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-indigo-500 {
  --tw-gradient-via: #e45b41 var(--tw-gradient-via-position);
}

.to-violet-600 {
  --tw-gradient-to: #d94b45 var(--tw-gradient-to-position);
}

.hover\:bg-indigo-50:hover,
.hover\:bg-indigo-100:hover,
.active\:bg-indigo-50:active {
  background-color: #fff1ec;
}

.hover\:bg-indigo-600:hover,
.hover\:bg-indigo-700:hover {
  background-color: #bd353d;
  background-image: linear-gradient(135deg, #e45b41 0%, #bd353d 100%);
}

.hover\:text-indigo-300:hover,
.hover\:text-indigo-400:hover,
.hover\:text-indigo-600:hover,
.active\:text-indigo-700:active {
  color: #bd353d;
}

.hover\:border-indigo-300:hover,
.hover\:border-indigo-400\/40:hover,
.hover\:border-indigo-500\/30:hover,
.focus-visible\:border-indigo-400:focus-visible {
  border-color: #e45b41;
}

.focus-visible\:ring-indigo-500\/20:focus-visible,
.focus-visible\:ring-indigo-500\/40:focus-visible,
.focus\:ring-indigo-500\/50:focus {
  --tw-ring-color: rgb(217 75 69 / 30%);
}

/* Cover translucent, icon, shadow and interaction variants used by lazy pages. */
.text-indigo-100 {
  color: #fff1ec;
}

.text-indigo-300\/80 {
  color: rgb(217 75 69 / 80%);
}

.bg-indigo-500\/90 {
  background-color: rgb(217 75 69 / 90%);
  background-image: linear-gradient(
    135deg,
    rgb(239 107 59 / 94%) 0%,
    rgb(217 75 69 / 94%) 100%
  );
}

.bg-indigo-600\/10,
.bg-violet-600\/8,
.hover\:bg-indigo-500\/10:hover {
  background-color: rgb(217 75 69 / 10%);
}

.fill-red-500,
.fill-rose-500 {
  fill: #d94b45;
}

.shadow-indigo-500\/10,
.shadow-indigo-500\/15,
.shadow-indigo-600\/20,
.shadow-indigo-600\/25,
.shadow-indigo-900\/40,
.shadow-indigo-900\/50 {
  --tw-shadow-color: rgb(217 75 69 / 22%);
  --tw-shadow: var(--tw-shadow-colored);
}

.hover\:border-violet-300:hover {
  border-color: #e45b41;
}

.hover\:text-amber-700:hover,
.hover\:text-amber-900:hover,
.hover\:text-red-500:hover,
.hover\:text-rose-700:hover,
.active\:text-rose-500:active {
  color: #bd353d;
}

.active\:bg-rose-50:active {
  background-color: #fff1ec;
}

/* Improve readability on Login and Profile pages after the lighter redesign. */
.ui-sans.min-h-\[calc\(100vh-12rem\)\].px-4.py-6 .text-slate-400,
.ui-sans.min-h-\[calc\(100vh-12rem\)\].px-4.py-6 .text-slate-500 {
  color: #505050;
}

.ui-sans.min-h-\[calc\(100vh-12rem\)\].px-4.py-6 .text-slate-700 {
  color: #2b2b2b;
}

.ui-sans.min-h-\[calc\(100vh-12rem\)\].px-4.py-6 .text-indigo-100 {
  color: #fff7f4;
}

.space-y-3.px-3.py-3.pb-4 .text-slate-500,
.space-y-3.px-3.py-3.pb-4 .text-slate-600,
.space-y-3.px-3.py-3.pb-4 .text-xs.text-slate-600,
.space-y-3.px-3.py-3.pb-4 .line-clamp-1.text-center.text-\[11px\].font-medium.text-slate-600 {
  color: #2f2f2f;
  font-weight: 600;
}

.space-y-3.px-3.py-3.pb-4 .text-indigo-100 {
  color: #fff7f4;
}

.bg-gradient-to-br.from-indigo-600.to-violet-600.px-6.py-8.text-white,
.overflow-hidden.rounded-2xl.bg-gradient-to-br.from-indigo-600.to-violet-600.p-4.text-white.shadow-lg.shadow-indigo-600\/20 {
  background:
    radial-gradient(circle at 85% 14%, rgb(255 255 255 / 22%) 0 16px, transparent 17px),
    linear-gradient(135deg, #ef6b3b 0%, #d94b45 58%, #bd353d 100%) !important;
  color: #fff !important;
}

.bg-gradient-to-br.from-indigo-600.to-violet-600.px-6.py-8.text-white .text-indigo-100,
.overflow-hidden.rounded-2xl.bg-gradient-to-br.from-indigo-600.to-violet-600.p-4.text-white.shadow-lg.shadow-indigo-600\/20 .text-indigo-100 {
  color: rgb(255 247 244 / 92%) !important;
}

.bg-gradient-to-br.from-indigo-600.to-violet-600.px-6.py-8.text-white .text-lg.font-bold,
.overflow-hidden.rounded-2xl.bg-gradient-to-br.from-indigo-600.to-violet-600.p-4.text-white.shadow-lg.shadow-indigo-600\/20 .text-lg.font-bold {
  color: #fff !important;
}

@media (max-width: 1279px) {
  .mall-hero {
    grid-template-columns: 220px minmax(0, 1fr);
  }

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

@media (max-width: 1023px) {
  .mall-hero,
  .mall-flash,
  .mall-boutique-grid {
    grid-template-columns: 1fr;
  }

  .mall-hero-cats {
    display: none;
  }

  .mall-hero-banner {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .mall-hero-banner-copy {
    padding: 2rem 1.5rem 0.5rem;
  }

  .mall-hero-media {
    padding: 0 1.25rem 1.5rem;
  }

  .mall-flash-list,
  .mall-recommend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mall-boutique-card {
    grid-template-columns: minmax(0, 1fr) 132px;
  }
}

@media (max-width: 767px) {
  .mall-home {
    gap: 1rem;
  }

  .mall-hero-banner {
    border-radius: 18px;
  }

  .mall-hero-title {
    font-size: 1.8rem;
  }

  .mall-flash {
    border-radius: 18px;
  }

  .mall-flash-side {
    padding: 1.3rem 1.2rem;
  }

  .mall-flash-list,
  .mall-recommend-grid,
  .mall-boutique-grid {
    grid-template-columns: 1fr;
  }

  .mall-recommend,
  .mall-boutique {
    padding: 1rem;
    border-radius: 18px;
  }

  .mall-boutique-card {
    grid-template-columns: 1fr;
  }

  .mall-boutique-media {
    order: -1;
  }
}