@zanichelli/albe-web-components 20.0.4 → 20.1.0

package/CHANGELOG.md

@@ -2,6 +2,38 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [20.1.0](https://github.com/ZanichelliEditore/design-system/compare/v20.0.5...v20.1.0) (2026-10-27)
+
+
+### Features
+
+* add typography font variables and serif classes ([df8b0d6](https://github.com/ZanichelliEditore/design-system/commit/df8b0d6b886bc519bcfe9b669fd6a6b3c35329ea))
+* css storybook ([8997449](https://github.com/ZanichelliEditore/design-system/commit/8997449528edccab080010979d15fe66e3dbeab3))
+* css: added margin and padding classes ([4eef168](https://github.com/ZanichelliEditore/design-system/commit/4eef1684c0de2bff158cc5e1f7b8c816649611da))
+* css: added more space unit variables ([6758c43](https://github.com/ZanichelliEditore/design-system/commit/6758c437ab59ee9ef8f8c063d192ec461e870655))
+* css: improve storybook doc ([74386c8](https://github.com/ZanichelliEditore/design-system/commit/74386c88cb081f7ef7488f9f5fc775e6344aca0f))
+* css: sort classes ([1103463](https://github.com/ZanichelliEditore/design-system/commit/1103463a416349baee1ab89f1371df5483dcdbf3))
+* fix css ([9e2ee4d](https://github.com/ZanichelliEditore/design-system/commit/9e2ee4df13f038f8528937cfad79b1cb892b0ab9))
+
+
+### Bug Fixes
+
+* **DS-769:** add dark theme for ztoggle switch and fixed dark theme scrollbar ([468e7c4](https://github.com/ZanichelliEditore/design-system/commit/468e7c46be6e4b39bc9ee5fcc933e9d1d118b4b6))
+* **DS-769:** add dark theme for ztoggle switch and fixed dark theme scrollbar ([fe2cd52](https://github.com/ZanichelliEditore/design-system/commit/fe2cd52bf92c1ecb4be5ddf449d6e4539cf6fa8e))
+* **storybook docs:** correctly apply DS themes to the stories inside the Docs page ([e2962a6](https://github.com/ZanichelliEditore/design-system/commit/e2962a68aa2722955ed486366ba92cf06be37378))
+* subcomponents class import in stories; ensure custom-elements.json build ([cda0c8c](https://github.com/ZanichelliEditore/design-system/commit/cda0c8c5a66bf09df10531828b95c05f69c41807))
+* zaccordion controls ([1933936](https://github.com/ZanichelliEditore/design-system/commit/1933936eb8e3aadd93b43cb519ccff90af87784c))
+
+## [20.0.5](https://github.com/ZanichelliEditore/design-system/compare/v20.0.4...v20.0.5) (2026-10-01)
+
+
+### Bug Fixes
+
+* handle different browsers rendering ([b2a6f41](https://github.com/ZanichelliEditore/design-system/commit/b2a6f41626b6a7f54b53bcad666b58028e591596))
+* improve allignment in z-stepper-item ([566856c](https://github.com/ZanichelliEditore/design-system/commit/566856c0f3463344128d6cc8cc5ea95ea0d1d957))
+* z-app-header search height ([855afdd](https://github.com/ZanichelliEditore/design-system/commit/855afdd8d15c9d7d97d965a80c473252c45842c8))
+* z-app-header search input accessibility ([59a1e21](https://github.com/ZanichelliEditore/design-system/commit/59a1e21e5787baf1226d4953260be64265a2dc0b))
+
 ## [20.0.4](https://github.com/ZanichelliEditore/design-system/compare/v20.0.3...v20.0.4) (2026-09-29)
 
 

package/dist/cjs/_commonjsHelpers-CFO10eej.js

@@ -5,6 +5,3 @@ function getDefaultExportFromCjs (x) {
 }
 
 exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
-//# sourceMappingURL=_commonjsHelpers-CFO10eej.js.map
-
-//# sourceMappingURL=_commonjsHelpers-CFO10eej.js.map

package/dist/cjs/breakpoints-B7vFm-3T.js

@@ -7,6 +7,3 @@ exports.Breakpoints = void 0;
     Breakpoints[Breakpoints["TABLET"] = 1151] = "TABLET";
     Breakpoints[Breakpoints["DESKTOP"] = 1365] = "DESKTOP";
 })(exports.Breakpoints || (exports.Breakpoints = {}));
-//# sourceMappingURL=breakpoints-B7vFm-3T.js.map
-
-//# sourceMappingURL=breakpoints-B7vFm-3T.js.map

package/dist/cjs/iconset-BIdMT0Ke.js

@@ -1025,6 +1025,3 @@ const COLOR_INDICATOR_ICONS = [
 
 exports.COLOR_INDICATOR_ICONS = COLOR_INDICATOR_ICONS;
 exports.ICONS = ICONS;
-//# sourceMappingURL=iconset-BIdMT0Ke.js.map
-
-//# sourceMappingURL=iconset-BIdMT0Ke.js.map

package/dist/cjs/index-DppFfqsn.js

@@ -416,6 +416,3 @@ const ColorPickerPalette = {
 };
 
 exports.ColorPickerPalette = ColorPickerPalette;
-//# sourceMappingURL=index-DppFfqsn.js.map
-
-//# sourceMappingURL=index-DppFfqsn.js.map

package/dist/cjs/{index-CZz7uP-M.js → index-ps8icjTZ.js}

@@ -22,10 +22,10 @@ const NAMESPACE = 'web-components-library';
 const BUILD = /* web-components-library */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, shadowDom: true, slotRelocation: true, state: true, updatable: true};
 
 const globalScripts = () => {};
-const globalStyles = "@import url(\"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap\");\n@import url(\"https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap\");\n:root {\n  --gray950: #121212;\n  --gray900: #292929;\n  --gray800: #3d3d3d;\n  --gray700: #525252;\n  --gray600: #666;\n  --gray500: #9b9b9b;\n  --gray400: #adadad;\n  --gray300: #c2c2c2;\n  --gray200: #d6d6d6;\n  --gray100: #ebebeb;\n  --gray50: #f6f6f6;\n  --gray25: #fafafa;\n}\n\n:root {\n  --blue950: #001229;\n  --blue900: #001f46;\n  --blue800: #002c63;\n  --blue700: #003981;\n  --blue600: #0047a0;\n  --blue500: #0056c1;\n  --blue400: #2e76ce;\n  --blue300: #5893db;\n  --blue200: #82b0e7;\n  --blue100: #accdf3;\n  --blue50: #d6eaff;\n  --blue25: #ebf5ff;\n}\n\n:root {\n  --green950: #19200a;\n  --green900: #22330a;\n  --green800: #2b4808;\n  --green700: #355d06;\n  --green600: #407305;\n  --green500: #568818;\n  --green400: #6f9d2f;\n  --green300: #8ab14a;\n  --green200: #a6c66b;\n  --green100: #c3da92;\n  --green50: #effce0;\n  --green25: #f5fdec;\n}\n\n:root {\n  --yellow950: #33280f;\n  --yellow900: #5c4615;\n  --yellow800: #85641a;\n  --yellow700: #ab8125;\n  --yellow600: #d09e30;\n  --yellow500: #f6bb3b;\n  --yellow400: #f9c852;\n  --yellow300: #fbd468;\n  --yellow200: #fee17f;\n  --yellow150: #ffde72;\n  --yellow100: #ffea91;\n  --yellow50: #fbf4e6;\n  --yellow25: #fcf7ed;\n}\n\n:root {\n  --red950: #2a0005;\n  --red900: #4c0009;\n  --red800: #6f000d;\n  --red700: #940111;\n  --red600: #ba0115;\n  --red500: #e4011c;\n  --red400: #ec5163;\n  --red300: #f07a88;\n  --red200: #f49fa9;\n  --red100: #f8bfc4;\n  --red50: #fdeeed;\n  --red25: #fef6f6;\n}\n\n:root {\n  --avatar-C01: #99005b;\n  --avatar-C02: #b01300;\n  --avatar-C03: #e62200;\n  --avatar-C04: #7c4000;\n  --avatar-C05: #c25600;\n  --avatar-C06: #6e6d6d;\n  --avatar-C07: #667d00;\n  --avatar-C08: #008741;\n  --avatar-C09: #00612f;\n  --avatar-C10: #007d8a;\n  --avatar-C11: #007db3;\n  --avatar-C12: #00548c;\n  --avatar-C13: #0028b1;\n  --avatar-C14: #00019c;\n  --avatar-C15: #6400ee;\n  --avatar-C16: #5f3fff;\n  --avatar-C17: #8b00a5;\n  --avatar-C18: #b200ff;\n  --avatar-C19: #c700d6;\n}\n\n:root {\n  --subject-art: #7b7b06;\n  --subject-art_image: #7b7b06;\n  --subject-biology: #438454;\n  --subject-chemistry: #ba5191;\n  --subject-civics: #000080;\n  --subject-communication: #1777d5;\n  --subject-computer_science: #10893e;\n  --subject-earth_science: #8d3eb2;\n  --subject-economic: #004080;\n  --subject-english: #c25353;\n  --subject-food_science: #38846b;\n  --subject-french: #c25353;\n  --subject-geography: #378092;\n  --subject-german: #c25353;\n  --subject-grammar: #be5926;\n  --subject-graphic: #8e7406;\n  --subject-greek: #37818a;\n  --subject-history: #8b572a;\n  --subject-law: #b90000;\n  --subject-latin: #8b4513;\n  --subject-math: #266997;\n  --subject-natural_science: #318473;\n  --subject-philosophy: #5a189a;\n  --subject-physics: #4a7ba4;\n  --subject-science_middle_school: #3a7922;\n  --subject-spanish: #c25353;\n  --subject-technology: #138473;\n  --subject-topography: #ac6604;\n  --subject-technique: #752771;\n}\n\n\n\n:root {\n  --color-black: #000;\n  --color-white: #fff;\n}\n\n:root {\n  /* font-family */\n  --font-family-sans: \"IBM Plex Sans\", sans-serif;\n  --font-family-serif: \"IBM Plex Serif\", serif;\n\n  /* font-weight */\n  --font-lt: 300;\n  --font-rg: 400;\n  --font-sb: 600;\n  --font-bd: 700;\n\n  /* font-size type scale */\n  --font-size-1: 0.75rem; /* 12px */\n  --font-size-2: 0.875rem; /* 14px */\n  --font-size-3: 1rem; /* assuming 16px */\n  --font-size-4: 1.125rem; /* 18px */\n  --font-size-5: 1.25rem; /* 20px */\n  --font-size-6: 1.5rem; /* 24px */\n  --font-size-7: 1.75rem; /* 28px */\n  --font-size-8: 2rem; /* 32px */\n  --font-size-9: 2.25rem; /* 36px */\n  --font-size-10: 2.625rem; /* 42px */\n  --font-size-11: 3rem; /* 48px */\n  --font-size-12: 3.375rem; /* 54px */\n  --font-size-13: 3.75rem; /* 60px */\n  --font-size-14: 4.25rem; /* 68px */\n  --font-size-15: 4.75rem; /* 76px */\n  --font-size-16: 5.25rem; /* 84px */\n  --font-size-17: 5.75rem; /* 92px */\n\n  /* cssprops to use with `font` shorthand property */\n  --section-title-1: var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);\n  --section-title-2: var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);\n  --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n  --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n  --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n  --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/* Typography classes */\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n  font-size: var(--font-size-7);\n  font-weight: var(--font-rg);\n  line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n  font-size: var(--font-size-4);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n  font-size: var(--font-size-1);\n  font-style: italic;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n/* section title */\n.section-title-1 {\n  font: var(--section-title-1);\n}\n\n.section-title-2 {\n  font: var(--section-title-2);\n}\n\n.section-title-3 {\n  font: var(--section-title-3);\n}\n\n.section-title-4 {\n  font: var(--section-title-4);\n}\n\n.section-title-5 {\n  font: var(--section-title-5);\n}\n\n.section-title-6 {\n  font: var(--section-title-6);\n}\n\n/* heading-1/2 for desktop and wide viewports */\n@media (min-width: 1152px) {\n  .heading-1,\n  .heading-1-sb,\n  .heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .heading-2,\n  .heading-2-sb,\n  .heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n}\n\n/* viewport classes */\n@media (max-width: 767px) {\n  .mobile-heading-1,\n  .mobile-heading-1-sb,\n  .mobile-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .mobile-heading-2,\n  .mobile-heading-2-sb,\n  .mobile-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-3,\n  .mobile-heading-3-sb,\n  .mobile-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-4,\n  .mobile-heading-4-sb,\n  .mobile-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-1,\n  .mobile-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-2,\n  .mobile-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-3,\n  .mobile-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-4,\n  .mobile-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-body-5,\n  .mobile-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-interactive-1,\n  .mobile-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-interactive-2,\n  .mobile-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-interactive-3,\n  .mobile-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .mobile-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .mobile-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .mobile-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .mobile-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .mobile-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .mobile-heading-1-lt,\n  .mobile-heading-2-lt,\n  .mobile-heading-3-lt,\n  .mobile-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .mobile-heading-1-sb,\n  .mobile-heading-2-sb,\n  .mobile-heading-3-sb,\n  .mobile-heading-4-sb,\n  .mobile-body-1-sb,\n  .mobile-body-2-sb,\n  .mobile-body-3-sb,\n  .mobile-body-4-sb,\n  .mobile-body-5-sb,\n  .mobile-interactive-1-sb,\n  .mobile-interactive-2-sb,\n  .mobile-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n  .tablet-heading-1,\n  .tablet-heading-1-sb,\n  .tablet-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .tablet-heading-2,\n  .tablet-heading-2-sb,\n  .tablet-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-3,\n  .tablet-heading-3-sb,\n  .tablet-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-4,\n  .tablet-heading-4-sb,\n  .tablet-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-1,\n  .tablet-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-2,\n  .tablet-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-3,\n  .tablet-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-4,\n  .tablet-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-body-5,\n  .tablet-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-interactive-1,\n  .tablet-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-interactive-2,\n  .tablet-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-interactive-3,\n  .tablet-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .tablet-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .tablet-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .tablet-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .tablet-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .tablet-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .tablet-heading-1-lt,\n  .tablet-heading-2-lt,\n  .tablet-heading-3-lt,\n  .tablet-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .tablet-heading-1-sb,\n  .tablet-heading-2-sb,\n  .tablet-heading-3-sb,\n  .tablet-heading-4-sb,\n  .tablet-body-1-sb,\n  .tablet-body-2-sb,\n  .tablet-body-3-sb,\n  .tablet-body-4-sb,\n  .tablet-body-5-sb,\n  .tablet-interactive-1-sb,\n  .tablet-interactive-2-sb,\n  .tablet-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n  .desktop-heading-1,\n  .desktop-heading-1-sb,\n  .desktop-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .desktop-heading-2,\n  .desktop-heading-2-sb,\n  .desktop-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .desktop-heading-3,\n  .desktop-heading-3-sb,\n  .desktop-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .desktop-heading-4,\n  .desktop-heading-4-sb,\n  .desktop-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-1,\n  .desktop-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-2,\n  .desktop-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-3,\n  .desktop-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-4,\n  .desktop-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-body-5,\n  .desktop-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-interactive-1,\n  .desktop-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-interactive-2,\n  .desktop-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-interactive-3,\n  .desktop-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .desktop-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .desktop-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .desktop-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .desktop-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .desktop-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .desktop-heading-1-lt,\n  .desktop-heading-2-lt,\n  .desktop-heading-3-lt,\n  .desktop-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .desktop-heading-1-sb,\n  .desktop-heading-2-sb,\n  .desktop-heading-3-sb,\n  .desktop-heading-4-sb,\n  .desktop-body-1-sb,\n  .desktop-body-2-sb,\n  .desktop-body-3-sb,\n  .desktop-body-4-sb,\n  .desktop-body-5-sb,\n  .desktop-interactive-1-sb,\n  .desktop-interactive-2-sb,\n  .desktop-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1366px) {\n  .wide-heading-1,\n  .wide-heading-1-sb,\n  .wide-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .wide-heading-2,\n  .wide-heading-2-sb,\n  .wide-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .wide-heading-3,\n  .wide-heading-3-sb,\n  .wide-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .wide-heading-4,\n  .wide-heading-4-sb,\n  .wide-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-1,\n  .wide-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-2,\n  .wide-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-3,\n  .wide-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-4,\n  .wide-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-body-5,\n  .wide-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-interactive-1,\n  .wide-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-interactive-2,\n  .wide-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-interactive-3,\n  .wide-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .wide-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .wide-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .wide-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .wide-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .wide-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .wide-heading-1-lt,\n  .wide-heading-2-lt,\n  .wide-heading-3-lt,\n  .wide-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .wide-heading-1-sb,\n  .wide-heading-2-sb,\n  .wide-heading-3-sb,\n  .wide-heading-4-sb,\n  .wide-body-1-sb,\n  .wide-body-2-sb,\n  .wide-body-3-sb,\n  .wide-body-4-sb,\n  .wide-body-5-sb,\n  .wide-interactive-1-sb,\n  .wide-interactive-2-sb,\n  .wide-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n/* font-weight variants */\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n  font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n  font-weight: var(--font-sb);\n}\n\n:root {\n  --space-unit: 8px;\n}\n\n:root {\n  --shadow-color-base: rgb(61 61 61 / 35%);\n  --shadow-inset-2: inset 0 2px 4px 0 var(--shadow-color-base);\n  --shadow-inset-4: inset 0 4px 8px 0 var(--shadow-color-base);\n  --shadow-0: 0 0 0 0 var(--shadow-color-base);\n  --shadow-1: 0 1px 2px 0 var(--shadow-color-base);\n  --shadow-2: 0 2px 4px 0 var(--shadow-color-base);\n  --shadow-3: 0 3px 6px 0 var(--shadow-color-base);\n  --shadow-4: 0 4px 8px 0 var(--shadow-color-base);\n  --shadow-6: 0 6px 12px 0 var(--shadow-color-base);\n  --shadow-8: 0 8px 16px 0 var(--shadow-color-base);\n  --shadow-12: 0 12px 24px 0 var(--shadow-color-base);\n  --shadow-16: 0 16px 32px 0 var(--shadow-color-base);\n  --shadow-24: 0 24px 48px 0 var(--shadow-color-base);\n}\n\n:root {\n  --border-no-radius: 0;\n  --border-size-small: 1px;\n  --border-size-medium: 2px;\n  --border-size-large: 4px;\n  --border-radius-small: 2px;\n  --border-radius: 4px;\n}\n\n:root {\n  --grid-mobile-viewport: 768px;\n  --grid-mobile-column: 4;\n  --grid-mobile-margin: 16px;\n  --grid-mobile-gutter: 16px;\n  --grid-tablet-viewport: 768px;\n  --grid-tablet-column: 8;\n  --grid-tablet-margin: 24px;\n  --grid-tablet-gutter: 24px;\n  --grid-desktop-viewport: 1152px;\n  --grid-desktop-column: 12;\n  --grid-desktop-margin: 24px;\n  --grid-desktop-gutter: 24px;\n  --grid-wide-viewport: 1366px;\n  --grid-wide-column: 12;\n  --grid-wide-margin: 32px;\n  --grid-wide-gutter: 32px;\n  --page-max-width: 1366px;\n\n  /* These variables automatically adapt to the viewport size,\n    that apps don't have to worry about updating the value manually. */\n  --grid-margin: var(--grid-mobile-margin);\n  --grid-gutter: var(--grid-mobile-gutter);\n  --grid-columns: var(--grid-mobile-column);\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n  :root {\n    --grid-margin: var(--grid-tablet-margin);\n    --grid-gutter: var(--grid-tablet-gutter);\n    --grid-columns: var(--grid-tablet-column);\n  }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n  :root {\n    --grid-margin: var(--grid-desktop-margin);\n    --grid-gutter: var(--grid-desktop-gutter);\n    --grid-columns: var(--grid-desktop-column);\n  }\n}\n\n@media (min-width: 1366px) {\n  :root {\n    --grid-margin: var(--grid-wide-margin);\n    --grid-gutter: var(--grid-wide-gutter);\n    --grid-columns: var(--grid-wide-column);\n  }\n}\n\n.z-grid {\n  display: grid;\n  width: 100%;\n  column-gap: var(--grid-gutter);\n  grid-template-columns: repeat(var(--grid-columns), 1fr);\n\n  .col-full {\n    grid-column: 1 / -1;\n  }\n\n  .col-1 {\n    grid-column: span 1;\n  }\n\n  .col-2 {\n    grid-column: span 2;\n  }\n\n  .col-3 {\n    grid-column: span 3;\n  }\n\n  .col-4,\n  .col-5,\n  .col-6,\n  .col-7,\n  .col-8,\n  .col-9,\n  .col-10,\n  .col-11,\n  .col-12 {\n    grid-column: span 4;\n  }\n\n  .col-start-1 {\n    grid-column-start: 1;\n  }\n\n  .col-start-2 {\n    grid-column-start: 2;\n  }\n\n  .col-start-3 {\n    grid-column-start: 3;\n  }\n\n  .col-start-4,\n  .col-start-5,\n  .col-start-6,\n  .col-start-7,\n  .col-start-8,\n  .col-start-9,\n  .col-start-10,\n  .col-start-11,\n  .col-start-12 {\n    grid-column-start: 4;\n  }\n\n  /*\n  .-col-start-1 is intentionally left out\n*/\n\n  .-col-start-2 {\n    grid-column-start: -2;\n  }\n\n  .-col-start-3 {\n    grid-column-start: -3;\n  }\n\n  .-col-start-4 {\n    grid-column-start: -4;\n  }\n\n  .-col-start-5,\n  .-col-start-6,\n  .-col-start-7,\n  .-col-start-8,\n  .-col-start-9,\n  .-col-start-10,\n  .-col-start-11,\n  .-col-start-12,\n  .-col-start-13 {\n    grid-column-start: -5;\n  }\n\n  .col-end-last {\n    grid-column-end: -1;\n  }\n\n  /*\n  .col-end-1 is intentionally left out\n*/\n\n  .col-end-2 {\n    grid-column-end: 2;\n  }\n\n  .col-end-3 {\n    grid-column-end: 3;\n  }\n\n  .col-end-4 {\n    grid-column-end: 4;\n  }\n\n  /*\n  This means \"end this column where column 5 start\",\n  which is the same as saying \"end this column where column 4 end\"\n*/\n  .col-end-5,\n  .col-end-6,\n  .col-end-7,\n  .col-end-8,\n  .col-end-9,\n  .col-end-10,\n  .col-end-11,\n  .col-end-12,\n  .col-end-13 {\n    grid-column-end: 5;\n  }\n\n  .-col-end-1 {\n    grid-column-end: -1;\n  }\n\n  .-col-end-2 {\n    grid-column-end: -2;\n  }\n\n  .-col-end-3 {\n    grid-column-end: -3;\n  }\n\n  .-col-end-4,\n  .-col-end-5,\n  .-col-end-6,\n  .-col-end-7,\n  .-col-end-8,\n  .-col-end-9,\n  .-col-end-10,\n  .-col-end-11,\n  .-col-end-12 {\n    grid-column-end: -4;\n  }\n\n  @media (max-width: 767px) {\n    .mobile-col-full {\n      grid-column: 1 / -1;\n    }\n\n    .mobile-col-1 {\n      grid-column: span 1;\n    }\n\n    .mobile-col-2 {\n      grid-column: span 2;\n    }\n\n    .mobile-col-3 {\n      grid-column: span 3;\n    }\n\n    .mobile-col-4 {\n      grid-column: span 4;\n    }\n  }\n\n  @media (min-width: 768px) {\n    .col-5 {\n      grid-column: span 5;\n    }\n\n    .col-6 {\n      grid-column: span 6;\n    }\n\n    .col-7 {\n      grid-column: span 7;\n    }\n\n    .col-8,\n    .col-9,\n    .col-10,\n    .col-11,\n    .col-12 {\n      grid-column: span 8;\n    }\n\n    .col-start-5 {\n      grid-column-start: 5;\n    }\n\n    .col-start-6 {\n      grid-column-start: 6;\n    }\n\n    .col-start-7 {\n      grid-column-start: 7;\n    }\n\n    .col-start-8,\n    .col-start-9,\n    .col-start-10,\n    .col-start-11,\n    .col-start-12 {\n      grid-column-start: 8;\n    }\n\n    .-col-start-6 {\n      grid-column-start: -6;\n    }\n\n    .-col-start-7 {\n      grid-column-start: -7;\n    }\n\n    .-col-start-8 {\n      grid-column-start: -8;\n    }\n\n    .-col-start-9,\n    .-col-start-10,\n    .-col-start-11,\n    .-col-start-12,\n    .-col-start-13 {\n      grid-column-start: -9;\n    }\n\n    .col-end-6 {\n      grid-column-end: 6;\n    }\n\n    .col-end-7 {\n      grid-column-end: 7;\n    }\n\n    .col-end-8 {\n      grid-column-end: 8;\n    }\n\n    .col-end-9,\n    .col-end-10,\n    .col-end-11,\n    .col-end-12,\n    .col-end-13 {\n      grid-column-end: 9;\n    }\n\n    .-col-end-5 {\n      grid-column-end: -5;\n    }\n\n    .-col-end-6 {\n      grid-column-end: -6;\n    }\n\n    .-col-end-7 {\n      grid-column-end: -7;\n    }\n\n    .-col-end-8,\n    .-col-end-9,\n    .-col-end-10,\n    .-col-end-11,\n    .-col-end-12 {\n      grid-column-end: -8;\n    }\n  }\n\n  @media (min-width: 768px) and (max-width: 1151px) {\n    .tablet-col-full {\n      grid-column: 1 / -1;\n    }\n\n    .tablet-col-1 {\n      grid-column: span 1;\n    }\n\n    .tablet-col-2 {\n      grid-column: span 2;\n    }\n\n    .tablet-col-3 {\n      grid-column: span 3;\n    }\n\n    .tablet-col-4 {\n      grid-column: span 4;\n    }\n\n    .tablet-col-5 {\n      grid-column: span 5;\n    }\n\n    .tablet-col-6 {\n      grid-column: span 6;\n    }\n\n    .tablet-col-7 {\n      grid-column: span 7;\n    }\n\n    .tablet-col-8 {\n      grid-column: span 8;\n    }\n\n    .tablet-col-start-1 {\n      grid-column-start: 1;\n    }\n\n    .tablet-col-start-2 {\n      grid-column-start: 2;\n    }\n\n    .tablet-col-start-3 {\n      grid-column-start: 3;\n    }\n\n    .tablet-col-start-4 {\n      grid-column-start: 4;\n    }\n\n    .tablet-col-start-5 {\n      grid-column-start: 5;\n    }\n\n    .tablet-col-start-6 {\n      grid-column-start: 6;\n    }\n\n    .tablet-col-start-7 {\n      grid-column-start: 7;\n    }\n\n    .tablet-col-start-8 {\n      grid-column-start: 8;\n    }\n\n    .-tablet-col-start-2 {\n      grid-column-start: -2;\n    }\n\n    .-tablet-col-start-3 {\n      grid-column-start: -3;\n    }\n\n    .-tablet-col-start-4 {\n      grid-column-start: -4;\n    }\n\n    .-tablet-col-start-5 {\n      grid-column-start: -5;\n    }\n\n    .-tablet-col-start-6 {\n      grid-column-start: -6;\n    }\n\n    .-tablet-col-start-7 {\n      grid-column-start: -7;\n    }\n\n    .-tablet-col-start-8 {\n      grid-column-start: -8;\n    }\n\n    .tablet-col-end-2 {\n      grid-column-end: 2;\n    }\n\n    .tablet-col-end-3 {\n      grid-column-end: 3;\n    }\n\n    .tablet-col-end-4 {\n      grid-column-end: 4;\n    }\n\n    .tablet-col-end-6 {\n      grid-column-end: 6;\n    }\n\n    .tablet-col-end-7 {\n      grid-column-end: 7;\n    }\n\n    .tablet-col-end-8 {\n      grid-column-end: 8;\n    }\n\n    .tablet-col-end-last {\n      grid-column-end: -1;\n    }\n\n    .-tablet-col-end-1 {\n      grid-column-end: -1;\n    }\n\n    .-tablet-col-end-2 {\n      grid-column-end: -2;\n    }\n\n    .-tablet-col-end-3 {\n      grid-column-end: -3;\n    }\n\n    .-tablet-col-end-4 {\n      grid-column-end: -4;\n    }\n\n    .-tablet-col-end-5 {\n      grid-column-end: -5;\n    }\n\n    .-tablet-col-end-6 {\n      grid-column-end: -6;\n    }\n\n    .-tablet-col-end-7 {\n      grid-column-end: -7;\n    }\n\n    .-tablet-col-end-8 {\n      grid-column-end: -8;\n    }\n  }\n\n  @media (min-width: 1152px) {\n    .col-9 {\n      grid-column: span 9;\n    }\n\n    .col-10 {\n      grid-column: span 10;\n    }\n\n    .col-11 {\n      grid-column: span 11;\n    }\n\n    .col-12 {\n      grid-column: span 12;\n    }\n\n    .col-start-9 {\n      grid-column-start: 9;\n    }\n\n    .col-start-10 {\n      grid-column-start: 10;\n    }\n\n    .col-start-11 {\n      grid-column-start: 11;\n    }\n\n    .col-start-12 {\n      grid-column-start: 12;\n    }\n\n    .-col-start-10 {\n      grid-column-start: -10;\n    }\n\n    .-col-start-11 {\n      grid-column-start: -11;\n    }\n\n    .-col-start-12 {\n      grid-column-start: -12;\n    }\n\n    .-col-start-13 {\n      grid-column-start: -13;\n    }\n\n    .col-end-10 {\n      grid-column-end: 10;\n    }\n\n    .col-end-11 {\n      grid-column-end: 11;\n    }\n\n    .col-end-12 {\n      grid-column-end: 12;\n    }\n\n    .col-end-13 {\n      grid-column-end: 13;\n    }\n\n    .-col-end-9 {\n      grid-column-end: -9;\n    }\n\n    .-col-end-10 {\n      grid-column-end: -10;\n    }\n\n    .-col-end-11 {\n      grid-column-end: -11;\n    }\n\n    .-col-end-12 {\n      grid-column-end: -12;\n    }\n  }\n\n  @media (min-width: 1152px) and (max-width: 1365px) {\n    .desktop-col-full {\n      grid-column: 1 / -1;\n    }\n\n    .desktop-col-1 {\n      grid-column: span 1;\n    }\n\n    .desktop-col-2 {\n      grid-column: span 2;\n    }\n\n    .desktop-col-3 {\n      grid-column: span 3;\n    }\n\n    .desktop-col-4 {\n      grid-column: span 4;\n    }\n\n    .desktop-col-5 {\n      grid-column: span 5;\n    }\n\n    .desktop-col-6 {\n      grid-column: span 6;\n    }\n\n    .desktop-col-7 {\n      grid-column: span 7;\n    }\n\n    .desktop-col-8 {\n      grid-column: span 8;\n    }\n\n    .desktop-col-9 {\n      grid-column: span 9;\n    }\n\n    .desktop-col-10 {\n      grid-column: span 10;\n    }\n\n    .desktop-col-11 {\n      grid-column: span 11;\n    }\n\n    .desktop-col-12 {\n      grid-column: span 12;\n    }\n\n    .desktop-col-start-1 {\n      grid-column-start: 1;\n    }\n\n    .desktop-col-start-2 {\n      grid-column-start: 2;\n    }\n\n    .desktop-col-start-3 {\n      grid-column-start: 3;\n    }\n\n    .desktop-col-start-4 {\n      grid-column-start: 4;\n    }\n\n    .desktop-col-start-5 {\n      grid-column-start: 5;\n    }\n\n    .desktop-col-start-6 {\n      grid-column-start: 6;\n    }\n\n    .desktop-col-start-7 {\n      grid-column-start: 7;\n    }\n\n    .desktop-col-start-8 {\n      grid-column-start: 8;\n    }\n\n    .desktop-col-start-9 {\n      grid-column-start: 9;\n    }\n\n    .desktop-col-start-10 {\n      grid-column-start: 10;\n    }\n\n    .desktop-col-start-11 {\n      grid-column-start: 11;\n    }\n\n    .desktop-col-start-12 {\n      grid-column-start: 12;\n    }\n\n    .-desktop-col-start-2 {\n      grid-column-start: -2;\n    }\n\n    .-desktop-col-start-3 {\n      grid-column-start: -3;\n    }\n\n    .-desktop-col-start-4 {\n      grid-column-start: -4;\n    }\n\n    .-desktop-col-start-5 {\n      grid-column-start: -5;\n    }\n\n    .-desktop-col-start-6 {\n      grid-column-start: -6;\n    }\n\n    .-desktop-col-start-7 {\n      grid-column-start: -7;\n    }\n\n    .-desktop-col-start-8 {\n      grid-column-start: -8;\n    }\n\n    .-desktop-col-start-9 {\n      grid-column-start: -9;\n    }\n\n    .-desktop-col-start-10 {\n      grid-column-start: -10;\n    }\n\n    .-desktop-col-start-11 {\n      grid-column-start: -11;\n    }\n\n    .-desktop-col-start-12 {\n      grid-column-start: -12;\n    }\n\n    .desktop-col-end-2 {\n      grid-column-end: 2;\n    }\n\n    .desktop-col-end-3 {\n      grid-column-end: 3;\n    }\n\n    .desktop-col-end-4 {\n      grid-column-end: 4;\n    }\n\n    .desktop-col-end-6 {\n      grid-column-end: 6;\n    }\n\n    .desktop-col-end-7 {\n      grid-column-end: 7;\n    }\n\n    .desktop-col-end-8 {\n      grid-column-end: 8;\n    }\n\n    .desktop-col-end-9 {\n      grid-column-end: 9;\n    }\n\n    .desktop-col-end-10 {\n      grid-column-end: 10;\n    }\n\n    .desktop-col-end-11 {\n      grid-column-end: 11;\n    }\n\n    .desktop-col-end-12 {\n      grid-column-end: 12;\n    }\n\n    .desktop-col-end-last {\n      grid-column-end: -1;\n    }\n\n    .-desktop-col-end-1 {\n      grid-column-end: -1;\n    }\n\n    .-desktop-col-end-2 {\n      grid-column-end: -2;\n    }\n\n    .-desktop-col-end-3 {\n      grid-column-end: -3;\n    }\n\n    .-desktop-col-end-4 {\n      grid-column-end: -4;\n    }\n\n    .-desktop-col-end-5 {\n      grid-column-end: -5;\n    }\n\n    .-desktop-col-end-6 {\n      grid-column-end: -6;\n    }\n\n    .-desktop-col-end-7 {\n      grid-column-end: -7;\n    }\n\n    .-desktop-col-end-8 {\n      grid-column-end: -8;\n    }\n\n    .-desktop-col-end-9 {\n      grid-column-end: -9;\n    }\n\n    .-desktop-col-end-10 {\n      grid-column-end: -10;\n    }\n\n    .-desktop-col-end-11 {\n      grid-column-end: -11;\n    }\n\n    .-desktop-col-end-12 {\n      grid-column-end: -12;\n    }\n  }\n\n  @media (min-width: 1366px) {\n    .wide-col-full {\n      grid-column: 1 / -1;\n    }\n\n    .wide-col-1 {\n      grid-column: span 1;\n    }\n\n    .wide-col-2 {\n      grid-column: span 2;\n    }\n\n    .wide-col-3 {\n      grid-column: span 3;\n    }\n\n    .wide-col-4 {\n      grid-column: span 4;\n    }\n\n    .wide-col-5 {\n      grid-column: span 5;\n    }\n\n    .wide-col-6 {\n      grid-column: span 6;\n    }\n\n    .wide-col-7 {\n      grid-column: span 7;\n    }\n\n    .wide-col-8 {\n      grid-column: span 8;\n    }\n\n    .wide-col-9 {\n      grid-column: span 9;\n    }\n\n    .wide-col-10 {\n      grid-column: span 10;\n    }\n\n    .wide-col-11 {\n      grid-column: span 11;\n    }\n\n    .wide-col-12 {\n      grid-column: span 12;\n    }\n\n    .wide-col-start-1 {\n      grid-column-start: 1;\n    }\n\n    .wide-col-start-2 {\n      grid-column-start: 2;\n    }\n\n    .wide-col-start-3 {\n      grid-column-start: 3;\n    }\n\n    .wide-col-start-4 {\n      grid-column-start: 4;\n    }\n\n    .wide-col-start-5 {\n      grid-column-start: 5;\n    }\n\n    .wide-col-start-6 {\n      grid-column-start: 6;\n    }\n\n    .wide-col-start-7 {\n      grid-column-start: 7;\n    }\n\n    .wide-col-start-8 {\n      grid-column-start: 8;\n    }\n\n    .wide-col-start-9 {\n      grid-column-start: 9;\n    }\n\n    .wide-col-start-10 {\n      grid-column-start: 10;\n    }\n\n    .wide-col-start-11 {\n      grid-column-start: 11;\n    }\n\n    .wide-col-start-12 {\n      grid-column-start: 12;\n    }\n\n    .-wide-col-start-2 {\n      grid-column-start: -2;\n    }\n\n    .-wide-col-start-3 {\n      grid-column-start: -3;\n    }\n\n    .-wide-col-start-4 {\n      grid-column-start: -4;\n    }\n\n    .-wide-col-start-5 {\n      grid-column-start: -5;\n    }\n\n    .-wide-col-start-6 {\n      grid-column-start: -6;\n    }\n\n    .-wide-col-start-7 {\n      grid-column-start: -7;\n    }\n\n    .-wide-col-start-8 {\n      grid-column-start: -8;\n    }\n\n    .-wide-col-start-9 {\n      grid-column-start: -9;\n    }\n\n    .-wide-col-start-10 {\n      grid-column-start: -10;\n    }\n\n    .-wide-col-start-11 {\n      grid-column-start: -11;\n    }\n\n    .-wide-col-start-12 {\n      grid-column-start: -12;\n    }\n\n    .wide-col-end-2 {\n      grid-column-end: 2;\n    }\n\n    .wide-col-end-3 {\n      grid-column-end: 3;\n    }\n\n    .wide-col-end-4 {\n      grid-column-end: 4;\n    }\n\n    .wide-col-end-6 {\n      grid-column-end: 6;\n    }\n\n    .wide-col-end-7 {\n      grid-column-end: 7;\n    }\n\n    .wide-col-end-8 {\n      grid-column-end: 8;\n    }\n\n    .wide-col-end-9 {\n      grid-column-end: 9;\n    }\n\n    .wide-col-end-10 {\n      grid-column-end: 10;\n    }\n\n    .wide-col-end-11 {\n      grid-column-end: 11;\n    }\n\n    .wide-col-end-12 {\n      grid-column-end: 12;\n    }\n\n    .wide-col-end-last {\n      grid-column-end: -1;\n    }\n\n    .-wide-col-end-1 {\n      grid-column-end: -1;\n    }\n\n    .-wide-col-end-2 {\n      grid-column-end: -2;\n    }\n\n    .-wide-col-end-3 {\n      grid-column-end: -3;\n    }\n\n    .-wide-col-end-4 {\n      grid-column-end: -4;\n    }\n\n    .-wide-col-end-5 {\n      grid-column-end: -5;\n    }\n\n    .-wide-col-end-6 {\n      grid-column-end: -6;\n    }\n\n    .-wide-col-end-7 {\n      grid-column-end: -7;\n    }\n\n    .-wide-col-end-8 {\n      grid-column-end: -8;\n    }\n\n    .-wide-col-end-9 {\n      grid-column-end: -9;\n    }\n\n    .-wide-col-end-10 {\n      grid-column-end: -10;\n    }\n\n    .-wide-col-end-11 {\n      grid-column-end: -11;\n    }\n\n    .-wide-col-end-12 {\n      grid-column-end: -12;\n    }\n  }\n}\n\n/* Default size: big. Default color variant: primary01 */\n.z-fab {\n  --z-fab-right-offset: var(--grid-margin);\n  --z-fab-bottom-offset: var(--grid-margin);\n  --z-fab-icon-size: 20px;\n  --z-fab-icon-fill: var(--color-inverse-icon);\n\n  position: fixed;\n  z-index: 1;\n  right: var(--z-fab-right-offset);\n  bottom: var(--z-fab-bottom-offset);\n  display: flex;\n  max-width: 48px;\n  box-sizing: border-box;\n  align-items: center;\n  padding: 14px;\n  background-color: var(--color-primary01);\n  border-radius: 24px;\n  box-shadow: var(--shadow-4);\n  color: var(--color-text-inverse);\n  column-gap: 0;\n  cursor: pointer;\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.25;\n  transition: all 0.2s ease-in-out;\n}\n\n.z-fab:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\nbutton.z-fab {\n  border: none;\n}\n\na.z-fab {\n  text-decoration: none;\n}\n\n.z-fab.z-fab-small {\n  --z-fab-icon-size: 18px;\n\n  max-width: 42px;\n  padding: 12px;\n  border-radius: 21px;\n  font-size: var(--font-size-2);\n  line-height: 1.285;\n}\n\n.z-fab.z-fab-x-small {\n  --z-fab-icon-size: 16px;\n\n  max-width: 36px;\n  padding: 10px;\n  border-radius: 18px;\n  font-size: var(--font-size-1);\n  line-height: 1.333;\n}\n\n.z-fab.z-fab-extended {\n  max-width: 100%;\n  column-gap: var(--space-unit);\n}\n\n.z-fab.z-fab-extended.z-fab-x-small {\n  column-gap: calc(var(--space-unit) / 2);\n}\n\n.z-fab.z-fab-extended > *:not(z-icon) {\n  opacity: 1;\n}\n\n/* color variants */\n.z-fab.z-fab-primary03 {\n  --z-fab-icon-fill: var(--color-primary01-icon);\n\n  background-color: var(--color-primary03);\n  color: var(--color-primary01-icon);\n}\n\n.z-fab.z-fab-surface01 {\n  --z-fab-icon-fill: var(--color-primary01-icon);\n\n  background-color: var(--color-surface01);\n  color: var(--color-primary01-icon);\n}\n\n.z-fab.z-fab-surface02 {\n  --z-fab-icon-fill: var(--color-primary01-icon);\n\n  background-color: var(--color-background);\n  color: var(--color-primary01-icon);\n}\n\n.z-fab.z-fab-surface04 {\n  --z-fab-icon-fill: var(--color-inverse-icon);\n\n  background-color: var(--color-surface04);\n  color: var(--color-text-inverse);\n}\n\n.z-fab z-icon {\n  --z-icon-width: var(--z-fab-icon-size);\n  --z-icon-height: var(--z-fab-icon-size);\n\n  fill: var(--z-fab-icon-fill);\n}\n\n.z-fab > *:not(z-icon) {\n  overflow: hidden;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n  white-space: nowrap;\n}\n\n.z-fab.z-fab-extended > *:not(z-icon:first-child) {\n  opacity: 1;\n}\n\n@media (hover: hover) {\n  .z-fab.z-fab-extendable:hover {\n    max-width: 100%;\n    column-gap: var(--space-unit);\n  }\n\n  .z-fab.z-fab-extendable:hover > *:not(z-icon:first-child) {\n    opacity: 1;\n  }\n\n  .z-fab.z-fab-x-small.z-fab-extendable:hover {\n    column-gap: calc(var(--space-unit) / 2);\n  }\n}\n\n.z-label {\n  display: block;\n  padding-bottom: var(--space-unit);\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  text-align: left;\n  text-transform: uppercase;\n}\n\nbutton.z-link {\n  padding: 0;\n  border: 0;\n  margin: 0;\n  background-color: transparent;\n}\n\na.z-link,\nbutton.z-link {\n  display: inline-flex;\n  cursor: pointer;\n  font-family: var(--font-family-sans);\n  line-height: inherit;\n  text-decoration: none;\n}\n\na.z-link.z-link-icon,\nbutton.z-link.z-link-icon {\n  --z-icon-width: 1.125em;\n  --z-icon-height: 1.125em;\n\n  align-items: center;\n  column-gap: 0.5em;\n}\n\na.z-link.z-link-sb,\nbutton.z-link.z-link-sb {\n  font-weight: var(--font-sb);\n}\n\na.z-link.z-link-underline,\nbutton.z-link.z-link-underline {\n  text-decoration: underline;\n}\n\na.z-link:hover,\nbutton.z-link:hover,\na.z-link:focus-visible,\nbutton.z-link:focus-visible,\na.z-link:active,\nbutton.z-link:active {\n  text-decoration: underline;\n}\n\na.z-link:focus-visible,\nbutton.z-link:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\na.z-link.z-link-disabled,\nbutton.z-link.z-link-disabled {\n  box-shadow: none;\n  color: var(--color-disabled03);\n  cursor: default;\n  fill: var(--color-disabled03);\n  outline: none;\n  pointer-events: none;\n  text-decoration: none;\n}\n\na.z-link,\nbutton.z-link,\na.z-link.z-link-active,\nbutton.z-link.z-link-active,\na.z-link:hover,\nbutton.z-link:hover,\na.z-link.z-link-active:hover,\nbutton.z-link.z-link-active:hover,\na.z-link:focus-visible,\nbutton.z-link:focus-visible,\na.z-link.z-link-active:focus-visible,\nbutton.z-link.z-link-active:focus-visible,\na.z-link:active,\nbutton.z-link:active,\na.z-link.z-link-active:active,\nbutton.z-link.z-link-active:active,\na.z-link:visited,\nbutton.z-link:visited,\na.z-link.z-link-active:visited,\nbutton.z-link.z-link-active:visited {\n  color: var(--color-text-link-default);\n  fill: var(--color-text-link-default);\n}\n\na.z-link.z-link-blue,\nbutton.z-link.z-link-blue,\na.z-link.z-link-blue.z-link-active,\nbutton.z-link.z-link-blue.z-link-active {\n  color: var(--color-text-link-blue);\n  fill: var(--color-text-link-blue);\n}\n\na.z-link.z-link-red,\nbutton.z-link.z-link-red,\na.z-link.z-link-red.z-link-active,\nbutton.z-link.z-link-red.z-link-active {\n  color: var(--color-text-link-red);\n  fill: var(--color-text-link-red);\n}\n\na.z-link.z-link-inverse,\nbutton.z-link.z-link-inverse,\na.z-link.z-link-inverse.z-link-active,\nbutton.z-link.z-link-inverse.z-link-active {\n  color: var(--color-text-link-inverse);\n  fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:hover,\nbutton.z-link.z-link-blue:hover {\n  color: var(--color-text-link-blue-hover);\n  fill: var(--color-text-link-blue-hover);\n}\n\na.z-link.z-link-red:hover,\nbutton.z-link.z-link-red:hover {\n  color: var(--color-text-link-red-hover);\n  fill: var(--color-text-link-red-hover);\n}\n\na.z-link.z-link-inverse:hover,\nbutton.z-link.z-link-inverse:hover {\n  color: var(--color-text-link-inverse);\n  fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:active,\nbutton.z-link.z-link-blue:active,\na.z-link.z-link-blue:focus-visible,\nbutton.z-link.z-link-blue:focus-visible {\n  color: var(--color-text-link-blue-active);\n  fill: var(--color-text-link-blue-active);\n}\n\na.z-link.z-link-red:active,\nbutton.z-link.z-link-red:active,\na.z-link.z-link-red:focus-visible,\nbutton.z-link.z-link-red:focus-visible {\n  color: var(--color-text-link-red-active);\n  fill: var(--color-text-link-red-active);\n}\n\na.z-link.z-link-inverse:active,\nbutton.z-link.z-link-inverse:active,\na.z-link.z-link-inverse:focus-visible,\nbutton.z-link.z-link-inverse:focus-visible {\n  color: var(--color-text-link-inverse);\n  fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:visited,\nbutton.z-link.z-link-blue:visited {\n  color: var(--color-text-link-blue-visited);\n  fill: var(--color-text-link-blue-visited);\n}\n\na.z-link.z-link-red:visited,\nbutton.z-link.z-link-red:visited {\n  color: var(--color-text-link-red-visited);\n  fill: var(--color-text-link-red-visited);\n}\n\na.z-link.z-link-inverse:visited,\nbutton.z-link.z-link-inverse:visited {\n  color: var(--color-text-link-inverse);\n  fill: var(--color-text-link-inverse);\n}\n\n/* Webkit Scrollbar */\n.z-scrollbar::-webkit-scrollbar {\n  width: 6px;\n  background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);\n}\n\n.z-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--color-primary01);\n}\n\n.z-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--color-hover-primary);\n}\n\n:host([theme=\"dark\"]) .z-scrollbar,\n.z-scrollbar--dark {\n  --z-scrollbar-track-gradient: linear-gradient(\n    to right,\n    transparent 0 1px,\n    var(--gray600) 1px 5px,\n    transparent 5px 6px\n  );\n  --z-scrollbar-track-color: var(--gray600);\n  --z-scrollbar-thumb-color: var(--color-primary03);\n  --z-scrollbar-thumb-hover-color: var(--color-hover-primary);\n  --z-scrollbar-corner-color: transparent;\n}\n\n/* Firefox scrollbar */\n@supports not selector(.z-scrollbar::-webkit-scrollbar-track) {\n  .z-scrollbar {\n    scrollbar-color: var(--color-primary01) transparent;\n  }\n\n  :host([theme=\"dark\"]) .z-scrollbar,\n  .z-scrollbar--dark {\n    scrollbar-color: var(--z-scrollbar-thumb-color, var(--color-primary03))\n      var(--z-scrollbar-track-color, var(--gray600));\n  }\n}\n\nz-table,\ntable.z-table {\n  background-color: var(--color-surface01);\n\n  --z-table--cells-padding: calc(var(--space-unit) * 2);\n}\n\ntable.z-table {\n  border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n  background-color: var(--color-background);\n\n  --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n  border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n  text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n  border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n  --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n  position: relative;\n  background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: -1px;\n  box-shadow:\n    inset 0 var(--border-size-small) 0 var(--color-surface04),\n    inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n  content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n  left: 0;\n}\n\n\n\n:root,\n.theme-default {\n  --color-background: var(--gray50);\n  --shadow-focus-primary: 0 0 0 2px var(--color-white), 0 0 2px 5px var(--blue800);\n\n  /* primary */\n  --color-active-primary: var(--blue400);\n  --color-hover-primary: var(--blue800);\n  --color-pressed-primary: var(--blue400);\n  --color-primary01: var(--blue500);\n  --color-primary02: var(--blue25);\n  --color-primary03: var(--blue50);\n\n  /* secondary */\n  --color-active-secondary: var(--red400);\n  --color-hover-secondary: var(--red800);\n  --color-pressed-secondary: var(--red400);\n  --color-secondary01: var(--red500);\n  --color-secondary02: var(--red25);\n  --color-secondary03: var(--red50);\n  --color-button-secondary: var(--color-surface01);\n\n  /* surface */\n  --color-surface01: var(--color-white);\n  --color-surface02: var(--gray100);\n  --color-surface03: var(--gray300);\n  --color-surface04: var(--gray700);\n  --color-surface05: var(--gray900);\n\n  /* text */\n  --color-default-text: var(--gray900);\n  --color-hover-text: var(--gray800);\n  --color-pressed-text: var(--gray700);\n  --color-text-inverse: var(--color-white);\n  --color-text02: var(--gray100);\n  --color-text03: var(--gray300);\n  --color-text05: var(--gray500);\n\n  /* disabled */\n  --color-disabled01: var(--gray300);\n  --color-disabled02: var(--gray100);\n  --color-disabled03: var(--gray500);\n\n  /* icons */\n  --color-active-primary-icon: var(--blue400);\n  --color-default-icon: var(--gray900);\n  --color-disabled01-icon: var(--gray300);\n  --color-disabled02-icon: var(--gray100);\n  --color-disabled03-icon: var(--gray500);\n  --color-hover-icon: var(--color-black);\n  --color-hover-primary-icon: var(--blue800);\n  --color-inverse-icon: var(--color-white);\n  --color-pressed-icon: var(--gray700);\n  --color-primary01-icon: var(--blue500);\n\n  /* alert */\n  --color-default-error: var(--red500);\n  --color-default-success: var(--green500);\n  --color-default-warning: var(--yellow500);\n  --color-hover-error: var(--red800);\n  --color-hover-success: var(--green800);\n  --color-hover-warning: var(--yellow800);\n  --color-inverse-error: var(--red50);\n  --color-inverse-hover-error: var(--red500);\n  --color-inverse-hover-success: var(--green500);\n  --color-inverse-hover-warning: var(--yellow500);\n  --color-inverse-success: var(--green50);\n  --color-inverse-warning: var(--yellow50);\n\n  /* forms */\n  --color-form-active-primary: var(--blue400);\n  --color-form-background: var(--color-white);\n  --color-form-default-icon: var(--gray900);\n  --color-form-default-text: var(--gray900);\n  --color-form-disabled-text: var(--gray500);\n  --color-form-disabled01-icon: var(--gray500);\n  --color-form-disabled03: var(--gray500);\n  --color-form-hover-error: var(--red800);\n  --color-form-hover-primary: var(--blue800);\n  --color-form-hover-success: var(--green800);\n  --color-form-hover-warning: var(--yellow800);\n  --color-form-inverse-error: var(--red50);\n  --color-form-inverse-success: var(--green50);\n  --color-form-inverse-warning: var(--yellow50);\n  --color-form-placeholder-text: var(--gray600);\n  --color-form-success01: var(--green500);\n  --color-form-surface03: var(--gray200);\n  --color-form-surface04: var(--gray600);\n  --color-form-warning01: var(--yellow500);\n\n  /* links */\n  --color-text-link-blue: var(--blue500);\n  --color-text-link-blue-hover: var(--blue800);\n  --color-text-link-blue-active: var(--blue800);\n  --color-text-link-blue-visited: var(--blue800);\n  --color-text-link-blue-pressed: var(--blue400);\n  --color-text-link-red: var(--red500);\n  --color-text-link-red-hover: var(--red800);\n  --color-text-link-red-active: var(--red800);\n  --color-text-link-red-visited: var(--red800);\n  --color-text-link-red-pressed: var(--red400);\n  --color-text-link-inverse: var(--color-white);\n  --color-text-link-default: var(--gray900);\n}\n\n.theme-black {\n  /* primary */\n  --color-active-primary: var(--gray600);\n  --color-hover-primary: var(--gray700);\n  --color-pressed-primary: var(--gray600);\n  --color-primary01: var(--gray950);\n  --color-primary02: var(--gray100);\n  --color-primary03: var(--gray200);\n\n  /* secondary */\n  --color-active-secondary: var(--gray400);\n  --color-hover-secondary: var(--gray700);\n  --color-pressed-secondary: var(--gray400);\n  --color-secondary01: var(--gray800);\n  --color-secondary02: var(--gray800);\n  --color-secondary03: var(--gray100);\n\n  /* icons */\n  --color-active-primary-icon: var(--gray600);\n  --color-hover-primary-icon: var(--gray700);\n  --color-primary01-icon: var(--gray950);\n\n  /* forms */\n  --color-form-active-primary: var(--gray600);\n  --color-form-hover-primary: var(--gray700);\n}\n\n/* --- Black theme variants --- Use them in combination with `theme-black` css class: `<div class=\"theme-black theme-black--red\">` */\n\n.theme-black.theme-black--red {\n  /* secondary */\n  --color-active-secondary: var(--red400);\n  --color-hover-secondary: var(--red800);\n  --color-pressed-secondary: var(--red400);\n  --color-secondary01: var(--red500);\n  --color-secondary02: var(--red25);\n  --color-secondary03: var(--red50);\n}\n\n.theme-black.theme-black--yellow {\n  /* secondary */\n  --color-active-secondary: var(--yellow400);\n  --color-hover-secondary: var(--yellow800);\n  --color-pressed-secondary: var(--yellow400);\n  --color-secondary01: var(--yellow500);\n  --color-secondary02: var(--yellow25);\n  --color-secondary03: var(--yellow50);\n}\n\n.theme-dark {\n  --color-background: var(--gray900);\n  --shadow-focus-primary: 0 0 0 2px var(--gray900), 0 0 2px 5px var(--blue25);\n\n  /* primary */\n  --color-active-primary: var(--gray25);\n  --color-hover-primary: var(--gray100);\n  --color-pressed-primary: var(--gray25);\n  --color-primary01: var(--color-white);\n  --color-primary02: var(--gray800);\n  --color-primary03: var(--gray700);\n\n  /* secondary */\n  --color-hover-secondary: var(--red200);\n  --color-secondary01: var(--red500);\n  --color-secondary02: var(--red900);\n  --color-secondary03: var(--red800);\n  --color-button-secondary: transparent;\n\n  /* surface */\n  --color-surface01: var(--gray900);\n  --color-surface02: var(--gray700);\n  --color-surface03: var(--gray300);\n  --color-surface04: var(--gray100);\n  --color-surface05: var(--color-white);\n\n  /* text */\n  --color-default-text: var(--gray100);\n  --color-hover-text: var(--gray300);\n  --color-pressed-text: var(--gray300);\n  --color-text-inverse: var(--gray900);\n  --color-text02: var(--gray900);\n  --color-text03: var(--gray700);\n  --color-text05: var(--gray500);\n\n  /* disabled */\n  --color-disabled01: var(--gray700);\n  --color-disabled02: var(--gray900);\n  --color-disabled03: var(--gray500);\n\n  /* icons */\n  --color-active-primary-icon: var(--gray300);\n  --color-default-icon: var(--gray100);\n  --color-disabled01-icon: var(--gray700);\n  --color-disabled02-icon: var(--gray900);\n  --color-disabled03-icon: var(--gray500);\n  --color-hover-icon: var(--gray300);\n  --color-hover-primary-icon: var(--gray300);\n  --color-inverse-icon: var(--gray900);\n  --color-pressed-icon: var(--gray300);\n  --color-primary01-icon: var(--color-white);\n\n  /* alert */\n  --color-default-error: var(--red200);\n  --color-default-success: var(--green200);\n  --color-default-warning: var(--yellow200);\n  --color-hover-error: var(--red50);\n  --color-hover-success: var(--green50);\n  --color-hover-warning: var(--yellow50);\n  --color-inverse-error: var(--red800);\n  --color-inverse-hover-error: var(--red200);\n  --color-inverse-hover-success: var(--green200);\n  --color-inverse-hover-warning: var(--yellow200);\n  --color-inverse-success: var(--green800);\n  --color-inverse-warning: var(--yellow800);\n\n  /* forms */\n  --color-form-active-primary: var(--gray800);\n  --color-form-hover-primary: var(--gray800);\n\n  /* links */\n  --color-text-link-blue-active: var(--color-white);\n  --color-text-link-blue-hover: var(--color-white);\n  --color-text-link-blue-pressed: var(--color-white);\n  --color-text-link-blue-visited: var(--color-white);\n  --color-text-link-blue: var(--color-white);\n  --color-text-link-default: var(--color-white);\n  --color-text-link-inverse: var(--gray900);\n  --color-text-link-red-active: var(--color-white);\n  --color-text-link-red-hover: var(--color-white);\n  --color-text-link-red-pressed: var(--color-white);\n  --color-text-link-red-visited: var(--color-white);\n  --color-text-link-red: var(--color-white);\n}\n\n.theme-red {\n  /* primary */\n  --color-active-primary: var(--red400);\n  --color-hover-primary: var(--red800);\n  --color-pressed-primary: var(--red400);\n  --color-primary01: var(--red500);\n  --color-primary02: var(--red25);\n  --color-primary03: var(--red50);\n\n  /* secondary */\n  --color-active-secondary: var(--gray400);\n  --color-hover-secondary: var(--gray800);\n  --color-pressed-secondary: var(--gray400);\n  --color-secondary01: var(--gray500);\n  --color-secondary02: var(--gray25);\n  --color-secondary03: var(--gray50);\n\n  /* icons */\n  --color-active-primary-icon: var(--red400);\n  --color-hover-primary-icon: var(--red800);\n  --color-primary01-icon: var(--red500);\n\n  /* forms */\n  --color-form-active-primary: var(--red400);\n  --color-form-hover-primary: var(--red800);\n}\n\n\n/* Styles for stacked z-accordions */\n\nz-accordion + z-accordion {\n  border-top: none;\n}\n\n/* all z-accordions with some sibling z-accordion */\nz-accordion[variant=\"background\"]:not(:first-of-type, :last-of-type),\nz-accordion[variant=\"background\"]:not(:first-of-type, :last-of-type)::part(summary),\nz-accordion[variant=\"background\"]:not(:first-of-type, :last-of-type)::part(content),\nz-accordion[variant=\"background\"]:not(:first-of-type, :last-of-type)::part(summary)::before,\nz-accordion[variant=\"background\"]:not(:first-of-type, :last-of-type)::part(content)::before {\n  border-radius: 0;\n}\n\n/* first z-accordion with some sibling z-accordion */\nz-accordion[variant=\"background\"]:first-of-type:not(:only-of-type),\nz-accordion[variant=\"background\"]:first-of-type:not(:only-of-type)::part(summary),\nz-accordion[variant=\"background\"]:first-of-type:not(:only-of-type)::part(content),\nz-accordion[variant=\"background\"][highlight]:first-of-type:not(:only-of-type)::part(summary)::before,\nz-accordion[variant=\"background\"][highlight]:first-of-type:not(:only-of-type)::part(content)::before {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n/* last z-accordion with some sibling z-accordion */\nz-accordion[variant=\"background\"]:last-of-type:not(:only-of-type),\nz-accordion[variant=\"background\"]:last-of-type:not(:only-of-type)::part(summary),\nz-accordion[variant=\"background\"][highlight]:last-of-type:not(:only-of-type)::part(summary)::before,\nz-accordion[variant=\"background\"][highlight]:last-of-type:not(:only-of-type)::part(content)::before {\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n";
+const globalStyles = "@import url(\"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap\");\n@import url(\"https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap\");\n:root {\n  --gray950: #121212;\n  --gray900: #292929;\n  --gray800: #3d3d3d;\n  --gray700: #525252;\n  --gray600: #666;\n  --gray500: #9b9b9b;\n  --gray400: #adadad;\n  --gray300: #c2c2c2;\n  --gray200: #d6d6d6;\n  --gray100: #ebebeb;\n  --gray50: #f6f6f6;\n  --gray25: #fafafa;\n}\n\n:root {\n  --blue950: #001229;\n  --blue900: #001f46;\n  --blue800: #002c63;\n  --blue700: #003981;\n  --blue600: #0047a0;\n  --blue500: #0056c1;\n  --blue400: #2e76ce;\n  --blue300: #5893db;\n  --blue200: #82b0e7;\n  --blue100: #accdf3;\n  --blue50: #d6eaff;\n  --blue25: #ebf5ff;\n}\n\n:root {\n  --green950: #19200a;\n  --green900: #22330a;\n  --green800: #2b4808;\n  --green700: #355d06;\n  --green600: #407305;\n  --green500: #568818;\n  --green400: #6f9d2f;\n  --green300: #8ab14a;\n  --green200: #a6c66b;\n  --green100: #c3da92;\n  --green50: #effce0;\n  --green25: #f5fdec;\n}\n\n:root {\n  --yellow950: #33280f;\n  --yellow900: #5c4615;\n  --yellow800: #85641a;\n  --yellow700: #ab8125;\n  --yellow600: #d09e30;\n  --yellow500: #f6bb3b;\n  --yellow400: #f9c852;\n  --yellow300: #fbd468;\n  --yellow200: #fee17f;\n  --yellow150: #ffde72;\n  --yellow100: #ffea91;\n  --yellow50: #fbf4e6;\n  --yellow25: #fcf7ed;\n}\n\n:root {\n  --red950: #2a0005;\n  --red900: #4c0009;\n  --red800: #6f000d;\n  --red700: #940111;\n  --red600: #ba0115;\n  --red500: #e4011c;\n  --red400: #ec5163;\n  --red300: #f07a88;\n  --red200: #f49fa9;\n  --red100: #f8bfc4;\n  --red50: #fdeeed;\n  --red25: #fef6f6;\n}\n\n:root {\n  --avatar-C01: #99005b;\n  --avatar-C02: #b01300;\n  --avatar-C03: #e62200;\n  --avatar-C04: #7c4000;\n  --avatar-C05: #c25600;\n  --avatar-C06: #6e6d6d;\n  --avatar-C07: #667d00;\n  --avatar-C08: #008741;\n  --avatar-C09: #00612f;\n  --avatar-C10: #007d8a;\n  --avatar-C11: #007db3;\n  --avatar-C12: #00548c;\n  --avatar-C13: #0028b1;\n  --avatar-C14: #00019c;\n  --avatar-C15: #6400ee;\n  --avatar-C16: #5f3fff;\n  --avatar-C17: #8b00a5;\n  --avatar-C18: #b200ff;\n  --avatar-C19: #c700d6;\n}\n\n:root {\n  --subject-art: #7b7b06;\n  --subject-art_image: #7b7b06;\n  --subject-biology: #438454;\n  --subject-chemistry: #ba5191;\n  --subject-civics: #000080;\n  --subject-communication: #1777d5;\n  --subject-computer_science: #10893e;\n  --subject-earth_science: #8d3eb2;\n  --subject-economic: #004080;\n  --subject-english: #c25353;\n  --subject-food_science: #38846b;\n  --subject-french: #c25353;\n  --subject-geography: #378092;\n  --subject-german: #c25353;\n  --subject-grammar: #be5926;\n  --subject-graphic: #8e7406;\n  --subject-greek: #37818a;\n  --subject-history: #8b572a;\n  --subject-law: #b90000;\n  --subject-latin: #8b4513;\n  --subject-math: #266997;\n  --subject-natural_science: #318473;\n  --subject-philosophy: #5a189a;\n  --subject-physics: #4a7ba4;\n  --subject-science_middle_school: #3a7922;\n  --subject-spanish: #c25353;\n  --subject-technology: #138473;\n  --subject-topography: #ac6604;\n  --subject-technique: #752771;\n}\n\n\n\n:root {\n  --color-black: #000;\n  --color-white: #fff;\n}\n\n:root {\n  /* font-family */\n  --font-family-sans: \"IBM Plex Sans\", sans-serif;\n  --font-family-serif: \"IBM Plex Serif\", serif;\n\n  /* font-weight */\n  --font-lt: 300;\n  --font-rg: 400;\n  --font-sb: 600;\n  --font-bd: 700;\n\n  /* font-size type scale */\n  --font-size-1: 0.75rem; /* 12px */\n  --font-size-2: 0.875rem; /* 14px */\n  --font-size-3: 1rem; /* assuming 16px */\n  --font-size-4: 1.125rem; /* 18px */\n  --font-size-5: 1.25rem; /* 20px */\n  --font-size-6: 1.5rem; /* 24px */\n  --font-size-7: 1.75rem; /* 28px */\n  --font-size-8: 2rem; /* 32px */\n  --font-size-9: 2.25rem; /* 36px */\n  --font-size-10: 2.625rem; /* 42px */\n  --font-size-11: 3rem; /* 48px */\n  --font-size-12: 3.375rem; /* 54px */\n  --font-size-13: 3.75rem; /* 60px */\n  --font-size-14: 4.25rem; /* 68px */\n  --font-size-15: 4.75rem; /* 76px */\n  --font-size-16: 5.25rem; /* 84px */\n  --font-size-17: 5.75rem; /* 92px */\n\n  /* CSS props to use with the `font` shorthand property */\n  --section-title-1: var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);\n  --section-title-2: var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);\n  --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n  --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n  --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n  --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n  --heading-1: var(--font-rg) var(--font-size-7) / 1.28 var(--font-family-sans);\n  --heading-1-serif: var(--font-rg) var(--font-size-7) / 1.28 var(--font-family-serif);\n  --heading-1-sb: var(--font-sb) var(--font-size-7) / 1.28 var(--font-family-sans);\n  --heading-1-sb-serif: var(--font-sb) var(--font-size-7) / 1.28 var(--font-family-serif);\n  --heading-1-lt: var(--font-lt) var(--font-size-7) / 1.28 var(--font-family-sans);\n  --heading-1-lt-serif: var(--font-lt) var(--font-size-7) / 1.28 var(--font-family-serif);\n  --heading-2: var(--font-rg) var(--font-size-6) / 1.333 var(--font-family-sans);\n  --heading-2-serif: var(--font-rg) var(--font-size-6) / 1.333 var(--font-family-serif);\n  --heading-2-sb: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-sans);\n  --heading-2-sb-serif: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n  --heading-2-lt: var(--font-lt) var(--font-size-6) / 1.333 var(--font-family-sans);\n  --heading-2-lt-serif: var(--font-lt) var(--font-size-6) / 1.333 var(--font-family-serif);\n  --heading-3: var(--font-rg) var(--font-size-6) / 1.333 var(--font-family-sans);\n  --heading-3-serif: var(--font-rg) var(--font-size-6) / 1.333 var(--font-family-serif);\n  --heading-3-sb: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-sans);\n  --heading-3-sb-serif: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n  --heading-3-lt: var(--font-lt) var(--font-size-6) / 1.333 var(--font-family-sans);\n  --heading-3-lt-serif: var(--font-lt) var(--font-size-6) / 1.333 var(--font-family-serif);\n  --heading-4: var(--font-rg) var(--font-size-5) / 1.4 var(--font-family-sans);\n  --heading-4-serif: var(--font-rg) var(--font-size-5) / 1.4 var(--font-family-serif);\n  --heading-4-sb: var(--font-sb) var(--font-size-5) / 1.4 var(--font-family-sans);\n  --heading-4-sb-serif: var(--font-sb) var(--font-size-5) / 1.4 var(--font-family-serif);\n  --heading-4-lt: var(--font-lt) var(--font-size-5) / 1.4 var(--font-family-sans);\n  --heading-4-lt-serif: var(--font-lt) var(--font-size-5) / 1.4 var(--font-family-serif);\n  --body-1: var(--font-rg) var(--font-size-5) / 1.4 var(--font-family-sans);\n  --body-1-serif: var(--font-rg) var(--font-size-5) / 1.4 var(--font-family-serif);\n  --body-1-sb: var(--font-sb) var(--font-size-5) / 1.4 var(--font-family-sans);\n  --body-1-sb-serif: var(--font-sb) var(--font-size-5) / 1.4 var(--font-family-serif);\n  --body-2: var(--font-rg) var(--font-size-4) / 1.5 var(--font-family-sans);\n  --body-2-serif: var(--font-rg) var(--font-size-4) / 1.5 var(--font-family-serif);\n  --body-2-sb: var(--font-sb) var(--font-size-4) / 1.5 var(--font-family-sans);\n  --body-2-sb-serif: var(--font-sb) var(--font-size-4) / 1.5 var(--font-family-serif);\n  --body-3: var(--font-rg) var(--font-size-3) / 1.5 var(--font-family-sans);\n  --body-3-serif: var(--font-rg) var(--font-size-3) / 1.5 var(--font-family-serif);\n  --body-3-sb: var(--font-sb) var(--font-size-3) / 1.5 var(--font-family-sans);\n  --body-3-sb-serif: var(--font-sb) var(--font-size-3) / 1.5 var(--font-family-serif);\n  --body-4: var(--font-rg) var(--font-size-2) / 1.4 var(--font-family-sans);\n  --body-4-serif: var(--font-rg) var(--font-size-2) / 1.4 var(--font-family-serif);\n  --body-4-sb: var(--font-sb) var(--font-size-2) / 1.4 var(--font-family-sans);\n  --body-4-sb-serif: var(--font-sb) var(--font-size-2) / 1.4 var(--font-family-serif);\n  --body-5: var(--font-rg) var(--font-size-1) / 1.333 var(--font-family-sans);\n  --body-5-serif: var(--font-rg) var(--font-size-1) / 1.333 var(--font-family-serif);\n  --body-5-sb: var(--font-sb) var(--font-size-1) / 1.333 var(--font-family-sans);\n  --body-5-sb-serif: var(--font-sb) var(--font-size-1) / 1.333 var(--font-family-serif);\n  --interactive-1: var(--font-rg) var(--font-size-3) / 1.5 var(--font-family-sans);\n  --interactive-1-serif: var(--font-rg) var(--font-size-3) / 1.5 var(--font-family-serif);\n  --interactive-1-sb: var(--font-sb) var(--font-size-3) / 1.5 var(--font-family-sans);\n  --interactive-1-sb-serif: var(--font-sb) var(--font-size-3) / 1.5 var(--font-family-serif);\n  --interactive-2: var(--font-rg) var(--font-size-2) / 1.4 var(--font-family-sans);\n  --interactive-2-serif: var(--font-rg) var(--font-size-2) / 1.4 var(--font-family-serif);\n  --interactive-2-sb: var(--font-sb) var(--font-size-2) / 1.4 var(--font-family-sans);\n  --interactive-2-sb-serif: var(--font-sb) var(--font-size-2) / 1.4 var(--font-family-serif);\n  --interactive-3: var(--font-rg) var(--font-size-1) / 1.333 var(--font-family-sans);\n  --interactive-3-serif: var(--font-rg) var(--font-size-1) / 1.333 var(--font-family-serif);\n  --interactive-3-sb: var(--font-sb) var(--font-size-1) / 1.333 var(--font-family-sans);\n  --interactive-3-sb-serif: var(--font-sb) var(--font-size-1) / 1.333 var(--font-family-serif);\n  --helper: italic var(--font-rg) var(--font-size-1) / 1.333 var(--font-family-sans);\n  --helper-serif: italic var(--font-rg) var(--font-size-1) / 1.333 var(--font-family-serif);\n  --helper-sb: italic var(--font-sb) var(--font-size-1) / 1.333 var(--font-family-sans);\n  --helper-sb-serif: italic var(--font-sb) var(--font-size-1) / 1.333 var(--font-family-serif);\n}\n\n@media (min-width: 1152px) {\n  :root {\n    --heading-1: var(--font-rg) var(--font-size-8) / 1.25 var(--font-family-sans);\n    --heading-1-serif: var(--font-rg) var(--font-size-8) / 1.25 var(--font-family-serif);\n    --heading-1-sb: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-sans);\n    --heading-1-sb-serif: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n    --heading-1-lt: var(--font-lt) var(--font-size-8) / 1.25 var(--font-family-sans);\n    --heading-1-lt-serif: var(--font-lt) var(--font-size-8) / 1.25 var(--font-family-serif);\n    --heading-2: var(--font-rg) var(--font-size-7) / 1.28 var(--font-family-sans);\n    --heading-2-serif: var(--font-rg) var(--font-size-7) / 1.28 var(--font-family-serif);\n    --heading-2-sb: var(--font-sb) var(--font-size-7) / 1.28 var(--font-family-sans);\n    --heading-2-sb-serif: var(--font-sb) var(--font-size-7) / 1.28 var(--font-family-serif);\n    --heading-2-lt: var(--font-lt) var(--font-size-7) / 1.28 var(--font-family-sans);\n    --heading-2-lt-serif: var(--font-lt) var(--font-size-7) / 1.28 var(--font-family-serif);\n  }\n}\n\n/* Typography classes */\n.heading-1,\n.heading-1-sb,\n.heading-1-lt,\n.heading-1-serif,\n.heading-1-sb-serif,\n.heading-1-lt-serif {\n  font-size: var(--font-size-7);\n  font-weight: var(--font-rg);\n  line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt,\n.heading-2-serif,\n.heading-2-sb-serif,\n.heading-2-lt-serif {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt,\n.heading-3-serif,\n.heading-3-sb-serif,\n.heading-3-lt-serif {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt,\n.heading-4-serif,\n.heading-4-sb-serif,\n.heading-4-lt-serif {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb,\n.body-1-serif,\n.body-1-sb-serif {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb,\n.body-2-serif,\n.body-2-sb-serif {\n  font-size: var(--font-size-4);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb,\n.body-3-serif,\n.body-3-sb-serif {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb,\n.body-4-serif,\n.body-4-sb-serif {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb,\n.body-5-serif,\n.body-5-sb-serif {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb,\n.interactive-1-serif,\n.interactive-1-sb-serif {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb,\n.interactive-2-serif,\n.interactive-2-sb-serif {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb,\n.interactive-3-serif,\n.interactive-3-sb-serif {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.helper,\n.helper-sb,\n.helper-serif,\n.helper-sb-serif {\n  font-size: var(--font-size-1);\n  font-style: italic;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n/* section title */\n.section-title-1 {\n  font: var(--section-title-1);\n}\n\n.section-title-2 {\n  font: var(--section-title-2);\n}\n\n.section-title-3 {\n  font: var(--section-title-3);\n}\n\n.section-title-4 {\n  font: var(--section-title-4);\n}\n\n.section-title-5 {\n  font: var(--section-title-5);\n}\n\n.section-title-6 {\n  font: var(--section-title-6);\n}\n\n/* heading-1/2 for desktop and wide viewports */\n@media (min-width: 1152px) {\n  .heading-1,\n  .heading-1-sb,\n  .heading-1-lt,\n  .heading-1-serif,\n  .heading-1-sb-serif,\n  .heading-1-lt-serif {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .heading-2,\n  .heading-2-sb,\n  .heading-2-lt,\n  .heading-2-serif,\n  .heading-2-sb-serif,\n  .heading-2-lt-serif {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n}\n\n/* viewport classes */\n@media (max-width: 767px) {\n  .mobile-heading-1,\n  .mobile-heading-1-sb,\n  .mobile-heading-1-lt,\n  .mobile-heading-1-serif,\n  .mobile-heading-1-sb-serif,\n  .mobile-heading-1-lt-serif {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .mobile-heading-2,\n  .mobile-heading-2-sb,\n  .mobile-heading-2-lt,\n  .mobile-heading-2-serif,\n  .mobile-heading-2-sb-serif,\n  .mobile-heading-2-lt-serif {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-3,\n  .mobile-heading-3-sb,\n  .mobile-heading-3-lt,\n  .mobile-heading-3-serif,\n  .mobile-heading-3-sb-serif,\n  .mobile-heading-3-lt-serif {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-4,\n  .mobile-heading-4-sb,\n  .mobile-heading-4-lt,\n  .mobile-heading-4-serif,\n  .mobile-heading-4-sb-serif,\n  .mobile-heading-4-lt-serif {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-1,\n  .mobile-body-1-sb,\n  .mobile-body-1-serif,\n  .mobile-body-1-sb-serif {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-2,\n  .mobile-body-2-sb,\n  .mobile-body-2-serif,\n  .mobile-body-2-sb-serif {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-3,\n  .mobile-body-3-sb,\n  .mobile-body-3-serif,\n  .mobile-body-3-sb-serif {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-4,\n  .mobile-body-4-sb,\n  .mobile-body-4-serif,\n  .mobile-body-4-sb-serif {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-body-5,\n  .mobile-body-5-sb,\n  .mobile-body-5-serif,\n  .mobile-body-5-sb-serif {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-interactive-1,\n  .mobile-interactive-1-sb,\n  .mobile-interactive-1-serif,\n  .mobile-interactive-1-sb-serif {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-interactive-2,\n  .mobile-interactive-2-sb,\n  .mobile-interactive-2-serif,\n  .mobile-interactive-2-sb-serif {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-interactive-3,\n  .mobile-interactive-3-sb,\n  .mobile-interactive-3-serif,\n  .mobile-interactive-3-sb-serif {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .mobile-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .mobile-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .mobile-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .mobile-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .mobile-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .mobile-heading-1-lt,\n  .mobile-heading-2-lt,\n  .mobile-heading-3-lt,\n  .mobile-heading-4-lt,\n  .mobile-heading-1-lt-serif,\n  .mobile-heading-2-lt-serif,\n  .mobile-heading-3-lt-serif,\n  .mobile-heading-4-lt-serif {\n    font-weight: var(--font-lt);\n  }\n\n  .mobile-heading-1-sb,\n  .mobile-heading-2-sb,\n  .mobile-heading-3-sb,\n  .mobile-heading-4-sb,\n  .mobile-body-1-sb,\n  .mobile-body-2-sb,\n  .mobile-body-3-sb,\n  .mobile-body-4-sb,\n  .mobile-body-5-sb,\n  .mobile-interactive-1-sb,\n  .mobile-interactive-2-sb,\n  .mobile-interactive-3-sb,\n  .mobile-heading-1-sb-serif,\n  .mobile-heading-2-sb-serif,\n  .mobile-heading-3-sb-serif,\n  .mobile-heading-4-sb-serif,\n  .mobile-body-1-sb-serif,\n  .mobile-body-2-sb-serif,\n  .mobile-body-3-sb-serif,\n  .mobile-body-4-sb-serif,\n  .mobile-body-5-sb-serif,\n  .mobile-interactive-1-sb-serif,\n  .mobile-interactive-2-sb-serif,\n  .mobile-interactive-3-sb-serif {\n    font-weight: var(--font-sb);\n  }\n\n  .mobile-heading-1-serif,\n  .mobile-heading-1-sb-serif,\n  .mobile-heading-1-lt-serif,\n  .mobile-heading-2-serif,\n  .mobile-heading-2-sb-serif,\n  .mobile-heading-2-lt-serif,\n  .mobile-heading-3-serif,\n  .mobile-heading-3-sb-serif,\n  .mobile-heading-3-lt-serif,\n  .mobile-heading-4-serif,\n  .mobile-heading-4-sb-serif,\n  .mobile-heading-4-lt-serif,\n  .mobile-body-1-serif,\n  .mobile-body-1-sb-serif,\n  .mobile-body-2-serif,\n  .mobile-body-2-sb-serif,\n  .mobile-body-3-serif,\n  .mobile-body-3-sb-serif,\n  .mobile-body-4-serif,\n  .mobile-body-4-sb-serif,\n  .mobile-body-5-serif,\n  .mobile-body-5-sb-serif,\n  .mobile-interactive-1-serif,\n  .mobile-interactive-1-sb-serif,\n  .mobile-interactive-2-serif,\n  .mobile-interactive-2-sb-serif,\n  .mobile-interactive-3-serif,\n  .mobile-interactive-3-sb-serif {\n    font-family: var(--font-family-serif);\n  }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n  .tablet-heading-1,\n  .tablet-heading-1-sb,\n  .tablet-heading-1-lt,\n  .tablet-heading-1-serif,\n  .tablet-heading-1-sb-serif,\n  .tablet-heading-1-lt-serif {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .tablet-heading-2,\n  .tablet-heading-2-sb,\n  .tablet-heading-2-lt,\n  .tablet-heading-2-serif,\n  .tablet-heading-2-sb-serif,\n  .tablet-heading-2-lt-serif {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-3,\n  .tablet-heading-3-sb,\n  .tablet-heading-3-lt,\n  .tablet-heading-3-serif,\n  .tablet-heading-3-sb-serif,\n  .tablet-heading-3-lt-serif {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-4,\n  .tablet-heading-4-sb,\n  .tablet-heading-4-lt,\n  .tablet-heading-4-serif,\n  .tablet-heading-4-sb-serif,\n  .tablet-heading-4-lt-serif {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-1,\n  .tablet-body-1-sb,\n  .tablet-body-1-serif,\n  .tablet-body-1-sb-serif {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-2,\n  .tablet-body-2-sb,\n  .tablet-body-2-serif,\n  .tablet-body-2-sb-serif {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-3,\n  .tablet-body-3-sb,\n  .tablet-body-3-serif,\n  .tablet-body-3-sb-serif {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-4,\n  .tablet-body-4-sb,\n  .tablet-body-4-serif,\n  .tablet-body-4-sb-serif {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-body-5,\n  .tablet-body-5-sb,\n  .tablet-body-5-serif,\n  .tablet-body-5-sb-serif {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-interactive-1,\n  .tablet-interactive-1-sb,\n  .tablet-interactive-1-serif,\n  .tablet-interactive-1-sb-serif {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-interactive-2,\n  .tablet-interactive-2-sb,\n  .tablet-interactive-2-serif,\n  .tablet-interactive-2-sb-serif {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-interactive-3,\n  .tablet-interactive-3-sb,\n  .tablet-interactive-3-serif,\n  .tablet-interactive-3-sb-serif {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .tablet-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .tablet-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .tablet-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .tablet-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .tablet-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .tablet-heading-1-lt,\n  .tablet-heading-2-lt,\n  .tablet-heading-3-lt,\n  .tablet-heading-4-lt,\n  .tablet-heading-1-lt-serif,\n  .tablet-heading-2-lt-serif,\n  .tablet-heading-3-lt-serif,\n  .tablet-heading-4-lt-serif {\n    font-weight: var(--font-lt);\n  }\n\n  .tablet-heading-1-sb,\n  .tablet-heading-2-sb,\n  .tablet-heading-3-sb,\n  .tablet-heading-4-sb,\n  .tablet-body-1-sb,\n  .tablet-body-2-sb,\n  .tablet-body-3-sb,\n  .tablet-body-4-sb,\n  .tablet-body-5-sb,\n  .tablet-interactive-1-sb,\n  .tablet-interactive-2-sb,\n  .tablet-interactive-3-sb,\n  .tablet-heading-1-sb-serif,\n  .tablet-heading-2-sb-serif,\n  .tablet-heading-3-sb-serif,\n  .tablet-heading-4-sb-serif,\n  .tablet-body-1-sb-serif,\n  .tablet-body-2-sb-serif,\n  .tablet-body-3-sb-serif,\n  .tablet-body-4-sb-serif,\n  .tablet-body-5-sb-serif,\n  .tablet-interactive-1-sb-serif,\n  .tablet-interactive-2-sb-serif,\n  .tablet-interactive-3-sb-serif {\n    font-weight: var(--font-sb);\n  }\n\n  .tablet-heading-1-serif,\n  .tablet-heading-1-sb-serif,\n  .tablet-heading-1-lt-serif,\n  .tablet-heading-2-serif,\n  .tablet-heading-2-sb-serif,\n  .tablet-heading-2-lt-serif,\n  .tablet-heading-3-serif,\n  .tablet-heading-3-sb-serif,\n  .tablet-heading-3-lt-serif,\n  .tablet-heading-4-serif,\n  .tablet-heading-4-sb-serif,\n  .tablet-heading-4-lt-serif,\n  .tablet-body-1-serif,\n  .tablet-body-1-sb-serif,\n  .tablet-body-2-serif,\n  .tablet-body-2-sb-serif,\n  .tablet-body-3-serif,\n  .tablet-body-3-sb-serif,\n  .tablet-body-4-serif,\n  .tablet-body-4-sb-serif,\n  .tablet-body-5-serif,\n  .tablet-body-5-sb-serif,\n  .tablet-interactive-1-serif,\n  .tablet-interactive-1-sb-serif,\n  .tablet-interactive-2-serif,\n  .tablet-interactive-2-sb-serif,\n  .tablet-interactive-3-serif,\n  .tablet-interactive-3-sb-serif {\n    font-family: var(--font-family-serif);\n  }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n  .desktop-heading-1,\n  .desktop-heading-1-sb,\n  .desktop-heading-1-lt,\n  .desktop-heading-1-serif,\n  .desktop-heading-1-sb-serif,\n  .desktop-heading-1-lt-serif {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .desktop-heading-2,\n  .desktop-heading-2-sb,\n  .desktop-heading-2-lt,\n  .desktop-heading-2-serif,\n  .desktop-heading-2-sb-serif,\n  .desktop-heading-2-lt-serif {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .desktop-heading-3,\n  .desktop-heading-3-sb,\n  .desktop-heading-3-lt,\n  .desktop-heading-3-serif,\n  .desktop-heading-3-sb-serif,\n  .desktop-heading-3-lt-serif {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .desktop-heading-4,\n  .desktop-heading-4-sb,\n  .desktop-heading-4-lt,\n  .desktop-heading-4-serif,\n  .desktop-heading-4-sb-serif,\n  .desktop-heading-4-lt-serif {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-1,\n  .desktop-body-1-sb,\n  .desktop-body-1-serif,\n  .desktop-body-1-sb-serif {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-2,\n  .desktop-body-2-sb,\n  .desktop-body-2-serif,\n  .desktop-body-2-sb-serif {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-3,\n  .desktop-body-3-sb,\n  .desktop-body-3-serif,\n  .desktop-body-3-sb-serif {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-4,\n  .desktop-body-4-sb,\n  .desktop-body-4-serif,\n  .desktop-body-4-sb-serif {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-body-5,\n  .desktop-body-5-sb,\n  .desktop-body-5-serif,\n  .desktop-body-5-sb-serif {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-interactive-1,\n  .desktop-interactive-1-sb,\n  .desktop-interactive-1-serif,\n  .desktop-interactive-1-sb-serif {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-interactive-2,\n  .desktop-interactive-2-sb,\n  .desktop-interactive-2-serif,\n  .desktop-interactive-2-sb-serif {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-interactive-3,\n  .desktop-interactive-3-sb,\n  .desktop-interactive-3-serif,\n  .desktop-interactive-3-sb-serif {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .desktop-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .desktop-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .desktop-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .desktop-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .desktop-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .desktop-heading-1-lt,\n  .desktop-heading-2-lt,\n  .desktop-heading-3-lt,\n  .desktop-heading-4-lt,\n  .desktop-heading-1-lt-serif,\n  .desktop-heading-2-lt-serif,\n  .desktop-heading-3-lt-serif,\n  .desktop-heading-4-lt-serif {\n    font-weight: var(--font-lt);\n  }\n\n  .desktop-heading-1-sb,\n  .desktop-heading-2-sb,\n  .desktop-heading-3-sb,\n  .desktop-heading-4-sb,\n  .desktop-body-1-sb,\n  .desktop-body-2-sb,\n  .desktop-body-3-sb,\n  .desktop-body-4-sb,\n  .desktop-body-5-sb,\n  .desktop-interactive-1-sb,\n  .desktop-interactive-2-sb,\n  .desktop-interactive-3-sb,\n  .desktop-heading-1-sb-serif,\n  .desktop-heading-2-sb-serif,\n  .desktop-heading-3-sb-serif,\n  .desktop-heading-4-sb-serif,\n  .desktop-body-1-sb-serif,\n  .desktop-body-2-sb-serif,\n  .desktop-body-3-sb-serif,\n  .desktop-body-4-sb-serif,\n  .desktop-body-5-sb-serif,\n  .desktop-interactive-1-sb-serif,\n  .desktop-interactive-2-sb-serif,\n  .desktop-interactive-3-sb-serif {\n    font-weight: var(--font-sb);\n  }\n\n  .desktop-heading-1-serif,\n  .desktop-heading-1-sb-serif,\n  .desktop-heading-1-lt-serif,\n  .desktop-heading-2-serif,\n  .desktop-heading-2-sb-serif,\n  .desktop-heading-2-lt-serif,\n  .desktop-heading-3-serif,\n  .desktop-heading-3-sb-serif,\n  .desktop-heading-3-lt-serif,\n  .desktop-heading-4-serif,\n  .desktop-heading-4-sb-serif,\n  .desktop-heading-4-lt-serif,\n  .desktop-body-1-serif,\n  .desktop-body-1-sb-serif,\n  .desktop-body-2-serif,\n  .desktop-body-2-sb-serif,\n  .desktop-body-3-serif,\n  .desktop-body-3-sb-serif,\n  .desktop-body-4-serif,\n  .desktop-body-4-sb-serif,\n  .desktop-body-5-serif,\n  .desktop-body-5-sb-serif,\n  .desktop-interactive-1-serif,\n  .desktop-interactive-1-sb-serif,\n  .desktop-interactive-2-serif,\n  .desktop-interactive-2-sb-serif,\n  .desktop-interactive-3-serif,\n  .desktop-interactive-3-sb-serif {\n    font-family: var(--font-family-serif);\n  }\n}\n\n@media (min-width: 1366px) {\n  .wide-heading-1,\n  .wide-heading-1-sb,\n  .wide-heading-1-lt,\n  .wide-heading-1-serif,\n  .wide-heading-1-sb-serif,\n  .wide-heading-1-lt-serif {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .wide-heading-2,\n  .wide-heading-2-sb,\n  .wide-heading-2-lt,\n  .wide-heading-2-serif,\n  .wide-heading-2-sb-serif,\n  .wide-heading-2-lt-serif {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .wide-heading-3,\n  .wide-heading-3-sb,\n  .wide-heading-3-lt,\n  .wide-heading-3-serif,\n  .wide-heading-3-sb-serif,\n  .wide-heading-3-lt-serif {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .wide-heading-4,\n  .wide-heading-4-sb,\n  .wide-heading-4-lt,\n  .wide-heading-4-serif,\n  .wide-heading-4-sb-serif,\n  .wide-heading-4-lt-serif {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-1,\n  .wide-body-1-sb,\n  .wide-body-1-serif,\n  .wide-body-1-sb-serif {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-2,\n  .wide-body-2-sb,\n  .wide-body-2-serif,\n  .wide-body-2-sb-serif {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-3,\n  .wide-body-3-sb,\n  .wide-body-3-serif,\n  .wide-body-3-sb-serif {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-4,\n  .wide-body-4-sb,\n  .wide-body-4-serif,\n  .wide-body-4-sb-serif {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-body-5,\n  .wide-body-5-sb,\n  .wide-body-5-serif,\n  .wide-body-5-sb-serif {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-interactive-1,\n  .wide-interactive-1-sb,\n  .wide-interactive-1-serif,\n  .wide-interactive-1-sb-serif {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-interactive-2,\n  .wide-interactive-2-sb,\n  .wide-interactive-2-serif,\n  .wide-interactive-2-sb-serif {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-interactive-3,\n  .wide-interactive-3-sb,\n  .wide-interactive-3-serif,\n  .wide-interactive-3-sb-serif {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .wide-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .wide-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .wide-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .wide-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .wide-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .wide-heading-1-lt,\n  .wide-heading-2-lt,\n  .wide-heading-3-lt,\n  .wide-heading-4-lt,\n  .wide-heading-1-lt-serif,\n  .wide-heading-2-lt-serif,\n  .wide-heading-3-lt-serif,\n  .wide-heading-4-lt-serif {\n    font-weight: var(--font-lt);\n  }\n\n  .wide-heading-1-sb,\n  .wide-heading-2-sb,\n  .wide-heading-3-sb,\n  .wide-heading-4-sb,\n  .wide-body-1-sb,\n  .wide-body-2-sb,\n  .wide-body-3-sb,\n  .wide-body-4-sb,\n  .wide-body-5-sb,\n  .wide-interactive-1-sb,\n  .wide-interactive-2-sb,\n  .wide-interactive-3-sb,\n  .wide-heading-1-sb-serif,\n  .wide-heading-2-sb-serif,\n  .wide-heading-3-sb-serif,\n  .wide-heading-4-sb-serif,\n  .wide-body-1-sb-serif,\n  .wide-body-2-sb-serif,\n  .wide-body-3-sb-serif,\n  .wide-body-4-sb-serif,\n  .wide-body-5-sb-serif,\n  .wide-interactive-1-sb-serif,\n  .wide-interactive-2-sb-serif,\n  .wide-interactive-3-sb-serif {\n    font-weight: var(--font-sb);\n  }\n\n  .wide-heading-1-serif,\n  .wide-heading-1-sb-serif,\n  .wide-heading-1-lt-serif,\n  .wide-heading-2-serif,\n  .wide-heading-2-sb-serif,\n  .wide-heading-2-lt-serif,\n  .wide-heading-3-serif,\n  .wide-heading-3-sb-serif,\n  .wide-heading-3-lt-serif,\n  .wide-heading-4-serif,\n  .wide-heading-4-sb-serif,\n  .wide-heading-4-lt-serif,\n  .wide-body-1-serif,\n  .wide-body-1-sb-serif,\n  .wide-body-2-serif,\n  .wide-body-2-sb-serif,\n  .wide-body-3-serif,\n  .wide-body-3-sb-serif,\n  .wide-body-4-serif,\n  .wide-body-4-sb-serif,\n  .wide-body-5-serif,\n  .wide-body-5-sb-serif,\n  .wide-interactive-1-serif,\n  .wide-interactive-1-sb-serif,\n  .wide-interactive-2-serif,\n  .wide-interactive-2-sb-serif,\n  .wide-interactive-3-serif,\n  .wide-interactive-3-sb-serif {\n    font-family: var(--font-family-serif);\n  }\n}\n\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt,\n.heading-1-lt-serif,\n.heading-2-lt-serif,\n.heading-3-lt-serif,\n.heading-4-lt-serif {\n  font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb,\n.heading-1-sb-serif,\n.heading-2-sb-serif,\n.heading-3-sb-serif,\n.heading-4-sb-serif,\n.body-1-sb-serif,\n.body-2-sb-serif,\n.body-3-sb-serif,\n.body-4-sb-serif,\n.body-5-sb-serif,\n.interactive-1-sb-serif,\n.interactive-2-sb-serif,\n.interactive-3-sb-serif,\n.helper-sb-serif {\n  font-weight: var(--font-sb);\n}\n\n.heading-1-serif,\n.heading-1-sb-serif,\n.heading-1-lt-serif,\n.heading-2-serif,\n.heading-2-sb-serif,\n.heading-2-lt-serif,\n.heading-3-serif,\n.heading-3-sb-serif,\n.heading-3-lt-serif,\n.heading-4-serif,\n.heading-4-sb-serif,\n.heading-4-lt-serif,\n.body-1-serif,\n.body-1-sb-serif,\n.body-2-serif,\n.body-2-sb-serif,\n.body-3-serif,\n.body-3-sb-serif,\n.body-4-serif,\n.body-4-sb-serif,\n.body-5-serif,\n.body-5-sb-serif,\n.interactive-1-serif,\n.interactive-1-sb-serif,\n.interactive-2-serif,\n.interactive-2-sb-serif,\n.interactive-3-serif,\n.interactive-3-sb-serif,\n.helper-serif,\n.helper-sb-serif {\n  font-family: var(--font-family-serif);\n}\n\n:root {\n  --space-unit: 8px;\n  --space-unit-1: var(--space-unit);\n  --space-unit-2: calc(var(--space-unit) * 2);\n  --space-unit-3: calc(var(--space-unit) * 3);\n  --space-unit-4: calc(var(--space-unit) * 4);\n  --space-unit-5: calc(var(--space-unit) * 5);\n  --space-unit-6: calc(var(--space-unit) * 6);\n  --space-unit-7: calc(var(--space-unit) * 7);\n  --space-unit-8: calc(var(--space-unit) * 8);\n}\n\n/* Margin classes */\n\n.z-m-0 {\n  margin: 0;\n}\n\n.z-m-1 {\n  margin: var(--space-unit-1);\n}\n\n.z-m-2 {\n  margin: var(--space-unit-2);\n}\n\n.z-m-3 {\n  margin: var(--space-unit-3);\n}\n\n.z-m-4 {\n  margin: var(--space-unit-4);\n}\n\n.z-m-5 {\n  margin: var(--space-unit-5);\n}\n\n.z-m-6 {\n  margin: var(--space-unit-6);\n}\n\n.z-m-7 {\n  margin: var(--space-unit-7);\n}\n\n.z-m-8 {\n  margin: var(--space-unit-8);\n}\n\n.z-mx-0 {\n  margin-right: 0;\n  margin-left: 0;\n}\n\n.z-my-0 {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n.z-mx-1 {\n  margin-right: var(--space-unit-1);\n  margin-left: var(--space-unit-1);\n}\n\n.z-my-1 {\n  margin-top: var(--space-unit-1);\n  margin-bottom: var(--space-unit-1);\n}\n\n.z-mx-2 {\n  margin-right: var(--space-unit-2);\n  margin-left: var(--space-unit-2);\n}\n\n.z-my-2 {\n  margin-top: var(--space-unit-2);\n  margin-bottom: var(--space-unit-2);\n}\n\n.z-mx-3 {\n  margin-right: var(--space-unit-3);\n  margin-left: var(--space-unit-3);\n}\n\n.z-my-3 {\n  margin-top: var(--space-unit-3);\n  margin-bottom: var(--space-unit-3);\n}\n\n.z-mx-4 {\n  margin-right: var(--space-unit-4);\n  margin-left: var(--space-unit-4);\n}\n\n.z-my-4 {\n  margin-top: var(--space-unit-4);\n  margin-bottom: var(--space-unit-4);\n}\n\n.z-mx-5 {\n  margin-right: var(--space-unit-5);\n  margin-left: var(--space-unit-5);\n}\n\n.z-my-5 {\n  margin-top: var(--space-unit-5);\n  margin-bottom: var(--space-unit-5);\n}\n\n.z-mx-6 {\n  margin-right: var(--space-unit-6);\n  margin-left: var(--space-unit-6);\n}\n\n.z-my-6 {\n  margin-top: var(--space-unit-6);\n  margin-bottom: var(--space-unit-6);\n}\n\n.z-mx-7 {\n  margin-right: var(--space-unit-7);\n  margin-left: var(--space-unit-7);\n}\n\n.z-my-7 {\n  margin-top: var(--space-unit-7);\n  margin-bottom: var(--space-unit-7);\n}\n\n.z-mx-8 {\n  margin-right: var(--space-unit-8);\n  margin-left: var(--space-unit-8);\n}\n\n.z-my-8 {\n  margin-top: var(--space-unit-8);\n  margin-bottom: var(--space-unit-8);\n}\n\n.z-mt-0 {\n  margin-top: 0;\n}\n\n.z-mr-0 {\n  margin-right: 0;\n}\n\n.z-mb-0 {\n  margin-bottom: 0;\n}\n\n.z-ml-0 {\n  margin-left: 0;\n}\n\n.z-mt-1 {\n  margin-top: var(--space-unit-1);\n}\n\n.z-mr-1 {\n  margin-right: var(--space-unit-1);\n}\n\n.z-mb-1 {\n  margin-bottom: var(--space-unit-1);\n}\n\n.z-ml-1 {\n  margin-left: var(--space-unit-1);\n}\n\n.z-mt-2 {\n  margin-top: var(--space-unit-2);\n}\n\n.z-mr-2 {\n  margin-right: var(--space-unit-2);\n}\n\n.z-mb-2 {\n  margin-bottom: var(--space-unit-2);\n}\n\n.z-ml-2 {\n  margin-left: var(--space-unit-2);\n}\n\n.z-mt-3 {\n  margin-top: var(--space-unit-3);\n}\n\n.z-mr-3 {\n  margin-right: var(--space-unit-3);\n}\n\n.z-mb-3 {\n  margin-bottom: var(--space-unit-3);\n}\n\n.z-ml-3 {\n  margin-left: var(--space-unit-3);\n}\n\n.z-mt-4 {\n  margin-top: var(--space-unit-4);\n}\n\n.z-mr-4 {\n  margin-right: var(--space-unit-4);\n}\n\n.z-mb-4 {\n  margin-bottom: var(--space-unit-4);\n}\n\n.z-ml-4 {\n  margin-left: var(--space-unit-4);\n}\n\n.z-mt-5 {\n  margin-top: var(--space-unit-5);\n}\n\n.z-mr-5 {\n  margin-right: var(--space-unit-5);\n}\n\n.z-mb-5 {\n  margin-bottom: var(--space-unit-5);\n}\n\n.z-ml-5 {\n  margin-left: var(--space-unit-5);\n}\n\n.z-mt-6 {\n  margin-top: var(--space-unit-6);\n}\n\n.z-mr-6 {\n  margin-right: var(--space-unit-6);\n}\n\n.z-mb-6 {\n  margin-bottom: var(--space-unit-6);\n}\n\n.z-ml-6 {\n  margin-left: var(--space-unit-6);\n}\n\n.z-mt-7 {\n  margin-top: var(--space-unit-7);\n}\n\n.z-mr-7 {\n  margin-right: var(--space-unit-7);\n}\n\n.z-mb-7 {\n  margin-bottom: var(--space-unit-7);\n}\n\n.z-ml-7 {\n  margin-left: var(--space-unit-7);\n}\n\n.z-mt-8 {\n  margin-top: var(--space-unit-8);\n}\n\n.z-mr-8 {\n  margin-right: var(--space-unit-8);\n}\n\n.z-mb-8 {\n  margin-bottom: var(--space-unit-8);\n}\n\n.z-ml-8 {\n  margin-left: var(--space-unit-8);\n}\n\n/* Padding classes */\n\n.z-p-0 {\n  padding: 0;\n}\n\n.z-p-1 {\n  padding: var(--space-unit-1);\n}\n\n.z-p-2 {\n  padding: var(--space-unit-2);\n}\n\n.z-p-3 {\n  padding: var(--space-unit-3);\n}\n\n.z-p-4 {\n  padding: var(--space-unit-4);\n}\n\n.z-p-5 {\n  padding: var(--space-unit-5);\n}\n\n.z-p-6 {\n  padding: var(--space-unit-6);\n}\n\n.z-p-7 {\n  padding: var(--space-unit-7);\n}\n\n.z-p-8 {\n  padding: var(--space-unit-8);\n}\n\n.z-px-0 {\n  padding-right: 0;\n  padding-left: 0;\n}\n\n.z-py-0 {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n\n.z-px-1 {\n  padding-right: var(--space-unit-1);\n  padding-left: var(--space-unit-1);\n}\n\n.z-py-1 {\n  padding-top: var(--space-unit-1);\n  padding-bottom: var(--space-unit-1);\n}\n\n.z-px-2 {\n  padding-right: var(--space-unit-2);\n  padding-left: var(--space-unit-2);\n}\n\n.z-py-2 {\n  padding-top: var(--space-unit-2);\n  padding-bottom: var(--space-unit-2);\n}\n\n.z-px-3 {\n  padding-right: var(--space-unit-3);\n  padding-left: var(--space-unit-3);\n}\n\n.z-py-3 {\n  padding-top: var(--space-unit-3);\n  padding-bottom: var(--space-unit-3);\n}\n\n.z-px-4 {\n  padding-right: var(--space-unit-4);\n  padding-left: var(--space-unit-4);\n}\n\n.z-py-4 {\n  padding-top: var(--space-unit-4);\n  padding-bottom: var(--space-unit-4);\n}\n\n.z-px-5 {\n  padding-right: var(--space-unit-5);\n  padding-left: var(--space-unit-5);\n}\n\n.z-py-5 {\n  padding-top: var(--space-unit-5);\n  padding-bottom: var(--space-unit-5);\n}\n\n.z-px-6 {\n  padding-right: var(--space-unit-6);\n  padding-left: var(--space-unit-6);\n}\n\n.z-py-6 {\n  padding-top: var(--space-unit-6);\n  padding-bottom: var(--space-unit-6);\n}\n\n.z-px-7 {\n  padding-right: var(--space-unit-7);\n  padding-left: var(--space-unit-7);\n}\n\n.z-py-7 {\n  padding-top: var(--space-unit-7);\n  padding-bottom: var(--space-unit-7);\n}\n\n.z-px-8 {\n  padding-right: var(--space-unit-8);\n  padding-left: var(--space-unit-8);\n}\n\n.z-py-8 {\n  padding-top: var(--space-unit-8);\n  padding-bottom: var(--space-unit-8);\n}\n\n.z-pt-0 {\n  padding-top: 0;\n}\n\n.z-pr-0 {\n  padding-right: 0;\n}\n\n.z-pb-0 {\n  padding-bottom: 0;\n}\n\n.z-pl-0 {\n  padding-left: 0;\n}\n\n.z-pt-1 {\n  padding-top: var(--space-unit-1);\n}\n\n.z-pr-1 {\n  padding-right: var(--space-unit-1);\n}\n\n.z-pb-1 {\n  padding-bottom: var(--space-unit-1);\n}\n\n.z-pl-1 {\n  padding-left: var(--space-unit-1);\n}\n\n.z-pt-2 {\n  padding-top: var(--space-unit-2);\n}\n\n.z-pr-2 {\n  padding-right: var(--space-unit-2);\n}\n\n.z-pb-2 {\n  padding-bottom: var(--space-unit-2);\n}\n\n.z-pl-2 {\n  padding-left: var(--space-unit-2);\n}\n\n.z-pt-3 {\n  padding-top: var(--space-unit-3);\n}\n\n.z-pr-3 {\n  padding-right: var(--space-unit-3);\n}\n\n.z-pb-3 {\n  padding-bottom: var(--space-unit-3);\n}\n\n.z-pl-3 {\n  padding-left: var(--space-unit-3);\n}\n\n.z-pt-4 {\n  padding-top: var(--space-unit-4);\n}\n\n.z-pr-4 {\n  padding-right: var(--space-unit-4);\n}\n\n.z-pb-4 {\n  padding-bottom: var(--space-unit-4);\n}\n\n.z-pl-4 {\n  padding-left: var(--space-unit-4);\n}\n\n.z-pt-5 {\n  padding-top: var(--space-unit-5);\n}\n\n.z-pr-5 {\n  padding-right: var(--space-unit-5);\n}\n\n.z-pb-5 {\n  padding-bottom: var(--space-unit-5);\n}\n\n.z-pl-5 {\n  padding-left: var(--space-unit-5);\n}\n\n.z-pt-6 {\n  padding-top: var(--space-unit-6);\n}\n\n.z-pr-6 {\n  padding-right: var(--space-unit-6);\n}\n\n.z-pb-6 {\n  padding-bottom: var(--space-unit-6);\n}\n\n.z-pl-6 {\n  padding-left: var(--space-unit-6);\n}\n\n.z-pt-7 {\n  padding-top: var(--space-unit-7);\n}\n\n.z-pr-7 {\n  padding-right: var(--space-unit-7);\n}\n\n.z-pb-7 {\n  padding-bottom: var(--space-unit-7);\n}\n\n.z-pl-7 {\n  padding-left: var(--space-unit-7);\n}\n\n.z-pt-8 {\n  padding-top: var(--space-unit-8);\n}\n\n.z-pr-8 {\n  padding-right: var(--space-unit-8);\n}\n\n.z-pb-8 {\n  padding-bottom: var(--space-unit-8);\n}\n\n.z-pl-8 {\n  padding-left: var(--space-unit-8);\n}\n\n:root {\n  --shadow-color-base: rgb(61 61 61 / 35%);\n  --shadow-inset-2: inset 0 2px 4px 0 var(--shadow-color-base);\n  --shadow-inset-4: inset 0 4px 8px 0 var(--shadow-color-base);\n  --shadow-0: 0 0 0 0 var(--shadow-color-base);\n  --shadow-1: 0 1px 2px 0 var(--shadow-color-base);\n  --shadow-2: 0 2px 4px 0 var(--shadow-color-base);\n  --shadow-3: 0 3px 6px 0 var(--shadow-color-base);\n  --shadow-4: 0 4px 8px 0 var(--shadow-color-base);\n  --shadow-6: 0 6px 12px 0 var(--shadow-color-base);\n  --shadow-8: 0 8px 16px 0 var(--shadow-color-base);\n  --shadow-12: 0 12px 24px 0 var(--shadow-color-base);\n  --shadow-16: 0 16px 32px 0 var(--shadow-color-base);\n  --shadow-24: 0 24px 48px 0 var(--shadow-color-base);\n}\n\n:root {\n  --border-no-radius: 0;\n  --border-size-small: 1px;\n  --border-size-medium: 2px;\n  --border-size-large: 4px;\n  --border-radius-small: 2px;\n  --border-radius: 4px;\n}\n\n:root {\n  --grid-mobile-viewport: 768px;\n  --grid-mobile-column: 4;\n  --grid-mobile-margin: 16px;\n  --grid-mobile-gutter: 16px;\n  --grid-tablet-viewport: 768px;\n  --grid-tablet-column: 8;\n  --grid-tablet-margin: 24px;\n  --grid-tablet-gutter: 24px;\n  --grid-desktop-viewport: 1152px;\n  --grid-desktop-column: 12;\n  --grid-desktop-margin: 24px;\n  --grid-desktop-gutter: 24px;\n  --grid-wide-viewport: 1366px;\n  --grid-wide-column: 12;\n  --grid-wide-margin: 32px;\n  --grid-wide-gutter: 32px;\n  --page-max-width: 1366px;\n\n  /* These variables automatically adapt to the viewport size,\n    that apps don't have to worry about updating the value manually. */\n  --grid-margin: var(--grid-mobile-margin);\n  --grid-gutter: var(--grid-mobile-gutter);\n  --grid-columns: var(--grid-mobile-column);\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n  :root {\n    --grid-margin: var(--grid-tablet-margin);\n    --grid-gutter: var(--grid-tablet-gutter);\n    --grid-columns: var(--grid-tablet-column);\n  }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n  :root {\n    --grid-margin: var(--grid-desktop-margin);\n    --grid-gutter: var(--grid-desktop-gutter);\n    --grid-columns: var(--grid-desktop-column);\n  }\n}\n\n@media (min-width: 1366px) {\n  :root {\n    --grid-margin: var(--grid-wide-margin);\n    --grid-gutter: var(--grid-wide-gutter);\n    --grid-columns: var(--grid-wide-column);\n  }\n}\n\n.z-grid {\n  display: grid;\n  width: 100%;\n  column-gap: var(--grid-gutter);\n  grid-template-columns: repeat(var(--grid-columns), 1fr);\n\n  .col-full {\n    grid-column: 1 / -1;\n  }\n\n  .col-1 {\n    grid-column: span 1;\n  }\n\n  .col-2 {\n    grid-column: span 2;\n  }\n\n  .col-3 {\n    grid-column: span 3;\n  }\n\n  .col-4,\n  .col-5,\n  .col-6,\n  .col-7,\n  .col-8,\n  .col-9,\n  .col-10,\n  .col-11,\n  .col-12 {\n    grid-column: span 4;\n  }\n\n  .col-start-1 {\n    grid-column-start: 1;\n  }\n\n  .col-start-2 {\n    grid-column-start: 2;\n  }\n\n  .col-start-3 {\n    grid-column-start: 3;\n  }\n\n  .col-start-4,\n  .col-start-5,\n  .col-start-6,\n  .col-start-7,\n  .col-start-8,\n  .col-start-9,\n  .col-start-10,\n  .col-start-11,\n  .col-start-12 {\n    grid-column-start: 4;\n  }\n\n  /*\n  .-col-start-1 is intentionally left out\n*/\n\n  .-col-start-2 {\n    grid-column-start: -2;\n  }\n\n  .-col-start-3 {\n    grid-column-start: -3;\n  }\n\n  .-col-start-4 {\n    grid-column-start: -4;\n  }\n\n  .-col-start-5,\n  .-col-start-6,\n  .-col-start-7,\n  .-col-start-8,\n  .-col-start-9,\n  .-col-start-10,\n  .-col-start-11,\n  .-col-start-12,\n  .-col-start-13 {\n    grid-column-start: -5;\n  }\n\n  .col-end-last {\n    grid-column-end: -1;\n  }\n\n  /*\n  .col-end-1 is intentionally left out\n*/\n\n  .col-end-2 {\n    grid-column-end: 2;\n  }\n\n  .col-end-3 {\n    grid-column-end: 3;\n  }\n\n  .col-end-4 {\n    grid-column-end: 4;\n  }\n\n  /*\n  This means \"end this column where column 5 start\",\n  which is the same as saying \"end this column where column 4 end\"\n*/\n  .col-end-5,\n  .col-end-6,\n  .col-end-7,\n  .col-end-8,\n  .col-end-9,\n  .col-end-10,\n  .col-end-11,\n  .col-end-12,\n  .col-end-13 {\n    grid-column-end: 5;\n  }\n\n  .-col-end-1 {\n    grid-column-end: -1;\n  }\n\n  .-col-end-2 {\n    grid-column-end: -2;\n  }\n\n  .-col-end-3 {\n    grid-column-end: -3;\n  }\n\n  .-col-end-4,\n  .-col-end-5,\n  .-col-end-6,\n  .-col-end-7,\n  .-col-end-8,\n  .-col-end-9,\n  .-col-end-10,\n  .-col-end-11,\n  .-col-end-12 {\n    grid-column-end: -4;\n  }\n\n  @media (max-width: 767px) {\n    .mobile-col-full {\n      grid-column: 1 / -1;\n    }\n\n    .mobile-col-1 {\n      grid-column: span 1;\n    }\n\n    .mobile-col-2 {\n      grid-column: span 2;\n    }\n\n    .mobile-col-3 {\n      grid-column: span 3;\n    }\n\n    .mobile-col-4 {\n      grid-column: span 4;\n    }\n  }\n\n  @media (min-width: 768px) {\n    .col-5 {\n      grid-column: span 5;\n    }\n\n    .col-6 {\n      grid-column: span 6;\n    }\n\n    .col-7 {\n      grid-column: span 7;\n    }\n\n    .col-8,\n    .col-9,\n    .col-10,\n    .col-11,\n    .col-12 {\n      grid-column: span 8;\n    }\n\n    .col-start-5 {\n      grid-column-start: 5;\n    }\n\n    .col-start-6 {\n      grid-column-start: 6;\n    }\n\n    .col-start-7 {\n      grid-column-start: 7;\n    }\n\n    .col-start-8,\n    .col-start-9,\n    .col-start-10,\n    .col-start-11,\n    .col-start-12 {\n      grid-column-start: 8;\n    }\n\n    .-col-start-6 {\n      grid-column-start: -6;\n    }\n\n    .-col-start-7 {\n      grid-column-start: -7;\n    }\n\n    .-col-start-8 {\n      grid-column-start: -8;\n    }\n\n    .-col-start-9,\n    .-col-start-10,\n    .-col-start-11,\n    .-col-start-12,\n    .-col-start-13 {\n      grid-column-start: -9;\n    }\n\n    .col-end-6 {\n      grid-column-end: 6;\n    }\n\n    .col-end-7 {\n      grid-column-end: 7;\n    }\n\n    .col-end-8 {\n      grid-column-end: 8;\n    }\n\n    .col-end-9,\n    .col-end-10,\n    .col-end-11,\n    .col-end-12,\n    .col-end-13 {\n      grid-column-end: 9;\n    }\n\n    .-col-end-5 {\n      grid-column-end: -5;\n    }\n\n    .-col-end-6 {\n      grid-column-end: -6;\n    }\n\n    .-col-end-7 {\n      grid-column-end: -7;\n    }\n\n    .-col-end-8,\n    .-col-end-9,\n    .-col-end-10,\n    .-col-end-11,\n    .-col-end-12 {\n      grid-column-end: -8;\n    }\n  }\n\n  @media (min-width: 768px) and (max-width: 1151px) {\n    .tablet-col-full {\n      grid-column: 1 / -1;\n    }\n\n    .tablet-col-1 {\n      grid-column: span 1;\n    }\n\n    .tablet-col-2 {\n      grid-column: span 2;\n    }\n\n    .tablet-col-3 {\n      grid-column: span 3;\n    }\n\n    .tablet-col-4 {\n      grid-column: span 4;\n    }\n\n    .tablet-col-5 {\n      grid-column: span 5;\n    }\n\n    .tablet-col-6 {\n      grid-column: span 6;\n    }\n\n    .tablet-col-7 {\n      grid-column: span 7;\n    }\n\n    .tablet-col-8 {\n      grid-column: span 8;\n    }\n\n    .tablet-col-start-1 {\n      grid-column-start: 1;\n    }\n\n    .tablet-col-start-2 {\n      grid-column-start: 2;\n    }\n\n    .tablet-col-start-3 {\n      grid-column-start: 3;\n    }\n\n    .tablet-col-start-4 {\n      grid-column-start: 4;\n    }\n\n    .tablet-col-start-5 {\n      grid-column-start: 5;\n    }\n\n    .tablet-col-start-6 {\n      grid-column-start: 6;\n    }\n\n    .tablet-col-start-7 {\n      grid-column-start: 7;\n    }\n\n    .tablet-col-start-8 {\n      grid-column-start: 8;\n    }\n\n    .-tablet-col-start-2 {\n      grid-column-start: -2;\n    }\n\n    .-tablet-col-start-3 {\n      grid-column-start: -3;\n    }\n\n    .-tablet-col-start-4 {\n      grid-column-start: -4;\n    }\n\n    .-tablet-col-start-5 {\n      grid-column-start: -5;\n    }\n\n    .-tablet-col-start-6 {\n      grid-column-start: -6;\n    }\n\n    .-tablet-col-start-7 {\n      grid-column-start: -7;\n    }\n\n    .-tablet-col-start-8 {\n      grid-column-start: -8;\n    }\n\n    .tablet-col-end-2 {\n      grid-column-end: 2;\n    }\n\n    .tablet-col-end-3 {\n      grid-column-end: 3;\n    }\n\n    .tablet-col-end-4 {\n      grid-column-end: 4;\n    }\n\n    .tablet-col-end-6 {\n      grid-column-end: 6;\n    }\n\n    .tablet-col-end-7 {\n      grid-column-end: 7;\n    }\n\n    .tablet-col-end-8 {\n      grid-column-end: 8;\n    }\n\n    .tablet-col-end-last {\n      grid-column-end: -1;\n    }\n\n    .-tablet-col-end-1 {\n      grid-column-end: -1;\n    }\n\n    .-tablet-col-end-2 {\n      grid-column-end: -2;\n    }\n\n    .-tablet-col-end-3 {\n      grid-column-end: -3;\n    }\n\n    .-tablet-col-end-4 {\n      grid-column-end: -4;\n    }\n\n    .-tablet-col-end-5 {\n      grid-column-end: -5;\n    }\n\n    .-tablet-col-end-6 {\n      grid-column-end: -6;\n    }\n\n    .-tablet-col-end-7 {\n      grid-column-end: -7;\n    }\n\n    .-tablet-col-end-8 {\n      grid-column-end: -8;\n    }\n  }\n\n  @media (min-width: 1152px) {\n    .col-9 {\n      grid-column: span 9;\n    }\n\n    .col-10 {\n      grid-column: span 10;\n    }\n\n    .col-11 {\n      grid-column: span 11;\n    }\n\n    .col-12 {\n      grid-column: span 12;\n    }\n\n    .col-start-9 {\n      grid-column-start: 9;\n    }\n\n    .col-start-10 {\n      grid-column-start: 10;\n    }\n\n    .col-start-11 {\n      grid-column-start: 11;\n    }\n\n    .col-start-12 {\n      grid-column-start: 12;\n    }\n\n    .-col-start-10 {\n      grid-column-start: -10;\n    }\n\n    .-col-start-11 {\n      grid-column-start: -11;\n    }\n\n    .-col-start-12 {\n      grid-column-start: -12;\n    }\n\n    .-col-start-13 {\n      grid-column-start: -13;\n    }\n\n    .col-end-10 {\n      grid-column-end: 10;\n    }\n\n    .col-end-11 {\n      grid-column-end: 11;\n    }\n\n    .col-end-12 {\n      grid-column-end: 12;\n    }\n\n    .col-end-13 {\n      grid-column-end: 13;\n    }\n\n    .-col-end-9 {\n      grid-column-end: -9;\n    }\n\n    .-col-end-10 {\n      grid-column-end: -10;\n    }\n\n    .-col-end-11 {\n      grid-column-end: -11;\n    }\n\n    .-col-end-12 {\n      grid-column-end: -12;\n    }\n  }\n\n  @media (min-width: 1152px) and (max-width: 1365px) {\n    .desktop-col-full {\n      grid-column: 1 / -1;\n    }\n\n    .desktop-col-1 {\n      grid-column: span 1;\n    }\n\n    .desktop-col-2 {\n      grid-column: span 2;\n    }\n\n    .desktop-col-3 {\n      grid-column: span 3;\n    }\n\n    .desktop-col-4 {\n      grid-column: span 4;\n    }\n\n    .desktop-col-5 {\n      grid-column: span 5;\n    }\n\n    .desktop-col-6 {\n      grid-column: span 6;\n    }\n\n    .desktop-col-7 {\n      grid-column: span 7;\n    }\n\n    .desktop-col-8 {\n      grid-column: span 8;\n    }\n\n    .desktop-col-9 {\n      grid-column: span 9;\n    }\n\n    .desktop-col-10 {\n      grid-column: span 10;\n    }\n\n    .desktop-col-11 {\n      grid-column: span 11;\n    }\n\n    .desktop-col-12 {\n      grid-column: span 12;\n    }\n\n    .desktop-col-start-1 {\n      grid-column-start: 1;\n    }\n\n    .desktop-col-start-2 {\n      grid-column-start: 2;\n    }\n\n    .desktop-col-start-3 {\n      grid-column-start: 3;\n    }\n\n    .desktop-col-start-4 {\n      grid-column-start: 4;\n    }\n\n    .desktop-col-start-5 {\n      grid-column-start: 5;\n    }\n\n    .desktop-col-start-6 {\n      grid-column-start: 6;\n    }\n\n    .desktop-col-start-7 {\n      grid-column-start: 7;\n    }\n\n    .desktop-col-start-8 {\n      grid-column-start: 8;\n    }\n\n    .desktop-col-start-9 {\n      grid-column-start: 9;\n    }\n\n    .desktop-col-start-10 {\n      grid-column-start: 10;\n    }\n\n    .desktop-col-start-11 {\n      grid-column-start: 11;\n    }\n\n    .desktop-col-start-12 {\n      grid-column-start: 12;\n    }\n\n    .-desktop-col-start-2 {\n      grid-column-start: -2;\n    }\n\n    .-desktop-col-start-3 {\n      grid-column-start: -3;\n    }\n\n    .-desktop-col-start-4 {\n      grid-column-start: -4;\n    }\n\n    .-desktop-col-start-5 {\n      grid-column-start: -5;\n    }\n\n    .-desktop-col-start-6 {\n      grid-column-start: -6;\n    }\n\n    .-desktop-col-start-7 {\n      grid-column-start: -7;\n    }\n\n    .-desktop-col-start-8 {\n      grid-column-start: -8;\n    }\n\n    .-desktop-col-start-9 {\n      grid-column-start: -9;\n    }\n\n    .-desktop-col-start-10 {\n      grid-column-start: -10;\n    }\n\n    .-desktop-col-start-11 {\n      grid-column-start: -11;\n    }\n\n    .-desktop-col-start-12 {\n      grid-column-start: -12;\n    }\n\n    .desktop-col-end-2 {\n      grid-column-end: 2;\n    }\n\n    .desktop-col-end-3 {\n      grid-column-end: 3;\n    }\n\n    .desktop-col-end-4 {\n      grid-column-end: 4;\n    }\n\n    .desktop-col-end-6 {\n      grid-column-end: 6;\n    }\n\n    .desktop-col-end-7 {\n      grid-column-end: 7;\n    }\n\n    .desktop-col-end-8 {\n      grid-column-end: 8;\n    }\n\n    .desktop-col-end-9 {\n      grid-column-end: 9;\n    }\n\n    .desktop-col-end-10 {\n      grid-column-end: 10;\n    }\n\n    .desktop-col-end-11 {\n      grid-column-end: 11;\n    }\n\n    .desktop-col-end-12 {\n      grid-column-end: 12;\n    }\n\n    .desktop-col-end-last {\n      grid-column-end: -1;\n    }\n\n    .-desktop-col-end-1 {\n      grid-column-end: -1;\n    }\n\n    .-desktop-col-end-2 {\n      grid-column-end: -2;\n    }\n\n    .-desktop-col-end-3 {\n      grid-column-end: -3;\n    }\n\n    .-desktop-col-end-4 {\n      grid-column-end: -4;\n    }\n\n    .-desktop-col-end-5 {\n      grid-column-end: -5;\n    }\n\n    .-desktop-col-end-6 {\n      grid-column-end: -6;\n    }\n\n    .-desktop-col-end-7 {\n      grid-column-end: -7;\n    }\n\n    .-desktop-col-end-8 {\n      grid-column-end: -8;\n    }\n\n    .-desktop-col-end-9 {\n      grid-column-end: -9;\n    }\n\n    .-desktop-col-end-10 {\n      grid-column-end: -10;\n    }\n\n    .-desktop-col-end-11 {\n      grid-column-end: -11;\n    }\n\n    .-desktop-col-end-12 {\n      grid-column-end: -12;\n    }\n  }\n\n  @media (min-width: 1366px) {\n    .wide-col-full {\n      grid-column: 1 / -1;\n    }\n\n    .wide-col-1 {\n      grid-column: span 1;\n    }\n\n    .wide-col-2 {\n      grid-column: span 2;\n    }\n\n    .wide-col-3 {\n      grid-column: span 3;\n    }\n\n    .wide-col-4 {\n      grid-column: span 4;\n    }\n\n    .wide-col-5 {\n      grid-column: span 5;\n    }\n\n    .wide-col-6 {\n      grid-column: span 6;\n    }\n\n    .wide-col-7 {\n      grid-column: span 7;\n    }\n\n    .wide-col-8 {\n      grid-column: span 8;\n    }\n\n    .wide-col-9 {\n      grid-column: span 9;\n    }\n\n    .wide-col-10 {\n      grid-column: span 10;\n    }\n\n    .wide-col-11 {\n      grid-column: span 11;\n    }\n\n    .wide-col-12 {\n      grid-column: span 12;\n    }\n\n    .wide-col-start-1 {\n      grid-column-start: 1;\n    }\n\n    .wide-col-start-2 {\n      grid-column-start: 2;\n    }\n\n    .wide-col-start-3 {\n      grid-column-start: 3;\n    }\n\n    .wide-col-start-4 {\n      grid-column-start: 4;\n    }\n\n    .wide-col-start-5 {\n      grid-column-start: 5;\n    }\n\n    .wide-col-start-6 {\n      grid-column-start: 6;\n    }\n\n    .wide-col-start-7 {\n      grid-column-start: 7;\n    }\n\n    .wide-col-start-8 {\n      grid-column-start: 8;\n    }\n\n    .wide-col-start-9 {\n      grid-column-start: 9;\n    }\n\n    .wide-col-start-10 {\n      grid-column-start: 10;\n    }\n\n    .wide-col-start-11 {\n      grid-column-start: 11;\n    }\n\n    .wide-col-start-12 {\n      grid-column-start: 12;\n    }\n\n    .-wide-col-start-2 {\n      grid-column-start: -2;\n    }\n\n    .-wide-col-start-3 {\n      grid-column-start: -3;\n    }\n\n    .-wide-col-start-4 {\n      grid-column-start: -4;\n    }\n\n    .-wide-col-start-5 {\n      grid-column-start: -5;\n    }\n\n    .-wide-col-start-6 {\n      grid-column-start: -6;\n    }\n\n    .-wide-col-start-7 {\n      grid-column-start: -7;\n    }\n\n    .-wide-col-start-8 {\n      grid-column-start: -8;\n    }\n\n    .-wide-col-start-9 {\n      grid-column-start: -9;\n    }\n\n    .-wide-col-start-10 {\n      grid-column-start: -10;\n    }\n\n    .-wide-col-start-11 {\n      grid-column-start: -11;\n    }\n\n    .-wide-col-start-12 {\n      grid-column-start: -12;\n    }\n\n    .wide-col-end-2 {\n      grid-column-end: 2;\n    }\n\n    .wide-col-end-3 {\n      grid-column-end: 3;\n    }\n\n    .wide-col-end-4 {\n      grid-column-end: 4;\n    }\n\n    .wide-col-end-6 {\n      grid-column-end: 6;\n    }\n\n    .wide-col-end-7 {\n      grid-column-end: 7;\n    }\n\n    .wide-col-end-8 {\n      grid-column-end: 8;\n    }\n\n    .wide-col-end-9 {\n      grid-column-end: 9;\n    }\n\n    .wide-col-end-10 {\n      grid-column-end: 10;\n    }\n\n    .wide-col-end-11 {\n      grid-column-end: 11;\n    }\n\n    .wide-col-end-12 {\n      grid-column-end: 12;\n    }\n\n    .wide-col-end-last {\n      grid-column-end: -1;\n    }\n\n    .-wide-col-end-1 {\n      grid-column-end: -1;\n    }\n\n    .-wide-col-end-2 {\n      grid-column-end: -2;\n    }\n\n    .-wide-col-end-3 {\n      grid-column-end: -3;\n    }\n\n    .-wide-col-end-4 {\n      grid-column-end: -4;\n    }\n\n    .-wide-col-end-5 {\n      grid-column-end: -5;\n    }\n\n    .-wide-col-end-6 {\n      grid-column-end: -6;\n    }\n\n    .-wide-col-end-7 {\n      grid-column-end: -7;\n    }\n\n    .-wide-col-end-8 {\n      grid-column-end: -8;\n    }\n\n    .-wide-col-end-9 {\n      grid-column-end: -9;\n    }\n\n    .-wide-col-end-10 {\n      grid-column-end: -10;\n    }\n\n    .-wide-col-end-11 {\n      grid-column-end: -11;\n    }\n\n    .-wide-col-end-12 {\n      grid-column-end: -12;\n    }\n  }\n}\n\n/* Default size: big. Default color variant: primary01 */\n.z-fab {\n  --z-fab-right-offset: var(--grid-margin);\n  --z-fab-bottom-offset: var(--grid-margin);\n  --z-fab-icon-size: 20px;\n  --z-fab-icon-fill: var(--color-inverse-icon);\n\n  position: fixed;\n  z-index: 1;\n  right: var(--z-fab-right-offset);\n  bottom: var(--z-fab-bottom-offset);\n  display: flex;\n  max-width: 48px;\n  box-sizing: border-box;\n  align-items: center;\n  padding: 14px;\n  background-color: var(--color-primary01);\n  border-radius: 24px;\n  box-shadow: var(--shadow-4);\n  color: var(--color-text-inverse);\n  column-gap: 0;\n  cursor: pointer;\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.25;\n  transition: all 0.2s ease-in-out;\n}\n\n.z-fab:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\nbutton.z-fab {\n  border: none;\n}\n\na.z-fab {\n  text-decoration: none;\n}\n\n.z-fab.z-fab-small {\n  --z-fab-icon-size: 18px;\n\n  max-width: 42px;\n  padding: 12px;\n  border-radius: 21px;\n  font-size: var(--font-size-2);\n  line-height: 1.285;\n}\n\n.z-fab.z-fab-x-small {\n  --z-fab-icon-size: 16px;\n\n  max-width: 36px;\n  padding: 10px;\n  border-radius: 18px;\n  font-size: var(--font-size-1);\n  line-height: 1.333;\n}\n\n.z-fab.z-fab-extended {\n  max-width: 100%;\n  column-gap: var(--space-unit);\n}\n\n.z-fab.z-fab-extended.z-fab-x-small {\n  column-gap: calc(var(--space-unit) / 2);\n}\n\n.z-fab.z-fab-extended > *:not(z-icon) {\n  opacity: 1;\n}\n\n/* color variants */\n.z-fab.z-fab-primary03 {\n  --z-fab-icon-fill: var(--color-primary01-icon);\n\n  background-color: var(--color-primary03);\n  color: var(--color-primary01-icon);\n}\n\n.z-fab.z-fab-surface01 {\n  --z-fab-icon-fill: var(--color-primary01-icon);\n\n  background-color: var(--color-surface01);\n  color: var(--color-primary01-icon);\n}\n\n.z-fab.z-fab-surface02 {\n  --z-fab-icon-fill: var(--color-primary01-icon);\n\n  background-color: var(--color-background);\n  color: var(--color-primary01-icon);\n}\n\n.z-fab.z-fab-surface04 {\n  --z-fab-icon-fill: var(--color-inverse-icon);\n\n  background-color: var(--color-surface04);\n  color: var(--color-text-inverse);\n}\n\n.z-fab z-icon {\n  --z-icon-width: var(--z-fab-icon-size);\n  --z-icon-height: var(--z-fab-icon-size);\n\n  fill: var(--z-fab-icon-fill);\n}\n\n.z-fab > *:not(z-icon) {\n  overflow: hidden;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n  white-space: nowrap;\n}\n\n.z-fab.z-fab-extended > *:not(z-icon:first-child) {\n  opacity: 1;\n}\n\n@media (hover: hover) {\n  .z-fab.z-fab-extendable:hover {\n    max-width: 100%;\n    column-gap: var(--space-unit);\n  }\n\n  .z-fab.z-fab-extendable:hover > *:not(z-icon:first-child) {\n    opacity: 1;\n  }\n\n  .z-fab.z-fab-x-small.z-fab-extendable:hover {\n    column-gap: calc(var(--space-unit) / 2);\n  }\n}\n\n.z-label {\n  display: inline-block;\n  padding-bottom: calc(var(--space-unit) / 2);\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-sb);\n  line-height: 1.25rem;\n  text-align: left;\n}\n\n.z-label::first-letter {\n  text-transform: uppercase;\n}\n\nbutton.z-link {\n  padding: 0;\n  border: 0;\n  margin: 0;\n  background-color: transparent;\n}\n\na.z-link,\nbutton.z-link {\n  display: inline-flex;\n  cursor: pointer;\n  font-family: var(--font-family-sans);\n  line-height: inherit;\n  text-decoration: none;\n}\n\na.z-link.z-link-icon,\nbutton.z-link.z-link-icon {\n  --z-icon-width: 1.125em;\n  --z-icon-height: 1.125em;\n\n  align-items: center;\n  column-gap: 0.5em;\n}\n\na.z-link.z-link-sb,\nbutton.z-link.z-link-sb {\n  font-weight: var(--font-sb);\n}\n\na.z-link.z-link-underline,\nbutton.z-link.z-link-underline {\n  text-decoration: underline;\n}\n\na.z-link:hover,\nbutton.z-link:hover,\na.z-link:focus-visible,\nbutton.z-link:focus-visible,\na.z-link:active,\nbutton.z-link:active {\n  text-decoration: underline;\n}\n\na.z-link:focus-visible,\nbutton.z-link:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\na.z-link.z-link-disabled,\nbutton.z-link.z-link-disabled {\n  box-shadow: none;\n  color: var(--color-disabled03);\n  cursor: default;\n  fill: var(--color-disabled03);\n  outline: none;\n  pointer-events: none;\n  text-decoration: none;\n}\n\na.z-link,\nbutton.z-link,\na.z-link.z-link-active,\nbutton.z-link.z-link-active,\na.z-link:hover,\nbutton.z-link:hover,\na.z-link.z-link-active:hover,\nbutton.z-link.z-link-active:hover,\na.z-link:focus-visible,\nbutton.z-link:focus-visible,\na.z-link.z-link-active:focus-visible,\nbutton.z-link.z-link-active:focus-visible,\na.z-link:active,\nbutton.z-link:active,\na.z-link.z-link-active:active,\nbutton.z-link.z-link-active:active,\na.z-link:visited,\nbutton.z-link:visited,\na.z-link.z-link-active:visited,\nbutton.z-link.z-link-active:visited {\n  color: var(--color-text-link-default);\n  fill: var(--color-text-link-default);\n}\n\na.z-link.z-link-blue,\nbutton.z-link.z-link-blue,\na.z-link.z-link-blue.z-link-active,\nbutton.z-link.z-link-blue.z-link-active {\n  color: var(--color-text-link-blue);\n  fill: var(--color-text-link-blue);\n}\n\na.z-link.z-link-red,\nbutton.z-link.z-link-red,\na.z-link.z-link-red.z-link-active,\nbutton.z-link.z-link-red.z-link-active {\n  color: var(--color-text-link-red);\n  fill: var(--color-text-link-red);\n}\n\na.z-link.z-link-inverse,\nbutton.z-link.z-link-inverse,\na.z-link.z-link-inverse.z-link-active,\nbutton.z-link.z-link-inverse.z-link-active {\n  color: var(--color-text-link-inverse);\n  fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:hover,\nbutton.z-link.z-link-blue:hover {\n  color: var(--color-text-link-blue-hover);\n  fill: var(--color-text-link-blue-hover);\n}\n\na.z-link.z-link-red:hover,\nbutton.z-link.z-link-red:hover {\n  color: var(--color-text-link-red-hover);\n  fill: var(--color-text-link-red-hover);\n}\n\na.z-link.z-link-inverse:hover,\nbutton.z-link.z-link-inverse:hover {\n  color: var(--color-text-link-inverse);\n  fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:active,\nbutton.z-link.z-link-blue:active,\na.z-link.z-link-blue:focus-visible,\nbutton.z-link.z-link-blue:focus-visible {\n  color: var(--color-text-link-blue-active);\n  fill: var(--color-text-link-blue-active);\n}\n\na.z-link.z-link-red:active,\nbutton.z-link.z-link-red:active,\na.z-link.z-link-red:focus-visible,\nbutton.z-link.z-link-red:focus-visible {\n  color: var(--color-text-link-red-active);\n  fill: var(--color-text-link-red-active);\n}\n\na.z-link.z-link-inverse:active,\nbutton.z-link.z-link-inverse:active,\na.z-link.z-link-inverse:focus-visible,\nbutton.z-link.z-link-inverse:focus-visible {\n  color: var(--color-text-link-inverse);\n  fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:visited,\nbutton.z-link.z-link-blue:visited {\n  color: var(--color-text-link-blue-visited);\n  fill: var(--color-text-link-blue-visited);\n}\n\na.z-link.z-link-red:visited,\nbutton.z-link.z-link-red:visited {\n  color: var(--color-text-link-red-visited);\n  fill: var(--color-text-link-red-visited);\n}\n\na.z-link.z-link-inverse:visited,\nbutton.z-link.z-link-inverse:visited {\n  color: var(--color-text-link-inverse);\n  fill: var(--color-text-link-inverse);\n}\n\n/* Webkit Scrollbar */\n.z-scrollbar {\n  --z-scrollbar-track-gradient: linear-gradient(\n    to right,\n    transparent 0 1px,\n    var(--gray200) 1px 5px,\n    transparent 5px 6px\n  );\n  --z-scrollbar-track-color: var(--gray200);\n  --z-scrollbar-thumb-color: var(--color-primary01);\n  --z-scrollbar-thumb-hover-color: var(--color-hover-primary);\n  --z-scrollbar-corner-color: transparent;\n}\n\n.z-scrollbar::-webkit-scrollbar {\n  width: 6px;\n  background: var(--z-scrollbar-track-gradient);\n}\n\n.z-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--z-scrollbar-thumb-color);\n}\n\n.z-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--z-scrollbar-thumb-hover-color);\n}\n\n.z-scrollbar::-webkit-scrollbar-corner {\n  background-color: var(--z-scrollbar-corner-color);\n}\n\n/* Dark theme */\n:host([theme=\"dark\"]) .z-scrollbar,\n.z-scrollbar--dark {\n  --z-scrollbar-track-gradient: linear-gradient(\n    to right,\n    transparent 0 1px,\n    var(--gray600) 1px 5px,\n    transparent 5px 6px\n  );\n  --z-scrollbar-track-color: var(--gray600);\n  --z-scrollbar-thumb-color: var(--color-white);\n  --z-scrollbar-thumb-hover-color: var(--gray500);\n  --z-scrollbar-corner-color: transparent;\n}\n\n/* Red theme */\n.theme-red .z-scrollbar {\n  --z-scrollbar-track-gradient: linear-gradient(\n    to right,\n    transparent 0 1px,\n    var(--gray200) 1px 5px,\n    transparent 5px 6px\n  );\n  --z-scrollbar-track-color: var(--gray200);\n  --z-scrollbar-thumb-color: var(--red500);\n  --z-scrollbar-thumb-hover-color: var(--red700);\n  --z-scrollbar-corner-color: transparent;\n}\n\n.theme-black.theme-black--red .z-scrollbar,\n.theme-black.theme-black--yellow .z-scrollbar {\n  --z-scrollbar-track-gradient: linear-gradient(\n    to right,\n    transparent 0 1px,\n    var(--gray200) 1px 5px,\n    transparent 5px 6px\n  );\n  --z-scrollbar-track-color: var(--gray200);\n  --z-scrollbar-thumb-color: var(--gray950);\n  --z-scrollbar-thumb-hover-color: var(--gray900);\n  --z-scrollbar-corner-color: transparent;\n}\n\n/* Firefox Scrollbar */\n@supports not selector(.z-scrollbar::-webkit-scrollbar-track) {\n  .z-scrollbar {\n    scrollbar-color: var(--z-scrollbar-thumb-color) var(--z-scrollbar-track-color);\n  }\n}\n\nz-table,\ntable.z-table {\n  background-color: var(--color-surface01);\n\n  --z-table--cells-padding: calc(var(--space-unit) * 2);\n}\n\ntable.z-table {\n  border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n  background-color: var(--color-background);\n\n  --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n  border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n  text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n  border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n  --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n  position: relative;\n  background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: -1px;\n  box-shadow:\n    inset 0 var(--border-size-small) 0 var(--color-surface04),\n    inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n  content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n  left: 0;\n}\n\n\n\n:root,\n.theme-default {\n  --color-background: var(--gray50);\n  --shadow-focus-primary: 0 0 0 2px var(--color-white), 0 0 2px 5px var(--blue800);\n\n  /* primary */\n  --color-active-primary: var(--blue400);\n  --color-hover-primary: var(--blue800);\n  --color-pressed-primary: var(--blue400);\n  --color-primary01: var(--blue500);\n  --color-primary02: var(--blue25);\n  --color-primary03: var(--blue50);\n\n  /* secondary */\n  --color-active-secondary: var(--red400);\n  --color-hover-secondary: var(--red800);\n  --color-pressed-secondary: var(--red400);\n  --color-secondary01: var(--red500);\n  --color-secondary02: var(--red25);\n  --color-secondary03: var(--red50);\n  --color-button-secondary: var(--color-surface01);\n\n  /* surface */\n  --color-surface01: var(--color-white);\n  --color-surface02: var(--gray100);\n  --color-surface03: var(--gray300);\n  --color-surface04: var(--gray700);\n  --color-surface05: var(--gray900);\n\n  /* text */\n  --color-default-text: var(--gray900);\n  --color-hover-text: var(--gray800);\n  --color-pressed-text: var(--gray700);\n  --color-text-inverse: var(--color-white);\n  --color-text02: var(--gray100);\n  --color-text03: var(--gray300);\n  --color-text05: var(--gray500);\n\n  /* disabled */\n  --color-disabled01: var(--gray300);\n  --color-disabled02: var(--gray100);\n  --color-disabled03: var(--gray500);\n\n  /* icons */\n  --color-active-primary-icon: var(--blue400);\n  --color-default-icon: var(--gray900);\n  --color-disabled01-icon: var(--gray300);\n  --color-disabled02-icon: var(--gray100);\n  --color-disabled03-icon: var(--gray500);\n  --color-hover-icon: var(--color-black);\n  --color-hover-primary-icon: var(--blue800);\n  --color-inverse-icon: var(--color-white);\n  --color-pressed-icon: var(--gray700);\n  --color-primary01-icon: var(--blue500);\n\n  /* alert */\n  --color-default-error: var(--red500);\n  --color-default-success: var(--green500);\n  --color-default-warning: var(--yellow500);\n  --color-hover-error: var(--red800);\n  --color-hover-success: var(--green800);\n  --color-hover-warning: var(--yellow800);\n  --color-inverse-error: var(--red50);\n  --color-inverse-hover-error: var(--red500);\n  --color-inverse-hover-success: var(--green500);\n  --color-inverse-hover-warning: var(--yellow500);\n  --color-inverse-success: var(--green50);\n  --color-inverse-warning: var(--yellow50);\n\n  /* forms */\n  --color-form-active-primary: var(--blue400);\n  --color-form-background: var(--color-white);\n  --color-form-default-icon: var(--gray900);\n  --color-form-default-text: var(--gray900);\n  --color-form-disabled-text: var(--gray500);\n  --color-form-disabled01-icon: var(--gray500);\n  --color-form-disabled03: var(--gray500);\n  --color-form-hover-error: var(--red800);\n  --color-form-hover-primary: var(--blue800);\n  --color-form-hover-success: var(--green800);\n  --color-form-hover-warning: var(--yellow800);\n  --color-form-inverse-error: var(--red50);\n  --color-form-inverse-success: var(--green50);\n  --color-form-inverse-warning: var(--yellow50);\n  --color-form-placeholder-text: var(--gray600);\n  --color-form-success01: var(--green500);\n  --color-form-surface03: var(--gray200);\n  --color-form-surface04: var(--gray600);\n  --color-form-warning01: var(--yellow500);\n\n  /* links */\n  --color-text-link-blue: var(--blue500);\n  --color-text-link-blue-hover: var(--blue800);\n  --color-text-link-blue-active: var(--blue800);\n  --color-text-link-blue-visited: var(--blue800);\n  --color-text-link-blue-pressed: var(--blue400);\n  --color-text-link-red: var(--red500);\n  --color-text-link-red-hover: var(--red800);\n  --color-text-link-red-active: var(--red800);\n  --color-text-link-red-visited: var(--red800);\n  --color-text-link-red-pressed: var(--red400);\n  --color-text-link-inverse: var(--color-white);\n  --color-text-link-default: var(--gray900);\n}\n\n.theme-black {\n  /* primary */\n  --color-active-primary: var(--gray600);\n  --color-hover-primary: var(--gray700);\n  --color-pressed-primary: var(--gray600);\n  --color-primary01: var(--gray950);\n  --color-primary02: var(--gray100);\n  --color-primary03: var(--gray200);\n\n  /* secondary */\n  --color-active-secondary: var(--gray400);\n  --color-hover-secondary: var(--gray700);\n  --color-pressed-secondary: var(--gray400);\n  --color-secondary01: var(--gray800);\n  --color-secondary02: var(--gray800);\n  --color-secondary03: var(--gray100);\n\n  /* icons */\n  --color-active-primary-icon: var(--gray600);\n  --color-hover-primary-icon: var(--gray700);\n  --color-primary01-icon: var(--gray950);\n\n  /* forms */\n  --color-form-active-primary: var(--gray600);\n  --color-form-hover-primary: var(--gray700);\n}\n\n/* --- Black theme variants --- Use them in combination with `theme-black` css class: `<div class=\"theme-black theme-black--red\">` */\n\n.theme-black.theme-black--red {\n  /* secondary */\n  --color-active-secondary: var(--red400);\n  --color-hover-secondary: var(--red800);\n  --color-pressed-secondary: var(--red400);\n  --color-secondary01: var(--red500);\n  --color-secondary02: var(--red25);\n  --color-secondary03: var(--red50);\n}\n\n.theme-black.theme-black--yellow {\n  /* secondary */\n  --color-active-secondary: var(--yellow400);\n  --color-hover-secondary: var(--yellow800);\n  --color-pressed-secondary: var(--yellow400);\n  --color-secondary01: var(--yellow500);\n  --color-secondary02: var(--yellow25);\n  --color-secondary03: var(--yellow50);\n}\n\n.theme-dark {\n  --color-background: var(--gray900);\n  --shadow-focus-primary: 0 0 0 2px var(--gray900), 0 0 2px 5px var(--blue25);\n\n  /* primary */\n  --color-active-primary: var(--gray25);\n  --color-hover-primary: var(--gray100);\n  --color-pressed-primary: var(--gray25);\n  --color-primary01: var(--color-white);\n  --color-primary02: var(--gray800);\n  --color-primary03: var(--gray700);\n\n  /* secondary */\n  --color-hover-secondary: var(--red200);\n  --color-secondary01: var(--red500);\n  --color-secondary02: var(--red900);\n  --color-secondary03: var(--red800);\n  --color-button-secondary: transparent;\n\n  /* surface */\n  --color-surface01: var(--gray900);\n  --color-surface02: var(--gray700);\n  --color-surface03: var(--gray300);\n  --color-surface04: var(--gray100);\n  --color-surface05: var(--color-white);\n\n  /* text */\n  --color-default-text: var(--gray100);\n  --color-hover-text: var(--gray300);\n  --color-pressed-text: var(--gray300);\n  --color-text-inverse: var(--gray900);\n  --color-text02: var(--gray900);\n  --color-text03: var(--gray700);\n  --color-text05: var(--gray500);\n\n  /* disabled */\n  --color-disabled01: var(--gray700);\n  --color-disabled02: var(--gray900);\n  --color-disabled03: var(--gray500);\n\n  /* icons */\n  --color-active-primary-icon: var(--gray300);\n  --color-default-icon: var(--gray100);\n  --color-disabled01-icon: var(--gray700);\n  --color-disabled02-icon: var(--gray900);\n  --color-disabled03-icon: var(--gray500);\n  --color-hover-icon: var(--gray300);\n  --color-hover-primary-icon: var(--gray300);\n  --color-inverse-icon: var(--gray900);\n  --color-pressed-icon: var(--gray300);\n  --color-primary01-icon: var(--color-white);\n\n  /* alert */\n  --color-default-error: var(--red200);\n  --color-default-success: var(--green200);\n  --color-default-warning: var(--yellow200);\n  --color-hover-error: var(--red50);\n  --color-hover-success: var(--green50);\n  --color-hover-warning: var(--yellow50);\n  --color-inverse-error: var(--red800);\n  --color-inverse-hover-error: var(--red200);\n  --color-inverse-hover-success: var(--green200);\n  --color-inverse-hover-warning: var(--yellow200);\n  --color-inverse-success: var(--green800);\n  --color-inverse-warning: var(--yellow800);\n\n  /* forms */\n  --color-form-active-primary: var(--gray800);\n  --color-form-hover-primary: var(--gray800);\n\n  /* links */\n  --color-text-link-blue-active: var(--color-white);\n  --color-text-link-blue-hover: var(--color-white);\n  --color-text-link-blue-pressed: var(--color-white);\n  --color-text-link-blue-visited: var(--color-white);\n  --color-text-link-blue: var(--color-white);\n  --color-text-link-default: var(--color-white);\n  --color-text-link-inverse: var(--gray900);\n  --color-text-link-red-active: var(--color-white);\n  --color-text-link-red-hover: var(--color-white);\n  --color-text-link-red-pressed: var(--color-white);\n  --color-text-link-red-visited: var(--color-white);\n  --color-text-link-red: var(--color-white);\n}\n\n.theme-red {\n  /* primary */\n  --color-active-primary: var(--red400);\n  --color-hover-primary: var(--red800);\n  --color-pressed-primary: var(--red400);\n  --color-primary01: var(--red500);\n  --color-primary02: var(--red25);\n  --color-primary03: var(--red50);\n\n  /* secondary */\n  --color-active-secondary: var(--gray400);\n  --color-hover-secondary: var(--gray800);\n  --color-pressed-secondary: var(--gray400);\n  --color-secondary01: var(--gray500);\n  --color-secondary02: var(--gray25);\n  --color-secondary03: var(--gray50);\n\n  /* icons */\n  --color-active-primary-icon: var(--red400);\n  --color-hover-primary-icon: var(--red800);\n  --color-primary01-icon: var(--red500);\n\n  /* forms */\n  --color-form-active-primary: var(--red400);\n  --color-form-hover-primary: var(--red800);\n}\n\n\n/* Styles for stacked z-accordions */\n\nz-accordion + z-accordion {\n  border-top: none;\n}\n\n/* all z-accordions with some sibling z-accordion */\nz-accordion[variant=\"background\"]:not(:first-of-type, :last-of-type),\nz-accordion[variant=\"background\"]:not(:first-of-type, :last-of-type)::part(summary),\nz-accordion[variant=\"background\"]:not(:first-of-type, :last-of-type)::part(content),\nz-accordion[variant=\"background\"]:not(:first-of-type, :last-of-type)::part(summary)::before,\nz-accordion[variant=\"background\"]:not(:first-of-type, :last-of-type)::part(content)::before {\n  border-radius: 0;\n}\n\n/* first z-accordion with some sibling z-accordion */\nz-accordion[variant=\"background\"]:first-of-type:not(:only-of-type),\nz-accordion[variant=\"background\"]:first-of-type:not(:only-of-type)::part(summary),\nz-accordion[variant=\"background\"]:first-of-type:not(:only-of-type)::part(content),\nz-accordion[variant=\"background\"][highlight]:first-of-type:not(:only-of-type)::part(summary)::before,\nz-accordion[variant=\"background\"][highlight]:first-of-type:not(:only-of-type)::part(content)::before {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n/* last z-accordion with some sibling z-accordion */\nz-accordion[variant=\"background\"]:last-of-type:not(:only-of-type),\nz-accordion[variant=\"background\"]:last-of-type:not(:only-of-type)::part(summary),\nz-accordion[variant=\"background\"][highlight]:last-of-type:not(:only-of-type)::part(summary)::before,\nz-accordion[variant=\"background\"][highlight]:last-of-type:not(:only-of-type)::part(content)::before {\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n";
 
 /*
- Stencil Client Platform v4.43.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.43.5 | MIT Licensed | https://stenciljs.com
  */
 
 
@@ -1009,6 +1009,31 @@ var convertToPrivate = (node) => {
   return vnode;
 };
 
+// src/runtime/normalize-watchers.ts
+var normalizeWatchers = (raw) => {
+  if (!raw) return void 0;
+  const keys = Object.keys(raw);
+  if (keys.length === 0) return void 0;
+  let hasLegacy = false;
+  for (const propName of keys) {
+    if (hasLegacy) break;
+    for (const h2 of raw[propName]) {
+      if (typeof h2 === "string") {
+        hasLegacy = true;
+        break;
+      }
+    }
+  }
+  if (!hasLegacy) return raw;
+  const out = {};
+  for (const propName of keys) {
+    out[propName] = raw[propName].map(
+      (h2) => typeof h2 === "string" ? { [h2]: 0 } : h2
+    );
+  }
+  return out;
+};
+
 // src/runtime/parse-property-value.ts
 var parsePropertyValue = (propValue, propType, isFormAssociated) => {
   if (propValue != null && !isComplexType(propValue)) {
@@ -2078,7 +2103,7 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
   if (cmpMeta.$members$ || BUILD.propChangeCallback) {
     {
       if (Cstr.watchers && !cmpMeta.$watchers$) {
-        cmpMeta.$watchers$ = Cstr.watchers;
+        cmpMeta.$watchers$ = normalizeWatchers(Cstr.watchers);
       }
       if (Cstr.deserializers && !cmpMeta.$deserializers$) {
         cmpMeta.$deserializers$ = Cstr.deserializers;
@@ -2208,11 +2233,13 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
             return;
           }
           const propFlags = members.find(([m]) => m === propName);
-          if (propFlags && propFlags[1][0] & 4 /* Boolean */) {
+          const isBooleanTarget = propFlags && propFlags[1][0] & 4 /* Boolean */;
+          const isSpuriousBooleanRemoval = isBooleanTarget && newValue === null && this[propName] === void 0;
+          if (isBooleanTarget) {
             newValue = newValue === null || newValue === "false" ? false : true;
           }
           const propDesc = Object.getOwnPropertyDescriptor(prototype, propName);
-          if (newValue != this[propName] && (!propDesc.get || !!propDesc.set)) {
+          if (!isSpuriousBooleanRemoval && newValue != this[propName] && (!propDesc.get || !!propDesc.set)) {
             this[propName] = newValue;
           }
         });
@@ -2257,7 +2284,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         }
         if (!Cstr.isProxied) {
           {
-            cmpMeta.$watchers$ = Cstr.watchers;
+            cmpMeta.$watchers$ = normalizeWatchers(Cstr.watchers);
             cmpMeta.$serializers$ = Cstr.serializers;
             cmpMeta.$deserializers$ = Cstr.deserializers;
           }
@@ -2437,7 +2464,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   let hasSlotRelocation = false;
   lazyBundles.map((lazyBundle) => {
     lazyBundle[1].map((compactMeta) => {
-      var _a2, _b, _c;
+      var _a2, _b;
       const cmpMeta = {
         $flags$: compactMeta[0],
         $tagName$: compactMeta[1],
@@ -2457,9 +2484,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
         cmpMeta.$attrsToReflect$ = [];
       }
       {
-        cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
-        cmpMeta.$serializers$ = (_b = compactMeta[5]) != null ? _b : {};
-        cmpMeta.$deserializers$ = (_c = compactMeta[6]) != null ? _c : {};
+        cmpMeta.$watchers$ = normalizeWatchers(compactMeta[4]);
+        cmpMeta.$serializers$ = (_a2 = compactMeta[5]) != null ? _a2 : {};
+        cmpMeta.$deserializers$ = (_b = compactMeta[6]) != null ? _b : {};
       }
       const tagName = transformTag(cmpMeta.$tagName$);
       const HostElement = class extends HTMLElement {
@@ -2642,6 +2669,3 @@ exports.h = h;
 exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;
 exports.setNonce = setNonce;
-//# sourceMappingURL=index-CZz7uP-M.js.map
-
-//# sourceMappingURL=index-CZz7uP-M.js.map

package/dist/cjs/index.cjs.js

@@ -236,6 +236,3 @@ Object.defineProperty(exports, "ZTableRowExpandedType", {
 });
 exports.ICONS = iconset.ICONS;
 exports.Utils = UTILS;
-//# sourceMappingURL=index.cjs.js.map
-
-//# sourceMappingURL=index.cjs.js.map