@lukso/web-components 1.172.20 → 1.173.1

package/tools/styles/main-v4.css

@@ -0,0 +1,2228 @@
+/**
+ * DO NOT MODIFY MANUALLY. This file is auto-generated.
+ *
+ * Source: main-v4.template.css + colors.css + colors-v4.css + fonts-v4.css + shadows-v4.css + typography-v4.css + tippy-v4.css + prose-overrides-v4.css
+ * Generated by: scripts/generate-styles.js
+ *
+ * This file is imported by TailwindElement base class for Shadow DOM styles.
+ * It includes BOTH :root (for external usage) and @theme (for Tailwind utilities).
+ *
+ * Users should add @source directive when importing this file to specify
+ * which files Tailwind should scan for utility classes.
+ */
+
+/* DO NOT MODIFY MANUALLY. This file is auto generated by scripts/generate-styles.js */
+:root {
+  --neutral-10: #121b21;
+  --neutral-15: #1b2832;
+  --neutral-20: #243542;
+  --neutral-25: #2d4253;
+  --neutral-30: #365063;
+  --neutral-35: #3e5d74;
+  --neutral-40: #476a85;
+  --neutral-45: #507795;
+  --neutral-50: #5985a6;
+  --neutral-55: #6a91af;
+  --neutral-60: #7a9db8;
+  --neutral-65: #8ba9c1;
+  --neutral-70: #9cb6c9;
+  --neutral-75: #acc2d2;
+  --neutral-80: #bdcedb;
+  --neutral-85: #cddae4;
+  --neutral-90: #dee7ed;
+  --neutral-95: #eef3f6;
+  --neutral-97: #f5f8fa;
+  --neutral-98: #f8fafb;
+  --neutral-100: #ffffff;
+  --honey-72: #fad275;
+  --honey-75: #fbd784;
+  --honey-82: #fce2a6;
+  --honey-85: #fce7b5;
+  --honey-92: #fef2d8;
+  --coral-65: #f37c58;
+  --coral-74: #f69e83;
+  --coral-75: #f7a288;
+  --coral-84: #fac3b3;
+  --coral-85: #fac7b7;
+  --coral-94: #fde9e2;
+  --warm-77: #ffbb8a;
+  --warm-87: #ffd8bd;
+  --warm-97: #fff6f0;
+  --sea-salt-57: #7fa4a4;
+  --sea-salt-67: #9db9b9;
+  --sea-salt-88: #dbe6e6;
+  --cloud-43: #447c97;
+  --cloud-75: #a7c7d7;
+  --cloud-88: #d5e4ec;
+  --ocean-38: #3c6286;
+  --ocean-75: #a7c0d7;
+  --ocean-88: #d5e1ec;
+  --sky-64: #68a5de;
+  --sky-75: #96c1e8;
+  --sky-85: #c0daf1;
+  --lukso-50: #aa5578;
+  --lukso-60: #bb7793;
+  --lukso-70: #cc99ae;
+  --lukso-80: #ddbbc9;
+  --lukso-90: #eedde4;
+  --yellow-25: #804d00;
+  --yellow-55: #ffa31a;
+  --yellow-65: #ffb84d;
+  --yellow-75: #ffcc80;
+  --yellow-85: #ffe0b3;
+  --yellow-95: #fff5e5;
+  --green-45: #31b452;
+  --green-54: #47cd68;
+  --green-63: #6bd686;
+  --green-75: #9be4ad;
+  --green-85: #c3efce;
+  --green-95: #ebfaef;
+  --blue-40: #0452c8;
+  --blue-50: #0567fa;
+  --blue-60: #3785fb;
+  --blue-75: #82b3fc;
+  --blue-85: #b4d1fd;
+  --blue-95: #e6f0fe;
+  --red-55: #e23636;
+  --red-65: #e96363;
+  --red-75: #ef8f8f;
+  --red-85: #f5bcbc;
+  --red-95: #fce9e9;
+  --purple-15: #1d202f;
+  --purple-18: #232739;
+  --purple-31: #3c4262;
+  --purple-41: #4f5882;
+  --purple-51: #646ea0;
+  --purple-58: #7a83ae;
+  --purple-63: #8a92b7;
+  --purple-82: #c6cadc;
+  --purple-94: #ecedf3;
+  --pink-90: #f8dad3;
+  --pink-91: #f9ddd7;
+  --pink-92: #f9e1dc;
+  --pink-93: #fae5e0;
+  --pink-94: #fbe9e5;
+  --pink-95: #fcece9;
+  --pink-96: #fcf0ed;
+  --pink-97: #fdf4f2;
+  --measure-50: #e8178a;
+  --measure-70: #f174b9;
+  --measure-80: #f6a2d0;
+  --measure-97: #fef1f8;
+  --grey-10: #1a1a1a;
+  --grey-15: #262626;
+  --grey-20: #333333;
+  --grey-25: #404040;
+  --grey-30: #4d4d4d;
+  --grey-35: #595959;
+  --grey-40: #666666;
+  --grey-45: #737373;
+  --grey-50: #808080;
+  --grey-55: #8c8c8c;
+  --grey-60: #999999;
+  --grey-65: #a6a6a6;
+  --grey-70: #b3b3b3;
+  --grey-75: #bfbfbf;
+  --grey-80: #cccccc;
+  --gradient-1-start: #D39B9D;
+  --gradient-1-end: #9071D1;
+  --gradient-2-start: #F8DAD3;
+  --gradient-2-end: #CC99AE;
+  --gradient-3-start: #393e56;
+  --gradient-3-end: #646ea0;
+}
+
+
+/* DO NOT MODIFY MANUALLY. This file is auto generated by scripts/generate-styles.js */
+@theme {
+  --color-neutral-10: #121b21;
+  --color-neutral-15: #1b2832;
+  --color-neutral-20: #243542;
+  --color-neutral-25: #2d4253;
+  --color-neutral-30: #365063;
+  --color-neutral-35: #3e5d74;
+  --color-neutral-40: #476a85;
+  --color-neutral-45: #507795;
+  --color-neutral-50: #5985a6;
+  --color-neutral-55: #6a91af;
+  --color-neutral-60: #7a9db8;
+  --color-neutral-65: #8ba9c1;
+  --color-neutral-70: #9cb6c9;
+  --color-neutral-75: #acc2d2;
+  --color-neutral-80: #bdcedb;
+  --color-neutral-85: #cddae4;
+  --color-neutral-90: #dee7ed;
+  --color-neutral-95: #eef3f6;
+  --color-neutral-97: #f5f8fa;
+  --color-neutral-98: #f8fafb;
+  --color-neutral-100: #ffffff;
+  --color-honey-72: #fad275;
+  --color-honey-75: #fbd784;
+  --color-honey-82: #fce2a6;
+  --color-honey-85: #fce7b5;
+  --color-honey-92: #fef2d8;
+  --color-coral-65: #f37c58;
+  --color-coral-74: #f69e83;
+  --color-coral-75: #f7a288;
+  --color-coral-84: #fac3b3;
+  --color-coral-85: #fac7b7;
+  --color-coral-94: #fde9e2;
+  --color-warm-77: #ffbb8a;
+  --color-warm-87: #ffd8bd;
+  --color-warm-97: #fff6f0;
+  --color-sea-salt-57: #7fa4a4;
+  --color-sea-salt-67: #9db9b9;
+  --color-sea-salt-88: #dbe6e6;
+  --color-cloud-43: #447c97;
+  --color-cloud-75: #a7c7d7;
+  --color-cloud-88: #d5e4ec;
+  --color-ocean-38: #3c6286;
+  --color-ocean-75: #a7c0d7;
+  --color-ocean-88: #d5e1ec;
+  --color-sky-64: #68a5de;
+  --color-sky-75: #96c1e8;
+  --color-sky-85: #c0daf1;
+  --color-lukso-50: #aa5578;
+  --color-lukso-60: #bb7793;
+  --color-lukso-70: #cc99ae;
+  --color-lukso-80: #ddbbc9;
+  --color-lukso-90: #eedde4;
+  --color-yellow-25: #804d00;
+  --color-yellow-55: #ffa31a;
+  --color-yellow-65: #ffb84d;
+  --color-yellow-75: #ffcc80;
+  --color-yellow-85: #ffe0b3;
+  --color-yellow-95: #fff5e5;
+  --color-green-45: #31b452;
+  --color-green-54: #47cd68;
+  --color-green-63: #6bd686;
+  --color-green-75: #9be4ad;
+  --color-green-85: #c3efce;
+  --color-green-95: #ebfaef;
+  --color-blue-40: #0452c8;
+  --color-blue-50: #0567fa;
+  --color-blue-60: #3785fb;
+  --color-blue-75: #82b3fc;
+  --color-blue-85: #b4d1fd;
+  --color-blue-95: #e6f0fe;
+  --color-red-55: #e23636;
+  --color-red-65: #e96363;
+  --color-red-75: #ef8f8f;
+  --color-red-85: #f5bcbc;
+  --color-red-95: #fce9e9;
+  --color-purple-15: #1d202f;
+  --color-purple-18: #232739;
+  --color-purple-31: #3c4262;
+  --color-purple-41: #4f5882;
+  --color-purple-51: #646ea0;
+  --color-purple-58: #7a83ae;
+  --color-purple-63: #8a92b7;
+  --color-purple-82: #c6cadc;
+  --color-purple-94: #ecedf3;
+  --color-pink-90: #f8dad3;
+  --color-pink-91: #f9ddd7;
+  --color-pink-92: #f9e1dc;
+  --color-pink-93: #fae5e0;
+  --color-pink-94: #fbe9e5;
+  --color-pink-95: #fcece9;
+  --color-pink-96: #fcf0ed;
+  --color-pink-97: #fdf4f2;
+  --color-measure-50: #e8178a;
+  --color-measure-70: #f174b9;
+  --color-measure-80: #f6a2d0;
+  --color-measure-97: #fef1f8;
+  --color-grey-10: #1a1a1a;
+  --color-grey-15: #262626;
+  --color-grey-20: #333333;
+  --color-grey-25: #404040;
+  --color-grey-30: #4d4d4d;
+  --color-grey-35: #595959;
+  --color-grey-40: #666666;
+  --color-grey-45: #737373;
+  --color-grey-50: #808080;
+  --color-grey-55: #8c8c8c;
+  --color-grey-60: #999999;
+  --color-grey-65: #a6a6a6;
+  --color-grey-70: #b3b3b3;
+  --color-grey-75: #bfbfbf;
+  --color-grey-80: #cccccc;
+  --color-gradient-1-start: #D39B9D;
+  --color-gradient-1-end: #9071D1;
+  --color-gradient-2-start: #F8DAD3;
+  --color-gradient-2-end: #CC99AE;
+  --color-gradient-3-start: #393e56;
+  --color-gradient-3-end: #646ea0;
+}
+
+
+/* DO NOT MODIFY MANUALLY. This file is auto generated by scripts/generate-styles.js */
+@font-face {
+  font-family: Inter;
+  src: url('/assets/fonts/Inter-Regular.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  src: url('/assets/fonts/Inter-ExtraBold.woff2') format('woff2');
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  src: url('/assets/fonts/Inter-Bold.woff2') format('woff2');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  src: url('/assets/fonts/Inter-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  src: url('/assets/fonts/Inter-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  src: url('/assets/fonts/Inter-Thin.woff2') format('woff2');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'PT Mono';
+  src: url('/assets/fonts/PT-Mono-Regular.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'PT Mono';
+  src: url('/assets/fonts/PT-Mono-Bold.woff2') format('woff2');
+  font-weight: bold;
+  font-style: normal;
+}
+
+:root {
+  /* Font families for shadow DOM inheritance */
+  --font-inter: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'PT Mono', ui-monospace, monospace;
+
+  /* Font weights for shadow DOM inheritance */
+  --font-weight-100: 100;
+  --font-weight-200: 200;
+  --font-weight-300: 300;
+  --font-weight-400: 400;
+  --font-weight-500: 500;
+  --font-weight-600: 600;
+  --font-weight-700: 700;
+  --font-weight-800: 800;
+  --font-weight-900: 900;
+}
+
+
+/* DO NOT MODIFY MANUALLY. This file is auto generated by scripts/generate-styles.js */
+/* Box Shadow variables for Tailwind v4 */
+
+/* :root section - for shadow DOM inheritance and external CSS usage */
+:root {
+  --shadow-button-medium-hover-primary: 0px 20px 16px -16px rgba(0, 0, 0, 0.4);
+  --shadow-button-medium-hover-secondary: 0px 20px 16px -16px rgba(0, 0, 0, 0.12);
+  --shadow-button-medium-press-primary: 0px 12px 16px -16px rgba(0, 0, 0, 0.4);
+  --shadow-button-medium-press-secondary: 0px 12px 16px -16px rgba(0, 0, 0, 0.12);
+  --shadow-button-small-hover-primary: 0px 10px 8px -8px rgba(0, 0, 0, 0.4);
+  --shadow-button-small-hover-secondary: 0px 10px 8px -8px rgba(0, 0, 0, 0.12);
+  --shadow-button-small-press-primary: 0px 6px 8px -8px rgba(0, 0, 0, 0.4);
+  --shadow-button-small-press-secondary: 0px 6px 8x -8px rgba(0, 0, 0, 0.12);
+  --shadow-1xl: 0px 0px 16px rgba(189, 206, 219, 0.4);
+  --shadow-2xl: 0px 36px 80px rgba(189, 206, 219, 0.3), 0px 5.01331px 33.4221px rgba(189, 206, 219, 0.0503198), 0px 2.68036px 17.869px rgba(189, 206, 219, 0.0417275), 0px 1.50259px 10.0172px rgba(189, 206, 219, 0.035), 0px 0.798012px 5.32008px rgba(189, 206, 219, 0.0282725), 0px 0.332071px 2.21381px rgba(189, 206, 219, 0.0196802);
+  --shadow-3xl: 0px 12px 80px rgba(189, 206, 219, 0.3), 0px 73.78px 33.4221px rgba(189, 206, 219, 0.0803), 0px 22.3363px 17.869px rgba(189, 206, 219, 0.0417275), 0px 12.5216px 10.0172px rgba(189, 206, 219, 0.035), 0px 6.6501px 5.32008px rgba(189, 206, 219, 0.0282725), 0px 2.76726px 2.21381px rgba(189, 206, 219, 0.0196802);
+  --shadow-neutral-drop-shadow: 0px 9px 4px rgba(63, 93, 116, 0.01), 0px 5px 3px rgba(63, 93, 116, 0.04), 0px 2px 2px rgba(63, 93, 116, 0.07), 0px 1px 1px rgba(63, 93, 116, 0.08), 0px 0px 0px rgba(63, 93, 116, 0.08);
+  --shadow-neutral-drop-shadow-1xl: 0px 18px 7px rgba(63, 93, 116, 0.02), 0px 10px 6px rgba(63, 93, 116, 0.08), 0px 4px 4px rgba(63, 93, 116, 0.13), 0px 1px 2px rgba(63, 93, 116, 0.15), 0px 0px 0px rgba(63, 93, 116, 0.16);
+  --shadow-neutral-drop-shadow-2xl: 0px 54px 22px rgba(63, 93, 116, 0.02), 0px 30px 18px rgba(63, 93, 116, 0.08), 0px 14px 14px rgba(63, 93, 116, 0.13), 0px 3px 7px rgba(63, 93, 116, 0.15), 0px 0px 0px rgba(63, 93, 116, 0.16);
+  --shadow-neutral-drop-shadow-3xl: 0px 118px 47px rgba(63, 93, 116, 0.02), 0px 67px 40px rgba(63, 93, 116, 0.08), 0px 30px 30px rgba(63, 93, 116, 0.13), 0px 7px 16px rgba(63, 93, 116, 0.15), 0px 0px 0px rgba(63, 93, 116, 0.16);
+  --shadow-pink-drop-shadow: 0px 9px 4px rgba(112, 96, 92, 0.01), 0px 5px 3px rgba(112, 96, 92, 0.04), 0px 2px 2px rgba(112, 96, 92, 0.07), 0px 1px 1px rgba(112, 96, 92, 0.08), 0px 0px 0px rgba(112, 96, 92, 0.08);
+  --shadow-pink-drop-shadow-1xl: 0px 17px 7px rgba(112, 96, 92, 0.02), 0px 10px 6px rgba(112, 96, 92, 0.08), 0px 4px 4px rgba(112, 96, 92, 0.13), 0px 1px 2px rgba(112, 96, 92, 0.15), 0px 0px 0px rgba(112, 96, 92, 0.16);
+  --shadow-pink-drop-shadow-2xl: 0px 54px 21px rgba(112, 96, 92, 0.02), 0px 30px 18px rgba(112, 96, 92, 0.08), 0px 13px 13px rgba(112, 96, 92, 0.13), 0px 3px 7px rgba(112, 96, 92, 0.15), 0px 0px 0px rgba(112, 96, 92, 0.16);
+  --shadow-pink-drop-shadow-3xl: 0px 117px 47px rgba(112, 96, 92, 0.02), 0px 66px 40px rgba(112, 96, 92, 0.08), 0px 29px 29px rgba(112, 96, 92, 0.13), 0px 7px 16px rgba(112, 96, 92, 0.15), 0px 0px 0px rgba(112, 96, 92, 0.16);
+  --shadow-neutral-inner-shadow: inset 0px 9px 3px rgba(63, 93, 116, 0.01), inset 0px 5px 3px rgba(63, 93, 116, 0.04), inset 0px 2px 2px rgba(63, 93, 116, 0.07), inset 0px 1px 1px rgba(63, 93, 116, 0.08);
+  --shadow-neutral-inner-shadow-top: inset 0 7px 9px -7px rgb(18 41 74 / 21%);
+  --shadow-neutral-inner-shadow-1xl: inset 0px 19px 8px rgba(63, 93, 116, 0.02), inset 0px 11px 6px rgba(63, 93, 116, 0.08), inset 0px 5px 5px rgba(63, 93, 116, 0.13), inset 0px 1px 3px rgba(63, 93, 116, 0.15);
+  --shadow-neutral-inner-shadow-2xl: inset 0px 60px 24px rgba(63, 93, 116, 0.02), inset 0px 34px 20px rgba(63, 93, 116, 0.08), inset 0px 15px 15px rgba(63, 93, 116, 0.13), inset 0px 4px 8px rgba(63, 93, 116, 0.15);
+  --shadow-neutral-inner-shadow-3xl: inset 0px 130px 52px rgba(63, 93, 116, 0.02), inset 0px 73px 44px rgba(63, 93, 116, 0.08), inset 0px 33px 33px rgba(63, 93, 116, 0.13), inset 0px 8px 18px rgba(63, 93, 116, 0.15);
+  --shadow-neutral-above-shadow: 0px 0px 24px rgba(63, 93, 116, 0.1), 0px 0px 10.4625px rgba(63, 93, 116, 0.0675), 0px 0px 3.9px rgba(63, 93, 116, 0.05), 0px 0px 1.3875px rgba(63, 93, 116, 0.0325);
+  --shadow-neutral-above-shadow-1xl: 0px 0px 32px rgba(63, 93, 116, 0.1), 0px 0px 18.46px rgba(63, 93, 116, 0.0675), 0px 0px 11.9px rgba(63, 93, 116, 0.05), 0px 0px 9.39px rgba(63, 93, 116, 0.0325);
+  --shadow-neutral-above-shadow-2xl: 0px 0px 40px rgba(63, 93, 116, 0.1), 0px 0px 26.46px rgba(63, 93, 116, 0.0675), 0px 0px 19.9px rgba(63, 93, 116, 0.05), 0px 0px 17.39px rgba(63, 93, 116, 0.0325);
+  --shadow-neutral-above-shadow-3xl: 0px 0px 48px rgba(63, 93, 116, 0.1), 0px 0px 34.46px rgba(63, 93, 116, 0.0675), 0px 0px 27.9px rgba(63, 93, 116, 0.05), 0px 0px 25.39px rgba(63, 93, 116, 0.0325);
+  --shadow-pink-above-shadow: 0px 0px 24px rgba(112, 96, 92, 0.1), 0px 0px 10.4625px rgba(112, 96, 92, 0.0675), 0px 0px 3.9px rgba(112, 96, 92, 0.05), 0px 0px 1.3875px rgba(112, 96, 92, 0.0325);
+  --shadow-pink-above-shadow-1xl: 0px 0px 32px rgba(112, 96, 92, 0.1), 0px 0px 18.46px rgba(112, 96, 92, 0.0675), 0px 0px 11.9px rgba(112, 96, 92, 0.05), 0px 0px 9.39px rgba(112, 96, 92, 0.0325);
+  --shadow-pink-above-shadow-2xl: 0px 0px 40px rgba(112, 96, 92, 0.1), 0px 0px 26.46px rgba(112, 96, 92, 0.0675), 0px 0px 19.9px rgba(112, 96, 92, 0.05), 0px 0px 17.39px rgba(112, 96, 92, 0.0325);
+  --shadow-pink-above-shadow-3xl: 0px 0px 48px rgba(112, 96, 92, 0.1), 0px 0px 34.46px rgba(112, 96, 92, 0.0675), 0px 0px 27.9px rgba(112, 96, 92, 0.05), 0px 0px 25.39px rgba(112, 96, 92, 0.0325);
+  --shadow-wizard-step: 1px 1px 8px #FFFFFF, inset 1px 1px 4px rgba(0, 0, 0, 0.16);
+  --shadow-wizard-line: inset 0px 0px 2px rgba(0, 0, 0, 0.14);
+  --shadow-neutral-shadow-round: 0px 7px 5px 0px rgba(63, 93, 116, 0.00), 0px 0px 10px 0px rgba(63, 93, 116, 0.02), 0px 3px 10px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 3px 0px rgba(63, 93, 116, 0.16);
+  --shadow-neutral-shadow-round-1xl: 0px 27px 12px 0px rgba(63, 93, 116, 0.00), 0px 18px 7px 0px rgba(63, 93, 116, 0.02), 0px 10px 6px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 14px 0px rgba(63, 93, 116, 0.16);
+  --shadow-neutral-shadow-round-2xl: 0px 85px 24px 0px rgba(63, 93, 116, 0.00), 0px 54px 22px 0px rgba(63, 93, 116, 0.02), 0px 30px 18px 0px rgba(63, 93, 116, 0.08), 0px 14px 14px 0px rgba(63, 93, 116, 0.13), 0px 3px 7px 0px rgba(63, 93, 116, 0.15), 0px 0px 23px 0px rgba(63, 93, 116, 0.16);
+  --shadow-neutral-shadow-round-3xl: 0px 185px 52px 0px rgba(63, 93, 116, 0.00), 0px 118px 47px 0px rgba(63, 93, 116, 0.02), 0px 67px 40px 0px rgba(63, 93, 116, 0.08), 0px 30px 30px 0px rgba(63, 93, 116, 0.13), 0px 7px 16px 0px rgba(63, 93, 116, 0.15), 0px 0px 30px 0px rgba(63, 93, 116, 0.16);
+}
+
+/* @theme section - for Tailwind v4 shadow-* utilities */
+@theme {
+  --shadow-button-medium-hover-primary: 0px 20px 16px -16px rgba(0, 0, 0, 0.4);
+  --shadow-button-medium-hover-secondary: 0px 20px 16px -16px rgba(0, 0, 0, 0.12);
+  --shadow-button-medium-press-primary: 0px 12px 16px -16px rgba(0, 0, 0, 0.4);
+  --shadow-button-medium-press-secondary: 0px 12px 16px -16px rgba(0, 0, 0, 0.12);
+  --shadow-button-small-hover-primary: 0px 10px 8px -8px rgba(0, 0, 0, 0.4);
+  --shadow-button-small-hover-secondary: 0px 10px 8px -8px rgba(0, 0, 0, 0.12);
+  --shadow-button-small-press-primary: 0px 6px 8px -8px rgba(0, 0, 0, 0.4);
+  --shadow-button-small-press-secondary: 0px 6px 8x -8px rgba(0, 0, 0, 0.12);
+  --shadow-1xl: 0px 0px 16px rgba(189, 206, 219, 0.4);
+  --shadow-2xl: 0px 36px 80px rgba(189, 206, 219, 0.3), 0px 5.01331px 33.4221px rgba(189, 206, 219, 0.0503198), 0px 2.68036px 17.869px rgba(189, 206, 219, 0.0417275), 0px 1.50259px 10.0172px rgba(189, 206, 219, 0.035), 0px 0.798012px 5.32008px rgba(189, 206, 219, 0.0282725), 0px 0.332071px 2.21381px rgba(189, 206, 219, 0.0196802);
+  --shadow-3xl: 0px 12px 80px rgba(189, 206, 219, 0.3), 0px 73.78px 33.4221px rgba(189, 206, 219, 0.0803), 0px 22.3363px 17.869px rgba(189, 206, 219, 0.0417275), 0px 12.5216px 10.0172px rgba(189, 206, 219, 0.035), 0px 6.6501px 5.32008px rgba(189, 206, 219, 0.0282725), 0px 2.76726px 2.21381px rgba(189, 206, 219, 0.0196802);
+  --shadow-neutral-drop-shadow: 0px 9px 4px rgba(63, 93, 116, 0.01), 0px 5px 3px rgba(63, 93, 116, 0.04), 0px 2px 2px rgba(63, 93, 116, 0.07), 0px 1px 1px rgba(63, 93, 116, 0.08), 0px 0px 0px rgba(63, 93, 116, 0.08);
+  --shadow-neutral-drop-shadow-1xl: 0px 18px 7px rgba(63, 93, 116, 0.02), 0px 10px 6px rgba(63, 93, 116, 0.08), 0px 4px 4px rgba(63, 93, 116, 0.13), 0px 1px 2px rgba(63, 93, 116, 0.15), 0px 0px 0px rgba(63, 93, 116, 0.16);
+  --shadow-neutral-drop-shadow-2xl: 0px 54px 22px rgba(63, 93, 116, 0.02), 0px 30px 18px rgba(63, 93, 116, 0.08), 0px 14px 14px rgba(63, 93, 116, 0.13), 0px 3px 7px rgba(63, 93, 116, 0.15), 0px 0px 0px rgba(63, 93, 116, 0.16);
+  --shadow-neutral-drop-shadow-3xl: 0px 118px 47px rgba(63, 93, 116, 0.02), 0px 67px 40px rgba(63, 93, 116, 0.08), 0px 30px 30px rgba(63, 93, 116, 0.13), 0px 7px 16px rgba(63, 93, 116, 0.15), 0px 0px 0px rgba(63, 93, 116, 0.16);
+  --shadow-pink-drop-shadow: 0px 9px 4px rgba(112, 96, 92, 0.01), 0px 5px 3px rgba(112, 96, 92, 0.04), 0px 2px 2px rgba(112, 96, 92, 0.07), 0px 1px 1px rgba(112, 96, 92, 0.08), 0px 0px 0px rgba(112, 96, 92, 0.08);
+  --shadow-pink-drop-shadow-1xl: 0px 17px 7px rgba(112, 96, 92, 0.02), 0px 10px 6px rgba(112, 96, 92, 0.08), 0px 4px 4px rgba(112, 96, 92, 0.13), 0px 1px 2px rgba(112, 96, 92, 0.15), 0px 0px 0px rgba(112, 96, 92, 0.16);
+  --shadow-pink-drop-shadow-2xl: 0px 54px 21px rgba(112, 96, 92, 0.02), 0px 30px 18px rgba(112, 96, 92, 0.08), 0px 13px 13px rgba(112, 96, 92, 0.13), 0px 3px 7px rgba(112, 96, 92, 0.15), 0px 0px 0px rgba(112, 96, 92, 0.16);
+  --shadow-pink-drop-shadow-3xl: 0px 117px 47px rgba(112, 96, 92, 0.02), 0px 66px 40px rgba(112, 96, 92, 0.08), 0px 29px 29px rgba(112, 96, 92, 0.13), 0px 7px 16px rgba(112, 96, 92, 0.15), 0px 0px 0px rgba(112, 96, 92, 0.16);
+  --shadow-neutral-inner-shadow: inset 0px 9px 3px rgba(63, 93, 116, 0.01), inset 0px 5px 3px rgba(63, 93, 116, 0.04), inset 0px 2px 2px rgba(63, 93, 116, 0.07), inset 0px 1px 1px rgba(63, 93, 116, 0.08);
+  --shadow-neutral-inner-shadow-top: inset 0 7px 9px -7px rgb(18 41 74 / 21%);
+  --shadow-neutral-inner-shadow-1xl: inset 0px 19px 8px rgba(63, 93, 116, 0.02), inset 0px 11px 6px rgba(63, 93, 116, 0.08), inset 0px 5px 5px rgba(63, 93, 116, 0.13), inset 0px 1px 3px rgba(63, 93, 116, 0.15);
+  --shadow-neutral-inner-shadow-2xl: inset 0px 60px 24px rgba(63, 93, 116, 0.02), inset 0px 34px 20px rgba(63, 93, 116, 0.08), inset 0px 15px 15px rgba(63, 93, 116, 0.13), inset 0px 4px 8px rgba(63, 93, 116, 0.15);
+  --shadow-neutral-inner-shadow-3xl: inset 0px 130px 52px rgba(63, 93, 116, 0.02), inset 0px 73px 44px rgba(63, 93, 116, 0.08), inset 0px 33px 33px rgba(63, 93, 116, 0.13), inset 0px 8px 18px rgba(63, 93, 116, 0.15);
+  --shadow-neutral-above-shadow: 0px 0px 24px rgba(63, 93, 116, 0.1), 0px 0px 10.4625px rgba(63, 93, 116, 0.0675), 0px 0px 3.9px rgba(63, 93, 116, 0.05), 0px 0px 1.3875px rgba(63, 93, 116, 0.0325);
+  --shadow-neutral-above-shadow-1xl: 0px 0px 32px rgba(63, 93, 116, 0.1), 0px 0px 18.46px rgba(63, 93, 116, 0.0675), 0px 0px 11.9px rgba(63, 93, 116, 0.05), 0px 0px 9.39px rgba(63, 93, 116, 0.0325);
+  --shadow-neutral-above-shadow-2xl: 0px 0px 40px rgba(63, 93, 116, 0.1), 0px 0px 26.46px rgba(63, 93, 116, 0.0675), 0px 0px 19.9px rgba(63, 93, 116, 0.05), 0px 0px 17.39px rgba(63, 93, 116, 0.0325);
+  --shadow-neutral-above-shadow-3xl: 0px 0px 48px rgba(63, 93, 116, 0.1), 0px 0px 34.46px rgba(63, 93, 116, 0.0675), 0px 0px 27.9px rgba(63, 93, 116, 0.05), 0px 0px 25.39px rgba(63, 93, 116, 0.0325);
+  --shadow-pink-above-shadow: 0px 0px 24px rgba(112, 96, 92, 0.1), 0px 0px 10.4625px rgba(112, 96, 92, 0.0675), 0px 0px 3.9px rgba(112, 96, 92, 0.05), 0px 0px 1.3875px rgba(112, 96, 92, 0.0325);
+  --shadow-pink-above-shadow-1xl: 0px 0px 32px rgba(112, 96, 92, 0.1), 0px 0px 18.46px rgba(112, 96, 92, 0.0675), 0px 0px 11.9px rgba(112, 96, 92, 0.05), 0px 0px 9.39px rgba(112, 96, 92, 0.0325);
+  --shadow-pink-above-shadow-2xl: 0px 0px 40px rgba(112, 96, 92, 0.1), 0px 0px 26.46px rgba(112, 96, 92, 0.0675), 0px 0px 19.9px rgba(112, 96, 92, 0.05), 0px 0px 17.39px rgba(112, 96, 92, 0.0325);
+  --shadow-pink-above-shadow-3xl: 0px 0px 48px rgba(112, 96, 92, 0.1), 0px 0px 34.46px rgba(112, 96, 92, 0.0675), 0px 0px 27.9px rgba(112, 96, 92, 0.05), 0px 0px 25.39px rgba(112, 96, 92, 0.0325);
+  --shadow-wizard-step: 1px 1px 8px #FFFFFF, inset 1px 1px 4px rgba(0, 0, 0, 0.16);
+  --shadow-wizard-line: inset 0px 0px 2px rgba(0, 0, 0, 0.14);
+  --shadow-neutral-shadow-round: 0px 7px 5px 0px rgba(63, 93, 116, 0.00), 0px 0px 10px 0px rgba(63, 93, 116, 0.02), 0px 3px 10px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 3px 0px rgba(63, 93, 116, 0.16);
+  --shadow-neutral-shadow-round-1xl: 0px 27px 12px 0px rgba(63, 93, 116, 0.00), 0px 18px 7px 0px rgba(63, 93, 116, 0.02), 0px 10px 6px 0px rgba(63, 93, 116, 0.08), 0px 4px 4px 0px rgba(63, 93, 116, 0.13), 0px 1px 2px 0px rgba(63, 93, 116, 0.15), 0px 0px 14px 0px rgba(63, 93, 116, 0.16);
+  --shadow-neutral-shadow-round-2xl: 0px 85px 24px 0px rgba(63, 93, 116, 0.00), 0px 54px 22px 0px rgba(63, 93, 116, 0.02), 0px 30px 18px 0px rgba(63, 93, 116, 0.08), 0px 14px 14px 0px rgba(63, 93, 116, 0.13), 0px 3px 7px 0px rgba(63, 93, 116, 0.15), 0px 0px 23px 0px rgba(63, 93, 116, 0.16);
+  --shadow-neutral-shadow-round-3xl: 0px 185px 52px 0px rgba(63, 93, 116, 0.00), 0px 118px 47px 0px rgba(63, 93, 116, 0.02), 0px 67px 40px 0px rgba(63, 93, 116, 0.08), 0px 30px 30px 0px rgba(63, 93, 116, 0.13), 0px 7px 16px 0px rgba(63, 93, 116, 0.15), 0px 0px 30px 0px rgba(63, 93, 116, 0.16);
+}
+
+
+/**
+ * @file Main styles (Tailwind CSS v4) - Source file for components
+ *
+ * This file is imported by web components for their Shadow DOM styles.
+ * It contains only theme configuration (no @apply directives).
+ *
+ * This file gets processed by Vite's @tailwindcss/vite plugin at build time.
+ */
+
+
+/* Base layer font family override to ensure Inter is used instead of browser defaults */
+@layer base {
+  :root {
+    --font-sans: 'Inter', system-ui, sans-serif;
+  }
+}
+
+/* Theme variables in :root for shadow DOM inheritance */
+:root {
+  /* Font families */
+  --font-inter: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'PT Mono', ui-monospace, monospace;
+
+  /* Font sizes (text-*) */
+  --text-6: 6px;
+  --text-8: 8px;
+  --text-10: 10px;
+  --text-12: 12px;
+  --text-13: 13px;
+  --text-14: 14px;
+  --text-16: 16px;
+  --text-17: 17px;
+  --text-20: 20px;
+  --text-21: 21px;
+  --text-24: 24px;
+  --text-26: 26px;
+  --text-32: 32px;
+  --text-40: 40px;
+  --text-44: 44px;
+  --text-48: 48px;
+
+  /* Font weights (font-weight-*) */
+  --font-weight-100: 100;
+  --font-weight-200: 200;
+  --font-weight-300: 300;
+  --font-weight-400: 400;
+  --font-weight-500: 500;
+  --font-weight-600: 600;
+  --font-weight-700: 700;
+  --font-weight-800: 800;
+  --font-weight-900: 900;
+
+  /* Legacy font weight variables for backward compatibility */
+  --font-100: 100;
+  --font-200: 200;
+  --font-300: 300;
+  --font-400: 400;
+  --font-500: 500;
+  --font-600: 600;
+  --font-700: 700;
+  --font-800: 800;
+  --font-900: 900;
+
+  /* Line heights (leading-*) */
+  --leading-10: 10px;
+  --leading-12: 12px;
+  --leading-14: 14px;
+  --leading-15: 15px;
+  --leading-17: 17px;
+  --leading-19: 19px;
+  --leading-20: 20px;
+  --leading-22: 22px;
+  --leading-24: 24px;
+  --leading-26: 26px;
+  --leading-28: 28px;
+  --leading-31: 31px;
+  --leading-32: 32px;
+  --leading-38: 38px;
+  --leading-40: 40px;
+  --leading-48: 48px;
+  --leading-58: 58px;
+
+  /* Border radius (rounded-*) */
+  --radius-0: 0;
+  --radius-2: 2px;
+  --radius-4: 4px;
+  --radius-6: 6px;
+  --radius-8: 8px;
+  --radius-10: 10px;
+  --radius-12: 12px;
+  --radius-14: 14px;
+  --radius-16: 16px;
+  --radius-24: 24px;
+
+  /* Scales */
+  --scale-98: 0.98;
+
+  /* Heights */
+  --height-78: 78px;
+
+  /* Spacing */
+  --spacing-0: 0px;
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-7: 1.75rem;
+  --spacing-8: 2rem;
+  --spacing-9: 2.25rem;
+  --spacing-10: 2.5rem;
+  --spacing-11: 2.75rem;
+  --spacing-12: 3rem;
+  --spacing-14: 3.5rem;
+  --spacing-16: 4rem;
+  --spacing-17: 4.25rem;
+  --spacing-18: 4.5rem;
+  --spacing-20: 5rem;
+  --spacing-22: 5.5rem;
+  --spacing-24: 6rem;
+  --spacing-28: 7rem;
+  --spacing-30: 7.5rem;
+  --spacing-32: 8rem;
+
+  /* Box Shadows (shadow-*) */
+  --shadow-neutral-shadow-round:
+    0px 7px 5px 0px rgb(63 93 116 / 0%), 0px 0px 10px 0px rgb(63 93 116 / 2%),
+    0px 3px 10px 0px rgb(63 93 116 / 8%), 0px 4px 4px 0px rgb(63 93 116 / 13%),
+    0px 1px 2px 0px rgb(63 93 116 / 15%), 0px 0px 3px 0px rgb(63 93 116 / 16%);
+  --shadow-neutral-shadow-round-1xl:
+    0px 27px 12px 0px rgb(63 93 116 / 0%), 0px 18px 7px 0px rgb(63 93 116 / 2%),
+    0px 10px 6px 0px rgb(63 93 116 / 8%), 0px 4px 4px 0px rgb(63 93 116 / 13%),
+    0px 1px 2px 0px rgb(63 93 116 / 15%), 0px 0px 14px 0px rgb(63 93 116 / 16%);
+  --shadow-neutral-shadow-round-2xl:
+    0px 85px 24px 0px rgb(63 93 116 / 0%),
+    0px 54px 22px 0px rgb(63 93 116 / 2%),
+    0px 30px 18px 0px rgb(63 93 116 / 8%),
+    0px 14px 14px 0px rgb(63 93 116 / 13%),
+    0px 3px 7px 0px rgb(63 93 116 / 15%), 0px 0px 23px 0px rgb(63 93 116 / 16%);
+  --shadow-neutral-shadow-round-3xl:
+    0px 185px 52px 0px rgb(63 93 116 / 0%),
+    0px 118px 47px 0px rgb(63 93 116 / 2%),
+    0px 67px 40px 0px rgb(63 93 116 / 8%),
+    0px 30px 30px 0px rgb(63 93 116 / 13%),
+    0px 7px 16px 0px rgb(63 93 116 / 15%), 0px 0px 30px 0px rgb(63 93 116 / 16%);
+
+  /* Animations (animate-*) */
+  --animate-pulse-resize: pulse-resize 1s ease-in-out infinite;
+  --animate-resize-in: resize-in 0.5s ease-in-out;
+  --animate-fade-in: fade-in 0.5s ease-in-out forwards;
+  --animate-bounce2: bounce2 1s ease-in-out infinite alternate;
+  --animate-fade-in-up: fade-in-up 0.5s ease-out forwards;
+
+  /* Animation Fill Modes (animation-fill-*) */
+  --animation-fill-none: none;
+  --animation-fill-forwards: forwards;
+  --animation-fill-backwards: backwards;
+  --animation-fill-both: both;
+}
+
+@theme {
+  /* Font families */
+  --font-inter: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'PT Mono', ui-monospace, monospace;
+
+  /* Font sizes (text-*) */
+  --text-6: 6px;
+  --text-8: 8px;
+  --text-10: 10px;
+  --text-12: 12px;
+  --text-13: 13px;
+  --text-14: 14px;
+  --text-16: 16px;
+  --text-17: 17px;
+  --text-20: 20px;
+  --text-21: 21px;
+  --text-24: 24px;
+  --text-26: 26px;
+  --text-32: 32px;
+  --text-40: 40px;
+  --text-44: 44px;
+  --text-48: 48px;
+
+  /* Font weights (font-weight-*) */
+  --font-weight-100: 100;
+  --font-weight-200: 200;
+  --font-weight-300: 300;
+  --font-weight-400: 400;
+  --font-weight-500: 500;
+  --font-weight-600: 600;
+  --font-weight-700: 700;
+  --font-weight-800: 800;
+  --font-weight-900: 900;
+
+  /* Legacy font weight variables for backward compatibility */
+  --font-100: 100;
+  --font-200: 200;
+  --font-300: 300;
+  --font-400: 400;
+  --font-500: 500;
+  --font-600: 600;
+  --font-700: 700;
+  --font-800: 800;
+  --font-900: 900;
+
+  /* Line heights (leading-*) */
+  --leading-10: 10px;
+  --leading-12: 12px;
+  --leading-14: 14px;
+  --leading-15: 15px;
+  --leading-17: 17px;
+  --leading-19: 19px;
+  --leading-20: 20px;
+  --leading-22: 22px;
+  --leading-24: 24px;
+  --leading-26: 26px;
+  --leading-28: 28px;
+  --leading-31: 31px;
+  --leading-32: 32px;
+  --leading-38: 38px;
+  --leading-40: 40px;
+  --leading-48: 48px;
+  --leading-58: 58px;
+
+  /* Border radius (rounded-*) */
+  --radius-0: 0;
+  --radius-2: 2px;
+  --radius-4: 4px;
+  --radius-6: 6px;
+  --radius-8: 8px;
+  --radius-10: 10px;
+  --radius-12: 12px;
+  --radius-14: 14px;
+  --radius-16: 16px;
+  --radius-24: 24px;
+
+  /* Scales */
+  --scale-98: 0.98;
+
+  /* Heights */
+  --height-78: 78px;
+
+  /* Spacing */
+  --spacing-0: 0px;
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-7: 1.75rem;
+  --spacing-8: 2rem;
+  --spacing-9: 2.25rem;
+  --spacing-10: 2.5rem;
+  --spacing-11: 2.75rem;
+  --spacing-12: 3rem;
+  --spacing-14: 3.5rem;
+  --spacing-16: 4rem;
+  --spacing-17: 4.25rem;
+  --spacing-18: 4.5rem;
+  --spacing-20: 5rem;
+  --spacing-22: 5.5rem;
+  --spacing-24: 6rem;
+  --spacing-28: 7rem;
+  --spacing-30: 7.5rem;
+  --spacing-32: 8rem;
+
+  /* Box Shadows (shadow-*) */
+  --shadow-neutral-shadow-round:
+    0px 7px 5px 0px rgb(63 93 116 / 0%), 0px 0px 10px 0px rgb(63 93 116 / 2%),
+    0px 3px 10px 0px rgb(63 93 116 / 8%), 0px 4px 4px 0px rgb(63 93 116 / 13%),
+    0px 1px 2px 0px rgb(63 93 116 / 15%), 0px 0px 3px 0px rgb(63 93 116 / 16%);
+  --shadow-neutral-shadow-round-1xl:
+    0px 27px 12px 0px rgb(63 93 116 / 0%), 0px 18px 7px 0px rgb(63 93 116 / 2%),
+    0px 10px 6px 0px rgb(63 93 116 / 8%), 0px 4px 4px 0px rgb(63 93 116 / 13%),
+    0px 1px 2px 0px rgb(63 93 116 / 15%), 0px 0px 14px 0px rgb(63 93 116 / 16%);
+  --shadow-neutral-shadow-round-2xl:
+    0px 85px 24px 0px rgb(63 93 116 / 0%),
+    0px 54px 22px 0px rgb(63 93 116 / 2%),
+    0px 30px 18px 0px rgb(63 93 116 / 8%),
+    0px 14px 14px 0px rgb(63 93 116 / 13%),
+    0px 3px 7px 0px rgb(63 93 116 / 15%), 0px 0px 23px 0px rgb(63 93 116 / 16%);
+  --shadow-neutral-shadow-round-3xl:
+    0px 185px 52px 0px rgb(63 93 116 / 0%),
+    0px 118px 47px 0px rgb(63 93 116 / 2%),
+    0px 67px 40px 0px rgb(63 93 116 / 8%),
+    0px 30px 30px 0px rgb(63 93 116 / 13%),
+    0px 7px 16px 0px rgb(63 93 116 / 15%), 0px 0px 30px 0px rgb(63 93 116 / 16%);
+
+  /* Animations (animate-*) */
+  --animate-pulse-resize: pulse-resize 1s ease-in-out infinite;
+  --animate-resize-in: resize-in 0.5s ease-in-out;
+  --animate-fade-in: fade-in 0.5s ease-in-out forwards;
+  --animate-bounce2: bounce2 1s ease-in-out infinite alternate;
+  --animate-fade-in-up: fade-in-up 0.5s ease-out forwards;
+
+  /* Animation Fill Modes (animation-fill-*) */
+  --animation-fill-none: none;
+  --animation-fill-forwards: forwards;
+  --animation-fill-backwards: backwards;
+  --animation-fill-both: both;
+}
+
+/* Keyframes for animations */
+@keyframes pulse-resize {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.7);
+  }
+}
+
+@keyframes resize-in {
+  0% {
+    transform: scale(0.5);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes bounce2 {
+  0% {
+    transform: translateY(-6px);
+  }
+
+  100% {
+    transform: translateY(10);
+  }
+}
+
+@keyframes fade-in-up {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Typography classes for Tailwind v4 - inlined and wrapped in @layer components */
+/**
+  * @file Typography v4
+  *
+  * This file contains all typography classes for Tailwind v4.
+  * Uses pure CSS properties instead of @apply to avoid Tailwind v4 conflicts.
+  *
+  * Wrapped in @layer components so Tailwind utility classes can override properties.
+  * This matches v3 behavior where @apply classes had lower priority than utilities.
+  *
+  * You can use them same as the normal Tailwind classes, e.g.: class="heading-inter-26-semi-bold"
+  */
+
+@layer components {
+  /* Headers */
+
+  .heading-inter-48-regular {
+    font-family: var(--font-inter);
+    font-size: var(--text-48);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-58);
+  }
+
+  .heading-inter-48-bold {
+    font-family: var(--font-inter);
+    font-size: var(--text-48);
+    font-weight: var(--font-weight-500);
+    font-style: normal;
+    line-height: var(--leading-58);
+  }
+
+  .heading-inter-44-regular {
+    font-family: var(--font-inter);
+    font-size: var(--text-44);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-40);
+  }
+
+  .heading-inter-44-medium {
+    font-family: var(--font-inter);
+    font-size: var(--text-44);
+    font-weight: var(--font-weight-500);
+    font-style: normal;
+    line-height: var(--leading-40);
+  }
+
+  .heading-inter-40-regular {
+    font-family: var(--font-inter);
+    font-size: var(--text-40);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-48);
+  }
+
+  .heading-inter-40-bold {
+    font-family: var(--font-inter);
+    font-size: var(--text-40);
+    font-weight: var(--font-weight-500);
+    font-style: normal;
+    line-height: var(--leading-48);
+  }
+
+  .heading-inter-32-regular {
+    font-family: var(--font-inter);
+    font-size: var(--text-32);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-38);
+  }
+
+  .heading-inter-32-medium {
+    font-family: var(--font-inter);
+    font-size: var(--text-32);
+    font-weight: var(--font-weight-500);
+    font-style: normal;
+    line-height: var(--leading-38);
+  }
+
+  .heading-inter-24-medium {
+    font-family: var(--font-inter);
+    font-size: var(--text-24);
+    font-weight: var(--font-weight-500);
+    font-style: normal;
+    line-height: var(--leading-28);
+  }
+
+  .heading-inter-26-semi-bold {
+    font-family: var(--font-inter);
+    font-size: var(--text-26);
+    font-weight: var(--font-weight-600);
+    font-style: normal;
+    line-height: var(--leading-31);
+  }
+
+  .heading-inter-21-semi-bold {
+    font-family: var(--font-inter);
+    font-size: var(--text-21);
+    font-weight: var(--font-weight-600);
+    font-style: normal;
+    line-height: var(--leading-26);
+  }
+
+  .heading-inter-17-semi-bold {
+    font-family: var(--font-inter);
+    font-size: var(--text-17);
+    font-weight: var(--font-weight-600);
+    font-style: normal;
+    line-height: var(--leading-22);
+  }
+
+  .heading-inter-12-bold-uppercase {
+    font-family: var(--font-inter);
+    font-size: var(--text-12);
+    font-weight: var(--font-weight-700);
+    font-style: normal;
+    line-height: var(--leading-15);
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+  }
+
+  .heading-inter-14-bold {
+    font-family: var(--font-inter);
+    font-size: var(--text-14);
+    font-weight: var(--font-weight-700);
+    font-style: normal;
+    line-height: var(--leading-17);
+  }
+
+  /* Navbar */
+
+  .nav-inter-14-medium-uppercase {
+    font-family: var(--font-inter);
+    font-size: var(--text-14);
+    font-weight: var(--font-weight-500);
+    font-style: normal;
+    line-height: var(--leading-17);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+
+  .nav-inter-12-medium-uppercase {
+    font-family: var(--font-inter);
+    font-size: var(--text-12);
+    font-weight: var(--font-weight-500);
+    font-style: normal;
+    line-height: var(--leading-14);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+
+  .nav-inter-10-regular {
+    font-family: var(--font-inter);
+    font-size: var(--text-10);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-12);
+  }
+
+  .nav-inter-8-medium-uppercase {
+    font-family: var(--font-inter);
+    font-size: var(--text-8);
+    font-weight: var(--font-weight-500);
+    font-style: normal;
+    line-height: var(--leading-10);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+
+  /* Paragraph */
+
+  .paragraph-inter-20-regular {
+    font-family: var(--font-inter);
+    font-size: var(--text-20);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-32);
+  }
+
+  .paragraph-inter-16-regular {
+    font-family: var(--font-inter);
+    font-size: var(--text-16);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-24);
+  }
+
+  .paragraph-inter-16-semi-bold {
+    font-family: var(--font-inter);
+    font-size: var(--text-16);
+    font-weight: var(--font-weight-600);
+    font-style: normal;
+    line-height: var(--leading-24);
+  }
+
+  .paragraph-inter-16-semi-bold-underlined {
+    font-family: var(--font-inter);
+    font-size: var(--text-16);
+    font-weight: var(--font-weight-600);
+    font-style: normal;
+    line-height: var(--leading-24);
+    text-decoration: underline;
+  }
+
+  .paragraph-inter-14-regular {
+    font-family: var(--font-inter);
+    font-size: var(--text-14);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-22);
+  }
+
+  .paragraph-inter-14-medium {
+    font-family: var(--font-inter);
+    font-size: var(--text-14);
+    font-weight: var(--font-weight-500);
+    font-style: normal;
+    line-height: var(--leading-22);
+  }
+
+  .paragraph-inter-14-semi-bold {
+    font-family: var(--font-inter);
+    font-size: var(--text-14);
+    font-weight: var(--font-weight-600);
+    font-style: normal;
+    line-height: var(--leading-22);
+  }
+
+  .paragraph-inter-13-regular {
+    font-family: var(--font-inter);
+    font-size: var(--text-13);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-20);
+  }
+
+  .paragraph-inter-12-regular {
+    font-family: var(--font-inter);
+    font-size: var(--text-12);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-20);
+  }
+
+  .paragraph-inter-10-regular {
+    font-family: var(--font-inter);
+    font-size: var(--text-10);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-12);
+  }
+
+  .paragraph-inter-12-medium {
+    font-family: var(--font-inter);
+    font-size: var(--text-12);
+    font-weight: var(--font-weight-500);
+    font-style: normal;
+    line-height: var(--leading-20);
+  }
+
+  .paragraph-inter-12-semi-bold {
+    font-family: var(--font-inter);
+    font-size: var(--text-12);
+    font-weight: var(--font-weight-600);
+    font-style: normal;
+    line-height: var(--leading-20);
+  }
+
+  .paragraph-inter-12-bold {
+    font-family: var(--font-inter);
+    font-size: var(--text-12);
+    font-weight: var(--font-weight-700);
+    font-style: normal;
+    line-height: var(--leading-20);
+  }
+
+  .paragraph-inter-10-semi-bold {
+    font-family: var(--font-inter);
+    font-size: var(--text-10);
+    font-weight: var(--font-weight-600);
+    font-style: normal;
+    line-height: var(--leading-12);
+  }
+
+  .paragraph-inter-10-bold-uppercase {
+    font-family: var(--font-inter);
+    font-size: var(--text-10);
+    font-weight: var(--font-weight-700);
+    font-style: normal;
+    line-height: var(--leading-12);
+    text-transform: uppercase;
+  }
+
+  .paragraph-ptmono-24-regular {
+    font-family: var(--font-mono);
+    font-size: var(--text-24);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-26);
+  }
+
+  .paragraph-ptmono-24-bold {
+    font-family: var(--font-mono);
+    font-size: var(--text-24);
+    font-weight: var(--font-weight-700);
+    font-style: normal;
+    line-height: var(--leading-26);
+  }
+
+  .paragraph-ptmono-16-regular {
+    font-family: var(--font-mono);
+    font-size: var(--text-16);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-22);
+  }
+
+  .paragraph-ptmono-16-bold {
+    font-family: var(--font-mono);
+    font-size: var(--text-16);
+    font-weight: var(--font-weight-700);
+    font-style: normal;
+    line-height: var(--leading-22);
+  }
+
+  .paragraph-ptmono-14-regular {
+    font-family: var(--font-mono);
+    font-size: var(--text-14);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-20);
+  }
+
+  .paragraph-ptmono-14-bold {
+    font-family: var(--font-mono);
+    font-size: var(--text-14);
+    font-weight: var(--font-weight-700);
+    font-style: normal;
+    line-height: var(--leading-20);
+  }
+
+  .paragraph-ptmono-12-bold {
+    font-family: var(--font-mono);
+    font-size: var(--text-12);
+    font-weight: var(--font-weight-700);
+    font-style: normal;
+    line-height: var(--leading-14);
+  }
+
+  .paragraph-ptmono-12-regular {
+    font-family: var(--font-mono);
+    font-size: var(--text-12);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-14);
+  }
+
+  .paragraph-ptmono-10-bold {
+    font-family: var(--font-mono);
+    font-size: var(--text-10);
+    font-weight: var(--font-weight-700);
+    font-style: normal;
+    line-height: var(--leading-14);
+  }
+
+  .paragraph-ptmono-10-regular {
+    font-family: var(--font-mono);
+    font-size: var(--text-10);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-14);
+  }
+} /* end @layer components */
+
+
+/* Tippy.js tooltip styles for Tailwind v4 - inlined */
+/**
+ * Tippy.js styles for Tailwind v4
+ * Converted from SCSS @apply directives to pure CSS properties
+ */
+
+.tippy-box[data-animation='fade'][data-state='hidden'] {
+  opacity: 0;
+}
+
+.tippy-arrow::before {
+  content: '';
+  position: absolute;
+  border-color: transparent;
+  border-style: solid;
+}
+
+.tippy-box[data-placement^='top'] > .tippy-arrow::before {
+  transform-origin: center top;
+}
+
+.tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
+  transform-origin: center bottom;
+}
+
+.tippy-box[data-placement^='left'] > .tippy-arrow::before {
+  transform-origin: center left;
+}
+
+.tippy-box[data-placement^='right'] > .tippy-arrow::before {
+  transform-origin: center right;
+}
+
+.tippy-box[data-inertia][data-state='visible'] {
+  transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
+}
+
+.tippy-arrow {
+  width: 16px;
+  height: 16px;
+}
+
+/* sizes */
+
+.tippy-size-medium {
+  padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-2);
+  border-radius: var(--radius-4);
+  font-size: var(--text-10);
+  font-style: normal;
+  font-weight: var(--font-weight-600);
+  line-height: var(--leading-12);
+  font-family: var(--font-inter);
+  box-shadow: var(--shadow-neutral-shadow-round-1xl);
+}
+
+.tippy-size-medium[data-placement^='top'] > .tippy-arrow {
+  bottom: 0;
+}
+
+.tippy-size-medium[data-placement^='top'] > .tippy-arrow::before {
+  bottom: -6px;
+  left: 2px;
+  border-width: 6px 6px 0;
+}
+
+.tippy-size-medium[data-placement^='bottom'] > .tippy-arrow {
+  top: 0;
+}
+
+.tippy-size-medium[data-placement^='bottom'] > .tippy-arrow::before {
+  top: -6px;
+  left: 2px;
+  border-width: 0 6px 6px;
+}
+
+.tippy-size-medium[data-placement^='left'] > .tippy-arrow {
+  right: 0;
+}
+
+.tippy-size-medium[data-placement^='left'] > .tippy-arrow::before {
+  border-width: 6px 0 6px 6px;
+  right: -6px;
+  top: 2px;
+}
+
+.tippy-size-medium[data-placement^='right'] > .tippy-arrow {
+  left: 0;
+}
+
+.tippy-size-medium[data-placement^='right'] > .tippy-arrow::before {
+  left: -6px;
+  top: 2px;
+  border-width: 6px 6px 6px 0;
+}
+
+.tippy-size-large {
+  padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-3);
+  border-radius: var(--radius-8);
+  font-size: var(--text-12);
+  font-style: normal;
+  font-weight: var(--font-weight-400);
+  line-height: var(--leading-20);
+  font-family: var(--font-inter);
+  box-shadow: var(--shadow-neutral-shadow-round-1xl);
+}
+
+.tippy-size-large[data-placement^='top'] > .tippy-arrow {
+  bottom: 0;
+}
+
+.tippy-size-large[data-placement^='top'] > .tippy-arrow::before {
+  bottom: -8px;
+  left: 0;
+  border-width: 8px 8px 0;
+}
+
+.tippy-size-large[data-placement^='bottom'] > .tippy-arrow {
+  top: 0;
+}
+
+.tippy-size-large[data-placement^='bottom'] > .tippy-arrow::before {
+  top: -8px;
+  left: 0;
+  border-width: 0 8px 8px;
+}
+
+.tippy-size-large[data-placement^='left'] > .tippy-arrow {
+  right: 0;
+}
+
+.tippy-size-large[data-placement^='left'] > .tippy-arrow::before {
+  border-width: 8px 0 8px 8px;
+  right: -8px;
+}
+
+.tippy-size-large[data-placement^='right'] > .tippy-arrow {
+  left: 0;
+}
+
+.tippy-size-large[data-placement^='right'] > .tippy-arrow::before {
+  left: -8px;
+  border-width: 8px 8px 8px 0;
+}
+
+/* variants */
+
+.tippy-variant-dark {
+  color: var(--neutral-100);
+  background-color: var(--neutral-30);
+}
+
+.tippy-variant-dark[data-placement^='top'] .tippy-arrow::before {
+  border-top-color: var(--neutral-30);
+}
+
+.tippy-variant-dark[data-placement^='bottom'] .tippy-arrow::before {
+  border-bottom-color: var(--neutral-30);
+}
+
+.tippy-variant-dark[data-placement^='left'] .tippy-arrow::before {
+  border-left-color: var(--neutral-30);
+}
+
+.tippy-variant-dark[data-placement^='right'] .tippy-arrow::before {
+  border-right-color: var(--neutral-30);
+}
+
+.tippy-variant-dark > .tippy-backdrop {
+  background-color: var(--neutral-30);
+}
+
+.tippy-variant-dark > .tippy-svg-arrow {
+  fill: var(--neutral-30);
+}
+
+.tippy-variant-light {
+  color: var(--neutral-20);
+  background-color: var(--neutral-97);
+}
+
+.tippy-variant-light[data-placement^='top'] .tippy-arrow::before {
+  border-top-color: var(--neutral-97);
+}
+
+.tippy-variant-light[data-placement^='bottom'] .tippy-arrow::before {
+  border-bottom-color: var(--neutral-97);
+}
+
+.tippy-variant-light[data-placement^='left'] .tippy-arrow::before {
+  border-left-color: var(--neutral-97);
+}
+
+.tippy-variant-light[data-placement^='right'] .tippy-arrow::before {
+  border-right-color: var(--neutral-97);
+}
+
+.tippy-variant-light > .tippy-backdrop {
+  background-color: var(--neutral-97);
+}
+
+.tippy-variant-light > .tippy-svg-arrow {
+  fill: var(--neutral-97);
+}
+
+.tippy-variant-white {
+  color: var(--neutral-20);
+  background-color: var(--neutral-100);
+}
+
+.tippy-variant-white[data-placement^='top'] .tippy-arrow::before {
+  border-top-color: var(--neutral-100);
+}
+
+.tippy-variant-white[data-placement^='bottom'] .tippy-arrow::before {
+  border-bottom-color: var(--neutral-100);
+}
+
+.tippy-variant-white[data-placement^='left'] .tippy-arrow::before {
+  border-left-color: var(--neutral-100);
+}
+
+.tippy-variant-white[data-placement^='right'] .tippy-arrow::before {
+  border-right-color: var(--neutral-100);
+}
+
+.tippy-variant-white > .tippy-backdrop {
+  background-color: var(--neutral-100);
+}
+
+.tippy-variant-white > .tippy-svg-arrow {
+  fill: var(--neutral-100);
+}
+
+.tippy-variant-success {
+  color: var(--neutral-100);
+  background-color: var(--green-54);
+}
+
+.tippy-variant-success[data-placement^='top'] .tippy-arrow::before {
+  border-top-color: var(--green-54);
+}
+
+.tippy-variant-success[data-placement^='bottom'] .tippy-arrow::before {
+  border-bottom-color: var(--green-54);
+}
+
+.tippy-variant-success[data-placement^='left'] .tippy-arrow::before {
+  border-left-color: var(--green-54);
+}
+
+.tippy-variant-success[data-placement^='right'] .tippy-arrow::before {
+  border-right-color: var(--green-54);
+}
+
+.tippy-variant-success > .tippy-backdrop {
+  background-color: var(--green-54);
+}
+
+.tippy-variant-success > .tippy-svg-arrow {
+  fill: var(--green-54);
+}
+
+.tippy-variant-danger {
+  color: var(--neutral-100);
+  background-color: var(--red-65);
+}
+
+.tippy-variant-danger[data-placement^='top'] .tippy-arrow::before {
+  border-top-color: var(--red-65);
+}
+
+.tippy-variant-danger[data-placement^='bottom'] .tippy-arrow::before {
+  border-bottom-color: var(--red-65);
+}
+
+.tippy-variant-danger[data-placement^='left'] .tippy-arrow::before {
+  border-left-color: var(--red-65);
+}
+
+.tippy-variant-danger[data-placement^='right'] .tippy-arrow::before {
+  border-right-color: var(--red-65);
+}
+
+.tippy-variant-danger > .tippy-backdrop {
+  background-color: var(--red-65);
+}
+
+.tippy-variant-danger > .tippy-svg-arrow {
+  fill: var(--red-65);
+}
+
+/* themes */
+
+.tippy-box[data-theme~='dark-medium'] {
+  padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-2);
+  border-radius: var(--radius-4);
+  font-size: var(--text-10);
+  font-style: normal;
+  font-weight: var(--font-weight-600);
+  line-height: var(--leading-12);
+  font-family: var(--font-inter);
+  box-shadow: var(--shadow-neutral-shadow-round-1xl);
+  color: var(--neutral-100);
+  background-color: var(--neutral-30);
+}
+
+.tippy-box[data-theme~='dark-medium'][data-placement^='top'] > .tippy-arrow {
+  bottom: 0;
+}
+
+.tippy-box[data-theme~='dark-medium'][data-placement^='top']
+  > .tippy-arrow::before {
+  bottom: -6px;
+  left: 2px;
+  border-width: 6px 6px 0;
+  border-top-color: var(--neutral-30);
+}
+
+.tippy-box[data-theme~='dark-medium'][data-placement^='bottom'] > .tippy-arrow {
+  top: 0;
+}
+
+.tippy-box[data-theme~='dark-medium'][data-placement^='bottom']
+  > .tippy-arrow::before {
+  top: -6px;
+  left: 2px;
+  border-width: 0 6px 6px;
+  border-bottom-color: var(--neutral-30);
+}
+
+.tippy-box[data-theme~='dark-medium'][data-placement^='left'] > .tippy-arrow {
+  right: 0;
+}
+
+.tippy-box[data-theme~='dark-medium'][data-placement^='left']
+  > .tippy-arrow::before {
+  border-width: 6px 0 6px 6px;
+  right: -6px;
+  top: 2px;
+  border-left-color: var(--neutral-30);
+}
+
+.tippy-box[data-theme~='dark-medium'][data-placement^='right'] > .tippy-arrow {
+  left: 0;
+}
+
+.tippy-box[data-theme~='dark-medium'][data-placement^='right']
+  > .tippy-arrow::before {
+  left: -6px;
+  top: 2px;
+  border-width: 6px 6px 6px 0;
+  border-right-color: var(--neutral-30);
+}
+
+.tippy-box[data-theme~='dark-large'] {
+  padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-3);
+  border-radius: var(--radius-8);
+  font-size: var(--text-12);
+  font-style: normal;
+  font-weight: var(--font-weight-400);
+  line-height: var(--leading-20);
+  font-family: var(--font-inter);
+  box-shadow: var(--shadow-neutral-shadow-round-1xl);
+  color: var(--neutral-100);
+  background-color: var(--neutral-30);
+}
+
+.tippy-box[data-theme~='dark-large'][data-placement^='top'] > .tippy-arrow {
+  bottom: 0;
+}
+
+.tippy-box[data-theme~='dark-large'][data-placement^='top']
+  > .tippy-arrow::before {
+  bottom: -8px;
+  left: 0;
+  border-width: 8px 8px 0;
+  border-top-color: var(--neutral-30);
+}
+
+.tippy-box[data-theme~='dark-large'][data-placement^='bottom'] > .tippy-arrow {
+  top: 0;
+}
+
+.tippy-box[data-theme~='dark-large'][data-placement^='bottom']
+  > .tippy-arrow::before {
+  top: -8px;
+  left: 0;
+  border-width: 0 8px 8px;
+  border-bottom-color: var(--neutral-30);
+}
+
+.tippy-box[data-theme~='dark-large'][data-placement^='left'] > .tippy-arrow {
+  right: 0;
+}
+
+.tippy-box[data-theme~='dark-large'][data-placement^='left']
+  > .tippy-arrow::before {
+  border-width: 8px 0 8px 8px;
+  right: -8px;
+  border-left-color: var(--neutral-30);
+}
+
+.tippy-box[data-theme~='dark-large'][data-placement^='right'] > .tippy-arrow {
+  left: 0;
+}
+
+.tippy-box[data-theme~='dark-large'][data-placement^='right']
+  > .tippy-arrow::before {
+  left: -8px;
+  border-width: 8px 8px 8px 0;
+  border-right-color: var(--neutral-30);
+}
+
+.tippy-box[data-theme~='light-medium'] {
+  padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-2);
+  border-radius: var(--radius-4);
+  font-size: var(--text-10);
+  font-style: normal;
+  font-weight: var(--font-weight-600);
+  line-height: var(--leading-12);
+  font-family: var(--font-inter);
+  box-shadow: var(--shadow-neutral-shadow-round-1xl);
+  color: var(--neutral-20);
+  background-color: var(--neutral-97);
+}
+
+.tippy-box[data-theme~='light-medium'][data-placement^='top'] > .tippy-arrow {
+  bottom: 0;
+}
+
+.tippy-box[data-theme~='light-medium'][data-placement^='top']
+  > .tippy-arrow::before {
+  bottom: -6px;
+  left: 2px;
+  border-width: 6px 6px 0;
+  border-top-color: var(--neutral-97);
+}
+
+.tippy-box[data-theme~='light-medium'][data-placement^='bottom']
+  > .tippy-arrow {
+  top: 0;
+}
+
+.tippy-box[data-theme~='light-medium'][data-placement^='bottom']
+  > .tippy-arrow::before {
+  top: -6px;
+  left: 2px;
+  border-width: 0 6px 6px;
+  border-bottom-color: var(--neutral-97);
+}
+
+.tippy-box[data-theme~='light-medium'][data-placement^='left'] > .tippy-arrow {
+  right: 0;
+}
+
+.tippy-box[data-theme~='light-medium'][data-placement^='left']
+  > .tippy-arrow::before {
+  border-width: 6px 0 6px 6px;
+  right: -6px;
+  top: 2px;
+  border-left-color: var(--neutral-97);
+}
+
+.tippy-box[data-theme~='light-medium'][data-placement^='right'] > .tippy-arrow {
+  left: 0;
+}
+
+.tippy-box[data-theme~='light-medium'][data-placement^='right']
+  > .tippy-arrow::before {
+  left: -6px;
+  top: 2px;
+  border-width: 6px 6px 6px 0;
+  border-right-color: var(--neutral-97);
+}
+
+.tippy-box[data-theme~='light-large'] {
+  padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-3);
+  border-radius: var(--radius-8);
+  font-size: var(--text-12);
+  font-style: normal;
+  font-weight: var(--font-weight-400);
+  line-height: var(--leading-20);
+  font-family: var(--font-inter);
+  box-shadow: var(--shadow-neutral-shadow-round-1xl);
+  color: var(--neutral-20);
+  background-color: var(--neutral-97);
+}
+
+.tippy-box[data-theme~='light-large'][data-placement^='top'] > .tippy-arrow {
+  bottom: 0;
+}
+
+.tippy-box[data-theme~='light-large'][data-placement^='top']
+  > .tippy-arrow::before {
+  bottom: -8px;
+  left: 0;
+  border-width: 8px 8px 0;
+  border-top-color: var(--neutral-97);
+}
+
+.tippy-box[data-theme~='light-large'][data-placement^='bottom'] > .tippy-arrow {
+  top: 0;
+}
+
+.tippy-box[data-theme~='light-large'][data-placement^='bottom']
+  > .tippy-arrow::before {
+  top: -8px;
+  left: 0;
+  border-width: 0 8px 8px;
+  border-bottom-color: var(--neutral-97);
+}
+
+.tippy-box[data-theme~='light-large'][data-placement^='left'] > .tippy-arrow {
+  right: 0;
+}
+
+.tippy-box[data-theme~='light-large'][data-placement^='left']
+  > .tippy-arrow::before {
+  border-width: 8px 0 8px 8px;
+  right: -8px;
+  border-left-color: var(--neutral-97);
+}
+
+.tippy-box[data-theme~='light-large'][data-placement^='right'] > .tippy-arrow {
+  left: 0;
+}
+
+.tippy-box[data-theme~='light-large'][data-placement^='right']
+  > .tippy-arrow::before {
+  left: -8px;
+  border-width: 8px 8px 8px 0;
+  border-right-color: var(--neutral-97);
+}
+
+.tippy-box[data-theme~='white-medium'] {
+  padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-2);
+  border-radius: var(--radius-4);
+  font-size: var(--text-10);
+  font-style: normal;
+  font-weight: var(--font-weight-600);
+  line-height: var(--leading-12);
+  font-family: var(--font-inter);
+  box-shadow: var(--shadow-neutral-shadow-round-1xl);
+  color: var(--neutral-20);
+  background-color: var(--neutral-100);
+}
+
+.tippy-box[data-theme~='white-medium'][data-placement^='top'] > .tippy-arrow {
+  bottom: 0;
+}
+
+.tippy-box[data-theme~='white-medium'][data-placement^='top']
+  > .tippy-arrow::before {
+  bottom: -6px;
+  left: 2px;
+  border-width: 6px 6px 0;
+  border-top-color: var(--neutral-100);
+}
+
+.tippy-box[data-theme~='white-medium'][data-placement^='bottom']
+  > .tippy-arrow {
+  top: 0;
+}
+
+.tippy-box[data-theme~='white-medium'][data-placement^='bottom']
+  > .tippy-arrow::before {
+  top: -6px;
+  left: 2px;
+  border-width: 0 6px 6px;
+  border-bottom-color: var(--neutral-100);
+}
+
+.tippy-box[data-theme~='white-medium'][data-placement^='left'] > .tippy-arrow {
+  right: 0;
+}
+
+.tippy-box[data-theme~='white-medium'][data-placement^='left']
+  > .tippy-arrow::before {
+  border-width: 6px 0 6px 6px;
+  right: -6px;
+  top: 2px;
+  border-left-color: var(--neutral-100);
+}
+
+.tippy-box[data-theme~='white-medium'][data-placement^='right'] > .tippy-arrow {
+  left: 0;
+}
+
+.tippy-box[data-theme~='white-medium'][data-placement^='right']
+  > .tippy-arrow::before {
+  left: -6px;
+  top: 2px;
+  border-width: 6px 6px 6px 0;
+  border-right-color: var(--neutral-100);
+}
+
+.tippy-box[data-theme~='white-large'] {
+  padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-3);
+  border-radius: var(--radius-8);
+  font-size: var(--text-12);
+  font-style: normal;
+  font-weight: var(--font-weight-400);
+  line-height: var(--leading-20);
+  font-family: var(--font-inter);
+  box-shadow: var(--shadow-neutral-shadow-round-1xl);
+  color: var(--neutral-20);
+  background-color: var(--neutral-100);
+}
+
+.tippy-box[data-theme~='white-large'][data-placement^='top'] > .tippy-arrow {
+  bottom: 0;
+}
+
+.tippy-box[data-theme~='white-large'][data-placement^='top']
+  > .tippy-arrow::before {
+  bottom: -8px;
+  left: 0;
+  border-width: 8px 8px 0;
+  border-top-color: var(--neutral-100);
+}
+
+.tippy-box[data-theme~='white-large'][data-placement^='bottom'] > .tippy-arrow {
+  top: 0;
+}
+
+.tippy-box[data-theme~='white-large'][data-placement^='bottom']
+  > .tippy-arrow::before {
+  top: -8px;
+  left: 0;
+  border-width: 0 8px 8px;
+  border-bottom-color: var(--neutral-100);
+}
+
+.tippy-box[data-theme~='white-large'][data-placement^='left'] > .tippy-arrow {
+  right: 0;
+}
+
+.tippy-box[data-theme~='white-large'][data-placement^='left']
+  > .tippy-arrow::before {
+  border-width: 8px 0 8px 8px;
+  right: -8px;
+  border-left-color: var(--neutral-100);
+}
+
+.tippy-box[data-theme~='white-large'][data-placement^='right'] > .tippy-arrow {
+  left: 0;
+}
+
+.tippy-box[data-theme~='white-large'][data-placement^='right']
+  > .tippy-arrow::before {
+  left: -8px;
+  border-width: 8px 8px 8px 0;
+  border-right-color: var(--neutral-100);
+}
+
+.tippy-box[data-theme~='success-medium'] {
+  padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-2);
+  border-radius: var(--radius-4);
+  font-size: var(--text-10);
+  font-style: normal;
+  font-weight: var(--font-weight-600);
+  line-height: var(--leading-12);
+  font-family: var(--font-inter);
+  box-shadow: var(--shadow-neutral-shadow-round-1xl);
+  color: var(--neutral-100);
+  background-color: var(--green-54);
+}
+
+.tippy-box[data-theme~='success-medium'][data-placement^='top'] > .tippy-arrow {
+  bottom: 0;
+}
+
+.tippy-box[data-theme~='success-medium'][data-placement^='top']
+  > .tippy-arrow::before {
+  bottom: -6px;
+  left: 2px;
+  border-width: 6px 6px 0;
+  border-top-color: var(--green-54);
+}
+
+.tippy-box[data-theme~='success-medium'][data-placement^='bottom']
+  > .tippy-arrow {
+  top: 0;
+}
+
+.tippy-box[data-theme~='success-medium'][data-placement^='bottom']
+  > .tippy-arrow::before {
+  top: -6px;
+  left: 2px;
+  border-width: 0 6px 6px;
+  border-bottom-color: var(--green-54);
+}
+
+.tippy-box[data-theme~='success-medium'][data-placement^='left']
+  > .tippy-arrow {
+  right: 0;
+}
+
+.tippy-box[data-theme~='success-medium'][data-placement^='left']
+  > .tippy-arrow::before {
+  border-width: 6px 0 6px 6px;
+  right: -6px;
+  top: 2px;
+  border-left-color: var(--green-54);
+}
+
+.tippy-box[data-theme~='success-medium'][data-placement^='right']
+  > .tippy-arrow {
+  left: 0;
+}
+
+.tippy-box[data-theme~='success-medium'][data-placement^='right']
+  > .tippy-arrow::before {
+  left: -6px;
+  top: 2px;
+  border-width: 6px 6px 6px 0;
+  border-right-color: var(--green-54);
+}
+
+.tippy-box[data-theme~='success-large'] {
+  padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-3);
+  border-radius: var(--radius-8);
+  font-size: var(--text-12);
+  font-style: normal;
+  font-weight: var(--font-weight-400);
+  line-height: var(--leading-20);
+  font-family: var(--font-inter);
+  box-shadow: var(--shadow-neutral-shadow-round-1xl);
+  color: var(--neutral-100);
+  background-color: var(--green-54);
+}
+
+.tippy-box[data-theme~='success-large'][data-placement^='top'] > .tippy-arrow {
+  bottom: 0;
+}
+
+.tippy-box[data-theme~='success-large'][data-placement^='top']
+  > .tippy-arrow::before {
+  bottom: -8px;
+  left: 0;
+  border-width: 8px 8px 0;
+  border-top-color: var(--green-54);
+}
+
+.tippy-box[data-theme~='success-large'][data-placement^='bottom']
+  > .tippy-arrow {
+  top: 0;
+}
+
+.tippy-box[data-theme~='success-large'][data-placement^='bottom']
+  > .tippy-arrow::before {
+  top: -8px;
+  left: 0;
+  border-width: 0 8px 8px;
+  border-bottom-color: var(--green-54);
+}
+
+.tippy-box[data-theme~='success-large'][data-placement^='left'] > .tippy-arrow {
+  right: 0;
+}
+
+.tippy-box[data-theme~='success-large'][data-placement^='left']
+  > .tippy-arrow::before {
+  border-width: 8px 0 8px 8px;
+  right: -8px;
+  border-left-color: var(--green-54);
+}
+
+.tippy-box[data-theme~='success-large'][data-placement^='right']
+  > .tippy-arrow {
+  left: 0;
+}
+
+.tippy-box[data-theme~='success-large'][data-placement^='right']
+  > .tippy-arrow::before {
+  left: -8px;
+  border-width: 8px 8px 8px 0;
+  border-right-color: var(--green-54);
+}
+
+.tippy-box[data-theme~='danger-medium'] {
+  padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-2);
+  border-radius: var(--radius-4);
+  font-size: var(--text-10);
+  font-style: normal;
+  font-weight: var(--font-weight-600);
+  line-height: var(--leading-12);
+  font-family: var(--font-inter);
+  box-shadow: var(--shadow-neutral-shadow-round-1xl);
+  color: var(--neutral-100);
+  background-color: var(--red-65);
+}
+
+.tippy-box[data-theme~='danger-medium'][data-placement^='top'] > .tippy-arrow {
+  bottom: 0;
+}
+
+.tippy-box[data-theme~='danger-medium'][data-placement^='top']
+  > .tippy-arrow::before {
+  bottom: -6px;
+  left: 2px;
+  border-width: 6px 6px 0;
+  border-top-color: var(--red-65);
+}
+
+.tippy-box[data-theme~='danger-medium'][data-placement^='bottom']
+  > .tippy-arrow {
+  top: 0;
+}
+
+.tippy-box[data-theme~='danger-medium'][data-placement^='bottom']
+  > .tippy-arrow::before {
+  top: -6px;
+  left: 2px;
+  border-width: 0 6px 6px;
+  border-bottom-color: var(--red-65);
+}
+
+.tippy-box[data-theme~='danger-medium'][data-placement^='left'] > .tippy-arrow {
+  right: 0;
+}
+
+.tippy-box[data-theme~='danger-medium'][data-placement^='left']
+  > .tippy-arrow::before {
+  border-width: 6px 0 6px 6px;
+  right: -6px;
+  top: 2px;
+  border-left-color: var(--red-65);
+}
+
+.tippy-box[data-theme~='danger-medium'][data-placement^='right']
+  > .tippy-arrow {
+  left: 0;
+}
+
+.tippy-box[data-theme~='danger-medium'][data-placement^='right']
+  > .tippy-arrow::before {
+  left: -6px;
+  top: 2px;
+  border-width: 6px 6px 6px 0;
+  border-right-color: var(--red-65);
+}
+
+.tippy-box[data-theme~='danger-large'] {
+  padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-3);
+  border-radius: var(--radius-8);
+  font-size: var(--text-12);
+  font-style: normal;
+  font-weight: var(--font-weight-400);
+  line-height: var(--leading-20);
+  font-family: var(--font-inter);
+  box-shadow: var(--shadow-neutral-shadow-round-1xl);
+  color: var(--neutral-100);
+  background-color: var(--red-65);
+}
+
+.tippy-box[data-theme~='danger-large'][data-placement^='top'] > .tippy-arrow {
+  bottom: 0;
+}
+
+.tippy-box[data-theme~='danger-large'][data-placement^='top']
+  > .tippy-arrow::before {
+  bottom: -8px;
+  left: 0;
+  border-width: 8px 8px 0;
+  border-top-color: var(--red-65);
+}
+
+.tippy-box[data-theme~='danger-large'][data-placement^='bottom']
+  > .tippy-arrow {
+  top: 0;
+}
+
+.tippy-box[data-theme~='danger-large'][data-placement^='bottom']
+  > .tippy-arrow::before {
+  top: -8px;
+  left: 0;
+  border-width: 0 8px 8px;
+  border-bottom-color: var(--red-65);
+}
+
+.tippy-box[data-theme~='danger-large'][data-placement^='left'] > .tippy-arrow {
+  right: 0;
+}
+
+.tippy-box[data-theme~='danger-large'][data-placement^='left']
+  > .tippy-arrow::before {
+  border-width: 8px 0 8px 8px;
+  right: -8px;
+  border-left-color: var(--red-65);
+}
+
+.tippy-box[data-theme~='danger-large'][data-placement^='right'] > .tippy-arrow {
+  left: 0;
+}
+
+.tippy-box[data-theme~='danger-large'][data-placement^='right']
+  > .tippy-arrow::before {
+  left: -8px;
+  border-width: 8px 8px 8px 0;
+  border-right-color: var(--red-65);
+}
+
+
+/* Import Tailwind CSS v4 - this enables all utilities with the custom theme above */
+@import 'tailwindcss';
+
+/* Import Tailwind Typography plugin for prose classes */
+@plugin '@tailwindcss/typography';
+
+/* Prose customizations for Tailwind v4 Typography - inlined */
+/**
+ * @file Typography overrides for @tailwindcss/typography in Tailwind v4
+ *
+ * In Tailwind v4, typography plugin customization is done via @utility directives
+ * instead of the theme.extend.typography config object from v3.
+ *
+ * These overrides customize the prose classes to match the project's design system.
+ */
+
+/* Base prose styles - applies to all prose sizes */
+@utility prose {
+  max-width: none;
+  line-height: 1.6;
+
+  p {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+    line-height: 1.5;
+  }
+
+  hr {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+
+  h1 {
+    margin-top: 0.75em;
+    margin-bottom: 0.5em;
+    line-height: 1.2;
+  }
+
+  h2 {
+    margin-top: 0.65em;
+    margin-bottom: 0.45em;
+    line-height: 1.25;
+  }
+
+  h3 {
+    margin-top: 0.6em;
+    margin-bottom: 0.4em;
+    line-height: 1.3;
+  }
+
+  h4 {
+    margin-top: 0.5em;
+    margin-bottom: 0.35em;
+    line-height: 1.35;
+  }
+
+  h5 {
+    margin-top: 0.45em;
+    margin-bottom: 0.3em;
+    line-height: 1.4;
+  }
+
+  h6 {
+    margin-top: 0.4em;
+    margin-bottom: 0.25em;
+    line-height: 1.45;
+  }
+
+  ul {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+    padding-left: 1.25em;
+  }
+
+  ol {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+    padding-left: 1.25em;
+  }
+
+  ul ul,
+  ul ol,
+  ol ul,
+  ol ol {
+    margin-top: 0.25em;
+    margin-bottom: 0.25em;
+  }
+
+  li {
+    margin-top: 0.25em;
+    margin-bottom: 0.25em;
+  }
+
+  blockquote {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+    padding-left: 1em;
+    border-left-width: 0.25rem;
+    font-style: italic;
+    color: inherit;
+  }
+
+  a {
+    color: var(--tw-prose-links);
+    text-decoration: underline;
+    font-weight: 500;
+
+    &:hover {
+      color: var(--tw-prose-links-hover, var(--tw-prose-links));
+      text-decoration: none;
+    }
+  }
+
+  pre {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+    line-height: 1.45;
+    box-sizing: border-box;
+    max-width: 100%;
+    overflow-x: auto;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+  }
+}
+
+/* prose-sm variant */
+@utility prose-sm {
+  max-width: none;
+  line-height: 1.6;
+}
+
+/* prose-base variant */
+@utility prose-base {
+  max-width: none;
+  line-height: 1.6;
+}
+
+/* prose-lg variant */
+@utility prose-lg {
+  max-width: none;
+  line-height: 1.6;
+}
+
+/* prose-xl variant */
+@utility prose-xl {
+  max-width: none;
+  line-height: 1.6;
+}
+
+/* prose-inherit - inherits colors from parent */
+@utility prose-inherit {
+  --tw-prose-body: inherit;
+  --tw-prose-headings: inherit;
+  --tw-prose-lead: inherit;
+  --tw-prose-links: inherit;
+  --tw-prose-bold: inherit;
+  --tw-prose-counters: inherit;
+  --tw-prose-bullets: inherit;
+}
+
+
+/* Dark mode configuration - use class-based dark mode */
+@variant dark (:where(.dark, .dark *) &);
+