:root {
  --heading-h1-font-family: "Roboto", Helvetica;
  --heading-h1-font-weight: 700;
  --heading-h1-font-size: 56px;
  --heading-h1-letter-spacing: 0px;
  --heading-h1-line-height: 120.00000476837158%;
  --heading-h1-font-style: normal;
  --heading-h2-font-family: "Roboto", Helvetica;
  --heading-h2-font-weight: 700;
  --heading-h2-font-size: 48px;
  --heading-h2-letter-spacing: 0px;
  --heading-h2-line-height: 120.00000476837158%;
  --heading-h2-font-style: normal;
  --heading-h3-font-family: "Roboto", Helvetica;
  --heading-h3-font-weight: 700;
  --heading-h3-font-size: 40px;
  --heading-h3-letter-spacing: 0px;
  --heading-h3-line-height: 120.00000476837158%;
  --heading-h3-font-style: normal;
  --heading-h4-font-family: "Roboto", Helvetica;
  --heading-h4-font-weight: 700;
  --heading-h4-font-size: 32px;
  --heading-h4-letter-spacing: 0px;
  --heading-h4-line-height: 129.99999523162842%;
  --heading-h4-font-style: normal;
  --heading-h5-font-family: "Roboto", Helvetica;
  --heading-h5-font-weight: 700;
  --heading-h5-font-size: 24px;
  --heading-h5-letter-spacing: 0px;
  --heading-h5-line-height: 139.9999976158142%;
  --heading-h5-font-style: normal;
  --heading-h6-font-family: "Roboto", Helvetica;
  --heading-h6-font-weight: 700;
  --heading-h6-font-size: 20px;
  --heading-h6-letter-spacing: 0px;
  --heading-h6-line-height: 139.9999976158142%;
  --heading-h6-font-style: normal;
  --heading-tagline-font-family: "Roboto", Helvetica;
  --heading-tagline-font-weight: 600;
  --heading-tagline-font-size: 16px;
  --heading-tagline-letter-spacing: 0px;
  --heading-tagline-line-height: 150%;
  --heading-tagline-font-style: normal;
  --text-large-light-font-family: "Roboto", Helvetica;
  --text-large-light-font-weight: 300;
  --text-large-light-font-size: 20px;
  --text-large-light-letter-spacing: 0px;
  --text-large-light-line-height: 150%;
  --text-large-light-font-style: normal;
  --text-large-normal-font-family: "Roboto", Helvetica;
  --text-large-normal-font-weight: 400;
  --text-large-normal-font-size: 20px;
  --text-large-normal-letter-spacing: 0px;
  --text-large-normal-line-height: 150%;
  --text-large-normal-font-style: normal;
  --text-large-medium-font-family: "Roboto", Helvetica;
  --text-large-medium-font-weight: 500;
  --text-large-medium-font-size: 20px;
  --text-large-medium-letter-spacing: 0px;
  --text-large-medium-line-height: 150%;
  --text-large-medium-font-style: normal;
  --text-large-semi-bold-font-family: "Roboto", Helvetica;
  --text-large-semi-bold-font-weight: 600;
  --text-large-semi-bold-font-size: 20px;
  --text-large-semi-bold-letter-spacing: 0px;
  --text-large-semi-bold-line-height: 150%;
  --text-large-semi-bold-font-style: normal;
  --text-large-bold-font-family: "Roboto", Helvetica;
  --text-large-bold-font-weight: 700;
  --text-large-bold-font-size: 20px;
  --text-large-bold-letter-spacing: 0px;
  --text-large-bold-line-height: 150%;
  --text-large-bold-font-style: normal;
  --text-large-extra-bold-font-family: "Roboto", Helvetica;
  --text-large-extra-bold-font-weight: 800;
  --text-large-extra-bold-font-size: 20px;
  --text-large-extra-bold-letter-spacing: 0px;
  --text-large-extra-bold-line-height: 150%;
  --text-large-extra-bold-font-style: normal;
  --text-large-link-font-family: "Roboto", Helvetica;
  --text-large-link-font-weight: 400;
  --text-large-link-font-size: 20px;
  --text-large-link-letter-spacing: 0px;
  --text-large-link-line-height: 150%;
  --text-large-link-font-style: normal;
  --text-medium-light-font-family: "Roboto", Helvetica;
  --text-medium-light-font-weight: 300;
  --text-medium-light-font-size: 18px;
  --text-medium-light-letter-spacing: 0px;
  --text-medium-light-line-height: 150%;
  --text-medium-light-font-style: normal;
  --text-medium-normal-font-family: "Roboto", Helvetica;
  --text-medium-normal-font-weight: 400;
  --text-medium-normal-font-size: 18px;
  --text-medium-normal-letter-spacing: 0px;
  --text-medium-normal-line-height: 150%;
  --text-medium-normal-font-style: normal;
  --text-medium-medium-font-family: "Roboto", Helvetica;
  --text-medium-medium-font-weight: 500;
  --text-medium-medium-font-size: 18px;
  --text-medium-medium-letter-spacing: 0px;
  --text-medium-medium-line-height: 150%;
  --text-medium-medium-font-style: normal;
  --text-medium-semi-bold-font-family: "Roboto", Helvetica;
  --text-medium-semi-bold-font-weight: 600;
  --text-medium-semi-bold-font-size: 18px;
  --text-medium-semi-bold-letter-spacing: 0px;
  --text-medium-semi-bold-line-height: 150%;
  --text-medium-semi-bold-font-style: normal;
  --text-medium-bold-font-family: "Roboto", Helvetica;
  --text-medium-bold-font-weight: 700;
  --text-medium-bold-font-size: 18px;
  --text-medium-bold-letter-spacing: 0px;
  --text-medium-bold-line-height: 150%;
  --text-medium-bold-font-style: normal;
  --text-medium-extra-bold-font-family: "Roboto", Helvetica;
  --text-medium-extra-bold-font-weight: 700;
  --text-medium-extra-bold-font-size: 18px;
  --text-medium-extra-bold-letter-spacing: 0px;
  --text-medium-extra-bold-line-height: 150%;
  --text-medium-extra-bold-font-style: normal;
  --text-medium-link-font-family: "Roboto", Helvetica;
  --text-medium-link-font-weight: 400;
  --text-medium-link-font-size: 18px;
  --text-medium-link-letter-spacing: 0px;
  --text-medium-link-line-height: 150%;
  --text-medium-link-font-style: normal;
  --text-regular-light-font-family: "Roboto", Helvetica;
  --text-regular-light-font-weight: 300;
  --text-regular-light-font-size: 16px;
  --text-regular-light-letter-spacing: 0px;
  --text-regular-light-line-height: 150%;
  --text-regular-light-font-style: normal;
  --text-regular-normal-font-family: "Roboto", Helvetica;
  --text-regular-normal-font-weight: 400;
  --text-regular-normal-font-size: 16px;
  --text-regular-normal-letter-spacing: 0px;
  --text-regular-normal-line-height: 150%;
  --text-regular-normal-font-style: normal;
  --text-regular-medium-font-family: "Roboto", Helvetica;
  --text-regular-medium-font-weight: 500;
  --text-regular-medium-font-size: 16px;
  --text-regular-medium-letter-spacing: 0px;
  --text-regular-medium-line-height: 150%;
  --text-regular-medium-font-style: normal;
  --text-regular-semi-bold-font-family: "Roboto", Helvetica;
  --text-regular-semi-bold-font-weight: 600;
  --text-regular-semi-bold-font-size: 16px;
  --text-regular-semi-bold-letter-spacing: 0px;
  --text-regular-semi-bold-line-height: 150%;
  --text-regular-semi-bold-font-style: normal;
  --text-regular-bold-font-family: "Roboto", Helvetica;
  --text-regular-bold-font-weight: 700;
  --text-regular-bold-font-size: 16px;
  --text-regular-bold-letter-spacing: 0px;
  --text-regular-bold-line-height: 150%;
  --text-regular-bold-font-style: normal;
  --text-regular-extra-bold-font-family: "Roboto", Helvetica;
  --text-regular-extra-bold-font-weight: 800;
  --text-regular-extra-bold-font-size: 16px;
  --text-regular-extra-bold-letter-spacing: 0px;
  --text-regular-extra-bold-line-height: 150%;
  --text-regular-extra-bold-font-style: normal;
  --text-regular-link-font-family: "Roboto", Helvetica;
  --text-regular-link-font-weight: 400;
  --text-regular-link-font-size: 16px;
  --text-regular-link-letter-spacing: 0px;
  --text-regular-link-line-height: 150%;
  --text-regular-link-font-style: normal;
  --text-small-light-font-family: "Roboto", Helvetica;
  --text-small-light-font-weight: 300;
  --text-small-light-font-size: 14px;
  --text-small-light-letter-spacing: 0px;
  --text-small-light-line-height: 150%;
  --text-small-light-font-style: normal;
  --text-small-normal-font-family: "Roboto", Helvetica;
  --text-small-normal-font-weight: 400;
  --text-small-normal-font-size: 14px;
  --text-small-normal-letter-spacing: 0px;
  --text-small-normal-line-height: 150%;
  --text-small-normal-font-style: normal;
  --text-small-medium-font-family: "Roboto", Helvetica;
  --text-small-medium-font-weight: 500;
  --text-small-medium-font-size: 14px;
  --text-small-medium-letter-spacing: 0px;
  --text-small-medium-line-height: 150%;
  --text-small-medium-font-style: normal;
  --text-small-semi-bold-font-family: "Roboto", Helvetica;
  --text-small-semi-bold-font-weight: 600;
  --text-small-semi-bold-font-size: 14px;
  --text-small-semi-bold-letter-spacing: 0px;
  --text-small-semi-bold-line-height: 150%;
  --text-small-semi-bold-font-style: normal;
  --text-small-bold-font-family: "Roboto", Helvetica;
  --text-small-bold-font-weight: 700;
  --text-small-bold-font-size: 14px;
  --text-small-bold-letter-spacing: 0px;
  --text-small-bold-line-height: 150%;
  --text-small-bold-font-style: normal;
  --text-small-extra-bold-font-family: "Roboto", Helvetica;
  --text-small-extra-bold-font-weight: 800;
  --text-small-extra-bold-font-size: 14px;
  --text-small-extra-bold-letter-spacing: 0px;
  --text-small-extra-bold-line-height: 150%;
  --text-small-extra-bold-font-style: normal;
  --text-small-link-font-family: "Roboto", Helvetica;
  --text-small-link-font-weight: 400;
  --text-small-link-font-size: 14px;
  --text-small-link-letter-spacing: 0px;
  --text-small-link-line-height: 150%;
  --text-small-link-font-style: normal;
  --text-tiny-light-font-family: "Roboto", Helvetica;
  --text-tiny-light-font-weight: 300;
  --text-tiny-light-font-size: 12px;
  --text-tiny-light-letter-spacing: 0px;
  --text-tiny-light-line-height: 150%;
  --text-tiny-light-font-style: normal;
  --text-tiny-normal-font-family: "Roboto", Helvetica;
  --text-tiny-normal-font-weight: 400;
  --text-tiny-normal-font-size: 12px;
  --text-tiny-normal-letter-spacing: 0px;
  --text-tiny-normal-line-height: 150%;
  --text-tiny-normal-font-style: normal;
  --text-tiny-medium-font-family: "Roboto", Helvetica;
  --text-tiny-medium-font-weight: 500;
  --text-tiny-medium-font-size: 12px;
  --text-tiny-medium-letter-spacing: 0px;
  --text-tiny-medium-line-height: 150%;
  --text-tiny-medium-font-style: normal;
  --text-tiny-semi-bold-font-family: "Roboto", Helvetica;
  --text-tiny-semi-bold-font-weight: 600;
  --text-tiny-semi-bold-font-size: 12px;
  --text-tiny-semi-bold-letter-spacing: 0px;
  --text-tiny-semi-bold-line-height: 150%;
  --text-tiny-semi-bold-font-style: normal;
  --text-tiny-bold-font-family: "Roboto", Helvetica;
  --text-tiny-bold-font-weight: 700;
  --text-tiny-bold-font-size: 12px;
  --text-tiny-bold-letter-spacing: 0px;
  --text-tiny-bold-line-height: 150%;
  --text-tiny-bold-font-style: normal;
  --text-tiny-extra-bold-font-family: "Roboto", Helvetica;
  --text-tiny-extra-bold-font-weight: 800;
  --text-tiny-extra-bold-font-size: 12px;
  --text-tiny-extra-bold-letter-spacing: 0px;
  --text-tiny-extra-bold-line-height: 150%;
  --text-tiny-extra-bold-font-style: normal;
  --text-tiny-link-font-family: "Roboto", Helvetica;
  --text-tiny-link-font-weight: 400;
  --text-tiny-link-font-size: 12px;
  --text-tiny-link-letter-spacing: 0px;
  --text-tiny-link-line-height: 150%;
  --text-tiny-link-font-style: normal;
  --xxsmall: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  --xsmall: 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 3px 0px
    rgba(0, 0, 0, 0.1);
  --small: 0px 2px 4px -2px rgba(0, 0, 0, 0.06), 0px 4px 8px -2px
    rgba(0, 0, 0, 0.1);
  --medium: 0px 4px 6px -2px rgba(0, 0, 0, 0.03), 0px 12px 16px -4px
    rgba(0, 0, 0, 0.08);
  --large: 0px 8px 8px -4px rgba(0, 0, 0, 0.03), 0px 20px 24px -4px
    rgba(0, 0, 0, 0.08);
  --xlarge: 0px 24px 48px -12px rgba(0, 0, 0, 0.18);
  --xxlarge: 0px 32px 64px -12px rgba(0, 0, 0, 0.14);
  --color-schemes-color-scheme-1-text: var(--primitives-color-neutral-darkest);
  --color-schemes-color-scheme-1-foreground: var(--primitives-color-white);
  --color-schemes-color-scheme-1-background: var(--primitives-color-white);
  --color-schemes-color-scheme-1-border: var(--primitives-color-neutral-darkest);
  --color-schemes-color-scheme-1-accent: var(--primitives-color-neutral-darkest);
  --primitives-color-white: rgba(255, 255, 255, 1);
  --primitives-color-neutral-lightest: rgba(238, 238, 238, 1);
  --primitives-color-neutral-lighter: rgba(204, 204, 204, 1);
  --primitives-color-neutral-light: rgba(170, 170, 170, 1);
  --primitives-color-neutral: rgba(102, 102, 102, 1);
  --primitives-color-neutral-dark: rgba(68, 68, 68, 1);
  --primitives-color-neutral-darker: rgba(34, 34, 34, 1);
  --primitives-color-neutral-darkest: rgba(0, 0, 0, 1);
  --primitives-opacity-transparent: rgba(255, 255, 255, 0);
  --primitives-opacity-white-5: rgba(255, 255, 255, 0.05);
  --primitives-opacity-white-10: rgba(255, 255, 255, 0.1);
  --primitives-opacity-white-15: rgba(255, 255, 255, 0.15);
  --primitives-opacity-white-20: rgba(255, 255, 255, 0.2);
  --primitives-opacity-white-30: rgba(255, 255, 255, 0.3);
  --primitives-opacity-white-40: rgba(255, 255, 255, 0.4);
  --primitives-opacity-white-50: rgba(255, 255, 255, 0.5);
  --primitives-opacity-white-60: rgba(255, 255, 255, 0.6);
  --primitives-opacity-neutral-darkest-5: rgba(0, 0, 0, 0.05);
  --primitives-opacity-neutral-darkest-10: rgba(0, 0, 0, 0.1);
  --primitives-opacity-neutral-darkest-15: rgba(0, 0, 0, 0.15);
  --primitives-opacity-neutral-darkest-20: rgba(0, 0, 0, 0.2);
  --primitives-opacity-neutral-darkest-30: rgba(0, 0, 0, 0.3);
  --primitives-opacity-neutral-darkest-40: rgba(0, 0, 0, 0.4);
  --primitives-opacity-neutral-darkest-50: rgba(0, 0, 0, 0.5);
  --primitives-opacity-neutral-darkest-60: rgba(0, 0, 0, 0.6);
  --UI-styles-radius-small: 0px;
  --UI-styles-radius-medium: 0px;
  --UI-styles-radius-large: 0px;
  --UI-styles-stroke-border-width: 1px;
  --UI-styles-stroke-divider-width: 1px;
  --typography-text-sizes-heading-1: 56px;
  --typography-text-sizes-heading-2: 48px;
  --typography-text-sizes-heading-3: 40px;
  --typography-text-sizes-heading-4: 32px;
  --typography-text-sizes-heading-5: 24px;
  --typography-text-sizes-heading-6: 20px;
  --typography-text-sizes-text-large: 20px;
  --typography-text-sizes-text-medium: 18px;
  --typography-text-sizes-text-regular: 16px;
  --typography-text-sizes-text-small: 14px;
  --typography-text-sizes-text-tiny: 12px;
  --spacing-sizing-container-container-large: 1280px;
  --spacing-sizing-container-container-medium: 1024px;
  --spacing-sizing-container-container-small: 768px;
  --spacing-sizing-max-width-max-width-xxlarge: 1280px;
  --spacing-sizing-max-width-max-width-xlarge: 1024px;
  --spacing-sizing-max-width-max-width-large: 768px;
  --spacing-sizing-max-width-max-width-medium: 560px;
  --spacing-sizing-max-width-max-width-small: 480px;
  --spacing-sizing-max-width-max-width-xsmall: 400px;
  --spacing-sizing-max-width-max-width-xxsmall: 320px;
  --spacing-sizing-page-padding-padding-global: 64px;
  --spacing-sizing-section-padding-padding-section-large: 112px;
  --spacing-sizing-section-padding-padding-section-medium: 80px;
  --spacing-sizing-section-padding-padding-section-small: 48px;
}

/*

To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so:

<body data-typography-mode="desktop">
    <!-- the rest of your content -->
</body>

You can apply the theme on any DOM node, not just the `body`

*/

[data-typography-mode="desktop"] {
  --typography-text-sizes-heading-1: 56px;
  --typography-text-sizes-heading-2: 48px;
  --typography-text-sizes-heading-3: 40px;
  --typography-text-sizes-heading-4: 32px;
  --typography-text-sizes-heading-5: 24px;
  --typography-text-sizes-heading-6: 20px;
  --typography-text-sizes-text-large: 20px;
  --typography-text-sizes-text-medium: 18px;
}

[data-typography-mode="mobile"] {
  --typography-text-sizes-heading-1: 40px;
  --typography-text-sizes-heading-2: 36px;
  --typography-text-sizes-heading-3: 32px;
  --typography-text-sizes-heading-4: 24px;
  --typography-text-sizes-heading-5: 20px;
  --typography-text-sizes-heading-6: 18px;
  --typography-text-sizes-text-large: 18px;
  --typography-text-sizes-text-medium: 16px;
}

[data-spacing-sizing-mode="desktop"] {
  --spacing-sizing-page-padding-padding-global: 64px;
  --spacing-sizing-section-padding-padding-section-large: 112px;
  --spacing-sizing-section-padding-padding-section-medium: 80px;
  --spacing-sizing-section-padding-padding-section-small: 48px;
}

[data-spacing-sizing-mode="mobile"] {
  --spacing-sizing-page-padding-padding-global: 20px;
  --spacing-sizing-section-padding-padding-section-large: 64px;
  --spacing-sizing-section-padding-padding-section-medium: 48px;
  --spacing-sizing-section-padding-padding-section-small: 32px;
}