/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-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-ease: initial;
      --tw-content: "";
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --color-red-100: oklch(93.6% .032 17.717);
    --color-red-200: oklch(88.5% .062 18.334);
    --color-red-300: oklch(80.8% .114 19.571);
    --color-red-400: var(--red-400);
    --color-red-500: var(--red-500);
    --color-red-600: oklch(57.7% .245 27.325);
    --color-red-800: oklch(44.4% .177 26.899);
    --color-red-900: oklch(39.6% .141 25.723);
    --color-red-950: var(--red-950);
    --color-orange-200: oklch(90.1% .076 70.697);
    --color-orange-300: oklch(83.7% .128 66.29);
    --color-orange-400: oklch(75% .183 55.934);
    --color-orange-500: oklch(70.5% .213 47.604);
    --color-orange-950: oklch(26.6% .079 36.259);
    --color-amber-50: oklch(98.7% .022 95.277);
    --color-amber-100: oklch(96.2% .059 95.617);
    --color-amber-200: oklch(92.4% .12 95.746);
    --color-amber-300: oklch(87.9% .169 91.605);
    --color-amber-400: var(--amber-400);
    --color-amber-500: var(--amber-500);
    --color-amber-600: oklch(66.6% .179 58.318);
    --color-amber-700: oklch(55.5% .163 48.998);
    --color-amber-800: oklch(47.3% .137 46.201);
    --color-amber-900: var(--amber-900);
    --color-amber-950: var(--amber-950);
    --color-yellow-200: oklch(94.5% .129 101.54);
    --color-yellow-400: oklch(85.2% .199 91.936);
    --color-yellow-500: oklch(79.5% .184 86.047);
    --color-yellow-600: oklch(68.1% .162 75.834);
    --color-yellow-950: oklch(28.6% .066 53.813);
    --color-emerald-50: oklch(97.9% .021 166.113);
    --color-emerald-100: oklch(95% .052 163.051);
    --color-emerald-200: oklch(90.5% .093 164.15);
    --color-emerald-300: oklch(84.5% .143 164.978);
    --color-emerald-400: var(--emerald-400);
    --color-emerald-500: var(--emerald-500);
    --color-emerald-600: oklch(59.6% .145 163.225);
    --color-emerald-700: oklch(50.8% .118 165.612);
    --color-emerald-800: oklch(43.2% .095 166.913);
    --color-emerald-900: oklch(37.8% .077 168.94);
    --color-emerald-950: var(--emerald-950);
    --color-teal-300: oklch(85.5% .138 181.071);
    --color-teal-400: oklch(77.7% .152 181.912);
    --color-teal-500: oklch(70.4% .14 182.503);
    --color-teal-800: oklch(43.7% .078 188.216);
    --color-teal-950: oklch(27.7% .046 192.524);
    --color-cyan-50: oklch(98.4% .019 200.873);
    --color-cyan-100: oklch(95.6% .045 203.388);
    --color-cyan-200: oklch(91.7% .08 205.041);
    --color-cyan-300: oklch(86.5% .127 207.078);
    --color-cyan-400: oklch(78.9% .154 211.53);
    --color-cyan-500: oklch(71.5% .143 215.221);
    --color-cyan-600: oklch(60.9% .126 221.723);
    --color-cyan-700: oklch(52% .105 223.128);
    --color-cyan-800: oklch(45% .085 224.283);
    --color-cyan-950: oklch(30.2% .056 229.695);
    --color-sky-100: oklch(95.1% .026 236.824);
    --color-sky-200: oklch(90.1% .058 230.902);
    --color-sky-300: oklch(82.8% .111 230.318);
    --color-sky-400: var(--sky-400);
    --color-sky-500: var(--sky-500);
    --color-sky-600: oklch(58.8% .158 241.966);
    --color-sky-700: oklch(50% .134 242.749);
    --color-sky-800: oklch(44.3% .11 240.79);
    --color-sky-900: oklch(39.1% .09 240.876);
    --color-sky-950: var(--sky-950);
    --color-blue-100: oklch(93.2% .032 255.585);
    --color-blue-300: oklch(80.9% .105 251.813);
    --color-blue-500: oklch(62.3% .214 259.815);
    --color-blue-600: oklch(54.6% .245 262.881);
    --color-blue-700: oklch(48.8% .243 264.376);
    --color-blue-800: oklch(42.4% .199 265.638);
    --color-blue-950: oklch(28.2% .091 267.935);
    --color-indigo-200: oklch(87% .065 274.039);
    --color-indigo-300: oklch(78.5% .115 274.713);
    --color-indigo-400: var(--indigo-400);
    --color-indigo-500: var(--indigo-500);
    --color-indigo-600: oklch(51.1% .262 276.966);
    --color-indigo-700: oklch(45.7% .24 277.023);
    --color-indigo-800: oklch(39.8% .195 277.366);
    --color-indigo-900: var(--indigo-900);
    --color-indigo-950: var(--indigo-950);
    --color-violet-100: oklch(94.3% .029 294.588);
    --color-violet-200: oklch(89.4% .057 293.283);
    --color-violet-300: oklch(81.1% .111 293.571);
    --color-violet-400: var(--violet-400);
    --color-violet-500: var(--violet-500);
    --color-violet-600: oklch(54.1% .281 293.009);
    --color-violet-700: oklch(49.1% .27 292.581);
    --color-violet-800: oklch(43.2% .232 292.759);
    --color-violet-950: var(--violet-950);
    --color-purple-100: oklch(94.6% .033 307.174);
    --color-purple-200: oklch(90.2% .063 306.703);
    --color-purple-300: oklch(82.7% .119 306.383);
    --color-purple-400: oklch(71.4% .203 305.504);
    --color-purple-500: oklch(62.7% .265 303.9);
    --color-purple-600: oklch(55.8% .288 302.321);
    --color-purple-700: oklch(49.6% .265 301.924);
    --color-purple-800: oklch(43.8% .218 303.724);
    --color-purple-900: oklch(38.1% .176 304.987);
    --color-purple-950: oklch(29.1% .149 302.717);
    --color-rose-50: oklch(96.9% .015 12.422);
    --color-rose-200: oklch(89.2% .058 10.001);
    --color-rose-300: oklch(81% .117 11.638);
    --color-rose-400: var(--rose-400);
    --color-rose-500: var(--rose-500);
    --color-rose-600: oklch(58.6% .253 17.585);
    --color-rose-700: oklch(51.4% .222 16.935);
    --color-rose-800: oklch(45.5% .188 13.697);
    --color-rose-900: oklch(41% .159 10.272);
    --color-rose-950: var(--rose-950);
    --color-slate-100: oklch(96.8% .007 247.896);
    --color-slate-200: oklch(92.9% .013 255.508);
    --color-slate-300: oklch(86.9% .022 252.894);
    --color-slate-400: oklch(70.4% .04 256.788);
    --color-slate-500: oklch(55.4% .046 257.417);
    --color-slate-600: oklch(44.6% .043 257.281);
    --color-slate-700: oklch(37.2% .044 257.287);
    --color-slate-800: oklch(27.9% .041 260.031);
    --color-slate-900: oklch(20.8% .042 265.755);
    --color-slate-950: oklch(12.9% .042 264.695);
    --color-zinc-50: var(--zinc-50);
    --color-zinc-100: var(--zinc-100);
    --color-zinc-200: var(--zinc-200);
    --color-zinc-300: var(--zinc-300);
    --color-zinc-400: var(--zinc-400);
    --color-zinc-500: var(--zinc-500);
    --color-zinc-600: var(--zinc-600);
    --color-zinc-700: var(--zinc-700);
    --color-zinc-800: var(--zinc-800);
    --color-zinc-900: var(--zinc-900);
    --color-zinc-950: var(--zinc-950);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --tracking-tighter: -.05em;
    --tracking-tight: -.025em;
    --tracking-wide: .025em;
    --tracking-wider: .05em;
    --tracking-widest: .1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --drop-shadow-md: 0 3px 3px #0000001f;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --animate-bounce: bounce 1s infinite;
    --blur-sm: 8px;
    --blur-md: 12px;
    --aspect-video: 16 / 9;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-rpg-bg: var(--color-rpg-bg);
    --color-rpg-panel: var(--color-rpg-panel);
    --color-rpg-border: var(--color-rpg-border);
    --color-rpg-accent: var(--color-rpg-accent);
  }
}

@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, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

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

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring:where(:not(iframe)) {
    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;
  }

  body {
    background-color: var(--color-rpg-bg);
    color: var(--zinc-400);
    font-family: var(--app-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-image: radial-gradient(circle at 12% 8%, var(--guild-violet-soft), transparent 30rem), radial-gradient(circle at 88% 28%, #6366f114, transparent 34rem), linear-gradient(180deg, #08101d61, transparent 28rem);
    background-attachment: fixed;
    min-height: 100vh;
  }

  ::selection {
    color: var(--zinc-100);
    background: #8b5cf66b;
  }

  :focus-visible {
    outline: 2px solid var(--guild-gold);
    outline-offset: 3px;
  }

  button, a, summary {
    transition: color .2s, border-color .2s, background-color .2s, box-shadow .2s, transform .2s;
  }

  button, input, select, textarea, table {
    font-family: inherit;
  }

  h1, h2, h3, h4, h5, h6 {
    color: var(--zinc-50);
    letter-spacing: -.015em;
    font-weight: 500;
  }

  button, input[type="button"], input[type="submit"], input[type="reset"] {
    border-radius: 9999px;
  }

  button:focus-visible, input[type="button"]:focus-visible, input[type="submit"]:focus-visible {
    outline-offset: 3px;
    outline: 2px solid #dfbc78;
  }
}

@layer components;

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

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

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

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

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .inset-0 {
    inset: 0;
  }

  .inset-x-0 {
    inset-inline: 0;
  }

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

  .inset-y-0 {
    inset-block: 0;
  }

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

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

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

  .top-0 {
    top: 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

  .top-full {
    top: 100%;
  }

  .-right-0 {
    right: 0;
  }

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

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

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

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

  .right-0 {
    right: 0;
  }

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

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

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

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

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

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

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

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

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

  .-bottom-0 {
    bottom: 0;
  }

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

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

  .bottom-0 {
    bottom: 0;
  }

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

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

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

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

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

  .left-0 {
    left: 0;
  }

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

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

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

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

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

  .isolate {
    isolation: isolate;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .container {
    width: 100%;
  }

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

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

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

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

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

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

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

  .m-auto {
    margin: auto;
  }

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

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

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

  .my-0 {
    margin-block: 0;
  }

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

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

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

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

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

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

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

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

  .\!mt-3 {
    margin-top: calc(var(--spacing) * 3) !important;
  }

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

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

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

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

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

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

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

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

  .mt-1 {
    margin-top: var(--spacing);
  }

  .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-3\.5 {
    margin-top: calc(var(--spacing) * 3.5);
  }

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

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

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

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

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

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

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

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

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

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

  .mb-0 {
    margin-bottom: 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

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

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

  .table {
    display: table;
  }

  .table-row {
    display: table-row;
  }

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

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

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

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

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

  .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-13 {
    height: calc(var(--spacing) * 13);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

  .h-\[100dvh\] {
    height: 100dvh;
  }

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

  .h-\[calc\(100\%\+2rem\)\] {
    height: calc(100% + 2rem);
  }

  .h-auto {
    height: auto;
  }

  .h-fit {
    height: fit-content;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .h-screen {
    height: 100vh;
  }

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

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

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

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

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

  .max-h-\[85dvh\] {
    max-height: 85dvh;
  }

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

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

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

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

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

  .max-h-\[calc\(90vh-80px\)\] {
    max-height: calc(90vh - 80px);
  }

  .max-h-\[calc\(100dvh-24px\)\] {
    max-height: calc(100dvh - 24px);
  }

  .min-h-0 {
    min-height: 0;
  }

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

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

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

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

  .min-h-\[2\.5rem\] {
    min-height: 2.5rem;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .w-2\/3 {
    width: 66.6667%;
  }

  .w-2\/5 {
    width: 40%;
  }

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

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

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

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

  .w-4\.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-13 {
    width: calc(var(--spacing) * 13);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .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-5xl {
    max-width: var(--container-5xl);
  }

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

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

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

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

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

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

  .max-w-\[calc\(100vw-2rem\)\] {
    max-width: calc(100vw - 2rem);
  }

  .max-w-\[min\(24rem\,calc\(100vw-2\.5rem\)\)\] {
    max-width: min(24rem, 100vw - 2.5rem);
  }

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

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

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

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

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

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

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

  .min-w-0 {
    min-width: 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .flex-1 {
    flex: 1;
  }

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

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

  .flex-grow, .grow {
    flex-grow: 1;
  }

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

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

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

  .-translate-y-1 {
    --tw-translate-y: calc(var(--spacing) * -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);
  }

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

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

  .rotate-180 {
    rotate: 180deg;
  }

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

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

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

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

  .cursor-default {
    cursor: default;
  }

  .cursor-grab {
    cursor: grab;
  }

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

  .cursor-pointer {
    cursor: pointer;
  }

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

  .resize {
    resize: both;
  }

  .resize-none {
    resize: none;
  }

  .resize-y {
    resize: vertical;
  }

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

  .\[scrollbar-width\:thin\], .scrollbar-thin {
    scrollbar-width: thin;
  }

  .\[scrollbar-color\:rgba\(251\,191\,36\,\.2\)_transparent\] {
    scrollbar-color: #fbbf2433 transparent;
  }

  .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-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

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

  .grid-rows-\[40\%_60\%\] {
    grid-template-rows: 40% 60%;
  }

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

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

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

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

  .content-start {
    align-content: flex-start;
  }

  .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 {
    gap: 0;
  }

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

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

  .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-3\.5 {
    gap: calc(var(--spacing) * 3.5);
  }

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

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

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

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

  :where(.space-y-0 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block: 0;
  }

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

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

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

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

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

  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }

  .gap-x-5 {
    column-gap: calc(var(--spacing) * 5);
  }

  .gap-y-1 {
    row-gap: var(--spacing);
  }

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

  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }

  :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-zinc-800 > :not(:last-child)), :where(.divide-zinc-800\/60 > :not(:last-child)) {
    border-color: var(--color-zinc-800);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :where(.divide-zinc-800\/60 > :not(:last-child)) {
      border-color: color-mix(in oklab, var(--color-zinc-800) 60%, transparent);
    }
  }

  :where(.divide-zinc-800\/80 > :not(:last-child)) {
    border-color: var(--color-zinc-800);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :where(.divide-zinc-800\/80 > :not(:last-child)) {
      border-color: color-mix(in oklab, var(--color-zinc-800) 80%, transparent);
    }
  }

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

  .self-end {
    align-self: flex-end;
  }

  .self-start {
    align-self: flex-start;
  }

  .justify-self-start {
    justify-self: flex-start;
  }

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

  .overflow-auto {
    overflow: auto;
  }

  .overflow-hidden {
    overflow: hidden;
  }

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

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

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

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

  .\!rounded-none {
    border-radius: 0 !important;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .\!border-rose-500\/70 {
    border-color: var(--color-rose-500) !important;
  }

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

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

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

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

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

  .border-\[\#344857\]\/50 {
    border-color: oklab(39.1161% -.017257 -.0314036 / .5);
  }

  .border-\[\#344857\]\/60 {
    border-color: oklab(39.1161% -.017257 -.0314036 / .6);
  }

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

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

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

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

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

  .border-\[\#bda16b\]\/20 {
    border-color: oklab(72.1428% .00930995 .0781353 / .2);
  }

  .border-\[\#bda16b\]\/30 {
    border-color: oklab(72.1428% .00930995 .0781353 / .3);
  }

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

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

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

  .border-\[\#d9b56d\]\/30 {
    border-color: oklab(78.9386% .011068 .0992453 / .3);
  }

  .border-\[\#d9b56d\]\/40 {
    border-color: oklab(78.9386% .011068 .0992453 / .4);
  }

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

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

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

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

  .border-amber-200\/10 {
    border-color: #fee6851a;
  }

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

  .border-amber-200\/15 {
    border-color: #fee68526;
  }

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

  .border-amber-200\/20 {
    border-color: #fee68533;
  }

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

  .border-amber-200\/30 {
    border-color: #fee6854d;
  }

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

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

  .border-amber-300\/15 {
    border-color: #ffd23626;
  }

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

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

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

  .border-amber-400, .border-amber-400\/30 {
    border-color: var(--color-amber-400);
  }

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

  .border-amber-400\/40 {
    border-color: var(--color-amber-400);
  }

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

  .border-amber-400\/50 {
    border-color: var(--color-amber-400);
  }

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

  .border-amber-400\/60 {
    border-color: var(--color-amber-400);
  }

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

  .border-amber-400\/70 {
    border-color: var(--color-amber-400);
  }

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

  .border-amber-400\/80 {
    border-color: var(--color-amber-400);
  }

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

  .border-amber-400\/90 {
    border-color: var(--color-amber-400);
  }

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

  .border-amber-500, .border-amber-500\/10 {
    border-color: var(--color-amber-500);
  }

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

  .border-amber-500\/20 {
    border-color: var(--color-amber-500);
  }

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

  .border-amber-500\/25 {
    border-color: var(--color-amber-500);
  }

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

  .border-amber-500\/30 {
    border-color: var(--color-amber-500);
  }

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

  .border-amber-500\/40 {
    border-color: var(--color-amber-500);
  }

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

  .border-amber-500\/50 {
    border-color: var(--color-amber-500);
  }

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

  .border-amber-500\/60 {
    border-color: var(--color-amber-500);
  }

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

  .border-amber-500\/80 {
    border-color: var(--color-amber-500);
  }

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

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

  .border-amber-600\/40 {
    border-color: #dd740066;
  }

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

  .border-amber-600\/60 {
    border-color: #dd740099;
  }

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

  .border-amber-600\/80 {
    border-color: #dd7400cc;
  }

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

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

  .border-amber-700\/40 {
    border-color: #b7500066;
  }

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

  .border-amber-700\/50 {
    border-color: #b7500080;
  }

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

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

  .border-amber-800\/40 {
    border-color: #953d0066;
  }

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

  .border-amber-800\/50 {
    border-color: #953d0080;
  }

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

  .border-amber-800\/60 {
    border-color: #953d0099;
  }

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

  .border-amber-900, .border-amber-900\/30 {
    border-color: var(--color-amber-900);
  }

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

  .border-amber-900\/60 {
    border-color: var(--color-amber-900);
  }

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

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

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

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

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

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

  .border-blue-800\/50 {
    border-color: #193cb880;
  }

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

  .border-blue-800\/60 {
    border-color: #193cb899;
  }

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

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

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

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

  .border-cyan-500\/30 {
    border-color: #00b7d74d;
  }

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

  .border-cyan-500\/40 {
    border-color: #00b7d766;
  }

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

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

  .border-cyan-800 {
    border-color: var(--color-cyan-800);
  }

  .border-cyan-800\/40 {
    border-color: #005f7866;
  }

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

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

  .border-emerald-400, .border-emerald-400\/80 {
    border-color: var(--color-emerald-400);
  }

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

  .border-emerald-500, .border-emerald-500\/20 {
    border-color: var(--color-emerald-500);
  }

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

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

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

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

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

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

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

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

  .border-emerald-600\/50 {
    border-color: #00976780;
  }

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

  .border-emerald-600\/60 {
    border-color: #00976799;
  }

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

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

  .border-emerald-700\/40 {
    border-color: #00795666;
  }

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

  .border-emerald-700\/50 {
    border-color: #00795680;
  }

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

  .border-emerald-700\/60 {
    border-color: #00795699;
  }

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

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

  .border-emerald-800\/30 {
    border-color: #005f464d;
  }

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

  .border-emerald-800\/40 {
    border-color: #005f4666;
  }

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

  .border-emerald-800\/50 {
    border-color: #005f4680;
  }

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

  .border-emerald-800\/60 {
    border-color: #005f4699;
  }

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

  .border-emerald-800\/80 {
    border-color: #005f46cc;
  }

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

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

  .border-emerald-900\/50 {
    border-color: #004e3b80;
  }

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

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

  .border-indigo-500, .border-indigo-500\/40 {
    border-color: var(--color-indigo-500);
  }

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

  .border-indigo-500\/60 {
    border-color: var(--color-indigo-500);
  }

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

  .border-indigo-500\/80 {
    border-color: var(--color-indigo-500);
  }

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

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

  .border-indigo-600\/60 {
    border-color: #4f39f699;
  }

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

  .border-indigo-700 {
    border-color: var(--color-indigo-700);
  }

  .border-indigo-800 {
    border-color: var(--color-indigo-800);
  }

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

  .border-orange-500\/60 {
    border-color: #fe6e0099;
  }

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

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

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

  .border-purple-400\/90 {
    border-color: #c07effe6;
  }

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

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

  .border-purple-500\/30 {
    border-color: #ac4bff4d;
  }

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

  .border-purple-500\/40 {
    border-color: #ac4bff66;
  }

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

  .border-purple-500\/60 {
    border-color: #ac4bff99;
  }

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

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

  .border-purple-700 {
    border-color: var(--color-purple-700);
  }

  .border-purple-700\/40 {
    border-color: #8200da66;
  }

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

  .border-purple-800 {
    border-color: var(--color-purple-800);
  }

  .border-purple-800\/40 {
    border-color: #6e11b066;
  }

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

  .border-purple-800\/50 {
    border-color: #6e11b080;
  }

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

  .border-purple-800\/60 {
    border-color: #6e11b099;
  }

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

  .border-red-500, .border-red-500\/60 {
    border-color: var(--color-red-500);
  }

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

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

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

  .border-red-800\/60 {
    border-color: #9f071299;
  }

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

  .border-red-800\/80 {
    border-color: #9f0712cc;
  }

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

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

  .border-red-900\/50 {
    border-color: #82181a80;
  }

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

  .border-red-900\/60 {
    border-color: #82181a99;
  }

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

  .border-red-950, .border-red-950\/80 {
    border-color: var(--color-red-950);
  }

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

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

  .border-rose-500, .border-rose-500\/30 {
    border-color: var(--color-rose-500);
  }

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

  .border-rose-500\/40 {
    border-color: var(--color-rose-500);
  }

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

  .border-rose-500\/50 {
    border-color: var(--color-rose-500);
  }

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

  .border-rose-500\/60 {
    border-color: var(--color-rose-500);
  }

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

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

  .border-rose-600\/50 {
    border-color: #e7004480;
  }

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

  .border-rose-700 {
    border-color: var(--color-rose-700);
  }

  .border-rose-700\/60 {
    border-color: #c2003999;
  }

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

  .border-rose-800 {
    border-color: var(--color-rose-800);
  }

  .border-rose-800\/40 {
    border-color: #a3003766;
  }

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

  .border-rose-800\/60 {
    border-color: #a3003799;
  }

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

  .border-rose-800\/80 {
    border-color: #a30037cc;
  }

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

  .border-rose-900 {
    border-color: var(--color-rose-900);
  }

  .border-rose-900\/50 {
    border-color: #8b083680;
  }

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

  .border-rose-900\/60 {
    border-color: #8b083699;
  }

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

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

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

  .border-sky-500, .border-sky-500\/20 {
    border-color: var(--color-sky-500);
  }

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

  .border-sky-500\/30 {
    border-color: var(--color-sky-500);
  }

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

  .border-sky-500\/40 {
    border-color: var(--color-sky-500);
  }

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

  .border-sky-500\/60 {
    border-color: var(--color-sky-500);
  }

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

  .border-sky-700 {
    border-color: var(--color-sky-700);
  }

  .border-sky-800 {
    border-color: var(--color-sky-800);
  }

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

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

  .border-slate-700\/60 {
    border-color: #31415899;
  }

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

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

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

  .border-teal-500\/30 {
    border-color: #00baa74d;
  }

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

  .border-teal-800 {
    border-color: var(--color-teal-800);
  }

  .border-teal-800\/40 {
    border-color: #005f5a66;
  }

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

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

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

  .border-violet-300\/15 {
    border-color: #c4b4ff26;
  }

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

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

  .border-violet-500, .border-violet-500\/30 {
    border-color: var(--color-violet-500);
  }

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

  .border-violet-500\/40 {
    border-color: var(--color-violet-500);
  }

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

  .border-violet-700 {
    border-color: var(--color-violet-700);
  }

  .border-violet-800 {
    border-color: var(--color-violet-800);
  }

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

  .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\/15 {
    border-color: #ffffff26;
  }

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

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

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

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

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

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

  .border-yellow-500\/60 {
    border-color: #edb20099;
  }

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

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

  .border-zinc-200, .border-zinc-200\/90 {
    border-color: var(--color-zinc-200);
  }

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

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

  .border-zinc-500, .border-zinc-500\/60 {
    border-color: var(--color-zinc-500);
  }

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

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

  .border-zinc-700, .border-zinc-700\/40 {
    border-color: var(--color-zinc-700);
  }

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

  .border-zinc-700\/50 {
    border-color: var(--color-zinc-700);
  }

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

  .border-zinc-700\/60 {
    border-color: var(--color-zinc-700);
  }

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

  .border-zinc-700\/70 {
    border-color: var(--color-zinc-700);
  }

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

  .border-zinc-700\/80 {
    border-color: var(--color-zinc-700);
  }

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

  .border-zinc-800, .border-zinc-800\/40 {
    border-color: var(--color-zinc-800);
  }

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

  .border-zinc-800\/50 {
    border-color: var(--color-zinc-800);
  }

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

  .border-zinc-800\/60 {
    border-color: var(--color-zinc-800);
  }

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

  .border-zinc-800\/80 {
    border-color: var(--color-zinc-800);
  }

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

  .border-zinc-800\/90 {
    border-color: var(--color-zinc-800);
  }

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

  .border-zinc-900, .border-zinc-900\/40 {
    border-color: var(--color-zinc-900);
  }

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

  .border-zinc-900\/60 {
    border-color: var(--color-zinc-900);
  }

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

  .bg-\[\#0a1b27\]\/80 {
    background-color: oklab(21.3939% -.0158077 -.0289186 / .8);
  }

  .bg-\[\#0a231b\]\/90 {
    background-color: oklab(23.3478% -.0343285 .00634655 / .9);
  }

  .bg-\[\#0b1a24\]\/85 {
    background-color: oklab(20.9673% -.0146326 -.0246637 / .85);
  }

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

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

  .bg-\[\#0c1c27\]\/80 {
    background-color: oklab(21.8155% -.0152514 -.0266596 / .8);
  }

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

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

  .bg-\[\#2a1218\]\/90 {
    background-color: oklab(21.9955% .0402903 .00351299 / .9);
  }

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

  .bg-\[\#241c10\]\/90 {
    background-color: oklab(23.2315% .00546405 .0240426 / .9);
  }

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

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

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

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

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

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

  .bg-\[\#061018\]\/60 {
    background-color: oklab(16.7354% -.0106403 -.0203965 / .6);
  }

  .bg-\[\#061018\]\/90 {
    background-color: oklab(16.7354% -.0106403 -.0203965 / .9);
  }

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

  .bg-\[\#091520\]\/95 {
    background-color: oklab(19.0583% -.0108998 -.0262121 / .95);
  }

  .bg-\[\#091622\]\/60 {
    background-color: oklab(19.4931% -.0115901 -.0283377 / .6);
  }

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

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

  .bg-\[\#344857\]\/70 {
    background-color: oklab(39.1161% -.017257 -.0314036 / .7);
  }

  .bg-\[\#d9b56d\]\/20 {
    background-color: oklab(78.9386% .011068 .0992453 / .2);
  }

  .bg-\[\#d9b56d\]\/40 {
    background-color: oklab(78.9386% .011068 .0992453 / .4);
  }

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

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

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

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

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

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

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

  .bg-amber-50\/80 {
    background-color: #fffbebcc;
  }

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

  .bg-amber-50\/90 {
    background-color: #fffbebe6;
  }

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

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

  .bg-amber-100\/90 {
    background-color: #fef3c6e6;
  }

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

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

  .bg-amber-400, .bg-amber-400\/10 {
    background-color: var(--color-amber-400);
  }

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

  .bg-amber-400\/20 {
    background-color: var(--color-amber-400);
  }

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

  .bg-amber-500, .bg-amber-500\/5 {
    background-color: var(--color-amber-500);
  }

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

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

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

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

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

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

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

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

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

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

  .bg-amber-950, .bg-amber-950\/15 {
    background-color: var(--color-amber-950);
  }

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

  .bg-amber-950\/20 {
    background-color: var(--color-amber-950);
  }

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

  .bg-amber-950\/30 {
    background-color: var(--color-amber-950);
  }

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

  .bg-amber-950\/40 {
    background-color: var(--color-amber-950);
  }

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

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

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

  .bg-amber-950\/60 {
    background-color: var(--color-amber-950);
  }

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

  .bg-amber-950\/70 {
    background-color: var(--color-amber-950);
  }

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

  .bg-amber-950\/80 {
    background-color: var(--color-amber-950);
  }

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

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

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

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

  .bg-black\/25 {
    background-color: #00000040;
  }

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

  .bg-black\/30 {
    background-color: #0000004d;
  }

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

  .bg-black\/35 {
    background-color: #00000059;
  }

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

  .bg-black\/55 {
    background-color: #0000008c;
  }

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

  .bg-black\/60 {
    background-color: #0009;
  }

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

  .bg-black\/65 {
    background-color: #000000a6;
  }

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

  .bg-black\/70 {
    background-color: #000000b3;
  }

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

  .bg-black\/75 {
    background-color: #000000bf;
  }

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

  .bg-black\/80 {
    background-color: #000c;
  }

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

  .bg-black\/85 {
    background-color: #000000d9;
  }

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

  .bg-black\/95 {
    background-color: #000000f2;
  }

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

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

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

  .bg-blue-950\/50 {
    background-color: #16245680;
  }

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

  .bg-blue-950\/80 {
    background-color: #162456cc;
  }

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

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

  .bg-cyan-50\/70 {
    background-color: #ecfeffb3;
  }

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

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

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

  .bg-cyan-500\/10 {
    background-color: #00b7d71a;
  }

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

  .bg-cyan-500\/20 {
    background-color: #00b7d733;
  }

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

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

  .bg-cyan-950\/30 {
    background-color: #0533454d;
  }

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

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

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

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

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

  .bg-emerald-500, .bg-emerald-500\/10 {
    background-color: var(--color-emerald-500);
  }

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

  .bg-emerald-500\/15 {
    background-color: var(--color-emerald-500);
  }

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

  .bg-emerald-500\/20 {
    background-color: var(--color-emerald-500);
  }

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

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

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

  .bg-emerald-700\/80 {
    background-color: #007956cc;
  }

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

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

  .bg-emerald-900\/70 {
    background-color: #004e3bb3;
  }

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

  .bg-emerald-950, .bg-emerald-950\/20 {
    background-color: var(--color-emerald-950);
  }

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

  .bg-emerald-950\/30 {
    background-color: var(--color-emerald-950);
  }

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

  .bg-emerald-950\/40 {
    background-color: var(--color-emerald-950);
  }

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

  .bg-emerald-950\/50 {
    background-color: var(--color-emerald-950);
  }

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

  .bg-emerald-950\/60 {
    background-color: var(--color-emerald-950);
  }

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

  .bg-emerald-950\/80 {
    background-color: var(--color-emerald-950);
  }

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

  .bg-emerald-950\/90 {
    background-color: var(--color-emerald-950);
  }

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

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

  .bg-indigo-500, .bg-indigo-500\/15 {
    background-color: var(--color-indigo-500);
  }

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

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

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

  .bg-indigo-950, .bg-indigo-950\/20 {
    background-color: var(--color-indigo-950);
  }

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

  .bg-indigo-950\/40 {
    background-color: var(--color-indigo-950);
  }

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

  .bg-indigo-950\/80 {
    background-color: var(--color-indigo-950);
  }

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

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

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

  .bg-orange-950\/20 {
    background-color: #44130633;
  }

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

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

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

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

  .bg-purple-500\/10 {
    background-color: #ac4bff1a;
  }

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

  .bg-purple-500\/15 {
    background-color: #ac4bff26;
  }

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

  .bg-purple-500\/20 {
    background-color: #ac4bff33;
  }

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

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

  .bg-purple-900\/80 {
    background-color: #59168bcc;
  }

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

  .bg-purple-900\/90 {
    background-color: #59168be6;
  }

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

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

  .bg-purple-950\/30 {
    background-color: #3c03664d;
  }

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

  .bg-purple-950\/40 {
    background-color: #3c036666;
  }

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

  .bg-purple-950\/60 {
    background-color: #3c036699;
  }

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

  .bg-purple-950\/70 {
    background-color: #3c0366b3;
  }

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

  .bg-purple-950\/80 {
    background-color: #3c0366cc;
  }

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

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

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

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

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

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

  .bg-red-950, .bg-red-950\/20 {
    background-color: var(--color-red-950);
  }

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

  .bg-red-950\/30 {
    background-color: var(--color-red-950);
  }

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

  .bg-red-950\/40 {
    background-color: var(--color-red-950);
  }

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

  .bg-red-950\/60 {
    background-color: var(--color-red-950);
  }

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

  .bg-red-950\/80 {
    background-color: var(--color-red-950);
  }

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

  .bg-red-950\/90 {
    background-color: var(--color-red-950);
  }

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

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

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

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

  .bg-rose-500, .bg-rose-500\/10 {
    background-color: var(--color-rose-500);
  }

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

  .bg-rose-500\/20 {
    background-color: var(--color-rose-500);
  }

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

  .bg-rose-500\/30 {
    background-color: var(--color-rose-500);
  }

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

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

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

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

  .bg-rose-900\/30 {
    background-color: #8b08364d;
  }

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

  .bg-rose-950, .bg-rose-950\/20 {
    background-color: var(--color-rose-950);
  }

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

  .bg-rose-950\/30 {
    background-color: var(--color-rose-950);
  }

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

  .bg-rose-950\/40 {
    background-color: var(--color-rose-950);
  }

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

  .bg-rose-950\/60 {
    background-color: var(--color-rose-950);
  }

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

  .bg-rose-950\/70 {
    background-color: var(--color-rose-950);
  }

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

  .bg-rose-950\/80 {
    background-color: var(--color-rose-950);
  }

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

  .bg-rose-950\/90 {
    background-color: var(--color-rose-950);
  }

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

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

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

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

  .bg-sky-500, .bg-sky-500\/10 {
    background-color: var(--color-sky-500);
  }

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

  .bg-sky-500\/15 {
    background-color: var(--color-sky-500);
  }

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

  .bg-sky-500\/20 {
    background-color: var(--color-sky-500);
  }

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

  .bg-sky-500\/25 {
    background-color: var(--color-sky-500);
  }

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

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

  .bg-sky-950, .bg-sky-950\/20 {
    background-color: var(--color-sky-950);
  }

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

  .bg-sky-950\/40 {
    background-color: var(--color-sky-950);
  }

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

  .bg-sky-950\/70 {
    background-color: var(--color-sky-950);
  }

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

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

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

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

  .bg-slate-900\/60 {
    background-color: #0f172b99;
  }

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

  .bg-slate-900\/70 {
    background-color: #0f172bb3;
  }

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

  .bg-slate-900\/80 {
    background-color: #0f172bcc;
  }

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

  .bg-slate-900\/90 {
    background-color: #0f172be6;
  }

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

  .bg-slate-900\/95 {
    background-color: #0f172bf2;
  }

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

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

  .bg-slate-950\/40 {
    background-color: #02061866;
  }

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

  .bg-slate-950\/80 {
    background-color: #020618cc;
  }

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

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

  .bg-teal-950\/30 {
    background-color: #022f2e4d;
  }

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

  .bg-teal-950\/40 {
    background-color: #022f2e66;
  }

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

  .bg-transparent {
    background-color: #0000;
  }

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

  .bg-violet-500, .bg-violet-500\/10 {
    background-color: var(--color-violet-500);
  }

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

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

  .bg-violet-950, .bg-violet-950\/15 {
    background-color: var(--color-violet-950);
  }

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

  .bg-violet-950\/20 {
    background-color: var(--color-violet-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-violet-950\/20 {
      background-color: color-mix(in oklab, var(--color-violet-950) 20%, 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\/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\/\[\.035\] {
    background-color: #ffffff09;
  }

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

  .bg-white\/\[0\.035\] {
    background-color: #ffffff09;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/\[0\.035\] {
      background-color: color-mix(in oklab, var(--color-white) 3.5%, transparent);
    }
  }

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

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

  .bg-yellow-950\/20 {
    background-color: #43200433;
  }

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

  .bg-zinc-50, .bg-zinc-50\/50 {
    background-color: var(--color-zinc-50);
  }

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

  .bg-zinc-50\/70 {
    background-color: var(--color-zinc-50);
  }

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

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

  .bg-zinc-200, .bg-zinc-200\/70 {
    background-color: var(--color-zinc-200);
  }

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

  .bg-zinc-200\/80 {
    background-color: var(--color-zinc-200);
  }

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

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

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

  .bg-zinc-700, .bg-zinc-700\/50 {
    background-color: var(--color-zinc-700);
  }

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

  .bg-zinc-800, .bg-zinc-800\/20 {
    background-color: var(--color-zinc-800);
  }

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

  .bg-zinc-800\/40 {
    background-color: var(--color-zinc-800);
  }

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

  .bg-zinc-800\/50 {
    background-color: var(--color-zinc-800);
  }

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

  .bg-zinc-800\/60 {
    background-color: var(--color-zinc-800);
  }

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

  .bg-zinc-800\/80 {
    background-color: var(--color-zinc-800);
  }

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

  .bg-zinc-800\/90 {
    background-color: var(--color-zinc-800);
  }

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

  .bg-zinc-900, .bg-zinc-900\/40 {
    background-color: var(--color-zinc-900);
  }

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

  .bg-zinc-900\/50 {
    background-color: var(--color-zinc-900);
  }

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

  .bg-zinc-900\/60 {
    background-color: var(--color-zinc-900);
  }

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

  .bg-zinc-900\/70 {
    background-color: var(--color-zinc-900);
  }

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

  .bg-zinc-900\/80 {
    background-color: var(--color-zinc-900);
  }

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

  .bg-zinc-900\/85 {
    background-color: var(--color-zinc-900);
  }

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

  .bg-zinc-900\/90 {
    background-color: var(--color-zinc-900);
  }

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

  .bg-zinc-950, .bg-zinc-950\/20 {
    background-color: var(--color-zinc-950);
  }

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

  .bg-zinc-950\/40 {
    background-color: var(--color-zinc-950);
  }

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

  .bg-zinc-950\/50 {
    background-color: var(--color-zinc-950);
  }

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

  .bg-zinc-950\/60 {
    background-color: var(--color-zinc-950);
  }

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

  .bg-zinc-950\/70 {
    background-color: var(--color-zinc-950);
  }

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

  .bg-zinc-950\/80 {
    background-color: var(--color-zinc-950);
  }

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

  .bg-zinc-950\/85 {
    background-color: var(--color-zinc-950);
  }

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

  .bg-zinc-950\/90 {
    background-color: var(--color-zinc-950);
  }

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

  .bg-zinc-950\/95 {
    background-color: var(--color-zinc-950);
  }

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

  .bg-gradient-to-b {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-l {
    --tw-gradient-position: to left in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-t {
    --tw-gradient-position: to top in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-\[linear-gradient\(90deg\,rgba\(180\,120\,30\,\.28\)\,rgba\(30\,35\,45\,\.24\)\)\] {
    background-image: linear-gradient(90deg, #b4781e47, #1e232d3d);
  }

  .bg-\[radial-gradient\(circle_at_15\%_25\%\,rgba\(124\,58\,237\,0\.08\)\,transparent_50\%\)\] {
    background-image: radial-gradient(circle at 15% 25%, #7c3aed14, #0000 50%);
  }

  .bg-\[radial-gradient\(circle_at_15\%_35\%\,rgba\(124\,58\,237\,0\.12\)\,transparent_45\%\)\] {
    background-image: radial-gradient(circle at 15% 35%, #7c3aed1f, #0000 45%);
  }

  .bg-\[radial-gradient\(circle_at_50\%_50\%\,rgba\(124\,58\,237\,0\.12\)\,transparent_60\%\)\] {
    background-image: radial-gradient(circle, #7c3aed1f, #0000 60%);
  }

  .bg-\[radial-gradient\(circle_at_50\%_100\%\,rgba\(214\,167\,86\,0\.10\)\,transparent_50\%\)\] {
    background-image: radial-gradient(circle at 50% 100%, #d6a7561a, #0000 50%);
  }

  .bg-\[radial-gradient\(circle_at_85\%_35\%\,rgba\(56\,189\,248\,0\.06\)\,transparent_45\%\)\] {
    background-image: radial-gradient(circle at 85% 35%, #38bdf80f, #0000 45%);
  }

  .bg-\[radial-gradient\(circle_at_85\%_35\%\,rgba\(56\,189\,248\,0\.08\)\,transparent_45\%\)\] {
    background-image: radial-gradient(circle at 85% 35%, #38bdf814, #0000 45%);
  }

  .bg-\[radial-gradient\(circle_at_center\,rgba\(99\,102\,241\,0\.03\)_0\%\,transparent_70\%\)\] {
    background-image: radial-gradient(circle, #6366f108 0%, #0000 70%);
  }

  .bg-\[radial-gradient\(circle_at_right\,rgba\(244\,63\,94\,0\.08\)\,transparent_70\%\)\] {
    background-image: radial-gradient(circle at 100%, #f43f5e14, #0000 70%);
  }

  .bg-\[radial-gradient\(circle_at_top\,_var\(--tw-gradient-stops\)\)\] {
    background-image: radial-gradient(circle at top, var(--tw-gradient-stops));
  }

  .bg-\[radial-gradient\(ellipse_at_50\%_0\%\,rgba\(214\,167\,86\,0\.12\)\,transparent_65\%\)\] {
    background-image: radial-gradient(at 50% 0, #d6a7561f, #0000 65%);
  }

  .bg-\[radial-gradient\(ellipse_at_50\%_0\%\,rgba\(214\,167\,86\,0\.15\)\,transparent_65\%\)\] {
    background-image: radial-gradient(at 50% 0, #d6a75626, #0000 65%);
  }

  .bg-\[radial-gradient\(ellipse_at_center\,_var\(--tw-gradient-stops\)\)\] {
    background-image: radial-gradient(ellipse at center, var(--tw-gradient-stops));
  }

  .from-\[\#0c1a25\]\/95 {
    --tw-gradient-from: oklab(21.092% -.0130914 -.0262666 / .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-\[\#0e1721\] {
    --tw-gradient-from: #0e1721;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#1e1c2b\] {
    --tw-gradient-from: #1e1c2b;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#121c26\] {
    --tw-gradient-from: #121c26;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#122533\] {
    --tw-gradient-from: #122533;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#d9b56d\] {
    --tw-gradient-from: #d9b56d;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#e0bd78\] {
    --tw-gradient-from: #e0bd78;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#eed8ab\] {
    --tw-gradient-from: #eed8ab;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-amber-500 {
    --tw-gradient-from: var(--color-amber-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-amber-500\/10 {
    --tw-gradient-from: var(--color-amber-500);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-amber-500\/10 {
      --tw-gradient-from: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
    }
  }

  .from-amber-500\/10 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-amber-500\/15 {
    --tw-gradient-from: var(--color-amber-500);
  }

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

  .from-amber-500\/15 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-amber-600 {
    --tw-gradient-from: var(--color-amber-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-amber-600\/30 {
    --tw-gradient-from: #dd74004d;
  }

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

  .from-amber-600\/30 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-amber-950 {
    --tw-gradient-from: var(--color-amber-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-amber-950\/60 {
    --tw-gradient-from: var(--color-amber-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-amber-950\/60 {
      --tw-gradient-from: color-mix(in oklab, var(--color-amber-950) 60%, transparent);
    }
  }

  .from-amber-950\/60 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-amber-950\/80 {
    --tw-gradient-from: var(--color-amber-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-amber-950\/80 {
      --tw-gradient-from: color-mix(in oklab, var(--color-amber-950) 80%, transparent);
    }
  }

  .from-amber-950\/80 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-black {
    --tw-gradient-from: var(--color-black);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-black\/40 {
    --tw-gradient-from: #0006;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-black\/40 {
      --tw-gradient-from: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }

  .from-black\/40 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-emerald-600 {
    --tw-gradient-from: var(--color-emerald-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-emerald-950 {
    --tw-gradient-from: var(--color-emerald-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-emerald-950\/70 {
    --tw-gradient-from: var(--color-emerald-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-emerald-950\/70 {
      --tw-gradient-from: color-mix(in oklab, var(--color-emerald-950) 70%, transparent);
    }
  }

  .from-emerald-950\/70 {
    --tw-gradient-stops: var(--tw-gradient-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-900 {
    --tw-gradient-from: var(--color-indigo-900);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-indigo-900\/80 {
    --tw-gradient-from: var(--color-indigo-900);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-indigo-900\/80 {
      --tw-gradient-from: color-mix(in oklab, var(--color-indigo-900) 80%, transparent);
    }
  }

  .from-indigo-900\/80 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-indigo-950 {
    --tw-gradient-from: var(--color-indigo-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-purple-950 {
    --tw-gradient-from: var(--color-purple-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-purple-950\/60 {
    --tw-gradient-from: #3c036699;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-purple-950\/60 {
      --tw-gradient-from: color-mix(in oklab, var(--color-purple-950) 60%, transparent);
    }
  }

  .from-purple-950\/60 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-purple-950\/80 {
    --tw-gradient-from: #3c0366cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-purple-950\/80 {
      --tw-gradient-from: color-mix(in oklab, var(--color-purple-950) 80%, transparent);
    }
  }

  .from-purple-950\/80 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-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-transparent {
    --tw-gradient-from: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-zinc-900 {
    --tw-gradient-from: var(--color-zinc-900);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-zinc-900\/60 {
    --tw-gradient-from: var(--color-zinc-900);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-zinc-900\/60 {
      --tw-gradient-from: color-mix(in oklab, var(--color-zinc-900) 60%, transparent);
    }
  }

  .from-zinc-900\/60 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-zinc-900\/90 {
    --tw-gradient-from: var(--color-zinc-900);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-zinc-900\/90 {
      --tw-gradient-from: color-mix(in oklab, var(--color-zinc-900) 90%, transparent);
    }
  }

  .from-zinc-900\/90 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-zinc-950 {
    --tw-gradient-from: var(--color-zinc-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));
  }

  .via-\[\#081520\]\/95 {
    --tw-gradient-via: oklab(18.9857% -.0121303 -.0265531 / .95);
    --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-\[\#091722\] {
    --tw-gradient-via: #091722;
    --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-\[\#121320\] {
    --tw-gradient-via: #121320;
    --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-\[\#f7e2a9\] {
    --tw-gradient-via: #f7e2a9;
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .via-amber-400 {
    --tw-gradient-via: var(--color-amber-400);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .via-amber-950 {
    --tw-gradient-via: var(--color-amber-950);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .via-amber-950\/40 {
    --tw-gradient-via: var(--color-amber-950);
  }

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

  .via-amber-950\/40 {
    --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 {
    --tw-gradient-via: var(--color-slate-900);
    --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\/50 {
    --tw-gradient-via: #0f172b80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-slate-900\/50 {
      --tw-gradient-via: color-mix(in oklab, var(--color-slate-900) 50%, transparent);
    }
  }

  .via-slate-900\/50 {
    --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-950 {
    --tw-gradient-via: var(--color-slate-950);
    --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-950\/40 {
    --tw-gradient-via: #02061866;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-slate-950\/40 {
      --tw-gradient-via: color-mix(in oklab, var(--color-slate-950) 40%, transparent);
    }
  }

  .via-slate-950\/40 {
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .via-transparent {
    --tw-gradient-via: transparent;
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .via-zinc-900 {
    --tw-gradient-via: var(--color-zinc-900);
    --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-zinc-900\/30 {
    --tw-gradient-via: var(--color-zinc-900);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-zinc-900\/30 {
      --tw-gradient-via: color-mix(in oklab, var(--color-zinc-900) 30%, transparent);
    }
  }

  .via-zinc-900\/30 {
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .via-zinc-900\/50 {
    --tw-gradient-via: var(--color-zinc-900);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-zinc-900\/50 {
      --tw-gradient-via: color-mix(in oklab, var(--color-zinc-900) 50%, transparent);
    }
  }

  .via-zinc-900\/50 {
    --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-zinc-900\/60 {
    --tw-gradient-via: var(--color-zinc-900);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-zinc-900\/60 {
      --tw-gradient-via: color-mix(in oklab, var(--color-zinc-900) 60%, transparent);
    }
  }

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

  .via-zinc-900\/95 {
    --tw-gradient-via: var(--color-zinc-900);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-zinc-900\/95 {
      --tw-gradient-via: color-mix(in oklab, var(--color-zinc-900) 95%, transparent);
    }
  }

  .via-zinc-900\/95 {
    --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-zinc-950 {
    --tw-gradient-via: var(--color-zinc-950);
    --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-zinc-950\/40 {
    --tw-gradient-via: var(--color-zinc-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-zinc-950\/40 {
      --tw-gradient-via: color-mix(in oklab, var(--color-zinc-950) 40%, transparent);
    }
  }

  .via-zinc-950\/40 {
    --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-\[\#09121a\] {
    --tw-gradient-to: #09121a;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#061018\] {
    --tw-gradient-to: #061018;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#061018\]\/95 {
    --tw-gradient-to: oklab(16.7354% -.0106403 -.0203965 / .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));
  }

  .to-\[\#080811\] {
    --tw-gradient-to: #080811;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#081018\] {
    --tw-gradient-to: #081018;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#b48a46\] {
    --tw-gradient-to: #b48a46;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#b8954d\] {
    --tw-gradient-to: #b8954d;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#d9b56d\] {
    --tw-gradient-to: #d9b56d;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#d9b56d\]\/50 {
    --tw-gradient-to: oklab(78.9386% .011068 .0992453 / .5);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-\[\#d9b56d\]\/60 {
    --tw-gradient-to: oklab(78.9386% .011068 .0992453 / .6);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-amber-500 {
    --tw-gradient-to: var(--color-amber-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-amber-500\/20 {
    --tw-gradient-to: var(--color-amber-500);
  }

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

  .to-amber-500\/20 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-amber-600 {
    --tw-gradient-to: var(--color-amber-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-amber-700 {
    --tw-gradient-to: var(--color-amber-700);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-emerald-500 {
    --tw-gradient-to: var(--color-emerald-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-indigo-950 {
    --tw-gradient-to: var(--color-indigo-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));
  }

  .to-indigo-950\/50 {
    --tw-gradient-to: var(--color-indigo-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-indigo-950\/50 {
      --tw-gradient-to: color-mix(in oklab, var(--color-indigo-950) 50%, transparent);
    }
  }

  .to-indigo-950\/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));
  }

  .to-slate-950 {
    --tw-gradient-to: 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));
  }

  .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-zinc-900 {
    --tw-gradient-to: var(--color-zinc-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-zinc-950 {
    --tw-gradient-to: var(--color-zinc-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));
  }

  .to-zinc-950\/80 {
    --tw-gradient-to: var(--color-zinc-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-zinc-950\/80 {
      --tw-gradient-to: color-mix(in oklab, var(--color-zinc-950) 80%, transparent);
    }
  }

  .to-zinc-950\/80 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
  }

  .fill-amber-400, .fill-amber-400\/30 {
    fill: var(--color-amber-400);
  }

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

  .fill-amber-400\/40 {
    fill: var(--color-amber-400);
  }

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

  .fill-current {
    fill: currentColor;
  }

  .stroke-\[2\.5\] {
    stroke-width: 2.5px;
  }

  .stroke-\[3\] {
    stroke-width: 3px;
  }

  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

  .object-center {
    object-position: center;
  }

  .\!p-0 {
    padding: 0 !important;
  }

  .\!p-2 {
    padding: calc(var(--spacing) * 2) !important;
  }

  .p-0 {
    padding: 0;
  }

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

  .p-1 {
    padding: var(--spacing);
  }

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

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

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

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

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

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

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

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

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

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

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

  .\!px-3 {
    padding-inline: calc(var(--spacing) * 3) !important;
  }

  .\!px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5) !important;
  }

  .\!px-4 {
    padding-inline: calc(var(--spacing) * 4) !important;
  }

  .\!px-5 {
    padding-inline: calc(var(--spacing) * 5) !important;
  }

  .\!px-8 {
    padding-inline: calc(var(--spacing) * 8) !important;
  }

  .px-0 {
    padding-inline: 0;
  }

  .px-0\.5 {
    padding-inline: calc(var(--spacing) * .5);
  }

  .px-1 {
    padding-inline: var(--spacing);
  }

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

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

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

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

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

  .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-1\.5 {
    padding-block: calc(var(--spacing) * 1.5) !important;
  }

  .\!py-2 {
    padding-block: calc(var(--spacing) * 2) !important;
  }

  .\!py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5) !important;
  }

  .\!py-3 {
    padding-block: calc(var(--spacing) * 3) !important;
  }

  .py-0 {
    padding-block: 0;
  }

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

  .py-1 {
    padding-block: var(--spacing);
  }

  .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-24 {
    padding-block: calc(var(--spacing) * 24);
  }

  .py-\[14px\] {
    padding-block: 14px;
  }

  .pt-0 {
    padding-top: 0;
  }

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

  .pt-1 {
    padding-top: var(--spacing);
  }

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

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

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

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

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

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

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

  .pt-9 {
    padding-top: calc(var(--spacing) * 9);
  }

  .pr-1 {
    padding-right: var(--spacing);
  }

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

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

  .pr-7 {
    padding-right: calc(var(--spacing) * 7);
  }

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

  .pr-10 {
    padding-right: calc(var(--spacing) * 10);
  }

  .pb-1 {
    padding-bottom: var(--spacing);
  }

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

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

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

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

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

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

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

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

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

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

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

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

  .\!pl-9 {
    padding-left: calc(var(--spacing) * 9) !important;
  }

  .pl-1 {
    padding-left: var(--spacing);
  }

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

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

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

  .pl-9 {
    padding-left: calc(var(--spacing) * 9);
  }

  .pl-10 {
    padding-left: calc(var(--spacing) * 10);
  }

  .pl-11 {
    padding-left: calc(var(--spacing) * 11);
  }

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

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

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

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

  .align-middle {
    vertical-align: middle;
  }

  .align-top {
    vertical-align: top;
  }

  .font-mono {
    font-family: var(--font-mono);
  }

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

  .font-serif {
    font-family: var(--font-serif);
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }

  .text-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-\[8px\] {
    font-size: 8px;
  }

  .text-\[9px\] {
    font-size: 9px;
  }

  .text-\[10px\] {
    font-size: 10px;
  }

  .text-\[11px\] {
    font-size: 11px;
  }

  .text-\[15px\] {
    font-size: 15px;
  }

  .text-\[22px\] {
    font-size: 22px;
  }

  .leading-\[1\.12\] {
    --tw-leading: 1.12;
    line-height: 1.12;
  }

  .leading-\[1\.14\] {
    --tw-leading: 1.14;
    line-height: 1.14;
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }

  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }

  .font-black {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }

  .font-light {
    --tw-font-weight: var(--font-weight-light);
    font-weight: var(--font-weight-light);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-\[\.2em\] {
    --tw-tracking: .2em;
    letter-spacing: .2em;
  }

  .tracking-\[\.22em\] {
    --tw-tracking: .22em;
    letter-spacing: .22em;
  }

  .tracking-\[0\.2em\] {
    --tw-tracking: .2em;
    letter-spacing: .2em;
  }

  .tracking-\[0\.25em\] {
    --tw-tracking: .25em;
    letter-spacing: .25em;
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .tracking-tighter {
    --tw-tracking: var(--tracking-tighter);
    letter-spacing: var(--tracking-tighter);
  }

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

  .break-words {
    overflow-wrap: break-word;
  }

  .break-all {
    word-break: break-all;
  }

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

  .whitespace-pre-line {
    white-space: pre-line;
  }

  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }

  .text-\[\#8f96ac\] {
    color: #8f96ac;
  }

  .text-\[\#543d10\] {
    color: #543d10;
  }

  .text-\[\#674a1d\] {
    color: #674a1d;
  }

  .text-\[\#943b43\] {
    color: #943b43;
  }

  .text-\[\#08131d\] {
    color: #08131d;
  }

  .text-\[\#126746\] {
    color: #126746;
  }

  .text-\[\#795819\] {
    color: #795819;
  }

  .text-\[\#b5b1cb\] {
    color: #b5b1cb;
  }

  .text-\[\#b5b1cb\]\/60 {
    color: oklab(77.2005% .0141731 -.0340953 / .6);
  }

  .text-\[\#c4b5fd\] {
    color: #c4b5fd;
  }

  .text-\[\#c6bfcd\] {
    color: #c6bfcd;
  }

  .text-\[\#c9c2db\] {
    color: #c9c2db;
  }

  .text-\[\#c9c2db\]\/90 {
    color: oklab(82.7501% .0168275 -.0310982 / .9);
  }

  .text-\[\#d9b56d\] {
    color: #d9b56d;
  }

  .text-\[\#d9b56d\]\/40 {
    color: oklab(78.9386% .011068 .0992453 / .4);
  }

  .text-\[\#d9b56d\]\/70 {
    color: oklab(78.9386% .011068 .0992453 / .7);
  }

  .text-\[\#e8e1d2\] {
    color: #e8e1d2;
  }

  .text-\[\#e9d5ab\] {
    color: #e9d5ab;
  }

  .text-\[\#ebd5a7\] {
    color: #ebd5a7;
  }

  .text-\[\#eed8ab\] {
    color: #eed8ab;
  }

  .text-\[\#eed8ab\]\/90 {
    color: oklab(88.9292% .00562331 .0633508 / .9);
  }

  .text-\[\#eee9df\] {
    color: #eee9df;
  }

  .text-\[\#f0ede6\] {
    color: #f0ede6;
  }

  .text-\[\#f2cf86\] {
    color: #f2cf86;
  }

  .text-\[\#f2e9d9\] {
    color: #f2e9d9;
  }

  .text-\[\#fff0ce\] {
    color: #fff0ce;
  }

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

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

  .text-amber-100\/95 {
    color: #fef3c6f2;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-100\/95 {
      color: color-mix(in oklab, var(--color-amber-100) 95%, transparent);
    }
  }

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

  .text-amber-200\/30 {
    color: #fee6854d;
  }

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

  .text-amber-200\/70 {
    color: #fee685b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-200\/70 {
      color: color-mix(in oklab, var(--color-amber-200) 70%, transparent);
    }
  }

  .text-amber-200\/80 {
    color: #fee685cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-200\/80 {
      color: color-mix(in oklab, var(--color-amber-200) 80%, transparent);
    }
  }

  .text-amber-200\/90 {
    color: #fee685e6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-200\/90 {
      color: color-mix(in oklab, var(--color-amber-200) 90%, transparent);
    }
  }

  .text-amber-300 {
    color: var(--color-amber-300);
  }

  .text-amber-300\/10 {
    color: #ffd2361a;
  }

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

  .text-amber-300\/80 {
    color: #ffd236cc;
  }

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

  .text-amber-300\/90 {
    color: #ffd236e6;
  }

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

  .text-amber-300\/\[\.06\] {
    color: #ffd2360f;
  }

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

  .text-amber-400, .text-amber-400\/70 {
    color: var(--color-amber-400);
  }

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

  .text-amber-400\/80 {
    color: var(--color-amber-400);
  }

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

  .text-amber-400\/90 {
    color: var(--color-amber-400);
  }

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

  .text-amber-500, .text-amber-500\/20 {
    color: var(--color-amber-500);
  }

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

  .text-amber-500\/80 {
    color: var(--color-amber-500);
  }

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

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

  .text-amber-700 {
    color: var(--color-amber-700);
  }

  .text-amber-800 {
    color: var(--color-amber-800);
  }

  .text-amber-900 {
    color: var(--color-amber-900);
  }

  .text-amber-950 {
    color: var(--color-amber-950);
  }

  .text-blue-300 {
    color: var(--color-blue-300);
  }

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

  .text-blue-950 {
    color: var(--color-blue-950);
  }

  .text-cyan-300 {
    color: var(--color-cyan-300);
  }

  .text-cyan-400 {
    color: var(--color-cyan-400);
  }

  .text-cyan-600 {
    color: var(--color-cyan-600);
  }

  .text-cyan-700 {
    color: var(--color-cyan-700);
  }

  .text-cyan-950 {
    color: var(--color-cyan-950);
  }

  .text-emerald-100 {
    color: var(--color-emerald-100);
  }

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

  .text-emerald-300 {
    color: var(--color-emerald-300);
  }

  .text-emerald-300\/80 {
    color: #5ee9b5cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-emerald-300\/80 {
      color: color-mix(in oklab, var(--color-emerald-300) 80%, transparent);
    }
  }

  .text-emerald-400, .text-emerald-400\/90 {
    color: var(--color-emerald-400);
  }

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

  .text-emerald-500, .text-emerald-500\/60 {
    color: var(--color-emerald-500);
  }

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

  .text-emerald-600 {
    color: var(--color-emerald-600);
  }

  .text-emerald-900 {
    color: var(--color-emerald-900);
  }

  .text-emerald-950 {
    color: var(--color-emerald-950);
  }

  .text-indigo-300 {
    color: var(--color-indigo-300);
  }

  .text-indigo-400 {
    color: var(--color-indigo-400);
  }

  .text-indigo-500 {
    color: var(--color-indigo-500);
  }

  .text-inherit {
    color: inherit;
  }

  .text-orange-200 {
    color: var(--color-orange-200);
  }

  .text-orange-300 {
    color: var(--color-orange-300);
  }

  .text-orange-300\/80 {
    color: #ffb96dcc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-orange-300\/80 {
      color: color-mix(in oklab, var(--color-orange-300) 80%, transparent);
    }
  }

  .text-orange-400 {
    color: var(--color-orange-400);
  }

  .text-purple-100 {
    color: var(--color-purple-100);
  }

  .text-purple-200 {
    color: var(--color-purple-200);
  }

  .text-purple-300 {
    color: var(--color-purple-300);
  }

  .text-purple-300\/80 {
    color: #d9b3ffcc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-purple-300\/80 {
      color: color-mix(in oklab, var(--color-purple-300) 80%, transparent);
    }
  }

  .text-purple-300\/90 {
    color: #d9b3ffe6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-purple-300\/90 {
      color: color-mix(in oklab, var(--color-purple-300) 90%, transparent);
    }
  }

  .text-purple-400 {
    color: var(--color-purple-400);
  }

  .text-purple-600 {
    color: var(--color-purple-600);
  }

  .text-purple-900 {
    color: var(--color-purple-900);
  }

  .text-purple-950 {
    color: var(--color-purple-950);
  }

  .text-red-100 {
    color: var(--color-red-100);
  }

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

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

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

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

  .text-rose-200 {
    color: var(--color-rose-200);
  }

  .text-rose-200\/90 {
    color: #ffccd3e6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-rose-200\/90 {
      color: color-mix(in oklab, var(--color-rose-200) 90%, transparent);
    }
  }

  .text-rose-300 {
    color: var(--color-rose-300);
  }

  .text-rose-300\/90 {
    color: #ffa2aee6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-rose-300\/90 {
      color: color-mix(in oklab, var(--color-rose-300) 90%, transparent);
    }
  }

  .text-rose-400 {
    color: var(--color-rose-400);
  }

  .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-200 {
    color: var(--color-sky-200);
  }

  .text-sky-300 {
    color: var(--color-sky-300);
  }

  .text-sky-300\/80 {
    color: #77d4ffcc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-sky-300\/80 {
      color: color-mix(in oklab, var(--color-sky-300) 80%, transparent);
    }
  }

  .text-sky-400 {
    color: var(--color-sky-400);
  }

  .text-sky-600 {
    color: var(--color-sky-600);
  }

  .text-sky-700 {
    color: var(--color-sky-700);
  }

  .text-sky-900 {
    color: var(--color-sky-900);
  }

  .text-slate-100 {
    color: var(--color-slate-100);
  }

  .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-teal-300 {
    color: var(--color-teal-300);
  }

  .text-teal-300\/80 {
    color: #46ecd5cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-teal-300\/80 {
      color: color-mix(in oklab, var(--color-teal-300) 80%, transparent);
    }
  }

  .text-teal-400 {
    color: var(--color-teal-400);
  }

  .text-transparent {
    color: #0000;
  }

  .text-violet-200 {
    color: var(--color-violet-200);
  }

  .text-violet-200\/65 {
    color: #ddd6ffa6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-violet-200\/65 {
      color: color-mix(in oklab, var(--color-violet-200) 65%, transparent);
    }
  }

  .text-violet-200\/75 {
    color: #ddd6ffbf;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-violet-200\/75 {
      color: color-mix(in oklab, var(--color-violet-200) 75%, transparent);
    }
  }

  .text-violet-200\/80 {
    color: #ddd6ffcc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-violet-200\/80 {
      color: color-mix(in oklab, var(--color-violet-200) 80%, transparent);
    }
  }

  .text-violet-300 {
    color: var(--color-violet-300);
  }

  .text-violet-300\/80 {
    color: #c4b4ffcc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-violet-300\/80 {
      color: color-mix(in oklab, var(--color-violet-300) 80%, transparent);
    }
  }

  .text-violet-400 {
    color: var(--color-violet-400);
  }

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

  .text-yellow-400 {
    color: var(--color-yellow-400);
  }

  .text-yellow-950 {
    color: var(--color-yellow-950);
  }

  .text-zinc-100 {
    color: var(--color-zinc-100);
  }

  .text-zinc-200 {
    color: var(--color-zinc-200);
  }

  .text-zinc-300, .text-zinc-300\/90 {
    color: var(--color-zinc-300);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-zinc-300\/90 {
      color: color-mix(in oklab, var(--color-zinc-300) 90%, transparent);
    }
  }

  .text-zinc-400 {
    color: var(--color-zinc-400);
  }

  .text-zinc-500 {
    color: var(--color-zinc-500);
  }

  .text-zinc-600 {
    color: var(--color-zinc-600);
  }

  .text-zinc-700 {
    color: var(--color-zinc-700);
  }

  .text-zinc-800 {
    color: var(--color-zinc-800);
  }

  .text-zinc-900 {
    color: var(--color-zinc-900);
  }

  .text-zinc-950 {
    color: var(--color-zinc-950);
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

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

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

  .decoration-\[\#eed8ab\]\/40 {
    text-decoration-color: oklab(88.9292% .00562331 .0633508 / .4);
  }

  .decoration-indigo-400 {
    -webkit-text-decoration-color: var(--color-indigo-400);
    -webkit-text-decoration-color: var(--color-indigo-400);
    text-decoration-color: var(--color-indigo-400);
  }

  .underline-offset-4 {
    text-underline-offset: 4px;
  }

  .placeholder-\[\#5a6578\]::placeholder {
    color: #5a6578;
  }

  .placeholder-zinc-400::placeholder {
    color: var(--color-zinc-400);
  }

  .placeholder-zinc-500::placeholder {
    color: var(--color-zinc-500);
  }

  .accent-amber-300 {
    accent-color: var(--color-amber-300);
  }

  .accent-amber-400 {
    accent-color: var(--color-amber-400);
  }

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

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

  .opacity-0 {
    opacity: 0;
  }

  .opacity-20 {
    opacity: .2;
  }

  .opacity-30 {
    opacity: .3;
  }

  .opacity-50 {
    opacity: .5;
  }

  .opacity-55 {
    opacity: .55;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-70 {
    opacity: .7;
  }

  .opacity-75 {
    opacity: .75;
  }

  .opacity-100 {
    opacity: 1;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_-10px_30px_rgba\(0\,0\,0\,0\.5\)\] {
    --tw-shadow: 0 -10px 30px var(--tw-shadow-color, #00000080);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_8px_rgba\(245\,158\,11\,0\.8\)\] {
    --tw-shadow: 0 0 8px var(--tw-shadow-color, #f59e0bcc);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_12px_rgba\(217\,181\,109\,0\.2\)\] {
    --tw-shadow: 0 0 12px var(--tw-shadow-color, #d9b56d33);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_12px_rgba\(217\,181\,109\,0\.3\)\] {
    --tw-shadow: 0 0 12px var(--tw-shadow-color, #d9b56d4d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_15px_\#f59e0b\] {
    --tw-shadow: 0 0 15px var(--tw-shadow-color, #f59e0b);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_15px_rgba\(20\,184\,166\,0\.15\)\] {
    --tw-shadow: 0 0 15px var(--tw-shadow-color, #14b8a626);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_15px_rgba\(160\,185\,129\,0\.25\)\] {
    --tw-shadow: 0 0 15px var(--tw-shadow-color, #a0b98140);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_15px_rgba\(168\,85\,247\,0\.3\)\] {
    --tw-shadow: 0 0 15px var(--tw-shadow-color, #a855f74d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_15px_rgba\(244\,63\,94\,0\.15\)\] {
    --tw-shadow: 0 0 15px var(--tw-shadow-color, #f43f5e26);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_15px_rgba\(245\,158\,11\,0\.2\)\] {
    --tw-shadow: 0 0 15px var(--tw-shadow-color, #f59e0b33);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_15px_rgba\(245\,158\,11\,0\.15\)\] {
    --tw-shadow: 0 0 15px var(--tw-shadow-color, #f59e0b26);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_15px_rgba\(245\,158\,11\,0\.25\)\] {
    --tw-shadow: 0 0 15px var(--tw-shadow-color, #f59e0b40);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_20px_rgba\(245\,158\,11\,0\.25\)\] {
    --tw-shadow: 0 0 20px var(--tw-shadow-color, #f59e0b40);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_25px_rgba\(168\,85\,247\,0\.3\)\] {
    --tw-shadow: 0 0 25px var(--tw-shadow-color, #a855f74d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_25px_rgba\(217\,181\,109\,0\.3\)\] {
    --tw-shadow: 0 0 25px var(--tw-shadow-color, #d9b56d4d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_25px_rgba\(217\,181\,109\,0\.18\)\] {
    --tw-shadow: 0 0 25px var(--tw-shadow-color, #d9b56d2e);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_0_30px_rgba\(244\,63\,94\,0\.06\)\] {
    --tw-shadow: 0 0 30px var(--tw-shadow-color, #f43f5e0f);
    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_12px_rgba\(73\,62\,32\,0\.12\)\] {
    --tw-shadow: 0 4px 12px var(--tw-shadow-color, #493e201f);
    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_10px_35px_rgba\(0\,0\,0\,0\.5\)\] {
    --tw-shadow: 0 10px 35px var(--tw-shadow-color, #00000080);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_12px_32px_rgba\(0\,0\,0\,0\.55\)\] {
    --tw-shadow: 0 12px 32px var(--tw-shadow-color, #0000008c);
    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_20px_50px_rgba\(0\,0\,0\,0\.6\)\] {
    --tw-shadow: 0 20px 50px var(--tw-shadow-color, #0009);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[14px_0_45px_rgba\(0\,0\,0\,\.35\)\] {
    --tw-shadow: 14px 0 45px var(--tw-shadow-color, #00000059);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[inset_0_-3px_0_\#f59e0b\] {
    --tw-shadow: inset 0 -3px 0 var(--tw-shadow-color, #f59e0b);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[inset_0_0_15px_rgba\(217\,181\,109\,0\.06\)\] {
    --tw-shadow: inset 0 0 15px var(--tw-shadow-color, #d9b56d0f);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[inset_0_1px_1px_rgba\(255\,255\,255\,0\.3\)\] {
    --tw-shadow: inset 0 1px 1px var(--tw-shadow-color, #ffffff4d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[inset_3px_0_8px_rgba\(251\,191\,36\,\.12\)\] {
    --tw-shadow: inset 3px 0 8px var(--tw-shadow-color, #fbbf241f);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-inner {
    --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, #0000000d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

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

  .ring-4 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-amber-500 {
    --tw-shadow-color: var(--color-amber-500);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-amber-500 {
      --tw-shadow-color: color-mix(in oklab, var(--color-amber-500) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-amber-500\/10 {
    --tw-shadow-color: var(--color-amber-500);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-amber-500\/10 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-amber-500) 10%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-amber-500\/30 {
    --tw-shadow-color: var(--color-amber-500);
  }

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

  .shadow-amber-600 {
    --tw-shadow-color: oklch(66.6% .179 58.318);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-amber-600 {
      --tw-shadow-color: color-mix(in oklab, var(--color-amber-600) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-amber-600\/20 {
    --tw-shadow-color: #dd740033;
  }

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

  .shadow-amber-600\/30 {
    --tw-shadow-color: #dd74004d;
  }

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

  .shadow-amber-950 {
    --tw-shadow-color: var(--color-amber-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-amber-950 {
      --tw-shadow-color: color-mix(in oklab, var(--color-amber-950) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-amber-950\/30 {
    --tw-shadow-color: var(--color-amber-950);
  }

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

  .shadow-amber-950\/40 {
    --tw-shadow-color: var(--color-amber-950);
  }

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

  .shadow-amber-950\/50 {
    --tw-shadow-color: var(--color-amber-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-amber-950\/50 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-amber-950) 50%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-black {
    --tw-shadow-color: #000;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-black {
      --tw-shadow-color: color-mix(in oklab, var(--color-black) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-black\/20 {
    --tw-shadow-color: #0003;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-black\/20 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 20%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-black\/80 {
    --tw-shadow-color: #000c;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-black\/80 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 80%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-emerald-400 {
    --tw-shadow-color: var(--color-emerald-400);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-emerald-400 {
      --tw-shadow-color: color-mix(in oklab, var(--color-emerald-400) var(--tw-shadow-alpha), transparent);
    }
  }

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

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-emerald-500 {
      --tw-shadow-color: color-mix(in oklab, var(--color-emerald-500) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-emerald-500\/30 {
    --tw-shadow-color: var(--color-emerald-500);
  }

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

  .shadow-emerald-950 {
    --tw-shadow-color: var(--color-emerald-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-emerald-950 {
      --tw-shadow-color: color-mix(in oklab, var(--color-emerald-950) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-emerald-950\/40 {
    --tw-shadow-color: var(--color-emerald-950);
  }

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

  .shadow-emerald-950\/50 {
    --tw-shadow-color: var(--color-emerald-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-emerald-950\/50 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-emerald-950) 50%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-indigo-500 {
    --tw-shadow-color: var(--color-indigo-500);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-indigo-500 {
      --tw-shadow-color: color-mix(in oklab, var(--color-indigo-500) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-indigo-500\/30 {
    --tw-shadow-color: var(--color-indigo-500);
  }

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

  .shadow-indigo-950 {
    --tw-shadow-color: var(--color-indigo-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-indigo-950 {
      --tw-shadow-color: color-mix(in oklab, var(--color-indigo-950) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-indigo-950\/60 {
    --tw-shadow-color: var(--color-indigo-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-indigo-950\/60 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-indigo-950) 60%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-rose-900 {
    --tw-shadow-color: oklch(41% .159 10.272);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-rose-900 {
      --tw-shadow-color: color-mix(in oklab, var(--color-rose-900) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-rose-900\/20 {
    --tw-shadow-color: #8b083633;
  }

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

  .shadow-rose-900\/30 {
    --tw-shadow-color: #8b08364d;
  }

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

  .shadow-sky-500 {
    --tw-shadow-color: var(--color-sky-500);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-sky-500 {
      --tw-shadow-color: color-mix(in oklab, var(--color-sky-500) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-sky-500\/30 {
    --tw-shadow-color: var(--color-sky-500);
  }

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

  .shadow-violet-500 {
    --tw-shadow-color: var(--color-violet-500);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-violet-500 {
      --tw-shadow-color: color-mix(in oklab, var(--color-violet-500) var(--tw-shadow-alpha), transparent);
    }
  }

  .shadow-violet-500\/30 {
    --tw-shadow-color: var(--color-violet-500);
  }

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

  .ring-\[\#a98a4e\]\/30 {
    --tw-ring-color: oklab(64.9207% .0111001 .0863145 / .3);
  }

  .ring-\[\#d9b56d\]\/50 {
    --tw-ring-color: oklab(78.9386% .011068 .0992453 / .5);
  }

  .ring-amber-400, .ring-amber-400\/20 {
    --tw-ring-color: var(--color-amber-400);
  }

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

  .ring-amber-400\/40 {
    --tw-ring-color: var(--color-amber-400);
  }

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

  .ring-amber-500 {
    --tw-ring-color: var(--color-amber-500);
  }

  .ring-amber-600 {
    --tw-ring-color: var(--color-amber-600);
  }

  .ring-amber-600\/70 {
    --tw-ring-color: #dd7400b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-amber-600\/70 {
      --tw-ring-color: color-mix(in oklab, var(--color-amber-600) 70%, transparent);
    }
  }

  .ring-amber-600\/80 {
    --tw-ring-color: #dd7400cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-amber-600\/80 {
      --tw-ring-color: color-mix(in oklab, var(--color-amber-600) 80%, transparent);
    }
  }

  .ring-black {
    --tw-ring-color: var(--color-black);
  }

  .ring-black\/40 {
    --tw-ring-color: #0006;
  }

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

  .ring-emerald-400, .ring-emerald-400\/30 {
    --tw-ring-color: var(--color-emerald-400);
  }

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

  .ring-indigo-500, .ring-indigo-500\/50 {
    --tw-ring-color: var(--color-indigo-500);
  }

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

  .ring-purple-300 {
    --tw-ring-color: var(--color-purple-300);
  }

  .ring-purple-300\/50 {
    --tw-ring-color: #d9b3ff80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-purple-300\/50 {
      --tw-ring-color: color-mix(in oklab, var(--color-purple-300) 50%, transparent);
    }
  }

  .ring-purple-400 {
    --tw-ring-color: var(--color-purple-400);
  }

  .ring-purple-400\/30 {
    --tw-ring-color: #c07eff4d;
  }

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

  .ring-slate-950 {
    --tw-ring-color: var(--color-slate-950);
  }

  .ring-slate-950\/80 {
    --tw-ring-color: #020618cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-slate-950\/80 {
      --tw-ring-color: color-mix(in oklab, var(--color-slate-950) 80%, transparent);
    }
  }

  .ring-white {
    --tw-ring-color: var(--color-white);
  }

  .ring-zinc-700 {
    --tw-ring-color: var(--color-zinc-700);
  }

  .ring-offset-2 {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .ring-offset-zinc-950 {
    --tw-ring-offset-color: var(--color-zinc-950);
  }

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

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow-\[0_0_8px_\#caa45366\] {
    --tw-drop-shadow-size: drop-shadow(0 0 8px var(--tw-drop-shadow-color, #caa45366));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow-\[0_0_8px_rgba\(56\,189\,248\,0\.4\)\] {
    --tw-drop-shadow-size: drop-shadow(0 0 8px var(--tw-drop-shadow-color, #38bdf866));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow-\[0_0_8px_rgba\(238\,216\,171\,0\.25\)\] {
    --tw-drop-shadow-size: drop-shadow(0 0 8px var(--tw-drop-shadow-color, #eed8ab40));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow-\[0_0_10px_rgba\(245\,158\,11\,0\.6\)\] {
    --tw-drop-shadow-size: drop-shadow(0 0 10px var(--tw-drop-shadow-color, #f59e0b99));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow-\[0_0_12px_rgba\(245\,158\,11\,0\.5\)\] {
    --tw-drop-shadow-size: drop-shadow(0 0 12px var(--tw-drop-shadow-color, #f59e0b80));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow-\[0_0_15px_rgba\(217\,181\,109\,0\.3\)\] {
    --tw-drop-shadow-size: drop-shadow(0 0 15px var(--tw-drop-shadow-color, #d9b56d4d));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow-\[0_0_18px_rgba\(217\,181\,109\,0\.3\)\] {
    --tw-drop-shadow-size: drop-shadow(0 0 18px var(--tw-drop-shadow-color, #d9b56d4d));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow-\[0_2px_8px_rgba\(217\,181\,109\,0\.35\)\] {
    --tw-drop-shadow-size: drop-shadow(0 2px 8px var(--tw-drop-shadow-color, #d9b56d59));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow-\[0_4px_12px_rgba\(217\,181\,109\,0\.4\)\] {
    --tw-drop-shadow-size: drop-shadow(0 4px 12px var(--tw-drop-shadow-color, #d9b56d66));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow-md {
    --tw-drop-shadow-size: drop-shadow(0 3px 3px var(--tw-drop-shadow-color, #0000001f));
    --tw-drop-shadow: drop-shadow(var(--drop-shadow-md));
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .grayscale-\[35\%\] {
    --tw-grayscale: grayscale(35%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-150 {
    --tw-duration: .15s;
    transition-duration: .15s;
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .duration-500 {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .duration-700 {
    --tw-duration: .7s;
    transition-duration: .7s;
  }

  .duration-1000 {
    --tw-duration: 1s;
    transition-duration: 1s;
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select-all {
    -webkit-user-select: all;
    user-select: all;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  .group-open\:rotate-180:is(:where(.group):is([open], :popover-open, :open) *) {
    rotate: 180deg;
  }

  @media (hover: hover) {
    .group-hover\:translate-x-0\.5:is(:where(.group):hover *) {
      --tw-translate-x: calc(var(--spacing) * .5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:translate-y-0\.5:is(:where(.group):hover *) {
      --tw-translate-y: calc(var(--spacing) * .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\:border-amber-400\/50:is(:where(.group):hover *) {
      border-color: var(--color-amber-400);
    }

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

    .group-hover\:border-amber-500:is(:where(.group):hover *) {
      border-color: var(--color-amber-500);
    }

    .group-hover\:border-emerald-500:is(:where(.group):hover *) {
      border-color: var(--color-emerald-500);
    }

    .group-hover\:border-purple-500:is(:where(.group):hover *) {
      border-color: var(--color-purple-500);
    }

    .group-hover\:border-rose-400\/50:is(:where(.group):hover *) {
      border-color: var(--color-rose-400);
    }

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

    .group-hover\:border-teal-400\/50:is(:where(.group):hover *) {
      border-color: #00d3bd80;
    }

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

    .group-hover\:bg-amber-900\/60:is(:where(.group):hover *) {
      background-color: var(--color-amber-900);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:bg-amber-900\/60:is(:where(.group):hover *) {
        background-color: color-mix(in oklab, var(--color-amber-900) 60%, transparent);
      }
    }

    .group-hover\:bg-emerald-900\/60:is(:where(.group):hover *) {
      background-color: #004e3b99;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:bg-emerald-900\/60:is(:where(.group):hover *) {
        background-color: color-mix(in oklab, var(--color-emerald-900) 60%, transparent);
      }
    }

    .group-hover\:bg-purple-900\/60:is(:where(.group):hover *) {
      background-color: #59168b99;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:bg-purple-900\/60:is(:where(.group):hover *) {
        background-color: color-mix(in oklab, var(--color-purple-900) 60%, transparent);
      }
    }

    .group-hover\:text-\[\#d6a756\]:is(:where(.group):hover *) {
      color: #d6a756;
    }

    .group-hover\:text-\[\#d9b56d\]\/80:is(:where(.group):hover *) {
      color: oklab(78.9386% .011068 .0992453 / .8);
    }

    .group-hover\:text-\[\#eed8ab\]:is(:where(.group):hover *) {
      color: #eed8ab;
    }

    .group-hover\:text-amber-200:is(:where(.group):hover *) {
      color: var(--color-amber-200);
    }

    .group-hover\:text-amber-300:is(:where(.group):hover *) {
      color: var(--color-amber-300);
    }

    .group-hover\:text-amber-300\/10:is(:where(.group):hover *) {
      color: #ffd2361a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:text-amber-300\/10:is(:where(.group):hover *) {
        color: color-mix(in oklab, var(--color-amber-300) 10%, transparent);
      }
    }

    .group-hover\:text-emerald-200:is(:where(.group):hover *) {
      color: var(--color-emerald-200);
    }

    .group-hover\:text-emerald-300:is(:where(.group):hover *) {
      color: var(--color-emerald-300);
    }

    .group-hover\:text-purple-200:is(:where(.group):hover *) {
      color: var(--color-purple-200);
    }

    .group-hover\:text-purple-300:is(:where(.group):hover *) {
      color: var(--color-purple-300);
    }

    .group-hover\:text-rose-400:is(:where(.group):hover *) {
      color: var(--color-rose-400);
    }

    .group-hover\:text-violet-200:is(:where(.group):hover *) {
      color: var(--color-violet-200);
    }

    .group-hover\:text-white:is(:where(.group):hover *) {
      color: var(--color-white);
    }

    .group-hover\:text-zinc-100:is(:where(.group):hover *) {
      color: var(--color-zinc-100);
    }

    .group-hover\:text-zinc-200:is(:where(.group):hover *) {
      color: var(--color-zinc-200);
    }

    .group-hover\:underline:is(:where(.group):hover *) {
      text-decoration-line: underline;
    }

    .group-hover\:opacity-100:is(:where(.group):hover *) {
      opacity: 1;
    }
  }

  .group-aria-\[current\=page\]\:text-\[\#f2cf86\]:is(:where(.group)[aria-current="page"] *) {
    color: #f2cf86;
  }

  .group-aria-\[current\=page\]\:drop-shadow-\[0_0_8px_\#caa45366\]:is(:where(.group)[aria-current="page"] *) {
    --tw-drop-shadow-size: drop-shadow(0 0 8px var(--tw-drop-shadow-color, #caa45366));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .peer-checked\:bg-amber-600:is(:where(.peer):checked ~ *) {
    background-color: var(--color-amber-600);
  }

  .peer-focus\:outline-none:is(:where(.peer):focus ~ *) {
    --tw-outline-style: none;
    outline-style: none;
  }

  .selection\:bg-\[\#7c3aed\]\/40 ::selection {
    background-color: oklab(54.1337% .0963843 -.226968 / .4);
  }

  .selection\:bg-\[\#7c3aed\]\/40::selection {
    background-color: oklab(54.1337% .0963843 -.226968 / .4);
  }

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

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

  .selection\:text-black ::selection {
    color: var(--color-black);
  }

  .selection\:text-black::selection {
    color: var(--color-black);
  }

  .selection\:text-white ::selection {
    color: var(--color-white);
  }

  .selection\:text-white::selection {
    color: var(--color-white);
  }

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

  .file\:border-0::file-selector-button {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .file\:bg-zinc-800::file-selector-button {
    background-color: var(--color-zinc-800);
  }

  .file\:px-3::file-selector-button {
    padding-inline: calc(var(--spacing) * 3);
  }

  .file\:py-1::file-selector-button {
    padding-block: var(--spacing);
  }

  .file\:text-xs::file-selector-button {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .file\:font-semibold::file-selector-button {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .file\:text-zinc-200::file-selector-button {
    color: var(--color-zinc-200);
  }

  .before\:pointer-events-none:before {
    content: var(--tw-content);
    pointer-events: none;
  }

  .before\:absolute:before {
    content: var(--tw-content);
    position: absolute;
  }

  .before\:inset-0:before {
    content: var(--tw-content);
    inset: 0;
  }

  .before\:inset-y-1:before {
    content: var(--tw-content);
    inset-block: var(--spacing);
  }

  .before\:left-0:before {
    content: var(--tw-content);
    left: 0;
  }

  .before\:w-px:before {
    content: var(--tw-content);
    width: 1px;
  }

  .before\:bg-amber-200:before {
    content: var(--tw-content);
    background-color: var(--color-amber-200);
  }

  .before\:bg-\[radial-gradient\(circle_at_30\%_8\%\,rgba\(251\,191\,36\,\.07\)\,transparent_28\%\)\,linear-gradient\(180deg\,rgba\(12\,28\,42\,\.7\)\,rgba\(3\,10\,16\,\.96\)\)\]:before {
    content: var(--tw-content);
    background-image: radial-gradient(circle at 30% 8%, #fbbf2412, #0000 28%), linear-gradient(#0c1c2ab3, #030a10f5);
  }

  .before\:opacity-0:before {
    content: var(--tw-content);
    opacity: 0;
  }

  .before\:opacity-100:before {
    content: var(--tw-content);
    opacity: 1;
  }

  .before\:shadow-\[0_0_10px_\#fde68a\]:before {
    content: var(--tw-content);
    --tw-shadow: 0 0 10px var(--tw-shadow-color, #fde68a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .after\:absolute:after {
    content: var(--tw-content);
    position: absolute;
  }

  .after\:top-\[2px\]:after {
    content: var(--tw-content);
    top: 2px;
  }

  .after\:left-\[2px\]:after {
    content: var(--tw-content);
    left: 2px;
  }

  .after\:h-4:after {
    content: var(--tw-content);
    height: calc(var(--spacing) * 4);
  }

  .after\:w-4:after {
    content: var(--tw-content);
    width: calc(var(--spacing) * 4);
  }

  .after\:rounded-full:after {
    content: var(--tw-content);
    border-radius: 3.40282e38px;
  }

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

  .after\:border-zinc-300:after {
    content: var(--tw-content);
    border-color: var(--color-zinc-300);
  }

  .after\:bg-white:after {
    content: var(--tw-content);
    background-color: var(--color-white);
  }

  .after\:transition-all:after {
    content: var(--tw-content);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .after\:content-\[\'\'\]:after {
    --tw-content: "";
    content: var(--tw-content);
  }

  .peer-checked\:after\:translate-x-full:is(:where(.peer):checked ~ *):after {
    content: var(--tw-content);
    --tw-translate-x: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .peer-checked\:after\:border-white:is(:where(.peer):checked ~ *):after {
    content: var(--tw-content);
    border-color: var(--color-white);
  }

  .last\:mb-0:last-child {
    margin-bottom: 0;
  }

  .last\:border-0:last-child {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .last\:pb-0:last-child {
    padding-bottom: 0;
  }

  .focus-within\:z-20:focus-within {
    z-index: 20;
  }

  .focus-within\:ring-2:focus-within {
    --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-within\:ring-amber-500:focus-within {
    --tw-ring-color: var(--color-amber-500);
  }

  @media (hover: hover) {
    .hover\:z-20:hover {
      z-index: 20;
    }

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

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

    .hover\:-translate-y-1\.5:hover {
      --tw-translate-y: calc(var(--spacing) * -1.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-\[\#bda16b\]:hover {
      border-color: #bda16b;
    }

    .hover\:border-\[\#bda16b\]\/50:hover {
      border-color: oklab(72.1428% .00930995 .0781353 / .5);
    }

    .hover\:border-\[\#bda16b\]\/60:hover {
      border-color: oklab(72.1428% .00930995 .0781353 / .6);
    }

    .hover\:border-\[\#d6a756\]\/50:hover {
      border-color: oklab(75.5561% .021143 .111322 / .5);
    }

    .hover\:border-\[\#d9b56d\]\/70:hover {
      border-color: oklab(78.9386% .011068 .0992453 / .7);
    }

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

    .hover\:border-amber-400:hover, .hover\:border-amber-400\/60:hover {
      border-color: var(--color-amber-400);
    }

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

    .hover\:border-amber-400\/70:hover {
      border-color: var(--color-amber-400);
    }

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

    .hover\:border-amber-400\/80:hover {
      border-color: var(--color-amber-400);
    }

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

    .hover\:border-amber-500:hover, .hover\:border-amber-500\/40:hover {
      border-color: var(--color-amber-500);
    }

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

    .hover\:border-amber-500\/50:hover {
      border-color: var(--color-amber-500);
    }

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

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

    .hover\:border-amber-600\/50:hover {
      border-color: #dd740080;
    }

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

    .hover\:border-cyan-500\/40:hover {
      border-color: #00b7d766;
    }

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

    .hover\:border-cyan-500\/50:hover {
      border-color: #00b7d780;
    }

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

    .hover\:border-emerald-400\/80:hover {
      border-color: var(--color-emerald-400);
    }

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

    .hover\:border-emerald-500\/40:hover {
      border-color: var(--color-emerald-500);
    }

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

    .hover\:border-emerald-500\/50:hover {
      border-color: var(--color-emerald-500);
    }

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

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

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

    .hover\:border-indigo-900\/40:hover {
      border-color: var(--color-indigo-900);
    }

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

    .hover\:border-purple-400\/80:hover {
      border-color: #c07effcc;
    }

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

    .hover\:border-purple-500\/40:hover {
      border-color: #ac4bff66;
    }

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

    .hover\:border-purple-500\/50:hover {
      border-color: #ac4bff80;
    }

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

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

    .hover\:border-red-900\/50:hover {
      border-color: #82181a80;
    }

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

    .hover\:border-red-900\/60:hover {
      border-color: #82181a99;
    }

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

    .hover\:border-rose-500\/50:hover {
      border-color: var(--color-rose-500);
    }

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

    .hover\:border-rose-700\/60:hover {
      border-color: #c2003999;
    }

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

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

    .hover\:border-rose-900\/40:hover {
      border-color: #8b083666;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-rose-900\/40:hover {
        border-color: color-mix(in oklab, var(--color-rose-900) 40%, transparent);
      }
    }

    .hover\:border-white\/5:hover {
      border-color: #ffffff0d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-white\/5:hover {
        border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
      }
    }

    .hover\:border-zinc-400:hover {
      border-color: var(--color-zinc-400);
    }

    .hover\:border-zinc-500:hover {
      border-color: var(--color-zinc-500);
    }

    .hover\:border-zinc-600:hover {
      border-color: var(--color-zinc-600);
    }

    .hover\:border-zinc-700:hover {
      border-color: var(--color-zinc-700);
    }

    .hover\:border-zinc-800:hover {
      border-color: var(--color-zinc-800);
    }

    .hover\:bg-\[\#0c1c2b\]\/80:hover {
      background-color: oklab(22.0644% -.0135487 -.0341572 / .8);
    }

    .hover\:bg-\[\#d9b56d\]\/10:hover {
      background-color: oklab(78.9386% .011068 .0992453 / .1);
    }

    .hover\:bg-\[\#eee9dc\]:hover {
      background-color: #eee9dc;
    }

    .hover\:bg-amber-200:hover {
      background-color: var(--color-amber-200);
    }

    .hover\:bg-amber-400:hover, .hover\:bg-amber-400\/5:hover {
      background-color: var(--color-amber-400);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-amber-400\/5:hover {
        background-color: color-mix(in oklab, var(--color-amber-400) 5%, transparent);
      }
    }

    .hover\:bg-amber-500:hover, .hover\:bg-amber-500\/10:hover {
      background-color: var(--color-amber-500);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-amber-500\/10:hover {
        background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
      }
    }

    .hover\:bg-amber-500\/20:hover {
      background-color: var(--color-amber-500);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-amber-500\/20:hover {
        background-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
      }
    }

    .hover\:bg-amber-500\/25:hover {
      background-color: var(--color-amber-500);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-amber-500\/25:hover {
        background-color: color-mix(in oklab, var(--color-amber-500) 25%, transparent);
      }
    }

    .hover\:bg-amber-500\/30:hover {
      background-color: var(--color-amber-500);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-amber-500\/30:hover {
        background-color: color-mix(in oklab, var(--color-amber-500) 30%, transparent);
      }
    }

    .hover\:bg-amber-900:hover {
      background-color: var(--color-amber-900);
    }

    .hover\:bg-amber-950\/20:hover {
      background-color: var(--color-amber-950);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-amber-950\/20:hover {
        background-color: color-mix(in oklab, var(--color-amber-950) 20%, transparent);
      }
    }

    .hover\:bg-amber-950\/25:hover {
      background-color: var(--color-amber-950);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-amber-950\/25:hover {
        background-color: color-mix(in oklab, var(--color-amber-950) 25%, transparent);
      }
    }

    .hover\:bg-amber-950\/50:hover {
      background-color: var(--color-amber-950);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-amber-950\/50:hover {
        background-color: color-mix(in oklab, var(--color-amber-950) 50%, transparent);
      }
    }

    .hover\:bg-black\/75:hover {
      background-color: #000000bf;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-black\/75:hover {
        background-color: color-mix(in oklab, var(--color-black) 75%, transparent);
      }
    }

    .hover\:bg-black\/90:hover {
      background-color: #000000e6;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-black\/90:hover {
        background-color: color-mix(in oklab, var(--color-black) 90%, transparent);
      }
    }

    .hover\:bg-cyan-950\/50:hover {
      background-color: #05334580;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-cyan-950\/50:hover {
        background-color: color-mix(in oklab, var(--color-cyan-950) 50%, transparent);
      }
    }

    .hover\:bg-emerald-500:hover {
      background-color: var(--color-emerald-500);
    }

    .hover\:bg-emerald-600:hover {
      background-color: var(--color-emerald-600);
    }

    .hover\:bg-emerald-900\/60:hover {
      background-color: #004e3b99;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-emerald-900\/60:hover {
        background-color: color-mix(in oklab, var(--color-emerald-900) 60%, transparent);
      }
    }

    .hover\:bg-emerald-900\/70:hover {
      background-color: #004e3bb3;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-emerald-900\/70:hover {
        background-color: color-mix(in oklab, var(--color-emerald-900) 70%, transparent);
      }
    }

    .hover\:bg-emerald-950\/20:hover {
      background-color: var(--color-emerald-950);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-emerald-950\/20:hover {
        background-color: color-mix(in oklab, var(--color-emerald-950) 20%, transparent);
      }
    }

    .hover\:bg-emerald-950\/40:hover {
      background-color: var(--color-emerald-950);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-emerald-950\/40:hover {
        background-color: color-mix(in oklab, var(--color-emerald-950) 40%, transparent);
      }
    }

    .hover\:bg-emerald-950\/50:hover {
      background-color: var(--color-emerald-950);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-emerald-950\/50:hover {
        background-color: color-mix(in oklab, var(--color-emerald-950) 50%, transparent);
      }
    }

    .hover\:bg-indigo-500:hover {
      background-color: var(--color-indigo-500);
    }

    .hover\:bg-indigo-800:hover {
      background-color: var(--color-indigo-800);
    }

    .hover\:bg-indigo-950\/20:hover {
      background-color: var(--color-indigo-950);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-indigo-950\/20:hover {
        background-color: color-mix(in oklab, var(--color-indigo-950) 20%, transparent);
      }
    }

    .hover\:bg-purple-900\/60:hover {
      background-color: #59168b99;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-purple-900\/60:hover {
        background-color: color-mix(in oklab, var(--color-purple-900) 60%, transparent);
      }
    }

    .hover\:bg-purple-950\/20:hover {
      background-color: #3c036633;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-purple-950\/20:hover {
        background-color: color-mix(in oklab, var(--color-purple-950) 20%, transparent);
      }
    }

    .hover\:bg-purple-950\/50:hover {
      background-color: #3c036680;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-purple-950\/50:hover {
        background-color: color-mix(in oklab, var(--color-purple-950) 50%, transparent);
      }
    }

    .hover\:bg-red-500:hover {
      background-color: var(--color-red-500);
    }

    .hover\:bg-red-900:hover {
      background-color: var(--color-red-900);
    }

    .hover\:bg-red-900\/50:hover {
      background-color: #82181a80;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-red-900\/50:hover {
        background-color: color-mix(in oklab, var(--color-red-900) 50%, transparent);
      }
    }

    .hover\:bg-red-950\/30:hover {
      background-color: var(--color-red-950);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-red-950\/30:hover {
        background-color: color-mix(in oklab, var(--color-red-950) 30%, transparent);
      }
    }

    .hover\:bg-red-950\/40:hover {
      background-color: var(--color-red-950);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-red-950\/40:hover {
        background-color: color-mix(in oklab, var(--color-red-950) 40%, transparent);
      }
    }

    .hover\:bg-red-950\/80:hover {
      background-color: var(--color-red-950);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-red-950\/80:hover {
        background-color: color-mix(in oklab, var(--color-red-950) 80%, transparent);
      }
    }

    .hover\:bg-rose-500:hover {
      background-color: var(--color-rose-500);
    }

    .hover\:bg-rose-600:hover {
      background-color: var(--color-rose-600);
    }

    .hover\:bg-rose-900:hover {
      background-color: var(--color-rose-900);
    }

    .hover\:bg-rose-900\/50:hover {
      background-color: #8b083680;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-rose-900\/50:hover {
        background-color: color-mix(in oklab, var(--color-rose-900) 50%, transparent);
      }
    }

    .hover\:bg-rose-950:hover, .hover\:bg-rose-950\/20:hover {
      background-color: var(--color-rose-950);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-rose-950\/20:hover {
        background-color: color-mix(in oklab, var(--color-rose-950) 20%, transparent);
      }
    }

    .hover\:bg-rose-950\/30:hover {
      background-color: var(--color-rose-950);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-rose-950\/30:hover {
        background-color: color-mix(in oklab, var(--color-rose-950) 30%, transparent);
      }
    }

    .hover\:bg-rose-950\/40:hover {
      background-color: var(--color-rose-950);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-rose-950\/40:hover {
        background-color: color-mix(in oklab, var(--color-rose-950) 40%, transparent);
      }
    }

    .hover\:bg-rose-950\/70:hover {
      background-color: var(--color-rose-950);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-rose-950\/70:hover {
        background-color: color-mix(in oklab, var(--color-rose-950) 70%, transparent);
      }
    }

    .hover\:bg-slate-800:hover {
      background-color: var(--color-slate-800);
    }

    .hover\:bg-white:hover {
      background-color: var(--color-white);
    }

    .hover\:bg-white\/5:hover {
      background-color: #ffffff0d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/5:hover {
        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
      }
    }

    .hover\:bg-white\/10:hover {
      background-color: #ffffff1a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/10:hover {
        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }

    .hover\:bg-white\/\[\.035\]:hover {
      background-color: #ffffff09;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/\[\.035\]:hover {
        background-color: color-mix(in oklab, var(--color-white) 3.5%, transparent);
      }
    }

    .hover\:bg-zinc-100:hover, .hover\:bg-zinc-100\/80:hover {
      background-color: var(--color-zinc-100);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-zinc-100\/80:hover {
        background-color: color-mix(in oklab, var(--color-zinc-100) 80%, transparent);
      }
    }

    .hover\:bg-zinc-700:hover {
      background-color: var(--color-zinc-700);
    }

    .hover\:bg-zinc-800:hover, .hover\:bg-zinc-800\/30:hover {
      background-color: var(--color-zinc-800);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-zinc-800\/30:hover {
        background-color: color-mix(in oklab, var(--color-zinc-800) 30%, transparent);
      }
    }

    .hover\:bg-zinc-800\/40:hover {
      background-color: var(--color-zinc-800);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-zinc-800\/40:hover {
        background-color: color-mix(in oklab, var(--color-zinc-800) 40%, transparent);
      }
    }

    .hover\:bg-zinc-800\/50:hover {
      background-color: var(--color-zinc-800);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-zinc-800\/50:hover {
        background-color: color-mix(in oklab, var(--color-zinc-800) 50%, transparent);
      }
    }

    .hover\:bg-zinc-800\/60:hover {
      background-color: var(--color-zinc-800);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-zinc-800\/60:hover {
        background-color: color-mix(in oklab, var(--color-zinc-800) 60%, transparent);
      }
    }

    .hover\:bg-zinc-800\/70:hover {
      background-color: var(--color-zinc-800);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-zinc-800\/70:hover {
        background-color: color-mix(in oklab, var(--color-zinc-800) 70%, transparent);
      }
    }

    .hover\:bg-zinc-800\/80:hover {
      background-color: var(--color-zinc-800);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-zinc-800\/80:hover {
        background-color: color-mix(in oklab, var(--color-zinc-800) 80%, transparent);
      }
    }

    .hover\:bg-zinc-800\/90:hover {
      background-color: var(--color-zinc-800);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-zinc-800\/90:hover {
        background-color: color-mix(in oklab, var(--color-zinc-800) 90%, transparent);
      }
    }

    .hover\:bg-zinc-900:hover, .hover\:bg-zinc-900\/40:hover {
      background-color: var(--color-zinc-900);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-zinc-900\/40:hover {
        background-color: color-mix(in oklab, var(--color-zinc-900) 40%, transparent);
      }
    }

    .hover\:bg-zinc-900\/50:hover {
      background-color: var(--color-zinc-900);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-zinc-900\/50:hover {
        background-color: color-mix(in oklab, var(--color-zinc-900) 50%, transparent);
      }
    }

    .hover\:bg-zinc-900\/60:hover {
      background-color: var(--color-zinc-900);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-zinc-900\/60:hover {
        background-color: color-mix(in oklab, var(--color-zinc-900) 60%, transparent);
      }
    }

    .hover\:bg-zinc-900\/80:hover {
      background-color: var(--color-zinc-900);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-zinc-900\/80:hover {
        background-color: color-mix(in oklab, var(--color-zinc-900) 80%, transparent);
      }
    }

    .hover\:from-\[\#e5c57d\]:hover {
      --tw-gradient-from: #e5c57d;
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }

    .hover\:from-amber-400:hover {
      --tw-gradient-from: var(--color-amber-400);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }

    .hover\:from-amber-500:hover {
      --tw-gradient-from: var(--color-amber-500);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }

    .hover\:from-emerald-500:hover {
      --tw-gradient-from: var(--color-emerald-500);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }

    .hover\:to-\[\#c4a159\]:hover {
      --tw-gradient-to: #c4a159;
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }

    .hover\:to-amber-400:hover {
      --tw-gradient-to: var(--color-amber-400);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }

    .hover\:to-amber-500:hover {
      --tw-gradient-to: var(--color-amber-500);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }

    .hover\:to-emerald-400:hover {
      --tw-gradient-to: var(--color-emerald-400);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }

    .hover\:text-\[\#eed8ab\]:hover {
      color: #eed8ab;
    }

    .hover\:text-\[\#f0ede6\]:hover {
      color: #f0ede6;
    }

    .hover\:text-\[\#f5e6c8\]:hover {
      color: #f5e6c8;
    }

    .hover\:text-amber-100:hover {
      color: var(--color-amber-100);
    }

    .hover\:text-amber-200:hover {
      color: var(--color-amber-200);
    }

    .hover\:text-amber-300:hover {
      color: var(--color-amber-300);
    }

    .hover\:text-amber-400:hover {
      color: var(--color-amber-400);
    }

    .hover\:text-amber-500:hover {
      color: var(--color-amber-500);
    }

    .hover\:text-amber-800:hover {
      color: var(--color-amber-800);
    }

    .hover\:text-amber-900:hover {
      color: var(--color-amber-900);
    }

    .hover\:text-cyan-300:hover {
      color: var(--color-cyan-300);
    }

    .hover\:text-emerald-100:hover {
      color: var(--color-emerald-100);
    }

    .hover\:text-emerald-200:hover {
      color: var(--color-emerald-200);
    }

    .hover\:text-emerald-300:hover {
      color: var(--color-emerald-300);
    }

    .hover\:text-indigo-200:hover {
      color: var(--color-indigo-200);
    }

    .hover\:text-indigo-300:hover {
      color: var(--color-indigo-300);
    }

    .hover\:text-purple-100:hover {
      color: var(--color-purple-100);
    }

    .hover\:text-purple-300:hover {
      color: var(--color-purple-300);
    }

    .hover\:text-red-100:hover {
      color: var(--color-red-100);
    }

    .hover\:text-red-200:hover {
      color: var(--color-red-200);
    }

    .hover\:text-red-400:hover {
      color: var(--color-red-400);
    }

    .hover\:text-rose-200:hover {
      color: var(--color-rose-200);
    }

    .hover\:text-rose-300:hover {
      color: var(--color-rose-300);
    }

    .hover\:text-rose-600:hover {
      color: var(--color-rose-600);
    }

    .hover\:text-violet-100:hover {
      color: var(--color-violet-100);
    }

    .hover\:text-white:hover {
      color: var(--color-white);
    }

    .hover\:text-zinc-100:hover {
      color: var(--color-zinc-100);
    }

    .hover\:text-zinc-200:hover {
      color: var(--color-zinc-200);
    }

    .hover\:text-zinc-300:hover {
      color: var(--color-zinc-300);
    }

    .hover\:underline:hover {
      text-decoration-line: underline;
    }

    .hover\:decoration-\[\#eed8ab\]:hover {
      text-decoration-color: #eed8ab;
    }

    .hover\:opacity-80:hover {
      opacity: .8;
    }

    .hover\:opacity-100:hover {
      opacity: 1;
    }

    .hover\:shadow-\[0_0_12px_rgba\(217\,181\,109\,0\.15\)\]:hover {
      --tw-shadow: 0 0 12px var(--tw-shadow-color, #d9b56d26);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[0_0_20px_rgba\(245\,158\,11\,0\.35\)\]:hover {
      --tw-shadow: 0 0 20px var(--tw-shadow-color, #f59e0b59);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[0_0_25px_rgba\(245\,158\,11\,0\.4\)\]:hover {
      --tw-shadow: 0 0 25px var(--tw-shadow-color, #f59e0b66);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[0_0_35px_rgba\(217\,181\,109\,0\.5\)\]:hover {
      --tw-shadow: 0 0 35px var(--tw-shadow-color, #d9b56d80);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[0_12px_35px_rgba\(124\,58\,237\,0\.12\)\,0_4px_20px_rgba\(217\,181\,109\,0\.15\)\]:hover {
      --tw-shadow: 0 12px 35px var(--tw-shadow-color, #7c3aed1f), 0 4px 20px var(--tw-shadow-color, #d9b56d26);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-lg:hover {
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-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-amber-500\/5:hover {
      --tw-shadow-color: var(--color-amber-500);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:shadow-amber-500\/5:hover {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-amber-500) 5%, transparent) var(--tw-shadow-alpha), transparent);
      }
    }

    .hover\:shadow-amber-500\/10:hover {
      --tw-shadow-color: var(--color-amber-500);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:shadow-amber-500\/10:hover {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-amber-500) 10%, transparent) var(--tw-shadow-alpha), transparent);
      }
    }

    .hover\:shadow-amber-500\/20:hover {
      --tw-shadow-color: var(--color-amber-500);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:shadow-amber-500\/20:hover {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-amber-500) 20%, transparent) var(--tw-shadow-alpha), transparent);
      }
    }

    .hover\:shadow-amber-500\/30:hover {
      --tw-shadow-color: var(--color-amber-500);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:shadow-amber-500\/30:hover {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-amber-500) 30%, transparent) var(--tw-shadow-alpha), transparent);
      }
    }

    .hover\:shadow-amber-600\/30:hover {
      --tw-shadow-color: #dd74004d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:shadow-amber-600\/30:hover {
        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-amber-600) 30%, transparent) var(--tw-shadow-alpha), transparent);
      }
    }

    .hover\:brightness-110:hover {
      --tw-brightness: brightness(110%);
      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, );
    }

    .hover\:drop-shadow-\[0_0_12px_rgba\(238\,216\,171\,0\.45\)\]:hover {
      --tw-drop-shadow-size: drop-shadow(0 0 12px var(--tw-drop-shadow-color, #eed8ab73));
      --tw-drop-shadow: var(--tw-drop-shadow-size);
      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
    }

    .hover\:file\:bg-zinc-700:hover::file-selector-button {
      background-color: var(--color-zinc-700);
    }
  }

  .focus\:border-\[\#d6a756\]:focus {
    border-color: #d6a756;
  }

  .focus\:border-\[\#d9b56d\]:focus {
    border-color: #d9b56d;
  }

  .focus\:border-amber-500:focus, .focus\:border-amber-500\/70:focus {
    border-color: var(--color-amber-500);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:border-amber-500\/70:focus {
      border-color: color-mix(in oklab, var(--color-amber-500) 70%, transparent);
    }
  }

  .focus\:border-cyan-500:focus {
    border-color: var(--color-cyan-500);
  }

  .focus\:border-emerald-500:focus {
    border-color: var(--color-emerald-500);
  }

  .focus\:border-red-500:focus {
    border-color: var(--color-red-500);
  }

  .focus\:border-rose-500:focus {
    border-color: var(--color-rose-500);
  }

  .focus\:border-zinc-700:focus {
    border-color: var(--color-zinc-700);
  }

  .focus\:bg-zinc-950:focus {
    background-color: var(--color-zinc-950);
  }

  .focus\:ring-0:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-1:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-2:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-\[\#d9b56d\]\/60:focus {
    --tw-ring-color: oklab(78.9386% .011068 .0992453 / .6);
  }

  .focus\:ring-amber-400\/50:focus {
    --tw-ring-color: var(--color-amber-400);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-amber-400\/50:focus {
      --tw-ring-color: color-mix(in oklab, var(--color-amber-400) 50%, transparent);
    }
  }

  .focus\:ring-amber-500:focus, .focus\:ring-amber-500\/50:focus {
    --tw-ring-color: var(--color-amber-500);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:ring-amber-500\/50:focus {
      --tw-ring-color: color-mix(in oklab, var(--color-amber-500) 50%, transparent);
    }
  }

  .focus\:ring-rose-500:focus {
    --tw-ring-color: var(--color-rose-500);
  }

  .focus\:ring-offset-0:focus {
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  .focus-visible\:outline:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .focus-visible\:outline-2:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }

  .focus-visible\:outline-offset-2:focus-visible {
    outline-offset: 2px;
  }

  .focus-visible\:outline-offset-4:focus-visible {
    outline-offset: 4px;
  }

  .focus-visible\:outline-\[\#d9b56d\]:focus-visible {
    outline-color: #d9b56d;
  }

  .focus-visible\:outline-amber-300:focus-visible {
    outline-color: var(--color-amber-300);
  }

  .focus-visible\:outline-amber-400:focus-visible {
    outline-color: var(--color-amber-400);
  }

  .active\:scale-95:active {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .active\:scale-98:active {
    --tw-scale-x: 98%;
    --tw-scale-y: 98%;
    --tw-scale-z: 98%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .active\:scale-\[0\.98\]:active {
    scale: .98;
  }

  .active\:scale-\[0\.99\]:active {
    scale: .99;
  }

  .active\:cursor-grabbing:active {
    cursor: grabbing;
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:opacity-30:disabled {
    opacity: .3;
  }

  .disabled\:opacity-40:disabled {
    opacity: .4;
  }

  .disabled\:opacity-50:disabled {
    opacity: .5;
  }

  .disabled\:opacity-70:disabled {
    opacity: .7;
  }

  @media not all and (min-width: 48rem) {
    .max-md\:mx-auto {
      margin-inline: auto;
    }
  }

  @media (min-width: 851px) {
    .min-\[851px\]\:block {
      display: block;
    }

    .min-\[851px\]\:hidden {
      display: none;
    }
  }

  @media (min-width: 40rem) {
    .sm\:right-auto {
      right: auto;
    }

    .sm\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .sm\:-m-6 {
      margin: calc(var(--spacing) * -6);
    }

    .sm\:-mt-14 {
      margin-top: calc(var(--spacing) * -14);
    }

    .sm\:mb-3 {
      margin-bottom: calc(var(--spacing) * 3);
    }

    .sm\:mb-8 {
      margin-bottom: calc(var(--spacing) * 8);
    }

    .sm\:mb-10 {
      margin-bottom: calc(var(--spacing) * 10);
    }

    .sm\:ml-0 {
      margin-left: 0;
    }

    .sm\:block {
      display: block;
    }

    .sm\:flex {
      display: flex;
    }

    .sm\:hidden {
      display: none;
    }

    .sm\:inline {
      display: inline;
    }

    .sm\:inline-flex {
      display: inline-flex;
    }

    .sm\:h-5 {
      height: calc(var(--spacing) * 5);
    }

    .sm\:h-9 {
      height: calc(var(--spacing) * 9);
    }

    .sm\:h-10 {
      height: calc(var(--spacing) * 10);
    }

    .sm\:h-11 {
      height: calc(var(--spacing) * 11);
    }

    .sm\:h-12 {
      height: calc(var(--spacing) * 12);
    }

    .sm\:h-14 {
      height: calc(var(--spacing) * 14);
    }

    .sm\:h-20 {
      height: calc(var(--spacing) * 20);
    }

    .sm\:h-22 {
      height: calc(var(--spacing) * 22);
    }

    .sm\:h-24 {
      height: calc(var(--spacing) * 24);
    }

    .sm\:h-44 {
      height: calc(var(--spacing) * 44);
    }

    .sm\:h-56 {
      height: calc(var(--spacing) * 56);
    }

    .sm\:h-\[88px\] {
      height: 88px;
    }

    .sm\:h-\[300px\] {
      height: 300px;
    }

    .sm\:h-\[calc\(100\%\+3rem\)\] {
      height: calc(100% + 3rem);
    }

    .sm\:min-h-\[95px\] {
      min-height: 95px;
    }

    .sm\:w-5 {
      width: calc(var(--spacing) * 5);
    }

    .sm\:w-10 {
      width: calc(var(--spacing) * 10);
    }

    .sm\:w-11 {
      width: calc(var(--spacing) * 11);
    }

    .sm\:w-12 {
      width: calc(var(--spacing) * 12);
    }

    .sm\:w-14 {
      width: calc(var(--spacing) * 14);
    }

    .sm\:w-20 {
      width: calc(var(--spacing) * 20);
    }

    .sm\:w-22 {
      width: calc(var(--spacing) * 22);
    }

    .sm\:w-24 {
      width: calc(var(--spacing) * 24);
    }

    .sm\:w-52 {
      width: calc(var(--spacing) * 52);
    }

    .sm\:w-80 {
      width: calc(var(--spacing) * 80);
    }

    .sm\:w-\[88px\] {
      width: 88px;
    }

    .sm\:w-auto {
      width: auto;
    }

    .sm\:max-w-\[300px\] {
      max-width: 300px;
    }

    .sm\:max-w-md {
      max-width: var(--container-md);
    }

    .sm\:max-w-none {
      max-width: none;
    }

    .sm\:min-w-64 {
      min-width: calc(var(--spacing) * 64);
    }

    .sm\:flex-initial {
      flex: 0 auto;
    }

    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sm\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sm\:grid-cols-7 {
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .sm\:flex-row {
      flex-direction: row;
    }

    .sm\:flex-nowrap {
      flex-wrap: nowrap;
    }

    .sm\:items-center {
      align-items: center;
    }

    .sm\:items-end {
      align-items: flex-end;
    }

    .sm\:justify-between {
      justify-content: space-between;
    }

    .sm\:justify-end {
      justify-content: flex-end;
    }

    .sm\:justify-start {
      justify-content: flex-start;
    }

    .sm\:gap-2 {
      gap: calc(var(--spacing) * 2);
    }

    .sm\:gap-2\.5 {
      gap: calc(var(--spacing) * 2.5);
    }

    .sm\:gap-3 {
      gap: calc(var(--spacing) * 3);
    }

    .sm\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }

    .sm\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }

    :where(.sm\: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(.sm\:space-y-7 > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 7) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 7) * calc(1 - var(--tw-space-y-reverse)));
    }

    .sm\:self-auto {
      align-self: auto;
    }

    .sm\:self-center {
      align-self: center;
    }

    .sm\:border-0 {
      border-style: var(--tw-border-style);
      border-width: 0;
    }

    .sm\:p-4 {
      padding: calc(var(--spacing) * 4);
    }

    .sm\:p-5 {
      padding: calc(var(--spacing) * 5);
    }

    .sm\:p-6 {
      padding: calc(var(--spacing) * 6);
    }

    .sm\:p-7 {
      padding: calc(var(--spacing) * 7);
    }

    .sm\:p-8 {
      padding: calc(var(--spacing) * 8);
    }

    .sm\:p-12 {
      padding: calc(var(--spacing) * 12);
    }

    .sm\:px-1\.5 {
      padding-inline: calc(var(--spacing) * 1.5);
    }

    .sm\:px-4 {
      padding-inline: calc(var(--spacing) * 4);
    }

    .sm\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .sm\:py-2 {
      padding-block: calc(var(--spacing) * 2);
    }

    .sm\:py-6 {
      padding-block: calc(var(--spacing) * 6);
    }

    .sm\:py-8 {
      padding-block: calc(var(--spacing) * 8);
    }

    .sm\:py-10 {
      padding-block: calc(var(--spacing) * 10);
    }

    .sm\:py-12 {
      padding-block: calc(var(--spacing) * 12);
    }

    .sm\:py-32 {
      padding-block: calc(var(--spacing) * 32);
    }

    .sm\:pt-0 {
      padding-top: 0;
    }

    .sm\:pt-3 {
      padding-top: calc(var(--spacing) * 3);
    }

    .sm\:pt-14 {
      padding-top: calc(var(--spacing) * 14);
    }

    .sm\:pb-4 {
      padding-bottom: calc(var(--spacing) * 4);
    }

    .sm\:pb-6 {
      padding-bottom: calc(var(--spacing) * 6);
    }

    .sm\:text-left {
      text-align: left;
    }

    .sm\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }

    .sm\:text-3xl {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }

    .sm\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }

    .sm\:text-5xl {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }

    .sm\:text-6xl {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }

    .sm\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }

    .sm\:text-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }

    .sm\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }

    .sm\:text-xl {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }

    .sm\:text-xs {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }

    .sm\:text-\[10px\] {
      font-size: 10px;
    }

    .sm\:text-\[11px\] {
      font-size: 11px;
    }
  }

  @media (min-width: 48rem) {
    .md\:static {
      position: static;
    }

    .md\:z-40 {
      z-index: 40;
    }

    .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\:inline {
      display: inline;
    }

    .md\:h-2\.5 {
      height: calc(var(--spacing) * 2.5);
    }

    .md\:h-10 {
      height: calc(var(--spacing) * 10);
    }

    .md\:w-56 {
      width: calc(var(--spacing) * 56);
    }

    .md\:w-64 {
      width: calc(var(--spacing) * 64);
    }

    .md\:w-80 {
      width: calc(var(--spacing) * 80);
    }

    .md\:w-\[260px\] {
      width: 260px;
    }

    .md\:translate-x-0 {
      --tw-translate-x: 0px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .md\:flex-row {
      flex-direction: row;
    }

    .md\:items-center {
      align-items: center;
    }

    .md\:items-end {
      align-items: flex-end;
    }

    .md\:items-start {
      align-items: flex-start;
    }

    .md\:justify-start {
      justify-content: flex-start;
    }

    .md\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }

    .md\:self-auto {
      align-self: auto;
    }

    .md\:self-center {
      align-self: center;
    }

    .md\:self-start {
      align-self: flex-start;
    }

    .md\:justify-self-end {
      justify-self: flex-end;
    }

    .md\:p-4 {
      padding: calc(var(--spacing) * 4);
    }

    .md\:p-6 {
      padding: calc(var(--spacing) * 6);
    }

    .md\:p-8 {
      padding: calc(var(--spacing) * 8);
    }

    .md\:px-5 {
      padding-inline: calc(var(--spacing) * 5);
    }

    .md\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }

    .md\:py-5 {
      padding-block: calc(var(--spacing) * 5);
    }

    .md\:text-left {
      text-align: left;
    }

    .md\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }

    .md\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }

    .md\:text-sm {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }

    .md\:text-xs {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }

    .md\: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);
    }
  }

  @media (min-width: 64rem) {
    .lg\:top-5 {
      top: calc(var(--spacing) * 5);
    }

    .lg\:right-5 {
      right: calc(var(--spacing) * 5);
    }

    .lg\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .lg\:col-span-4 {
      grid-column: span 4 / span 4;
    }

    .lg\:col-span-5 {
      grid-column: span 5 / span 5;
    }

    .lg\:col-span-7 {
      grid-column: span 7 / span 7;
    }

    .lg\:col-span-8 {
      grid-column: span 8 / span 8;
    }

    .lg\:-m-10 {
      margin: calc(var(--spacing) * -10);
    }

    .lg\:flex {
      display: flex;
    }

    .lg\:hidden {
      display: none;
    }

    .lg\:inline {
      display: inline;
    }

    .lg\:h-\[calc\(100\%\+5rem\)\] {
      height: calc(100% + 5rem);
    }

    .lg\:w-96 {
      width: calc(var(--spacing) * 96);
    }

    .lg\:w-\[340px\] {
      width: 340px;
    }

    .lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lg\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .lg\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .lg\:grid-cols-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .lg\:grid-cols-\[42\%_58\%\] {
      grid-template-columns: 42% 58%;
    }

    .lg\:grid-rows-1 {
      grid-template-rows: repeat(1, minmax(0, 1fr));
    }

    .lg\:flex-row {
      flex-direction: row;
    }

    :where(.lg\: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)));
    }

    .lg\:p-5 {
      padding: calc(var(--spacing) * 5);
    }

    .lg\:p-8 {
      padding: calc(var(--spacing) * 8);
    }

    .lg\:p-10 {
      padding: calc(var(--spacing) * 10);
    }

    .lg\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .lg\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }

    .lg\:py-8 {
      padding-block: calc(var(--spacing) * 8);
    }

    .lg\:py-12 {
      padding-block: calc(var(--spacing) * 12);
    }

    .lg\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }

    .lg\:text-6xl {
      font-size: var(--text-6xl);
      line-height: var(--tw-leading, var(--text-6xl--line-height));
    }

    .lg\:text-7xl {
      font-size: var(--text-7xl);
      line-height: var(--tw-leading, var(--text-7xl--line-height));
    }
  }

  @media (min-width: 80rem) {
    .xl\:flex {
      display: flex;
    }

    .xl\:hidden {
      display: none;
    }

    .xl\:h-16 {
      height: calc(var(--spacing) * 16);
    }

    .xl\:w-16 {
      width: calc(var(--spacing) * 16);
    }

    .xl\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .xl\:grid-cols-\[minmax\(0\,1fr\)_280px\] {
      grid-template-columns: minmax(0, 1fr) 280px;
    }

    .xl\:gap-3 {
      gap: calc(var(--spacing) * 3);
    }

    .xl\:p-5 {
      padding: calc(var(--spacing) * 5);
    }

    .xl\:p-7 {
      padding: calc(var(--spacing) * 7);
    }

    .xl\:text-left {
      text-align: left;
    }

    .xl\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }

    .xl\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:grid-cols-\[minmax\(0\,1fr\)_300px\] {
      grid-template-columns: minmax(0, 1fr) 300px;
    }
  }

  .dark\:border-amber-500:where(:root:not(.light), :root:not(.light) *), .dark\:border-amber-500\/30:where(:root:not(.light), :root:not(.light) *) {
    border-color: var(--color-amber-500);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:border-amber-500\/30:where(:root:not(.light), :root:not(.light) *) {
      border-color: color-mix(in oklab, var(--color-amber-500) 30%, transparent);
    }
  }

  .dark\:border-amber-500\/40:where(:root:not(.light), :root:not(.light) *) {
    border-color: var(--color-amber-500);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:border-amber-500\/40:where(:root:not(.light), :root:not(.light) *) {
      border-color: color-mix(in oklab, var(--color-amber-500) 40%, transparent);
    }
  }

  .dark\:border-amber-600\/50:where(:root:not(.light), :root:not(.light) *) {
    border-color: #dd740080;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:border-amber-600\/50:where(:root:not(.light), :root:not(.light) *) {
      border-color: color-mix(in oklab, var(--color-amber-600) 50%, transparent);
    }
  }

  .dark\:border-amber-600\/70:where(:root:not(.light), :root:not(.light) *) {
    border-color: #dd7400b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:border-amber-600\/70:where(:root:not(.light), :root:not(.light) *) {
      border-color: color-mix(in oklab, var(--color-amber-600) 70%, transparent);
    }
  }

  .dark\:border-amber-800\/80:where(:root:not(.light), :root:not(.light) *) {
    border-color: #953d00cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:border-amber-800\/80:where(:root:not(.light), :root:not(.light) *) {
      border-color: color-mix(in oklab, var(--color-amber-800) 80%, transparent);
    }
  }

  .dark\:border-cyan-700\/40:where(:root:not(.light), :root:not(.light) *) {
    border-color: #00749266;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:border-cyan-700\/40:where(:root:not(.light), :root:not(.light) *) {
      border-color: color-mix(in oklab, var(--color-cyan-700) 40%, transparent);
    }
  }

  .dark\:border-emerald-800:where(:root:not(.light), :root:not(.light) *) {
    border-color: var(--color-emerald-800);
  }

  .dark\:border-purple-700\/60:where(:root:not(.light), :root:not(.light) *) {
    border-color: #8200da99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:border-purple-700\/60:where(:root:not(.light), :root:not(.light) *) {
      border-color: color-mix(in oklab, var(--color-purple-700) 60%, transparent);
    }
  }

  .dark\:border-rose-800\/80:where(:root:not(.light), :root:not(.light) *) {
    border-color: #a30037cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:border-rose-800\/80:where(:root:not(.light), :root:not(.light) *) {
      border-color: color-mix(in oklab, var(--color-rose-800) 80%, transparent);
    }
  }

  .dark\:border-rose-900:where(:root:not(.light), :root:not(.light) *) {
    border-color: var(--color-rose-900);
  }

  .dark\:border-sky-700\/60:where(:root:not(.light), :root:not(.light) *) {
    border-color: #0069a499;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:border-sky-700\/60:where(:root:not(.light), :root:not(.light) *) {
      border-color: color-mix(in oklab, var(--color-sky-700) 60%, transparent);
    }
  }

  .dark\:border-zinc-700:where(:root:not(.light), :root:not(.light) *), .dark\:border-zinc-700\/90:where(:root:not(.light), :root:not(.light) *) {
    border-color: var(--color-zinc-700);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:border-zinc-700\/90:where(:root:not(.light), :root:not(.light) *) {
      border-color: color-mix(in oklab, var(--color-zinc-700) 90%, transparent);
    }
  }

  .dark\:border-zinc-800:where(:root:not(.light), :root:not(.light) *), .dark\:border-zinc-800\/80:where(:root:not(.light), :root:not(.light) *) {
    border-color: var(--color-zinc-800);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:border-zinc-800\/80:where(:root:not(.light), :root:not(.light) *) {
      border-color: color-mix(in oklab, var(--color-zinc-800) 80%, transparent);
    }
  }

  .dark\:border-zinc-800\/90:where(:root:not(.light), :root:not(.light) *) {
    border-color: var(--color-zinc-800);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:border-zinc-800\/90:where(:root:not(.light), :root:not(.light) *) {
      border-color: color-mix(in oklab, var(--color-zinc-800) 90%, transparent);
    }
  }

  .dark\:bg-amber-500\/10:where(:root:not(.light), :root:not(.light) *) {
    background-color: var(--color-amber-500);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-amber-500\/10:where(:root:not(.light), :root:not(.light) *) {
      background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
    }
  }

  .dark\:bg-amber-500\/15:where(:root:not(.light), :root:not(.light) *) {
    background-color: var(--color-amber-500);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-amber-500\/15:where(:root:not(.light), :root:not(.light) *) {
      background-color: color-mix(in oklab, var(--color-amber-500) 15%, transparent);
    }
  }

  .dark\:bg-amber-500\/20:where(:root:not(.light), :root:not(.light) *) {
    background-color: var(--color-amber-500);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-amber-500\/20:where(:root:not(.light), :root:not(.light) *) {
      background-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
    }
  }

  .dark\:bg-amber-950\/40:where(:root:not(.light), :root:not(.light) *) {
    background-color: var(--color-amber-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-amber-950\/40:where(:root:not(.light), :root:not(.light) *) {
      background-color: color-mix(in oklab, var(--color-amber-950) 40%, transparent);
    }
  }

  .dark\:bg-amber-950\/60:where(:root:not(.light), :root:not(.light) *) {
    background-color: var(--color-amber-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-amber-950\/60:where(:root:not(.light), :root:not(.light) *) {
      background-color: color-mix(in oklab, var(--color-amber-950) 60%, transparent);
    }
  }

  .dark\:bg-black\/40:where(:root:not(.light), :root:not(.light) *) {
    background-color: #0006;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-black\/40:where(:root:not(.light), :root:not(.light) *) {
      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }

  .dark\:bg-emerald-900\/40:where(:root:not(.light), :root:not(.light) *) {
    background-color: #004e3b66;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-emerald-900\/40:where(:root:not(.light), :root:not(.light) *) {
      background-color: color-mix(in oklab, var(--color-emerald-900) 40%, transparent);
    }
  }

  .dark\:bg-emerald-950\/40:where(:root:not(.light), :root:not(.light) *) {
    background-color: var(--color-emerald-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-emerald-950\/40:where(:root:not(.light), :root:not(.light) *) {
      background-color: color-mix(in oklab, var(--color-emerald-950) 40%, transparent);
    }
  }

  .dark\:bg-purple-950\/60:where(:root:not(.light), :root:not(.light) *) {
    background-color: #3c036699;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-purple-950\/60:where(:root:not(.light), :root:not(.light) *) {
      background-color: color-mix(in oklab, var(--color-purple-950) 60%, transparent);
    }
  }

  .dark\:bg-rose-950\/30:where(:root:not(.light), :root:not(.light) *) {
    background-color: var(--color-rose-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-rose-950\/30:where(:root:not(.light), :root:not(.light) *) {
      background-color: color-mix(in oklab, var(--color-rose-950) 30%, transparent);
    }
  }

  .dark\:bg-rose-950\/40:where(:root:not(.light), :root:not(.light) *) {
    background-color: var(--color-rose-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-rose-950\/40:where(:root:not(.light), :root:not(.light) *) {
      background-color: color-mix(in oklab, var(--color-rose-950) 40%, transparent);
    }
  }

  .dark\:bg-sky-950\/60:where(:root:not(.light), :root:not(.light) *) {
    background-color: var(--color-sky-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-sky-950\/60:where(:root:not(.light), :root:not(.light) *) {
      background-color: color-mix(in oklab, var(--color-sky-950) 60%, transparent);
    }
  }

  .dark\:bg-zinc-800:where(:root:not(.light), :root:not(.light) *) {
    background-color: var(--color-zinc-800);
  }

  .dark\:bg-zinc-900:where(:root:not(.light), :root:not(.light) *), .dark\:bg-zinc-900\/40:where(:root:not(.light), :root:not(.light) *) {
    background-color: var(--color-zinc-900);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-zinc-900\/40:where(:root:not(.light), :root:not(.light) *) {
      background-color: color-mix(in oklab, var(--color-zinc-900) 40%, transparent);
    }
  }

  .dark\:bg-zinc-900\/60:where(:root:not(.light), :root:not(.light) *) {
    background-color: var(--color-zinc-900);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-zinc-900\/60:where(:root:not(.light), :root:not(.light) *) {
      background-color: color-mix(in oklab, var(--color-zinc-900) 60%, transparent);
    }
  }

  .dark\:bg-zinc-900\/80:where(:root:not(.light), :root:not(.light) *) {
    background-color: var(--color-zinc-900);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-zinc-900\/80:where(:root:not(.light), :root:not(.light) *) {
      background-color: color-mix(in oklab, var(--color-zinc-900) 80%, transparent);
    }
  }

  .dark\:bg-zinc-900\/90:where(:root:not(.light), :root:not(.light) *) {
    background-color: var(--color-zinc-900);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-zinc-900\/90:where(:root:not(.light), :root:not(.light) *) {
      background-color: color-mix(in oklab, var(--color-zinc-900) 90%, transparent);
    }
  }

  .dark\:bg-zinc-950:where(:root:not(.light), :root:not(.light) *), .dark\:bg-zinc-950\/60:where(:root:not(.light), :root:not(.light) *) {
    background-color: var(--color-zinc-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-zinc-950\/60:where(:root:not(.light), :root:not(.light) *) {
      background-color: color-mix(in oklab, var(--color-zinc-950) 60%, transparent);
    }
  }

  .dark\:bg-zinc-950\/80:where(:root:not(.light), :root:not(.light) *) {
    background-color: var(--color-zinc-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-zinc-950\/80:where(:root:not(.light), :root:not(.light) *) {
      background-color: color-mix(in oklab, var(--color-zinc-950) 80%, transparent);
    }
  }

  .dark\:bg-zinc-950\/90:where(:root:not(.light), :root:not(.light) *) {
    background-color: var(--color-zinc-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-zinc-950\/90:where(:root:not(.light), :root:not(.light) *) {
      background-color: color-mix(in oklab, var(--color-zinc-950) 90%, transparent);
    }
  }

  .dark\:bg-zinc-950\/95:where(:root:not(.light), :root:not(.light) *) {
    background-color: var(--color-zinc-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-zinc-950\/95:where(:root:not(.light), :root:not(.light) *) {
      background-color: color-mix(in oklab, var(--color-zinc-950) 95%, transparent);
    }
  }

  .dark\:text-amber-200:where(:root:not(.light), :root:not(.light) *) {
    color: var(--color-amber-200);
  }

  .dark\:text-amber-200\/90:where(:root:not(.light), :root:not(.light) *) {
    color: #fee685e6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:text-amber-200\/90:where(:root:not(.light), :root:not(.light) *) {
      color: color-mix(in oklab, var(--color-amber-200) 90%, transparent);
    }
  }

  .dark\:text-amber-300:where(:root:not(.light), :root:not(.light) *) {
    color: var(--color-amber-300);
  }

  .dark\:text-amber-300\/80:where(:root:not(.light), :root:not(.light) *) {
    color: #ffd236cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:text-amber-300\/80:where(:root:not(.light), :root:not(.light) *) {
      color: color-mix(in oklab, var(--color-amber-300) 80%, transparent);
    }
  }

  .dark\:text-amber-400:where(:root:not(.light), :root:not(.light) *) {
    color: var(--color-amber-400);
  }

  .dark\:text-cyan-200:where(:root:not(.light), :root:not(.light) *) {
    color: var(--color-cyan-200);
  }

  .dark\:text-cyan-300:where(:root:not(.light), :root:not(.light) *) {
    color: var(--color-cyan-300);
  }

  .dark\:text-cyan-400:where(:root:not(.light), :root:not(.light) *) {
    color: var(--color-cyan-400);
  }

  .dark\:text-emerald-100:where(:root:not(.light), :root:not(.light) *) {
    color: var(--color-emerald-100);
  }

  .dark\:text-emerald-300:where(:root:not(.light), :root:not(.light) *) {
    color: var(--color-emerald-300);
  }

  .dark\:text-emerald-400:where(:root:not(.light), :root:not(.light) *) {
    color: var(--color-emerald-400);
  }

  .dark\:text-purple-300:where(:root:not(.light), :root:not(.light) *) {
    color: var(--color-purple-300);
  }

  .dark\:text-purple-400:where(:root:not(.light), :root:not(.light) *) {
    color: var(--color-purple-400);
  }

  .dark\:text-rose-300:where(:root:not(.light), :root:not(.light) *) {
    color: var(--color-rose-300);
  }

  .dark\:text-rose-400:where(:root:not(.light), :root:not(.light) *) {
    color: var(--color-rose-400);
  }

  .dark\:text-sky-300:where(:root:not(.light), :root:not(.light) *) {
    color: var(--color-sky-300);
  }

  .dark\:text-sky-400:where(:root:not(.light), :root:not(.light) *) {
    color: var(--color-sky-400);
  }

  .dark\:text-zinc-100:where(:root:not(.light), :root:not(.light) *) {
    color: var(--color-zinc-100);
  }

  .dark\:text-zinc-200:where(:root:not(.light), :root:not(.light) *) {
    color: var(--color-zinc-200);
  }

  .dark\:text-zinc-300:where(:root:not(.light), :root:not(.light) *) {
    color: var(--color-zinc-300);
  }

  .dark\:text-zinc-400:where(:root:not(.light), :root:not(.light) *) {
    color: var(--color-zinc-400);
  }

  .dark\:text-zinc-500:where(:root:not(.light), :root:not(.light) *) {
    color: var(--color-zinc-500);
  }

  .dark\:text-zinc-600:where(:root:not(.light), :root:not(.light) *) {
    color: var(--color-zinc-600);
  }

  .dark\:placeholder-zinc-500:where(:root:not(.light), :root:not(.light) *)::placeholder {
    color: var(--color-zinc-500);
  }

  .dark\:placeholder-zinc-600:where(:root:not(.light), :root:not(.light) *)::placeholder {
    color: var(--color-zinc-600);
  }

  .dark\:ring-amber-500:where(:root:not(.light), :root:not(.light) *), .dark\:ring-amber-500\/70:where(:root:not(.light), :root:not(.light) *) {
    --tw-ring-color: var(--color-amber-500);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:ring-amber-500\/70:where(:root:not(.light), :root:not(.light) *) {
      --tw-ring-color: color-mix(in oklab, var(--color-amber-500) 70%, transparent);
    }
  }

  .dark\:ring-amber-500\/80:where(:root:not(.light), :root:not(.light) *) {
    --tw-ring-color: var(--color-amber-500);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:ring-amber-500\/80:where(:root:not(.light), :root:not(.light) *) {
      --tw-ring-color: color-mix(in oklab, var(--color-amber-500) 80%, transparent);
    }
  }

  @media (hover: hover) {
    .dark\:hover\:border-amber-600\/40:where(:root:not(.light), :root:not(.light) *):hover {
      border-color: #dd740066;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:border-amber-600\/40:where(:root:not(.light), :root:not(.light) *):hover {
        border-color: color-mix(in oklab, var(--color-amber-600) 40%, transparent);
      }
    }

    .dark\:hover\:border-zinc-500:where(:root:not(.light), :root:not(.light) *):hover {
      border-color: var(--color-zinc-500);
    }

    .dark\:hover\:border-zinc-700:where(:root:not(.light), :root:not(.light) *):hover {
      border-color: var(--color-zinc-700);
    }

    .dark\:hover\:bg-amber-900\/60:where(:root:not(.light), :root:not(.light) *):hover {
      background-color: var(--color-amber-900);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-amber-900\/60:where(:root:not(.light), :root:not(.light) *):hover {
        background-color: color-mix(in oklab, var(--color-amber-900) 60%, transparent);
      }
    }

    .dark\:hover\:bg-zinc-700:where(:root:not(.light), :root:not(.light) *):hover {
      background-color: var(--color-zinc-700);
    }

    .dark\:hover\:bg-zinc-800:where(:root:not(.light), :root:not(.light) *):hover {
      background-color: var(--color-zinc-800);
    }

    .dark\:hover\:bg-zinc-900:where(:root:not(.light), :root:not(.light) *):hover, .dark\:hover\:bg-zinc-900\/80:where(:root:not(.light), :root:not(.light) *):hover {
      background-color: var(--color-zinc-900);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-zinc-900\/80:where(:root:not(.light), :root:not(.light) *):hover {
        background-color: color-mix(in oklab, var(--color-zinc-900) 80%, transparent);
      }
    }

    .dark\:hover\:text-amber-200:where(:root:not(.light), :root:not(.light) *):hover {
      color: var(--color-amber-200);
    }

    .dark\:hover\:text-amber-300:where(:root:not(.light), :root:not(.light) *):hover {
      color: var(--color-amber-300);
    }

    .dark\:hover\:text-rose-400:where(:root:not(.light), :root:not(.light) *):hover {
      color: var(--color-rose-400);
    }
  }

  .\[\&_input\]\:w-full input {
    width: 100%;
  }

  .\[\&_input\]\:rounded-lg input {
    border-radius: var(--radius-lg);
  }

  .\[\&_input\]\:border input {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .\[\&_input\]\:border-zinc-800 input {
    border-color: var(--color-zinc-800);
  }

  .\[\&_input\]\:bg-zinc-950 input {
    background-color: var(--color-zinc-950);
  }

  .\[\&_input\]\:p-3 input {
    padding: calc(var(--spacing) * 3);
  }

  .\[\&_input\]\:text-sm input {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .\[\&_input\]\:text-zinc-100 input {
    color: var(--color-zinc-100);
  }

  .\[\&_input\]\:outline-none input {
    --tw-outline-style: none;
    outline-style: none;
  }

  .\[\&_input\]\:focus\:border-amber-500 input:focus {
    border-color: var(--color-amber-500);
  }

  .\[\&_select\]\:w-full select {
    width: 100%;
  }

  .\[\&_select\]\:rounded-lg select {
    border-radius: var(--radius-lg);
  }

  .\[\&_select\]\:border select {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .\[\&_select\]\:border-zinc-800 select {
    border-color: var(--color-zinc-800);
  }

  .\[\&_select\]\:bg-zinc-950 select {
    background-color: var(--color-zinc-950);
  }

  .\[\&_select\]\:p-3 select {
    padding: calc(var(--spacing) * 3);
  }

  .\[\&_select\]\:text-sm select {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .\[\&_select\]\:text-zinc-100 select {
    color: var(--color-zinc-100);
  }

  .\[\&_select\]\:outline-none select {
    --tw-outline-style: none;
    outline-style: none;
  }

  .\[\&_select\]\:focus\:border-amber-500 select:focus {
    border-color: var(--color-amber-500);
  }

  .\[\&_textarea\]\:w-full textarea {
    width: 100%;
  }

  .\[\&_textarea\]\:rounded-lg textarea {
    border-radius: var(--radius-lg);
  }

  .\[\&_textarea\]\:border textarea {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .\[\&_textarea\]\:border-zinc-800 textarea {
    border-color: var(--color-zinc-800);
  }

  .\[\&_textarea\]\:bg-zinc-950 textarea {
    background-color: var(--color-zinc-950);
  }

  .\[\&_textarea\]\:p-3 textarea {
    padding: calc(var(--spacing) * 3);
  }

  .\[\&_textarea\]\:text-sm textarea {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .\[\&_textarea\]\:text-zinc-100 textarea {
    color: var(--color-zinc-100);
  }

  .\[\&_textarea\]\:outline-none textarea {
    --tw-outline-style: none;
    outline-style: none;
  }

  .\[\&_textarea\]\:focus\:border-amber-500 textarea:focus {
    border-color: var(--color-amber-500);
  }

  .\[role\=\"alert\"\]\:visible:is() {
    visibility: visible;
  }

  .pro-panel {
    background: linear-gradient(145deg, var(--color-rpg-panel), var(--color-rpg-panel));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .pro-panel {
      background: linear-gradient(145deg, color-mix(in srgb, var(--color-rpg-panel) 96%, #24134b), var(--color-rpg-panel));
    }
  }

  .pro-panel {
    border: 1px solid var(--color-rpg-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .pro-panel {
      border: 1px solid color-mix(in srgb, var(--color-rpg-border) 82%, var(--guild-gold));
    }
  }

  .pro-panel {
    box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;
  }

  .pro-card {
    background-color: var(--color-rpg-bg);
    border: 1px solid var(--color-rpg-border);
    transition: border-color .2s, background-color .2s;
  }

  .pro-card:hover {
    border-color: var(--guild-gold-soft);
    background-color: var(--zinc-900);
  }

  .guild-shell {
    isolation: isolate;
    position: relative;
  }

  .guild-panel {
    border: 1px solid var(--zinc-800);
    position: relative;
    overflow: hidden;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .guild-panel {
      border: 1px solid color-mix(in srgb, var(--zinc-800) 76%, var(--guild-gold));
    }
  }

  .guild-panel {
    background: linear-gradient(145deg, var(--zinc-950), var(--zinc-950));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .guild-panel {
      background: linear-gradient(145deg, color-mix(in srgb, var(--zinc-950) 92%, #24134b), var(--zinc-950));
    }
  }

  .guild-panel {
    box-shadow: inset 0 1px #ffffff06, 0 16px 45px #00000029;
  }

  .guild-card {
    border: 1px solid var(--zinc-800);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .guild-card {
      border: 1px solid color-mix(in srgb, var(--zinc-800) 84%, var(--guild-gold));
    }
  }

  .guild-card {
    background: linear-gradient(150deg, var(--zinc-900), var(--zinc-950));
  }

  @supports (color: color-mix(in lab, red, red)) {
    .guild-card {
      background: linear-gradient(150deg, color-mix(in srgb, var(--zinc-900) 94%, #261252), color-mix(in srgb, var(--zinc-950) 97%, #101d36));
    }
  }

  .guild-card {
    box-shadow: inset 0 1px #ffffff06;
  }

  .guild-card:hover {
    border-color: var(--guild-gold-soft);
    box-shadow: 0 12px 34px #31165c2e;
  }

  .guild-kicker {
    color: var(--guild-gold);
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 800;
  }

  .guild-rule {
    color: var(--guild-gold);
    align-items: center;
    gap: .7rem;
    display: flex;
  }

  .guild-rule:before, .guild-rule:after {
    content: "";
    background: linear-gradient(90deg, transparent, var(--guild-gold-soft));
    flex: 1;
    height: 1px;
  }

  .guild-rule:after {
    transform: scaleX(-1);
  }

  .guild-icon {
    filter: drop-shadow(0 0 12px #7c3aed3d);
  }
}

:root {
  --app-font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --zinc-950: #09090b;
  --zinc-900: #18181b;
  --zinc-800: #27272a;
  --zinc-700: #3f3f46;
  --zinc-600: #52525b;
  --zinc-500: #71717a;
  --zinc-400: #a1a1aa;
  --zinc-300: #d4d4d8;
  --zinc-200: #e4e4e7;
  --zinc-100: #f4f4f5;
  --zinc-50: #fafafa;
  --sky-950: #082f49;
  --sky-500: #0ea5e9;
  --sky-400: #38bdf8;
  --rose-950: #4c0519;
  --rose-500: #f43f5e;
  --rose-400: #fb7185;
  --emerald-950: #022c22;
  --emerald-500: #10b981;
  --emerald-400: #34d399;
  --amber-950: #451a03;
  --amber-900: #78350f;
  --amber-500: #f59e0b;
  --amber-400: #fbbf24;
  --red-950: #450a0a;
  --red-500: #ef4444;
  --red-400: #f87171;
  --indigo-950: #1e1b4b;
  --indigo-900: #312e81;
  --indigo-500: #6366f1;
  --indigo-400: #818cf8;
  --violet-950: #2e1065;
  --violet-500: #8b5cf6;
  --violet-400: #a78bfa;
  --color-rpg-bg: var(--zinc-950);
  --color-rpg-panel: var(--zinc-900);
  --color-rpg-border: var(--zinc-800);
  --color-rpg-accent: #d97706;
  --guild-gold: #d6a756;
  --guild-gold-soft: #d6a7563d;
  --guild-violet-soft: #7c3aed24;
}

:root.light {
  --zinc-950: #f4f4f5;
  --zinc-900: #fff;
  --zinc-800: #e4e4e7;
  --zinc-700: #d4d4d8;
  --zinc-600: #a1a1aa;
  --zinc-500: #71717a;
  --zinc-400: #3f3f46;
  --zinc-300: #27272a;
  --zinc-200: #18181b;
  --zinc-100: #09090b;
  --zinc-50: #09090b;
  --sky-950: #e0f2fe;
  --sky-500: #0284c7;
  --sky-400: #0369a1;
  --rose-950: #ffe4e6;
  --rose-500: #e11d48;
  --rose-400: #be123c;
  --emerald-950: #d1fae5;
  --emerald-500: #059669;
  --emerald-400: #047857;
  --amber-950: #fef3c7;
  --amber-900: #fde68a;
  --amber-500: #d97706;
  --amber-400: #b45309;
  --red-950: #fee2e2;
  --red-500: #dc2626;
  --red-400: #b91c1c;
  --indigo-950: #e0e7ff;
  --indigo-900: #c7d2fe;
  --indigo-500: #4f46e5;
  --indigo-400: #4338ca;
  --violet-950: #f5f3ff;
  --violet-500: #7c3aed;
  --violet-400: #6d28d9;
  --color-rpg-bg: var(--zinc-950);
  --color-rpg-panel: var(--zinc-900);
  --color-rpg-border: var(--zinc-800);
  --color-rpg-accent: #b45309;
}

.leaflet-popup.custom-dark-popup .leaflet-popup-content-wrapper, .leaflet-popup .leaflet-popup-content-wrapper {
  color: #f4f4f5 !important;
  background: #09090b !important;
  border: 1px solid #27272a !important;
  border-radius: 8px !important;
  padding: 0 !important;
  box-shadow: 0 10px 25px -5px #000c, 0 8px 10px -6px #000c !important;
}

.leaflet-popup.custom-dark-popup .leaflet-popup-content, .leaflet-popup .leaflet-popup-content {
  color: #f4f4f5 !important;
  margin: 10px 12px !important;
  line-height: 1.4 !important;
}

.leaflet-popup.custom-dark-popup .leaflet-popup-tip, .leaflet-popup .leaflet-popup-tip {
  box-shadow: none !important;
  background: #09090b !important;
}

.leaflet-popup.custom-dark-popup .leaflet-popup-close-button, .leaflet-popup .leaflet-popup-close-button {
  color: #a1a1aa !important;
  padding: 6px 8px 0 0 !important;
  font-size: 16px !important;
  font-weight: bold !important;
}

.leaflet-popup.custom-dark-popup .leaflet-popup-close-button:hover, .leaflet-popup .leaflet-popup-close-button:hover {
  color: #f4f4f5 !important;
}

.world-icon-button {
  color: #c6bed6;
  background: #0b1923;
  border: 1px solid #53616d;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  transition: color .15s, border-color .15s, background .15s;
  display: inline-flex;
}

.world-icon-button:hover {
  color: #eed8ab;
  background: #bda16b18;
  border-color: #bda16b;
}

.world-button-primary {
  color: #08131d;
  cursor: pointer;
  text-align: center;
  background: linear-gradient(135deg, #e0bd78, #b48a46);
  border: 1px solid #edcd94;
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 28px;
  font: 600 15px Georgia, serif;
  text-decoration: none;
  transition: all .2s;
  display: inline-flex;
  box-shadow: 0 4px 20px #d9b56d40;
}

.world-button-primary:hover {
  color: #050c12;
  background: linear-gradient(135deg, #ebd193, #c49952);
  border-color: #f7e0b5;
  transform: translateY(-1px);
  box-shadow: 0 6px 25px #d9b56d66;
}

.world-button-primary:active {
  transform: translateY(0);
}

.world-button-secondary {
  color: #c9c2db;
  cursor: pointer;
  text-align: center;
  background: #0b1a25;
  border: 1px solid #3f5363;
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 24px;
  font: 500 15px Georgia, serif;
  text-decoration: none;
  transition: all .2s;
  display: inline-flex;
}

.world-button-secondary:hover {
  color: #eed8ab;
  background: #bda16b15;
  border-color: #bda16b;
}

:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

.world-topbar, .portal-topbar {
  height: calc(4rem + var(--sat));
  padding-top: var(--sat);
}

.public-header, .world-sidebar, .portal-sidebar {
  padding-top: var(--sat);
}

.pt-safe {
  padding-top: env(safe-area-inset-top, 0px);
}

.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.pl-safe {
  padding-left: env(safe-area-inset-left, 0px);
}

.pr-safe {
  padding-right: env(safe-area-inset-right, 0px);
}

.mt-safe {
  margin-top: env(safe-area-inset-top, 0px);
}

.mb-safe {
  margin-bottom: env(safe-area-inset-bottom, 0px);
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-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-ease {
  syntax: "*";
  inherits: false
}

@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

@keyframes bounce {
  0%, 100% {
    animation-timing-function: cubic-bezier(.8, 0, 1, 1);
    transform: translateY(-25%);
  }

  50% {
    animation-timing-function: cubic-bezier(0, 0, .2, 1);
    transform: none;
  }
}
.world-gold {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px;
  border: 0;
  isolation: isolate;
  background: #b99a61;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  box-shadow: inset 0 0 24px #d9b56d08;
}

.world-gold::before {
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  background: linear-gradient(110deg, #182027, #0a1a25 55%, #07111a);
  z-index: -1;
  pointer-events: none;
}

.world-gold h2 {
  font: 500 clamp(22px, 2.2vw, 32px)/1.2 Georgia, serif;
  color: #eed8ab;
  margin: 0 0 6px;
}

.world-gold p {
  font-size: 14px;
  color: #b5b1cb;
  line-height: 1.6;
}

.world-banner-action { flex-shrink: 0; }

.world-gold-illustrated {
  overflow: hidden;
  min-height: 146px;
}

.world-gold-illustrated::before,
.world-gold-illustrated::after { display: none; }

.world-gold-illustrated .world-gold-scene {
  position: absolute;
  inset: 1px;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  object-fit: cover;
  object-position: center 35%;
  transform: scaleX(-1);
  z-index: -1;
  pointer-events: none;
}

.world-gold-illustrated h2 {
  text-shadow: 0 2px 8px #000c, 0 1px 2px #000;
  color: #f0dba9;
}

.world-gold-illustrated p {
  color: #f0edf6;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 16px;
  text-shadow: 0 2px 6px #000, 0 1px 2px #000;
}

.world-gold-illustrated .world-medallion {
  background: #07131b88;
  box-shadow: 0 0 24px #e6bd6233;
  color: #f0dba9;
}

.world-gold-illustrated .world-button {
  background: linear-gradient(#2d291fe8, #09151def);
  border-color: #dfbd78;
  box-shadow: 0 0 15px #d9b56d22;
}

@media (max-width: 1150px) {
  .world-gold { flex-wrap: wrap; }
  .world-banner-action { margin-left: auto; }
}

@media (max-width: 850px) {
  .world-gold { padding: 18px; gap: 14px; }
}

@media (max-width: 540px) {
  .world-gold h2 { font-size: 23px; }
  .world-banner-action,
  .world-banner-action > * { width: 100%; }
  .world-gold-illustrated { min-height: 180px; }
  .world-gold-illustrated p { font-size: 15px; }
}

@media (min-width: 851px) and (max-width: 1300px) {
  .world-gold { padding: 16px; gap: 14px; }
}

.world-gold.cursor-pointer:hover { filter: brightness(1.1); }
.public-guide { min-height: 70vh; background: #061018; color: #f0ede6; padding: clamp(36px, 6vw, 80px) 24px; }
.public-guide-inner { max-width: 1160px; margin: 0 auto; }
.public-guide-heading { max-width: 760px; margin-bottom: 42px; }
.public-guide-heading h1 { color: #eed8ab; font: 400 clamp(2.3rem, 5vw, 4rem)/1.1 Georgia, serif; margin: 12px 0 18px; }
.public-guide-heading p, .public-guide-card p, .public-guide-example p, .public-guide-note p, .public-guide-next p { color: #c6c3d0; line-height: 1.65; }
.public-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.public-guide-card { display: flex; align-items: flex-start; gap: 18px; padding: 22px; border: 1px solid #344857; border-radius: 16px; background: #10212c; }
.public-guide-icon { width: 80px; height: 80px; flex: none; }
.public-guide-card h2, .public-guide-note h2 { color: #eed8ab; font: 500 1.4rem Georgia, serif; margin: 0 0 9px; }
.public-guide-card p, .public-guide-example p { margin: 0; }
.public-guide-example-list { display: grid; gap: 12px; }
.public-guide-table-wrap { overflow-x: auto; border: 1px solid #344857; border-radius: 14px; }
.public-guide-table { width: 100%; min-width: 780px; border-collapse: collapse; background: #10212c; text-align: left; }
.public-guide-table th, .public-guide-table td { padding: 15px 18px; vertical-align: top; border-bottom: 1px solid #344857; line-height: 1.5; }
.public-guide-table thead th { background: #192d3a; color: #eed8ab; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.public-guide-table tbody th { color: #f0ede6; font-weight: 600; min-width: 260px; }
.public-guide-table tbody td { color: #c6c3d0; }
.public-guide-table tbody tr:last-child th, .public-guide-table tbody tr:last-child td { border-bottom: 0; }
.public-guide-table .public-guide-xp { color: #eed8ab; white-space: nowrap; font-weight: 700; }
.public-guide-example { display: grid; grid-template-columns: 130px 1fr; gap: 20px; align-items: center; padding: 20px 24px; border: 1px solid #344857; border-radius: 12px; background: #10212c; }
.public-guide-example strong { color: #eed8ab; white-space: nowrap; }
.public-guide-note, .public-guide-next { margin-top: 28px; padding: 24px; border: 1px solid #695a3e; border-radius: 12px; background: #111f28; }
.public-guide-next a { display: inline-flex; align-items: center; gap: 8px; color: #eed8ab; font-weight: 600; }
.public-guide-next a:hover { text-decoration: underline; }
@media (max-width: 640px) { .public-guide-grid { grid-template-columns: 1fr; } .public-guide-example { grid-template-columns: 1fr; gap: 6px; } .public-guide-icon { width: 64px; height: 64px; } }
:root.light .public-guide { background: #f5f2e9; color: #263747; }
:root.light .public-guide-heading h1, :root.light .public-guide-card h2, :root.light .public-guide-note h2, :root.light .public-guide-example strong { color: #674a1d; }
:root.light .public-guide-heading p, :root.light .public-guide-card p, :root.light .public-guide-example p, :root.light .public-guide-note p, :root.light .public-guide-next p { color: #435367; }
:root.light .public-guide-card, :root.light .public-guide-example, :root.light .public-guide-note, :root.light .public-guide-next { background: #fffdf8; border-color: #cbb993; }
:root.light .public-guide-next a { color: #674a1d; }
:root.light .public-guide-table-wrap, :root.light .public-guide-table th, :root.light .public-guide-table td { border-color: #cbb993; }
:root.light .public-guide-table { background: #fffdf8; }
:root.light .public-guide-table thead th { background: #eee6d4; color: #674a1d; }
:root.light .public-guide-table tbody th { color: #263747; }
:root.light .public-guide-table tbody td { color: #435367; }
:root.light .public-guide-table .public-guide-xp { color: #674a1d; }

.public-guide-rating-key { display: none; }
.public-guide-effort { color: #6ee7c1; }
.public-guide-planning { color: #c4b5fd; }
:root.light .public-guide-effort { color: #047857; }
:root.light .public-guide-planning { color: #6d28d9; }

@media (max-width: 767px) {
  .public-guide-rating-key {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 700;
  }

  .public-guide-rating-key span::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: currentColor;
  }

  .public-guide-table-wrap {
    overflow: visible;
    border: 0;
  }

  .public-guide-table,
  .public-guide-table tbody {
    display: block;
    width: 100%;
    min-width: 0;
    background: transparent;
  }

  .public-guide-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .public-guide-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px 12px;
    padding: 16px;
    margin-bottom: 10px;
    border: 1px solid rgb(148 163 184 / 24%);
    border-radius: 14px;
    background: linear-gradient(90deg, rgb(217 174 83 / 55%) 0 3px, transparent 3px),
      linear-gradient(135deg, rgb(35 49 58 / 90%), rgb(17 30 39 / 95%));
    box-shadow: inset 0 1px rgb(255 255 255 / 4%), 0 4px 14px rgb(0 0 0 / 9%);
  }

  .public-guide-table tbody th,
  .public-guide-table tbody td {
    display: block;
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .public-guide-table tbody th::before,
  .public-guide-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: #a9b5c1;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
  }

  .public-guide-table tbody th {
    grid-column: 1;
    grid-row: 1;
    color: #f0f3f6;
    font-size: 14px;
    line-height: 1.45;
  }

  .public-guide-table tbody td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    font-size: 11px;
    text-align: right;
  }

  .public-guide-assessment {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }

  .public-guide-separator { display: none; }

  .public-guide-table tbody td .public-guide-effort,
  .public-guide-table tbody td .public-guide-planning {
    padding: 2px 6px;
    border: 1px solid currentColor;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
  }

  .public-guide-table tbody td .public-guide-effort { background: rgb(52 211 153 / 9%); }
  .public-guide-table tbody td .public-guide-planning { background: rgb(167 139 250 / 9%); }

  .public-guide-table tbody td:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    padding: 6px 10px;
    border: 1px solid rgb(217 174 83 / 32%);
    border-radius: 9px;
    background: rgb(217 174 83 / 10%);
    color: #eed8ab;
    text-align: center;
  }

  .public-guide-table tbody td:nth-child(3)::before { color: #d9ba77; }

  .public-guide-table tbody td:last-child {
    grid-column: 1;
    grid-row: 2;
    padding-top: 12px;
    border-top: 1px solid rgb(148 163 184 / 20%);
    color: #b6c1ca;
    line-height: 1.6;
  }

  :root.light .public-guide-table tbody tr {
    border-color: #d6c7a6;
    background: linear-gradient(90deg, #bb9143 0 3px, transparent 3px),
      linear-gradient(135deg, #fff, #faf7ef);
    box-shadow: inset 0 1px #fff, 0 4px 14px rgb(73 62 32 / 8%);
  }

  :root.light .public-guide-table tbody th::before,
  :root.light .public-guide-table tbody td::before { color: #637184; }
  :root.light .public-guide-table tbody td .public-guide-effort { background: #e3f5ec; }
  :root.light .public-guide-table tbody td .public-guide-planning { background: #f0eaff; }
  :root.light .public-guide-table tbody td:nth-child(3) { border-color: #d4b56d; background: #f7edcf; color: #795819; }
  :root.light .public-guide-table tbody td:nth-child(3)::before { color: #795819; }
  :root.light .public-guide-table tbody td:last-child { border-top-color: #e5ddcb; }
}
.ranks-explained {
  align-items: flex-start;
}

.ranks-explained-content {
  min-width: 0;
  flex: 1;
}

.ranks-explained h3 {
  margin-top: 24px;
  color: #eed8ab;
  font: 500 21px/1.3 Georgia, serif;
}

.ranks-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
  padding: 0;
  list-style: none;
}

.ranks-benefits li {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 17px 18px;
  border: 1px solid #bda16b4a;
  border-radius: 12px;
  background: #d9b56d0b;
}

.ranks-benefits strong {
  color: #eed8ab;
  font-size: 14px;
}

.ranks-benefits span {
  color: #b5b1cb;
  font-size: 13px;
  line-height: 1.6;
}

:root.light .ranks-explained h3,
:root.light .ranks-benefits strong { color: #674a1d; }
:root.light .ranks-benefits li { border-color: #cbb892; background: #f8f1e3; }
:root.light .ranks-benefits span { color: #536477; }

@media (max-width: 900px) {
  .ranks-benefits { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .ranks-explained { flex-direction: column; }
}
.heroic-slots {
  --slots-ink: #f4eee2;
  --slots-muted: #b9c4cc;
  --slots-accent: #e7c27d;
  --slots-line: #52616a;
  --slots-card: #12212b;
  color: var(--slots-ink);
}

:root.light .heroic-slots {
  --slots-ink: #243443;
  --slots-muted: #526273;
  --slots-accent: #795819;
  --slots-line: #c7b995;
  --slots-card: #fffdf8;
}

.heroic-slots-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  color: var(--slots-accent);
  font-size: 14px;
  font-weight: 600;
}

.heroic-slots-section { margin-top: 24px; }
.heroic-slots-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.heroic-slot {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 228px;
  padding: 17px;
  border: 1px solid color-mix(in srgb, var(--slots-line) 75%, transparent);
  border-radius: 14px;
  background: radial-gradient(ellipse at top left, color-mix(in srgb, var(--slots-accent) 7%, transparent), transparent 72%), linear-gradient(145deg, color-mix(in srgb, var(--slots-card) 96%, #203844), var(--slots-card));
  color: var(--slots-ink);
  box-shadow: 0 8px 24px #08131b10;
}
.heroic-slot-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  color: var(--slots-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  line-height: 1.3;
  text-transform: uppercase;
}
.heroic-slot-status {
  max-width: 65%;
  padding: 4px 8px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--slots-accent) 12%, transparent);
  color: var(--slots-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-align: right;
  text-transform: none;
}
.heroic-slot-empty {
  border-style: dashed;
  text-decoration: none;
  transition: border-color .15s, background .15s, transform .15s;
}
.heroic-slot-empty:hover {
  border-color: var(--slots-accent);
  background: color-mix(in srgb, var(--slots-card) 92%, var(--slots-accent));
  transform: translateY(-2px);
}
.heroic-slot-released {
  position: relative;
  overflow: hidden;
  border-color: #49dcb2;
  background: radial-gradient(circle at center, #49dcb22c, transparent 72%), var(--slots-card);
  box-shadow: 0 0 0 1px #49dcb255, 0 0 32px #49dcb233;
  animation: heroic-slot-release 2.2s ease-out both;
}
.heroic-slot-released::after {
  position: absolute;
  inset: -60%;
  border: 2px solid #49dcb2a8;
  border-radius: 50%;
  content: '';
  pointer-events: none;
  animation: heroic-slot-release-ring 1.1s ease-out both;
}
.heroic-slot-released .heroic-slot-plus {
  border-color: #49dcb2;
  background: #49dcb229;
  color: #72f2ca;
  animation: heroic-slot-release-icon .65s cubic-bezier(.2, 1.5, .4, 1) both;
}
.heroic-slot-released .heroic-slot-empty-center strong { color: #72f2ca; }
@keyframes heroic-slot-release {
  0% { transform: scale(.97); }
  25% { transform: scale(1.025); }
  50%, 100% { transform: scale(1); }
}
@keyframes heroic-slot-release-ring {
  from { opacity: .8; transform: scale(.25); }
  to { opacity: 0; transform: scale(1); }
}
@keyframes heroic-slot-release-icon {
  from { opacity: 0; transform: scale(.45) rotate(-30deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}
.heroic-slot-empty-center {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 10px 0;
  text-align: center;
}
.heroic-slot-plus {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--slots-accent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--slots-accent) 13%, transparent);
  color: var(--slots-accent);
}
.heroic-slot-plus svg { width: 28px; height: 28px; }
.heroic-slot-empty-center strong { font-size: 14px; line-height: 1.3; }
.heroic-slot-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--slots-accent);
  font-size: 12px;
  font-weight: 700;
}
.heroic-slot-action { margin-top: 22px; }
.heroic-slot-category-icon { width: 25px; height: 25px; margin-bottom: 8px; }
.heroic-slot-action h3 {
  color: var(--slots-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.heroic-slot-action p { margin-top: 5px; color: var(--slots-accent); font-size: 12px; }
.heroic-slot-description {
  display: -webkit-box;
  margin-top: 10px;
  overflow: hidden;
  color: var(--slots-muted);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.heroic-slot-footer {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
  font-size: 12px;
}
.heroic-slot-footer > span { color: var(--slots-muted); }
.heroic-slot-cooldown { color: var(--slots-accent); }
.heroic-slot-cooldown .heroic-slot-empty-center strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.heroic-slot-cooldown-caption { color: var(--slots-muted); font-size: 12px; line-height: 1.4; }
.heroic-slot-skip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  margin-top: 2px;
  padding: 5px 11px;
  border: 1px solid var(--slots-accent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--slots-accent) 11%, transparent);
  color: var(--slots-accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  transition: background .15s, transform .15s;
}
.heroic-slot-skip:hover:not(:disabled) { background: color-mix(in srgb, var(--slots-accent) 21%, transparent); transform: translateY(-1px); }
.heroic-slot-skip:disabled { opacity: .55; cursor: wait; }
.heroic-slot-skip:focus-visible { outline: 2px solid var(--slots-accent); outline-offset: 3px; }
.heroic-slot-origin {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--slots-line) 38%, transparent);
  color: var(--slots-muted);
  font-size: 12px;
}
.heroic-slot-origin a { display: inline-flex; align-items: center; gap: 2px; min-width: 0; color: var(--slots-accent); font-weight: 700; }
.heroic-slot-origin a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heroic-slot-origin a svg { flex-shrink: 0; }
.heroic-slot-footer a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  color: var(--slots-accent);
  font-weight: 700;
}
.heroic-slots a:focus-visible {
  outline: 2px solid var(--slots-accent);
  outline-offset: 3px;
}

@media (max-width: 480px) {
  .heroic-slots-grid { gap: 9px; }
  .heroic-slot { padding: 13px; min-height: 215px; }
  .heroic-slot-top { font-size: 11px; }
  .heroic-slot-action h3 { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .heroic-slot-empty { transition: none; }
  .heroic-slot-released, .heroic-slot-released::after, .heroic-slot-released .heroic-slot-plus { animation: none; }
  .heroic-slot-released::after { display: none; }
}
.guild-home { --home-bg:#111a23; --home-surface:#1a2530; --home-text:#f3eee3; --home-muted:#b7c0c8; --home-line:#33404b; --home-accent:#dcc18b; background:var(--home-bg); color:var(--home-text); min-height:100%; width:100%; }
:root.light .guild-home { --home-bg:#f6f2e9; --home-surface:#fffdf8; --home-text:#293746; --home-muted:#63706f; --home-line:#dfd8c9; --home-accent:#80632e; }
.guild-home--forest { --home-accent:#aacaac; }
.guild-home--celestial { --home-accent:#bfbee7; }
:root.light .guild-home--forest { --home-bg:#f0f3ec; --home-accent:#456b48; }
:root.light .guild-home--celestial { --home-bg:#f2f1f7; --home-accent:#646087; }
.guild-home-hero { height:clamp(280px,25vw,380px); position:relative; isolation:isolate; overflow:hidden; background:#26303a; }
.guild-home-hero-image { width:100%; height:100%; object-fit:cover; object-position:center 48%; position:absolute; inset:0; z-index:-2; }
.guild-home-hero-shade { position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(8,15,22,.28),transparent 35%,rgba(8,15,22,.16) 50%,rgba(8,15,22,.88)); }
.guild-home-back { position:absolute; top:24px; left:clamp(20px,4vw,56px); display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 15px; border:1px solid #ffffff36; background:#101a24b8; border-radius:30px; color:#fff4df; font-size:13px; }
.guild-home-hero-actions { position:absolute; top:24px; right:clamp(20px,4vw,56px); z-index:1; display:flex; align-items:center; gap:12px; }
.guild-home-theme-label { color:#fff2da; text-shadow:0 1px 5px #000; font-size:12px; letter-spacing:.07em; }
.guild-home-maximize { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; border:1px solid #ffffff55; border-radius:50%; background:#101a24b8; color:#fff4df; }
.guild-home-maximize:hover { background:#101a24e8; }
.guild-home-image-dialog { position:fixed; inset:0; box-sizing:border-box; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:12px; border:0; background:#080d12; color:#fff; overflow:hidden; }
.guild-home-image-dialog[open] { display:block; }
.guild-home-image-dialog::backdrop { background:#080d12ed; }
.guild-home-image-dialog img { display:block; width:100%; height:100%; object-fit:contain; }
.guild-home-image-close { position:absolute; top:clamp(12px,2vw,28px); right:clamp(12px,2vw,28px); display:grid; place-items:center; width:44px; height:44px; border:1px solid #ffffff66; border-radius:50%; background:#101a24d9; color:#fff; }
.guild-home-image-close:hover { background:#263747; }
.guild-home-identity { position:absolute; bottom:30px; left:clamp(20px,4vw,56px); right:24px; display:flex; align-items:center; gap:20px; color:#fff5e2; }
.guild-home-emblem { display:grid; place-items:center; width:80px; height:92px; flex:none; filter:drop-shadow(0 3px 6px #0008); }
.guild-home-emblem img { width:100%; height:100%; object-fit:contain; }
.guild-home-emblem > svg { width:60px; height:60px; }
.guild-home-eyebrow { font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:#e4d8c3; margin:0 0 8px; }
.guild-home .guild-home-identity h1 { color:#fff5e2; font-family:Georgia,serif; font-size:clamp(32px,4vw,52px); font-weight:500; line-height:1.12; margin:0; overflow-wrap:anywhere; }
.guild-home-hero-facts { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:10px 0 0; color:#e4d8c3; font-size:13px; }
.guild-home-body { max-width:1320px; margin:auto; padding:0 clamp(20px,4vw,56px) 30px; }
.guild-home-arrival { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:center; border-bottom:1px solid var(--home-line); padding:26px 0; }
.guild-home-section-kicker { display:flex; gap:7px; align-items:center; font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--home-accent); font-weight:600; }
.guild-home-update p { margin:7px 0 4px; font-family:Georgia,serif; font-size:20px; }
.guild-home-muted { color:var(--home-muted); font-size:12px; }
.guild-home-news-link { display:flex; align-items:center; gap:12px; min-height:44px; text-align:left; font:500 20px Georgia,serif; color:var(--home-text); max-width:100%; }
.guild-home-news-link span { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.guild-home-balance { display:flex; align-items:center; gap:14px; text-align:left; border-left:1px solid var(--home-line); padding:8px 0 8px 28px; color:var(--home-accent); min-height:68px; }
.guild-home-balance span { display:grid; gap:4px; }
.guild-home-balance small { font-size:11px; color:var(--home-muted); font-weight:400; }
.guild-home-balance strong { font:500 24px Georgia,serif; color:var(--home-text); }
.guild-home-leave { display:inline-flex; align-items:center; justify-content:center; flex:none; gap:8px; min-height:44px; padding:0 14px; border:1px solid #c78282; border-radius:30px; color:#ffd1d1; background:#281719d9; font-size:12px; font-weight:600; }
.guild-home .guild-home-leave:not(:disabled):hover { color:#fff; background:#703030e8; }
.guild-home-leave:disabled { opacity:.6; }
.guild-home-rooms { padding:32px 0; }
.guild-home-section-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:22px; }
.guild-home-section-heading h2 { font:500 29px Georgia,serif; margin:6px 0 0; }
.guild-home-room-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.guild-home-room { display:flex; flex-direction:column; background:var(--home-surface); border:1px solid var(--home-line); border-radius:12px; text-align:left; overflow:hidden; min-width:0; color:var(--home-text); transition:border-color .2s,box-shadow .2s; }
.guild-home-room:not(:disabled):hover { border-color:var(--home-accent); box-shadow:0 6px 22px #00000012; }
.guild-home-room-art { position:relative; width:100%; flex:none; aspect-ratio:1.8; overflow:hidden; }
.guild-home-room-art img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.guild-home-forge-emblem { position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(90deg,#081018a8,#08101836); pointer-events:none; }
.guild-home-room-art .guild-home-forge-emblem img { width:30%; height:76%; object-fit:contain; filter:drop-shadow(0 4px 8px #000b); }
.guild-home-room:not(:disabled):hover .guild-home-room-art img { transform:scale(1.035); }
.guild-home-room.is-locked { border-color:var(--home-line); color:var(--home-muted); opacity:.7; }
.guild-home-room.is-unpurchased { filter:grayscale(1); opacity:.72; }
.guild-home-room.is-locked .guild-home-room-art img { filter:grayscale(1); }
.guild-home-room.is-locked .guild-home-room-title > svg { color:var(--home-muted); }
.guild-home-room.is-locked .guild-home-room-arrow { display:none; }
.guild-home-room-lock { position:absolute; top:10px; right:10px; display:flex; gap:5px; align-items:center; background:#14202be8; border:1px solid #e8ddc244; border-radius:20px; padding:5px 8px; color:#f4e9d4; font-size:10px; }
.guild-home-room-copy { padding:16px; }
.guild-home-room-title { display:flex; align-items:center; gap:8px; }
.guild-home-room-title > svg { color:var(--home-accent); flex:none; }
.guild-home-room-title h3 { font:500 19px Georgia,serif; margin:0; overflow-wrap:anywhere; }
.guild-home-room-arrow { margin-left:auto; }
.guild-home-room-copy p { font-size:12px; line-height:1.6; color:var(--home-muted); margin:7px 0 0; }
.guild-home-shop { display:flex; align-items:center; gap:26px; width:100%; text-align:left; border-top:1px solid var(--home-line); border-bottom:1px solid var(--home-line); padding:24px 0; color:var(--home-text); }
.guild-home-shop > img { width:170px; aspect-ratio:1.5; object-fit:cover; border-radius:9px; }
.guild-home-shop h2 { font:500 24px Georgia,serif; margin:7px 0; }
.guild-home-shop p { color:var(--home-muted); font-size:12px; margin:0; }
.guild-home-shop-action { display:flex; align-items:center; gap:8px; color:var(--home-accent); font-size:13px; margin-left:auto; flex:none; }
.guild-home-tools { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 24px; padding-top:20px; }
.guild-home-applications { margin:0 auto 16px; color:var(--home-text); }
.guild-home-applications h2 { display:flex; align-items:center; gap:10px; font:500 24px Georgia,serif; margin:0; padding:24px 0 12px; border-top:1px solid var(--home-line); }
.guild-home-applications h2 svg { color:var(--home-accent); flex:none; }
.guild-home-applications > div { padding:8px 0 0; }
.guild-home-tools button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; color:var(--home-muted); font-size:12px; }
.guild-home button { cursor:pointer; }
.guild-home button:disabled { cursor:not-allowed; }
.guild-home :is(.guild-home-news-link,.guild-home-balance,.guild-home-shop,.guild-home-tools button) { border-radius:0; background:transparent; }
.guild-home button:not(:disabled):hover,.guild-home-tools button:hover { color:var(--home-accent); }
.guild-home :is(button,a):focus-visible { outline:3px solid var(--home-accent); outline-offset:4px; }
.guild-home-shell { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain; }
.guild-subpage .guild-home-room-scene { object-position:center; }
.guild-home-mobile-room { display:none; }
@media (max-width:767px) {
  .guild-home-mobile-room { display:flex; position:relative; isolation:isolate; align-items:flex-end; min-height:170px; padding:20px; overflow:hidden; border-radius:12px; background:#14202b; }
  .guild-home-mobile-room img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
  .guild-home-mobile-room::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(transparent,#101922e6); }
  .guild-subpage .guild-home-mobile-room h1,:root.light .guild-subpage .guild-home-mobile-room h1 { color:#fff5e2; font:500 25px/1.2 Georgia,serif; margin:0; overflow-wrap:anywhere; }
}
@media (min-width:1600px) { .guild-home-hero { height:380px; } }
@media (max-width:1050px) { .guild-home-room-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .guild-home-shop { gap:16px; } .guild-home-shop > img { width:125px; } .guild-home-shop-action { font-size:0; } }
@media (max-width:600px) {
  .guild-home-hero { height:270px; }
  .guild-home-hero-image { object-position:50% 45%; }
  .guild-home-back { top:16px; left:16px; min-height:40px; font-size:12px; padding:0 12px; }
  .guild-home-hero-actions { top:16px; right:16px; gap:8px; }
  .guild-home-theme-label { display:none; }
  .guild-home-leave { width:44px; padding:0; border-radius:50%; }
  .guild-home-leave span { display:none; }
  .guild-home-maximize { width:40px; height:40px; }
  .guild-home-identity { bottom:22px; left:18px; right:18px; gap:12px; }
  .guild-home-emblem { width:54px; height:66px; }
  .guild-home-eyebrow { font-size:9px; letter-spacing:.08em; }
  .guild-home .guild-home-identity h1 { font-size:32px; }
  .guild-home-hero-facts { font-size:12px; }
  .guild-home-body { padding:0 16px 20px; }
  .guild-home-arrival { grid-template-columns:1fr; gap:18px; padding:22px 0; }
  .guild-home-balance { border-left:0; border-top:1px solid var(--home-line); padding:16px 0 0; width:100%; }
  .guild-home-balance > svg:last-child { margin-left:auto; }
  .guild-home-balance span { display:flex; flex:1; align-items:center; justify-content:space-between; gap:12px; }
  .guild-home-balance span > small { max-width:110px; font-size:11px; }
  .guild-home-balance strong { font-size:21px; white-space:nowrap; }
  .guild-home-section-heading > span { display:none; }
  .guild-home-section-heading h2 { font-size:27px; }
  .guild-home-room-grid { gap:12px; }
  .guild-home-room-art { aspect-ratio:1.35; }
  .guild-home-room-copy { padding:12px 10px; }
  .guild-home-room-title { gap:6px; }
  .guild-home-room-title h3 { font-size:16px; }
  .guild-home-room-title > svg { width:15px; height:15px; }
  .guild-home-room-arrow { display:none; }
  .guild-home-room-copy p { font-size:11px; line-height:1.5; }
  .guild-home-room-lock { top:7px; right:7px; font-size:9px; }
  .guild-home-shop { display:grid; grid-template-columns:86px 1fr; gap:14px; }
  .guild-home-shop > img { width:86px; height:110px; }
  .guild-home-shop h2 { font-size:20px; }
  .guild-home-shop-action { display:none; }
  .guild-home-tools { justify-content:flex-start; gap:0 18px; }
}
@media (max-width:359px) { .guild-home-room-grid { grid-template-columns:1fr; } .guild-home-room-art { aspect-ratio:1.8; } .guild-home-balance { gap:8px; } }
@media (prefers-reduced-motion:reduce) { .guild-home-room,.guild-home-room-art img { transition:none; } }
.guild-public-shell { background:#111a23; color:#f3eee3; --public-surface:#1a2530; --public-line:#3f4b55; --public-muted:#b7c0c8; --public-accent:#dcc18b; --public-active:#30332e; }
:root.light .guild-public-shell { background:#f6f2e9; color:#293746; --public-surface:#fffdf8; --public-line:#d5cbb7; --public-muted:#63706f; --public-accent:#80632e; --public-active:#eee2c9; }
.guild-public-page { width:100%; max-width:1200px; margin:0 auto; padding:28px clamp(16px,3vw,40px) 48px; }
.guild-public-back { display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-bottom:16px; color:var(--public-accent); font-size:13px; }
.guild-public-hero { position:relative; isolation:isolate; display:flex; align-items:flex-end; min-height:360px; padding:100px 32px 32px; overflow:hidden; background:#18252b; border:1px solid var(--public-line); }
.guild-public-hall { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center 45%; }
.guild-public-hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#07121d18 15%,#07121d55 45%,#07121df2 100%); }
.guild-public-hall-label { position:absolute; top:22px; right:22px; padding:7px 12px; background:#101a24c9; border:1px solid #ffffff40; color:#fff2da; font-size:12px; }
.guild-public-identity { display:flex; align-items:center; gap:24px; min-width:0; color:#fff5e2; }
.guild-public-identity > div:last-child { min-width:0; }
.guild-public-identity p { margin:0 0 8px; font-size:11px; text-transform:uppercase; letter-spacing:.15em; color:#e4d8c3; }
.guild-public-identity h1 { margin:0; font:500 clamp(30px,4vw,52px)/1.12 Georgia,serif; color:#fff5e2; overflow-wrap:anywhere; }
.guild-public-identity span { display:flex; align-items:center; gap:8px; margin-top:14px; font-size:13px; color:#e4d8c3; }
.guild-public-emblem { position:relative; display:grid; place-items:center; width:100px; height:116px; flex:none; background:#14202abe; border:1px solid #ddc08b65; box-shadow:0 8px 28px #0005; }
.guild-public-emblem.has-bronze-frame { border:3px solid #b8874b; }
.guild-public-emblem > svg { width:54px; height:54px; color:#dcc18b; }
.guild-public-emblem img { position:absolute; width:100%; height:100%; padding:10px; object-fit:contain; background:#14202a; }
.guild-public-about { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:center; padding:28px 32px; background:var(--public-surface); border:1px solid var(--public-line); border-top:0; }
.guild-public-kicker { margin:0 0 10px; color:var(--public-accent); font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.guild-public-description { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:15px; line-height:1.75; }
.guild-public-leader { display:flex; gap:8px; align-items:baseline; color:var(--public-muted); font-size:12px; margin:18px 0 0; overflow-wrap:anywhere; }
.guild-public-leader svg { flex:none; align-self:center; color:var(--public-accent); }
.guild-public-apply { max-width:300px; }
.guild-public-apply .world-button { min-height:48px; border-radius:0; }
.guild-public-nav { display:grid; grid-template-columns:1fr 1fr; margin:28px 0; border:1px solid var(--public-line); background:var(--public-surface); }
.guild-public-nav a { display:flex; justify-content:center; align-items:center; gap:10px; min-width:0; min-height:60px; padding:14px 12px; text-align:center; font-size:13px; font-weight:600; color:var(--public-muted); border-radius:0; }
.guild-public-nav a + a { border-left:1px solid var(--public-line); }
.guild-public-nav svg { flex:none; }
.guild-public-nav a[aria-current=page] { background:var(--public-active); color:var(--public-accent); box-shadow:inset 0 -3px var(--public-accent); }
.guild-public-nav a:hover { color:var(--public-accent); background:var(--public-active); }
.guild-public-page :is(a,button):focus-visible { outline:2px solid var(--public-accent); outline-offset:3px; }
.guild-public-page .guild-public-content { padding:0; max-width:none; width:100%; margin:0; }
:root.light .guild-public-content .guild-overview .world-panel { background:#fffdf8; border-color:#c9b98f; color:#263747; box-shadow:0 4px 16px rgba(73,62,32,.08); }
:root.light .guild-public-content .guild-overview .world-panel h2 { color:#543d10; }
:root.light .guild-public-content .guild-overview .text-amber-100 { color:#674a1d; }
:root.light .guild-public-content .guild-overview .text-amber-200 { color:#795819; }
:root.light .guild-public-content .guild-overview :is(.text-slate-400,.text-slate-500) { color:#536477; }
:root.light .guild-public-content .guild-overview .world-medallion { color:#806021; border-color:#b5985b; }
:root.light .guild-public-content .guild-overview progress { background:#ddd8cd; }
:root.light .guild-public-content .guild-overview select { background:#fffdf8; border-color:#aaad9e; color:#263747; }
:root.light .guild-public-content .guild-overview .dashboard-stat-strip { background:#f8f4ea; border-color:#c9b98f; }
:root.light .guild-public-content .guild-overview .dashboard-stat { color:#263747; }
:root.light .guild-public-content .guild-overview .dashboard-stat-label { color:#536477; }
@media(max-width:600px) {
  .guild-public-page { padding-top:16px; }
  .guild-public-hero { min-height:320px; padding:90px 20px 24px; }
  .guild-public-identity { gap:16px; align-items:flex-start; }
  .guild-public-emblem { width:68px; height:82px; }
  .guild-public-about { grid-template-columns:minmax(0,1fr); gap:22px; padding:24px 20px; }
  .guild-public-apply { max-width:none; }
  .guild-public-apply .world-button { width:100%; justify-content:center; }
  .guild-public-nav { margin:24px 0; }
  .guild-public-nav a { font-size:12px; gap:7px; }
}
/* Hall portraits and parchment sit behind the original renown ornaments. */
.guild-directory-page .world-content { padding:28px clamp(16px,3vw,36px); }
.guild-directory-toolbar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-bottom:20px; border-bottom:1px solid #52525b66; }
.guild-directory-toolbar > div:first-child { min-width:0; }
.guild-directory-toolbar h2 { margin:0; }
.guild-directory-search { position:relative; flex:0 1 340px; min-width:220px; }
.guild-directory-search input { width:100%; }
.guild-directory-founding { padding:20px 22px; border:1px solid #d5a74755; border-radius:14px; background:linear-gradient(115deg,#bd862514,#0d25301c 55%,#bd862510); box-shadow:inset 0 1px #f9d38813; }
.guild-directory-founding-header { display:flex; align-items:center; justify-content:space-between; gap:16px 24px; margin-bottom:16px; }
.guild-directory-founding-header h3 { margin:0 0 3px; color:#f4ead7; font-size:17px; font-weight:700; }
.guild-directory-founding-header p { margin:0; color:#aeb5bd; font-size:13px; }
.guild-directory-founding-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:9px 16px; flex:none; border:1px solid #fbbf24; border-radius:9px; background:#fbbf24; color:#18181b; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; transition:background .2s,border-color .2s,transform .2s; }
.guild-directory-founding-button:not(:disabled):hover { background:#fcd34d; border-color:#fcd34d; transform:translateY(-1px); }
.guild-directory-founding-button:disabled { cursor:not-allowed; border-color:#71717a66; background:#71717a3b; color:#a1a1aa; }
.guild-directory-founding .guild-founding-requirements { margin:0; }
.guild-directory-founding .guild-founding-requirements-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:8px; margin:0; padding:0; list-style:none; }
.guild-directory-founding .guild-founding-requirements-list li { display:flex; align-items:flex-start; gap:9px; min-width:0; margin:0; padding:10px 12px; border:1px solid #d5a74730; border-radius:8px; background:#0818228c; font-size:12px; line-height:1.45; }
.guild-directory-founding .guild-founding-requirements-list li.is-met { border-color:#34d39945; background:#064e3b24; }
.guild-directory-founding .guild-founding-requirement-icon { flex:none; display:grid; place-items:center; width:18px; height:18px; border:1px solid currentColor; border-radius:50%; line-height:1; font-size:13px; }
.guild-directory-founding .guild-founding-membership-note { margin:12px 0 0; color:#aeb5bd; font-size:11px; line-height:1.4; }
:root.light .guild-directory-founding { background:linear-gradient(115deg,#fff8e8,#f6f4ed); border-color:#c78d3c66; }
:root.light .guild-directory-founding-header h3 { color:#43331c; }
:root.light .guild-directory-founding-header p,
:root.light .guild-directory-founding .guild-founding-membership-note { color:#615c52; }
:root.light .guild-directory-founding .guild-founding-requirements-list li { background:#fffaf0; color:#8a5b00; }
:root.light .guild-directory-founding .guild-founding-requirements-list li.is-met { background:#e9f8ef; color:#087348; }
:root.light .guild-directory-founding-button:disabled { background:#e4e1da; color:#77736b; }
.guild-directory-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); gap:var(--card-gap); align-items:stretch; }
/* A rectangular card shadow protrudes beyond the transparent frame artwork. */
.guild-directory-card.guild-directory-card--showcase { aspect-ratio:auto; width:100%; max-width:420px; justify-self:center; min-width:0; display:flex; flex-direction:column; padding:155px 32px 36px; isolation:isolate; box-shadow:none !important; --card-paper:#182630; --card-ink:#f0e5ce; --card-muted:#b6bfbf; --card-gold:#dec18a; }
:root.light .guild-directory-card.guild-directory-card--showcase { --card-paper:#fffaf0; --card-ink:#423a2c; --card-muted:#6e7168; --card-gold:#87612c; }
.guild-directory-card--showcase > .guild-directory-surface { position:absolute; inset:5%; z-index:-2; background:var(--card-paper); }
.guild-directory-card--showcase > .guild-directory-hall { position:absolute; z-index:-1; top:5%; left:5%; width:90%; height:220px; object-fit:cover; object-position:center 43%; mask-image:linear-gradient(180deg, #000 75%, transparent 100%); }
.guild-directory-card.guild-directory-card--showcase > .guild-card-inner { position:relative; inset:auto; padding:0; overflow:visible; gap:16px; flex:1; z-index:6; }
.guild-directory-card--showcase .guild-directory-content { display:flex; flex-direction:column; gap:14px; padding-top:36px; }
.guild-directory-card--showcase > .guild-directory-stage-label { position:absolute; z-index:6; top:9%; left:50%; transform:translateX(-50%); color:var(--card-ink); font-size:10px; text-transform:uppercase; letter-spacing:.12em; white-space:nowrap; pointer-events:none; }
.guild-directory-card.guild-directory-card--showcase .guild-directory-heading { padding:0; }
.guild-directory-card.guild-directory-card--showcase .guild-directory-identity { display:flex; flex-direction:row; align-items:center; gap:12px; min-width:0; }
.guild-directory-card--showcase .guild-directory-name { min-width:0; }
.guild-directory-card.guild-directory-card--showcase h3 { color:var(--card-ink); font:600 23px/1.15 Georgia,serif; margin:0; }
.guild-directory-card.guild-directory-card--showcase .guild-directory-emblem { width:58px; height:70px; padding:6px 6px 12px; flex:none; animation:none; }
.guild-directory-card--showcase .guild-membership-mark { font-size:9px; line-height:1.4; margin-top:7px; letter-spacing:.04em; color:var(--card-gold); }
.guild-directory-card--showcase .guild-membership-mark svg { flex:none; width:12px; }
.guild-directory-card.guild-directory-card--showcase .guild-directory-description { margin:0; font-size:13px; line-height:1.6; color:var(--card-muted); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; min-height:3.2em; overflow-wrap:anywhere; }
.guild-directory-card--showcase .guild-directory-stat-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid #ad926b50; border-bottom:1px solid #ad926b50; gap:0; padding:8px 0; }
.guild-directory-card--showcase .guild-directory-stat { display:flex; align-items:center; gap:9px; padding:7px 4px; min-width:0; color:var(--card-ink); }
.guild-directory-card--showcase .guild-directory-stat svg { width:17px; height:17px; flex:none; color:var(--card-gold); }
.guild-directory-card--showcase .guild-directory-stat span { min-width:0; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.guild-directory-card--showcase .guild-directory-stat small { display:block; color:var(--card-muted); font-size:10px; font-weight:400; line-height:1.4; }
.guild-directory-card--showcase .guild-directory-actions { margin:0; padding:0; }
.guild-directory-card--showcase .guild-directory-actions .world-button,
.guild-directory-card--showcase .guild-directory-enter { border:1px solid #ad926b80; border-radius:0; min-height:42px; padding:8px 10px; font-size:12px; color:var(--card-gold); }
.guild-directory-card--showcase .guild-directory-enter { display:flex; justify-content:space-between; align-items:center; gap:8px; border:0; background:none; box-shadow:none; }
.guild-directory-card--showcase > .guild-deco-overlay { z-index:5; }
.guild-directory-card--showcase .guild-deco-frame { object-fit:fill; }
.guild-directory-card--showcase:focus-visible { outline:2px solid var(--card-gold); outline-offset:4px; }

/* Legendary cards use the existing rune frame with its own light and material palette. */
.guild-directory-card--showcase.guild-stage-4 {
  --card-paper:#101d30;
  --card-ink:#f7f4e8;
  --card-muted:#b9cbda;
  --card-gold:#aee9ff;
}
.guild-directory-card--showcase.guild-stage-4 > .guild-directory-surface {
  background:radial-gradient(ellipse at 50% 17%,#36577a88,transparent 54%),linear-gradient(155deg,#1a2d42,#101c30 55%,#0b1426);
}
.guild-directory-card--showcase.guild-stage-4 .guild-directory-stage-label { color:#f6eac9; }
.guild-directory-card--showcase.guild-stage-4 .guild-directory-stage-label::before { content:"✦"; color:#9ce7ff; margin-right:7px; }
.guild-directory-card--showcase.guild-stage-4 h3 { color:#f8f4e8; text-shadow:none; }
.guild-directory-card--showcase.guild-stage-4 .guild-directory-emblem {
  background:linear-gradient(145deg,#355478,#1c2b58 48%,#171636);
  color:#dbf7ff;
  filter:none;
  box-shadow:none;
}
.guild-directory-card--showcase.guild-stage-4 .guild-directory-stat-grid {
  border:0;
  background:linear-gradient(135deg,#43729222,#12254133 55%,#d1b66e12);
  padding:8px;
}
.guild-directory-card--showcase.guild-stage-4 .guild-directory-stat svg { color:#9ce5fc; filter:none; }
.guild-directory-card--showcase.guild-stage-4 .guild-directory-actions .world-button {
  border-color:#89d4e7a6;
  background:linear-gradient(105deg,#1b3e58dd,#1b2d48dd 60%,#665a3a88);
  color:#e8f8ff;
}
.guild-directory-card--showcase.guild-stage-4 .guild-directory-enter { color:#e8f8ff; }
:root.light .guild-directory-card--showcase .guild-directory-enter { color:var(--card-ink, #243954); font-weight:600; }
:root.light .guild-directory-card--showcase.guild-stage-4 { --card-ink:#243954; --card-muted:#52697a; --card-gold:#1e6889; }
:root.light .guild-directory-card--showcase.guild-stage-4 > .guild-directory-surface { background:linear-gradient(150deg,#fbf9f0,#e6eef2 62%,#d7e2ec); filter:none; }
:root.light .guild-directory-card--showcase.guild-stage-4 .guild-directory-enter { color:#163e54; font-weight:600; }
:root.light .guild-directory-card--showcase.guild-stage-4 .guild-directory-stage-label { color:#243954; }
:root.light .guild-directory-card--showcase.guild-stage-4 h3 { color:#243954; text-shadow:none; }
:root.light .guild-directory-card--showcase.guild-stage-4 .guild-directory-emblem { background:linear-gradient(145deg,#355478,#202e5b); color:#e5f9ff; filter:none; box-shadow:none; }
:root.light .guild-directory-card--showcase.guild-stage-4 .guild-directory-stat-grid { background:#d7eaf066; }
:root.light .guild-directory-card--showcase.guild-stage-4 .guild-directory-stat svg { color:#246b8a; filter:none; }
@media(max-width:600px) {
  .guild-directory-page .world-content { padding:24px; }
  .guild-directory-toolbar { flex-direction:column; align-items:stretch; gap:15px; }
  .guild-directory-search { flex:none; min-width:0; }
  .guild-directory-founding-header { align-items:stretch; flex-direction:column; }
  .guild-directory-founding-button { width:100%; }
  .guild-directory-founding .guild-founding-requirements-list { grid-template-columns:1fr; }
  .guild-directory-grid { gap:var(--card-gap); }
}
.category-showcase {
  --category-ink: #eed8ab;
  --category-muted: #c6c3d0;
  --category-line: #bda16b40;
  --category-glow: #d9b56d1a;
  margin-top: 40px;
}
.category-showcase-gallery { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 14px; }
.category-showcase-choice { position: relative; display: flex; align-items: center; flex-direction: column; min-width: 0; padding: 8px 4px 16px; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--category-muted); cursor: pointer; font: inherit; text-align: center; border-radius: 4px; }
.category-showcase-medallion { display: grid; place-items: center; width: min(100%, 150px); aspect-ratio: 1; position: relative; background: radial-gradient(circle, var(--category-glow), transparent 68%); }
.category-showcase-medallion img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px #0005); transition: transform .25s ease, filter .25s ease; }
.category-showcase-number { margin: 5px 0 7px; color: var(--category-ink); opacity: .65; font-size: 10px; letter-spacing: .18em; }
.category-showcase-name { max-width: 20ch; font-size: 14px; line-height: 1.5; }
.category-showcase-choice[aria-pressed="true"] { border-bottom-color: var(--category-ink); color: var(--category-ink); background: linear-gradient(0deg, var(--category-glow), transparent 55%); }
.category-showcase-choice:hover img { transform: translateY(-5px) scale(1.06); filter: drop-shadow(0 8px 18px #d9b56d35); }
.category-showcase-choice:focus-visible { outline: 2px solid var(--category-ink); outline-offset: 5px; }
.category-showcase-detail { display: grid; grid-template-columns: minmax(200px, .8fr) 1.4fr; align-items: center; gap: 48px; padding: 40px clamp(12px, 4vw, 56px); margin-top: 36px; border-block: 1px solid var(--category-line); background: radial-gradient(ellipse at 20% 50%, var(--category-glow), transparent 65%); }
.category-showcase-art { position: relative; display: grid; place-items: center; aspect-ratio: 1; width: min(100%, 280px); justify-self: center; }
.category-showcase-art img { position: relative; width: 90%; height: 90%; object-fit: contain; filter: drop-shadow(0 15px 25px #0004); }
.category-showcase-orbit { position: absolute; inset: 3%; border: 1px solid var(--category-line); border-radius: 50%; }
.category-showcase-orbit::before { content: ''; position: absolute; inset: 12px; border: 1px dashed var(--category-line); border-radius: 50%; }
.category-showcase-orbit::after { content: '◆'; position: absolute; left: 50%; top: -10px; transform: translateX(-50%); color: var(--category-ink); font-size: 12px; }
.category-showcase-eyebrow { color: var(--category-ink); font-size: 10px; text-transform: uppercase; letter-spacing: .18em; }
.category-showcase-story h3 { margin: 14px 0; color: var(--category-ink); font: 400 clamp(1.8rem, 3vw, 2.7rem)/1.15 Georgia, serif; overflow-wrap: anywhere; }
.category-showcase-story p { margin: 0; color: var(--category-muted); line-height: 1.75; max-width: 52ch; }
.category-showcase-xp { display: flex; align-items: center; gap: 10px; margin-top: 24px; color: var(--category-ink); font-size: 12px; }
.category-showcase-xp > span { font-size: 24px; }
:root.light .category-showcase { --category-ink: #674a1d; --category-muted: #435367; --category-line: #98763b40; --category-glow: #b38a3420; }
@media (max-width: 800px) {
  .category-showcase-gallery { gap: 20px 8px; }
  .category-showcase-name { font-size: 12px; }
  .category-showcase-detail { gap: 24px; }
}
@media (max-width: 600px) {
  .category-showcase-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .category-showcase-medallion { width: 120px; }
  .category-showcase-name { font-size: 13px; }
  .category-showcase-detail { grid-template-columns: 1fr; gap: 24px; padding: 28px 8px; }
  .category-showcase-art { width: 190px; }
  .category-showcase-story { text-align: center; }
  .category-showcase-xp { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .category-showcase-medallion img { transition: none; }
  .category-showcase-choice:hover img { transform: none; }
}
.group-action-guide { width: 100%; min-width: 0; max-width: 1000px; box-sizing: border-box; margin: 0 auto; padding: 1.5rem clamp(1rem, 3vw, 2rem) 4rem; color: var(--zinc-100); line-height: 1.65; overflow-wrap: anywhere; }
.group-guide-back { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--indigo-400); }
.group-guide-header { display: flex; align-items: flex-start; gap: 1rem; margin: 1.5rem 0; }
.group-guide-header > svg { flex-shrink: 0; color: var(--indigo-400); margin-top: .3rem; }
.group-action-guide h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 750; line-height: 1.2; margin-bottom: 1rem; }
.group-action-guide h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: 1rem; }
.group-action-guide h3 { font-size: 1rem; font-weight: 700; margin-bottom: .35rem; }
.group-action-guide p { color: var(--zinc-300); }
.group-guide-eyebrow { color: var(--indigo-400) !important; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .5rem; }
.group-guide-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0; }
.group-guide-nav a { padding: .6rem 1rem; border: 1px solid var(--zinc-600); border-radius: 2rem; background: var(--zinc-900); }
.group-action-guide a:focus-visible, .group-guide-table:focus-visible { outline: 2px solid var(--indigo-400); outline-offset: 3px; }
.group-action-guide section { scroll-margin-top: 100px; margin-top: 2rem; }
.group-guide-steps { display: grid; gap: 1rem; list-style: none; padding: 0; }
.group-guide-steps li { display: flex; gap: 1rem; padding: 1.25rem; background: var(--zinc-900); border: 1px solid var(--zinc-700); border-radius: 1rem; }
.group-guide-number { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 50%; color: var(--indigo-400); border: 1px solid currentColor; font-weight: 700; }
.group-guide-card { padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--zinc-700); border-radius: 1rem; background: var(--zinc-900); }
.group-guide-detail + .group-guide-detail { border-top: 1px solid var(--zinc-700); margin-top: 1rem; padding-top: 1rem; }
.group-guide-card ul { list-style: disc; padding-left: 1.3rem; margin: 1rem 0; }
.group-guide-card li + li { margin-top: .6rem; }
.group-guide-formula { padding: 1rem; margin: 1rem 0; border-left: 3px solid var(--indigo-400); background: var(--zinc-800); font-weight: 700; }
.group-guide-table { max-width: 100%; overflow-x: auto; margin: 1rem 0; }
.group-guide-table table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.group-guide-table caption { text-align: left; margin-bottom: .6rem; font-weight: 700; }
.group-guide-table th, .group-guide-table td { text-align: left; padding: .7rem; border-bottom: 1px solid var(--zinc-700); min-width: 6rem; }
.group-guide-table thead { color: var(--indigo-400); }
.group-guide-note { padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--zinc-700); }
@media (max-width: 480px) { .group-guide-header { display: block; } .group-guide-header > svg { margin-bottom: .8rem; } .group-guide-steps li { padding: 1rem; gap: .7rem; } }
/* Guild routes have a flush parent: no compensating negative WorldPage margins. */
.world-page.guild-room-page {
  --room-paper: #0b1720;
  --room-surface: #13232e;
  --room-line: #30424d;
  --room-text: #eee5d3;
  --room-muted: #adbbc4;
  --room-accent: #d9bc7d;
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1;
  grid-template-columns: clamp(240px, 29%, 420px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  background: var(--room-paper);
  color: var(--room-text);
}

:root.light .world-page.guild-room-page {
  --room-paper: #f5f2e9;
  --room-surface: #fffdf7;
  --room-line: #dbd2be;
  --room-text: #36434a;
  --room-muted: #66716f;
  --room-accent: #795819;
}

/* The trophy counters use a dark translucent fill in the default theme. */
:root.light .guild-trophy-room .guild-trophy-stat {
  background: #fffaf0;
  border-color: #d7bd89;
  box-shadow: 0 2px 8px #493e2010;
}
:root.light .guild-trophy-room .guild-trophy-stat strong { color: #263747; }
:root.light .guild-trophy-room .guild-trophy-stat span { color: #536477; }
:root.light .guild-trophy-room .guild-trophy-stat svg.text-amber-300 { color: #a65b09; }
:root.light .guild-trophy-room .guild-trophy-stat svg.text-indigo-300 { color: #4f5fb5; }

/* Keep the app toolbar in normal flow; rooms start below it at every width. */
.world-app-main:has(.world-page.guild-room-page) > .world-topbar {
  position: relative;
  inset: auto;
  flex-shrink: 0;
  background: #0b1720;
  border-bottom: 1px solid #30424d;
}
:root.light .world-app-main:has(.world-page.guild-room-page) > .world-topbar {
  background: #f5f2e9;
  border-bottom-color: #dbd2be;
}
.world-app-main .world-page.guild-room-page { height: 100%; min-height: 0; }
.world-app-main:has(.guild-room-page) > .world-topbar + div { min-height: 0; }

.guild-room-scene { position: relative; min-width: 0; overflow: hidden; isolation: isolate; background: #18242b; }
.guild-room-scene-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -2; }
.guild-room-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #0b172010 25%, #0b172066 62%, #0b1720ed); z-index: -1; }
.guild-room-scene-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px; }
.guild-room-guild-name { margin: 0 0 10px; color: #e4d7ba; font-size: 13px; overflow-wrap: anywhere; }
.guild-room-page :is(.guild-room-scene-copy, .guild-room-mobile-header) h1,
:root.light .guild-room-page :is(.guild-room-scene-copy, .guild-room-mobile-header) h1 {
  display: flex; align-items: flex-start; gap: 12px; margin: 0; color: #fff4de; font: 500 var(--room-title-size, clamp(27px, 2.2vw, 36px))/1.2 Georgia, serif; overflow-wrap: anywhere;
}
.guild-room-scene-copy h1 > svg, .guild-room-mobile-header h1 > svg { flex: none; width: 24px; height: 24px; margin-top: 5px; color: #e0c58f; }

.guild-room-workspace { min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior-y: contain; padding: 24px clamp(20px, 2.5vw, 40px) 40px; scrollbar-width: thin; }
.guild-room-navigation { display: flex; align-items: center; gap: 14px; position: sticky; top: -24px; z-index: 25; min-width: 0; padding: 8px 0 18px; margin-bottom: 24px; background: var(--room-paper); border-bottom: 1px solid var(--room-line); }
.guild-room-home-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; flex: none; color: var(--room-accent); font-size: 14px; text-decoration: none; }
.guild-room-home-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.guild-room-breadcrumb-separator { flex: none; color: var(--room-muted); opacity: .65; }
.guild-room-picker { min-width: 0; flex: 1; }
.guild-room-picker summary { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 8px 12px; border: 1px solid transparent; border-radius: 9px; color: var(--room-text); cursor: pointer; list-style: none; }
.guild-room-picker summary::-webkit-details-marker { display: none; }
.guild-room-picker summary:hover, .guild-room-picker[open] summary { background: var(--room-surface); border-color: var(--room-line); }
.guild-room-picker summary > svg { flex: none; color: var(--room-accent); }
.guild-room-picker summary > span { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.guild-room-picker summary small { color: var(--room-muted); font-size: 10px; letter-spacing: .04em; }
.guild-room-picker summary strong { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.guild-room-picker-chevron { margin-left: auto; transition: transform .15s; }
.guild-room-picker[open] .guild-room-picker-chevron { transform: rotate(180deg); }
.guild-room-picker-panel { position: absolute; top: calc(100% - 6px); right: 0; width: min(540px, 100%); max-height: min(65dvh, 540px); overflow-y: auto; padding: 12px; border: 1px solid var(--room-line); border-radius: 12px; background: var(--room-surface); box-shadow: 0 14px 36px #0004; }
.guild-room-picker-heading { color: var(--room-muted); font-size: 12px; margin: 4px 8px 12px; overflow-wrap: anywhere; }
.guild-room-picker-panel ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 0; margin: 0; }
.guild-room-picker-panel li { min-width: 0; }
.guild-room-picker-item { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px; border: 1px solid transparent; border-radius: 8px; color: var(--room-text); text-decoration: none; font-size: 13px; }
.guild-room-picker-panel a:hover { border-color: var(--room-line); background: var(--room-paper); }
.guild-room-picker-item[aria-current='page'] { border-color: var(--room-accent); background: var(--room-paper); }
.guild-room-picker-item > span { flex: 1; overflow-wrap: anywhere; }
.guild-room-picker-item > svg { flex: none; color: var(--room-accent); }
.guild-room-picker-item.is-locked { color: var(--room-muted); background: var(--room-paper); opacity: .66; }
.guild-room-picker-item.is-locked img { filter: grayscale(1); }
.guild-room-picker-item.is-unpurchased img { filter: grayscale(1); }
.guild-room-picker-item.is-locked > svg { color: var(--room-muted); }
.guild-room-picker-panel img { flex: none; width: 48px; height: 40px; object-fit: cover; border-radius: 5px; }
.guild-room-navigation :is(a, summary):focus-visible { outline: 2px solid var(--room-accent); outline-offset: 3px; }
.guild-room-content { min-width: 0; }
.guild-room-mobile-header { display: none; }

@media (max-width: 850px) {
  .world-app-main:has(.guild-room-page) { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .world-app-main:has(.world-page.guild-room-page) > .world-topbar { position: sticky; top: 0; z-index: 100; }
  .world-app-main:has(.guild-room-page) > .world-topbar + div { height: auto; flex: none; overflow: visible; }
  .world-app-main .world-page.guild-room-page { height: auto; min-height: calc(100dvh - 64px); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; overflow: visible; flex: none; }
  .guild-room-scene { display: none; }
  .guild-room-workspace { overflow: visible; padding: 16px 16px 28px; }
  .guild-room-navigation { top: 64px; margin-bottom: 18px; padding-top: 4px; padding-bottom: 12px; gap: 8px; }
  .guild-room-home-link { font-size: 12px; gap: 6px; }
  .guild-room-picker summary { gap: 8px; padding-inline: 7px; }
  .guild-room-picker summary strong { font-size: 13px; }
  .guild-room-picker summary > svg:first-child { display: none; }
  .guild-room-mobile-header { --room-title-size: clamp(21px, 6vw, 27px); display: flex; align-items: flex-end; min-height: 160px; padding: 22px; margin-bottom: 24px; border-radius: 12px; position: relative; isolation: isolate; overflow: hidden; background: #18242b; }
  .guild-room-mobile-header > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
  .guild-room-mobile-header::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #0b172005, #0b1720e6); z-index: -1; }
}
@media (max-width: 480px) {
  .guild-room-picker-panel ul { grid-template-columns: minmax(0, 1fr); }
  .guild-room-picker-item { min-height: 56px; }
}
@media (prefers-reduced-motion: reduce) { .guild-room-picker-chevron { transition: none; } }
/* Shared dimensions and readable copy surfaces for both presentations. */
.classes-page {
  width: 100%;
  min-width: 0;
  --class-surface: #101821;
  --class-heading: #fff6e8;
  --class-text: #ddd7dc;
  --class-perk-surface: #17131f;
  --class-copy-surface: #0d0c13f5;
}
:root.light .classes-page {
  --class-surface: #f7f4ed;
  --class-heading: #243544;
  --class-text: #405468;
  --class-perk-surface: #fff;
  --class-copy-surface: #f7f4edf5;
}
.class-showcase-list {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  margin-top: 26px;
}

.class-showcase {
  position: relative;
  scroll-margin-top: 24px;
  isolation: isolate;
  min-height: 460px;
  overflow: hidden;
  border: 1px solid #bda16b70;
  border-radius: 20px;
  background: var(--class-surface);
  box-shadow: 0 20px 42px #0000002b;
}

.class-showcase-scene,
.class-showcase-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.class-showcase-scene {
  object-fit: cover;
  object-position: 25% center;
}

.class-showcase-shade {
  background: linear-gradient(90deg, transparent 20%, #0d0c1370 43%, #0d0c13eb 64%, #0d0c13fa 100%),
    linear-gradient(0deg, #0d0c1366, transparent 50%);
}

.class-showcase-list.is-light .class-showcase {
  background: var(--class-surface);
  border-color: #c6ad784f;
  box-shadow: 0 20px 44px #51422921;
}

.class-showcase-list.is-light .class-showcase-shade {
  background: linear-gradient(90deg, transparent 18%, #f7f4ed66 42%, #f7f4ede8 64%, #f7f4edfb 84%),
    linear-gradient(0deg, #f7f4ed66, transparent 42%);
}

.class-showcase-content {
  position: relative;
  z-index: 1;
  width: min(60%, 720px);
  margin-left: auto;
  padding: clamp(32px, 4vw, 56px);
}

.class-showcase-role {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #e4bd75;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.class-showcase-role span { font-size: 11px; }

.class-showcase h3 {
  margin: 14px 0 12px;
  color: var(--class-heading);
  font-size: clamp(40px, 5.4vw, 72px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -.045em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.class-showcase-line {
  color: var(--class-text);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55;
}

.class-showcase-description {
  max-width: 58ch;
  margin-top: 14px;
  color: var(--class-text);
  font-size: 14px;
  line-height: 1.7;
}

.class-showcase-perks {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.class-showcase-perk {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid #bb975552;
  border-radius: 10px;
  background: var(--class-perk-surface);
  backdrop-filter: blur(8px);
}

.class-showcase-perk > svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #dcba78;
}

.class-showcase-perk h4 {
  margin: 0 0 5px;
  color: #f1d29b;
  font-size: 15px;
  font-weight: 800;
}

.class-showcase-perk p {
  color: var(--class-text);
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.class-showcase-number {
  position: absolute;
  z-index: 1;
  left: 30px;
  bottom: 28px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #15131791;
  color: #fff1d4;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 2px 6px #0008;
}

.class-showcase-number small {
  color: #e2d9d0;
  font-size: 12px;
  font-weight: 500;
}

.class-showcase-list.is-light .class-showcase-role { color: #865d0d; }
.class-showcase-list.is-light .class-showcase h3 { color: var(--class-heading); }
.class-showcase-list.is-light .class-showcase-line { color: var(--class-text); }
.class-showcase-list.is-light .class-showcase-description { color: var(--class-text); }
:root.light .classes-page .class-showcase h3 { color: var(--class-heading); }
:root.light .classes-page .class-showcase-perk h4 { color: #65460c; }
.class-showcase-list.is-light .class-showcase-perk { background: var(--class-perk-surface); border-color: #c5a66d89; }
.class-showcase-list.is-light .class-showcase-perk > svg { color: #86621c; }
.class-showcase-list.is-light .class-showcase-perk h4 { color: #65460c; }
.class-showcase-list.is-light .class-showcase-perk p { color: var(--class-text); }

@media (max-width: 800px) {
  .class-showcase-content { width: 68%; padding: 30px; }
  .class-showcase-shade { background: linear-gradient(90deg, transparent 8%, #0d0c13a8 37%, #0d0c13f5 68%); }
  .class-showcase-list.is-light .class-showcase-shade { background: linear-gradient(90deg, transparent 7%, #f7f4edaa 36%, #f7f4edfa 68%); }
}

@media (max-width: 600px) {
  .class-showcase { min-height: 0; border-radius: 14px; }
  .class-showcase-scene { height: 400px; object-position: center 30%; }
  .class-showcase-shade { background: linear-gradient(0deg, #0d0c13 0%, #0d0c13 42%, #0d0c1300 76%); }
  .class-showcase-list.is-light .class-showcase-shade { background: linear-gradient(0deg, #f7f4ed 0%, #f7f4ed 42%, #f7f4ed00 76%); }
  .class-showcase-content { width: 100%; padding: 265px 22px 28px; }
  .class-showcase h3 { font-size: clamp(38px, 10vw, 56px); }
  .class-showcase-perks { margin-top: 22px; }
  .class-showcase-perk { padding: 15px; }
  .class-showcase-number { top: 18px; right: 18px; left: auto; bottom: auto; }
}

.class-showcase-list { grid-template-columns: minmax(0, 1fr); }
.class-showcase { width: 100%; min-width: 0; }
.class-showcase-content { isolation: isolate; }
.class-showcase-content::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--class-copy-surface);
}
@media (max-width: 600px) {
  .class-showcase-content::before { top: 240px; }
}
.partner-detail-page { color: #eee9df; }
.partner-detail-page .partner-detail-hero { padding: 0; border-radius: 7px; border-color: #344857; }
.partner-detail-banner { background: #0c1a23; }
.partner-detail-banner-fade { background: linear-gradient(transparent, #09151e); }
.partner-detail-page .partner-offer-card { box-shadow: inset 0 0 0 4px #06101855; }
.partner-detail-page h1 { color: #eee9df; font-weight: 500; }
.partner-detail-page .partner-offer-card h3 { color: #e9d5ab; }
.partner-detail-page .partner-detail-hero .rounded-2xl { border-radius: 7px; box-shadow: none; border-color: #9d8253; }
:root.light .partner-detail-banner { background: #eee6d5; }
:root.light .partner-detail-banner-fade { background: linear-gradient(transparent, #f5f2e9); }
:root.light .partner-detail-page .partner-offer-card { box-shadow: inset 0 1px #fff8, 0 5px 18px #493e2010; }
.world-page {
  --gold: #d9b56d;
  --muted: #b5b1cb;
  display: grid;
  grid-template-columns: minmax(230px, .72fr) minmax(0, 1.4fr);
  margin: -16px;
  min-height: calc(100vh - 80px);
  background: #061018;
  color: #f0ede6
}

.world-story {
  position: relative;
  min-width: 0;
  min-height: 690px;
  overflow: hidden;
  background: #091722;
  isolation: isolate
}

.world-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% top;
  z-index: -2
}

.world-story:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--world-story-fade)
}

.world-story,
.dashboard-story {
  --world-story-fade: linear-gradient(90deg, transparent 35%, #06101840 60%, #061018b3 82%, #061018 100%), linear-gradient(180deg, transparent 15%, #06101870 55%, #061018 100%)
}

.world-story-copy {
  position: relative;
  padding: clamp(24px, 3vw, 48px);
  padding-top: 360px
}

.world-eyebrow {
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--gold)
}

.world-story h1 {
  font: 600 clamp(34px, 4vw, 62px)/1.08 Georgia, serif;
  margin: 12px 0 8px;
  overflow-wrap: anywhere
}

.world-story h2 {
  font: 500 23px/1.25 Georgia, serif;
  color: var(--gold)
}

.world-story p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7
}

.world-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--gold);
  margin: 22px auto
}

.world-divider:before,
.world-divider:after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, #b58c43)
}

.world-divider:after {
  transform: rotate(180deg)
}

.world-class {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0;
  padding: 16px 0;
  border-block: 1px solid #d9b56d25
}

.world-class small {
  color: #aaa5bf
}

.world-class p {
  color: #eed7a8;
  font-family: Georgia, serif;
  font-size: 20px
}

.world-story-values {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 26px;
  font: 12px Georgia, serif;
  color: #d8c8a7
}

.world-story-values span {
  display: grid;
  justify-items: center;
  gap: 10px
}

.world-story-values svg {
  width: 28px;
  height: 28px;
  color: var(--gold)
}

.world-content {
  min-width: 0;
  padding: 8px;;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: radial-gradient(ellipse at top right, #16334540, transparent 60%);
  container-type: inline-size;
}

.heroic-actions-page .world-content {
  gap: 16px;
}

.world-content>*,
.world-panel {
  min-width: 0
}

.world-medallion {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border: 1px solid #d9b56d;
  border-radius: 50%;
  color: #ebce92;
  flex-shrink: 0;
  box-shadow: 0 0 20px #dab66c14
}

.world-medallion svg {
  width: 38px;
  height: 38px
}

.world-panel {
  padding: 16px;
  border: 1px solid #344857;
  border-radius: 7px;
  background: linear-gradient(135deg, #0c1a23ee, #071119f5);
  box-shadow: inset 0 0 0 4px #06101855
}

.world-panel>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px
}

.world-panel h2 {
  font: 500 22px Georgia, serif;
  color: #eee9df
}

.world-panel h3 {
  font: 500 19px Georgia, serif
}

.world-panel p {
  line-height: 1.6
}

.world-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 18px;
  min-height: 44px;
  border: 1px solid #9d8253;
  border-radius: 99px;
  background: linear-gradient(#d9b56d12, #08121b);
  color: #e9d5ab;
  font: 15px Georgia, serif;
  cursor: pointer;
  text-align: center
}

.world-button:hover {
  background: #d9b56d22;
  border-color: #f1d593
}

.world-button:disabled {
  opacity: .45;
  cursor: not-allowed
}

.guild-ep-boost {
  --boost-accent: #82cfe8;
  --boost-muted: #aab9c2;
}

.guild-ep-boost-summary {
  display: flex;
  align-items: center;
  gap: 18px;
}

.guild-ep-boost-emblem {
  display: grid;
  place-items: center;
  flex: 0 0 64px;
  height: 64px;
  border-radius: 18px;
  border: 1px solid #5087a0;
  background: radial-gradient(circle at 30% 25%, #2b789655, #0d2838);
  color: var(--boost-accent);
}

.guild-ep-boost-emblem svg { width: 32px; height: 32px; }
.guild-ep-boost:not(.is-active) .guild-ep-boost-emblem { opacity: .7; }

.guild-ep-boost-copy {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.guild-ep-boost-value {
  flex: 0 0 auto;
  color: var(--boost-accent);
  font: 600 clamp(28px, 3vw, 38px)/1 Georgia, serif;
}

.guild-ep-boost-copy strong {
  display: block;
  color: #f0eee8;
  font-size: 16px;
}

.guild-ep-boost-copy p {
  max-width: 58ch;
  margin-top: 3px;
  color: var(--boost-muted);
  font-size: 13px;
}

.guild-ep-boost-action { flex: 0 0 auto; font-size: 13px; }

.guild-ep-boost-stages {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
}

.guild-ep-boost-stage {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #344857;
  border-radius: 8px;
  background: #15232d;
  color: #9eabb5;
  font-size: 13px;
}

.guild-ep-boost-stage.is-unlocked {
  border-color: #58a9c5;
  background: #174256;
  color: #ddf5ff;
}

.guild-ep-boost-stage.is-next { border-color: #8b9f9d; }
.guild-ep-boost-stage-number { font-weight: 700; }
.guild-ep-boost-stage-percent { font-weight: 600; }
.guild-ep-boost-max { margin-top: 10px; color: #9fe5ca; font-size: 13px; }

@media (max-width: 700px) {
  .guild-ep-boost-summary { flex-wrap: wrap; gap: 12px; }
  .guild-ep-boost-emblem { flex-basis: 52px; height: 52px; border-radius: 14px; }
  .guild-ep-boost-emblem svg { width: 26px; height: 26px; }
  .guild-ep-boost-copy { flex-basis: calc(100% - 64px); gap: 10px; }
  .guild-ep-boost-value { font-size: 27px; }
  .guild-ep-boost-action { width: 100%; }
  .guild-ep-boost-stages { gap: 4px; margin-top: 16px; }
  .guild-ep-boost-stage { flex-direction: column; padding: 8px 2px; font-size: 12px; }
}

.world-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #b9aed8;
  font-size: 13px
}

.world-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px
}

.world-events {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px
}

.world-event {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 190px
}

.world-event:hover {
  border-color: #a38c62
}

.world-event p {
  font-size: 14px;
  color: #b5b1cb
}

.world-event small {
  color: #b4a4d2
}

.world-event h3 {
  font-size: 20px
}

.world-event-bonus {
  margin-top: auto;
  color: #c8a5f3;
  font-size: 13px;
  border-top: 1px solid #344857;
  padding-top: 10px
}

.world-status {
  display: inline-block;
  border: 1px solid #8b5bc870;
  background: #6d31a530;
  padding: 3px 8px;
  font-size: 11px;
  color: #dec2ff;
  border-radius: 3px
}

.world-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap
}

.world-stat {
  flex: 1;
  min-width: 80px
}

.world-stat strong {
  display: block;
  font: 30px Georgia, serif;
  color: #ead3a2
}

.world-stat span {
  font-size: 13px;
  color: #b5b1cb
}

.world-footer {
  grid-column: 1/-1;
  padding: 14px 24px 22px;
  background: #061018
}

.world-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.world-tabs [aria-selected=true],
.world-tabs [aria-current=page] {
  color: #f3d693;
  border-color: #e0b767;
  background: #8e632330
}

.world-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid #34485770
}

.world-list-row:last-child {
  border-bottom: 0
}

.world-error {
  padding: 16px;
  border: 1px solid #a75858;
  color: #fecaca;
  background: #371b2440;
  border-radius: 6px
}

.world-loading {
  padding: 32px;
  color: #b5b1cb
}

.world-page :is(button, a, input, select, textarea):focus-visible,
.world-map-page :is(button, a, input):focus-visible {
  outline: 2px solid #f3d693;
  outline-offset: 4px
}

.world-page input,
.world-page select,
.world-page textarea {
  border-radius: 5px
}

.world-page input::placeholder,
.world-page textarea::placeholder {
  color: #9394aa
}

.world-map-page {
  margin: -16px;
  padding: 24px;
  background: #061018;
  min-height: calc(100vh - 80px);
  color: #eee9df
}

.world-map-heading {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px
}

.world-map-heading h1 {
  font: 36px Georgia, serif;
  color: #eed8ab
}

.world-map-heading p {
  color: #b5b1cb
}

.world-map-frame {
  padding: 2px;
  border: 1px solid #d9b56d;
  background: #d9b56d;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px)
}

.world-map-canvas {
  height: clamp(380px, 64vh, 850px);
  position: relative;
  background: #12202b
}

.world-map-tools {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 16px;
  margin-top: 18px
}

.world-map-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #0f1f2d;
  border: 2px solid var(--marker-color);
  color: var(--marker-color);
  border-radius: 8px;
  transform: rotate(45deg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.65);
}

.world-map-marker span {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-45deg);
  width: 100%;
  height: 100%;
  color: var(--marker-color);
  line-height: 1;
}

.world-map-marker svg {
  display: block;
  width: 18px;
  height: 18px;
}

.world-map-canvas .leaflet-control-attribution {
  max-width: calc(100% - 24px);
  margin-right: 14px
}

.world-map-canvas .leaflet-popup-content-wrapper {
  background: #0c1a23;
  color: #eee9df;
  border: 1px solid #b99a61
}

.world-map-canvas .leaflet-popup-tip {
  background: #0c1a23
}

.world-map-canvas .leaflet-control-zoom a {
  background: #0c1a23;
  color: #ead3a2;
  border-color: #56616a
}

/* Use the same surfaces for map panels and controls in both themes. */
.world-map-canvas {
  --map-control-bg: #0c1a23f2;
  --map-control-border: #56616a;
  --map-control-text: #eee9df;
  --map-control-muted: #aebccd;
  --map-control-accent: #ead3a2;
  --map-control-hover: #1a303b;
  --map-control-badge: #203240;
  --map-control-shadow: 0 4px 12px #0006;
}

:root.light .world-map-canvas {
  --map-control-bg: #fffdf7f2;
  --map-control-border: #c6b68e;
  --map-control-text: #263747;
  --map-control-muted: #536477;
  --map-control-accent: #795819;
  --map-control-hover: #f4efe3;
  --map-control-badge: #eee8d9;
  --map-control-shadow: 0 4px 12px #493e321a;
}

.world-map-canvas :is(.map-filter-panel, .map-legend-panel, .map-locate-btn, .map-locate-status) {
  background: var(--map-control-bg);
  border: 1px solid var(--map-control-border);
  border-radius: 6px;
  box-shadow: var(--map-control-shadow);
  color: var(--map-control-text);
}

.world-map-canvas .map-filter-trigger,
.world-map-canvas .map-filter-options {
  background: transparent;
  color: var(--map-control-text);
}

.world-map-canvas .map-filter-trigger:hover,
.world-map-canvas .map-locate-btn:hover {
  background: var(--map-control-hover);
}

.world-map-canvas .map-filter-trigger svg,
.world-map-canvas .map-locate-btn svg {
  color: var(--map-control-accent);
}

.world-map-canvas .map-filter-count {
  background: var(--map-control-badge);
  color: var(--map-control-muted);
}

.world-map-canvas .map-filter-options {
  border-color: var(--map-control-border);
}

.world-map-canvas .map-filter-options label span,
.world-map-canvas .map-legend-label {
  color: var(--map-control-text);
}

.world-map-canvas .map-filter-options button,
.world-map-canvas .map-legend-title {
  color: var(--map-control-muted);
}

.world-map-canvas .map-filter-options button:hover {
  color: var(--map-control-accent);
}

.world-map-canvas .leaflet-container .leaflet-control-zoom {
  border: 1px solid var(--map-control-border);
  border-radius: 6px;
  box-shadow: var(--map-control-shadow);
  margin: 16px 16px 0 0;
  overflow: hidden;
}

.world-map-canvas .map-locate-control {
  right: 16px;
}

.world-map-canvas .leaflet-container .leaflet-control-zoom a {
  background: var(--map-control-bg);
  border-color: var(--map-control-border);
  color: var(--map-control-accent);
}

.world-map-canvas .leaflet-container .leaflet-control-zoom a:hover {
  background: var(--map-control-hover);
}

.guild-pennant {
  width: 90px;
  height: 112px;
  flex-shrink: 0;
  padding: 12px 12px 25px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #203549, #0a1726);
  border: 1px solid #cfa85d;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%)
}

.guild-pennant img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.guild-hall-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.guild-member-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px
}

.guild-member-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 8px;
  background: #14223070;
  border: 1px solid #344857;
  border-radius: 7px;
  font-size: 13px
}

.guild-member-chip img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid #c5aa73
}

.guild-member-chip small {
  color: #b5b1cb
}

.guild-top-nav {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  border: 1px solid #344857;
  border-radius: 0;
  background: #08141d;
  box-shadow: 0 4px 14px #00000030;
  overflow-x: auto;
  scrollbar-width: none;
}

.guild-top-nav::-webkit-scrollbar {
  display: none;
}

.guild-top-nav-btn {
  flex: 1 1 0;
  min-width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  font: 600 13px/1.2 Georgia, serif;
  color: #9ea8b6;
  background: transparent;
  border: none;
  border-right: 1px solid #233644;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

.guild-top-nav-btn:last-child {
  border-right: none;
}

.guild-top-nav-btn:hover {
  background: #142533;
  color: #f0e6d2;
}

.guild-top-nav-btn.is-active {
  background: linear-gradient(180deg, #1d3345, #142533);
  color: #fed079;
  box-shadow: inset 0 -3px 0 #e6be6a, inset 0 0 12px #e6be6a18;
  font-weight: bold;
}

.guild-top-nav-btn .guild-top-nav-icon {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .guild-top-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  }
  .guild-top-nav-btn {
    border-bottom: 1px solid #233644;
  }
}

.talents-world .world-content>div {
  max-width: none
}

.talents-world .world-content .talent-stage {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none
}

.talents-world .talent-details {
  width: 100%;
  max-width: none;
  background: #0b1923;
  border-color: #344857
}

.talents-world .talent-branches {
  gap: 12px
}

.talents-world .talent-branch {
  padding: 18px 8px;
  background: linear-gradient(180deg, #10212c99, #08121b);
  border: 1px solid var(--branch-color);
  border-radius: 7px
}

.talents-world .talent-branch button {
  min-width: 44px;
  min-height: 44px
}

/* Match Layout's p-4 / sm:p-6 / lg:p-10 at every viewport width. */
@media(min-width:640px) {
  .world-page,
  .world-map-page {
    margin: -24px
  }
}

@media(min-width:1024px) {

  .world-page,
  .world-map-page {
    margin: -40px
  }
}

@media(max-width:1150px) {
  .world-page {
    grid-template-columns: minmax(200px, .6fr) minmax(0, 1.4fr)
  }

  .world-events {
    grid-template-columns: 1fr
  }

  .world-event {
    min-height: 0
  }

  .world-story-copy {
    padding: 26px;
    padding-top: 340px
  }
}

@media(max-width:850px) {
  /* On mobile, give the page content the full viewport instead of reserving
     a large illustrated title banner above it. */
  .world-page .world-story {
    display: none
  }

  .dashboard-world>div.relative.grid {
    grid-template-rows: minmax(0, 1fr)
  }

  .dashboard-world .dashboard-story {
    display: none
  }

  .world-page {
    grid-template-columns: minmax(0, 1fr)
  }

  .world-story {
    min-height: 0
  }

  .world-scene {
    object-position: center 25%;
    opacity: .7
  }

  .world-story-copy {
    padding: 130px 24px 24px
  }

  .world-story h1 {
    font-size: 38px
  }

  .world-story p {
    max-width: 600px
  }

  .world-story-values,
  .world-class {
    display: none
  }

  .world-divider {
    margin: 14px auto
  }

  .world-content {
    padding: 20px
  }

  .world-medallion {
    width: 50px;
    height: 50px
  }

  .world-medallion svg {
    width: 28px;
    height: 28px
  }

  .world-map-tools {
    grid-template-columns: 1fr
  }

  .world-map-page {
    padding: 20px
  }

  .world-events {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .world-story:after {
    background: linear-gradient(180deg, #06101820, #061018)
  }

  .world-footer {
    padding: 16px 20px
  }
}

@media(max-width:540px) {

  .world-grid,
  .world-events {
    grid-template-columns: 1fr
  }

  .world-map-heading h1 {
    font-size: 30px
  }

  .world-map-canvas {
    height: 55vh;
    min-height: 340px
  }

  .world-content {
    padding: 16px
  }

  .world-story-copy {
    padding-top: 110px
  }

  .guild-bottom-nav .world-button {
    flex-basis: 42%
  }
}

@media(prefers-reduced-motion:reduce) {
  .world-page * {
    animation: none !important;
    transition: none !important
  }
}

/* Keep the dense game interface legible at laptop widths. */
.world-page progress {
  appearance: none;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #253443
}

.world-page progress::-webkit-progress-bar {
  background: #253443;
  border-radius: 10px
}

.world-page progress::-webkit-progress-value {
  background: linear-gradient(90deg, #aa88d9, #8faee9);
  border-radius: 10px
}

.world-page progress.accent-amber-300::-webkit-progress-value {
  background: linear-gradient(90deg, #b9904d, #efcb83)
}

.world-tabs [aria-pressed=true] {
  color: #f3d693;
  border-color: #e0b767;
  background: #8e632330
}

.talents-world .talent-branch>div:first-child {
  white-space: normal;
  font: 16px Georgia, serif;
  text-transform: none;
  letter-spacing: 0;
  overflow: visible;
  margin-bottom: 20px;
  padding: 6px 8px
}

.world-chat-full {
  height: 100%;
  flex: 1;
  min-height: 0;
  margin: 0;
  background: #061018;
  overflow: hidden;
  overscroll-behavior: contain;
}

.world-chat-full input {
  min-width: 0;
}

.world-chat-full form,
.world-chat-full header {
  flex-shrink: 0;
}

.world-chat-full section {
  overflow-wrap: anywhere;
}

@media(min-width:640px) {
  .world-chat-full {
    margin: 0;
  }
}

@media(min-width:1024px) {
  .world-chat-full {
    margin: 0;
  }
}

.world-story-copy {
  position: sticky;
  top: 0
}

@media(max-width:850px) {
  .world-story-copy {
    position: relative
  }
}

@media(min-width:851px) and (max-width:1300px) {
  .world-story-copy {
    padding-top: 300px
  }

  .world-medallion {
    width: 52px;
    height: 52px
  }

  .world-medallion svg {
    width: 30px;
    height: 30px
  }
}

@media(max-height:800px) {
  .world-sidebar-quote {
    display: none !important
  }
}

.dashboard-world {
  min-height: 700px !important;
  height: auto !important
}

.dashboard-world>div.relative.grid {
  min-height: 700px
}

.dashboard-world .world-gold {
  padding: 18px
}

@media(max-width:1023px) {
  .dashboard-world>div.relative.grid {
    grid-template-rows: minmax(360px, auto) minmax(500px, auto)
  }

  .dashboard-world>div.relative.grid>section {
    overflow: visible
  }

  .dashboard-world {
    overflow: visible !important
  }
}

.world-page fieldset[hidden] {
  display: none
}

/* Map follows the shared motif-left, information-right page composition. */
.world-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
  gap: 24px;
  align-items: start
}

.world-map-page {
  --map-page-padding: 24px;
  min-height: calc(100dvh - 64px)
}

.world-map-region {
  min-width: 0
}

.world-map-layout .world-map-canvas {
  height: calc(100dvh - 64px - 2 * var(--map-page-padding) - 6px);
  min-height: 0
}

.world-map-layout .world-map-tools {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 0;
  min-width: 0
}

.world-map-tools .world-gold {
  margin-bottom: 0
}

.world-map-tools .world-gold p {
  margin-top: 8px;
  color: #b5b1cb
}

.world-map-region>.world-error {
  margin-top: 16px
}

@media(max-width:1100px) {
  .world-map-layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(290px, 1fr);
    gap: 18px
  }

  .world-map-tools .world-gold {
    flex-wrap: wrap;
    padding: 20px
  }

  .world-map-tools .world-gold h2 {
    font-size: 24px
  }
}

@media(max-width:850px) {
  .world-map-page {
    --map-page-padding: 20px
  }

  .world-map-layout {
    grid-template-columns: minmax(0, 1fr)
  }
}

.guild-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 14px;
}

.guild-profile-entry {
  position: relative;
  min-width: 0;
  border: 1px solid #2d4152;
  border-radius: 12px;
  background: linear-gradient(155deg, #10212c 0%, #08131c 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: border-color .2s, box-shadow .2s, transform .15s;
}

.guild-profile-entry:hover {
  border-color: #baa477;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

.guild-profile-entry>div {
  padding: 8px 12px 10px;
  margin-top: auto;
  background: rgba(8, 18, 26, 0.6);
}

.guild-member-chat-link {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(217, 181, 109, 0.45);
  border-radius: 8px;
  background: rgba(8, 18, 26, 0.88);
  color: #f3dfa2;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}

.guild-member-chat-link:hover {
  background: rgba(217, 181, 109, 0.2);
  border-color: #d9b56d;
}

.guild-member-chat-link:focus-visible {
  outline: 2px solid #efd393;
  outline-offset: 2px;
}

.guild-profile-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 195px;
  padding: 16px 12px 14px;
  text-align: center;
  border: 1px solid #2d4152;
  border-radius: 12px;
  background: linear-gradient(155deg, #10212c 0%, #08131c 100%);
  color: #c5c5d6;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.guild-profile-entry>.guild-profile-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  flex: 1;
}

.guild-profile-card:hover {
  background: linear-gradient(155deg, #162c3a 0%, #0c1a24 100%);
  border-color: #baa477;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 10px rgba(186, 164, 119, 0.15);
}

.guild-profile-entry>.guild-profile-card:hover {
  background: transparent;
  transform: none;
  box-shadow: none;
}

.guild-profile-card:focus-visible {
  outline: 2px solid #efd393;
  outline-offset: -2px;
}

.guild-profile-card.is-leader {
  background: linear-gradient(155deg, #18272f 0%, #0b171e 100%);
  border-color: #92753a;
  box-shadow: inset 0 0 0 1px rgba(212, 175, 95, 0.2), 0 3px 12px rgba(0, 0, 0, 0.3);
}

.guild-profile-card.is-leader:hover {
  background: linear-gradient(155deg, #22373f 0%, #102128 100%);
  border-color: #d6b268;
  box-shadow: inset 0 0 0 1px rgba(239, 211, 147, 0.35), 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 12px rgba(214, 178, 104, 0.2);
}

.guild-profile-top {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.guild-profile-portrait-wrap {
  position: relative;
  display: inline-flex;
}

.guild-profile-portrait {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border: 2px solid #3d5568;
  border-radius: 50%;
  padding: 2px;
  background: #0f1c27;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  color: #8da4b8;
  margin: 0 auto;
  transition: border-color .2s, box-shadow .2s;
}

.is-leader .guild-profile-portrait {
  border-color: #d4af5f;
  background: #172428;
  box-shadow: 0 0 0 2px rgba(212, 175, 95, 0.25), 0 2px 10px rgba(0, 0, 0, 0.4);
}

.guild-profile-portrait img {
  position: absolute;
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  object-fit: cover;
  border-radius: 50%;
}

.guild-profile-crown-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f3d489, #b98932);
  color: #2a1b04;
  display: grid;
  place-items: center;
  border: 1.5px solid #14222a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.guild-profile-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.guild-profile-name {
  font-family: var(--font-cinzel, 'Cinzel', Georgia, serif);
  font-size: 13.5px;
  font-weight: 700;
  color: #f3ecdc;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  padding: 0 2px;
  text-align: center;
}

.guild-profile-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11.5px;
  color: #92a4b3;
  line-height: 1.2;
}

.guild-profile-level {
  font-weight: 600;
  color: #b5c7d6;
}

.guild-profile-meta-dot {
  color: #4a6275;
  font-size: 10px;
}

.guild-profile-rank {
  display: inline-flex;
  align-items: center;
  color: #b5c7d6;
}

.guild-profile-class {
  font-size: 11.5px;
  font-weight: 500;
  color: #c99a4e;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.guild-profile-footer {
  width: 100%;
  margin-top: auto;
  padding-top: 4px;
}

.guild-profile-role {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  border: 1px solid #3d5060;
  border-radius: 99px;
  padding: 3.5px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: center;
  background: rgba(30, 48, 62, 0.4);
  color: #8da4b8;
  transition: all .2s;
}

.guild-profile-role.is-leader {
  border-color: #bfa05e;
  color: #f5dc9f;
  background: linear-gradient(135deg, rgba(189, 147, 50, 0.22), rgba(133, 98, 25, 0.12));
  box-shadow: 0 0 10px rgba(212, 175, 95, 0.15);
}

.guild-role-icon {
  color: #f0cb6d;
  flex-shrink: 0;
}

.guild-profile-card {
  align-items: stretch;
  min-height: 0;
  gap: 16px;
  padding: 18px 16px 16px;
  text-align: left;
}

.guild-profile-top {
  justify-content: flex-start;
  gap: 14px;
  padding-right: 30px;
}

.guild-profile-portrait-wrap,
.guild-profile-portrait {
  flex: none;
}

.guild-profile-portrait {
  width: 64px;
  height: 64px;
  margin: 0;
}

.guild-profile-info {
  align-items: flex-start;
  text-align: left;
  gap: 5px;
}

.guild-profile-name {
  padding: 0;
  text-align: left;
  font-size: 16px;
}

.guild-profile-stats {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr 1.4fr;
  width: 100%;
  padding: 12px 0;
  border-top: 1px solid rgba(186, 164, 119, 0.22);
  border-bottom: 1px solid rgba(186, 164, 119, 0.22);
}

.guild-profile-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  gap: 4px;
  padding: 0 9px;
  border-right: 1px solid rgba(186, 164, 119, 0.18);
}

.guild-profile-stat:first-child { padding-left: 0; }
.guild-profile-stat:last-child { padding-right: 0; border-right: 0; }

.guild-profile-stat > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #8da4b8;
  font-size: 10px;
  line-height: 1.2;
}

.guild-profile-stat > strong {
  color: #f3ecdc;
  font-size: 17px;
  line-height: 1.2;
}

.guild-profile-rank > strong {
  font-size: 12px;
}

.guild-profile-deeds > strong {
  color: #f0cb6d;
}

.guild-profile-footer { padding-top: 0; }

.guild-member-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}

.guild-member-strip .guild-profile-card {
  min-height: 190px;
  padding: 14px 10px 12px;
}


.profile-personal {
  display: block
}

.profile-personal>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #bda16b55;
  padding-bottom: 12px;
  margin-bottom: 18px
}

.profile-personal-body {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  min-width: 0;
}

.profile-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border: 1px solid #bda16b;
  border-radius: 50%;
  background: #13232f;
  overflow: hidden;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar svg:last-child {
  position: absolute;
  bottom: 5px;
  right: 11px;
  color: #f3d693;
}

.profile-personal dl {
  min-width: 0;
}

.profile-personal dl>div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 12px;
  padding: 4px 0;
}

.profile-personal dt {
  color: #b5add1;
  font-size: 13px;
}

.profile-personal dd {
  color: #e9e2d5;
  font-size: 14px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.profile-personal-qr {
  min-width: 0;
  max-width: 100%;
}

.profile-class-change {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
  align-items: center;
  gap: 24px;
  margin-top: 22px;
  padding: 20px 0 2px;
  border-top: 1px solid #bda16b55;
}

.profile-class-change-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 8px;
}

.profile-class-change-heading h3 {
  margin: 0;
  color: #eed8ab;
  font: 500 20px/1.25 Georgia, serif;
}

.profile-class-change-copy > p,
.profile-class-change-control > p {
  margin: 0;
  color: #b5b1cb;
  font-size: 13px;
  line-height: 1.55;
}

.profile-class-change-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px 12px;
  min-width: 0;
}

.profile-class-change-control > :first-child:nth-last-child(1) {
  grid-column: 1 / -1;
}

.profile-class-change-control label {
  grid-column: 1 / -1;
  color: #b5add1;
  font-size: 12px;
}

.profile-class-change-control select {
  min-width: 0;
  width: 100%;
  padding: 10px 12px;
  color: #e9e2d5;
  background: #101b24;
  border: 1px solid #bda16b88;
  border-radius: 6px;
}

.profile-class-change-control .world-button {
  white-space: nowrap;
}

.profile-class-change-deadline,
.profile-class-change-state,
.profile-class-change-perks,
.profile-class-change-control [role="alert"],
.profile-class-change-control [role="status"] {
  grid-column: 1 / -1;
}

.profile-class-change-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #d3c7a9;
  font-size: 12px;
}

.profile-class-change-perks li {
  padding: 4px 8px;
  border: 1px solid #bda16b55;
  border-radius: 999px;
  background: #bda16b12;
}

.profile-class-change-control .world-button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .profile-class-change {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.profile-identity {
  margin-top: 24px
}

.profile-identity-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap
}

.profile-identity small {
  color: #b5add1
}

.profile-identity strong {
  display: block;
  font: 24px Georgia, serif;
  color: #ead3a2
}

.profile-active-days {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #ead3a2;
  margin-bottom: 8px
}

.profile-active-days strong {
  font-size: 34px
}

.profile-active-days span {
  color: #c3bbd5;
  font-size: 14px
}

.profile-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.profile-categories > .profile-category-card {
  flex: 1 1 calc(25% - 9px);
}

.profile-category-card {
  position: relative;
  min-width: 0;
  min-height: 96px;
  background: radial-gradient(circle at 22% 24%, rgba(197, 143, 57, 0.12), transparent 48%), rgba(10, 20, 29, 0.7);
  border: 1px solid rgba(217, 181, 109, 0.22);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.profile-category-card:hover {
  background: radial-gradient(circle at 22% 24%, rgba(197, 143, 57, 0.18), transparent 50%), rgba(16, 28, 40, 0.9);
  border-color: rgba(217, 181, 109, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26);
}

.profile-category-card--bonus {
  border-color: #e8bd67;
  background: radial-gradient(circle at 22% 24%, rgba(217, 160, 68, 0.22), transparent 55%), rgba(30, 30, 26, 0.85);
  box-shadow: inset 0 0 0 1px rgba(232, 189, 103, 0.3), 0 0 18px rgba(217, 160, 68, 0.14);
}

.profile-category-card--bonus:hover {
  border-color: #f5d77f;
}

.profile-category-bonus {
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(245, 215, 127, 0.48);
  border-radius: 999px;
  padding: 2px 7px;
  color: #f5d77f;
  background: rgba(108, 77, 19, 0.34);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.profile-category-secondary-bonus {
  color: #c5b697;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}

.profile-category-card:focus-visible {
  outline: 2px solid #f5d77f;
  outline-offset: 3px;
}

.profile-category-topline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.profile-category-emblem {
  display: flex;
  flex: 0 0 64px;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.profile-category-icon-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
}

.profile-category-icon {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, 0.35));
}

.profile-category-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.profile-category-name {
  display: block;
  font: 600 16px Georgia, serif;
  color: #dedbe6;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

.profile-category-level {
  flex-shrink: 0;
  font: bold 11px Georgia, serif;
  color: #f3dfa2;
  background: rgba(243, 223, 162, 0.1);
  border: 1px solid rgba(243, 223, 162, 0.25);
  border-radius: 999px;
  padding: 3px 6px;
  white-space: nowrap;
}

.profile-category-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #8f8a9e;
}

.profile-category-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  overflow: hidden;
}

.profile-category-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #d9a044, #f5d77f);
  box-shadow: 0 0 6px rgba(245, 215, 127, 0.3);
  transition: width 0.4s ease;
}

@media (max-width: 1050px) {
  .profile-categories > .profile-category-card {
    flex-basis: calc(33.333% - 8px);
  }
}

@media (max-width: 760px) {
  .profile-categories > .profile-category-card {
    flex-basis: calc(50% - 6px);
  }
}

.profile-chronicle {
  border-left: 1px solid #b99a61;
  margin-left: 6px;
  padding-left: 18px
}

.profile-chronicle li {
  position: relative;
  display: grid;
  grid-template-columns: 90px 32px minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #34485770
}

.profile-chronicle li:before {
  content: '◇';
  position: absolute;
  left: -25px;
  color: #d9b56d;
  background: #0b1720;
  font-size: 12px
}

.profile-chronicle time {
  font-size: 12px;
  color: #b5add1
}

.profile-chronicle strong {
  font: 15px Georgia, serif;
  color: #dedbe6
}

.profile-chronicle li>span {
  font: italic 13px Georgia, serif;
  color: #aca6c2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden
}

@media(max-width:650px) {
  .profile-categories {
    gap: 10px 12px
  }

  .profile-personal-body {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
  }

  .profile-personal-body > dl {
    grid-column: 1 / -1;
  }

  .profile-personal-qr {
    grid-column: 2;
    grid-row: 1;
  }

  .profile-chronicle li {
    grid-template-columns: 75px 28px minmax(0, 1fr)
  }

  .profile-chronicle li>span {
    grid-column: 3
  }

  .profile-personal>header {
    flex-wrap: wrap
  }
}

@media (max-width: 420px) {
  .profile-categories > .profile-category-card {
    flex-basis: 100%;
  }
}

.world-right {
  min-width: 0
}

.world-story-actions {
  position: absolute;
  inset: 16px 16px auto;
  z-index: 5
}

.world-story-actions .world-button {
  background: #08141ee6;
  font-size: 13px;
  padding: 8px 12px
}

@media(min-width:851px) {
  .world-page {
    height: calc(100dvh - 64px);
    min-height: 0;
    overflow: hidden;
    grid-template-rows: minmax(0, 1fr)
  }

  .world-right {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: #9a8153 #08141f
  }

  .world-story {
    min-height: 0;
    height: 100%;
    display: flex;
    align-items: flex-end
  }

  .world-story-copy {
    width: 100%;
    padding: 24px clamp(18px, 2vw, 36px)
  }

  .world-story-copy>p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
  }

  .world-story h1 {
    font-size: clamp(30px, 3.4vw, 54px)
  }

  .world-story .world-class {
    margin: 16px 0;
    padding: 12px 0
  }

  .world-story .world-divider {
    margin: 16px auto
  }

  .world-story-values {
    margin-top: 18px
  }
}

@media(min-width:851px) and (max-height:760px) {
  .world-story-copy {
    padding-top: 70px;
    padding-bottom: 16px
  }

  .world-story h1 {
    font-size: 32px
  }

  .world-story h2 {
    font-size: 19px
  }

  .world-story p {
    font-size: 13px
  }

  .world-story-values {
    display: none
  }

  .profile-identity {
    margin-top: 14px
  }

  .profile-identity strong {
    font-size: 20px
  }

  .profile-active-days strong {
    font-size: 26px
  }
}

@media(min-width:1024px) {
  .dashboard-world {
    height: calc(100dvh - 64px) !important;
    min-height: 0 !important
  }

  .dashboard-world>div.relative.grid {
    min-height: 0;
    height: 100%
  }

  .dashboard-world>div.relative.grid>section:last-child {
    overflow-y: auto;
    overscroll-behavior-y: contain
  }

  .dashboard-world>div.relative.grid>section:last-child>div {
    height: auto;
    min-height: 100%
  }
}

/* One banner column and identical image framing across all illustrated pages. */
:root {
  --world-banner-width: 34%
}

.dashboard-story-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--world-story-fade);
  pointer-events: none
}

.dashboard-story {
  border-right: 0
}

@media(min-width:851px) {

  .world-page,
  .dashboard-world>div.relative.grid {
    grid-template-columns: var(--world-banner-width) minmax(0, 1fr)
  }

  .dashboard-world {
    height: calc(100dvh - 64px) !important;
    min-height: 0 !important;
    overflow: hidden !important
  }

  .dashboard-world>div.relative.grid {
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
    height: 100%
  }

  .dashboard-world>div.relative.grid>.dashboard-story {
    overflow: hidden
  }

  .dashboard-world>div.relative.grid>section:last-child {
    overflow-y: auto;
    overscroll-behavior-y: contain
  }

  .dashboard-world>div.relative.grid>section:last-child>div {
    height: auto;
    min-height: 100%
  }

  .dashboard-story .world-scene,
  .world-story .world-scene {
    object-fit: cover;
    object-position: 48% top
  }
}

@media(max-width:850px) {
  .dashboard-world>div.relative.grid {
    grid-template-columns: 1fr
  }

  .dashboard-story .world-scene {
    object-position: center 25%;
    opacity: .7
  }
}

.profile-settings-heading {
  font: 22px Georgia, serif;
  color: #eed8ab
}

.profile-settings {
  padding: 22px
}

.profile-settings>h2 {
  padding-bottom: 14px;
  border-bottom: 1px solid #bda16b40
}

.profile-preferences-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.profile-preferences-card {
  min-width: 0;
}

.profile-preferences-card > h2 {
  margin-bottom: 18px;
}

.profile-preferences-card select {
  max-width: 100%;
}

.profile-popup-options {
  display: grid;
  gap: 18px;
}

.profile-popup-options label span {
  min-width: 0;
}

.profile-appearance-card {
  grid-column: 1 / -1;
}

.profile-appearance-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.profile-appearance-options > div {
  min-width: 0;
}

.profile-appearance-options > div > div {
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .profile-preferences-grid,
  .profile-appearance-options {
    grid-template-columns: minmax(0, 1fr);
  }
}

.world-button-danger {
  border-color: #a65c68;
  color: #f4adb7;
  background: linear-gradient(#7a293422, #10141e)
}

.world-button-danger:hover {
  border-color: #ed9da9;
  background: #7a293433
}

.world-button[aria-pressed=true] {
  border-color: #e5c17d;
  color: #f3dca7;
  background: #ba91452b;
  box-shadow: 0 0 14px #dbb87512
}

.world-language {
  border: 1px solid #53606c;
  border-radius: 99px;
  background: #08141f;
  gap: 4px
}

.world-language button {
  border-radius: 99px;
  min-height: 32px;
  min-width: 38px;
  color: #b5add1;
  background: transparent
}

.world-language button[aria-pressed=true] {
  background: #bc96452b;
  color: #f3dca7;
  box-shadow: inset 0 0 0 1px #bda16b
}

.world-theme-switcher {
  border: 1px solid #53606c;
  border-radius: 99px;
  background: #08141f;
  gap: 3px;
  display: inline-flex;
  align-items: center
}

.world-theme-switcher button {
  border-radius: 99px;
  min-height: 30px;
  min-width: 32px;
  color: #b5add1;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center
}

.world-theme-switcher button:hover {
  color: #eed8ab
}

.world-theme-switcher button[aria-pressed=true],
.world-theme-switcher button.is-active {
  background: #bc96452b;
  color: #f3dca7;
  box-shadow: inset 0 0 0 1px #bda16b
}

.world-karma>div:first-child {
  padding-bottom: 14px;
  border-bottom: 1px solid #bda16b40;
  gap: 12px
}

.world-karma .karma-tier-badge {
  border-radius: 99px
}

.world-karma>.karma-status-card {
  background: linear-gradient(110deg, #17293680, #071119);
  border-color: #53616d
}

.world-karma>.karma-status-card>.karma-status-icon {
  border-radius: 50%;
  border-color: #bda16b70;
  background: #ba914512
}

.world-modal-overlay {
  background: #020810d9 !important;
  backdrop-filter: blur(8px);
  padding: 20px;
  overflow-y: auto
}

.world-modal-overlay>div {
  background: linear-gradient(135deg, #122632, #07121c 65%) !important;
  border: 1px solid #bda16b !important;
  border-radius: 12px;
  box-shadow: 0 24px 90px #000b, inset 0 0 0 4px #d9b56d08;
  color: #eee9df;
  max-height: calc(100dvh - 40px);
  overflow-y: auto
}

.world-modal-overlay :is(h2, h3) {
  font-family: Georgia, serif;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: #eed8ab
}

.world-modal-overlay :is(input:not([type=range]):not([type=checkbox]):not([type=file]), textarea, select) {
  background: #08141f;
  border: 1px solid #53616d;
  border-radius: 6px;
  color: #eee9df
}

.world-modal-overlay button {
  border-radius: 99px
}

.world-modal-overlay button[class*="bg-indigo-600"],
.world-modal-overlay button[class*="bg-indigo-500"] {
  background: linear-gradient(#cba65c, #aa8141);
  color: #09131b;
  border-color: #e3c587
}

.world-modal-overlay :is(button, input, textarea, select, a):focus-visible {
  outline: 2px solid #e5c17d;
  outline-offset: 3px
}

.world-modal-overlay [class*="border-zinc-"] {
  border-color: #3f5363
}

.world-modal-overlay [class*="bg-zinc-950"],
.world-modal-overlay [class*="bg-zinc-900"] {
  background-color: #0a1823
}

.mechanics-page {
  max-width: 1280px;
  margin: 0 auto;
  color: #eee9df;
  padding: 16px 24px 36px;
  box-sizing: border-box
}

.overflow-y-auto>.mechanics-page {
  padding-left: 0;
  padding-right: 0
}

.mechanics-heading {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 0 28px;
  border-bottom: 1px solid #bda16b55
}

.mechanics-heading h1 {
  font: 500 clamp(30px, 3vw, 44px)/1.15 Georgia, serif;
  color: #eed8ab;
  margin: 8px 0 12px
}

.mechanics-heading p {
  color: #b5b1cb;
  max-width: 780px;
  line-height: 1.75;
  font-size: 15px
}

.mechanics-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 22px 0 30px
}

.mechanics-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid #3f5363;
  border-radius: 99px;
  background: #0b1a25;
  color: #c9c2db;
  font-size: 13px;
  transition: background .15s, border-color .15s
}

.mechanics-nav a:hover {
  border-color: #bda16b;
  color: #eed8ab;
  background: #bda16b15
}

.mechanics-page :is(a, button):focus-visible {
  outline: 2px solid #e5c17d;
  outline-offset: 4px
}

.mechanics-page section[id] {
  scroll-margin-top: 24px
}

.mechanics-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 28px
}

.mechanics-step {
  position: relative;
  padding: 24px;
  border: 1px solid #a48b5b;
  border-radius: 4px 18px 4px 18px;
  background: #112330
}

.mechanics-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px
}

.mechanics-step-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid #c2a46a70;
  border-radius: 50%;
  color: #e6c889;
  background: #d4ac5410
}

.mechanics-step-number {
  font: 38px Georgia, serif;
  color: #d9b56d55
}

.mechanics-step h2 {
  font: 21px/1.3 Georgia, serif;
  color: #eed8ab;
  margin-bottom: 12px
}

.mechanics-step p,
.mechanics-info p,
.mechanics-perk p {
  font-size: 14px;
  line-height: 1.8;
  color: #b5b1cb
}

.mechanics-topics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px
}

.mechanics-info {
  padding: 24px
}

.mechanics-info-icon {
  display: inline-flex;
  color: #cbb98e;
  margin-bottom: 16px
}

.mechanics-info h2 {
  margin-bottom: 12px;
  line-height: 1.3
}

.mechanics-perks {
  margin: 36px 0
}

.mechanics-section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #d9b56d;
  margin-bottom: 20px
}

.mechanics-section-heading h2 {
  font: 26px Georgia, serif;
  color: #eee3ce
}

.mechanics-section-heading>span {
  height: 1px;
  flex: 1;
  background: #bda16b70
}

.mechanics-perk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px
}

.mechanics-perk {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px;
  border: 1px solid #344857;
  border-radius: 8px;
  background: #112330
}

.mechanics-talent-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 1px solid #74628f66;
  border-radius: 50%;
  background: #a084d014
}

.mechanics-perk h3 {
  font: 19px Georgia, serif;
  color: #e6ddeb;
  margin: 3px 0 8px
}

.mechanics-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px
}

.mechanics-notes .mechanics-info {
  background: #0b1821;
  border-color: #344857
}

.mechanics-notes .mechanics-info h2 {
  font-size: 20px
}

.mechanics-abuse-banner {
  margin-top: 16px
}

.mechanics-abuse-banner .mechanics-info {
  background: #1c1218;
  border-color: #7a293488
}

.mechanics-abuse-banner .mechanics-info-icon {
  color: #f4adb7
}

.mechanics-abuse-banner .mechanics-info h2 {
  font-size: 20px;
  color: #f3ced3
}

@media(max-width:1200px) {
  .mechanics-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .mechanics-topics {
    grid-template-columns: 1fr
  }

  .mechanics-topics .mechanics-info {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 0 16px
  }

  .mechanics-topics .mechanics-info p {
    grid-column: 2
  }

  .mechanics-topics .mechanics-info-icon {
    margin: 0
  }
}

@media(max-width:650px) {
  .mechanics-page {
    padding-left: 16px;
    padding-right: 16px
  }

  .mechanics-heading {
    align-items: flex-start;
    gap: 16px
  }

  .mechanics-heading .world-medallion {
    width: 48px;
    height: 48px
  }

  .mechanics-heading .world-medallion svg {
    width: 25px;
    height: 25px
  }

  .mechanics-flow,
  .mechanics-perk-grid,
  .mechanics-notes {
    grid-template-columns: 1fr
  }

  .mechanics-step {
    padding: 20px
  }

  .mechanics-step-top {
    margin-bottom: 14px
  }

  .mechanics-perk {
    gap: 12px;
    padding: 16px
  }

  .mechanics-nav {
    gap: 8px
  }

  .mechanics-nav a {
    font-size: 12px
  }

  .mechanics-section-heading h2 {
    font-size: 23px
  }
}

.classes-intro {
  font-size: 14px;
  line-height: 1.8;
  color: #b5b1cb;
  max-width: 850px;
  margin-bottom: 22px
}

.classes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px
}

.class-guide-card {
  padding: 22px;
  border: 1px solid #3f5363;
  border-radius: 8px;
  background: radial-gradient(ellipse at top left, color-mix(in srgb, var(--class-accent) 12%, transparent), transparent 70%), linear-gradient(135deg, #10232f, #07131d);
  transition: border-color .2s
}

.class-guide-card:hover {
  border-color: var(--class-accent)
}

.class-guide-heading {
  display: flex;
  align-items: center;
  gap: 16px
}

.class-guide-icon {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  flex-shrink: 0
}

.class-guide-icon img {
  width: 82px;
  height: 82px;
  filter: drop-shadow(0 7px 13px #0006)
}

.class-guide-heading h3 {
  font: 24px Georgia, serif;
  color: #eee3ce;
  margin-bottom: 6px
}

.class-guide-heading p {
  font-size: 12px;
  line-height: 1.6;
  color: #b5b1cb
}

.class-guide-perk {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid #53616d66
}

.class-guide-perk>span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--class-accent)
}

.class-guide-perk p {
  font-size: 14px;
  line-height: 1.8;
  color: #b5b1cb;
  margin-top: 10px
}

.class-guide-perk-list {
  margin-top: 10px;
  display: grid;
  gap: 10px
}

.class-guide-perk-item {
  font-size: 13px;
  line-height: 1.65;
  color: #b5b1cb
}

.class-guide-perk-item strong {
  color: #eddaad;
  font-weight: 700
}

.classes-ranks {
  margin: 38px 0
}

.classes-rank-intro {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start
}

.classes-rank-intro small {
  flex-shrink: 0;
  color: #d2bb8b;
  border: 1px solid #bda16b55;
  background: #bda16b10;
  border-radius: 99px;
  padding: 5px 12px;
  font-size: 11px
}

.rank-guide-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px
}

.rank-guide-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 10px;
  border: 1px solid #3f5363;
  border-radius: 7px;
  background: linear-gradient(#132734, #08141d)
}

.rank-guide-emblem {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 1px solid #ac9973;
  transform: rotate(45deg);
  border-radius: 8px;
  margin: 10px 0 22px;
  box-shadow: inset 0 0 0 4px #d9b56d0c
}

.rank-guide-emblem span {
  transform: rotate(-45deg);
  font: 32px Georgia, serif;
  color: #e6d4ac
}

.rank-guide-card h3 {
  font: 18px Georgia, serif;
  color: #eee3ce
}

.rank-guide-card p {
  font-size: 11px;
  color: #b5b1cb;
  margin: 10px 0 16px
}

.rank-guide-card>svg {
  margin-top: auto;
  color: #a69673
}

.rank-legend {
  border-color: #d9b56d;
  background: radial-gradient(ellipse at top, #b8923c35, transparent 75%), #0c1a23
}

.rank-legend .rank-guide-emblem {
  border-color: #efd393;
  box-shadow: 0 0 25px #d9b56d20
}

.rank-legend>svg {
  color: #efd393;
  fill: #efd393
}

.classes-note {
  display: flex;
  gap: 22px;
  align-items: center;
  padding: 26px
}

.classes-note p {
  color: #b5b1cb;
  font-size: 14px;
  line-height: 1.8;
  margin-top: 10px
}

@media(max-width:1200px) {
  .classes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .rank-guide-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }

  .classes-rank-intro {
    flex-wrap: wrap;
    margin-bottom: 20px;
    gap: 0
  }
}

@media(max-width:650px) {
  .classes-grid {
    grid-template-columns: 1fr
  }

  .rank-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .classes-note {
    align-items: flex-start;
    gap: 14px;
    padding: 20px
  }

  .classes-note .world-medallion {
    width: 42px;
    height: 42px
  }

  .classes-note .world-medallion svg {
    width: 24px;
    height: 24px
  }

  .class-guide-card {
    padding: 18px
  }
}

/* Text action buttons use the same pill shape, including legacy utility buttons. */
:is(.world-page, .dashboard-world, .world-modal-overlay) button:is([class*="px-"], [class*="py-"]):not(.guild-profile-card):not(.guild-member-chip):not(.world-stat):not(.world-list-row) {
  border-radius: 9999px
}

.world-chat-full form button {
  border-radius: 9999px;
  min-width: 44px
}

.world-chat-full aside button {
  border-radius: 0
}

.world-modal-overlay button.world-list-row {
  border-radius: 0
}

/* Blend the top navigation into the illustrated page instead of a black strip. */
.world-app-main {
  background: #061018
}

.world-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(6, 16, 24, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(251, 191, 36, 0.12);
  color: #d8d0e2;
}

@media (max-width: 850px) {
  .world-app-main {
    /* Anchor navigation must only scroll the content pane, not the topbar. */
    overflow: clip;
  }

  .world-app-main > .world-topbar {
    position: relative;
    top: auto;
  }

  .world-app-content-scroll {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
}

.world-topbar>div:first-child>span {
  color: #c6bbd4
}

.world-topbar .world-icon-button {
  background: #0b1923b8;
  border-color: #8d79554d
}

.world-topbar .world-language,
.world-topbar .world-theme-switcher {
  background: #0b1923cc
}

@media(min-width:851px) {
  .world-app-main:has(.world-page, .dashboard-world)>.world-topbar {
    position: absolute;
    inset: 0 0 auto;
    height: calc(64px + var(--sat));
    background: linear-gradient(90deg, #06101825 0%, #06101860 calc(var(--world-banner-width) - 5%), #061018 var(--world-banner-width));
    border: 0
  }

  .world-app-main .world-page {
    height: 100dvh
  }

  .world-app-main .world-page .world-right {
    padding-top: 64px
  }

  /* Guild section routes sit inside a WorldPage with a -24px outer margin.
     Account for that offset so their navigation clears the absolute topbar. */
  .world-app-main .guild-subpage .world-right {
    padding-top: 88px
  }

  .world-app-main .guild-subpage .world-story-actions {
    top: 88px
  }

  .world-app-main .guild-subpage .world-right {
    padding-left: 24px;
    padding-right: 24px
  }

  .world-app-main .guild-subpage .world-content {
    width: 100%;
    padding: 8px 0 24px;
    box-sizing: border-box
  }

  .guild-subpage .guild-section-nav {
    flex-wrap: wrap;
    overflow: visible
  }

  .world-app-main .world-story-actions {
    top: 80px
  }

  .world-app-main .dashboard-world {
    height: 100dvh !important
  }

  .world-app-main .dashboard-world>div.relative.grid>section:last-child {
    padding-top: 84px
  }

  .world-app-main .dashboard-story>div.absolute:not(.bottom-0) {
    top: 80px
  }

  .world-app-main .dashboard-story>div.absolute.bottom-0 {
    top: auto;
    bottom: 0
  }

  .world-app-main .world-story-copy {
    max-height: calc(100% - 64px)
  }
}

.heroic-category-icon {
  width: 96px;
  height: 96px;
  object-fit: contain
}

.heroic-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 4px 0 22px;
  border-bottom: 1px solid #bda16b35;
  margin-bottom: 20px
}

.heroic-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid #344857;
  border-radius: 9px;
  background: #091722;
  color: #8f96ac;
  position: relative
}

.heroic-step-number {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: 1px solid #53616d;
  border-radius: 50%;
  font: 20px Georgia, serif;
  background: #0d202c
}

.heroic-steps small {
  display: block;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 4px
}

.heroic-steps strong {
  font: 17px/1.3 Georgia, serif;
  display: block
}

.heroic-steps li[aria-current=step] {
  color: #f0d69e;
  border-color: #c1a065;
  background: linear-gradient(120deg, #b9933828, #0b1b27);
  box-shadow: inset 0 0 16px #d9b56d08
}

.heroic-steps [aria-current=step] .heroic-step-number {
  border-color: #e6c682;
  color: #ffe3a8;
  box-shadow: 0 0 16px #d9b56d20;
  background: #b993381c
}

.heroic-steps .is-complete {
  color: #a8d3c2;
  border-color: #568579
}

.heroic-steps .is-complete .heroic-step-number {
  color: #a8d3c2;
  border-color: #568579
}

@media(max-width:650px) {
  .heroic-steps {
    gap: 6px
  }

  .heroic-steps li {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 5px;
    gap: 8px
  }

  .heroic-steps strong {
    font-size: 13px
  }

  .heroic-steps small {
    font-size: 9px;
    letter-spacing: 0
  }

  .heroic-step-number {
    width: 32px;
    height: 32px
  }

  .heroic-category-icon {
    width: 76px;
    height: 76px
  }
}

.world-location-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  overflow-wrap: anywhere
}

.world-location-details h3 {
  font: 24px/1.25 Georgia, serif;
  color: #eed8ab
}

.world-location-details p {
  font-size: 14px;
  line-height: 1.7;
  color: #b5b1cb;
  margin: 0
}

.world-map-canvas .world-location-details h3 {
  font-size: 20px
}

.world-map-canvas .world-location-details .world-button {
  color: #eed8ab
}

.world-map-canvas .leaflet-popup-close-button {
  color: #eed8ab
}

@media(min-width:851px) {
  .world-map-layout .world-map-tools {
    max-height: calc(100dvh - 64px - 2 * var(--map-page-padding));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #9a8153 #08141f;
    padding-right: 4px
  }

  .world-map-tools>.world-panel,
  .world-map-tools>.world-gold {
    flex-shrink: 0
  }
}

.world-chat-frame {
  position: relative;
  isolation: isolate;
  padding: 0;
  background: linear-gradient(135deg, #0c1c27, #07131d 65%);  
}

.world-chat-frame:before {
  display: none;
}

.world-chat-frame>aside {
  border-color: #bd9b6040
}

.world-chat-frame>aside>div:first-child,
.world-chat-frame>section>header,
.world-chat-frame>section>form {
  border-color: #bd9b6040
}

.world-chat-frame h1 {
  font-family: Georgia, serif;
  font-weight: 500;
  color: #eed8ab
}

.talent-path {
  min-width: 0;
  border: none;
  padding: 12px 8px 6px;
  background: transparent;
  box-shadow: none;
  overflow: visible
}

.talent-path>header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--path-color) 25%, transparent)
}

.talent-path-emblem {
  width: 46px;
  height: 46px;
  flex-shrink: 0
}

.talent-path header h2 {
  font: 21px Georgia, serif;
  color: #ece3d9
}

.talent-path header p {
  font: 12px Georgia, serif;
  color: var(--path-color);
  margin-top: 5px
}

.talent-path header>span {
  margin-left: auto;
  white-space: nowrap;
  font: 16px Georgia, serif;
  color: var(--path-color)
}

.talent-path-canvas {
  position: relative;
  margin: 10px 6px 0
}

.talent-path-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible
}

.talent-path-lines path {
  fill: none;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round
}

.path-locked {
  stroke: color-mix(in srgb, var(--path-color) 32%, #1b2933)
}

.path-open {
  stroke: var(--path-color);
  filter: drop-shadow(0 0 4px var(--path-color))
}

.talent-path-node {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 118px;
  max-width: 70%;
  padding: 0 !important;
  background: transparent;
  border: 0 !important;
  border-radius: 0 !important;
  text-align: center;
  color: #b2acc5;
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important
}

.talent-path-icon {
  width: 86px;
  height: 86px;
  object-fit: contain;
  opacity: .58;
  transition: filter .2s, opacity .2s
}

.talent-path-node strong {
  font: 14px/1.25 Georgia, serif;
  margin-top: 3px;
  color: #cbc4d9
}

.talent-path-node>span {
  font: 13px Georgia, serif;
  margin-top: 4px
}

.talent-path-node small {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 9px;
  color: #9e9bb2;
  margin-top: 5px
}

.talent-path-node.is-learned .talent-path-icon,
.talent-path-node:hover .talent-path-icon,
.talent-path-node.is-selected .talent-path-icon {
  opacity: 1
}

.talent-path-node.is-selected .talent-path-icon {
  filter: drop-shadow(0 0 7px var(--path-color))
}

.talent-path-node.is-selected strong {
  color: #f0d69e
}

.talent-path-node:focus,
.talent-path-node:focus-visible,
.talent-path-node:active {
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important
}

.talent-path-node.is-learned>span {
  color: var(--path-color)
}


.world-error-page {
  position: relative;
  isolation: isolate;
  max-width: 740px;
  margin: clamp(24px, 8vh, 100px) auto;
  padding: clamp(36px, 5vw, 64px);
  text-align: center;
  border: 1px solid #bda16b80;
  border-radius: 20px 6px 20px 6px;
  background: radial-gradient(ellipse at top, #bda16b20, transparent 65%), linear-gradient(135deg, #10232e, #07131c);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.world-error-glow {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.22) 0%, rgba(217, 181, 109, 0.08) 50%, transparent 75%);
  pointer-events: none;
  border-radius: 50%;
  animation: campfireGlow 4s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes campfireGlow {
  0% {
    opacity: 0.65;
    transform: translateX(-50%) scale(0.95);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1.08);
  }
}

.world-error-orbit {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 144px;
  height: 144px;
  border: 2px solid #bda16b80;
  border-radius: 50%;
  margin: 0 auto 28px;
  background: linear-gradient(135deg, rgba(16, 35, 46, 0.85), rgba(7, 19, 28, 0.95));
  box-shadow: 0 0 50px rgba(217, 181, 109, 0.2), inset 0 0 20px rgba(217, 181, 109, 0.15);
  padding: 6px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.world-error-orbit:hover {
  transform: scale(1.03);
  box-shadow: 0 0 60px rgba(245, 158, 11, 0.32), inset 0 0 25px rgba(217, 181, 109, 0.25);
}

.world-error-pixel-art {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(217, 181, 109, 0.6);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6);
}

.world-error-icon {
  width: 64px;
  height: 64px;
  color: #e0bd78;
  stroke-width: 1.2;
}

.world-error-sparkle {
  position: absolute;
  right: -2px;
  top: -2px;
  color: #f5d078;
  font-size: 26px;
  filter: drop-shadow(0 0 8px rgba(245, 208, 120, 0.8));
  animation: starSparkle 3s ease-in-out infinite alternate;
}

@keyframes starSparkle {
  0% {
    transform: scale(0.9) rotate(-10deg);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.25) rotate(15deg);
    opacity: 1;
  }
}

.world-error-page h1 {
  position: relative;
  z-index: 1;
  font: 500 clamp(28px, 4vw, 42px) / 1.2 Georgia, serif;
  color: #eed8ab;
  margin: 18px 0 12px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.world-error-page p {
  position: relative;
  z-index: 1;
  color: #b5b1cb;
  font-size: 16px;
  line-height: 1.8;
  max-width: 560px;
  margin: 0 auto;
}

.world-divider {
  position: relative;
  z-index: 1;
  color: #bda16b;
  font-size: 14px;
  margin: 24px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.world-divider::before,
.world-divider::after {
  content: '';
  height: 1px;
  width: 80px;
  background: linear-gradient(90deg, transparent, rgba(189, 161, 107, 0.5), transparent);
}

.world-error-actions {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.world-button-primary {
  background: linear-gradient(135deg, rgba(217, 181, 109, 0.25), rgba(16, 35, 46, 0.9));
  border-color: #f1d593;
  color: #fff3d1;
  box-shadow: 0 4px 16px rgba(217, 181, 109, 0.15);
}

.world-button-primary:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(217, 181, 109, 0.3));
  border-color: #ffe6a3;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.25);
}


/* Show every existing rank horizontally; rank two unlocks the next talent. */
.talent-tree-scroll {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  padding: 12px 2px;
  scrollbar-width: thin;
  scrollbar-color: #b99b60 #08141e
}

.talent-tree-scroll:focus-visible {
  outline: 2px solid #d9b56d;
  outline-offset: -2px
}

.talent-branches {
  display: grid;
  grid-template-columns: repeat(var(--branch-count, 3), minmax(200px, 1fr));
  gap: 12px;
  width: 100%;
  align-items: stretch
}

.talent-branches.talent-branches-single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 480px;
  margin-inline: auto
}

.talent-rank-tree {
  padding: 22px 0 14px
}

.talent-rank-row {
  display: grid;
  grid-template-columns: repeat(var(--rank-count), minmax(0, 1fr));
  align-items: stretch
}

.talent-rank-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 8px 6px 12px !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 14px;
  background: transparent !important;
  color: #aaa5bf;
  text-align: center;
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease, color .2s ease
}

.talent-rank-icon {
  position: relative;
  width: 64px;
  height: 64px;
  max-width: 100%;
  opacity: .55;
  transition: filter .2s, opacity .2s, transform .2s
}

.talent-rank-node strong {
  font: 11px/1.3 Georgia, serif;
  overflow-wrap: anywhere;
  color: #ccc5d9;
  margin-top: 5px;
  transition: color .2s
}

.talent-rank-number {
  color: var(--path-color);
  font-size: 9px;
  margin-top: 5px
}

.talent-rank-value {
  font-size: 9px;
  line-height: 1.35;
  margin: 6px 0;
  color: #c9bfa7
}

.talent-rank-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 8px;
  margin-top: auto;
  padding-top: 6px
}

.talent-rank-link {
  position: absolute;
  top: 31px;
  right: calc(50% + 32px);
  width: calc(100% - 64px);
  height: 1px;
  background: color-mix(in srgb, var(--path-color) 30%, transparent);
  pointer-events: none
}

.talent-rank-link:after {
  content: '';
  position: absolute;
  right: 0;
  top: -2px;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--path-color);
  border-right: 1px solid var(--path-color);
  transform: rotate(45deg)
}

.talent-rank-link.is-open {
  background: var(--path-color);
  box-shadow: 0 0 5px var(--path-color)
}

.talent-rank-node.is-selected,
.talent-rank-node:focus,
.talent-rank-node:focus-visible,
.talent-rank-node:active,
.talent-rank-node:hover {
  background: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important
}

.talent-rank-node.is-selected .talent-rank-icon {
  filter: drop-shadow(0 0 12px var(--path-color)) brightness(1.15) !important;
  transform: scale(1.08)
}

.talent-rank-node.is-selected strong {
  color: #f1d49b !important;
  text-shadow: 0 0 10px color-mix(in srgb, var(--path-color) 60%, transparent)
}

.talent-rank-node.is-learned .talent-rank-status {
  color: var(--path-color)
}

.talent-rank-node.is-learned .talent-rank-icon {
  opacity: 1
}

.talent-tier-connection {
  height: 48px;
  position: relative;
  margin-bottom: 6px
}

.talent-tier-connection svg {
  width: 100%;
  height: 100%;
  overflow: visible
}

.talent-tier-connection path {
  fill: none;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round
}

.talent-tier-connection small {
  position: absolute;
  left: 53%;
  top: 12px;
  font-size: 8px;
  color: #a6a0b8
}

.talent-rank-prerequisite {
  font-size: 10px;
  padding: 12px 0;
  color: #a6a0b8
}

/* Shared feedback surfaces: navy panels with restrained status accents. */
.world-notice,
.world-error {
  --notice-accent: #d9b56d;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--notice-accent) 45%, #243947);
  border-left: 3px solid var(--notice-accent);
  border-radius: 10px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--notice-accent) 9%, #0b1923), #08141e);
  box-shadow: inset 0 1px 0 #ffffff06;
  color: #dce2e9;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  overflow-wrap: anywhere
}

.world-notice>svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--notice-accent)
}

.world-notice>div {
  min-width: 0
}

.world-notice-success {
  --notice-accent: #87c9ad
}

.world-notice-error,
.world-error {
  --notice-accent: #dd929b
}

.world-notice-info {
  --notice-accent: #d9b56d
}

.world-error {
  display: block
}

.world-notification-menu {
  max-width: calc(100vw - 32px);
  border: 1px solid #b79b635e;
  border-radius: 12px;
  background: linear-gradient(140deg, #142631, #08141e);
  box-shadow: 0 18px 55px #0008;
  overflow: hidden;
  color: #ddd5e5
}

.world-notification-menu>div:first-child,
.world-notification-menu>div:last-child {
  border-color: #b79b632b
}

.world-notification-item {
  border-bottom: 1px solid #b79b631c
}

.world-notification-item:hover {
  background: #d9b56d10
}

.world-notification-menu button,
.world-notification-menu a {
  color: #e2c58b
}

/* Dashboard metrics share one ornamental panel, like the reward overview. */
.dashboard-action-panel {
  container-type: inline-size
}

.dashboard-stat-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 18px 8px;
  border: 1px solid #ae92524d;
  border-radius: 10px;
  background: radial-gradient(ellipse at top, #23363d66, transparent 75%), linear-gradient(125deg, #0b1a24, #061018);
  box-shadow: inset 0 0 0 4px #07111a, 0 8px 24px #0002
}

.dashboard-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 14px 12px;
  text-align: center;
  min-width: 0
}

.dashboard-stat:nth-child(even):before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: linear-gradient(transparent, #a68c5055, transparent)
}

.dashboard-stat-icon {
  width: 44px;
  height: 44px;
  color: var(--stat-color);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--stat-color) 35%, transparent));
  margin-bottom: 5px
}

.dashboard-stat-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, #e7c27d 65%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, #e7c27d 12%, #0b1a24);
  color: #e7c27d;
}
.dashboard-stat-badge svg { width: 15px; height: 15px; }

.dashboard-stat-value {
  font: 500 clamp(28px, 4.5cqi, 40px)/1.15 Georgia, serif;
  color: #f2e9d9;
  overflow-wrap: anywhere;
  max-width: 100%
}

.dashboard-stat-label {
  font: 17px/1.35 Georgia, serif;
  color: #d0c8dc;
  max-width: 100%
}

.dashboard-stat-detail {
  font-size: 14px;
  line-height: 1.4;
  color: #aaa8ba
}

@container (min-width: 650px) {
  .dashboard-stat-strip:not(.is-three-cols) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .dashboard-stat-strip:not(.is-three-cols) .dashboard-stat:not(:first-child):before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 1px;
    background: linear-gradient(transparent, #a68c5055, transparent);
  }
}

@media (min-width: 768px) {
  .dashboard-stat-strip:not(.is-three-cols) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .dashboard-stat-strip:not(.is-three-cols) .dashboard-stat:not(:first-child):before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 1px;
    background: linear-gradient(transparent, #a68c5055, transparent);
  }
}

.dashboard-stat-strip.is-three-cols {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-stat-strip.is-three-cols .dashboard-stat:not(:first-child):before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: linear-gradient(transparent, #a68c5055, transparent);
}

@media (max-width: 640px) {
  .dashboard-stat-strip.is-three-cols {
    grid-template-columns: 1fr;
  }
  .dashboard-stat-strip.is-three-cols .dashboard-stat:not(:first-child):before {
    left: 14px;
    right: 14px;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, #a68c5055, transparent);
  }
}

/* Locked ranks styling: neutral when unselected, clearly highlighted when selected */
.talent-rank-node.is-locked .talent-rank-icon {
  filter: grayscale(1);
  opacity: .5
}

.talent-rank-node.is-locked:hover .talent-rank-icon {
  filter: grayscale(0.7) brightness(1.1);
  opacity: .8
}

.talent-rank-node.is-locked.is-selected .talent-rank-icon {
  filter: grayscale(0.55) drop-shadow(0 0 10px var(--path-color)) brightness(1.15) !important;
  opacity: .95 !important
}

.talent-rank-node.is-locked :is(strong, .talent-rank-number, .talent-rank-value, .talent-rank-status) {
  color: #9298a3
}

.talent-rank-node.is-locked.is-selected strong {
  color: #f1d49b !important
}

.talent-rank-node.is-locked.is-selected .talent-rank-status {
  color: #e2c58b !important;
  font-weight: 600
}

.talent-rank-node.is-locked.is-selected .talent-rank-number {
  color: var(--path-color) !important;
  font-weight: bold
}

.talent-rank-node.is-available .talent-rank-icon {
  opacity: 1
}

.talent-rank-node.is-available .talent-rank-status {
  color: var(--path-color)
}

.talent-single-node {
  width: 100%;
  min-height: 158px
}

.talent-single-node .talent-rank-icon {
  width: 76px;
  height: 76px
}

.talent-single-node strong {
  max-width: 170px
}

.talent-rank-markers {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 6px 0 3px
}

.talent-rank-markers>span {
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  border: 1px solid #727987;
  border-radius: 1px;
  background: #17212b
}

.talent-rank-markers>span.is-filled {
  border-color: var(--path-color);
  background: var(--path-color);
  box-shadow: 0 0 6px color-mix(in srgb, var(--path-color) 45%, transparent)
}

.talent-path-compact .talent-tier-connection {
  height: 40px
}

.talent-path-compact>header {
  flex-wrap: wrap
}

.evidence-type-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px
}

.world-page .evidence-type-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 112px;
  padding: 14px 8px;
  border: 1px solid #536172;
  border-radius: 10px;
  background: linear-gradient(145deg, #10212c, #08131d);
  color: #bcb6cf;
  text-align: center;
  cursor: pointer
}

.evidence-type-option>svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.6
}

.evidence-type-option>span {
  font: 15px/1.3 Georgia, serif
}

.evidence-type-option>small {
  font-size: 10px;
  color: #c9b98f
}

.world-page .evidence-type-option[aria-pressed=true] {
  border-color: #e1bd72;
  background: linear-gradient(145deg, #61502b55, #10212c);
  color: #f3d69e;
  box-shadow: inset 0 0 18px #d9b56d12
}

.evidence-type-option:hover:not(:disabled) {
  border-color: #d9b56d
}

.evidence-type-option:disabled {
  opacity: .5;
  cursor: wait
}

.evidence-photo-preview {
  margin: 16px auto 0;
  max-width: 560px;
  padding: 8px;
  border: 1px solid #b99b6055;
  border-radius: 10px;
  background: #061018
}

.evidence-photo-preview img {
  display: block;
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 6px
}

.evidence-photo-preview figcaption {
  font-size: 12px;
  line-height: 1.5;
  color: #b9b3c7;
  overflow-wrap: anywhere;
  padding: 8px 4px 2px;
  text-align: center
}

@media(max-width:650px) {
  .evidence-type-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px
  }

  .world-page .evidence-type-option {
    min-height: 100px
  }

  .evidence-type-option>span {
    font-size: 13px
  }
}

.review-evidence {
  padding: 18px;
  border: 1px solid #bfa16b55;
  border-radius: 12px;
  background: linear-gradient(130deg, #10212c, #08131d)
}

.review-evidence>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.review-evidence h3 {
  font: 22px Georgia, serif;
  color: #ebd5a5
}

.review-evidence>header>span {
  font-size: 12px;
  color: #b9b2ca
}

.review-evidence-hint {
  font-size: 12px;
  line-height: 1.6;
  color: #a9a5ba;
  margin: 10px 0 18px
}

.review-evidence-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start
}

.review-evidence-group {
  min-width: 0
}

.review-evidence-group h4 {
  font: 18px Georgia, serif;
  color: #e4ce9e;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px
}

.review-evidence-group h4 small {
  font: 11px sans-serif;
  padding: 3px 7px;
  border: 1px solid #ad94574d;
  border-radius: 99px;
  color: #c6bdd1
}

.review-evidence-group>div {
  display: grid;
  gap: 12px
}

.review-evidence-card {
  min-width: 0;
  border: 1px solid #3c505f;
  border-radius: 9px;
  overflow: hidden;
  background: #0a1822
}

.review-evidence-media {
  height: 240px;
  display: grid;
  place-items: center;
  background: #040c12
}

.review-evidence-media>a {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0
}

.review-evidence-media img,
.review-evidence-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block
}

.review-evidence-media>div {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 16px;
  color: #b7b1c7;
  font-size: 13px
}

.review-evidence-caption {
  padding: 12px;
  display: grid;
  gap: 8px
}

.review-evidence-caption>span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #dec790;
  font-size: 12px
}

.review-evidence-caption>p {
  font-size: 12px;
  color: #aaa6ba;
  overflow-wrap: anywhere
}

.review-evidence-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  margin-top: 2px
}

.review-evidence-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 5px;
  background: #06111a;
  border: 1px solid #1f303e;
  color: #b8c7d5
}

@media(max-width:650px) {
  .review-evidence-groups {
    grid-template-columns: 1fr
  }

  .review-evidence {
    padding: 12px
  }

  .review-evidence-media {
    height: 210px
  }
}

.review-evidence-thumbnail {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #040c12;
  cursor: pointer
}

.review-evidence-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid #dfc27e;
  border-radius: 50%;
  background: #061018dc;
  color: #f2d89c;
  font-size: 23px;
  box-shadow: 0 0 25px #0009
}

.dashboard-player-progress {
  padding: 8px 0 12px;
  flex-shrink: 0
}

/* Give the banner's hero class the same visual weight as prominent class badges. */
.world-story .world-class {
  gap: 18px
}

.world-story .world-class>img {
  width: 80px;
  height: 80px;
  flex-shrink: 0
}

.world-story .world-class>div {
  min-width: 0
}

.world-story .world-class small {
  font-size: 14px
}

.world-story .world-class p {
  font: 500 28px/1.25 Georgia, serif;
  margin-top: 6px;
  overflow-wrap: anywhere
}

/* Guild identity belongs to the illustrated hall banner; the content column stays free for activity. */
.guild-story-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  margin-top: 18px;
  padding-top: 17px;
  border-top: 1px solid #b99b6045
}

.guild-story-emblem {
  display: grid;
  place-items: center;
  width: 68px;
  height: 78px;
  padding: 7px 7px 18px;
  background: linear-gradient(145deg, #1a3142, #102334);
  clip-path: polygon(0 0, 100% 0, 100% 76%, 50% 100%, 0 76%);
  filter: drop-shadow(0 6px 12px #0007)
}

.guild-story-emblem.has-bronze-frame {
  background: linear-gradient(145deg, #c09a54, #71542d 12%, #172c3d 14%, #0c1c29 82%, #77592f 84%, #c09a54)
}

.guild-story-emblem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain
}

.guild-story-emblem svg {
  width: 34px;
  height: 34px;
  color: #ddbd77;
  stroke-width: 1.7
}

.guild-story-facts {
  display: grid;
  gap: 10px;
  min-width: 0
}

.guild-story-facts>span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 9px;
  align-items: center;
  min-width: 0
}

.guild-story-facts svg {
  grid-row: 1/3;
  width: 19px;
  height: 19px;
  color: #d8b565;
  stroke-width: 1.7
}

.guild-story-facts small {
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9895a8
}

.guild-story-facts strong {
  font: 500 15px/1.35 Georgia, serif;
  color: #ead7ad;
  overflow-wrap: anywhere
}

.guild-detail-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 15px;
  border-bottom: 1px solid #344857
}

.guild-section-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  overflow-x: auto;
  border: 1px solid #344857;
  border-radius: 10px;
  background: #0b1923;
}

.guild-section-nav>a:not(.world-button) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #b8c0ca;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.guild-section-nav>a:not(.world-button):hover { background:#152633; color:#f1d28c; }
.guild-section-nav>a[aria-current="page"] { background:#382f1b; border-color:#92702c; color:#f1d28c; }

.guild-section-feedback {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid #40525d;
  border-radius:8px;
  background:#10212c;
  color:#d2d9e0;
  font-size:13px;
}
.guild-section-feedback.is-success { border-color:#287451; background:#0d2a20; color:#9ce0bb; }
.guild-section-feedback.is-error { border-color:#833c47; background:#301820; color:#f3afb4; }

.guild-detail-toolbar-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto
}

.guild-detail-toolbar-actions .world-button {
  min-height: 36px;
  padding: 8px 12px;
  font-size: 11px
}

.guild-detail-toolbar-actions .world-button svg {
  width: 15px;
  height: 15px
}

.guild-detail-access {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid #4c9b8070;
  border-radius: 99px;
  background: #174b3b35;
  color: #88d1b2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase
}

.guild-detail-access svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0
}

.guild-detail-apply {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px
}

.guild-detail-apply-hint {
  width: 100%;
  margin: 0;
  color: #a9b4c2;
  font-size: 12px;
  line-height: 1.4
}

.guild-detail-apply .world-notice {
  max-width: 360px;
  padding: 7px 11px;
  font-size: 11px
}

@media(max-width:650px) {
  .guild-story-summary {
    grid-template-columns: 1fr
  }

  .guild-story-emblem {
    width: 60px;
    height: 70px
  }

  .guild-detail-toolbar-actions {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0
  }

  .guild-detail-toolbar-actions .world-button {
    flex: 1 1 150px
  }

  .guild-detail-apply {
    width: 100%
  }

  .guild-detail-apply .world-notice {
    max-width: none;
    width: 100%
  }
}

.guild-treasury {
  display: grid;
  gap: 24px
}

.guild-treasury-state {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px;
  border: 1px solid #40525d;
  border-radius: 12px;
  background: linear-gradient(135deg, #10212c, #07131c);
  color: #b9b5c9;
  font-size: 14px
}

.guild-treasury-state svg {
  width: 18px;
  height: 18px;
  color: #d9b56d
}

.guild-treasury-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  overflow: hidden;
  padding: 26px;
  border: 1px solid #b99b6065;
  border-radius: 14px 4px 14px 4px;
  background: #08151f;
  box-shadow: inset 0 0 0 4px #06101866
}

.guild-treasury-hero:after {
  content: '◇';
  position: absolute;
  right: 19%;
  bottom: -52px;
  color: #d9b56d0d;
  font: 150px Georgia, serif;
  transform: rotate(45deg);
  pointer-events: none
}

.guild-treasury-heading {
  display: flex;
  align-items: center;
  gap: 17px;
  min-width: 0
}

.guild-treasury-heading>div {
  min-width: 0
}

.guild-treasury-gem {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border: 1px solid #c7a76175;
  border-radius: 50%;
  background: #08131c;
  box-shadow: 0 0 22px #d9b56d12
}

.guild-treasury-gem svg {
  width: 28px;
  height: 28px;
  color: #e3c477;
  stroke-width: 1.6
}

.guild-treasury-heading small {
  color: #c19e59;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em
}

.guild-treasury-heading h3 {
  margin: 3px 0 4px;
  color: #eed8a8;
  font: 500 clamp(25px, 2.6vw, 36px)/1.2 Georgia, serif
}

.guild-treasury-heading p {
  max-width: 640px;
  color: #b8b4c7;
  font-size: 13px;
  line-height: 1.6
}

.guild-treasury-balance {
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: end;
  min-width: 150px
}

.guild-treasury-balance small {
  color: #a7a2b5;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase
}

.guild-treasury-balance strong {
  color: #f0d28c;
  font: 600 clamp(34px, 4vw, 54px)/1 Georgia, serif
}

.guild-treasury-balance span {
  color: #c6a760;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase
}

.guild-treasury-notice {
  grid-column: 1/-1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid #b99b6035;
  color: #a9a7b7;
  font-size: 11px;
  line-height: 1.6
}

.guild-treasury-notice svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: #c9a85f
}

.guild-treasury-notice strong {
  color: #dfc278
}

.guild-treasury-catalog {
  display: grid;
  gap: 14px
}

.guild-treasury-catalog>header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px
}

.guild-treasury-catalog .world-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #d9b56d
}

.guild-treasury-catalog .world-eyebrow svg {
  width: 18px;
  height: 18px
}

.guild-treasury-catalog header p {
  margin-top: 7px;
  color: #8f91a1;
  font-size: 12px
}

.guild-treasury-progress {
  flex-shrink: 0;
  padding: 7px 11px;
  border: 1px solid #b99b6040;
  border-radius: 99px;
  color: #aaa6b5;
  font-size: 11px
}

.guild-treasury-progress strong {
  color: #e0c47f;
  font-size: 15px
}

.guild-unlock-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px
}

.guild-unlock-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  padding: 18px;
  border: 1px solid #3c505f;
  border-radius: 12px;
  background: #08151f;
  box-shadow: inset 0 1px 0 #ffffff05;
  transition: transform .2s, border-color .2s, background .2s
}

.guild-unlock-card:hover {
  transform: translateY(-2px);
  border-color: #a78e5d80
}

.guild-unlock-card.is-unlocked {
  border-color: #b99b6090;
  background: #091a27
}

.guild-unlock-card.is-locked {
  filter: saturate(.7)
}

.guild-unlock-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid #b99b6055;
  border-radius: 50%;
  background: #061018;
  color: #d9b56d
}

.guild-unlock-icon svg {
  width: 23px;
  height: 23px;
  stroke-width: 1.6
}

.guild-unlock-card.is-locked .guild-unlock-icon {
  border-color: #42515c;
  color: #77818d
}

.guild-unlock-price {
  align-self: center;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #e2c276;
  font: 600 12px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: nowrap
}

.guild-unlock-price svg {
  width: 14px;
  height: 14px
}

.guild-unlock-copy {
  grid-column: 1/-1;
  min-height: 82px
}

.guild-unlock-copy h5 {
  color: #e9dcc2;
  font: 500 20px/1.25 Georgia, serif
}

.guild-unlock-copy p {
  margin-top: 7px;
  color: #a9a6b5;
  font-size: 12px;
  line-height: 1.55
}

.guild-unlock-footer {
  grid-column: 1/-1;
  align-self: end;
  padding-top: 13px;
  border-top: 1px solid #3b4b563d
}

.guild-unlock-footer .world-button {
  width: 100%;
  justify-content: center;
  min-height: 38px;
  font-size: 11px
}

.guild-unlock-footer .world-button svg {
  width: 15px;
  height: 15px
}

.guild-unlock-status {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #e2c477;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase
}

.guild-unlock-status svg {
  width: 16px;
  height: 16px
}

.guild-unlock-status.is-locked {
  color: #7f8894
}

.guild-treasury-ledger {
  display: grid;
  gap: 12px
}

.guild-treasury-ledger>h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #d8cdb8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase
}

.guild-treasury-ledger>h4 svg {
  width: 17px;
  height: 17px;
  color: #d9b56d
}

.guild-treasury-ledger>div {
  overflow: hidden;
  border: 1px solid #3c505f;
  border-radius: 10px
}

.guild-treasury-ledger article {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 17px;
  background: #091721;
  border-bottom: 1px solid #344752
}

.guild-treasury-ledger article:last-child {
  border-bottom: 0
}

.guild-treasury-ledger article>div:last-child {
  text-align: right;
  flex-shrink: 0
}

.guild-treasury-ledger article strong {
  color: #d7d2c8;
  font-size: 12px
}

.guild-treasury-ledger article p,
.guild-treasury-ledger article small {
  display: block;
  margin-top: 5px;
  color: #858c9b;
  font-size: 10px;
  line-height: 1.5
}

.guild-treasury-ledger .is-credit {
  color: #88cdae
}

.guild-treasury-ledger .is-debit {
  color: #e1bd73
}

.guild-treasury-empty {
  padding: 22px;
  color: #9295a3;
  font-size: 12px;
  background: #091721
}

@media(max-width:1050px) {
  .guild-unlock-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:620px) {
  .guild-treasury-hero {
    grid-template-columns: 1fr;
    padding: 20px
  }

  .guild-treasury-balance {
    justify-items: start;
    min-width: 0
  }

  .guild-treasury-notice {
    grid-column: 1
  }

  .guild-unlock-grid {
    grid-template-columns: 1fr
  }

  .guild-treasury-ledger article {
    flex-direction: column
  }

  .guild-treasury-ledger article>div:last-child {
    text-align: left
  }
}

/* Guild announcements and common table share the hall's navy and gold visual language. */
.guild-news,
.guild-stammtisch {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 100%;
}

.guild-section-hero,
.guild-stammtisch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 22px 24px;
  border: 1px solid #b99b6055;
  border-radius: 14px 4px 14px 4px;
  background: radial-gradient(circle at 12% 0, #d8b56515, transparent 40%), linear-gradient(125deg, #142833, #08151f 72%);
  box-shadow: inset 0 0 0 4px #06101855
}

.guild-section-hero h3,
.guild-stammtisch-header h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ead6aa;
  font: 500 clamp(22px, 2.2vw, 30px)/1.25 Georgia, serif
}

.guild-section-hero h3 svg {
  width: 25px;
  height: 25px;
  color: #d9b56d;
  stroke-width: 1.6
}

.guild-section-hero p {
  max-width: 650px;
  margin-top: 6px;
  color: #aaa8b8;
  font-size: 12px;
  line-height: 1.6
}

.guild-section-hero>.world-button {
  flex-shrink: 0
}

.guild-news-editor {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid #b99b606b;
  border-radius: 12px;
  background: linear-gradient(140deg, #10222d, #08141e);
  box-shadow: 0 14px 35px #0003
}

.guild-news-editor-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding-bottom: 14px;
  border-bottom: 1px solid #b99b6035
}

.guild-news-editor-heading h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #e3c987;
  font: 500 19px Georgia, serif
}

.guild-news-editor-heading h4 svg {
  width: 20px;
  height: 20px
}

.guild-news-cancel {
  color: #949aaa;
  font-size: 11px
}

.guild-news-cancel:hover {
  color: #e1c47f
}

.guild-news-editor label {
  display: block;
  color: #a9a6b6;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase
}

.guild-news-editor .guild-news-pin-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.guild-news-pin-option input[type=checkbox] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
}

.guild-news-editor input:not([type=checkbox]),
.guild-news-editor select,
.guild-news-editor textarea {
  width: 100%;
  margin-top: 6px;
  padding: 11px 12px;
  border: 1px solid #465966;
  border-radius: 7px;
  background: #07131d;
  color: #e1e5ec;
  font-size: 12px;
  outline: 0
}

.guild-news-editor textarea {
  resize: vertical;
  line-height: 1.6
}

.guild-news-editor input:focus,
.guild-news-editor select:focus,
.guild-news-editor textarea:focus {
  border-color: #d2af67;
  box-shadow: 0 0 0 2px #d9b56d14
}

.guild-news-editor input::placeholder,
.guild-news-editor textarea::placeholder {
  color: #778392
}

.guild-news-editor input[type=checkbox] {
  accent-color: #c9a456
}

.guild-empty-state {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px;
  border: 1px dashed #566571;
  border-radius: 12px;
  background: radial-gradient(circle at center, #18293666, transparent 62%);
  text-align: center;
  color: #888e9b
}

.guild-empty-state>svg {
  width: 42px;
  height: 42px;
  color: #8a744c;
  stroke-width: 1.3
}

.guild-empty-state strong {
  color: #bdb8ac;
  font: 500 17px Georgia, serif
}

.guild-empty-state p {
  max-width: 560px;
  color: #828998;
  font-size: 12px;
  line-height: 1.6
}

.guild-news-list {
  display: grid;
  gap: 14px
}

.guild-news-card {
  position: relative;
  display: grid;
  gap: 15px;
  padding: 21px 22px;
  border: 1px solid #3c505f;
  border-radius: 11px;
  background: linear-gradient(130deg, #10212c, #08141e);
  box-shadow: inset 0 1px 0 #ffffff05
}

.guild-news-card.is-pinned {
  border-color: #b99b6085;
  background: radial-gradient(circle at 0 0, #d8b56515, transparent 36%), linear-gradient(130deg, #142632, #08141e);
  box-shadow: inset 3px 0 #d9b56d
}

.guild-news-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid #526470;
  border-radius: 99px;
  color: #aeb6c2;
  background: #15232d;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase
}

.guild-news-badge.is-pinned {
  border-color: #b99756;
  color: #e4c779;
  background: #7d61252b
}

.guild-news-badge.is-event {
  border-color: #8f77aa;
  color: #c6afd8;
  background: #392b4938
}

.guild-news-badge.is-announcement {
  border-color: #a68a51;
  color: #d8c18f;
  background: #6a532a30
}

.guild-news-title {
  padding-top: 4px;
  color: #e9dcc2;
  font: 500 22px/1.3 Georgia, serif
}

.guild-news-content {
  color: #c1becc;
  font-size: 13px;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere
}

.guild-news-author {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid #40515c66;
  color: #858d9c;
  font-size: 10px
}

.guild-news-author strong {
  color: #b9b2a6
}

.guild-stammtisch {
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  gap: 16px;
}

.guild-stammtisch-header>div {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap
}

.guild-stammtisch-header>span {
  color: #8e94a2;
  font-size: 10px;
  letter-spacing: .05em
}

.guild-stammtisch-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #b99b605c;
  border-radius: 50%;
  background: #07131c;
  color: #d9b56d
}

.guild-stammtisch-icon svg {
  width: 22px;
  height: 22px
}

.guild-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid #4c9b8070;
  border-radius: 99px;
  color: #8bd3b4;
  background: #174b3b35;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase
}

.guild-live-badge svg {
  width: 12px;
  height: 12px
}

.guild-chat-stream {
  flex: 1;
  min-height: 440px;
  height: calc(100vh - 310px);
  max-height: none;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 20px;
  border: 1px solid #3b4f5c;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 40%, #15273555, transparent 55%), #07131c;
  scrollbar-width: thin;
  scrollbar-color: #9b814f #0a1822
}

.guild-chat-stream>.guild-empty-state {
  height: 100%;
  min-height: 0;
  border: 0;
  background: none
}

.guild-chat-message {
  width: fit-content;
  max-width: min(85%, 880px);
  margin-right: auto
}

.guild-chat-message.is-own {
  margin-right: 0;
  margin-left: auto
}

.guild-chat-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 6px 6px;
  color: #8794a4;
  font-size: 9px
}

.guild-chat-meta>div {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap
}

.guild-chat-meta>div>span:not(.guild-chat-author) {
  padding: 2px 6px;
  border: 1px solid #40525d;
  border-radius: 99px;
  color: #909aaa
}

.guild-chat-author {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #cfc7b6;
  font-weight: 700
}

.guild-chat-author svg {
  width: 12px;
  height: 12px;
  color: #d9b56d
}

.guild-chat-bubble {
  padding: 13px 16px;
  border: 1px solid #455966;
  border-radius: 5px 16px 16px;
  background: linear-gradient(135deg, #142834, #10212c);
  color: #e0e5ec;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere
}

.guild-chat-message.is-own .guild-chat-bubble {
  border-color: #b99b606f;
  border-radius: 16px 5px 16px 16px;
  background: linear-gradient(135deg, #3a3425, #202822);
  color: #eee4d2
}

.guild-chat-message.is-own .guild-chat-author {
  color: #e0c47f
}

.guild-chat-pinned {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid #b99b6066;
  border-radius: 12px;
  background: #b99b6018;
  color: #e7c982;
  font-size: 12px;
}
.guild-chat-pinned span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guild-chat-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.guild-chat-reaction, .guild-chat-pin-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 27px;
  padding: 3px 7px;
  border: 1px solid #61707880;
  border-radius: 8px;
  background: #ffffff0b;
  color: #d9dee2;
  cursor: pointer;
  font-size: 12px;
}
.guild-chat-reaction.is-selected, .guild-chat-pin-button.is-selected { border-color: #d9b56d; background: #b99b6033; }
.guild-chat-poll { display: grid; gap: 6px; margin-top: 8px; padding: 11px; border: 1px solid #b99b6066; border-radius: 12px; background: #b99b6012; }
.guild-chat-poll strong { display: flex; align-items: center; gap: 6px; color: #e7c982; font-size: 12px; }
.guild-chat-poll-option { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border: 1px solid #61707880; border-radius: 8px; background: #ffffff0b; color: #e3e7ee; cursor: pointer; text-align: left; }
.guild-chat-poll-option.is-selected { border-color: #d9b56d; background: #b99b6033; }
.guild-chat-poll-option small { color: #e7c982; }

.guild-chat-tool-panel {
  width: 100%;
  padding: 16px;
  border: 1px solid #57636a;
  border-radius: 18px;
  background: linear-gradient(145deg, #112731, #0b1b25);
  box-shadow: 0 10px 28px #0002;
}

.guild-chat-tool-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #e6c782;
  font-size: 14px;
  font-weight: 700;
}

.guild-chat-emote-categories, .guild-chat-emote-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.guild-chat-emote-categories {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #b99b6040;
}

.guild-chat-category, .guild-chat-tool-button, .guild-chat-shop-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #b99b6059;
  border-radius: 999px;
  background: #b99b6012;
  color: #e7d6af;
  cursor: pointer;
}

.guild-chat-category { padding: 6px 11px; font-size: 12px; }
.guild-chat-category.is-selected, .guild-chat-tool-button.is-active { background: #b99b6033; border-color: #d9b56d; color: #ffe2a3; }
.guild-chat-emote-grid { max-height: 136px; overflow-y: auto; }
.guild-chat-emote-grid .guild-emote-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #b99b6033;
  border-radius: 10px;
  background: #ffffff0b;
  font-size: 20px;
  cursor: pointer;
}
.guild-chat-emote-grid .guild-emote-btn:hover { background: #b99b6033; border-color: #d9b56d; }
.guild-chat-shop-link { margin-top: 12px; padding: 7px 11px; font-size: 12px; }

.guild-chat-poll-form { display: grid; gap: 10px; }
.guild-chat-poll-form .guild-chat-tool-heading { margin-bottom: 0; }
.guild-chat-poll-form label { color: #c8d0d2; font-size: 12px; font-weight: 600; }
.guild-chat-poll-form input {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #607079;
  border-radius: 10px;
  background: #091821;
  color: #e3e7ee;
  outline: 0;
}
.guild-chat-poll-form input:focus { border-color: #d9b56d; box-shadow: 0 0 0 3px #d9b56d22; }
.guild-chat-poll-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.guild-chat-poll-options label { display: grid; gap: 5px; }
.guild-chat-poll-form-actions, .guild-chat-poll-form-actions>div { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.guild-chat-poll-form-actions { justify-content: space-between; margin-top: 2px; }
.guild-chat-poll-form-actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  border: 1px solid #b99b6059;
  border-radius: 9px;
  background: #b99b6012;
  color: #e7d6af;
  cursor: pointer;
  font-size: 12px;
}
.guild-chat-poll-form-actions .guild-chat-poll-submit { background: #c39343; border-color: #e0b464; color: #10212c; font-weight: 700; }
.guild-chat-poll-form-actions button:disabled { opacity: .6; cursor: wait; }

.guild-chat-composer {
  display: flex;
  align-items: center;
  gap: 10px
}

.guild-chat-composer>.guild-chat-input-wrap {
  position: relative;
  min-width: 0;
  flex: 1
}

.guild-chat-composer-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.guild-chat-tool-button { min-height: 48px; padding: 10px 14px; font-size: 13px; font-weight: 600; }
.guild-chat-tool-button:hover, .guild-chat-category:hover, .guild-chat-shop-link:hover { border-color: #d9b56d; background: #b99b6026; }

.guild-chat-composer input {
  width: 100%;
  min-height: 48px;
  padding: 12px 62px 12px 16px;
  border: 1px solid #4a5c68;
  border-radius: 24px;
  background: #091821;
  color: #e3e7ee;
  font-size: 13px;
  outline: 0
}

.guild-chat-composer input:focus {
  border-color: #d0ad64;
  box-shadow: 0 0 0 3px #d9b56d12
}

.guild-chat-composer input::placeholder {
  color: #7f8c9c
}

.guild-chat-composer .world-button {
  min-height: 48px;
  padding: 10px 20px;
  border-radius: 24px
}

.guild-chat-composer .world-button svg {
  width: 17px;
  height: 17px
}

@media(max-width:680px) {

  .guild-section-hero,
  .guild-stammtisch-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 19px
  }

  .guild-section-hero>.world-button {
    width: 100%;
    justify-content: center
  }

  .guild-news-editor {
    padding: 17px
  }

  .guild-news-editor form>div:last-child {
    align-items: flex-start;
    flex-direction: column
  }

  .guild-news-editor form>div:last-child .world-button {
    width: 100%;
    justify-content: center
  }

  .guild-chat-stream {
    height: 48vh;
    padding: 13px
  }

  .guild-chat-message {
    max-width: 90%
  }

  .guild-chat-composer {
    align-items: stretch;
    flex-direction: column
  }

  .guild-chat-composer-actions { justify-content: flex-end; flex-wrap: wrap; }
  .guild-chat-poll-options { grid-template-columns: 1fr; }

  .guild-chat-composer .world-button {
    justify-content: center
  }

  .guild-stammtisch-header>span {
    padding-left: 53px
  }
}

.dashboard-action-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: clamp(24px, 3vw, 40px);
  min-height: 190px;
  border: 1px solid #b89a60;
  border-radius: 12px 4px 12px 4px;
  background: #0b1923;
  box-shadow: inset 0 0 0 5px #06101888, 0 12px 35px #0002;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s
}

.dashboard-action-cta:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 5px #06101888, 0 16px 45px #0003
}

.dashboard-action-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  transform: scaleX(-1);
  z-index: -2
}

.dashboard-action-cta:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #07131af5, #07131ada 48%, #07131a60), linear-gradient(0deg, #07131a99, transparent);
  pointer-events: none
}

.dashboard-action-cta:after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid #c2a36526;
  border-radius: 8px 2px 8px 2px;
  pointer-events: none
}

.dashboard-identity-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 1px auto;
  align-items: center;
  gap: clamp(16px, 2.5vw, 30px)
}

.dashboard-identity-icon {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  filter: drop-shadow(0 5px 10px #0006)
}

.dashboard-identity-item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px
}

.dashboard-identity-item small {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #aaa5bf
}

.dashboard-identity-item strong {
  font: 500 clamp(25px, 3vw, 38px)/1.15 Georgia, serif;
  color: #eed7a8;
  overflow-wrap: anywhere
}

.dashboard-identity-divider {
  align-self: stretch;
  background: linear-gradient(transparent, #bd9b6070, transparent)
}

@media(max-width:560px) {
  .dashboard-identity-header {
    grid-template-columns: auto minmax(0, 1fr) 1px auto;
    gap: 10px;
    padding: 16px
  }

  .dashboard-identity-icon {
    width: 44px;
    height: 44px
  }

  .dashboard-identity-item small {
    font-size: 9px;
    letter-spacing: .1em
  }

  .dashboard-identity-item strong {
    font-size: 23px
  }
}

.profile-dashboard-identity {
  grid-template-columns: auto minmax(110px, 1fr) 1px minmax(82px, .55fr);
  gap: clamp(13px, 1.7vw, 22px);
  padding: 15px 16px;
  border: 1px solid #b99b6055;
  border-radius: 12px 4px 12px 4px;
  background: linear-gradient(120deg, #102532cc, #07131ccc);
  box-shadow: inset 0 0 0 3px #0610184d, 0 9px 24px #0002
}

.profile-dashboard-identity .dashboard-identity-icon {
  width: 68px;
  height: 68px
}

.profile-dashboard-identity .dashboard-identity-item small {
  font-size: 9px
}

.profile-dashboard-identity .dashboard-identity-item strong {
  font-size: clamp(22px, 2.4vw, 31px)
}

.profile-rank-identity strong {
  display: flex !important;
  align-items: center
}

.profile-rank-identity strong>span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid #e1bd73;
  border-radius: 9px;
  transform: rotate(45deg);
  background: radial-gradient(circle, #725b2c55, #07131c 72%);
  box-shadow: inset 0 0 0 4px #d9b56d0b, 0 0 18px #d9b56d18;
  color: #f0d797
}

.profile-rank-identity strong>span>b {
  transform: rotate(-45deg);
  font: 500 29px/1 Georgia, serif
}

@media(max-width:560px) {
  .profile-dashboard-identity {
    grid-template-columns: auto minmax(0, 1fr) 1px auto;
    gap: 10px;
    padding: 13px
  }

  .profile-dashboard-identity .dashboard-identity-icon {
    width: 44px;
    height: 44px
  }

  .profile-rank-identity strong>span {
    width: 44px;
    height: 44px;
    font-size: 24px
  }
}

.dashboard-action-title {
  font: 500 clamp(25px, 2.5vw, 34px)/1.2 Georgia, serif;
  color: #efd9aa;
  text-shadow: 0 2px 8px #0008
}

.dashboard-action-description {
  max-width: 620px;
  font-size: 15px;
  line-height: 1.75;
  color: #c6c2d4
}

/* Quick Actions */
.dashboard-latest-action {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 17px 20px 19px;
  border: 1px solid #b99b6055;
  border-radius: 12px 4px 12px 4px;
  background: radial-gradient(ellipse at 8% 0, #35423655, transparent 48%), linear-gradient(120deg, #102532, #07131c);
  box-shadow: inset 0 0 0 3px #0610184d, 0 9px 24px #0002;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.dashboard-latest-action:hover {
  transform: translateY(-2px);
  border-color: #d6b873;
  box-shadow: inset 0 0 0 3px #0610184d, 0 14px 28px #0005;
}

.dashboard-latest-action:focus-visible {
  outline: 2px solid #e4bd6a;
  outline-offset: 3px;
}

.dashboard-latest-action-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 15px;
  padding-bottom: 11px;
  border-bottom: 1px solid #b99b6033;
}

.dashboard-latest-action h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #eed7a8;
  font: 500 18px/1.25 Georgia, serif;
}

.dashboard-latest-action h2 svg {
  width: 17px;
  height: 17px;
  color: #e4bd6a;
}

.dashboard-latest-action-arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #c7aa6e;
  transition: transform .18s ease;
}

.dashboard-latest-action:hover .dashboard-latest-action-arrow {
  transform: translateX(3px);
}

.dashboard-latest-action-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dashboard-latest-action-icon {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 7px #0007);
}

.dashboard-latest-action-content {
  min-width: 0;
  flex: 1;
}

.dashboard-latest-action-main,
.dashboard-latest-action-details {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.dashboard-latest-action-main {
  justify-content: space-between;
}

.dashboard-latest-action-title {
  min-width: 0;
  overflow: hidden;
  color: #f2e9d9;
  font: 500 clamp(20px, 2.3cqi, 26px)/1.2 Georgia, serif;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-latest-action:hover .dashboard-latest-action-title,
.dashboard-latest-action:focus-visible .dashboard-latest-action-title {
  color: #f5cf74;
}

.dashboard-latest-action-xp {
  flex-shrink: 0;
  color: #f5cc6d;
  font: 600 17px/1.2 Georgia, serif;
}

.dashboard-latest-action-details {
  margin-top: 5px;
  flex-wrap: wrap;
  font-size: 14px;
}

.dashboard-latest-action-category {
  color: #ddb967;
  font-weight: 600;
}

.dashboard-latest-action-karma {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #2dd4a5;
  font-weight: 600;
}

.dashboard-latest-action-karma svg {
  width: 16px;
  height: 16px;
}

.dashboard-latest-action-date {
  margin-left: auto;
  color: #9ca3af;
  white-space: nowrap;
}

@container (max-width: 440px) {
  .dashboard-latest-action {
    padding: 15px;
  }

  .dashboard-latest-action-row {
    gap: 10px;
  }

  .dashboard-latest-action-icon {
    width: 48px;
    height: 48px;
  }

  .dashboard-latest-action-xp {
    font-size: 14px;
  }
}

.dashboard-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dashboard-quick-action {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 72px;
  padding: 12px 15px;
  border: 1px solid #3b5060;
  border-radius: 14px;
  background: #0d1d28;
  box-shadow: inset 0 1px #ffffff0a, 0 6px 16px #0002;
  color: #eee9df;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.dashboard-quick-action--featured {
  grid-column: 1 / -1;
  background: linear-gradient(110deg, #182d34, #0c1c27 70%);
  border-color: #a98a4e;
  color: #f5dfad;
}

.dashboard-quick-action:hover {
  transform: translateY(-2px);
  background: #182d3a;
  border-color: #c9a85e;
  box-shadow: inset 0 1px #ffffff12, 0 10px 22px #0004;
}

.dashboard-quick-action--featured:hover {
  background: linear-gradient(110deg, #263b3c, #142733 70%);
}

.dashboard-quick-action:focus-visible {
  outline: 2px solid #e4bd6a;
  outline-offset: 3px;
}

.dashboard-quick-action-icon,
.dashboard-quick-action-arrow {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #e4bd6a;
}

.dashboard-quick-action-icon {
  width: 42px;
  height: 42px;
}

.dashboard-quick-action-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dashboard-quick-action-arrow {
  width: 32px;
  height: 32px;
  margin-left: auto;
  color: #b7c2cc;
  transition: transform .18s ease, color .18s ease;
}

.dashboard-quick-action:hover .dashboard-quick-action-arrow {
  transform: translateX(2px);
  color: #f5dfad;
}

.dashboard-quick-action-label {
  min-width: 0;
}

.dashboard-quick-action--muted {
  color: #b6c0ca;
}

.dashboard-quick-action--muted .dashboard-quick-action-icon {
  color: #aab6c3;
}

@media(max-width:540px) {
  .dashboard-quick-actions {
    grid-template-columns: 1fr;
  }

  .dashboard-quick-action {
    min-height: 66px;
  }
}

@media(max-width:540px) {
  .dashboard-action-cta {
    padding: 24px 20px
  }
}

.notifications-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid #b99b605c;
  border-radius: 12px 4px 12px 4px;
  background: radial-gradient(ellipse at top left, #b9995820, transparent 65%), linear-gradient(120deg, #10212c, #07131c)
}

.notifications-heading h1 {
  font: 500 clamp(22px, 2.4vw, 27px)/1.2 Georgia, serif;
  letter-spacing: normal;
  color: #ecd6a7
}

.notifications-heading h1 svg {
  color: #dfbd78;
  width: 24px;
  height: 24px
}

.notifications-heading p {
  color: #b9b2ca;
  font-size: 13px;
  line-height: 1.4;
  margin-top: 4px
}

.notifications-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px
}

.notifications-actions>div {
  flex-wrap: wrap
}

.notifications-actions .world-button {
  font-size: 13px;
  min-height: 36px;
  padding: 7px 13px
}

.notifications-push-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid #80bfa54d;
  border-radius: 99px;
  color: #9dd6bb;
  background: #26463c33;
  font-size: 12px
}

.notifications-items {
  display: grid;
  gap: 8px
}

.notification-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #40525d;
  border-radius: 10px;
  background: linear-gradient(125deg, #10212bd9, #08141e);
  box-shadow: inset 0 0 0 3px #07111a66;
  transition: border-color .2s, background .2s
}

.notification-card:hover {
  border-color: #a48e605e
}

.notification-card.is-unread {
  border-color: #b99b60a3;
  border-left: 3px solid #e1bd73;
  background: linear-gradient(110deg, #66502a24, #0b1a24 65%)
}

.notification-emblem {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid #b99b6050;
  border-radius: 50%;
  background: #07131c;
  box-shadow: 0 0 20px #d9b56d09
}

.notification-emblem svg {
  width: 20px;
  height: 20px
}

.notification-copy h3 {
  font: 500 18px/1.3 Georgia, serif;
  color: #e8dcc2
}

.notification-card.is-unread h3 {
  color: #f0d398
}

.notification-message {
  font-size: 13px;
  line-height: 1.45;
  color: #b9b5c9;
  margin-top: 4px;
  white-space: pre-wrap;
  overflow-wrap: anywhere
}

.notification-copy>span {
  font-size: 10px;
  color: #8793a5;
  margin-top: 6px
}

.notification-copy:focus-visible {
  outline: 2px solid #dfbd78;
  outline-offset: 5px;
  border-radius: 4px
}

.notifications-page-number {
  align-self: center;
  font-size: 13px;
  color: #b9b2ca;
  padding: 8px 12px
}

@media(max-width:600px) {
  .notifications-heading {
    padding: 14px
  }

  .notification-card {
    padding: 12px;
    gap: 10px
  }

  .notification-emblem {
    width: 36px;
    height: 36px
  }

  .notification-emblem svg {
    width: 18px;
    height: 18px
  }

  .notification-copy h3 {
    font-size: 17px
  }

  .notifications-actions {
    width: 100%
  }
}

/* Shared XP rulebook: matches the navy and gold world panels. */
.xp-guide {
  min-width: 0;
  border: 1px solid rgba(206, 169, 88, .48);
  border-radius: 16px 5px 16px 5px;
  background: linear-gradient(135deg, rgba(25, 43, 52, .75), rgba(6, 16, 24, .96) 65%);
  box-shadow: inset 0 0 0 4px rgba(210, 178, 111, .025);
  overflow: hidden;
}

.xp-guide-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  cursor: pointer;
  color: #ebd5a4;
  font: 500 clamp(21px, 2vw, 28px)/1.3 Georgia, serif;
  list-style: none;
}

.xp-guide-heading::-webkit-details-marker {
  display: none;
}

.xp-guide-heading>svg {
  width: 26px;
  height: 26px;
  color: #d8b565;
  flex-shrink: 0;
}

.xp-guide-heading::after {
  content: '+';
  margin-left: auto;
  color: #d8b565;
}

.xp-guide[open]>.xp-guide-heading::after {
  content: '−';
}

.xp-guide-heading:focus-visible,
.xp-guide-table:focus-visible {
  outline: 2px solid #e8c77c;
  outline-offset: -4px;
}

.xp-guide-body {
  display: grid;
  gap: 24px;
  padding: 0 24px 24px;
}

.xp-guide-intro {
  font-size: 14px;
  line-height: 1.8;
  color: #b6bdcc;
  max-width: 90ch;
}

.xp-guide-bands {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.xp-guide-band {
  padding: 17px;
  border: 1px solid rgba(199, 167, 101, .3);
  border-radius: 10px;
  background: linear-gradient(120deg, rgba(203, 167, 85, .08), rgba(9, 24, 34, .75));
}

.xp-guide-band>div {
  flex-wrap: wrap;
}

.xp-guide-band>div>span:first-child {
  font: 500 18px/1.4 Georgia, serif;
  color: #e8dfcc;
}

.xp-guide-band>div>span:last-child {
  font-size: 15px;
  color: #e9c97e;
  white-space: nowrap;
}

.xp-guide-band>p {
  color: #a8b4c5;
  font-size: 12px;
  margin-top: 7px;
}

.xp-guide-definitions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.xp-guide-definitions>div {
  padding: 20px;
  border: 1px solid rgba(139, 164, 185, .18);
  border-radius: 10px;
  background: rgba(7, 21, 31, .55);
}

.xp-guide-definitions h4 {
  font: 500 20px/1.3 Georgia, serif;
  text-transform: none;
  color: #e7d3a7;
  gap: 10px;
  margin-bottom: 16px;
}

.xp-guide-definitions h4 svg {
  width: 21px;
  height: 21px;
  color: #d8b565;
}

.xp-guide-definitions p {
  font-size: 13px;
  line-height: 1.7;
  color: #aebacc;
  margin-top: 12px;
}

.xp-guide-definitions strong {
  color: #d7deea;
  font-weight: 500;
}

.xp-guide-table {
  overflow-x: auto;
  border: 1px solid rgba(199, 167, 101, .28);
  border-radius: 10px;
}

.xp-guide-table table {
  min-width: 620px;
  font-size: 13px;
  line-height: 1.65;
}

.xp-guide-table th {
  padding: 14px 16px;
  color: #e3c98c;
  background: rgba(194, 160, 86, .09);
  font: 500 16px/1.4 Georgia, serif;
  text-transform: none;
}

.xp-guide-table td {
  padding: 14px 16px;
  border-top: 1px solid rgba(125, 151, 170, .14);
}

.xp-guide-table td:first-child {
  color: #d8dfeb;
  width: 33%;
}

.xp-guide-table td:nth-child(2),
.xp-guide-table td:last-child {
  color: #aab6c8;
}

.xp-guide-table td:nth-child(3) {
  color: #e6c47b;
}

.xp-guide-table tbody tr:nth-child(even) {
  background: rgba(31, 52, 65, .2);
}

.xp-guide-table tbody tr:hover {
  background: rgba(199, 167, 101, .045);
}

.xp-guide-footer {
  padding: 16px 18px;
  border-left: 2px solid rgba(216, 181, 101, .6);
  background: rgba(196, 158, 73, .045);
  color: #aab6c8;
  font-size: 12px;
  line-height: 1.8;
}

@media (max-width: 700px) {
  .xp-guide-bands {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xp-guide-definitions {
    grid-template-columns: 1fr;
  }

  .xp-guide-heading {
    padding: 18px 16px;
  }

  .xp-guide-body {
    padding: 0 16px 16px;
    gap: 18px;
  }

  .xp-guide-band {
    padding: 13px;
  }
}

/* Direct conversations use the same navy surfaces and gold details as the world. */
.world-chat-frame>aside {
  background: linear-gradient(160deg, rgba(24, 43, 53, .65), rgba(7, 21, 30, .5));
}

.world-chat-frame h1 {
  font-size: 22px;
}

.world-chat-frame input {
  background: #091822;
  border: 1px solid #bd9b6045;
  border-radius: 24px;
  color: #e1e6ef;
  min-height: 44px;
}

.world-chat-frame input:focus {
  outline: 2px solid #d8b565;
  outline-offset: 2px;
}

.world-chat-frame input::placeholder {
  color: #8f9eb1;
}

.chat-search>svg {
  top: 14px;
  color: #bd9b60;
}

.chat-search-results {
  margin-top: 8px;
  overflow: hidden;
  background: #10222e;
  border: 1px solid #bd9b6070;
  border-radius: 12px;
  box-shadow: 0 12px 30px #0006;
}

.chat-search-results button:hover {
  background: #bd9b6015;
}

.world-chat-frame aside .chat-conversation {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: calc(100% - 24px);
  margin: 4px 12px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 0;
  text-align: left;
  transition: background .2s, border-color .2s, color .2s;
}

.chat-conversation .chat-avatar {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #a89bd5;
}

.chat-conversation .chat-avatar img {
  border-radius: 50%;
}

.chat-conversation .chat-avatar svg {
  width: 28px;
  height: 28px;
}

.chat-conversation-content {
  display: block;
  min-width: 0;
  flex: 1;
}

.chat-conversation b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 500;
  color: #d9e0eb;
}

.chat-conversation-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.chat-conversation-heading b {
  min-width: 0;
  flex: 1;
}

.chat-conversation-heading time {
  flex-shrink: 0;
  white-space: nowrap;
  color: #788390;
  font-size: 11px;
}

.chat-conversation-preview {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: #8f9eb1;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.world-chat-frame aside .chat-conversation:hover {
  background: #ffffff09;
  border-color: #ffffff0d;
}

.world-chat-frame aside .chat-conversation.is-selected {
  background: linear-gradient(90deg, rgba(180, 120, 30, .28), rgba(30, 35, 45, .24));
  border-color: #fde68a33;
  box-shadow: inset 3px 0 8px rgba(251, 191, 36, .12);
}

.world-chat-frame aside .chat-conversation.is-selected::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 1px;
  background: #fde68a;
  box-shadow: 0 0 10px #fde68a;
}

.chat-conversation.is-selected b {
  color: #fffbeb;
}

.chat-conversation.is-selected .chat-avatar {
  color: #f2cf86;
}

.chat-header {
  padding: 18px 24px;
  border-bottom: 1px solid #bd9b6040;
  background: linear-gradient(110deg, #152832, #091720);
}

.chat-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #dfc17f;
  border: 1px solid #bd9b6070;
  background: #bd9b600b;
  overflow: hidden;
}

.chat-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-avatar svg {
  width: 23px;
  height: 23px;
}

.chat-header>div {
  min-width: 0;
}

.chat-header b {
  display: block;
  overflow-wrap: anywhere;
  font: 500 21px/1.3 Georgia, serif;
  color: #ead6ad;
}

.chat-header p {
  margin-top: 4px;
  color: #9daec0;
}

.chat-messages {
  padding: 24px;
  min-height: 0;
  overscroll-behavior: contain;
}

.world-chat-frame aside .overflow-y-auto {
  overscroll-behavior: contain;
}

.chat-message {
  width: fit-content;
  max-width: min(80%, 640px);
  margin-bottom: 12px;
}

.chat-message.is-mine {
  margin-left: auto;
}

.chat-bubble {
  padding: 8px 12px 6px;
  border: 1px solid #8398b138;
  border-radius: 4px 16px 16px;
  background: #142633;
  color: #e1e6ef;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-bubble-text {
  display: block;
}

.chat-message-time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  margin-top: 3px;
  color: #8c9bad;
  font-size: 9px;
  line-height: 1;
}

.chat-message-time svg {
  width: 9px;
  height: 9px;
}

.chat-message.is-mine .chat-bubble {
  border-color: #bd9b6065;
  background: linear-gradient(130deg, #343025, #202820);
  border-radius: 16px 4px 16px 16px;
  color: #eee3cd;
}

.chat-composer {
  padding: 16px 24px;
  border-top: 1px solid #bd9b6040;
  background: #0b1a24;
}

.world-chat-frame .chat-send {
  width: 46px;
  height: 46px;
  color: #edce88;
  background: #bd9b601a;
  border: 1px solid #bd9b6080;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

.chat-send:hover:not(:disabled) {
  background: #bd9b6030;
}

.chat-send:disabled {
  cursor: not-allowed;
}

@media(max-width: 767px) {

  .chat-composer {
    padding: 14px;
  }

  .chat-header {
    gap: 8px;
    padding: 8px 12px;
  }

  .chat-header .world-icon-button,
  .chat-header .chat-avatar {
    width: 36px;
    height: 36px;
  }

  .chat-header .world-icon-button svg {
    width: 18px;
    height: 18px;
  }

  .chat-header .chat-avatar svg {
    width: 18px;
    height: 18px;
  }

  .chat-messages {
    padding: 16px;
  }

  .chat-header b {
    font-size: 16px;
  }

  .chat-message {
    max-width: 90%;
  }
}

/* Guild card outer wrapper – always matches the decoration PNG ratio (1122 × 1402) */
.guild-directory-card {
  /* Match the frame artwork; the PNG itself forms the visible card border. */
  aspect-ratio: 1122 / 1402;
  position: relative;
  cursor: pointer;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  transition: all .25s ease;
  overflow: visible;
}

/* Inner layout container – fills the card, padded so content clears the frame edges */
.guild-directory-card > .guild-card-inner {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Keep the content below the banner, within the side rails, and above the foot ornaments. */
  padding: 27% 12% 13%;
  overflow: hidden;
}

/* Stage 2+ has the tall stone arch – needs more top clearance */
.guild-directory-card.guild-stage-2 > .guild-card-inner,
.guild-directory-card.guild-stage-3 > .guild-card-inner,
.guild-directory-card.guild-stage-4 > .guild-card-inner {
  padding-top: 31%;
}

@media (max-width: 767px) {
  .guild-directory-card {
    width: min(100%, 300px);
    justify-self: center;
  }

  .guild-directory-card > .guild-card-inner,
  .guild-directory-card.guild-stage-2 > .guild-card-inner,
  .guild-directory-card.guild-stage-3 > .guild-card-inner,
  .guild-directory-card.guild-stage-4 > .guild-card-inner {
    padding: 27% 12% 13%;
  }

  .guild-directory-card .guild-directory-identity {
    flex: 1;
    gap: 9px;
  }

  .guild-directory-card .guild-directory-emblem {
    width: 44px;
    height: 52px;
    padding: 6px 6px 10px;
  }

  .guild-directory-card h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: clamp(16px, 5vw, 20px);
    line-height: 1.15;
  }

  .guild-directory-card .guild-card-inner .grid > div {
    min-width: 0;
    gap: 5px;
    padding: 6px 7px;
  }

  .guild-directory-card .guild-directory-actions {
    margin-bottom: 2%;
  }
}

.guild-directory-card:hover {
  border-color: #d9b66f;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -5px rgba(0, 0, 0, 0.5);
}

.guild-directory-card.is-member {
  box-shadow: 0 10px 28px #0003;
}

/* --- Guild Renown Stage Decoration Styling --- */
/* Stage 0: Gründung (Stoffbanner & Laternen) */
.guild-directory-card.guild-stage-0 {
  border-color: #78716c66;
}
.guild-directory-card.guild-stage-0:hover {
  border-color: #a8a29e;
  box-shadow: 0 0 18px rgba(217, 119, 6, 0.2);
}
.guild-directory-emblem.guild-emblem-stage-0 {
  background: linear-gradient(140deg, #2c3e4c, #10212e);
  color: #d6d3d1;
}

/* Stage 1: Anerkannt (Bronzeverzierungen) */
.guild-directory-card.guild-stage-1 {
  border-color: #b4530999;
  box-shadow: 0 4px 20px rgba(180, 83, 9, 0.15);
}
.guild-directory-card.guild-stage-1:hover {
  border-color: #f59e0b;
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.35);
}
.guild-directory-emblem.guild-emblem-stage-1 {
  background: linear-gradient(140deg, #523114, #192025);
  box-shadow: 0 0 14px rgba(217, 119, 6, 0.45);
  color: #fbbf24;
}

/* Stage 2: Angesehen (Steinbögen & doppelte Wimpel) */
.guild-directory-card.guild-stage-2 {
  border-color: #94a3b8aa;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.4);
}
.guild-directory-card.guild-stage-2:hover {
  border-color: #e2e8f0;
  box-shadow: 0 0 26px rgba(148, 163, 184, 0.4);
}
.guild-directory-emblem.guild-emblem-stage-2 {
  background: linear-gradient(140deg, #334155, #0f172a);
  box-shadow: 0 0 15px rgba(148, 163, 184, 0.45);
  color: #f1f5f9;
}

/* Stage 3: Berühmt (Gold & farbiges Glas) */
.guild-directory-card.guild-stage-3 {
  border-color: #f59e0bcc;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.2);
}
.guild-directory-card.guild-stage-3:hover {
  border-color: #fde047;
  box-shadow: 0 0 35px rgba(245, 158, 11, 0.55);
}
.guild-directory-emblem.guild-emblem-stage-3 {
  background: linear-gradient(140deg, #6d470d, #1a222a);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.65);
  color: #fef08a;
}

/* Stage 4: Legendär (Leuchtende Runen) */
.guild-directory-card.guild-stage-4 {
  border-color: #c084fcee;
  box-shadow: 0 0 28px rgba(192, 132, 252, 0.25);
}
.guild-directory-card.guild-stage-4:hover {
  border-color: #f0abfc;
  box-shadow: 0 0 40px rgba(192, 132, 252, 0.65), 0 0 20px rgba(245, 158, 11, 0.35);
}
.guild-directory-emblem.guild-emblem-stage-4 {
  background: linear-gradient(140deg, #5b1d84, #0f172a);
  box-shadow: 0 0 25px rgba(192, 132, 252, 0.75), 0 0 10px rgba(245, 158, 11, 0.4);
  color: #f5d0fe;
  animation: guild-legendary-glow 3.5s ease-in-out infinite alternate;
}

@keyframes guild-legendary-glow {
  0% {
    box-shadow: 0 0 16px rgba(192, 132, 252, 0.5), 0 0 6px rgba(245, 158, 11, 0.25);
  }
  100% {
    box-shadow: 0 0 30px rgba(192, 132, 252, 0.9), 0 0 15px rgba(245, 158, 11, 0.55);
  }
}

/* Map Header & Emblem Stage Classes */
.guild-map-header-stage-0 {
  border-color: #78716c55 !important;
  background: linear-gradient(180deg, #1a2732 0%, #0c1822 50%, #050d14 100%) !important;
}

.guild-map-header-stage-1 {
  border-color: #b4530988 !important;
  background: linear-gradient(180deg, #261f1c 0%, #131b20 50%, #091017 100%) !important;
  box-shadow: 0 10px 25px -5px rgba(180, 83, 9, 0.2) !important;
}

.guild-map-header-stage-2 {
  border-color: #94a3b899 !important;
  background: linear-gradient(180deg, #1e2e3d 0%, #101c27 50%, #060f18 100%) !important;
  box-shadow: 0 10px 25px -5px rgba(148, 163, 184, 0.25) !important;
}

.guild-map-header-stage-3 {
  border-color: #f59e0bcc !important;
  background: linear-gradient(180deg, #2f2a1e 0%, #151d23 50%, #081119 100%) !important;
  box-shadow: 0 10px 30px -5px rgba(245, 158, 11, 0.35) !important;
}

.guild-map-header-stage-4 {
  border-color: #c084fccc !important;
  background: linear-gradient(180deg, #291a3c 0%, #121425 50%, #060a14 100%) !important;
  box-shadow: 0 10px 35px -5px rgba(192, 132, 252, 0.4), 0 0 15px rgba(245, 158, 11, 0.2) !important;
}

.guild-map-emblem-stage-0 {
  border-color: #78716c88 !important;
  background: linear-gradient(135deg, rgba(120, 113, 108, 0.25), #0f172a 70%) !important;
}

.guild-map-emblem-stage-1 {
  border-color: #d97706 !important;
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.35), #181c20 70%) !important;
  box-shadow: 0 0 20px rgba(180, 83, 9, 0.4) !important;
}

.guild-map-emblem-stage-2 {
  border-color: #cbd5e1 !important;
  background: linear-gradient(135deg, rgba(203, 213, 225, 0.35), #0f172a 70%) !important;
  box-shadow: 0 0 22px rgba(148, 163, 184, 0.45) !important;
}

.guild-map-emblem-stage-3 {
  border-color: #fbbf24 !important;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.4), rgba(69, 44, 8, 0.6) 50%, #0f172a 90%) !important;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.55) !important;
}

/* ===== Guild Decoration PNG Overlay ===== */
.guild-deco-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 5;
}

.guild-deco-overlay.is-header {
  border-radius: inherit;
  overflow: hidden;
}

/* Map popovers have a landscape layout, unlike the portrait guild cards. */
.guild-deco-overlay.is-header .guild-deco-frame {
  object-fit: fill;
}

/* Keep the art aligned to the card's 1122:1402 aspect ratio. */
.guild-deco-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}

/* ----- Lantern Glow (animated warm light spot) ----- */
.guild-deco-lantern-glow {
  position: absolute;
  width: 16%;
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 247, 174, 0.9) 0%, rgba(255, 190, 48, 0.58) 24%, rgba(245, 158, 11, 0.25) 48%, rgba(245, 158, 11, 0) 72%);
  filter: blur(4px);
  mix-blend-mode: screen;
  z-index: 2;
  animation: guild-deco-lantern-pulse 3s ease-in-out infinite;
}

.guild-deco-lantern-glow.gold {
  width: 18%;
  height: auto;
  background: radial-gradient(circle, rgba(255, 230, 100, 0.9) 0%, rgba(253, 224, 71, 0.55) 30%, rgba(245, 158, 11, 0.2) 55%, rgba(245, 158, 11, 0) 75%);
  filter: blur(8px);
}

@keyframes guild-deco-lantern-pulse {
  0%, 100% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1);
  }
  25% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(0.88);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
  }
  75% {
    opacity: 0.65;
    transform: translate(-50%, -50%) scale(0.92);
  }
}

/* ----- Rune Glow (stage 4 – pulsing blue light along both side pillars) ----- */
.guild-deco-runes-glow {
  position: absolute;
  top: 22%;
  width: 14%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(90, 190, 255, 0.32) 0%,
    rgba(75, 130, 255, 0.17) 42%,
    rgba(110, 90, 255, 0.08) 62%,
    transparent 80%
  );
  filter: blur(5px);
  mix-blend-mode: screen;
  z-index: 2;
  animation: guild-deco-runes-pulse 2.8s ease-in-out infinite;
}

.guild-deco-runes-glow.left { left: 0; }
.guild-deco-runes-glow.right { right: 0; animation-delay: -1.4s; }

@keyframes guild-deco-runes-pulse {
  0%, 100% {
    opacity: 0.5;
    filter: blur(5px);
  }
  50% {
    opacity: 1;
    filter: blur(8px) brightness(1.55);
  }
}

:root.light .guild-deco-runes-glow {
  display: none !important;
  filter: none !important;
}

:root.light .guild-directory-card.guild-stage-4,
:root.light .guild-directory-card.guild-stage-4:hover {
  box-shadow: none !important;
  filter: none !important;
}



.guild-directory-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-right: 6%;
  min-height: 64px
}

.guild-directory-card.guild-stage-3 .guild-directory-heading {
  padding-inline: 9%;
}

.guild-directory-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0
}

.guild-directory-chevron {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  margin-top: 17px;
  color: #8290a0;
  transition: transform .2s, color .2s
}

.guild-directory-card:hover .guild-directory-chevron {
  transform: translateX(3px);
  color: #d8b565
}

.guild-membership-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  color: #d8b565;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase
}

.guild-membership-mark svg {
  width: 13px;
  height: 13px
}

.guild-directory-emblem {
  width: 52px;
  height: 62px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 8px 14px;
  background: linear-gradient(140deg, #344552, #12212f);
  color: #dfc17f;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}

.guild-directory-emblem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.guild-directory-emblem svg {
  width: 28px;
  height: 28px;
}

.guild-directory-card h3 {
  font: 500 23px/1.3 Georgia, serif;
  color: #ead6aa;
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.guild-directory-description {
  font-size: 14px;
  line-height: 1.7;
  color: #aab8c9;
  margin: 18px 0;
}

.guild-decoration-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 11px 0 16px;
  border-top: 1px solid #bd9b6030
}

.guild-decoration-stage,
.guild-decoration-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border: 1px solid #bd9b6045;
  border-radius: 99px;
  background: #d9b56d0b;
  color: #d8c59d;
  padding: 6px 10px;
  font-size: 11px
}

.guild-decoration-stage svg,
.guild-decoration-chip svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #d8b565
}

.guild-decoration-stage span {
  display: flex;
  flex-direction: column;
  line-height: 1.2
}

.guild-decoration-stage small {
  color: #8998aa;
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase
}

.guild-membership-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  border: 1px solid #bd9b6060;
  border-radius: 14px 4px;
  background: linear-gradient(120deg, #1a2c36, #091720);
  box-shadow: inset 3px 0 #d8b565
}

.guild-membership-banner-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: 1px solid #bd9b6060;
  border-radius: 50%;
  background: #d9b56d10;
  color: #d8b565
}

.guild-membership-banner-label {
  color: #d8b565;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase
}

.guild-membership-banner h2 {
  font: 500 21px/1.3 Georgia, serif;
  color: #ead6aa;
  margin-top: 3px
}

.guild-membership-banner p {
  font-size: 12px;
  line-height: 1.55;
  color: #aab8c9;
  margin-top: 4px
}

.guild-membership-banner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0
}

@media(max-width:700px) {
  .guild-membership-banner {
    align-items: flex-start;
    flex-direction: column
  }

  .guild-membership-banner-actions {
    width: 100%;
    flex-wrap: wrap
  }

  .guild-membership-banner-actions .world-button {
    flex: 1
  }

  .guild-decoration-chip span {
    display: none
  }
}

.guild-directory-stats {
  display: grid;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #bd9b6030;
  margin-bottom: 22px;
}

.guild-directory-stats>div {
  gap: 10px;
  flex-wrap: wrap;
}

.guild-directory-stats span {
  font-family: inherit;
  font-size: 13px;
  color: #aab8c9;
}

.guild-directory-stats>div>span:last-child {
  color: #e3cb95;
  font-weight: 500;
}

.guild-directory-stats svg {
  color: #c8ad76;
}

.guild-directory-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
}

.guild-directory-actions .world-button {
  flex: 1 1 145px;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
}

.guild-directory-actions .world-button:last-child {
  background: #b48c3620;
}

.guild-branding {
  max-width: 1100px;
  margin-inline: auto;
}

.branding-header {
  padding: 24px;
  border: 1px solid #bda16b60;
  border-radius: 14px 4px;
  background: linear-gradient(120deg, #1b2d36, #091720);
}

.guild-branding h1 {
  font: 500 clamp(24px, 3vw, 34px)/1.2 Georgia, serif;
  text-transform: none;
  letter-spacing: normal;
  color: #ecd7a7;
}

.guild-branding h3 {
  font: 500 23px/1.3 Georgia, serif;
  text-transform: none;
  letter-spacing: normal;
  color: #ead6ad;
}

.branding-header>div>div>svg,
.guild-branding h3>svg {
  color: #d8b565;
  flex-shrink: 0;
}

.guild-branding .font-mono {
  font-family: inherit;
}

.guild-branding p {
  line-height: 1.7;
  color: #aebacd;
}

.branding-header p span {
  color: #e0c389;
}

.branding-panel {
  padding: 26px;
  border: 1px solid #bda16b45;
  border-radius: 14px 4px;
  background: linear-gradient(135deg, #142631, #091720 70%);
}

.branding-preview {
  padding: 22px;
  border: 1px solid #bda16b30;
  border-radius: 12px;
  background: radial-gradient(ellipse at center, #bfa05b14, transparent 75%);
}

.branding-pennant {
  width: 132px;
  height: 160px;
  padding: 14px 14px 34px;
  background: linear-gradient(135deg, #344451, #14202c);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}

.branding-pennant img {
  object-fit: contain;
}

.branding-pennant>svg {
  color: #d7ba78;
}

.branding-upload {
  padding: 30px 20px;
  border: 1px dashed #bda16b80;
  border-radius: 12px;
  background: #0a192480;
  transition: background .2s;
}

.branding-upload:hover {
  background: #bd9b6010;
}

.branding-upload>svg {
  color: #d8b565;
}

.guild-branding .branding-preset {
  border-radius: 12px;
  min-height: 116px;
  background: #0b1c27;
  border-color: #8fa4b430;
}

.guild-branding .branding-preset:hover {
  border-color: #cdb176;
  background: #22302e;
}

.guild-branding .branding-preset[aria-pressed=true] {
  border-color: #e0bb70;
  background: linear-gradient(140deg, #51432560, #13222d);
  box-shadow: inset 0 0 0 1px #d8b56540;
}

.branding-preset>div {
  border-radius: 50%;
  width: 46px;
  height: 46px;
}

.branding-preset>span:last-child {
  font-weight: 500;
  font-size: 12px;
  color: #c5cfdb;
}

.guild-branding button:not(.branding-preset) {
  border-radius: 999px;
  border: 1px solid #bda16b70;
  background: linear-gradient(#d9b56d18, #08121b);
  color: #e9d5ab;
  padding: 10px 18px;
  font: 500 14px/1.4 Georgia, serif;
  text-transform: none;
  letter-spacing: normal;
}

.guild-branding button:not(.branding-preset):hover {
  background: #bda16b25;
}

.guild-branding input:not([type=file]),
.guild-branding textarea {
  border-radius: 8px;
  background: #071720;
  border-color: #bda16b50;
  color: #e0e5ee;
  font-weight: 400;
  font-size: 14px;
}

.guild-branding :is(button, input, textarea):focus-visible {
  outline: 2px solid #e0bb70;
  outline-offset: 3px;
}

.guild-branding .border-t {
  border-color: #bda16b30;
}

@media(max-width:640px) {

  .branding-header,
  .branding-panel {
    padding: 18px;
  }
}

.public-adventurer .world-content {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.public-adventurer .world-story h1 {
  overflow-wrap: anywhere;
  font-size: clamp(28px, 3vw, 48px);
}

.public-identity {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  align-items: center;
  margin-top: 24px;
}

.public-profile-designations {
  display: grid;
  gap: 10px;
}

.public-profile-designations > div {
  display: grid;
  grid-template-columns: minmax(135px, 0.35fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.public-profile-designations dt { color: #b5add1; }
.public-profile-designations dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #e9e2d5;
  font-weight: 600;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .public-profile-designations > div { grid-template-columns: 1fr; gap: 2px; }
}

.public-avatar {
  width: 90px;
  height: 90px;
  border: 1px solid #d7b76d;
  border-radius: 50%;
  background: #101e2b;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.public-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #101e2b;
}

.public-avatar>svg {
  width: 38px;
  height: 38px;
  color: #d7b76d;
}

.public-profile-heading {
  padding: 24px;
  border: 1px solid #bd9b6060;
  border-radius: 16px 4px;
  background: linear-gradient(120deg, #20323c, #091720);
}

.public-profile-heading h2 {
  font: 500 clamp(26px, 3vw, 40px)/1.3 Georgia, serif;
  color: #ead3a2;
  overflow-wrap: anywhere;
  margin: 10px 0 18px;
}

.public-profile-badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.public-profile-badges span {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid #bda16b50;
  border-radius: 24px;
  padding: 8px 14px;
  color: #dac798;
}

.public-profile-badges svg {
  width: 18px;
  height: 18px;
}

.public-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #bd9b6050;
  border-radius: 12px;
  background: #10212b;
  padding: 20px 8px;
}

.public-profile-stats>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 8px;
}

.public-profile-stats>div+div {
  border-left: 1px solid #bd9b6030;
}

.public-profile-stats svg {
  color: var(--stat-color);
  width: 44px;
  height: 44px;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--stat-color) 35%, transparent));
  margin-bottom: 5px;
}

.public-profile-stats strong {
  font: 30px Georgia, serif;
  color: #ebdec0;
}

.public-profile-karma[data-negative="true"] strong { color: var(--negative-karma-color); }

.public-profile-stats span {
  font-size: 12px;
  color: #acb9cc;
}

.public-profile-bio {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.8;
  color: #bdc7d6;
}

.public-profile-moderation {
  border-top: 1px solid #bda16b40;
  padding-top: 18px;
}

.public-profile-moderation summary {
  color: #beafcf;
  cursor: pointer;
  padding: 12px 0;
}

.public-profile-moderation .world-panel {
  margin-top: 12px;
}

.guild-branding .branding-preset {
  min-height: 160px;
  gap: 8px;
}

.guild-heraldic-preview {
  width: 80px;
  height: 88px;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px #0005);
  display: block;
  margin: 0 auto;
  flex-shrink: 0;
}

.guild-branding .branding-preset[aria-pressed=true]>span:first-child {
  background: #d8b565;
  color: #10202a;
}

.branding-pennant {
  padding: 8px 8px 25px;
}

.guild-directory-emblem {
  padding: 3px 3px 10px;
}

.admin-directory {
  max-width: 1200px;
  margin: auto;
  color: #b8c5d5;
}

.admin-directory h1 {
  font: 32px Georgia, serif;
  color: #ecd5a1;
}

.admin-directory h3 {
  font: 22px Georgia, serif;
  color: #e0c58d;
}

.admin-directory input,
.admin-directory textarea {
  background: #0b1b26;
  border: 1px solid #bda16b60;
  border-radius: 10px;
  color: #e2e8ef;
}

.admin-directory p {
  overflow-wrap: anywhere;
}

.tavern-news-card {
  padding: 24px;
  border: 1px solid #8ea3b438;
  border-radius: 14px 4px;
  background: linear-gradient(125deg, #152832, #091720 75%);
  min-width: 0;
}

.tavern-news-card.is-system {
  border-color: #bd9b6060;
  box-shadow: inset 3px 0 #cfad65;
  background: radial-gradient(ellipse at top left, #c7a25a10, transparent 65%), linear-gradient(125deg, #152832, #091720);
}

.tavern-news-card.is-partner {
  border-color: #70b59b60;
}

.tavern-news-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.tavern-news-heading h3 {
  width: 100%;
  font: 500 clamp(22px, 2vw, 28px)/1.3 Georgia, serif;
  color: #ebd4a2;
  overflow-wrap: anywhere;
}

.tavern-news-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #dabe80;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tavern-news-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #c4cddb;
  font-size: 14px;
  line-height: 1.8;
}

.tavern-hero-details {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.tavern-hero-details>span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.tavern-hero-details svg {
  width: 15px;
  height: 15px;
  color: #cfad65;
}

/* Shared administration and partner portal */
.portal-shell {
  --portal-accent: #cfad65;
  --portal-accent-soft: #cfad651f;
  color: #d8dee7;
  background:
    radial-gradient(circle at 84% 8%, #26394a55, transparent 30rem),
    linear-gradient(145deg, #07131d, #030a10 72%);
}

.portal-admin {
  --portal-accent: #d78a75;
  --portal-accent-soft: #d78a751c;
}

.portal-sidebar {
  border-right: 1px solid color-mix(in srgb, var(--portal-accent) 28%, #263b49);
  background: linear-gradient(180deg, #10212c, #07131c 70%, #050d14);
  box-shadow: 14px 0 42px #0007;
}

@media(min-width:768px) {
  .portal-sidebar {
    position: relative;
  }
}

.portal-sidebar:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 15% 3%, var(--portal-accent-soft), transparent 17rem);
}

.portal-sidebar>* {
  position: relative;
  z-index: 1;
}

.portal-brand {
  border-bottom: 1px solid color-mix(in srgb, var(--portal-accent) 22%, transparent);
}

.portal-brand h1 {
  font-size: 21px;
  font-weight: 500;
  color: #f2e9d8;
  letter-spacing: .015em;
}

.portal-brand>p {
  color: #a9a6b8;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.portal-nav-link {
  margin: 3px 0;
  border: 1px solid transparent;
  border-left: 2px solid transparent;
  color: #bcb7ca;
  letter-spacing: .015em;
}

.portal-nav-link:hover {
  border-color: #ffffff0b;
  background: #ffffff08;
  color: #f0e8da;
}

.portal-nav-link[aria-current="page"] {
  border-color: color-mix(in srgb, var(--portal-accent) 38%, transparent);
  border-left-color: var(--portal-accent);
  background: linear-gradient(90deg, var(--portal-accent-soft), #ffffff05);
  color: #f7eddb;
  box-shadow: inset 3px 0 12px var(--portal-accent-soft);
}

.portal-nav-link[aria-current="page"] svg {
  color: var(--portal-accent);
}

.portal-main {
  min-width: 0;
  background: radial-gradient(circle at 95% 0, #17324835, transparent 30rem);
}

.portal-topbar {
  flex-shrink: 0;
  border-bottom: 1px solid #bd9b6030;
  background: #061018d9;
  backdrop-filter: blur(12px);
}

.portal-topbar p:first-child {
  color: #eee7db;
}

.portal-content {
  scrollbar-color: #9d8253 #071018;
}

.portal-content>*>:is(header:first-child, h1:first-child) {
  border-bottom-color: #bd9b6045;
}

.portal-content :is(h1, h2, h3, h4) {
  color: #ecd5a1;
  font-weight: 500;
  letter-spacing: -.01em;
}

.portal-content h1 {
  font-size: clamp(28px, 3vw, 40px);
}

.portal-content :is(section, article, form, .world-panel) {
  border-color: #3b5060;
}

.portal-content :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-color: #526473;
  background: #091722;
  color: #eee9df;
  border-radius: 5px;
}

.portal-content :is(input, textarea)::placeholder {
  color: #868b9b;
}

.portal-content table {
  width: 100%;
  border-color: #3b5060;
}

.portal-content :is(th, td) {
  border-color: #314653;
}

.portal-content th {
  color: #dbc28e;
  font-weight: 500;
  letter-spacing: .05em;
}

.portal-content button {
  letter-spacing: .01em;
}

:is(.portal-content, .world-page, .world-content) :is(.bg-zinc-900, .bg-zinc-950) {
  background-color: #091720;
}

:is(.portal-content, .world-page, .world-content) :is(.border-zinc-800, .border-zinc-700) {
  border-color: #3b5060;
}

@media(max-width:767px) {
  .portal-sidebar {
    position: fixed !important;
    box-shadow: 20px 0 60px #000b;
  }

  .portal-content {
    padding: 16px;
  }
}

/* Use the application UI font consistently, including legacy serif utilities. */
body,
body * {
  font-family: var(--app-font-sans) !important;
}

.tavern-news-copy>p:last-child:not(.tavern-news-body) {
  margin-top: 12px;
  color: #96a7ba;
  font-size: 12px;
}

.tavern-news-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid #bd9b6028;
  color: #94a5b8;
  font-size: 11px;
}

.tavern-news-meta svg {
  width: 13px;
  height: 13px;
  color: #c1a66f;
}

@media(max-width:600px) {
  .tavern-news-card {
    padding: 18px;
  }
}

/* Edge-to-edge map, with independently scrolling location details. */
.world-map-page {
  padding: 0;
  --map-page-padding: 0px;
}

.world-map-layout {
  gap: 0;
  align-items: stretch;
}

.world-map-frame {
  padding: 0;
  border: 0;
  clip-path: none;
  background: #10202c;
}

.world-map-layout .world-map-canvas {
  height: calc(100dvh - 64px);
  min-height: 340px;
}

.world-map-layout .world-map-tools {
  padding: 24px;
  max-height: calc(100dvh - 64px);
}

.world-map-canvas .leaflet-tile-pane,
.location-picker-map .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(.72) saturate(.55) contrast(1.1);
}

:root.light .world-map-canvas .leaflet-tile-pane,
:root.light .location-picker-map .leaflet-tile-pane {
  filter: none;
}

.world-map-canvas .leaflet-container {
  background: #10202c;
}

:root:not(.light) .partner-offer-map .leaflet-container {
  background: #10202c;
}

:root:not(.light) .partner-offer-map .leaflet-control-zoom a {
  background: #0c1a23;
  color: #ead3a2;
  border-color: #56616a;
}

:root.light .world-map-canvas .leaflet-container {
  background: #e6e9e4;
}

:root:not(.light) .world-map-canvas .leaflet-container .leaflet-control-attribution,
:root:not(.light) .location-picker-map .leaflet-container .leaflet-control-attribution {
  background: #0b1924f2;
  color: #d8e2ed;
  padding: 3px 6px;
  line-height: 1.3;
}

:root:not(.light) .world-map-canvas .leaflet-control-attribution a,
:root:not(.light) .location-picker-map .leaflet-control-attribution a {
  color: #f0cf87;
}

@media(max-width:850px) {
  .world-map-page {
    padding: 0;
  }

  .world-map-layout .world-map-tools {
    max-height: none;
    padding: 20px;
  }

  .world-map-layout .world-map-canvas {
    height: calc(100dvh - 64px);
  }
}

/* Leaflet uses z-index values up to 1000 internally. Isolate those layers below header popovers. */
.world-map-canvas {
  z-index: 0;
  isolation: isolate;
}

/* Keep Leaflet's paragraph defaults from inflating the mobile location card. */
.world-location-popup .leaflet-popup-content {
  max-width: calc(100vw - 80px);
  scrollbar-width: thin;
  scrollbar-color: #9a8153 transparent;
}

.world-location-popup .world-location-details {
  gap: 10px;
  padding-right: 16px;
}

.world-location-popup .world-location-details> :is(h3, p) {
  margin: 0;
}

.world-location-popup .world-location-details p {
  line-height: 1.5;
}

.world-location-popup .world-location-details .world-button {
  width: 100%;
}

/* Let the dashboard's outer page scroll contain its full content on narrow screens. */
@media (max-width: 850px) {
  .dashboard-world {
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
  }

  .dashboard-world > div.relative.grid {
    display: block;
    height: auto !important;
    min-height: 0;
  }

  .dashboard-world > div.relative.grid > section:last-child {
    display: block;
    min-height: 0;
    overflow: visible !important;
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  }

  .dashboard-world > div.relative.grid > section:last-child > div,
  .dashboard-world .dashboard-action-panel {
    height: auto;
    min-height: 0;
  }
}

.world-topbar {
  z-index: 100;
}

.world-notification-menu {
  z-index: 120 !important;
}

/* Dashboard contiguous rectangular tab bar */
.dashboard-tab-group {
  border-radius: 6px;
}

.dashboard-tab-btn {
  border-radius: 0 !important;
  border: none !important;
}

.dashboard-tab-btn+.dashboard-tab-btn {
  border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.dashboard-tab-btn.is-active {
  box-shadow: inset 0 -3px 0 #f59e0b !important;
}

/* Taverne single-line news rows */
.tavern-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tavern-filters .tavern-filter {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #8ea3b438;
  border-radius: 6px;
  background: linear-gradient(125deg, #152832, #091720 75%);
  box-shadow: none;
  color: #b9c4cb;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}

.tavern-filters .tavern-filter:hover {
  border-color: #bd9b6080;
  background: #1b303a;
  color: #f2e3c5;
}

.tavern-filters .tavern-filter[aria-pressed=true] {
  border-color: #bd9b6060;
  background: linear-gradient(125deg, #263139, #10212b 75%);
  box-shadow: inset 3px 0 0 #cfad65;
  color: #f3d693;
}

.tavern-filters .tavern-filter:focus-visible {
  outline: 2px solid #f3d693;
  outline-offset: 2px;
}

@media (min-width: 640px) {
  .tavern-filters {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.tavern-news-row {
  border: 1px solid #8ea3b438;
  background: linear-gradient(125deg, #152832, #091720 75%);
}

.tavern-news-row.is-system {
  border-color: #bd9b6060;
  box-shadow: inset 3px 0 0 #cfad65;
  background: radial-gradient(ellipse at top left, #c7a25a10, transparent 65%), linear-gradient(125deg, #152832, #091720);
}

.tavern-news-row.is-partner {
  border-color: #70b59b60;
  box-shadow: inset 3px 0 0 #34d399;
}

.tavern-news-row.is-event {
  border-color: #a855f760;
  box-shadow: inset 3px 0 0 #c084fc;
  background: radial-gradient(ellipse at top left, #a855f715, transparent 65%), linear-gradient(125deg, #152832, #091720);
}

.tavern-news-row.is-heroic {
  border-color: #f59e0b60;
  box-shadow: inset 3px 0 0 #fbbf24;
  background: radial-gradient(ellipse at top left, #f59e0b15, transparent 65%), linear-gradient(125deg, #152832, #091720);
}

.tavern-news-row:hover {
  filter: brightness(1.05);
}

/* Level Badge in Navbar */
.world-level-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  color: #fef3c7;
  font-family: Georgia, serif;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.world-level-badge .level-number {
  font-weight: 700;
  font-family: monospace;
  color: #fcd34d;
}

/* Profile Flyout Dropdown */
.world-profile-flyout {
  position: absolute;
  right: 0;
  margin-top: 8px;
  width: 320px;
  max-width: calc(100vw - 32px);
  z-index: 150 !important;
  border-radius: 14px;
  border: 1px solid #b79b6360;
  background: linear-gradient(145deg, #12222d, #08121a);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  padding: 16px;
  color: #e2d8ce;
  backdrop-filter: blur(12px);
}

.world-profile-flyout-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(183, 155, 99, 0.2);
}

.world-profile-flyout-name {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff0ce;
}

.world-profile-flyout-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 12px;
  color: #a3a8b4;
}

.world-profile-flyout-section {
  padding: 12px 0;
  border-bottom: 1px solid rgba(183, 155, 99, 0.15);
}

.world-profile-flyout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #c4c9d4;
  margin-bottom: 10px;
}

.world-profile-flyout-row:last-child {
  margin-bottom: 0;
}

.world-profile-flyout-share {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #fde68a;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.world-profile-flyout-share:hover {
  background: rgba(245, 158, 11, 0.22);
  color: #ffffff;
}

.world-profile-flyout-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #d1d5db;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.world-profile-flyout-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.world-profile-flyout-logout {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #f87171;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.world-profile-flyout-logout:hover {
  background: rgba(225, 29, 72, 0.15);
  color: #fca5a5;
}

/* Custom Category Selector Widget */
.category-select-trigger {
  background: linear-gradient(135deg, #0e1e29, #07131d);
  border-color: #536172;
  color: #eee9df;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 14px rgba(0, 0, 0, 0.25);
}

.category-select-trigger:hover:not(:disabled) {
  border-color: #c1a065;
  background: linear-gradient(135deg, #132634, #0b1a26);
  box-shadow: 0 0 16px rgba(217, 181, 109, 0.15);
}

.category-select-trigger-open {
  border-color: #e5c17d !important;
  background: linear-gradient(135deg, #162c3c, #0d1e2b) !important;
}

.category-select-kicker {
  color: #d9ae60;
}

.category-select-title {
  color: #eed8ab;
}

.category-select-arrow {
  background: #08141f;
  border: 1px solid #536172;
  color: #c6b68e;
}

.category-select-trigger:hover .category-select-arrow {
  border-color: #c1a065;
  color: #f3dca7;
}

.category-select-dropdown {
  background: #091722;
  border: 1px solid #bda16b60;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  scrollbar-width: thin;
  scrollbar-color: #b99b60 #08141e;
}

.category-select-option {
  background: #0d202c;
  border: 1px solid #233544;
  color: #cfc8dc;
}

.category-select-option:hover {
  background: #142a38;
  border-color: #bda16b80;
  color: #f3dca7;
}

.category-select-option-active {
  background: linear-gradient(120deg, #b9933830, #0d202c) !important;
  border-color: #c1a065 !important;
  color: #ffe3a8 !important;
  box-shadow: inset 0 0 14px rgba(217, 181, 109, 0.15);
}

/* XP Assessment Band */
.xp-assessment-band {
  background: linear-gradient(135deg, #241a08, #140f04);
  border: 1px solid #bda16b60;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.xp-assessment-band-label {
  color: #eed8ab;
}

.xp-assessment-band-value {
  color: #fce7b0;
}

/* GPS Location Button */
.gps-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid #10b98160;
  background: linear-gradient(135deg, #09261a, #061811);
  color: #a7f3d0;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.2s ease;
  cursor: pointer;
}

.gps-button:hover:not(:disabled) {
  border-color: #34d399;
  background: linear-gradient(135deg, #0f3826, #09261a);
  color: #ecfdf5;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.2);
}

.gps-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}







/* Vertical timeline element icon layout fix for img elements */
.vertical-timeline-element-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.vertical-timeline-element-icon img {
  width: 130% !important;
  height: 130% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  border-radius: 50%;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.vertical-timeline-element-content .vertical-timeline-element-date {
  float: none !important;
  display: block !important;
  padding: 0.6rem 0 0.2rem 0 !important;
  opacity: 1 !important;
}

.vertical-timeline-element--today .vertical-timeline-element-icon svg {
  margin-left: 0 !important;
  margin-top: 0 !important;
  left: auto !important;
  top: auto !important;
  position: static !important;
}

/* Mobile responsive layout for Talent Tree: fit all 3 branches side-by-side cleanly */
@media (max-width: 768px) {
  .talent-branches {
    grid-template-columns: repeat(var(--branch-count, 3), minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .talent-tree-scroll {
    padding: 4px 0 !important;
    overflow-x: hidden !important;
  }

  .talent-path {
    padding: 4px 1px 2px !important;
  }

  .talent-path>header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 2px !important;
    padding-bottom: 6px !important;
  }

  .talent-path-emblem {
    width: 32px !important;
    height: 32px !important;
  }

  .talent-path header h2 {
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  .talent-path header p {
    font-size: 8.5px !important;
    line-height: 1.1 !important;
    margin-top: 1px !important;
  }

  .talent-path header>span {
    font-size: 11px !important;
    margin-left: 0 !important;
    margin-top: 2px !important;
  }

  .talent-rank-tree {
    padding: 8px 0 6px !important;
  }

  .talent-single-node {
    width: 100% !important;
    min-height: auto !important;
    padding: 4px 1px 4px !important;
  }

  .talent-single-node .talent-rank-icon {
    width: 46px !important;
    height: 46px !important;
  }

  .talent-rank-node strong {
    font-size: 9.5px !important;
    line-height: 1.15 !important;
    margin-top: 2px !important;
    max-width: 100% !important;
  }

  .talent-rank-number {
    font-size: 8px !important;
    margin-top: 1px !important;
  }

  .talent-rank-value {
    font-size: 8px !important;
    line-height: 1.15 !important;
    margin: 2px 0 !important;
  }

  .talent-rank-status {
    font-size: 7.5px !important;
    padding-top: 2px !important;
  }

  .talent-rank-markers {
    gap: 3px !important;
    margin: 2px 0 1px !important;
  }

  .talent-rank-markers>span {
    width: 5px !important;
    height: 5px !important;
  }

  .talent-tier-connection {
    height: 30px !important;
    margin-bottom: 2px !important;
  }

  .talent-tier-connection small {
    font-size: 7px !important;
    left: 51% !important;
    top: 6px !important;
  }

  .talent-rank-prerequisite {
    font-size: 8px !important;
    padding: 4px 0 !important;
  }

  .talents-world .world-content .talent-stage {
    padding: 4px 2px !important;
  }
}
/* The compact header shows level progress horizontally below the level. */
.player-progress-nav-track-mobile {
  width: 100%;
  height: 6px;
  flex: none;
  display: flex;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 999px;
  background: #334155;
}

.player-progress-nav-fill-mobile {
  height: 100%;
  border-radius: 999px;
  background: #38bdf8;
}

@media (min-width: 768px) {
  .player-progress-nav-track-mobile {
    display: none;
  }
}

/* Guild shop: a compact catalog with a distinct treasury and purchase states. */
.guild-shop {
  --shop-surface: #0e202c;
  --shop-tint: #172d38;
  --shop-border: #b99b6050;
  --shop-accent: #e4c47f;
  --shop-muted: #aab8c2;
  gap: 28px;
}
.guild-shop .guild-treasury-hero {
  padding: clamp(20px, 3vw, 32px);
  border-radius: 20px;
  background: linear-gradient(120deg, var(--shop-surface), var(--shop-tint));
  border-color: var(--shop-border);
  box-shadow: 0 8px 28px #00000012;
}
.guild-shop .guild-treasury-balance {
  padding: 18px 24px;
  gap: 7px;
  border: 1px solid var(--shop-border);
  border-radius: 16px;
  background: var(--shop-surface);
  justify-items: center;
}
.guild-shop .guild-treasury-catalog { gap: 20px; }
.guild-shop .guild-treasury-progress { padding: 9px 16px; }
.guild-shop .guild-unlock-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 18px;
}
.guild-shop .guild-unlock-card {
  padding: 24px;
  gap: 20px 12px;
  border-radius: 18px;
  border-color: var(--shop-border);
  background: linear-gradient(145deg, var(--shop-tint), var(--shop-surface) 48%);
  box-shadow: 0 4px 16px #0000000a;
}
.guild-shop .guild-unlock-card:hover {
  border-color: var(--shop-accent);
  box-shadow: 0 8px 24px #00000014;
}
.guild-shop .guild-unlock-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--shop-tint);
  border-color: var(--shop-border);
  color: var(--shop-accent);
}
.guild-shop .guild-unlock-price {
  gap: 6px;
  padding: 7px 10px;
  border-radius: 99px;
  background: var(--shop-tint);
  color: var(--shop-accent);
}
.guild-shop .guild-unlock-price small { font-size: 10px; font-weight: 400; }
.guild-shop .guild-unlock-copy { min-height: 100px; }
.guild-shop .guild-unlock-copy h5 { font-size: 22px; line-height: 1.25; }
.guild-shop .guild-unlock-copy p { margin-top: 10px; line-height: 1.65; color: var(--shop-muted); }
.guild-shop .guild-unlock-footer { padding-top: 16px; }
.guild-shop .guild-unlock-footer .world-button {
  min-height: 42px;
  border-radius: 10px;
  background: #d8b66e;
  border-color: #d8b66e;
  color: #30240e;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  transition: background .18s, box-shadow .18s;
}
.guild-shop .guild-unlock-footer .world-button:hover:not(:disabled) { background: #edcf8d; }
.guild-shop .guild-unlock-footer .world-button:focus-visible { outline: 2px solid var(--shop-accent); outline-offset: 3px; }
.guild-shop .guild-unlock-footer .world-button:disabled {
  opacity: 1;
  background: var(--shop-tint);
  border-color: var(--shop-border);
  color: var(--shop-muted);
}
.guild-shop .guild-unlock-card.is-locked { filter: none; }
.guild-shop .guild-unlock-card.is-unlocked { border-color: #508d7770; }
.guild-shop .guild-unlock-status:not(.is-locked) { color: #83ceb1; min-height: 42px; }
@media (max-width: 600px) {
  .guild-shop .guild-treasury-hero { grid-template-columns: minmax(0, 1fr); }
  .guild-shop .guild-treasury-balance { min-width: 0; }
  .guild-shop .guild-treasury-heading { align-items: flex-start; gap: 12px; }
  .guild-shop .guild-unlock-card { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .guild-shop .guild-unlock-card { transition: none; }
  .guild-shop .guild-unlock-card:hover { transform: none; }
}
/* Compact evidence gallery for the owner's submission and resubmission form. */
.review-evidence-compact {
  min-width: 0;
  max-width: 100%;
  padding: 12px;
}
.review-evidence-compact h3 { font-size: 18px; }
.review-evidence-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  margin-top: 12px;
  padding-bottom: 8px;
  align-items: flex-start;
}
.review-evidence-strip > .review-evidence-card {
  flex: 0 0 120px;
  width: 120px;
}
.review-evidence-compact .review-evidence-media { height: 96px; overflow: hidden; }
.review-evidence-compact .review-evidence-thumbnail { width: 100%; height: 100%; min-height: 0; }
.review-evidence-compact .review-evidence-media > div {
  padding: 8px;
  gap: 5px;
  font-size: 10px;
  line-height: 1.3;
}
.review-evidence-compact .review-evidence-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px;
  background: linear-gradient(transparent, #040c12ef 35%);
  pointer-events: none;
}
.review-evidence-compact .review-evidence-caption > p {
  display: none;
}
.review-evidence-compact .review-evidence-caption > span { font-size: 10px; }
.review-evidence-compact .review-evidence-caption > span svg { width: 12px; height: 12px; }
.review-evidence-compact .review-evidence-meta { display: none; }
.review-evidence-compact :is(.world-button, .world-more) {
  min-height: 28px;
  padding: 4px 7px;
  font-size: 10px;
  line-height: 1.3;
  gap: 4px;
}
.review-evidence-compact .world-button svg { width: 12px; height: 12px; }
.review-evidence-compact .review-evidence-card { position: relative; }
.review-evidence-maximize {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid #bfa16b88;
  border-radius: 6px;
  color: #ebd5a5;
  background: #08131de6;
}
.review-evidence-maximize:hover { background: #293b49; }
.review-evidence-maximize:focus-visible { outline: 2px solid #ebd5a5; outline-offset: 2px; }
.review-evidence-dialog {
  margin: auto;
  width: min(1100px, 94vw);
  max-width: 94vw;
  max-height: 94dvh;
  padding: 16px;
  border: 1px solid #bfa16b88;
  border-radius: 12px;
  background: #08131d;
  color: #ebd5a5;
}
.review-evidence-dialog::backdrop { background: #000c; }
.review-evidence-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.review-evidence-dialog > header span { overflow-wrap: anywhere; }
.review-evidence-dialog > header button { flex-shrink: 0; padding: 8px; }
.review-evidence-dialog > :is(img, video) { display: block; width: 100%; max-height: 78dvh; object-fit: contain; }
.review-evidence-dialog > iframe { width: 100%; height: 78dvh; border: 0; background: white; }
.review-evidence-remove {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid #fb718577;
  border-radius: 6px;
  color: #fda4af;
  background: #08131de6;
}
.review-evidence-remove:hover { background: #4c1520; }
.review-evidence-remove:disabled { opacity: .5; cursor: wait; }
.review-evidence-remove:focus-visible { outline: 2px solid #fda4af; outline-offset: 2px; }
.landing-hero-emblem {
  position: absolute;
  top: 50%;
  width: clamp(180px, 18vw, 300px);
  height: auto;
  aspect-ratio: 1;
  transform: translateY(-50%);
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
}

.landing-adventure-flow { padding: 64px 24px; border-top: 1px solid #bda16b30; background: radial-gradient(ellipse at 50% 0%, #7c3aed0d, transparent 65%), #081621; }
.landing-flow-heading { text-align: center; max-width: 720px; margin: 0 auto; }
.landing-flow-heading h2 { margin: 12px 0; color: #eed8ab; font: 400 clamp(2rem, 4vw, 3rem)/1.15 Georgia, serif; }
.landing-flow-heading p, .landing-flow-step p { color: #bfc3cf; line-height: 1.7; }
.landing-flow-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 36px 0 40px; padding: 28px 0; border-block: 1px solid rgba(189, 161, 107, .35); }
.landing-flow-step { position: relative; min-width: 0; padding: 0 32px; text-align: center; }
.landing-flow-step + .landing-flow-step { border-left: 1px solid rgba(189, 161, 107, .22); }
.landing-flow-icon, .landing-community-icon { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 20px; border: 1px solid #bda16b70; border-radius: 50%; color: #dfbc77; background: #d9b56d0d; }
.landing-flow-step h3 { margin: 0 0 10px; color: #f2dfbc; font: 500 22px/1.25 Georgia, serif; }
.landing-flow-step p { font-size: 14px; }
.landing-flow-arrow { position: absolute; right: -12px; top: 25px; z-index: 1; color: #dfbc77; background: #081621; }
:root.light .landing-adventure-flow { background: #f7f3ea; border-color: #ccb78d; }
:root.light .landing-flow-steps, :root.light .landing-flow-step + .landing-flow-step { border-color: #cbb993; }
:root.light .landing-flow-heading h2, :root.light .landing-flow-step h3 { color: #674a1d; }
:root.light .landing-flow-heading p, :root.light .landing-flow-step p { color: #435367; }
:root.light .landing-flow-icon, :root.light .landing-community-icon, :root.light .landing-flow-arrow { color: #856014; }
:root.light .landing-flow-arrow { background: #f7f3ea; }
@media (max-width: 760px) {
  .landing-flow-steps { display: block; padding: 0; }
  .landing-flow-step { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; padding: 26px 0; text-align: left; }
  .landing-flow-step + .landing-flow-step { border-left: 0; border-top: 1px solid rgba(189, 161, 107, .22); }
  .landing-flow-icon { margin: 0; }
  .landing-flow-copy { align-self: center; }
  .landing-flow-arrow { top: auto; bottom: -12px; left: 25px; right: auto; transform: rotate(90deg); }
}

.landing-hero-emblem--left {
  left: clamp(24px, 4vw, 80px);
}

.landing-hero-emblem--right {
  right: clamp(24px, 4vw, 80px);
}

.landing-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.landing-hero-login {
  min-width: 150px;
}

:root.light .landing-hero-login {
  background: #fffaf0;
  border-color: #9d8253;
  color: #674a1d;
}

:root.light .landing-hero-login:hover {
  background: #f1e6d0;
  border-color: #795819;
  color: #4a3517;
}

.landing-roles-section {
  padding: clamp(64px, 7vw, 96px) 24px;
  background: radial-gradient(ellipse at 50% 100%, rgba(124, 58, 237, .11), transparent 65%), #07131d;
}
.landing-roles-inner { max-width: 1160px; margin: 0 auto; }
.landing-roles-heading { max-width: 720px; margin: 0 auto 42px; text-align: center; }
.landing-roles-heading h2 { margin: 12px 0; color: #eed8ab; font: 400 clamp(2.25rem, 5vw, 3.7rem)/1.08 Georgia, serif; }
.landing-roles-heading p { color: #bfc3cf; line-height: 1.7; }
.landing-roles-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 30px 0 26px;
  list-style: none;
  border-block: 1px solid rgba(189, 161, 107, .35);
}
.landing-role { position: relative; min-width: 0; padding: 0 24px; text-align: center; }
.landing-role + .landing-role { border-left: 1px solid rgba(189, 161, 107, .22); }
.landing-role-emblem { position: relative; z-index: 1; width: 116px; height: 116px; margin: 0 auto 18px; }
.landing-role-emblem img { width: 100%; height: 100%; object-fit: contain; }
.landing-role:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(50% + 66px);
  top: 58px;
  width: calc(100% - 132px);
  height: 1px;
  background: linear-gradient(90deg, rgba(217, 181, 109, .5), rgba(217, 181, 109, .15));
}
.landing-role-action { color: #bda16b; font-size: 11px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.landing-role h3 { margin: 7px 0 12px; color: #eed8ab; font: 400 clamp(1.5rem, 2.5vw, 2rem)/1.15 Georgia, serif; }
.landing-role p { margin: 0; color: #bfc3cf; font-size: 14px; line-height: 1.65; }
:root.light .landing-roles-section { background: radial-gradient(ellipse at 50% 100%, #e8d8f033, transparent 65%), #f7f3ea; }
:root.light .landing-roles-heading h2, :root.light .landing-role h3 { color: #674a1d; }
:root.light .landing-roles-heading p, :root.light .landing-role p { color: #435367; }
:root.light .landing-role-action { color: #795819; }
:root.light .landing-roles-list { border-color: #cbb993; }
:root.light .landing-role + .landing-role { border-color: #cbb993; }
@media (max-width: 850px) {
  .landing-roles-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .landing-role:nth-child(3) { border-left: 0; }
  .landing-role:nth-child(n + 3) { padding-top: 28px; border-top: 1px solid rgba(189, 161, 107, .22); }
  .landing-role::after { display: none; }
}
@media (max-width: 560px) {
  .landing-roles-heading { margin-bottom: 30px; }
  .landing-roles-list { display: block; padding: 0; }
  .landing-role { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 16px; padding: 23px 0; text-align: left; }
  .landing-role + .landing-role, .landing-role:nth-child(n + 3) { border-left: 0; border-top: 1px solid rgba(189, 161, 107, .22); padding-top: 23px; }
  .landing-role-emblem { grid-column: 1; width: 86px; height: 86px; margin: 0; }
  .landing-role-copy { grid-column: 2; align-self: center; }
  .landing-role h3 { margin: 4px 0 7px; }
  .landing-role p { font-size: 13px; }
}

@media (max-width: 1300px) {
  .landing-hero-emblem {
    width: clamp(130px, 14vw, 180px);
  }
}

@media (max-width: 900px) {
  .landing-hero-emblem {
    display: none;
  }
}

.landing-community-section { padding: clamp(64px, 7vw, 104px) 24px; background: #081621; border-top: 1px solid #bda16b30; }
.landing-community-partners { background: #0b1923; }
.landing-community-inner { max-width: 1160px; margin: 0 auto; }
.landing-community-intro { display: flex; align-items: center; gap: 28px; max-width: 950px; }
.landing-community-emblem { flex: 0 0 128px; }
.landing-community-emblem img { width: 100%; height: auto; filter: drop-shadow(0 8px 22px #0005); }
.landing-community-intro h2 { margin: 10px 0 14px; color: #eed8ab; font: 400 clamp(2rem, 4vw, 3.2rem)/1.14 Georgia, serif; }
.landing-community-intro p { max-width: 72ch; color: #c6c3d0; font-size: 16px; line-height: 1.75; }
.landing-page .landing-community-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 38px; padding: 28px 0; border-block: 1px solid rgba(189, 161, 107, .35); }
.landing-community-item { min-width: 0; padding: 0 32px; text-align: center; }
.landing-community-item + .landing-community-item { border-left: 1px solid rgba(189, 161, 107, .22); }
.landing-community-icon svg { width: 32px; height: 32px; }
.landing-community-item h3 { margin: 0 0 10px; color: #f2dfbc; font: 500 22px/1.25 Georgia, serif; }
.landing-community-item p { color: #bfc3cf; font-size: 14px; line-height: 1.7; }
.landing-community-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; padding: 24px 28px; border: 1px solid #bda16b50; border-radius: 14px; background: #d9b56d0d; }
.landing-community-bottom p { max-width: 74ch; color: #ddd2bd; font-size: 14px; line-height: 1.7; }
.landing-community-bottom a { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; color: #f2d596; font-weight: 700; text-decoration: none; }
.landing-community-bottom a:hover { text-decoration: underline; }
.landing-community-bottom a:focus-visible { outline: 2px solid #efd092; outline-offset: 5px; }
:root.light .landing-community-section { background: #f7f3ea; border-color: #ccb78d; }
:root.light .landing-community-partners { background: #eee8db; }
:root.light .landing-community-intro h2 { color: #674a1d; }
:root.light .landing-community-intro p { color: #435367; }
:root.light .landing-community-grid, :root.light .landing-community-item + .landing-community-item { border-color: #cbb993; }
:root.light .landing-community-item h3 { color: #674a1d; }
:root.light .landing-community-item p { color: #435367; }
:root.light .landing-community-bottom { background: #ffffffa8; border-color: #cbb993; }
:root.light .landing-community-bottom p { color: #435367; }
:root.light .landing-community-bottom a { color: #674a1d; }
@media (max-width: 800px) { .landing-page .landing-community-grid { display: block; padding: 0; } .landing-community-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; align-items: center; padding: 26px 0; text-align: left; } .landing-community-item + .landing-community-item { border-left: 0; border-top: 1px solid rgba(189, 161, 107, .22); } .landing-community-icon { margin: 0; } .landing-community-intro { align-items: flex-start; } .landing-community-emblem { flex-basis: 92px; } }
@media (max-width: 600px) { .landing-community-intro { display: block; } .landing-community-emblem { width: 84px; margin-bottom: 18px; } .landing-community-bottom { display: block; padding: 22px; } .landing-community-bottom a { margin-top: 18px; } }

@media (max-width: 480px) {
  .landing-hero-actions {
    flex-direction: column;
  }

  .landing-hero-actions a {
    width: min(100%, 280px);
  }
}
:root.light .landing-karma-title,
:root.light .landing-karma-link { color: #795819; }

:root.light .landing-karma-intro { color: #536477; }
.landing-classes { padding:72px 24px 40px; border-block:1px solid #bda16b25; background:#061018; color:#f0ede6; }
.landing-classes-heading { text-align:center; }
.landing-classes-heading .guild-kicker { color:#d9b56d; font-size:11px; letter-spacing:.25em; }
.landing-classes-heading h2 { margin:10px 0; font:500 clamp(28px,3vw,42px)/1.2 Georgia,serif; color:#eed8ab; }
.landing-classes-heading>p:last-child { color:#b5b1cb; font-size:15px; }
.landing-class-picker { max-width:1152px; margin:32px auto 20px; display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:8px; }
.landing-class-picker button { position:relative; min-width:0; padding:8px 0 16px; border:0; background:transparent; cursor:pointer; color:#a6a0b3; border-radius:6px; }
.landing-class-picker img { width:100%; max-width:110px; margin:auto; aspect-ratio:1; object-fit:contain; transition:transform .25s,filter .25s; }
.landing-class-picker button>span { display:block; margin-top:6px; font-size:12px; font-weight:600; }
.landing-class-picker button[aria-pressed=true] { color:#f2cf8d; }
.landing-class-picker button[aria-pressed=true] img { transform:translateY(-5px) scale(1.07); filter:drop-shadow(0 0 12px #d7a34865); }
.landing-class-picker button[aria-pressed=true]::after { content:''; position:absolute; bottom:0; left:calc(50% - 3px); width:6px; height:6px; transform:rotate(45deg); background:#e5bf76; box-shadow:0 0 10px #ddb16480; }
.landing-classes :focus-visible { outline:2px solid #efd092; outline-offset:5px; }
.landing-class-stage { display:grid; position:relative; isolation:isolate; max-width:1152px; margin:auto; overflow:hidden; border:1px solid #c3a26550; border-radius:12px; background:radial-gradient(ellipse at left,#322442,#101016 70%); box-shadow:0 24px 65px #0005; }
.landing-class-empty { grid-area:1/1; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; min-width:0; padding:40px 24px; text-align:center; }
.landing-class-empty svg { color:#e1bd7d; filter:drop-shadow(0 0 14px #d9ae6070); }
.landing-class-empty h3 { margin:0; color:#fff6e8; font:500 clamp(30px,4vw,48px)/1.15 Georgia,serif; }
.landing-class-empty p { max-width:36ch; margin:0; color:#c5bfce; font-size:clamp(14px,1.5vw,17px); line-height:1.6; }
:root.light .landing-class-empty svg { color:#a47527; }
:root.light .landing-class-empty h3 { color:#243544; }
:root.light .landing-class-empty p { color:#536477; }
/* Every panel participates in sizing, keeping the stage steady when classes change. */
.landing-class-panel { grid-area:1/1; position:relative; min-width:0; min-height:480px; visibility:hidden; opacity:0; transition:opacity .25s,visibility .25s; }
.landing-class-panel.is-active { visibility:visible; opacity:1; z-index:1; }
.landing-class-scene { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:25% 35%; animation:landing-scene-in .3s ease-out; }
.landing-class-shade { position:absolute; inset:0; background:linear-gradient(270deg,#0d0c13fa 0%,#0d0c13ec 30%,#0d0c13b8 49%,#0d0c1320 78%),linear-gradient(0deg,#0d0c1390,transparent 55%); }
.landing-class-content { position:relative; width:62%; margin-left:auto; padding:46px; }
.landing-class-role { display:flex; gap:10px; align-items:center; color:#e1bd7d; font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.landing-class-content h3 { margin:12px 0 8px; color:#fff6e8; font-size:clamp(48px,6vw,80px); font-weight:900; line-height:1.08; letter-spacing:-.04em; text-transform:uppercase; overflow-wrap:anywhere; }
.landing-class-line { color:#c6bfcd; font-size:15px; line-height:1.7; max-width:390px; }
.landing-class-perks { display:grid; gap:10px; margin-top:28px; }
.landing-class-perk { display:flex; align-items:flex-start; gap:13px; padding:15px 17px; background:#17131fd9; border:1px solid #bb975535; border-radius:7px; }
.landing-class-perk>svg { flex-shrink:0; margin-top:2px; color:#dcba78; }
.landing-class-perk h4 { font-weight:700; color:#eddaad; font-size:13px; margin:0 0 4px; }
.landing-class-perk p,.landing-class-notice { font-size:13px; line-height:1.65; color:#c5bfce; overflow-wrap:anywhere; }
.landing-class-notice { padding:16px; }
.landing-class-link { display:inline-flex; align-items:center; gap:12px; margin-top:25px; color:#efd29b; font-size:13px; font-weight:700; text-decoration:none; border-bottom:1px solid #dab87455; padding-bottom:6px; }
.landing-class-link:hover { color:white; border-color:#efd29b; }
.landing-class-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:24px; }
.landing-class-actions .landing-class-link { margin-top:0; }
.landing-class-selected-badge { display:inline-flex; align-items:center; gap:6px; padding:7px 16px; background:rgba(34,197,94,0.16); border:1px solid rgba(34,197,94,0.45); color:#4ade80; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; border-radius:4px; }
.landing-class-choose-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 18px; background:linear-gradient(135deg,#d9ae60,#b5832e); border:1px solid #f2cf8d; color:#100f16; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; border-radius:4px; cursor:pointer; transition:transform .15s,box-shadow .15s,filter .15s; }
.landing-class-choose-btn:hover { filter:brightness(1.15); transform:translateY(-1px); box-shadow:0 4px 14px rgba(217,174,96,0.35); }
.landing-classes.is-embedded { padding:16px 0 8px; border-block:none; background:transparent; }
.landing-classes.is-embedded .landing-class-picker { margin-top:20px; }
.landing-class-picker button.is-confirmed-choice:not([aria-pressed=true])::after { content:''; position:absolute; bottom:0; left:calc(50% - 3px); width:6px; height:6px; transform:rotate(45deg); background:#e5bf76; box-shadow:0 0 10px #ddb16480; }
.landing-class-picker button.is-confirmed-choice:not([aria-pressed=true]) { color:#d9ae60; }
.landing-class-number { position:absolute; bottom:28px; left:30px; color:#f2d49a; font-size:24px; font-weight:700; text-shadow:0 2px 8px #000; }
.landing-class-number span { color:#c1b9c8; font-size:12px; font-weight:400; }
.landing-class-hint { margin:20px auto 0; text-align:center; font-size:12px; color:#9b94a7; }
@keyframes landing-scene-in { from { opacity:0; } to { opacity:1; } }
@media(max-width:850px) {
  .landing-class-content { width:72%; padding:32px; }
  .landing-class-picker { grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px 6px; margin-top:24px; }
  .landing-class-picker img { max-width:85px; }
  .landing-class-picker button>span { font-size:11px; }
}
@media(max-width:600px) {
  .landing-classes { padding:40px 16px 24px; }
  .landing-classes.is-embedded { padding:16px 0 12px; }
  .landing-class-picker { grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px 4px; margin-top:20px; }
  .landing-class-picker img { max-width:68px; }
  .landing-class-picker button>span { font-size:10px; }
  .landing-class-content { width:100%; padding:220px 22px 32px; }
  .landing-class-content h3 { font-size:clamp(36px,10vw,56px); }
  .landing-class-scene { height:340px; object-position:center 30%; }
  .landing-class-shade { background:linear-gradient(0deg,#0d0c13 0%,#0d0c13 45%,#0d0c1300 100%); }
  .landing-class-role { font-size:10px; }
  .landing-class-number { top:18px; right:20px; bottom:auto; }
  .landing-class-perks { margin-top:20px; }
  .landing-class-actions { gap:12px; }
}
@media(prefers-reduced-motion:reduce) { .landing-classes *, .landing-classes *::after { animation:none !important; transition:none !important; } }
.flyer-download { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 32px; padding: 28px; border: 1px solid #bda16b60; border-radius: 18px; background: #d9b56d0a; }
.landing-flyer-section { max-width: 1208px; padding: 40px 24px 0; margin: 0 auto; }
.partners-page .flyer-download { margin-top: 48px; }
.flyer-download-preview { display: block; border-radius: 5px; overflow: hidden; box-shadow: 0 8px 28px #0004; }
.flyer-download-preview img { display: block; width: 100%; height: auto; }
.flyer-download h2 { margin: 10px 0; color: #eed8ab; font: 400 clamp(1.5rem, 3vw, 2rem)/1.2 Georgia, serif; }
.flyer-download p { color: #c6c3d0; line-height: 1.7; }
.flyer-download .flyer-download-meta { margin-top: 6px; font-size: 12px; }
.flyer-download-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.flyer-download-open { display: inline-flex; align-items: center; gap: 6px; color: #eed8ab; font-size: 13px; }
.flyer-download-open:hover { text-decoration: underline; }
.flyer-download a:focus-visible { outline: 2px solid #b48a46; outline-offset: 5px; }
:root.light .flyer-download { background: #fffdf8; border-color: #cbb993; }
:root.light .flyer-download h2, :root.light .flyer-download-open { color: #674a1d; }
:root.light .flyer-download p { color: #435367; }
:root.light .flyer-download .world-button-secondary { color: #674a1d; background: #fffaf0; border-color: #9d8253; }
:root.light .flyer-download .world-button-secondary:hover { color: #4a3517; background: #f1e6d0; }
@media (max-width: 640px) {
  .flyer-download { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
  .flyer-download-preview { width: 140px; }
}
.presentation-selector { border: 0; padding: 0; margin: 0; min-width: 0; font-family: var(--app-font-sans, system-ui); }
.presentation-selector legend { font-size: .8rem; margin-bottom: .55rem; color: inherit; font-weight: 600; }
.presentation-options { display: flex; gap: .4rem; flex-wrap: wrap; }
.presentation-option { position: relative; display: flex; align-items: center; gap: .5rem; padding: .65rem 1rem; border: 1px solid #879b9a; border-radius: .65rem; cursor: pointer; color: inherit; min-height: 44px; }
.presentation-option input { accent-color: #16766a; width: 16px; height: 16px; flex: 0 0 auto; }
.presentation-option:focus-within { outline: 3px solid #258a7b; outline-offset: 3px; }
.presentation-option.is-selected { background: #dff2ed; color: #154d46; border-color: #16766a; }
.presentation-option-name { font-size: .9rem; font-weight: 650; }
.presentation-gate { box-sizing: border-box; position: fixed; inset: 0; margin: auto; width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: clamp(20px, 4vw, 40px); border: 1px solid #cedbd6; border-radius: 22px; color: #203934; background: #f8fbf9; font-family: Inter, system-ui, sans-serif; box-shadow: 0 24px 100px #102b3455; }
.presentation-gate::backdrop { background: #eff5f2f5; backdrop-filter: blur(12px); }
.presentation-gate-brand { color: #16766a; font-size: 1.05rem; font-weight: 750; margin-bottom: 24px; }
.presentation-gate h1 { font: 650 clamp(25px, 4vw, 34px)/1.2 Inter, system-ui, sans-serif; margin: 0 0 14px; color: #203934; }
.presentation-gate p { font-size: .96rem; line-height: 1.6; color: #556b66; margin-bottom: 24px; }
.presentation-gate nav { display: flex; gap: 24px; margin-top: 24px; font-size: .85rem; flex-wrap: wrap; }
.presentation-gate nav a { color: #176d61; text-decoration: underline; text-underline-offset: 4px; }
.presentation-cards .presentation-options { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(220px,100%),1fr)); gap: 16px; }
.presentation-cards .presentation-option { display: grid; grid-template-columns: 20px 1fr; align-content: start; padding: 14px; background: #fff; border-color: #c1d3cd; }
.presentation-cards .presentation-option img { grid-row: 1; grid-column: 1 / -1; width: 100%; height: 145px; object-fit: cover; border-radius: 10px; margin-bottom: 12px; }
.presentation-cards .presentation-option-description { grid-column: 1 / -1; font-size: .85rem; color: #556b66; line-height: 1.55; margin-top: 5px; }
.presentation-status { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 9999; width: max-content; max-width: calc(100vw - 32px); background: #163d38; color: #fff; padding: 12px 18px; border-radius: 12px; font: 400 .85rem/1.5 Inter,system-ui,sans-serif; box-shadow: 0 4px 24px #0003; }
.presentation-status button { color: #fff; text-decoration: underline; margin-left: 8px; font-weight: 700; min-height: 32px; }
[data-presentation-loading] { visibility: hidden; }
@media (max-width: 500px) { .presentation-cards .presentation-option img { height: 95px; } .presentation-gate { padding: 22px; } }
@media (prefers-reduced-motion: reduce) { .presentation-option { transition: none; } }
.public-presentation-bar { padding: 9px 24px; border-top: 1px solid #879b9a40; display:flex; justify-content:center; }
.public-presentation-bar .presentation-selector { display:flex; align-items:center; gap:12px; }
.public-presentation-bar .presentation-selector legend { float:left; margin:0 8px 0 0; padding-top:8px; font-size:12px; }
.public-presentation-bar .presentation-option { padding:4px 12px; min-height:34px; }
.public-presentation-bar .presentation-option-name { font-size:12px; }
.presentation-gate-brand { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom: 12px; }
.presentation-gate-logo { width:44px; height:44px; object-fit:contain; }
.presentation-gate-wordmark { width:155px; height:auto; object-fit:contain; }
.presentation-gate {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(880px, calc(100vw - 24px));
  max-height: calc(100dvh - 20px);
  padding: clamp(16px, 3vw, 32px);
  border: 0 !important;
  border-radius: 0;
  color: #f0ede6;
  background: transparent !important;
  box-shadow: none !important;
  font-family: Inter, system-ui, sans-serif;
  text-align: center;
  overflow-y: auto;
  overflow-x: hidden;
}
.presentation-gate::backdrop {
  background: rgba(4, 10, 16, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.presentation-gate h1 {
  font: 600 clamp(22px, 3.5vw, 32px)/1.25 Inter, system-ui, sans-serif;
  margin: 0 auto clamp(18px, 2.5vh, 28px);
  color: #f8fafc;
  max-width: 600px;
}
.presentation-gate p { display: none !important; }
.presentation-gate nav { display: none !important; }

/* Gate modal two large images without cards around them */
.presentation-gate-cards .presentation-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 36px);
  max-width: 820px;
  margin: 0 auto;
  align-items: stretch;
  justify-items: center;
}
.presentation-gate-cards .presentation-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 896 / 960;
  max-width: min(100%, 410px, calc((100dvh - 200px) * 896 / 960));
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  background: transparent;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.presentation-gate-cards .presentation-option:hover {
  transform: translateY(-6px) scale(1.015);
  border-color: rgba(147, 197, 253, 0.9);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.75), 0 0 35px rgba(59, 130, 246, 0.35);
}
.presentation-gate-cards .presentation-option.presentation-option-fantasy:hover {
  border-color: rgba(251, 191, 36, 0.9);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.75), 0 0 35px rgba(245, 158, 11, 0.35);
}
.presentation-gate-cards .presentation-option.is-selected {
  border-color: #38bdf8;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.75), 0 0 35px rgba(56, 189, 248, 0.45);
}
.presentation-gate-cards .presentation-option.presentation-option-fantasy.is-selected {
  border-color: #fbbf24;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.75), 0 0 35px rgba(245, 158, 11, 0.45);
}
.presentation-gate-cards .presentation-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
}
.presentation-gate-cards .presentation-option-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px 22px;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, transparent 0%, rgba(4, 10, 16, 0.65) 40%, rgba(4, 10, 16, 0.94) 100%);
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}
.presentation-gate-cards .presentation-card-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.presentation-gate-cards .presentation-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}


/* Crop the window above the laptop; image and logo keep their shared coordinates. */
.presentation-everyday-scene {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 896 / 1200;
}

/* Keep the logo on the original dark laptop display, including on touch screens. */
.presentation-hover-screen {
  position: absolute;
  left: 31.9%;
  top: 59.9%;
  width: 37.5%;
  height: 19.2%;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.presentation-screen-glow {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.presentation-gate-cards .presentation-card-visual .presentation-screen-logo {
  width: 28%;
  max-width: 44px;
  height: auto;
  max-height: 52%;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(217, 181, 109, 0.45));
  animation: presentation-logo-pulse 2.6s ease-in-out infinite;
}
@keyframes presentation-logo-pulse {
  0%, 100% { opacity: .65; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* The scene and its cloth share one coordinate system at every card size. */
.presentation-fantasy-scene {
  display: block;
  width: 100%;
  height: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .presentation-fantasy-cloth { filter: none; }
  .presentation-gate-cards .presentation-card-visual .presentation-screen-logo { animation: none; opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .presentation-gate {
    width: calc(100vw - 16px);
    padding: 12px;
  }
  .presentation-gate-brand { gap: 8px; margin-bottom: 12px; }
  .presentation-gate-logo { width: 36px; height: 36px; }
  .presentation-gate-wordmark { width: 140px; }
  .presentation-gate h1 { font-size: clamp(19px, 5vw, 26px); margin-bottom: 16px; }
  .presentation-gate-cards { width: 100%; }
  .presentation-gate-cards legend { width: 100%; text-align: center; }
  .presentation-gate-cards .presentation-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }
  .presentation-gate-cards .presentation-option { border-radius: 14px; }
  .presentation-gate-cards .presentation-option-name {
    padding: 24px 6px 12px;
    font-size: clamp(16px, 4.5vw, 22px);
    letter-spacing: .02em;
  }
}

.presentation-mode-switch {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border-radius: 9999px;
  border: 1px solid #53606c;
  background: #08141f;
  gap: 2px;
}
.presentation-mode-switch button {
  padding: 5px;
  border-radius: 9999px;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
:root.light .presentation-mode-switch {
  border-color: #c6b68e;
  background: #fffdf7;
}


.world-profile-flyout-presentation { display:block; }
.world-profile-flyout-presentation .presentation-selector { width:100%; }
.world-profile-flyout-presentation .presentation-selector legend { margin-bottom:8px; font-size:13px; }
.world-profile-flyout-presentation .presentation-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.world-profile-flyout-presentation .presentation-option { min-width:0; min-height:38px; padding:6px 8px; gap:5px; border-color:#b79b6360; }
.world-profile-flyout-presentation .presentation-option-name { font-size:12px; }
.world-profile-flyout-presentation .presentation-option.is-selected { background:#d9b56d26; color:#f0ede6; border-color:#d9b56d; }
:root.light .world-profile-flyout-presentation .presentation-option.is-selected { background:#ead6ae; color:#4b3515; border-color:#92702c; }
.gw-dialog {
  --dialog-accent: #fbbf24;
  --dialog-tint: rgba(251, 191, 36, .09);
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 0;
  width: min(540px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  color: var(--zinc-100);
  background: var(--zinc-950);
  border: 1px solid var(--zinc-700);
  border-radius: 20px;
  box-shadow: 0 32px 100px #0008;
}
.gw-dialog[open] { animation: gw-dialog-enter .18s ease-out; }
.gw-dialog::backdrop { background: #000b; backdrop-filter: blur(7px); }
.gw-dialog-danger { --dialog-accent: #fb7185; --dialog-tint: rgba(251, 113, 133, .09); }
.gw-dialog-content { padding: 24px 28px 28px; background: radial-gradient(ellipse at top left, var(--dialog-tint), transparent 65%); }
.gw-dialog-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.gw-dialog-topline > span { font-size: 10px; letter-spacing: .22em; font-weight: 700; color: var(--zinc-400); }
.gw-dialog-close { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--zinc-400); cursor: pointer; }
.gw-dialog-close:hover { background: var(--zinc-800); color: var(--zinc-100); }
.gw-dialog h2 { font-size: 24px; line-height: 1.25; font-weight: 750; letter-spacing: -.025em; padding-right: 12px; }
.gw-dialog-description { margin-top: 12px; color: var(--zinc-400); font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.gw-dialog-field { margin-top: 24px; }
.gw-dialog-field label { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 600; color: var(--zinc-300); }
.gw-dialog-field input, .gw-dialog-field textarea { display: block; box-sizing: border-box; width: 100%; padding: 13px 15px; border-radius: 10px; border: 1px solid var(--zinc-700); background: var(--zinc-900); color: var(--zinc-100); font: inherit; font-size: 14px; line-height: 1.6; resize: vertical; }
.gw-dialog-field textarea { min-height: 140px; }
.gw-dialog-field :is(input, textarea)::placeholder { color: var(--zinc-500); }
.gw-dialog :is(button, input, textarea):focus-visible { outline: 2px solid var(--dialog-accent); outline-offset: 3px; }
.gw-dialog-hint { margin-top: 9px; font-size: 11px; color: var(--zinc-400); }
.gw-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 20px 28px; border-top: 1px solid var(--zinc-800); background: var(--zinc-900); }
.gw-dialog-actions button { display: inline-flex; justify-content: center; align-items: center; gap: 12px; border-radius: 10px; padding: 12px 18px; font-size: 13px; font-weight: 650; cursor: pointer; transition: filter .15s, opacity .15s; }
.gw-dialog-primary { background: var(--dialog-accent); color: #18181b; }
.gw-dialog-primary:hover { filter: brightness(1.08); }
.gw-dialog-primary:disabled { opacity: .35; cursor: not-allowed; }
.gw-dialog-secondary { color: var(--zinc-300); border: 1px solid var(--zinc-700); }
.gw-dialog-secondary:hover { background: var(--zinc-800); }
@keyframes gw-dialog-enter { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gw-dialog[open] { animation: none; } }
@media (max-width: 480px) { .gw-dialog-content { padding: 20px; } .gw-dialog-actions { padding: 16px 20px; } .gw-dialog-actions button { flex: 1; } .gw-dialog h2 { font-size: 22px; } }

/* Shared fantasy styling for confirmations, prompts and alerts. */
.gw-dialog{--dialog-accent:#dfbc78;--dialog-tint:#d9b56d14;background:linear-gradient(135deg,#122632,#07121c 65%);color:#eee9df;border:1px solid #bda16b;border-radius:12px;box-shadow:0 24px 90px #000b,inset 0 0 0 4px #d9b56d08}.gw-dialog-danger{--dialog-accent:#ee9cab;--dialog-tint:#ad40551a;border-color:#b77380}.gw-dialog h2{font:500 27px/1.25 Georgia,serif;color:#eed8ab;letter-spacing:normal}.gw-dialog-danger h2{color:#f3bbc5}.gw-dialog-description,.gw-dialog-hint,.gw-dialog-topline>span{color:#b5add1}.gw-dialog-field label{color:#d5cde3}.gw-dialog-field input,.gw-dialog-field textarea{background:#08141f;border-color:#53616d;color:#eee9df;border-radius:6px}.gw-dialog-actions{border-color:#bda16b40;background:#06121b}.gw-dialog-actions button{border-radius:99px;font:15px Georgia,serif;min-height:44px}.gw-dialog-primary{background:linear-gradient(#e0bd78,#b48a46);color:#08131d;border:1px solid #edcd94}.gw-dialog-danger .gw-dialog-primary{background:linear-gradient(#c46b7c,#903e50);border-color:#e7a0ad;color:#fff0f2}.gw-dialog-secondary{color:#d8cbb1;border-color:#8d7955;background:#0c1923}.gw-dialog-secondary:hover,.gw-dialog-close:hover{background:#bda16b22;color:#f3dca7}.gw-dialog-close{color:#b5add1;border-radius:50%}

/* Light Mode Theme Overrides for DialogProvider */
:root.light .gw-dialog {
  --dialog-accent: #795819;
  --dialog-tint: rgba(121, 88, 25, 0.08);
  background: #fffdf7 !important;
  color: #263747 !important;
  border: 1px solid #c6b68e !important;
  box-shadow: 0 24px 80px rgba(73, 62, 32, 0.22), inset 0 0 0 1px #ffffff !important;
}

:root.light .gw-dialog-content {
  background: radial-gradient(ellipse at top left, var(--dialog-tint), transparent 70%) !important;
}

:root.light .gw-dialog-topline > span {
  color: #795819 !important;
  font-weight: 700 !important;
}

:root.light .gw-dialog-close {
  color: #536477 !important;
  border-radius: 50% !important;
}

:root.light .gw-dialog-close:hover {
  background: #e7d8b6 !important;
  color: #674a1d !important;
}

:root.light .gw-dialog-danger {
  --dialog-accent: #9a293c;
  --dialog-tint: rgba(154, 41, 60, 0.08);
  border-color: #c77984 !important;
}

:root.light .gw-dialog h2 {
  color: #674a1d !important;
}

:root.light .gw-dialog-danger h2 {
  color: #9a293c !important;
}

:root.light .gw-dialog-description,
:root.light .gw-dialog-hint {
  color: #536477 !important;
}

:root.light .gw-dialog-field label {
  color: #263747 !important;
}

:root.light .gw-dialog-field input,
:root.light .gw-dialog-field textarea {
  background: #fffdf8 !important;
  border-color: #c6b68e !important;
  color: #263747 !important;
  border-radius: 6px !important;
}

:root.light .gw-dialog-field :is(input, textarea)::placeholder {
  color: #788696 !important;
}

:root.light .gw-dialog-actions {
  border-color: #c6b68e !important;
  background: #f5f2e9 !important;
}

:root.light .gw-dialog-primary {
  background: linear-gradient(#92702c, #795819) !important;
  color: #ffffff !important;
  border: 1px solid #674a1d !important;
}

:root.light .gw-dialog-primary:hover {
  filter: brightness(1.08) !important;
}

:root.light .gw-dialog-danger .gw-dialog-primary {
  background: linear-gradient(#b91c1c, #991b1b) !important;
  border-color: #7f1d1d !important;
  color: #ffffff !important;
}

:root.light .gw-dialog-secondary {
  color: #674a1d !important;
  border-color: #a98a4e !important;
  background: #fffdf7 !important;
}

:root.light .gw-dialog-secondary:hover {
  background: #e7d8b6 !important;
}

.hero-rank { display:inline-flex; align-items:center; gap:.25em; vertical-align:middle; }
.hero-rank-emblem { display:block; width:2.8em; height:2.8em; flex-shrink:0; color:#a8b4bf; }
.hero-rank-letter { fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:square; stroke-linejoin:round; }
.hero-rank-frame { fill:#10212e; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }
.hero-rank-outer-frame { stroke-width:1; }
.hero-rank-ornament { fill:none; stroke:currentColor; stroke-width:1; stroke-linejoin:round; }
.hero-rank-crown { fill:currentColor; fill-opacity:.3; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; }
.hero-rank-tier-1 { color:#bfcbd5; }
.hero-rank-tier-2 { color:#d0b580; }
.hero-rank-tier-3 { color:#e3c184; }
.hero-rank-tier-4 { color:#f0cc81; }
.hero-rank-tier-5 { color:#f7d78d; filter:drop-shadow(0 0 3px #e6b95830); }
.hero-rank-tier-6 { color:#ffe5a3; filter:drop-shadow(0 0 5px #e6b95860); }
.hero-rank-identity .hero-rank-emblem { width:84px; height:84px; }
.hero-rank-showcase { display:flex; justify-content:center; width:100%; margin:0 0 16px; }
.hero-rank-showcase .hero-rank-emblem { width:120px; max-width:100%; height:auto; aspect-ratio:1; }
:root.light .hero-rank-emblem { color:#403728; }
:root.light .hero-rank-frame { fill:#fff; }
:root.light .hero-rank-tier-0 { color:#403728; }
:root.light .hero-rank-tier-1 { color:#344657; }
:root.light .hero-rank-tier-2 { color:#644817; }
:root.light .hero-rank-tier-3,:root.light .hero-rank-tier-4,:root.light .hero-rank-tier-5,:root.light .hero-rank-tier-6 { color:#76500b; }
@media(max-width:560px) { .hero-rank-identity .hero-rank-emblem { width:66px; height:66px; } }
.karma-score-link { color: inherit; text-decoration: none; cursor: pointer; border-radius: 2px; }
.karma-score-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.karma-score-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.hero-business-card { 
  display: grid; 
  grid-template-columns: minmax(0, 1fr) 76px;
  gap: 12px 16px; 
  width: 100%; 
  max-width: 560px; 
  padding: 14px 16px; 
  border: 1px solid #b99b6070; 
  border-radius: 16px; 
  background: #081521ed; 
  box-shadow: 0 12px 32px #0005; 
  container-type: inline-size; 
  container-name: herocard; 
  box-sizing: border-box; 
  align-items: center; 
}
.hero-business-card-no-qr,
.hero-business-card-slim { grid-template-columns: minmax(0, 1fr); }

.hero-business-main-content { 
  display: contents;
}

/* 1. Identity Row */
.hbc-identity-row {
  display: flex;
  grid-column: 1;
  grid-row: 1;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.hbc-cell-avatar { display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
.hero-business-avatar { 
  position: relative; 
  flex-shrink: 0; 
  width: 50px; 
  height: 50px; 
  border: 2px solid #d9b56d; 
  border-radius: 50%; 
  overflow: hidden; 
  background: #152737; 
  display: grid; 
  place-items: center; 
}
.hero-business-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hero-business-avatar > svg:not(.hero-business-camera) { width: 26px; height: 26px; }
.hero-business-camera { position: absolute; bottom: 0; width: 100%; height: 15px; padding: 2px; background: #0009; }

.hbc-cell-name { min-width: 0; flex: 1; }
.hbc-cell-name h1 { 
  font-size: 19px; 
  font-weight: 700; 
  line-height: 1.2; 
  color: #fff0ce; 
  margin: 1px 0; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}
.hero-business-titles {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 5px;
  margin-top: 1px;
  font-size: 12px;
  line-height: 1.25;
}
.hbc-cell-name .hero-business-karma { 
  font-size: 12px; 
  font-weight: 500; 
  color: #c4b5fd; 
  letter-spacing: 0.02em; 
}
.hbc-cell-name .hero-business-selected-title {
  font-size: 12px;
  font-weight: 600;
  color: #ebd5a7;
  overflow-wrap: anywhere;
}
.hero-business-title-separator { color: #bdb6a6; }
.hero-business-card small { 
  display: block; 
  font-size: 10px; 
  color: #bdb6a6; 
  margin-bottom: 1px; 
  text-transform: uppercase; 
  letter-spacing: 0.05em; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}

/* 2. Details Row: Rank & All Stats in One Row */
.hbc-details-row {
  display: flex;
  grid-column: 1 / -1;
  grid-row: 2;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.hbc-cell-class-icon { display: flex; flex-direction: column; justify-content: center; align-items: center; flex-shrink: 0; }
.hbc-cell-class-icon .hbc-rank-label { margin-bottom: 1px; text-align: center; }
.hbc-cell-class-icon .hbc-main-rank-icon { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  width: 64px;
  height: 64px;
}
.hbc-cell-class-icon .hbc-main-rank-icon .hero-rank-emblem { 
  width: 100% !important; 
  height: 100% !important; 
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4)); 
}

.hbc-stats-grid { 
  display: flex; 
  align-items: flex-start; 
  gap: 10px 14px; 
  flex-wrap: wrap; 
  min-width: 0; 
  flex: 1;
}

.hbc-stat-group { display: flex; flex-direction: column; align-items: flex-start; text-align: left; justify-content: flex-start; min-width: 0; }
.hbc-stat-val { display: flex; align-items: center; justify-content: flex-start; min-height: 22px; }
.hbc-class-val strong { font-size: 13px; font-weight: 600; color: #ebd5a7; white-space: nowrap; }
.hbc-stat-val.hbc-level-val strong,
.hbc-stat-val.hbc-actions-val strong { font: 500 17px/1 Georgia, serif; color: #eed7a8; }
.hbc-stat-val.hbc-karma-val strong { font: 600 17px/1 Georgia, serif; color: #34d399; }
.hbc-guild-val { max-width: 100px; }
.hbc-guild-name { font-size: 12px; font-weight: 600; color: #eed7a8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.hbc-no-guild { font-size: 12px; color: #a8b4bf; opacity: 0.5; }

/* 3. QR Pass: Default on RIGHT */
.hero-business-pass { 
  grid-column: 2; 
  grid-row: 1;
  align-self: center; 
  justify-self: end;
  text-align: center; 
  cursor: pointer; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  width: 76px;
  flex-shrink: 0; 
  transition: transform 0.2s ease; 
  border-top: none;
  background: transparent;
  padding: 0;
}
.hero-business-qr { 
  width: 72px; 
  height: 72px; 
  display: grid; 
  place-items: center; 
  background: white; 
  border-radius: 8px; 
  overflow: hidden; 
  color: #273441; 
  border: 1px solid #d9b56d80; 
  transition: transform 0.2s ease, box-shadow 0.2s ease; 
  box-sizing: border-box; 
}
.hero-business-pass:hover .hero-business-qr { 
  transform: scale(1.05); 
  border-color: #d9b56d; 
  box-shadow: 0 0 10px rgba(217, 181, 109, 0.4); 
}
.hero-business-qr svg { display: block; width: 100%; height: 100%; }
.hero-business-qr > span { padding: 4px; font-size: 10px; text-align: center; }

.hero-business-pass-info { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  text-align: center; 
  margin-top: 3px; 
  min-width: 0; 
}
.hbc-pass-header { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
}
.hbc-pass-header strong { 
  display: none; 
}
.hbc-pass-header small, 
.hbc-pass-header button { 
  font-size: 9px; 
  line-height: 1.15; 
  color: #bdb6a6; 
  text-transform: none; 
  text-align: center; 
  letter-spacing: 0; 
  background: none; 
  border: none; 
  padding: 0; 
}
.hbc-pass-hint { 
  display: none; 
}

/* Light Theme Overrides */
:root.light .hero-business-card:not(.hero-business-card-slim) { background: var(--world-surface, #fffdf7) !important; border-color: #d9b56d; box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
:root.light .hbc-cell-name h1 { color: #1e293b; }
:root.light .hbc-cell-name .hero-business-karma { font-weight: 600; }
:root.light .hbc-cell-name .hero-business-selected-title { color: #674a1d; }
:root.light .hero-business-title-separator { color: #64748b; }
:root.light .hero-business-card small { color: #64748b; }
:root.light .hbc-cell-class-icon .hbc-main-rank-icon .hero-rank-emblem { filter: none; }
:root.light .hbc-class-val strong { color: #334155; }
:root.light .hbc-stat-val.hbc-level-val strong { color: #334155; }
:root.light .hbc-stat-val.hbc-actions-val strong { color: #334155; }
:root.light .hbc-stat-val.hbc-karma-val strong:not([style]) { color: #059669; }
:root.light .hbc-guild-name { color: #334155; }
:root.light .hbc-no-guild { color: #94a3b8; }
:root.light .hero-business-pass-info small, :root.light .hero-business-pass-info button { color: #64748b; }

/* Squeezed Container: QR Drops to Bottom Row */
@container herocard (max-width: 380px) {
  .hero-business-card { 
    display: flex; 
    flex-direction: column; 
    padding: 12px; 
    gap: 10px; 
  }
  .hero-business-avatar { width: 42px; height: 42px; }
  .hbc-cell-class-icon .hbc-main-rank-icon { width: 42px; height: 42px; }
  .hbc-cell-name h1 { font-size: 16px; }
  .hbc-stats-grid { gap: 6px 10px; }
  .hbc-class-val strong { font-size: 12px; }
  .hbc-stat-val.hbc-level-val strong,
  .hbc-stat-val.hbc-actions-val strong,
  .hbc-stat-val.hbc-karma-val strong { font-size: 15px; }

  .hero-business-pass { 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    gap: 10px; 
    padding: 6px 10px; 
    border-top: 1px solid #b99b6030; 
    width: 100%; 
    background: rgba(185, 155, 96, 0.05); 
    border-radius: 8px; 
  }
  :root.light .hero-business-pass { 
    background: rgba(121, 88, 25, 0.04); 
    border-top-color: rgba(198, 182, 142, 0.4); 
  }
  .hero-business-qr { 
    width: 44px; 
    height: 44px; 
    border-radius: 6px; 
  }
  .hero-business-pass-info { 
    align-items: flex-start; 
    text-align: left; 
    margin-top: 0; 
    flex: 1; 
  }
  .hbc-pass-header { 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    justify-content: space-between; 
    width: 100%; 
    gap: 6px; 
  }
  .hbc-pass-header strong { 
    display: inline-block; 
    font-size: 11px; 
    color: #ebd5a7; 
  }
  :root.light .hbc-pass-header strong { 
    color: #263747; 
  }
  .hbc-pass-header small, 
  .hbc-pass-header button { 
    font-size: 9px; 
    color: #a8b4bf; 
  }
  .hbc-pass-hint { 
    display: block; 
    font-size: 9px; 
    color: #8b99a8; 
    margin-top: 1px; 
  }
}

/* Mobile Devices: QR on RIGHT */
@media(max-width: 640px) {
  .hero-business-card { 
    display: grid !important; 
    grid-template-columns: minmax(0, 1fr) 62px !important;
    padding: 12px; 
    gap: 8px 10px; 
    align-items: center; 
  }
  .hero-business-card-no-qr,
  .hero-business-card-slim { grid-template-columns: minmax(0, 1fr) !important; }
  .hbc-identity-row { gap: 10px; }
  .hbc-details-row { gap: 10px; }
  .hero-business-avatar { width: 44px; height: 44px; }
  .hbc-cell-class-icon .hbc-main-rank-icon { width: 44px; height: 44px; }
  .hbc-cell-name h1 { font-size: 16px; }
  .hbc-stats-grid { gap: 6px 10px; }
  .hbc-class-val strong { font-size: 12px; }
  .hbc-stat-val.hbc-level-val strong,
  .hbc-stat-val.hbc-actions-val strong,
  .hbc-stat-val.hbc-karma-val strong { font-size: 15px; }

  .hero-business-pass { 
    grid-column: 2 !important; 
    width: 62px !important;
    flex-direction: column !important; 
    border-top: none !important; 
    background: transparent !important; 
    padding: 0 !important; 
  }
  .hero-business-qr { width: 58px !important; height: 58px !important; }
  .hero-business-pass-info { align-items: center !important; text-align: center !important; }
  .hbc-pass-header strong { display: none !important; }
  .hbc-pass-hint { display: none !important; }
}

@media(max-width: 380px) {
  .hero-business-card { padding: 10px; gap: 6px 8px; grid-template-columns: minmax(0, 1fr) 54px !important; }
  .hero-business-card-no-qr,
  .hero-business-card-slim { grid-template-columns: minmax(0, 1fr) !important; }
  .hero-business-avatar { width: 38px; height: 38px; }
  .hbc-cell-class-icon .hbc-main-rank-icon { width: 38px; height: 38px; }
  .hbc-cell-name h1 { font-size: 14px; }
  .hero-business-pass { width: 54px !important; }
  .hero-business-qr { width: 52px !important; height: 52px !important; }
}

/* Sidebar & Specific Contexts */
.sidebar-hero-card .hero-business-card { padding: 10px; gap: 8px; grid-template-columns: minmax(0, 1fr) !important; }
.sidebar-hero-card .hero-business-avatar { width: 36px; height: 36px; }
.sidebar-hero-card .hbc-cell-class-icon .hbc-main-rank-icon { width: 36px; height: 36px; }
.sidebar-hero-card .hbc-cell-name h1 { font-size: 15px; }
.sidebar-hero-card .hbc-stats-grid { gap: 8px; }
.sidebar-hero-card .hbc-stat-val { height: 22px; }
.sidebar-hero-card .hbc-stat-val.hbc-level-val strong { font-size: 15px; }
.sidebar-hero-card .hero-business-pass { display: none; }

.dashboard-action-panel .hero-business-card { max-width: none; }

@media(max-width: 1023px) {
  .dashboard-world > div { grid-template-rows: auto minmax(0, 1fr); }
  .dashboard-world .dashboard-story { padding-top: 52px; }
  .hero-business-card { max-width: none; }
}

@media(max-height: 650px) and (max-width: 1023px) {
  .dashboard-world { overflow-y: auto; }
  .dashboard-world > div { height: auto; min-height: 100%; grid-template-rows: auto minmax(460px, 1fr); }
}

/* Slim Variant */
.hero-business-card.hero-business-card-slim {
  padding: 12px;
  gap: 8px;
  background: transparent;
  border: none;
  box-shadow: none;
}
.hero-business-card.hero-business-card-slim .hero-business-avatar {
  width: 44px;
  height: 44px;
}
.hero-business-card.hero-business-card-slim .hbc-cell-class-icon .hbc-main-rank-icon {
  width: 44px;
  height: 44px;
}
.hero-business-card.hero-business-card-slim .hbc-cell-name h1 {
  font-size: 17px;
}
.hero-business-card.hero-business-card-slim .hbc-stats-grid {
  gap: 10px;
  width: 100%;
  justify-content: flex-start;
}
.hero-business-card.hero-business-card-slim .hbc-stat-val {
  height: 24px;
}
.hero-business-card.hero-business-card-slim .hbc-stat-val.hbc-level-val strong {
  font-size: 17px;
}
.level-up-dialog { width: min(580px, calc(100% - 32px)); }
.level-up-celebration { position: relative; overflow: hidden; padding-top: 32px; padding-bottom: 32px; }
.level-up-celebration::before { content: ''; position: absolute; left: 50%; top: 0; width: 190px; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, #dfbc78, transparent); }
.level-up-eyebrow { display: flex; justify-content: center; align-items: center; gap: 10px; color: #dfbc78; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 12px; }
.level-up-eyebrow svg:last-child { transform: scaleX(-1); }
.level-up-crest { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 154px; height: 154px; margin: 24px auto 20px; border-radius: 50%; border: 2px solid #dfbc78; box-shadow: 0 0 0 7px #dfbc781a, 0 0 0 8px #dfbc7850, inset 0 0 25px #dfbc781a, 0 14px 32px #0004; background: radial-gradient(circle at 50% 35%, #493c29, #14252d 70%); color: #f5dcaa; }
.level-up-crest::before, .level-up-crest::after { content: '✦'; position: absolute; color: #dfbc78; font-size: 18px; line-height: 1; top: 50%; transform: translateY(-50%); }
.level-up-crest::before { left: -27px; }
.level-up-crest::after { right: -27px; }
.level-up-crest-sparkle { position: absolute; left: 50%; top: -17px; transform: translateX(-50%); color: #dfbc78; background: #12242c; border-radius: 50%; padding: 3px; box-sizing: content-box; }
.level-up-crest-caption { font: 700 10px/1.4 sans-serif; letter-spacing: .22em; text-transform: uppercase; }
.level-up-crest strong { font: 500 76px/.98 Georgia, serif; }
.level-up-crest[data-digits="2"] strong { font-size: 64px; letter-spacing: -.06em; padding-right: .06em; }
.level-up-crest[data-digits="3"] strong { font-size: 48px; letter-spacing: -.07em; padding-right: .07em; }
.level-up-dialog[open] .level-up-crest { animation: level-up-crest-enter .45s ease-out both; }
@keyframes level-up-crest-enter { from { opacity: .4; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
.level-up-message { max-width: 455px; margin: 0 auto; }
:root.light .level-up-eyebrow,
:root.light .level-up-crest::before,
:root.light .level-up-crest::after { color: #92641e; }
:root.light .level-up-crest { border-color: #a87529; background: radial-gradient(circle at 50% 32%, #fffdf7, #ead9af); box-shadow: 0 0 0 7px #a875291c, 0 0 0 8px #a8752955, inset 0 0 25px #fff9, 0 12px 28px #493e2026; color: #674a1d; }
:root.light .level-up-crest-sparkle { color: #92641e; background: #f9f4e7; }
@media (max-width: 480px) { .level-up-celebration { padding-top: 26px; padding-bottom: 28px; } .level-up-crest { width: 132px; height: 132px; margin: 22px auto; } .level-up-crest strong { font-size: 66px; } }
@media (max-width: 480px) { .level-up-crest[data-digits="2"] strong { font-size: 54px; } .level-up-crest[data-digits="3"] strong { font-size: 42px; } }
@media (prefers-reduced-motion: reduce) { .level-up-dialog[open] .level-up-crest { animation: none; } }
.category-milestone-badge { --badge-metal: #ae8864; --badge-light: #e9c49a; display: inline-grid; place-items: center; width: 76px; height: 82px; position: relative; flex: none; isolation: isolate; }
.category-milestone-badge::before { content: ''; position: absolute; inset: 3px 4px 9px; border-radius: 50%; background: radial-gradient(circle at 35% 22%, var(--badge-light), var(--badge-metal) 58%, #252033 75%); box-shadow: 0 2px 9px #0008, inset 0 0 0 2px #fff5; }
.category-milestone-badge__core { position: absolute; inset: 9px 10px 15px; border-radius: 50%; overflow: hidden; background: #142827; box-shadow: inset 0 0 0 2px #0008; }
.category-milestone-badge__core img { position: absolute; width: 156%; height: 156%; max-width: none; left: 50%; top: 50%; transform: translate(-50%, -50%); object-fit: contain; }
.category-milestone-badge__level { position: absolute; bottom: 1px; min-width: 31px; padding: 1px 5px; border: 1px solid var(--badge-light); border-radius: 10px; background: #181b2b; color: #fff7e8; font: 700 11px/1.35 sans-serif; text-align: center; z-index: 1; }
.category-milestone-badge--5 { --badge-metal: #ad7148; --badge-light: #f0b987; }
.category-milestone-badge--10 { --badge-metal: #9bb2bc; --badge-light: #edf6f8; }
.category-milestone-badge--30 { --badge-metal: #c99b41; --badge-light: #fff0ad; }
.category-milestone-badge--50 { --badge-metal: #7467aa; --badge-light: #cfbeff; }
.category-milestone-badge--70 { --badge-metal: #509bb1; --badge-light: #b9f1f4; }
.category-milestone-badge--100 { --badge-metal: #d8a841; --badge-light: #fff3ba; filter: drop-shadow(0 0 5px #f4d770a8); }
.category-milestone-badge--30::after, .category-milestone-badge--50::after, .category-milestone-badge--70::after, .category-milestone-badge--100::after { content: '✦'; position: absolute; top: -6px; z-index: 1; color: var(--badge-light); font-size: 16px; text-shadow: 0 1px 4px #000; }
.category-milestone-badge--70::after { content: '✦ ✦ ✦'; font-size: 11px; }
.category-milestone-badge--100::after { content: '✦ ✧ ✦'; font-size: 14px; }
@media (prefers-reduced-motion: no-preference) { .category-milestone-badge--100::before { animation: milestone-glow 3s ease-in-out infinite alternate; } }
@keyframes milestone-glow { from { box-shadow: 0 0 7px #f4d77066; } to { box-shadow: 0 0 18px #f4d770bb; } }
.heroic-approval-dialog { width: min(640px, calc(100% - 32px)); }
.heroic-approval-check { color: var(--stat-emerald, #83d5b0); }
.heroic-approval-intro { color: #c8c3d0; line-height: 1.55; }
.heroic-approval-summary { text-align: center; }
.heroic-approval-summary h3 { color: #f2e9d9; font: 500 22px/1.3 Georgia, serif; }
.heroic-approval-summary p { color: #b5add1; font-size: 13px; margin-top: 5px; }
.heroic-approval-stats { margin-top: 20px; padding: 10px 4px; }
.heroic-approval-stat { padding: 12px 8px; gap: 5px; }
.heroic-approval-stat .dashboard-stat-icon { width: 38px; height: 38px; }
.heroic-approval-stat:first-child .dashboard-stat-icon { width: 60px; height: 60px; margin-top: -11px; margin-bottom: -6px; }
.heroic-approval-category { color: #f2e9d9; font: 500 17px/1.25 Georgia, serif; overflow-wrap: anywhere; }
.heroic-approval-detail { color: #aaa5ba; font-size: 11px; }
.heroic-approval-milestones { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e8c77944; }
.heroic-approval-milestones h3 { color: #f0d996; font: 600 18px Georgia, serif; text-align: center; }
.heroic-approval-milestone-list { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 12px; }
.heroic-approval-milestone { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #e8c77955; border-radius: 12px; background: #221e2b; }
.heroic-approval-milestone div { display: grid; gap: 3px; }
.heroic-approval-milestone small { color: #b6adbf; }
.heroic-approval-milestone strong { color: #fff1d0; font-size: 14px; }
:root.light .heroic-approval-milestone { background: #fff9e9; }
:root.light .heroic-approval-milestone strong { color: #263747; }
:root.light .heroic-approval-intro,
:root.light .heroic-approval-summary p,
:root.light .heroic-approval-detail { color: #536477; }
:root.light .heroic-approval-summary h3,
:root.light .heroic-approval-category { color: #263747; }
@media (max-width: 640px) {
  .heroic-approval-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .heroic-approval-stats .dashboard-stat:not(:first-child):before { left: 0 !important; right: auto !important; top: 14px !important; bottom: 14px !important; width: 1px !important; height: auto !important; }
  .heroic-approval-stat .dashboard-stat-icon { width: 30px; height: 30px; }
  .heroic-approval-stat:first-child .dashboard-stat-icon { width: 46px; height: 46px; margin-top: -8px; margin-bottom: -3px; }
  .heroic-approval-stat .dashboard-stat-value { font-size: 22px; }
  .heroic-approval-category { font-size: 14px; }
  .heroic-approval-stat .dashboard-stat-label { font-size: 13px; }
}
.system-error-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px;
  background: #07131c;
}

.system-error-page {
  width: min(100%, 740px);
  margin: auto;
}

.system-error-details {
  position: relative;
  z-index: 1;
  margin: 28px 0 0;
  padding: 14px 16px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  text-align: left;
  border: 1px solid #bda16b80;
  border-radius: 8px;
  background: #07131c;
  color: #e7ba9a;
  font-size: 12px;
  line-height: 1.5;
}

:root.light .system-error-shell {
  background: #f5f1e7;
}

:root.light .system-error-details {
  background: #fffaf0;
  color: #73442c;
}

@media (max-width: 540px) {
  .system-error-shell {
    padding: 16px;
  }

  .system-error-page {
    padding: 32px 24px;
  }
}
/* Shared neutral card rhythm; decorated GoldBanners and state highlights retain their borders. */
:root { --card-border: #344857; --card-gap: 16px; }
:root.light { --card-border: #c6b68e; }
:root :is(.world-panel, .guild-card, .pro-card, .landing-role-card, .landing-community-card,
.landing-class-stage, .landing-class-perk, .category-showcase-detail, .class-guide-card,
.rank-guide-card, .guild-profile-card:not(.is-leader), .profile-category-card:not(.profile-category-card--bonus)) {
  border-color: var(--card-border);
}
:root.light :is(.world-panel, .guild-card, .pro-card, .landing-role-card, .landing-community-card,
.landing-class-stage, .landing-class-perk, .category-showcase-detail, .class-guide-card,
.rank-guide-card, .guild-profile-card:not(.is-leader), .profile-category-card:not(.profile-category-card--bonus)) {
  border-color: var(--card-border) !important;
}
:root :is(.landing-roles-section, .landing-community-grid, .landing-class-perks,
.profile-categories, .world-grid, .classes-grid, .rank-guide-grid, .guild-profile-grid,
.dashboard-categories-section > .grid) { gap: var(--card-gap); }
.profile-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.profile-category-bonus { overflow-wrap: anywhere; }