@zanichelli/albe-web-components 6.4.0 → 6.5.0-offcanvasTest

package/www/build/p-e680285b.css

@@ -0,0 +1,1636 @@
+/* stylelint-disable-next-line import-notation */
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,700;1,700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap");
+:root {
+  --myz-blue: #0056c1;
+  --myz-blue-dark: #003476;
+  --myz-blue-light: #1973e1;
+  --myz-blue-lighter: #e1f0ff;
+  --myz-red: #e2001a;
+  --myz-red-dark: #80000f;
+  --myz-red-light: #ff808e;
+  --accent: #add2ff;
+  --accent-dark: #78b5ff;
+  --accent-light: #d0e9ff;
+  --accent-lighter: #ebf4ff;
+  --bg-grey-050: #f6f6f6;
+  --bg-grey-200: #e6e6e6;
+  --bg-grey-700: #676b6f;
+  --bg-grey-800: #424548;
+  --bg-grey-900: #333333;
+  --bg-white: #ffffff;
+  --bg-neutral-100: #e8ebee;
+  --bg-neutral-150: #d9dee3;
+  --bg-neutral-200: #cad1d8;
+  --bg-neutral-300: #aeb8c2;
+  --bg-neutral-400: #919eac;
+  --bg-neutral-500: #738596;
+  --bg-neutral-600: #5c6b7a;
+  --bg-neutral-700: #46525d;
+  --bg-neutral-800: #303840;
+  --status-error-red: #dc3122;
+  --status-error-red-dark: #7e0a00;
+  --status-error-red-light: #ff9c9c;
+  --status-error-red-lighter: #fdefee;
+  --status-warning-yellow: #f6bb3b;
+  --status-warning-yellow-dark: #85641a;
+  --status-warning-yellow-light: #fee17f;
+  --status-warning-yellow-lighter: #fbf4e6;
+  --status-success-green: #417505;
+  --status-success-green-dark: #233a00;
+  --status-success-green-light: #95d150;
+  --status-success-green-lighter: #effce0;
+  --text-grey-800: #424548;
+  --text-grey-700: #676b6f;
+  --text-grey-200: #e6e6e6;
+  --text-grey-050: #f6f6f6;
+  --text-white: #ffffff;
+}
+
+:root {
+  --border-base: 2px;
+  --border-size-small: 1px;
+  --radius-base: 4px;
+  --border-radius-base: 4px;
+  --border-radius-min: 0;
+  --border-radius-max: 100%;
+}
+
+:root {
+  --shadow-inset-2: inset 0 2px 4px 0 rgba(66, 69, 72, 0.35);
+  --shadow-inset-4: inset 0 4px 8px 0 rgba(66, 69, 72, 0.35);
+  --shadow-0: 0 0 0 0 rgba(66, 69, 72, 0.40);
+  --shadow-1: 0 1px 2px 0 rgba(66, 69, 72, 0.40);
+  --shadow-2: 0 2px 4px 0 rgba(66, 69, 72, 0.40);
+  --shadow-3: 0 3px 6px 0 rgba(66, 69, 72, 0.40);
+  --shadow-4: 0 4px 8px 0 rgba(66, 69, 72, 0.40);
+  --shadow-6: 0 6px 12px 0 rgba(66, 69, 72, 0.40);
+  --shadow-8: 0 8px 16px 0 rgba(66, 69, 72, 0.40);
+  --shadow-12: 0 12px 24px 0 rgba(66, 69, 72, 0.35);
+  --shadow-16: 0 16px 32px 0 rgba(66, 69, 72, 0.35);
+  --shadow-24: 0 24px 48px 0 rgba(66, 69, 72, 0.35);
+}
+
+:root {
+  --basex1: var(--space-unit);
+  --basex2: calc(var(--space-unit) * 2);
+  --basex3: calc(var(--space-unit) * 3);
+  --basex4: calc(var(--space-unit) * 4);
+  --basex5: calc(var(--space-unit) * 5);
+  --basex6: calc(var(--space-unit) * 6);
+  --basex7: calc(var(--space-unit) * 7);
+  --basex8: calc(var(--space-unit) * 8);
+  --half-x1: calc(var(--space-unit) * .5);
+  --half-x3: calc(var(--space-unit) * 1.5);
+  --half-x5: calc(var(--space-unit) * 2.5);
+  --half-x7: calc(var(--space-unit) * 3.5);
+  --half-x9: calc(var(--space-unit) * 4.5);
+  --half-x11: calc(var(--space-unit) * 5.5);
+  --half-x13: calc(var(--space-unit) * 6.5);
+  --half-x14: calc(var(--space-unit) * 7.5);
+}
+
+:root {
+  --gray950: #121212;
+  --gray900: #292929;
+  --gray800: #3D3D3D;
+  --gray700: #525252;
+  --gray600: #666666;
+  --gray500: #9B9B9B;
+  --gray400: #ADADAD;
+  --gray300: #C2C2C2;
+  --gray200: #D6D6D6;
+  --gray100: #EBEBEB;
+  --gray50: #F6F6F6;
+}
+
+:root {
+  --blue950: #001229;
+  --blue900: #001F46;
+  --blue800: #002C63;
+  --blue700: #003981;
+  --blue600: #0047A0;
+  --blue500: #0056C1;
+  --blue400: #2E76CE;
+  --blue300: #5893DB;
+  --blue200: #82B0E7;
+  --blue100: #ACCDF3;
+  --blue50: #D6EAFF;
+}
+
+: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: #E2011A;
+  --red400: #EB4F60;
+  --red300: #EB4F60;
+  --red200: #F49DA7;
+  --red100: #F49DA7;
+  --red50: #FDEFEE;
+}
+
+: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 {
+  --color-error-default: #DC3122;
+  --color-success-default: #417505;
+  --color-warning-default: #F6BB3B;
+  --color-black: #000000;
+  --color-white: #FFFFFF;
+}
+
+:root {
+  /* font-family */
+  --font-family-sans: "IBM Plex Sans", sans-serif;
+  /* font-weight */
+  --font-lt: 300;
+  --font-rg: 400;
+  --font-sb: 600;
+  /* 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 */
+  /* backward compatibility */
+  --dashboard-font: var(--font-family-sans);
+}
+
+/* Typography classes */
+.heading-1,
+.heading-1-sb,
+.heading-1-lt {
+  font-size: var(--font-size-8);
+  font-weight: var(--font-rg);
+  line-height: 1.25;
+  letter-spacing: 0;
+}
+
+.heading-2,
+.heading-2-sb,
+.heading-2-lt {
+  font-size: var(--font-size-7);
+  font-weight: var(--font-rg);
+  line-height: 1.28;
+  letter-spacing: 0;
+}
+
+@media (max-width: 1151px) {
+  .heading-1,
+  .heading-1-sb,
+  .heading-1-lt {
+    font-size: var(--font-size-7);
+    line-height: 1.28;
+  }
+  .heading-2,
+  .heading-2-sb,
+  .heading-2-lt {
+    font-size: var(--font-size-6);
+    line-height: 1.33;
+  }
+}
+.heading-3,
+.heading-3-sb,
+.heading-3-lt {
+  font-size: var(--font-size-6);
+  font-weight: var(--font-rg);
+  line-height: 1.33;
+  letter-spacing: 0;
+}
+
+.heading-4,
+.heading-4-sb,
+.heading-4-lt {
+  font-size: var(--font-size-5);
+  font-weight: var(--font-rg);
+  line-height: 1.4;
+  letter-spacing: 0;
+}
+
+.body-1,
+.body-1-sb {
+  font-size: var(--font-size-5);
+  font-weight: var(--font-rg);
+  line-height: 1.4;
+  letter-spacing: 0;
+}
+
+.body-2,
+.body-2-sb {
+  font-size: var(--font-size-4);
+  font-weight: var(--font-rg);
+  line-height: 1.5;
+  letter-spacing: 0;
+}
+
+.body-3,
+.body-3-sb {
+  font-size: var(--font-size-3);
+  font-weight: var(--font-rg);
+  line-height: 1.5;
+  letter-spacing: 0;
+}
+
+.body-4,
+.body-4-sb {
+  font-size: var(--font-size-2);
+  font-weight: var(--font-rg);
+  line-height: 1.4;
+  letter-spacing: 0.16px;
+}
+
+.body-5,
+.body-5-sb {
+  font-size: var(--font-size-1);
+  font-weight: var(--font-rg);
+  line-height: 1.33;
+  letter-spacing: 0.32px;
+}
+
+.interactive-1,
+.interactive-1-sb {
+  font-size: var(--font-size-3);
+  font-weight: var(--font-rg);
+  line-height: 1.5;
+  letter-spacing: 0;
+}
+
+.interactive-2,
+.interactive-2-sb {
+  font-size: var(--font-size-2);
+  font-weight: var(--font-rg);
+  line-height: 1.4;
+  letter-spacing: 0.16px;
+}
+
+.interactive-3,
+.interactive-3-sb {
+  font-size: var(--font-size-1);
+  font-weight: var(--font-rg);
+  line-height: 1.33;
+  letter-spacing: 0.32px;
+}
+
+.helper,
+.helper-sb {
+  font-size: var(--font-size-1);
+  font-weight: var(--font-rg);
+  font-style: italic;
+  line-height: 1.33;
+  letter-spacing: 0.32px;
+}
+
+/* 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: rgba(66, 69, 72, 0.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;
+}
+
+/* Backward compatibility classes.
+This is the old `global-text.css` file from `design-system` repo.
+New tokens and classes are defined in `typography.css` file. */
+.t-weight-lt {
+  font-weight: var(--font-lt);
+}
+
+.t-weight-rg {
+  font-weight: var(--font-rg);
+}
+
+.t-weight-sb {
+  font-weight: var(--font-sb);
+}
+
+.t-align-center {
+  text-align: center;
+}
+
+.t-color-light {
+  color: var(--text-grey-medium);
+  fill: var(--text-grey-medium);
+}
+
+.caption-01 {
+  color: var(--text-grey-800);
+  fill: var(--text-grey-800);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+  font-size: var(--font-size-1);
+  line-height: 16px;
+}
+
+.helper-text-01 {
+  color: var(--text-grey-800);
+  fill: var(--text-grey-800);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+  font-style: italic;
+  font-size: var(--font-size-1);
+  line-height: 16px;
+}
+
+.body-short-01 {
+  color: var(--text-grey-800);
+  fill: var(--text-grey-800);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+  font-size: var(--font-size-2);
+  line-height: 20px;
+}
+
+.body-short-02 {
+  color: var(--text-grey-800);
+  fill: var(--text-grey-800);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+  font-size: var(--font-size-3);
+  line-height: 24px;
+}
+
+.body-long-01 {
+  color: var(--text-grey-800);
+  fill: var(--text-grey-800);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+  font-size: var(--font-size-2);
+  line-height: 20px;
+}
+
+.body-long-02 {
+  color: var(--text-grey-800);
+  fill: var(--text-grey-800);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-sb);
+  font-size: var(--font-size-3);
+  line-height: 24px;
+}
+
+.heading-01 {
+  color: var(--text-grey-800);
+  fill: var(--text-grey-800);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-sb);
+  font-size: var(--font-size-2);
+  line-height: 20px;
+}
+
+.heading-02 {
+  color: var(--text-grey-800);
+  fill: var(--text-grey-800);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-sb);
+  font-size: var(--font-size-3);
+  line-height: 24px;
+}
+
+.heading-03 {
+  color: var(--text-grey-800);
+  fill: var(--text-grey-800);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-sb);
+  font-size: var(--font-size-5);
+  line-height: 24px;
+}
+
+.heading-04 {
+  color: var(--text-grey-800);
+  fill: var(--text-grey-800);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-sb);
+  font-size: var(--font-size-7);
+  line-height: 36px;
+}
+
+.heading-05 {
+  color: var(--text-grey-800);
+  fill: var(--text-grey-800);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-sb);
+  font-size: var(--font-size-8);
+  line-height: 40px;
+}
+
+.expressive-heading-04 {
+  color: var(--text-grey-800);
+  fill: var(--text-grey-800);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+  font-size: var(--font-size-8);
+  line-height: 40px;
+}
+
+@media only screen and (max-width: 767px) {
+  .expressive-heading-04 {
+    font-size: var(--font-size-7);
+    line-height: 36px;
+  }
+}
+.expressive-heading-05 {
+  color: var(--text-grey-800);
+  fill: var(--text-grey-800);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+  font-size: var(--font-size-11);
+  line-height: 56px;
+}
+
+@media only screen and (max-width: 1024px) {
+  .expressive-heading-05 {
+    font-size: 36px;
+    line-height: 44px;
+  }
+}
+@media only screen and (max-width: 767px) {
+  .expressive-heading-05 {
+    font-size: var(--font-size-8);
+    line-height: 40px;
+  }
+}
+.expressive-paragraph-01 {
+  color: var(--text-grey-800);
+  fill: var(--text-grey-800);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-lt);
+  font-size: var(--font-size-8);
+  line-height: 40px;
+}
+
+@media only screen and (max-width: 767px) {
+  .expressive-paragraph-01 {
+    font-size: var(--font-size-6);
+    line-height: 32px;
+  }
+}
+.quotation-01 {
+  color: var(--text-grey-800);
+  fill: var(--text-grey-800);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-lt);
+  font-size: var(--font-size-8);
+  line-height: 40px;
+}
+
+@media only screen and (max-width: 767px) {
+  .quotation-01 {
+    font-size: var(--font-size-5);
+    line-height: 28px;
+  }
+}
+.quotation-02 {
+  color: var(--text-grey-800);
+  fill: var(--text-grey-800);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-lt);
+  font-size: var(--font-size-13);
+  line-height: 72px;
+}
+
+@media only screen and (max-width: 1024px) {
+  .quotation-02 {
+    font-size: 36px;
+    line-height: 44px;
+  }
+}
+@media only screen and (max-width: 767px) {
+  .quotation-02 {
+    font-size: var(--font-size-8);
+    line-height: 40px;
+  }
+}
+.display-01 {
+  color: var(--text-grey-800);
+  fill: var(--text-grey-800);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-lt);
+  font-size: var(--font-size-15);
+  line-height: 88px;
+}
+
+@media only screen and (max-width: 767px) {
+  .display-01 {
+    font-size: var(--font-size-10);
+    line-height: 52px;
+  }
+}
+.display-02 {
+  color: var(--text-grey-800);
+  fill: var(--text-grey-800);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-sb);
+  font-size: var(--font-size-15);
+  line-height: 88px;
+}
+
+@media only screen and (max-width: 767px) {
+  .display-02 {
+    font-size: var(--font-size-10);
+    line-height: 52px;
+  }
+}
+.display-03 {
+  color: var(--text-grey-800);
+  fill: var(--text-grey-800);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-lt);
+  font-size: 156px;
+  line-height: 164px;
+}
+
+@media only screen and (max-width: 1024px) {
+  .display-03 {
+    font-size: var(--font-size-14);
+    line-height: 80px;
+  }
+}
+@media only screen and (max-width: 767px) {
+  .display-03 {
+    font-size: var(--font-size-10);
+    line-height: 52px;
+  }
+}
+.display-04 {
+  color: var(--text-grey-800);
+  fill: var(--text-grey-800);
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-sb);
+  font-size: 156px;
+  line-height: 164px;
+}
+
+@media only screen and (max-width: 1024px) {
+  .display-04 {
+    font-size: var(--font-size-14);
+    line-height: 80px;
+  }
+}
+@media only screen and (max-width: 767px) {
+  .display-04 {
+    font-size: var(--font-size-10);
+    line-height: 52px;
+  }
+}
+: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);
+  }
+}
+.grid {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-columns), 1fr);
+  width: 100%;
+  column-gap: var(--grid-gutter);
+}
+
+.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;
+  }
+}
+
+/*# sourceMappingURL=tokens.css.map */
+
+:root {
+  --color-background: var(--gray50);
+  --color-primary01: var(--blue500);
+  --color-primary02: var(--blue500);
+  --color-primary03: var(--blue50);
+  --color-secondary01: var(--blue500);
+  --color-secondary02: var(--red500);
+  --color-secondary03: var(--red500);
+  --color-danger01: var(--color-error-default);
+  --color-danger02: var(--color-error-default);
+  --color-error01: var(--color-error-default);
+  --color-error02: var(--red800);
+  --color-error-inverse: var(--red50);
+  --color-text-error: var(--color-error-default);
+  --color-success01: var(--color-success-default);
+  --color-success02: var(--green800);
+  --color-text-success: var(--color-success-default);
+  --color-success-inverse: var(--green50);
+  --color-warning01: var(--color-warning-default);
+  --color-warning02: var(--yellow800);
+  --color-text-warning: var(--color-warning-default);
+  --color-warning-inverse: var(--yellow50);
+  --color-surface01: var(--color-white);
+  --color-surface02: var(--gray50);
+  --color-surface03: var(--gray200);
+  --color-surface04: var(--gray700);
+  --color-surface05: var(--gray800);
+  --color-text01: var(--gray800);
+  --color-text02: var(--gray800);
+  --color-text03: var(--gray300);
+  --color-text04: var(--color-white);
+  --color-text05: var(--gray600);
+  --color-text-inverse: var(--color-white);
+  --color-icon01: var(--blue500);
+  --color-icon02: var(--gray800);
+  --color-icon03: var(--color-white);
+  --color-input-field01: var(--color-white);
+  --color-input-field02: var(--color-white);
+  --color-hover-primary: var(--blue800);
+  --color-hover-primary-text: var(--color-black);
+  --color-hover-secondary: var(--blue800);
+  --color-hover-tertiary: var(--blue800);
+  --color-hover-surface: var(--gray50);
+  --color-hover-light: var(--blue400);
+  --color-hover-danger: var(--red800);
+  --color-active-primary: var(--blue800);
+  --color-active-secondary: var(--blue800);
+  --color-active-tertiary: var(--blue800);
+  --color-active-surface: var(--gray300);
+  --color-active-light: var(--blue400);
+  --color-pressed-primary: var(--blue400);
+  --color-pressed-secondary: var(--red400);
+  --color-selected-surface: var(--gray300);
+  --color-selected-light: var(--gray300);
+  --color-highlight: var(--blue100);
+  --color-ghost01: var(--gray300);
+  --color-ghost02: var(--gray500);
+  --color-disabled01: var(--gray200);
+  --color-disabled02: var(--gray700);
+  --color-disabled03: var(--gray500);
+  --shadow-focus-primary: 0 0 2px 2px var(--color-highlight);
+  --color-link-primary: var(--blue500);
+  --color-hover-link: var(--blue800);
+  --color-active-link: var(--blue800);
+  --color-pressed-link: var(--blue400);
+  --color-visited-link: var(--blue800);
+  --color-inverse-link: var(--color-white);
+  --color-inverse-hover-link: var(--color-white);
+  --color-inverse-active-link: var(--color-white);
+  --color-inverse-pressed-link: var(--color-white);
+  --color-inverse-visited-link: var(--gray300);
+}
+
+/*# sourceMappingURL=default.css.map */
+
+.theme-black-yellow {
+  --color-primary01: var(--gray950);
+  --color-primary02: var(--color-white);
+  --color-primary03: var(--gray100);
+  --color-secondary01: var(--yellow500);
+  --color-secondary02: var(--yellow500);
+  --color-secondary03: var(--yellow500);
+  --color-text01: var(--gray950);
+  --color-text-inverse: var(--color-white);
+  --color-icon01: var(--gray950);
+  --color-active-primary: var(--gray800);
+  --color-pressed-primary: var(--gray800);
+  --color-hover-primary: var(--gray800);
+  --color-hover-secondary: var(--gray950);
+  --color-hover-tertiary: var(--gray950);
+  --color-hover-primary-text: var(--gray950);
+  --color-hover-light: var(--yellow500);
+  --color-background: var(--color-white);
+  --color-hover-surface: var(--gray50);
+}
+
+/*# sourceMappingURL=black-yellow.css.map */
+
+.theme-dark {
+  --color-surface01: var(--gray800);
+  --color-primary01: var(--color-white);
+  --color-primary02: var(--gray800);
+  --color-hover-primary: var(--color-primary01);
+  --color-pressed-primary: var(--color-primary01);
+  --color-text02: var(--color-white);
+  --color-text-inverse: var(--gray800);
+  --color-link-primary: var(--color-white);
+  --color-hover-link: var(--color-link-primary);
+  --color-active-link: var(--color-link-primary);
+  --color-pressed-link: var(--color-link-primary);
+  --color-visited-link: var(--color-link-primary);
+  --color-error02: #ffc1bd;
+  --color-text-error: #ffc1bd;
+  --color-success02: #a8e168;
+  --color-text-success: #a8e168;
+  --color-warning02: #f7ca6a;
+  --color-text-warning: #f7ca6a;
+  background: var(--color-surface01);
+}
+
+/*# sourceMappingURL=dark-default.css.map */
+