/* Plus Jakarta Sans — loaded via Google Fonts link in index.html */

*, ::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: var(--font-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;
}

:root {
    /* Numina design tokens */
    /* THE desktop frame width — owner-picked 2026-07-23 (NUMINA-DESKTOP board,
       all-wide verdict): every page's desktop container reads this ONE token
       via max-w-[var(--desktop-col)], under the ONE top bar. Page widths must
       never diverge again ("every page is a different width"). The only
       sanctioned exception is the mid-session focused stage (locked SESSIONS
       spec), which deliberately narrows while answering. */
    --desktop-col: 1060px;
    --font-display: "Archivo", system-ui, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", "Fira Code", monospace;
    --radius: 0.5rem;

    /* ═══ LIGHT MODE — "Porcelain" (owner-locked 2026-07-16) ═══
       Spec: docs/2026-07-16-DESIGN-LOCK.md · mockup docs/2026-07-16-TC-LIGHT/L2-porcelain.html.
       Warm-neutral porcelain ground, white cards, deep quiet mint voltage. */
    --background: #FAFAF7;
    --foreground: #2A2533;
    --card: #FFFFFF;
    --card-foreground: #2A2533;
    --popover: #FFFFFF;
    --popover-foreground: #2A2533;

    /* CHROME IS LOCKED to the voltage (design lock: "chrome never tints").
       --primary no longer follows the learner accent — that role moved to
       --personal-accent (avatar ring / streak flame / progress fills only). */
    --primary: var(--accent-primary);
    --primary-foreground: #FFFFFF; /* white on #2E7D6B = 4.9:1 */

    /* Secondary */
    --secondary: #F3F1EC;
    --secondary-foreground: #2A2533;

    /* Muted — subtle backgrounds */
    --muted: #F3F1EC;
    --muted-foreground: #6E6880;

    /* Destructive — the locked "wrong" rose, deep form for light ink-duty */
    --destructive: #B4384F;
    --destructive-foreground: #FFFFFF;

    /* Borders */
    --border: #E5E2DA;
    --input: #E5E2DA;
    --ring: #2E7D6B;

    /* Charts */
    --chart-1: oklch(0.52 0.19 260);
    --chart-2: oklch(0.55 0.16 145);
    --chart-3: oklch(0.65 0.17 55);
    --chart-4: oklch(0.55 0.2 25);
    --chart-5: oklch(0.5 0.18 300);
    /* Elite (fast-answer "Lightning!") feedback — a BRIGHT golden-yellow that pops
       (brighter + more yellow than the muted brand gold). Used by BOTH the
       in-session ⚡ feedback and the My Growth "Lightning-fast" card so they stay
       identical. The brand gold (--accent-gold, logo/awards) stays its own muted hue. */
    --accent-lightning: #C9962E; /* calm earned-gold (light form; dark lifts to #E3B559) */
    /* Readable ink for lightning TEXT/labels sitting on the pale gold wash:
       deep bronze in light; lifts to the calm gold in dark (see .dark). */
    --accent-lightning-ink: #8A6414;
    /* Ink drawn ON the gold disc itself — deep bronze in BOTH modes. */
    --accent-lightning-disc-ink: #3A2A08;
    /* Lightning strip SURFACE + EDGE. Light: a pale 22% gold wash reads as warm
       and clean. Dark: the same wash over navy turns olive-sludge, so the dark
       variant (see .dark) keeps the surface near-dark (whisper of gold) and lets
       a gold EDGE + the bright disc/text carry the signal instead.
       Mixed into --card, never toward transparent: both consumers (the session
       feedback strip, the Numina Master results cells) sit on cards, so the
       result is identical to the old wash while staying an opaque fill. */
    --accent-lightning-tint: color-mix(in srgb, var(--accent-lightning) 22%, var(--card));
    --accent-lightning-edge: transparent;
    --accent-lightning-flash: color-mix(in srgb, var(--accent-lightning) 42%, var(--card));
    /* Podium feedback bar — on-accent inks + solid top-edge lines. Theme-invariant:
       gold #FFC400 and the success green are the same in both themes, so their
       ink/edge companions are too (never translucent). */
    --strip-gold-ink: #2E2410;
    --strip-gold-sub: #8A6414;
    --strip-gold-edge: #E8CE8F;
    --strip-success-edge: #5FDD9B;
    --strip-success-sub: #D6F5E4;
    --strip-success-chip: #115C34;
    /* Soft tint surfaces that were referenced but never defined (fell back to
       near-white hardcodes on dark). Opaque by construction — mixed into the
       card — and resolve correctly in BOTH themes via var(--card). */
    --tier-mastered-soft: color-mix(in srgb, var(--tier-mastered) 14%, var(--card));
    --accent-current-soft: color-mix(in srgb, var(--accent-primary) 12%, var(--card));
    --color-success-soft: color-mix(in srgb, var(--color-success) 15%, var(--card));
    /* Bottom-nav active pill — a solid mixed color, never a translucent wash. */
    --nav-active-pill: color-mix(in srgb, var(--accent-primary) 22%, var(--card));
    /* Segmented-tab active pill surface: a raised white card in light. In dark no
       surface token is lighter than the muted track, so the active pill switches to
       the accent tint instead (see .dark) rather than sinking below the track. */
    --tab-active-bg: var(--card);
    /* Calm earned-gold — a FIXED achievement accent (not learner-tinted):
       awards, elite speed, medals. "Gold is earned", never a warning. */
    --accent-gold: #C9962E;
    /* Fixed brand ink — the wordmark IS the voltage (locked mint), never
       overridden by the learner's accent. */
    --brand-ink: #2E7D6B;

    /* The pre-lock 8-hue chrome palette (--accent-{coral,amber,yellow,green,
       teal,cobalt,violet,magenta}-{primary,muted}) is DELETED, along with its
       Tailwind mappings. The design lock replaced per-learner chrome tinting
       with locked mint chrome + --personal-accent; leaving the hues spellable
       would let chrome tinting return with one class name. */

    /* THE VOLTAGE — deep quiet mint (Porcelain form). Locked chrome accent for
       every learner; one value serves fills (white ink 4.9:1) AND link/label
       text on the porcelain ground (4.7:1). Personalisation lives in
       --personal-accent, never here. */
    --accent-primary: #2E7D6B;
    /* Accent tints DERIVE from --accent-primary (opaque color-mix, never rgba)
       so a learner-chosen accent re-tints everything in both themes for free. */
    --accent-muted: color-mix(in srgb, var(--accent-primary) 12%, var(--card));
    --accent-foreground: oklch(1.0 0 0);

    /* Award tier metallic colours */
    --award-bronze: #CD7F32;
    --award-bronze-bg: #FDF3E4;
    --award-bronze-border: #D4904A;
    --award-silver: #A8A9AD;
    --award-silver-bg: #F2F3F5;
    --award-silver-border: #BEC0C6;
    --award-gold: #C9962E;
    --award-gold-bg: #F7EED7;
    --award-gold-border: #C9962E;

    /* Award text colours (moved from bare :root) */
    --award-bronze-text: #7A4010;
    --award-silver-text: #4A5060;
    --award-gold-text: #8A6414;

    /* Semantic named colours — LOCKED meanings (one colour = one job).
       Light uses the deep ink forms; dark lifts to the locked bright hues. */
    --color-success: #1F7A4D;
    --color-warning: #96600E;
    --color-destructive: var(--destructive);

    /* Track identity colours — the ONE app-wide mapping (My Growth's):
       T1 Core facts, T2 Mental strategies, T3 Applied fluency. Recoloured to a
       collision-free domain trio (design lock): the old green/orange collided
       with success-green and due-amber under the mint voltage. */
    --track-1: #5B8DEF;
    --track-2: #9B7BFF;
    --track-3: #E0729B;

    /* Award category hues without a track home (pink / violet / ember).
       Like --track-*, single hex in both themes — always consumed through
       color-mix tints or as solid disc fills with --ink-on-accent on top. */
    --award-cat-practice: #D4537E;
    --award-cat-explorer: #7F77DD;
    --award-cat-forge: #D85A30;

    /* Ink on saturated accent/award fills — white in BOTH themes (the fill
       supplies the contrast, not the theme). Use instead of literal #fff. */
    --ink-on-accent: #FFFFFF;

    /* Sidebar tokens (aliases for existing semantic tokens) */
    --sidebar: var(--background);
    --sidebar-foreground: var(--foreground);
    --sidebar-primary: var(--primary);
    --sidebar-primary-foreground: var(--primary-foreground);
    --sidebar-accent: var(--accent-primary);
    --sidebar-accent-foreground: var(--primary-foreground);
    --sidebar-border: var(--border);
    --sidebar-ring: var(--ring);

    --accent-primary-border: color-mix(in srgb, var(--accent-primary) 30%, var(--card));
    --accent-primary-soft: color-mix(in srgb, var(--accent-primary) 10%, var(--card));
    --certificate-bg: #FEFCF8;
    --certificate-gold: #B8930A;
    --certificate-gold-dark: #7A6000;
    --certificate-track-core: var(--track-1);
    --certificate-track-strategies: var(--track-2);
    --certificate-track-applied: var(--track-3);
    --certificate-subtext: #8A7A4A;
    --radius-full: 9999px;
    /* Keep in step with the rounded-lg utility (tailwind.config borderRadius.lg
       = var(--radius)) so token- and utility-rounded surfaces match. */
    --radius-lg: var(--radius);
    --radius-md: 0.5rem;
    --certificate-text-muted: #A09080;
    --certificate-footer-text: #B0A090;
    --certificate-ornament-white: rgba(255,255,255,0.35);
    --certificate-ornament-white-md: rgba(255,255,255,0.4);
    --duration-progress: 300ms;
    --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
    /* Legacy aliases removed — all components now use canonical tokens */
    --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.06);
    --vh: 1dvh;
    --header-height: 56px;
    /* Tier ladder — ONE ramp, plum → mint ("heating up toward the voltage"),
       per the locked mockup. Light uses deepened forms readable on porcelain;
       dark uses the mockup's original stops (see .dark). */
    --tier-beginner: #56506E;
    --tier-intermediate: #3E6D71;
    --tier-advanced: #3A8A77;
    --tier-mastered: #2E7D6B;
    --session-card-min-height: 420px;
    --session-question-font-size: 28px;
    --session-benchmark-accent: oklch(0.60 0.24 25);
    --session-forge-ember: oklch(0.70 0.18 45);
    --session-forge-ember-muted: color-mix(in srgb, var(--session-forge-ember) 25%, var(--card));
    --session-forge-dark-card: oklch(0.16 0.02 260);
    --session-forge-dark-border: oklch(0.28 0.04 260 / 0.6);
    --session-forge-dark-muted: oklch(0.65 0.02 260);
    --session-tc-pass-accent: oklch(0.75 0.15 85);
    --session-tc-pass-muted: color-mix(in srgb, var(--session-tc-pass-accent) 20%, var(--card));
    --session-tc-fail-accent: oklch(0.55 0.03 260);
    --session-tc-fail-muted: color-mix(in srgb, var(--session-tc-fail-accent) 20%, var(--card));
    --session-placement-accent: oklch(0.65 0.12 240);
    --session-placement-muted: color-mix(in srgb, var(--session-placement-accent) 18%, var(--card));
    --session-benchmark-strip: oklch(0.55 0.06 220);
    --session-benchmark-muted: color-mix(in srgb, var(--session-benchmark-strip) 15%, var(--card));
    --session-numina-accent: oklch(0.50 0.20 290);
    --session-numina-muted: color-mix(in srgb, var(--session-numina-accent) 18%, var(--card));
    --session-class-accent: oklch(0.65 0.18 30);
    --session-class-muted: color-mix(in srgb, var(--session-class-accent) 18%, var(--card));
    --session-mixed-accent: oklch(0.60 0.15 310);
    --session-mixed-muted: color-mix(in srgb, var(--session-mixed-accent) 18%, var(--card));
    --session-warmup-accent: oklch(0.70 0.14 75);
    --session-warmup-muted: color-mix(in srgb, var(--session-warmup-accent) 18%, var(--card));
    --table-header-bg: oklch(0.96 0.006 250);
    --table-header-text: oklch(0.30 0.018 255);
    --table-header-border: oklch(0.88 0.008 260);
    --table-row-hover: oklch(0.97 0.012 255 / 0.7);
    --table-row-selected: oklch(0.96 0.008 255 / 0.4);
    --table-sort-icon: oklch(0.55 0.02 255);
    --table-sort-icon-active: var(--primary);
    --session-accent-forge: oklch(0.75 0.18 55);
    --session-accent-track-challenge: oklch(0.63 0.18 140);
    --session-accent-numina-master: oklch(0.50 0.20 290);
    --session-accent-placement: oklch(0.65 0.12 240);
    --session-accent-benchmark: oklch(0.55 0.06 220);
    --session-accent-class-challenge: oklch(0.65 0.18 30);
    --session-accent-mixed-practice: oklch(0.60 0.15 310);
    --session-accent-practice: oklch(0.55 0.08 260);
    --session-chrome-tint-opacity: 0.06;
    --session-chrome-animation-duration: 500ms;
    --feedback-transition: background-color 100ms ease;
    /* History session-type badge colours (bg + text pairs) */
    --history-badge-practice-bg: oklch(0.93 0.01 260);
    --history-badge-practice-text: oklch(0.45 0.03 260);
    --history-badge-placement-bg: oklch(0.88 0.10 240);
    --history-badge-placement-text: oklch(0.30 0.12 240);
    --history-badge-mixed-bg: oklch(0.88 0.12 310);
    --history-badge-mixed-text: oklch(0.30 0.15 310);
    --history-badge-track-challenge-bg: oklch(0.92 0.12 85);
    --history-badge-track-challenge-text: oklch(0.40 0.15 85);
    --history-badge-numina-master-bg: oklch(0.88 0.15 290);
    --history-badge-numina-master-text: oklch(0.30 0.18 290);
    --history-badge-forge-bg: oklch(0.92 0.14 45);
    --history-badge-forge-text: oklch(0.38 0.18 45);
    --history-badge-warmup-bg:           oklch(0.93 0.05 75);
    --history-badge-warmup-text:         oklch(0.45 0.12 75);
    --history-badge-class-challenge-bg: oklch(0.90 0.14 30);
    --history-badge-class-challenge-text: oklch(0.38 0.18 30);
    --history-badge-benchmark-bg: oklch(0.88 0.05 220);
    --history-badge-benchmark-text: oklch(0.35 0.06 220);
    /* History question-row status icon colours */
    --history-icon-correct: oklch(0.60 0.18 145);
    --history-icon-incorrect: var(--muted-foreground); /* wrong = slate, never red */
    --history-icon-speed: oklch(0.70 0.18 45);}

.dark {
    /* ═══ DARK MODE — "Twilight Calm" (owner-locked 2026-07-16) ═══
       Spec: docs/2026-07-16-DESIGN-LOCK.md · mockup docs/2026-07-15-DIRECTIONS/05-twilight-calm.html.
       Slate-plum evening room; the voltage is the quiet mint, full-strength. */
    --accent-primary: #6FD9BE;
    --brand-ink: #6FD9BE;
    /* Dark tints also derive from the (possibly learner-chosen) accent —
       slightly stronger mixes than light so they read on the graphite cards. */
    --accent-muted: color-mix(in srgb, var(--accent-primary) 18%, var(--card));
    --accent-primary-border: color-mix(in srgb, var(--accent-primary) 38%, var(--card));
    --accent-primary-soft: color-mix(in srgb, var(--accent-primary) 16%, var(--card));
    /* Dark: the elite strip is dark, so the label ink lifts to the calm gold; the
       segmented active pill uses the accent tint (no surface is lighter than muted). */
    --accent-lightning: #E3B559;
    --accent-lightning-ink: #E3B559;
    /* Dark lightning strip: its OWN warm, opaque gold surface. Mixing bright gold
       *toward transparent* over the navy card muddied to olive at even 8%, so the
       strip read as barely-there. Instead we mix gold into a warm near-black base:
       chroma stays golden (never olive), the band reads as a real, lit celebration
       surface, and it stays correct over ANY dark card. A brighter gold top
       edge crowns it; the flash pulse lifts the same surface brighter still. */
    --accent-lightning-tint: color-mix(in srgb, var(--accent-lightning) 26%, #241D0F);
    --accent-lightning-edge: color-mix(in srgb, var(--accent-lightning) 55%, transparent);
    --accent-lightning-flash: color-mix(in srgb, var(--accent-lightning) 48%, #241D0F);
    /* Award metals — dark-mode recut (the :root set is cream/brown, built for the
       light theme; it was never overridden here, so gold/silver/bronze chips
       rendered as light-theme chips pasted on the dark card). Opaque mixes into
       the dark card + bright metallic ink; shine gradients live at the component
       level — these are the token-level surfaces every consumer inherits. */
    --award-gold: #E3B559;
    --award-gold-bg: color-mix(in srgb, #E3B559 16%, var(--card));
    --award-gold-border: color-mix(in srgb, #E3B559 55%, var(--card));
    --award-gold-text: #EACD8F;
    --accent-gold: #E3B559;
    --award-silver-bg: color-mix(in srgb, #C5CAD6 14%, var(--card));
    --award-silver-border: color-mix(in srgb, #C5CAD6 45%, var(--card));
    --award-silver-text: #D6DBE6;
    --award-bronze-bg: color-mix(in srgb, #D4904A 16%, var(--card));
    --award-bronze-border: color-mix(in srgb, #D4904A 50%, var(--card));
    --award-bronze-text: #E5A667;
    --tab-active-bg: var(--accent-muted);
    /* Core surface — slate-plum evening room (never black). */
    --background:         #1E1B2E;
    --foreground:         #EDEAF6;
    --card:               #262238;
    --card-foreground:    #EDEAF6;
    --popover:            #262238;
    --popover-foreground: #EDEAF6;

    /* CHROME LOCKED to the voltage — the quiet mint at full strength. Mint is a
       LIGHT fill, so its ink is the deep evergreen (never white on mint). */
    --primary:            var(--accent-primary);
    --primary-foreground: #14241F;

    /* Secondary / muted — plum steps */
    --secondary:          #2E2A42;
    --secondary-foreground: #DCD6EC;
    --muted:              #322D48;
    --muted-foreground:   #B3ABCC;

    /* Destructive / alerts — the locked "wrong" rose (light fill → dark ink) */
    --destructive:        #E8788A;
    --destructive-foreground: #33101A;

    /* Borders / inputs — plum hairline */
    --border:             #3A3550;
    --input:              #3A3550;
    --ring:               #6FD9BE;

    /* Semantic colors — the locked bright forms for dark */
    --color-success:      #66C98F;
    --color-warning:      #E8B45A;

    /* Sidebar */
    --sidebar:            #1A1728;
    --sidebar-foreground: #EDEAF6;
    --sidebar-border:     #2E2A42;

    --table-header-bg:    #2A2540;
    --table-header-text:  #C9C2DD;
    --table-header-border: #2E2A42;
    --table-row-hover:    #322C4A;
    --table-row-selected: #383157;
    --table-sort-icon:    #8B82A8;

    /* Tier ladder — the locked mockup's original ramp stops (plum → mint) */
    --tier-beginner: #56506E;
    --tier-intermediate: #4E7E82;
    --tier-advanced: #58AC9C;
    --tier-mastered: #6FD9BE;

    --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.40), 0 1px 2px -1px rgb(0 0 0 / 0.30);

    /* History badge colours — darker tints */
    --history-badge-practice-bg:         oklch(0.20 0.015 260);
    --history-badge-practice-text:       oklch(0.75 0.05 260);
    --history-badge-placement-bg:        oklch(0.20 0.12 240);
    --history-badge-placement-text:      oklch(0.80 0.14 240);
    --history-badge-mixed-bg:            oklch(0.20 0.14 310);
    --history-badge-mixed-text:          oklch(0.82 0.17 310);
    --history-badge-track-challenge-bg:  oklch(0.22 0.14 85);
    --history-badge-track-challenge-text: oklch(0.85 0.17 85);
    --history-badge-numina-master-bg:    oklch(0.20 0.17 290);
    --history-badge-numina-master-text:  oklch(0.82 0.20 290);
    --history-badge-forge-bg:            oklch(0.22 0.16 45);
    --history-badge-forge-text:          oklch(0.85 0.20 45);
    --history-badge-warmup-bg:           oklch(0.22 0.10 75);
    --history-badge-warmup-text:         oklch(0.85 0.14 75);
    --history-badge-class-challenge-bg:  oklch(0.20 0.16 30);
    --history-badge-class-challenge-text: oklch(0.85 0.20 30);
    --history-badge-benchmark-bg:        oklch(0.18 0.06 220);
    --history-badge-benchmark-text:      oklch(0.80 0.08 220);
  }

/* Prevent iOS font-size inflation on orientation change */


@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/Inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/Inter-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/Archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/Archivo-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

html,
body {
  /* overflow intentionally not set — session screens apply their own overflow-hidden */
}

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
  /* Responsive: phones → desktop. Floor at a small-phone width to avoid extreme squish. */
  min-width: 320px;
}

/* Touch ergonomics (kid-facing app): kill the 300ms tap delay and the grey iOS
   tap-flash on interactive elements so taps feel instant and clean. */
button,
a,
label,
summary,
select,
[role="button"],
[data-slot="button"],
[data-slot="select-trigger"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}
@media (min-width: 1400px) {

  .container {
    max-width: 1400px;
  }
}
.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;
}
.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}
.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}
.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}
.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}
.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}
.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}
.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}
.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}
.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}
.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
}
.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}
.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}
.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}
.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-left-width: 0.25rem;
  border-left-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 1em;
}
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: open-quote;
}
.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: close-quote;
}
.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}
.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}
.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}
.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}
.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}
.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}
.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}
.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}
.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-right: 0.375em;
  padding-bottom: 0.1875em;
  padding-left: 0.375em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "`";
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: "`";
}
.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}
.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}
.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-right: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-left: 1.1428571em;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: none;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: none;
}
.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  text-align: left;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}
.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}
.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}
.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 0;
}
.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: baseline;
}
.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}
.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top;
}
.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}
.prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: 17 24 39;
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: 255 255 255;
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}
.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0.375em;
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0.375em;
}
.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}
.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}
.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}
.prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-left: 1.625em;
}
.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0;
}
.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-right: 0;
}
.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-left: 0;
}
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-right: 0;
}
.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.\!visible {
  visibility: visible !important;
}
.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-\[4\.5px\] {
  inset: 4.5px;
}
.inset-\[6\.5px\] {
  inset: 6.5px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-x-px {
  left: 1px;
  right: 1px;
}
.-bottom-1 {
  bottom: -0.25rem;
}
.-right-0\.5 {
  right: -0.125rem;
}
.-right-1 {
  right: -0.25rem;
}
.-right-2 {
  right: -0.5rem;
}
.-top-0\.5 {
  top: -0.125rem;
}
.-top-1\.5 {
  top: -0.375rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-full {
  bottom: 100%;
}
.bottom-px {
  bottom: 1px;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-4 {
  left: 1rem;
}
.left-\[12\.5\%\] {
  left: 12.5%;
}
.right-0 {
  right: 0px;
}
.right-0\.5 {
  right: 0.125rem;
}
.right-1\.5 {
  right: 0.375rem;
}
.right-2 {
  right: 0.5rem;
}
.right-4 {
  right: 1rem;
}
.right-\[12\.5\%\] {
  right: 12.5%;
}
.top-0 {
  top: 0px;
}
.top-0\.5 {
  top: 0.125rem;
}
.top-1\.5 {
  top: 0.375rem;
}
.top-1\/2 {
  top: 50%;
}
.top-14 {
  top: 3.5rem;
}
.top-2 {
  top: 0.5rem;
}
.top-4 {
  top: 1rem;
}
.top-6 {
  top: 1.5rem;
}
.top-\[56px\] {
  top: 56px;
}
.top-\[59px\] {
  top: 59px;
}
.top-\[5px\] {
  top: 5px;
}
.top-full {
  top: 100%;
}
.isolate {
  isolation: isolate;
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[100\] {
  z-index: 100;
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-3 {
  order: 3;
}
.order-4 {
  order: 4;
}
.order-5 {
  order: 5;
}
.order-6 {
  order: 6;
}
.order-7 {
  order: 7;
}
.col-span-full {
  grid-column: 1 / -1;
}
.col-start-2 {
  grid-column-start: 2;
}
.row-span-2 {
  grid-row: span 2 / span 2;
}
.row-start-1 {
  grid-row-start: 1;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}
.-mx-5 {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}
.-my-2\.5 {
  margin-top: -0.625rem;
  margin-bottom: -0.625rem;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-\[0\.14em\] {
  margin-left: 0.14em;
  margin-right: 0.14em;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-\[0\.08em\] {
  margin-top: 0.08em;
  margin-bottom: 0.08em;
}
.-mb-4 {
  margin-bottom: -1rem;
}
.-ml-2 {
  margin-left: -0.5rem;
}
.-mr-2 {
  margin-right: -0.5rem;
}
.-mt-0\.5 {
  margin-top: -0.125rem;
}
.-mt-7 {
  margin-top: -1.75rem;
}
.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-2 {
  margin-bottom: 0.5rem;
}
.mb-2\.5 {
  margin-bottom: 0.625rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-7 {
  margin-bottom: 1.75rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.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-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mr-auto {
  margin-right: auto;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.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-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-\[3px\] {
  margin-top: 3px;
}
.mt-auto {
  margin-top: auto;
}
.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;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.table-caption {
  display: table-caption;
}
.table-cell {
  display: table-cell;
}
.table-row {
  display: table-row;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.size-10 {
  width: 2.5rem;
  height: 2.5rem;
}
.size-11 {
  width: 2.75rem;
  height: 2.75rem;
}
.size-12 {
  width: 3rem;
  height: 3rem;
}
.size-2 {
  width: 0.5rem;
  height: 0.5rem;
}
.size-2\.5 {
  width: 0.625rem;
  height: 0.625rem;
}
.size-3 {
  width: 0.75rem;
  height: 0.75rem;
}
.size-4 {
  width: 1rem;
  height: 1rem;
}
.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}
.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}
.size-7 {
  width: 1.75rem;
  height: 1.75rem;
}
.size-8 {
  width: 2rem;
  height: 2rem;
}
.size-9 {
  width: 2.25rem;
  height: 2.25rem;
}
.size-\[18px\] {
  width: 18px;
  height: 18px;
}
.size-\[88px\] {
  width: 88px;
  height: 88px;
}
.size-auto {
  width: auto;
  height: auto;
}
.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-28 {
  height: 7rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-48 {
  height: 12rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[0\.09em\] {
  height: 0.09em;
}
.h-\[100dvh\] {
  height: 100dvh;
}
.h-\[124px\] {
  height: 124px;
}
.h-\[17px\] {
  height: 17px;
}
.h-\[26px\] {
  height: 26px;
}
.h-\[300px\] {
  height: 300px;
}
.h-\[30px\] {
  height: 30px;
}
.h-\[33px\] {
  height: 33px;
}
.h-\[3px\] {
  height: 3px;
}
.h-\[42px\] {
  height: 42px;
}
.h-\[44px\] {
  height: 44px;
}
.h-\[52px\] {
  height: 52px;
}
.h-\[56px\] {
  height: 56px;
}
.h-\[5px\] {
  height: 5px;
}
.h-\[70px\] {
  height: 70px;
}
.h-\[74px\] {
  height: 74px;
}
.h-\[calc\(100dvh-10\.25rem-env\(safe-area-inset-top\)-env\(safe-area-inset-bottom\)\)\] {
  height: calc(100dvh - 10.25rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
.h-\[calc\(100dvh-3\.5rem\)\] {
  height: calc(100dvh - 3.5rem);
}
.h-\[calc\(100dvh-var\(--header-height\)-3\.5rem\)\] {
  height: calc(100dvh - var(--header-height) - 3.5rem);
}
.h-\[var\(--header-height\)\] {
  height: var(--header-height);
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-screen {
  height: 100vh;
}
.max-h-72 {
  max-height: 18rem;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[320px\] {
  max-height: 320px;
}
.max-h-\[90dvh\] {
  max-height: 90dvh;
}
.max-h-\[calc\(100vh-12\.5rem\)\] {
  max-height: calc(100vh - 12.5rem);
}
.min-h-0 {
  min-height: 0px;
}
.min-h-11 {
  min-height: 2.75rem;
}
.min-h-12 {
  min-height: 3rem;
}
.min-h-14 {
  min-height: 3.5rem;
}
.min-h-8 {
  min-height: 2rem;
}
.min-h-\[100dvh\] {
  min-height: 100dvh;
}
.min-h-\[104px\] {
  min-height: 104px;
}
.min-h-\[112px\] {
  min-height: 112px;
}
.min-h-\[176px\] {
  min-height: 176px;
}
.min-h-\[20px\] {
  min-height: 20px;
}
.min-h-\[220px\] {
  min-height: 220px;
}
.min-h-\[28px\] {
  min-height: 28px;
}
.min-h-\[30px\] {
  min-height: 30px;
}
.min-h-\[36px\] {
  min-height: 36px;
}
.min-h-\[420px\] {
  min-height: 420px;
}
.min-h-\[44px\] {
  min-height: 44px;
}
.min-h-\[480px\] {
  min-height: 480px;
}
.min-h-\[52px\] {
  min-height: 52px;
}
.min-h-\[54px\] {
  min-height: 54px;
}
.min-h-\[56px\] {
  min-height: 56px;
}
.min-h-\[58px\] {
  min-height: 58px;
}
.min-h-\[60vh\] {
  min-height: 60vh;
}
.min-h-\[64px\] {
  min-height: 64px;
}
.min-h-\[76px\] {
  min-height: 76px;
}
.min-h-\[calc\(100dvh-10\.25rem-env\(safe-area-inset-top\)-env\(safe-area-inset-bottom\)\)\] {
  min-height: calc(100dvh - 10.25rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
.min-h-\[calc\(100dvh-9\.25rem-env\(safe-area-inset-top\)-env\(safe-area-inset-bottom\)\)\] {
  min-height: calc(100dvh - 9.25rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
.min-h-\[calc\(100dvh-var\(--header-height\2c 56px\)\)\] {
  min-height: calc(100dvh - var(--header-height,56px));
}
.min-h-\[calc\(var\(--vh\2c 1dvh\)\*100-12rem\)\] {
  min-height: calc(var(--vh,1dvh) * 100 - 12rem);
}
.min-h-dvh {
  min-height: 100dvh;
}
.min-h-full {
  min-height: 100%;
}
.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-2\/5 {
  width: 40%;
}
.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-3\/5 {
  width: 60%;
}
.w-32 {
  width: 8rem;
}
.w-36 {
  width: 9rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-44 {
  width: 11rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[128px\] {
  width: 128px;
}
.w-\[180px\] {
  width: 180px;
}
.w-\[220px\] {
  width: 220px;
}
.w-\[26px\] {
  width: 26px;
}
.w-\[300px\] {
  width: 300px;
}
.w-\[340px\] {
  width: 340px;
}
.w-\[400px\] {
  width: 400px;
}
.w-\[50px\] {
  width: 50px;
}
.w-\[70\%\] {
  width: 70%;
}
.w-\[74px\] {
  width: 74px;
}
.w-\[84px\] {
  width: 84px;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.w-screen {
  width: 100vw;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-11 {
  min-width: 2.75rem;
}
.min-w-4 {
  min-width: 1rem;
}
.min-w-\[17px\] {
  min-width: 17px;
}
.min-w-\[28px\] {
  min-width: 28px;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-\[120px\] {
  max-width: 120px;
}
.max-w-\[15rem\] {
  max-width: 15rem;
}
.max-w-\[16ch\] {
  max-width: 16ch;
}
.max-w-\[380px\] {
  max-width: 380px;
}
.max-w-\[420px\] {
  max-width: 420px;
}
.max-w-\[480px\] {
  max-width: 480px;
}
.max-w-\[52ch\] {
  max-width: 52ch;
}
.max-w-\[620px\] {
  max-width: 620px;
}
.max-w-\[640px\] {
  max-width: 640px;
}
.max-w-\[680px\] {
  max-width: 680px;
}
.max-w-\[var\(--desktop-col\)\] {
  max-width: var(--desktop-col);
}
.max-w-full {
  max-width: 100%;
}
.max-w-md {
  max-width: 28rem;
}
.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-none {
  flex: none;
}
.flex-shrink {
  flex-shrink: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.caption-bottom {
  caption-side: bottom;
}
.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));
}
.-rotate-90 {
  --tw-rotate: -90deg;
  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));
}
.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 spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-pointer {
  cursor: pointer;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.select-all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}
.resize {
  resize: both;
}
.scroll-pt-14 {
  scroll-padding-top: 3.5rem;
}
.auto-rows-min {
  grid-auto-rows: min-content;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-\[minmax\(0\2c 1fr\)_360px\] {
  grid-template-columns: minmax(0,1fr) 360px;
}
.grid-cols-\[repeat\(auto-fit\2c minmax\(220px\2c 1fr\)\)\] {
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
}
.grid-rows-\[auto_auto\] {
  grid-template-rows: auto auto;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-items-center {
  place-items: center;
}
.content-start {
  align-content: flex-start;
}
.items-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-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-evenly {
  justify-content: space-evenly;
}
.gap-0 {
  gap: 0px;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.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-7 {
  gap: 1.75rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-\[18px\] {
  gap: 18px;
}
.gap-\[3px\] {
  gap: 3px;
}
.gap-\[7px\] {
  gap: 7px;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.gap-x-8 {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.gap-y-3 {
  row-gap: 0.75rem;
}
.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.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-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-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-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-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-\[color-mix\(in_srgb\2c var\(--border\)_40\%\2c var\(--card\)\)\] > :not([hidden]) ~ :not([hidden]) {
  border-color: color-mix(in srgb,var(--border) 40%,var(--card));
}
.divide-\[color-mix\(in_srgb\2c var\(--border\)_55\%\2c var\(--card\)\)\] > :not([hidden]) ~ :not([hidden]) {
  border-color: color-mix(in srgb,var(--border) 55%,var(--card));
}
.divide-border > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border);
}
.self-start {
  align-self: flex-start;
}
.self-center {
  align-self: center;
}
.justify-self-end {
  justify-self: end;
}
.justify-self-center {
  justify-self: center;
}
.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;
}
.break-words {
  overflow-wrap: break-word;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-\[10px\] {
  border-radius: 10px;
}
.rounded-\[3px\] {
  border-radius: 3px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.rounded-none {
  border-radius: 0px;
}
.rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-b-2xl {
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}
.rounded-r {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
.rounded-r-xl {
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}
.rounded-t-2xl {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.rounded-t-lg {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.rounded-t-md {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
}
.rounded-t-xl {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-\[3px\] {
  border-width: 3px;
}
.border-x-0 {
  border-left-width: 0px;
  border-right-width: 0px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-0 {
  border-bottom-width: 0px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-\[color-mix\(in_srgb\2c var\(--accent-primary\)_20\%\2c var\(--card\)\)\] {
  border-color: color-mix(in srgb,var(--accent-primary) 20%,var(--card));
}
.border-\[color-mix\(in_srgb\2c var\(--accent-primary\)_25\%\2c var\(--card\)\)\] {
  border-color: color-mix(in srgb,var(--accent-primary) 25%,var(--card));
}
.border-\[color-mix\(in_srgb\2c var\(--accent-primary\)_40\%\2c var\(--card\)\)\] {
  border-color: color-mix(in srgb,var(--accent-primary) 40%,var(--card));
}
.border-\[color-mix\(in_srgb\2c var\(--accent-primary\)_45\%\2c var\(--border\)\)\] {
  border-color: color-mix(in srgb,var(--accent-primary) 45%,var(--border));
}
.border-\[color-mix\(in_srgb\2c var\(--border\)_40\%\2c var\(--card\)\)\] {
  border-color: color-mix(in srgb,var(--border) 40%,var(--card));
}
.border-\[color-mix\(in_srgb\2c var\(--border\)_50\%\2c var\(--card\)\)\] {
  border-color: color-mix(in srgb,var(--border) 50%,var(--card));
}
.border-\[color-mix\(in_srgb\2c var\(--border\)_55\%\2c var\(--card\)\)\] {
  border-color: color-mix(in srgb,var(--border) 55%,var(--card));
}
.border-\[color-mix\(in_srgb\2c var\(--border\)_60\%\2c var\(--background\)\)\] {
  border-color: color-mix(in srgb,var(--border) 60%,var(--background));
}
.border-\[color-mix\(in_srgb\2c var\(--border\)_60\%\2c var\(--card\)\)\] {
  border-color: color-mix(in srgb,var(--border) 60%,var(--card));
}
.border-\[color-mix\(in_srgb\2c var\(--color-success\)_35\%\2c var\(--card\)\)\] {
  border-color: color-mix(in srgb,var(--color-success) 35%,var(--card));
}
.border-\[color-mix\(in_srgb\2c var\(--color-warning\)_30\%\2c var\(--card\)\)\] {
  border-color: color-mix(in srgb,var(--color-warning) 30%,var(--card));
}
.border-\[color-mix\(in_srgb\2c var\(--color-warning\)_35\%\2c var\(--card\)\)\] {
  border-color: color-mix(in srgb,var(--color-warning) 35%,var(--card));
}
.border-\[color-mix\(in_srgb\2c var\(--primary\)_25\%\2c var\(--background\)\)\] {
  border-color: color-mix(in srgb,var(--primary) 25%,var(--background));
}
.border-\[hsl\(var\(--highlight\2c var\(--primary\)\)\/0\.35\)\] {
  border-color: hsl(var(--highlight,var(--primary))/0.35);
}
.border-\[var\(--accent-gold\)\] {
  border-color: var(--accent-gold);
}
.border-\[var\(--accent-primary\)\] {
  border-color: var(--accent-primary);
}
.border-\[var\(--color-success\)\] {
  border-color: var(--color-success);
}
.border-\[var\(--color-warning\)\] {
  border-color: var(--color-warning);
}
.border-\[var\(--destructive\)\] {
  border-color: var(--destructive);
}
.border-\[var\(--muted-foreground\)\] {
  border-color: var(--muted-foreground);
}
.border-\[var\(--personal-accent\)\] {
  border-color: var(--personal-accent);
}
.border-\[var\(--primary\)\] {
  border-color: var(--primary);
}
.border-\[var\(--tier-mastered\)\] {
  border-color: var(--tier-mastered);
}
.border-award-gold-border {
  border-color: var(--award-gold-border);
}
.border-background {
  border-color: var(--background);
}
.border-border {
  border-color: var(--border);
}
.border-input {
  border-color: var(--input);
}
.border-primary {
  border-color: var(--primary);
}
.border-transparent {
  border-color: transparent;
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.bg-\[color-mix\(in_srgb\2c var\(--accent-gold\)_12\%\2c var\(--card\)\)\] {
  background-color: color-mix(in srgb,var(--accent-gold) 12%,var(--card));
}
.bg-\[color-mix\(in_srgb\2c var\(--accent-lightning\)_30\%\2c var\(--card\)\)\] {
  background-color: color-mix(in srgb,var(--accent-lightning) 30%,var(--card));
}
.bg-\[color-mix\(in_srgb\2c var\(--accent-primary\)_10\%\2c var\(--card\)\)\] {
  background-color: color-mix(in srgb,var(--accent-primary) 10%,var(--card));
}
.bg-\[color-mix\(in_srgb\2c var\(--accent-primary\)_14\%\2c var\(--card\)\)\] {
  background-color: color-mix(in srgb,var(--accent-primary) 14%,var(--card));
}
.bg-\[color-mix\(in_srgb\2c var\(--accent-primary\)_15\%\2c var\(--card\)\)\] {
  background-color: color-mix(in srgb,var(--accent-primary) 15%,var(--card));
}
.bg-\[color-mix\(in_srgb\2c var\(--accent-primary\)_16\%\2c var\(--card\)\)\] {
  background-color: color-mix(in srgb,var(--accent-primary) 16%,var(--card));
}
.bg-\[color-mix\(in_srgb\2c var\(--border\)_45\%\2c var\(--card\)\)\] {
  background-color: color-mix(in srgb,var(--border) 45%,var(--card));
}
.bg-\[color-mix\(in_srgb\2c var\(--card\)_55\%\2c var\(--background\)\)\] {
  background-color: color-mix(in srgb,var(--card) 55%,var(--background));
}
.bg-\[color-mix\(in_srgb\2c var\(--color-success\)_15\%\2c var\(--card\)\)\] {
  background-color: color-mix(in srgb,var(--color-success) 15%,var(--card));
}
.bg-\[color-mix\(in_srgb\2c var\(--color-success\)_8\%\2c var\(--card\)\)\] {
  background-color: color-mix(in srgb,var(--color-success) 8%,var(--card));
}
.bg-\[color-mix\(in_srgb\2c var\(--color-warning\)_10\%\2c var\(--card\)\)\] {
  background-color: color-mix(in srgb,var(--color-warning) 10%,var(--card));
}
.bg-\[color-mix\(in_srgb\2c var\(--color-warning\)_15\%\2c var\(--card\)\)\] {
  background-color: color-mix(in srgb,var(--color-warning) 15%,var(--card));
}
.bg-\[color-mix\(in_srgb\2c var\(--destructive\)_8\%\2c var\(--card\)\)\] {
  background-color: color-mix(in srgb,var(--destructive) 8%,var(--card));
}
.bg-\[color-mix\(in_srgb\2c var\(--foreground\)_6\%\2c var\(--card\)\)\] {
  background-color: color-mix(in srgb,var(--foreground) 6%,var(--card));
}
.bg-\[color-mix\(in_srgb\2c var\(--muted\)_30\%\2c var\(--card\)\)\] {
  background-color: color-mix(in srgb,var(--muted) 30%,var(--card));
}
.bg-\[color-mix\(in_srgb\2c var\(--muted\)_40\%\2c var\(--card\)\)\] {
  background-color: color-mix(in srgb,var(--muted) 40%,var(--card));
}
.bg-\[color-mix\(in_srgb\2c var\(--muted\)_50\%\2c var\(--card\)\)\] {
  background-color: color-mix(in srgb,var(--muted) 50%,var(--card));
}
.bg-\[color-mix\(in_srgb\2c var\(--muted\)_60\%\2c var\(--card\)\)\] {
  background-color: color-mix(in srgb,var(--muted) 60%,var(--card));
}
.bg-\[color-mix\(in_srgb\2c var\(--muted-foreground\)_60\%\2c var\(--card\)\)\] {
  background-color: color-mix(in srgb,var(--muted-foreground) 60%,var(--card));
}
.bg-\[color-mix\(in_srgb\2c var\(--primary\)_5\%\2c var\(--background\)\)\] {
  background-color: color-mix(in srgb,var(--primary) 5%,var(--background));
}
.bg-\[color-mix\(in_srgb\2c var\(--primary\)_6\%\2c var\(--card\)\)\] {
  background-color: color-mix(in srgb,var(--primary) 6%,var(--card));
}
.bg-\[hsl\(var\(--highlight\2c var\(--primary\)\)\)\] {
  background-color: hsl(var(--highlight,var(--primary)));
}
.bg-\[hsl\(var\(--highlight\2c var\(--primary\)\)\/0\.06\)\] {
  background-color: hsl(var(--highlight,var(--primary))/0.06);
}
.bg-\[hsl\(var\(--highlight\2c var\(--primary\)\)\/0\.08\)\] {
  background-color: hsl(var(--highlight,var(--primary))/0.08);
}
.bg-\[var\(--accent-muted\)\] {
  background-color: var(--accent-muted);
}
.bg-\[var\(--accent-primary\)\] {
  background-color: var(--accent-primary);
}
.bg-\[var\(--award-gold-bg\)\] {
  background-color: var(--award-gold-bg);
}
.bg-\[var\(--border\)\] {
  background-color: var(--border);
}
.bg-\[var\(--card\)\] {
  background-color: var(--card);
}
.bg-\[var\(--certificate-bg\)\] {
  background-color: var(--certificate-bg);
}
.bg-\[var\(--muted\)\] {
  background-color: var(--muted);
}
.bg-\[var\(--nav-active-pill\)\] {
  background-color: var(--nav-active-pill);
}
.bg-\[var\(--personal-accent\)\] {
  background-color: var(--personal-accent);
}
.bg-\[var\(--personal-accent-soft\)\] {
  background-color: var(--personal-accent-soft);
}
.bg-\[var\(--tab-active-bg\)\] {
  background-color: var(--tab-active-bg);
}
.bg-\[var\(--tier-\$\{key\.toLowerCase\(\)\}\)\] {
  background-color: var(--tier-${key.toLowerCase()});
}
.bg-accent-primary-soft {
  background-color: var(--accent-primary-soft);
}
.bg-award-gold {
  background-color: var(--award-gold);
}
.bg-background {
  background-color: var(--background);
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-border {
  background-color: var(--border);
}
.bg-card {
  background-color: var(--card);
}
.bg-current {
  background-color: currentColor;
}
.bg-destructive {
  background-color: var(--destructive);
}
.bg-muted {
  background-color: var(--muted);
}
.bg-popover {
  background-color: var(--popover);
}
.bg-primary {
  background-color: var(--primary);
}
.bg-secondary {
  background-color: var(--secondary);
}
.bg-transparent {
  background-color: transparent;
}
.bg-white\/15 {
  background-color: rgb(255 255 255 / 0.15);
}
.bg-\[linear-gradient\(180deg\2c var\(--card\)\2c var\(--background\)\)\] {
  background-image: linear-gradient(180deg,var(--card),var(--background));
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.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);
}
.to-background {
  --tw-gradient-to: var(--background) var(--tw-gradient-to-position);
}
.to-card {
  --tw-gradient-to: var(--card) var(--tw-gradient-to-position);
}
.p-0 {
  padding: 0px;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.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;
}
.p-\[22px\] {
  padding: 22px;
}
.p-\[3px\] {
  padding: 3px;
}
.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}
.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
.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-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;
}
.px-\[0\.3em\] {
  padding-left: 0.3em;
  padding-right: 0.3em;
}
.px-\[22px\] {
  padding-left: 22px;
  padding-right: 22px;
}
.px-\[56px\] {
  padding-left: 56px;
  padding-right: 56px;
}
.px-\[60px\] {
  padding-left: 60px;
  padding-right: 60px;
}
.px-\[64px\] {
  padding-left: 64px;
  padding-right: 64px;
}
.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-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;
}
.py-\[18px\] {
  padding-top: 18px;
  padding-bottom: 18px;
}
.py-px {
  padding-top: 1px;
  padding-bottom: 1px;
}
.pb-0 {
  padding-bottom: 0px;
}
.pb-0\.5 {
  padding-bottom: 0.125rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-1\.5 {
  padding-bottom: 0.375rem;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-2\.5 {
  padding-bottom: 0.625rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-3\.5 {
  padding-bottom: 0.875rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pb-\[44px\] {
  padding-bottom: 44px;
}
.pb-\[52px\] {
  padding-bottom: 52px;
}
.pb-\[calc\(3\.75rem\+env\(safe-area-inset-bottom\)\)\] {
  padding-bottom: calc(3.75rem + env(safe-area-inset-bottom));
}
.pb-\[calc\(6\.5rem\+env\(safe-area-inset-bottom\)\)\] {
  padding-bottom: calc(6.5rem + env(safe-area-inset-bottom));
}
.pb-\[calc\(8rem\+env\(safe-area-inset-bottom\)\)\] {
  padding-bottom: calc(8rem + env(safe-area-inset-bottom));
}
.pb-\[env\(safe-area-inset-bottom\)\] {
  padding-bottom: env(safe-area-inset-bottom);
}
.pb-\[max\(0\.25rem\2c env\(safe-area-inset-bottom\)\)\] {
  padding-bottom: max(0.25rem, env(safe-area-inset-bottom));
}
.pb-\[max\(0\.75rem\2c env\(safe-area-inset-bottom\)\)\] {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}
.pb-\[max\(1rem\2c env\(safe-area-inset-bottom\)\)\] {
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
.pb-\[max\(env\(safe-area-inset-bottom\)\2c 1\.25rem\)\] {
  padding-bottom: max(env(safe-area-inset-bottom), 1.25rem);
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pt-0\.5 {
  padding-top: 0.125rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-1\.5 {
  padding-top: 0.375rem;
}
.pt-14 {
  padding-top: 3.5rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-2\.5 {
  padding-top: 0.625rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-3\.5 {
  padding-top: 0.875rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-8 {
  padding-top: 2rem;
}
.pt-\[48px\] {
  padding-top: 48px;
}
.pt-\[52px\] {
  padding-top: 52px;
}
.pt-\[56px\] {
  padding-top: 56px;
}
.pt-\[calc\(var\(--header-height\)\+35px\)\] {
  padding-top: calc(var(--header-height) + 35px);
}
.pt-\[env\(safe-area-inset-top\)\] {
  padding-top: env(safe-area-inset-top);
}
.pt-\[var\(--header-height\)\] {
  padding-top: var(--header-height);
}
.pt-px {
  padding-top: 1px;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-middle {
  vertical-align: middle;
}
.font-display {
  font-family: var(--font-display), serif;
}
.font-mono {
  font-family: var(--font-mono), monospace;
}
.text-\[0\.78em\] {
  font-size: 0.78em;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11\.5px\] {
  font-size: 11.5px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-base {
  font-size: 16px;
  line-height: 1.55;
}
.text-body {
  font-size: 16px;
  line-height: 1.55;
}
.text-body-sm {
  font-size: 14px;
  line-height: 1.5;
}
.text-caption {
  font-size: 12px;
  line-height: 1.4;
}
.text-cta {
  font-size: 19px;
  line-height: 1.3;
}
.text-display {
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.text-heading {
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.text-lg {
  font-size: 18px;
  line-height: 1.4;
}
.text-micro {
  font-size: 11px;
  line-height: 1.3;
}
.text-sm {
  font-size: 14px;
  line-height: 1.5;
}
.text-subheading {
  font-size: 18px;
  line-height: 1.4;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 12px;
  line-height: 1.4;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.normal-case {
  text-transform: none;
}
.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-\[1\.05\] {
  line-height: 1.05;
}
.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\.05em\] {
  letter-spacing: 0.05em;
}
.tracking-\[0\.06em\] {
  letter-spacing: 0.06em;
}
.tracking-\[0\.08em\] {
  letter-spacing: 0.08em;
}
.tracking-\[0\.09em\] {
  letter-spacing: 0.09em;
}
.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-\[0\.1em\] {
  letter-spacing: 0.1em;
}
.tracking-\[0\.22em\] {
  letter-spacing: 0.22em;
}
.tracking-\[0\.26em\] {
  letter-spacing: 0.26em;
}
.tracking-\[0\.3em\] {
  letter-spacing: 0.3em;
}
.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-\[color-mix\(in_srgb\2c var\(--muted-foreground\)_30\%\2c var\(--background\)\)\] {
  color: color-mix(in srgb,var(--muted-foreground) 30%,var(--background));
}
.text-\[color-mix\(in_srgb\2c var\(--muted-foreground\)_35\%\2c var\(--card\)\)\] {
  color: color-mix(in srgb,var(--muted-foreground) 35%,var(--card));
}
.text-\[color-mix\(in_srgb\2c var\(--muted-foreground\)_50\%\2c var\(--muted\)\)\] {
  color: color-mix(in srgb,var(--muted-foreground) 50%,var(--muted));
}
.text-\[hsl\(var\(--highlight-foreground\2c var\(--primary-foreground\)\)\)\] {
  color: hsl(var(--highlight-foreground,var(--primary-foreground)));
}
.text-\[var\(--accent-lightning\)\] {
  color: var(--accent-lightning);
}
.text-\[var\(--accent-lightning-ink\)\] {
  color: var(--accent-lightning-ink);
}
.text-\[var\(--accent-primary\)\] {
  color: var(--accent-primary);
}
.text-\[var\(--award-gold-text\)\] {
  color: var(--award-gold-text);
}
.text-\[var\(--background\)\] {
  color: var(--background);
}
.text-\[var\(--certificate-footer-text\)\] {
  color: var(--certificate-footer-text);
}
.text-\[var\(--certificate-gold-dark\)\] {
  color: var(--certificate-gold-dark);
}
.text-\[var\(--certificate-subtext\)\] {
  color: var(--certificate-subtext);
}
.text-\[var\(--certificate-text-muted\)\] {
  color: var(--certificate-text-muted);
}
.text-\[var\(--color-success\)\] {
  color: var(--color-success);
}
.text-\[var\(--color-warning\)\] {
  color: var(--color-warning);
}
.text-\[var\(--destructive\)\] {
  color: var(--destructive);
}
.text-\[var\(--personal-accent\)\] {
  color: var(--personal-accent);
}
.text-\[var\(--primary\)\] {
  color: var(--primary);
}
.text-\[var\(--primary-foreground\)\] {
  color: var(--primary-foreground);
}
.text-accent {
  color: var(--muted);
}
.text-accent-primary {
  color: var(--accent-primary);
}
.text-award-gold-text {
  color: var(--award-gold-text);
}
.text-card-foreground {
  color: var(--card-foreground);
}
.text-destructive {
  color: var(--destructive);
}
.text-destructive-foreground {
  color: var(--destructive-foreground);
}
.text-foreground {
  color: var(--foreground);
}
.text-muted-foreground {
  color: var(--muted-foreground);
}
.text-popover-foreground {
  color: var(--popover-foreground);
}
.text-primary {
  color: var(--primary);
}
.text-primary-foreground {
  color: var(--primary-foreground);
}
.text-secondary-foreground {
  color: var(--secondary-foreground);
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}
.underline {
  text-decoration-line: underline;
}
.no-underline {
  text-decoration-line: none;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.accent-muted {
  accent-color: var(--muted);
}
.accent-primary {
  accent-color: var(--primary);
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-20 {
  opacity: 0.2;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-35 {
  opacity: 0.35;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-80 {
  opacity: 0.8;
}
.opacity-85 {
  opacity: 0.85;
}
.opacity-90 {
  opacity: 0.9;
}
.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-\[0_0_14px_color-mix\(in_srgb\2c var\(--tier-mastered\)_22\%\2c transparent\)\] {
  --tw-shadow: 0 0 14px color-mix(in srgb,var(--tier-mastered) 22%,transparent);
  --tw-shadow-colored: 0 0 14px 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_24px_50px_-24px_color-mix\(in_srgb\2c var\(--accent-primary\)_40\%\2c transparent\)\] {
  --tw-shadow: 0 24px 50px -24px color-mix(in srgb,var(--accent-primary) 40%,transparent);
  --tw-shadow-colored: 0 24px 50px -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);
}
.shadow-card {
  --tw-shadow: var(--shadow-card);
  --tw-shadow-colored: var(--shadow-card);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-elevated {
  --tw-shadow: 0 4px 12px 0 rgba(0,0,0,0.12);
  --tw-shadow-colored: 0 4px 12px 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-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-md {
  --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);
}
.shadow-none {
  --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);
}
.shadow-pad {
  --tw-shadow: 0 -2px 16px rgba(0,0,0,0.08);
  --tw-shadow-colored: 0 -2px 16px 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-subtle {
  --tw-shadow: 0 1px 3px 0 rgba(0,0,0,0.08);
  --tw-shadow-colored: 0 1px 3px 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-xs {
  --tw-shadow: 0 1px 2px 0 rgba(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-card {
  --tw-shadow-color: var(--card);
  --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-2 {
  --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);
}
.ring-4 {
  --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(4px + 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-\[color-mix\(in_srgb\2c var\(--accent-primary\)_40\%\2c var\(--card\)\)\] {
  --tw-ring-color: color-mix(in srgb,var(--accent-primary) 40%,var(--card));
}
.ring-\[var\(--accent-primary\)\] {
  --tw-ring-color: var(--accent-primary);
}
.ring-\[var\(--foreground\)\] {
  --tw-ring-color: var(--foreground);
}
.ring-\[var\(--personal-accent\)\] {
  --tw-ring-color: var(--personal-accent);
}
.ring-\[var\(--ring\)\] {
  --tw-ring-color: var(--ring);
}
.ring-border {
  --tw-ring-color: var(--border);
}
.ring-card {
  --tw-ring-color: var(--card);
}
.ring-foreground {
  --tw-ring-color: var(--foreground);
}
.ring-primary {
  --tw-ring-color: var(--primary);
}
.ring-transparent {
  --tw-ring-color: transparent;
}
.ring-offset-1 {
  --tw-ring-offset-width: 1px;
}
.ring-offset-2 {
  --tw-ring-offset-width: 2px;
}
.ring-offset-\[var\(--background\)\] {
  --tw-ring-offset-color: var(--background);
}
.ring-offset-background {
  --tw-ring-offset-color: var(--background);
}
.ring-offset-card {
  --tw-ring-offset-color: var(--card);
}
.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);
}
.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);
}
.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-\[color\2c box-shadow\] {
  transition-property: color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\2c background-color\] {
  transition-property: width,background-color;
  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-shadow {
  transition-property: box-shadow;
  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-100 {
  transition-duration: 100ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.duration-75 {
  transition-duration: 75ms;
}
.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.\@container\/card-header {
  container-type: inline-size;
  container-name: card-header;
}
@keyframes enter {

  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {

  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.fade-in {
  --tw-enter-opacity: 0;
}
.fade-out {
  --tw-exit-opacity: 0;
}
.duration-100 {
  animation-duration: 100ms;
}
.duration-150 {
  animation-duration: 150ms;
}
.duration-200 {
  animation-duration: 200ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.duration-500 {
  animation-duration: 500ms;
}
.duration-75 {
  animation-duration: 75ms;
}
.ease-in {
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.running {
  animation-play-state: running;
}
/* Tailwind v3 shim: shadcn ui/* (generated for Tailwind v4) use the
   * `outline-hidden` utility, which does not exist in Tailwind v3, so focused
   * inputs/dialogs fell back to the browser default blue focus ring. Define it. */
.outline-hidden {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
/* The one shared card surface for tiny tiles/rows where <Card> is heavy
     (design-unification §1.5): identical to `bg-card border border-border
     rounded-xl` (rounded-xl = the Tailwind default 0.75rem here — only
     lg/md/sm are remapped to --radius). Never hand-roll that chrome ad hoc. */
.card-surface {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
  }
/* Numina motion vocabulary */
/* chrome: subtle opacity fade for nav/shell elements */
.transition-chrome {
    transition: opacity 200ms ease-out;
  }
@media (prefers-reduced-motion: reduce) { .transition-chrome { transition: none !important; } }
/* smooth: general interactive transitions */
.transition-smooth {
    transition: color 100ms ease-out, background-color 100ms ease-out, border-color 100ms ease-out, opacity 100ms ease-out, box-shadow 100ms ease-out;
  }
@media (prefers-reduced-motion: reduce) { .transition-smooth { transition: none !important; } }
/* theme-transition: expected by the vendored design-system shell (MobileAppShell)
     — soft cross-fade of surfaces when light/dark mode flips. */
.theme-transition {
    transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
  }
@media (prefers-reduced-motion: reduce) { .theme-transition { transition: none !important; } }
.animate-skeleton-pulse {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
  }
/* Fixed brand-gold ink — logo + earned-award accents ("gold is earned"). */
.text-accent-gold { color: var(--accent-gold); }
/* ── Tier utility classes — used by MyGrowth, tiles, detail panels ─────── */
/* Fill backgrounds (solid) */
.tier-fill-beginner { background-color: var(--tier-beginner) !important; }
.tier-fill-intermediate { background-color: var(--tier-intermediate) !important; }
.tier-fill-advanced { background-color: var(--tier-advanced) !important; }
.tier-fill-mastered { background-color: var(--tier-mastered) !important; }
/* Text colours — light uses the deep ramp stops directly; in dark the two
     low stops are too dark to read as TEXT on plum cards, so they lift to
     brighter same-hue companions (the fills keep the true ramp stops). */
.tier-text-beginner { color: var(--tier-beginner) !important; }
.tier-text-intermediate { color: var(--tier-intermediate) !important; }
.tier-text-advanced { color: var(--tier-advanced) !important; }
.tier-text-mastered { color: var(--tier-mastered) !important; }
.dark .tier-text-beginner { color: #9C94BF !important; }
.dark .tier-text-intermediate { color: #74B4B9 !important; }
/* ── Compact tier badge classes — vivid solid colours, white text ─────── */
.badge-tier-beginner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--tier-beginner) !important;
    color: white !important;
    border-radius: 9999px;
    padding: 0.1em 0.6em;
    font-size: 0.75rem;
    font-weight: 600;
  }
.badge-tier-intermediate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--tier-intermediate) !important;
    color: white !important;
    border-radius: 9999px;
    padding: 0.1em 0.6em;
    font-size: 0.75rem;
    font-weight: 600;
  }
.badge-tier-advanced {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--tier-advanced) !important;
    color: white !important;
    border-radius: 9999px;
    padding: 0.1em 0.6em;
    font-size: 0.75rem;
    font-weight: 600;
  }
.badge-tier-mastered {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--tier-mastered) !important;
    color: white !important;
    border-radius: 9999px;
    padding: 0.1em 0.6em;
    font-size: 0.75rem;
    font-weight: 600;
  }
/* Dark: the upper ramp stops are LIGHT mint fills — ink flips to evergreen. */
.dark .badge-tier-advanced { color: #14241F !important; }
.dark .badge-tier-mastered { color: #14241F !important; }
.badge-status-active {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
    /* Opaque per no-translucent-fills-on-dark; derives from the live tokens. */
    background-color: var(--color-success-soft);
    color: var(--color-success);
    border: 1px solid color-mix(in srgb, var(--color-success) 35%, var(--card));
}
.table-header {
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
    border-bottom: 1px solid var(--table-header-border);
  }
.table-row-selected {
    background-color: var(--table-row-selected);
  }
.table-row-selected:hover {
    background-color: var(--table-row-selected);
  }
.table-row {
  min-height: 52px;
  border-bottom-width: 1px;
  border-color: var(--border);
    transition: background-color 150ms ease-out;
}
@media (prefers-reduced-motion: reduce) { .table-row { transition: none !important; } }
.table-row:hover {
    background-color: var(--table-row-hover);
  }
.table-cell-numeric {
  text-align: right;
}
.animate-slide-up {
    animation: slideUp 150ms ease-out forwards;
  }
.question-pulse {
    animation: questionPulse 50ms ease-out forwards;
  }
.text-accent-dynamic {
    color: var(--accent-primary);
  }
.bg-accent-dynamic {
    background-color: var(--accent-primary);
  }
.border-accent-dynamic {
    border-color: var(--accent-primary);
  }
/* Card shadow — applied to all card surfaces */
/* (Removed: a global .card/.bg-card box-shadow rule silently resurrected
     shadows on every resting card, undoing the flat-card ruling. Interactive
     cards opt into shadow-sm at the call site.) */
.session-chrome-practice {
    --session-accent: var(--session-accent-practice);
  }
.session-chrome-forge {
    --session-accent: var(--session-accent-forge);
  }
.session-chrome-track-challenge {
    --session-accent: var(--session-accent-track-challenge);
  }
.session-chrome-numina-master {
    --session-accent: var(--session-accent-numina-master);
  }
.session-chrome-mixed-practice {
    --session-accent: var(--session-accent-mixed-practice);
  }
.session-chrome-placement {
    --session-accent: var(--session-accent-placement);
  }
.session-chrome-benchmark {
    --session-accent: var(--session-accent-benchmark);
  }
.session-chrome-class-challenge {
    --session-accent: var(--session-accent-class-challenge);
  }
.session-background-tint {
    /* Opaque tint (no alpha on dark): mix the session accent into the page bg. */
    background-color: color-mix(in srgb, var(--session-accent) calc(var(--session-chrome-tint-opacity) * 100%), var(--background)); transition: background-color var(--session-chrome-animation-duration) ease-out;
  }
.session-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-full); background-color: color-mix(in srgb, var(--session-accent) 12%, var(--background)); color: var(--session-accent); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.4;
  }
.\[--fb-bad-bg\:color-mix\(in_srgb\2c var\(--destructive\)_12\%\2c var\(--card\)\)\] {
  --fb-bad-bg: color-mix(in srgb,var(--destructive) 12%,var(--card));
}
.\[--fb-bad-disc-ink\:var\(--destructive-foreground\)\] {
  --fb-bad-disc-ink: var(--destructive-foreground);
}
.\[--fb-bad-disc\:var\(--destructive\)\] {
  --fb-bad-disc: var(--destructive);
}
.\[--fb-bad-ink\:var\(--destructive\)\] {
  --fb-bad-ink: var(--destructive);
}
.\[--fb-bad-sub\:var\(--muted-foreground\)\] {
  --fb-bad-sub: var(--muted-foreground);
}
.\[--fb-elite-bg\:var\(--accent-lightning-tint\)\] {
  --fb-elite-bg: var(--accent-lightning-tint);
}
.\[--fb-elite-ink\:var\(--accent-lightning-ink\)\] {
  --fb-elite-ink: var(--accent-lightning-ink);
}
.\[--fb-ok-bg\:color-mix\(in_srgb\2c var\(--color-success\)_14\%\2c var\(--card\)\)\] {
  --fb-ok-bg: color-mix(in srgb,var(--color-success) 14%,var(--card));
}
.\[--fb-ok-disc-ink\:var\(--card\)\] {
  --fb-ok-disc-ink: var(--card);
}
.\[--fb-ok-disc\:var\(--color-success\)\] {
  --fb-ok-disc: var(--color-success);
}
.\[--fb-ok-ink\:var\(--color-success\)\] {
  --fb-ok-ink: var(--color-success);
}
.\[--fb-ok-sub\:var\(--muted-foreground\)\] {
  --fb-ok-sub: var(--muted-foreground);
}
.\[--fb-streak-bg\:color-mix\(in_srgb\2c var\(--personal-accent\)_14\%\2c var\(--card\)\)\] {
  --fb-streak-bg: color-mix(in srgb,var(--personal-accent) 14%,var(--card));
}
.\[--fb-streak-ink\:var\(--personal-accent\)\] {
  --fb-streak-ink: var(--personal-accent);
}
.\[appearance\:textfield\] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}

/* ===== Dark mode token overrides ===== */
/* Applied when <html> has class="dark" (manual toggle) or via system preference
   via the useDarkMode hook. Only semantic + structural tokens need overriding;
   session chrome / award metallic colours are designed to work on any surface. */

/* ===== PERSONAL ACCENT (design lock 2026-07-16) ============================ */
/* The learner's chosen colour appears ONLY on their avatar ring, streak flame,
   and progress fills — CHROME NEVER TINTS (buttons/nav/tabs stay the locked
   mint voltage for every learner). The picker still sets data-accent="<id>" on
   <html>, but it now drives --personal-accent instead of --accent-primary.
   Every accent stays a LIGHT/DARK PAIR: deep enough to glow on porcelain,
   lifted so it pops on the plum room. Keep in sync with ACCENT_COLOURS in
   hooks/useAccentColour.ts. UNLAYERED on purpose: must override @layer base. */
:root {
  --accent-pair-blue: #3D6FC2;
  /* Lime replaced Teal 2026-07-24 (owner): teal sat on top of the mint
     voltage, so picking it looked like nothing happened. */
  --accent-pair-lime: #4D7C0F;
  --accent-pair-coral: #D4502F;
  --accent-pair-magenta: #BE185D;
  --accent-pair-purple: #8A5FD6;
  --accent-pair-green: #2E8B57;
  --accent-pair-orange: #B45309;
  --accent-pair-red: #B91C1C;
  --personal-accent: var(--accent-pair-blue);
  /* Derived personal tint — sanctioned homes only (ring/flame/progress). */
  --personal-accent-soft: color-mix(in srgb, var(--personal-accent) 14%, var(--card));
}
.dark {
  --accent-pair-blue: #7BA7E8;
  --accent-pair-lime: #A3E635;
  --accent-pair-coral: #FF8E7E;
  --accent-pair-magenta: #FF5CA8;
  --accent-pair-purple: #B48CF2;
  --accent-pair-green: #4ADE80;
  --accent-pair-orange: #FB923C;
  --accent-pair-red: #F87171;
}
:root[data-accent="blue"]    { --personal-accent: var(--accent-pair-blue); }
:root[data-accent="lime"]    { --personal-accent: var(--accent-pair-lime); }
:root[data-accent="coral"]   { --personal-accent: var(--accent-pair-coral); }
:root[data-accent="magenta"] { --personal-accent: var(--accent-pair-magenta); }
:root[data-accent="purple"]  { --personal-accent: var(--accent-pair-purple); }
:root[data-accent="green"]   { --personal-accent: var(--accent-pair-green); }
:root[data-accent="orange"]  { --personal-accent: var(--accent-pair-orange); }
:root[data-accent="red"]     { --personal-accent: var(--accent-pair-red); }

/* Sheen finish DELETED (design lock: flat fills everywhere; the owner rejected
   the gloss). The only rich finish left in the system is medal metal. */

/* ===== Active session per-type visual signatures ===== */

/* ── Accent bar animations for non-practice sessions ── */
@keyframes accent-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
/* Blinking caret for the pad-driven answer box (readOnly inputs show no caret) */
@keyframes pad-caret-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.pad-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  border-radius: 1px;
  background: var(--primary);
  vertical-align: middle;
  animation: pad-caret-blink 1.06s steps(1, end) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .pad-caret { animation: none; opacity: 1; }
}
@keyframes accent-slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
@keyframes elite-flash {
  0%   { background-color: var(--accent-lightning-tint); }
  20%  { background-color: var(--accent-lightning-flash); }
  80%  { background-color: var(--accent-lightning-flash); }
  100% { background-color: var(--accent-lightning-tint); }
}
.elite-flash {
  animation: elite-flash 0.5s ease-out;
}
.elite-bolt-icon {
  animation: bolt-pop 0.5s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .elite-flash { animation: none !important; }
  .elite-bolt-icon { animation: none !important; }
}
@keyframes bolt-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  30%  { transform: scale(1.2); opacity: 1; }
  60%  { transform: scale(1.0); opacity: 1; }
  100% { transform: scale(1.0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .accent-bar { animation: none !important; }
}

  * {
  border-color: var(--border);
}

  body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: auto;
  }

  /* Reduced motion: zero out all transitions and animations */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    .animate-skeleton-pulse {
      animation: none !important;
    }
    .animate-slide-up {
      animation: none !important;
    }
    .question-pulse {
      animation: none !important;
    }
  }

/* ─── Keyframes — top level (not inside @layer) ─────────────────────────── */

@keyframes skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes questionPulse {
  from {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
}

/* ─── Print styles — top level (not inside @layer) ───────────────────────── */

/* Default: track & challenge certs print landscape */
/* @page rule removed — Biome CSS parser does not support it.
   Modern browsers have reasonable print defaults for A4.
   If precise margins are needed, use a print stylesheet with @media print { body { margin: 15mm; } }
   or configure the print dialog. */

/* ─── Reduced motion — top level (not inside @layer) ────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

[data-slot="progress-indicator"] {
  min-width: 6px;
}

[data-radix-switch-root][data-state="checked"],
button[role="switch"][data-state="checked"],
[data-slot="switch"][data-state="checked"] {
  background-color: var(--accent-primary) !important;
}

/* ─── Print / Save as PDF ────────────────────────────────────────────────── */

@media print {
  @page {
    size: A4 portrait;
    margin: 20mm;
  }

  /* Hide everything by default */
  body > * {
    display: none !important;
  }

  /* Show only the certificate print root and its children */
  .certificate-print-root,
  .certificate-print-root * {
    display: revert !important;
    visibility: visible !important;
  }

  /* Ensure the print root is the only thing visible */
  body {
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Isolate the certificate card */
  .certificate-print-root {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20mm !important;
    box-sizing: border-box !important;
  }

  .certificate-card {
    box-shadow: none !important;
    border: none !important;
    page-break-inside: avoid !important;
    -moz-column-break-inside: avoid !important;
         break-inside: avoid !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* Hide the print actions button bar */
  .no-print {
    display: none !important;
  }
}

/* ── Role-based Today page ─────────────────────────────────────────────── */
.streak-recovery-banner {
  background: var(--card);
  border-left: 3px solid var(--muted-foreground);
  border-radius: 0 var(--radius-md, 0.5rem) var(--radius-md, 0.5rem) 0;
  padding: 12px 16px;
}

@keyframes spinner-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.animate-spinner {
  animation: spinner-rotate 1.2s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .animate-spinner {
    animation: none !important;
  }
}

.session-chrome-header-badge {
  /* Opaque tint (was an alpha wash — no-translucent-fills-on-dark); same formula
     as .session-badge. */
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-full); background-color: color-mix(in srgb, var(--session-accent) 12%, var(--background)); color: var(--session-accent); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.4;
}

.session-chrome-exercise-label {
  font-size: 14px; font-weight: 500; color: var(--foreground); line-height: 1.3;
}

.session-chrome-progress-bar {
  height: 2px; width: 100%; background-color: var(--muted); border-radius: var(--radius-full); overflow: hidden;
}

.session-chrome-progress-fill {
  height: 100%; background-color: var(--session-accent); transition: width var(--duration-progress) var(--easing-decelerate); min-width: 2px;
}

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

.numina-master-glow {
  box-shadow: 0 0 40px color-mix(in oklch, var(--session-numina-accent) 25%, transparent);
}

/* ── Medal metal utilities ─────────────────────────────────────────────────
   Physical-metal chips + coins. Metal is metal — identical treatment in light
   and dark (the gradients are literal metal, not theme tokens). Glow shadows on
   coins are emitted light, not a surface fill, so they are allowed on dark. */

/* CHIP — inline tier pill */
.medal-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.medal-chip svg {
  width: 14px;
  height: 14px;
}
.medal-chip-gold {
  background: linear-gradient(150deg, #FFE79A 0%, #FFC61A 52%, #E09600 100%);
  color: #4A3500;
}
.medal-chip-silver {
  background: linear-gradient(150deg, #F7F9FC 0%, #C9CFDB 52%, #9BA2B2 100%);
  color: #333A4C;
}
.medal-chip-bronze {
  background: linear-gradient(150deg, #F3BE86 0%, #D67E33 52%, #A75D24 100%);
  color: #45250C;
}

/* COIN — medallion. Default 44px; size hook via --medal-coin-size. */
.medal-coin {
  width: var(--medal-coin-size, 44px);
  height: var(--medal-coin-size, 44px);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.medal-coin-gold {
  background: radial-gradient(circle at 34% 28%, #FFF3BE 0%, #FFC824 50%, #C98A00 100%);
  border: 2px solid #FFE488;
  box-shadow: 0 0 16px rgba(255, 200, 0, 0.5);
  color: #5A3F00;
}
.medal-coin-silver {
  background: radial-gradient(circle at 34% 28%, #FFFFFF 0%, #CDD3DF 52%, #969DAD 100%);
  border: 2px solid #E6EAF2;
  box-shadow: 0 0 14px rgba(205, 211, 223, 0.4);
  color: #3A4152;
}
.medal-coin-bronze {
  background: radial-gradient(circle at 34% 28%, #F8CF9E 0%, #D67E33 52%, #9E561F 100%);
  border: 2px solid #F0B074;
  box-shadow: 0 0 15px rgba(214, 126, 51, 0.46);
  color: #4A2A10;
}
.selection\:bg-primary *::-moz-selection {
  background-color: var(--primary);
}
.selection\:bg-primary *::selection {
  background-color: var(--primary);
}
.selection\:text-primary-foreground *::-moz-selection {
  color: var(--primary-foreground);
}
.selection\:text-primary-foreground *::selection {
  color: var(--primary-foreground);
}
.selection\:bg-primary::-moz-selection {
  background-color: var(--primary);
}
.selection\:bg-primary::selection {
  background-color: var(--primary);
}
.selection\:text-primary-foreground::-moz-selection {
  color: var(--primary-foreground);
}
.selection\:text-primary-foreground::selection {
  color: var(--primary-foreground);
}
.file\:inline-flex::file-selector-button {
  display: inline-flex;
}
.file\:h-7::file-selector-button {
  height: 1.75rem;
}
.file\:border-0::file-selector-button {
  border-width: 0px;
}
.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}
.file\:text-sm::file-selector-button {
  font-size: 14px;
  line-height: 1.5;
}
.file\:font-medium::file-selector-button {
  font-weight: 500;
}
.file\:text-foreground::file-selector-button {
  color: var(--foreground);
}
.placeholder\:text-muted-foreground::-moz-placeholder {
  color: var(--muted-foreground);
}
.placeholder\:text-muted-foreground::placeholder {
  color: var(--muted-foreground);
}
.before\:absolute::before {
  content: var(--tw-content);
  position: absolute;
}
.before\:-inset-3\.5::before {
  content: var(--tw-content);
  inset: -0.875rem;
}
.before\:content-\[\'\'\]::before {
  --tw-content: '';
  content: var(--tw-content);
}
.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}
.after\:-inset-3\.5::after {
  content: var(--tw-content);
  inset: -0.875rem;
}
.after\:content-\[\'\'\]::after {
  --tw-content: '';
  content: var(--tw-content);
}
.first\:pt-2:first-child {
  padding-top: 0.5rem;
}
.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}
.last\:pb-2:last-child {
  padding-bottom: 0.5rem;
}
.focus-within\:border-ring:focus-within {
  border-color: var(--ring);
}
.focus-within\:ring-\[3px\]:focus-within {
  --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);
}
.hover\:scale-105:hover {
  --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));
}
.hover\:border-\[color-mix\(in_srgb\2c var\(--accent-lightning\)_40\%\2c var\(--border\)\)\]:hover {
  border-color: color-mix(in srgb,var(--accent-lightning) 40%,var(--border));
}
.hover\:border-\[color-mix\(in_srgb\2c var\(--accent-primary\)_40\%\2c var\(--border\)\)\]:hover {
  border-color: color-mix(in srgb,var(--accent-primary) 40%,var(--border));
}
.hover\:border-\[color-mix\(in_srgb\2c var\(--foreground\)_30\%\2c var\(--card\)\)\]:hover {
  border-color: color-mix(in srgb,var(--foreground) 30%,var(--card));
}
.hover\:border-\[color-mix\(in_srgb\2c var\(--muted-foreground\)_40\%\2c var\(--background\)\)\]:hover {
  border-color: color-mix(in srgb,var(--muted-foreground) 40%,var(--background));
}
.hover\:border-\[color-mix\(in_srgb\2c var\(--muted-foreground\)_40\%\2c var\(--card\)\)\]:hover {
  border-color: color-mix(in srgb,var(--muted-foreground) 40%,var(--card));
}
.hover\:border-\[var\(--accent-primary-border\)\]:hover {
  border-color: var(--accent-primary-border);
}
.hover\:border-\[var\(--muted-foreground\)\]:hover {
  border-color: var(--muted-foreground);
}
.hover\:border-primary:hover {
  border-color: var(--primary);
}
.hover\:bg-\[color-mix\(in_srgb\2c var\(--accent-primary\)_10\%\2c var\(--card\)\)\]:hover {
  background-color: color-mix(in srgb,var(--accent-primary) 10%,var(--card));
}
.hover\:bg-\[color-mix\(in_srgb\2c var\(--border\)_30\%\2c var\(--card\)\)\]:hover {
  background-color: color-mix(in srgb,var(--border) 30%,var(--card));
}
.hover\:bg-\[color-mix\(in_srgb\2c var\(--destructive\)_6\%\2c var\(--card\)\)\]:hover {
  background-color: color-mix(in srgb,var(--destructive) 6%,var(--card));
}
.hover\:bg-\[color-mix\(in_srgb\2c var\(--destructive\)_90\%\2c var\(--card\)\)\]:hover {
  background-color: color-mix(in srgb,var(--destructive) 90%,var(--card));
}
.hover\:bg-\[color-mix\(in_srgb\2c var\(--muted\)_40\%\2c var\(--card\)\)\]:hover {
  background-color: color-mix(in srgb,var(--muted) 40%,var(--card));
}
.hover\:bg-\[color-mix\(in_srgb\2c var\(--primary\)_5\%\2c var\(--background\)\)\]:hover {
  background-color: color-mix(in srgb,var(--primary) 5%,var(--background));
}
.hover\:bg-\[color-mix\(in_srgb\2c var\(--primary\)_6\%\2c var\(--card\)\)\]:hover {
  background-color: color-mix(in srgb,var(--primary) 6%,var(--card));
}
.hover\:bg-\[color-mix\(in_srgb\2c var\(--primary\)_90\%\2c var\(--card\)\)\]:hover {
  background-color: color-mix(in srgb,var(--primary) 90%,var(--card));
}
.hover\:bg-\[color-mix\(in_srgb\2c var\(--secondary\)_80\%\2c var\(--card\)\)\]:hover {
  background-color: color-mix(in srgb,var(--secondary) 80%,var(--card));
}
.hover\:bg-\[hsl\(var\(--highlight\2c var\(--primary\)\)\)\]:hover {
  background-color: hsl(var(--highlight,var(--primary)));
}
.hover\:bg-\[var\(--nav-active-pill\)\]:hover {
  background-color: var(--nav-active-pill);
}
.hover\:bg-accent:hover {
  background-color: var(--muted);
}
.hover\:bg-background:hover {
  background-color: var(--background);
}
.hover\:bg-card:hover {
  background-color: var(--card);
}
.hover\:bg-muted:hover {
  background-color: var(--muted);
}
.hover\:bg-primary:hover {
  background-color: var(--primary);
}
.hover\:bg-transparent:hover {
  background-color: transparent;
}
.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}
.hover\:bg-white\/15:hover {
  background-color: rgb(255 255 255 / 0.15);
}
.hover\:text-\[var\(--accent-primary\)\]:hover {
  color: var(--accent-primary);
}
.hover\:text-accent-foreground:hover {
  color: var(--foreground);
}
.hover\:text-foreground:hover {
  color: var(--foreground);
}
.hover\:text-muted-foreground:hover {
  color: var(--muted-foreground);
}
.hover\:text-primary:hover {
  color: var(--primary);
}
.hover\:text-primary-foreground:hover {
  color: var(--primary-foreground);
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.hover\:opacity-75:hover {
  opacity: 0.75;
}
.hover\:opacity-80:hover {
  opacity: 0.8;
}
.hover\:opacity-90:hover {
  opacity: 0.9;
}
.hover\:shadow-\[0_28px_60px_-20px_color-mix\(in_srgb\2c var\(--accent-primary\)_55\%\2c transparent\)\]:hover {
  --tw-shadow: 0 28px 60px -20px color-mix(in srgb,var(--accent-primary) 55%,transparent);
  --tw-shadow-colored: 0 28px 60px -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);
}
.hover\:shadow-md:hover {
  --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);
}
.hover\:ring-1:hover {
  --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);
}
.hover\:ring-2:hover {
  --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);
}
.hover\:ring-4:hover {
  --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(4px + 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);
}
.hover\:ring-\[var\(--accent-primary\)\]:hover {
  --tw-ring-color: var(--accent-primary);
}
.hover\:ring-border:hover {
  --tw-ring-color: var(--border);
}
.hover\:ring-offset-1:hover {
  --tw-ring-offset-width: 1px;
}
.hover\:ring-offset-card:hover {
  --tw-ring-offset-color: var(--card);
}
.hover\:brightness-95:hover {
  --tw-brightness: brightness(.95);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
.focus\:fixed:focus {
  position: fixed;
}
.focus\:left-2:focus {
  left: 0.5rem;
}
.focus\:top-2:focus {
  top: 0.5rem;
}
.focus\:z-\[60\]:focus {
  z-index: 60;
}
.focus\:rounded-xl:focus {
  border-radius: 0.75rem;
}
.focus\:bg-card:focus {
  background-color: var(--card);
}
.focus\:bg-primary:focus {
  background-color: var(--primary);
}
.focus\:px-4:focus {
  padding-left: 1rem;
  padding-right: 1rem;
}
.focus\:py-2:focus {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.focus\:text-sm:focus {
  font-size: 14px;
  line-height: 1.5;
}
.focus\:font-medium:focus {
  font-weight: 500;
}
.focus\:text-primary-foreground:focus {
  color: var(--primary-foreground);
}
.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-visible\:not-sr-only:focus-visible {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
.focus-visible\:fixed:focus-visible {
  position: fixed;
}
.focus-visible\:left-2:focus-visible {
  left: 0.5rem;
}
.focus-visible\:top-2:focus-visible {
  top: 0.5rem;
}
.focus-visible\:z-\[60\]:focus-visible {
  z-index: 60;
}
.focus-visible\:rounded-xl:focus-visible {
  border-radius: 0.75rem;
}
.focus-visible\:border:focus-visible {
  border-width: 1px;
}
.focus-visible\:border-border:focus-visible {
  border-color: var(--border);
}
.focus-visible\:border-primary:focus-visible {
  border-color: var(--primary);
}
.focus-visible\:border-ring:focus-visible {
  border-color: var(--ring);
}
.focus-visible\:bg-card:focus-visible {
  background-color: var(--card);
}
.focus-visible\:px-4:focus-visible {
  padding-left: 1rem;
  padding-right: 1rem;
}
.focus-visible\:py-2:focus-visible {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.focus-visible\:text-sm:focus-visible {
  font-size: 14px;
  line-height: 1.5;
}
.focus-visible\:font-medium:focus-visible {
  font-weight: 500;
}
.focus-visible\:text-foreground:focus-visible {
  color: var(--foreground);
}
.focus-visible\:opacity-100:focus-visible {
  opacity: 1;
}
.focus-visible\:shadow-md:focus-visible {
  --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);
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:ring-0:focus-visible {
  --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(0px + 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-visible\:ring-2:focus-visible {
  --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-visible\:ring-4:focus-visible {
  --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(4px + 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-visible\:ring-\[3px\]:focus-visible {
  --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);
}
.focus-visible\:ring-inset:focus-visible {
  --tw-ring-inset: inset;
}
.focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
}
.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:outline-hidden:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  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));
}
.active\:scale-\[0\.99\]:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  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));
}
.active\:border-border:active {
  border-color: var(--border);
}
.active\:bg-\[color-mix\(in_srgb\2c var\(--border\)_50\%\2c var\(--card\)\)\]:active {
  background-color: color-mix(in srgb,var(--border) 50%,var(--card));
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:border-border:disabled {
  border-color: var(--border);
}
.disabled\:bg-muted:disabled {
  background-color: var(--muted);
}
.disabled\:text-muted-foreground:disabled {
  color: var(--muted-foreground);
}
.disabled\:opacity-30:disabled {
  opacity: 0.3;
}
.disabled\:opacity-40:disabled {
  opacity: 0.4;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.group:hover .group-hover\:border-\[var\(--accent-primary-border\)\] {
  border-color: var(--accent-primary-border);
}
.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
  cursor: not-allowed;
}
.peer:disabled ~ .peer-disabled\:opacity-50 {
  opacity: 0.5;
}
.has-\[\>svg\]\:px-2\.5:has(>svg) {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.has-\[\>svg\]\:px-3:has(>svg) {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.has-\[\>svg\]\:px-4:has(>svg) {
  padding-left: 1rem;
  padding-right: 1rem;
}
.has-\[\>svg\]\:px-5:has(>svg) {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.has-\[\>svg\]\:px-6:has(>svg) {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.data-\[orientation\=horizontal\]\:h-1\.5[data-orientation="horizontal"] {
  height: 0.375rem;
}
.data-\[orientation\=horizontal\]\:h-full[data-orientation="horizontal"] {
  height: 100%;
}
.data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"] {
  height: 100%;
}
.data-\[orientation\=vertical\]\:min-h-44[data-orientation="vertical"] {
  min-height: 11rem;
}
.data-\[orientation\=horizontal\]\:w-full[data-orientation="horizontal"] {
  width: 100%;
}
.data-\[orientation\=vertical\]\:w-1\.5[data-orientation="vertical"] {
  width: 0.375rem;
}
.data-\[orientation\=vertical\]\:w-auto[data-orientation="vertical"] {
  width: auto;
}
.data-\[orientation\=vertical\]\:w-full[data-orientation="vertical"] {
  width: 100%;
}
.data-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"] {
  flex-direction: column;
}
.data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 0.5;
}
.data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}
.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}
.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}
.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -0.5rem;
}
.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: 0.5rem;
}
.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -0.5rem;
}
.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: 0.5rem;
}
.group[data-disabled="true"] .group-data-\[disabled\=true\]\:pointer-events-none {
  pointer-events: none;
}
.group[data-disabled="true"] .group-data-\[disabled\=true\]\:opacity-50 {
  opacity: 0.5;
}
@media (prefers-reduced-motion: no-preference) {

  .motion-safe\:scroll-smooth {
    scroll-behavior: smooth;
  }

  .motion-safe\:duration-200 {
    transition-duration: 200ms;
  }

  .motion-safe\:animate-in {
    animation-name: enter;
    animation-duration: 150ms;
    --tw-enter-opacity: initial;
    --tw-enter-scale: initial;
    --tw-enter-rotate: initial;
    --tw-enter-translate-x: initial;
    --tw-enter-translate-y: initial;
  }

  .motion-safe\:fade-in {
    --tw-enter-opacity: 0;
  }

  .motion-safe\:slide-in-from-top-1 {
    --tw-enter-translate-y: -0.25rem;
  }

  .motion-safe\:duration-200 {
    animation-duration: 200ms;
  }
}
.dark\:border-input:is(.dark *) {
  border-color: var(--input);
}
.dark\:bg-\[color-mix\(in_srgb\2c var\(--destructive\)_60\%\2c var\(--card\)\)\]:is(.dark *) {
  background-color: color-mix(in srgb,var(--destructive) 60%,var(--card));
}
.dark\:bg-\[color-mix\(in_srgb\2c var\(--input\)_30\%\2c var\(--card\)\)\]:is(.dark *) {
  background-color: color-mix(in srgb,var(--input) 30%,var(--card));
}
.dark\:text-\[color-mix\(in_srgb\2c var\(--accent-lightning\)_65\%\2c white\)\]:is(.dark *) {
  color: color-mix(in srgb,var(--accent-lightning) 65%,white);
}
.dark\:\[--fb-bad-bg\:var\(--destructive\)\]:is(.dark *) {
  --fb-bad-bg: var(--destructive);
}
.dark\:\[--fb-bad-disc-ink\:var\(--destructive\)\]:is(.dark *) {
  --fb-bad-disc-ink: var(--destructive);
}
.dark\:\[--fb-bad-disc\:\#2B1219\]:is(.dark *) {
  --fb-bad-disc: #2B1219;
}
.dark\:\[--fb-bad-ink\:\#2B1219\]:is(.dark *) {
  --fb-bad-ink: #2B1219;
}
.dark\:\[--fb-bad-sub\:\#2B1219\]:is(.dark *) {
  --fb-bad-sub: #2B1219;
}
.dark\:\[--fb-elite-bg\:color-mix\(in_srgb\2c var\(--accent-lightning\)_35\%\2c var\(--card\)\)\]:is(.dark *) {
  --fb-elite-bg: color-mix(in srgb,var(--accent-lightning) 35%,var(--card));
}
.dark\:\[--fb-elite-ink\:color-mix\(in_srgb\2c var\(--accent-lightning\)_65\%\2c white\)\]:is(.dark *) {
  --fb-elite-ink: color-mix(in srgb,var(--accent-lightning) 65%,white);
}
.dark\:\[--fb-ok-bg\:var\(--accent-primary\)\]:is(.dark *) {
  --fb-ok-bg: var(--accent-primary);
}
.dark\:\[--fb-ok-disc-ink\:var\(--accent-primary\)\]:is(.dark *) {
  --fb-ok-disc-ink: var(--accent-primary);
}
.dark\:\[--fb-ok-disc\:\#14241F\]:is(.dark *) {
  --fb-ok-disc: #14241F;
}
.dark\:\[--fb-ok-ink\:\#14241F\]:is(.dark *) {
  --fb-ok-ink: #14241F;
}
.dark\:\[--fb-ok-sub\:\#14241F\]:is(.dark *) {
  --fb-ok-sub: #14241F;
}
.dark\:\[--fb-streak-bg\:var\(--background\)\]:is(.dark *) {
  --fb-streak-bg: var(--background);
}
.dark\:\[--fb-streak-ink\:var\(--personal-accent\)\]:is(.dark *) {
  --fb-streak-ink: var(--personal-accent);
}
.dark\:hover\:bg-\[color-mix\(in_srgb\2c var\(--input\)_50\%\2c var\(--card\)\)\]:hover:is(.dark *) {
  background-color: color-mix(in srgb,var(--input) 50%,var(--card));
}
.dark\:hover\:bg-\[color-mix\(in_srgb\2c var\(--muted\)_60\%\2c var\(--card\)\)\]:hover:is(.dark *) {
  background-color: color-mix(in srgb,var(--muted) 60%,var(--card));
}
@media not all and (min-width: 1024px) {

  .max-lg\:hidden {
    display: none;
  }
}
@media not all and (min-width: 768px) {

  .max-md\:order-1 {
    order: 1;
  }

  .max-md\:order-2 {
    order: 2;
  }

  .max-md\:hidden {
    display: none;
  }
}
@media not all and (min-width: 640px) {

  .max-sm\:data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
    --tw-enter-translate-y: 100%;
  }
}
@media (min-width: 640px) {

  .sm\:inset-x-auto {
    left: auto;
    right: auto;
  }

  .sm\:bottom-auto {
    bottom: auto;
  }

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

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

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

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

  .sm\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .sm\:mb-10 {
    margin-bottom: 2.5rem;
  }

  .sm\:mb-4 {
    margin-bottom: 1rem;
  }

  .sm\:mt-6 {
    margin-top: 1.5rem;
  }

  .sm\:block {
    display: block;
  }

  .sm\:flex {
    display: flex;
  }

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

  .sm\:hidden {
    display: none;
  }

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

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

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

  .sm\:min-h-\[calc\(100dvh-3\.5rem\)\] {
    min-height: calc(100dvh - 3.5rem);
  }

  .sm\:w-32 {
    width: 8rem;
  }

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

  .sm\:w-full {
    width: 100%;
  }

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

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

  .sm\:max-w-md {
    max-width: 28rem;
  }

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

  .sm\:flex-none {
    flex: none;
  }

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

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

  .sm\:snap-y {
    scroll-snap-type: y var(--tw-scroll-snap-strictness);
  }

  .sm\:snap-mandatory {
    --tw-scroll-snap-strictness: mandatory;
  }

  .sm\:snap-start {
    scroll-snap-align: start;
  }

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

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

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

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

  .sm\:justify-center {
    justify-content: center;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-6 {
    gap: 1.5rem;
  }

  .sm\:gap-8 {
    gap: 2rem;
  }

  .sm\:rounded-xl {
    border-radius: 0.75rem;
  }

  .sm\:border {
    border-width: 1px;
  }

  .sm\:border-border {
    border-color: var(--border);
  }

  .sm\:bg-\[color-mix\(in_srgb\2c var\(--muted\)_40\%\2c var\(--card\)\)\] {
    background-color: color-mix(in srgb,var(--muted) 40%,var(--card));
  }

  .sm\:bg-card {
    background-color: var(--card);
  }

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

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

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

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

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

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

  .sm\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

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

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

  .sm\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

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

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

  .sm\:pb-9 {
    padding-bottom: 2.25rem;
  }

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

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

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

  .sm\:data-\[state\=open\]\:zoom-in-95[data-state="open"] {
    --tw-enter-scale: .95;
  }
}
@media (min-width: 768px) {

  .md\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .md\:block {
    display: block;
  }

  .md\:inline {
    display: inline;
  }

  .md\:grid {
    display: grid;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-9 {
    height: 2.25rem;
  }

  .md\:min-h-0 {
    min-height: 0px;
  }

  .md\:min-w-0 {
    min-width: 0px;
  }

  .md\:max-w-md {
    max-width: 28rem;
  }

  .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-\[auto_1fr\] {
    grid-template-columns: auto 1fr;
  }

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

  .md\:gap-6 {
    gap: 1.5rem;
  }

  .md\:gap-x-4 {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }

  .md\:rounded-t-2xl {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
  }

  .md\:border-x {
    border-left-width: 1px;
    border-right-width: 1px;
  }

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

  .md\:p-4 {
    padding: 1rem;
  }

  .md\:text-sm {
    font-size: 14px;
    line-height: 1.5;
  }

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

  .group:hover .md\:group-hover\:opacity-100 {
    opacity: 1;
  }
}
@media (min-width: 1024px) {

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

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

  .lg\:order-none {
    order: 0;
  }

  .lg\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .lg\:mb-0 {
    margin-bottom: 0px;
  }

  .lg\:mb-2 {
    margin-bottom: 0.5rem;
  }

  .lg\:mb-6 {
    margin-bottom: 1.5rem;
  }

  .lg\:ml-2 {
    margin-left: 0.5rem;
  }

  .lg\:mt-0 {
    margin-top: 0px;
  }

  .lg\:mt-1 {
    margin-top: 0.25rem;
  }

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

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

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

  .lg\:hidden {
    display: none;
  }

  .lg\:size-10 {
    width: 2.5rem;
    height: 2.5rem;
  }

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

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

  .lg\:h-auto {
    height: auto;
  }

  .lg\:min-h-0 {
    min-height: 0px;
  }

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

  .lg\:min-h-9 {
    min-height: 2.25rem;
  }

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

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

  .lg\:min-h-min {
    min-height: -moz-min-content;
    min-height: min-content;
  }

  .lg\:w-\[30px\] {
    width: 30px;
  }

  .lg\:w-full {
    width: 100%;
  }

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

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

  .lg\:flex-none {
    flex: none;
  }

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

  .lg\:grid-cols-\[1\.1fr_0\.9fr\] {
    grid-template-columns: 1.1fr 0.9fr;
  }

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

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

  .lg\:justify-center {
    justify-content: center;
  }

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

  .lg\:gap-2 {
    gap: 0.5rem;
  }

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

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

  .lg\:gap-\[18px\] {
    gap: 18px;
  }

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

  .lg\:justify-self-end {
    justify-self: end;
  }

  .lg\:overflow-hidden {
    overflow: hidden;
  }

  .lg\:rounded-2xl {
    border-radius: 1rem;
  }

  .lg\:border {
    border-width: 1px;
  }

  .lg\:border-t {
    border-top-width: 1px;
  }

  .lg\:border-t-0 {
    border-top-width: 0px;
  }

  .lg\:border-solid {
    border-style: solid;
  }

  .lg\:border-\[color-mix\(in_srgb\2c var\(--accent-gold\)_45\%\2c var\(--card\)\)\] {
    border-color: color-mix(in srgb,var(--accent-gold) 45%,var(--card));
  }

  .lg\:border-\[var\(--border\)\] {
    border-color: var(--border);
  }

  .lg\:bg-\[color-mix\(in_srgb\2c var\(--accent-gold\)_12\%\2c var\(--card\)\)\] {
    background-color: color-mix(in srgb,var(--accent-gold) 12%,var(--card));
  }

  .lg\:bg-\[var\(--card\)\] {
    background-color: var(--card);
  }

  .lg\:bg-muted {
    background-color: var(--muted);
  }

  .lg\:p-0\.5 {
    padding: 0.125rem;
  }

  .lg\:p-3 {
    padding: 0.75rem;
  }

  .lg\:p-4 {
    padding: 1rem;
  }

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

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

  .lg\:py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

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

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

  .lg\:py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

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

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

  .lg\:pl-5 {
    padding-left: 1.25rem;
  }

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

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

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

  .lg\: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);
  }
  .lg\:card-surface {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
  }
  .lg\:hover\:bg-muted:hover {
    background-color: var(--muted);
  }
}
@media (min-width: 1280px) {

  .xl\:inline {
    display: inline;
  }

  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (orientation: landscape) {

  .landscape\:h-11 {
    height: 2.75rem;
  }
}
.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
  padding-right: 0px;
}
.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox] {
  --tw-translate-y: 2px;
  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));
}
.\[\&\>svg\]\:pointer-events-none>svg {
  pointer-events: none;
}
.\[\&\>svg\]\:size-3>svg {
  width: 0.75rem;
  height: 0.75rem;
}
.\[\&\>svg\]\:h-auto>svg {
  height: auto;
}
.\[\&\>svg\]\:w-full>svg {
  width: 100%;
}
.\[\&\>tr\]\:last\:border-b-0:last-child>tr {
  border-bottom-width: 0px;
}
.\[\&_a\]\:min-h-12 a {
  min-height: 3rem;
}
.\[\&_a\]\:w-full a {
  width: 100%;
}
.\[\&_a\]\:text-body a {
  font-size: 16px;
  line-height: 1.55;
}
.\[\&_button\]\:min-h-12 button {
  min-height: 3rem;
}
.\[\&_button\]\:w-full button {
  width: 100%;
}
.\[\&_button\]\:text-body button {
  font-size: 16px;
  line-height: 1.55;
}
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*='size-']) {
  width: 1rem;
  height: 1rem;
}
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-5 svg:not([class*='size-']) {
  width: 1.25rem;
  height: 1.25rem;
}
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-6 svg:not([class*='size-']) {
  width: 1.5rem;
  height: 1.5rem;
}
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-auto svg:not([class*='size-']) {
  width: auto;
  height: auto;
}
.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}
.\[\&_svg\]\:size-4 svg {
  width: 1rem;
  height: 1rem;
}
.\[\&_svg\]\:size-5 svg {
  width: 1.25rem;
  height: 1.25rem;
}
.\[\&_svg\]\:size-6 svg {
  width: 1.5rem;
  height: 1.5rem;
}
.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}
.\[\&_tr\:last-child_td\]\:border-0 tr:last-child td {
  border-width: 0px;
}
a.\[a\&\]\:min-h-11 {
  min-height: 2.75rem;
}
a.\[a\&\]\:px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
a.\[a\&\]\:hover\:bg-\[color-mix\(in_srgb\2c var\(--destructive\)_90\%\2c var\(--card\)\)\]:hover {
  background-color: color-mix(in srgb,var(--destructive) 90%,var(--card));
}
a.\[a\&\]\:hover\:bg-\[color-mix\(in_srgb\2c var\(--primary\)_90\%\2c var\(--card\)\)\]:hover {
  background-color: color-mix(in srgb,var(--primary) 90%,var(--card));
}
a.\[a\&\]\:hover\:bg-\[color-mix\(in_srgb\2c var\(--secondary\)_90\%\2c var\(--card\)\)\]:hover {
  background-color: color-mix(in srgb,var(--secondary) 90%,var(--card));
}
a.\[a\&\]\:hover\:bg-accent:hover {
  background-color: var(--muted);
}
a.\[a\&\]\:hover\:text-accent-foreground:hover {
  color: var(--foreground);
}
button.\[button\&\]\:min-h-11 {
  min-height: 2.75rem;
}
button.\[button\&\]\:px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}