/* Mituto UI v1.1.0 — dependency-free design tokens and components */
@layer mt-reset, mt-tokens, mt-base, mt-components, mt-utilities;

@font-face {
  font-family: "Mituto Display";
  src: url("./fonts/Fredoka-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Mituto Sans";
  src: url("./fonts/NunitoSans-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}

@layer mt-tokens {
  :root {
    color-scheme: light only;
    --mt-font-display: "Mituto Display", ui-rounded, "Avenir Next Rounded", system-ui, sans-serif;
    --mt-font-body: "Mituto Sans", "Avenir Next", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mt-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --mt-white: #ffffff;
    --mt-cream-0: #fffdf9;
    --mt-cream-50: #fff9ef;
    --mt-cream-100: #fff3df;
    --mt-ink: #433756;
    --mt-ink-soft: #706580;
    --mt-ink-faint: #91889d;
    --mt-primary-50: #f7f4ff;
    --mt-primary-100: #eee9ff;
    --mt-primary-200: #ded5ff;
    --mt-primary-300: #c9bcff;
    --mt-primary-400: #ad9bff;
    --mt-primary-500: #9f8cff;
    --mt-primary-600: #806ae5;
    --mt-primary-700: #6650bd;
    --mt-coral-50: #fff3f5;
    --mt-coral-100: #ffe0e5;
    --mt-coral-400: #ff9aaa;
    --mt-coral-500: #ff8294;
    --mt-coral-700: #c84e65;
    --mt-mint-50: #effcf7;
    --mt-mint-100: #d9f8ec;
    --mt-mint-400: #8be2c6;
    --mt-mint-700: #237963;
    --mt-sky-50: #f0f9ff;
    --mt-sky-100: #dff3ff;
    --mt-sky-400: #91d2fb;
    --mt-sky-700: #2d719a;
    --mt-sun-50: #fff9e8;
    --mt-sun-100: #fff0c2;
    --mt-sun-400: #ffd66f;
    --mt-sun-700: #8a6818;
    --mt-danger-50: #fff2f1;
    --mt-danger-500: #f0756f;
    --mt-danger-700: #a63d3a;

    --mt-space-1: .25rem;
    --mt-space-2: .5rem;
    --mt-space-3: .75rem;
    --mt-space-4: 1rem;
    --mt-space-5: 1.25rem;
    --mt-space-6: 1.5rem;
    --mt-space-8: 2rem;
    --mt-space-10: 2.5rem;
    --mt-space-12: 3rem;
    --mt-space-16: 4rem;
    --mt-space-20: 5rem;

    --mt-radius-sm: .625rem;
    --mt-radius-md: .875rem;
    --mt-radius-lg: 1.25rem;
    --mt-radius-xl: 1.75rem;
    --mt-radius-2xl: 2.25rem;
    --mt-radius-pill: 999px;

    --mt-shadow-xs: 0 1px 2px rgb(67 55 86 / .05);
    --mt-shadow-sm: 0 3px 12px rgb(88 68 127 / .08), 0 1px 2px rgb(88 68 127 / .05);
    --mt-shadow-md: 0 12px 30px rgb(88 68 127 / .12), 0 3px 8px rgb(88 68 127 / .05);
    --mt-shadow-lg: 0 22px 60px rgb(88 68 127 / .16), 0 7px 20px rgb(88 68 127 / .06);
    --mt-focus: 0 0 0 4px rgb(159 140 255 / .28);
    --mt-border: #e6dff0;
    --mt-border-strong: #d3c9e2;
    --mt-control-height: 2.75rem;
    --mt-content-max: 76rem;
    --mt-ease: cubic-bezier(.2, .8, .2, 1);
    --mt-duration-fast: 140ms;
    --mt-duration: 220ms;
  }
}

@layer mt-reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
  button, input, select, textarea { font: inherit; }
  button { color: inherit; }
  img, svg { display: block; max-width: 100%; }
}

@layer mt-base {
  .mt-scope {
    color: var(--mt-ink);
    font-family: var(--mt-font-body);
    font-size: 1rem;
    line-height: 1.55;
  }

  .mt-scope :where(h1, h2, h3, h4) {
    color: var(--mt-ink);
    font-family: var(--mt-font-display);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.025em;
  }

  .mt-scope :where(a) { color: var(--mt-primary-700); }
  .mt-scope :where(:focus-visible) { outline: none; box-shadow: var(--mt-focus); }
  .mt-scope ::selection { color: var(--mt-ink); background: var(--mt-sun-100); }
}

@layer mt-components {
  .mt-button {
    min-height: var(--mt-control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mt-space-2);
    padding: .68rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--mt-radius-pill);
    color: var(--mt-ink);
    background: var(--mt-primary-300);
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 3px 0 #ac9ae9;
    transition: transform var(--mt-duration-fast) var(--mt-ease), background var(--mt-duration-fast) ease, box-shadow var(--mt-duration-fast) ease;
  }

  .mt-button:hover { background: var(--mt-primary-400); transform: translateY(-1px); box-shadow: 0 4px 0 #9d89df; }
  .mt-button:active { transform: translateY(2px); box-shadow: 0 1px 0 #9d89df; }
  .mt-button--secondary { background: var(--mt-white); border-color: var(--mt-border); box-shadow: 0 3px 0 var(--mt-border); }
  .mt-button--secondary:hover { background: var(--mt-primary-50); box-shadow: 0 4px 0 var(--mt-border); }
  .mt-button--coral { background: var(--mt-coral-400); box-shadow: 0 3px 0 #e87d90; }
  .mt-button--coral:hover { background: var(--mt-coral-500); box-shadow: 0 4px 0 #d96a80; }

  .mt-card {
    padding: clamp(1.25rem, 2.5vw, 2rem);
    border: 1px solid var(--mt-border);
    border-radius: var(--mt-radius-xl);
    background: var(--mt-white);
    box-shadow: var(--mt-shadow-sm);
  }

  .mt-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 1.75rem;
    padding: .28rem .7rem;
    border-radius: var(--mt-radius-pill);
    color: var(--mt-primary-700);
    background: var(--mt-primary-100);
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .015em;
  }

  /* Buttons and icon actions */
  .mt-button--mint { background: var(--mt-mint-400); box-shadow: 0 3px 0 #64bea3; }
  .mt-button--mint:hover { background: #77d8bb; box-shadow: 0 4px 0 #56b397; }
  .mt-button--sun { background: var(--mt-sun-400); box-shadow: 0 3px 0 #e7ba50; }
  .mt-button--sun:hover { background: #ffcc4f; box-shadow: 0 4px 0 #d8aa3a; }
  .mt-button--ghost { background: transparent; box-shadow: none; }
  .mt-button--ghost:hover { background: var(--mt-primary-50); box-shadow: none; }
  .mt-button--danger { color: var(--mt-danger-700); background: var(--mt-danger-50); box-shadow: 0 3px 0 #f1d1ce; }
  .mt-button--danger:hover { background: #ffe4e1; box-shadow: 0 4px 0 #e9c1bd; }
  .mt-button--small { min-height: 2.25rem; padding: .48rem .85rem; font-size: .84rem; }
  .mt-button--large { min-height: 3.35rem; padding: .9rem 1.45rem; font-size: 1.04rem; }
  .mt-button--block { width: 100%; }
  .mt-button:disabled, .mt-button[aria-disabled="true"] { opacity: .48; cursor: not-allowed; transform: none; box-shadow: none; }
  .mt-button.is-loading { position: relative; color: transparent; pointer-events: none; }
  .mt-button.is-loading::after { content: ""; position: absolute; width: 1.1rem; height: 1.1rem; border: 2px solid rgb(67 55 86 / .25); border-top-color: var(--mt-ink); border-radius: 50%; animation: mt-spin .7s linear infinite; }

  .mt-icon {
    width: 1.25em;
    height: 1.25em;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .mt-icon--small { width: 1rem; height: 1rem; }
  .mt-icon--large { width: 1.75rem; height: 1.75rem; }
  .mt-icon-button {
    width: var(--mt-control-height);
    height: var(--mt-control-height);
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 1px solid var(--mt-border);
    border-radius: 50%;
    color: var(--mt-ink);
    background: var(--mt-white);
    cursor: pointer;
    transition: color var(--mt-duration-fast), background var(--mt-duration-fast), border-color var(--mt-duration-fast), transform var(--mt-duration-fast) var(--mt-ease);
  }
  .mt-icon-button:hover { color: var(--mt-primary-700); border-color: var(--mt-primary-300); background: var(--mt-primary-50); transform: translateY(-1px); }
  .mt-icon-button--small { width: 2rem; height: 2rem; font-size: .9rem; }
  .mt-icon-button--soft { border-color: transparent; background: var(--mt-primary-100); }
  .mt-icon-button[aria-pressed="true"] { color: var(--mt-coral-700); border-color: var(--mt-coral-100); background: var(--mt-coral-100); }
  .mt-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--mt-primary-700); font-weight: 800; text-decoration-thickness: .1em; text-underline-offset: .18em; }
  .mt-link:hover { color: #4f399d; }

  /* Forms */
  .mt-field { display: grid; gap: .45rem; min-width: 0; }
  .mt-fieldset { min-inline-size: 0; display: grid; gap: 1rem; padding: 0; margin: 0; border: 0; }
  .mt-label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; color: var(--mt-ink); font-size: .9rem; font-weight: 850; }
  .mt-label__optional { color: var(--mt-ink-faint); font-size: .75rem; font-weight: 700; }
  .mt-hint, .mt-error { display: flex; align-items: flex-start; gap: .35rem; margin: 0; color: var(--mt-ink-soft); font-size: .78rem; line-height: 1.4; }
  .mt-hint--success { color: var(--mt-mint-700); font-weight: 800; }
  .mt-hint--success .mt-icon, .mt-error .mt-icon { width: 1rem; margin-top: .08rem; }
  .mt-error { color: var(--mt-danger-700); font-weight: 750; }
  .mt-input, .mt-textarea, .mt-select-native {
    width: 100%;
    min-height: var(--mt-control-height);
    padding: .7rem .85rem;
    border: 1.5px solid var(--mt-border-strong);
    border-radius: var(--mt-radius-md);
    color: var(--mt-ink);
    background: var(--mt-white);
    box-shadow: var(--mt-shadow-xs);
    transition: border-color var(--mt-duration-fast), box-shadow var(--mt-duration-fast), background var(--mt-duration-fast);
  }
  .mt-input::placeholder, .mt-textarea::placeholder { color: var(--mt-ink-faint); opacity: 1; }
  .mt-input:hover, .mt-textarea:hover, .mt-select-native:hover { border-color: #bfb2d1; }
  .mt-input:focus, .mt-textarea:focus, .mt-select-native:focus { outline: none; border-color: var(--mt-primary-600); box-shadow: var(--mt-focus); }
  .mt-input:disabled, .mt-textarea:disabled, .mt-select-native:disabled { color: var(--mt-ink-faint); border-color: var(--mt-border); background: #f7f4f8; cursor: not-allowed; }
  .mt-input[aria-invalid="true"], .mt-textarea[aria-invalid="true"], .mt-select-native[aria-invalid="true"] { border-color: var(--mt-danger-500); background: var(--mt-danger-50); }
  .mt-input--success { border-color: var(--mt-mint-700); background: var(--mt-mint-50); }
  .mt-input--large { min-height: 3.25rem; padding-inline: 1rem; border-radius: var(--mt-radius-lg); }
  .mt-textarea { min-height: 7.5rem; resize: vertical; line-height: 1.5; }
  .mt-select-native {
    appearance: none;
    padding-right: 2.8rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236650bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    background-size: 1.15rem;
  }
  .mt-input-shell { position: relative; display: flex; align-items: center; }
  .mt-input-shell > .mt-icon { position: absolute; left: .85rem; z-index: 1; color: var(--mt-ink-faint); pointer-events: none; }
  .mt-input-shell > .mt-input { padding-left: 2.65rem; }
  .mt-input-shell > :last-child.mt-icon-button { position: absolute; right: .35rem; width: 2.05rem; height: 2.05rem; border: 0; }
  .mt-input-shell > .mt-input:has(+ .mt-icon-button) { padding-right: 2.8rem; }
  .mt-input-prefix, .mt-input-suffix { position: absolute; z-index: 1; color: var(--mt-ink-soft); font-size: .88rem; font-weight: 750; pointer-events: none; }
  .mt-input-prefix { left: .85rem; }
  .mt-input-suffix { right: .85rem; }
  .mt-input-shell:has(.mt-input-prefix) > .mt-input { padding-left: 2rem; }
  .mt-input-shell:has(.mt-input-suffix) > .mt-input { padding-right: 3rem; }
  .mt-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

  .mt-check, .mt-radio, .mt-switch { position: relative; display: inline-flex; align-items: flex-start; gap: .65rem; color: var(--mt-ink); cursor: pointer; }
  .mt-check input, .mt-radio input, .mt-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .mt-check__control, .mt-radio__control { width: 1.3rem; height: 1.3rem; display: grid; flex: 0 0 auto; place-items: center; margin-top: .08rem; border: 1.5px solid var(--mt-border-strong); color: var(--mt-ink); background: var(--mt-white); transition: background var(--mt-duration-fast), border-color var(--mt-duration-fast), box-shadow var(--mt-duration-fast), transform var(--mt-duration-fast) var(--mt-ease); }
  .mt-check__control { border-radius: .42rem; }
  .mt-radio__control { border-radius: 50%; }
  .mt-check__control::after { content: ""; width: .58rem; height: .32rem; border: solid currentColor; border-width: 0 0 2px 2px; opacity: 0; transform: rotate(-45deg) translateY(-1px) scale(.75); }
  .mt-radio__control::after { content: ""; width: .58rem; height: .58rem; border-radius: 50%; background: var(--mt-primary-700); opacity: 0; transform: scale(.5); }
  .mt-check input:checked + .mt-check__control { border-color: var(--mt-primary-400); background: var(--mt-primary-300); }
  .mt-radio input:checked + .mt-radio__control { border-color: var(--mt-primary-500); background: var(--mt-primary-100); }
  .mt-check input:checked + .mt-check__control::after, .mt-radio input:checked + .mt-radio__control::after { opacity: 1; transform: rotate(-45deg) translateY(-1px) scale(1); }
  .mt-radio input:checked + .mt-radio__control::after { transform: scale(1); }
  .mt-check input:focus-visible + .mt-check__control, .mt-radio input:focus-visible + .mt-radio__control, .mt-switch input:focus-visible + .mt-switch__track { box-shadow: var(--mt-focus); }
  .mt-check input:disabled ~ *, .mt-radio input:disabled ~ *, .mt-switch input:disabled ~ * { opacity: .48; cursor: not-allowed; }
  .mt-check__text, .mt-radio__text, .mt-switch__text { display: grid; gap: .1rem; line-height: 1.35; }
  .mt-check__text small, .mt-radio__text small, .mt-switch__text small { color: var(--mt-ink-soft); }

  .mt-switch { align-items: center; }
  .mt-switch__track { position: relative; width: 2.85rem; height: 1.65rem; flex: 0 0 auto; border: 1.5px solid var(--mt-border-strong); border-radius: var(--mt-radius-pill); background: #e9e4ed; transition: background var(--mt-duration-fast), border-color var(--mt-duration-fast), box-shadow var(--mt-duration-fast); }
  .mt-switch__track::after { content: ""; position: absolute; top: .18rem; left: .2rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--mt-white); box-shadow: 0 1px 4px rgb(67 55 86 / .2); transition: transform var(--mt-duration) var(--mt-ease); }
  .mt-switch input:checked + .mt-switch__track { border-color: #75ccb2; background: var(--mt-mint-400); }
  .mt-switch input:checked + .mt-switch__track::after { transform: translateX(1.18rem); }

  .mt-segmented { display: inline-flex; max-width: 100%; gap: .25rem; padding: .28rem; border: 1px solid var(--mt-border); border-radius: var(--mt-radius-pill); background: var(--mt-cream-50); }
  .mt-segmented label { position: relative; }
  .mt-segmented input { position: absolute; opacity: 0; }
  .mt-segmented span { min-height: 2.15rem; display: grid; place-items: center; padding: .42rem .9rem; border-radius: var(--mt-radius-pill); color: var(--mt-ink-soft); font-size: .84rem; font-weight: 800; cursor: pointer; }
  .mt-segmented input:checked + span { color: var(--mt-primary-700); background: var(--mt-white); box-shadow: var(--mt-shadow-sm); }
  .mt-segmented input:focus-visible + span { box-shadow: var(--mt-focus); }

  .mt-range { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .7rem; }
  .mt-range input { width: 100%; height: .5rem; appearance: none; border-radius: var(--mt-radius-pill); background: linear-gradient(to right, var(--mt-primary-500) 0 var(--mt-range-progress, 50%), var(--mt-primary-100) var(--mt-range-progress, 50%) 100%); }
  .mt-range input::-webkit-slider-thumb { width: 1.35rem; height: 1.35rem; appearance: none; border: 3px solid var(--mt-white); border-radius: 50%; background: var(--mt-primary-600); box-shadow: 0 0 0 1px var(--mt-primary-600), var(--mt-shadow-sm); cursor: grab; }
  .mt-range input::-moz-range-thumb { width: 1.1rem; height: 1.1rem; border: 3px solid var(--mt-white); border-radius: 50%; background: var(--mt-primary-600); box-shadow: 0 0 0 1px var(--mt-primary-600), var(--mt-shadow-sm); cursor: grab; }
  .mt-range input:focus-visible { box-shadow: var(--mt-focus); }
  .mt-range output { min-width: 3rem; padding: .28rem .55rem; border-radius: var(--mt-radius-pill); color: var(--mt-primary-700); background: var(--mt-primary-100); font-size: .8rem; font-weight: 850; text-align: center; }

  .mt-stepper { width: fit-content; max-width: 100%; display: inline-grid; grid-template-columns: var(--mt-control-height) minmax(3rem, 4.5rem) var(--mt-control-height); align-items: center; justify-self: start; gap: .25rem; padding: .25rem; border: 1px solid var(--mt-border); border-radius: var(--mt-radius-pill); background: var(--mt-cream-50); transition: border-color var(--mt-duration-fast), box-shadow var(--mt-duration-fast); }
  .mt-stepper--block { width: 100%; grid-template-columns: var(--mt-control-height) minmax(3rem, 1fr) var(--mt-control-height); justify-self: stretch; }
  .mt-stepper input { width: 100%; min-width: 0; height: var(--mt-control-height); padding: .2rem; border: 0; color: var(--mt-ink); background: transparent; font-weight: 850; line-height: 1; text-align: center; appearance: textfield; }
  .mt-stepper input:focus-visible { box-shadow: none; }
  .mt-stepper:has(input:focus-visible) { border-color: var(--mt-primary-500); box-shadow: var(--mt-focus); }
  .mt-stepper input::-webkit-inner-spin-button, .mt-stepper input::-webkit-outer-spin-button { margin: 0; appearance: none; }
  .mt-stepper .mt-icon-button { width: var(--mt-control-height); height: var(--mt-control-height); }
  .mt-stepper .mt-icon-button:disabled { color: var(--mt-ink-faint); background: var(--mt-white); opacity: .45; cursor: not-allowed; transform: none; }

  .mt-file-drop { position: relative; display: grid; place-items: center; gap: .45rem; min-height: 10rem; padding: 1.5rem; border: 2px dashed var(--mt-primary-300); border-radius: var(--mt-radius-lg); color: var(--mt-ink-soft); background: var(--mt-primary-50); text-align: center; transition: border-color var(--mt-duration), background var(--mt-duration), transform var(--mt-duration) var(--mt-ease); }
  .mt-file-drop:hover, .mt-file-drop.is-dragging { border-color: var(--mt-primary-600); background: var(--mt-primary-100); transform: translateY(-1px); }
  .mt-file-drop.has-file { border-style: solid; border-color: var(--mt-mint-400); background: var(--mt-mint-50); }
  .mt-file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
  .mt-file-drop strong { color: var(--mt-ink); }
  .mt-file-drop small { font-size: .78rem; }

  /* Custom select, combobox, menus */
  .mt-select, .mt-autocomplete, .mt-dropdown { position: relative; min-width: 0; }
  .mt-select__trigger { width: 100%; min-height: var(--mt-control-height); display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem .85rem; border: 1.5px solid var(--mt-border-strong); border-radius: var(--mt-radius-md); color: var(--mt-ink); background: var(--mt-white); cursor: pointer; box-shadow: var(--mt-shadow-xs); }
  .mt-select__trigger:hover, .mt-select__trigger[aria-expanded="true"] { border-color: var(--mt-primary-500); }
  .mt-select__trigger[aria-expanded="true"] .mt-icon { transform: rotate(180deg); }
  .mt-listbox, .mt-menu {
    position: absolute;
    z-index: 50;
    top: calc(100% + .4rem);
    left: 0;
    width: max(100%, 14rem);
    max-height: 18rem;
    overflow: auto;
    padding: .4rem;
    border: 1px solid var(--mt-border);
    border-radius: var(--mt-radius-lg);
    background: var(--mt-white);
    box-shadow: var(--mt-shadow-lg);
    animation: mt-pop var(--mt-duration) var(--mt-ease) both;
  }
  .mt-menu--end { right: 0; left: auto; }
  .mt-listbox[hidden], .mt-menu[hidden] { display: none; }
  .mt-option, .mt-menu__item { width: 100%; min-height: 2.5rem; display: flex; align-items: center; gap: .65rem; padding: .58rem .7rem; border: 0; border-radius: var(--mt-radius-md); color: var(--mt-ink); background: transparent; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; }
  .mt-option:hover, .mt-option.is-active, .mt-menu__item:hover, .mt-menu__item:focus-visible { background: var(--mt-primary-50); }
  .mt-option[aria-selected="true"] { color: var(--mt-primary-700); background: var(--mt-primary-100); }
  .mt-option[aria-selected="true"]::after { content: "✓"; margin-left: auto; font-weight: 900; }
  .mt-option[aria-disabled="true"], .mt-menu__item:disabled { opacity: .45; cursor: not-allowed; }
  .mt-menu__item--danger { color: var(--mt-danger-700); }
  .mt-menu__separator { height: 1px; margin: .35rem .25rem; background: var(--mt-border); }
  .mt-menu__label { padding: .5rem .7rem .25rem; color: var(--mt-ink-faint); font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
  .mt-autocomplete .mt-listbox { width: 100%; }
  .mt-autocomplete__empty { padding: 1rem; color: var(--mt-ink-soft); font-size: .85rem; text-align: center; }

  /* Labels, chips, avatars and compact identity */
  .mt-badge--coral { color: var(--mt-coral-700); background: var(--mt-coral-100); }
  .mt-badge--mint { color: var(--mt-mint-700); background: var(--mt-mint-100); }
  .mt-badge--sky { color: var(--mt-sky-700); background: var(--mt-sky-100); }
  .mt-badge--sun { color: var(--mt-sun-700); background: var(--mt-sun-100); }
  .mt-badge--neutral { color: var(--mt-ink-soft); background: #f0edf2; }
  .mt-badge--outline { color: var(--mt-ink-soft); border: 1px solid var(--mt-border); background: var(--mt-white); }
  .mt-status-dot { width: .55rem; height: .55rem; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
  .mt-chip { min-height: 2rem; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .55rem .35rem .75rem; border: 1px solid var(--mt-primary-200); border-radius: var(--mt-radius-pill); color: var(--mt-primary-700); background: var(--mt-primary-50); font-size: .82rem; font-weight: 800; }
  .mt-chip .mt-icon-button { width: 1.35rem; height: 1.35rem; border: 0; color: inherit; background: transparent; }
  .mt-chip.is-leaving, .mt-alert.is-leaving, .mt-toast.is-leaving { animation: mt-leave var(--mt-duration) var(--mt-ease) both; }
  .mt-tag { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .5rem; border: 1px solid var(--mt-border); border-radius: .45rem; color: var(--mt-ink-soft); background: var(--mt-white); font-family: var(--mt-font-mono); font-size: .72rem; font-weight: 700; }
  .mt-avatar { position: relative; width: 2.5rem; height: 2.5rem; display: inline-grid; flex: 0 0 auto; place-items: center; overflow: hidden; border: 2px solid var(--mt-white); border-radius: 50%; color: var(--mt-primary-700); background: var(--mt-primary-100); font-family: var(--mt-font-display); font-weight: 650; box-shadow: 0 0 0 1px var(--mt-border); }
  .mt-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .mt-avatar--small { width: 1.9rem; height: 1.9rem; font-size: .72rem; }
  .mt-avatar--large { width: 3.5rem; height: 3.5rem; font-size: 1.2rem; }
  .mt-avatar-group { display: flex; padding-left: .45rem; }
  .mt-avatar-group .mt-avatar { margin-left: -.45rem; }

  /* Navigation */
  .mt-navbar { min-height: 4.25rem; display: flex; align-items: center; gap: 1.25rem; padding: .65rem 1rem; border: 1px solid var(--mt-border); border-radius: var(--mt-radius-xl); background: rgb(255 255 255 / .92); box-shadow: var(--mt-shadow-sm); }
  .mt-navbar__brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--mt-ink); font-family: var(--mt-font-display); font-weight: 650; text-decoration: none; }
  .mt-navbar__brand img { width: 7.5rem; }
  .mt-navbar__links { display: flex; align-items: center; gap: .2rem; margin-left: auto; }
  .mt-navbar__link { padding: .55rem .75rem; border-radius: var(--mt-radius-pill); color: var(--mt-ink-soft); font-size: .88rem; font-weight: 800; text-decoration: none; }
  .mt-navbar__link:hover, .mt-navbar__link[aria-current="page"] { color: var(--mt-primary-700); background: var(--mt-primary-50); }
  .mt-navbar__toggle { display: none; margin-left: auto; }

  .mt-side-nav { display: grid; gap: .25rem; padding: .55rem; border: 1px solid var(--mt-border); border-radius: var(--mt-radius-lg); background: var(--mt-white); }
  .mt-side-nav__label { padding: .65rem .7rem .25rem; color: var(--mt-ink-faint); font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
  .mt-side-nav__item { min-height: 2.5rem; display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border-radius: var(--mt-radius-md); color: var(--mt-ink-soft); font-weight: 750; text-decoration: none; }
  .mt-side-nav__item:hover { color: var(--mt-ink); background: var(--mt-cream-50); }
  .mt-side-nav__item[aria-current="page"] { color: var(--mt-primary-700); background: var(--mt-primary-100); }
  .mt-side-nav__count { min-width: 1.45rem; margin-left: auto; padding: .08rem .35rem; border-radius: var(--mt-radius-pill); color: var(--mt-ink-soft); background: var(--mt-white); font-size: .7rem; text-align: center; }

  .mt-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: 0; margin: 0; list-style: none; }
  .mt-breadcrumbs li { display: inline-flex; align-items: center; gap: .35rem; color: var(--mt-ink-faint); font-size: .82rem; font-weight: 750; }
  .mt-breadcrumbs li:not(:last-child)::after { content: "/"; color: var(--mt-border-strong); }
  .mt-breadcrumbs a { color: var(--mt-ink-soft); text-decoration: none; }
  .mt-breadcrumbs a:hover { color: var(--mt-primary-700); text-decoration: underline; }

  .mt-tabs { min-width: 0; }
  .mt-tablist { display: flex; gap: .3rem; overflow-x: auto; padding: .3rem; border: 1px solid var(--mt-border); border-radius: var(--mt-radius-pill); background: var(--mt-cream-50); scrollbar-width: none; }
  .mt-tablist::-webkit-scrollbar { display: none; }
  .mt-tab { min-height: 2.35rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .85rem; border: 0; border-radius: var(--mt-radius-pill); color: var(--mt-ink-soft); background: transparent; font-weight: 800; white-space: nowrap; cursor: pointer; }
  .mt-tab:hover { color: var(--mt-ink); }
  .mt-tab[aria-selected="true"] { color: var(--mt-primary-700); background: var(--mt-white); box-shadow: var(--mt-shadow-sm); }
  .mt-tab-panel { padding: 1.25rem .25rem .25rem; }
  .mt-tab-panel[hidden] { display: none; }
  .mt-tab-summary { display: flex; align-items: center; gap: .8rem; padding: 1rem; border-radius: var(--mt-radius-lg); background: var(--mt-primary-50); }
  .mt-tab-summary strong { font-family: var(--mt-font-display); font-size: 1.1rem; }
  .mt-tab-summary p { margin: .15rem 0 0; color: var(--mt-ink-soft); }

  .mt-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
  .mt-pagination__pages { display: flex; align-items: center; gap: .25rem; }
  .mt-page { min-width: 2.25rem; height: 2.25rem; display: grid; place-items: center; padding: 0 .45rem; border: 0; border-radius: 50%; color: var(--mt-ink-soft); background: transparent; font-weight: 800; text-decoration: none; cursor: pointer; }
  .mt-page:hover { color: var(--mt-primary-700); background: var(--mt-primary-50); }
  .mt-page[aria-current="page"] { color: var(--mt-primary-700); background: var(--mt-primary-100); }

  /* Cards and data display */
  .mt-card--flat { box-shadow: none; }
  .mt-card--tinted { border-color: transparent; background: var(--mt-primary-50); box-shadow: none; }
  .mt-card--interactive { color: inherit; text-decoration: none; transition: transform var(--mt-duration) var(--mt-ease), border-color var(--mt-duration), box-shadow var(--mt-duration); }
  .mt-card--interactive:hover { border-color: var(--mt-primary-300); transform: translateY(-3px); box-shadow: var(--mt-shadow-md); }
  .mt-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
  .mt-card__header :where(h2, h3, h4, p) { margin: 0; }
  .mt-card__footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: 1.15rem; margin-top: 1.15rem; border-top: 1px solid var(--mt-border); }
  .mt-stat { display: grid; gap: .25rem; }
  .mt-stat__label { color: var(--mt-ink-soft); font-size: .8rem; font-weight: 800; }
  .mt-stat__value { font-family: var(--mt-font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 650; line-height: 1; }
  .mt-stat__trend { display: inline-flex; align-items: center; gap: .25rem; color: var(--mt-mint-700); font-size: .78rem; font-weight: 850; }
  .mt-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .8rem; }

  .mt-list { padding: 0; margin: 0; list-style: none; }
  .mt-list__item { display: flex; align-items: center; gap: .8rem; padding: .85rem 0; border-bottom: 1px solid var(--mt-border); }
  .mt-list__item:last-child { border-bottom: 0; }
  .mt-list__content { min-width: 0; display: grid; gap: .12rem; flex: 1; }
  .mt-list__content strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mt-list__content small { color: var(--mt-ink-soft); }

  .mt-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--mt-border); border-radius: var(--mt-radius-lg); background: var(--mt-white); }
  .mt-table { width: 100%; border-collapse: collapse; color: var(--mt-ink); font-size: .88rem; }
  .mt-table :where(th, td) { padding: .85rem 1rem; border-bottom: 1px solid var(--mt-border); text-align: left; vertical-align: middle; white-space: nowrap; }
  .mt-table th { color: var(--mt-ink-soft); background: var(--mt-cream-50); font-size: .74rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
  .mt-table tbody tr:last-child td { border-bottom: 0; }
  .mt-table tbody tr:hover { background: var(--mt-primary-50); }
  .mt-table tr[hidden] { display: none; }
  .mt-table__sort { display: inline-flex; align-items: center; gap: .3rem; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
  .mt-table th[aria-sort="ascending"] .mt-table__sort::after { content: "↑"; color: var(--mt-primary-700); }
  .mt-table th[aria-sort="descending"] .mt-table__sort::after { content: "↓"; color: var(--mt-primary-700); }
  .mt-data-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
  .mt-data-toolbar .mt-input-shell { min-width: min(100%, 18rem); }

  .mt-timeline { position: relative; display: grid; gap: 0; padding: 0; margin: 0; list-style: none; }
  .mt-timeline::before { content: ""; position: absolute; top: 1.15rem; bottom: 1.15rem; left: .6rem; width: 2px; background: var(--mt-primary-200); }
  .mt-timeline__item { position: relative; display: grid; grid-template-columns: 1.3rem 1fr; gap: .75rem; padding-bottom: 1.25rem; }
  .mt-timeline__item:last-child { padding-bottom: 0; }
  .mt-timeline__dot { z-index: 1; width: 1.2rem; height: 1.2rem; margin-top: .15rem; border: 3px solid var(--mt-white); border-radius: 50%; background: var(--mt-primary-500); box-shadow: 0 0 0 1px var(--mt-primary-300); }
  .mt-timeline__content { display: grid; gap: .15rem; }
  .mt-timeline__content small { color: var(--mt-ink-soft); }

  .mt-empty { display: grid; justify-items: center; gap: .65rem; padding: 2.5rem 1.5rem; border: 1.5px dashed var(--mt-border-strong); border-radius: var(--mt-radius-xl); color: var(--mt-ink-soft); background: var(--mt-cream-50); text-align: center; }
  .mt-empty__art { width: 4.5rem; height: 4.5rem; display: grid; place-items: center; border-radius: 38% 62% 56% 44%; color: var(--mt-primary-700); background: var(--mt-primary-100); transform: rotate(-5deg); }
  .mt-empty__art > * { transform: rotate(5deg); }
  .mt-empty h3, .mt-empty p { margin: 0; }

  /* Feedback and progress */
  .mt-alert { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: .75rem; padding: .9rem 1rem; border: 1px solid var(--mt-primary-200); border-radius: var(--mt-radius-lg); color: var(--mt-ink); background: var(--mt-primary-50); }
  .mt-alert--success { border-color: #b9eadc; background: var(--mt-mint-50); }
  .mt-alert--warning { border-color: #f2dea0; background: var(--mt-sun-50); }
  .mt-alert--danger { border-color: #f3c4c0; background: var(--mt-danger-50); }
  .mt-alert__content { min-width: 0; display: grid; gap: .15rem; }
  .mt-alert__content strong { font-weight: 900; }
  .mt-alert__content p { margin: 0; color: var(--mt-ink-soft); font-size: .86rem; }

  .mt-progress { width: 100%; height: .65rem; overflow: hidden; border-radius: var(--mt-radius-pill); background: var(--mt-primary-100); }
  .mt-progress__bar { height: 100%; border-radius: inherit; background: var(--mt-primary-500); transition: width .5s var(--mt-ease); }
  .mt-progress--mint { background: var(--mt-mint-100); }
  .mt-progress--mint .mt-progress__bar { background: var(--mt-mint-400); }
  .mt-progress--large { height: 1rem; padding: .2rem; background: var(--mt-primary-100); }
  .mt-progress-group { display: grid; gap: .45rem; }
  .mt-progress-group__label { display: flex; justify-content: space-between; gap: 1rem; color: var(--mt-ink-soft); font-size: .78rem; font-weight: 800; }
  .mt-spinner { width: 1.5rem; height: 1.5rem; display: inline-block; border: 3px solid var(--mt-primary-200); border-top-color: var(--mt-primary-700); border-radius: 50%; animation: mt-spin .72s linear infinite; }
  .mt-skeleton { position: relative; min-height: 1rem; overflow: hidden; border-radius: .5rem; background: #eeeaf2; }
  .mt-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .7), transparent); transform: translateX(-100%); animation: mt-shimmer 1.35s infinite; }
  .mt-skeleton--text { height: .8rem; }
  .mt-skeleton--title { width: 58%; height: 1.25rem; }
  .mt-skeleton--short { width: 70%; }
  .mt-skeleton--circle { width: 2.8rem; height: 2.8rem; border-radius: 50%; }
  .mt-skeleton-stack { display: grid; gap: .55rem; }

  .mt-toast-region { position: fixed; z-index: 200; right: 1rem; bottom: 1rem; width: min(24rem, calc(100vw - 2rem)); display: grid; gap: .6rem; pointer-events: none; }
  .mt-toast { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: .75rem; padding: .85rem .85rem .85rem 1rem; border: 1px solid var(--mt-border); border-left: .35rem solid var(--mt-primary-500); border-radius: var(--mt-radius-lg); color: var(--mt-ink); background: var(--mt-white); box-shadow: var(--mt-shadow-lg); pointer-events: auto; animation: mt-toast-in var(--mt-duration) var(--mt-ease) both; }
  .mt-toast--success { border-left-color: var(--mt-mint-400); }
  .mt-toast--warning { border-left-color: var(--mt-sun-400); }
  .mt-toast--danger { border-left-color: var(--mt-danger-500); }
  .mt-toast > div { display: grid; gap: .12rem; }
  .mt-toast strong { font-weight: 900; }
  .mt-toast span { color: var(--mt-ink-soft); font-size: .84rem; }

  /* Disclosure, overlays and content switching */
  .mt-accordion { overflow: hidden; border: 1px solid var(--mt-border); border-radius: var(--mt-radius-lg); background: var(--mt-white); }
  .mt-accordion__item + .mt-accordion__item { border-top: 1px solid var(--mt-border); }
  .mt-accordion__trigger { width: 100%; min-height: 3.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border: 0; color: var(--mt-ink); background: transparent; font-weight: 850; text-align: left; cursor: pointer; }
  .mt-accordion__trigger:hover { background: var(--mt-primary-50); }
  .mt-accordion__trigger .mt-icon { transition: transform var(--mt-duration) var(--mt-ease); }
  .mt-accordion__trigger[aria-expanded="true"] .mt-icon { transform: rotate(180deg); }
  .mt-accordion__panel { padding: 0 1rem 1rem; color: var(--mt-ink-soft); }
  .mt-accordion__panel[hidden] { display: none; }

  .mt-dialog { width: min(34rem, calc(100vw - 2rem)); max-height: calc(100svh - 2rem); padding: 0; overflow: auto; border: 1px solid var(--mt-border); border-radius: var(--mt-radius-2xl); color: var(--mt-ink); background: var(--mt-white); box-shadow: var(--mt-shadow-lg); }
  .mt-dialog::backdrop { background: rgb(88 68 127 / .2); backdrop-filter: blur(5px); }
  .mt-dialog[open] { animation: mt-dialog-in var(--mt-duration) var(--mt-ease) both; }
  .mt-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.4rem .8rem; }
  .mt-dialog__header :where(h2, h3, p) { margin: 0; }
  .mt-dialog__body { padding: .4rem 1.4rem 1.4rem; color: var(--mt-ink-soft); }
  .mt-dialog__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; padding: 1rem 1.4rem 1.4rem; border-top: 1px solid var(--mt-border); }
  .mt-dialog-summary { display: flex; align-items: center; gap: .8rem; padding: 1rem; border-radius: var(--mt-radius-lg); background: var(--mt-primary-50); }
  .mt-dialog-summary > div { display: grid; gap: .15rem; }
  .mt-dialog-summary span { font-size: .86rem; }
  .mt-drawer { width: min(28rem, calc(100vw - 1rem)); height: calc(100svh - 1rem); max-height: none; margin: .5rem .5rem .5rem auto; border-radius: var(--mt-radius-2xl); }

  .mt-tooltip { position: relative; }
  .mt-tooltip::after { content: attr(data-mt-tooltip); position: absolute; z-index: 80; bottom: calc(100% + .5rem); left: 50%; max-width: 14rem; padding: .42rem .6rem; border: 1px solid var(--mt-border); border-radius: .55rem; color: var(--mt-ink); background: var(--mt-white); box-shadow: var(--mt-shadow-md); font-size: .72rem; font-weight: 750; line-height: 1.3; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, .25rem); transition: opacity var(--mt-duration-fast), transform var(--mt-duration-fast); }
  .mt-tooltip:hover::after, .mt-tooltip:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

  .mt-carousel { display: grid; gap: .85rem; }
  .mt-carousel__viewport { min-height: 9rem; }
  .mt-carousel__slide { height: 100%; animation: mt-fade var(--mt-duration) var(--mt-ease) both; }
  .mt-carousel__slide[hidden] { display: none; }
  .mt-carousel__controls { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
  .mt-carousel__status { color: var(--mt-ink-soft); font-size: .8rem; font-weight: 800; }

  .mt-rating { display: inline-flex; gap: .18rem; }
  .mt-rating button { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; padding: 0; border: 0; color: var(--mt-border-strong); background: transparent; cursor: pointer; transition: color var(--mt-duration-fast), transform var(--mt-duration-fast) var(--mt-ease); }
  .mt-rating button:hover, .mt-rating button.is-active { color: var(--mt-sun-700); transform: scale(1.08) rotate(-3deg); }
  .mt-rating button svg { fill: var(--mt-sun-400); stroke: currentColor; }

  /* Learning-specific compositions */
  .mt-subject-icon { width: 2.8rem; height: 2.8rem; display: grid; flex: 0 0 auto; place-items: center; border-radius: 38% 62% 54% 46%; color: var(--mt-primary-700); background: var(--mt-primary-100); }
  .mt-subject-icon--coral { color: var(--mt-coral-700); background: var(--mt-coral-100); }
  .mt-subject-icon--mint { color: var(--mt-mint-700); background: var(--mt-mint-100); }
  .mt-subject-icon--sky { color: var(--mt-sky-700); background: var(--mt-sky-100); }
  .mt-lesson-card { position: relative; overflow: hidden; }
  .mt-lesson-card::after { content: ""; position: absolute; z-index: 0; right: -2.5rem; bottom: -3rem; width: 8rem; height: 8rem; border-radius: 45% 55% 62% 38%; background: var(--mt-primary-50); transform: rotate(20deg); pointer-events: none; }
  .mt-lesson-card > * { position: relative; z-index: 1; }
  .mt-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .65rem; }
  .mt-choice { min-height: 3.3rem; display: grid; place-items: center; padding: .7rem; border: 1.5px solid var(--mt-border); border-radius: var(--mt-radius-lg); color: var(--mt-ink); background: var(--mt-white); font-weight: 850; cursor: pointer; }
  .mt-choice:hover { border-color: var(--mt-primary-400); background: var(--mt-primary-50); }
  .mt-choice[aria-pressed="true"], .mt-choice.is-selected { border-color: var(--mt-primary-600); background: var(--mt-primary-100); box-shadow: 0 0 0 3px var(--mt-primary-50); }
  .mt-stars { display: inline-flex; color: var(--mt-sun-700); }
  .mt-stars .mt-icon { fill: var(--mt-sun-400); }
  .mt-heading-group { display: flex; align-items: center; gap: .75rem; }
  .mt-heading-group :where(h2, h3, h4) { margin: .12rem 0 0; font-size: 1.35rem; }
  .mt-eyebrow { color: var(--mt-coral-700); font-size: .72rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
  .mt-instruction { font-family: var(--mt-font-display); font-size: 1.45rem; font-weight: 560; }
  .mt-word-bank, .mt-sentence-slot { display: flex; flex-wrap: wrap; gap: .55rem; padding: 1rem; border-radius: var(--mt-radius-lg); }
  .mt-word-bank { background: var(--mt-sky-50); }
  .mt-word-bank button, .mt-sentence-slot span { min-height: 2.7rem; padding: .55rem .75rem; border: 1px solid var(--mt-border); border-radius: var(--mt-radius-md); color: var(--mt-ink); background: var(--mt-white); font-weight: 800; box-shadow: var(--mt-shadow-xs); }
  .mt-sentence-slot { min-height: 6rem; align-content: center; margin-top: .75rem; border: 1.5px dashed var(--mt-primary-300); background: var(--mt-primary-50); }
  .mt-evidence-list { display: grid; gap: .55rem; padding: 1rem; border-radius: var(--mt-radius-lg); background: var(--mt-mint-50); }
  .mt-evidence-list span { display: flex; align-items: center; gap: .45rem; color: var(--mt-mint-700); font-size: .83rem; font-weight: 800; }
  .mt-evidence-list .mt-icon { width: 1.05rem; }
  .mt-celebration { position: relative; display: grid; justify-items: center; align-content: center; gap: .8rem; overflow: hidden; padding: 3rem; border: 1px solid var(--mt-primary-200); border-radius: var(--mt-radius-2xl); background: linear-gradient(145deg, var(--mt-primary-100), var(--mt-coral-50) 48%, var(--mt-sun-50)); text-align: center; }
  .mt-celebration h3 { max-width: 35rem; margin: 0; font-size: clamp(2rem, 4vw, 3.5rem); }
  .mt-celebration p { max-width: 37rem; margin: 0 0 .5rem; color: var(--mt-ink-soft); font-size: 1.05rem; }
  .mt-celebration__mark { width: 5.5rem; height: 5.5rem; display: grid; place-items: center; border-radius: 42% 58% 60% 40%; color: var(--mt-sun-700); background: var(--mt-sun-400); transform: rotate(-6deg); }
  .mt-celebration__mark .mt-icon { width: 2.8rem; height: 2.8rem; transform: rotate(6deg); }
  .mt-celebration__stars { color: var(--mt-sun-700); font-size: 1.8rem; letter-spacing: .1em; }
  .mt-celebration__spark { position: absolute; color: var(--mt-primary-600); font-size: 2rem; }
  .mt-celebration__spark--one { top: 12%; left: 12%; }
  .mt-celebration__spark--two { right: 11%; bottom: 15%; color: var(--mt-coral-500); }

  @keyframes mt-spin { to { transform: rotate(360deg); } }
  @keyframes mt-pop { from { opacity: 0; transform: translateY(-.35rem) scale(.98); } }
  @keyframes mt-fade { from { opacity: 0; transform: translateY(.25rem); } }
  @keyframes mt-toast-in { from { opacity: 0; transform: translateX(1rem); } }
  @keyframes mt-dialog-in { from { opacity: 0; transform: translateY(.8rem) scale(.98); } }
  @keyframes mt-leave { to { opacity: 0; transform: translateY(-.4rem) scale(.98); } }
  @keyframes mt-shimmer { to { transform: translateX(100%); } }
}

@layer mt-utilities {
  .mt-stack { display: flex; flex-direction: column; gap: var(--mt-stack-space, 1rem); }
  .mt-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mt-cluster-space, .75rem); }
  .mt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--mt-grid-min, 14rem)), 1fr)); gap: var(--mt-grid-space, 1rem); }
  .mt-grid-span-full { grid-column: 1 / -1; }
  .mt-container { width: min(calc(100% - 2rem), var(--mt-content-max)); margin-inline: auto; }
  .mt-surface { padding: var(--mt-surface-space, 1rem); border: 1px solid var(--mt-border); border-radius: var(--mt-radius-lg); background: var(--mt-white); }
  .mt-divider { height: 1px; border: 0; background: var(--mt-border); }
  .mt-text-muted { color: var(--mt-ink-soft) !important; }
  .mt-text-small { font-size: .82rem !important; }
  .mt-text-center { text-align: center !important; }
  .mt-grow { flex: 1 1 auto !important; }
  .mt-no-wrap { white-space: nowrap !important; }
  .mt-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

@media (max-width: 42rem) {
  .mt-field-row { grid-template-columns: 1fr; }
  .mt-navbar { flex-wrap: wrap; }
  .mt-navbar__toggle { display: inline-grid; }
  .mt-navbar__links { width: 100%; display: grid; margin-left: 0; }
  .mt-navbar__links[hidden] { display: none; }
  .mt-navbar__link { border-radius: var(--mt-radius-md); }
  .mt-dialog__footer { flex-direction: column-reverse; }
  .mt-dialog__footer .mt-button { width: 100%; }
  .mt-pagination { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .mt-scope *, .mt-scope *::before, .mt-scope *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}