/* GENERATED by scripts/build-css.mjs from tokens/untitledui-v8.0.tokens.json. Do not edit. */
/* Source: Untitled UI Figma PRO VARIABLES v8.0 + Dropilux brand layer (tokens/dropilux-brand.json). */
:root {
  color-scheme: light;
  --dx-amber-100: #fef3c7;
  --dx-amber-200: #fde68a;
  --dx-amber-300: #fcd34d;
  --dx-amber-400: #fbbf24;
  --dx-amber-50: #fffbeb;
  --dx-amber-500: #f59e0b;
  --dx-amber-600: #d97706;
  --dx-amber-700: #b45309;
  --dx-amber-800: #92400e;
  --dx-amber-900: #78350f;
  --dx-amber-950: #451a03;
  --dx-base-transparent: #ffffff00;
  --dx-base-white: #ffffff;
  --dx-blue-100: #dbeafe;
  --dx-blue-200: #bfdbfe;
  --dx-blue-300: #93c5fd;
  --dx-blue-400: #60a5fa;
  --dx-blue-50: #eff6ff;
  --dx-blue-500: #3b82f6;
  --dx-blue-600: #2563eb;
  --dx-blue-700: #1d4ed8;
  --dx-blue-800: #1e40af;
  --dx-blue-900: #1e3a8a;
  --dx-blue-950: #172554;
  --dx-brand-100: #c9f5f5;
  --dx-brand-200: #a3eaea;
  --dx-brand-25: #f1fdfd;
  --dx-brand-300: #72d7d8;
  --dx-brand-400: #29bbbc;
  --dx-brand-50: #e4fbfa;
  --dx-brand-500: #0b999b;
  --dx-brand-600: #037879;
  --dx-brand-700: #026263;
  --dx-brand-800: #044e4f;
  --dx-brand-900: #003e3f;
  --dx-brand-950: #012525;
  --dx-emerald-100: #d1fae5;
  --dx-emerald-200: #a7f3d0;
  --dx-emerald-300: #6ee7b7;
  --dx-emerald-400: #34d399;
  --dx-emerald-50: #ecfdf5;
  --dx-emerald-500: #10b981;
  --dx-emerald-600: #059669;
  --dx-emerald-700: #047857;
  --dx-emerald-800: #065f46;
  --dx-emerald-900: #064e3b;
  --dx-emerald-950: #022c22;
  --dx-fuchsia-100: #fae8ff;
  --dx-fuchsia-200: #f5d0fe;
  --dx-fuchsia-300: #f0abfc;
  --dx-fuchsia-400: #e879f9;
  --dx-fuchsia-50: #fdf4ff;
  --dx-fuchsia-500: #d946ef;
  --dx-fuchsia-600: #c026d3;
  --dx-fuchsia-700: #a21caf;
  --dx-fuchsia-800: #86198f;
  --dx-fuchsia-900: #701a75;
  --dx-fuchsia-950: #4a044e;
  --dx-green-100: #dcfce7;
  --dx-green-200: #bbf7d0;
  --dx-green-300: #86efac;
  --dx-green-400: #4ade80;
  --dx-green-50: #f0fdf4;
  --dx-green-500: #22c55e;
  --dx-green-600: #16a34a;
  --dx-green-700: #15803d;
  --dx-green-800: #166534;
  --dx-green-900: #14532d;
  --dx-green-950: #052e16;
  --dx-indigo-100: #e0e7ff;
  --dx-indigo-200: #c7d2fe;
  --dx-indigo-300: #a5b4fc;
  --dx-indigo-400: #818cf8;
  --dx-indigo-50: #eef2ff;
  --dx-indigo-500: #6366f1;
  --dx-indigo-600: #4f46e5;
  --dx-indigo-700: #4338ca;
  --dx-indigo-800: #3730a3;
  --dx-indigo-900: #312e81;
  --dx-indigo-950: #1e1b4b;
  --dx-lux-100: #ffeccf;
  --dx-lux-200: #ffdba5;
  --dx-lux-25: #fffbf6;
  --dx-lux-300: #ffcb77;
  --dx-lux-400: #ffb935;
  --dx-lux-50: #fef5e8;
  --dx-lux-500: #efa80b;
  --dx-lux-600: #cb8e0a;
  --dx-lux-700: #a87504;
  --dx-lux-800: #835a01;
  --dx-lux-900: #6a4903;
  --dx-lux-950: #483001;
  --dx-neutral-100: #f5f5f5;
  --dx-neutral-200: #e5e5e5;
  --dx-neutral-300: #d4d4d4;
  --dx-neutral-400: #a3a3a3;
  --dx-neutral-50: #fafafa;
  --dx-neutral-500: #737373;
  --dx-neutral-600: #525252;
  --dx-neutral-700: #404040;
  --dx-neutral-800: #262626;
  --dx-neutral-900: #171717;
  --dx-neutral-950: #0a0a0a;
  --dx-orange-100: #ffedd5;
  --dx-orange-200: #fed7aa;
  --dx-orange-300: #fdba74;
  --dx-orange-400: #fb923c;
  --dx-orange-50: #fff7ed;
  --dx-orange-500: #f97316;
  --dx-orange-600: #ea580c;
  --dx-orange-700: #c2410c;
  --dx-orange-800: #9a3412;
  --dx-orange-900: #7c2d12;
  --dx-orange-950: #431407;
  --dx-pink-100: #fce7f3;
  --dx-pink-200: #fbcfe8;
  --dx-pink-300: #f9a8d4;
  --dx-pink-400: #f472b6;
  --dx-pink-50: #fdf2f8;
  --dx-pink-500: #ec4899;
  --dx-pink-600: #db2777;
  --dx-pink-700: #be185d;
  --dx-pink-800: #9d174d;
  --dx-pink-900: #831843;
  --dx-pink-950: #500724;
  --dx-purple-100: #f3e8ff;
  --dx-purple-200: #e9d5ff;
  --dx-purple-300: #d8b4fe;
  --dx-purple-400: #c084fc;
  --dx-purple-50: #faf5ff;
  --dx-purple-500: #a855f7;
  --dx-purple-600: #9333ea;
  --dx-purple-700: #7e22ce;
  --dx-purple-800: #6b21a8;
  --dx-purple-900: #581c87;
  --dx-purple-950: #3b0764;
  --dx-red-100: #fee2e2;
  --dx-red-200: #fecaca;
  --dx-red-300: #fca5a5;
  --dx-red-400: #f87171;
  --dx-red-50: #fef2f2;
  --dx-red-500: #ef4444;
  --dx-red-600: #dc2626;
  --dx-red-700: #b91c1c;
  --dx-red-800: #991b1b;
  --dx-red-900: #7f1d1d;
  --dx-red-950: #450a0a;
  --dx-sky-100: #e0f2fe;
  --dx-sky-200: #bae6fd;
  --dx-sky-300: #7dd3fc;
  --dx-sky-400: #38bdf8;
  --dx-sky-50: #f0f9ff;
  --dx-sky-500: #0ea5e9;
  --dx-sky-600: #0284c7;
  --dx-sky-700: #0369a1;
  --dx-sky-800: #075985;
  --dx-sky-900: #0c4a6e;
  --dx-sky-950: #082f49;
  --dx-slate-100: #f1f5f9;
  --dx-slate-200: #e2e8f0;
  --dx-slate-300: #cbd5e1;
  --dx-slate-400: #94a3b8;
  --dx-slate-50: #f8fafc;
  --dx-slate-500: #64748b;
  --dx-slate-600: #475569;
  --dx-slate-700: #334155;
  --dx-slate-800: #1e293b;
  --dx-slate-900: #0f172a;
  --dx-slate-950: #020617;
  --dx-yellow-100: #fef9c3;
  --dx-yellow-200: #fef08a;
  --dx-yellow-300: #fde047;
  --dx-yellow-400: #facc15;
  --dx-yellow-50: #fefce8;
  --dx-yellow-500: #eab308;
  --dx-yellow-600: #ca8a04;
  --dx-yellow-700: #a16207;
  --dx-yellow-800: #854d0e;
  --dx-yellow-900: #713f12;
  --dx-yellow-950: #422006;

  --dx-alpha-black-10: #0000001a;
  --dx-alpha-black-100: #000000;
  --dx-alpha-black-20: #00000033;
  --dx-alpha-black-30: #0000004d;
  --dx-alpha-black-40: #00000066;
  --dx-alpha-black-50: #00000080;
  --dx-alpha-black-60: #00000099;
  --dx-alpha-black-70: #000000b2;
  --dx-alpha-black-80: #000000cc;
  --dx-alpha-black-90: #000000e5;
  --dx-alpha-white-10: #ffffff1a;
  --dx-alpha-white-100: #ffffff;
  --dx-alpha-white-20: #ffffff33;
  --dx-alpha-white-30: #ffffff4d;
  --dx-alpha-white-40: #ffffff66;
  --dx-alpha-white-50: #ffffff80;
  --dx-alpha-white-60: #ffffff99;
  --dx-alpha-white-70: #ffffffb2;
  --dx-alpha-white-80: #ffffffcc;
  --dx-alpha-white-90: #ffffffe5;
  --dx-app-store-badge-border: #a6a6a6;
  --dx-avatar-bg: var(--dx-neutral-100);
  --dx-avatar-contrast-border: #00000014;
  --dx-avatar-styles-bg-neutral: #e0e0e0;
  --dx-bg-active: var(--dx-red-500);
  --dx-bg-brand-primary: var(--dx-brand-50);
  --dx-bg-brand-primary-alt: var(--dx-brand-50);
  --dx-bg-brand-secondary: var(--dx-brand-100);
  --dx-bg-brand-section: var(--dx-brand-800);
  --dx-bg-brand-section-subtle: var(--dx-brand-700);
  --dx-bg-brand-solid: var(--dx-brand-600);
  --dx-bg-brand-solid-hover: var(--dx-brand-700);
  --dx-bg-error-primary: var(--dx-red-50);
  --dx-bg-error-secondary: var(--dx-red-100);
  --dx-bg-error-solid: var(--dx-red-600);
  --dx-bg-error-solid-hover: var(--dx-red-700);
  --dx-bg-overlay: var(--dx-neutral-950);
  --dx-bg-primary: var(--dx-base-white);
  --dx-bg-primary-alt: var(--dx-base-white);
  --dx-bg-primary-hover: var(--dx-neutral-50);
  --dx-bg-primary-solid: var(--dx-neutral-950);
  --dx-bg-quaternary: var(--dx-neutral-200);
  --dx-bg-secondary: var(--dx-neutral-50);
  --dx-bg-secondary-alt: var(--dx-neutral-50);
  --dx-bg-secondary-hover: var(--dx-neutral-100);
  --dx-bg-secondary-solid: var(--dx-neutral-600);
  --dx-bg-success-primary: var(--dx-green-50);
  --dx-bg-success-secondary: var(--dx-green-100);
  --dx-bg-success-solid: var(--dx-green-700);
  --dx-bg-tertiary: var(--dx-neutral-100);
  --dx-bg-warning-primary: var(--dx-yellow-50);
  --dx-bg-warning-secondary: var(--dx-yellow-100);
  --dx-bg-warning-solid: var(--dx-yellow-600);
  --dx-border-brand: var(--dx-brand-500);
  --dx-border-brand-alt: var(--dx-brand-600);
  --dx-border-disabled-subtle: #ff00d9;
  --dx-border-error: var(--dx-red-500);
  --dx-border-error-subtle: var(--dx-red-300);
  --dx-border-primary: var(--dx-neutral-300);
  --dx-border-secondary: var(--dx-neutral-200);
  --dx-border-secondary-alt: #0000001a;
  --dx-border-tertiary: var(--dx-neutral-100);
  --dx-button-primary-bg: var(--dx-brand-600);
  --dx-button-primary-border: #ffffff1f;
  --dx-button-primary-error-border: var(--dx-red-600);
  --dx-button-primary-error-border-hover: var(--dx-red-700);
  --dx-button-primary-fg: var(--dx-base-white);
  --dx-button-primary-inner-shadow: #00000033;
  --dx-button-secondary-bg: var(--dx-base-white);
  --dx-button-secondary-border: var(--dx-neutral-300);
  --dx-button-secondary-fg: var(--dx-neutral-700);
  --dx-button-tertiary-color-fg: var(--dx-brand-700);
  --dx-button-tertiary-error-fg: var(--dx-red-700);
  --dx-button-tertiary-fg: var(--dx-neutral-600);
  --dx-featured-icon-dark-fg-brand: var(--dx-base-white);
  --dx-featured-icon-light-fg-brand: var(--dx-brand-600);
  --dx-featured-icon-light-fg-error: var(--dx-red-600);
  --dx-featured-icon-light-fg-gray: var(--dx-neutral-500);
  --dx-featured-icon-light-fg-success: var(--dx-green-600);
  --dx-featured-icon-light-fg-warning: var(--dx-yellow-600);
  --dx-fg-brand-primary: var(--dx-brand-600);
  --dx-fg-brand-primary-alt: var(--dx-brand-600);
  --dx-fg-brand-secondary: var(--dx-brand-500);
  --dx-fg-brand-secondary-alt: var(--dx-brand-500);
  --dx-fg-brand-secondary-hover: var(--dx-brand-600);
  --dx-fg-disabled-subtle: #ff00d9;
  --dx-fg-error-primary: var(--dx-red-600);
  --dx-fg-error-secondary: var(--dx-red-500);
  --dx-fg-primary: var(--dx-neutral-900);
  --dx-fg-quaternary-400: var(--dx-neutral-400);
  --dx-fg-quaternary-500: var(--dx-neutral-500);
  --dx-fg-quaternary-hover: var(--dx-neutral-500);
  --dx-fg-secondary: var(--dx-neutral-700);
  --dx-fg-secondary-hover: var(--dx-neutral-800);
  --dx-fg-success-primary: var(--dx-green-600);
  --dx-fg-success-secondary: var(--dx-green-500);
  --dx-fg-tertiary: var(--dx-neutral-600);
  --dx-fg-tertiary-hover: var(--dx-neutral-700);
  --dx-fg-warning-primary: var(--dx-yellow-600);
  --dx-fg-warning-secondary: var(--dx-yellow-500);
  --dx-fg-white: var(--dx-base-white);
  --dx-focus-ring: var(--dx-brand-500);
  --dx-focus-ring-error: var(--dx-red-500);
  --dx-footer-button-fg: var(--dx-brand-200);
  --dx-footer-button-fg-hover: var(--dx-base-white);
  --dx-header-brand-text-secondary: var(--dx-brand-200);
  --dx-icon-fg-brand: var(--dx-brand-600);
  --dx-icon-fg-brand-on-brand: var(--dx-brand-200);
  --dx-screen-mockup-border: var(--dx-neutral-900);
  --dx-shadow-2xl-01: #0000002e;
  --dx-shadow-2xl-02: #0000000a;
  --dx-shadow-3xl-01: #00000024;
  --dx-shadow-3xl-02: #0000000a;
  --dx-shadow-grid-md: #0a0a0a14;
  --dx-shadow-lg-01: #00000014;
  --dx-shadow-lg-02: #00000008;
  --dx-shadow-lg-03: #0000000a;
  --dx-shadow-main-centre-lg: #0a0a0a2e;
  --dx-shadow-main-centre-md: #0a0a0a24;
  --dx-shadow-md-01: #0000001a;
  --dx-shadow-md-02: #0000000f;
  --dx-shadow-overlay-lg: #0a0a0a1f;
  --dx-shadow-skeumorphic-inner: #0000000d;
  --dx-shadow-skeumorphic-inner-border: #0000002e;
  --dx-shadow-sm-01: #0000001a;
  --dx-shadow-sm-02: #0000001a;
  --dx-shadow-xl-01: #00000014;
  --dx-shadow-xl-02: #00000008;
  --dx-shadow-xl-03: #0000000a;
  --dx-shadow-xs: #0000000d;
  --dx-slider-handle-bg: var(--dx-base-white);
  --dx-slider-handle-border: var(--dx-brand-600);
  --dx-text-brand-primary: var(--dx-brand-900);
  --dx-text-brand-secondary: var(--dx-brand-700);
  --dx-text-brand-secondary-hover: var(--dx-brand-800);
  --dx-text-brand-tertiary: var(--dx-brand-600);
  --dx-text-brand-tertiary-alt: var(--dx-brand-600);
  --dx-text-disabled: #ff00d9;
  --dx-text-editor-icon-fg: var(--dx-neutral-400);
  --dx-text-editor-icon-fg-active: var(--dx-neutral-500);
  --dx-text-error-primary: var(--dx-red-600);
  --dx-text-error-primary-hover: var(--dx-red-700);
  --dx-text-placeholder: var(--dx-neutral-500);
  --dx-text-primary: var(--dx-neutral-900);
  --dx-text-primary-on-brand: var(--dx-base-white);
  --dx-text-quaternary: var(--dx-neutral-500);
  --dx-text-quaternary-on-brand: var(--dx-brand-300);
  --dx-text-secondary: var(--dx-neutral-700);
  --dx-text-secondary-hover: var(--dx-neutral-800);
  --dx-text-secondary-on-brand: var(--dx-brand-200);
  --dx-text-success-primary: var(--dx-green-700);
  --dx-text-tertiary: var(--dx-neutral-600);
  --dx-text-tertiary-hover: var(--dx-neutral-700);
  --dx-text-tertiary-on-brand: var(--dx-brand-200);
  --dx-text-warning-primary: var(--dx-yellow-700);
  --dx-text-white: var(--dx-base-white);
  --dx-thumbnail-badge-success-fg: var(--dx-green-700);
  --dx-toggle-border: var(--dx-neutral-300);
  --dx-toggle-slim-border-pressed: var(--dx-brand-600);
  --dx-toggle-slim-border-pressed-hover: var(--dx-brand-700);
  --dx-tooltip-light-text-primary: var(--dx-neutral-700);
  --dx-tooltip-supporting-text: var(--dx-neutral-300);
  --dx-utility-amber-100: var(--dx-amber-100);
  --dx-utility-amber-200: var(--dx-amber-200);
  --dx-utility-amber-300: var(--dx-amber-300);
  --dx-utility-amber-400: var(--dx-amber-400);
  --dx-utility-amber-50: var(--dx-amber-50);
  --dx-utility-amber-500: var(--dx-amber-500);
  --dx-utility-amber-600: var(--dx-amber-600);
  --dx-utility-amber-700: var(--dx-amber-700);
  --dx-utility-blue-100: var(--dx-blue-100);
  --dx-utility-blue-200: var(--dx-blue-200);
  --dx-utility-blue-300: var(--dx-blue-300);
  --dx-utility-blue-400: var(--dx-blue-400);
  --dx-utility-blue-50: var(--dx-blue-50);
  --dx-utility-blue-500: var(--dx-blue-500);
  --dx-utility-blue-600: var(--dx-blue-600);
  --dx-utility-blue-700: var(--dx-blue-700);
  --dx-utility-brand-100: var(--dx-brand-100);
  --dx-utility-brand-100-alt: var(--dx-brand-100);
  --dx-utility-brand-200: var(--dx-brand-200);
  --dx-utility-brand-200-alt: var(--dx-brand-200);
  --dx-utility-brand-300: var(--dx-brand-300);
  --dx-utility-brand-300-alt: var(--dx-brand-300);
  --dx-utility-brand-400: var(--dx-brand-400);
  --dx-utility-brand-400-alt: var(--dx-brand-400);
  --dx-utility-brand-50: var(--dx-brand-50);
  --dx-utility-brand-50-alt: var(--dx-brand-50);
  --dx-utility-brand-500: var(--dx-brand-500);
  --dx-utility-brand-500-alt: var(--dx-brand-500);
  --dx-utility-brand-600: var(--dx-brand-600);
  --dx-utility-brand-600-alt: var(--dx-brand-600);
  --dx-utility-brand-700: var(--dx-brand-700);
  --dx-utility-brand-700-alt: var(--dx-brand-700);
  --dx-utility-brand-800: var(--dx-brand-800);
  --dx-utility-brand-800-alt: var(--dx-brand-800);
  --dx-utility-brand-900: var(--dx-brand-900);
  --dx-utility-brand-900-alt: var(--dx-brand-900);
  --dx-utility-emerald-100: var(--dx-emerald-100);
  --dx-utility-emerald-200: var(--dx-emerald-200);
  --dx-utility-emerald-300: var(--dx-emerald-300);
  --dx-utility-emerald-400: var(--dx-emerald-400);
  --dx-utility-emerald-50: var(--dx-emerald-50);
  --dx-utility-emerald-500: var(--dx-emerald-500);
  --dx-utility-emerald-600: var(--dx-emerald-600);
  --dx-utility-emerald-700: var(--dx-emerald-700);
  --dx-utility-fuchsia-100: var(--dx-fuchsia-100);
  --dx-utility-fuchsia-200: var(--dx-fuchsia-200);
  --dx-utility-fuchsia-300: var(--dx-fuchsia-300);
  --dx-utility-fuchsia-400: var(--dx-fuchsia-400);
  --dx-utility-fuchsia-50: var(--dx-fuchsia-50);
  --dx-utility-fuchsia-500: var(--dx-fuchsia-500);
  --dx-utility-fuchsia-600: var(--dx-fuchsia-600);
  --dx-utility-fuchsia-700: var(--dx-fuchsia-700);
  --dx-utility-green-100: var(--dx-green-100);
  --dx-utility-green-200: var(--dx-green-200);
  --dx-utility-green-300: var(--dx-green-300);
  --dx-utility-green-400: var(--dx-green-400);
  --dx-utility-green-50: var(--dx-green-50);
  --dx-utility-green-500: var(--dx-green-500);
  --dx-utility-green-600: var(--dx-green-600);
  --dx-utility-green-700: var(--dx-green-700);
  --dx-utility-indigo-100: var(--dx-indigo-100);
  --dx-utility-indigo-200: var(--dx-indigo-200);
  --dx-utility-indigo-300: var(--dx-indigo-300);
  --dx-utility-indigo-400: var(--dx-indigo-400);
  --dx-utility-indigo-50: var(--dx-indigo-50);
  --dx-utility-indigo-500: var(--dx-indigo-500);
  --dx-utility-indigo-600: var(--dx-indigo-600);
  --dx-utility-indigo-700: var(--dx-indigo-700);
  --dx-utility-neutral-100: var(--dx-neutral-100);
  --dx-utility-neutral-200: var(--dx-neutral-200);
  --dx-utility-neutral-300: var(--dx-neutral-300);
  --dx-utility-neutral-400: var(--dx-neutral-400);
  --dx-utility-neutral-50: var(--dx-neutral-50);
  --dx-utility-neutral-500: var(--dx-neutral-500);
  --dx-utility-neutral-600: var(--dx-neutral-600);
  --dx-utility-neutral-700: var(--dx-neutral-700);
  --dx-utility-neutral-800: var(--dx-neutral-800);
  --dx-utility-neutral-900: var(--dx-neutral-900);
  --dx-utility-orange-100: var(--dx-orange-100);
  --dx-utility-orange-200: var(--dx-orange-200);
  --dx-utility-orange-300: var(--dx-orange-300);
  --dx-utility-orange-400: var(--dx-orange-400);
  --dx-utility-orange-50: var(--dx-orange-50);
  --dx-utility-orange-500: var(--dx-orange-500);
  --dx-utility-orange-600: var(--dx-orange-600);
  --dx-utility-orange-700: var(--dx-orange-700);
  --dx-utility-pink-100: var(--dx-pink-100);
  --dx-utility-pink-200: var(--dx-pink-200);
  --dx-utility-pink-300: var(--dx-pink-300);
  --dx-utility-pink-400: var(--dx-pink-400);
  --dx-utility-pink-50: var(--dx-pink-50);
  --dx-utility-pink-500: var(--dx-pink-500);
  --dx-utility-pink-600: var(--dx-pink-600);
  --dx-utility-pink-700: var(--dx-pink-700);
  --dx-utility-purple-100: var(--dx-purple-100);
  --dx-utility-purple-200: var(--dx-purple-200);
  --dx-utility-purple-300: var(--dx-purple-300);
  --dx-utility-purple-400: var(--dx-purple-400);
  --dx-utility-purple-50: var(--dx-purple-50);
  --dx-utility-purple-500: var(--dx-purple-500);
  --dx-utility-purple-600: var(--dx-purple-600);
  --dx-utility-purple-700: var(--dx-purple-700);
  --dx-utility-red-100: var(--dx-red-100);
  --dx-utility-red-200: var(--dx-red-200);
  --dx-utility-red-300: var(--dx-red-300);
  --dx-utility-red-400: var(--dx-red-400);
  --dx-utility-red-50: var(--dx-red-50);
  --dx-utility-red-500: var(--dx-red-500);
  --dx-utility-red-600: var(--dx-red-600);
  --dx-utility-red-700: var(--dx-red-700);
  --dx-utility-sky-100: var(--dx-sky-100);
  --dx-utility-sky-200: var(--dx-sky-200);
  --dx-utility-sky-300: var(--dx-sky-300);
  --dx-utility-sky-400: var(--dx-sky-400);
  --dx-utility-sky-50: var(--dx-sky-50);
  --dx-utility-sky-500: var(--dx-sky-500);
  --dx-utility-sky-600: var(--dx-sky-600);
  --dx-utility-sky-700: var(--dx-sky-700);
  --dx-utility-slate-100: var(--dx-slate-100);
  --dx-utility-slate-200: var(--dx-slate-200);
  --dx-utility-slate-300: var(--dx-slate-300);
  --dx-utility-slate-400: var(--dx-slate-400);
  --dx-utility-slate-50: var(--dx-slate-50);
  --dx-utility-slate-500: var(--dx-slate-500);
  --dx-utility-slate-600: var(--dx-slate-600);
  --dx-utility-slate-700: var(--dx-slate-700);
  --dx-utility-yellow-100: var(--dx-yellow-100);
  --dx-utility-yellow-200: var(--dx-yellow-200);
  --dx-utility-yellow-300: var(--dx-yellow-300);
  --dx-utility-yellow-400: var(--dx-yellow-400);
  --dx-utility-yellow-50: var(--dx-yellow-50);
  --dx-utility-yellow-500: var(--dx-yellow-500);
  --dx-utility-yellow-600: var(--dx-yellow-600);
  --dx-utility-yellow-700: var(--dx-yellow-700);

  --dx-radius-none: 0;
  --dx-radius-xxs: 0.125rem;
  --dx-radius-xs: 0.25rem;
  --dx-radius-sm: 0.375rem;
  --dx-radius-md: 0.5rem;
  --dx-radius-xl: 0.75rem;
  --dx-radius-2xl: 1rem;
  --dx-radius-4xl: 1.5rem;
  --dx-radius-full: 624.9375rem;
  --dx-radius-lg: 0.625rem;
  --dx-radius-3xl: 1.25rem;
  --dx-spacing-none: 0;
  --dx-spacing-xxs: 0.125rem;
  --dx-spacing-xs: 0.25rem;
  --dx-spacing-md: 0.5rem;
  --dx-spacing-lg: 0.75rem;
  --dx-spacing-xl: 1rem;
  --dx-spacing-2xl: 1.25rem;
  --dx-spacing-3xl: 1.5rem;
  --dx-spacing-4xl: 2rem;
  --dx-spacing-6xl: 3rem;
  --dx-spacing-7xl: 4rem;
  --dx-spacing-8xl: 5rem;
  --dx-spacing-9xl: 6rem;
  --dx-spacing-10xl: 8rem;
  --dx-spacing-11xl: 10rem;
  --dx-spacing-sm: 0.375rem;
  --dx-spacing-5xl: 2.5rem;
  --dx-width-xxs: 20rem;
  --dx-width-sm: 30rem;
  --dx-width-lg: 40rem;
  --dx-width-xl: 48rem;
  --dx-width-2xl: 64rem;
  --dx-width-3xl: 80rem;
  --dx-width-4xl: 90rem;
  --dx-width-5xl: 100rem;
  --dx-width-6xl: 120rem;
  --dx-width-md: 35rem;
  --dx-paragraph-max-width: 45rem;
  --dx-width-xs: 24rem;
  --dx-container-max-width-desktop: 80rem;
  --dx-container-padding-desktop: 2rem;
  --dx-container-padding-mobile: 1rem;
  --dx-font-size-text-xs: 0.75rem;
  --dx-font-size-text-sm: 0.875rem;
  --dx-font-size-text-md: 1rem;
  --dx-font-size-text-lg: 1.125rem;
  --dx-font-size-text-xl: 1.25rem;
  --dx-font-size-display-xs: 1.5rem;
  --dx-font-size-display-sm: 1.875rem;
  --dx-font-size-display-md: 2.25rem;
  --dx-font-size-display-lg: 3rem;
  --dx-font-size-display-xl: 3.75rem;
  --dx-font-size-display-2xl: 4.5rem;
  --dx-line-height-text-xs: 1.125rem;
  --dx-line-height-text-sm: 1.25rem;
  --dx-line-height-text-md: 1.5rem;
  --dx-line-height-text-lg: 1.75rem;
  --dx-line-height-text-xl: 1.875rem;
  --dx-line-height-display-xs: 2rem;
  --dx-line-height-display-sm: 2.375rem;
  --dx-line-height-display-md: 2.75rem;
  --dx-line-height-display-lg: 3.75rem;
  --dx-line-height-display-xl: 4.5rem;
  --dx-line-height-display-2xl: 5.625rem;
  --dx-font-weight-regular: 400;
  --dx-font-weight-medium: 500;
  --dx-font-weight-semibold: 600;
  --dx-font-weight-bold: 700;
  --dx-font-family-body: "InterVariable", "Inter", system-ui, sans-serif;
  --dx-font-family-display: "Readex Pro", "InterVariable", "Inter", system-ui, sans-serif;
  --dx-font-family-arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;

  --dx-effect-shadow-xs: 0px 1px 2px 0px #0000000d;
  --dx-effect-shadow-sm: 0px 1px 2px -1px #0000001a, 0px 1px 3px 0px #0000001a;
  --dx-effect-shadow-md: 0px 2px 4px -2px #0000000f, 0px 4px 6px -1px #0000001a;
  --dx-effect-shadow-lg: 0px 2px 2px -1px #0000000a, 0px 4px 6px -2px #00000008, 0px 12px 16px -4px #00000014;
  --dx-effect-shadow-xl: 0px 3px 3px -1.5px #0000000a, 0px 8px 8px -4px #00000008, 0px 20px 24px -4px #00000014;
  --dx-effect-shadow-2xl: 0px 4px 4px -2px #0000000a, 0px 24px 48px -12px #0000002e;
  --dx-effect-focus-ring-shadow-xs: 0px 0px 0px 4px #0b999b, 0px 0px 0px 2px #ffffff, 0px 1px 2px 0px #0000000d;
  --dx-effect-focus-ring-error-shadow-xs: 0px 0px 0px 4px #ef4444, 0px 0px 0px 2px #ffffff, 0px 1px 2px 0px #0000000d;
  --dx-effect-focus-ring: 0px 0px 0px 4px #0b999b, 0px 0px 0px 2px #ffffff;
  --dx-effect-focus-ring-error: 0px 0px 0px 4px #ef4444, 0px 0px 0px 2px #ffffff;
  --dx-effect-focus-ring-shadow-sm: 0px 0px 0px 4px #0b999b, 0px 0px 0px 2px #ffffff, 0px 1px 2px 0px #0000001a, 0px 1px 3px 0px #0000001a;
  --dx-effect-shadow-3xl: 0px 5px 5px -2.5px #0000000a, 0px 32px 64px -12px #00000024;
  --dx-effect-shadow-xs-skeumorphic-dark: 0px 1px 2px 0px #0000000d, inset 0px 0px 0px 1px #00000033;
  --dx-effect-shadow-xs-skeuomorphic: 0px 1px 2px 0px #0000000d, inset 0px -2px 0px 0px #0000000d, inset 0px 0px 0px 1px #0000002e;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --dx-alpha-black-10: #ffffff1a;
  --dx-alpha-black-100: #ffffff;
  --dx-alpha-black-20: #ffffff33;
  --dx-alpha-black-30: #ffffff4d;
  --dx-alpha-black-40: #ffffff66;
  --dx-alpha-black-50: #ffffff80;
  --dx-alpha-black-60: #ffffff99;
  --dx-alpha-black-70: #ffffffb2;
  --dx-alpha-black-80: #ffffffcc;
  --dx-alpha-black-90: #ffffffe5;
  --dx-alpha-white-10: #0a0a0a1a;
  --dx-alpha-white-100: var(--dx-neutral-950);
  --dx-alpha-white-20: #0a0a0a33;
  --dx-alpha-white-30: #0a0a0a4d;
  --dx-alpha-white-40: #0a0a0a66;
  --dx-alpha-white-50: #0a0a0a80;
  --dx-alpha-white-60: #0a0a0a99;
  --dx-alpha-white-70: #0a0a0ab2;
  --dx-alpha-white-80: #0a0a0acc;
  --dx-alpha-white-90: #0a0a0ae5;
  --dx-app-store-badge-border: var(--dx-base-white);
  --dx-avatar-bg: #22262f;
  --dx-avatar-contrast-border: #ffffff1f;
  --dx-bg-active: var(--dx-neutral-800);
  --dx-bg-brand-primary: var(--dx-brand-500);
  --dx-bg-brand-primary-alt: var(--dx-neutral-900);
  --dx-bg-brand-secondary: var(--dx-brand-600);
  --dx-bg-brand-section: var(--dx-neutral-900);
  --dx-bg-brand-section-subtle: var(--dx-neutral-950);
  --dx-bg-brand-solid-hover: var(--dx-brand-500);
  --dx-bg-error-primary: var(--dx-red-950);
  --dx-bg-error-secondary: var(--dx-red-600);
  --dx-bg-error-solid-hover: var(--dx-red-500);
  --dx-bg-overlay: var(--dx-neutral-800);
  --dx-bg-primary: var(--dx-neutral-950);
  --dx-bg-primary-alt: var(--dx-neutral-900);
  --dx-bg-primary-hover: var(--dx-neutral-900);
  --dx-bg-primary-solid: var(--dx-neutral-800);
  --dx-bg-quaternary: var(--dx-neutral-700);
  --dx-bg-secondary: var(--dx-neutral-900);
  --dx-bg-secondary-alt: var(--dx-neutral-950);
  --dx-bg-secondary-hover: var(--dx-neutral-800);
  --dx-bg-success-primary: var(--dx-green-950);
  --dx-bg-success-secondary: var(--dx-green-600);
  --dx-bg-tertiary: var(--dx-neutral-800);
  --dx-bg-warning-primary: var(--dx-yellow-950);
  --dx-bg-warning-secondary: var(--dx-yellow-600);
  --dx-border-brand: var(--dx-brand-400);
  --dx-border-brand-alt: var(--dx-neutral-700);
  --dx-border-disabled-subtle: #22262f;
  --dx-border-error: var(--dx-red-400);
  --dx-border-error-subtle: var(--dx-red-500);
  --dx-border-primary: var(--dx-neutral-700);
  --dx-border-secondary: var(--dx-neutral-800);
  --dx-border-secondary-alt: var(--dx-neutral-800);
  --dx-border-tertiary: var(--dx-neutral-800);
  --dx-button-secondary-bg: #13161b;
  --dx-button-secondary-border: #373a41;
  --dx-button-secondary-fg: #cecfd2;
  --dx-button-tertiary-color-fg: #cecfd2;
  --dx-button-tertiary-error-fg: var(--dx-red-300);
  --dx-button-tertiary-fg: #94979c;
  --dx-featured-icon-dark-fg-brand: var(--dx-brand-200);
  --dx-featured-icon-light-fg-brand: var(--dx-brand-200);
  --dx-featured-icon-light-fg-error: var(--dx-red-200);
  --dx-featured-icon-light-fg-gray: var(--dx-neutral-200);
  --dx-featured-icon-light-fg-success: var(--dx-green-200);
  --dx-featured-icon-light-fg-warning: var(--dx-yellow-200);
  --dx-fg-brand-primary: var(--dx-brand-500);
  --dx-fg-brand-primary-alt: var(--dx-neutral-300);
  --dx-fg-brand-secondary-alt: var(--dx-neutral-600);
  --dx-fg-brand-secondary-hover: var(--dx-neutral-500);
  --dx-fg-disabled-subtle: #61656c;
  --dx-fg-error-primary: var(--dx-red-500);
  --dx-fg-error-secondary: var(--dx-red-400);
  --dx-fg-primary: var(--dx-base-white);
  --dx-fg-quaternary-400: var(--dx-neutral-500);
  --dx-fg-quaternary-500: #94979c;
  --dx-fg-quaternary-hover: var(--dx-neutral-400);
  --dx-fg-secondary: var(--dx-neutral-300);
  --dx-fg-secondary-hover: var(--dx-neutral-200);
  --dx-fg-success-primary: var(--dx-green-500);
  --dx-fg-success-secondary: var(--dx-green-400);
  --dx-fg-tertiary: var(--dx-neutral-400);
  --dx-fg-tertiary-hover: var(--dx-neutral-300);
  --dx-fg-warning-primary: var(--dx-yellow-500);
  --dx-fg-warning-secondary: var(--dx-yellow-400);
  --dx-footer-button-fg: var(--dx-neutral-300);
  --dx-footer-button-fg-hover: var(--dx-neutral-100);
  --dx-header-brand-text-secondary: var(--dx-neutral-300);
  --dx-icon-fg-brand: var(--dx-neutral-400);
  --dx-icon-fg-brand-on-brand: var(--dx-neutral-400);
  --dx-screen-mockup-border: var(--dx-neutral-700);
  --dx-shadow-2xl-01: var(--dx-base-transparent);
  --dx-shadow-2xl-02: var(--dx-base-transparent);
  --dx-shadow-3xl-01: var(--dx-base-transparent);
  --dx-shadow-3xl-02: var(--dx-base-transparent);
  --dx-shadow-grid-md: var(--dx-base-transparent);
  --dx-shadow-lg-01: var(--dx-base-transparent);
  --dx-shadow-lg-02: var(--dx-base-transparent);
  --dx-shadow-lg-03: var(--dx-base-transparent);
  --dx-shadow-main-centre-lg: var(--dx-base-transparent);
  --dx-shadow-main-centre-md: var(--dx-base-transparent);
  --dx-shadow-md-01: var(--dx-base-transparent);
  --dx-shadow-md-02: var(--dx-base-transparent);
  --dx-shadow-overlay-lg: var(--dx-base-transparent);
  --dx-shadow-sm-01: var(--dx-base-transparent);
  --dx-shadow-sm-02: var(--dx-base-transparent);
  --dx-shadow-xl-01: var(--dx-base-transparent);
  --dx-shadow-xl-02: var(--dx-base-transparent);
  --dx-shadow-xl-03: var(--dx-base-transparent);
  --dx-shadow-xs: var(--dx-base-transparent);
  --dx-slider-handle-bg: var(--dx-brand-500);
  --dx-slider-handle-border: var(--dx-neutral-950);
  --dx-text-brand-primary: var(--dx-neutral-50);
  --dx-text-brand-secondary: var(--dx-neutral-300);
  --dx-text-brand-secondary-hover: var(--dx-neutral-200);
  --dx-text-brand-tertiary: var(--dx-neutral-400);
  --dx-text-brand-tertiary-alt: var(--dx-neutral-50);
  --dx-text-disabled: #85888e;
  --dx-text-editor-icon-fg-active: var(--dx-base-white);
  --dx-text-error-primary: var(--dx-red-400);
  --dx-text-error-primary-hover: var(--dx-red-300);
  --dx-text-placeholder: var(--dx-neutral-400);
  --dx-text-primary: var(--dx-neutral-50);
  --dx-text-primary-on-brand: var(--dx-neutral-50);
  --dx-text-quaternary: var(--dx-neutral-400);
  --dx-text-quaternary-on-brand: var(--dx-neutral-400);
  --dx-text-secondary: var(--dx-neutral-300);
  --dx-text-secondary-hover: var(--dx-neutral-200);
  --dx-text-secondary-on-brand: var(--dx-neutral-300);
  --dx-text-success-primary: var(--dx-green-400);
  --dx-text-tertiary: var(--dx-neutral-400);
  --dx-text-tertiary-hover: var(--dx-neutral-300);
  --dx-text-tertiary-on-brand: var(--dx-neutral-400);
  --dx-text-warning-primary: var(--dx-yellow-400);
  --dx-thumbnail-badge-success-fg: #cecfd2;
  --dx-toggle-border: var(--dx-base-transparent);
  --dx-toggle-slim-border-pressed: var(--dx-base-transparent);
  --dx-toggle-slim-border-pressed-hover: var(--dx-base-transparent);
  --dx-tooltip-light-text-primary: var(--dx-base-white);
  --dx-utility-amber-100: var(--dx-amber-900);
  --dx-utility-amber-200: var(--dx-amber-800);
  --dx-utility-amber-300: var(--dx-amber-700);
  --dx-utility-amber-400: var(--dx-amber-600);
  --dx-utility-amber-50: var(--dx-amber-950);
  --dx-utility-amber-600: var(--dx-amber-400);
  --dx-utility-amber-700: var(--dx-amber-300);
  --dx-utility-blue-100: var(--dx-blue-900);
  --dx-utility-blue-200: var(--dx-blue-800);
  --dx-utility-blue-300: var(--dx-blue-700);
  --dx-utility-blue-400: var(--dx-blue-600);
  --dx-utility-blue-50: var(--dx-blue-950);
  --dx-utility-blue-600: var(--dx-blue-400);
  --dx-utility-blue-700: var(--dx-blue-300);
  --dx-utility-brand-100: var(--dx-brand-900);
  --dx-utility-brand-100-alt: var(--dx-neutral-800);
  --dx-utility-brand-200: var(--dx-brand-800);
  --dx-utility-brand-200-alt: var(--dx-neutral-700);
  --dx-utility-brand-300: var(--dx-brand-700);
  --dx-utility-brand-300-alt: var(--dx-neutral-700);
  --dx-utility-brand-400: var(--dx-brand-600);
  --dx-utility-brand-400-alt: var(--dx-neutral-600);
  --dx-utility-brand-50: var(--dx-brand-950);
  --dx-utility-brand-50-alt: var(--dx-neutral-900);
  --dx-utility-brand-500-alt: var(--dx-neutral-500);
  --dx-utility-brand-600: var(--dx-brand-400);
  --dx-utility-brand-600-alt: var(--dx-neutral-400);
  --dx-utility-brand-700: var(--dx-brand-300);
  --dx-utility-brand-700-alt: var(--dx-neutral-300);
  --dx-utility-brand-800: var(--dx-brand-200);
  --dx-utility-brand-800-alt: var(--dx-neutral-200);
  --dx-utility-brand-900: var(--dx-brand-100);
  --dx-utility-brand-900-alt: var(--dx-neutral-100);
  --dx-utility-emerald-100: var(--dx-emerald-900);
  --dx-utility-emerald-200: var(--dx-emerald-800);
  --dx-utility-emerald-300: var(--dx-emerald-700);
  --dx-utility-emerald-400: var(--dx-emerald-600);
  --dx-utility-emerald-50: var(--dx-emerald-950);
  --dx-utility-emerald-600: var(--dx-emerald-400);
  --dx-utility-emerald-700: var(--dx-emerald-300);
  --dx-utility-fuchsia-100: var(--dx-fuchsia-900);
  --dx-utility-fuchsia-200: var(--dx-fuchsia-800);
  --dx-utility-fuchsia-300: var(--dx-fuchsia-700);
  --dx-utility-fuchsia-400: var(--dx-fuchsia-600);
  --dx-utility-fuchsia-50: var(--dx-fuchsia-950);
  --dx-utility-fuchsia-600: var(--dx-fuchsia-400);
  --dx-utility-fuchsia-700: var(--dx-fuchsia-300);
  --dx-utility-green-100: var(--dx-green-900);
  --dx-utility-green-200: var(--dx-green-800);
  --dx-utility-green-300: var(--dx-green-700);
  --dx-utility-green-400: var(--dx-green-600);
  --dx-utility-green-50: var(--dx-green-950);
  --dx-utility-green-600: var(--dx-green-400);
  --dx-utility-green-700: var(--dx-green-300);
  --dx-utility-indigo-100: var(--dx-indigo-900);
  --dx-utility-indigo-200: var(--dx-indigo-800);
  --dx-utility-indigo-300: var(--dx-indigo-700);
  --dx-utility-indigo-400: var(--dx-indigo-600);
  --dx-utility-indigo-50: var(--dx-indigo-950);
  --dx-utility-indigo-600: var(--dx-indigo-400);
  --dx-utility-indigo-700: var(--dx-indigo-300);
  --dx-utility-neutral-100: var(--dx-neutral-800);
  --dx-utility-neutral-200: var(--dx-neutral-700);
  --dx-utility-neutral-300: var(--dx-neutral-700);
  --dx-utility-neutral-400: var(--dx-neutral-600);
  --dx-utility-neutral-50: var(--dx-neutral-900);
  --dx-utility-neutral-600: var(--dx-neutral-400);
  --dx-utility-neutral-700: var(--dx-neutral-300);
  --dx-utility-neutral-800: var(--dx-neutral-200);
  --dx-utility-neutral-900: var(--dx-neutral-100);
  --dx-utility-orange-100: var(--dx-orange-900);
  --dx-utility-orange-200: var(--dx-orange-800);
  --dx-utility-orange-300: var(--dx-orange-700);
  --dx-utility-orange-400: var(--dx-orange-600);
  --dx-utility-orange-50: var(--dx-orange-950);
  --dx-utility-orange-600: var(--dx-orange-400);
  --dx-utility-orange-700: var(--dx-orange-300);
  --dx-utility-pink-100: var(--dx-pink-900);
  --dx-utility-pink-200: var(--dx-pink-800);
  --dx-utility-pink-300: var(--dx-pink-700);
  --dx-utility-pink-400: var(--dx-pink-600);
  --dx-utility-pink-50: var(--dx-pink-950);
  --dx-utility-pink-600: var(--dx-pink-400);
  --dx-utility-pink-700: var(--dx-pink-300);
  --dx-utility-purple-100: var(--dx-purple-900);
  --dx-utility-purple-200: var(--dx-purple-800);
  --dx-utility-purple-300: var(--dx-purple-700);
  --dx-utility-purple-400: var(--dx-purple-600);
  --dx-utility-purple-50: var(--dx-purple-950);
  --dx-utility-purple-600: var(--dx-purple-400);
  --dx-utility-purple-700: var(--dx-purple-300);
  --dx-utility-red-100: var(--dx-red-900);
  --dx-utility-red-200: var(--dx-red-800);
  --dx-utility-red-300: var(--dx-red-700);
  --dx-utility-red-400: var(--dx-red-600);
  --dx-utility-red-50: var(--dx-red-950);
  --dx-utility-red-600: var(--dx-red-400);
  --dx-utility-red-700: var(--dx-red-300);
  --dx-utility-sky-100: var(--dx-sky-900);
  --dx-utility-sky-200: var(--dx-sky-800);
  --dx-utility-sky-300: var(--dx-sky-700);
  --dx-utility-sky-400: var(--dx-sky-600);
  --dx-utility-sky-50: var(--dx-sky-950);
  --dx-utility-sky-600: var(--dx-sky-400);
  --dx-utility-sky-700: var(--dx-sky-300);
  --dx-utility-slate-100: var(--dx-slate-900);
  --dx-utility-slate-200: var(--dx-slate-800);
  --dx-utility-slate-300: var(--dx-slate-700);
  --dx-utility-slate-400: var(--dx-slate-600);
  --dx-utility-slate-50: var(--dx-slate-950);
  --dx-utility-slate-600: var(--dx-slate-400);
  --dx-utility-slate-700: var(--dx-slate-300);
  --dx-utility-yellow-100: var(--dx-yellow-900);
  --dx-utility-yellow-200: var(--dx-yellow-800);
  --dx-utility-yellow-300: var(--dx-yellow-700);
  --dx-utility-yellow-400: var(--dx-yellow-600);
  --dx-utility-yellow-50: var(--dx-yellow-950);
  --dx-utility-yellow-600: var(--dx-yellow-400);
  --dx-utility-yellow-700: var(--dx-yellow-300);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --dx-alpha-black-10: #ffffff1a;
    --dx-alpha-black-100: #ffffff;
    --dx-alpha-black-20: #ffffff33;
    --dx-alpha-black-30: #ffffff4d;
    --dx-alpha-black-40: #ffffff66;
    --dx-alpha-black-50: #ffffff80;
    --dx-alpha-black-60: #ffffff99;
    --dx-alpha-black-70: #ffffffb2;
    --dx-alpha-black-80: #ffffffcc;
    --dx-alpha-black-90: #ffffffe5;
    --dx-alpha-white-10: #0a0a0a1a;
    --dx-alpha-white-100: var(--dx-neutral-950);
    --dx-alpha-white-20: #0a0a0a33;
    --dx-alpha-white-30: #0a0a0a4d;
    --dx-alpha-white-40: #0a0a0a66;
    --dx-alpha-white-50: #0a0a0a80;
    --dx-alpha-white-60: #0a0a0a99;
    --dx-alpha-white-70: #0a0a0ab2;
    --dx-alpha-white-80: #0a0a0acc;
    --dx-alpha-white-90: #0a0a0ae5;
    --dx-app-store-badge-border: var(--dx-base-white);
    --dx-avatar-bg: #22262f;
    --dx-avatar-contrast-border: #ffffff1f;
    --dx-bg-active: var(--dx-neutral-800);
    --dx-bg-brand-primary: var(--dx-brand-500);
    --dx-bg-brand-primary-alt: var(--dx-neutral-900);
    --dx-bg-brand-secondary: var(--dx-brand-600);
    --dx-bg-brand-section: var(--dx-neutral-900);
    --dx-bg-brand-section-subtle: var(--dx-neutral-950);
    --dx-bg-brand-solid-hover: var(--dx-brand-500);
    --dx-bg-error-primary: var(--dx-red-950);
    --dx-bg-error-secondary: var(--dx-red-600);
    --dx-bg-error-solid-hover: var(--dx-red-500);
    --dx-bg-overlay: var(--dx-neutral-800);
    --dx-bg-primary: var(--dx-neutral-950);
    --dx-bg-primary-alt: var(--dx-neutral-900);
    --dx-bg-primary-hover: var(--dx-neutral-900);
    --dx-bg-primary-solid: var(--dx-neutral-800);
    --dx-bg-quaternary: var(--dx-neutral-700);
    --dx-bg-secondary: var(--dx-neutral-900);
    --dx-bg-secondary-alt: var(--dx-neutral-950);
    --dx-bg-secondary-hover: var(--dx-neutral-800);
    --dx-bg-success-primary: var(--dx-green-950);
    --dx-bg-success-secondary: var(--dx-green-600);
    --dx-bg-tertiary: var(--dx-neutral-800);
    --dx-bg-warning-primary: var(--dx-yellow-950);
    --dx-bg-warning-secondary: var(--dx-yellow-600);
    --dx-border-brand: var(--dx-brand-400);
    --dx-border-brand-alt: var(--dx-neutral-700);
    --dx-border-disabled-subtle: #22262f;
    --dx-border-error: var(--dx-red-400);
    --dx-border-error-subtle: var(--dx-red-500);
    --dx-border-primary: var(--dx-neutral-700);
    --dx-border-secondary: var(--dx-neutral-800);
    --dx-border-secondary-alt: var(--dx-neutral-800);
    --dx-border-tertiary: var(--dx-neutral-800);
    --dx-button-secondary-bg: #13161b;
    --dx-button-secondary-border: #373a41;
    --dx-button-secondary-fg: #cecfd2;
    --dx-button-tertiary-color-fg: #cecfd2;
    --dx-button-tertiary-error-fg: var(--dx-red-300);
    --dx-button-tertiary-fg: #94979c;
    --dx-featured-icon-dark-fg-brand: var(--dx-brand-200);
    --dx-featured-icon-light-fg-brand: var(--dx-brand-200);
    --dx-featured-icon-light-fg-error: var(--dx-red-200);
    --dx-featured-icon-light-fg-gray: var(--dx-neutral-200);
    --dx-featured-icon-light-fg-success: var(--dx-green-200);
    --dx-featured-icon-light-fg-warning: var(--dx-yellow-200);
    --dx-fg-brand-primary: var(--dx-brand-500);
    --dx-fg-brand-primary-alt: var(--dx-neutral-300);
    --dx-fg-brand-secondary-alt: var(--dx-neutral-600);
    --dx-fg-brand-secondary-hover: var(--dx-neutral-500);
    --dx-fg-disabled-subtle: #61656c;
    --dx-fg-error-primary: var(--dx-red-500);
    --dx-fg-error-secondary: var(--dx-red-400);
    --dx-fg-primary: var(--dx-base-white);
    --dx-fg-quaternary-400: var(--dx-neutral-500);
    --dx-fg-quaternary-500: #94979c;
    --dx-fg-quaternary-hover: var(--dx-neutral-400);
    --dx-fg-secondary: var(--dx-neutral-300);
    --dx-fg-secondary-hover: var(--dx-neutral-200);
    --dx-fg-success-primary: var(--dx-green-500);
    --dx-fg-success-secondary: var(--dx-green-400);
    --dx-fg-tertiary: var(--dx-neutral-400);
    --dx-fg-tertiary-hover: var(--dx-neutral-300);
    --dx-fg-warning-primary: var(--dx-yellow-500);
    --dx-fg-warning-secondary: var(--dx-yellow-400);
    --dx-footer-button-fg: var(--dx-neutral-300);
    --dx-footer-button-fg-hover: var(--dx-neutral-100);
    --dx-header-brand-text-secondary: var(--dx-neutral-300);
    --dx-icon-fg-brand: var(--dx-neutral-400);
    --dx-icon-fg-brand-on-brand: var(--dx-neutral-400);
    --dx-screen-mockup-border: var(--dx-neutral-700);
    --dx-shadow-2xl-01: var(--dx-base-transparent);
    --dx-shadow-2xl-02: var(--dx-base-transparent);
    --dx-shadow-3xl-01: var(--dx-base-transparent);
    --dx-shadow-3xl-02: var(--dx-base-transparent);
    --dx-shadow-grid-md: var(--dx-base-transparent);
    --dx-shadow-lg-01: var(--dx-base-transparent);
    --dx-shadow-lg-02: var(--dx-base-transparent);
    --dx-shadow-lg-03: var(--dx-base-transparent);
    --dx-shadow-main-centre-lg: var(--dx-base-transparent);
    --dx-shadow-main-centre-md: var(--dx-base-transparent);
    --dx-shadow-md-01: var(--dx-base-transparent);
    --dx-shadow-md-02: var(--dx-base-transparent);
    --dx-shadow-overlay-lg: var(--dx-base-transparent);
    --dx-shadow-sm-01: var(--dx-base-transparent);
    --dx-shadow-sm-02: var(--dx-base-transparent);
    --dx-shadow-xl-01: var(--dx-base-transparent);
    --dx-shadow-xl-02: var(--dx-base-transparent);
    --dx-shadow-xl-03: var(--dx-base-transparent);
    --dx-shadow-xs: var(--dx-base-transparent);
    --dx-slider-handle-bg: var(--dx-brand-500);
    --dx-slider-handle-border: var(--dx-neutral-950);
    --dx-text-brand-primary: var(--dx-neutral-50);
    --dx-text-brand-secondary: var(--dx-neutral-300);
    --dx-text-brand-secondary-hover: var(--dx-neutral-200);
    --dx-text-brand-tertiary: var(--dx-neutral-400);
    --dx-text-brand-tertiary-alt: var(--dx-neutral-50);
    --dx-text-disabled: #85888e;
    --dx-text-editor-icon-fg-active: var(--dx-base-white);
    --dx-text-error-primary: var(--dx-red-400);
    --dx-text-error-primary-hover: var(--dx-red-300);
    --dx-text-placeholder: var(--dx-neutral-400);
    --dx-text-primary: var(--dx-neutral-50);
    --dx-text-primary-on-brand: var(--dx-neutral-50);
    --dx-text-quaternary: var(--dx-neutral-400);
    --dx-text-quaternary-on-brand: var(--dx-neutral-400);
    --dx-text-secondary: var(--dx-neutral-300);
    --dx-text-secondary-hover: var(--dx-neutral-200);
    --dx-text-secondary-on-brand: var(--dx-neutral-300);
    --dx-text-success-primary: var(--dx-green-400);
    --dx-text-tertiary: var(--dx-neutral-400);
    --dx-text-tertiary-hover: var(--dx-neutral-300);
    --dx-text-tertiary-on-brand: var(--dx-neutral-400);
    --dx-text-warning-primary: var(--dx-yellow-400);
    --dx-thumbnail-badge-success-fg: #cecfd2;
    --dx-toggle-border: var(--dx-base-transparent);
    --dx-toggle-slim-border-pressed: var(--dx-base-transparent);
    --dx-toggle-slim-border-pressed-hover: var(--dx-base-transparent);
    --dx-tooltip-light-text-primary: var(--dx-base-white);
    --dx-utility-amber-100: var(--dx-amber-900);
    --dx-utility-amber-200: var(--dx-amber-800);
    --dx-utility-amber-300: var(--dx-amber-700);
    --dx-utility-amber-400: var(--dx-amber-600);
    --dx-utility-amber-50: var(--dx-amber-950);
    --dx-utility-amber-600: var(--dx-amber-400);
    --dx-utility-amber-700: var(--dx-amber-300);
    --dx-utility-blue-100: var(--dx-blue-900);
    --dx-utility-blue-200: var(--dx-blue-800);
    --dx-utility-blue-300: var(--dx-blue-700);
    --dx-utility-blue-400: var(--dx-blue-600);
    --dx-utility-blue-50: var(--dx-blue-950);
    --dx-utility-blue-600: var(--dx-blue-400);
    --dx-utility-blue-700: var(--dx-blue-300);
    --dx-utility-brand-100: var(--dx-brand-900);
    --dx-utility-brand-100-alt: var(--dx-neutral-800);
    --dx-utility-brand-200: var(--dx-brand-800);
    --dx-utility-brand-200-alt: var(--dx-neutral-700);
    --dx-utility-brand-300: var(--dx-brand-700);
    --dx-utility-brand-300-alt: var(--dx-neutral-700);
    --dx-utility-brand-400: var(--dx-brand-600);
    --dx-utility-brand-400-alt: var(--dx-neutral-600);
    --dx-utility-brand-50: var(--dx-brand-950);
    --dx-utility-brand-50-alt: var(--dx-neutral-900);
    --dx-utility-brand-500-alt: var(--dx-neutral-500);
    --dx-utility-brand-600: var(--dx-brand-400);
    --dx-utility-brand-600-alt: var(--dx-neutral-400);
    --dx-utility-brand-700: var(--dx-brand-300);
    --dx-utility-brand-700-alt: var(--dx-neutral-300);
    --dx-utility-brand-800: var(--dx-brand-200);
    --dx-utility-brand-800-alt: var(--dx-neutral-200);
    --dx-utility-brand-900: var(--dx-brand-100);
    --dx-utility-brand-900-alt: var(--dx-neutral-100);
    --dx-utility-emerald-100: var(--dx-emerald-900);
    --dx-utility-emerald-200: var(--dx-emerald-800);
    --dx-utility-emerald-300: var(--dx-emerald-700);
    --dx-utility-emerald-400: var(--dx-emerald-600);
    --dx-utility-emerald-50: var(--dx-emerald-950);
    --dx-utility-emerald-600: var(--dx-emerald-400);
    --dx-utility-emerald-700: var(--dx-emerald-300);
    --dx-utility-fuchsia-100: var(--dx-fuchsia-900);
    --dx-utility-fuchsia-200: var(--dx-fuchsia-800);
    --dx-utility-fuchsia-300: var(--dx-fuchsia-700);
    --dx-utility-fuchsia-400: var(--dx-fuchsia-600);
    --dx-utility-fuchsia-50: var(--dx-fuchsia-950);
    --dx-utility-fuchsia-600: var(--dx-fuchsia-400);
    --dx-utility-fuchsia-700: var(--dx-fuchsia-300);
    --dx-utility-green-100: var(--dx-green-900);
    --dx-utility-green-200: var(--dx-green-800);
    --dx-utility-green-300: var(--dx-green-700);
    --dx-utility-green-400: var(--dx-green-600);
    --dx-utility-green-50: var(--dx-green-950);
    --dx-utility-green-600: var(--dx-green-400);
    --dx-utility-green-700: var(--dx-green-300);
    --dx-utility-indigo-100: var(--dx-indigo-900);
    --dx-utility-indigo-200: var(--dx-indigo-800);
    --dx-utility-indigo-300: var(--dx-indigo-700);
    --dx-utility-indigo-400: var(--dx-indigo-600);
    --dx-utility-indigo-50: var(--dx-indigo-950);
    --dx-utility-indigo-600: var(--dx-indigo-400);
    --dx-utility-indigo-700: var(--dx-indigo-300);
    --dx-utility-neutral-100: var(--dx-neutral-800);
    --dx-utility-neutral-200: var(--dx-neutral-700);
    --dx-utility-neutral-300: var(--dx-neutral-700);
    --dx-utility-neutral-400: var(--dx-neutral-600);
    --dx-utility-neutral-50: var(--dx-neutral-900);
    --dx-utility-neutral-600: var(--dx-neutral-400);
    --dx-utility-neutral-700: var(--dx-neutral-300);
    --dx-utility-neutral-800: var(--dx-neutral-200);
    --dx-utility-neutral-900: var(--dx-neutral-100);
    --dx-utility-orange-100: var(--dx-orange-900);
    --dx-utility-orange-200: var(--dx-orange-800);
    --dx-utility-orange-300: var(--dx-orange-700);
    --dx-utility-orange-400: var(--dx-orange-600);
    --dx-utility-orange-50: var(--dx-orange-950);
    --dx-utility-orange-600: var(--dx-orange-400);
    --dx-utility-orange-700: var(--dx-orange-300);
    --dx-utility-pink-100: var(--dx-pink-900);
    --dx-utility-pink-200: var(--dx-pink-800);
    --dx-utility-pink-300: var(--dx-pink-700);
    --dx-utility-pink-400: var(--dx-pink-600);
    --dx-utility-pink-50: var(--dx-pink-950);
    --dx-utility-pink-600: var(--dx-pink-400);
    --dx-utility-pink-700: var(--dx-pink-300);
    --dx-utility-purple-100: var(--dx-purple-900);
    --dx-utility-purple-200: var(--dx-purple-800);
    --dx-utility-purple-300: var(--dx-purple-700);
    --dx-utility-purple-400: var(--dx-purple-600);
    --dx-utility-purple-50: var(--dx-purple-950);
    --dx-utility-purple-600: var(--dx-purple-400);
    --dx-utility-purple-700: var(--dx-purple-300);
    --dx-utility-red-100: var(--dx-red-900);
    --dx-utility-red-200: var(--dx-red-800);
    --dx-utility-red-300: var(--dx-red-700);
    --dx-utility-red-400: var(--dx-red-600);
    --dx-utility-red-50: var(--dx-red-950);
    --dx-utility-red-600: var(--dx-red-400);
    --dx-utility-red-700: var(--dx-red-300);
    --dx-utility-sky-100: var(--dx-sky-900);
    --dx-utility-sky-200: var(--dx-sky-800);
    --dx-utility-sky-300: var(--dx-sky-700);
    --dx-utility-sky-400: var(--dx-sky-600);
    --dx-utility-sky-50: var(--dx-sky-950);
    --dx-utility-sky-600: var(--dx-sky-400);
    --dx-utility-sky-700: var(--dx-sky-300);
    --dx-utility-slate-100: var(--dx-slate-900);
    --dx-utility-slate-200: var(--dx-slate-800);
    --dx-utility-slate-300: var(--dx-slate-700);
    --dx-utility-slate-400: var(--dx-slate-600);
    --dx-utility-slate-50: var(--dx-slate-950);
    --dx-utility-slate-600: var(--dx-slate-400);
    --dx-utility-slate-700: var(--dx-slate-300);
    --dx-utility-yellow-100: var(--dx-yellow-900);
    --dx-utility-yellow-200: var(--dx-yellow-800);
    --dx-utility-yellow-300: var(--dx-yellow-700);
    --dx-utility-yellow-400: var(--dx-yellow-600);
    --dx-utility-yellow-50: var(--dx-yellow-950);
    --dx-utility-yellow-600: var(--dx-yellow-400);
    --dx-utility-yellow-700: var(--dx-yellow-300);
  }
}

/* Inter 4.0 variable, self-hosted (SIL OFL 1.1, see /assets/fonts/Inter-OFL-LICENSE.txt).
   No third-party font CDN: the Algerian ISP blocks some CDN ranges and the console
   must work offline from its own origin. Latin, Greek and Cyrillic only: Arabic
   needs its own face (open decision D-2 in specs/design-system.md). */
@font-face {
  font-family: "InterVariable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/InterVariable.woff2") format("woff2");
}

/* Readex Pro (logo and display, variable: wght 160-700 and HEXP) and IBM Plex Sans Arabic
   (Arabic UI), both SIL OFL 1.1; licence texts in /assets/fonts/. Converted from the TTFs in
   github.com/google/fonts at commit ddf386b to WOFF2 without changing glyphs, names or
   metadata (packages/ui/ASSETS.md). */
@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-weight: 160 700;
  font-display: swap;
  src: url("/assets/fonts/ReadexPro-VF.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/IBMPlexSansArabic-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/IBMPlexSansArabic-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/IBMPlexSansArabic-Bold.woff2") format("woff2");
}

:lang(ar) {
  font-family: var(--dx-font-family-arabic);
}

/* Teaser styles. Colour, type, radius and spacing come from @dropilux/ui tokens. The
   exception is the wordmark and headline scale, which fit the viewport (see README). */

:root {
  --gutter: clamp(var(--dx-spacing-xl), 3.2vw, var(--dx-spacing-7xl));
  /* The opening: the drop hits at --impact, the symbol condenses from --dock, and the name
     is complete at --land. teaser.js reads these so the shader stays in step. */
  --impact: 1900ms;
  --dock: 2350ms;
  --land: 3100ms;
  --headline: clamp(var(--dx-font-size-display-md), min(5.2vw, 8.5svh), 5.5rem);
  /* Full width when the window allows, otherwise whatever height the rest leaves. */
  --wordmark: min(24vw, (100svh - 3.2 * var(--headline) - 15rem) / 1.15);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--dx-brand-950);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--dx-brand-950);
  color: var(--dx-brand-100);
  font-family: var(--dx-font-family-body);
  font-size: var(--dx-font-size-text-md);
  line-height: var(--dx-line-height-text-md);
  -webkit-font-smoothing: antialiased;
}

:lang(ar) .headline {
  font-family: var(--dx-font-family-display);
}

p {
  margin: 0;
}

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

/* Poster: everything fits one viewport, the wordmark carries the bottom edge. */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto auto minmax(4.5rem, 1fr) auto auto;
  min-height: 100svh;
  padding: max(var(--dx-spacing-2xl), env(safe-area-inset-top))
    max(var(--gutter), env(safe-area-inset-right))
    max(var(--dx-spacing-xl), env(safe-area-inset-bottom))
    max(var(--gutter), env(safe-area-inset-left));
  overflow: hidden;
  cursor: crosshair;
}

.field {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

.bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dx-spacing-3xl);
  cursor: auto;
}

.status {
  display: flex;
  align-items: center;
  gap: var(--dx-spacing-md);
  color: var(--dx-brand-25);
  font-family: var(--dx-font-family-display);
  font-size: var(--dx-font-size-text-lg);
  line-height: var(--dx-line-height-text-lg);
}

[dir="rtl"] .status-symbol {
  scale: -1 1;
}

.langs a {
  font-size: var(--dx-font-size-text-sm);
  line-height: var(--dx-line-height-text-sm);
  color: var(--dx-brand-200);
}

.langs {
  display: flex;
  gap: var(--dx-spacing-xl);
}

.langs a {
  display: inline-block;
  padding-block: var(--dx-spacing-xs);
  text-decoration: none;
}

.langs a:hover {
  color: var(--dx-brand-25);
}

.langs a[aria-current] {
  color: var(--dx-brand-25);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.lead {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--dx-spacing-5xl) var(--dx-spacing-8xl);
  align-items: start;
  margin-top: clamp(var(--dx-spacing-3xl), 5vh, var(--dx-spacing-7xl));
  cursor: auto;
}

.headline {
  margin: 0;
  max-width: 13em;
  color: var(--dx-brand-25);
  font-family: var(--dx-font-family-display);
  font-size: var(--headline);
  font-weight: 300;
  font-variation-settings: "HEXP" 30;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.pitch {
  display: grid;
  gap: var(--dx-spacing-3xl);
  padding-top: var(--dx-spacing-md);
  max-width: 28rem;
  color: var(--dx-brand-100);
}

.pitch > p {
  text-wrap: pretty;
}

.early {
  display: grid;
  gap: var(--dx-spacing-md);
}

.early-label {
  font-size: var(--dx-font-size-text-sm);
  line-height: var(--dx-line-height-text-sm);
  font-weight: var(--dx-font-weight-medium);
  color: var(--dx-brand-100);
}

.early-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dx-spacing-md);
}

.early-input,
.early-submit {
  min-height: 2.75rem;
  border-radius: var(--dx-radius-md);
  font: inherit;
  font-size: var(--dx-font-size-text-md);
}

.early-input {
  flex: 1 1 13rem;
  min-width: 0;
  padding-inline: var(--dx-spacing-lg);
  border: 1px solid var(--dx-brand-600);
  background: var(--dx-brand-950);
  color: var(--dx-brand-25);
}

.early-input::placeholder {
  color: var(--dx-brand-300);
  opacity: 1;
}

:lang(ar) .early-input:placeholder-shown {
  text-align: end;
}

.early-input[aria-invalid="true"] {
  border-color: var(--dx-lux-400);
}

.early-submit {
  flex: 0 0 auto;
  padding-inline: var(--dx-spacing-xl);
  border: 0;
  background: var(--dx-brand-25);
  color: var(--dx-brand-950);
  font-weight: var(--dx-font-weight-semibold);
  cursor: pointer;
  transition: background-color 120ms linear;
}

.early-submit:hover {
  background: var(--dx-brand-200);
}

.early-submit:disabled {
  background: var(--dx-brand-300);
  cursor: progress;
}

.early-message {
  font-size: var(--dx-font-size-text-sm);
  line-height: var(--dx-line-height-text-sm);
  color: var(--dx-brand-200);
}

.early.is-error .early-message {
  color: var(--dx-lux-300);
}

.early.is-joined .early-message {
  color: var(--dx-lux-300);
  font-size: var(--dx-font-size-text-md);
  line-height: var(--dx-line-height-text-md);
}

.early.is-joined .early-row,
.early.is-joined .early-label {
  display: none;
}

/* Hidden from people; automated form fillers still complete it. */
.trap {
  position: absolute;
  inset-inline-start: -100vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

:focus-visible {
  outline: 2px solid var(--dx-brand-200);
  outline-offset: 2px;
}

.interfere {
  grid-row: 3;
  justify-self: end;
  align-self: end;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dx-brand-100);
  font: inherit;
  font-size: var(--dx-font-size-text-sm);
  text-decoration: underline;
  text-decoration-color: var(--dx-brand-400);
  text-underline-offset: 0.3em;
  cursor: pointer;
}

.interfere:hover {
  color: var(--dx-brand-25);
}

/* The wordmark: live text in Readex Pro SemiBold until the outlined SVG exists, with the
   dot of the i drawn as the Lux drop (ADR 0016). Kept LTR in every language. */
.wordmark {
  grid-row: 4;
  direction: ltr;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  color: var(--dx-brand-25);
  font-family: var(--dx-font-family-display);
  font-size: var(--wordmark);
  font-weight: var(--dx-font-weight-semibold);
  line-height: 1.15;
  letter-spacing: -0.035em;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

/* :lang(ar) from fonts.css sets a face on every element; the wordmark stays in Readex Pro. */
.wordmark span {
  font-family: inherit;
}

.wordmark-i {
  position: relative;
  display: inline-block;
}

.drop {
  position: absolute;
  top: 0.15em;
  left: 50%;
  width: 0.175em;
  height: auto;
  margin-left: -0.07em;
  overflow: visible;
  fill: var(--dx-lux-400);
}

.small-print {
  grid-row: 5;
  margin-top: var(--dx-spacing-md);
  font-size: var(--dx-font-size-text-xs);
  line-height: var(--dx-line-height-text-xs);
  color: var(--dx-brand-200);
}

/* Exceptions dropped into the flow. The ring sits on the hole the shader leaves. */
.stones {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.stone {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  padding: var(--dx-spacing-md);
  border: 1px solid var(--dx-brand-300);
  border-radius: var(--dx-radius-full);
  color: var(--dx-brand-25);
  font-family: var(--dx-font-family-display);
  font-size: var(--dx-font-size-text-sm);
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  scale: 0.4;
  transition:
    scale 520ms var(--ease-out),
    opacity 240ms linear,
    color 200ms linear,
    border-color 200ms linear;
}

.stone.is-in {
  opacity: 1;
  scale: 1;
}

.stone.is-resolved {
  border-color: var(--dx-lux-400);
  color: var(--dx-lux-300);
}

.stone.is-out {
  opacity: 0;
  scale: 0.2;
}

/* Symbol B, flat and in its own colours. It only moves; no effect touches the mark. */
.sigil {
  display: none;
}

.sigil-route {
  fill: none;
  stroke: var(--dx-brand-300);
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
}

.sigil-origin {
  fill: var(--dx-brand-300);
}

.sigil-drop {
  fill: var(--dx-lux-400);
}

/* Right-to-left: mirrored so the route still leads to the drop (brand/README.md). */
[dir="rtl"] .sigil-art {
  transform: translateX(64px) scaleX(-1);
}

/* The one orchestrated moment: the route sets out, stalls, pushes through; the drop lands and
   wakes the field; the symbol condenses into the dot of the i and the name appears. */
@media (prefers-reduced-motion: no-preference) {
  .sigil {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    overflow: visible;
    visibility: hidden;
    transform-origin: var(--origin-x, 71%) 31.64%;
    pointer-events: none;
    animation:
      sigil-dock 750ms cubic-bezier(0.7, 0, 0.2, 1) var(--dock) forwards,
      sigil-gone 1ms linear var(--land) forwards;
  }

  .sigil.is-placed {
    visibility: visible;
  }

  .sigil-route {
    stroke-dashoffset: 1;
    animation:
      route-draw 1500ms linear 300ms both,
      route-absorb 560ms cubic-bezier(0.6, 0, 0.9, 0.4) var(--dock) forwards;
  }

  .sigil-origin {
    transform-box: fill-box;
    transform-origin: center;
    animation:
      origin-in 340ms cubic-bezier(0.34, 1.56, 0.64, 1) 80ms both,
      origin-out 360ms ease-in var(--dock) forwards;
  }

  .sigil-drop {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: drop-land 560ms linear calc(var(--impact) - 380ms) both;
  }

  .wordmark > span,
  .interfere {
    animation: name-in 800ms var(--ease-out) calc(var(--land) - 350ms) both;
  }

  .drop path {
    animation: appear 1ms linear var(--land) both;
  }

  @keyframes route-draw {
    0% {
      stroke-dashoffset: 1;
      animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1);
    }
    44% {
      stroke-dashoffset: 0.5;
      animation-timing-function: linear;
    }
    60% {
      stroke-dashoffset: 0.47;
      animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    }
    100% {
      stroke-dashoffset: 0;
    }
  }

  @keyframes route-absorb {
    to {
      stroke-dashoffset: -1;
    }
  }

  @keyframes origin-in {
    from {
      scale: 0;
    }
  }

  @keyframes origin-out {
    to {
      scale: 0;
    }
  }

  @keyframes drop-land {
    0% {
      opacity: 0;
      transform: translateY(-56%) scale(0.9, 1.08);
      animation-timing-function: cubic-bezier(0.5, 0, 1, 0.7);
    }
    14% {
      opacity: 1;
    }
    68% {
      transform: translateY(0) scale(0.95, 1.05);
      animation-timing-function: cubic-bezier(0, 0, 0.3, 1);
    }
    80% {
      transform: scale(1.16, 0.82);
      animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes sigil-dock {
    to {
      transform: translate(var(--dock-x, 0), var(--dock-y, 0)) scale(var(--dock-scale, 0.3));
    }
  }

  @keyframes sigil-gone {
    to {
      visibility: hidden;
    }
  }

  @keyframes name-in {
    from {
      opacity: 0;
      filter: blur(0.04em);
    }
    to {
      opacity: 1;
      filter: blur(0);
    }
  }

  @keyframes appear {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* Phones and tablets: the poster takes the first screen, the pitch and form follow it. */
@media (max-width: 56rem), (max-height: 30rem) and (orientation: landscape) {
  :root {
    --headline: clamp(var(--dx-font-size-display-md), 10.4vw, 4rem);
    --wordmark: 24vw;
  }

  .hero {
    grid-template-rows: auto auto minmax(36svh, 1fr) auto auto auto;
  }

  .lead {
    display: contents;
  }

  .headline {
    grid-row: 2;
    margin-top: var(--dx-spacing-3xl);
  }

  .pitch {
    grid-row: 5;
    margin-top: var(--dx-spacing-3xl);
    padding-top: 0;
    max-width: 34rem;
  }

  .interfere {
    justify-self: start;
  }

  .small-print {
    grid-row: 6;
    margin-top: var(--dx-spacing-3xl);
  }
}

/* Phones on their side: the name and headline follow the height so the poster still fits. */
@media (max-height: 30rem) and (orientation: landscape) {
  :root {
    --headline: clamp(1.75rem, 9svh, 2.5rem);
    --wordmark: min(24vw, (100svh - 2.4 * var(--headline) - 10rem) / 1.15);
  }

  .hero {
    grid-template-rows: auto auto minmax(4.5rem, 1fr) auto auto auto;
  }

  .headline {
    max-width: none;
    margin-top: var(--dx-spacing-md);
  }
}

/* 404 keeps the ground and the wordmark, without the field. */
.lost {
  display: grid;
  place-content: center;
  gap: var(--dx-spacing-xl);
  min-height: 100svh;
  padding: var(--gutter);
  text-align: center;
}

.lost a {
  color: var(--dx-brand-25);
}