/* Design tokens for the recreation, hand-typed from the values documented in docs/tokens.json
   (Radix Colors scales + a semantic theme layer). No compiled CSS from the reference is reused.

   Theme resolution (mirrors the reference):
   - <html class="light-theme"> / <html class="dark-theme"> are set before first paint by the inline script in index.html.
   - With JS disabled (no class), the @media (prefers-color-scheme: dark) block below applies dark values. */

:root{
  --font-sans:Inter, -apple-system, system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;
  --radius-sm:4px; --radius-md:6px; --radius-lg:8px; --radius-xl:16px; --radius-2xl:20px; --radius-3xl:24px; --radius-card:40px; --radius-full:9999px;
  --container:1328px;
  --ease:cubic-bezier(.4,0,.2,1); --ease-out-quart:cubic-bezier(.25,1,.5,1); --dur:.15s;
}

/* ---------- LIGHT ---------- */
:root, .light-theme {
  --slate-1:#fcfcfd; --slate-2:#f9f9fb; --slate-3:#f0f0f3; --slate-4:#e8e8ec; --slate-5:#e0e1e6; --slate-6:#d9d9e0; --slate-7:#cdced6; --slate-8:#b9bbc6; --slate-9:#8b8d98; --slate-10:#80838d; --slate-11:#60646c; --slate-12:#1c2024;
  --blue-1:#fbfdff; --blue-2:#f4faff; --blue-3:#e6f4fe; --blue-4:#d5efff; --blue-5:#c2e5ff; --blue-6:#acd8fc; --blue-7:#8ec8f6; --blue-8:#5eb1ef; --blue-9:#0090ff; --blue-10:#0588f0; --blue-11:#0d74ce; --blue-12:#113264;
  --green-1:#fbfefc; --green-2:#f4fbf6; --green-3:#e6f6eb; --green-4:#d6f1df; --green-5:#c4e8d1; --green-6:#adddc0; --green-7:#8eceaa; --green-8:#5bb98b; --green-9:#30a46c; --green-10:#2b9a66; --green-11:#218358; --green-12:#193b2d;
  --amber-1:#fefdfb; --amber-2:#fefbe9; --amber-3:#fff7c2; --amber-4:#ffee9c; --amber-5:#fbe577; --amber-6:#f3d673; --amber-7:#e9c162; --amber-8:#e2a336; --amber-9:#ffc53d; --amber-10:#ffba18; --amber-11:#ab6400; --amber-12:#4f3422;
  --red-1:#fffcfc; --red-2:#fff7f7; --red-3:#feebec; --red-4:#ffdbdc; --red-5:#ffcdce; --red-6:#fdbdbe; --red-7:#f4a9aa; --red-8:#eb8e90; --red-9:#e5484d; --red-10:#dc3e42; --red-11:#ce2c31; --red-12:#641723;
  --orange-1:#fefcfb; --orange-2:#fff7ed; --orange-3:#ffefd6; --orange-4:#ffdfb5; --orange-5:#ffd19a; --orange-6:#ffc182; --orange-7:#f5ae73; --orange-8:#ec9455; --orange-9:#f76b15; --orange-10:#ef5f00; --orange-11:#cc4e00; --orange-12:#582d1d;
  --purple-1:#fefcfe; --purple-2:#fbf7fe; --purple-3:#f7edfe; --purple-4:#f2e2fc; --purple-5:#ead5f9; --purple-6:#e0c4f4; --purple-7:#d1afec; --purple-8:#be93e4; --purple-9:#8e4ec6; --purple-10:#8347b9; --purple-11:#8145b5; --purple-12:#402060;
  --pink-1:#fffcfe; --pink-2:#fef7fb; --pink-3:#fee9f5; --pink-4:#fbdcef; --pink-5:#f6cee7; --pink-6:#efbfdd; --pink-7:#e7acd0; --pink-8:#dd93c2; --pink-9:#d6409f; --pink-10:#cf3897; --pink-11:#c2298a; --pink-12:#651249;

  --white:#fff; --black:#000;
  --bg-default:var(--white); --bg-screen:var(--slate-1); --bg-subtle:var(--slate-2); --bg-element:var(--slate-3);
  --bg-hover:var(--slate-4); --bg-selected:var(--slate-5); --bg-overlay:var(--white);
  --bg-success:var(--green-3); --bg-warning:var(--amber-3); --bg-danger:var(--red-3); --bg-info:var(--blue-3); --bg-preview:var(--purple-3);
  --text-default:var(--slate-12); --text-secondary:var(--slate-11); --text-tertiary:var(--slate-10); --text-quaternary:var(--slate-9);
  --text-link:var(--blue-11); --text-success:var(--green-11); --text-warning:var(--amber-11); --text-danger:var(--red-11); --text-info:var(--blue-11);
  --icon-default:var(--slate-11); --icon-secondary:var(--slate-10); --icon-tertiary:var(--slate-9); --icon-quaternary:var(--slate-8);
  --icon-success:var(--green-10); --icon-info:var(--blue-10);
  --border-default:var(--slate-6); --border-secondary:var(--slate-5); --border-success:var(--green-7); --border-info:var(--blue-7);

  --btn-primary-bg:var(--black); --btn-primary-text:var(--white); --btn-primary-hover:var(--slate-11);
  --btn-secondary-bg:var(--slate-3); --btn-secondary-text:var(--slate-12); --btn-secondary-hover:var(--slate-5);
  --btn-tertiary-border:var(--slate-7); --btn-tertiary-text:var(--slate-12); --btn-tertiary-hover:var(--slate-3);
  --btn-quaternary-text:var(--slate-12); --btn-quaternary-hover:var(--slate-3);
  /* marketing CTAs (hero / CTA / learn-more) use palette black/white rather than the primary-button token */
  --cta-bg:var(--black); --cta-text:var(--white);

  --shadow-xs:0 1px 3px #00000006, 0 1px 2px #0000000d;
  --shadow-sm:0 3px 6px #00000014, 0 2px 4px #00000012;
  --shadow-md:0 10px 20px #0000001a, 0 3px 6px #0000000d;
  --shadow-lg:0 15px 25px #0000001f, 0 5px 10px #0000000d;
  --shadow-xl:0 20px 40px #00000026;

  /* component-level theme hooks */
  --overlay:rgb(0 0 0 / .4);
  --corner-bg:rgb(255 255 255 / .7);
  --burst-t0:.08; --burst-t1:.13; --burst-t2:.19; --burst-dots:.65;
  --burst-tile-stroke:color-mix(in srgb, var(--border-default) 20%, transparent); --burst-mark:var(--slate-12);
  --soft-pill-bg:var(--slate-5);
  --mock-bg:var(--white); --mock-line:var(--slate-4); --mock-line-strong:var(--slate-7);
  --stat-tile:linear-gradient(135deg,var(--slate-8),var(--slate-10)); --stat-tile-border:transparent;
  --cta-fade-to:var(--bg-default);
  --tile-shadow:0 5px 10px rgba(0,0,0,.05),0 15px 25px rgba(0,0,0,.12);
  --pill-hover-shadow:0 5px 14px -3px rgba(0,0,0,.24); --pill-tag-bg:var(--bg-default); --pill-tag-hover:var(--bg-default);
  --theme-btn-hover:var(--bg-element);
  --app-icon-ring:transparent;
  color-scheme:light;
}
@media (color-gamut:p3) {
  :root, .light-theme {
    --slate-1:color(display-p3 .988 .988 .992); --slate-2:color(display-p3 .976 .976 .984); --slate-3:color(display-p3 .94 .941 .953); --slate-4:color(display-p3 .908 .909 .925); --slate-5:color(display-p3 .88 .881 .901); --slate-6:color(display-p3 .85 .852 .876); --slate-7:color(display-p3 .805 .808 .838); --slate-8:color(display-p3 .727 .733 .773); --slate-9:color(display-p3 .547 .553 .592); --slate-10:color(display-p3 .503 .512 .549); --slate-11:color(display-p3 .379 .392 .421); --slate-12:color(display-p3 .113 .125 .14);
    --blue-1:color(display-p3 .986 .992 .999); --blue-2:color(display-p3 .96 .979 .998); --blue-3:color(display-p3 .912 .956 .991); --blue-4:color(display-p3 .853 .932 1); --blue-5:color(display-p3 .788 .894 .998); --blue-6:color(display-p3 .709 .843 .976); --blue-7:color(display-p3 .606 .777 .947); --blue-8:color(display-p3 .451 .688 .917); --blue-9:color(display-p3 .247 .556 .969); --blue-10:color(display-p3 .234 .523 .912); --blue-11:color(display-p3 .15 .44 .84); --blue-12:color(display-p3 .102 .193 .379);
    --green-1:color(display-p3 .986 .996 .989); --green-2:color(display-p3 .963 .983 .967); --green-3:color(display-p3 .913 .964 .925); --green-4:color(display-p3 .859 .94 .879); --green-5:color(display-p3 .796 .907 .826); --green-6:color(display-p3 .718 .863 .761); --green-7:color(display-p3 .61 .801 .675); --green-8:color(display-p3 .451 .715 .559); --green-9:color(display-p3 .332 .634 .442); --green-10:color(display-p3 .308 .595 .417); --green-11:color(display-p3 .19 .5 .32); --green-12:color(display-p3 .132 .228 .18);
    --amber-1:color(display-p3 .995 .992 .985); --amber-2:color(display-p3 .994 .986 .921); --amber-3:color(display-p3 .994 .969 .782); --amber-4:color(display-p3 .989 .937 .65); --amber-5:color(display-p3 .97 .902 .527); --amber-6:color(display-p3 .936 .844 .506); --amber-7:color(display-p3 .89 .762 .443); --amber-8:color(display-p3 .85 .65 .3); --amber-9:color(display-p3 1 .77 .26); --amber-10:color(display-p3 .959 .741 .274); --amber-11:color(display-p3 .64 .4 0); --amber-12:color(display-p3 .294 .208 .145);
    --red-1:color(display-p3 .998 .989 .988); --red-2:color(display-p3 .995 .971 .971); --red-3:color(display-p3 .985 .925 .925); --red-4:color(display-p3 .999 .866 .866); --red-5:color(display-p3 .984 .812 .811); --red-6:color(display-p3 .955 .751 .749); --red-7:color(display-p3 .915 .675 .672); --red-8:color(display-p3 .872 .575 .572); --red-9:color(display-p3 .83 .329 .324); --red-10:color(display-p3 .798 .294 .285); --red-11:color(display-p3 .744 .234 .222); --red-12:color(display-p3 .36 .115 .143);
    --orange-1:color(display-p3 .995 .988 .985); --orange-2:color(display-p3 .994 .968 .934); --orange-3:color(display-p3 .989 .938 .85); --orange-4:color(display-p3 1 .874 .687); --orange-5:color(display-p3 1 .821 .583); --orange-6:color(display-p3 .975 .767 .545); --orange-7:color(display-p3 .919 .693 .486); --orange-8:color(display-p3 .877 .597 .379); --orange-9:color(display-p3 .9 .45 .2); --orange-10:color(display-p3 .87 .409 .164); --orange-11:color(display-p3 .76 .34 0); --orange-12:color(display-p3 .323 .185 .127);
    --purple-1:color(display-p3 .995 .988 .996); --purple-2:color(display-p3 .983 .971 .993); --purple-3:color(display-p3 .963 .931 .989); --purple-4:color(display-p3 .937 .888 .981); --purple-5:color(display-p3 .904 .837 .966); --purple-6:color(display-p3 .86 .774 .942); --purple-7:color(display-p3 .799 .69 .91); --purple-8:color(display-p3 .719 .583 .874); --purple-9:color(display-p3 .523 .318 .751); --purple-10:color(display-p3 .483 .289 .7); --purple-11:color(display-p3 .473 .281 .687); --purple-12:color(display-p3 .234 .132 .363);
    --pink-1:color(display-p3 .998 .989 .996); --pink-2:color(display-p3 .992 .97 .985); --pink-3:color(display-p3 .981 .917 .96); --pink-4:color(display-p3 .963 .867 .932); --pink-5:color(display-p3 .939 .815 .899); --pink-6:color(display-p3 .907 .756 .859); --pink-7:color(display-p3 .869 .683 .81); --pink-8:color(display-p3 .825 .59 .751); --pink-9:color(display-p3 .775 .297 .61); --pink-10:color(display-p3 .748 .27 .581); --pink-11:color(display-p3 .698 .219 .528); --pink-12:color(display-p3 .363 .101 .279);
  }
}

/* ---------- DARK (explicit choice) ---------- */
.dark-theme {
  --slate-1:#111113; --slate-2:#18191b; --slate-3:#212225; --slate-4:#272a2d; --slate-5:#2e3135; --slate-6:#363a3f; --slate-7:#43484e; --slate-8:#5a6169; --slate-9:#696e77; --slate-10:#777b84; --slate-11:#b0b4ba; --slate-12:#edeef0;
  --blue-1:#0d1520; --blue-2:#111927; --blue-3:#0d2847; --blue-4:#003362; --blue-5:#004074; --blue-6:#104d87; --blue-7:#205d9e; --blue-8:#2870bd; --blue-9:#0090ff; --blue-10:#3b9eff; --blue-11:#70b8ff; --blue-12:#c2e6ff;
  --green-1:#0e1512; --green-2:#121b17; --green-3:#132d21; --green-4:#113b29; --green-5:#174933; --green-6:#20573e; --green-7:#28684a; --green-8:#2f7c57; --green-9:#30a46c; --green-10:#33b074; --green-11:#3dd68c; --green-12:#b1f1cb;
  --amber-1:#16120c; --amber-2:#1d180f; --amber-3:#302008; --amber-4:#3f2700; --amber-5:#4d3000; --amber-6:#5c3d05; --amber-7:#714f19; --amber-8:#8f6424; --amber-9:#ffc53d; --amber-10:#ffd60a; --amber-11:#ffca16; --amber-12:#ffe7b3;
  --red-1:#191111; --red-2:#201314; --red-3:#3b1219; --red-4:#500f1c; --red-5:#611623; --red-6:#72232d; --red-7:#8c333a; --red-8:#b54548; --red-9:#e5484d; --red-10:#ec5d5e; --red-11:#ff9592; --red-12:#ffd1d9;
  --orange-1:#17120e; --orange-2:#1e160f; --orange-3:#331e0b; --orange-4:#462100; --orange-5:#562800; --orange-6:#66350c; --orange-7:#7e451d; --orange-8:#a35829; --orange-9:#f76b15; --orange-10:#ff801f; --orange-11:#ffa057; --orange-12:#ffe0c2;
  --purple-1:#18111b; --purple-2:#1e1523; --purple-3:#301c3b; --purple-4:#3d224e; --purple-5:#48295c; --purple-6:#54346b; --purple-7:#664282; --purple-8:#8457aa; --purple-9:#8e4ec6; --purple-10:#9a5cd0; --purple-11:#d19dff; --purple-12:#ecd9fa;
  --pink-1:#191117; --pink-2:#21121d; --pink-3:#37172f; --pink-4:#4b143d; --pink-5:#591c47; --pink-6:#692955; --pink-7:#833869; --pink-8:#a84885; --pink-9:#d6409f; --pink-10:#de51a8; --pink-11:#ff8dcc; --pink-12:#fdd1ea;

  --bg-default:#111113; --bg-screen:#0c0d0e; --bg-overlay:var(--slate-2);
  --btn-primary-bg:var(--white); --btn-primary-text:#111113; --btn-primary-hover:#ccc;
  --btn-secondary-text:var(--white); --btn-tertiary-border:var(--slate-5); --btn-tertiary-text:var(--white); --btn-tertiary-hover:var(--slate-4);
  --btn-quaternary-text:var(--white); --btn-quaternary-hover:var(--slate-3);
  --cta-bg:var(--white); --cta-text:var(--black);
  --shadow-xs:0 1px 3px #0000004d, 0 1px 2px #0000004d;
  --shadow-sm:0 3px 6px #0006, 0 2px 4px #00000040;
  --shadow-md:0 10px 20px #00000040, 0 3px 6px #00000040;
  --shadow-lg:0 15px 25px #00000080, 0 5px 10px #00000040;
  --shadow-xl:0 20px 40px #00000080;
  --overlay:rgb(255 255 255 / .1);
  --corner-bg:rgb(0 0 0 / .4);
  --burst-t0:.14; --burst-t1:.22; --burst-t2:.32; --burst-dots:.9;
  --burst-tile-stroke:transparent; --burst-mark:var(--black);
  --soft-pill-bg:rgb(54 58 63 / .6);
  --mock-bg:#0a0a0b; --mock-line:var(--slate-4); --mock-line-strong:var(--slate-7);
  --stat-tile:#303030; --stat-tile-border:rgb(255 255 255 / .4);
  --cta-fade-to:var(--black);
  --tile-shadow:0 5px 10px rgba(255,255,255,.05),0 15px 25px rgba(255,255,255,.12);
  --pill-hover-shadow:0 8px 22px -4px rgba(0,0,0,.7); --pill-tag-bg:var(--bg-element); --pill-tag-hover:var(--bg-hover);
  --theme-btn-hover:var(--bg-subtle);
  --app-icon-ring:rgb(255 255 255 / .06);
  color-scheme:dark;
}
@media (color-gamut:p3) {
  .dark-theme {
    --slate-1:color(display-p3 .067 .067 .074); --slate-2:color(display-p3 .095 .098 .105); --slate-3:color(display-p3 .13 .135 .145); --slate-4:color(display-p3 .156 .163 .176); --slate-5:color(display-p3 .183 .191 .206); --slate-6:color(display-p3 .215 .226 .244); --slate-7:color(display-p3 .265 .28 .302); --slate-8:color(display-p3 .357 .381 .409); --slate-9:color(display-p3 .415 .431 .463); --slate-10:color(display-p3 .469 .483 .514); --slate-11:color(display-p3 .692 .704 .728); --slate-12:color(display-p3 .93 .933 .94);
    --blue-1:color(display-p3 .057 .081 .122); --blue-2:color(display-p3 .072 .098 .147); --blue-3:color(display-p3 .078 .154 .27); --blue-4:color(display-p3 .033 .197 .37); --blue-5:color(display-p3 .08 .245 .441); --blue-6:color(display-p3 .14 .298 .511); --blue-7:color(display-p3 .195 .361 .6); --blue-8:color(display-p3 .239 .434 .72); --blue-9:color(display-p3 .247 .556 .969); --blue-10:color(display-p3 .344 .612 .973); --blue-11:color(display-p3 .49 .72 1); --blue-12:color(display-p3 .788 .898 .99);
    --green-1:color(display-p3 .062 .083 .071); --green-2:color(display-p3 .079 .106 .09); --green-3:color(display-p3 .1 .173 .133); --green-4:color(display-p3 .115 .229 .166); --green-5:color(display-p3 .147 .282 .206); --green-6:color(display-p3 .185 .338 .25); --green-7:color(display-p3 .227 .403 .298); --green-8:color(display-p3 .27 .479 .351); --green-9:color(display-p3 .332 .634 .442); --green-10:color(display-p3 .357 .682 .474); --green-11:color(display-p3 .434 .828 .573); --green-12:color(display-p3 .747 .938 .807);
    --amber-1:color(display-p3 .082 .07 .05); --amber-2:color(display-p3 .111 .094 .064); --amber-3:color(display-p3 .178 .128 .049); --amber-4:color(display-p3 .239 .156 0); --amber-5:color(display-p3 .29 .193 0); --amber-6:color(display-p3 .344 .245 .076); --amber-7:color(display-p3 .422 .314 .141); --amber-8:color(display-p3 .535 .399 .189); --amber-9:color(display-p3 1 .77 .26); --amber-10:color(display-p3 1 .87 .15); --amber-11:color(display-p3 1 .8 .29); --amber-12:color(display-p3 .984 .909 .726);
    --red-1:color(display-p3 .093 .068 .067); --red-2:color(display-p3 .118 .077 .079); --red-3:color(display-p3 .211 .081 .099); --red-4:color(display-p3 .287 .079 .113); --red-5:color(display-p3 .348 .11 .142); --red-6:color(display-p3 .414 .16 .183); --red-7:color(display-p3 .508 .224 .236); --red-8:color(display-p3 .659 .298 .297); --red-9:color(display-p3 .83 .329 .324); --red-10:color(display-p3 .861 .403 .387); --red-11:color(display-p3 1 .57 .55); --red-12:color(display-p3 .971 .826 .852);
    --orange-1:color(display-p3 .088 .07 .057); --orange-2:color(display-p3 .113 .089 .061); --orange-3:color(display-p3 .189 .12 .056); --orange-4:color(display-p3 .262 .132 0); --orange-5:color(display-p3 .315 .168 .016); --orange-6:color(display-p3 .376 .219 .088); --orange-7:color(display-p3 .465 .283 .147); --orange-8:color(display-p3 .601 .359 .201); --orange-9:color(display-p3 .9 .45 .2); --orange-10:color(display-p3 .98 .51 .23); --orange-11:color(display-p3 1 .63 .38); --orange-12:color(display-p3 .98 .883 .775);
    --purple-1:color(display-p3 .09 .068 .103); --purple-2:color(display-p3 .113 .082 .134); --purple-3:color(display-p3 .175 .112 .224); --purple-4:color(display-p3 .224 .137 .297); --purple-5:color(display-p3 .264 .167 .349); --purple-6:color(display-p3 .311 .208 .406); --purple-7:color(display-p3 .381 .266 .496); --purple-8:color(display-p3 .49 .349 .649); --purple-9:color(display-p3 .523 .318 .751); --purple-10:color(display-p3 .57 .373 .791); --purple-11:color(display-p3 .8 .62 1); --purple-12:color(display-p3 .913 .854 .971);
    --pink-1:color(display-p3 .093 .068 .089); --pink-2:color(display-p3 .121 .073 .11); --pink-3:color(display-p3 .198 .098 .179); --pink-4:color(display-p3 .271 .095 .231); --pink-5:color(display-p3 .32 .127 .273); --pink-6:color(display-p3 .382 .177 .326); --pink-7:color(display-p3 .477 .238 .405); --pink-8:color(display-p3 .612 .304 .51); --pink-9:color(display-p3 .775 .297 .61); --pink-10:color(display-p3 .808 .356 .645); --pink-11:color(display-p3 1 .535 .78); --pink-12:color(display-p3 .964 .826 .912);
  }
}

/* ---------- DARK (no class yet / JS off: follow the OS) ---------- */
@media (prefers-color-scheme: dark) {
  :root:where(:not(.light-theme)) {
  --slate-1:#111113; --slate-2:#18191b; --slate-3:#212225; --slate-4:#272a2d; --slate-5:#2e3135; --slate-6:#363a3f; --slate-7:#43484e; --slate-8:#5a6169; --slate-9:#696e77; --slate-10:#777b84; --slate-11:#b0b4ba; --slate-12:#edeef0;
  --blue-1:#0d1520; --blue-2:#111927; --blue-3:#0d2847; --blue-4:#003362; --blue-5:#004074; --blue-6:#104d87; --blue-7:#205d9e; --blue-8:#2870bd; --blue-9:#0090ff; --blue-10:#3b9eff; --blue-11:#70b8ff; --blue-12:#c2e6ff;
  --green-1:#0e1512; --green-2:#121b17; --green-3:#132d21; --green-4:#113b29; --green-5:#174933; --green-6:#20573e; --green-7:#28684a; --green-8:#2f7c57; --green-9:#30a46c; --green-10:#33b074; --green-11:#3dd68c; --green-12:#b1f1cb;
  --amber-1:#16120c; --amber-2:#1d180f; --amber-3:#302008; --amber-4:#3f2700; --amber-5:#4d3000; --amber-6:#5c3d05; --amber-7:#714f19; --amber-8:#8f6424; --amber-9:#ffc53d; --amber-10:#ffd60a; --amber-11:#ffca16; --amber-12:#ffe7b3;
  --red-1:#191111; --red-2:#201314; --red-3:#3b1219; --red-4:#500f1c; --red-5:#611623; --red-6:#72232d; --red-7:#8c333a; --red-8:#b54548; --red-9:#e5484d; --red-10:#ec5d5e; --red-11:#ff9592; --red-12:#ffd1d9;
  --orange-1:#17120e; --orange-2:#1e160f; --orange-3:#331e0b; --orange-4:#462100; --orange-5:#562800; --orange-6:#66350c; --orange-7:#7e451d; --orange-8:#a35829; --orange-9:#f76b15; --orange-10:#ff801f; --orange-11:#ffa057; --orange-12:#ffe0c2;
  --purple-1:#18111b; --purple-2:#1e1523; --purple-3:#301c3b; --purple-4:#3d224e; --purple-5:#48295c; --purple-6:#54346b; --purple-7:#664282; --purple-8:#8457aa; --purple-9:#8e4ec6; --purple-10:#9a5cd0; --purple-11:#d19dff; --purple-12:#ecd9fa;
  --pink-1:#191117; --pink-2:#21121d; --pink-3:#37172f; --pink-4:#4b143d; --pink-5:#591c47; --pink-6:#692955; --pink-7:#833869; --pink-8:#a84885; --pink-9:#d6409f; --pink-10:#de51a8; --pink-11:#ff8dcc; --pink-12:#fdd1ea;

  --bg-default:#111113; --bg-screen:#0c0d0e; --bg-overlay:var(--slate-2);
  --btn-primary-bg:var(--white); --btn-primary-text:#111113; --btn-primary-hover:#ccc;
  --btn-secondary-text:var(--white); --btn-tertiary-border:var(--slate-5); --btn-tertiary-text:var(--white); --btn-tertiary-hover:var(--slate-4);
  --btn-quaternary-text:var(--white); --btn-quaternary-hover:var(--slate-3);
  --cta-bg:var(--white); --cta-text:var(--black);
  --shadow-xs:0 1px 3px #0000004d, 0 1px 2px #0000004d;
  --shadow-sm:0 3px 6px #0006, 0 2px 4px #00000040;
  --shadow-md:0 10px 20px #00000040, 0 3px 6px #00000040;
  --shadow-lg:0 15px 25px #00000080, 0 5px 10px #00000040;
  --shadow-xl:0 20px 40px #00000080;
  --overlay:rgb(255 255 255 / .1);
  --corner-bg:rgb(0 0 0 / .4);
  --burst-t0:.14; --burst-t1:.22; --burst-t2:.32; --burst-dots:.9;
  --burst-tile-stroke:transparent; --burst-mark:var(--black);
  --soft-pill-bg:rgb(54 58 63 / .6);
  --mock-bg:#0a0a0b; --mock-line:var(--slate-4); --mock-line-strong:var(--slate-7);
  --stat-tile:#303030; --stat-tile-border:rgb(255 255 255 / .4);
  --cta-fade-to:var(--black);
  --tile-shadow:0 5px 10px rgba(255,255,255,.05),0 15px 25px rgba(255,255,255,.12);
  --pill-hover-shadow:0 8px 22px -4px rgba(0,0,0,.7); --pill-tag-bg:var(--bg-element); --pill-tag-hover:var(--bg-hover);
  --theme-btn-hover:var(--bg-subtle);
  --app-icon-ring:rgb(255 255 255 / .06);
  color-scheme:dark;
  }
}
@media (prefers-color-scheme: dark) and (color-gamut:p3) {
  :root:where(:not(.light-theme)) {
    --slate-1:color(display-p3 .067 .067 .074); --slate-2:color(display-p3 .095 .098 .105); --slate-3:color(display-p3 .13 .135 .145); --slate-4:color(display-p3 .156 .163 .176); --slate-5:color(display-p3 .183 .191 .206); --slate-6:color(display-p3 .215 .226 .244); --slate-7:color(display-p3 .265 .28 .302); --slate-8:color(display-p3 .357 .381 .409); --slate-9:color(display-p3 .415 .431 .463); --slate-10:color(display-p3 .469 .483 .514); --slate-11:color(display-p3 .692 .704 .728); --slate-12:color(display-p3 .93 .933 .94);
    --blue-1:color(display-p3 .057 .081 .122); --blue-2:color(display-p3 .072 .098 .147); --blue-3:color(display-p3 .078 .154 .27); --blue-4:color(display-p3 .033 .197 .37); --blue-5:color(display-p3 .08 .245 .441); --blue-6:color(display-p3 .14 .298 .511); --blue-7:color(display-p3 .195 .361 .6); --blue-8:color(display-p3 .239 .434 .72); --blue-9:color(display-p3 .247 .556 .969); --blue-10:color(display-p3 .344 .612 .973); --blue-11:color(display-p3 .49 .72 1); --blue-12:color(display-p3 .788 .898 .99);
    --green-1:color(display-p3 .062 .083 .071); --green-2:color(display-p3 .079 .106 .09); --green-3:color(display-p3 .1 .173 .133); --green-4:color(display-p3 .115 .229 .166); --green-5:color(display-p3 .147 .282 .206); --green-6:color(display-p3 .185 .338 .25); --green-7:color(display-p3 .227 .403 .298); --green-8:color(display-p3 .27 .479 .351); --green-9:color(display-p3 .332 .634 .442); --green-10:color(display-p3 .357 .682 .474); --green-11:color(display-p3 .434 .828 .573); --green-12:color(display-p3 .747 .938 .807);
    --amber-1:color(display-p3 .082 .07 .05); --amber-2:color(display-p3 .111 .094 .064); --amber-3:color(display-p3 .178 .128 .049); --amber-4:color(display-p3 .239 .156 0); --amber-5:color(display-p3 .29 .193 0); --amber-6:color(display-p3 .344 .245 .076); --amber-7:color(display-p3 .422 .314 .141); --amber-8:color(display-p3 .535 .399 .189); --amber-9:color(display-p3 1 .77 .26); --amber-10:color(display-p3 1 .87 .15); --amber-11:color(display-p3 1 .8 .29); --amber-12:color(display-p3 .984 .909 .726);
    --red-1:color(display-p3 .093 .068 .067); --red-2:color(display-p3 .118 .077 .079); --red-3:color(display-p3 .211 .081 .099); --red-4:color(display-p3 .287 .079 .113); --red-5:color(display-p3 .348 .11 .142); --red-6:color(display-p3 .414 .16 .183); --red-7:color(display-p3 .508 .224 .236); --red-8:color(display-p3 .659 .298 .297); --red-9:color(display-p3 .83 .329 .324); --red-10:color(display-p3 .861 .403 .387); --red-11:color(display-p3 1 .57 .55); --red-12:color(display-p3 .971 .826 .852);
    --orange-1:color(display-p3 .088 .07 .057); --orange-2:color(display-p3 .113 .089 .061); --orange-3:color(display-p3 .189 .12 .056); --orange-4:color(display-p3 .262 .132 0); --orange-5:color(display-p3 .315 .168 .016); --orange-6:color(display-p3 .376 .219 .088); --orange-7:color(display-p3 .465 .283 .147); --orange-8:color(display-p3 .601 .359 .201); --orange-9:color(display-p3 .9 .45 .2); --orange-10:color(display-p3 .98 .51 .23); --orange-11:color(display-p3 1 .63 .38); --orange-12:color(display-p3 .98 .883 .775);
    --purple-1:color(display-p3 .09 .068 .103); --purple-2:color(display-p3 .113 .082 .134); --purple-3:color(display-p3 .175 .112 .224); --purple-4:color(display-p3 .224 .137 .297); --purple-5:color(display-p3 .264 .167 .349); --purple-6:color(display-p3 .311 .208 .406); --purple-7:color(display-p3 .381 .266 .496); --purple-8:color(display-p3 .49 .349 .649); --purple-9:color(display-p3 .523 .318 .751); --purple-10:color(display-p3 .57 .373 .791); --purple-11:color(display-p3 .8 .62 1); --purple-12:color(display-p3 .913 .854 .971);
    --pink-1:color(display-p3 .093 .068 .089); --pink-2:color(display-p3 .121 .073 .11); --pink-3:color(display-p3 .198 .098 .179); --pink-4:color(display-p3 .271 .095 .231); --pink-5:color(display-p3 .32 .127 .273); --pink-6:color(display-p3 .382 .177 .326); --pink-7:color(display-p3 .477 .238 .405); --pink-8:color(display-p3 .612 .304 .51); --pink-9:color(display-p3 .775 .297 .61); --pink-10:color(display-p3 .808 .356 .645); --pink-11:color(display-p3 1 .535 .78); --pink-12:color(display-p3 .964 .826 .912);
  }
}