/* LSD v0.1.0 · generated 2026-07-21T13:49:20.699Z · base #3ef2a1 · template Matching Gradient */
/* ===== Token scales — --color-*, --space-*, --radius-*, --shadow-*, --border-width-*, --text-*, --section-y-* ===== */
:root {
  /* Colors */
  --color-primary: #3ef2a1;
  --color-primary-0: #65ffbc;
  --color-primary-1: #39ef9e;
  --color-primary-2: #00cf80;
  --color-primary-3: #00b064;
  --color-primary-4: #009148;
  --color-primary-5: #00742d;
  --color-primary-6: #005710;
  --color-primary-7: #003b00;
  --color-primary-8: #002100;
  --color-primary-9: #000700;
  --color-secondary: #ff3d71;
  --color-secondary-0: #ffa0c5;
  --color-secondary-1: #ff99b1;
  --color-secondary-2: #ff5d8a;
  --color-secondary-3: #fa386d;
  --color-secondary-4: #d70052;
  --color-secondary-5: #b40038;
  --color-secondary-6: #91001f;
  --color-secondary-7: #64000e;
  --color-secondary-8: #4c0000;
  --color-secondary-9: #290000;
  --color-success: #10b981;
  --color-success-0: #80ffcd;
  --color-success-1: #5deaaf;
  --color-success-2: #34ca91;
  --color-success-3: #00ab74;
  --color-success-4: #008d59;
  --color-success-5: #00703e;
  --color-success-6: #005425;
  --color-success-7: #00390c;
  --color-success-8: #001f00;
  --color-success-9: #000700;
  --color-warning: #fbbf24;
  --color-warning-0: #ffe155;
  --color-warning-1: #fec129;
  --color-warning-2: #dea300;
  --color-warning-3: #be8500;
  --color-warning-4: #a06700;
  --color-warning-5: #824b00;
  --color-warning-6: #652f00;
  --color-warning-7: #491300;
  --color-warning-8: #2e0000;
  --color-warning-9: #110000;
  --color-danger: #f43f5e;
  --color-danger-0: #ffa6b8;
  --color-danger-1: #ff9ba6;
  --color-danger-2: #ff657d;
  --color-danger-3: #f74260;
  --color-danger-4: #d41445;
  --color-danger-5: #b1002b;
  --color-danger-6: #8f0010;
  --color-danger-7: #660000;
  --color-danger-8: #4b0000;
  --color-danger-9: #280000;
  --color-info: #22d3ee;
  --color-info-0: #69ffff;
  --color-info-1: #3fe3fe;
  --color-info-2: #00c3de;
  --color-info-3: #00a4bf;
  --color-info-4: #0087a0;
  --color-info-5: #006a83;
  --color-info-6: #004e67;
  --color-info-7: #00334b;
  --color-info-8: #001831;
  --color-info-9: #000119;
  --color-text: #e9e7ff;
  --color-text-0: #eae8ff;
  --color-text-1: #cbc9e0;
  --color-text-2: #adabc1;
  --color-text-3: #8f8da3;
  --color-text-4: #737186;
  --color-text-5: #58566a;
  --color-text-6: #3e3c4f;
  --color-text-7: #262436;
  --color-text-8: #100e1e;
  --color-text-9: #020108;
  --color-bg: #0a0a18;
  --color-bg-0: #e8e9ff;
  --color-bg-1: #c8cadf;
  --color-bg-2: #aaacc0;
  --color-bg-3: #8d8ea2;
  --color-bg-4: #717285;
  --color-bg-5: #565769;
  --color-bg-6: #3c3d4e;
  --color-bg-7: #242535;
  --color-bg-8: #0f0f1d;
  --color-bg-9: #010108;
  --color-surface: #12121f;
  --color-surface-0: #e8e9fd;
  --color-surface-1: #c9cadd;
  --color-surface-2: #abacbe;
  --color-surface-3: #8e8ea0;
  --color-surface-4: #717283;
  --color-surface-5: #565767;
  --color-surface-6: #3d3d4d;
  --color-surface-7: #252533;
  --color-surface-8: #0f0f1c;
  --color-surface-9: #010107;
  --color-border: #2a2a47;
  --color-border-0: #e5e8ff;
  --color-border-1: #c6c8ee;
  --color-border-2: #a8aace;
  --color-border-3: #8b8db0;
  --color-border-4: #6f7092;
  --color-border-5: #545575;
  --color-border-6: #3b3b5a;
  --color-border-7: #23233f;
  --color-border-8: #0e0c26;
  --color-border-9: #02000f;

  /* Typography colors — derived from brand unless overridden */
  --text--color--content: var(--color-text);
  --text--color--heading: var(--color-text);
  --text--color--muted: color-mix(in oklch, var(--color-text), transparent 35%);
  --text--color--link: var(--color-primary);
  --text--color--link-hover: color-mix(in oklch, var(--color-primary) 80%, var(--color-text));
  --heading--current: var(--text--color--heading);
  --link--current: var(--text--color--link);

  /* Typography */
  --font-display: 'Sora', 'Inter', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  --text-h1: clamp(2.25rem, 3.3333vw + 1.5833rem, 4.25rem);
  --text-h2: clamp(1.75rem, 2.0833vw + 1.3333rem, 3rem);
  --text-h3: clamp(1.5rem, 1.6667vw + 1.1667rem, 2.5rem);
  --text-h4: clamp(1.25rem, 1.25vw + 1rem, 2rem);
  --text-h5: clamp(1.125rem, 0.625vw + 1rem, 1.5rem);
  --text-h6: clamp(1rem, 0.4167vw + 0.9167rem, 1.25rem);
  --text-body: clamp(1rem, 0.2083vw + 0.9583rem, 1.125rem);
  --leading: 1.55;
  --leading-heading: 1.15;
  --tracking: 0;
  --tracking-heading: -0.01em;
  --word-spacing: 0;

  /* Spacing */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 40px;
  --space-5xl: 48px;
  --space-6xl: 56px;
  --space-7xl: 64px;

  /* Radius */
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-full: 999px;

  /* Radius combos */
  --radius-combo-card: var(--radius-md) var(--radius-md) 0 0;
  --radius-combo-card-tl: var(--radius-md);
  --radius-combo-card-tr: var(--radius-md);
  --radius-combo-card-br: 0;
  --radius-combo-card-bl: 0;
  --radius-combo-pill: 9999px;
  --radius-combo-pill-tl: 9999px;
  --radius-combo-pill-tr: 9999px;
  --radius-combo-pill-br: 9999px;
  --radius-combo-pill-bl: 9999px;
  --radius-combo-asymmetric: var(--radius-lg) 0 var(--radius-lg) 0;
  --radius-combo-asymmetric-tl: var(--radius-lg);
  --radius-combo-asymmetric-tr: 0;
  --radius-combo-asymmetric-br: var(--radius-lg);
  --radius-combo-asymmetric-bl: 0;
  --radius-combo-notched: 0 var(--radius-md) 0 var(--radius-md);
  --radius-combo-notched-tl: 0;
  --radius-combo-notched-tr: var(--radius-md);
  --radius-combo-notched-br: 0;
  --radius-combo-notched-bl: var(--radius-md);
  --radius-combo-tab: var(--radius-md) var(--radius-md) 0 0;
  --radius-combo-tab-tl: var(--radius-md);
  --radius-combo-tab-tr: var(--radius-md);
  --radius-combo-tab-br: 0;
  --radius-combo-tab-bl: 0;
  --radius-combo-modal: var(--radius-lg);
  --radius-combo-modal-tl: var(--radius-lg);
  --radius-combo-modal-tr: var(--radius-lg);
  --radius-combo-modal-br: var(--radius-lg);
  --radius-combo-modal-bl: var(--radius-lg);

  /* Border width */
  --border-w-none: 0;
  --border-w-hair: 1px;
  --border-w-sm: 2px;
  --border-w-md: 3px;
  --border-w-lg: 4px;
  --border-w-xl: 6px;

  /* Element size */
  --size-xs: 24px;
  --size-sm: 32px;
  --size-md: 40px;
  --size-lg: 48px;
  --size-xl: 56px;
  --size-2xl: 64px;

  /* Tracking */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.06);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.06);

  /* Container */
  --container-narrow: 820px;
  --container-default: 1280px;
  --container-wide: 1440px;

  /* Section rhythm */
  --section-y-sm: 3rem;
  --section-y-md: 6rem;
  --section-y-lg: 8rem;
  --section-y-xl: 10rem;

  /* Easing */
  --easing-linear: linear;
  --easing-ease: ease;
  --easing-ease-in: ease-in;
  --easing-ease-out: ease-out;
  --easing-ease-in-out: ease-in-out;
  --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-snappy: cubic-bezier(0.5, 0, 0.1, 1);
  --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easing-lsd-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-lsd-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Animation */
  --anim-fade-up-duration: 600ms;
  --anim-fade-up-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --anim-fade-in-duration: 400ms;
  --anim-fade-in-easing: ease-out;
  --anim-slide-left-duration: 500ms;
  --anim-slide-left-easing: cubic-bezier(0.5, 0, 0.1, 1);
  --anim-pulse-duration: 1600ms;
  --anim-pulse-easing: ease-in-out;
  --anim-spin-duration: 1200ms;
  --anim-spin-easing: linear;
  --anim-shake-duration: 500ms;
  --anim-shake-easing: cubic-bezier(0.36, 0.07, 0.19, 0.97);
  --anim-bounce-in-duration: 600ms;
  --anim-bounce-in-easing: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --anim-lsd-fade-in-duration: 500ms;
  --anim-lsd-fade-in-easing: ease;
  --anim-lsd-fade-up-duration: 500ms;
  --anim-lsd-fade-up-easing: ease;
  --anim-lsd-fade-down-duration: 500ms;
  --anim-lsd-fade-down-easing: ease;
  --anim-lsd-fade-left-duration: 500ms;
  --anim-lsd-fade-left-easing: ease;
  --anim-lsd-fade-right-duration: 500ms;
  --anim-lsd-fade-right-easing: ease;
  --anim-lsd-scale-in-duration: 400ms;
  --anim-lsd-scale-in-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
  --anim-lsd-slide-up-duration: 450ms;
  --anim-lsd-slide-up-easing: ease;
  --anim-lsd-slide-left-duration: 450ms;
  --anim-lsd-slide-left-easing: ease;
  --anim-lsd-fade-out-duration: 450ms;
  --anim-lsd-fade-out-easing: ease;
  --anim-lsd-fade-out-down-duration: 450ms;
  --anim-lsd-fade-out-down-easing: ease;
  --anim-lsd-fade-out-up-duration: 450ms;
  --anim-lsd-fade-out-up-easing: ease;
  --anim-lsd-scale-out-duration: 350ms;
  --anim-lsd-scale-out-easing: ease;
  --anim-lsd-slide-out-left-duration: 450ms;
  --anim-lsd-slide-out-left-easing: ease;
  --anim-lsd-pulse-duration: 2s;
  --anim-lsd-pulse-easing: ease-in-out;
  --anim-lsd-pulse-border-duration: 2s;
  --anim-lsd-pulse-border-easing: ease-in-out;
  --anim-lsd-float-duration: 3s;
  --anim-lsd-float-easing: ease-in-out;
  --anim-lsd-spin-duration: 1.5s;
  --anim-lsd-spin-easing: linear;
  --anim-lsd-shake-duration: 500ms;
  --anim-lsd-shake-easing: ease;
  --anim-lsd-blue-glow-duration: 2s;
  --anim-lsd-blue-glow-easing: ease-in-out;
  --anim-lsd-white-glow-duration: 2s;
  --anim-lsd-white-glow-easing: ease-in-out;
  --anim-lsd-marquee-duration: 20s;
  --anim-lsd-marquee-easing: linear;
  --anim-lsd-pulse-dot-duration: 1.5s;
  --anim-lsd-pulse-dot-easing: ease-in-out;
  --anim-lsd-bounce-in-duration: 600ms;
  --anim-lsd-bounce-in-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --anim-lsd-count-up-duration: 800ms;
  --anim-lsd-count-up-easing: ease-out;

  /* Gradients */
  --gradient-hero: linear-gradient(135deg, var(--color-primary, #7c5cff) 0%, var(--color-secondary, #ff3d71) 100%);
  --gradient-card: linear-gradient(180deg, var(--color-bg, #0a0a18) 0%, var(--color-surface, #14142a) 100%);
  --gradient-accent: radial-gradient(circle farthest-corner at 50% 50%, var(--color-primary, #7c5cff) 0%, var(--color-bg, #0a0a18) 100%);
  --gradient-sunset: linear-gradient(100deg, var(--color-warning, #f59e0b) 0%, var(--color-danger, #e11d48) 55%, var(--color-secondary, #ff3d71) 100%);

  /* Breakpoints */
  --bp-xs: 480px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  /* Aspect ratios */
  --aspect-square: 1/1;
  --aspect-video: 16/9;
  --aspect-cinema: 21/9;
  --aspect-portrait: 3/4;
  --aspect-vertical: 9/16;
  --aspect-classic: 4/3;
  --aspect-ultrawide: 32/9;
  --aspect-golden: 1.618/1;

  /* Gutter */
  --gutter: 1.5rem;

  /* Canvas widths */
  --canvas-body: 100%;
  --canvas-page: 1280px;
  --canvas-section: 960px;
  --canvas-narrow: 820px;
  --canvas-wide: 1440px;
  --canvas-full: 100%;
}

/* Type rhythm — driven by spacing-feel tokens. Body covers prose; headings get their own (tighter) leading + tracking. */
body { line-height: var(--leading); letter-spacing: var(--tracking); word-spacing: var(--word-spacing); }
h1, h2, h3, h4, h5, h6 { line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }

/* Canvas utility classes — centered, capped, gutter-padded */
.canvas-body { max-inline-size: var(--canvas-body); margin-inline: auto; padding-inline: var(--gutter, 1rem); }
.canvas-page { max-inline-size: var(--canvas-page); margin-inline: auto; padding-inline: var(--gutter, 1rem); }
.canvas-section { max-inline-size: var(--canvas-section); margin-inline: auto; padding-inline: var(--gutter, 1rem); }
.canvas-narrow { max-inline-size: var(--canvas-narrow); margin-inline: auto; padding-inline: var(--gutter, 1rem); }
.canvas-wide { max-inline-size: var(--canvas-wide); margin-inline: auto; padding-inline: var(--gutter, 1rem); }
.canvas-full { inline-size: 100%; padding-inline: var(--gutter, 1rem); }

/* ----- LSD visibility utilities — auto-generated -----
 * Keyed by the tokens.breakpoints + tokens.containers tables.
 * Classes hide or show the element at the matching context. */
@media (max-width: 480px) { .hide-at-xs { display: none !important; } }
.show-at-xs { display: none !important; }
@media (max-width: 480px) { .show-at-xs { display: revert !important; } }
@media (min-width: 480px) { .hide-above-xs { display: none !important; } }
@media (max-width: 640px) { .hide-at-sm { display: none !important; } }
.show-at-sm { display: none !important; }
@media (max-width: 640px) { .show-at-sm { display: revert !important; } }
@media (min-width: 640px) { .hide-above-sm { display: none !important; } }
@media (max-width: 768px) { .hide-at-md { display: none !important; } }
.show-at-md { display: none !important; }
@media (max-width: 768px) { .show-at-md { display: revert !important; } }
@media (min-width: 768px) { .hide-above-md { display: none !important; } }
@media (max-width: 1024px) { .hide-at-lg { display: none !important; } }
.show-at-lg { display: none !important; }
@media (max-width: 1024px) { .show-at-lg { display: revert !important; } }
@media (min-width: 1024px) { .hide-above-lg { display: none !important; } }
@media (max-width: 1280px) { .hide-at-xl { display: none !important; } }
.show-at-xl { display: none !important; }
@media (max-width: 1280px) { .show-at-xl { display: revert !important; } }
@media (min-width: 1280px) { .hide-above-xl { display: none !important; } }
@media (max-width: 1536px) { .hide-at-2xl { display: none !important; } }
.show-at-2xl { display: none !important; }
@media (max-width: 1536px) { .show-at-2xl { display: revert !important; } }
@media (min-width: 1536px) { .hide-above-2xl { display: none !important; } }

/* Keyframes */
@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slide-left {
  0% {
    opacity: 0;
    transform: translateX(24px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.05);
    opacity: 0.85;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-6px);
  }
  20% {
    transform: translateX(6px);
  }
  30% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(5px);
  }
  50% {
    transform: translateX(-4px);
  }
  60% {
    transform: translateX(4px);
  }
  70% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(3px);
  }
  90% {
    transform: translateX(-2px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes bounce-in {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  60% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes lsd-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes lsd-fade-up {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lsd-fade-down {
  0% {
    opacity: 0;
    transform: translateY(-24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lsd-fade-left {
  0% {
    opacity: 0;
    transform: translateX(32px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes lsd-fade-right {
  0% {
    opacity: 0;
    transform: translateX(-32px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes lsd-scale-in {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes lsd-slide-up {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes lsd-slide-left {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes lsd-fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes lsd-fade-out-down {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(24px);
  }
}

@keyframes lsd-fade-out-up {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-24px);
  }
}

@keyframes lsd-scale-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.85);
  }
}

@keyframes lsd-slide-out-left {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes lsd-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes lsd-pulse-border {
  0% {
    border-color: rgba(25,99,255,0.3);
  }
  50% {
    border-color: #1963ff;
  }
  100% {
    border-color: rgba(25,99,255,0.3);
  }
}

@keyframes lsd-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes lsd-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes lsd-shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes lsd-blue-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(25,99,255,0);
  }
  50% {
    box-shadow: 0 0 20px 6px rgba(25,99,255,0.45);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(25,99,255,0);
  }
}

@keyframes lsd-white-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(255,255,255,0);
  }
  50% {
    box-shadow: 0 0 16px 4px rgba(255,255,255,0.3);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255,255,255,0);
  }
}

@keyframes lsd-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes lsd-pulse-dot {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.75);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes lsd-bounce-in {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  60% {
    transform: translateY(-5px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes lsd-count-up {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Animation utility classes */
.anim-fade-up { animation: fade-up 600ms cubic-bezier(0.4, 0, 0.2, 1) 1 both; }
.anim-fade-in { animation: fade-in 400ms ease-out 1 both; }
.anim-slide-left { animation: slide-left 500ms cubic-bezier(0.5, 0, 0.1, 1) 1 both; }
.anim-pulse { animation: pulse 1600ms ease-in-out infinite alternate both; }
.anim-spin { animation: spin 1200ms linear infinite both; }
.anim-shake { animation: shake 500ms cubic-bezier(0.36, 0.07, 0.19, 0.97) 1 both; }
.anim-bounce-in { animation: bounce-in 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 1 both; }
.anim-lsd-fade-in { animation: lsd-fade-in 500ms ease 1 both; }
.anim-lsd-fade-up { animation: lsd-fade-up 500ms ease 1 both; }
.anim-lsd-fade-down { animation: lsd-fade-down 500ms ease 1 both; }
.anim-lsd-fade-left { animation: lsd-fade-left 500ms ease 1 both; }
.anim-lsd-fade-right { animation: lsd-fade-right 500ms ease 1 both; }
.anim-lsd-scale-in { animation: lsd-scale-in 400ms cubic-bezier(0.34, 1.56, 0.64, 1) 1 both; }
.anim-lsd-slide-up { animation: lsd-slide-up 450ms ease 1 both; }
.anim-lsd-slide-left { animation: lsd-slide-left 450ms ease 1 both; }
.anim-lsd-fade-out { animation: lsd-fade-out 450ms ease 1 both; }
.anim-lsd-fade-out-down { animation: lsd-fade-out-down 450ms ease 1 both; }
.anim-lsd-fade-out-up { animation: lsd-fade-out-up 450ms ease 1 both; }
.anim-lsd-scale-out { animation: lsd-scale-out 350ms ease 1 both; }
.anim-lsd-slide-out-left { animation: lsd-slide-out-left 450ms ease 1 both; }
.anim-lsd-pulse { animation: lsd-pulse 2s ease-in-out infinite both; }
.anim-lsd-pulse-border { animation: lsd-pulse-border 2s ease-in-out infinite both; }
.anim-lsd-float { animation: lsd-float 3s ease-in-out infinite both; }
.anim-lsd-spin { animation: lsd-spin 1.5s linear infinite both; }
.anim-lsd-shake { animation: lsd-shake 500ms ease 1 both; }
.anim-lsd-blue-glow { animation: lsd-blue-glow 2s ease-in-out infinite both; }
.anim-lsd-white-glow { animation: lsd-white-glow 2s ease-in-out infinite both; }
.anim-lsd-marquee { animation: lsd-marquee 20s linear infinite both; }
.anim-lsd-pulse-dot { animation: lsd-pulse-dot 1.5s ease-in-out infinite both; }
.anim-lsd-bounce-in { animation: lsd-bounce-in 600ms cubic-bezier(0.4, 0, 0.2, 1) 1 both; }
.anim-lsd-count-up { animation: lsd-count-up 800ms ease-out 1 both; }

/* ===== Dark overrides — :root[data-theme="dark"] ===== */
:root[data-theme="dark"] {
  --color-text: #e9e7ff;
  --color-text-0: #eae8ff;
  --color-text-1: #cbc9e0;
  --color-text-2: #adabc1;
  --color-text-3: #8f8da3;
  --color-text-4: #737186;
  --color-text-5: #58566a;
  --color-text-6: #3e3c4f;
  --color-text-7: #262436;
  --color-text-8: #100e1e;
  --color-text-9: #020108;
  --color-bg: #0a0a18;
  --color-bg-0: #e8e9ff;
  --color-bg-1: #c8cadf;
  --color-bg-2: #aaacc0;
  --color-bg-3: #8d8ea2;
  --color-bg-4: #717285;
  --color-bg-5: #565769;
  --color-bg-6: #3c3d4e;
  --color-bg-7: #242535;
  --color-bg-8: #0f0f1d;
  --color-bg-9: #010108;
  --color-surface: #12121f;
  --color-surface-0: #e8e9fd;
  --color-surface-1: #c9cadd;
  --color-surface-2: #abacbe;
  --color-surface-3: #8e8ea0;
  --color-surface-4: #717283;
  --color-surface-5: #565767;
  --color-surface-6: #3d3d4d;
  --color-surface-7: #252533;
  --color-surface-8: #0f0f1c;
  --color-surface-9: #010107;
  --color-border: #2a2a47;
  --color-border-0: #e5e8ff;
  --color-border-1: #c6c8ee;
  --color-border-2: #a8aace;
  --color-border-3: #8b8db0;
  --color-border-4: #6f7092;
  --color-border-5: #545575;
  --color-border-6: #3b3b5a;
  --color-border-7: #23233f;
  --color-border-8: #0e0c26;
  --color-border-9: #02000f;
}
/* LSD v0.1.0 · generated 2026-07-21T13:49:20.704Z · base #3ef2a1 · template Matching Gradient */
/* ===== Token scales — --color-*, --space-*, --radius-*, --shadow-*, --border-width-*, --text-*, --section-y-* ===== */
:root {
  /* Colors */
  --color-primary: #3ef2a1;
  --color-primary-0: #65ffbc;
  --color-primary-1: #39ef9e;
  --color-primary-2: #00cf80;
  --color-primary-3: #00b064;
  --color-primary-4: #009148;
  --color-primary-5: #00742d;
  --color-primary-6: #005710;
  --color-primary-7: #003b00;
  --color-primary-8: #002100;
  --color-primary-9: #000700;
  --color-secondary: #ff3d71;
  --color-secondary-0: #ffa0c5;
  --color-secondary-1: #ff99b1;
  --color-secondary-2: #ff5d8a;
  --color-secondary-3: #fa386d;
  --color-secondary-4: #d70052;
  --color-secondary-5: #b40038;
  --color-secondary-6: #91001f;
  --color-secondary-7: #64000e;
  --color-secondary-8: #4c0000;
  --color-secondary-9: #290000;
  --color-success: #10b981;
  --color-success-0: #80ffcd;
  --color-success-1: #5deaaf;
  --color-success-2: #34ca91;
  --color-success-3: #00ab74;
  --color-success-4: #008d59;
  --color-success-5: #00703e;
  --color-success-6: #005425;
  --color-success-7: #00390c;
  --color-success-8: #001f00;
  --color-success-9: #000700;
  --color-warning: #fbbf24;
  --color-warning-0: #ffe155;
  --color-warning-1: #fec129;
  --color-warning-2: #dea300;
  --color-warning-3: #be8500;
  --color-warning-4: #a06700;
  --color-warning-5: #824b00;
  --color-warning-6: #652f00;
  --color-warning-7: #491300;
  --color-warning-8: #2e0000;
  --color-warning-9: #110000;
  --color-danger: #f43f5e;
  --color-danger-0: #ffa6b8;
  --color-danger-1: #ff9ba6;
  --color-danger-2: #ff657d;
  --color-danger-3: #f74260;
  --color-danger-4: #d41445;
  --color-danger-5: #b1002b;
  --color-danger-6: #8f0010;
  --color-danger-7: #660000;
  --color-danger-8: #4b0000;
  --color-danger-9: #280000;
  --color-info: #22d3ee;
  --color-info-0: #69ffff;
  --color-info-1: #3fe3fe;
  --color-info-2: #00c3de;
  --color-info-3: #00a4bf;
  --color-info-4: #0087a0;
  --color-info-5: #006a83;
  --color-info-6: #004e67;
  --color-info-7: #00334b;
  --color-info-8: #001831;
  --color-info-9: #000119;
  --color-text: #e9e7ff;
  --color-text-0: #eae8ff;
  --color-text-1: #cbc9e0;
  --color-text-2: #adabc1;
  --color-text-3: #8f8da3;
  --color-text-4: #737186;
  --color-text-5: #58566a;
  --color-text-6: #3e3c4f;
  --color-text-7: #262436;
  --color-text-8: #100e1e;
  --color-text-9: #020108;
  --color-bg: #0a0a18;
  --color-bg-0: #e8e9ff;
  --color-bg-1: #c8cadf;
  --color-bg-2: #aaacc0;
  --color-bg-3: #8d8ea2;
  --color-bg-4: #717285;
  --color-bg-5: #565769;
  --color-bg-6: #3c3d4e;
  --color-bg-7: #242535;
  --color-bg-8: #0f0f1d;
  --color-bg-9: #010108;
  --color-surface: #12121f;
  --color-surface-0: #e8e9fd;
  --color-surface-1: #c9cadd;
  --color-surface-2: #abacbe;
  --color-surface-3: #8e8ea0;
  --color-surface-4: #717283;
  --color-surface-5: #565767;
  --color-surface-6: #3d3d4d;
  --color-surface-7: #252533;
  --color-surface-8: #0f0f1c;
  --color-surface-9: #010107;
  --color-border: #2a2a47;
  --color-border-0: #e5e8ff;
  --color-border-1: #c6c8ee;
  --color-border-2: #a8aace;
  --color-border-3: #8b8db0;
  --color-border-4: #6f7092;
  --color-border-5: #545575;
  --color-border-6: #3b3b5a;
  --color-border-7: #23233f;
  --color-border-8: #0e0c26;
  --color-border-9: #02000f;

  /* Typography colors — derived from brand unless overridden */
  --text--color--content: var(--color-text);
  --text--color--heading: var(--color-text);
  --text--color--muted: color-mix(in oklch, var(--color-text), transparent 35%);
  --text--color--link: var(--color-primary);
  --text--color--link-hover: color-mix(in oklch, var(--color-primary) 80%, var(--color-text));
  --heading--current: var(--text--color--heading);
  --link--current: var(--text--color--link);

  /* Typography */
  --font-display: 'Sora', 'Inter', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  --text-h1: clamp(2.25rem, 3.3333vw + 1.5833rem, 4.25rem);
  --text-h2: clamp(1.75rem, 2.0833vw + 1.3333rem, 3rem);
  --text-h3: clamp(1.5rem, 1.6667vw + 1.1667rem, 2.5rem);
  --text-h4: clamp(1.25rem, 1.25vw + 1rem, 2rem);
  --text-h5: clamp(1.125rem, 0.625vw + 1rem, 1.5rem);
  --text-h6: clamp(1rem, 0.4167vw + 0.9167rem, 1.25rem);
  --text-body: clamp(1rem, 0.2083vw + 0.9583rem, 1.125rem);
  --leading: 1.55;
  --leading-heading: 1.15;
  --tracking: 0;
  --tracking-heading: -0.01em;
  --word-spacing: 0;

  /* Spacing */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 40px;
  --space-5xl: 48px;
  --space-6xl: 56px;
  --space-7xl: 64px;

  /* Radius */
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-full: 999px;

  /* Radius combos */
  --radius-combo-card: var(--radius-md) var(--radius-md) 0 0;
  --radius-combo-card-tl: var(--radius-md);
  --radius-combo-card-tr: var(--radius-md);
  --radius-combo-card-br: 0;
  --radius-combo-card-bl: 0;
  --radius-combo-pill: 9999px;
  --radius-combo-pill-tl: 9999px;
  --radius-combo-pill-tr: 9999px;
  --radius-combo-pill-br: 9999px;
  --radius-combo-pill-bl: 9999px;
  --radius-combo-asymmetric: var(--radius-lg) 0 var(--radius-lg) 0;
  --radius-combo-asymmetric-tl: var(--radius-lg);
  --radius-combo-asymmetric-tr: 0;
  --radius-combo-asymmetric-br: var(--radius-lg);
  --radius-combo-asymmetric-bl: 0;
  --radius-combo-notched: 0 var(--radius-md) 0 var(--radius-md);
  --radius-combo-notched-tl: 0;
  --radius-combo-notched-tr: var(--radius-md);
  --radius-combo-notched-br: 0;
  --radius-combo-notched-bl: var(--radius-md);
  --radius-combo-tab: var(--radius-md) var(--radius-md) 0 0;
  --radius-combo-tab-tl: var(--radius-md);
  --radius-combo-tab-tr: var(--radius-md);
  --radius-combo-tab-br: 0;
  --radius-combo-tab-bl: 0;
  --radius-combo-modal: var(--radius-lg);
  --radius-combo-modal-tl: var(--radius-lg);
  --radius-combo-modal-tr: var(--radius-lg);
  --radius-combo-modal-br: var(--radius-lg);
  --radius-combo-modal-bl: var(--radius-lg);

  /* Border width */
  --border-w-none: 0;
  --border-w-hair: 1px;
  --border-w-sm: 2px;
  --border-w-md: 3px;
  --border-w-lg: 4px;
  --border-w-xl: 6px;

  /* Element size */
  --size-xs: 24px;
  --size-sm: 32px;
  --size-md: 40px;
  --size-lg: 48px;
  --size-xl: 56px;
  --size-2xl: 64px;

  /* Tracking */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.06);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.06);

  /* Container */
  --container-narrow: 820px;
  --container-default: 1280px;
  --container-wide: 1440px;

  /* Section rhythm */
  --section-y-sm: 3rem;
  --section-y-md: 6rem;
  --section-y-lg: 8rem;
  --section-y-xl: 10rem;

  /* Easing */
  --easing-linear: linear;
  --easing-ease: ease;
  --easing-ease-in: ease-in;
  --easing-ease-out: ease-out;
  --easing-ease-in-out: ease-in-out;
  --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-snappy: cubic-bezier(0.5, 0, 0.1, 1);
  --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easing-lsd-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-lsd-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Animation */
  --anim-fade-up-duration: 600ms;
  --anim-fade-up-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --anim-fade-in-duration: 400ms;
  --anim-fade-in-easing: ease-out;
  --anim-slide-left-duration: 500ms;
  --anim-slide-left-easing: cubic-bezier(0.5, 0, 0.1, 1);
  --anim-pulse-duration: 1600ms;
  --anim-pulse-easing: ease-in-out;
  --anim-spin-duration: 1200ms;
  --anim-spin-easing: linear;
  --anim-shake-duration: 500ms;
  --anim-shake-easing: cubic-bezier(0.36, 0.07, 0.19, 0.97);
  --anim-bounce-in-duration: 600ms;
  --anim-bounce-in-easing: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --anim-lsd-fade-in-duration: 500ms;
  --anim-lsd-fade-in-easing: ease;
  --anim-lsd-fade-up-duration: 500ms;
  --anim-lsd-fade-up-easing: ease;
  --anim-lsd-fade-down-duration: 500ms;
  --anim-lsd-fade-down-easing: ease;
  --anim-lsd-fade-left-duration: 500ms;
  --anim-lsd-fade-left-easing: ease;
  --anim-lsd-fade-right-duration: 500ms;
  --anim-lsd-fade-right-easing: ease;
  --anim-lsd-scale-in-duration: 400ms;
  --anim-lsd-scale-in-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
  --anim-lsd-slide-up-duration: 450ms;
  --anim-lsd-slide-up-easing: ease;
  --anim-lsd-slide-left-duration: 450ms;
  --anim-lsd-slide-left-easing: ease;
  --anim-lsd-fade-out-duration: 450ms;
  --anim-lsd-fade-out-easing: ease;
  --anim-lsd-fade-out-down-duration: 450ms;
  --anim-lsd-fade-out-down-easing: ease;
  --anim-lsd-fade-out-up-duration: 450ms;
  --anim-lsd-fade-out-up-easing: ease;
  --anim-lsd-scale-out-duration: 350ms;
  --anim-lsd-scale-out-easing: ease;
  --anim-lsd-slide-out-left-duration: 450ms;
  --anim-lsd-slide-out-left-easing: ease;
  --anim-lsd-pulse-duration: 2s;
  --anim-lsd-pulse-easing: ease-in-out;
  --anim-lsd-pulse-border-duration: 2s;
  --anim-lsd-pulse-border-easing: ease-in-out;
  --anim-lsd-float-duration: 3s;
  --anim-lsd-float-easing: ease-in-out;
  --anim-lsd-spin-duration: 1.5s;
  --anim-lsd-spin-easing: linear;
  --anim-lsd-shake-duration: 500ms;
  --anim-lsd-shake-easing: ease;
  --anim-lsd-blue-glow-duration: 2s;
  --anim-lsd-blue-glow-easing: ease-in-out;
  --anim-lsd-white-glow-duration: 2s;
  --anim-lsd-white-glow-easing: ease-in-out;
  --anim-lsd-marquee-duration: 20s;
  --anim-lsd-marquee-easing: linear;
  --anim-lsd-pulse-dot-duration: 1.5s;
  --anim-lsd-pulse-dot-easing: ease-in-out;
  --anim-lsd-bounce-in-duration: 600ms;
  --anim-lsd-bounce-in-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --anim-lsd-count-up-duration: 800ms;
  --anim-lsd-count-up-easing: ease-out;

  /* Gradients */
  --gradient-hero: linear-gradient(135deg, var(--color-primary, #7c5cff) 0%, var(--color-secondary, #ff3d71) 100%);
  --gradient-card: linear-gradient(180deg, var(--color-bg, #0a0a18) 0%, var(--color-surface, #14142a) 100%);
  --gradient-accent: radial-gradient(circle farthest-corner at 50% 50%, var(--color-primary, #7c5cff) 0%, var(--color-bg, #0a0a18) 100%);
  --gradient-sunset: linear-gradient(100deg, var(--color-warning, #f59e0b) 0%, var(--color-danger, #e11d48) 55%, var(--color-secondary, #ff3d71) 100%);

  /* Breakpoints */
  --bp-xs: 480px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  /* Aspect ratios */
  --aspect-square: 1/1;
  --aspect-video: 16/9;
  --aspect-cinema: 21/9;
  --aspect-portrait: 3/4;
  --aspect-vertical: 9/16;
  --aspect-classic: 4/3;
  --aspect-ultrawide: 32/9;
  --aspect-golden: 1.618/1;

  /* Gutter */
  --gutter: 1.5rem;

  /* Canvas widths */
  --canvas-body: 100%;
  --canvas-page: 1280px;
  --canvas-section: 960px;
  --canvas-narrow: 820px;
  --canvas-wide: 1440px;
  --canvas-full: 100%;
}

/* Type rhythm — driven by spacing-feel tokens. Body covers prose; headings get their own (tighter) leading + tracking. */
body { line-height: var(--leading); letter-spacing: var(--tracking); word-spacing: var(--word-spacing); }
h1, h2, h3, h4, h5, h6 { line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }

/* Canvas utility classes — centered, capped, gutter-padded */
.canvas-body { max-inline-size: var(--canvas-body); margin-inline: auto; padding-inline: var(--gutter, 1rem); }
.canvas-page { max-inline-size: var(--canvas-page); margin-inline: auto; padding-inline: var(--gutter, 1rem); }
.canvas-section { max-inline-size: var(--canvas-section); margin-inline: auto; padding-inline: var(--gutter, 1rem); }
.canvas-narrow { max-inline-size: var(--canvas-narrow); margin-inline: auto; padding-inline: var(--gutter, 1rem); }
.canvas-wide { max-inline-size: var(--canvas-wide); margin-inline: auto; padding-inline: var(--gutter, 1rem); }
.canvas-full { inline-size: 100%; padding-inline: var(--gutter, 1rem); }

/* ----- LSD visibility utilities — auto-generated -----
 * Keyed by the tokens.breakpoints + tokens.containers tables.
 * Classes hide or show the element at the matching context. */
@media (max-width: 480px) { .hide-at-xs { display: none !important; } }
.show-at-xs { display: none !important; }
@media (max-width: 480px) { .show-at-xs { display: revert !important; } }
@media (min-width: 480px) { .hide-above-xs { display: none !important; } }
@media (max-width: 640px) { .hide-at-sm { display: none !important; } }
.show-at-sm { display: none !important; }
@media (max-width: 640px) { .show-at-sm { display: revert !important; } }
@media (min-width: 640px) { .hide-above-sm { display: none !important; } }
@media (max-width: 768px) { .hide-at-md { display: none !important; } }
.show-at-md { display: none !important; }
@media (max-width: 768px) { .show-at-md { display: revert !important; } }
@media (min-width: 768px) { .hide-above-md { display: none !important; } }
@media (max-width: 1024px) { .hide-at-lg { display: none !important; } }
.show-at-lg { display: none !important; }
@media (max-width: 1024px) { .show-at-lg { display: revert !important; } }
@media (min-width: 1024px) { .hide-above-lg { display: none !important; } }
@media (max-width: 1280px) { .hide-at-xl { display: none !important; } }
.show-at-xl { display: none !important; }
@media (max-width: 1280px) { .show-at-xl { display: revert !important; } }
@media (min-width: 1280px) { .hide-above-xl { display: none !important; } }
@media (max-width: 1536px) { .hide-at-2xl { display: none !important; } }
.show-at-2xl { display: none !important; }
@media (max-width: 1536px) { .show-at-2xl { display: revert !important; } }
@media (min-width: 1536px) { .hide-above-2xl { display: none !important; } }

/* Keyframes */
@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slide-left {
  0% {
    opacity: 0;
    transform: translateX(24px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.05);
    opacity: 0.85;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-6px);
  }
  20% {
    transform: translateX(6px);
  }
  30% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(5px);
  }
  50% {
    transform: translateX(-4px);
  }
  60% {
    transform: translateX(4px);
  }
  70% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(3px);
  }
  90% {
    transform: translateX(-2px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes bounce-in {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  60% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes lsd-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes lsd-fade-up {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lsd-fade-down {
  0% {
    opacity: 0;
    transform: translateY(-24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes lsd-fade-left {
  0% {
    opacity: 0;
    transform: translateX(32px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes lsd-fade-right {
  0% {
    opacity: 0;
    transform: translateX(-32px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes lsd-scale-in {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes lsd-slide-up {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes lsd-slide-left {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes lsd-fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes lsd-fade-out-down {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(24px);
  }
}

@keyframes lsd-fade-out-up {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-24px);
  }
}

@keyframes lsd-scale-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.85);
  }
}

@keyframes lsd-slide-out-left {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes lsd-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes lsd-pulse-border {
  0% {
    border-color: rgba(25,99,255,0.3);
  }
  50% {
    border-color: #1963ff;
  }
  100% {
    border-color: rgba(25,99,255,0.3);
  }
}

@keyframes lsd-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes lsd-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes lsd-shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes lsd-blue-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(25,99,255,0);
  }
  50% {
    box-shadow: 0 0 20px 6px rgba(25,99,255,0.45);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(25,99,255,0);
  }
}

@keyframes lsd-white-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(255,255,255,0);
  }
  50% {
    box-shadow: 0 0 16px 4px rgba(255,255,255,0.3);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255,255,255,0);
  }
}

@keyframes lsd-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes lsd-pulse-dot {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.75);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes lsd-bounce-in {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  60% {
    transform: translateY(-5px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes lsd-count-up {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Animation utility classes */
.anim-fade-up { animation: fade-up 600ms cubic-bezier(0.4, 0, 0.2, 1) 1 both; }
.anim-fade-in { animation: fade-in 400ms ease-out 1 both; }
.anim-slide-left { animation: slide-left 500ms cubic-bezier(0.5, 0, 0.1, 1) 1 both; }
.anim-pulse { animation: pulse 1600ms ease-in-out infinite alternate both; }
.anim-spin { animation: spin 1200ms linear infinite both; }
.anim-shake { animation: shake 500ms cubic-bezier(0.36, 0.07, 0.19, 0.97) 1 both; }
.anim-bounce-in { animation: bounce-in 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 1 both; }
.anim-lsd-fade-in { animation: lsd-fade-in 500ms ease 1 both; }
.anim-lsd-fade-up { animation: lsd-fade-up 500ms ease 1 both; }
.anim-lsd-fade-down { animation: lsd-fade-down 500ms ease 1 both; }
.anim-lsd-fade-left { animation: lsd-fade-left 500ms ease 1 both; }
.anim-lsd-fade-right { animation: lsd-fade-right 500ms ease 1 both; }
.anim-lsd-scale-in { animation: lsd-scale-in 400ms cubic-bezier(0.34, 1.56, 0.64, 1) 1 both; }
.anim-lsd-slide-up { animation: lsd-slide-up 450ms ease 1 both; }
.anim-lsd-slide-left { animation: lsd-slide-left 450ms ease 1 both; }
.anim-lsd-fade-out { animation: lsd-fade-out 450ms ease 1 both; }
.anim-lsd-fade-out-down { animation: lsd-fade-out-down 450ms ease 1 both; }
.anim-lsd-fade-out-up { animation: lsd-fade-out-up 450ms ease 1 both; }
.anim-lsd-scale-out { animation: lsd-scale-out 350ms ease 1 both; }
.anim-lsd-slide-out-left { animation: lsd-slide-out-left 450ms ease 1 both; }
.anim-lsd-pulse { animation: lsd-pulse 2s ease-in-out infinite both; }
.anim-lsd-pulse-border { animation: lsd-pulse-border 2s ease-in-out infinite both; }
.anim-lsd-float { animation: lsd-float 3s ease-in-out infinite both; }
.anim-lsd-spin { animation: lsd-spin 1.5s linear infinite both; }
.anim-lsd-shake { animation: lsd-shake 500ms ease 1 both; }
.anim-lsd-blue-glow { animation: lsd-blue-glow 2s ease-in-out infinite both; }
.anim-lsd-white-glow { animation: lsd-white-glow 2s ease-in-out infinite both; }
.anim-lsd-marquee { animation: lsd-marquee 20s linear infinite both; }
.anim-lsd-pulse-dot { animation: lsd-pulse-dot 1.5s ease-in-out infinite both; }
.anim-lsd-bounce-in { animation: lsd-bounce-in 600ms cubic-bezier(0.4, 0, 0.2, 1) 1 both; }
.anim-lsd-count-up { animation: lsd-count-up 800ms ease-out 1 both; }

/* ===== Dark overrides — :root[data-theme="dark"] ===== */
:root[data-theme="dark"] {
  --color-text: #e9e7ff;
  --color-text-0: #eae8ff;
  --color-text-1: #cbc9e0;
  --color-text-2: #adabc1;
  --color-text-3: #8f8da3;
  --color-text-4: #737186;
  --color-text-5: #58566a;
  --color-text-6: #3e3c4f;
  --color-text-7: #262436;
  --color-text-8: #100e1e;
  --color-text-9: #020108;
  --color-bg: #0a0a18;
  --color-bg-0: #e8e9ff;
  --color-bg-1: #c8cadf;
  --color-bg-2: #aaacc0;
  --color-bg-3: #8d8ea2;
  --color-bg-4: #717285;
  --color-bg-5: #565769;
  --color-bg-6: #3c3d4e;
  --color-bg-7: #242535;
  --color-bg-8: #0f0f1d;
  --color-bg-9: #010108;
  --color-surface: #12121f;
  --color-surface-0: #e8e9fd;
  --color-surface-1: #c9cadd;
  --color-surface-2: #abacbe;
  --color-surface-3: #8e8ea0;
  --color-surface-4: #717283;
  --color-surface-5: #565767;
  --color-surface-6: #3d3d4d;
  --color-surface-7: #252533;
  --color-surface-8: #0f0f1c;
  --color-surface-9: #010107;
  --color-border: #2a2a47;
  --color-border-0: #e5e8ff;
  --color-border-1: #c6c8ee;
  --color-border-2: #a8aace;
  --color-border-3: #8b8db0;
  --color-border-4: #6f7092;
  --color-border-5: #545575;
  --color-border-6: #3b3b5a;
  --color-border-7: #23233f;
  --color-border-8: #0e0c26;
  --color-border-9: #02000f;
}
/* LSD v0.1.0 · generated 2026-07-21T13:49:20.707Z · base #3ef2a1 · template Matching Gradient */
/* ===== Role tokens — --{role}--on-{surface} ===== */
:root {
  --text--on-primary: #000000;
  --text--on-secondary: #000000;
  --text--on-info: #000000;
  --text--on-success: #000000;
  --text--on-danger: #000000;
  --text--on-warning: #000000;
  --text--on-bg: #ffffff;
  --text--on-surface: #ffffff;
  --text--on-light: #0f1c2e;
  --text--on-dark: #e7ebf0;
  --heading--on-primary: #000000;
  --heading--on-secondary: #000000;
  --heading--on-info: #000000;
  --heading--on-success: #000000;
  --heading--on-danger: #000000;
  --heading--on-warning: #000000;
  --heading--on-bg: #ffffff;
  --heading--on-surface: #ffffff;
  --heading--on-light: #0f1c2e;
  --heading--on-dark: #f2f4f8;
  --subheading--on-primary: #000000;
  --subheading--on-secondary: #000000;
  --subheading--on-info: #000000;
  --subheading--on-success: #000000;
  --subheading--on-danger: #000000;
  --subheading--on-warning: #000000;
  --subheading--on-bg: #ffffff;
  --subheading--on-surface: #ffffff;
  --subheading--on-light: #000000;
  --subheading--on-dark: #ffffff;
  --icon--on-primary: #000000;
  --icon--on-secondary: #000000;
  --icon--on-info: #000000;
  --icon--on-success: #000000;
  --icon--on-danger: #000000;
  --icon--on-warning: #000000;
  --icon--on-bg: #ffffff;
  --icon--on-surface: #ffffff;
  --icon--on-light: #000000;
  --icon--on-dark: #ffffff;
  --border--on-primary: #000000;
  --border--on-secondary: #000000;
  --border--on-info: #000000;
  --border--on-success: #000000;
  --border--on-danger: #000000;
  --border--on-warning: #000000;
  --border--on-bg: #ffffff;
  --border--on-surface: #ffffff;
  --border--on-light: #000000;
  --border--on-dark: #ffffff;
  --link--on-primary: #000000;
  --link--on-secondary: #000000;
  --link--on-info: #000000;
  --link--on-success: #000000;
  --link--on-danger: #000000;
  --link--on-warning: #000000;
  --link--on-bg: #ffffff;
  --link--on-surface: #ffffff;
  --link--on-light: #000000;
  --link--on-dark: #ffffff;
  --buttonLabel--on-primary: #000000;
  --buttonLabel--on-secondary: #000000;
  --buttonLabel--on-info: #000000;
  --buttonLabel--on-success: #000000;
  --buttonLabel--on-danger: #000000;
  --buttonLabel--on-warning: #000000;
  --buttonLabel--on-bg: #ffffff;
  --buttonLabel--on-surface: #ffffff;
  --buttonLabel--on-light: #000000;
  --buttonLabel--on-dark: #ffffff;
}

/* ===== State variants — --{role}--on-{surface}--{state} ===== */
:root {
  --text--on-primary--hover: #010101;
  --text--on-secondary--hover: #010101;
  --text--on-bg--hover: #ebebeb;
  --text--on-surface--hover: #ebebeb;
  --icon--on-bg--hover: #ebebeb;
  --icon--on-bg--disabled: #c2c2c2;
  --icon--on-surface--hover: #ebebeb;
  --icon--on-surface--disabled: #c4c4c4;
  --border--on-bg--focus: #e4e4e4;
  --border--on-surface--focus: #e4e4e4;
  --link--on-bg--hover: #ebebeb;
  --link--on-bg--active: #d7d7d7;
  --link--on-bg--focus: #e4e4e4;
  --link--on-surface--hover: #ebebeb;
  --link--on-surface--active: #d7d7d7;
  --link--on-surface--focus: #e4e4e4;
  --buttonLabel--on-primary--hover: #010101;
  --buttonLabel--on-primary--active: #060606;
  --buttonLabel--on-primary--disabled: #131313;
  --buttonLabel--on-primary--focus: #020202;
  --buttonLabel--on-secondary--hover: #010101;
  --buttonLabel--on-secondary--active: #060606;
  --buttonLabel--on-secondary--disabled: #0a0a0a;
  --buttonLabel--on-secondary--focus: #020202;
  --buttonLabel--on-danger--hover: #010101;
  --buttonLabel--on-danger--active: #060606;
  --buttonLabel--on-danger--disabled: #090909;
  --buttonLabel--on-danger--focus: #020202;
  --buttonLabel--on-success--hover: #010101;
  --buttonLabel--on-success--active: #060606;
  --buttonLabel--on-success--disabled: #0c0c0c;
  --buttonLabel--on-success--focus: #020202;
  --buttonLabel--on-info--hover: #010101;
  --buttonLabel--on-info--active: #060606;
  --buttonLabel--on-info--disabled: #111111;
  --buttonLabel--on-info--focus: #020202;
  --buttonLabel--on-warning--hover: #010101;
  --buttonLabel--on-warning--active: #060606;
  --buttonLabel--on-warning--disabled: #121212;
  --buttonLabel--on-warning--focus: #020202;
}
/* LSD v0.1.0 · generated 2026-07-21T13:49:20.708Z · base #3ef2a1 · template Matching Gradient */
/* ===== Surface cascade — .on-*, .surface-*, --*--current ===== */
:root {
  /* Current-surface role vars (default: on-bg) */
  --text--current: var(--text--on-bg);
  --heading--current: var(--heading--on-bg);
  --subheading--current: var(--subheading--on-bg);
  --icon--current: var(--icon--on-bg);
  --border--current: var(--border--on-bg);
  --link--current: var(--link--on-bg);
  --buttonLabel--current: var(--buttonLabel--on-bg);
  --text--current--hover: var(--text--on-bg--hover);
  --icon--current--hover: var(--icon--on-bg--hover);
  --icon--current--disabled: var(--icon--on-bg--disabled);
  --border--current--focus: var(--border--on-bg--focus);
  --link--current--hover: var(--link--on-bg--hover);
  --link--current--active: var(--link--on-bg--active);
  --link--current--visited: var(--link--on-bg--visited);
  --link--current--focus: var(--link--on-bg--focus);
}
.on-primary, .surface-primary {
  --text--current: var(--text--on-primary);
  --heading--current: var(--heading--on-primary);
  --subheading--current: var(--subheading--on-primary);
  --icon--current: var(--icon--on-primary);
  --border--current: var(--border--on-primary);
  --link--current: var(--link--on-primary);
  --buttonLabel--current: var(--buttonLabel--on-primary);
  --text--current--hover: var(--text--on-primary--hover);
  --buttonLabel--current--hover: var(--buttonLabel--on-primary--hover);
  --buttonLabel--current--focus: var(--buttonLabel--on-primary--focus);
  --buttonLabel--current--active: var(--buttonLabel--on-primary--active);
  --buttonLabel--current--disabled: var(--buttonLabel--on-primary--disabled);
  --surface-L: 0.854;
}
.surface-primary { background-color: var(--color-primary); }
.on-secondary, .surface-secondary {
  --text--current: var(--text--on-secondary);
  --heading--current: var(--heading--on-secondary);
  --subheading--current: var(--subheading--on-secondary);
  --icon--current: var(--icon--on-secondary);
  --border--current: var(--border--on-secondary);
  --link--current: var(--link--on-secondary);
  --buttonLabel--current: var(--buttonLabel--on-secondary);
  --text--current--hover: var(--text--on-secondary--hover);
  --buttonLabel--current--hover: var(--buttonLabel--on-secondary--hover);
  --buttonLabel--current--focus: var(--buttonLabel--on-secondary--focus);
  --buttonLabel--current--active: var(--buttonLabel--on-secondary--active);
  --buttonLabel--current--disabled: var(--buttonLabel--on-secondary--disabled);
  --surface-L: 0.666;
}
.surface-secondary { background-color: var(--color-secondary); }
.on-info, .surface-info {
  --text--current: var(--text--on-info);
  --heading--current: var(--heading--on-info);
  --subheading--current: var(--subheading--on-info);
  --icon--current: var(--icon--on-info);
  --border--current: var(--border--on-info);
  --link--current: var(--link--on-info);
  --buttonLabel--current: var(--buttonLabel--on-info);
  --buttonLabel--current--hover: var(--buttonLabel--on-info--hover);
  --buttonLabel--current--focus: var(--buttonLabel--on-info--focus);
  --buttonLabel--current--active: var(--buttonLabel--on-info--active);
  --buttonLabel--current--disabled: var(--buttonLabel--on-info--disabled);
  --surface-L: 0.797;
}
.surface-info { background-color: var(--color-info); }
.on-success, .surface-success {
  --text--current: var(--text--on-success);
  --heading--current: var(--heading--on-success);
  --subheading--current: var(--subheading--on-success);
  --icon--current: var(--icon--on-success);
  --border--current: var(--border--on-success);
  --link--current: var(--link--on-success);
  --buttonLabel--current: var(--buttonLabel--on-success);
  --buttonLabel--current--hover: var(--buttonLabel--on-success--hover);
  --buttonLabel--current--focus: var(--buttonLabel--on-success--focus);
  --buttonLabel--current--active: var(--buttonLabel--on-success--active);
  --buttonLabel--current--disabled: var(--buttonLabel--on-success--disabled);
  --surface-L: 0.696;
}
.surface-success { background-color: var(--color-success); }
.on-danger, .surface-danger {
  --text--current: var(--text--on-danger);
  --heading--current: var(--heading--on-danger);
  --subheading--current: var(--subheading--on-danger);
  --icon--current: var(--icon--on-danger);
  --border--current: var(--border--on-danger);
  --link--current: var(--link--on-danger);
  --buttonLabel--current: var(--buttonLabel--on-danger);
  --buttonLabel--current--hover: var(--buttonLabel--on-danger--hover);
  --buttonLabel--current--focus: var(--buttonLabel--on-danger--focus);
  --buttonLabel--current--active: var(--buttonLabel--on-danger--active);
  --buttonLabel--current--disabled: var(--buttonLabel--on-danger--disabled);
  --surface-L: 0.645;
}
.surface-danger { background-color: var(--color-danger); }
.on-warning, .surface-warning {
  --text--current: var(--text--on-warning);
  --heading--current: var(--heading--on-warning);
  --subheading--current: var(--subheading--on-warning);
  --icon--current: var(--icon--on-warning);
  --border--current: var(--border--on-warning);
  --link--current: var(--link--on-warning);
  --buttonLabel--current: var(--buttonLabel--on-warning);
  --buttonLabel--current--hover: var(--buttonLabel--on-warning--hover);
  --buttonLabel--current--focus: var(--buttonLabel--on-warning--focus);
  --buttonLabel--current--active: var(--buttonLabel--on-warning--active);
  --buttonLabel--current--disabled: var(--buttonLabel--on-warning--disabled);
  --surface-L: 0.837;
}
.surface-warning { background-color: var(--color-warning); }
.on-bg, .surface-bg {
  --text--current: var(--text--on-bg);
  --heading--current: var(--heading--on-bg);
  --subheading--current: var(--subheading--on-bg);
  --icon--current: var(--icon--on-bg);
  --border--current: var(--border--on-bg);
  --link--current: var(--link--on-bg);
  --buttonLabel--current: var(--buttonLabel--on-bg);
  --text--current--hover: var(--text--on-bg--hover);
  --icon--current--hover: var(--icon--on-bg--hover);
  --icon--current--disabled: var(--icon--on-bg--disabled);
  --border--current--focus: var(--border--on-bg--focus);
  --link--current--hover: var(--link--on-bg--hover);
  --link--current--focus: var(--link--on-bg--focus);
  --link--current--active: var(--link--on-bg--active);
  --link--current--visited: var(--link--on-bg--visited);
  --surface-L: 0.153;
}
.surface-bg { background-color: var(--color-bg); }
.on-surface, .surface-surface {
  --text--current: var(--text--on-surface);
  --heading--current: var(--heading--on-surface);
  --subheading--current: var(--subheading--on-surface);
  --icon--current: var(--icon--on-surface);
  --border--current: var(--border--on-surface);
  --link--current: var(--link--on-surface);
  --buttonLabel--current: var(--buttonLabel--on-surface);
  --text--current--hover: var(--text--on-surface--hover);
  --icon--current--hover: var(--icon--on-surface--hover);
  --icon--current--disabled: var(--icon--on-surface--disabled);
  --border--current--focus: var(--border--on-surface--focus);
  --link--current--hover: var(--link--on-surface--hover);
  --link--current--focus: var(--link--on-surface--focus);
  --link--current--active: var(--link--on-surface--active);
  --link--current--visited: var(--link--on-surface--visited);
  --surface-L: 0.189;
}
.surface-surface { background-color: var(--color-surface); }
.on-dark, .surface-dark {
  --text--current: var(--text--on-dark);
  --heading--current: var(--heading--on-dark);
  --subheading--current: var(--subheading--on-dark);
  --icon--current: var(--icon--on-dark);
  --border--current: var(--border--on-dark);
  --link--current: var(--link--on-dark);
  --buttonLabel--current: var(--buttonLabel--on-dark);
  --surface-L: 0.03;
}
/* Auto-on-surface fallback — used when no role token covers the pair. */
:root { --auto-on-surface: light-dark(#0f1c2e, #e7ebf0); --auto-on-surface-soft: color-mix(in oklch, var(--auto-on-surface) 72%, transparent); }
@container style(--surface-L > 0.6) {
  :where(*) { --auto-on-surface: #0f1c2e; --auto-on-surface-soft: color-mix(in oklch, #0f1c2e 72%, transparent); }
}
@container style(--surface-L < 0.45) {
  :where(*) { --auto-on-surface: #e7ebf0; --auto-on-surface-soft: color-mix(in oklch, #e7ebf0 72%, transparent); }
}
/* Awkward middle band (0.45 ≤ L ≤ 0.6) — dark text plus a soft outline so it survives muddy surfaces. */
@container style((--surface-L >= 0.45) and (--surface-L <= 0.6)) {
  :where(*) {
    --auto-on-surface: #0f1c2e;
    --auto-on-surface-soft: color-mix(in oklch, #0f1c2e 72%, transparent);
    text-shadow: 0 0 1px color-mix(in oklch, #ffffff 60%, transparent);
  }
}