/* Generated from @lingobite/design-tokens. Do not edit. */
:root {
  --teal: #176B58;
  --teal-deep: #125442;
  --teal-soft: #E2EDE6;
  --purple: #176B58;
  --purple-soft: #E2EDE6;
  --lavender: #73938a;
  --off-white: #F6F5F0;
  --gold: #ba9050;
  --gold-deep: #866328;
  --gold-ink: #866328;
  --gold-soft: #f1e8d7;
  --horn-yellow: #ba9050;
  --pink: #af6470;
  --pink-soft: #f2e4e5;
  --sky: #537d96;
  --sky-soft: #e4ebef;
  --ink: #242B27;
  --ink-soft: #465249;
  --ink-muted: #6b746d;
  --ink-faint: #717a73;
  --line: #e2e5de;
  --white: #FFFefa;
  --danger: #b44347;
  --danger-ink: #9b3038;
  --danger-on: #fffefa;
  --danger-soft: #f6e4e4;
  --night: #181D1A;
  --night-surface: #222925;
  --night-surface-alt: #2B332E;
  --night-line: #374139;
  --night-text: #EDF0E8;
  --night-muted: #ADB8AE;
  --night-faint: #9AA89C;
  --overlay: rgba(46, 38, 34, 0.55);
  --night-overlay: rgba(0, 0, 0, 0.6);
  --cream: var(--off-white);
  --cream-alt: #edefe7;
  --stage-learning: var(--teal-deep);
  --stage-known: var(--gold-deep);
  --stage-skipped: var(--ink-muted);
  --band-0: #8bc34a;
  --band-1: #cddc39;
  --band-2: #ffc107;
  --band-3: #ff9800;
  --band-4: #f44336;
  --r-xs: 6px;
  --r-sm: 12px;
  --r-md: 14px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-card: 16px;
  --r-pill: 999px;
  --s-xxs: 2px;
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;
  --font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 600;
  --font-display: 600;
  --nav-width: 218px;
  --nav-width-mini: 70px;
  --dur-instant: 80ms;
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
  --ease-spring: cubic-bezier(0.3, 1.3, 0.4, 1);
  --focus-ring: 2px solid var(--accent);
  --focus-ring-offset: 2px;
}

:root,
:root[data-theme="light"] {
  --bg: var(--off-white);
  --surface: var(--white);
  --surface-alt: #edefe7;
  --border: #E3E6DD;
  --text: var(--ink);
  --text-muted: #647067;
  --text-faint: #707A72;
  --accent: var(--teal);
  --accent-deep: var(--teal-deep);
  --accent-soft: var(--teal-soft);
  --accent-on: var(--white);
  --accent-text: #FFFefa;
  --teal-dim: rgba(39, 107, 93, 0.15);
  --purple-dim: rgba(39, 107, 93, 0.12);
  --gold-dim: rgba(254, 202, 87, 0.15);
  --tabbar: var(--purple);
  --tabbar-active: var(--teal);
  --tabbar-inactive: var(--ink-muted);
  --gold-strong: var(--gold-deep);
  --gold-soft-strong: var(--gold-soft);
  --danger-strong: var(--danger);
  --danger-soft-strong: var(--danger-soft);
  --track: #E3E6DD;
  --wash: #edefe7;
  --scrim: var(--overlay);
  --accent-glow: 0 0 12px rgba(39, 107, 93, 0.18);
  --shadow-color: rgba(46, 38, 34, 0.12);
  --shadow-color-sm: rgba(46, 38, 34, 0.1);
  --code-bg: var(--wash);
  --nav-bg: var(--bg);
  --nav-active: rgba(46, 38, 34, 0.08);
  --input-bg: var(--surface-alt);
  --hover: rgba(46, 38, 34, 0.05);
  --active: rgba(46, 38, 34, 0.09);
  --skeleton-base: var(--track);
  --skeleton-shine: rgba(255, 255, 255, 0.55);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: var(--night);
  --surface: var(--night-surface);
  --surface-alt: var(--night-surface-alt);
  --border: var(--night-line);
  --text: var(--night-text);
  --text-muted: var(--night-muted);
  --text-faint: var(--night-faint);
  --accent: var(--teal);
  --accent-deep: var(--teal-deep);
  --accent-soft: #1f3e3a;
  --accent-on: var(--night);
  --accent-text: var(--night);
  --teal-dim: rgba(39, 107, 93, 0.18);
  --purple-dim: rgba(39, 107, 93, 0.22);
  --gold-dim: rgba(254, 202, 87, 0.16);
  --tabbar: var(--purple);
  --tabbar-active: var(--teal);
  --tabbar-inactive: var(--night-muted);
  --gold-strong: var(--gold);
  --gold-soft-strong: #3a301d;
  --danger-strong: #ff6b72;
  --danger-ink: #f29b95;
  --danger-on: #181d1a;
  --gold-ink: #dfca9e;
  --danger-soft-strong: #3e2326;
  --track: #374139;
  --wash: var(--night-surface-alt);
  --scrim: var(--night-overlay);
  --accent-glow: 0 0 12px rgba(39, 107, 93, 0.35);
  --shadow-color: rgba(0, 0, 0, 0.4);
  --shadow-color-sm: rgba(0, 0, 0, 0.25);
  --code-bg: var(--wash);
  --nav-bg: var(--bg);
  --nav-active: rgba(251, 244, 236, 0.08);
  --input-bg: var(--night-surface-alt);
  --hover: rgba(251, 244, 236, 0.05);
  --active: rgba(251, 244, 236, 0.1);
  --skeleton-base: var(--track);
  --skeleton-shine: rgba(251, 244, 236, 0.09);
  --stage-learning: var(--teal);
  --stage-known: var(--gold);
  --stage-skipped: var(--night-muted);
  color-scheme: dark;
}

:root {
  --muted: var(--text-muted);
  --strong: #34483d;
  --title-size: 22px;
  --title-line: 28px;
  --title-tracking: -0.7px;
  --section-size: 19px;
  --section-line: 24px;
  --section-tracking: 0.6px;
  --body-size: 14.5px;
  --body-line: 18px;
  --body-tracking: 0.3px;
  --shadow-card: 0 1px 2px rgba(28, 40, 31, 0.05), 0 10px 28px rgba(28, 40, 31, 0.10);
  --shadow-raised: 0 2px 6px rgba(28, 40, 31, 0.07), 0 16px 44px rgba(28, 40, 31, 0.14);
  --button-highlight: rgba(255, 255, 255, 0.6);
  --shadow-button: inset 0 6px 6px -3px var(--button-highlight), inset 0 -2px 4px rgba(28, 40, 31, 0.06), 0 2px 3px rgba(28, 40, 31, 0.09), 0 5px 12px rgba(28, 40, 31, 0.11);
  --accent-glow: var(--shadow-button);
}

:root[data-theme="dark"] {
  --strong: #d0dfd2;
  --accent: #91c9ab;
  --accent-deep: #a5d8bd;
  --accent-text: #182d24;
  --teal: #91c9ab;
  --teal-deep: #a5d8bd;
  --purple: #91c9ab;
  --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.12), 0 12px 30px rgba(0, 0, 0, 0.18);
  --shadow-raised: 0 3px 8px rgba(0, 0, 0, 0.18), 0 18px 48px rgba(0, 0, 0, 0.3);
  --button-highlight: rgba(255, 255, 255, 0.1);
  --shadow-button: inset 0 6px 6px -3px var(--button-highlight), 0 2px 3px rgba(0, 0, 0, 0.13), 0 5px 10px rgba(0, 0, 0, 0.18);
}

:root,
:root[data-theme="light"] {
  --accent: #176B58;
  --accent-text: #FFFEFA;
  --accent-on: #FFFEFA;
  --title-size: 22px;
  --title-line: 28px;
  --title-tracking: -0.8px;
  --greeting-size: 26px;
  --section-size: 19px;
  --section-line: 26px;
  --section-tracking: -0.7px;
  --body-size: 15px;
  --body-line: 23px;
  --body-tracking: 0px;
  --label-size: 12px;
  --page-gutter: 26px;
  --page-gap: 20px;
  --content-width: 1320px;
  --control-gap: 8px;
  --row-gap: 16px;
  --card-padding: 22px;
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-card: 20px;
  --r-device: 54px;
  --marketing-width: 1120px;
  --marketing-section-gap: 96px;
  --marketing-copy-line: 26px;
  --marketing-muted: var(--text-muted);
  --marketing-action: var(--accent);
  --marketing-display-size: clamp(44px, 5.5vw, 72px);
  --marketing-heading-size: clamp(30px, 3.5vw, 44px);
  --marketing-display-line: 1.06;
  --marketing-heading-line: 1.16;
  --marketing-display-tracking: -0.9px;
  --marketing-heading-tracking: -0.8px;
  --marketing-body-size: 16px;
  --marketing-lead-size: 18px;
  --marketing-media-shade: linear-gradient(180deg, transparent 30%, rgba(15, 20, 32, .82) 100%);
  --surface-alt: var(--surface-neutral);
  --wash: var(--surface-neutral);
  --input-bg: var(--surface-neutral);
  --nav-bg: var(--surface);
  --border: var(--track);
  --line: var(--track);
  --ink: var(--text);
  --ink-muted: var(--text-muted);
  --ink-faint: var(--text-faint);
  --off-white: var(--bg);
  --white: var(--surface);
  --strong: var(--text);
  --teal-dim: rgba(23,107,88,.14);
  --teal: var(--accent);
  --teal-deep: var(--accent-deep);
  --teal-soft: var(--accent-soft);
  --gold: #BA7A21;
  --gold-deep: #7A581D;
  --gold-ink: #7A581D;
  --gold-soft: #F6EBD8;
  --bronze: #A9703F;
  --bronze-ink: #7D4F28;
  --bronze-soft: #F3E7DC;
  --silver: #8D97A0;
  --silver-ink: #5E676F;
  --silver-soft: #ECEEF0;
  --gold-dim: rgba(186,122,33,.14);
  --gold-strong: #BA7A21;
  --gold-soft-strong: #F6EBD8;
  --stage-learning: var(--accent-deep);
  --stage-known: var(--gold-deep);
  --stage-skipped: var(--text-muted);
  --feature-media: #695796;
  --feature-saved: #37698A;
  --feature-review: #95601F;
  --feature-books: #9C5945;
  --feature-media-soft: #EEEAF7;
  --feature-saved-soft: #E7EFF7;
  --feature-review-soft: #F7EEDC;
  --feature-books-soft: #F7EAE3;
  --marketing-media-ink: #56447E;
  --marketing-saved-ink: #28506B;
  --marketing-review-ink: #71450F;
  --marketing-books-ink: #753E2D;
  --media-overlay: rgba(15,20,32,.80);
  --media-overlay-soft: rgba(15,20,32,.18);
  --on-media: #FFFFFF;
  --shadow-card: inset 0 1px 0 var(--surface-highlight), 0 0 0 1px var(--surface-ring), 0 3px 6px var(--shadow-color-sm), 0 12px 24px var(--shadow-color);
  --shadow-raised: inset 0 1px 0 var(--surface-highlight), 0 0 0 1px var(--surface-ring), 0 16px 48px var(--shadow-color);
  --shadow-button: inset 0 1px 0 var(--button-highlight), 0 2px 4px var(--shadow-color-sm);
  --accent-glow: var(--shadow-button);
  --bg: #F6F5F0;
  --surface: #FFFEFA;
  --surface-neutral: #EDEFE7;
  --surface-hover: #E5E9E0;
  --text: #242B27;
  --text-muted: #5F6B62;
  --text-faint: #68736B;
  --track: #E3E6DD;
  --accent-deep: #125442;
  --accent-soft: #E2EDE6;
  --surface-highlight: rgba(255,255,255,.9);
  --surface-ring: rgba(25,40,65,.055);
  --button-highlight: rgba(255,255,255,.18);
  --shadow-color: rgba(22,36,60,.055);
  --shadow-color-sm: rgba(22,36,60,.025);
  --chart-0: var(--track);
  --chart-1: #DCEBE4;
  --chart-2: #ADD3C2;
  --chart-3: #9ACCB7;
  --chart-4: #32846D;
  --chart-5: #125442;
}

:root[data-theme="dark"] {
  --accent: #91C9AB;
  --accent-text: #182D24;
  --accent-on: #182D24;
  --title-size: 22px;
  --title-line: 28px;
  --title-tracking: -0.8px;
  --greeting-size: 26px;
  --section-size: 19px;
  --section-line: 26px;
  --section-tracking: -0.7px;
  --body-size: 15px;
  --body-line: 23px;
  --body-tracking: 0px;
  --label-size: 12px;
  --page-gutter: 26px;
  --page-gap: 20px;
  --content-width: 1320px;
  --control-gap: 8px;
  --row-gap: 16px;
  --card-padding: 22px;
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-card: 20px;
  --r-device: 54px;
  --marketing-width: 1120px;
  --marketing-section-gap: 96px;
  --marketing-copy-line: 26px;
  --marketing-muted: var(--text-muted);
  --marketing-action: var(--accent);
  --marketing-display-size: clamp(44px, 5.5vw, 72px);
  --marketing-heading-size: clamp(30px, 3.5vw, 44px);
  --marketing-display-line: 1.06;
  --marketing-heading-line: 1.16;
  --marketing-display-tracking: -0.9px;
  --marketing-heading-tracking: -0.8px;
  --marketing-body-size: 16px;
  --marketing-lead-size: 18px;
  --marketing-media-shade: linear-gradient(180deg, transparent 30%, rgba(15, 20, 32, .82) 100%);
  --surface-alt: var(--surface-neutral);
  --wash: var(--surface-neutral);
  --input-bg: var(--surface-neutral);
  --nav-bg: var(--surface);
  --border: var(--track);
  --line: var(--track);
  --ink: var(--text);
  --ink-muted: var(--text-muted);
  --ink-faint: var(--text-faint);
  --off-white: var(--bg);
  --white: var(--surface);
  --strong: var(--text);
  --teal-dim: rgba(23,107,88,.14);
  --teal: var(--accent);
  --teal-deep: var(--accent-deep);
  --teal-soft: var(--accent-soft);
  --gold: #CCB177;
  --gold-deep: #DFCA9E;
  --gold-ink: #DFCA9E;
  --gold-soft: #3B3527;
  --bronze: #D19A6B;
  --bronze-ink: #E3B48C;
  --bronze-soft: #3A2F26;
  --silver: #B9C2C9;
  --silver-ink: #D5DCE1;
  --silver-soft: #313A3D;
  --gold-dim: rgba(186,122,33,.14);
  --gold-strong: #E2B75D;
  --gold-soft-strong: #3B3527;
  --stage-learning: var(--accent-deep);
  --stage-known: var(--gold-deep);
  --stage-skipped: var(--text-muted);
  --feature-media: #C1B2E5;
  --feature-saved: #9EBEDD;
  --feature-review: #DDBB80;
  --feature-books: #DEAA97;
  --feature-media-soft: #352E45;
  --feature-saved-soft: #293A48;
  --feature-review-soft: #423726;
  --feature-books-soft: #44332E;
  --marketing-media-ink: #56447E;
  --marketing-saved-ink: #28506B;
  --marketing-review-ink: #71450F;
  --marketing-books-ink: #753E2D;
  --media-overlay: rgba(15,20,32,.80);
  --media-overlay-soft: rgba(15,20,32,.18);
  --on-media: #FFFFFF;
  --shadow-card: inset 0 1px 0 var(--surface-highlight), 0 0 0 1px var(--surface-ring), 0 3px 6px var(--shadow-color-sm), 0 12px 24px var(--shadow-color);
  --shadow-raised: inset 0 1px 0 var(--surface-highlight), 0 0 0 1px var(--surface-ring), 0 16px 48px var(--shadow-color);
  --shadow-button: inset 0 1px 0 var(--button-highlight), 0 2px 4px var(--shadow-color-sm);
  --accent-glow: var(--shadow-button);
  --bg: #181D1A;
  --surface: #222925;
  --surface-neutral: #2B332E;
  --surface-hover: #343E38;
  --text: #EDF0E8;
  --text-muted: #ADB8AE;
  --text-faint: #9AA89C;
  --track: #374139;
  --accent-deep: #A5D8BD;
  --accent-soft: #293F33;
  --surface-highlight: rgba(255,255,255,.045);
  --surface-ring: rgba(255,255,255,.045);
  --button-highlight: rgba(255,255,255,.14);
  --shadow-color: rgba(0,0,0,.16);
  --shadow-color-sm: rgba(0,0,0,.10);
  --chart-0: var(--track);
  --chart-1: #294138;
  --chart-2: #345A4B;
  --chart-3: #76AD95;
  --chart-4: #79B99D;
  --chart-5: #A5D8BD;
}
/* Real LingoBite web tokens, transcribed from the built stylesheet.
   Source of truth: packages/design-tokens/src/index.ts, emitted to
   packages/design-tokens/dist/web.css. Values below are the ones the web app
   actually resolves: where the source file declares a role more than once, the
   last declaration in the emitted cascade is the one kept here (for example
   --strong is browserFoundation's var(--text), not the earlier #34483d, and
   --section-tracking is the browser -0.7px, not the native +0.6px).
   Light and dark share one component structure and swap only values. */

:root {
  --font-family: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 600;
  --font-display: 600;

  /* Radius ladder (browser branch) */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-card: 20px;
  --r-pill: 999px;
  --r-device: 54px;

  /* Spacing scale */
  --s-xxs: 2px;
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;
  --page-gutter: 26px;
  --page-gap: 20px;
  --card-padding: 22px;
  --content-width: 1320px;
  --control-gap: 8px;
  --row-gap: 16px;

  /* Type roles: each role at its documented size, line height, weight, tracking */
  --greeting-size: 26px;
  --title-size: 22px;
  --title-line: 28px;
  --title-tracking: -0.8px;
  --section-size: 19px;
  --section-line: 26px;
  --section-tracking: -0.7px; /* web value; the native branch uses +0.6px */
  --body-size: 15px;
  --body-line: 23px;
  --body-tracking: 0px;
  --label-size: 12px;

  /* Motion */
  --dur-instant: 80ms;
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
  --ease-spring: cubic-bezier(0.3, 1.3, 0.4, 1);

  --focus-ring: 2px solid var(--accent);
  --focus-ring-offset: 2px;
}

:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #F6F5F0;
  --surface: #FFFEFA;
  --surface-neutral: #EDEFE7;
  --surface-alt: var(--surface-neutral);
  --surface-hover: #E5E9E0;

  --text: #242B27;
  --text-muted: #5F6B62;
  --muted: var(--text-muted);
  --text-faint: #68736B;
  --strong: var(--text); /* effective value: foundation aliases --strong to --text */

  --track: #E3E6DD;
  --border: var(--track);
  --hover: rgba(46, 38, 34, 0.05);
  --active: rgba(46, 38, 34, 0.09);

  --accent: #176B58;
  --accent-deep: #125442;
  --accent-soft: #E2EDE6;
  --accent-text: #FFFEFA;
  --accent-on: #FFFEFA;
  --teal-dim: rgba(23, 107, 88, 0.14);

  --gold: #BA7A21;
  --gold-deep: #7A581D;
  --gold-ink: #7A581D;
  --gold-soft: #F6EBD8;
  --gold-strong: #BA7A21;

  --danger: #B44347;
  --danger-strong: #B44347;
  --danger-ink: #9B3038;
  --danger-soft: #F6E4E4;

  --stage-learning: var(--accent-deep);
  --stage-known: var(--gold-deep);
  --stage-skipped: var(--text-muted);

  /* Chart ramp: track to deep accent, five nonzero steps */
  --chart-0: var(--track);
  --chart-1: #DCEBE4;
  --chart-2: #ADD3C2;
  --chart-3: #9ACCB7;
  --chart-4: #32846D;
  --chart-5: #125442;

  /* Elevation recipes, complete with their inset highlight and 1px ring */
  --surface-highlight: rgba(255, 255, 255, .9);
  --surface-ring: rgba(25, 40, 65, .055);
  --button-highlight: rgba(255, 255, 255, .18);
  --shadow-color: rgba(22, 36, 60, .055);
  --shadow-color-sm: rgba(22, 36, 60, .025);
  --shadow-card: inset 0 1px 0 var(--surface-highlight), 0 0 0 1px var(--surface-ring), 0 3px 6px var(--shadow-color-sm), 0 12px 24px var(--shadow-color);
  --shadow-raised: inset 0 1px 0 var(--surface-highlight), 0 0 0 1px var(--surface-ring), 0 16px 48px var(--shadow-color);
  --shadow-button: inset 0 1px 0 var(--button-highlight), 0 2px 4px var(--shadow-color-sm);
  --accent-glow: var(--shadow-button);

  --skeleton-base: var(--track);
  --skeleton-shine: rgba(255, 255, 255, 0.55);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #181D1A;
  --surface: #222925;
  --surface-neutral: #2B332E;
  --surface-alt: var(--surface-neutral);
  --surface-hover: #343E38;

  --text: #EDF0E8;
  --text-muted: #ADB8AE;
  --muted: var(--text-muted);
  --text-faint: #9AA89C;
  --strong: var(--text);

  --track: #374139;
  --border: var(--track);
  --hover: rgba(251, 244, 236, 0.05);
  --active: rgba(251, 244, 236, 0.1);

  --accent: #91C9AB;
  --accent-deep: #A5D8BD;
  --accent-soft: #293F33;
  --accent-text: #182D24;
  --accent-on: #182D24;
  --teal-dim: rgba(145, 201, 171, 0.13);

  --gold: #CCB177;
  --gold-deep: #DFCA9E;
  --gold-ink: #DFCA9E;
  --gold-soft: #3B3527;
  --gold-strong: #E2B75D;

  --danger: #F29B95;
  --danger-strong: #FF6B72;
  --danger-ink: #F29B95;
  --danger-soft: #402E2B;

  --stage-learning: var(--accent);
  --stage-known: var(--gold);
  --stage-skipped: var(--text-muted);

  --chart-0: var(--track);
  --chart-1: #294138;
  --chart-2: #345A4B;
  --chart-3: #76AD95;
  --chart-4: #79B99D;
  --chart-5: #A5D8BD;

  --surface-highlight: rgba(255, 255, 255, .045);
  --surface-ring: rgba(255, 255, 255, .045);
  --button-highlight: rgba(255, 255, 255, .14);
  --shadow-color: rgba(0, 0, 0, .16);
  --shadow-color-sm: rgba(0, 0, 0, .10);
  --shadow-card: inset 0 1px 0 var(--surface-highlight), 0 0 0 1px var(--surface-ring), 0 3px 6px var(--shadow-color-sm), 0 12px 24px var(--shadow-color);
  --shadow-raised: inset 0 1px 0 var(--surface-highlight), 0 0 0 1px var(--surface-ring), 0 16px 48px var(--shadow-color);
  --shadow-button: inset 0 1px 0 var(--button-highlight), 0 2px 4px var(--shadow-color-sm);
  --accent-glow: var(--shadow-button);

  --skeleton-base: var(--track);
  --skeleton-shine: rgba(251, 244, 236, 0.09);
}