@maboussoleaidant/design-system 0.1.0

package/dist/mba-tailwind.css

@@ -0,0 +1,2083 @@
+/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+:root {
+  --mba-color-white: #FFFFFF;
+  --mba-color-black: #1C1C1D;
+  --mba-color-grey-50: #F2F2F3;
+  --mba-color-grey-100: #D7D7DB;
+  --mba-color-grey-300: #B6B6BC;
+  --mba-color-grey-400: #71717A;
+  --mba-color-grey-800: #303034;
+  --mba-color-primary-50: #FFF6FF;
+  --mba-color-primary-100: #EDD7EF;
+  --mba-color-primary-400: #C097C3;
+  --mba-color-primary-500: #703973;
+  --mba-color-primary-800: #461C52;
+  --mba-color-primary-900: #2C1133;
+  --mba-color-secondary-500: #FDC785;
+  --mba-color-primary-pro-50: #F7FAFD;
+  --mba-color-primary-pro-100: #DFEDF7;
+  --mba-color-primary-pro-400: #6A88AA;
+  --mba-color-primary-pro-500: #395172;
+  --mba-color-primary-pro-800: #122042;
+  --mba-color-error-100: #FFDED1;
+  --mba-color-error-300: #F8B09E;
+  --mba-color-error-400: #D9514E;
+  --mba-color-error-500: #C1121F;
+  --mba-color-error-800: #6F052A;
+  --mba-color-success-100: #E6FADE;
+  --mba-color-success-300: #B7E7AC;
+  --mba-color-success-400: #74C474;
+  --mba-color-success-500: #489E50;
+  --mba-color-success-800: #165B30;
+  --mba-color-warning-50: #FEFAEC;
+  --mba-color-warning-100: #FBF2CB;
+  --mba-color-warning-300: #F8E199;
+  --mba-color-warning-400: #D6A73D;
+  --mba-color-warning-500: #BC7F09;
+  --mba-color-warning-800: #6D3D02;
+  --mba-color-info-50: #F1FBFE;
+  --mba-color-info-100: #E2F6FC;
+  --mba-color-info-300: #C6EAF9;
+  --mba-color-info-400: #8ABDE0;
+  --mba-color-info-500: #649CCC;
+  --mba-color-info-800: #1F4076;
+  --mba-color-brick-light: #FCF4F0;
+  --mba-color-brick: #AC5118;
+  --mba-color-forest-light: #DEF8EF;
+  --mba-color-forest: #16654C;
+  --mba-color-rose-light: #FAEFF4;
+  --mba-color-rose: #B83C75;
+  --mba-color-pastel-bleuet: #EBF2FF;
+  --mba-color-pastel-lavender: #EEEDFF;
+  --mba-color-pastel-narcisse: #FFF6E4;
+  --mba-color-pastel-oranger: #FFF2EB;
+  --mba-color-beige: #F9F5F0;
+  --mba-gradient-sunset: linear-gradient(117deg, #C7E5FA 4.74%, #E9CDF3 49.92%, #FBE4C1 95.1%);
+  --mba-color-background: var(--mba-color-white);
+  --mba-color-surface: var(--mba-color-grey-50);
+  --mba-color-surface-raised: var(--mba-color-white);
+  --mba-color-border: var(--mba-color-grey-100);
+  --mba-color-border-strong: var(--mba-color-grey-300);
+  --mba-color-text: var(--mba-color-black);
+  --mba-color-text-muted: var(--mba-color-grey-400);
+  --mba-color-text-subtle: var(--mba-color-grey-300);
+  --mba-color-text-inverse: var(--mba-color-white);
+  --mba-color-link: var(--mba-color-primary-500);
+  --mba-color-link-hover: var(--mba-color-primary-800);
+  --mba-focus-ring: 0 0 0 3px rgba(112, 57, 115, 0.25);
+}
+:root {
+  --mba-font-family-text: "Open Sans", ui-sans-serif, system-ui, sans-serif;
+  --mba-font-family-heading: "Congenial", ui-sans-serif, system-ui, sans-serif;
+  --mba-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --mba-font-size-xxs: 0.875rem;
+  --mba-font-size-xs: 1rem;
+  --mba-font-size-sm: 1.125rem;
+  --mba-font-size-md: 1.5rem;
+  --mba-font-size-xl: 2rem;
+  --mba-font-size-xxl: 3rem;
+  --mba-font-weight-regular: 400;
+  --mba-font-weight-semibold: 600;
+  --mba-font-weight-bold: 700;
+  --mba-font-weight-extrabold: 800;
+  --mba-leading-none: 1;
+  --mba-leading-tight: 1.25;
+  --mba-leading-snug: 1.375;
+  --mba-leading-normal: 1.5;
+  --mba-leading-relaxed: 1.625;
+  --mba-leading-loose: 2;
+  --mba-tracking-tighter: -0.05em;
+  --mba-tracking-tight: -0.025em;
+  --mba-tracking-normal: 0em;
+  --mba-tracking-wide: 0.025em;
+  --mba-tracking-wider: 0.05em;
+  --mba-tracking-widest: 0.1em;
+}
+.mba-heading-xxl {
+  font-family: var(--mba-font-family-heading);
+  font-size: var(--mba-font-size-xxl);
+  font-weight: var(--mba-font-weight-bold);
+  line-height: var(--mba-leading-tight);
+}
+.mba-heading-xl {
+  font-family: var(--mba-font-family-heading);
+  font-size: var(--mba-font-size-xl);
+  font-weight: var(--mba-font-weight-bold);
+  line-height: var(--mba-leading-tight);
+}
+.mba-heading-md {
+  font-family: var(--mba-font-family-heading);
+  font-size: var(--mba-font-size-md);
+  font-weight: var(--mba-font-weight-bold);
+  line-height: var(--mba-leading-snug);
+}
+.mba-heading-sm {
+  font-family: var(--mba-font-family-heading);
+  font-size: var(--mba-font-size-sm);
+  font-weight: var(--mba-font-weight-bold);
+  line-height: var(--mba-leading-normal);
+}
+.mba-heading-xs {
+  font-family: var(--mba-font-family-heading);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-bold);
+  line-height: var(--mba-leading-normal);
+}
+.mba-heading-xxs {
+  font-family: var(--mba-font-family-heading);
+  font-size: var(--mba-font-size-xxs);
+  font-weight: var(--mba-font-weight-bold);
+  line-height: var(--mba-leading-normal);
+}
+.mba-text-xxl {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxl);
+  font-weight: var(--mba-font-weight-regular);
+  line-height: var(--mba-leading-normal);
+}
+.mba-text-xl {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xl);
+  font-weight: var(--mba-font-weight-regular);
+  line-height: var(--mba-leading-normal);
+}
+.mba-text-md {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-md);
+  font-weight: var(--mba-font-weight-regular);
+  line-height: var(--mba-leading-normal);
+}
+.mba-text-sm {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-sm);
+  font-weight: var(--mba-font-weight-regular);
+  line-height: var(--mba-leading-normal);
+}
+.mba-text-xs {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-regular);
+  line-height: var(--mba-leading-normal);
+}
+.mba-text-xxs {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs);
+  font-weight: var(--mba-font-weight-regular);
+  line-height: var(--mba-leading-normal);
+}
+:root {
+  --mba-space-xxs: 0.25rem;
+  --mba-space-xs: 0.5rem;
+  --mba-space-sm: 1rem;
+  --mba-space-md: 1.5rem;
+  --mba-space-lg: 2rem;
+  --mba-space-xl: 3rem;
+  --mba-space-xxl: 4rem;
+  --mba-space-0: 0;
+  --mba-space-px: 1px;
+}
+:root {
+  --mba-radius-2xs: 0.25rem;
+  --mba-radius-xs: 0.5rem;
+  --mba-radius-sm: 1rem;
+  --mba-radius-md: 1.5rem;
+  --mba-radius-lg: 2rem;
+  --mba-radius-xl: 3rem;
+  --mba-radius-xxl: 4rem;
+  --mba-radius-none: 0;
+  --mba-radius-full: 9999px;
+}
+:root {
+  --mba-shadow-xxs: 0 2px 4px 0 rgba(113, 113, 122, 0.04),
+    1px 2px 4px 0 rgba(113, 113, 122, 0.08);
+  --mba-shadow-xs: 0 2px 8px 0 rgba(113, 113, 122, 0.04),
+    1px 2px 8px 0 rgba(113, 113, 122, 0.08);
+  --mba-shadow-sm: 0 2px 16px 0 rgba(113, 113, 122, 0.04),
+    1px 2px 16px 0 rgba(113, 113, 122, 0.08);
+  --mba-shadow-md: 0 2px 24px 0 rgba(113, 113, 122, 0.04),
+    1px 2px 24px 0 rgba(113, 113, 122, 0.08);
+  --mba-shadow-none: 0 0 #0000;
+  --mba-shadow-inner: inset 0 2px 4px 0 rgba(113, 113, 122, 0.08);
+}
+:root {
+  --mba-duration-75: 75ms;
+  --mba-duration-100: 100ms;
+  --mba-duration-150: 150ms;
+  --mba-duration-200: 200ms;
+  --mba-duration-300: 300ms;
+  --mba-duration-500: 500ms;
+  --mba-duration-700: 700ms;
+  --mba-duration-1000: 1000ms;
+  --mba-ease-linear: linear;
+  --mba-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --mba-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --mba-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --mba-transition-fast: var(--mba-duration-150) var(--mba-ease-in-out);
+  --mba-transition-base: var(--mba-duration-200) var(--mba-ease-in-out);
+  --mba-transition-slow: var(--mba-duration-300) var(--mba-ease-in-out);
+}
+:root {
+  --mba-breakpoint-sm: 640px;
+  --mba-breakpoint-md: 768px;
+  --mba-breakpoint-lg: 1024px;
+  --mba-breakpoint-xl: 1280px;
+  --mba-breakpoint-2xl: 1536px;
+}
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../assets/fonts/OpenSans-Regular.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("../assets/fonts/OpenSans-SemiBold.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("../assets/fonts/OpenSans-Bold.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url("../assets/fonts/OpenSans-ExtraBold.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Congenial";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("../assets/fonts/Congenial.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Congenial";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("../assets/fonts/Congenial-Medium.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Congenial";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("../assets/fonts/Congenial-Bold.woff2") format("woff2");
+}
+@font-face {
+  font-family: 'Material Symbols Rounded';
+  font-style: normal;
+  font-weight: 100 700;
+  font-display: block;
+  src: url('/fonts/MaterialSymbolsRounded.woff2') format('woff2');
+}
+.material-symbols-rounded {
+  font-family: 'Material Symbols Rounded';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-variation-settings: 'FILL' 0,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 24;
+}
+.mba-icon {
+  font-size: 24px;
+  width: 24px;
+  height: 24px;
+  font-variation-settings: 'FILL' 0,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 24;
+}
+.mba-icon--sm {
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
+  font-variation-settings: 'FILL' 0,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 20;
+}
+.mba-icon--fill,
+.material-symbols-rounded.mba-icon--fill {
+  font-variation-settings: 'FILL' 1,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 24;
+}
+.mba-icon--sm.mba-icon--fill {
+  font-variation-settings: 'FILL' 1,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 20;
+}
+.mba-icon--primary {
+  color: var(--mba-color-primary-500);
+}
+.mba-icon--success {
+  color: var(--mba-color-success-500);
+}
+.mba-icon--warning {
+  color: var(--mba-color-warning-500);
+}
+.mba-icon--error {
+  color: var(--mba-color-error-500);
+}
+.mba-icon--info {
+  color: var(--mba-color-info-500);
+}
+.mba-icon--muted {
+  color: var(--mba-color-text-muted);
+}
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: var(--mba-color-border);
+}
+html {
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  font-family: var(--mba-font-family-text);
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+}
+body {
+  margin: 0;
+  line-height: inherit;
+}
+hr {
+  height: 0;
+  color: inherit;
+  border-top-width: 1px;
+}
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+b,
+strong {
+  font-weight: bolder;
+}
+code,
+kbd,
+samp,
+pre {
+  font-family: var(--mba-font-family-mono);
+  font-size: 1em;
+}
+small {
+  font-size: 80%;
+}
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sub {
+  bottom: -0.25em;
+}
+sup {
+  top: -0.5em;
+}
+table {
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+button,
+select {
+  text-transform: none;
+}
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+  background-color: transparent;
+  background-image: none;
+}
+:-moz-focusring {
+  outline: auto;
+}
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+progress {
+  vertical-align: baseline;
+}
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+summary {
+  display: list-item;
+}
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+legend {
+  padding: 0;
+}
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+dialog {
+  padding: 0;
+}
+textarea {
+  resize: vertical;
+}
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  color: var(--mba-color-text-subtle);
+}
+button,
+[role="button"] {
+  cursor: pointer;
+}
+:disabled {
+  cursor: default;
+}
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  vertical-align: middle;
+}
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+[hidden] {
+  display: none;
+}
+body {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  line-height: var(--mba-leading-normal);
+  color: var(--mba-color-text);
+  background-color: var(--mba-color-background);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+a {
+  color: var(--mba-color-link);
+  transition: color var(--mba-transition-fast);
+}
+a:hover {
+  color: var(--mba-color-link-hover);
+}
+:focus-visible {
+  outline: 2px solid var(--mba-color-primary-500);
+  outline-offset: 2px;
+}
+::selection {
+  background-color: var(--mba-color-primary-100);
+  color: var(--mba-color-primary-900);
+}
+.mba-btn {
+  display: inline-flex;
+  height: 38px;
+  padding: var(--mba-space-xs) var(--mba-space-sm);
+  justify-content: center;
+  align-items: center;
+  gap: var(--mba-space-xs);
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-semibold);
+  line-height: var(--mba-leading-snug);
+  text-decoration: none;
+  border: 1px solid transparent;
+  border-radius: var(--mba-radius-xs);
+  cursor: pointer;
+  transition: all 0.25s ease-in-out;
+  user-select: none;
+  white-space: nowrap;
+  background-color: var(--mba-color-primary-500);
+  color: var(--mba-color-white);
+}
+.mba-btn:hover:not(:disabled):not(.is-disabled) {
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-primary-800);
+  border: 1px solid var(--mba-color-primary-800);
+}
+.mba-btn:focus {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
+}
+.mba-btn:disabled,
+.mba-btn.is-disabled {
+  background-color: var(--mba-color-grey-100);
+  color: var(--mba-color-grey-400);
+  border-color: transparent;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.mba-btn-secondary {
+  display: inline-flex;
+  height: 38px;
+  padding: var(--mba-space-xs) var(--mba-space-sm);
+  justify-content: center;
+  align-items: center;
+  gap: var(--mba-space-xs);
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-semibold);
+  line-height: var(--mba-leading-snug);
+  text-decoration: none;
+  border-radius: var(--mba-radius-xs);
+  cursor: pointer;
+  transition: all 0.25s ease-in-out;
+  user-select: none;
+  white-space: nowrap;
+  background-color: var(--mba-color-white);
+  color: var(--mba-color-primary-800);
+  border: 1px solid var(--mba-color-primary-800);
+}
+.mba-btn-secondary:hover:not(:disabled):not(.is-disabled) {
+  background-color: var(--mba-color-primary-500);
+  color: var(--mba-color-white);
+  border-color: var(--mba-color-primary-500);
+}
+.mba-btn-secondary:focus {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
+}
+.mba-btn-secondary:disabled,
+.mba-btn-secondary.is-disabled {
+  background-color: var(--mba-color-grey-100);
+  color: var(--mba-color-grey-400);
+  border-color: var(--mba-color-grey-100);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.mba-btn-sm {
+  height: auto;
+  padding: var(--mba-space-xxs) var(--mba-space-xs);
+  gap: var(--mba-space-xs);
+  font-size: var(--mba-font-size-xxs);
+}
+.mba-btn-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.mba-btn-icon i,
+.mba-btn-icon svg {
+  font-size: 1rem;
+  width: 1rem;
+  height: 1rem;
+}
+.mba-btn .arrow-forward,
+.mba-btn-secondary .arrow-forward {
+  vertical-align: middle;
+}
+.mba-btn-block {
+  display: block;
+  width: 100%;
+  text-align: center;
+}
+@media (max-width: 767px) {
+  .mba-btn,
+  .mba-btn-secondary {
+    display: flex;
+    width: 100%;
+    max-width: 100%;
+  }
+}
+.mba-card {
+  display: flex;
+  flex-direction: column;
+  padding: var(--mba-space-md);
+  border-radius: var(--mba-radius-sm);
+  background-color: var(--mba-color-beige);
+  border: 2px solid transparent;
+  transition: border-color 0.25s ease-in-out;
+  cursor: pointer;
+}
+.mba-card:hover {
+  border-color: var(--mba-color-primary-500);
+}
+.mba-card--sm {
+  padding: var(--mba-space-sm);
+}
+.mba-card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--mba-space-sm);
+}
+.mba-card__content {
+  flex: 1;
+}
+.mba-card__title {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-sm);
+  font-weight: var(--mba-font-weight-bold);
+  color: var(--mba-color-primary-800);
+  margin: 0 0 var(--mba-space-xs);
+}
+.mba-card__text {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-regular);
+  color: var(--mba-color-text);
+  line-height: var(--mba-leading-snug);
+  margin: 0;
+}
+.mba-card__icon {
+  flex-shrink: 0;
+  color: var(--mba-color-primary-500);
+  font-size: 24px;
+  transition: transform 0.2s ease;
+}
+.mba-card__icon svg {
+  width: 24px;
+  height: 24px;
+}
+.mba-card:hover .mba-card__icon {
+  transform: translateX(4px);
+}
+.mba-card-grid {
+  display: grid;
+  gap: var(--mba-space-md);
+  grid-template-columns: 1fr;
+  width: 100%;
+}
+@media (min-width: 600px) {
+  .mba-card-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 900px) {
+  .mba-card-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+.mba-card--white {
+  background-color: var(--mba-color-white);
+}
+.mba-card--static {
+  cursor: default;
+}
+.mba-card--static:hover {
+  border-color: transparent;
+}
+.mba-carousel-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: var(--mba-space-md);
+  background-color: var(--mba-color-white);
+  border-radius: 24px 24px 8px 24px;
+  width: 453px;
+  height: 278px;
+  box-sizing: border-box;
+}
+.mba-carousel-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  padding: 1px;
+  background: var(--mba-gradient-sunset);
+  border-radius: 24px 24px 8px 24px;
+  mask: linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  -webkit-mask-composite: xor;
+  pointer-events: none;
+}
+.mba-carousel-card__title {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-sm);
+  font-weight: var(--mba-font-weight-bold);
+  color: var(--mba-color-primary-800);
+  margin: 0;
+}
+.mba-carousel-card__quote {
+  flex: 1;
+  margin-top: var(--mba-space-sm);
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-regular);
+  color: var(--mba-color-primary-800);
+}
+.mba-carousel-card__author {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxs);
+  font-weight: var(--mba-font-weight-bold);
+  color: var(--mba-color-primary-500);
+  margin: 0;
+}
+@media (max-width: 767px) {
+  .mba-carousel-card {
+    width: 286px;
+    height: 360px;
+  }
+}
+.mba-stats-card {
+  position: relative;
+  padding: var(--mba-space-md);
+  background-color: var(--mba-color-white);
+  border-radius: var(--mba-radius-md);
+  box-shadow: var(--mba-shadow-xs);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+.mba-stats-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  padding: 1px;
+  background: var(--mba-gradient-sunset);
+  border-radius: var(--mba-radius-md);
+  mask: linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  -webkit-mask-composite: xor;
+  pointer-events: none;
+}
+.mba-stats-card:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--mba-shadow-sm);
+}
+.mba-stats-card__value {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xxl);
+  font-weight: var(--mba-font-weight-extrabold);
+  color: var(--mba-color-primary-500);
+  line-height: 1;
+  margin: 0;
+}
+.mba-stats-card__title {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-bold);
+  margin-top: var(--mba-space-sm);
+  margin-bottom: 0;
+  color: var(--mba-color-text);
+}
+.mba-stats-card__description {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-regular);
+  color: var(--mba-color-text);
+  margin: 0;
+}
+.mba-stats-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--mba-space-lg);
+  width: 100%;
+}
+@media (max-width: 900px) {
+  .mba-stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 600px) {
+  .mba-stats-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.mba-arrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--mba-space-xxs);
+  border-radius: var(--mba-radius-xxl);
+  background-color: var(--mba-color-primary-500);
+  color: var(--mba-color-white);
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+.mba-arrow:hover {
+  background-color: var(--mba-color-primary-800);
+}
+.mba-arrow:focus-visible {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
+}
+.mba-arrow:disabled,
+.mba-arrow.is-disabled {
+  background-color: var(--mba-color-grey-300);
+  cursor: not-allowed;
+}
+.mba-arrow:disabled:hover,
+.mba-arrow.is-disabled:hover {
+  background-color: var(--mba-color-grey-300);
+}
+.mba-arrow .material-symbols-rounded {
+  font-size: 24px;
+}
+.text-xxs {
+  font-size: var(--mba-font-size-xxs);
+}
+.text-md {
+  font-size: var(--mba-font-size-md);
+}
+.text-xxl {
+  font-size: var(--mba-font-size-xxl);
+}
+.mba-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+.mba-not-sr-only {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+@layer theme {
+  :root, :host {
+    --font-sans: var(--mba-font-family-text);
+    --font-mono: var(--mba-font-family-mono);
+    --color-blue-500: oklch(62.3% 0.214 259.815);
+    --color-black: var(--mba-color-black);
+    --color-white: var(--mba-color-white);
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
+    --tracking-wide: 0.025em;
+    --leading-relaxed: 1.625;
+    --radius-xs: var(--mba-radius-xs);
+    --radius-sm: var(--mba-radius-sm);
+    --radius-md: var(--mba-radius-md);
+    --radius-lg: var(--mba-radius-lg);
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-font-family: var(--font-sans);
+    --default-mono-font-family: var(--font-mono);
+    --color-grey-50: var(--mba-color-grey-50);
+    --color-grey-100: var(--mba-color-grey-100);
+    --color-grey-300: var(--mba-color-grey-300);
+    --color-grey-400: var(--mba-color-grey-400);
+    --color-grey-800: var(--mba-color-grey-800);
+    --color-primary-50: var(--mba-color-primary-50);
+    --color-primary-100: var(--mba-color-primary-100);
+    --color-primary-400: var(--mba-color-primary-400);
+    --color-primary-500: var(--mba-color-primary-500);
+    --color-primary-800: var(--mba-color-primary-800);
+    --color-error-100: var(--mba-color-error-100);
+    --color-error-300: var(--mba-color-error-300);
+    --color-error-500: var(--mba-color-error-500);
+    --color-error-800: var(--mba-color-error-800);
+    --color-success-100: var(--mba-color-success-100);
+    --color-success-300: var(--mba-color-success-300);
+    --color-success-500: var(--mba-color-success-500);
+    --color-success-800: var(--mba-color-success-800);
+    --color-warning-100: var(--mba-color-warning-100);
+    --color-warning-300: var(--mba-color-warning-300);
+    --color-warning-400: var(--mba-color-warning-400);
+    --color-warning-500: var(--mba-color-warning-500);
+    --color-warning-800: var(--mba-color-warning-800);
+    --color-info-50: var(--mba-color-info-50);
+    --color-info-100: var(--mba-color-info-100);
+    --color-info-300: var(--mba-color-info-300);
+    --color-info-400: var(--mba-color-info-400);
+    --color-info-500: var(--mba-color-info-500);
+    --color-info-800: var(--mba-color-info-800);
+    --font-heading: var(--mba-font-family-heading);
+    --spacing-0: var(--mba-space-0);
+    --spacing-xxs: var(--mba-space-xxs);
+    --spacing-xs: var(--mba-space-xs);
+    --spacing-sm: var(--mba-space-sm);
+    --spacing-md: var(--mba-space-md);
+    --spacing-lg: var(--mba-space-lg);
+    --spacing-xl: var(--mba-space-xl);
+    --spacing-4: 1rem;
+    --spacing-6: 1.5rem;
+    --spacing-8: 2rem;
+    --spacing-10: 2.5rem;
+    --spacing-12: 3rem;
+    --spacing-14: 3.5rem;
+    --spacing-16: 4rem;
+    --spacing-20: 5rem;
+    --spacing-24: 6rem;
+    --spacing-28: 7rem;
+    --spacing-32: 8rem;
+    --spacing-36: 9rem;
+    --spacing-40: 10rem;
+    --spacing-48: 12rem;
+    --max-width-xs: 20rem;
+    --max-width-md: 28rem;
+    --max-width-lg: 32rem;
+    --max-width-xl: 36rem;
+    --max-width-2xl: 42rem;
+    --max-width-4xl: 56rem;
+    --max-width-6xl: 72rem;
+    --radius-none: var(--mba-radius-none);
+    --radius-2xs: var(--mba-radius-2xs);
+    --radius-full: var(--mba-radius-full);
+  }
+}
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html,
+  :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b,
+  strong {
+    font-weight: bolder;
+  }
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol,
+  ul,
+  menu {
+    list-style: none;
+  }
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block;
+    vertical-align: middle;
+  }
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+  button,
+  input,
+  select,
+  optgroup,
+  textarea,
+  ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+  }
+  @supports (not (-webkit-appearance: -apple-pay-button))  or
+    (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentcolor;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit,
+  ::-webkit-datetime-edit-year-field,
+  ::-webkit-datetime-edit-month-field,
+  ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-hour-field,
+  ::-webkit-datetime-edit-minute-field,
+  ::-webkit-datetime-edit-second-field,
+  ::-webkit-datetime-edit-millisecond-field,
+  ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button,
+  input:where([type="button"], [type="reset"], [type="submit"]),
+  ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+@layer utilities {
+  .pointer-events-none {
+    pointer-events: none;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .fixed {
+    position: fixed;
+  }
+  .relative {
+    position: relative;
+  }
+  .top-1\/2 {
+    top: calc(1/2 * 100%);
+  }
+  .right-sm {
+    right: var(--spacing-sm);
+  }
+  .bottom-md {
+    bottom: var(--spacing-md);
+  }
+  .left-1\/2 {
+    left: calc(1/2 * 100%);
+  }
+  .left-sm {
+    left: var(--spacing-sm);
+  }
+  .col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
+  .m-0 {
+    margin: var(--spacing-0);
+  }
+  .m-8 {
+    margin: var(--spacing-8);
+  }
+  .m-md {
+    margin: var(--spacing-md);
+  }
+  .m-xl {
+    margin: var(--spacing-xl);
+  }
+  .m-xs {
+    margin: var(--spacing-xs);
+  }
+  .-mx-sm {
+    margin-inline: calc(var(--spacing-sm) * -1);
+  }
+  .mx-auto {
+    margin-inline: auto;
+  }
+  .mt-md {
+    margin-top: var(--spacing-md);
+  }
+  .mt-sm {
+    margin-top: var(--spacing-sm);
+  }
+  .mt-xs {
+    margin-top: var(--spacing-xs);
+  }
+  .mt-xxs {
+    margin-top: var(--spacing-xxs);
+  }
+  .mb-0 {
+    margin-bottom: var(--spacing-0);
+  }
+  .mb-lg {
+    margin-bottom: var(--spacing-lg);
+  }
+  .mb-md {
+    margin-bottom: var(--spacing-md);
+  }
+  .mb-sm {
+    margin-bottom: var(--spacing-sm);
+  }
+  .mb-xl {
+    margin-bottom: var(--spacing-xl);
+  }
+  .mb-xs {
+    margin-bottom: var(--spacing-xs);
+  }
+  .mb-xxs {
+    margin-bottom: var(--spacing-xxs);
+  }
+  .ml-xs {
+    margin-left: var(--spacing-xs);
+  }
+  .block {
+    display: block;
+  }
+  .flex {
+    display: flex;
+  }
+  .grid {
+    display: grid;
+  }
+  .hidden {
+    display: none;
+  }
+  .inline {
+    display: inline;
+  }
+  .h-4 {
+    height: var(--spacing-4);
+  }
+  .h-6 {
+    height: var(--spacing-6);
+  }
+  .h-8 {
+    height: var(--spacing-8);
+  }
+  .h-12 {
+    height: var(--spacing-12);
+  }
+  .h-14 {
+    height: var(--spacing-14);
+  }
+  .h-20 {
+    height: var(--spacing-20);
+  }
+  .h-24 {
+    height: var(--spacing-24);
+  }
+  .h-32 {
+    height: var(--spacing-32);
+  }
+  .w-4 {
+    width: var(--spacing-4);
+  }
+  .w-6 {
+    width: var(--spacing-6);
+  }
+  .w-8 {
+    width: var(--spacing-8);
+  }
+  .w-12 {
+    width: var(--spacing-12);
+  }
+  .w-14 {
+    width: var(--spacing-14);
+  }
+  .w-20 {
+    width: var(--spacing-20);
+  }
+  .w-24 {
+    width: var(--spacing-24);
+  }
+  .w-28 {
+    width: var(--spacing-28);
+  }
+  .w-36 {
+    width: var(--spacing-36);
+  }
+  .w-40 {
+    width: var(--spacing-40);
+  }
+  .w-48 {
+    width: var(--spacing-48);
+  }
+  .w-full {
+    width: 100%;
+  }
+  .max-w-2xl {
+    max-width: var(--max-width-2xl);
+  }
+  .max-w-4xl {
+    max-width: var(--max-width-4xl);
+  }
+  .max-w-6xl {
+    max-width: var(--max-width-6xl);
+  }
+  .max-w-lg {
+    max-width: var(--max-width-lg);
+  }
+  .max-w-md {
+    max-width: var(--max-width-md);
+  }
+  .max-w-xl {
+    max-width: var(--max-width-xl);
+  }
+  .max-w-xs {
+    max-width: var(--max-width-xs);
+  }
+  .min-w-10 {
+    min-width: var(--spacing-10);
+  }
+  .min-w-12 {
+    min-width: var(--spacing-12);
+  }
+  .min-w-14 {
+    min-width: var(--spacing-14);
+  }
+  .min-w-16 {
+    min-width: var(--spacing-16);
+  }
+  .min-w-24 {
+    min-width: var(--spacing-24);
+  }
+  .min-w-36 {
+    min-width: var(--spacing-36);
+  }
+  .flex-1 {
+    flex: 1;
+  }
+  .-translate-x-1\/2 {
+    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  .grid-cols-\[repeat\(auto-fill\,minmax\(100px\,1fr\)\)\] {
+    grid-template-columns: repeat(auto-fill,minmax(100px,1fr));
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+  .items-baseline {
+    align-items: baseline;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .items-end {
+    align-items: flex-end;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .gap-4 {
+    gap: var(--spacing-4);
+  }
+  .gap-lg {
+    gap: var(--spacing-lg);
+  }
+  .gap-md {
+    gap: var(--spacing-md);
+  }
+  .gap-sm {
+    gap: var(--spacing-sm);
+  }
+  .gap-xl {
+    gap: var(--spacing-xl);
+  }
+  .gap-xs {
+    gap: var(--spacing-xs);
+  }
+  .gap-xxs {
+    gap: var(--spacing-xxs);
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
+  .rounded-2xs {
+    border-radius: var(--radius-2xs);
+  }
+  .rounded-full {
+    border-radius: var(--radius-full);
+  }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .rounded-none {
+    border-radius: var(--radius-none);
+  }
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
+  .rounded-xs {
+    border-radius: var(--radius-xs);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
+  .border-t {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .border-b-2 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 2px;
+  }
+  .border-l-4 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 4px;
+  }
+  .border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
+  .border-error-300 {
+    border-color: var(--color-error-300);
+  }
+  .border-error-500 {
+    border-color: var(--color-error-500);
+  }
+  .border-grey-100 {
+    border-color: var(--color-grey-100);
+  }
+  .border-grey-300 {
+    border-color: var(--color-grey-300);
+  }
+  .border-info-500 {
+    border-color: var(--color-info-500);
+  }
+  .border-primary-500 {
+    border-color: var(--color-primary-500);
+  }
+  .border-success-300 {
+    border-color: var(--color-success-300);
+  }
+  .border-success-500 {
+    border-color: var(--color-success-500);
+  }
+  .border-warning-500 {
+    border-color: var(--color-warning-500);
+  }
+  .bg-error-100 {
+    background-color: var(--color-error-100);
+  }
+  .bg-error-500 {
+    background-color: var(--color-error-500);
+  }
+  .bg-grey-50 {
+    background-color: var(--color-grey-50);
+  }
+  .bg-grey-800 {
+    background-color: var(--color-grey-800);
+  }
+  .bg-info-50 {
+    background-color: var(--color-info-50);
+  }
+  .bg-info-100 {
+    background-color: var(--color-info-100);
+  }
+  .bg-info-500 {
+    background-color: var(--color-info-500);
+  }
+  .bg-primary-50 {
+    background-color: var(--color-primary-50);
+  }
+  .bg-primary-100 {
+    background-color: var(--color-primary-100);
+  }
+  .bg-primary-500 {
+    background-color: var(--color-primary-500);
+  }
+  .bg-primary-800 {
+    background-color: var(--color-primary-800);
+  }
+  .bg-success-100 {
+    background-color: var(--color-success-100);
+  }
+  .bg-success-500 {
+    background-color: var(--color-success-500);
+  }
+  .bg-warning-100 {
+    background-color: var(--color-warning-100);
+  }
+  .bg-warning-500 {
+    background-color: var(--color-warning-500);
+  }
+  .bg-white {
+    background-color: var(--color-white);
+  }
+  .bg-white\/50 {
+    background-color: var(--color-white);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
+    }
+  }
+  .p-4 {
+    padding: var(--spacing-4);
+  }
+  .p-6 {
+    padding: var(--spacing-6);
+  }
+  .p-lg {
+    padding: var(--spacing-lg);
+  }
+  .p-md {
+    padding: var(--spacing-md);
+  }
+  .p-sm {
+    padding: var(--spacing-sm);
+  }
+  .p-xl {
+    padding: var(--spacing-xl);
+  }
+  .p-xs {
+    padding: var(--spacing-xs);
+  }
+  .p-xxs {
+    padding: var(--spacing-xxs);
+  }
+  .px-md {
+    padding-inline: var(--spacing-md);
+  }
+  .px-sm {
+    padding-inline: var(--spacing-sm);
+  }
+  .px-xxs {
+    padding-inline: var(--spacing-xxs);
+  }
+  .py-sm {
+    padding-block: var(--spacing-sm);
+  }
+  .py-xl {
+    padding-block: var(--spacing-xl);
+  }
+  .py-xs {
+    padding-block: var(--spacing-xs);
+  }
+  .py-xxs {
+    padding-block: var(--spacing-xxs);
+  }
+  .pb-sm {
+    padding-bottom: var(--spacing-sm);
+  }
+  .text-center {
+    text-align: center;
+  }
+  .text-right {
+    text-align: right;
+  }
+  .font-heading {
+    font-family: var(--font-heading);
+  }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .leading-relaxed {
+    --tw-leading: var(--leading-relaxed);
+    line-height: var(--leading-relaxed);
+  }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .font-extrabold {
+    --tw-font-weight: var(--font-weight-extrabold);
+    font-weight: var(--font-weight-extrabold);
+  }
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .font-normal {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .tracking-wide {
+    --tw-tracking: var(--tracking-wide);
+    letter-spacing: var(--tracking-wide);
+  }
+  .break-all {
+    word-break: break-all;
+  }
+  .text-black {
+    color: var(--color-black);
+  }
+  .text-blue-500 {
+    color: var(--color-blue-500);
+  }
+  .text-error-500 {
+    color: var(--color-error-500);
+  }
+  .text-error-800 {
+    color: var(--color-error-800);
+  }
+  .text-grey-300 {
+    color: var(--color-grey-300);
+  }
+  .text-grey-400 {
+    color: var(--color-grey-400);
+  }
+  .text-info-300 {
+    color: var(--color-info-300);
+  }
+  .text-info-400 {
+    color: var(--color-info-400);
+  }
+  .text-info-500 {
+    color: var(--color-info-500);
+  }
+  .text-info-800 {
+    color: var(--color-info-800);
+  }
+  .text-primary-100 {
+    color: var(--color-primary-100);
+  }
+  .text-primary-400 {
+    color: var(--color-primary-400);
+  }
+  .text-primary-500 {
+    color: var(--color-primary-500);
+  }
+  .text-primary-800 {
+    color: var(--color-primary-800);
+  }
+  .text-success-300 {
+    color: var(--color-success-300);
+  }
+  .text-success-500 {
+    color: var(--color-success-500);
+  }
+  .text-success-800 {
+    color: var(--color-success-800);
+  }
+  .text-warning-300 {
+    color: var(--color-warning-300);
+  }
+  .text-warning-400 {
+    color: var(--color-warning-400);
+  }
+  .text-warning-500 {
+    color: var(--color-warning-500);
+  }
+  .text-warning-800 {
+    color: var(--color-warning-800);
+  }
+  .text-white {
+    color: var(--color-white);
+  }
+  .uppercase {
+    text-transform: uppercase;
+  }
+  .opacity-0 {
+    opacity: 0%;
+  }
+  .opacity-80 {
+    opacity: 80%;
+  }
+  .opacity-90 {
+    opacity: 90%;
+  }
+  .shadow-inner {
+    --tw-shadow: var(--mba-shadow-inner);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-md {
+    --tw-shadow: var(--mba-shadow-md);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-none {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-sm {
+    --tw-shadow: var(--mba-shadow-sm);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-xs {
+    --tw-shadow: var(--mba-shadow-xs);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-xxs {
+    --tw-shadow: var(--mba-shadow-xxs);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .hover\:bg-primary-50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-primary-50);
+      }
+    }
+  }
+  .md\:grid-cols-3 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+}
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-border-style: solid;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-tracking: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+    }
+  }
+}