@import url('https://fonts.cdnfonts.com/css/gilroy-bold');

:root {
    --font-sans: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --color-red-300: oklch(80.8% .114 19.571);
    --color-red-400: oklch(70.4% .191 22.216);
    --color-red-500: oklch(63.7% .237 25.331);
    --color-red-900: oklch(39.6% .141 25.723);
    --color-green-500: oklch(72.3% .219 149.579);
    --color-cyan-500: oklch(71.5% .143 215.221);
    --color-cyan-600: oklch(60.9% .126 221.723);
    --color-blue-100: oklch(93.2% .032 255.585);
    --color-purple-600: oklch(55.8% .288 302.321);
    --color-pink-600: oklch(59.2% .249 .584);
    --color-gray-100: oklch(96.7% .003 264.542);
    --color-gray-400: oklch(70.7% .022 261.325);
    --color-gray-500: oklch(55.1% .027 264.364);
    --color-gray-600: oklch(44.6% .03 256.802);
    --color-gray-700: oklch(37.3% .034 259.733);
    --color-gray-800: oklch(27.8% .033 256.848);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-xl: 36rem;
    --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-5xl: 3rem;
    --text-5xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --tracking-wide: .025em;
    --leading-relaxed: 1.625;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --ease-in-out: cubic-bezier(.4,0,.2,1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4,0,.6,1)infinite;
    --animate-bounce: bounce 1s infinite;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4,0,.2,1);
    --default-mono-font-family: var(--font-mono);
    --mauve-contrast: white;
    --slate-contrast: white;
    --sage-contrast: white;
    --olive-contrast: white;
    --sand-contrast: white;
    --amber-contrast: #21201c;
    --bronze-contrast: white;
    --brown-contrast: white;
    --crimson-contrast: white;
    --cyan-contrast: white;
    --gold-contrast: white;
    --grass-contrast: white;
    --green-contrast: white;
    --indigo-contrast: white;
    --iris-contrast: white;
    --jade-contrast: white;
    --lime-contrast: #1d211c;
    --mint-contrast: #1a211e;
    --orange-contrast: white;
    --pink-contrast: white;
    --plum-contrast: white;
    --purple-contrast: white;
    --red-contrast: white;
    --ruby-contrast: white;
    --sky-contrast: #1c2024;
    --teal-contrast: white;
    --tomato-contrast: white;
    --violet-contrast: white;
    --yellow-contrast: #21201c;
    --black-a1: rgba(0,0,0,0.05);
    --black-a2: rgba(0,0,0,0.1);
    --black-a3: rgba(0,0,0,0.15);
    --black-a4: rgba(0,0,0,0.2);
    --black-a5: rgba(0,0,0,0.3);
    --black-a6: rgba(0,0,0,0.4);
    --black-a7: rgba(0,0,0,0.5);
    --black-a8: rgba(0,0,0,0.6);
    --black-a9: rgba(0,0,0,0.7);
    --black-a10: rgba(0,0,0,0.8);
    --black-a11: rgba(0,0,0,0.9);
    --black-a12: rgba(0,0,0,0.95);
    --white-a1: rgba(255,255,255,0.05);
    --white-a2: rgba(255,255,255,0.1);
    --white-a3: rgba(255,255,255,0.15);
    --white-a4: rgba(255,255,255,0.2);
    --white-a5: rgba(255,255,255,0.3);
    --white-a6: rgba(255,255,255,0.4);
    --white-a7: rgba(255,255,255,0.5);
    --white-a8: rgba(255,255,255,0.6);
    --white-a9: rgba(255,255,255,0.7);
    --white-a10: rgba(255,255,255,0.8);
    --white-a11: rgba(255,255,255,0.9);
    --white-a12: rgba(255,255,255,0.95);
    --font-gilroy: "gilroy","gilroy Fallback", sans-serif;
    --swiper-theme-color: #007aff;
    --swiper-navigation-size: 44px;
    --color-transparent: rgb(0 0 0/0);
    --base-card-surface-box-shadow: 0 0 0 1px color-mix(in oklab,var(--gray-a5),var(--gray-5) 25%);
    --base-card-surface-hover-box-shadow: 0 0 0 1px color-mix(in oklab,var(--gray-a7),var(--gray-7) 25%);
    --base-card-surface-active-box-shadow: 0 0 0 1px color-mix(in oklab,var(--gray-a6),var(--gray-6) 25%);
    --mauve-1: #121113;
    --mauve-2: #1a191b;
    --mauve-3: #232225;
    --mauve-4: #2b292d;
    --mauve-5: #323035;
    --mauve-6: #3c393f;
    --mauve-7: #49474e;
    --mauve-8: #625f69;
    --mauve-9: #6f6d78;
    --mauve-10: #7c7a85;
    --mauve-11: #b5b2bc;
    --mauve-12: #eeeef0;
    --mauve-a1: #00000000;
    --mauve-a2: #f5f4f609;
    --mauve-a3: #ebeaf814;
    --mauve-a4: #eee5f81d;
    --mauve-a5: #efe6fe25;
    --mauve-a6: #f1e6fd30;
    --mauve-a7: #eee9ff40;
    --mauve-a8: #eee7ff5d;
    --mauve-a9: #eae6fd6e;
    --mauve-a10: #ece9fd7c;
    --mauve-a11: #f5f1ffb7;
    --mauve-a12: #fdfdffef;
    --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;
    --slate-a1: #00000000;
    --slate-a2: #d8f4f609;
    --slate-a3: #ddeaf814;
    --slate-a4: #d3edf81d;
    --slate-a5: #d9edfe25;
    --slate-a6: #d6ebfd30;
    --slate-a7: #d9edff40;
    --slate-a8: #d9edff5d;
    --slate-a9: #dfebfd6d;
    --slate-a10: #e5edfd7b;
    --slate-a11: #f1f7feb5;
    --slate-a12: #fcfdffef;
    --sage-1: #101211;
    --sage-2: #171918;
    --sage-3: #202221;
    --sage-4: #272a29;
    --sage-5: #2e3130;
    --sage-6: #373b39;
    --sage-7: #444947;
    --sage-8: #5b625f;
    --sage-9: #63706b;
    --sage-10: #717d79;
    --sage-11: #adb5b2;
    --sage-12: #eceeed;
    --sage-a1: #00000000;
    --sage-a2: #f0f2f108;
    --sage-a3: #f3f5f412;
    --sage-a4: #f2fefd1a;
    --sage-a5: #f1fbfa22;
    --sage-a6: #edfbf42d;
    --sage-a7: #edfcf73c;
    --sage-a8: #ebfdf657;
    --sage-a9: #dffdf266;
    --sage-a10: #e5fdf674;
    --sage-a11: #f4fefbb0;
    --sage-a12: #fdfffeed;
    --olive-1: #111210;
    --olive-2: #181917;
    --olive-3: #212220;
    --olive-4: #282a27;
    --olive-5: #2f312e;
    --olive-6: #383a36;
    --olive-7: #454843;
    --olive-8: #5c625b;
    --olive-9: #687066;
    --olive-10: #767d74;
    --olive-11: #afb5ad;
    --olive-12: #eceeec;
    --olive-a1: #00000000;
    --olive-a2: #f1f2f008;
    --olive-a3: #f4f5f312;
    --olive-a4: #f3fef21a;
    --olive-a5: #f2fbf122;
    --olive-a6: #f4faed2c;
    --olive-a7: #f2fced3b;
    --olive-a8: #edfdeb57;
    --olive-a9: #ebfde766;
    --olive-a10: #f0fdec74;
    --olive-a11: #f6fef4b0;
    --olive-a12: #fdfffded;
    --sand-1: #111110;
    --sand-2: #191918;
    --sand-3: #222221;
    --sand-4: #2a2a28;
    --sand-5: #31312e;
    --sand-6: #3b3a37;
    --sand-7: #494844;
    --sand-8: #62605b;
    --sand-9: #6f6d66;
    --sand-10: #7c7b74;
    --sand-11: #b5b3ad;
    --sand-12: #eeeeec;
    --sand-a1: #00000000;
    --sand-a2: #f4f4f309;
    --sand-a3: #f6f6f513;
    --sand-a4: #fefef31b;
    --sand-a5: #fbfbeb23;
    --sand-a6: #fffaed2d;
    --sand-a7: #fffbed3c;
    --sand-a8: #fff9eb57;
    --sand-a9: #fffae965;
    --sand-a10: #fffdee73;
    --sand-a11: #fffcf4b0;
    --sand-a12: #fffffded;
    --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;
    --amber-a1: #e63c0006;
    --amber-a2: #fd9b000d;
    --amber-a3: #fa820022;
    --amber-a4: #fc820032;
    --amber-a5: #fd8b0041;
    --amber-a6: #fd9b0051;
    --amber-a7: #ffab2567;
    --amber-a8: #ffae3587;
    --amber-a9: #ffc53d;
    --amber-a10: #ffd60a;
    --amber-a11: #ffca16;
    --amber-a12: #ffe7b3;
    --bronze-1: #141110;
    --bronze-2: #1c1917;
    --bronze-3: #262220;
    --bronze-4: #302a27;
    --bronze-5: #3b3330;
    --bronze-6: #493e3a;
    --bronze-7: #5a4c47;
    --bronze-8: #6f5f58;
    --bronze-9: #a18072;
    --bronze-10: #ae8c7e;
    --bronze-11: #d4b3a5;
    --bronze-12: #ede0d9;
    --bronze-a1: #d1110004;
    --bronze-a2: #fbbc910c;
    --bronze-a3: #faceb817;
    --bronze-a4: #facdb622;
    --bronze-a5: #ffd2c12d;
    --bronze-a6: #ffd1c03c;
    --bronze-a7: #fdd0c04f;
    --bronze-a8: #ffd6c565;
    --bronze-a9: #fec7b09b;
    --bronze-a10: #fecab5a9;
    --bronze-a11: #ffd7c6d1;
    --bronze-a12: #fff1e9ec;
    --brown-1: #12110f;
    --brown-2: #1c1816;
    --brown-3: #28211d;
    --brown-4: #322922;
    --brown-5: #3e3128;
    --brown-6: #4d3c2f;
    --brown-7: #614a39;
    --brown-8: #7c5f46;
    --brown-9: #ad7f58;
    --brown-10: #b88c67;
    --brown-11: #dbb594;
    --brown-12: #f2e1ca;
    --brown-a1: #91110002;
    --brown-a2: #fba67c0c;
    --brown-a3: #fcb58c19;
    --brown-a4: #fbbb8a24;
    --brown-a5: #fcb88931;
    --brown-a6: #fdba8741;
    --brown-a7: #ffbb8856;
    --brown-a8: #ffbe8773;
    --brown-a9: #feb87da8;
    --brown-a10: #ffc18cb3;
    --brown-a11: #fed1aad9;
    --brown-a12: #feecd4f2;
    --crimson-1: #191114;
    --crimson-2: #201318;
    --crimson-3: #381525;
    --crimson-4: #4d122f;
    --crimson-5: #5c1839;
    --crimson-6: #6d2545;
    --crimson-7: #873356;
    --crimson-8: #b0436e;
    --crimson-9: #e93d82;
    --crimson-10: #ee518a;
    --crimson-11: #ff92ad;
    --crimson-12: #fdd3e8;
    --crimson-a1: #f4126709;
    --crimson-a2: #f22f7a11;
    --crimson-a3: #fe2a8b2a;
    --crimson-a4: #fd158741;
    --crimson-a5: #fd278f51;
    --crimson-a6: #fe459763;
    --crimson-a7: #fd559b7f;
    --crimson-a8: #fe5b9bab;
    --crimson-a9: #fe418de8;
    --crimson-a10: #ff5693ed;
    --crimson-a11: #ff92ad;
    --crimson-a12: #ffd5eafd;
    --cyan-1: #0b161a;
    --cyan-2: #101b20;
    --cyan-3: #082c36;
    --cyan-4: #003848;
    --cyan-5: #004558;
    --cyan-6: #045468;
    --cyan-7: #12677e;
    --cyan-8: #11809c;
    --cyan-9: #00a2c7;
    --cyan-10: #23afd0;
    --cyan-11: #4ccce6;
    --cyan-12: #b6ecf7;
    --cyan-a1: #0091f70a;
    --cyan-a2: #02a7f211;
    --cyan-a3: #00befd28;
    --cyan-a4: #00baff3b;
    --cyan-a5: #00befd4d;
    --cyan-a6: #00c7fd5e;
    --cyan-a7: #14cdff75;
    --cyan-a8: #11cfff95;
    --cyan-a9: #00cfffc3;
    --cyan-a10: #28d6ffcd;
    --cyan-a11: #52e1fee5;
    --cyan-a12: #bbf3fef7;
    --gold-1: #121211;
    --gold-2: #1b1a17;
    --gold-3: #24231f;
    --gold-4: #2d2b26;
    --gold-5: #38352e;
    --gold-6: #444039;
    --gold-7: #544f46;
    --gold-8: #696256;
    --gold-9: #978365;
    --gold-10: #a39073;
    --gold-11: #cbb99f;
    --gold-12: #e8e2d9;
    --gold-a1: #91911102;
    --gold-a2: #f9e29d0b;
    --gold-a3: #f8ecbb15;
    --gold-a4: #ffeec41e;
    --gold-a5: #feecc22a;
    --gold-a6: #feebcb37;
    --gold-a7: #ffedcd48;
    --gold-a8: #fdeaca5f;
    --gold-a9: #ffdba690;
    --gold-a10: #fedfb09d;
    --gold-a11: #fee7c6c8;
    --gold-a12: #fef7ede7;
    --grass-1: #0e1511;
    --grass-2: #141a15;
    --grass-3: #1b2a1e;
    --grass-4: #1d3a24;
    --grass-5: #25482d;
    --grass-6: #2d5736;
    --grass-7: #366740;
    --grass-8: #3e7949;
    --grass-9: #46a758;
    --grass-10: #53b365;
    --grass-11: #71d083;
    --grass-12: #c2f0c2;
    --grass-a1: #00de1205;
    --grass-a2: #5ef7780a;
    --grass-a3: #70fe8c1b;
    --grass-a4: #57ff802c;
    --grass-a5: #68ff8b3b;
    --grass-a6: #71ff8f4b;
    --grass-a7: #77fd925d;
    --grass-a8: #77fd9070;
    --grass-a9: #65ff82a1;
    --grass-a10: #72ff8dae;
    --grass-a11: #89ff9fcd;
    --grass-a12: #ceffceef;
    --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;
    --green-a1: #00de4505;
    --green-a2: #29f99d0b;
    --green-a3: #22ff991e;
    --green-a4: #11ff992d;
    --green-a5: #2bffa23c;
    --green-a6: #44ffaa4b;
    --green-a7: #50fdac5e;
    --green-a8: #54ffad73;
    --green-a9: #44ffa49e;
    --green-a10: #43fea4ab;
    --green-a11: #46fea5d4;
    --green-a12: #bbffd7f0;
    --indigo-1: #11131f;
    --indigo-2: #141726;
    --indigo-3: #182449;
    --indigo-4: #1d2e62;
    --indigo-5: #253974;
    --indigo-6: #304384;
    --indigo-7: #3a4f97;
    --indigo-8: #435db1;
    --indigo-9: #3e63dd;
    --indigo-10: #5472e4;
    --indigo-11: #9eb1ff;
    --indigo-12: #d6e1ff;
    --indigo-a1: #1133ff0f;
    --indigo-a2: #3354fa17;
    --indigo-a3: #2f62ff3c;
    --indigo-a4: #3566ff57;
    --indigo-a5: #4171fd6b;
    --indigo-a6: #5178fd7c;
    --indigo-a7: #5a7fff90;
    --indigo-a8: #5b81feac;
    --indigo-a9: #4671ffdb;
    --indigo-a10: #5c7efee3;
    --indigo-a11: #9eb1ff;
    --indigo-a12: #d6e1ff;
    --iris-1: #13131e;
    --iris-2: #171625;
    --iris-3: #202248;
    --iris-4: #262a65;
    --iris-5: #303374;
    --iris-6: #3d3e82;
    --iris-7: #4a4a95;
    --iris-8: #5958b1;
    --iris-9: #5b5bd6;
    --iris-10: #6e6ade;
    --iris-11: #b1a9ff;
    --iris-12: #e0dffe;
    --iris-a1: #3636fe0e;
    --iris-a2: #564bf916;
    --iris-a3: #525bff3b;
    --iris-a4: #4d58ff5a;
    --iris-a5: #5b62fd6b;
    --iris-a6: #6d6ffd7a;
    --iris-a7: #7777fe8e;
    --iris-a8: #7b7afeac;
    --iris-a9: #6a6afed4;
    --iris-a10: #7d79ffdc;
    --iris-a11: #b1a9ff;
    --iris-a12: #e1e0fffe;
    --jade-1: #0d1512;
    --jade-2: #121c18;
    --jade-3: #0f2e22;
    --jade-4: #0b3b2c;
    --jade-5: #114837;
    --jade-6: #1b5745;
    --jade-7: #246854;
    --jade-8: #2a7e68;
    --jade-9: #29a383;
    --jade-10: #27b08b;
    --jade-11: #1fd8a4;
    --jade-12: #adf0d4;
    --jade-a1: #00de4505;
    --jade-a2: #27fba60c;
    --jade-a3: #02f99920;
    --jade-a4: #00ffaa2d;
    --jade-a5: #11ffb63b;
    --jade-a6: #34ffc24b;
    --jade-a7: #45fdc75e;
    --jade-a8: #48ffcf75;
    --jade-a9: #38feca9d;
    --jade-a10: #31fec7ab;
    --jade-a11: #21fec0d6;
    --jade-a12: #b8ffe1ef;
    --lime-1: #11130c;
    --lime-2: #151a10;
    --lime-3: #1f2917;
    --lime-4: #29371d;
    --lime-5: #334423;
    --lime-6: #3d522a;
    --lime-7: #496231;
    --lime-8: #577538;
    --lime-9: #bdee63;
    --lime-10: #d4ff70;
    --lime-11: #bde56c;
    --lime-12: #e3f7ba;
    --lime-a1: #11bb0003;
    --lime-a2: #78f7000a;
    --lime-a3: #9bfd4c1a;
    --lime-a4: #a7fe5c29;
    --lime-a5: #affe6537;
    --lime-a6: #b2fe6d46;
    --lime-a7: #b6ff6f57;
    --lime-a8: #b6fd6d6c;
    --lime-a9: #caff69ed;
    --lime-a10: #d4ff70;
    --lime-a11: #d1fe77e4;
    --lime-a12: #e9febff7;
    --mint-1: #0e1515;
    --mint-2: #0f1b1b;
    --mint-3: #092c2b;
    --mint-4: #003a38;
    --mint-5: #004744;
    --mint-6: #105650;
    --mint-7: #1e685f;
    --mint-8: #277f70;
    --mint-9: #86ead4;
    --mint-10: #a8f5e5;
    --mint-11: #58d5ba;
    --mint-12: #c4f5e1;
    --mint-a1: #00dede05;
    --mint-a2: #00f9f90b;
    --mint-a3: #00fff61d;
    --mint-a4: #00fff42c;
    --mint-a5: #00fff23a;
    --mint-a6: #0effeb4a;
    --mint-a7: #34fde55e;
    --mint-a8: #41ffdf76;
    --mint-a9: #92ffe7e9;
    --mint-a10: #aefeedf5;
    --mint-a11: #67ffded2;
    --mint-a12: #cbfee9f5;
    --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;
    --orange-a1: #ec360007;
    --orange-a2: #fe6d000e;
    --orange-a3: #fb6a0025;
    --orange-a4: #ff590039;
    --orange-a5: #ff61004a;
    --orange-a6: #fd75045c;
    --orange-a7: #ff832c75;
    --orange-a8: #fe84389d;
    --orange-a9: #fe6d15f7;
    --orange-a10: #ff801f;
    --orange-a11: #ffa057;
    --orange-a12: #ffe0c2;
    --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;
    --pink-a1: #f412bc09;
    --pink-a2: #f420bb12;
    --pink-a3: #fe37cc29;
    --pink-a4: #fc1ec43f;
    --pink-a5: #fd35c24e;
    --pink-a6: #fd51c75f;
    --pink-a7: #fd62c87b;
    --pink-a8: #ff68c8a2;
    --pink-a9: #fe49bcd4;
    --pink-a10: #ff5cc0dc;
    --pink-a11: #ff8dcc;
    --pink-a12: #ffd3ecfd;
    --plum-1: #181118;
    --plum-2: #201320;
    --plum-3: #351a35;
    --plum-4: #451d47;
    --plum-5: #512454;
    --plum-6: #5e3061;
    --plum-7: #734079;
    --plum-8: #92549c;
    --plum-9: #ab4aba;
    --plum-10: #b658c4;
    --plum-11: #e796f3;
    --plum-12: #f4d4f4;
    --plum-a1: #f112f108;
    --plum-a2: #f22ff211;
    --plum-a3: #fd4cfd27;
    --plum-a4: #f646ff3a;
    --plum-a5: #f455ff48;
    --plum-a6: #f66dff56;
    --plum-a7: #f07cfd70;
    --plum-a8: #ee84ff95;
    --plum-a9: #e961feb6;
    --plum-a10: #ed70ffc0;
    --plum-a11: #f19cfef3;
    --plum-a12: #feddfef4;
    --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;
    --purple-a1: #b412f90b;
    --purple-a2: #b744f714;
    --purple-a3: #c150ff2d;
    --purple-a4: #bb53fd42;
    --purple-a5: #be5cfd51;
    --purple-a6: #c16dfd61;
    --purple-a7: #c378fd7a;
    --purple-a8: #c47effa4;
    --purple-a9: #b661ffc2;
    --purple-a10: #bc6fffcd;
    --purple-a11: #d19dff;
    --purple-a12: #f1ddfffa;
    --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;
    --red-a1: #f4121209;
    --red-a2: #f22f3e11;
    --red-a3: #ff173f2d;
    --red-a4: #fe0a3b44;
    --red-a5: #ff204756;
    --red-a6: #ff3e5668;
    --red-a7: #ff536184;
    --red-a8: #ff5d61b0;
    --red-a9: #fe4e54e4;
    --red-a10: #ff6465eb;
    --red-a11: #ff9592;
    --red-a12: #ffd1d9;
    --ruby-1: #191113;
    --ruby-2: #1e1517;
    --ruby-3: #3a141e;
    --ruby-4: #4e1325;
    --ruby-5: #5e1a2e;
    --ruby-6: #6f2539;
    --ruby-7: #883447;
    --ruby-8: #b3445a;
    --ruby-9: #e54666;
    --ruby-10: #ec5a72;
    --ruby-11: #ff949d;
    --ruby-12: #fed2e1;
    --ruby-a1: #f4124a09;
    --ruby-a2: #fe5a7f0e;
    --ruby-a3: #ff235d2c;
    --ruby-a4: #fd195e42;
    --ruby-a5: #fe2d6b53;
    --ruby-a6: #ff447665;
    --ruby-a7: #ff577d80;
    --ruby-a8: #ff5c7cae;
    --ruby-a9: #fe4c70e4;
    --ruby-a10: #ff617beb;
    --ruby-a11: #ff949d;
    --ruby-a12: #ffd3e2fe;
    --sky-1: #0d141f;
    --sky-2: #111a27;
    --sky-3: #112840;
    --sky-4: #113555;
    --sky-5: #154467;
    --sky-6: #1b537b;
    --sky-7: #1f6692;
    --sky-8: #197cae;
    --sky-9: #7ce2fe;
    --sky-10: #a8eeff;
    --sky-11: #75c7f0;
    --sky-12: #c2f3ff;
    --sky-a1: #0044ff0f;
    --sky-a2: #1171fb18;
    --sky-a3: #1184fc33;
    --sky-a4: #128fff49;
    --sky-a5: #1c9dfd5d;
    --sky-a6: #28a5ff72;
    --sky-a7: #2badfe8b;
    --sky-a8: #1db2fea9;
    --sky-a9: #7ce3fffe;
    --sky-a10: #a8eeff;
    --sky-a11: #7cd3ffef;
    --sky-a12: #c2f3ff;
    --teal-1: #0d1514;
    --teal-2: #111c1b;
    --teal-3: #0d2d2a;
    --teal-4: #023b37;
    --teal-5: #084843;
    --teal-6: #145750;
    --teal-7: #1c6961;
    --teal-8: #207e73;
    --teal-9: #12a594;
    --teal-10: #0eb39e;
    --teal-11: #0bd8b6;
    --teal-12: #adf0dd;
    --teal-a1: #00deab05;
    --teal-a2: #12fbe60c;
    --teal-a3: #00ffe61e;
    --teal-a4: #00ffe92d;
    --teal-a5: #00ffea3b;
    --teal-a6: #1cffe84b;
    --teal-a7: #2efde85f;
    --teal-a8: #32ffe775;
    --teal-a9: #13ffe49f;
    --teal-a10: #0dffe0ae;
    --teal-a11: #0afed5d6;
    --teal-a12: #b8ffebef;
    --tomato-1: #181111;
    --tomato-2: #1f1513;
    --tomato-3: #391714;
    --tomato-4: #4e1511;
    --tomato-5: #5e1c16;
    --tomato-6: #6e2920;
    --tomato-7: #853a2d;
    --tomato-8: #ac4d39;
    --tomato-9: #e54d2e;
    --tomato-10: #ec6142;
    --tomato-11: #ff977d;
    --tomato-12: #fbd3cb;
    --tomato-a1: #f1121208;
    --tomato-a2: #ff55330f;
    --tomato-a3: #ff35232b;
    --tomato-a4: #fd201142;
    --tomato-a5: #fe332153;
    --tomato-a6: #ff4f3864;
    --tomato-a7: #fd644a7d;
    --tomato-a8: #fe6d4ea7;
    --tomato-a9: #fe5431e4;
    --tomato-a10: #ff6847eb;
    --tomato-a11: #ff977d;
    --tomato-a12: #ffd6cefb;
    --violet-1: #14121f;
    --violet-2: #1b1525;
    --violet-3: #291f43;
    --violet-4: #33255b;
    --violet-5: #3c2e69;
    --violet-6: #473876;
    --violet-7: #56468b;
    --violet-8: #6958ad;
    --violet-9: #6e56cf;
    --violet-10: #7d66d9;
    --violet-11: #baa7ff;
    --violet-12: #e2ddfe;
    --violet-a1: #4422ff0f;
    --violet-a2: #853ff916;
    --violet-a3: #8354fe36;
    --violet-a4: #7d51fd50;
    --violet-a5: #845ffd5f;
    --violet-a6: #8f6cfd6d;
    --violet-a7: #9879ff83;
    --violet-a8: #977dfea8;
    --violet-a9: #8668ffcc;
    --violet-a10: #9176fed7;
    --violet-a11: #baa7ff;
    --violet-a12: #e3defffe;
    --yellow-1: #14120b;
    --yellow-2: #1b180f;
    --yellow-3: #2d2305;
    --yellow-4: #362b00;
    --yellow-5: #433500;
    --yellow-6: #524202;
    --yellow-7: #665417;
    --yellow-8: #836a21;
    --yellow-9: #ffe629;
    --yellow-10: #ffff57;
    --yellow-11: #f5e147;
    --yellow-12: #f6eeb4;
    --yellow-a1: #d1510004;
    --yellow-a2: #f9b4000b;
    --yellow-a3: #ffaa001e;
    --yellow-a4: #fdb70028;
    --yellow-a5: #febb0036;
    --yellow-a6: #fec40046;
    --yellow-a7: #fdcb225c;
    --yellow-a8: #fdca327b;
    --yellow-a9: #ffe629;
    --yellow-a10: #ffff57;
    --yellow-a11: #fee949f5;
    --yellow-a12: #fef6baf6;
    --mauve-surface: #22212380;
    --mauve-indicator: var(--mauve-9);
    --mauve-track: var(--mauve-9);
    --slate-surface: #1f212380;
    --slate-indicator: var(--slate-9);
    --slate-track: var(--slate-9);
    --sage-surface: #1e201f80;
    --sage-indicator: var(--sage-9);
    --sage-track: var(--sage-9);
    --olive-surface: #1f201e80;
    --olive-indicator: var(--olive-9);
    --olive-track: var(--olive-9);
    --sand-surface: #21212080;
    --sand-indicator: var(--sand-9);
    --sand-track: var(--sand-9);
    --amber-surface: #271f1380;
    --amber-indicator: var(--amber-9);
    --bronze-surface: #27211d80;
    --bronze-indicator: var(--bronze-9);
    --bronze-track: var(--bronze-9);
    --brown-surface: #271f1b80;
    --brown-indicator: var(--brown-9);
    --brown-track: var(--brown-9);
    --crimson-surface: #2f151f80;
    --crimson-indicator: var(--crimson-9);
    --crimson-track: var(--crimson-9);
    --cyan-surface: #11252d80;
    --cyan-indicator: var(--cyan-9);
    --cyan-track: var(--cyan-9);
    --gold-surface: #25231d80;
    --gold-indicator: var(--gold-9);
    --gold-track: var(--gold-9);
    --grass-surface: #19231b80;
    --grass-indicator: var(--grass-9);
    --grass-track: var(--grass-9);
    --green-surface: #15251d80;
    --green-indicator: var(--green-9);
    --green-track: var(--green-9);
    --indigo-surface: #171d3b80;
    --indigo-indicator: var(--indigo-9);
    --indigo-track: var(--indigo-9);
    --iris-surface: #1d1b3980;
    --iris-indicator: var(--iris-9);
    --iris-track: var(--iris-9);
    --jade-surface: #13271f80;
    --jade-indicator: var(--jade-9);
    --jade-track: var(--jade-9);
    --lime-surface: #1b211580;
    --lime-indicator: var(--lime-9);
    --mint-surface: #15272780;
    --mint-indicator: var(--mint-9);
    --orange-surface: #271d1380;
    --orange-indicator: var(--orange-9);
    --orange-track: var(--orange-9);
    --pink-surface: #31132980;
    --pink-indicator: var(--pink-9);
    --pink-track: var(--pink-9);
    --plum-surface: #2f152f80;
    --plum-indicator: var(--plum-9);
    --plum-track: var(--plum-9);
    --purple-surface: #2b173580;
    --purple-indicator: var(--purple-9);
    --purple-track: var(--purple-9);
    --red-surface: #2f151780;
    --red-indicator: var(--red-9);
    --red-track: var(--red-9);
    --ruby-surface: #2b191d80;
    --ruby-indicator: var(--ruby-9);
    --ruby-track: var(--ruby-9);
    --sky-surface: #13233b80;
    --sky-indicator: var(--sky-9);
    --teal-surface: #13272580;
    --teal-indicator: var(--teal-9);
    --teal-track: var(--teal-9);
    --tomato-surface: #2d191580;
    --tomato-indicator: var(--tomato-9);
    --tomato-track: var(--tomato-9);
    --violet-surface: #25193980;
    --violet-indicator: var(--violet-9);
    --violet-track: var(--violet-9);
    --yellow-surface: #231f1380;
    --yellow-indicator: var(--yellow-9);
    --amber-track: color-mix(in oklab,var(--amber-8),var(--amber-9) 75%);
    --lime-track: color-mix(in oklab,var(--lime-8),var(--lime-9) 65%);
    --mint-track: color-mix(in oklab,var(--mint-8),var(--mint-9) 65%);
    --sky-track: color-mix(in oklab,var(--sky-8),var(--sky-9) 65%);
    --yellow-track: color-mix(in oklab,var(--yellow-8),var(--yellow-9) 65%);
    --color-overlay: var(--black-a8);
    --color-panel-solid: var(--gray-2);
    --color-panel-translucent: var(--gray-a2);
    --color-surface: rgba(0,0,0,0.25);
    --base-button-classic-after-inset: 1px;
    --base-button-classic-box-shadow-top: inset 0 0 0 1px var(--white-a2),inset 0 4px 2px -2px var(--white-a3),inset 0 1px 1px var(--white-a6),inset 0 -1px 1px var(--black-a6);
    --base-button-classic-box-shadow-bottom: 0 0 transparent;
    --base-button-classic-disabled-box-shadow: inset 0 0 0 1px var(--gray-a5),inset 0 4px 2px -2px var(--gray-a2),inset 0 1px 1px var(--gray-a5),inset 0 -1px 1px var(--black-a3),inset 0 0 0 1px var(--gray-a2);
    --base-button-classic-active-filter: brightness(1.08);
    --base-button-classic-high-contrast-hover-filter: contrast(0.88) saturate(1.3) brightness(1.14);
    --base-button-classic-high-contrast-active-filter: brightness(0.95) saturate(1.2);
    --base-button-solid-active-filter: brightness(1.08);
    --base-button-solid-high-contrast-hover-filter: contrast(0.88) saturate(1.3) brightness(1.18);
    --base-button-solid-high-contrast-active-filter: brightness(0.95) saturate(1.2);
    --kbd-box-shadow: inset 0 -0.05em 0.5em var(--gray-a3),inset 0 0.05em var(--gray-a11),inset 0 0.25em 0.5em var(--gray-a2),inset 0 -0.1em var(--black-a11),0 0 0 0.075em var(--gray-a7),0 0.08em 0.17em var(--black-a12);
    --progress-indicator-after-linear-gradient: var(--white-a3),var(--white-a6),var(--white-a3);
    --segmented-control-indicator-background-color: var(--gray-a3);
    --select-trigger-classic-box-shadow: inset 0 0 0 1px var(--white-a4),inset 0 1px 1px var(--white-a4),inset 0 -1px 1px var(--black-a9);
    --slider-range-high-contrast-background-image: none;
    --slider-disabled-blend-mode: screen;
    --switch-disabled-blend-mode: screen;
    --switch-high-contrast-checked-color-overlay: transparent;
    --switch-high-contrast-checked-active-before-filter: brightness(1.08);
    --switch-surface-checked-active-filter: brightness(1.08);
    --base-card-classic-box-shadow-inner: 0 0 0 1px var(--base-card-classic-border-color),0 0 0 1px var(--color-transparent),0 0 0 0.5px var(--black-a3),0 1px 1px 0 var(--black-a6),0 2px 1px -1px var(--black-a6),0 1px 3px 0 var(--black-a5);
    --base-card-classic-box-shadow-outer: 0 0 0 0 var(--base-card-classic-border-color),0 0 0 0 var(--color-transparent),0 0 0 0 var(--black-a3),0 1px 1px -1px var(--black-a6),0 2px 1px -2px var(--black-a6),0 1px 3px -1px var(--black-a5);
    --base-card-classic-hover-box-shadow-inner: 0 0 0 1px var(--base-card-classic-hover-border-color),0 0 1px 1px var(--gray-a4),0 0 1px -1px var(--gray-a4),0 0 3px -2px var(--gray-a3),0 0 12px -2px var(--gray-a3),0 0 16px -8px var(--gray-a7);
    --base-card-classic-hover-box-shadow-outer: 0 0 0 0 var(--base-card-classic-hover-border-color),0 0 1px 0 var(--gray-a4),0 0 1px -2px var(--gray-a4),0 0 3px -3px var(--gray-a3),0 0 12px -3px var(--gray-a3),0 0 16px -9px var(--gray-a7);
    --base-card-classic-active-box-shadow-inner: 0 0 0 1px var(--base-card-classic-active-border-color),0 0 0 1px var(--color-transparent),0 0 0 0.5px var(--black-a3),0 1px 1px 0 var(--black-a6),0 2px 1px -1px var(--black-a6),0 1px 3px 0 var(--black-a5);
    --base-card-classic-active-box-shadow-outer: 0 0 0 0 var(--base-card-classic-active-border-color),0 0 0 0 var(--color-transparent),0 0 0 0 var(--black-a3),0 1px 1px -1px var(--black-a6),0 2px 1px -2px var(--black-a6),0 1px 3px -1px var(--black-a5);
    --focus-1: var(--accent-1);
    --focus-2: var(--accent-2);
    --focus-3: var(--accent-3);
    --focus-4: var(--accent-4);
    --focus-5: var(--accent-5);
    --focus-6: var(--accent-6);
    --focus-7: var(--accent-7);
    --focus-8: var(--accent-8);
    --focus-9: var(--accent-9);
    --focus-10: var(--accent-10);
    --focus-11: var(--accent-11);
    --focus-12: var(--accent-12);
    --focus-a1: var(--accent-a1);
    --focus-a2: var(--accent-a2);
    --focus-a3: var(--accent-a3);
    --focus-a4: var(--accent-a4);
    --focus-a5: var(--accent-a5);
    --focus-a6: var(--accent-a6);
    --focus-a7: var(--accent-a7);
    --focus-a8: var(--accent-a8);
    --focus-a9: var(--accent-a9);
    --focus-a10: var(--accent-a10);
    --focus-a11: var(--accent-a11);
    --focus-a12: var(--accent-a12);
    --color-panel: var(--color-panel-translucent);
    --backdrop-filter-panel: blur(64px);
    --accent-1: var(--blue-1);
    --accent-2: var(--blue-2);
    --accent-3: var(--blue-3);
    --accent-4: var(--blue-4);
    --accent-5: var(--blue-5);
    --accent-6: var(--blue-6);
    --accent-7: var(--blue-7);
    --accent-8: var(--blue-8);
    --accent-9: var(--blue-9);
    --accent-10: var(--blue-10);
    --accent-11: var(--blue-11);
    --accent-12: var(--blue-12);
    --accent-a1: var(--blue-a1);
    --accent-a2: var(--blue-a2);
    --accent-a3: var(--blue-a3);
    --accent-a4: var(--blue-a4);
    --accent-a5: var(--blue-a5);
    --accent-a6: var(--blue-a6);
    --accent-a7: var(--blue-a7);
    --accent-a8: var(--blue-a8);
    --accent-a9: var(--blue-a9);
    --accent-a10: var(--blue-a10);
    --accent-a11: var(--blue-a11);
    --accent-a12: var(--blue-a12);
    --accent-contrast: var(--blue-contrast);
    --accent-surface: var(--blue-surface);
    --accent-indicator: var(--blue-indicator);
    --accent-track: var(--blue-track);
    --gray-1: var(--slate-1);
    --gray-2: var(--slate-2);
    --gray-3: var(--slate-3);
    --gray-4: var(--slate-4);
    --gray-5: var(--slate-5);
    --gray-6: var(--slate-6);
    --gray-7: var(--slate-7);
    --gray-8: var(--slate-8);
    --gray-9: var(--slate-9);
    --gray-10: var(--slate-10);
    --gray-11: var(--slate-11);
    --gray-12: var(--slate-12);
    --gray-a1: var(--slate-a1);
    --gray-a2: var(--slate-a2);
    --gray-a3: var(--slate-a3);
    --gray-a4: var(--slate-a4);
    --gray-a5: var(--slate-a5);
    --gray-a6: var(--slate-a6);
    --gray-a7: var(--slate-a7);
    --gray-a8: var(--slate-a8);
    --gray-a9: var(--slate-a9);
    --gray-a10: var(--slate-a10);
    --gray-a11: var(--slate-a11);
    --gray-a12: var(--slate-a12);
    --gray-contrast: var(--slate-contrast);
    --gray-surface: var(--slate-surface);
    --gray-indicator: var(--slate-indicator);
    --gray-track: var(--slate-track);
    --cursor-button: default;
    --cursor-checkbox: default;
    --cursor-disabled: not-allowed;
    --cursor-link: pointer;
    --cursor-menu-item: default;
    --cursor-radio: default;
    --cursor-slider-thumb: default;
    --cursor-slider-thumb-active: default;
    --cursor-switch: default;
    --space-1: calc(4px * var(--scaling));
    --space-2: calc(8px * var(--scaling));
    --space-3: calc(12px * var(--scaling));
    --space-4: calc(16px * var(--scaling));
    --space-5: calc(24px * var(--scaling));
    --space-6: calc(32px * var(--scaling));
    --space-7: calc(40px * var(--scaling));
    --space-8: calc(48px * var(--scaling));
    --space-9: calc(64px * var(--scaling));
    --font-size-1: calc(12px * var(--scaling));
    --font-size-2: calc(14px * var(--scaling));
    --font-size-3: calc(16px * var(--scaling));
    --font-size-4: calc(18px * var(--scaling));
    --font-size-5: calc(20px * var(--scaling));
    --font-size-6: calc(24px * var(--scaling));
    --font-size-7: calc(28px * var(--scaling));
    --font-size-8: calc(35px * var(--scaling));
    --font-size-9: calc(60px * var(--scaling));
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --line-height-1: calc(16px * var(--scaling));
    --line-height-2: calc(20px * var(--scaling));
    --line-height-3: calc(24px * var(--scaling));
    --line-height-4: calc(26px * var(--scaling));
    --line-height-5: calc(28px * var(--scaling));
    --line-height-6: calc(30px * var(--scaling));
    --line-height-7: calc(36px * var(--scaling));
    --line-height-8: calc(40px * var(--scaling));
    --line-height-9: calc(60px * var(--scaling));
    --letter-spacing-1: 0.0025em;
    --letter-spacing-2: 0em;
    --letter-spacing-3: 0em;
    --letter-spacing-4: -0.0025em;
    --letter-spacing-5: -0.005em;
    --letter-spacing-6: -0.00625em;
    --letter-spacing-7: -0.0075em;
    --letter-spacing-8: -0.01em;
    --letter-spacing-9: -0.025em;
    --default-font-size: var(--font-size-3);
    --default-font-style: normal;
    --default-font-weight: var(--font-weight-regular);
    --default-line-height: 1.5;
    --default-letter-spacing: 0em;
    --default-leading-trim-start: 0.42em;
    --default-leading-trim-end: 0.36em;
    --heading-font-family: var(--default-font-family);
    --heading-font-size-adjust: 1;
    --heading-font-style: normal;
    --heading-leading-trim-start: var(--default-leading-trim-start);
    --heading-leading-trim-end: var(--default-leading-trim-end);
    --heading-letter-spacing: 0em;
    --heading-line-height-1: calc(16px * var(--scaling));
    --heading-line-height-2: calc(18px * var(--scaling));
    --heading-line-height-3: calc(22px * var(--scaling));
    --heading-line-height-4: calc(24px * var(--scaling));
    --heading-line-height-5: calc(26px * var(--scaling));
    --heading-line-height-6: calc(30px * var(--scaling));
    --heading-line-height-7: calc(36px * var(--scaling));
    --heading-line-height-8: calc(40px * var(--scaling));
    --heading-line-height-9: calc(60px * var(--scaling));
    --code-font-family: "Menlo","Consolas (Custom)","Bitstream Vera Sans Mono",monospace,"Apple Color Emoji","Segoe UI Emoji";
    --code-font-size-adjust: 0.95;
    --code-font-style: normal;
    --code-font-weight: inherit;
    --code-letter-spacing: -0.007em;
    --code-padding-top: 0.1em;
    --code-padding-bottom: 0.1em;
    --code-padding-left: 0.25em;
    --code-padding-right: 0.25em;
    --strong-font-family: var(--default-font-family);
    --strong-font-size-adjust: 1;
    --strong-font-style: inherit;
    --strong-font-weight: var(--font-weight-bold);
    --strong-letter-spacing: 0em;
    --em-font-family: "Times New Roman","Times",serif;
    --em-font-size-adjust: 1.18;
    --em-font-style: italic;
    --em-font-weight: inherit;
    --em-letter-spacing: -0.025em;
    --quote-font-family: "Times New Roman","Times",serif;
    --quote-font-size-adjust: 1.18;
    --quote-font-style: italic;
    --quote-font-weight: inherit;
    --quote-letter-spacing: -0.025em;
    --tab-active-letter-spacing: -0.01em;
    --tab-active-word-spacing: 0em;
    --tab-inactive-letter-spacing: 0em;
    --tab-inactive-word-spacing: 0em;
    --container-1: 448px;
    --container-2: 688px;
    --container-3: 880px;
    --container-4: 1136px;
    --scrollarea-scrollbar-horizontal-margin-top: var(--space-1);
    --scrollarea-scrollbar-horizontal-margin-bottom: var(--space-1);
    --scrollarea-scrollbar-horizontal-margin-left: var(--space-1);
    --scrollarea-scrollbar-horizontal-margin-right: var(--space-1);
    --scrollarea-scrollbar-vertical-margin-top: var(--space-1);
    --scrollarea-scrollbar-vertical-margin-bottom: var(--space-1);
    --scrollarea-scrollbar-vertical-margin-left: var(--space-1);
    --scrollarea-scrollbar-vertical-margin-right: var(--space-1);
    --segmented-control-transition-duration: 100ms;
    --spinner-animation-duration: 800ms;
    --spinner-opacity: 0.65;
    --scaling: 1;
    --radius-1: calc(3px * var(--scaling) * var(--radius-factor));
    --radius-2: calc(4px * var(--scaling) * var(--radius-factor));
    --radius-3: calc(6px * var(--scaling) * var(--radius-factor));
    --radius-4: calc(8px * var(--scaling) * var(--radius-factor));
    --radius-5: calc(12px * var(--scaling) * var(--radius-factor));
    --radius-6: calc(16px * var(--scaling) * var(--radius-factor));
    --radius-factor: 1;
    --radius-full: 9999px;
    --radius-thumb: 9999px;
    --shadow-1: inset 0 -1px 1px 0 var(--gray-a3),inset 0 0 0 1px var(--gray-a3),inset 0 3px 4px 0 var(--black-a5),inset 0 0 0 1px var(--gray-a4);
    --shadow-2: 0 0 0 1px color-mix(in oklab,var(--gray-a6),var(--gray-6) 25%),0 0 0 0.5px var(--black-a3),0 1px 1px 0 var(--black-a6),0 2px 1px -1px var(--black-a6),0 1px 3px 0 var(--black-a5);
    --shadow-3: 0 0 0 1px color-mix(in oklab,var(--gray-a6),var(--gray-6) 25%),0 2px 3px -2px var(--black-a3),0 3px 8px -2px var(--black-a6),0 4px 12px -4px var(--black-a7);
    --shadow-4: 0 0 0 1px color-mix(in oklab,var(--gray-a6),var(--gray-6) 25%),0 8px 40px var(--black-a3),0 12px 32px -16px var(--black-a5);
    --shadow-5: 0 0 0 1px color-mix(in oklab,var(--gray-a6),var(--gray-6) 25%),0 12px 60px var(--black-a5),0 12px 32px -16px var(--black-a7);
    --shadow-6: 0 0 0 1px color-mix(in oklab,var(--gray-a6),var(--gray-6) 25%),0 12px 60px var(--black-a4),0 16px 64px var(--black-a6),0 16px 36px -20px var(--black-a11);
    --base-card-classic-border-color: color-mix(in oklab,var(--gray-a6),var(--gray-6) 25%);
    --base-card-classic-hover-border-color: color-mix(in oklab,var(--gray-a6),var(--gray-6) 25%);
    --base-card-classic-active-border-color: color-mix(in oklab,var(--gray-a6),var(--gray-6) 25%);
    --default-font-family: var(--font-gilroy);
    --blue-1: #061318;
    --blue-2: #0b1c21;
    --blue-3: #002c3a;
    --blue-4: #00394d;
    --blue-5: #00475f;
    --blue-6: #005771;
    --blue-7: #006a88;
    --blue-8: #0082a7;
    --blue-9: #55d2fb;
    --blue-10: #48c7f0;
    --blue-11: #4dcbf4;
    --blue-12: #b7efff;
    --blue-a1: #0051f108;
    --blue-a2: #00adf412;
    --blue-a3: #00aeff2c;
    --blue-a4: #00aefd41;
    --blue-a5: #00b5fe54;
    --blue-a6: #00bfff67;
    --blue-a7: #00c3ff80;
    --blue-a8: #00c4ffa1;
    --blue-a9: #56d5fffb;
    --blue-a10: #4cd3ffef;
    --blue-a11: #4fd3fef4;
    --blue-a12: #b7efff;
    --blue-contrast: #072630;
    --blue-surface: #06273180;
    --blue-indicator: #55d2fb;
    --blue-track: #55d2fb;
    --color-background: #060a13;
    --tw-duration: .3s;
    --tw-ease: var(--ease-in-out);
}
body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--color-background);
    color: var(--gray-12);
}

h1, h2 {
    font-family: var(--font-gilroy);
}
h1 {
    color: var(--accent-9);
    font-size: var(--text-5xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-8);
}
.container {
    display: flex;
    justify-content: center;
    align-items: flex-start; 
    gap: 2vw;
    margin-top: 20px;
    width: 100%;
}

.upload-container, .translation-container {
    border: 2px dashed var(--slate-6);
    padding: 20px;
    height: 70vh;
    aspect-ratio: 2 / 3;
    max-width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--slate-2);
    border-color: var(--slate-6);
    border-radius: 10px;
    transition: background-color 0.2s, border-color 0.2s;
    position: relative;
}
.upload-container{
    cursor: pointer;
}
.upload-container:hover {
    background-color: var(--slate-3);
    border-color: var(--accent-9);
}

.upload-container.drag-over {
    background-color: var(--slate-4);
    border-color: var(--accent-9);
}

#drop-zone {
    text-align: center;
    cursor: pointer;
}

#preview, #translated-image {
    max-width: 80%;
    max-height: 80%;
    border-radius: 5px;
    object-fit: contain;
    border: 1px solid var(--slate-6);
}

#translated-image {
    cursor: zoom-in;
}

.controls {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}
.modal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; 
    background-color: rgba(0,0,0,0.9);
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 80%;
    max-height: 80vh;
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 35px;
    color: var(--gray-11);
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close-modal:hover,
.close-modal:focus {
    color: var(--gray-12);
    text-decoration: none;
    cursor: pointer;
}

#translate-button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    background-color: var(--accent-9);
    color: var(--accent-contrast);
    border: none;
    border-radius: 5px;
    font-family: var(--font-gilroy);
    font-weight: var(--font-weight-bold);
    transition: background-color .2s ease-in-out;
}

#translate-button:hover {
    background-color: var(--accent-8)

}

#language-select {
    -webkit-tap-highlight-color: transparent;
    cursor: var(--cursor-button);
    -webkit-appearance: none;
    appearance: none;
    user-select: none;
    vertical-align: top;
    font-family: var(--default-font-family);
    font-weight: var(--font-weight-regular);
    font-style: normal;
    text-align: start;
    box-sizing: border-box;
    height: var(--space-6);
    gap: calc(var(--space-1) * 1.5);
    font-size: var(--font-size-2);
    line-height: var(--line-height-2);
    letter-spacing: var(--letter-spacing-2);
    border-radius: max(var(--radius-2),var(--radius-full));
    padding-left: var(--space-3);
    padding-right: var(--space-5);
    color: var(--gray-12);
    background-color: var(--color-surface);
    box-shadow: inset 0 0 0 1px var(--gray-a7);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23696e77' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right .5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
}

#language-select option {
    background-color: var(--slate-3);
    color: var(--gray-12);
}

#loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.spinner {
    border: 4px solid rgba(255, 255, 255, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: var(--accent-9);
    animation: spin 1s ease infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        align-items: center;
        width: 90%;
    }

    .upload-container, .translation-container {
        width: 90%;
        height: 500px;
        max-width: 100%;
        aspect-ratio: unset; 
    }

}