@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);
@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);
:root {
  --gray950: #121212;
  --gray900: #292929;
  --gray800: #3d3d3d;
  --gray700: #525252;
  --gray600: #666;
  --gray500: #9b9b9b;
  --gray400: #adadad;
  --gray300: #c2c2c2;
  --gray200: #d6d6d6;
  --gray100: #ebebeb;
  --gray50: #f6f6f6;
  --gray25: #fafafa;
}

:root {
  --blue950: #001229;
  --blue900: #001f46;
  --blue800: #002c63;
  --blue700: #003981;
  --blue600: #0047a0;
  --blue500: #0056c1;
  --blue400: #2e76ce;
  --blue300: #5893db;
  --blue200: #82b0e7;
  --blue100: #accdf3;
  --blue50: #d6eaff;
  --blue25: #ebf5ff;
}

:root {
  --green950: #19200a;
  --green900: #22330a;
  --green800: #2b4808;
  --green700: #355d06;
  --green600: #407305;
  --green500: #568818;
  --green400: #6f9d2f;
  --green300: #8ab14a;
  --green200: #a6c66b;
  --green100: #c3da92;
  --green50: #effce0;
}

:root {
  --yellow950: #33280f;
  --yellow900: #5c4615;
  --yellow800: #85641a;
  --yellow700: #ab8125;
  --yellow600: #d09e30;
  --yellow500: #f6bb3b;
  --yellow400: #f9c852;
  --yellow300: #fbd468;
  --yellow200: #fee17f;
  --yellow150: #ffde72;
  --yellow100: #ffea91;
  --yellow50: #fbf4e6;
}

:root {
  --red950: #2a0005;
  --red900: #4c0009;
  --red800: #6f000d;
  --red700: #940111;
  --red600: #ba0115;
  --red500: #e4011c;
  --red400: #ec5163;
  --red300: #f07a88;
  --red200: #f49fa9;
  --red100: #f8bfc4;
  --red50: #fdeeed;
  --red25: #fef6f6;
}

:root {
  --avatar-C01: #99005b;
  --avatar-C02: #b01300;
  --avatar-C03: #e62200;
  --avatar-C04: #7c4000;
  --avatar-C05: #c25600;
  --avatar-C06: #6e6d6d;
  --avatar-C07: #667d00;
  --avatar-C08: #008741;
  --avatar-C09: #00612f;
  --avatar-C10: #007d8a;
  --avatar-C11: #007db3;
  --avatar-C12: #00548c;
  --avatar-C13: #0028b1;
  --avatar-C14: #00019c;
  --avatar-C15: #6400ee;
  --avatar-C16: #5f3fff;
  --avatar-C17: #8b00a5;
  --avatar-C18: #b200ff;
  --avatar-C19: #c700d6;
}

:root {
  --subject-art: #7b7b06;
  --subject-art_image: #7b7b06;
  --subject-biology: #438454;
  --subject-chemistry: #ba5191;
  --subject-civics: #000080;
  --subject-communication: #1777d5;
  --subject-computer_science: #10893e;
  --subject-earth_science: #8d3eb2;
  --subject-economic: #004080;
  --subject-english: #c25353;
  --subject-food_science: #38846b;
  --subject-french: #c25353;
  --subject-geography: #378092;
  --subject-german: #c25353;
  --subject-grammar: #be5926;
  --subject-graphic: #8e7406;
  --subject-greek: #37818a;
  --subject-history: #8b572a;
  --subject-law: #b90000;
  --subject-latin: #8b4513;
  --subject-math: #266997;
  --subject-natural_science: #318473;
  --subject-philosophy: #5a189a;
  --subject-physics: #4a7ba4;
  --subject-science_middle_school: #3a7922;
  --subject-spanish: #c25353;
  --subject-technology: #138473;
  --subject-topography: #ac6604;
  --subject-technique: #752771;
}



:root {
  --color-error-default: #7e0a00;
  --color-success-default: #417505;
  --color-warning-default: #f6bb3b;
  --color-black: #000;
  --color-white: #fff;
}

:root {
  --color-text-link-blue: var(--blue500);
  --color-text-link-blue-hover: var(--blue800);
  --color-text-link-blue-active: var(--blue800);
  --color-text-link-blue-visited: var(--blue800);
  --color-text-link-blue-pressed: var(--blue400);
  --color-text-link-red: var(--red500);
  --color-text-link-red-hover: var(--red800);
  --color-text-link-red-active: var(--red800);
  --color-text-link-red-visited: var(--red800);
  --color-text-link-red-pressed: var(--red400);
  --color-text-link-inverse: var(--color-white);
  --color-text-link-default: var(--gray900);
}

:root {
  /* font-family */
  --font-family-sans: "IBM Plex Sans", sans-serif;
  --font-family-serif: "IBM Plex Serif", serif;

  /* font-weight */
  --font-lt: 300;
  --font-rg: 400;
  --font-sb: 600;
  --font-bd: 700;

  /* font-size type scale */
  --font-size-1: 0.75rem; /* 12px */
  --font-size-2: 0.875rem; /* 14px */
  --font-size-3: 1rem; /* assuming 16px */
  --font-size-4: 1.125rem; /* 18px */
  --font-size-5: 1.25rem; /* 20px */
  --font-size-6: 1.5rem; /* 24px */
  --font-size-7: 1.75rem; /* 28px */
  --font-size-8: 2rem; /* 32px */
  --font-size-9: 2.25rem; /* 36px */
  --font-size-10: 2.625rem; /* 42px */
  --font-size-11: 3rem; /* 48px */
  --font-size-12: 3.375rem; /* 54px */
  --font-size-13: 3.75rem; /* 60px */
  --font-size-14: 4.25rem; /* 68px */
  --font-size-15: 4.75rem; /* 76px */
  --font-size-16: 5.25rem; /* 84px */
  --font-size-17: 5.75rem; /* 92px */

  /* cssprops to use with `font` shorthand property */
  --section-title-1: var(--font-sb) var(--font-size-11) / 0.9166 var(--font-family-serif);
  --section-title-2: var(--font-sb) var(--font-size-10) / 1.1904 var(--font-family-serif);
  --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);
  --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);
  --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);
  --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);
}

/* Typography classes */
.heading-1,
.heading-1-sb,
.heading-1-lt {
  font-size: var(--font-size-7);
  font-weight: var(--font-rg);
  line-height: 1.28;
}

.heading-2,
.heading-2-sb,
.heading-2-lt {
  font-size: var(--font-size-6);
  font-weight: var(--font-rg);
  line-height: 1.333;
}

.heading-3,
.heading-3-sb,
.heading-3-lt {
  font-size: var(--font-size-6);
  font-weight: var(--font-rg);
  line-height: 1.333;
}

.heading-4,
.heading-4-sb,
.heading-4-lt {
  font-size: var(--font-size-5);
  font-weight: var(--font-rg);
  line-height: 1.4;
}

.body-1,
.body-1-sb {
  font-size: var(--font-size-5);
  font-weight: var(--font-rg);
  line-height: 1.4;
}

.body-2,
.body-2-sb {
  font-size: var(--font-size-4);
  font-weight: var(--font-rg);
  line-height: 1.5;
}

.body-3,
.body-3-sb {
  font-size: var(--font-size-3);
  font-weight: var(--font-rg);
  line-height: 1.5;
}

.body-4,
.body-4-sb {
  font-size: var(--font-size-2);
  font-weight: var(--font-rg);
  letter-spacing: 0.16px;
  line-height: 1.4;
}

.body-5,
.body-5-sb {
  font-size: var(--font-size-1);
  font-weight: var(--font-rg);
  letter-spacing: 0.32px;
  line-height: 1.333;
}

.interactive-1,
.interactive-1-sb {
  font-size: var(--font-size-3);
  font-weight: var(--font-rg);
  line-height: 1.5;
}

.interactive-2,
.interactive-2-sb {
  font-size: var(--font-size-2);
  font-weight: var(--font-rg);
  letter-spacing: 0.16px;
  line-height: 1.4;
}

.interactive-3,
.interactive-3-sb {
  font-size: var(--font-size-1);
  font-weight: var(--font-rg);
  letter-spacing: 0.32px;
  line-height: 1.333;
}

.helper,
.helper-sb {
  font-size: var(--font-size-1);
  font-style: italic;
  font-weight: var(--font-rg);
  letter-spacing: 0.32px;
  line-height: 1.333;
}

/* section title */
.section-title-1 {
  font: var(--section-title-1);
}

.section-title-2 {
  font: var(--section-title-2);
}

.section-title-3 {
  font: var(--section-title-3);
}

.section-title-4 {
  font: var(--section-title-4);
}

.section-title-5 {
  font: var(--section-title-5);
}

.section-title-6 {
  font: var(--section-title-6);
}

/* heading-1/2 for desktop and wide viewports */
@media (min-width: 1152px) {
  .heading-1,
  .heading-1-sb,
  .heading-1-lt {
    font-size: var(--font-size-8);
    font-weight: var(--font-rg);
    line-height: 1.25;
  }

  .heading-2,
  .heading-2-sb,
  .heading-2-lt {
    font-size: var(--font-size-7);
    font-weight: var(--font-rg);
    line-height: 1.28;
  }
}

/* viewport classes */
@media (max-width: 767px) {
  .mobile-heading-1,
  .mobile-heading-1-sb,
  .mobile-heading-1-lt {
    font-size: var(--font-size-7);
    font-weight: var(--font-rg);
    line-height: 1.28;
  }

  .mobile-heading-2,
  .mobile-heading-2-sb,
  .mobile-heading-2-lt {
    font-size: var(--font-size-6);
    font-weight: var(--font-rg);
    line-height: 1.333;
  }

  .mobile-heading-3,
  .mobile-heading-3-sb,
  .mobile-heading-3-lt {
    font-size: var(--font-size-6);
    font-weight: var(--font-rg);
    line-height: 1.333;
  }

  .mobile-heading-4,
  .mobile-heading-4-sb,
  .mobile-heading-4-lt {
    font-size: var(--font-size-5);
    font-weight: var(--font-rg);
    line-height: 1.4;
  }

  .mobile-body-1,
  .mobile-body-1-sb {
    font-size: var(--font-size-5);
    font-weight: var(--font-rg);
    line-height: 1.4;
  }

  .mobile-body-2,
  .mobile-body-2-sb {
    font-size: var(--font-size-4);
    font-weight: var(--font-rg);
    line-height: 1.5;
  }

  .mobile-body-3,
  .mobile-body-3-sb {
    font-size: var(--font-size-3);
    font-weight: var(--font-rg);
    line-height: 1.5;
  }

  .mobile-body-4,
  .mobile-body-4-sb {
    font-size: var(--font-size-2);
    font-weight: var(--font-rg);
    letter-spacing: 0.16px;
    line-height: 1.4;
  }

  .mobile-body-5,
  .mobile-body-5-sb {
    font-size: var(--font-size-1);
    font-weight: var(--font-rg);
    letter-spacing: 0.32px;
    line-height: 1.333;
  }

  .mobile-interactive-1,
  .mobile-interactive-1-sb {
    font-size: var(--font-size-3);
    font-weight: var(--font-rg);
    line-height: 1.5;
  }

  .mobile-interactive-2,
  .mobile-interactive-2-sb {
    font-size: var(--font-size-2);
    font-weight: var(--font-rg);
    letter-spacing: 0.16px;
    line-height: 1.4;
  }

  .mobile-interactive-3,
  .mobile-interactive-3-sb {
    font-size: var(--font-size-1);
    font-weight: var(--font-rg);
    letter-spacing: 0.32px;
    line-height: 1.333;
  }

  .mobile-section-title-1 {
    font: var(--section-title-1);
  }

  .mobile-section-title-2 {
    font: var(--section-title-2);
  }

  .mobile-section-title-3 {
    font: var(--section-title-3);
  }

  .mobile-section-title-4 {
    font: var(--section-title-4);
  }

  .mobile-section-title-5 {
    font: var(--section-title-5);
  }

  .mobile-section-title-6 {
    font: var(--section-title-6);
  }
}

@media (min-width: 768px) and (max-width: 1151px) {
  .tablet-heading-1,
  .tablet-heading-1-sb,
  .tablet-heading-1-lt {
    font-size: var(--font-size-7);
    font-weight: var(--font-rg);
    line-height: 1.28;
  }

  .tablet-heading-2,
  .tablet-heading-2-sb,
  .tablet-heading-2-lt {
    font-size: var(--font-size-6);
    font-weight: var(--font-rg);
    line-height: 1.333;
  }

  .tablet-heading-3,
  .tablet-heading-3-sb,
  .tablet-heading-3-lt {
    font-size: var(--font-size-6);
    font-weight: var(--font-rg);
    line-height: 1.333;
  }

  .tablet-heading-4,
  .tablet-heading-4-sb,
  .tablet-heading-4-lt {
    font-size: var(--font-size-5);
    font-weight: var(--font-rg);
    line-height: 1.4;
  }

  .tablet-body-1,
  .tablet-body-1-sb {
    font-size: var(--font-size-5);
    font-weight: var(--font-rg);
    line-height: 1.4;
  }

  .tablet-body-2,
  .tablet-body-2-sb {
    font-size: var(--font-size-4);
    font-weight: var(--font-rg);
    line-height: 1.5;
  }

  .tablet-body-3,
  .tablet-body-3-sb {
    font-size: var(--font-size-3);
    font-weight: var(--font-rg);
    line-height: 1.5;
  }

  .tablet-body-4,
  .tablet-body-4-sb {
    font-size: var(--font-size-2);
    font-weight: var(--font-rg);
    letter-spacing: 0.16px;
    line-height: 1.4;
  }

  .tablet-body-5,
  .tablet-body-5-sb {
    font-size: var(--font-size-1);
    font-weight: var(--font-rg);
    letter-spacing: 0.32px;
    line-height: 1.333;
  }

  .tablet-interactive-1,
  .tablet-interactive-1-sb {
    font-size: var(--font-size-3);
    font-weight: var(--font-rg);
    line-height: 1.5;
  }

  .tablet-interactive-2,
  .tablet-interactive-2-sb {
    font-size: var(--font-size-2);
    font-weight: var(--font-rg);
    letter-spacing: 0.16px;
    line-height: 1.4;
  }

  .tablet-interactive-3,
  .tablet-interactive-3-sb {
    font-size: var(--font-size-1);
    font-weight: var(--font-rg);
    letter-spacing: 0.32px;
    line-height: 1.333;
  }

  .tablet-section-title-1 {
    font: var(--section-title-1);
  }

  .tablet-section-title-2 {
    font: var(--section-title-2);
  }

  .tablet-section-title-3 {
    font: var(--section-title-3);
  }

  .tablet-section-title-4 {
    font: var(--section-title-4);
  }

  .tablet-section-title-5 {
    font: var(--section-title-5);
  }

  .tablet-section-title-6 {
    font: var(--section-title-6);
  }
}

@media (min-width: 1152px) and (max-width: 1365px) {
  .desktop-heading-1,
  .desktop-heading-1-sb,
  .desktop-heading-1-lt {
    font-size: var(--font-size-8);
    font-weight: var(--font-rg);
    line-height: 1.25;
  }

  .desktop-heading-2,
  .desktop-heading-2-sb,
  .desktop-heading-2-lt {
    font-size: var(--font-size-7);
    font-weight: var(--font-rg);
    line-height: 1.28;
  }

  .desktop-heading-3,
  .desktop-heading-3-sb,
  .desktop-heading-3-lt {
    font-size: var(--font-size-6);
    font-weight: var(--font-rg);
    line-height: 1.333;
  }

  .desktop-heading-4,
  .desktop-heading-4-sb,
  .desktop-heading-4-lt {
    font-size: var(--font-size-5);
    font-weight: var(--font-rg);
    line-height: 1.4;
  }

  .desktop-body-1,
  .desktop-body-1-sb {
    font-size: var(--font-size-5);
    font-weight: var(--font-rg);
    line-height: 1.4;
  }

  .desktop-body-2,
  .desktop-body-2-sb {
    font-size: var(--font-size-4);
    font-weight: var(--font-rg);
    line-height: 1.5;
  }

  .desktop-body-3,
  .desktop-body-3-sb {
    font-size: var(--font-size-3);
    font-weight: var(--font-rg);
    line-height: 1.5;
  }

  .desktop-body-4,
  .desktop-body-4-sb {
    font-size: var(--font-size-2);
    font-weight: var(--font-rg);
    letter-spacing: 0.16px;
    line-height: 1.4;
  }

  .desktop-body-5,
  .desktop-body-5-sb {
    font-size: var(--font-size-1);
    font-weight: var(--font-rg);
    letter-spacing: 0.32px;
    line-height: 1.333;
  }

  .desktop-interactive-1,
  .desktop-interactive-1-sb {
    font-size: var(--font-size-3);
    font-weight: var(--font-rg);
    line-height: 1.5;
  }

  .desktop-interactive-2,
  .desktop-interactive-2-sb {
    font-size: var(--font-size-2);
    font-weight: var(--font-rg);
    letter-spacing: 0.16px;
    line-height: 1.4;
  }

  .desktop-interactive-3,
  .desktop-interactive-3-sb {
    font-size: var(--font-size-1);
    font-weight: var(--font-rg);
    letter-spacing: 0.32px;
    line-height: 1.333;
  }

  .desktop-section-title-1 {
    font: var(--section-title-1);
  }

  .desktop-section-title-2 {
    font: var(--section-title-2);
  }

  .desktop-section-title-3 {
    font: var(--section-title-3);
  }

  .desktop-section-title-4 {
    font: var(--section-title-4);
  }

  .desktop-section-title-5 {
    font: var(--section-title-5);
  }

  .desktop-section-title-6 {
    font: var(--section-title-6);
  }
}

@media (min-width: 1366px) {
  .wide-heading-1,
  .wide-heading-1-sb,
  .wide-heading-1-lt {
    font-size: var(--font-size-8);
    font-weight: var(--font-rg);
    line-height: 1.25;
  }

  .wide-heading-2,
  .wide-heading-2-sb,
  .wide-heading-2-lt {
    font-size: var(--font-size-7);
    font-weight: var(--font-rg);
    line-height: 1.28;
  }

  .wide-heading-3,
  .wide-heading-3-sb,
  .wide-heading-3-lt {
    font-size: var(--font-size-6);
    font-weight: var(--font-rg);
    line-height: 1.333;
  }

  .wide-heading-4,
  .wide-heading-4-sb,
  .wide-heading-4-lt {
    font-size: var(--font-size-5);
    font-weight: var(--font-rg);
    line-height: 1.4;
  }

  .wide-body-1,
  .wide-body-1-sb {
    font-size: var(--font-size-5);
    font-weight: var(--font-rg);
    line-height: 1.4;
  }

  .wide-body-2,
  .wide-body-2-sb {
    font-size: var(--font-size-4);
    font-weight: var(--font-rg);
    line-height: 1.5;
  }

  .wide-body-3,
  .wide-body-3-sb {
    font-size: var(--font-size-3);
    font-weight: var(--font-rg);
    line-height: 1.5;
  }

  .wide-body-4,
  .wide-body-4-sb {
    font-size: var(--font-size-2);
    font-weight: var(--font-rg);
    letter-spacing: 0.16px;
    line-height: 1.4;
  }

  .wide-body-5,
  .wide-body-5-sb {
    font-size: var(--font-size-1);
    font-weight: var(--font-rg);
    letter-spacing: 0.32px;
    line-height: 1.333;
  }

  .wide-interactive-1,
  .wide-interactive-1-sb {
    font-size: var(--font-size-3);
    font-weight: var(--font-rg);
    line-height: 1.5;
  }

  .wide-interactive-2,
  .wide-interactive-2-sb {
    font-size: var(--font-size-2);
    font-weight: var(--font-rg);
    letter-spacing: 0.16px;
    line-height: 1.4;
  }

  .wide-interactive-3,
  .wide-interactive-3-sb {
    font-size: var(--font-size-1);
    font-weight: var(--font-rg);
    letter-spacing: 0.32px;
    line-height: 1.333;
  }

  .wide-section-title-1 {
    font: var(--section-title-1);
  }

  .wide-section-title-2 {
    font: var(--section-title-2);
  }

  .wide-section-title-3 {
    font: var(--section-title-3);
  }

  .wide-section-title-4 {
    font: var(--section-title-4);
  }

  .wide-section-title-5 {
    font: var(--section-title-5);
  }

  .wide-section-title-6 {
    font: var(--section-title-6);
  }
}

/* font-weight variants */
.heading-1-lt,
.heading-2-lt,
.heading-3-lt,
.heading-4-lt {
  font-weight: var(--font-lt);
}

.heading-1-sb,
.heading-2-sb,
.heading-3-sb,
.heading-4-sb,
.body-1-sb,
.body-2-sb,
.body-3-sb,
.body-4-sb,
.body-5-sb,
.interactive-1-sb,
.interactive-2-sb,
.interactive-3-sb,
.helper-sb {
  font-weight: var(--font-sb);
}

:root {
  --space-unit: 8px;
}

:root {
  --shadow-color-base: rgb(66 69 72 / 35%);
  --shadow-inset-2: inset 0 2px 4px 0 var(--shadow-color-base);
  --shadow-inset-4: inset 0 4px 8px 0 var(--shadow-color-base);
  --shadow-0: 0 0 0 0 var(--shadow-color-base);
  --shadow-1: 0 1px 2px 0 var(--shadow-color-base);
  --shadow-2: 0 2px 4px 0 var(--shadow-color-base);
  --shadow-3: 0 3px 6px 0 var(--shadow-color-base);
  --shadow-4: 0 4px 8px 0 var(--shadow-color-base);
  --shadow-6: 0 6px 12px 0 var(--shadow-color-base);
  --shadow-8: 0 8px 16px 0 var(--shadow-color-base);
  --shadow-12: 0 12px 24px 0 var(--shadow-color-base);
  --shadow-16: 0 16px 32px 0 var(--shadow-color-base);
  --shadow-24: 0 24px 48px 0 var(--shadow-color-base);
}

:root {
  --border-no-radius: 0;
  --border-size-small: 1px;
  --border-size-medium: 2px;
  --border-size-large: 4px;
  --border-radius-small: 2px;
  --border-radius: 4px;
}

:root {
  --grid-mobile-viewport: 768px;
  --grid-mobile-column: 4;
  --grid-mobile-margin: 16px;
  --grid-mobile-gutter: 16px;
  --grid-tablet-viewport: 768px;
  --grid-tablet-column: 8;
  --grid-tablet-margin: 24px;
  --grid-tablet-gutter: 24px;
  --grid-desktop-viewport: 1152px;
  --grid-desktop-column: 12;
  --grid-desktop-margin: 24px;
  --grid-desktop-gutter: 24px;
  --grid-wide-viewport: 1366px;
  --grid-wide-column: 12;
  --grid-wide-margin: 32px;
  --grid-wide-gutter: 32px;
  --page-max-width: 1366px;

  /* These variables automatically adapt to the viewport size,
    that apps don't have to worry about updating the value manually. */
  --grid-margin: var(--grid-mobile-margin);
  --grid-gutter: var(--grid-mobile-gutter);
  --grid-columns: var(--grid-mobile-column);
}

@media (min-width: 768px) and (max-width: 1151px) {
  :root {
    --grid-margin: var(--grid-tablet-margin);
    --grid-gutter: var(--grid-tablet-gutter);
    --grid-columns: var(--grid-tablet-column);
  }
}

@media (min-width: 1152px) and (max-width: 1365px) {
  :root {
    --grid-margin: var(--grid-desktop-margin);
    --grid-gutter: var(--grid-desktop-gutter);
    --grid-columns: var(--grid-desktop-column);
  }
}

@media (min-width: 1366px) {
  :root {
    --grid-margin: var(--grid-wide-margin);
    --grid-gutter: var(--grid-wide-gutter);
    --grid-columns: var(--grid-wide-column);
  }
}

.z-grid {
  display: grid;
  width: 100%;
  column-gap: var(--grid-gutter);
  grid-template-columns: repeat(var(--grid-columns), 1fr);

  .col-full {
    grid-column: 1 / -1;
  }

  .col-1 {
    grid-column: span 1;
  }

  .col-2 {
    grid-column: span 2;
  }

  .col-3 {
    grid-column: span 3;
  }

  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12 {
    grid-column: span 4;
  }

  .col-start-1 {
    grid-column-start: 1;
  }

  .col-start-2 {
    grid-column-start: 2;
  }

  .col-start-3 {
    grid-column-start: 3;
  }

  .col-start-4,
  .col-start-5,
  .col-start-6,
  .col-start-7,
  .col-start-8,
  .col-start-9,
  .col-start-10,
  .col-start-11,
  .col-start-12 {
    grid-column-start: 4;
  }

  /*
  .-col-start-1 is intentionally left out
*/

  .-col-start-2 {
    grid-column-start: -2;
  }

  .-col-start-3 {
    grid-column-start: -3;
  }

  .-col-start-4 {
    grid-column-start: -4;
  }

  .-col-start-5,
  .-col-start-6,
  .-col-start-7,
  .-col-start-8,
  .-col-start-9,
  .-col-start-10,
  .-col-start-11,
  .-col-start-12,
  .-col-start-13 {
    grid-column-start: -5;
  }

  .col-end-last {
    grid-column-end: -1;
  }

  /*
  .col-end-1 is intentionally left out
*/

  .col-end-2 {
    grid-column-end: 2;
  }

  .col-end-3 {
    grid-column-end: 3;
  }

  .col-end-4 {
    grid-column-end: 4;
  }

  /*
  This means "end this column where column 5 start",
  which is the same as saying "end this column where column 4 end"
*/
  .col-end-5,
  .col-end-6,
  .col-end-7,
  .col-end-8,
  .col-end-9,
  .col-end-10,
  .col-end-11,
  .col-end-12,
  .col-end-13 {
    grid-column-end: 5;
  }

  .-col-end-1 {
    grid-column-end: -1;
  }

  .-col-end-2 {
    grid-column-end: -2;
  }

  .-col-end-3 {
    grid-column-end: -3;
  }

  .-col-end-4,
  .-col-end-5,
  .-col-end-6,
  .-col-end-7,
  .-col-end-8,
  .-col-end-9,
  .-col-end-10,
  .-col-end-11,
  .-col-end-12 {
    grid-column-end: -4;
  }

  @media (max-width: 767px) {
    .mobile-col-full {
      grid-column: 1 / -1;
    }

    .mobile-col-1 {
      grid-column: span 1;
    }

    .mobile-col-2 {
      grid-column: span 2;
    }

    .mobile-col-3 {
      grid-column: span 3;
    }

    .mobile-col-4 {
      grid-column: span 4;
    }
  }

  @media (min-width: 768px) {
    .col-5 {
      grid-column: span 5;
    }

    .col-6 {
      grid-column: span 6;
    }

    .col-7 {
      grid-column: span 7;
    }

    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12 {
      grid-column: span 8;
    }

    .col-start-5 {
      grid-column-start: 5;
    }

    .col-start-6 {
      grid-column-start: 6;
    }

    .col-start-7 {
      grid-column-start: 7;
    }

    .col-start-8,
    .col-start-9,
    .col-start-10,
    .col-start-11,
    .col-start-12 {
      grid-column-start: 8;
    }

    .-col-start-6 {
      grid-column-start: -6;
    }

    .-col-start-7 {
      grid-column-start: -7;
    }

    .-col-start-8 {
      grid-column-start: -8;
    }

    .-col-start-9,
    .-col-start-10,
    .-col-start-11,
    .-col-start-12,
    .-col-start-13 {
      grid-column-start: -9;
    }

    .col-end-6 {
      grid-column-end: 6;
    }

    .col-end-7 {
      grid-column-end: 7;
    }

    .col-end-8 {
      grid-column-end: 8;
    }

    .col-end-9,
    .col-end-10,
    .col-end-11,
    .col-end-12,
    .col-end-13 {
      grid-column-end: 9;
    }

    .-col-end-5 {
      grid-column-end: -5;
    }

    .-col-end-6 {
      grid-column-end: -6;
    }

    .-col-end-7 {
      grid-column-end: -7;
    }

    .-col-end-8,
    .-col-end-9,
    .-col-end-10,
    .-col-end-11,
    .-col-end-12 {
      grid-column-end: -8;
    }
  }

  @media (min-width: 768px) and (max-width: 1151px) {
    .tablet-col-full {
      grid-column: 1 / -1;
    }

    .tablet-col-1 {
      grid-column: span 1;
    }

    .tablet-col-2 {
      grid-column: span 2;
    }

    .tablet-col-3 {
      grid-column: span 3;
    }

    .tablet-col-4 {
      grid-column: span 4;
    }

    .tablet-col-5 {
      grid-column: span 5;
    }

    .tablet-col-6 {
      grid-column: span 6;
    }

    .tablet-col-7 {
      grid-column: span 7;
    }

    .tablet-col-8 {
      grid-column: span 8;
    }

    .tablet-col-start-1 {
      grid-column-start: 1;
    }

    .tablet-col-start-2 {
      grid-column-start: 2;
    }

    .tablet-col-start-3 {
      grid-column-start: 3;
    }

    .tablet-col-start-4 {
      grid-column-start: 4;
    }

    .tablet-col-start-5 {
      grid-column-start: 5;
    }

    .tablet-col-start-6 {
      grid-column-start: 6;
    }

    .tablet-col-start-7 {
      grid-column-start: 7;
    }

    .tablet-col-start-8 {
      grid-column-start: 8;
    }

    .-tablet-col-start-2 {
      grid-column-start: -2;
    }

    .-tablet-col-start-3 {
      grid-column-start: -3;
    }

    .-tablet-col-start-4 {
      grid-column-start: -4;
    }

    .-tablet-col-start-5 {
      grid-column-start: -5;
    }

    .-tablet-col-start-6 {
      grid-column-start: -6;
    }

    .-tablet-col-start-7 {
      grid-column-start: -7;
    }

    .-tablet-col-start-8 {
      grid-column-start: -8;
    }

    .tablet-col-end-2 {
      grid-column-end: 2;
    }

    .tablet-col-end-3 {
      grid-column-end: 3;
    }

    .tablet-col-end-4 {
      grid-column-end: 4;
    }

    .tablet-col-end-6 {
      grid-column-end: 6;
    }

    .tablet-col-end-7 {
      grid-column-end: 7;
    }

    .tablet-col-end-8 {
      grid-column-end: 8;
    }

    .tablet-col-end-last {
      grid-column-end: -1;
    }

    .-tablet-col-end-1 {
      grid-column-end: -1;
    }

    .-tablet-col-end-2 {
      grid-column-end: -2;
    }

    .-tablet-col-end-3 {
      grid-column-end: -3;
    }

    .-tablet-col-end-4 {
      grid-column-end: -4;
    }

    .-tablet-col-end-5 {
      grid-column-end: -5;
    }

    .-tablet-col-end-6 {
      grid-column-end: -6;
    }

    .-tablet-col-end-7 {
      grid-column-end: -7;
    }

    .-tablet-col-end-8 {
      grid-column-end: -8;
    }
  }

  @media (min-width: 1152px) {
    .col-9 {
      grid-column: span 9;
    }

    .col-10 {
      grid-column: span 10;
    }

    .col-11 {
      grid-column: span 11;
    }

    .col-12 {
      grid-column: span 12;
    }

    .col-start-9 {
      grid-column-start: 9;
    }

    .col-start-10 {
      grid-column-start: 10;
    }

    .col-start-11 {
      grid-column-start: 11;
    }

    .col-start-12 {
      grid-column-start: 12;
    }

    .-col-start-10 {
      grid-column-start: -10;
    }

    .-col-start-11 {
      grid-column-start: -11;
    }

    .-col-start-12 {
      grid-column-start: -12;
    }

    .-col-start-13 {
      grid-column-start: -13;
    }

    .col-end-10 {
      grid-column-end: 10;
    }

    .col-end-11 {
      grid-column-end: 11;
    }

    .col-end-12 {
      grid-column-end: 12;
    }

    .col-end-13 {
      grid-column-end: 13;
    }

    .-col-end-9 {
      grid-column-end: -9;
    }

    .-col-end-10 {
      grid-column-end: -10;
    }

    .-col-end-11 {
      grid-column-end: -11;
    }

    .-col-end-12 {
      grid-column-end: -12;
    }
  }

  @media (min-width: 1152px) and (max-width: 1365px) {
    .desktop-col-full {
      grid-column: 1 / -1;
    }

    .desktop-col-1 {
      grid-column: span 1;
    }

    .desktop-col-2 {
      grid-column: span 2;
    }

    .desktop-col-3 {
      grid-column: span 3;
    }

    .desktop-col-4 {
      grid-column: span 4;
    }

    .desktop-col-5 {
      grid-column: span 5;
    }

    .desktop-col-6 {
      grid-column: span 6;
    }

    .desktop-col-7 {
      grid-column: span 7;
    }

    .desktop-col-8 {
      grid-column: span 8;
    }

    .desktop-col-9 {
      grid-column: span 9;
    }

    .desktop-col-10 {
      grid-column: span 10;
    }

    .desktop-col-11 {
      grid-column: span 11;
    }

    .desktop-col-12 {
      grid-column: span 12;
    }

    .desktop-col-start-1 {
      grid-column-start: 1;
    }

    .desktop-col-start-2 {
      grid-column-start: 2;
    }

    .desktop-col-start-3 {
      grid-column-start: 3;
    }

    .desktop-col-start-4 {
      grid-column-start: 4;
    }

    .desktop-col-start-5 {
      grid-column-start: 5;
    }

    .desktop-col-start-6 {
      grid-column-start: 6;
    }

    .desktop-col-start-7 {
      grid-column-start: 7;
    }

    .desktop-col-start-8 {
      grid-column-start: 8;
    }

    .desktop-col-start-9 {
      grid-column-start: 9;
    }

    .desktop-col-start-10 {
      grid-column-start: 10;
    }

    .desktop-col-start-11 {
      grid-column-start: 11;
    }

    .desktop-col-start-12 {
      grid-column-start: 12;
    }

    .-desktop-col-start-2 {
      grid-column-start: -2;
    }

    .-desktop-col-start-3 {
      grid-column-start: -3;
    }

    .-desktop-col-start-4 {
      grid-column-start: -4;
    }

    .-desktop-col-start-5 {
      grid-column-start: -5;
    }

    .-desktop-col-start-6 {
      grid-column-start: -6;
    }

    .-desktop-col-start-7 {
      grid-column-start: -7;
    }

    .-desktop-col-start-8 {
      grid-column-start: -8;
    }

    .-desktop-col-start-9 {
      grid-column-start: -9;
    }

    .-desktop-col-start-10 {
      grid-column-start: -10;
    }

    .-desktop-col-start-11 {
      grid-column-start: -11;
    }

    .-desktop-col-start-12 {
      grid-column-start: -12;
    }

    .desktop-col-end-2 {
      grid-column-end: 2;
    }

    .desktop-col-end-3 {
      grid-column-end: 3;
    }

    .desktop-col-end-4 {
      grid-column-end: 4;
    }

    .desktop-col-end-6 {
      grid-column-end: 6;
    }

    .desktop-col-end-7 {
      grid-column-end: 7;
    }

    .desktop-col-end-8 {
      grid-column-end: 8;
    }

    .desktop-col-end-9 {
      grid-column-end: 9;
    }

    .desktop-col-end-10 {
      grid-column-end: 10;
    }

    .desktop-col-end-11 {
      grid-column-end: 11;
    }

    .desktop-col-end-12 {
      grid-column-end: 12;
    }

    .desktop-col-end-last {
      grid-column-end: -1;
    }

    .-desktop-col-end-1 {
      grid-column-end: -1;
    }

    .-desktop-col-end-2 {
      grid-column-end: -2;
    }

    .-desktop-col-end-3 {
      grid-column-end: -3;
    }

    .-desktop-col-end-4 {
      grid-column-end: -4;
    }

    .-desktop-col-end-5 {
      grid-column-end: -5;
    }

    .-desktop-col-end-6 {
      grid-column-end: -6;
    }

    .-desktop-col-end-7 {
      grid-column-end: -7;
    }

    .-desktop-col-end-8 {
      grid-column-end: -8;
    }

    .-desktop-col-end-9 {
      grid-column-end: -9;
    }

    .-desktop-col-end-10 {
      grid-column-end: -10;
    }

    .-desktop-col-end-11 {
      grid-column-end: -11;
    }

    .-desktop-col-end-12 {
      grid-column-end: -12;
    }
  }

  @media (min-width: 1366px) {
    .wide-col-full {
      grid-column: 1 / -1;
    }

    .wide-col-1 {
      grid-column: span 1;
    }

    .wide-col-2 {
      grid-column: span 2;
    }

    .wide-col-3 {
      grid-column: span 3;
    }

    .wide-col-4 {
      grid-column: span 4;
    }

    .wide-col-5 {
      grid-column: span 5;
    }

    .wide-col-6 {
      grid-column: span 6;
    }

    .wide-col-7 {
      grid-column: span 7;
    }

    .wide-col-8 {
      grid-column: span 8;
    }

    .wide-col-9 {
      grid-column: span 9;
    }

    .wide-col-10 {
      grid-column: span 10;
    }

    .wide-col-11 {
      grid-column: span 11;
    }

    .wide-col-12 {
      grid-column: span 12;
    }

    .wide-col-start-1 {
      grid-column-start: 1;
    }

    .wide-col-start-2 {
      grid-column-start: 2;
    }

    .wide-col-start-3 {
      grid-column-start: 3;
    }

    .wide-col-start-4 {
      grid-column-start: 4;
    }

    .wide-col-start-5 {
      grid-column-start: 5;
    }

    .wide-col-start-6 {
      grid-column-start: 6;
    }

    .wide-col-start-7 {
      grid-column-start: 7;
    }

    .wide-col-start-8 {
      grid-column-start: 8;
    }

    .wide-col-start-9 {
      grid-column-start: 9;
    }

    .wide-col-start-10 {
      grid-column-start: 10;
    }

    .wide-col-start-11 {
      grid-column-start: 11;
    }

    .wide-col-start-12 {
      grid-column-start: 12;
    }

    .-wide-col-start-2 {
      grid-column-start: -2;
    }

    .-wide-col-start-3 {
      grid-column-start: -3;
    }

    .-wide-col-start-4 {
      grid-column-start: -4;
    }

    .-wide-col-start-5 {
      grid-column-start: -5;
    }

    .-wide-col-start-6 {
      grid-column-start: -6;
    }

    .-wide-col-start-7 {
      grid-column-start: -7;
    }

    .-wide-col-start-8 {
      grid-column-start: -8;
    }

    .-wide-col-start-9 {
      grid-column-start: -9;
    }

    .-wide-col-start-10 {
      grid-column-start: -10;
    }

    .-wide-col-start-11 {
      grid-column-start: -11;
    }

    .-wide-col-start-12 {
      grid-column-start: -12;
    }

    .wide-col-end-2 {
      grid-column-end: 2;
    }

    .wide-col-end-3 {
      grid-column-end: 3;
    }

    .wide-col-end-4 {
      grid-column-end: 4;
    }

    .wide-col-end-6 {
      grid-column-end: 6;
    }

    .wide-col-end-7 {
      grid-column-end: 7;
    }

    .wide-col-end-8 {
      grid-column-end: 8;
    }

    .wide-col-end-9 {
      grid-column-end: 9;
    }

    .wide-col-end-10 {
      grid-column-end: 10;
    }

    .wide-col-end-11 {
      grid-column-end: 11;
    }

    .wide-col-end-12 {
      grid-column-end: 12;
    }

    .wide-col-end-last {
      grid-column-end: -1;
    }

    .-wide-col-end-1 {
      grid-column-end: -1;
    }

    .-wide-col-end-2 {
      grid-column-end: -2;
    }

    .-wide-col-end-3 {
      grid-column-end: -3;
    }

    .-wide-col-end-4 {
      grid-column-end: -4;
    }

    .-wide-col-end-5 {
      grid-column-end: -5;
    }

    .-wide-col-end-6 {
      grid-column-end: -6;
    }

    .-wide-col-end-7 {
      grid-column-end: -7;
    }

    .-wide-col-end-8 {
      grid-column-end: -8;
    }

    .-wide-col-end-9 {
      grid-column-end: -9;
    }

    .-wide-col-end-10 {
      grid-column-end: -10;
    }

    .-wide-col-end-11 {
      grid-column-end: -11;
    }

    .-wide-col-end-12 {
      grid-column-end: -12;
    }
  }
}

/* Default size: big. Default color variant: primary01 */
.z-fab {
  --z-fab-right-offset: var(--grid-margin);
  --z-fab-bottom-offset: var(--grid-margin);
  --z-fab-icon-size: 20px;
  --z-fab-icon-fill: var(--color-inverse-icon);

  position: fixed;
  z-index: 1;
  right: var(--z-fab-right-offset);
  bottom: var(--z-fab-bottom-offset);
  display: flex;
  max-width: 48px;
  box-sizing: border-box;
  align-items: center;
  padding: 14px;
  background-color: var(--color-primary01);
  border-radius: 24px;
  box-shadow: var(--shadow-4);
  color: var(--color-text-inverse);
  column-gap: 0;
  cursor: pointer;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-3);
  font-weight: var(--font-rg);
  line-height: 1.25;
  transition: all 0.2s ease-in-out;
}

.z-fab:focus {
  box-shadow: var(--shadow-focus-primary);
  outline: none;
}

button.z-fab {
  border: none;
}

a.z-fab {
  text-decoration: none;
}

.z-fab.z-fab-small {
  --z-fab-icon-size: 18px;

  max-width: 42px;
  padding: 12px;
  border-radius: 21px;
  font-size: var(--font-size-2);
  line-height: 1.285;
}

.z-fab.z-fab-x-small {
  --z-fab-icon-size: 16px;

  max-width: 36px;
  padding: 10px;
  border-radius: 18px;
  font-size: var(--font-size-1);
  line-height: 1.333;
}

.z-fab.z-fab-extended {
  max-width: 100%;
  column-gap: var(--space-unit);
}

.z-fab.z-fab-extended.z-fab-x-small {
  column-gap: calc(var(--space-unit) / 2);
}

.z-fab.z-fab-extended > *:not(z-icon) {
  opacity: 1;
}

/* color variants */
.z-fab.z-fab-primary03 {
  --z-fab-icon-fill: var(--color-primary01-icon);

  background-color: var(--color-primary03);
  color: var(--color-primary01-icon);
}

.z-fab.z-fab-surface01 {
  --z-fab-icon-fill: var(--color-primary01-icon);

  background-color: var(--color-surface01);
  color: var(--color-primary01-icon);
}

.z-fab.z-fab-surface02 {
  --z-fab-icon-fill: var(--color-primary01-icon);

  background-color: var(--color-background);
  color: var(--color-primary01-icon);
}

.z-fab.z-fab-surface04 {
  --z-fab-icon-fill: var(--color-inverse-icon);

  background-color: var(--color-surface04);
  color: var(--color-text-inverse);
}

.z-fab z-icon {
  --z-icon-width: var(--z-fab-icon-size);
  --z-icon-height: var(--z-fab-icon-size);

  fill: var(--z-fab-icon-fill);
}

.z-fab > *:not(z-icon) {
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  white-space: nowrap;
}

.z-fab.z-fab-extended > *:not(z-icon:first-child) {
  opacity: 1;
}

@media (hover: hover) {
  .z-fab.z-fab-extendable:hover {
    max-width: 100%;
    column-gap: var(--space-unit);
  }

  .z-fab.z-fab-extendable:hover > *:not(z-icon:first-child) {
    opacity: 1;
  }

  .z-fab.z-fab-x-small.z-fab-extendable:hover {
    column-gap: calc(var(--space-unit) / 2);
  }
}

button.z-link {
  padding: 0;
  border: 0;
  margin: 0;
  background-color: transparent;
}

a.z-link,
button.z-link {
  display: inline-flex;
  cursor: pointer;
  font-family: var(--font-family-sans);
  line-height: inherit;
  text-decoration: none;
}

a.z-link.z-link-icon,
button.z-link.z-link-icon {
  --z-icon-width: 1.125em;
  --z-icon-height: 1.125em;

  align-items: center;
  column-gap: 0.5em;
}

a.z-link.z-link-sb,
button.z-link.z-link-sb {
  font-weight: var(--font-sb);
}

a.z-link.z-link-underline,
button.z-link.z-link-underline {
  text-decoration: underline;
}

a.z-link:hover,
button.z-link:hover,
a.z-link:focus,
button.z-link:focus,
a.z-link:active,
button.z-link:active {
  text-decoration: underline;
}

a.z-link:focus,
button.z-link:focus {
  box-shadow: var(--shadow-focus-primary);
  outline: none;
}

a.z-link.z-link-disabled,
button.z-link.z-link-disabled {
  box-shadow: none;
  color: var(--color-disabled03);
  cursor: default;
  fill: var(--color-disabled03);
  outline: none;
  pointer-events: none;
  text-decoration: none;
}

a.z-link,
button.z-link,
a.z-link.z-link-active,
button.z-link.z-link-active,
a.z-link:hover,
button.z-link:hover,
a.z-link.z-link-active:hover,
button.z-link.z-link-active:hover,
a.z-link:focus,
button.z-link:focus,
a.z-link.z-link-active:focus,
button.z-link.z-link-active:focus,
a.z-link:active,
button.z-link:active,
a.z-link.z-link-active:active,
button.z-link.z-link-active:active,
a.z-link:visited,
button.z-link:visited,
a.z-link.z-link-active:visited,
button.z-link.z-link-active:visited {
  color: var(--color-text-link-default);
  fill: var(--color-text-link-default);
}

a.z-link.z-link-blue,
button.z-link.z-link-blue,
a.z-link.z-link-blue.z-link-active,
button.z-link.z-link-blue.z-link-active {
  color: var(--color-text-link-blue);
  fill: var(--color-text-link-blue);
}

a.z-link.z-link-red,
button.z-link.z-link-red,
a.z-link.z-link-red.z-link-active,
button.z-link.z-link-red.z-link-active {
  color: var(--color-text-link-red);
  fill: var(--color-text-link-red);
}

a.z-link.z-link-inverse,
button.z-link.z-link-inverse,
a.z-link.z-link-inverse.z-link-active,
button.z-link.z-link-inverse.z-link-active {
  color: var(--color-text-link-inverse);
  fill: var(--color-text-link-inverse);
}

a.z-link.z-link-blue:hover,
button.z-link.z-link-blue:hover {
  color: var(--color-text-link-blue-hover);
  fill: var(--color-text-link-blue-hover);
}

a.z-link.z-link-red:hover,
button.z-link.z-link-red:hover {
  color: var(--color-text-link-red-hover);
  fill: var(--color-text-link-red-hover);
}

a.z-link.z-link-inverse:hover,
button.z-link.z-link-inverse:hover {
  color: var(--color-text-link-inverse);
  fill: var(--color-text-link-inverse);
}

a.z-link.z-link-blue:active,
button.z-link.z-link-blue:active,
a.z-link.z-link-blue:focus,
button.z-link.z-link-blue:focus {
  color: var(--color-text-link-blue-active);
  fill: var(--color-text-link-blue-active);
}

a.z-link.z-link-red:active,
button.z-link.z-link-red:active,
a.z-link.z-link-red:focus,
button.z-link.z-link-red:focus {
  color: var(--color-text-link-red-active);
  fill: var(--color-text-link-red-active);
}

a.z-link.z-link-inverse:active,
button.z-link.z-link-inverse:active,
a.z-link.z-link-inverse:focus,
button.z-link.z-link-inverse:focus {
  color: var(--color-text-link-inverse);
  fill: var(--color-text-link-inverse);
}

a.z-link.z-link-blue:visited,
button.z-link.z-link-blue:visited {
  color: var(--color-text-link-blue-visited);
  fill: var(--color-text-link-blue-visited);
}

a.z-link.z-link-red:visited,
button.z-link.z-link-red:visited {
  color: var(--color-text-link-red-visited);
  fill: var(--color-text-link-red-visited);
}

a.z-link.z-link-inverse:visited,
button.z-link.z-link-inverse:visited {
  color: var(--color-text-link-inverse);
  fill: var(--color-text-link-inverse);
}



.theme-black-yellow {
  --color-background: var(--color-white);
  --color-primary01: var(--gray950);
  --color-primary02: var(--gray50);
  --color-primary03: var(--gray100);
  --color-secondary01: var(--yellow500);
  --color-secondary02: var(--yellow500);
  --color-secondary03: var(--yellow500);
  --color-default-text: var(--gray950);
  --color-text02: var(--gray950);
  --color-text-inverse: var(--color-white);
  --color-primary01-icon: var(--gray950);
  --color-hover-primary: var(--gray800);
  --color-hover-secondary: var(--gray950);
  --color-hover-tertiary: var(--gray950);
  --color-hover-surface: var(--gray50);
  --color-hover-primary-text: var(--gray950);
  --color-hover-light: var(--yellow500);
  --color-active-primary: var(--gray800);
  --color-active-secondary: var(--gray800);
  --color-active-tertiary: var(--gray800);
  --color-active-surface: var(--gray300);
  --color-active-light: var(--gray400);
  --color-pressed-primary: var(--gray800);
  --color-highlight: var(--gray950);
  --shadow-focus-primary: 0 0 0 2px var(--color-white), 0 0 2px 5px var(--color-highlight);
}

.theme-dark {
  --color-primary01: var(--color-white);
  --color-primary02: var(--gray800);
  --color-primary03: var(--gray700);
  --color-hover-primary: var(--gray100);
  --color-pressed-primary: var(--gray25);
  --color-secondary01: var(--red500);
  --color-secondary02: var(--red900);
  --color-secondary03: var(--red800);
  --color-hover-secondary: var(--red200);
  --color-active-primary: var(--gray25);
  --color-surface01: var(--gray900);
  --color-surface02: var(--gray700);
  --color-surface03: var(--gray300);
  --color-surface04: var(--gray100);
  --color-surface05: var(--color-white);
  --color-default-text: var(--gray100);
  --color-text02: var(--gray900);
  --color-text03: var(--gray700);
  --color-text05: var(--gray500);
  --color-text-inverse: var(--gray900);
  --color-pressed-text: var(--gray300);
  --color-hover-text: var(--gray300);
  --color-disabled01: var(--gray700);
  --color-disabled02: var(--gray900);
  --color-primary01-icon: var(--color-white);
  --color-disabled01-icon: var(--gray700);
  --color-disabled02-icon: var(--gray900);
  --color-pressed-icon: var(--gray300);
  --color-hover-icon: var(--gray300);
  --color-active-primary-icon: var(--gray300);
  --color-hover-primary-icon: var(--gray300);
  --color-default-icon: var(--gray100);
  --color-error01: var(--red50);
  --color-error02: var(--red50);
  --color-danger01: var(--red50);
  --color-danger02: var(--red50);
  --color-text-error: var(--red50);
  --color-inverse-error: var(--red700);
  --color-hover-error: var(--red300);
  --color-hover-danger: var(--red300);
  --color-success01: var(--green50);
  --color-success02: var(--green50);
  --color-inverse-success: var(--green700);
  --color-hover-success: var(--green300);
  --color-inverse-hover-success: var(--green50);
  --color-inverse-hover-error: var(--red50);
  --color-warning01: var(--yellow300);
  --color-warning02: var(--yellow300);
  --color-inverse-warning: var(--yellow700);
  --color-hover-warning: var(--yellow50);
  --color-inverse-hover-warning: var(--yellow300);

  background: var(--color-surface01);

  --shadow-focus-primary: 0 0 0 2px var(--gray800), 0 0 2px 5px var(--blue25);
}

:root,
.theme-default {
  --color-background: var(--gray50);
  --color-primary01: var(--blue500);
  --color-primary02: var(--blue25);
  --color-primary03: var(--blue50);
  --color-secondary01: var(--red500);
  --color-secondary02: var(--red25);
  --color-secondary03: var(--red50);
  --color-danger01: var(--red500);
  --color-danger02: var(--red500);
  --color-error01: var(--red500);
  --color-error02: var(--red500);
  --color-error-inverse: var(--red50);
  --color-text-error: var(--red700);
  --color-success01: var(--green500);
  --color-success02: var(--green500);
  --color-text-success: var(--color-success-default);
  --color-success-inverse: var(--green50);
  --color-warning01: var(--yellow500);
  --color-warning02: var(--yellow500);
  --color-text-warning: var(--color-warning-default);
  --color-warning-inverse: var(--yellow50);
  --color-surface01: var(--color-white);
  --color-surface02: var(--gray100);
  --color-surface03: var(--gray300);
  --color-surface04: var(--gray700);
  --color-surface05: var(--gray900);
  --color-default-text: var(--gray900);
  --color-text02: var(--gray100);
  --color-text03: var(--gray300);
  --color-text05: var(--gray600);
  --color-text-inverse: var(--color-white);
  --color-primary01-icon: var(--blue500);
  --color-default-icon: var(--gray900);
  --color-inverse-icon: var(--color-white);
  --color-hover-icon: var(--color-black);
  --color-pressed-icon: var(--gray700);
  --color-disabled03-icon: var(--gray500);
  --color-disabled01-icon: var(--gray300);
  --color-disabled02-icon: var(--gray100);
  --color-hover-primary-icon: var(--blue800);
  --color-active-primary-icon: var(--blue400);
  --color-form-background: var(--color-white);
  --color-hover-primary: var(--blue800);
  --color-hover-primary-text: var(--color-black);
  --color-hover-secondary: var(--red800);
  --color-hover-tertiary: var(--blue800);
  --color-hover-surface: var(--gray50);
  --color-hover-light: var(--blue400);
  --color-hover-danger: var(--red700);
  --color-hover-error: var(--red700);
  --color-hover-success: var(--green700);
  --color-hover-warning: var(--yellow700);
  --color-active-primary: var(--blue800);
  --color-active-secondary: var(--red400);
  --color-active-tertiary: var(--blue800);
  --color-active-light: var(--blue400);
  --color-pressed-primary: var(--blue400);
  --color-pressed-secondary: var(--red400);
  --color-selected-light: var(--gray300);
  --color-highlight: var(--blue400);
  --color-ghost01: var(--gray300);
  --color-ghost02: var(--gray500);
  --color-disabled01: var(--gray300);
  --color-disabled02: var(--gray100);
  --color-disabled03: var(--gray500);
  --shadow-focus-primary: 0 0 0 2px var(--color-white), 0 0 2px 5px var(--blue800);
  --color-inverse-hover-error: var(--red500);
  --color-inverse-hover-success: var(--green500);
  --color-inverse-hover-warning: var(--yellow500);
  --color-inverse-error: var(--red50);
  --color-inverse-success: var(--green50);
  --color-inverse-warning: var(--yellow50);
}

.theme-red {
  --color-background: var(--gray50);

  /* primary */
  --color-active-primary-icon: var(--red400);
  --color-active-primary: var(--red400);
  --color-hover-primary-icon: var(--red800);
  --color-hover-primary: var(--red800);
  --color-pressed-primary: var(--red400);
  --color-primary01-icon: var(--red500);
  --color-primary02: var(--red25);
  --color-primary03: var(--red50);
  --color-primary01: var(--red500);

  /* secondary */
  --color-active-secondary: var(--gray400);
  --color-hover-secondary: var(--gray800);
  --color-pressed-secondary: var(--gray400);
  --color-secondary01: var(--gray500);
  --color-secondary02: var(--gray25);
  --color-secondary03: var(--gray50);

  /* surface */
  --color-surface01: var(--color-white);
  --color-surface02: var(--gray100);
  --color-surface03: var(--gray300);
  --color-surface04: var(--gray700);
  --color-surface05: var(--gray900);

  /* text */
  --color-default-text: var(--gray900);
  --color-hover-text: var(--color-black);
  --color-pressed-text: var(--gray700);
  --color-text-inverse: var(--color-white);
  --color-text02: var(--gray100);
  --color-text03: var(--gray300);
  --color-text05: var(--gray500);

  /* icons */
  --color-default-icon: var(--gray900);
  --color-hover-icon: var(--color-black);
  --color-inverse-icon: var(--color-white);
  --color-pressed-icon: var(--gray700);
}


z-accordion + z-accordion {
  border-top: none;
}

z-accordion[variant="background"]:first-of-type:not(:last-of-type),
z-accordion[variant="background"]:first-of-type:not(:last-of-type)::part(summary),
z-accordion[variant="background"]:first-of-type:not(:last-of-type)::part(summary)::before,
z-accordion[variant="background"]:first-of-type:not(:last-of-type)::part(content)::before {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

z-accordion[variant="background"] + z-accordion[variant="background"],
z-accordion[variant="background"] + z-accordion[variant="background"]::part(summary),
z-accordion[variant="background"] + z-accordion[variant="background"]::part(summary)::before,
z-accordion[variant="background"] + z-accordion[variant="background"]::part(content)::before {
  border-radius: 0;
}

z-accordion[variant="background"] + z-accordion[variant="background"]:last-of-type {
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

z-accordion[variant="background"] + z-accordion[variant="background"]:last-of-type:not([open])::part(summary) {
  /* border-radius of the accordion - width of the accordion's border */
  border-bottom-right-radius: calc(var(--border-radius) - var(--border-size-small));
}

z-accordion[variant="background"] + z-accordion[variant="background"]:last-of-type:not([open])::part(summary),
z-accordion[variant="background"] + z-accordion[variant="background"]:last-of-type:not([open])::part(summary)::before,
z-accordion[variant="background"] + z-accordion[variant="background"]:last-of-type::part(content)::before {
  /* border-radius of the accordion - width of the accordion's border */
  border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));
}