/* [project]/src/styles/index.css [app-client] (css) */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-animation-delay: 0s;
      --tw-animation-direction: normal;
      --tw-animation-duration: initial;
      --tw-animation-fill-mode: none;
      --tw-animation-iteration-count: 1;
      --tw-enter-blur: 0;
      --tw-enter-opacity: 1;
      --tw-enter-rotate: 0;
      --tw-enter-scale: 1;
      --tw-enter-translate-x: 0;
      --tw-enter-translate-y: 0;
      --tw-exit-blur: 0;
      --tw-exit-opacity: 1;
      --tw-exit-rotate: 0;
      --tw-exit-scale: 1;
      --tw-exit-translate-x: 0;
      --tw-exit-translate-y: 0;
    }
  }
}

:root, :host {
  --radius-2xl-plus: 1.25rem;
  --font-sans: var(--font-body-base), "Hanken Grotesk", sans-serif;
  --font-mono: var(--font-geist-mono);
  --color-red-50: #fef2f2;
  --color-red-100: #ffe2e2;
  --color-red-200: #ffcaca;
  --color-red-300: #ffa3a3;
  --color-red-400: #ff6568;
  --color-red-500: #fb2c36;
  --color-red-600: #e40014;
  --color-red-700: #bf000f;
  --color-red-800: #9f0712;
  --color-orange-200: #ffd7a8;
  --color-orange-300: #ffb96d;
  --color-orange-500: #fe6e00;
  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c6;
  --color-amber-200: #fee685;
  --color-amber-300: #ffd236;
  --color-amber-400: #fcbb00;
  --color-amber-500: #f99c00;
  --color-amber-600: #dd7400;
  --color-amber-700: #b75000;
  --color-amber-800: #953d00;
  --color-amber-900: #7b3306;
  --color-amber-950: #461901;
  --color-yellow-600: #cd8900;
  --color-green-50: #f0fdf4;
  --color-green-200: #b9f8cf;
  --color-green-300: #7bf1a8;
  --color-green-400: #05df72;
  --color-green-500: #00c758;
  --color-green-600: #00a544;
  --color-green-700: #008138;
  --color-green-800: #016630;
  --color-green-950: #032e15;
  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d0fae5;
  --color-emerald-200: #a4f4cf;
  --color-emerald-300: #5ee9b5;
  --color-emerald-400: #00d294;
  --color-emerald-500: #00bb7f;
  --color-emerald-600: #009767;
  --color-emerald-700: #007956;
  --color-emerald-800: #005f46;
  --color-emerald-950: #002c22;
  --color-sky-50: #f0f9ff;
  --color-sky-200: #b8e6fe;
  --color-sky-300: #77d4ff;
  --color-sky-400: #00bcfe;
  --color-sky-500: #00a5ef;
  --color-sky-600: #0084cc;
  --color-sky-700: #0069a4;
  --color-sky-800: #005986;
  --color-sky-950: #052f4a;
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bedbff;
  --color-blue-300: #90c5ff;
  --color-blue-500: #3080ff;
  --color-blue-600: #155dfc;
  --color-blue-700: #1447e6;
  --color-blue-800: #193cb8;
  --color-indigo-50: #eef2ff;
  --color-indigo-300: #a4b3ff;
  --color-indigo-400: #7d87ff;
  --color-indigo-500: #625fff;
  --color-indigo-600: #4f39f6;
  --color-indigo-700: #432dd7;
  --color-violet-50: #f5f3ff;
  --color-violet-200: #ddd6ff;
  --color-violet-300: #c4b4ff;
  --color-violet-400: #a685ff;
  --color-violet-500: #8d54ff;
  --color-violet-600: #7f22fe;
  --color-violet-700: #7008e7;
  --color-violet-800: #5d0ec0;
  --color-violet-950: #2f0d68;
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cad5e2;
  --color-slate-400: #90a1b9;
  --color-slate-500: #62748e;
  --color-slate-600: #45556c;
  --color-slate-700: #314158;
  --color-slate-800: #1d293d;
  --color-slate-900: #0f172b;
  --color-slate-950: #020618;
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a1a1a1;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;
  --color-black: #000;
  --color-white: #fff;
  --spacing: .25rem;
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;
  --text-xs: .75rem;
  --text-xs--line-height: calc(1 / .75);
  --text-sm: .875rem;
  --text-sm--line-height: calc(1.25 / .875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5 / 2.25);
  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --text-6xl: 3.75rem;
  --text-6xl--line-height: 1;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --tracking-tight: -.025em;
  --tracking-normal: 0em;
  --tracking-wide: .025em;
  --tracking-wider: .05em;
  --tracking-widest: .1em;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --radius-xs: .125rem;
  --radius-sm: .25rem;
  --radius-md: .375rem;
  --radius-lg: .5rem;
  --radius-xl: .75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-4xl: 2rem;
  --shadow-xs: 0 1px 2px 0 #0000000d;
  --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
  --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
  --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
  --shadow-2xl: 0 25px 50px -12px #00000040;
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --animate-spin: spin 1s linear infinite;
  --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
  --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-xl: 24px;
  --aspect-video: 16 / 9;
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  --default-font-family: var(--font-body-base), "Hanken Grotesk", sans-serif;
  --default-mono-font-family: var(--font-geist-mono);
  --color-info: var(--info);
  --color-info-content: var(--info-content);
  --color-success: var(--success);
  --color-success-content: var(--success-content);
  --color-warning: var(--warning);
  --color-warning-content: var(--warning-content);
  --color-error: var(--error);
  --color-error-content: var(--error-content);
  --color-neutral: var(--neutral);
  --color-neutral-content: var(--neutral-content);
  --color-base-100: var(--base-100);
  --color-base-200: var(--base-200);
  --color-base-300: var(--base-300);
  --color-base-content: var(--base-content);
  --font-heading: var(--font-heading-base);
  --font-body: var(--font-body-base), "Hanken Grotesk", sans-serif;
  --font-logo: var(--font-logo-base);
  --color-border: var(--border);
  --color-accent: var(--accent);
  --color-secondary: var(--secondary);
  --color-primary: var(--primary);
}

@supports (color: lab(0% 0 0)) {
  :root, :host {
    --color-red-50: lab(96.5005% 4.18508 1.52328);
    --color-red-100: lab(92.243% 10.2865 3.83865);
    --color-red-200: lab(86.017% 19.8815 7.75869);
    --color-red-300: lab(76.5514% 36.422 15.5335);
    --color-red-400: lab(63.7053% 60.745 31.3109);
    --color-red-500: lab(55.4814% 75.0732 48.8528);
    --color-red-600: lab(48.4493% 77.4328 61.5452);
    --color-red-700: lab(40.4273% 67.2623 53.7441);
    --color-red-800: lab(33.7174% 55.8993 41.0293);
    --color-orange-200: lab(88.4871% 9.94918 28.8378);
    --color-orange-300: lab(80.8059% 21.7313 50.4455);
    --color-orange-500: lab(64.272% 57.1788 90.3583);
    --color-amber-50: lab(98.6252% -.635922 8.42309);
    --color-amber-100: lab(95.916% -1.21653 23.111);
    --color-amber-200: lab(91.7203% -.505269 49.9084);
    --color-amber-300: lab(86.4156% 6.13147 78.3961);
    --color-amber-400: lab(80.1641% 16.6016 99.2089);
    --color-amber-500: lab(72.7183% 31.8672 97.9407);
    --color-amber-600: lab(60.3514% 40.5624 87.1228);
    --color-amber-700: lab(47.2709% 42.9082 69.2966);
    --color-amber-800: lab(37.8822% 37.1699 52.2718);
    --color-amber-900: lab(31.2288% 30.2627 40.0378);
    --color-amber-950: lab(15.8111% 20.9107 23.3752);
    --color-yellow-600: lab(62.7799% 22.4197 86.1544);
    --color-green-50: lab(98.1563% -5.60117 2.75915);
    --color-green-200: lab(92.4222% -26.4702 12.9427);
    --color-green-300: lab(86.9953% -47.2691 25.0054);
    --color-green-400: lab(78.503% -64.9265 39.7492);
    --color-green-500: lab(70.5521% -66.5147 45.8073);
    --color-green-600: lab(59.0978% -58.6621 41.2579);
    --color-green-700: lab(47.0329% -47.0239 31.4788);
    --color-green-800: lab(37.4616% -36.7971 22.9692);
    --color-green-950: lab(15.6845% -20.4225 11.7249);
    --color-emerald-50: lab(97.8462% -6.94966 1.85487);
    --color-emerald-100: lab(94.9004% -17.0769 5.63836);
    --color-emerald-200: lab(90.2247% -31.039 9.47084);
    --color-emerald-300: lab(83.9203% -48.7124 13.8849);
    --color-emerald-400: lab(75.0771% -60.7313 19.4147);
    --color-emerald-500: lab(66.9756% -58.27 19.5419);
    --color-emerald-600: lab(55.0481% -49.9246 15.93);
    --color-emerald-700: lab(44.4871% -41.0396 11.0361);
    --color-emerald-800: lab(35.3675% -33.1188 8.04002);
    --color-emerald-950: lab(15.0582% -17.9507 2.38369);
    --color-sky-50: lab(97.3623% -2.33802 -4.13098);
    --color-sky-200: lab(88.6983% -11.3978 -16.8488);
    --color-sky-300: lab(80.3307% -20.2945 -31.385);
    --color-sky-400: lab(70.687% -23.6078 -45.9483);
    --color-sky-500: lab(63.3038% -18.433 -51.0407);
    --color-sky-600: lab(51.7754% -11.4712 -49.8349);
    --color-sky-700: lab(41.6013% -9.10804 -42.5647);
    --color-sky-800: lab(35.164% -9.57692 -34.4068);
    --color-sky-950: lab(17.8299% -5.31271 -21.1584);
    --color-blue-50: lab(96.492% -1.14644 -5.11479);
    --color-blue-100: lab(92.0301% -2.24757 -11.6453);
    --color-blue-200: lab(86.15% -4.04379 -21.0797);
    --color-blue-300: lab(77.5052% -6.4629 -36.42);
    --color-blue-500: lab(54.1736% 13.3369 -74.6839);
    --color-blue-600: lab(44.0605% 29.0279 -86.0352);
    --color-blue-700: lab(36.9089% 35.0961 -85.6872);
    --color-blue-800: lab(30.2514% 27.7853 -70.2699);
    --color-indigo-50: lab(95.4818% .411302 -6.78529);
    --color-indigo-300: lab(74.0235% 8.54138 -41.6075);
    --color-indigo-400: lab(59.866% 22.4834 -64.4485);
    --color-indigo-500: lab(48.295% 38.3129 -81.9673);
    --color-indigo-600: lab(38.4009% 52.6132 -92.3857);
    --color-indigo-700: lab(32.4486% 49.2217 -84.6695);
    --color-violet-50: lab(96.2416% 2.28849 -5.51657);
    --color-violet-200: lab(87.0888% 8.53688 -19.4189);
    --color-violet-300: lab(76.7419% 18.3911 -37.0706);
    --color-violet-400: lab(62.8239% 34.9159 -60.0512);
    --color-violet-500: lab(49.9355% 55.1776 -81.8963);
    --color-violet-600: lab(41.088% 68.9966 -91.995);
    --color-violet-700: lab(35.2783% 67.9912 -88.793);
    --color-violet-800: lab(29.3188% 57.7986 -76.1493);
    --color-violet-950: lab(14.0706% 33.3353 -46.7553);
    --color-slate-50: lab(98.1434% -.369519 -1.05966);
    --color-slate-100: lab(96.286% -.852436 -2.46847);
    --color-slate-200: lab(91.7353% -.998765 -4.76968);
    --color-slate-300: lab(84.7652% -1.94535 -7.93337);
    --color-slate-400: lab(65.5349% -2.25151 -14.5072);
    --color-slate-500: lab(48.0876% -2.03595 -16.5814);
    --color-slate-600: lab(35.5623% -1.74978 -15.4316);
    --color-slate-700: lab(26.9569% -1.47016 -15.6993);
    --color-slate-800: lab(16.132% -.318035 -14.6672);
    --color-slate-900: lab(7.78673% 1.82345 -15.0537);
    --color-slate-950: lab(1.76974% 1.32743 -9.28855);
    --color-neutral-50: lab(98.26% 0 0);
    --color-neutral-100: lab(96.52% -.0000298023 .0000119209);
    --color-neutral-200: lab(90.952% 0 -.0000119209);
    --color-neutral-300: lab(84.92% 0 -.0000119209);
    --color-neutral-400: lab(66.128% -.0000298023 .0000119209);
    --color-neutral-500: lab(48.496% 0 0);
    --color-neutral-600: lab(34.924% 0 0);
    --color-neutral-700: lab(27.036% 0 0);
    --color-neutral-800: lab(15.204% 0 -.00000596046);
    --color-neutral-900: lab(7.78201% -.0000149012 0);
    --color-neutral-950: lab(2.75381% 0 0);
  }
}

:root {
  --ink: #0f0e0c;
  --ink-2: #2b2823;
  --ink-muted: #6e6a60;
  --ink-muted-2: #93908a;
  --line-soft: #0f0e0c14;
  --line-strong: #0f0e0c24;
  --radius-surface: 14px;
  --radius-surface-sm: 9px;
  --tone-success: #10b981;
  --tone-success-text: #15803d;
  --tone-warning: #f59e0b;
  --tone-warning-text: #b45309;
  --tone-info: #3b82f6;
  --tone-info-text: #1d4ed8;
  --tone-danger: #b91c1c;
}

@layer base {
  * {
    border-color: var(--border);
    outline-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    * {
      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
  }

  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

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

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

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

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

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

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

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

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

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

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

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

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

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

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

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

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

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer theme, components;

@layer utilities {
  .\@container {
    container-type: inline-size;
  }

  .\!pointer-events-none {
    pointer-events: none !important;
  }

  .pointer-events-auto {
    pointer-events: auto;
  }

  .pointer-events-none {
    pointer-events: none;
  }

  .\!visible {
    visibility: visible !important;
  }

  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .visible\! {
    visibility: visible !important;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .\!relative {
    position: relative !important;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }

  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }

  .inset-x-6 {
    inset-inline: calc(var(--spacing) * 6);
  }

  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }

  .start {
    inset-inline-start: var(--spacing);
  }

  .\!end {
    inset-inline-end: var(--spacing) !important;
  }

  .end {
    inset-inline-end: var(--spacing);
  }

  .-top-3 {
    top: calc(var(--spacing) * -3);
  }

  .-top-4 {
    top: calc(var(--spacing) * -4);
  }

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

  .top-1 {
    top: calc(var(--spacing) * 1);
  }

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

  .top-2 {
    top: calc(var(--spacing) * 2);
  }

  .top-3 {
    top: calc(var(--spacing) * 3);
  }

  .top-4 {
    top: calc(var(--spacing) * 4);
  }

  .top-5 {
    top: calc(var(--spacing) * 5);
  }

  .top-9 {
    top: calc(var(--spacing) * 9);
  }

  .top-12 {
    top: calc(var(--spacing) * 12);
  }

  .top-24 {
    top: calc(var(--spacing) * 24);
  }

  .top-40 {
    top: calc(var(--spacing) * 40);
  }

  .-right-4 {
    right: calc(var(--spacing) * -4);
  }

  .right-0 {
    right: calc(var(--spacing) * 0);
  }

  .right-1 {
    right: calc(var(--spacing) * 1);
  }

  .right-1\.5 {
    right: calc(var(--spacing) * 1.5);
  }

  .right-2 {
    right: calc(var(--spacing) * 2);
  }

  .right-3 {
    right: calc(var(--spacing) * 3);
  }

  .right-4 {
    right: calc(var(--spacing) * 4);
  }

  .right-5 {
    right: calc(var(--spacing) * 5);
  }

  .right-6 {
    right: calc(var(--spacing) * 6);
  }

  .-bottom-4 {
    bottom: calc(var(--spacing) * -4);
  }

  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }

  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }

  .bottom-20 {
    bottom: calc(var(--spacing) * 20);
  }

  .left-0 {
    left: calc(var(--spacing) * 0);
  }

  .left-2\.5 {
    left: calc(var(--spacing) * 2.5);
  }

  .left-3 {
    left: calc(var(--spacing) * 3);
  }

  .left-6 {
    left: calc(var(--spacing) * 6);
  }

  .isolate {
    isolation: isolate;
  }

  .z-0 {
    z-index: 0;
  }

  .z-1 {
    z-index: 1;
  }

  .z-10 {
    z-index: 10;
  }

  .z-20 {
    z-index: 20;
  }

  .z-30 {
    z-index: 30;
  }

  .z-50 {
    z-index: 50;
  }

  .z-190 {
    z-index: 190;
  }

  .z-200 {
    z-index: 200;
  }

  .z-300 {
    z-index: 300;
  }

  .z-9999 {
    z-index: 9999;
  }

  .z-\[1000\] {
    z-index: 1000;
  }

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

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

  .row-span-1 {
    grid-row: span 1 / span 1;
  }

  .row-span-2 {
    grid-row: span 2 / span 2;
  }

  .container {
    width: 100%;
  }

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

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .\!m-2 {
    margin: calc(var(--spacing) * 2) !important;
  }

  .-m-4 {
    margin: calc(var(--spacing) * -4);
  }

  .m-0 {
    margin: calc(var(--spacing) * 0);
  }

  .m-4 {
    margin: calc(var(--spacing) * 4);
  }

  .-mx-1 {
    margin-inline: calc(var(--spacing) * -1);
  }

  .mx-1 {
    margin-inline: calc(var(--spacing) * 1);
  }

  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }

  .mx-3 {
    margin-inline: calc(var(--spacing) * 3);
  }

  .mx-5 {
    margin-inline: calc(var(--spacing) * 5);
  }

  .mx-5\.5 {
    margin-inline: calc(var(--spacing) * 5.5);
  }

  .mx-auto {
    margin-inline: auto;
  }

  .my-0\.5 {
    margin-block: calc(var(--spacing) * .5);
  }

  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }

  .my-3 {
    margin-block: calc(var(--spacing) * 3);
  }

  .my-12 {
    margin-block: calc(var(--spacing) * 12);
  }

  .my-16 {
    margin-block: calc(var(--spacing) * 16);
  }

  .-mt-1 {
    margin-top: calc(var(--spacing) * -1);
  }

  .-mt-2 {
    margin-top: calc(var(--spacing) * -2);
  }

  .mt-0 {
    margin-top: calc(var(--spacing) * 0);
  }

  .mt-0\.5 {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-2\.5 {
    margin-top: calc(var(--spacing) * 2.5);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-auto {
    margin-top: auto;
  }

  .-mr-1 {
    margin-right: calc(var(--spacing) * -1);
  }

  .mr-1\.5 {
    margin-right: calc(var(--spacing) * 1.5);
  }

  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }

  .mb-0\! {
    margin-bottom: calc(var(--spacing) * 0) !important;
  }

  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-2\.5 {
    margin-bottom: calc(var(--spacing) * 2.5);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .-ml-1 {
    margin-left: calc(var(--spacing) * -1);
  }

  .ml-0\.5 {
    margin-left: calc(var(--spacing) * .5);
  }

  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }

  .ml-1\.5 {
    margin-left: calc(var(--spacing) * 1.5);
  }

  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }

  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }

  .ml-7 {
    margin-left: calc(var(--spacing) * 7);
  }

  .ml-auto {
    margin-left: auto;
  }

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

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

  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .\!block {
    display: block !important;
  }

  .\!grid {
    display: grid !important;
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .grid\! {
    display: grid !important;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

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

  .inline-table {
    display: inline-table;
  }

  .table {
    display: table;
  }

  .table-caption {
    display: table-caption;
  }

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

  .table-column {
    display: table-column;
  }

  .table-row {
    display: table-row;
  }

  .aspect-auto {
    aspect-ratio: auto;
  }

  .aspect-video {
    aspect-ratio: var(--aspect-video);
  }

  .\!size-2 {
    width: calc(var(--spacing) * 2) !important;
    height: calc(var(--spacing) * 2) !important;
  }

  .size-2 {
    width: calc(var(--spacing) * 2);
    height: calc(var(--spacing) * 2);
  }

  .size-2\.5 {
    width: calc(var(--spacing) * 2.5);
    height: calc(var(--spacing) * 2.5);
  }

  .size-3 {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .size-3\.5 {
    width: calc(var(--spacing) * 3.5);
    height: calc(var(--spacing) * 3.5);
  }

  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .size-4\.5 {
    width: calc(var(--spacing) * 4.5);
    height: calc(var(--spacing) * 4.5);
  }

  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }

  .size-7 {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
  }

  .size-7\.5 {
    width: calc(var(--spacing) * 7.5);
    height: calc(var(--spacing) * 7.5);
  }

  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }

  .size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }

  .size-10 {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }

  .size-14 {
    width: calc(var(--spacing) * 14);
    height: calc(var(--spacing) * 14);
  }

  .size-full {
    width: 100%;
    height: 100%;
  }

  .size-px {
    width: 1px;
    height: 1px;
  }

  .\!h-9 {
    height: calc(var(--spacing) * 9) !important;
  }

  .\!h-\[52px\] {
    height: 52px !important;
  }

  .h-0\.5 {
    height: calc(var(--spacing) * .5);
  }

  .h-1 {
    height: calc(var(--spacing) * 1);
  }

  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }

  .h-1\/2 {
    height: 50%;
  }

  .h-2 {
    height: calc(var(--spacing) * 2);
  }

  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }

  .h-3 {
    height: calc(var(--spacing) * 3);
  }

  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-5\.5 {
    height: calc(var(--spacing) * 5.5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-8\.5 {
    height: calc(var(--spacing) * 8.5);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-9\! {
    height: calc(var(--spacing) * 9) !important;
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-10\.5 {
    height: calc(var(--spacing) * 10.5);
  }

  .h-11 {
    height: calc(var(--spacing) * 11);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-14 {
    height: calc(var(--spacing) * 14);
  }

  .h-16 {
    height: calc(var(--spacing) * 16);
  }

  .h-18 {
    height: calc(var(--spacing) * 18);
  }

  .h-20 {
    height: calc(var(--spacing) * 20);
  }

  .h-24 {
    height: calc(var(--spacing) * 24);
  }

  .h-27\.5 {
    height: calc(var(--spacing) * 27.5);
  }

  .h-28 {
    height: calc(var(--spacing) * 28);
  }

  .h-32 {
    height: calc(var(--spacing) * 32);
  }

  .h-40 {
    height: calc(var(--spacing) * 40);
  }

  .h-44 {
    height: calc(var(--spacing) * 44);
  }

  .h-48 {
    height: calc(var(--spacing) * 48);
  }

  .h-55 {
    height: calc(var(--spacing) * 55);
  }

  .h-60 {
    height: calc(var(--spacing) * 60);
  }

  .h-65 {
    height: calc(var(--spacing) * 65);
  }

  .h-70 {
    height: calc(var(--spacing) * 70);
  }

  .h-72 {
    height: calc(var(--spacing) * 72);
  }

  .h-80 {
    height: calc(var(--spacing) * 80);
  }

  .h-96 {
    height: calc(var(--spacing) * 96);
  }

  .h-105 {
    height: calc(var(--spacing) * 105);
  }

  .h-150 {
    height: calc(var(--spacing) * 150);
  }

  .h-225 {
    height: calc(var(--spacing) * 225);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .h-\[calc\(--spacing\(5\.25\)\)\] {
    height: calc(calc(var(--spacing) * 5.25));
  }

  .h-\[calc\(100\%-44px\)\] {
    height: calc(100% - 44px);
  }

  .h-\[calc\(100dvh-13rem\)\] {
    height: calc(100dvh - 13rem);
  }

  .h-\[calc\(100svh-var\(--header-height\)-1px\)\] {
    height: calc(100svh - var(--header-height) - 1px);
  }

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

  .h-auto {
    height: auto;
  }

  .h-auto\! {
    height: auto !important;
  }

  .h-fit {
    height: fit-content;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .h-screen {
    height: 100vh;
  }

  .max-h-\(--available-height\) {
    max-height: var(--available-height);
  }

  .max-h-20 {
    max-height: calc(var(--spacing) * 20);
  }

  .max-h-24 {
    max-height: calc(var(--spacing) * 24);
  }

  .max-h-40 {
    max-height: calc(var(--spacing) * 40);
  }

  .max-h-48 {
    max-height: calc(var(--spacing) * 48);
  }

  .max-h-56 {
    max-height: calc(var(--spacing) * 56);
  }

  .max-h-60 {
    max-height: calc(var(--spacing) * 60);
  }

  .max-h-64 {
    max-height: calc(var(--spacing) * 64);
  }

  .max-h-72 {
    max-height: calc(var(--spacing) * 72);
  }

  .max-h-80 {
    max-height: calc(var(--spacing) * 80);
  }

  .max-h-84 {
    max-height: calc(var(--spacing) * 84);
  }

  .max-h-90 {
    max-height: calc(var(--spacing) * 90);
  }

  .max-h-96 {
    max-height: calc(var(--spacing) * 96);
  }

  .max-h-105 {
    max-height: calc(var(--spacing) * 105);
  }

  .max-h-\[32rem\] {
    max-height: 32rem;
  }

  .max-h-\[38rem\] {
    max-height: 38rem;
  }

  .max-h-\[80svh\] {
    max-height: 80svh;
  }

  .max-h-\[min\(calc\(--spacing\(72\)---spacing\(9\)\)\,calc\(var\(--available-height\)---spacing\(9\)\)\)\] {
    max-height: min(calc(calc(var(--spacing) * 72) - calc(var(--spacing) * 9)), calc(var(--available-height) - calc(var(--spacing) * 9)));
  }

  .max-h-\[min\(var\(--radix-popover-content-available-height\)\,44rem\)\] {
    max-height: min(var(--radix-popover-content-available-height), 44rem);
  }

  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }

  .min-h-7 {
    min-height: calc(var(--spacing) * 7);
  }

  .min-h-8 {
    min-height: calc(var(--spacing) * 8);
  }

  .min-h-14 {
    min-height: calc(var(--spacing) * 14);
  }

  .min-h-16 {
    min-height: calc(var(--spacing) * 16);
  }

  .min-h-20 {
    min-height: calc(var(--spacing) * 20);
  }

  .min-h-22 {
    min-height: calc(var(--spacing) * 22);
  }

  .min-h-24 {
    min-height: calc(var(--spacing) * 24);
  }

  .min-h-28 {
    min-height: calc(var(--spacing) * 28);
  }

  .min-h-32 {
    min-height: calc(var(--spacing) * 32);
  }

  .min-h-40 {
    min-height: calc(var(--spacing) * 40);
  }

  .min-h-48 {
    min-height: calc(var(--spacing) * 48);
  }

  .min-h-64 {
    min-height: calc(var(--spacing) * 64);
  }

  .min-h-72 {
    min-height: calc(var(--spacing) * 72);
  }

  .min-h-80 {
    min-height: calc(var(--spacing) * 80);
  }

  .min-h-96 {
    min-height: calc(var(--spacing) * 96);
  }

  .min-h-\[1\.5em\] {
    min-height: 1.5em;
  }

  .min-h-\[36rem\] {
    min-height: 36rem;
  }

  .min-h-\[38rem\] {
    min-height: 38rem;
  }

  .min-h-\[50vh\] {
    min-height: 50vh;
  }

  .min-h-\[60vh\] {
    min-height: 60vh;
  }

  .min-h-\[70svh\] {
    min-height: 70svh;
  }

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

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

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

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

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

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

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

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

  .min-h-\[calc\(100svh-var\(--header-height\)-1px\)\] {
    min-height: calc(100svh - var(--header-height) - 1px);
  }

  .min-h-full {
    min-height: 100%;
  }

  .min-h-screen {
    min-height: 100vh;
  }

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

  .w-\(--anchor-width\) {
    width: var(--anchor-width);
  }

  .w-\(--dashboard-right-sidebar-mobile-width\) {
    width: var(--dashboard-right-sidebar-mobile-width);
  }

  .w-\(--radix-popover-trigger-width\) {
    width: var(--radix-popover-trigger-width);
  }

  .w-0 {
    width: calc(var(--spacing) * 0);
  }

  .w-1 {
    width: calc(var(--spacing) * 1);
  }

  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }

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

  .w-2 {
    width: calc(var(--spacing) * 2);
  }

  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }

  .w-3 {
    width: calc(var(--spacing) * 3);
  }

  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-4\/5 {
    width: 80%;
  }

  .w-5 {
    width: calc(var(--spacing) * 5);
  }

  .w-5\.5 {
    width: calc(var(--spacing) * 5.5);
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-7 {
    width: calc(var(--spacing) * 7);
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-9 {
    width: calc(var(--spacing) * 9);
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-16 {
    width: calc(var(--spacing) * 16);
  }

  .w-20 {
    width: calc(var(--spacing) * 20);
  }

  .w-24 {
    width: calc(var(--spacing) * 24);
  }

  .w-28 {
    width: calc(var(--spacing) * 28);
  }

  .w-32 {
    width: calc(var(--spacing) * 32);
  }

  .w-40 {
    width: calc(var(--spacing) * 40);
  }

  .w-44 {
    width: calc(var(--spacing) * 44);
  }

  .w-48 {
    width: calc(var(--spacing) * 48);
  }

  .w-52 {
    width: calc(var(--spacing) * 52);
  }

  .w-55 {
    width: calc(var(--spacing) * 55);
  }

  .w-56 {
    width: calc(var(--spacing) * 56);
  }

  .w-64 {
    width: calc(var(--spacing) * 64);
  }

  .w-72 {
    width: calc(var(--spacing) * 72);
  }

  .w-80 {
    width: calc(var(--spacing) * 80);
  }

  .w-96 {
    width: calc(var(--spacing) * 96);
  }

  .w-115 {
    width: calc(var(--spacing) * 115);
  }

  .w-378 {
    width: calc(var(--spacing) * 378);
  }

  .w-\[8\%\] {
    width: 8%;
  }

  .w-\[9\%\] {
    width: 9%;
  }

  .w-\[10\%\] {
    width: 10%;
  }

  .w-\[12\%\] {
    width: 12%;
  }

  .w-\[13\%\] {
    width: 13%;
  }

  .w-\[14\%\] {
    width: 14%;
  }

  .w-\[15\%\] {
    width: 15%;
  }

  .w-\[22\%\] {
    width: 22%;
  }

  .w-\[22rem\] {
    width: 22rem;
  }

  .w-\[23\%\] {
    width: 23%;
  }

  .w-\[26\%\] {
    width: 26%;
  }

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

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

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

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

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

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

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

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

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

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

  .w-\[min\(24rem\,calc\(100vw-2rem\)\)\] {
    width: min(24rem, 100vw - 2rem);
  }

  .w-\[min\(25rem\,calc\(100\%-3rem\)\)\] {
    width: min(25rem, 100% - 3rem);
  }

  .w-\[min\(100\%-2rem\,26rem\)\] {
    width: min(100% - 2rem, 26rem);
  }

  .w-\[var\(--radix-select-trigger-width\)\] {
    width: var(--radix-select-trigger-width);
  }

  .w-auto {
    width: auto;
  }

  .w-auto\! {
    width: auto !important;
  }

  .w-fit {
    width: fit-content;
  }

  .w-full {
    width: 100%;
  }

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

  .w-px {
    width: 1px;
  }

  .max-w-\(--available-width\) {
    max-width: var(--available-width);
  }

  .max-w-\(--dashboard-right-sidebar-mobile-width\) {
    max-width: var(--dashboard-right-sidebar-mobile-width);
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

  .max-w-3xl {
    max-width: var(--container-3xl);
  }

  .max-w-4xl {
    max-width: var(--container-4xl);
  }

  .max-w-5xl {
    max-width: var(--container-5xl);
  }

  .max-w-6xl {
    max-width: var(--container-6xl);
  }

  .max-w-7xl {
    max-width: var(--container-7xl);
  }

  .max-w-12 {
    max-width: calc(var(--spacing) * 12);
  }

  .max-w-28 {
    max-width: calc(var(--spacing) * 28);
  }

  .max-w-40 {
    max-width: calc(var(--spacing) * 40);
  }

  .max-w-48 {
    max-width: calc(var(--spacing) * 48);
  }

  .max-w-64 {
    max-width: calc(var(--spacing) * 64);
  }

  .max-w-80 {
    max-width: calc(var(--spacing) * 80);
  }

  .max-w-97\.5 {
    max-width: calc(var(--spacing) * 97.5);
  }

  .max-w-105 {
    max-width: calc(var(--spacing) * 105);
  }

  .max-w-150 {
    max-width: calc(var(--spacing) * 150);
  }

  .max-w-200 {
    max-width: calc(var(--spacing) * 200);
  }

  .max-w-280 {
    max-width: calc(var(--spacing) * 280);
  }

  .max-w-460 {
    max-width: calc(var(--spacing) * 460);
  }

  .max-w-\[80\%\] {
    max-width: 80%;
  }

  .max-w-\[85\%\] {
    max-width: 85%;
  }

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

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

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

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

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

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

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

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

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

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

  .max-w-\[calc\(100vw-16px\)\] {
    max-width: calc(100vw - 16px);
  }

  .max-w-full {
    max-width: 100%;
  }

  .max-w-lg {
    max-width: var(--container-lg);
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-none {
    max-width: none;
  }

  .max-w-prose {
    max-width: 65ch;
  }

  .max-w-sm {
    max-width: var(--container-sm);
  }

  .max-w-xl {
    max-width: var(--container-xl);
  }

  .max-w-xs {
    max-width: var(--container-xs);
  }

  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .min-w-4xl {
    min-width: var(--container-4xl);
  }

  .min-w-7xl {
    min-width: var(--container-7xl);
  }

  .min-w-8 {
    min-width: calc(var(--spacing) * 8);
  }

  .min-w-16 {
    min-width: calc(var(--spacing) * 16);
  }

  .min-w-24 {
    min-width: calc(var(--spacing) * 24);
  }

  .min-w-28 {
    min-width: calc(var(--spacing) * 28);
  }

  .min-w-35 {
    min-width: calc(var(--spacing) * 35);
  }

  .min-w-36 {
    min-width: calc(var(--spacing) * 36);
  }

  .min-w-50 {
    min-width: calc(var(--spacing) * 50);
  }

  .min-w-52 {
    min-width: calc(var(--spacing) * 52);
  }

  .min-w-56 {
    min-width: calc(var(--spacing) * 56);
  }

  .min-w-60 {
    min-width: calc(var(--spacing) * 60);
  }

  .min-w-64 {
    min-width: calc(var(--spacing) * 64);
  }

  .min-w-155 {
    min-width: calc(var(--spacing) * 155);
  }

  .min-w-180 {
    min-width: calc(var(--spacing) * 180);
  }

  .min-w-215 {
    min-width: calc(var(--spacing) * 215);
  }

  .min-w-225 {
    min-width: calc(var(--spacing) * 225);
  }

  .min-w-230 {
    min-width: calc(var(--spacing) * 230);
  }

  .min-w-\[8rem\] {
    min-width: 8rem;
  }

  .min-w-\[220px\] {
    min-width: 220px;
  }

  .min-w-\[850px\] {
    min-width: 850px;
  }

  .min-w-\[calc\(var\(--anchor-width\)\+--spacing\(7\)\)\] {
    min-width: calc(var(--anchor-width) + calc(var(--spacing) * 7));
  }

  .min-w-max {
    min-width: max-content;
  }

  .min-w-px {
    min-width: 1px;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-none {
    flex: none;
  }

  .shrink {
    flex-shrink: 1;
  }

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

  .grow {
    flex-grow: 1;
  }

  .table-fixed {
    table-layout: fixed;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .origin-\(--transform-origin\) {
    transform-origin: var(--transform-origin);
  }

  .translate-x-0\.5 {
    --tw-translate-x: calc(var(--spacing) * .5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-4\.5 {
    --tw-translate-x: calc(var(--spacing) * 4.5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .scale-\[0\.985\] {
    scale: .985;
  }

  .-rotate-90 {
    rotate: -90deg;
  }

  .rotate-90 {
    rotate: 90deg;
  }

  .rotate-180 {
    rotate: 180deg;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .animate-in {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
  }

  .animate-ping {
    animation: var(--animate-ping);
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

  .cursor-default {
    cursor: default;
  }

  .cursor-grab {
    cursor: grab;
  }

  .cursor-grabbing {
    cursor: grabbing;
  }

  .cursor-help {
    cursor: help;
  }

  .cursor-not-allowed {
    cursor: not-allowed;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .cursor-text {
    cursor: text;
  }

  .resize {
    resize: both;
  }

  .resize-none {
    resize: none;
  }

  .resize-y {
    resize: vertical;
  }

  .scroll-py-1 {
    scroll-padding-block: calc(var(--spacing) * 1);
  }

  .list-disc {
    list-style-type: disc;
  }

  .list-none {
    list-style-type: none;
  }

  .\[appearance\:textfield\]\! {
    appearance: textfield !important;
  }

  .appearance-none {
    appearance: none;
  }

  .columns-2 {
    columns: 2;
  }

  .auto-cols-\[minmax\(240px\,280px\)\] {
    grid-auto-columns: minmax(240px, 280px);
  }

  .\[grid-auto-flow\:dense\] {
    grid-auto-flow: dense;
  }

  .grid-flow-col {
    grid-auto-flow: column;
  }

  .grid-flow-dense {
    grid-auto-flow: dense;
  }

  .\[grid-template-columns\:repeat\(auto-fit\,minmax\(240px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

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

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

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

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

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

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

  .grid-cols-\[4\.5rem_minmax\(0\,1fr\)\] {
    grid-template-columns: 4.5rem minmax(0, 1fr);
  }

  .grid-cols-\[5\.5rem\,minmax\(0\,1fr\)\] {
    grid-template-columns: 5.5rem,minmax(0,1fr);
  }

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

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

  .grid-cols-\[repeat\(auto-fit\,minmax\(180px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .grid-cols-\[repeat\(auto-fit\,minmax\(320px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }

  .grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

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

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

  .flex-wrap {
    flex-wrap: wrap;
  }

  .place-items-center {
    place-items: center;
  }

  .content-start {
    align-content: flex-start;
  }

  .items-baseline {
    align-items: baseline;
  }

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

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

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

  .items-stretch {
    align-items: stretch;
  }

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

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

  .justify-center-safe {
    justify-content: safe center;
  }

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

  .justify-start {
    justify-content: flex-start;
  }

  .justify-items-center {
    justify-items: center;
  }

  .\!gap-1\.5 {
    gap: calc(var(--spacing) * 1.5) !important;
  }

  .gap-0 {
    gap: calc(var(--spacing) * 0);
  }

  .gap-0\.5 {
    gap: calc(var(--spacing) * .5);
  }

  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-3\.5 {
    gap: calc(var(--spacing) * 3.5);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .gap-7 {
    gap: calc(var(--spacing) * 7);
  }

  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }

  .gap-12 {
    gap: calc(var(--spacing) * 12);
  }

  .gap-px {
    gap: 1px;
  }

  :where(.space-y-0\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-1\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-8 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-12 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));
  }

  .gap-x-1\.5 {
    column-gap: calc(var(--spacing) * 1.5);
  }

  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }

  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }

  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }

  .gap-x-5 {
    column-gap: calc(var(--spacing) * 5);
  }

  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }

  .gap-y-0\.5 {
    row-gap: calc(var(--spacing) * .5);
  }

  .gap-y-1 {
    row-gap: calc(var(--spacing) * 1);
  }

  .gap-y-1\.5 {
    row-gap: calc(var(--spacing) * 1.5);
  }

  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }

  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }

  :where(.divide-y > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }

  :where(.divide-border > :not(:last-child)) {
    border-color: var(--border);
  }

  :where(.divide-neutral-100 > :not(:last-child)) {
    border-color: var(--color-neutral-100);
  }

  :where(.divide-neutral-200 > :not(:last-child)) {
    border-color: var(--color-neutral-200);
  }

  .self-end {
    align-self: flex-end;
  }

  .self-start {
    align-self: flex-start;
  }

  .self-stretch {
    align-self: stretch;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .overflow-auto {
    overflow: auto;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-visible {
    overflow: visible;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-x-hidden {
    overflow-x: hidden;
  }

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

  .overflow-y-hidden {
    overflow-y: hidden;
  }

  .overscroll-contain {
    overscroll-behavior: contain;
  }

  .scroll-smooth {
    scroll-behavior: smooth;
  }

  .\!rounded-2xl {
    border-radius: var(--radius-2xl) !important;
  }

  .\!rounded-full {
    border-radius: 3.40282e38px !important;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-2xl-plus {
    border-radius: 1.25rem;
  }

  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }

  .rounded-3xl-plus {
    border-radius: 1.75rem;
  }

  .rounded-4xl {
    border-radius: var(--radius-4xl);
  }

  .rounded-\[1\.125rem\] {
    border-radius: 1.125rem;
  }

  .rounded-\[9px\] {
    border-radius: 9px;
  }

  .rounded-\[9px\]\! {
    border-radius: 9px !important;
  }

  .rounded-\[13px\] {
    border-radius: 13px;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .rounded-none {
    border-radius: 0;
  }

  .rounded-sm {
    border-radius: var(--radius-sm);
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .rounded-xl\! {
    border-radius: var(--radius-xl) !important;
  }

  .rounded-t-2xl {
    border-top-left-radius: var(--radius-2xl);
    border-top-right-radius: var(--radius-2xl);
  }

  .rounded-t-xs {
    border-top-left-radius: var(--radius-xs);
    border-top-right-radius: var(--radius-xs);
  }

  .rounded-br-sm {
    border-bottom-right-radius: var(--radius-sm);
  }

  .rounded-bl-sm {
    border-bottom-left-radius: var(--radius-sm);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-\[0\.5px\] {
    border-style: var(--tw-border-style);
    border-width: .5px;
  }

  .border-\[0\.5px\]\! {
    border-style: var(--tw-border-style) !important;
    border-width: .5px !important;
  }

  .border-\[1\.5px\] {
    border-style: var(--tw-border-style);
    border-width: 1.5px;
  }

  .border-x {
    border-inline-style: var(--tw-border-style);
    border-inline-width: 1px;
  }

  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .border-l-2 {
    border-left-style: var(--tw-border-style);
    border-left-width: 2px;
  }

  .border-l-4 {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
  }

  .border-l-\[3px\] {
    border-left-style: var(--tw-border-style);
    border-left-width: 3px;
  }

  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }

  .border-none {
    --tw-border-style: none;
    border-style: none;
  }

  .\!border-background {
    border-color: var(--background) !important;
  }

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

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

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

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

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

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

  .border-\[\#3d5bff\]\/60 {
    border-color: #3d5bff99;
    border-color: lab(45.0815% 34.5089 -86.2396 / .6);
  }

  .border-\[rgba\(15\,14\,12\,0\.1\)\] {
    border-color: #0f0e0c1a;
  }

  .border-\[rgba\(15\,14\,12\,0\.06\)\] {
    border-color: #0f0e0c0f;
  }

  .border-\[rgba\(15\,14\,12\,0\.08\)\] {
    border-color: #0f0e0c14;
  }

  .border-\[rgba\(15\,14\,12\,0\.08\)\]\! {
    border-color: #0f0e0c14 !important;
  }

  .border-\[rgba\(15\,14\,12\,0\.12\)\] {
    border-color: #0f0e0c1f;
  }

  .border-\[rgba\(15\,14\,12\,0\.14\)\] {
    border-color: #0f0e0c24;
  }

  .border-\[rgba\(15\,14\,12\,0\.14\)\]\! {
    border-color: #0f0e0c24 !important;
  }

  .border-\[rgba\(15\,14\,12\,0\.15\)\] {
    border-color: #0f0e0c26;
  }

  .border-\[rgba\(79\,70\,229\,0\.4\)\] {
    border-color: #4f46e566;
  }

  .border-\[rgba\(79\,70\,229\,0\.15\)\] {
    border-color: #4f46e526;
  }

  .border-\[rgba\(79\,70\,229\,0\.25\)\] {
    border-color: #4f46e540;
  }

  .border-\[rgba\(185\,28\,28\,0\.28\)\] {
    border-color: #b91c1c47;
  }

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

  .border-amber-200 {
    border-color: var(--color-amber-200);
  }

  .border-amber-300 {
    border-color: var(--color-amber-300);
  }

  .border-amber-400 {
    border-color: var(--color-amber-400);
  }

  .border-amber-400\/40\! {
    border-color: #fcbb0066 !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-400\/40\! {
      border-color: color-mix(in oklab, var(--color-amber-400) 40%, transparent) !important;
    }
  }

  .border-amber-500\/30 {
    border-color: #f99c004d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-500\/30 {
      border-color: color-mix(in oklab, var(--color-amber-500) 30%, transparent);
    }
  }

  .border-amber-500\/40 {
    border-color: #f99c0066;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-500\/40 {
      border-color: color-mix(in oklab, var(--color-amber-500) 40%, transparent);
    }
  }

  .border-amber-500\/60 {
    border-color: #f99c0099;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-500\/60 {
      border-color: color-mix(in oklab, var(--color-amber-500) 60%, transparent);
    }
  }

  .border-amber-500\/70 {
    border-color: #f99c00b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-amber-500\/70 {
      border-color: color-mix(in oklab, var(--color-amber-500) 70%, transparent);
    }
  }

  .border-black\/10 {
    border-color: #0000001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-black\/10 {
      border-color: color-mix(in oklab, var(--color-black) 10%, transparent);
    }
  }

  .border-blue-200 {
    border-color: var(--color-blue-200);
  }

  .border-blue-300 {
    border-color: var(--color-blue-300);
  }

  .border-blue-500\! {
    border-color: var(--color-blue-500) !important;
  }

  .border-border, .border-border\/30 {
    border-color: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-border\/30 {
      border-color: color-mix(in oklab, var(--border) 30%, transparent);
    }
  }

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

  @supports (color: color-mix(in lab, red, red)) {
    .border-border\/40 {
      border-color: color-mix(in oklab, var(--border) 40%, transparent);
    }
  }

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

  @supports (color: color-mix(in lab, red, red)) {
    .border-border\/50 {
      border-color: color-mix(in oklab, var(--border) 50%, transparent);
    }
  }

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

  @supports (color: color-mix(in lab, red, red)) {
    .border-border\/60 {
      border-color: color-mix(in oklab, var(--border) 60%, transparent);
    }
  }

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

  @supports (color: color-mix(in lab, red, red)) {
    .border-border\/70 {
      border-color: color-mix(in oklab, var(--border) 70%, transparent);
    }
  }

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

  @supports (color: color-mix(in lab, red, red)) {
    .border-border\/80 {
      border-color: color-mix(in oklab, var(--border) 80%, transparent);
    }
  }

  .border-chart-1\/40 {
    border-color: var(--chart-1);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-chart-1\/40 {
      border-color: color-mix(in oklab, var(--chart-1) 40%, transparent);
    }
  }

  .border-chart-2\/40 {
    border-color: var(--chart-2);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-chart-2\/40 {
      border-color: color-mix(in oklab, var(--chart-2) 40%, transparent);
    }
  }

  .border-chart-4\/40 {
    border-color: var(--chart-4);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-chart-4\/40 {
      border-color: color-mix(in oklab, var(--chart-4) 40%, transparent);
    }
  }

  .border-chart-4\/60 {
    border-color: var(--chart-4);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-chart-4\/60 {
      border-color: color-mix(in oklab, var(--chart-4) 60%, transparent);
    }
  }

  .border-course-accent, .border-course-accent\/50 {
    border-color: var(--course-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-course-accent\/50 {
      border-color: color-mix(in oklab, var(--course-accent) 50%, transparent);
    }
  }

  .border-course-border, .border-course-border\/40 {
    border-color: var(--course-border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-course-border\/40 {
      border-color: color-mix(in oklab, var(--course-border) 40%, transparent);
    }
  }

  .border-dashboard-rs-border {
    border-color: var(--dashboard-right-sidebar-border);
  }

  .border-destructive, .border-destructive\/20 {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-destructive\/20 {
      border-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }

  .border-destructive\/25 {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-destructive\/25 {
      border-color: color-mix(in oklab, var(--destructive) 25%, transparent);
    }
  }

  .border-destructive\/30 {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-destructive\/30 {
      border-color: color-mix(in oklab, var(--destructive) 30%, transparent);
    }
  }

  .border-destructive\/40 {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-destructive\/40 {
      border-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    }
  }

  .border-destructive\/40\! {
    border-color: var(--destructive) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-destructive\/40\! {
      border-color: color-mix(in oklab, var(--destructive) 40%, transparent) !important;
    }
  }

  .border-destructive\/60 {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-destructive\/60 {
      border-color: color-mix(in oklab, var(--destructive) 60%, transparent);
    }
  }

  .border-emerald-200 {
    border-color: var(--color-emerald-200);
  }

  .border-emerald-500\/40 {
    border-color: #00bb7f66;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-emerald-500\/40 {
      border-color: color-mix(in oklab, var(--color-emerald-500) 40%, transparent);
    }
  }

  .border-emerald-600 {
    border-color: var(--color-emerald-600);
  }

  .border-emerald-600\/60 {
    border-color: #00976799;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-emerald-600\/60 {
      border-color: color-mix(in oklab, var(--color-emerald-600) 60%, transparent);
    }
  }

  .border-foreground {
    border-color: var(--foreground);
  }

  .border-green-200 {
    border-color: var(--color-green-200);
  }

  .border-green-300 {
    border-color: var(--color-green-300);
  }

  .border-green-500 {
    border-color: var(--color-green-500);
  }

  .border-green-500\/30 {
    border-color: #00c7584d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-green-500\/30 {
      border-color: color-mix(in oklab, var(--color-green-500) 30%, transparent);
    }
  }

  .border-green-500\/40\! {
    border-color: #00c75866 !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-green-500\/40\! {
      border-color: color-mix(in oklab, var(--color-green-500) 40%, transparent) !important;
    }
  }

  .border-indicator-green\/40 {
    border-color: var(--indicator-green);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-indicator-green\/40 {
      border-color: color-mix(in oklab, var(--indicator-green) 40%, transparent);
    }
  }

  .border-indigo-300 {
    border-color: var(--color-indigo-300);
  }

  .border-info\/30 {
    border-color: var(--info);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-info\/30 {
      border-color: color-mix(in oklab, var(--info) 30%, transparent);
    }
  }

  .border-input {
    border-color: var(--input);
  }

  .border-muted-foreground\/30 {
    border-color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-muted-foreground\/30 {
      border-color: color-mix(in oklab, var(--muted-foreground) 30%, transparent);
    }
  }

  .border-neutral-200 {
    border-color: var(--color-neutral-200);
  }

  .border-neutral-300 {
    border-color: var(--color-neutral-300);
  }

  .border-orange-300\/40 {
    border-color: #ffb96d66;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-orange-300\/40 {
      border-color: color-mix(in oklab, var(--color-orange-300) 40%, transparent);
    }
  }

  .border-primary, .border-primary\/20 {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/20 {
      border-color: color-mix(in oklab, var(--primary) 20%, transparent);
    }
  }

  .border-primary\/25 {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/25 {
      border-color: color-mix(in oklab, var(--primary) 25%, transparent);
    }
  }

  .border-primary\/30 {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/30 {
      border-color: color-mix(in oklab, var(--primary) 30%, transparent);
    }
  }

  .border-primary\/30\! {
    border-color: var(--primary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/30\! {
      border-color: color-mix(in oklab, var(--primary) 30%, transparent) !important;
    }
  }

  .border-primary\/40 {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/40 {
      border-color: color-mix(in oklab, var(--primary) 40%, transparent);
    }
  }

  .border-primary\/40\! {
    border-color: var(--primary) !important;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/40\! {
      border-color: color-mix(in oklab, var(--primary) 40%, transparent) !important;
    }
  }

  .border-primary\/50 {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/50 {
      border-color: color-mix(in oklab, var(--primary) 50%, transparent);
    }
  }

  .border-primary\/60 {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/60 {
      border-color: color-mix(in oklab, var(--primary) 60%, transparent);
    }
  }

  .border-primary\/70 {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/70 {
      border-color: color-mix(in oklab, var(--primary) 70%, transparent);
    }
  }

  .border-red-200 {
    border-color: var(--color-red-200);
  }

  .border-red-300 {
    border-color: var(--color-red-300);
  }

  .border-red-400 {
    border-color: var(--color-red-400);
  }

  .border-sky-200 {
    border-color: var(--color-sky-200);
  }

  .border-sky-300 {
    border-color: var(--color-sky-300);
  }

  .border-sky-400\/60 {
    border-color: #00bcfe99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-sky-400\/60 {
      border-color: color-mix(in oklab, var(--color-sky-400) 60%, transparent);
    }
  }

  .border-sky-400\/70 {
    border-color: #00bcfeb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-sky-400\/70 {
      border-color: color-mix(in oklab, var(--color-sky-400) 70%, transparent);
    }
  }

  .border-sky-500\/25 {
    border-color: #00a5ef40;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-sky-500\/25 {
      border-color: color-mix(in oklab, var(--color-sky-500) 25%, transparent);
    }
  }

  .border-sky-500\/60 {
    border-color: #00a5ef99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-sky-500\/60 {
      border-color: color-mix(in oklab, var(--color-sky-500) 60%, transparent);
    }
  }

  .border-slate-200 {
    border-color: var(--color-slate-200);
  }

  .border-slate-300 {
    border-color: var(--color-slate-300);
  }

  .border-success\/30 {
    border-color: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-success\/30 {
      border-color: color-mix(in oklab, var(--success) 30%, transparent);
    }
  }

  .border-transparent {
    border-color: #0000;
  }

  .border-violet-200 {
    border-color: var(--color-violet-200);
  }

  .border-violet-400\/60 {
    border-color: #a685ff99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-violet-400\/60 {
      border-color: color-mix(in oklab, var(--color-violet-400) 60%, transparent);
    }
  }

  .border-violet-400\/70 {
    border-color: #a685ffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-violet-400\/70 {
      border-color: color-mix(in oklab, var(--color-violet-400) 70%, transparent);
    }
  }

  .border-violet-500\/60 {
    border-color: #8d54ff99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-violet-500\/60 {
      border-color: color-mix(in oklab, var(--color-violet-500) 60%, transparent);
    }
  }

  .border-warning, .border-warning\/30 {
    border-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-warning\/30 {
      border-color: color-mix(in oklab, var(--warning) 30%, transparent);
    }
  }

  .border-warning\/40 {
    border-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-warning\/40 {
      border-color: color-mix(in oklab, var(--warning) 40%, transparent);
    }
  }

  .border-white\/10 {
    border-color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/10 {
      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .border-white\/15 {
    border-color: #ffffff26;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/15 {
      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }

  .border-white\/60 {
    border-color: #fff9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/60 {
      border-color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }

  .border-l-primary {
    border-left-color: var(--primary);
  }

  .\!bg-foreground {
    background-color: var(--foreground) !important;
  }

  .\!bg-muted-foreground {
    background-color: var(--muted-foreground) !important;
  }

  .\!bg-primary {
    background-color: var(--primary) !important;
  }

  .\!bg-sky-500 {
    background-color: var(--color-sky-500) !important;
  }

  .\!bg-slate-400 {
    background-color: var(--color-slate-400) !important;
  }

  .\!bg-success {
    background-color: var(--success) !important;
  }

  .bg-\(--brand-indigo\)\/70 {
    background-color: var(--brand-indigo);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\(--brand-indigo\)\/70 {
      background-color: color-mix(in oklab, var(--brand-indigo) 70%, transparent);
    }
  }

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

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

  .bg-\(--gc-chip-bg\) {
    background-color: var(--gc-chip-bg);
  }

  .bg-\(--line-strong\) {
    background-color: var(--line-strong);
  }

  .bg-\(--surface-2\) {
    background-color: var(--surface-2);
  }

  .bg-\[\#0f0e0c\] {
    background-color: #0f0e0c;
  }

  .bg-\[\#e7e5e4\] {
    background-color: #e7e5e4;
  }

  .bg-\[\#f5f4ef\] {
    background-color: #f5f4ef;
  }

  .bg-\[rgba\(15\,14\,12\,0\.02\)\] {
    background-color: #0f0e0c05;
  }

  .bg-\[rgba\(15\,14\,12\,0\.03\)\] {
    background-color: #0f0e0c08;
  }

  .bg-\[rgba\(15\,14\,12\,0\.04\)\] {
    background-color: #0f0e0c0a;
  }

  .bg-\[rgba\(15\,14\,12\,0\.05\)\] {
    background-color: #0f0e0c0d;
  }

  .bg-\[rgba\(15\,14\,12\,0\.06\)\] {
    background-color: #0f0e0c0f;
  }

  .bg-\[rgba\(15\,14\,12\,0\.14\)\] {
    background-color: #0f0e0c24;
  }

  .bg-\[rgba\(16\,185\,129\,0\.12\)\] {
    background-color: #10b9811f;
  }

  .bg-\[rgba\(61\,91\,255\,0\.1\)\] {
    background-color: #3d5bff1a;
  }

  .bg-\[rgba\(61\,91\,255\,0\.04\)\] {
    background-color: #3d5bff0a;
  }

  .bg-\[rgba\(79\,70\,229\,0\.1\)\] {
    background-color: #4f46e51a;
  }

  .bg-\[rgba\(79\,70\,229\,0\.04\)\] {
    background-color: #4f46e50a;
  }

  .bg-\[rgba\(79\,70\,229\,0\.06\)\] {
    background-color: #4f46e50f;
  }

  .bg-\[rgba\(79\,70\,229\,0\.08\)\] {
    background-color: #4f46e514;
  }

  .bg-\[rgba\(79\,70\,229\,0\.16\)\] {
    background-color: #4f46e529;
  }

  .bg-\[rgba\(239\,68\,68\,0\.12\)\] {
    background-color: #ef44441f;
  }

  .bg-\[rgba\(254\,226\,226\,0\.92\)\] {
    background-color: #fee2e2eb;
  }

  .bg-\[rgba\(255\,255\,255\,0\.85\)\] {
    background-color: #ffffffd9;
  }

  .bg-\[rgba\(255\,255\,255\,0\.85\)\]\! {
    background-color: #ffffffd9 !important;
  }

  .bg-\[rgba\(255\,255\,255\,0\.98\)\] {
    background-color: #fffffffa;
  }

  .bg-\[rgba\(255\,255\,255\,0\.98\)\]\! {
    background-color: #fffffffa !important;
  }

  .bg-accent, .bg-accent\/10 {
    background-color: var(--accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-accent\/10 {
      background-color: color-mix(in oklab, var(--accent) 10%, transparent);
    }
  }

  .bg-accent\/60 {
    background-color: var(--accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-accent\/60 {
      background-color: color-mix(in oklab, var(--accent) 60%, transparent);
    }
  }

  .bg-amber-50 {
    background-color: var(--color-amber-50);
  }

  .bg-amber-50\/60 {
    background-color: #fffbeb99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-50\/60 {
      background-color: color-mix(in oklab, var(--color-amber-50) 60%, transparent);
    }
  }

  .bg-amber-50\/70 {
    background-color: #fffbebb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-50\/70 {
      background-color: color-mix(in oklab, var(--color-amber-50) 70%, transparent);
    }
  }

  .bg-amber-100 {
    background-color: var(--color-amber-100);
  }

  .bg-amber-200\/70 {
    background-color: #fee685b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-200\/70 {
      background-color: color-mix(in oklab, var(--color-amber-200) 70%, transparent);
    }
  }

  .bg-amber-400\/60 {
    background-color: #fcbb0099;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-400\/60 {
      background-color: color-mix(in oklab, var(--color-amber-400) 60%, transparent);
    }
  }

  .bg-amber-500 {
    background-color: var(--color-amber-500);
  }

  .bg-amber-500\/10 {
    background-color: #f99c001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-500\/10 {
      background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
    }
  }

  .bg-amber-500\/15 {
    background-color: #f99c0026;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-amber-500\/15 {
      background-color: color-mix(in oklab, var(--color-amber-500) 15%, transparent);
    }
  }

  .bg-amber-700 {
    background-color: var(--color-amber-700);
  }

  .bg-background, .bg-background\/30 {
    background-color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/30 {
      background-color: color-mix(in oklab, var(--background) 30%, transparent);
    }
  }

  .bg-background\/60 {
    background-color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/60 {
      background-color: color-mix(in oklab, var(--background) 60%, transparent);
    }
  }

  .bg-background\/70 {
    background-color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/70 {
      background-color: color-mix(in oklab, var(--background) 70%, transparent);
    }
  }

  .bg-background\/80 {
    background-color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/80 {
      background-color: color-mix(in oklab, var(--background) 80%, transparent);
    }
  }

  .bg-background\/90 {
    background-color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/90 {
      background-color: color-mix(in oklab, var(--background) 90%, transparent);
    }
  }

  .bg-background\/95 {
    background-color: var(--background);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-background\/95 {
      background-color: color-mix(in oklab, var(--background) 95%, transparent);
    }
  }

  .bg-black {
    background-color: var(--color-black);
  }

  .bg-black\/75 {
    background-color: #000000bf;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/75 {
      background-color: color-mix(in oklab, var(--color-black) 75%, transparent);
    }
  }

  .bg-blue-50 {
    background-color: var(--color-blue-50);
  }

  .bg-blue-50\/60 {
    background-color: #eff6ff99;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-50\/60 {
      background-color: color-mix(in oklab, var(--color-blue-50) 60%, transparent);
    }
  }

  .bg-blue-100 {
    background-color: var(--color-blue-100);
  }

  .bg-blue-300 {
    background-color: var(--color-blue-300);
  }

  .bg-blue-500 {
    background-color: var(--color-blue-500);
  }

  .bg-border, .bg-border\/40 {
    background-color: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-border\/40 {
      background-color: color-mix(in oklab, var(--border) 40%, transparent);
    }
  }

  .bg-border\/60 {
    background-color: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-border\/60 {
      background-color: color-mix(in oklab, var(--border) 60%, transparent);
    }
  }

  .bg-card, .bg-card\/35 {
    background-color: var(--card);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-card\/35 {
      background-color: color-mix(in oklab, var(--card) 35%, transparent);
    }
  }

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

  @supports (color: color-mix(in lab, red, red)) {
    .bg-card\/40 {
      background-color: color-mix(in oklab, var(--card) 40%, transparent);
    }
  }

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

  @supports (color: color-mix(in lab, red, red)) {
    .bg-card\/50 {
      background-color: color-mix(in oklab, var(--card) 50%, transparent);
    }
  }

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

  @supports (color: color-mix(in lab, red, red)) {
    .bg-card\/60 {
      background-color: color-mix(in oklab, var(--card) 60%, transparent);
    }
  }

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

  @supports (color: color-mix(in lab, red, red)) {
    .bg-card\/70 {
      background-color: color-mix(in oklab, var(--card) 70%, transparent);
    }
  }

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

  @supports (color: color-mix(in lab, red, red)) {
    .bg-card\/80 {
      background-color: color-mix(in oklab, var(--card) 80%, transparent);
    }
  }

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

  @supports (color: color-mix(in lab, red, red)) {
    .bg-card\/90 {
      background-color: color-mix(in oklab, var(--card) 90%, transparent);
    }
  }

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

  @supports (color: color-mix(in lab, red, red)) {
    .bg-card\/95 {
      background-color: color-mix(in oklab, var(--card) 95%, transparent);
    }
  }

  .bg-chart-1, .bg-chart-1\/15 {
    background-color: var(--chart-1);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-chart-1\/15 {
      background-color: color-mix(in oklab, var(--chart-1) 15%, transparent);
    }
  }

  .bg-chart-2, .bg-chart-2\/15 {
    background-color: var(--chart-2);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-chart-2\/15 {
      background-color: color-mix(in oklab, var(--chart-2) 15%, transparent);
    }
  }

  .bg-chart-3\/20 {
    background-color: var(--chart-3);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-chart-3\/20 {
      background-color: color-mix(in oklab, var(--chart-3) 20%, transparent);
    }
  }

  .bg-chart-4, .bg-chart-4\/15 {
    background-color: var(--chart-4);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-chart-4\/15 {
      background-color: color-mix(in oklab, var(--chart-4) 15%, transparent);
    }
  }

  .bg-course-accent\/5 {
    background-color: var(--course-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-course-accent\/5 {
      background-color: color-mix(in oklab, var(--course-accent) 5%, transparent);
    }
  }

  .bg-course-accent\/8 {
    background-color: var(--course-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-course-accent\/8 {
      background-color: color-mix(in oklab, var(--course-accent) 8%, transparent);
    }
  }

  .bg-course-accent\/10 {
    background-color: var(--course-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-course-accent\/10 {
      background-color: color-mix(in oklab, var(--course-accent) 10%, transparent);
    }
  }

  .bg-course-accent\/15 {
    background-color: var(--course-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-course-accent\/15 {
      background-color: color-mix(in oklab, var(--course-accent) 15%, transparent);
    }
  }

  .bg-course-canvas {
    background-color: var(--course-canvas);
  }

  .bg-destructive, .bg-destructive\/5 {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-destructive\/5 {
      background-color: color-mix(in oklab, var(--destructive) 5%, transparent);
    }
  }

  .bg-destructive\/10 {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-destructive\/10 {
      background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
    }
  }

  .bg-destructive\/15 {
    background-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-destructive\/15 {
      background-color: color-mix(in oklab, var(--destructive) 15%, transparent);
    }
  }

  .bg-emerald-50 {
    background-color: var(--color-emerald-50);
  }

  .bg-emerald-50\/60 {
    background-color: #ecfdf599;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-emerald-50\/60 {
      background-color: color-mix(in oklab, var(--color-emerald-50) 60%, transparent);
    }
  }

  .bg-emerald-100 {
    background-color: var(--color-emerald-100);
  }

  .bg-emerald-500 {
    background-color: var(--color-emerald-500);
  }

  .bg-emerald-500\/10 {
    background-color: #00bb7f1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-emerald-500\/10 {
      background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
    }
  }

  .bg-emerald-600 {
    background-color: var(--color-emerald-600);
  }

  .bg-foreground, .bg-foreground\/5 {
    background-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-foreground\/5 {
      background-color: color-mix(in oklab, var(--foreground) 5%, transparent);
    }
  }

  .bg-green-50 {
    background-color: var(--color-green-50);
  }

  .bg-green-500 {
    background-color: var(--color-green-500);
  }

  .bg-green-500\/5 {
    background-color: #00c7580d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-green-500\/5 {
      background-color: color-mix(in oklab, var(--color-green-500) 5%, transparent);
    }
  }

  .bg-green-500\/15 {
    background-color: #00c75826;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-green-500\/15 {
      background-color: color-mix(in oklab, var(--color-green-500) 15%, transparent);
    }
  }

  .bg-guided-blue-alt {
    background-color: var(--guided-blue-alt);
  }

  .bg-guided-text\/3 {
    background-color: var(--guided-text);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-guided-text\/3 {
      background-color: color-mix(in oklab, var(--guided-text) 3%, transparent);
    }
  }

  .bg-guided-text\/4 {
    background-color: var(--guided-text);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-guided-text\/4 {
      background-color: color-mix(in oklab, var(--guided-text) 4%, transparent);
    }
  }

  .bg-indicator-green\/5 {
    background-color: var(--indicator-green);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-indicator-green\/5 {
      background-color: color-mix(in oklab, var(--indicator-green) 5%, transparent);
    }
  }

  .bg-indigo-50 {
    background-color: var(--color-indigo-50);
  }

  .bg-indigo-500 {
    background-color: var(--color-indigo-500);
  }

  .bg-indigo-600 {
    background-color: var(--color-indigo-600);
  }

  .bg-info\/10 {
    background-color: var(--info);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-info\/10 {
      background-color: color-mix(in oklab, var(--info) 10%, transparent);
    }
  }

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

  .bg-muted-foreground\/20 {
    background-color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted-foreground\/20 {
      background-color: color-mix(in oklab, var(--muted-foreground) 20%, transparent);
    }
  }

  .bg-muted-foreground\/30 {
    background-color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted-foreground\/30 {
      background-color: color-mix(in oklab, var(--muted-foreground) 30%, transparent);
    }
  }

  .bg-muted-foreground\/40 {
    background-color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted-foreground\/40 {
      background-color: color-mix(in oklab, var(--muted-foreground) 40%, transparent);
    }
  }

  .bg-muted-foreground\/50 {
    background-color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted-foreground\/50 {
      background-color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
    }
  }

  .bg-muted-foreground\/60 {
    background-color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted-foreground\/60 {
      background-color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
    }
  }

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

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/10 {
      background-color: color-mix(in oklab, var(--muted) 10%, transparent);
    }
  }

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

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/15 {
      background-color: color-mix(in oklab, var(--muted) 15%, transparent);
    }
  }

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

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/20 {
      background-color: color-mix(in oklab, var(--muted) 20%, transparent);
    }
  }

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

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/30 {
      background-color: color-mix(in oklab, var(--muted) 30%, transparent);
    }
  }

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

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/35 {
      background-color: color-mix(in oklab, var(--muted) 35%, transparent);
    }
  }

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

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/40 {
      background-color: color-mix(in oklab, var(--muted) 40%, transparent);
    }
  }

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

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/50 {
      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
    }
  }

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

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/60 {
      background-color: color-mix(in oklab, var(--muted) 60%, transparent);
    }
  }

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

  @supports (color: color-mix(in lab, red, red)) {
    .bg-muted\/70 {
      background-color: color-mix(in oklab, var(--muted) 70%, transparent);
    }
  }

  .bg-neutral-50 {
    background-color: var(--color-neutral-50);
  }

  .bg-neutral-100 {
    background-color: var(--color-neutral-100);
  }

  .bg-neutral-200 {
    background-color: var(--color-neutral-200);
  }

  .bg-neutral-900 {
    background-color: var(--color-neutral-900);
  }

  .bg-orange-300\/10 {
    background-color: #ffb96d1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-orange-300\/10 {
      background-color: color-mix(in oklab, var(--color-orange-300) 10%, transparent);
    }
  }

  .bg-orange-500 {
    background-color: var(--color-orange-500);
  }

  .bg-popover, .bg-popover\/95 {
    background-color: var(--popover);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-popover\/95 {
      background-color: color-mix(in oklab, var(--popover) 95%, transparent);
    }
  }

  .bg-primary, .bg-primary\/5 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/5 {
      background-color: color-mix(in oklab, var(--primary) 5%, transparent);
    }
  }

  .bg-primary\/8 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/8 {
      background-color: color-mix(in oklab, var(--primary) 8%, transparent);
    }
  }

  .bg-primary\/10 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/10 {
      background-color: color-mix(in oklab, var(--primary) 10%, transparent);
    }
  }

  .bg-primary\/12 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/12 {
      background-color: color-mix(in oklab, var(--primary) 12%, transparent);
    }
  }

  .bg-primary\/15 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/15 {
      background-color: color-mix(in oklab, var(--primary) 15%, transparent);
    }
  }

  .bg-primary\/20 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/20 {
      background-color: color-mix(in oklab, var(--primary) 20%, transparent);
    }
  }

  .bg-primary\/60 {
    background-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/60 {
      background-color: color-mix(in oklab, var(--primary) 60%, transparent);
    }
  }

  .bg-red-50 {
    background-color: var(--color-red-50);
  }

  .bg-red-100 {
    background-color: var(--color-red-100);
  }

  .bg-red-500 {
    background-color: var(--color-red-500);
  }

  .bg-secondary {
    background-color: var(--secondary);
  }

  .bg-sidebar\/60 {
    background-color: var(--sidebar);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-sidebar\/60 {
      background-color: color-mix(in oklab, var(--sidebar) 60%, transparent);
    }
  }

  .bg-sky-50 {
    background-color: var(--color-sky-50);
  }

  .bg-sky-500\/5 {
    background-color: #00a5ef0d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-sky-500\/5 {
      background-color: color-mix(in oklab, var(--color-sky-500) 5%, transparent);
    }
  }

  .bg-sky-500\/10 {
    background-color: #00a5ef1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-sky-500\/10 {
      background-color: color-mix(in oklab, var(--color-sky-500) 10%, transparent);
    }
  }

  .bg-slate-50 {
    background-color: var(--color-slate-50);
  }

  .bg-slate-100 {
    background-color: var(--color-slate-100);
  }

  .bg-slate-900 {
    background-color: var(--color-slate-900);
  }

  .bg-slate-950 {
    background-color: var(--color-slate-950);
  }

  .bg-success\/10 {
    background-color: var(--success);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-success\/10 {
      background-color: color-mix(in oklab, var(--success) 10%, transparent);
    }
  }

  .bg-transparent {
    background-color: #0000;
  }

  .bg-violet-50 {
    background-color: var(--color-violet-50);
  }

  .bg-violet-500\/5 {
    background-color: #8d54ff0d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-violet-500\/5 {
      background-color: color-mix(in oklab, var(--color-violet-500) 5%, transparent);
    }
  }

  .bg-violet-500\/10 {
    background-color: #8d54ff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-violet-500\/10 {
      background-color: color-mix(in oklab, var(--color-violet-500) 10%, transparent);
    }
  }

  .bg-warning\/5 {
    background-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-warning\/5 {
      background-color: color-mix(in oklab, var(--warning) 5%, transparent);
    }
  }

  .bg-warning\/10 {
    background-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-warning\/10 {
      background-color: color-mix(in oklab, var(--warning) 10%, transparent);
    }
  }

  .bg-warning\/15 {
    background-color: var(--warning);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-warning\/15 {
      background-color: color-mix(in oklab, var(--warning) 15%, transparent);
    }
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .bg-white\/5 {
    background-color: #ffffff0d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/5 {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }

  .bg-white\/10 {
    background-color: #ffffff1a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/10 {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }

  .bg-white\/60 {
    background-color: #fff9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/60 {
      background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }

  .bg-white\/70 {
    background-color: #ffffffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/70 {
      background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }

  .bg-white\/85 {
    background-color: #ffffffd9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/85 {
      background-color: color-mix(in oklab, var(--color-white) 85%, transparent);
    }
  }

  .bg-white\/98 {
    background-color: #fffffffa;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/98 {
      background-color: color-mix(in oklab, var(--color-white) 98%, transparent);
    }
  }

  .bg-clip-padding {
    background-clip: padding-box;
  }

  .fill-guided-icon-fg {
    fill: var(--guided-icon-fg);
  }

  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

  .p-0 {
    padding: calc(var(--spacing) * 0);
  }

  .p-0\! {
    padding: calc(var(--spacing) * 0) !important;
  }

  .p-0\.5 {
    padding: calc(var(--spacing) * .5);
  }

  .p-1 {
    padding: calc(var(--spacing) * 1);
  }

  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-3\.5 {
    padding: calc(var(--spacing) * 3.5);
  }

  .p-3\.5\! {
    padding: calc(var(--spacing) * 3.5) !important;
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-7 {
    padding: calc(var(--spacing) * 7);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }

  .px-0\.5 {
    padding-inline: calc(var(--spacing) * .5);
  }

  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }

  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

  .px-5\.5 {
    padding-inline: calc(var(--spacing) * 5.5);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .px-7 {
    padding-inline: calc(var(--spacing) * 7);
  }

  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }

  .px-12 {
    padding-inline: calc(var(--spacing) * 12);
  }

  .px-\[7px\] {
    padding-inline: 7px;
  }

  .py-0 {
    padding-block: calc(var(--spacing) * 0);
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\! {
    padding-block: calc(var(--spacing) * 2) !important;
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-4\.5 {
    padding-block: calc(var(--spacing) * 4.5);
  }

  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-7 {
    padding-block: calc(var(--spacing) * 7);
  }

  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }

  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }

  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }

  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }

  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }

  .py-px {
    padding-block: 1px;
  }

  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-2\.5 {
    padding-top: calc(var(--spacing) * 2.5);
  }

  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-3\.5 {
    padding-top: calc(var(--spacing) * 3.5);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-4\.5 {
    padding-top: calc(var(--spacing) * 4.5);
  }

  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-7 {
    padding-top: calc(var(--spacing) * 7);
  }

  .pt-20 {
    padding-top: calc(var(--spacing) * 20);
  }

  .pt-24 {
    padding-top: calc(var(--spacing) * 24);
  }

  .pt-30 {
    padding-top: calc(var(--spacing) * 30);
  }

  .pr-1 {
    padding-right: calc(var(--spacing) * 1);
  }

  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }

  .pr-2\.5 {
    padding-right: calc(var(--spacing) * 2.5);
  }

  .pr-6 {
    padding-right: calc(var(--spacing) * 6);
  }

  .pr-7\! {
    padding-right: calc(var(--spacing) * 7) !important;
  }

  .pr-8 {
    padding-right: calc(var(--spacing) * 8);
  }

  .pr-9 {
    padding-right: calc(var(--spacing) * 9);
  }

  .pr-16 {
    padding-right: calc(var(--spacing) * 16);
  }

  .pb-0 {
    padding-bottom: calc(var(--spacing) * 0);
  }

  .pb-0\.5 {
    padding-bottom: calc(var(--spacing) * .5);
  }

  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-1\.5 {
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-2\.5 {
    padding-bottom: calc(var(--spacing) * 2.5);
  }

  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .pb-3\.5 {
    padding-bottom: calc(var(--spacing) * 3.5);
  }

  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-4\.5 {
    padding-bottom: calc(var(--spacing) * 4.5);
  }

  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }

  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pb-7 {
    padding-bottom: calc(var(--spacing) * 7);
  }

  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }

  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }

  .pb-12 {
    padding-bottom: calc(var(--spacing) * 12);
  }

  .pb-32 {
    padding-bottom: calc(var(--spacing) * 32);
  }

  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }

  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }

  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }

  .pl-9 {
    padding-left: calc(var(--spacing) * 9);
  }

  .pl-9\! {
    padding-left: calc(var(--spacing) * 9) !important;
  }

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

  .text-left {
    text-align: left;
  }

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

  .align-middle {
    vertical-align: middle;
  }

  .align-top {
    vertical-align: top;
  }

  .font-\(family-name\:--font-bricolage\), .font-\[family-name\:var\(--font-bricolage\)\] {
    font-family: var(--font-bricolage);
  }

  .font-heading {
    font-family: var(--font-heading-base);
  }

  .font-logo {
    font-family: var(--font-logo-base);
  }

  .font-mono {
    font-family: var(--font-geist-mono);
  }

  .font-sans {
    font-family: var(--font-body-base), "Hanken Grotesk", sans-serif;
  }

  .font-sans\! {
    font-family: var(--font-body-base), "Hanken Grotesk", sans-serif !important;
  }

  .\!text-xl {
    font-size: var(--text-xl) !important;
    line-height: var(--tw-leading, var(--text-xl--line-height)) !important;
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }

  .text-5xl\! {
    font-size: var(--text-5xl) !important;
    line-height: var(--tw-leading, var(--text-5xl--line-height)) !important;
  }

  .text-6xl {
    font-size: var(--text-6xl);
    line-height: var(--tw-leading, var(--text-6xl--line-height));
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .\!text-\[13px\] {
    font-size: 13px !important;
  }

  .text-2xs {
    font-size: 11px;
  }

  .text-3xs {
    font-size: 10px;
  }

  .text-\[0\.7rem\] {
    font-size: .7rem;
  }

  .text-\[0\.65rem\] {
    font-size: .65rem;
  }

  .text-\[0\.6875rem\] {
    font-size: .6875rem;
  }

  .text-\[0\.8125rem\] {
    font-size: .8125rem;
  }

  .text-\[8px\] {
    font-size: 8px;
  }

  .text-\[9px\] {
    font-size: 9px;
  }

  .text-\[10px\] {
    font-size: 10px;
  }

  .text-\[11\.5px\] {
    font-size: 11.5px;
  }

  .text-\[11px\] {
    font-size: 11px;
  }

  .text-\[12\.5px\] {
    font-size: 12.5px;
  }

  .text-\[13\.5px\] {
    font-size: 13.5px;
  }

  .text-\[13\.5px\]\! {
    font-size: 13.5px !important;
  }

  .text-\[13px\] {
    font-size: 13px;
  }

  .text-\[13px\]\! {
    font-size: 13px !important;
  }

  .text-\[15px\] {
    font-size: 15px;
  }

  .text-\[17px\] {
    font-size: 17px;
  }

  .text-\[19px\] {
    font-size: 19px;
  }

  .text-\[23px\] {
    font-size: 23px;
  }

  .text-\[clamp\(1\.8rem\,3\.5vw\,2\.6rem\)\] {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  }

  .leading-4 {
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }

  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }

  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }

  .leading-7 {
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }

  .leading-\[1\.1\] {
    --tw-leading: 1.1;
    line-height: 1.1;
  }

  .leading-\[1\.4\] {
    --tw-leading: 1.4;
    line-height: 1.4;
  }

  .leading-\[1\.6\] {
    --tw-leading: 1.6;
    line-height: 1.6;
  }

  .leading-\[1\.55\] {
    --tw-leading: 1.55;
    line-height: 1.55;
  }

  .leading-\[normal\] {
    --tw-leading: normal;
    line-height: normal;
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .leading-normal {
    --tw-leading: var(--leading-normal);
    line-height: var(--leading-normal);
  }

  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }

  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }

  .font-extrabold\! {
    --tw-font-weight: var(--font-weight-extrabold) !important;
    font-weight: var(--font-weight-extrabold) !important;
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-medium\! {
    --tw-font-weight: var(--font-weight-medium) !important;
    font-weight: var(--font-weight-medium) !important;
  }

  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-08 {
    --tw-tracking: .08em;
    letter-spacing: .08em;
  }

  .tracking-14 {
    --tw-tracking: .14em;
    letter-spacing: .14em;
  }

  .tracking-16 {
    --tw-tracking: .16em;
    letter-spacing: .16em;
  }

  .tracking-20 {
    --tw-tracking: .2em;
    letter-spacing: .2em;
  }

  .tracking-24 {
    --tw-tracking: .24em;
    letter-spacing: .24em;
  }

  .tracking-\[-0\.07em\] {
    --tw-tracking: -.07em;
    letter-spacing: -.07em;
  }

  .tracking-\[0\.1em\] {
    --tw-tracking: .1em;
    letter-spacing: .1em;
  }

  .tracking-\[0\.04em\] {
    --tw-tracking: .04em;
    letter-spacing: .04em;
  }

  .tracking-\[0\.08em\] {
    --tw-tracking: .08em;
    letter-spacing: .08em;
  }

  .tracking-\[0\.12em\] {
    --tw-tracking: .12em;
    letter-spacing: .12em;
  }

  .tracking-\[0\.14em\] {
    --tw-tracking: .14em;
    letter-spacing: .14em;
  }

  .tracking-\[0\.16em\] {
    --tw-tracking: .16em;
    letter-spacing: .16em;
  }

  .tracking-\[0\.18em\] {
    --tw-tracking: .18em;
    letter-spacing: .18em;
  }

  .tracking-\[0\.22em\] {
    --tw-tracking: .22em;
    letter-spacing: .22em;
  }

  .tracking-normal {
    --tw-tracking: var(--tracking-normal);
    letter-spacing: var(--tracking-normal);
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }

  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }

  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }

  .text-balance {
    text-wrap: balance;
  }

  .text-pretty {
    text-wrap: pretty;
  }

  .break-words, .wrap-break-word {
    overflow-wrap: break-word;
  }

  .break-all {
    word-break: break-all;
  }

  .whitespace-normal {
    white-space: normal;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }

  .\!text-background {
    color: var(--background) !important;
  }

  .\!text-primary-foreground {
    color: var(--primary-foreground) !important;
  }

  .text-\(--ctx-fg\) {
    color: var(--ctx-fg);
  }

  .text-\(--ink\) {
    color: var(--ink);
  }

  .text-\(--ink-muted\) {
    color: var(--ink-muted);
  }

  .text-\(--ink-muted-2\) {
    color: var(--ink-muted-2);
  }

  .text-\(--l-ink\) {
    color: var(--l-ink);
  }

  .text-\(--l-muted\) {
    color: var(--l-muted);
  }

  .text-\(--l-muted-2\) {
    color: var(--l-muted-2);
  }

  .text-\[\#0f0e0c\] {
    color: #0f0e0c;
  }

  .text-\[\#1c1917\] {
    color: #1c1917;
  }

  .text-\[\#3d5bff\] {
    color: #3d5bff;
  }

  .text-\[\#4f46e5\] {
    color: #4f46e5;
  }

  .text-\[\#6e6a60\] {
    color: #6e6a60;
  }

  .text-\[\#047857\] {
    color: #047857;
  }

  .text-\[\#57534e\] {
    color: #57534e;
  }

  .text-\[\#93908a\] {
    color: #93908a;
  }

  .text-\[\#93908a\]\! {
    color: #93908a !important;
  }

  .text-\[\#a8a49c\] {
    color: #a8a49c;
  }

  .text-\[\#b91c1c\] {
    color: #b91c1c;
  }

  .text-\[\#c4c0b6\] {
    color: #c4c0b6;
  }

  .text-\[\#ec4899\] {
    color: #ec4899;
  }

  .text-\[rgba\(15\,14\,12\,0\.2\)\] {
    color: #0f0e0c33;
  }

  .text-\[var\(--ink-muted-2\)\] {
    color: var(--ink-muted-2);
  }

  .text-accent-foreground {
    color: var(--accent-foreground);
  }

  .text-amber-600 {
    color: var(--color-amber-600);
  }

  .text-amber-700 {
    color: var(--color-amber-700);
  }

  .text-amber-800 {
    color: var(--color-amber-800);
  }

  .text-amber-900 {
    color: var(--color-amber-900);
  }

  .text-amber-950 {
    color: var(--color-amber-950);
  }

  .text-background {
    color: var(--background);
  }

  .text-black {
    color: var(--color-black);
  }

  .text-blue-600 {
    color: var(--color-blue-600);
  }

  .text-blue-600\! {
    color: var(--color-blue-600) !important;
  }

  .text-blue-700 {
    color: var(--color-blue-700);
  }

  .text-blue-800 {
    color: var(--color-blue-800);
  }

  .text-card-foreground {
    color: var(--card-foreground);
  }

  .text-course-accent, .text-course-accent\/60 {
    color: var(--course-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-course-accent\/60 {
      color: color-mix(in oklab, var(--course-accent) 60%, transparent);
    }
  }

  .text-course-accent\/70 {
    color: var(--course-accent);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-course-accent\/70 {
      color: color-mix(in oklab, var(--course-accent) 70%, transparent);
    }
  }

  .text-course-body, .text-course-body\/30 {
    color: var(--course-body);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-course-body\/30 {
      color: color-mix(in oklab, var(--course-body) 30%, transparent);
    }
  }

  .text-course-body\/40 {
    color: var(--course-body);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-course-body\/40 {
      color: color-mix(in oklab, var(--course-body) 40%, transparent);
    }
  }

  .text-course-body\/50 {
    color: var(--course-body);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-course-body\/50 {
      color: color-mix(in oklab, var(--course-body) 50%, transparent);
    }
  }

  .text-course-body\/70 {
    color: var(--course-body);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-course-body\/70 {
      color: color-mix(in oklab, var(--course-body) 70%, transparent);
    }
  }

  .text-course-grey {
    color: var(--course-grey);
  }

  .text-course-heading {
    color: var(--course-heading);
  }

  .text-course-primary {
    color: var(--course-primary);
  }

  .text-dashboard-rs-description {
    color: var(--dashboard-right-sidebar-description);
  }

  .text-dashboard-rs-eyebrow {
    color: var(--dashboard-right-sidebar-eyebrow);
  }

  .text-destructive {
    color: var(--destructive);
  }

  .text-emerald-600 {
    color: var(--color-emerald-600);
  }

  .text-emerald-700 {
    color: var(--color-emerald-700);
  }

  .text-emerald-800 {
    color: var(--color-emerald-800);
  }

  .text-foreground, .text-foreground\/70 {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-foreground\/70 {
      color: color-mix(in oklab, var(--foreground) 70%, transparent);
    }
  }

  .text-foreground\/80 {
    color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-foreground\/80 {
      color: color-mix(in oklab, var(--foreground) 80%, transparent);
    }
  }

  .text-green-500 {
    color: var(--color-green-500);
  }

  .text-green-600 {
    color: var(--color-green-600);
  }

  .text-green-600\! {
    color: var(--color-green-600) !important;
  }

  .text-green-700 {
    color: var(--color-green-700);
  }

  .text-green-800 {
    color: var(--color-green-800);
  }

  .text-guided-text {
    color: var(--guided-text);
  }

  .text-guided-text-muted {
    color: var(--guided-text-muted);
  }

  .text-home-hero-accent {
    color: var(--homepage-hero-accent);
  }

  .text-indigo-500 {
    color: var(--color-indigo-500);
  }

  .text-indigo-600 {
    color: var(--color-indigo-600);
  }

  .text-indigo-700 {
    color: var(--color-indigo-700);
  }

  .text-info {
    color: var(--info);
  }

  .text-muted-foreground, .text-muted-foreground\/0 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/0 {
      color: color-mix(in oklab, var(--muted-foreground) 0%, transparent);
    }
  }

  .text-muted-foreground\/20 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/20 {
      color: color-mix(in oklab, var(--muted-foreground) 20%, transparent);
    }
  }

  .text-muted-foreground\/30 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/30 {
      color: color-mix(in oklab, var(--muted-foreground) 30%, transparent);
    }
  }

  .text-muted-foreground\/40 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/40 {
      color: color-mix(in oklab, var(--muted-foreground) 40%, transparent);
    }
  }

  .text-muted-foreground\/50 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/50 {
      color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
    }
  }

  .text-muted-foreground\/60 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/60 {
      color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
    }
  }

  .text-muted-foreground\/70 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/70 {
      color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
    }
  }

  .text-muted-foreground\/75 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/75 {
      color: color-mix(in oklab, var(--muted-foreground) 75%, transparent);
    }
  }

  .text-muted-foreground\/80 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/80 {
      color: color-mix(in oklab, var(--muted-foreground) 80%, transparent);
    }
  }

  .text-muted-foreground\/90 {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-muted-foreground\/90 {
      color: color-mix(in oklab, var(--muted-foreground) 90%, transparent);
    }
  }

  .text-neutral-300 {
    color: var(--color-neutral-300);
  }

  .text-neutral-400 {
    color: var(--color-neutral-400);
  }

  .text-neutral-500 {
    color: var(--color-neutral-500);
  }

  .text-neutral-600 {
    color: var(--color-neutral-600);
  }

  .text-neutral-700 {
    color: var(--color-neutral-700);
  }

  .text-neutral-800 {
    color: var(--color-neutral-800);
  }

  .text-neutral-900 {
    color: var(--color-neutral-900);
  }

  .text-neutral-950\! {
    color: var(--color-neutral-950) !important;
  }

  .text-orange-200 {
    color: var(--color-orange-200);
  }

  .text-orange-300 {
    color: var(--color-orange-300);
  }

  .text-popover-foreground {
    color: var(--popover-foreground);
  }

  .text-primary {
    color: var(--primary);
  }

  .text-primary-foreground, .text-primary-foreground\/70 {
    color: var(--primary-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-primary-foreground\/70 {
      color: color-mix(in oklab, var(--primary-foreground) 70%, transparent);
    }
  }

  .text-red-300 {
    color: var(--color-red-300);
  }

  .text-red-500 {
    color: var(--color-red-500);
  }

  .text-red-600 {
    color: var(--color-red-600);
  }

  .text-red-600\! {
    color: var(--color-red-600) !important;
  }

  .text-red-700 {
    color: var(--color-red-700);
  }

  .text-red-800 {
    color: var(--color-red-800);
  }

  .text-secondary-foreground {
    color: var(--secondary-foreground);
  }

  .text-sidebar-foreground {
    color: var(--sidebar-foreground);
  }

  .text-sky-500 {
    color: var(--color-sky-500);
  }

  .text-sky-600 {
    color: var(--color-sky-600);
  }

  .text-sky-700 {
    color: var(--color-sky-700);
  }

  .text-sky-800 {
    color: var(--color-sky-800);
  }

  .text-slate-300 {
    color: var(--color-slate-300);
  }

  .text-slate-400 {
    color: var(--color-slate-400);
  }

  .text-slate-500 {
    color: var(--color-slate-500);
  }

  .text-slate-600 {
    color: var(--color-slate-600);
  }

  .text-slate-700 {
    color: var(--color-slate-700);
  }

  .text-slate-800 {
    color: var(--color-slate-800);
  }

  .text-slate-900 {
    color: var(--color-slate-900);
  }

  .text-success {
    color: var(--success);
  }

  .text-violet-600 {
    color: var(--color-violet-600);
  }

  .text-violet-700 {
    color: var(--color-violet-700);
  }

  .text-violet-800 {
    color: var(--color-violet-800);
  }

  .text-warning {
    color: var(--warning);
  }

  .text-warning-content {
    color: var(--warning-content);
  }

  .text-white {
    color: var(--color-white);
  }

  .text-white\/50 {
    color: #ffffff80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/50 {
      color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }

  .text-white\/55 {
    color: #ffffff8c;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/55 {
      color: color-mix(in oklab, var(--color-white) 55%, transparent);
    }
  }

  .text-white\/70 {
    color: #ffffffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/70 {
      color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }

  .text-yellow-600\! {
    color: var(--color-yellow-600) !important;
  }

  .capitalize {
    text-transform: capitalize;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .normal-case {
    text-transform: none;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .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, );
  }

  .no-underline {
    text-decoration-line: none;
  }

  .underline {
    text-decoration-line: underline;
  }

  .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-blue-600 {
    accent-color: var(--color-blue-600);
  }

  .accent-indigo-600 {
    accent-color: var(--color-indigo-600);
  }

  .accent-primary {
    accent-color: var(--primary);
  }

  .\!opacity-0 {
    opacity: 0 !important;
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-15 {
    opacity: .15;
  }

  .opacity-25 {
    opacity: .25;
  }

  .opacity-40 {
    opacity: .4;
  }

  .opacity-50 {
    opacity: .5;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-65 {
    opacity: .65;
  }

  .opacity-70 {
    opacity: .7;
  }

  .opacity-75 {
    opacity: .75;
  }

  .opacity-80 {
    opacity: .8;
  }

  .opacity-85 {
    opacity: .85;
  }

  .opacity-90 {
    opacity: .9;
  }

  .opacity-\[0\.55\] {
    opacity: .55;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_-3px_0_0_var\(--primary\)\] {
    --tw-shadow: 0 -3px 0 0 var(--tw-shadow-color, var(--primary));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_1px_4px_-1px_rgba\(26\,40\,90\,0\.07\)\] {
    --tw-shadow: 0 1px 4px -1px var(--tw-shadow-color, #1a285a12);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_3px_0_0_var\(--primary\)\] {
    --tw-shadow: 0 3px 0 0 var(--tw-shadow-color, var(--primary));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_8px_24px_-4px_rgba\(0\,0\,0\,0\.08\)\,0_2px_8px_-2px_rgba\(0\,0\,0\,0\.04\)\] {
    --tw-shadow: 0 8px 24px -4px var(--tw-shadow-color, #00000014), 0 2px 8px -2px var(--tw-shadow-color, #0000000a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_8px_24px_-4px_rgba\(0\,0\,0\,0\.08\)\,0_2px_8px_-2px_rgba\(0\,0\,0\,0\.04\)\]\! {
    --tw-shadow: 0 8px 24px -4px var(--tw-shadow-color, #00000014), 0 2px 8px -2px var(--tw-shadow-color, #0000000a) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .shadow-\[0_18px_42px_-30px_var\(--muted-foreground\)\] {
    --tw-shadow: 0 18px 42px -30px var(--tw-shadow-color, var(--muted-foreground));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[inset_0_0_0_1px_rgba\(15\,23\,42\,0\.08\)\] {
    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, #0f172a14);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[inset_0_3px_0_0_\#3d5bff\] {
    --tw-shadow: inset 0 3px 0 0 var(--tw-shadow-color, #3d5bff);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-0 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-blue-500\/25 {
    --tw-ring-color: #3080ff40;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-blue-500\/25 {
      --tw-ring-color: color-mix(in oklab, var(--color-blue-500) 25%, transparent);
    }
  }

  .ring-foreground\/10 {
    --tw-ring-color: var(--foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-foreground\/10 {
      --tw-ring-color: color-mix(in oklab, var(--foreground) 10%, transparent);
    }
  }

  .ring-green-500\/60 {
    --tw-ring-color: #00c75899;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-green-500\/60 {
      --tw-ring-color: color-mix(in oklab, var(--color-green-500) 60%, transparent);
    }
  }

  .ring-primary, .ring-primary\/15 {
    --tw-ring-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-primary\/15 {
      --tw-ring-color: color-mix(in oklab, var(--primary) 15%, transparent);
    }
  }

  .ring-primary\/20 {
    --tw-ring-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-primary\/20 {
      --tw-ring-color: color-mix(in oklab, var(--primary) 20%, transparent);
    }
  }

  .ring-primary\/25 {
    --tw-ring-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-primary\/25 {
      --tw-ring-color: color-mix(in oklab, var(--primary) 25%, transparent);
    }
  }

  .ring-primary\/30 {
    --tw-ring-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-primary\/30 {
      --tw-ring-color: color-mix(in oklab, var(--primary) 30%, transparent);
    }
  }

  .ring-primary\/40 {
    --tw-ring-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-primary\/40 {
      --tw-ring-color: color-mix(in oklab, var(--primary) 40%, transparent);
    }
  }

  .ring-sky-500\/30 {
    --tw-ring-color: #00a5ef4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-sky-500\/30 {
      --tw-ring-color: color-mix(in oklab, var(--color-sky-500) 30%, transparent);
    }
  }

  .ring-violet-500\/30 {
    --tw-ring-color: #8d54ff4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-violet-500\/30 {
      --tw-ring-color: color-mix(in oklab, var(--color-violet-500) 30%, transparent);
    }
  }

  .outline-hidden {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (forced-colors: active) {
    .outline-hidden {
      outline-offset: 2px;
      outline: 2px solid #0000;
    }
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow {
    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, #0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000f));
    --tw-drop-shadow: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .grayscale-\[0\.35\] {
    --tw-grayscale: grayscale(.35);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .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, ) !important;
  }

  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-\[1px\] {
    --tw-backdrop-blur: blur(1px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-\[20px\] {
    --tw-backdrop-blur: blur(20px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-\[20px\]\! {
    --tw-backdrop-blur: blur(20px) !important;
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ) !important;
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ) !important;
  }

  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-xl {
    --tw-backdrop-blur: blur(var(--blur-xl));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .\!transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events !important;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)) !important;
    transition-duration: var(--tw-duration, var(--default-transition-duration)) !important;
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[max-width\] {
    transition-property: max-width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[width\] {
    transition-property: width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-100 {
    --tw-duration: .1s;
    transition-duration: .1s;
  }

  .duration-150 {
    --tw-duration: .15s;
    transition-duration: .15s;
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .duration-500 {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .duration-700 {
    --tw-duration: .7s;
    transition-duration: .7s;
  }

  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

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

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  .zoom-in-95 {
    --tw-enter-scale: .95;
  }

  .\[animation-delay\:0ms\] {
    animation-delay: 0s;
  }

  .\[animation-delay\:300ms\] {
    animation-delay: .3s;
  }

  .\[animation-delay\:600ms\] {
    animation-delay: .6s;
  }

  .\[clip-path\:inset\(0\)\] {
    clip-path: inset(0);
  }

  .\[no-new-privileges\:true\] {
    no-new-privileges: true;
  }

  .\[tab-size\:2\] {
    tab-size: 2;
  }

  .backface-hidden {
    backface-visibility: hidden;
  }

  .block-1 {
    block-size: calc(var(--spacing) * 1);
  }

  .fade-out {
    --tw-exit-opacity: 0;
  }

  .paused {
    animation-play-state: paused;
  }

  .paused\! {
    animation-play-state: paused !important;
  }

  .ring-inset {
    --tw-ring-inset: inset;
  }

  .running {
    animation-play-state: running;
  }

  :is(.\*\:min-w-0 > *) {
    min-width: calc(var(--spacing) * 0);
  }

  .group-open\:rotate-90:is(:where(.group):is([open], :popover-open, :open) *) {
    rotate: 90deg;
  }

  .group-focus-within\:text-\[\#4f46e5\]:is(:where(.group):focus-within *) {
    color: #4f46e5;
  }

  .group-focus-within\/editable\:opacity-100:is(:where(.group\/editable):focus-within *) {
    opacity: 1;
  }

  @media (hover: hover) {
    .group-hover\:translate-x-0\.5:is(:where(.group):hover *) {
      --tw-translate-x: calc(var(--spacing) * .5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:rotate-90:is(:where(.group):hover *) {
      rotate: 90deg;
    }

    .group-hover\:opacity-100:is(:where(.group):hover *) {
      opacity: 1;
    }

    .group-hover\/block\:text-muted-foreground\/40:is(:where(.group\/block):hover *) {
      color: var(--muted-foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\/block\:text-muted-foreground\/40:is(:where(.group\/block):hover *) {
        color: color-mix(in oklab, var(--muted-foreground) 40%, transparent);
      }
    }

    .group-hover\/block\:text-muted-foreground\/50:is(:where(.group\/block):hover *) {
      color: var(--muted-foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\/block\:text-muted-foreground\/50:is(:where(.group\/block):hover *) {
        color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
      }
    }

    .group-hover\/card\:text-muted-foreground\/30:is(:where(.group\/card):hover *) {
      color: var(--muted-foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\/card\:text-muted-foreground\/30:is(:where(.group\/card):hover *) {
        color: color-mix(in oklab, var(--muted-foreground) 30%, transparent);
      }
    }

    .group-hover\/folder-head\:pointer-events-auto:is(:where(.group\/folder-head):hover *) {
      pointer-events: auto;
    }

    .group-hover\/folder-head\:opacity-100:is(:where(.group\/folder-head):hover *) {
      opacity: 1;
    }

    .group-hover\/li\:text-muted-foreground\/40:is(:where(.group\/li):hover *) {
      color: var(--muted-foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\/li\:text-muted-foreground\/40:is(:where(.group\/li):hover *) {
        color: color-mix(in oklab, var(--muted-foreground) 40%, transparent);
      }
    }

    .group-hover\/obj\:text-muted-foreground\/30:is(:where(.group\/obj):hover *) {
      color: var(--muted-foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .group-hover\/obj\:text-muted-foreground\/30:is(:where(.group\/obj):hover *) {
        color: color-mix(in oklab, var(--muted-foreground) 30%, transparent);
      }
    }

    .group-hover\/slide-row\:pointer-events-auto:is(:where(.group\/slide-row):hover *) {
      pointer-events: auto;
    }

    .group-hover\/slide-row\:opacity-100:is(:where(.group\/slide-row):hover *) {
      opacity: 1;
    }
  }

  .group-has-data-\[slot\=combobox-clear\]\/input-group\:hidden:is(:where(.group\/input-group):has([data-slot="combobox-clear"]) *) {
    display: none;
  }

  .group-data-empty\/combobox-content\:flex:is(:where(.group\/combobox-content)[data-empty] *) {
    display: flex;
  }

  .placeholder\:text-course-body\/40::placeholder {
    color: var(--course-body);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-course-body\/40::placeholder {
      color: color-mix(in oklab, var(--course-body) 40%, transparent);
    }
  }

  .placeholder\:text-muted-foreground\/50::placeholder {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-muted-foreground\/50::placeholder {
      color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);
    }
  }

  .placeholder\:text-muted-foreground\/60::placeholder {
    color: var(--muted-foreground);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-muted-foreground\/60::placeholder {
      color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
    }
  }

  .placeholder\:text-white\/45::placeholder {
    color: #ffffff73;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .placeholder\:text-white\/45::placeholder {
      color: color-mix(in oklab, var(--color-white) 45%, transparent);
    }
  }

  .placeholder\:opacity-30::placeholder {
    opacity: .3;
  }

  .placeholder\:opacity-35::placeholder {
    opacity: .35;
  }

  .placeholder\:opacity-40::placeholder {
    opacity: .4;
  }

  .first\:mt-0:first-child {
    margin-top: calc(var(--spacing) * 0);
  }

  .first\:mt-1:first-child {
    margin-top: calc(var(--spacing) * 1);
  }

  .first\:border-t-0:first-child {
    border-top-style: var(--tw-border-style);
    border-top-width: 0;
  }

  .first\:pt-0:first-child {
    padding-top: calc(var(--spacing) * 0);
  }

  .last\:border-b-0:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  .last\:pb-0:last-child {
    padding-bottom: calc(var(--spacing) * 0);
  }

  .focus-within\:border-border\/60:focus-within {
    border-color: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-within\:border-border\/60:focus-within {
      border-color: color-mix(in oklab, var(--border) 60%, transparent);
    }
  }

  .focus-within\:border-ring:focus-within {
    border-color: var(--ring);
  }

  .focus-within\:bg-white:focus-within {
    background-color: var(--color-white);
  }

  .focus-within\:shadow-md:focus-within {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-within\:ring-1:focus-within {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-within\:ring-2:focus-within {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-within\:ring-\[rgba\(79\,70\,229\,0\.45\)\]:focus-within {
    --tw-ring-color: #4f46e573;
  }

  .focus-within\:ring-ring:focus-within, .focus-within\:ring-ring\/50:focus-within {
    --tw-ring-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-within\:ring-ring\/50:focus-within {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  .focus-within\:ring-offset-2:focus-within {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  @media (hover: hover) {
    .hover\:-translate-y-0\.5:hover {
      --tw-translate-y: calc(var(--spacing) * -.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:border-\(--line-strong\):hover {
      border-color: var(--line-strong);
    }

    .hover\:border-\[rgba\(15\,14\,12\,0\.2\)\]:hover {
      border-color: #0f0e0c33;
    }

    .hover\:border-\[rgba\(15\,14\,12\,0\.22\)\]:hover {
      border-color: #0f0e0c38;
    }

    .hover\:border-\[rgba\(15\,14\,12\,0\.22\)\]\!:hover {
      border-color: #0f0e0c38 !important;
    }

    .hover\:border-border\/50:hover {
      border-color: var(--border);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-border\/50:hover {
        border-color: color-mix(in oklab, var(--border) 50%, transparent);
      }
    }

    .hover\:border-course-accent:hover {
      border-color: var(--course-accent);
    }

    .hover\:border-course-border\/60:hover {
      border-color: var(--course-border);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-course-border\/60:hover {
        border-color: color-mix(in oklab, var(--course-border) 60%, transparent);
      }
    }

    .hover\:border-foreground\/40:hover {
      border-color: var(--foreground);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-foreground\/40:hover {
        border-color: color-mix(in oklab, var(--foreground) 40%, transparent);
      }
    }

    .hover\:border-orange-300\/60:hover {
      border-color: #ffb96d99;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-orange-300\/60:hover {
        border-color: color-mix(in oklab, var(--color-orange-300) 60%, transparent);
      }
    }

    .hover\:border-primary:hover, .hover\:border-primary\/40:hover {
      border-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-primary\/40:hover {
        border-color: color-mix(in oklab, var(--primary) 40%, transparent);
      }
    }

    .hover\:border-primary\/50:hover {
      border-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-primary\/50:hover {
        border-color: color-mix(in oklab, var(--primary) 50%, transparent);
      }
    }

    .hover\:border-primary\/60:hover {
      border-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:border-primary\/60:hover {
        border-color: color-mix(in oklab, var(--primary) 60%, transparent);
      }
    }

    .hover\:\!bg-foreground\/90:hover {
      background-color: var(--foreground) !important;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:\!bg-foreground\/90:hover {
        background-color: color-mix(in oklab, var(--foreground) 90%, transparent) !important;
      }
    }

    .hover\:\!bg-success\/90:hover {
      background-color: var(--success) !important;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:\!bg-success\/90:hover {
        background-color: color-mix(in oklab, var(--success) 90%, transparent) !important;
      }
    }

    .hover\:bg-\[\#2b2823\]:hover {
      background-color: #2b2823;
    }

    .hover\:bg-\[rgba\(15\,14\,12\,0\.03\)\]:hover {
      background-color: #0f0e0c08;
    }

    .hover\:bg-\[rgba\(15\,14\,12\,0\.04\)\]:hover {
      background-color: #0f0e0c0a;
    }

    .hover\:bg-\[rgba\(15\,14\,12\,0\.05\)\]:hover {
      background-color: #0f0e0c0d;
    }

    .hover\:bg-\[rgba\(15\,14\,12\,0\.06\)\]:hover {
      background-color: #0f0e0c0f;
    }

    .hover\:bg-\[rgba\(220\,38\,38\,0\.08\)\]:hover {
      background-color: #dc262614;
    }

    .hover\:bg-accent\/10:hover {
      background-color: var(--accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-accent\/10:hover {
        background-color: color-mix(in oklab, var(--accent) 10%, transparent);
      }
    }

    .hover\:bg-accent\/50:hover {
      background-color: var(--accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-accent\/50:hover {
        background-color: color-mix(in oklab, var(--accent) 50%, transparent);
      }
    }

    .hover\:bg-amber-100:hover {
      background-color: var(--color-amber-100);
    }

    .hover\:bg-amber-800:hover {
      background-color: var(--color-amber-800);
    }

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

    .hover\:bg-course-accent\/10:hover {
      background-color: var(--course-accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-course-accent\/10:hover {
        background-color: color-mix(in oklab, var(--course-accent) 10%, transparent);
      }
    }

    .hover\:bg-course-accent\/15:hover {
      background-color: var(--course-accent);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-course-accent\/15:hover {
        background-color: color-mix(in oklab, var(--course-accent) 15%, transparent);
      }
    }

    .hover\:bg-course-canvas\/30:hover {
      background-color: var(--course-canvas);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-course-canvas\/30:hover {
        background-color: color-mix(in oklab, var(--course-canvas) 30%, transparent);
      }
    }

    .hover\:bg-destructive\/10:hover {
      background-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-destructive\/10:hover {
        background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
      }
    }

    .hover\:bg-destructive\/90:hover {
      background-color: var(--destructive);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-destructive\/90:hover {
        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
      }
    }

    .hover\:bg-indigo-600:hover {
      background-color: var(--color-indigo-600);
    }

    .hover\:bg-muted:hover, .hover\:bg-muted\/40:hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/40:hover {
        background-color: color-mix(in oklab, var(--muted) 40%, transparent);
      }
    }

    .hover\:bg-muted\/50:hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/50:hover {
        background-color: color-mix(in oklab, var(--muted) 50%, transparent);
      }
    }

    .hover\:bg-muted\/60:hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/60:hover {
        background-color: color-mix(in oklab, var(--muted) 60%, transparent);
      }
    }

    .hover\:bg-muted\/70:hover {
      background-color: var(--muted);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-muted\/70:hover {
        background-color: color-mix(in oklab, var(--muted) 70%, transparent);
      }
    }

    .hover\:bg-orange-300\/20:hover {
      background-color: #ffb96d33;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-orange-300\/20:hover {
        background-color: color-mix(in oklab, var(--color-orange-300) 20%, transparent);
      }
    }

    .hover\:bg-primary\/5:hover {
      background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/5:hover {
        background-color: color-mix(in oklab, var(--primary) 5%, transparent);
      }
    }

    .hover\:bg-primary\/10:hover {
      background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/10:hover {
        background-color: color-mix(in oklab, var(--primary) 10%, transparent);
      }
    }

    .hover\:bg-primary\/90:hover {
      background-color: var(--primary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/90:hover {
        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
      }
    }

    .hover\:bg-red-50:hover {
      background-color: var(--color-red-50);
    }

    .hover\:bg-secondary\/80:hover {
      background-color: var(--secondary);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-secondary\/80:hover {
        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
      }
    }

    .hover\:bg-sky-500\/10:hover {
      background-color: #00a5ef1a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-sky-500\/10:hover {
        background-color: color-mix(in oklab, var(--color-sky-500) 10%, transparent);
      }
    }

    .hover\:bg-slate-50:hover {
      background-color: var(--color-slate-50);
    }

    .hover\:bg-transparent:hover {
      background-color: #0000;
    }

    .hover\:bg-violet-500\/10:hover {
      background-color: #8d54ff1a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-violet-500\/10:hover {
        background-color: color-mix(in oklab, var(--color-violet-500) 10%, transparent);
      }
    }

    .hover\:bg-white:hover {
      background-color: var(--color-white);
    }

    .hover\:text-\(--ink\):hover {
      color: var(--ink);
    }

    .hover\:text-\[\#0f0e0c\]:hover {
      color: #0f0e0c;
    }

    .hover\:text-\[\#dc2626\]:hover {
      color: #dc2626;
    }

    .hover\:text-course-accent:hover {
      color: var(--course-accent);
    }

    .hover\:text-course-body:hover, .hover\:text-course-body\/60:hover {
      color: var(--course-body);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:text-course-body\/60:hover {
        color: color-mix(in oklab, var(--course-body) 60%, transparent);
      }
    }

    .hover\:text-course-primary:hover {
      color: var(--course-primary);
    }

    .hover\:text-destructive:hover {
      color: var(--destructive);
    }

    .hover\:text-foreground:hover {
      color: var(--foreground);
    }

    .hover\:text-home-submit-bg-hover:hover {
      color: var(--homepage-submit-bg-hover);
    }

    .hover\:text-primary:hover {
      color: var(--primary);
    }

    .hover\:text-red-600:hover {
      color: var(--color-red-600);
    }

    .hover\:underline:hover {
      text-decoration-line: underline;
    }

    .hover\:opacity-70:hover {
      opacity: .7;
    }

    .hover\:opacity-90:hover {
      opacity: .9;
    }

    .hover\:opacity-100:hover {
      opacity: 1;
    }

    .hover\:shadow-md:hover {
      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-sm:hover {
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    @media (hover: hover) {
      .group-hover\/block\:hover\:bg-destructive\/10:is(:where(.group\/block):hover *):hover {
        background-color: var(--destructive);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .group-hover\/block\:hover\:bg-destructive\/10:is(:where(.group\/block):hover *):hover {
          background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
        }
      }

      .group-hover\/block\:hover\:bg-muted\/60:is(:where(.group\/block):hover *):hover {
        background-color: var(--muted);
      }

      @supports (color: color-mix(in lab, red, red)) {
        .group-hover\/block\:hover\:bg-muted\/60:is(:where(.group\/block):hover *):hover {
          background-color: color-mix(in oklab, var(--muted) 60%, transparent);
        }
      }

      .group-hover\/block\:hover\:text-destructive:is(:where(.group\/block):hover *):hover {
        color: var(--destructive);
      }

      .group-hover\/block\:hover\:text-muted-foreground:is(:where(.group\/block):hover *):hover {
        color: var(--muted-foreground);
      }

      .group-hover\/card\:hover\:text-destructive:is(:where(.group\/card):hover *):hover, .group-hover\/li\:hover\:text-destructive:is(:where(.group\/li):hover *):hover, .group-hover\/obj\:hover\:text-destructive:is(:where(.group\/obj):hover *):hover {
        color: var(--destructive);
      }
    }
  }

  .focus\:border-amber-500:focus {
    border-color: var(--color-amber-500);
  }

  .focus\:border-course-accent:focus {
    border-color: var(--course-accent);
  }

  .focus\:border-indigo-600\!:focus {
    border-color: var(--color-indigo-600) !important;
  }

  .focus\:border-orange-300:focus {
    border-color: var(--color-orange-300);
  }

  .focus\:border-primary:focus, .focus\:border-primary\/40:focus {
    border-color: var(--primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus\:border-primary\/40:focus {
      border-color: color-mix(in oklab, var(--primary) 40%, transparent);
    }
  }

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

  .focus\:text-destructive:focus {
    color: var(--destructive);
  }

  .focus\:shadow-\[0_0_0_3px_rgba\(79\,70\,229\,0\.12\)\]\!:focus {
    --tw-shadow: 0 0 0 3px var(--tw-shadow-color, #4f46e51f) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .focus\:ring-0\!:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .focus\:ring-2:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-ring:focus {
    --tw-ring-color: var(--ring);
  }

  .focus-visible\:pointer-events-auto:focus-visible {
    pointer-events: auto;
  }

  .focus-visible\:z-20:focus-visible {
    z-index: 20;
  }

  .focus-visible\:rounded-sm:focus-visible {
    border-radius: var(--radius-sm);
  }

  .focus-visible\:border-0:focus-visible {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .focus-visible\:border-\[\#4f46e5\]\!:focus-visible {
    border-color: #4f46e5 !important;
  }

  .focus-visible\:border-primary:focus-visible {
    border-color: var(--primary);
  }

  .focus-visible\:opacity-100:focus-visible {
    opacity: 1;
  }

  .focus-visible\:shadow-\[0_0_0_3px_rgba\(79\,70\,229\,0\.12\)\]\!:focus-visible {
    --tw-shadow: 0 0 0 3px var(--tw-shadow-color, #4f46e51f) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .focus-visible\:shadow-none\!:focus-visible {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .focus-visible\:ring-0:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-2:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-\[rgba\(79\,70\,229\,0\.35\)\]:focus-visible {
    --tw-ring-color: #4f46e559;
  }

  .focus-visible\:ring-ring:focus-visible {
    --tw-ring-color: var(--ring);
  }

  .focus-visible\:ring-offset-2:focus-visible {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus-visible\:outline-2:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }

  .focus-visible\:outline-offset-2:focus-visible {
    outline-offset: 2px;
  }

  .focus-visible\:outline-ring\/55:focus-visible {
    outline-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:outline-ring\/55:focus-visible {
      outline-color: color-mix(in oklab, var(--ring) 55%, transparent);
    }
  }

  .focus-visible\:outline-none:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  .focus-visible\:ring-inset:focus-visible {
    --tw-ring-inset: inset;
  }

  .active\:cursor-grabbing:active {
    cursor: grabbing;
  }

  .disabled\:pointer-events-none:disabled {
    pointer-events: none;
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:bg-indigo-400:disabled {
    background-color: var(--color-indigo-400);
  }

  .disabled\:opacity-40:disabled {
    opacity: .4;
  }

  .disabled\:opacity-50:disabled {
    opacity: .5;
  }

  .disabled\:opacity-60:disabled {
    opacity: .6;
  }

  .has-disabled\:pointer-events-none:has(:disabled) {
    pointer-events: none;
  }

  .has-disabled\:cursor-not-allowed:has(:disabled) {
    cursor: not-allowed;
  }

  .has-disabled\:opacity-50:has(:disabled) {
    opacity: .5;
  }

  .has-aria-invalid\:border-destructive:has([aria-invalid="true"]) {
    border-color: var(--destructive);
  }

  .has-aria-invalid\:ring-1:has([aria-invalid="true"]) {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .has-aria-invalid\:ring-destructive\/20:has([aria-invalid="true"]) {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .has-aria-invalid\:ring-destructive\/20:has([aria-invalid="true"]) {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }

  .has-data-\[slot\=combobox-chip\]\:px-1:has([data-slot="combobox-chip"]) {
    padding-inline: calc(var(--spacing) * 1);
  }

  .has-data-\[slot\=combobox-chip-remove\]\:pr-0:has([data-slot="combobox-chip-remove"]) {
    padding-right: calc(var(--spacing) * 0);
  }

  .has-\[\:focus-visible\]\:ring-2:has(:focus-visible) {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .has-\[\:focus-visible\]\:ring-ring:has(:focus-visible) {
    --tw-ring-color: var(--ring);
  }

  .data-empty\:p-0[data-empty] {
    padding: calc(var(--spacing) * 0);
  }

  .data-highlighted\:bg-accent[data-highlighted] {
    background-color: var(--accent);
  }

  .data-highlighted\:text-accent-foreground[data-highlighted], :is(.not-data-\[variant\=destructive\]\:data-highlighted\:\*\*\:text-accent-foreground:not([data-variant="destructive"])[data-highlighted] *) {
    color: var(--accent-foreground);
  }

  .data-pressed\:bg-transparent[data-pressed] {
    background-color: #0000;
  }

  .data-\[chips\=true\]\:min-w-\(--anchor-width\)[data-chips="true"] {
    min-width: var(--anchor-width);
  }

  .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
    --tw-enter-translate-y: calc(2*var(--spacing)*-1);
  }

  .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
    --tw-enter-translate-x: calc(2*var(--spacing));
  }

  .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
    --tw-enter-translate-x: calc(2*var(--spacing)*-1);
  }

  .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
    --tw-enter-translate-y: calc(2*var(--spacing));
  }

  :is(.\*\:data-\[slot\=input-group\]\:m-1 > *)[data-slot="input-group"] {
    margin: calc(var(--spacing) * 1);
  }

  :is(.\*\:data-\[slot\=input-group\]\:mb-0 > *)[data-slot="input-group"] {
    margin-bottom: calc(var(--spacing) * 0);
  }

  :is(.\*\:data-\[slot\=input-group\]\:h-8 > *)[data-slot="input-group"] {
    height: calc(var(--spacing) * 8);
  }

  :is(.\*\:data-\[slot\=input-group\]\:border-input\/30 > *)[data-slot="input-group"] {
    border-color: var(--input);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :is(.\*\:data-\[slot\=input-group\]\:border-input\/30 > *)[data-slot="input-group"] {
      border-color: color-mix(in oklab, var(--input) 30%, transparent);
    }
  }

  :is(.\*\:data-\[slot\=input-group\]\:bg-input\/30 > *)[data-slot="input-group"] {
    background-color: var(--input);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :is(.\*\:data-\[slot\=input-group\]\:bg-input\/30 > *)[data-slot="input-group"] {
      background-color: color-mix(in oklab, var(--input) 30%, transparent);
    }
  }

  :is(.\*\:data-\[slot\=input-group\]\:shadow-none > *)[data-slot="input-group"] {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .data-\[state\=active\]\:border-transparent\![data-state="active"] {
    border-color: #0000 !important;
  }

  .data-\[state\=active\]\:bg-slate-900\![data-state="active"] {
    background-color: var(--color-slate-900) !important;
  }

  .data-\[state\=active\]\:text-white\![data-state="active"] {
    color: var(--color-white) !important;
  }

  .data-\[state\=active\]\:shadow-none\![data-state="active"] {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .data-\[state\=active\]\:ring-0\![data-state="active"] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .data-\[state\=checked\]\:translate-x-4[data-state="checked"] {
    --tw-translate-x: calc(var(--spacing) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[state\=checked\]\:bg-\[\#4f46e5\][data-state="checked"] {
    background-color: #4f46e5;
  }

  .data-\[state\=open\]\:border-\[\#4f46e5\]\![data-state="open"] {
    border-color: #4f46e5 !important;
  }

  .data-\[state\=open\]\:bg-\[rgba\(15\,14\,12\,0\.06\)\][data-state="open"] {
    background-color: #0f0e0c0f;
  }

  .data-\[state\=open\]\:text-\(--ink\)[data-state="open"] {
    color: var(--ink);
  }

  .data-\[state\=open\]\:shadow-\[0_0_0_3px_rgba\(79\,70\,229\,0\.12\)\]\![data-state="open"] {
    --tw-shadow: 0 0 0 3px var(--tw-shadow-color, #4f46e51f) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .data-\[state\=unchecked\]\:bg-\[rgba\(15\,14\,12\,0\.12\)\][data-state="unchecked"] {
    background-color: #0f0e0c1f;
  }

  @media (prefers-reduced-motion: reduce) {
    .motion-reduce\:animate-none {
      animation: none;
    }
  }

  @media not all and (min-width: 900px) {
    .max-\[900px\]\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media not all and (min-width: 480px) {
    .max-\[480px\]\:grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }

  @media not all and (min-width: 64rem) {
    .max-lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .max-lg\:p-3\.5 {
      padding: calc(var(--spacing) * 3.5);
    }
  }

  @media not all and (min-width: 40rem) {
    .max-sm\:flex-col {
      flex-direction: column;
    }

    .max-sm\:flex-wrap {
      flex-wrap: wrap;
    }

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

  @media (min-width: 40rem) {
    .sm\:top-6 {
      top: calc(var(--spacing) * 6);
    }

    .sm\:right-6 {
      right: calc(var(--spacing) * 6);
    }

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

    .sm\:ml-auto {
      margin-left: auto;
    }

    .sm\:flex {
      display: flex;
    }

    .sm\:w-12 {
      width: calc(var(--spacing) * 12);
    }

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

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

    .sm\:max-w-2xl {
      max-width: var(--container-2xl);
    }

    .sm\:max-w-3xl {
      max-width: var(--container-3xl);
    }

    .sm\:max-w-lg {
      max-width: var(--container-lg);
    }

    .sm\:max-w-md {
      max-width: var(--container-md);
    }

    .sm\:min-w-65 {
      min-width: calc(var(--spacing) * 65);
    }

    .sm\:min-w-195 {
      min-width: calc(var(--spacing) * 195);
    }

    .sm\:rotate-0 {
      rotate: none;
    }

    .sm\:auto-cols-\[minmax\(260px\,320px\)\] {
      grid-auto-columns: minmax(260px, 320px);
    }

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

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

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

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

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

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

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

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

    .sm\:gap-x-2 {
      column-gap: calc(var(--spacing) * 2);
    }

    .sm\:p-3 {
      padding: calc(var(--spacing) * 3);
    }

    .sm\:p-9 {
      padding: calc(var(--spacing) * 9);
    }

    .sm\:p-10 {
      padding: calc(var(--spacing) * 10);
    }

    .sm\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .sm\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }

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

    .sm\:text-3xl {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }

    .sm\:text-4xl {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }

    .sm\:text-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
  }

  @media (min-width: 48rem) {
    .md\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .md\:hidden {
      display: none;
    }

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

  @media (min-width: 64rem) {
    .lg\:col-span-4 {
      grid-column: span 4 / span 4;
    }

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

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

    .lg\:-m-6 {
      margin: calc(var(--spacing) * -6);
    }

    .lg\:mx-0 {
      margin-inline: calc(var(--spacing) * 0);
    }

    .lg\:flex {
      display: flex;
    }

    .lg\:min-h-0 {
      min-height: calc(var(--spacing) * 0);
    }

    .lg\:w-\(--dashboard-right-sidebar-width\) {
      width: var(--dashboard-right-sidebar-width);
    }

    .lg\:max-w-md {
      max-width: var(--container-md);
    }

    .lg\:max-w-xl {
      max-width: var(--container-xl);
    }

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

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

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

    .lg\:basis-\(--dashboard-right-sidebar-width\) {
      flex-basis: var(--dashboard-right-sidebar-width);
    }

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

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

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

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

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

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

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

    .lg\:grid-cols-\[15rem_minmax\(0\,1fr\)_22rem\] {
      grid-template-columns: 15rem minmax(0, 1fr) 22rem;
    }

    .lg\:grid-cols-\[20rem_minmax\(0\,1fr\)\] {
      grid-template-columns: 20rem minmax(0, 1fr);
    }

    .lg\:grid-cols-\[22rem_minmax\(0\,1fr\)\] {
      grid-template-columns: 22rem minmax(0, 1fr);
    }

    .lg\:grid-cols-\[minmax\(0\,1fr\)_22rem\] {
      grid-template-columns: minmax(0, 1fr) 22rem;
    }

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

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

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

    .lg\:gap-16 {
      gap: calc(var(--spacing) * 16);
    }

    .lg\:border-y-0 {
      border-block-style: var(--tw-border-style);
      border-block-width: 0;
    }

    .lg\:border-r {
      border-right-style: var(--tw-border-style);
      border-right-width: 1px;
    }

    .lg\:border-b-0 {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0;
    }

    .lg\:border-l {
      border-left-style: var(--tw-border-style);
      border-left-width: 1px;
    }

    .lg\:border-dashboard-rs-border {
      border-color: var(--dashboard-right-sidebar-border);
    }

    .lg\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }

    .lg\:py-12 {
      padding-block: calc(var(--spacing) * 12);
    }

    .lg\:py-16 {
      padding-block: calc(var(--spacing) * 16);
    }

    .lg\:py-20 {
      padding-block: calc(var(--spacing) * 20);
    }
  }

  @media (min-width: 80rem) {
    .xl\:col-span-1 {
      grid-column: span 1 / span 1;
    }

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

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

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

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

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

    .xl\:grid-cols-\[19rem_minmax\(0\,1fr\)\] {
      grid-template-columns: 19rem minmax(0, 1fr);
    }

    .xl\:grid-cols-\[minmax\(340px\,0\.95fr\)_minmax\(0\,1\.45fr\)\] {
      grid-template-columns: minmax(340px, .95fr) minmax(0, 1.45fr);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .\32 xl\:grid-cols-\[16rem_minmax\(0\,1fr\)_24rem\] {
      grid-template-columns: 16rem minmax(0, 1fr) 24rem;
    }

    .\32 xl\:grid-cols-\[minmax\(0\,1fr\)_24rem\] {
      grid-template-columns: minmax(0, 1fr) 24rem;
    }
  }

  .rtl\:data-\[state\=checked\]\:-translate-x-4:where(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)), [dir="rtl"], [dir="rtl"] *)[data-state="checked"] {
    --tw-translate-x: calc(var(--spacing) * -4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .dark\:border-amber-800\/50:is(.dark *) {
    border-color: #953d0080;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:border-amber-800\/50:is(.dark *) {
      border-color: color-mix(in oklab, var(--color-amber-800) 50%, transparent);
    }
  }

  .dark\:border-emerald-800\/50:is(.dark *) {
    border-color: #005f4680;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:border-emerald-800\/50:is(.dark *) {
      border-color: color-mix(in oklab, var(--color-emerald-800) 50%, transparent);
    }
  }

  .dark\:border-green-800\/50:is(.dark *) {
    border-color: #01663080;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:border-green-800\/50:is(.dark *) {
      border-color: color-mix(in oklab, var(--color-green-800) 50%, transparent);
    }
  }

  .dark\:border-sky-800\/50:is(.dark *) {
    border-color: #00598680;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:border-sky-800\/50:is(.dark *) {
      border-color: color-mix(in oklab, var(--color-sky-800) 50%, transparent);
    }
  }

  .dark\:border-violet-800\/50:is(.dark *) {
    border-color: #5d0ec080;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:border-violet-800\/50:is(.dark *) {
      border-color: color-mix(in oklab, var(--color-violet-800) 50%, transparent);
    }
  }

  .dark\:bg-amber-950\/30:is(.dark *) {
    background-color: #4619014d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-amber-950\/30:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-amber-950) 30%, transparent);
    }
  }

  .dark\:bg-emerald-950\/30:is(.dark *) {
    background-color: #002c224d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-emerald-950\/30:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-emerald-950) 30%, transparent);
    }
  }

  .dark\:bg-green-950\/30:is(.dark *) {
    background-color: #032e154d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-green-950\/30:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-green-950) 30%, transparent);
    }
  }

  .dark\:bg-input\/30:is(.dark *) {
    background-color: var(--input);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-input\/30:is(.dark *) {
      background-color: color-mix(in oklab, var(--input) 30%, transparent);
    }
  }

  .dark\:bg-sky-950\/30:is(.dark *) {
    background-color: #052f4a4d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-sky-950\/30:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-sky-950) 30%, transparent);
    }
  }

  .dark\:bg-violet-950\/30:is(.dark *) {
    background-color: #2f0d684d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-violet-950\/30:is(.dark *) {
      background-color: color-mix(in oklab, var(--color-violet-950) 30%, transparent);
    }
  }

  .dark\:text-amber-300:is(.dark *) {
    color: var(--color-amber-300);
  }

  .dark\:text-amber-400:is(.dark *) {
    color: var(--color-amber-400);
  }

  .dark\:text-emerald-300:is(.dark *) {
    color: var(--color-emerald-300);
  }

  .dark\:text-emerald-400:is(.dark *) {
    color: var(--color-emerald-400);
  }

  .dark\:text-green-300:is(.dark *) {
    color: var(--color-green-300);
  }

  .dark\:text-green-400:is(.dark *) {
    color: var(--color-green-400);
  }

  .dark\:text-sky-300:is(.dark *) {
    color: var(--color-sky-300);
  }

  .dark\:text-violet-300:is(.dark *) {
    color: var(--color-violet-300);
  }

  .dark\:invert:is(.dark *) {
    --tw-invert: invert(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .dark\:has-aria-invalid\:border-destructive\/50:is(.dark *):has([aria-invalid="true"]) {
    border-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:has-aria-invalid\:border-destructive\/50:is(.dark *):has([aria-invalid="true"]) {
      border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
    }
  }

  .dark\:has-aria-invalid\:ring-destructive\/40:is(.dark *):has([aria-invalid="true"]) {
    --tw-ring-color: var(--destructive);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .dark\:has-aria-invalid\:ring-destructive\/40:is(.dark *):has([aria-invalid="true"]) {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    }
  }

  @media (max-width: 720px) {
    .max-narrow\:grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

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

    .max-narrow\:flex-col {
      flex-direction: column;
    }

    .max-narrow\:items-start {
      align-items: flex-start;
    }

    .max-narrow\:px-3 {
      padding-inline: calc(var(--spacing) * 3);
    }

    .max-narrow\:pt-4 {
      padding-top: calc(var(--spacing) * 4);
    }
  }

  .data-open\:animate-in:where([data-state="open"]), .data-open\:animate-in:where([data-open]:not([data-open="false"])) {
    animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
  }

  .data-open\:fade-in-0:where([data-state="open"]), .data-open\:fade-in-0:where([data-open]:not([data-open="false"])) {
    --tw-enter-opacity: 0;
  }

  .data-open\:zoom-in-95:where([data-state="open"]), .data-open\:zoom-in-95:where([data-open]:not([data-open="false"])) {
    --tw-enter-scale: .95;
  }

  .data-closed\:animate-out:where([data-state="closed"]), .data-closed\:animate-out:where([data-closed]:not([data-closed="false"])) {
    animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none);
  }

  .data-closed\:fade-out-0:where([data-state="closed"]), .data-closed\:fade-out-0:where([data-closed]:not([data-closed="false"])) {
    --tw-exit-opacity: 0;
  }

  .data-closed\:zoom-out-95:where([data-state="closed"]), .data-closed\:zoom-out-95:where([data-closed]:not([data-closed="false"])) {
    --tw-exit-scale: .95;
  }

  .data-disabled\:pointer-events-none:where([data-disabled="true"]), .data-disabled\:pointer-events-none:where([data-disabled]:not([data-disabled="false"])) {
    pointer-events: none;
  }

  .data-disabled\:opacity-50:where([data-disabled="true"]), .data-disabled\:opacity-50:where([data-disabled]:not([data-disabled="false"])) {
    opacity: .5;
  }

  .\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text {
    fill: var(--muted-foreground);
  }

  .\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke="#ccc"] {
    stroke: var(--border);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke="#ccc"] {
      stroke: color-mix(in oklab, var(--border) 50%, transparent);
    }
  }

  .\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor {
    stroke: var(--border);
  }

  .\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke="#fff"] {
    stroke: #0000;
  }

  .\[\&_\.recharts-layer\]\:outline-hidden .recharts-layer {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (forced-colors: active) {
    .\[\&_\.recharts-layer\]\:outline-hidden .recharts-layer {
      outline-offset: 2px;
      outline: 2px solid #0000;
    }
  }

  .\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke="#ccc"] {
    stroke: var(--border);
  }

  .\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector, .\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor {
    fill: var(--muted);
  }

  .\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke="#ccc"] {
    stroke: var(--border);
  }

  .\[\&_\.recharts-sector\]\:outline-hidden .recharts-sector {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (forced-colors: active) {
    .\[\&_\.recharts-sector\]\:outline-hidden .recharts-sector {
      outline-offset: 2px;
      outline: 2px solid #0000;
    }
  }

  .\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke="#fff"] {
    stroke: #0000;
  }

  .\[\&_\.recharts-surface\]\:outline-hidden .recharts-surface {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (forced-colors: active) {
    .\[\&_\.recharts-surface\]\:outline-hidden .recharts-surface {
      outline-offset: 2px;
      outline: 2px solid #0000;
    }
  }

  .\[\&_\[data-slot\=select-value\]\]\:min-w-0 [data-slot="select-value"] {
    min-width: calc(var(--spacing) * 0);
  }

  .\[\&_\[data-slot\=select-value\]\]\:flex-1 [data-slot="select-value"] {
    flex: 1;
  }

  .\[\&_\[data-slot\=select-value\]\]\:truncate [data-slot="select-value"] {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .\[\&_a\]\:text-course-primary a {
    color: var(--course-primary);
  }

  .\[\&_a\]\:underline a {
    text-decoration-line: underline;
  }

  .\[\&_em\]\:italic em {
    font-style: italic;
  }

  .\[\&_h1\]\:mb-1 h1 {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .\[\&_h1\]\:text-left h1 {
    text-align: left;
  }

  .\[\&_h1\]\:text-4xl h1 {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }

  .\[\&_h1\]\:font-bold h1 {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  @media (min-width: 40rem) {
    .sm\:\[\&_h1\]\:text-5xl h1 {
      font-size: var(--text-5xl);
      line-height: var(--tw-leading, var(--text-5xl--line-height));
    }
  }

  .\[\&_s\]\:line-through s {
    text-decoration-line: line-through;
  }

  .\[\&_strong\]\:font-bold strong {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .\[\&_svg\]\:pointer-events-none svg {
    pointer-events: none;
  }

  .\[\&_svg\]\:shrink-0 svg {
    flex-shrink: 0;
  }

  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*="size-"]) {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .\[\&_u\]\:underline u {
    text-decoration-line: underline;
  }

  .\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
    display: none;
  }

  .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button {
    appearance: none;
  }

  .\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button {
    appearance: none;
  }

  .\[data-answer-field-id\]\:visible:is(data-answer-field-id), .\[data-answer-field-id\=\"\$\{answerId\}\"\]\:visible:is(), .\[data-assessment-phase\=\"\$\{phase\}\"\]\:visible:is(), .\[data-course-editor-active-slide\]\:visible:is(data-course-editor-active-slide), .\[data-course-editor-active-slide\=\"\$\{contract\.slideId\}\"\]\:visible:is(), .\[data-course-editor-active-slide\=\"\$\{seed\.slideId\}\"\]\:visible:is(), .\[data-course-editor-active-slide\=\"\$\{slideId\}\"\]\:visible:is(), .\[data-course-editor-active-slide\=\"\$\{target\.slideId\}\"\]\:visible:is(), .\[data-course-editor-module\]\:visible:is(data-course-editor-module), .\[data-course-editor-module\=\"\$\{moduleId\}\"\]\:visible:is(), .\[data-course-editor-slide\=\"\$\{targetSlideId\}\"\]\:visible:is(), .\[data-fixed-preview-layout\=\"editor-canvas\"\]\:visible:is(), .\[data-nextjs-dialog-overlay\]\:visible:is(data-nextjs-dialog-overlay), .\[data-page-coordinate\]\:visible:is(data-page-coordinate), .\[data-page-coordinate\=\"\$\{contract\.coordinate\}\"\]\:visible:is(), .\[data-page-coordinate\=\"\$\{target\.coordinate\}\"\]\:visible:is(), .\[data-sitecrawler\=\"ask-saga-panel\"\]\:visible:is(), .\[data-sitecrawler\=\"ask-saga-trigger\"\]\:visible:is(), .\[data-sitecrawler\=\"audience-add\"\]\:visible:is(), .\[data-sitecrawler\=\"audience-menu-trigger\"\]\:visible:is(), .\[data-sitecrawler\=\"audience-variation-dialog\"\]\:visible:is(), .\[data-sitecrawler\=\"course-preview-step\"\]\:visible:is(), .\[data-sitecrawler\=\"fixed-editor-generated-image\"\]\:visible:is(), .\[data-sitecrawler\=\"page-type-library\"\]\:visible:is(), .\[data-sitecrawler\=\"translation-dialog\"\]\:visible:is(), .\[data-sitecrawler\=\"translation-menu-trigger\"\]\:visible:is(), .\[data-slot\=\"course-editor-shell\"\]\:visible:is(), .\[data-slot\=\"everyday-choice-acknowledgement\"\]\:visible:is(), .\[data-slot\=\"fixed-assessment-surface\"\]\:visible:is(), .\[data-slot\=\"fixed-runtime-template-error\"\]\:visible:is(), .\[data-slot\=\"staging-block-frame\"\]\:visible:is(), .\[data-template-key\]\:visible:is(data-template-key) {
    visibility: visible;
  }

  .\[\&\>button\]\:pointer-events-none > button {
    pointer-events: none;
  }

  .\[\&\>button\]\:border > button {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .\[\&\>button\]\:border-\[\#4f46e5\] > button {
    border-color: #4f46e5;
  }

  .\[\&\>button\]\:bg-\[\#4f46e5\] > button {
    background-color: #4f46e5;
  }

  .\[\&\>button\]\:font-medium > button {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .\[\&\>button\]\:text-\[\#c4c0b6\] > button {
    color: #c4c0b6;
  }

  .\[\&\>button\]\:text-white > button {
    color: var(--color-white);
  }

  .\[\&\>button\]\:opacity-40 > button {
    opacity: .4;
  }

  .\[\&\>button\:hover\]\:bg-\[\#4338ca\] > button:hover {
    background-color: #4338ca;
  }

  .\[\&\>svg\]\:h-2\.5 > svg {
    height: calc(var(--spacing) * 2.5);
  }

  .\[\&\>svg\]\:h-3 > svg {
    height: calc(var(--spacing) * 3);
  }

  .\[\&\>svg\]\:w-2\.5 > svg {
    width: calc(var(--spacing) * 2.5);
  }

  .\[\&\>svg\]\:w-3 > svg {
    width: calc(var(--spacing) * 3);
  }

  .\[\&\>svg\]\:text-muted-foreground > svg {
    color: var(--muted-foreground);
  }

  :hover > .\[\:hover\>\&\]\:opacity-100 {
    opacity: 1;
  }
}

@property --tw-animation-delay {
  syntax: "*";
  inherits: false;
  initial-value: 0s;
}

@property --tw-animation-direction {
  syntax: "*";
  inherits: false;
  initial-value: normal;
}

@property --tw-animation-duration {
  syntax: "*";
  inherits: false
}

@property --tw-animation-fill-mode {
  syntax: "*";
  inherits: false;
  initial-value: none;
}

@property --tw-animation-iteration-count {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

:root {
  --brand-blue: #3b82f6;
  --brand-indigo: #3d5bff;
  --brand-green: #29ff77;
  --indicator-green: #29ff77;
  --background: #fff;
  --foreground: #0a0a0a;
  --base-100: var(--background);
  --base-200: var(--muted);
  --base-300: var(--border);
  --base-content: var(--foreground);
  --info: var(--primary);
  --info-content: var(--primary-foreground);
  --success: var(--primary);
  --success-content: var(--primary-foreground);
  --warning: var(--accent);
  --warning-content: var(--accent-foreground);
  --error: var(--destructive);
  --error-content: var(--foreground);
  --neutral: var(--secondary);
  --neutral-content: var(--secondary-foreground);
  --card: #fff;
  --card-foreground: #0a0a0a;
  --media-well: #f5f4f3;
  --popover: #fff;
  --popover-foreground: #0a0a0a;
  --primary: var(--brand-indigo);
  --primary-foreground: #fff;
  --secondary: #f4f4f5;
  --secondary-foreground: #18181b;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --accent: #e5f0fc;
  --accent-foreground: #171717;
  --destructive: #df2225;
  --border: #e5e5e5;
  --input: #e5e5e5;
  --ring: var(--brand-indigo);
  --chart-1: #3b82f6;
  --chart-2: #60a5fa;
  --chart-3: #2563eb;
  --chart-4: #1d4ed8;
  --chart-5: #93c5fd;
  --analytics-block-occurrence: #2563eb;
  --analytics-slide-inclusion: #059669;
  --analytics-module-inclusion: #d97706;
  --analytics-course-inclusion: #9333ea;
  --radius: .5rem;
  --sidebar: #fafafa;
  --sidebar-foreground: #0a0a0a;
  --sidebar-primary: var(--brand-indigo);
  --sidebar-primary-foreground: #fff;
  --sidebar-accent: #f5f5f5;
  --sidebar-accent-foreground: #171717;
  --sidebar-border: #e5e5e5;
  --sidebar-ring: #a1a1a1;
  --ui-surface-soft: var(--card);
}

@supports (color: lab(0% 0 0)) {
  :root {
    --background: lab(100% 0 0);
    --foreground: lab(2.75381% 0 0);
    --card: lab(100% 0 0);
    --card-foreground: lab(2.75381% 0 0);
    --popover: lab(100% 0 0);
    --popover-foreground: lab(2.75381% 0 0);
    --secondary: lab(96.1634% .0993311 -.364041);
    --secondary-foreground: lab(8.30603% .618205 -2.16572);
    --muted: lab(96.52% -.0000298023 .0000119209);
    --muted-foreground: lab(48.496% 0 0);
    --accent: lab(94.18% -2.12187 -7.1074);
    --accent-foreground: lab(7.78201% -.0000149012 0);
    --destructive: lab(49.0747% 69.3434 49.6251);
    --border: lab(90.952% 0 -.0000119209);
    --input: lab(90.952% 0 -.0000119209);
    --sidebar: lab(98.26% 0 0);
    --sidebar-foreground: lab(2.75381% 0 0);
    --sidebar-accent: lab(96.52% -.0000298023 .0000119209);
    --sidebar-accent-foreground: lab(7.78201% -.0000149012 0);
    --sidebar-border: lab(90.952% 0 -.0000119209);
    --sidebar-ring: lab(66.128% -.0000298023 .0000119209);
  }
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --ui-surface-soft: color-mix(in oklch, var(--card) 90%, var(--muted) 10%);
  }
}

:root {
  --ui-surface-soft-hover: var(--card);
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --ui-surface-soft-hover: color-mix(in oklch, var(--card) 82%, var(--muted) 18%);
  }
}

:root {
  --ui-surface-elevated: var(--card);
  --ui-border-soft: var(--border);
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --ui-border-soft: color-mix(in oklch, var(--border) 84%, transparent);
  }
}

:root {
  --ui-border-strong: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --ui-border-strong: color-mix(in oklch, var(--foreground) 8%, var(--border));
  }
}

:root {
  --ui-focus-ring: var(--ring);
}

@supports (color: color-mix(in lab, red, red)) {
  :root {
    --ui-focus-ring: color-mix(in oklch, var(--ring) 22%, transparent);
  }
}

:root {
  --ui-shadow-soft: none;
  --ui-shadow-elevated: none;
  --overlay-radius: var(--radius);
  --overlay-item-radius: calc(var(--radius) - .25rem);
  --overlay-border: var(--ui-border-soft);
  --overlay-shadow: var(--ui-shadow-elevated);
  --overlay-item-hover-bg: var(--accent);
  --overlay-item-hover-fg: var(--accent-foreground);
}

.dark {
  --background: #0a0a0a;
  --foreground: #fafafa;
  --base-100: var(--background);
  --base-200: var(--muted);
  --base-300: var(--border);
  --base-content: var(--foreground);
  --info: var(--primary);
  --info-content: var(--primary-foreground);
  --success: var(--primary);
  --success-content: var(--primary-foreground);
  --warning: var(--accent);
  --warning-content: var(--accent-foreground);
  --error: var(--destructive);
  --error-content: var(--foreground);
  --neutral: var(--secondary);
  --neutral-content: var(--secondary-foreground);
  --card: #171717;
  --card-foreground: #fafafa;
  --popover: #171717;
  --popover-foreground: #fafafa;
  --primary: var(--brand-indigo);
  --primary-foreground: #fff;
  --secondary: #27272a;
  --secondary-foreground: #fafafa;
  --muted: #262626;
  --muted-foreground: #a1a1a1;
  --accent: #2b343d;
  --accent-foreground: #fafafa;
  --destructive: #ff6568;
  --border: #ffffff1a;
  --input: #ffffff26;
  --ring: var(--brand-indigo);
  --chart-1: #60a5fa;
  --chart-2: #3b82f6;
  --chart-3: #93c5fd;
  --chart-4: #2563eb;
  --chart-5: #1d4ed8;
  --analytics-block-occurrence: #60a5fa;
  --analytics-slide-inclusion: #34d399;
  --analytics-module-inclusion: #fbbf24;
  --analytics-course-inclusion: #c084fc;
  --sidebar: #171717;
  --sidebar-foreground: #fafafa;
  --sidebar-primary: var(--brand-indigo);
  --sidebar-primary-foreground: #fff;
  --sidebar-accent: #262626;
  --sidebar-accent-foreground: #fafafa;
  --sidebar-border: #ffffff1a;
  --sidebar-ring: var(--brand-indigo);
  --homepage-page-background: #1a1814;
  --homepage-page-glow: #038bf814;
  --homepage-page-guide: #038bf80a;
  --homepage-panel-surface: #201e1ceb;
  --homepage-panel-border: #ffffff14;
  --homepage-hero-background-start: #1a1814;
  --homepage-hero-background-end: #141210;
  --homepage-hero-background-glow: #038bf824;
  --homepage-hero-accent: #3ba3ff;
  --homepage-hero-subtitle: #ffffff80;
  --homepage-composer-surface: #1e1c1ad9;
  --homepage-composer-border: #ffffff14;
  --homepage-composer-shadow: 0 34px 90px #0000009e, 0 12px 30px #00000057;
  --homepage-composer-control-icon: #ffffffd1;
  --homepage-submit-bg: #3b82f6;
  --homepage-submit-bg-hover: #60a5fa;
  --homepage-submit-fg: #fff;
  --homepage-pill-bg: #ffffff1f;
  --homepage-pill-bg-hover: #ffffff2e;
  --homepage-card-bg: #ffffff0f;
  --homepage-section-surface: #201e1ce6;
  --homepage-section-border: #ffffff0f;
  --homepage-section-muted: #ffffffa8;
  --ui-surface-soft: var(--card);
}

@supports (color: lab(0% 0 0)) {
  .dark {
    --background: lab(2.75381% 0 0);
    --foreground: lab(98.26% 0 0);
    --card: lab(7.78201% -.0000149012 0);
    --card-foreground: lab(98.26% 0 0);
    --popover: lab(7.78201% -.0000149012 0);
    --popover-foreground: lab(98.26% 0 0);
    --secondary: lab(15.7305% .613764 -2.16959);
    --secondary-foreground: lab(98.26% 0 0);
    --muted: lab(15.204% 0 -.00000596046);
    --muted-foreground: lab(66.128% -.0000298023 .0000119209);
    --accent: lab(21.0871% -1.87351 -6.99708);
    --accent-foreground: lab(98.26% 0 0);
    --destructive: lab(63.7053% 60.745 31.3109);
    --border: lab(100% 0 0 / .1);
    --input: lab(100% 0 0 / .15);
    --sidebar: lab(7.78201% -.0000149012 0);
    --sidebar-foreground: lab(98.26% 0 0);
    --sidebar-accent: lab(15.204% 0 -.00000596046);
    --sidebar-accent-foreground: lab(98.26% 0 0);
    --sidebar-border: lab(100% 0 0 / .1);
  }
}

@supports (color: color-mix(in lab, red, red)) {
  .dark {
    --ui-surface-soft: color-mix(in oklch, var(--card) 86%, var(--muted) 14%);
  }
}

.dark {
  --ui-surface-soft-hover: var(--card);
}

@supports (color: color-mix(in lab, red, red)) {
  .dark {
    --ui-surface-soft-hover: color-mix(in oklch, var(--card) 74%, var(--muted) 26%);
  }
}

.dark {
  --ui-surface-elevated: var(--card);
  --ui-border-soft: var(--border);
}

@supports (color: color-mix(in lab, red, red)) {
  .dark {
    --ui-border-soft: color-mix(in oklch, var(--border) 90%, transparent);
  }
}

.dark {
  --ui-border-strong: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  .dark {
    --ui-border-strong: color-mix(in oklch, var(--foreground) 14%, var(--border));
  }
}

.dark {
  --ui-focus-ring: var(--ring);
}

@supports (color: color-mix(in lab, red, red)) {
  .dark {
    --ui-focus-ring: color-mix(in oklch, var(--ring) 28%, transparent);
  }
}

.dark {
  --ui-shadow-soft: none;
  --ui-shadow-elevated: none;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #0f0e0c1f transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: none;
}

::-webkit-scrollbar-thumb {
  background: #0f0e0c1f;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #0f0e0c38;
}

.dark ::-webkit-scrollbar-thumb {
  background: #ffffff1f;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #ffffff38;
}

.dark * {
  scrollbar-color: #ffffff1f transparent;
}

:root {
  --course-heading: #160a5c;
  --course-body: #4e565a;
  --course-border: #f0efe8;
  --course-grey: #43484c;
  --course-primary: #1392f9;
  --course-accent: #463acb;
  --course-canvas: #faf9f5;
  --course-slide-active: #d9ecfc;
  --course-surface-border: #dfe7ef;
}

[data-theme="acid"] {
  --color-base-100: #f8f8f8;
  --color-base-200: #eee;
  --color-base-300: #e1e1e1;
  --color-base-content: #000;
  --base-100: var(--color-base-100);
  --base-200: var(--color-base-200);
  --base-300: var(--color-base-300);
  --base-content: var(--color-base-content);
  --info: var(--color-info);
  --info-content: var(--color-info-content);
  --success: var(--color-success);
  --success-content: var(--color-success-content);
  --warning: var(--color-warning);
  --warning-content: var(--color-warning-content);
  --error: var(--color-error);
  --error-content: var(--color-error-content);
  --neutral: var(--color-neutral);
  --neutral-content: var(--color-neutral-content);
  --color-primary: #ff24fb;
  --color-primary-content: #180016;
  --color-secondary: #ff7a0d;
  --color-secondary-content: #180500;
  --color-accent: #cbfe00;
  --color-accent-content: #0f1600;
  --color-neutral: #140151;
  --color-neutral-content: #c7cadc;
  --color-info: #0082f4;
  --color-info-content: #000614;
  --color-success: #00f69e;
  --color-success-content: #001509;
  --color-warning: #ffe300;
  --color-warning-content: #161200;
  --color-error: #ff1d12;
  --color-error-content: #180000;
  --radius-selector: 1rem;
  --radius-field: 1rem;
  --radius-box: 1rem;
  --background: var(--color-base-100);
  --foreground: var(--color-base-content);
  --card: var(--color-base-100);
  --card-foreground: var(--color-base-content);
  --popover: var(--color-base-100);
  --popover-foreground: var(--color-base-content);
  --primary: var(--brand-blue);
  --primary-foreground: var(--color-primary-content);
  --secondary: var(--color-secondary);
  --secondary-foreground: var(--color-secondary-content);
  --muted: var(--color-base-200);
  --muted-foreground: var(--color-base-content);
}

@supports (color: lab(0% 0 0)) {
  [data-theme="acid"] {
    --color-base-100: lab(97.68% -.0000298023 .0000119209);
    --color-base-200: lab(94.2% 0 0);
    --color-base-300: lab(89.56% -.0000298023 0);
    --color-base-content: lab(0% 0 0);
    --color-primary: lab(61.6426% 104.584 -62.3431);
    --color-primary-content: lab(2.17017% 11.703 -7.9728);
    --color-secondary: lab(67.5395% 59.7689 99.8903);
    --color-secondary-content: lab(2.70272% 6.65647 4.46881);
    --color-accent: lab(93.8021% -39.8923 114.351);
    --color-accent-content: lab(6.12505% -6.06422 9.80839);
    --color-neutral: lab(6.09747% 29.3225 -44.9201);
    --color-neutral-content: lab(81.553% 1.56942 -9.27624);
    --color-info: lab(52.6019% 6.68359 -76.4472);
    --color-info-content: lab(1.49683% .423439 -8.81159);
    --color-success: lab(86.8718% -90.1122 38.3471);
    --color-success-content: lab(5.03825% -10.6981 4.49026);
    --color-warning: lab(90.4358% -2.37459 107.692);
    --color-warning-content: lab(5.5819% -.383124 8.88906);
    --color-error: lab(56.2732% 92.2163 95.7598);
    --color-error-content: lab(1.75027% 8.75349 2.9845);
  }
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="acid"] {
    --muted-foreground: color-mix(in oklch, var(--color-base-content) 65%, white);
  }
}

[data-theme="acid"] {
  --accent: var(--color-accent);
  --accent-foreground: var(--color-accent-content);
  --destructive: var(--color-error);
  --border: var(--color-base-300);
  --input: var(--color-base-300);
  --ring: var(--color-primary);
  --chart-1: var(--color-primary);
  --chart-2: var(--color-secondary);
  --chart-3: var(--color-accent);
  --chart-4: var(--color-info);
  --chart-5: var(--color-neutral);
  --radius: var(--radius-box);
  --sidebar: var(--color-base-200);
  --sidebar-foreground: var(--color-base-content);
  --sidebar-primary: var(--color-primary);
  --sidebar-primary-foreground: var(--color-primary-content);
  --sidebar-accent: var(--color-accent);
  --sidebar-accent-foreground: var(--color-accent-content);
  --sidebar-border: var(--color-base-300);
  --sidebar-ring: var(--color-primary);
  --homepage-page-background: var(--background);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="acid"] {
    --homepage-page-background: color-mix(in oklch, var(--background) 92%, var(--warning) 8%);
  }
}

[data-theme="acid"] {
  --homepage-page-glow: var(--warning);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="acid"] {
    --homepage-page-glow: color-mix(in oklch, var(--warning) 26%, transparent);
  }
}

[data-theme="acid"] {
  --homepage-page-guide: var(--border);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="acid"] {
    --homepage-page-guide: color-mix(in oklch, var(--border) 90%, transparent);
  }
}

[data-theme="acid"] {
  --homepage-panel-surface: var(--card);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="acid"] {
    --homepage-panel-surface: color-mix(in oklch, var(--card) 88%, var(--warning) 12%);
  }
}

[data-theme="acid"] {
  --homepage-panel-border: var(--border);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="acid"] {
    --homepage-panel-border: color-mix(in oklch, var(--border) 88%, var(--warning) 12%);
  }
}

[data-theme="acid"] {
  --homepage-hero-background-start: var(--color-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="acid"] {
    --homepage-hero-background-start: color-mix(in oklch, var(--color-primary) 16%, white);
  }
}

[data-theme="acid"] {
  --homepage-hero-background-end: var(--color-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="acid"] {
    --homepage-hero-background-end: color-mix(in oklch, var(--color-secondary) 20%, white);
  }
}

[data-theme="acid"] {
  --homepage-hero-background-glow: var(--color-primary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="acid"] {
    --homepage-hero-background-glow: color-mix(in oklch, var(--color-primary) 36%, transparent);
  }
}

[data-theme="acid"] {
  --homepage-hero-accent: var(--color-primary);
  --homepage-hero-subtitle: var(--color-base-content);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="acid"] {
    --homepage-hero-subtitle: color-mix(in oklch, var(--color-base-content) 60%, white);
  }
}

[data-theme="acid"] {
  --homepage-composer-surface: var(--color-base-100);
  --homepage-composer-border: var(--color-base-300);
  --homepage-composer-shadow: 0 35px 90px var(--color-primary), 0 12px 30px var(--color-secondary);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="acid"] {
    --homepage-composer-shadow: 0 35px 90px color-mix(in oklch, var(--color-primary) 22%, transparent), 0 12px 30px color-mix(in oklch, var(--color-secondary) 20%, transparent);
  }
}

[data-theme="acid"] {
  --homepage-composer-control-icon: var(--color-base-content);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="acid"] {
    --homepage-composer-control-icon: color-mix(in oklch, var(--color-base-content) 76%, white);
  }
}

[data-theme="acid"] {
  --homepage-submit-bg: var(--color-base-content);
  --homepage-submit-bg-hover: var(--color-base-content);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="acid"] {
    --homepage-submit-bg-hover: color-mix(in oklch, var(--color-base-content) 82%, white);
  }
}

[data-theme="acid"] {
  --homepage-submit-fg: var(--color-base-100);
  --homepage-section-surface: var(--homepage-panel-surface);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="acid"] {
    --homepage-section-surface: color-mix(in oklch, var(--homepage-panel-surface) 92%, transparent);
  }
}

[data-theme="acid"] {
  --homepage-section-border: var(--homepage-panel-border);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="acid"] {
    --homepage-section-border: color-mix(in oklch, var(--homepage-panel-border) 88%, transparent);
  }
}

[data-theme="acid"] {
  --homepage-section-muted: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="acid"] {
    --homepage-section-muted: color-mix(in oklch, var(--foreground) 68%, transparent);
  }
}

[data-theme="acid"] {
  --ui-surface-soft: var(--card);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="acid"] {
    --ui-surface-soft: color-mix(in oklch, var(--card) 88%, var(--muted) 12%);
  }
}

[data-theme="acid"] {
  --ui-surface-soft-hover: var(--card);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="acid"] {
    --ui-surface-soft-hover: color-mix(in oklch, var(--card) 78%, var(--muted) 22%);
  }
}

[data-theme="acid"] {
  --ui-surface-elevated: var(--card);
  --ui-border-soft: var(--border);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="acid"] {
    --ui-border-soft: color-mix(in oklch, var(--border) 86%, transparent);
  }
}

[data-theme="acid"] {
  --ui-border-strong: var(--foreground);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="acid"] {
    --ui-border-strong: color-mix(in oklch, var(--foreground) 10%, var(--border));
  }
}

[data-theme="acid"] {
  --ui-focus-ring: var(--ring);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-theme="acid"] {
    --ui-focus-ring: color-mix(in oklch, var(--ring) 24%, transparent);
  }
}

[data-theme="acid"] {
  --ui-shadow-soft: none;
  --ui-shadow-elevated: none;
}

@keyframes guided-course-transition-root-out {
  0% {
    opacity: 1;
    filter: blur();
    transform: translateY(0)scale(1);
  }

  to {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(-.75rem)scale(.985);
  }
}

@keyframes guided-course-transition-root-in {
  0% {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(1rem)scale(.99);
  }

  to {
    opacity: 1;
    filter: blur();
    transform: translateY(0)scale(1);
  }
}

@keyframes guided-course-transition-fan-out-left {
  0% {
    opacity: 1;
    filter: blur();
    transform: translate(0)rotate(0)scale(1);
  }

  to {
    opacity: 0;
    filter: blur(12px);
    transform: translate(-4.5rem, -2.5rem)rotate(-5deg)scale(.92);
  }
}

@keyframes guided-course-transition-fan-out-right {
  0% {
    opacity: 1;
    filter: blur();
    transform: translate(0)rotate(0)scale(1);
  }

  to {
    opacity: 0;
    filter: blur(12px);
    transform: translate(4rem, -1.75rem)rotate(4deg)scale(.94);
  }
}

@keyframes guided-course-transition-fan-out-down {
  0% {
    opacity: 1;
    filter: blur();
    transform: translate(0)scale(1);
  }

  to {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(2.5rem)scale(.98);
  }
}

@keyframes guided-course-transition-fan-in-down {
  0% {
    opacity: 0;
    filter: blur(14px);
    transform: translateY(-2rem)scale(.94);
  }

  to {
    opacity: 1;
    filter: blur();
    transform: translate(0)scale(1);
  }
}

@keyframes guided-course-transition-fan-in-up {
  0% {
    opacity: 0;
    filter: blur(14px);
    transform: translateY(2rem)scale(.95);
  }

  to {
    opacity: 1;
    filter: blur();
    transform: translate(0)scale(1);
  }
}

html[data-guided-course-transition="landing-to-guided-course"]::view-transition-old(root) {
  animation: .54s cubic-bezier(.32, 0, .67, 0) both guided-course-transition-root-out;
}

html[data-guided-course-transition="landing-to-guided-course"]::view-transition-new(root) {
  animation: .62s cubic-bezier(.16, 1, .3, 1) 80ms both guided-course-transition-root-in;
}

html[data-guided-course-transition="landing-to-guided-course"]::view-transition-group(guided-course-shell-surface) {
  animation-duration: .68s;
  animation-timing-function: cubic-bezier(.2, .85, .25, 1);
}

html[data-guided-course-transition="landing-to-guided-course"]::view-transition-group(guided-course-composer-container) {
  animation-duration: .68s;
  animation-timing-function: cubic-bezier(.2, .85, .25, 1);
}

html[data-guided-course-transition="landing-to-guided-course"]::view-transition-group(guided-course-prompt-field) {
  animation-duration: .68s;
  animation-timing-function: cubic-bezier(.2, .85, .25, 1);
}

html[data-guided-course-transition="landing-to-guided-course"]::view-transition-group(guided-course-submit-cta) {
  animation-duration: .68s;
  animation-timing-function: cubic-bezier(.2, .85, .25, 1);
}

html[data-guided-course-transition="landing-to-guided-course"]::view-transition-group(guided-course-prompt-field) {
  z-index: 2;
}

html[data-guided-course-transition="landing-to-guided-course"]::view-transition-group(guided-course-submit-cta) {
  z-index: 2;
}

html[data-guided-course-transition="landing-to-guided-course"]::view-transition-group(guided-course-composer-container) {
  z-index: 2;
}

html[data-guided-course-transition="landing-to-guided-course"]::view-transition-old(guided-course-landing-header-stage) {
  transform-origin: top;
  animation: .42s cubic-bezier(.4, 0, 1, 1) both guided-course-transition-fan-out-left;
}

html[data-guided-course-transition="landing-to-guided-course"]::view-transition-old(guided-course-landing-hero-copy) {
  transform-origin: 50%;
  animation: .46s cubic-bezier(.4, 0, 1, 1) 30ms both guided-course-transition-fan-out-right;
}

html[data-guided-course-transition="landing-to-guided-course"]::view-transition-old(guided-course-landing-helper-note) {
  animation: .42s cubic-bezier(.4, 0, 1, 1) both guided-course-transition-fan-out-down;
}

html[data-guided-course-transition="landing-to-guided-course"]::view-transition-old(guided-course-landing-post-hero) {
  animation: .42s cubic-bezier(.4, 0, 1, 1) both guided-course-transition-fan-out-down;
}

html[data-guided-course-transition="landing-to-guided-course"]::view-transition-new(guided-course-header) {
  transform-origin: top;
  animation: .46s cubic-bezier(.16, 1, .3, 1) .12s both guided-course-transition-fan-in-down;
}

html[data-guided-course-transition="landing-to-guided-course"]::view-transition-new(guided-course-progress) {
  transform-origin: 50%;
  animation: .44s cubic-bezier(.16, 1, .3, 1) .16s both guided-course-transition-fan-in-down;
}

html[data-guided-course-transition="landing-to-guided-course"]::view-transition-new(guided-course-entry-header) {
  transform-origin: top;
  animation: .52s cubic-bezier(.16, 1, .3, 1) .18s both guided-course-transition-fan-in-down;
}

html[data-guided-course-transition="landing-to-guided-course"]::view-transition-new(guided-course-entry-context) {
  transform-origin: 50%;
}

html[data-guided-course-transition="landing-to-guided-course"]::view-transition-new(guided-course-entry-context) {
  animation: .52s cubic-bezier(.16, 1, .3, 1) .22s both guided-course-transition-fan-in-up;
}

html[data-guided-course-transition="landing-to-guided-course"]::view-transition-new(guided-course-footer) {
  transform-origin: 50%;
}

html[data-guided-course-transition="landing-to-guided-course"]::view-transition-new(guided-course-footer) {
  animation: .52s cubic-bezier(.16, 1, .3, 1) .22s both guided-course-transition-fan-in-up;
}

@media (prefers-reduced-motion: reduce) {
  html[data-guided-course-transition="landing-to-guided-course"]::view-transition-old(root) {
    filter: none;
    animation-duration: 1ms;
    animation-delay: 0s;
  }

  html[data-guided-course-transition="landing-to-guided-course"]::view-transition-new(root) {
    filter: none;
    animation-duration: 1ms;
    animation-delay: 0s;
  }

  html[data-guided-course-transition="landing-to-guided-course"]::view-transition-old(guided-course-landing-header-stage) {
    filter: none;
    animation-duration: 1ms;
    animation-delay: 0s;
  }

  html[data-guided-course-transition="landing-to-guided-course"]::view-transition-old(guided-course-landing-hero-copy) {
    filter: none;
    animation-duration: 1ms;
    animation-delay: 0s;
  }

  html[data-guided-course-transition="landing-to-guided-course"]::view-transition-old(guided-course-landing-helper-note) {
    filter: none;
    animation-duration: 1ms;
    animation-delay: 0s;
  }

  html[data-guided-course-transition="landing-to-guided-course"]::view-transition-old(guided-course-landing-post-hero) {
    filter: none;
    animation-duration: 1ms;
    animation-delay: 0s;
  }

  html[data-guided-course-transition="landing-to-guided-course"]::view-transition-new(guided-course-header) {
    filter: none;
    animation-duration: 1ms;
    animation-delay: 0s;
  }

  html[data-guided-course-transition="landing-to-guided-course"]::view-transition-new(guided-course-progress) {
    filter: none;
    animation-duration: 1ms;
    animation-delay: 0s;
  }

  html[data-guided-course-transition="landing-to-guided-course"]::view-transition-new(guided-course-entry-header) {
    filter: none;
    animation-duration: 1ms;
    animation-delay: 0s;
  }

  html[data-guided-course-transition="landing-to-guided-course"]::view-transition-new(guided-course-entry-context) {
    filter: none;
    animation-duration: 1ms;
    animation-delay: 0s;
  }

  html[data-guided-course-transition="landing-to-guided-course"]::view-transition-new(guided-course-footer) {
    filter: none;
    animation-duration: 1ms;
    animation-delay: 0s;
  }

  html[data-guided-course-transition="landing-to-guided-course"]::view-transition-group(guided-course-shell-surface) {
    animation-duration: 1ms;
  }

  html[data-guided-course-transition="landing-to-guided-course"]::view-transition-group(guided-course-composer-container) {
    animation-duration: 1ms;
  }

  html[data-guided-course-transition="landing-to-guided-course"]::view-transition-group(guided-course-prompt-field) {
    animation-duration: 1ms;
  }

  html[data-guided-course-transition="landing-to-guided-course"]::view-transition-group(guided-course-submit-cta) {
    animation-duration: 1ms;
  }
}

@keyframes guided-course-pulse {
  0%, 80%, to {
    opacity: .3;
    transform: scale(.9);
  }

  40% {
    opacity: 1;
    transform: scale(1);
  }
}

[data-zone="landing"] {
  --l-warm: #ffe6cc;
  --l-pink: #fbcfe8;
  --l-mint: #d5efdf;
  --l-ink: var(--ink);
  --l-ink-2: #2c2a26;
  --l-muted: #6b6864;
  --l-muted-2: #9b9893;
  --l-bg: #f8f3eb;
  --l-bg-2: #f2eee6;
  --l-line: #0f0e0c1a;
  --l-line-2: #0f0e0c0f;
  --l-accent: var(--brand-indigo);
  --l-accent-soft: #eef0ff;
  --l-accent-ink: #3730a3;
  --homepage-page-background: #f8f5f0;
  --homepage-page-glow: #3d5bff24;
  --homepage-page-guide: #3d5bff0f;
  --homepage-panel-surface: #ffffffeb;
  --homepage-panel-border: #0000000f;
  --homepage-hero-background-start: #f8f5f0;
  --homepage-hero-background-end: #f2ede6;
  --homepage-hero-background-glow: #3d5bff38;
  --homepage-hero-accent: var(--brand-indigo);
  --homepage-hero-subtitle: #21212166;
  --homepage-composer-surface: #ffffffbf;
  --homepage-composer-border: #0000000d;
  --homepage-composer-shadow: inset 0 1px .5px #fff, inset 0 -.5px .5px #0000000d;
  --homepage-composer-control-icon: #212121;
  --homepage-submit-bg: var(--brand-indigo);
  --homepage-submit-bg-hover: #4338ca;
  --homepage-submit-fg: #fff;
  --homepage-pill-bg: #ececec;
  --homepage-pill-bg-hover: #e0e0e0;
  --homepage-card-bg: #f3f3f3;
  --homepage-section-surface: #fffffff0;
  --homepage-section-border: #0000000f;
  --homepage-section-muted: #212121b3;
  background: var(--l-bg);
  color: var(--l-ink);
  font-family: var(--font-hanken), "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html:has([data-zone="landing"]) {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html:has([data-zone="landing"]) {
    scroll-behavior: auto;
  }
}

.l-grad-text {
  color: #0000;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(100deg, #f0965a, #e0479e 55%, #9678eb);
  -webkit-background-clip: text;
  background-clip: text;
}

.l-aurora {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.l-aurora--page {
  height: 1120px;
  inset: 0 0 auto;
  overflow: clip;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 280px), #0000);
  mask-image: linear-gradient(#000 calc(100% - 280px), #0000);
}

.l-aurora--page .l-aurora-3 {
  top: 720px;
  bottom: auto;
}

@media (max-width: 900px) {
  .l-aurora--page {
    height: 980px;
  }
}

.l-aurora i {
  filter: blur(80px);
  opacity: .5;
  border-radius: 50%;
  position: absolute;
}

.l-aurora .l-aurora-1 {
  background: #f0965a;
  width: 620px;
  height: 420px;
  animation: 12s ease-in-out infinite alternate l-drift;
  top: -160px;
  left: -160px;
}

.l-aurora .l-aurora-2 {
  background: #9678eb;
  width: 680px;
  height: 460px;
  animation: 14s ease-in-out infinite alternate-reverse l-drift;
  top: -120px;
  right: -200px;
}

.l-aurora .l-aurora-3 {
  opacity: .32;
  background: #e0479e;
  width: 560px;
  height: 380px;
  animation: 16s ease-in-out infinite alternate l-drift;
  bottom: -260px;
  left: 32%;
}

.l-aurora--dark i {
  opacity: .4;
}

.l-aurora--dark .l-aurora-3 {
  opacity: .26;
}

@keyframes l-drift {
  0% {
    transform: translate(0)scale(1);
  }

  to {
    transform: translate(44px, 26px)scale(1.1);
  }
}

.l-type-caret {
  background: var(--l-accent);
  vertical-align: text-bottom;
  width: 2px;
  height: 1.1em;
  animation: 1s step-end infinite l-blink;
  display: inline-block;
}

@keyframes l-blink {
  50% {
    opacity: 0;
  }
}

.l-composer {
  background: #fff;
  border: 1px solid #0000;
  border-radius: 24px;
  transition: box-shadow .2s;
  position: relative;
  box-shadow: 0 24px 70px -18px #e0479e66, 0 0 90px -20px #9678eb8c, 0 2px 8px -3px #1a285a12;
}

.l-composer:before {
  content: "";
  -webkit-mask-composite: xor;
  pointer-events: none;
  -webkit-mask-composite: xor;
  -webkit-mask-source-type: auto, auto;
  -webkit-mask-composite: xor;
  -webkit-mask-source-type: auto, auto;
  background: conic-gradient(from 120deg, #f0965a, #e0479e 30%, #9678eb 55%, #3d5bff 75%, #f0965a);
  border-radius: 26.5px;
  padding: 2.5px;
  position: absolute;
  inset: -2.5px;
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-position: 0 0, 0 0;
  mask-position: 0 0, 0 0;
  -webkit-mask-size: auto, auto;
  mask-size: auto, auto;
  -webkit-mask-repeat: repeat, repeat;
  mask-repeat: repeat, repeat;
  -webkit-mask-clip: content-box, border-box;
  mask-clip: content-box, border-box;
  -webkit-mask-origin: content-box, border-box;
  mask-origin: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-source-type: auto, auto;
  mask-mode: match-source, match-source;
}

.l-composer:focus-within {
  box-shadow: 0 24px 80px -16px #e0479e85, 0 0 110px -18px #9678ebad, 0 2px 8px -3px #1a285a12;
}

.l-composer-icon {
  border: 1px solid var(--l-line);
  width: 38px;
  height: 38px;
  color: var(--l-muted-2);
  cursor: pointer;
  background: #fff;
  border-radius: 50%;
  flex: none;
  place-items: center;
  transition: all .12s;
  display: grid;
}

.l-composer-icon:hover {
  border-color: var(--l-accent);
  color: var(--l-accent);
}

.l-composer-icon:focus-visible {
  border-color: var(--l-accent);
  box-shadow: 0 0 0 3px var(--l-accent);
  outline: none;
}

@supports (color: color-mix(in lab, red, red)) {
  .l-composer-icon:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--l-accent) 28%, transparent);
  }
}

.l-composer-send:focus-visible {
  box-shadow: 0 0 0 3px var(--l-accent);
  outline: none;
}

@supports (color: color-mix(in lab, red, red)) {
  .l-composer-send:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--l-accent) 35%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .l-aurora i, .l-type-caret {
    animation: none;
  }
}

.l-bg-blobs {
  opacity: var(--bg-blobs-opacity, 1);
  transition: opacity .4s ease-out;
}

.l-bg-wash {
  opacity: var(--bg-wash-opacity, 0);
  transition: opacity .4s ease-out;
}

.l-blob {
  filter: blur(120px);
  border-radius: 50%;
  position: absolute;
}

.l-blob-1 {
  opacity: 1;
  background: radial-gradient(circle, #93c5fd 0%, #93c5fd00 70%);
  width: 820px;
  height: 700px;
  top: -200px;
  right: -160px;
}

.l-blob-2 {
  opacity: .95;
  background: radial-gradient(circle, #bbe5c7 0%, #bbe5c700 70%);
  width: 720px;
  height: 640px;
  top: -120px;
  left: -180px;
}

.l-blob-3 {
  opacity: .9;
  background: radial-gradient(circle, #fcd34d 0%, #fcd34d00 65%);
  width: 760px;
  height: 700px;
  top: 180px;
  left: -60px;
}

.l-blob-4 {
  opacity: .85;
  background: radial-gradient(circle, #fba570 0%, #fba57000 65%);
  width: 820px;
  height: 700px;
  top: 360px;
  left: 30%;
}

.l-blob-coral {
  opacity: .75;
  background: radial-gradient(circle, #f87171 0%, #f8717100 65%);
  width: 760px;
  height: 660px;
  top: 480px;
  left: 8%;
}

.l-blob-5 {
  opacity: .8;
  background: radial-gradient(circle, #f9a8d4 0%, #f9a8d400 65%);
  width: 1100px;
  height: 720px;
  top: 640px;
  left: 15%;
}

.l-dot {
  background: #22c55e;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  animation: 2.4s ease-in-out infinite l-pulse;
  display: inline-block;
  box-shadow: 0 0 0 3px #22c55e2e;
}

@keyframes l-pulse {
  0%, to {
    box-shadow: 0 0 0 3px #22c55e2e;
  }

  50% {
    box-shadow: 0 0 0 6px #22c55e0d;
  }
}

.l-stat-num em {
  color: #0000;
  background: linear-gradient(92deg, #a855f7, #ec4899, #f97316);
  -webkit-background-clip: text;
  background-clip: text;
  font-style: normal;
}

.l-feature-card {
  transition: transform .2s, box-shadow .2s;
}

.l-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -16px #0000001f;
}

.l-feature-vis-photo img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
}

.l-swipe-card:first-child {
  opacity: .7;
  transform: rotate(-7deg)translate(-30px)translateY(8px);
}

.l-swipe-card:nth-child(2) {
  transform: rotate(4deg)translate(20px)translateY(-4px);
}

.l-swipe-card:nth-child(3) {
  z-index: 2;
  transform: rotate(-1deg);
}

.l-lang-1 {
  --l-float-delay: -.4s;
  top: 24px;
  left: 140px;
}

.l-lang-2 {
  --l-float-delay: -2.3s;
  top: 64px;
  left: 218px;
}

.l-lang-3 {
  --l-float-delay: -1.1s;
  top: 140px;
  left: 246px;
}

.l-lang-4 {
  --l-float-delay: -3.7s;
  top: 216px;
  left: 218px;
}

.l-lang-5 {
  --l-float-delay: -1.9s;
  top: 256px;
  left: 140px;
}

.l-lang-6 {
  --l-float-delay: -3.1s;
  top: 216px;
  left: 62px;
}

.l-lang-7 {
  --l-float-delay: -4.4s;
  top: 140px;
  left: 34px;
}

.l-lang-8 {
  --l-float-delay: -2.7s;
  top: 64px;
  left: 62px;
}

.l-lang-9 {
  top: 292px;
  left: 140px;
}

.l-lang-orbit {
  flex-shrink: 0;
  width: 280px;
  height: 280px;
  position: relative;
}

@media (max-width: 360px) {
  .l-lang-orbit {
    transform: scale(.82);
  }
}

.l-lang-ring {
  border: 1.5px dashed #0f0e0c29;
  border-radius: 50%;
  animation: 90s linear infinite l-ring-spin;
  position: absolute;
  inset: 30px;
}

.l-lang-orbit:before, .l-lang-orbit:after {
  content: "";
  opacity: 0;
  border: 1.5px solid #3d5bff66;
  border-radius: 50%;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  animation: 4.4s cubic-bezier(.22, .61, .36, 1) infinite l-lang-pulse;
  position: absolute;
  top: 50%;
  left: 50%;
}

.l-lang-orbit:after {
  animation-delay: 2.2s;
}

.l-lang-hub {
  z-index: 2;
  background: var(--l-ink);
  color: #fff;
  width: 88px;
  height: 88px;
  font-family: var(--font-urbanist), "Urbanist", sans-serif;
  border-radius: 50%;
  place-items: center;
  font-size: 16px;
  font-weight: 600;
  display: grid;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 12px 32px -8px #0003;
}

.l-lang-pill {
  border: 1px solid var(--l-line);
  color: var(--l-ink);
  white-space: nowrap;
  animation: 5.6s ease-in-out infinite l-lang-float;
  animation-delay: var(--l-float-delay, 0s);
  background: #fff;
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  padding: 5px 14px 5px 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  display: inline-flex;
  position: absolute;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 12px -3px #0000001a;
}

.l-lang-flag {
  border-radius: 50%;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  box-shadow: 0 0 0 1px #0f0e0c14;
}

.l-lang-more-flags {
  display: inline-flex;
}

.l-lang-flag--mini {
  width: 14px;
  height: 14px;
  box-shadow: 0 0 0 1.5px #fff;
}

.l-lang-more-flags .l-lang-flag--mini + .l-lang-flag--mini {
  margin-left: -5px;
}

.l-lang-pill--source {
  background: var(--l-accent-soft);
  color: var(--l-accent-ink);
  border-color: #0000;
}

.l-lang-tag {
  font-family: var(--font-geist-mono, "JetBrains Mono"), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .8;
  font-size: 10px;
  font-weight: 600;
}

.l-lang-pill--more {
  color: var(--l-muted);
  box-shadow: none;
  background: none;
  border-style: dashed;
  animation: none;
}

@keyframes l-lang-float {
  0%, to {
    transform: translate(-50%, -50%);
  }

  50% {
    transform: translate(-50%, calc(-50% - 5px));
  }
}

@keyframes l-lang-pulse {
  0% {
    opacity: 0;
    transform: scale(.92);
  }

  14% {
    opacity: .5;
  }

  to {
    opacity: 0;
    transform: scale(2.75);
  }
}

@keyframes l-ring-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .l-lang-ring, .l-lang-pill, .l-lang-orbit:before, .l-lang-orbit:after {
    animation: none;
  }
}

.l-editor-frame {
  box-shadow: inset 0 1px #fff9, 0 28px 60px -28px #0f0e0c47, 0 8px 20px -10px #0f0e0c1f;
}

.l-editor-frame:before {
  content: "";
  z-index: -1;
  filter: blur(20px);
  background: radial-gradient(60% 100% at 50% 0, #a855f72e, #ec48991a 40%, #0000 70%);
  height: 60%;
  position: absolute;
  inset: -40% -10% auto;
}

.l-faq-icon:before, .l-faq-icon:after {
  content: "";
  background: var(--l-muted);
  border-radius: 1px;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  position: absolute;
  top: 50%;
  left: 50%;
}

.l-faq-icon:before {
  width: 12px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

.l-faq-icon:after {
  width: 1.5px;
  height: 12px;
  transform: translate(-50%, -50%)rotate(0);
}

.l-faq-icon[data-open]:after {
  transform: translate(-50%, -50%)rotate(90deg);
}

.l-faq-body {
  height: 0;
  transition: height .3s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
}

.l-final-cta:before {
  content: "";
  pointer-events: none;
  background: radial-gradient(circle, #a855f740, #0000 60%);
  width: 400px;
  height: 400px;
  position: absolute;
  top: -100px;
  left: -100px;
}

.l-final-cta:after {
  content: "";
  pointer-events: none;
  background: radial-gradient(circle, #f9731638, #0000 60%);
  width: 400px;
  height: 400px;
  position: absolute;
  bottom: -100px;
  right: -100px;
}

.l-cta-main {
  box-shadow: 0 14px 32px -10px #0f0e0c59, 0 2px 6px -1px #0000000f;
}

.l-cta-main:hover {
  transform: translateY(-2px);
}

.l-waitlist-perk {
  background: linear-gradient(92deg, #a855f714, #ec489914, #f9731614);
}

@media (max-width: 900px) {
  .l-nav-links, .l-nav-built {
    display: none;
  }
}

.dark .homepage-composer-force-light {
  --card: #fff;
  --foreground: #0a0a0a;
  --homepage-composer-surface: #ffffffbf;
  --homepage-composer-border: #0000000d;
  --homepage-composer-shadow: inset 0 1px .5px #fff, inset 0 -.5px .5px #0000000d;
  --homepage-composer-control-icon: #212121;
  --homepage-hero-accent: var(--brand-indigo);
  --homepage-submit-bg: var(--brand-indigo);
  --homepage-submit-bg-hover: #4338ca;
}

@supports (color: lab(0% 0 0)) {
  .dark .homepage-composer-force-light {
    --card: lab(100% 0 0);
    --foreground: lab(2.75381% 0 0);
  }
}

.dark .force-light-surface {
  --background: #fff;
  --foreground: #0a0a0a;
  --card: #fff;
  --card-foreground: #0a0a0a;
  --popover: #fff;
  --popover-foreground: #0a0a0a;
  --primary: var(--brand-indigo);
  --primary-foreground: #fff;
  --secondary: #f4f4f5;
  --secondary-foreground: #18181b;
  --muted: #f5f5f5;
  --muted-foreground: #484848;
  --accent: #e5f0fc;
  --accent-foreground: #171717;
  --destructive: #df2225;
  --border: #e5e5e5;
  --input: #e5e5e5;
  --ring: var(--brand-indigo);
  --ui-surface-soft: #fefefe;
  --ui-surface-soft-hover: #fdfdfd;
  --ui-surface-elevated: #fff;
  --ui-border-soft: #e5e5e5d6;
  --ui-border-strong: #d1d1d1;
  --ui-focus-ring: var(--brand-indigo);
}

@supports (color: lab(0% 0 0)) {
  .dark .force-light-surface {
    --background: lab(100% 0 0);
    --foreground: lab(2.75381% 0 0);
    --card: lab(100% 0 0);
    --card-foreground: lab(2.75381% 0 0);
    --popover: lab(100% 0 0);
    --popover-foreground: lab(2.75381% 0 0);
    --secondary: lab(96.1634% .0993311 -.364041);
    --secondary-foreground: lab(8.30603% .618205 -2.16572);
    --muted: lab(96.52% -.0000298023 .0000119209);
    --muted-foreground: lab(30.4% -.0000149012 0);
    --accent: lab(94.18% -2.12187 -7.1074);
    --accent-foreground: lab(7.78201% -.0000149012 0);
    --destructive: lab(49.0747% 69.3434 49.6251);
    --border: lab(90.952% 0 -.0000119209);
    --input: lab(90.952% 0 -.0000119209);
    --ui-surface-soft: lab(99.652% 0 0);
    --ui-surface-soft-hover: lab(99.3736% -.0000298023 0);
    --ui-surface-elevated: lab(100% 0 0);
    --ui-border-soft: lab(90.952% 0 -.0000119209 / .84);
    --ui-border-strong: lab(83.7414% 0 0);
  }
}

@supports (color: color-mix(in lab, red, red)) {
  .dark .force-light-surface {
    --ui-focus-ring: color-mix(in oklch, var(--brand-indigo) 22%, transparent);
  }
}

.dark .force-light-surface {
  --homepage-hero-accent: var(--brand-indigo);
  --homepage-submit-bg: var(--brand-indigo);
  --homepage-submit-bg-hover: #4338ca;
  --homepage-section-border: #0000000f;
  color: #0a0a0a;
  color: lab(2.75381% 0 0);
}

.auth-shell {
  --primary: var(--brand-indigo);
  --ring: var(--brand-indigo);
  --ui-focus-ring: var(--brand-indigo);
}

@supports (color: color-mix(in lab, red, red)) {
  .auth-shell {
    --ui-focus-ring: color-mix(in srgb, var(--brand-indigo) 12%, transparent);
  }
}

.auth-shell {
  --homepage-hero-accent: var(--brand-indigo);
  --homepage-submit-bg: var(--brand-indigo);
  --homepage-submit-bg-hover: #4338ca;
  background: var(--l-bg);
}

.auth-shell-logo {
  color: var(--l-ink);
}

.auth-shell-logo:focus-visible {
  outline: 2px solid var(--l-ink);
  outline-offset: 4px;
}

.auth-card [data-slot="field-label"] {
  letter-spacing: -.005em;
  color: var(--foreground);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
}

.auth-card [data-slot="input"] {
  border: 1px solid var(--line-strong);
  height: 2.75rem;
  box-shadow: none;
  color: var(--foreground);
  background: #fff;
  border-radius: .625rem;
  padding: 0 .875rem;
  font-size: .875rem;
}

.auth-card [data-slot="input"]::placeholder {
  color: var(--muted-foreground);
}

.auth-card [data-slot="input"]:hover {
  border-color: #0f0e0c38;
}

.auth-card [data-slot="input"]:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px var(--ui-focus-ring);
  outline: none;
}

.auth-card [data-slot="button"] {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  border-radius: .625rem;
}

.auth-card [data-slot="button"]:hover:not(:disabled) {
  background: #1d1c19;
  border-color: #1d1c19;
}

.auth-card [data-slot="button"]:disabled {
  color: #0f0e0c59;
  background: #0f0e0c1f;
  border-color: #0000;
}

.auth-card [data-slot="button"]:focus-visible {
  box-shadow: 0 0 0 2px #fafaf7, 0 0 0 4px var(--brand-indigo);
  border-color: var(--ink);
}

.auth-shell [data-slot="card"] {
  border-radius: 1.25rem;
  padding-block: 1.125rem;
}

.auth-shell [data-slot="card"][data-size="sm"] [data-slot="card-header"] {
  padding-inline: 1.125rem;
}

.auth-card [data-slot="checkbox"] {
  border-color: var(--line-strong);
  border-radius: .25rem;
  width: 1.15rem;
  height: 1.15rem;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}

.auth-card [data-slot="checkbox"]:hover:not([data-state="checked"]):not([data-state="indeterminate"]) {
  border-color: #0f0e0c38;
}

.auth-card [data-slot="checkbox"][data-state="checked"], .auth-card [data-slot="checkbox"][data-state="indeterminate"] {
  border-color: var(--brand-indigo);
  background: var(--brand-indigo);
}

.auth-card [data-slot="checkbox"]:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

.auth-card [data-slot="checkbox-indicator"] > svg {
  stroke-width: 2.75px;
  width: .8125rem;
  height: .8125rem;
}

[data-zone="landing"] {
  isolation: isolate;
  min-height: 100vh;
}

[data-zone="landing"] .saga5-visually-hidden {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

[data-zone="landing"] {
  --ink: #0f0e0c;
  --ink-2: #2c2a26;
  --muted: #6b6864;
  --muted-2: #9b9893;
  --bg: #faf9f7;
  --bg-2: #f3f1ee;
  --line: #0f0e0c1a;
  --line-2: #0f0e0c0f;
  --accent: #4f46e5;
  --accent-soft: #eef0ff;
  --accent-ink: #3730a3;
  --warm: #ffe6cc;
  --pink: #fbcfe8;
  --mint: #d5efdf;
  --lilac: #e0e7ff;
  --saga5-violet: #a855f7;
  --saga5-pink: #ec4899;
  --saga5-orange: #f97316;
  --saga5-amber: #f59e0b;
  --saga5-indigo: var(--accent);
}

[data-zone="landing"] * {
  box-sizing: border-box;
}

[data-zone="landing"] {
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
  font-family: Avenir Next, Helvetica Neue, Segoe UI, Arial, sans-serif;
  overflow-x: hidden;
}

[data-zone="landing"] ::selection {
  color: var(--ink);
  background: #fed7aa;
}

[data-zone="landing"] .saga5-blobs {
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(at 8% 0, #f0965a61, #0000 62%), radial-gradient(at 92% 0, #9678eb66, #0000 62%);
  height: 640px;
  position: absolute;
  inset: 0 0 auto;
  -webkit-mask-image: linear-gradient(#000 0% 20%, #0000 100%);
  mask-image: linear-gradient(#000 0% 20%, #0000 100%);
}

[data-zone="landing"] nav.top {
  z-index: 30;
  -webkit-backdrop-filter: blur(20px);
  background: #ffffffdb;
  border: 1px solid #5b46711a;
  border-radius: 20px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: calc(100% - 28px);
  max-width: 1180px;
  min-height: 66px;
  margin: 14px auto 0;
  padding: 12px 16px 12px 24px;
  display: flex;
  position: sticky;
  top: 14px;
  box-shadow: 0 8px 28px -16px #36234a2e, inset 0 1px #fff;
}

[data-zone="landing"] .top-l {
  align-items: center;
  gap: 36px;
  display: flex;
}

[data-zone="landing"] .brand {
  color: var(--ink);
  align-items: center;
  gap: 10px;
  text-decoration: none;
  display: flex;
}

[data-zone="landing"] .brand img {
  width: auto;
  height: 32px;
}

[data-zone="landing"] .nav-links {
  gap: 4px;
  display: flex;
}

[data-zone="landing"] .nav-links a {
  color: var(--ink-2);
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color .16s, background-color .16s;
}

[data-zone="landing"] .nav-links a:hover {
  color: var(--ink);
  background: #7e60a612;
}

[data-zone="landing"] .nav-built {
  color: var(--muted);
  font-family: JetBrains Mono, monospace;
  font-size: 11px;
}

[data-zone="landing"] .nav-built a {
  color: var(--ink-2);
  border-bottom: .5px solid var(--line);
  text-decoration: none;
}

[data-zone="landing"] .top-r {
  align-items: center;
  gap: 18px;
  display: flex;
}

[data-zone="landing"] .nav-dashboard svg {
  width: 16px;
  height: 16px;
}

[data-zone="landing"] nav.top a:focus-visible {
  outline-offset: 4px;
  outline: 2px solid #8565aa;
}

[data-zone="landing"] nav.top .nav-dashboard {
  border-radius: 11px;
  min-height: 38px;
  padding-inline: 16px;
  box-shadow: 0 3px 8px #24212a12;
}

[data-zone="landing"] .btn {
  color: var(--ink);
  font: inherit;
  border: .5px solid var(--line);
  cursor: pointer;
  white-space: nowrap;
  background: #fff;
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: all .12s;
  display: inline-flex;
}

[data-zone="landing"] .top-r .btn {
  height: 34px;
  padding-block: 0;
}

[data-zone="landing"] .btn:hover {
  background: #f5f2ec;
  transform: translateY(-1px);
}

[data-zone="landing"] .btn-primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

[data-zone="landing"] .btn-primary:hover {
  background: #1d1c19;
}

[data-zone="landing"] .btn-lg {
  padding: 16px 26px;
  font-size: 15px;
  font-weight: 500;
}

[data-zone="landing"] .cta-wrap {
  justify-content: center;
  margin: 0 auto 22px;
  display: flex;
}

[data-zone="landing"] .cta-main {
  box-shadow: 0 14px 32px -10px #0f0e0c59, 0 2px 6px -1px #0000000f;
}

[data-zone="landing"] .cta-main:hover {
  transform: translateY(-2px);
}

[data-zone="landing"] .cta-light {
  color: var(--ink);
  background: #fff;
  border-color: #fff;
}

[data-zone="landing"] .cta-light:hover {
  background: #ffe6cc;
}

[data-zone="landing"] h1, [data-zone="landing"] h2, [data-zone="landing"] h3, [data-zone="landing"] h4 {
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0;
  font-family: Bricolage Grotesque, sans-serif;
  font-weight: 600;
}

[data-zone="landing"] .grad-text {
  color: #0000;
  -webkit-text-fill-color: transparent;
  font-weight: inherit;
  background: linear-gradient(92deg, #a855f7 0%, #ec4899 38%, #f97316 70%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

[data-zone="landing"] main {
  z-index: 1;
  position: relative;
}

[data-zone="landing"] .hero {
  text-align: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 80px 24px 60px;
  position: relative;
}

[data-zone="landing"] .eyebrow {
  border: .5px solid var(--line);
  color: var(--ink-2);
  background: #fff;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  padding: 6px 14px 6px 6px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  box-shadow: 0 2px 10px -4px #0000000f;
}

[data-zone="landing"] .eyebrow-tag {
  background: var(--ink);
  color: #fff;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 10px;
  font-family: JetBrains Mono, monospace;
  font-size: 10.5px;
}

[data-zone="landing"] .eyebrow .dot {
  background: #22c55e;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  animation: 2.4s ease-in-out infinite saga5-pulse;
  display: inline-block;
  box-shadow: 0 0 0 3px #22c55e2e;
}

@keyframes saga5-pulse {
  0%, to {
    box-shadow: 0 0 0 3px #22c55e2e;
  }

  50% {
    box-shadow: 0 0 0 6px #22c55e0d;
  }
}

[data-zone="landing"] h1.hero-title {
  letter-spacing: -.035em;
  text-wrap: balance;
  color: #fff;
  text-shadow: 0 2px 30px #7846be40, 0 1px 3px #7846be1f;
  max-width: 12ch;
  margin: 0 auto 22px;
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 1.02;
}

[data-zone="landing"] .hero-sub {
  color: #ffffffeb;
  text-shadow: 0 1px 14px #7846be47;
  text-wrap: pretty;
  max-width: 580px;
  margin: 0 auto 36px;
  font-size: 18px;
  line-height: 1.55;
}

[data-zone="landing"] .waitlist-card {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: .5px solid var(--line);
  background: #ffffffd9;
  border-radius: 20px;
  max-width: 520px;
  margin: 0 auto;
  padding: 8px;
  box-shadow: 0 14px 40px -16px #0000002e, 0 2px 8px -2px #0000000a;
}

[data-zone="landing"] .waitlist-form {
  align-items: stretch;
  gap: 6px;
  display: flex;
}

[data-zone="landing"] .waitlist-input {
  font: inherit;
  color: var(--ink);
  background: none;
  border: none;
  outline: none;
  flex: 1;
  min-width: 0;
  padding: 14px 18px;
  font-size: 15px;
}

[data-zone="landing"] .waitlist-input::placeholder {
  color: var(--muted-2);
}

[data-zone="landing"] .waitlist-form button {
  background: var(--ink);
  color: #fff;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  border-radius: 14px;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 500;
  transition: all .12s;
  display: inline-flex;
}

[data-zone="landing"] .waitlist-form button:hover {
  background: #1d1c19;
  transform: translateY(-1px);
}

[data-zone="landing"] .waitlist-form button:active {
  transform: translateY(0);
}

[data-zone="landing"] .waitlist-perk {
  color: var(--ink-2);
  background: linear-gradient(92deg, #a855f714, #ec489914, #f9731614);
  border: .5px solid #ec489940;
  border-radius: 999px;
  align-items: center;
  gap: 10px;
  max-width: max-content;
  margin: 18px auto 0;
  padding: 10px 18px 10px 14px;
  font-size: 13px;
  line-height: 1.4;
  display: inline-flex;
}

[data-zone="landing"] .waitlist-perk svg {
  color: #ec4899;
  flex-shrink: 0;
}

[data-zone="landing"] .waitlist-perk strong {
  color: var(--ink);
  font-weight: 600;
}

[data-zone="landing"] .waitlist-meta {
  color: var(--muted);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 12px;
  display: flex;
}

[data-zone="landing"] .waitlist-meta .sep {
  background: var(--muted-2);
  border-radius: 50%;
  width: 3px;
  height: 3px;
}

[data-zone="landing"] .avatars-row {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  display: flex;
}

[data-zone="landing"] .avatars {
  display: flex;
}

[data-zone="landing"] .avatars .avatar {
  border: 2px solid var(--bg);
  color: #fff;
  letter-spacing: -.01em;
  border-radius: 50%;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: -8px;
  font-family: Bricolage Grotesque, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  display: grid;
  position: relative;
}

[data-zone="landing"] .avatars .avatar:first-child {
  margin-left: 0;
}

[data-zone="landing"] .avatars-text {
  color: var(--muted);
  font-size: 13px;
}

[data-zone="landing"] .avatars-text strong {
  color: var(--ink);
  font-weight: 600;
}

[data-zone="landing"] .success {
  text-align: center;
  padding: 28px 18px;
}

[data-zone="landing"] .success-check {
  color: #fff;
  background: linear-gradient(135deg, #86efac, #34d399);
  border-radius: 50%;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  display: grid;
  box-shadow: 0 8px 24px -8px #22c55e66;
}

[data-zone="landing"] .success h3 {
  margin-bottom: 6px;
  font-size: 22px;
}

[data-zone="landing"] .success p {
  color: var(--muted);
  margin: 0 0 14px;
  font-size: 14px;
}

[data-zone="landing"] .success-pos {
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-family: JetBrains Mono, monospace;
  font-size: 13px;
  display: inline-flex;
}

[data-zone="landing"] .hero-mockup {
  perspective: 2000px;
  max-width: 1100px;
  margin: 70px auto 0;
  padding: 0 24px;
}

[data-zone="landing"] .player {
  --wine: #2a0a12;
  --wine-2: #3d0e1b;
  --wine-soft: #f8c4d4;
  --wine-pink-bg: #fbd5e0;
  --wine-pill: #f8c4d4d9;
  border: .5px solid var(--line);
  transform-origin: 50% 100%;
  background: #fff;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transform: rotateX(1.5deg);
  box-shadow: 0 40px 80px -30px #2a0a1247, 0 14px 36px -12px #0000001f;
}

[data-zone="landing"] .player-bar {
  border-bottom: .5px solid var(--line);
  background: #f4f0ea;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  display: flex;
}

[data-zone="landing"] .player-bar .traf {
  gap: 6px;
  display: flex;
}

[data-zone="landing"] .player-bar .traf span {
  background: #00000024;
  border-radius: 50%;
  width: 11px;
  height: 11px;
}

[data-zone="landing"] .player-bar .traf span:first-child {
  background: #ff5f57;
}

[data-zone="landing"] .player-bar .traf span:nth-child(2) {
  background: #febc2e;
}

[data-zone="landing"] .player-bar .traf span:nth-child(3) {
  background: #28c840;
}

[data-zone="landing"] .player-bar .url {
  color: var(--muted);
  border: .5px solid var(--line);
  background: #fff;
  border-radius: 7px;
  flex: 1;
  align-items: center;
  gap: 6px;
  max-width: 460px;
  margin-left: 8px;
  padding: 5px 14px;
  font-family: JetBrains Mono, monospace;
  font-size: 11.5px;
  display: flex;
}

[data-zone="landing"] .player-bar .url .lock {
  border: 1.5px solid var(--muted);
  box-sizing: border-box;
  border-bottom-width: 4px;
  border-radius: 2px 2px 0 0;
  width: 9px;
  height: 9px;
}

[data-zone="landing"] .player-frame {
  background: var(--wine);
  height: 540px;
  position: relative;
  overflow: hidden;
}

[data-zone="landing"] .player-progress {
  z-index: 5;
  gap: 8px;
  display: flex;
  position: absolute;
  top: 18px;
  left: 18px;
}

[data-zone="landing"] .progress-card {
  background: #fff;
  border-radius: 999px;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  display: flex;
  box-shadow: 0 4px 14px -4px #0000001f;
}

[data-zone="landing"] .progress-ring {
  flex: none;
  width: 36px;
  height: 36px;
}

[data-zone="landing"] .progress-text {
  line-height: 1.15;
}

[data-zone="landing"] .progress-title {
  color: var(--ink);
  letter-spacing: -.01em;
  font-size: 11.5px;
  font-weight: 600;
}

[data-zone="landing"] .progress-meta {
  color: var(--muted);
  margin-top: 2px;
  font-size: 10.5px;
}

[data-zone="landing"] .progress-menu {
  cursor: pointer;
  width: 44px;
  height: 44px;
  color: var(--ink);
  background: #fff;
  border: none;
  border-radius: 50%;
  place-items: center;
  display: grid;
  box-shadow: 0 4px 14px -4px #0000001f;
}

[data-zone="landing"] .player-stage {
  width: 100%;
  height: 100%;
  position: relative;
}

[data-zone="landing"] .slide {
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s;
  position: absolute;
  inset: 0;
}

[data-zone="landing"] .slide.active {
  opacity: 1;
  pointer-events: auto;
}

[data-zone="landing"] .slide-intro {
  grid-template-columns: 1fr 1fr;
  display: grid;
}

[data-zone="landing"] .slide-intro-l {
  background: var(--wine);
  color: #fff;
  flex-direction: column;
  justify-content: center;
  padding: 90px 60px 80px;
  display: flex;
}

[data-zone="landing"] .slide-intro-r {
  position: relative;
  overflow: hidden;
}

[data-zone="landing"] .slide-intro-r svg {
  width: 100%;
  height: 100%;
  display: block;
}

[data-zone="landing"] .lesson-eyebrow {
  letter-spacing: .12em;
  color: var(--wine-soft);
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-family: Bricolage Grotesque, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
}

[data-zone="landing"] .lesson-eyebrow-wine {
  color: var(--wine);
}

[data-zone="landing"] .lesson-h {
  letter-spacing: -.02em;
  color: #fff;
  text-transform: uppercase;
  margin: 0 0 18px;
  font-family: Bricolage Grotesque, sans-serif;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.05;
}

[data-zone="landing"] .lesson-h-dark {
  color: var(--wine);
}

[data-zone="landing"] .lesson-p {
  color: #ffffffc7;
  max-width: 38ch;
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
}

[data-zone="landing"] .lesson-p-dark {
  color: var(--ink-2);
}

[data-zone="landing"] .lesson-actions {
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  display: flex;
}

[data-zone="landing"] .lp-back {
  color: #fff;
  cursor: pointer;
  background: #ffffff14;
  border: .5px solid #ffffff2e;
  border-radius: 50%;
  place-items: center;
  width: 38px;
  height: 38px;
  display: grid;
}

[data-zone="landing"] .lp-continue {
  cursor: pointer;
  font: inherit;
  border: none;
  border-radius: 999px;
  padding: 11px 26px;
  font-size: 13.5px;
  font-weight: 600;
  transition: transform .12s;
}

[data-zone="landing"] .lp-continue:hover {
  transform: translateY(-1px);
}

[data-zone="landing"] .lp-continue-pink {
  background: var(--wine-pill);
  color: var(--wine);
}

[data-zone="landing"] .lp-continue-wine {
  background: var(--wine);
  color: #fff;
  padding: 11px 30px;
}

[data-zone="landing"] .lp-hint {
  color: #ffffff8c;
  margin-left: 4px;
  font-size: 11.5px;
}

[data-zone="landing"] .lp-hint kbd {
  color: #ffffffd9;
  background: #ffffff1f;
  border: .5px solid #ffffff2e;
  border-radius: 6px;
  padding: 2px 7px;
  font-family: inherit;
  font-size: 10.5px;
}

[data-zone="landing"] .slide-stats {
  background: var(--wine-pink-bg);
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: 36px;
  padding: 70px 60px;
  display: grid;
}

[data-zone="landing"] .stats-l {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

[data-zone="landing"] .stat-card {
  background: #fff;
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 2px 8px -2px #2a0a120f;
}

[data-zone="landing"] .stat-card-num {
  letter-spacing: -.02em;
  color: var(--wine);
  margin-bottom: 8px;
  font-family: Bricolage Grotesque, sans-serif;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

[data-zone="landing"] .stat-card-cap {
  color: var(--ink-2);
  max-width: 30ch;
  font-size: 11.5px;
  line-height: 1.45;
}

[data-zone="landing"] .stats-r {
  padding-right: 20px;
}

[data-zone="landing"] .slide-quiz {
  background: var(--wine);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 90px 80px 80px;
  display: flex;
}

[data-zone="landing"] .quiz-eyebrow {
  letter-spacing: .12em;
  color: var(--wine-soft);
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-family: Bricolage Grotesque, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
}

[data-zone="landing"] .quiz-h {
  letter-spacing: -.02em;
  color: #fff;
  text-transform: uppercase;
  max-width: 22ch;
  margin: 0 0 8px;
  font-family: Bricolage Grotesque, sans-serif;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
}

[data-zone="landing"] .quiz-sub {
  color: #ffffffa6;
  margin: 0 0 22px;
  font-size: 13px;
}

[data-zone="landing"] .quiz-options {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

[data-zone="landing"] .quiz-opt {
  color: #ffffffeb;
  cursor: pointer;
  background: #f8c4d429;
  border: .5px solid #f8c4d42e;
  border-radius: 999px;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  font-size: 13px;
  transition: background .15s;
  display: inline-flex;
}

[data-zone="landing"] .quiz-opt:hover {
  background: #f8c4d440;
}

[data-zone="landing"] .quiz-opt-correct {
  background: #f8c4d452;
  border-color: #f8c4d466;
}

[data-zone="landing"] .quiz-letter {
  background: var(--wine-soft);
  width: 26px;
  height: 26px;
  color: var(--wine);
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-size: 11.5px;
  font-weight: 700;
  display: grid;
}

[data-zone="landing"] .player-nav {
  z-index: 5;
  pointer-events: none;
  align-items: center;
  gap: 10px;
  display: flex;
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
}

[data-zone="landing"] .nav-arrow {
  cursor: pointer;
  pointer-events: auto;
  width: 44px;
  height: 44px;
  color: var(--ink);
  background: #fff;
  border: none;
  border-radius: 50%;
  place-items: center;
  transition: transform .12s;
  display: grid;
  box-shadow: 0 4px 14px -4px #00000029;
}

[data-zone="landing"] .nav-arrow:hover {
  transform: translateY(-1px);
}

[data-zone="landing"] .nav-spacer {
  flex: 1;
}

[data-zone="landing"] .nav-audio {
  border: .5px solid var(--line);
  cursor: pointer;
  pointer-events: auto;
  width: 38px;
  height: 38px;
  color: var(--ink-2);
  background: #fff;
  border-radius: 50%;
  place-items: center;
  display: grid;
  box-shadow: 0 3px 10px -3px #0000001f;
}

[data-zone="landing"] .nav-arrow-fwd {
  color: #fff;
  background: #2bcb8b;
}

[data-zone="landing"] .slide-quiz ~ .player-nav .nav-arrow-fwd, [data-zone="landing"] .slide-intro ~ .player-nav .nav-arrow-fwd {
  color: var(--ink);
  background: #fff;
}

[data-zone="landing"] .player-dots {
  z-index: 4;
  pointer-events: none;
  gap: 6px;
  display: flex;
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translate(-50%);
}

[data-zone="landing"] .dot {
  cursor: pointer;
  pointer-events: auto;
  background: #ffffff52;
  border: none;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  padding: 0;
  transition: all .2s;
}

[data-zone="landing"] .dot.active {
  background: #fff;
  border-radius: 4px;
  width: 18px;
}

[data-zone="landing"] .player-frame[data-current="1"] .dot {
  background: #2a0a1240;
}

[data-zone="landing"] .player-frame[data-current="1"] .dot.active {
  background: var(--wine);
}

[data-zone="landing"] .section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 100px 24px;
  position: relative;
}

[data-zone="landing"] .section-title {
  letter-spacing: -.03em;
  text-wrap: balance;
  max-width: 18ch;
  margin: 0 0 14px;
  font-size: clamp(34px, 4.5vw, 48px);
  line-height: 1.08;
}

[data-zone="landing"] .section-sub {
  color: var(--muted);
  max-width: 600px;
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
}

[data-zone="landing"] .feature-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 56px;
  display: grid;
}

[data-zone="landing"] .feature-card {
  border: .5px solid var(--line);
  background: #fff;
  border-radius: 20px;
  flex-direction: column;
  min-height: 460px;
  transition: transform .2s, box-shadow .2s;
  display: flex;
  overflow: hidden;
}

[data-zone="landing"] .feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -16px #0000001f;
}

[data-zone="landing"] .feature-card.span-2 {
  flex-direction: row;
  grid-column: span 2;
  min-height: 380px;
}

[data-zone="landing"] .feature-card.span-2 .feature-text {
  flex: 1;
}

[data-zone="landing"] .feature-card.span-2 .feature-vis {
  flex: 1.2;
  min-width: 0;
}

[data-zone="landing"] .feature-text {
  flex-direction: column;
  padding: 32px;
  display: flex;
}

[data-zone="landing"] .feature-tag {
  background: var(--accent-soft);
  color: var(--accent-ink);
  text-transform: uppercase;
  letter-spacing: .06em;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-bottom: 14px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  display: inline-flex;
}

[data-zone="landing"] .feature-card h3 {
  text-wrap: balance;
  margin-bottom: 10px;
  font-size: 24px;
  line-height: 1.15;
}

[data-zone="landing"] .feature-card p {
  color: var(--muted);
  text-wrap: pretty;
  max-width: 42ch;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}

[data-zone="landing"] .feature-vis {
  flex: 1;
  min-height: 220px;
  position: relative;
  overflow: hidden;
}

[data-zone="landing"] .feature-vis-photo {
  padding: 0;
  position: relative;
  overflow: hidden;
}

[data-zone="landing"] .feature-vis-photo img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
}

[data-zone="landing"] .feature-vis-chat-photo {
  background: linear-gradient(135deg, #0a3d2c, #15543d);
}

[data-zone="landing"] .feature-vis-brand-photo {
  background: linear-gradient(135deg, #0d3a73, #1656a8);
}

[data-zone="landing"] .feature-vis-laptop-photo {
  background: linear-gradient(135deg, #2a0a12, #3d0e1b);
}

[data-zone="landing"] .feature-vis-chat {
  background: linear-gradient(135deg, var(--lilac), #f5f1ff);
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 28px;
  display: flex;
}

[data-zone="landing"] .chat-bubble {
  border-radius: 16px;
  max-width: 260px;
  padding: 11px 14px;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 4px 12px -6px #0000001a;
}

[data-zone="landing"] .chat-bubble.them {
  color: var(--ink-2);
  background: #fff;
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}

[data-zone="landing"] .chat-bubble.you {
  background: var(--ink);
  color: #fff;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}

[data-zone="landing"] .chat-typing {
  background: #fff;
  border-radius: 16px 16px 16px 4px;
  align-self: flex-start;
  gap: 4px;
  padding: 11px 14px;
  display: flex;
}

[data-zone="landing"] .chat-typing span {
  background: var(--muted-2);
  border-radius: 50%;
  width: 5px;
  height: 5px;
  animation: 1.2s ease-in-out infinite saga5-dot;
}

[data-zone="landing"] .chat-typing span:nth-child(2) {
  animation-delay: .15s;
}

[data-zone="landing"] .chat-typing span:nth-child(3) {
  animation-delay: .3s;
}

@keyframes saga5-dot {
  0%, 60%, to {
    opacity: .35;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

[data-zone="landing"] .feature-vis-swipe {
  background: linear-gradient(135deg, var(--pink), #ffe0ee);
  place-items: center;
  padding: 28px;
  display: grid;
  overflow: hidden;
}

[data-zone="landing"] .swipe-stack {
  width: 200px;
  height: 260px;
  position: relative;
}

[data-zone="landing"] .swipe-card {
  background: #fff;
  border-radius: 16px;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  display: flex;
  position: absolute;
  inset: 0;
  box-shadow: 0 16px 40px -12px #0000002e;
}

[data-zone="landing"] .swipe-card:first-child {
  opacity: .7;
  transform: rotate(-7deg)translate(-30px)translateY(8px);
}

[data-zone="landing"] .swipe-card:nth-child(2) {
  transform: rotate(4deg)translate(20px)translateY(-4px);
}

[data-zone="landing"] .swipe-card:nth-child(3) {
  z-index: 2;
  transform: rotate(-1deg);
}

[data-zone="landing"] .swipe-card-q {
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

[data-zone="landing"] .swipe-card-tag {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-family: JetBrains Mono, monospace;
  font-size: 10.5px;
}

[data-zone="landing"] .swipe-card-bar {
  gap: 6px;
  display: flex;
}

[data-zone="landing"] .swipe-card-bar span {
  background: #0f0e0c0f;
  border-radius: 2px;
  flex: 1;
  height: 3px;
}

[data-zone="landing"] .swipe-card-bar span.active {
  background: var(--ink);
}

[data-zone="landing"] .swipe-arrow-l, [data-zone="landing"] .swipe-arrow-r {
  color: #fff;
  border-radius: 50%;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 18px;
  font-weight: 600;
  display: grid;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 6px 14px -4px #0003;
}

[data-zone="landing"] .swipe-arrow-l {
  background: #ef4444;
  left: -56px;
}

[data-zone="landing"] .swipe-arrow-r {
  background: #22c55e;
  right: -56px;
}

[data-zone="landing"] .feature-vis-lang {
  background: linear-gradient(135deg, var(--mint), #e5f8ec);
  place-items: center;
  padding: 28px;
  display: grid;
  position: relative;
}

[data-zone="landing"] .lang-orbit {
  width: 280px;
  height: 280px;
  position: relative;
}

[data-zone="landing"] .lang-center {
  background: var(--ink);
  color: #fff;
  letter-spacing: -.01em;
  z-index: 2;
  border-radius: 50%;
  place-items: center;
  width: 88px;
  height: 88px;
  font-family: Bricolage Grotesque, sans-serif;
  font-size: 16px;
  font-weight: 600;
  display: grid;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 12px 32px -8px #0003;
}

[data-zone="landing"] .lang-pill {
  color: var(--ink);
  border: .5px solid var(--line);
  background: #fff;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 500;
  display: inline-flex;
  position: absolute;
  box-shadow: 0 4px 12px -3px #0000001a;
}

[data-zone="landing"] .lang-pill .flag {
  font-size: 14px;
}

[data-zone="landing"] .lang-pill.l1 {
  top: 10px;
  left: 36px;
}

[data-zone="landing"] .lang-pill.l2 {
  top: 10px;
  right: 30px;
}

[data-zone="landing"] .lang-pill.l3 {
  top: 50%;
  left: -8px;
  transform: translateY(-50%);
}

[data-zone="landing"] .lang-pill.l4 {
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
}

[data-zone="landing"] .lang-pill.l5 {
  bottom: 16px;
  left: 50%;
  transform: translate(-50%);
}

[data-zone="landing"] .lang-pill.l6 {
  bottom: 80px;
  left: 4px;
}

[data-zone="landing"] .lang-pill.l7 {
  bottom: 80px;
  right: 4px;
}

[data-zone="landing"] .feature-vis-brand {
  background: linear-gradient(135deg, var(--warm), #fff1e2);
  place-items: center;
  padding: 28px;
  display: grid;
}

[data-zone="landing"] .brand-frame {
  border: .5px solid var(--line);
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 320px;
  overflow: hidden;
  box-shadow: 0 12px 32px -10px #00000026;
}

[data-zone="landing"] .brand-header {
  background: var(--ink);
  color: #fff;
  letter-spacing: -.01em;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 14px 16px;
  font-family: Bricolage Grotesque, sans-serif;
  font-size: 14px;
  font-weight: 600;
  display: flex;
}

[data-zone="landing"] .brand-header.alt {
  background: #c2410c;
}

[data-zone="landing"] .brand-header.alt2 {
  background: #166534;
}

[data-zone="landing"] .brand-logo-circ {
  width: 22px;
  height: 22px;
  color: var(--ink);
  background: #fff;
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  display: grid;
}

[data-zone="landing"] .brand-body {
  padding: 14px;
}

[data-zone="landing"] .brand-line {
  background: #0f0e0c0f;
  border-radius: 3px;
  height: 8px;
  margin-bottom: 7px;
}

[data-zone="landing"] .brand-line.short {
  width: 60%;
}

[data-zone="landing"] .brand-cta {
  background: var(--ink);
  color: #fff;
  border-radius: 7px;
  width: fit-content;
  margin-top: 12px;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 500;
}

[data-zone="landing"] .brand-cta.alt {
  background: #c2410c;
}

[data-zone="landing"] .brand-cta.alt2 {
  background: #166534;
}

[data-zone="landing"] .brand-swatch {
  gap: 6px;
  margin-top: 14px;
  display: flex;
}

[data-zone="landing"] .brand-swatch span {
  border: 2px solid #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  box-shadow: 0 0 0 1px #0f0e0c1a;
}

[data-zone="landing"] .stats-strip {
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: .5px solid var(--line);
  background: #ffffffd1;
  border-radius: 20px;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  overflow: hidden;
  box-shadow: 0 20px 48px -24px #0f0e0c29;
}

[data-zone="landing"] .stat {
  text-align: left;
  flex-direction: column;
  gap: 8px;
  padding: 30px 30px 32px;
  display: flex;
}

[data-zone="landing"] .stat + .stat {
  border-left: .5px solid var(--line);
}

[data-zone="landing"] .stat-num {
  letter-spacing: -.03em;
  color: var(--ink);
  font-family: Bricolage Grotesque, sans-serif;
  font-size: clamp(34px, 3.6vw, 46px);
  font-weight: 700;
  line-height: 1;
}

[data-zone="landing"] .stat-num em {
  font-style: normal;
}

[data-zone="landing"] .stat-lbl {
  color: var(--muted);
  max-width: 20ch;
  font-size: 13px;
  line-height: 1.45;
}

[data-zone="landing"] .steps {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 48px;
  display: grid;
}

[data-zone="landing"] .step {
  border: .5px solid var(--line);
  background: #fff;
  border-radius: 18px;
  padding: 28px;
  position: relative;
}

[data-zone="landing"] .step-num {
  color: var(--muted);
  letter-spacing: .08em;
  margin-bottom: 18px;
  font-family: JetBrains Mono, monospace;
  font-size: 11px;
}

[data-zone="landing"] .step h4 {
  margin-bottom: 8px;
  font-size: 20px;
  line-height: 1.2;
}

[data-zone="landing"] .step p {
  color: var(--muted);
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
}

[data-zone="landing"] .step-icon {
  border-radius: 10px;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 18px;
  display: grid;
}

[data-zone="landing"] .step-icon.s1 {
  background: linear-gradient(135deg, #a855f7, #ec4899);
}

[data-zone="landing"] .step-icon.s2 {
  background: linear-gradient(135deg, #ec4899, #f97316);
}

[data-zone="landing"] .step-icon.s3 {
  background: linear-gradient(135deg, #f97316, #f59e0b);
}

[data-zone="landing"] .step-icon svg {
  color: #fff;
}

[data-zone="landing"] .testimonial {
  text-align: center;
  max-width: 920px;
  margin: 100px auto;
  padding: 0 24px;
}

[data-zone="landing"] .testimonial-quote {
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0 0 28px;
  font-family: Bricolage Grotesque, sans-serif;
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 500;
  line-height: 1.3;
}

[data-zone="landing"] .testimonial-quote em {
  color: #0000;
  background: linear-gradient(92deg, #a855f7, #ec4899, #f97316);
  -webkit-background-clip: text;
  background-clip: text;
  font-style: normal;
}

[data-zone="landing"] .testimonial-by {
  align-items: center;
  gap: 12px;
  display: inline-flex;
}

[data-zone="landing"] .testimonial-avatar {
  color: #fff;
  background: linear-gradient(135deg, #a855f7, #f97316);
  border-radius: 50%;
  place-items: center;
  width: 44px;
  height: 44px;
  font-family: Bricolage Grotesque, sans-serif;
  font-size: 15px;
  font-weight: 600;
  display: grid;
}

[data-zone="landing"] .testimonial-by-name {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

[data-zone="landing"] .testimonial-by-role {
  color: var(--muted);
  margin-top: 2px;
  font-size: 12.5px;
}

[data-zone="landing"] .editor-shot {
  max-width: 1180px;
  margin-top: 56px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

[data-zone="landing"] .editor-shot-frame {
  border: .5px solid var(--line);
  background: var(--bg);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px #fff9, 0 28px 60px -28px #0f0e0c47, 0 8px 20px -10px #0f0e0c1f;
}

[data-zone="landing"] .editor-shot-frame:before {
  content: "";
  z-index: -1;
  filter: blur(20px);
  background: radial-gradient(60% 100% at 50% 0, #a855f72e, #ec48991a 40%, #0000 70%);
  height: 60%;
  position: absolute;
  inset: -40% -10% auto;
}

[data-zone="landing"] .editor-shot-frame img {
  width: 100%;
  height: auto;
  display: block;
}

[data-zone="landing"] .editor-shot-pills {
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
  display: flex;
}

[data-zone="landing"] .editor-pill {
  border: .5px solid var(--line);
  color: var(--ink-2);
  background: #fff;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  font-size: 12.5px;
  font-weight: 500;
  display: inline-flex;
  box-shadow: 0 1px 2px #0f0e0c0a;
}

[data-zone="landing"] .editor-pill-dot {
  border-radius: 50%;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
}

[data-zone="landing"] .faq-grid {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 36px;
  display: grid;
}

[data-zone="landing"] details.faq-q {
  border: .5px solid var(--line);
  background: #fff;
  border-radius: 14px;
  padding: 18px 22px;
  transition: background .15s;
}

[data-zone="landing"] details.faq-q summary {
  letter-spacing: -.01em;
  color: var(--ink);
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: Bricolage Grotesque, sans-serif;
  font-size: 15px;
  font-weight: 600;
  list-style: none;
  display: flex;
}

[data-zone="landing"] details.faq-q summary::-webkit-details-marker {
  display: none;
}

[data-zone="landing"] details.faq-q summary:after {
  content: "+";
  color: var(--muted);
  flex: none;
  font-size: 20px;
  line-height: 1;
  transition: transform .2s;
}

[data-zone="landing"] details.faq-q[open] summary:after {
  content: "−";
}

[data-zone="landing"] details.faq-q p {
  color: var(--muted);
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
}

[data-zone="landing"] .final-cta {
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, #1a1815 0%, #0f0e0c 100%);
  border-radius: 28px;
  max-width: 1080px;
  margin: 60px auto 80px;
  padding: 64px 24px;
  position: relative;
  overflow: hidden;
}

[data-zone="landing"] .final-cta:before {
  content: "";
  pointer-events: none;
  background: radial-gradient(circle, #a855f740, #0000 60%);
  width: 400px;
  height: 400px;
  position: absolute;
  top: -100px;
  left: -100px;
}

[data-zone="landing"] .final-cta:after {
  content: "";
  pointer-events: none;
  background: radial-gradient(circle, #f9731638, #0000 60%);
  width: 400px;
  height: 400px;
  position: absolute;
  bottom: -100px;
  right: -100px;
}

[data-zone="landing"] .final-cta h2 {
  color: #fff;
  letter-spacing: -.03em;
  text-wrap: balance;
  z-index: 1;
  max-width: 16ch;
  margin: 0 auto 16px;
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.05;
  position: relative;
}

[data-zone="landing"] .final-cta p {
  color: #ffffffb3;
  z-index: 1;
  max-width: 540px;
  margin: 0 auto 28px;
  font-size: 16px;
  line-height: 1.55;
  position: relative;
}

[data-zone="landing"] .final-cta .waitlist-card {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 1;
  background: #ffffff14;
  border-color: #ffffff26;
  position: relative;
}

[data-zone="landing"] .final-cta .waitlist-input {
  color: #fff;
}

[data-zone="landing"] .final-cta .waitlist-input::placeholder {
  color: #ffffff80;
}

[data-zone="landing"] .final-cta .waitlist-form button {
  color: var(--ink);
  background: #fff;
}

[data-zone="landing"] .final-cta .waitlist-form button:hover {
  background: #ffe6cc;
}

[data-zone="landing"] .final-cta .waitlist-meta {
  color: #fff9;
}

@media (max-width: 880px) {
  [data-zone="landing"] .nav-links, [data-zone="landing"] .nav-built {
    display: none;
  }

  [data-zone="landing"] .hero {
    padding: 56px 20px 40px;
  }

  [data-zone="landing"] h1.hero-title {
    max-width: 16ch;
    font-size: 44px;
  }

  [data-zone="landing"] .hero-sub {
    font-size: 16px;
  }

  [data-zone="landing"] .feature-grid {
    grid-template-columns: 1fr;
  }

  [data-zone="landing"] .feature-card.span-2 {
    flex-direction: column;
    grid-column: span 1;
    min-height: 480px;
  }

  [data-zone="landing"] .stats-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  [data-zone="landing"] .stat + .stat {
    border-left: none;
  }

  [data-zone="landing"] .stat {
    border-top: .5px solid var(--line);
  }

  [data-zone="landing"] .stat:first-child, [data-zone="landing"] .stat:nth-child(2) {
    border-top: none;
  }

  [data-zone="landing"] .steps, [data-zone="landing"] .faq-grid {
    grid-template-columns: 1fr;
  }

  [data-zone="landing"] .device-body {
    grid-template-columns: 1fr;
    height: auto;
  }

  [data-zone="landing"] .mock-sb {
    display: none;
  }

  [data-zone="landing"] .device-bar .url {
    max-width: 200px;
    margin: 0 0 0 12px;
  }

  [data-zone="landing"] .player-frame {
    height: 720px;
  }

  [data-zone="landing"] .slide-intro {
    grid-template-columns: 1fr;
  }

  [data-zone="landing"] .slide-intro-l {
    padding: 80px 28px 40px;
  }

  [data-zone="landing"] .slide-intro-r {
    height: 280px;
  }

  [data-zone="landing"] .lesson-h, [data-zone="landing"] .quiz-h {
    font-size: 28px;
  }

  [data-zone="landing"] .slide-stats {
    grid-template-columns: 1fr;
    padding: 80px 28px 40px;
  }

  [data-zone="landing"] .slide-quiz {
    padding: 80px 28px;
  }
}

@media (max-width: 420px) {
  [data-zone="landing"] nav.top {
    padding: 8px 10px;
  }

  [data-zone="landing"] .brand img {
    height: 28px;
  }

  [data-zone="landing"] .top-r {
    gap: 6px;
  }

  [data-zone="landing"] .top-r .btn {
    padding-inline: 12px;
  }
}

@media (max-width: 540px) {
  [data-zone="landing"] .waitlist-form {
    flex-direction: column;
  }

  [data-zone="landing"] .waitlist-form button {
    padding: 14px;
  }
}

[data-zone="landing"] .ld {
  max-width: 1180px;
  margin: 0 auto;
  padding: 100px 24px;
}

[data-zone="landing"] .ld-inner {
  grid-template-columns: 1fr 1.05fr;
  align-items: center;
  gap: 56px;
  display: grid;
}

[data-zone="landing"] .ld-copy .section-eyebrow {
  margin-bottom: 14px;
}

[data-zone="landing"] .ld-copy h2 {
  letter-spacing: -.03em;
  text-wrap: balance;
  max-width: 14ch;
  margin: 0 0 18px;
  font-size: clamp(34px, 4.5vw, 48px);
  line-height: 1.08;
}

[data-zone="landing"] .ld-copy p.ld-lead {
  color: var(--muted);
  text-wrap: pretty;
  max-width: 46ch;
  margin: 0 0 26px;
  font-size: 17px;
  line-height: 1.6;
}

[data-zone="landing"] .ld-points {
  flex-direction: column;
  gap: 14px;
  margin: 0 0 4px;
  display: flex;
}

[data-zone="landing"] .ld-point {
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

[data-zone="landing"] .ld-point svg {
  color: #ec4899;
  flex: none;
  margin-top: 2px;
}

[data-zone="landing"] .ld-point span {
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.5;
}

[data-zone="landing"] .ld-point span strong {
  color: var(--ink);
  font-weight: 600;
}

[data-zone="landing"] .ld-visual {
  border: .5px solid var(--line);
  aspect-ratio: 4 / 3.6;
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 70px -30px #0f0e0c4d, 0 10px 26px -12px #0000001f;
}

[data-zone="landing"] .ld-visual img {
  object-fit: cover;
  object-position: 38% 50%;
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 880px) {
  [data-zone="landing"] .ld-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  [data-zone="landing"] .ld-copy h2 {
    max-width: 18ch;
  }

  [data-zone="landing"] .ld-visual {
    aspect-ratio: 4 / 3;
  }
}

[data-zone="landing"] .hero .hero-title {
  color: #1f1d1a;
  text-shadow: none;
  white-space: nowrap;
  max-width: none;
  margin-bottom: 12px;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 600;
}

[data-zone="landing"] .hero .hero-sub {
  color: #6e6a64;
  text-shadow: none;
  max-width: 560px;
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1.55;
}

@media (max-width: 640px) {
  [data-zone="landing"] .hero .hero-title {
    white-space: normal;
  }
}

[data-zone="landing"] .prompt-box {
  text-align: left;
  background: conic-gradient(from 120deg, #f0965a, #e0479e 30%, #9678eb 55%, #3d5bff 75%, #f0965a);
  border-radius: 26px;
  max-width: 720px;
  margin: 0 auto;
  padding: 3px;
  position: relative;
  box-shadow: 0 24px 70px -18px #e0479e66, 0 0 90px -20px #9678eb8c, 0 2px 8px -3px #1a285a12;
}

[data-zone="landing"] .prompt-stage {
  max-width: 720px;
  margin-inline: auto;
  position: relative;
}

[data-zone="landing"] .prompt-handwritten-note {
  color: #877c72;
  white-space: nowrap;
  pointer-events: none;
  width: 132px;
  font-family: Bradley Hand, Segoe Print, Comic Sans MS, cursive;
  font-size: 20px;
  line-height: 1;
  position: absolute;
  top: 18px;
  left: calc(100% + 32px);
  transform: rotate(-5deg);
}

[data-zone="landing"] .prompt-handwritten-note svg {
  opacity: .7;
  width: 68px;
  height: 44px;
  margin: 5px 0 0;
  display: block;
  transform: rotate(-8deg);
}

[data-zone="landing"] .prompt-box:focus-within {
  box-shadow: 0 24px 80px -16px #e0479e85, 0 0 110px -18px #9678ebad, 0 2px 8px -3px #1a285a12;
}

[data-zone="landing"] .prompt-file-drop-overlay {
  z-index: 3;
  inset: calc(var(--spacing) * 1);
  border: 2px dashed var(--primary);
  border-radius: inherit;
  background: var(--background);
  color: var(--foreground);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  transition: opacity .12s, visibility .12s;
  display: grid;
  position: absolute;
}

[data-zone="landing"] .prompt-box[data-file-drag-active="true"] .prompt-file-drop-overlay {
  opacity: 1;
  visibility: visible;
}

[data-zone="landing"] .prompt-inner {
  background: #fff;
  border-radius: 23px;
  flex-direction: column;
  min-height: 150px;
  padding: 20px 20px 16px;
  display: flex;
}

[data-zone="landing"] .prompt-field-wrap {
  flex: 1;
  display: flex;
  position: relative;
}

[data-zone="landing"] .prompt-input {
  resize: none;
  color: #1f1d1a;
  background: none;
  border: none;
  outline: none;
  flex: 1;
  width: 100%;
  min-height: 52px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
}

[data-zone="landing"] .prompt-input::placeholder {
  color: #8b8580;
  opacity: 1;
}

@media (max-width: 1160px) {
  [data-zone="landing"] .prompt-handwritten-note {
    font-size: 19px;
    top: calc(100% + 22px);
    left: auto;
    right: 16px;
    transform: rotate(-5deg);
  }

  [data-zone="landing"] .prompt-handwritten-note svg {
    width: 42px;
    height: 28px;
    margin: 0;
    position: absolute;
    top: -3px;
    right: 100%;
    transform: rotate(135deg);
  }
}

[data-zone="landing"] .prompt-placeholder {
  color: #b7b2ab;
  pointer-events: none;
  font-size: 15px;
  line-height: 1.5;
  position: absolute;
  inset: 0;
}

[data-zone="landing"] .prompt-type-caret {
  vertical-align: text-bottom;
  background: var(--accent);
  width: 2px;
  height: 1.1em;
  margin-left: 1px;
  animation: 1s step-end infinite saga5-caret-blink;
  display: inline-block;
}

@keyframes saga5-caret-blink {
  50% {
    opacity: 0;
  }
}

[data-zone="landing"] .prompt-bar {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

[data-zone="landing"] .prompt-icon-btn {
  color: #8a857e;
  cursor: pointer;
  background: #fff;
  border: 1px solid #e5e1db;
  border-radius: 50%;
  place-items: center;
  width: 42px;
  height: 42px;
  transition: background .12s;
  display: grid;
}

[data-zone="landing"] .prompt-icon-btn:hover {
  background: var(--bg-2);
}

[data-zone="landing"] .prompt-send {
  color: #fff;
  cursor: pointer;
  background: #e3ded7;
  border: none;
  border-radius: 50%;
  place-items: center;
  width: 42px;
  height: 42px;
  transition: transform .12s, background .12s;
  display: grid;
}

[data-zone="landing"] .prompt-send[data-active="true"] {
  background: var(--ink);
}

[data-zone="landing"] .prompt-send[data-active="true"]:hover {
  background: var(--ink);
  transform: translateY(-1px);
}

[data-zone="landing"] .prompt-chips {
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
  display: flex;
}

[data-zone="landing"] .prompt-chip {
  color: #1f1d1a;
  cursor: pointer;
  background: #faf7ffd9;
  border: .5px solid #a78bfa47;
  border-radius: 999px;
  padding: 10px 19px;
  font-size: 13px;
  font-weight: 600;
  transition: background .12s, transform .12s;
}

[data-zone="landing"] .prompt-chip:hover {
  background: #f5f0ff;
  transform: translateY(-1px);
}

[data-zone="landing"] .qa-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 1180px;
  margin: 64px auto 0;
  padding: 0 24px;
  display: grid;
}

[data-zone="landing"] .qa-card {
  color: #292530;
  min-width: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: #fff;
  border: 1px solid #e7e3ea;
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  padding: 15px 12px;
  text-decoration: none;
  transition: border-color .2s, background .2s, box-shadow .28s cubic-bezier(.22, 1, .36, 1), transform .28s cubic-bezier(.22, 1, .36, 1);
  display: flex;
}

[data-zone="landing"] .qa-card:hover, [data-zone="landing"] .qa-card:focus-visible {
  color: #292530;
  background: #fcfaff;
  border-color: #c4b6d7;
  box-shadow: 0 9px 20px -12px #432b6047;
}

[data-zone="landing"] .qa-card:focus-visible {
  outline: 3px solid var(--ui-focus-ring, #7653ac);
  outline-offset: 3px;
}

[data-zone="landing"] .qa-icon {
  color: #7e60a6;
  background: #f2edf9;
  border-radius: 10px;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
  display: grid;
}

[data-zone="landing"] .qa-icon[data-icon="policy"] {
  color: #5d8270;
  background: #edf3f0;
}

[data-zone="landing"] .qa-icon[data-icon="template"] {
  color: #5f7fa5;
  background: #edf1f8;
}

[data-zone="landing"] .qa-icon[data-icon="pdf"] {
  color: #a5755a;
  background: #faf0eb;
}

[data-zone="landing"] .qa-icon svg {
  width: 28px;
  height: 28px;
}

[data-zone="landing"] .qa-body {
  flex: 1;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

[data-zone="landing"] .qa-label {
  letter-spacing: -.01em;
  text-wrap: pretty;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

[data-zone="landing"] .qa-arrow {
  color: #9c94a5;
  stroke: currentColor;
  stroke-width: 1.6px;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  width: 15px;
  height: 15px;
  transition: color .2s, transform .28s cubic-bezier(.22, 1, .36, 1) 30ms;
}

[data-zone="landing"] .qa-card:is(:hover, :focus-visible) .qa-arrow {
  color: #7653ac;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-zone="landing"] .qa-card:hover {
    transform: translateY(-3px);
  }

  [data-zone="landing"] .qa-card:hover .qa-icon {
    transform: rotate(-5deg)scale(1.06);
  }

  [data-zone="landing"] .qa-card:hover .qa-arrow {
    transform: translate(3px);
  }

  [data-zone="landing"] .qa-card:active {
    transition-duration: .1s;
    transform: translateY(-1px)scale(.99);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-zone="landing"] .qa-card, [data-zone="landing"] .qa-icon, [data-zone="landing"] .qa-arrow {
    transition: none;
  }
}

[data-zone="landing"] .qa-label {
  flex: 1;
}

@media (max-width: 880px) {
  [data-zone="landing"] .qa-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 540px) {
  [data-zone="landing"] .qa-row {
    grid-template-columns: 1fr;
  }
}

[data-zone="landing"] .selected-files {
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 720px;
  margin: 12px auto 0;
  padding: 0;
  list-style: none;
  display: flex;
}

[data-zone="landing"] .selected-file {
  border: .5px solid var(--line);
  color: var(--ink-2);
  background: #ffffffd1;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 12px;
  font-size: 12px;
  display: inline-flex;
}

[data-zone="landing"] .prompt-file-error {
  max-width: 720px;
  color: var(--destructive);
  text-align: center;
  margin: 10px auto 0;
  font-size: 12px;
}

[data-zone="landing"] .selected-file button {
  background: var(--bg-2);
  width: 20px;
  height: 20px;
  color: var(--muted);
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  place-items: center;
  display: grid;
}

[data-zone="landing"] h1, [data-zone="landing"] h2, [data-zone="landing"] h3, [data-zone="landing"] h4, [data-zone="landing"] .qa-label {
  font-family: var(--font-bricolage), "Bricolage Grotesque", sans-serif;
}

[data-zone="landing"] .nav-built, [data-zone="landing"] .section-eyebrow {
  font-family: var(--font-geist-mono), "JetBrains Mono", monospace;
}

[data-zone="landing"] .final-cta h2 span {
  color: #0000;
  background: linear-gradient(92deg, #fbcfe8, #f59e0b, #fed7aa);
  -webkit-background-clip: text;
  background-clip: text;
}

[data-zone="landing"] .final-cta-trust {
  z-index: 1;
  color: #ffffff9e;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  position: relative;
}

[data-zone="landing"] .qa-overlay {
  z-index: 60;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #1c19236b;
  justify-content: center;
  align-items: center;
  padding: 24px;
  display: none;
  position: fixed;
  inset: 0;
}

[data-zone="landing"] .qa-overlay.open {
  display: flex;
}

[data-zone="landing"] .qa-modal {
  text-align: center;
  background: #fff;
  border-radius: 24px;
  width: 100%;
  max-width: 460px;
  padding: 32px 32px 26px;
  position: relative;
  box-shadow: 0 40px 100px -30px #0006;
}

[data-zone="landing"] .qa-close {
  background: var(--bg-2);
  width: 36px;
  height: 36px;
  color: var(--ink);
  cursor: pointer;
  border: none;
  border-radius: 50%;
  place-items: center;
  transition: background .12s;
  display: grid;
  position: absolute;
  top: 16px;
  right: 16px;
}

[data-zone="landing"] .qa-close:hover {
  background: #ece8e2;
}

[data-zone="landing"] .qa-modal h3 {
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 8px;
  font-family: Bricolage Grotesque, sans-serif;
  font-size: 21px;
  font-weight: 600;
}

[data-zone="landing"] .qa-modal .qa-modal-sub {
  color: var(--muted);
  max-width: 40ch;
  margin: 0 auto 20px;
  font-size: 14px;
  line-height: 1.5;
}

[data-zone="landing"] .qa-drop {
  color: var(--ink-2);
  cursor: pointer;
  background: #faf8f4;
  border: 1.5px dashed #ddd7ce;
  border-radius: 18px;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 28px 18px 26px;
  font-size: 13.5px;
  transition: background .12s, border-color .12s;
  display: flex;
}

[data-zone="landing"] .qa-drop:hover {
  background: #f5f2ec;
  border-color: #c9c2b6;
}

[data-zone="landing"] .qa-drop-icon {
  border: .5px solid var(--line);
  width: 54px;
  height: 54px;
  color: var(--ink);
  background: #fff;
  border-radius: 50%;
  place-items: center;
  margin-bottom: 10px;
  display: grid;
}

[data-zone="landing"] .qa-drop strong {
  color: var(--ink);
  letter-spacing: -.01em;
  font-family: Bricolage Grotesque, sans-serif;
  font-size: 16px;
  font-weight: 700;
}

[data-zone="landing"] .qa-drop small {
  color: var(--muted);
  font-size: 13px;
}

[data-zone="landing"] .qa-actions {
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
  display: flex;
}

[data-zone="landing"] .qa-btn-cancel {
  border: .5px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  background: #fff;
  border-radius: 999px;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  transition: background .12s;
}

[data-zone="landing"] .qa-btn-cancel:hover {
  background: var(--bg-2);
}

[data-zone="landing"] .qa-btn-upload {
  color: #fff;
  cursor: not-allowed;
  background: #d9d4cc;
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
}

[data-zone="landing"] :where(a, button, textarea, summary):focus-visible {
  outline: 3px solid var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  [data-zone="landing"] :where(a, button, textarea, summary):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 38%, transparent);
  }
}

[data-zone="landing"] :where(a, button, textarea, summary):focus-visible {
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  [data-zone="landing"] .saga5-blobs, [data-zone="landing"] .saga5-wash {
    transition: none;
  }

  [data-zone="landing"] .prompt-type-caret, [data-zone="landing"] .eyebrow .dot, [data-zone="landing"] .chat-typing span {
    animation: none;
  }

  [data-zone="landing"] .feature-card, [data-zone="landing"] .qa-card, [data-zone="landing"] .qa-media, [data-zone="landing"] .qa-media img, [data-zone="landing"] .prompt-chip, [data-zone="landing"] .btn {
    transition: none;
  }
}

[data-zone="landing"] .prompt-input[data-pointer-focus="true"]:focus-visible {
  box-shadow: none;
  outline: none;
}

[data-zone="landing"] .course-automation {
  isolation: isolate;
  color: #fff;
  background: #2d241d;
  border-radius: 26px;
  align-items: center;
  width: calc(100% - 48px);
  max-width: 1400px;
  min-height: 530px;
  margin: 0 auto;
  display: flex;
  position: relative;
  overflow: hidden;
}

[data-zone="landing"] .automation-photo {
  object-fit: cover;
  object-position: 65% center;
  z-index: -2;
}

[data-zone="landing"] .course-automation:before {
  content: "";
  z-index: -1;
  background: linear-gradient(90deg, #19120eb8, #19120e6b 43%, #0000 75%);
  position: absolute;
  inset: 0;
}

[data-zone="landing"] .automation-copy {
  width: 57%;
  padding: 72px clamp(32px, 5vw, 78px);
}

[data-zone="landing"] .automation-eyebrow {
  letter-spacing: .06em;
  color: #f0dfcf;
  font-size: 12px;
  font-weight: 500;
  display: block;
}

[data-zone="landing"] .automation-copy :is(h2, h3) {
  color: #fff;
  letter-spacing: -.04em;
  margin: 26px 0 22px;
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 500;
  line-height: 1.1;
}

[data-zone="landing"] .automation-copy > p {
  color: #f2eae3;
  max-width: 410px;
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
}

@media (max-width: 760px) {
  [data-zone="landing"] .course-automation {
    border-radius: 20px;
    align-items: flex-end;
    width: calc(100% - 32px);
    min-height: 690px;
    margin: 0 auto;
  }

  [data-zone="landing"] .automation-photo {
    object-position: 76% top;
  }

  [data-zone="landing"] .course-automation:before {
    background: linear-gradient(#2119111a 28%, #211911ed 65%, #211911 95%);
  }

  [data-zone="landing"] .automation-copy {
    width: 100%;
    padding: 240px 28px 36px;
  }

  [data-zone="landing"] .automation-copy :is(h2, h3) {
    margin-top: 18px;
    font-size: clamp(32px, 6vw, 42px);
  }
}

[data-zone="landing"] .section, [data-zone="landing"] .ld {
  padding-block: 88px;
}

[data-zone="landing"] .section-eyebrow {
  text-transform: none;
  letter-spacing: .04em;
  color: #81716a;
  margin-bottom: 22px;
  font-family: inherit;
  font-size: 12px;
}

[data-zone="landing"] .section-title, [data-zone="landing"] .ld-copy h2 {
  letter-spacing: -.045em;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.12;
}

[data-zone="landing"] .section .grad-text, [data-zone="landing"] .ld .grad-text {
  -webkit-text-fill-color: currentColor;
  color: #8a796a;
  background: none;
}

[data-zone="landing"] .section-sub {
  max-width: 510px;
  font-size: 16px;
  line-height: 1.75;
}

[data-zone="landing"] .feature-grid {
  gap: 32px;
  margin-top: 56px;
}

[data-zone="landing"] .feature-card {
  background: #f0eeea;
  border: 0;
  border-radius: 22px;
  min-height: 420px;
  transition: none;
}

[data-zone="landing"] .feature-card:hover {
  box-shadow: none;
  transform: none;
}

[data-zone="landing"] .feature-text {
  padding: 36px;
}

[data-zone="landing"] .feature-tag {
  color: #80766b;
  text-transform: none;
  letter-spacing: .03em;
  background: none;
  margin-bottom: 20px;
  padding: 0;
  font-size: 11px;
  font-weight: 500;
}

[data-zone="landing"] .feature-card h3 {
  letter-spacing: -.035em;
  font-size: clamp(25px, 2.5vw, 32px);
  font-weight: 500;
  line-height: 1.15;
}

[data-zone="landing"] .feature-card p {
  max-width: 36ch;
  font-size: 15px;
  line-height: 1.7;
}

[data-zone="landing"] .feature-card:nth-child(-n+2), [data-zone="landing"] .feature-card.span-2 {
  background: none;
  border-radius: 0;
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: 48px;
  min-height: 360px;
  display: grid;
}

[data-zone="landing"] .feature-card:nth-child(-n+2) .feature-text, [data-zone="landing"] .feature-card.span-2 .feature-text {
  padding: 32px 16px 32px 0;
}

[data-zone="landing"] .feature-card:nth-child(2) .feature-text {
  order: 2;
  padding-inline: 16px 0;
}

[data-zone="landing"] .feature-card:nth-child(-n+2) .feature-vis, [data-zone="landing"] .feature-card.span-2 .feature-vis {
  border-radius: 22px;
  height: 360px;
}

[data-zone="landing"] .feature-card:nth-child(2) {
  margin-bottom: 24px;
}

[data-zone="landing"] .feature-card.span-2 {
  margin-top: 24px;
}

[data-zone="landing"] .feature-vis-swipe, [data-zone="landing"] .feature-vis-lang {
  background: #e9e5e0;
}

[data-zone="landing"] .lang-pill {
  box-shadow: none;
  border-color: #e0d8cd;
}

[data-zone="landing"] .ld {
  border-top: 1px solid #e8e2da;
  margin-top: 32px;
}

[data-zone="landing"] .ld-inner {
  gap: 72px;
}

[data-zone="landing"] .ld-copy p.ld-lead {
  font-size: 16px;
  line-height: 1.75;
}

[data-zone="landing"] .ld-points {
  gap: 0;
}

[data-zone="landing"] .ld-point {
  border-top: 1px solid #e6e0d8;
  padding: 15px 0;
}

[data-zone="landing"] .ld-point svg {
  color: #85715f;
}

[data-zone="landing"] .ld-point strong {
  margin-bottom: 3px;
  display: block;
}

[data-zone="landing"] .ld-visual {
  box-shadow: none;
  border: 0;
  border-radius: 22px;
}

[data-zone="landing"] #editor {
  text-align: center;
}

[data-zone="landing"] #editor .section-title {
  max-width: 24ch;
  margin-inline: auto;
}

[data-zone="landing"] #editor .section-sub {
  margin-inline: auto;
}

[data-zone="landing"] .editor-shot {
  margin-top: 44px;
}

[data-zone="landing"] .editor-shot-frame {
  background: #eeeae4;
  border-radius: 20px;
  padding: 14px;
  box-shadow: 0 18px 45px -30px #42342b40;
}

[data-zone="landing"] .editor-shot-frame:before {
  display: none;
}

[data-zone="landing"] .editor-shot-frame img {
  border-radius: 10px;
}

[data-zone="landing"] .editor-pill {
  box-shadow: none;
  color: #71675f;
  background: none;
  border: 0;
}

[data-zone="landing"] .editor-pill-dot {
  width: 4px;
  height: 4px;
  background: #a69585 !important;
}

[data-zone="landing"] #faq {
  border-top: 1px solid #e8e2da;
  grid-template-columns: .8fr 1.2fr;
  align-content: start;
  column-gap: 80px;
  display: grid;
}

[data-zone="landing"] #faq .section-eyebrow {
  grid-column: 1;
}

[data-zone="landing"] #faq .section-title {
  grid-column: 1;
  align-self: start;
  max-width: 12ch;
}

[data-zone="landing"] .faq-grid {
  grid-area: 1 / 2 / 4;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
}

[data-zone="landing"] details.faq-q {
  background: none;
  border: 0;
  border-bottom: 1px solid #e2dcd4;
  border-radius: 0;
  padding: 22px 0;
}

[data-zone="landing"] details.faq-q:first-child {
  border-top: 1px solid #e2dcd4;
}

[data-zone="landing"] details.faq-q[open] {
  background: none;
}

[data-zone="landing"] details.faq-q summary {
  font-size: 16px;
  font-weight: 500;
}

[data-zone="landing"] details.faq-q summary:focus-visible {
  outline-offset: 5px;
  outline: 2px solid #8565aa;
}

[data-zone="landing"] details.faq-q p {
  max-width: 52ch;
  padding-right: 24px;
  font-size: 14px;
  line-height: 1.75;
}

[data-zone="landing"] .final-cta {
  background: #302a25;
  border-radius: 24px;
  width: calc(100% - 48px);
  max-width: 1132px;
  margin: 40px auto 64px;
  padding: 80px 32px;
}

[data-zone="landing"] .final-cta:before, [data-zone="landing"] .final-cta:after {
  display: none;
}

[data-zone="landing"] .final-cta h2 {
  letter-spacing: -.04em;
  font-weight: 500;
  line-height: 1.12;
}

[data-zone="landing"] .final-cta h2 span {
  -webkit-text-fill-color: currentColor;
  color: #d9c4af;
  background: none;
}

[data-zone="landing"] .final-cta .cta-main {
  box-shadow: none;
  padding: 14px 24px;
  font-size: 14px;
}

[data-zone="landing"] .final-cta-trust {
  color: #c9bdb1;
}

[data-zone="landing"] .landing-footer {
  border-top: 1px solid #e4ddd5;
  flex-wrap: wrap;
  width: calc(100% - 48px);
  max-width: 1132px;
  padding: 28px 0 36px;
  font-weight: 400;
}

[data-zone="landing"] .landing-footer a {
  color: #6c5e53;
}

@media (max-width: 880px) {
  [data-zone="landing"] .section, [data-zone="landing"] .ld {
    padding-block: 60px;
  }

  [data-zone="landing"] .feature-grid {
    gap: 24px;
  }

  [data-zone="landing"] .feature-card:nth-child(-n+2), [data-zone="landing"] .feature-card.span-2 {
    gap: 28px;
  }

  [data-zone="landing"] .ld-inner {
    gap: 36px;
  }

  [data-zone="landing"] #faq {
    grid-template-columns: 1fr;
  }

  [data-zone="landing"] #faq .section-title {
    max-width: none;
  }

  [data-zone="landing"] .faq-grid {
    grid-area: auto / 1;
    margin-top: 28px;
  }
}

@media (max-width: 600px) {
  [data-zone="landing"] .feature-grid {
    grid-template-columns: 1fr;
    margin-top: 32px;
  }

  [data-zone="landing"] .feature-card:nth-child(-n+2), [data-zone="landing"] .feature-card.span-2 {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  [data-zone="landing"] .feature-card:nth-child(2) .feature-text {
    order: 0;
  }

  [data-zone="landing"] .feature-card:nth-child(-n+2) .feature-text, [data-zone="landing"] .feature-card.span-2 .feature-text {
    padding: 20px 0 0;
  }

  [data-zone="landing"] .feature-card:nth-child(-n+2) .feature-vis, [data-zone="landing"] .feature-card.span-2 .feature-vis {
    height: 280px;
  }

  [data-zone="landing"] .feature-text {
    padding: 28px;
  }

  [data-zone="landing"] .final-cta {
    width: calc(100% - 32px);
    padding: 56px 24px;
  }

  [data-zone="landing"] .editor-shot-frame {
    border-radius: 12px;
    padding: 6px;
  }
}

[data-zone="landing"] .closing-invitation {
  text-align: center;
  color: #171717;
  border-top: 1px solid #e7e0da;
  border-bottom: 1px solid #e7e0da;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: calc(100% - 48px);
  max-width: 1132px;
  margin: 32px auto 0;
  padding: 80px 24px;
  display: flex;
}

[data-zone="landing"] .closing-copy h2 {
  margin: 0 0 18px;
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.15;
}

[data-zone="landing"] .closing-copy > p {
  color: #766f69;
  max-width: 48ch;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.7;
}

[data-zone="landing"] .closing-button {
  color: #fff;
  background: #171717;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 16px 26px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .18s;
  display: inline-flex;
}

[data-zone="landing"] .closing-button:hover {
  background: #333;
}

[data-zone="landing"] .closing-note {
  color: #766f69;
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}

[data-zone="landing"] .saga-footer {
  color: #756b70;
  width: calc(100% - 48px);
  max-width: 1132px;
  margin: 0 auto;
}

[data-zone="landing"] .saga-footer-main {
  grid-template-columns: 1.4fr .8fr 1fr;
  gap: 64px;
  padding: 72px 0 56px;
  display: grid;
}

[data-zone="landing"] .saga-footer-logo {
  color: #302a33;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  display: inline-flex;
}

[data-zone="landing"] .saga-footer-logo svg {
  width: 27px;
  height: 34px;
}

[data-zone="landing"] .saga-footer-logo > span {
  letter-spacing: -.07em;
  font-size: 27px;
}

[data-zone="landing"] .saga-footer-brand p {
  letter-spacing: -.025em;
  color: #55494e;
  margin: 18px 0;
  font-size: 19px;
  line-height: 1.4;
}

[data-zone="landing"] .saga-footer-origin {
  color: #91858b;
  font-size: 11px;
}

[data-zone="landing"] .saga-footer h2 {
  letter-spacing: 0;
  color: #4e434d;
  margin: 5px 0 22px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
}

[data-zone="landing"] .saga-footer-links {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

[data-zone="landing"] .saga-footer a {
  text-decoration: none;
}

[data-zone="landing"] .saga-footer-links a {
  color: #80747b;
  padding: 6px 0;
  font-size: 13px;
}

[data-zone="landing"] .saga-footer-links a:hover, [data-zone="landing"] .saga-footer-bottom a:hover {
  color: #342c3a;
  text-underline-offset: 4px;
  text-decoration: underline;
}

[data-zone="landing"] .saga-footer-about p {
  max-width: 27ch;
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.8;
}

[data-zone="landing"] .saga-footer-about a {
  color: #5c4966;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  display: inline-flex;
}

[data-zone="landing"] .saga-footer-bottom {
  border-top: 1px solid #e5dfe2;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  padding: 24px 0 32px;
  font-size: 11px;
  display: flex;
}

[data-zone="landing"] .saga-footer-bottom nav {
  gap: 22px;
  display: flex;
}

[data-zone="landing"] .saga-footer-bottom a {
  color: #80747b;
}

[data-zone="landing"] .saga-footer-bottom .saga-footer-top {
  align-items: center;
  gap: 9px;
  margin-left: auto;
  display: inline-flex;
}

[data-zone="landing"] .saga-footer a:focus-visible, [data-zone="landing"] .closing-button:focus-visible {
  outline-offset: 5px;
  outline: 2px solid #8565aa;
}

@media (max-width: 900px) {
  [data-zone="landing"] .saga-footer-main {
    gap: 32px;
  }
}

@media (max-width: 680px) {
  [data-zone="landing"] .closing-invitation {
    width: calc(100% - 32px);
    padding: 56px 16px;
  }

  [data-zone="landing"] .closing-copy > p {
    max-width: none;
  }

  [data-zone="landing"] .saga-footer-main {
    grid-template-columns: 1fr 1fr;
    padding: 48px 0 36px;
  }

  [data-zone="landing"] .saga-footer-brand {
    grid-column: 1 / -1;
  }

  [data-zone="landing"] .saga-footer-bottom {
    gap: 18px;
  }
}

[data-zone="landing"] .automation-section {
  margin: 100px auto;
}

[data-zone="landing"] .automation-title {
  color: #302a33;
  text-align: center;
  letter-spacing: -.045em;
  text-wrap: balance;
  max-width: 1100px;
  margin: 0 auto 44px;
  padding: 0 24px;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 500;
  line-height: 1.12;
}

@media (max-width: 760px) {
  [data-zone="landing"] .automation-section {
    margin-block: 64px;
  }

  [data-zone="landing"] .automation-title {
    margin-bottom: 28px;
  }
}

[data-zone="landing"] .hero .hero-title, [data-zone="landing"] .automation-title, [data-zone="landing"] .automation-copy :is(h2, h3), [data-zone="landing"] .section-title, [data-zone="landing"] .ld-copy h2, [data-zone="landing"] .closing-copy h2 {
  letter-spacing: -.04em;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-weight: 400;
}

[data-zone="landing"] .nav-account {
  color: #fff;
  white-space: nowrap;
  background: #171717;
  border: 1px solid #171717;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 14px;
  min-height: 40px;
  padding: 5px 6px 5px 17px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .18s, border-color .18s, box-shadow .18s;
  display: inline-flex;
}

[data-zone="landing"] .nav-account svg {
  width: 16px;
  height: 16px;
}

[data-zone="landing"] .nav-account-arrow {
  background: #ffffff14;
  border-radius: 50%;
  place-items: center;
  width: 28px;
  height: 28px;
  transition: background-color .18s;
  display: grid;
}

[data-zone="landing"] .nav-account:hover {
  background: #292929;
  border-color: #292929;
  box-shadow: 0 4px 12px -6px #68517e40;
}

[data-zone="landing"] .nav-account:hover .nav-account-arrow {
  background: #ffffff24;
}

@media (prefers-reduced-motion: no-preference) {
  [data-zone="landing"] .nav-account-arrow svg {
    transition: transform .18s;
  }

  [data-zone="landing"] .nav-account:hover .nav-account-arrow svg {
    transform: translate(1px, -1px);
  }
}

[data-zone="landing"] .security-section {
  width: calc(100% - 48px);
  max-width: 1132px;
  margin: 100px auto;
}

[data-zone="landing"] .security-heading {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 44px;
}

[data-zone="landing"] .security-heading .section-title {
  text-align: center;
  max-width: none;
  margin: 0 auto 18px;
}

[data-zone="landing"] .security-heading > p {
  color: #766f69;
  max-width: 46ch;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.7;
}

[data-zone="landing"] .security-points {
  background: #f0eeeb;
  border-radius: 24px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding: 40px;
  display: grid;
}

[data-zone="landing"] .security-icon {
  color: #52495b;
  background: #fff;
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
  display: inline-flex;
}

[data-zone="landing"] .security-point h3 {
  letter-spacing: -.02em;
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
}

[data-zone="landing"] .security-point p {
  color: #766f69;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

@media (max-width: 900px) {
  [data-zone="landing"] .security-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  [data-zone="landing"] .security-section {
    width: calc(100% - 32px);
    margin: 64px auto;
  }

  [data-zone="landing"] .security-points {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px;
  }

  [data-zone="landing"] .security-icon {
    margin-bottom: 14px;
  }
}

[data-zone="landing"] .feature-card-extra {
  background: #f0eeeb;
  border: 0;
  border-radius: 22px;
  overflow: hidden;
}

[data-zone="landing"] .feature-extra-visual {
  color: #81718b;
  background: #faf9f7;
  border-radius: 16px;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  min-height: 180px;
  margin: 0 28px 28px;
  padding: 28px;
  display: flex;
}

[data-zone="landing"] .feature-video-preview {
  align-items: center;
  gap: 16px;
  font-size: 14px;
  display: flex;
}

[data-zone="landing"] .feature-video-preview svg {
  flex-shrink: 0;
}

[data-zone="landing"] .feature-video-timeline {
  gap: 5px;
  display: flex;
}

[data-zone="landing"] .feature-video-timeline span {
  background: #dfd7e4;
  border-radius: 5px;
  flex: 1;
  height: 24px;
}

[data-zone="landing"] .feature-video-timeline span:nth-child(2n) {
  background: #e8e2db;
}

[data-zone="landing"] .feature-audience-source {
  text-align: center;
  font-size: 16px;
}

[data-zone="landing"] .feature-audience-versions {
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  display: flex;
}

[data-zone="landing"] .feature-audience-versions span {
  background: #fff;
  border: 1px solid #e4dfe6;
  border-radius: 999px;
  padding: 9px 12px;
  font-size: 12px;
}

[data-zone="landing"] .complete-courses {
  background: #f0efed;
  border-radius: 24px;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 64px;
  width: calc(100% - 48px);
  max-width: 1132px;
  margin: 80px auto 100px;
  padding: 56px;
  display: grid;
}

[data-zone="landing"] .complete-course-copy .section-title {
  margin: 0 0 24px;
}

[data-zone="landing"] .complete-course-copy > p {
  color: #766f69;
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.75;
}

[data-zone="landing"] .complete-course-preview {
  background: #fff;
  border-radius: 18px;
  padding: 28px;
}

[data-zone="landing"] .complete-course-status {
  color: #577668;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  font-size: 13px;
  display: flex;
}

[data-zone="landing"] .complete-course-item {
  border-bottom: 1px solid #eeece9;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 0;
  display: flex;
}

[data-zone="landing"] .complete-course-item:last-child {
  border: 0;
  padding-bottom: 0;
}

[data-zone="landing"] .complete-course-item > svg {
  color: #8b7b95;
  stroke-width: 1.5px;
  flex: none;
  margin-top: 3px;
}

[data-zone="landing"] .complete-course-item h3 {
  margin: 0 0 7px;
  font-size: 16px;
  font-weight: 500;
}

[data-zone="landing"] .complete-course-item p {
  color: #766f69;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 800px) {
  [data-zone="landing"] .complete-courses {
    grid-template-columns: 1fr;
    gap: 28px;
    width: calc(100% - 32px);
    margin-block: 48px 64px;
    padding: 32px 24px;
  }
}

[data-zone="landing"] .interactive-blocks {
  width: calc(100% - 48px);
  max-width: 1280px;
  margin: 100px auto;
}

[data-zone="landing"] .interactive-blocks-heading {
  text-align: center;
  max-width: 740px;
  margin: 0 auto 48px;
}

[data-zone="landing"] .interactive-blocks-heading .section-title {
  text-align: center;
  max-width: none;
  margin: 0 auto 22px;
}

[data-zone="landing"] .interactive-blocks-heading > p {
  color: #766f69;
  max-width: 58ch;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.75;
}

[data-zone="landing"] .interactive-blocks-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

[data-zone="landing"] .interactive-block-card {
  background: #fff;
  border: 1px solid #e7e4e0;
  border-radius: 16px;
  padding: 24px;
}

[data-zone="landing"] .interactive-block-label {
  align-items: center;
  gap: 12px;
  display: flex;
}

[data-zone="landing"] .interactive-block-label > span {
  color: #73647e;
  background: #f2f0f3;
  border-radius: 10px;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  display: grid;
}

[data-zone="landing"] .interactive-block-label h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

[data-zone="landing"] .interactive-block-card p {
  color: #766f69;
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.7;
}

[data-zone="landing"] .interactive-blocks-note {
  text-align: center;
  color: #817a73;
  margin: 24px 0 0;
  font-size: 12px;
}

@media (max-width: 1000px) {
  [data-zone="landing"] .interactive-blocks-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  [data-zone="landing"] .interactive-blocks {
    width: calc(100% - 32px);
    margin: 64px auto;
  }

  [data-zone="landing"] .interactive-blocks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  [data-zone="landing"] .interactive-block-card {
    padding: 18px;
  }
}

@media (max-width: 420px) {
  [data-zone="landing"] .interactive-blocks-grid {
    grid-template-columns: 1fr;
  }
}

[data-zone="landing"] .blocks-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 4% 96%, #0000);
  mask-image: linear-gradient(90deg, #0000, #000 4% 96%, #0000);
}

[data-zone="landing"] .blocks-marquee-row + .blocks-marquee-row {
  margin-top: 16px;
}

[data-zone="landing"] .blocks-marquee-track {
  width: max-content;
  animation: 65s linear infinite saga-blocks-drift;
  display: flex;
}

[data-zone="landing"] .blocks-marquee-track[data-reverse="true"] {
  animation-direction: reverse;
}

[data-zone="landing"] .blocks-marquee-group {
  gap: 16px;
  padding-right: 16px;
  display: flex;
}

[data-zone="landing"] .blocks-marquee .interactive-block-card {
  flex: 0 0 280px;
  width: 280px;
}

[data-zone="landing"] .blocks-marquee:hover .blocks-marquee-track, [data-zone="landing"] .blocks-marquee[data-paused="true"] .blocks-marquee-track {
  animation-play-state: paused;
}

[data-zone="landing"] .blocks-motion-toggle {
  color: #766f69;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 1px solid #e7e4e0;
  border-radius: 999px;
  margin: 20px auto 0;
  padding: 6px 12px;
  font-size: 12px;
  display: block;
}

@keyframes saga-blocks-drift {
  to {
    transform: translate(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-zone="landing"] .blocks-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  [data-zone="landing"] .blocks-marquee-track {
    width: 100%;
    animation: none;
  }

  [data-zone="landing"] .blocks-marquee-group {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    width: 100%;
    padding: 0;
    display: grid;
  }

  [data-zone="landing"] .blocks-marquee-group[aria-hidden="true"], [data-zone="landing"] .blocks-motion-toggle {
    display: none;
  }

  [data-zone="landing"] .blocks-marquee .interactive-block-card {
    width: auto;
  }
}

[data-zone="landing"] .pricing-page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 90px 24px 70px;
  position: relative;
}

[data-zone="landing"] .pricing-heading {
  text-align: center;
  margin-bottom: 52px;
}

[data-zone="landing"] .pricing-heading h1 {
  letter-spacing: -.045em;
  margin: 20px 0 24px;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: clamp(44px, 6vw, 72px);
  font-weight: 400;
  line-height: 1.08;
}

[data-zone="landing"] .pricing-heading > p {
  color: #766f69;
  font-size: 17px;
  line-height: 1.7;
}

[data-zone="landing"] .pricing-options {
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  display: grid;
}

[data-zone="landing"] .pricing-option {
  background: #fff;
  border: 1px solid #e7e4e0;
  border-radius: 24px;
  flex-direction: column;
  padding: 36px;
  display: flex;
}

[data-zone="landing"] .pricing-option-paid {
  background: #f1eef3;
}

[data-zone="landing"] .pricing-kicker {
  color: #81718b;
  font-size: 13px;
}

[data-zone="landing"] .pricing-option h2 {
  letter-spacing: -.025em;
  margin: 18px 0 28px;
  font-size: 25px;
  font-weight: 400;
}

[data-zone="landing"] .pricing-option > p {
  color: #766f69;
  font-size: 15px;
  line-height: 1.7;
}

[data-zone="landing"] .pricing-option .pricing-price {
  color: #171717;
  letter-spacing: -.035em;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 24px;
  font-size: 48px;
  line-height: 1.2;
  display: flex;
}

[data-zone="landing"] .pricing-price span {
  color: #766f69;
  letter-spacing: normal;
  font-size: 13px;
}

[data-zone="landing"] .pricing-option ul {
  margin: 0;
  padding: 12px 0 24px;
  list-style: none;
}

[data-zone="landing"] .pricing-option li {
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
}

[data-zone="landing"] .pricing-option li svg {
  color: #81718b;
  flex: none;
  width: 17px;
  height: 17px;
}

[data-zone="landing"] .pricing-cta {
  color: #fff;
  background: #171717;
  border-radius: 999px;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: auto;
  padding: 16px 22px;
  font-size: 14px;
  text-decoration: none;
  display: flex;
}

[data-zone="landing"] .pricing-cta:hover {
  background: #333;
}

[data-zone="landing"] .pricing-note {
  text-align: center;
  color: #766f69;
  margin: 30px auto 0;
  font-size: 13px;
  line-height: 1.7;
}

@media (max-width: 680px) {
  [data-zone="landing"] .pricing-page {
    padding-top: 48px;
  }

  [data-zone="landing"] .pricing-options {
    grid-template-columns: 1fr;
  }

  [data-zone="landing"] .pricing-option {
    padding: 28px;
  }
}

[data-zone="landing"] .pricing-page {
  max-width: 1400px;
}

[data-zone="landing"] .pricing-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

[data-zone="landing"] .pricing-option {
  padding: 28px 24px;
  position: relative;
}

[data-zone="landing"] .pricing-option h2 {
  margin-top: 8px;
}

[data-zone="landing"] .pricing-option-paid {
  border-color: #716779;
}

[data-zone="landing"] .pricing-plan-badge {
  color: #fff;
  background: #302a33;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  position: absolute;
  top: -14px;
  left: 24px;
}

[data-zone="landing"] .pricing-option .pricing-price {
  gap: 5px;
  min-height: 64px;
  font-size: 40px;
}

[data-zone="landing"] .pricing-option .pricing-billing {
  margin: -12px 0 14px;
  font-size: 12px;
}

[data-zone="landing"] .pricing-option ul {
  border-top: 1px solid #e7e4e0;
  margin-top: 16px;
}

@media (max-width: 1100px) {
  [data-zone="landing"] .pricing-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
  }
}

@media (max-width: 620px) {
  [data-zone="landing"] .pricing-options {
    grid-template-columns: 1fr;
  }
}

[data-zone="landing"].pricing-surface {
  --bg: #fff;
  background: #fff;
}

[data-zone="landing"] .feature-drawing {
  background: #faf9f7;
  border-radius: 18px;
  margin: auto 24px 24px;
  padding: 12px;
}

[data-zone="landing"] .feature-drawing svg {
  width: 100%;
  height: auto;
  display: block;
}

[data-zone="landing"] .feature-card-extra {
  flex-direction: column;
  display: flex;
}

[data-zone="landing"] .hero {
  padding-bottom: 44px;
}

@media (max-width: 1160px) {
  [data-zone="landing"] .hero {
    padding-bottom: 94px;
  }
}

[data-zone="landing"] main > .hero {
  box-sizing: border-box;
  min-height: calc(100svh - 248px - clamp(16px, 2.3vw, 30px));
}

[data-zone="landing"] main > .hero + .automation-section {
  margin-top: 0;
}

[data-zone="landing"] .feature-roles-photo {
  border-radius: 18px;
  margin: auto 24px 24px;
  overflow: hidden;
}

[data-zone="landing"] .feature-roles-photo img {
  width: 100%;
  height: auto;
  display: block;
}

[data-zone="landing"] main > .hero {
  padding-top: 112px;
}

[data-zone="landing"] .hero .hero-title {
  margin-bottom: 8px;
  font-size: 34px;
  line-height: 1.12;
}

[data-zone="landing"] .hero .hero-sub {
  max-width: 540px;
  margin-bottom: 30px;
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  [data-zone="landing"] main > .hero {
    padding-top: 76px;
  }
}

@media (max-width: 640px) {
  [data-zone="landing"] main > .hero {
    padding-top: 80px;
  }

  [data-zone="landing"] .hero .hero-title {
    font-size: 29px;
  }
}

[data-zone="landing"] .magic-box {
  background: #f0eeeb;
  border: 1px solid #e7e4df;
  border-radius: 28px;
  margin-top: 24px;
  padding: clamp(28px, 4vw, 52px);
}

[data-zone="landing"] .magic-box h3 {
  letter-spacing: -.035em;
  margin: 0 0 32px;
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 500;
}

[data-zone="landing"] .magic-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

[data-zone="landing"] .magic-number {
  color: #7c7164;
  background: #e5e0d9;
  border-radius: 13px;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 600;
  display: grid;
}

[data-zone="landing"] .magic-steps h4 {
  letter-spacing: -.02em;
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
}

[data-zone="landing"] .magic-steps p {
  color: #736e67;
  max-width: 32ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
}

[data-zone="landing"] :is(h2, h3, h4) {
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
}

@media (max-width: 640px) {
  [data-zone="landing"] .magic-steps {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  [data-zone="landing"] .magic-number {
    margin-bottom: 12px;
  }

  [data-zone="landing"] .magic-steps p {
    max-width: none;
  }
}

[data-zone="landing"] .magic-box {
  box-sizing: border-box;
  width: calc(100% - 48px);
  max-width: 1400px;
  margin-inline: auto;
}

[data-zone="landing"] .magic-illustration {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 0 22px;
  display: block;
}

[data-zone="landing"] .magic-file {
  transform-origin: 150px 75px;
  transform: translate(var(--fan-x), var(--fan-y)) rotate(var(--fan-angle));
}

[data-zone="landing"] .magic-file-0 {
  --fan-x: -64px;
  --fan-y: 3px;
  --fan-angle: -17deg;
}

[data-zone="landing"] .magic-file-1 {
  --fan-x: 0px;
  --fan-y: -8px;
  --fan-angle: 0deg;
}

[data-zone="landing"] .magic-file-2 {
  --fan-x: 64px;
  --fan-y: 3px;
  --fan-angle: 17deg;
}

@media (prefers-reduced-motion: no-preference) {
  [data-zone="landing"] .magic-file {
    animation: 7s cubic-bezier(.22, 1, .36, 1) infinite magic-files-unfold;
  }

  [data-zone="landing"] .magic-typed-letter {
    opacity: 0;
    animation: 7s step-end infinite magic-type-letter;
  }

  [data-zone="landing"] .magic-send {
    transform-box: fill-box;
    transform-origin: 50%;
    animation: 7s ease-in-out infinite magic-send-pop;
  }

  [data-zone="landing"] .magic-complete-badge {
    transform-box: fill-box;
    transform-origin: 50%;
    animation: 5s cubic-bezier(.34, 1.56, .64, 1) infinite magic-badge-pop;
  }

  [data-zone="landing"] .magic-check {
    stroke-dasharray: 1;
    animation: 5s ease-in-out infinite magic-check-draw;
  }

  [data-zone="landing"] .magic-media {
    animation: 5s ease-in-out infinite magic-media-sway;
  }

  [data-zone="landing"] .magic-interaction {
    animation: 5s ease-in-out -2.5s infinite reverse magic-media-sway;
  }

  [data-zone="landing"] .magic-play {
    transform-box: fill-box;
    transform-origin: 50%;
    animation: 3s ease-in-out infinite magic-play-pulse;
  }

  [data-zone="landing"] .magic-timeline {
    stroke-dasharray: 1;
    animation: 5s ease-in-out infinite magic-timeline-fill;
  }
}

@keyframes magic-files-unfold {
  0%, 8%, to {
    transform: translateY(8px)rotate(0);
  }

  25%, 82% {
    transform: translate(var(--fan-x), var(--fan-y)) rotate(var(--fan-angle));
  }
}

@keyframes magic-type-letter {
  0%, 74% {
    opacity: 1;
  }

  75%, to {
    opacity: 0;
  }
}

@keyframes magic-send-pop {
  0%, 50%, 75%, to {
    transform: scale(1);
  }

  58% {
    transform: scale(1.2)translateY(-3px);
  }

  65% {
    transform: scale(.94);
  }
}

@keyframes magic-badge-pop {
  0%, 8%, to {
    transform: scale(.8)rotate(-12deg);
  }

  25% {
    transform: scale(1.12)rotate(5deg);
  }

  38%, 85% {
    transform: scale(1)rotate(0);
  }
}

@keyframes magic-check-draw {
  0%, 12% {
    stroke-dashoffset: 1px;
    opacity: 0;
  }

  32%, 86% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  to {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes magic-media-sway {
  0%, to {
    transform: translate(0);
  }

  50% {
    transform: translate(-5px, -10px);
  }
}

@keyframes magic-play-pulse {
  0%, to {
    transform: scale(1);
  }

  50% {
    transform: scale(1.18);
  }
}

@keyframes magic-timeline-fill {
  0%, 12% {
    stroke-dashoffset: 1px;
  }

  75%, to {
    stroke-dashoffset: 0;
  }
}

[data-zone="landing"] .magic-course-slide {
  opacity: 0;
  transform: translate(200px);
}

[data-zone="landing"] .magic-course-slide-1 {
  opacity: 1;
  transform: translate(0);
}

@media (prefers-reduced-motion: no-preference) {
  [data-zone="landing"] .magic-course-slide {
    animation: 12s cubic-bezier(.65, 0, .35, 1) infinite magic-course-pages;
  }

  [data-zone="landing"] .magic-course-slide-2 {
    animation-delay: -8s;
  }

  [data-zone="landing"] .magic-course-slide-3 {
    animation-delay: -4s;
  }
}

@keyframes magic-course-pages {
  0%, 25% {
    opacity: 1;
    transform: translate(0);
  }

  33.333% {
    opacity: 0;
    transform: translate(-200px);
  }

  33.334%, 91.666% {
    opacity: 0;
    transform: translate(200px);
  }

  to {
    opacity: 1;
    transform: translate(0);
  }
}

[data-zone="landing"] .magic-carousel {
  aspect-ratio: 2;
  perspective: 650px;
  position: relative;
}

[data-zone="landing"] .magic-carousel-card {
  transform-origin: 50%;
  width: 42%;
  position: absolute;
  top: 14%;
  left: 29%;
}

[data-zone="landing"] .magic-carousel-card svg {
  filter: drop-shadow(0 6px 6px #5547350d);
  width: 100%;
  height: auto;
  display: block;
}

[data-zone="landing"] .magic-carousel-video {
  z-index: 3;
  transform: translate(0)scale(1.08);
}

[data-zone="landing"] .magic-carousel-image {
  z-index: 1;
  opacity: .5;
  transform: translate(65%)scale(.76)rotateY(-15deg);
}

[data-zone="landing"] .magic-carousel-activity {
  z-index: 2;
  opacity: .5;
  transform: translate(-65%)scale(.76)rotateY(15deg);
}

@media (prefers-reduced-motion: no-preference) {
  [data-zone="landing"] .magic-carousel-card {
    animation: 10.8s cubic-bezier(.65, 0, .35, 1) infinite magic-carousel-turn;
  }

  [data-zone="landing"] .magic-carousel-image {
    animation-delay: -7.2s;
  }

  [data-zone="landing"] .magic-carousel-activity {
    animation-delay: -3.6s;
  }
}

@keyframes magic-carousel-turn {
  0%, 25%, to {
    z-index: 3;
    opacity: 1;
    transform: translate(0)scale(1.08)rotateY(0);
  }

  33.333%, 58.333% {
    z-index: 2;
    opacity: .5;
    transform: translate(-65%)scale(.76)rotateY(15deg);
  }

  66.666%, 91.666% {
    z-index: 1;
    opacity: .5;
    transform: translate(65%)scale(.76)rotateY(-15deg);
  }
}

.se-root {
  --bg: #f4f3ef;
  --sidebar: #fbfaf8;
  --panel: #fff;
  --border: #eceae3;
  --border-2: #e2dfd6;
  --ink: #1b1e2a;
  --title-ink: #2a3263;
  --muted: #8c887f;
  --muted-2: #a9a59b;
  --accent: #3d5bff;
  --accent-soft: #e9edff;
  --dark: #211e45;
  --c-lesson: #e0479e;
  --c-video: #f08a3c;
  --c-quiz: #3d8bff;
  --sel-bg: #ecebfb;
  --sel-border: #4338ca;
  --radius: 14px;
  --shadow-card: 0 1px 2px #1c1e2a0a;
  --shadow-pop: 0 24px 60px -12px #1c1e2a4d, 0 2px 8px #1c1e2a14;
  height: 100dvh;
  font-family: var(--font-instrument-sans), ui-sans-serif, system-ui, sans-serif;
  display: flex;
  overflow: hidden;
}

.se-root button:not(:disabled), .se-root a[href] {
  cursor: pointer;
}

.se-read-only [inert] :is(button, input, textarea, select, [contenteditable="true"]) {
  cursor: not-allowed;
  opacity: .58;
}

.se-sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  flex-direction: column;
  flex: none;
  width: 320px;
  display: flex;
}

.se-top {
  align-items: flex-start;
  gap: 14px;
  padding: 26px 22px 8px;
  display: flex;
}

.se-back {
  border: 1px solid var(--border-2);
  width: 40px;
  height: 40px;
  color: var(--ink);
  background: #fff;
  border-radius: 12px;
  flex: none;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
}

.se-back:hover {
  border-color: var(--muted-2);
  background: #fafafa;
}

.se-course {
  flex: 1;
  min-width: 0;
}

.se-drawer-close {
  display: none;
}

.se-course h1 {
  color: var(--title-ink);
  letter-spacing: -.01em;
  white-space: normal;
  overflow-wrap: anywhere;
  margin: 2px 0 10px;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.3;
  display: block;
}

.se-course p {
  color: var(--muted);
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  display: -webkit-box;
  overflow: hidden;
}

.se-cover-desc {
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.ct-cover .ct-cover__title .se-cover-title-input, .ct-cover .ct-cover__desc .se-cover-desc-input {
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  color: inherit;
  cursor: text;
  outline: none;
  margin-top: 0;
  margin-bottom: 0;
}

.ct-cover .se-cover-title-input:empty:before, .ct-cover .se-cover-desc-input:empty:before {
  content: attr(data-placeholder);
  opacity: .35;
  pointer-events: none;
}

.ct-cover .se-cover-desc-input:focus {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
  overflow: visible;
}

.se-editable-hint {
  border-radius: 8px;
  margin: -.15rem -.5rem;
  padding: .15rem .5rem;
  transition: background-color .12s;
}

.se-editable-hint:hover {
  background: currentColor;
}

@supports (color: color-mix(in lab, red, red)) {
  .se-editable-hint:hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
  }
}

.se-editable-hint:focus {
  background: currentColor;
}

@supports (color: color-mix(in lab, red, red)) {
  .se-editable-hint:focus {
    background: color-mix(in srgb, currentColor 12%, transparent);
  }
}

.se-actions {
  gap: 10px;
  padding: 16px 22px 14px;
  display: flex;
}

.se-new {
  border: 1px solid var(--border-2);
  height: 46px;
  color: var(--ink);
  box-shadow: var(--shadow-card);
  background: #fff;
  border-radius: 12px;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  transition: all .15s;
  display: flex;
}

.se-new:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.se-newfolder {
  border: 1px solid var(--border-2);
  width: 46px;
  height: 46px;
  color: var(--ink);
  box-shadow: var(--shadow-card);
  background: #fff;
  border-radius: 12px;
  flex: none;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
}

.se-newfolder:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.se-tree {
  flex-direction: column;
  flex: 1;
  gap: 10px;
  padding: 4px 16px 24px;
  display: flex;
  overflow-y: auto;
}

.se-tree::-webkit-scrollbar {
  width: 8px;
}

.se-tree::-webkit-scrollbar-thumb {
  border: 2px solid var(--sidebar);
  background: #dfdcd3;
  border-radius: 8px;
}

.se-config {
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--sidebar);
  flex-direction: column;
  flex: none;
  gap: 6px;
  display: none;
}

.se-config-label {
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 0 2px 2px;
  font-size: 11px;
  font-weight: 600;
}

.se-config .se-pill-btn {
  justify-content: flex-start;
  width: 100%;
}

.se-config .se-pill-btn .se-btn-label {
  display: inline;
}

.se-folder {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  background: #fff;
  flex: none;
  overflow: hidden;
}

.se-folder.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.se-folder-head {
  cursor: pointer;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 14px 10px;
  display: flex;
}

.se-f-drag {
  color: var(--muted-2);
  flex: none;
  display: flex;
}

.se-f-meta {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.2;
  display: flex;
}

.se-f-meta b {
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
}

.se-f-meta span {
  color: var(--muted);
  margin-top: 2px;
  font-size: 12px;
}

.se-f-input {
  color: var(--ink);
  border: 1px solid var(--accent);
  border-radius: 6px;
  outline: none;
  width: 100%;
  margin: -3px 0;
  padding: 2px 6px;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 400;
}

.se-f-chev {
  color: var(--muted-2);
  flex: none;
  transition: transform .18s;
  display: flex;
}

.se-lessons {
  flex-direction: column;
  gap: 1px;
  padding: 0 8px 8px;
  display: flex;
}

.se-lesson {
  cursor: pointer;
  border: 1px solid #0000;
  border-radius: 9px;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  transition: background .12s, border-color .12s;
  display: flex;
  position: relative;
}

.se-lesson:hover {
  background: #f3f3f3;
}

.se-lesson.sel {
  background: var(--sel-bg);
  border-color: var(--sel-border);
}

.se-l-n {
  text-align: center;
  width: 18px;
  color: var(--muted-2);
  flex: none;
  font-size: 12.5px;
  font-weight: 500;
}

.se-l-drag {
  z-index: 1;
  width: 18px;
  color: var(--sel-border);
  flex: none;
  justify-content: center;
  display: flex;
  position: relative;
}

.se-l-hitarea {
  z-index: 0;
  border-radius: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  position: absolute;
  inset: 0;
}

.se-l-hitarea:focus-visible {
  outline: 2px solid var(--sel-border);
  outline-offset: 1px;
}

.se-l-content {
  pointer-events: none;
  text-align: left;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.se-l-title {
  min-width: 0;
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  font-size: 14px;
  overflow: hidden;
}

.se-lesson.sel .se-l-title {
  color: var(--ink);
  font-weight: 600;
}

.se-structural-canvas .module-intro {
  height: 100%;
  min-height: 0;
}

.se-lesson--structural {
  color: var(--muted-2);
  padding-left: 28px;
}

.se-lesson--structural .se-l-n {
  color: var(--muted-2);
}

.se-lesson--structural .se-l-content {
  gap: 6px;
}

.se-lesson--structural .se-l-struct-hint {
  color: var(--muted-2);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  overflow: hidden;
}

.se-lesson--structural.sel .se-l-struct-hint {
  color: var(--ink);
}

.se-empty-folder {
  color: var(--muted-2);
  padding: 6px 16px 14px 40px;
  font-size: 12.5px;
  font-style: italic;
}

.se-main {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.se-topbar {
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #faf9f7b3;
  flex: none;
  justify-content: space-between;
  align-items: center;
  height: 66px;
  padding: 0 22px;
  display: flex;
}

.se-tb-left, .se-tb-right {
  align-items: center;
  gap: 10px;
  display: flex;
}

.se-tb-brand {
  flex: none;
  align-items: center;
  gap: 10px;
  display: flex;
}

.se-tb-sep {
  background: var(--border-2);
  flex: none;
  width: 1px;
  height: 26px;
}

.se-ai-toggle {
  border: 1px solid var(--border-2);
  height: 40px;
  color: var(--ink);
  white-space: nowrap;
  background: #fff;
  border-radius: 12px;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  font-size: 14px;
  font-weight: 600;
  transition: border-color .12s, background .12s, color .12s;
  display: flex;
}

.se-ai-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.se-ai-toggle.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.se-tb-config {
  display: contents;
}

.se-tb-more {
  display: none;
}

.se-pill-btn {
  border: 1px solid var(--border-2);
  height: 40px;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border-radius: 12px;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  transition: border-color .12s, background .12s;
  display: flex;
}

.se-pill-btn svg {
  stroke-width: 1.8px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.se-pill-btn:hover {
  border-color: var(--muted-2);
}

.se-pill-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.se-pill-btn.ok {
  color: #1e8a5b;
  border-color: #1e8a5b55;
}

.se-ai-activity-pill {
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 600;
}

.se-ai-activity-pill .se-btn-label {
  font-size: 12.5px;
}

.se-ai-activity-pill.tone-active {
  color: var(--indigo-600, #4f46e5);
  background: #4f46e50f;
  border-color: #4f46e559;
}

.se-ai-activity-pill.tone-error {
  color: #c0392b;
  background: #c0392b0f;
  border-color: #c0392b59;
}

.se-ai-activity-pill.tone-done {
  color: #1e8a5b;
  border-color: #1e8a5b55;
}

.se-icon-btn {
  border: 1px solid var(--border-2);
  width: 40px;
  height: 40px;
  color: var(--ink);
  cursor: pointer;
  background: #fff;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  transition: border-color .12s, background .12s;
  display: flex;
}

.se-icon-btn svg {
  stroke-width: 1.6px;
  width: 18px;
  height: 18px;
}

.se-icon-btn:hover {
  border-color: var(--muted-2);
}

.se-menu-btn {
  border: 1px solid var(--border-2);
  width: 40px;
  height: 40px;
  color: var(--ink);
  background: #fff;
  border-radius: 12px;
  flex: none;
  justify-content: center;
  align-items: center;
  transition: border-color .12s, background .12s;
  display: none;
}

.se-menu-btn:hover {
  border-color: var(--muted-2);
}

.se-scrim {
  display: none;
}

.se-preview {
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  border-radius: 12px;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  transition: background .12s;
  display: flex;
}

.se-preview svg {
  stroke-width: 2px;
  width: 16px;
  height: 16px;
}

.se-preview:hover {
  background: #2c4ae6;
}

.se-canvas {
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 20px 24px 40px;
  display: flex;
  overflow-y: auto;
}

.se-canvas-head {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  display: flex;
}

.se-stepper {
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-card);
  background: #fff;
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  padding: 4px;
  display: flex;
}

.se-stepper > button {
  width: 30px;
  height: 30px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  transition: background .12s, color .12s;
  display: flex;
}

.se-stepper > button svg {
  stroke-width: 2px;
  width: 16px;
  height: 16px;
}

.se-stepper > button:hover:not(:disabled) {
  background: #f3f3f3;
}

.se-stepper > button:disabled {
  color: var(--muted-2);
  opacity: .45;
  cursor: default;
}

.se-stepper > span {
  color: var(--ink);
  padding: 0 8px;
  font-size: 13px;
  font-weight: 500;
}

.se-device {
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-card);
  background: #fff;
  border-radius: 10px;
  gap: 2px;
  padding: 3px;
  display: flex;
}

.se-device > button {
  width: 34px;
  height: 28px;
  color: var(--muted-2);
  cursor: pointer;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  transition: background .12s, color .12s;
  display: flex;
}

.se-device > button svg {
  stroke-width: 1.6px;
  width: 16px;
  height: 16px;
}

.se-device > button:hover:not(.on) {
  color: var(--ink);
  background: #0f0e0c0a;
}

.se-device > button.on {
  background: var(--dark);
  color: #fff;
}

.se-headrow {
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  display: flex;
}

.se-headrow svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
}

.se-headrow h2 {
  font-family: var(--font-heading, var(--font-instrument-sans)), sans-serif;
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.375rem;
}

.se-preview-wrap {
  flex: 1;
  min-height: 0;
  transition: width .3s;
  display: flex;
}

.se-preview-wrap.desktop {
  width: auto;
}

.se-preview-wrap.mobile {
  width: 430px;
  max-width: 100%;
  margin: 0 auto;
}

.editor-canvas-root {
  zoom: .85;
  width: 100%;
  min-height: 100%;
  font-family: var(--preview-font-family, inherit);
  flex-direction: column;
  flex: 1;
  display: flex;
  position: relative;
  container-type: inline-size;
}

.editor-canvas-header-overlay {
  z-index: 10;
  pointer-events: none;
  inset-inline: 0;
  position: absolute;
  top: 0;
}

.editor-canvas-root:has([data-course-editor-active-slide]) > .editor-canvas-header-overlay {
  flex: none;
  position: relative;
}

.lbe-layout-row {
  justify-content: flex-end;
  margin-bottom: .75rem;
  display: flex;
}

.lbe-layout-picker {
  background: #fff;
  border: 1px solid #0f0e0c24;
  border-radius: 10px;
  gap: 2px;
  padding: 3px;
  display: inline-flex;
  box-shadow: 0 1px 2px #14141e0f, 0 4px 12px #14141e0f;
}

.lbe-layout-picker__opt {
  color: #6e6a60;
  cursor: pointer;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 26px;
  transition: background .12s, color .12s;
  display: inline-flex;
}

.lbe-layout-picker__opt:hover:not(.on) {
  color: #0f0e0c;
  background: #0f0e0c0f;
}

.lbe-layout-picker__opt.on {
  background: var(--course-button, #4f46e5);
  color: #fff;
}

.lbe-split-media {
  background: var(--ctx-fg);
  flex: 0 0 42%;
  align-self: flex-start;
  place-items: center;
  min-width: 0;
  height: 100vh;
  min-height: 24rem;
  padding: 2rem;
  display: grid;
  position: sticky;
  top: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .lbe-split-media {
    background: color-mix(in srgb, var(--ctx-fg) 6%, transparent);
  }
}

.lbe-split-media {
  overflow: hidden;
}

.lbe-split--image-left .lbe-split-media {
  order: -1;
}

.lbe-split-media__img {
  aspect-ratio: 9 / 16;
  object-fit: contain;
  border-radius: 18px;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  display: block;
  position: relative;
}

.lbe-split-media__empty {
  color: var(--ctx-fg);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  display: flex;
  position: absolute;
  inset: 0;
}

@supports (color: color-mix(in lab, red, red)) {
  .lbe-split-media__empty {
    color: color-mix(in srgb, var(--ctx-fg) 45%, transparent);
  }
}

.lbe-split-media__empty {
  font-size: .875rem;
  font-weight: 500;
}

.lbe-split-media__controls {
  gap: .5rem;
  display: flex;
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}

.lbe-split-media__btn {
  color: #0f0e0c;
  cursor: pointer;
  background: #fffffff0;
  border: 1px solid #0f0e0c24;
  border-radius: 8px;
  align-items: center;
  gap: .375rem;
  height: 30px;
  padding: 0 .75rem;
  font-size: 12.5px;
  font-weight: 600;
  transition: background .12s, border-color .12s;
  display: inline-flex;
  box-shadow: 0 2px 8px #14141e1f;
}

.lbe-split-media__btn:hover:not(:disabled) {
  background: #fff;
  border-color: #0f0e0c47;
}

.lbe-split-media__btn:disabled {
  opacity: .6;
  cursor: default;
}

.lbe-split-media__btn--danger {
  color: #b91c1c;
}

.lbe-band-preview {
  margin-bottom: 1.5rem;
}

.lbe-band-preview__img {
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: 18px;
  width: 100%;
  display: block;
}

.lbe-centered .editor-block-tag {
  justify-content: center;
}

.lbe-centered .lbe-header-title, .lbe-centered .lbe-frame {
  text-align: center;
}

.editor-canvas-header-overlay .course-header {
  padding: 12px 20px 12px 12px;
}

.editor-canvas-header-overlay .course-header-navigation {
  transform-origin: 0 0;
  transform: scale(.82);
}

.editor-canvas-header-overlay .course-header-logo {
  height: 22px;
}

.se-preview-wrap.mobile .course-header-logo {
  display: none;
}

.pv-page {
  background: var(--pv-page, #dce9fb);
  border-radius: 22px;
  min-height: 560px;
  padding: 84px 0 70px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px #1c1e2a0f;
}

.se-preview-wrap.mobile .pv-page {
  padding-top: 74px;
}

.pv-pill {
  z-index: 2;
  align-items: center;
  gap: 8px;
  display: flex;
  position: absolute;
  top: 22px;
  left: 22px;
}

.pv-pill-card {
  background: #fff;
  border-radius: 999px;
  align-items: center;
  gap: 12px;
  height: 54px;
  padding: 0 20px 0 8px;
  display: flex;
  box-shadow: 0 4px 14px #1c1e2a1a;
}

.pv-ring {
  border: 3px solid #cdd7e8;
  border-top-color: var(--pv-banner, #2c7bf2);
  border-right-color: var(--pv-banner, #2c7bf2);
  border-radius: 50%;
  flex: none;
  width: 40px;
  height: 40px;
  transform: rotate(45deg);
}

.pv-pill-meta {
  flex-direction: column;
  line-height: 1.25;
  display: flex;
}

.pv-pill-meta b {
  color: #0e1e3a;
  font-size: 12.5px;
}

.pv-pill-meta span {
  color: #8593ad;
  font-size: 10.5px;
}

.pv-burger {
  color: #0e1e3a;
  background: #fff;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 54px;
  height: 54px;
  display: flex;
  box-shadow: 0 4px 14px #1c1e2a1a;
}

.pv-doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 40px;
}

.se-preview-wrap.mobile .pv-doc {
  padding: 0 22px;
}

.pv-eyebrow {
  letter-spacing: .12em;
  color: var(--pv-banner, #2c7bf2);
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
}

.pv-title {
  font-family: var(--font-bricolage), "Bricolage Grotesque", sans-serif;
  color: #0e1e3a;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin: 0 0 20px;
  font-size: 46px;
  font-weight: 800;
  line-height: 1.02;
}

.se-preview-wrap.mobile .pv-title {
  font-size: 32px;
}

.pv-intro {
  color: #48566e;
  margin: 0 0 32px;
  font-size: 16px;
  line-height: 1.55;
}

.se-preview-wrap.mobile .pv-intro {
  font-size: 14.5px;
}

.pv-banner-card {
  border-radius: 16px;
  margin-bottom: 40px;
  overflow: hidden;
  box-shadow: 0 4px 18px #1c3c781a;
}

.pv-banner {
  background: var(--pv-banner, #2c7bf2);
  color: #fff;
  letter-spacing: .12em;
  padding: 15px 24px;
  font-size: 12px;
  font-weight: 800;
}

.pv-banner-body {
  background: #fff;
  flex-direction: column;
  gap: 18px;
  padding: 24px 26px;
  display: flex;
}

.pv-learn-row {
  grid-template-columns: 30px 1fr;
  align-items: start;
  gap: 14px;
  display: grid;
}

.pv-num {
  background: var(--pv-banner, #2c7bf2);
  color: #fff;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
}

.pv-learn-row b {
  color: #0e1e3a;
  margin-bottom: 3px;
  font-size: 14.5px;
  display: block;
}

.pv-learn-row span {
  color: #6c7a92;
  font-size: 13.5px;
  line-height: 1.45;
}

.pv-h2 {
  font-family: var(--font-bricolage), "Bricolage Grotesque", sans-serif;
  color: #0e1e3a;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin: 0 0 14px;
  font-size: 28px;
  font-weight: 700;
}

.pv-p {
  color: #48566e;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
}

.pv-quiz {
  flex-direction: column;
  gap: 11px;
  max-width: 540px;
  display: flex;
}

.pv-opt {
  color: #0e1e3a;
  background: #fff;
  border-radius: 999px;
  align-items: center;
  gap: 13px;
  padding: 13px 20px 13px 10px;
  font-size: 15px;
  display: flex;
  box-shadow: 0 2px 8px #1c3c7812;
}

.pv-opt-l {
  background: var(--pv-page, #eaf1ff);
  width: 28px;
  height: 28px;
  color: var(--pv-banner, #2c7bf2);
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items: center;
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
}

.pv-empty {
  background: #f3f3f3;
  justify-content: center;
  align-items: center;
  display: flex;
}

.pv-empty-box {
  text-align: center;
  max-width: 420px;
  padding: 40px;
}

.pv-empty-icn {
  border: 1px solid var(--border-2);
  width: 64px;
  height: 64px;
  color: var(--muted);
  background: #fff;
  border-radius: 18px;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px;
  display: flex;
}

.pv-empty-box h2 {
  font-family: var(--font-bricolage), "Bricolage Grotesque", sans-serif;
  color: var(--ink);
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 700;
}

.pv-empty-box p {
  color: var(--muted);
  margin: 0 0 24px;
  font-size: 14.5px;
  line-height: 1.5;
}

.pv-empty-actions {
  justify-content: center;
  gap: 10px;
  display: flex;
}

.btn-primary {
  color: #fff;
  cursor: pointer;
  background: #0f0e0c;
  border-radius: 9px;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 500;
  transition: all .15s;
  display: inline-flex;
}

.btn-primary:hover:not(:disabled) {
  background: #2b2823;
}

.btn-primary:disabled {
  opacity: .5;
  cursor: default;
}

.btn-primary.lg {
  height: 34px;
  padding: 0 16px;
  font-size: 13px;
}

.cf-saga {
  color: currentColor;
  flex: none;
  display: block;
}

.cf-saga.is-spinning {
  animation: 1.5s linear infinite cf-saga-spin;
}

@keyframes cf-saga-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cf-saga.is-spinning {
    animation: none;
  }
}

.btn-ghost {
  color: #0f0e0c;
  cursor: pointer;
  background: #ffffffd9;
  border: .5px solid #0f0e0c24;
  border-radius: 9px;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  transition: all .15s;
  display: inline-flex;
}

.btn-ghost:hover {
  background: #0f0e0c0f;
  border-color: #0f0e0c38;
}

.clf-dialog {
  --accent: #4f46e5;
  --accent-soft: #4f46e51a;
  --ink: #0f0e0c;
  --muted: #6e6a60;
  --muted-2: #93908a;
  --border: #0f0e0c14;
  --border-2: #0f0e0c24;
  --c-lesson: #e0479e;
  --c-video: #f08a3c;
  --c-quiz: #3d8bff;
}

.clf-dialog button:not(:disabled) {
  cursor: pointer;
}

.clf-dialog [data-slot="dialog-close"]:hover {
  color: var(--ink);
  background: #0f0e0c0f;
}

.cf-choices {
  flex-direction: column;
  gap: 6px;
  padding: 10px 16px 18px;
  display: flex;
}

.cf-choice {
  text-align: left;
  border-radius: 14px;
  align-items: center;
  gap: 15px;
  padding: 15px 14px;
  transition: all .13s;
  display: flex;
}

.cf-choice:hover {
  background: #f3f3f3;
}

.cf-choice-icn {
  border-radius: 14px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 46px;
  height: 46px;
  display: flex;
}

.cf-choice-text {
  flex: 1;
  min-width: 0;
}

.cf-choice-text b {
  color: var(--ink);
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
}

.cf-choice-text span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  display: block;
}

.cf-badge {
  letter-spacing: .02em;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
}

.cf-choice-chev {
  color: var(--muted-2);
  flex: none;
  transition: transform .15s;
}

.cf-choice:hover .cf-choice-chev {
  color: var(--ink);
  transform: translate(3px);
}

.cf-ai {
  padding: 18px 22px 22px;
}

.cf-ctx {
  border: 1px solid var(--border-2);
  text-align: left;
  background: #fafafa;
  border-radius: 14px;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 18px;
  padding: 13px 14px;
  transition: all .13s;
  display: flex;
}

.cf-ctx.on {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.cf-ctx-check {
  border: 1.5px solid var(--muted-2);
  color: #fff;
  border-radius: 6px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  display: flex;
}

.cf-ctx.on .cf-ctx-check {
  background: var(--accent);
  border-color: var(--accent);
}

.cf-ctx-icn {
  flex: none;
}

.cf-dot {
  background: linear-gradient(135deg, #2c7bf2, #7aa8ff);
  border-radius: 9px;
  width: 30px;
  height: 30px;
  display: block;
}

.cf-ctx-text {
  flex: 1;
  min-width: 0;
}

.cf-ctx-text b {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  display: block;
}

.cf-ctx-text span {
  color: var(--muted);
  font-size: 12px;
}

.cf-switch {
  background: #d8d5cc;
  border-radius: 999px;
  flex: none;
  width: 38px;
  height: 22px;
  transition: all .18s;
  position: relative;
}

.cf-switch i {
  background: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  transition: all .18s;
  position: absolute;
  top: 2px;
  left: 2px;
  box-shadow: 0 1px 3px #0003;
}

.cf-switch.on {
  background: var(--accent);
}

.cf-switch.on i {
  left: 18px;
}

.cf-label {
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0 0 7px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  display: block;
}

.cf-label.sm {
  letter-spacing: -.005em;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.cf-textarea {
  resize: vertical;
  width: 100%;
  min-height: 92px;
  color: var(--ink);
  background: #ffffffd9;
  border: 1px solid #0f0e0c24;
  border-radius: 9px;
  outline: none;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  transition: all .13s;
}

.cf-textarea::placeholder {
  color: #93908a;
}

.cf-textarea:hover {
  border-color: #0f0e0c38;
}

.cf-textarea:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px #4f46e51f;
}

.cf-chips {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  display: flex;
}

.cf-chip {
  border: 1px solid var(--border-2);
  color: var(--muted);
  background: #fff;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 500;
  transition: all .13s;
  display: inline-flex;
}

.cf-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.cf-chip svg {
  color: var(--accent);
}

.cf-row2 {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.cf-row2:not(:first-child) {
  margin-top: 20px;
}

.cf-page-type, .cf-blank-quizfmt, .cf-blank-layout {
  margin-top: 16px;
}

.cf-layout-cards {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 6px;
  display: grid;
}

@media (max-width: 480px) {
  .cf-layout-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cf-layout-card {
  cursor: pointer;
  background: #fff;
  border: 1px solid #0f0e0c1f;
  border-radius: 10px;
  flex-direction: column;
  gap: 6px;
  padding: 6px 6px 7px;
  transition: border-color .12s, background .12s, box-shadow .12s;
  display: flex;
}

.cf-layout-card:hover:not(.on) {
  background: #fafaf9;
  border-color: #0f0e0c47;
}

.cf-layout-card.on {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .cf-layout-card.on {
    background: color-mix(in srgb, var(--accent) 6%, #fff);
  }
}

.cf-layout-card__sketch {
  background: #f6f5f2;
  border-radius: 6px;
  gap: 4px;
  height: 46px;
  padding: 6px;
  display: flex;
}

.cf-layout-card__sketch .col {
  flex-direction: column;
  flex: 1;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.cf-layout-card__sketch .col--center {
  align-items: center;
}

.cf-layout-card__sketch .ln {
  background: #cbc7be;
  border-radius: 2px;
  height: 3px;
}

.cf-layout-card__sketch .blk {
  color: #8f8a7e;
  background: #e9e6df;
  border: 1px solid #c4bfb5;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.cf-layout-card__sketch .blk svg {
  flex: none;
}

.cf-layout-card.on .cf-layout-card__sketch .blk {
  border-color: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .cf-layout-card.on .cf-layout-card__sketch .blk {
    border-color: color-mix(in srgb, var(--accent) 60%, #fff);
  }
}

.cf-layout-card.on .cf-layout-card__sketch .blk {
  background: var(--accent);
}

@supports (color: color-mix(in lab, red, red)) {
  .cf-layout-card.on .cf-layout-card__sketch .blk {
    background: color-mix(in srgb, var(--accent) 14%, #fff);
  }
}

.cf-layout-card.on .cf-layout-card__sketch .blk {
  color: var(--accent);
}

.cf-layout-card__label {
  color: var(--muted);
  text-align: center;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.2;
}

.cf-layout-card.on .cf-layout-card__label {
  color: #0f0e0c;
}

.cf-layout-hint {
  color: var(--muted);
  margin: 8px 0 0;
  font-size: 12px;
}

.cf-seg {
  background: #f3f3f3;
  border-radius: 12px;
  gap: 4px;
  padding: 4px;
  display: flex;
}

.cf-seg-btn {
  height: 38px;
  color: var(--muted);
  border-radius: 8px;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  transition: all .12s;
  display: flex;
}

.cf-choice-icn svg, .cf-seg-btn svg {
  flex: none;
  width: 22px;
  height: 22px;
}

.cf-choice-icn .cf-saga {
  width: 26px;
  height: 26px;
}

.cf-seg-btn svg {
  width: 15px;
  height: 15px;
}

.cf-seg-btn.on {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 1px 3px #00000014;
}

.cf-select-trigger[data-slot="select-trigger"] {
  width: 100%;
  height: 36px;
  color: var(--ink);
  cursor: pointer;
  background: #ffffffd9;
  border: 1px solid #0f0e0c24;
  border-radius: 9px;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  transition: all .13s;
  display: inline-flex;
}

.cf-select-trigger[data-slot="select-trigger"]:hover {
  border-color: #0f0e0c38;
}

.cf-select-trigger[data-slot="select-trigger"]:focus-visible, .cf-select-trigger[data-slot="select-trigger"][data-state="open"] {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px #4f46e51f;
}

.cf-select-menu[data-slot="select-content"] {
  z-index: 52;
  min-width: var(--radix-select-trigger-width);
  border-radius: 11px;
  padding: 5px 8px;
}

.cf-select-menu[data-slot="select-content"] [data-position="popper"] {
  min-width: 0;
}

.cf-select-menu[data-slot="select-content"] [data-slot="select-item"] {
  color: var(--ink);
  border-radius: 8px;
  margin-block: 1px;
  padding: 9px 10px 9px 30px;
  font-size: 13px;
  font-weight: 500;
  transition: background .12s, color .12s;
}

.cf-select-menu[data-slot="select-content"] [data-slot="select-item"][data-highlighted]:not([data-state="checked"]) {
  background: #0f0e0c0d;
}

.cf-select-menu[data-slot="select-content"] [data-slot="select-item"][data-state="checked"] {
  color: #4f46e5;
  background: #4f46e51a;
  font-weight: 600;
}

.cf-select-menu[data-slot="select-content"] [data-slot="select-item"][data-state="checked"] svg {
  color: #4f46e5;
}

.cf-foot {
  border-top: .5px solid #0f0e0c14;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 22px -22px -22px;
  padding: 16px 22px;
  display: flex;
}

.cf-foot-note {
  color: #6e6a60;
  flex: 1;
  font-size: 12.5px;
}

.cf-gen {
  padding: 6px 0 4px;
}

.cf-gen-head {
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  display: flex;
}

.cf-gen-spark {
  background: var(--accent-soft);
  width: 44px;
  height: 44px;
  color: var(--accent);
  border-radius: 14px;
  flex: none;
  justify-content: center;
  align-items: center;
  animation: 1.1s ease-in-out infinite cf-pulse;
  display: flex;
}

@keyframes cf-pulse {
  0%, to {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .7;
    transform: scale(1.12);
  }
}

.cf-gen-head b {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  display: block;
}

.cf-gen-head span {
  color: var(--muted);
  font-size: 12.5px;
}

.cf-skel {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.cf-skel .sk {
  background: linear-gradient(90deg, #eee 25%, #f6f6f6 37%, #eee 63%) 0 0 / 400% 100%;
  border-radius: 7px;
  height: 13px;
  animation: 1.3s infinite cf-shimmer;
}

.cf-skel .sk.t {
  width: 55%;
  height: 22px;
}

.cf-skel .sk.w90 {
  width: 90%;
}

.cf-skel .sk.w80 {
  width: 80%;
}

.cf-skel .sk.w70 {
  width: 70%;
}

.cf-skel .sk.w60 {
  width: 60%;
}

.cf-skel .sk.block {
  border-radius: 12px;
  height: 64px;
  margin: 6px 0;
}

@keyframes cf-shimmer {
  0% {
    background-position: 100% 0;
  }

  to {
    background-position: -100% 0;
  }
}

.share-dialog {
  --accent: #4f46e5;
  --accent-soft: #4f46e51a;
  --ink: #0f0e0c;
  --muted: #6e6a60;
  --muted-2: #93908a;
  --border: #0f0e0c14;
  --border-2: #0f0e0c24;
}

.share-dialog button:not(:disabled) {
  cursor: pointer;
}

.share-dialog [data-slot="dialog-close"]:hover {
  color: var(--ink);
  background: #0f0e0c0f;
}

.share-dialog [data-slot="tabs-list"][data-variant="line"] {
  border-bottom: .5px solid #0f0e0c1a;
  justify-content: flex-start;
  gap: 22px;
  width: 100%;
  margin-bottom: 18px;
  padding: 0 0 6px;
}

.share-dialog [data-slot="tabs-list"][data-variant="line"] [data-slot="tabs-trigger"] {
  height: auto;
  color: var(--muted);
  background: none;
  flex: none;
  padding: 2px 1px 8px;
  font-size: 13.5px;
  font-weight: 600;
  transition: color .12s;
}

.share-dialog [data-slot="tabs-list"][data-variant="line"] [data-slot="tabs-trigger"]:hover {
  color: var(--ink);
}

.share-dialog [data-slot="tabs-list"][data-variant="line"] [data-slot="tabs-trigger"][data-state="active"] {
  color: var(--ink);
  background: none;
}

.share-dialog [data-slot="tabs"][data-orientation="horizontal"] [data-slot="tabs-list"][data-variant="line"] [data-slot="tabs-trigger"][data-state="active"]:after {
  background: var(--ink);
  inset-inline: 0;
  height: 2px;
  bottom: -6px;
}

.sh-panel {
  flex-direction: column;
  gap: 14px;
  display: flex;
}

.sh-link-row {
  border: .5px solid var(--border-2);
  background: #ffffffd9;
  border-radius: 11px;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 12px;
  display: flex;
}

.sh-link-icon {
  color: var(--muted-2);
  flex: none;
  display: flex;
}

.sh-link-input {
  min-width: 0;
  color: var(--ink);
  background: none;
  border: none;
  outline: none;
  flex: 1;
  font-family: inherit;
  font-size: 13px;
}

.sh-copy-btn, .sh-export-btn {
  flex: none;
}

.sh-help {
  color: var(--muted);
  margin: 8px 2px 0;
  font-size: 12.5px;
  line-height: 1.45;
}

.sh-access-row {
  border: .5px solid var(--border);
  background: #fafafa;
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  display: flex;
}

.sh-access-icon {
  background: var(--accent-soft);
  width: 34px;
  height: 34px;
  color: var(--accent);
  border-radius: 9px;
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.sh-access-text {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
  display: flex;
}

.sh-access-title {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
}

.sh-access-sub {
  color: var(--muted);
  font-size: 12px;
}

.sh-invite-btn {
  border: 1.5px dashed var(--border-2);
  height: 44px;
  color: var(--muted);
  background: none;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  transition: border-color .12s, color .12s;
  display: flex;
}

.sh-invite-btn svg {
  width: 16px;
  height: 16px;
}

.sh-invite-btn:not(:disabled):hover {
  border-color: var(--accent);
  color: var(--accent);
}

.sh-invite-btn:disabled {
  opacity: .7;
  cursor: not-allowed;
}

.sh-soon {
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted-2);
  border: .5px solid var(--border-2);
  border-radius: 5px;
  padding: 2px 5px;
  font-size: 10px;
  font-weight: 700;
}

.sh-checks {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.sh-check-row {
  min-height: 32px;
  color: var(--ink);
  cursor: pointer;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  display: inline-flex;
}

.share-dialog [data-slot="checkbox"][data-state="checked"], .share-dialog [data-slot="checkbox"][data-state="indeterminate"] {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.share-dialog [data-slot="checkbox"]:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.se-root.lov {
  background: var(--bg);
  flex-direction: column;
  gap: 0;
  padding: 0 12px 12px;
}

.se-root.lov .se-topbar {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: none;
  border-bottom: none;
  flex: none;
  height: 46px;
  padding: 0 2px;
}

.se-root.lov .se-topbar .se-back {
  margin-right: 34px;
}

.se-root.lov .se-topbar .se-back, .se-root.lov .se-topbar .se-icon-btn, .se-root.lov .se-topbar .se-menu-btn {
  border-radius: 9px;
  width: 33px;
  height: 33px;
}

.se-root.lov .se-topbar .se-pill-btn, .se-root.lov .se-topbar .se-ai-toggle, .se-root.lov .se-topbar .se-preview {
  border-radius: 9px;
  height: 33px;
  font-size: 13px;
}

.se-root.lov .se-topbar .se-pill-btn {
  padding: 0 12px;
}

.se-root.lov .se-topbar .se-ai-toggle {
  padding: 0 12px 0 10px;
}

.se-root.lov .se-topbar .se-preview {
  padding: 0 15px;
}

.se-root.lov .se-topbar svg {
  width: 15px;
  height: 15px;
}

.se-root.lov .se-topbar .se-ai-toggle svg {
  width: 16px;
  height: 16px;
}

.se-root.lov .se-topbar .se-back svg {
  width: 17px;
  height: 17px;
}

.se-root.lov .se-topbar .se-tb-sep {
  height: 20px;
}

.lov-body {
  flex: 1;
  gap: 14px;
  min-height: 0;
  display: flex;
}

.se-stage {
  border: 1px solid var(--border);
  background: var(--sidebar);
  border-radius: 16px;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
  overflow: hidden;
  box-shadow: 0 18px 50px -22px #1a285a33, 0 2px 10px -3px #1a285a12;
}

.se-stage .se-body {
  flex: 1;
  min-height: 0;
  display: flex;
}

.se-side-switcher {
  flex-direction: column;
  flex: none;
  width: 300px;
  min-height: 0;
  display: flex;
}

.se-side-switch {
  background: #eae7df;
  border-radius: 12px;
  flex: none;
  gap: 4px;
  margin-bottom: 10px;
  padding: 4px;
  display: flex;
}

.se-side-switch [role="tab"] {
  height: 34px;
  color: var(--muted);
  border-radius: 9px;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  transition: color .14s, background .14s, box-shadow .14s;
  display: flex;
}

.se-side-switch [role="tab"]:hover {
  color: var(--ink);
}

.se-side-switch [role="tab"].on {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 2px 8px -3px #1a285a2e;
}

.se-side-switch [role="tab"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.se-side-switch [role="tab"].on svg {
  color: var(--accent);
}

.se-side-pane, .se-side-panel {
  flex-direction: column;
  flex: 1;
  min-height: 0;
  display: flex;
}

.se-side-panel[hidden] {
  display: none;
}

.se-side-panel--course .se-sidebar {
  border: 1px solid var(--border);
  background: var(--sidebar);
  border-radius: 16px;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  box-shadow: 0 10px 30px -16px #1a285a29;
}

.se-side-panel--ai > .ac-panel {
  flex: 1;
  width: 100%;
  min-height: 0;
}

@media (max-width: 1100px) {
  .se-side-switcher {
    width: 280px;
  }
}

@media (max-width: 900px) {
  .se-sidebar {
    width: 300px;
  }

  .se-canvas {
    padding: 20px 22px 48px;
  }

  .se-root.lov .lov-body {
    position: relative;
  }
}

@media (max-width: 1024px) {
  .se-sidebar {
    width: 300px;
  }

  .se-side-switcher {
    width: 0;
  }

  .se-side-switch {
    display: none;
  }

  .se-side-pane, .se-side-panel {
    display: contents;
  }

  .se-root.lov.ai-open .ac-panel {
    z-index: 45;
    background: var(--sidebar);
    border-right: 1px solid var(--border);
    width: min(320px, 88vw);
    box-shadow: var(--shadow-pop);
    padding: 8px;
    position: absolute;
    inset: 0 auto 0 0;
  }

  .se-root.lov.ai-open .ac-panel[data-screen-file-drag-active="true"] {
    z-index: 1000;
  }

  .se-sidebar {
    z-index: 80;
    width: min(330px, 86vw);
    transition: transform .22s cubic-bezier(.16, 1, .3, 1);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    transform: translate(-100%);
    box-shadow: 0 24px 60px -12px #1c1e2a57;
  }

  .se-root.lov .se-side-panel--course > .se-sidebar {
    background: var(--sidebar);
    border-right: 1px solid var(--border);
    z-index: 90;
    border-radius: 0;
    width: min(330px, 86vw);
    height: auto;
  }

  .se-drawer-close {
    border: 1px solid var(--border-2);
    width: 34px;
    height: 34px;
    color: var(--muted);
    background: #fff;
    border-radius: 10px;
    flex: none;
    justify-content: center;
    align-items: center;
    margin-top: 2px;
    transition: all .15s;
    display: inline-flex;
  }

  .se-drawer-close:hover {
    color: var(--ink);
    border-color: var(--muted-2);
  }

  .se-root[data-sidebar-open="true"] .se-sidebar {
    transform: translate(0);
  }

  .se-scrim {
    z-index: 75;
    opacity: 0;
    pointer-events: none;
    background: #0f0e0c6b;
    border: 0;
    padding: 0;
    transition: opacity .2s;
    display: block;
    position: fixed;
    inset: 0;
  }

  .se-root[data-sidebar-open="true"] .se-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .se-menu-btn {
    display: inline-flex;
  }

  .se-config {
    display: none;
  }

  .se-topbar {
    gap: 8px;
    padding: 0 14px;
  }

  .se-root.lov .se-topbar .se-back {
    margin-right: 0;
  }

  .se-tb-left .se-pill-btn .se-btn-label {
    display: none;
  }

  .se-tb-left .se-pill-btn {
    justify-content: center;
    width: 40px;
    padding: 0;
  }

  .se-ai-toggle .se-btn-label {
    display: none;
  }

  .se-ai-toggle {
    justify-content: center;
    gap: 0;
    width: 40px;
    padding: 0;
  }

  .se-canvas {
    padding: 16px 14px 44px;
  }
}

@media (max-width: 640px) {
  .se-root.lov {
    padding: 0 8px 8px;
  }

  .se-root.lov .se-topbar {
    gap: 6px;
    padding: 0 2px;
  }

  .se-tb-left, .se-tb-right, .se-tb-brand {
    gap: 6px;
  }

  .se-tb-sep, .se-tb-right .se-pill-btn .se-btn-label {
    display: none;
  }

  .se-tb-right .se-pill-btn {
    justify-content: center;
    width: 40px;
    padding: 0;
  }

  .se-tb-right .se-pill-btn.ok {
    width: auto;
    padding: 0 12px;
  }

  .se-tb-right .se-pill-btn.ok .se-btn-label {
    display: inline;
  }

  .se-preview .se-btn-label {
    display: none;
  }

  .se-preview {
    justify-content: center;
    width: 40px;
    padding: 0;
  }

  .se-tb-left {
    position: relative;
  }

  .se-tb-more {
    border: 1px solid var(--border-2);
    width: 40px;
    height: 40px;
    color: var(--ink);
    background: #fff;
    border-radius: 12px;
    flex: none;
    justify-content: center;
    align-items: center;
    display: inline-flex;
  }

  .se-tb-more.on {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
  }

  .se-tb-config {
    z-index: 60;
    border: 1px solid var(--border);
    min-width: 212px;
    box-shadow: var(--shadow-pop);
    background: #fff;
    border-radius: 14px;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
  }

  .se-tb-config[data-open] {
    display: flex;
  }

  .se-tb-config .se-pill-btn {
    border-radius: 10px;
    justify-content: flex-start;
    width: 100%;
    height: 40px;
    padding: 0 12px;
  }

  .se-tb-config .se-pill-btn .se-btn-label {
    display: inline;
  }

  .se-root.lov.ai-open .ac-panel {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .se-sidebar, .se-scrim {
    transition: none;
  }
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ping {
  75%, to {
    opacity: 0;
    transform: scale(2);
  }
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

@keyframes enter {
  0% {
    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));
    filter: blur(var(--tw-enter-blur, 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));
    filter: blur(var(--tw-exit-blur, 0));
  }
}