/*! 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-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: "";
      --tw-outline-style: solid;
    }
  }
}

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

  .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-x-4 {
    inset-inline: calc(var(--spacing) * 4);
  }

  .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\.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-full {
    top: 100%;
  }

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

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

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

  .left-0 {
    left: 0;
  }

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

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

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

  .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-\[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-6 {
    margin: calc(var(--spacing) * -6);
  }

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

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

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

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

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

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

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

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

  .h-0 {
    height: 0;
  }

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

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

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

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

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

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

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

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

  .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-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-2rem\)\] {
    max-height: calc(100dvh - 2rem);
  }

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

  .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-\[60vh\] {
    min-height: 60vh;
  }

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

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

  .w-0 {
    width: 0;
  }

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

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

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

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

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

  .w-1\/6 {
    width: 16.6667%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .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-\[120px\] {
    min-width: 120px;
  }

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

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

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

  .flex-1 {
    flex: 1;
  }

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

  .grow {
    flex-grow: 1;
  }

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

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

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

  .translate-x-0 {
    --tw-translate-x: 0px;
    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-45 {
    rotate: 45deg;
  }

  .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-row {
    flex-direction: row;
  }

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

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

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

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

  .overflow-hidden {
    overflow: hidden;
  }

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

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

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

  .\!rounded-md {
    border-radius: var(--radius-md) !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-r-\[5px\] {
    border-right-style: var(--tw-border-style);
    border-right-width: 5px;
  }

  .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-b-\[6px\] {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 6px;
  }

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

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

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

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

  .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\]\/20 {
    border-color: oklab(78.9386% .011068 .0992453 / .2);
  }

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

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

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

  .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\/20 {
    border-color: var(--color-amber-400);
  }

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

  .border-amber-400\/30 {
    border-color: 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\/30 {
    border-color: #dd74004d;
  }

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

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

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

  .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\/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\/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-indigo-800\/60 {
    border-color: #372aac99;
  }

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

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

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

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

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

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

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

  .border-b-zinc-100 {
    border-bottom-color: var(--color-zinc-100);
  }

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

  .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\] {
    background-color: #0c1c27;
  }

  .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-\[\#241c10\]\/90 {
    background-color: oklab(23.2315% .00546405 .0240426 / .9);
  }

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

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

  .bg-\[\#07131d\]\/85 {
    background-color: oklab(18.0933% -.0116667 -.0245815 / .85);
  }

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

  .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\]\/5 {
    background-color: oklab(78.9386% .011068 .0992453 / .05);
  }

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

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

  .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-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\/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-600 {
    background-color: var(--color-amber-600);
  }

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

  .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\/50 {
    background-color: #00000080;
  }

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

  .bg-black\/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\/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\/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\/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\/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-100 {
    background-color: var(--color-emerald-100);
  }

  .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\/60 {
    background-color: #004e3b99;
  }

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

  .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 {
    background-color: var(--color-indigo-500);
  }

  .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\/60 {
    background-color: var(--color-indigo-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-indigo-950\/60 {
      background-color: color-mix(in oklab, var(--color-indigo-950) 60%, 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-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\/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-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-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\/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-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\/30 {
    background-color: var(--color-sky-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-sky-950\/30 {
      background-color: color-mix(in oklab, var(--color-sky-950) 30%, 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-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-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-500\/15 {
    background-color: var(--color-violet-500);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-violet-500\/15 {
      background-color: color-mix(in oklab, var(--color-violet-500) 15%, 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\/70 {
    background-color: #ffffffb3;
  }

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

  .bg-white\/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-yellow-200 {
    background-color: var(--color-yellow-200);
  }

  .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-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\/70 {
    background-color: var(--color-zinc-800);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-zinc-800\/70 {
      background-color: color-mix(in oklab, var(--color-zinc-800) 70%, 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\/30 {
    background-color: var(--color-zinc-900);
  }

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

  .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\%_0\%\,rgba\(214\,167\,86\,0\.08\)\,transparent_50\%\)\] {
    background-image: radial-gradient(circle at 50% 0, #d6a75614, #0000 50%);
  }

  .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\%_15\%\,rgba\(124\,58\,237\,0\.14\)\,transparent_42\%\)\] {
    background-image: radial-gradient(circle at 85% 15%, #7c3aed24, #0000 42%);
  }

  .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-\[\#0c1c27\] {
    --tw-gradient-from: #0c1c27;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#131f2b\] {
    --tw-gradient-from: #131f2b;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#10212c\] {
    --tw-gradient-from: #10212c;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#d9b56d\]\/45 {
    --tw-gradient-from: oklab(78.9386% .011068 .0992453 / .45);
    --tw-gradient-stops: var(--tw-gradient-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-400\/30 {
    --tw-gradient-from: var(--color-amber-400);
  }

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

  .from-amber-400\/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-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\/30 {
    --tw-gradient-from: var(--color-amber-950);
  }

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

  .from-amber-950\/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\/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-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\/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\/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\/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\/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\/30 {
    --tw-gradient-via: #0206184d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-slate-950\/30 {
      --tw-gradient-via: color-mix(in oklab, var(--color-slate-950) 30%, transparent);
    }
  }

  .via-slate-950\/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-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\/20 {
    --tw-gradient-via: var(--color-zinc-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .via-zinc-950\/20 {
      --tw-gradient-via: color-mix(in oklab, var(--color-zinc-950) 20%, transparent);
    }
  }

  .via-zinc-950\/20 {
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }

  .via-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-\[\#07111a\] {
    --tw-gradient-to: #07111a;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#07131d\] {
    --tw-gradient-to: #07131d;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#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-400 {
    --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));
  }

  .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\/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\/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\.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-20 {
    padding-block: calc(var(--spacing) * 20);
  }

  .py-24 {
    padding-block: calc(var(--spacing) * 24);
  }

  .py-28 {
    padding-block: calc(var(--spacing) * 28);
  }

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

  .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-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-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-2 {
    padding-left: calc(var(--spacing) * 2);
  }

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

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

  .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-\[\#9d8253\] {
    color: #9d8253;
  }

  .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-\[\#c6bfcd\] {
    color: #c6bfcd;
  }

  .text-\[\#c9c2db\] {
    color: #c9c2db;
  }

  .text-\[\#c9c2db\]\/90 {
    color: oklab(82.7501% .0168275 -.0310982 / .9);
  }

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

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

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

  .text-\[\#d9b56d\]\/60 {
    color: oklab(78.9386% .011068 .0992453 / .6);
  }

  .text-\[\#d9b56d\]\/70 {
    color: oklab(78.9386% .011068 .0992453 / .7);
  }

  .text-\[\#dedbe6\] {
    color: #dedbe6;
  }

  .text-\[\#e8e1d2\] {
    color: #e8e1d2;
  }

  .text-\[\#e9d5ab\] {
    color: #e9d5ab;
  }

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

  .text-\[\#eed8ab\]\/90 {
    color: oklab(88.9292% .00562331 .0633508 / .9);
  }

  .text-\[\#eee9df\] {
    color: #eee9df;
  }

  .text-\[\#f0ede6\] {
    color: #f0ede6;
  }

  .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\/50 {
    color: #fee68580;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-amber-200\/50 {
      color: color-mix(in oklab, var(--color-amber-200) 50%, 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-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\/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-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-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-violet-400 {
    accent-color: var(--color-violet-400);
  }

  .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\(16\,185\,129\,0\.2\)\] {
    --tw-shadow: 0 0 15px var(--tw-shadow-color, #10b98133);
    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\(16\,185\,129\,0\.15\)\] {
    --tw-shadow: 0 0 15px var(--tw-shadow-color, #10b98126);
    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\(56\,189\,248\,0\.15\)\] {
    --tw-shadow: 0 0 15px var(--tw-shadow-color, #38bdf826);
    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\.2\)\] {
    --tw-shadow: 0 0 15px var(--tw-shadow-color, #a855f733);
    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\(168\,85\,247\,0\.15\)\] {
    --tw-shadow: 0 0 15px var(--tw-shadow-color, #a855f726);
    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_40px_rgba\(0\,0\,0\,0\.85\)\,0_0_25px_rgba\(217\,181\,109\,0\.2\)\] {
    --tw-shadow: 0 12px 40px var(--tw-shadow-color, #000000d9), 0 0 25px 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_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-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\/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\/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\/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-amber-950\/60 {
    --tw-shadow-color: var(--color-amber-950);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-amber-950\/60 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-amber-950) 60%, transparent) 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\/40 {
    --tw-shadow-color: #0006;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-black\/40 {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 40%, 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\/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\/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\/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\/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\/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\/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\/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\/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\/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\/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\/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\/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-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);
  }

  .drop-shadow {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, #0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000f));
    --tw-drop-shadow: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);
    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\(52\,211\,153\,0\.4\)\] {
    --tw-drop-shadow-size: drop-shadow(0 0 8px var(--tw-drop-shadow-color, #34d39966));
    --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, );
  }

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

  .group-focus-within\:block:is(:where(.group):focus-within *) {
    display: block;
  }

  @media (hover: hover) {
    .group-hover\:block:is(:where(.group):hover *) {
      display: block;
    }

    .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-x-1:is(:where(.group):hover *) {
      --tw-translate-x: var(--spacing);
      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-\[\#d9b56d\]\/70:is(:where(.group):hover *) {
      border-color: oklab(78.9386% .011068 .0992453 / .7);
    }

    .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-400\/50:is(:where(.group):hover *) {
      border-color: var(--color-emerald-400);
    }

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

    .group-hover\:border-emerald-500:is(:where(.group):hover *) {
      border-color: var(--color-emerald-500);
    }

    .group-hover\:border-purple-300\/50:is(:where(.group):hover *) {
      border-color: #d9b3ff80;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:border-purple-300\/50:is(:where(.group):hover *) {
        border-color: color-mix(in oklab, var(--color-purple-300) 50%, transparent);
      }
    }

    .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-sky-400\/50:is(:where(.group):hover *) {
      border-color: var(--color-sky-400);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\:border-sky-400\/50:is(:where(.group):hover *) {
        border-color: color-mix(in oklab, var(--color-sky-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-\[\#d9b56d\]\/20:is(:where(.group):hover *) {
      background-color: oklab(78.9386% .011068 .0992453 / .2);
    }

    .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\]:is(:where(.group):hover *) {
      color: #d9b56d;
    }

    .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-\[\#f7e2a9\]:is(:where(.group):hover *) {
      color: #f7e2a9;
    }

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

  @media (hover: hover) {
    .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\:scale-\[1\.02\]:hover {
      scale: 1.02;
    }

    .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-emerald-600:hover {
      border-color: var(--color-emerald-600);
    }

    .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\/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-400:hover {
      background-color: var(--color-emerald-400);
    }

    .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:hover {
      background-color: var(--color-emerald-900);
    }

    .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-300:hover {
      --tw-gradient-to: var(--color-amber-300);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }

    .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-\[\#f7e2a9\]:hover {
      color: #f7e2a9;
    }

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

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

    .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-col {
      flex-direction: column;
    }

    .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\:items-start {
      align-items: flex-start;
    }

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

    .sm\:gap-7 {
      gap: calc(var(--spacing) * 7);
    }

    :where(.sm\: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(.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\:border-t-0 {
      border-top-style: var(--tw-border-style);
      border-top-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-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-right {
      text-align: right;
    }

    .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\:absolute {
      position: absolute;
    }

    .md\:static {
      position: static;
    }

    .md\:inset-x-auto {
      inset-inline: auto;
    }

    .md\:right-0 {
      right: 0;
    }

    .md\:bottom-full {
      bottom: 100%;
    }

    .md\:left-0 {
      left: 0;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .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-col {
      flex-direction: column;
    }

    .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\: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-center {
      text-align: center;
    }

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

    .lg\:flex {
      display: flex;
    }

    .lg\:hidden {
      display: none;
    }

    .lg\:inline {
      display: inline;
    }

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

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

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

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

    .xl\:flex {
      display: flex;
    }

    .xl\:hidden {
      display: none;
    }

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

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

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

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

    .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\)_160px\] {
      grid-template-columns: minmax(0, 1fr) 160px;
    }

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

    .xl\:p-7 {
      padding: calc(var(--spacing) * 7);
    }

    .xl\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:grid-cols-\[minmax\(0\,1fr\)_180px\] {
      grid-template-columns: minmax(0, 1fr) 180px;
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:border-amber-500, .dark\:border-amber-500\/30 {
      border-color: var(--color-amber-500);
    }

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

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

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

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

    .dark\:border-amber-600\/50 {
      border-color: #dd740080;
    }

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

    .dark\:border-amber-600\/70 {
      border-color: #dd7400b3;
    }

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

    .dark\:border-amber-800\/80 {
      border-color: #953d00cc;
    }

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

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

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

    .dark\:border-cyan-700\/40 {
      border-color: #00749266;
    }

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

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

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

    .dark\:border-purple-700\/60 {
      border-color: #8200da99;
    }

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

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

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

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

    .dark\:border-sky-700\/60 {
      border-color: #0069a499;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .dark\:bg-black\/40 {
      background-color: #0006;
    }

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

    .dark\:bg-blue-950\/60 {
      background-color: #16245699;
    }

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

    .dark\:bg-cyan-950\/60 {
      background-color: #05334599;
    }

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

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

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

    .dark\:bg-purple-950\/60 {
      background-color: #3c036699;
    }

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

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

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

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

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

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

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

    .dark\:bg-yellow-950\/80 {
      background-color: #432004cc;
    }

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

    .dark\:bg-zinc-800, .dark\:bg-zinc-800\/80 {
      background-color: var(--color-zinc-800);
    }

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

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

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

    .dark\:bg-zinc-900\/60 {
      background-color: var(--color-zinc-900);
    }

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

    .dark\:bg-zinc-900\/70 {
      background-color: var(--color-zinc-900);
    }

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

    .dark\:bg-zinc-900\/80 {
      background-color: var(--color-zinc-900);
    }

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

    .dark\:bg-zinc-900\/90 {
      background-color: var(--color-zinc-900);
    }

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

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

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

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

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

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

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

    .dark\:bg-zinc-950\/95 {
      background-color: var(--color-zinc-950);
    }

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

    .dark\:text-amber-200 {
      color: var(--color-amber-200);
    }

    .dark\:text-amber-200\/80 {
      color: #fee685cc;
    }

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

    .dark\:text-amber-300 {
      color: var(--color-amber-300);
    }

    .dark\:text-amber-300\/80 {
      color: #ffd236cc;
    }

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

    .dark\:text-amber-400 {
      color: var(--color-amber-400);
    }

    .dark\:text-blue-300 {
      color: var(--color-blue-300);
    }

    .dark\:text-cyan-200 {
      color: var(--color-cyan-200);
    }

    .dark\:text-cyan-300 {
      color: var(--color-cyan-300);
    }

    .dark\:text-cyan-400 {
      color: var(--color-cyan-400);
    }

    .dark\:text-emerald-300 {
      color: var(--color-emerald-300);
    }

    .dark\:text-emerald-400 {
      color: var(--color-emerald-400);
    }

    .dark\:text-purple-300 {
      color: var(--color-purple-300);
    }

    .dark\:text-purple-400 {
      color: var(--color-purple-400);
    }

    .dark\:text-rose-300 {
      color: var(--color-rose-300);
    }

    .dark\:text-rose-400 {
      color: var(--color-rose-400);
    }

    .dark\:text-sky-300 {
      color: var(--color-sky-300);
    }

    .dark\:text-sky-400 {
      color: var(--color-sky-400);
    }

    .dark\:text-yellow-200 {
      color: var(--color-yellow-200);
    }

    .dark\:text-zinc-100 {
      color: var(--color-zinc-100);
    }

    .dark\:text-zinc-200 {
      color: var(--color-zinc-200);
    }

    .dark\:text-zinc-300 {
      color: var(--color-zinc-300);
    }

    .dark\:text-zinc-400 {
      color: var(--color-zinc-400);
    }

    .dark\:text-zinc-500 {
      color: var(--color-zinc-500);
    }

    .dark\:text-zinc-600 {
      color: var(--color-zinc-600);
    }

    .dark\:placeholder-zinc-500::placeholder {
      color: var(--color-zinc-500);
    }

    .dark\:placeholder-zinc-600::placeholder {
      color: var(--color-zinc-600);
    }

    .dark\:ring-amber-500\/70 {
      --tw-ring-color: var(--color-amber-500);
    }

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

    .dark\:ring-amber-500\/80 {
      --tw-ring-color: var(--color-amber-500);
    }

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

    @media (hover: hover) {
      .dark\:hover\:border-amber-600\/40:hover {
        border-color: #dd740066;
      }

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

      .dark\:hover\:border-zinc-700:hover {
        border-color: var(--color-zinc-700);
      }

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

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

      .dark\:hover\:bg-zinc-700:hover {
        background-color: var(--color-zinc-700);
      }

      .dark\:hover\:bg-zinc-800:hover {
        background-color: var(--color-zinc-800);
      }

      .dark\:hover\:bg-zinc-900:hover, .dark\:hover\:bg-zinc-900\/80:hover {
        background-color: var(--color-zinc-900);
      }

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

      .dark\:hover\:text-amber-200:hover {
        color: var(--color-amber-200);
      }

      .dark\:hover\:text-amber-300:hover {
        color: var(--color-amber-300);
      }

      .dark\:hover\:text-rose-400: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);
  }

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

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

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@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); }
/* Keep directory cards at the artwork's native portrait ratio at every width. */
.guild-directory-card.guild-directory-card--renown {
  aspect-ratio: 1122 / 1402;
  width: min(100%, 320px);
  min-height: 0;
  min-width: 0;
  justify-self: center;
  container-type: inline-size;
  box-shadow: none !important;
  transition: transform .2s ease;
}

.guild-directory-card.guild-directory-card--renown > .guild-card-inner {
  position: absolute;
  inset: 0;
  width: 100%;
  min-width: 0;
  gap: 12px;
  padding: 12% 10% 10%;
  overflow: hidden;
}

.guild-directory-card--renown > .guild-directory-surface {
  position: absolute;
  inset: 6%;
  z-index: 0;
  border-radius: 14px;
  background: #19242d;
  pointer-events: none;
}

:root.light .guild-directory-card--renown .guild-directory-surface {
  background: #e2dbcc;
}

.guild-directory-card--renown .guild-directory-content,
.guild-directory-card--renown .guild-directory-actions {
  position: relative;
  z-index: 1;
}

.guild-directory-card--renown .guild-directory-content {
  display: grid;
  gap: 18px;
  width: 100%;
  min-width: 0;
}

.guild-directory-card.guild-directory-card--renown > .guild-card-inner.guild-card-inner--member {
  justify-content: center;
}

.guild-directory-card.guild-directory-card--renown .guild-directory-heading,
.guild-directory-card.guild-directory-card--renown .guild-directory-identity {
  width: 100%;
  justify-content: center;
}

.guild-directory-card.guild-directory-card--renown .guild-directory-identity {
  flex-direction: column;
  flex: none;
  gap: 8px;
  text-align: center;
}

.guild-directory-card--renown .guild-directory-name {
  min-width: 0;
  max-width: 100%;
}

.guild-directory-card--renown .guild-membership-mark {
  justify-content: center;
  margin-top: 3px;
}

.guild-directory-card.guild-directory-card--renown .guild-directory-emblem {
  width: 88px;
  height: 102px;
  padding: 10px 10px 20px;
}

.guild-directory-card--renown .guild-directory-emblem svg {
  width: 46px;
  height: 46px;
}

.guild-directory-card--renown .guild-directory-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.guild-directory-card--renown .guild-directory-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  min-height: 40px;
  padding: 6px 8px;
  border: 1px solid rgba(217, 187, 126, .22);
  border-radius: 9px;
  background: rgba(8, 16, 23, .5);
  color: #f3e9d5;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.guild-directory-card--renown .guild-directory-stat svg {
  width: 19px;
  height: 19px;
  flex: none;
  color: #e0ad48;
}

.guild-directory-card--renown .guild-directory-stat:last-child svg {
  color: #5ab9df;
}

.guild-directory-card--renown .guild-directory-stat span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:root.light .guild-directory-card--renown .guild-directory-stat {
  border-color: rgba(126, 94, 45, .22);
  background: rgba(255, 253, 247, .7);
  color: #41311d;
}

.guild-directory-card--renown .guild-directory-actions {
  padding-top: 0;
}

.guild-directory-card.guild-directory-card--renown .guild-directory-heading {
  padding: 0;
}

.guild-directory-card.guild-directory-card--renown .guild-directory-emblem {
  box-shadow: none;
  animation: none;
}

.guild-directory-card.guild-directory-card--renown .guild-emblem-stage-4 {
  background: linear-gradient(140deg, #344a52, #172b36);
  color: #c7dce3;
}

:root.light .guild-directory-card.guild-directory-card--renown .guild-emblem-stage-4 {
  background: #e4e8e4;
  color: #47616a;
}

.guild-deco-overlay.guild-deco-renown .guild-deco-frame {
  object-fit: fill;
}

/* Admin cards have more content than directory cards; keep it inside the frame opening. */
.world-panel.admin-guild-card {
  padding: 10% 9% 12%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  container-type: inline-size;
}

.admin-guild-card-stats > div {
  min-width: 0;
}

.admin-guild-card-stats > div > span {
  overflow-wrap: anywhere;
}

@container (max-width: 260px) {
  .admin-guild-card-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.admin-guild-card > .guild-deco-overlay {
  z-index: 5;
}

.admin-guild-card > .admin-guild-card-body,
.admin-guild-card > .admin-guild-card-actions {
  position: relative;
  z-index: 10;
  min-width: 0;
}

:root.light .world-panel.admin-guild-card {
  border: 0;
  box-shadow: none !important;
}

@media (max-width: 767px) {
  .guild-directory-card.guild-directory-card--renown {
    width: min(100%, 280px);
    justify-self: center;
  }

  .guild-directory-card.guild-directory-card--renown > .guild-card-inner {
    padding: 12% 10% 10%;
  }

  .guild-directory-card.guild-directory-card--renown h3 {
    font-size: 20px;
    line-height: 1.2;
  }

  .guild-directory-card.guild-directory-card--renown .guild-directory-emblem {
    width: 76px;
    height: 88px;
    padding: 9px 9px 17px;
  }

  .guild-directory-card--renown .guild-directory-content {
    gap: 12px;
  }

  .guild-directory-card--renown .guild-directory-stat {
    min-height: 36px;
    font-size: 13px;
  }

  .guild-directory-card.guild-directory-card--renown .guild-directory-actions {
    margin-bottom: 0;
  }
}

@container (max-width: 285px) {
  .guild-directory-card.guild-directory-card--renown > .guild-card-inner {
    gap: 8px;
    padding: 12% 10% 10%;
  }

  .guild-directory-card--renown .guild-directory-content {
    gap: 8px;
  }

  .guild-directory-card.guild-directory-card--renown .guild-directory-identity {
    gap: 4px;
  }

  .guild-directory-card.guild-directory-card--renown .guild-directory-emblem {
    width: 64px;
    height: 70px;
    padding: 7px 7px 14px;
  }

  .guild-directory-card--renown .guild-directory-emblem svg {
    width: 34px;
    height: 34px;
  }

  .guild-directory-card.guild-directory-card--renown h3 {
    font-size: 19px;
    line-height: 1.15;
  }

  .guild-directory-card--renown .guild-directory-stat-grid {
    gap: 6px;
  }

  .guild-directory-card--renown .guild-directory-stat {
    min-height: 32px;
    gap: 5px;
    padding: 4px 5px;
    font-size: 13px;
  }

  .guild-directory-card--renown .guild-directory-stat svg {
    width: 16px;
    height: 16px;
  }

  .guild-directory-card.guild-directory-card--renown .guild-directory-actions .world-button {
    min-height: 36px;
    padding: 6px 8px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guild-directory-card.guild-directory-card--renown {
    transition: none;
  }
}
.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; } }
.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: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: #102536;
  border: 2px solid var(--marker-color);
  color: var(--marker-color);
  border-radius: 8px;
  transform: rotate(45deg);
  box-shadow: 0 2px 12px #0009
}

.world-map-marker span {
  transform: rotate(-45deg);
  font-size: 20px
}

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

.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: calc(100dvh - 64px);
  margin: -16px;
  background: #061018;
}

.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: -24px;
  }
}

@media(min-width:1024px) {
  .world-chat-full {
    margin: -40px;
  }
}

.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: 75px 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-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-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
}

.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>div:first-child>div:last-child {
  border-radius: 99px
}

.world-karma>div:last-child {
  background: linear-gradient(110deg, #17293680, #071119);
  border-color: #53616d
}

.world-karma>div:last-child>div:first-child {
  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 {
    overflow: hidden;
  }

  .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: 64px;
    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-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 .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-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;
  border: 1px solid #bda16b55;
  background: #d9b56d12;
  color: #e4bd6a;
}

.dashboard-quick-action-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
}

.dashboard-quick-action-arrow {
  width: 32px;
  height: 32px;
  margin-left: auto;
  border-color: #526473;
  border-radius: 50%;
  background: #ffffff08;
  color: #b7c2cc;
  transition: transform .18s ease, color .18s ease, border-color .18s ease;
}

.dashboard-quick-action:hover .dashboard-quick-action-arrow {
  transform: translateX(2px);
  border-color: #bda16b;
  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;
  border-color: #526473;
  background: #ffffff09;
}

@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: 24px;
  padding: 26px;
  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(26px, 2.7vw, 36px)/1.2 Georgia, serif;
  letter-spacing: normal;
  color: #ecd6a7
}

.notifications-heading h1 svg {
  color: #dfbd78;
  width: 30px;
  height: 30px
}

.notifications-heading p {
  color: #b9b2ca;
  line-height: 1.6;
  margin-top: 10px
}

.notifications-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px
}

.notifications-actions>div {
  flex-wrap: wrap
}

.notifications-actions .world-button {
  font-size: 14px
}

.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: 12px
}

.notification-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px;
  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: 48px;
  height: 48px;
  border: 1px solid #b99b6050;
  border-radius: 50%;
  background: #07131c;
  box-shadow: 0 0 20px #d9b56d09
}

.notification-emblem svg {
  width: 24px;
  height: 24px
}

.notification-copy h3 {
  font: 500 21px/1.3 Georgia, serif;
  color: #e8dcc2
}

.notification-card.is-unread h3 {
  color: #f0d398
}

.notification-message {
  font-size: 14px;
  line-height: 1.7;
  color: #b9b5c9;
  margin-top: 7px;
  white-space: pre-wrap;
  overflow-wrap: anywhere
}

.notification-copy>span {
  font-size: 11px;
  color: #8793a5;
  margin-top: 12px
}

.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: 20px
  }

  .notification-card {
    padding: 16px;
    gap: 12px
  }

  .notification-emblem {
    width: 38px;
    height: 38px
  }

  .notification-emblem svg {
    width: 20px;
    height: 20px
  }

  .notification-copy h3 {
    font-size: 19px
  }

  .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 {
  display: block;
  width: calc(100% - 16px);
  margin: 8px;
  padding: 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  text-align: left;
  transition: background .15s, border-color .15s;
}

.chat-conversation b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  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;
}

.world-chat-frame aside .chat-conversation:hover {
  background: #bfa56b0c;
  border-color: #bd9b6030;
}

.world-chat-frame aside .chat-conversation.is-selected {
  background: linear-gradient(100deg, #bd9b6020, #bd9b6005);
  border-color: #bd9b6055;
  box-shadow: inset 3px 0 #d8b565;
}

.chat-conversation.is-selected b {
  color: #ecd5a5;
}

.chat-header {
  padding: 18px 24px;
  border-bottom: 1px solid #bd9b6040;
  background: linear-gradient(110deg, #152832, #091720);
}

.chat-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #dfc17f;
  border: 1px solid #bd9b6070;
  background: #bd9b600b;
}

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

.chat-message {
  width: fit-content;
  max-width: min(80%, 640px);
  margin-bottom: 20px;
}

.chat-message.is-mine {
  margin-left: auto;
}

.chat-message>p:first-child {
  font-size: 11px;
  color: #a4b1c1;
  margin: 0 6px 6px;
}

.chat-bubble {
  padding: 12px 17px;
  border: 1px solid #8398b138;
  border-radius: 4px 16px 16px;
  background: #142633;
  color: #e1e6ef;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chat-message.is-mine .chat-bubble {
  border-color: #bd9b6065;
  background: linear-gradient(130deg, #343025, #202820);
  border-radius: 16px 4px 16px 16px;
  color: #eee3cd;
}

.chat-message>p:last-child {
  align-items: center;
  margin: 6px;
  font-size: 10px;
  color: #8c9bad;
}

.chat-message.is-mine>p:last-child {
  justify-content: flex-end;
}

.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-header,
  .chat-composer {
    padding: 14px;
  }

  .chat-messages {
    padding: 16px;
  }

  .chat-header b {
    font-size: 18px;
  }

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



.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-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: #d7b76d;
  width: 28px;
  height: 28px;
}

.public-profile-stats strong {
  font: 30px Georgia, serif;
  color: #ebdec0;
}

.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 {
  filter: invert(1) hue-rotate(180deg) brightness(.72) saturate(.55) contrast(1.1);
}

:root.light .world-map-canvas .leaflet-tile-pane {
  filter: none;
}

.world-map-canvas .leaflet-container {
  background: #10202c;
}

:root.light .world-map-canvas .leaflet-container {
  background: #e6e9e4;
}

.world-map-canvas .leaflet-control-attribution {
  background: #0b1924e6;
  color: #aebccd;
}

.world-map-canvas .leaflet-control-attribution a {
  color: #dec48b;
}

@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%;
}

.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-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; }
}
.guild-theme-card {
  min-height: 112px;
  background-image: linear-gradient(90deg, rgba(7, 12, 20, .88), rgba(7, 12, 20, .7)), var(--guild-hall-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}
.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-main-content { 
  display: flex; 
  flex-direction: column; 
  gap: 10px; 
  min-width: 0; 
  width: 100%; 
}

/* 1. Identity Row */
.hbc-identity-row {
  display: flex;
  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; overflow: hidden; }
.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; 
}
.hbc-cell-name .hero-business-karma { 
  display: block; 
  font-size: 12px; 
  font-weight: 500; 
  color: #c4b5fd; 
  margin-top: 1px; 
  letter-spacing: 0.02em; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}
.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;
  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; 
  align-self: center; 
  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 { color: #6366f1; font-weight: 600; }
: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 { 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; 
  }
  .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-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; }
.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;
}
.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;
}

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

:root.light .landing-page .landing-role-card {
  background: linear-gradient(135deg, #fffdf8 0%, #fffaf0 54%, #f3e8d2 100%) !important;
}

:root.light .landing-role-glow {
  background: radial-gradient(ellipse at 88% 12%, rgba(225, 188, 111, .22), transparent 54%),
    radial-gradient(ellipse at 8% 92%, rgba(247, 233, 201, .18), transparent 55%) !important;
}

@media (max-width: 1300px) {
  .landing-hero-emblem {
    width: clamp(130px, 14vw, 180px);
  }
}

@media (max-width: 900px) {
  .landing-hero-emblem {
    display: none;
  }
}

.landing-discover-section { padding: 80px 24px; background: #091722; border-top: 1px solid #344857; }
.landing-discover-inner { max-width: 1160px; margin: 0 auto; }
.landing-discover-section h2 { margin: 10px 0 14px; color: #eed8ab; font: 400 clamp(2rem, 4vw, 3rem)/1.15 Georgia, serif; }
.landing-discover-section p { max-width: 700px; color: #c6c3d0; line-height: 1.65; }
.landing-discover-links { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 30px; }
.landing-discover-links a { display: inline-flex; align-items: center; gap: 8px; color: #eed8ab; font-weight: 600; }
.landing-discover-links a:hover { text-decoration: underline; }
:root.light .landing-discover-section { background: #eee8db; border-color: #cbb993; }
:root.light .landing-discover-section h2 { color: #674a1d; }
:root.light .landing-discover-section p { color: #435367; }
:root.light .landing-discover-links a { color: #674a1d; }

.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-community-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 38px; }
.landing-community-card { padding: 26px; border: 1px solid #405261; border-radius: 16px; background: linear-gradient(145deg, #142a36, #0b1822); }
.landing-community-card > svg { width: 30px; height: 30px; color: #dfbc77; }
.landing-community-card h3 { margin: 18px 0 10px; color: #f2dfbc; font: 500 22px/1.25 Georgia, serif; }
.landing-community-card 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-card { background: #fffdf8; border-color: #cbb993; }
:root.light .landing-community-card > svg { color: #856014; }
:root.light .landing-community-card h3 { color: #674a1d; }
:root.light .landing-community-card 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-community-grid { grid-template-columns: 1fr; } .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);
  }
}
.class-showcase-list {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  margin-top: 26px;
}

.class-showcase {
  position: relative;
  isolation: isolate;
  min-height: 460px;
  overflow: hidden;
  border: 1px solid #bda16b70;
  border-radius: 20px;
  background: #101821;
  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: #f7f4ed;
  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: #fff6e8;
  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: #d0cbd2;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55;
}

.class-showcase-description {
  max-width: 58ch;
  margin-top: 14px;
  color: #ddd7dc;
  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: #17131fe0;
  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: #cbc5cf;
  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: #243544; }
.class-showcase-list.is-light .class-showcase-line { color: #52677a; }
.class-showcase-list.is-light .class-showcase-description { color: #405468; }
:root.light .classes-page .class-showcase h3 { color: #243544; }
:root.light .classes-page .class-showcase-perk h4 { color: #65460c; }
.class-showcase-list.is-light .class-showcase-perk { background: #ffffffdf; 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: #526579; }

@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; }
}
.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; }
.level-statistics { min-width: 0; }
.level-statistics-summary { margin-bottom: 0; }
.level-statistics-summary .dashboard-stat { min-width: 0; }
.level-statistics-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.level-statistics-summary .dashboard-stat-value { font-size: clamp(.86rem, 1.4vw, 1.25rem); overflow-wrap: anywhere; }
.level-statistics-summary .dashboard-stat-label { font-size: .7rem; }
.level-statistics-range, .level-statistics-note { font-size: .8rem; }
.level-statistics-level-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.level-statistics-level-meta strong { font-family: Georgia, serif; font-size: 1.15rem; color: var(--gold, #d9b56d); }
.level-statistics-level-meta span { font-size: .8rem; color: var(--muted, #a3aab5); }
.level-statistics-level-track { height: 12px; overflow: hidden; border: 1px solid #64748b66; border-radius: 999px; background: #334155; box-shadow: inset 0 1px 3px #0005; }
.level-statistics-level-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #38bdf8, #818cf8); box-shadow: 0 0 12px #38bdf855; transition: width .3s ease; }
.level-statistics-chart-caption { color: var(--muted, #a3aab5); font-size: .82rem; margin-bottom: 12px; }
.level-statistics-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: .8rem; margin-bottom: 8px; }
.level-statistics-legend-month { color: #38bdf8; }
.level-statistics-chart { display: grid; grid-template-columns: repeat(12, minmax(28px, 1fr)); gap: clamp(4px, 1.5vw, 12px); overflow-x: auto; padding: 12px 2px 4px; }
.level-statistics-column { min-width: 28px; text-align: center; }
.level-statistics-bars { height: 150px; display: flex; flex-direction: column; justify-content: end; align-items: center; gap: 5px; border-bottom: 1px solid #80808050; }
.level-statistics-bar-value { min-height: 1em; color: #bae6fd; font-size: .64rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.level-statistics-bar-month { width: min(72%, 26px); min-height: 4px; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #7dd3fc, #0284c7); box-shadow: 0 0 10px #38bdf833; }
.level-statistics-bar-month.is-empty { background: #64748b66; box-shadow: none; }
.level-statistics-column > small { display: flex; flex-direction: column; min-height: 28px; padding-top: 7px; color: var(--muted, #a3aab5); font-size: .68rem; }
.level-statistics-year { color: var(--gold, #d9b56d); font-size: .62rem; }
.level-statistics-deeds { list-style: none; margin: 0; padding: 0; }
.level-statistics-deeds li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid #80808030; }
.level-statistics-deed-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; color: var(--gold, #d9b56d); border: 1px solid var(--guild-gold-soft, #c6973c66); border-radius: 50%; background: #d9b56d0d; }
.level-statistics-deed-copy { display: grid; min-width: 0; flex: 1; gap: 3px; }
.level-statistics-deed-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.level-statistics-deed-copy span { color: var(--muted, #a3aab5); font-size: .75rem; }
.level-statistics-deed-xp { white-space: nowrap; color: #7dd3fc; font-variant-numeric: tabular-nums; }
.level-statistics-note { margin-top: 14px; line-height: 1.6; }
:root.light .level-statistics-level-meta span, :root.light .level-statistics-chart-caption { color: #536477; }
:root.light .level-statistics-level-track { background: #dce4ec; border-color: #aebac6; }
:root.light .level-statistics-level-track span { background: linear-gradient(90deg, #0284c7, #6d28d9); }
:root.light .level-statistics-legend-month, :root.light .level-statistics-deed-xp { color: #0369a1; }
:root.light .level-statistics-bar-value { color: #075985; }
:root.light .level-statistics-bar-month { background: linear-gradient(180deg, #38bdf8, #0369a1); }
:root.light .level-statistics-bar-month.is-empty { background: #94a3b866; }
:root.light .level-statistics-column > small, :root.light .level-statistics-deed-copy span { color: #536477; }
:root.light .level-statistics-year { color: #795819; }
:root.light .level-statistics-deed-icon { color: #795819; border-color: #92702c; background: #f5f2e9; }
@media (max-width: 520px) {
  .level-statistics-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .level-statistics-summary .dashboard-stat { padding: 11px 10px; }
  .level-statistics-summary .dashboard-stat-icon { width: 28px; height: 28px; }
  .level-statistics-summary .dashboard-stat-value { font-size: .95rem; }
  .level-statistics-summary .dashboard-stat-label { font-size: .66rem; }
  .level-statistics-chart { grid-template-columns: repeat(12, minmax(34px, 1fr)); }
  .level-statistics-bars { height: 128px; }
  .level-statistics-deeds li { gap: 8px; }
  .level-statistics-deed-xp { font-size: .8rem; }
}
.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-header { margin: 12px 0 26px; }
.heroic-slots-kicker {
  color: var(--slots-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.heroic-slots-header h1 {
  margin: 5px 0 8px;
  color: var(--slots-ink);
  font: 700 clamp(32px, 6vw, 44px)/1.12 Georgia, serif;
}
.heroic-slots-header p {
  max-width: 54ch;
  color: var(--slots-muted);
  font-size: 15px;
  line-height: 1.55;
}

.heroic-slots-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.heroic-slots-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 142px;
  padding: 18px;
  border: 1px solid var(--slots-line);
  border-radius: 16px;
  background: var(--slots-card);
  box-shadow: 0 8px 24px #08131b10;
}
.heroic-slots-stat-icon {
  width: 26px;
  height: 26px;
  margin-bottom: auto;
  color: var(--slots-accent);
}
.heroic-slots-stat strong {
  display: block;
  max-width: 100%;
  color: var(--slots-ink);
  font-size: clamp(20px, 4vw, 29px);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.heroic-slots-stat strong span { color: var(--slots-muted); font-weight: 500; }
.heroic-slots-stat-label {
  margin-top: 4px;
  color: var(--slots-muted);
  font-size: 13px;
  line-height: 1.3;
}

.heroic-slots-section { margin-top: 34px; }
.heroic-slots-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.heroic-slots-section h2 {
  color: var(--slots-ink);
  font: 700 clamp(22px, 4vw, 28px)/1.2 Georgia, serif;
}
.heroic-slots-section-heading > span {
  color: var(--slots-muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.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 var(--slots-line);
  border-radius: 16px;
  background: 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-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-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-stats, .heroic-slots-grid { gap: 9px; }
  .heroic-slots-stat { min-height: 132px; padding: 14px; }
  .heroic-slots-stat-icon { width: 23px; height: 23px; }
  .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-rules-page .world-right,
.heroic-rules-page .world-content,
.xp-guide-body,
.xp-guide-responsive,
.xp-guide-responsive > * {
  min-width: 0;
  max-width: 100%;
}

.heroic-rules-page .world-panel,
.xp-guide-responsive {
  overflow-wrap: anywhere;
}

@media (max-width: 639px) {
  .xp-examples table,
  .xp-examples tbody,
  .xp-examples tr,
  .xp-examples td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .xp-examples thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .xp-examples td {
    white-space: normal;
    padding: 8px 12px;
  }

  .xp-examples td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-weight: 600;
    opacity: .7;
  }

  .xp-examples tr {
    padding: 8px 0;
  }
}
.heroic-submission {
  --submission-accent: #e5bd6c;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #34434b;
  border-radius: 16px;
  background: linear-gradient(135deg, #12212b, #0b1720 75%);
  box-shadow: 0 6px 24px #00000018;
}
.heroic-submission[data-status='Approved'] { --submission-accent: #89d9b2; }
.heroic-submission[data-status='Rejected'] { --submission-accent: #eaa0a7; }
.heroic-submission[data-status='Withdrawn'],
.heroic-submission[data-status='Draft'] { --submission-accent: #abb9c6; }
.heroic-submission-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 13px 20px;
  border-bottom: 1px solid #ffffff0b;
  background: #00000018;
}
.heroic-submission-status,
.heroic-submission-header time { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; }
.heroic-submission-status { color: var(--submission-accent); font-weight: 600; }
.heroic-submission-header time { color: #9caebc; }
.heroic-submission-body { padding: 20px; }
.heroic-submission-category-row { margin-bottom: 14px; }
.heroic-submission-category {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  color: #e3c582;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
.heroic-submission-category:hover { color: #ffe2a4; }
.heroic-submission-title { margin: 0; color: #f1f3f4; font-size: 20px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.heroic-submission-description { margin: 9px 0 18px; color: #b7c3cc; font-size: 14px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.heroic-submission-xp { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 9px; color: #e3c582; font-size: 13px; }
.heroic-submission-xp strong { font-weight: 650; }
.heroic-submission-xp span { color: #98aab8; font-size: 12px; }
.heroic-submission[data-status='Approved'] .heroic-submission-xp { color: var(--submission-accent); }
.heroic-submission-actions:empty { display: none; }
.heroic-submission-actions:not(:empty) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #ffffff10; }
.heroic-submission .heroic-submission-actions > button {
  min-height: 42px;
  max-width: 100%;
  margin: 0;
  padding: 10px 15px;
  border: 1px solid #bfa26855;
  border-radius: 9px;
  background: #d4b2680c;
  color: #e3c582;
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.heroic-submission .heroic-submission-actions > .world-button-danger { border-color: #df939330; background: transparent; color: #dca5ac; }
.heroic-submission[data-status='Rejected'] .heroic-submission-actions > button { color: #c7c7f5; border-color: #a4a2ed55; background: #a4a2ed0c; }
.heroic-submission .heroic-submission-actions > button:hover:not(:disabled) { background: #ffffff0c; }
.heroic-submission button:focus-visible { outline: 2px solid #e3c582; outline-offset: 4px; }
.heroic-submission .heroic-submission-actions > button:disabled { opacity: .5; cursor: wait; }
.heroic-submission-actions > div { width: 100%; min-width: 0; border-radius: 10px; }
.heroic-submission-actions input[type='file'] { max-width: 100%; }
:root.light .heroic-submission {
  --submission-accent: #795819;
  background: linear-gradient(135deg, #fffdf7, #fff 75%);
  border-color: var(--world-line, #c6b68e);
  color: var(--world-ink, #263747);
  box-shadow: 0 6px 24px #493e200c;
}
:root.light .heroic-submission[data-status='Approved'] { --submission-accent: #176b4a; }
:root.light .heroic-submission[data-status='Rejected'] { --submission-accent: #a33248; }
:root.light .heroic-submission[data-status='Withdrawn'],
:root.light .heroic-submission[data-status='Draft'] { --submission-accent: #536477; }
:root.light .heroic-submission-header { background: #f4f0e7; border-bottom-color: #ddd6c6; }
:root.light .heroic-submission-header time,
:root.light .heroic-submission-description,
:root.light .heroic-submission-xp span { color: #536477; }
:root.light .heroic-submission .heroic-submission-title { color: #263747; }
:root.light .heroic-submission-category,
:root.light .heroic-submission-xp { color: #795819; }
:root.light .heroic-submission-category:hover { color: #543d10; }
:root.light .heroic-submission[data-status='Approved'] .heroic-submission-xp { color: var(--submission-accent); }
:root.light .heroic-submission-actions:not(:empty) { border-top-color: #ddd6c6; }
:root.light .heroic-submission .heroic-submission-actions > button { background: #f7f0df; border-color: #c6b68e; color: #795819; }
:root.light .heroic-submission .heroic-submission-actions > .world-button-danger { background: #fff8f8; border-color: #dfb5bd; color: #a33248; }
:root.light .heroic-submission[data-status='Rejected'] .heroic-submission-actions > button { background: #f3f0fc; border-color: #c5b9df; color: #59428c; }
:root.light .heroic-submission .heroic-submission-actions > button:hover:not(:disabled) { background: #eee7d8; }
:root.light .heroic-submission button:focus-visible { outline-color: #795819; }
:root.light .heroic-submission-actions .text-amber-300 { color: #795819; }
:root.light .heroic-submission-actions .text-indigo-300 { color: #59428c; }
@media (max-width: 480px) {
  .heroic-submission-header { padding: 12px 16px; }
  .heroic-submission-body { padding: 17px 16px; }
  .heroic-submission-title { font-size: 19px; }
}
.event-detail {
  --event-border: color-mix(in srgb, currentColor 13%, transparent);
  display: grid;
  gap: 16px;
  min-width: 0;
}

.event-detail-hero {
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-radius: 20px;
  background: radial-gradient(ellipse at top right, #d9b56d20, transparent 65%), linear-gradient(135deg, #d9b56d08, transparent);
}

.event-detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; font-size: 12px; color: var(--muted); }
.event-detail-status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border: 1px solid currentColor; border-radius: 99px; font-weight: 600; }
.event-detail-status > span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.event-detail-status--active { color: #5ed6ac; background: #10b98112; }
.event-detail-status--upcoming { color: #79c9ef; background: #38bdf812; }
.event-detail-status--ended { color: var(--muted); }
.event-detail-hero h2 { margin: 20px 0 24px; font: 600 clamp(28px, 4vw, 40px)/1.15 Georgia, serif; letter-spacing: -.025em; color: var(--gold); overflow-wrap: anywhere; }
.event-detail-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 18px; border-top: 1px solid var(--event-border); }
.event-detail-dates > div { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.event-detail-dates svg { flex-shrink: 0; color: var(--gold); margin-top: 3px; }
.event-detail-dates span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 5px; }
.event-detail-dates time { font-size: 13px; font-weight: 600; }
.event-detail-dates small { display: block; color: var(--muted); font-weight: 400; margin-top: 2px; }
.event-detail-section { padding: clamp(18px, 3vw, 26px); border: 1px solid var(--event-border); border-radius: 18px; background: #ffffff03; min-width: 0; }
.event-detail-section h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; font-size: 17px; font-weight: 600; }
.event-detail-section p { font-size: 14px; line-height: 1.7; margin: 0; overflow-wrap: anywhere; }
.event-detail-description, .event-detail-notes p { white-space: pre-wrap; }
.event-detail-bonus { display: flex; align-items: center; gap: 12px; background: #d9b56d12; border: 1px solid #d9b56d35; color: var(--gold); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.event-detail-bonus strong { flex: 1; font-size: 15px; }
.event-detail-bonus > span { font-size: 13px; font-weight: 600; }
.event-detail-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.event-detail-stat { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 17px 6px 14px; border: 1px solid var(--event-border); border-radius: 12px; background: #ffffff04; min-width: 0; }
.event-detail-stat svg { order: 0; }
.event-detail-stat dt { order: 2; font-size: 11px; text-align: center; color: var(--muted); overflow-wrap: anywhere; }
.event-detail-stat dd { order: 1; font: 600 clamp(20px, 4vw, 28px)/1.2 Georgia, serif; margin: 0; max-width: 100%; overflow-wrap: anywhere; }
.event-detail-stat--gold svg { color: var(--gold); }
.event-detail-stat--blue svg { color: #60bcec; }
.event-detail-stat--green svg { color: #5ed6ac; }
.event-detail-section .event-detail-terms { color: var(--muted); font-size: 12px; margin: 16px 0; }
.event-detail-join { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 13px 16px; border-radius: 12px; background: linear-gradient(120deg, #edcf8f, #c9a154); color: #201b11; font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 20px #d9b56d12; }
.event-detail-join svg { flex-shrink: 0; }
.event-detail-join:hover { filter: brightness(1.08); }
.event-detail-join:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.event-detail-unavailable { padding: 12px; border-radius: 10px; background: #ffffff06; color: var(--muted); }
.event-detail-notes h3 svg { color: var(--gold); flex-shrink: 0; }
.event-detail-notes p { color: var(--muted); font-size: 13px; }
.event-detail-verification { display: grid; gap: 4px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--event-border); font-size: 12px; }
.event-detail-verification > span { color: var(--muted); }
.event-detail-verification strong { font-weight: 500; }
:root.light .event-detail-status--active, :root.light .event-detail-stat--green svg { color: #147451; }
:root.light .event-detail-status--upcoming, :root.light .event-detail-stat--blue svg { color: #17658b; }
.system-news-content { white-space: normal; overflow-wrap: anywhere; line-height: 1.65; min-width: 0; }
.system-news-plain { white-space: pre-wrap; }
.system-news-content p { margin: 0.5em 0; }
.system-news-content > :first-child { margin-top: 0; }
.system-news-content > :last-child { margin-bottom: 0; }
.system-news-content h2 { font-size: 1.35em; font-weight: 700; margin: 0.8em 0 0.35em; }
.system-news-content h3 { font-size: 1.15em; font-weight: 700; margin: 0.7em 0 0.3em; }
.system-news-content ul, .system-news-content ol { padding-left: 1.6em; margin: 0.5em 0; }
.system-news-content ul { list-style-type: disc; }
.system-news-content ol { list-style-type: decimal; }
.system-news-content blockquote { border-left: 3px solid #b88737; padding-left: 1em; margin: 0.7em 0; }
.system-news-content a { color: #fbbf24; text-decoration: underline; }
.system-news-content hr { margin: 1em 0; border-color: #71717a; }
.system-news-editor { border: 1px solid #71717a; border-radius: 0.35rem; background: #09090b; color: #f4f4f5; }
.system-news-toolbar, .system-news-link { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.5rem; border-bottom: 1px solid #71717a; }
.system-news-editor button { padding: 0.3rem 0.5rem; border-radius: 0.2rem; font-size: 0.8rem; border: 1px solid #71717a; }
.system-news-editor button[aria-pressed="true"] { background: #b45309; color: white; }
.system-news-editor button:disabled { opacity: 0.4; }
.system-news-editor button:focus-visible, .system-news-editor .tiptap:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; }
.system-news-editor .tiptap { min-height: 10rem; padding: 0.8rem; }
.system-news-link input { min-width: 0; flex: 1; padding: 0.3rem; }
.system-news-link [role="alert"] { width: 100%; color: #f87171; }
:root.light .system-news-editor { background: #fff; color: #27272a; }
:root.light .system-news-content a { color: #92400e; }

.system-news-summary { display: flex; align-items: center; gap: 0.8rem; padding: 1rem; border-radius: 0.4rem; text-decoration: none; color: #e4c38a; }
.system-news-summary strong { flex: 1; min-width: 0; overflow-wrap: anywhere; color: #f4f4f5; font-size: 0.95rem; }
.system-news-summary svg { flex-shrink: 0; }
.system-news-summary:hover { border-color: #d7a94d; }
.system-news-summary:focus-visible, .system-news-back:focus-visible { outline: 2px solid #d7a94d; outline-offset: 4px; }
.system-news-page { width: min(100%, 900px); margin: 0 auto; padding: clamp(1rem, 4vw, 3rem); color: #e4e4e7; }
.system-news-back { display: inline-flex; align-items: center; gap: 0.6rem; color: #d6b979; margin-bottom: 1.5rem; font-size: 0.9rem; text-decoration: none; }
.system-news-back:hover { text-decoration: underline; }
.system-news-article { overflow: hidden; border: 1px solid #735a32; border-radius: 1rem; background: linear-gradient(135deg, #30291e 0%, #1c1c1e 45%); box-shadow: 0 16px 48px #0003; padding: clamp(1.4rem, 5vw, 3.5rem); }
.system-news-heading { border-bottom: 1px solid #b8873740; padding-bottom: 1.7rem; margin-bottom: 2rem; }
.system-news-eyebrow { display: flex; align-items: center; gap: 0.8rem; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.7rem; font-weight: 700; color: #e4c38a; }
.system-news-seal { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid #b8873760; border-radius: 50%; background: #b8873714; }
.system-news-article h1 { font-family: Georgia, serif; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.2; font-weight: 700; overflow-wrap: anywhere; margin: 1.5rem 0 1rem; color: #faf3df; }
.system-news-meta { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; font-size: 0.8rem; color: #b9b2a6; }
.system-news-meta > span { display: inline-flex; align-items: center; gap: 0.45rem; }
.system-news-body { font-size: 1.05rem; }
.system-news-body .system-news-content { line-height: 1.85; }
.system-news-footer { display: flex; align-items: center; gap: 0.7rem; border-top: 1px solid #b8873740; margin-top: 2.5rem; padding-top: 1.2rem; font-size: 0.75rem; color: #b9b2a6; }
:root.light .system-news-summary strong { color: #40321d; }
:root.light .system-news-page { color: #403b32; }
:root.light .system-news-article { background: linear-gradient(135deg, #fbf0d8, #fffdf7 50%); border-color: #dac7a0; box-shadow: 0 16px 48px #62471612; }
:root.light .system-news-article h1 { color: #392d19; }
:root.light .system-news-eyebrow, :root.light .system-news-back { color: #886421; }
:root.light .system-news-meta, :root.light .system-news-footer { color: #75664e; }
/* Hall portraits and parchment sit behind the original renown ornaments. */
.guild-directory-page .world-content { padding:28px clamp(16px,3vw,36px); }
.guild-directory-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); gap:var(--card-gap); align-items:stretch; }
.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; --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(#000 55%,transparent); }
.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; }
.guild-directory-card--showcase .guild-directory-stage-label { align-self:flex-start; background:#10212de8; border:1px solid #ddc18b70; color:#f6e6c4; font-size:10px; text-transform:uppercase; letter-spacing:.12em; padding:5px 9px; }
.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; }
.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; }
@media(max-width:600px) {
  .guild-directory-page .world-content { padding:24px; }
  .guild-directory-grid { gap:var(--card-gap); }
}
.heraldic-emblem-builder .heraldic-toolbar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1px solid #344857;
  border-radius: 16px;
  background: #0b1923;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
}

.heraldic-emblem-builder .heraldic-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 680px;
}

.heraldic-emblem-builder .heraldic-toolbar .heraldic-mode-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid #3b5060;
  border-radius: 11px;
  background: #10212d;
  color: #bfcad5;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  box-shadow: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.heraldic-emblem-builder .heraldic-toolbar .heraldic-mode-option:hover {
  background: #182d3a;
  border-color: #a98a4e;
  color: #f1e4c7;
}

.heraldic-emblem-builder .heraldic-toolbar .heraldic-mode-option.is-active {
  background: #352b1b;
  border-color: #d9b56d;
  color: #f5dfad;
  box-shadow: inset 0 0 0 1px rgba(217, 181, 109, .25);
}

.heraldic-emblem-builder .heraldic-toolbar .heraldic-mode-option svg {
  color: #d9b56d;
}

.heraldic-emblem-builder .heraldic-toolbar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding-top: 12px;
  border-top: 1px solid #344857;
}

.heraldic-emblem-builder .heraldic-forge-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #9eabba;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.heraldic-emblem-builder .heraldic-forge-status.is-unlocked {
  color: #e9c875;
}

.heraldic-emblem-builder .heraldic-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.heraldic-emblem-builder .heraldic-toolbar .heraldic-tool-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid #3b5060;
  border-radius: 9px;
  background: #10212d;
  color: #d5dce3;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.heraldic-emblem-builder .heraldic-toolbar .heraldic-tool-button:hover:not(:disabled) {
  background: #1b303d;
  border-color: #a98a4e;
  color: #f5dfad;
}

.heraldic-emblem-builder .heraldic-toolbar .heraldic-tool-button svg {
  color: #d9b56d;
}

.heraldic-emblem-builder .heraldic-toolbar .heraldic-tool-button-icon {
  width: 38px;
  padding: 8px;
}

.heraldic-emblem-builder .heraldic-toolbar button:focus-visible {
  outline: 2px solid #e9c875;
  outline-offset: 3px;
}

.heraldic-emblem-builder .heraldic-toolbar button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

:root.light .heraldic-emblem-builder .heraldic-toolbar {
  background: #fffdf8;
  border-color: #c6b68e;
  box-shadow: 0 4px 16px rgba(73, 62, 32, .08);
}

:root.light .heraldic-emblem-builder .heraldic-toolbar .heraldic-mode-option,
:root.light .heraldic-emblem-builder .heraldic-toolbar .heraldic-tool-button {
  background: #f7f2e8;
  border-color: #c6b68e;
  color: #334456;
}

:root.light .heraldic-emblem-builder .heraldic-toolbar .heraldic-mode-option:hover,
:root.light .heraldic-emblem-builder .heraldic-toolbar .heraldic-tool-button:hover:not(:disabled) {
  background: #eee3cb;
  border-color: #92702c;
  color: #543d10;
}

:root.light .heraldic-emblem-builder .heraldic-toolbar .heraldic-mode-option.is-active {
  background: #eadab6;
  border-color: #92702c;
  color: #47320d;
  box-shadow: inset 0 0 0 1px rgba(146, 112, 44, .18);
}

:root.light .heraldic-emblem-builder .heraldic-toolbar .heraldic-mode-option svg,
:root.light .heraldic-emblem-builder .heraldic-toolbar .heraldic-tool-button svg {
  color: #795819;
}

:root.light .heraldic-emblem-builder .heraldic-toolbar-footer {
  border-color: #ded1b9;
}

:root.light .heraldic-emblem-builder .heraldic-forge-status {
  color: #536477;
}

:root.light .heraldic-emblem-builder .heraldic-forge-status.is-unlocked {
  color: #795819;
}

@media (max-width: 520px) {
  .heraldic-emblem-builder .heraldic-mode-switch {
    grid-template-columns: 1fr;
  }
}
.guild-statistics { min-width: 0; color: var(--text-primary, #e2e8f0); }
.guild-statistics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.guild-statistics-card { padding: 16px; border: 1px solid #a78bfa30; border-radius: 12px; background: #a78bfa08; }
.guild-statistics-card strong { display: block; font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.guild-statistics-card span { display: block; font-size: .8rem; margin-top: 5px; }
.guild-statistics-note { font-size: .8rem; line-height: 1.65; margin-top: 16px; }
.guild-statistics-note summary { cursor: pointer; }
.guild-statistics-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .8rem; }
.guild-statistics-filter select { padding: 8px; border: 1px solid #80808060; border-radius: 8px; background: var(--bg-secondary, #192131); color: inherit; }
.guild-statistics-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.guild-statistics-grid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guild-statistics-legend { display: flex; gap: 20px; flex-wrap: wrap; font-size: .8rem; margin-bottom: 16px; }
.guild-statistics-legend span:first-child { color: #b88624; }
.guild-statistics-legend span:last-child { color: #2f9878; }
.guild-statistics-chart { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; }
.guild-statistics-column { flex: 1 0 42px; text-align: center; }
.guild-statistics-stack { height: 150px; display: flex; flex-direction: column; justify-content: flex-end; border-bottom: 1px solid #80808050; }
.guild-statistics-individual { background: #c6973c; }
.guild-statistics-group { background: #379f80; }
.guild-statistics-column small { display: block; font-size: .65rem; padding-top: 8px; }
.guild-statistics-table { overflow-x: auto; }
.guild-statistics-table table { width: 100%; text-align: left; border-collapse: collapse; }
.guild-statistics-table td, .guild-statistics-table th { padding: 8px; border-bottom: 1px solid #80808040; }
.guild-statistics-category { margin-bottom: 16px; }
.guild-statistics-category > div { display: flex; justify-content: space-between; gap: 12px; font-size: .85rem; }
.guild-statistics-category progress { width: 100%; height: 8px; accent-color: #379f80; }
.guild-statistics-participation { display: grid; gap: 12px; margin-bottom: 20px; }
.guild-statistics-participation > div { display: grid; grid-template-columns: 76px minmax(0, 1fr) 42px; align-items: center; gap: 10px; font-size: .8rem; }
.guild-statistics-track, .guild-statistics-finance-track { overflow: hidden; height: 12px; border-radius: 999px; background: #80808025; }
.guild-statistics-track > span { display: block; height: 100%; border-radius: inherit; background: #379f80; }
.guild-statistics-track.is-muted > span { background: #64748b; opacity: .55; }
.guild-statistics-earned-key { color: #379f80; }
.guild-statistics-spent-key { color: #c6973c; }
.guild-statistics-finance-chart { display: grid; gap: 18px; }
.guild-statistics-finance-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 56px; gap: 10px; align-items: center; font-size: .8rem; }
.guild-statistics-finance-row strong { text-align: right; font-variant-numeric: tabular-nums; }
.guild-statistics-finance-track { display: flex; }
.guild-statistics-finance-track i { display: block; height: 100%; }
.guild-statistics-earned-bar { background: #379f80; }
.guild-statistics-spent-bar { background: #c6973c; }
:root.light .guild-statistics-finance-row > span { color: #536477; }
:root.light .guild-statistics { color: #243246; }
:root.light .guild-statistics .world-panel { background: #fffdf8; color: #243246; }
:root.light .guild-statistics .world-panel h2 { color: #543d10; }
:root.light .guild-statistics-filter select { background: #fff; }
:root.light .guild-statistics-card { background: #fff; border-color: #c6b68e; }
:root.light .guild-statistics-card strong { color: #263747; }
:root.light .guild-statistics-card span, :root.light .guild-statistics-note { color: #536477; }
:root.light .guild-statistics-legend span:first-child { color: #8a5a00; }
:root.light .guild-statistics-legend span:last-child { color: #08705a; }
:root.light .guild-statistics-individual { background: #a66b00; }
:root.light .guild-statistics-group { background: #08705a; }
:root.light .guild-statistics-earned-key { color: #08705a; }
:root.light .guild-statistics-spent-key { color: #8a5a00; }
:root.light .guild-statistics-track > span, :root.light .guild-statistics-earned-bar { background: #08705a; }
:root.light .guild-statistics-track.is-muted > span { background: #64748b; opacity: .7; }
:root.light .guild-statistics-spent-bar { background: #a66b00; }
:root.light .guild-statistics-finance-row { color: #263747; }
:root.light .guild-statistics-table td, :root.light .guild-statistics-table th { border-color: #d8cfbd; }
@media (max-width: 700px) { .guild-statistics-panels { grid-template-columns: 1fr; } }
.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-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); cursor:not-allowed; opacity:.7; }
.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; }
}
/* 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; cursor: not-allowed; }
.guild-room-picker-item.is-locked 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; } }
/* ========================================================================= */
/* GUILD HALL STAGE 2.0 STYLES & PERSPECTIVE LOCK                            */
/* ========================================================================= */

.guild-stage-fullscreen {
  position: relative;
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 100%;
  overflow: hidden;
  background: #040a12;
  user-select: none;
  display: flex;
  flex-direction: column;
}

/* Canvas Wrapper - Centers and scales the 1672x941 stage */
.guild-stage-canvas-wrapper {
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Fixed 1672:941 Aspect-Ratio Canvas (Locks perspective 100% on all devices/zoom) */
.guild-stage-canvas {
  position: relative;
  aspect-ratio: 1672 / 941;
  width: min(100%, calc((100vh - 60px) * 1.77683));
  height: min(100%, calc(100vw / 1.77683));
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}

/* Base Background Image (Full Cover) */
.guild-stage-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  transition: opacity 0.35s ease-in-out;
}

/* ========================================================================= */
/* SPRITE HOTSPOTS & CLICKABLE OBJECTS                                       */
/* ========================================================================= */

.guild-stage-item {
  position: absolute;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  transform-origin: center bottom;
  transform: rotate(var(--item-rot, 0deg)) skewX(var(--item-skew-x, 0deg)) skewY(var(--item-skew-y, 0deg)) scaleX(var(--item-flip, 1));
  display: block;
}

.guild-stage-item.is-non-admin {
  cursor: default;
}

.guild-stage-item img.guild-stage-sprite {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  pointer-events: none;
  /* Realistic contact shadow on the floor */
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
  transition: filter 0.22s ease;
}

/* Interactive Hover & Focus State (Highlight only, no pop-out / no movement) */
.guild-stage-item:not(.is-non-admin):hover img.guild-stage-sprite {
  filter: drop-shadow(0 0 16px rgba(245, 197, 66, 0.95)) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.75));
}

.guild-stage-item:not(.is-non-admin):active img.guild-stage-sprite {
  filter: drop-shadow(0 0 12px rgba(245, 197, 66, 0.8)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7));
}

.guild-stage-item:focus-visible img.guild-stage-sprite {
  filter: drop-shadow(0 0 18px rgba(245, 197, 66, 1));
}

/* Locked State (Items not yet purchased) */
.guild-stage-item.is-locked {
  opacity: 0.4;
  filter: grayscale(80%) contrast(90%);
}

.guild-stage-item.is-locked:hover {
  opacity: 0.85;
  filter: grayscale(25%) drop-shadow(0 0 14px rgba(180, 200, 230, 0.9));
}

/* Fountain Magic Glow Effect */
.guild-stage-fountain-glow {
  position: absolute;
  inset: -15%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.25) 0%, rgba(56, 189, 248, 0) 70%);
  pointer-events: none;
  animation: fountainPulse 3s ease-in-out infinite alternate;
}

@keyframes fountainPulse {
  0% { transform: scale(0.95); opacity: 0.4; }
  100% { transform: scale(1.08); opacity: 0.85; }
}

/* Tooltips */
.guild-stage-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: rgba(10, 18, 28, 0.95);
  border: 1px solid rgba(212, 175, 55, 0.6);
  color: #fef08a;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-family: inherit;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
  z-index: 40;
}

.guild-stage-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: rgba(212, 175, 55, 0.6) transparent transparent transparent;
}

.guild-stage-item:hover .guild-stage-tooltip,
.guild-stage-item:focus-visible .guild-stage-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-10px);
}

.guild-stage-tooltip-badge {
  background: #eab308;
  color: #0c1826;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 9999px;
}

/* ========================================================================= */
/* FLOATING TOP BAR (Pills matching Theme Switcher style)                     */
/* ========================================================================= */

.guild-stage-topbar {
  position: absolute;
  top: 14px;
  left: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 25;
}

.guild-stage-pill {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(8, 16, 26, 0.82);
  border: 1px solid rgba(212, 175, 55, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 9999px;
  color: #f3f4f6;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  transition: all 0.2s ease;
  text-decoration: none;
}

.guild-stage-pill:hover {
  background: rgba(14, 26, 40, 0.95);
  border-color: rgba(212, 175, 55, 0.7);
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.25);
  color: #fef08a;
}

/* ========================================================================= */
/* FLOATING BOTTOM QUICK NAVIGATION (Desktop & Tablet)                       */
/* ========================================================================= */

.guild-stage-bottombar {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: rgba(8, 16, 26, 0.88);
  border: 1px solid rgba(212, 175, 55, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 9999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
  z-index: 25;
  pointer-events: auto;
  max-width: 95%;
  overflow-x: auto;
}

.guild-stage-quickbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9999px;
  color: #d1d5db;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
}

.guild-stage-quickbtn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fef08a;
  border-color: rgba(212, 175, 55, 0.3);
}

.guild-stage-quickbtn.is-active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(180, 130, 20, 0.35) 100%);
  color: #fef08a;
  border-color: rgba(212, 175, 55, 0.65);
  box-shadow: 0 2px 10px rgba(212, 175, 55, 0.3);
}

/* ========================================================================= */
/* MOBILE NAVIGATION PANEL (Thumb-friendly 1-tap Action Tiles)               */
/* ========================================================================= */

.guild-mobile-nav-panel {
  display: none;
  width: 100%;
  background: #060e17;
  border-top: 1px solid rgba(212, 175, 55, 0.25);
  padding: 10px 12px 14px;
  flex-shrink: 0;
  z-index: 20;
}

.guild-mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 4px;
}

.guild-mobile-nav-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.guild-mobile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  background: rgba(12, 22, 34, 0.9);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 6px;
  color: #e5e7eb;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.guild-mobile-card:active,
.guild-mobile-card.is-active {
  background: rgba(212, 175, 55, 0.2);
  border-color: rgba(212, 175, 55, 0.6);
  color: #fef08a;
}

.guild-mobile-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #eab308;
  color: #0c1826;
  font-size: 8px;
  font-weight: 800;
  padding: 0 4px;
  border-radius: 9999px;
  line-height: 12px;
}

/* ========================================================================= */
/* RIGHT FLYOUT DRAWER (Full width up to side navigation)                    */
/* ========================================================================= */

.guild-flyout-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 49;
  transition: opacity 0.25s ease-in-out;
}

.guild-flyout-drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  z-index: 50;
  background: #08121c;
  background: linear-gradient(180deg, rgba(12, 22, 34, 0.98) 0%, rgba(5, 12, 19, 0.99) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  animation: flyoutSlideIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes flyoutSlideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.guild-flyout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  background: rgba(8, 16, 26, 0.85);
  backdrop-filter: blur(12px);
  flex-shrink: 0;
  width: 100%;
}

.guild-flyout-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.3) transparent;
}

/* ========================================================================= */
/* RESPONSIVE BREAKPOINTS (Mobile Optimization)                              */
/* ========================================================================= */

@media (max-width: 768px) {
  .guild-stage-bottombar {
    display: none;
  }
  .guild-mobile-nav-panel {
    display: block;
  }
  .guild-stage-topbar {
    top: 8px;
    left: 8px;
    right: 8px;
  }
  .guild-stage-pill {
    font-size: 11px;
    padding: 4px 10px;
  }
  .guild-stage-tooltip {
    display: none;
  }
  .guild-flyout-header {
    padding: 12px 16px;
  }
  .guild-flyout-content {
    padding: 16px;
  }
}
.tribunal-page .world-content {
  gap: 0;
  padding: clamp(16px, 2.2vw, 32px);
}

.tribunal-content {
  width: 100%;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 24px;
}

.tribunal-toolbar {
  position: relative;
  z-index: 41;
}

.tribunal-anticheat-tooltip {
  max-width: calc(100vw - 64px);
}

.tribunal-page .tribunal-toolbar {
  padding: 0 0 18px;
  border-color: #bda16b42;
}

.tribunal-page .tribunal-toolbar > div {
  width: 100%;
}

.tribunal-page .tribunal-toolbar button,
.tribunal-page .tribunal-toolbar > div > div:last-child {
  min-height: 42px;
}

.tribunal-page .tribunal-filter,
.tribunal-page .tribunal-review-card,
.tribunal-page .tribunal-empty {
  border: 1px solid #9d825360;
  border-radius: 8px;
  background: linear-gradient(135deg, #0c1a23ee, #071119f5);
  box-shadow: inset 0 0 0 4px #06101855;
}

.tribunal-page .tribunal-filter-toggle {
  min-height: 72px;
}

.tribunal-page .tribunal-filter-toggle > div:first-child > div:first-child {
  width: 40px;
  height: 40px;
}

.tribunal-page .tribunal-queue > div:first-child {
  padding-bottom: 12px;
  border-bottom: 1px solid #bda16b42;
}

.tribunal-page .tribunal-queue > div:first-child h2 {
  font-size: 22px;
  font-weight: 600;
}

.tribunal-page .tribunal-empty {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0 0 0 4px #06101855;
}

.tribunal-page .tribunal-empty > div:first-child {
  border-radius: 50%;
}

:root.light .tribunal-page :is(.tribunal-filter, .tribunal-review-card, .tribunal-empty) {
  background: #fffdf8;
  border-color: var(--world-line);
  box-shadow: inset 0 1px #fff8, 0 5px 18px #493e2010;
}

:root.light .tribunal-page .tribunal-toolbar {
  border-color: #c6b68e;
}

:root.light .tribunal-page .tribunal-queue > div:first-child {
  border-color: #c6b68e;
}

:root.light .tribunal-page .tribunal-empty > div:first-child {
  background: #f2eadb;
  border-color: #d7c6a5;
}

@media (max-width: 850px) {
  .tribunal-page .world-content {
    padding: 16px;
  }

  .tribunal-page .tribunal-content {
    gap: 18px;
  }

  .tribunal-page .tribunal-toolbar {
    padding-bottom: 14px;
  }
}
:root { --stat-amber:#ecd08a; --stat-emerald:#83d5b0; --stat-violet:#bfade9; --stat-sky:#83d6f1; }
:root.light { color-scheme:light; --talent-a: #7e22ce; --talent-b: #047857; --talent-c: #0369a1; --world-paper:#f5f2e9; --world-surface:#fff; --world-ink:#263747; --world-muted:#536477; --world-gold:#795819; --world-line:#c6b68e; --guild-gold:#92702c; --guild-gold-soft:#92702c30; --guild-violet-soft:#73629308; --zinc-950:#f5f2e9; --zinc-900:#fffdf7; --zinc-800:#ddd6c6; --zinc-700:#b9b2a3; --zinc-600:#8c8273; --zinc-500:#6b7785; --zinc-400:#536477; --zinc-300:#3d4e60; --zinc-200:#2c3b4a; --zinc-100:#1c2834; --zinc-50:#0f1821; --stat-amber:#b45309; --stat-emerald:#047857; --stat-violet:#6d28d9; --stat-sky:#0284c7; }
:root:not(.light) { color-scheme:dark; }
:root.light body { background:var(--world-paper); color:var(--world-ink); }
:root.light :is(.world-page,.world-map-page,.world-chat-full,.dashboard-world,.world-app-main,.world-footer) { background:var(--world-paper); color:var(--world-ink); --gold:var(--world-gold); --muted:var(--world-muted); }
:root.light :is(.world-story,.dashboard-story) { background:transparent !important; --world-story-fade:linear-gradient(90deg,transparent 30%,rgba(245,242,233,0.35) 60%,rgba(245,242,233,0.85) 82%,#f5f2e9 100%),linear-gradient(180deg,transparent 15%,rgba(245,242,233,0.5) 55%,#f5f2e9 100%); }
:root.light .world-content { background:#f5f2e9; }
:root.light :is(.world-panel,.world-gold,.xp-guide,.xp-guide-band,.xp-guide-definitions>div,.guild-directory-card,.branding-panel,.branding-header,.public-profile-heading,.public-profile-stats,.tavern-news-card,.notifications-heading,.notification-card,.dashboard-stat-strip,.dashboard-action-cta,.world-notification-menu) { background:#fff; border-color:var(--world-line); color:var(--world-ink); box-shadow:inset 0 1px #fff8,0 5px 18px #493e2010; }
:root.light :is(.world-page,.world-map-page,.guild-branding,.admin-directory,.notifications-page,.dashboard-world,.world-chat-frame) :is(h1,h2,h3,h4) { color:#674a1d; }
:root.light :is(.world-story p,.world-class p,.world-class small,.world-story-values,.world-more,.world-loading,.world-gold p,.world-location-details p,.world-event p,.world-stat span,.xp-guide-intro,.xp-guide-definitions p,.xp-guide-band>p,.xp-guide-footer,.guild-directory-description,.guild-directory-stats span,.guild-branding p,.public-profile-bio,.public-profile-stats span,.tavern-news-body,.tavern-news-meta,.notification-message,.notifications-page-number,.dashboard-stat-label,.dashboard-stat-detail) { color:var(--world-muted); }
:root.light .notifications-heading p { color:var(--world-muted); }
:root.light .notifications-push-badge { color:#176b4a; background:#e4f3e9; border-color:#8ac3a2; }
:root.light .notifications-push-badge svg { color:inherit; }
:root.light :is(.world-stat strong,.dashboard-stat-value,.public-profile-stats strong,.xp-guide-definitions strong,.xp-guide-band>div>span:first-child,.chat-conversation b) { color:var(--world-ink); }
:root.light :is(.world-eyebrow,.world-story h2,.world-story-values svg,.world-medallion,.world-class p,.xp-guide-heading,.xp-guide-band>div>span:last-child,.tavern-news-label,.guild-directory-stats>div>span:last-child,.public-profile-badges span) { color:var(--world-gold); }
:root.light .world-story-copy :is(h1,h2) { color:#2b1d0c; }
:root.light .world-story-copy p { color:#1c2834; }
:root.light .world-story-copy :is([class*="text-amber-200"],[class*="text-amber-300"]) { color:#543d10 !important; }
:root.light .world-story-copy button[class*="hover:text-amber-100"]:hover { color:#2b1d0c !important; }
:root.light .dashboard-story :is(.world-eyebrow,.dashboard-hero-quote) { color:#382608 !important; }
:root.light .dashboard-story p[class*="text-zinc-300"] { color:#1c2834 !important; }
:root.light .world-button,:root.light .world-icon-button,:root.light .guild-branding button:not(.branding-preset) { background:#fffdf7; color:#674a1d; border-color:#a98a4e; }
:root.light .world-button:hover,:root.light .world-icon-button:hover { background:#e7d8b6; border-color:#795819; }
:root.light .world-button[aria-pressed=true],:root.light .world-tabs [aria-selected=true] { background:#e5d4ab; color:#543d10; border-color:#92702c; }
:root.light .world-button-danger { background:#fbe8e6; color:#9a293c; border-color:#c77984; }
:root.light .guild-ep-boost { --boost-accent:#176b88; --boost-muted:#536477; }
:root.light .guild-ep-boost-emblem { background:#e8f4f6; border-color:#8cb5bf; color:#176b88; }
:root.light .guild-ep-boost-copy strong { color:#263747; }
:root.light .guild-ep-boost-stage { background:#f3f1e9; border-color:#d5d0c1; color:#5a6872; }
:root.light .guild-ep-boost-stage.is-unlocked { background:#dceff2; border-color:#77aebe; color:#17566c; }
:root.light .guild-ep-boost-stage.is-next { border-color:#8aa6aa; }
:root.light .guild-ep-boost-max { color:#216b4a; }
:root.light :is(.world-page,.world-chat-frame,.guild-branding,.admin-directory,.world-map-tools) :is(input,select,textarea) { background:#fffdf8; color:#263747; border-color:#aaad9e; }
:root.light :is(input,textarea)::placeholder { color:#637184; }
:root.light :is(.world-page,.world-chat-frame,.guild-branding,.admin-directory) :focus-visible { outline-color:#806021; }
:root.light .portal-shell { color:#344451; background:#f8f4e9; }
:root.light .portal-sidebar { border-color:#9a7b4245; background:#f4efe3; box-shadow:12px 0 32px #493e201c; }
:root.light .portal-brand { border-color:#9a7b4235; }
:root.light .portal-brand h1,:root.light .portal-topbar p:first-child { color:#5d441d; }
:root.light .portal-brand>p { color:#756e62; }
:root.light .portal-nav-link { color:#565c68; }
:root.light .portal-nav-link:hover { background:#fff8; color:#523d1c; }
:root.light .portal-nav-link[aria-current="page"] { color:#5a411a; background:#e9dec6; }
:root.light .portal-main { background:#f5f2e9; }
:root.light .portal-topbar { border-color:#9a7b4238; background:#f8f4e9e8; }
:root.light .portal-content :is(h1,h2,h3,h4) { color:#674a1d; }
:root.light .portal-content :is(section,article,form,.world-panel) { border-color:#b7aa91; }
:root.light .portal-content :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { border-color:#aaa18f; background:#fffdf8; color:#263747; }
:root.light :is(.portal-content, .world-page, .world-content) :is(.bg-zinc-900,.bg-zinc-950) { background-color:#fffdf8; }
:root.light :is(.portal-content, .world-page, .world-content) :is(.border-zinc-800,.border-zinc-700) { border-color:#b7aa91; }
:root.light .portal-content th { color:#674a1d; }
:root.light .partner-banner-action { background:#fffdf7; border-color:#a98a4e; color:#674a1d; }
:root.light .partner-banner-action:hover { background:#eadbb9; border-color:#795819; color:#543d10; }
:root.light .partner-banner-action:focus-visible { outline:2px solid #795819; outline-offset:2px; }
:root.light .partner-banner-action .text-amber-400 { color:#b45309; }
:root.light .world-language,:root.light .world-theme-switcher { background:#fffdf7; border-color:#b5aa91; }
:root.light .world-language button,:root.light .world-theme-switcher button { color:#536477; }
:root.light .world-topbar { background:rgba(245, 242, 233, 0.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(189, 161, 107, 0.2); color:#263747; }
:root.light .cookie-consent-banner { background:#091520 !important; color:#f4f4f5 !important; }
:root.light .cookie-consent-banner p { color:#cbd5e1 !important; }
:root.light .cookie-consent-banner a { color:#a1a1aa !important; }
:root.light .cookie-consent-banner button:not([class*="bg-gradient"]) { color:#d4d4d8 !important; }
:root.light .cookie-consent-banner [class*="bg-zinc-900"],
:root.light .cookie-consent-banner [class*="bg-zinc-800"] { background-color:#111e29 !important; }
:root.light .cookie-consent-banner .text-zinc-200 { color:#e4e4e7 !important; }
:root.light .cookie-consent-banner .text-zinc-400 { color:#a1a1aa !important; }
@media(min-width:851px){
  :root.light .world-app-main:has(.world-page,.dashboard-world)>.world-topbar {
    background: linear-gradient(90deg, rgba(245,242,233,0.25) 0%, rgba(245,242,233,0.6) calc(var(--world-banner-width) - 5%), #f5f2e9 var(--world-banner-width));
  }
}
:root.light .dashboard-world section:not(.dashboard-story) { background-color:var(--world-paper); }
:root.light .hero-class-card { background:#fff; border-color:#d9b56d; box-shadow:0 8px 24px rgba(0,0,0,0.06); }
:root.light .hero-class-card small { color:#674a1d !important; }
:root.light .hero-class-card h2 { color:#263747 !important; }
:root.light .dashboard-story .backdrop-blur-\[2px\] { background:#fffdf7d9; }
:root.light .dashboard-world .text-white { color:#263747; }
:root.light .dashboard-stat-icon { color: var(--stat-color) !important; filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--stat-color) 25%, transparent)); }
:root.light .world-karma { --karma-accent:#4338ca; --karma-soft:#eeecff; --karma-line:#a9a3e1; }
:root.light .world-karma[data-karma-tier="neutral"] { --karma-accent:#475569; --karma-soft:#edf0f3; --karma-line:#abb6c1; }
:root.light .world-karma[data-karma-tier="honorable"] { --karma-accent:#075985; --karma-soft:#e4f3fa; --karma-line:#8ac0d8; }
:root.light .world-karma[data-karma-tier="saint"] { --karma-accent:#047857; --karma-soft:#e4f5eb; --karma-line:#87c4a3; }
:root.light .world-karma[data-karma-tier="warned"] { --karma-accent:#92400e; --karma-soft:#fcf1d9; --karma-line:#d5ae69; }
:root.light .world-karma[data-karma-tier="outlaw"],
:root.light .world-karma[data-karma-tier="restricted"],
:root.light .world-karma[data-karma-tier="banned"] { --karma-accent:#9f1239; --karma-soft:#fce9eb; --karma-line:#d69aa4; }
:root.light .world-karma .karma-tier-icon,
:root.light .world-karma .karma-tier-title,
:root.light .world-karma .karma-status-icon { color:var(--karma-accent); }
:root.light .world-karma .karma-tier-badge { background:var(--karma-soft); border-color:var(--karma-line); color:var(--karma-accent); }
:root.light .world-karma .karma-status-card { background:linear-gradient(120deg,var(--karma-soft),#fffdf7); border-color:var(--karma-line); }
:root.light .world-karma > .karma-status-card > .karma-status-icon { background:#fffdf7; border-color:var(--karma-line); }
:root.light .world-karma .karma-tier-description { color:#455568; }
:root.light .world-karma .karma-banned-badge { background:#f8dce1; border-color:#cc8794; color:#8b1533; }
:root.light .world-karma .karma-gauge-labels span:nth-child(1) { color:#047857; }
:root.light .world-karma .karma-gauge-labels span:nth-child(2) { color:#075985; }
:root.light .world-karma .karma-gauge-labels span:nth-child(3) { color:#475569; }
:root.light .world-karma .karma-gauge-labels span:nth-child(4) { color:#be123c; }
:root.light .world-karma .karma-gauge-labels span:nth-child(5) { color:#991b1b; }
:root.light .karma-status-filter-active { background:#eadbb9 !important; color:#543d10 !important; border-color:#a98a4e !important; }
:root.light .moderator-tab-active { background:#eadbb9 !important; color:#543d10 !important; border-color:#a98a4e !important; }
:root.light .dashboard-panel-header-icon { background: rgba(121, 88, 25, 0.12) !important; border-color: #c6b68e !important; color: #795819 !important; }
:root.light .dashboard-talent-banner,
:root.light .dashboard-class-banner { background: #fffdf7 !important; border-color: #c6b68e !important; box-shadow: 0 2px 8px rgba(73, 62, 32, 0.05) !important; }
:root.light .dashboard-talent-banner p:first-child { color: #795819 !important; }
:root.light .dashboard-talent-banner p:nth-child(2) { color: #263747 !important; }
:root.light .dashboard-talent-card,
:root.light .dashboard-category-card,
:root.light .profile-category-card { background: #fff !important; border-color: #c6b68e !important; box-shadow: 0 2px 6px rgba(73, 62, 32, 0.06) !important; }
:root.light .profile-category-card:hover { background: #fff !important; border-color: #795819 !important; box-shadow: 0 4px 12px rgba(73, 62, 32, 0.1) !important; }
:root.light .profile-category-card--bonus,
:root.light .profile-category-card--bonus:hover { background: #fff6dd !important; border-color: #98610b !important; box-shadow: inset 0 0 0 1px rgba(152, 97, 11, 0.35), 0 4px 14px rgba(90, 60, 12, 0.14) !important; }
:root.light .profile-category-bonus { color: #70440a; background: #fce4aa; border-color: #a87520; }
:root.light .dashboard-categories-heading { color: #674a1d !important; }
:root.light .dashboard-categories-link { color: #795819 !important; font-weight: 600; }
:root.light .dashboard-categories-link:hover { color: #543d10 !important; text-decoration: underline; }
:root.light .dashboard-talent-card p:nth-of-type(1),
:root.light .dashboard-category-card p:nth-of-type(1) { color: #263747 !important; font-weight: 600; }
:root.light .dashboard-talent-card p:nth-of-type(2) { color: #6d28d9 !important; font-weight: 600; }
:root.light .dashboard-category-card p:nth-of-type(2) { color: #536477 !important; }
:root.light .dashboard-class-eyebrow { color: #795819 !important; }
:root.light .dashboard-class-title { color: #263747 !important; }
:root.light .dashboard-class-quote { color: #536477 !important; }
:root.light .dashboard-hero-quote { color:#795819 !important; }
:root.light .dashboard-class-approved { color: #795819 !important; font-weight: 600; }
:root.light .heroic-overview-link { color:#795819 !important; }
:root.light .heroic-overview-link:hover { color:#543d10 !important; }
:root.light .dashboard-section-subtitle { color: #674a1d !important; }
:root.light .dashboard-class-link { color: #795819 !important; font-weight: 600; }
:root.light .dashboard-class-link:hover { color: #543d10 !important; }
:root.light .dashboard-category-name,
:root.light .profile-category-name { color: #263747 !important; font-weight: 600 !important; }
:root.light .dashboard-category-level { color: #795819 !important; font-weight: 600 !important; }
:root.light .profile-category-level { color: #795819 !important; background: rgba(121, 88, 25, 0.1) !important; border-color: rgba(121, 88, 25, 0.25) !important; }
:root.light .profile-category-meta { color: #637184 !important; }
:root.light .dashboard-category-track,
:root.light .profile-category-track { background: #e2d9c5 !important; }
:root.light .dashboard-category-fill,
:root.light .profile-category-fill { background: linear-gradient(90deg, #d9ae60, #b45309) !important; box-shadow: none !important; }
:root.light .dashboard-tab-group { background: #f4eee0 !important; border-color: #c6b68e !important; box-shadow: 0 2px 6px rgba(73, 62, 32, 0.08) !important; }
:root.light .dashboard-tab-btn { background: #f4eee0 !important; border-color: transparent !important; color: #48596b !important; border-radius: 0 !important; box-shadow: none !important; }
:root.light .dashboard-tab-btn + .dashboard-tab-btn { border-left: 1px solid #c6b68e !important; }
:root.light .dashboard-tab-btn:hover { background: #eae2cf !important; color: #1c2834 !important; }
:root.light .dashboard-tab-btn.is-active { background: linear-gradient(180deg, #ebd9b0, #d8bc7e) !important; color: #382808 !important; font-weight: 800 !important; box-shadow: inset 0 -3px 0 #92702c !important; }
:root.light .dashboard-tab-btn.is-active svg { color: #382808 !important; }
:root.light .dashboard-identity-item small { color:#536477; }
:root.light .dashboard-identity-item strong { color:#674a1d; }
:root.light .dashboard-identity-divider { background:#a98a4e80; }
:root.light .profile-dashboard-identity{background:#fffdf8;border-color:#ac8d51;box-shadow:inset 0 1px #fff,0 9px 24px #493e2015}
:root.light .profile-rank-identity strong>span{border-color:#8e6a2e;background:#d8c08e}
:root.light .profile-moderator-application { background:#fff; }
:root.light .dashboard-action-cta:after { background:#fffdf7; }
:root.light .dashboard-action-cta p { color:#536477; }
:root.light .dashboard-quick-action { background:#fffdf8; border-color:#c6b68e; color:#263747; box-shadow:inset 0 1px #fff,0 5px 16px #493e2012; }
:root.light .dashboard-quick-action--featured { background:#f2e7cf; border-color:#a98a4e; color:#543d10; }
:root.light .dashboard-quick-action:hover { background:#f5eddf; border-color:#92702c; box-shadow:inset 0 1px #fff,0 9px 20px #493e2026; }
:root.light .dashboard-quick-action--featured:hover { background:#e9d9b7; }
:root.light .dashboard-quick-action-icon { background:#f0e4ca; border-color:#cbb487; color:#795819; }
:root.light .dashboard-quick-action-arrow { background:#f7f1e5; border-color:#d7c9ae; color:#795819; }
:root.light .dashboard-quick-action:hover .dashboard-quick-action-arrow { border-color:#92702c; color:#543d10; }
:root.light .dashboard-quick-action--muted { color:#536477; }
:root.light .dashboard-quick-action--muted .dashboard-quick-action-icon { background:#edf0f1; border-color:#b9c2c7; color:#536477; }
:root.light .world-chat-frame { background:#f7f4eb; padding: 0; }
:root.light .world-chat-frame:before { display: none; }
:root.light .world-chat-frame>aside,:root.light .chat-header,:root.light .chat-composer { background:#eee8da; border-color:#c6b68e; }
:root.light .chat-search-results { background:#fffdf7; border-color:#b5a079; }
:root.light .chat-bubble { background:#e6edf0; color:#263747; border-color:#afbec6; }
:root.light .chat-message.is-mine .chat-bubble { background:#ece0bf; color:#463c25; border-color:#b99c5f; }
:root.light .chat-message>p,:root.light .chat-header p { color:#536477; }
:root.light .world-chat-frame aside .chat-conversation.is-selected { background:#e8dfc7; border-color:#bca471; }
:root.light .chat-conversation.is-selected b { color:#674a1d; }
:root.light :is(.chat-avatar,.notification-emblem,.world-medallion) { background:#eee4cb; color:#795819; border-color:#bca471; }
:root.light .xp-guide-table th { background:#e8dec8; color:#674a1d; }
:root.light .xp-guide-table td { border-color:#d5cebb; color:#536477; }
:root.light .xp-guide-table td:first-child { color:#263747; }
:root.light .xp-guide-table td:nth-child(3) { color:#795819; }
:root.light .xp-guide-table tbody tr:nth-child(even) { background:#e8e7df70; }
:root.light :is(.branding-preview,.branding-upload,.guild-branding .branding-preset) { background:#f6f2e6; border-color:#c6b68e; }
:root.light .guild-branding .branding-preset:hover { background:#f0e9d6; border-color:#a4884c; }
:root.light .guild-branding .branding-preset[aria-pressed=true] { background:#e9dcbb; border-color:#92702c; box-shadow: 0 2px 8px rgba(146, 112, 44, 0.2); }
:root.light .guild-heraldic-preview { filter: drop-shadow(0 2px 5px rgba(90, 68, 20, 0.22)) !important; }
:root.light .guild-directory-card.is-member { border-color:transparent; box-shadow:none; }
:root.light .guild-directory-card.guild-stage-0 { background: #faf8f2; border-color: #d6cfbe; }
:root.light .guild-directory-card.guild-stage-1 { background: linear-gradient(140deg, #faf3ea, #f5ebe0); border-color: #c98a54; }
:root.light .guild-directory-card.guild-stage-2 { background: linear-gradient(140deg, #f4f6f9, #eaeff5); border-color: #94a3b8; }
:root.light .guild-directory-card.guild-stage-3 { background: linear-gradient(140deg, #fdf9ee, #f7eed8); border-color: #c5973b; box-shadow: 0 4px 16px rgba(197, 151, 59, 0.15); }
:root.light .guild-directory-card.guild-stage-4 { background: linear-gradient(140deg, #f8f4fd, #ede6fa); border-color: #a855f7; box-shadow: 0 4px 20px rgba(168, 85, 247, 0.2); }
:root.light .guild-directory-card { background: transparent !important; border: 0 !important; box-shadow: none !important; }

/* Admin directory cards use the shared light panel surface, so keep the RPG
   accent colors dark enough to remain legible in bright mode. */
:root.light .admin-guild-card h2 { color: #704b12 !important; }
:root.light .admin-guild-card .text-amber-300\/80,
:root.light .admin-guild-card .text-zinc-200,
:root.light .admin-guild-card .text-zinc-300 { color: #4b4438 !important; }
:root.light .admin-guild-card .text-amber-200 { color: #79510b !important; }
:root.light .admin-guild-card .text-sky-300 { color: #17658b !important; }
:root.light .admin-guild-card .text-emerald-300 { color: #18734c !important; }
:root.light .admin-guild-card .text-purple-200 { color: #70469b !important; }
:root.light .admin-guild-card .text-amber-100 { color: #79510b !important; }
:root.light .admin-guild-card .text-orange-200 { color: #9a4a16 !important; }
:root.light .admin-guild-card .text-zinc-400 { color: #655d50 !important; }
:root.light .admin-guild-card .bg-zinc-900\/60 { background: rgba(255, 255, 255, 0.78) !important; }
:root.light .admin-guild-card .border-zinc-800 { border-color: #d4cbbb !important; }
:root.light .admin-guild-card .border-zinc-800\/80 { border-color: #d4cbbb !important; }
:root.light .guild-directory-emblem.guild-emblem-stage-0 { background: #ede8dc; color: #574c3e; }
:root.light .guild-directory-emblem.guild-emblem-stage-1 { background: #eedfcb; color: #854d0e; border-color: #c98a54; }
:root.light .guild-directory-emblem.guild-emblem-stage-2 { background: #e2e8f0; color: #334155; border-color: #94a3b8; }
:root.light .guild-directory-emblem.guild-emblem-stage-3 { background: #fef3c7; color: #854d0e; border-color: #d97706; }
:root.light .guild-directory-emblem.guild-emblem-stage-4 { background: #f3e8ff; color: #6b21a8; border-color: #a855f7; }
:root.light .guild-map-header-stage-0 { background: #faf8f2 !important; border-color: #d6cfbe !important; }
:root.light .guild-map-header-stage-1 { background: linear-gradient(180deg, #faf3ea, #f5ebe0) !important; border-color: #c98a54 !important; }
:root.light .guild-map-header-stage-2 { background: linear-gradient(180deg, #f4f6f9, #eaeff5) !important; border-color: #94a3b8 !important; }
:root.light .guild-map-header-stage-3 { background: linear-gradient(180deg, #fdf9ee, #f7eed8) !important; border-color: #c5973b !important; }
:root.light .guild-map-header-stage-4 { background: linear-gradient(180deg, #f8f4fd, #ede6fa) !important; border-color: #a855f7 !important; }
:root.light .guild-map-emblem-stage-0 { background: #ede8dc !important; border-color: #d6cfbe !important; }
:root.light .guild-map-emblem-stage-1 { background: #eedfcb !important; border-color: #c98a54 !important; }
:root.light .guild-map-emblem-stage-2 { background: #e2e8f0 !important; border-color: #94a3b8 !important; }
:root.light .guild-map-emblem-stage-3 { background: #fef3c7 !important; border-color: #d97706 !important; }
:root.light .guild-map-emblem-stage-4 { background: #f3e8ff !important; border-color: #a855f7 !important; }
:root.light :is(.guild-membership-banner,.guild-decoration-stage,.guild-decoration-chip) { background:#fffdf7; border-color:#c6b68e; color:#536477; }
:root.light .guild-membership-banner { box-shadow:inset 3px 0 #92702c; }
:root.light :is(.guild-membership-banner h2,.guild-membership-mark,.guild-membership-banner-label) { color:#674a1d; }
:root.light .guild-membership-banner p { color:#536477; }
:root.light .branding-preset>span:last-child { color:#364758; }
:root.light .talents-world .talent-stage { background:transparent; }
:root.light .talents-world .talent-points-label { color:#674a1d; }
:root.light .talents-world .talent-points-value { color:#543d10; }
:root.light .talents-world .talent-points-separator { color:#92702c; }
:root.light .talents-world .talent-points-invested,
:root.light .talents-world .talent-points-progress { color:#536477; }
:root.light .talents-world .talent-path { background:transparent; border:none; box-shadow:none; }
:root.light .talents-world .talent-details { background:#fffdf7; border-color:#b9aa88; color:#263747; }
:root.light .talent-rank-node { color:#374757; }
:root.light .talent-rank-node.is-locked { color:#637080; }
:root.light .talent-rank-node.is-selected { background:transparent!important; border:none!important; box-shadow:none!important; outline:none!important; }
:root.light .talent-rank-node :is(p,small,span) { color:inherit; }
:root.light .world-notice,:root.light .world-notice-info { background:#e8f0f4; color:#285474; border-color:#8cabbf; }
:root.light .world-notice-success { background:#e6f2e8; color:#256340; border-color:#83ab90; }
:root.light .world-notice-error,:root.light .world-error { background:#fbeae7; color:#932d38; border-color:#ce8c93; }
:root.light .guild-story-summary{border-color:#9d7b4055}
:root.light .guild-story-emblem{background:#e9dfc7}
:root.light .guild-story-emblem.has-bronze-frame{background:#d8ba78}
:root.light .guild-story-emblem svg{color:#765721}
:root.light .guild-story-facts small{color:#607080}
:root.light .guild-story-facts strong{color:#654b20}
:root.light .guild-detail-toolbar{border-color:#c9b98f}
:root.light .guild-detail-access{border-color:#559177;background:#e5f1ea;color:#28684e}
:root.light .guild-treasury-state,:root.light .guild-treasury-hero,:root.light .guild-unlock-card{background:#fffdf8;border-color:#bca36d;color:#334456;box-shadow:inset 0 1px 0 #fff}
:root.light .guild-treasury-gem,:root.light .guild-unlock-icon{background:#f8f2e5;border-color:#aa8a4f;color:#75571f}
:root.light .guild-treasury-heading h3,:root.light .guild-treasury-balance strong,:root.light .guild-unlock-copy h5{color:#5e451d}
:root.light .guild-treasury-heading p,:root.light .guild-treasury-notice,:root.light .guild-unlock-copy p,:root.light .guild-treasury-catalog header p{color:#596878}
:root.light .guild-treasury-notice,:root.light .guild-unlock-footer{border-color:#aa8a4f45}
:root.light .guild-treasury-ledger>div{border-color:#baa97f}:root.light .guild-treasury-ledger article,:root.light .guild-treasury-empty{background:#fffdf8;border-color:#d4c8aa}:root.light .guild-treasury-ledger article strong{color:#334456}:root.light .guild-treasury-ledger article p,:root.light .guild-treasury-ledger article small{color:#647182}
:root.light .guild-flyout-backdrop{background:rgba(76,61,32,.20);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
:root.light .guild-flyout-drawer{background:#f5f2e9;box-shadow:0 0 50px rgba(73,62,32,.18)}
:root.light .guild-flyout-header{background:rgba(255,253,247,.96);border-color:#c6b68e80;color:#334456}
:root.light .guild-flyout-header :is(h2,h3,h4,button){color:#4c3b1e}
:root.light .guild-flyout-content{color:#334456;scrollbar-color:#bca36d transparent}
:root.light .guild-treasury-state,:root.light .guild-treasury-hero,:root.light .guild-unlock-card{background:#fff;border-color:#c6b68e;color:#334456;box-shadow:inset 0 1px #ffffff,0 2px 8px rgba(73,62,32,.04)}
:root.light .guild-treasury-hero{box-shadow:inset 0 1px #ffffff,0 3px 12px rgba(73,62,32,.06)}
:root.light .guild-treasury-balance small{color:#667487}
:root.light .guild-treasury-balance span{color:#806323}
:root.light .guild-treasury-notice strong{color:#806021}
:root.light .guild-treasury-catalog .world-eyebrow{color:#806021}
:root.light .guild-treasury-progress{border-color:#bca36d80;background:#f8f2e5;color:#536477}
:root.light .guild-treasury-progress strong{color:#75571f}
:root.light .guild-unlock-card.is-unlocked{background:#fff;border-color:#b99b60}
:root.light .guild-unlock-card.is-locked{filter:none}
:root.light .guild-unlock-price{color:#765719}
:root.light .guild-unlock-status{color:#735718}
:root.light .guild-unlock-status.is-locked{color:#637080}
:root.light .guild-unlock-footer .world-button{color:#674a1d}
:root.light .guild-unlock-footer .world-button:disabled{background:#f0ece3;color:#6b6254;border-color:#c6b68e;opacity:1}
:root.light :is(.guild-section-hero,.guild-stammtisch-header,.guild-news-editor,.guild-news-card){background:#fffdf8;border-color:#bba36e;box-shadow:inset 0 1px #fff}
:root.light :is(.guild-section-hero h3,.guild-stammtisch-header h3,.guild-news-title,.guild-news-editor-heading h4){color:#60481e}
:root.light :is(.guild-section-hero p,.guild-stammtisch-header>span,.guild-news-content,.guild-news-editor label){color:#576779}
:root.light .guild-news-editor input:not([type=checkbox]),:root.light .guild-news-editor select,:root.light .guild-news-editor textarea,:root.light .guild-chat-composer input{background:#fffdf8;border-color:#bcae8d;color:#26394a}
:root.light .guild-empty-state,:root.light .guild-chat-stream{background:#f7f3e9;border-color:#bcae8d}:root.light .guild-empty-state strong{color:#60481e}:root.light .guild-empty-state p{color:#647182}
:root.light .guild-news-card.is-pinned{background:#fff8e6;box-shadow:inset 3px 0 #a9843d}:root.light .guild-news-author{border-color:#bcae8d;color:#697687}:root.light .guild-news-author strong{color:#4c5a68}
:root.light .guild-news-badge{background:#edf0f2;border-color:#8b99a4;color:#334456}
:root.light .guild-news-badge.is-pinned{background:#f1e3bd;border-color:#9d7834;color:#674a1d}
:root.light .guild-news-badge.is-pinned svg{color:currentColor}
:root.light .guild-news-badge.is-announcement{background:#f0e5c9;border-color:#9d7834;color:#674a1d}
:root.light .guild-news-badge.is-event{background:#eee4f3;border-color:#86649b;color:#56366e}
:root.light .guild-stammtisch-icon,:root.light .guild-chat-emotes{background:#f8f2e5;border-color:#aa8a4f}:root.light .guild-chat-emotes .guild-emote-btn{background:rgba(0,0,0,0.04)}:root.light .guild-chat-emotes .guild-emote-btn:hover{background:#eeddb9;border-color:#a78647}:root.light .guild-chat-bubble{background:#fffdf8;border-color:#b9ad92;color:#2d4050}:root.light .guild-chat-message.is-own .guild-chat-bubble{background:#f0e4c9;border-color:#a78647;color:#4b3b22}
/* Guild areas use bespoke dark surfaces outside .world-page. Keep stage,
   flyout tabs and guild administration in the shared beige/white palette. */
:root.light .guild-detail-stage-shell,:root.light .guild-stage-fullscreen{background:#f5f2e9!important}
:root.light .guild-stage-canvas{box-shadow:0 8px 30px rgba(73,62,32,.16)}
:root.light .guild-stage-pill,:root.light .guild-stage-bottombar,:root.light .guild-mobile-nav-panel{background:rgba(255,253,247,.94);border-color:#c6b68e;color:#334456;box-shadow:0 5px 18px rgba(73,62,32,.15)}
:root.light .guild-stage-pill:hover,:root.light .guild-stage-quickbtn:hover{background:#eee5d2;color:#543d10;border-color:#b99b60}
:root.light .guild-stage-quickbtn{color:#536477}
:root.light .guild-stage-quickbtn.is-active,:root.light .guild-mobile-card.is-active{background:#eadbb9;color:#543d10;border-color:#a98a4e;box-shadow:0 2px 8px rgba(73,62,32,.12)}
:root.light .guild-mobile-card{background:#fffdf8;border-color:#c6b68e;color:#334456}
:root.light .guild-stage-tooltip{background:#fffdf8;border-color:#bca36d;color:#334456;box-shadow:0 8px 24px rgba(73,62,32,.18)}
:root.light .guild-stage-tooltip-badge{background:#eadbb9;color:#543d10}
:root.light .guild-flyout-content [class*="bg-zinc-950"],:root.light .guild-flyout-content [class*="bg-zinc-900"],:root.light .guild-flyout-content [class*="bg-slate-900"]{background-color:#fff!important}
:root.light .guild-flyout-content [class*="bg-zinc-800"],:root.light .guild-flyout-content [class*="bg-slate-800"]{background-color:#f1ecdf!important}
:root.light .guild-flyout-content [class*="text-zinc-100"],:root.light .guild-flyout-content [class*="text-zinc-200"],:root.light .guild-flyout-content [class*="text-zinc-300"],:root.light .guild-flyout-content [class*="text-slate-200"],:root.light .guild-flyout-content [class*="text-slate-300"]{color:#334456!important}
:root.light .guild-flyout-content [class*="text-zinc-400"],:root.light .guild-flyout-content [class*="text-zinc-500"],:root.light .guild-flyout-content [class*="text-slate-400"],:root.light .guild-flyout-content [class*="text-slate-500"]{color:#637080!important}
:root.light .guild-flyout-content [class*="text-amber-100"],:root.light .guild-flyout-content [class*="text-amber-200"],:root.light .guild-flyout-content [class*="text-amber-300"]{color:#795819!important}
:root.light .guild-flyout-content [class*="border-zinc-800"],:root.light .guild-flyout-content [class*="border-zinc-700"],:root.light .guild-flyout-content [class*="border-slate-700"]{border-color:#c6b68e!important}
:root.light .guild-flyout-content input:not([type="checkbox"]),:root.light .guild-flyout-content textarea,:root.light .guild-flyout-content select{background-color:#fffdf8;color:#334456;border-color:#bcae8d}
:root.light .guild-section-nav{background:#eee8d9;border-color:#c6b68e}
:root.light .guild-section-nav>a:not(.world-button){color:#536477}
:root.light .guild-section-nav>a:not(.world-button):hover{background:#e5dac1;color:#543d10}
:root.light .guild-section-nav>a[aria-current="page"]{background:#eadbb9;border-color:#a98a4e;color:#543d10}
:root.light .guild-section-feedback{background:#fffdf8;border-color:#bcae8d;color:#334456}
:root.light .guild-section-feedback.is-success{background:#e6f2e8;border-color:#83ab90;color:#256340}
:root.light .guild-section-feedback.is-error{background:#fbeae7;border-color:#ce8c93;color:#932d38}
:root.light .world-modal-overlay>div { background:#fffdf7; color:#263747; border-color:#b9a16d; }
:root.light .gw-dialog { --dialog-accent:#806021; --dialog-tint:#b58a2412; }
:root.light .gw-dialog-danger { --dialog-accent:#a72f45; --dialog-tint:#b82b4510; }
:root.light .world-map-canvas .leaflet-popup-content-wrapper,:root.light .world-map-canvas .leaflet-popup-tip,:root.light .world-map-canvas .leaflet-control-zoom a,:root.light .world-map-canvas .leaflet-control-attribution { background:#fffdf7; color:#263747; }
:root.light .world-map-canvas .leaflet-control-attribution a { color:#70521b; }
@media(max-width:850px) { :root.light .world-story:after { background:linear-gradient(180deg,rgba(245,242,233,0.2),#f5f2e9) !important; } }
:root.light .world-sidebar { background:#f5f2e9 !important; border-color:#c6b68e50 !important; box-shadow:8px 0 25px rgba(73, 62, 32, 0.08) !important; }
:root.light .world-sidebar:before { background:linear-gradient(180deg, #fffdf7, #f3ede0) !important; }
:root.light .world-sidebar :is(a,button,h1) { color:#3d4e60 !important; }
:root.light .world-sidebar-tagline { color:#795819; }
:root.light .world-sidebar svg { color:#536477 !important; }
:root.light .world-sidebar :is(a,button):hover { color:#1c2834 !important; background:rgba(121, 88, 25, 0.08) !important; }
:root.light .world-sidebar :is(a,button):hover svg { color:#795819 !important; }
:root.light .world-sidebar a[aria-current=page] { color:#674a1d !important; background:linear-gradient(90deg, rgba(217, 174, 96, 0.35), rgba(217, 174, 96, 0.15)) !important; border-color:#d9ae60a0 !important; font-weight:700 !important; }
:root.light .world-sidebar a[aria-current=page] svg { color:#795819 !important; }

/* Player Progress Widget in Light Mode */
:root.light .player-progress-widget { color:#263747 !important; }
:root.light .player-progress-level { color:#674a1d !important; }
:root.light .player-progress-xp { color:#0284c7 !important; font-weight:600 !important; }
:root.light .player-progress-next { color:#536477 !important; }
:root.light .player-progress-bar-track { background:#e2d9c5 !important; }
:root.light .player-progress-bar-fill { background:linear-gradient(90deg, #0284c7, #0369a1) !important; }

/* World Gold & Dashboard Identity Banner in Light Mode */
:root.light .world-gold:before { background:#fff !important; }
:root.light .dashboard-identity-header { border-color:#c6b68e !important; box-shadow:0 4px 18px rgba(73, 62, 32, 0.08) !important; }
:root.light .dashboard-identity-divider { background:#c6b68e !important; }
:root.light .dashboard-action-cta:after { background:none !important; border-color: rgba(198, 182, 142, 0.4) !important; }
:root.light .dashboard-action-cta:before { background:linear-gradient(90deg,#fffdf7 0%,rgba(255,253,247,0.88) 45%,rgba(255,253,247,0.25) 100%),linear-gradient(0deg,rgba(255,253,247,0.6),transparent) !important; }
:root.light :is(.talent-rank-node strong,.talent-rank-node.is-selected strong,.talent-tier-connection small,.talent-rank-prerequisite) { color:#4e455f; }
:root.light .talent-rank-node.is-locked strong { color:#637080; }
:root.light :is(.mechanics-page,.classes-page) { background:var(--world-paper); color:var(--world-ink); }
:root.light :is(.mechanics-info,.mechanics-step,.mechanics-perk,.mechanics-notes .mechanics-info,.guild-member-chip,.evidence-type-option,.review-evidence-card) { background:var(--world-surface); color:var(--world-ink); border-color:var(--world-line); }
:root.light :is(.mechanics-page,.classes-page,.mechanics-info,.mechanics-step,.mechanics-perk) :is(h1,h2,h3,h4) { color:#674a1d; }
:root.light :is(.mechanics-page,.classes-page,.mechanics-info,.mechanics-step,.mechanics-perk) p { color:#536477; }
:root.light .mechanics-abuse-banner .mechanics-info { background:#fdf2f2; border-color:#fca5a5; }
:root.light .mechanics-abuse-banner .mechanics-info-icon { color:#b91c1c; }
:root.light .mechanics-abuse-banner .mechanics-info h2 { color:#991b1b; }

/* World Error Page & Pixel Art Showcase in Light Mode */
:root.light .world-error-page {
  background: radial-gradient(ellipse at top, rgba(217, 174, 96, 0.3), transparent 70%), linear-gradient(135deg, #fffdf8, #f5efe2) !important;
  color: #3b2c15 !important;
  border-color: #c6b68e !important;
  box-shadow: 0 20px 60px rgba(103, 74, 29, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

:root.light .world-error-glow {
  background: radial-gradient(circle, rgba(217, 119, 6, 0.2) 0%, rgba(217, 174, 96, 0.08) 55%, transparent 75%) !important;
}

:root.light .world-error-orbit {
  border-color: #c6b68e !important;
  background: linear-gradient(135deg, #fffdf8, #eee6d3) !important;
  box-shadow: 0 8px 30px rgba(121, 88, 25, 0.15), inset 0 0 15px rgba(217, 174, 96, 0.2) !important;
}

:root.light .world-error-pixel-art {
  border-color: #c6b68e !important;
  box-shadow: 0 4px 12px rgba(121, 88, 25, 0.12) !important;
}

:root.light .world-error-icon {
  color: #795819 !important;
}

:root.light .world-error-sparkle {
  color: #966f1f !important;
  filter: drop-shadow(0 0 4px rgba(150, 111, 31, 0.4)) !important;
}

:root.light .world-error-page h1 {
  color: #593c10 !important;
  text-shadow: none !important;
}

:root.light .world-error-page p {
  color: #536477 !important;
}

:root.light .world-error-page .world-eyebrow {
  color: #795819 !important;
}

:root.light .world-error-page .world-divider {
  color: #c6b68e !important;
}

:root.light .world-error-page .world-divider::before,
:root.light .world-error-page .world-divider::after {
  background: linear-gradient(90deg, transparent, rgba(198, 182, 142, 0.8), transparent) !important;
}

:root.light .world-error-page .world-button {
  background: linear-gradient(180deg, #fffdfa 0%, #f4ebd9 100%) !important;
  border-color: #c6b68e !important;
  color: #674a1d !important;
  box-shadow: 0 2px 8px rgba(103, 74, 29, 0.08) !important;
}

:root.light .world-error-page .world-button:hover {
  background: linear-gradient(180deg, #fbf4e6 0%, #ede0c7 100%) !important;
  border-color: #a89462 !important;
  color: #4a3517 !important;
  box-shadow: 0 4px 12px rgba(103, 74, 29, 0.15) !important;
}

:root.light .world-error-page .world-button-primary {
  background: linear-gradient(180deg, #f7ebd4 0%, #e9d3a7 100%) !important;
  border-color: #bfa56a !important;
  color: #4a3517 !important;
  font-weight: 600 !important;
}

:root.light .world-error-page .world-button-primary:hover {
  background: linear-gradient(180deg, #f3e2bf 0%, #dec28d 100%) !important;
  border-color: #a88d50 !important;
  color: #3b280d !important;
}

:root.light .world-error-page .world-more {
  color: #6d6182 !important;
}

:root.light .world-error-page .world-more:hover {
  color: #4a3517 !important;
}


/* Public layout & Landing page light mode support */
:root.light .public-shell,
:root.light .landing-page,
:root.light .mechanics-page {
  background: var(--world-paper) !important;
  color: var(--world-ink) !important;
}

/* Mechanics Page in Light Mode */
:root.light .mechanics-title {
  color: #263747 !important;
}

:root.light .mechanics-title span {
  color: #795819 !important;
  background: transparent !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: initial !important;
}

:root.light .mechanics-subtitle {
  color: #536477 !important;
}

:root.light .mechanics-section-title {
  color: #263747 !important;
}

:root.light .mechanics-chip {
  background: #fffdf8 !important;
  border-color: #bda16b50 !important;
  color: #536477 !important;
  box-shadow: 0 1px 4px rgba(73, 62, 32, 0.06) !important;
}

:root.light .mechanics-chip:hover {
  background: #ede6d7 !important;
  border-color: #92702c !important;
  color: #674a1d !important;
}

:root.light .mechanics-chip span {
  color: inherit !important;
}

:root.light .mechanics-chip svg {
  color: #795819 !important;
}

:root.light .mechanics-card {
  background: #fffdf8 !important;
  border-color: #bda16b45 !important;
  color: var(--world-ink) !important;
  box-shadow: 0 4px 18px rgba(73, 62, 32, 0.08) !important;
}

:root.light .mechanics-card:hover {
  border-color: #92702c !important;
  box-shadow: 0 10px 28px rgba(73, 62, 32, 0.14) !important;
}

:root.light .mechanics-card h2,
:root.light .mechanics-card h3 {
  color: #674a1d !important;
}

:root.light .mechanics-card p {
  color: #536477 !important;
}

:root.light .mechanics-card span.font-light {
  color: #a4823d !important;
}

:root.light .mechanics-card .border-t {
  border-color: #bda16b30 !important;
}

:root.light .mechanics-card .border-t span {
  color: #795819 !important;
  font-weight: 500 !important;
}

:root.light .mechanics-step-badge {
  background: #f8f2e5 !important;
  border-color: #c2a46a80 !important;
  color: #75571f !important;
  box-shadow: 0 2px 8px rgba(73, 62, 32, 0.08) !important;
}

:root.light .mechanics-step-badge svg {
  color: #75571f !important;
}

/* Topic badges */
:root.light .mechanics-card .border-emerald-500\/40 {
  background: #e6f4ea !important;
  border-color: #82c79b !important;
  color: #1e6b37 !important;
}
:root.light .mechanics-card .border-emerald-500\/40 svg {
  color: #1e6b37 !important;
}
:root.light .mechanics-card span.text-emerald-400 {
  background: #e6f4ea !important;
  border-color: #82c79b !important;
  color: #1e6b37 !important;
}

:root.light .mechanics-card .border-sky-500\/40 {
  background: #e8f4fc !important;
  border-color: #8ac4ea !important;
  color: #1b6392 !important;
}
:root.light .mechanics-card .border-sky-500\/40 svg {
  color: #1b6392 !important;
}
:root.light .mechanics-card span.text-sky-400 {
  background: #e8f4fc !important;
  border-color: #8ac4ea !important;
  color: #1b6392 !important;
}

:root.light .mechanics-card .border-purple-400\/40 {
  background: #f4ecfb !important;
  border-color: #c8a2e8 !important;
  color: #5c248c !important;
}
:root.light .mechanics-card .border-purple-400\/40 svg {
  color: #5c248c !important;
}
:root.light .mechanics-card span.text-purple-400 {
  background: #f4ecfb !important;
  border-color: #c8a2e8 !important;
  color: #5c248c !important;
}

/* Perks */
:root.light .mechanics-card .border-\[\#7c3aed\]\/30 {
  background: #f3ecfb !important;
  border-color: #bca4db !important;
}
:root.light .mechanics-card span.border-\[\#d9b56d\]\/20 {
  background: #f8f2e5 !important;
  border-color: #cbb892 !important;
  color: #795819 !important;
}

/* Privacy & Notes tags */
:root.light .mechanics-card .border-teal-500\/40 {
  background: #e6f6f5 !important;
  border-color: #7ecec9 !important;
  color: #166e69 !important;
}
:root.light .mechanics-card .border-teal-500\/40 svg {
  color: #166e69 !important;
}
:root.light .mechanics-card span.bg-teal-950\/40 {
  background: #e6f6f5 !important;
  border-color: #7ecec9 !important;
  color: #166e69 !important;
}

:root.light .mechanics-card .border-amber-500\/40 {
  background: #fef7e6 !important;
  border-color: #e5cb87 !important;
  color: #8c5d14 !important;
}
:root.light .mechanics-card .border-amber-500\/40 svg {
  color: #8c5d14 !important;
}
:root.light .mechanics-card span.bg-amber-950\/40 {
  background: #fef7e6 !important;
  border-color: #e5cb87 !important;
  color: #8c5d14 !important;
}

:root.light .mechanics-abuse-card {
  background: #fff5f5 !important;
  border-color: #fca5a5 !important;
  box-shadow: 0 4px 20px rgba(225, 29, 72, 0.08) !important;
}

:root.light .mechanics-abuse-card .border-rose-500\/40 {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}
:root.light .mechanics-abuse-card .border-rose-500\/40 svg {
  color: #b91c1c !important;
}

:root.light .mechanics-abuse-card span.text-rose-400 {
  color: #991b1b !important;
}

:root.light .mechanics-abuse-card h2 {
  color: #991b1b !important;
}

:root.light .mechanics-abuse-card p {
  color: #7f1d1d !important;
}

:root.light .mechanics-cta-section {
  background: #fffdf8 !important;
  border-color: #bda16b45 !important;
  box-shadow: 0 8px 30px rgba(73, 62, 32, 0.08) !important;
}

:root.light .mechanics-cta-section h2 {
  color: #263747 !important;
}

:root.light .mechanics-cta-section p {
  color: #536477 !important;
}

:root.light .public-shell {
  background: var(--world-paper) !important;
  color: var(--world-ink) !important;
}

:root.light .public-header {
  background: #f5f2e9ed !important;
  border-color: #bda16b35 !important;
}

:root.light .public-login-btn {
  background: #fffdf8 !important;
  color: #674a1d !important;
  border-color: #bda16b !important;
}

:root.light .public-login-btn:hover {
  background: #ede6d6 !important;
  color: #543d10 !important;
}

:root.light .public-brand-title {
  color: #674a1d !important;
}

:root.light .public-nav-link {
  color: #536477 !important;
}

:root.light .public-nav-link:hover {
  color: #263747 !important;
}

:root.light .public-nav-link.active,
:root.light .public-nav-link[aria-current="page"] {
  color: #674a1d !important;
}

:root.light .public-mobile-drawer {
  background: #f5f2e9f8 !important;
  border-color: #bda16b35 !important;
}

:root.light .public-footer {
  background: var(--world-paper) !important;
  border-color: #bda16b35 !important;
  color: #536477 !important;
}

:root.light .public-footer a {
  color: #536477 !important;
}

:root.light .public-footer a:hover {
  color: #674a1d !important;
}

:root.light .landing-hero {
  background: var(--world-paper) !important;
  border-color: #bda16b35 !important;
}

:root.light .landing-hero h1 {
  color: #263747 !important;
}

:root.light .landing-hero p {
  color: #536477 !important;
}

:root.light .landing-role-card {
  background: #fffdf8 !important;
  border-color: #bda16b45 !important;
  color: var(--world-ink) !important;
  box-shadow: 0 4px 18px #493e2010 !important;
}

:root.light .landing-role-card:hover {
  border-color: #92702c !important;
  box-shadow: 0 10px 28px #493e201c !important;
}

:root.light .landing-role-card h2 {
  color: #674a1d !important;
}

:root.light .landing-role-card p {
  color: #536477 !important;
}

:root.light .landing-principles-section {
  background: #eee8db !important;
  border-color: #bda16b35 !important;
}

:root.light .landing-principles-section h2 {
  color: #263747 !important;
}

:root.light .landing-principles-section p {
  color: #536477 !important;
}

:root.light .landing-principle-card {
  background: #fffdf8 !important;
  border-color: #bda16b45 !important;
  color: var(--world-ink) !important;
  box-shadow: 0 2px 10px #493e200c !important;
}

:root.light .landing-principle-card:hover {
  border-color: #92702c !important;
}

:root.light .landing-principle-card p {
  color: #263747 !important;
}

:root.light .landing-cta-section h2 {
  color: #263747 !important;
}

:root.light .mechanics-section-link {
  color: #674a1d !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

:root.light .mechanics-section-link:hover {
  color: #3f2d11 !important;
}

/* Landing Classes component in light mode */
:root.light .landing-classes {
  background: var(--world-paper) !important;
  border-color: #bda16b35 !important;
  color: var(--world-ink) !important;
}

:root.light .landing-classes-heading h2 {
  color: #674a1d !important;
}

:root.light .landing-classes-heading > p:last-child {
  color: #536477 !important;
}

:root.light .landing-class-picker button {
  color: #536477;
}

:root.light .landing-class-picker button[aria-pressed=true] {
  color: #795819;
}

:root.light .landing-class-stage {
  border-color: #c3a26560;
  box-shadow: 0 16px 40px rgba(73, 62, 32, 0.10);
  background: #fbf9f4;
}

:root.light .landing-class-shade {
  background: linear-gradient(270deg, #fbf9f4 0%, #fbf9f4 35%, rgba(251, 249, 244, 0.88) 48%, rgba(251, 249, 244, 0.35) 65%, transparent 80%),
              linear-gradient(0deg, rgba(251, 249, 244, 0.5) 0%, transparent 40%);
}

:root.light .landing-class-role {
  color: #795819;
}

:root.light .landing-class-content h3 {
  color: #263747;
}

:root.light .landing-class-line {
  color: #536477;
}

:root.light .landing-class-perk {
  background: #ffffffeb;
  border-color: #cbb892;
  box-shadow: 0 2px 8px rgba(73, 62, 32, 0.05);
}

:root.light .landing-class-perk > svg {
  color: #795819;
}

:root.light .landing-class-perk h4 {
  color: #674a1d;
}

:root.light .landing-class-perk p {
  color: #536477;
}

:root.light .landing-class-notice {
  color: #536477;
}

:root.light .landing-class-link {
  color: #795819;
  border-color: #dab87480;
}

:root.light .landing-class-link:hover {
  color: #543d10;
  border-color: #795819;
}

:root.light .landing-class-number {
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.9);
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(4px);
}

:root.light .landing-class-number span {
  color: rgba(255, 255, 255, 0.82);
}

:root.light .landing-class-hint {
  color: #6b7280;
}

@media(max-width: 850px) {
  :root.light .landing-class-shade {
    background: linear-gradient(270deg, #fbf9f4 0%, #fbf9f4 45%, rgba(251, 249, 244, 0.85) 60%, rgba(251, 249, 244, 0.25) 75%, transparent 90%);
  }
}

@media(max-width: 600px) {
  :root.light .landing-class-shade {
    background: linear-gradient(0deg, #fbf9f4 0%, #fbf9f4 45%, rgba(251, 249, 244, 0.75) 65%, transparent 90%);
  }
}

/* Mechanics page light mode */
:root.light .mechanics-page {
  background: var(--world-paper) !important;
  color: var(--world-ink) !important;
}

:root.light .mechanics-title {
  color: #263747 !important;
}

:root.light .mechanics-title span {
  color: #795819 !important;
  background: transparent !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: initial !important;
}

:root.light .mechanics-subtitle {
  color: #536477 !important;
}

:root.light .mechanics-chip {
  background: #fffdf8 !important;
  border-color: #c6b68e !important;
  color: #536477 !important;
  box-shadow: 0 1px 4px rgba(73, 62, 32, 0.08) !important;
}

:root.light .mechanics-chip:hover {
  background: #eee6d4 !important;
  border-color: #92702c !important;
  color: #543d10 !important;
}

:root.light .mechanics-chip svg {
  color: #795819 !important;
}

:root.light .mechanics-page section p {
  color: #536477;
}

:root.light .mechanics-card {
  background: #fffdf8 !important;
  border-color: #cbb993 !important;
  color: var(--world-ink) !important;
  box-shadow: 0 4px 18px rgba(73, 62, 32, 0.08) !important;
}

:root.light .mechanics-card:hover {
  border-color: #92702c !important;
  box-shadow: 0 10px 28px rgba(73, 62, 32, 0.14) !important;
}

:root.light .mechanics-card h2,
:root.light .mechanics-card h3 {
  color: #674a1d !important;
}

:root.light .mechanics-card p {
  color: #536477 !important;
}

:root.light .mechanics-card span.font-serif {
  color: #bfa063 !important;
}

:root.light .mechanics-step-badge {
  background: #f7efe0 !important;
  border-color: #cbb892 !important;
  color: #795819 !important;
}

:root.light .mechanics-step-badge svg {
  color: #795819 !important;
}

:root.light .mechanics-page .bg-emerald-950\/40 {
  background-color: #d1fae5 !important;
  color: #065f46 !important;
  border-color: #a7f3d0 !important;
}

:root.light .mechanics-page .bg-sky-950\/40 {
  background-color: #e0f2fe !important;
  color: #0369a1 !important;
  border-color: #bae6fd !important;
}

:root.light .mechanics-page .bg-purple-950\/40 {
  background-color: #f3e8ff !important;
  color: #6b21a8 !important;
  border-color: #e9d5ff !important;
}

:root.light .mechanics-page .bg-teal-950\/40 {
  background-color: #ccfbf1 !important;
  color: #115e59 !important;
  border-color: #99f6e4 !important;
}

:root.light .mechanics-page .bg-amber-950\/40 {
  background-color: #fef3c7 !important;
  color: #92400e !important;
  border-color: #fde68a !important;
}

:root.light .mechanics-page .bg-\[\#24134b\]\/30 {
  background-color: #ede5f8 !important;
  border-color: #c4b5fd !important;
}

:root.light .mechanics-page .border-\[\#344857\]\/50 {
  border-color: #c6b68e50 !important;
}

:root.light .mechanics-abuse-card {
  background: #fff2f1 !important;
  border-color: #e5a3a9 !important;
  box-shadow: 0 4px 20px rgba(225, 29, 72, 0.08) !important;
}

:root.light .mechanics-abuse-card h2 {
  color: #9a293c !important;
}

:root.light .mechanics-abuse-card p {
  color: #6c2331 !important;
}

:root.light .mechanics-abuse-card span {
  color: #b91c1c !important;
}

:root.light .mechanics-cta-section {
  background: #fbf7ee !important;
  border-color: #cbb993 !important;
  box-shadow: 0 6px 24px rgba(73, 62, 32, 0.09) !important;
}

:root.light .mechanics-cta-section h2 {
  color: #263747 !important;
}

:root.light .mechanics-cta-section p {
  color: #536477 !important;
}

/* Classes & Ranks page light mode */
:root.light .classes-page {
  background: var(--world-paper) !important;
  color: var(--world-ink) !important;
}

:root.light .mechanics-heading {
  border-bottom-color: #c6b68e50 !important;
}

:root.light .mechanics-heading h1 {
  color: #263747 !important;
}

:root.light .mechanics-heading p {
  color: #536477 !important;
}

:root.light .mechanics-nav a {
  background: #fffdf8 !important;
  border-color: #c6b68e !important;
  color: #536477 !important;
  box-shadow: 0 1px 4px rgba(73, 62, 32, 0.08) !important;
}

:root.light .mechanics-nav a:hover {
  background: #eee6d4 !important;
  border-color: #92702c !important;
  color: #543d10 !important;
}

:root.light .mechanics-nav a svg {
  color: #795819 !important;
}

:root.light .mechanics-section-heading {
  color: #795819 !important;
}

:root.light .mechanics-section-heading h2 {
  color: #674a1d !important;
}

:root.light .mechanics-section-heading svg {
  color: #795819 !important;
}

:root.light .mechanics-section-heading > span {
  background: #c6b68e !important;
}

:root.light .classes-intro {
  color: #536477 !important;
}

:root.light .class-guide-card {
  background: #fffdf8 !important;
  border-color: #cbb892 !important;
  box-shadow: 0 4px 18px rgba(73, 62, 32, 0.08) !important;
}

:root.light .class-guide-card:hover {
  border-color: var(--class-accent) !important;
  box-shadow: 0 10px 28px rgba(73, 62, 32, 0.14) !important;
}

:root.light .class-guide-icon img {
  filter: drop-shadow(0 4px 10px rgba(73, 62, 32, 0.20)) !important;
}

:root.light .class-guide-heading h3 {
  color: #674a1d !important;
}

:root.light .class-guide-heading p {
  color: #536477 !important;
}

:root.light .class-guide-perk {
  border-top-color: #c6b68e55 !important;
}

:root.light .class-guide-perk > span {
  color: #795819 !important;
  font-weight: 600;
}

:root.light .class-guide-perk p,
:root.light .class-guide-perk-item {
  color: #536477 !important;
}

:root.light .class-guide-perk-item strong {
  color: #674a1d !important;
}

:root.light .classes-rank-intro small {
  background: #fffdf8 !important;
  border-color: #c6b68e !important;
  color: #795819 !important;
}

:root.light .rank-guide-card {
  background: #fffdf8 !important;
  border-color: #cbb892 !important;
  box-shadow: 0 4px 16px rgba(73, 62, 32, 0.07) !important;
}

:root.light .rank-guide-card:hover {
  border-color: #92702c !important;
  box-shadow: 0 8px 24px rgba(73, 62, 32, 0.12) !important;
}

:root.light .rank-guide-card h3 {
  color: #674a1d !important;
}

:root.light .rank-guide-card p {
  color: #536477 !important;
}

:root.light .rank-guide-card > svg {
  color: #92702c !important;
}

:root.light .rank-legend {
  border-color: #d9b56d !important;
  background: #fffdf8 !important;
  box-shadow: 0 6px 24px rgba(217, 181, 109, 0.22) !important;
}

:root.light .rank-legend > svg {
  color: #92702c !important;
  fill: #92702c !important;
}

:root.light .classes-note {
  background: #fffdf8 !important;
  border-color: #cbb892 !important;
  box-shadow: 0 4px 18px rgba(73, 62, 32, 0.08) !important;
}

:root.light .classes-note h2 {
  color: #674a1d !important;
}

:root.light .classes-note p {
  color: #536477 !important;
}

/* General mechanics flow/step light mode support */
:root.light .mechanics-step {
  background: #fffdf8 !important;
  border-color: #cbb892 !important;
  box-shadow: 0 4px 18px rgba(73, 62, 32, 0.08) !important;
}

:root.light .mechanics-step-icon {
  border-color: #cbb892 !important;
  color: #795819 !important;
  background: #f7efe0 !important;
}

:root.light .mechanics-step-number {
  color: #c3a466 !important;
}

:root.light .mechanics-step h2 {
  color: #674a1d !important;
}

:root.light .mechanics-step p,
:root.light .mechanics-info p,
:root.light .mechanics-perk p {
  color: #536477 !important;
}

:root.light .mechanics-info {
  background: #fffdf8 !important;
  border-color: #cbb892 !important;
}

:root.light .mechanics-info-icon {
  color: #795819 !important;
}

:root.light .mechanics-perk {
  background: #fffdf8 !important;
  border-color: #cbb892 !important;
}

:root.light .mechanics-talent-icon {
  border-color: #c4b5fd !important;
  background: #ede5f8 !important;
}

:root.light .mechanics-perk h3 {
  color: #674a1d !important;
}

/* Auth pages (Login & Register) light mode */
:root.light .auth-page {
  background: var(--world-paper) !important;
  color: var(--world-ink) !important;
}

:root.light .auth-brand-title {
  color: #674a1d !important;
}

:root.light .auth-eyebrow {
  color: #795819 !important;
}

:root.light .auth-title {
  color: #263747 !important;
}

:root.light .auth-title span {
  color: #795819 !important;
  background: transparent !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: initial !important;
}

:root.light .auth-subtitle {
  color: #536477 !important;
}

:root.light .auth-card {
  background: #fffdf8 !important;
  border-color: #cbb993 !important;
  color: var(--world-ink) !important;
  box-shadow: 0 12px 40px rgba(73, 62, 32, 0.12) !important;
}

:root.light .auth-label {
  color: #674a1d !important;
}

:root.light .auth-input {
  background: #fffdf8 !important;
  border-color: #c6b68e !important;
  color: #263747 !important;
}

:root.light .auth-input:focus {
  border-color: #92702c !important;
  outline-color: #92702c !important;
}

:root.light .auth-input::placeholder {
  color: #8c97a4 !important;
}

:root.light select.auth-input option {
  background: #fffdf8 !important;
  color: #263747 !important;
}

:root.light .auth-role-btn {
  background: #fffdf8 !important;
  border-color: #cbb993 !important;
  color: var(--world-ink) !important;
  box-shadow: 0 2px 8px rgba(73, 62, 32, 0.05) !important;
}

:root.light .auth-role-btn:hover {
  border-color: #92702c !important;
  background: #f7efe0 !important;
}

:root.light .auth-role-btn.is-active {
  background: #fffdf8 !important;
  border-color: #92702c !important;
  box-shadow: 0 4px 20px rgba(146, 112, 44, 0.18) !important;
}

:root.light .auth-role-btn .font-serif {
  color: #263747 !important;
}

:root.light .auth-role-btn span {
  color: #536477;
}

:root.light .auth-role-btn .bg-\[\#d9b56d\]\/20 {
  background-color: #eee2c5 !important;
  border-color: #cbb892 !important;
  color: #795819 !important;
}

:root.light .auth-role-btn .bg-\[\#07131d\] {
  background-color: #f7efe0 !important;
  border-color: #d8ceb8 !important;
  color: #795819 !important;
}

:root.light .auth-page .bg-\[\#0a1b27\]\/80 {
  background-color: #f7efe0 !important;
  border-color: #cbb892 !important;
  color: #536477 !important;
}

:root.light .auth-page .bg-\[\#0a1b27\]\/80 b {
  color: #674a1d !important;
}

:root.light .auth-page .bg-amber-950\/20 {
  background-color: #fef3c7 !important;
  border-color: #fde68a !important;
  color: #92400e !important;
}

:root.light .auth-page .bg-amber-950\/20 b {
  color: #78350f !important;
}

/* Bright registration: readable map controls and review notice. */
:root.light .location-picker-title {
  color: #263747 !important;
  font-size: 0.95rem;
  line-height: 1.4;
}

:root.light .location-picker-hint,
:root.light .location-picker-status {
  color: #536477 !important;
  font-size: 0.875rem;
  line-height: 1.5;
}

:root.light .location-picker-map {
  border-color: #c6b68e !important;
  border-radius: 0.75rem;
}

:root.light .location-picker-controls {
  background: rgba(255, 253, 247, 0.96) !important;
  border-color: #c6b68e !important;
  box-shadow: 0 8px 24px rgba(38, 55, 71, 0.16) !important;
}

:root.light .location-picker-button {
  min-height: 2.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 600;
}

:root.light .location-picker-button-secondary {
  background: #fffdf8 !important;
  border-color: #b7aa91 !important;
  color: #263747 !important;
}

:root.light .location-picker-button-secondary:hover:not(:disabled) {
  background: #f4ecdc !important;
  border-color: #92702c !important;
}

:root.light .location-picker-button-secondary svg {
  color: #795819 !important;
}

:root.light .location-picker-button-primary {
  background: #795819 !important;
  border-color: #674a1d !important;
  color: #fffdf8 !important;
  box-shadow: 0 3px 10px rgba(73, 62, 32, 0.16) !important;
}

:root.light .location-picker-button-primary:hover:not(:disabled) {
  background: #674a1d !important;
  border-color: #543d10 !important;
  color: #ffffff !important;
}

:root.light .location-picker-button-primary svg {
  color: currentColor !important;
}

:root.light .location-picker-button:focus-visible,
:root.light .location-picker .leaflet-control-zoom a:focus-visible {
  outline: 2px solid #795819 !important;
  outline-offset: 2px;
}

:root.light .location-picker .leaflet-control-zoom a {
  background: #fffdf8 !important;
  color: #263747 !important;
  border-color: #c6b68e !important;
}

:root.light .location-picker .leaflet-control-zoom a:hover {
  background: #f4ecdc !important;
  color: #674a1d !important;
}

:root.light .auth-review-notice {
  background: #fbf1d8 !important;
  border-color: #d8b977 !important;
}

:root.light .auth-review-notice > svg {
  color: #795819 !important;
}

:root.light .auth-review-notice p {
  color: #61491f !important;
  font-size: 0.875rem;
  line-height: 1.55;
}

:root.light .auth-review-notice b {
  color: #48320e !important;
}

:root.light .auth-page .bg-\[\#2a1218\]\/90 {
  background-color: #fff2f1 !important;
  border-color: #fecdd3 !important;
}

:root.light .auth-page .bg-\[\#2a1218\]\/90 p {
  color: #9f1239 !important;
}

:root.light .auth-page .bg-\[\#0a231b\]\/90 {
  background-color: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
}

:root.light .auth-page .bg-\[\#0a231b\]\/90 p {
  color: #065f46 !important;
}

:root.light .auth-page .bg-\[\#241c10\]\/90 {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
}

:root.light .auth-page .bg-\[\#241c10\]\/90 p {
  color: #92400e !important;
}

:root.light .auth-page .border-t {
  border-top-color: #c6b68e50 !important;
}

:root.light .auth-switch-link {
  color: #536477 !important;
}

:root.light .auth-switch-link a {
  color: #795819 !important;
}

:root.light .auth-switch-link a:hover {
  color: #543d10 !important;
}

/* Enforce NO gradients in Bright / Light mode across all components and utility classes */
:root.light .world-button-primary,
:root.light a[href="/register"]:not(.auth-switch-link a),
:root.light button[class*="bg-gradient"],
:root.light .gw-dialog-primary {
  background-image: none !important;
  background-color: #795819 !important;
  color: #ffffff !important;
  border-color: #543d10 !important;
}

:root.light .world-button-primary:hover,
:root.light a[href="/register"]:not(.auth-switch-link a):hover,
:root.light button[class*="bg-gradient"]:hover,
:root.light .gw-dialog-primary:hover {
  background-image: none !important;
  background-color: #543d10 !important;
  border-color: #382708 !important;
  color: #ffffff !important;
}

:root.light .gw-dialog {
  background-image: none !important;
  background-color: #fffdf7 !important;
  color: #263747 !important;
  border-color: #bda16b !important;
}

:root.light .gw-dialog-content {
  background-image: none !important;
  background-color: #fffdf7 !important;
}

:root.light .gw-dialog-secondary {
  background-image: none !important;
  background-color: #f8f4e9 !important;
  color: #344451 !important;
  border-color: #b7aa91 !important;
}

:root.light :is(.bg-clip-text, [class*="bg-clip-text"]) {
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: #795819 !important;
  -webkit-text-fill-color: #795819 !important;
}

:root.light :is([class*="bg-gradient"], .bg-gradient-to-r, .bg-gradient-to-l, .bg-gradient-to-t, .bg-gradient-to-b, .bg-gradient-to-tr, .bg-gradient-to-br, .bg-gradient-to-tl, .bg-gradient-to-bl) {
  background-image: none !important;
}

:root.light :is(.h-px, .w-px)[class*="bg-gradient"] {
  background-color: #c6b68e !important;
}

/* ==========================================================================
   TALENTS PAGE & EVENTS LIGHT MODE OVERRIDES
   ========================================================================== */

/* GoldBanner & Progress on Talents & Events */
:root.light .world-gold .text-amber-200 {
  color: #795819 !important;
}
:root.light .world-gold .border-amber-200\/20 {
  border-color: #c6b68e !important;
}
:root.light .world-gold progress {
  background: #e2d9c5 !important;
}

/* Branch Filter Tab Bar on Talents Page */
:root.light .talent-branch-filter-bar {
  background: #fffdf7 !important;
  border-color: #c6b68e !important;
  box-shadow: 0 2px 8px rgba(73, 62, 32, 0.05) !important;
}
:root.light .talent-filter-btn {
  color: #536477 !important;
}
:root.light .talent-filter-btn:hover {
  background: #f4efe3 !important;
  color: #263747 !important;
}
:root.light .talent-filter-btn.is-active {
  background: #795819 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(121, 88, 25, 0.25) !important;
}
:root.light .talent-filter-btn.is-active svg {
  color: #ffffff !important;
}
:root.light .talent-badge-A.is-active {
  background: #f3e8ff !important;
  color: #6d28d9 !important;
  border-color: #c084fc !important;
  box-shadow: 0 2px 8px rgba(109, 40, 217, 0.2) !important;
}
:root.light .talent-badge-B.is-active {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border-color: #34d399 !important;
  box-shadow: 0 2px 8px rgba(4, 120, 87, 0.2) !important;
}
:root.light .talent-badge-C.is-active {
  background: #f0f9ff !important;
  color: #0284c7 !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.2) !important;
}

/* Main Circular Skill Tree Stage */
:root.light .talent-stage {
  background: #fffdf7 !important;
  background-image: radial-gradient(circle at center, rgba(121, 88, 25, 0.04) 0%, transparent 70%) !important;
  border-color: #c6b68e !important;
  box-shadow: 0 4px 20px rgba(73, 62, 32, 0.08) !important;
}

/* Talent Path Branch Accent Colors for Light Mode */
:root.light .talent-path[data-branch="A"],
:root.light .talent-path-a {
  --path-color: #6d28d9 !important; /* Deep Violet */
}
:root.light .talent-path[data-branch="B"],
:root.light .talent-path-b {
  --path-color: #047857 !important; /* Deep Emerald */
}
:root.light .talent-path[data-branch="C"],
:root.light .talent-path-c {
  --path-color: #0284c7 !important; /* Deep Sky Blue */
}

/* Talent Path Columns - Card Background Removed */
:root.light .talent-path {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 8px 4px !important;
}
:root.light .talent-path header {
  border-bottom: 1px solid color-mix(in srgb, var(--path-color) 30%, #c6b68e) !important;
  padding-bottom: 10px !important;
}
:root.light .talent-path header h2 {
  color: #263747 !important;
}
:root.light .talent-path header p {
  color: var(--path-color) !important;
  font-weight: 700 !important;
}
:root.light .talent-path header span {
  color: var(--path-color) !important;
  font-weight: 700 !important;
}

/* Connection SVG lines in light mode */
:root.light .path-locked {
  stroke: #b9aa88 !important;
}
:root.light .path-open {
  stroke: var(--path-color) !important;
  filter: drop-shadow(0 1px 3px color-mix(in srgb, var(--path-color) 40%, transparent)) !important;
}

/* Talent Rank Nodes inside Path Columns */
:root.light .talent-rank-node {
  color: #263747 !important;
}
:root.light .talent-rank-node strong {
  color: #263747 !important;
}
:root.light .talent-rank-node .talent-rank-number {
  color: #536477 !important;
  font-weight: 600 !important;
}
:root.light .talent-rank-node .talent-rank-value {
  color: var(--path-color) !important;
  font-weight: 700 !important;
}
:root.light .talent-rank-node.is-locked strong {
  color: #6b7785 !important;
}
:root.light .talent-rank-node,
:root.light .talent-rank-node:focus,
:root.light .talent-rank-node:focus-visible,
:root.light .talent-rank-node:active,
:root.light .talent-rank-node:hover,
:root.light .talent-rank-node.is-selected {
  background: transparent !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
:root.light .talent-rank-node.is-selected strong,
:root.light .talent-rank-node.is-locked.is-selected strong {
  color: var(--path-color) !important;
  font-weight: 700 !important;
}
:root.light .talent-rank-node.is-locked.is-selected .talent-rank-status {
  color: var(--path-color) !important;
  font-weight: 600 !important;
}
:root.light .talent-rank-node.is-locked.is-selected .talent-rank-icon {
  filter: grayscale(0.4) drop-shadow(0 0 6px var(--path-color)) !important;
  opacity: 0.9 !important;
}
:root.light .talent-tier-connection small,
:root.light .talent-rank-prerequisite {
  color: #536477 !important;
  font-weight: 500 !important;
}
:root.light .talent-rank-markers span.is-filled {
  background: var(--path-color) !important;
  border-color: var(--path-color) !important;
}

/* Skill Inspector Panel (#talent-details / .talent-details) */
:root.light .talent-details {
  background: #fffdf7 !important;
  border-color: #c6b68e !important;
  box-shadow: 0 6px 24px rgba(73, 62, 32, 0.1) !important;
  color: #263747 !important;
}
:root.light .talent-details h3 {
  color: #263747 !important;
}
:root.light .talent-details .border-b {
  border-color: #e2d9c5 !important;
}
:root.light .talent-details .bg-zinc-950\/70,
:root.light .talent-details .bg-zinc-900\/60,
:root.light .talent-details .bg-zinc-900\/95,
:root.light .talent-details .bg-zinc-900 {
  background: #f5f2e9 !important;
  border-color: #dcd3c1 !important;
}
:root.light .talent-details .border-zinc-800 {
  border-color: #dcd3c1 !important;
}
:root.light .talent-details .text-zinc-100 {
  color: #263747 !important;
}
:root.light .talent-details .text-zinc-300,
:root.light .talent-details .text-zinc-400 {
  color: #536477 !important;
}
:root.light .talent-details .text-zinc-500 {
  color: #6b7785 !important;
}
:root.light .talent-details .bg-zinc-800\/80,
:root.light .talent-details .bg-zinc-800 {
  background: #e9dec6 !important;
  color: #674a1d !important;
}

/* Events Page Light Mode Overrides */
:root.light .event-category-select {
  background-color: #fffdf8 !important;
  color: #263747 !important;
  border-color: #c6b68e !important;
  border-radius: 6px !important;
}
:root.light .world-event {
  background: #fffdf7 !important;
  border-color: #c6b68e !important;
  box-shadow: 0 4px 14px rgba(73, 62, 32, 0.06) !important;
}
:root.light .world-event:hover {
  border-color: #92702c !important;
  box-shadow: 0 8px 22px rgba(73, 62, 32, 0.12) !important;
}
:root.light .world-event h3 {
  color: #674a1d !important;
}
:root.light .world-event p {
  color: #536477 !important;
}
:root.light .world-event small {
  color: #795819 !important;
  font-weight: 600 !important;
}
:root.light .world-status {
  background: #f3e8ff !important;
  border-color: #c084fc !important;
  color: #6b21a8 !important;
  font-weight: 600 !important;
}
:root.light .world-event-bonus {
  color: #795819 !important;
  border-top-color: #e2d9c5 !important;
  font-weight: 600 !important;
}
:root.light .world-tabs .world-button[aria-pressed=true] {
  background: #795819 !important;
  color: #ffffff !important;
  border-color: #543d10 !important;
}

/* ==========================================================================
   TAVERN PAGE LIGHT MODE OVERRIDES
   ========================================================================== */

:root.light .world-gold {
  background: #b99a61 !important;
  border-color: #c6b68e !important;
  color: #263747 !important;
}

:root.light .world-gold:before {
  background: #fff !important;
}

:root.light .world-gold h2 {
  color: #674a1d !important;
}

:root.light .world-gold p {
  color: #536477 !important;
}

:root.light .world-gold small {
  color: #795819 !important;
  font-weight: 600 !important;
}

:root.light .world-medallion {
  background: #fffdf7 !important;
  border-color: #c6b68e !important;
  color: #795819 !important;
  box-shadow: 0 2px 8px rgba(73, 62, 32, 0.1) !important;
}

:root.light .world-gold-illustrated h2 {
  color: #f0dba9 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85), 0 1px 2px #000 !important;
}

:root.light .world-gold-illustrated p {
  color: #f0edf6 !important;
  text-shadow: 0 2px 6px #000, 0 1px 2px #000 !important;
}

:root.light .world-gold-illustrated .world-medallion {
  background: rgba(7, 19, 27, 0.75) !important;
  border-color: #d9b56d !important;
  color: #f0dba9 !important;
  box-shadow: 0 0 24px rgba(230, 189, 98, 0.2) !important;
}

:root.light .world-gold-illustrated .world-button {
  background: linear-gradient(180deg, #ebd9b0, #d8bc7e) !important;
  border-color: #f2cf8d !important;
  color: #100f16 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(217, 174, 96, 0.35) !important;
}

:root.light :is(.tavern-news-card, .tavern-news-row) {
  background: #fffdf7 !important;
  background-image: none !important;
  border-color: #c6b68e !important;
  box-shadow: 0 2px 8px rgba(73, 62, 32, 0.05) !important;
  color: #263747 !important;
}

:root.light :is(.tavern-news-card.is-system, .tavern-news-row.is-system) {
  border-color: #d9ae60 !important;
  box-shadow: inset 4px 0 0 #b5832e, 0 2px 8px rgba(73, 62, 32, 0.08) !important;
  background: #fffcf2 !important;
  background-image: none !important;
}

:root.light :is(.tavern-news-card.is-partner, .tavern-news-row.is-partner) {
  border-color: #34d399 !important;
  box-shadow: inset 4px 0 0 #047857, 0 2px 8px rgba(73, 62, 32, 0.06) !important;
  background: #f4fdf8 !important;
  background-image: none !important;
}

:root.light .tavern-news-heading h3 {
  color: #263747 !important;
}

:root.light .tavern-news-label {
  color: #795819 !important;
  font-weight: 600 !important;
}

:root.light .tavern-news-body {
  color: #536477 !important;
}

:root.light .tavern-news-meta {
  color: #6b7785 !important;
}

:root.light .tavern-hero-details span {
  color: #536477 !important;
}

:root.light .tavern-news-card .bg-zinc-800 {
  background: #e9dec6 !important;
  color: #674a1d !important;
  border-color: #c6b68e !important;
}

:root.light .tavern-news-card .bg-emerald-950 {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border-color: #a7f3d0 !important;
}

:root.light .tavern-admin-form {
  background: #fffdf7 !important;
  border-color: #c6b68e !important;
  color: #263747 !important;
  box-shadow: 0 6px 20px rgba(73, 62, 32, 0.08) !important;
}

:root.light .tavern-admin-form input,
:root.light .tavern-admin-form textarea {
  background-color: #fffdf8 !important;
  color: #263747 !important;
  border-color: #c6b68e !important;
}

:root.light .tavern-admin-form label {
  color: #536477 !important;
}

:root.light button.bg-amber-600 {
  background-color: #795819 !important;
  color: #ffffff !important;
}

:root.light button.bg-amber-600:hover {
  background-color: #543d10 !important;
}

/* ==========================================================================
   MAP PAGE LIGHT MODE OVERRIDES
   ========================================================================== */

:root.light .world-map-tools .world-gold p {
  color: #536477 !important;
}

:root.light .world-location-details h3 {
  color: #674a1d !important;
}

:root.light .world-location-details p {
  color: #536477 !important;
}

:root.light .world-map-tools .text-slate-400 {
  color: #536477 !important;
}

:root.light .map-filter-label {
  background: #fffdf8 !important;
  border-color: #c6b68e !important;
  color: #263747 !important;
}

:root.light .map-locate-btn {
  background-color: #fffdf7 !important;
  color: #674a1d !important;
  border-color: #c6b68e !important;
  box-shadow: 0 2px 8px rgba(73, 62, 32, 0.1) !important;
}

:root.light .map-locate-btn:hover {
  background-color: #f4efe3 !important;
  border-color: #795819 !important;
}

:root.light .map-locate-status {
  background-color: #fffdf7 !important;
  color: #263747 !important;
  border-color: #c6b68e !important;
  box-shadow: 0 4px 12px rgba(73, 62, 32, 0.1) !important;
}

/* ==========================================================================
   PROFILE PAGE LIGHT MODE OVERRIDES
   ========================================================================== */

:root.light .profile-personal dt {
  color: #536477 !important;
}

:root.light .profile-personal dd {
  color: #263747 !important;
  font-weight: 600 !important;
}

:root.light .profile-avatar {
  background: #fffdf7 !important;
  border-color: #c6b68e !important;
}

:root.light .profile-category {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

:root.light .profile-category span {
  color: #263747 !important;
  font-weight: 600 !important;
}

:root.light .profile-category strong {
  color: #795819 !important;
}

:root.light .profile-category progress {
  background: #e2d9c5 !important;
}

:root.light .profile-chronicle {
  border-left-color: #c6b68e !important;
}

:root.light .profile-chronicle li {
  border-bottom-color: #e2d9c5 !important;
}

:root.light .profile-chronicle li:before {
  background: #f5f2e9 !important;
  color: #795819 !important;
}

:root.light .profile-chronicle time {
  color: #536477 !important;
}

:root.light .profile-chronicle strong {
  color: #263747 !important;
}

:root.light .profile-chronicle li > span {
  color: #536477 !important;
}

:root.light .public-profile-heading {
  background: #fffdf7 !important;
  background-image: none !important;
  border-color: #c6b68e !important;
  box-shadow: 0 4px 18px rgba(73, 62, 32, 0.08) !important;
}

:root.light .public-profile-heading h2 {
  color: #674a1d !important;
}

:root.light .public-profile-badges span {
  background: #fffdf8 !important;
  border-color: #c6b68e !important;
  color: #795819 !important;
}

:root.light .public-profile-stats {
  background: #fffdf7 !important;
  border-color: #c6b68e !important;
  box-shadow: 0 2px 10px rgba(73, 62, 32, 0.05) !important;
}

:root.light .public-profile-stats strong {
  color: #263747 !important;
}

:root.light .public-profile-stats span {
  color: #536477 !important;
}

:root.light .public-profile-stats > div + div {
  border-left-color: #e2d9c5 !important;
}

:root.light .public-profile-bio {
  color: #536477 !important;
}

:root.light .profile-settings textarea,
:root.light .profile-settings input {
  background-color: #fffdf8 !important;
  color: #263747 !important;
  border-color: #c6b68e !important;
}

:root.light .profile-settings-heading {
  color: #674a1d !important;
}

/* ==========================================================================
   GUILD TOP NAV & MEMBER CARDS LIGHT MODE OVERRIDES
   ========================================================================== */

:root.light .guild-top-nav {
  border-color: #c6b68e !important;
  background: #f7f3ea !important;
  box-shadow: 0 2px 8px rgba(73, 62, 32, 0.08) !important;
}

:root.light .guild-top-nav-btn {
  border-right-color: #ded4bf !important;
  border-bottom-color: #ded4bf !important;
  color: #495a6c !important;
}

:root.light .guild-top-nav-btn:hover {
  background: #eee7d8 !important;
  color: #1c2e3d !important;
}

:root.light .guild-top-nav-btn.is-active {
  background: #fffdf8 !important;
  color: #7a5c21 !important;
  box-shadow: inset 0 -3px 0 #b38b30, inset 0 0 8px #b38b301a !important;
}

:root.light .guild-profile-entry {
  background: #fffdf7 !important;
  background-image: none !important;
  border-color: #c6b68e !important;
  box-shadow: 0 4px 14px rgba(73, 62, 32, 0.06) !important;
  border-radius: 12px !important;
}

:root.light .guild-profile-entry>div {
  background: #f7f1e3 !important;
}

:root.light .guild-member-chat-link {
  background: #f7f1e3;
  border-color: #c6b68e;
  color: #795819;
}

:root.light .guild-member-chat-link:hover {
  background: #eee1c4;
  border-color: #92702c;
}

:root.light .guild-profile-card {
  background: #fffdf7 !important;
  background-image: none !important;
  border-color: #c6b68e !important;
  color: #263747 !important;
  box-shadow: 0 2px 6px rgba(73, 62, 32, 0.05) !important;
  border-radius: 12px !important;
}

:root.light .guild-profile-entry>.guild-profile-card {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

:root.light .guild-profile-card:hover {
  background: #f4efe3 !important;
  border-color: #92702c !important;
  box-shadow: 0 6px 16px rgba(146, 112, 44, 0.12) !important;
}

:root.light .guild-profile-card.is-leader {
  background: #fffcf2 !important;
  background-image: none !important;
  border-color: #d9ae60 !important;
  box-shadow: inset 0 0 0 1px #d9ae60, 0 2px 8px rgba(146, 112, 44, 0.08) !important;
}

:root.light .guild-profile-portrait {
  background: #fffdf8 !important;
  border-color: #c6b68e !important;
  color: #795819 !important;
  box-shadow: 0 0 0 3px rgba(121, 88, 25, 0.1) !important;
}

:root.light .is-leader .guild-profile-portrait {
  border-color: #d9ae60 !important;
  box-shadow: 0 0 0 2px rgba(217, 174, 96, 0.3) !important;
}

:root.light .guild-profile-crown-badge {
  background: linear-gradient(135deg, #f3d489, #b98932) !important;
  color: #2a1b04 !important;
  border-color: #fffdf7 !important;
}

:root.light .guild-profile-name {
  color: #263747 !important;
}

:root.light .guild-profile-meta {
  color: #536477 !important;
}

:root.light .guild-profile-level {
  color: #263747 !important;
}

:root.light .guild-profile-meta-dot {
  color: #9cb0c2 !important;
}

:root.light .guild-profile-class {
  color: #92702c !important;
  font-weight: 600 !important;
}

:root.light .guild-profile-role {
  background: #f4efe3 !important;
  border-color: #c6b68e !important;
  color: #536477 !important;
}

:root.light .guild-profile-role.is-leader {
  background: #fef9c3 !important;
  border-color: #d9ae60 !important;
  color: #854d0e !important;
  font-weight: 600 !important;
  box-shadow: 0 0 10px rgba(217, 174, 96, 0.2) !important;
}

:root.light .guild-role-icon {
  color: #92702c !important;
}

:root.light .guild-profile-entry .border-t {
  border-top-color: #e2d9c5 !important;
}

:root.light .guild-profile-entry button.bg-amber-950\/70,
:root.light .guild-profile-entry button[class*="bg-amber"] {
  background-color: #fef3c7 !important;
  color: #92400e !important;
  border-color: #f59e0b !important;
}

:root.light .guild-profile-entry button.bg-amber-950\/70:hover,
:root.light .guild-profile-entry button[class*="bg-amber"]:hover {
  background-color: #fde68a !important;
  color: #78350f !important;
}

:root.light .guild-member-search-input {
  background-color: #fffdf8 !important;
  color: #263747 !important;
  border-color: #c6b68e !important;
}

/* ==========================================================================
   DIALOGS & MODALS LIGHT MODE OVERRIDES
   ========================================================================== */

:root.light .gw-dialog {
  --dialog-accent: #795819;
  --dialog-tint: rgba(121, 88, 25, 0.08);
  background: #fffdf7 !important;
  background-image: none !important;
  color: #263747 !important;
  border-color: #c6b68e !important;
  box-shadow: 0 20px 60px rgba(73, 62, 32, 0.2), inset 0 0 0 1px #ffffff !important;
}

:root.light .gw-dialog-danger {
  --dialog-accent: #b91c1c;
  --dialog-tint: rgba(185, 28, 28, 0.08);
  border-color: #fca5a5 !important;
}

:root.light .gw-dialog-content {
  background: #fffdf7 !important;
  background-image: radial-gradient(ellipse at top left, var(--dialog-tint), transparent 65%) !important;
}

:root.light .gw-dialog h2 {
  color: #674a1d !important;
}

:root.light .gw-dialog-danger h2 {
  color: #991b1b !important;
}

:root.light .gw-dialog-description,
:root.light .gw-dialog-hint,
:root.light .gw-dialog-topline > span {
  color: #536477 !important;
}

:root.light .gw-dialog-close {
  color: #536477 !important;
}

:root.light .gw-dialog-close:hover {
  background: #f4efe3 !important;
  color: #263747 !important;
}

:root.light .gw-dialog-field label {
  color: #3d4e60 !important;
}

:root.light .gw-dialog-field :is(input, textarea) {
  background-color: #fffdf8 !important;
  border-color: #c6b68e !important;
  color: #263747 !important;
}

:root.light .gw-dialog-actions {
  background: #f5f2e9 !important;
  border-top-color: #c6b68e !important;
}

:root.light .gw-dialog-primary {
  background: #795819 !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #543d10 !important;
}

:root.light .gw-dialog-primary:hover {
  background-color: #543d10 !important;
  border-color: #382708 !important;
  color: #ffffff !important;
}

:root.light .gw-dialog-danger .gw-dialog-primary {
  background: #b91c1c !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #7f1d1d !important;
}

:root.light .gw-dialog-danger .gw-dialog-primary:hover {
  background-color: #991b1b !important;
}

:root.light .gw-dialog-secondary {
  background: #fffdf7 !important;
  background-image: none !important;
  color: #263747 !important;
  border-color: #c6b68e !important;
}

:root.light .gw-dialog-secondary:hover {
  background-color: #f4efe3 !important;
  border-color: #92702c !important;
  color: #1c2834 !important;
}

:root.light .world-modal-overlay {
  background: rgba(38, 55, 71, 0.45) !important;
}

:root.light .world-modal-overlay > div {
  background: #fffdf7 !important;
  background-image: none !important;
  color: #263747 !important;
  border-color: #c6b68e !important;
  box-shadow: 0 20px 60px rgba(73, 62, 32, 0.2), inset 0 0 0 1px #ffffff !important;
}

:root.light .world-modal-overlay > .qr-pass-modal {
  background: #081521 !important;
  background-image: none !important;
  color: #eee9df !important;
  border-color: #8c7549 !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
}
:root.light .world-modal-overlay .qr-pass-modal .qr-modal-badge,
:root.light .world-modal-overlay .qr-pass-modal .qr-modal-class {
  color: #f3d693 !important;
}
:root.light .world-modal-overlay .qr-pass-modal .qr-modal-badge-label,
:root.light .world-modal-overlay .qr-pass-modal .qr-modal-class-label {
  color: #f3d693 !important;
}
:root.light .world-modal-overlay .qr-pass-modal .qr-modal-username {
  color: #fff0ce !important;
}
:root.light .world-modal-overlay .qr-pass-modal .qr-modal-close {
  color: #d4d4d8 !important;
}
:root.light .world-modal-overlay .qr-pass-modal .qr-rank-value,
:root.light .world-modal-overlay .qr-pass-modal .qr-action-value {
  color: #f2e9d9 !important;
}
:root.light .world-modal-overlay .qr-pass-modal .qr-karma-value {
  color: #34d399 !important;
}

:root.light .world-modal-overlay :is(h1, h2, h3, h4) {
  color: #674a1d !important;
}

:root.light .world-modal-overlay p,
:root.light .world-modal-overlay span,
:root.light .world-modal-overlay label,
:root.light .world-modal-overlay dt {
  color: #536477 !important;
}

:root.light .world-modal-overlay dd,
:root.light .world-modal-overlay strong {
  color: #263747 !important;
}

:root.light .world-modal-overlay :is(input:not([type=range]):not([type=checkbox]):not([type=file]), textarea, select) {
  background-color: #fffdf8 !important;
  border-color: #c6b68e !important;
  color: #263747 !important;
}

:root.light .world-modal-overlay :is(input, textarea)::placeholder {
  color: #788696 !important;
}

:root.light .world-modal-overlay [class*="bg-zinc-950"],
:root.light .world-modal-overlay [class*="bg-zinc-900"],
:root.light .world-modal-overlay [class*="bg-zinc-800"] {
  background-color: #f5f2e9 !important;
}

:root.light .world-modal-overlay [class*="border-zinc-"] {
  border-color: #c6b68e !important;
}

:root.light .world-modal-overlay .text-zinc-100,
:root.light .world-modal-overlay .text-zinc-200 {
  color: #263747 !important;
}

:root.light .world-modal-overlay .text-zinc-300,
:root.light .world-modal-overlay .text-zinc-400,
:root.light .world-modal-overlay .text-zinc-500 {
  color: #536477 !important;
}

:root.light .world-modal-overlay button:is(.bg-zinc-100, .bg-white, .bg-zinc-800, .bg-amber-500) {
  background-color: #92702c !important;
  color: #ffffff !important;
  border-color: #674a1d !important;
}

:root.light .world-modal-overlay button:is(.bg-zinc-100, .bg-white, .bg-amber-500):hover {
  background-color: #795819 !important;
}

:root.light .user-business-card {
  background: #fffdf7 !important;
  border-color: #c6b68e !important;
  box-shadow: 0 4px 16px rgba(73, 62, 32, 0.08) !important;
}

:root.light .user-business-banner-gradient {
  background: linear-gradient(to top, #fffdf7 0%, rgba(255, 253, 247, 0.4) 60%, transparent 100%) !important;
}

:root.light .user-business-avatar {
  border-color: #bfa568 !important;
  background-color: #f5f2e9 !important;
  --tw-ring-color: rgba(255, 253, 247, 0.9) !important;
}

:root.light .user-business-name {
  color: #263747 !important;
}

:root.light .user-business-email {
  color: #536477 !important;
}

:root.light .user-business-role {
  color: #795819 !important;
}

:root.light .user-business-stats {
  border-color: #e2d8c3 !important;
}

/* Heroic Actions Step Wizard & Evidence Picker Light Mode */
:root.light .heroic-steps {
  border-bottom-color: #c6b68e50;
}

:root.light .heroic-steps li {
  background: #fffdf8;
  border-color: #c6b68e;
  color: #536477;
  box-shadow: 0 2px 6px rgba(73, 62, 32, 0.05);
}

:root.light .heroic-steps .heroic-step-number {
  background: #f4eee0;
  border-color: #c6b68e;
  color: #674a1d;
}

:root.light .heroic-steps li[aria-current=step] {
  color: #543d10;
  border-color: #92702c;
  background: linear-gradient(120deg, #ebd9b0, #fffdf8);
  box-shadow: inset 0 0 16px rgba(146, 112, 44, 0.12), 0 3px 10px rgba(73, 62, 32, 0.08);
}

:root.light .heroic-steps [aria-current=step] .heroic-step-number {
  border-color: #92702c;
  color: #543d10;
  background: #e5d4ab;
  box-shadow: 0 0 12px rgba(146, 112, 44, 0.18);
}

:root.light .heroic-steps .is-complete {
  color: #1b6340;
  border-color: #83ab90;
  background: #f0f7f2;
}

:root.light .heroic-steps .is-complete .heroic-step-number {
  color: #1b6340;
  border-color: #83ab90;
  background: #d1fae5;
}

:root.light .world-page .evidence-type-option {
  background: #fffdf8;
  border-color: #c6b68e;
  color: #536477;
  box-shadow: 0 2px 6px rgba(73, 62, 32, 0.05);
}

:root.light .world-page .evidence-type-option[aria-pressed=true] {
  background: linear-gradient(145deg, #ebd9b0, #fffdf8);
  border-color: #92702c;
  color: #543d10;
  box-shadow: inset 0 0 16px rgba(146, 112, 44, 0.12), 0 3px 10px rgba(73, 62, 32, 0.08);
}

:root.light .world-page .evidence-type-option svg {
  color: inherit;
}

:root.light .world-page .evidence-type-option small {
  color: #674a1d !important;
  font-weight: 700 !important;
}

:root.light .world-page .evidence-type-option:hover:not(:disabled) {
  border-color: #92702c;
  background: #fbf7ee;
}

:root.light .evidence-photo-preview {
  background: #fffdf8;
  border-color: #c6b68e;
  box-shadow: 0 2px 8px rgba(73, 62, 32, 0.06);
}

:root.light .evidence-photo-preview figcaption {
  color: #536477;
}

:root.light :is(.xp-assessment-band, .border-amber-700\/50.bg-amber-950\/20) {
  background-color: #fef7e6 !important;
  border-color: #e5cb87 !important;
  color: #795819 !important;
}

:root.light .world-page :is(.bg-zinc-900\/60, .bg-zinc-900\/70, .bg-zinc-950) {
  background-color: #fffdf8 !important;
}

:root.light .world-page .border-zinc-700 {
  border-color: #c6b68e !important;
}

:root.light .world-page .text-amber-100 {
  color: #674a1d !important;
}

:root.light .world-page .text-amber-200 {
  color: #795819 !important;
}

:root.light .world-page .text-amber-300 {
  color: #8c5d14 !important;
}

:root.light .world-page .location-picker-button-primary,
:root.light .world-page .location-picker-button-primary:hover:not(:disabled),
:root.light .world-page .location-picker-button-primary svg {
  color: #fffdf8 !important;
}

/* Level Badge Light Mode */
:root.light .world-level-badge {
  background: #fdf6e7 !important;
  border-color: #d9b56d !important;
  color: #795819 !important;
  box-shadow: 0 1px 4px rgba(121, 88, 25, 0.12) !important;
}
:root.light .world-level-badge .level-number {
  color: #543d10 !important;
  font-weight: 800 !important;
}

/* Profile Flyout Light Mode */
:root.light .world-profile-flyout {
  background: #fffdf8 !important;
  border-color: #c6b68e !important;
  color: #263747 !important;
  box-shadow: 0 16px 45px rgba(73, 62, 32, 0.18) !important;
}
:root.light .world-profile-flyout-header {
  border-bottom-color: #e2d8c3 !important;
}
:root.light .world-profile-flyout-name {
  color: #543d10 !important;
}
:root.light .world-profile-flyout-sub {
  color: #536477 !important;
}
:root.light .world-profile-flyout-section {
  border-bottom-color: #e2d8c3 !important;
}
:root.light .world-profile-flyout-row {
  color: #3d4e60 !important;
}
:root.light .world-profile-flyout-share {
  background: #fbf2df !important;
  border-color: #c6a666 !important;
  color: #674a1d !important;
}
:root.light .world-profile-flyout-share:hover {
  background: #f5e6c5 !important;
  color: #382808 !important;
}
:root.light .world-profile-flyout-share svg {
  color: #92702c !important;
}
:root.light .world-profile-flyout-item {
  color: #3d4e60 !important;
}
:root.light .world-profile-flyout-item:hover {
  background: #f4ebd9 !important;
  color: #1c2834 !important;
}
:root.light .world-profile-flyout-item svg {
  color: #795819 !important;
}
:root.light .world-profile-flyout-logout {
  color: #9f2a3b !important;
}
:root.light .world-profile-flyout-logout:hover {
  background: #fce8e6 !important;
  color: #7f1d1d !important;
}

/* Custom Category Selector Widget Light Mode */
:root.light .category-select-trigger {
  background: linear-gradient(135deg, #fffdf8, #f5efe2);
  border-color: #c6b68e;
  color: #263747;
  box-shadow: 0 2px 8px rgba(73, 62, 32, 0.08);
}
:root.light .category-select-trigger:hover:not(:disabled) {
  border-color: #92702c;
  background: linear-gradient(135deg, #fffdf8, #ede4d1);
  box-shadow: 0 4px 14px rgba(73, 62, 32, 0.12);
}
:root.light .category-select-trigger-open {
  border-color: #92702c !important;
  background: #fbf7ee !important;
}
:root.light .category-select-kicker {
  color: #795819;
}
:root.light .category-select-title {
  color: #543d10;
}
:root.light .category-select-arrow {
  background: #f4eee0;
  border: 1px solid #c6b68e;
  color: #674a1d;
}
:root.light .category-select-trigger:hover .category-select-arrow {
  border-color: #92702c;
  color: #543d10;
  background: #e5d4ab;
}
:root.light .category-select-dropdown {
  background: #fffdf8;
  border: 1px solid #c6b68e;
  box-shadow: 0 16px 40px rgba(73, 62, 32, 0.18);
  scrollbar-width: thin;
  scrollbar-color: #c6b68e #f5f2e9;
}
:root.light .category-select-option {
  background: #f9f5ec;
  border: 1px solid #e2d8c3;
  color: #374757;
}
:root.light .category-select-option:hover {
  background: #f0e6d2;
  border-color: #92702c;
  color: #543d10;
}
:root.light .category-select-option-active {
  background: linear-gradient(120deg, #ebd9b0, #fffdf8) !important;
  border-color: #92702c !important;
  color: #543d10 !important;
  box-shadow: inset 0 0 12px rgba(146, 112, 44, 0.12);
}

/* XP Assessment Band Light Mode */
:root.light .xp-assessment-band {
  background: linear-gradient(135deg, #fff9eb, #fef2d6) !important;
  border-color: #d9b56d !important;
  box-shadow: 0 2px 8px rgba(121, 88, 25, 0.1) !important;
}
:root.light .xp-assessment-band-label {
  color: #674a1d !important;
  font-weight: 600 !important;
}
:root.light .xp-assessment-band-value {
  color: #543d10 !important;
  font-weight: 800 !important;
}

:root.light :is(.world-page, .portal-content) .text-slate-300 {
  color: #3d4e60 !important;
}
:root.light :is(.world-page, .portal-content) .text-slate-400 {
  color: #536477 !important;
}

/* Video Dropzone & Clip Cards Light Mode */
:root.light .video-dropzone {
  background: #fffdf8 !important;
  border-color: #c6b68e !important;
  box-shadow: 0 2px 8px rgba(73, 62, 32, 0.05) !important;
}
:root.light .video-dropzone:hover {
  border-color: #92702c !important;
  background: #fbf7ee !important;
}
:root.light .video-dropzone p.text-zinc-200 {
  color: #263747 !important;
}
:root.light .video-dropzone p.text-zinc-500 {
  color: #536477 !important;
}
:root.light .video-clip-card {
  background: #fffdf8 !important;
  border-color: #c6b68e !important;
  box-shadow: 0 2px 8px rgba(73, 62, 32, 0.06) !important;
}
:root.light .video-clip-card span.text-amber-300 {
  color: #674a1d !important;
}

/* GPS Button Light Mode */
:root.light .gps-button {
  background: linear-gradient(135deg, #e6f7ef, #d1fae5) !important;
  border-color: #059669 !important;
  color: #046c4e !important;
  box-shadow: 0 2px 6px rgba(4, 108, 78, 0.1) !important;
}
:root.light .gps-button:hover:not(:disabled) {
  background: #bbf7d0 !important;
  border-color: #046c4e !important;
  color: #024734 !important;
  box-shadow: 0 4px 12px rgba(4, 108, 78, 0.18) !important;
}

:root.light :is(.world-page, .portal-content) .text-emerald-300 {
  color: #046c4e !important;
  font-weight: 600 !important;
}

:root.light :is(.world-page, .portal-content) .text-red-300,
:root.light :is(.world-page, .portal-content) .text-rose-300,
:root.light :is(.world-page, .portal-content) .text-rose-600 {
  color: #b91c1c !important;
  font-weight: 600 !important;
}








/* Player Progress Nav - Light Mode */
:root.light .player-progress-nav-xp {
  color: #0369a1 !important; /* text-sky-700 */
}
:root.light .player-progress-nav-next {
  color: #536477 !important; /* text-slate-600 */
}
:root.light .player-progress-nav-track {
  background-color: #d4d4d8 !important; /* bg-zinc-300 */
  border-color: #a1a1aa !important;
}
:root.light .player-progress-nav-fill {
  background-color: #0284c7 !important; /* bg-sky-600 */
}

/* Heroic rewards were retaining dark dashboard surfaces with dark-theme text. */
:root.light .heroic-reward-tile {
  background: #f0eadb !important;
  border-color: #c6b68e !important;
}
:root.light .heroic-reward-tile strong { color: #263747 !important; }
:root.light .heroic-reward-tile span { color: #536477 !important; }

/* Calendar hover popup: use a consistent bright surface and readable event rows. */
:root.light .system-events-tooltip {
  background: #fffdf7 !important;
  border-color: #c6b68e !important;
  color: #263747 !important;
  box-shadow: 0 12px 40px rgba(38, 55, 71, 0.24) !important;
}
:root.light .system-events-tooltip .text-amber-100,
:root.light .system-events-tooltip .text-amber-200 { color: #674a1d !important; }
:root.light .system-events-tooltip .text-amber-400 { color: #8c5d14 !important; }
:root.light .system-events-tooltip .text-zinc-300,
:root.light .system-events-tooltip .text-zinc-400 { color: #536477 !important; }
:root.light .event-tooltip-card {
  background: #f7f2e7 !important;
  border-color: #ded2b8 !important;
}
:root.light .system-events-tooltip .bg-zinc-900 { background: #eee6d5 !important; color: #4b4438 !important; }
:root.light .system-events-tooltip .bg-rose-950\/80 { background: #fce8e8 !important; color: #9f3039 !important; }
:root.light .system-events-tooltip .text-sky-300 { color: #17658b !important; }
:root.light .system-events-tooltip .text-emerald-300 { color: #18734c !important; }
:root.light .system-events-tooltip .text-rose-300 { color: #a12f40 !important; }

/* Map side-panel details should follow the paper palette rather than dark card utilities. */
:root.light .map-location-identity { background: #fffdf7 !important; border-color: #c6b68e !important; }
:root.light .map-location-identity .text-amber-100 { color: #674a1d !important; }
:root.light .map-location-identity .text-amber-300 { color: #795819 !important; }
:root.light .map-location-identity .bg-amber-500\/20 { background: #f1e5c9 !important; }
:root.light .map-location-identity .border-amber-500\/30 { border-color: #c6b68e !important; }
:root.light .map-location-identity-partner .map-location-emblem {
  background: #f1e5c9 !important;
  border-color: #b89559 !important;
  box-shadow: 0 5px 16px #493e201c !important;
}
:root.light .map-location-identity-partner .map-location-emblem-fallback { background: #fffaf0 !important; color: #8c5d14 !important; }
:root.light .world-location-details :is(.map-location-category, .map-location-requirements) {
  background: #f7f2e7 !important;
  border-color: #d2c5a9 !important;
}
:root.light .map-location-category .text-slate-400,
:root.light .map-location-requirements .text-slate-400 { color: #536477 !important; }
:root.light .map-location-category .text-slate-200 { color: #263747 !important; }
:root.light .map-location-category .bg-amber-500\/10 { background: #f1e5c9 !important; border-color: #c6b68e !important; color: #8c5d14 !important; }
:root.light .map-location-requirements .bg-slate-950 { background: #fffdf7 !important; border-color: #c6b68e !important; color: #674a1d !important; }
:root.light .map-location-description,
:root.light .map-location-offer {
  background: #f7f2e7 !important;
  border-color: #d2c5a9 !important;
  color: #3d4e60 !important;
}
:root.light .map-location-description .text-slate-400,
:root.light .map-location-description .text-slate-300,
:root.light .map-location-offer .text-slate-300,
:root.light .map-location-offer .text-slate-400 { color: #536477 !important; }
:root.light .map-location-offer .text-amber-200 { color: #674a1d !important; }
:root.light .map-location-offer .text-amber-300 { color: #795819 !important; }
:root.light .map-location-offer .bg-slate-950 { background: #eee6d5 !important; }
:root.light .map-location-offer .border-slate-700 { border-color: #c6b68e !important; }

/* Keep hover states in the tavern feed legible on its light row backgrounds. */
:root.light .tavern-news-row.is-partner .text-zinc-200,
:root.light .tavern-news-row.is-partner .group-hover\:text-emerald-200 { color: #126746 !important; }
:root.light .tavern-news-row.is-event .bg-purple-950\/60 { background: #f3e9fb !important; }
:root.light .tavern-news-row.is-event .text-purple-300 { color: #70469b !important; }
:root.light .tavern-news-row.is-event .border-purple-700\/40 { border-color: #c4a5df !important; }

/* Partner detail uses several intentionally dark-theme utility colors inside
   bright panels. Scope the palette to this page to keep the dark theme intact. */
:root.light .partner-detail-page { color: #263747; }
:root.light .partner-detail-hero { background: #f5f2e9 !important; border-color: #c6b68e !important; }
:root.light .partner-detail-hero h1 { color: #674a1d !important; }
:root.light .partner-detail-hero .text-amber-100 { color: #674a1d !important; }
:root.light .partner-detail-hero .text-amber-300 { color: #795819 !important; }
:root.light .partner-detail-hero .text-zinc-300,
:root.light .partner-detail-hero .text-zinc-400 { color: #536477 !important; }
:root.light .partner-detail-hero .bg-amber-500\/20 { background: #f1e5c9 !important; }
:root.light .partner-detail-hero .border-amber-500\/30 { border-color: #c6b68e !important; }
:root.light .partner-detail-hero .bg-zinc-800 { background: #eee6d5 !important; }
:root.light .partner-detail-hero .text-zinc-300 { color: #4b4438 !important; }
:root.light .partner-detail-page h2 { color: #674a1d !important; }
:root.light .partner-offer-card,
:root.light .partner-detail-about,
:root.light .partner-detail-location {
  background: #fffdf7 !important;
  border-color: #c6b68e !important;
  color: #263747 !important;
  box-shadow: 0 4px 14px rgba(73, 62, 32, 0.08) !important;
}
:root.light .partner-offer-card h3,
:root.light .partner-detail-about h3,
:root.light .partner-detail-location h3 { color: #674a1d !important; }
:root.light .partner-offer-card .text-zinc-100,
:root.light .partner-offer-card .text-zinc-200,
:root.light .partner-offer-card .text-zinc-300,
:root.light .partner-offer-card .text-zinc-400,
:root.light .partner-detail-about .text-zinc-300,
:root.light .partner-detail-location .text-zinc-300 { color: #3d4e60 !important; }
:root.light .partner-offer-card .text-zinc-500,
:root.light .partner-detail-location .text-zinc-400 { color: #536477 !important; }
:root.light .partner-detail-page .text-amber-100 { color: #674a1d !important; }
:root.light .partner-detail-page .text-amber-200 { color: #795819 !important; }
:root.light .partner-detail-page .text-amber-300 { color: #8c5d14 !important; }
:root.light .partner-detail-page .text-amber-400 { color: #a45b08 !important; }
:root.light .partner-detail-page .text-emerald-300,
:root.light .partner-detail-page .text-emerald-400 { color: #18734c !important; }
:root.light .partner-detail-page .bg-emerald-500\/10,
:root.light .partner-detail-page .bg-emerald-500\/20,
:root.light .partner-detail-page .bg-emerald-950\/70 { background: #e6f5ec !important; }
:root.light .partner-detail-page .border-emerald-500\/40,
:root.light .partner-detail-page .border-emerald-700 { border-color: #9cc8ac !important; }
:root.light .partner-detail-page .text-purple-300 { color: #70469b !important; }
:root.light .partner-detail-page .bg-purple-950\/70 { background: #f0e8f8 !important; }
:root.light .partner-detail-page .border-purple-700 { border-color: #c4a5df !important; }
:root.light .partner-detail-page .text-sky-300 { color: #17658b !important; }
:root.light .partner-detail-page .bg-sky-950\/70 { background: #e8f3f8 !important; }
:root.light .partner-detail-page .border-sky-700 { border-color: #a9cad9 !important; }
:root.light .partner-offer-card .bg-zinc-800\/90 { background: #eee6d5 !important; color: #4b4438 !important; }
:root.light .partner-detail-page .bg-zinc-950 { background: #f3eddf !important; }
:root.light .partner-detail-page .border-zinc-700,
:root.light .partner-detail-page .border-zinc-800,
:root.light .partner-detail-page .border-zinc-800\/80 { border-color: #d4cbbb !important; }
:root.light .partner-detail-location .font-mono.text-amber-300 { color: #795819 !important; }
:root.light .partner-redemptions-count { background: #f2dfb6; border-color: #c79b54; color: #67450f !important; }
:root.light .partner-redemptions .text-amber-100,
:root.light .partner-redemptions .text-amber-200,
:root.light .partner-redemptions .text-amber-300 { color: #795819 !important; }
:root.light .partner-redemptions .text-emerald-200,
:root.light .partner-redemptions .text-emerald-300 { color: #176b48 !important; }
:root.light .partner-redemptions .text-sky-200,
:root.light .partner-redemptions .text-sky-300 { color: #155f85 !important; }
:root.light .partner-redemptions .text-purple-200,
:root.light .partner-redemptions .text-purple-300 { color: #69418f !important; }
:root.light .partner-redemptions button[aria-pressed="true"] { background: #eadbb9; border-color: #ae8848; color: #67450f !important; }
:root.light .partner-redemptions button[aria-pressed="true"]:nth-child(2) { background: #dcefe4; border-color: #72aa88; color: #176b48 !important; }
:root.light .partner-redemptions button[aria-pressed="true"]:nth-child(3) { background: #e1eef5; border-color: #83b2cb; color: #155f85 !important; }
:root.light .partner-detail-redeem-hint {
  background: #f7f0df !important;
  border-color: #d8c391 !important;
  color: #3d4e60 !important;
}
:root.light .partner-detail-redeem-hint p { color: #536477 !important; }
:root.light .partner-detail-page .text-rose-200 { color: #a12f40 !important; }

/* Today in the event calendar uses the light gold palette instead of the
   dark green/navy combination reserved for dark mode. */
:root.light .calendar-day-today {
  background: #f3e8cf !important;
  border-color: #a98a4e !important;
  box-shadow: 0 0 0 2px rgba(169, 138, 78, 0.22), 0 4px 12px rgba(73, 62, 32, 0.12) !important;
}
:root.light .calendar-day-today-number {
  color: #543d10 !important;
  background: #e6d4aa !important;
}
:root.light .calendar-day-today-label { color: #795819 !important; }
:root.light .calendar-day-today .calendar-event-pill.bg-emerald-950\/90 {
  background: #ddf2e5 !important;
  color: #126746 !important;
  border-color: #83bd99 !important;
}
:root.light .calendar-day-today .calendar-event-pill.bg-amber-950\/80 {
  background: #f8edcf !important;
  color: #674a1d !important;
  border-color: #d3ad62 !important;
}
:root.light .calendar-day-today .calendar-event-pill.bg-rose-950\/90 {
  background: #fce8e8 !important;
  color: #943b43 !important;
  border-color: #d69a9e !important;
}
:root.light .calendar-day-today .calendar-event-pill.bg-purple-900\/90 {
  background: #f0e8f8 !important;
  color: #70469b !important;
  border-color: #c4a5df !important;
}

/* Bright presentation for the QR pass modal, keeping the QR itself pure white. */
:root.light .world-modal-overlay > .qr-pass-modal {
  background: #fffdf7 !important;
  background-image: none !important;
  color: #263747 !important;
  border-color: #c6b68e !important;
  box-shadow: 0 20px 60px rgba(73, 62, 32, 0.22), inset 0 1px #ffffff !important;
}
:root.light .world-modal-overlay .qr-pass-modal .qr-modal-badge {
  background: #f3eddf !important;
  border-color: #d6c7a7 !important;
  color: #674a1d !important;
}
:root.light .world-modal-overlay .qr-pass-modal .qr-modal-badge-label { color: #674a1d !important; }
:root.light .world-modal-overlay .qr-pass-modal .qr-modal-username { color: #263747 !important; }
:root.light .world-modal-overlay .qr-pass-modal .qr-modal-class {
  background: #f3eddf !important;
  border-color: #d6c7a7 !important;
  color: #674a1d !important;
  box-shadow: none !important;
}
:root.light .world-modal-overlay .qr-pass-modal .qr-modal-class-label { color: #674a1d !important; }
:root.light .world-modal-overlay .qr-pass-modal .qr-modal-stats { border-color: #ddd2bd !important; }
:root.light .world-modal-overlay .qr-pass-modal .qr-modal-stat {
  background: #f5f0e4 !important;
  border-color: #d8ccb5 !important;
  box-shadow: inset 0 1px #ffffff !important;
}
:root.light .world-modal-overlay .qr-pass-modal .qr-rank-value,
:root.light .world-modal-overlay .qr-pass-modal .qr-action-value { color: #263747 !important; }
:root.light .world-modal-overlay .qr-pass-modal .qr-karma-value { color: #126746 !important; }
:root.light .world-modal-overlay .qr-pass-modal .qr-modal-code {
  background: #ffffff !important;
  border-color: #c6b68e !important;
  box-shadow: 0 3px 10px rgba(73, 62, 32, 0.1) !important;
}
:root.light .world-modal-overlay .qr-pass-modal .qr-modal-close {
  background: #f3eddf !important;
  border: 1px solid #d8ccb5 !important;
  color: #536477 !important;
}
:root.light .world-modal-overlay .qr-pass-modal .qr-modal-close:hover {
  background: #e9dec6 !important;
  color: #263747 !important;
}

/* Quick submission sits directly in the app layout, outside .world-page. */
:root.light .quick-heroic-action { color: var(--world-ink); }
:root.light .quick-heroic-action h1,
:root.light .quick-heroic-action .world-panel h2 { color: #674a1d; }
:root.light .quick-heroic-action > div > p:not(.world-eyebrow),
:root.light .quick-heroic-action .world-panel p,
:root.light .quick-heroic-action form > label { color: #263747; }
:root.light .quick-heroic-action a:not(.world-button) { color: #795819; }
:root.light .quick-heroic-action a:not(.world-button):hover { color: #543d10; }
:root.light .quick-heroic-action .quick-heroic-notice {
  background: #f5ead0;
  border-color: #c79c42;
  color: #624713;
}
:root.light .quick-heroic-action .world-panel { background: #fffdf7; border-color: #c6b68e; }
:root.light .quick-heroic-action textarea {
  background: #fffdf8;
  border-color: #a99b7f;
  color: #263747;
}
:root.light .quick-heroic-action textarea::placeholder { color: #637184; }
:root.light .quick-heroic-action .border-zinc-700 { border-color: #b7aa91; }
:root.light .quick-heroic-action .text-zinc-200,
:root.light .quick-heroic-action .text-zinc-300 { color: #3d4e60; }
:root.light .quick-heroic-action .world-panel p.text-rose-300 { color: #a4263c; }
:root.light .quick-heroic-action .world-panel h2.text-emerald-300 { color: #126746; }

:root.light .guild-shop {
  --shop-surface: #fffdf8;
  --shop-tint: #f3ecd9;
  --shop-border: #d9cbaa;
  --shop-accent: #805e20;
  --shop-muted: #5d6a77;
}
:root.light .guild-shop .guild-treasury-hero {
  background: linear-gradient(120deg, #fffdf8, #f1e6ca);
  border-color: var(--shop-border);
}
:root.light .guild-shop .guild-unlock-card {
  background: linear-gradient(145deg, #faf5e8, #fff 48%);
  border-color: var(--shop-border);
}
:root.light .guild-shop .guild-unlock-card:hover { border-color: #b7944e; }
:root.light .guild-shop .guild-unlock-card.is-unlocked { border-color: #8eaf99; }
:root.light .guild-shop .guild-unlock-footer .world-button {
  background: #805e20;
  border-color: #805e20;
  color: #fffdf7;
}
:root.light .guild-shop .guild-unlock-footer .world-button:hover:not(:disabled) { background: #654714; }
:root.light .guild-shop .guild-unlock-footer .world-button:disabled {
  background: #f0ece3;
  border-color: #d9cbaa;
  color: #6b6254;
}
:root.light .guild-shop .guild-unlock-status:not(.is-locked) { color: #346c51; }

:root.light .guild-chat-tool-panel { background: #fffaf0; border-color: #b9a77d; box-shadow: 0 8px 24px #6b57321c; }
:root.light .guild-chat-tool-heading, :root.light .guild-chat-poll strong, :root.light .guild-chat-pinned { color: #795717; }
:root.light .guild-chat-poll-form label { color: #4b5964; }
:root.light .guild-chat-poll-form input { background: #fffdf8; border-color: #bcae8d; color: #26394a; }
:root.light .guild-chat-category, :root.light .guild-chat-tool-button, :root.light .guild-chat-shop-link, :root.light .guild-chat-poll-form-actions button { background: #f7edda; border-color: #c5af80; color: #674d20; }
:root.light .guild-chat-category.is-selected, :root.light .guild-chat-tool-button.is-active { background: #ead6ae; color: #4b3515; }
:root.light .guild-chat-emote-grid .guild-emote-btn { background: #f7efde; border-color: #ddcaa3; }
:root.light .guild-chat-poll-form-actions .guild-chat-poll-submit { background: #805e20; color: #fffdf7; }
:root.light .guild-chat-pinned, :root.light .guild-chat-poll { background: #f5ebd8; border-color: #c5af80; }
:root.light .guild-chat-poll-option, :root.light .guild-chat-reaction, :root.light .guild-chat-pin-button { background: #fffaf0; border-color: #c5af80; color: #394b58; }
:root.light .guild-chat-poll-option.is-selected, :root.light .guild-chat-reaction.is-selected, :root.light .guild-chat-pin-button.is-selected { background: #ead6ae; }
.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; }