/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
    --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-100: oklch(93.6% 0.032 17.717);
    --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-300: oklch(80.8% 0.114 19.571);
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-red-800: oklch(44.4% 0.177 26.899);
    --color-red-900: oklch(39.6% 0.141 25.723);
    --color-red-950: oklch(25.8% 0.092 26.042);
    --color-orange-200: oklch(90.1% 0.076 70.697);
    --color-orange-300: oklch(83.7% 0.128 66.29);
    --color-orange-400: oklch(75% 0.183 55.934);
    --color-orange-500: oklch(70.5% 0.213 47.604);
    --color-orange-700: oklch(55.3% 0.195 38.402);
    --color-orange-800: oklch(47% 0.157 37.304);
    --color-orange-900: oklch(40.8% 0.123 38.172);
    --color-orange-950: oklch(26.6% 0.079 36.259);
    --color-amber-100: oklch(96.2% 0.059 95.617);
    --color-amber-200: oklch(92.4% 0.12 95.746);
    --color-amber-300: oklch(87.9% 0.169 91.605);
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-amber-600: oklch(66.6% 0.179 58.318);
    --color-amber-700: oklch(55.5% 0.163 48.998);
    --color-amber-800: oklch(47.3% 0.137 46.201);
    --color-amber-900: oklch(41.4% 0.112 45.904);
    --color-amber-950: oklch(27.9% 0.077 45.635);
    --color-yellow-200: oklch(94.5% 0.129 101.54);
    --color-yellow-300: oklch(90.5% 0.182 98.111);
    --color-yellow-400: oklch(85.2% 0.199 91.936);
    --color-yellow-500: oklch(79.5% 0.184 86.047);
    --color-yellow-600: oklch(68.1% 0.162 75.834);
    --color-yellow-800: oklch(47.6% 0.114 61.907);
    --color-yellow-900: oklch(42.1% 0.095 57.708);
    --color-yellow-950: oklch(28.6% 0.066 53.813);
    --color-green-300: oklch(87.1% 0.15 154.449);
    --color-green-400: oklch(79.2% 0.209 151.711);
    --color-green-500: oklch(72.3% 0.219 149.579);
    --color-green-600: oklch(62.7% 0.194 149.214);
    --color-green-800: oklch(44.8% 0.119 151.328);
    --color-green-900: oklch(39.3% 0.095 152.535);
    --color-green-950: oklch(26.6% 0.065 152.934);
    --color-emerald-50: oklch(97.9% 0.021 166.113);
    --color-emerald-200: oklch(90.5% 0.093 164.15);
    --color-emerald-300: oklch(84.5% 0.143 164.978);
    --color-emerald-400: oklch(76.5% 0.177 163.223);
    --color-emerald-500: oklch(69.6% 0.17 162.48);
    --color-emerald-600: oklch(59.6% 0.145 163.225);
    --color-emerald-700: oklch(50.8% 0.118 165.612);
    --color-emerald-800: oklch(43.2% 0.095 166.913);
    --color-emerald-900: oklch(37.8% 0.077 168.94);
    --color-emerald-950: oklch(26.2% 0.051 172.552);
    --color-teal-300: oklch(85.5% 0.138 181.071);
    --color-teal-400: oklch(77.7% 0.152 181.912);
    --color-teal-800: oklch(43.7% 0.078 188.216);
    --color-cyan-200: oklch(91.7% 0.08 205.041);
    --color-cyan-300: oklch(86.5% 0.127 207.078);
    --color-cyan-400: oklch(78.9% 0.154 211.53);
    --color-cyan-500: oklch(71.5% 0.143 215.221);
    --color-cyan-600: oklch(60.9% 0.126 221.723);
    --color-cyan-950: oklch(30.2% 0.056 229.695);
    --color-sky-100: oklch(95.1% 0.026 236.824);
    --color-sky-200: oklch(90.1% 0.058 230.902);
    --color-sky-300: oklch(82.8% 0.111 230.318);
    --color-sky-400: oklch(74.6% 0.16 232.661);
    --color-sky-700: oklch(50% 0.134 242.749);
    --color-sky-800: oklch(44.3% 0.11 240.79);
    --color-sky-950: oklch(29.3% 0.066 243.157);
    --color-blue-200: oklch(88.2% 0.059 254.128);
    --color-blue-300: oklch(80.9% 0.105 251.813);
    --color-blue-400: oklch(70.7% 0.165 254.624);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-blue-800: oklch(42.4% 0.199 265.638);
    --color-blue-950: oklch(28.2% 0.091 267.935);
    --color-indigo-300: oklch(78.5% 0.115 274.713);
    --color-violet-300: oklch(81.1% 0.111 293.571);
    --color-violet-800: oklch(43.2% 0.232 292.759);
    --color-violet-900: oklch(38% 0.189 293.745);
    --color-violet-950: oklch(28.3% 0.141 291.089);
    --color-purple-200: oklch(90.2% 0.063 306.703);
    --color-purple-300: oklch(82.7% 0.119 306.383);
    --color-purple-400: oklch(71.4% 0.203 305.504);
    --color-purple-500: oklch(62.7% 0.265 303.9);
    --color-purple-600: oklch(55.8% 0.288 302.321);
    --color-purple-700: oklch(49.6% 0.265 301.924);
    --color-purple-800: oklch(43.8% 0.218 303.724);
    --color-purple-900: oklch(38.1% 0.176 304.987);
    --color-purple-950: oklch(29.1% 0.149 302.717);
    --color-fuchsia-300: oklch(83.3% 0.145 321.434);
    --color-fuchsia-400: oklch(74% 0.238 322.16);
    --color-fuchsia-500: oklch(66.7% 0.295 322.15);
    --color-fuchsia-900: oklch(40.1% 0.17 325.612);
    --color-fuchsia-950: oklch(29.3% 0.136 325.661);
    --color-pink-300: oklch(82.3% 0.12 346.018);
    --color-pink-400: oklch(71.8% 0.202 349.761);
    --color-pink-500: oklch(65.6% 0.241 354.308);
    --color-slate-300: oklch(86.9% 0.022 252.894);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-gray-100: oklch(96.7% 0.003 264.542);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-gray-900: oklch(21% 0.034 264.665);
    --color-zinc-700: oklch(37% 0.013 285.805);
    --color-zinc-800: oklch(27.4% 0.006 286.033);
    --color-zinc-900: oklch(21% 0.006 285.885);
    --color-stone-50: oklch(98.5% 0.001 106.423);
    --color-stone-100: oklch(97% 0.001 106.424);
    --color-stone-200: oklch(92.3% 0.003 48.717);
    --color-stone-300: oklch(86.9% 0.005 56.366);
    --color-stone-400: oklch(70.9% 0.01 56.259);
    --color-stone-500: oklch(55.3% 0.013 58.071);
    --color-stone-600: oklch(44.4% 0.011 73.639);
    --color-stone-700: oklch(37.4% 0.01 67.558);
    --color-stone-800: oklch(26.8% 0.007 34.298);
    --color-stone-900: oklch(21.6% 0.006 56.043);
    --color-stone-950: oklch(14.7% 0.004 49.25);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.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: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --text-7xl: 4.5rem;
    --text-7xl--line-height: 1;
    --text-8xl: 6rem;
    --text-8xl--line-height: 1;
    --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: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --animate-bounce: bounce 1s infinite;
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-xl: 24px;
    --blur-2xl: 40px;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-abyss: #030304;
    --color-shadow: #0c0d12;
    --color-iron: #32353d;
    --color-tarnished: #4e535c;
    --color-bright-blood: #c82323;
    --color-sulfur: #e6b22e;
    --color-dim-parchment: #a19785;
    --font-gothic: 'Cinzel', serif;
    --font-fell: 'IM Fell English', serif;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden='until-found'])) {
    display: none !important;
  }
}
@layer utilities {
  .pointer-events-auto {
    pointer-events: auto;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }
  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }
  .inset-y-\[1px\] {
    inset-block: 1px;
  }
  .-top-1\.5 {
    top: calc(var(--spacing) * -1.5);
  }
  .-top-4 {
    top: calc(var(--spacing) * -4);
  }
  .-top-6 {
    top: calc(var(--spacing) * -6);
  }
  .-top-12 {
    top: calc(var(--spacing) * -12);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-0\.5 {
    top: calc(var(--spacing) * 0.5);
  }
  .top-1 {
    top: calc(var(--spacing) * 1);
  }
  .top-1\/2 {
    top: calc(1/2 * 100%);
  }
  .top-2 {
    top: calc(var(--spacing) * 2);
  }
  .top-2\.5 {
    top: calc(var(--spacing) * 2.5);
  }
  .top-3 {
    top: calc(var(--spacing) * 3);
  }
  .top-4 {
    top: calc(var(--spacing) * 4);
  }
  .top-6 {
    top: calc(var(--spacing) * 6);
  }
  .top-\[10px\] {
    top: 10px;
  }
  .top-full {
    top: 100%;
  }
  .-right-1 {
    right: calc(var(--spacing) * -1);
  }
  .-right-1\.5 {
    right: calc(var(--spacing) * -1.5);
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .right-0\.5 {
    right: calc(var(--spacing) * 0.5);
  }
  .right-1 {
    right: calc(var(--spacing) * 1);
  }
  .right-1\.5 {
    right: calc(var(--spacing) * 1.5);
  }
  .right-2 {
    right: calc(var(--spacing) * 2);
  }
  .right-2\.5 {
    right: calc(var(--spacing) * 2.5);
  }
  .right-3 {
    right: calc(var(--spacing) * 3);
  }
  .right-4 {
    right: calc(var(--spacing) * 4);
  }
  .right-5 {
    right: calc(var(--spacing) * 5);
  }
  .right-6 {
    right: calc(var(--spacing) * 6);
  }
  .-bottom-1 {
    bottom: calc(var(--spacing) * -1);
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .bottom-0\.5 {
    bottom: calc(var(--spacing) * 0.5);
  }
  .bottom-1 {
    bottom: calc(var(--spacing) * 1);
  }
  .bottom-1\.5 {
    bottom: calc(var(--spacing) * 1.5);
  }
  .bottom-2 {
    bottom: calc(var(--spacing) * 2);
  }
  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }
  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }
  .bottom-16 {
    bottom: calc(var(--spacing) * 16);
  }
  .bottom-full {
    bottom: 100%;
  }
  .-left-1\.5 {
    left: calc(var(--spacing) * -1.5);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .left-0\.5 {
    left: calc(var(--spacing) * 0.5);
  }
  .left-1 {
    left: calc(var(--spacing) * 1);
  }
  .left-1\/2 {
    left: calc(1/2 * 100%);
  }
  .left-2 {
    left: calc(var(--spacing) * 2);
  }
  .left-3 {
    left: calc(var(--spacing) * 3);
  }
  .left-\[1px\] {
    left: 1px;
  }
  .left-\[40rem\] {
    left: 40rem;
  }
  .left-\[184px\] {
    left: 184px;
  }
  .isolate {
    isolation: isolate;
  }
  .-z-10 {
    z-index: calc(10 * -1);
  }
  .z-0 {
    z-index: 0;
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-30 {
    z-index: 30;
  }
  .z-40 {
    z-index: 40;
  }
  .z-50 {
    z-index: 50;
  }
  .z-\[5\] {
    z-index: 5;
  }
  .z-\[6\] {
    z-index: 6;
  }
  .z-\[60\] {
    z-index: 60;
  }
  .z-\[75\] {
    z-index: 75;
  }
  .z-\[80\] {
    z-index: 80;
  }
  .z-\[100\] {
    z-index: 100;
  }
  .z-\[150\] {
    z-index: 150;
  }
  .z-\[160\] {
    z-index: 160;
  }
  .z-\[400\] {
    z-index: 400;
  }
  .z-\[500\] {
    z-index: 500;
  }
  .z-\[600\] {
    z-index: 600;
  }
  .z-\[605\] {
    z-index: 605;
  }
  .z-\[640\] {
    z-index: 640;
  }
  .z-\[650\] {
    z-index: 650;
  }
  .z-\[900\] {
    z-index: 900;
  }
  .z-\[1000\] {
    z-index: 1000;
  }
  .z-\[1005\] {
    z-index: 1005;
  }
  .z-\[1010\] {
    z-index: 1010;
  }
  .col-span-1 {
    grid-column: span 1 / span 1;
  }
  .col-span-2 {
    grid-column: span 2 / span 2;
  }
  .col-span-3 {
    grid-column: span 3 / span 3;
  }
  .col-span-full {
    grid-column: 1 / -1;
  }
  .col-start-1 {
    grid-column-start: 1;
  }
  .row-start-1 {
    grid-row-start: 1;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .-mx-1\.5 {
    margin-inline: calc(var(--spacing) * -1.5);
  }
  .-mx-2 {
    margin-inline: calc(var(--spacing) * -2);
  }
  .-mx-3 {
    margin-inline: calc(var(--spacing) * -3);
  }
  .-mx-6 {
    margin-inline: calc(var(--spacing) * -6);
  }
  .mx-0\.5 {
    margin-inline: calc(var(--spacing) * 0.5);
  }
  .mx-1 {
    margin-inline: calc(var(--spacing) * 1);
  }
  .mx-1\.5 {
    margin-inline: calc(var(--spacing) * 1.5);
  }
  .mx-3 {
    margin-inline: calc(var(--spacing) * 3);
  }
  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }
  .mx-5 {
    margin-inline: calc(var(--spacing) * 5);
  }
  .mx-6 {
    margin-inline: calc(var(--spacing) * 6);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .-my-0\.5 {
    margin-block: calc(var(--spacing) * -0.5);
  }
  .-my-1 {
    margin-block: calc(var(--spacing) * -1);
  }
  .-my-1\.5 {
    margin-block: calc(var(--spacing) * -1.5);
  }
  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }
  .my-1\.5 {
    margin-block: calc(var(--spacing) * 1.5);
  }
  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }
  .my-auto {
    margin-block: auto;
  }
  .-mt-6 {
    margin-top: calc(var(--spacing) * -6);
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-2\.5 {
    margin-top: calc(var(--spacing) * 2.5);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-9 {
    margin-top: calc(var(--spacing) * 9);
  }
  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }
  .mt-14 {
    margin-top: calc(var(--spacing) * 14);
  }
  .mt-24 {
    margin-top: calc(var(--spacing) * 24);
  }
  .mt-auto {
    margin-top: auto;
  }
  .mr-0\.5 {
    margin-right: calc(var(--spacing) * 0.5);
  }
  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }
  .mr-1\.5 {
    margin-right: calc(var(--spacing) * 1.5);
  }
  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .mr-4 {
    margin-right: calc(var(--spacing) * 4);
  }
  .mr-6 {
    margin-right: calc(var(--spacing) * 6);
  }
  .-mb-1 {
    margin-bottom: calc(var(--spacing) * -1);
  }
  .mb-0\.5 {
    margin-bottom: calc(var(--spacing) * 0.5);
  }
  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-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);
  }
  .mb-9 {
    margin-bottom: calc(var(--spacing) * 9);
  }
  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }
  .mb-12 {
    margin-bottom: calc(var(--spacing) * 12);
  }
  .ml-0\.5 {
    margin-left: calc(var(--spacing) * 0.5);
  }
  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }
  .ml-1\.5 {
    margin-left: calc(var(--spacing) * 1.5);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }
  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }
  .ml-\[3\.75rem\] {
    margin-left: 3.75rem;
  }
  .ml-auto {
    margin-left: auto;
  }
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .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;
  }
  .inline-grid {
    display: inline-grid;
  }
  .table {
    display: table;
  }
  .aspect-\[3\/4\] {
    aspect-ratio: 3/4;
  }
  .aspect-\[4\/3\] {
    aspect-ratio: 4/3;
  }
  .aspect-square {
    aspect-ratio: 1 / 1;
  }
  .size-3 {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }
  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }
  .\!h-2 {
    height: calc(var(--spacing) * 2) !important;
  }
  .h-1 {
    height: calc(var(--spacing) * 1);
  }
  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-7 {
    height: calc(var(--spacing) * 7);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-11 {
    height: calc(var(--spacing) * 11);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-14 {
    height: calc(var(--spacing) * 14);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-20 {
    height: calc(var(--spacing) * 20);
  }
  .h-24 {
    height: calc(var(--spacing) * 24);
  }
  .h-28 {
    height: calc(var(--spacing) * 28);
  }
  .h-32 {
    height: calc(var(--spacing) * 32);
  }
  .h-36 {
    height: calc(var(--spacing) * 36);
  }
  .h-40 {
    height: calc(var(--spacing) * 40);
  }
  .h-48 {
    height: calc(var(--spacing) * 48);
  }
  .h-56 {
    height: calc(var(--spacing) * 56);
  }
  .h-64 {
    height: calc(var(--spacing) * 64);
  }
  .h-320 {
    height: calc(var(--spacing) * 320);
  }
  .h-\[2px\] {
    height: 2px;
  }
  .h-\[60vmin\] {
    height: 60vmin;
  }
  .h-\[172px\] {
    height: 172px;
  }
  .h-\[208px\] {
    height: 208px;
  }
  .h-\[240px\] {
    height: 240px;
  }
  .h-\[260px\] {
    height: 260px;
  }
  .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-44 {
    max-height: calc(var(--spacing) * 44);
  }
  .max-h-80 {
    max-height: calc(var(--spacing) * 80);
  }
  .max-h-\[28vh\] {
    max-height: 28vh;
  }
  .max-h-\[60vh\] {
    max-height: 60vh;
  }
  .max-h-\[70vh\] {
    max-height: 70vh;
  }
  .max-h-\[72vh\] {
    max-height: 72vh;
  }
  .max-h-\[88dvh\] {
    max-height: 88dvh;
  }
  .max-h-\[90vh\] {
    max-height: 90vh;
  }
  .max-h-\[350px\] {
    max-height: 350px;
  }
  .max-h-\[500px\] {
    max-height: 500px;
  }
  .max-h-\[600px\] {
    max-height: 600px;
  }
  .max-h-full {
    max-height: 100%;
  }
  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }
  .min-h-\[4rem\] {
    min-height: 4rem;
  }
  .min-h-\[85vh\] {
    min-height: 85vh;
  }
  .min-h-\[110px\] {
    min-height: 110px;
  }
  .min-h-\[260px\] {
    min-height: 260px;
  }
  .min-h-\[400px\] {
    min-height: 400px;
  }
  .min-h-\[460px\] {
    min-height: 460px;
  }
  .min-h-\[500px\] {
    min-height: 500px;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-0 {
    width: calc(var(--spacing) * 0);
  }
  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }
  .w-1\/3 {
    width: calc(1/3 * 100%);
  }
  .w-1\/5 {
    width: calc(1/5 * 100%);
  }
  .w-2 {
    width: calc(var(--spacing) * 2);
  }
  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }
  .w-2\/5 {
    width: calc(2/5 * 100%);
  }
  .w-3 {
    width: calc(var(--spacing) * 3);
  }
  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-7 {
    width: calc(var(--spacing) * 7);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-9 {
    width: calc(var(--spacing) * 9);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-11 {
    width: calc(var(--spacing) * 11);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-14 {
    width: calc(var(--spacing) * 14);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-20 {
    width: calc(var(--spacing) * 20);
  }
  .w-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-28 {
    width: calc(var(--spacing) * 28);
  }
  .w-32 {
    width: calc(var(--spacing) * 32);
  }
  .w-36 {
    width: calc(var(--spacing) * 36);
  }
  .w-40 {
    width: calc(var(--spacing) * 40);
  }
  .w-44 {
    width: calc(var(--spacing) * 44);
  }
  .w-52 {
    width: calc(var(--spacing) * 52);
  }
  .w-56 {
    width: calc(var(--spacing) * 56);
  }
  .w-64 {
    width: calc(var(--spacing) * 64);
  }
  .w-72 {
    width: calc(var(--spacing) * 72);
  }
  .w-80 {
    width: calc(var(--spacing) * 80);
  }
  .w-96 {
    width: calc(var(--spacing) * 96);
  }
  .w-\[1px\] {
    width: 1px;
  }
  .w-\[60vmin\] {
    width: 60vmin;
  }
  .w-\[72px\] {
    width: 72px;
  }
  .w-\[160px\] {
    width: 160px;
  }
  .w-\[208px\] {
    width: 208px;
  }
  .w-\[240px\] {
    width: 240px;
  }
  .w-\[260px\] {
    width: 260px;
  }
  .w-\[300px\] {
    width: 300px;
  }
  .w-auto {
    width: auto;
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .w-max {
    width: max-content;
  }
  .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-36 {
    max-width: calc(var(--spacing) * 36);
  }
  .max-w-80 {
    max-width: calc(var(--spacing) * 80);
  }
  .max-w-\[2\.2rem\] {
    max-width: 2.2rem;
  }
  .max-w-\[16rem\] {
    max-width: 16rem;
  }
  .max-w-\[85vw\] {
    max-width: 85vw;
  }
  .max-w-\[90vw\] {
    max-width: 90vw;
  }
  .max-w-\[92vw\] {
    max-width: 92vw;
  }
  .max-w-\[110px\] {
    max-width: 110px;
  }
  .max-w-\[120px\] {
    max-width: 120px;
  }
  .max-w-\[150px\] {
    max-width: 150px;
  }
  .max-w-\[180px\] {
    max-width: 180px;
  }
  .max-w-\[220px\] {
    max-width: 220px;
  }
  .max-w-\[1560px\] {
    max-width: 1560px;
  }
  .max-w-\[1700px\] {
    max-width: 1700px;
  }
  .max-w-\[1800px\] {
    max-width: 1800px;
  }
  .max-w-full {
    max-width: 100%;
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .max-w-xs {
    max-width: var(--container-xs);
  }
  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }
  .min-w-\[16px\] {
    min-width: 16px;
  }
  .min-w-\[70px\] {
    min-width: 70px;
  }
  .min-w-\[90px\] {
    min-width: 90px;
  }
  .min-w-\[120px\] {
    min-width: 120px;
  }
  .min-w-\[220px\] {
    min-width: 220px;
  }
  .flex-1 {
    flex: 1;
  }
  .flex-none {
    flex: none;
  }
  .flex-shrink {
    flex-shrink: 1;
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  .shrink {
    flex-shrink: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .flex-grow {
    flex-grow: 1;
  }
  .grow {
    flex-grow: 1;
  }
  .basis-full {
    flex-basis: 100%;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .origin-center {
    transform-origin: center;
  }
  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-10 {
    --tw-translate-x: calc(var(--spacing) * -10);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-\[28\%\] {
    --tw-translate-x: calc(28% * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-\[72\%\] {
    --tw-translate-x: calc(72% * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-\[calc\(50\%\+10px\)\] {
    --tw-translate-x: calc(calc(50% + 10px) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-\[calc\(50\%\+42px\)\] {
    --tw-translate-x: calc(calc(50% + 42px) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-\[calc\(50\%\+66px\)\] {
    --tw-translate-x: calc(calc(50% + 66px) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-\[calc\(50\%-10px\)\] {
    --tw-translate-x: calc(calc(50% - 10px) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-\[calc\(50\%-66px\)\] {
    --tw-translate-x: calc(calc(50% - 66px) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-\[calc\(50\%±30px\)\] {
    --tw-translate-x: calc(calc(50%±30px) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-\[calc\(50\%±Npx\)\] {
    --tw-translate-x: calc(calc(50%±Npx) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-x-\[calc\(50\%±n\)\] {
    --tw-translate-x: calc(calc(50%±n) * -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: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-x-10 {
    --tw-translate-x: calc(var(--spacing) * 10);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-0 {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .translate-y-4 {
    --tw-translate-y: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .scale-90 {
    --tw-scale-x: 90%;
    --tw-scale-y: 90%;
    --tw-scale-z: 90%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-92 {
    --tw-scale-x: 92%;
    --tw-scale-y: 92%;
    --tw-scale-z: 92%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-95 {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-100 {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-105 {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-110 {
    --tw-scale-x: 110%;
    --tw-scale-y: 110%;
    --tw-scale-z: 110%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .scale-\[1\.6\] {
    scale: 1.6;
  }
  .scale-\[1\.15\] {
    scale: 1.15;
  }
  .-rotate-90 {
    rotate: calc(90deg * -1);
  }
  .-rotate-\[5deg\] {
    rotate: calc(5deg * -1);
  }
  .rotate-0 {
    rotate: 0deg;
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .rotate-\[5deg\] {
    rotate: 5deg;
  }
  .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-help {
    cursor: help;
  }
  .cursor-move {
    cursor: move;
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .cursor-zoom-in {
    cursor: zoom-in;
  }
  .cursor-zoom-out {
    cursor: zoom-out;
  }
  .resize {
    resize: both;
  }
  .resize-none {
    resize: none;
  }
  .list-inside {
    list-style-position: inside;
  }
  .list-decimal {
    list-style-type: decimal;
  }
  .list-none {
    list-style-type: none;
  }
  .appearance-none {
    appearance: none;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .grid-cols-\[1fr_70px_70px_80px_32px\] {
    grid-template-columns: 1fr 70px 70px 80px 32px;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-row {
    flex-direction: row;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .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;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .gap-0 {
    gap: calc(var(--spacing) * 0);
  }
  .gap-0\.5 {
    gap: calc(var(--spacing) * 0.5);
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-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);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }
  .gap-\[3px\] {
    gap: 3px;
  }
  .space-y-0 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-0\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-1 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-1\.5 {
    :where(& > :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)));
    }
  }
  .space-y-2 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-2\.5 {
    :where(& > :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)));
    }
  }
  .space-y-3 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-3\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-4 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-6 {
    :where(& > :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)));
    }
  }
  .space-y-8 {
    :where(& > :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)));
    }
  }
  .space-y-10 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-12 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-16 {
    :where(& > :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)));
    }
  }
  .space-y-24 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 24) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 24) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }
  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }
  .gap-x-7 {
    column-gap: calc(var(--spacing) * 7);
  }
  .gap-x-8 {
    column-gap: calc(var(--spacing) * 8);
  }
  .space-x-2 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-3 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .space-x-4 {
    :where(& > :not(:last-child)) {
      --tw-space-x-reverse: 0;
      margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
      margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
    }
  }
  .gap-y-1 {
    row-gap: calc(var(--spacing) * 1);
  }
  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }
  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }
  .gap-y-4 {
    row-gap: calc(var(--spacing) * 4);
  }
  .divide-y {
    :where(& > :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)));
    }
  }
  .divide-\[var\(--ab\)\] {
    :where(& > :not(:last-child)) {
      border-color: var(--ab);
    }
  }
  .divide-\[var\(--ab\)\]\/50 {
    :where(& > :not(:last-child)) {
      border-color: var(--ab);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--ab) 50%, transparent);
      }
    }
  }
  .self-center {
    align-self: center;
  }
  .self-end {
    align-self: flex-end;
  }
  .self-start {
    align-self: flex-start;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .\!overflow-hidden {
    overflow: hidden !important;
  }
  .overflow-auto {
    overflow: auto;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-visible {
    overflow: visible;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-x-clip {
    overflow-x: clip;
  }
  .overflow-x-hidden {
    overflow-x: hidden;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-\[5px\] {
    border-radius: 5px;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-md {
    border-radius: var(--radius-md);
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .rounded-br {
    border-bottom-right-radius: 0.25rem;
  }
  .rounded-bl {
    border-bottom-left-radius: 0.25rem;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-1 {
    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-0 {
    border-top-style: var(--tw-border-style);
    border-top-width: 0px;
  }
  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }
  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }
  .border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-\[\#1a5c2a\] {
    border-color: #1a5c2a;
  }
  .border-\[\#3a2f23\] {
    border-color: #3a2f23;
  }
  .border-\[\#4a1530\] {
    border-color: #4a1530;
  }
  .border-\[\#5c4a30\] {
    border-color: #5c4a30;
  }
  .border-\[\#5c4a30\]\/20 {
    border-color: color-mix(in oklab, #5c4a30 20%, transparent);
  }
  .border-\[\#5c4a30\]\/25 {
    border-color: color-mix(in oklab, #5c4a30 25%, transparent);
  }
  .border-\[\#5c4a30\]\/30 {
    border-color: color-mix(in oklab, #5c4a30 30%, transparent);
  }
  .border-\[\#5c4a30\]\/40 {
    border-color: color-mix(in oklab, #5c4a30 40%, transparent);
  }
  .border-\[\#5c4a30\]\/50 {
    border-color: color-mix(in oklab, #5c4a30 50%, transparent);
  }
  .border-\[\#5c4a30\]\/60 {
    border-color: color-mix(in oklab, #5c4a30 60%, transparent);
  }
  .border-\[\#5c4a30\]\/80 {
    border-color: color-mix(in oklab, #5c4a30 80%, transparent);
  }
  .border-\[\#7a1515\] {
    border-color: #7a1515;
  }
  .border-\[\#8b6e18\]\/30 {
    border-color: color-mix(in oklab, #8b6e18 30%, transparent);
  }
  .border-\[\#333\] {
    border-color: #333;
  }
  .border-\[\#5865F2\]\/50 {
    border-color: color-mix(in oklab, #5865F2 50%, transparent);
  }
  .border-\[\#5865F2\]\/60 {
    border-color: color-mix(in oklab, #5865F2 60%, transparent);
  }
  .border-\[\#c8a030\] {
    border-color: #c8a030;
  }
  .border-\[\#c0532f\] {
    border-color: #c0532f;
  }
  .border-\[\#c03030\]\/40 {
    border-color: color-mix(in oklab, #c03030 40%, transparent);
  }
  .border-\[\#c03030\]\/50 {
    border-color: color-mix(in oklab, #c03030 50%, transparent);
  }
  .border-\[\#f3a83b\] {
    border-color: #f3a83b;
  }
  .border-\[\#f3a83b\]\/10 {
    border-color: color-mix(in oklab, #f3a83b 10%, transparent);
  }
  .border-\[\#f3a83b\]\/15 {
    border-color: color-mix(in oklab, #f3a83b 15%, transparent);
  }
  .border-\[\#f3a83b\]\/20 {
    border-color: color-mix(in oklab, #f3a83b 20%, transparent);
  }
  .border-\[\#f3a83b\]\/25 {
    border-color: color-mix(in oklab, #f3a83b 25%, transparent);
  }
  .border-\[\#f3a83b\]\/30 {
    border-color: color-mix(in oklab, #f3a83b 30%, transparent);
  }
  .border-\[\#f3a83b\]\/35 {
    border-color: color-mix(in oklab, #f3a83b 35%, transparent);
  }
  .border-\[\#f3a83b\]\/40 {
    border-color: color-mix(in oklab, #f3a83b 40%, transparent);
  }
  .border-\[\#f3a83b\]\/50 {
    border-color: color-mix(in oklab, #f3a83b 50%, transparent);
  }
  .border-\[\#f3a83b\]\/60 {
    border-color: color-mix(in oklab, #f3a83b 60%, transparent);
  }
  .border-\[var\(--ab\)\] {
    border-color: var(--ab);
  }
  .border-\[var\(--ab\)\]\/40 {
    border-color: var(--ab);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--ab) 40%, transparent);
    }
  }
  .border-\[var\(--ab\)\]\/50 {
    border-color: var(--ab);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--ab) 50%, transparent);
    }
  }
  .border-\[var\(--ab2\)\] {
    border-color: var(--ab2);
  }
  .border-\[var\(--ab2\)\]\/50 {
    border-color: var(--ab2);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--ab2) 50%, transparent);
    }
  }
  .border-\[var\(--acr\)\] {
    border-color: var(--acr);
  }
  .border-\[var\(--acr\)\]\/40 {
    border-color: var(--acr);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--acr) 40%, transparent);
    }
  }
  .border-\[var\(--acr2\)\]\/70 {
    border-color: var(--acr2);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--acr2) 70%, transparent);
    }
  }
  .border-\[var\(--agd\)\] {
    border-color: var(--agd);
  }
  .border-\[var\(--agd\)\]\/20 {
    border-color: var(--agd);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--agd) 20%, transparent);
    }
  }
  .border-\[var\(--agd\)\]\/40 {
    border-color: var(--agd);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--agd) 40%, transparent);
    }
  }
  .border-\[var\(--agd2\)\] {
    border-color: var(--agd2);
  }
  .border-\[var\(--agd2\)\]\/40 {
    border-color: var(--agd2);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--agd2) 40%, transparent);
    }
  }
  .border-\[var\(--agd2\)\]\/50 {
    border-color: var(--agd2);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--agd2) 50%, transparent);
    }
  }
  .border-\[var\(--agr\)\]\/40 {
    border-color: var(--agr);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--agr) 40%, transparent);
    }
  }
  .border-\[var\(--color-sulfur\)\]\/25 {
    border-color: color-mix(in srgb, #e6b22e 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-sulfur) 25%, transparent);
    }
  }
  .border-\[var\(--sg-teal-glow\)\]\/30 {
    border-color: var(--sg-teal-glow);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--sg-teal-glow) 30%, transparent);
    }
  }
  .border-\[var\(--sg-win-frame\)\] {
    border-color: var(--sg-win-frame);
  }
  .border-amber-400\/70 {
    border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-amber-400) 70%, transparent);
    }
  }
  .border-amber-500 {
    border-color: var(--color-amber-500);
  }
  .border-amber-500\/50 {
    border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-amber-500) 50%, transparent);
    }
  }
  .border-amber-600 {
    border-color: var(--color-amber-600);
  }
  .border-amber-600\/40 {
    border-color: color-mix(in srgb, oklch(66.6% 0.179 58.318) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-amber-600) 40%, transparent);
    }
  }
  .border-amber-600\/70 {
    border-color: color-mix(in srgb, oklch(66.6% 0.179 58.318) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-amber-600) 70%, transparent);
    }
  }
  .border-amber-700\/40 {
    border-color: color-mix(in srgb, oklch(55.5% 0.163 48.998) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-amber-700) 40%, transparent);
    }
  }
  .border-amber-700\/50 {
    border-color: color-mix(in srgb, oklch(55.5% 0.163 48.998) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-amber-700) 50%, transparent);
    }
  }
  .border-amber-700\/60 {
    border-color: color-mix(in srgb, oklch(55.5% 0.163 48.998) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-amber-700) 60%, transparent);
    }
  }
  .border-amber-800 {
    border-color: var(--color-amber-800);
  }
  .border-amber-800\/30 {
    border-color: color-mix(in srgb, oklch(47.3% 0.137 46.201) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-amber-800) 30%, transparent);
    }
  }
  .border-amber-800\/40 {
    border-color: color-mix(in srgb, oklch(47.3% 0.137 46.201) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-amber-800) 40%, transparent);
    }
  }
  .border-amber-800\/50 {
    border-color: color-mix(in srgb, oklch(47.3% 0.137 46.201) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-amber-800) 50%, transparent);
    }
  }
  .border-amber-900 {
    border-color: var(--color-amber-900);
  }
  .border-amber-900\/40 {
    border-color: color-mix(in srgb, oklch(41.4% 0.112 45.904) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-amber-900) 40%, transparent);
    }
  }
  .border-amber-900\/60 {
    border-color: color-mix(in srgb, oklch(41.4% 0.112 45.904) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-amber-900) 60%, transparent);
    }
  }
  .border-amber-950\/30 {
    border-color: color-mix(in srgb, oklch(27.9% 0.077 45.635) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-amber-950) 30%, transparent);
    }
  }
  .border-black\/30 {
    border-color: color-mix(in srgb, #000 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-black) 30%, transparent);
    }
  }
  .border-black\/40 {
    border-color: color-mix(in srgb, #000 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }
  .border-blue-600\/40 {
    border-color: color-mix(in srgb, oklch(54.6% 0.245 262.881) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-blue-600) 40%, transparent);
    }
  }
  .border-blue-800\/50 {
    border-color: color-mix(in srgb, oklch(42.4% 0.199 265.638) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-blue-800) 50%, transparent);
    }
  }
  .border-blue-800\/60 {
    border-color: color-mix(in srgb, oklch(42.4% 0.199 265.638) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-blue-800) 60%, transparent);
    }
  }
  .border-cyan-500 {
    border-color: var(--color-cyan-500);
  }
  .border-cyan-500\/20 {
    border-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-cyan-500) 20%, transparent);
    }
  }
  .border-emerald-500\/50 {
    border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-emerald-500) 50%, transparent);
    }
  }
  .border-emerald-500\/60 {
    border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-emerald-500) 60%, transparent);
    }
  }
  .border-emerald-600 {
    border-color: var(--color-emerald-600);
  }
  .border-emerald-600\/60 {
    border-color: color-mix(in srgb, oklch(59.6% 0.145 163.225) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-emerald-600) 60%, transparent);
    }
  }
  .border-emerald-600\/70 {
    border-color: color-mix(in srgb, oklch(59.6% 0.145 163.225) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-emerald-600) 70%, transparent);
    }
  }
  .border-emerald-700 {
    border-color: var(--color-emerald-700);
  }
  .border-emerald-700\/40 {
    border-color: color-mix(in srgb, oklch(50.8% 0.118 165.612) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-emerald-700) 40%, transparent);
    }
  }
  .border-emerald-700\/50 {
    border-color: color-mix(in srgb, oklch(50.8% 0.118 165.612) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-emerald-700) 50%, transparent);
    }
  }
  .border-emerald-800 {
    border-color: var(--color-emerald-800);
  }
  .border-emerald-800\/30 {
    border-color: color-mix(in srgb, oklch(43.2% 0.095 166.913) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-emerald-800) 30%, transparent);
    }
  }
  .border-emerald-800\/50 {
    border-color: color-mix(in srgb, oklch(43.2% 0.095 166.913) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-emerald-800) 50%, transparent);
    }
  }
  .border-emerald-800\/60 {
    border-color: color-mix(in srgb, oklch(43.2% 0.095 166.913) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-emerald-800) 60%, transparent);
    }
  }
  .border-emerald-900\/60 {
    border-color: color-mix(in srgb, oklch(37.8% 0.077 168.94) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-emerald-900) 60%, transparent);
    }
  }
  .border-fuchsia-900 {
    border-color: var(--color-fuchsia-900);
  }
  .border-fuchsia-900\/50 {
    border-color: color-mix(in srgb, oklch(40.1% 0.17 325.612) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-fuchsia-900) 50%, transparent);
    }
  }
  .border-gray-700 {
    border-color: var(--color-gray-700);
  }
  .border-gray-800 {
    border-color: var(--color-gray-800);
  }
  .border-gray-800\/60 {
    border-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-gray-800) 60%, transparent);
    }
  }
  .border-gray-900 {
    border-color: var(--color-gray-900);
  }
  .border-green-800\/50 {
    border-color: color-mix(in srgb, oklch(44.8% 0.119 151.328) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-green-800) 50%, transparent);
    }
  }
  .border-green-900 {
    border-color: var(--color-green-900);
  }
  .border-orange-500\/60 {
    border-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-orange-500) 60%, transparent);
    }
  }
  .border-orange-700 {
    border-color: var(--color-orange-700);
  }
  .border-orange-800\/50 {
    border-color: color-mix(in srgb, oklch(47% 0.157 37.304) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-orange-800) 50%, transparent);
    }
  }
  .border-purple-300\/25 {
    border-color: color-mix(in srgb, oklch(82.7% 0.119 306.383) 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-purple-300) 25%, transparent);
    }
  }
  .border-purple-500\/50 {
    border-color: color-mix(in srgb, oklch(62.7% 0.265 303.9) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-purple-500) 50%, transparent);
    }
  }
  .border-purple-700 {
    border-color: var(--color-purple-700);
  }
  .border-purple-800\/40 {
    border-color: color-mix(in srgb, oklch(43.8% 0.218 303.724) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-purple-800) 40%, transparent);
    }
  }
  .border-purple-800\/50 {
    border-color: color-mix(in srgb, oklch(43.8% 0.218 303.724) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-purple-800) 50%, transparent);
    }
  }
  .border-purple-800\/60 {
    border-color: color-mix(in srgb, oklch(43.8% 0.218 303.724) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-purple-800) 60%, transparent);
    }
  }
  .border-red-500 {
    border-color: var(--color-red-500);
  }
  .border-red-500\/20 {
    border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
    }
  }
  .border-red-500\/50 {
    border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
    }
  }
  .border-red-500\/70 {
    border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-500) 70%, transparent);
    }
  }
  .border-red-600 {
    border-color: var(--color-red-600);
  }
  .border-red-600\/50 {
    border-color: color-mix(in srgb, oklch(57.7% 0.245 27.325) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-600) 50%, transparent);
    }
  }
  .border-red-600\/60 {
    border-color: color-mix(in srgb, oklch(57.7% 0.245 27.325) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-600) 60%, transparent);
    }
  }
  .border-red-600\/70 {
    border-color: color-mix(in srgb, oklch(57.7% 0.245 27.325) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-600) 70%, transparent);
    }
  }
  .border-red-700 {
    border-color: var(--color-red-700);
  }
  .border-red-700\/40 {
    border-color: color-mix(in srgb, oklch(50.5% 0.213 27.518) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-700) 40%, transparent);
    }
  }
  .border-red-700\/60 {
    border-color: color-mix(in srgb, oklch(50.5% 0.213 27.518) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-700) 60%, transparent);
    }
  }
  .border-red-700\/70 {
    border-color: color-mix(in srgb, oklch(50.5% 0.213 27.518) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-700) 70%, transparent);
    }
  }
  .border-red-800 {
    border-color: var(--color-red-800);
  }
  .border-red-800\/50 {
    border-color: color-mix(in srgb, oklch(44.4% 0.177 26.899) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-800) 50%, transparent);
    }
  }
  .border-red-800\/60 {
    border-color: color-mix(in srgb, oklch(44.4% 0.177 26.899) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-800) 60%, transparent);
    }
  }
  .border-red-900 {
    border-color: var(--color-red-900);
  }
  .border-red-900\/40 {
    border-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-900) 40%, transparent);
    }
  }
  .border-red-900\/50 {
    border-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-900) 50%, transparent);
    }
  }
  .border-red-900\/60 {
    border-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-red-900) 60%, transparent);
    }
  }
  .border-red-950 {
    border-color: var(--color-red-950);
  }
  .border-sky-700\/50 {
    border-color: color-mix(in srgb, oklch(50% 0.134 242.749) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-sky-700) 50%, transparent);
    }
  }
  .border-sky-700\/60 {
    border-color: color-mix(in srgb, oklch(50% 0.134 242.749) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-sky-700) 60%, transparent);
    }
  }
  .border-sky-800\/50 {
    border-color: color-mix(in srgb, oklch(44.3% 0.11 240.79) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-sky-800) 50%, transparent);
    }
  }
  .border-stone-600 {
    border-color: var(--color-stone-600);
  }
  .border-stone-700 {
    border-color: var(--color-stone-700);
  }
  .border-stone-700\/50 {
    border-color: color-mix(in srgb, oklch(37.4% 0.01 67.558) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-stone-700) 50%, transparent);
    }
  }
  .border-stone-700\/60 {
    border-color: color-mix(in srgb, oklch(37.4% 0.01 67.558) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-stone-700) 60%, transparent);
    }
  }
  .border-stone-800 {
    border-color: var(--color-stone-800);
  }
  .border-stone-800\/40 {
    border-color: color-mix(in srgb, oklch(26.8% 0.007 34.298) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-stone-800) 40%, transparent);
    }
  }
  .border-stone-800\/60 {
    border-color: color-mix(in srgb, oklch(26.8% 0.007 34.298) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-stone-800) 60%, transparent);
    }
  }
  .border-transparent {
    border-color: transparent;
  }
  .border-violet-800\/50 {
    border-color: color-mix(in srgb, oklch(43.2% 0.232 292.759) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-violet-800) 50%, transparent);
    }
  }
  .border-violet-900\/40 {
    border-color: color-mix(in srgb, oklch(38% 0.189 293.745) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-violet-900) 40%, transparent);
    }
  }
  .border-white\/5 {
    border-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }
  .border-white\/15 {
    border-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }
  .border-yellow-800\/40 {
    border-color: color-mix(in srgb, oklch(47.6% 0.114 61.907) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-yellow-800) 40%, transparent);
    }
  }
  .border-yellow-800\/60 {
    border-color: color-mix(in srgb, oklch(47.6% 0.114 61.907) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-yellow-800) 60%, transparent);
    }
  }
  .border-yellow-900\/50 {
    border-color: color-mix(in srgb, oklch(42.1% 0.095 57.708) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in oklab, var(--color-yellow-900) 50%, transparent);
    }
  }
  .border-zinc-700 {
    border-color: var(--color-zinc-700);
  }
  .bg-\[\#0a0a0b\] {
    background-color: #0a0a0b;
  }
  .bg-\[\#0a0a0c\] {
    background-color: #0a0a0c;
  }
  .bg-\[\#0a0514\] {
    background-color: #0a0514;
  }
  .bg-\[\#0b1410\] {
    background-color: #0b1410;
  }
  .bg-\[\#0c051a\]\/95 {
    background-color: color-mix(in oklab, #0c051a 95%, transparent);
  }
  .bg-\[\#0e2a3d\] {
    background-color: #0e2a3d;
  }
  .bg-\[\#0e2a16\] {
    background-color: #0e2a16;
  }
  .bg-\[\#000\]\/80 {
    background-color: color-mix(in oklab, #000 80%, transparent);
  }
  .bg-\[\#000\]\/95 {
    background-color: color-mix(in oklab, #000 95%, transparent);
  }
  .bg-\[\#1b0d2b\] {
    background-color: #1b0d2b;
  }
  .bg-\[\#1c082e\] {
    background-color: #1c082e;
  }
  .bg-\[\#1c082e\]\/80 {
    background-color: color-mix(in oklab, #1c082e 80%, transparent);
  }
  .bg-\[\#2a0a10\]\/85 {
    background-color: color-mix(in oklab, #2a0a10 85%, transparent);
  }
  .bg-\[\#2a0e0e\] {
    background-color: #2a0e0e;
  }
  .bg-\[\#2a8c3a\] {
    background-color: #2a8c3a;
  }
  .bg-\[\#3a9d4a\] {
    background-color: #3a9d4a;
  }
  .bg-\[\#3d0e14\] {
    background-color: #3d0e14;
  }
  .bg-\[\#3d2a08\]\/20 {
    background-color: color-mix(in oklab, #3d2a08 20%, transparent);
  }
  .bg-\[\#5c4a30\]\/40 {
    background-color: color-mix(in oklab, #5c4a30 40%, transparent);
  }
  .bg-\[\#7a1515\]\/10 {
    background-color: color-mix(in oklab, #7a1515 10%, transparent);
  }
  .bg-\[\#7a1515\]\/20 {
    background-color: color-mix(in oklab, #7a1515 20%, transparent);
  }
  .bg-\[\#170a2b\] {
    background-color: #170a2b;
  }
  .bg-\[\#201f22\] {
    background-color: #201f22;
  }
  .bg-\[\#201f23\]\/95 {
    background-color: color-mix(in oklab, #201f23 95%, transparent);
  }
  .bg-\[\#241c12\] {
    background-color: #241c12;
  }
  .bg-\[\#302f34\] {
    background-color: #302f34;
  }
  .bg-\[\#302f34\]\/90 {
    background-color: color-mix(in oklab, #302f34 90%, transparent);
  }
  .bg-\[\#5865F2\] {
    background-color: #5865F2;
  }
  .bg-\[\#5865F2\]\/20 {
    background-color: color-mix(in oklab, #5865F2 20%, transparent);
  }
  .bg-\[\#09090c\] {
    background-color: #09090c;
  }
  .bg-\[\#15110b\] {
    background-color: #15110b;
  }
  .bg-\[\#16131b\] {
    background-color: #16131b;
  }
  .bg-\[\#22103d\] {
    background-color: #22103d;
  }
  .bg-\[\#28272b\] {
    background-color: #28272b;
  }
  .bg-\[\#030304\] {
    background-color: #030304;
  }
  .bg-\[\#050507\] {
    background-color: #050507;
  }
  .bg-\[\#070709\] {
    background-color: #070709;
  }
  .bg-\[\#131115\] {
    background-color: #131115;
  }
  .bg-\[\#171719\] {
    background-color: #171719;
  }
  .bg-\[\#212023\] {
    background-color: #212023;
  }
  .bg-\[\#262528\] {
    background-color: #262528;
  }
  .bg-\[\#262529\] {
    background-color: #262529;
  }
  .bg-\[\#c03030\] {
    background-color: #c03030;
  }
  .bg-\[\#c03030\]\/10 {
    background-color: color-mix(in oklab, #c03030 10%, transparent);
  }
  .bg-\[\#f3a83b\] {
    background-color: #f3a83b;
  }
  .bg-\[\#f3a83b\]\/10 {
    background-color: color-mix(in oklab, #f3a83b 10%, transparent);
  }
  .bg-\[\#f3a83b\]\/20 {
    background-color: color-mix(in oklab, #f3a83b 20%, transparent);
  }
  .bg-\[\#f3a83b\]\/50 {
    background-color: color-mix(in oklab, #f3a83b 50%, transparent);
  }
  .bg-\[var\(--ab\)\] {
    background-color: var(--ab);
  }
  .bg-\[var\(--ab\)\]\/30 {
    background-color: var(--ab);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ab) 30%, transparent);
    }
  }
  .bg-\[var\(--ab2\)\] {
    background-color: var(--ab2);
  }
  .bg-\[var\(--abg\)\] {
    background-color: var(--abg);
  }
  .bg-\[var\(--abg\)\]\/40 {
    background-color: var(--abg);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--abg) 40%, transparent);
    }
  }
  .bg-\[var\(--abg\)\]\/50 {
    background-color: var(--abg);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--abg) 50%, transparent);
    }
  }
  .bg-\[var\(--abg\)\]\/60 {
    background-color: var(--abg);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--abg) 60%, transparent);
    }
  }
  .bg-\[var\(--abg\)\]\/90 {
    background-color: var(--abg);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--abg) 90%, transparent);
    }
  }
  .bg-\[var\(--acr\)\] {
    background-color: var(--acr);
  }
  .bg-\[var\(--acr\)\]\/15 {
    background-color: var(--acr);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--acr) 15%, transparent);
    }
  }
  .bg-\[var\(--acr\)\]\/90 {
    background-color: var(--acr);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--acr) 90%, transparent);
    }
  }
  .bg-\[var\(--ael\)\] {
    background-color: var(--ael);
  }
  .bg-\[var\(--ael\)\]\/50 {
    background-color: var(--ael);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--ael) 50%, transparent);
    }
  }
  .bg-\[var\(--agd\)\] {
    background-color: var(--agd);
  }
  .bg-\[var\(--agd\)\]\/\[0\.05\] {
    background-color: var(--agd);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--agd) 5%, transparent);
    }
  }
  .bg-\[var\(--agd2\)\] {
    background-color: var(--agd2);
  }
  .bg-\[var\(--agd2\)\]\/5 {
    background-color: var(--agd2);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--agd2) 5%, transparent);
    }
  }
  .bg-\[var\(--agd2\)\]\/10 {
    background-color: var(--agd2);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--agd2) 10%, transparent);
    }
  }
  .bg-\[var\(--agd2\)\]\/15 {
    background-color: var(--agd2);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--agd2) 15%, transparent);
    }
  }
  .bg-\[var\(--agd2\)\]\/20 {
    background-color: var(--agd2);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--agd2) 20%, transparent);
    }
  }
  .bg-\[var\(--agr\)\] {
    background-color: var(--agr);
  }
  .bg-\[var\(--agr\)\]\/10 {
    background-color: var(--agr);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--agr) 10%, transparent);
    }
  }
  .bg-\[var\(--agr\)\]\/15 {
    background-color: var(--agr);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--agr) 15%, transparent);
    }
  }
  .bg-\[var\(--asf\)\] {
    background-color: var(--asf);
  }
  .bg-\[var\(--asf\)\]\/30 {
    background-color: var(--asf);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--asf) 30%, transparent);
    }
  }
  .bg-\[var\(--at3\)\] {
    background-color: var(--at3);
  }
  .bg-amber-500 {
    background-color: var(--color-amber-500);
  }
  .bg-amber-600\/30 {
    background-color: color-mix(in srgb, oklch(66.6% 0.179 58.318) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-600) 30%, transparent);
    }
  }
  .bg-amber-700 {
    background-color: var(--color-amber-700);
  }
  .bg-amber-800 {
    background-color: var(--color-amber-800);
  }
  .bg-amber-900\/40 {
    background-color: color-mix(in srgb, oklch(41.4% 0.112 45.904) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-900) 40%, transparent);
    }
  }
  .bg-amber-950\/20 {
    background-color: color-mix(in srgb, oklch(27.9% 0.077 45.635) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-950) 20%, transparent);
    }
  }
  .bg-amber-950\/30 {
    background-color: color-mix(in srgb, oklch(27.9% 0.077 45.635) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-950) 30%, transparent);
    }
  }
  .bg-amber-950\/40 {
    background-color: color-mix(in srgb, oklch(27.9% 0.077 45.635) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-950) 40%, transparent);
    }
  }
  .bg-black {
    background-color: var(--color-black);
  }
  .bg-black\/10 {
    background-color: color-mix(in srgb, #000 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
    }
  }
  .bg-black\/20 {
    background-color: color-mix(in srgb, #000 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
    }
  }
  .bg-black\/30 {
    background-color: color-mix(in srgb, #000 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
    }
  }
  .bg-black\/35 {
    background-color: color-mix(in srgb, #000 35%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 35%, transparent);
    }
  }
  .bg-black\/40 {
    background-color: color-mix(in srgb, #000 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }
  .bg-black\/45 {
    background-color: color-mix(in srgb, #000 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 45%, transparent);
    }
  }
  .bg-black\/50 {
    background-color: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }
  .bg-black\/55 {
    background-color: color-mix(in srgb, #000 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 55%, transparent);
    }
  }
  .bg-black\/60 {
    background-color: color-mix(in srgb, #000 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
  }
  .bg-black\/70 {
    background-color: color-mix(in srgb, #000 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
    }
  }
  .bg-black\/75 {
    background-color: color-mix(in srgb, #000 75%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 75%, transparent);
    }
  }
  .bg-black\/80 {
    background-color: color-mix(in srgb, #000 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
    }
  }
  .bg-black\/85 {
    background-color: color-mix(in srgb, #000 85%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 85%, transparent);
    }
  }
  .bg-black\/90 {
    background-color: color-mix(in srgb, #000 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 90%, transparent);
    }
  }
  .bg-black\/95 {
    background-color: color-mix(in srgb, #000 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 95%, transparent);
    }
  }
  .bg-blue-600\/30 {
    background-color: color-mix(in srgb, oklch(54.6% 0.245 262.881) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-blue-600) 30%, transparent);
    }
  }
  .bg-blue-950\/40 {
    background-color: color-mix(in srgb, oklch(28.2% 0.091 267.935) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-blue-950) 40%, transparent);
    }
  }
  .bg-blue-950\/50 {
    background-color: color-mix(in srgb, oklch(28.2% 0.091 267.935) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-blue-950) 50%, transparent);
    }
  }
  .bg-cyan-500 {
    background-color: var(--color-cyan-500);
  }
  .bg-cyan-500\/80 {
    background-color: color-mix(in srgb, oklch(71.5% 0.143 215.221) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-cyan-500) 80%, transparent);
    }
  }
  .bg-cyan-950 {
    background-color: var(--color-cyan-950);
  }
  .bg-emerald-500 {
    background-color: var(--color-emerald-500);
  }
  .bg-emerald-600 {
    background-color: var(--color-emerald-600);
  }
  .bg-emerald-900\/30 {
    background-color: color-mix(in srgb, oklch(37.8% 0.077 168.94) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-900) 30%, transparent);
    }
  }
  .bg-emerald-900\/50 {
    background-color: color-mix(in srgb, oklch(37.8% 0.077 168.94) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-900) 50%, transparent);
    }
  }
  .bg-emerald-900\/60 {
    background-color: color-mix(in srgb, oklch(37.8% 0.077 168.94) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-900) 60%, transparent);
    }
  }
  .bg-emerald-950\/15 {
    background-color: color-mix(in srgb, oklch(26.2% 0.051 172.552) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-950) 15%, transparent);
    }
  }
  .bg-emerald-950\/30 {
    background-color: color-mix(in srgb, oklch(26.2% 0.051 172.552) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-950) 30%, transparent);
    }
  }
  .bg-emerald-950\/40 {
    background-color: color-mix(in srgb, oklch(26.2% 0.051 172.552) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-950) 40%, transparent);
    }
  }
  .bg-emerald-950\/50 {
    background-color: color-mix(in srgb, oklch(26.2% 0.051 172.552) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-950) 50%, transparent);
    }
  }
  .bg-emerald-950\/95 {
    background-color: color-mix(in srgb, oklch(26.2% 0.051 172.552) 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-emerald-950) 95%, transparent);
    }
  }
  .bg-gray-900 {
    background-color: var(--color-gray-900);
  }
  .bg-green-500 {
    background-color: var(--color-green-500);
  }
  .bg-green-950\/40 {
    background-color: color-mix(in srgb, oklch(26.6% 0.065 152.934) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-green-950) 40%, transparent);
    }
  }
  .bg-orange-900\/30 {
    background-color: color-mix(in srgb, oklch(40.8% 0.123 38.172) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-orange-900) 30%, transparent);
    }
  }
  .bg-orange-950\/40 {
    background-color: color-mix(in srgb, oklch(26.6% 0.079 36.259) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-orange-950) 40%, transparent);
    }
  }
  .bg-purple-400 {
    background-color: var(--color-purple-400);
  }
  .bg-purple-600 {
    background-color: var(--color-purple-600);
  }
  .bg-purple-900\/30 {
    background-color: color-mix(in srgb, oklch(38.1% 0.176 304.987) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-purple-900) 30%, transparent);
    }
  }
  .bg-purple-950\/20 {
    background-color: color-mix(in srgb, oklch(29.1% 0.149 302.717) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-purple-950) 20%, transparent);
    }
  }
  .bg-purple-950\/40 {
    background-color: color-mix(in srgb, oklch(29.1% 0.149 302.717) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-purple-950) 40%, transparent);
    }
  }
  .bg-purple-950\/50 {
    background-color: color-mix(in srgb, oklch(29.1% 0.149 302.717) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-purple-950) 50%, transparent);
    }
  }
  .bg-red-500 {
    background-color: var(--color-red-500);
  }
  .bg-red-600 {
    background-color: var(--color-red-600);
  }
  .bg-red-600\/20 {
    background-color: color-mix(in srgb, oklch(57.7% 0.245 27.325) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-600) 20%, transparent);
    }
  }
  .bg-red-700 {
    background-color: var(--color-red-700);
  }
  .bg-red-800 {
    background-color: var(--color-red-800);
  }
  .bg-red-900 {
    background-color: var(--color-red-900);
  }
  .bg-red-900\/30 {
    background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-900) 30%, transparent);
    }
  }
  .bg-red-900\/40 {
    background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-900) 40%, transparent);
    }
  }
  .bg-red-950\/10 {
    background-color: color-mix(in srgb, oklch(25.8% 0.092 26.042) 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-950) 10%, transparent);
    }
  }
  .bg-red-950\/15 {
    background-color: color-mix(in srgb, oklch(25.8% 0.092 26.042) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-950) 15%, transparent);
    }
  }
  .bg-red-950\/20 {
    background-color: color-mix(in srgb, oklch(25.8% 0.092 26.042) 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-950) 20%, transparent);
    }
  }
  .bg-red-950\/40 {
    background-color: color-mix(in srgb, oklch(25.8% 0.092 26.042) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-950) 40%, transparent);
    }
  }
  .bg-red-950\/60 {
    background-color: color-mix(in srgb, oklch(25.8% 0.092 26.042) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-950) 60%, transparent);
    }
  }
  .bg-red-950\/90 {
    background-color: color-mix(in srgb, oklch(25.8% 0.092 26.042) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-950) 90%, transparent);
    }
  }
  .bg-red-950\/95 {
    background-color: color-mix(in srgb, oklch(25.8% 0.092 26.042) 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-950) 95%, transparent);
    }
  }
  .bg-sky-950\/30 {
    background-color: color-mix(in srgb, oklch(29.3% 0.066 243.157) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-sky-950) 30%, transparent);
    }
  }
  .bg-slate-300 {
    background-color: var(--color-slate-300);
  }
  .bg-stone-800 {
    background-color: var(--color-stone-800);
  }
  .bg-stone-800\/70 {
    background-color: color-mix(in srgb, oklch(26.8% 0.007 34.298) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-stone-800) 70%, transparent);
    }
  }
  .bg-stone-900 {
    background-color: var(--color-stone-900);
  }
  .bg-stone-900\/30 {
    background-color: color-mix(in srgb, oklch(21.6% 0.006 56.043) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-stone-900) 30%, transparent);
    }
  }
  .bg-stone-900\/40 {
    background-color: color-mix(in srgb, oklch(21.6% 0.006 56.043) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-stone-900) 40%, transparent);
    }
  }
  .bg-stone-950 {
    background-color: var(--color-stone-950);
  }
  .bg-stone-950\/60 {
    background-color: color-mix(in srgb, oklch(14.7% 0.004 49.25) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-stone-950) 60%, transparent);
    }
  }
  .bg-stone-950\/80 {
    background-color: color-mix(in srgb, oklch(14.7% 0.004 49.25) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-stone-950) 80%, transparent);
    }
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-violet-950\/15 {
    background-color: color-mix(in srgb, oklch(28.3% 0.141 291.089) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-violet-950) 15%, transparent);
    }
  }
  .bg-violet-950\/30 {
    background-color: color-mix(in srgb, oklch(28.3% 0.141 291.089) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-violet-950) 30%, transparent);
    }
  }
  .bg-white\/5 {
    background-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }
  .bg-white\/10 {
    background-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .bg-yellow-500 {
    background-color: var(--color-yellow-500);
  }
  .bg-yellow-950\/15 {
    background-color: color-mix(in srgb, oklch(28.6% 0.066 53.813) 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yellow-950) 15%, transparent);
    }
  }
  .bg-yellow-950\/40 {
    background-color: color-mix(in srgb, oklch(28.6% 0.066 53.813) 40%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-yellow-950) 40%, transparent);
    }
  }
  .bg-zinc-900 {
    background-color: var(--color-zinc-900);
  }
  .bg-gradient-to-b {
    --tw-gradient-position: to bottom in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-gradient-to-bl {
    --tw-gradient-position: to bottom left 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));
  }
  .from-\[\#0a0514\]\/90 {
    --tw-gradient-from: color-mix(in oklab, #0a0514 90%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-\[\#0a0514\]\/92 {
    --tw-gradient-from: color-mix(in oklab, #0a0514 92%, 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-\[\#0d0518\] {
    --tw-gradient-from: #0d0518;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#1a0a12\] {
    --tw-gradient-from: #1a0a12;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#1a2e2b\]\/50 {
    --tw-gradient-from: color-mix(in oklab, #1a2e2b 50%, 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-\[\#1a1340\] {
    --tw-gradient-from: #1a1340;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#1b2c15\]\/50 {
    --tw-gradient-from: color-mix(in oklab, #1b2c15 50%, 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-\[\#2b2b2b\]\/50 {
    --tw-gradient-from: color-mix(in oklab, #2b2b2b 50%, 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-\[\#4a1530\] {
    --tw-gradient-from: #4a1530;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#201f22\] {
    --tw-gradient-from: #201f22;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#201f22\]\/50 {
    --tw-gradient-from: color-mix(in oklab, #201f22 50%, 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-\[\#241a12\] {
    --tw-gradient-from: #241a12;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#302f34\] {
    --tw-gradient-from: #302f34;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#302f34\]\/80 {
    --tw-gradient-from: color-mix(in oklab, #302f34 80%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-\[\#6324a6\] {
    --tw-gradient-from: #6324a6;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#6324a6\]\/40 {
    --tw-gradient-from: color-mix(in oklab, #6324a6 40%, 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-\[\#6324a6\]\/50 {
    --tw-gradient-from: color-mix(in oklab, #6324a6 50%, 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-\[\#120721\] {
    --tw-gradient-from: #120721;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#881337\] {
    --tw-gradient-from: #881337;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#e05616\] {
    --tw-gradient-from: #e05616;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#f3a83b\] {
    --tw-gradient-from: #f3a83b;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#f3a83b\]\/10 {
    --tw-gradient-from: color-mix(in oklab, #f3a83b 10%, transparent);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-black\/85 {
    --tw-gradient-from: color-mix(in srgb, #000 85%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-black) 85%, 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-black\/90 {
    --tw-gradient-from: color-mix(in srgb, #000 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-black) 90%, transparent);
    }
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-black\/95 {
    --tw-gradient-from: color-mix(in srgb, #000 95%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-from: color-mix(in oklab, var(--color-black) 95%, 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-cyan-600 {
    --tw-gradient-from: var(--color-cyan-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-red-700 {
    --tw-gradient-from: var(--color-red-700);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-transparent {
    --tw-gradient-from: transparent;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .via-\[\#0a0514\]\/75 {
    --tw-gradient-via: color-mix(in oklab, #0a0514 75%, 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-\[\#0a0514\]\/80 {
    --tw-gradient-via: color-mix(in oklab, #0a0514 80%, 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-\[\#f3a83b\] {
    --tw-gradient-via: #f3a83b;
    --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-black\/10 {
    --tw-gradient-via: color-mix(in srgb, #000 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-via: color-mix(in oklab, var(--color-black) 10%, 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-black\/55 {
    --tw-gradient-via: color-mix(in srgb, #000 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-via: color-mix(in oklab, var(--color-black) 55%, 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-black\/60 {
    --tw-gradient-via: color-mix(in srgb, #000 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-via: color-mix(in oklab, var(--color-black) 60%, 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-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);
  }
  .to-\[\#0a0314\] {
    --tw-gradient-to: #0a0314;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#0a0514\]\/95 {
    --tw-gradient-to: color-mix(in oklab, #0a0514 95%, 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-\[\#1a0a2a\]\/50 {
    --tw-gradient-to: color-mix(in oklab, #1a0a2a 50%, 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-\[\#2c2015\]\/50 {
    --tw-gradient-to: color-mix(in oklab, #2c2015 50%, 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-\[\#2d0f54\] {
    --tw-gradient-to: #2d0f54;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#201f22\] {
    --tw-gradient-to: #201f22;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#302f34\]\/50 {
    --tw-gradient-to: color-mix(in oklab, #302f34 50%, 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-\[\#450a0a\] {
    --tw-gradient-to: #450a0a;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#212023\] {
    --tw-gradient-to: #212023;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#a855f7\] {
    --tw-gradient-to: #a855f7;
    --tw-gradient-stops: var(--tw-gradient-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-\[\#a855f7\]\/40 {
    --tw-gradient-to: color-mix(in oklab, #a855f7 40%, 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-\[\#a855f7\]\/50 {
    --tw-gradient-to: color-mix(in oklab, #a855f7 50%, 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-\[\#f3a83b\] {
    --tw-gradient-to: #f3a83b;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-\[var\(--agd2\)\] {
    --tw-gradient-to: var(--agd2);
    --tw-gradient-stops: var(--tw-gradient-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-black {
    --tw-gradient-to: var(--color-black);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-black\/45 {
    --tw-gradient-to: color-mix(in srgb, #000 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-gradient-to: color-mix(in oklab, var(--color-black) 45%, 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-cyan-400 {
    --tw-gradient-to: var(--color-cyan-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-red-500 {
    --tw-gradient-to: var(--color-red-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-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));
  }
  .mask-circle {
    --tw-mask-radial-shape: circle;
  }
  .bg-cover {
    background-size: cover;
  }
  .bg-center {
    background-position: center;
  }
  .mask-repeat {
    mask-repeat: repeat;
  }
  .object-contain {
    object-fit: contain;
  }
  .object-cover {
    object-fit: cover;
  }
  .object-center {
    object-position: center;
  }
  .object-top {
    object-position: top;
  }
  .\!p-3 {
    padding: calc(var(--spacing) * 3) !important;
  }
  .p-0 {
    padding: calc(var(--spacing) * 0);
  }
  .p-1 {
    padding: calc(var(--spacing) * 1);
  }
  .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-7 {
    padding: calc(var(--spacing) * 7);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .p-10 {
    padding: calc(var(--spacing) * 10);
  }
  .p-12 {
    padding: calc(var(--spacing) * 12);
  }
  .p-\[1px\] {
    padding: 1px;
  }
  .px-0\.5 {
    padding-inline: calc(var(--spacing) * 0.5);
  }
  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }
  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .px-10 {
    padding-inline: calc(var(--spacing) * 10);
  }
  .px-12 {
    padding-inline: calc(var(--spacing) * 12);
  }
  .\!py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5) !important;
  }
  .\!py-2 {
    padding-block: calc(var(--spacing) * 2) !important;
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }
  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }
  .py-24 {
    padding-block: calc(var(--spacing) * 24);
  }
  .pt-0\.5 {
    padding-top: calc(var(--spacing) * 0.5);
  }
  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }
  .pt-1\.5 {
    padding-top: calc(var(--spacing) * 1.5);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pt-7 {
    padding-top: calc(var(--spacing) * 7);
  }
  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }
  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }
  .pt-16 {
    padding-top: calc(var(--spacing) * 16);
  }
  .pt-20 {
    padding-top: calc(var(--spacing) * 20);
  }
  .pr-1 {
    padding-right: calc(var(--spacing) * 1);
  }
  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }
  .pr-5 {
    padding-right: calc(var(--spacing) * 5);
  }
  .pr-7 {
    padding-right: calc(var(--spacing) * 7);
  }
  .pr-10 {
    padding-right: calc(var(--spacing) * 10);
  }
  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }
  .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-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }
  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }
  .pb-7 {
    padding-bottom: calc(var(--spacing) * 7);
  }
  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }
  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }
  .pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
  }
  .pl-1 {
    padding-left: calc(var(--spacing) * 1);
  }
  .pl-1\.5 {
    padding-left: calc(var(--spacing) * 1.5);
  }
  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }
  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }
  .pl-7 {
    padding-left: calc(var(--spacing) * 7);
  }
  .pl-9 {
    padding-left: calc(var(--spacing) * 9);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .font-gothic {
    font-family: var(--font-gothic);
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .font-sans {
    font-family: var(--font-sans);
  }
  .font-serif {
    font-family: var(--font-serif);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }
  .text-6xl {
    font-size: var(--text-6xl);
    line-height: var(--tw-leading, var(--text-6xl--line-height));
  }
  .text-7xl {
    font-size: var(--text-7xl);
    line-height: var(--tw-leading, var(--text-7xl--line-height));
  }
  .text-8xl {
    font-size: var(--text-8xl);
    line-height: var(--tw-leading, var(--text-8xl--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-\[11px\] {
    font-size: 11px !important;
  }
  .text-\[0\.6rem\] {
    font-size: 0.6rem;
  }
  .text-\[0\.65rem\] {
    font-size: 0.65rem;
  }
  .text-\[2rem\] {
    font-size: 2rem;
  }
  .text-\[6px\] {
    font-size: 6px;
  }
  .text-\[7\.5px\] {
    font-size: 7.5px;
  }
  .text-\[7px\] {
    font-size: 7px;
  }
  .text-\[8px\] {
    font-size: 8px;
  }
  .text-\[9\.5px\] {
    font-size: 9.5px;
  }
  .text-\[9px\] {
    font-size: 9px;
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .text-\[12px\] {
    font-size: 12px;
  }
  .text-\[13px\] {
    font-size: 13px;
  }
  .text-\[14px\] {
    font-size: 14px;
  }
  .text-\[15px\] {
    font-size: 15px;
  }
  .text-\[16px\] {
    font-size: 16px;
  }
  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }
  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }
  .leading-7 {
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }
  .leading-8 {
    --tw-leading: calc(var(--spacing) * 8);
    line-height: calc(var(--spacing) * 8);
  }
  .leading-10 {
    --tw-leading: calc(var(--spacing) * 10);
    line-height: calc(var(--spacing) * 10);
  }
  .leading-loose {
    --tw-leading: var(--leading-loose);
    line-height: var(--leading-loose);
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-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-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-\[0\.1em\] {
    --tw-tracking: 0.1em;
    letter-spacing: 0.1em;
  }
  .tracking-\[0\.2em\] {
    --tw-tracking: 0.2em;
    letter-spacing: 0.2em;
  }
  .tracking-\[0\.3em\] {
    --tw-tracking: 0.3em;
    letter-spacing: 0.3em;
  }
  .tracking-\[0\.4em\] {
    --tw-tracking: 0.4em;
    letter-spacing: 0.4em;
  }
  .tracking-\[0\.5em\] {
    --tw-tracking: 0.5em;
    letter-spacing: 0.5em;
  }
  .tracking-\[0\.08em\] {
    --tw-tracking: 0.08em;
    letter-spacing: 0.08em;
  }
  .tracking-\[0\.12em\] {
    --tw-tracking: 0.12em;
    letter-spacing: 0.12em;
  }
  .tracking-\[0\.15em\] {
    --tw-tracking: 0.15em;
    letter-spacing: 0.15em;
  }
  .tracking-\[0\.18em\] {
    --tw-tracking: 0.18em;
    letter-spacing: 0.18em;
  }
  .tracking-\[0\.25em\] {
    --tw-tracking: 0.25em;
    letter-spacing: 0.25em;
  }
  .tracking-normal {
    --tw-tracking: var(--tracking-normal);
    letter-spacing: var(--tracking-normal);
  }
  .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);
  }
  .text-balance {
    text-wrap: balance;
  }
  .text-wrap {
    text-wrap: wrap;
  }
  .break-words {
    overflow-wrap: break-word;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }
  .text-\[\#2a8c3a\] {
    color: #2a8c3a;
  }
  .text-\[\#2ce6c5\] {
    color: #2ce6c5;
  }
  .text-\[\#3a9d4a\] {
    color: #3a9d4a;
  }
  .text-\[\#3aaa5a\] {
    color: #3aaa5a;
  }
  .text-\[\#5a5a60\] {
    color: #5a5a60;
  }
  .text-\[\#6a5d49\] {
    color: #6a5d49;
  }
  .text-\[\#6b5433\] {
    color: #6b5433;
  }
  .text-\[\#6b6355\] {
    color: #6b6355;
  }
  .text-\[\#6ba8ff\] {
    color: #6ba8ff;
  }
  .text-\[\#6fbf9a\] {
    color: #6fbf9a;
  }
  .text-\[\#7a6b57\] {
    color: #7a6b57;
  }
  .text-\[\#7a715f\] {
    color: #7a715f;
  }
  .text-\[\#7a1515\] {
    color: #7a1515;
  }
  .text-\[\#7ef0a6\] {
    color: #7ef0a6;
  }
  .text-\[\#8b93ff\] {
    color: #8b93ff;
  }
  .text-\[\#8d7c60\] {
    color: #8d7c60;
  }
  .text-\[\#9a8a6f\] {
    color: #9a8a6f;
  }
  .text-\[\#9aa\] {
    color: #9aa;
  }
  .text-\[\#9c8a6a\] {
    color: #9c8a6a;
  }
  .text-\[\#9dff8f\] {
    color: #9dff8f;
  }
  .text-\[\#9fb7d4\] {
    color: #9fb7d4;
  }
  .text-\[\#9fe8ff\] {
    color: #9fe8ff;
  }
  .text-\[\#74f0dd\] {
    color: #74f0dd;
  }
  .text-\[\#444\] {
    color: #444;
  }
  .text-\[\#555\] {
    color: #555;
  }
  .text-\[\#938573\] {
    color: #938573;
  }
  .text-\[\#a06bff\] {
    color: #a06bff;
  }
  .text-\[\#a08c68\] {
    color: #a08c68;
  }
  .text-\[\#a19785\] {
    color: #a19785;
  }
  .text-\[\#aab2bd\] {
    color: #aab2bd;
  }
  .text-\[\#b79cff\] {
    color: #b79cff;
  }
  .text-\[\#b89a5e\] {
    color: #b89a5e;
  }
  .text-\[\#c3a3ff\] {
    color: #c3a3ff;
  }
  .text-\[\#c9bda4\] {
    color: #c9bda4;
  }
  .text-\[\#c9c9d4\] {
    color: #c9c9d4;
  }
  .text-\[\#c084fc\] {
    color: #c084fc;
  }
  .text-\[\#c0532f\] {
    color: #c0532f;
  }
  .text-\[\#c03030\] {
    color: #c03030;
  }
  .text-\[\#c82323\] {
    color: #c82323;
  }
  .text-\[\#cbbfa8\] {
    color: #cbbfa8;
  }
  .text-\[\#ccc\] {
    color: #ccc;
  }
  .text-\[\#d8b44a\] {
    color: #d8b44a;
  }
  .text-\[\#d8c8a8\] {
    color: #d8c8a8;
  }
  .text-\[\#d9cba8\] {
    color: #d9cba8;
  }
  .text-\[\#e0d5c1\] {
    color: #e0d5c1;
  }
  .text-\[\#e6b22e\] {
    color: #e6b22e;
  }
  .text-\[\#e07a52\] {
    color: #e07a52;
  }
  .text-\[\#e8ce97\] {
    color: #e8ce97;
  }
  .text-\[\#f0b132\] {
    color: #f0b132;
  }
  .text-\[\#f0cd6e\] {
    color: #f0cd6e;
  }
  .text-\[\#f0d48a\] {
    color: #f0d48a;
  }
  .text-\[\#f3a83b\] {
    color: #f3a83b;
  }
  .text-\[\#f3a83b\]\/40 {
    color: color-mix(in oklab, #f3a83b 40%, transparent);
  }
  .text-\[\#f3a83b\]\/60 {
    color: color-mix(in oklab, #f3a83b 60%, transparent);
  }
  .text-\[\#f3a83b\]\/70 {
    color: color-mix(in oklab, #f3a83b 70%, transparent);
  }
  .text-\[\#f4d998\] {
    color: #f4d998;
  }
  .text-\[\#ff5a5a\] {
    color: #ff5a5a;
  }
  .text-\[\#ff6b6b\] {
    color: #ff6b6b;
  }
  .text-\[\#ff7d7d\] {
    color: #ff7d7d;
  }
  .text-\[\#ff8f8f\] {
    color: #ff8f8f;
  }
  .text-\[\#ff9a6a\] {
    color: #ff9a6a;
  }
  .text-\[\#ff9d6e\] {
    color: #ff9d6e;
  }
  .text-\[\#ffae5c\] {
    color: #ffae5c;
  }
  .text-\[\#ffd24a\] {
    color: #ffd24a;
  }
  .text-\[var\(--abg\)\] {
    color: var(--abg);
  }
  .text-\[var\(--abl\)\] {
    color: var(--abl);
  }
  .text-\[var\(--acr\)\] {
    color: var(--acr);
  }
  .text-\[var\(--acr2\)\] {
    color: var(--acr2);
  }
  .text-\[var\(--agd\)\] {
    color: var(--agd);
  }
  .text-\[var\(--agd2\)\] {
    color: var(--agd2);
  }
  .text-\[var\(--agr\)\] {
    color: var(--agr);
  }
  .text-\[var\(--at1\)\] {
    color: var(--at1);
  }
  .text-\[var\(--at2\)\] {
    color: var(--at2);
  }
  .text-\[var\(--at3\)\] {
    color: var(--at3);
  }
  .text-\[var\(--color-dim-parchment\)\] {
    color: var(--color-dim-parchment);
  }
  .text-\[var\(--color-sulfur\)\] {
    color: var(--color-sulfur);
  }
  .text-\[var\(--color-sulfur\)\]\/70 {
    color: color-mix(in srgb, #e6b22e 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-sulfur) 70%, transparent);
    }
  }
  .text-\[var\(--sg-teal-glow\)\] {
    color: var(--sg-teal-glow);
  }
  .text-amber-100 {
    color: var(--color-amber-100);
  }
  .text-amber-100\/90 {
    color: color-mix(in srgb, oklch(96.2% 0.059 95.617) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-amber-100) 90%, transparent);
    }
  }
  .text-amber-200 {
    color: var(--color-amber-200);
  }
  .text-amber-200\/80 {
    color: color-mix(in srgb, oklch(92.4% 0.12 95.746) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-amber-200) 80%, transparent);
    }
  }
  .text-amber-200\/90 {
    color: color-mix(in srgb, oklch(92.4% 0.12 95.746) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-amber-200) 90%, transparent);
    }
  }
  .text-amber-300 {
    color: var(--color-amber-300);
  }
  .text-amber-300\/70 {
    color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-amber-300) 70%, transparent);
    }
  }
  .text-amber-300\/80 {
    color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-amber-300) 80%, transparent);
    }
  }
  .text-amber-300\/90 {
    color: color-mix(in srgb, oklch(87.9% 0.169 91.605) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-amber-300) 90%, transparent);
    }
  }
  .text-amber-400 {
    color: var(--color-amber-400);
  }
  .text-amber-400\/70 {
    color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-amber-400) 70%, transparent);
    }
  }
  .text-amber-400\/80 {
    color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-amber-400) 80%, transparent);
    }
  }
  .text-amber-400\/90 {
    color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-amber-400) 90%, transparent);
    }
  }
  .text-amber-500 {
    color: var(--color-amber-500);
  }
  .text-amber-500\/50 {
    color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-amber-500) 50%, transparent);
    }
  }
  .text-amber-500\/60 {
    color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-amber-500) 60%, transparent);
    }
  }
  .text-amber-500\/70 {
    color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-amber-500) 70%, transparent);
    }
  }
  .text-amber-500\/80 {
    color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-amber-500) 80%, transparent);
    }
  }
  .text-amber-600 {
    color: var(--color-amber-600);
  }
  .text-black {
    color: var(--color-black);
  }
  .text-blue-300 {
    color: var(--color-blue-300);
  }
  .text-blue-400 {
    color: var(--color-blue-400);
  }
  .text-blue-500 {
    color: var(--color-blue-500);
  }
  .text-blue-600 {
    color: var(--color-blue-600);
  }
  .text-cyan-200 {
    color: var(--color-cyan-200);
  }
  .text-cyan-300 {
    color: var(--color-cyan-300);
  }
  .text-cyan-400 {
    color: var(--color-cyan-400);
  }
  .text-emerald-50 {
    color: var(--color-emerald-50);
  }
  .text-emerald-200 {
    color: var(--color-emerald-200);
  }
  .text-emerald-300 {
    color: var(--color-emerald-300);
  }
  .text-emerald-300\/50 {
    color: color-mix(in srgb, oklch(84.5% 0.143 164.978) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-emerald-300) 50%, transparent);
    }
  }
  .text-emerald-300\/80 {
    color: color-mix(in srgb, oklch(84.5% 0.143 164.978) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-emerald-300) 80%, transparent);
    }
  }
  .text-emerald-400 {
    color: var(--color-emerald-400);
  }
  .text-emerald-400\/70 {
    color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-emerald-400) 70%, transparent);
    }
  }
  .text-emerald-400\/80 {
    color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-emerald-400) 80%, transparent);
    }
  }
  .text-emerald-400\/90 {
    color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-emerald-400) 90%, transparent);
    }
  }
  .text-emerald-500 {
    color: var(--color-emerald-500);
  }
  .text-emerald-500\/70 {
    color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-emerald-500) 70%, transparent);
    }
  }
  .text-emerald-500\/80 {
    color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-emerald-500) 80%, transparent);
    }
  }
  .text-fuchsia-300 {
    color: var(--color-fuchsia-300);
  }
  .text-fuchsia-400 {
    color: var(--color-fuchsia-400);
  }
  .text-gray-100 {
    color: var(--color-gray-100);
  }
  .text-gray-200 {
    color: var(--color-gray-200);
  }
  .text-gray-300 {
    color: var(--color-gray-300);
  }
  .text-gray-300\/90 {
    color: color-mix(in srgb, oklch(87.2% 0.01 258.338) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-gray-300) 90%, transparent);
    }
  }
  .text-gray-400 {
    color: var(--color-gray-400);
  }
  .text-gray-500 {
    color: var(--color-gray-500);
  }
  .text-gray-600 {
    color: var(--color-gray-600);
  }
  .text-green-300 {
    color: var(--color-green-300);
  }
  .text-green-400 {
    color: var(--color-green-400);
  }
  .text-green-500 {
    color: var(--color-green-500);
  }
  .text-green-600 {
    color: var(--color-green-600);
  }
  .text-indigo-300 {
    color: var(--color-indigo-300);
  }
  .text-orange-200 {
    color: var(--color-orange-200);
  }
  .text-orange-300 {
    color: var(--color-orange-300);
  }
  .text-orange-300\/70 {
    color: color-mix(in srgb, oklch(83.7% 0.128 66.29) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-orange-300) 70%, transparent);
    }
  }
  .text-orange-300\/80 {
    color: color-mix(in srgb, oklch(83.7% 0.128 66.29) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-orange-300) 80%, transparent);
    }
  }
  .text-orange-300\/90 {
    color: color-mix(in srgb, oklch(83.7% 0.128 66.29) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-orange-300) 90%, transparent);
    }
  }
  .text-orange-400 {
    color: var(--color-orange-400);
  }
  .text-orange-400\/70 {
    color: color-mix(in srgb, oklch(75% 0.183 55.934) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-orange-400) 70%, transparent);
    }
  }
  .text-pink-400 {
    color: var(--color-pink-400);
  }
  .text-pink-500 {
    color: var(--color-pink-500);
  }
  .text-purple-200 {
    color: var(--color-purple-200);
  }
  .text-purple-300 {
    color: var(--color-purple-300);
  }
  .text-purple-300\/70 {
    color: color-mix(in srgb, oklch(82.7% 0.119 306.383) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-purple-300) 70%, transparent);
    }
  }
  .text-purple-300\/90 {
    color: color-mix(in srgb, oklch(82.7% 0.119 306.383) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      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-red-50 {
    color: var(--color-red-50);
  }
  .text-red-100 {
    color: var(--color-red-100);
  }
  .text-red-200 {
    color: var(--color-red-200);
  }
  .text-red-200\/90 {
    color: color-mix(in srgb, oklch(88.5% 0.062 18.334) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-red-200) 90%, transparent);
    }
  }
  .text-red-300 {
    color: var(--color-red-300);
  }
  .text-red-300\/50 {
    color: color-mix(in srgb, oklch(80.8% 0.114 19.571) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-red-300) 50%, transparent);
    }
  }
  .text-red-300\/80 {
    color: color-mix(in srgb, oklch(80.8% 0.114 19.571) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-red-300) 80%, transparent);
    }
  }
  .text-red-300\/90 {
    color: color-mix(in srgb, oklch(80.8% 0.114 19.571) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-red-300) 90%, transparent);
    }
  }
  .text-red-400 {
    color: var(--color-red-400);
  }
  .text-red-400\/70 {
    color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-red-400) 70%, transparent);
    }
  }
  .text-red-400\/80 {
    color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-red-400) 80%, transparent);
    }
  }
  .text-red-400\/90 {
    color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-red-400) 90%, transparent);
    }
  }
  .text-red-500 {
    color: var(--color-red-500);
  }
  .text-red-500\/60 {
    color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-red-500) 60%, transparent);
    }
  }
  .text-red-500\/70 {
    color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-red-500) 70%, transparent);
    }
  }
  .text-red-500\/80 {
    color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-red-500) 80%, transparent);
    }
  }
  .text-red-600 {
    color: var(--color-red-600);
  }
  .text-red-700 {
    color: var(--color-red-700);
  }
  .text-red-800 {
    color: var(--color-red-800);
  }
  .text-red-900 {
    color: var(--color-red-900);
  }
  .text-red-950 {
    color: var(--color-red-950);
  }
  .text-shadow {
    color: var(--color-shadow);
  }
  .text-sky-100 {
    color: var(--color-sky-100);
  }
  .text-sky-200 {
    color: var(--color-sky-200);
  }
  .text-sky-300 {
    color: var(--color-sky-300);
  }
  .text-sky-300\/80 {
    color: color-mix(in srgb, oklch(82.8% 0.111 230.318) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-sky-300) 80%, transparent);
    }
  }
  .text-sky-300\/90 {
    color: color-mix(in srgb, oklch(82.8% 0.111 230.318) 90%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-sky-300) 90%, transparent);
    }
  }
  .text-sky-400 {
    color: var(--color-sky-400);
  }
  .text-sky-400\/70 {
    color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-sky-400) 70%, transparent);
    }
  }
  .text-slate-300 {
    color: var(--color-slate-300);
  }
  .text-slate-400 {
    color: var(--color-slate-400);
  }
  .text-stone-50 {
    color: var(--color-stone-50);
  }
  .text-stone-100 {
    color: var(--color-stone-100);
  }
  .text-stone-200 {
    color: var(--color-stone-200);
  }
  .text-stone-300 {
    color: var(--color-stone-300);
  }
  .text-stone-300\/80 {
    color: color-mix(in srgb, oklch(86.9% 0.005 56.366) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-stone-300) 80%, transparent);
    }
  }
  .text-stone-400 {
    color: var(--color-stone-400);
  }
  .text-stone-500 {
    color: var(--color-stone-500);
  }
  .text-stone-600 {
    color: var(--color-stone-600);
  }
  .text-stone-700 {
    color: var(--color-stone-700);
  }
  .text-stone-700\/60 {
    color: color-mix(in srgb, oklch(37.4% 0.01 67.558) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-stone-700) 60%, transparent);
    }
  }
  .text-stone-800 {
    color: var(--color-stone-800);
  }
  .text-stone-950 {
    color: var(--color-stone-950);
  }
  .text-teal-300 {
    color: var(--color-teal-300);
  }
  .text-teal-400 {
    color: var(--color-teal-400);
  }
  .text-teal-800 {
    color: var(--color-teal-800);
  }
  .text-violet-300 {
    color: var(--color-violet-300);
  }
  .text-violet-300\/70 {
    color: color-mix(in srgb, oklch(81.1% 0.111 293.571) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-violet-300) 70%, transparent);
    }
  }
  .text-violet-300\/80 {
    color: color-mix(in srgb, oklch(81.1% 0.111 293.571) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-violet-300) 80%, transparent);
    }
  }
  .text-white {
    color: var(--color-white);
  }
  .text-white\/50 {
    color: color-mix(in srgb, #fff 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }
  .text-white\/60 {
    color: color-mix(in srgb, #fff 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }
  .text-white\/80 {
    color: color-mix(in srgb, #fff 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }
  .text-white\/85 {
    color: color-mix(in srgb, #fff 85%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-white) 85%, transparent);
    }
  }
  .text-yellow-300 {
    color: var(--color-yellow-300);
  }
  .text-yellow-400 {
    color: var(--color-yellow-400);
  }
  .text-yellow-500 {
    color: var(--color-yellow-500);
  }
  .text-yellow-600 {
    color: var(--color-yellow-600);
  }
  .text-yellow-800 {
    color: var(--color-yellow-800);
  }
  .lowercase {
    text-transform: lowercase;
  }
  .normal-case {
    text-transform: none;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .not-italic {
    font-style: normal;
  }
  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .line-through {
    text-decoration-line: line-through;
  }
  .underline {
    text-decoration-line: underline;
  }
  .underline-offset-4 {
    text-underline-offset: 4px;
  }
  .placeholder-\[\#6a5d49\] {
    &::placeholder {
      color: #6a5d49;
    }
  }
  .placeholder-\[var\(--at3\)\] {
    &::placeholder {
      color: var(--at3);
    }
  }
  .accent-\[\#f3a83b\] {
    accent-color: #f3a83b;
  }
  .accent-\[var\(--agd\)\] {
    accent-color: var(--agd);
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-10 {
    opacity: 10%;
  }
  .opacity-20 {
    opacity: 20%;
  }
  .opacity-30 {
    opacity: 30%;
  }
  .opacity-40 {
    opacity: 40%;
  }
  .opacity-50 {
    opacity: 50%;
  }
  .opacity-60 {
    opacity: 60%;
  }
  .opacity-70 {
    opacity: 70%;
  }
  .opacity-75 {
    opacity: 75%;
  }
  .opacity-80 {
    opacity: 80%;
  }
  .opacity-90 {
    opacity: 90%;
  }
  .opacity-100 {
    opacity: 100%;
  }
  .mix-blend-overlay {
    mix-blend-mode: overlay;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_-10px_30px_rgba\(0\,0\,0\,0\.8\)\] {
    --tw-shadow: 0 -10px 30px var(--tw-shadow-color, rgba(0,0,0,0.8));
    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_5px_rgba\(6\,182\,212\,0\.4\)\] {
    --tw-shadow: 0 0 5px var(--tw-shadow-color, rgba(6,182,212,0.4));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_0_6px_rgba\(200\,160\,48\,0\.4\)\] {
    --tw-shadow: 0 0 6px var(--tw-shadow-color, rgba(200,160,48,0.4));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_0_8px_\#06b6d4\] {
    --tw-shadow: 0 0 8px var(--tw-shadow-color, #06b6d4);
    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\(6\,182\,212\,0\.5\)\] {
    --tw-shadow: 0 0 8px var(--tw-shadow-color, rgba(6,182,212,0.5));
    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\(243\,168\,59\,0\.2\)\] {
    --tw-shadow: 0 0 8px var(--tw-shadow-color, rgba(243,168,59,0.2));
    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_10px_rgba\(243\,168\,59\,0\.7\)\] {
    --tw-shadow: 0 0 10px var(--tw-shadow-color, rgba(243,168,59,0.7));
    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\(243\,168\,59\,0\.4\)\] {
    --tw-shadow: 0 0 15px var(--tw-shadow-color, rgba(243,168,59,0.4));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_0_15px_rgba\(243\,168\,59\,0\.15\)\] {
    --tw-shadow: 0 0 15px var(--tw-shadow-color, rgba(243,168,59,0.15));
    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\(26\,92\,42\,0\.1\)\] {
    --tw-shadow: 0 0 30px var(--tw-shadow-color, rgba(26,92,42,0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_0_30px_rgba\(122\,21\,21\,0\.12\)\] {
    --tw-shadow: 0 0 30px var(--tw-shadow-color, rgba(122,21,21,0.12));
    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\(139\,110\,24\,0\.1\)\] {
    --tw-shadow: 0 0 30px var(--tw-shadow-color, rgba(139,110,24,0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_0_35px_rgba\(243\,168\,59\,0\.3\)\] {
    --tw-shadow: 0 0 35px var(--tw-shadow-color, rgba(243,168,59,0.3));
    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_50px_rgba\(0\,0\,0\,0\.7\)\] {
    --tw-shadow: 0 0 50px var(--tw-shadow-color, rgba(0,0,0,0.7));
    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_50px_rgba\(220\,38\,38\,0\.12\)\] {
    --tw-shadow: 0 0 50px var(--tw-shadow-color, rgba(220,38,38,0.12));
    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_50px_rgba\(230\,178\,46\,0\.15\)\] {
    --tw-shadow: 0 0 50px var(--tw-shadow-color, rgba(230,178,46,0.15));
    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_80px_rgba\(0\,0\,0\,0\.9\)\] {
    --tw-shadow: 0 0 80px var(--tw-shadow-color, rgba(0,0,0,0.9));
    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_2px_20px_rgba\(0\,0\,0\,0\.4\)\] {
    --tw-shadow: 0 2px 20px var(--tw-shadow-color, rgba(0,0,0,0.4));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_4px_12px_rgba\(26\,92\,42\,0\.2\)\] {
    --tw-shadow: 0 4px 12px var(--tw-shadow-color, rgba(26,92,42,0.2));
    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\(122\,21\,21\,0\.25\)\] {
    --tw-shadow: 0 4px 12px var(--tw-shadow-color, rgba(122,21,21,0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_4px_12px_rgba\(139\,110\,24\,0\.2\)\] {
    --tw-shadow: 0 4px 12px var(--tw-shadow-color, rgba(139,110,24,0.2));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_4px_20px_rgba\(0\,0\,0\,0\.8\)\] {
    --tw-shadow: 0 4px 20px var(--tw-shadow-color, rgba(0,0,0,0.8));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_4px_20px_rgba\(10\,5\,20\,0\.8\)\] {
    --tw-shadow: 0 4px 20px var(--tw-shadow-color, rgba(10,5,20,0.8));
    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_24px_rgba\(0\,0\,0\,0\.3\)\] {
    --tw-shadow: 0 4px 24px var(--tw-shadow-color, rgba(0,0,0,0.3));
    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_24px_rgba\(220\,38\,38\,0\.5\)\] {
    --tw-shadow: 0 4px 24px var(--tw-shadow-color, rgba(220,38,38,0.5));
    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_30px_rgba\(0\,0\,0\,0\.5\)\] {
    --tw-shadow: 0 4px 30px var(--tw-shadow-color, rgba(0,0,0,0.5));
    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_30px_rgba\(224\,86\,22\,0\.4\)\] {
    --tw-shadow: 0 4px 30px var(--tw-shadow-color, rgba(224,86,22,0.4));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_8px_40px_rgba\(0\,0\,0\,0\.6\)\] {
    --tw-shadow: 0 8px 40px var(--tw-shadow-color, rgba(0,0,0,0.6));
    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\(99\,36\,166\,0\.2\)\] {
    --tw-shadow: 0 10px 30px var(--tw-shadow-color, rgba(99,36,166,0.2));
    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_40px_rgba\(99\,36\,166\,0\.25\)\] {
    --tw-shadow: 0 10px 40px var(--tw-shadow-color, rgba(99,36,166,0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_14px_34px_rgba\(0\,0\,0\,0\.55\)\] {
    --tw-shadow: 0 14px 34px var(--tw-shadow-color, rgba(0,0,0,0.55));
    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_15px_40px_rgba\(0\,0\,0\,0\.8\)\] {
    --tw-shadow: 0 15px 40px var(--tw-shadow-color, rgba(0,0,0,0.8));
    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_10px_rgba\(239\,68\,68\,0\.15\)\] {
    --tw-shadow: inset 0 0 10px var(--tw-shadow-color, rgba(239,68,68,0.15));
    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_28px_10px_rgba\(0\,0\,0\,0\.7\)\] {
    --tw-shadow: inset 0 0 28px 10px var(--tw-shadow-color, rgba(0,0,0,0.7));
    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, rgb(0 0 0 / 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[\#1a3d35\]\/30 {
    --tw-shadow-color: color-mix(in srgb, #1a3d35 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, #1a3d35 30%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .shadow-\[\#2d4a22\]\/30 {
    --tw-shadow-color: color-mix(in srgb, #2d4a22 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, #2d4a22 30%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .shadow-\[\#4a4a4a\]\/30 {
    --tw-shadow-color: color-mix(in srgb, #4a4a4a 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, #4a4a4a 30%, transparent) var(--tw-shadow-alpha), transparent);
    }
  }
  .ring-\[\#e8ce97\]\/40 {
    --tw-ring-color: color-mix(in oklab, #e8ce97 40%, transparent);
  }
  .ring-\[var\(--agd\)\] {
    --tw-ring-color: var(--agd);
  }
  .ring-\[var\(--color-sulfur\)\] {
    --tw-ring-color: var(--color-sulfur);
  }
  .ring-amber-300 {
    --tw-ring-color: var(--color-amber-300);
  }
  .ring-amber-400\/80 {
    --tw-ring-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-amber-400) 80%, transparent);
    }
  }
  .ring-amber-500\/30 {
    --tw-ring-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-amber-500) 30%, transparent);
    }
  }
  .ring-transparent {
    --tw-ring-color: transparent;
  }
  .ring-white\/60 {
    --tw-ring-color: color-mix(in srgb, #fff 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-ring-color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }
  .ring-offset-1 {
    --tw-ring-offset-width: 1px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }
  .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-black {
    --tw-ring-offset-color: var(--color-black);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .brightness-90 {
    --tw-brightness: brightness(90%);
    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,);
  }
  .brightness-105 {
    --tw-brightness: brightness(105%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .brightness-125 {
    --tw-brightness: brightness(125%);
    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,);
  }
  .brightness-200 {
    --tw-brightness: brightness(200%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .drop-shadow {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.06)));
    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06));
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .drop-shadow-\[0_0_2px_\#000\] {
    --tw-drop-shadow-size: drop-shadow(0 0 2px var(--tw-drop-shadow-color, #000));
    --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_5px_rgba\(250\,204\,21\,0\.5\)\] {
    --tw-drop-shadow-size: drop-shadow(0 0 5px var(--tw-drop-shadow-color, rgba(250,204,21,0.5)));
    --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\(243\,168\,59\,0\.5\)\] {
    --tw-drop-shadow-size: drop-shadow(0 0 8px var(--tw-drop-shadow-color, rgba(243,168,59,0.5)));
    --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\(243\,168\,59\,0\.3\)\] {
    --tw-drop-shadow-size: drop-shadow(0 0 10px var(--tw-drop-shadow-color, rgba(243,168,59,0.3)));
    --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\(243\,168\,59\,0\.25\)\] {
    --tw-drop-shadow-size: drop-shadow(0 0 12px var(--tw-drop-shadow-color, rgba(243,168,59,0.25)));
    --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\(243\,168\,59\,0\.45\)\] {
    --tw-drop-shadow-size: drop-shadow(0 0 12px var(--tw-drop-shadow-color, rgba(243,168,59,0.45)));
    --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_14px_rgba\(243\,168\,59\,0\.35\)\] {
    --tw-drop-shadow-size: drop-shadow(0 0 14px var(--tw-drop-shadow-color, rgba(243,168,59,0.35)));
    --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\(153\,27\,27\,0\.4\)\] {
    --tw-drop-shadow-size: drop-shadow(0 0 15px var(--tw-drop-shadow-color, rgba(153,27,27,0.4)));
    --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_16px_rgba\(243\,168\,59\,0\.45\)\] {
    --tw-drop-shadow-size: drop-shadow(0 0 16px var(--tw-drop-shadow-color, rgba(243,168,59,0.45)));
    --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\(243\,168\,59\,0\.4\)\] {
    --tw-drop-shadow-size: drop-shadow(0 0 18px var(--tw-drop-shadow-color, rgba(243,168,59,0.4)));
    --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\(243\,168\,59\,0\.25\)\] {
    --tw-drop-shadow-size: drop-shadow(0 0 18px var(--tw-drop-shadow-color, rgba(243,168,59,0.25)));
    --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_20px_rgba\(255\,0\,0\,0\.4\)\] {
    --tw-drop-shadow-size: drop-shadow(0 0 20px var(--tw-drop-shadow-color, rgba(255,0,0,0.4)));
    --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_30px_rgba\(230\,178\,46\,0\.65\)\] {
    --tw-drop-shadow-size: drop-shadow(0 0 30px var(--tw-drop-shadow-color, rgba(230,178,46,0.65)));
    --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_30px_rgba\(239\,68\,68\,0\.6\)\] {
    --tw-drop-shadow-size: drop-shadow(0 0 30px var(--tw-drop-shadow-color, rgba(239,68,68,0.6)));
    --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_1px_2px_rgba\(0\,0\,0\,0\.95\)\] {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgba(0,0,0,0.95)));
    --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_1px_3px_rgba\(0\,0\,0\,0\.95\)\] {
    --tw-drop-shadow-size: drop-shadow(0 1px 3px var(--tw-drop-shadow-color, rgba(0,0,0,0.95)));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .drop-shadow-\[0_2px_4px_rgba\(0\,0\,0\,0\.8\)\] {
    --tw-drop-shadow-size: drop-shadow(0 2px 4px var(--tw-drop-shadow-color, rgba(0,0,0,0.8)));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .drop-shadow-\[0_2px_4px_rgba\(0\,0\,0\,0\.9\)\] {
    --tw-drop-shadow-size: drop-shadow(0 2px 4px var(--tw-drop-shadow-color, rgba(0,0,0,0.9)));
    --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_6px_rgba\(0\,0\,0\,0\.95\)\] {
    --tw-drop-shadow-size: drop-shadow(0 2px 6px var(--tw-drop-shadow-color, rgba(0,0,0,0.95)));
    --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\(0\,0\,0\,0\.8\)\] {
    --tw-drop-shadow-size: drop-shadow(0 2px 8px var(--tw-drop-shadow-color, rgba(0,0,0,0.8)));
    --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\(0\,0\,0\,0\.95\)\] {
    --tw-drop-shadow-size: drop-shadow(0 2px 8px var(--tw-drop-shadow-color, rgba(0,0,0,0.95)));
    --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_30px_50px_rgba\(0\,0\,0\,0\.95\)\] {
    --tw-drop-shadow-size: drop-shadow(0 30px 50px var(--tw-drop-shadow-color, rgba(0,0,0,0.95)));
    --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,);
  }
  .grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .sepia {
    --tw-sepia: sepia(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .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-2xl {
    --tw-backdrop-blur: blur(var(--blur-2xl));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-\[3px\] {
    --tw-backdrop-blur: blur(3px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-xl {
    --tw-backdrop-blur: blur(var(--blur-xl));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-saturate-150 {
    --tw-backdrop-saturate: saturate(150%);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[left\] {
    transition-property: left;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[opacity\,translate\] {
    transition-property: opacity,translate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[width\] {
    transition-property: width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .delay-0 {
    transition-delay: 0ms;
  }
  .delay-300 {
    transition-delay: 300ms;
  }
  .duration-150 {
    --tw-duration: 150ms;
    transition-duration: 150ms;
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .duration-500 {
    --tw-duration: 500ms;
    transition-duration: 500ms;
  }
  .duration-700 {
    --tw-duration: 700ms;
    transition-duration: 700ms;
  }
  .duration-1000 {
    --tw-duration: 1000ms;
    transition-duration: 1000ms;
  }
  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .will-change-transform {
    will-change: transform;
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }
  .\[text-shadow\:0_0_5px_rgba\(168\,110\,230\,0\.8\)\] {
    text-shadow: 0 0 5px rgba(168,110,230,0.8);
  }
  .\[text-shadow\:0_0_6px_rgba\(230\,178\,46\,0\.8\)\] {
    text-shadow: 0 0 6px rgba(230,178,46,0.8);
  }
  .\[text-shadow\:0_1px_2px_\#000\] {
    text-shadow: 0 1px 2px #000;
  }
  .\[text-shadow\:0_1px_3px_\#000\] {
    text-shadow: 0 1px 3px #000;
  }
  .\[text-shadow\:0_2px_4px_\#000\] {
    text-shadow: 0 2px 4px #000;
  }
  .ring-inset {
    --tw-ring-inset: inset;
  }
  .group-open\:rotate-180 {
    &:is(:where(.group):is([open], :popover-open, :open) *) {
      rotate: 180deg;
    }
  }
  .group-focus-within\/admnav\:block {
    &:is(:where(.group\/admnav):focus-within *) {
      display: block;
    }
  }
  .group-focus-within\/admnav\:rotate-180 {
    &:is(:where(.group\/admnav):focus-within *) {
      rotate: 180deg;
    }
  }
  .group-focus-within\/admnav\:border-\[var\(--agd2\)\] {
    &:is(:where(.group\/admnav):focus-within *) {
      border-color: var(--agd2);
    }
  }
  .group-focus-within\/admnav\:text-\[var\(--at1\)\] {
    &:is(:where(.group\/admnav):focus-within *) {
      color: var(--at1);
    }
  }
  .group-hover\:block {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        display: block;
      }
    }
  }
  .group-hover\:flex {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        display: flex;
      }
    }
  }
  .group-hover\:-translate-x-\[calc\(50\%\+24px\)\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-translate-x: calc(calc(50% + 24px) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-hover\:-translate-x-\[calc\(50\%-24px\)\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-translate-x: calc(calc(50% - 24px) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .group-hover\:scale-105 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-scale-x: 105%;
        --tw-scale-y: 105%;
        --tw-scale-z: 105%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .group-hover\:-rotate-\[8deg\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        rotate: calc(8deg * -1);
      }
    }
  }
  .group-hover\:rotate-\[8deg\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        rotate: 8deg;
      }
    }
  }
  .group-hover\:rotate-\[360deg\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        rotate: 360deg;
      }
    }
  }
  .group-hover\:border-\[\#f3a83b\]\/50 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        border-color: color-mix(in oklab, #f3a83b 50%, transparent);
      }
    }
  }
  .group-hover\:border-\[\#f3a83b\]\/70 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        border-color: color-mix(in oklab, #f3a83b 70%, transparent);
      }
    }
  }
  .group-hover\:from-\[\#7a1515\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-gradient-from: #7a1515;
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .group-hover\:from-black\/75 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-gradient-from: color-mix(in srgb, #000 75%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-gradient-from: color-mix(in oklab, var(--color-black) 75%, 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));
      }
    }
  }
  .group-hover\:via-black\/45 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-gradient-via: color-mix(in srgb, #000 45%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-gradient-via: color-mix(in oklab, var(--color-black) 45%, 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);
      }
    }
  }
  .group-hover\:to-\[var\(--agd\)\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-gradient-to: var(--agd);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
      }
    }
  }
  .group-hover\:to-black\/35 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-gradient-to: color-mix(in srgb, #000 35%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-gradient-to: color-mix(in oklab, var(--color-black) 35%, 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));
      }
    }
  }
  .group-hover\:text-\[\#f0d48a\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: #f0d48a;
      }
    }
  }
  .group-hover\:text-\[\#f3a83b\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: #f3a83b;
      }
    }
  }
  .group-hover\:text-\[var\(--agd\)\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--agd);
      }
    }
  }
  .group-hover\:text-\[var\(--agd\)\]\/60 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--agd);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--agd) 60%, transparent);
        }
      }
    }
  }
  .group-hover\:text-\[var\(--at1\)\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--at1);
      }
    }
  }
  .group-hover\:text-white {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .group-hover\:underline {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .group-hover\:opacity-70 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        opacity: 70%;
      }
    }
  }
  .group-hover\:opacity-100 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .group-hover\:drop-shadow-\[0_0_26px_rgba\(243\,168\,59\,0\.65\)\] {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-drop-shadow-size: drop-shadow(0 0 26px var(--tw-drop-shadow-color, rgba(243,168,59,0.65)));
        --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,);
      }
    }
  }
  .group-hover\/admnav\:block {
    &:is(:where(.group\/admnav):hover *) {
      @media (hover: hover) {
        display: block;
      }
    }
  }
  .group-hover\/admnav\:rotate-180 {
    &:is(:where(.group\/admnav):hover *) {
      @media (hover: hover) {
        rotate: 180deg;
      }
    }
  }
  .group-hover\/admnav\:border-\[var\(--agd2\)\] {
    &:is(:where(.group\/admnav):hover *) {
      @media (hover: hover) {
        border-color: var(--agd2);
      }
    }
  }
  .group-hover\/admnav\:text-\[var\(--at1\)\] {
    &:is(:where(.group\/admnav):hover *) {
      @media (hover: hover) {
        color: var(--at1);
      }
    }
  }
  .group-hover\/affix\:block {
    &:is(:where(.group\/affix):hover *) {
      @media (hover: hover) {
        display: block;
      }
    }
  }
  .group-hover\/chip\:opacity-100 {
    &:is(:where(.group\/chip):hover *) {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .group-hover\/eff\:block {
    &:is(:where(.group\/eff):hover *) {
      @media (hover: hover) {
        display: block;
      }
    }
  }
  .selection\:bg-\[\#f3a83b\] {
    & *::selection {
      background-color: #f3a83b;
    }
    &::selection {
      background-color: #f3a83b;
    }
  }
  .selection\:bg-red-900 {
    & *::selection {
      background-color: var(--color-red-900);
    }
    &::selection {
      background-color: var(--color-red-900);
    }
  }
  .selection\:text-\[\#201f22\] {
    & *::selection {
      color: #201f22;
    }
    &::selection {
      color: #201f22;
    }
  }
  .selection\:text-white {
    & *::selection {
      color: var(--color-white);
    }
    &::selection {
      color: var(--color-white);
    }
  }
  .placeholder\:text-\[\#6a5d49\] {
    &::placeholder {
      color: #6a5d49;
    }
  }
  .placeholder\:text-\[var\(--at3\)\] {
    &::placeholder {
      color: var(--at3);
    }
  }
  .placeholder\:text-stone-600 {
    &::placeholder {
      color: var(--color-stone-600);
    }
  }
  .before\:h-px {
    &::before {
      content: var(--tw-content);
      height: 1px;
    }
  }
  .before\:w-10 {
    &::before {
      content: var(--tw-content);
      width: calc(var(--spacing) * 10);
    }
  }
  .before\:bg-\[\#5c4a30\]\/40 {
    &::before {
      content: var(--tw-content);
      background-color: color-mix(in oklab, #5c4a30 40%, transparent);
    }
  }
  .after\:h-px {
    &::after {
      content: var(--tw-content);
      height: 1px;
    }
  }
  .after\:w-10 {
    &::after {
      content: var(--tw-content);
      width: calc(var(--spacing) * 10);
    }
  }
  .after\:bg-\[\#5c4a30\]\/40 {
    &::after {
      content: var(--tw-content);
      background-color: color-mix(in oklab, #5c4a30 40%, transparent);
    }
  }
  .last\:border-0 {
    &:last-child {
      border-style: var(--tw-border-style);
      border-width: 0px;
    }
  }
  .hover\:z-30 {
    &:hover {
      @media (hover: hover) {
        z-index: 30;
      }
    }
  }
  .hover\:-translate-y-0\.5 {
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * -0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .hover\:scale-125 {
    &:hover {
      @media (hover: hover) {
        --tw-scale-x: 125%;
        --tw-scale-y: 125%;
        --tw-scale-z: 125%;
        scale: var(--tw-scale-x) var(--tw-scale-y);
      }
    }
  }
  .hover\:cursor-pointer {
    &:hover {
      @media (hover: hover) {
        cursor: pointer;
      }
    }
  }
  .hover\:border-\[\#5c4a30\] {
    &:hover {
      @media (hover: hover) {
        border-color: #5c4a30;
      }
    }
  }
  .hover\:border-\[\#5c4a30\]\/70 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in oklab, #5c4a30 70%, transparent);
      }
    }
  }
  .hover\:border-\[\#7a1515\] {
    &:hover {
      @media (hover: hover) {
        border-color: #7a1515;
      }
    }
  }
  .hover\:border-\[\#f3a83b\] {
    &:hover {
      @media (hover: hover) {
        border-color: #f3a83b;
      }
    }
  }
  .hover\:border-\[\#f3a83b\]\/50 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in oklab, #f3a83b 50%, transparent);
      }
    }
  }
  .hover\:border-\[\#f3a83b\]\/60 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in oklab, #f3a83b 60%, transparent);
      }
    }
  }
  .hover\:border-\[\#f3a83b\]\/70 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in oklab, #f3a83b 70%, transparent);
      }
    }
  }
  .hover\:border-\[var\(--ab2\)\] {
    &:hover {
      @media (hover: hover) {
        border-color: var(--ab2);
      }
    }
  }
  .hover\:border-\[var\(--acr\)\] {
    &:hover {
      @media (hover: hover) {
        border-color: var(--acr);
      }
    }
  }
  .hover\:border-\[var\(--agd\)\] {
    &:hover {
      @media (hover: hover) {
        border-color: var(--agd);
      }
    }
  }
  .hover\:border-\[var\(--agd\)\]\/40 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--agd);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--agd) 40%, transparent);
        }
      }
    }
  }
  .hover\:border-\[var\(--agd\)\]\/50 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--agd);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--agd) 50%, transparent);
        }
      }
    }
  }
  .hover\:border-\[var\(--agd\)\]\/60 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--agd);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--agd) 60%, transparent);
        }
      }
    }
  }
  .hover\:border-\[var\(--agd\)\]\/70 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--agd);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--agd) 70%, transparent);
        }
      }
    }
  }
  .hover\:border-\[var\(--agd2\)\] {
    &:hover {
      @media (hover: hover) {
        border-color: var(--agd2);
      }
    }
  }
  .hover\:border-\[var\(--agd2\)\]\/50 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--agd2);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--agd2) 50%, transparent);
        }
      }
    }
  }
  .hover\:border-\[var\(--agr\)\]\/40 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--agr);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--agr) 40%, transparent);
        }
      }
    }
  }
  .hover\:border-\[var\(--color-sulfur\)\]\/60 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, #e6b22e 60%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-sulfur) 60%, transparent);
        }
      }
    }
  }
  .hover\:border-\[var\(--sg-teal-glow\)\]\/60 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--sg-teal-glow);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--sg-teal-glow) 60%, transparent);
        }
      }
    }
  }
  .hover\:border-amber-400\/50 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-amber-400) 50%, transparent);
        }
      }
    }
  }
  .hover\:border-amber-500\/50 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-amber-500) 50%, transparent);
        }
      }
    }
  }
  .hover\:border-amber-500\/70 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 70%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-amber-500) 70%, transparent);
        }
      }
    }
  }
  .hover\:border-amber-600 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-amber-600);
      }
    }
  }
  .hover\:border-amber-600\/60 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, oklch(66.6% 0.179 58.318) 60%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-amber-600) 60%, transparent);
        }
      }
    }
  }
  .hover\:border-fuchsia-500 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-fuchsia-500);
      }
    }
  }
  .hover\:border-green-500 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-green-500);
      }
    }
  }
  .hover\:border-orange-800 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-orange-800);
      }
    }
  }
  .hover\:border-red-500 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-red-500);
      }
    }
  }
  .hover\:border-red-700 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-red-700);
      }
    }
  }
  .hover\:border-red-800 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-red-800);
      }
    }
  }
  .hover\:border-stone-500 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-stone-500);
      }
    }
  }
  .hover\:border-stone-500\/60 {
    &:hover {
      @media (hover: hover) {
        border-color: color-mix(in srgb, oklch(55.3% 0.013 58.071) 60%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          border-color: color-mix(in oklab, var(--color-stone-500) 60%, transparent);
        }
      }
    }
  }
  .hover\:border-stone-600 {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-stone-600);
      }
    }
  }
  .hover\:bg-\[\#2a1140\] {
    &:hover {
      @media (hover: hover) {
        background-color: #2a1140;
      }
    }
  }
  .hover\:bg-\[\#2d1a45\] {
    &:hover {
      @media (hover: hover) {
        background-color: #2d1a45;
      }
    }
  }
  .hover\:bg-\[\#3d2a08\]\/35 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in oklab, #3d2a08 35%, transparent);
      }
    }
  }
  .hover\:bg-\[\#7a1515\]\/10 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in oklab, #7a1515 10%, transparent);
      }
    }
  }
  .hover\:bg-\[\#150a24\] {
    &:hover {
      @media (hover: hover) {
        background-color: #150a24;
      }
    }
  }
  .hover\:bg-\[\#4752c4\] {
    &:hover {
      @media (hover: hover) {
        background-color: #4752c4;
      }
    }
  }
  .hover\:bg-\[\#34333a\] {
    &:hover {
      @media (hover: hover) {
        background-color: #34333a;
      }
    }
  }
  .hover\:bg-\[\#c03030\] {
    &:hover {
      @media (hover: hover) {
        background-color: #c03030;
      }
    }
  }
  .hover\:bg-\[\#c03030\]\/20 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in oklab, #c03030 20%, transparent);
      }
    }
  }
  .hover\:bg-\[\#f3a83b\] {
    &:hover {
      @media (hover: hover) {
        background-color: #f3a83b;
      }
    }
  }
  .hover\:bg-\[\#f3a83b\]\/10 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in oklab, #f3a83b 10%, transparent);
      }
    }
  }
  .hover\:bg-\[\#f3a83b\]\/15 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in oklab, #f3a83b 15%, transparent);
      }
    }
  }
  .hover\:bg-\[\#f3a83b\]\/20 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in oklab, #f3a83b 20%, transparent);
      }
    }
  }
  .hover\:bg-\[var\(--ab2\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--ab2);
      }
    }
  }
  .hover\:bg-\[var\(--acr\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--acr);
      }
    }
  }
  .hover\:bg-\[var\(--acr\)\]\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--acr);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--acr) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-\[var\(--acr2\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--acr2);
      }
    }
  }
  .hover\:bg-\[var\(--ael\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--ael);
      }
    }
  }
  .hover\:bg-\[var\(--agd\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--agd);
      }
    }
  }
  .hover\:bg-\[var\(--agd2\)\] {
    &:hover {
      @media (hover: hover) {
        background-color: var(--agd2);
      }
    }
  }
  .hover\:bg-\[var\(--agd2\)\]\/10 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--agd2);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--agd2) 10%, transparent);
        }
      }
    }
  }
  .hover\:bg-\[var\(--agd2\)\]\/15 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--agd2);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--agd2) 15%, transparent);
        }
      }
    }
  }
  .hover\:bg-\[var\(--agd2\)\]\/20 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--agd2);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--agd2) 20%, transparent);
        }
      }
    }
  }
  .hover\:bg-\[var\(--agr\)\]\/20 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--agr);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--agr) 20%, transparent);
        }
      }
    }
  }
  .hover\:bg-amber-400 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-amber-400);
      }
    }
  }
  .hover\:bg-amber-600 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-amber-600);
      }
    }
  }
  .hover\:bg-amber-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-amber-700);
      }
    }
  }
  .hover\:bg-black\/20 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #000 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
        }
      }
    }
  }
  .hover\:bg-emerald-500 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-emerald-500);
      }
    }
  }
  .hover\:bg-fuchsia-950 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-fuchsia-950);
      }
    }
  }
  .hover\:bg-green-950 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-green-950);
      }
    }
  }
  .hover\:bg-purple-900\/20 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(38.1% 0.176 304.987) 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-purple-900) 20%, transparent);
        }
      }
    }
  }
  .hover\:bg-red-500 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-500);
      }
    }
  }
  .hover\:bg-red-600 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-600);
      }
    }
  }
  .hover\:bg-red-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-700);
      }
    }
  }
  .hover\:bg-red-800 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-800);
      }
    }
  }
  .hover\:bg-red-900\/20 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent);
        }
      }
    }
  }
  .hover\:bg-red-900\/40 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 40%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-red-900) 40%, transparent);
        }
      }
    }
  }
  .hover\:bg-red-950\/25 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(25.8% 0.092 26.042) 25%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-red-950) 25%, transparent);
        }
      }
    }
  }
  .hover\:bg-red-950\/30 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(25.8% 0.092 26.042) 30%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-red-950) 30%, transparent);
        }
      }
    }
  }
  .hover\:bg-red-950\/40 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(25.8% 0.092 26.042) 40%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-red-950) 40%, transparent);
        }
      }
    }
  }
  .hover\:bg-stone-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-stone-700);
      }
    }
  }
  .hover\:bg-stone-800\/50 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(26.8% 0.007 34.298) 50%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-stone-800) 50%, transparent);
        }
      }
    }
  }
  .hover\:bg-stone-900 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-stone-900);
      }
    }
  }
  .hover\:bg-white\/5 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
        }
      }
    }
  }
  .hover\:bg-white\/10 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
        }
      }
    }
  }
  .hover\:bg-white\/20 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, #fff 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
        }
      }
    }
  }
  .hover\:bg-yellow-950\/20 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(28.6% 0.066 53.813) 20%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-yellow-950) 20%, transparent);
        }
      }
    }
  }
  .hover\:bg-zinc-800 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-zinc-800);
      }
    }
  }
  .hover\:from-\[\#f3a83b\] {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-from: #f3a83b;
        --tw-gradient-stops: var(--tw-gradient-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-\[\#e05616\] {
    &:hover {
      @media (hover: hover) {
        --tw-gradient-to: #e05616;
        --tw-gradient-stops: var(--tw-gradient-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 {
      @media (hover: 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\:text-\[\#c0532f\] {
    &:hover {
      @media (hover: hover) {
        color: #c0532f;
      }
    }
  }
  .hover\:text-\[\#c03030\] {
    &:hover {
      @media (hover: hover) {
        color: #c03030;
      }
    }
  }
  .hover\:text-\[\#e8ce97\] {
    &:hover {
      @media (hover: hover) {
        color: #e8ce97;
      }
    }
  }
  .hover\:text-\[\#f0d48a\] {
    &:hover {
      @media (hover: hover) {
        color: #f0d48a;
      }
    }
  }
  .hover\:text-\[\#f3a83b\] {
    &:hover {
      @media (hover: hover) {
        color: #f3a83b;
      }
    }
  }
  .hover\:text-\[var\(--abg\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--abg);
      }
    }
  }
  .hover\:text-\[var\(--acr\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--acr);
      }
    }
  }
  .hover\:text-\[var\(--agd\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--agd);
      }
    }
  }
  .hover\:text-\[var\(--agr\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--agr);
      }
    }
  }
  .hover\:text-\[var\(--at1\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--at1);
      }
    }
  }
  .hover\:text-\[var\(--at2\)\] {
    &:hover {
      @media (hover: hover) {
        color: var(--at2);
      }
    }
  }
  .hover\:text-amber-200 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-amber-200);
      }
    }
  }
  .hover\:text-amber-300 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-amber-300);
      }
    }
  }
  .hover\:text-black {
    &:hover {
      @media (hover: hover) {
        color: var(--color-black);
      }
    }
  }
  .hover\:text-blue-200 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-200);
      }
    }
  }
  .hover\:text-blue-400 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-blue-400);
      }
    }
  }
  .hover\:text-cyan-200 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-cyan-200);
      }
    }
  }
  .hover\:text-emerald-200 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-emerald-200);
      }
    }
  }
  .hover\:text-emerald-300 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-emerald-300);
      }
    }
  }
  .hover\:text-fuchsia-300 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-fuchsia-300);
      }
    }
  }
  .hover\:text-gray-400 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-gray-400);
      }
    }
  }
  .hover\:text-green-300 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-green-300);
      }
    }
  }
  .hover\:text-orange-300 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-orange-300);
      }
    }
  }
  .hover\:text-pink-300 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-pink-300);
      }
    }
  }
  .hover\:text-purple-200 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-purple-200);
      }
    }
  }
  .hover\:text-red-200 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-200);
      }
    }
  }
  .hover\:text-red-300 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-300);
      }
    }
  }
  .hover\:text-red-400 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-400);
      }
    }
  }
  .hover\:text-red-500 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-500);
      }
    }
  }
  .hover\:text-stone-200 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-stone-200);
      }
    }
  }
  .hover\:text-stone-300 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-stone-300);
      }
    }
  }
  .hover\:text-white {
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .hover\:text-yellow-200 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-yellow-200);
      }
    }
  }
  .hover\:text-yellow-300 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-yellow-300);
      }
    }
  }
  .hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .hover\:opacity-90 {
    &:hover {
      @media (hover: hover) {
        opacity: 90%;
      }
    }
  }
  .hover\:opacity-100 {
    &:hover {
      @media (hover: hover) {
        opacity: 100%;
      }
    }
  }
  .hover\:shadow-\[0_0_25px_rgba\(243\,168\,59\,0\.4\)\] {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 0 25px var(--tw-shadow-color, rgba(243,168,59,0.4));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-\[0_0_30px_rgba\(243\,168\,59\,0\.35\)\] {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 0 30px var(--tw-shadow-color, rgba(243,168,59,0.35));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-\[0_4px_40px_rgba\(243\,168\,59\,0\.6\)\] {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 4px 40px var(--tw-shadow-color, rgba(243,168,59,0.6));
        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_8px_30px_rgba\(243\,168\,59\,0\.25\)\] {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 8px 30px var(--tw-shadow-color, rgba(243,168,59,0.25));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:shadow-lg {
    &:hover {
      @media (hover: hover) {
        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      }
    }
  }
  .hover\:ring-\[var\(--agd\)\] {
    &:hover {
      @media (hover: hover) {
        --tw-ring-color: var(--agd);
      }
    }
  }
  .hover\:ring-\[var\(--color-sulfur\)\] {
    &:hover {
      @media (hover: hover) {
        --tw-ring-color: var(--color-sulfur);
      }
    }
  }
  .hover\:brightness-125 {
    &:hover {
      @media (hover: hover) {
        --tw-brightness: brightness(125%);
        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,);
      }
    }
  }
  .focus\:border-\[\#4a1530\] {
    &:focus {
      border-color: #4a1530;
    }
  }
  .focus\:border-\[\#5c4a30\] {
    &:focus {
      border-color: #5c4a30;
    }
  }
  .focus\:border-\[\#8c6d28\] {
    &:focus {
      border-color: #8c6d28;
    }
  }
  .focus\:border-\[\#c03030\] {
    &:focus {
      border-color: #c03030;
    }
  }
  .focus\:border-\[\#e6b22e\]\/50 {
    &:focus {
      border-color: color-mix(in oklab, #e6b22e 50%, transparent);
    }
  }
  .focus\:border-\[\#f3a83b\] {
    &:focus {
      border-color: #f3a83b;
    }
  }
  .focus\:border-\[var\(--agd\)\] {
    &:focus {
      border-color: var(--agd);
    }
  }
  .focus\:border-\[var\(--agd2\)\] {
    &:focus {
      border-color: var(--agd2);
    }
  }
  .focus\:border-\[var\(--color-sulfur\)\]\/60 {
    &:focus {
      border-color: color-mix(in srgb, #e6b22e 60%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        border-color: color-mix(in oklab, var(--color-sulfur) 60%, transparent);
      }
    }
  }
  .focus\:border-purple-700 {
    &:focus {
      border-color: var(--color-purple-700);
    }
  }
  .focus\:shadow-\[0_0_8px_rgba\(230\,178\,46\,0\.15\)\] {
    &:focus {
      --tw-shadow: 0 0 8px var(--tw-shadow-color, rgba(230,178,46,0.15));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:shadow-\[0_0_25px_rgba\(243\,168\,59\,0\.25\)\] {
    &:focus {
      --tw-shadow: 0 0 25px var(--tw-shadow-color, rgba(243,168,59,0.25));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .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-\[\#f3a83b\] {
    &:focus {
      --tw-ring-color: #f3a83b;
    }
  }
  .focus\:ring-\[var\(--agd\)\] {
    &:focus {
      --tw-ring-color: var(--agd);
    }
  }
  .focus\:outline-none {
    &:focus {
      --tw-outline-style: none;
      outline-style: none;
    }
  }
  .active\:scale-\[0\.97\] {
    &:active {
      scale: 0.97;
    }
  }
  .active\:scale-\[0\.98\] {
    &:active {
      scale: 0.98;
    }
  }
  .active\:cursor-grabbing {
    &:active {
      cursor: grabbing;
    }
  }
  .disabled\:cursor-not-allowed {
    &:disabled {
      cursor: not-allowed;
    }
  }
  .disabled\:opacity-30 {
    &:disabled {
      opacity: 30%;
    }
  }
  .disabled\:opacity-40 {
    &:disabled {
      opacity: 40%;
    }
  }
  .disabled\:hover\:bg-black {
    &:disabled {
      &:hover {
        @media (hover: hover) {
          background-color: var(--color-black);
        }
      }
    }
  }
  .motion-safe\:animate-spin {
    @media (prefers-reduced-motion: no-preference) {
      animation: var(--animate-spin);
    }
  }
  .sm\:right-6 {
    @media (width >= 40rem) {
      right: calc(var(--spacing) * 6);
    }
  }
  .sm\:left-6 {
    @media (width >= 40rem) {
      left: calc(var(--spacing) * 6);
    }
  }
  .sm\:block {
    @media (width >= 40rem) {
      display: block;
    }
  }
  .sm\:flex {
    @media (width >= 40rem) {
      display: flex;
    }
  }
  .sm\:inline {
    @media (width >= 40rem) {
      display: inline;
    }
  }
  .sm\:h-10 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 10);
    }
  }
  .sm\:h-12 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 12);
    }
  }
  .sm\:h-80 {
    @media (width >= 40rem) {
      height: calc(var(--spacing) * 80);
    }
  }
  .sm\:h-\[260px\] {
    @media (width >= 40rem) {
      height: 260px;
    }
  }
  .sm\:h-\[300px\] {
    @media (width >= 40rem) {
      height: 300px;
    }
  }
  .sm\:w-10 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 10);
    }
  }
  .sm\:w-12 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 12);
    }
  }
  .sm\:w-96 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 96);
    }
  }
  .sm\:w-\[260px\] {
    @media (width >= 40rem) {
      width: 260px;
    }
  }
  .sm\:w-\[300px\] {
    @media (width >= 40rem) {
      width: 300px;
    }
  }
  .sm\:w-auto {
    @media (width >= 40rem) {
      width: auto;
    }
  }
  .sm\:max-w-96 {
    @media (width >= 40rem) {
      max-width: calc(var(--spacing) * 96);
    }
  }
  .sm\:translate-y-0 {
    @media (width >= 40rem) {
      --tw-translate-y: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .sm\:scale-95 {
    @media (width >= 40rem) {
      --tw-scale-x: 95%;
      --tw-scale-y: 95%;
      --tw-scale-z: 95%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .sm\:scale-100 {
    @media (width >= 40rem) {
      --tw-scale-x: 100%;
      --tw-scale-y: 100%;
      --tw-scale-z: 100%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-3 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-4 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-6 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .sm\:flex-col {
    @media (width >= 40rem) {
      flex-direction: column;
    }
  }
  .sm\:flex-row {
    @media (width >= 40rem) {
      flex-direction: row;
    }
  }
  .sm\:items-center {
    @media (width >= 40rem) {
      align-items: center;
    }
  }
  .sm\:items-end {
    @media (width >= 40rem) {
      align-items: flex-end;
    }
  }
  .sm\:gap-4 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .sm\:gap-6 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 6);
    }
  }
  .sm\:space-y-0 {
    @media (width >= 40rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .sm\:space-x-4 {
    @media (width >= 40rem) {
      :where(& > :not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
  }
  .sm\:space-x-6 {
    @media (width >= 40rem) {
      :where(& > :not(:last-child)) {
        --tw-space-x-reverse: 0;
        margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
        margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
      }
    }
  }
  .sm\:p-8 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 8);
    }
  }
  .sm\:px-6 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .sm\:py-4 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 4);
    }
  }
  .sm\:py-6 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 6);
    }
  }
  .sm\:py-28 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 28);
    }
  }
  .sm\:pt-12 {
    @media (width >= 40rem) {
      padding-top: calc(var(--spacing) * 12);
    }
  }
  .sm\:text-2xl {
    @media (width >= 40rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .sm\:text-3xl {
    @media (width >= 40rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }
  .sm\:text-4xl {
    @media (width >= 40rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  .sm\:text-7xl {
    @media (width >= 40rem) {
      font-size: var(--text-7xl);
      line-height: var(--tw-leading, var(--text-7xl--line-height));
    }
  }
  .sm\:text-base {
    @media (width >= 40rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .sm\:text-lg {
    @media (width >= 40rem) {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }
  .sm\:text-sm {
    @media (width >= 40rem) {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .sm\:text-xl {
    @media (width >= 40rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .sm\:text-xs {
    @media (width >= 40rem) {
      font-size: var(--text-xs);
      line-height: var(--tw-leading, var(--text-xs--line-height));
    }
  }
  .sm\:group-hover\:scale-105 {
    @media (width >= 40rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          --tw-scale-x: 105%;
          --tw-scale-y: 105%;
          --tw-scale-z: 105%;
          scale: var(--tw-scale-x) var(--tw-scale-y);
        }
      }
    }
  }
  .md\:col-span-2 {
    @media (width >= 48rem) {
      grid-column: span 2 / span 2;
    }
  }
  .md\:block {
    @media (width >= 48rem) {
      display: block;
    }
  }
  .md\:flex {
    @media (width >= 48rem) {
      display: flex;
    }
  }
  .md\:inline-flex {
    @media (width >= 48rem) {
      display: inline-flex;
    }
  }
  .md\:w-auto {
    @media (width >= 48rem) {
      width: auto;
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-4 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-5 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-6 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .md\:flex-row {
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .md\:items-center {
    @media (width >= 48rem) {
      align-items: center;
    }
  }
  .md\:items-end {
    @media (width >= 48rem) {
      align-items: flex-end;
    }
  }
  .md\:gap-4 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 4);
    }
  }
  .md\:text-left {
    @media (width >= 48rem) {
      text-align: left;
    }
  }
  .md\:text-2xl {
    @media (width >= 48rem) {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }
  .md\:text-8xl {
    @media (width >= 48rem) {
      font-size: var(--text-8xl);
      line-height: var(--tw-leading, var(--text-8xl--line-height));
    }
  }
  .lg\:static {
    @media (width >= 64rem) {
      position: static;
    }
  }
  .lg\:inset-auto {
    @media (width >= 64rem) {
      inset: auto;
    }
  }
  .lg\:z-auto {
    @media (width >= 64rem) {
      z-index: auto;
    }
  }
  .lg\:col-span-1 {
    @media (width >= 64rem) {
      grid-column: span 1 / span 1;
    }
  }
  .lg\:col-span-3 {
    @media (width >= 64rem) {
      grid-column: span 3 / span 3;
    }
  }
  .lg\:col-span-4 {
    @media (width >= 64rem) {
      grid-column: span 4 / span 4;
    }
  }
  .lg\:col-span-5 {
    @media (width >= 64rem) {
      grid-column: span 5 / span 5;
    }
  }
  .lg\:mx-0 {
    @media (width >= 64rem) {
      margin-inline: calc(var(--spacing) * 0);
    }
  }
  .lg\:mt-1\.5 {
    @media (width >= 64rem) {
      margin-top: calc(var(--spacing) * 1.5);
    }
  }
  .lg\:mt-6 {
    @media (width >= 64rem) {
      margin-top: calc(var(--spacing) * 6);
    }
  }
  .lg\:mt-10 {
    @media (width >= 64rem) {
      margin-top: calc(var(--spacing) * 10);
    }
  }
  .lg\:mb-10 {
    @media (width >= 64rem) {
      margin-bottom: calc(var(--spacing) * 10);
    }
  }
  .lg\:block {
    @media (width >= 64rem) {
      display: block;
    }
  }
  .lg\:flex {
    @media (width >= 64rem) {
      display: flex;
    }
  }
  .lg\:hidden {
    @media (width >= 64rem) {
      display: none;
    }
  }
  .lg\:h-72 {
    @media (width >= 64rem) {
      height: calc(var(--spacing) * 72);
    }
  }
  .lg\:h-\[380px\] {
    @media (width >= 64rem) {
      height: 380px;
    }
  }
  .lg\:h-\[420px\] {
    @media (width >= 64rem) {
      height: 420px;
    }
  }
  .lg\:h-screen {
    @media (width >= 64rem) {
      height: 100vh;
    }
  }
  .lg\:w-1\/2 {
    @media (width >= 64rem) {
      width: calc(1/2 * 100%);
    }
  }
  .lg\:w-40 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 40);
    }
  }
  .lg\:w-96 {
    @media (width >= 64rem) {
      width: calc(var(--spacing) * 96);
    }
  }
  .lg\:w-\[280px\] {
    @media (width >= 64rem) {
      width: 280px;
    }
  }
  .lg\:w-\[380px\] {
    @media (width >= 64rem) {
      width: 380px;
    }
  }
  .lg\:w-\[420px\] {
    @media (width >= 64rem) {
      width: 420px;
    }
  }
  .lg\:w-auto {
    @media (width >= 64rem) {
      width: auto;
    }
  }
  .lg\:max-w-none {
    @media (width >= 64rem) {
      max-width: none;
    }
  }
  .lg\:shrink-0 {
    @media (width >= 64rem) {
      flex-shrink: 0;
    }
  }
  .lg\:-translate-x-\[calc\(50\%\+16px\)\] {
    @media (width >= 64rem) {
      --tw-translate-x: calc(calc(50% + 16px) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .lg\:-translate-x-\[calc\(50\%\+105px\)\] {
    @media (width >= 64rem) {
      --tw-translate-x: calc(calc(50% + 105px) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .lg\:-translate-x-\[calc\(50\%-16px\)\] {
    @media (width >= 64rem) {
      --tw-translate-x: calc(calc(50% - 16px) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .lg\:-translate-x-\[calc\(50\%-105px\)\] {
    @media (width >= 64rem) {
      --tw-translate-x: calc(calc(50% - 105px) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .lg\:translate-x-0 {
    @media (width >= 64rem) {
      --tw-translate-x: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .lg\:translate-y-6 {
    @media (width >= 64rem) {
      --tw-translate-y: calc(var(--spacing) * 6);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .lg\:grid-cols-2 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-4 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-6 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-12 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-\[1fr_340px\] {
    @media (width >= 64rem) {
      grid-template-columns: 1fr 340px;
    }
  }
  .lg\:grid-cols-\[280px_1fr\] {
    @media (width >= 64rem) {
      grid-template-columns: 280px 1fr;
    }
  }
  .lg\:grid-cols-\[300px_1fr\] {
    @media (width >= 64rem) {
      grid-template-columns: 300px 1fr;
    }
  }
  .lg\:flex-row {
    @media (width >= 64rem) {
      flex-direction: row;
    }
  }
  .lg\:gap-8 {
    @media (width >= 64rem) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .lg\:space-y-0 {
    @media (width >= 64rem) {
      :where(& > :not(:last-child)) {
        --tw-space-y-reverse: 0;
        margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
        margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
      }
    }
  }
  .lg\:overflow-hidden {
    @media (width >= 64rem) {
      overflow: hidden;
    }
  }
  .lg\:overflow-visible {
    @media (width >= 64rem) {
      overflow: visible;
    }
  }
  .lg\:overflow-y-auto {
    @media (width >= 64rem) {
      overflow-y: auto;
    }
  }
  .lg\:border-r {
    @media (width >= 64rem) {
      border-right-style: var(--tw-border-style);
      border-right-width: 1px;
    }
  }
  .lg\:border-r-0 {
    @media (width >= 64rem) {
      border-right-style: var(--tw-border-style);
      border-right-width: 0px;
    }
  }
  .lg\:border-b-0 {
    @media (width >= 64rem) {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0px;
    }
  }
  .lg\:bg-transparent {
    @media (width >= 64rem) {
      background-color: transparent;
    }
  }
  .lg\:p-0 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 0);
    }
  }
  .lg\:p-6 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .lg\:px-8 {
    @media (width >= 64rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .lg\:pt-8 {
    @media (width >= 64rem) {
      padding-top: calc(var(--spacing) * 8);
    }
  }
  .lg\:pb-0 {
    @media (width >= 64rem) {
      padding-bottom: calc(var(--spacing) * 0);
    }
  }
  .lg\:pb-2 {
    @media (width >= 64rem) {
      padding-bottom: calc(var(--spacing) * 2);
    }
  }
  .lg\:text-base {
    @media (width >= 64rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .lg\:text-lg {
    @media (width >= 64rem) {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }
  .lg\:text-sm {
    @media (width >= 64rem) {
      font-size: var(--text-sm);
      line-height: var(--tw-leading, var(--text-sm--line-height));
    }
  }
  .lg\:transition-none {
    @media (width >= 64rem) {
      transition-property: none;
    }
  }
  .lg\:group-hover\:-translate-x-\[calc\(50\%\+38px\)\] {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          --tw-translate-x: calc(calc(50% + 38px) * -1);
          translate: var(--tw-translate-x) var(--tw-translate-y);
        }
      }
    }
  }
  .lg\:group-hover\:-translate-x-\[calc\(50\%-38px\)\] {
    @media (width >= 64rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          --tw-translate-x: calc(calc(50% - 38px) * -1);
          translate: var(--tw-translate-x) var(--tw-translate-y);
        }
      }
    }
  }
  .xl\:left-\[50rem\] {
    @media (width >= 80rem) {
      left: 50rem;
    }
  }
  .xl\:flex {
    @media (width >= 80rem) {
      display: flex;
    }
  }
  .xl\:hidden {
    @media (width >= 80rem) {
      display: none;
    }
  }
  .xl\:grid-cols-2 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-3 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .xl\:px-28 {
    @media (width >= 80rem) {
      padding-inline: calc(var(--spacing) * 28);
    }
  }
  .xl\:py-32 {
    @media (width >= 80rem) {
      padding-block: calc(var(--spacing) * 32);
    }
  }
  .\32 xl\:h-\[380px\] {
    @media (width >= 96rem) {
      height: 380px;
    }
  }
  .\32 xl\:w-52 {
    @media (width >= 96rem) {
      width: calc(var(--spacing) * 52);
    }
  }
  .\32 xl\:w-\[340px\] {
    @media (width >= 96rem) {
      width: 340px;
    }
  }
  .\32 xl\:-translate-x-\[calc\(50\%\+22px\)\] {
    @media (width >= 96rem) {
      --tw-translate-x: calc(calc(50% + 22px) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .\32 xl\:-translate-x-\[calc\(50\%\+135px\)\] {
    @media (width >= 96rem) {
      --tw-translate-x: calc(calc(50% + 135px) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .\32 xl\:-translate-x-\[calc\(50\%-22px\)\] {
    @media (width >= 96rem) {
      --tw-translate-x: calc(calc(50% - 22px) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .\32 xl\:-translate-x-\[calc\(50\%-135px\)\] {
    @media (width >= 96rem) {
      --tw-translate-x: calc(calc(50% - 135px) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .\32 xl\:translate-y-8 {
    @media (width >= 96rem) {
      --tw-translate-y: calc(var(--spacing) * 8);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  .\32 xl\:text-base {
    @media (width >= 96rem) {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  .\32 xl\:text-xl {
    @media (width >= 96rem) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .\32 xl\:group-hover\:-translate-x-\[calc\(50\%\+40px\)\] {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          --tw-translate-x: calc(calc(50% + 40px) * -1);
          translate: var(--tw-translate-x) var(--tw-translate-y);
        }
      }
    }
  }
  .\32 xl\:group-hover\:-translate-x-\[calc\(50\%-40px\)\] {
    @media (width >= 96rem) {
      &:is(:where(.group):hover *) {
        @media (hover: hover) {
          --tw-translate-x: calc(calc(50% - 40px) * -1);
          translate: var(--tw-translate-x) var(--tw-translate-y);
        }
      }
    }
  }
  .short\:mt-2 {
    @media (max-height: 500px) {
      margin-top: calc(var(--spacing) * 2);
    }
  }
  .short\:mt-3 {
    @media (max-height: 500px) {
      margin-top: calc(var(--spacing) * 3);
    }
  }
  .short\:mt-4 {
    @media (max-height: 500px) {
      margin-top: calc(var(--spacing) * 4);
    }
  }
  .short\:mb-2 {
    @media (max-height: 500px) {
      margin-bottom: calc(var(--spacing) * 2);
    }
  }
  .short\:mb-3 {
    @media (max-height: 500px) {
      margin-bottom: calc(var(--spacing) * 3);
    }
  }
  .short\:mb-4 {
    @media (max-height: 500px) {
      margin-bottom: calc(var(--spacing) * 4);
    }
  }
  .short\:hidden {
    @media (max-height: 500px) {
      display: none;
    }
  }
  .short\:py-2 {
    @media (max-height: 500px) {
      padding-block: calc(var(--spacing) * 2);
    }
  }
  .short\:pb-4 {
    @media (max-height: 500px) {
      padding-bottom: calc(var(--spacing) * 4);
    }
  }
  .short\:text-3xl {
    @media (max-height: 500px) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }
  .short\:text-xl {
    @media (max-height: 500px) {
      font-size: var(--text-xl);
      line-height: var(--tw-leading, var(--text-xl--line-height));
    }
  }
  .\[\[data-theme\=dark\]_\&\]\:left-2\/3 {
    [data-theme=dark] & {
      left: calc(2/3 * 100%);
    }
  }
  .\[\[data-theme\=light\]_\&\]\:left-1\/3 {
    [data-theme=light] & {
      left: calc(1/3 * 100%);
    }
  }
}
:root {
  --sg-abyss: #030304;
  --sg-shadow: #0c0d12;
  --sg-stone: #252830;
  --sg-iron: #32353d;
  --sg-tarnished: #4e535c;
  --sg-blood: #6e1c1c;
  --sg-bright-blood: #c82323;
  --sg-sulfur: #e6b22e;
  --sg-amber: #ff7700;
  --sg-teal-glow: #2ce6c5;
  --sg-toxic-green: #39e62c;
  --sg-parchment: #e0d5c1;
  --sg-dim-parchment: #a19785;
  --sg-font-gothic: 'Cinzel', serif;
  --sg-font-serif: 'IM Fell English', serif;
  --sg-font-ui: 'Inter', sans-serif;
  --sg-win-frame: #5c4a30;
  --sg-win-frame-lite: #5c4a30;
  --sg-win-frame-dark: #5c4a30;
  --sg-win-bg: rgba(28, 25, 30, 0.92);
  --sg-win-bg-glow: rgba(120, 84, 40, 0.13);
  --sg-win-ink: var(--sg-parchment);
  --sg-win-hairline: rgba(230, 178, 46, 0.10);
  --sg-win-shadow: 0 8px 32px rgba(0, 0, 0, 0.9), inset 0 0 60px rgba(0, 0, 0, 0.4), 0 0 24px rgba(230, 178, 46, 0.05);
  --sg-win-titlebar: radial-gradient(ellipse at 50% 120%, rgba(120, 84, 40, 0.20), transparent 60%), linear-gradient(to bottom, #241a10, #0c0a08);
  --sg-win-titlebar-rule: rgba(230, 178, 46, 0.28);
  --sg-win-title-ink: #e8ce97;
  --sg-win-title-glow: 0 0 10px rgba(232, 206, 151, 0.45), 0 1px 2px #000;
  --sg-win-gem: rgba(230, 178, 46, 0.75);
  --sg-win-gem-glow: 0 0 6px rgba(230, 178, 46, 0.6);
  --sg-win-btn-bg: #1a1410;
  --sg-win-btn-ink: #938573;
  --sg-win-btn-border: #5c4a30;
  --sg-win-btn-hover-bg: #2a1f10;
  --sg-win-btn-hover-ink: #e8ce97;
  --sg-win-btn-hover-border: #8c7448;
  --sg-win-close-hover-bg: #3d0505;
  --sg-win-close-hover-ink: #c82323;
  --sg-win-close-hover-border: #c82323;
  --sg-win-radius: 0px;
  --sg-win-blur: 12px;
}
[data-game-theme="light"] {
  --sg-win-frame: #b89a5e;
  --sg-win-frame-lite: #ece0c2;
  --sg-win-frame-dark: #8c7038;
  --sg-win-bg: #f5f0e4;
  --sg-win-bg-glow: transparent;
  --sg-win-ink: #2b2218;
  --sg-win-hairline: rgba(140, 112, 56, 0.28);
  --sg-win-shadow: 0 8px 24px rgba(60, 45, 20, 0.28), inset 0 0 40px rgba(255, 255, 255, 0.4);
  --sg-win-titlebar: linear-gradient(to bottom, #ece0c2, #ddcda0);
  --sg-win-titlebar-rule: #b89a5e;
  --sg-win-title-ink: #5a3f12;
  --sg-win-title-glow: none;
  --sg-win-gem: rgba(140, 112, 56, 0.8);
  --sg-win-gem-glow: none;
  --sg-win-btn-bg: #e6dcc2;
  --sg-win-btn-ink: #6a5630;
  --sg-win-btn-border: #b89a5e;
  --sg-win-btn-hover-bg: #f0e8d0;
  --sg-win-btn-hover-ink: #3a2a0a;
  --sg-win-btn-hover-border: #8c7038;
  --sg-win-close-hover-bg: #f3d6d6;
  --sg-win-close-hover-ink: #a51d1d;
  --sg-win-close-hover-border: #a51d1d;
}
:root {
  --sg-map-plate: #0c0a08;
  --sg-map-grid-line: rgba(230, 178, 46, 0.14);
  --sg-map-brass: #e6b22e;
  --sg-map-brass-lit: #f6da82;
  --sg-map-brass-dark: #a9761b;
  --sg-map-brass-soft: rgba(230, 178, 46, 0.35);
  --sg-map-fog-bg: #14110c;
  --sg-map-fog-ink: rgba(224, 213, 193, 0.16);
  --sg-map-town-bg: #2c2115;
  --sg-map-town-ink: #e9b869;
  --sg-map-outpost-bg: #291e13;
  --sg-map-outpost-ink: #d4a054;
  --sg-map-forest-bg: #16281a;
  --sg-map-forest-ink: #7cbf7f;
  --sg-map-swamp-bg: #19231d;
  --sg-map-swamp-ink: #93a86b;
  --sg-map-mountain-bg: #232b36;
  --sg-map-mountain-ink: #cfdeea;
  --sg-map-crypt-bg: #241e2e;
  --sg-map-crypt-ink: #ab97cf;
  --sg-map-wild-bg: #23200f;
  --sg-map-wild-ink: #bda75e;
}
[data-game-theme="light"] {
  --sg-map-plate: #efe7d2;
  --sg-map-grid-line: rgba(140, 112, 56, 0.30);
  --sg-map-brass: #8c7038;
  --sg-map-brass-lit: #b8944c;
  --sg-map-brass-dark: #6a5426;
  --sg-map-brass-soft: rgba(140, 112, 56, 0.45);
  --sg-map-fog-bg: #d9cdb0;
  --sg-map-fog-ink: rgba(74, 60, 38, 0.35);
  --sg-map-town-bg: #ecd9b4;
  --sg-map-town-ink: #8a6430;
  --sg-map-outpost-bg: #e6d2ac;
  --sg-map-outpost-ink: #7d5c2e;
  --sg-map-forest-bg: #d3e2c2;
  --sg-map-forest-ink: #3f6e3d;
  --sg-map-swamp-bg: #d5dcbd;
  --sg-map-swamp-ink: #5d7040;
  --sg-map-mountain-bg: #dfe7ee;
  --sg-map-mountain-ink: #5a7086;
  --sg-map-crypt-bg: #ded4e8;
  --sg-map-crypt-ink: #6a5590;
  --sg-map-wild-bg: #e5dcb4;
  --sg-map-wild-ink: #7a6a34;
}
[data-window-dressing="tome"] {
  --sg-win-frame: #6b5433;
  --sg-win-frame-lite: #7d6238;
  --sg-win-frame-dark: #4a3820;
  --sg-win-bg: radial-gradient(ellipse at 85% 100%, rgba(90, 50, 24, 0.16), transparent 50%),
    linear-gradient(150deg, #2c2013 0%, #211509 48%, #150e07 100%);
  --sg-win-bg-glow: rgba(120, 84, 40, 0.24);
  --sg-win-hairline: rgba(230, 178, 46, 0.26);
  --sg-win-shadow: 0 12px 40px rgba(0, 0, 0, 0.92), inset 0 0 56px rgba(0, 0, 0, 0.5), 0 0 34px rgba(230, 178, 46, 0.08);
  --sg-win-titlebar: radial-gradient(ellipse at 50% 130%, rgba(230, 178, 46, 0.16), transparent 60%),
    linear-gradient(to bottom, #2b1f11, #16100a);
  --sg-win-titlebar-rule: rgba(230, 178, 46, 0.5);
  --sg-win-title-ink: #f0d48a;
  --sg-win-title-glow: 0 0 12px rgba(232, 206, 151, 0.5), 0 1px 2px #000;
  --sg-win-gem: rgba(230, 178, 46, 0.9);
  --sg-win-gem-glow: 0 0 8px rgba(230, 178, 46, 0.7);
  --sg-win-radius: 10px;
  --sg-dress-gold: rgba(230, 178, 46, 0.5);
  --sg-dress-gold-soft: rgba(230, 178, 46, 0.22);
  --sg-dress-tint: 230, 178, 46;
}
[data-game-theme="light"][data-window-dressing="tome"] {
  --sg-win-frame: #a8894e;
  --sg-win-frame-lite: #e9dcb8;
  --sg-win-frame-dark: #83672f;
  --sg-win-bg: linear-gradient(150deg, #f8f1de 0%, #f1e6c8 60%, #e9dcb8 100%);
  --sg-win-bg-glow: rgba(230, 178, 46, 0.10);
  --sg-win-hairline: rgba(140, 112, 56, 0.35);
  --sg-win-shadow: 0 10px 28px rgba(60, 45, 20, 0.30), inset 0 0 36px rgba(255, 252, 240, 0.5);
  --sg-win-titlebar: linear-gradient(to bottom, #efe2bd, #dfcd9c);
  --sg-win-titlebar-rule: rgba(140, 112, 56, 0.6);
  --sg-win-title-ink: #5a3f12;
  --sg-win-title-glow: none;
  --sg-win-gem: rgba(140, 112, 56, 0.9);
  --sg-win-gem-glow: none;
  --sg-dress-gold: rgba(140, 112, 56, 0.55);
  --sg-dress-gold-soft: rgba(140, 112, 56, 0.25);
}
[data-game-skin="frostglass"] {
  --sg-win-frame: #4a6a80;
  --sg-win-frame-lite: #5f88a5;
  --sg-win-frame-dark: #35505f;
  --sg-win-bg: rgba(14, 22, 30, 0.92);
  --sg-win-bg-glow: rgba(90, 160, 210, 0.10);
  --sg-win-ink: #d5e6f2;
  --sg-win-hairline: rgba(140, 200, 255, 0.14);
  --sg-win-shadow: 0 8px 32px rgba(0, 0, 0, 0.9), inset 0 0 60px rgba(10, 30, 45, 0.5), 0 0 24px rgba(125, 211, 252, 0.06);
  --sg-win-titlebar: radial-gradient(ellipse at 50% 120%, rgba(90, 160, 210, 0.18), transparent 60%), linear-gradient(to bottom, #16283a, #0a1018);
  --sg-win-titlebar-rule: rgba(140, 200, 255, 0.28);
  --sg-win-title-ink: #bfe0f5;
  --sg-win-title-glow: 0 0 10px rgba(150, 210, 250, 0.4), 0 1px 2px #000;
  --sg-win-gem: rgba(125, 211, 252, 0.8);
  --sg-win-gem-glow: 0 0 6px rgba(125, 211, 252, 0.6);
  --sg-win-btn-bg: #101b26;
  --sg-win-btn-ink: #7e97a8;
  --sg-win-btn-border: #4a6a80;
  --sg-win-btn-hover-bg: #182a3a;
  --sg-win-btn-hover-ink: #bfe0f5;
  --sg-win-btn-hover-border: #6fa0c0;
  --sg-map-plate: #0a1018;
  --sg-map-grid-line: rgba(140, 200, 255, 0.14);
  --sg-map-brass: #7fb8dd;
  --sg-map-brass-lit: #c4e5f7;
  --sg-map-brass-dark: #4a7a9b;
  --sg-map-brass-soft: rgba(125, 211, 252, 0.35);
  --sg-map-fog-bg: #0e1620;
  --sg-map-fog-ink: rgba(213, 230, 242, 0.16);
}
[data-game-skin="mossgold"] {
  --sg-win-frame: #4f5c30;
  --sg-win-frame-lite: #6a7a42;
  --sg-win-frame-dark: #3a4522;
  --sg-win-bg: rgba(18, 24, 14, 0.92);
  --sg-win-bg-glow: rgba(140, 165, 60, 0.10);
  --sg-win-ink: #e2ead0;
  --sg-win-hairline: rgba(190, 215, 105, 0.13);
  --sg-win-shadow: 0 8px 32px rgba(0, 0, 0, 0.9), inset 0 0 60px rgba(15, 25, 8, 0.5), 0 0 24px rgba(163, 190, 60, 0.06);
  --sg-win-titlebar: radial-gradient(ellipse at 50% 120%, rgba(140, 165, 60, 0.18), transparent 60%), linear-gradient(to bottom, #24301a, #0c100a);
  --sg-win-titlebar-rule: rgba(190, 215, 105, 0.28);
  --sg-win-title-ink: #d8e6a8;
  --sg-win-title-glow: 0 0 10px rgba(200, 225, 130, 0.35), 0 1px 2px #000;
  --sg-win-gem: rgba(163, 190, 60, 0.8);
  --sg-win-gem-glow: 0 0 6px rgba(163, 190, 60, 0.6);
  --sg-win-btn-bg: #171e10;
  --sg-win-btn-ink: #92a070;
  --sg-win-btn-border: #4f5c30;
  --sg-win-btn-hover-bg: #24301a;
  --sg-win-btn-hover-ink: #d8e6a8;
  --sg-win-btn-hover-border: #7a8c48;
  --sg-map-plate: #0c100a;
  --sg-map-grid-line: rgba(190, 215, 105, 0.14);
  --sg-map-brass: #b7c85a;
  --sg-map-brass-lit: #dfe9a0;
  --sg-map-brass-dark: #77852f;
  --sg-map-brass-soft: rgba(163, 190, 60, 0.35);
  --sg-map-fog-bg: #12180e;
  --sg-map-fog-ink: rgba(226, 234, 208, 0.16);
}
[data-game-skin="bone-reliquary"] {
  --sg-win-frame: #5a4f73;
  --sg-win-frame-lite: #776a95;
  --sg-win-frame-dark: #423a55;
  --sg-win-bg: rgba(22, 18, 28, 0.93);
  --sg-win-bg-glow: rgba(140, 110, 200, 0.10);
  --sg-win-ink: #e6dff0;
  --sg-win-hairline: rgba(180, 150, 255, 0.13);
  --sg-win-shadow: 0 8px 32px rgba(0, 0, 0, 0.9), inset 0 0 60px rgba(20, 10, 30, 0.55), 0 0 24px rgba(167, 139, 250, 0.07);
  --sg-win-titlebar: radial-gradient(ellipse at 50% 120%, rgba(140, 110, 200, 0.20), transparent 60%), linear-gradient(to bottom, #2a2140, #131019);
  --sg-win-titlebar-rule: rgba(180, 150, 255, 0.28);
  --sg-win-title-ink: #cbb8e8;
  --sg-win-title-glow: 0 0 10px rgba(190, 160, 255, 0.4), 0 1px 2px #000;
  --sg-win-gem: rgba(167, 139, 250, 0.78);
  --sg-win-gem-glow: 0 0 6px rgba(167, 139, 250, 0.6);
  --sg-win-btn-bg: #191423;
  --sg-win-btn-ink: #8f82a8;
  --sg-win-btn-border: #5a4f73;
  --sg-win-btn-hover-bg: #262038;
  --sg-win-btn-hover-ink: #cbb8e8;
  --sg-win-btn-hover-border: #8674ad;
  --sg-map-plate: #131019;
  --sg-map-grid-line: rgba(180, 150, 255, 0.14);
  --sg-map-brass: #a78bfa;
  --sg-map-brass-lit: #d3c3ff;
  --sg-map-brass-dark: #6d569e;
  --sg-map-brass-soft: rgba(167, 139, 250, 0.35);
  --sg-map-fog-bg: #161220;
  --sg-map-fog-ink: rgba(230, 223, 240, 0.16);
}
[data-game-skin="candlelit"] {
  --sg-win-frame: #8a6a3c;
  --sg-win-frame-lite: #ab8a55;
  --sg-win-frame-dark: #62481f;
  --sg-win-bg: rgba(36, 26, 16, 0.94);
  --sg-win-bg-glow: rgba(255, 180, 90, 0.14);
  --sg-win-ink: #f2e2c4;
  --sg-win-hairline: rgba(255, 200, 120, 0.18);
  --sg-win-shadow: 0 8px 32px rgba(0, 0, 0, 0.85), inset 0 0 60px rgba(40, 22, 6, 0.5), 0 0 28px rgba(255, 190, 90, 0.10);
  --sg-win-titlebar: radial-gradient(ellipse at 50% 120%, rgba(255, 180, 90, 0.22), transparent 60%), linear-gradient(to bottom, #3a2a16, #1c130a);
  --sg-win-titlebar-rule: rgba(255, 200, 120, 0.32);
  --sg-win-title-ink: #f2d8a8;
  --sg-win-title-glow: 0 0 10px rgba(255, 210, 140, 0.45), 0 1px 2px #000;
  --sg-win-gem: rgba(255, 190, 90, 0.85);
  --sg-win-gem-glow: 0 0 7px rgba(255, 190, 90, 0.65);
  --sg-win-btn-bg: #241809;
  --sg-win-btn-ink: #b09468;
  --sg-win-btn-border: #8a6a3c;
  --sg-win-btn-hover-bg: #382512;
  --sg-win-btn-hover-ink: #f2d8a8;
  --sg-win-btn-hover-border: #c09858;
  --sg-map-plate: #160e06;
  --sg-map-grid-line: rgba(255, 200, 120, 0.16);
  --sg-map-brass: #f0b45e;
  --sg-map-brass-lit: #ffdba0;
  --sg-map-brass-dark: #a5732c;
  --sg-map-brass-soft: rgba(255, 190, 90, 0.38);
  --sg-map-fog-bg: #1c130a;
  --sg-map-fog-ink: rgba(242, 226, 196, 0.16);
}
[data-game-skin="royal-gilt"] {
  --sg-win-frame: #7a5a28;
  --sg-win-frame-lite: #a07830;
  --sg-win-frame-dark: #55401c;
  --sg-win-bg: rgba(28, 13, 17, 0.93);
  --sg-win-bg-glow: rgba(200, 60, 80, 0.10);
  --sg-win-ink: #eee0c8;
  --sg-win-hairline: rgba(230, 190, 90, 0.20);
  --sg-win-shadow: 0 8px 32px rgba(0, 0, 0, 0.9), inset 0 0 60px rgba(30, 5, 12, 0.55), 0 0 24px rgba(230, 178, 46, 0.10);
  --sg-win-titlebar: radial-gradient(ellipse at 50% 120%, rgba(200, 60, 80, 0.16), transparent 60%), linear-gradient(to bottom, #3a1520, #160a0e);
  --sg-win-titlebar-rule: rgba(230, 190, 90, 0.34);
  --sg-win-title-ink: #ecd9a0;
  --sg-win-title-glow: 0 0 10px rgba(236, 217, 160, 0.45), 0 1px 2px #000;
  --sg-win-gem: rgba(230, 178, 46, 0.9);
  --sg-win-gem-glow: 0 0 7px rgba(230, 178, 46, 0.65);
  --sg-win-btn-bg: #200e13;
  --sg-win-btn-ink: #a88e68;
  --sg-win-btn-border: #7a5a28;
  --sg-win-btn-hover-bg: #321820;
  --sg-win-btn-hover-ink: #ecd9a0;
  --sg-win-btn-hover-border: #b08838;
  --sg-map-plate: #140a0e;
  --sg-map-grid-line: rgba(230, 190, 90, 0.16);
  --sg-map-brass: #e6be5a;
  --sg-map-brass-lit: #f6e2a4;
  --sg-map-brass-dark: #9a7828;
  --sg-map-brass-soft: rgba(230, 190, 90, 0.38);
  --sg-map-fog-bg: #1c0d12;
  --sg-map-fog-ink: rgba(238, 224, 200, 0.16);
}
:root[data-world-phase="night"] {
  --sg-win-frame: #465064;
  --sg-win-frame-lite: #6a7890;
  --sg-win-frame-dark: #2c3342;
  --sg-win-hairline: rgba(160, 180, 220, 0.18);
  --sg-win-shadow: 0 8px 32px rgba(0, 0, 0, 0.9), inset 0 0 60px rgba(10, 14, 26, 0.5), 0 0 24px rgba(120, 150, 210, 0.08);
  --sg-win-gem: rgba(150, 175, 225, 0.8);
  --sg-win-gem-glow: 0 0 7px rgba(150, 175, 225, 0.55);
}
:root[data-area-ambience="frost"] {
  --sg-win-frame: #5e7d96;
  --sg-win-frame-lite: #9cc0d8;
  --sg-win-frame-dark: #3d5568;
  --sg-win-hairline: rgba(170, 210, 235, 0.22);
  --sg-win-shadow: 0 8px 32px rgba(0, 0, 0, 0.85), inset 0 0 60px rgba(10, 20, 30, 0.45), 0 0 26px rgba(140, 190, 225, 0.12);
  --sg-win-gem: rgba(160, 205, 235, 0.85);
  --sg-win-gem-glow: 0 0 7px rgba(160, 205, 235, 0.6);
}
:root[data-area-ambience="rain"] {
  --sg-win-frame: #4a5a6a;
  --sg-win-frame-lite: #74889a;
  --sg-win-frame-dark: #303c48;
  --sg-win-hairline: rgba(150, 180, 205, 0.20);
  --sg-win-shadow: 0 8px 32px rgba(0, 0, 0, 0.88), inset 0 0 60px rgba(12, 18, 26, 0.5), 0 0 24px rgba(110, 150, 185, 0.10);
  --sg-win-gem: rgba(130, 170, 205, 0.8);
  --sg-win-gem-glow: 0 0 7px rgba(130, 170, 205, 0.55);
}
:root[data-area-ambience="fog"] {
  --sg-win-frame: #565a58;
  --sg-win-frame-lite: #7e837f;
  --sg-win-frame-dark: #383b39;
  --sg-win-hairline: rgba(200, 205, 200, 0.14);
  --sg-win-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), inset 0 0 60px rgba(30, 32, 30, 0.45), 0 0 20px rgba(170, 175, 170, 0.07);
  --sg-win-gem: rgba(185, 190, 185, 0.7);
  --sg-win-gem-glow: 0 0 6px rgba(185, 190, 185, 0.45);
}
:root[data-stealth="on"] {
  --sg-win-frame: #3b3e44;
  --sg-win-frame-lite: #565a62;
  --sg-win-frame-dark: #22242a;
  --sg-win-bg: rgba(15, 16, 18, 0.94);
  --sg-win-bg-glow: rgba(150, 160, 175, 0.07);
  --sg-win-ink: #c4c8ce;
  --sg-win-hairline: rgba(180, 190, 205, 0.12);
  --sg-win-shadow: 0 8px 32px rgba(0, 0, 0, 0.92), inset 0 0 60px rgba(6, 7, 9, 0.6), 0 0 22px rgba(120, 130, 145, 0.06);
  --sg-win-titlebar-rule: rgba(180, 190, 205, 0.26);
  --sg-win-title-ink: #cdd2d8;
  --sg-win-title-glow: 0 0 10px rgba(170, 180, 195, 0.32), 0 1px 2px #000;
  --sg-win-gem: rgba(150, 160, 175, 0.85);
  --sg-win-gem-glow: 0 0 6px rgba(150, 160, 175, 0.6);
  --sg-win-btn-bg: #16181b;
  --sg-win-btn-ink: #8a9099;
  --sg-win-btn-border: #3b3e44;
  --sg-win-btn-hover-bg: #24272c;
  --sg-win-btn-hover-ink: #cdd2d8;
  --sg-win-btn-hover-border: #6a7079;
  --sg-dress-gold: rgba(150, 160, 175, 0.5);
  --sg-dress-gold-soft: rgba(150, 160, 175, 0.22);
  --sg-dress-tint: 150, 160, 175;
}
.bf-root {
  --teal: var(--sg-teal-glow);
  --blood: var(--sg-bright-blood);
  --gold: var(--sg-sulfur);
  --amber: var(--sg-amber);
}
.bf-gothic {
  font-family: var(--font-gothic, 'Cinzel', serif);
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 2px 2px 4px rgba(0,0,0,.9);
}
.bf-panel {
  background: rgba(10,9,12,.92);
  border: 1px solid #5c4a30;
  box-shadow: 0 4px 30px rgba(0,0,0,.8);
}
.bf-zones {
  display: flex;
  gap: .9rem;
  align-items: stretch;
  overflow-x: auto;
  height: 100%;
  min-height: 0;
  position: relative;
}
.bf-spellvfx {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  overflow: visible;
}
.bf-spellvfx-stage, .bf-spellvfx-canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}
.bf-zone {
  position: relative;
  border-radius: .5rem;
  overflow: hidden;
  min-height: 300px;
  border: 1px solid #5c4a30;
  box-shadow: 0 6px 28px rgba(0,0,0,.85);
  flex: 1 0 auto;
  transition: flex-grow .42s cubic-bezier(.4,0,.2,1), filter .42s ease;
  contain: layout;
  display: flex;
  flex-direction: column;
}
.bf-zone.collapsed {
  filter: saturate(.78) brightness(.82);
}
.bf-zone.is-empty {
  filter: saturate(.55) brightness(.68);
}
.bf-zone-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .82;
  z-index: 0;
  transition: opacity .35s ease;
}
.bf-zone.collapsed .bf-zone-bg {
  opacity: .68;
}
.bf-zone.is-empty .bf-zone-bg {
  opacity: .48;
}
.bf-zone-rubble {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  transition: opacity .55s ease;
}
.bf-zone.ruined .bf-zone-rubble {
  background-image: url('/rubble.jpg');
  opacity: .85;
}
.bf-zone-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(3,3,4,.40) 0%, rgba(3,3,4,.05) 35%, rgba(3,3,4,.20) 70%, rgba(3,3,4,.88) 100%);
}
.bf-zone-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: .75rem;
}
.bf-area-hp {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  height: 18px;
  width: 100%;
  background: rgba(5,5,7,.85);
  overflow: hidden;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.6);
}
.bf-area-hp-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  transition: width .35s ease, background .35s ease;
}
.bf-area-hp-label {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-gothic, 'Cinzel');
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.95);
}
.bf-zone.player-zone {
  border-color: var(--teal);
  box-shadow: 0 0 22px rgba(44,230,197,.18), 0 6px 28px rgba(0,0,0,.85);
}
.bf-zone.enemy-zone {
  border-color: #7a2020;
}
.bf-zone.ruined {
  filter: none;
}
.bf-zone.ruined .bf-zone-bg {
  opacity: .82;
}
.bf-zone.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 0 30px rgba(230,178,46,.5), 0 6px 28px rgba(0,0,0,.85);
}
.bf-zone.active::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 30px rgba(230,178,46,.38);
  opacity: 0;
  animation: fx-glow-pulse 1.8s ease-in-out infinite;
}
body.bf-settling .bf-zone.active {
  box-shadow: 0 0 0 1px var(--gold), 0 6px 28px rgba(0,0,0,.85);
}
body.bf-settling .bf-zone.active::after {
  animation: none;
  opacity: 0;
}
body.bf-settling .bf-hero-aura {
  animation: none;
  opacity: 0;
}
.bf-zone:hover {
  filter: saturate(1) brightness(1.05);
}
.bf-zone:hover .bf-zone-bg {
  opacity: .9;
}
.bf-zone.bf-linked-zone {
  filter: saturate(1) brightness(1.08);
  box-shadow: 0 0 0 1px var(--gold), 0 0 24px rgba(230,178,46,.45);
}
.bf-zone.bf-linked-zone .bf-zone-bg {
  opacity: .9;
}
.bf-stage {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2.5rem;
  min-height: 200px;
}
.bf-side {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
}
.bf-figure {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 132px;
}
.bf-figure svg {
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.85));
}
.bf-figure.party svg {
  color: var(--teal);
}
.bf-figure.enemy svg {
  color: #ff5a5a;
}
.bf-figure.acting {
  animation: bf-bob 2.6s ease-in-out infinite;
}
.bf-figure.targetable .bf-portrait {
  outline: 2px solid #ff5a5a;
  outline-offset: 3px;
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(255,70,70,.45);
}
.bf-figure.targetable .bf-portrait::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 10px;
  pointer-events: none;
  box-shadow: 0 0 20px 3px rgba(255,90,90,.75);
  opacity: 0;
  animation: fx-glow-pulse 1.4s ease-in-out infinite;
}
.bf-figure.bf-linked .bf-portrait {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
  box-shadow: 0 0 18px rgba(230,178,46,.7);
}
.bf-turn-card {
  transition: transform .12s ease;
}
.bf-turn-frame {
  position: relative;
  width: 74px;
  border: 2px solid #3a3a40;
  border-radius: 7px;
  overflow: hidden;
  background: #08070a;
  box-shadow: 0 2px 6px rgba(0,0,0,.6);
  transition: transform .12s ease, box-shadow .15s ease;
}
.bf-turn-frame.is-player {
  border-color: rgba(44,230,197,.65);
}
.bf-turn-frame.is-enemy {
  border-color: rgba(255,70,70,.6);
}
.bf-turn-portrait {
  display: block;
  width: 100%;
  height: 68px;
  object-fit: cover;
}
.bf-turn-portrait svg {
  width: 100%;
  height: 100%;
  display: block;
}
.bf-turn-portrait svg, .bf-turn-portrait svg * {
  animation: none !important;
}
.bf-turn-hp {
  height: 6px;
  width: 100%;
  background: #1a0707;
}
.bf-turn-hp-fill {
  height: 100%;
  background: linear-gradient(to right, #440a0a, var(--blood));
  transition: width .26s cubic-bezier(.4,0,.2,1);
}
.bf-turn-card:hover .bf-turn-frame:not(.bf-acting) {
  transform: translateY(-2px);
}
.bf-turn-frame.bf-acting {
  border-color: var(--gold);
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 0 14px rgba(230,178,46,.65);
}
.bf-turn-frame.bf-acting::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  box-shadow: inset 0 0 12px rgba(230,178,46,.7);
  opacity: 0;
  animation: fx-glow-pulse 1.5s ease-in-out infinite;
}
.bf-turn-namebar {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 5px;
  background: rgba(8,7,10,.96);
  border: 1px solid #5c4a30;
  box-shadow: 0 2px 8px rgba(0,0,0,.7);
  font-size: 12px;
  letter-spacing: .4px;
  line-height: 1.3;
  color: #f0e9d8;
  opacity: 0;
  transition: opacity .12s ease;
  pointer-events: none;
  z-index: 60;
}
.bf-turn-namebar.show {
  opacity: 1;
}
.bf-turn-namebar[data-faction="player"] {
  color: #2ce6c5;
}
.bf-turn-namebar[data-faction="enemy"] {
  color: #ff6b6b;
}
.bf-ground {
  width: 96px;
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.7), transparent 70%);
}
.bf-ground.acting {
  background: radial-gradient(ellipse at center, rgba(230,178,46,.55), transparent 70%);
  animation: bf-pulse 1.8s ease-in-out infinite;
}
.bf-figure.player .bf-ground {
  background: none;
  animation: none;
}
@keyframes bf-bob {
  0%,100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
@keyframes bf-pulse {
  0%,100% {
    opacity: .5;
    transform: scale(.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}
.bf-hero {
  position: relative;
  width: 104px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bf-breathe 3.6s ease-in-out infinite;
}
.bf-figure.acting .bf-hero {
  animation: bf-bob 2.6s ease-in-out infinite;
}
.bf-hero-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(44,230,197,.38) 0%, rgba(44,230,197,.2) 40%, transparent 68%);
  animation: bf-aura 3s ease-in-out infinite;
  z-index: 0;
}
.bf-hero-chip {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 0 10px rgba(44,230,197,.85));
}
.bf-hero-chip svg {
  width: 100%;
  height: 100%;
}
.bf-figure.dead .bf-hero-chip {
  filter: grayscale(1) brightness(.5);
  opacity: .55;
}
.bf-figure.dead .bf-hero-aura {
  opacity: .3;
}
.bf-hero-head {
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #b9fff2, var(--teal));
}
.bf-hero-num {
  position: absolute;
  top: 4px;
  right: 8px;
  z-index: 4;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  font-family: var(--font-gothic, 'Cinzel');
  font-weight: 700;
  color: var(--gold);
  background: rgba(8,7,10,.92);
  border: 1px solid rgba(230,178,46,.7);
  box-shadow: 0 1px 4px rgba(0,0,0,.8);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bf-hero-num .bf-num-g {
  display: none;
  font-size: 9px;
}
.bf-figure:hover .bf-hero-num {
  color: #fff;
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(230,178,46,.6);
  cursor: pointer;
}
.bf-figure:hover .bf-hero-num .bf-num-n {
  display: none;
}
.bf-figure:hover .bf-hero-num .bf-num-g {
  display: inline;
}
@keyframes bf-breathe {
  0%,100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.015);
  }
}
@keyframes bf-aura {
  0%,100% {
    opacity: .5;
  }
  50% {
    opacity: .95;
  }
}
.bf-enemy-img {
  width: 118px;
  height: 172px;
  object-fit: cover;
  object-position: top center;
  border-radius: 8px;
  border: 1px solid rgba(255,70,70,.55);
  box-shadow: 0 6px 14px rgba(0,0,0,.85), 0 0 14px rgba(200,30,30,.25);
  animation: bf-creature 4.2s ease-in-out infinite;
}
.bf-figure.acting .bf-enemy-img {
  border-color: #ff5a5a;
  box-shadow: 0 0 18px rgba(255,60,60,.55);
  animation: bf-bob 2.4s ease-in-out infinite;
}
.bf-figure.dead .bf-enemy-img {
  filter: grayscale(1) brightness(.5);
  opacity: .55;
}
.bf-death-skull {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  color: #f4efe2;
  font-size: 42px;
  opacity: 1;
  pointer-events: none;
  filter: grayscale(0) brightness(1);
  text-shadow: 0 0 6px rgba(0,0,0,.95), 0 2px 3px rgba(0,0,0,.9);
  animation: bf-skull-pop .32s cubic-bezier(.34,1.56,.64,1);
}
@keyframes bf-skull-pop {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(6px) scale(.4);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}
.bf-loot-bag {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 8;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,221,120,.4) 0%, rgba(230,178,46,.16) 55%, transparent 72%);
  color: #ffd766;
  font-size: 42px;
  opacity: .85;
  text-shadow: 0 0 10px rgba(255,215,90,.95), 0 0 22px rgba(230,178,46,.75), 0 2px 3px rgba(0,0,0,.9);
}
.bf-loot-bag.grabbable {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  animation: bf-loot-bob 1.3s ease-in-out infinite;
}
.bf-loot-bag.grabbable:hover {
  filter: brightness(1.3) drop-shadow(0 0 18px rgba(255,225,120,.95));
  transform: translate(-50%,-50%) scale(1.1);
  animation: none;
}
@keyframes bf-loot-bob {
  0%,100% {
    transform: translate(-50%,-50%) scale(1);
  }
  50% {
    transform: translate(-50%,-50%) scale(1.15);
  }
}
.bf-loot-bag.grabbable::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,221,120,.55) 0%, rgba(255,221,120,.18) 45%, transparent 70%);
  opacity: 0;
  animation: fx-glow-pulse 1.3s ease-in-out infinite;
}
@keyframes bf-creature {
  0%,100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-3px) rotate(-1deg);
  }
}
.bf-st-strip {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  width: max-content;
  max-width: 120px;
}
.bf-st-chip {
  --st: #8d8271;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1;
  cursor: help;
  border: 1px solid var(--st);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--st) 70%, #000);
  }
  background: var(--st);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--st) 18%, rgba(5,5,8,.94));
  }
  box-shadow: 0 2px 6px rgba(0,0,0,.7);
}
.bf-st-chip i {
  font-size: 11px;
  color: var(--st);
}
.bf-st-emoji {
  font-size: 12px;
  text-shadow: 0 0 4px rgba(0,0,0,.9);
}
.bf-st-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 13px;
  height: 13px;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-gothic, 'Cinzel');
  font-size: 8px;
  font-weight: 800;
  color: #ffd24a;
  background: rgba(5,5,8,.95);
  border-radius: 999px;
  border: 1px solid var(--st);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--st) 60%, #000);
  }
  line-height: 1;
}
.bf-st-dot {
  --st: #ff5a5a;
}
.bf-st-hot {
  --st: #4ade80;
}
.bf-st-buff {
  --st: #e6b22e;
}
.bf-st-debuff {
  --st: #c084fc;
}
.bf-st-control {
  --st: #6ba8ff;
}
.bf-st-status {
  --st: #2ce6c5;
}
.bf-st-pill {
  width: auto;
  height: auto;
  padding: .2rem .55rem;
  gap: .35rem;
  border-radius: 999px;
  font-size: 11px;
}
.bf-st-pill .bf-st-name {
  color: var(--st);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--st) 75%, #fff);
  }
  font-weight: 600;
}
.bf-st-pill .bf-st-count {
  position: static;
  margin-left: 1px;
}
.bf-st-tip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  gap: 2px;
  width: 195px;
  padding: .5rem .65rem;
  border-radius: 8px;
  background: #100e15;
  border: 1px solid var(--st);
  box-shadow: 0 10px 26px rgba(0,0,0,.85);
  z-index: 120;
  pointer-events: none;
  text-align: left;
  white-space: normal;
  text-transform: none;
  letter-spacing: normal;
}
.bf-st-chip:hover .bf-st-tip {
  display: flex;
}
.bf-st-portaled:hover .bf-st-tip {
  display: none;
}
.bf-st-tip-portal {
  position: fixed;
  z-index: 9999;
  transform: none;
  border-width: 1.5px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.75), 0 0 15px -3px var(--st, #2ce6c5), 0 16px 36px rgba(0,0,0,.92);
}
.bf-st-tip-name {
  font-family: var(--font-gothic, 'Cinzel');
  font-size: 12px;
  color: #fff;
  line-height: 1.2;
}
.bf-st-tip-kind {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--st);
  font-weight: 700;
}
.bf-st-tip-line {
  font-size: 10px;
  line-height: 1.35;
  font-weight: 600;
}
.bf-st-tip-turns {
  margin-top: 2px;
  padding-top: 3px;
  font-size: 9px;
  color: #a19785;
  border-top: 1px solid rgba(141,130,113,.25);
}
.bf-zone-target-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem 1.15rem;
  border-radius: .5rem;
  border: 1px solid #2a7bdc;
  color: #cfe4ff;
  background: rgba(11,34,64,.82);
  font-family: var(--font-gothic, 'Cinzel');
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.6), 0 0 14px rgba(42,123,220,.4);
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.bf-zone-target-btn:hover {
  background: rgba(16,52,96,.92);
  color: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,.7), 0 0 22px rgba(42,123,220,.7);
  transform: translate(-50%, -50%) scale(1.06);
}
.bf-zone-target-btn.bf-zone-unreachable {
  border-color: #5a3030;
  color: #b08a8a;
  background: rgba(40,14,14,.72);
  cursor: not-allowed;
}
.bf-zone-target-btn.bf-zone-unreachable:hover {
  background: rgba(40,14,14,.72);
  color: #b08a8a;
  box-shadow: none;
  transform: translate(-50%, -50%);
}
.bf-zone-spawn-btn {
  border-color: #7b5bb0;
  color: #e7dbff;
  background: rgba(46,26,72,.86);
  box-shadow: 0 4px 16px rgba(0,0,0,.6), 0 0 16px rgba(147,113,180,.5);
}
.bf-zone-spawn-btn::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: .65rem;
  pointer-events: none;
  box-shadow: 0 0 22px 2px rgba(147,113,180,.75);
  opacity: 0;
  animation: fx-glow-pulse 1.9s ease-in-out infinite;
}
.bf-zone-spawn-btn:hover {
  background: rgba(66,38,102,.95);
  color: #fff;
  box-shadow: 0 4px 22px rgba(0,0,0,.7), 0 0 26px rgba(147,113,180,.85);
  transform: translate(-50%, -50%) scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .bf-zone-spawn-btn::after {
    animation: none;
    opacity: 0;
  }
}
.bf-alert-banner {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.bf-alert-text {
  --alert: var(--alert-accent, #e0d5c1);
  width: 100%;
  text-align: center;
  padding: .3em 1em;
  color: var(--alert);
  font-family: var(--font-gothic, 'Cinzel');
  font-weight: 800;
  font-size: clamp(26px, 5.5vw, 62px);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.15;
  text-shadow: 0 0 26px rgba(0,0,0,.95), 0 4px 14px #000;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.78) 16%, rgba(0,0,0,.78) 84%, transparent);
  border-top: 1px solid var(--alert);
  @supports (color: color-mix(in lab, red, red)) {
    border-top: 1px solid color-mix(in srgb, var(--alert) 40%, transparent);
  }
  border-bottom: 1px solid var(--alert);
  @supports (color: color-mix(in lab, red, red)) {
    border-bottom: 1px solid color-mix(in srgb, var(--alert) 40%, transparent);
  }
  animation: bf-alert-shout 1.8s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes bf-alert-shout {
  0% {
    opacity: 0;
    transform: scale(1.12);
  }
  12% {
    opacity: 1;
    transform: scale(1);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(.98);
  }
}
.bf-alert-text.vs-departure-text {
  font-size: clamp(18px, 3vw, 30px);
  text-transform: none;
  letter-spacing: .04em;
  animation-duration: 2.6s;
}
.vs-departure-heading {
  font-size: clamp(12px, 1.6vw, 16px);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: .3em;
}
.vs-departure-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .15em;
}
.bf-bars {
  width: 132px;
  margin-top: .35rem;
}
.bf-bar {
  height: 7px;
  background: #000;
  border: 1px solid #2a2a30;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.bf-bar + .bf-bar {
  margin-top: 2px;
}
.bf-bar-fill, .bf-bar-trail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 2px;
}
.bf-bar-fill {
  z-index: 1;
  transition: width .26s cubic-bezier(.4, 0, .2, 1);
}
.bf-bar-trail {
  z-index: 0;
  filter: brightness(2.2) saturate(.4);
  opacity: .95;
  transition: width .55s ease-out .22s;
}
.bf-bar-gain {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  z-index: 2;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  filter: brightness(2.4) saturate(.5);
}
.fill-hp {
  background: linear-gradient(to right, #440a0a, var(--blood));
}
.fill-mp {
  background: linear-gradient(to right, #0b2240, #2a7bdc);
}
.fill-pa {
  background: linear-gradient(to right, #3a3f46, #aab2bd);
}
.fill-ma {
  background: linear-gradient(to right, #2a1745, #a06bff);
}
.bf-readout {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .2s ease, max-height .2s ease;
}
.bf-figure:hover .bf-readout, .bf-figure.acting .bf-readout {
  opacity: 1;
  max-height: 90px;
}
.bf-orb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  display: inline-block;
}
.orb-full {
  background: radial-gradient(circle at 35% 30%, #ffe79a, var(--gold));
  box-shadow: 0 0 7px rgba(230,178,46,.8);
}
.orb-empty {
  background: #1a1a1e;
  border: 1px solid #3a3a40;
}
.bf-slot {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid #2a2a30;
  background: rgba(15,14,18,.85);
  font-family: var(--font-gothic, 'Cinzel');
  font-size: 9px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all .15s ease;
}
.bf-slot:hover {
  transform: translateY(-2px);
  z-index: 60;
}
.bf-slot.selected {
  box-shadow: 0 0 0 2px var(--slot-accent, #fff), 0 0 16px -2px var(--slot-accent, rgba(255,255,255,.5));
  border-color: var(--slot-accent, #2a2a30);
  transform: translateY(-2px);
}
.bf-slot .lbl {
  margin-top: 3px;
  font-size: 8px;
  letter-spacing: .2px;
  line-height: 1.05;
  max-width: 100%;
  text-align: center;
  white-space: normal;
  word-break: break-word;
}
.bf-slot-empty .bf-empty-hint {
  transition: opacity .15s ease;
}
.bf-slot-empty:hover {
  border-color: #a06bff;
  color: #c3a3ff;
}
.bf-slot-empty:hover .bf-empty-hint {
  opacity: .9;
}
.bf-weapon {
  font-size: 30px;
  line-height: 1;
}
.bf-bar-actions {
  position: relative;
}
.bf-bar-actions.disabled {
  pointer-events: none;
}
.bf-bar-actions.disabled::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(10, 10, 14, 0.62);
  border-radius: inherit;
  pointer-events: none;
}
.bf-bar-actions.disabled .bf-always-on {
  pointer-events: auto;
  position: relative;
  z-index: 50;
  opacity: 1;
  filter: none;
}
.bf-actionbar {
  position: relative;
  z-index: 45;
}
.bf-footer {
  position: relative;
  z-index: 45;
}
.bf-armor-row {
  display: flex;
  gap: 2px;
  margin-top: 2px;
}
.bf-armor-row .bf-bar {
  flex: 1 1 0;
}
.bf-hud {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}
.bf-hud-turn {
  font-family: var(--font-gothic, 'Cinzel');
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: .8rem;
  color: #8a8275;
}
.bf-hud-turn.is-mine {
  color: var(--gold);
  text-shadow: 0 0 10px rgba(230,178,46,.5);
}
.bf-hud-stats {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
}
.bf-hud-stat {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.bf-hud-stat .lbl {
  font-size: 9px;
  font-weight: 700;
  width: 20px;
  text-align: right;
  letter-spacing: .5px;
}
.bf-hud-stat .bf-bar {
  width: 96px;
  height: 10px;
}
.bf-hud-stat .num {
  font-size: 9px;
  color: #b3aa98;
  min-width: 46px;
  font-variant-numeric: tabular-nums;
}
.bf-hud-ap {
  display: flex;
  align-items: center;
  gap: .3rem;
}
.bf-action-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  gap: .5rem;
}
.bf-abilities {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.bf-utilities {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.bf-util-left {
  padding-right: .7rem;
  border-right: 1px solid #5c4a30;
}
.bf-util-right {
  padding-left: .7rem;
  border-left: 1px solid #5c4a30;
}
.bf-target-prompt {
  min-height: 1.15rem;
  line-height: 1.15rem;
  margin-top: .25rem;
}
.bf-chatpanel {
  display: flex;
  flex-direction: column;
  height: 168px;
  padding: .35rem .5rem .5rem;
}
.bf-chat-tabs {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid rgba(92,74,48,.5);
  margin-bottom: .35rem;
}
.bf-chat-tab {
  font-family: var(--font-gothic, 'Cinzel');
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: .15rem .6rem;
  border-radius: 5px;
  border: 1px solid transparent;
  color: #a19785;
}
.bf-chat-tab.active {
  background: #2a2418;
  color: var(--gold);
  border-color: #5c4a30;
}
.bf-chat-tab:hover {
  color: #e0d5c1;
}
.bf-chat-body {
  flex: 1 1 auto;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: .25rem;
}
.bf-chat-line {
  padding: 1px 0;
}
.bf-chat-input {
  display: flex;
  gap: .4rem;
  margin-top: .35rem;
}
.bf-chat-input input {
  flex: 1 1 auto;
  background: rgba(0,0,0,.5);
  border: 1px solid #5c4a30;
  border-radius: 5px;
  padding: .35rem .6rem;
  font-size: 13px;
  color: #e0d5c1;
}
.bf-chat-input input:focus {
  outline: none;
  border-color: var(--gold);
}
.bf-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: -4px;
  transform: translateY(5px);
  width: 176px;
  text-align: center;
  background: #100e15;
  border: 2px solid var(--tip-accent, #5c4a30);
  border-radius: 7px;
  padding: .45rem .55rem;
  z-index: 200;
  font-family: var(--font-ui, 'Inter', sans-serif);
  box-shadow: 0 0 0 1px rgba(0,0,0,.85), 0 14px 32px rgba(0,0,0,.95);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.bf-slot:hover .bf-tip {
  opacity: 1;
  transform: translateY(0);
}
.bf-tip::before, .bf-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 33px;
  transform: translateX(-50%);
  border: 7px solid transparent;
}
.bf-tip::before {
  border-top-color: var(--tip-accent, #5c4a30);
}
.bf-tip::after {
  border-top-color: #100e15;
  margin-top: -2px;
}
.bf-util-right .bf-tip {
  left: auto;
  right: -4px;
}
.bf-util-right .bf-tip::before, .bf-util-right .bf-tip::after {
  left: auto;
  right: 33px;
  transform: translateX(50%);
}
.bf-tip-name {
  display: block;
  color: #fff;
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
}
.bf-tip-dmg2 {
  display: block;
  font-weight: 700;
  font-size: 13px;
  margin-top: 2px;
}
.bf-tip-sub {
  display: block;
  color: #b3aa98;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .4px;
  margin-top: 3px;
}
.bf-tip-ap {
  color: var(--gold, #e6b22e);
  font-weight: 700;
}
.bf-tip-mp {
  color: #6ba8ff;
  font-weight: 700;
}
.bf-tip-cd {
  display: block;
  color: #ffd24a;
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 3px;
  white-space: nowrap;
}
.bf-tip-note {
  display: block;
  color: #cabfa9;
  font-size: 11px;
  line-height: 1.35;
  margin-top: 3px;
  font-family: var(--font-ui, 'Inter', sans-serif);
}
.bf-figure.targetable, .bf-figure.targetable * {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M491.844%2022.533l-83.42%2014.865L196.572%20249.25c3.262%204.815%205.37%2010.72%205.37%2016.932%200%205.863-1.71%2011.35-4.643%2015.996-5.065-1.606-10.448-2.477-16.027-2.477-15.724%200-29.904%206.89-39.69%2017.796l-9.112-9.113%2017.237-17.237c-4.515-5.772-8.907-11.645-13.19-17.6l-19.443%2019.44-13.215-13.215%2021.828-21.827c-4.403-6.59-8.67-13.278-12.792-20.068l-40.802%2040.803%2058.314%2058.314c-1.613%205.075-2.49%2010.47-2.49%2016.063%200%207.666%201.65%2014.96%204.592%2021.564l-72.14%2072.14-14.56-14.56L21.013%20437l14.558%2014.56-8.607%208.608%2027.246%2027.246%208.606-8.61%2014.56%2014.56%2024.798-24.8-14.557-14.556%2072.158-72.16c6.586%202.922%2013.858%204.562%2021.498%204.562%205.593%200%2010.988-.877%2016.063-2.49l58.363%2058.363L296.5%20401.48c-6.797-4.127-13.486-8.395-20.068-12.793l-21.83%2021.83L241.39%20397.3l19.442-19.44c-5.962-4.29-11.835-8.683-17.603-13.194l-17.238%2017.238-9.16-9.16c10.905-9.785%2017.795-23.965%2017.795-39.69%200-5.346-.806-10.51-2.285-15.39%204.703-3.04%2010.288-4.817%2016.265-4.816%206.21%200%2011.776%201.77%2016.52%204.955L476.98%20105.95l14.864-83.417zm-66.227%2053.012l13.215%2013.215-191.684%20191.68-13.214-13.213L425.617%2075.545zM181.273%20298.39c19.257%200%2034.665%2015.41%2034.665%2034.665%200%2019.256-15.408%2034.666-34.665%2034.666-19.256%200-34.666-15.41-34.666-34.665s15.41-34.666%2034.666-34.666z%22%20fill%3D%22%23eef1f6%22%20stroke%3D%22%2315110a%22%20stroke-width%3D%2226%22%20stroke-linejoin%3D%22round%22%20paint-order%3D%22stroke%22%2F%3E%3C%2Fsvg%3E") 16 16, crosshair;
}
.bf-figure.targetable.cur-magic, .bf-figure.targetable.cur-magic * {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M377.154%2021.04l4.06%2050.167%2054.32%202.856%202.677%2054.306%2050.173%203.898-7.994-102.88-103.236-8.35zM359.31%2032.267L245.954%20145.623l44.086%203.566%2072.837-72.842-3.566-44.08zm16.696%2057.38l-72.98%2072.983%202.19%2041.692%2041.526%202.05%2073.004-73.01L417.7%2091.84l-41.694-2.192zm56.836%2057.05l-72.457%2072.46%203.433%2044.213%20113.24-113.237-44.216-3.436zm-196.213%2016.92l7.483%2092.525-43.234-43.235c-.846%207.773-2.35%2014.887-4.5%2021.356l78.48%2078.482c6.443-2.176%2013.52-3.72%2021.244-4.613l-42.5-42.5%2092.203%207.164-3.723-47.943-54.648-2.696-2.868-54.662-47.94-3.877zm-48.855%2088.472c-4.9%207.32-11.07%2013.37-18.474%2018.187l69.585%2069.584c4.836-7.382%2010.892-13.547%2018.2-18.458l-69.31-69.312zm-36.392%2026.7c-6.41%202.14-13.407%203.69-20.983%204.66l29.25%2029.25.34-.34%2013.215%2013.216-.34.34%2052.697%2052.697c1.007-7.542%202.585-14.51%204.75-20.894l-78.93-78.93zM135.53%20315.01L17.09%20433.094v22.17l129.348-129.348-10.905-10.904zm24.12%2024.12L17.088%20481.69V495h53.73l122.35-122.35-33.518-33.517z%22%20fill%3D%22%23c3a3ff%22%20stroke%3D%22%2315110a%22%20stroke-width%3D%2226%22%20stroke-linejoin%3D%22round%22%20paint-order%3D%22stroke%22%2F%3E%3C%2Fsvg%3E") 16 16, crosshair;
}
.bf-figure.targetable.cur-fist, .bf-figure.targetable.cur-fist * {
  cursor: pointer;
}
.bf-figure.targetable.cur-arrow, .bf-figure.targetable.cur-arrow * {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M34.22%2019.844l-12.407.125.062%2030%20177.97%20177.5c4.98-8.957%2012.884-16.088%2022.405-20.064L34.22%2019.844zm205.436%20202.75c-14.946%200-26.844%2011.93-26.844%2026.875s11.898%2026.874%2026.844%2026.874c14.946%200%2026.875-11.93%2026.875-26.875%200-14.947-11.928-26.876-26.874-26.876zm150.875%2015.75c-15.905%2011.413-31.637%2018.404-47.467%2021.5%2029.263%2039.57%2049.927%2071.443%2062.28%2096%206.804%2013.523%2011.162%2024.788%2012.907%2034.562%201.745%209.774.876%2019.417-5.813%2025.906-6.688%206.49-16.216%207.208-26.125%205.532-9.908-1.676-21.394-5.88-35.187-12.438-25.368-12.058-58.377-32.294-99.22-60.906-2.646%2016.347-8.904%2032.21-19.06%2047.53%2064.07%2043.58%20163.496%2083.783%20246.468%2088.783%203.614-85.247-42.328-181.024-88.782-246.47zm-105.655%2016.562c-2.375%2019.668-17.412%2035.58-36.656%2039.28%203.07%2011%204.776%2021.816%205.093%2032.44%2044.728%2031.797%2080.314%2053.785%20105.812%2065.905%2012.888%206.127%2023.263%209.684%2030.313%2010.876%207.05%201.193%209.577-.12%209.968-.5.392-.38%201.644-2.46.438-9.22-1.207-6.756-4.852-16.84-11.188-29.436-12.4-24.647-34.88-59.106-67.5-102.563-11.922-.288-23.968-2.61-36.28-6.78z%22%20fill%3D%22%23e6b22e%22%20stroke%3D%22%2315110a%22%20stroke-width%3D%2226%22%20stroke-linejoin%3D%22round%22%20paint-order%3D%22stroke%22%2F%3E%3C%2Fsvg%3E") 16 16, crosshair;
}
.bf-figure.targetable.cur-arrow-broken, .bf-figure.targetable.cur-arrow-broken * {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2232%22%20height=%2232%22%20viewBox=%220%200%20512%20512%22%3E%3Cg%20transform=%22rotate(-45%20256%20256)%22%20fill=%22%23ef5138%22%20stroke=%22%2315110a%22%20stroke-width=%2222%22%20stroke-linejoin=%22round%22%20paint-order=%22stroke%22%3E%3Cpath%20d=%22M70%20210%20h58%20l-30%2046%2030%2046%20h-58%20l-30%20-46%20z%22/%3E%3Crect%20x=%22120%22%20y=%22240%22%20width=%22128%22%20height=%2234%22/%3E%3Crect%20x=%22272%22%20y=%22200%22%20width=%2286%22%20height=%2234%22/%3E%3Cpath%20d=%22M356%20176%20l92%2060%20-92%2060%20z%22/%3E%3C/g%3E%3C/svg%3E") 16 16, crosshair;
}
.bf-hit-tip {
  position: absolute;
  bottom: calc(100% + 48px);
  left: 50%;
  transform: translateX(-50%) scale(.96);
  z-index: 12;
  min-width: 130px;
  max-width: 210px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease, transform .12s ease;
  padding: 6px 9px;
  border-radius: 8px;
  text-align: center;
  background: rgba(14, 12, 10, .96);
  border: 1px solid #5c4a30;
  box-shadow: 0 6px 18px rgba(0,0,0,.75);
}
.bf-figure:hover .bf-hit-tip {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.bf-hit-tip__head {
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #a9997a;
  margin-bottom: 2px;
}
.bf-hit-tip__head i {
  color: var(--gold, #e6b22e);
  margin-right: 3px;
}
.bf-hit-tip__range {
  font-size: 17px;
  font-weight: 800;
  color: #ffe7b0;
  line-height: 1.1;
}
.bf-hit-tip__immune {
  color: #8fa4c8;
  font-size: 14px;
}
.bf-hit-tip__crit {
  font-size: 10px;
  color: #ffcf6a;
  margin-top: 1px;
}
.bf-hit-tip__crit i {
  color: #ffcf6a;
}
.bf-hit-tip__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  margin-top: 5px;
}
.bf-hit-tip__tag {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  white-space: nowrap;
  background: rgba(92, 74, 48, .35);
  border: 1px solid #5c4a30;
  color: #cbb89a;
}
.bf-hit-tip__tag.bad {
  background: rgba(120, 22, 14, .5);
  border-color: #a33;
  color: #ffc9bd;
}
.bf-hit-tip__tag.good {
  background: rgba(22, 90, 40, .5);
  border-color: #3a7;
  color: #bff2cf;
}
.bf-figure.targetable .bf-hit-tip {
  cursor: inherit;
}
.bf-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 380px;
  max-width: 90vw;
  z-index: 50;
  transform: translateX(100%);
  transition: transform .3s ease;
  border-left: 1px solid #5c4a30;
}
.bf-drawer.open {
  transform: translateX(0);
}
.bf-inspect-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 5;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,9,12,.9);
  border: 1px solid #5c4a30;
  color: var(--gold);
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.7);
}
.bf-figure:hover .bf-inspect-btn {
  opacity: 1;
  transform: scale(1);
}
.bf-inspect-btn:hover {
  color: #fff;
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(230,178,46,.7);
  transform: scale(1.12);
}
.bf-figure.targetable .bf-inspect-btn, .bf-figure.targetable .bf-inspect-btn * {
  cursor: pointer;
}
.bf-portrait {
  position: relative;
  cursor: pointer;
}
.bf-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(4,4,8,.78);
  animation: bf-fade .22s ease both;
}
.bf-modal {
  width: min(880px, 96vw);
  max-height: 90vh;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #5c4a30;
  background: linear-gradient(160deg, rgba(18,15,20,.97), rgba(8,7,10,.98));
  box-shadow: 0 0 0 1px rgba(230,178,46,.12), 0 24px 70px rgba(0,0,0,.85);
  display: flex;
  flex-direction: column;
  animation: bf-pop .26s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes bf-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes bf-pop {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.bf-fade-out {
  animation: bf-fade-out .2s ease forwards;
  pointer-events: none;
}
.bf-fade-out .bf-modal {
  animation: bf-pop-out .2s cubic-bezier(.4,0,.6,1) forwards;
}
@keyframes bf-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes bf-pop-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(10px) scale(.96);
  }
}
.bf-modal-body {
  display: flex;
  gap: 0;
  min-height: 0;
  overflow: hidden;
}
.bf-modal-art {
  position: relative;
  width: 320px;
  flex: 0 0 320px;
  overflow: hidden;
  border-right: 1px solid #5c4a30;
}
.bf-modal-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 460px;
}
.bf-modal-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 60%, rgba(8,7,10,.95) 100%), linear-gradient(to top, rgba(8,7,10,.9), transparent 45%);
}
.bf-modal-info {
  flex: 1 1 auto;
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
}
.bf-modal-foot {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .7rem 1.25rem;
  border-top: 1px solid #5c4a30;
  background: rgba(8,7,10,.55);
}
.bf-unbind-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  color: #ff9a8f;
  border: 1px solid rgba(224,86,42,.55);
  border-radius: 7px;
  padding: 5px 12px;
  background: rgba(224,86,42,.1);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  cursor: pointer;
}
.bf-unbind-btn:hover {
  color: #fff;
  background: rgba(224,86,42,.28);
  border-color: rgba(224,86,42,.9);
}
.bf-unbind-note {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #a19785;
  font-style: italic;
}
.bf-modal.bf-modal-info-card {
  width: min(620px, 95vw);
}
.bf-spell-art {
  width: 180px;
  flex: 0 0 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: 1.25rem;
  background: radial-gradient(120% 80% at 50% 30%, var(--art-accent, #5c4a30), transparent 70%), linear-gradient(160deg, rgba(18,15,20,.6), rgba(8,7,10,.85));
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(120% 80% at 50% 30%, color-mix(in srgb, var(--art-accent, #5c4a30) 24%, transparent), transparent 70%), linear-gradient(160deg, rgba(18,15,20,.6), rgba(8,7,10,.85));
  }
}
.bf-spell-art::after {
  display: none;
}
.bf-spell-icon {
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 0 14px var(--art-accent, rgba(255,255,255,.4)));
}
.bf-el-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 700;
  border: 1px solid;
  border-radius: 999px;
  padding: 2px 9px;
  background: rgba(0,0,0,.45);
}
.bf-el-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid;
  border-radius: 6px;
  padding: 3px 8px;
  background: rgba(0,0,0,.3);
}
.bf-ctx-menu {
  position: fixed;
  z-index: 300;
  min-width: 152px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, rgba(18,15,20,.98), rgba(8,7,10,.99));
  border: 1px solid #5c4a30;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(230,178,46,.1), 0 12px 30px rgba(0,0,0,.85);
  font-family: var(--font-ui, 'Inter', sans-serif);
  animation: bf-pop .14s ease both;
}
.bf-ctx-item {
  text-align: left;
  font-size: 13px;
  color: #e0d5c1;
  padding: 6px 12px;
  border-radius: 5px;
  background: transparent;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.bf-ctx-item:hover {
  background: #2a2418;
  color: var(--gold);
}
.bf-modal-art-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #05050a;
}
.bf-nebula {
  position: absolute;
  inset: -14%;
  z-index: 0;
  pointer-events: none;
  background: url('/images/nebula.jpg') center / cover no-repeat;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  animation: bf-nebula 34s ease-in-out infinite alternate;
}
@keyframes bf-nebula {
  0% {
    transform: scale(1.05) translate(0%, 0%) rotate(0deg);
  }
  17% {
    transform: scale(1.08) translate(-1.1%, -0.7%) rotate(0.35deg);
  }
  34% {
    transform: scale(1.07) translate(0.7%, -1.3%) rotate(-0.3deg);
  }
  50% {
    transform: scale(1.11) translate(1.3%, 0.5%) rotate(0.45deg);
  }
  67% {
    transform: scale(1.08) translate(-0.5%, 1.2%) rotate(-0.4deg);
  }
  84% {
    transform: scale(1.09) translate(0.9%, -0.4%) rotate(0.25deg);
  }
  100% {
    transform: scale(1.06) translate(0.3%, 0.6%) rotate(-0.15deg);
  }
}
.bf-modal-art-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle at 50% 44%, rgba(44,230,197,.16), transparent 52%), radial-gradient(ellipse at center, transparent 38%, rgba(5,4,9,.78) 100%);
}
.bf-modal-art-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: block;
  background: radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent 60%), radial-gradient(1px 1px at 24% 42%, rgba(255,255,255,.9), transparent 60%), radial-gradient(1.4px 1.4px at 36% 12%, #cfe6ff, transparent 60%), radial-gradient(1px 1px at 47% 33%, #fff, transparent 60%), radial-gradient(1.6px 1.6px at 58% 22%, #fff, transparent 60%), radial-gradient(1px 1px at 66% 48%, rgba(255,240,220,.95), transparent 60%), radial-gradient(1.3px 1.3px at 78% 16%, #fff, transparent 60%), radial-gradient(1px 1px at 88% 36%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 16% 64%, #fff, transparent 60%), radial-gradient(1px 1px at 30% 82%, rgba(210,200,255,.95), transparent 60%), radial-gradient(1.4px 1.4px at 44% 70%, #fff, transparent 60%), radial-gradient(1px 1px at 60% 88%, #fff, transparent 60%), radial-gradient(1.6px 1.6px at 74% 74%, #fff, transparent 60%), radial-gradient(1px 1px at 90% 84%, rgba(255,255,255,.9), transparent 60%);
  animation: bf-twinkle 4s ease-in-out infinite alternate;
}
@keyframes bf-twinkle {
  from {
    opacity: .45;
  }
  to {
    opacity: 1;
  }
}
.bf-modal-hero-chip {
  position: relative;
  z-index: 3;
  width: 220px;
  height: 220px;
  filter: drop-shadow(0 0 16px rgba(44,230,197,.7));
}
.bf-modal-hero-chip svg {
  width: 100%;
  height: 100%;
}
.bf-modal-wide {
  width: min(1060px, 96vw);
}
.bf-inv-body {
  display: flex;
  gap: 0;
  min-height: 0;
  overflow: hidden;
}
.bf-inv-col {
  flex: 1 1 0;
  padding: 1.1rem 1.25rem;
  overflow-y: auto;
  max-height: 68vh;
}
.bf-inv-col-right {
  border-left: 1px solid #5c4a30;
  background: rgba(0,0,0,.18);
}
.bf-inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: .5rem;
}
.bf-inv-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .5rem .25rem .4rem;
  border: 1px solid #2f2a22;
  border-radius: 8px;
  background: rgba(0,0,0,.4);
  text-align: center;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.bf-inv-cell:hover {
  border-color: var(--gold);
  background: rgba(40,36,24,.7);
}
.bf-inv-row {
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.bf-inv-row:hover {
  border-color: var(--gold);
  background: rgba(40,36,24,.55);
}
.bf-modal-narrow {
  width: min(440px, 94vw);
}
.bf-equip-btn {
  font-family: var(--font-gothic, 'Cinzel');
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: .55rem 1rem;
  border-radius: 7px;
  border: 1px solid #5c4a30;
  background: rgba(0,0,0,.35);
  transition: background .12s, filter .12s;
}
.bf-equip-btn:hover:not(:disabled) {
  background: rgba(40,36,24,.85);
  filter: brightness(1.15);
}
.bf-equip-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  filter: grayscale(.5);
}
.bf-inv-icon {
  font-size: 1.6rem;
  line-height: 1;
}
.bf-inv-qty {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 9px;
  font-weight: 700;
  color: #f0cd6e;
  background: rgba(0,0,0,.8);
  padding: 0 3px;
  border-radius: 4px;
  line-height: 1.3;
}
.bf-inv-name {
  font-size: 9px;
  color: #b3aa98;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bf-inv-cell.is-gear {
  border-color: var(--q, #5c4a30);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--q, #5c4a30) 55%, #2f2a22);
  }
  background: linear-gradient(160deg, var(--q, #5c4a30), rgba(0,0,0,.55));
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(160deg, color-mix(in srgb, var(--q, #5c4a30) 12%, rgba(20,18,12,.85)), rgba(0,0,0,.55));
  }
}
.bf-inv-cell.is-gear:hover {
  border-color: var(--q, var(--gold));
  box-shadow: 0 0 10px var(--q, #5c4a30);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 10px color-mix(in srgb, var(--q, #5c4a30) 40%, transparent);
  }
}
.bf-inv-equip-hint {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 8px;
  color: var(--q, #a19785);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--q, #a19785) 80%, #fff);
  }
  opacity: .8;
}
.bf-inv-section {
  display: flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #a19785;
  margin-bottom: .5rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid rgba(92,74,48,.35);
}
.bf-inv-cd-note {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #ffd24a;
}
.bf-inv-cell--broke {
  opacity: .45;
  filter: grayscale(.55);
}
.bf-inv-cell--rec {
  border-color: #5cd07a !important;
  box-shadow: 0 0 8px rgba(92,208,122,.30);
}
.bf-inv-cell--rec::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(92,208,122,.35), 0 0 14px rgba(92,208,122,.55);
  opacity: 0;
  animation: fx-glow-pulse 1.4s ease-in-out infinite;
}
.bf-inv-rec {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 11px;
  line-height: 1;
  color: #9af0b0;
  text-shadow: 0 0 6px rgba(92,208,122,.85);
  z-index: 2;
}
.bf-doll {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
}
.bf-doll-rail {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 0 0 auto;
}
.bf-doll-centre {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .35rem .4rem 0;
  min-width: 180px;
}
.bf-doll-avatar {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  filter: drop-shadow(0 0 16px rgba(243,168,59,.3));
}
.bf-doll-avatar svg, .bf-doll-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bf-doll-vitals {
  flex-direction: column;
  align-items: stretch;
  gap: .28rem;
  width: 100%;
  margin-top: .35rem;
}
.bf-doll-vitals .bf-hud-stat {
  justify-content: flex-start;
}
.bf-doll-vitals .bf-hud-stat .bf-bar {
  flex: 1 1 auto;
  width: auto;
}
.bf-doll-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px solid rgba(92,74,48,.4);
}
.bf-doll-gap {
  width: 14px;
  flex: 0 0 auto;
}
.bf-doll-rail .bf-eq-cell, .bf-doll-bottom .bf-eq-cell {
  width: 66px;
  min-height: 66px;
}
.bf-eq-cell {
  --q: #3a3327;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 76px;
  padding: .5rem .25rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--q);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--q) 55%, #2f2a22);
  }
  background: linear-gradient(160deg, var(--q), rgba(0,0,0,.55));
  @supports (color: color-mix(in lab, red, red)) {
    background: linear-gradient(160deg, color-mix(in srgb, var(--q) 14%, rgba(20,18,12,.85)), rgba(0,0,0,.55));
  }
  box-shadow: inset 0 0 14px rgba(0,0,0,.55);
  text-align: center;
}
.bf-eq-cell.has-item {
  cursor: pointer;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.bf-eq-cell.has-item:hover {
  border-color: var(--q);
  transform: translateY(-1px);
  box-shadow: inset 0 0 10px rgba(0,0,0,.4), 0 0 12px var(--q);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: inset 0 0 10px rgba(0,0,0,.4), 0 0 12px color-mix(in srgb, var(--q) 45%, transparent);
  }
}
.bf-eq-cell.is-locked {
  border-color: #4a1f1f;
  background: linear-gradient(160deg, rgba(60,15,15,.35), rgba(0,0,0,.55));
}
.bf-eq-icon {
  font-size: 1.55rem;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.8));
}
.bf-eq-ghost {
  font-size: 1.3rem;
  opacity: .18;
  filter: grayscale(1);
}
.bf-eq-label {
  position: absolute;
  bottom: 3px;
  left: 2px;
  right: 2px;
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8d8271;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bf-eq-badge {
  position: absolute;
  font-size: 9px;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(0,0,0,.78);
  line-height: 1.4;
}
.bf-eq-dmg {
  top: 3px;
  right: 3px;
  color: #fcd34d;
}
.bf-eq-pa {
  top: 3px;
  left: 3px;
  color: #c9c9d4;
}
.bf-eq-ma {
  top: 3px;
  right: 3px;
  color: #b79cff;
}
.bf-cd-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: rgba(0,0,0,.5);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  color: #ffd24a;
  font-family: var(--font-gothic, 'Cinzel');
  text-shadow: 0 0 6px rgba(0,0,0,.95), 0 1px 2px #000;
  z-index: 2;
}
.bf-slot.on-cooldown {
  border-color: #4a4237 !important;
  cursor: not-allowed;
}
.bf-slot.on-cooldown > *:not(.bf-cd-overlay):not(.bf-tip) {
  filter: grayscale(.8) brightness(.7);
}
@media (max-width: 768px) {
  .bf-inv-body {
    flex-direction: column;
  }
  .bf-inv-col-right {
    border-left: none;
    border-top: 1px solid #5c4a30;
  }
}
.bf-area-hpbar {
  position: relative;
  height: 7px;
  width: 100%;
  background: #050507;
}
.bf-area-hpbar .fill {
  height: 100%;
  background: linear-gradient(to right, #143312, #2ea327);
  box-shadow: 0 0 10px rgba(46,163,39,.55);
  transition: width .3s ease;
}
.bf-area-banner {
  position: relative;
  width: 100%;
  height: 360px;
  flex: 0 0 auto;
  overflow: hidden;
  background: #08070a;
}
.bf-area-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.bf-area-desc {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 2.6rem 1.5rem 1.1rem;
  background: linear-gradient(to top, rgba(4,4,6,.92) 12%, rgba(4,4,6,.4) 55%, transparent);
  font-style: italic;
  color: #e7ddc9;
  font-size: 13px;
  line-height: 1.45;
  text-shadow: 0 1px 4px rgba(0,0,0,.9);
}
@media (max-width: 640px) {
  .bf-area-banner {
    height: 220px;
  }
}
.bf-stat-tile {
  background: rgba(0,0,0,.4);
  border: 1px solid #2f2a22;
  border-radius: 7px;
  padding: .5rem .6rem;
}
.bf-stat-tile .v {
  font-family: var(--font-gothic, 'Cinzel');
  font-size: 1.05rem;
}
.bf-stat-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: rgba(0,0,0,.4);
  border: 1px solid #2f2a22;
  border-radius: 6px;
  padding: .3rem .25rem;
}
.bf-stat-mini .row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  line-height: 1;
}
.bf-stat-mini .row i {
  font-size: .8rem;
}
.bf-stat-mini .val {
  font-family: var(--font-gothic, 'Cinzel');
  font-size: .95rem;
}
.bf-stat-mini .lbl {
  font-size: 8px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #a19785;
}
.bf-abil-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  background: rgba(160,107,255,.12);
  border: 1px solid rgba(160,107,255,.4);
  color: #c3a3ff;
}
.bf-vital {
  height: 10px;
  border-radius: 5px;
  background: #000;
  border: 1px solid #2a2a30;
  overflow: hidden;
}
.bf-vital-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .3s ease;
}
@media (max-width: 640px) {
  .bf-modal-body {
    flex-direction: column;
  }
  .bf-modal-art {
    width: 100%;
    flex: 0 0 200px;
    border-right: none;
    border-bottom: 1px solid #5c4a30;
  }
  .bf-modal-art img {
    min-height: 200px;
    height: 200px;
  }
  .bf-modal-art-hero {
    min-height: 160px;
  }
  .bf-modal-hero-chip {
    width: 140px;
    height: 140px;
  }
  .bf-modal {
    max-height: 94vh;
  }
}
@media (max-width: 768px) {
  .bf-zones {
    gap: .4rem;
  }
  .bf-zone {
    min-height: 320px;
  }
  .bf-zone-content {
    padding: .45rem;
  }
  .bf-gothic {
    letter-spacing: 1px;
  }
  .bf-zone .bf-gothic.text-lg {
    font-size: .95rem;
  }
  .bf-stage {
    min-height: 130px;
    gap: .4rem;
  }
  .bf-side {
    gap: .4rem;
  }
  .bf-figure, .bf-bars {
    width: 84px;
  }
  .bf-hero {
    width: 74px;
    height: 96px;
  }
  .bf-hero-chip {
    width: 68px;
    height: 68px;
  }
  .bf-hero-aura {
    width: 72px;
    height: 72px;
  }
  .bf-enemy-img {
    width: 80px;
    height: 120px;
  }
  .bf-ground {
    width: 60px;
  }
  .bf-orb {
    width: 10px;
    height: 10px;
  }
  .bf-slot {
    width: 50px;
    height: 50px;
  }
}
.bf-turn-timer {
  display: none;
  align-items: center;
  white-space: nowrap;
  color: #e6b22e;
  text-shadow: 0 0 7px rgba(230, 178, 46, 0.55);
}
.bf-turn-timer .bf-turn-timer-val {
  font-variant-numeric: tabular-nums;
}
.bf-turn-timer-warn {
  color: #ff3b3b;
  text-shadow: 0 0 10px rgba(255, 59, 59, 0.9), 0 0 20px rgba(255, 59, 59, 0.55);
  animation: bf-turn-timer-pulse 1s ease-in-out infinite;
}
@keyframes bf-turn-timer-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bf-zone {
    transition: none;
  }
  .bf-zone-rubble {
    transition: none;
  }
}
.vs-intro {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 42%, rgba(38,28,18,.6), rgba(3,3,4,.94) 72%), rgba(3,3,4,.9);
  animation: vsWash .55s ease-out both;
}
@keyframes vsWash {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.vs-intro::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background: conic-gradient(from 0deg at 50% 45%, transparent 0deg, rgba(212,175,55,.05) 40deg, transparent 90deg, rgba(45,212,191,.045) 200deg, transparent 250deg);
  animation: vsSweep 14s linear infinite;
}
@keyframes vsSweep {
  to {
    transform: rotate(1turn);
  }
}
.vs-ambient {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.vs-ember {
  position: absolute;
  bottom: -10px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sg-amber, #d99a37), transparent 70%);
  opacity: 0;
  animation: vsEmber 6s ease-in infinite;
}
.vs-ember:nth-child(1) {
  left: 12%;
  animation-delay: .2s;
}
.vs-ember:nth-child(2) {
  left: 33%;
  animation-delay: 2.1s;
}
.vs-ember:nth-child(3) {
  left: 54%;
  animation-delay: 1.1s;
}
.vs-ember:nth-child(4) {
  left: 71%;
  animation-delay: 3.4s;
}
.vs-ember:nth-child(5) {
  left: 88%;
  animation-delay: 1.7s;
}
@keyframes vsEmber {
  0% {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
  15% {
    opacity: .8;
  }
  100% {
    opacity: 0;
    transform: translateY(-70vh) scale(.3);
  }
}
.vs-banner {
  position: relative;
  z-index: 2;
  text-align: center;
  animation: vsDrop .6s cubic-bezier(.2,.8,.2,1) .25s both;
}
@keyframes vsDrop {
  from {
    opacity: 0;
    transform: translateY(-22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.vs-banner-kicker {
  font-family: var(--font-gothic, 'Cinzel', serif);
  font-size: .62rem;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: #8c7a5a;
  margin-bottom: .35rem;
}
.vs-banner-title {
  font-family: var(--font-gothic, 'Cinzel', serif);
  font-size: clamp(1.3rem, 3.2vw, 2.1rem);
  letter-spacing: .12em;
  color: #e8d6ac;
  text-transform: uppercase;
  text-shadow: 0 0 24px rgba(212,175,55,.35), 0 2px 6px rgba(0,0,0,.9);
}
.vs-arena {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  width: 100%;
  max-width: 1400px;
}
.vs-side {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-end;
}
.vs-side-players {
  justify-content: flex-end;
}
.vs-side-enemies {
  justify-content: flex-start;
}
.vs-fighter {
  position: relative;
  width: 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  animation-duration: .55s;
  animation-timing-function: cubic-bezier(.2,.9,.25,1);
  animation-fill-mode: both;
  animation-delay: calc(.7s + var(--vs-i, 0) * .12s);
}
.vs-fighter-player {
  animation-name: vsInL;
}
.vs-fighter-enemy {
  animation-name: vsInR;
}
@keyframes vsInL {
  from {
    opacity: 0;
    transform: translateX(-60px) scale(.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes vsInR {
  from {
    opacity: 0;
    transform: translateX(60px) scale(.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.vs-portrait {
  position: relative;
  width: 156px;
  height: 188px;
  border-radius: .7rem;
  overflow: hidden;
  border: 2px solid #5c4a30;
  background: rgba(10,9,12,.8);
  box-shadow: 0 8px 30px rgba(0,0,0,.75);
}
.vs-fighter-player .vs-portrait {
  border-color: var(--sg-teal-glow);
}
.vs-fighter.vs-elite .vs-portrait {
  border-color: var(--sg-sulfur);
}
.vs-fighter.vs-boss .vs-portrait {
  border-color: var(--sg-bright-blood);
}
.vs-fighter .vs-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  animation: fx-glow-pulse 2.6s ease-in-out infinite;
}
.vs-fighter-player .vs-portrait::after {
  box-shadow: inset 0 0 18px rgba(45,212,191,.4);
}
.vs-fighter-enemy .vs-portrait::after {
  box-shadow: inset 0 0 18px rgba(157,34,53,.5);
}
.vs-portrait svg {
  width: 100%;
  height: 100%;
}
.vs-enemy-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.vs-portrait-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7a6b52;
  font-size: 3.6rem;
}
.vs-ready-badge {
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sg-teal-glow);
  color: #04120f;
  font-size: 11px;
  box-shadow: 0 0 10px rgba(45,212,191,.7);
  animation: vsPop .3s cubic-bezier(.3,1.6,.5,1) both;
}
@keyframes vsPop {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
.vs-name {
  font-family: var(--font-gothic, 'Cinzel', serif);
  font-size: 13px;
  text-align: center;
  color: #d8c7a0;
  max-width: 164px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vs-hp {
  width: 140px;
  height: 6px;
  border-radius: 3px;
  background: rgba(0,0,0,.6);
  overflow: hidden;
}
.vs-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sg-bright-blood), #d14);
}
.vs-clash {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
}
.vs-swords {
  position: relative;
  width: 96px;
  height: 108px;
}
.vs-blade {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 50% 62%;
}
.vs-blade-steel {
  fill: #efe4c2;
  stroke: #b89a5e;
  stroke-width: .5;
}
.vs-blade-guard, .vs-blade-pommel {
  fill: var(--sg-sulfur);
}
.vs-blade-grip {
  fill: #4a3820;
}
.vs-blade-l {
  transform: translate(-62%, -50%) rotate(-46deg);
  filter: drop-shadow(0 0 8px rgba(212,175,55,.5));
  animation: vsBladeL .7s cubic-bezier(.4,1.3,.5,1) 1.05s both;
}
.vs-blade-r {
  transform: translate(-38%, -50%) rotate(46deg);
  filter: drop-shadow(0 0 8px rgba(212,175,55,.5));
  animation: vsBladeR .7s cubic-bezier(.4,1.3,.5,1) 1.05s both;
}
@keyframes vsBladeL {
  from {
    opacity: 0;
    transform: translate(-200%, -50%) rotate(-120deg);
  }
  60% {
    transform: translate(-56%, -50%) rotate(-40deg);
  }
  to {
    opacity: 1;
    transform: translate(-62%, -50%) rotate(-46deg);
  }
}
@keyframes vsBladeR {
  from {
    opacity: 0;
    transform: translate(100%, -50%) rotate(120deg);
  }
  60% {
    transform: translate(-44%, -50%) rotate(40deg);
  }
  to {
    opacity: 1;
    transform: translate(-38%, -50%) rotate(46deg);
  }
}
.vs-sword-icon {
  display: inline-block;
  vertical-align: -3px;
  margin-right: .5rem;
}
.vs-sword-icon .vs-blade-steel {
  fill: #f0e2bd;
  stroke: none;
}
.vs-spark {
  position: absolute;
  top: 58%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #fff6d8;
  box-shadow: 0 0 20px 8px rgba(255,220,120,.8);
  opacity: 0;
  animation: vsSpark .5s ease-out 1.65s both;
}
@keyframes vsSpark {
  0% {
    opacity: 0;
    transform: translate(-50%,-50%) scale(.2);
  }
  40% {
    opacity: 1;
    transform: translate(-50%,-50%) scale(1.6);
  }
  100% {
    opacity: 0;
    transform: translate(-50%,-50%) scale(2.6);
  }
}
.vs-vs {
  font-family: var(--font-gothic, 'Cinzel', serif);
  letter-spacing: 4px;
  font-weight: 700;
  color: #c9b483;
  font-size: .9rem;
  animation: vsVsPop .4s cubic-bezier(.3,1.5,.5,1) 1.5s both;
}
@keyframes vsVsPop {
  from {
    opacity: 0;
    transform: scale(.4);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.vs-controls {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  animation: vsRise .5s ease-out 1.4s both;
}
@keyframes vsRise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.vs-ready-tally {
  font-family: var(--font-gothic, 'Cinzel', serif);
  letter-spacing: 2px;
  color: #b9a67e;
  font-size: .8rem;
}
.vs-waiting {
  color: var(--sg-teal-glow);
  font-size: .85rem;
  letter-spacing: 1px;
}
.vs-spin {
  animation: vsSpin 1.6s linear infinite;
  display: inline-block;
}
@keyframes vsSpin {
  to {
    transform: rotate(1turn);
  }
}
.vs-btn {
  font-family: var(--font-gothic, 'Cinzel', serif);
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .8rem 2.2rem;
  border-radius: .4rem;
  cursor: pointer;
  color: #f0e2bd;
  border: 1px solid #6b5730;
  background: linear-gradient(180deg, rgba(46,38,24,.95), rgba(20,16,10,.95));
  box-shadow: 0 4px 16px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,220,150,.12);
  transition: transform .12s, box-shadow .18s, border-color .18s;
}
.vs-btn:hover {
  transform: translateY(-2px);
  border-color: var(--sg-sulfur);
  box-shadow: 0 8px 24px rgba(0,0,0,.6), 0 0 20px rgba(212,175,55,.28);
}
.vs-btn:active {
  transform: translateY(0);
}
.vs-btn-go {
  position: relative;
}
.vs-btn-go::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: .5rem;
  pointer-events: none;
  box-shadow: 0 0 20px 2px rgba(212,175,55,.35);
  opacity: 0;
  animation: fx-glow-pulse 2.4s ease-in-out infinite;
}
.vs-btn-exit {
  color: #d3a8a8;
  border-color: #6a3b3b;
  background: linear-gradient(180deg, rgba(40,22,22,.95), rgba(18,10,10,.95));
}
.vs-btn-exit:hover {
  border-color: var(--sg-bright-blood);
  box-shadow: 0 8px 24px rgba(0,0,0,.6), 0 0 20px rgba(157,34,53,.3);
}
.vs-btn-pending {
  animation: vsBtnPending 1s ease-in-out infinite;
  pointer-events: none;
}
@keyframes vsBtnPending {
  0%,100% {
    opacity: 1;
  }
  50% {
    opacity: .55;
  }
}
.vs-place, .vs-prep {
  position: absolute;
  left: 50%;
  top: 150px;
  transform: translateX(-50%);
  z-index: 41;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  padding: .7rem 1.2rem;
  max-width: min(92vw, 560px);
  text-align: center;
  pointer-events: none;
  border-radius: .7rem;
  background: linear-gradient(180deg, rgba(12,11,15,.86), rgba(8,7,10,.9));
  border: 1px solid #4a3f5c;
  box-shadow: 0 14px 38px rgba(0,0,0,.66);
  animation: vsPlaceIn .4s ease-out both;
}
@keyframes vsPlaceIn {
  from {
    opacity: 0;
    transform: translate(-50%, -14px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
.vs-prep {
  border-color: #7b5bb0;
  box-shadow: 0 14px 38px rgba(0,0,0,.66), 0 0 22px rgba(147,113,180,.28);
}
.vs-prep-head {
  text-align: center;
}
.vs-prep .vs-place-kicker {
  color: #d7c6ff;
}
.vs-prep .vs-btn, .vs-place .vs-btn {
  pointer-events: auto;
}
.vs-ambush-ribbon {
  display: inline-block;
  margin-top: .6rem;
  padding: .3rem 1rem;
  font-family: var(--font-gothic, 'Cinzel', serif);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #e7dbff;
  background: linear-gradient(180deg, rgba(76,42,110,.85), rgba(30,16,48,.9));
  border: 1px solid #7b5bb0;
  border-radius: 999px;
  position: relative;
  box-shadow: 0 0 14px rgba(147,113,180,.45);
}
.vs-ambush-ribbon::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  pointer-events: none;
  box-shadow: 0 0 20px 2px rgba(147,113,180,.8);
  opacity: 0;
  animation: fx-glow-pulse 2.2s ease-in-out infinite;
}
.vs-place-head {
  text-align: center;
}
.vs-place-kicker {
  display: inline-block;
  font-family: var(--font-gothic, 'Cinzel', serif);
  font-size: .6rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--sg-teal-glow);
}
.vs-place-title {
  display: block;
  font-family: var(--font-gothic, 'Cinzel', serif);
  font-size: 1.15rem;
  letter-spacing: .08em;
  color: #ecdcb2;
  text-shadow: 0 2px 10px rgba(0,0,0,.9);
}
.vs-place-hint {
  display: block;
  font-size: .72rem;
  color: #b6a888;
  margin-top: .1rem;
}
.vs-place-zones {
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 780px;
}
.vs-place-card {
  pointer-events: auto;
  flex: 1 1 150px;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: .75rem .85rem;
  border: 1px solid #5c4a30;
  border-radius: .55rem;
  background: linear-gradient(180deg, rgba(14,12,16,.82), rgba(8,7,10,.9));
  text-align: left;
  cursor: pointer;
  transition: transform .14s, box-shadow .18s, border-color .18s;
  animation: vsPlaceCard .4s ease-out both;
  animation-delay: calc(var(--vs-i, 0) * .07s);
}
@keyframes vsPlaceCard {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.vs-place-card:hover {
  transform: translateY(-4px);
  border-color: var(--sg-teal-glow);
  box-shadow: 0 12px 30px rgba(0,0,0,.7), 0 0 22px rgba(45,212,191,.3);
}
.vs-place-card-head {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.vs-place-label {
  font-family: var(--font-gothic, 'Cinzel', serif);
  font-size: 1.05rem;
  letter-spacing: 2px;
  color: var(--sg-sulfur);
}
.vs-place-name {
  font-size: .68rem;
  color: #a89877;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.vs-place-foes {
  min-height: 20px;
}
.vs-place-foecount {
  font-size: .72rem;
  color: #d99a9a;
}
.vs-place-clear {
  font-size: .72rem;
  color: #7fae90;
  font-style: italic;
}
.vs-place-affixes {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.vs-affix-chip {
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: .12rem .4rem;
  border-radius: .25rem;
  border: 1px solid rgba(147,113,180,.5);
  color: #cbb6e6;
  background: rgba(76,42,110,.25);
}
.vs-zones-bg {
  position: absolute;
  inset: 0 -7%;
  z-index: 0;
  display: flex;
  gap: 10px;
}
.vs-zone-strip {
  flex: 1;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  opacity: 0;
  filter: saturate(.95) brightness(.92);
  transform: skewX(-7deg);
  animation: vsStripUp .55s cubic-bezier(.2,.85,.25,1) both;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 12px 40px rgba(0,0,0,.6);
}
.vs-zone-strip:nth-child(2) {
  animation-name: vsStripDown;
  animation-delay: .08s;
}
.vs-zone-strip:nth-child(3) {
  animation-name: vsStripUp;
  animation-delay: .16s;
}
@keyframes vsStripUp {
  from {
    opacity: 0;
    transform: skewX(-7deg) translateY(105%);
  }
  to {
    opacity: .58;
    transform: skewX(-7deg) translateY(0);
  }
}
@keyframes vsStripDown {
  from {
    opacity: 0;
    transform: skewX(-7deg) translateY(-105%);
  }
  to {
    opacity: .58;
    transform: skewX(-7deg) translateY(0);
  }
}
.vs-zone-strip:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 6%;
  bottom: 6%;
  right: -6px;
  width: 3px;
  z-index: 2;
  background: linear-gradient(180deg, transparent, var(--sg-sulfur) 18%, #fff2c8 50%, var(--sg-sulfur) 82%, transparent);
  box-shadow: 0 0 10px rgba(230,178,46,.7), 0 0 3px rgba(255,240,190,.9);
  border-radius: 2px;
}
.vs-zone-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3,3,4,.28), rgba(3,3,4,.08) 45%, rgba(3,3,4,.72));
}
.vs-zone-strip-label {
  position: absolute;
  top: .7rem;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 3;
  transform: skewX(7deg);
  font-family: var(--font-gothic, 'Cinzel', serif);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #e2d6bb;
  text-shadow: 0 2px 8px rgba(0,0,0,.95);
}
.vs-zone-strip-label b {
  color: var(--sg-sulfur);
  font-size: .92rem;
  margin-right: .3rem;
}
.vs-init {
  position: absolute;
  top: 6px;
  left: 12px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 2px 8px;
  font-family: var(--font-gothic, 'Cinzel', serif);
  font-size: 14px;
  font-weight: 700;
  color: #08120f;
  background: linear-gradient(180deg, #ffe9a8, var(--sg-sulfur));
  border-radius: 999px;
  box-shadow: 0 2px 7px rgba(0,0,0,.75);
  cursor: help;
  outline: none;
  animation: vsPop .35s cubic-bezier(.3,1.6,.5,1) .5s both;
}
.vs-init::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 9px);
  left: -4px;
  z-index: 60;
  width: max-content;
  max-width: 200px;
  padding: .5rem .6rem;
  background: rgba(12,9,16,.98);
  color: #e9dcbf;
  border: 1px solid var(--sg-win-frame);
  border-radius: .45rem;
  box-shadow: 0 10px 28px rgba(0,0,0,.75);
  font-family: system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .01em;
  text-transform: none;
  text-align: left;
  white-space: normal;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
.vs-init::before {
  content: "";
  position: absolute;
  top: calc(100% + 3px);
  left: 10px;
  z-index: 61;
  border: 6px solid transparent;
  border-bottom-color: var(--sg-win-frame);
  opacity: 0;
  transition: opacity .12s ease;
}
.vs-init:hover::after, .vs-init:focus::after {
  opacity: 1;
  transform: translateY(0);
}
.vs-init:hover::before, .vs-init:focus::before {
  opacity: 1;
}
.vs-shadowed {
  border-color: #7b5bb0 !important;
}
.vs-shadowed > .pv-face, .vs-shadowed svg, .vs-shadowed .vs-portrait-fallback {
  filter: brightness(.45) saturate(.7) contrast(1.05);
}
.vs-shadow {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, rgba(60,40,90,.35), transparent 60%), linear-gradient(180deg, rgba(8,4,16,.35), rgba(4,2,10,.8));
  box-shadow: inset 0 0 22px 6px rgba(8,4,18,.9), inset 0 0 8px rgba(123,91,176,.5);
  animation: vsShadowDrift 3.4s ease-in-out infinite;
}
@keyframes vsShadowDrift {
  0%,100% {
    opacity: .85;
  }
  50% {
    opacity: 1;
  }
}
.vs-crown {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  color: var(--sg-sulfur);
  font-size: 20px;
  filter: drop-shadow(0 0 7px rgba(212,175,55,.85));
  animation: vsCrownDrop .5s cubic-bezier(.3,1.5,.5,1) .5s both;
}
@keyframes vsCrownDrop {
  from {
    opacity: 0;
    transform: translate(-50%, -8px) scale(.5);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}
.vs-crown-i {
  color: var(--sg-sulfur);
  filter: drop-shadow(0 0 6px rgba(212,175,55,.7));
}
.vs-leader .vs-portrait {
  border-color: var(--sg-sulfur);
  box-shadow: 0 6px 24px rgba(0,0,0,.7), 0 0 16px rgba(212,175,55,.5);
}
.vs-leaving {
  pointer-events: none;
}
.vs-leaving .vs-zone-strip:nth-child(1), .vs-leaving .vs-zone-strip:nth-child(3) {
  animation: vsStripOutDown .6s cubic-bezier(.55,0,.85,.25) forwards;
}
.vs-leaving .vs-zone-strip:nth-child(2) {
  animation: vsStripOutUp .6s cubic-bezier(.55,0,.85,.25) forwards;
}
@keyframes vsStripOutDown {
  from {
    opacity: .58;
    transform: skewX(-7deg) translateY(0);
  }
  to {
    opacity: 0;
    transform: skewX(-7deg) translateY(112%);
  }
}
@keyframes vsStripOutUp {
  from {
    opacity: .58;
    transform: skewX(-7deg) translateY(0);
  }
  to {
    opacity: 0;
    transform: skewX(-7deg) translateY(-112%);
  }
}
.vs-leaving .vs-side-players .vs-fighter {
  animation: vsFighterOutL .5s ease-in forwards;
}
.vs-leaving .vs-side-enemies .vs-fighter {
  animation: vsFighterOutR .5s ease-in forwards;
}
@keyframes vsFighterOutL {
  to {
    opacity: 0;
    transform: translateX(-70px) scale(.85);
  }
}
@keyframes vsFighterOutR {
  to {
    opacity: 0;
    transform: translateX(70px) scale(.85);
  }
}
.vs-leaving .vs-banner, .vs-leaving .vs-vs, .vs-leaving .vs-controls {
  animation: vsFadeOut .35s ease-in forwards;
}
@keyframes vsFadeOut {
  to {
    opacity: 0;
  }
}
.vs-leaving .vs-swords {
  animation: vsBladesClose .55s ease-in forwards;
}
@keyframes vsBladesClose {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
  35% {
    opacity: 1;
    transform: scale(1.25);
    filter: brightness(2.2);
  }
  100% {
    opacity: 0;
    transform: scale(.4);
    filter: brightness(1);
  }
}
.vs-leaving::before {
  animation: vsFadeOut .5s ease-in forwards;
}
.bf-root {
  animation: bfReveal .55s ease-out both;
}
@keyframes bfReveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vs-leaving .vs-zone-strip, .vs-leaving .vs-fighter, .vs-leaving .vs-banner, .vs-leaving .vs-vs, .vs-leaving .vs-controls, .vs-leaving .vs-swords, .bf-root {
    animation: none;
  }
  .vs-intro, .vs-intro::before, .vs-ambient, .vs-ember, .vs-banner, .vs-fighter, .vs-fighter-player .vs-portrait, .vs-fighter-enemy .vs-portrait, .vs-blade-l, .vs-blade-r, .vs-spark, .vs-vs, .vs-controls, .vs-btn-go, .vs-spin, .vs-place, .vs-place-card, .vs-zone-strip, .vs-init, .vs-shadow, .vs-crown {
    animation: none;
  }
  .vs-blade-l {
    transform: translate(-62%, -50%) rotate(-46deg);
  }
  .vs-blade-r {
    transform: translate(-38%, -50%) rotate(46deg);
  }
  .vs-zone-strip {
    opacity: .58;
    transform: skewX(-7deg);
  }
}
@media (max-width: 640px) {
  .vs-arena {
    flex-direction: column;
    gap: 1rem;
  }
  .vs-side {
    justify-content: center !important;
  }
  .vs-swords {
    width: 72px;
    height: 84px;
  }
  .vs-place, .vs-prep {
    top: 96px;
  }
}
html[data-perf-low] .bf-figure.targetable .bf-portrait::after, html[data-perf-low] .bf-figure.enraged .bf-portrait::before, html[data-perf-low] .bf-zone.active::after, html[data-perf-low] .bf-turn-frame.bf-acting::after, html[data-perf-low] .bf-loot-bag.grabbable::after, html[data-perf-low] .bf-zone-spawn-btn::after, html[data-perf-low] .bf-inv-cell--rec::after, html[data-perf-low] .vs-fighter .vs-portrait::after, html[data-perf-low] .vs-btn-go::after, html[data-perf-low] .vs-ambush-ribbon::after {
  animation: none;
  opacity: 0;
}
html[data-perf-low] .bf-figure.acting, html[data-perf-low] .bf-figure.acting .bf-hero, html[data-perf-low] .bf-figure.acting .bf-enemy-img, html[data-perf-low] .bf-enemy-img, html[data-perf-low] .bf-hero, html[data-perf-low] .bf-hero-aura, html[data-perf-low] .bf-ground.acting, html[data-perf-low] .bf-nebula, html[data-perf-low] .bf-modal-art-hero::after, html[data-perf-low] .vs-intro::before, html[data-perf-low] .vs-ember, html[data-perf-low] .vs-spin, html[data-perf-low] .bf-loot-bag.grabbable, html[data-perf-low] .victory-glow-text {
  animation: none !important;
}
html[data-perf-low] .bf-hero-aura {
  opacity: .6;
}
html[data-perf-low] .bf-figure svg, html[data-perf-low] .bf-hero-chip, html[data-perf-low] .bf-modal-hero-chip, html[data-perf-low] .bf-doll-avatar, html[data-perf-low] .bf-spell-icon {
  filter: none;
}
html[data-perf-low] .battlefield-fullscreen-overlay, html[data-perf-low] .battlefield-fullscreen-overlay.exiting, html[data-perf-low] .victory-screen, html[data-perf-low] .defeat-screen, html[data-perf-low] .victory-content, html[data-perf-low] .explore-screen, html[data-perf-low] .vs-intro, html[data-perf-low] .vs-banner, html[data-perf-low] .vs-fighter, html[data-perf-low] .vs-controls, html[data-perf-low] .vs-blade-l, html[data-perf-low] .vs-blade-r, html[data-perf-low] .vs-place, html[data-perf-low] .vs-prep, html[data-perf-low] .vs-place-card {
  animation-duration: 0.01s !important;
  animation-delay: 0s !important;
}
html[data-perf-low] .bf-zone {
  transition-duration: 0.01s;
}
.lp-root {
  --lp-gold: var(--sg-sulfur);
  --lp-gold-soft: rgba(232, 184, 62, 0.6);
  --lp-hairline: rgba(232, 184, 62, 0.22);
  --lp-teal: var(--sg-teal-glow);
  --lp-ember: #ffa04d;
  --lp-ink: var(--sg-parchment);
  --lp-ink-dim: var(--sg-dim-parchment);
  --lp-bg: #131627;
  --lp-surface: rgba(35, 39, 58, 0.75);
  background-color: var(--lp-bg);
  background-image: radial-gradient(ellipse 120% 60% at 50% -10%, rgba(44, 230, 197, 0.09), transparent 60%), radial-gradient(ellipse 90% 50% at 85% 15%, rgba(146, 60, 82, 0.11), transparent 55%), radial-gradient(ellipse 100% 45% at 12% 70%, rgba(96, 72, 164, 0.09), transparent 60%), linear-gradient(180deg, #0e1120 0%, #171b2e 45%, #131627 100%);
  color: var(--lp-ink);
  font-family: var(--sg-font-ui);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}
.lp-root ::selection {
  background: var(--lp-gold);
  color: #16130a;
}
.lp-topline {
  height: 3px;
  background: linear-gradient( 90deg, #060409, #6e1220 20%, #b8232e 38%, #8a46f0 50%, #b8232e 62%, #6e1220 80%, #060409 );
  box-shadow: 0 1px 10px rgba(138, 70, 240, 0.3);
  position: relative;
  z-index: 45;
  overflow: hidden;
}
.lp-topline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200%;
  background: linear-gradient( 90deg, #060409 0%, #6e1220 8%, #b8232e 17%, #8a46f0 25%, #b8232e 33%, #6e1220 42%, #060409 50%, #6e1220 58%, #b8232e 67%, #8a46f0 75%, #b8232e 83%, #6e1220 92%, #060409 100% );
  animation: lp-topline-flow 12s linear infinite;
  will-change: transform;
}
@keyframes lp-topline-flow {
  to {
    transform: translateX(-50%);
  }
}
.lp-skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--lp-gold);
  color: #16130a;
  font-weight: 700;
}
.lp-skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}
.lp-font-gothic {
  font-family: var(--sg-font-gothic);
}
.lp-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.lp-gold {
  color: var(--lp-gold);
}
.lp-teal {
  color: var(--lp-teal);
}
.lp-muted {
  color: var(--lp-ink-dim);
}
.lp-strong {
  color: #f4ecdd;
  font-weight: 600;
}
.lp-eyebrow {
  display: inline-block;
  font-family: var(--sg-font-gothic);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--lp-gold);
}
.lp-eyebrow::before, .lp-eyebrow::after {
  content: "✦";
  opacity: 0.55;
  font-size: 0.85em;
}
.lp-eyebrow::before {
  margin-right: 0.6em;
}
.lp-eyebrow::after {
  margin-left: 0.6em;
}
.lp-eyebrow--plain {
  letter-spacing: 0.22em;
  font-size: 9px;
  color: var(--lp-gold-soft);
}
.lp-eyebrow--plain::before, .lp-eyebrow--plain::after {
  content: none;
}
.lp-title {
  font-family: var(--sg-font-gothic);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f6efe1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 0 34px rgba(230, 178, 46, 0.14);
  margin-top: 0.35rem;
}
.lp-title--sm {
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
}
.lp-title--left {
  text-align: left;
}
.lp-heading-rule {
  color: var(--lp-gold);
  margin-top: 0.9rem;
}
.lp-heading-rule svg {
  filter: drop-shadow(0 0 6px rgba(230, 178, 46, 0.55));
}
.lp-heading-sub {
  color: var(--lp-ink-dim);
  font-size: 0.85rem;
  line-height: 1.65;
  max-width: 38rem;
  margin: 0.9rem auto 0;
}
.lp-body {
  color: #d9d1c0;
  font-size: 0.875rem;
  line-height: 1.7;
}
.lp-body--sm {
  font-size: 0.8rem;
}
.lp-body--xs {
  font-size: 0.72rem;
  line-height: 1.6;
}
.lp-body--dim {
  color: var(--lp-ink-dim);
}
.lp-quote {
  font-family: var(--sg-font-serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.75;
  color: #ded2b8;
}
.lp-quote--sm {
  font-size: 0.8rem;
  color: var(--lp-ink-dim);
}
.lp-epigraph {
  font-family: var(--sg-font-serif);
  font-style: italic;
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  color: var(--lp-gold-soft);
  letter-spacing: 0.04em;
}
.lp-epigraph--sm {
  font-size: 0.8rem;
}
.lp-link {
  color: var(--lp-gold);
  text-decoration: none;
}
.lp-link:hover {
  text-decoration: underline;
}
.lp-hairline-top {
  border-top: 1px solid var(--lp-hairline);
}
.lp-hairline-bottom {
  border-bottom: 1px solid var(--lp-hairline);
}
.lp-accent--blood {
  color: #e06a6a;
}
.lp-accent--green {
  color: #7ddc8f;
}
.lp-accent--violet {
  color: #b78df0;
}
.lp-accent--teal {
  color: var(--lp-teal);
}
.lp-accent--gold {
  color: var(--lp-gold);
}
.lp-accent--ember {
  color: var(--lp-ember);
}
.lp-nav {
  background: radial-gradient(ellipse 48% 180% at 3% 50%, rgba(150, 26, 42, 0.5), transparent 62%), radial-gradient(ellipse 40% 150% at 55% -30%, rgba(96, 40, 190, 0.3), transparent 70%), radial-gradient(ellipse 46% 180% at 97% 50%, rgba(86, 42, 178, 0.42), transparent 62%), linear-gradient(180deg, rgba(11, 8, 18, 0.98), rgba(7, 6, 13, 0.97));
  border-bottom: 1px solid transparent;
  border-image: linear-gradient( 90deg, rgba(184, 35, 46, 0.7), rgba(230, 178, 46, 0.45) 50%, rgba(138, 70, 240, 0.7) ) 1;
  box-shadow: 0 6px 24px rgba(2, 2, 8, 0.65);
}
.lp-logo-chip {
  filter: drop-shadow(0 0 10px rgba(230, 178, 46, 0.35));
}
.lp-logo-chip--lg {
  filter: drop-shadow(0 0 16px rgba(230, 178, 46, 0.45));
}
.lp-nav-wordmark {
  display: block;
  font-family: var(--sg-font-gothic);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.24em;
  color: #f4ecdd;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
.lp-nav-wordmark--lg {
  font-size: 1.4rem;
  color: var(--lp-gold);
}
.lp-nav-tagline {
  display: block;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--lp-gold-soft);
  font-weight: 600;
}
.lp-nav-link {
  position: relative;
  font-family: var(--sg-font-gothic);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c6bba4;
  padding: 0.45rem 0;
  transition: color 0.25s;
}
.lp-nav-link:hover {
  color: #f4ecdd;
  text-shadow: 0 0 10px rgba(160, 96, 250, 0.6);
}
.lp-nav-link--active {
  color: var(--lp-gold);
  font-weight: 700;
  text-shadow: 0 0 8px rgba(230, 178, 46, 0.45);
}
.lp-nav-link--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #b8232e, var(--lp-gold), #8a46f0, transparent);
}
.lp-burger {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(230, 178, 46, 0.4);
  color: var(--lp-gold);
  transition: background 0.2s;
}
.lp-burger:hover {
  background: rgba(230, 178, 46, 0.1);
}
@media (min-width: 1024px) {
  .lp-burger {
    display: none;
  }
}
.lp-btn-cta {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding: 1.1rem 3rem;
  font-family: var(--sg-font-gothic);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: center;
  color: #1a1204;
  background: linear-gradient(160deg, #ffe48f 0%, var(--lp-gold) 45%, #c1871e 100%);
  border: 1px solid #f7e3ab;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 4px 26px rgba(230, 178, 46, 0.28), inset 0 1px 0 rgba(255, 245, 215, 0.7);
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
}
.lp-btn-cta::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 34%;
  background: linear-gradient(105deg, transparent, rgba(255, 251, 235, 0.65) 50%, transparent);
  transform: skewX(-20deg) translateX(-180%);
  animation: lp-cta-sheen 4.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lp-cta-sheen {
  0%, 58% {
    transform: skewX(-20deg) translateX(-180%);
  }
  78%, 100% {
    transform: skewX(-20deg) translateX(480%);
  }
}
.lp-btn-cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 8px 38px rgba(230, 178, 46, 0.5), inset 0 1px 0 rgba(255, 245, 215, 0.7);
}
.lp-cta-halo {
  position: relative;
  display: inline-block;
}
.lp-cta-halo::before {
  content: "";
  position: absolute;
  inset: -26px -40px;
  background: radial-gradient(ellipse 55% 65% at 50% 50%, rgba(230, 178, 46, 0.30), transparent 70%);
  animation: lp-pulse 5.5s ease-in-out infinite;
  pointer-events: none;
}
.lp-cta-halo > * {
  position: relative;
}
.lp-btn-cta--sm {
  padding: 0.75rem 1.9rem;
  font-size: 0.68rem;
}
.lp-btn-ghost {
  display: inline-block;
  padding: 1.05rem 2.6rem;
  font-family: var(--sg-font-gothic);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  color: var(--lp-gold);
  background: rgba(31, 35, 54, 0.78);
  border: 1px solid rgba(232, 184, 62, 0.5);
  box-shadow: inset 0 0 24px rgba(8, 10, 20, 0.55);
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.lp-btn-ghost:hover {
  border-color: var(--lp-gold);
  background: rgba(230, 178, 46, 0.08);
  color: #f4ecdd;
}
.lp-btn-ghost--sm {
  padding: 0.7rem 1.5rem;
  font-size: 0.66rem;
}
.lp-btn-mini {
  padding: 0.45rem 0.8rem;
  font-family: var(--sg-font-gothic);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lp-ink-dim);
  border: 1px solid rgba(232, 184, 62, 0.35);
  background: rgba(24, 27, 42, 0.65);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.lp-btn-mini:hover {
  color: #f4ecdd;
  border-color: var(--lp-gold-soft);
}
.lp-btn-mini--gold {
  background: var(--lp-gold);
  color: #1a1204;
  border-color: #f2dda0;
}
.lp-btn-mini--gold:hover {
  color: #000;
  border-color: #fff0c8;
}
.lp-btn-mini--teal {
  background: rgba(44, 230, 197, 0.85);
  color: #04211b;
  border-color: #9df2e2;
}
.lp-btn-mini--teal:hover {
  color: #000;
  border-color: #d2fff6;
}
.lp-btn-test {
  padding: 0.5rem 1rem;
  font-family: var(--sg-font-gothic);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lp-gold);
  background: rgba(32, 30, 20, 0.8);
  border: 1px solid rgba(232, 184, 62, 0.45);
  cursor: pointer;
  transition: background 0.2s;
}
.lp-btn-test:hover {
  background: rgba(52, 44, 22, 0.9);
}
.lp-section {
  padding: 4.5rem 0;
  position: relative;
}
.lp-page {
  padding-top: 1.5rem;
}
.lp-cv {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}
.lp-panel {
  position: relative;
  background: linear-gradient(170deg, rgba(46, 51, 74, 0.88) 0%, rgba(29, 32, 49, 0.94) 100%);
  border: 1px solid var(--lp-hairline);
  box-shadow: 0 10px 34px rgba(5, 6, 14, 0.45), inset 0 1px 0 rgba(244, 236, 221, 0.05);
  transition: border-color 0.3s;
}
.lp-panel:hover {
  border-color: rgba(232, 184, 62, 0.42);
}
.lp-panel::before, .lp-panel::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  opacity: 0.9;
  transition: opacity 0.3s;
}
.lp-panel:hover::before, .lp-panel:hover::after {
  opacity: 1;
}
.lp-panel::before {
  top: -1px;
  left: -1px;
  border-top: 1px solid var(--lp-gold-soft);
  border-left: 1px solid var(--lp-gold-soft);
}
.lp-panel::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 1px solid var(--lp-gold-soft);
  border-right: 1px solid var(--lp-gold-soft);
}
.lp-panel-heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sg-font-gothic);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lp-gold);
}
.lp-panel-heading--sm {
  font-size: 0.68rem;
}
.lp-card-title {
  font-family: var(--sg-font-gothic);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f4ecdd;
}
.lp-card-title--sm {
  font-size: 0.82rem;
}
.lp-divider {
  display: flex;
  justify-content: center;
  padding: 0.5rem 1.5rem;
  color: var(--lp-gold);
}
.lp-divider svg {
  filter: drop-shadow(0 0 8px rgba(230, 178, 46, 0.4));
  animation: lp-divider-breathe 6s ease-in-out infinite;
}
@keyframes lp-divider-breathe {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}
.lp-feat-icon {
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lp-gold);
  border: 1px solid rgba(230, 178, 46, 0.35);
  background: radial-gradient(circle at 50% 35%, rgba(230, 178, 46, 0.16), rgba(10, 10, 14, 0.4) 70%);
  transform: rotate(45deg);
}
.lp-feat-icon > i {
  transform: rotate(-45deg);
}
.lp-armed [data-lp-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.lp-armed [data-lp-reveal].lp-in {
  opacity: 1;
  transform: none;
}
.lp-hero {
  position: relative;
  min-height: 94vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  padding: 2.5rem 1.25rem 4.5rem;
  background: radial-gradient(ellipse 95% 50% at 50% 106%, rgba(255, 152, 74, 0.17), transparent 62%), radial-gradient(ellipse 70% 55% at 50% -12%, rgba(44, 230, 197, 0.10), transparent 60%), linear-gradient(180deg, #0d1122 0%, #182036 52%, #253052 80%, #33334e 100%);
}
.lp-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16vh;
  background: linear-gradient(180deg, transparent, rgba(19, 22, 39, 0.55) 55%, var(--lp-bg) 96%);
  pointer-events: none;
  z-index: 6;
}
.lp-depth-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}
.lp-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.lp-aurora-ribbon {
  position: absolute;
  top: -10%;
  height: 62%;
  width: 72%;
  will-change: transform;
}
.lp-aurora-ribbon--teal {
  left: 4%;
  background: linear-gradient(102deg, transparent 8%, rgba(44, 230, 197, 0.07) 30%, rgba(125, 240, 214, 0.15) 48%, rgba(44, 230, 197, 0.06) 68%, transparent 90%);
  animation: lp-aurora-sway 30s ease-in-out infinite alternate;
}
.lp-aurora-ribbon--violet {
  left: 36%;
  height: 54%;
  background: linear-gradient(96deg, transparent 10%, rgba(150, 110, 240, 0.06) 35%, rgba(183, 141, 240, 0.12) 52%, rgba(150, 110, 240, 0.05) 70%, transparent 92%);
  animation: lp-aurora-sway 42s ease-in-out -14s infinite alternate-reverse;
}
@keyframes lp-aurora-sway {
  0% {
    transform: skewX(-16deg) rotate(-6deg) translateX(-4%);
    opacity: 0.65;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: skewX(-16deg) rotate(-6deg) translateX(5%);
    opacity: 0.7;
  }
}
.lp-hero-scene, .lp-fog-wrap, .lp-embers, .lp-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lp-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4vh;
  width: 100%;
}
.lp-layer-far {
  height: 46vh;
  opacity: 0.95;
}
.lp-layer-mid {
  height: 26vh;
}
.lp-layer-near {
  height: 22vh;
}
.lp-hero-scene [data-lp-depth] {
  will-change: transform;
}
.lp-star-sheet {
  position: absolute;
  top: 6%;
  left: 4%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #cfe9e2;
  box-shadow: 4vw 2vh 0 0 #d8e8e2, 12vw 8vh 0 0 rgba(216, 232, 226, 0.7), 21vw 3vh 0 0 #bcd6ce, 28vw 11vh 0 0 rgba(216, 232, 226, 0.55), 36vw 5vh 0 0 #d8e8e2, 44vw 13vh 0 0 rgba(188, 214, 206, 0.6), 52vw 2vh 0 0 #e6f2ee, 58vw 9vh 0 0 rgba(216, 232, 226, 0.5), 66vw 4vh 0 0 #cfe4dd, 73vw 12vh 0 0 rgba(216, 232, 226, 0.65), 81vw 6vh 0 0 #d8e8e2, 88vw 14vh 0 0 rgba(188, 214, 206, 0.55), 94vw 3vh 0 0 #e6f2ee, 9vw 18vh 0 0 rgba(216, 232, 226, 0.45), 31vw 20vh 0 0 #bcd6ce, 49vw 19vh 0 0 rgba(216, 232, 226, 0.5), 69vw 21vh 0 0 #cfe4dd, 86vw 23vh 0 0 rgba(216, 232, 226, 0.4);
  opacity: 0.8;
}
.lp-star-sheet-b {
  top: 10%;
  left: 7%;
  box-shadow: 6vw 6vh 0 0 rgba(216, 232, 226, 0.5), 17vw 13vh 0 0 #d8e8e2, 26vw 7vh 0 0 rgba(188, 214, 206, 0.45), 39vw 16vh 0 0 #cfe4dd, 47vw 8vh 0 0 rgba(216, 232, 226, 0.6), 61vw 14vh 0 0 #d8e8e2, 76vw 9vh 0 0 rgba(216, 232, 226, 0.45), 84vw 18vh 0 0 #bcd6ce, 92vw 12vh 0 0 rgba(216, 232, 226, 0.55);
  animation: lp-twinkle 7s ease-in-out infinite;
}
@keyframes lp-twinkle {
  0%, 100% {
    opacity: 0.85;
  }
  50% {
    opacity: 0.3;
  }
}
.lp-fog {
  position: absolute;
  left: -30%;
  width: 160%;
  height: 40%;
  background: radial-gradient(ellipse 45% 60% at 30% 50%, rgba(160, 180, 195, 0.08), transparent 70%), radial-gradient(ellipse 40% 55% at 70% 45%, rgba(160, 180, 195, 0.06), transparent 70%);
  will-change: transform;
}
.lp-fog-1 {
  bottom: 0;
  animation: lp-fog-drift 80s linear infinite;
}
.lp-fog-2 {
  bottom: 12%;
  animation: lp-fog-drift 120s linear infinite reverse;
  opacity: 0.8;
}
.lp-fog-3 {
  bottom: 24%;
  animation: lp-fog-drift 100s linear infinite;
  opacity: 0.55;
}
@keyframes lp-fog-drift {
  from {
    transform: translateX(-6%);
  }
  50% {
    transform: translateX(6%);
  }
  to {
    transform: translateX(-6%);
  }
}
.lp-ember {
  position: absolute;
  bottom: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffd9a0, var(--lp-ember) 55%, rgba(255, 119, 0, 0));
  opacity: 0;
  animation: lp-ember-rise var(--lp-dur, 15s) linear infinite;
  animation-delay: var(--lp-delay, 0s);
}
@keyframes lp-ember-rise {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
  8% {
    opacity: 0.85;
  }
  60% {
    opacity: 0.5;
  }
  100% {
    transform: translate3d(var(--lp-drift, 30px), -92vh, 0);
    opacity: 0;
  }
}
.lp-hero-content {
  position: relative;
  z-index: 10;
  max-width: 52rem;
  text-align: center;
  margin-top: 1rem;
}
.lp-gate {
  display: flex;
  justify-content: center;
  margin-bottom: -1.25rem;
}
.lp-gate-svg {
  width: min(310px, 62vw);
  height: auto;
}
.lp-ring {
  transform-origin: 200px 170px;
  will-change: transform;
}
.lp-ring--cw {
  animation: lp-ring-cw 70s linear infinite;
}
.lp-ring--ccw {
  animation: lp-ring-ccw 52s linear infinite;
}
@keyframes lp-ring-cw {
  to {
    transform: rotate(360deg);
  }
}
@keyframes lp-ring-ccw {
  to {
    transform: rotate(-360deg);
  }
}
.lp-gate-pulse {
  animation: lp-pulse 5.5s ease-in-out infinite;
}
@keyframes lp-pulse {
  0%, 100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}
.lp-shard-float {
  transform-origin: 200px 170px;
  animation: lp-shard-bob 9s ease-in-out infinite;
}
@keyframes lp-shard-bob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}
.lp-fissure {
  animation: lp-fissure-glow 4s ease-in-out infinite;
}
@keyframes lp-fissure-glow {
  0%, 100% {
    opacity: 0.65;
  }
  45% {
    opacity: 1;
  }
  60% {
    opacity: 0.8;
  }
}
.lp-frag {
  will-change: transform;
}
.lp-frag-a {
  animation: lp-frag-bob 7s ease-in-out infinite;
}
.lp-frag-b {
  animation: lp-frag-bob 8.5s ease-in-out -2s infinite reverse;
}
.lp-frag-c {
  animation: lp-frag-bob 6s ease-in-out -4s infinite;
}
@keyframes lp-frag-bob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
.lp-wordmark {
  font-family: "Crystalline", var(--sg-font-gothic);
  font-weight: 400;
  font-size: clamp(3rem, 9.5vw, 6.5rem);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(165deg, #fff8e6 0%, #ffe48f 24%, var(--lp-gold) 46%, #8df0d9 78%, #27a98f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 30px rgba(230, 178, 46, 0.4));
}
.lp-hero-sub {
  font-family: var(--sg-font-gothic);
  font-size: clamp(0.8rem, 1.9vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--lp-gold);
  margin-top: 1.1rem;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}
.lp-hero .lp-epigraph {
  margin-top: 0.9rem;
}
.lp-hero-body {
  font-size: 0.9rem;
  line-height: 1.75;
  color: #d6cdbb;
  max-width: 36rem;
  margin: 1.1rem auto 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}
.lp-microcopy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.55rem;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #c3b9a4;
  margin-top: 1.4rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}
.lp-dot {
  color: #5c5648;
}
.lp-realm-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 32rem;
  margin: 2.8rem auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--lp-hairline);
}
.lp-realm-label {
  display: block;
  font-family: var(--sg-font-gothic);
  font-size: 8.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lp-ink-dim);
}
.lp-realm-value {
  font-family: var(--sg-font-gothic);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lp-realm-value--teal {
  color: var(--lp-teal);
  text-shadow: 0 0 14px rgba(44, 230, 197, 0.5);
}
.lp-realm-value--parchment {
  color: #f4ecdd;
  text-shadow: 0 0 14px rgba(244, 236, 221, 0.35);
}
.lp-realm-value--ember {
  color: var(--lp-ember);
  text-shadow: 0 0 14px rgba(255, 160, 77, 0.5);
}
.lp-scroll-cue {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  margin-left: -0.75rem;
  z-index: 10;
  color: var(--lp-gold-soft);
  font-size: 0.85rem;
  animation: lp-cue-bob 2.4s ease-in-out infinite;
}
@keyframes lp-cue-bob {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.55;
  }
  50% {
    transform: translateY(7px);
    opacity: 1;
  }
}
.lp-home-col {
  position: relative;
  background: radial-gradient(ellipse 90% 14% at 50% 21%, rgba(255, 150, 60, 0.09), transparent 62%), radial-gradient(ellipse 110% 12% at 12% 36%, rgba(150, 110, 240, 0.07), transparent 60%), radial-gradient(ellipse 110% 12% at 85% 52%, rgba(57, 230, 44, 0.04), transparent 60%), radial-gradient(ellipse 120% 14% at 50% 70%, rgba(57, 230, 44, 0.05), transparent 62%), radial-gradient(ellipse 100% 16% at 50% 97%, rgba(44, 230, 197, 0.1), transparent 62%), radial-gradient(ellipse 70% 10% at 50% 99%, rgba(230, 178, 46, 0.07), transparent 65%), linear-gradient( 180deg, #0c0f1d 0%, #141a2e 8%, #11162a 22%, #0d1020 36%, #0a0c1a 50%, #070812 62%, #05060e 74%, #071018 86%, #0c1c26 96%, #102530 100% );
}
.lp-mile {
  display: block;
  font-family: var(--sg-font-gothic);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(212, 196, 160, 0.55);
  margin-bottom: 0.6rem;
}
.lp-mile::before {
  content: "— ";
  opacity: 0.5;
}
.lp-mile::after {
  content: " —";
  opacity: 0.5;
}
.lp-trail {
  display: flex;
  justify-content: center;
  padding: 0.75rem 0;
  color: var(--lp-gold-soft);
}
.lp-trail svg {
  width: 2.2rem;
  height: auto;
}
.lp-step {
  fill: currentColor;
  opacity: 0.12;
  animation: lp-step-glow 6s ease-in-out infinite;
}
.lp-step-1 {
  animation-delay: 0s;
}
.lp-step-2 {
  animation-delay: 0.7s;
}
.lp-step-3 {
  animation-delay: 1.4s;
}
.lp-step-4 {
  animation-delay: 2.1s;
}
.lp-step-5 {
  animation-delay: 2.8s;
}
@keyframes lp-step-glow {
  0%, 45%, 100% {
    opacity: 0.12;
  }
  12% {
    opacity: 0.6;
  }
}
.lp-campfire {
  display: flex;
  justify-content: center;
  margin: -0.5rem 0 1.6rem;
}
.lp-campfire svg {
  width: 7.5rem;
  height: auto;
}
.lp-cf-halo {
  animation: lp-pulse 4s ease-in-out infinite;
}
.lp-flame {
  transform-origin: 60px 62px;
  will-change: transform;
}
.lp-flame-1 {
  animation: lp-flicker 2.3s ease-in-out infinite;
}
.lp-flame-2 {
  animation: lp-flicker 1.7s ease-in-out -0.6s infinite;
}
.lp-flame-3 {
  animation: lp-flicker 1.1s ease-in-out -0.3s infinite;
}
@keyframes lp-flicker {
  0%, 100% {
    transform: scaleY(1) skewX(0deg);
    opacity: 0.95;
  }
  30% {
    transform: scaleY(1.08) skewX(-2.5deg);
    opacity: 1;
  }
  60% {
    transform: scaleY(0.92) skewX(2deg);
    opacity: 0.8;
  }
  80% {
    transform: scaleY(1.04) skewX(-1deg);
    opacity: 0.9;
  }
}
.lp-signpost-wrap {
  display: flex;
  justify-content: center;
  margin: -0.75rem 0 2rem;
}
.lp-signpost {
  width: 13rem;
  height: auto;
  transform: rotate(-2deg);
}
.lp-signpost-label text {
  font-family: var(--sg-font-gothic);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  fill: #cfc0a0;
}
.lp-zone-row .lp-zone-card {
  transition: transform 0.45s, border-color 0.3s;
}
.lp-zone-row .lp-zone-card:nth-child(1) {
  transform: rotate(-1.1deg);
}
.lp-zone-row .lp-zone-card:nth-child(2) {
  transform: rotate(0.7deg) translateY(8px);
}
.lp-zone-row .lp-zone-card:nth-child(3) {
  transform: rotate(-0.6deg);
}
.lp-zone-row .lp-zone-card:hover {
  transform: rotate(0deg) translateY(-3px);
}
.lp-ch--shrine {
  overflow: hidden;
}
.lp-shrine-arch {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(52rem, 96vw);
  height: auto;
  transform: translateX(-50%);
  color: #6b5a86;
  opacity: 0.22;
  pointer-events: none;
}
.lp-flank-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.lp-flank {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6.5rem;
  color: #0a0d1a;
  opacity: 0.85;
  display: none;
}
.lp-flank svg {
  width: 100%;
  height: 100%;
}
.lp-flank--l {
  left: 0;
}
.lp-flank--r {
  right: 0;
  transform: scaleX(-1);
}
.lp-flank--wall {
  color: #060810;
  opacity: 0.95;
}
@media (min-width: 1280px) {
  .lp-flank {
    display: block;
  }
}
.lp-ch--arrival {
  padding-top: 3rem;
}
.lp-ch--arrival .lp-gate {
  margin-bottom: -1rem;
}
.lp-gate-svg--end {
  width: min(400px, 74vw);
}
.lp-drift {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.lp-drift-item {
  position: absolute;
  will-change: transform;
}
.lp-drift-item svg {
  display: block;
  width: 100%;
  height: auto;
  animation: lp-drift-bob var(--lp-dur, 19s) ease-in-out infinite;
}
@keyframes lp-drift-bob {
  0%, 100% {
    transform: translateY(0) rotate(-5deg);
  }
  50% {
    transform: translateY(-28px) rotate(6deg);
  }
}
.lp-drift-1 {
  top: 4%;
  left: 3%;
  width: 8rem;
  color: var(--lp-teal);
  opacity: 0.1;
}
.lp-drift-2 {
  top: 15%;
  right: 5%;
  width: 6rem;
  color: var(--lp-gold);
  opacity: 0.09;
  --lp-dur: 23s;
}
.lp-drift-3 {
  top: 37%;
  left: 6%;
  width: 4.5rem;
  color: #b78df0;
  opacity: 0.11;
  --lp-dur: 16s;
}
.lp-drift-4 {
  top: 55%;
  right: 8%;
  width: 9rem;
  color: var(--lp-teal);
  opacity: 0.08;
  --lp-dur: 26s;
}
.lp-drift-5 {
  top: 74%;
  left: 10%;
  width: 5rem;
  color: var(--lp-gold);
  opacity: 0.1;
  --lp-dur: 20s;
}
.lp-drift-6 {
  top: 90%;
  right: 4%;
  width: 7rem;
  color: #b78df0;
  opacity: 0.09;
  --lp-dur: 24s;
}
.lp-drift-7 {
  top: 26%;
  right: 14%;
  width: 3.5rem;
  color: #b78df0;
  opacity: 0.1;
  --lp-dur: 18s;
}
.lp-drift-8 {
  top: 63%;
  left: 4%;
  width: 6rem;
  color: var(--lp-teal);
  opacity: 0.07;
  --lp-dur: 28s;
}
.lp-drift-9 {
  top: 82%;
  right: 12%;
  width: 4rem;
  color: var(--lp-gold);
  opacity: 0.09;
  --lp-dur: 21s;
}
.lp-drift--hero {
  z-index: 4;
}
.lp-hd-1 {
  top: 12%;
  left: 7%;
  width: 3.5rem;
  color: var(--lp-teal);
  opacity: 0.16;
}
.lp-hd-2 {
  top: 20%;
  right: 8%;
  width: 4rem;
  color: #b78df0;
  opacity: 0.13;
  --lp-dur: 22s;
}
.lp-hd-3 {
  top: 46%;
  left: 3%;
  width: 3rem;
  color: var(--lp-gold);
  opacity: 0.13;
  --lp-dur: 15s;
}
.lp-hd-4 {
  top: 56%;
  right: 4%;
  width: 2.5rem;
  color: var(--lp-teal);
  opacity: 0.14;
  --lp-dur: 25s;
}
.lp-enchant {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
  overflow: visible;
}
.lp-enchant rect {
  fill: none;
  x: 2px;
  y: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
}
.lp-enchant polygon {
  fill: none;
}
@keyframes lp-dash {
  to {
    stroke-dashoffset: -100;
  }
}
@keyframes lp-dash-rev {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.lp-enchant--wards .lp-enchant-a {
  stroke: var(--lp-gold);
  stroke-width: 1.6;
  stroke-dasharray: 4 16;
  filter: drop-shadow(0 0 3px rgba(230, 178, 46, 0.8));
  animation: lp-dash 16s linear infinite;
  opacity: 0.8;
}
.lp-enchant--wards .lp-enchant-b {
  x: 7px;
  y: 7px;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  stroke: #ffe9ad;
  stroke-width: 0.9;
  stroke-dasharray: 2 18;
  animation: lp-dash-rev 22s linear infinite;
  opacity: 0.55;
}
.lp-enchant--trace rect {
  opacity: 0;
  transition: opacity 0.35s;
}
.lp-enchant--trace .lp-enchant-b {
  stroke: rgba(44, 230, 197, 0.3);
  stroke-width: 1;
}
.lp-enchant--trace .lp-enchant-a {
  stroke: #2ce6c5;
  stroke-width: 2.4;
  stroke-dasharray: 20 80;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(44, 230, 197, 0.9));
}
.lp-panel:hover > .lp-enchant--trace rect {
  opacity: 1;
}
.lp-panel:hover > .lp-enchant--trace .lp-enchant-a {
  animation: lp-dash 3.5s linear infinite;
}
.lp-enchant--ember .lp-enchant-a {
  stroke: #ff8a3d;
  stroke-width: 2.2;
  stroke-dasharray: 10 30 5 55;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(255, 119, 0, 0.75));
  animation: lp-dash 7s linear infinite;
  opacity: 0.7;
}
.lp-enchant--ember .lp-enchant-b {
  stroke: #ffd9a0;
  stroke-width: 1;
  stroke-dasharray: 3 17;
  animation: lp-dash-rev 11s linear infinite;
  opacity: 0.45;
}
@keyframes lp-pulse-soft {
  0%, 100% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.35;
  }
}
.lp-enchant--pulse .lp-enchant-a {
  stroke: #2ce6c5;
  stroke-width: 1;
  animation: lp-pulse-soft 5.5s ease-in-out infinite;
}
@keyframes lp-pulse-faint {
  0%, 100% {
    opacity: 0.03;
  }
  50% {
    opacity: 0.1;
  }
}
.lp-enchant--pulse .lp-enchant-b {
  stroke: #9deede;
  stroke-width: 2.5;
  animation: lp-pulse-faint 5.5s ease-in-out -2.7s infinite;
}
.lp-cta-halo > .lp-enchant {
  inset: -9px -14px;
  width: calc(100% + 28px);
  height: calc(100% + 18px);
}
.lp-chronicle {
  background: radial-gradient(ellipse 90% 60% at 80% 0%, rgba(230, 178, 46, 0.11), transparent 60%), linear-gradient(170deg, rgba(48, 52, 76, 0.92), rgba(30, 33, 50, 0.95));
}
.lp-duality {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  border: 1px solid var(--lp-hairline);
  background: rgba(26, 29, 45, 0.65);
  box-shadow: 0 12px 40px rgba(5, 6, 14, 0.5);
}
.lp-duality-side {
  position: relative;
  padding: 2.6rem 2.2rem;
  text-align: center;
}
.lp-duality-side--hearth {
  background: radial-gradient(ellipse 100% 80% at 50% 100%, rgba(255, 150, 60, 0.22), transparent 65%), linear-gradient(200deg, rgba(66, 48, 28, 0.6), rgba(38, 28, 18, 0.82));
  color: var(--lp-ember);
}
.lp-duality-side--dark {
  background: radial-gradient(ellipse 100% 80% at 50% 0%, rgba(44, 230, 197, 0.13), transparent 65%), linear-gradient(160deg, rgba(22, 32, 44, 0.82), rgba(13, 16, 26, 0.9));
  color: var(--lp-teal);
}
.lp-duality-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  opacity: 0.9;
}
.lp-duality-title {
  font-family: var(--sg-font-gothic);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}
.lp-duality-side--hearth .lp-duality-title {
  color: #ffc78f;
}
.lp-duality-side--dark .lp-duality-title {
  color: #9deede;
}
.lp-duality-spine {
  display: flex;
  align-items: center;
  color: var(--lp-gold);
  width: 24px;
}
@media (max-width: 767px) {
  .lp-duality {
    grid-template-columns: 1fr;
  }
  .lp-duality-spine {
    display: none;
  }
}
.lp-zone-card {
  overflow: hidden;
  padding: 0;
}
.lp-vignette {
  display: block;
  width: 100%;
  height: 9rem;
  border-bottom: 1px solid var(--lp-hairline);
  transition: transform 0.6s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.lp-zone-card:hover .lp-vignette {
  transform: scale(1.05);
}
.lp-zone-epithet {
  font-family: var(--sg-font-serif);
  font-style: italic;
  font-size: 0.78rem;
  color: var(--lp-gold-soft);
  margin-top: 0.35rem;
}
.lp-shot {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(232, 184, 62, 0.3);
  background: #1d2135;
  cursor: zoom-in;
  text-align: left;
  transition: border-color 0.3s, transform 0.3s;
}
.lp-shot:hover {
  border-color: rgba(230, 178, 46, 0.7);
  transform: translateY(-4px) rotate(-0.5deg) scale(1.01);
  box-shadow: 0 14px 34px rgba(4, 5, 12, 0.6);
}
.lp-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
}
.lp-shot-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.1) 40%, transparent 70%);
  pointer-events: none;
}
.lp-shot-title {
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.8rem;
  font-family: var(--sg-font-gothic);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f4ecdd;
}
.lp-shot-zoom {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: var(--lp-gold);
  font-size: 0.75rem;
  opacity: 0;
  transition: opacity 0.25s;
}
.lp-shot:hover .lp-shot-zoom {
  opacity: 1;
}
.lp-attr {
  text-align: center;
  padding: 0.5rem 0.25rem;
}
.lp-rune {
  position: relative;
  width: 4rem;
  height: 4rem;
  margin: 0 auto;
}
.lp-rune svg {
  width: 100%;
  height: 100%;
}
.lp-rune-orbit {
  transform-origin: 32px 32px;
  animation: lp-ring-cw 26s linear infinite;
}
.lp-attr:hover .lp-rune-orbit {
  animation-duration: 7s;
}
.lp-rune-abbr {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sg-font-gothic);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.lp-rune--blood {
  color: #e06a6a;
}
.lp-rune--green {
  color: #7ddc8f;
}
.lp-rune--violet {
  color: #b78df0;
}
.lp-rune--teal {
  color: var(--lp-teal);
}
.lp-rune--gold {
  color: var(--lp-gold);
}
.lp-rune--ember {
  color: var(--lp-ember);
}
.lp-attr-name {
  display: block;
  font-family: var(--sg-font-gothic);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f4ecdd;
  margin-top: 0.7rem;
}
.lp-attr-desc {
  font-size: 0.66rem;
  line-height: 1.55;
  color: var(--lp-ink-dim);
  margin-top: 0.4rem;
}
.lp-final-cta {
  background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(44, 230, 197, 0.08), transparent 65%), radial-gradient(ellipse 50% 40% at 50% 45%, rgba(230, 178, 46, 0.08), transparent 60%);
}
.lp-youtube {
  border-color: rgba(200, 35, 35, 0.35);
}
.lp-youtube-badge, .lp-discord-badge {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.8rem;
  border: 1px solid;
}
.lp-youtube-badge {
  color: #ff5b4d;
  border-color: rgba(255, 91, 77, 0.5);
  background: rgba(120, 20, 12, 0.18);
}
.lp-discord {
  border-color: rgba(88, 101, 242, 0.4);
}
.lp-discord-badge {
  color: #8b93ff;
  border-color: rgba(139, 147, 255, 0.5);
  background: rgba(70, 80, 200, 0.14);
}
.lp-social {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.85rem;
  font-size: 0.72rem;
  color: #d9d1c0;
  border: 1px solid var(--lp-hairline);
  background: rgba(26, 29, 45, 0.6);
  transition: color 0.2s, border-color 0.2s;
}
.lp-social:hover {
  color: var(--lp-gold);
  border-color: var(--lp-gold-soft);
}
.lp-oath {
  background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(230, 178, 46, 0.12), transparent 60%), linear-gradient(170deg, rgba(48, 52, 76, 0.92), rgba(30, 33, 50, 0.95));
  border-color: rgba(232, 184, 62, 0.35);
}
.lp-oath-seal {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lp-teal);
  border: 1px solid rgba(44, 230, 197, 0.35);
  background: rgba(12, 40, 34, 0.3);
  padding: 0.4rem 0.85rem;
}
.lp-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  background: var(--lp-gold);
  color: #1a1204;
}
.lp-tag--event {
  background: #7a4fb8;
  color: #f0e8ff;
}
.lp-tag--warn {
  background: rgba(230, 178, 46, 0.2);
  color: #f0cf7a;
  border: 1px solid rgba(230, 178, 46, 0.4);
}
.lp-tag--info {
  background: rgba(90, 140, 220, 0.2);
  color: #9dc0f0;
  border: 1px solid rgba(90, 140, 220, 0.4);
}
.lp-issue {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem;
  border: 1px solid var(--lp-hairline);
  background: rgba(31, 34, 52, 0.6);
}
.lp-roadmap-status {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  width: 6rem;
  flex-shrink: 0;
}
.lp-faq {
  border: 1px solid var(--lp-hairline);
  background: rgba(31, 34, 52, 0.6);
  padding: 1rem;
}
.lp-faq summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: #f4ecdd;
  cursor: pointer;
}
.lp-faq summary::-webkit-details-marker {
  display: none;
}
.lp-success {
  border-color: rgba(44, 230, 197, 0.35);
}
.lp-tier:hover {
  border-color: var(--lp-gold-soft);
}
.lp-tier-cost {
  display: block;
  font-family: var(--sg-font-gothic);
  font-size: 1.7rem;
  font-weight: 800;
  color: #f4ecdd;
  margin-top: 0.4rem;
}
.lp-notice {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 1rem;
  border: 1px solid rgba(232, 184, 62, 0.45);
  background: rgba(76, 58, 20, 0.3);
  color: #f0dfae;
  font-size: 0.72rem;
  line-height: 1.6;
}
.lp-notice i {
  margin-top: 0.15rem;
}
.lp-legal-tab {
  padding: 0.55rem 1.1rem;
  font-family: var(--sg-font-gothic);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b8ac95;
  border: 1px solid var(--lp-hairline);
  transition: color 0.2s, border-color 0.2s;
}
.lp-legal-tab:hover {
  color: #f4ecdd;
  border-color: var(--lp-gold-soft);
}
.lp-legal-tab--active {
  background: var(--lp-gold);
  color: #1a1204;
  border-color: var(--lp-gold);
}
.lp-bar {
  height: 0.55rem;
  border: 1px solid;
  padding: 1px;
  overflow: hidden;
}
.lp-bar > div {
  height: 100%;
  transition: width 0.3s;
}
.lp-bar--hp {
  border-color: rgba(200, 35, 35, 0.4);
  background: rgba(60, 12, 16, 0.6);
}
.lp-bar--hp > div {
  background: linear-gradient(90deg, #8f1d1d, #d94040);
}
.lp-bar--mp {
  border-color: rgba(44, 230, 197, 0.35);
  background: rgba(8, 40, 48, 0.6);
}
.lp-bar--mp > div {
  background: linear-gradient(90deg, #157a8a, #38cfd8);
}
.lp-statsheet {
  background: rgba(16, 18, 30, 0.6);
  border: 1px solid var(--lp-hairline);
  padding: 0.8rem;
}
.lp-stat-label {
  display: block;
  font-family: var(--sg-font-gothic);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lp-stat-value {
  font-family: ui-monospace, monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: #f4ecdd;
}
.lp-stat-abbr {
  font-family: ui-monospace, monospace;
  font-weight: 700;
  font-size: 0.85rem;
}
.lp-slot {
  height: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(150, 138, 112, 0.45);
  background: rgba(16, 18, 30, 0.4);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.lp-slot:hover {
  background: rgba(230, 178, 46, 0.06);
}
.lp-slot--filled {
  border: 1px solid var(--lp-gold-soft);
  background: radial-gradient(circle at 50% 30%, rgba(230, 178, 46, 0.16), rgba(18, 20, 32, 0.6) 75%);
}
.lp-slot--filled:hover {
  border-color: var(--sg-bright-blood);
}
.lp-slot-label {
  font-size: 7px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lp-ink-dim);
}
.lp-bag {
  background: rgba(16, 18, 30, 0.55);
  border: 1px solid var(--lp-hairline);
  padding: 0.65rem;
}
.lp-bag-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-width: 2px;
  border-style: solid;
  background: rgba(10, 12, 22, 0.55);
  cursor: pointer;
  transition: transform 0.15s;
}
.lp-bag-cell--selected {
  transform: scale(1.06);
  outline: 2px solid rgba(244, 236, 221, 0.6);
  outline-offset: 2px;
}
.lp-bag-cell--empty {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.02);
  pointer-events: none;
}
.lp-bag-count {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--lp-gold);
  background: rgba(230, 178, 46, 0.1);
  padding: 0.1rem 0.55rem;
}
.lp-inspect {
  min-height: 110px;
  padding: 0.9rem;
  border: 1px solid var(--lp-hairline);
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(230, 178, 46, 0.09), transparent 60%), rgba(18, 20, 32, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lp-quality-chip {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: ui-monospace, monospace;
  padding: 0.15rem 0.4rem;
}
.lp-quality-chip--type {
  color: var(--lp-gold);
  background: rgba(230, 178, 46, 0.1);
}
.lp-quest {
  font-size: 0.75rem;
}
.lp-reward {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 10px;
  color: #d6cdbb;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 0.3rem 0.45rem;
}
.lp-field-label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #cfc6b4;
  margin-bottom: 0.35rem;
}
.lp-field {
  width: 100%;
  padding: 0.65rem 0.8rem;
  font-size: 0.8rem;
  color: #f4ecdd;
  background: rgba(13, 15, 26, 0.85);
  border: 1px solid rgba(232, 184, 62, 0.3);
  outline: none;
  transition: border-color 0.2s;
}
.lp-field:focus {
  border-color: var(--lp-gold);
}
.lp-field::placeholder {
  color: #6d6555;
}
select.lp-field {
  appearance: auto;
}
.lp-checkbox {
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
  accent-color: var(--sg-sulfur);
}
.lp-flash {
  font-size: 0.72rem;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid;
}
.lp-flash--error {
  background: rgba(80, 16, 16, 0.5);
  border-color: rgba(200, 35, 35, 0.5);
  color: #f0a0a0;
}
.lp-flash--info {
  background: rgba(10, 55, 45, 0.45);
  border-color: rgba(44, 230, 197, 0.4);
  color: #9deede;
}
.lp-modal-backdrop {
  background: rgba(7, 8, 16, 0.85);
}
.lp-modal {
  background: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(230, 178, 46, 0.1), transparent 60%), linear-gradient(170deg, #262b42, #161a2b);
  border: 1px solid rgba(232, 184, 62, 0.55);
  box-shadow: 0 0 60px rgba(3, 4, 10, 0.85), 0 0 34px rgba(230, 178, 46, 0.16);
}
.lp-modal-close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lp-ink-dim);
  transition: color 0.2s;
}
.lp-modal-close:hover {
  color: #f4ecdd;
}
.lp-choice {
  border: 1px solid rgba(232, 184, 62, 0.5);
  background: rgba(31, 34, 52, 0.85);
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, transform 0.25s;
}
.lp-choice:hover {
  border-color: var(--lp-gold);
  background: rgba(230, 178, 46, 0.06);
  transform: translateY(-2px);
}
.lp-choice--primary {
  background: linear-gradient(160deg, #f5d879 0%, var(--sg-sulfur) 45%, #b97e17 100%);
  border-color: #f2dda0;
  box-shadow: 0 4px 26px rgba(230, 178, 46, 0.25);
}
.lp-choice--primary .lp-choice-title, .lp-choice--primary .lp-choice-sub {
  color: #1a1204;
}
.lp-choice-title {
  display: block;
  font-family: var(--sg-font-gothic);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lp-gold);
}
.lp-choice-sub {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  color: var(--lp-ink-dim);
  margin-top: 0.4rem;
}
.lp-lightbox {
  --lp-gold: var(--sg-sulfur);
  --lp-ink-dim: var(--sg-dim-parchment);
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.lp-lightbox-btn {
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  color: #f4ecdd;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(230, 178, 46, 0.3);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.lp-lightbox-btn:hover {
  background: var(--sg-sulfur);
  color: #1a1204;
}
.lp-lightbox-img {
  max-height: 72vh;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border: 1px solid rgba(230, 178, 46, 0.4);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
  pointer-events: auto;
}
.lp-footer {
  position: relative;
  overflow: hidden;
  margin-top: 0;
  padding: 3.5rem 0 4rem;
  border-top: 1px solid rgba(232, 184, 62, 0.12);
  background: radial-gradient(ellipse 120% 45% at 50% 0%, rgba(44, 230, 197, 0.05), transparent 60%), radial-gradient(ellipse 80% 100% at 50% 100%, rgba(230, 178, 46, 0.07), transparent 60%), linear-gradient(180deg, rgba(13, 26, 32, 0.4), rgba(11, 13, 24, 0.92));
  text-align: center;
}
.lp-footer-inner {
  position: relative;
  z-index: 1;
}
.lp-footer-sigil {
  display: block;
  width: min(30rem, 86vw);
  height: auto;
  color: var(--lp-gold);
}
.lp-fsig-glow {
  animation: lp-pulse 6s ease-in-out infinite;
}
.lp-fsig-fissure {
  animation: lp-fissure-glow 5s ease-in-out infinite;
}
.lp-footer-nav .lp-footer-link {
  position: relative;
}
.lp-footer-nav .lp-footer-link + .lp-footer-link::before {
  content: "✦";
  position: absolute;
  left: -1.25rem;
  color: var(--lp-gold-soft);
  font-size: 8px;
  opacity: 0.7;
}
.lp-footer-corps {
  font-family: var(--sg-font-gothic);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--lp-gold);
}
.lp-footer-blurb {
  font-size: 11px;
  line-height: 1.7;
  color: #c6bba4;
  max-width: 26rem;
  margin: 0 auto;
}
.lp-footer-link {
  font-family: var(--sg-font-gothic);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lp-ink-dim);
  transition: color 0.2s;
}
.lp-footer-link:hover {
  color: var(--lp-gold);
}
.lp-footer-legal {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6d6555;
  padding-top: 0.6rem;
}
.lp-auth {
  background-image: radial-gradient(ellipse 100% 55% at 50% -5%, rgba(44, 230, 197, 0.1), transparent 60%), radial-gradient(ellipse 80% 60% at 50% 110%, rgba(146, 60, 82, 0.18), transparent 60%), linear-gradient(180deg, #0e1120 0%, #181c30 55%, #131627 100%);
}
.lp-auth-card {
  background: radial-gradient(ellipse 90% 45% at 50% 0%, rgba(230, 178, 46, 0.1), transparent 60%), linear-gradient(170deg, rgba(41, 45, 66, 0.97), rgba(24, 27, 42, 0.98));
  border-color: rgba(232, 184, 62, 0.4);
  box-shadow: 0 20px 70px rgba(4, 5, 12, 0.75), 0 0 40px rgba(230, 178, 46, 0.1);
}
@media (prefers-reduced-motion: reduce) {
  #landing-root *, #landing-root *::before, #landing-root *::after, #saga-root *, #saga-root *::before, #saga-root *::after {
    animation: none !important;
    transition: none !important;
  }
}
@media (max-width: 640px) {
  .lp-hero {
    min-height: 88vh;
    padding-bottom: 3.5rem;
  }
  .lp-layer-far {
    height: 34vh;
  }
  .lp-realm-band {
    gap: 0.75rem;
  }
  .lp-ember:nth-child(even) {
    display: none;
  }
  .lp-fog-3 {
    display: none;
  }
  .lp-aurora-ribbon--violet {
    display: none;
  }
  .lp-drift {
    display: none;
  }
  .lp-enchant--wards rect, .lp-enchant--ember rect {
    animation: none;
    opacity: 0.35;
  }
}
.saga-root {
  background: #0a0a0e;
}
.saga-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 1.25rem;
  background: #000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  z-index: 45;
}
.saga-topbar-brand {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #7d7668;
}
.saga-topbar-link {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c6bba4;
  transition: color 0.2s;
}
.saga-topbar-link:hover {
  color: var(--lp-gold);
}
.saga-nav {
  background: rgba(12, 12, 16, 0.98);
  border-bottom: 1px solid rgba(230, 178, 46, 0.25);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
}
.saga-logo {
  font-size: 1.6rem;
  color: var(--lp-gold);
  filter: drop-shadow(0 0 8px rgba(230, 178, 46, 0.4));
}
.saga-logo--footer {
  font-size: 2rem;
  opacity: 0.9;
}
.saga-wordmark {
  font-family: var(--sg-font-gothic);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  color: #f4ecdd;
}
.saga-nav-link {
  position: relative;
  padding: 1.1rem 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b9b2a2;
  transition: color 0.2s;
}
.saga-nav-link:hover {
  color: #fff;
}
.saga-nav-link--active {
  color: var(--lp-gold);
}
.saga-nav-link--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--lp-gold);
}
.saga-btn {
  display: inline-block;
  padding: 0.95rem 2.6rem;
  font-family: var(--sg-font-gothic);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: #2a1a00;
  background: linear-gradient(180deg, #f2c14e, #c8901a);
  border: 1px solid #5a3c00;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.6);
  cursor: pointer;
  transition: filter 0.2s, transform 0.2s;
}
.saga-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.saga-btn--sm {
  padding: 0.6rem 1.5rem;
  font-size: 0.72rem;
}
.saga-btn--ghost {
  color: #f4ecdd;
  background: rgba(10, 10, 14, 0.55);
  border: 1px solid rgba(244, 236, 221, 0.5);
  box-shadow: none;
}
.saga-btn--ghost:hover {
  filter: none;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.saga-band-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.saga-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}
.saga-hero-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 40%, transparent 30%, rgba(5, 5, 9, 0.5) 78%), linear-gradient(180deg, rgba(5, 5, 9, 0.55), transparent 26%, transparent 48%, rgba(10, 10, 14, 0.85) 84%, #0a0a0e 100%);
}
.saga-hero-content {
  position: relative;
  z-index: 2;
  padding: 4rem 1.5rem 6.5rem;
}
.saga-hero-rule {
  width: 9rem;
  height: auto;
  margin: 0.7rem auto 0;
  color: var(--lp-gold);
  opacity: 0.8;
}
.saga-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--lp-gold);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}
.saga-display {
  font-family: var(--sg-font-gothic);
  font-weight: 900;
  font-size: clamp(3.2rem, 9vw, 6.8rem);
  line-height: 1;
  letter-spacing: 0.05em;
  background: linear-gradient(180deg, #ffffff 30%, #cfc4d8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.8));
  margin-top: 0.55rem;
}
.saga-hero-sub {
  font-family: var(--sg-font-gothic);
  font-size: clamp(0.85rem, 2vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #e8dfc9;
  margin-top: 1rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}
.saga-hero-note {
  margin-top: 1.4rem;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #e4dcc9;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}
.saga-hero-note strong {
  color: var(--lp-gold);
  font-weight: 800;
}
.saga-band {
  position: relative;
  min-height: 29rem;
  max-height: 78vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.saga-band::before, .saga-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 10rem;
  z-index: 1;
  pointer-events: none;
}
.saga-band::before {
  top: 0;
  background: linear-gradient(180deg, #0a0a0e, transparent);
}
.saga-band::after {
  bottom: 0;
  background: linear-gradient(0deg, #0a0a0e, transparent);
}
.saga-band-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(26, 10, 30, 0.32), rgba(0, 0, 0, 0.22)), linear-gradient(90deg, rgba(7, 7, 11, 0.94) 0%, rgba(7, 7, 11, 0.78) 34%, rgba(7, 7, 11, 0.2) 62%, rgba(7, 7, 11, 0.5) 100%);
}
.saga-band--flip .saga-band-scrim {
  background: linear-gradient(rgba(26, 10, 30, 0.32), rgba(0, 0, 0, 0.22)), linear-gradient(270deg, rgba(7, 7, 11, 0.94) 0%, rgba(7, 7, 11, 0.78) 34%, rgba(7, 7, 11, 0.2) 62%, rgba(7, 7, 11, 0.5) 100%);
}
.saga-band--shot .saga-band-art {
  opacity: 0.5;
}
.saga-band--shot {
  background: #0b0b11;
}
.saga-kb {
  will-change: transform;
}
.saga-kb--in {
  animation: saga-kb-in 46s ease-in-out infinite alternate;
}
.saga-kb--right {
  animation: saga-kb-right 52s ease-in-out infinite alternate;
}
.saga-kb--left {
  animation: saga-kb-left 58s ease-in-out infinite alternate;
}
@keyframes saga-kb-in {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.09);
  }
}
@keyframes saga-kb-right {
  from {
    transform: scale(1.08) translateX(-1.6%);
  }
  to {
    transform: scale(1.08) translateX(1.6%);
  }
}
@keyframes saga-kb-left {
  from {
    transform: scale(1.08) translateX(1.6%);
  }
  to {
    transform: scale(1.08) translateX(-1.6%);
  }
}
.saga-band-content--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .saga-band-content--split {
    grid-template-columns: minmax(0, 30rem) 1fr;
  }
}
.saga-band-content--split > * {
  max-width: none;
}
.saga-band-content--split .saga-band-body, .saga-band-content--split .saga-kicker, .saga-band-content--split .saga-band-title {
  max-width: 30rem;
}
.saga-frame {
  justify-self: center;
  width: 100%;
  max-width: 42rem;
  transform: rotate(0.7deg);
  border: 3px solid #2e2a22;
  outline: 1px solid rgba(230, 178, 46, 0.55);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 40px rgba(230, 178, 46, 0.1);
  background: #000;
  transition: transform 0.4s;
}
.saga-frame:hover {
  transform: rotate(0deg) scale(1.015);
}
.saga-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.saga-frame figcaption {
  padding: 0.55rem 0.8rem;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8d8574;
  text-align: center;
}
.saga-denizens {
  padding: 4rem 0 4.5rem;
  background: #0b0b11;
}
.saga-denizen {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid rgba(230, 178, 46, 0.25);
  background: #14141c;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.saga-denizen:hover {
  transform: translateY(-6px);
  border-color: rgba(230, 178, 46, 0.7);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65), 0 0 30px rgba(230, 178, 46, 0.12);
}
.saga-denizen img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
  filter: saturate(0.85) contrast(1.05);
  transition: filter 0.35s, transform 0.6s;
}
.saga-denizen:hover img {
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.04);
}
.saga-denizen img[src*="dockmaster-corren"] {
  filter: saturate(0.8) contrast(1.05) brightness(0.7) sepia(0.12);
}
.saga-denizen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.55);
}
.saga-denizen-plate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 2.6rem 1rem 0.85rem;
  text-align: center;
  background: linear-gradient(180deg, transparent, rgba(8, 6, 4, 0.85) 42%, #0d0b08 100%);
}
.saga-denizen-name {
  display: block;
  font-family: var(--sg-font-gothic);
  font-weight: 800;
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f4ecdd;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}
.saga-denizen-role {
  display: block;
  font-family: var(--sg-font-serif);
  font-style: italic;
  font-size: 0.72rem;
  color: var(--lp-gold-soft);
  margin-top: 0.15rem;
}
.saga-hero .lp-embers, .saga-cta .lp-embers {
  z-index: 1;
}
.saga-band-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
}
.saga-band-content > * {
  max-width: 30rem;
}
.saga-band--flip .saga-band-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.saga-band-title {
  font-family: var(--sg-font-gothic);
  font-weight: 900;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1.12;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  margin-top: 0.6rem;
}
.saga-band-body {
  font-size: 0.95rem;
  line-height: 1.75;
  color: #ddd5c4;
  margin: 1rem 0 1.6rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.saga-band-aside {
  margin-top: 1rem;
}
.saga-text-link {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c9bfa8;
  transition: color 0.2s;
}
.saga-text-link:hover {
  color: var(--lp-gold);
}
.saga-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.2rem;
  justify-content: inherit;
}
.saga-band--flip .saga-chips {
  justify-content: flex-end;
}
.saga-chip {
  font-family: var(--sg-font-gothic);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d8cdb4;
  white-space: nowrap;
}
.saga-chip::before {
  content: "◆ ";
  color: var(--lp-gold-soft);
  font-size: 0.55rem;
}
.saga-news {
  padding: 4rem 0 4.5rem;
  background: #0d0d13;
}
.saga-section-title {
  font-family: var(--sg-font-gothic);
  font-weight: 900;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: #fff;
}
.saga-more-link {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-gold);
}
.saga-more-link:hover {
  text-decoration: underline;
}
.saga-card {
  display: block;
  background: #14141c;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 5px;
  overflow: hidden;
  transition: transform 0.25s, border-color 0.25s;
}
.saga-card:hover {
  transform: translateY(-4px);
  border-color: rgba(230, 178, 46, 0.55);
}
.saga-card-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.saga-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transform: scale(1.55);
  transform-origin: 42% 30%;
  transition: transform 0.4s;
}
.saga-card-media img[src*="shot-immersion"] {
  transform-origin: 44% 62%;
}
.saga-card-media img[src*="shot-ui"] {
  transform-origin: 46% 60%;
}
.saga-card:hover .saga-card-media img {
  transform: scale(1.62);
}
.saga-card-body {
  padding: 1.1rem 1.2rem 1.3rem;
}
.saga-card-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #241703;
  background: var(--lp-gold);
  border-radius: 2px;
  padding: 0.18rem 0.5rem;
}
.saga-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #f4ecdd;
  margin-top: 0.6rem;
  line-height: 1.35;
}
.saga-card-meta {
  font-size: 11px;
  color: #8d8574;
  margin-top: 0.45rem;
}
.saga-cta {
  position: relative;
  min-height: 26rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.saga-cta-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0a0a0e, transparent 30%, transparent 72%, #000 100%), rgba(6, 6, 10, 0.66);
}
.saga-cta .saga-hero-note {
  font-size: 11px;
  margin-top: 1rem;
  color: #c9bfa8;
}
.saga-cta-content {
  position: relative;
  z-index: 2;
  padding: 4rem 1.5rem;
  max-width: 38rem;
}
.saga-cta .saga-band-body {
  margin-bottom: 0;
}
.saga-footer {
  background: #000;
  padding: 3rem 0 3.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.saga-footer-brand {
  font-family: var(--sg-font-gothic);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f4ecdd;
  margin-top: 0.5rem;
}
.saga-footer-link {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8d8574;
  transition: color 0.2s;
}
.saga-footer-link:hover {
  color: var(--lp-gold);
}
.saga-footer-legal {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #5d5749;
}
.saga-subpage {
  padding-top: 1rem;
}
@media (max-width: 767px) {
  .saga-band {
    min-height: 26rem;
    max-height: none;
  }
  .saga-band-scrim, .saga-band--flip .saga-band-scrim {
    background: rgba(7, 7, 11, 0.8);
  }
  .saga-band--flip .saga-band-content {
    align-items: flex-start;
    text-align: left;
  }
  .saga-band--flip .saga-chips {
    justify-content: flex-start;
  }
  .saga-chips {
    flex-wrap: wrap;
    gap: 0.5rem 1.1rem;
  }
  .saga-hero {
    min-height: 72vh;
  }
  .saga-hero-content {
    padding-bottom: 4rem;
  }
}
.site-switch {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.5rem;
  background: #0a0a0a;
  border: 1px solid rgba(230, 178, 46, 0.3);
  border-left: none;
  border-bottom: none;
}
.site-switch:not(:hover):not(:focus-within) .site-switch-label {
  color: #55503f;
}
.site-switch:not(:hover):not(:focus-within) .site-switch-btn {
  color: #6f6653;
  border-color: rgba(230, 178, 46, 0.12);
  background: transparent;
}
.site-switch:not(:hover):not(:focus-within) .site-switch-btn--active, .site-switch:not(:hover):not(:focus-within) .site-switch-btn:disabled {
  background: #5c4712;
  color: #c9b06a;
  border-color: #5c4712;
}
.site-switch-label {
  font-family: 'Cinzel', serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #a19785;
  padding-left: 0.15rem;
}
.site-switch-btn {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  color: #b8ac95;
  border: 1px solid rgba(230, 178, 46, 0.25);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.site-switch-btn:hover {
  color: #f4ecdd;
  border-color: rgba(230, 178, 46, 0.6);
}
.site-switch-btn--active, .site-switch-btn:disabled {
  background: #e6b22e;
  color: #1a1204;
  border-color: #f2dda0;
  cursor: default;
}
@media (max-width: 640px) {
  .site-switch {
    bottom: 0.5rem;
    left: 0.5rem;
    padding: 0.25rem 0.4rem;
  }
  .site-switch-label {
    display: none;
  }
}
#admin-root {
  --abg: #211e19;
  --asf: #2a2620;
  --ael: #342f27;
  --ab: #4d4231;
  --ab2: #6b5838;
  --at1: #ece1cd;
  --at2: #b3a78d;
  --at3: #7d715a;
  --agd: #cda64a;
  --agd2: #8c6d28;
  --acr: #8a1a1a;
  --acr2: #aa2828;
  --agr: #3f7d3c;
  --abl: #4a6a9a;
  background-image: radial-gradient(ellipse 130% 70% at 50% -15%, rgba(205, 166, 74, 0.07), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0%, transparent 30%, rgba(0, 0, 0, 0.28) 100%);
  background-attachment: fixed;
}
[data-admin-theme="light"] #admin-root {
  --abg: #ece8de;
  --asf: #f8f4ed;
  --ael: #ffffff;
  --ab: #d8cfbe;
  --ab2: #c4b8a4;
  --at1: #18130e;
  --at2: #524638;
  --at3: #8a7868;
  --agd: #7a5e08;
  --agd2: #a07820;
  --acr: #7a1515;
  --acr2: #9a2020;
  --agr: #1a6030;
  --abl: #1a3878;
  background-image: radial-gradient(ellipse 130% 70% at 50% -15%, rgba(122, 94, 8, 0.05), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, transparent 35%, rgba(120, 100, 70, 0.10) 100%);
  background-attachment: fixed;
}
.admin-dark-icon, .admin-dark-label {
  display: inline;
}
.admin-light-icon, .admin-light-label {
  display: none;
}
[data-admin-theme="light"] .admin-dark-icon, [data-admin-theme="light"] .admin-dark-label {
  display: none;
}
[data-admin-theme="light"] .admin-light-icon, [data-admin-theme="light"] .admin-light-label {
  display: inline;
}
.admin-frame {
  position: relative;
}
.admin-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  --fc: var(--agd);
  --fl: 12px;
  --ft: 1.5px;
  background: linear-gradient(var(--fc), var(--fc)) top left / var(--fl) var(--ft) no-repeat, linear-gradient(var(--fc), var(--fc)) top left / var(--ft) var(--fl) no-repeat, linear-gradient(var(--fc), var(--fc)) top right / var(--fl) var(--ft) no-repeat, linear-gradient(var(--fc), var(--fc)) top right / var(--ft) var(--fl) no-repeat, linear-gradient(var(--fc), var(--fc)) bottom left / var(--fl) var(--ft) no-repeat, linear-gradient(var(--fc), var(--fc)) bottom left / var(--ft) var(--fl) no-repeat, linear-gradient(var(--fc), var(--fc)) bottom right / var(--fl) var(--ft) no-repeat, linear-gradient(var(--fc), var(--fc)) bottom right / var(--ft) var(--fl) no-repeat;
  filter: drop-shadow(0 0 1px rgba(205, 166, 74, 0.35));
  opacity: 0.85;
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.admin-frame:hover::after {
  opacity: 1;
  filter: drop-shadow(0 0 3px rgba(205, 166, 74, 0.5));
}
.admin-frame-lg::after {
  --fl: 18px;
  --ft: 2px;
}
.admin-frame-sm::after {
  --fl: 8px;
  --ft: 1px;
  opacity: 0.7;
}
[class^="hero-"], [class*=" hero-"] {
  display: inline-block;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: var(--ico) no-repeat center / contain;
  mask: var(--ico) no-repeat center / contain;
}
.hero-arrow-left-circle {
  --ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1zbG90PSJpY29uIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Im0xMS4yNSA5LTMgM20wIDAgMyAzbS0zLTNoNy41TTIxIDEyYTkgOSAwIDEgMS0xOCAwIDkgOSAwIDAgMSAxOCAwWiIvPgo8L3N2Zz4K");
}
.hero-arrow-path {
  --ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1zbG90PSJpY29uIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0xNi4wMjMgOS4zNDhoNC45OTJ2LS4wMDFNMi45ODUgMTkuNjQ0di00Ljk5Mm0wIDBoNC45OTJtLTQuOTkzIDAgMy4xODEgMy4xODNhOC4yNSA4LjI1IDAgMCAwIDEzLjgwMy0zLjdNNC4wMzEgOS44NjVhOC4yNSA4LjI1IDAgMCAxIDEzLjgwMy0zLjdsMy4xODEgMy4xODJtMC00Ljk5MXY0Ljk5Ii8+Cjwvc3ZnPgo=");
}
.hero-arrow-right-circle {
  --ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1zbG90PSJpY29uIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Im0xMi43NSAxNSAzLTNtMCAwLTMtM20zIDNoLTcuNU0yMSAxMmE5IDkgMCAxIDEtMTggMCA5IDkgMCAwIDEgMTggMFoiLz4KPC9zdmc+Cg==");
}
.hero-arrows-right-left {
  --ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1zbG90PSJpY29uIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik03LjUgMjEgMyAxNi41bTAgMEw3LjUgMTJNMyAxNi41aDEzLjVtMC0xMy41TDIxIDcuNW0wIDBMMTYuNSAxMk0yMSA3LjVINy41Ii8+Cjwvc3ZnPgo=");
}
.hero-beaker {
  --ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1zbG90PSJpY29uIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik05Ljc1IDMuMTA0djUuNzE0YTIuMjUgMi4yNSAwIDAgMS0uNjU5IDEuNTkxTDUgMTQuNU05Ljc1IDMuMTA0Yy0uMjUxLjAyMy0uNTAxLjA1LS43NS4wODJtLjc1LS4wODJhMjQuMzAxIDI0LjMwMSAwIDAgMSA0LjUgMG0wIDB2NS43MTRjMCAuNTk3LjIzNyAxLjE3LjY1OSAxLjU5MUwxOS44IDE1LjNNMTQuMjUgMy4xMDRjLjI1MS4wMjMuNTAxLjA1Ljc1LjA4Mk0xOS44IDE1LjNsLTEuNTcuMzkzQTkuMDY1IDkuMDY1IDAgMCAxIDEyIDE1YTkuMDY1IDkuMDY1IDAgMCAwLTYuMjMtLjY5M0w1IDE0LjVtMTQuOC44IDEuNDAyIDEuNDAyYzEuMjMyIDEuMjMyLjY1IDMuMzE4LTEuMDY3IDMuNjExQTQ4LjMwOSA0OC4zMDkgMCAwIDEgMTIgMjFjLTIuNzczIDAtNS40OTEtLjIzNS04LjEzNS0uNjg3LTEuNzE4LS4yOTMtMi4zLTIuMzc5LTEuMDY3LTMuNjFMNSAxNC41Ii8+Cjwvc3ZnPgo=");
}
.hero-exclamation-circle {
  --ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1zbG90PSJpY29uIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0xMiA5djMuNzVtOS0uNzVhOSA5IDAgMSAxLTE4IDAgOSA5IDAgMCAxIDE4IDBabS05IDMuNzVoLjAwOHYuMDA4SDEydi0uMDA4WiIvPgo8L3N2Zz4K");
}
.hero-exclamation-triangle {
  --ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1zbG90PSJpY29uIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0xMiA5djMuNzVtLTkuMzAzIDMuMzc2Yy0uODY2IDEuNS4yMTcgMy4zNzQgMS45NDggMy4zNzRoMTQuNzFjMS43MyAwIDIuODEzLTEuODc0IDEuOTQ4LTMuMzc0TDEzLjk0OSAzLjM3OGMtLjg2Ni0xLjUtMy4wMzItMS41LTMuODk4IDBMMi42OTcgMTYuMTI2Wk0xMiAxNS43NWguMDA3di4wMDhIMTJ2LS4wMDhaIi8+Cjwvc3ZnPgo=");
}
.hero-folder {
  --ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1zbG90PSJpY29uIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0yLjI1IDEyLjc1VjEyQTIuMjUgMi4yNSAwIDAgMSA0LjUgOS43NWgxNUEyLjI1IDIuMjUgMCAwIDEgMjEuNzUgMTJ2Ljc1bS04LjY5LTYuNDQtMi4xMi0yLjEyYTEuNSAxLjUgMCAwIDAtMS4wNjEtLjQ0SDQuNUEyLjI1IDIuMjUgMCAwIDAgMi4yNSA2djEyYTIuMjUgMi4yNSAwIDAgMCAyLjI1IDIuMjVoMTVBMi4yNSAyLjI1IDAgMCAwIDIxLjc1IDE4VjlhMi4yNSAyLjI1IDAgMCAwLTIuMjUtMi4yNWgtNS4zNzlhMS41IDEuNSAwIDAgMS0xLjA2LS40NFoiLz4KPC9zdmc+Cg==");
}
.hero-folder-open {
  --ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1zbG90PSJpY29uIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0zLjc1IDkuNzc2Yy4xMTItLjAxNy4yMjctLjAyNi4zNDQtLjAyNmgxNS44MTJjLjExNyAwIC4yMzIuMDA5LjM0NC4wMjZtLTE2LjUgMGEyLjI1IDIuMjUgMCAwIDAtMS44ODMgMi41NDJsLjg1NyA2YTIuMjUgMi4yNSAwIDAgMCAyLjIyNyAxLjkzMkgxOS4wNWEyLjI1IDIuMjUgMCAwIDAgMi4yMjctMS45MzJsLjg1Ny02YTIuMjUgMi4yNSAwIDAgMC0xLjg4My0yLjU0Mm0tMTYuNSAwVjZBMi4yNSAyLjI1IDAgMCAxIDYgMy43NWgzLjg3OWExLjUgMS41IDAgMCAxIDEuMDYuNDRsMi4xMjIgMi4xMmExLjUgMS41IDAgMCAwIDEuMDYuNDRIMThBMi4yNSAyLjI1IDAgMCAxIDIwLjI1IDl2Ljc3NiIvPgo8L3N2Zz4K");
}
.hero-information-circle {
  --ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1zbG90PSJpY29uIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Im0xMS4yNSAxMS4yNS4wNDEtLjAyYS43NS43NSAwIDAgMSAxLjA2My44NTJsLS43MDggMi44MzZhLjc1Ljc1IDAgMCAwIDEuMDYzLjg1M2wuMDQxLS4wMjFNMjEgMTJhOSA5IDAgMSAxLTE4IDAgOSA5IDAgMCAxIDE4IDBabS05LTMuNzVoLjAwOHYuMDA4SDEyVjguMjVaIi8+Cjwvc3ZnPgo=");
}
.hero-map {
  --ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1zbG90PSJpY29uIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik05IDYuNzVWMTVtNi02djguMjVtLjUwMyAzLjQ5OCA0Ljg3NS0yLjQzN2MuMzgxLS4xOS42MjItLjU4LjYyMi0xLjAwNlY0LjgyYzAtLjgzNi0uODgtMS4zOC0xLjYyOC0xLjAwNmwtMy44NjkgMS45MzRjLS4zMTcuMTU5LS42OS4xNTktMS4wMDYgMEw5LjUwMyAzLjI1MmExLjEyNSAxLjEyNSAwIDAgMC0xLjAwNiAwTDMuNjIyIDUuNjg5QzMuMjQgNS44OCAzIDYuMjcgMyA2LjY5NVYxOS4xOGMwIC44MzYuODggMS4zOCAxLjYyOCAxLjAwNmwzLjg2OS0xLjkzNGMuMzE3LS4xNTkuNjktLjE1OSAxLjAwNiAwbDQuOTk0IDIuNDk3Yy4zMTcuMTU4LjY5LjE1OCAxLjAwNiAwWiIvPgo8L3N2Zz4K");
}
.hero-photo {
  --ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1zbG90PSJpY29uIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Im0yLjI1IDE1Ljc1IDUuMTU5LTUuMTU5YTIuMjUgMi4yNSAwIDAgMSAzLjE4MiAwbDUuMTU5IDUuMTU5bS0xLjUtMS41IDEuNDA5LTEuNDA5YTIuMjUgMi4yNSAwIDAgMSAzLjE4MiAwbDIuOTA5IDIuOTA5bS0xOCAzLjc1aDE2LjVhMS41IDEuNSAwIDAgMCAxLjUtMS41VjZhMS41IDEuNSAwIDAgMC0xLjUtMS41SDMuNzVBMS41IDEuNSAwIDAgMCAyLjI1IDZ2MTJhMS41IDEuNSAwIDAgMCAxLjUgMS41Wm0xMC41LTExLjI1aC4wMDh2LjAwOGgtLjAwOFY4LjI1Wm0uMzc1IDBhLjM3NS4zNzUgMCAxIDEtLjc1IDAgLjM3NS4zNzUgMCAwIDEgLjc1IDBaIi8+Cjwvc3ZnPgo=");
}
.hero-plus {
  --ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1zbG90PSJpY29uIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0xMiA0LjV2MTVtNy41LTcuNWgtMTUiLz4KPC9zdmc+Cg==");
}
.hero-trash {
  --ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1zbG90PSJpY29uIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Im0xNC43NCA5LS4zNDYgOW0tNC43ODggMEw5LjI2IDltOS45NjgtMy4yMWMuMzQyLjA1Mi42ODIuMTA3IDEuMDIyLjE2Nm0tMS4wMjItLjE2NUwxOC4xNiAxOS42NzNhMi4yNSAyLjI1IDAgMCAxLTIuMjQ0IDIuMDc3SDguMDg0YTIuMjUgMi4yNSAwIDAgMS0yLjI0NC0yLjA3N0w0Ljc3MiA1Ljc5bTE0LjQ1NiAwYTQ4LjEwOCA0OC4xMDggMCAwIDAtMy40NzgtLjM5N20tMTIgLjU2MmMuMzQtLjA1OS42OC0uMTE0IDEuMDIyLS4xNjVtMCAwYTQ4LjExIDQ4LjExIDAgMCAxIDMuNDc4LS4zOTdtNy41IDB2LS45MTZjMC0xLjE4LS45MS0yLjE2NC0yLjA5LTIuMjAxYTUxLjk2NCA1MS45NjQgMCAwIDAtMy4zMiAwYy0xLjE4LjAzNy0yLjA5IDEuMDIyLTIuMDkgMi4yMDF2LjkxNm03LjUgMGE0OC42NjcgNDguNjY3IDAgMCAwLTcuNSAwIi8+Cjwvc3ZnPgo=");
}
.hero-users {
  --ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1zbG90PSJpY29uIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0xNSAxOS4xMjhhOS4zOCA5LjM4IDAgMCAwIDIuNjI1LjM3MiA5LjMzNyA5LjMzNyAwIDAgMCA0LjEyMS0uOTUyIDQuMTI1IDQuMTI1IDAgMCAwLTcuNTMzLTIuNDkzTTE1IDE5LjEyOHYtLjAwM2MwLTEuMTEzLS4yODUtMi4xNi0uNzg2LTMuMDdNMTUgMTkuMTI4di4xMDZBMTIuMzE4IDEyLjMxOCAwIDAgMSA4LjYyNCAyMWMtMi4zMzEgMC00LjUxMi0uNjQ1LTYuMzc0LTEuNzY2bC0uMDAxLS4xMDlhNi4zNzUgNi4zNzUgMCAwIDEgMTEuOTY0LTMuMDdNMTIgNi4zNzVhMy4zNzUgMy4zNzUgMCAxIDEtNi43NSAwIDMuMzc1IDMuMzc1IDAgMCAxIDYuNzUgMFptOC4yNSAyLjI1YTIuNjI1IDIuNjI1IDAgMSAxLTUuMjUgMCAyLjYyNSAyLjYyNSAwIDAgMSA1LjI1IDBaIi8+Cjwvc3ZnPgo=");
}
.hero-x-mark {
  --ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1zbG90PSJpY29uIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik02IDE4IDE4IDZNNiA2bDEyIDEyIi8+Cjwvc3ZnPgo=");
}
.hero-computer-desktop-micro {
  --ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iY3VycmVudENvbG9yIiBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1zbG90PSJpY29uIj4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yIDQuMjVBMi4yNSAyLjI1IDAgMCAxIDQuMjUgMmg3LjVBMi4yNSAyLjI1IDAgMCAxIDE0IDQuMjV2NS41QTIuMjUgMi4yNSAwIDAgMSAxMS43NSAxMmgtMS4zMTJjLjEuMTI4LjIxLjI0OC4zMjguMzZhLjc1Ljc1IDAgMCAxIC4yMzQuNTQ1di4zNDVhLjc1Ljc1IDAgMCAxLS43NS43NWgtNC41YS43NS43NSAwIDAgMS0uNzUtLjc1di0uMzQ1YS43NS43NSAwIDAgMSAuMjM0LS41NDVjLjExOC0uMTExLjIyOC0uMjMyLjMyOC0uMzZINC4yNUEyLjI1IDIuMjUgMCAwIDEgMiA5Ljc1di01LjVabTIuMjUtLjc1YS43NS43NSAwIDAgMC0uNzUuNzV2NC41YzAgLjQxNC4zMzYuNzUuNzUuNzVoNy41YS43NS43NSAwIDAgMCAuNzUtLjc1di00LjVhLjc1Ljc1IDAgMCAwLS43NS0uNzVoLTcuNVoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPgo8L3N2Zz4K");
}
.hero-moon-micro {
  --ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iY3VycmVudENvbG9yIiBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1zbG90PSJpY29uIj4KICA8cGF0aCBkPSJNMTQuNDM4IDEwLjE0OGMuMTktLjQyNS0uMzIxLS43ODctLjc0OC0uNjAxQTUuNSA1LjUgMCAwIDEgNi40NTMgMi4zMWMuMTg2LS40MjctLjE3Ni0uOTM4LS42LS43NDhhNi41MDEgNi41MDEgMCAxIDAgOC41ODUgOC41ODZaIi8+Cjwvc3ZnPgo=");
}
.hero-sun-micro {
  --ico: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iY3VycmVudENvbG9yIiBhcmlhLWhpZGRlbj0idHJ1ZSIgZGF0YS1zbG90PSJpY29uIj4KICA8cGF0aCBkPSJNOCAxYS43NS43NSAwIDAgMSAuNzUuNzV2MS41YS43NS43NSAwIDAgMS0xLjUgMHYtMS41QS43NS43NSAwIDAgMSA4IDFaTTEwLjUgOGEyLjUgMi41IDAgMSAxLTUgMCAyLjUgMi41IDAgMCAxIDUgMFpNMTIuOTUgNC4xMWEuNzUuNzUgMCAxIDAtMS4wNi0xLjA2bC0xLjA2MiAxLjA2YS43NS43NSAwIDAgMCAxLjA2MSAxLjA2MmwxLjA2LTEuMDYxWk0xNSA4YS43NS43NSAwIDAgMS0uNzUuNzVoLTEuNWEuNzUuNzUgMCAwIDEgMC0xLjVoMS41QS43NS43NSAwIDAgMSAxNSA4Wk0xMS44OSAxMi45NWEuNzUuNzUgMCAwIDAgMS4wNi0xLjA2bC0xLjA2LTEuMDYyYS43NS43NSAwIDAgMC0xLjA2MiAxLjA2MWwxLjA2MSAxLjA2Wk04IDEyYS43NS43NSAwIDAgMSAuNzUuNzV2MS41YS43NS43NSAwIDAgMS0xLjUgMHYtMS41QS43NS43NSAwIDAgMSA4IDEyWk01LjE3MiAxMS44OWEuNzUuNzUgMCAwIDAtMS4wNjEtMS4wNjJMMy4wNSAxMS44OWEuNzUuNzUgMCAxIDAgMS4wNiAxLjA2bDEuMDYtMS4wNlpNNCA4YS43NS43NSAwIDAgMS0uNzUuNzVoLTEuNWEuNzUuNzUgMCAwIDEgMC0xLjVoMS41QS43NS43NSAwIDAgMSA0IDhaTTQuMTEgNS4xNzJBLjc1Ljc1IDAgMCAwIDUuMTczIDQuMTFMNC4xMSAzLjA1YS43NS43NSAwIDEgMC0xLjA2IDEuMDZsMS4wNiAxLjA2WiIvPgo8L3N2Zz4K");
}
.cl {
  transform-box: view-box;
  transform-origin: 120px 120px;
}
@keyframes csCW {
  to {
    transform: rotate(360deg);
  }
}
@keyframes csCCW {
  to {
    transform: rotate(-360deg);
  }
}
@keyframes csWave {
  0% {
    transform: scale(0.92) rotate(-3deg);
  }
  100% {
    transform: scale(1.08) rotate(3deg);
  }
}
[data-chip-spin="off"] .cl, html[data-perf-low] .cl {
  animation: none !important;
}
.chip-spin-off-icon {
  display: none;
}
.chip-spin-on-icon {
  display: inline;
}
[data-chip-spin="off"] .chip-spin-on-icon {
  display: none;
}
[data-chip-spin="off"] .chip-spin-off-icon {
  display: inline;
}
body {
  touch-action: manipulation;
  background-color: #131115;
}
@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}
@keyframes trash-vibrate {
  0% {
    transform: translate(0);
  }
  25% {
    transform: translate(2px, 2px);
  }
  50% {
    transform: translate(-2px, -2px);
  }
  75% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0);
  }
}
.animate-shake {
  animation: shake 0.3s;
  animation-iteration-count: 1;
}
@keyframes float-damage {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.8);
  }
  12% {
    opacity: 1;
    transform: translate(calc(-50% + var(--dmg-x, 0px) * 0.12), calc(var(--dmg-y, -120px) * 0.12)) scale(1);
  }
  70% {
    opacity: 1;
    transform: translate(calc(-50% + var(--dmg-x, 0px) * 0.70), calc(var(--dmg-y, -120px) * 0.70)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dmg-x, 0px)), var(--dmg-y, -120px)) scale(1);
  }
}
.bf-fx-layer {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 50;
}
.floating-dmg {
  position: absolute;
  top: -0.25rem;
  left: 50%;
  z-index: 50;
  pointer-events: none;
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #ffffff;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.85);
  text-shadow: 0 2px 3px #000, 0 0 8px rgba(0, 0, 0, 0.9);
  font-variant-numeric: tabular-nums;
  animation: float-damage 2s linear forwards;
}
.floating-dmg--physical, .floating-dmg--hit {
  color: #ffffff;
}
.floating-dmg--crit {
  font-size: 2.2rem;
  color: #fde047;
  text-shadow: 0 2px 3px #000, 0 0 12px rgba(250, 204, 21, 0.95), 0 0 22px rgba(250, 204, 21, 0.6);
}
.floating-dmg--magical {
  color: #c084fc;
  text-shadow: 0 2px 3px #000, 0 0 10px rgba(168, 85, 247, 0.85);
}
.floating-dmg--poison {
  color: #4ade80;
  text-shadow: 0 2px 3px #000, 0 0 10px rgba(34, 197, 94, 0.8);
}
.floating-dmg--fire {
  color: #fb923c;
  text-shadow: 0 2px 3px #000, 0 0 10px rgba(249, 115, 22, 0.85);
}
.floating-dmg--water {
  color: #56b6ff;
  text-shadow: 0 2px 3px #000, 0 0 10px rgba(56, 150, 255, 0.85);
}
.floating-dmg--air {
  color: #eaf2ff;
  text-shadow: 0 2px 3px #000, 0 0 11px rgba(186, 230, 255, 0.95), 0 0 22px rgba(140, 200, 255, 0.7);
}
.floating-dmg--earth {
  color: #c79a5b;
  text-shadow: 0 2px 3px #000, 0 0 10px rgba(180, 130, 60, 0.85);
}
.floating-dmg--life {
  color: #f5d36b;
  text-shadow: 0 2px 3px #000, 0 0 12px rgba(245, 200, 80, 0.95), 0 0 22px rgba(230, 170, 40, 0.65);
}
.floating-dmg--death {
  color: #86efac;
  text-shadow: 0 2px 3px #000, 0 0 12px rgba(74, 222, 128, 0.95), 0 0 22px rgba(34, 197, 94, 0.7);
}
.floating-dmg--bleed {
  color: #ef4444;
  text-shadow: 0 2px 3px #000, 0 0 10px rgba(220, 38, 38, 0.9);
}
.floating-dmg--immune {
  color: #cbd5e1;
  font-size: 1rem;
  font-weight: 700;
  font-style: italic;
  text-shadow: 0 2px 3px #000, 0 0 8px rgba(148, 163, 184, 0.7);
}
.floating-dmg--heal {
  color: #34d399;
  text-shadow: 0 2px 3px #000, 0 0 11px rgba(16, 185, 129, 0.9);
}
.floating-dmg--loot {
  font-size: 1.5rem;
  color: #ffe08a;
  text-shadow: 0 2px 3px #000, 0 0 10px rgba(255, 215, 90, 0.95), 0 0 24px rgba(230, 178, 46, 0.75);
}
@keyframes bounce-slow {
  0%, 100% {
    transform: translateY(-5%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}
.animate-bounce-slow {
  animation: bounce-slow 3s infinite;
}
@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.animate-spin-slow {
  animation: spin-slow 8s linear infinite;
}
@keyframes scale-up {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.animate-scale-up {
  animation: scale-up 0.3s ease-out forwards;
}
.animate-trash-ready {
  animation: trash-vibrate 0.1s infinite;
  background-color: rgba(220, 38, 38, 0.8) !important;
  border-color: #ff0000 !important;
  box-shadow: 0 0 15px #ff0000;
  color: white !important;
}
[phx-hook="InventorySlot"], [phx-hook="TrashBin"], [phx-hook="EquipmentSlot"], [phx-hook="EquipmentItem"] {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
:root {
  --color-abyss: var(--sg-abyss);
  --color-shadow: var(--sg-shadow);
  --color-stone: var(--sg-stone);
  --color-tarnished: var(--sg-tarnished);
  --color-iron: var(--sg-iron);
  --color-blood: var(--sg-blood);
  --color-bright-blood: var(--sg-bright-blood);
  --color-sulfur: var(--sg-sulfur);
  --color-amber: var(--sg-amber);
  --color-teal-glow: var(--sg-teal-glow);
  --color-toxic-green: var(--sg-toxic-green);
  --color-parchment: var(--sg-parchment);
  --color-dim-parchment: var(--sg-dim-parchment);
  --font-gothic: var(--sg-font-gothic);
  --font-serif: var(--sg-font-serif);
  --font-ui: var(--sg-font-ui);
}
.gothic-header {
  font-family: var(--font-gothic);
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}
.gilt-text {
  background: linear-gradient(180deg, #f6e3b0 15%, #e6b22e 55%, #9c7418 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 12px rgba(230, 178, 46, 0.28)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.9));
}
.stone-panel {
  background: radial-gradient(ellipse at 50% -8%, rgba(120, 84, 40, 0.14), transparent 55%), rgba(24, 21, 26, 0.88);
  border: 1px solid #5c4a30;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.8), 0 0 18px rgba(230, 178, 46, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.stone-panel::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(230, 178, 46, 0.10);
  pointer-events: none;
}
.iron-button {
  font-family: var(--font-gothic);
  text-transform: uppercase;
  font-weight: 700;
  background: linear-gradient(to bottom, var(--color-iron), var(--color-stone));
  border: 2px solid #111 !important;
  border-top-color: var(--color-tarnished) !important;
  border-left-color: var(--color-tarnished) !important;
  text-shadow: 1px 1px 2px #000;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
  transition: all 0.15s ease;
  cursor: pointer;
}
.iron-button:hover:not(:disabled) {
  background: linear-gradient(to bottom, var(--color-tarnished), var(--color-iron));
  color: #fff !important;
  box-shadow: 0 0 8px rgba(230, 178, 46, 0.3);
}
.iron-button:active:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.9);
  border-top-color: #111 !important;
  border-left-color: #111 !important;
}
.iron-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 5px;
}
.inv-tabs {
  flex-wrap: wrap;
}
.inv-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 34px;
  height: 26px;
  font-size: 12px;
  border-radius: 5px;
  color: var(--sg-win-btn-ink, #b8a888);
  background: var(--sg-win-btn-bg, rgba(0, 0, 0, 0.35));
  border: 1px solid var(--sg-win-btn-border, rgba(92, 74, 48, 0.4));
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}
.inv-tab:hover {
  color: var(--sg-win-btn-hover-ink, #f0d9a0);
  background: var(--sg-win-btn-hover-bg, rgba(0, 0, 0, 0.5));
  border-color: var(--sg-win-btn-hover-border, var(--sg-win-gem, #e6b22e));
}
.inv-tab--mark {
  flex: 0 0 auto;
  width: 28px;
  font-size: 11px;
}
.inv-tab--active {
  color: var(--sg-win-title-ink, #f0d9a0);
  background: var(--sg-win-titlebar, rgba(20, 16, 10, 0.7));
  border-color: var(--sg-win-gem, #e6b22e);
  box-shadow: 0 0 6px var(--sg-win-gem, #e6b22e);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 6px color-mix(in srgb, var(--sg-win-gem, #e6b22e) 45%, transparent);
  }
}
.inv-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sg-font-ui, sans-serif);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 4px 9px;
  border-radius: 5px;
  color: var(--sg-win-btn-ink, #b8a888);
  background: var(--sg-win-btn-bg, rgba(0, 0, 0, 0.35));
  border: 1px solid var(--sg-win-btn-border, rgba(92, 74, 48, 0.4));
  transition: all 0.15s ease;
  cursor: pointer;
}
.inv-btn:hover:not(:disabled) {
  color: var(--sg-win-btn-hover-ink, #f0d9a0);
  background: var(--sg-win-btn-hover-bg, rgba(0, 0, 0, 0.5));
  border-color: var(--sg-win-btn-hover-border, var(--sg-win-gem, #e6b22e));
}
.inv-btn:active:not(:disabled) {
  transform: translateY(1px);
}
.inv-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.inv-btn--on {
  color: var(--sg-win-title-ink, #f0d9a0);
  background: var(--sg-win-titlebar, rgba(20, 16, 10, 0.7));
  border-color: var(--sg-win-gem, #e6b22e);
  box-shadow: 0 0 6px var(--sg-win-gem, #e6b22e);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 6px color-mix(in srgb, var(--sg-win-gem, #e6b22e) 45%, transparent);
  }
}
.inv-btn--gold {
  color: var(--sg-win-gem, #e6b22e);
}
.inv-btn--danger {
  color: #e2807f;
}
.inv-btn--danger:hover:not(:disabled) {
  color: #fca5a5;
  border-color: #b04444;
  background: rgba(180, 45, 45, 0.18);
}
.inv-btn--positive {
  color: #8cc99a;
}
.inv-btn--positive:hover:not(:disabled) {
  color: #bdecc8;
  border-color: #4f9a6a;
  background: rgba(45, 140, 90, 0.16);
}
.inv-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9px;
  color: var(--sg-win-ink, #cdbb98);
  background: var(--sg-win-btn-bg, rgba(0, 0, 0, 0.35));
  border: 1px solid var(--sg-win-btn-border, rgba(92, 74, 48, 0.4));
  transition: all 0.12s ease;
  cursor: pointer;
}
.inv-chip:hover {
  color: var(--sg-win-btn-hover-ink, #f0d9a0);
  border-color: var(--sg-win-gem, #e6b22e);
}
.inv-search {
  width: 100%;
  background: var(--sg-win-btn-bg, rgba(0, 0, 0, 0.5));
  border: 1px solid var(--sg-win-btn-border, rgba(92, 74, 48, 0.4));
  border-radius: 5px;
  color: var(--sg-win-ink, #cdbb98);
}
.inv-search:focus {
  outline: none;
  border-color: var(--sg-win-gem, #e6b22e);
  box-shadow: 0 0 5px var(--sg-win-gem, #e6b22e);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 5px color-mix(in srgb, var(--sg-win-gem, #e6b22e) 35%, transparent);
  }
}
.inv-drag-ghost {
  position: fixed;
  top: -1000px;
  left: -1000px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid var(--sg-win-gem, #e6b22e);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  opacity: 0.72;
  pointer-events: none;
  z-index: 99999;
}
.inv-drag-ghost img, .inv-drag-ghost svg {
  width: 30px !important;
  height: 30px !important;
}
.drop-target-hot {
  outline: 2px dashed var(--sg-win-gem, #e6b22e);
  outline-offset: -2px;
  background-color: var(--sg-win-gem, #e6b22e) !important;
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--sg-win-gem, #e6b22e) 16%, transparent) !important;
  }
  transition: background-color 0.1s ease;
}
.drop-target-bad {
  outline: 2px dashed #dc2626;
  outline-offset: -2px;
  background-color: rgba(220, 38, 38, 0.16) !important;
  cursor: no-drop;
  transition: background-color 0.1s ease;
}
@keyframes inv-new-pulse {
  0%, 100% {
    box-shadow: 0 0 3px 1px var(--sg-win-gem, var(--sg-amber, #e6b22e));
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 3px 1px color-mix(in srgb, var(--sg-win-gem, var(--sg-amber, #e6b22e)) 55%, transparent);
    }
  }
  50% {
    box-shadow: 0 0 9px 3px var(--sg-win-gem, var(--sg-amber, #e6b22e));
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 9px 3px color-mix(in srgb, var(--sg-win-gem, var(--sg-amber, #e6b22e)) 85%, transparent);
    }
  }
}
.inv-new-glow {
  animation: inv-new-pulse 1.35s ease-in-out infinite;
  border-color: var(--sg-win-gem, var(--sg-amber, #e6b22e)) !important;
}
@keyframes inv-menu-in {
  from {
    opacity: 0;
    transform: translateY(-3px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.inv-menu {
  background: var(--sg-win-bg, #141008);
  border: 1px solid var(--sg-win-gem, #5c4a30);
  border-radius: var(--sg-win-radius, 6px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.75);
  padding: 4px;
  font-family: var(--sg-font-ui, sans-serif);
  animation: inv-menu-in 0.11s ease-out;
  transform-origin: top left;
}
.inv-menu__title {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sg-win-title-ink, #f0d9a0);
  padding: 4px 8px 5px;
  border-bottom: 1px solid var(--sg-win-hairline, rgba(92, 74, 48, 0.4));
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-menu__item {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  text-align: left;
  font-size: 11px;
  color: var(--sg-win-ink, #cdbb98);
  padding: 5px 8px;
  border-radius: 4px;
  transition: background 0.12s ease, color 0.12s ease;
  cursor: pointer;
}
.inv-menu__item:hover {
  background: var(--sg-win-btn-hover-bg, rgba(230, 178, 46, 0.12));
  color: var(--sg-win-btn-hover-ink, #f5e6bf);
}
.inv-menu__item--on {
  color: var(--sg-win-gem, #e6b22e);
  background: var(--sg-win-gem, #e6b22e);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--sg-win-gem, #e6b22e) 14%, transparent);
  }
}
.inv-menu__item--danger:hover {
  background: rgba(220, 38, 38, 0.18);
  color: #fca5a5;
}
.inv-menu__rule {
  height: 1px;
  margin: 4px 6px;
  background: var(--sg-win-hairline, rgba(92, 74, 48, 0.4));
}
.portal-cta {
  position: relative;
  overflow: hidden;
  font-family: var(--font-gothic);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #f0dca6;
  background: radial-gradient(ellipse at 50% 130%, rgba(230, 178, 46, 0.26), transparent 62%), linear-gradient(to bottom, #2c241a, #15110b);
  border: 1px solid rgba(230, 178, 46, 0.45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 10px rgba(230, 178, 46, 0.25);
  transition: color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.1s ease;
  cursor: pointer;
  animation: portal-cta-breathe 3.4s ease-in-out infinite;
}
.portal-cta::before {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(230, 178, 46, 0.18);
  pointer-events: none;
}
.portal-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 240, 200, 0.14) 48%, transparent 60%);
  transform: translateX(-110%);
  pointer-events: none;
}
.portal-cta:hover::after {
  animation: grim-glint 0.9s ease forwards;
}
.portal-cta:hover {
  color: #ffefc2;
  border-color: rgba(246, 227, 176, 0.8);
  animation: none;
  box-shadow: 0 0 24px rgba(230, 178, 46, 0.30), inset 0 1px 0 rgba(246, 227, 176, 0.25), inset 0 -8px 14px rgba(0, 0, 0, 0.5);
}
.portal-cta:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.85);
}
.portal-cta .portal-cta-icon {
  display: inline-block;
  transition: transform 0.18s ease;
}
.portal-cta:hover .portal-cta-icon {
  transform: translateX(4px);
}
.portal-cta:focus-visible {
  outline: 2px solid var(--sg-win-gem);
  outline-offset: 1px;
}
@keyframes portal-cta-breathe {
  0%, 100% {
    box-shadow: 0 0 10px rgba(230, 178, 46, 0.10), inset 0 1px 0 rgba(246, 227, 176, 0.16), inset 0 -8px 14px rgba(0, 0, 0, 0.55);
  }
  50% {
    box-shadow: 0 0 22px rgba(230, 178, 46, 0.24), inset 0 1px 0 rgba(246, 227, 176, 0.22), inset 0 -8px 14px rgba(0, 0, 0, 0.55);
  }
}
@media (prefers-reduced-motion: reduce) {
  .portal-cta, .portal-cta:hover::after {
    animation: none;
  }
  .portal-cta .portal-cta-icon {
    transition: none;
  }
}
.exp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-family: var(--font-gothic);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #cabfa9;
  border: 1px solid #0c0a08;
  border-top-color: rgba(180, 150, 90, 0.3);
  border-left-color: rgba(180, 150, 90, 0.2);
  border-radius: 0.3rem;
  background: linear-gradient(to bottom, rgba(44, 40, 31, 0.95), rgba(20, 18, 13, 0.95));
  text-shadow: 1px 1px 2px #000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: all 0.15s ease;
  cursor: pointer;
}
.exp-btn:hover:not(:disabled) {
  color: #fff;
  background: linear-gradient(to bottom, rgba(58, 52, 40, 0.97), rgba(28, 25, 18, 0.97));
  box-shadow: 0 0 8px rgba(230, 178, 46, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.exp-btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.85);
}
.exp-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.exp-btn--red {
  color: #ef9a9a;
  border-top-color: rgba(220, 60, 60, 0.55);
}
.exp-btn--red:hover:not(:disabled) {
  color: #fecaca;
  box-shadow: 0 0 9px rgba(220, 38, 38, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.exp-btn--orange {
  color: #f0b183;
  border-top-color: rgba(217, 119, 6, 0.55);
}
.exp-btn--orange:hover:not(:disabled) {
  color: #fed7aa;
  box-shadow: 0 0 9px rgba(217, 119, 6, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.exp-btn--amber {
  color: #e8ce97;
  border-top-color: rgba(184, 150, 26, 0.55);
}
.exp-btn--amber:hover:not(:disabled) {
  color: #ffe066;
  box-shadow: 0 0 9px rgba(230, 178, 46, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.exp-btn--emerald {
  color: #86d9ad;
  border-top-color: rgba(16, 150, 90, 0.55);
}
.exp-btn--emerald:hover:not(:disabled) {
  color: #bbf7d0;
  box-shadow: 0 0 9px rgba(16, 185, 129, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.exp-btn--sky {
  color: #94c8e8;
  border-top-color: rgba(14, 130, 190, 0.55);
}
.exp-btn--sky:hover:not(:disabled) {
  color: #bae6fd;
  box-shadow: 0 0 9px rgba(14, 165, 233, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.exp-btn--purple {
  color: #c1a3e6;
  border-top-color: rgba(147, 51, 180, 0.55);
}
.exp-btn--purple:hover:not(:disabled) {
  color: #e9d5ff;
  box-shadow: 0 0 9px rgba(168, 85, 247, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.exp-btn--stone {
  color: #a8a29e;
}
.exp-btn--stone:hover:not(:disabled) {
  color: #e7e5e4;
}
.leave-wilds-btn {
  font-family: var(--font-gothic);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #e8ce97;
  border: 1px solid #0c0a08;
  border-top-color: rgba(217, 160, 90, 0.4);
  border-radius: 0.4rem;
  background: linear-gradient(to bottom, #3a3025, #211a12);
  text-shadow: 1px 1px 2px #000;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 224, 150, 0.06);
  transition: all 0.16s ease;
  cursor: pointer;
}
.leave-wilds-btn:hover {
  color: #ffe6a8;
  background: linear-gradient(to bottom, #4a3d2c, #2a2015);
  border-color: rgba(217, 160, 90, 0.6);
  box-shadow: 0 0 14px rgba(217, 119, 6, 0.28), inset 0 1px 0 rgba(255, 224, 150, 0.08);
}
.leave-wilds-btn:active {
  transform: translateY(1px);
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.85);
}
.leave-wilds-btn {
  position: relative;
  overflow: hidden;
}
.leave-wilds-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 240, 200, 0.10) 48%, transparent 60%);
  transform: translateX(-110%);
  pointer-events: none;
}
.leave-wilds-btn:hover::after {
  animation: grim-glint 0.9s ease forwards;
}
.vital-bar {
  height: 16px;
  background: #000;
  border: 1px solid #5c4a30;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
  position: relative;
  overflow: hidden;
}
.vital-bar::after {
  content: '';
  position: absolute;
  inset: 0 0 60% 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.10), transparent);
  pointer-events: none;
}
.bar-fill {
  height: 100%;
  transition: width 0.3s ease-out;
}
.xp-strip {
  height: 15px;
  border-radius: 3px;
}
.xp-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.14), transparent 45%), repeating-linear-gradient( to right, transparent 0, transparent calc(5% - 2px), rgba(0, 0, 0, 0.6) calc(5% - 2px), rgba(0, 0, 0, 0.6) calc(5% - 1px), rgba(255, 235, 190, 0.16) calc(5% - 1px), rgba(255, 235, 190, 0.16) 5% );
  pointer-events: none;
}
.xp-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  background: #0c0a08;
  z-index: 51;
  cursor: default;
  box-shadow: inset 0 0 0 1px var(--sg-win-frame, #5c4a30);
}
.xp-border__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, var(--sg-win-frame, #5c4a30) 0%, var(--sg-sulfur, #e6b22e) 62%, var(--sg-win-title-ink, #e8ce97) 100%);
  transition: width 0.3s ease-out;
  animation: xp-hum 3.4s ease-in-out infinite;
}
@keyframes xp-hum {
  0%, 100% {
    box-shadow: 0 0 4px rgba(230,178,46,0.32), 0 0 9px rgba(232,206,151,0.16);
  }
  50% {
    box-shadow: 0 0 7px rgba(230,178,46,0.52), 0 0 15px rgba(232,206,151,0.30);
  }
}
.xp-border::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(232, 206, 151, 0.14), transparent 55%), repeating-linear-gradient( to right, transparent 0, transparent calc(5% - 2px), rgba(0, 0, 0, 0.7) calc(5% - 2px), rgba(0, 0, 0, 0.7) calc(5% - 1px), rgba(232, 206, 151, 0.3) calc(5% - 1px), rgba(232, 206, 151, 0.3) 5% );
}
.xp-border--ready {
  cursor: pointer;
}
.xp-border--ready .xp-border__fill {
  animation: xp-divine-pulse 1.6s ease-in-out infinite;
}
@keyframes xp-divine-pulse {
  0%, 100% {
    box-shadow: 0 0 6px rgba(230,178,46,.6), 0 0 14px rgba(232,206,151,.42);
  }
  50% {
    box-shadow: 0 0 11px rgba(230,178,46,.9), 0 0 24px rgba(232,206,151,.62);
  }
}
.xp-level {
  color: #ffe9a8;
  text-shadow: 0 0 6px rgba(255, 215, 120, 0.6);
}
.bar-hp {
  background: linear-gradient(to right, #440a0a, var(--color-bright-blood));
  box-shadow: 0 0 7px rgba(200, 35, 35, 0.35);
}
.bar-mp {
  background: linear-gradient(to right, #0b2240, #1b5bb5);
  box-shadow: 0 0 7px rgba(27, 91, 181, 0.35);
}
.bar-st {
  background: linear-gradient(to right, #112a10, #2ea327);
  box-shadow: 0 0 7px rgba(46, 163, 39, 0.3);
}
.bar-xp {
  background: linear-gradient(to right, #2b2512, var(--color-sulfur));
  box-shadow: 0 0 7px rgba(230, 178, 46, 0.3);
}
.bar-energy {
  background: linear-gradient(to right, #5c4a08, #facc15);
  box-shadow: 0 0 7px rgba(250, 204, 21, 0.3);
}
.bar-energy-low {
  background: linear-gradient(to right, #440a0a, #d9480f);
  box-shadow: 0 0 7px rgba(217, 72, 15, 0.4);
}
.viewport-container {
  position: relative;
  overflow: hidden;
  background-color: #020202;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 1);
  flex: 1;
  min-height: 0;
}
.sg-immersive {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--sg-taskbar-h, 3.75rem);
  z-index: 40;
}
.viewport-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.15) saturate(0.85) brightness(0.85);
  transition: opacity 0.4s ease-in-out;
  animation: viewport-pan-zoom 45s infinite ease-in-out;
}
.viewport-shadow-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.1s ease;
}
html[data-stealth="on"] .viewport-shadow-veil {
  opacity: 1;
}
.vsv-edge-shadow {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 40px 6px rgba(0, 0, 0, 0.6), inset 0 0 96px 30px rgba(0, 0, 0, 0.42);
}
.vsv-tentacle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  margin-left: calc(var(--w) / -2);
  transform-origin: 50% 0%;
  background: radial-gradient(ellipse 56% 84% at 50% 0%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.18) 42%, transparent 70%);
  filter: blur(8px);
  animation: vsv-sway var(--dur) ease-in-out var(--delay) infinite;
  will-change: transform;
}
@keyframes vsv-sway {
  0%, 100% {
    transform: rotate(calc(var(--base) - var(--amp)));
  }
  50% {
    transform: rotate(calc(var(--base) + var(--amp)));
  }
}
html[data-perf-low] .vsv-tentacle {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .vsv-tentacle {
    animation: none;
  }
}
#viewport-canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  width: 100%;
  height: 100%;
  display: block;
  transition: opacity 0.4s ease-in-out;
  animation: viewport-pan-zoom 45s infinite ease-in-out;
}
@keyframes viewport-pan-zoom {
  0% {
    transform: scale(1.0) translate(0, 0);
  }
  25% {
    transform: scale(1.04) translate(-1%, 0.5%);
  }
  50% {
    transform: scale(1.02) translate(0.5%, -0.5%);
  }
  75% {
    transform: scale(1.05) translate(-0.5%, -1%);
  }
  100% {
    transform: scale(1.0) translate(0, 0);
  }
}
.explore-actions {
  display: flex;
  align-items: flex-start;
  gap: 0.15rem;
  position: relative;
}
.explore-act {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.2rem;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--color-sulfur, #e6b22e);
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.95));
  transition: color 0.2s, filter 0.2s, transform 0.1s;
}
.explore-act:hover {
  color: #f4e0b0;
  filter: drop-shadow(0 0 8px rgba(230, 178, 46, 0.75));
}
.explore-act:active {
  transform: translateY(1px) scale(0.94);
}
.explore-act--primary {
  width: auto;
  height: 2.6rem;
  gap: 0.5rem;
  padding: 0 0.85rem 0 0.75rem;
  border: 1px solid rgba(230, 178, 46, 0.55);
  border-radius: 999px;
  background: radial-gradient(120% 140% at 30% 0%, rgba(230, 178, 46, 0.28), rgba(230, 178, 46, 0.06) 60%), linear-gradient(180deg, rgba(36, 27, 12, 0.92), rgba(14, 10, 5, 0.92));
  color: #f4e0b0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 227, 160, 0.18);
}
.explore-act--primary:hover {
  border-color: rgba(240, 200, 90, 0.9);
  color: #fff3d4;
  filter: drop-shadow(0 0 10px rgba(230, 178, 46, 0.55));
}
.explore-act__label {
  font-family: "Cinzel", serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.explore-act--sweeping {
  border-color: rgba(240, 200, 90, 0.95);
  animation: exploreSweepPulse 2.4s ease-in-out infinite;
}
@keyframes exploreSweepPulse {
  0%, 100% {
    box-shadow: 0 2px 10px rgba(0,0,0,0.75), 0 0 0 0 rgba(230, 178, 46, 0.30);
  }
  50% {
    box-shadow: 0 2px 10px rgba(0,0,0,0.75), 0 0 0 5px rgba(230, 178, 46, 0.02);
  }
}
.explore-act--stealth {
  color: #a897cc;
}
.explore-act--stealth:hover {
  color: #d7c6ff;
  filter: drop-shadow(0 0 8px rgba(147, 113, 180, 0.8));
}
.explore-act--stealth.explore-act--on {
  color: #e7dbff;
  filter: drop-shadow(0 0 9px rgba(147, 113, 180, 0.9));
  animation: exploreStealthPulse 2.4s ease-in-out infinite;
}
@keyframes exploreStealthPulse {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(147, 113, 180, 0.55));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(147, 113, 180, 1));
  }
}
.explore-act--on {
  color: #f4e0b0;
}
.explore-act--locked {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.explore-act--locked:hover {
  color: #a897cc;
  filter: grayscale(0.6);
}
.explore-act__tip {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  width: max-content;
  max-width: min(17rem, 60vw);
  padding: 6px 9px;
  border: 1px solid var(--sg-win-frame, #5c4a30);
  border-radius: 4px;
  background: rgba(8, 6, 4, 0.96);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7);
  font-family: var(--sg-font-sans, sans-serif);
  font-size: 11px;
  line-height: 1.35;
  color: #e0d5c1;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  pointer-events: none;
}
.explore-act:hover .explore-act__tip, .explore-act:focus-visible .explore-act__tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.compass-dial {
  position: relative;
  width: min(9rem, 100%);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--sg-map-brass-soft);
  background: radial-gradient(circle at 50% 38%, rgba(58, 43, 18, 0.95), rgba(14, 10, 5, 0.96) 72%), linear-gradient(180deg, rgba(36, 27, 12, 0.95), rgba(10, 7, 3, 0.98));
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 227, 160, 0.14), inset 0 0 26px rgba(0, 0, 0, 0.7);
}
.compass-dial__ring {
  position: absolute;
  inset: 0.55rem;
  border-radius: 999px;
  border: 2px dotted var(--sg-map-brass-soft);
  pointer-events: none;
}
.compass-dial:hover .compass-dial__ring {
  animation: compassRingSpin 9s linear infinite;
}
@keyframes compassRingSpin {
  to {
    transform: rotate(360deg);
  }
}
html[data-perf-low] .compass-dial:hover .compass-dial__ring {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .compass-dial:hover .compass-dial__ring {
    animation: none;
  }
}
.compass-dial__rose {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.compass-point {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  z-index: 1;
  transform: scale(1);
  transform-origin: center;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
  transition: filter 0.25s ease, transform 0.25s ease;
}
.compass-point::before {
  content: '';
  position: absolute;
  inset: 0;
}
.compass-point:hover, .compass-dial:has(.compass-letter--n:hover) .compass-point--n, .compass-dial:has(.compass-letter--s:hover) .compass-point--s, .compass-dial:has(.compass-letter--e:hover) .compass-point--e, .compass-dial:has(.compass-letter--w:hover) .compass-point--w {
  z-index: 2;
  filter: brightness(1.25) drop-shadow(0 0 8px rgba(246, 216, 120, 0.85));
  transform: scale(1.12);
}
.compass-point:active {
  transform: scale(0.94);
}
.compass-point--n {
  clip-path: polygon(50% 50%, 0% 0%, 100% 0%);
}
.compass-point--n::before {
  background: linear-gradient(90deg, var(--sg-map-brass-dark) 0 50%, var(--sg-map-brass-lit) 50% 100%);
  clip-path: polygon(50% 11%, 58% 31%, 50% 50%, 42% 31%);
}
.compass-point--s {
  clip-path: polygon(50% 50%, 100% 100%, 0% 100%);
}
.compass-point--s::before {
  background: linear-gradient(90deg, var(--sg-map-brass-dark) 0 50%, var(--sg-map-brass-lit) 50% 100%);
  clip-path: polygon(50% 89%, 58% 69%, 50% 50%, 42% 69%);
}
.compass-point--e {
  clip-path: polygon(50% 50%, 100% 0%, 100% 100%);
}
.compass-point--e::before {
  background: linear-gradient(0deg, var(--sg-map-brass-dark) 0 50%, var(--sg-map-brass-lit) 50% 100%);
  clip-path: polygon(89% 50%, 69% 42%, 50% 50%, 69% 58%);
}
.compass-point--w {
  clip-path: polygon(50% 50%, 0% 0%, 0% 100%);
}
.compass-point--w::before {
  background: linear-gradient(0deg, var(--sg-map-brass-dark) 0 50%, var(--sg-map-brass-lit) 50% 100%);
  clip-path: polygon(11% 50%, 31% 42%, 50% 50%, 31% 58%);
}
.compass-letter {
  position: absolute;
  color: var(--sg-map-brass);
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 0.7rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: 1px 1px 2px #000;
  cursor: pointer;
  z-index: 4;
  transition: transform 0.25s ease, color 0.2s ease;
}
.compass-letter--n {
  top: 1%;
  left: 50%;
  transform: translate(-50%, calc(-1 * var(--lo, 0px))) scale(var(--ls, 1));
}
.compass-letter--s {
  bottom: 1%;
  left: 50%;
  transform: translate(-50%, var(--lo, 0px)) scale(var(--ls, 1));
}
.compass-letter--e {
  right: 4%;
  top: 50%;
  transform: translate(var(--lo, 0px), -50%) scale(var(--ls, 1));
}
.compass-letter--w {
  left: 4%;
  top: 50%;
  transform: translate(calc(-1 * var(--lo, 0px)), -50%) scale(var(--ls, 1));
}
.compass-letter:hover, .compass-dial:has(.compass-point--n:hover) .compass-letter--n, .compass-dial:has(.compass-point--s:hover) .compass-letter--s, .compass-dial:has(.compass-point--e:hover) .compass-letter--e, .compass-dial:has(.compass-point--w:hover) .compass-letter--w {
  --ls: 1.3;
  --lo: 2.5px;
  color: #fff6dd;
}
.compass-needle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid var(--sg-map-brass);
  background: radial-gradient(120% 140% at 50% 15%, var(--sg-map-brass), transparent 65%), linear-gradient(180deg, rgba(48, 35, 15, 0.97), rgba(14, 10, 5, 0.97));
  @supports (color: color-mix(in lab, red, red)) {
    background: radial-gradient(120% 140% at 50% 15%, color-mix(in srgb, var(--sg-map-brass) 40%, transparent), transparent 65%), linear-gradient(180deg, rgba(48, 35, 15, 0.97), rgba(14, 10, 5, 0.97));
  }
  color: var(--sg-map-brass-lit);
  font-size: 1.15rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 227, 160, 0.22);
  transition: color 0.2s, border-color 0.2s, filter 0.2s, transform 0.1s;
  cursor: pointer;
  z-index: 3;
}
.compass-needle:hover {
  color: #fff6dd;
  border-color: rgba(240, 200, 90, 0.95);
  filter: drop-shadow(0 0 11px rgba(230, 178, 46, 0.65));
}
.compass-needle:active {
  transform: translate(-50%, -50%) scale(0.93);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.85);
}
.wf {
  position: relative;
}
.wf--map {
  width: 100%;
}
.wf-map {
  position: relative;
  padding: 4px;
  background: var(--sg-map-plate);
  border: 1px solid var(--sg-map-brass-soft);
  border-radius: 4px;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.45);
}
.wf-map::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(110% 110% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.38) 100%);
  pointer-events: none;
  z-index: 2;
}
.wf-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
  z-index: 1;
}
.wf-tile {
  border: 1px solid var(--sg-map-grid-line);
  border-radius: 3px;
  background: var(--sg-map-fog-bg);
  transition: filter 0.2s ease, border-color 0.2s ease;
}
.wf-tile[data-biome] {
  background: var(--sg-map-wild-bg);
  color: var(--sg-map-wild-ink);
}
.wf-tile[data-biome="town"] {
  background: var(--sg-map-town-bg);
  color: var(--sg-map-town-ink);
}
.wf-tile[data-biome="outpost"] {
  background: var(--sg-map-outpost-bg);
  color: var(--sg-map-outpost-ink);
}
.wf-tile[data-biome="forest"] {
  background: var(--sg-map-forest-bg);
  color: var(--sg-map-forest-ink);
}
.wf-tile[data-biome="swamp"] {
  background: var(--sg-map-swamp-bg);
  color: var(--sg-map-swamp-ink);
}
.wf-tile[data-biome="mountain"] {
  background: var(--sg-map-mountain-bg);
  color: var(--sg-map-mountain-ink);
}
.wf-tile[data-biome="crypt"] {
  background: var(--sg-map-crypt-bg);
  color: var(--sg-map-crypt-ink);
}
.wf-motif {
  padding: 9%;
  opacity: 0.9;
}
.wf-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
  filter: saturate(0.9) brightness(0.88);
}
.wf-tile--open:hover {
  filter: brightness(1.3);
  border-color: var(--sg-map-brass);
}
.wf-tile--fog {
  background: radial-gradient(130% 130% at 30% 18%, transparent 0%, rgba(0, 0, 0, 0.42) 100%), var(--sg-map-fog-bg);
}
.wf-tile--party {
  border-color: rgba(52, 211, 153, 0.45);
  background: #34d399;
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, #34d399 10%, var(--sg-map-fog-bg));
  }
}
.wf-tile--here {
  border-color: var(--sg-map-brass);
}
.wf-tile--here::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 10px 2px var(--sg-map-brass-soft), inset 0 0 6px var(--sg-map-brass-soft);
  opacity: 0;
  animation: fx-glow-pulse 3.2s ease-in-out infinite;
  pointer-events: none;
}
.wf-here-pin {
  color: var(--sg-map-brass-lit);
  font-size: 11px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  z-index: 2;
}
.wf-tile--lead {
  border-color: var(--sg-map-brass);
  background: var(--sg-map-brass);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--sg-map-brass) 22%, var(--sg-map-fog-bg));
  }
}
.wf-tile--lead::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 8px 1px var(--sg-map-brass-soft);
  opacity: 0;
  animation: fx-glow-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
.wf-tile--lead:hover {
  filter: brightness(1.25);
}
.wf-tile--peek {
  z-index: 30;
}
.wf-tile--peek .wf-tip {
  display: block;
}
.wf-ring-clip {
  position: absolute;
  inset: 0;
  overflow: clip;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
}
.wf-ring {
  position: absolute;
  inset: 3%;
  border-radius: 999px;
  border: 2px dotted var(--sg-map-brass-soft);
  opacity: 0.45;
  pointer-events: none;
}
.wf--map:hover .wf-ring {
  animation: compassRingSpin 14s linear infinite;
}
.wf-trail {
  position: absolute;
  inset: 4px;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
  border-radius: 3px;
}
.wf-trail-line {
  position: absolute;
  height: 0;
  border-top: 2px dashed var(--sg-map-brass);
  filter: drop-shadow(0 0 3px var(--sg-map-brass-soft));
}
.wf-trail-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 999px;
  background: var(--sg-map-brass-lit);
  box-shadow: 0 0 6px 1px var(--sg-map-brass-soft);
}
html[data-perf-low] .wf-tile--here::before, html[data-perf-low] .wf-tile--lead::before {
  animation: none !important;
  opacity: 0.45;
}
html[data-perf-low] .wf--map:hover .wf-ring {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .wf-tile--here::before, .wf-tile--lead::before {
    animation: none;
    opacity: 0.45;
  }
  .wf--map:hover .wf-ring {
    animation: none;
  }
}
.wf--compass.compass-dial {
  width: clamp(6.5rem, 22vw, 9rem);
}
@media (max-width: 767px) {
  .wf--compass.compass-dial {
    width: clamp(7rem, 26vw, 8.5rem);
    margin-top: env(safe-area-inset-top, 0px);
    margin-right: env(safe-area-inset-right, 0px);
  }
}
.explore-actions--left .explore-act__tip {
  right: auto;
  left: 0;
}
.viewport-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 30%, rgba(0, 0, 0, 0.95) 100%), repeating-linear-gradient(rgba(18, 16, 16, 0) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(18, 16, 16, 0) 100%);
  background-size: 100% 100%, 100% 6px;
  pointer-events: none;
}
[data-viewport-filter="none"] .viewport-overlay {
  background: none;
}
[data-viewport-still="true"] .viewport-image, [data-viewport-still="true"] #viewport-canvas {
  animation: none !important;
}
[data-viewport-filter="grainy"] .viewport-overlay {
  background: radial-gradient(circle, transparent 25%, rgba(0, 0, 0, 0.95) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 100% 100%, 120px 120px;
  opacity: 0.85;
}
html:not([data-perf-low]) [data-viewport-filter="grainy"] .viewport-overlay {
  animation: fx-grain-jitter 0.9s steps(3) infinite;
}
@keyframes fx-grain-jitter {
  0% {
    background-position: 0 0, 0 0;
  }
  33% {
    background-position: 0 0, -35px 20px;
  }
  66% {
    background-position: 0 0, 25px -40px;
  }
  100% {
    background-position: 0 0, 0 0;
  }
}
[data-viewport-filter="distorted"] .viewport-overlay {
  background: radial-gradient(circle, transparent 30%, rgba(0, 0, 0, 0.9) 100%), repeating-linear-gradient(rgba(18, 16, 16, 0) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(18, 16, 16, 0) 100%), repeating-linear-gradient(180deg, transparent 0 34px, rgba(123, 94, 224, 0.14) 34px 36px, transparent 36px 71px, rgba(46, 210, 200, 0.1) 71px 72px);
  background-size: 100% 100%, 100% 4px, 100% 100%;
}
html:not([data-perf-low]) [data-viewport-filter="distorted"] .viewport-overlay {
  animation: fx-signal-slip 4.5s steps(1) infinite;
}
html:not([data-perf-low]) [data-viewport-filter="distorted"] .viewport-image {
  animation: fx-signal-twitch 4.5s steps(1) infinite;
}
@keyframes fx-signal-slip {
  0%, 87% {
    background-position: 0 0, 0 0, 0 0;
    opacity: 1;
  }
  88% {
    background-position: 0 0, 0 2px, -6px 13px;
    opacity: 0.92;
  }
  90% {
    background-position: 0 0, 0 -1px, 9px -22px;
    opacity: 1;
  }
  93% {
    background-position: 0 0, 0 3px, -3px 40px;
    opacity: 0.95;
  }
  94%, 100% {
    background-position: 0 0, 0 0, 0 0;
    opacity: 1;
  }
}
@keyframes fx-signal-twitch {
  0%, 87% {
    transform: none;
    filter: none;
  }
  88% {
    transform: translateX(-3px);
    filter: hue-rotate(38deg) saturate(1.4);
  }
  90% {
    transform: translateX(4px) translateY(1px);
    filter: hue-rotate(-25deg);
  }
  93% {
    transform: translateX(-2px);
    filter: saturate(0.4) contrast(1.3);
  }
  94%, 100% {
    transform: none;
    filter: none;
  }
}
[data-viewport-filter="oldtome"] .viewport-image {
  filter: sepia(0.5) saturate(0.85) contrast(0.95) brightness(0.98);
}
[data-viewport-filter="oldtome"] .viewport-overlay {
  background: radial-gradient(circle, transparent 30%, rgba(30, 18, 6, 0.9) 100%), radial-gradient(ellipse at 50% 0%, rgba(255, 214, 150, 0.08), transparent 60%);
  background-size: 100% 100%, 100% 100%;
}
[data-viewport-filter="noir"] .viewport-image {
  filter: grayscale(0.92) contrast(1.08) brightness(0.92);
}
[data-viewport-filter="noir"] .viewport-overlay {
  background: radial-gradient(circle, transparent 22%, rgba(0, 0, 0, 0.97) 100%);
  background-size: 100% 100%;
}
[data-viewport-filter="dream"] .viewport-image {
  filter: saturate(1.35) brightness(1.05);
}
[data-viewport-filter="dream"] .viewport-overlay {
  background: radial-gradient(circle, transparent 35%, rgba(20, 8, 30, 0.8) 100%), radial-gradient(ellipse at 30% 20%, rgba(199, 125, 255, 0.1), transparent 55%), radial-gradient(ellipse at 75% 70%, rgba(120, 200, 255, 0.08), transparent 55%);
  background-size: 100% 100%, 100% 100%, 100% 100%;
}
html:not([data-perf-low]) [data-viewport-filter="dream"] .viewport-overlay {
  animation: fx-dream-breathe 9s ease-in-out infinite;
}
@keyframes fx-dream-breathe {
  0%, 100% {
    opacity: 0.75;
  }
  50% {
    opacity: 1;
  }
}
[data-viewport-filter="vitrail"] .viewport-image {
  filter: saturate(1.55) contrast(1.18) brightness(1.02);
}
[data-viewport-filter="vitrail"] .viewport-overlay {
  background: radial-gradient(ellipse at 18% 25%, rgba(140, 40, 170, 0.20), transparent 42%), radial-gradient(ellipse at 78% 20%, rgba(190, 50, 60, 0.18), transparent 40%), radial-gradient(ellipse at 62% 78%, rgba(40, 90, 200, 0.20), transparent 44%), radial-gradient(ellipse at 25% 78%, rgba(215, 165, 45, 0.16), transparent 40%), radial-gradient(ellipse at 50% 45%, rgba(40, 160, 120, 0.12), transparent 38%),  repeating-linear-gradient(45deg, rgba(12, 9, 6, 0.9) 0 2px, transparent 2px 30px), repeating-linear-gradient(-45deg, rgba(12, 9, 6, 0.9) 0 2px, transparent 2px 30px),  radial-gradient(circle, transparent 32%, rgba(8, 5, 3, 0.95) 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}
[data-viewport-filter="vitrail"] .viewport-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient( 115deg, transparent 0%, transparent 38%, rgba(255, 236, 190, 0.28) 47%, rgba(255, 250, 230, 0.38) 50%, rgba(255, 236, 190, 0.28) 53%, transparent 62%, transparent 100% );
  background-size: 300% 100%;
  background-position: 120% 0;
  mix-blend-mode: soft-light;
  opacity: 0.9;
}
html:not([data-perf-low]) [data-viewport-filter="vitrail"] .viewport-overlay::after {
  animation: fx-vitrail-sun 22s ease-in-out infinite;
}
@keyframes fx-vitrail-sun {
  0% {
    background-position: 120% 0;
  }
  55% {
    background-position: -20% 0;
  }
  100% {
    background-position: -20% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-viewport-filter="grainy"] .viewport-overlay, [data-viewport-filter="distorted"] .viewport-overlay, [data-viewport-filter="distorted"] .viewport-image, [data-viewport-filter="dream"] .viewport-overlay, [data-viewport-filter="vitrail"] .viewport-overlay::after {
    animation: none;
  }
}
.item-common {
  border: 2px solid #9d9d9d !important;
  background-image: radial-gradient(circle at center, rgba(157, 157, 157, 0.18), rgba(0, 0, 0, 0) 75%);
}
.item-uncommon {
  border: 2px solid #1eff00 !important;
  background-image: radial-gradient(circle at center, rgba(30, 255, 0, 0.22), rgba(0, 0, 0, 0) 75%);
  box-shadow: inset 0 0 6px rgba(30, 255, 0, 0.25);
}
.item-rare {
  border: 2px solid #0070dd !important;
  background-image: radial-gradient(circle at center, rgba(0, 112, 221, 0.28), rgba(0, 0, 0, 0) 75%);
  box-shadow: inset 0 0 6px rgba(0, 112, 221, 0.3);
}
.item-epic {
  border: 2px solid #a335ee !important;
  background-image: radial-gradient(circle at center, rgba(163, 53, 238, 0.3), rgba(0, 0, 0, 0) 75%);
  box-shadow: inset 0 0 8px rgba(163, 53, 238, 0.35);
}
.item-legendary {
  border: 2px solid #ff8000 !important;
  background-image: radial-gradient(circle at center, rgba(255, 128, 0, 0.32), rgba(0, 0, 0, 0) 75%);
  box-shadow: inset 0 0 8px rgba(255, 128, 0, 0.4), 0 0 10px rgba(255, 128, 0, 0.55);
  animation: pulse-legendary 2s infinite ease-in-out;
}
@keyframes pulse-legendary {
  0%, 100% {
    box-shadow: inset 0 0 8px rgba(255, 128, 0, 0.4), 0 0 10px rgba(255, 128, 0, 0.55);
  }
  50% {
    box-shadow: inset 0 0 12px rgba(255, 128, 0, 0.6), 0 0 16px rgba(255, 128, 0, 0.9);
  }
}
@property --mythic-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.item-mythic {
  --mythic-angle: 0deg;
  border: 2px solid transparent !important;
  background: radial-gradient(circle at center, rgba(255, 42, 109, 0.22), rgba(5, 217, 232, 0.12) 55%, rgba(0, 0, 0, 0) 85%) padding-box, linear-gradient(#07070e, #07070e) padding-box, conic-gradient( from var(--mythic-angle), #ff2a6d, #f9f002, #05d9e8, #a020f0, #ff2a6d ) border-box !important;
  box-shadow: 0 0 8px rgba(5, 217, 232, 0.7), 0 0 16px rgba(255, 42, 109, 0.5), inset 0 0 10px rgba(160, 32, 240, 0.35);
  animation: mythic-spin 2.5s linear infinite, mythic-neon 3s ease-in-out infinite;
}
@keyframes mythic-spin {
  to {
    --mythic-angle: 360deg;
  }
}
@keyframes mythic-neon {
  0%, 100% {
    box-shadow: 0 0 8px rgba(5, 217, 232, 0.7), 0 0 16px rgba(255, 42, 109, 0.5), inset 0 0 10px rgba(160, 32, 240, 0.35);
  }
  50% {
    box-shadow: 0 0 14px rgba(255, 42, 109, 0.9), 0 0 26px rgba(5, 217, 232, 0.8), inset 0 0 16px rgba(249, 240, 2, 0.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .item-mythic {
    animation: mythic-neon 3s ease-in-out infinite;
  }
}
.q-mythic-name {
  background: linear-gradient( 90deg, #ff2a6d, #ff8a00, #f9f002, #39ff14, #05d9e8, #a020f0, #ff2a6d );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  text-shadow: none;
  animation: mythic-rainbow 3s linear infinite;
}
@keyframes mythic-rainbow {
  to {
    background-position: 300% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .q-mythic-name {
    animation: none;
  }
}
.stat-hover:hover .tooltip-panel {
  display: block;
}
.tooltip-panel {
  z-index: 100;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-abyss);
  border-left: 1px solid var(--color-stone);
}
::-webkit-scrollbar-thumb {
  background: var(--color-stone);
  border: 2px solid var(--color-abyss);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-tarnished);
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
.pixel-slot {
  background: #0a0a0a;
  box-shadow: inset 2px 2px 0px rgba(0,0,0,0.8), inset -1px -1px 0px rgba(255,255,255,0.1), 1px 1px 0px rgba(255,255,255,0.05);
  border: 1px solid #5c4a30;
  position: relative;
  overflow: visible;
}
.pixel-slot-special {
  border-color: #4ade80 !important;
  box-shadow: inset 2px 2px 0px rgba(0,0,0,0.8), 0 0 10px rgba(74, 222, 128, 0.2);
  background: rgba(74, 222, 128, 0.05);
}
.pixel-tooltip {
  box-shadow: 0 10px 30px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.1);
  border: 1px solid #5c4a30;
}
.explore-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.explore-flank {
  width: 300px;
  flex-shrink: 0;
}
.explore-main {
  flex: 1;
  min-width: 0;
}
@media (max-width: 1100px) {
  .explore-row {
    flex-direction: column;
  }
  .explore-flank {
    width: 100%;
  }
  .explore-main {
    order: -1;
  }
}
.viewport-hero {
  max-width: 880px;
  margin: 0 auto 18px;
}
.panel-masonry {
  column-gap: 14px;
  column-count: 1;
}
@media (min-width: 680px) {
  .panel-masonry {
    column-count: 2;
  }
}
@media (min-width: 1100px) {
  .panel-masonry {
    column-count: 3;
  }
}
@media (min-width: 1500px) {
  .panel-masonry {
    column-count: 4;
  }
}
.panel-masonry > .masonry-item {
  width: 100%;
  margin: 0 0 14px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.sg-window {
  position: relative;
  border: 1px solid var(--sg-win-frame);
  border-top-color: var(--sg-win-frame-lite);
  border-left-color: var(--sg-win-frame-lite);
  border-bottom-color: var(--sg-win-frame-dark);
  border-right-color: var(--sg-win-frame-dark);
  border-radius: var(--sg-win-radius);
  background: radial-gradient(ellipse at 50% -6%, var(--sg-win-bg-glow), transparent 50%), var(--sg-win-bg);
  color: var(--sg-win-ink);
  box-shadow: var(--sg-win-shadow);
  backdrop-filter: blur(var(--sg-win-blur));
  -webkit-backdrop-filter: blur(var(--sg-win-blur));
  display: flex;
  flex-direction: column;
}
.sg-window::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid var(--sg-win-hairline);
  pointer-events: none;
  z-index: 1;
}
.sg-window, .sg-window::before, .sg-window__titlebar, .tome-panel, .grimoire-tome {
  transition: border-color 0.45s ease, box-shadow 0.45s ease, color 0.45s ease;
}
@media (prefers-reduced-motion: reduce) {
  .sg-window, .sg-window::before, .sg-window__titlebar, .tome-panel, .grimoire-tome {
    transition: none;
  }
}
.sg-window__titlebar > :not(.sg-window__veil) {
  position: relative;
  z-index: 1;
}
.sg-window__veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 120%, rgba(120, 130, 145, 0.16), transparent 60%), linear-gradient(to bottom, #24272c, #0a0b0d);
  transition: opacity 0.55s ease;
}
html[data-stealth="on"] .sg-window__veil {
  opacity: 1;
}
.sg-window__veil::after {
  content: '';
  position: absolute;
  inset: -40% -10% -10%;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(120% 150% at 50% 140%, rgba(2, 3, 4, 0.9), transparent 68%);
}
html.stealth-shifting .sg-window__veil::after {
  animation: nightveilPlume 0.85s ease-out;
}
@keyframes nightveilPlume {
  0% {
    opacity: 0;
    transform: translateY(45%) scaleY(0.6);
  }
  35% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translateY(-6%) scaleY(1.15);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sg-window__veil {
    transition: none;
  }
  html.stealth-shifting .sg-window__veil::after {
    animation: none;
  }
}
.sg-window--pane {
  height: var(--sg-win-pane-height, 480px);
}
.sg-window--sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
}
.sg-window__titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  position: relative;
  background: var(--sg-win-titlebar);
  border-bottom: 1px solid var(--sg-win-titlebar-rule);
  flex-shrink: 0;
}
.sg-window__title {
  flex: 1;
  font-family: var(--sg-font-gothic);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--sg-win-title-ink);
  text-shadow: var(--sg-win-title-glow);
}
.sg-window__title::before {
  content: '✦ ';
  color: var(--sg-win-gem);
  font-size: 8px;
  text-shadow: var(--sg-win-gem-glow);
}
.sg-window__title-icon {
  margin-right: 6px;
}
.sg-window__btn {
  width: 18px;
  height: 18px;
  border: 1px solid var(--sg-win-btn-border);
  background: var(--sg-win-btn-bg);
  color: var(--sg-win-btn-ink);
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.sg-window__btn:hover {
  background: var(--sg-win-btn-hover-bg);
  color: var(--sg-win-btn-hover-ink);
  border-color: var(--sg-win-btn-hover-border);
}
.sg-window__btn--close:hover {
  background: var(--sg-win-close-hover-bg);
  color: var(--sg-win-close-hover-ink);
  border-color: var(--sg-win-close-hover-border);
}
.sg-window__body {
  overflow-y: auto;
  flex: 1;
  position: relative;
}
.sg-dock {
  display: grid;
  grid-template-columns: var(--zl, 1fr) var(--sl, 6px) var(--zc, 2fr) var(--sr, 6px) var(--zr, 1fr);
  grid-template-areas: "left ls center rs right" "bottom bottom bottom bottom bottom";
  align-items: start;
  gap: 0 0;
}
.sg-dock__zone {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 200px;
}
.sg-dock__zone[data-zone="left"] {
  grid-area: left;
}
.sg-dock__zone--center {
  grid-area: center;
  padding: 0 10px;
}
.sg-dock__zone[data-zone="right"] {
  grid-area: right;
}
.sg-dock__zone--bottom {
  grid-area: bottom;
  margin-top: 12px;
  min-height: 0;
}
.sg-dock__zone--bottom.sg-dock__zone--empty {
  display: none;
}
.sg-dock--dragging .sg-dock__zone {
  outline: 1px dashed rgba(230, 178, 46, 0.25);
  outline-offset: -4px;
}
.sg-dock--dragging {
  grid-template-columns: minmax(140px, var(--zl, 1fr)) 6px var(--zc, 2fr) 6px minmax(140px, var(--zr, 1fr));
}
.sg-dock--dragging .sg-dock__zone--bottom.sg-dock__zone--empty {
  display: flex;
  min-height: 72px;
}
.sg-dock__zone.sg-dock__zone--hover {
  outline: 2px solid rgba(230, 178, 46, 0.55);
  outline-offset: -4px;
  background: rgba(230, 178, 46, 0.04);
}
.sg-window--dragging {
  opacity: 0.35;
}
.sg-drag-ghost {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  padding: 5px 14px;
  background: var(--sg-win-titlebar);
  border: 1px solid var(--sg-win-frame);
  color: var(--sg-win-title-ink);
  font-family: var(--sg-font-gothic);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
}
.sg-dock__splitter {
  align-self: stretch;
  cursor: col-resize;
  position: relative;
  touch-action: none;
}
.sg-dock__splitter[data-splitter="left"] {
  grid-area: ls;
}
.sg-dock__splitter[data-splitter="right"] {
  grid-area: rs;
}
.sg-dock__splitter::after {
  content: '';
  position: absolute;
  inset: 0 2px;
  background: transparent;
  transition: background 0.15s;
}
.sg-dock__splitter:hover::after, .sg-dock__splitter.dragging::after {
  background: rgba(230, 178, 46, 0.35);
}
.sg-dock .sg-window--pane {
  height: auto;
  min-height: 320px;
  max-height: 78vh;
}
.sg-dock__zone--bottom .sg-window--pane {
  min-height: 180px;
  max-height: 40vh;
  width: 100%;
}
.sg-dock__zone--center .sg-window--pane {
  min-height: 480px;
  height: min(78vh, 720px);
}
.sg-grid {
  display: grid;
  gap: 12px;
  min-height: calc(100dvh - 80px);
  height: calc(100dvh - 80px);
}
main.pb-16:has(.sg-grid) {
  padding-bottom: 0;
}
.sg-grid--standard {
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-areas: "tl tc tr" "bl bc br";
}
.sg-grid--exploration {
  grid-template-columns: 1.8fr 1.8fr 1fr;
  grid-template-rows: 1.6fr minmax(240px, 1fr);
  grid-template-areas: "main main side" "b1   b2   side";
}
.sg-grid--immersion {
  grid-template-columns: 3.6fr 1fr;
  grid-template-rows: 2.4fr minmax(200px, 1fr);
  grid-template-areas: "main s1" "main s2";
}
.sg-grid > [data-cell="tl"] {
  grid-area: tl;
}
.sg-grid > [data-cell="tc"] {
  grid-area: tc;
}
.sg-grid > [data-cell="tr"] {
  grid-area: tr;
}
.sg-grid > [data-cell="bl"] {
  grid-area: bl;
}
.sg-grid > [data-cell="bc"] {
  grid-area: bc;
}
.sg-grid > [data-cell="br"] {
  grid-area: br;
}
.sg-grid > [data-cell="main"] {
  grid-area: main;
}
.sg-grid > [data-cell="side"] {
  grid-area: side;
}
.sg-grid > [data-cell="b1"] {
  grid-area: b1;
}
.sg-grid > [data-cell="b2"] {
  grid-area: b2;
}
.sg-grid > [data-cell="s1"] {
  grid-area: s1;
}
.sg-grid > [data-cell="s2"] {
  grid-area: s2;
}
.sg-grid__cell {
  display: flex;
  min-width: 0;
  min-height: 0;
}
.sg-grid__cell > .sg-window--pane {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
}
.sg-grid__cell .sg-window__body {
  min-height: 0;
  overflow: auto;
}
.grimoire-page--embed {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.sg-grid__placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed rgba(230, 178, 46, 0.2);
  border-radius: 4px;
  color: rgba(230, 178, 46, 0.35);
  font-family: var(--sg-font-gothic);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.sg-grid--dragging .sg-grid__cell {
  outline: 1px dashed rgba(230, 178, 46, 0.25);
  outline-offset: -4px;
}
.sg-grid__cell.sg-grid__cell--hover {
  outline: 2px solid rgba(230, 178, 46, 0.55);
  outline-offset: -4px;
  background: rgba(230, 178, 46, 0.05);
}
.sg-window__movemenu {
  position: relative;
}
.sg-window__movemenu summary {
  list-style: none;
}
.sg-window__movemenu summary::-webkit-details-marker {
  display: none;
}
.sg-window__movemenu-list {
  position: absolute;
  right: 0;
  top: 22px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-width: 120px;
  background: var(--sg-win-bg);
  border: 1px solid var(--sg-win-frame);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
}
.sg-window__movemenu-list button {
  padding: 6px 10px;
  text-align: left;
  font-family: var(--sg-font-gothic);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--sg-win-btn-ink);
}
.sg-window__movemenu-list button:hover {
  color: var(--sg-win-btn-hover-ink);
  background: var(--sg-win-btn-hover-bg);
}
.sg-float {
  position: fixed;
  resize: both;
  overflow: hidden;
  min-width: 280px;
  min-height: 220px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85);
}
.sg-float .sg-window--pane {
  height: 100%;
  max-height: none;
  min-height: 0;
}
.sg-float.sg-float--dragging {
  opacity: 0.7;
  transition: none;
}
@keyframes sg-window-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.sg-dock .sg-window--pane, .sg-float {
  animation: sg-window-in 0.28s ease-out;
}
.sg-dock .sg-window--pane > .sg-window__titlebar, .sg-float .sg-window__titlebar {
  cursor: grab;
}
.sg-dock--dragging, .sg-dock--dragging * , .sg-float--dragging, .sg-float--dragging * {
  cursor: grabbing !important;
}
.sg-window__btn:focus-visible, .taskbar-btn:focus-visible, .sg-window__movemenu-list button:focus-visible, .iron-button:focus-visible {
  outline: 2px solid var(--sg-win-gem);
  outline-offset: 1px;
}
@media (prefers-reduced-motion: reduce) {
  .sg-dock .sg-window--pane, .sg-float {
    animation: none;
  }
  .sg-window__btn, .taskbar-btn, .sg-dock__splitter::after {
    transition: none;
  }
}
@media (max-width: 1279px) {
  .sg-dock {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "center center" "left left" "right right" "bottom bottom";
    gap: 12px;
  }
  .sg-dock__splitter {
    display: none;
  }
  .sg-dock .sg-window--pane {
    min-height: 0;
    max-height: calc(100dvh - 120px);
  }
  .sg-dock__zone {
    flex-flow: row wrap;
  }
  .sg-dock__zone > .sg-window--pane {
    flex: 1 1 100%;
    min-width: 0;
  }
  .sg-dock__zone > .sg-window--pane[data-window-id="stats"], .sg-dock__zone > .sg-window--pane[data-window-id="pack"] {
    flex: 1 1 calc(50% - 6px);
    min-height: 70vh;
  }
}
@media (max-width: 767px) {
  .sg-dock {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .sg-dock__zone {
    min-height: 0;
  }
  .sg-dock__zone--center {
    order: -1;
  }
  .sg-dock__zone--center .sg-window--pane {
    min-height: 55dvh;
  }
  .sg-dock .sg-window--pane {
    max-height: none;
  }
  .sg-window__movemenu {
    display: none;
  }
  .sg-dock__zone > .sg-window--pane[data-window-id="stats"], .sg-dock__zone > .sg-window--pane[data-window-id="pack"] {
    flex-basis: 100%;
    min-height: calc(100dvh - 160px);
  }
}
html {
  overscroll-behavior: none;
}
body {
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
.sg-window__body, .grimoire-scroll {
  overscroll-behavior: contain;
}
button, .taskbar-btn, .sg-window__titlebar {
  touch-action: manipulation;
}
.sg-window__titlebar, .game-taskbar, .sg-window__title {
  user-select: none;
  -webkit-user-select: none;
}
@media (max-width: 767px) {
  .game-taskbar {
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
    gap: 2px;
  }
  .taskbar-btn {
    min-height: 40px;
    padding: 6px 9px;
    font-size: 10px;
  }
  .sg-window--tome {
    overscroll-behavior: contain;
  }
}
.game-taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 19px 8px 6px;
  background: linear-gradient(to top, #030304, #0c0a08);
  border-top: 1px solid #5c4a30;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.8);
}
.taskbar-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-family: 'Cinzel', serif;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #938573;
  background: linear-gradient(to bottom, #1a1410, #0c0a08);
  border: 1px solid #3a2e1c;
  border-top-color: #5c4a30;
  box-shadow: inset 0 1px 0 rgba(255, 235, 190, 0.06);
  cursor: pointer;
  transition: color 0.35s ease, background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.1s ease;
}
.taskbar-btn:hover, .taskbar-btn.active {
  color: #e8ce97;
  background: linear-gradient(to bottom, #2a1f10, #1a1410);
  border-color: #8c7448;
  box-shadow: 0 0 8px rgba(232,206,151,0.2), inset 0 1px 0 rgba(255, 235, 190, 0.08);
}
.taskbar-btn:active {
  transform: translateY(1px);
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.8);
}
.taskbar-btn.active {
  border-top: 2px solid #e8ce97;
  box-shadow: 0 -1px 10px rgba(230, 178, 46, 0.35), inset 0 1px 0 rgba(255, 235, 190, 0.1);
  text-shadow: 0 0 8px rgba(232, 206, 151, 0.6);
}
html[data-stealth="on"] .taskbar-btn {
  color: #8a9099;
  background: linear-gradient(to bottom, #1c1e22, #0b0c0e);
  border: 1px solid #2c2f34;
  border-top-color: #4a4e55;
}
html[data-stealth="on"] .taskbar-btn:hover, html[data-stealth="on"] .taskbar-btn.active {
  color: #cdd2d8;
  background: linear-gradient(to bottom, #2a2d33, #1c1e22);
  border-color: #6a7079;
  box-shadow: 0 0 8px rgba(170, 180, 195, 0.2), inset 0 1px 0 rgba(210, 220, 235, 0.06);
}
html[data-stealth="on"] .taskbar-btn.active {
  border-top: 2px solid #aab0b8;
  box-shadow: 0 -1px 10px rgba(150, 160, 175, 0.35), inset 0 1px 0 rgba(210, 220, 235, 0.08);
  text-shadow: 0 0 8px rgba(200, 210, 225, 0.55);
}
.taskbar-btn--template {
  padding: 4px 8px;
}
.taskbar-divider {
  width: 1px;
  align-self: stretch;
  margin: 2px 4px;
  background: linear-gradient(to bottom, transparent, #5c4a30 30%, #5c4a30 70%, transparent);
}
.equip-slot-compact {
  width: 44px;
  height: 44px;
  background: #05060a;
  border: 2px solid #2a2416;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: border-color 0.15s;
}
.equip-slot-compact:hover {
  border-color: #5c4a30;
}
.equip-slot-compact.has-item {
  border-color: #5c4a30;
  background: #0c0a06;
}
.equip-slot-compact .slot-label {
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 7px;
  color: #5c4a30;
  font-family: 'Inter', sans-serif;
  pointer-events: none;
  line-height: 1;
}
.equip-slot-large {
  width: 52px;
  height: 52px;
}
.equip-slot-large .slot-label {
  font-size: 8px;
  bottom: 2px;
}
.bar-hp-full {
  background: linear-gradient(to right, #166534, #22c55e);
}
.bar-hp-mid {
  background: linear-gradient(to right, #713f12, #eab308);
}
.bar-hp-low {
  background: linear-gradient(to right, #440a0a, #c82323);
}
@keyframes crit-flash {
  0% {
    color: #fff;
    text-shadow: 0 0 12px #e6b22e;
  }
  50% {
    color: #e6b22e;
    text-shadow: 0 0 20px #e6b22e;
  }
  100% {
    color: #ff7700;
    text-shadow: none;
  }
}
.crit-hit {
  animation: crit-flash 0.4s ease-out forwards;
  font-weight: bold;
}
.game-theme-light-icon {
  display: none;
}
.game-theme-dark-icon {
  display: inline;
}
[data-game-theme="light"] .game-theme-light-icon {
  display: inline;
}
[data-game-theme="light"] .game-theme-dark-icon {
  display: none;
}
[data-game-theme="light"] .game-root {
  background: #cfc6b4 !important;
  color: #2b2218 !important;
}
[data-game-theme="light"] #game-header > div {
  background: rgba(241, 235, 223, 0.95) !important;
  border-color: #b09a6e !important;
}
[data-game-theme="light"] #game-header {
  color: #5a4a30;
}
[data-game-theme="light"] .stone-panel {
  background-color: rgba(245, 240, 228, 0.92) !important;
  border-color: #b89a5e !important;
  box-shadow: 0 4px 20px rgba(60,45,20,0.22) !important;
  color: #2b2218;
}
[data-game-theme="light"] .game-taskbar {
  background: linear-gradient(to top, #d8cfba, #ece4d2);
  border-top-color: #b89a5e;
  box-shadow: 0 -4px 20px rgba(60,45,20,0.2);
}
[data-game-theme="light"] .taskbar-btn {
  color: #6a5630;
  background: linear-gradient(to bottom, #ece4d2, #ddd2ba);
  border-color: #c4b289;
  border-top-color: #d8caa2;
}
[data-game-theme="light"] .taskbar-btn:hover, [data-game-theme="light"] .taskbar-btn.active {
  color: #3a2a0a;
  background: linear-gradient(to bottom, #f4eeda, #e6dcc2);
  border-color: #8c7038;
  box-shadow: 0 0 8px rgba(140,112,56,0.25);
}
[data-game-theme="light"] .taskbar-btn.active {
  border-top: 2px solid #8c7038;
  box-shadow: 0 -1px 8px rgba(140, 112, 56, 0.3);
  text-shadow: none;
}
[data-game-theme="light"] .stone-panel::after {
  border-color: rgba(140, 112, 56, 0.22);
}
[data-game-theme="light"] .vital-bar {
  border-color: #8c7038;
}
[data-game-theme="light"] .gilt-text {
  background: linear-gradient(180deg, #8c6a1a 15%, #6e5210 55%, #4a3608 90%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: none;
}
[data-game-theme="light"] .iron-button {
  background: linear-gradient(to bottom, #d8caa6, #c4b289);
  color: #3a2a0a !important;
  border-color: #6a5630 !important;
  border-top-color: #ece0c2 !important;
  border-left-color: #ece0c2 !important;
  text-shadow: none;
}
[data-game-theme="light"] .iron-button:hover:not(:disabled) {
  background: linear-gradient(to bottom, #e6dcc2, #d8caa6);
  color: #1a1206 !important;
}
[data-game-theme="light"] .portal-cta {
  color: #5c430e;
  background: linear-gradient(to bottom, #f2e7c8, #e0d0a2);
  border-color: #a07820;
  text-shadow: none;
  animation: none;
  box-shadow: 0 1px 6px rgba(120, 90, 20, 0.25), inset 0 1px 0 rgba(255, 250, 235, 0.7);
}
[data-game-theme="light"] .portal-cta::before {
  border-color: rgba(160, 120, 32, 0.35);
}
[data-game-theme="light"] .portal-cta:hover {
  color: #3c2c08;
  border-color: #7c5c14;
  box-shadow: 0 0 14px rgba(160, 120, 32, 0.35), inset 0 1px 0 rgba(255, 250, 235, 0.7);
}
[data-game-theme="light"] .equip-slot-compact {
  background: #e4dac2;
  border-color: #c0a86e;
}
[data-game-theme="light"] .equip-slot-compact.has-item {
  background: #eee4cc;
  border-color: #a07820;
}
[data-game-theme="light"] .equip-slot-compact .slot-label {
  color: #8c7038;
}
[data-game-theme="light"] .pixel-slot {
  background: #e4dac2;
  border-color: #b09a6e;
  box-shadow: inset 1px 1px 0 rgba(0,0,0,0.15), inset -1px -1px 0 rgba(255,255,255,0.5);
}
[data-game-theme="light"] .bg-black {
  background-color: #e7ddc8 !important;
}
[data-game-theme="light"] .bg-stone-900 {
  background-color: #ded3bb !important;
}
[data-game-theme="light"] .bg-stone-800 {
  background-color: #d6cab0 !important;
}
[data-game-theme="light"] .bg-red-950 {
  background-color: #f0d8d4 !important;
}
[data-game-theme="light"] .bg-green-950 {
  background-color: #d8ecd6 !important;
}
[data-game-theme="light"] .bg-yellow-950 {
  background-color: #f0e8c6 !important;
}
[data-game-theme="light"] .text-white {
  color: #241b10 !important;
}
[data-game-theme="light"] .text-stone-300 {
  color: #463a2a !important;
}
[data-game-theme="light"] .text-stone-400 {
  color: #4a3d2c !important;
}
[data-game-theme="light"] .text-stone-500 {
  color: #5c4d38 !important;
}
[data-game-theme="light"] .text-stone-600 {
  color: #6a5942 !important;
}
[data-game-theme="light"] .text-stone-700 {
  color: #4a3d2c !important;
}
[data-game-theme="light"] .text-red-300, [data-game-theme="light"] .text-red-400, [data-game-theme="light"] .text-red-500 {
  color: #a51d1d !important;
}
[data-game-theme="light"] .text-green-400 {
  color: #15803d !important;
}
[data-game-theme="light"] .text-yellow-400, [data-game-theme="light"] .text-yellow-600 {
  color: #9a6b08 !important;
}
[data-game-theme="light"] .text-orange-400 {
  color: #b54708 !important;
}
[data-game-theme="light"] .text-amber-500 {
  color: #a4640a !important;
}
[data-game-theme="light"] .text-teal-300, [data-game-theme="light"] .text-teal-400 {
  color: #0c7068 !important;
}
[data-game-theme="light"] .text-\[\#e8ce97\] {
  color: #7a5e08 !important;
}
.game-root {
  font-family: var(--font-ui), 'Inter', sans-serif !important;
}
.game-root .text-\[6px\], .game-root .text-\[7px\], .game-root .text-\[8px\], .game-root .text-\[9px\], .game-root .text-\[10px\] {
  font-size: 12px !important;
}
.game-root .text-\[11px\], .game-root .text-\[12px\] {
  font-size: 13px !important;
}
.game-root .text-\[13px\] {
  font-size: 14px !important;
}
.game-root .text-xs {
  font-size: 13px !important;
}
.equip-slot-compact .slot-label {
  font-size: 9px !important;
}
.welcome-title {
  color: var(--color-sulfur, gold);
  font-family: var(--font-gothic, 'Georgia', serif);
  font-size: 2.5rem;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
@keyframes buff-phasing {
  0% {
    opacity: 0.75;
    box-shadow: 0 0 2px rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.4);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
    border-color: rgba(34, 197, 94, 0.8);
  }
  100% {
    opacity: 0.75;
    box-shadow: 0 0 2px rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.4);
  }
}
@keyframes debuff-phasing {
  0% {
    opacity: 0.75;
    box-shadow: 0 0 2px rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
    border-color: rgba(239, 68, 68, 0.8);
  }
  100% {
    opacity: 0.75;
    box-shadow: 0 0 2px rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
  }
}
.buff-phase {
  animation: buff-phasing 2.5s infinite ease-in-out;
}
.debuff-phase {
  animation: debuff-phasing 2.5s infinite ease-in-out;
}
.battlefield-fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: 450;
  background-color: rgb(10, 9, 11);
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  overflow-y: auto;
  animation: battlefieldSlideDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.battlefield-fullscreen-overlay.exiting {
  animation: battlefieldFadeOut 0.9s ease-in-out forwards;
  pointer-events: none;
}
body.in-combat .game-root {
  visibility: hidden;
}
body.in-combat .game-root, body.in-combat .game-root * {
  animation-play-state: paused !important;
}
@keyframes battlefieldSlideDown {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes battlefieldFadeOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.015);
  }
}
@keyframes fx-glow-pulse {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
.xp-float-container {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 500;
}
.xp-float-text {
  font-family: var(--font-gothic);
  color: var(--color-sulfur);
  font-size: 3.5rem;
  font-weight: 900;
  text-shadow: 0 0 15px rgba(230, 178, 46, 0.8), 0 0 30px rgba(230, 178, 46, 0.4), 2px 2px 4px #000;
  letter-spacing: 3px;
  animation: xpFloatUpFade 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes xpFloatUpFade {
  0% {
    transform: translateY(40px) scale(0.6);
    opacity: 0;
  }
  15% {
    transform: translateY(-20px) scale(1.3);
    opacity: 1;
  }
  30% {
    transform: translateY(-25px) scale(1.1);
  }
  85% {
    transform: translateY(-60px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) scale(0.9);
    opacity: 0;
  }
}
.victory-glow-text {
  color: #e8ce97;
  text-shadow: 0 0 24px #d4a940, 0 0 48px rgba(200, 164, 36, 0.6);
  animation: victoryTextPulse 2s infinite ease-in-out;
}
@keyframes victoryTextPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}
.victory-xp-bar-fill {
  height: 100%;
  background: linear-gradient(to right, #2b2512, var(--color-sulfur), #ffe066);
  box-shadow: 0 0 10px rgba(230, 178, 46, 0.7);
  transition: width 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.animate-fade-in {
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.sg-portrait {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.sg-portrait .sg-portrait__over {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sg-portrait.sg-portrait--fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.sg-portrait--fill .sg-portrait__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sg-crossfade .sg-portrait__frame {
  opacity: 0;
  transition: opacity var(--sg-fade, 600ms) ease-in-out;
}
.sg-crossfade .sg-portrait__frame.is-active {
  opacity: 1;
}
.sg-frame-drop {
  outline: 2px dashed var(--color-sulfur, #e6b22e);
  outline-offset: 1px;
}
.sg-portrait[data-anim-mode="hover"] {
  cursor: pointer;
}
.sg-portrait[data-anim-mode="hover"] .sg-portrait__base {
  opacity: 1;
}
.sg-portrait[data-anim-mode="hover"] .sg-portrait__frame[data-frame="1"] {
  opacity: 0;
  transition: opacity var(--sg-fade, 600ms) ease;
}
.sg-portrait[data-anim-mode="hover"]:hover .sg-portrait__frame[data-frame="1"] {
  opacity: 1;
}
.sg-portrait[data-anim-mode="hover"] .sg-portrait__frame[data-frame]:not([data-frame="0"]):not([data-frame="1"]) {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .sg-portrait[data-anim-mode="hover"] .sg-portrait__frame[data-frame="1"] {
    transition: none;
  }
}
:root[data-perf-low] .sg-portrait[data-anim-mode="hover"] .sg-portrait__frame[data-frame="1"] {
  transition: none;
}
.sg-anim-modes {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--ab);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
}
.sg-anim-mode {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--at3);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.sg-anim-mode i {
  font-size: 11px;
  opacity: 0.75;
}
.sg-anim-mode:hover {
  color: var(--at2);
  background: rgba(255, 255, 255, 0.05);
}
.sg-anim-mode.is-active {
  color: #16100a;
  background: var(--agd);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.sg-anim-mode.is-active i {
  opacity: 1;
}
.sg-anim-mode:has(input:focus-visible) {
  box-shadow: 0 0 0 2px var(--agd);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--agd) 45%, transparent);
  }
}
.sg-ms-input {
  width: 4rem;
  padding: 3px 6px;
  font-size: 11px;
  text-align: center;
  color: var(--at2);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--ab);
  border-radius: 6px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sg-ms-input:hover {
  border-color: var(--at3);
}
.sg-ms-input:focus {
  outline: none;
  border-color: var(--agd);
  box-shadow: 0 0 0 2px var(--agd);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--agd) 30%, transparent);
  }
}
.victory-screen {
  opacity: 1;
  background-color: rgba(6, 4, 2, 0.9);
  transition: opacity 0.4s ease;
  animation: victoryWash 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.victory-screen.victory-hidden {
  opacity: 0;
  pointer-events: none;
}
@keyframes victoryWash {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.victory-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 55% at 50% 38%, rgba(230, 178, 46, 0.18), transparent 60%), linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.55));
}
.victory-content {
  animation: victoryRise 0.85s 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes victoryRise {
  0% {
    opacity: 0;
    transform: translateY(34px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.victory-stat {
  background: linear-gradient(180deg, rgba(20, 15, 8, 0.55), rgba(8, 6, 3, 0.55));
  border: 1px solid rgba(184, 150, 26, 0.28);
  border-radius: 0.6rem;
  box-shadow: inset 0 1px 0 rgba(255, 224, 102, 0.06), 0 6px 18px rgba(0, 0, 0, 0.45);
}
.defeat-screen {
  opacity: 1;
  background-color: rgba(8, 3, 3, 0.9);
  transition: opacity 0.4s ease;
  animation: defeatWash 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.defeat-screen.defeat-hidden {
  opacity: 0;
  pointer-events: none;
}
@keyframes defeatWash {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.defeat-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 55% at 50% 38%, rgba(220, 38, 38, 0.16), transparent 60%), linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.6));
}
.defeat-stat {
  background: linear-gradient(180deg, rgba(24, 8, 8, 0.55), rgba(8, 4, 4, 0.55));
  border: 1px solid rgba(220, 38, 38, 0.26);
  border-radius: 0.6rem;
  box-shadow: inset 0 1px 0 rgba(255, 120, 120, 0.05), 0 6px 18px rgba(0, 0, 0, 0.5);
}
.defeat-glow-text {
  color: #f87171;
  text-shadow: 0 0 20px rgba(239, 68, 68, 0.6), 0 0 40px rgba(239, 68, 68, 0.35);
}
.explore-screen {
  background-color: rgba(6, 5, 3, 0.9);
  animation: exploreWash 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes exploreWash {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.explore-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 55% at 50% 30%, rgba(184, 150, 26, 0.10), transparent 62%), linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.5));
}
.explore-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(6, 5, 3, 0.94) 2%, rgba(6, 5, 3, 0.2) 42%, transparent 68%);
}
.overlay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 11rem;
  padding: 0.7rem 1.5rem;
  font-family: var(--font-gothic);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #d6cdbd;
  border: 1px solid rgba(214, 205, 189, 0.22);
  border-radius: 0.45rem;
  background: linear-gradient(to bottom, rgba(38, 34, 28, 0.92), rgba(18, 16, 12, 0.92));
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  text-shadow: 1px 1px 2px #000;
  transition: all 0.18s ease;
  cursor: pointer;
}
.overlay-btn:hover {
  color: #fff;
  border-color: rgba(214, 205, 189, 0.4);
  background: linear-gradient(to bottom, rgba(52, 47, 38, 0.95), rgba(26, 23, 18, 0.95));
}
.overlay-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8);
}
.overlay-btn--gold {
  color: #e8ce97;
  border-color: rgba(184, 150, 26, 0.5);
}
.overlay-btn--gold:hover {
  color: #ffe066;
  border-color: rgba(230, 178, 46, 0.75);
  box-shadow: 0 0 14px rgba(230, 178, 46, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.overlay-btn--red {
  color: #f87171;
  border-color: rgba(220, 38, 38, 0.5);
}
.overlay-btn--red:hover {
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.75);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.overlay-btn--pill {
  min-width: 0;
  padding: 0.4rem 0.85rem;
  font-size: 0.62rem;
  border-radius: 9999px;
}
.vc-reveal {
  opacity: 0;
  animation: vcReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes vcReveal {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.xp-bar-fill-anim {
  transition: width 1.1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vc-badge-pop {
  opacity: 0;
  animation: vcBadgePopIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both, vcBadgePulse 1.4s ease-in-out infinite;
}
@keyframes vcBadgePopIn {
  0% {
    opacity: 0;
    transform: scale(0.4) translateY(4px);
  }
  65% {
    opacity: 1;
    transform: scale(1.18) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes vcBadgePulse {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}
.ess-orb {
  animation: orb-pulse 2s infinite ease-in-out;
  filter: drop-shadow(0 0 3px rgba(34, 211, 238, 0.8));
}
@keyframes orb-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(34, 211, 238, 0.6));
    opacity: 0.8;
  }
  50% {
    filter: drop-shadow(0 0 5px rgba(34, 211, 238, 1));
    opacity: 1;
  }
}
@keyframes heal-glow {
  0% {
    filter: drop-shadow(0 0 2px #22c55e) brightness(1.2);
    box-shadow: 0 0 0px #22c55e;
  }
  50% {
    filter: drop-shadow(0 0 10px #22c55e) brightness(1.5);
    box-shadow: inset 0 0 12px rgba(34, 197, 94, 0.8), 0 0 15px rgba(34, 197, 94, 0.6);
  }
  100% {
    filter: drop-shadow(0 0 2px #22c55e) brightness(1.2);
    box-shadow: 0 0 0px #22c55e;
  }
}
.heal-flash {
  animation: heal-glow 0.8s ease-in-out;
}
.animate-zoom-in {
  animation: zoomIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes zoomIn {
  0% {
    transform: scale(0.92);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.settings-modal-item {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 2.2rem;
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #938573;
  transition: color 0.3s ease;
  cursor: pointer;
  user-select: none;
}
.settings-modal-item:hover {
  color: #e8ce97;
}
.settings-modal-item::before {
  content: "♦";
  position: absolute;
  left: 0.8rem;
  color: #e8ce97;
  font-size: 14px;
  opacity: 0;
  transform: translateX(-8px) scale(0.6);
  transition: opacity 0.25s ease, transform 0.25s ease, text-shadow 0.25s ease;
  text-shadow: 0 0 0px transparent;
}
.settings-modal-item:hover::before {
  opacity: 1;
  transform: translateX(0) scale(1);
  text-shadow: 0 0 8px #e8ce97, 0 0 15px rgba(232, 206, 151, 0.6);
}
[data-game-theme="light"] .settings-modal-item {
  color: #7a6b57;
}
[data-game-theme="light"] .settings-modal-item:hover {
  color: #7a5e08;
}
[data-game-theme="light"] .settings-modal-item::before {
  color: #7a5e08;
}
[data-game-theme="light"] .settings-modal-item:hover::before {
  text-shadow: 0 0 8px #7a5e08, 0 0 15px rgba(122, 94, 8, 0.4);
}
.settings-modal-item--admin {
  color: #e0d5c1;
}
.settings-modal-item--admin:hover {
  color: #ffffff;
}
.settings-modal-item--admin::before {
  color: #e0d5c1;
}
.settings-modal-item--admin:hover::before {
  color: #ffffff;
  text-shadow: 0 0 8px #ffffff, 0 0 15px rgba(255, 255, 255, 0.5);
}
[data-game-theme="light"] .settings-modal-item--admin {
  color: #3d3529;
}
[data-game-theme="light"] .settings-modal-item--admin:hover {
  color: #1a1611;
}
[data-game-theme="light"] .settings-modal-item--admin::before {
  color: #3d3529;
}
[data-game-theme="light"] .settings-modal-item--admin:hover::before {
  color: #1a1611;
  text-shadow: 0 0 8px #3d3529, 0 0 15px rgba(61, 53, 41, 0.4);
}
.settings-modal-item--logout {
  color: #c82323;
}
.settings-modal-item--logout:hover {
  color: #ef4444;
}
.settings-modal-item--logout::before {
  color: #c82323;
}
.settings-modal-item--logout:hover::before {
  color: #ef4444;
  text-shadow: 0 0 8px #ef4444, 0 0 15px rgba(239, 68, 68, 0.5);
}
[data-game-theme="light"] .settings-modal-item--logout {
  color: #b91c1c;
}
[data-game-theme="light"] .settings-modal-item--logout:hover {
  color: #dc2626;
}
[data-game-theme="light"] .settings-modal-item--logout::before {
  color: #b91c1c;
}
[data-game-theme="light"] .settings-modal-item--logout:hover::before {
  color: #dc2626;
  text-shadow: 0 0 8px #dc2626, 0 0 15px rgba(220, 38, 38, 0.4);
}
@font-face {
  font-family: "Crystalline";
  src: url("/fonts/CrystallineNegative.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Crystalline Outline";
  src: url("/fonts/CrystallineOutline.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.crystal-title {
  font-family: "Crystalline", "Cinzel", serif;
  font-weight: 400;
  letter-spacing: 0.06em;
  background: linear-gradient( 160deg, #fff6e0 0%, #fcd9a0 22%, #f3a83b 48%, #e05616 70%, #a855f7 100% );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 22px rgba(243, 168, 59, 0.35));
}
body.dragging-ability #spellbook-modal {
  pointer-events: none;
}
.hammer-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  font-size: 1.75rem;
  line-height: 1;
  pointer-events: none;
  margin: -0.4rem 0 0 -0.3rem;
  filter: drop-shadow(0 0 4px rgba(255, 196, 87, 0.85));
  transition: transform 0.02s linear;
}
body.hammer-armed, body.hammer-armed [data-index], body.hammer-armed [data-slot] {
  cursor: crosshair;
}
body.hammer-armed [data-index][data-name]:not([data-name=""]), body.hammer-armed [data-slot] {
  box-shadow: 0 0 0 2px rgba(255, 196, 87, 0.45) inset;
}
.thinking-dots {
  display: inline-flex;
  margin-left: 1px;
}
.thinking-dots > span {
  animation: thinking-blink 1.2s infinite both;
}
.thinking-dots > span:nth-child(2) {
  animation-delay: 0.2s;
}
.thinking-dots > span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes thinking-blink {
  0%, 80%, 100% {
    opacity: 0.2;
  }
  40% {
    opacity: 1;
  }
}
#world-atlas {
  cursor: grab;
  background: var(--abg);
}
#world-atlas:active {
  cursor: grabbing;
}
#world-atlas .wm-svg {
  display: block;
}
.wm-frame {
  fill: none;
  stroke: var(--ab);
  stroke-width: 2;
  stroke-dasharray: 10 8;
  opacity: 0.5;
}
.wm-bg {
  opacity: 0.96;
}
.wm-map-title-bar {
  fill: var(--asf);
  stroke: var(--ab2);
  stroke-width: 2;
  opacity: 0.92;
}
#world-atlas.wm-editing .wm-map-title-bar {
  cursor: grab;
}
#world-atlas.wm-editing .wm-map-title-bar:active {
  cursor: grabbing;
}
.wm-map-title {
  font-family: 'Cinzel', serif;
  font-size: 44px;
  font-weight: 700;
  fill: var(--agd);
  paint-order: stroke;
  stroke: rgba(0,0,0,0.6);
  stroke-width: 5px;
  pointer-events: none;
}
.wm-road {
  stroke: var(--ab2);
  stroke-width: 3;
  opacity: 0.55;
  transition: opacity 0.15s, stroke 0.15s;
}
.wm-road--hi {
  stroke: var(--agd);
  opacity: 1;
  filter: drop-shadow(0 0 5px var(--agd));
}
.wm-road--dim {
  opacity: 0.12;
}
.wm-road--cross {
  stroke: var(--agd);
  stroke-dasharray: 14 10;
  opacity: 0.8;
}
.wm-panel {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  max-height: 60%;
  overflow-y: auto;
  background: var(--asf);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--asf) 92%, transparent);
  }
  border: 1px solid var(--ab);
  padding: 4px;
  min-width: 160px;
  backdrop-filter: blur(2px);
}
.wm-panel-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  cursor: default;
  border-left: 2px solid transparent;
}
.wm-panel-row--active {
  background: var(--ael);
  border-left-color: var(--agd);
}
.wm-panel-name {
  flex: 1;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  color: var(--at1);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wm-eye, .wm-del {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 2px;
  color: var(--at2);
}
.wm-del:hover {
  color: var(--acr2);
}
.wm-pin {
  cursor: pointer;
  transition: opacity 0.15s;
}
#world-atlas.wm-editing .wm-pin {
  cursor: grab;
}
#world-atlas.wm-editing .wm-pin:active {
  cursor: grabbing;
}
.wm-pin-ring {
  fill: var(--asf);
  stroke: var(--agd2);
  stroke-width: 7;
}
.wm-pin-fill {
  fill: var(--ael);
}
.wm-pin-glyph {
  font-size: 82px;
}
.wm-pin-label {
  font-family: 'Cinzel', serif;
  font-size: 56px;
  font-weight: 600;
  fill: var(--at1);
  paint-order: stroke;
  stroke: rgba(0,0,0,0.75);
  stroke-width: 9px;
}
.wm-pin-pill {
  fill: var(--asf);
  stroke: var(--agd);
  stroke-width: 5;
}
.wm-pin-pill-text {
  fill: var(--agd);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 34px;
}
.wm-pin--hi .wm-pin-ring {
  stroke: var(--agd);
  filter: drop-shadow(0 0 8px var(--agd));
}
.wm-pin--dim {
  opacity: 0.28;
}
#atlas-modal {
  --abg: #211e19;
  --asf: #2a2620;
  --ael: #342f27;
  --ab: #4d4231;
  --ab2: #6b5838;
  --at1: #ece1cd;
  --at2: #b3a78d;
  --at3: #7d715a;
  --agd: #cda64a;
  --agd2: #8c6d28;
  --acr: #8a1a1a;
  --acr2: #aa2828;
  --agr: #3f7d3c;
  --abl: #4a6a9a;
}
#player-atlas {
  cursor: grab;
}
#player-atlas:active {
  cursor: grabbing;
}
.atlas-index {
  background: linear-gradient(180deg, rgba(20,16,10,0.6), rgba(10,8,5,0.6));
  border-right: 1px solid #3a2f23;
  padding: 6px;
}
.atlas-index-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  margin-bottom: 3px;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #b3a78d;
  background: rgba(255,255,255,0.02);
  border: 1px solid transparent;
  border-left: 3px solid #4d4231;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.atlas-index-item:hover {
  background: rgba(205,166,74,0.08);
  color: #e8ce97;
}
.atlas-index-item--active {
  background: rgba(205,166,74,0.14);
  color: #e8ce97;
  border-left-color: #cda64a;
}
.atlas-zone-detail {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  background: #17120c;
  border-left: 1px solid #3a2f23;
  transform: translateX(100%);
  transition: transform 0.28s ease;
  pointer-events: none;
}
.atlas-zone-detail--open {
  transform: translateX(0);
  pointer-events: auto;
}
.atlas-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid #3a2f23;
  padding: 10px 12px;
}
.atlas-here-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #e8ce97;
  padding: 2px 9px;
  border: 1px solid #8c6d28;
  border-radius: 999px;
  background: rgba(205,166,74,0.10);
}
.wm-fog {
  fill: #06060c;
  fill-opacity: 0.92;
  pointer-events: none;
}
.atlas-index-item--locked {
  opacity: 0.5;
}
.wm-pin--current .wm-pin-ring {
  stroke: var(--agd);
  stroke-width: 9;
  animation: wm-pulse 1.6s ease-in-out infinite;
}
@keyframes wm-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 3px var(--agd));
  }
  50% {
    filter: drop-shadow(0 0 13px var(--agd));
  }
}
@keyframes exp-card-flip-in {
  from {
    opacity: 0;
    transform: perspective(600px) rotateX(35deg) translateY(8px);
  }
  to {
    opacity: 1;
    transform: perspective(600px) rotateX(0) translateY(0);
  }
}
.exp-card {
  animation: exp-card-flip-in 0.45s ease-out backwards;
}
@keyframes exp-toast-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.exp-toast {
  animation: exp-toast-in 0.35s ease-out backwards;
}
@keyframes exp-ember {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
.exp-ember-flicker {
  animation: exp-ember 1.6s ease-in-out infinite;
}
@keyframes exp-fire-glow {
  0%, 100% {
    opacity: 0.55;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 0.85;
    transform: translateX(-50%) scale(1.06);
  }
}
.exp-fire-glow {
  animation: exp-fire-glow 2.8s ease-in-out infinite;
}
.bf-figure.rank-elite .bf-portrait {
  box-shadow: 0 0 0 2px rgba(240,177,50,0.55), 0 0 14px rgba(240,177,50,0.35);
  border-radius: 6px;
}
.bf-figure.rank-boss .bf-portrait {
  box-shadow: 0 0 0 2px rgba(192,132,252,0.65), 0 0 20px rgba(192,132,252,0.45);
  border-radius: 6px;
}
.bf-figure.rank-boss .bf-bars {
  transform: scale(1.06);
  transform-origin: top center;
}
.bf-figure.enraged .bf-portrait::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 9px;
  pointer-events: none;
  box-shadow: 0 0 12px 3px rgba(255,72,72,0.7);
  opacity: 0;
  animation: fx-glow-pulse 1.5s ease-in-out infinite;
}
.bf-telegraph {
  position: absolute;
  top: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.14rem 0.5rem;
  border-radius: 9999px;
  background: linear-gradient(180deg, rgba(120,20,20,0.96), rgba(70,10,10,0.96));
  border: 1px solid rgba(255,120,120,0.85);
  color: #ffdada;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  animation: bf-telegraph-pulse 0.9s ease-in-out infinite;
  pointer-events: none;
}
.bf-telegraph i {
  color: #ffd166;
}
@keyframes bf-telegraph-pulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.9;
  }
  50% {
    transform: translateX(-50%) scale(1.08);
    opacity: 1;
  }
}
.bf-auto-badge {
  position: absolute;
  top: -0.55rem;
  right: 1.9rem;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 9999px;
  background: linear-gradient(180deg, rgba(28,62,42,0.97), rgba(10,28,18,0.97));
  border: 1px solid rgba(74,222,128,0.9);
  color: #9af5b8;
  font-size: 11px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.55), 0 0 8px rgba(74,222,128,0.35);
  animation: bf-auto-pulse 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bf-auto-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.92;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}
.grimoire-tome {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1120px, calc(97vw - 52px));
  height: min(830px, 94vh);
  padding: 16px;
  border-radius: 12px;
  background: radial-gradient(ellipse at 20% 0%, rgba(120, 84, 40, 0.22), transparent 55%), radial-gradient(ellipse at 85% 100%, rgba(90, 50, 24, 0.18), transparent 50%), linear-gradient(135deg, #332415 0%, #241810 42%, #1a1109 100%);
  border: 1px solid #6b5433;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 0 46px rgba(0, 0, 0, 0.55), 0 24px 70px rgba(0, 0, 0, 0.85), 0 0 42px rgba(230, 178, 46, 0.07);
}
.grimoire-tome::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(230, 178, 46, 0.25);
  border-radius: 8px;
  pointer-events: none;
}
.grim-corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(230, 178, 46, 0.5);
  pointer-events: none;
  z-index: 3;
}
.grim-corner-tl {
  top: 10px;
  left: 10px;
  border-right: none;
  border-bottom: none;
  border-top-left-radius: 8px;
}
.grim-corner-tr {
  top: 10px;
  right: 10px;
  border-left: none;
  border-bottom: none;
  border-top-right-radius: 8px;
}
.grim-corner-bl {
  bottom: 10px;
  left: 10px;
  border-right: none;
  border-top: none;
  border-bottom-left-radius: 8px;
}
.grim-corner-br {
  bottom: 10px;
  right: 10px;
  border-left: none;
  border-top: none;
  border-bottom-right-radius: 8px;
}
.grim-edge-gem {
  position: absolute;
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #f6e3b0 10%, #b8961a 55%, #6b5433);
  border: 1px solid #171208;
  box-shadow: 0 0 8px rgba(230, 178, 46, 0.55), inset 0 1px 1px rgba(255, 245, 220, 0.6);
  z-index: 3;
  pointer-events: none;
}
.grim-edge-gem.gem-top {
  top: 3px;
  left: 50%;
  margin-left: -4.5px;
}
.grim-edge-gem.gem-bottom {
  bottom: 3px;
  left: 50%;
  margin-left: -4.5px;
}
.grim-edge-gem.gem-left {
  left: 3px;
  top: 78%;
  margin-top: -4.5px;
}
.grim-edge-gem.gem-right {
  right: 3px;
  top: 78%;
  margin-top: -4.5px;
}
.grimoire-page {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  border: 1px solid rgba(122, 96, 58, 0.5);
  background: radial-gradient(ellipse at 50% -10%, rgba(230, 200, 140, 0.07), transparent 60%), radial-gradient(ellipse at 50% 115%, rgba(0, 0, 0, 0.5), transparent 55%), linear-gradient(180deg, #211b13 0%, #1b1610 55%, #171208 100%);
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.65), inset 0 0 4px rgba(230, 200, 140, 0.06);
  overflow: hidden;
}
.grimoire-title {
  font-family: var(--font-gothic);
  font-weight: 900;
  letter-spacing: 0.22em;
  background: linear-gradient(180deg, #f6e3b0 15%, #e6b22e 55%, #9c7418 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 12px rgba(230, 178, 46, 0.28)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.9));
}
.grimoire-rule {
  height: 8px;
  background: linear-gradient(to right, transparent, rgba(230, 178, 46, 0.55) 18%, rgba(230, 178, 46, 0.55) 82%, transparent) center / 100% 1px no-repeat;
  position: relative;
}
.grimoire-rule::after {
  content: '❖';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  color: rgba(230, 178, 46, 0.8);
  font-size: 9px;
  background: transparent;
  text-shadow: 0 0 8px rgba(230, 178, 46, 0.5);
}
.grimoire-tabs {
  position: absolute;
  top: 84px;
  right: -44px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 4;
}
.grimoire-tab {
  --tab-tint: 230, 178, 46;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 0 14px;
  width: 44px;
  min-height: 116px;
  writing-mode: vertical-rl;
  border-radius: 0 8px 8px 0;
  border: 1px solid rgba(var(--tab-tint), 0.35);
  border-left: none;
  background: linear-gradient(90deg, #241a10, #17100a);
  color: #8d7c60;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.65), inset 1px 0 0 rgba(0, 0, 0, 0.8);
  filter: brightness(0.68) saturate(0.85);
  transition: all 0.2s ease;
}
.grimoire-tab i {
  writing-mode: horizontal-tb;
  font-size: 12px;
  opacity: 0.8;
}
.grimoire-tab:hover {
  color: rgb(var(--tab-tint));
  filter: brightness(1);
  transform: translateX(-3px);
  box-shadow: 4px 3px 14px rgba(0, 0, 0, 0.7), 0 0 10px rgba(var(--tab-tint), 0.18);
}
.grimoire-tab.active {
  color: rgb(var(--tab-tint));
  background: linear-gradient(90deg, rgba(var(--tab-tint), 0.32) 0%, rgba(var(--tab-tint), 0.12) 100%), linear-gradient(90deg, #322511 0%, #1d1409 100%);
  border: 1px solid rgba(var(--tab-tint), 0.8);
  filter: none;
  transform: translateX(-9px) scale(1.11);
  z-index: 6;
  box-shadow: -8px 2px 16px -6px rgba(0, 0, 0, 0.85), 6px 0 18px rgba(0, 0, 0, 0.6), 0 0 22px rgba(var(--tab-tint), 0.32), inset 0 0 16px rgba(var(--tab-tint), 0.12);
  text-shadow: 0 0 10px rgba(var(--tab-tint), 0.95);
}
.grimoire-tab.active i {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(var(--tab-tint), 0.8));
}
@media (max-width: 900px) {
  .grimoire-tome {
    width: min(1120px, 97vw);
  }
  .grimoire-tabs {
    position: static;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
  }
  .grimoire-tab {
    writing-mode: horizontal-tb;
    flex-direction: row;
    width: auto;
    min-height: 0;
    padding: 8px 14px;
    border-radius: 8px 8px 0 0;
    border-left: 1px solid rgba(var(--tab-tint), 0.35);
    border-bottom: none;
  }
  .grimoire-tab:hover {
    transform: translateY(-1px);
  }
  .grimoire-tab.active {
    width: auto;
    transform: translateY(3px) scale(1.05);
    border: 1px solid rgba(var(--tab-tint), 0.8);
    border-bottom: none;
  }
}
.grimoire-scroll {
  scrollbar-width: thin;
  scrollbar-color: #6b5433 rgba(0, 0, 0, 0.3);
}
.grimoire-scroll::-webkit-scrollbar {
  width: 8px;
}
.grimoire-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.35);
}
.grimoire-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6b5433, #45321e);
  border-radius: 4px;
  border: 1px solid #171208;
}
.grim-spell-card {
  --school: 230, 178, 46;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  border: 1px solid rgba(var(--school), 0.28);
  background: radial-gradient(ellipse at 18% 0%, rgba(var(--school), 0.10), transparent 55%), linear-gradient(160deg, rgba(20, 16, 10, 0.92), rgba(10, 8, 5, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 3px 10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.grim-spell-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--school), 0.7);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.65), 0 0 18px rgba(var(--school), 0.22);
}
.grim-spell-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 240, 200, 0.09) 48%, transparent 60%);
  transform: translateX(-110%);
  pointer-events: none;
}
.grim-spell-card:hover::after {
  animation: grim-glint 0.9s ease forwards;
}
@keyframes grim-glint {
  to {
    transform: translateX(110%);
  }
}
.grim-spell-seal {
  position: relative;
  width: 52px;
  height: 52px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 9999px;
  border: 2px solid rgba(var(--school), 0.55);
  background: radial-gradient(circle at 50% 38%, rgba(var(--school), 0.28), rgba(0, 0, 0, 0.85) 75%);
  box-shadow: 0 0 14px rgba(var(--school), 0.3), inset 0 0 10px rgba(0, 0, 0, 0.8);
  text-shadow: 0 0 10px rgba(var(--school), 0.7);
}
.grim-spell-seal::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 9999px;
  border: 1px dashed rgba(var(--school), 0.3);
}
.grim-spell-card:hover .grim-spell-seal::before {
  animation: grim-orbit 7s linear infinite;
}
@keyframes grim-orbit {
  to {
    transform: rotate(360deg);
  }
}
.grim-rank-gem {
  color: rgba(120, 104, 78, 0.5);
  font-size: 9px;
}
.grim-rank-gem.lit {
  color: rgb(var(--school));
  text-shadow: 0 0 6px rgba(var(--school), 0.8);
}
.grim-school-chip {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--school));
  text-shadow: 0 0 8px rgba(var(--school), 0.5);
}
.grim-skill-row {
  position: relative;
  border-radius: 6px;
  border: 1px solid rgba(122, 96, 58, 0.35);
  background: linear-gradient(160deg, rgba(22, 17, 11, 0.92), rgba(12, 9, 6, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 3px 8px rgba(0, 0, 0, 0.45);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.grim-skill-row:hover {
  border-color: rgba(230, 178, 46, 0.5);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 12px rgba(230, 178, 46, 0.1);
}
.grim-xp-vial {
  position: relative;
  height: 14px;
  border-radius: 7px;
  border: 1px solid rgba(122, 96, 58, 0.55);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(20, 15, 8, 0.9));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}
.grim-xp-fill {
  position: absolute;
  inset: 1px auto 1px 1px;
  border-radius: 6px;
  background: linear-gradient(180deg, #f0cd7a, #b98a24 55%, #8a6316);
  box-shadow: 0 0 8px rgba(230, 178, 46, 0.4);
  transition: width 0.4s ease;
}
.grim-xp-fill.ready {
  animation: grim-vial-pulse 1.4s ease-in-out infinite;
}
@keyframes grim-vial-pulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(230, 178, 46, 0.35);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 16px rgba(230, 178, 46, 0.75);
    filter: brightness(1.25);
  }
}
.grim-train-btn {
  font-family: var(--font-gothic);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  font-size: 10px;
  padding: 7px 14px;
  border-radius: 4px;
  color: #ffe9b3;
  border: 1px solid rgba(230, 178, 46, 0.75);
  background: linear-gradient(180deg, #5d4514, #3a2a0a);
  box-shadow: 0 0 12px rgba(230, 178, 46, 0.25), inset 0 1px 0 rgba(255, 230, 160, 0.25);
  text-shadow: 0 1px 2px #000;
  cursor: pointer;
  transition: all 0.15s ease;
  animation: grim-vial-pulse 1.6s ease-in-out infinite;
}
.grim-train-btn:hover:not(:disabled) {
  filter: brightness(1.25);
  transform: translateY(-1px);
}
.grim-train-btn:disabled {
  animation: none;
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.perk-tree-card {
  position: relative;
  border-radius: 8px;
  border: 1px solid rgba(122, 96, 58, 0.4);
  background: radial-gradient(ellipse at 50% 118%, rgba(230, 178, 46, 0.08), transparent 55%), linear-gradient(180deg, rgba(16, 13, 9, 0.95), rgba(9, 7, 4, 0.97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 4px 14px rgba(0, 0, 0, 0.55);
  overflow: visible;
}
.perk-root {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border-radius: 9999px;
  border: 2px solid rgba(230, 178, 46, 0.6);
  background: radial-gradient(circle at 50% 35%, rgba(230, 178, 46, 0.22), rgba(0, 0, 0, 0.9) 75%);
  box-shadow: 0 0 16px rgba(230, 178, 46, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.8);
}
.perk-node {
  position: relative;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 2px solid rgba(110, 96, 72, 0.5);
  background: radial-gradient(circle at 50% 35%, rgba(60, 52, 38, 0.6), rgba(5, 4, 2, 0.95) 75%);
  color: #6e6048;
  font-size: 14px;
  cursor: default;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.perk-node.owned {
  border-color: rgba(120, 224, 160, 0.8);
  color: #a8f0c8;
  background: radial-gradient(circle at 50% 35%, rgba(52, 168, 104, 0.35), rgba(2, 12, 6, 0.95) 75%);
  box-shadow: 0 0 14px rgba(80, 200, 130, 0.4), inset 0 0 8px rgba(80, 200, 130, 0.2);
  text-shadow: 0 0 8px rgba(120, 240, 170, 0.8);
}
.perk-node.available {
  border-color: rgba(230, 178, 46, 0.85);
  color: #f0d48a;
  cursor: pointer;
  background: radial-gradient(circle at 50% 35%, rgba(230, 178, 46, 0.25), rgba(12, 9, 2, 0.95) 75%);
  animation: perk-beckon 1.8s ease-in-out infinite;
}
.perk-node.available:hover {
  transform: scale(1.14);
}
@keyframes perk-beckon {
  0%, 100% {
    box-shadow: 0 0 8px rgba(230, 178, 46, 0.3);
  }
  50% {
    box-shadow: 0 0 18px rgba(230, 178, 46, 0.65);
  }
}
.perk-node.affordless {
  border-color: rgba(160, 130, 70, 0.4);
  color: #93805e;
}
.perk-node.locked {
  opacity: 0.55;
}
.perk-node.locked::after {
  content: '\1F512';
  position: absolute;
  bottom: -4px;
  right: -4px;
  font-size: 10px;
  filter: grayscale(1) brightness(0.8);
}
.perk-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 215px;
  padding: 9px 11px;
  border-radius: 6px;
  border: 1px solid rgba(230, 178, 46, 0.5);
  background: linear-gradient(180deg, rgba(30, 24, 14, 0.98), rgba(14, 11, 6, 0.98));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8), 0 0 14px rgba(230, 178, 46, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 40;
  text-align: left;
}
.perk-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid rgba(230, 178, 46, 0.5);
}
.perk-node:hover .perk-tip, .perk-root:hover .perk-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.perk-points-gem {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #f0d48a;
  text-shadow: 0 0 8px rgba(230, 178, 46, 0.6);
}
[data-game-theme="light"] .grimoire-tome {
  background: linear-gradient(135deg, #8a6a42 0%, #6e5232 60%, #5a4126 100%);
  border-color: #4a3620;
}
[data-game-theme="light"] .grimoire-page {
  background: linear-gradient(180deg, #efe3c8 0%, #e6d7b6 60%, #dccaa4 100%);
  border-color: rgba(90, 65, 38, 0.5);
  box-shadow: inset 0 0 30px rgba(90, 65, 38, 0.25);
}
.grim-camp-header {
  --camp: 230, 178, 46;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 4px 2px 10px;
  padding: 2px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-gothic);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgb(var(--camp));
  text-shadow: 0 0 10px rgba(var(--camp), 0.45);
  transition: filter 0.15s ease;
}
.grim-camp-header:hover {
  filter: brightness(1.25);
}
.grim-camp-header i {
  font-size: 12px;
  opacity: 0.9;
}
.grim-camp-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(var(--camp), 0.45), rgba(var(--camp), 0.08));
}
.grim-camp-fold {
  flex: none;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(var(--camp), 0.35);
  background: rgba(0, 0, 0, 0.35);
}
.grim-camp-fold i {
  font-size: 8px;
  transition: transform 0.25s ease;
}
.grim-camp-count {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0;
  color: rgba(var(--camp), 0.75);
  border: 1px solid rgba(var(--camp), 0.35);
  border-radius: 9999px;
  padding: 1px 7px;
  background: rgba(0, 0, 0, 0.4);
}
.grim-back-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 9px;
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c8af7a;
  border: 1px solid rgba(230, 178, 46, 0.35);
  border-left: 3px solid rgba(230, 178, 46, 0.65);
  border-radius: 0 4px 4px 0;
  background: linear-gradient(90deg, rgba(230, 178, 46, 0.12), rgba(0, 0, 0, 0.3));
  cursor: pointer;
  transition: all 0.15s ease;
}
.grim-back-ribbon:hover {
  color: #f0d48a;
  transform: translateX(-2px);
  box-shadow: 0 0 10px rgba(230, 178, 46, 0.15);
}
.grim-spread {
  --school: 230, 178, 46;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 14px;
  position: relative;
  min-height: 380px;
}
@media (max-width: 900px) {
  .grim-spread {
    grid-template-columns: 1fr;
  }
}
.grim-leaf {
  position: relative;
  padding: 22px 24px 34px;
  border: 1px solid rgba(140, 112, 68, 0.4);
  background: radial-gradient(ellipse at 50% -20%, rgba(235, 205, 150, 0.06), transparent 55%), linear-gradient(180deg, rgba(48, 39, 26, 0.55), rgba(32, 26, 17, 0.6) 60%, rgba(26, 21, 13, 0.65));
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.35);
}
.grim-leaf-left {
  border-radius: 10px 3px 3px 10px;
  box-shadow: inset -26px 0 30px -22px rgba(0, 0, 0, 0.8), inset 0 0 26px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.grim-leaf-right {
  border-radius: 3px 10px 10px 3px;
  box-shadow: inset 26px 0 30px -22px rgba(0, 0, 0, 0.8), inset 0 0 26px rgba(0, 0, 0, 0.3);
}
@media (max-width: 900px) {
  .grim-leaf, .grim-leaf-left, .grim-leaf-right {
    border-radius: 8px;
  }
}
.grim-kind-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 13px;
  border-radius: 9999px;
  border: 1px solid rgba(var(--school), 0.45);
  background: rgba(var(--school), 0.09);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--school));
  text-shadow: 0 0 8px rgba(var(--school), 0.5);
}
.grim-leaf-note {
  font-size: 12px;
  color: #c9bb9e;
}
.grim-leaf-note strong {
  color: rgb(var(--school));
}
.grim-leaf-folio {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: #8d7c60;
}
.grim-entry-heading {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: #a08c68;
  margin-bottom: 6px;
}
.grim-rank-ladder {
  border: 1px solid rgba(122, 96, 58, 0.3);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.25);
}
.grim-rank-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 12px;
  font-size: 11px;
  color: #93856a;
}
.grim-rank-row + .grim-rank-row {
  border-top: 1px solid rgba(122, 96, 58, 0.16);
}
.grim-rank-row.known {
  color: #d9cba8;
  background: rgba(230, 178, 46, 0.05);
}
.grim-rank-name {
  font-weight: 700;
  min-width: 52px;
}
.grim-rank-stat {
  min-width: 86px;
}
.grim-rank-status {
  margin-left: auto;
  font-size: 10px;
  font-style: italic;
}
.grim-rank-row.known .grim-rank-status {
  color: #8fd6a8;
  font-style: normal;
}
.grim-detail-stage {
  position: relative;
  width: 210px;
  height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grim-detail-halo {
  position: absolute;
  inset: 12px;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(var(--school), 0.28), transparent 65%);
  animation: grim-halo-breathe 3.2s ease-in-out infinite;
}
@keyframes grim-halo-breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.06);
    opacity: 0.95;
  }
}
.grim-detail-seal {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  border-radius: 9999px;
  border: 2px solid rgba(var(--school), 0.6);
  background: radial-gradient(circle at 50% 36%, rgba(var(--school), 0.3), rgba(0, 0, 0, 0.88) 74%);
  box-shadow: 0 0 34px rgba(var(--school), 0.35), inset 0 0 22px rgba(0, 0, 0, 0.8);
  text-shadow: 0 0 24px rgba(var(--school), 0.8);
  animation: grim-halo-breathe 3.2s ease-in-out infinite;
}
.grim-detail-seal::before, .grim-detail-seal::after {
  content: '';
  position: absolute;
  border-radius: 9999px;
  border: 1px dashed rgba(var(--school), 0.35);
}
.grim-detail-seal::before {
  inset: -12px;
  animation: grim-orbit 14s linear infinite;
}
.grim-detail-seal::after {
  inset: -24px;
  border-style: dotted;
  animation: grim-orbit 22s linear infinite reverse;
}
.grim-detail-caption {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(var(--school), 0.9);
  text-shadow: 0 0 10px rgba(var(--school), 0.5);
}
.grim-mote {
  position: absolute;
  bottom: 34px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: rgb(var(--school));
  box-shadow: 0 0 8px rgba(var(--school), 0.9);
  opacity: 0;
  pointer-events: none;
}
.grim-ray {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 96px;
  margin: -48px 0 0 -1px;
  border-radius: 2px;
  background: linear-gradient(to top, transparent, rgba(var(--school), 0.75), transparent);
  transform-origin: center;
  animation: grim-ray-pulse 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes grim-ray-pulse {
  0%, 100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.9;
  }
}
.grim-camp-fire .grim-mote {
  animation: grim-ember-rise 2.2s ease-out infinite;
}
@keyframes grim-ember-rise {
  0% {
    transform: translate(var(--mote-x, 0px), 0) scale(1);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(var(--mote-x, 0px) * 1.4), -120px) scale(0.35);
    opacity: 0;
  }
}
.grim-camp-death .grim-mote {
  animation: grim-wisp-drift 3.4s ease-in-out infinite;
}
@keyframes grim-wisp-drift {
  0% {
    transform: translate(var(--mote-x, 0px), 0) rotate(0deg);
    opacity: 0;
  }
  20% {
    opacity: 0.9;
  }
  55% {
    opacity: 0.35;
  }
  75% {
    opacity: 0.8;
  }
  100% {
    transform: translate(calc(var(--mote-x, 0px) * -1), -95px) rotate(24deg);
    opacity: 0;
  }
}
.grim-camp-water .grim-mote {
  animation: grim-droplet-bob 2.8s ease-in-out infinite;
}
@keyframes grim-droplet-bob {
  0%, 100% {
    transform: translate(var(--mote-x, 0px), 0);
    opacity: 0.25;
  }
  50% {
    transform: translate(var(--mote-x, 0px), -60px);
    opacity: 0.95;
  }
}
.grim-camp-water .grim-detail-seal {
  animation: grim-tide-sway 5s ease-in-out infinite;
}
@keyframes grim-tide-sway {
  0%, 100% {
    transform: rotate(-2.5deg);
  }
  50% {
    transform: rotate(2.5deg);
  }
}
.grim-camp-earth .grim-mote {
  animation: grim-dust-fall 4s linear infinite;
}
@keyframes grim-dust-fall {
  0% {
    transform: translate(var(--mote-x, 0px), -110px);
    opacity: 0;
  }
  30% {
    opacity: 0.55;
  }
  100% {
    transform: translate(calc(var(--mote-x, 0px) * 1.2), 10px);
    opacity: 0;
  }
}
.grim-camp-air .grim-mote {
  animation: grim-gust-orbit 3.5s linear infinite;
}
@keyframes grim-gust-orbit {
  0% {
    transform: rotate(0deg) translateX(92px) rotate(0deg);
    opacity: 0;
  }
  12% {
    opacity: 0.9;
  }
  88% {
    opacity: 0.9;
  }
  100% {
    transform: rotate(360deg) translateX(92px) rotate(-360deg);
    opacity: 0;
  }
}
.grim-camp-physical .grim-mote {
  animation: grim-spark-arc 1.9s ease-out infinite;
}
@keyframes grim-spark-arc {
  0% {
    transform: translate(0, -20px) scale(0.6);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--mote-x, 20px), -80px) scale(0.2);
    opacity: 0;
  }
}
.grim-camp-life .grim-mote {
  animation: grim-droplet-bob 3.2s ease-in-out infinite reverse;
}
.grim-stat-table {
  border: 1px solid rgba(122, 96, 58, 0.35);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.grim-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 12px;
}
.grim-stat-row + .grim-stat-row {
  border-top: 1px solid rgba(122, 96, 58, 0.2);
}
.grim-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #a08c68;
}
.grim-stat-value {
  font-size: 13px;
  font-weight: 600;
  color: #f3ead5;
}
.grim-stat-value em {
  font-size: 10px;
  margin-left: 4px;
}
.grim-spread-drag {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px dashed rgba(230, 178, 46, 0.4);
  border-radius: 6px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c8af7a;
  background: rgba(230, 178, 46, 0.05);
  transition: all 0.15s ease;
}
.grim-spread-drag:hover {
  border-color: rgba(230, 178, 46, 0.8);
  box-shadow: 0 0 12px rgba(230, 178, 46, 0.15);
}
.grim-action-strip {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 10px 18px;
  border-top: 1px solid rgba(122, 96, 58, 0.4);
  background: radial-gradient(ellipse at 50% 0%, rgba(230, 178, 46, 0.06), transparent 60%), rgba(0, 0, 0, 0.35);
}
.grim-strip-label {
  align-self: center;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8d7c60;
  width: 58px;
  text-align: center;
}
.grim-strip-label i {
  font-size: 12px;
  color: rgba(230, 178, 46, 0.6);
}
.grim-bar-slot {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.grim-bar-slot.empty {
  border: 1px dashed rgba(122, 96, 58, 0.5);
  background: rgba(0, 0, 0, 0.25);
  color: #5d5344;
}
.grim-bar-slot.bound {
  border: 1px solid rgba(230, 178, 46, 0.45);
  background: linear-gradient(180deg, rgba(44, 36, 20, 0.85), rgba(16, 12, 6, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 230, 160, 0.08), 0 2px 6px rgba(0, 0, 0, 0.5);
}
.grim-bar-num {
  position: absolute;
  top: 2px;
  left: 5px;
  font-size: 8px;
  font-weight: 700;
  color: #6e6048;
}
.grim-bar-icon {
  font-size: 18px;
  line-height: 1;
  margin-top: 4px;
}
.grim-bar-name {
  max-width: 92%;
  font-size: 8px;
  font-weight: 600;
  color: #d9c9a3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grim-bar-empty-hint {
  font-size: 12px;
  opacity: 0.5;
}
.grim-bar-clear {
  position: absolute;
  top: 1px;
  right: 3px;
  font-size: 9px;
  color: #7a6b57;
  opacity: 0;
  transition: all 0.15s ease;
  cursor: pointer;
}
.grim-bar-slot:hover .grim-bar-clear {
  opacity: 1;
}
.grim-bar-clear:hover {
  color: #ff9b9b;
}
body.dragging-ability #grimoire-action-strip {
  pointer-events: auto;
}
.grim-dossier {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}
.grim-dossier.open {
  grid-template-rows: 1fr;
}
.grim-dossier-inner {
  min-height: 0;
  overflow: hidden;
}
.grim-dossier-content {
  margin: 0 14px;
  padding: 12px 4px 14px;
  border-top: 1px dashed rgba(122, 96, 58, 0.3);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.35s ease;
}
.grim-dossier.open .grim-dossier-content {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.08s;
}
.grim-dossier-title {
  font-family: var(--font-gothic);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #8d7c60;
  margin-bottom: 10px;
  text-align: center;
}
.grim-dossier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.grim-dossier-col ul {
  margin-top: 7px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.grim-dossier-col li {
  position: relative;
  padding-left: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: #c9bb9e;
}
.grim-dossier-col li::before {
  content: '✦';
  position: absolute;
  left: 0;
  top: 0;
  font-size: 8px;
  color: rgba(230, 178, 46, 0.6);
}
.grim-use-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid;
}
.grim-use-badge i {
  font-size: 9px;
}
.grim-use-combat {
  color: #ff9b7a;
  border-color: rgba(255, 122, 61, 0.4);
  background: rgba(255, 122, 61, 0.08);
}
.grim-use-utility {
  color: #8fd0e8;
  border-color: rgba(126, 214, 232, 0.4);
  background: rgba(126, 214, 232, 0.07);
}
.grim-use-checks {
  color: #b8e89a;
  border-color: rgba(134, 200, 118, 0.4);
  background: rgba(134, 200, 118, 0.08);
}
.constellation {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  border-radius: 6px;
  border: 1px solid rgba(80, 84, 120, 0.18);
  background: radial-gradient(1px 1px at 7% 11%, rgba(255, 248, 226, 0.55), transparent), radial-gradient(1px 1px at 21% 34%, rgba(255, 248, 226, 0.3), transparent), radial-gradient(1.4px 1.4px at 33% 8%, rgba(214, 226, 255, 0.5), transparent), radial-gradient(1px 1px at 47% 27%, rgba(255, 248, 226, 0.28), transparent), radial-gradient(1px 1px at 58% 9%, rgba(255, 248, 226, 0.42), transparent), radial-gradient(1.4px 1.4px at 72% 19%, rgba(255, 236, 200, 0.5), transparent), radial-gradient(1px 1px at 86% 7%, rgba(214, 226, 255, 0.4), transparent), radial-gradient(1px 1px at 93% 31%, rgba(255, 248, 226, 0.3), transparent), radial-gradient(1px 1px at 12% 56%, rgba(255, 248, 226, 0.32), transparent), radial-gradient(1.4px 1.4px at 27% 78%, rgba(214, 226, 255, 0.42), transparent), radial-gradient(1px 1px at 44% 62%, rgba(255, 248, 226, 0.25), transparent), radial-gradient(1px 1px at 63% 84%, rgba(255, 248, 226, 0.35), transparent), radial-gradient(1.4px 1.4px at 79% 58%, rgba(255, 236, 200, 0.45), transparent), radial-gradient(1px 1px at 91% 76%, rgba(214, 226, 255, 0.32), transparent), radial-gradient(1px 1px at 52% 94%, rgba(255, 248, 226, 0.28), transparent),  radial-gradient(ellipse 62% 42% at 74% 18%, rgba(122, 96, 220, 0.12), transparent 70%), radial-gradient(ellipse 55% 48% at 22% 62%, rgba(58, 118, 200, 0.1), transparent 70%), radial-gradient(ellipse 70% 40% at 50% 100%, rgba(230, 178, 46, 0.08), transparent 60%),  linear-gradient(180deg, #0d0c16 0%, #0a0910 55%, #070503 100%);
  overflow: visible;
}
.const-focus {
  max-width: 520px;
  margin: 0 auto;
  animation: grim-focus-in 0.3s ease;
}
@keyframes grim-focus-in {
  from {
    transform: scale(0.96);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.const-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.const-star {
  fill: rgba(255, 244, 214, 0.35);
  animation: grim-star-twinkle 4s ease-in-out infinite;
}
.const-star:nth-of-type(2n) {
  animation-delay: 1.3s;
}
.const-star:nth-of-type(3n) {
  animation-delay: 2.4s;
}
@keyframes grim-star-twinkle {
  0%, 100% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.9;
  }
}
.const-edge {
  stroke-width: 0.7;
  transition: stroke 0.3s ease, opacity 0.3s ease;
}
.const-edge.dim {
  stroke: rgba(230, 178, 46, 0.18);
}
.const-edge.half {
  stroke: rgba(230, 178, 46, 0.45);
}
.const-edge.lit {
  stroke: rgba(120, 224, 160, 0.85);
  stroke-width: 1;
  filter: drop-shadow(0 0 2px rgba(120, 224, 160, 0.7));
}
.perk-node.const, .perk-root.const {
  position: absolute;
  transform: translate(-50%, -50%);
  margin: 0;
}
.perk-node.const:hover {
  z-index: 60;
}
.perk-node.const.available:hover {
  transform: translate(-50%, -50%) scale(1.14);
}
.perk-node.mini {
  width: 15px;
  height: 15px;
  border-width: 1.5px;
  cursor: default;
  animation: none;
}
.perk-node.mini i {
  display: none;
}
.perk-node.mini.owned {
  box-shadow: 0 0 7px rgba(80, 200, 130, 0.55);
}
.perk-node.mini.available {
  box-shadow: 0 0 7px rgba(230, 178, 46, 0.55);
}
.perk-node.mini.locked::after {
  display: none;
}
.perk-root.mini {
  width: 24px;
  height: 24px;
  font-size: 11px;
  border-width: 1.5px;
}
.perk-focus-card {
  border-radius: 8px;
  border: 1px solid rgba(122, 96, 58, 0.4);
  background: linear-gradient(180deg, rgba(16, 13, 9, 0.95), rgba(9, 7, 4, 0.97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 4px 14px rgba(0, 0, 0, 0.55);
  padding: 14px 16px 18px;
  animation: grim-focus-in 0.3s ease;
}
.perk-tree-card .const-mini {
  pointer-events: none;
}
[data-game-theme="light"] .grim-stat-table, [data-game-theme="light"] .grim-action-strip {
  background: rgba(90, 65, 38, 0.08);
}
[data-game-theme="light"] .constellation {
  background: linear-gradient(180deg, rgba(40, 36, 52, 0.92), rgba(24, 20, 16, 0.95));
}
.grim-skill-badge {
  position: relative;
  width: 54px;
  height: 54px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 2px solid rgba(230, 178, 46, 0.4);
  background: radial-gradient(circle at 50% 35%, rgba(230, 178, 46, 0.14), rgba(0, 0, 0, 0.85) 75%);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8), 0 0 10px rgba(230, 178, 46, 0.12);
  overflow: hidden;
}
.grim-skill-badge-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  opacity: 0.32;
  filter: saturate(0.6) brightness(0.9);
}
.grim-skill-badge-lvl {
  position: relative;
  z-index: 1;
  font-family: var(--font-gothic);
  font-weight: 900;
  font-size: 19px;
  line-height: 1;
  color: #f0d48a;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.95), 0 2px 3px #000, 0 0 14px rgba(230, 178, 46, 0.4);
}
.grim-loadout-card {
  --arch: 230, 178, 46;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 16px 18px;
  border-radius: 8px;
  border: 1px solid rgba(var(--arch), 0.35);
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--arch), 0.12), transparent 55%), linear-gradient(180deg, rgba(16, 13, 9, 0.95), rgba(9, 7, 4, 0.97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 4px 14px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.grim-loadout-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--arch), 0.7);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.65), 0 0 18px rgba(var(--arch), 0.2);
}
.grim-loadout-ribbon {
  position: absolute;
  top: 16px;
  right: -34px;
  transform: rotate(38deg);
  padding: 3px 40px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffe9b3;
  background: linear-gradient(180deg, #5d4514, #3a2a0a);
  border: 1px solid rgba(230, 178, 46, 0.5);
  text-shadow: 0 1px 2px #000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.grim-loadout-emblem {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  border-radius: 9999px;
  border: 2px solid rgba(var(--arch), 0.55);
  background: radial-gradient(circle at 50% 36%, rgba(var(--arch), 0.28), rgba(0, 0, 0, 0.88) 75%);
  box-shadow: 0 0 18px rgba(var(--arch), 0.3), inset 0 0 12px rgba(0, 0, 0, 0.8);
  text-shadow: 0 0 14px rgba(var(--arch), 0.7);
}
.grim-loadout-card:hover .grim-loadout-emblem {
  animation: grim-halo-breathe 2.6s ease-in-out infinite;
}
.grim-loadout-role {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(var(--arch), 0.9);
  text-shadow: 0 0 8px rgba(var(--arch), 0.5);
}
.grim-loadout-plate {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 4px;
  border: 1px solid rgba(122, 96, 58, 0.45);
  border-bottom-color: rgba(230, 178, 46, 0.55);
  background: rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6);
}
.grim-loadout-plate i {
  font-size: 10px;
  color: #8d7c60;
}
.grim-loadout-name {
  width: 128px;
  background: transparent;
  border: none;
  outline: none;
  text-align: center;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #f0d48a;
  text-shadow: 0 1px 2px #000;
}
.grim-loadout-name:focus {
  text-shadow: 0 0 10px rgba(230, 178, 46, 0.5);
}
.grim-loadout-bar {
  display: flex;
  gap: 5px;
  margin-top: 2px;
}
.grim-loadout-slot {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: 5px;
  border: 1px solid rgba(var(--arch), 0.3);
  background: linear-gradient(180deg, rgba(30, 24, 14, 0.9), rgba(12, 9, 5, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  opacity: 0.85;
}
.grim-loadout-meta {
  display: flex;
  gap: 10px;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8d7c60;
}
.grim-loadout-meta i {
  color: rgba(var(--arch), 0.7);
  margin-right: 3px;
}
.grim-loadout-bind {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 4px;
  font-family: var(--font-gothic);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a4977c;
  border: 1px solid rgba(122, 96, 58, 0.5);
  background: linear-gradient(180deg, rgba(44, 36, 20, 0.6), rgba(16, 12, 6, 0.7));
  opacity: 0.6;
  cursor: not-allowed;
}
body:has(#spellbook-modal), body:has(#quests-modal), body:has(#craft-modal), body:has(#atlas-modal), body:has(#friends-modal) {
  overflow: hidden;
}
@media (max-width: 700px) {
  .grimoire-tome {
    width: 100vw;
    height: 100dvh;
    padding: 8px;
    border-radius: 0;
  }
  .grimoire-tome::before {
    inset: 4px;
    border-radius: 4px;
  }
  .grim-corner {
    width: 20px;
    height: 20px;
  }
  .grim-corner-tl, .grim-corner-tr {
    top: 6px;
  }
  .grim-corner-bl, .grim-corner-br {
    bottom: 6px;
  }
  .grim-corner-tl, .grim-corner-bl {
    left: 6px;
  }
  .grim-corner-tr, .grim-corner-br {
    right: 6px;
  }
  .grim-edge-gem {
    display: none;
  }
  .grimoire-tabs {
    gap: 4px;
    margin-bottom: 6px;
  }
  .grimoire-tab {
    padding: 7px 8px;
    font-size: 9px;
    letter-spacing: 0.08em;
    gap: 4px;
    min-height: 0;
  }
  .grimoire-tab i {
    font-size: 10px;
  }
  .grimoire-title {
    font-size: 1.75rem;
  }
  .grimoire-page > .text-center.pt-5 {
    padding-top: 0.75rem;
    padding-bottom: 0.4rem;
  }
  .grimoire-scroll {
    padding-left: 12px;
    padding-right: 12px;
  }
  .grim-action-strip {
    flex-wrap: wrap;
    padding: 8px 10px;
    gap: 6px;
  }
  .grim-strip-label {
    display: none;
  }
  .grim-bar-slot {
    flex: 1 1 30%;
    height: 48px;
  }
  .grim-leaf {
    padding: 16px 14px 30px;
  }
  .grim-detail-stage {
    width: 170px;
    height: 170px;
  }
  .grim-detail-seal {
    width: 118px;
    height: 118px;
    font-size: 50px;
  }
  .grim-rank-stat {
    min-width: 0;
  }
  .grim-rank-row {
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .grim-rank-status {
    flex-basis: 100%;
    margin-left: 21px;
  }
  .const-focus {
    max-width: 100%;
  }
  .perk-focus-card {
    padding: 10px 8px 14px;
  }
  .perk-tip {
    width: 180px;
  }
}
.exped-plate {
  position: relative;
  border-radius: 6px;
  border: 1px solid #6b5433;
  background: linear-gradient(160deg, #241a10, #14100a);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 16px rgba(230, 178, 46, 0.05);
  overflow: hidden;
}
.exped-plate img {
  filter: sepia(0.18) saturate(0.92) contrast(1.05);
  transition: filter 0.35s ease;
}
.exped-plate:hover img {
  filter: none;
}
.exped-plate-frame {
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(230, 178, 46, 0.25);
  border-radius: 3px;
  pointer-events: none;
  z-index: 2;
}
.exped-folio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-gothic);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #a08c68;
}
.exped-folio::before, .exped-folio::after {
  content: '✦';
  flex: none;
  color: rgba(230, 178, 46, 0.55);
  font-size: 8px;
  text-shadow: 0 0 6px rgba(230, 178, 46, 0.4);
}
.exped-gauge-cell {
  height: 13px;
  flex: 1;
  border-radius: 2px;
  border: 1px solid rgba(107, 84, 51, 0.5);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75), rgba(22, 17, 10, 0.9));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
  transition: background-color 0.5s, box-shadow 0.5s, border-color 0.5s;
}
.exped-gauge-cell.lit {
  border-color: rgba(var(--tint), 0.65);
  background: linear-gradient(180deg, rgba(var(--tint), 0.85), rgba(var(--tint), 0.45));
  box-shadow: 0 0 7px rgba(var(--tint), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.exped-seal {
  position: relative;
  border-radius: 9999px;
  background: radial-gradient(circle at 50% 38%, rgba(230, 178, 46, 0.18), rgba(0, 0, 0, 0.8) 75%);
  box-shadow: 0 0 12px rgba(230, 178, 46, 0.18), inset 0 0 8px rgba(0, 0, 0, 0.7);
}
.exped-seal::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  border: 1px dashed rgba(230, 178, 46, 0.3);
  pointer-events: none;
}
.exped-seal:hover::before {
  animation: grim-orbit 7s linear infinite;
}
.exped-tip {
  border-radius: 6px;
  border: 1px solid rgba(230, 178, 46, 0.5);
  background: linear-gradient(180deg, rgba(30, 24, 14, 0.98), rgba(14, 11, 6, 0.98));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8), 0 0 14px rgba(230, 178, 46, 0.12);
}
.exped-action {
  --tint: 230, 178, 46;
  position: relative;
  border-top-color: rgba(var(--tint), 0.55) !important;
  overflow: hidden;
}
.exped-action:hover:not(:disabled) {
  box-shadow: 0 0 12px rgba(var(--tint), 0.35);
}
.exped-action::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 240, 200, 0.10) 48%, transparent 60%);
  transform: translateX(-110%);
  pointer-events: none;
}
.exped-action:hover:not(:disabled)::after {
  animation: grim-glint 0.9s ease forwards;
}
.exped-action.beckon {
  animation: perk-beckon 1.8s ease-in-out infinite;
}
.exped-banner {
  --tint: 230, 178, 46;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid rgba(var(--tint), 0.3);
  border-left: 3px solid rgb(var(--tint));
  background: radial-gradient(ellipse at 0% 50%, rgba(var(--tint), 0.12), transparent 55%), linear-gradient(160deg, rgba(24, 19, 12, 0.92), rgba(12, 9, 6, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 2px 8px rgba(0, 0, 0, 0.4);
  font-family: var(--font-serif);
  color: #d9cba8;
}
.exped-banner i {
  color: rgb(var(--tint));
  text-shadow: 0 0 8px rgba(var(--tint), 0.6);
}
.exped-board {
  --tint: 230, 178, 46;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  border: 1px solid rgba(var(--tint), 0.22);
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--tint), 0.07), transparent 55%), linear-gradient(170deg, rgba(20, 16, 10, 0.92), rgba(10, 8, 5, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 12px rgba(0, 0, 0, 0.5);
  transition: border-color 0.3s ease;
}
.exped-board-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-family: var(--font-gothic);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c9bb9e;
  background: linear-gradient(to right, transparent, rgba(var(--tint), 0.45) 18%, rgba(var(--tint), 0.45) 82%, transparent) bottom / 100% 1px no-repeat;
}
.exped-board-sigil {
  width: 24px;
  height: 24px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  border-radius: 9999px;
  border: 1px solid rgba(var(--tint), 0.55);
  background: radial-gradient(circle at 50% 38%, rgba(var(--tint), 0.25), rgba(0, 0, 0, 0.85) 75%);
  box-shadow: 0 0 8px rgba(var(--tint), 0.25), inset 0 0 6px rgba(0, 0, 0, 0.8);
  color: rgb(var(--tint));
  text-shadow: 0 0 8px rgba(var(--tint), 0.7);
}
.exped-count {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 8px;
  color: #d9cba8;
  border: 1px solid rgba(122, 96, 58, 0.55);
  background: linear-gradient(180deg, rgba(44, 36, 20, 0.8), rgba(18, 14, 8, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 235, 190, 0.08);
}
.exped-board.full .exped-count {
  color: rgb(var(--tint));
  border-color: rgba(var(--tint), 0.6);
  animation: exped-full-glow 1.6s ease-in-out infinite;
}
@keyframes exped-full-glow {
  0%, 100% {
    box-shadow: 0 0 4px rgba(var(--tint), 0.3);
  }
  50% {
    box-shadow: 0 0 12px rgba(var(--tint), 0.7);
  }
}
.exped-slot-empty {
  border: 1px dashed rgba(var(--tint), 0.18);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.25);
  color: #6e6048;
  font-family: var(--font-serif);
  font-style: italic;
}
.exped-card {
  position: relative;
  border-radius: 5px;
  border: 1px solid rgba(var(--tint), 0.3);
  background: radial-gradient(ellipse at 15% 0%, rgba(var(--tint), 0.09), transparent 55%), linear-gradient(160deg, rgba(26, 21, 13, 0.95), rgba(12, 9, 6, 0.97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 3px 8px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.exped-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--tint), 0.65);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6), 0 0 14px rgba(var(--tint), 0.18);
}
.exped-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 240, 200, 0.08) 48%, transparent 60%);
  transform: translateX(-110%);
  pointer-events: none;
}
.exped-card:hover::after {
  animation: grim-glint 0.9s ease forwards;
}
.exped-card.spent {
  border-color: rgba(107, 84, 51, 0.35);
  filter: saturate(0.4) brightness(0.82);
}
.exped-card.spent:hover {
  transform: none;
  border-color: rgba(107, 84, 51, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 3px 8px rgba(0, 0, 0, 0.45);
}
.exped-card.spent:hover::after {
  animation: none;
}
.exped-strength-glow {
  text-shadow: 0 0 9px currentColor;
}
.exped-rail {
  border-radius: 6px;
  border: 1px solid rgba(168, 110, 230, 0.25);
  background: radial-gradient(ellipse at 50% 100%, rgba(168, 110, 230, 0.10), transparent 55%), linear-gradient(180deg, rgba(20, 15, 26, 0.94), rgba(8, 6, 12, 0.97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 4px 12px rgba(0, 0, 0, 0.5);
}
.exped-rung {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 4px;
  border: 1px solid rgba(110, 96, 130, 0.25);
  background: linear-gradient(180deg, rgba(30, 24, 40, 0.5), rgba(12, 9, 18, 0.7));
  color: #6e6048;
  transition: all 0.2s ease;
}
.exped-rung.current {
  border-color: rgba(168, 110, 230, 0.8);
  color: #e9d5ff;
  box-shadow: 0 0 12px rgba(168, 110, 230, 0.35), inset 0 0 8px rgba(168, 110, 230, 0.15);
  text-shadow: 0 0 8px rgba(168, 110, 230, 0.8);
}
.exped-rung.current::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 3px;
  border-radius: 2px;
  background: rgb(168, 110, 230);
  box-shadow: 0 0 10px rgba(168, 110, 230, 0.9);
}
.exped-rung.lair {
  border-color: rgba(200, 35, 60, 0.5);
  color: #f0a0b0;
}
.exped-rung.lair.current {
  border-color: rgba(220, 68, 58, 0.85);
  color: #fecaca;
  box-shadow: 0 0 12px rgba(220, 68, 58, 0.4), inset 0 0 8px rgba(220, 68, 58, 0.15);
  text-shadow: 0 0 8px rgba(220, 68, 58, 0.8);
}
.exped-rung.lair.current::before {
  background: rgb(220, 68, 58);
  box-shadow: 0 0 10px rgba(220, 68, 58, 0.9);
}
.exped-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid rgba(122, 96, 58, 0.5);
  border-left: 3px solid rgba(230, 178, 46, 0.75);
  background: linear-gradient(160deg, rgba(38, 30, 18, 0.97), rgba(20, 15, 9, 0.97));
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7), 0 0 10px rgba(230, 178, 46, 0.08);
  font-family: var(--font-serif);
  font-style: italic;
  color: #d9cba8;
}
.exped-toast i {
  color: rgba(230, 178, 46, 0.8);
}
.exped-scroll {
  --tint: 230, 178, 46;
  position: relative;
  border-radius: 10px;
  border: 1px solid #6b5433;
  background: radial-gradient(ellipse at 20% 0%, rgba(120, 84, 40, 0.20), transparent 55%), radial-gradient(ellipse at 80% 100%, rgba(var(--tint), 0.10), transparent 50%), linear-gradient(135deg, #2c2013 0%, #211610 45%, #171009 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 0 36px rgba(0, 0, 0, 0.5), 0 18px 50px rgba(0, 0, 0, 0.85), 0 0 30px rgba(var(--tint), 0.10);
}
.exped-scroll::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(230, 178, 46, 0.22);
  border-radius: 6px;
  pointer-events: none;
}
.exped-scroll > .grim-corner {
  width: 20px;
  height: 20px;
}
.exped-scroll > .grim-corner-tl {
  top: 6px;
  left: 6px;
  border-top-left-radius: 6px;
}
.exped-scroll > .grim-corner-tr {
  top: 6px;
  right: 6px;
  border-top-right-radius: 6px;
}
.exped-scroll > .grim-corner-bl {
  bottom: 6px;
  left: 6px;
  border-bottom-left-radius: 6px;
}
.exped-scroll > .grim-corner-br {
  bottom: 6px;
  right: 6px;
  border-bottom-right-radius: 6px;
}
.exped-choice {
  --tint: 230, 178, 46;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: 5px;
  border: 1px solid rgba(var(--tint), 0.28);
  background: radial-gradient(ellipse at 0% 50%, rgba(var(--tint), 0.08), transparent 50%), linear-gradient(160deg, rgba(26, 21, 13, 0.95), rgba(13, 10, 6, 0.97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.45);
  color: #d9cba8;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.exped-choice::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: radial-gradient(circle at 35% 30%, rgba(255, 245, 220, 0.9), rgb(var(--tint)) 45%, rgba(0, 0, 0, 0.6));
  box-shadow: 0 0 7px rgba(var(--tint), 0.7);
}
.exped-choice::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 240, 200, 0.09) 48%, transparent 60%);
  transform: translateX(-110%);
  pointer-events: none;
}
.exped-choice:hover:not(:disabled):not(.locked) {
  transform: translateY(-1px);
  border-color: rgba(var(--tint), 0.7);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55), 0 0 14px rgba(var(--tint), 0.2);
  color: #f4ecd8;
}
.exped-choice:hover:not(:disabled):not(.locked)::after {
  animation: grim-glint 0.9s ease forwards;
}
.exped-choice.locked, .exped-choice:disabled {
  filter: saturate(0.35) brightness(0.75);
  cursor: not-allowed;
}
.exped-quiet-btn {
  font-family: var(--font-gothic);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a08c68;
  padding: 6px 14px;
  border-radius: 4px;
  border: 1px solid rgba(122, 96, 58, 0.4);
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.15s ease;
}
.exped-quiet-btn:hover {
  color: #e8ce97;
  border-color: rgba(230, 178, 46, 0.5);
}
.exped-stash {
  position: relative;
  border-radius: 6px;
  border: 1px solid #6b5433;
  background: linear-gradient(170deg, rgba(28, 22, 13, 0.95), rgba(14, 11, 6, 0.97));
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.5);
}
.exped-stash::before, .exped-stash::after {
  content: '';
  position: absolute;
  top: 5px;
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #f6e3b0 10%, #b8961a 55%, #6b5433);
  border: 1px solid #171208;
  box-shadow: 0 0 5px rgba(230, 178, 46, 0.5);
  pointer-events: none;
}
.exped-stash::before {
  left: 5px;
}
.exped-stash::after {
  right: 5px;
}
.exped-stash-slot {
  border: 1px dashed rgba(122, 96, 58, 0.4);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  transition: all 0.15s ease;
}
.exped-stash-slot.filled {
  border: 1px solid rgba(230, 178, 46, 0.5);
  background: radial-gradient(circle at 50% 35%, rgba(230, 178, 46, 0.12), rgba(0, 0, 0, 0.6) 75%);
  box-shadow: 0 0 8px rgba(230, 178, 46, 0.15);
}
[data-game-theme="light"] .exped-board, [data-game-theme="light"] .exped-card, [data-game-theme="light"] .exped-choice, [data-game-theme="light"] .exped-toast, [data-game-theme="light"] .exped-rail, [data-game-theme="light"] .exped-stash {
  background: rgba(245, 240, 228, 0.94);
  color: #2b2218;
  border-color: rgba(140, 112, 56, 0.55);
  box-shadow: 0 3px 12px rgba(60, 45, 20, 0.22);
}
[data-game-theme="light"] .exped-banner {
  background: rgba(245, 240, 228, 0.94);
  color: #3a2e1c;
  border-color: rgba(140, 112, 56, 0.55);
  border-left-color: rgb(var(--tint));
  box-shadow: 0 2px 8px rgba(60, 45, 20, 0.2);
}
[data-game-theme="light"] .exped-toast {
  color: #4a3a22;
  border-left-color: rgba(140, 112, 56, 0.8);
}
[data-game-theme="light"] .exped-choice {
  color: #3a2e1c;
}
[data-game-theme="light"] .exped-choice:hover:not(:disabled):not(.locked) {
  color: #1a1206;
}
[data-game-theme="light"] .exped-board-head {
  color: #5a4a30;
}
[data-game-theme="light"] .exped-count {
  background: #e6dcc2;
  color: #5a4a30;
  border-color: #b89a5e;
}
[data-game-theme="light"] .exped-scroll {
  background: linear-gradient(135deg, #efe6cf, #e2d5b4);
  border-color: #8c7038;
}
[data-game-theme="light"] .exped-scroll::before {
  border-color: rgba(140, 112, 56, 0.35);
}
[data-game-theme="light"] .exped-gauge-cell {
  background: #ddd2ba;
  border-color: #b89a5e;
  box-shadow: inset 0 1px 2px rgba(60, 45, 20, 0.25);
}
[data-game-theme="light"] .exped-gauge-cell.lit {
  border-color: rgba(var(--tint), 0.75);
  background: linear-gradient(180deg, rgba(var(--tint), 0.9), rgba(var(--tint), 0.55));
  box-shadow: 0 0 6px rgba(var(--tint), 0.35);
}
[data-game-theme="light"] .exped-tip {
  background: #f5f0e4;
  border-color: #8c7038;
  box-shadow: 0 8px 20px rgba(60, 45, 20, 0.3);
}
[data-game-theme="light"] .exped-slot-empty {
  background: rgba(90, 65, 38, 0.06);
  color: #8c7038;
}
[data-game-theme="light"] .exped-rung {
  background: #e6dcc2;
  border-color: #c4b289;
  color: #6a5630;
}
[data-game-theme="light"] .exped-quiet-btn {
  color: #6a5630;
  border-color: #b89a5e;
  background: rgba(90, 65, 38, 0.06);
}
[data-game-theme="light"] .exped-quiet-btn:hover {
  color: #3a2a0a;
  border-color: #8c7038;
}
[data-game-theme="light"] .exped-folio {
  color: #6a5630;
}
[data-game-theme="light"] .exped-plate {
  border-color: #8c7038;
}
.tome-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px;
  border-radius: 12px;
  background: radial-gradient(ellipse at 20% 0%, rgba(120, 84, 40, 0.22), transparent 55%), radial-gradient(ellipse at 85% 100%, rgba(90, 50, 24, 0.18), transparent 50%), linear-gradient(135deg, #332415 0%, #241810 42%, #1a1109 100%);
  border: 1px solid #6b5433;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 0 46px rgba(0, 0, 0, 0.55), 0 24px 70px rgba(0, 0, 0, 0.85), 0 0 42px rgba(230, 178, 46, 0.07);
}
.tome-panel::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(230, 178, 46, 0.25);
  border-radius: 8px;
  pointer-events: none;
  z-index: 2;
}
.tome-panel--forge {
  background: radial-gradient(ellipse at 50% 108%, rgba(224, 122, 48, 0.20), transparent 55%), radial-gradient(ellipse at 15% 0%, rgba(70, 60, 55, 0.35), transparent 55%), linear-gradient(160deg, #2a2320 0%, #1d1815 45%, #120e0b 100%);
  border-color: #5f4a38;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 0 46px rgba(0, 0, 0, 0.6), 0 24px 70px rgba(0, 0, 0, 0.85), 0 0 42px rgba(224, 122, 48, 0.09);
}
.tome-panel--forge::before {
  border-color: rgba(224, 122, 48, 0.22);
}
.deed-board {
  width: min(900px, 96vw);
  height: min(760px, 92vh);
}
.forge-bench {
  width: min(860px, 96vw);
  height: min(760px, 92vh);
}
.atlas-tome {
  width: min(1200px, 96vw);
  height: min(820px, 92vh);
}
.deed-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 16px 14px;
  border-radius: 4px;
  border: 1px solid rgba(122, 96, 58, 0.55);
  background: radial-gradient(ellipse at 50% 0%, rgba(230, 200, 140, 0.06), transparent 60%), linear-gradient(170deg, #241d12 0%, #1d1710 55%, #171208 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 16px rgba(0, 0, 0, 0.55);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  overflow: hidden;
}
.deed-card:nth-child(odd) {
  transform: rotate(-0.4deg);
}
.deed-card:nth-child(even) {
  transform: rotate(0.35deg);
}
.deed-card:hover {
  transform: rotate(0deg) translateY(-3px);
  border-color: rgba(230, 178, 46, 0.55);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.65), 0 0 18px rgba(230, 178, 46, 0.14);
}
.deed-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 240, 200, 0.08) 48%, transparent 60%);
  transform: translateX(-110%);
  pointer-events: none;
}
.deed-card:hover::after {
  animation: grim-glint 0.9s ease forwards;
}
.deed-card.done {
  border-color: rgba(230, 178, 46, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 16px rgba(0, 0, 0, 0.55), 0 0 22px rgba(230, 178, 46, 0.16);
}
.deed-pin {
  position: absolute;
  top: 7px;
  left: 50%;
  margin-left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: radial-gradient(circle at 35% 30%, #f6e3b0, #8c6d28 60%, #3a2c14);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 6px rgba(230, 178, 46, 0.35);
  pointer-events: none;
}
.deed-seal {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #f6d3c2;
  background: radial-gradient(circle at 38% 32%, #c2452e, #7a1f14 65%, #4e120b);
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 2px 4px rgba(255, 200, 170, 0.25), inset 0 -3px 6px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.6);
  transform: rotate(-8deg);
  pointer-events: none;
  z-index: 1;
}
.deed-reward {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 3px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d9cba8;
  border: 1px solid rgba(122, 96, 58, 0.5);
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 235, 190, 0.06);
}
.deed-reward i {
  color: #e6b22e;
  text-shadow: 0 0 6px rgba(230, 178, 46, 0.5);
}
.forge-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 5px;
  border: 1px solid rgba(140, 110, 80, 0.4);
  background: radial-gradient(ellipse at 15% 0%, rgba(224, 122, 48, 0.07), transparent 55%), linear-gradient(165deg, rgba(32, 26, 20, 0.95), rgba(16, 12, 9, 0.97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  overflow: hidden;
}
.forge-card:hover {
  transform: translateY(-2px);
  border-color: rgba(224, 122, 48, 0.5);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6), 0 0 14px rgba(224, 122, 48, 0.15);
}
.forge-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 220, 180, 0.07) 48%, transparent 60%);
  transform: translateX(-110%);
  pointer-events: none;
}
.forge-card:hover::after {
  animation: grim-glint 0.9s ease forwards;
}
.forge-btn {
  font-family: var(--font-gothic);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  font-size: 10px;
  padding: 6px 14px;
  border-radius: 4px;
  color: #ffd9b3;
  border: 1px solid rgba(224, 122, 48, 0.7);
  background: linear-gradient(180deg, #5d3a14, #3a220a);
  box-shadow: 0 0 12px rgba(224, 122, 48, 0.22), inset 0 1px 0 rgba(255, 210, 160, 0.25);
  text-shadow: 0 1px 2px #000;
  cursor: pointer;
  transition: all 0.15s ease;
  animation: forge-heat 1.8s ease-in-out infinite;
}
@keyframes forge-heat {
  0%, 100% {
    box-shadow: 0 0 8px rgba(224, 122, 48, 0.25), inset 0 1px 0 rgba(255, 210, 160, 0.25);
  }
  50% {
    box-shadow: 0 0 18px rgba(224, 122, 48, 0.55), inset 0 1px 0 rgba(255, 210, 160, 0.25);
  }
}
.forge-btn:hover:not(:disabled) {
  filter: brightness(1.25);
  transform: translateY(-1px);
}
.forge-btn:disabled {
  animation: none;
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.forge-mat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-ui);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid rgba(74, 190, 120, 0.3);
  background: rgba(0, 0, 0, 0.35);
  color: #86d9ad;
}
.forge-mat.lack {
  color: #ef9a9a;
  border-color: rgba(220, 68, 58, 0.35);
}
.forge-shelf {
  border: 1px solid rgba(122, 96, 58, 0.4);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(20, 15, 9, 0.8), rgba(10, 8, 5, 0.9));
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.6);
}
.craft-tabs-inline {
  display: flex;
  gap: 6px;
  padding: 4px 4px 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.craft-tab-inline {
  --tab-tint: 230, 178, 46;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(var(--tab-tint), 0.35);
  background: linear-gradient(180deg, #241a10, #17100a);
  color: #8d7c60;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  filter: brightness(0.72) saturate(0.85);
  transition: all 0.18s ease;
}
.craft-tab-inline:hover {
  color: rgb(var(--tab-tint));
  filter: brightness(1);
  transform: translateY(-1px);
}
.craft-tab-inline.active {
  color: rgb(var(--tab-tint));
  filter: brightness(1);
  border-color: rgba(var(--tab-tint), 0.85);
  background: linear-gradient(180deg, rgba(var(--tab-tint), 0.3), rgba(var(--tab-tint), 0.1)), linear-gradient(180deg, #322511, #1d1409);
  box-shadow: 0 0 12px rgba(var(--tab-tint), 0.25);
}
[data-game-theme="light"] .craft-tab-inline {
  background: rgba(90, 65, 38, 0.08);
  border-color: #b89a5e;
  color: #5a4a30;
}
.smy-root {
  --smy-ember: 224, 122, 48;
}
.smy-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 92px;
  padding: 8px 6px;
  border-radius: 6px;
  border: 1px dashed rgba(var(--smy-ember), 0.4);
  background: linear-gradient(180deg, rgba(20, 15, 9, 0.7), rgba(8, 6, 4, 0.85));
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.smy-slot--filled {
  border-style: solid;
  border-color: rgba(var(--smy-ember), 0.65);
  box-shadow: inset 0 0 14px rgba(var(--smy-ember), 0.18);
}
.smy-slot--hot {
  border-style: solid;
  border-color: rgba(240, 200, 120, 0.95);
  box-shadow: 0 0 16px rgba(var(--smy-ember), 0.55), inset 0 0 12px rgba(var(--smy-ember), 0.3);
  background: linear-gradient(180deg, rgba(40, 28, 12, 0.85), rgba(16, 10, 5, 0.9));
}
.smy-slot-label {
  font-family: var(--font-ui);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8d7c60;
}
.smy-slot-ghost {
  font-size: 26px;
  opacity: 0.28;
  filter: grayscale(0.6);
}
.smy-slot-icon {
  font-size: 26px;
  line-height: 1;
}
.smy-slot-name {
  font-family: var(--font-gothic);
  font-size: 10px;
  color: #f0d9a8;
  text-align: center;
  line-height: 1.15;
}
.smy-slot-clear {
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 10px;
  color: #8d7c60;
  transition: color 0.15s ease;
}
.smy-slot-clear:hover {
  color: #ef9a9a;
}
.smy-blueprint {
  font-family: var(--font-gothic);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  padding: 5px 14px;
  border-radius: 4px;
  color: #b8a883;
  border: 1px solid rgba(122, 96, 58, 0.5);
  background: rgba(0, 0, 0, 0.3);
  transition: all 0.15s ease;
}
.smy-blueprint:hover {
  border-color: rgba(var(--smy-ember), 0.6);
  color: #f0d9a8;
}
.smy-blueprint--on {
  color: #ffd9b3;
  border-color: rgba(var(--smy-ember), 0.85);
  background: linear-gradient(180deg, #5d3a14, #3a220a);
  box-shadow: inset 0 1px 0 rgba(255, 210, 160, 0.25);
}
.smy-readout {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding: 14px;
  border-radius: 6px;
  border: 1px solid rgba(122, 96, 58, 0.4);
  background: radial-gradient(ellipse at top, rgba(var(--smy-ember), 0.08), rgba(8, 6, 4, 0.7));
}
.smy-readout-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.smy-readout-label {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8d7c60;
}
.smy-readout-value {
  font-family: var(--font-gothic);
  font-size: 18px;
  color: #f0d9a8;
}
.smy-forge-btn {
  font-family: var(--font-gothic);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: 13px;
  padding: 9px 34px;
  border-radius: 5px;
  color: #ffd9b3;
  border: 1px solid rgba(var(--smy-ember), 0.75);
  background: linear-gradient(180deg, #6d4416, #3a220a);
  text-shadow: 0 1px 2px #000;
  cursor: pointer;
  transition: all 0.15s ease;
  animation: forge-heat 1.8s ease-in-out infinite;
}
.smy-forge-btn:hover:not(:disabled) {
  filter: brightness(1.25);
  transform: translateY(-1px);
}
.smy-forge-btn:disabled {
  animation: none;
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.smy-result {
  padding: 8px 14px;
  border-radius: 5px;
  font-family: var(--font-serif);
  font-size: 13px;
  text-align: center;
}
.smy-result--win {
  color: #b7f0c9;
  border: 1px solid rgba(74, 190, 120, 0.4);
  background: rgba(20, 40, 28, 0.5);
}
.smy-result--crack {
  color: #f0b7b7;
  border: 1px solid rgba(220, 68, 58, 0.4);
  background: rgba(40, 20, 20, 0.5);
}
.smy-reagent {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-ui);
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 3px;
  border: 1px solid rgba(122, 96, 58, 0.45);
  background: rgba(0, 0, 0, 0.35);
  color: #d8c9a6;
  cursor: grab;
  transition: all 0.15s ease;
}
.smy-reagent:hover {
  border-color: rgba(var(--smy-ember), 0.7);
  color: #f0d9a8;
}
.smy-reagent:active {
  cursor: grabbing;
}
.smy-smelter {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.smy-slot--sm {
  min-height: 76px;
  min-width: 94px;
  flex: 0 0 auto;
}
.smy-smelt-core {
  flex: 1 1 180px;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.smy-smelt-bar {
  position: relative;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid rgba(var(--smy-ember), 0.4);
  background: linear-gradient(180deg, #0c0805, #17100a);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7);
  transition: box-shadow 0.2s ease;
}
.smelting .smy-smelt-bar {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7), 0 0 16px rgba(var(--smy-ember), 0.55);
}
.smy-smelt-bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, #7a3a0e 0%, #e07a30 55%, #ffe3b0 100%);
  box-shadow: 0 0 12px rgba(var(--smy-ember), 0.85);
}
.smy-mote {
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgb(var(--smy-ember));
  box-shadow: 0 0 6px rgba(var(--smy-ember), 0.9);
  opacity: 0;
}
.smelting .smy-mote {
  animation: smy-mote-rise 1.1s ease-out infinite;
}
@keyframes smy-mote-rise {
  0% {
    opacity: 0;
    transform: translate(var(--mote-x), 0) scale(1);
  }
  20% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(var(--mote-x), -24px) scale(0.3);
  }
}
.smy-smelt-btn {
  align-self: center;
  padding: 6px 24px;
  font-size: 11px;
}
.smy-smelt-out {
  flex: 0 0 auto;
  min-width: 94px;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 6px;
  border-radius: 6px;
  border: 1px dashed rgba(122, 96, 58, 0.4);
  background: linear-gradient(180deg, rgba(20, 15, 9, 0.5), rgba(8, 6, 4, 0.7));
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.smy-smelt-out .smy-slot-ghost {
  font-size: 26px;
  opacity: 0.28;
  filter: grayscale(0.6);
}
.smy-smelt-out--lit {
  border-style: solid;
  border-color: rgba(var(--smy-ember), 0.8);
  box-shadow: 0 0 16px rgba(var(--smy-ember), 0.35), inset 0 0 12px rgba(var(--smy-ember), 0.2);
  animation: smy-out-pop 0.5s ease;
}
@keyframes smy-out-pop {
  0% {
    transform: scale(0.7);
    opacity: 0.3;
  }
  60% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.smy-stations {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.smy-station-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 150px;
  padding: 9px 22px;
  border-radius: 6px;
  border: 1px solid rgba(122, 96, 58, 0.45);
  background: linear-gradient(180deg, #1c1610, #0d0a06);
  color: #b8a883;
  font-family: var(--font-gothic);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, 0.06);
  transition: all 0.15s ease;
}
.smy-station-btn i {
  font-size: 15px;
  opacity: 0.7;
}
.smy-station-btn small {
  font-family: var(--font-ui);
  font-size: 8px;
  letter-spacing: 0.16em;
  color: #8d7c60;
  text-transform: uppercase;
}
.smy-station-btn:hover {
  border-color: rgba(var(--smy-ember), 0.6);
  color: #f0d9a8;
}
.smy-station-btn--on {
  color: #ffd9b3;
  border-color: rgba(var(--smy-ember), 0.85);
  background: linear-gradient(180deg, #4a2f10, #241605);
  box-shadow: inset 0 1px 0 rgba(255, 210, 160, 0.2), 0 0 18px rgba(var(--smy-ember), 0.25);
}
.smy-station-btn--on i {
  opacity: 1;
}
.smy-hearth {
  position: relative;
  padding: 18px 14px 14px;
  border-radius: 8px;
  border: 1px solid rgba(122, 96, 58, 0.4);
  background: radial-gradient(ellipse 70% 45% at 50% 100%, rgba(var(--smy-ember), 0.12), transparent 70%), linear-gradient(180deg, rgba(18, 13, 8, 0.85), rgba(8, 6, 4, 0.95));
  overflow: hidden;
}
.smy-hearth-glow {
  position: absolute;
  inset: auto 0 0 0;
  height: 60px;
  pointer-events: none;
}
.smy-hearth-glow .smy-mote {
  animation: smy-mote-rise 2.4s ease-out infinite;
}
.smy-hearth-row {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.smy-slot--lg {
  min-height: 116px;
  min-width: 122px;
  flex: 0 0 auto;
}
.smy-slot--lg .smy-slot-icon, .smy-slot--lg .smy-slot-ghost {
  font-size: 38px;
}
.smy-slot--lg .smy-slot-name {
  font-size: 11px;
}
.smy-smelt-out--lg {
  min-height: 116px;
  min-width: 122px;
}
.smy-smelt-out--lg .smy-slot-ghost {
  font-size: 38px;
}
.smy-furnace {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 96px;
  min-height: 116px;
  border-radius: 8px 8px 4px 4px;
  border: 1px solid rgba(122, 96, 58, 0.55);
  background: linear-gradient(180deg, #241a10 0%, #140d07 60%, #0a0603 100%);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
  padding: 10px;
}
.smy-furnace-mouth {
  width: 64px;
  height: 52px;
  border-radius: 32px 32px 6px 6px;
  background: radial-gradient(ellipse 60% 70% at 50% 95%, #ffe9c4 0%, #ff9d3c 30%, #b34d10 60%, #3a1a06 100%);
  box-shadow: 0 0 24px rgba(var(--smy-ember), 0.55), inset 0 -4px 12px rgba(255, 220, 160, 0.5);
  animation: smy-furnace-flicker 2.6s ease-in-out infinite;
}
@keyframes smy-furnace-flicker {
  0%, 100% {
    filter: brightness(1);
  }
  35% {
    filter: brightness(1.18);
  }
  60% {
    filter: brightness(0.92);
  }
  80% {
    filter: brightness(1.1);
  }
}
.smy-hearth:has(.smelting) .smy-furnace-mouth {
  animation-duration: 0.9s;
  box-shadow: 0 0 36px rgba(var(--smy-ember), 0.8), inset 0 -4px 14px rgba(255, 230, 180, 0.7);
}
.smy-hearth:has(.smelting) .smy-hearth-glow .smy-mote {
  animation-duration: 1.1s;
}
.smy-anvil-stage {
  position: relative;
  padding: 16px 14px 14px;
  border-radius: 8px;
  border: 1px solid rgba(122, 96, 58, 0.4);
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(var(--smy-ember), 0.07), transparent 70%), linear-gradient(180deg, rgba(16, 12, 8, 0.85), rgba(8, 6, 4, 0.95));
  transition: box-shadow 0.4s ease;
}
.smy-anvil-fig {
  text-align: center;
  font-size: 44px;
  line-height: 1;
  margin-bottom: 10px;
  filter: grayscale(0.35) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.8));
  transition: filter 0.4s ease;
}
.smy-root--hot .smy-anvil-stage {
  box-shadow: 0 0 26px rgba(var(--smy-ember), 0.3), inset 0 0 30px rgba(var(--smy-ember), 0.08);
}
.smy-root--hot .smy-anvil-fig {
  filter: grayscale(0) drop-shadow(0 0 14px rgba(var(--smy-ember), 0.9));
}
.smy-heat-rig {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.smy-heat-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.smy-heat {
  position: relative;
  height: 18px;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid rgba(var(--smy-ember), 0.45);
  background: linear-gradient(180deg, #0c0805, #17100a);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7);
}
.smy-heat-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: linear-gradient(90deg, #5a1408 0%, #b3400e 45%, #ff9d3c 78%, #ffe9c4 100%);
  box-shadow: 0 0 14px rgba(var(--smy-ember), 0.9);
}
.smy-heat-band {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  background: rgba(255, 214, 110, 0.28);
  border-left: 1px solid rgba(255, 214, 110, 0.85);
  border-right: 1px solid rgba(255, 214, 110, 0.85);
  box-shadow: inset 0 0 8px rgba(255, 214, 110, 0.35);
}
.smy-heat-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.smy-stoke-btn {
  padding: 7px 22px;
  font-size: 12px;
}
.smy-strike-btn {
  padding: 7px 26px;
  font-size: 12px;
}
.smy-heat-rig--hot .smy-heat {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7), 0 0 18px rgba(var(--smy-ember), 0.6);
}
.smy-heat-rig--struck .smy-heat {
  animation: smy-strike-flash 0.5s ease-out;
}
@keyframes smy-strike-flash {
  0% {
    box-shadow: 0 0 34px rgba(255, 230, 180, 0.95), inset 0 0 18px rgba(255, 230, 180, 0.8);
  }
  100% {
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7);
  }
}
.smy-heat-hint {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-align: center;
  color: #8d7c60;
}
.smy-result--win {
  animation: smy-out-pop 0.5s ease;
}
.smy-result--crack {
  animation: smy-crack-shake 0.45s ease;
}
@keyframes smy-crack-shake {
  0%, 100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(4px);
  }
  60% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
}
.alc-root {
  --alc-arcane: 150, 120, 235;
  --alc-verdigris: 88, 205, 190;
}
.alc-stations {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.alc-station-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 150px;
  padding: 9px 22px;
  border-radius: 6px;
  border: 1px solid rgba(var(--alc-arcane), 0.3);
  background: linear-gradient(180deg, #161222, #0c0a14);
  color: #a99cc6;
  font-family: var(--font-gothic);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: inset 0 1px 0 rgba(200, 180, 255, 0.06);
  transition: all 0.15s ease;
}
.alc-station-btn i {
  font-size: 15px;
  opacity: 0.7;
}
.alc-station-btn small {
  font-family: var(--font-ui);
  font-size: 8px;
  letter-spacing: 0.16em;
  color: #7c7195;
  text-transform: uppercase;
}
.alc-station-btn:hover {
  border-color: rgba(var(--alc-arcane), 0.6);
  color: #ddd2f5;
}
.alc-station-btn--on {
  color: #e6dcff;
  border-color: rgba(var(--alc-arcane), 0.8);
  background: linear-gradient(180deg, #2c2148, #171128);
  box-shadow: inset 0 1px 0 rgba(220, 200, 255, 0.18), 0 0 18px rgba(var(--alc-arcane), 0.28);
}
.alc-station-btn--on i {
  opacity: 1;
}
.alc-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid rgba(var(--alc-arcane), 0.28);
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--alc-arcane), 0.08), transparent 70%), linear-gradient(180deg, rgba(18, 14, 30, 0.85), rgba(10, 8, 18, 0.92));
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.alc-card:hover {
  border-color: rgba(var(--alc-arcane), 0.55);
  box-shadow: 0 0 16px rgba(var(--alc-arcane), 0.18), inset 0 0 20px rgba(var(--alc-arcane), 0.05);
}
.alc-card-title {
  color: #ddd2f5;
}
.alc-brew-btn {
  font-family: var(--font-gothic);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: 11px;
  padding: 6px 18px;
  border-radius: 5px;
  color: #e6dcff;
  border: 1px solid rgba(var(--alc-arcane), 0.65);
  background: linear-gradient(180deg, #3a2c60, #1e1636);
  text-shadow: 0 1px 2px #000;
  cursor: pointer;
  transition: all 0.15s ease;
}
.alc-brew-btn:hover:not(:disabled) {
  filter: brightness(1.25);
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(var(--alc-arcane), 0.35);
}
.alc-brew-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.alc-mill-btn {
  align-self: center;
  padding: 7px 26px;
  font-size: 12px;
}
.alc-mat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-ui);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid rgba(var(--alc-arcane), 0.3);
  background: rgba(12, 9, 22, 0.6);
  color: #c9bfe2;
}
.alc-mat.lack {
  border-color: rgba(220, 68, 58, 0.5);
  color: #ef9a9a;
}
.alc-vial-chip {
  border-color: rgba(var(--alc-verdigris), 0.45);
  color: #a8e6dd;
  background: rgba(8, 22, 20, 0.55);
}
.alc-vial-chip.lack {
  border-color: rgba(220, 68, 58, 0.5);
  color: #ef9a9a;
}
.alc-sigil {
  padding: 2px 8px;
  font-size: 9px;
  font-family: var(--font-ui);
  border-radius: 3px;
  border: 1px solid rgba(var(--alc-arcane), 0.25);
  background: rgba(0, 0, 0, 0.3);
  color: #7c7195;
  transition: all 0.15s ease;
}
.alc-sigil:hover {
  border-color: rgba(var(--alc-arcane), 0.55);
  color: #c9bfe2;
}
.alc-sigil--on {
  border-color: rgba(var(--alc-arcane), 0.8);
  background: rgba(var(--alc-arcane), 0.14);
  color: #e6dcff;
  box-shadow: 0 0 10px rgba(var(--alc-arcane), 0.25);
}
.alc-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 92px;
  padding: 8px 6px;
  border-radius: 6px;
  border: 1px dashed rgba(var(--alc-arcane), 0.4);
  background: linear-gradient(180deg, rgba(16, 13, 26, 0.7), rgba(8, 6, 14, 0.85));
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.alc-slot--filled {
  border-style: solid;
  border-color: rgba(var(--alc-arcane), 0.6);
  box-shadow: inset 0 0 14px rgba(var(--alc-arcane), 0.16);
}
.alc-slot--hot {
  border-style: solid;
  border-color: rgba(200, 180, 255, 0.95);
  box-shadow: 0 0 16px rgba(var(--alc-arcane), 0.5), inset 0 0 12px rgba(var(--alc-arcane), 0.28);
}
.alc-slot--lg {
  min-height: 116px;
  min-width: 122px;
  flex: 0 0 auto;
}
.alc-slot--lg .alc-slot-icon, .alc-slot--lg .alc-slot-ghost {
  font-size: 38px;
}
.alc-slot-label {
  font-family: var(--font-ui);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7c7195;
}
.alc-slot-ghost {
  font-size: 26px;
  opacity: 0.28;
  filter: grayscale(0.4);
}
.alc-slot-icon {
  font-size: 26px;
  line-height: 1;
}
.alc-slot-name {
  font-family: var(--font-gothic);
  font-size: 11px;
  color: #ddd2f5;
  text-align: center;
  line-height: 1.15;
}
.alc-slot-clear {
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 10px;
  color: #7c7195;
  transition: color 0.15s ease;
}
.alc-slot-clear:hover {
  color: #ef9a9a;
}
.alc-mortar-station {
  position: relative;
  padding: 18px 14px 14px;
  border-radius: 8px;
  border: 1px solid rgba(var(--alc-arcane), 0.3);
  background: radial-gradient(ellipse 70% 45% at 50% 100%, rgba(var(--alc-verdigris), 0.07), transparent 70%), linear-gradient(180deg, rgba(15, 12, 26, 0.88), rgba(8, 6, 14, 0.95));
  overflow: hidden;
  margin-bottom: 12px;
}
.alc-mortar-row {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.alc-mortar {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  min-height: 116px;
  border-radius: 8px;
  border: 1px solid rgba(var(--alc-arcane), 0.35);
  background: radial-gradient(ellipse 65% 55% at 50% 60%, #2a2438 0%, #17131f 65%, #0c0a14 100%);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.7);
}
.alc-mortar-bowl {
  font-size: 44px;
  filter: grayscale(0.3) drop-shadow(0 4px 8px rgba(0,0,0,0.7));
}
.alc-mortar-pestle {
  position: absolute;
  top: 16px;
  right: 22px;
  font-size: 20px;
  transform-origin: 50% 120%;
  filter: grayscale(0.4);
}
.alc-mortar-station:has(.milling) .alc-mortar-pestle {
  animation: alc-grind-turn 0.7s ease-in-out infinite;
}
@keyframes alc-grind-turn {
  0%, 100% {
    transform: rotate(-14deg);
  }
  50% {
    transform: rotate(16deg);
  }
}
.alc-mill-out {
  flex: 0 0 auto;
  min-width: 122px;
  min-height: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 6px;
  border-radius: 6px;
  border: 1px dashed rgba(var(--alc-arcane), 0.35);
  background: linear-gradient(180deg, rgba(14, 11, 24, 0.5), rgba(8, 6, 14, 0.7));
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.alc-mill-out .alc-slot-ghost {
  font-size: 38px;
}
.alc-mill-out--lit {
  border-style: solid;
  border-color: rgba(var(--alc-verdigris), 0.75);
  box-shadow: 0 0 16px rgba(var(--alc-verdigris), 0.3), inset 0 0 12px rgba(var(--alc-verdigris), 0.18);
  animation: smy-out-pop 0.5s ease;
}
.alc-grind-core {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.alc-grind-bar {
  position: relative;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid rgba(var(--alc-verdigris), 0.35);
  background: linear-gradient(180deg, #0a0c10, #10141a);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7);
  transition: box-shadow 0.2s ease;
}
.milling .alc-grind-bar {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7), 0 0 16px rgba(var(--alc-verdigris), 0.45);
}
.alc-grind-bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, #14403a 0%, #2c9c8c 55%, #c6fff4 100%);
  box-shadow: 0 0 12px rgba(var(--alc-verdigris), 0.8);
}
.alc-alembic {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  margin-bottom: 12px;
  border-radius: 8px;
  border: 1px solid rgba(var(--alc-arcane), 0.3);
  background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(var(--alc-arcane), 0.13), transparent 70%), linear-gradient(180deg, rgba(15, 12, 26, 0.88), rgba(8, 6, 14, 0.95));
  overflow: hidden;
}
.alc-alembic-flask {
  font-size: 44px;
  line-height: 1;
  filter: drop-shadow(0 0 14px rgba(var(--alc-arcane), 0.55));
  animation: alc-flask-sway 5s ease-in-out infinite;
}
@keyframes alc-flask-sway {
  0%, 100% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2.5deg);
  }
}
.alc-bubble {
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1px solid rgba(var(--alc-verdigris), 0.8);
  background: rgba(var(--alc-verdigris), 0.25);
  box-shadow: 0 0 6px rgba(var(--alc-verdigris), 0.6);
  opacity: 0;
  animation: alc-bubble-rise 3.4s ease-in infinite;
}
@keyframes alc-bubble-rise {
  0% {
    opacity: 0;
    transform: translate(var(--bub-x), 0) scale(0.7);
  }
  15% {
    opacity: 0.9;
  }
  70% {
    opacity: 0.7;
    transform: translate(calc(var(--bub-x) * -0.6), -44px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--bub-x), -64px) scale(1.4);
  }
}
.alc-mist {
  position: absolute;
  inset: 30% -40% auto;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(var(--alc-arcane), 0.10), rgba(var(--alc-verdigris), 0.07), transparent);
  filter: blur(6px);
  pointer-events: none;
  animation: alc-mist-drift 14s linear infinite;
}
@keyframes alc-mist-drift {
  0% {
    transform: translateX(-12%);
  }
  50% {
    transform: translateX(12%);
  }
  100% {
    transform: translateX(-12%);
  }
}
.alc-shelf {
  border-radius: 6px;
  border: 1px solid rgba(var(--alc-arcane), 0.25);
  background: rgba(10, 8, 18, 0.55);
}
.alc-reagent {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-ui);
  font-size: 10px;
  padding: 3px 9px;
  border-radius: 3px;
  border: 1px solid rgba(var(--alc-arcane), 0.3);
  background: rgba(0, 0, 0, 0.35);
  color: #c9bfe2;
  cursor: grab;
  transition: all 0.15s ease;
}
.alc-reagent:hover {
  border-color: rgba(var(--alc-arcane), 0.6);
  color: #e6dcff;
}
.alc-reagent:active {
  cursor: grabbing;
}
.alc-kiln {
  border-color: rgba(224, 140, 60, 0.3);
}
.alc-kiln:hover {
  border-color: rgba(224, 140, 60, 0.55);
  box-shadow: 0 0 14px rgba(224, 140, 60, 0.15);
}
.atlas-cosmos {
  background: radial-gradient(1px 1px at 7% 11%, rgba(255, 248, 226, 0.55), transparent), radial-gradient(1px 1px at 21% 34%, rgba(255, 248, 226, 0.3), transparent), radial-gradient(1.4px 1.4px at 33% 8%, rgba(214, 226, 255, 0.5), transparent), radial-gradient(1px 1px at 47% 27%, rgba(255, 248, 226, 0.28), transparent), radial-gradient(1px 1px at 58% 9%, rgba(255, 248, 226, 0.42), transparent), radial-gradient(1.4px 1.4px at 72% 19%, rgba(255, 236, 200, 0.5), transparent), radial-gradient(1px 1px at 86% 7%, rgba(214, 226, 255, 0.4), transparent), radial-gradient(1px 1px at 93% 31%, rgba(255, 248, 226, 0.3), transparent), radial-gradient(1px 1px at 12% 56%, rgba(255, 248, 226, 0.32), transparent), radial-gradient(1.4px 1.4px at 27% 78%, rgba(214, 226, 255, 0.42), transparent), radial-gradient(1px 1px at 44% 62%, rgba(255, 248, 226, 0.25), transparent), radial-gradient(1px 1px at 63% 84%, rgba(255, 248, 226, 0.35), transparent), radial-gradient(1.4px 1.4px at 79% 58%, rgba(255, 236, 200, 0.45), transparent), radial-gradient(1px 1px at 91% 76%, rgba(214, 226, 255, 0.32), transparent), radial-gradient(1px 1px at 52% 94%, rgba(255, 248, 226, 0.28), transparent), radial-gradient(1px 1px at 5% 88%, rgba(255, 248, 226, 0.3), transparent), radial-gradient(1.4px 1.4px at 16% 22%, rgba(255, 236, 200, 0.35), transparent), radial-gradient(1px 1px at 68% 42%, rgba(214, 226, 255, 0.25), transparent), radial-gradient(1px 1px at 37% 45%, rgba(255, 248, 226, 0.2), transparent), radial-gradient(1px 1px at 82% 92%, rgba(255, 248, 226, 0.3), transparent),  radial-gradient(ellipse 62% 42% at 74% 18%, rgba(122, 96, 220, 0.12), transparent 70%), radial-gradient(ellipse 55% 48% at 22% 62%, rgba(58, 118, 200, 0.1), transparent 70%), radial-gradient(ellipse 70% 40% at 50% 100%, rgba(230, 178, 46, 0.07), transparent 60%),  linear-gradient(180deg, #0d0c16 0%, #0a0910 55%, #070508 100%);
}
.atlas-compass {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 5;
  font-size: 64px;
  line-height: 1;
  color: rgba(205, 166, 74, 0.16);
  text-shadow: 0 0 24px rgba(205, 166, 74, 0.18);
  pointer-events: none;
}
@media (max-width: 700px) {
  .deed-board, .forge-bench {
    width: 100vw;
    height: 100dvh;
    padding: 8px;
    border-radius: 0;
  }
  .deed-board::before, .forge-bench::before {
    inset: 4px;
    border-radius: 4px;
  }
}
@media (max-width: 800px) {
  .atlas-tome {
    width: 100vw;
    height: 100dvh;
    padding: 8px;
    border-radius: 0;
  }
  .atlas-tome::before {
    inset: 4px;
    border-radius: 4px;
  }
  .atlas-here-chip {
    display: none;
  }
  .atlas-body {
    flex-direction: column;
  }
  .atlas-index {
    width: 100%;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid #3a2f23;
    flex: none;
  }
  .atlas-index form {
    min-width: 110px;
  }
  .atlas-index-item {
    width: auto;
    white-space: nowrap;
    margin-bottom: 0;
    flex: none;
  }
}
.parlay-panel {
  width: min(720px, 96vw);
  height: min(780px, 92vh);
}
.parlay-panel--portrait {
  width: min(960px, 96vw);
}
.parlay-portrait-pane {
  position: relative;
  display: block;
  flex: 0 0 300px;
  width: 300px;
  align-self: stretch;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-right: 1px solid rgba(122, 96, 58, 0.5);
  background: #0c0a09;
}
.parlay-portrait-pane img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.parlay-portrait-pane::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(230, 200, 140, 0.06);
}
.parlay-portrait-zoom {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.15s ease;
  color: #f0d48a;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(230, 178, 46, 0.4);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 11px;
}
.parlay-portrait-pane:hover .parlay-portrait-zoom {
  opacity: 1;
}
.parlay-two-col {
  flex-direction: row;
}
@media (max-width: 700px) {
  .parlay-panel--portrait {
    width: 100vw;
  }
  .parlay-portrait-pane {
    flex-basis: 168px;
    width: 100%;
    align-self: auto;
    border-right: none;
    border-bottom: 1px solid rgba(122, 96, 58, 0.5);
  }
  .parlay-two-col {
    flex-direction: column;
  }
}
.parlay-sigil {
  --tint: 230, 178, 46;
  width: 46px;
  height: 46px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  border-radius: 9999px;
  border: 2px solid rgba(var(--tint), 0.55);
  background: radial-gradient(circle at 50% 38%, rgba(var(--tint), 0.25), rgba(0, 0, 0, 0.85) 75%);
  box-shadow: 0 0 12px rgba(var(--tint), 0.25), inset 0 0 8px rgba(0, 0, 0, 0.8);
  color: rgb(var(--tint));
  text-shadow: 0 0 10px rgba(var(--tint), 0.7);
  position: relative;
}
.parlay-sigil::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 9999px;
  border: 1px dashed rgba(var(--tint), 0.3);
  pointer-events: none;
}
.parlay-speech {
  position: relative;
  padding: 12px 14px 12px 34px;
  border-radius: 5px;
  border: 1px solid rgba(122, 96, 58, 0.45);
  border-left: 3px solid rgba(230, 178, 46, 0.6);
  background: radial-gradient(ellipse at 0% 0%, rgba(230, 200, 140, 0.07), transparent 55%), linear-gradient(165deg, rgba(30, 24, 15, 0.95), rgba(16, 12, 8, 0.97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 3px 10px rgba(0, 0, 0, 0.45);
}
.parlay-speech::before {
  content: '❝';
  position: absolute;
  top: 6px;
  left: 10px;
  font-size: 18px;
  color: rgba(230, 178, 46, 0.55);
  text-shadow: 0 0 8px rgba(230, 178, 46, 0.4);
}
.parlay-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 4px;
  font-family: var(--font-gothic);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8d7c60;
  border: 1px solid transparent;
  border-bottom: 2px solid rgba(122, 96, 58, 0.3);
  background: transparent;
  cursor: pointer;
  transition: all 0.18s ease;
}
.parlay-tab:hover {
  color: #e8ce97;
}
.parlay-tab.active {
  color: #f0d48a;
  border-bottom-color: #e6b22e;
  background: linear-gradient(to top, rgba(230, 178, 46, 0.10), transparent 70%);
  box-shadow: 0 6px 12px -8px rgba(230, 178, 46, 0.5);
  text-shadow: 0 0 8px rgba(230, 178, 46, 0.5);
}
.fellow-medal {
  width: 26px;
  height: 26px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: 12px;
  color: #f0d48a;
  border: 1px solid rgba(230, 178, 46, 0.5);
  background: radial-gradient(circle at 40% 32%, rgba(230, 178, 46, 0.3), rgba(0, 0, 0, 0.85) 75%);
  box-shadow: 0 0 8px rgba(230, 178, 46, 0.18), inset 0 0 6px rgba(0, 0, 0, 0.8);
  text-shadow: 0 1px 2px #000;
}
.fellow-medal.away {
  color: #7a6f5c;
  border-color: rgba(110, 96, 72, 0.4);
  background: radial-gradient(circle at 40% 32%, rgba(110, 96, 72, 0.2), rgba(0, 0, 0, 0.85) 75%);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.8);
  text-shadow: none;
}
.fellow-ledger {
  width: min(780px, 96vw);
  height: min(720px, 92vh);
}
@media (max-width: 700px) {
  .fellow-ledger {
    width: 100vw;
    height: 100dvh;
    padding: 8px;
    border-radius: 0;
  }
  .fellow-ledger::before {
    inset: 4px;
    border-radius: 4px;
  }
}
.fellow-medal--lg {
  width: 38px;
  height: 38px;
  font-size: 17px;
}
.fellow-action {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(122, 96, 58, 0.35);
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 235, 190, 0.05);
  font-size: 10px;
  transition: all 0.15s ease;
  cursor: pointer;
}
.fellow-action:hover {
  border-color: rgba(230, 178, 46, 0.6);
  box-shadow: 0 0 8px rgba(230, 178, 46, 0.25), inset 0 1px 0 rgba(255, 235, 190, 0.08);
  transform: translateY(-1px);
}
@media (max-width: 700px) {
  .parlay-panel {
    width: 100vw;
    height: 100dvh;
    padding: 8px;
    border-radius: 0;
  }
  .parlay-panel::before {
    inset: 4px;
    border-radius: 4px;
  }
}
[data-game-theme="light"] .tome-panel {
  background: linear-gradient(135deg, #8a6a42 0%, #6e5232 60%, #5a4126 100%);
  border-color: #4a3620;
}
[data-game-theme="light"] .tome-panel--forge {
  background: radial-gradient(ellipse at 50% 108%, rgba(180, 90, 30, 0.25), transparent 55%), linear-gradient(160deg, #766252 0%, #5d4c3d 100%);
  border-color: #43362a;
}
[data-game-theme="light"] .deed-card, [data-game-theme="light"] .forge-card {
  background: linear-gradient(170deg, #f2ecdb 0%, #e7dcc2 100%);
  border-color: rgba(140, 112, 56, 0.6);
  color: #2b2218;
  box-shadow: 0 4px 12px rgba(60, 45, 20, 0.3);
}
[data-game-theme="light"] .deed-reward {
  background: rgba(90, 65, 38, 0.08);
  color: #5a4a30;
  border-color: #b89a5e;
}
[data-game-theme="light"] .forge-mat {
  background: rgba(90, 65, 38, 0.06);
  color: #1f7a44;
}
[data-game-theme="light"] .forge-mat.lack {
  color: #a51d1d;
}
[data-game-theme="light"] .forge-shelf {
  background: rgba(90, 65, 38, 0.08);
  border-color: #b89a5e;
  box-shadow: inset 0 2px 6px rgba(60, 45, 20, 0.2);
}
[data-game-theme="light"] .smy-slot {
  background: linear-gradient(180deg, #f2ecdb, #e7dcc2);
  border-color: rgba(140, 112, 56, 0.55);
}
[data-game-theme="light"] .smy-slot-name {
  color: #5a3a12;
}
[data-game-theme="light"] .smy-slot-label {
  color: #7a6440;
}
[data-game-theme="light"] .smy-readout {
  background: rgba(90, 65, 38, 0.08);
  border-color: #b89a5e;
}
[data-game-theme="light"] .smy-readout-value {
  color: #5a3a12;
}
[data-game-theme="light"] .smy-reagent {
  background: rgba(90, 65, 38, 0.06);
  border-color: #b89a5e;
  color: #3a2c18;
}
[data-game-theme="light"] .smy-blueprint {
  color: #5a4a30;
  border-color: #b89a5e;
}
[data-game-theme="light"] .smy-smelt-bar {
  background: linear-gradient(180deg, #e7dcc2, #d8c9a6);
  border-color: #b89a5e;
}
[data-game-theme="light"] .smy-smelt-out {
  background: rgba(90, 65, 38, 0.06);
  border-color: #b89a5e;
}
[data-game-theme="light"] .smy-station-btn, [data-game-theme="light"] .smy-hearth, [data-game-theme="light"] .smy-anvil-stage, [data-game-theme="light"] .smy-furnace {
  background: linear-gradient(180deg, #f2ecdb, #e7dcc2);
  border-color: rgba(140, 112, 56, 0.55);
  color: #5a4a30;
}
[data-game-theme="light"] .smy-station-btn small {
  color: #7a6440;
}
[data-game-theme="light"] .smy-station-btn--on {
  background: linear-gradient(180deg, #e8c9a0, #d8b483);
  color: #3a2a0a;
}
[data-game-theme="light"] .smy-heat {
  background: linear-gradient(180deg, #e7dcc2, #d8c9a6);
  border-color: #b89a5e;
}
[data-game-theme="light"] .smy-heat-hint {
  color: #7a6440;
}
[data-game-theme="light"] .alc-station-btn, [data-game-theme="light"] .alc-card, [data-game-theme="light"] .alc-mortar-station, [data-game-theme="light"] .alc-alembic, [data-game-theme="light"] .alc-mortar, [data-game-theme="light"] .alc-slot, [data-game-theme="light"] .alc-mill-out, [data-game-theme="light"] .alc-shelf {
  background: linear-gradient(180deg, #efe9e2, #e2d8d0);
  border-color: rgba(120, 96, 150, 0.45);
  color: #4a3a60;
}
[data-game-theme="light"] .alc-station-btn small {
  color: #6c5c88;
}
[data-game-theme="light"] .alc-station-btn--on {
  background: linear-gradient(180deg, #d9cbee, #c6b4e2);
  color: #2c1c4a;
}
[data-game-theme="light"] .alc-card-title, [data-game-theme="light"] .alc-slot-name {
  color: #3a2a58;
}
[data-game-theme="light"] .alc-slot-label {
  color: #6c5c88;
}
[data-game-theme="light"] .alc-mat {
  background: rgba(90, 70, 120, 0.07);
  color: #4a3a70;
}
[data-game-theme="light"] .alc-mat.lack {
  color: #a51d1d;
}
[data-game-theme="light"] .alc-vial-chip {
  color: #1f6e63;
}
[data-game-theme="light"] .alc-reagent {
  background: rgba(90, 70, 120, 0.06);
  border-color: rgba(120, 96, 150, 0.45);
  color: #3a2c50;
}
[data-game-theme="light"] .alc-sigil {
  color: #6c5c88;
  border-color: rgba(120, 96, 150, 0.4);
}
[data-game-theme="light"] .alc-sigil--on {
  color: #2c1c4a;
  background: rgba(120, 96, 180, 0.16);
}
[data-game-theme="light"] .alc-grind-bar {
  background: linear-gradient(180deg, #e2ddd2, #d2ccc0);
  border-color: rgba(60, 140, 128, 0.5);
}
[data-game-theme="light"] .alc-brew-btn {
  color: #f4eeff;
  background: linear-gradient(180deg, #6a54a8, #4a3880);
}
[data-game-theme="light"] .atlas-compass {
  color: rgba(90, 65, 38, 0.22);
}
[data-game-theme="light"] .parlay-speech {
  background: linear-gradient(165deg, #f2ecdb, #e7dcc2);
  border-color: rgba(140, 112, 56, 0.55);
  border-left-color: rgba(140, 112, 56, 0.8);
  color: #2b2218;
}
[data-game-theme="light"] .parlay-tab {
  color: #6a5630;
  border-bottom-color: #c4b289;
}
[data-game-theme="light"] .parlay-tab.active {
  color: #3a2a0a;
  border-bottom-color: #8c7038;
  text-shadow: none;
}
[data-window-dressing="tome"] .sg-window__titlebar {
  border-top-left-radius: calc(var(--sg-win-radius) - 1px);
  border-top-right-radius: calc(var(--sg-win-radius) - 1px);
}
[data-window-dressing="tome"] .sg-window__body {
  border-bottom-left-radius: calc(var(--sg-win-radius) - 1px);
  border-bottom-right-radius: calc(var(--sg-win-radius) - 1px);
}
[data-window-dressing="tome"] .sg-window__titlebar {
  padding: 7px 10px 6px;
  position: relative;
}
[data-window-dressing="tome"] .sg-window__titlebar::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -3px;
  height: 1px;
  background: linear-gradient( to right, transparent, rgba(var(--sg-dress-tint), 0.35) 20%, rgba(var(--sg-dress-tint), 0.35) 80%, transparent );
  pointer-events: none;
  z-index: 2;
}
[data-window-dressing="tome"] .sg-window__title {
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.16em;
  background: linear-gradient(180deg, #f6e3b0 15%, #e6b22e 55%, #9c7418 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 10px rgba(230, 178, 46, 0.25)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9));
}
[data-window-dressing="tome"] .sg-window__title::before {
  content: '✦ ';
  background: none;
  -webkit-text-fill-color: rgba(var(--sg-dress-tint), 0.9);
}
[data-game-theme="light"][data-window-dressing="tome"] .sg-window__title {
  background: linear-gradient(180deg, #7a5a1e 10%, #5a3f12 60%, #3c2a0a 95%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: none;
}
[data-window-dressing="tome"] .sg-window__body {
  position: relative;
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--sg-dress-tint), 0.05), transparent 55%), repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 240, 200, 0.012) 3px 4px), repeating-linear-gradient(90deg, transparent 0 3px, rgba(0, 0, 0, 0.02) 3px 4px);
}
[data-window-dressing="tome"] .sg-window__body::-webkit-scrollbar, [data-window-dressing="tome"] .sg-window__body *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
[data-window-dressing="tome"] .sg-window__body::-webkit-scrollbar-track, [data-window-dressing="tome"] .sg-window__body *::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.25);
}
[data-window-dressing="tome"] .sg-window__body::-webkit-scrollbar-thumb, [data-window-dressing="tome"] .sg-window__body *::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(230, 178, 46, 0.4), rgba(140, 100, 30, 0.4));
  border-radius: 4px;
}
[data-window-dressing="tome"] .sg-window[data-window-id="stats"] {
  --sg-dress-tint: 230, 178, 46;
  --sg-win-bg-glow: rgba(200, 120, 40, 0.22);
}
[data-window-dressing="tome"] .sg-window[data-window-id="pack"] {
  --sg-dress-tint: 224, 122, 48;
}
[data-window-dressing="tome"] .sg-window[data-window-id="map"] {
  --sg-dress-tint: 126, 178, 221;
}
[data-window-dressing="tome"] .sg-window[data-window-id="chronicle"] {
  --sg-dress-tint: 116, 190, 130;
}
[data-window-dressing="tome"] .sg-window[data-window-id="chronicle"] .sg-window__body {
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--sg-dress-tint), 0.05), transparent 55%), repeating-linear-gradient( 0deg, transparent 0 21px, rgba(var(--sg-dress-tint), 0.05) 21px 22px );
}
[data-window-dressing="tome"] .sg-window[data-window-id="viewport"] {
  --sg-dress-tint: 230, 178, 46;
  --sg-win-bg-glow: rgba(120, 84, 40, 0.3);
}
[data-window-dressing="tome"] .sg-window[data-window-id="viewport"] > .sg-window__titlebar::before {
  content: '❖';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(var(--sg-dress-tint), 0.4);
  font-size: 10px;
  pointer-events: none;
  z-index: 1;
}
[data-window-dressing="tome"] .tome-panel, [data-window-dressing="tome"] .grimoire-tome, [data-window-dressing="tome"] .sg-window--tome .stone-panel {
  border-radius: 10px;
  border-color: var(--sg-win-frame);
  border-top-color: var(--sg-win-frame-lite);
  border-left-color: var(--sg-win-frame-lite);
  border-bottom-color: var(--sg-win-frame-dark);
  border-right-color: var(--sg-win-frame-dark);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 0 46px rgba(0, 0, 0, 0.55), 0 24px 70px rgba(0, 0, 0, 0.88), 0 0 42px rgba(230, 178, 46, 0.1);
}
[data-window-dressing="tome"] .tome-panel::before, [data-window-dressing="tome"] .grimoire-tome::before {
  inset: 6px;
  border-color: rgba(230, 178, 46, 0.26);
  border-radius: 7px;
}
[data-window-dressing="tome"] .grim-corner {
  width: 22px;
  height: 22px;
  border-width: 2px;
  border-color: rgba(230, 178, 46, 0.55);
  border-radius: 0;
  filter: drop-shadow(0 0 4px rgba(230, 178, 46, 0.25));
}
[data-window-dressing="tome"] .grim-corner-tl, [data-window-dressing="tome"] .grim-corner-tr, [data-window-dressing="tome"] .grim-corner-bl, [data-window-dressing="tome"] .grim-corner-br {
  border-radius: 0;
}
[data-window-dressing="tome"] .grim-edge-gem {
  box-shadow: 0 0 8px rgba(230, 178, 46, 0.6);
}
[data-game-theme="light"][data-window-dressing="tome"] .tome-panel, [data-game-theme="light"][data-window-dressing="tome"] .grimoire-tome {
  border-color: #4a3620;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 14px 40px rgba(60, 45, 20, 0.45), 0 0 30px rgba(140, 112, 56, 0.15);
}
[data-window-dressing="tome"] .sg-float {
  --sg-dress-tint: 230, 178, 46;
}
[data-window-dressing="tome"] .sg-float[data-float-id="pack"] {
  --sg-dress-tint: 224, 122, 48;
}
[data-window-dressing="tome"] .sg-float[data-float-id="map"] {
  --sg-dress-tint: 126, 178, 221;
}
[data-window-dressing="tome"] .sg-float[data-float-id="chronicle"] {
  --sg-dress-tint: 116, 190, 130;
}
[data-window-dressing="tome"] .sg-float {
  padding: 11px;
  border-radius: 12px;
  border: 1px solid var(--sg-win-frame);
  border-top-color: var(--sg-win-frame-lite);
  border-left-color: var(--sg-win-frame-lite);
  border-bottom-color: var(--sg-win-frame-dark);
  border-right-color: var(--sg-win-frame-dark);
  background: radial-gradient(ellipse at 20% 0%, rgba(var(--sg-dress-tint), 0.14), transparent 55%), radial-gradient(ellipse at 85% 100%, rgba(90, 50, 24, 0.18), transparent 50%), linear-gradient(135deg, #332415 0%, #241810 42%, #1a1109 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 0 34px rgba(0, 0, 0, 0.55), 0 24px 70px rgba(0, 0, 0, 0.85), 0 0 42px rgba(var(--sg-dress-tint), 0.1);
}
[data-window-dressing="tome"] .sg-float::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(var(--sg-dress-tint), 0.28);
  border-radius: 8px;
  pointer-events: none;
  z-index: 3;
}
[data-window-dressing="tome"] .sg-float .sg-window--pane {
  border-radius: 6px;
  border-color: rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.04), 0 4px 14px rgba(0, 0, 0, 0.5);
}
[data-window-dressing="tome"] .sg-float .sg-window__titlebar {
  padding: 9px 12px 8px;
}
[data-window-dressing="tome"] .sg-float .sg-window__title {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-align: center;
}
[data-window-dressing="tome"] .sg-float .sg-window__title::after {
  content: ' ✦';
  background: none;
  -webkit-text-fill-color: rgba(var(--sg-dress-tint), 0.9);
}
[data-game-theme="light"][data-window-dressing="tome"] .sg-float {
  background: linear-gradient(135deg, #8a6a42 0%, #6e5232 60%, #5a4126 100%);
  border-color: #4a3620;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 14px 40px rgba(60, 45, 20, 0.45), 0 0 30px rgba(140, 112, 56, 0.15);
}
.xp2-root {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 14px 18px 18px;
  gap: 12px;
}
.xp2-topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(230, 178, 46, 0.18);
  border-radius: 10px;
  background: rgba(8, 6, 3, 0.72);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.xp2-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: var(--font-gothic, serif);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #e2d6bc;
  border: 1px solid rgba(230, 178, 46, 0.3);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(46, 38, 20, 0.9), rgba(24, 19, 10, 0.9));
  transition: color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.xp2-btn:hover:not(:disabled) {
  color: #f0d89a;
  border-color: rgba(230, 178, 46, 0.65);
  transform: translateY(-1px);
}
.xp2-btn--primary {
  color: #e6b22e;
  border-color: rgba(230, 178, 46, 0.55);
  background: linear-gradient(180deg, rgba(74, 56, 18, 0.95), rgba(38, 28, 9, 0.95));
}
@keyframes xp2-sweep-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(230, 178, 46, 0.3);
  }
  50% {
    box-shadow: 0 0 16px 3px rgba(230, 178, 46, 0.22);
  }
}
.xp2-btn--sweeping {
  animation: xp2-sweep-pulse 2.2s ease-in-out infinite;
}
.xp2-btn--locked, .xp2-btn:disabled {
  opacity: 0.45;
  filter: grayscale(0.7);
  cursor: not-allowed;
}
.xp2-btn-badge {
  font-family: var(--font-ui, monospace);
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(230, 178, 46, 0.3);
  background: rgba(0, 0, 0, 0.45);
}
.xp2-energy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
  flex: 1;
  max-width: 340px;
  color: #e6b22e;
}
.xp2-energy-track {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(230, 178, 46, 0.35);
  background: rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.xp2-energy-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8a6a1c, #e6b22e);
  transition: width 2600ms linear;
}
.xp2-energy-num {
  font-family: var(--font-ui, monospace);
  font-size: 13.5px;
  font-weight: 600;
  color: #e2d6bc;
}
.xp2-energy--low .xp2-energy-fill {
  background: linear-gradient(90deg, #8a4a1c, #ff7700);
}
.xp2-energy--low {
  color: #ff9d3c;
}
@keyframes xp2-energy-alarm {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35);
  }
  50% {
    box-shadow: 0 0 12px 2px rgba(220, 38, 38, 0.45);
  }
}
.xp2-energy--empty {
  color: #f87171;
}
.xp2-energy--empty .xp2-energy-fill {
  background: #7f1d1d;
}
.xp2-energy--empty .xp2-energy-track {
  border-color: rgba(220, 38, 38, 0.7);
  animation: xp2-energy-alarm 1.6s ease-in-out infinite;
}
.xp2-depth {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9db4d8;
  font-family: var(--font-ui, monospace);
  font-size: 14px;
}
.xp2-depth-btn {
  padding: 3px 8px;
  border: 1px solid rgba(157, 180, 216, 0.35);
  border-radius: 6px;
  color: #9db4d8;
  background: rgba(0, 0, 0, 0.4);
  transition: color 140ms ease, border-color 140ms ease;
}
.xp2-depth-btn:hover {
  color: #cfe0f5;
  border-color: rgba(157, 180, 216, 0.7);
}
.xp2-overwhelm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #f87171;
}
.xp2-overwhelm-pip {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid rgba(220, 38, 38, 0.6);
  background: rgba(0, 0, 0, 0.5);
}
.xp2-overwhelm-pip--lit {
  background: #dc2626;
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.7);
}
.xp2-phase-icon {
  margin-left: auto;
  color: #e6b22e;
  font-size: 16px;
  opacity: 0.85;
}
.xp2-root[data-explore-phase="night"] .xp2-phase-icon {
  color: #9db4d8;
}
.xp2-body {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 14px;
}
.xp2-lore {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid rgba(230, 178, 46, 0.18);
  border-radius: 10px;
  background: rgba(8, 6, 3, 0.72);
  overflow: hidden;
}
.xp2-lore-art {
  position: relative;
  height: 150px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.6);
}
.xp2-lore-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.xp2-lore-art-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #57534e;
  font-size: 40px;
}
.xp2-lore-name {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  font-size: 21px;
  color: #e8ce97;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
}
.xp2-lore-body {
  padding: 12px 14px;
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}
.xp2-minimap {
  flex-shrink: 0;
  padding: 8px 10px 10px;
  border-top: 1px solid rgba(230, 178, 46, 0.16);
  background: rgba(0, 0, 0, 0.35);
}
.xp2-minimap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8d8371;
}
.xp2-minimap-leads {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #e6b22e;
}
.xp2-minimap-grid {
  width: 100%;
}
.xp2-lore-desc {
  font-size: 14.5px;
  font-style: italic;
  line-height: 1.6;
  color: #c6ba9f;
}
.xp2-lore-notes {
  margin-top: 12px;
}
.xp2-lore-notes-head {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: #c9a75a;
  margin-bottom: 6px;
}
@keyframes xp2-lore-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.xp2-lore-line {
  font-size: 14px;
  font-style: italic;
  line-height: 1.55;
  color: #ddd1b6;
  padding: 5px 0 5px 10px;
  border-left: 2px solid rgba(230, 178, 46, 0.25);
  margin-bottom: 4px;
  animation: xp2-lore-in 500ms ease backwards;
}
.xp2-scene {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(230, 178, 46, 0.14);
  border-radius: 10px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 120%, rgba(230, 178, 46, 0.06), transparent 60%), rgba(5, 4, 2, 0.35);
}
.xp2-scene-bg {
  position: absolute;
  inset: 0;
}
.xp2-phase-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 800ms ease;
}
.xp2-root[data-explore-phase="day"] .xp2-phase-veil {
  background: linear-gradient(180deg, rgba(255, 200, 90, 0.05), transparent 45%);
}
.xp2-root[data-explore-phase="night"] .xp2-phase-veil {
  background: linear-gradient(180deg, rgba(30, 50, 110, 0.16), rgba(10, 16, 42, 0.1) 55%), radial-gradient(ellipse at 80% 10%, rgba(157, 180, 216, 0.08), transparent 45%);
}
.xp2-walkers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.xp2-scene-hint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #8d8371;
  font-family: var(--font-fell, serif);
  font-style: italic;
  font-size: 16.5px;
  pointer-events: none;
}
.xp2-scene-hint i {
  font-size: 34px;
  opacity: 0.5;
}
.xp2-scene-hint--faint {
  opacity: 0.6;
}
@keyframes xp2-pop-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.25);
  }
  62% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.14);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.xp2-find {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  --tint: 230, 178, 46;
  animation: xp2-pop-in 460ms cubic-bezier(0.2, 0.9, 0.3, 1.35) backwards;
  transition: filter 160ms ease;
}
.xp2-find:hover {
  filter: brightness(1.25);
}
.xp2-find-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  font-size: 17px;
  color: rgb(var(--tint));
  border: 1.5px solid rgba(var(--tint), 0.55);
  background: radial-gradient(circle at 50% 35%, rgba(var(--tint), 0.16), transparent 70%), rgba(8, 6, 3, 0.85);
  box-shadow: 0 0 12px rgba(var(--tint), 0.22), 0 3px 8px rgba(0, 0, 0, 0.5);
}
.xp2-find-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 17px;
  padding: 0 4px;
  font-family: var(--font-ui, monospace);
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  color: #f5e9cf;
  border-radius: 999px;
  border: 1px solid rgba(var(--tint), 0.6);
  background: rgba(10, 8, 4, 0.95);
}
.xp2-find-label {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #ecdfc4;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.8);
}
.xp2-find--threat {
  --tint: 220, 68, 56;
}
.xp2-find--poi {
  --tint: 230, 178, 46;
}
.xp2-find--node {
  --tint: 106, 190, 112;
}
.xp2-find--exit {
  --tint: 156, 130, 255;
}
.xp2-find--dim {
  opacity: 0.4;
  filter: grayscale(0.8);
}
.xp2-find--dim:hover {
  opacity: 0.6;
}
.xp2-find--selected .xp2-find-icon {
  border-color: rgb(var(--tint));
  box-shadow: 0 0 0 3px rgba(var(--tint), 0.28), 0 0 18px rgba(var(--tint), 0.4);
}
.xp2-find[data-strength="elite"] .xp2-find-icon, .xp2-find[data-strength="boss"] .xp2-find-icon {
  border-width: 2px;
  box-shadow: 0 0 18px rgba(var(--tint), 0.5), 0 3px 8px rgba(0, 0, 0, 0.6);
}
.xp2-popover {
  position: absolute;
  z-index: 20;
  min-width: 240px;
  max-width: 300px;
  padding: 10px 12px;
  border: 1px solid rgba(230, 178, 46, 0.35);
  border-radius: 10px;
  background: rgba(12, 9, 4, 0.96);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.65);
  animation: xp2-lore-in 180ms ease backwards;
}
.xp2-popover-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e8ce97;
  font-family: var(--font-gothic, serif);
  font-weight: 700;
  font-size: 16px;
}
.xp2-popover-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xp2-popover-close {
  color: #7a6b57;
  font-size: 14px;
  line-height: 1;
  transition: color 140ms ease;
}
.xp2-popover-close:hover {
  color: #e8ce97;
}
.xp2-popover-sub {
  margin-top: 5px;
  font-size: 13.5px;
  font-style: italic;
  color: #c6ba9f;
}
.xp2-popover-intel {
  color: #7dd3fc;
  font-style: normal;
}
.xp2-popover-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.xp2-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #e2d6bc;
  border: 1px solid rgba(216, 201, 166, 0.3);
  border-radius: 7px;
  background: rgba(30, 24, 12, 0.85);
  transition: color 140ms ease, border-color 140ms ease;
}
.xp2-act:hover {
  color: #f5e9cf;
  border-color: rgba(216, 201, 166, 0.65);
}
.xp2-act--danger {
  color: #f0908a;
  border-color: rgba(220, 68, 56, 0.45);
}
.xp2-act--danger:hover {
  color: #fca5a5;
  border-color: rgba(220, 68, 56, 0.8);
}
.xp2-act--gold {
  color: #e6c675;
  border-color: rgba(230, 178, 46, 0.45);
}
.xp2-act--gold:hover {
  color: #f0d89a;
  border-color: rgba(230, 178, 46, 0.8);
}
.xp2-act--green {
  color: #97d69d;
  border-color: rgba(106, 190, 112, 0.45);
}
.xp2-act--green:hover {
  color: #bbf7c0;
  border-color: rgba(106, 190, 112, 0.8);
}
.xp2-cost {
  font-size: 10px;
  opacity: 0.75;
  font-family: var(--font-ui, monospace);
}
.xp2-toasts {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 320px;
  pointer-events: none;
}
.xp2-toast {
  padding: 8px 12px;
  font-size: 13.5px;
  font-style: italic;
  color: #cfc4ab;
  border: 1px solid rgba(230, 178, 46, 0.25);
  border-left-width: 3px;
  border-radius: 8px;
  background: rgba(10, 8, 4, 0.9);
  animation: xp2-lore-in 320ms ease backwards;
}
@media (prefers-reduced-motion: reduce) {
  .xp2-find, .xp2-lore-line, .xp2-popover, .xp2-toast {
    animation: none;
  }
  .xp2-btn--sweeping, .xp2-energy--empty .xp2-energy-track {
    animation: none;
  }
  .xp2-energy-fill {
    transition: none;
  }
}
@media (max-width: 767px) {
  .xp2-body {
    flex-direction: column;
  }
  .xp2-lore {
    width: 100%;
    max-height: 180px;
  }
  .xp2-lore-art {
    height: 90px;
  }
  .xp2-find-label {
    max-width: 80px;
  }
}
.xp2-find {
  z-index: 6;
}
.xp2-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  transition: box-shadow 700ms ease;
}
.xp2-scene[data-overwhelm="1"]::after {
  box-shadow: inset 0 0 46px rgba(220, 38, 38, 0.14);
}
.xp2-scene[data-overwhelm="2"]::after {
  box-shadow: inset 0 0 80px rgba(220, 38, 38, 0.26);
}
.xp2-scene[data-overwhelm="3"]::after {
  box-shadow: inset 0 0 110px rgba(220, 38, 38, 0.38);
}
@keyframes xp2-overwhelm-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}
.xp2-scene[data-overwhelm="2"]::after, .xp2-scene[data-overwhelm="3"]::after {
  animation: xp2-overwhelm-pulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .xp2-scene::after {
    animation: none;
    transition: none;
  }
}
@media (max-width: 767px) {
  .xp2-act {
    padding: 10px 14px;
    font-size: 13px;
  }
}
.xp2-intent-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 6px 12px;
  border: 1px solid rgba(230, 178, 46, 0.14);
  border-radius: 10px;
  background: rgba(8, 6, 3, 0.6);
}
.xp2-intent-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.xp2-intent-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #8d8371;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 2px;
}
.xp2-intent-chip, .xp2-focus-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 13px;
  border: 1px solid rgba(216, 201, 166, 0.22);
  border-radius: 8px;
  background: rgba(20, 16, 8, 0.7);
  color: #d8c9a6;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.xp2-intent-chip:hover, .xp2-focus-chip:hover {
  border-color: rgba(230, 178, 46, 0.5);
  color: #f0e6cf;
}
.xp2-intent-chip--set {
  border-color: rgba(230, 178, 46, 0.75);
  background: rgba(230, 178, 46, 0.16);
  color: #f4e0b0;
  box-shadow: 0 0 0 1px rgba(230, 178, 46, 0.2);
}
.xp2-focus-chip--set {
  border-color: rgba(230, 178, 46, 0.45);
  background: rgba(230, 178, 46, 0.08);
  color: #e6b22e;
}
.xp2-intent-chip--locked {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.xp2-intent-chip--locked:hover {
  border-color: rgba(216, 201, 166, 0.22);
  color: #d8c9a6;
}
.xp2-chip-mark {
  margin-left: 2px;
  font-size: 10px;
  color: rgba(167, 139, 250, 0.85);
}
.xp2-quarry {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 200ms ease-out;
}
.xp2-quarry-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
}
.xp2-quarry-panel {
  position: relative;
  width: min(720px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 18px 20px 20px;
  border: 1px solid rgba(230, 178, 46, 0.3);
  border-radius: 12px;
  background: radial-gradient(120% 80% at 50% 0%, rgba(60, 20, 20, 0.5), transparent 70%), rgba(12, 9, 6, 0.97);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}
.xp2-quarry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.xp2-quarry-title {
  font-size: 20px;
  letter-spacing: 0.06em;
  color: #e8ce97;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.xp2-quarry-close {
  color: #7a6b57;
  font-size: 20px;
  line-height: 1;
}
.xp2-quarry-close:hover {
  color: #e8ce97;
}
.xp2-quarry-sub {
  margin: 6px 0 14px;
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  font-size: 13px;
  color: #9a8f79;
}
.xp2-quarry-empty {
  padding: 24px 8px;
  text-align: center;
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  color: #7a6b57;
}
.xp2-quarry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}
.xp2-quarry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px 8px;
  border: 1px solid rgba(216, 201, 166, 0.18);
  border-radius: 10px;
  background: rgba(20, 16, 8, 0.7);
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}
.xp2-quarry-card:hover {
  border-color: rgba(220, 70, 60, 0.65);
  background: rgba(40, 14, 10, 0.75);
  transform: translateY(-2px);
}
.xp2-quarry-card--set {
  border-color: rgba(220, 70, 60, 0.9);
  background: rgba(60, 16, 12, 0.8);
  box-shadow: 0 0 0 1px rgba(220, 70, 60, 0.3);
}
.xp2-quarry-portrait {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  filter: saturate(0.85) contrast(1.05);
}
.xp2-quarry-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  font-size: 34px;
}
.xp2-quarry-glyph--harvest {
  color: #8fdcae;
  background: radial-gradient(90% 80% at 50% 20%, rgba(46, 120, 74, 0.55), transparent 70%), linear-gradient(180deg, rgba(18, 30, 20, 0.95), rgba(8, 14, 9, 0.95));
  text-shadow: 0 0 14px rgba(120, 220, 160, 0.35);
}
.xp2-quarry-glyph--quarry {
  color: #e8a08f;
  background: linear-gradient(180deg, rgba(34, 16, 14, 0.95), rgba(12, 7, 6, 0.95));
}
.xp2-quarry-panel--harvest {
  background: radial-gradient(120% 80% at 50% 0%, rgba(24, 60, 36, 0.45), transparent 70%), rgba(10, 12, 8, 0.97);
}
.xp2-quarry-panel--harvest .xp2-quarry-card:hover {
  border-color: rgba(90, 190, 130, 0.6);
  background: rgba(16, 40, 26, 0.75);
}
.xp2-quarry-panel--harvest .xp2-quarry-card--set {
  border-color: rgba(90, 190, 130, 0.9);
  background: rgba(20, 56, 34, 0.8);
  box-shadow: 0 0 0 1px rgba(90, 190, 130, 0.3);
}
.xp2-quarry-panel--harvest .xp2-quarry-mark {
  background: rgba(40, 130, 80, 0.9);
  color: #e6fff1;
}
.xp2-quarry-name {
  font-size: 13px;
  color: #e8dcc0;
  text-align: center;
  line-height: 1.2;
}
.xp2-quarry-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #8d8371;
}
.xp2-quarry-count {
  color: #c0553f;
}
.xp2-quarry-mark {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(180, 40, 32, 0.9);
  color: #ffe9e2;
}
.xp2-quarry-any {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  border: 1px dashed rgba(216, 201, 166, 0.25);
  border-radius: 10px;
  font-size: 13px;
  color: #b8a882;
  transition: border-color 160ms ease, color 160ms ease;
}
.xp2-quarry-any:hover {
  border-color: rgba(230, 178, 46, 0.5);
  color: #f0e6cf;
}
.xp2-quarry-any--set {
  border-style: solid;
  border-color: rgba(230, 178, 46, 0.6);
  color: #f4e0b0;
}
.xp2-quarry-any-sub {
  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  font-size: 12px;
  color: #7a6b57;
}
.xp2-popover-sub--rich {
  color: #7fd6a0;
}
.xp2-party {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(230, 178, 46, 0.14);
  border-radius: 10px;
  background: rgba(8, 6, 3, 0.6);
}
.xp2-party-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid rgba(216, 201, 166, 0.18);
  border-radius: 8px;
  background: rgba(20, 16, 8, 0.7);
}
.xp2-party-chip--battle {
  border-color: rgba(220, 68, 56, 0.5);
}
.xp2-party-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #d8c9a6;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xp2-party-you {
  margin-left: 4px;
  font-size: 10px;
  color: #8d8371;
  font-weight: 400;
}
.xp2-party-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 74px;
}
.xp2-party-bar {
  height: 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(216, 201, 166, 0.18);
  overflow: hidden;
}
.xp2-party-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 600ms ease;
}
.xp2-party-bar--hp .xp2-party-fill {
  background: linear-gradient(90deg, #7f1d1d, #dc2626);
}
.xp2-party-bar--en .xp2-party-fill {
  background: linear-gradient(90deg, #8a6a1c, #e6b22e);
}
.xp2-party-flag {
  font-size: 12px;
  color: #8d8371;
}
.xp2-party-flag--battle {
  color: #f87171;
}
.xp2-party-flag--battle:hover {
  color: #fca5a5;
}
@keyframes xp2-sweep-steps {
  0%, 100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
.xp2-party-flag--sweep {
  color: #e6b22e;
  animation: xp2-sweep-steps 1.6s ease-in-out infinite;
}
.xp2-party-pool {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui, monospace);
  font-size: 12px;
  color: #e6b22e;
}
@media (prefers-reduced-motion: reduce) {
  .xp2-party-flag--sweep {
    animation: none;
  }
  .xp2-party-fill {
    transition: none;
  }
}
html[data-perf-low] * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-perf-low] .sg-window {
  background: var(--sg-win-bg, rgba(14, 12, 16, 0.97));
}
html[data-perf-low] .game-root *, html[data-perf-low] .game-root *::before, html[data-perf-low] .game-root *::after {
  animation: none !important;
}
html[data-perf-low] .sg-window__veil, html[data-perf-low] .sg-window__veil::after {
  animation: none !important;
  transition: none !important;
}
.xp2-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.xp2-slides::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(5, 4, 2, 0.18), rgba(5, 4, 2, 0.58) 78%), linear-gradient(180deg, rgba(5, 4, 2, 0.38), rgba(5, 4, 2, 0.2) 40%, rgba(5, 4, 2, 0.42));
}
.xp2-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: saturate(0.8);
  transform: scale(1.06);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: opacity;
}
.xp2-slide--solo {
  opacity: 0.55;
}
.xp2-slide--of-2 {
  animation-name: xp2-slide-of-2;
}
.xp2-slide--of-3 {
  animation-name: xp2-slide-of-3;
}
.xp2-slide--of-4 {
  animation-name: xp2-slide-of-4;
}
.xp2-slide--of-5 {
  animation-name: xp2-slide-of-5;
}
.xp2-slide--of-6 {
  animation-name: xp2-slide-of-6;
}
@keyframes xp2-slide-of-2 {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 0.62;
  }
  50% {
    opacity: 0.62;
  }
  55% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes xp2-slide-of-3 {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 0.62;
  }
  33.3% {
    opacity: 0.62;
  }
  37.3% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes xp2-slide-of-4 {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 0.62;
  }
  25% {
    opacity: 0.62;
  }
  29% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes xp2-slide-of-5 {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 0.62;
  }
  20% {
    opacity: 0.62;
  }
  24% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes xp2-slide-of-6 {
  0% {
    opacity: 0;
  }
  3.5% {
    opacity: 0.62;
  }
  16.7% {
    opacity: 0.62;
  }
  20.2% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .xp2-slide {
    animation: none;
  }
  .xp2-slide:first-child {
    opacity: 0.5;
  }
}
.xp2-find-tip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, 4px);
  width: max-content;
  max-width: 240px;
  padding: 8px 12px;
  font-family: var(--font-fell, serif);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.5;
  text-align: center;
  white-space: normal;
  color: #e2d6bc;
  background: rgba(12, 9, 4, 0.96);
  border: 1px solid rgba(var(--tint), 0.45);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 30;
}
.xp2-find-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(var(--tint), 0.45);
}
.xp2-find:hover .xp2-find-tip, .xp2-find:focus-visible .xp2-find-tip {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .xp2-find-tip {
    transition: none;
  }
}
.xp2-camp {
  position: absolute;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  border-radius: 10px;
  background: radial-gradient(ellipse at 50% 50%, rgba(245, 158, 11, 0.16), transparent 40%), linear-gradient(180deg, rgba(6, 4, 2, 0.82), rgba(6, 4, 2, 0.28) 26%, rgba(6, 4, 2, 0.32) 62%, rgba(6, 4, 2, 0.88)), url("/images/areas/campfire.jpg") center / cover no-repeat, rgba(6, 4, 2, 0.94);
}
.xp2-camp-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(180deg, rgba(6, 4, 2, 0.9), transparent);
}
.xp2-camp-title {
  font-size: 19px;
  color: #f3c77c;
}
.xp2-camp-title i {
  color: #f59e0b;
  margin-right: 6px;
}
.xp2-camp-tier {
  margin-left: 8px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d9a441;
}
.xp2-camp-points {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #cbbfa4;
}
.xp2-camp-points i {
  font-size: 8px;
  color: #f59e0b;
}
.xp2-camp-ambush {
  font-size: 13.5px;
  font-style: italic;
  color: #f0908a;
}
.xp2-camp-break {
  margin-left: auto;
}
.xp2-camp-fire {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  font-size: 54px;
  color: #f59e0b;
  text-shadow: 0 0 30px rgba(245, 158, 11, 0.55), 0 0 70px rgba(217, 119, 6, 0.3);
  pointer-events: none;
}
.xp2-camp-spot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 168px;
  padding: 12px 10px;
  text-align: center;
  border: 1px solid rgba(230, 178, 46, 0.28);
  border-radius: 12px;
  background: rgba(16, 11, 5, 0.82);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.xp2-camp-spot:hover:not(:disabled) {
  border-color: rgba(245, 158, 11, 0.7);
  transform: translate(-50%, -50%) scale(1.04);
  box-shadow: 0 6px 24px rgba(120, 66, 12, 0.45);
}
.xp2-camp-spot:disabled {
  cursor: not-allowed;
}
.xp2-camp-spot--locked {
  opacity: 0.45;
  filter: grayscale(0.7);
}
.xp2-camp-spot-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  font-size: 17px;
  color: #f3c77c;
  border: 1.5px solid rgba(245, 158, 11, 0.4);
  background: radial-gradient(circle at 50% 35%, rgba(245, 158, 11, 0.14), transparent 70%), rgba(8, 6, 3, 0.9);
}
.xp2-camp-spot-lock {
  position: absolute;
  bottom: -3px;
  right: -5px;
  font-size: 11px;
  color: #9a8b6f;
}
.xp2-camp-spot-name {
  font-family: var(--font-gothic, serif);
  font-size: 15px;
  font-weight: 700;
  color: #f0e3c8;
}
.xp2-camp-spot-desc {
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.4;
  color: #b6a98d;
}
.xp2-camp-stash {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  z-index: 10;
  width: min(430px, 92%);
  max-height: 58%;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid rgba(230, 178, 46, 0.35);
  border-radius: 12px;
  background: rgba(10, 7, 3, 0.97);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.7);
}
@media (max-width: 767px) {
  .xp2-camp-spot {
    width: 128px;
    padding: 9px 7px;
  }
  .xp2-camp-spot-desc {
    display: none;
  }
}
.xp2-btn--shadow-sweep {
  color: #b9a6f0;
  border-color: rgba(136, 110, 220, 0.6);
  background: linear-gradient(180deg, rgba(44, 34, 80, 0.95), rgba(22, 16, 44, 0.95));
}
@keyframes xp2-shadow-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(110, 86, 190, 0.35);
  }
  50% {
    box-shadow: 0 0 16px 3px rgba(110, 86, 190, 0.3);
  }
}
.xp2-btn--shadow-sweep {
  animation: xp2-shadow-pulse 2.2s ease-in-out infinite;
}
.xp2-find--tipdown .xp2-find-tip {
  bottom: auto;
  top: calc(100% + 12px);
  transform: translate(-50%, -4px);
}
.xp2-find--tipdown .xp2-find-tip::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: rgba(var(--tint), 0.45);
}
.xp2-find--tipdown:hover .xp2-find-tip, .xp2-find--tipdown:focus-visible .xp2-find-tip {
  transform: translate(-50%, 0);
}
.xp2-popover-foe {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 7px;
  border: 1px solid rgba(220, 68, 56, 0.3);
  border-radius: 9px;
  background: rgba(30, 12, 10, 0.5);
}
.xp2-popover-foe-img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid rgba(220, 68, 56, 0.5);
}
.xp2-popover-foe-stats {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13.5px;
}
.xp2-popover-foe-hp {
  color: #f0908a;
  font-weight: 700;
}
.xp2-popover-foe-hp i {
  margin-right: 4px;
}
.xp2-popover-foe-lvl {
  color: #c6ba9f;
}
@media (prefers-reduced-motion: reduce) {
  .xp2-btn--shadow-sweep {
    animation: none;
  }
  .explore-act--sweeping {
    animation: none;
  }
  .xp2-energy-fill {
    transition: none;
  }
}
.xp2-lore-desc {
  font-family: var(--font-ui, sans-serif);
  font-style: normal;
  letter-spacing: 0.01em;
}
.xp2-lore-line {
  font-family: var(--font-ui, sans-serif);
  font-style: normal;
  letter-spacing: 0.01em;
}
.xp2-find-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
}
.xp2-find-icon {
  overflow: hidden;
}
.xp2-find-hp {
  font-family: var(--font-ui, monospace);
  font-size: 11px;
  font-weight: 700;
  color: #f0908a;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}
.xp2-find-hp i {
  font-size: 9px;
  margin-right: 2px;
}
.xp2-find {
  transition: opacity 2500ms linear, filter 160ms ease;
}
.xp2-act--spent {
  opacity: 0.4;
  filter: grayscale(0.8);
  cursor: not-allowed;
}
.xp2-detect {
  position: absolute;
  z-index: 25;
  transform: translate(-50%, -110%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
@keyframes xp2-die-tumble {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0.4);
  }
  15% {
    opacity: 1;
  }
  30% {
    transform: rotate(220deg) scale(1.25);
  }
  60% {
    transform: rotate(500deg) scale(1);
  }
  82% {
    opacity: 1;
    transform: rotate(720deg) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: rotate(720deg) scale(0.7);
  }
}
.xp2-detect-die {
  font-size: 30px;
  color: #e8ce97;
  text-shadow: 0 0 14px rgba(230, 178, 46, 0.5), 0 3px 6px rgba(0, 0, 0, 0.8);
  animation: xp2-die-tumble 1.3s ease-in-out forwards;
}
@keyframes xp2-verdict-land {
  0%, 78% {
    opacity: 0;
    transform: translateY(8px) scale(0.7);
  }
  88% {
    opacity: 1;
    transform: translateY(0) scale(1.15);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.xp2-detect-verdict {
  font-family: var(--font-gothic, serif);
  font-weight: 700;
  letter-spacing: 0.1em;
  animation: xp2-verdict-land 1.5s ease-out forwards;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}
.xp2-detect-verdict--spotted {
  font-size: 21px;
  color: #f87171;
  text-shadow: 0 0 16px rgba(220, 38, 38, 0.7), 0 2px 6px rgba(0, 0, 0, 0.9);
}
.xp2-detect-verdict--unnoticed {
  font-size: 15px;
  font-style: italic;
  color: #b9c2a9;
}
.lore-die {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 0 8px;
  pointer-events: none;
}
.lore-die-tumble {
  font-size: 34px;
  color: #e8ce97;
  text-shadow: 0 0 14px rgba(230, 178, 46, 0.5), 0 3px 6px rgba(0, 0, 0, 0.8);
  animation: xp2-die-tumble 1.1s ease-in-out forwards;
}
@keyframes lore-roll-land {
  0%, 55% {
    opacity: 0;
    transform: translateY(4px);
  }
  75%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.lore-die-roll {
  font-family: var(--font-ui, sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #e8ce97;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
  animation: lore-roll-land 1.4s ease-out forwards;
}
.lore-die-roll i {
  margin-right: 4px;
  opacity: 0.8;
}
.lore-die-vs {
  color: #a89a7c;
  font-weight: 500;
}
.lore-die-verdict {
  font-family: var(--font-gothic, serif);
  font-weight: 700;
  letter-spacing: 0.1em;
  animation: xp2-verdict-land 1.5s ease-out forwards;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}
.lore-die-verdict--pass {
  font-size: 18px;
  color: #a7d29a;
  text-shadow: 0 0 14px rgba(112, 180, 90, 0.5), 0 2px 6px rgba(0, 0, 0, 0.9);
}
.lore-die-verdict--fail {
  font-size: 18px;
  color: #f0908a;
  text-shadow: 0 0 14px rgba(220, 38, 38, 0.55), 0 2px 6px rgba(0, 0, 0, 0.9);
}
.lore-beat-reveal {
  opacity: 0;
  animation: lore-beat-in 0.45s ease-out 1.15s forwards;
}
.lore-beat-reveal-late {
  opacity: 0;
  animation: lore-beat-in 0.45s ease-out 1.45s forwards;
}
@keyframes lore-beat-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .xp2-detect-die {
    animation: none;
    opacity: 0;
  }
  .xp2-detect-verdict {
    animation: none;
    opacity: 1;
  }
  .xp2-find {
    transition: filter 160ms ease;
  }
  .lore-die-tumble {
    animation: none;
    opacity: 0;
  }
  .lore-die-roll, .lore-die-verdict {
    animation: none;
    opacity: 1;
  }
  .lore-beat-reveal, .lore-beat-reveal-late {
    animation: none;
    opacity: 1;
  }
}
.xp2-find {
  animation: none;
}
.xp2-find--fresh {
  animation: xp2-pop-in 460ms cubic-bezier(0.2, 0.9, 0.3, 1.35) backwards;
}
.xp2-find:hover, .xp2-find:focus-visible {
  z-index: 40;
}
.xp2-find-tip {
  font-family: var(--font-ui, sans-serif);
  font-style: normal;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.xp2-dossier-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(216, 201, 166, 0.16);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
}
.xp2-dossier-k {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a19785;
}
.xp2-dossier-k i {
  margin-right: 5px;
  color: #c9a75a;
}
.xp2-dossier-v {
  font-weight: 700;
  color: #e8dcc2;
}
.xp2-lore-art {
  cursor: zoom-in;
  text-align: left;
  width: 100%;
}
.xp2-lore-art-hint {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 13px;
  color: rgba(232, 206, 151, 0.75);
  opacity: 0;
  transition: opacity 160ms ease;
}
.xp2-lore-art:hover .xp2-lore-art-hint {
  opacity: 1;
}
.xp2-panorama {
  position: absolute;
  inset: 0;
  z-index: 60;
}
.xp2-panorama-bg {
  position: absolute;
  inset: 0;
  background: rgba(3, 2, 1, 0.82);
}
.xp2-panorama-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(880px, 94%);
  max-height: 92%;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(230, 178, 46, 0.4);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(10, 7, 3, 0.98);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.8);
}
.xp2-panorama-hero {
  position: relative;
  height: min(340px, 42vh);
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.6);
}
.xp2-panorama-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.xp2-panorama-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(10, 7, 3, 0.92));
}
.xp2-panorama-name {
  position: absolute;
  left: 22px;
  bottom: 12px;
  font-size: 30px;
  color: #f0d89a;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.95);
}
.xp2-panorama-close {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 22px;
  color: rgba(240, 216, 154, 0.85);
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);
}
.xp2-panorama-close:hover {
  color: #fff;
}
.xp2-panorama-body {
  padding: 18px 24px;
  overflow-y: auto;
  min-height: 0;
}
.xp2-panorama-desc {
  font-family: var(--font-ui, sans-serif);
  font-size: 15.5px;
  line-height: 1.65;
  color: #d6cab0;
  margin-bottom: 14px;
}
.xp2-panorama-notes {
  columns: 2 280px;
  column-gap: 26px;
}
.xp2-panorama-line {
  break-inside: avoid;
  font-family: var(--font-ui, sans-serif);
  font-size: 14px;
  line-height: 1.55;
  color: #cfc4ab;
  padding: 6px 0 6px 12px;
  border-left: 2px solid rgba(230, 178, 46, 0.3);
  margin-bottom: 8px;
}
.xp2-panorama-empty {
  font-style: italic;
  color: #8d8371;
  font-size: 14px;
}
.xp2-scene {
  overflow: visible;
}
.xp2-slides {
  border-radius: 10px;
}
@keyframes xp2-roll-land {
  0%, 55% {
    opacity: 0;
    transform: translateY(6px);
  }
  75% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.xp2-detect-roll {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--font-ui, monospace);
  font-size: 17px;
  font-weight: 800;
  color: #f0d89a;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95);
  animation: xp2-roll-land 1.35s ease-out forwards;
}
.xp2-detect-roll i {
  font-size: 13px;
  color: #c9a75a;
}
.xp2-detect-roll-vs {
  font-size: 12px;
  font-weight: 600;
  color: #a19785;
}
.xp2-panorama-card {
  width: min(1160px, 97%);
  max-height: 96%;
}
.xp2-panorama-hero {
  height: min(460px, 52vh);
}
.xp2-panorama-name {
  font-size: 34px;
}
.xp2-panorama-body {
  padding: 20px 28px;
}
.xp2-panorama-desc {
  font-size: 16.5px;
}
.xp2-panorama-notes {
  columns: 2 320px;
  column-gap: 30px;
}
.xp2-panorama-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  padding: 9px 12px;
  border: 1px solid rgba(230, 178, 46, 0.16);
  border-left: 3px solid rgba(230, 178, 46, 0.45);
  border-radius: 8px;
  background: rgba(20, 15, 7, 0.55);
  margin-bottom: 10px;
}
.xp2-panorama-line::before {
  content: '\2766';
  color: #c9a75a;
  font-size: 12px;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .xp2-detect-roll {
    animation: none;
    opacity: 1;
  }
}
.visage-card {
  transition: translate 620ms cubic-bezier(0.34, 1.45, 0.56, 1), rotate 620ms cubic-bezier(0.34, 1.45, 0.56, 1), scale 620ms cubic-bezier(0.34, 1.45, 0.56, 1), border-color 300ms ease-out, box-shadow 300ms ease-out;
}
.visage-card[data-role='back'][data-open] {
  transition-delay: 70ms;
}
.visage-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateX(-130%) skewX(-18deg);
  background: linear-gradient( 105deg, transparent 40%, rgba(255, 244, 214, 0.22) 50%, transparent 60% );
}
.visage-card[data-open] .visage-shine {
  animation: visage-shine 850ms ease-out 260ms both;
}
.visage-card[data-role='back'][data-open] .visage-shine {
  animation-delay: 340ms;
}
@keyframes visage-shine {
  to {
    transform: translateX(130%) skewX(-18deg);
  }
}
.visage-bloom {
  position: absolute;
  inset: -14% -40%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient( ellipse at center, rgba(243, 168, 59, 0.3), rgba(243, 168, 59, 0.08) 45%, transparent 70% );
}
[data-open] > .visage-bloom {
  animation: visage-bloom 900ms ease-out both;
}
@keyframes visage-bloom {
  0% {
    opacity: 0;
    transform: scale(0.55);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}
.visage-column {
  will-change: translate, opacity;
  transition: translate 620ms cubic-bezier(0.22, 1, 0.36, 1), scale 620ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .visage-card, .visage-column {
    transition-duration: 1ms;
  }
  .visage-shine, .visage-bloom {
    animation: none;
  }
}
.mg-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 4, 2, 0.72);
  animation: mgFade 220ms ease-out;
}
@keyframes mgFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.mg-panel {
  width: min(560px, 92%);
  max-height: 86%;
  overflow-y: auto;
  padding: 18px 20px 20px;
  border: 1px solid rgba(230, 178, 46, 0.4);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(28, 21, 10, 0.98), rgba(12, 9, 5, 0.98));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.8);
}
.mg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mg-title {
  font-family: "Cinzel", serif;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f4e0b0;
}
.mg-close {
  border: 0;
  background: none;
  cursor: pointer;
  color: #8d8371;
  font-size: 1.1rem;
}
.mg-close:hover {
  color: #f4e0b0;
}
.mg-log {
  margin: 12px 0;
  padding: 10px 12px;
  border-left: 2px solid rgba(230, 178, 46, 0.35);
  background: rgba(0, 0, 0, 0.35);
  border-radius: 4px;
  max-height: 160px;
  overflow-y: auto;
}
.mg-line {
  color: #d8c9a6;
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 4px;
}
.mg-line:last-child {
  color: #f0e6cf;
  margin-bottom: 0;
}
.mg-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(216, 201, 166, 0.28);
  border-radius: 8px;
  background: rgba(24, 18, 9, 0.85);
  color: #e8dcc0;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
.mg-btn:hover {
  border-color: rgba(230, 178, 46, 0.7);
  color: #fff3d4;
}
.mg-btn--primary {
  border-color: rgba(230, 178, 46, 0.7);
  background: rgba(230, 178, 46, 0.14);
}
.mg-btn--safe {
  border-color: rgba(120, 170, 120, 0.45);
  color: #cfe6cf;
}
.mg-btn--bad {
  border-color: rgba(190, 80, 70, 0.55);
  color: #f0c8c0;
}
.mg-btn-yield {
  font-size: 0.78rem;
  opacity: 0.75;
}
.mg-stakes {
  display: flex;
  gap: 16px;
  align-items: baseline;
}
.mg-stake {
  color: #e6b22e;
}
.mg-banked {
  color: #9fb99f;
  font-size: 0.9rem;
}
.mg-odds {
  color: #d8c9a6;
  font-size: 0.92rem;
}
.mg-risk {
  color: #e6b22e;
}
.mg-risk--bad {
  color: #e08070;
}
.mg-grid {
  display: grid;
  grid-template-columns: repeat(var(--mg-cols, 4), 1fr);
  gap: 6px;
}
.mg-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid rgba(216, 201, 166, 0.2);
  border-radius: 6px;
  background: rgba(18, 14, 8, 0.8);
  color: #6d6555;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.mg-cell:hover:not(:disabled) {
  border-color: rgba(230, 178, 46, 0.6);
}
.mg-cell:disabled {
  cursor: default;
}
.mg-cell-name {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}
.mg-cell--read {
  color: #e8dcc0;
}
.mg-cell--here {
  background: rgba(230, 178, 46, 0.3);
  border-color: rgba(230, 178, 46, 0.9);
  color: #fff3d4;
}
.mg-cell--close {
  background: rgba(214, 120, 50, 0.22);
  border-color: rgba(214, 120, 50, 0.6);
}
.mg-cell--warm {
  background: rgba(180, 140, 60, 0.14);
}
.mg-cell--cold {
  background: rgba(90, 120, 150, 0.12);
}
.mg-cell--dead {
  background: rgba(60, 60, 70, 0.14);
  opacity: 0.7;
}
.mg-looks {
  color: #d8c9a6;
}
.mg-hint {
  color: #8d8371;
  font-size: 0.85rem;
  line-height: 1.5;
}
.mg-hint--known {
  color: #9fb99f;
}
.mg-seam {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mg-yield {
  color: #e6b22e;
  white-space: nowrap;
}
.mg-stress {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(216, 201, 166, 0.18);
  overflow: hidden;
}
.mg-stress-fill {
  height: 100%;
  background: linear-gradient(90deg, #7a6a3a, #e08070);
  transition: width 200ms ease;
}
.mg-done {
  margin-top: 14px;
}
.mg-pins {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.mg-pin {
  font-size: 13px;
  color: rgba(216, 201, 166, 0.28);
}
.mg-pin--set {
  color: #e6b22e;
  text-shadow: 0 0 8px rgba(230, 178, 46, 0.45);
}
[data-perf-low] .mg-overlay {
  animation: none;
}
.xp2-lead {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 12px;
  border: 1px solid rgba(214, 120, 50, 0.45);
  border-left: 3px solid rgba(214, 120, 50, 0.9);
  border-radius: 8px;
  background: rgba(52, 28, 12, 0.55);
  animation: xp2LeadIn 260ms ease-out;
}
@keyframes xp2LeadIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.xp2-lead-icon {
  color: #d67832;
}
.xp2-lead-text {
  color: #f0dcc8;
  font-size: 0.92rem;
  flex: 1;
}
.xp2-lead-btn {
  padding: 4px 12px;
  border: 1px solid rgba(230, 178, 46, 0.6);
  border-radius: 8px;
  background: rgba(230, 178, 46, 0.14);
  color: #f4e0b0;
  cursor: pointer;
  white-space: nowrap;
}
.xp2-lead-btn:hover {
  border-color: rgba(240, 200, 90, 0.95);
  color: #fff3d4;
}
[data-perf-low] .xp2-lead {
  animation: none;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-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-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-content {
  syntax: "*";
  initial-value: "";
  inherits: false;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-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-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
      --mythic-angle: 0deg;
    }
  }
}