@rookcom/monarch-react 0.2.0 → 0.3.0

package/dist/styles.css

@@ -2,7 +2,7 @@
 @layer monarch.tokens, monarch.base, monarch.components;
 
 @layer monarch.components {
-  /* 00-foundation.css */
+  /* styles/foundation.css */
   /* Shared component foundations. */
   .mn-visually-hidden {
     position: absolute;
@@ -69,7 +69,7 @@
     }
   }
 
-  /* 10-button.css */
+  /* components/actions/button/button.css */
   .mn-button {
     --_bg: var(--mn-color-bg-surface);
     --_bg-hover: var(--mn-color-bg-muted);
@@ -144,6 +144,65 @@
     --_border: var(--mn-color-danger-border);
   }
 
+  .mn-button[data-variant='success'] {
+    --_bg: var(--mn-color-success-solid);
+    --_bg-hover: var(--mn-color-success-solid-hover);
+    --_bg-active: var(--mn-color-success-solid-active);
+    --_fg: var(--mn-color-success-on-solid);
+    --_border: transparent;
+    box-shadow: var(--mn-shadow-xs);
+  }
+  .mn-button[data-variant='warning'] {
+    --_bg: var(--mn-color-warning-solid);
+    --_bg-hover: var(--mn-color-warning-solid-hover);
+    --_bg-active: var(--mn-color-warning-solid-active);
+    --_fg: var(--mn-color-warning-on-solid);
+    --_border: transparent;
+    box-shadow: var(--mn-shadow-xs);
+  }
+  /* Brand: per-theme colours derived in button.tsx (deriveIntent) arrive as
+     inline --_brand-<theme>-* properties; without a valid colour the variant
+     falls back to the product accent. Theme blocks follow the tokens' order. */
+  .mn-button[data-variant='brand'] {
+    --_bg: var(--mn-color-accent-solid);
+    --_bg-hover: var(--mn-color-accent-solid-hover);
+    --_bg-active: var(--mn-color-accent-solid-active);
+    --_fg: var(--mn-color-accent-on-solid);
+    --_border: transparent;
+    box-shadow: var(--mn-shadow-xs);
+  }
+  .mn-button[data-variant='brand'][data-brand] {
+    --_bg: var(--_brand-l-bg);
+    --_bg-hover: var(--_brand-l-bg-hover);
+    --_bg-active: var(--_brand-l-bg-active);
+    --_fg: var(--_brand-l-fg);
+  }
+  :is(.dark, [data-mn-theme='dark']) .mn-button[data-variant='brand'][data-brand] {
+    --_bg: var(--_brand-d-bg);
+    --_bg-hover: var(--_brand-d-bg-hover);
+    --_bg-active: var(--_brand-d-bg-active);
+    --_fg: var(--_brand-d-fg);
+  }
+  [data-mn-contrast='more'] .mn-button[data-variant='brand'][data-brand] {
+    --_bg: var(--_brand-hl-bg);
+    --_bg-hover: var(--_brand-hl-bg-hover);
+    --_bg-active: var(--_brand-hl-bg-active);
+    --_fg: var(--_brand-hl-fg);
+  }
+  :is(.dark, [data-mn-theme='dark'])[data-mn-contrast='more']
+    .mn-button[data-variant='brand'][data-brand],
+  :is(.dark, [data-mn-theme='dark'])
+    [data-mn-contrast='more']
+    .mn-button[data-variant='brand'][data-brand],
+  [data-mn-contrast='more']
+    :is(.dark, [data-mn-theme='dark'])
+    .mn-button[data-variant='brand'][data-brand] {
+    --_bg: var(--_brand-hd-bg);
+    --_bg-hover: var(--_brand-hd-bg-hover);
+    --_bg-active: var(--_brand-hd-bg-active);
+    --_fg: var(--_brand-hd-fg);
+  }
+
   .mn-button[data-size='xs'] {
     --_h: var(--mn-control-xs);
     --_px: var(--mn-space-2);
@@ -197,6 +256,7 @@
     margin: 0;
   }
 
+  /* components/feedback/spinner/spinner.css */
   .mn-spinner {
     --_size: 1rem;
     display: inline-block;
@@ -220,6 +280,7 @@
     }
   }
 
+  /* components/typography/kbd/kbd.css */
   .mn-kbd {
     display: inline-flex;
     align-items: center;
@@ -236,7 +297,7 @@
     line-height: 1;
   }
 
-  /* 20-forms.css */
+  /* components/forms/form-field/form-field.css */
   .mn-field {
     display: flex;
     flex-direction: column;
@@ -275,8 +336,104 @@
     color: var(--mn-color-text-disabled);
   }
 
+  /* layout="row": text on the left, control on the right (switch rows). */
+  .mn-field[data-layout='row'] {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    column-gap: var(--mn-space-4);
+    row-gap: var(--mn-space-0-5);
+    align-items: start;
+  }
+  .mn-field[data-layout='row'] > * {
+    grid-column: 2;
+    grid-row: 1 / span 2;
+    align-self: center;
+  }
+  .mn-field[data-layout='row'] > .mn-field__label {
+    grid-column: 1;
+    grid-row: 1;
+    align-self: start;
+  }
+  .mn-field[data-layout='row'] > .mn-field__description {
+    grid-column: 1;
+    grid-row: 2;
+    align-self: start;
+  }
+  .mn-field[data-layout='row'] > .mn-field__error {
+    grid-column: 1 / -1;
+    grid-row: 3;
+  }
+
+  /* NativeSelect: the platform <select> styled as .mn-input with a chevron. */
+  .mn-native-select {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mn-space-2);
+    min-width: 0;
+    max-width: 100%;
+  }
+  .mn-field > .mn-native-select {
+    display: flex;
+  }
+  .mn-field[data-layout='row'] > .mn-native-select {
+    display: inline-flex;
+  }
+  .mn-native-select__label {
+    flex-shrink: 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+    font-weight: var(--mn-weight-medium);
+    white-space: nowrap;
+    cursor: pointer;
+  }
+  .mn-native-select[data-size='sm'] .mn-native-select__label {
+    font-size: var(--mn-text-xs);
+  }
+  .mn-native-select[data-disabled] .mn-native-select__label {
+    color: var(--mn-color-text-disabled);
+    cursor: not-allowed;
+  }
+  .mn-native-select__box {
+    position: relative;
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  /* .mn-input sets padding-inline later in the cascade; this wins on specificity. */
+  .mn-native-select__control.mn-input {
+    appearance: none;
+    padding-inline-end: var(--mn-space-8);
+    cursor: pointer;
+    text-overflow: ellipsis;
+  }
+  .mn-native-select__control:disabled {
+    cursor: not-allowed;
+  }
+  .mn-native-select__control.mn-input[data-size='sm'] {
+    padding-inline-end: var(--mn-space-6);
+  }
+  .mn-native-select__chevron {
+    position: absolute;
+    inset-inline-end: var(--mn-space-2-5);
+    top: 50%;
+    translate: 0 -50%;
+    color: var(--mn-color-text-muted);
+    pointer-events: none;
+  }
+  .mn-native-select[data-size='sm'] .mn-native-select__chevron {
+    inset-inline-end: var(--mn-space-2);
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .mn-native-select[data-disabled] .mn-native-select__chevron {
+    color: var(--mn-color-text-disabled);
+  }
+
+  /* components/forms/text-field/text-field.css */
   .mn-input {
     --_h: var(--mn-control-md);
+    /* Fill the container exactly, whatever box-sizing the app sets globally. */
+    box-sizing: border-box;
     display: flex;
     align-items: center;
     width: 100%;
@@ -333,6 +490,7 @@
     resize: vertical;
   }
 
+  /* components/forms/select/select.css */
   .mn-select {
     justify-content: space-between;
     gap: var(--mn-space-2);
@@ -359,7 +517,8 @@
     padding: var(--mn-space-1);
   }
 
-  /* Checkbox and switch */
+  /* components/forms/checkbox/checkbox.css */
+  /* Checkbox (the shared .mn-choice label wrapper is in styles/choice.css). */
   .mn-checkbox {
     display: inline-flex;
     align-items: center;
@@ -398,6 +557,7 @@
     stroke-width: 2.25;
   }
 
+  /* components/forms/switch/switch.css */
   .mn-switch {
     --_w: 2.25rem;
     --_h: 1.25rem;
@@ -441,6 +601,7 @@
     transform: translateX(calc(var(--_w) - var(--_thumb) - 5px));
   }
 
+  /* styles/choice.css */
   .mn-choice {
     display: flex;
     align-items: flex-start;
@@ -477,7 +638,7 @@
     cursor: not-allowed;
   }
 
-  /* 30-display.css */
+  /* components/data-display/badge/badge.css */
   .mn-badge {
     --_bg: var(--mn-color-bg-muted);
     --_fg: var(--mn-color-text-muted);
@@ -579,6 +740,7 @@
     --_border: var(--mn-color-danger-border);
   }
 
+  /* components/identity/avatar/avatar.css */
   .mn-avatar {
     --_size: 2rem;
     position: relative;
@@ -621,7 +783,102 @@
     height: 100%;
     object-fit: cover;
   }
+  .mn-avatar[data-size='custom'] {
+    --_size: var(--mn-avatar-size, 2rem);
+  }
+
+  /* Fallback icon (entities without a logo, names without letters). */
+  .mn-avatar__icon {
+    display: inline-flex;
+  }
+  .mn-avatar__icon > svg {
+    width: calc(var(--_size) * 0.55);
+    height: calc(var(--_size) * 0.55);
+  }
+
+  /* palette="tokens": the five data tokens, tinted onto the surface; follows theme and contrast. */
+  .mn-avatar[data-palette] {
+    --_tint: var(--mn-color-data-1);
+    background: color-mix(in srgb, var(--_tint) 16%, var(--mn-color-bg-surface));
+    color: color-mix(in srgb, var(--_tint) 40%, var(--mn-color-text-default));
+  }
+  .mn-avatar[data-palette='2'] {
+    --_tint: var(--mn-color-data-2);
+  }
+  .mn-avatar[data-palette='3'] {
+    --_tint: var(--mn-color-data-3);
+  }
+  .mn-avatar[data-palette='4'] {
+    --_tint: var(--mn-color-data-4);
+  }
+  .mn-avatar[data-palette='5'] {
+    --_tint: var(--mn-color-data-5);
+  }
+  [data-mn-contrast='more'] .mn-avatar[data-palette] {
+    color: var(--mn-color-text-default);
+  }
+
+  /* Presence dot. The root stops clipping so the dot can sit on the edge; the image keeps the shape. */
+  .mn-avatar[data-status] {
+    overflow: visible;
+  }
+  .mn-avatar[data-status] .mn-avatar__image {
+    border-radius: inherit;
+  }
+  .mn-avatar__status {
+    position: absolute;
+    inset-inline-end: 0;
+    inset-block-end: 0;
+    width: max(0.5rem, calc(var(--_size) * 0.28));
+    height: max(0.5rem, calc(var(--_size) * 0.28));
+    border-radius: var(--mn-radius-full);
+    background: var(--mn-color-text-subtle);
+    box-shadow: 0 0 0 2px var(--mn-color-bg-surface);
+  }
+  .mn-avatar[data-shape='square'] .mn-avatar__status {
+    inset-inline-end: calc(var(--_size) * -0.08);
+    inset-block-end: calc(var(--_size) * -0.08);
+  }
+  .mn-avatar[data-status='online'] .mn-avatar__status {
+    background: var(--mn-color-success-solid);
+  }
+  .mn-avatar[data-status='away'] .mn-avatar__status {
+    background: var(--mn-color-warning-solid);
+  }
+  .mn-avatar[data-status='busy'] .mn-avatar__status {
+    background: var(--mn-color-danger-solid);
+  }
+  .mn-avatar[data-status='offline'] .mn-avatar__status {
+    background: var(--mn-color-bg-surface);
+    box-shadow:
+      inset 0 0 0 2px var(--mn-color-text-subtle),
+      0 0 0 2px var(--mn-color-bg-surface);
+  }
+
+  /* AvatarGroup: overlapping stack with a ring so each face stays distinct. */
+  .mn-avatar-group {
+    display: inline-flex;
+    align-items: center;
+    padding-inline-start: 2px;
+  }
+  .mn-avatar-group > .mn-avatar {
+    box-shadow: 0 0 0 2px var(--mn-color-bg-surface);
+  }
+  .mn-avatar-group > .mn-avatar + .mn-avatar {
+    margin-inline-start: calc(var(--_size) * -0.25);
+  }
+  .mn-avatar-group__overflow {
+    background: var(--mn-color-bg-muted);
+    color: var(--mn-color-text-muted);
+    font-size: calc(var(--_size) * 0.36);
+    font-variant-numeric: tabular-nums;
+  }
+  :is(.dark, [data-mn-theme='dark']) .mn-avatar-group__overflow {
+    background: var(--mn-color-bg-muted);
+    color: var(--mn-color-text-muted);
+  }
 
+  /* components/data-display/card/card.css */
   .mn-card {
     display: flex;
     flex-direction: column;
@@ -673,6 +930,7 @@
     padding: 0;
   }
 
+  /* components/feedback/skeleton/skeleton.css */
   .mn-skeleton {
     display: block;
     border-radius: var(--mn-radius-md);
@@ -692,6 +950,7 @@
     }
   }
 
+  /* components/feedback/empty-state/empty-state.css */
   .mn-empty-state {
     display: flex;
     flex-direction: column;
@@ -739,7 +998,77 @@
     gap: var(--mn-space-2);
     margin-top: var(--mn-space-3);
   }
+  .mn-empty-state[data-size='compact'] {
+    gap: var(--mn-space-1);
+    padding: var(--mn-space-5) var(--mn-space-3);
+  }
+  .mn-empty-state[data-size='compact'] .mn-empty-state__icon {
+    width: 2rem;
+    height: 2rem;
+    margin-bottom: var(--mn-space-1);
+    border-radius: var(--mn-radius-md);
+  }
+  .mn-empty-state[data-size='compact'] .mn-empty-state__icon > svg {
+    width: 1rem;
+    height: 1rem;
+  }
+  .mn-empty-state[data-size='compact'] .mn-empty-state__title {
+    font-size: var(--mn-text-sm);
+  }
+  .mn-empty-state[data-size='compact'] .mn-empty-state__actions {
+    margin-top: var(--mn-space-2);
+  }
+  .mn-empty-state[data-kind='success'] .mn-empty-state__icon {
+    background: var(--mn-color-success-subtle);
+    color: var(--mn-color-success-strong);
+  }
+  .mn-empty-state__tip {
+    margin: var(--mn-space-3) 0 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-xs);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-empty-state__text {
+    display: flex;
+    flex: 1 1 12rem;
+    flex-direction: column;
+    gap: var(--mn-space-0-5);
+    min-width: 0;
+  }
+  .mn-empty-state[data-layout='line'] {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--mn-space-2) var(--mn-space-3);
+    max-width: none;
+    margin-inline: 0;
+    padding: var(--mn-space-3) var(--mn-space-4);
+    text-align: start;
+  }
+  .mn-empty-state[data-layout='line'] .mn-empty-state__icon {
+    width: 2rem;
+    height: 2rem;
+    margin: 0;
+    border-radius: var(--mn-radius-md);
+  }
+  .mn-empty-state[data-layout='line'] .mn-empty-state__icon > svg {
+    width: 1rem;
+    height: 1rem;
+  }
+  .mn-empty-state[data-layout='line'] .mn-empty-state__title {
+    font-size: var(--mn-text-sm);
+    font-weight: var(--mn-weight-medium);
+  }
+  .mn-empty-state[data-layout='line'] .mn-empty-state__actions {
+    justify-content: flex-start;
+    margin-top: 0;
+  }
+  .mn-empty-state[data-layout='line'] .mn-empty-state__tip {
+    flex-basis: 100%;
+    margin-top: 0;
+  }
 
+  /* components/feedback/alert/alert.css */
   .mn-alert {
     --_bg: var(--mn-color-bg-subtle);
     --_fg: var(--mn-color-text-muted);
@@ -800,7 +1129,7 @@
     --_border: var(--mn-color-danger-border);
   }
 
-  /* 40-overlays.css */
+  /* components/overlays/dialog/dialog.css */
   .mn-overlay {
     position: fixed;
     inset: 0;
@@ -893,7 +1222,37 @@
     background: var(--mn-color-bg-muted);
     color: var(--mn-color-text-default);
   }
+  .mn-dialog__close:disabled {
+    color: var(--mn-color-text-disabled);
+    cursor: not-allowed;
+  }
+  .mn-dialog__close:disabled:hover {
+    background: transparent;
+  }
+
+  /* Phones: fill the screen when asked, keeping clear of notches and home bars. */
+  @media (max-width: 639.98px) {
+    .mn-dialog[data-fullscreen-phone] {
+      box-sizing: border-box;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100dvh;
+      max-height: none;
+      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
+        env(safe-area-inset-left);
+      border: 0;
+      border-radius: 0;
+      transform: none;
+      animation: mn-fade-in var(--mn-duration-base) var(--mn-ease-enter);
+    }
+    .mn-dialog[data-fullscreen-phone] .mn-dialog__close {
+      top: calc(var(--mn-space-3) + env(safe-area-inset-top));
+      right: calc(var(--mn-space-3) + env(safe-area-inset-right));
+    }
+  }
 
+  /* styles/menu.css */
   /* Menus: shared by DropdownMenu and Select. */
   .mn-menu {
     z-index: var(--mn-z-dropdown);
@@ -935,6 +1294,9 @@
   .mn-menu__item[data-tone='danger'][data-highlighted] {
     background: var(--mn-color-danger-subtle);
   }
+  .mn-menu__item[data-tone='danger'] .mn-menu__icon {
+    color: inherit;
+  }
   .mn-menu__icon {
     display: inline-flex;
     color: var(--mn-color-text-muted);
@@ -969,6 +1331,7 @@
     background: var(--mn-color-border-subtle);
   }
 
+  /* components/overlays/popover/popover.css */
   .mn-popover {
     z-index: var(--mn-z-popover);
     width: max-content;
@@ -985,6 +1348,7 @@
     outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
   }
 
+  /* components/overlays/tooltip/tooltip.css */
   .mn-tooltip {
     z-index: var(--mn-z-tooltip);
     max-width: 18rem;
@@ -998,7 +1362,7 @@
     animation: mn-fade-in var(--mn-duration-fast) var(--mn-ease-enter);
   }
 
-  /* 50-navigation.css */
+  /* components/navigation/tabs/tabs.css */
   .mn-tabs__list {
     display: flex;
     align-items: center;
@@ -1072,7 +1436,103 @@
     outline-offset: 2px;
   }
 
-  /* 60-data.css */
+  /* Link tabs: anchors styled as triggers. */
+  .mn-tabs__link {
+    text-decoration: none;
+  }
+  .mn-tabs__link[aria-disabled='true'] {
+    color: var(--mn-color-text-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* Count bubble after the label. */
+  .mn-tabs__count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.25rem;
+    height: 1.125rem;
+    padding-inline: var(--mn-space-1-5);
+    border-radius: var(--mn-radius-full);
+    background: var(--mn-color-bg-muted);
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-xs);
+    font-weight: var(--mn-weight-semibold);
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+  }
+  [data-variant='pill'] > .mn-tabs__trigger .mn-tabs__count {
+    background: var(--mn-color-bg-emphasis);
+  }
+  .mn-tabs__trigger[data-state='active'] .mn-tabs__count[data-tone='neutral'] {
+    color: var(--mn-color-text-default);
+  }
+  .mn-tabs__count[data-tone='accent'] {
+    background: var(--mn-color-accent-subtle);
+    color: var(--mn-color-accent-strong);
+  }
+  .mn-tabs__count[data-tone='info'] {
+    background: var(--mn-color-info-subtle);
+    color: var(--mn-color-info-strong);
+  }
+  .mn-tabs__count[data-tone='success'] {
+    background: var(--mn-color-success-subtle);
+    color: var(--mn-color-success-strong);
+  }
+  .mn-tabs__count[data-tone='warning'] {
+    background: var(--mn-color-warning-subtle);
+    color: var(--mn-color-warning-strong);
+  }
+  .mn-tabs__count[data-tone='danger'] {
+    background: var(--mn-color-danger-subtle);
+    color: var(--mn-color-danger-strong);
+  }
+  [data-variant='pill'] > .mn-tabs__trigger .mn-tabs__count:not([data-tone='neutral']) {
+    background: var(--mn-color-bg-surface);
+  }
+
+  /* Scrollable list: scrolls sideways instead of overflowing the page. The
+     line border moves to an inset shadow so the active underline is not
+     clipped by the scroll container. */
+  .mn-tabs__list[data-scrollable] {
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    overscroll-behavior-x: contain;
+    scrollbar-width: thin;
+    scroll-padding-inline: var(--mn-space-4);
+    /* A scroll container should not widen its parent to fit every tab. */
+    contain: inline-size;
+  }
+  .mn-tabs__list[data-scrollable][data-variant='line'] {
+    border-bottom: 0;
+    box-shadow: inset 0 -1px 0 var(--mn-color-border-default);
+  }
+  [data-variant='line'][data-scrollable] > .mn-tabs__trigger::after {
+    bottom: 0;
+  }
+  .mn-tabs__list[data-scrollable] > .mn-tabs__trigger {
+    flex-shrink: 0;
+  }
+  /* The scroll container clips outside outlines, so the ring sits inside. */
+  .mn-tabs__list[data-scrollable] > .mn-tabs__trigger:focus-visible {
+    outline-offset: calc(var(--mn-focus-ring-width) * -1);
+  }
+  [data-variant='line'][data-scrollable] > .mn-tabs__trigger {
+    padding-inline: var(--mn-space-1);
+  }
+  .mn-tabs__list[data-scrollable][data-variant='pill'] {
+    display: flex;
+  }
+
+  /* Filter tabs share the list and trigger styles above. */
+  .mn-tabs-filter {
+    width: 100%;
+    min-width: 0;
+  }
+
+  /* components/data-grid/data-table/data-table.css */
   .mn-table-wrap {
     width: 100%;
     overflow: auto;
@@ -1170,6 +1630,7 @@
     opacity: 1;
   }
 
+  /* components/navigation/pagination/pagination.css */
   .mn-pagination {
     display: flex;
     align-items: center;
@@ -1223,6 +1684,7 @@
     font-variant-numeric: tabular-nums;
   }
 
+  /* components/navigation/breadcrumb/breadcrumb.css */
   .mn-breadcrumb__list {
     display: flex;
     flex-wrap: wrap;
@@ -1279,6 +1741,7 @@
     outline-offset: 2px;
   }
 
+  /* components/forms/combobox/combobox.css */
   .mn-combobox {
     position: relative;
     padding-inline-end: var(--mn-space-1);
@@ -1354,7 +1817,7 @@
     text-align: center;
   }
 
-  /* 70-feedback.css */
+  /* components/feedback/toast/toast.css */
   .mn-toast-viewport {
     position: fixed;
     z-index: var(--mn-z-toast);
@@ -1479,6 +1942,7 @@
     }
   }
 
+  /* components/data-display/progress-bar/progress-bar.css */
   .mn-progress {
     --_h: 0.5rem;
     --_fill: var(--mn-color-accent-strong);
@@ -1501,6 +1965,9 @@
   .mn-progress[data-tone='danger'] {
     --_fill: var(--mn-color-danger-strong);
   }
+  .mn-progress[data-tone='neutral'] {
+    --_fill: var(--mn-color-text-muted);
+  }
   .mn-progress__bar {
     height: 100%;
     border-radius: inherit;
@@ -1525,6 +1992,60 @@
     }
   }
 
+  /* Meter (semantics="meter") and stacked segments. */
+  .mn-progress__segment {
+    position: absolute;
+    inset-block: 0;
+    box-sizing: border-box;
+    background: var(--_seg, var(--mn-color-accent-strong));
+    transition:
+      width var(--mn-duration-slow) var(--mn-ease-standard),
+      inset-inline-start var(--mn-duration-slow) var(--mn-ease-standard);
+  }
+  .mn-progress__segment + .mn-progress__segment {
+    border-inline-start: 2px solid var(--mn-color-bg-surface);
+  }
+  .mn-progress__segment[data-tone='accent'] {
+    --_seg: var(--mn-color-accent-strong);
+  }
+  .mn-progress__segment[data-tone='success'] {
+    --_seg: var(--mn-color-success-strong);
+  }
+  .mn-progress__segment[data-tone='warning'] {
+    --_seg: var(--mn-color-warning-strong);
+  }
+  .mn-progress__segment[data-tone='danger'] {
+    --_seg: var(--mn-color-danger-strong);
+  }
+  .mn-progress__segment[data-tone='info'] {
+    --_seg: var(--mn-color-info-strong);
+  }
+  .mn-progress__segment[data-tone='neutral'] {
+    --_seg: var(--mn-color-text-subtle);
+  }
+  .mn-progress__segment[data-tone='data-1'] {
+    --_seg: var(--mn-color-data-1);
+  }
+  .mn-progress__segment[data-tone='data-2'] {
+    --_seg: var(--mn-color-data-2);
+  }
+  .mn-progress__segment[data-tone='data-3'] {
+    --_seg: var(--mn-color-data-3);
+  }
+  .mn-progress__segment[data-tone='data-4'] {
+    --_seg: var(--mn-color-data-4);
+  }
+  .mn-progress__segment[data-tone='data-5'] {
+    --_seg: var(--mn-color-data-5);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .mn-progress__bar,
+    .mn-progress__segment {
+      transition: none;
+    }
+  }
+
+  /* components/layout/separator/separator.css */
   .mn-separator {
     flex-shrink: 0;
     background: var(--mn-color-border-default);
@@ -1539,6 +2060,7 @@
     min-height: 1em;
   }
 
+  /* components/navigation/link/link.css */
   .mn-link {
     display: inline;
     align-items: center;
@@ -1579,7 +2101,7 @@
     vertical-align: -0.05em;
   }
 
-  /* 80-patterns.css */
+  /* patterns/layout/page-header/page-header.css */
   .mn-page-header {
     display: flex;
     flex-direction: column;
@@ -1633,6 +2155,7 @@
     margin-bottom: calc(var(--mn-space-4) * -1);
   }
 
+  /* patterns/actions/toolbar/toolbar.css */
   .mn-toolbar-wrap {
     display: flex;
     flex-direction: column;
@@ -1661,6 +2184,7 @@
     margin-inline-start: auto;
   }
 
+  /* patterns/search/filter-bar/filter-bar.css */
   .mn-filter-bar {
     display: flex;
     flex-wrap: wrap;
@@ -1735,6 +2259,7 @@
     outline-offset: 2px;
   }
 
+  /* patterns/layout/settings-section/settings-section.css */
   .mn-settings-section {
     display: grid;
     gap: var(--mn-space-4);
@@ -1807,6 +2332,7 @@
     gap: var(--mn-space-1-5);
   }
 
+  /* components/data-display/description-list/description-list.css */
   .mn-dl {
     display: grid;
     gap: var(--mn-space-4) var(--mn-space-6);
@@ -1852,6 +2378,7 @@
     overflow-wrap: anywhere;
   }
 
+  /* patterns/layout/split-layout/split-layout.css */
   .mn-split {
     --_list: 22rem;
     display: grid;
@@ -1898,6 +2425,7 @@
     }
   }
 
+  /* components/data-display/stat-card/stat-card.css */
   .mn-stat {
     display: flex;
     align-items: flex-start;
@@ -1956,11 +2484,39 @@
     color: var(--mn-color-accent-strong);
   }
 
+  /* components/feedback/error-state/error-state.css */
   .mn-error-state .mn-empty-state__icon {
     background: var(--mn-color-danger-subtle);
     color: var(--mn-color-danger-strong);
   }
+  .mn-error-state[data-kind='forbidden'] .mn-empty-state__icon,
+  .mn-error-state[data-kind='not-found'] .mn-empty-state__icon,
+  .mn-error-state[data-kind='maintenance'] .mn-empty-state__icon {
+    background: var(--mn-color-bg-muted);
+    color: var(--mn-color-text-muted);
+  }
+  .mn-error-state[data-kind='offline'] .mn-empty-state__icon {
+    background: var(--mn-color-warning-subtle);
+    color: var(--mn-color-warning-strong);
+  }
+  .mn-error-state__request-id {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: var(--mn-space-1);
+    margin: var(--mn-space-2) 0 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-xs);
+  }
+  .mn-error-state__request-id code {
+    font-family: var(--mn-font-mono);
+    color: var(--mn-color-text-default);
+    user-select: all;
+    overflow-wrap: anywhere;
+  }
 
+  /* components/feedback/loading-state/loading-state.css */
   .mn-loading-state {
     display: flex;
     flex-direction: column;
@@ -1968,7 +2524,7 @@
   }
   .mn-loading-state[data-variant='cards'] {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
   }
   .mn-loading-state__row {
     display: flex;
@@ -1981,4 +2537,3085 @@
     flex-direction: column;
     gap: var(--mn-space-2);
   }
+  .mn-loading-state[data-variant='rows'] {
+    gap: 0;
+  }
+  .mn-loading-state[data-variant='rows'] .mn-loading-state__row {
+    justify-content: space-between;
+    min-height: var(--mn-control-lg);
+    padding-block: var(--mn-space-2);
+    border-bottom: 1px solid var(--mn-color-border-subtle);
+  }
+  .mn-loading-state__meta {
+    flex: none;
+  }
+  .mn-loading-state[data-variant='spinner'] {
+    align-items: center;
+    justify-content: center;
+    padding: var(--mn-space-8) var(--mn-space-4);
+  }
+  .mn-loading-state__spinner {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mn-space-2);
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+  }
+
+  /* components/actions/copy-button/copy-button.css */
+  /* Copy Button: a Button (.mn-button) with an icon that confirms the result. */
+  .mn-copy-button[data-icon-only] {
+    width: var(--_h);
+    padding: 0;
+  }
+  .mn-copy-button__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    margin-inline: calc(var(--mn-space-0-5) * -1);
+    transition: color var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  .mn-copy-button[data-icon-only] .mn-copy-button__icon {
+    margin: 0;
+  }
+  .mn-copy-button__icon > svg {
+    width: 1rem;
+    height: 1rem;
+  }
+  .mn-copy-button[data-state='copied'] .mn-copy-button__icon {
+    color: var(--mn-color-success-strong);
+  }
+  .mn-copy-button[data-state='error'] .mn-copy-button__icon {
+    color: var(--mn-color-danger-strong);
+  }
+  .mn-copy-button[data-variant='primary'] .mn-copy-button__icon,
+  .mn-copy-button[data-variant='danger'] .mn-copy-button__icon {
+    color: inherit;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .mn-copy-button__icon {
+      transition: none;
+    }
+  }
+  .mn-copy-button__label {
+    display: inline-grid;
+    justify-items: center;
+  }
+  .mn-copy-button__label > span {
+    grid-area: 1 / 1;
+  }
+  .mn-copy-button__label > span:not([data-active]) {
+    visibility: hidden;
+  }
+
+  /* components/actions/copy-field/copy-field.css */
+  /* Copy Field: a read-only Input or Textarea with a CopyButton beside it. */
+  .mn-copy-field {
+    display: flex;
+    align-items: center;
+    gap: var(--mn-space-2);
+    width: 100%;
+    min-width: 0;
+  }
+  .mn-copy-field[data-multiline] {
+    align-items: flex-start;
+  }
+  .mn-copy-field__control {
+    flex: 1 1 auto;
+    min-width: 0;
+    background: var(--mn-color-bg-subtle);
+    text-overflow: ellipsis;
+  }
+  .mn-copy-field[data-mono] .mn-copy-field__control {
+    font-family: var(--mn-font-mono);
+  }
+  .mn-copy-field[data-multiline] .mn-copy-field__control {
+    white-space: pre;
+    overflow: auto;
+  }
+  .mn-copy-field__button {
+    flex-shrink: 0;
+  }
+
+  /* components/technical/secret-field/secret-field.css */
+  /* Secret Field: a masked Input with reveal and copy buttons inside its end edge. */
+  .mn-secret-field {
+    --_inset: var(--mn-space-1);
+    --_btn: var(--mn-control-xs);
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+  }
+  .mn-secret-field[data-size='lg'] {
+    --_btn: var(--mn-control-sm);
+  }
+  .mn-secret-field[data-size='sm'] {
+    --_inset: var(--mn-space-0-5);
+    --_btn: var(--mn-control-xs);
+  }
+  .mn-secret-field__control {
+    font-family: var(--mn-font-mono);
+    letter-spacing: 0.01em;
+  }
+  .mn-secret-field[data-actions='1'] .mn-secret-field__control {
+    padding-inline-end: calc(var(--_btn) + var(--_inset) * 2);
+  }
+  .mn-secret-field[data-actions='2'] .mn-secret-field__control {
+    padding-inline-end: calc(var(--_btn) * 2 + var(--_inset) * 3);
+  }
+  .mn-secret-field__control::placeholder {
+    font-family: var(--mn-font-sans);
+    letter-spacing: normal;
+  }
+  .mn-secret-field__actions {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: var(--_inset);
+    display: flex;
+    align-items: center;
+    gap: var(--_inset);
+  }
+  .mn-secret-field__actions:empty {
+    display: none;
+  }
+  .mn-secret-field__toggle[aria-pressed='true'] {
+    color: var(--mn-color-text-default);
+  }
+  .mn-secret-field__actions .mn-button {
+    color: var(--mn-color-text-muted);
+  }
+  .mn-secret-field__actions .mn-button:hover:not(:disabled) {
+    color: var(--mn-color-text-default);
+  }
+
+  /* components/data-display/status-badge/status-badge.css */
+  /* Status Badge: text + tone + a distinct icon or dot. Colour is never the only signal. */
+  .mn-status-badge {
+    --_bg: var(--mn-color-bg-muted);
+    --_fg: var(--mn-color-text-default);
+    --_mark: var(--mn-color-text-muted);
+    --_border: transparent;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mn-space-1);
+    max-width: 100%;
+    height: 1.375rem;
+    padding-inline: var(--mn-space-2);
+    border: 1px solid var(--_border);
+    border-radius: var(--mn-radius-full);
+    background: var(--_bg);
+    color: var(--_fg);
+    font-family: var(--mn-font-sans);
+    font-size: var(--mn-text-xs);
+    font-weight: var(--mn-weight-medium);
+    line-height: 1;
+    white-space: nowrap;
+    vertical-align: middle;
+  }
+  .mn-status-badge[data-size='sm'] {
+    height: 1.125rem;
+    padding-inline: var(--mn-space-1-5);
+    font-size: var(--mn-text-2xs);
+  }
+  .mn-status-badge__label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .mn-status-badge__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    color: var(--_mark);
+  }
+  .mn-status-badge__icon > svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .mn-status-badge[data-size='md'] .mn-status-badge__icon > svg {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .mn-status-badge__dot {
+    flex-shrink: 0;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: var(--mn-radius-full);
+    background: var(--_mark);
+  }
+
+  /* Tones. Subtle: tinted fill, strong text. */
+  .mn-status-badge[data-tone='accent'] {
+    --_bg: var(--mn-color-accent-subtle);
+    --_fg: var(--mn-color-accent-strong);
+    --_mark: var(--mn-color-accent-strong);
+    --_border-tone: var(--mn-color-accent-border);
+    --_solid: var(--mn-color-accent-solid);
+    --_on-solid: var(--mn-color-accent-on-solid);
+  }
+  .mn-status-badge[data-tone='info'] {
+    --_bg: var(--mn-color-info-subtle);
+    --_fg: var(--mn-color-info-strong);
+    --_mark: var(--mn-color-info-strong);
+    --_border-tone: var(--mn-color-info-border);
+    --_solid: var(--mn-color-info-solid);
+    --_on-solid: var(--mn-color-info-on-solid);
+  }
+  .mn-status-badge[data-tone='success'] {
+    --_bg: var(--mn-color-success-subtle);
+    --_fg: var(--mn-color-success-strong);
+    --_mark: var(--mn-color-success-strong);
+    --_border-tone: var(--mn-color-success-border);
+    --_solid: var(--mn-color-success-solid);
+    --_on-solid: var(--mn-color-success-on-solid);
+  }
+  .mn-status-badge[data-tone='warning'] {
+    --_bg: var(--mn-color-warning-subtle);
+    --_fg: var(--mn-color-warning-strong);
+    --_mark: var(--mn-color-warning-strong);
+    --_border-tone: var(--mn-color-warning-border);
+    --_solid: var(--mn-color-warning-solid);
+    --_on-solid: var(--mn-color-warning-on-solid);
+  }
+  .mn-status-badge[data-tone='danger'] {
+    --_bg: var(--mn-color-danger-subtle);
+    --_fg: var(--mn-color-danger-strong);
+    --_mark: var(--mn-color-danger-strong);
+    --_border-tone: var(--mn-color-danger-border);
+    --_solid: var(--mn-color-danger-solid);
+    --_on-solid: var(--mn-color-danger-on-solid);
+  }
+  .mn-status-badge[data-tone='neutral'] {
+    --_fg: var(--mn-color-text-muted);
+    --_border-tone: var(--mn-color-border-default);
+    --_solid: var(--mn-color-bg-inverse);
+    --_on-solid: var(--mn-color-text-inverse);
+  }
+
+  /* Outline: no fill, tone border. */
+  .mn-status-badge[data-variant='outline'] {
+    --_bg: transparent;
+    --_border: var(--_border-tone);
+  }
+  /* Solid: one prominent status. */
+  .mn-status-badge[data-variant='solid'] {
+    --_bg: var(--_solid);
+    --_fg: var(--_on-solid);
+    --_mark: var(--_on-solid);
+  }
+  /* Dot: quiet. Default text colour, the tone lives in the dot only. */
+  .mn-status-badge[data-variant='dot'] {
+    --_bg: transparent;
+    --_fg: var(--mn-color-text-default);
+    height: auto;
+    padding-inline: 0;
+    gap: var(--mn-space-1-5);
+    border-radius: 0;
+  }
+
+  /*
+   * Custom colours (already contrast-guarded in JS per scheme). The colour marks
+   * the dot, icon and border; the text stays a theme token so it always reads.
+   */
+  .mn-status-badge[data-custom-color] {
+    --_custom: var(--mn-status-light);
+    --_custom-on: var(--mn-status-on-light);
+    --_mark: var(--_custom);
+    --_bg: var(--mn-color-bg-surface);
+    --_fg: var(--mn-color-text-default);
+    --_border: var(--mn-color-border-default);
+  }
+  :is(.dark, [data-mn-theme='dark']) .mn-status-badge[data-custom-color] {
+    --_custom: var(--mn-status-dark);
+    --_custom-on: var(--mn-status-on-dark);
+  }
+  .mn-status-badge[data-custom-color][data-variant='outline'] {
+    --_bg: transparent;
+    --_border: var(--_custom);
+  }
+  .mn-status-badge[data-custom-color][data-variant='solid'] {
+    --_bg: var(--_custom);
+    --_fg: var(--_custom-on);
+    --_mark: var(--_custom-on);
+    --_border: transparent;
+  }
+  .mn-status-badge[data-custom-color][data-variant='dot'] {
+    --_bg: transparent;
+    --_border: transparent;
+  }
+
+  @media (forced-colors: active) {
+    .mn-status-badge {
+      border-color: CanvasText;
+    }
+    .mn-status-badge__dot {
+      background: CanvasText;
+    }
+  }
+
+  /* components/forms/segmented-control/segmented-control.css */
+  /* Segmented Control and Toggle Group: one connected track of options. */
+  .mn-segmented-control {
+    --_h: var(--mn-control-md);
+    --_pad: var(--mn-space-0-5);
+    --_px: var(--mn-space-3);
+    --_fs: var(--mn-text-sm);
+    display: inline-flex;
+    align-items: stretch;
+    gap: var(--mn-space-0-5);
+    max-width: 100%;
+    padding: var(--_pad);
+    border-radius: var(--mn-radius-md);
+    background: var(--mn-color-bg-muted);
+    overflow-x: auto;
+    scrollbar-width: none;
+    vertical-align: middle;
+  }
+  .mn-segmented-control::-webkit-scrollbar {
+    display: none;
+  }
+  .mn-segmented-control[data-size='sm'] {
+    --_h: var(--mn-control-sm);
+    --_px: var(--mn-space-2-5);
+    --_fs: var(--mn-text-xs);
+  }
+  .mn-segmented-control[data-size='lg'] {
+    --_h: var(--mn-control-lg);
+    --_px: var(--mn-space-4);
+  }
+  .mn-segmented-control[data-block] {
+    display: flex;
+    width: 100%;
+  }
+  .mn-segmented-control[data-block] > .mn-segmented-control__item {
+    flex: 1 1 0;
+  }
+
+  .mn-segmented-control__item {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    gap: var(--mn-space-1-5);
+    height: calc(var(--_h) - var(--_pad) * 2);
+    padding-inline: var(--_px);
+    border: 1px solid transparent;
+    border-radius: var(--mn-radius-sm);
+    background: transparent;
+    color: var(--mn-color-text-muted);
+    font: inherit;
+    font-family: var(--mn-font-sans);
+    font-size: var(--_fs);
+    font-weight: var(--mn-weight-medium);
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+    transition:
+      background-color var(--mn-duration-fast) var(--mn-ease-standard),
+      color var(--mn-duration-fast) var(--mn-ease-standard),
+      box-shadow var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  .mn-segmented-control__item:hover:not(:disabled) {
+    color: var(--mn-color-text-default);
+  }
+  .mn-segmented-control__item:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 0;
+  }
+  .mn-segmented-control__item[data-state='on'] {
+    border-color: var(--mn-color-border-subtle);
+    background: var(--mn-color-bg-surface);
+    color: var(--mn-color-text-default);
+    box-shadow: var(--mn-shadow-xs);
+  }
+  .mn-segmented-control__item:disabled {
+    color: var(--mn-color-text-disabled);
+    cursor: not-allowed;
+  }
+  .mn-segmented-control__item[data-icon-only] {
+    width: calc(var(--_h) - var(--_pad) * 2);
+    padding: 0;
+  }
+  .mn-segmented-control__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+  .mn-segmented-control__icon > svg {
+    width: 1rem;
+    height: 1rem;
+  }
+  .mn-segmented-control__count {
+    min-width: 1.25rem;
+    padding: var(--mn-space-0-5) var(--mn-space-1-5);
+    border-radius: var(--mn-radius-full);
+    background: var(--mn-color-bg-emphasis);
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-2xs);
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+  }
+  .mn-segmented-control__item[data-state='on'] .mn-segmented-control__count {
+    background: var(--mn-color-bg-muted);
+    color: var(--mn-color-text-default);
+  }
+  .mn-segmented-control__suffix {
+    color: var(--mn-color-success-strong);
+    font-size: var(--mn-text-2xs);
+    font-weight: var(--mn-weight-semibold);
+  }
+
+  @media (pointer: coarse) {
+    .mn-segmented-control__item {
+      min-height: 2.75rem;
+    }
+    .mn-segmented-control {
+      --_pad: var(--mn-space-1);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .mn-segmented-control__item {
+      transition: none;
+    }
+  }
+  @media (forced-colors: active) {
+    .mn-segmented-control__item[data-state='on'] {
+      border-color: Highlight;
+      outline: 2px solid Highlight;
+    }
+  }
+
+  /* components/data-display/relative-time/relative-time.css */
+  .mn-relative-time {
+    position: relative;
+    display: inline-block;
+    white-space: nowrap;
+  }
+  .mn-relative-time__text {
+    border-radius: var(--mn-radius-xs);
+    font-variant-numeric: tabular-nums;
+  }
+  .mn-relative-time__text[tabindex] {
+    cursor: default;
+    text-decoration: underline dotted;
+    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
+    text-underline-offset: 0.2em;
+  }
+  .mn-relative-time__text:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .mn-relative-time__tip {
+    position: absolute;
+    inset-block-end: calc(100% + var(--mn-space-1-5));
+    inset-inline-start: 50%;
+    z-index: var(--mn-z-tooltip);
+    width: max-content;
+    max-width: min(18rem, calc(100vw - 2rem));
+    padding: var(--mn-space-1) var(--mn-space-2);
+    border-radius: var(--mn-radius-sm);
+    background: var(--mn-color-bg-inverse);
+    color: var(--mn-color-text-inverse);
+    font-size: var(--mn-text-xs);
+    font-weight: var(--mn-weight-regular);
+    line-height: var(--mn-leading-snug);
+    white-space: normal;
+    box-shadow: var(--mn-shadow-md);
+    transform: translateX(-50%);
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+    transition:
+      opacity var(--mn-duration-fast) var(--mn-ease-standard),
+      visibility 0s linear var(--mn-duration-fast);
+  }
+  /* Bridges the gap so the pointer can move onto the tip without it closing (WCAG 1.4.13). */
+  .mn-relative-time__tip::after {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: 100%;
+    height: var(--mn-space-1-5);
+  }
+  [dir='rtl'] .mn-relative-time__tip {
+    transform: translateX(50%);
+  }
+  .mn-relative-time:hover .mn-relative-time__tip,
+  .mn-relative-time:has(.mn-relative-time__text:focus-visible) .mn-relative-time__tip {
+    visibility: visible;
+    opacity: 1;
+    pointer-events: auto;
+    transition-delay: 0s;
+  }
+  .mn-relative-time[data-dismissed] .mn-relative-time__tip {
+    visibility: hidden;
+    opacity: 0;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .mn-relative-time__tip {
+      transition: none;
+    }
+  }
+
+  /* components/billing/money/money.css */
+  .mn-money {
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+  .mn-money[data-tone='danger'] {
+    color: var(--mn-color-danger-strong);
+  }
+  .mn-money[data-empty] {
+    color: var(--mn-color-text-muted);
+  }
+
+  /* components/data-grid/load-more/load-more.css */
+  .mn-load-more {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: var(--mn-space-2) var(--mn-space-3);
+    padding-block: var(--mn-space-3);
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-xs);
+    line-height: var(--mn-leading-snug);
+    text-align: center;
+  }
+  .mn-load-more:focus {
+    outline: none;
+  }
+  .mn-load-more__count,
+  .mn-load-more__error,
+  .mn-load-more__end {
+    margin: 0;
+    font-variant-numeric: tabular-nums;
+  }
+  .mn-load-more__error {
+    color: var(--mn-color-danger-strong);
+  }
+  .mn-load-more__end:focus-visible {
+    border-radius: var(--mn-radius-xs);
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 2px;
+  }
+
+  /* components/navigation/back-link/back-link.css */
+  .mn-back-link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mn-space-1);
+    min-height: 1.5rem;
+    padding-inline-end: var(--mn-space-1);
+    border-radius: var(--mn-radius-xs);
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+    font-weight: var(--mn-weight-medium);
+    line-height: var(--mn-leading-snug);
+    text-decoration: none;
+    transition: color var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  .mn-back-link:hover {
+    color: var(--mn-color-text-default);
+  }
+  .mn-back-link[data-variant='standalone'] {
+    color: var(--mn-color-text-link);
+  }
+  .mn-back-link[data-variant='standalone']:hover {
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+  }
+  .mn-back-link:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .mn-back-link__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    margin-inline-start: calc(var(--mn-space-1) * -1);
+    transition: transform var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  .mn-back-link:hover .mn-back-link__icon {
+    transform: translateX(-2px);
+  }
+  [dir='rtl'] .mn-back-link__icon {
+    transform: scaleX(-1);
+  }
+  [dir='rtl'] .mn-back-link:hover .mn-back-link__icon {
+    transform: scaleX(-1) translateX(-2px);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .mn-back-link__icon,
+    .mn-back-link:hover .mn-back-link__icon,
+    [dir='rtl'] .mn-back-link:hover .mn-back-link__icon {
+      transition: none;
+    }
+    .mn-back-link:hover .mn-back-link__icon {
+      transform: none;
+    }
+    [dir='rtl'] .mn-back-link:hover .mn-back-link__icon {
+      transform: scaleX(-1);
+    }
+  }
+
+  /* components/search/search-input/search-input.css */
+  /* Search Input. The wrapper is an .mn-input; the native input inside is borderless. */
+  .mn-search-input {
+    box-sizing: border-box;
+    position: relative;
+    gap: var(--mn-space-2);
+    padding-inline-end: var(--mn-space-1);
+    cursor: text;
+  }
+  .mn-search-input:focus-within {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 0;
+    border-color: var(--mn-color-focus-ring);
+  }
+  .mn-search-input[data-invalid] {
+    border-color: var(--mn-color-danger-strong);
+  }
+  .mn-search-input[data-disabled] {
+    background: var(--mn-color-bg-subtle);
+    color: var(--mn-color-text-disabled);
+    cursor: not-allowed;
+  }
+  .mn-search-input__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    color: var(--mn-color-text-subtle);
+  }
+  .mn-search-input[data-pending] .mn-search-input__icon {
+    color: var(--mn-color-text-muted);
+  }
+  .mn-search-input__input {
+    flex: 1;
+    min-width: 0;
+    width: 0;
+    height: 100%;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    outline: none;
+    appearance: none;
+  }
+  .mn-search-input__input::placeholder {
+    color: var(--mn-color-text-subtle);
+  }
+  .mn-search-input__input::-webkit-search-cancel-button,
+  .mn-search-input__input::-webkit-search-decoration {
+    appearance: none;
+  }
+  .mn-search-input__input:disabled {
+    cursor: not-allowed;
+  }
+  .mn-search-input__clear {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: var(--mn-control-xs);
+    height: var(--mn-control-xs);
+    padding: 0;
+    border: 0;
+    border-radius: var(--mn-radius-sm);
+    background: transparent;
+    color: var(--mn-color-text-muted);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  .mn-search-input__clear:hover {
+    background: var(--mn-color-bg-muted);
+    color: var(--mn-color-text-default);
+  }
+  .mn-search-input__clear:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 0;
+  }
+  .mn-search-input__shortcut {
+    flex-shrink: 0;
+    margin-inline-end: var(--mn-space-1);
+    pointer-events: none;
+  }
+  .mn-search-input[data-size='sm'] {
+    gap: var(--mn-space-1-5);
+  }
+  .mn-search-input[data-size='sm'] .mn-search-input__clear {
+    width: calc(var(--mn-control-xs) - var(--mn-space-1));
+    height: calc(var(--mn-control-xs) - var(--mn-space-1));
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .mn-search-input__clear {
+      transition: none;
+    }
+  }
+
+  /* components/forms/tag-input/tag-input.css */
+  /* Tag Input. The control is an .mn-input that grows to fit wrapped chips. */
+  .mn-tag-input {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-1-5);
+    min-width: 0;
+  }
+  .mn-tag-input__control {
+    box-sizing: border-box;
+    flex-wrap: wrap;
+    gap: var(--mn-space-1);
+    height: auto;
+    min-height: var(--_h);
+    padding-block: var(--mn-space-1);
+    padding-inline: var(--mn-space-1-5);
+    cursor: text;
+  }
+  .mn-tag-input__control:focus-within {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 0;
+    border-color: var(--mn-color-focus-ring);
+  }
+  .mn-tag-input__control[data-invalid] {
+    border-color: var(--mn-color-danger-strong);
+  }
+  .mn-tag-input__control[data-disabled] {
+    background: var(--mn-color-bg-subtle);
+    color: var(--mn-color-text-disabled);
+    cursor: not-allowed;
+  }
+  .mn-tag-input__list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--mn-space-1);
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .mn-tag-input__tag {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mn-space-0-5);
+    max-width: 100%;
+    min-height: calc(var(--_h) - var(--mn-space-2) - 2px);
+    padding-inline: var(--mn-space-2) var(--mn-space-0-5);
+    border: 1px solid var(--mn-color-border-subtle);
+    border-radius: var(--mn-radius-sm);
+    background: var(--mn-color-bg-muted);
+    color: var(--mn-color-text-default);
+    font-size: var(--mn-text-xs);
+    font-weight: var(--mn-weight-medium);
+    line-height: var(--mn-leading-snug);
+  }
+  .mn-tag-input__control[data-disabled] .mn-tag-input__tag {
+    color: var(--mn-color-text-disabled);
+  }
+  .mn-tag-input__tag:not(:has(.mn-tag-input__remove)) {
+    padding-inline-end: var(--mn-space-2);
+  }
+  .mn-tag-input__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .mn-tag-input__remove {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    border: 0;
+    border-radius: var(--mn-radius-xs);
+    background: transparent;
+    color: var(--mn-color-text-muted);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  .mn-tag-input__remove svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .mn-tag-input__remove:hover {
+    background: var(--mn-color-bg-emphasis);
+    color: var(--mn-color-text-default);
+  }
+  .mn-tag-input__remove:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 0;
+  }
+  .mn-tag-input__input {
+    flex: 1 1 6rem;
+    min-width: 6rem;
+    height: calc(var(--_h) - var(--mn-space-2) - 2px);
+    padding: 0 var(--mn-space-1);
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    outline: none;
+  }
+  .mn-tag-input__input::placeholder {
+    color: var(--mn-color-text-subtle);
+  }
+  .mn-tag-input__input:disabled {
+    cursor: not-allowed;
+  }
+  .mn-tag-input__message {
+    margin: 0;
+    color: var(--mn-color-danger-strong);
+    font-size: var(--mn-text-xs);
+    font-weight: var(--mn-weight-medium);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-tag-input__content {
+    width: var(--radix-popover-trigger-width, auto);
+    min-width: 12rem;
+    padding: var(--mn-space-1);
+  }
+  .mn-tag-input__listbox {
+    max-height: min(var(--radix-popover-content-available-height, 16rem), 16rem);
+    overflow: auto;
+  }
+  .mn-tag-input__listbox .mn-menu__item {
+    cursor: pointer;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .mn-tag-input__remove {
+      transition: none;
+    }
+  }
+
+  /* components/identity/username-availability-input/username-availability-input.css */
+  /* Username Availability Input: an .mn-input with a prefix, a status icon and a message. */
+  .mn-username-availability-input {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-1-5);
+    min-width: 0;
+  }
+  .mn-username-availability-input__control {
+    box-sizing: border-box;
+    gap: var(--mn-space-2);
+  }
+  .mn-username-availability-input__control:focus-within {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 0;
+    border-color: var(--mn-color-focus-ring);
+  }
+  .mn-username-availability-input__control[data-invalid] {
+    border-color: var(--mn-color-danger-strong);
+  }
+  .mn-username-availability-input[data-status='valid'] .mn-username-availability-input__control {
+    border-color: var(--mn-color-success-border);
+  }
+  .mn-username-availability-input__control[data-disabled] {
+    background: var(--mn-color-bg-subtle);
+    color: var(--mn-color-text-disabled);
+    cursor: not-allowed;
+  }
+  .mn-username-availability-input__prefix {
+    flex-shrink: 1;
+    min-width: 0;
+    max-width: 50%;
+    overflow: hidden;
+    color: var(--mn-color-text-muted);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .mn-username-availability-input__input {
+    flex: 1;
+    min-width: 0;
+    width: 0;
+    height: 100%;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    outline: none;
+  }
+  .mn-username-availability-input__input::placeholder {
+    color: var(--mn-color-text-subtle);
+  }
+  .mn-username-availability-input__input:disabled {
+    cursor: not-allowed;
+  }
+  .mn-username-availability-input__icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    color: var(--mn-color-text-muted);
+  }
+  .mn-username-availability-input[data-status='valid'] .mn-username-availability-input__icon {
+    color: var(--mn-color-success-strong);
+  }
+  .mn-username-availability-input[data-status='invalid'] .mn-username-availability-input__icon {
+    color: var(--mn-color-danger-strong);
+  }
+  .mn-username-availability-input[data-status='error'] .mn-username-availability-input__icon {
+    color: var(--mn-color-warning-strong);
+  }
+  .mn-username-availability-input__message {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--mn-space-1) var(--mn-space-2);
+    margin: 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-xs);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-username-availability-input[data-status='valid'] .mn-username-availability-input__message {
+    color: var(--mn-color-success-strong);
+    font-weight: var(--mn-weight-medium);
+  }
+  .mn-username-availability-input[data-status='invalid'] .mn-username-availability-input__message {
+    color: var(--mn-color-danger-strong);
+    font-weight: var(--mn-weight-medium);
+  }
+  .mn-username-availability-input__retry {
+    padding: 0;
+    border: 0;
+    border-radius: var(--mn-radius-xs);
+    background: transparent;
+    color: var(--mn-color-text-link);
+    font: inherit;
+    font-weight: var(--mn-weight-medium);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    cursor: pointer;
+  }
+  .mn-username-availability-input__retry:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 2px;
+  }
+
+  /* components/forms/otp-pin-input/otp-pin-input.css */
+  /* OTP Pin Input: visual slots with one transparent input laid over them. */
+  .mn-otp-pin-input {
+    --_slot: 2.75rem;
+    --_slot-h: var(--mn-control-lg);
+    --_gap: var(--mn-space-2);
+    position: relative;
+    display: flex;
+    /* Full natural width, but never wider than the container: boxes shrink evenly instead of overflowing. */
+    width: 100%;
+    max-width: calc(
+      var(--_n, 6) * var(--_slot) + (var(--_n, 6) - 1 + 2 * var(--_seps, 0)) * var(--_gap)
+    );
+    font-family: var(--mn-font-mono);
+  }
+  .mn-otp-pin-input[data-size='lg'] {
+    --_slot: 3.25rem;
+    --_slot-h: var(--mn-control-xl);
+  }
+  .mn-otp-pin-input__slots {
+    display: flex;
+    flex: 1;
+    gap: var(--_gap);
+  }
+  .mn-otp-pin-input__slot {
+    box-sizing: border-box;
+    display: inline-flex;
+    flex: 1 1 0;
+    align-items: center;
+    justify-content: center;
+    /* A floor, so the boxes stay usable inside shrink-to-fit containers too. */
+    min-width: 1.5rem;
+    height: var(--_slot-h);
+    border: 1px solid var(--mn-color-border-input);
+    border-radius: var(--mn-radius-md);
+    background: var(--mn-color-bg-surface);
+    color: var(--mn-color-text-default);
+    font-size: var(--mn-text-lg);
+    font-weight: var(--mn-weight-semibold);
+    line-height: 1;
+    transition:
+      border-color var(--mn-duration-fast) var(--mn-ease-standard),
+      box-shadow var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  .mn-otp-pin-input[data-size='lg'] .mn-otp-pin-input__slot {
+    font-size: var(--mn-text-xl);
+  }
+  .mn-otp-pin-input:hover:not([data-disabled]) .mn-otp-pin-input__slot {
+    border-color: var(--mn-color-text-subtle);
+  }
+  .mn-otp-pin-input__slot[data-active] {
+    border-color: var(--mn-color-focus-ring);
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 0;
+  }
+  .mn-otp-pin-input[data-invalid] .mn-otp-pin-input__slot {
+    border-color: var(--mn-color-danger-strong);
+  }
+  .mn-otp-pin-input[data-disabled] .mn-otp-pin-input__slot {
+    background: var(--mn-color-bg-subtle);
+    color: var(--mn-color-text-disabled);
+  }
+  .mn-otp-pin-input__separator {
+    flex: 0 1 var(--_gap);
+  }
+  .mn-otp-pin-input__dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: var(--mn-radius-full);
+    background: currentColor;
+  }
+  .mn-otp-pin-input__caret {
+    width: 1px;
+    height: 1.25em;
+    background: var(--mn-color-text-default);
+    animation: mn-otp-pin-input-caret 1s steps(1) infinite;
+  }
+  @keyframes mn-otp-pin-input-caret {
+    50% {
+      opacity: 0;
+    }
+  }
+  .mn-otp-pin-input__input {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: transparent;
+    caret-color: transparent;
+    font-size: var(--mn-text-base);
+    letter-spacing: -0.5em;
+    outline: none;
+    cursor: text;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .mn-otp-pin-input__input::selection {
+    background: transparent;
+  }
+  .mn-otp-pin-input__input:disabled {
+    cursor: not-allowed;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .mn-otp-pin-input__caret {
+      animation: none;
+    }
+    .mn-otp-pin-input__slot {
+      transition: none;
+    }
+  }
+
+  /* components/geo/location-fields/location-fields.css */
+  /* Location Fields: a fieldset laying out country, region, city and postal code. */
+  .mn-location-fields {
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+  .mn-location-fields__legend {
+    margin-bottom: var(--mn-space-3);
+    padding: 0;
+    color: var(--mn-color-text-default);
+    font-size: var(--mn-text-sm);
+    font-weight: var(--mn-weight-semibold);
+    line-height: var(--mn-leading-snug);
+  }
+  .mn-location-fields__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
+    gap: var(--mn-space-4);
+  }
+  .mn-location-fields__field {
+    min-width: 0;
+  }
+  .mn-location-fields__failed {
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--mn-space-2);
+    min-height: var(--mn-control-md);
+    padding: var(--mn-space-1) var(--mn-space-1) var(--mn-space-1) var(--mn-space-3);
+    border: 1px solid var(--mn-color-danger-border);
+    border-radius: var(--mn-radius-md);
+    background: var(--mn-color-danger-subtle);
+    color: var(--mn-color-danger-strong);
+    font-size: var(--mn-text-xs);
+  }
+
+  /* components/feedback/error-page/error-page.css */
+  .mn-error-page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--mn-space-8);
+    min-height: 60vh;
+    padding: var(--mn-space-16) var(--mn-space-4);
+    overflow: hidden;
+    text-align: center;
+  }
+  .mn-error-page[data-full-screen] {
+    min-height: 100vh;
+    min-height: 100dvh;
+    background: var(--mn-color-bg-canvas);
+    color: var(--mn-color-text-default);
+    font-family: var(--mn-font-sans);
+  }
+  .mn-error-page__brand {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--mn-color-text-default);
+  }
+  .mn-error-page__body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    max-width: 30rem;
+  }
+  .mn-error-page__numeral {
+    margin: 0;
+    color: var(--mn-color-text-default);
+    font-size: clamp(5rem, 22vw, 10rem);
+    font-weight: var(--mn-weight-bold);
+    letter-spacing: var(--mn-tracking-tight);
+    line-height: 1;
+    opacity: 0.06;
+    pointer-events: none;
+    user-select: none;
+    font-variant-numeric: tabular-nums;
+  }
+  .mn-error-page__numeral::before {
+    content: attr(data-numeral);
+  }
+  .mn-error-page__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+  }
+  .mn-error-page__content[data-numeral] {
+    margin-top: clamp(-4rem, -6vw, -2rem);
+  }
+  .mn-error-page__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 3.5rem;
+    height: 3.5rem;
+    margin-bottom: var(--mn-space-5);
+    border-radius: var(--mn-radius-xl);
+    background: var(--mn-color-accent-subtle);
+    color: var(--mn-color-accent-strong);
+  }
+  .mn-error-page__icon > svg {
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+  .mn-error-page[data-kind='server'] .mn-error-page__icon {
+    background: var(--mn-color-danger-subtle);
+    color: var(--mn-color-danger-strong);
+  }
+  .mn-error-page[data-kind='offline'] .mn-error-page__icon {
+    background: var(--mn-color-warning-subtle);
+    color: var(--mn-color-warning-strong);
+  }
+  .mn-error-page[data-kind='forbidden'] .mn-error-page__icon,
+  .mn-error-page[data-kind='maintenance'] .mn-error-page__icon {
+    background: var(--mn-color-bg-muted);
+    color: var(--mn-color-text-muted);
+  }
+  .mn-error-page__title {
+    margin: 0;
+    font-size: var(--mn-text-2xl);
+    font-weight: var(--mn-weight-semibold);
+    letter-spacing: var(--mn-tracking-tight);
+    line-height: var(--mn-leading-tight);
+    text-wrap: balance;
+  }
+  .mn-error-page__title:focus {
+    outline: none;
+  }
+  .mn-error-page__description {
+    max-width: 24rem;
+    margin: var(--mn-space-2) 0 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-relaxed);
+    text-wrap: pretty;
+  }
+  .mn-error-page__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: var(--mn-space-2);
+    margin-top: var(--mn-space-6);
+  }
+  .mn-error-page__request-id {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: var(--mn-space-1);
+    margin: var(--mn-space-5) 0 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-xs);
+  }
+  .mn-error-page__request-id code {
+    font-family: var(--mn-font-mono);
+    color: var(--mn-color-text-default);
+    user-select: all;
+    overflow-wrap: anywhere;
+  }
+  .mn-error-page__support {
+    margin-top: var(--mn-space-6);
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+  }
+  @media (max-width: 30rem) {
+    .mn-error-page {
+      padding-block: var(--mn-space-10);
+    }
+    .mn-error-page__title {
+      font-size: var(--mn-text-xl);
+    }
+    .mn-error-page__actions {
+      flex-direction: column;
+      align-self: stretch;
+    }
+    .mn-error-page__actions > * {
+      width: 100%;
+    }
+  }
+
+  /* components/feedback/inline-error-retry/inline-error-retry.css */
+  .mn-inline-error-retry {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--mn-space-2) var(--mn-space-3);
+    color: var(--mn-color-text-default);
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-snug);
+  }
+  .mn-inline-error-retry[data-variant='banner'] {
+    padding: var(--mn-space-2-5) var(--mn-space-3) var(--mn-space-2-5) var(--mn-space-4);
+    border: 1px solid var(--mn-color-danger-border);
+    border-radius: var(--mn-radius-lg);
+    background: var(--mn-color-danger-subtle);
+  }
+  .mn-inline-error-retry[data-variant='banner'][data-tone='warning'] {
+    border-color: var(--mn-color-warning-border);
+    background: var(--mn-color-warning-subtle);
+  }
+  .mn-inline-error-retry__icon {
+    display: inline-flex;
+    flex: none;
+    color: var(--mn-color-danger-strong);
+  }
+  .mn-inline-error-retry[data-tone='warning'] .mn-inline-error-retry__icon {
+    color: var(--mn-color-warning-strong);
+  }
+  .mn-inline-error-retry__icon > svg {
+    width: 1rem;
+    height: 1rem;
+  }
+  .mn-inline-error-retry__message {
+    flex: 1 1 12rem;
+    min-width: 0;
+  }
+  .mn-inline-error-retry__actions {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--mn-space-2);
+  }
+
+  /* components/overlays/confirm-dialog/confirm-dialog.css */
+  .mn-confirm-dialog__form {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+  }
+  .mn-confirm-dialog__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--mn-control-md);
+    height: var(--mn-control-md);
+    margin-bottom: var(--mn-space-2);
+    border-radius: var(--mn-radius-full);
+    background: var(--mn-color-danger-subtle);
+    color: var(--mn-color-danger-strong);
+  }
+  .mn-confirm-dialog__icon > svg {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+  .mn-confirm-dialog__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-4);
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-confirm-dialog__consequences {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-1);
+    margin: 0;
+    padding-inline-start: var(--mn-space-5);
+    color: var(--mn-color-text-default);
+  }
+  .mn-confirm-dialog__phrase {
+    padding: 0 var(--mn-space-1);
+    border-radius: var(--mn-radius-xs);
+    background: var(--mn-color-bg-muted);
+    font-family: var(--mn-font-mono);
+    font-weight: var(--mn-weight-semibold);
+    overflow-wrap: anywhere;
+  }
+  .mn-confirm-dialog__error {
+    padding: 0 var(--mn-space-5) var(--mn-space-4);
+  }
+  .mn-confirm-dialog__header {
+    padding-bottom: var(--mn-space-5);
+  }
+  .mn-confirm-dialog__body {
+    padding-top: 0;
+  }
+  .mn-confirm-dialog:not(:has(> .mn-dialog__close)) .mn-confirm-dialog__header {
+    padding-right: var(--mn-space-5);
+  }
+
+  /* components/overlays/sheet/sheet.css */
+  .mn-sheet {
+    --_size: 28rem;
+    --_block: 60dvh;
+    position: fixed;
+    z-index: var(--mn-z-modal);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border: 0 solid var(--mn-color-border-subtle);
+    background: var(--mn-color-bg-raised);
+    color: var(--mn-color-text-default);
+    box-shadow: var(--mn-shadow-xl);
+  }
+  .mn-sheet:focus-visible {
+    outline: none;
+  }
+  .mn-sheet[data-size='sm'] {
+    --_size: 20rem;
+    --_block: 40dvh;
+  }
+  .mn-sheet[data-size='lg'] {
+    --_size: 36rem;
+    --_block: 80dvh;
+  }
+  .mn-sheet[data-size='xl'] {
+    --_size: 48rem;
+    --_block: 92dvh;
+  }
+  .mn-sheet[data-size='full'] {
+    --_size: 100vw;
+    --_block: 100dvh;
+  }
+
+  /* Side sheets: full height, capped at the screen width, clear of notches. */
+  .mn-sheet[data-side='right'],
+  .mn-sheet[data-side='left'] {
+    top: 0;
+    bottom: 0;
+    width: min(var(--_size), 100vw);
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+  .mn-sheet[data-side='right'] {
+    right: 0;
+    padding-right: env(safe-area-inset-right);
+    border-left-width: 1px;
+    animation: mn-sheet-in-right var(--mn-duration-slow) var(--mn-ease-enter);
+  }
+  .mn-sheet[data-side='left'] {
+    left: 0;
+    padding-left: env(safe-area-inset-left);
+    border-right-width: 1px;
+    animation: mn-sheet-in-left var(--mn-duration-slow) var(--mn-ease-enter);
+  }
+
+  /* Top and bottom sheets: full width, height from content up to the size cap. */
+  .mn-sheet[data-side='top'],
+  .mn-sheet[data-side='bottom'] {
+    left: 0;
+    right: 0;
+    max-height: var(--_block);
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+  }
+  .mn-sheet[data-side='bottom'] {
+    bottom: 0;
+    padding-bottom: env(safe-area-inset-bottom);
+    border-top-width: 1px;
+    border-radius: var(--mn-radius-xl) var(--mn-radius-xl) 0 0;
+    animation: mn-sheet-in-bottom var(--mn-duration-slow) var(--mn-ease-enter);
+  }
+  .mn-sheet[data-side='top'] {
+    top: 0;
+    padding-top: env(safe-area-inset-top);
+    border-bottom-width: 1px;
+    border-radius: 0 0 var(--mn-radius-xl) var(--mn-radius-xl);
+    animation: mn-sheet-in-top var(--mn-duration-slow) var(--mn-ease-enter);
+  }
+  .mn-sheet[data-size='full'] {
+    border-radius: 0;
+  }
+
+  .mn-sheet__handle {
+    flex: none;
+    width: 2.25rem;
+    height: 0.25rem;
+    margin: var(--mn-space-2) auto 0;
+    border-radius: var(--mn-radius-full);
+    background: var(--mn-color-border-strong);
+  }
+  .mn-sheet__handle + .mn-sheet__header {
+    padding-top: var(--mn-space-3);
+  }
+  .mn-sheet[data-side='right'] .mn-sheet__close,
+  .mn-sheet[data-side='top'] .mn-sheet__close {
+    top: calc(var(--mn-space-3) + env(safe-area-inset-top));
+  }
+  .mn-sheet[data-side='right'] .mn-sheet__close {
+    right: calc(var(--mn-space-3) + env(safe-area-inset-right));
+  }
+  .mn-sheet__footer {
+    flex: none;
+  }
+
+  @keyframes mn-sheet-in-right {
+    from {
+      transform: translateX(100%);
+    }
+  }
+  @keyframes mn-sheet-in-left {
+    from {
+      transform: translateX(-100%);
+    }
+  }
+  @keyframes mn-sheet-in-bottom {
+    from {
+      transform: translateY(100%);
+    }
+  }
+  @keyframes mn-sheet-in-top {
+    from {
+      transform: translateY(-100%);
+    }
+  }
+
+  /* components/overlays/responsive-dialog/responsive-dialog.css */
+  /*
+   * Builds on .mn-dialog (dialog.css, earlier in the cascade). Wide screens get
+   * the centred dialog unchanged; below the breakpoint the same element becomes
+   * a bottom sheet. CSS only, so server and client render the same markup.
+   */
+  .mn-responsive-dialog__handle {
+    display: none;
+    flex: none;
+    width: 2.25rem;
+    height: 0.25rem;
+    margin: var(--mn-space-2) auto 0;
+    border-radius: var(--mn-radius-full);
+    background: var(--mn-color-border-strong);
+  }
+
+  @media (max-width: 639.98px) {
+    .mn-responsive-dialog[data-sheet-below] {
+      box-sizing: border-box;
+      top: auto;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      max-height: calc(100dvh - var(--mn-space-8) - env(safe-area-inset-top));
+      padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+      border-width: 1px 0 0;
+      border-radius: var(--mn-radius-xl) var(--mn-radius-xl) 0 0;
+      transform: none;
+      animation: mn-responsive-dialog-up var(--mn-duration-slow) var(--mn-ease-enter);
+    }
+    .mn-responsive-dialog[data-sheet-below] .mn-responsive-dialog__handle {
+      display: block;
+    }
+    .mn-responsive-dialog[data-sheet-below] .mn-responsive-dialog__handle + .mn-dialog__header {
+      padding-top: var(--mn-space-3);
+    }
+  }
+  @media (min-width: 640px) and (max-width: 767.98px) {
+    .mn-responsive-dialog[data-sheet-below='md'] {
+      box-sizing: border-box;
+      top: auto;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      max-height: calc(100dvh - var(--mn-space-8) - env(safe-area-inset-top));
+      padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+      border-width: 1px 0 0;
+      border-radius: var(--mn-radius-xl) var(--mn-radius-xl) 0 0;
+      transform: none;
+      animation: mn-responsive-dialog-up var(--mn-duration-slow) var(--mn-ease-enter);
+    }
+    .mn-responsive-dialog[data-sheet-below='md'] .mn-responsive-dialog__handle {
+      display: block;
+    }
+    .mn-responsive-dialog[data-sheet-below='md'] .mn-responsive-dialog__handle + .mn-dialog__header {
+      padding-top: var(--mn-space-3);
+    }
+  }
+
+  @keyframes mn-responsive-dialog-up {
+    from {
+      transform: translateY(100%);
+    }
+  }
+
+  /* components/forms/inline-edit-text/inline-edit-text.css */
+  /* Inherits font size and weight from its context, so it can sit in a page
+     title or a table cell. View and edit share padding and a 1px border, so
+     switching modes does not move the text. */
+  .mn-inline-edit-text {
+    --_pad-y: var(--mn-space-1);
+    --_pad-x: var(--mn-space-1-5);
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-1-5);
+    min-width: 0;
+    max-width: 100%;
+  }
+  .mn-inline-edit-text__view,
+  .mn-inline-edit-text__input {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    margin: 0;
+    padding: var(--_pad-y) var(--_pad-x);
+    border: 1px solid transparent;
+    border-radius: var(--mn-radius-sm);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    letter-spacing: inherit;
+    line-height: var(--mn-leading-snug);
+    text-align: start;
+  }
+  .mn-inline-edit-text__view {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--mn-space-1-5);
+    cursor: text;
+    transition:
+      background-color var(--mn-duration-fast) var(--mn-ease-standard),
+      border-color var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  button.mn-inline-edit-text__view:hover {
+    background: var(--mn-color-bg-muted);
+  }
+  button.mn-inline-edit-text__view:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 0;
+  }
+  .mn-inline-edit-text__value {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+  }
+  .mn-inline-edit-text[data-empty] .mn-inline-edit-text__value {
+    color: var(--mn-color-text-subtle);
+  }
+  .mn-inline-edit-text__icon {
+    flex-shrink: 0;
+    width: 0.875rem;
+    height: 0.875rem;
+    margin-top: 0.2em;
+    color: var(--mn-color-text-subtle);
+    opacity: 0;
+    transition: opacity var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  .mn-inline-edit-text__view:hover .mn-inline-edit-text__icon,
+  .mn-inline-edit-text__view:focus-visible .mn-inline-edit-text__icon {
+    opacity: 1;
+  }
+  @media (hover: none) {
+    .mn-inline-edit-text__icon {
+      opacity: 1;
+    }
+  }
+  .mn-inline-edit-text[data-disabled] .mn-inline-edit-text__view {
+    cursor: default;
+  }
+
+  .mn-inline-edit-text__editor {
+    position: relative;
+    display: flex;
+    min-width: 0;
+  }
+  .mn-inline-edit-text__input {
+    border-color: var(--mn-color-border-input);
+    background: var(--mn-color-bg-surface);
+    color: var(--mn-color-text-default);
+    transition:
+      border-color var(--mn-duration-fast) var(--mn-ease-standard),
+      box-shadow var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  .mn-inline-edit-text__input::placeholder {
+    color: var(--mn-color-text-subtle);
+  }
+  .mn-inline-edit-text__input:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 0;
+    border-color: var(--mn-color-focus-ring);
+  }
+  textarea.mn-inline-edit-text__input {
+    resize: vertical;
+    field-sizing: content;
+    min-height: calc(var(--mn-control-md) * 2);
+  }
+  .mn-inline-edit-text[data-saving] .mn-inline-edit-text__input {
+    color: var(--mn-color-text-muted);
+    cursor: progress;
+  }
+  .mn-inline-edit-text[data-saving]:not([data-multiline]) .mn-inline-edit-text__input {
+    padding-inline-end: calc(var(--_pad-x) + 1.5rem);
+  }
+  .mn-inline-edit-text[data-invalid] .mn-inline-edit-text__input {
+    border-color: var(--mn-color-danger-strong);
+  }
+  .mn-inline-edit-text__spinner {
+    position: absolute;
+    inset-inline-end: var(--_pad-x);
+    top: 50%;
+    translate: 0 -50%;
+  }
+  .mn-inline-edit-text__error {
+    margin: 0;
+    padding-inline: calc(var(--_pad-x) + 1px);
+    color: var(--mn-color-danger-strong);
+    font-size: var(--mn-text-xs);
+    font-weight: var(--mn-weight-medium);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-inline-edit-text__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--mn-space-2);
+    padding-inline: 1px;
+  }
+
+  /* components/layout/section-header/section-header.css */
+  .mn-section-header {
+    width: 100%;
+    min-width: 0;
+  }
+  .mn-section-header__bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--mn-space-2) var(--mn-space-3);
+  }
+  section.mn-section-header > .mn-section-header__bar {
+    margin-bottom: var(--mn-space-3);
+  }
+  .mn-section-header__text {
+    display: flex;
+    flex: 1 1 12rem;
+    flex-direction: column;
+    gap: var(--mn-space-0-5);
+    min-width: 0;
+  }
+  .mn-section-header__heading {
+    display: flex;
+    align-items: center;
+    gap: var(--mn-space-2);
+    min-width: 0;
+  }
+  .mn-section-header__title {
+    margin: 0;
+    min-width: 0;
+    overflow-wrap: anywhere;
+    color: var(--mn-color-text-default);
+    font-size: var(--mn-text-sm);
+    font-weight: var(--mn-weight-semibold);
+    line-height: var(--mn-leading-snug);
+  }
+  .mn-section-header[data-size='md'] .mn-section-header__title {
+    font-size: var(--mn-text-base);
+    letter-spacing: var(--mn-tracking-snug);
+  }
+  .mn-section-header__description {
+    margin: 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-section-header__meta {
+    margin: 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-xs);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-section-header__trailing {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--mn-space-2);
+  }
+  .mn-section-header__link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mn-space-1);
+    border-radius: var(--mn-radius-xs);
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-xs);
+    font-weight: var(--mn-weight-medium);
+    line-height: var(--mn-leading-snug);
+    text-decoration: none;
+    white-space: nowrap;
+    transition: color var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  .mn-section-header__link:hover {
+    color: var(--mn-color-text-default);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+  .mn-section-header__link:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .mn-section-header__arrow {
+    flex-shrink: 0;
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .mn-section-header__body {
+    min-width: 0;
+    transition: opacity var(--mn-duration-base) var(--mn-ease-standard);
+  }
+  .mn-section-header[data-busy] > .mn-section-header__body {
+    opacity: 0.6;
+  }
+
+  /* components/forms/switch-settings-list/switch-settings-list.css */
+  .mn-switch-settings-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-3);
+    min-width: 0;
+  }
+  .mn-switch-settings-list__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-0-5);
+  }
+  .mn-switch-settings-list__title {
+    margin: 0;
+    color: var(--mn-color-text-default);
+    font-size: var(--mn-text-sm);
+    font-weight: var(--mn-weight-semibold);
+    line-height: var(--mn-leading-snug);
+  }
+  .mn-switch-settings-list__description {
+    margin: 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-switch-settings-list__rows {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    border: 1px solid var(--mn-color-border-default);
+    border-radius: var(--mn-radius-lg);
+    background: var(--mn-color-bg-surface);
+    list-style: none;
+  }
+  .mn-switch-settings-list__row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--mn-space-4);
+    padding: var(--mn-space-3) var(--mn-space-4);
+  }
+  .mn-switch-settings-list__row + .mn-switch-settings-list__row {
+    border-top: 1px solid var(--mn-color-border-subtle);
+  }
+  .mn-switch-settings-list__text {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: var(--mn-space-0-5);
+    min-width: 0;
+  }
+  .mn-switch-settings-list__label {
+    color: var(--mn-color-text-default);
+    font-size: var(--mn-text-sm);
+    font-weight: var(--mn-weight-medium);
+    line-height: var(--mn-leading-snug);
+    overflow-wrap: anywhere;
+    cursor: pointer;
+  }
+  .mn-switch-settings-list__row[data-disabled] .mn-switch-settings-list__label {
+    color: var(--mn-color-text-disabled);
+    cursor: not-allowed;
+  }
+  .mn-switch-settings-list__item-description {
+    margin: 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-xs);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-switch-settings-list__error {
+    margin: 0;
+    color: var(--mn-color-danger-strong);
+    font-size: var(--mn-text-xs);
+    font-weight: var(--mn-weight-medium);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-switch-settings-list__control {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--mn-space-2);
+  }
+  .mn-switch-settings-list__saved {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mn-space-1);
+    color: var(--mn-color-success-strong);
+    font-size: var(--mn-text-xs);
+    font-weight: var(--mn-weight-medium);
+    animation: mn-fade-in var(--mn-duration-base) var(--mn-ease-standard);
+  }
+  .mn-switch-settings-list__saved > svg {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .mn-switch-settings-list__retry {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mn-space-1);
+    height: var(--mn-control-xs);
+    padding-inline: var(--mn-space-2);
+    border: 1px solid var(--mn-color-border-default);
+    border-radius: var(--mn-radius-sm);
+    background: var(--mn-color-bg-surface);
+    color: var(--mn-color-text-default);
+    font: inherit;
+    font-size: var(--mn-text-xs);
+    font-weight: var(--mn-weight-medium);
+    cursor: pointer;
+    transition: background-color var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  .mn-switch-settings-list__retry:hover {
+    background: var(--mn-color-bg-muted);
+  }
+  .mn-switch-settings-list__retry:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .mn-switch-settings-list__retry > svg {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  @media (max-width: 479px) {
+    .mn-switch-settings-list__row {
+      flex-wrap: wrap;
+      padding-inline: var(--mn-space-3);
+    }
+    .mn-switch-settings-list__text {
+      flex-basis: 60%;
+    }
+  }
+
+  /* components/feedback/callout-banner/callout-banner.css */
+  /* Callout Banner. Only --mn-* variables; state goes in data-* attributes. */
+  .mn-callout-banner {
+    --_bg: var(--mn-color-info-subtle);
+    --_fg: var(--mn-color-info-strong);
+    --_border: var(--mn-color-info-border);
+    display: flex;
+    align-items: flex-start;
+    gap: var(--mn-space-3);
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+    padding: var(--mn-space-3) var(--mn-space-4);
+    border: 1px solid var(--_border);
+    border-radius: var(--mn-radius-lg);
+    background: var(--_bg);
+    color: var(--mn-color-text-default);
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-callout-banner[data-tone='neutral'] {
+    --_bg: var(--mn-color-bg-subtle);
+    --_fg: var(--mn-color-text-muted);
+    --_border: var(--mn-color-border-default);
+  }
+  .mn-callout-banner[data-tone='accent'] {
+    --_bg: var(--mn-color-accent-subtle);
+    --_fg: var(--mn-color-accent-strong);
+    --_border: var(--mn-color-accent-border);
+  }
+  .mn-callout-banner[data-tone='success'] {
+    --_bg: var(--mn-color-success-subtle);
+    --_fg: var(--mn-color-success-strong);
+    --_border: var(--mn-color-success-border);
+  }
+  .mn-callout-banner[data-tone='warning'] {
+    --_bg: var(--mn-color-warning-subtle);
+    --_fg: var(--mn-color-warning-strong);
+    --_border: var(--mn-color-warning-border);
+  }
+  .mn-callout-banner[data-tone='danger'] {
+    --_bg: var(--mn-color-danger-subtle);
+    --_fg: var(--mn-color-danger-strong);
+    --_border: var(--mn-color-danger-border);
+  }
+
+  /* Page: a full-width strip at the top of the app or page. */
+  .mn-callout-banner[data-placement='page'] {
+    align-items: center;
+    padding: var(--mn-space-2-5) var(--mn-layout-gutter);
+    border-width: 0 0 1px;
+    border-radius: 0;
+  }
+
+  /* Scope: a compact notice that the view is filtered. */
+  .mn-callout-banner[data-variant='scope'] {
+    align-items: center;
+    gap: var(--mn-space-2);
+    padding: var(--mn-space-1-5) var(--mn-space-3);
+    border-radius: var(--mn-radius-md);
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-xs);
+  }
+  .mn-callout-banner[data-variant='scope'][data-placement='page'] {
+    border-radius: 0;
+  }
+
+  .mn-callout-banner__icon {
+    display: inline-flex;
+    flex: none;
+    margin-top: 0.125rem;
+    color: var(--_fg);
+  }
+  .mn-callout-banner[data-placement='page'] .mn-callout-banner__icon,
+  .mn-callout-banner[data-variant='scope'] .mn-callout-banner__icon {
+    margin-top: 0;
+  }
+  .mn-callout-banner__main {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    align-items: baseline;
+    column-gap: var(--mn-space-3);
+    row-gap: var(--mn-space-2);
+    min-width: 0;
+  }
+  .mn-callout-banner__text {
+    min-width: 0;
+  }
+  .mn-callout-banner[data-action-placement='end'] .mn-callout-banner__text {
+    flex: 1;
+  }
+  .mn-callout-banner__title {
+    margin: 0;
+    font-weight: var(--mn-weight-semibold);
+  }
+  .mn-callout-banner__body {
+    color: var(--mn-color-text-muted);
+  }
+  .mn-callout-banner__title + .mn-callout-banner__body {
+    margin-top: var(--mn-space-0-5);
+  }
+  .mn-callout-banner__body > :first-child {
+    margin-top: 0;
+  }
+  .mn-callout-banner__body > :last-child {
+    margin-bottom: 0;
+  }
+  .mn-callout-banner[data-variant='scope'] .mn-callout-banner__body {
+    color: inherit;
+  }
+  .mn-callout-banner__actions {
+    display: flex;
+    flex-wrap: wrap;
+    flex: none;
+    align-items: center;
+    gap: var(--mn-space-2);
+    align-self: center;
+  }
+  .mn-callout-banner__dismiss {
+    flex: none;
+    align-self: flex-start;
+    margin: calc(var(--mn-space-1) * -1) calc(var(--mn-space-2) * -1) calc(var(--mn-space-1) * -1) 0;
+  }
+  .mn-callout-banner[data-placement='page'] .mn-callout-banner__dismiss,
+  .mn-callout-banner[data-variant='scope'] .mn-callout-banner__dismiss {
+    align-self: center;
+  }
+
+  /* Narrow screens: trailing actions get their own row, under the text. */
+  @media (max-width: 40rem) {
+    .mn-callout-banner[data-action-placement='end'] {
+      flex-wrap: wrap;
+    }
+    .mn-callout-banner[data-action-placement='end'] .mn-callout-banner__main {
+      flex-basis: 0;
+    }
+    .mn-callout-banner[data-action-placement='end'] .mn-callout-banner__actions {
+      order: 3;
+      flex-basis: 100%;
+    }
+    .mn-callout-banner[data-action-placement='end']:has(> .mn-callout-banner__icon)
+      .mn-callout-banner__actions {
+      flex-basis: calc(100% - 1rem - var(--mn-space-3));
+      margin-inline-start: calc(1rem + var(--mn-space-3));
+    }
+  }
+
+  /* components/feedback/inline-notice/inline-notice.css */
+  /* Inline Notice. Only --mn-* variables; state goes in data-* attributes. */
+  .mn-inline-notice {
+    --_bg: var(--mn-color-info-subtle);
+    --_fg: var(--mn-color-info-strong);
+    display: flex;
+    align-items: flex-start;
+    gap: var(--mn-space-2);
+    box-sizing: border-box;
+    max-width: 100%;
+    padding: var(--mn-space-1-5) var(--mn-space-2-5);
+    border-radius: var(--mn-radius-md);
+    background: var(--_bg);
+    color: var(--mn-color-text-default);
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-normal);
+  }
+  .mn-inline-notice[data-tone='neutral'] {
+    --_bg: var(--mn-color-bg-muted);
+    --_fg: var(--mn-color-text-muted);
+  }
+  .mn-inline-notice[data-tone='success'] {
+    --_bg: var(--mn-color-success-subtle);
+    --_fg: var(--mn-color-success-strong);
+  }
+  .mn-inline-notice[data-tone='warning'] {
+    --_bg: var(--mn-color-warning-subtle);
+    --_fg: var(--mn-color-warning-strong);
+  }
+  .mn-inline-notice[data-tone='danger'] {
+    --_bg: var(--mn-color-danger-subtle);
+    --_fg: var(--mn-color-danger-strong);
+  }
+  /* Plain: no fill; the text takes the tone's strong colour (4.5:1 on every surface). */
+  .mn-inline-notice[data-variant='plain'] {
+    padding: 0;
+    background: none;
+    color: var(--_fg);
+  }
+  .mn-inline-notice[data-variant='plain'][data-tone='neutral'] {
+    color: var(--mn-color-text-muted);
+  }
+  .mn-inline-notice__icon {
+    display: inline-flex;
+    flex: none;
+    /* Centre the 16px glyph on the first line of text. */
+    margin-top: calc((1em * var(--mn-leading-normal) - 1rem) / 2);
+    color: var(--_fg);
+  }
+  .mn-inline-notice__message {
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+  }
+  .mn-inline-notice__title {
+    font-weight: var(--mn-weight-semibold);
+  }
+  .mn-inline-notice__action {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    align-self: center;
+    margin-inline-start: var(--mn-space-1);
+  }
+  .mn-inline-notice__dismiss {
+    flex: none;
+    align-self: center;
+    margin-block: calc(var(--mn-space-1) * -1);
+    margin-inline-end: calc(var(--mn-space-1) * -1);
+  }
+  .mn-inline-notice[data-variant='plain'] .mn-inline-notice__dismiss {
+    margin: 0;
+  }
+
+  /* components/data-display/accordion/accordion.css */
+  /* Accordion -------------------------------------------------------- */
+  .mn-accordion {
+    border-top: 1px solid var(--mn-color-border-default);
+  }
+  .mn-accordion__item {
+    border-bottom: 1px solid var(--mn-color-border-default);
+  }
+  .mn-accordion__header {
+    margin: 0;
+    font-size: inherit;
+  }
+  .mn-accordion__trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--mn-space-4);
+    width: 100%;
+    min-height: 3.5rem;
+    padding: var(--mn-space-4) 0;
+    border: 0;
+    background: transparent;
+    color: var(--mn-color-text-default);
+    font: inherit;
+    font-family: var(--mn-font-sans);
+    font-size: var(--mn-text-base);
+    font-weight: var(--mn-weight-medium);
+    line-height: var(--mn-leading-snug);
+    text-align: start;
+    cursor: pointer;
+  }
+  .mn-accordion__trigger:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 2px;
+    border-radius: var(--mn-radius-sm);
+  }
+  .mn-accordion__chevron {
+    flex-shrink: 0;
+    width: 1.125rem;
+    height: 1.125rem;
+    color: var(--mn-color-text-muted);
+    transition: transform var(--mn-duration-base) var(--mn-ease-standard);
+  }
+  .mn-accordion__trigger[data-state='open'] .mn-accordion__chevron {
+    transform: rotate(180deg);
+  }
+  .mn-accordion__content {
+    overflow: hidden;
+  }
+  .mn-accordion__content[data-state='open'] {
+    animation: mn-accordion-open var(--mn-duration-base) var(--mn-ease-standard);
+  }
+  .mn-accordion__content[data-state='closed'] {
+    animation: mn-accordion-close var(--mn-duration-base) var(--mn-ease-standard);
+  }
+  .mn-accordion__body {
+    max-width: var(--mn-width-narrow);
+    padding-bottom: var(--mn-space-5);
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-relaxed);
+  }
+  @keyframes mn-accordion-open {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+  @keyframes mn-accordion-close {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+
+  /* patterns/layout/marketing-site-shell/marketing-site-shell.css */
+  /* SiteHeader and SiteFooter. */
+  /* Site header -------------------------------------------------------------- */
+  .mn-site-header {
+    position: relative;
+    z-index: var(--mn-z-sticky);
+    border-bottom: 1px solid var(--mn-color-border-subtle);
+    background: color-mix(in srgb, var(--mn-color-bg-canvas) 86%, transparent);
+    -webkit-backdrop-filter: saturate(1.4) blur(14px);
+    backdrop-filter: saturate(1.4) blur(14px);
+  }
+  .mn-site-header[data-sticky] {
+    position: sticky;
+    top: 0;
+  }
+  .mn-site-header__inner {
+    display: flex;
+    align-items: center;
+    gap: var(--mn-space-8);
+    max-width: var(--mn-width-wide);
+    height: 4rem;
+    margin-inline: auto;
+    padding-inline: var(--mn-width-gutter);
+  }
+  .mn-site-header__brand {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+  }
+  .mn-site-header__brand a {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mn-space-2);
+    min-height: 2.75rem;
+    color: var(--mn-color-text-default);
+    text-decoration: none;
+  }
+  .mn-site-header__nav {
+    display: none;
+    flex: 1;
+    min-width: 0;
+  }
+  .mn-site-header__list {
+    display: flex;
+    align-items: center;
+    gap: var(--mn-space-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .mn-site-header__link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mn-space-1);
+    min-height: 2.25rem;
+    padding-inline: var(--mn-space-3);
+    border: 0;
+    border-radius: var(--mn-radius-md);
+    background: transparent;
+    color: var(--mn-color-text-muted);
+    font: inherit;
+    font-family: var(--mn-font-sans);
+    font-size: var(--mn-text-sm);
+    font-weight: var(--mn-weight-medium);
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+      color var(--mn-duration-fast) var(--mn-ease-standard),
+      background-color var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  .mn-site-header__link:hover,
+  .mn-site-header__link[aria-expanded='true'],
+  .mn-site-header__link[aria-current='page'] {
+    color: var(--mn-color-text-default);
+  }
+  .mn-site-header__link:hover,
+  .mn-site-header__link[aria-expanded='true'] {
+    background: var(--mn-color-bg-muted);
+  }
+  .mn-site-header__chevron {
+    width: 0.875rem;
+    height: 0.875rem;
+    transition: transform var(--mn-duration-base) var(--mn-ease-standard);
+  }
+  .mn-site-header__trigger[aria-expanded='true'] .mn-site-header__chevron {
+    transform: rotate(180deg);
+  }
+  .mn-site-header__end {
+    display: flex;
+    align-items: center;
+    gap: var(--mn-space-2);
+    margin-inline-start: auto;
+  }
+  .mn-site-header__actions {
+    display: none;
+    align-items: center;
+    gap: var(--mn-space-2);
+  }
+  .mn-site-header__toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.75rem;
+    height: 2.75rem;
+    padding: 0;
+    border: 0;
+    border-radius: var(--mn-radius-md);
+    background: transparent;
+    color: var(--mn-color-text-default);
+    cursor: pointer;
+  }
+  .mn-site-header__toggle svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+  .mn-site-header__toggle:hover {
+    background: var(--mn-color-bg-muted);
+  }
+  .mn-site-header__link:focus-visible,
+  .mn-site-header__toggle:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .mn-site-header__panel {
+    padding: var(--mn-space-2) var(--mn-width-gutter) var(--mn-space-6);
+    border-top: 1px solid var(--mn-color-border-subtle);
+    background: var(--mn-color-bg-canvas);
+  }
+  .mn-site-header__panel ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .mn-site-header__panel-list > li + li {
+    border-top: 1px solid var(--mn-color-border-subtle);
+  }
+  .mn-site-header__panel-group {
+    padding-block: var(--mn-space-3);
+  }
+  .mn-site-header__panel-heading {
+    margin: 0;
+    padding-block: var(--mn-space-1);
+    color: var(--mn-color-text-subtle);
+    font-size: var(--mn-text-xs);
+    font-weight: var(--mn-weight-semibold);
+    letter-spacing: var(--mn-tracking-wide);
+  }
+  .mn-site-header__panel-link {
+    display: flex;
+    align-items: center;
+    min-height: 2.75rem;
+    color: var(--mn-color-text-default);
+    font-size: var(--mn-text-base);
+    font-weight: var(--mn-weight-medium);
+    text-decoration: none;
+  }
+  .mn-site-header__panel-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--mn-space-2);
+    padding-top: var(--mn-space-4);
+  }
+  .mn-site-header__panel-actions > * {
+    flex: 1;
+  }
+  @media (min-width: 768px) {
+    .mn-site-header__nav,
+    .mn-site-header__actions {
+      display: flex;
+    }
+    .mn-site-header__toggle,
+    .mn-site-header__panel {
+      display: none;
+    }
+  }
+
+  .mn-site-menu {
+    z-index: var(--mn-z-popover);
+    width: min(22rem, calc(100vw - 2rem));
+    padding: var(--mn-space-2);
+    border: 1px solid var(--mn-color-border-subtle);
+    border-radius: var(--mn-radius-xl);
+    background: var(--mn-color-bg-raised);
+    box-shadow: var(--mn-shadow-lg);
+    animation: mn-pop-in var(--mn-duration-fast) var(--mn-ease-enter);
+  }
+  .mn-site-menu__list {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .mn-site-menu__item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-0-5);
+    padding: var(--mn-space-2-5) var(--mn-space-3);
+    border-radius: var(--mn-radius-md);
+    color: var(--mn-color-text-default);
+    text-decoration: none;
+  }
+  .mn-site-menu__item:hover,
+  .mn-site-menu__item:focus-visible {
+    background: var(--mn-color-bg-muted);
+  }
+  .mn-site-menu__item:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: -2px;
+  }
+  .mn-site-menu__label {
+    font-size: var(--mn-text-sm);
+    font-weight: var(--mn-weight-medium);
+  }
+  .mn-site-menu__description {
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-xs);
+    line-height: var(--mn-leading-normal);
+  }
+
+  /* Site footer -------------------------------------------------------------- */
+  .mn-site-footer {
+    border-top: 1px solid var(--mn-color-border-subtle);
+    background: var(--mn-color-bg-canvas);
+    color: var(--mn-color-text-default);
+  }
+  .mn-site-footer__inner {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-12);
+    max-width: var(--mn-width-wide);
+    margin-inline: auto;
+    padding: var(--mn-section-sm) var(--mn-width-gutter) var(--mn-space-8);
+  }
+  .mn-site-footer__top {
+    display: grid;
+    gap: var(--mn-space-10);
+  }
+  @media (min-width: 1024px) {
+    .mn-site-footer__top {
+      grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
+      gap: var(--mn-space-16);
+    }
+  }
+  .mn-site-footer__about {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-4);
+  }
+  .mn-site-footer__brand a {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--mn-space-2);
+    min-height: 2.75rem;
+    color: var(--mn-color-text-default);
+    text-decoration: none;
+  }
+  .mn-site-footer__description {
+    margin: 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-relaxed);
+  }
+  .mn-site-footer__nav {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--mn-space-8) var(--mn-space-6);
+  }
+  @media (min-width: 768px) {
+    .mn-site-footer__nav {
+      grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+    }
+  }
+  .mn-site-footer__heading {
+    margin: 0 0 var(--mn-space-3);
+    color: var(--mn-color-text-default);
+    font-size: var(--mn-text-sm);
+    font-weight: var(--mn-weight-semibold);
+  }
+  .mn-site-footer ul {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .mn-site-footer__link {
+    display: inline-flex;
+    align-items: center;
+    min-height: 2rem;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+    text-decoration: none;
+    transition: color var(--mn-duration-fast) var(--mn-ease-standard);
+  }
+  .mn-site-footer__link:hover {
+    color: var(--mn-color-text-default);
+  }
+  .mn-site-footer__link:focus-visible {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 2px;
+    border-radius: var(--mn-radius-xs);
+  }
+  .mn-site-footer__bottom {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--mn-space-2) var(--mn-space-6);
+    padding-top: var(--mn-space-6);
+    border-top: 1px solid var(--mn-color-border-subtle);
+  }
+  .mn-site-footer__legal {
+    margin: 0;
+    color: var(--mn-color-text-subtle);
+    font-size: var(--mn-text-xs);
+  }
+  .mn-site-footer ul.mn-site-footer__legal-links {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0 var(--mn-space-5);
+  }
+  .mn-site-footer__legal-links .mn-site-footer__link {
+    font-size: var(--mn-text-xs);
+  }
+  .mn-site-footer__meta {
+    margin-inline-start: auto;
+  }
+
+  /* patterns/layout/marketing-hero/marketing-hero.css */
+  /* Shared text roles ------------------------------------------------------- */
+  .mn-eyebrow {
+    margin: 0;
+    color: var(--mn-color-accent-strong);
+    font-size: var(--mn-text-sm);
+    font-weight: var(--mn-weight-semibold);
+    letter-spacing: var(--mn-tracking-snug);
+    line-height: var(--mn-leading-snug);
+  }
+
+  /* Hero --------------------------------------------------------------------- */
+  .mn-hero {
+    padding-block: var(--mn-section-md) var(--mn-section-sm);
+    color: var(--mn-color-text-default);
+  }
+  .mn-hero[data-background='wash'] {
+    background: var(--mn-gradient-wash);
+  }
+  .mn-hero__inner {
+    display: grid;
+    gap: var(--mn-space-16);
+    max-width: var(--mn-width-wide);
+    margin-inline: auto;
+    padding-inline: var(--mn-width-gutter);
+  }
+  .mn-hero__copy {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--mn-space-5);
+  }
+  .mn-hero[data-layout='centered'] .mn-hero__copy {
+    align-items: center;
+    max-width: var(--mn-width-narrow);
+    margin-inline: auto;
+    text-align: center;
+  }
+  .mn-hero__title {
+    margin: 0;
+    font-size: var(--mn-display-xl);
+    font-weight: var(--mn-display-xl-weight);
+    letter-spacing: var(--mn-display-xl-tracking);
+    line-height: var(--mn-display-xl-leading);
+    text-wrap: balance;
+  }
+  .mn-hero__lead {
+    max-width: 38rem;
+    margin: 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-lead);
+    line-height: var(--mn-lead-leading);
+    text-wrap: pretty;
+  }
+  .mn-hero__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--mn-space-3);
+    margin-top: var(--mn-space-3);
+  }
+  .mn-hero[data-layout='centered'] .mn-hero__actions {
+    justify-content: center;
+  }
+  @media (max-width: 639px) {
+    .mn-hero__actions {
+      flex-direction: column;
+      align-self: stretch;
+    }
+    .mn-hero__actions .mn-button {
+      width: 100%;
+    }
+  }
+  .mn-hero__actions .mn-button {
+    --_h: var(--mn-control-xl);
+    --_px: var(--mn-space-6);
+    --_fs: var(--mn-text-base);
+    border-radius: var(--mn-radius-full);
+  }
+  .mn-hero__note {
+    margin: 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+  }
+  @media (min-width: 1024px) {
+    .mn-hero[data-layout='split'] .mn-hero__inner {
+      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+      align-items: center;
+    }
+  }
+
+  /* patterns/layout/marketing-section-blocks/marketing-section-blocks.css */
+  /* Inverse scope: remap semantic roles so nested components stay readable. */
+  .mn-msection[data-tone='inverse'],
+  .mn-cta[data-tone='inverse'] {
+    --mn-color-text-default: var(--mn-color-text-inverse);
+    --mn-color-text-muted: var(--mn-color-text-inverse-muted);
+    --mn-color-text-subtle: var(--mn-color-text-inverse-muted);
+    --mn-color-border-subtle: var(--mn-color-border-inverse);
+    --mn-color-border-default: var(--mn-color-border-inverse);
+    --mn-color-bg-surface: color-mix(
+      in srgb,
+      var(--mn-color-text-inverse) 5%,
+      var(--mn-color-bg-inverse)
+    );
+    --mn-color-bg-raised: color-mix(
+      in srgb,
+      var(--mn-color-text-inverse) 7%,
+      var(--mn-color-bg-inverse)
+    );
+    --mn-color-bg-subtle: color-mix(
+      in srgb,
+      var(--mn-color-text-inverse) 4%,
+      var(--mn-color-bg-inverse)
+    );
+    --mn-color-bg-muted: color-mix(
+      in srgb,
+      var(--mn-color-text-inverse) 9%,
+      var(--mn-color-bg-inverse)
+    );
+    --mn-color-accent-strong: var(--mn-color-accent-strong-inverse);
+    --mn-color-accent-subtle: color-mix(
+      in srgb,
+      var(--mn-color-accent-strong-inverse) 14%,
+      var(--mn-color-bg-inverse)
+    );
+    --mn-color-text-link: var(--mn-color-accent-strong-inverse);
+    --mn-color-focus-ring: var(--mn-color-accent-strong-inverse);
+    color: var(--mn-color-text-default);
+  }
+
+  /*
+   * In dark themes an inverse band would flip to a bright light slab. Instead it
+   * becomes an elevated dark surface with a soft accent glow, using the regular
+   * (already contrast-tested) dark roles: `inherit` undoes the remap above.
+   */
+  :is(.dark, [data-mn-theme='dark']) .mn-msection[data-tone='inverse'],
+  :is(.dark, [data-mn-theme='dark']) .mn-cta[data-tone='inverse'] {
+    --mn-color-text-default: inherit;
+    --mn-color-text-muted: inherit;
+    --mn-color-text-subtle: inherit;
+    --mn-color-border-subtle: inherit;
+    --mn-color-border-default: inherit;
+    --mn-color-bg-surface: inherit;
+    --mn-color-bg-raised: inherit;
+    --mn-color-bg-subtle: inherit;
+    --mn-color-bg-muted: inherit;
+    --mn-color-accent-strong: inherit;
+    --mn-color-accent-subtle: inherit;
+    --mn-color-text-link: inherit;
+    --mn-color-focus-ring: inherit;
+  }
+
+  /* Sections ----------------------------------------------------------------- */
+  .mn-msection {
+    color: var(--mn-color-text-default);
+  }
+  .mn-msection[data-spacing='sm'] {
+    padding-block: var(--mn-section-sm);
+  }
+  .mn-msection[data-spacing='md'] {
+    padding-block: var(--mn-section-md);
+  }
+  .mn-msection[data-spacing='lg'] {
+    padding-block: var(--mn-section-lg);
+  }
+  .mn-msection[data-tone='subtle'] {
+    background: var(--mn-color-bg-subtle);
+  }
+  .mn-msection[data-tone='inverse'] {
+    background: var(--mn-gradient-inverse);
+  }
+  :is(.dark, [data-mn-theme='dark']) .mn-msection[data-tone='inverse'],
+  :is(.dark, [data-mn-theme='dark']) .mn-cta[data-tone='inverse'] {
+    border-block: 1px solid var(--mn-color-border-subtle);
+    background:
+      radial-gradient(55% 80% at 100% 0%, var(--mn-color-accent-subtle) 0%, transparent 100%),
+      var(--mn-color-bg-surface);
+  }
+  .mn-msection__inner {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-12);
+    margin-inline: auto;
+    padding-inline: var(--mn-width-gutter);
+  }
+  .mn-msection__inner[data-width='narrow'] {
+    max-width: calc(var(--mn-width-narrow) + 2 * var(--mn-width-gutter));
+  }
+  .mn-msection__inner[data-width='content'] {
+    max-width: calc(var(--mn-width-content) + 2 * var(--mn-width-gutter));
+  }
+  .mn-msection__inner[data-width='wide'] {
+    max-width: calc(var(--mn-width-wide) + 2 * var(--mn-width-gutter));
+  }
+
+  .mn-msection-header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: var(--mn-space-6);
+  }
+  .mn-msection-header__text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-4);
+    max-width: var(--mn-width-narrow);
+  }
+  .mn-msection-header[data-align='center'] {
+    justify-content: center;
+    text-align: center;
+  }
+  .mn-msection-header[data-align='center'] .mn-msection-header__text {
+    align-items: center;
+    margin-inline: auto;
+  }
+  .mn-msection-header__title {
+    margin: 0;
+    font-size: var(--mn-display-md);
+    font-weight: var(--mn-display-md-weight);
+    letter-spacing: var(--mn-display-md-tracking);
+    line-height: var(--mn-display-md-leading);
+    text-wrap: balance;
+  }
+  .mn-msection-header[data-size='lg'] .mn-msection-header__title {
+    font-size: var(--mn-display-lg);
+    font-weight: var(--mn-display-lg-weight);
+    letter-spacing: var(--mn-display-lg-tracking);
+    line-height: var(--mn-display-lg-leading);
+  }
+  .mn-msection-header__description {
+    margin: 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-lead);
+    line-height: var(--mn-lead-leading);
+    text-wrap: pretty;
+  }
+
+  /* Feature grid ------------------------------------------------------------- */
+  .mn-feature-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--mn-space-4);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  @media (min-width: 640px) {
+    .mn-feature-grid:not([data-columns='2']) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .mn-feature-grid[data-columns='2'] {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  @media (min-width: 1024px) {
+    .mn-feature-grid[data-columns='3'] {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    .mn-feature-grid[data-columns='4'] {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+  .mn-feature {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-2);
+  }
+  .mn-feature-grid[data-variant='card'] .mn-feature {
+    padding: var(--mn-space-6);
+    border: 1px solid var(--mn-color-border-subtle);
+    border-radius: var(--mn-radius-xl);
+    background: var(--mn-color-bg-surface);
+    transition:
+      border-color var(--mn-duration-base) var(--mn-ease-standard),
+      box-shadow var(--mn-duration-base) var(--mn-ease-standard);
+  }
+  .mn-feature-grid[data-variant='card'] .mn-feature[data-linked]:hover {
+    border-color: var(--mn-color-border-strong);
+    box-shadow: var(--mn-shadow-md);
+  }
+  .mn-feature__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    margin-bottom: var(--mn-space-3);
+    border-radius: var(--mn-radius-lg);
+    background: var(--mn-color-accent-subtle);
+    color: var(--mn-color-accent-strong);
+  }
+  .mn-feature__icon svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+  .mn-feature__title {
+    margin: 0;
+    color: var(--mn-color-text-default);
+    font-size: var(--mn-text-base);
+    font-weight: var(--mn-weight-semibold);
+    letter-spacing: var(--mn-tracking-snug);
+    line-height: var(--mn-leading-snug);
+  }
+  .mn-feature__link {
+    color: inherit;
+    text-decoration: none;
+  }
+  .mn-feature__link::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+  }
+  .mn-feature__link:focus-visible {
+    outline: none;
+  }
+  .mn-feature:has(.mn-feature__link:focus-visible) {
+    outline: var(--mn-focus-ring-width) solid var(--mn-color-focus-ring);
+    outline-offset: 2px;
+  }
+  .mn-feature__description {
+    margin: 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+    line-height: var(--mn-leading-relaxed);
+  }
+
+  /* Product frame ------------------------------------------------------------ */
+  .mn-product-frame {
+    margin: 0;
+  }
+  .mn-product-frame[data-backdrop] {
+    padding: clamp(1rem, 0.25rem + 3vw, 3rem);
+    border-radius: calc(var(--mn-radius-2xl) + 0.75rem);
+    border: 1px solid var(--mn-color-border-subtle);
+    background:
+      radial-gradient(90% 70% at 50% 0%, var(--mn-color-accent-subtle) 0%, transparent 100%),
+      var(--mn-color-bg-subtle);
+  }
+  .mn-product-frame__window {
+    overflow: hidden;
+    border: 1px solid var(--mn-color-border-subtle);
+    border-radius: var(--mn-radius-2xl);
+    background: var(--mn-color-bg-surface);
+    box-shadow: var(--mn-shadow-xl);
+  }
+  .mn-product-frame__chrome {
+    display: flex;
+    align-items: center;
+    gap: var(--mn-space-3);
+    height: 2.5rem;
+    padding-inline: var(--mn-space-4);
+    border-bottom: 1px solid var(--mn-color-border-subtle);
+    background: var(--mn-color-bg-subtle);
+  }
+  .mn-product-frame__dots {
+    display: inline-flex;
+    flex: 1;
+    gap: 0.375rem;
+  }
+  .mn-product-frame__dots i {
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: var(--mn-radius-full);
+    background: var(--mn-color-bg-emphasis);
+  }
+  .mn-product-frame__title {
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-xs);
+    font-weight: var(--mn-weight-medium);
+  }
+  .mn-product-frame__url {
+    min-width: 0;
+    max-width: 60%;
+    padding: var(--mn-space-1) var(--mn-space-4);
+    overflow: hidden;
+    border-radius: var(--mn-radius-full);
+    background: var(--mn-color-bg-surface);
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-xs);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .mn-product-frame__spacer {
+    flex: 1;
+  }
+  .mn-product-frame__caption {
+    margin-top: var(--mn-space-4);
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+    text-align: center;
+  }
+
+  /* Stat strip --------------------------------------------------------------- */
+  .mn-stat-strip {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    margin: 0;
+    border-block: 1px solid var(--mn-color-border-subtle);
+  }
+  @media (min-width: 1024px) {
+    .mn-stat-strip[data-count='3'] {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    .mn-stat-strip[data-count='4'] {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+  .mn-stat-strip__item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-1);
+    padding: var(--mn-space-6) var(--mn-space-6) var(--mn-space-6) 0;
+  }
+  .mn-stat-strip__item + .mn-stat-strip__item {
+    padding-inline-start: var(--mn-space-6);
+    border-inline-start: 1px solid var(--mn-color-border-subtle);
+  }
+  @media (max-width: 1023px) {
+    .mn-stat-strip__item:nth-child(odd) {
+      padding-inline-start: 0;
+      border-inline-start: 0;
+    }
+    .mn-stat-strip__item:nth-child(n + 3) {
+      border-top: 1px solid var(--mn-color-border-subtle);
+    }
+  }
+  .mn-stat-strip__label {
+    order: 2;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-text-sm);
+  }
+  .mn-stat-strip__value {
+    order: 1;
+    margin: 0;
+    color: var(--mn-color-text-default);
+    font-size: var(--mn-display-md);
+    font-weight: var(--mn-display-md-weight);
+    letter-spacing: var(--mn-display-md-tracking);
+    line-height: var(--mn-display-md-leading);
+    font-variant-numeric: tabular-nums;
+  }
+  .mn-stat-strip__description {
+    order: 3;
+    margin: 0;
+    color: var(--mn-color-text-subtle);
+    font-size: var(--mn-text-xs);
+  }
+
+  /* CTA band ----------------------------------------------------------------- */
+  .mn-cta {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--mn-space-8);
+    padding: clamp(2rem, 1rem + 4vw, 4rem);
+    border-radius: var(--mn-radius-2xl);
+    color: var(--mn-color-text-default);
+  }
+  @media (min-width: 1024px) {
+    .mn-cta {
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+  .mn-cta[data-tone='subtle'] {
+    border: 1px solid var(--mn-color-border-subtle);
+    background: var(--mn-color-bg-subtle);
+  }
+  .mn-cta[data-tone='inverse'] {
+    background: var(--mn-gradient-inverse);
+  }
+  .mn-cta[data-tone='accent'] {
+    background: var(--mn-gradient-accent);
+    color: var(--mn-color-accent-on-solid);
+    --mn-color-focus-ring: var(--mn-color-accent-on-solid);
+  }
+  .mn-cta__text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mn-space-3);
+    max-width: 38rem;
+  }
+  .mn-cta__title {
+    margin: 0;
+    font-size: var(--mn-display-md);
+    font-weight: var(--mn-display-md-weight);
+    letter-spacing: var(--mn-display-md-tracking);
+    line-height: var(--mn-display-md-leading);
+    text-wrap: balance;
+  }
+  .mn-cta__description {
+    margin: 0;
+    color: var(--mn-color-text-muted);
+    font-size: var(--mn-lead);
+    line-height: var(--mn-lead-leading);
+  }
+  .mn-cta[data-tone='accent'] .mn-cta__description {
+    color: inherit;
+  }
+  .mn-cta__actions {
+    display: flex;
+    flex-wrap: wrap;
+    flex-shrink: 0;
+    gap: var(--mn-space-3);
+  }
+  .mn-cta__actions .mn-button {
+    --_h: var(--mn-control-xl);
+    --_px: var(--mn-space-6);
+    --_fs: var(--mn-text-base);
+    border-radius: var(--mn-radius-full);
+  }
+  /* On the accent band, buttons invert: the pair solid/on-solid is guaranteed. */
+  .mn-cta[data-tone='accent'] .mn-button[data-variant='primary'] {
+    --_bg: var(--mn-color-accent-on-solid);
+    --_bg-hover: var(--mn-color-accent-on-solid);
+    --_bg-active: var(--mn-color-accent-on-solid);
+    --_fg: var(--mn-color-accent-solid);
+  }
+  .mn-cta[data-tone='accent'] .mn-button[data-variant='primary']:hover {
+    box-shadow: var(--mn-shadow-md);
+  }
+  .mn-cta[data-tone='accent'] .mn-button[data-variant='secondary'],
+  .mn-cta[data-tone='accent'] .mn-button[data-variant='ghost'] {
+    --_bg: transparent;
+    --_bg-hover: color-mix(in srgb, var(--mn-color-accent-on-solid) 12%, transparent);
+    --_bg-active: color-mix(in srgb, var(--mn-color-accent-on-solid) 18%, transparent);
+    --_fg: var(--mn-color-accent-on-solid);
+    --_border: color-mix(in srgb, var(--mn-color-accent-on-solid) 45%, transparent);
+    box-shadow: none;
+  }
 }