*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

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

/*
Remove the default font size and weight for headings.
*/

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

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

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

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: JetBrains Mono, monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

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

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

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

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

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

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  html { scroll-behavior: smooth; }

  body {
    background-color: #0a130e;
    color: #f5f0e8;
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 1.0625rem;
    line-height: 1.65;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Cinzel', Georgia, serif;
    color: #f5f0e8;
    line-height: 1.2;
  }

  ::-moz-selection {
    background: rgba(232, 160, 32, 0.3);
    color: #f5f0e8;
  }

  ::selection {
    background: rgba(232, 160, 32, 0.3);
    color: #f5f0e8;
  }

  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: #0a130e; }
  ::-webkit-scrollbar-thumb { background: rgba(232, 160, 32, 0.3); border-radius: 3px; }

  /* ── Tamil-specific overrides ───────────────────────────────────────────
     Cinzel (display) and Crimson Pro (body) don't include Tamil glyphs.
     When the language is Tamil, swap them for Noto Sans Tamil — which
     covers Tamil + Latin so brand names like "JyotiSutra" stay legible
     in the same font as the surrounding text.

     Tamil glyphs render ~15% taller than Latin at the same px size, so
     headlines and body text feel oversized at Latin-tuned scales. We
     scale the entire html font-size down to 87.5% (14px base from 16px)
     when Tamil is active — every Tailwind rem-based size shrinks
     proportionally and the visual mass matches Latin again. */
  html[lang="ta"] {
    font-size: 87.5%;
  }

  html[lang="ta"] body,
  html[lang="ta"] .font-body,
  html[lang="ta"] .font-display,
  html[lang="ta"] .font-ui,
  html[lang="ta"] h1, html[lang="ta"] h2, html[lang="ta"] h3,
  html[lang="ta"] h4, html[lang="ta"] h5, html[lang="ta"] h6,
  html[lang="ta"] button, html[lang="ta"] input,
  html[lang="ta"] textarea, html[lang="ta"] select {
    font-family: 'Noto Sans Tamil', 'Latha', system-ui, sans-serif;
  }

  /* Tighter letter-spacing + line-height tuned for Tamil. */
  html[lang="ta"] h1 { letter-spacing: 0; line-height: 1.25; }
  html[lang="ta"] h2 { letter-spacing: 0; line-height: 1.3;  }
  html[lang="ta"] h3 { letter-spacing: 0; line-height: 1.35; }
  /* ⚠ body's ground is set in the base layer above and a descendant cannot override an
     ancestor, so the light theme has to reach <html>. ThemeSurface puts the class there. */
  html.theme-light body {
    background-color: #F8F5EC;   /* light.bg */
    color: #17233C;              /* light.ink */
  }

  html[lang="ta"] body {
    letter-spacing: 0;
    /* Body's 1.0625rem inherits the smaller base; we also bump line-height
       a notch since Tamil descenders/superscripts collide otherwise. */
    line-height: 1.7;
  }

  /* ── Other Indian scripts — Hindi (Devanagari), Telugu, Kannada, Malayalam ──
     Same idea as Tamil: Cinzel/Crimson Pro carry no glyphs for these scripts,
     so swap to the matching Noto Sans face (each covers its script + Latin, so
     "JyotiSutra" stays legible) and gently scale the base down. The interface
     strings fall back to English for these locales today; the COURSE CONTENT
     is what renders in-script as translations land. */
  html[lang="hi"], html[lang="te"], html[lang="kn"], html[lang="ml"] {
    font-size: 90%;
  }
  html[lang="hi"] body, html[lang="hi"] .font-body, html[lang="hi"] .font-display, html[lang="hi"] .font-ui,
  html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3, html[lang="hi"] h4, html[lang="hi"] h5, html[lang="hi"] h6,
  html[lang="hi"] button, html[lang="hi"] input, html[lang="hi"] textarea, html[lang="hi"] select {
    font-family: 'Noto Sans Devanagari', system-ui, sans-serif;
  }
  html[lang="te"] body, html[lang="te"] .font-body, html[lang="te"] .font-display, html[lang="te"] .font-ui,
  html[lang="te"] h1, html[lang="te"] h2, html[lang="te"] h3, html[lang="te"] h4, html[lang="te"] h5, html[lang="te"] h6,
  html[lang="te"] button, html[lang="te"] input, html[lang="te"] textarea, html[lang="te"] select {
    font-family: 'Noto Sans Telugu', system-ui, sans-serif;
  }
  html[lang="kn"] body, html[lang="kn"] .font-body, html[lang="kn"] .font-display, html[lang="kn"] .font-ui,
  html[lang="kn"] h1, html[lang="kn"] h2, html[lang="kn"] h3, html[lang="kn"] h4, html[lang="kn"] h5, html[lang="kn"] h6,
  html[lang="kn"] button, html[lang="kn"] input, html[lang="kn"] textarea, html[lang="kn"] select {
    font-family: 'Noto Sans Kannada', system-ui, sans-serif;
  }
  html[lang="ml"] body, html[lang="ml"] .font-body, html[lang="ml"] .font-display, html[lang="ml"] .font-ui,
  html[lang="ml"] h1, html[lang="ml"] h2, html[lang="ml"] h3, html[lang="ml"] h4, html[lang="ml"] h5, html[lang="ml"] h6,
  html[lang="ml"] button, html[lang="ml"] input, html[lang="ml"] textarea, html[lang="ml"] select {
    font-family: 'Noto Sans Malayalam', system-ui, sans-serif;
  }
  html[lang="hi"] h1, html[lang="te"] h1, html[lang="kn"] h1, html[lang="ml"] h1 { letter-spacing: 0; line-height: 1.3; }
  html[lang="hi"] body, html[lang="te"] body, html[lang="kn"] body, html[lang="ml"] body { letter-spacing: 0; line-height: 1.7; }

  ::-webkit-scrollbar-thumb:hover { background: rgba(232, 160, 32, 0.5); }
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
/* Buttons */

  html[lang="ta"] .btn-primary {
    font-family: 'Noto Sans Tamil', 'Latha', system-ui, sans-serif;
  }
 html[lang="hi"] .btn-primary {
    font-family: 'Noto Sans Devanagari', system-ui, sans-serif;
  }
 html[lang="te"] .btn-primary {
    font-family: 'Noto Sans Telugu', system-ui, sans-serif;
  }
 html[lang="kn"] .btn-primary {
    font-family: 'Noto Sans Kannada', system-ui, sans-serif;
  }
 html[lang="ml"] .btn-primary {
    font-family: 'Noto Sans Malayalam', system-ui, sans-serif;
  }
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(232 160 32 / var(--tw-bg-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-family: DM Sans, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(10 19 14 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.btn-primary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 168 21 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 0 20px rgba(232, 160, 32, 0.3);
  --tw-shadow-colored: 0 0 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.btn-primary:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(232 160 32 / 0.5);
}
.btn-primary:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

  html[lang="ta"] .btn-secondary {
    font-family: 'Noto Sans Tamil', 'Latha', system-ui, sans-serif;
  }
 html[lang="hi"] .btn-secondary {
    font-family: 'Noto Sans Devanagari', system-ui, sans-serif;
  }
 html[lang="te"] .btn-secondary {
    font-family: 'Noto Sans Telugu', system-ui, sans-serif;
  }
 html[lang="kn"] .btn-secondary {
    font-family: 'Noto Sans Kannada', system-ui, sans-serif;
  }
 html[lang="ml"] .btn-secondary {
    font-family: 'Noto Sans Malayalam', system-ui, sans-serif;
  }
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: rgb(245 240 232 / 0.2);
  background-color: transparent;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-family: DM Sans, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(245 240 232 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.btn-secondary:hover {
  border-color: rgb(232 160 32 / 0.5);
  --tw-text-opacity: 1;
  color: rgb(232 160 32 / var(--tw-text-opacity, 1));
}
.btn-secondary:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(232 160 32 / 0.3);
}
.btn-secondary:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

  html[lang="ta"] .btn-ghost {
    font-family: 'Noto Sans Tamil', 'Latha', system-ui, sans-serif;
  }
 html[lang="hi"] .btn-ghost {
    font-family: 'Noto Sans Devanagari', system-ui, sans-serif;
  }
 html[lang="te"] .btn-ghost {
    font-family: 'Noto Sans Telugu', system-ui, sans-serif;
  }
 html[lang="kn"] .btn-ghost {
    font-family: 'Noto Sans Kannada', system-ui, sans-serif;
  }
 html[lang="ml"] .btn-ghost {
    font-family: 'Noto Sans Malayalam', system-ui, sans-serif;
  }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  background-color: transparent;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: DM Sans, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: rgb(245 240 232 / 0.7);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.btn-ghost:hover {
  background-color: rgb(255 255 255 / 0.05);
  --tw-text-opacity: 1;
  color: rgb(245 240 232 / var(--tw-text-opacity, 1));
}
.btn-ghost:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
/* Cards */
.card {
  border-radius: 1rem;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  background-color: rgb(20 46 34 / 0.6);
  --tw-shadow: 0 4px 24px rgba(8, 12, 24, 0.4);
  --tw-shadow-colored: 0 4px 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-backdrop-blur: blur(4px);
  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);
}
.card-hover {
  border-radius: 1rem;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  background-color: rgb(20 46 34 / 0.6);
  --tw-shadow: 0 4px 24px rgba(8, 12, 24, 0.4);
  --tw-shadow-colored: 0 4px 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-backdrop-blur: blur(4px);
  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);
}
.theme-light .card-hover {
  border-radius: 1rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(221 214 200 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-backdrop-blur:  ;
  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);
}
.card-hover {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
.card-hover:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-color: rgb(232 160 32 / 0.2);
  --tw-shadow: 0 8px 40px rgba(8, 12, 24, 0.6);
  --tw-shadow-colored: 0 8px 40px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
/* Form inputs */

  html[lang="ta"] .input {
    font-family: 'Noto Sans Tamil', 'Latha', system-ui, sans-serif;
  }
 html[lang="hi"] .input {
    font-family: 'Noto Sans Devanagari', system-ui, sans-serif;
  }
 html[lang="te"] .input {
    font-family: 'Noto Sans Telugu', system-ui, sans-serif;
  }
 html[lang="kn"] .input {
    font-family: 'Noto Sans Kannada', system-ui, sans-serif;
  }
 html[lang="ml"] .input {
    font-family: 'Noto Sans Malayalam', system-ui, sans-serif;
  }
.input {
  width: 100%;
  border-radius: 0.5rem;
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
  background-color: rgb(20 46 34 / 0.8);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-family: DM Sans, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(245 240 232 / var(--tw-text-opacity, 1));
}
.input::-moz-placeholder {
  color: rgb(245 240 232 / 0.3);
}
.input::placeholder {
  color: rgb(245 240 232 / 0.3);
}
.input {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
.input:focus {
  border-color: rgb(232 160 32 / 0.5);
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(232 160 32 / 0.3);
}
.input-error {
  border-color: rgb(239 68 68 / 0.7);
}
.input-error:focus {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
  --tw-ring-color: rgb(239 68 68 / 0.3);
}

  html[lang="ta"] .label {
    font-family: 'Noto Sans Tamil', 'Latha', system-ui, sans-serif;
  }
 html[lang="hi"] .label {
    font-family: 'Noto Sans Devanagari', system-ui, sans-serif;
  }
 html[lang="te"] .label {
    font-family: 'Noto Sans Telugu', system-ui, sans-serif;
  }
 html[lang="kn"] .label {
    font-family: 'Noto Sans Kannada', system-ui, sans-serif;
  }
 html[lang="ml"] .label {
    font-family: 'Noto Sans Malayalam', system-ui, sans-serif;
  }
.label {
  margin-bottom: 0.375rem;
  display: block;
  font-family: DM Sans, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: rgb(245 240 232 / 0.7);
}
/* ── JyotiSutra Light Design System v1.0 — SCOPED ─────────────────────────
     Everything here applies ONLY inside `.theme-light`. The dark system above
     is untouched, so every page that does not opt in renders exactly as before.

     ⚠ WHY A SCOPE AND NOT A GLOBAL SWAP. The dark theme is not only in the
     Tailwind classes: `body` is painted #0a130e, the scrollbar is themed, and
     `.card` / `.btn-*` / `.input` are dark by definition. Those component
     classes are shared with ~40 other pages, so editing them in place would
     light up the whole app. Overriding them inside a scope converts one page
     honestly and reverts by deleting this block.

     ⚠ THE SCOPE IS APPLIED IN PublicLayout, NOT on the page. It began on Landing's
     own root div, which left the Navbar and Footer OUTSIDE it — they are siblings
     rendered by the layout — so the navbar kept its dark styling over a cream page
     and its links measured 1.03. The chrome is now inside the scope and theme-aware.

     ⚠ Still dark: the scrollbar and the `body` background beneath the layout. The
     layout is min-h-screen so neither is visible in normal use; they show only on
     overscroll. Converting them means touching the global base layer, which is a
     bigger decision than one page. */
.theme-light {
  --tw-bg-opacity: 1;
  background-color: rgb(248 245 236 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(23 35 60 / var(--tw-text-opacity, 1));
}
/* Cards become real surfaces — no backdrop blur, no glow. A glow reads as
     light on a dark ground and as a smudge on a light one. */
.theme-light .card {
  border-radius: 1rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(221 214 200 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-backdrop-blur:  ;
  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);
}
.theme-light .card-hover:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-color: rgb(181 138 58 / 0.4);
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
/* ⚠ The gold button takes NAVY text, not white. Measured: ink on gold is
     4.96 (AA); white on gold is 3.15, which is large-text-only. */
.theme-light .btn-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(181 138 58 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(23 35 60 / var(--tw-text-opacity, 1));
}
.theme-light .btn-primary:hover {
  background-color: rgb(181 138 58 / 0.9);
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.theme-light .btn-primary:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(181 138 58 / 0.5);
}
.theme-light .btn-secondary {
  border-color: rgb(89 98 115 / 0.4);
  --tw-text-opacity: 1;
  color: rgb(23 35 60 / var(--tw-text-opacity, 1));
}
.theme-light .btn-secondary:hover {
  --tw-border-opacity: 1;
  border-color: rgb(181 138 58 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(132 101 42 / var(--tw-text-opacity, 1));
}
.theme-light .btn-secondary:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(181 138 58 / 0.3);
}
.theme-light .btn-ghost {
  --tw-text-opacity: 1;
  color: rgb(89 98 115 / var(--tw-text-opacity, 1));
}
.theme-light .btn-ghost:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(241 235 221 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(23 35 60 / var(--tw-text-opacity, 1));
}
/* ⚠ Input borders use `line-strong`, not `line`. The border token is 1.2–1.5
     against the backgrounds — below the 3.0 WCAG 1.4.11 asks of a non-text UI
     indicator — so it cannot be the only thing marking a field. */
/* ⚠ The placeholder was `light-muted/70`, which composites to 3.16 on white — below AA.
     My audit could not see it: it read `el.placeholder` for the TEXT but measured the input's
     own `color`, never the ::placeholder pseudo-element. getComputedStyle needs its second
     argument to reach a pseudo. Full muted is 5.9 on white. */
.theme-light .input {
  border-color: rgb(89 98 115 / 0.45);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(23 35 60 / var(--tw-text-opacity, 1));
}
.theme-light .input::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(89 98 115 / var(--tw-placeholder-opacity, 1));
}
.theme-light .input::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(89 98 115 / var(--tw-placeholder-opacity, 1));
}
.theme-light .input:focus {
  --tw-border-opacity: 1;
  border-color: rgb(181 138 58 / var(--tw-border-opacity, 1));
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(181 138 58 / 0.3);
}
.theme-light .label {
  --tw-text-opacity: 1;
  color: rgb(89 98 115 / var(--tw-text-opacity, 1));
}
/* ── The public chrome: Navbar + Footer, theme-aware ──────────────────────
     The dark values are exactly what the Navbar had, so every unlit page is
     unchanged. The light overrides exist because of a measurement: at scroll 0
     the navbar is transparent with `text-cream/70` links, and on the cream hero
     those measure **1.03** — invisible. (The same links are 8.45 on the dark
     hero.) Worse, the hero image covers the right-hand half of the bar, so the
     links over the image stayed readable while the ones over the cream vanished.

     ⚠ THAT IS WHY THE LIGHT NAVBAR IS NOT TRANSPARENT. With two very different
     grounds under one bar, no single text colour works. Give it a real ground
     and the question disappears. */
.nav-shell {
  background-color: transparent;
}
.nav-shell--scrolled {
  border-bottom-width: 1px;
  border-color: rgb(255 255 255 / 0.08);
  background-color: rgb(10 19 14 / 0.9);
  --tw-shadow: 0 4px 24px rgba(8, 12, 24, 0.4);
  --tw-shadow-colored: 0 4px 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-backdrop-blur: blur(12px);
  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);
}
.nav-link {
  color: rgb(245 240 232 / 0.7);
}
.nav-link:hover {
  background-color: rgb(255 255 255 / 0.05);
  --tw-text-opacity: 1;
  color: rgb(245 240 232 / var(--tw-text-opacity, 1));
}
.nav-link--active {
  background-color: rgb(232 160 32 / 0.08);
  --tw-text-opacity: 1;
  color: rgb(232 160 32 / var(--tw-text-opacity, 1));
}
.nav-ink {
  color: rgb(245 240 232 / 0.8);
}
.nav-muted {
  color: rgb(245 240 232 / 0.5);
}
.nav-hover:hover {
  background-color: rgb(255 255 255 / 0.05);
}
.nav-hover-bg {
  background-color: rgb(255 255 255 / 0.05);
}
.ui-chip-bg {
  background-color: rgb(232 160 32 / 0.1);
}
.nav-sheet {
  border-top-width: 1px;
  border-color: rgb(255 255 255 / 0.08);
  background-color: rgb(10 19 14 / 0.95);
  --tw-backdrop-blur: blur(12px);
  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);
}
/* The Free Courses link is deliberately cyan - it is the one item that is not
     saffron, so it reads as an offer rather than as navigation. cyan-300 is 13.02
     on the dark bar and 1.33 on cream, so the light theme drops to cyan-700 (4.91),
     which keeps the hue and the meaning. */
.nav-link--free {
  --tw-text-opacity: 1;
  color: rgb(103 232 249 / var(--tw-text-opacity, 1));
}
.nav-link--free:hover {
  background-color: rgb(34 211 238 / 0.1);
}
.nav-link--free-on {
  background-color: rgb(34 211 238 / 0.1);
}
.theme-light .nav-shell {
    /* Opaque at rest, unlike the dark bar — see the note above. */
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(221 214 200 / var(--tw-border-opacity, 1));
    background-color: rgb(248 245 236 / 0.95);
    --tw-backdrop-blur: blur(12px);
    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);
  }
.theme-light .nav-shell--scrolled {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(221 214 200 / var(--tw-border-opacity, 1));
  background-color: rgb(248 245 236 / 0.95);
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-backdrop-blur: blur(12px);
  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);
}
.theme-light .nav-link {
  --tw-text-opacity: 1;
  color: rgb(89 98 115 / var(--tw-text-opacity, 1));
}
.theme-light .nav-link:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(241 235 221 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(23 35 60 / var(--tw-text-opacity, 1));
}
.theme-light .nav-link--active {
  background-color: rgb(181 138 58 / 0.10);
  --tw-text-opacity: 1;
  color: rgb(132 101 42 / var(--tw-text-opacity, 1));
}
.theme-light .nav-ink {
  --tw-text-opacity: 1;
  color: rgb(23 35 60 / var(--tw-text-opacity, 1));
}
.theme-light .nav-muted {
  --tw-text-opacity: 1;
  color: rgb(89 98 115 / var(--tw-text-opacity, 1));
}
.theme-light .nav-hover:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(241 235 221 / var(--tw-bg-opacity, 1));
}
.theme-light .nav-hover-bg {
  --tw-bg-opacity: 1;
  background-color: rgb(241 235 221 / var(--tw-bg-opacity, 1));
}
.theme-light .ui-chip-bg {
  background-color: rgb(181 138 58 / 0.10);
}
.theme-light .nav-sheet {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(221 214 200 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-backdrop-blur: blur(12px);
  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);
}
.theme-light .nav-link--free {
  --tw-text-opacity: 1;
  color: rgb(14 116 144 / var(--tw-text-opacity, 1));
}
.theme-light .nav-link--free:hover {
  background-color: rgb(14 116 144 / 0.1);
}
.theme-light .nav-link--free-on {
  background-color: rgb(14 116 144 / 0.1);
}
.foot-shell {
  border-top-width: 1px;
  border-color: rgb(255 255 255 / 0.08);
  --tw-bg-opacity: 1;
  background-color: rgb(10 19 14 / var(--tw-bg-opacity, 1));
}
.theme-light .foot-shell {
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(221 214 200 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(241 235 221 / var(--tw-bg-opacity, 1));
}
/* A glow reads as light on a dark ground and as a stain on a light one. The orbs are purely
     decorative and placed at 15 call sites, so rather than re-tune each one, halve them
     wherever they land on paper. */
.theme-light .glow-orb { opacity: 0.45; }
/* ── Generic theme-aware text roles ───────────────────────────────────────
     For SHARED components that render on both migrated and unmigrated pages.
     The dark values are the ones those components already used; `.theme-light`
     restates each role for a light ground. Use these rather than inventing a
     new per-component set every time — the roles are always the same four.

     ⚠ Do NOT use them for text that sits on an IMAGE or on a deliberately dark
     panel: that text is light in every theme, and switching it would break it. */
.ui-ink {
  --tw-text-opacity: 1;
  color: rgb(245 240 232 / var(--tw-text-opacity, 1));
}
.ui-muted {
  color: rgb(245 240 232 / 0.6);
}
.ui-faint {
  color: rgb(245 240 232 / 0.45);
}
.ui-accent {
  --tw-text-opacity: 1;
  color: rgb(232 160 32 / var(--tw-text-opacity, 1));
}
.ui-line {
  border-color: rgb(255 255 255 / 0.1);
}
.ui-chip {
  border-color: rgb(245 240 232 / 0.2);
  background-color: rgb(245 240 232 / 0.1);
  color: rgb(245 240 232 / 0.6);
}
.theme-light .ui-ink {
  --tw-text-opacity: 1;
  color: rgb(23 35 60 / var(--tw-text-opacity, 1));
}
.theme-light .ui-muted {
  --tw-text-opacity: 1;
  color: rgb(89 98 115 / var(--tw-text-opacity, 1));
}
.theme-light .ui-faint {
  --tw-text-opacity: 1;
  color: rgb(89 98 115 / var(--tw-text-opacity, 1));
}
.theme-light .ui-accent {
  --tw-text-opacity: 1;
  color: rgb(132 101 42 / var(--tw-text-opacity, 1));
}
.theme-light .ui-line {
  --tw-border-opacity: 1;
  border-color: rgb(221 214 200 / var(--tw-border-opacity, 1));
}
.theme-light .ui-chip {
  --tw-border-opacity: 1;
  border-color: rgb(221 214 200 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(241 235 221 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(89 98 115 / var(--tw-text-opacity, 1));
}
/* ── The rest of the role vocabulary ──────────────────────────────────────
     Added 2026-09-22 for the full light conversion. The four roles above covered
     shared components; converting whole PAGES needs surfaces, tints and edges too.

     ⚠ EACH DARK VALUE IS THE DOMINANT VALUE IT REPLACES, NOT AN EXACT MATCH.
       The codebase uses 20 opacity steps of text-cream where it means three things.
       text-cream/80 becoming ui-ink is a small lift in the dark theme, and /50
       becoming ui-muted a small drop. That is deliberate: collapsing 20 steps into
       three is the point of a role, and the dark theme is being retired anyway.

     ⚠ CONVERTING A PAGE IS A NO-OP UNTIL A .theme-light ANCESTOR APPEARS ABOVE IT.
       That is what makes this safe to do in bulk: a student or admin page can be
       converted and shipped while still rendering dark, and flips only when its
       layout starts providing the light surface (see theme/ThemeSurface.jsx). */
.ui-ink-soft {
  color: rgb(245 240 232 / 0.8);
}
.ui-accent-soft {
  color: rgb(232 160 32 / 0.7);
}
.ui-page {
  --tw-bg-opacity: 1;
  background-color: rgb(10 19 14 / var(--tw-bg-opacity, 1));
}
.ui-surface {
  background-color: rgb(255 255 255 / 0.05);
}
.ui-surface-2 {
  background-color: rgb(255 255 255 / 0.03);
}
.ui-tint {
  background-color: rgb(232 160 32 / 0.1);
}
.ui-tint-strong {
  background-color: rgb(232 160 32 / 0.15);
}
.ui-line-soft {
  border-color: rgb(255 255 255 / 0.05);
}
.ui-line-strong {
  border-color: rgb(255 255 255 / 0.15);
}
.ui-edge {
  border-color: rgb(232 160 32 / 0.3);
}
.ui-edge-soft {
  border-color: rgb(232 160 32 / 0.2);
}
.theme-light .ui-ink-soft {
  --tw-text-opacity: 1;
  color: rgb(23 35 60 / var(--tw-text-opacity, 1));
}
.theme-light .ui-accent-soft {
  --tw-text-opacity: 1;
  color: rgb(132 101 42 / var(--tw-text-opacity, 1));
}
.theme-light .ui-page {
  --tw-bg-opacity: 1;
  background-color: rgb(248 245 236 / var(--tw-bg-opacity, 1));
}
.theme-light .ui-surface {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.theme-light .ui-surface-2 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 235 221 / var(--tw-bg-opacity, 1));
}
.theme-light .ui-tint {
  background-color: rgb(181 138 58 / 0.10);
}
.theme-light .ui-tint-strong {
  background-color: rgb(181 138 58 / 0.16);
}
.theme-light .ui-line-soft {
  border-color: rgb(221 214 200 / 0.6);
}
.theme-light .ui-line-strong {
  --tw-border-opacity: 1;
  border-color: rgb(221 214 200 / var(--tw-border-opacity, 1));
}
.theme-light .ui-edge {
  border-color: rgb(181 138 58 / 0.4);
}
.theme-light .ui-edge-soft {
  border-color: rgb(181 138 58 / 0.25);
}
/* ── Interactive states ───────────────────────────────────────────────────
     `hover:text-saffron` cannot become `hover:ui-accent` — a role class is a class,
     not a utility, so a Tailwind variant cannot be stacked on it. 322 of the 3,455
     dark classes in the codebase carry a variant, so they need roles of their own
     that bake the state into the selector. */
.ui-h-ink:hover {
  --tw-text-opacity: 1;
  color: rgb(245 240 232 / var(--tw-text-opacity, 1));
}
.ui-h-accent:hover {
  --tw-text-opacity: 1;
  color: rgb(232 160 32 / var(--tw-text-opacity, 1));
}
.ui-h-surface:hover {
  background-color: rgb(255 255 255 / 0.05);
}
.ui-h-tint:hover {
  background-color: rgb(232 160 32 / 0.1);
}
.ui-h-edge:hover {
  border-color: rgb(232 160 32 / 0.4);
}
.ui-h-line:hover {
  border-color: rgb(255 255 255 / 0.15);
}
.group:hover .ui-gh-accent {
  --tw-text-opacity: 1;
  color: rgb(232 160 32 / var(--tw-text-opacity, 1));
}
.group:hover .ui-gh-ink {
  --tw-text-opacity: 1;
  color: rgb(245 240 232 / var(--tw-text-opacity, 1));
}
/* ⚠ `group-hover:text-saffron` CONTAINS `hover:text-saffron`, so the hover pattern matched
     inside it and left `group-ui-h-accent` — a prefix on a class, which compiles to nothing.
     15 shipped, 8 of them to production, where those hover effects silently did nothing.
     Match longer variants BEFORE shorter ones. */
.group:hover .ui-gh-edge {
  border-color: rgb(232 160 32 / 0.4);
}
.theme-light .ui-h-ink:hover {
  --tw-text-opacity: 1;
  color: rgb(23 35 60 / var(--tw-text-opacity, 1));
}
.theme-light .ui-h-accent:hover {
  --tw-text-opacity: 1;
  color: rgb(132 101 42 / var(--tw-text-opacity, 1));
}
.theme-light .ui-h-surface:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(241 235 221 / var(--tw-bg-opacity, 1));
}
.theme-light .ui-h-tint:hover {
  background-color: rgb(181 138 58 / 0.10);
}
.theme-light .ui-h-edge:hover {
  border-color: rgb(181 138 58 / 0.5);
}
.theme-light .ui-h-line:hover {
  --tw-border-opacity: 1;
  border-color: rgb(221 214 200 / var(--tw-border-opacity, 1));
}
.theme-light .group:hover .ui-gh-accent {
  --tw-text-opacity: 1;
  color: rgb(132 101 42 / var(--tw-text-opacity, 1));
}
.theme-light .group:hover .ui-gh-ink {
  --tw-text-opacity: 1;
  color: rgb(23 35 60 / var(--tw-text-opacity, 1));
}
/* ── Palette SHADES ───────────────────────────────────────────────────────
     Separate from the roles above because these are `bg-void-900`, `text-cream-400`
     and friends — the numbered scale, not the base colour. They were skipped by the
     first conversion pass on purpose (the regex guards against matching `bg-void`
     inside `bg-void-800`), and the gap was visible rather than measurable: skeleton
     loaders rendered as DARK GREEN BLOCKS on white cards. A contrast audit cannot see
     it, because a skeleton has no text. Looking at the page is what caught it. */
.ui-panel {
  --tw-bg-opacity: 1;
  background-color: rgb(10 19 14 / var(--tw-bg-opacity, 1));
}
.ui-panel-2 {
  --tw-bg-opacity: 1;
  background-color: rgb(20 46 34 / var(--tw-bg-opacity, 1));
}
.ui-panel-3 {
  --tw-bg-opacity: 1;
  background-color: rgb(28 66 48 / var(--tw-bg-opacity, 1));
}
.ui-ink-2 {
  --tw-text-opacity: 1;
  color: rgb(249 246 240 / var(--tw-text-opacity, 1));
}
.ui-muted-2 {
  --tw-text-opacity: 1;
  color: rgb(236 227 208 / var(--tw-text-opacity, 1));
}
.ui-faint-2 {
  --tw-text-opacity: 1;
  color: rgb(196 174 142 / var(--tw-text-opacity, 1));
}
.ui-line-2 {
  --tw-border-opacity: 1;
  border-color: rgb(28 66 48 / var(--tw-border-opacity, 1));
}
.ui-accent-2 {
  --tw-text-opacity: 1;
  color: rgb(252 193 62 / var(--tw-text-opacity, 1));
}
.theme-light .ui-panel {
  --tw-bg-opacity: 1;
  background-color: rgb(241 235 221 / var(--tw-bg-opacity, 1));
}
.theme-light .ui-panel-2 {
  background-color: rgb(221 214 200 / 0.5);
}
.theme-light .ui-panel-3 {
  background-color: rgb(221 214 200 / 0.7);
}
.theme-light .ui-ink-2 {
  --tw-text-opacity: 1;
  color: rgb(23 35 60 / var(--tw-text-opacity, 1));
}
.theme-light .ui-muted-2 {
  --tw-text-opacity: 1;
  color: rgb(89 98 115 / var(--tw-text-opacity, 1));
}
.theme-light .ui-faint-2 {
  --tw-text-opacity: 1;
  color: rgb(89 98 115 / var(--tw-text-opacity, 1));
}
.theme-light .ui-line-2 {
  --tw-border-opacity: 1;
  border-color: rgb(221 214 200 / var(--tw-border-opacity, 1));
}
.theme-light .ui-accent-2 {
  --tw-text-opacity: 1;
  color: rgb(132 101 42 / var(--tw-text-opacity, 1));
}
/* ── Section GRADIENTS ────────────────────────────────────────────────────
     ⚠ THESE ARE THE ONES THAT SHIPPED BROKEN. I left gradient stops out of the
       conversion deliberately and said so — but "left alone" on a page whose TEXT
       flipped to dark ink means dark ink on a dark gradient. /courses/foundation
       went out with a grey-on-grey hero.

     ⚠ AND MY AUDIT COULD NOT HAVE CAUGHT IT: the route list was hand-typed and held
       only static paths, so no `/courses/:slug`, `/blog/:slug`, `/library/:slug` or
       `/tracks/:root` page was ever rendered. 23 routes passed; the broken one was
       not among them. Enumerate routes from the router, never by hand.

     The direction is baked in, because the role replaces the whole utility run. */
.ui-grad-hero {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  --tw-gradient-from: #0a130e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(10 19 14 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(7 23 63 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(7 23 63 / 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: #0a130e var(--tw-gradient-to-position);
}
.ui-grad-band {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
  --tw-gradient-from: #0a130e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(10 19 14 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(10 19 14 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(10 19 14 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: #0a130e var(--tw-gradient-to-position);
}
.ui-grad-bandx {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: #0a130e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(10 19 14 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(232 160 32 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(232 160 32 / 0.04) var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: #0a130e var(--tw-gradient-to-position);
}
.ui-grad-panel {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  --tw-gradient-from: #142e22 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(20 46 34 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #0a130e var(--tw-gradient-to-position);
}
/* On cream these become a whisper, not a wash: the page ground already carries the
     warmth, so a strong gradient here reads as a stain (the same reason the lapis orb
     was dropped from the hero). */
.theme-light .ui-grad-hero {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  --tw-gradient-from: #FFFFFF var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(248 245 236 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #F8F5EC var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: #F1EBDD var(--tw-gradient-to-position);
}
.theme-light .ui-grad-band {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
  --tw-gradient-from: #F8F5EC var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 245 236 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(241 235 221 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(241 235 221 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: #F8F5EC var(--tw-gradient-to-position);
}
.theme-light .ui-grad-bandx {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: #F8F5EC var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 245 236 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(181 138 58 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(181 138 58 / 0.06) var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: #F8F5EC var(--tw-gradient-to-position);
}
.theme-light .ui-grad-panel {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
  --tw-gradient-from: #FFFFFF var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: #F1EBDD var(--tw-gradient-to-position);
}
/* ── Modal / drawer scrim ─────────────────────────────────────────────────
     ⚠ A ROLE CLASS CANNOT TAKE AN OPACITY MODIFIER. `bg-void/85` converted to
       `ui-page/85`, which is not a class Tailwind emits — it silently resolves to
       NOTHING, so every modal backdrop lost its dim. 19 of these shipped. The rule:
       if a utility carried `/opacity`, it needs its own role, never a suffix.
     A scrim stays dark in both themes — its job is to push the page back, and a pale
     scrim over a cream page dims nothing. */
.ui-scrim {
  background-color: rgb(10 19 14 / 0.85);
}
.theme-light .ui-scrim {
  background-color: rgb(23 35 60 / 0.35);
}
/* A sticky translucent bar sitting over scrolling content (exam header, tool toolbars).
     Unlike .ui-scrim it takes the PAGE colour, not a dimming layer — it hides what passes
     under it while staying part of the page. Pairs with backdrop-blur at the call site. */
.ui-bar {
  background-color: rgb(10 19 14 / 0.95);
}
.theme-light .ui-bar {
  background-color: rgb(248 245 236 / 0.95);
}
/* ── Placeholder text ─────────────────────────────────────────────────────
     ⚠ `placeholder:text-cream/30` survived every pass. The bare patterns correctly
       refused to match after a ':', and `placeholder:` was never in the variant map —
       so eight inputs kept a CREAM placeholder, which on white composites to **1.04**.
       Invisible. The birth-chart form inside the lesson reader was one of them.

     ⚠ AND MY AUDIT COULD NOT SEE IT EITHER: it read `el.placeholder` for the text but
       measured the input's own `color`. `::placeholder` is a pseudo-element and needs
       getComputedStyle(el, '::placeholder'). Measured properly, light was 3.16 before
       this and 6.14 after. */
.ui-ph::-moz-placeholder {
  color: rgb(245 240 232 / 0.3);
}
.ui-ph::placeholder {
  color: rgb(245 240 232 / 0.3);
}
.theme-light .ui-ph::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(89 98 115 / var(--tw-text-opacity, 1));
}
.theme-light .ui-ph::placeholder {
  --tw-text-opacity: 1;
  color: rgb(89 98 115 / var(--tw-text-opacity, 1));
}
/* ── Lesson diagram palette ───────────────────────────────────────────────
     ⚠ THE DIAGRAMS ARE SVG, AND MY CONTRAST AUDIT NEVER SAW THEM. It queried
       h1..p, a, span, li, td, button and friends — `<text>` is not in that list, so
       /diagrams passed with "0 failures" while the zodiac ring labels and the
       Pada 1–4 captions were cream on pale gold, i.e. invisible. The screenshot
       caught it, again.

     SVG attributes accept var(), so the colours can flip with the theme from here
     instead of being 72 literals spread across 18 components. Only the cream/void
     ones move: the planet and element hues are mid-tone and read on either ground. */
:root {
    --dg-ink:        #f5f0e8;
    --dg-ink-dim:    rgba(245,240,232,0.55);
    --dg-ink-faint:  rgba(245,240,232,0.32);
    --dg-panel:      #142e22;
    --dg-panel-deep: #0a130e;
    --dg-line:       rgba(232,160,32,0.22);
  }
.theme-light {
    --dg-ink:        #17233C;
    --dg-ink-dim:    #596273;
    --dg-ink-faint:  rgba(89,98,115,0.62);
    --dg-panel:      #F1EBDD;
    --dg-panel-deep: #E8E0CE;
    --dg-line:       rgba(181,138,58,0.38);
  }
/* ── Lesson prose palette ─────────────────────────────────────────────────
     ⚠ `.lesson-content` held 55 hardcoded colours and NOT ONE light override, so the
       lesson reader would have rendered cream body text on a cream page even once its
       route was themed. It is the screen a student spends hours in.

     ⚠ `--ls-accent` is the saffron used for drop caps, h3 and Sanskrit emphasis. On
       cream, raw #e8a020 fails contrast as TEXT, so light uses the darkened gold-ink
       (#8A6522) — the same rule the design system states: gold is decorative, and when
       gold-coloured TEXT is wanted on a light ground it must be darkened first. */
:root {
    --ls-ink:          rgba(245, 240, 232, 0.82);
    --ls-ink-strong:   #f5f0e8;
    --ls-ink-soft:     rgba(245, 240, 232, 0.5);
    --ls-accent:       #e8a020;
    --ls-accent-warm:  #fcc13e;
    --ls-rule:         rgba(232, 160, 32, 0.5);
    --ls-rule-faint:   rgba(232, 160, 32, 0.22);
    --ls-surface:      rgba(255, 255, 255, 0.05);
    --ls-surface-line: rgba(255, 255, 255, 0.08);
    /* ⚠ <pre> painted a near-black panel. Its text INHERITS the prose colour, which on light
       is dark ink — so the block would have been dark-on-dark. Both move together. */
    --ls-code-bg:      rgba(10, 19, 14, 0.6);
  }
.theme-light {
    --ls-ink:          #17233C;
    --ls-ink-strong:   #101B31;
    --ls-ink-soft:     #596273;
    --ls-accent:       #8A6522;
    --ls-accent-warm:  #7A5A1E;
    --ls-rule:         rgba(181, 138, 58, 0.55);
    --ls-rule-faint:   rgba(181, 138, 58, 0.28);
    --ls-surface:      #FFFFFF;
    --ls-surface-line: #DDD6C8;
    --ls-code-bg:      #F1EBDD;
  }
/* ── Deliberately DARK panels inside a light page ─────────────────────────
     index.css already warned that a role must not be used for text on an image or on
     a panel that is dark on purpose — "that text is light in every theme". The bulk
     conversion did it anyway: the auth pages keep a dark decorative aside with a
     StarField behind it, and every line of copy in it became dark ink on a dark ground.

     Mark such a panel `.on-dark` and the roles inside it resolve back to their dark-theme
     values, whatever theme the page is on. */
.theme-light .on-dark .ui-ink {
  --tw-text-opacity: 1;
  color: rgb(245 240 232 / var(--tw-text-opacity, 1));
}
.theme-light .on-dark .ui-ink-soft {
  color: rgb(245 240 232 / 0.8);
}
.theme-light .on-dark .ui-ink-2 {
  --tw-text-opacity: 1;
  color: rgb(249 246 240 / var(--tw-text-opacity, 1));
}
.theme-light .on-dark .ui-muted {
  color: rgb(245 240 232 / 0.6);
}
.theme-light .on-dark .ui-muted-2 {
  --tw-text-opacity: 1;
  color: rgb(236 227 208 / var(--tw-text-opacity, 1));
}
.theme-light .on-dark .ui-faint {
  color: rgb(245 240 232 / 0.45);
}
.theme-light .on-dark .ui-faint-2 {
  --tw-text-opacity: 1;
  color: rgb(196 174 142 / var(--tw-text-opacity, 1));
}
.theme-light .on-dark .ui-accent {
  --tw-text-opacity: 1;
  color: rgb(232 160 32 / var(--tw-text-opacity, 1));
}
.theme-light .on-dark .ui-accent-soft {
  color: rgb(232 160 32 / 0.7);
}
.theme-light .on-dark .ui-accent-2 {
  --tw-text-opacity: 1;
  color: rgb(252 193 62 / var(--tw-text-opacity, 1));
}
.theme-light .on-dark .ui-line {
  border-color: rgb(255 255 255 / 0.1);
}
.theme-light .on-dark .ui-edge {
  border-color: rgb(232 160 32 / 0.3);
}
/* ⚠ .skeleton is a GRADIENT, and that is why it survived two passes. The conversion
     script skips from-/via-/to- stops by design, and my dark-ground probe only read
     backgroundColor — a gradient lives in backgroundImage, so the probe returned 0
     dark elements for a page that visibly had twelve of them. The screenshot caught
     what the measurement could not. */
.theme-light .skeleton {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: rgb(221 214 200 / 0.6) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(221 214 200 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(241 235 221 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #F1EBDD var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: rgb(221 214 200 / 0.6) var(--tw-gradient-to-position);
}
/* ── CourseCard, made theme-aware ─────────────────────────────────────────
     CourseCard is rendered by Landing, CourseCatalog, FreeCourses, Pricing and
     LadderTier. Converting its utilities outright would light up four pages
     that have not been migrated, so its BODY roles become semantic classes:
     the dark values below are exactly what it had, and `.theme-light` restates
     them for a light ground. Four pages render identically; the home page reads.

     ⚠ The badges over the thumbnail are deliberately NOT included. They sit on
     the course image, which is dark whatever the page theme is, so light text
     is correct there and "fixing" it would break them. */
.cc-title {
  --tw-text-opacity: 1;
  color: rgb(245 240 232 / var(--tw-text-opacity, 1));
}
.group:hover .cc-title {
  --tw-text-opacity: 1;
  color: rgb(232 160 32 / var(--tw-text-opacity, 1));
}
.cc-desc {
  color: rgb(245 240 232 / 0.55);
}
.cc-meta {
  color: rgb(245 240 232 / 0.5);
}
.cc-meta-icon {
  color: rgb(232 160 32 / 0.6);
}
/* /8 is not a default opacity step, so @apply rejects it even though the JSX
     utility resolved. The arbitrary value keeps the exact same hairline. */
.cc-divider {
  border-color: rgb(255 255 255 / 0.08);
}
.cc-price {
  --tw-text-opacity: 1;
  color: rgb(232 160 32 / var(--tw-text-opacity, 1));
}
.cc-link {
  --tw-text-opacity: 1;
  color: rgb(245 240 232 / var(--tw-text-opacity, 1));
}
.cc-link:hover {
  --tw-text-opacity: 1;
  color: rgb(232 160 32 / var(--tw-text-opacity, 1));
}
.cc-badge-gold {
  border-color: rgb(232 160 32 / 0.25);
  background-color: rgb(232 160 32 / 0.1);
  color: rgb(232 160 32 / 0.9);
}
.cc-badge-ok {
  border-color: rgb(16 185 129 / 0.25);
  background-color: rgb(16 185 129 / 0.1);
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.cc-ok-text {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.theme-light .cc-title {
  --tw-text-opacity: 1;
  color: rgb(23 35 60 / var(--tw-text-opacity, 1));
}
.group:hover .theme-light .cc-title {
  --tw-text-opacity: 1;
  color: rgb(132 101 42 / var(--tw-text-opacity, 1));
}
.theme-light .cc-desc {
  --tw-text-opacity: 1;
  color: rgb(89 98 115 / var(--tw-text-opacity, 1));
}
.theme-light .cc-meta {
  --tw-text-opacity: 1;
  color: rgb(89 98 115 / var(--tw-text-opacity, 1));
}
.theme-light .cc-meta-icon {
  --tw-text-opacity: 1;
  color: rgb(132 101 42 / var(--tw-text-opacity, 1));
}
.theme-light .cc-divider {
  --tw-border-opacity: 1;
  border-color: rgb(221 214 200 / var(--tw-border-opacity, 1));
}
.theme-light .cc-price {
  --tw-text-opacity: 1;
  color: rgb(132 101 42 / var(--tw-text-opacity, 1));
}
.theme-light .cc-link {
  --tw-text-opacity: 1;
  color: rgb(23 35 60 / var(--tw-text-opacity, 1));
}
.theme-light .cc-link:hover {
  --tw-text-opacity: 1;
  color: rgb(132 101 42 / var(--tw-text-opacity, 1));
}
.theme-light .cc-badge-gold {
  border-color: rgb(181 138 58 / 0.3);
  background-color: rgb(181 138 58 / 0.12);
  --tw-text-opacity: 1;
  color: rgb(132 101 42 / var(--tw-text-opacity, 1));
}
.theme-light .cc-badge-ok {
  border-color: rgb(53 111 80 / 0.25);
  background-color: rgb(53 111 80 / 0.1);
  --tw-text-opacity: 1;
  color: rgb(53 111 80 / var(--tw-text-opacity, 1));
}
.theme-light .cc-ok-text {
  --tw-text-opacity: 1;
  color: rgb(53 111 80 / var(--tw-text-opacity, 1));
}
/* Dividers */
.divider {
  border-top-width: 1px;
  border-color: rgb(255 255 255 / 0.1);
}
/* Section headers */

  html[lang="ta"] .section-tag {
    font-family: 'Noto Sans Tamil', 'Latha', system-ui, sans-serif;
  }
 html[lang="hi"] .section-tag {
    font-family: 'Noto Sans Devanagari', system-ui, sans-serif;
  }
 html[lang="te"] .section-tag {
    font-family: 'Noto Sans Telugu', system-ui, sans-serif;
  }
 html[lang="kn"] .section-tag {
    font-family: 'Noto Sans Kannada', system-ui, sans-serif;
  }
 html[lang="ml"] .section-tag {
    font-family: 'Noto Sans Malayalam', system-ui, sans-serif;
  }
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border-width: 1px;
  border-color: rgb(232 160 32 / 0.2);
  background-color: rgb(232 160 32 / 0.1);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-family: DM Sans, system-ui, sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  --tw-text-opacity: 1;
  color: rgb(232 160 32 / var(--tw-text-opacity, 1));
}
/* Progress bar */
/* Badge */

  html[lang="ta"] .badge {
    font-family: 'Noto Sans Tamil', 'Latha', system-ui, sans-serif;
  }
 html[lang="hi"] .badge {
    font-family: 'Noto Sans Devanagari', system-ui, sans-serif;
  }
 html[lang="te"] .badge {
    font-family: 'Noto Sans Telugu', system-ui, sans-serif;
  }
 html[lang="kn"] .badge {
    font-family: 'Noto Sans Kannada', system-ui, sans-serif;
  }
 html[lang="ml"] .badge {
    font-family: 'Noto Sans Malayalam', system-ui, sans-serif;
  }
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-family: DM Sans, system-ui, sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
}

  html[lang="ta"] .badge-beginner {
    font-family: 'Noto Sans Tamil', 'Latha', system-ui, sans-serif;
  }
 html[lang="hi"] .badge-beginner {
    font-family: 'Noto Sans Devanagari', system-ui, sans-serif;
  }
 html[lang="te"] .badge-beginner {
    font-family: 'Noto Sans Telugu', system-ui, sans-serif;
  }
 html[lang="kn"] .badge-beginner {
    font-family: 'Noto Sans Kannada', system-ui, sans-serif;
  }
 html[lang="ml"] .badge-beginner {
    font-family: 'Noto Sans Malayalam', system-ui, sans-serif;
  }
.badge-beginner {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-family: DM Sans, system-ui, sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  border-width: 1px;
  border-color: rgb(16 185 129 / 0.2);
  background-color: rgb(16 185 129 / 0.15);
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}

  html[lang="ta"] .badge-intermediate {
    font-family: 'Noto Sans Tamil', 'Latha', system-ui, sans-serif;
  }
 html[lang="hi"] .badge-intermediate {
    font-family: 'Noto Sans Devanagari', system-ui, sans-serif;
  }
 html[lang="te"] .badge-intermediate {
    font-family: 'Noto Sans Telugu', system-ui, sans-serif;
  }
 html[lang="kn"] .badge-intermediate {
    font-family: 'Noto Sans Kannada', system-ui, sans-serif;
  }
 html[lang="ml"] .badge-intermediate {
    font-family: 'Noto Sans Malayalam', system-ui, sans-serif;
  }
.badge-intermediate {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-family: DM Sans, system-ui, sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  border-width: 1px;
  border-color: rgb(232 160 32 / 0.2);
  background-color: rgb(232 160 32 / 0.2);
  --tw-text-opacity: 1;
  color: rgb(232 160 32 / var(--tw-text-opacity, 1));
}

  html[lang="ta"] .badge-advanced {
    font-family: 'Noto Sans Tamil', 'Latha', system-ui, sans-serif;
  }
 html[lang="hi"] .badge-advanced {
    font-family: 'Noto Sans Devanagari', system-ui, sans-serif;
  }
 html[lang="te"] .badge-advanced {
    font-family: 'Noto Sans Telugu', system-ui, sans-serif;
  }
 html[lang="kn"] .badge-advanced {
    font-family: 'Noto Sans Kannada', system-ui, sans-serif;
  }
 html[lang="ml"] .badge-advanced {
    font-family: 'Noto Sans Malayalam', system-ui, sans-serif;
  }
.badge-advanced {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-family: DM Sans, system-ui, sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  border-width: 1px;
  border-color: rgb(239 68 68 / 0.2);
  background-color: rgb(239 68 68 / 0.15);
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

  html[lang="ta"] .badge-free {
    font-family: 'Noto Sans Tamil', 'Latha', system-ui, sans-serif;
  }
 html[lang="hi"] .badge-free {
    font-family: 'Noto Sans Devanagari', system-ui, sans-serif;
  }
 html[lang="te"] .badge-free {
    font-family: 'Noto Sans Telugu', system-ui, sans-serif;
  }
 html[lang="kn"] .badge-free {
    font-family: 'Noto Sans Kannada', system-ui, sans-serif;
  }
 html[lang="ml"] .badge-free {
    font-family: 'Noto Sans Malayalam', system-ui, sans-serif;
  }
.badge-free {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-family: DM Sans, system-ui, sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  border-width: 1px;
  border-color: rgb(40 85 160 / 0.3);
  background-color: rgb(40 85 160 / 0.2);
  --tw-text-opacity: 1;
  color: rgb(127 158 220 / var(--tw-text-opacity, 1));
}
/* Star decoration */
/* Diya flame (LadderPanel). Anchored at the wick and scaled, never
     translated: SVG transforms run in viewBox units, so a translateY would
     lift the flame clean off the lamp. */
.flame-flicker {
    transform-box: view-box;
    transform-origin: 40px 60px;
    animation: flame-flicker 2.6s ease-in-out infinite;
  }
@keyframes flame-flicker {
    0%, 100% { transform: scaleY(1)    scaleX(1);     }
    35%      { transform: scaleY(1.07) scaleX(0.965); }
    70%      { transform: scaleY(0.97) scaleX(1.02);  }
  }
@media (prefers-reduced-motion: reduce) {
    .flame-flicker { animation: none; }
  }
/* Skeleton loading */
@keyframes shimmer {

  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}
.skeleton {
  animation: shimmer 2s infinite linear;
  border-radius: 0.25rem;
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
  --tw-gradient-from: #142e22 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(20 46 34 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  --tw-gradient-to: rgb(28 66 48 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #1c4230 var(--tw-gradient-via-position), var(--tw-gradient-to);
  --tw-gradient-to: #142e22 var(--tw-gradient-to-position);
  background-size: 200% 100%;
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-2 {
  inset: 0.5rem;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-60 {
  bottom: -15rem;
}
.-left-10 {
  left: -2.5rem;
}
.-left-2 {
  left: -0.5rem;
}
.-left-20 {
  left: -5rem;
}
.-left-32 {
  left: -8rem;
}
.-left-40 {
  left: -10rem;
}
.-left-\[50px\] {
  left: -50px;
}
.-left-\[7px\] {
  left: -7px;
}
.-right-12 {
  right: -3rem;
}
.-right-16 {
  right: -4rem;
}
.-right-20 {
  right: -5rem;
}
.-right-40 {
  right: -10rem;
}
.-right-\[50px\] {
  right: -50px;
}
.-top-12 {
  top: -3rem;
}
.-top-16 {
  top: -4rem;
}
.-top-20 {
  top: -5rem;
}
.-top-24 {
  top: -6rem;
}
.-top-3 {
  top: -0.75rem;
}
.-top-40 {
  top: -10rem;
}
.-top-6 {
  top: -1.5rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-10 {
  bottom: 2.5rem;
}
.bottom-20 {
  bottom: 5rem;
}
.bottom-32 {
  bottom: 8rem;
}
.bottom-4 {
  bottom: 1rem;
}
.bottom-6 {
  bottom: 1.5rem;
}
.left-0 {
  left: 0px;
}
.left-1\.5 {
  left: 0.375rem;
}
.left-1\/2 {
  left: 50%;
}
.left-1\/4 {
  left: 25%;
}
.left-2\.5 {
  left: 0.625rem;
}
.left-3 {
  left: 0.75rem;
}
.left-3\.5 {
  left: 0.875rem;
}
.left-4 {
  left: 1rem;
}
.left-\[-10\%\] {
  left: -10%;
}
.left-\[-9999px\] {
  left: -9999px;
}
.left-\[14\%\] {
  left: 14%;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-1\/3 {
  right: 33.333333%;
}
.right-1\/4 {
  right: 25%;
}
.right-10 {
  right: 2.5rem;
}
.right-12 {
  right: 3rem;
}
.right-16 {
  right: 4rem;
}
.right-2 {
  right: 0.5rem;
}
.right-2\.5 {
  right: 0.625rem;
}
.right-3 {
  right: 0.75rem;
}
.right-\[14\%\] {
  right: 14%;
}
.top-0 {
  top: 0px;
}
.top-1 {
  top: 0.25rem;
}
.top-1\/2 {
  top: 50%;
}
.top-1\/3 {
  top: 33.333333%;
}
.top-10 {
  top: 2.5rem;
}
.top-12 {
  top: 3rem;
}
.top-16 {
  top: 4rem;
}
.top-2 {
  top: 0.5rem;
}
.top-20 {
  top: 5rem;
}
.top-24 {
  top: 6rem;
}
.top-3 {
  top: 0.75rem;
}
.top-8 {
  top: 2rem;
}
.top-9 {
  top: 2.25rem;
}
.top-\[10\%\] {
  top: 10%;
}
.top-full {
  top: 100%;
}
.-z-10 {
  z-index: -10;
}
.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-\[100\] {
  z-index: 100;
}
.z-\[15\] {
  z-index: 15;
}
.z-\[1\] {
  z-index: 1;
}
.z-\[2\] {
  z-index: 2;
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}
.-mx-6 {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-1\.5 {
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}
.mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-10 {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-7 {
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
}
.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.my-9 {
  margin-top: 2.25rem;
  margin-bottom: 2.25rem;
}
.\!mt-5 {
  margin-top: 1.25rem !important;
}
.-mb-px {
  margin-bottom: -1px;
}
.-mt-0\.5 {
  margin-top: -0.125rem;
}
.-mt-1 {
  margin-top: -0.25rem;
}
.-mt-6 {
  margin-top: -1.5rem;
}
.mb-0 {
  margin-bottom: 0px;
}
.mb-0\.5 {
  margin-bottom: 0.125rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.mb-14 {
  margin-bottom: 3.5rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-2\.5 {
  margin-bottom: 0.625rem;
}
.mb-20 {
  margin-bottom: 5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-7 {
  margin-bottom: 1.75rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mb-9 {
  margin-bottom: 2.25rem;
}
.ml-0\.5 {
  margin-left: 0.125rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-1\.5 {
  margin-left: 0.375rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-4 {
  margin-left: 1rem;
}
.ml-8 {
  margin-left: 2rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-0\.5 {
  margin-right: 0.125rem;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-14 {
  margin-top: 3.5rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-2\.5 {
  margin-top: 0.625rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-7 {
  margin-top: 1.75rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-auto {
  margin-top: auto;
}
.mt-px {
  margin-top: 1px;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.line-clamp-4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.line-clamp-6 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.\!table {
  display: table !important;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.\!hidden {
  display: none !important;
}
.hidden {
  display: none;
}
.aspect-\[16\/9\] {
  aspect-ratio: 16/9;
}
.aspect-\[3\/4\] {
  aspect-ratio: 3/4;
}
.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.h-0\.5 {
  height: 0.125rem;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-20 {
  height: 5rem;
}
.h-24 {
  height: 6rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-32 {
  height: 8rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-7 {
  height: 1.75rem;
}
.h-72 {
  height: 18rem;
}
.h-8 {
  height: 2rem;
}
.h-80 {
  height: 20rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[200px\] {
  height: 200px;
}
.h-\[400px\] {
  height: 400px;
}
.h-\[480px\] {
  height: 480px;
}
.h-\[500px\] {
  height: 500px;
}
.h-\[520px\] {
  height: 520px;
}
.h-\[600px\] {
  height: 600px;
}
.h-\[800px\] {
  height: 800px;
}
.h-auto {
  height: auto;
}
.h-fit {
  height: -moz-fit-content;
  height: fit-content;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.max-h-56 {
  max-height: 14rem;
}
.max-h-64 {
  max-height: 16rem;
}
.max-h-72 {
  max-height: 18rem;
}
.max-h-\[70vh\] {
  max-height: 70vh;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.max-h-full {
  max-height: 100%;
}
.min-h-\[120px\] {
  min-height: 120px;
}
.min-h-\[260px\] {
  min-height: 260px;
}
.min-h-\[272px\] {
  min-height: 272px;
}
.min-h-\[280px\] {
  min-height: 280px;
}
.min-h-\[2rem\] {
  min-height: 2rem;
}
.min-h-\[30rem\] {
  min-height: 30rem;
}
.min-h-\[320px\] {
  min-height: 320px;
}
.min-h-\[400px\] {
  min-height: 400px;
}
.min-h-\[480px\] {
  min-height: 480px;
}
.min-h-\[50vh\] {
  min-height: 50vh;
}
.min-h-\[60vh\] {
  min-height: 60vh;
}
.min-h-\[70vh\] {
  min-height: 70vh;
}
.min-h-screen {
  min-height: 100vh;
}
.w-1 {
  width: 0.25rem;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-1\/3 {
  width: 33.333333%;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-2\/3 {
  width: 66.666667%;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-32 {
  width: 8rem;
}
.w-4 {
  width: 1rem;
}
.w-4\/5 {
  width: 80%;
}
.w-40 {
  width: 10rem;
}
.w-44 {
  width: 11rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-5\/6 {
  width: 83.333333%;
}
.w-52 {
  width: 13rem;
}
.w-6 {
  width: 1.5rem;
}
.w-60 {
  width: 15rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[200px\] {
  width: 200px;
}
.w-\[400px\] {
  width: 400px;
}
.w-\[480px\] {
  width: 480px;
}
.w-\[500px\] {
  width: 500px;
}
.w-\[520px\] {
  width: 520px;
}
.w-\[600px\] {
  width: 600px;
}
.w-\[8\.5rem\] {
  width: 8.5rem;
}
.w-\[800px\] {
  width: 800px;
}
.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[140px\] {
  min-width: 140px;
}
.min-w-\[16rem\] {
  min-width: 16rem;
}
.min-w-\[220px\] {
  min-width: 220px;
}
.min-w-\[2rem\] {
  min-width: 2rem;
}
.min-w-\[520px\] {
  min-width: 520px;
}
.min-w-\[560px\] {
  min-width: 560px;
}
.min-w-\[600px\] {
  min-width: 600px;
}
.min-w-\[640px\] {
  min-width: 640px;
}
.min-w-max {
  min-width: -moz-max-content;
  min-width: max-content;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-\[100px\] {
  max-width: 100px;
}
.max-w-\[15rem\] {
  max-width: 15rem;
}
.max-w-\[1600px\] {
  max-width: 1600px;
}
.max-w-\[240px\] {
  max-width: 240px;
}
.max-w-\[480px\] {
  max-width: 480px;
}
.max-w-\[840px\] {
  max-width: 840px;
}
.max-w-\[9rem\] {
  max-width: 9rem;
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-none {
  max-width: none;
}
.max-w-prose {
  max-width: 65ch;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.border-collapse {
  border-collapse: collapse;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1 {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[18px\] {
  --tw-translate-x: 18px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-125 {
  --tw-scale-x: 1.25;
  --tw-scale-y: 1.25;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes marquee {

  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}
.animate-marquee {
  animation: marquee 40s linear infinite;
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
@keyframes twinkle {

  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}
.animate-twinkle {
  animation: twinkle 3s ease-in-out infinite;
}
.cursor-cell {
  cursor: cell;
}
.cursor-default {
  cursor: default;
}
.cursor-grab {
  cursor: grab;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize-y {
  resize: vertical;
}
.scroll-mt-24 {
  scroll-margin-top: 6rem;
}
.list-inside {
  list-style-position: inside;
}
.list-decimal {
  list-style-type: decimal;
}
.list-none {
  list-style-type: none;
}
.appearance-none {
  -webkit-appearance: none;
     -moz-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-\[1\.1fr_1\.4fr_1fr\] {
  grid-template-columns: 1.1fr 1.4fr 1fr;
}
.grid-cols-\[auto_1fr\] {
  grid-template-columns: auto 1fr;
}
.grid-rows-4 {
  grid-template-rows: repeat(4, minmax(0, 1fr));
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-items-center {
  place-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-3\.5 {
  gap: 0.875rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-\[3px\] {
  gap: 3px;
}
.gap-x-1\.5 {
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
}
.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}
.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.gap-x-8 {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-1\.5 {
  row-gap: 0.375rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.gap-y-3 {
  row-gap: 0.75rem;
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-10 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
}
.space-y-16 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(4rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-white\/5 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(255 255 255 / 0.05);
}
.self-start {
  align-self: flex-start;
}
.self-center {
  align-self: center;
}
.self-stretch {
  align-self: stretch;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-normal {
  white-space: normal;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.text-balance {
  text-wrap: balance;
}
.text-pretty {
  text-wrap: pretty;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-sm {
  border-radius: 0.125rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-xl2 {
  border-radius: 1rem;
}
.rounded-t-xl2 {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-t-2 {
  border-top-width: 2px;
}
.border-dashed {
  border-style: dashed;
}
.border-amber-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}
.border-amber-400\/20 {
  border-color: rgb(251 191 36 / 0.2);
}
.border-amber-400\/25 {
  border-color: rgb(251 191 36 / 0.25);
}
.border-amber-400\/30 {
  border-color: rgb(251 191 36 / 0.3);
}
.border-amber-400\/40 {
  border-color: rgb(251 191 36 / 0.4);
}
.border-amber-500\/20 {
  border-color: rgb(245 158 11 / 0.2);
}
.border-amber-500\/30 {
  border-color: rgb(245 158 11 / 0.3);
}
.border-amber-500\/40 {
  border-color: rgb(245 158 11 / 0.4);
}
.border-cream\/10 {
  border-color: rgb(245 240 232 / 0.1);
}
.border-cream\/15 {
  border-color: rgb(245 240 232 / 0.15);
}
.border-cream\/20 {
  border-color: rgb(245 240 232 / 0.2);
}
.border-cream\/25 {
  border-color: rgb(245 240 232 / 0.25);
}
.border-cream\/30 {
  border-color: rgb(245 240 232 / 0.3);
}
.border-cream\/5 {
  border-color: rgb(245 240 232 / 0.05);
}
.border-cyan-400\/30 {
  border-color: rgb(34 211 238 / 0.3);
}
.border-emerald-400\/40 {
  border-color: rgb(52 211 153 / 0.4);
}
.border-emerald-500\/20 {
  border-color: rgb(16 185 129 / 0.2);
}
.border-emerald-500\/30 {
  border-color: rgb(16 185 129 / 0.3);
}
.border-emerald-500\/40 {
  border-color: rgb(16 185 129 / 0.4);
}
.border-emerald-500\/50 {
  border-color: rgb(16 185 129 / 0.5);
}
.border-green-500\/20 {
  border-color: rgb(34 197 94 / 0.2);
}
.border-lapis-300\/40 {
  border-color: rgb(127 158 220 / 0.4);
}
.border-lapis-400\/20 {
  border-color: rgb(84 123 206 / 0.2);
}
.border-lapis\/30 {
  border-color: rgb(40 85 160 / 0.3);
}
.border-lapis\/40 {
  border-color: rgb(40 85 160 / 0.4);
}
.border-light-gold\/15 {
  border-color: rgb(181 138 58 / 0.15);
}
.border-light-gold\/20 {
  border-color: rgb(181 138 58 / 0.2);
}
.border-light-gold\/30 {
  border-color: rgb(181 138 58 / 0.3);
}
.border-light-gold\/35 {
  border-color: rgb(181 138 58 / 0.35);
}
.border-light-gold\/40 {
  border-color: rgb(181 138 58 / 0.4);
}
.border-light-line {
  --tw-border-opacity: 1;
  border-color: rgb(221 214 200 / var(--tw-border-opacity, 1));
}
.border-orange-400\/30 {
  border-color: rgb(251 146 60 / 0.3);
}
.border-red-400\/20 {
  border-color: rgb(248 113 113 / 0.2);
}
.border-red-400\/30 {
  border-color: rgb(248 113 113 / 0.3);
}
.border-red-500\/20 {
  border-color: rgb(239 68 68 / 0.2);
}
.border-red-500\/30 {
  border-color: rgb(239 68 68 / 0.3);
}
.border-red-500\/40 {
  border-color: rgb(239 68 68 / 0.4);
}
.border-red-500\/50 {
  border-color: rgb(239 68 68 / 0.5);
}
.border-rose-400\/40 {
  border-color: rgb(251 113 133 / 0.4);
}
.border-rose-400\/60 {
  border-color: rgb(251 113 133 / 0.6);
}
.border-rose-500\/20 {
  border-color: rgb(244 63 94 / 0.2);
}
.border-rose-500\/25 {
  border-color: rgb(244 63 94 / 0.25);
}
.border-rose-500\/30 {
  border-color: rgb(244 63 94 / 0.3);
}
.border-rose-500\/40 {
  border-color: rgb(244 63 94 / 0.4);
}
.border-saffron {
  --tw-border-opacity: 1;
  border-color: rgb(232 160 32 / var(--tw-border-opacity, 1));
}
.border-saffron\/20 {
  border-color: rgb(232 160 32 / 0.2);
}
.border-saffron\/45 {
  border-color: rgb(232 160 32 / 0.45);
}
.border-sky-400\/25 {
  border-color: rgb(56 189 248 / 0.25);
}
.border-sky-500\/30 {
  border-color: rgb(14 165 233 / 0.3);
}
.border-state-danger\/25 {
  border-color: rgb(163 52 38 / 0.25);
}
.border-state-info\/30 {
  border-color: rgb(40 85 160 / 0.3);
}
.border-state-info\/40 {
  border-color: rgb(40 85 160 / 0.4);
}
.border-state-info\/50 {
  border-color: rgb(40 85 160 / 0.5);
}
.border-state-success\/25 {
  border-color: rgb(53 111 80 / 0.25);
}
.border-state-success\/30 {
  border-color: rgb(53 111 80 / 0.3);
}
.border-transparent {
  border-color: transparent;
}
.border-yellow-400\/30 {
  border-color: rgb(250 204 21 / 0.3);
}
.border-yellow-400\/40 {
  border-color: rgb(250 204 21 / 0.4);
}
.border-l-emerald-400\/70 {
  border-left-color: rgb(52 211 153 / 0.7);
}
.border-l-rose-400\/60 {
  border-left-color: rgb(251 113 133 / 0.6);
}
.border-l-saffron\/50 {
  border-left-color: rgb(232 160 32 / 0.5);
}
.border-l-saffron\/60 {
  border-left-color: rgb(232 160 32 / 0.6);
}
.border-l-sky-400\/60 {
  border-left-color: rgb(56 189 248 / 0.6);
}
.border-r-saffron\/30 {
  border-right-color: rgb(232 160 32 / 0.3);
}
.border-t-saffron {
  --tw-border-opacity: 1;
  border-top-color: rgb(232 160 32 / var(--tw-border-opacity, 1));
}
.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}
.bg-amber-400\/10 {
  background-color: rgb(251 191 36 / 0.1);
}
.bg-amber-400\/15 {
  background-color: rgb(251 191 36 / 0.15);
}
.bg-amber-400\/\[0\.03\] {
  background-color: rgb(251 191 36 / 0.03);
}
.bg-amber-400\/\[0\.07\] {
  background-color: rgb(251 191 36 / 0.07);
}
.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-amber-500\/10 {
  background-color: rgb(245 158 11 / 0.1);
}
.bg-amber-500\/15 {
  background-color: rgb(245 158 11 / 0.15);
}
.bg-amber-500\/5 {
  background-color: rgb(245 158 11 / 0.05);
}
.bg-amber-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}
.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}
.bg-cream {
  --tw-bg-opacity: 1;
  background-color: rgb(245 240 232 / var(--tw-bg-opacity, 1));
}
.bg-cream\/10 {
  background-color: rgb(245 240 232 / 0.1);
}
.bg-cream\/15 {
  background-color: rgb(245 240 232 / 0.15);
}
.bg-cream\/20 {
  background-color: rgb(245 240 232 / 0.2);
}
.bg-cream\/35 {
  background-color: rgb(245 240 232 / 0.35);
}
.bg-cream\/45 {
  background-color: rgb(245 240 232 / 0.45);
}
.bg-cream\/5 {
  background-color: rgb(245 240 232 / 0.05);
}
.bg-cream\/\[0\.02\] {
  background-color: rgb(245 240 232 / 0.02);
}
.bg-cream\/\[0\.03\] {
  background-color: rgb(245 240 232 / 0.03);
}
.bg-cyan-400\/20 {
  background-color: rgb(34 211 238 / 0.2);
}
.bg-emerald-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.bg-emerald-400\/10 {
  background-color: rgb(52 211 153 / 0.1);
}
.bg-emerald-400\/15 {
  background-color: rgb(52 211 153 / 0.15);
}
.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500\/10 {
  background-color: rgb(16 185 129 / 0.1);
}
.bg-emerald-500\/15 {
  background-color: rgb(16 185 129 / 0.15);
}
.bg-emerald-500\/20 {
  background-color: rgb(16 185 129 / 0.2);
}
.bg-emerald-500\/25 {
  background-color: rgb(16 185 129 / 0.25);
}
.bg-emerald-500\/5 {
  background-color: rgb(16 185 129 / 0.05);
}
.bg-emerald-500\/\[0\.04\] {
  background-color: rgb(16 185 129 / 0.04);
}
.bg-emerald-500\/\[0\.05\] {
  background-color: rgb(16 185 129 / 0.05);
}
.bg-emerald-500\/\[0\.07\] {
  background-color: rgb(16 185 129 / 0.07);
}
.bg-indigo-500\/15 {
  background-color: rgb(99 102 241 / 0.15);
}
.bg-lapis-500\/10 {
  background-color: rgb(40 85 160 / 0.1);
}
.bg-lapis\/10 {
  background-color: rgb(40 85 160 / 0.1);
}
.bg-lapis\/15 {
  background-color: rgb(40 85 160 / 0.15);
}
.bg-lapis\/20 {
  background-color: rgb(40 85 160 / 0.2);
}
.bg-lapis\/35 {
  background-color: rgb(40 85 160 / 0.35);
}
.bg-light-gold {
  --tw-bg-opacity: 1;
  background-color: rgb(181 138 58 / var(--tw-bg-opacity, 1));
}
.bg-light-gold\/10 {
  background-color: rgb(181 138 58 / 0.1);
}
.bg-light-gold\/15 {
  background-color: rgb(181 138 58 / 0.15);
}
.bg-light-gold\/20 {
  background-color: rgb(181 138 58 / 0.2);
}
.bg-light-gold\/40 {
  background-color: rgb(181 138 58 / 0.4);
}
.bg-light-gold\/45 {
  background-color: rgb(181 138 58 / 0.45);
}
.bg-light-gold\/5 {
  background-color: rgb(181 138 58 / 0.05);
}
.bg-light-gold\/\[0\.04\] {
  background-color: rgb(181 138 58 / 0.04);
}
.bg-light-gold\/\[0\.06\] {
  background-color: rgb(181 138 58 / 0.06);
}
.bg-light-gold\/\[0\.10\] {
  background-color: rgb(181 138 58 / 0.10);
}
.bg-light-line {
  --tw-bg-opacity: 1;
  background-color: rgb(221 214 200 / var(--tw-bg-opacity, 1));
}
.bg-light-subtle {
  --tw-bg-opacity: 1;
  background-color: rgb(241 235 221 / var(--tw-bg-opacity, 1));
}
.bg-light-surface {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-light-surface\/85 {
  background-color: rgb(255 255 255 / 0.85);
}
.bg-orange-500\/15 {
  background-color: rgb(249 115 22 / 0.15);
}
.bg-red-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
}
.bg-red-400\/10 {
  background-color: rgb(248 113 113 / 0.1);
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-500\/10 {
  background-color: rgb(239 68 68 / 0.1);
}
.bg-red-500\/15 {
  background-color: rgb(239 68 68 / 0.15);
}
.bg-red-500\/20 {
  background-color: rgb(239 68 68 / 0.2);
}
.bg-red-500\/5 {
  background-color: rgb(239 68 68 / 0.05);
}
.bg-red-500\/60 {
  background-color: rgb(239 68 68 / 0.6);
}
.bg-rose-400\/10 {
  background-color: rgb(251 113 133 / 0.1);
}
.bg-rose-400\/15 {
  background-color: rgb(251 113 133 / 0.15);
}
.bg-rose-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
}
.bg-rose-500\/10 {
  background-color: rgb(244 63 94 / 0.1);
}
.bg-rose-500\/15 {
  background-color: rgb(244 63 94 / 0.15);
}
.bg-rose-500\/20 {
  background-color: rgb(244 63 94 / 0.2);
}
.bg-rose-500\/5 {
  background-color: rgb(244 63 94 / 0.05);
}
.bg-saffron {
  --tw-bg-opacity: 1;
  background-color: rgb(232 160 32 / var(--tw-bg-opacity, 1));
}
.bg-saffron\/10 {
  background-color: rgb(232 160 32 / 0.1);
}
.bg-saffron\/30 {
  background-color: rgb(232 160 32 / 0.3);
}
.bg-saffron\/40 {
  background-color: rgb(232 160 32 / 0.4);
}
.bg-saffron\/60 {
  background-color: rgb(232 160 32 / 0.6);
}
.bg-saffron\/70 {
  background-color: rgb(232 160 32 / 0.7);
}
.bg-saffron\/90 {
  background-color: rgb(232 160 32 / 0.9);
}
.bg-saffron\/\[0\.04\] {
  background-color: rgb(232 160 32 / 0.04);
}
.bg-saffron\/\[0\.05\] {
  background-color: rgb(232 160 32 / 0.05);
}
.bg-saffron\/\[0\.06\] {
  background-color: rgb(232 160 32 / 0.06);
}
.bg-saffron\/\[0\.07\] {
  background-color: rgb(232 160 32 / 0.07);
}
.bg-saffron\/\[0\.08\] {
  background-color: rgb(232 160 32 / 0.08);
}
.bg-saffron\/\[0\.09\] {
  background-color: rgb(232 160 32 / 0.09);
}
.bg-sky-400\/10 {
  background-color: rgb(56 189 248 / 0.1);
}
.bg-sky-400\/15 {
  background-color: rgb(56 189 248 / 0.15);
}
.bg-sky-400\/\[0\.07\] {
  background-color: rgb(56 189 248 / 0.07);
}
.bg-sky-500\/10 {
  background-color: rgb(14 165 233 / 0.1);
}
.bg-sky-500\/20 {
  background-color: rgb(14 165 233 / 0.2);
}
.bg-slate-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}
.bg-state-danger\/10 {
  background-color: rgb(163 52 38 / 0.1);
}
.bg-state-danger\/\[0\.12\] {
  background-color: rgb(163 52 38 / 0.12);
}
.bg-state-info {
  --tw-bg-opacity: 1;
  background-color: rgb(40 85 160 / var(--tw-bg-opacity, 1));
}
.bg-state-info\/10 {
  background-color: rgb(40 85 160 / 0.1);
}
.bg-state-info\/15 {
  background-color: rgb(40 85 160 / 0.15);
}
.bg-state-info\/20 {
  background-color: rgb(40 85 160 / 0.2);
}
.bg-state-info\/25 {
  background-color: rgb(40 85 160 / 0.25);
}
.bg-state-success\/10 {
  background-color: rgb(53 111 80 / 0.1);
}
.bg-state-success\/\[0\.08\] {
  background-color: rgb(53 111 80 / 0.08);
}
.bg-state-success\/\[0\.12\] {
  background-color: rgb(53 111 80 / 0.12);
}
.bg-transparent {
  background-color: transparent;
}
.bg-violet-500\/20 {
  background-color: rgb(139 92 246 / 0.2);
}
.bg-void {
  --tw-bg-opacity: 1;
  background-color: rgb(10 19 14 / var(--tw-bg-opacity, 1));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/\[0\.02\] {
  background-color: rgb(255 255 255 / 0.02);
}
.bg-white\/\[0\.03\] {
  background-color: rgb(255 255 255 / 0.03);
}
.bg-yellow-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1));
}
.bg-yellow-400\/10 {
  background-color: rgb(250 204 21 / 0.1);
}
.bg-yellow-400\/15 {
  background-color: rgb(250 204 21 / 0.15);
}
.bg-yellow-500\/15 {
  background-color: rgb(234 179 8 / 0.15);
}
.bg-yellow-500\/20 {
  background-color: rgb(234 179 8 / 0.2);
}
.bg-gradient-gold {
  background-image: linear-gradient(135deg, #e8a020, #fdd87a);
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-l {
  background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-cyan-400\/10 {
  --tw-gradient-from: rgb(34 211 238 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 211 238 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-500\/5 {
  --tw-gradient-from: rgb(16 185 129 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-emerald-900\/35 {
  --tw-gradient-from: rgb(6 78 59 / 0.35) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(6 78 59 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-lapis-900\/55 {
  --tw-gradient-from: rgb(7 23 63 / 0.55) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(7 23 63 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-light-bg {
  --tw-gradient-from: #F8F5EC var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 245 236 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-light-gold {
  --tw-gradient-from: #B58A3A var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(181 138 58 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-light-gold\/50 {
  --tw-gradient-from: rgb(181 138 58 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(181 138 58 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-500\/5 {
  --tw-gradient-from: rgb(239 68 68 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-saffron {
  --tw-gradient-from: #e8a020 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(232 160 32 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-saffron-900\/35 {
  --tw-gradient-from: rgb(92 55 6 / 0.35) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(92 55 6 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-saffron\/10 {
  --tw-gradient-from: rgb(232 160 32 / 0.1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(232 160 32 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-saffron\/15 {
  --tw-gradient-from: rgb(232 160 32 / 0.15) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(232 160 32 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-saffron\/5 {
  --tw-gradient-from: rgb(232 160 32 / 0.05) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(232 160 32 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-saffron\/\[0\.04\] {
  --tw-gradient-from: rgb(232 160 32 / 0.04) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(232 160 32 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-saffron\/\[0\.06\] {
  --tw-gradient-from: rgb(232 160 32 / 0.06) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(232 160 32 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-state-info {
  --tw-gradient-from: #2855A0 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(40 85 160 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-state-info\/\[0\.07\] {
  --tw-gradient-from: rgb(40 85 160 / 0.07) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(40 85 160 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-transparent {
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-void-700 {
  --tw-gradient-from: #1c4230 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(28 66 48 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-void-900 {
  --tw-gradient-from: #0a130e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(10 19 14 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-void-900\/70 {
  --tw-gradient-from: rgb(10 19 14 / 0.7) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(10 19 14 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-cyan-400\/5 {
  --tw-gradient-to: rgb(34 211 238 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(34 211 238 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-lapis-900\/30 {
  --tw-gradient-to: rgb(7 23 63 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(7 23 63 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-lapis\/15 {
  --tw-gradient-to: rgb(40 85 160 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(40 85 160 / 0.15) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-light-gold {
  --tw-gradient-to: rgb(181 138 58 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #B58A3A var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-light-gold-ink {
  --tw-gradient-to: rgb(132 101 42 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #84652A var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-light-gold\/30 {
  --tw-gradient-to: rgb(181 138 58 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(181 138 58 / 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-light-gold\/\[0\.06\] {
  --tw-gradient-to: rgb(181 138 58 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(181 138 58 / 0.06) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-light-subtle {
  --tw-gradient-to: rgb(241 235 221 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #F1EBDD var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-saffron-300 {
  --tw-gradient-to: rgb(252 193 62 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fcc13e var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-saffron\/5 {
  --tw-gradient-to: rgb(232 160 32 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(232 160 32 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-state-info\/10 {
  --tw-gradient-to: rgb(40 85 160 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(40 85 160 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-void-800 {
  --tw-gradient-to: rgb(20 46 34 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #142e22 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-lapis\/\[0\.04\] {
  --tw-gradient-to: rgb(40 85 160 / 0.04) var(--tw-gradient-to-position);
}
.to-light-bg {
  --tw-gradient-to: #F8F5EC var(--tw-gradient-to-position);
}
.to-light-gold {
  --tw-gradient-to: #B58A3A var(--tw-gradient-to-position);
}
.to-light-gold-ink {
  --tw-gradient-to: #84652A var(--tw-gradient-to-position);
}
.to-light-gold\/\[0\.06\] {
  --tw-gradient-to: rgb(181 138 58 / 0.06) var(--tw-gradient-to-position);
}
.to-saffron-300 {
  --tw-gradient-to: #fcc13e var(--tw-gradient-to-position);
}
.to-saffron-600 {
  --tw-gradient-to: #cc8209 var(--tw-gradient-to-position);
}
.to-saffron\/10 {
  --tw-gradient-to: rgb(232 160 32 / 0.1) var(--tw-gradient-to-position);
}
.to-saffron\/45 {
  --tw-gradient-to: rgb(232 160 32 / 0.45) var(--tw-gradient-to-position);
}
.to-saffron\/5 {
  --tw-gradient-to: rgb(232 160 32 / 0.05) var(--tw-gradient-to-position);
}
.to-saffron\/\[0\.05\] {
  --tw-gradient-to: rgb(232 160 32 / 0.05) var(--tw-gradient-to-position);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.to-void {
  --tw-gradient-to: #0a130e var(--tw-gradient-to-position);
}
.to-void-900 {
  --tw-gradient-to: #0a130e var(--tw-gradient-to-position);
}
.to-void-900\/40 {
  --tw-gradient-to: rgb(10 19 14 / 0.4) var(--tw-gradient-to-position);
}
.bg-cover {
  background-size: cover;
}
.bg-clip-text {
  -webkit-background-clip: text;
          background-clip: text;
}
.bg-center {
  background-position: center;
}
.fill-light-gold {
  fill: #B58A3A;
}
.fill-light-gold\/40 {
  fill: rgb(181 138 58 / 0.4);
}
.fill-light-ink {
  fill: #17233C;
}
.fill-saffron {
  fill: #e8a020;
}
.fill-saffron\/50 {
  fill: rgb(232 160 32 / 0.5);
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.object-fill {
  -o-object-fit: fill;
     object-fit: fill;
}
.p-0 {
  padding: 0px;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-12 {
  padding: 3rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-3\.5 {
  padding: 0.875rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-7 {
  padding: 1.75rem;
}
.p-8 {
  padding: 2rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.px-12 {
  padding-left: 3rem;
  padding-right: 3rem;
}
.px-16 {
  padding-left: 4rem;
  padding-right: 4rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-10 {
  padding-bottom: 2.5rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pb-24 {
  padding-bottom: 6rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pl-1 {
  padding-left: 0.25rem;
}
.pl-10 {
  padding-left: 2.5rem;
}
.pl-11 {
  padding-left: 2.75rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-11 {
  padding-right: 2.75rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pr-9 {
  padding-right: 2.25rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-16 {
  padding-top: 4rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-20 {
  padding-top: 5rem;
}
.pt-24 {
  padding-top: 6rem;
}
.pt-28 {
  padding-top: 7rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-8 {
  padding-top: 2rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-top {
  vertical-align: top;
}
.align-middle {
  vertical-align: middle;
}
.align-bottom {
  vertical-align: bottom;
}
.font-body {
  font-family: Crimson Pro, Georgia, serif;
}
.font-display {
  font-family: Cinzel, Georgia, serif;
}
.font-mono {
  font-family: JetBrains Mono, monospace;
}
.font-ui {
  font-family: DM Sans, system-ui, sans-serif;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-2xs {
  font-size: 0.625rem;
  line-height: 0.875rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}
.text-8xl {
  font-size: 6rem;
  line-height: 1;
}
.text-\[0\.62rem\] {
  font-size: 0.62rem;
}
.text-\[0\.65rem\] {
  font-size: 0.65rem;
}
.text-\[0\.6rem\] {
  font-size: 0.6rem;
}
.text-\[0\.7rem\] {
  font-size: 0.7rem;
}
.text-\[1\.7rem\] {
  font-size: 1.7rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.italic {
  font-style: italic;
}
.ordinal {
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.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);
}
.leading-5 {
  line-height: 1.25rem;
}
.leading-\[1\.08\] {
  line-height: 1.08;
}
.leading-\[1\.15\] {
  line-height: 1.15;
}
.leading-\[1\.1\] {
  line-height: 1.1;
}
.leading-\[1\.35\] {
  line-height: 1.35;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.15em\] {
  letter-spacing: 0.15em;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-\[0\.22em\] {
  letter-spacing: 0.22em;
}
.tracking-\[0\.25em\] {
  letter-spacing: 0.25em;
}
.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.tracking-\[0\.3em\] {
  letter-spacing: 0.3em;
}
.tracking-\[0\.42em\] {
  letter-spacing: 0.42em;
}
.tracking-\[0\.85em\] {
  letter-spacing: 0.85em;
}
.tracking-normal {
  letter-spacing: 0em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-amber-200 {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.text-amber-300 {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.text-amber-300\/90 {
  color: rgb(252 211 77 / 0.9);
}
.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-amber-400\/80 {
  color: rgb(251 191 36 / 0.8);
}
.text-amber-400\/90 {
  color: rgb(251 191 36 / 0.9);
}
.text-cream {
  --tw-text-opacity: 1;
  color: rgb(245 240 232 / var(--tw-text-opacity, 1));
}
.text-cream\/50 {
  color: rgb(245 240 232 / 0.5);
}
.text-cream\/80 {
  color: rgb(245 240 232 / 0.8);
}
.text-cream\/90 {
  color: rgb(245 240 232 / 0.9);
}
.text-cyan-300 {
  --tw-text-opacity: 1;
  color: rgb(103 232 249 / var(--tw-text-opacity, 1));
}
.text-emerald-100 {
  --tw-text-opacity: 1;
  color: rgb(209 250 229 / var(--tw-text-opacity, 1));
}
.text-emerald-200 {
  --tw-text-opacity: 1;
  color: rgb(167 243 208 / var(--tw-text-opacity, 1));
}
.text-emerald-300 {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}
.text-emerald-300\/70 {
  color: rgb(110 231 183 / 0.7);
}
.text-emerald-300\/80 {
  color: rgb(110 231 183 / 0.8);
}
.text-emerald-300\/90 {
  color: rgb(110 231 183 / 0.9);
}
.text-emerald-400 {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.text-emerald-400\/70 {
  color: rgb(52 211 153 / 0.7);
}
.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}
.text-lapis-200 {
  --tw-text-opacity: 1;
  color: rgb(171 193 234 / var(--tw-text-opacity, 1));
}
.text-lapis-300 {
  --tw-text-opacity: 1;
  color: rgb(127 158 220 / var(--tw-text-opacity, 1));
}
.text-lapis-300\/80 {
  color: rgb(127 158 220 / 0.8);
}
.text-light-gold-ink {
  --tw-text-opacity: 1;
  color: rgb(132 101 42 / var(--tw-text-opacity, 1));
}
.text-light-gold-ink\/0 {
  color: rgb(132 101 42 / 0);
}
.text-light-ink {
  --tw-text-opacity: 1;
  color: rgb(23 35 60 / var(--tw-text-opacity, 1));
}
.text-light-ink\/45 {
  color: rgb(23 35 60 / 0.45);
}
.text-light-ink\/70 {
  color: rgb(23 35 60 / 0.7);
}
.text-light-muted {
  --tw-text-opacity: 1;
  color: rgb(89 98 115 / var(--tw-text-opacity, 1));
}
.text-orange-400 {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.text-red-200 {
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}
.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-red-300\/70 {
  color: rgb(252 165 165 / 0.7);
}
.text-red-300\/80 {
  color: rgb(252 165 165 / 0.8);
}
.text-red-300\/85 {
  color: rgb(252 165 165 / 0.85);
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-400\/70 {
  color: rgb(248 113 113 / 0.7);
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-rose-200 {
  --tw-text-opacity: 1;
  color: rgb(254 205 211 / var(--tw-text-opacity, 1));
}
.text-rose-300 {
  --tw-text-opacity: 1;
  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}
.text-rose-300\/70 {
  color: rgb(253 164 175 / 0.7);
}
.text-rose-300\/80 {
  color: rgb(253 164 175 / 0.8);
}
.text-rose-300\/90 {
  color: rgb(253 164 175 / 0.9);
}
.text-rose-400 {
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}
.text-rose-400\/80 {
  color: rgb(251 113 133 / 0.8);
}
.text-saffron {
  --tw-text-opacity: 1;
  color: rgb(232 160 32 / var(--tw-text-opacity, 1));
}
.text-sky-200 {
  --tw-text-opacity: 1;
  color: rgb(186 230 253 / var(--tw-text-opacity, 1));
}
.text-sky-300 {
  --tw-text-opacity: 1;
  color: rgb(125 211 252 / var(--tw-text-opacity, 1));
}
.text-sky-400 {
  --tw-text-opacity: 1;
  color: rgb(56 189 248 / var(--tw-text-opacity, 1));
}
.text-state-danger {
  --tw-text-opacity: 1;
  color: rgb(163 52 38 / var(--tw-text-opacity, 1));
}
.text-state-info {
  --tw-text-opacity: 1;
  color: rgb(40 85 160 / var(--tw-text-opacity, 1));
}
.text-state-success {
  --tw-text-opacity: 1;
  color: rgb(53 111 80 / var(--tw-text-opacity, 1));
}
.text-transparent {
  color: transparent;
}
.text-violet-100 {
  --tw-text-opacity: 1;
  color: rgb(237 233 254 / var(--tw-text-opacity, 1));
}
.text-violet-200 {
  --tw-text-opacity: 1;
  color: rgb(221 214 254 / var(--tw-text-opacity, 1));
}
.text-void {
  --tw-text-opacity: 1;
  color: rgb(10 19 14 / var(--tw-text-opacity, 1));
}
.text-void-900 {
  --tw-text-opacity: 1;
  color: rgb(10 19 14 / var(--tw-text-opacity, 1));
}
.text-yellow-100 {
  --tw-text-opacity: 1;
  color: rgb(254 249 195 / var(--tw-text-opacity, 1));
}
.text-yellow-200 {
  --tw-text-opacity: 1;
  color: rgb(254 240 138 / var(--tw-text-opacity, 1));
}
.text-yellow-200\/70 {
  color: rgb(254 240 138 / 0.7);
}
.text-yellow-300 {
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.line-through {
  text-decoration-line: line-through;
}
.decoration-sky-400\/50 {
  text-decoration-color: rgb(56 189 248 / 0.5);
}
.decoration-dotted {
  text-decoration-style: dotted;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.accent-\[color\:var\(--saffron\2c \#e8a020\)\] {
  accent-color: var(--saffron,#e8a020);
}
.accent-amber-400 {
  accent-color: #fbbf24;
}
.accent-emerald-500 {
  accent-color: #10b981;
}
.accent-saffron {
  accent-color: #e8a020;
}
.opacity-0 {
  opacity: 0;
}
.opacity-20 {
  opacity: 0.2;
}
.opacity-25 {
  opacity: 0.25;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-5 {
  opacity: 0.05;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-80 {
  opacity: 0.8;
}
.opacity-95 {
  opacity: 0.95;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_2px_rgba\(16\2c 185\2c 129\2c 0\.15\)\] {
  --tw-shadow: 0 0 0 2px rgba(16,185,129,0.15);
  --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-card-hover {
  --tw-shadow: 0 8px 40px rgba(8, 12, 24, 0.6);
  --tw-shadow-colored: 0 8px 40px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-glow-gold {
  --tw-shadow: 0 0 20px rgba(232, 160, 32, 0.3);
  --tw-shadow-colored: 0 0 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-black\/30 {
  --tw-shadow-color: rgb(0 0 0 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-void-900\/60 {
  --tw-shadow-color: rgb(10 19 14 / 0.6);
  --tw-shadow: var(--tw-shadow-colored);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-saffron\/20 {
  --tw-ring-color: rgb(232 160 32 / 0.2);
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-2xl {
  --tw-blur: blur(40px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-3xl {
  --tw-blur: blur(64px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[100px\] {
  --tw-blur: blur(100px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[120px\] {
  --tw-blur: blur(120px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[140px\] {
  --tw-blur: blur(140px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[80px\] {
  --tw-blur: blur(80px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[90px\] {
  --tw-blur: blur(90px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-xl {
  --tw-blur: blur(24px);
  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: 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);
}
.invert {
  --tw-invert: invert(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);
  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(4px);
  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, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.duration-700 {
  transition-duration: 700ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

/* ── Components ───────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────
   LESSON CONTENT — "Celestial Manuscript" typography
   ─────────────────────────────────────────────────────────────────────
   Editorial typesetting for sustained reading of 800–1500 word lessons.
   Used by Learn.jsx, CourseDetail.jsx, BlogPost.jsx — anywhere
   long-form authored HTML renders. Designed against the dark void
   background with saffron as a punctuation accent.

   Aesthetic anchors:
   - Drop caps after every h2 (Cinzel, saffron)
   - Marginalia numerals for ordered lists (saffron, Cinzel, with rule)
   - Asterism (✦) bullets for unordered lists
   - h2 centred with three-asterisk crown; h3 with a diamond marker
   - Blockquote with left rule, italic body, decorative quotation glyph
   - Tables with saffron header rule (no boxes), hover row highlight
   - Sanskrit emphasis (<em>) in saffron with subtle tracking
   ──────────────────────────────────────────────────────────────────── */

.lesson-content {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.78;
  color: var(--ls-ink);
  font-feature-settings: 'kern', 'liga', 'onum';
}

.lesson-content > * + * { margin-top: 1.5rem; }
.lesson-content > * + h2 { margin-top: 4.25rem; }
.lesson-content > * + h3 { margin-top: 3rem; }
.lesson-content > h2:first-child,
.lesson-content > h3:first-child,
.lesson-content > p:first-child { margin-top: 0; }

/* ── Drop cap on first paragraph after an h2 ───────────────────────── */
.lesson-content h2 + p::first-letter {
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  font-size: 3.75rem;
  line-height: 0.85;
  float: left;
  margin: 0.35rem 0.625rem 0 -0.125rem;
  color: var(--ls-accent);
  text-shadow: 0 0 24px rgba(232, 160, 32, 0.25);
}

/* ── Headings ──────────────────────────────────────────────────────── */

.lesson-content h2 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.875rem;
  line-height: 1.2;
  color: var(--ls-ink-strong);
  letter-spacing: 0.005em;
  text-align: center;
  font-weight: 500;
  position: relative;
}

.lesson-content h2::before {
  content: '✦  ✦  ✦';
  display: block;
  text-align: center;
  color: var(--ls-rule);
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  margin-bottom: 1.25rem;
  font-weight: normal;
}

.lesson-content h3 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--ls-accent);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.lesson-content h3::before {
  content: '◆';
  flex: 0 0 auto;
  color: var(--ls-rule);
  font-size: 0.55em;
  letter-spacing: normal;
  transform: translateY(-0.2em);
}

.lesson-content h4 {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.875rem;
  color: var(--ls-ink-strong);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ── Body paragraphs ───────────────────────────────────────────────── */

.lesson-content p {
  color: var(--ls-ink);
}

.lesson-content strong {
  color: var(--ls-ink-strong);
  font-weight: 600;
}

.lesson-content em {
  color: var(--ls-accent-warm);
  font-style: italic;
  letter-spacing: 0.015em;
  font-feature-settings: 'kern', 'liga';
}

/* ── Unordered lists — saffron asterisks ───────────────────────────── */

.lesson-content ul {
  list-style: none;
  padding-left: 0;
}

.lesson-content ul > li {
  position: relative;
  padding-left: 1.875rem;
  margin-top: 0.875rem;
  color: var(--ls-ink);
}

.lesson-content ul > li:first-child { margin-top: 0; }

.lesson-content ul > li::before {
  content: '✦';
  position: absolute;
  left: 0.125rem;
  top: 0.15em;
  color: var(--ls-accent);
  font-size: 0.78em;
}

/* ── Ordered lists — marginalia numerals ───────────────────────────── */

.lesson-content ol {
  list-style: none;
  padding-left: 0;
  counter-reset: lc-ol;
}

.lesson-content ol > li {
  position: relative;
  padding-left: 3.25rem;
  margin-top: 1.25rem;
  min-height: 2rem;
  counter-increment: lc-ol;
  color: var(--ls-ink);
}

.lesson-content ol > li:first-child { margin-top: 0; }

.lesson-content ol > li::before {
  content: counter(lc-ol);
  position: absolute;
  left: 0;
  top: -0.1em;
  width: 2.5rem;
  text-align: right;
  padding-right: 0.75rem;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ls-accent);
  line-height: 1;
  border-right: 1px solid var(--ls-rule-faint);
  font-variant-numeric: lining-nums;
}

/* Nested lists — quieter treatment */
.lesson-content li > ul,
.lesson-content li > ol {
  margin-top: 0.625rem;
  margin-bottom: 0.25rem;
}

.lesson-content li > ul > li::before {
  font-size: 0.65em;
  color: var(--ls-rule);
}

/* ── Blockquote — substantial pull-quote ───────────────────────────── */

.lesson-content blockquote {
  position: relative;
  margin: 2.5rem 0;
  padding: 1.75rem 2rem 1.75rem 2.75rem;
  border-left: 3px solid var(--ls-accent);
  background: linear-gradient(
    90deg,
    rgba(232, 160, 32, 0.07) 0%,
    rgba(232, 160, 32, 0.015) 60%,
    rgba(232, 160, 32, 0) 100%
  );
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--ls-ink-strong);
}

.lesson-content blockquote::before {
  content: '\201C';
  position: absolute;
  left: 0.625rem;
  top: -0.875rem;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 4.5rem;
  color: var(--ls-rule-faint);
  line-height: 1;
  font-style: normal;
  pointer-events: none;
}

.lesson-content blockquote > * + * { margin-top: 0.875rem; }
.lesson-content blockquote em { color: var(--ls-accent-warm); }

/* ── Tables — observatory-log style ────────────────────────────────── */

.lesson-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2.25rem 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.925rem;
  line-height: 1.55;
}

.lesson-content thead { border-bottom: 2px solid var(--ls-rule); }
/* Some authored HTML lacks <thead> — first row plays that role. */
.lesson-content table > tr:first-child,
.lesson-content tbody > tr:first-child:not(:only-child) {
  border-bottom: 2px solid var(--ls-rule);
}

.lesson-content th {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ls-accent);
  font-weight: 500;
  text-align: left;
  padding: 0.9rem 1rem;
  vertical-align: bottom;
}

.lesson-content td {
  padding: 0.825rem 1rem;
  color: var(--ls-ink-strong);
  border-bottom: 1px solid var(--ls-surface);
  vertical-align: top;
}

.lesson-content tr:last-child td { border-bottom: none; }
.lesson-content tbody tr { transition: background-color 0.15s ease; }
.lesson-content tbody tr:hover td { background: rgba(232, 160, 32, 0.04); }

.lesson-content td:first-child {
  color: var(--ls-ink-strong);
  font-weight: 500;
}

/* ── Links ─────────────────────────────────────────────────────────── */

.lesson-content a {
  color: var(--ls-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 160, 32, 0.35);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.lesson-content a:hover {
  color: var(--ls-accent-warm);
  border-bottom-color: var(--ls-accent-warm);
}

/* ── Code (rare in lessons but handle it) ──────────────────────────── */

.lesson-content code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.86em;
  padding: 0.1em 0.4em;
  background: rgba(232, 160, 32, 0.08);
  border: 1px solid rgba(232, 160, 32, 0.18);
  border-radius: 0.25rem;
  color: var(--ls-accent-warm);
}

.lesson-content pre {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--ls-code-bg);
  border: 1px solid var(--ls-surface-line);
  border-radius: 0.5rem;
  overflow-x: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--ls-ink-strong);
}

.lesson-content pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* ── Ornamental horizontal rule ────────────────────────────────────── */

.lesson-content hr {
  border: none;
  margin: 3.5rem auto;
  text-align: center;
  height: auto;
}

.lesson-content hr::after {
  content: '✦  ✧  ✦';
  display: inline-block;
  color: rgba(232, 160, 32, 0.45);
  font-size: 0.75rem;
  letter-spacing: 0.85em;
  font-family: 'Cinzel', Georgia, serif;
}

/* ── Images (if any in lessons) ────────────────────────────────────── */

.lesson-content img {
  margin: 2rem auto;
  border-radius: 0.5rem;
  border: 1px solid var(--ls-surface-line);
  max-width: 100%;
  height: auto;
  display: block;
}

.lesson-content figure { margin: 2rem 0; }
.lesson-content figure img { margin: 0 auto; }
.lesson-content figcaption {
  text-align: center;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.8rem;
  color: var(--ls-ink-soft);
  margin-top: 0.75rem;
  letter-spacing: 0.04em;
}

/* ── Definition lists ──────────────────────────────────────────────── */

.lesson-content dl > * + * { margin-top: 0.75rem; }
.lesson-content dt {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.85rem;
  color: var(--ls-accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.lesson-content dd { padding-left: 1.5rem; color: var(--ls-ink); }

/* ── Responsive: mobile rebalance ──────────────────────────────────── */

@media (max-width: 640px) {
  .lesson-content { font-size: 1rem; line-height: 1.72; }
  .lesson-content h2 { font-size: 1.5rem; }
  .lesson-content > * + h2 { margin-top: 3rem; }
  .lesson-content > * + h3 { margin-top: 2.25rem; }
  .lesson-content h2 + p::first-letter { font-size: 2.75rem; }
  .lesson-content ol > li { padding-left: 2.5rem; }
  .lesson-content ol > li::before {
    font-size: 1.25rem;
    width: 1.875rem;
    padding-right: 0.625rem;
  }
  .lesson-content blockquote {
    padding: 1.25rem 1.25rem 1.25rem 1.75rem;
    font-size: 1.05rem;
  }
  .lesson-content blockquote::before {
    font-size: 3rem;
    top: -0.6rem;
    left: 0.4rem;
  }
  .lesson-content table { font-size: 0.85rem; }
  .lesson-content th, .lesson-content td { padding: 0.65rem 0.625rem; }
}

/* ── Tamil overrides ───────────────────────────────────────────────── */

html[lang="ta"] .lesson-content {
  font-family: 'Noto Sans Tamil', 'Latha', system-ui, sans-serif;
  line-height: 1.88;
}
html[lang="ta"] .lesson-content h2,
html[lang="ta"] .lesson-content h3,
html[lang="ta"] .lesson-content h4 {
  font-family: 'Noto Sans Tamil', 'Latha', system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
html[lang="ta"] .lesson-content h3 { text-transform: none; }
html[lang="ta"] .lesson-content h2 + p::first-letter {
  font-family: 'Noto Sans Tamil', 'Latha', system-ui, sans-serif;
  font-size: 2.5rem;
  font-weight: 500;
}
html[lang="ta"] .lesson-content em {
  font-style: normal; /* Tamil italic looks slanted/wrong */
  color: var(--ls-accent-warm);
}
html[lang="ta"] .lesson-content ol > li::before {
  font-family: 'Noto Sans Tamil', system-ui, sans-serif;
  font-size: 1.25rem;
}

/* ── Glossary tooltip-decorated terms in lesson body ───────────────────── */
.lesson-content .glossary-term {
  border-bottom: 1px dotted var(--ls-rule);
  cursor: help;
  transition: border-color 0.15s, color 0.15s;
}
.lesson-content .glossary-term:hover {
  border-bottom-color: var(--ls-accent);
  color: var(--ls-accent);
}

/* ── Classroom callouts ────────────────────────────────────────────────
   Authored inline in lesson HTML; no component needed, DOMPurify passes
   <aside class> and data-* through untouched:

     <aside class="callout callout--try" data-title="Try this yourself">
       <p>…</p>
     </aside>

   Four kinds, each earning its own colour from the existing palette:
     note    lapis    — an aside, context the main line didn't need
     tip     saffron  — a practical shortcut
     try     green    — something the reader does on their own chart
     caution clay     — the "where this can mislead" guard every lesson ends on
   ------------------------------------------------------------------- */

.lesson-content .callout {
  --callout-accent: #2855a0;
  --callout-tint: rgba(40, 85, 160, 0.08);
  border: 1px solid color-mix(in srgb, var(--callout-accent) 40%, transparent);
  background: var(--callout-tint);
  border-radius: 0.75rem;
  padding: 1.375rem 1.5rem;
}

.lesson-content .callout > * + * { margin-top: 0.875rem; }
.lesson-content .callout > :first-child { margin-top: 0; }
.lesson-content .callout > :last-child { margin-bottom: 0; }

/* The title rides on the data attribute so the markup stays one element. */
.lesson-content .callout[data-title]::before {
  content: attr(data-title);
  display: block;
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--callout-accent);
  margin-bottom: 0.875rem;
}

.lesson-content .callout--note    { --callout-accent: #7f9edc; --callout-tint: rgba(40, 85, 160, 0.10); }
.lesson-content .callout--tip     { --callout-accent: var(--ls-accent); --callout-tint: rgba(232, 160, 32, 0.07); }
.lesson-content .callout--try     { --callout-accent: #79a98e; --callout-tint: rgba(79, 138, 106, 0.09); }
.lesson-content .callout--caution { --callout-accent: #d98368; --callout-tint: rgba(180, 85, 58, 0.09); }

/* ⚠ The callout accents are TEXT colours (they paint the title) and were picked to sit on a
   near-black ground — #7f9edc, #79a98e and #d98368 are all pale. On cream they drop to roughly
   2:1 and the title stops being readable. The tints are fine either way; only the accents move.
   Deepened here rather than in the token block so the dark values stay exactly as authored. */
.theme-light .lesson-content .callout          { --callout-accent: #1F4A8F; --callout-tint: rgba(40, 85, 160, 0.06); }
.theme-light .lesson-content .callout--note    { --callout-accent: #1F4A8F; --callout-tint: rgba(40, 85, 160, 0.07); }
.theme-light .lesson-content .callout--try     { --callout-accent: #2F6B4F; --callout-tint: rgba(79, 138, 106, 0.09); }
.theme-light .lesson-content .callout--caution { --callout-accent: #9C3D22; --callout-tint: rgba(180, 85, 58, 0.08); }

/* A drop cap inside a callout collides with the title rule above it. */
.lesson-content .callout h2 + p::first-letter { all: unset; }

@media (max-width: 640px) {
  .lesson-content .callout { padding: 1.125rem 1.125rem; border-radius: 0.625rem; }
}

/* ── Read-along highlight (audio player) ─────────────────────────────────── */
/* The block currently being spoken by the "Listen" player. Works on any block
   element (p, h1–h6, li, tr) the player maps a spoken chunk to. */
.lesson-content .tts-active,
.lesson-content tr.tts-active {
  background: rgba(245, 158, 11, 0.14);
  box-shadow: inset 3px 0 0 #f59e0b;
  border-radius: 4px;
  transition: background 0.2s ease;
}
.lesson-content .tts-active { scroll-margin: 40vh 0; }
.hover\:nav-hover-bg:hover {
  background-color: rgb(255 255 255 / 0.05);
}
.theme-light .hover\:nav-hover-bg:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(241 235 221 / var(--tw-bg-opacity, 1));
}
.first\:mt-0:first-child {
  margin-top: 0px;
}
.first\:border-t-0:first-child {
  border-top-width: 0px;
}
.first\:pt-0:first-child {
  padding-top: 0px;
}
.last\:border-0:last-child {
  border-width: 0px;
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.even\:bg-white\/\[0\.03\]:nth-child(even) {
  background-color: rgb(255 255 255 / 0.03);
}
.hover\:border-cream\/30:hover {
  border-color: rgb(245 240 232 / 0.3);
}
.hover\:border-cream\/40:hover {
  border-color: rgb(245 240 232 / 0.4);
}
.hover\:border-cyan-400\/55:hover {
  border-color: rgb(34 211 238 / 0.55);
}
.hover\:border-emerald-500\/40:hover {
  border-color: rgb(16 185 129 / 0.4);
}
.hover\:border-lapis\/40:hover {
  border-color: rgb(40 85 160 / 0.4);
}
.hover\:border-light-gold\/30:hover {
  border-color: rgb(181 138 58 / 0.3);
}
.hover\:border-light-gold\/40:hover {
  border-color: rgb(181 138 58 / 0.4);
}
.hover\:border-light-gold\/50:hover {
  border-color: rgb(181 138 58 / 0.5);
}
.hover\:border-light-gold\/60:hover {
  border-color: rgb(181 138 58 / 0.6);
}
.hover\:border-red-400\/40:hover {
  border-color: rgb(248 113 113 / 0.4);
}
.hover\:border-red-500\/50:hover {
  border-color: rgb(239 68 68 / 0.5);
}
.hover\:border-rose-500\/40:hover {
  border-color: rgb(244 63 94 / 0.4);
}
.hover\:border-state-info\/50:hover {
  border-color: rgb(40 85 160 / 0.5);
}
.hover\:bg-amber-400\/10:hover {
  background-color: rgb(251 191 36 / 0.1);
}
.hover\:bg-amber-500\/15:hover {
  background-color: rgb(245 158 11 / 0.15);
}
.hover\:bg-cream\/5:hover {
  background-color: rgb(245 240 232 / 0.05);
}
.hover\:bg-cream\/\[0\.02\]:hover {
  background-color: rgb(245 240 232 / 0.02);
}
.hover\:bg-emerald-500\/10:hover {
  background-color: rgb(16 185 129 / 0.1);
}
.hover\:bg-emerald-500\/15:hover {
  background-color: rgb(16 185 129 / 0.15);
}
.hover\:bg-lapis-500\/15:hover {
  background-color: rgb(40 85 160 / 0.15);
}
.hover\:bg-light-gold\/10:hover {
  background-color: rgb(181 138 58 / 0.1);
}
.hover\:bg-red-500\/10:hover {
  background-color: rgb(239 68 68 / 0.1);
}
.hover\:bg-red-500\/25:hover {
  background-color: rgb(239 68 68 / 0.25);
}
.hover\:bg-red-500\/30:hover {
  background-color: rgb(239 68 68 / 0.3);
}
.hover\:bg-red-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.hover\:bg-rose-500\/15:hover {
  background-color: rgb(244 63 94 / 0.15);
}
.hover\:bg-saffron:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(232 160 32 / var(--tw-bg-opacity, 1));
}
.hover\:bg-saffron-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(252 193 62 / var(--tw-bg-opacity, 1));
}
.hover\:bg-saffron\/\[0\.05\]:hover {
  background-color: rgb(232 160 32 / 0.05);
}
.hover\:bg-void-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(20 46 34 / var(--tw-bg-opacity, 1));
}
.hover\:bg-void-800\/30:hover {
  background-color: rgb(20 46 34 / 0.3);
}
.hover\:bg-void-800\/60:hover {
  background-color: rgb(20 46 34 / 0.6);
}
.hover\:bg-void-900\/60:hover {
  background-color: rgb(10 19 14 / 0.6);
}
.hover\:bg-void\/25:hover {
  background-color: rgb(10 19 14 / 0.25);
}
.hover\:bg-white\/\[0\.02\]:hover {
  background-color: rgb(255 255 255 / 0.02);
}
.hover\:bg-white\/\[0\.03\]:hover {
  background-color: rgb(255 255 255 / 0.03);
}
.hover\:bg-yellow-400\/25:hover {
  background-color: rgb(250 204 21 / 0.25);
}
.hover\:bg-yellow-500\/30:hover {
  background-color: rgb(234 179 8 / 0.3);
}
.hover\:text-cream-200:hover {
  --tw-text-opacity: 1;
  color: rgb(245 240 232 / var(--tw-text-opacity, 1));
}
.hover\:text-emerald-200:hover {
  --tw-text-opacity: 1;
  color: rgb(167 243 208 / var(--tw-text-opacity, 1));
}
.hover\:text-light-ink:hover {
  --tw-text-opacity: 1;
  color: rgb(23 35 60 / var(--tw-text-opacity, 1));
}
.hover\:text-red-200:hover {
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}
.hover\:text-red-300:hover {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.hover\:text-red-400:hover {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.hover\:text-rose-300:hover {
  --tw-text-opacity: 1;
  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}
.hover\:text-saffron-300:hover {
  --tw-text-opacity: 1;
  color: rgb(252 193 62 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:shadow-glow-gold:hover {
  --tw-shadow: 0 0 20px rgba(232, 160, 32, 0.3);
  --tw-shadow-colored: 0 0 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:border-saffron:focus {
  --tw-border-opacity: 1;
  border-color: rgb(232 160 32 / var(--tw-border-opacity, 1));
}
.focus\:border-saffron-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(245 168 21 / var(--tw-border-opacity, 1));
}
.focus\:border-saffron\/40:focus {
  border-color: rgb(232 160 32 / 0.4);
}
.focus\:border-saffron\/50:focus {
  border-color: rgb(232 160 32 / 0.5);
}
.focus\:border-saffron\/60:focus {
  border-color: rgb(232 160 32 / 0.6);
}
.focus\:bg-void-800\/70:focus {
  background-color: rgb(20 46 34 / 0.7);
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-saffron\/20:focus {
  --tw-ring-color: rgb(232 160 32 / 0.2);
}
.active\:cursor-grabbing:active {
  cursor: grabbing;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:opacity-0:disabled {
  opacity: 0;
}
.disabled\:opacity-30:disabled {
  opacity: 0.3;
}
.disabled\:opacity-40:disabled {
  opacity: 0.4;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.disabled\:opacity-60:disabled {
  opacity: 0.6;
}
.group\/link:hover .group-hover\/link\:translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group\/pl:hover .group-hover\/pl\:translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-x-1 {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-\[1\.03\] {
  --tw-scale-x: 1.03;
  --tw-scale-y: 1.03;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:border-light-gold\/40 {
  border-color: rgb(181 138 58 / 0.4);
}
.group:hover .group-hover\:bg-light-gold\/20 {
  background-color: rgb(181 138 58 / 0.2);
}
.group:hover .group-hover\:text-light-gold-ink {
  --tw-text-opacity: 1;
  color: rgb(132 101 42 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:underline {
  text-decoration-line: underline;
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\:opacity-60 {
  opacity: 0.6;
}
@media (min-width: 640px) {

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

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

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

  .sm\:table {
    display: table;
  }

  .sm\:hidden {
    display: none;
  }

  .sm\:h-12 {
    height: 3rem;
  }

  .sm\:h-14 {
    height: 3.5rem;
  }

  .sm\:h-6 {
    height: 1.5rem;
  }

  .sm\:w-12 {
    width: 3rem;
  }

  .sm\:w-14 {
    width: 3.5rem;
  }

  .sm\:w-44 {
    width: 11rem;
  }

  .sm\:w-6 {
    width: 1.5rem;
  }

  .sm\:w-auto {
    width: auto;
  }

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

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

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

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

  .sm\:grid-cols-\[1fr_220px\] {
    grid-template-columns: 1fr 220px;
  }

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

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

  .sm\:items-start {
    align-items: flex-start;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-5 {
    gap: 1.25rem;
  }

  .sm\:p-10 {
    padding: 2.5rem;
  }

  .sm\:p-12 {
    padding: 3rem;
  }

  .sm\:p-14 {
    padding: 3.5rem;
  }

  .sm\:p-5 {
    padding: 1.25rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .sm\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .sm\:pb-0 {
    padding-bottom: 0px;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .sm\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .sm\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}
@media (min-width: 768px) {

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

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

  .md\:mb-14 {
    margin-bottom: 3.5rem;
  }

  .md\:block {
    display: block;
  }

  .md\:inline {
    display: inline;
  }

  .md\:table-cell {
    display: table-cell;
  }

  .md\:h-\[6\.5rem\] {
    height: 6.5rem;
  }

  .md\:w-72 {
    width: 18rem;
  }

  .md\:w-\[5\.5rem\] {
    width: 5.5rem;
  }

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

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

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

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

  .md\:grid-cols-\[200px_1fr\] {
    grid-template-columns: 200px 1fr;
  }

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

  .md\:grid-cols-\[7\.5rem_1fr\] {
    grid-template-columns: 7.5rem 1fr;
  }

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

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

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

  .md\:items-start {
    align-items: flex-start;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:justify-between {
    justify-content: space-between;
  }

  .md\:p-10 {
    padding: 2.5rem;
  }

  .md\:p-6 {
    padding: 1.5rem;
  }

  .md\:p-8 {
    padding: 2rem;
  }

  .md\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .md\:pl-1 {
    padding-left: 0.25rem;
  }

  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .md\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }

  .md\:text-\[2\.2rem\] {
    font-size: 2.2rem;
  }

  .md\:text-\[2rem\] {
    font-size: 2rem;
  }
}
@media (min-width: 1024px) {

  .lg\:sticky {
    position: sticky;
  }

  .lg\:top-24 {
    top: 6rem;
  }

  .lg\:top-4 {
    top: 1rem;
  }

  .lg\:top-6 {
    top: 1.5rem;
  }

  .lg\:order-1 {
    order: 1;
  }

  .lg\:order-2 {
    order: 2;
  }

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

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

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

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

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

  .lg\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .lg\:-mx-8 {
    margin-left: -2rem;
    margin-right: -2rem;
  }

  .lg\:ml-60 {
    margin-left: 15rem;
  }

  .lg\:ml-72 {
    margin-left: 18rem;
  }

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

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

  .lg\:table-cell {
    display: table-cell;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:h-18 {
    height: 4.5rem;
  }

  .lg\:max-h-\[calc\(100vh-7rem\)\] {
    max-height: calc(100vh - 7rem);
  }

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

  .lg\:w-44 {
    width: 11rem;
  }

  .lg\:w-48 {
    width: 12rem;
  }

  .lg\:w-5\/12 {
    width: 41.666667%;
  }

  .lg\:w-52 {
    width: 13rem;
  }

  .lg\:max-w-sm {
    max-width: 24rem;
  }

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

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

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

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

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

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

  .lg\:grid-cols-\[1fr_1fr\] {
    grid-template-columns: 1fr 1fr;
  }

  .lg\:grid-cols-\[1fr_280px\] {
    grid-template-columns: 1fr 280px;
  }

  .lg\:grid-cols-\[1fr_320px\] {
    grid-template-columns: 1fr 320px;
  }

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

  .lg\:grid-cols-\[2fr_1fr\] {
    grid-template-columns: 2fr 1fr;
  }

  .lg\:grid-cols-\[300px_1fr\] {
    grid-template-columns: 300px 1fr;
  }

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

  .lg\:items-end {
    align-items: flex-end;
  }

  .lg\:items-center {
    align-items: center;
  }

  .lg\:justify-end {
    justify-content: flex-end;
  }

  .lg\:gap-12 {
    gap: 3rem;
  }

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

  .lg\:p-10 {
    padding: 2.5rem;
  }

  .lg\:p-6 {
    padding: 1.5rem;
  }

  .lg\:p-7 {
    padding: 1.75rem;
  }

  .lg\:p-8 {
    padding: 2rem;
  }

  .lg\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:py-0 {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .lg\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .lg\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .lg\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .lg\:pb-0 {
    padding-bottom: 0px;
  }

  .lg\:pb-10 {
    padding-bottom: 2.5rem;
  }

  .lg\:pb-20 {
    padding-bottom: 5rem;
  }

  .lg\:pt-20 {
    padding-top: 5rem;
  }

  .lg\:pt-36 {
    padding-top: 9rem;
  }

  .lg\:text-right {
    text-align: right;
  }

  .lg\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .lg\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .lg\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .lg\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .lg\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .lg\:text-\[2\.6rem\] {
    font-size: 2.6rem;
  }

  .lg\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .lg\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}
@media (min-width: 1280px) {

  .xl\:block {
    display: block;
  }

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

  .xl\:grid-cols-\[15rem_1fr_20rem\] {
    grid-template-columns: 15rem 1fr 20rem;
  }
}
.\[\&_a\]\:text-saffron a {
  --tw-text-opacity: 1;
  color: rgb(232 160 32 / var(--tw-text-opacity, 1));
}
.\[\&_a\]\:underline a {
  text-decoration-line: underline;
}