/*! MIAN 1.6.0 — https://mian.ro — core: base, components and the default Mian noodle. MIAN License 1.0: free to use, not for resale. Copyright (c) 2026 BTN GROUP SRL. https://mian.ro/license */
/* MIAN — base layer.
   Cascade layers keep MIAN below your own styles: any unlayered rule you
   write wins without needing !important. */
@layer mian.tokens, mian.base, mian.components, mian.noodles, mian.utilities;

/* Colour role props do not inherit, so a `mn-danger` alert does not quietly
   turn every button inside it red. */
@property --_c   { syntax: '*'; inherits: false; }
@property --_cf  { syntax: '*'; inherits: false; }
@property --_ct  { syntax: '*'; inherits: false; }

@layer mian.base {
  :root { color-scheme: light dark; }
  [data-mode="light"] { color-scheme: light; }
  [data-mode="dark"]  { color-scheme: dark; }
  /* A band or panel with its own mode paints that mode's surface, so text and
     background always switch together (e.g. <section class="mn-section" data-mode="dark">). */
  :where(body *)[data-mode] { background-color: var(--mn-bg); color: var(--mn-fg); }

  /* Derived tokens are re-declared on every noodle scope so a nested noodle
     computes them from its own palette. */
  :root, [data-noodle] {
    --mn-duration: 150ms;
    --mn-ease: cubic-bezier(.2, 0, 0, 1);
    --mn-border-w: 1px;
    --mn-hover: color-mix(in oklab, var(--mn-fg) 6%, transparent);
    --mn-active: color-mix(in oklab, var(--mn-fg) 10%, transparent);
    --mn-overlay: color-mix(in oklab, #000 50%, transparent);
    --mn-card: color-mix(in srgb, var(--mn-surface) var(--mn-surface-alpha), transparent);
    --mn-popover: var(--mn-surface);
    --mn-focus: 0 0 0 2px var(--mn-bg), 0 0 0 4px var(--mn-ring);
    /* Motion vocabulary. Each noodle replaces these with its own. */
    --mn-enter: mn-pop;
    --mn-enter-duration: 180ms;
    --mn-ease-enter: cubic-bezier(.2, 0, 0, 1);
    --mn-spring: cubic-bezier(.2, 0, 0, 1);
    --mn-series-1: var(--mn-primary);
    --mn-series-2: var(--mn-accent);
    --mn-series-3: var(--mn-success);
    --mn-series-4: var(--mn-warning);
  }
  @media (prefers-reduced-motion: reduce) {
    :root, [data-noodle] { --mn-duration: 0ms; }
  }

  :where(html) {
    background-color: var(--mn-bg);
    background-image: var(--mn-bg-image);
    background-attachment: fixed;
    color: var(--mn-fg);
    font-family: var(--mn-font);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  [data-noodle]:not(html) { color: var(--mn-fg); font-family: var(--mn-font); }

  [class*="mn-"], [class*="mn-"]::before, [class*="mn-"]::after { box-sizing: border-box; }

  :where([class*="mn-"]):focus-visible { outline: none; box-shadow: var(--mn-focus); }

  /* Any icon dropped into a component defaults to the text size. Components
     that want another size set it with a normal (higher-specificity) rule. */
  :where([class*="mn-"]) :where(svg:not([width]):not([height])) { width: 1em; height: 1em; flex: none; }

}

@layer mian.utilities {
  /* Colour roles live in the last layer so they beat any component default. */
  /* Put one next to any component that supports colour. */
  .mn-primary   { --_c: var(--mn-primary);   --_cf: var(--mn-primary-fg);   --_ct: var(--mn-primary-text); }
  .mn-secondary { --_c: var(--mn-secondary); --_cf: var(--mn-secondary-fg); --_ct: var(--mn-secondary-fg); }
  .mn-accent    { --_c: var(--mn-accent);    --_cf: var(--mn-accent-fg);    --_ct: var(--mn-accent-text); }
  .mn-success   { --_c: var(--mn-success);   --_cf: var(--mn-success-fg);   --_ct: var(--mn-success-text); }
  .mn-warning   { --_c: var(--mn-warning);   --_cf: var(--mn-warning-fg);   --_ct: var(--mn-warning-text); }
  .mn-danger    { --_c: var(--mn-danger);    --_cf: var(--mn-danger-fg);    --_ct: var(--mn-danger-text); }
  .mn-info      { --_c: var(--mn-info);      --_cf: var(--mn-info-fg);      --_ct: var(--mn-info-text); }
  .mn-neutral   { --_c: var(--mn-fg);        --_cf: var(--mn-bg);           --_ct: var(--mn-fg); }
  .mn-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .mn-muted { color: var(--mn-muted); }
  .mn-stack { display: flex; flex-direction: column; gap: var(--mn-gap, 1rem); }
  .mn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mn-gap, .5rem); }
  .mn-grow { flex: 1 1 auto; min-width: 0; }
  .mn-icon { width: 1em; height: 1em; flex: none; }

  /* States that must survive every noodle. Skins live in an earlier layer, so
     a skin that restyles .mn-chip or .mn-alert in general would otherwise wipe
     out the pressed chip, the solid alert or the selected pill tab. */
  .mn-alert-solid { background-color: var(--_a); border-color: var(--_a); color: var(--_af); }
  .mn-alert-solid :is(.mn-alert-title, .mn-alert-icon, .mn-alert-desc) { color: var(--_af); }
  /* Status words in soft badges stay readable on every noodle's surfaces (tinted rows, glass, bands). */
.mn-badge-soft:is(.mn-success, .mn-warning, .mn-danger, .mn-info) { color: color-mix(in oklab, var(--_ct) 76%, var(--mn-fg)); }
/* Chart hover and keyboard states show in every noodle, even where a skin hides points. */
.mn-chart-line .mn-point.mn-active { opacity: 1; }
.mn-bar.mn-active::after { opacity: 1; }
button.mn-chip[aria-pressed="true"] { background-color: var(--mn-primary); border-color: var(--mn-primary); color: var(--mn-primary-fg); }
  .mn-tabs-pills .mn-tab[aria-selected="true"] { background-color: var(--mn-primary); color: var(--mn-primary-fg); }

  /* Keyboard focus that no skin can hide. Skins restyle box-shadow freely, so
     the guaranteed indicator is an outline, drawn outside any shadow; it has
     the same geometry as the default --mn-focus ring, so the two coincide. */
  :is(button, a[href], summary, [tabindex]:not([tabindex="-1"]), input:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[class*="mn-"]:focus-visible,
  :where([class*="mn-"]) :is(button, a[href], summary, [tabindex]:not([tabindex="-1"]), input:is([type="checkbox"], [type="radio"], [type="range"])):focus-visible {
    outline: 2px solid var(--mn-ring); outline-offset: 2px;
  }
  /* Tabs sit in a scrolling list that would clip an outside ring. */
  .mn-tab:focus-visible, .mn-toggle-group > :focus-visible, .mn-calendar-day:focus-visible, .mn-command-item:focus-visible, .mn-menu-item:focus-visible { outline-offset: -3px; }
}

@layer mian.tokens {
:root, [data-noodle="mian"] {
  --mn-bg: light-dark(#ffffff, #0a0a0a);
  --mn-surface: light-dark(#ffffff, #111111);
  --mn-surface-2: light-dark(#f5f5f5, #1a1a1a);
  --mn-fg: light-dark(#0a0a0a, #ededed);
  --mn-muted: light-dark(#666666, #a1a1a1);
  --mn-border: light-dark(#eaeaea, #262626);
  --mn-input: light-dark(#d4d4d4, #3f3f3f);
  --mn-primary: light-dark(#0a0a0a, #ededed);
  --mn-primary-fg: light-dark(#ffffff, #0a0a0a);
  --mn-secondary: light-dark(#f5f5f5, #1a1a1a);
  --mn-secondary-fg: light-dark(#0a0a0a, #ededed);
  --mn-accent: light-dark(#525252, #a1a1a1);
  --mn-accent-fg: light-dark(#ffffff, #0a0a0a);
  --mn-ring: light-dark(#0a0a0a, #ededed);
  --mn-success: light-dark(#15803d, #4ade80);
  --mn-success-fg: light-dark(#ffffff, #052e16);
  --mn-warning: light-dark(#b45309, #fbbf24);
  --mn-warning-fg: light-dark(#ffffff, #1f1300);
  --mn-danger: light-dark(#dc2626, #f87171);
  --mn-danger-fg: light-dark(#ffffff, #210505);
  --mn-info: light-dark(#0369a1, #38bdf8);
  --mn-info-fg: light-dark(#ffffff, #03202d);
  --mn-primary-text: light-dark(#0a0a0a, #ededed);
  --mn-secondary-text: light-dark(#767676, #7f7f7f);
  --mn-accent-text: light-dark(#525252, #a1a1a1);
  --mn-success-text: light-dark(#14793a, #4ade80);
  --mn-warning-text: light-dark(#aa4f09, #fbbf24);
  --mn-danger-text: light-dark(#c72323, #f87171);
  --mn-info-text: light-dark(#0369a1, #38bdf8);
  --mn-link: light-dark(#0a0a0a, #ededed);
  --mn-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mn-font-heading: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --mn-heading-weight: 600;
  --mn-radius-field: 6px;
  --mn-radius-box: 10px;
  --mn-radius-badge: 999px;
  --mn-shadow-sm: 0 1px 2px rgb(0 0 0 / .05);
  --mn-shadow-md: 0 2px 6px -1px rgb(0 0 0 / .08), 0 1px 2px rgb(0 0 0 / .04);
  --mn-shadow-lg: 0 12px 32px -8px rgb(0 0 0 / .18), 0 4px 8px -4px rgb(0 0 0 / .08);
  --mn-size-xs: 26px;
  --mn-size-sm: 32px;
  --mn-size-md: 38px;
  --mn-size-lg: 46px;
  --mn-text-sm: 14px;
  --mn-surface-alpha: 100%;
  --mn-backdrop: none;
  --mn-bg-image: none;
}
}
@layer mian.components {

/* @component button */
.mn-btn {
  --_h: var(--mn-size-md);
  --_bg: var(--_c, var(--mn-primary));
  --_fg: var(--_cf, var(--mn-primary-fg));
  --_bd: transparent;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  height: var(--_h); min-width: var(--_h);
  padding: 0 calc(var(--_h) * .4);
  border: var(--mn-border-w) solid var(--_bd);
  border-radius: var(--mn-radius-field);
  background: var(--_bg);
  color: var(--_fg);
  font: 500 var(--mn-text-sm)/1 var(--mn-font);
  white-space: nowrap; text-decoration: none; vertical-align: middle;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  box-shadow: var(--mn-shadow-sm);
  transition: background-color var(--mn-duration) var(--mn-ease), color var(--mn-duration) var(--mn-ease),
              border-color var(--mn-duration) var(--mn-ease), box-shadow var(--mn-duration) var(--mn-ease),
              transform var(--mn-duration) var(--mn-ease);
}
.mn-btn:hover { --_bg: color-mix(in oklab, var(--_c, var(--mn-primary)) 88%, var(--mn-bg)); }
.mn-btn:active { transform: translateY(1px); }
.mn-btn:focus-visible { outline: none; box-shadow: var(--mn-focus); }
.mn-btn svg { width: 1.15em; height: 1.15em; flex: none; }

.mn-btn-outline { --_bg: transparent; --_fg: var(--_ct, var(--mn-fg)); --_bd: var(--_c, var(--mn-input)); box-shadow: none; }
.mn-btn-outline:hover { --_bg: color-mix(in oklab, var(--_c, var(--mn-fg)) 8%, transparent); }
.mn-btn-soft { --_bg: color-mix(in oklab, var(--_c, var(--mn-primary)) 14%, transparent); --_fg: var(--_ct, var(--mn-primary-text)); box-shadow: none; }
.mn-btn-soft:hover { --_bg: color-mix(in oklab, var(--_c, var(--mn-primary)) 22%, transparent); }
.mn-btn-ghost { --_bg: transparent; --_fg: var(--_ct, var(--mn-fg)); box-shadow: none; }
.mn-btn-ghost:hover { --_bg: color-mix(in oklab, var(--_c, var(--mn-fg)) 9%, transparent); }
.mn-btn-link { --_bg: transparent; --_fg: var(--_ct, var(--mn-link)); box-shadow: none; padding-inline: .25em; text-underline-offset: 4px; }
.mn-btn-link:hover { --_bg: transparent; text-decoration: underline; }

.mn-btn-xs { --_h: var(--mn-size-xs); font-size: calc(var(--mn-text-sm) - 2px); gap: .35em; }
.mn-btn-sm { --_h: var(--mn-size-sm); font-size: calc(var(--mn-text-sm) - 1px); }
.mn-btn-lg { --_h: var(--mn-size-lg); font-size: calc(var(--mn-text-sm) + 1px); }
.mn-btn-icon { padding: 0; width: var(--_h); }
.mn-btn-block { display: flex; width: 100%; }
.mn-btn-pill { border-radius: 999px; }

.mn-btn:disabled, .mn-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; box-shadow: none; }
.mn-btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.mn-btn[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 1.1em; height: 1.1em; border-radius: 50%;
  border: 2px solid var(--_fg); border-right-color: transparent;
  animation: mn-spin .7s linear infinite;
}

/* @component button-group */
.mn-btn-group { display: inline-flex; isolation: isolate; }
.mn-btn-group > .mn-btn { border-radius: 0; box-shadow: none; }
.mn-btn-group > .mn-btn:focus-visible { z-index: 1; }
.mn-btn-group > .mn-btn:first-child { border-start-start-radius: var(--mn-radius-field); border-end-start-radius: var(--mn-radius-field); }
.mn-btn-group > .mn-btn:last-child  { border-start-end-radius: var(--mn-radius-field); border-end-end-radius: var(--mn-radius-field); }
.mn-btn-group > .mn-btn-outline + .mn-btn-outline { margin-inline-start: calc(var(--mn-border-w) * -1); }
.mn-btn-group > .mn-btn:not(.mn-btn-outline) + .mn-btn:not(.mn-btn-outline) { border-inline-start: 1px solid color-mix(in oklab, var(--_fg) 25%, transparent); }
.mn-btn-group-vertical { flex-direction: column; }
.mn-btn-group-vertical > .mn-btn:first-child { border-radius: var(--mn-radius-field) var(--mn-radius-field) 0 0; }
.mn-btn-group-vertical > .mn-btn:last-child { border-radius: 0 0 var(--mn-radius-field) var(--mn-radius-field); }
.mn-btn-group-vertical > .mn-btn-outline + .mn-btn-outline { margin: calc(var(--mn-border-w) * -1) 0 0; }

/* @component toggle-group */
.mn-toggle-group {
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: calc(var(--mn-radius-field) + 3px);
  background: var(--mn-surface-2);
}
.mn-toggle-group > button, .mn-toggle-group > label {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  height: calc(var(--mn-size-md) - 6px); padding: 0 .85em;
  border: 0; border-radius: var(--mn-radius-field);
  background: transparent; color: var(--mn-muted);
  font: 500 var(--mn-text-sm)/1 var(--mn-font); white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--mn-duration) var(--mn-ease), color var(--mn-duration) var(--mn-ease), box-shadow var(--mn-duration) var(--mn-ease);
}
.mn-toggle-group > :hover { color: var(--mn-fg); }
.mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > [aria-checked="true"], .mn-toggle-group > label:has(input:checked) {
  background: var(--mn-surface); color: var(--mn-fg); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 0 0 1px var(--mn-border);
}
.mn-toggle-group > label > input { position: absolute; opacity: 0; pointer-events: none; }
.mn-toggle-group > label:has(input:focus-visible), .mn-toggle-group > button:focus-visible { outline: none; box-shadow: var(--mn-focus); }
.mn-toggle-group svg { width: 1.1em; height: 1.1em; }
.mn-toggle-group-block { display: flex; }
.mn-toggle-group-block > * { flex: 1; }

/* @component dropdown */
.mn-menu {
  min-width: 12rem; max-width: min(22rem, calc(100vw - 16px));
  margin: 0; padding: 4px;
  border: var(--mn-border-w) solid var(--mn-border);
  border-radius: var(--mn-radius-box);
  background: var(--mn-popover); color: var(--mn-fg);
  box-shadow: var(--mn-shadow-lg);
  font: 400 var(--mn-text-sm)/1.4 var(--mn-font);
}
.mn-menu[popover] { position: fixed; inset: auto; overflow: auto; max-height: min(24rem, calc(100vh - 24px)); }
.mn-menu[popover]:popover-open { animation: var(--mn-enter) var(--mn-enter-duration) var(--mn-ease-enter); transform-origin: top left; }
.mn-menu-item {
  display: flex; align-items: center; gap: .6rem;
  width: 100%; min-height: calc(var(--mn-size-md) - 6px); padding: .35rem .6rem;
  border: 0; border-radius: calc(var(--mn-radius-box) - 4px);
  background: none; color: inherit; font: inherit; text-align: start; text-decoration: none;
  cursor: pointer; outline: none;
}
.mn-menu-item:hover, .mn-menu-item:focus-visible { background: var(--mn-hover); }
.mn-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--mn-ring); }
.mn-menu-item svg { width: 1rem; height: 1rem; color: var(--mn-muted); flex: none; }
.mn-menu-item[aria-disabled="true"], .mn-menu-item:disabled { opacity: .5; pointer-events: none; }
.mn-menu-item.mn-danger { color: var(--mn-danger-text); }
.mn-menu-item.mn-danger svg { color: currentColor; }
.mn-menu-item[aria-checked="true"]::after { content: "✓"; margin-inline-start: auto; font-weight: 600; }
.mn-menu-label { padding: .5rem .6rem .25rem; font-size: .75rem; font-weight: 600; color: var(--mn-muted); }
.mn-menu-sep { height: 1px; margin: 4px -4px; border: 0; background: var(--mn-border); }
.mn-menu-shortcut { margin-inline-start: auto; padding-inline-start: 1rem; font-size: .75rem; color: var(--mn-muted); letter-spacing: .04em; }

@keyframes mn-spin { to { transform: rotate(360deg); } }
@keyframes mn-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes mn-fade { from { opacity: 0; } }
}

@layer mian.components {

/* @component typography */
.mn-prose { color: var(--mn-fg); font-size: 1rem; line-height: 1.7; max-width: 68ch; }
.mn-prose > * + * { margin-top: 1em; }
.mn-prose :where(p, ul, ol, blockquote, pre) { margin-bottom: 0; }
.mn-h1, .mn-h2, .mn-h3, .mn-h4, .mn-prose :where(h1, h2, h3, h4) {
  margin: 0; font-family: var(--mn-font-heading); font-weight: var(--mn-heading-weight);
  letter-spacing: -.02em; line-height: 1.15; color: var(--mn-fg); text-wrap: balance;
}
.mn-h1, .mn-prose h1 { font-size: clamp(2rem, 4.5vw, 2.75rem); letter-spacing: -.03em; }
.mn-h2, .mn-prose h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); }
.mn-h3, .mn-prose h3 { font-size: 1.25rem; }
.mn-h4, .mn-prose h4 { font-size: 1.0625rem; letter-spacing: -.01em; }
.mn-prose :where(h1, h2, h3, h4) { margin-top: 1.6em; }
.mn-lead { font-size: 1.2rem; line-height: 1.6; color: var(--mn-muted); margin: 0; }
.mn-small { font-size: .875rem; }
.mn-prose a, .mn-link { color: var(--mn-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mn-link:hover, .mn-prose a:hover { text-decoration-thickness: 2px; }
.mn-prose blockquote { margin-inline: 0; padding-inline-start: 1rem; border-inline-start: 3px solid var(--mn-border); color: var(--mn-muted); font-style: italic; }
.mn-prose :where(ul, ol) { padding-inline-start: 1.4rem; }
.mn-prose li + li { margin-top: .35em; }
.mn-prose hr { border: 0; border-top: 1px solid var(--mn-border); margin-block: 2em; }

/* @component avatar */
.mn-avatar {
  --_s: 2.5rem;
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--_s); height: var(--_s);
  border-radius: 50%; overflow: hidden;
  background: var(--mn-surface-2); color: var(--mn-muted);
  font: 600 calc(var(--_s) * .38)/1 var(--mn-font); text-transform: uppercase; user-select: none;
  vertical-align: middle;
}
.mn-avatar > img { width: 100%; height: 100%; object-fit: cover; }
.mn-avatar-xs { --_s: 1.5rem; } .mn-avatar-sm { --_s: 2rem; } .mn-avatar-lg { --_s: 3.25rem; } .mn-avatar-xl { --_s: 4.5rem; }
.mn-avatar-square { border-radius: var(--mn-radius-field); }
.mn-avatar:is(.mn-primary, .mn-accent, .mn-success, .mn-warning, .mn-danger, .mn-info) { background: var(--_c); color: var(--_cf); }
.mn-avatar-wrap { position: relative; display: inline-flex; }
.mn-presence {
  position: absolute; right: 0; bottom: 0; width: 28%; height: 28%; min-width: 8px; min-height: 8px;
  border-radius: 50%; border: 2px solid var(--mn-bg); background: var(--mn-muted);
}
.mn-presence.mn-online { background: var(--mn-success); }
.mn-presence.mn-busy { background: var(--mn-danger); }
.mn-presence.mn-away { background: var(--mn-warning); }
.mn-avatar-group { display: inline-flex; flex-direction: row; }
.mn-avatar-group > .mn-avatar { box-shadow: 0 0 0 2px var(--mn-bg); }
.mn-avatar-group > .mn-avatar + .mn-avatar { margin-inline-start: calc(var(--_s) * -.3); }

/* @component badge */
.mn-badge {
  display: inline-flex; align-items: center; gap: .3em;
  height: 1.375rem; padding: 0 .55em;
  border: var(--mn-border-w) solid transparent;
  border-radius: var(--mn-radius-badge);
  background: var(--_c, var(--mn-primary)); color: var(--_cf, var(--mn-primary-fg));
  font: 600 .75rem/1 var(--mn-font); white-space: nowrap; vertical-align: middle;
}
.mn-badge-soft { background: color-mix(in oklab, var(--_c, var(--mn-primary)) 12%, transparent); color: color-mix(in oklab, var(--_ct, var(--mn-primary-text)) 82%, var(--mn-fg)); }
.mn-badge-outline { background: transparent; color: var(--_ct, var(--mn-fg)); border-color: color-mix(in oklab, var(--_c, var(--mn-fg)) 45%, transparent); }
.mn-badge.mn-secondary:not(.mn-badge-soft):not(.mn-badge-outline) { border-color: var(--mn-border); }
.mn-badge-sm { height: 1.125rem; font-size: .6875rem; }
.mn-badge-lg { height: 1.625rem; font-size: .8125rem; padding: 0 .7em; }
.mn-badge svg { width: .9em; height: .9em; }
.mn-dot { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; flex: none; }

/* @component chip */
.mn-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  height: 1.875rem; padding: 0 .35rem 0 .7rem;
  border: var(--mn-border-w) solid var(--mn-border); border-radius: 999px;
  background: var(--mn-surface-2); color: var(--mn-fg);
  font: 500 calc(var(--mn-text-sm) - 1px)/1 var(--mn-font); white-space: nowrap;
}
.mn-chip:not(:has(.mn-chip-remove)) { padding-inline-end: .7rem; }
.mn-chip.mn-primary, .mn-chip.mn-accent, .mn-chip.mn-success, .mn-chip.mn-warning, .mn-chip.mn-danger, .mn-chip.mn-info {
  background: color-mix(in oklab, var(--_c) 13%, transparent); color: var(--_ct); border-color: color-mix(in oklab, var(--_c) 30%, transparent);
}
.mn-chip > img { width: 1.35rem; height: 1.35rem; border-radius: 50%; margin-inline-start: -.45rem; object-fit: cover; }
.mn-chip-remove {
  display: grid; place-items: center; width: 1.25rem; height: 1.25rem;
  border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .6; cursor: pointer;
}
.mn-chip-remove:hover { opacity: 1; background: var(--mn-active); }
.mn-chip-remove:focus-visible { outline: none; box-shadow: var(--mn-focus); opacity: 1; }
.mn-chip-remove svg { width: .8rem; height: .8rem; }
button.mn-chip { cursor: pointer; }
button.mn-chip[aria-pressed="true"] { background: var(--mn-primary); color: var(--mn-primary-fg); border-color: var(--mn-primary); }

/* @component card */
.mn-card {
  display: flex; flex-direction: column; min-width: 0;
  border: var(--mn-border-w) solid var(--mn-border);
  border-radius: var(--mn-radius-box);
  background: var(--mn-card); color: var(--mn-fg);
  backdrop-filter: var(--mn-backdrop); -webkit-backdrop-filter: var(--mn-backdrop);
  box-shadow: var(--mn-shadow-md);
  overflow: hidden;
}
.mn-card-header { display: flex; flex-direction: column; gap: .3rem; padding: 1.25rem 1.25rem 0; }
.mn-card-header:has(> .mn-card-actions) { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.mn-card-title { margin: 0; font: var(--mn-heading-weight) 1.0625rem/1.3 var(--mn-font-heading); letter-spacing: -.01em; }
.mn-card-description { margin: 0; font-size: var(--mn-text-sm); color: var(--mn-muted); line-height: 1.5; }
.mn-card-body { padding: 1.25rem; flex: 1; font-size: var(--mn-text-sm); line-height: 1.6; }
.mn-card-header + .mn-card-body { padding-top: 1rem; }
.mn-card-footer { display: flex; align-items: center; gap: .5rem; padding: 0 1.25rem 1.25rem; }
.mn-card-footer-bordered { padding-top: 1rem; border-top: var(--mn-border-w) solid var(--mn-border); background: color-mix(in oklab, var(--mn-surface-2) 50%, transparent); }
.mn-card-media { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--mn-surface-2); }
.mn-card-actions { display: flex; gap: .25rem; flex: none; }
.mn-card-flat { box-shadow: none; }
.mn-card-ghost { border-color: transparent; box-shadow: none; background: transparent; }
a.mn-card, .mn-card-interactive { text-decoration: none; transition: border-color var(--mn-duration) var(--mn-ease), box-shadow var(--mn-duration) var(--mn-ease), transform var(--mn-duration) var(--mn-ease); }
a.mn-card:hover, .mn-card-interactive:hover { border-color: color-mix(in oklab, var(--mn-border), var(--mn-fg) 25%); box-shadow: var(--mn-shadow-lg); }
a.mn-card:focus-visible { outline: none; box-shadow: var(--mn-focus); }

/* @component table */
.mn-table-wrap { position: relative; width: 100%; overflow-x: auto; border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-card); }
.mn-table { width: 100%; border-collapse: collapse; font: 400 var(--mn-text-sm)/1.45 var(--mn-font); color: var(--mn-fg); }
.mn-table caption { padding: .75rem 1rem; caption-side: bottom; color: var(--mn-muted); font-size: calc(var(--mn-text-sm) - 1px); text-align: start; }
.mn-table th, .mn-table td { padding: .7rem 1rem; text-align: start; vertical-align: middle; border-bottom: var(--mn-border-w) solid var(--mn-border); }
.mn-table thead th { height: 2.6rem; font-weight: 500; color: var(--mn-muted); white-space: nowrap; background: color-mix(in oklab, var(--mn-surface-2) 55%, transparent); }
.mn-table tbody tr:last-child > * { border-bottom: 0; }
.mn-table tfoot td, .mn-table tfoot th { font-weight: 600; border-top: var(--mn-border-w) solid var(--mn-border); border-bottom: 0; }
.mn-table-hover tbody tr { transition: background-color var(--mn-duration) var(--mn-ease); }
.mn-table-hover tbody tr:hover { background: var(--mn-hover); }
.mn-table-striped tbody tr:nth-child(even) { background: color-mix(in oklab, var(--mn-surface-2) 50%, transparent); }
.mn-table-compact th, .mn-table-compact td { padding: .4rem .75rem; }
.mn-table tr[aria-selected="true"] { background: color-mix(in oklab, var(--mn-primary) 8%, transparent); }
.mn-table .mn-num { text-align: end; font-variant-numeric: tabular-nums; }
.mn-table th[aria-sort] button { display: inline-flex; align-items: center; gap: .3rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.mn-table th[aria-sort] button::after { content: "↕"; opacity: .45; font-size: .85em; }
.mn-table th[aria-sort="ascending"] button::after { content: "↑"; opacity: 1; }
.mn-table th[aria-sort="descending"] button::after { content: "↓"; opacity: 1; }

/* @component list */
.mn-list { margin: 0; padding: 0; list-style: none; border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-card); overflow: hidden; }
.mn-list > li { display: flex; align-items: center; gap: .85rem; padding: .8rem 1rem; font-size: var(--mn-text-sm); }
.mn-list > li + li { border-top: var(--mn-border-w) solid var(--mn-border); }
.mn-list-title { font-weight: 550; line-height: 1.35; }
.mn-list-desc { color: var(--mn-muted); font-size: calc(var(--mn-text-sm) - 1px); line-height: 1.4; }
.mn-list > li > a, .mn-list > li > button { display: flex; align-items: center; gap: .85rem; flex: 1; margin: -.8rem -1rem; padding: .8rem 1rem; border: 0; background: none; color: inherit; font: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.mn-list > li > a:hover, .mn-list > li > button:hover { background: var(--mn-hover); }
.mn-list > li > a:focus-visible, .mn-list > li > button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mn-ring); }

/* @component kbd */
.mn-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.5rem; padding: 0 .4em;
  border: var(--mn-border-w) solid var(--mn-border); border-bottom-width: 2px;
  border-radius: min(6px, var(--mn-radius-field));
  background: var(--mn-surface-2); color: var(--mn-fg);
  font: 500 .75rem/1 var(--mn-font-mono);
}

/* @component code */
.mn-code { padding: .15em .4em; border-radius: min(5px, var(--mn-radius-field)); background: var(--mn-surface-2); font: 500 .875em/1.4 var(--mn-font-mono); color: var(--mn-fg); }
.mn-pre {
  margin: 0; padding: 1rem 1.1rem; overflow: auto;
  border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box);
  background: var(--mn-surface-2); color: var(--mn-fg);
  font: 400 .8125rem/1.65 var(--mn-font-mono); tab-size: 2;
}
.mn-pre code { font: inherit; background: none; padding: 0; }

/* @component stat */
.mn-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-card); overflow: hidden; }
.mn-stat { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.25rem; min-width: 0; }
.mn-stats > .mn-stat + .mn-stat { border-inline-start: var(--mn-border-w) solid var(--mn-border); }
.mn-stat-label { font-size: var(--mn-text-sm); color: var(--mn-muted); display: flex; align-items: center; gap: .4rem; }
.mn-stat-value { font: 700 1.75rem/1.1 var(--mn-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mn-stat-delta { display: inline-flex; align-items: center; gap: .2rem; font-size: calc(var(--mn-text-sm) - 1px); font-weight: 600; color: var(--mn-muted); }
.mn-stat-delta svg { width: .95em; height: .95em; }
.mn-stat-delta.mn-up { color: color-mix(in oklab, var(--mn-success-text) 86%, var(--mn-fg)); }
.mn-stat-delta.mn-down { color: color-mix(in oklab, var(--mn-danger-text) 86%, var(--mn-fg)); }
@media (max-width: 40rem) { .mn-stats > .mn-stat + .mn-stat { border-inline-start: 0; border-top: var(--mn-border-w) solid var(--mn-border); } }

/* @component timeline */
.mn-timeline { margin: 0; padding: 0; list-style: none; }
.mn-timeline > li { position: relative; display: grid; grid-template-columns: 1.5rem 1fr; gap: 0 .9rem; padding-bottom: 1.25rem; }
.mn-timeline > li:last-child { padding-bottom: 0; }
.mn-timeline > li::before { content: ""; position: absolute; left: calc(.75rem - 1px); top: 1.6rem; bottom: .1rem; width: 2px; background: var(--mn-border); }
.mn-timeline > li:last-child::before { display: none; }
.mn-timeline-marker {
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--mn-surface-2); border: 2px solid var(--mn-border); color: var(--mn-muted);
}
.mn-timeline-marker svg { width: .8rem; height: .8rem; }
.mn-timeline-marker:is(.mn-primary, .mn-accent, .mn-success, .mn-warning, .mn-danger, .mn-info) { background: var(--_c); border-color: var(--_c); color: var(--_cf); }
.mn-timeline-title { font-weight: 600; font-size: var(--mn-text-sm); line-height: 1.5rem; }
.mn-timeline-time { font-size: .75rem; color: var(--mn-muted); }
.mn-timeline-body { grid-column: 2; font-size: var(--mn-text-sm); color: var(--mn-muted); margin-top: .2rem; line-height: 1.55; }

/* @component accordion */
.mn-accordion { border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-card); overflow: hidden; }
.mn-accordion > details + details { border-top: var(--mn-border-w) solid var(--mn-border); }
.mn-accordion summary, .mn-collapse > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.15rem; cursor: pointer; list-style: none;
  font: 550 var(--mn-text-sm)/1.4 var(--mn-font);
}
.mn-accordion summary::-webkit-details-marker, .mn-collapse > summary::-webkit-details-marker { display: none; }
.mn-accordion summary::after, .mn-collapse > summary::after {
  content: ""; width: .5rem; height: .5rem; flex: none; margin-inline-end: .2rem;
  border-right: 1.5px solid var(--mn-muted); border-bottom: 1.5px solid var(--mn-muted);
  transform: translateY(-2px) rotate(45deg); transition: transform var(--mn-duration) var(--mn-ease);
}
.mn-accordion details[open] > summary::after, .mn-collapse[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.mn-accordion summary:hover, .mn-collapse > summary:hover { background: var(--mn-hover); }
.mn-accordion summary:focus-visible, .mn-collapse > summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mn-ring); }
.mn-accordion-content { padding: 0 1.15rem 1.1rem; font-size: var(--mn-text-sm); line-height: 1.65; color: var(--mn-muted); }
.mn-accordion details::details-content { transition: content-visibility var(--mn-duration) allow-discrete, height var(--mn-duration) var(--mn-ease); height: 0; overflow: clip; }
.mn-accordion details[open]::details-content { height: auto; }
@supports (interpolate-size: allow-keywords) { .mn-accordion { interpolate-size: allow-keywords; } }

/* @component description-list */
.mn-dl { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; margin: 0; font-size: var(--mn-text-sm); }
.mn-dl > dt, .mn-dl > dd { margin: 0; padding: .7rem 0; border-top: var(--mn-border-w) solid var(--mn-border); }
.mn-dl > dt { color: var(--mn-muted); padding-inline-end: 1.5rem; }
.mn-dl > dd { font-weight: 500; }
.mn-dl > dt:first-of-type, .mn-dl > dt:first-of-type + dd { border-top: 0; }
@media (max-width: 30rem) { .mn-dl { grid-template-columns: 1fr; } .mn-dl > dd { border-top: 0; padding-top: 0; } }

/* @component divider */
.mn-divider { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; border: 0; color: var(--mn-muted); font-size: .75rem; font-weight: 500; }
.mn-divider::before, .mn-divider::after { content: ""; flex: 1; height: var(--mn-border-w); background: var(--mn-border); }
.mn-divider:empty { gap: 0; }
.mn-divider:empty::after { display: none; }
.mn-divider-vertical { flex-direction: column; margin: 0 .5rem; align-self: stretch; }
.mn-divider-vertical::before, .mn-divider-vertical::after { width: var(--mn-border-w); height: auto; }

/* @component skeleton */
.mn-skeleton {
  display: block; min-height: .9em; border-radius: var(--mn-radius-field);
  background: linear-gradient(90deg, var(--mn-surface-2) 0%, color-mix(in oklab, var(--mn-surface-2), var(--mn-fg) 6%) 50%, var(--mn-surface-2) 100%);
  background-size: 200% 100%;
  animation: mn-shimmer 1.4s ease-in-out infinite;
}
.mn-skeleton-text { height: .8em; border-radius: 4px; }
.mn-skeleton-circle { border-radius: 50%; }
@keyframes mn-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .mn-skeleton { animation: none; } }

/* @component empty-state */
.mn-empty {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 2.5rem 1.5rem; text-align: center;
  border: var(--mn-border-w) dashed var(--mn-border); border-radius: var(--mn-radius-box);
}
.mn-empty-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .4rem; border-radius: 50%; background: var(--mn-surface-2); color: var(--mn-muted); }
.mn-empty-icon svg { width: 1.4rem; height: 1.4rem; }
.mn-empty-title { margin: 0; font: 600 1rem/1.3 var(--mn-font); }
.mn-empty-desc { margin: 0 0 .6rem; max-width: 34ch; font-size: var(--mn-text-sm); color: var(--mn-muted); line-height: 1.55; }
}

@layer mian.components {
/* @component chart */
.mn-chart { margin: 0; display: grid; gap: .75rem; min-width: 0; font: 400 .75rem/1.3 var(--mn-font); color: var(--mn-muted); }
.mn-chart figcaption { font-size: .75rem; color: var(--mn-muted); }
.mn-chart-bars {
  --h: 10rem; --max: 100;
  display: flex; align-items: stretch; gap: var(--mn-bar-gap, 6px);
  height: var(--h); padding-bottom: 1.25rem; position: relative;
  background: repeating-linear-gradient(to top, var(--mn-border) 0 1px, transparent 1px calc((var(--h) - 1.25rem) / 4));
  background-size: 100% calc(100% - 1.25rem); background-repeat: no-repeat;
}
.mn-bar { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.mn-bar::before {
  content: ""; display: block;
  height: calc(var(--v, 0) / var(--max) * 100%);
  border-radius: var(--mn-bar-radius, min(6px, var(--mn-radius-field))) var(--mn-bar-radius, min(6px, var(--mn-radius-field))) 0 0;
  background: var(--mn-bar-fill, color-mix(in oklab, var(--mn-series-1) 30%, transparent));
  transition: height 500ms var(--mn-spring), background-color var(--mn-duration) var(--mn-ease);
}
.mn-bar.mn-hl::before, .mn-bar:hover::before { background: var(--mn-bar-fill-hl, var(--mn-series-1)); }
.mn-bar > span { position: absolute; left: 50%; bottom: -1.25rem; translate: -50% 0; white-space: nowrap; font-size: .6875rem; }
.mn-bar[data-value]::after {
  content: attr(data-value); position: absolute; left: 50%; bottom: calc(var(--v, 0) / var(--max) * (100%) + 4px); translate: -50% 0;
  padding: 2px 6px; border-radius: 4px; background: var(--mn-fg); color: var(--mn-bg); font-size: .6875rem; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity var(--mn-duration) var(--mn-ease);
}
.mn-bar:hover::after, .mn-bar.mn-active::after { opacity: 1; z-index: 2; }
.mn-bar.mn-active::before { background: var(--mn-bar-fill-hl, var(--mn-series-1)); }
/* The hovered column is marked like the line chart's guide. */
.mn-chart-bars:not(.mn-chart-h) .mn-bar:is(:hover, .mn-active) { background: linear-gradient(color-mix(in oklab, var(--mn-fg) 6%, transparent), color-mix(in oklab, var(--mn-fg) 6%, transparent)) top / 100% calc(100% - 0px) no-repeat; border-radius: var(--mn-radius-field) var(--mn-radius-field) 0 0; }
/* Horizontal bars */
.mn-chart-bars.mn-chart-h { flex-direction: column; height: auto; padding: 0 2.5rem 0 var(--mn-chart-label, 4.5rem); gap: var(--mn-bar-gap, 8px); background: none; }
.mn-chart-h .mn-bar { flex: none; flex-direction: row; justify-content: flex-start; align-items: center; height: 1.1rem; }
.mn-chart-h .mn-bar::before { height: 100%; width: calc(var(--v, 0) / var(--max) * 100%); border-radius: 0 var(--mn-bar-radius, 4px) var(--mn-bar-radius, 4px) 0; transition: width 500ms var(--mn-spring); }
.mn-chart-h .mn-bar > span { left: calc(var(--mn-chart-label, 4.5rem) * -1); bottom: auto; top: 50%; translate: 0 -50%; width: calc(var(--mn-chart-label, 4.5rem) - .5rem); text-align: end; overflow: hidden; text-overflow: ellipsis; }
.mn-chart-h .mn-bar[data-value]::after { left: calc(var(--v, 0) / var(--max) * 100% + 6px); bottom: auto; top: 50%; translate: 0 -50%; opacity: 1; background: none; color: var(--mn-muted); padding: 0; }

/* Line / area — mian.js draws the paths from data-values */
.mn-chart-line { display: block; width: 100%; height: var(--h, 10rem); overflow: visible; }
.mn-chart-line .mn-grid-line { stroke: var(--mn-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mn-chart-line .mn-line { fill: none; stroke: var(--mn-series-1); stroke-width: var(--mn-line-width, 2px); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mn-chart-line .mn-line.mn-s2 { stroke: var(--mn-series-2); }
.mn-chart-line .mn-area { fill: var(--mn-series-1); opacity: var(--mn-area-opacity, .12); }
.mn-chart-line .mn-area.mn-s2 { fill: var(--mn-series-2); }
.mn-chart-line .mn-point { fill: var(--mn-surface); stroke: var(--mn-series-1); stroke-width: 2px; vector-effect: non-scaling-stroke; opacity: var(--mn-point-opacity, 0); }
.mn-chart-line .mn-point.mn-s2 { stroke: var(--mn-series-2); }
.mn-chart-line { cursor: crosshair; touch-action: pan-y; }
.mn-chart-line:focus-visible { outline: 2px solid var(--mn-ring); outline-offset: 4px; border-radius: 2px; }
.mn-chart-line .mn-chart-guide { stroke: var(--mn-chart-guide, color-mix(in oklab, var(--mn-fg) 45%, transparent)); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.mn-chart-line .mn-point.mn-active { r: 4.5; }
/* The hover tip: label, then one row per series with its colour. */
.mn-chart-tip {
  position: absolute; z-index: 5; pointer-events: none; display: grid; gap: .2rem; min-width: 6rem; max-width: 16rem;
  padding: .45rem .6rem; border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-field);
  background: var(--mn-surface); color: var(--mn-fg); box-shadow: var(--mn-shadow-md);
  font: 400 .75rem/1.35 var(--mn-font); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mn-chart-tip[hidden] { display: none; }
.mn-chart-tip strong { font-weight: 600; color: var(--mn-fg); }
.mn-chart-tip-row { display: flex; align-items: center; gap: .4rem; color: var(--mn-muted); }
.mn-chart-tip-row b { margin-inline-start: auto; padding-inline-start: .75rem; color: var(--mn-fg); font-weight: 600; }
.mn-chart-tip-row i { width: .55rem; height: .55rem; flex: none; border-radius: 2px; background: var(--mn-series-1); }
.mn-chart-tip-row i.mn-s2 { background: var(--mn-series-2); }
.mn-chart-bars[tabindex]:focus-visible { outline: 2px solid var(--mn-ring); outline-offset: 4px; border-radius: 2px; }
.mn-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 0; padding: 0; list-style: none; }
.mn-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.mn-legend li::before { content: ""; width: .7rem; height: .7rem; border-radius: 3px; background: var(--_s, var(--mn-series-1)); }
.mn-legend li:nth-child(2) { --_s: var(--mn-series-2); } .mn-legend li:nth-child(3) { --_s: var(--mn-series-3); } .mn-legend li:nth-child(4) { --_s: var(--mn-series-4); }

/* Donut — segments are percentages in --s1…--s4 */
.mn-donut {
  --s1: 0; --s2: 0; --s3: 0; --s4: 0; --size: 8rem; --thick: 40%;
  position: relative; display: inline-grid; place-items: center; width: var(--size); height: var(--size); border-radius: 50%;
  background: conic-gradient(from var(--mn-donut-start, 0deg),
    var(--mn-series-1) 0 calc(var(--s1) * 1%),
    var(--mn-series-2) 0 calc((var(--s1) + var(--s2)) * 1%),
    var(--mn-series-3) 0 calc((var(--s1) + var(--s2) + var(--s3)) * 1%),
    var(--mn-series-4) 0 calc((var(--s1) + var(--s2) + var(--s3) + var(--s4)) * 1%),
    var(--mn-surface-2) 0);
  /* --thick is the ring width as a share of the radius (or a length). */
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - var(--thick)), #000 calc(100% - var(--thick) + .5px));
          mask: radial-gradient(closest-side, transparent calc(100% - var(--thick)), #000 calc(100% - var(--thick) + .5px));
}
.mn-donut-wrap { position: relative; display: inline-grid; place-items: center; }
.mn-donut-wrap > .mn-donut-label { position: absolute; text-align: center; font: 700 1.25rem/1.1 var(--mn-font); color: var(--mn-fg); }
.mn-donut-wrap > .mn-donut-label small { display: block; font-size: .6875rem; font-weight: 500; color: var(--mn-muted); }
}

@layer mian.components {

/* @component calendar */
.mn-calendar {
  --_cell: 2.25rem;
  display: inline-grid; gap: .5rem; max-width: 100%;
  padding: .75rem;
  border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box);
  background: var(--mn-card); color: var(--mn-fg);
  font: 400 var(--mn-text-sm)/1 var(--mn-font);
}
.mn-popover .mn-calendar { border: 0; padding: .25rem; background: none; }
.mn-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.mn-calendar-title { font-weight: 600; text-align: center; flex: 1; }
.mn-calendar-nav {
  display: grid; place-items: center; width: 2rem; height: 2rem; flex: none;
  border: 0; border-radius: var(--mn-radius-field); background: none; color: var(--mn-muted); cursor: pointer;
}
.mn-calendar-nav:hover { background: var(--mn-hover); color: var(--mn-fg); }
.mn-calendar-nav:focus-visible { outline: none; box-shadow: var(--mn-focus); }
.mn-calendar-nav svg { width: 1rem; height: 1rem; }
.mn-calendar-grid { border-collapse: collapse; }
.mn-calendar-grid th { width: var(--_cell); height: 1.75rem; padding: 0; font-size: .6875rem; font-weight: 500; color: var(--mn-muted); text-align: center; }
.mn-calendar-grid td { padding: 1px; text-align: center; }
.mn-calendar-day {
  width: var(--_cell); height: var(--_cell); padding: 0;
  border: 0; border-radius: min(var(--mn-radius-field), 999px); background: none;
  color: inherit; font: inherit; font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color var(--mn-duration) var(--mn-ease), color var(--mn-duration) var(--mn-ease);
}
.mn-calendar-day:hover { background: var(--mn-hover); }
.mn-calendar-day[data-outside] { color: var(--mn-muted); }
.mn-calendar-day[aria-current="date"] { font-weight: 700; box-shadow: inset 0 0 0 1px var(--mn-input); }
.mn-calendar-day[aria-pressed="true"] { background: var(--mn-primary); color: var(--mn-primary-fg); box-shadow: none; }
.mn-calendar-day[data-in-range] { border-radius: 0; background: color-mix(in oklab, var(--mn-primary) 14%, transparent); color: var(--mn-fg); }
.mn-calendar-day[data-range-start], .mn-calendar-day[data-range-end] { background: var(--mn-primary); color: var(--mn-primary-fg); box-shadow: none; }
.mn-calendar-day[data-range-start]:not([data-range-end]) { border-start-end-radius: 0; border-end-end-radius: 0; }
.mn-calendar-day[data-range-end]:not([data-range-start]) { border-start-start-radius: 0; border-end-start-radius: 0; }
.mn-calendar-day:disabled { opacity: .35; cursor: not-allowed; background: none; }
.mn-calendar-day:focus-visible { outline: none; box-shadow: var(--mn-focus); }
@media (max-width: 22rem) { .mn-calendar { --_cell: 2rem; padding: .5rem; } }

/* @component tag-input */
.mn-tag-input {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  min-height: var(--mn-size-md); padding: .3rem .4rem; cursor: text;
}
.mn-tag-input.mn-input { height: auto; }
.mn-tag-input > input { flex: 1 1 6rem; min-width: 6rem; height: calc(var(--mn-size-md) - .8rem); padding: 0 .25rem; border: 0; outline: 0; background: none; color: inherit; font: inherit; }
.mn-tag-input:focus-within { border-color: var(--mn-ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mn-ring) 25%, transparent); }
.mn-tag-input .mn-chip { height: calc(var(--mn-size-md) - .9rem); }

/* @component password-input */
.mn-password { position: relative; }
.mn-password-toggle { display: grid; place-items: center; width: var(--mn-size-md); flex: none; border: 0; background: none; color: var(--mn-muted); cursor: pointer; }
.mn-password-toggle:hover { color: var(--mn-fg); }
.mn-password-toggle:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mn-ring); border-radius: var(--mn-radius-field); }
.mn-password-toggle svg { width: 1.05rem; height: 1.05rem; }
.mn-password-toggle .mn-password-hide, .mn-password-toggle[aria-pressed="true"] .mn-password-show { display: none; }
.mn-password-toggle[aria-pressed="true"] .mn-password-hide { display: contents; }
.mn-password-meter { --_s: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: .5rem; }
.mn-password-meter > i { height: 4px; border-radius: 999px; background: var(--mn-surface-2); transition: background-color var(--mn-duration) var(--mn-ease); }
.mn-password-meter > i:nth-child(-n + 4) { background: var(--mn-surface-2); }
.mn-password-meter[data-score="1"] > i:nth-child(-n + 1) { background: var(--mn-danger); }
.mn-password-meter[data-score="2"] > i:nth-child(-n + 2) { background: var(--mn-warning); }
.mn-password-meter[data-score="3"] > i:nth-child(-n + 3) { background: var(--mn-info); }
.mn-password-meter[data-score="4"] > i:nth-child(-n + 4) { background: var(--mn-success); }
.mn-password-meter > span { grid-column: 1 / -1; font-size: calc(var(--mn-text-sm) - 1px); color: var(--mn-muted); }

/* @component swatch-picker */
.mn-swatches { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; border: 0; }
.mn-swatches > legend { padding: 0; margin-bottom: .5rem; font: 500 var(--mn-text-sm)/1.3 var(--mn-font); }
.mn-swatch-option {
  --_sz: 1.9rem;
  position: relative; display: inline-grid; place-items: center; width: var(--_sz); height: var(--_sz);
  border-radius: 50%; background: var(--sw, var(--mn-primary)); cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, #000 12%, transparent);
  transition: box-shadow var(--mn-duration) var(--mn-ease), transform var(--mn-duration) var(--mn-ease);
}
.mn-swatch-option > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.mn-swatch-option:hover { transform: scale(1.08); }
.mn-swatch-option:has(input:checked) { box-shadow: 0 0 0 2px var(--mn-bg), 0 0 0 4px var(--sw, var(--mn-primary)); }
.mn-swatch-option:has(input:checked)::after { content: ""; width: 40%; height: 22%; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-15%) rotate(-45deg); filter: drop-shadow(0 0 1px rgb(0 0 0 / .5)); }
.mn-swatch-option:has(input:focus-visible) { box-shadow: var(--mn-focus); }
.mn-swatches-sm .mn-swatch-option { --_sz: 1.4rem; }
.mn-swatches-square .mn-swatch-option { border-radius: var(--mn-radius-field); }

/* @component copy-button */
.mn-copy .mn-copy-done { display: none; }
.mn-copy[data-copied] .mn-copy-idle { display: none; }
.mn-copy[data-copied] .mn-copy-done { display: contents; }
.mn-copy[data-copied] { color: var(--mn-success-text); }
.mn-copy-field { display: flex; max-width: 100%; }
.mn-copy-field > .mn-input { flex: 1; min-width: 0; font-family: var(--mn-font-mono); font-size: calc(var(--mn-text-sm) - 1px); border-start-end-radius: 0; border-end-end-radius: 0; }
.mn-copy-field > .mn-btn { border-start-start-radius: 0; border-end-start-radius: 0; margin-inline-start: calc(var(--mn-border-w) * -1); }

/* @component swap */
.mn-swap { position: relative; display: inline-grid; place-items: center; width: var(--mn-size-md); height: var(--mn-size-md); border-radius: var(--mn-radius-field); cursor: pointer; color: var(--mn-fg); }
.mn-swap:hover { background: var(--mn-hover); }
.mn-swap > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.mn-swap:has(input:focus-visible) { box-shadow: var(--mn-focus); }
.mn-swap > .mn-swap-on, .mn-swap > .mn-swap-off { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity var(--mn-duration) var(--mn-ease), transform calc(var(--mn-duration) * 1.6) var(--mn-spring); pointer-events: none; }
.mn-swap svg { width: 1.25rem; height: 1.25rem; }
.mn-swap > .mn-swap-on { opacity: 0; transform: rotate(-90deg) scale(.6); }
.mn-swap:has(input:checked) > .mn-swap-on { opacity: 1; transform: none; }
.mn-swap:has(input:checked) > .mn-swap-off { opacity: 0; transform: rotate(90deg) scale(.6); }
.mn-swap-flip > .mn-swap-on { transform: rotateY(90deg); }
.mn-swap-flip:has(input:checked) > .mn-swap-off { transform: rotateY(-90deg); }

/* @component indicator */
.mn-indicator { position: relative; display: inline-flex; }
.mn-indicator-item { position: absolute; z-index: 1; top: 0; right: 0; translate: 40% -40%; }
.mn-indicator-bottom > .mn-indicator-item { top: auto; bottom: 0; translate: 40% 40%; }
.mn-indicator-start > .mn-indicator-item { right: auto; left: 0; translate: -40% -40%; }
.mn-indicator-inset > .mn-indicator-item { translate: 0 0; }
.mn-indicator-item.mn-badge { height: 1.15rem; min-width: 1.15rem; padding: 0 .3rem; justify-content: center; font-size: .6875rem; box-shadow: 0 0 0 2px var(--mn-bg); }
.mn-indicator-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--_c, var(--mn-danger)); box-shadow: 0 0 0 2px var(--mn-bg); }
.mn-indicator-pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: mn-indicator-pulse 1.6s var(--mn-ease) infinite; }
@keyframes mn-indicator-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mn-indicator-pulse::after { animation: none; } }

/* @component chat */
.mn-chat { display: grid; gap: .75rem; }
.mn-chat-msg { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .6rem; align-items: end; max-width: min(34rem, 88%); }
.mn-chat-msg > .mn-avatar { grid-row: span 2; align-self: end; }
.mn-chat-end { justify-self: end; grid-template-columns: minmax(0, 1fr) auto; }
.mn-chat-end > .mn-avatar { grid-column: 2; grid-row: 1 / span 2; }
.mn-chat-end > :not(.mn-avatar) { grid-column: 1; justify-self: end; }
.mn-chat-bubble {
  padding: .6rem .85rem; max-width: 100%;
  border-radius: calc(var(--mn-radius-box) + 2px) calc(var(--mn-radius-box) + 2px) calc(var(--mn-radius-box) + 2px) 4px;
  background: var(--mn-surface-2); color: var(--mn-fg);
  font-size: var(--mn-text-sm); line-height: 1.5; overflow-wrap: anywhere;
}
.mn-chat-end .mn-chat-bubble { border-radius: calc(var(--mn-radius-box) + 2px) calc(var(--mn-radius-box) + 2px) 4px calc(var(--mn-radius-box) + 2px); background: var(--_c, var(--mn-primary)); color: var(--_cf, var(--mn-primary-fg)); }
.mn-chat-meta { margin-top: .25rem; font-size: .6875rem; color: var(--mn-muted); }
.mn-chat-typing { display: inline-flex; gap: 3px; padding: .75rem .85rem; }

/* @component tree */
.mn-tree, .mn-tree ul { margin: 0; padding: 0; list-style: none; }
.mn-tree { font: 400 var(--mn-text-sm)/1.4 var(--mn-font); color: var(--mn-fg); }
.mn-tree ul { margin-inline-start: .9rem; padding-inline-start: .55rem; border-inline-start: var(--mn-border-w) solid var(--mn-border); }
.mn-tree summary, .mn-tree-item {
  display: flex; align-items: center; gap: .45rem; min-height: 1.9rem; padding: .2rem .45rem;
  border-radius: var(--mn-radius-field); color: inherit; text-decoration: none; cursor: pointer; list-style: none;
}
.mn-tree summary::-webkit-details-marker { display: none; }
.mn-tree summary::before { content: ""; width: .4rem; height: .4rem; flex: none; margin-inline: .1rem .15rem; border: solid var(--mn-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform var(--mn-duration) var(--mn-ease); }
.mn-tree details[open] > summary::before { transform: rotate(45deg); }
.mn-tree-item { padding-inline-start: 1.25rem; }
.mn-tree summary:hover, .mn-tree-item:hover { background: var(--mn-hover); }
.mn-tree summary:focus-visible, .mn-tree-item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mn-ring); }
.mn-tree-item[aria-current] { background: color-mix(in oklab, var(--mn-primary) 12%, transparent); color: var(--mn-primary-text); font-weight: 550; }
.mn-tree svg { width: 1rem; height: 1rem; color: var(--mn-muted); }

/* @component hover-card */
.mn-hover-card { position: relative; display: inline-block; }
.mn-hover-card-content {
  position: absolute; z-index: 60; top: calc(100% + 8px); left: 50%;
  display: none; width: max-content; max-width: min(20rem, calc(100vw - 1.5rem));
  opacity: 0; transform: translate(-50%, 4px);
  transition: opacity var(--mn-duration) var(--mn-ease), transform var(--mn-duration) var(--mn-ease), display var(--mn-duration) allow-discrete;
  transition-delay: 0ms; box-shadow: var(--mn-shadow-lg);
}
.mn-hover-card:hover > .mn-hover-card-content, .mn-hover-card:focus-within > .mn-hover-card-content { display: block; opacity: 1; transform: translate(-50%, 0); transition-delay: 400ms; }
.mn-hover-card:focus-within > .mn-hover-card-content { transition-delay: 0ms; }
@starting-style { .mn-hover-card:is(:hover, :focus-within) > .mn-hover-card-content { opacity: 0; transform: translate(-50%, 4px); } }
.mn-hover-card-start > .mn-hover-card-content { left: 0; transform: translate(0, 4px); }
.mn-hover-card-start:is(:hover, :focus-within) > .mn-hover-card-content { transform: none; }

/* @component context-menu */
.mn-context-area { position: relative; }
.mn-context-area:focus-visible { outline: none; box-shadow: var(--mn-focus); }
.mn-context-area-dashed { display: grid; place-items: center; min-height: 9rem; padding: 1.5rem; border: 1.5px dashed var(--mn-input); border-radius: var(--mn-radius-box); color: var(--mn-muted); font-size: var(--mn-text-sm); text-align: center; user-select: none; }

/* @component banner */
.mn-banner {
  --_a: var(--_c, var(--mn-fg)); --_af: var(--_cf, var(--mn-bg));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem 1rem;
  padding: .6rem 3rem .6rem 1rem; position: relative;
  background: var(--_a); color: var(--_af);
  font: 500 var(--mn-text-sm)/1.4 var(--mn-font); text-align: center;
}
.mn-banner a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.mn-banner > .mn-close { position: absolute; right: .5rem; top: 50%; margin: 0; translate: 0 -50%; color: inherit; opacity: .8; }
.mn-banner > .mn-close:hover { background: color-mix(in oklab, currentColor 14%, transparent); color: inherit; opacity: 1; }
.mn-banner-soft { background: color-mix(in oklab, var(--_c, var(--mn-primary)) 12%, var(--mn-surface)); color: var(--_ct, var(--mn-fg)); }
.mn-banner-bordered { border-radius: var(--mn-radius-box); }

/* @component dock */
.mn-dock {
  display: flex; align-items: stretch; justify-content: space-around; gap: .25rem;
  padding: .35rem; max-width: 100%;
  border: var(--mn-border-w) solid var(--mn-border); border-radius: calc(var(--mn-radius-box) + 4px);
  background: color-mix(in srgb, var(--mn-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--mn-shadow-md);
}
.mn-dock-fixed { position: fixed; z-index: 40; left: 50%; bottom: max(.75rem, env(safe-area-inset-bottom)); translate: -50% 0; width: min(28rem, calc(100vw - 1.5rem)); }
.mn-dock-item {
  display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  min-width: 3rem; min-height: 3rem; padding: .35rem .5rem;
  border: 0; border-radius: var(--mn-radius-box); background: none;
  color: var(--mn-muted); font: 500 .6875rem/1 var(--mn-font); text-decoration: none; cursor: pointer;
  transition: color var(--mn-duration) var(--mn-ease), background-color var(--mn-duration) var(--mn-ease);
}
.mn-dock-item svg { width: 1.25rem; height: 1.25rem; }
.mn-dock-item:hover { color: var(--mn-fg); background: var(--mn-hover); }
.mn-dock-item[aria-current="page"] { color: var(--mn-primary-text); }
.mn-dock-item[aria-current="page"] svg { transform: translateY(-1px); }
.mn-dock-item:focus-visible { outline: none; box-shadow: var(--mn-focus); }
.mn-dock-compact .mn-dock-item > span { display: none; }

/* @component scroll-area */
.mn-scroll-area {
  --_bg: var(--mn-card);
  overflow: auto; overscroll-behavior: contain;
  max-height: var(--h, 16rem);
  border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box);
  scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--mn-fg) 25%, transparent) transparent;
  /* Scroll shadows: the covers move with the content, the shadows stay. */
  background:
    linear-gradient(var(--_bg) 30%, transparent) center top / 100% 2rem no-repeat local,
    linear-gradient(transparent, var(--_bg) 70%) center bottom / 100% 2rem no-repeat local,
    radial-gradient(farthest-side at 50% 0, color-mix(in oklab, var(--mn-fg) 14%, transparent), transparent) center top / 100% .6rem no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, color-mix(in oklab, var(--mn-fg) 14%, transparent), transparent) center bottom / 100% .6rem no-repeat scroll,
    var(--_bg);
}
.mn-scroll-area:focus-visible { outline: none; box-shadow: var(--mn-focus); }
.mn-scroll-area::-webkit-scrollbar { width: 8px; height: 8px; }
.mn-scroll-area::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: color-mix(in oklab, var(--mn-fg) 25%, transparent) padding-box; }
.mn-scroll-area-x { max-height: none; overflow-y: hidden; white-space: nowrap; }

/* @component mockup */
.mn-mockup-browser, .mn-mockup-window {
  width: 100%; overflow: hidden;
  border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box);
  background: var(--mn-card); box-shadow: var(--mn-shadow-lg);
}
.mn-mockup-bar { display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; border-bottom: var(--mn-border-w) solid var(--mn-border); background: var(--mn-surface-2); }
.mn-mockup-bar::before { content: ""; flex: none; width: 2.6rem; height: .7rem; background: radial-gradient(circle, var(--mn-input) 0 .3rem, transparent .32rem) 0 0 / .95rem .7rem repeat-x; }
.mn-mockup-url { flex: 1; min-width: 0; max-width: 28rem; margin-inline: auto; padding: .3rem .75rem; border-radius: 999px; background: var(--mn-card); color: var(--mn-muted); font: 400 .75rem/1.2 var(--mn-font); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-mockup-body { padding: 1.25rem; }
.mn-mockup-window .mn-mockup-body { background: var(--mn-fg); color: var(--mn-bg); font: 400 .8125rem/1.7 var(--mn-font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.mn-mockup-window .mn-mockup-bar { justify-content: flex-start; color: var(--mn-muted); font: 500 .75rem/1 var(--mn-font); }
.mn-mockup-phone {
  --_w: 17rem;
  position: relative; width: min(var(--_w), 100%); aspect-ratio: 9 / 19; padding: .6rem;
  border-radius: 2.6rem; background: var(--mn-fg); box-shadow: var(--mn-shadow-lg);
}
.mn-mockup-phone::before { content: ""; position: absolute; z-index: 1; top: 1.05rem; left: 50%; width: 30%; height: 1.35rem; translate: -50% 0; border-radius: 999px; background: var(--mn-fg); }
.mn-mockup-screen { width: 100%; height: 100%; overflow: hidden; border-radius: 2.05rem; background: var(--mn-bg); color: var(--mn-fg); }

}

@layer mian.components {

/* @component alert */
.mn-alert {
  /* Role props do not inherit, so copy them into ordinary ones the
     title and icon can read. */
  --_a: var(--_c, var(--mn-info)); --_at: var(--_ct, var(--mn-info-text)); --_af: var(--_cf, var(--mn-info-fg));
  display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: .25rem .75rem;
  padding: .9rem 1rem;
  border: var(--mn-border-w) solid color-mix(in oklab, var(--_a) 30%, var(--mn-border));
  border-radius: var(--mn-radius-box);
  background: color-mix(in oklab, var(--_a) 8%, var(--mn-surface));
  color: var(--mn-fg); font-size: var(--mn-text-sm); line-height: 1.55;
}
.mn-alert:not(:has(> .mn-alert-icon)) { grid-template-columns: 1fr auto; }
.mn-alert-icon { grid-row: span 2; display: flex; color: var(--_at); padding-top: .1rem; }
.mn-alert-icon svg { width: 1.15rem; height: 1.15rem; }
.mn-alert-title { margin: 0; font-weight: 600; color: var(--_at); }
.mn-alert-desc { margin: 0; grid-column: -3 / -2; color: color-mix(in oklab, var(--mn-fg) 82%, var(--_at)); }
.mn-alert:not(:has(> .mn-alert-icon)) .mn-alert-desc { grid-column: 1; }
.mn-alert-actions { grid-row: 1 / span 2; grid-column: -2; display: flex; gap: .4rem; align-items: center; }
.mn-alert-solid { background: var(--_a); border-color: var(--_a); color: var(--_af); }
.mn-alert-solid :is(.mn-alert-title, .mn-alert-icon, .mn-alert-desc) { color: var(--_af); }
.mn-alert-neutral { --_a: var(--mn-fg); --_at: var(--mn-fg); background: var(--mn-surface); border-color: var(--mn-border); }

/* @component toast */
.mn-toaster {
  position: fixed; z-index: 100; inset-block-end: 1rem; inset-inline-end: 1rem;
  display: flex; flex-direction: column-reverse; gap: .6rem;
  width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}
.mn-toaster[data-position="top-right"] { inset-block: 1rem auto; flex-direction: column; }
.mn-toaster[data-position="top-center"] { inset-block: 1rem auto; inset-inline: 50% auto; translate: -50% 0; flex-direction: column; }
.mn-toaster[data-position="bottom-center"] { inset-inline: 50% auto; translate: -50% 0; }
.mn-toast {
  --_t: var(--_ct, var(--mn-fg));
  pointer-events: auto;
  display: grid; grid-template-columns: auto 1fr auto; gap: .15rem .7rem; align-items: start;
  padding: .85rem .9rem;
  border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box);
  background: var(--mn-popover); color: var(--mn-fg);
  box-shadow: var(--mn-shadow-lg);
  font-size: var(--mn-text-sm); line-height: 1.45;
  animation: var(--mn-enter) calc(var(--mn-enter-duration) + 40ms) var(--mn-ease-enter);
}
.mn-toast:not(:has(.mn-toast-icon)) { grid-template-columns: 1fr auto; }
.mn-toast[data-leaving] { animation: mn-toast-out 180ms var(--mn-ease) forwards; }
.mn-toast-icon { grid-row: span 2; color: var(--_t); padding-top: .1rem; display: flex; }
.mn-toast-icon svg { width: 1.1rem; height: 1.1rem; }
.mn-toast-title { font-weight: 600; }
.mn-toast-desc { color: var(--mn-muted); grid-column: -3 / -2; }
.mn-toast:not(:has(.mn-toast-icon)) .mn-toast-desc { grid-column: 1; }
.mn-toast-close { grid-row: 1 / span 2; grid-column: -2; align-self: start; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin: -.2rem -.3rem 0 0; border: 0; border-radius: 6px; background: none; color: var(--mn-muted); cursor: pointer; }
.mn-toast-close:hover { background: var(--mn-hover); color: var(--mn-fg); }
.mn-toast-close:focus-visible { outline: none; box-shadow: var(--mn-focus); }
.mn-toast-close svg { width: .9rem; height: .9rem; }
.mn-toast-action { margin-top: .5rem; grid-column: -3 / -2; justify-self: start; }
@keyframes mn-toast-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes mn-toast-out { to { opacity: 0; transform: translateX(16px); } }

/* @component progress */
.mn-progress {
  --_v: 0%;
  --_p: var(--_c, var(--mn-primary));
  position: relative; display: block; width: 100%; height: .5rem;
  border-radius: 999px; background: var(--mn-surface-2); overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mn-input) 45%, transparent);
}
.mn-progress::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--_v);
  border-radius: inherit; background: var(--_p);
  transition: width 300ms var(--mn-ease);
}
.mn-progress:not([aria-valuenow])::after { width: auto; left: 0; right: 100%; animation: mn-indeterminate 1.4s var(--mn-ease) infinite; }
.mn-progress-sm { height: .3rem; } .mn-progress-lg { height: .8rem; }
.mn-progress-label { display: flex; justify-content: space-between; margin-bottom: .45rem; font-size: var(--mn-text-sm); }
.mn-progress-label span:last-child { color: var(--mn-muted); font-variant-numeric: tabular-nums; }
/* The sweep never leaves the track, so skins may drop overflow: hidden. */
@keyframes mn-indeterminate { 0% { left: 0; right: 100%; } 50% { left: 15%; right: 25%; } 100% { left: 100%; right: 0; } }
@media (prefers-reduced-motion: reduce) { .mn-progress:not([aria-valuenow])::after { animation: none; left: 0; right: 0; opacity: .35; } }

/* @component radial-progress */
.mn-radial {
  --_v: 0; --_s: 4.5rem; --_t: .45rem;
  position: relative; display: inline-grid; place-items: center;
  width: var(--_s); height: var(--_s); border-radius: 50%;
  background: conic-gradient(var(--_c, var(--mn-primary)) calc(var(--_v) * 1%), var(--mn-surface-2) 0);
  font: 650 calc(var(--_s) * .22)/1 var(--mn-font); font-variant-numeric: tabular-nums;
}
.mn-radial::before { content: ""; position: absolute; inset: var(--_t); border-radius: 50%; background: var(--mn-bg); }
.mn-radial > * { position: relative; }
.mn-radial-sm { --_s: 3rem; --_t: .3rem; } .mn-radial-lg { --_s: 6.5rem; --_t: .6rem; }

/* @component spinner */
.mn-spinner {
  --_s: 1.25rem;
  display: inline-block; width: var(--_s); height: var(--_s); flex: none;
  border: 2px solid color-mix(in oklab, var(--_c, currentColor) 20%, transparent);
  border-top-color: var(--_c, currentColor);
  border-radius: 50%; animation: mn-spin .7s linear infinite; vertical-align: middle;
}
.mn-spinner-sm { --_s: .9rem; } .mn-spinner-lg { --_s: 2rem; border-width: 3px; }
.mn-dots { --_d: var(--_c, currentColor); display: inline-flex; gap: .25rem; }
.mn-dots > span { width: .4rem; height: .4rem; border-radius: 50%; background: var(--_d); animation: mn-bounce 1s var(--mn-ease) infinite; }
.mn-dots > span:nth-child(2) { animation-delay: .15s; } .mn-dots > span:nth-child(3) { animation-delay: .3s; }
@keyframes mn-bounce { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .mn-spinner { animation-duration: 2s; } .mn-dots > span { animation: none; opacity: .6; } }
}

@layer mian.components {

/* @component field */
.mn-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.mn-label { font: 500 var(--mn-text-sm)/1.3 var(--mn-font); color: var(--mn-fg); }
.mn-label .mn-req { color: var(--mn-danger-text); margin-inline-start: 2px; }
.mn-hint { margin: 0; font-size: calc(var(--mn-text-sm) - 1px); line-height: 1.45; color: var(--mn-muted); }
.mn-error { margin: 0; font-size: calc(var(--mn-text-sm) - 1px); line-height: 1.45; color: var(--mn-danger-text); }
.mn-fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.mn-fieldset > legend { padding: 0; margin-bottom: .6rem; font: 600 var(--mn-text-sm)/1.3 var(--mn-font); }
.mn-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; align-content: start; }
.mn-form-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }

/* @component input */
.mn-input, .mn-textarea, .mn-select {
  --_h: var(--mn-size-md);
  display: block; width: 100%; min-width: 0;
  height: var(--_h);
  padding: 0 .75rem;
  border: var(--mn-border-w) solid var(--mn-input);
  border-radius: var(--mn-radius-field);
  background: var(--mn-surface);
  color: var(--mn-fg);
  font: 400 var(--mn-text-sm)/1.4 var(--mn-font);
  box-shadow: var(--mn-shadow-sm);
  transition: border-color var(--mn-duration) var(--mn-ease), box-shadow var(--mn-duration) var(--mn-ease);
  appearance: none; -webkit-appearance: none;
}
.mn-input::placeholder, .mn-textarea::placeholder { color: var(--mn-muted); opacity: .85; }
.mn-input:hover, .mn-textarea:hover, .mn-select:hover { border-color: color-mix(in oklab, var(--mn-input), var(--mn-fg) 20%); }
.mn-input:focus, .mn-textarea:focus, .mn-select:focus { outline: none; border-color: var(--mn-ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mn-ring) 25%, transparent); }
.mn-input:disabled, .mn-textarea:disabled, .mn-select:disabled { opacity: .55; cursor: not-allowed; background: var(--mn-surface-2); }
.mn-input[aria-invalid="true"], .mn-textarea[aria-invalid="true"], .mn-select[aria-invalid="true"] { border-color: var(--mn-danger); }
.mn-input[aria-invalid="true"]:focus, .mn-textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--mn-danger) 22%, transparent); }
.mn-input-sm, .mn-select.mn-input-sm { --_h: var(--mn-size-sm); padding: 0 .6rem; font-size: calc(var(--mn-text-sm) - 1px); }
.mn-input-lg, .mn-select.mn-input-lg { --_h: var(--mn-size-lg); padding: 0 1rem; font-size: calc(var(--mn-text-sm) + 1px); }
.mn-input[type="date"], .mn-input[type="time"], .mn-input[type="datetime-local"] { padding-inline-end: .5rem; }
.mn-input[type="color"] { padding: 3px; width: var(--_h); cursor: pointer; }
.mn-input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* @component textarea */
.mn-textarea { height: auto; min-height: calc(var(--mn-size-md) * 2.2); padding: .6rem .75rem; resize: vertical; field-sizing: content; max-height: 24rem; }

/* @component select */
.mn-select {
  padding-inline-end: 2.25rem; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mn-muted) 50%),
    linear-gradient(135deg, var(--mn-muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.mn-select.mn-input-sm, .mn-select.mn-input-lg { padding-inline-end: 2.1rem; }
.mn-select.mn-input-sm { background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; }
.mn-select[multiple] { height: auto; padding: .35rem; background-image: none; }
.mn-select option { color: var(--mn-fg); background: var(--mn-surface); }

/* @component checkbox */
.mn-checkbox, .mn-radio {
  --_s: 1.1rem;
  --_on: var(--_c, var(--mn-primary)); --_onf: var(--_cf, var(--mn-primary-fg));
  appearance: none; -webkit-appearance: none;
  display: inline-grid; place-content: center; flex: none;
  width: var(--_s); height: var(--_s); margin: 0;
  border: var(--mn-border-w) solid var(--mn-input);
  border-radius: min(5px, var(--mn-radius-field));
  background: var(--mn-surface);
  cursor: pointer; vertical-align: middle;
  box-shadow: var(--mn-shadow-sm);
  transition: background-color var(--mn-duration) var(--mn-ease), border-color var(--mn-duration) var(--mn-ease);
}
.mn-checkbox::before {
  content: ""; width: .62em; height: .62em;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  background: var(--_onf);
  transform: scale(0); transition: transform var(--mn-duration) var(--mn-ease);
}
.mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background: var(--_on); border-color: var(--_on); }
.mn-checkbox:checked::before { transform: scale(1); }
.mn-checkbox:indeterminate::before { clip-path: none; height: 2px; width: .55em; transform: scale(1); }
.mn-checkbox:focus-visible, .mn-radio:focus-visible { outline: none; box-shadow: var(--mn-focus); }
.mn-checkbox:disabled, .mn-radio:disabled { opacity: .5; cursor: not-allowed; }
.mn-checkbox[aria-invalid="true"], .mn-radio[aria-invalid="true"] { border-color: var(--mn-danger); }
.mn-check {
  display: inline-flex; align-items: flex-start; gap: .6rem;
  font: 400 var(--mn-text-sm)/1.4 var(--mn-font); cursor: pointer;
}
.mn-check > input { margin-top: .12em; }
.mn-check:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.mn-check .mn-hint { margin-top: .15rem; }

/* @component radio */
.mn-radio { border-radius: 50%; }
.mn-radio::before {
  content: ""; width: .44em; height: .44em; border-radius: 50%;
  background: var(--_onf);
  transform: scale(0); transition: transform var(--mn-duration) var(--mn-ease);
}
.mn-radio:checked::before { transform: scale(1); }

/* @component switch */
.mn-switch {
  --_w: 2.3rem; --_hh: 1.3rem;
  --_on: var(--_c, var(--mn-primary)); --_onf: var(--_cf, var(--mn-primary-fg));
  appearance: none; -webkit-appearance: none; flex: none;
  position: relative; display: inline-block;
  width: var(--_w); height: var(--_hh); margin: 0;
  border: 0; border-radius: 999px;
  background: var(--mn-input);
  cursor: pointer; vertical-align: middle;
  transition: background-color var(--mn-duration) var(--mn-ease);
}
.mn-switch::before {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: calc(var(--_hh) - 4px); height: calc(var(--_hh) - 4px);
  border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / .25);
  transition: transform var(--mn-duration) var(--mn-ease);
}
.mn-switch:checked { background: var(--_on); }
.mn-switch:checked::before { transform: translateX(calc(var(--_w) - var(--_hh))); background: var(--_onf); }
.mn-switch:focus-visible { outline: none; box-shadow: var(--mn-focus); }
.mn-switch:disabled { opacity: .5; cursor: not-allowed; }
.mn-switch-sm { --_w: 1.9rem; --_hh: 1.1rem; }
.mn-switch-lg { --_w: 2.8rem; --_hh: 1.6rem; }

/* @component slider */
.mn-slider {
  --_v: 50%;
  --_on: var(--_c, var(--mn-primary));
  --_track: 6px; --_thumb: 1.15rem;
  appearance: none; -webkit-appearance: none;
  width: 100%; height: var(--_thumb); margin: 0;
  background: transparent; cursor: pointer;
}
.mn-slider::-webkit-slider-runnable-track {
  height: var(--_track); border-radius: 999px;
  background: linear-gradient(to right, var(--_on) var(--_v), var(--mn-surface-2) var(--_v));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mn-input) 60%, transparent);
}
.mn-slider::-moz-range-track { height: var(--_track); border-radius: 999px; background: var(--mn-surface-2); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mn-input) 60%, transparent); }
.mn-slider::-moz-range-progress { height: var(--_track); border-radius: 999px; background: var(--_on); }
.mn-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: var(--_thumb); height: var(--_thumb); margin-top: calc((var(--_track) - var(--_thumb)) / 2);
  border-radius: 50%; border: 2px solid var(--_on); background: var(--mn-surface);
  box-shadow: 0 1px 3px rgb(0 0 0 / .2);
  transition: transform var(--mn-duration) var(--mn-ease);
}
.mn-slider::-moz-range-thumb {
  width: var(--_thumb); height: var(--_thumb); box-sizing: border-box;
  border-radius: 50%; border: 2px solid var(--_on); background: var(--mn-surface);
  box-shadow: 0 1px 3px rgb(0 0 0 / .2);
}
.mn-slider:active::-webkit-slider-thumb { transform: scale(1.12); }
.mn-slider:focus-visible { outline: none; }
.mn-slider:focus-visible::-webkit-slider-thumb { box-shadow: var(--mn-focus); }
.mn-slider:focus-visible::-moz-range-thumb { box-shadow: var(--mn-focus); }
.mn-slider:disabled { opacity: .5; cursor: not-allowed; }

/* @component file-input */
.mn-file {
  display: block; width: 100%;
  border: var(--mn-border-w) solid var(--mn-input); border-radius: var(--mn-radius-field);
  background: var(--mn-surface); color: var(--mn-muted);
  font: 400 var(--mn-text-sm)/1 var(--mn-font);
  box-shadow: var(--mn-shadow-sm);
  cursor: pointer;
}
.mn-file::file-selector-button {
  height: calc(var(--mn-size-md) - 2px); margin-inline-end: .75rem; padding: 0 .9rem;
  border: 0; border-inline-end: var(--mn-border-w) solid var(--mn-input);
  background: var(--mn-surface-2); color: var(--mn-fg);
  font: 500 var(--mn-text-sm)/1 var(--mn-font); cursor: pointer;
}
.mn-file:hover::file-selector-button { background: color-mix(in oklab, var(--mn-surface-2), var(--mn-fg) 6%); }
.mn-file:focus-visible { outline: none; box-shadow: var(--mn-focus); }
.mn-dropzone {
  display: grid; place-items: center; gap: .5rem; padding: 2rem 1rem;
  border: 2px dashed var(--mn-input); border-radius: var(--mn-radius-box);
  background: var(--mn-surface); color: var(--mn-muted); text-align: center;
  font-size: var(--mn-text-sm); cursor: pointer;
  transition: border-color var(--mn-duration) var(--mn-ease), background-color var(--mn-duration) var(--mn-ease);
}
.mn-dropzone:hover, .mn-dropzone[data-over] { border-color: var(--mn-ring); background: var(--mn-hover); }
.mn-dropzone:has(input:focus-visible) { box-shadow: var(--mn-focus); }
.mn-dropzone svg { width: 1.75rem; height: 1.75rem; }
.mn-dropzone strong { color: var(--mn-fg); font-weight: 600; }
.mn-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* @component input-group */
.mn-input-group {
  display: flex; align-items: stretch; width: 100%;
  height: var(--mn-size-md);
  border: var(--mn-border-w) solid var(--mn-input); border-radius: var(--mn-radius-field);
  background: var(--mn-surface); box-shadow: var(--mn-shadow-sm);
  overflow: hidden;
  transition: border-color var(--mn-duration) var(--mn-ease), box-shadow var(--mn-duration) var(--mn-ease);
}
.mn-input-group:focus-within { border-color: var(--mn-ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mn-ring) 25%, transparent); }
.mn-input-group > .mn-input { height: 100%; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.mn-input-group > .mn-input:focus { box-shadow: none; }
.mn-addon {
  display: inline-flex; align-items: center; gap: .4rem; flex: none;
  padding: 0 .75rem;
  background: var(--mn-surface-2); color: var(--mn-muted);
  font: 400 var(--mn-text-sm)/1 var(--mn-font); white-space: nowrap;
}
.mn-addon:first-child { border-inline-end: var(--mn-border-w) solid var(--mn-input); }
.mn-addon:last-child { border-inline-start: var(--mn-border-w) solid var(--mn-input); }
.mn-addon-plain { background: transparent; border: 0 !important; padding-inline: .7rem .1rem; }
.mn-addon-plain:last-child { padding-inline: .1rem .7rem; }
.mn-addon svg { width: 1rem; height: 1rem; }
.mn-input-group > .mn-btn { height: 100%; border-radius: 0; box-shadow: none; }
/* A bare icon as a direct child is a plain leading (or trailing) addon. */
.mn-input-group > svg { flex: none; align-self: center; width: 1rem; height: 1rem; margin-inline: .75rem -.2rem; color: var(--mn-muted); }
.mn-input-group > svg:last-child { margin-inline: -.2rem .75rem; }

/* @component number-input */
.mn-number { display: inline-flex; align-items: stretch; height: var(--mn-size-md); max-width: 100%;
  border: var(--mn-border-w) solid var(--mn-input); border-radius: var(--mn-radius-field);
  background: var(--mn-surface); box-shadow: var(--mn-shadow-sm); overflow: hidden; }
.mn-number:focus-within { border-color: var(--mn-ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mn-ring) 25%, transparent); }
.mn-number > input {
  width: 4.5rem; min-width: 0; border: 0; padding: 0 .5rem; background: transparent; color: var(--mn-fg);
  font: 500 var(--mn-text-sm)/1 var(--mn-font); text-align: center; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.mn-number > input::-webkit-inner-spin-button, .mn-number > input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.mn-number > input:focus { outline: none; }
.mn-number > button {
  display: grid; place-items: center; width: var(--mn-size-md); flex: none;
  border: 0; background: var(--mn-surface-2); color: var(--mn-fg); cursor: pointer; font-size: 1.1rem;
}
.mn-number > button:hover { background: color-mix(in oklab, var(--mn-surface-2), var(--mn-fg) 7%); }
.mn-number > button:disabled { opacity: .4; cursor: not-allowed; }
.mn-number > button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mn-ring); }
.mn-number > button svg { width: 1rem; height: 1rem; }

/* @component otp-input */
.mn-otp { display: inline-flex; gap: .5rem; align-items: center; max-width: 100%; }
.mn-otp > input {
  flex: 0 1 auto; min-width: 0;
  width: calc(var(--mn-size-md) + 4px); height: calc(var(--mn-size-md) + 8px); padding: 0;
  border: var(--mn-border-w) solid var(--mn-input); border-radius: var(--mn-radius-field);
  background: var(--mn-surface); color: var(--mn-fg); box-shadow: var(--mn-shadow-sm);
  font: 600 calc(var(--mn-text-sm) + 4px)/1 var(--mn-font-mono); text-align: center;
  caret-color: var(--mn-ring);
}
.mn-otp > input:focus { outline: none; border-color: var(--mn-ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mn-ring) 25%, transparent); }
.mn-otp-sep { color: var(--mn-muted); }

/* @component rating */
.mn-rating { --_r: var(--_c, #f59e0b); display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; border: 0; margin: 0; padding: 0; }
.mn-rating > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mn-rating > label {
  width: 1.5rem; height: 1.5rem; cursor: pointer;
  background: var(--mn-input);
  clip-path: polygon(50% 0, 61.8% 35.3%, 100% 35.3%, 69.1% 57.1%, 80.9% 92.7%, 50% 70.8%, 19.1% 92.7%, 30.9% 57.1%, 0 35.3%, 38.2% 35.3%);
  transition: background-color var(--mn-duration) var(--mn-ease), transform var(--mn-duration) var(--mn-ease);
}
.mn-rating > input:checked ~ label,
.mn-rating:not(:has(input:disabled)) > label:hover, .mn-rating:not(:has(input:disabled)) > label:hover ~ label { background: var(--_r); }
.mn-rating:not(:has(input:disabled)) > label:hover { transform: scale(1.1); }
.mn-rating > input:focus-visible + label { outline: 2px solid var(--mn-ring); outline-offset: 2px; }
.mn-rating-sm > label { width: 1.1rem; height: 1.1rem; }
.mn-rating-lg > label { width: 2rem; height: 2rem; }

/* @component combobox */
.mn-combobox { position: relative; }
.mn-combobox > .mn-input { padding-inline-end: 2.25rem; }
.mn-combobox-toggle {
  position: absolute; inset-block: 0; inset-inline-end: 0; width: 2.25rem;
  display: grid; place-items: center; border: 0; background: none; color: var(--mn-muted); cursor: pointer;
  border-radius: 0 var(--mn-radius-field) var(--mn-radius-field) 0;
}
.mn-combobox-toggle svg { width: 1rem; height: 1rem; transition: transform var(--mn-duration) var(--mn-ease); }
.mn-combobox[data-open] .mn-combobox-toggle svg { transform: rotate(180deg); }
.mn-combobox-list {
  position: absolute; z-index: 50; inset-inline: 0; top: calc(100% + 4px);
  max-height: 16rem; overflow: auto; margin: 0; padding: 4px; list-style: none;
  border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box);
  background: var(--mn-popover); box-shadow: var(--mn-shadow-lg);
  font: 400 var(--mn-text-sm)/1.4 var(--mn-font);
}
.mn-combobox-list[hidden] { display: none; }
.mn-combobox-list > [role="option"] {
  display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem;
  border-radius: calc(var(--mn-radius-box) - 4px); cursor: pointer;
}
.mn-combobox-list > [role="option"][data-active] { background: var(--mn-hover); }
.mn-combobox-list > [role="option"][aria-selected="true"] { font-weight: 600; }
.mn-combobox-list > [role="option"][aria-selected="true"]::after { content: "✓"; margin-inline-start: auto; }
.mn-combobox-list > [role="option"][hidden] { display: none; }
.mn-combobox-empty { padding: .6rem; color: var(--mn-muted); text-align: center; }
}

@layer mian.components {

/* @component collapse */
.mn-collapse { border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-card); overflow: hidden; }
.mn-collapse-content { padding: 0 1.15rem 1.1rem; font-size: var(--mn-text-sm); line-height: 1.65; color: var(--mn-muted); }
.mn-collapse-plain { border: 0; background: none; }
.mn-collapse-plain > summary { padding-inline: 0; }
.mn-collapse-plain > summary:hover { background: none; }
.mn-collapse-plain > .mn-collapse-content { padding-inline: 0; }

/* @component carousel */
.mn-carousel { position: relative; }
.mn-carousel-track {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain;
  border-radius: var(--mn-radius-box);
}
.mn-carousel-track::-webkit-scrollbar { display: none; }
.mn-carousel-track:focus-visible { outline: none; box-shadow: var(--mn-focus); }
.mn-carousel-item { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; }
.mn-carousel-peek .mn-carousel-item { flex-basis: 82%; }
.mn-carousel-multi .mn-carousel-item { flex-basis: calc((100% - 2rem) / 3); }
@media (max-width: 40rem) { .mn-carousel-multi .mn-carousel-item { flex-basis: 82%; } }
.mn-carousel-prev, .mn-carousel-next {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 1;
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border: var(--mn-border-w) solid var(--mn-border); border-radius: 50%;
  background: var(--mn-popover); color: var(--mn-fg); box-shadow: var(--mn-shadow-md); cursor: pointer;
}
.mn-carousel-prev { left: .6rem; } .mn-carousel-next { right: .6rem; }
.mn-carousel-prev:disabled, .mn-carousel-next:disabled { opacity: 0; pointer-events: none; }
.mn-carousel-prev:focus-visible, .mn-carousel-next:focus-visible { outline: none; box-shadow: var(--mn-focus); }
.mn-carousel-prev svg, .mn-carousel-next svg { width: 1rem; height: 1rem; }
.mn-carousel-dots { display: flex; justify-content: center; gap: .4rem; margin-top: .75rem; }
.mn-carousel-dots button { width: .5rem; height: .5rem; padding: 0; border: 0; border-radius: 999px; background: var(--mn-input); cursor: pointer; transition: width var(--mn-duration) var(--mn-ease), background-color var(--mn-duration) var(--mn-ease); }
.mn-carousel-dots button[aria-current="true"] { width: 1.25rem; background: var(--mn-fg); }
.mn-carousel-dots button:focus-visible { outline: none; box-shadow: var(--mn-focus); }
@media (prefers-reduced-motion: reduce) { .mn-carousel-track { scroll-behavior: auto; } }

/* @component theme-controller */
.mn-swatch {
  display: inline-grid; grid-template-columns: repeat(2, .55rem); gap: 2px; padding: 3px;
  border-radius: 5px; background: var(--mn-bg); box-shadow: 0 0 0 1px var(--mn-border);
}
.mn-swatch > i { width: .55rem; height: .55rem; border-radius: 2px; }
.mn-swatch > i:nth-child(1) { background: var(--mn-primary); }
.mn-swatch > i:nth-child(2) { background: var(--mn-accent); }
.mn-swatch > i:nth-child(3) { background: var(--mn-fg); }
.mn-swatch > i:nth-child(4) { background: var(--mn-surface-2); }
}

/* MIAN — booking, SaaS, sales, commerce, social, loaders and presentation. */
@layer mian.components {

/* @component time-slots */
.mn-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .5rem; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.mn-slots > legend { grid-column: 1 / -1; float: left; width: 100%; margin: 0 0 .6rem; padding: 0; font: 500 var(--mn-text-sm)/1.3 var(--mn-font); color: var(--mn-fg); }
.mn-slot {
  position: relative; display: grid; place-items: center; align-content: center; gap: .1rem; min-height: var(--mn-size-lg); padding: .35rem .5rem;
  border: var(--mn-border-w) solid var(--mn-input); border-radius: var(--mn-radius-field); background: var(--mn-surface); color: var(--mn-fg);
  font: 500 var(--mn-text-sm)/1.2 var(--mn-font); font-variant-numeric: tabular-nums; text-align: center; cursor: pointer;
  transition: background-color var(--mn-duration) var(--mn-ease), border-color var(--mn-duration) var(--mn-ease), color var(--mn-duration) var(--mn-ease);
}
.mn-slot > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
.mn-slot small { color: var(--mn-muted); font-size: .6875rem; font-weight: 400; }
.mn-slot-few small { color: var(--mn-warning-text); }
.mn-slot:hover { border-color: var(--mn-fg); }
.mn-slot:has(input:checked) { border-color: var(--mn-primary); background: var(--mn-primary); color: var(--mn-primary-fg); }
.mn-slot:has(input:checked) small { color: inherit; opacity: .85; }
.mn-slot:has(input:focus-visible) { outline: 2px solid var(--mn-ring); outline-offset: 2px; }
.mn-slot:has(input:disabled) { cursor: not-allowed; border-color: transparent; background: var(--mn-surface-2); color: var(--mn-muted); text-decoration: line-through; }

/* @component seat-map */
.mn-seatmap { display: grid; gap: 1rem; justify-items: safe center; max-width: 100%; overflow-x: auto; }
.mn-seatmap-screen { width: min(80%, 22rem); padding-top: .5rem; border-top: 4px solid var(--mn-input); border-radius: 50% 50% 0 0 / 12px 12px 0 0; color: var(--mn-muted); font-size: .75rem; text-align: center; }
.mn-seats { display: grid; gap: .35rem; margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.mn-seat-row { display: flex; align-items: center; gap: clamp(.2rem, 1.2vw, .35rem); }
.mn-seat-row > span { flex: none; width: 1.25rem; color: var(--mn-muted); font: 500 .75rem/1 var(--mn-font-mono); text-align: center; }
.mn-seat-aisle { width: .9rem; flex: none; }
.mn-seat { position: relative; display: inline-block; flex: 0 1 1.7rem; min-width: 1.2rem; width: 1.7rem; height: 1.55rem; border: var(--mn-border-w) solid var(--mn-input); border-radius: 7px 7px 3px 3px; background: var(--mn-surface); cursor: pointer; transition: background-color var(--mn-duration) var(--mn-ease); }
.mn-seat > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
.mn-seat:hover { border-color: var(--mn-fg); }
.mn-seat:has(input:checked) { border-color: var(--mn-primary); background: var(--mn-primary); }
.mn-seat:has(input:focus-visible) { outline: 2px solid var(--mn-ring); outline-offset: 2px; }
.mn-seat:has(input:disabled), .mn-seat-taken { cursor: not-allowed; border-color: transparent; background: repeating-linear-gradient(45deg, var(--mn-surface-2) 0 3px, color-mix(in oklab, var(--mn-fg) 14%, var(--mn-surface-2)) 3px 5px); }
.mn-seat-accessible { box-shadow: inset 0 -3px 0 var(--mn-info); }
.mn-seatmap-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; color: var(--mn-muted); font-size: .8125rem; }
.mn-seatmap-legend > span { display: inline-flex; align-items: center; gap: .45rem; }
.mn-seatmap-legend .mn-seat { flex: none; min-width: 0; width: 1.1rem; height: 1rem; cursor: default; }

/* @component kanban */
.mn-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: 1rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x proximity; }
.mn-kanban-col { display: flex; flex-direction: column; gap: .6rem; min-width: 0; padding: .7rem; border-radius: var(--mn-radius-box); background: var(--mn-surface-2); scroll-snap-align: start; }
.mn-kanban-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0; padding: .1rem .3rem .3rem; font: 600 var(--mn-text-sm)/1.2 var(--mn-font); color: var(--mn-fg); }
.mn-kanban-head > span:first-child { display: inline-flex; align-items: center; gap: .5rem; }
.mn-kanban-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--_c, var(--mn-muted)); }
.mn-kanban-list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.mn-kanban-card { display: grid; gap: .55rem; padding: .8rem .9rem; font-size: var(--mn-text-sm); line-height: 1.45; }
.mn-kanban-card > * { margin: 0; }
.mn-kanban-card > strong { font-weight: 600; }
.mn-kanban-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: var(--mn-muted); font-size: .75rem; }
.mn-kanban-add { justify-content: flex-start; color: var(--mn-muted); }

/* @component usage-meter */
.mn-meters { display: grid; gap: 1.25rem; }
.mn-meter { display: grid; gap: .45rem; }
.mn-meter > * { margin: 0; }
.mn-meter-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; font-size: var(--mn-text-sm); }
.mn-meter-head > :first-child { font-weight: 600; }
.mn-meter-head > :last-child { color: var(--mn-muted); font-variant-numeric: tabular-nums; }
.mn-meter-note { color: var(--mn-muted); font-size: .8125rem; }
.mn-meter .mn-warning ~ .mn-meter-note, .mn-meter:has(.mn-warning) .mn-meter-note { color: var(--mn-warning-text); }
.mn-meter:has(.mn-danger) .mn-meter-note { color: var(--mn-danger-text); }

/* @component onboarding */
.mn-tasks { display: grid; margin: 0; padding: 0; list-style: none; }
.mn-task { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .2rem .85rem; align-items: start; padding: .9rem 0; border-top: var(--mn-border-w) solid var(--mn-border); }
.mn-task:first-child { border-top: 0; }
.mn-task > * { margin: 0; }
.mn-task-check { display: grid; place-items: center; grid-row: span 2; width: 1.35rem; height: 1.35rem; margin-top: .05rem; border: 1.5px solid var(--mn-input); border-radius: 50%; color: transparent; }
.mn-task-check svg { width: .8rem; height: .8rem; }
.mn-task[data-done] .mn-task-check { border-color: var(--mn-success); background: var(--mn-success); color: var(--mn-success-fg); }
.mn-task-title { font-weight: 600; font-size: .9375rem; line-height: 1.35; }
.mn-task[data-done] .mn-task-title { color: var(--mn-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.mn-task-desc { grid-column: 2; color: var(--mn-muted); font-size: var(--mn-text-sm); line-height: 1.5; }
.mn-task > .mn-btn { grid-column: 3; grid-row: 1 / span 2; align-self: center; }

/* @component notifications */
.mn-notifications { margin: 0; padding: 0; list-style: none; }
.mn-notification { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .15rem .8rem; align-items: start; padding: .9rem 1rem .9rem 1.35rem; border-bottom: var(--mn-border-w) solid var(--mn-border); }
.mn-notification:last-child { border-bottom: 0; }
.mn-notification > .mn-avatar, .mn-notification > .mn-notification-icon { grid-row: span 3; }
.mn-notification-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: color-mix(in oklab, var(--_c, var(--mn-primary)) 14%, var(--mn-surface)); color: var(--_ct, var(--mn-primary-text)); }
.mn-notification-icon svg { width: 1.1rem; height: 1.1rem; }
.mn-notification p { grid-column: 2; margin: 0; font-size: var(--mn-text-sm); line-height: 1.5; }
.mn-notification p strong { font-weight: 600; }
.mn-notification time { grid-column: 3; grid-row: 1; color: var(--mn-muted); font-size: .75rem; white-space: nowrap; }
.mn-notification-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.mn-notification[data-unread] { background: color-mix(in oklab, var(--mn-primary) 4%, transparent); }
.mn-notification[data-unread]::before { content: ""; position: absolute; left: .55rem; top: 1.45rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--mn-primary); }

/* @component invoice */
.mn-invoice { container: mn-invoice / inline-size; display: grid; gap: 2rem; padding: clamp(1.25rem, 4vw, 2.75rem); font-size: var(--mn-text-sm); line-height: 1.55; }
.mn-invoice > * { margin: 0; }
.mn-invoice-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.25rem 2rem; }
.mn-invoice-head h2 { margin: 0 0 .35rem; font: var(--mn-heading-weight) 1.75rem/1.1 var(--mn-font-heading); letter-spacing: -.02em; }
.mn-invoice-head dl { display: grid; grid-template-columns: auto auto; gap: .25rem 1rem; margin: 0; }
.mn-invoice-head dt, .mn-invoice-parties h3 { color: var(--mn-muted); font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.mn-invoice-head dd { margin: 0; font-variant-numeric: tabular-nums; }
.mn-invoice-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1.5rem; }
.mn-invoice-parties h3 { margin: 0 0 .4rem; }
.mn-invoice-parties address { font-style: normal; }
.mn-invoice-totals { display: grid; grid-template-columns: 1fr auto; gap: .45rem 2rem; width: min(100%, 20rem); margin-inline-start: auto; }
.mn-invoice-totals dt { color: var(--mn-muted); }
.mn-invoice-totals dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }
.mn-invoice-totals .mn-invoice-total { padding-top: .6rem; border-top: var(--mn-border-w) solid var(--mn-fg); color: var(--mn-fg); font-size: 1.0625rem; font-weight: 700; }
.mn-invoice-foot { color: var(--mn-muted); font-size: .8125rem; }

/* @component funnel */
.mn-funnel { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.mn-funnel > li { display: grid; grid-template-columns: minmax(5rem, 9rem) minmax(0, 1fr) 4.5rem; gap: .75rem; align-items: center; font-size: var(--mn-text-sm); }
.mn-funnel-bar { display: flex; align-items: center; justify-content: center; width: var(--_v); min-width: 3.5rem; height: 2.25rem; margin-inline: auto; border-radius: min(6px, var(--mn-radius-field)); background: var(--_c, var(--mn-primary)); color: var(--_cf, var(--mn-primary-fg)); font-weight: 650; font-variant-numeric: tabular-nums; }
.mn-funnel > li:nth-child(2) .mn-funnel-bar { opacity: .88; } .mn-funnel > li:nth-child(3) .mn-funnel-bar { opacity: .78; } .mn-funnel > li:nth-child(n+4) .mn-funnel-bar { opacity: .7; }
.mn-funnel-rate { color: var(--mn-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; text-align: end; }
@media (max-width: 30rem) { .mn-funnel > li { grid-template-columns: minmax(0, 1fr) 3.5rem; } .mn-funnel-bar { grid-column: 1 / -1; grid-row: 2; margin-inline: 0; } }

/* @component leaderboard */
.mn-leaderboard { margin: 0; padding: 0; list-style: none; counter-reset: mn-rank; }
.mn-leader { display: grid; grid-template-columns: 2rem auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .7rem 0; border-bottom: var(--mn-border-w) solid var(--mn-border); counter-increment: mn-rank; }
.mn-leader:last-child { border-bottom: 0; }
.mn-leader::before { content: counter(mn-rank); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; color: var(--mn-muted); font: 700 .875rem/1 var(--mn-font); font-variant-numeric: tabular-nums; }
.mn-leader:nth-child(1)::before { background: #f5c542; color: #3b2a00; }
.mn-leader:nth-child(2)::before { background: #d3d9e0; color: #1f2933; }
.mn-leader:nth-child(3)::before { background: #e3a877; color: #3a1d06; }
.mn-leader-name { display: grid; min-width: 0; line-height: 1.3; }
.mn-leader-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mn-leader-name small { color: var(--mn-muted); font-size: .8125rem; }
.mn-leader-value { display: grid; justify-items: end; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.3; }
.mn-leader-value small { color: var(--mn-success-text); font-size: .75rem; font-weight: 500; }

/* @component product-gallery */
.mn-gallery { position: relative; display: grid; gap: .75rem; min-width: 0; }
.mn-gallery > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mn-gallery .mn-gallery-main > * { display: none; }
.mn-gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr)); gap: .5rem; }
.mn-gallery-thumb { display: block; overflow: hidden; border-radius: var(--mn-radius-field); cursor: pointer; opacity: .6; transition: opacity var(--mn-duration) var(--mn-ease); }
.mn-gallery-thumb:hover { opacity: .9; }
.mn-gallery-thumb > .mn-media { border-radius: inherit; }
.mn-gallery:has(> input:nth-of-type(1):checked) .mn-gallery-main > :nth-child(1),
.mn-gallery:has(> input:nth-of-type(2):checked) .mn-gallery-main > :nth-child(2),
.mn-gallery:has(> input:nth-of-type(3):checked) .mn-gallery-main > :nth-child(3),
.mn-gallery:has(> input:nth-of-type(4):checked) .mn-gallery-main > :nth-child(4),
.mn-gallery:has(> input:nth-of-type(5):checked) .mn-gallery-main > :nth-child(5),
.mn-gallery:has(> input:nth-of-type(6):checked) .mn-gallery-main > :nth-child(6) { display: block; animation: var(--mn-enter) var(--mn-enter-duration) var(--mn-ease-enter); }
.mn-gallery:has(> input:nth-of-type(1):checked) .mn-gallery-thumb:nth-child(1),
.mn-gallery:has(> input:nth-of-type(2):checked) .mn-gallery-thumb:nth-child(2),
.mn-gallery:has(> input:nth-of-type(3):checked) .mn-gallery-thumb:nth-child(3),
.mn-gallery:has(> input:nth-of-type(4):checked) .mn-gallery-thumb:nth-child(4),
.mn-gallery:has(> input:nth-of-type(5):checked) .mn-gallery-thumb:nth-child(5),
.mn-gallery:has(> input:nth-of-type(6):checked) .mn-gallery-thumb:nth-child(6) { opacity: 1; box-shadow: 0 0 0 2px var(--mn-bg), 0 0 0 4px var(--mn-fg); }
.mn-gallery:has(> input:nth-of-type(1):focus-visible) .mn-gallery-thumb:nth-child(1),
.mn-gallery:has(> input:nth-of-type(2):focus-visible) .mn-gallery-thumb:nth-child(2),
.mn-gallery:has(> input:nth-of-type(3):focus-visible) .mn-gallery-thumb:nth-child(3),
.mn-gallery:has(> input:nth-of-type(4):focus-visible) .mn-gallery-thumb:nth-child(4),
.mn-gallery:has(> input:nth-of-type(5):focus-visible) .mn-gallery-thumb:nth-child(5),
.mn-gallery:has(> input:nth-of-type(6):focus-visible) .mn-gallery-thumb:nth-child(6) { outline: 2px solid var(--mn-ring); outline-offset: 5px; }

/* @component review-summary */
.mn-stars { --_v: 100%; display: inline-block; width: 5.6em; height: 1.1em; vertical-align: -.15em; background: linear-gradient(90deg, var(--_c, var(--mn-warning)) var(--_v), color-mix(in oklab, var(--mn-fg) 18%, transparent) var(--_v));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.6 2.9 6 6.5.8-4.8 4.5 1.2 6.5L12 17.2l-5.8 3.2 1.2-6.5-4.8-4.5 6.5-.8Z'/%3E%3C/svg%3E") 0 0 / 1.12em 1.1em repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.6 2.9 6 6.5.8-4.8 4.5 1.2 6.5L12 17.2l-5.8 3.2 1.2-6.5-4.8-4.5 6.5-.8Z'/%3E%3C/svg%3E") 0 0 / 1.12em 1.1em repeat-x; }
.mn-reviews { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.5rem; }
.mn-reviews-score { display: grid; gap: .35rem; justify-items: start; }
.mn-reviews-score > * { margin: 0; }
.mn-reviews-score strong { font: var(--mn-heading-weight) 3rem/1 var(--mn-font-heading); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mn-reviews-score small { color: var(--mn-muted); font-size: .8125rem; }
.mn-reviews-bars { flex: 1 1 15rem; display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.mn-reviews-bars li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 2.75rem; gap: .6rem; align-items: center; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.mn-reviews-bars li > :last-child { color: var(--mn-muted); text-align: end; }

/* @component radio-card */
.mn-choices { display: grid; gap: .6rem; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.mn-choices > legend { grid-column: 1 / -1; float: left; width: 100%; margin: 0 0 .6rem; padding: 0; font: 500 var(--mn-text-sm)/1.3 var(--mn-font); }
.mn-choice {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .15rem .8rem; align-items: center;
  padding: .9rem 1rem; border: var(--mn-border-w) solid var(--mn-input); border-radius: var(--mn-radius-box); background: var(--mn-surface); color: var(--mn-fg); cursor: pointer;
  transition: border-color var(--mn-duration) var(--mn-ease), background-color var(--mn-duration) var(--mn-ease), box-shadow var(--mn-duration) var(--mn-ease);
}
.mn-choice > input { grid-row: span 2; }
.mn-choice-title { font-weight: 600; font-size: .9375rem; }
.mn-choice-desc { grid-column: 2; color: var(--mn-muted); font-size: var(--mn-text-sm); line-height: 1.45; }
.mn-choice-meta { grid-column: 3; grid-row: 1 / span 2; font-weight: 600; font-variant-numeric: tabular-nums; }
.mn-choice:hover { border-color: color-mix(in oklab, var(--mn-input), var(--mn-fg) 40%); }
.mn-choice:has(input:checked) { border-color: var(--mn-primary); background: color-mix(in oklab, var(--mn-primary) 5%, var(--mn-surface)); box-shadow: 0 0 0 1px var(--mn-primary); }
.mn-choice:has(input:disabled) { cursor: not-allowed; opacity: .55; }
.mn-choices-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.mn-choices-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.mn-choices-pills > legend { flex: 0 0 100%; }
.mn-choices-pills .mn-choice { display: inline-grid; grid-template-columns: auto; justify-items: center; min-width: 3rem; padding: .5rem .9rem; border-radius: var(--mn-radius-field); }
.mn-choices-pills .mn-choice > input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: inherit; }
.mn-choices-pills .mn-choice:has(input:focus-visible) { outline: 2px solid var(--mn-ring); outline-offset: 2px; }
.mn-choices-pills .mn-choice:has(input:checked) { background: var(--mn-primary); color: var(--mn-primary-fg); }
.mn-choices-pills .mn-choice:has(input:disabled) { text-decoration: line-through; }

/* @component post */
.mn-post { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .8rem; padding: 1rem 1.1rem .6rem; }
.mn-post > .mn-avatar { grid-row: span 4; }
.mn-post > :not(.mn-avatar) { grid-column: 2; min-width: 0; margin: 0; }
.mn-post-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .4rem; font-size: var(--mn-text-sm); line-height: 1.3; }
.mn-post-head strong { font-weight: 600; }
.mn-post-head span, .mn-post-head time { color: var(--mn-muted); }
.mn-post-body { font-size: .9688rem; line-height: 1.55; overflow-wrap: anywhere; }
.mn-post > .mn-media { margin-top: .6rem; }
.mn-post-actions { display: flex; flex-wrap: wrap; gap: .15rem; margin-inline-start: -.55rem !important; margin-top: .2rem !important; }
.mn-post-action {
  display: inline-flex; align-items: center; gap: .4rem; height: 2.25rem; padding: 0 .6rem; border: 0; border-radius: 999px;
  background: none; color: var(--mn-muted); font: 500 .8125rem/1 var(--mn-font); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: color var(--mn-duration) var(--mn-ease), background-color var(--mn-duration) var(--mn-ease);
}
.mn-post-action svg { width: 1.1rem; height: 1.1rem; }
.mn-post-action:hover { background: var(--mn-hover); color: var(--mn-fg); }
.mn-post-action[aria-pressed="true"] { color: var(--mn-danger-text); }
.mn-post-action[aria-pressed="true"] svg { fill: currentColor; }
.mn-post-action[data-kind="repost"][aria-pressed="true"] { color: var(--mn-success-text); }
.mn-post-action[data-kind="repost"][aria-pressed="true"] svg { fill: none; }

/* @component profile-header */
.mn-profile { container: mn-profile / inline-size; overflow: hidden; }
.mn-profile-cover { height: clamp(6rem, 24cqi, 11rem); background: linear-gradient(135deg, color-mix(in oklab, var(--mn-primary) 30%, var(--mn-surface-2)), color-mix(in oklab, var(--mn-accent) 30%, var(--mn-surface-2))); }
.mn-profile-cover > * { width: 100%; height: 100%; border-radius: 0; }
.mn-profile-body { display: grid; gap: .75rem; padding: 0 1.25rem 1.25rem; }
.mn-profile-body > * { margin: 0; }
.mn-profile-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-top: -2.5rem; }
.mn-profile-top > .mn-avatar { --_s: 5rem; box-shadow: 0 0 0 4px var(--mn-surface); font-size: 1.6rem; }
.mn-profile-name { display: grid; gap: .1rem; }
.mn-profile-name strong { font: var(--mn-heading-weight) 1.35rem/1.2 var(--mn-font-heading); letter-spacing: -.015em; }
.mn-profile-name span { color: var(--mn-muted); font-size: var(--mn-text-sm); }
.mn-profile-bio { font-size: .9375rem; line-height: 1.55; max-width: 40em; }
.mn-profile-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; color: var(--mn-muted); font-size: .8125rem; }
.mn-profile-meta > span { display: inline-flex; align-items: center; gap: .35rem; }
.mn-profile-stats { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; font-size: var(--mn-text-sm); color: var(--mn-muted); }
.mn-profile-stats strong { color: var(--mn-fg); font-weight: 650; font-variant-numeric: tabular-nums; margin-inline-end: .25rem; }

/* @component comment-thread */
.mn-comments { display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.mn-comment { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .7rem; }
.mn-comment > .mn-avatar { grid-row: span 4; }
.mn-comment > :not(.mn-avatar) { grid-column: 2; min-width: 0; margin: 0; }
.mn-comment-head { font-size: var(--mn-text-sm); }
.mn-comment-head strong { font-weight: 600; margin-inline-end: .35rem; }
.mn-comment-head time { color: var(--mn-muted); }
.mn-comment-body { font-size: .9375rem; line-height: 1.55; overflow-wrap: anywhere; }
.mn-comment-actions { display: flex; flex-wrap: wrap; gap: .1rem .9rem; font-size: .8125rem; }
.mn-comment-actions button { padding: .2rem 0; border: 0; background: none; color: var(--mn-muted); font: 500 .8125rem/1.2 var(--mn-font); cursor: pointer; }
.mn-comment-actions button:hover { color: var(--mn-fg); }
.mn-comment > .mn-comments { margin-top: .9rem !important; padding-inline-start: 1rem; border-inline-start: 2px solid var(--mn-border); }

/* @component stories-bar */
.mn-storybar { display: flex; gap: .9rem; margin: 0; padding: .3rem .25rem .5rem; list-style: none; overflow-x: auto; scrollbar-width: none; }
.mn-storybar::-webkit-scrollbar { display: none; }
.mn-storybar a, .mn-storybar button { display: grid; justify-items: center; gap: .4rem; width: 4.5rem; padding: 0; border: 0; background: none; color: var(--mn-fg); font: 500 .75rem/1.2 var(--mn-font); text-decoration: none; cursor: pointer; }
.mn-storybar-ring { padding: 3.5px; border-radius: 50%; background: conic-gradient(from 200deg, var(--mn-accent), var(--mn-primary), var(--mn-accent)); }
.mn-storybar-ring > .mn-avatar { --_s: 3.4rem; box-shadow: 0 0 0 3px var(--mn-bg); }
.mn-storybar [data-seen] .mn-storybar-ring { background: var(--mn-input); }
.mn-storybar-label { width: 100%; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

/* @component loader */
.mn-loader { --_s: 1.5rem; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--_s) * .14); width: var(--_s); height: var(--_s); color: var(--_c, var(--mn-primary)); vertical-align: middle; flex: none; }
.mn-loader-sm { --_s: 1rem; } .mn-loader-lg { --_s: 2.5rem; }
.mn-loader > i { display: block; flex: none; background: currentColor; }
/* dots */
.mn-loader-dots { width: calc(var(--_s) * 1.8); }
.mn-loader-dots > i { width: calc(var(--_s) * .3); height: calc(var(--_s) * .3); border-radius: 50%; animation: mn-ld-bounce 1s ease-in-out infinite; }
/* bars (equaliser) */
.mn-loader-bars > i { width: calc(var(--_s) * .13); height: 100%; border-radius: 2px; transform-origin: 50% 100%; animation: mn-ld-eq 1s ease-in-out infinite; }
/* wave */
.mn-loader-wave { width: calc(var(--_s) * 2); }
.mn-loader-wave > i { width: calc(var(--_s) * .22); height: calc(var(--_s) * .22); border-radius: 50%; animation: mn-ld-wave 1.2s ease-in-out infinite; }
.mn-loader > i:nth-child(2) { animation-delay: .12s; } .mn-loader > i:nth-child(3) { animation-delay: .24s; } .mn-loader > i:nth-child(4) { animation-delay: .36s; } .mn-loader > i:nth-child(5) { animation-delay: .48s; }
/* grid of nine squares */
.mn-loader-grid { display: inline-grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--_s) * .08); }
.mn-loader-grid > i { width: 100%; aspect-ratio: 1; border-radius: 2px; animation: mn-ld-fade 1.2s ease-in-out infinite; }
.mn-loader-grid > i:nth-child(3n+2) { animation-delay: .15s; } .mn-loader-grid > i:nth-child(3n) { animation-delay: .3s; }
.mn-loader-grid > i:nth-child(n+4) { animation-delay: .2s; } .mn-loader-grid > i:nth-child(n+7) { animation-delay: .4s; }
/* pulse */
.mn-loader-pulse::before, .mn-loader-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: mn-ld-pulse 1.6s cubic-bezier(.2, .6, .4, 1) infinite; }
.mn-loader-pulse::after { animation-delay: .8s; }
/* orbit */
.mn-loader-orbit { border-radius: 50%; box-shadow: inset 0 0 0 2px color-mix(in oklab, currentColor 20%, transparent); animation: mn-spin 1.1s linear infinite; }
.mn-loader-orbit > i { position: absolute; top: calc(var(--_s) * -.08); left: 50%; width: calc(var(--_s) * .26); height: calc(var(--_s) * .26); margin-left: calc(var(--_s) * -.13); border-radius: 50%; }
.mn-loader-orbit > i + i { top: auto; bottom: calc(var(--_s) * -.08); opacity: .45; }
/* ring with a fading tail */
.mn-loader-ring { border-radius: 50%; background: conic-gradient(from 0deg, transparent 10%, currentColor); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); animation: mn-spin .9s linear infinite; }
/* top-of-page line */
.mn-loader-line { display: block; width: 100%; height: 3px; overflow: hidden; border-radius: 999px; background: color-mix(in oklab, currentColor 16%, transparent); }
.mn-loader-line::after { content: ""; position: absolute; top: 0; bottom: 0; width: 35%; border-radius: inherit; background: currentColor; animation: mn-ld-line 1.3s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes mn-ld-bounce { 0%, 80%, 100% { transform: scale(.5); opacity: .45; } 40% { transform: scale(1); opacity: 1; } }
@keyframes mn-ld-eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@keyframes mn-ld-wave { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(calc(var(--_s) * -.35)); } }
@keyframes mn-ld-fade { 0%, 100% { opacity: .2; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@keyframes mn-ld-pulse { from { transform: scale(0); opacity: .8; } to { transform: scale(1); opacity: 0; } }
@keyframes mn-ld-line { from { left: -35%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .mn-loader, .mn-loader > i, .mn-loader::before, .mn-loader::after { animation-duration: 3s !important; }
}

/* @component slides */
.mn-deck { position: relative; }
.mn-slides { container: mn / inline-size; height: var(--h, 100dvh); overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.mn-slides::-webkit-scrollbar { display: none; }
.mn-slides:focus-visible { outline: 2px solid var(--mn-ring); outline-offset: -2px; }
.mn-slide { display: grid; align-content: center; gap: 1.5rem; min-height: 100%; padding: clamp(1.5rem, 7cqi, 6rem); scroll-snap-align: start; scroll-snap-stop: always; }
.mn-slide > * { margin: 0; }
.mn-slide-center { justify-items: center; text-align: center; }
.mn-deck-bar { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; display: flex; align-items: center; gap: .35rem; padding: .3rem .3rem .3rem .75rem; border-radius: 999px; background: color-mix(in srgb, var(--mn-surface) 88%, transparent); box-shadow: var(--mn-shadow-md); color: var(--mn-muted); font: 500 .8125rem/1 var(--mn-font); font-variant-numeric: tabular-nums; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mn-deck-progress { position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: 3px; background: color-mix(in oklab, var(--mn-fg) 8%, transparent); }
.mn-deck-progress::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--_v, 0%); background: var(--mn-primary); transition: width 300ms var(--mn-ease); }
@media (prefers-reduced-motion: reduce) { .mn-slides { scroll-behavior: auto; } }

/* @component jobs */
.mn-jobs { margin: 0; padding: 0; list-style: none; border-top: var(--mn-border-w) solid var(--mn-border); }
.mn-job { position: relative; display: grid; gap: .45rem 1.5rem; padding: 1.15rem 2rem 1.15rem 0; border-bottom: var(--mn-border-w) solid var(--mn-border); }
.mn-job > * { margin: 0; min-width: 0; }
.mn-job-title { font: 600 1.0625rem/1.35 var(--mn-font-heading); letter-spacing: -.01em; }
.mn-job-title a { color: var(--mn-fg); text-decoration: none; }
.mn-job-title a::after { content: ""; position: absolute; inset: 0; }
.mn-job-title a:focus-visible { outline: none; }
.mn-job:has(.mn-job-title a:focus-visible) { outline: 2px solid var(--mn-ring); outline-offset: 2px; border-radius: var(--mn-radius-field); }
.mn-job:hover .mn-job-title a { text-decoration: underline; text-underline-offset: 4px; }
.mn-job-meta { display: flex; flex-wrap: wrap; gap: .4rem; }
.mn-job > svg { position: absolute; right: 0; top: 50%; width: 1.1rem; height: 1.1rem; translate: 0 -50%; color: var(--mn-muted); transition: translate var(--mn-duration) var(--mn-ease); }
.mn-job:hover > svg { translate: 4px -50%; color: var(--mn-fg); }
@container mn (min-width: 44rem) { .mn-job { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
}

@layer mian.components {

/* @component navbar */
.mn-navbar {
  display: flex; align-items: center; gap: 1rem;
  min-height: 3.75rem; padding: .5rem 1rem;
  border-bottom: var(--mn-border-w) solid var(--mn-border);
  background: color-mix(in srgb, var(--mn-bg) 85%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: var(--mn-text-sm);
}
.mn-navbar-sticky { position: sticky; top: 0; z-index: 40; }
.mn-navbar-brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1rem; color: var(--mn-fg); text-decoration: none; white-space: nowrap; }
.mn-navbar-brand svg { width: 1.4rem; height: 1.4rem; }
.mn-navbar-nav { display: flex; align-items: center; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.mn-navbar-link { display: inline-flex; align-items: center; height: 2.25rem; padding: 0 .75rem; border-radius: var(--mn-radius-field); color: var(--mn-muted); text-decoration: none; font-weight: 500; }
.mn-navbar-link:hover { color: var(--mn-fg); background: var(--mn-hover); }
.mn-navbar-link[aria-current="page"] { color: var(--mn-fg); }
.mn-navbar-link:focus-visible { outline: none; box-shadow: var(--mn-focus); }
.mn-navbar-end { margin-inline-start: auto; display: flex; align-items: center; gap: .5rem; }
.mn-navbar-toggle { display: none; }
@media (max-width: 48rem) {
  .mn-navbar-collapse .mn-navbar-nav { display: none; }
  .mn-navbar-collapse .mn-navbar-toggle { display: inline-flex; }
  .mn-navbar-collapse[data-open] { flex-wrap: wrap; }
  .mn-navbar-collapse[data-open] .mn-navbar-nav { display: flex; flex-direction: column; align-items: stretch; order: 10; width: 100%; padding-top: .5rem; }
}

/* @component tabs */
.mn-tabs { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.mn-tab-list { position: relative; display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; border-bottom: var(--mn-border-w) solid var(--mn-border); }
.mn-tab-list::-webkit-scrollbar { display: none; }
.mn-tab {
  position: relative; display: inline-flex; align-items: center; gap: .45rem; flex: none;
  height: var(--mn-size-md); padding: 0 .9rem;
  border: 0; background: none; color: var(--mn-muted);
  font: 500 var(--mn-text-sm)/1 var(--mn-font); white-space: nowrap; cursor: pointer;
  transition: color var(--mn-duration) var(--mn-ease);
}
.mn-tab::after { content: ""; position: absolute; inset: auto .5rem calc(var(--mn-border-w) * -1); height: 2px; border-radius: 2px 2px 0 0; background: transparent; transition: background-color var(--mn-duration) var(--mn-ease); }
.mn-tab:hover { color: var(--mn-fg); }
.mn-tab[aria-selected="true"] { color: var(--mn-fg); }
.mn-tab[aria-selected="true"]::after { background: var(--mn-fg); }
.mn-tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mn-ring); border-radius: var(--mn-radius-field); }
.mn-tab svg { width: 1rem; height: 1rem; }
@media (max-width: 26rem) { .mn-tab { padding-inline: .5rem; } }
.mn-tab-panel:focus-visible { outline: none; box-shadow: var(--mn-focus); border-radius: var(--mn-radius-field); }
.mn-tab-panel[hidden] { display: none; }
/* Boxed variant: the segmented look. */
.mn-tabs-boxed .mn-tab-list { display: inline-flex; align-self: flex-start; max-width: 100%; gap: 2px; padding: 3px; border: 0; border-radius: calc(var(--mn-radius-field) + 3px); background: var(--mn-surface-2); }
.mn-tabs-boxed .mn-tab { height: calc(var(--mn-size-md) - 6px); border-radius: var(--mn-radius-field); }
.mn-tabs-boxed .mn-tab::after { display: none; }
.mn-tabs-boxed .mn-tab[aria-selected="true"] { background: var(--mn-surface); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 0 0 1px var(--mn-border); }
.mn-tabs-pills .mn-tab-list { border: 0; gap: .25rem; }
.mn-tabs-pills .mn-tab { border-radius: 999px; height: var(--mn-size-sm); }
.mn-tabs-pills .mn-tab::after { display: none; }
.mn-tabs-pills .mn-tab[aria-selected="true"] { background: var(--mn-primary); color: var(--mn-primary-fg); }
.mn-tabs-vertical { flex-direction: row; }
.mn-tabs-vertical .mn-tab-list { flex-direction: column; border-bottom: 0; border-inline-end: var(--mn-border-w) solid var(--mn-border); min-width: 10rem; }
.mn-tabs-vertical .mn-tab { justify-content: flex-start; }
.mn-tabs-vertical .mn-tab::after { inset: .4rem calc(var(--mn-border-w) * -1) .4rem auto; width: 2px; height: auto; }

/* @component breadcrumbs */
.mn-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; padding: 0; list-style: none; font-size: var(--mn-text-sm); color: var(--mn-muted); }
.mn-breadcrumbs li { display: inline-flex; align-items: center; gap: .4rem; }
.mn-breadcrumbs li + li::before { content: ""; width: .35rem; height: .35rem; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; margin-inline-end: .2rem; }
.mn-breadcrumbs a { color: inherit; text-decoration: none; border-radius: 4px; }
.mn-breadcrumbs a:hover { color: var(--mn-fg); }
.mn-breadcrumbs a:focus-visible { outline: none; box-shadow: var(--mn-focus); }
.mn-breadcrumbs [aria-current="page"] { color: var(--mn-fg); font-weight: 500; }
.mn-breadcrumbs svg { width: .95rem; height: .95rem; }

/* @component pagination */
.mn-pagination ul { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.mn-page {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  min-width: var(--mn-size-md); height: var(--mn-size-md); padding: 0 .6rem;
  border: var(--mn-border-w) solid transparent; border-radius: var(--mn-radius-field);
  background: none; color: var(--mn-fg); font: 500 var(--mn-text-sm)/1 var(--mn-font);
  text-decoration: none; cursor: pointer; font-variant-numeric: tabular-nums;
}
.mn-page:hover { background: var(--mn-hover); }
.mn-page[aria-current="page"] { border-color: var(--mn-input); background: var(--mn-surface); box-shadow: var(--mn-shadow-sm); }
.mn-page:focus-visible { outline: none; box-shadow: var(--mn-focus); }
.mn-page[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.mn-page svg { width: 1rem; height: 1rem; }
.mn-page-ellipsis { display: inline-grid; place-items: center; min-width: var(--mn-size-md); color: var(--mn-muted); }

/* @component steps */
.mn-steps { display: flex; margin: 0; padding: 0; list-style: none; counter-reset: mn-step; font-size: var(--mn-text-sm); }
.mn-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .5rem; position: relative; text-align: center; counter-increment: mn-step; min-width: 0; }
.mn-step::before {
  content: counter(mn-step); position: relative; z-index: 1;
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  border: 2px solid var(--mn-border); background: var(--mn-bg); color: var(--mn-muted);
  font-weight: 600; font-size: .8125rem;
}
.mn-step + .mn-step::after { content: ""; position: absolute; top: 1rem; right: calc(50% + 1.25rem); left: calc(-50% + 1.25rem); height: 2px; background: var(--mn-border); }
.mn-step-title { font-weight: 550; color: var(--mn-muted); }
.mn-step-desc { font-size: .75rem; color: var(--mn-muted); }
.mn-step[data-state="complete"]::before { content: "✓"; background: var(--mn-primary); border-color: var(--mn-primary); color: var(--mn-primary-fg); }
.mn-step[data-state="complete"] + .mn-step::after, .mn-step[data-state="complete"] + .mn-step[aria-current="step"]::after { background: var(--mn-primary); }
.mn-step[aria-current="step"]::before { border-color: var(--mn-primary); color: var(--mn-primary-text); box-shadow: 0 0 0 4px color-mix(in oklab, var(--mn-primary) 15%, transparent); }
.mn-step:is([aria-current="step"], [data-state="complete"]) .mn-step-title { color: var(--mn-fg); }
.mn-steps-vertical { flex-direction: column; gap: 1.5rem; }
.mn-steps-vertical .mn-step { flex-direction: row; align-items: flex-start; text-align: start; gap: .85rem; }
.mn-steps-vertical .mn-step::before { flex: none; }
.mn-steps-vertical .mn-step + .mn-step::after { left: calc(1rem - 1px); right: auto; top: -1.5rem; height: 1.5rem; width: 2px; }
.mn-steps-vertical .mn-step > div { padding-top: .35rem; display: flex; flex-direction: column; gap: .15rem; }

/* @component sidebar */
.mn-sidebar { display: flex; flex-direction: column; gap: 1.25rem; width: 100%; font-size: var(--mn-text-sm); }
.mn-sidebar-group { display: flex; flex-direction: column; gap: 1px; }
.mn-sidebar-heading { padding: 0 .65rem .35rem; font-size: .75rem; font-weight: 600; color: var(--mn-muted); letter-spacing: .01em; }
.mn-sidebar-link {
  display: flex; align-items: center; gap: .6rem;
  min-height: 2.1rem; padding: .35rem .65rem;
  border-radius: var(--mn-radius-field);
  color: var(--mn-muted); text-decoration: none; font-weight: 450;
}
.mn-sidebar-link:hover { color: var(--mn-fg); background: var(--mn-hover); }
.mn-sidebar-link[aria-current="page"] { color: var(--mn-fg); background: var(--mn-active); font-weight: 550; }
.mn-sidebar-link:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mn-ring); }
.mn-sidebar-link svg { width: 1rem; height: 1rem; flex: none; }
.mn-sidebar-link .mn-badge { margin-inline-start: auto; }
}

@layer mian.components {

/* @component modal */
.mn-modal {
  width: min(32rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem);
  margin: auto; padding: 0;
  border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box);
  background: var(--mn-popover); color: var(--mn-fg);
  box-shadow: var(--mn-shadow-lg);
  font-family: var(--mn-font);
  overflow: auto; overscroll-behavior: contain;
}
.mn-modal[open] { display: flex; flex-direction: column; animation: var(--mn-enter) calc(var(--mn-enter-duration) + 40ms) var(--mn-ease-enter); }
.mn-modal::backdrop { background: var(--mn-overlay); backdrop-filter: blur(2px); animation: mn-fade 200ms var(--mn-ease); }
.mn-modal-sm { width: min(24rem, calc(100vw - 2rem)); }
.mn-modal-lg { width: min(48rem, calc(100vw - 2rem)); }
.mn-modal-full { width: calc(100vw - 2rem); height: calc(100dvh - 2rem); }
.mn-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.25rem 0; }
.mn-modal-title { margin: 0; font: var(--mn-heading-weight) 1.125rem/1.3 var(--mn-font-heading); letter-spacing: -.01em; }
.mn-modal-description { margin: .35rem 0 0; font-size: var(--mn-text-sm); color: var(--mn-muted); line-height: 1.5; }
.mn-modal-body { padding: 1rem 1.25rem; font-size: var(--mn-text-sm); line-height: 1.6; overflow: auto; }
.mn-modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; padding: 0 1.25rem 1.25rem; }
.mn-close {
  display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; margin: -.35rem -.5rem 0 0;
  border: 0; border-radius: var(--mn-radius-field); background: none; color: var(--mn-muted); cursor: pointer;
}
.mn-close:hover { background: var(--mn-hover); color: var(--mn-fg); }
.mn-close:focus-visible { outline: none; box-shadow: var(--mn-focus); }
.mn-close svg { width: 1rem; height: 1rem; }
@keyframes mn-modal-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@media (max-width: 40rem) {
  .mn-modal.mn-modal-sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--mn-radius-box) var(--mn-radius-box) 0 0; border-bottom: 0; }
  .mn-modal.mn-modal-sheet[open] { animation: mn-sheet-in 240ms var(--mn-ease); }
}
@keyframes mn-sheet-in { from { transform: translateY(100%); } }
html:has(dialog[open].mn-modal, dialog[open].mn-drawer) { overflow: hidden; scrollbar-gutter: stable; }

/* @component drawer */
.mn-drawer {
  --_w: min(24rem, 88vw);
  position: fixed; inset: 0 0 0 auto;
  width: var(--_w); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0;
  border: 0; border-inline-start: var(--mn-border-w) solid var(--mn-border);
  background: var(--mn-popover); color: var(--mn-fg); box-shadow: var(--mn-shadow-lg);
  font-family: var(--mn-font); overflow: auto;
}
.mn-drawer[open] { display: flex; flex-direction: column; animation: mn-drawer-right 260ms var(--mn-ease); }
.mn-drawer::backdrop { background: var(--mn-overlay); animation: mn-fade 260ms var(--mn-ease); }
.mn-drawer-left { inset: 0 auto 0 0; border-inline-start: 0; border-inline-end: var(--mn-border-w) solid var(--mn-border); }
.mn-drawer-left[open] { animation-name: mn-drawer-left; }
.mn-drawer-bottom { inset: auto 0 0 0; width: 100vw; height: auto; max-height: 85dvh; border: 0; border-top: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box) var(--mn-radius-box) 0 0; }
.mn-drawer-bottom[open] { animation-name: mn-drawer-bottom; }
.mn-drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem; border-bottom: var(--mn-border-w) solid var(--mn-border); }
.mn-drawer-body { flex: 1; padding: 1.25rem; overflow: auto; font-size: var(--mn-text-sm); }
.mn-drawer-footer { display: flex; gap: .5rem; justify-content: flex-end; padding: 1rem 1.25rem; border-top: var(--mn-border-w) solid var(--mn-border); }
.mn-drawer-bottom::before { content: ""; display: block; width: 2.5rem; height: 4px; margin: .6rem auto 0; border-radius: 999px; background: var(--mn-input); }
@keyframes mn-drawer-right { from { transform: translateX(100%); } }
@keyframes mn-drawer-left { from { transform: translateX(-100%); } }
@keyframes mn-drawer-bottom { from { transform: translateY(100%); } }

/* @component popover */
.mn-popover {
  position: fixed; inset: auto; margin: 0;
  width: max-content; max-width: min(20rem, calc(100vw - 16px));
  padding: 1rem;
  border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box);
  background: var(--mn-popover); color: var(--mn-fg);
  box-shadow: var(--mn-shadow-lg);
  font: 400 var(--mn-text-sm)/1.55 var(--mn-font);
}
.mn-popover:popover-open { animation: var(--mn-enter) var(--mn-enter-duration) var(--mn-ease-enter); }
.mn-popover-title { margin: 0 0 .3rem; font-weight: 600; }

/* @component tooltip */
.mn-tooltip { position: relative; display: inline-flex; }
/* Hidden tooltips are display:none so they never widen the page; they fade
   in with @starting-style and fade out with allow-discrete transitions. */
.mn-tooltip > [role="tooltip"] {
  position: absolute; z-index: 60; left: 50%; bottom: calc(100% + 8px);
  display: none; width: max-content; max-width: min(16rem, calc(100vw - 1.5rem)); padding: .35rem .6rem;
  border-radius: min(6px, var(--mn-radius-field));
  background: var(--mn-fg); color: var(--mn-bg);
  font: 500 .75rem/1.4 var(--mn-font); text-align: center;
  pointer-events: none; opacity: 0; transform: translate(-50%, 3px);
  transition: opacity var(--mn-duration) var(--mn-ease), transform var(--mn-duration) var(--mn-ease), display var(--mn-duration) allow-discrete;
  transition-delay: 0ms;
}
.mn-tooltip:hover > [role="tooltip"], .mn-tooltip:focus-within > [role="tooltip"] { display: block; opacity: 1; transform: translate(-50%, 0); transition-delay: 350ms; }
.mn-tooltip:focus-within > [role="tooltip"] { transition-delay: 0ms; }
.mn-tooltip-bottom > [role="tooltip"] { bottom: auto; top: calc(100% + 8px); transform: translate(-50%, -3px); }
.mn-tooltip-right > [role="tooltip"] { left: calc(100% + 8px); bottom: auto; top: 50%; transform: translate(-3px, -50%); }
.mn-tooltip-left > [role="tooltip"] { left: auto; right: calc(100% + 8px); bottom: auto; top: 50%; transform: translate(3px, -50%); }
.mn-tooltip-right:is(:hover, :focus-within) > [role="tooltip"], .mn-tooltip-left:is(:hover, :focus-within) > [role="tooltip"] { transform: translate(0, -50%); }
@starting-style {
  .mn-tooltip:is(:hover, :focus-within) > [role="tooltip"] { opacity: 0; transform: translate(-50%, 3px); }
  .mn-tooltip-bottom:is(:hover, :focus-within) > [role="tooltip"] { transform: translate(-50%, -3px); }
  .mn-tooltip-right:is(:hover, :focus-within) > [role="tooltip"] { transform: translate(-3px, -50%); }
  .mn-tooltip-left:is(:hover, :focus-within) > [role="tooltip"] { transform: translate(3px, -50%); }
}
@media (hover: none) { .mn-tooltip:hover:not(:focus-within) > [role="tooltip"] { display: none; } }

/* @component command */
.mn-command { display: flex; flex-direction: column; min-width: 0; font: 400 var(--mn-text-sm)/1.4 var(--mn-font); color: var(--mn-fg); }
.mn-command-input {
  display: flex; align-items: center; gap: .6rem; padding: 0 1rem;
  border-bottom: var(--mn-border-w) solid var(--mn-border);
}
.mn-command-input svg { width: 1rem; height: 1rem; color: var(--mn-muted); flex: none; }
.mn-command-input input { flex: 1; min-width: 0; height: 3rem; border: 0; background: none; color: var(--mn-fg); font: inherit; font-size: calc(var(--mn-text-sm) + 1px); }
.mn-command-input input:focus { outline: none; }
.mn-command-input input::placeholder { color: var(--mn-muted); }
.mn-command-list { max-height: min(22rem, 60dvh); overflow: auto; padding: .4rem; scroll-padding: .4rem; }
.mn-command-group + .mn-command-group { margin-top: .25rem; padding-top: .25rem; border-top: var(--mn-border-w) solid var(--mn-border); }
.mn-command-group[hidden], .mn-command-item[hidden] { display: none; }
.mn-command-heading { padding: .5rem .6rem .3rem; font-size: .75rem; font-weight: 600; color: var(--mn-muted); }
.mn-command-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .6rem; border-radius: calc(var(--mn-radius-box) - 4px);
  color: inherit; text-decoration: none; cursor: pointer; scroll-margin: .4rem;
}
.mn-command-item[aria-selected="true"] { background: var(--mn-hover); }
.mn-command-item svg { width: 1rem; height: 1rem; color: var(--mn-muted); flex: none; }
.mn-command-item small { margin-inline-start: auto; color: var(--mn-muted); font-size: .75rem; }
.mn-command-empty { padding: 2rem 1rem; text-align: center; color: var(--mn-muted); }
.mn-command-empty[hidden] { display: none; }
.mn-command-footer { display: flex; gap: 1rem; padding: .55rem 1rem; border-top: var(--mn-border-w) solid var(--mn-border); color: var(--mn-muted); font-size: .75rem; }
.mn-command-footer .mn-kbd { height: 1.25rem; min-width: 1.25rem; font-size: .6875rem; margin-inline-end: .25rem; }
.mn-modal.mn-command-dialog { width: min(36rem, calc(100vw - 2rem)); margin-top: 12vh; }
.mn-command-bordered { border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-popover); box-shadow: var(--mn-shadow-md); overflow: hidden; }
}

/* MIAN — page sections: the building blocks of whole websites.
   Every section is a size container, so its layout answers to the space it
   is given (a phone, a sidebar, a preview) rather than to the viewport.
   Surfaces reuse .mn-card, .mn-btn and friends in the markup, so every
   noodle's skin — glass, hatching, bricks, dots — carries into full pages. */
@layer mian.components {

/* @component layout */
:root, [data-noodle] {
  --mn-container: 74rem;
  --mn-gutter: clamp(1.25rem, 4.5vw, 2.5rem);
  --mn-section-space: clamp(4.5rem, 9vw, 8rem);
}
.mn-site { display: flex; flex-direction: column; min-height: 100dvh; margin: 0; }
.mn-site > main { flex: 1 0 auto; }
.mn-skip { position: absolute; left: .75rem; top: -5rem; z-index: 100; padding: .6rem 1rem; border-radius: var(--mn-radius-field); background: var(--mn-primary); color: var(--mn-primary-fg); font-weight: 600; text-decoration: none; }
.mn-skip:focus { top: .75rem; outline: none; box-shadow: var(--mn-focus); }
.mn-container { container: mn / inline-size; width: min(100% - 2 * var(--mn-gutter), var(--mn-container)); margin-inline: auto; }
.mn-container-narrow { --mn-container: 46rem; }
.mn-container-wide { --mn-container: 88rem; }
.mn-section { container: mn / inline-size; padding-block: var(--mn-section-space); }
.mn-section-sm { padding-block: calc(var(--mn-section-space) * .55); }
.mn-section-flush { padding-top: 0; }
.mn-section-muted { background-color: var(--mn-surface-2); }
.mn-section-bordered { border-top: var(--mn-border-w) solid var(--mn-border); }
.mn-section-head { display: grid; gap: 1rem; max-width: 44rem; margin-bottom: clamp(2.25rem, 5cqi, 4rem); }
.mn-section-head > *, .mn-section-head > div > * { margin: 0; }
.mn-section-head > div { display: grid; gap: 1rem; align-content: start; }
.mn-section-head-center { margin-inline: auto; text-align: center; justify-items: center; }
@container mn (min-width: 52rem) {
  .mn-section-head-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; column-gap: clamp(2rem, 6cqi, 5rem); max-width: none; }
}
.mn-eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font: 500 .875rem/1.3 var(--mn-font); color: var(--mn-primary-text); }
.mn-display, .mn-title, .mn-subtitle {
  margin: 0; color: var(--mn-fg); font-family: var(--mn-font-heading); font-weight: var(--mn-heading-weight);
  text-wrap: balance; overflow-wrap: break-word; hyphens: auto;
}
.mn-display { font-size: clamp(2.6rem, 1.3rem + 5.4cqi, 5.75rem); line-height: 1.02; letter-spacing: -.04em; }
.mn-title { font-size: clamp(2rem, 1.35rem + 2.7cqi, 3.35rem); line-height: 1.07; letter-spacing: -.032em; }
.mn-subtitle { font-size: clamp(1.25rem, 1.05rem + .9cqi, 1.6rem); line-height: 1.25; letter-spacing: -.015em; }
.mn-intro { margin: 0; max-width: 38em; font-size: clamp(1.0625rem, .98rem + .55cqi, 1.3rem); line-height: 1.6; color: var(--mn-muted); text-wrap: pretty; }
.mn-grid { display: grid; gap: var(--mn-gap, clamp(1rem, 2.5cqi, 1.75rem)); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--mn-min, 16rem)), 1fr)); }
.mn-cols { display: grid; gap: var(--mn-gap, 2rem clamp(1.5rem, 4cqi, 3rem)); grid-template-columns: minmax(0, 1fr); }
@container mn (min-width: 40rem) { .mn-cols-2, .mn-cols-3, .mn-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container mn (min-width: 62rem) { .mn-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mn-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mn-split { display: grid; gap: clamp(2rem, 6cqi, 5rem); align-items: center; }
@container mn (min-width: 52rem) {
  .mn-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mn-split-start { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .mn-split-end { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .mn-split-reverse > :first-child { order: 2; }
  .mn-split-top { align-items: start; }
}
.mn-split > * { min-width: 0; }

/* @component site-header */
.mn-header {
  container: mn-header / inline-size; position: relative; z-index: 30;
  border-bottom: var(--mn-border-w) solid var(--mn-border);
  background: color-mix(in srgb, var(--mn-bg) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
}
.mn-header-sticky { position: sticky; top: 0; }
.mn-header-plain { border-bottom-color: transparent; }
.mn-header-plain:not(.mn-header-sticky) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.mn-header-in { display: flex; align-items: center; gap: 1.25rem; min-height: 4rem; }
.mn-header-brand { display: inline-flex; align-items: center; gap: .55rem; flex: none; color: var(--mn-fg); text-decoration: none; font: 650 1.0625rem/1 var(--mn-font-heading); letter-spacing: -.015em; white-space: nowrap; }
.mn-header-brand svg { width: 1.6rem; height: 1.6rem; }
.mn-header-brand:focus-visible { outline: none; box-shadow: var(--mn-focus); border-radius: var(--mn-radius-field); }
.mn-header-nav { display: none; align-items: center; gap: .15rem; }
.mn-header-nav a, .mn-header-panel a { color: var(--mn-muted); text-decoration: none; font-weight: 500; }
.mn-header-nav a { padding: .45rem .7rem; border-radius: var(--mn-radius-field); font-size: .9375rem; transition: color var(--mn-duration) var(--mn-ease); }
.mn-header-nav a:hover, .mn-header-nav a[aria-current="page"] { color: var(--mn-fg); }
.mn-header-nav a:focus-visible, .mn-header-panel a:focus-visible { outline: none; box-shadow: var(--mn-focus); }
.mn-header-center .mn-header-nav { margin-inline: auto; }
.mn-header-actions { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; }
.mn-header-center .mn-header-actions { margin-inline-start: 0; }
.mn-header-menu { flex: none; }
.mn-header-menu > summary {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; list-style: none; cursor: pointer;
  border-radius: var(--mn-radius-field); color: var(--mn-fg);
}
.mn-header-menu > summary::-webkit-details-marker { display: none; }
.mn-header-menu > summary:hover { background: var(--mn-hover); }
.mn-header-menu > summary:focus-visible { outline: none; box-shadow: var(--mn-focus); }
.mn-header-menu > summary svg { width: 1.25rem; height: 1.25rem; }
.mn-header-menu > summary .mn-header-close, .mn-header-menu[open] > summary .mn-header-open { display: none; }
.mn-header-menu[open] > summary .mn-header-close { display: contents; }
.mn-header-panel {
  position: absolute; left: 0; right: 0; top: 100%; display: grid; gap: 0;
  padding: .5rem var(--mn-gutter) 1.5rem; max-height: calc(100dvh - 4rem); overflow: auto;
  border-bottom: var(--mn-border-w) solid var(--mn-border); background: var(--mn-bg); box-shadow: var(--mn-shadow-lg);
  animation: var(--mn-enter) var(--mn-enter-duration) var(--mn-ease-enter);
}
.mn-header-menu:not([open]) > .mn-header-panel { display: none; }
.mn-header-panel a { padding: .9rem .25rem; border-bottom: var(--mn-border-w) solid var(--mn-border); font-size: 1.0625rem; color: var(--mn-fg); }
.mn-header-panel .mn-btn { margin-top: 1rem; }
@container mn-header (min-width: 54rem) {
  .mn-header-nav { display: flex; }
  .mn-header-menu { display: none; }
  .mn-header-in { gap: 2rem; }
}
@container mn-header (max-width: 34rem) { .mn-header-actions .mn-header-wide { display: none; } }
@container mn-header (max-width: 24rem) {
  .mn-header-in { gap: .5rem; }
  .mn-header-brand { gap: .4rem; font-size: .9688rem; }
  .mn-header-brand svg { width: 1.35rem; height: 1.35rem; }
  .mn-header-actions { gap: .25rem; }
  .mn-header-actions .mn-btn:not(.mn-btn-icon) { padding-inline: .75em; }
  .mn-header-menu > summary { width: 2.25rem; }
}
@container mn-header (max-width: 18rem) {
  .mn-header-in { gap: .35rem; }
  .mn-header-menu > summary { width: 2rem; }
  .mn-header-actions .mn-btn:not(.mn-btn-icon) { padding-inline: .6em; }
}

/* @component hero */
.mn-hero { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3.5rem, 8vw, 6.5rem); }
.mn-hero-in { display: grid; gap: clamp(2.5rem, 6cqi, 4.5rem); }
.mn-hero-copy { display: grid; gap: 1.5rem; justify-items: start; max-width: 52rem; }
.mn-hero-copy > * { margin: 0; }
.mn-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.mn-hero-note { font-size: .875rem; color: var(--mn-muted); }
.mn-hero-center .mn-hero-copy { justify-items: center; margin-inline: auto; text-align: center; }
.mn-hero-center .mn-hero-actions { justify-content: center; }
.mn-hero-media { min-width: 0; }
.mn-hero-media-fade { max-height: 34rem; overflow: hidden; -webkit-mask: linear-gradient(#000 70%, transparent); mask: linear-gradient(#000 70%, transparent); }
@container mn (min-width: 56rem) {
  .mn-hero-split .mn-hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
  .mn-hero-split .mn-hero-copy { max-width: 36rem; }
  .mn-hero-split .mn-display { font-size: clamp(2.6rem, 1.2rem + 3.7cqi, 4.6rem); }
}

/* @component logo-cloud */
.mn-logos-caption { margin: 0 0 1.5rem; font-size: .875rem; color: var(--mn-muted); }
.mn-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; margin: 0; padding: 0; list-style: none; color: var(--mn-muted); }
.mn-logos-center { justify-content: center; }
.mn-logos > li { display: flex; }
.mn-logo { display: inline-flex; align-items: center; gap: .45rem; color: inherit; font: 650 1.125rem/1 var(--mn-font); letter-spacing: -.015em; white-space: nowrap; }
.mn-logo svg { width: 1.3em; height: 1.3em; }

/* @component feature-grid */
.mn-features { display: grid; gap: clamp(2rem, 4cqi, 3rem) clamp(1.5rem, 4cqi, 3rem); grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
@container mn (min-width: 40rem) { .mn-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container mn (min-width: 62rem) { .mn-features-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mn-features-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mn-feature { display: grid; gap: .55rem; align-content: start; min-width: 0; }
.mn-feature > * { margin: 0; }
.mn-features-ruled .mn-feature { padding-top: 1.25rem; border-top: var(--mn-border-w) solid var(--mn-border); }
.mn-feature-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: .45rem; border-radius: var(--mn-radius-field); background: var(--mn-surface-2); color: var(--mn-fg); }
.mn-feature-icon svg { width: 1.2rem; height: 1.2rem; }
.mn-feature-title { font: var(--mn-heading-weight) 1.0625rem/1.3 var(--mn-font-heading); letter-spacing: -.01em; color: var(--mn-fg); }
.mn-feature p { color: var(--mn-muted); font-size: .9375rem; line-height: 1.6; text-wrap: pretty; }
.mn-checklist { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.mn-checklist > li { position: relative; padding-inline-start: 1.65rem; line-height: 1.5; }
.mn-checklist > li::before {
  content: ""; position: absolute; left: 0; top: .18em; width: 1.1em; height: 1.1em; background: var(--mn-primary-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mn-checklist > li.mn-off { color: var(--mn-muted); }
.mn-checklist > li.mn-off::before { background: var(--mn-input); -webkit-mask-image: linear-gradient(transparent 45%, #000 45% 58%, transparent 58%); mask-image: linear-gradient(transparent 45%, #000 45% 58%, transparent 58%); -webkit-mask-size: 70% 100%; mask-size: 70% 100%; }

/* @component bento */
.mn-bento { display: grid; gap: var(--mn-gap, 1rem); grid-template-columns: minmax(0, 1fr); grid-auto-flow: dense; }
.mn-tile { --_p: clamp(1.25rem, 2.6cqi, 1.9rem); display: flex; flex-direction: column; gap: .55rem; min-width: 0; padding: var(--_p); }
.mn-tile > * { margin: 0; }
.mn-tile-title { font: var(--mn-heading-weight) 1.125rem/1.3 var(--mn-font-heading); letter-spacing: -.012em; color: var(--mn-fg); }
.mn-tile p { color: var(--mn-muted); font-size: .9375rem; line-height: 1.6; }
.mn-tile-media { margin: auto calc(var(--_p) * -1) calc(var(--_p) * -1); padding: var(--_p) var(--_p) 0; min-width: 0; }
.mn-tile-media-flush { padding: 0; }
@container mn (min-width: 40rem) {
  .mn-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mn-tile-wide, .mn-tile-full { grid-column: span 2; }
}
@container mn (min-width: 62rem) {
  .mn-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mn-tile { grid-column: span 2; }
  .mn-tile-half { grid-column: span 3; }
  .mn-tile-wide { grid-column: span 4; }
  .mn-tile-full { grid-column: span 6; }
  .mn-tile-tall { grid-row: span 2; }
}

/* @component media */
.mn-media { position: relative; display: block; margin: 0; aspect-ratio: var(--ratio, 16 / 10); overflow: hidden; border-radius: var(--mn-radius-box); background-color: var(--mn-surface-2); color: var(--mn-muted); isolation: isolate; }
.mn-media > img, .mn-media > video, .mn-media > svg, .mn-media > picture, .mn-media > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mn-media-auto { aspect-ratio: auto; }
.mn-media-square { --ratio: 1; } .mn-media-portrait { --ratio: 4 / 5; } .mn-media-wide { --ratio: 21 / 9; }
.mn-media-flat { border-radius: 0; }
.mn-media-placeholder {
  display: grid; place-items: center; padding: 1.5rem; text-align: center;
  font: 500 .75rem/1.5 var(--mn-font-mono); letter-spacing: .01em; text-wrap: balance;
  background-image: repeating-linear-gradient(135deg, color-mix(in oklab, var(--mn-fg) 6%, transparent) 0 1px, transparent 1px 10px);
}
.mn-caption { margin: .75rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--mn-muted); }
.mn-media > .mn-media-tag { position: absolute; left: .75rem; bottom: .75rem; z-index: 1; }

/* @component testimonial */
.mn-quote { display: grid; gap: 1.75rem; max-width: 54rem; margin: 0; }
.mn-quote blockquote { margin: 0; }
.mn-quote blockquote p { margin: 0; font: var(--mn-heading-weight) clamp(1.45rem, 1.05rem + 1.9cqi, 2.45rem)/1.25 var(--mn-font-heading); letter-spacing: -.022em; color: var(--mn-fg); text-wrap: pretty; }
.mn-quote-center { margin-inline: auto; text-align: center; justify-items: center; }
.mn-quote figcaption, .mn-testimonial figcaption { display: flex; align-items: center; gap: .8rem; font-size: .9375rem; line-height: 1.35; }
.mn-quote figcaption > span, .mn-testimonial figcaption > span { display: grid; text-align: start; }
.mn-quote figcaption strong, .mn-testimonial figcaption strong { color: var(--mn-fg); font-weight: 600; }
.mn-quote figcaption small, .mn-testimonial figcaption small { color: var(--mn-muted); font-size: .875rem; }
.mn-testimonials { columns: 1; column-gap: 1rem; }
@container mn (min-width: 44rem) { .mn-testimonials { columns: 2; } }
@container mn (min-width: 66rem) { .mn-testimonials { columns: 3; } }
.mn-testimonial { display: grid; gap: 1.1rem; margin: 0 0 1rem; padding: 1.4rem; break-inside: avoid; }
.mn-testimonial blockquote { margin: 0; }
.mn-testimonial blockquote p { margin: 0; line-height: 1.6; font-size: .9688rem; }

/* @component pricing */
.mn-plans { display: grid; gap: 2rem; }
.mn-billing { justify-self: start; min-inline-size: 0; max-width: 100%; flex-wrap: wrap; }
.mn-plans > * { min-width: 0; }
.mn-billing input { position: absolute; opacity: 0; pointer-events: none; }
.mn-billing label:has(input:focus-visible) { box-shadow: var(--mn-focus); }
.mn-pricing { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@container mn (min-width: 48rem) { .mn-pricing { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.mn-tier { position: relative; display: flex; flex-direction: column; gap: 1.25rem; padding: clamp(1.5rem, 3cqi, 2rem); overflow: visible; }
.mn-tier > * { margin: 0; }
.mn-tier-name { font: 600 1rem/1.3 var(--mn-font); color: var(--mn-fg); }
.mn-tier-desc { color: var(--mn-muted); font-size: .9375rem; line-height: 1.55; }
.mn-tier .mn-checklist { font-size: .9375rem; }
.mn-tier-action { width: 100%; }
.mn-tier-featured { outline: 2px solid var(--mn-primary); outline-offset: -1px; }
.mn-tier-badge { position: absolute; top: 1.25rem; right: 1.25rem; }
.mn-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; }
.mn-price-amount { font: var(--mn-heading-weight) clamp(2.25rem, 1.8rem + 1.5cqi, 3rem)/1 var(--mn-font-heading); letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--mn-fg); }
.mn-price-period { color: var(--mn-muted); font-size: .875rem; }
.mn-plans [data-period="yearly"], .mn-plans:has(input[value="yearly"]:checked) [data-period="monthly"] { display: none; }
.mn-plans:has(input[value="yearly"]:checked) [data-period="yearly"] { display: inline; }

/* @component cta */
.mn-cta { display: grid; gap: 1.5rem; justify-items: start; padding: clamp(2.25rem, 6cqi, 5rem); border-radius: var(--mn-radius-box); background-color: var(--mn-surface-2); color: var(--mn-fg); }
.mn-cta > *, .mn-cta > div > * { margin: 0; }
.mn-cta > div { display: grid; gap: 1rem; }
.mn-cta-plain { padding-inline: 0; background: none; border-radius: 0; }
.mn-cta-center { justify-items: center; text-align: center; }
.mn-cta-center .mn-hero-actions { justify-content: center; }
@container mn (min-width: 52rem) { .mn-cta-split { grid-template-columns: minmax(0, 1.4fr) auto; align-items: end; column-gap: 3rem; } }
.mn-subscribe { display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; max-width: 28rem; }
.mn-subscribe > .mn-input { flex: 1 1 13rem; min-width: 0; }

/* @component site-footer */
.mn-footer { padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem; border-top: var(--mn-border-w) solid var(--mn-border); font-size: .9375rem; }
.mn-footer-grid { display: grid; gap: 2.5rem 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mn-footer-brand { grid-column: 1 / -1; display: grid; gap: 1rem; align-content: start; max-width: 24rem; }
.mn-footer-brand > * { margin: 0; }
.mn-footer-brand p { color: var(--mn-muted); line-height: 1.6; }
@container mn (min-width: 56rem) {
  .mn-footer-grid { grid-template-columns: minmax(0, 2fr) repeat(var(--cols, 3), minmax(0, 1fr)); }
  .mn-footer-brand { grid-column: auto; }
}
.mn-footer-col h2 { margin: 0 0 1rem; font: 600 .875rem/1.2 var(--mn-font); color: var(--mn-fg); letter-spacing: 0; }
.mn-footer-col ul { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.mn-footer-col a, .mn-footer-legal a { color: var(--mn-muted); text-decoration: none; transition: color var(--mn-duration) var(--mn-ease); }
.mn-footer-col a:hover, .mn-footer-legal a:hover { color: var(--mn-fg); }
.mn-footer-col a:focus-visible, .mn-footer-legal a:focus-visible { outline: none; box-shadow: var(--mn-focus); border-radius: 2px; }
.mn-footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.5rem; border-top: var(--mn-border-w) solid var(--mn-border); color: var(--mn-muted); font-size: .8125rem; }
.mn-footer-legal > * { margin: 0; }
.mn-footer-legal ul { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.mn-footer-wordmark { margin: clamp(2.5rem, 6vw, 4rem) 0 0; overflow: hidden; color: var(--mn-fg); font: var(--mn-heading-weight) clamp(3rem, 16cqi, 13rem)/.82 var(--mn-font-heading); letter-spacing: -.06em; white-space: nowrap; }

/* @component article */
.mn-article { container: mn / inline-size; }
.mn-article-head { display: grid; gap: 1.25rem; max-width: 46rem; margin-inline: auto; }
.mn-article-head > * { margin: 0; }
.mn-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; color: var(--mn-muted); font-size: .875rem; }
.mn-article-byline { display: flex; align-items: center; gap: .75rem; font-size: .9375rem; }
.mn-article-byline span { display: grid; line-height: 1.35; }
.mn-article-byline small { color: var(--mn-muted); font-size: .8125rem; }
.mn-article-body { max-width: 42rem; margin-inline: auto; font-size: 1.125rem; line-height: 1.75; }
.mn-article-body > figure { margin-block: 2.25rem; }
.mn-article-wide { --_w: min(100cqi - 2 * var(--mn-gutter), 62rem); width: var(--_w); margin-inline: calc((var(--_w) - 100%) / -2); }
.mn-dropcap::first-letter { float: left; margin: .08em .12em 0 0; font: var(--mn-heading-weight) 3.6em/.8 var(--mn-font-heading); color: var(--mn-fg); }
.mn-pullquote { margin: 2.5rem 0; padding: 0; border: 0; font: var(--mn-heading-weight) clamp(1.4rem, 1.1rem + 1.4cqi, 2rem)/1.3 var(--mn-font-heading); letter-spacing: -.02em; color: var(--mn-fg); font-style: normal; text-wrap: balance; }
.mn-article-body .mn-pullquote { border: 0; padding: 0; color: var(--mn-fg); font-style: normal; }

/* @component app-shell */
.mn-shell { container: mn-shell / inline-size; display: flex; min-height: 100dvh; background: var(--mn-bg); }
.mn-shell-side {
  display: none; flex: 0 0 15.5rem; flex-direction: column; gap: 1.25rem; position: sticky; top: 0; align-self: flex-start;
  height: 100dvh; overflow: auto; padding: 1rem .75rem; border-inline-end: var(--mn-border-w) solid var(--mn-border); background: var(--mn-surface);
}
.mn-shell-side .mn-sidebar { flex: 1; }
.mn-shell-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mn-shell-top {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: .75rem; min-height: 3.6rem;
  padding: .5rem clamp(1rem, 3cqi, 2rem); border-bottom: var(--mn-border-w) solid var(--mn-border);
  background: color-mix(in srgb, var(--mn-bg) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.mn-shell-main { container: mn / inline-size; display: grid; gap: 1.5rem; align-content: start; padding: clamp(1rem, 3cqi, 2rem); }
.mn-shell-main > * { min-width: 0; }
.mn-shell-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.mn-shell-head > div { display: grid; gap: .3rem; }
.mn-shell-head h1 { margin: 0; font: var(--mn-heading-weight) 1.6rem/1.2 var(--mn-font-heading); letter-spacing: -.02em; }
.mn-shell-head p { margin: 0; color: var(--mn-muted); font-size: .9375rem; }
@container mn-shell (min-width: 60rem) {
  .mn-shell-side { display: flex; }
  .mn-shell-menu { display: none; }
}

/* @component docs-layout */
.mn-docs { container: mn-docs / inline-size; }
.mn-docs-in { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 8vw, 6rem); }
.mn-docs-nav, .mn-docs-toc { display: none; align-self: start; position: sticky; top: 5.5rem; max-height: calc(100dvh - 7rem); overflow: auto; }
.mn-docs-content { min-width: 0; max-width: 46rem; }
.mn-docs-picker { border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-card); }
.mn-docs-picker > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; cursor: pointer; list-style: none; font-weight: 550; font-size: .9375rem; }
.mn-docs-picker > summary::-webkit-details-marker { display: none; }
.mn-docs-picker > summary:focus-visible { outline: none; box-shadow: var(--mn-focus); border-radius: var(--mn-radius-box); }
.mn-docs-picker > .mn-sidebar { padding: 0 .5rem .75rem; }
.mn-docs-toc h2 { margin: 0 0 .75rem; font: 600 .8125rem/1.2 var(--mn-font); color: var(--mn-fg); }
.mn-docs-toc ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.mn-docs-toc a { color: var(--mn-muted); text-decoration: none; }
.mn-docs-toc a:hover, .mn-docs-toc a[aria-current] { color: var(--mn-fg); }
.mn-docs-toc a:focus-visible { outline: none; box-shadow: var(--mn-focus); border-radius: 2px; }
@container mn-docs (min-width: 56rem) {
  .mn-docs-in { grid-template-columns: 14rem minmax(0, 1fr); column-gap: clamp(2rem, 4cqi, 3.5rem); }
  .mn-docs-nav { display: block; }
  .mn-docs-picker { display: none; }
}
@container mn-docs (min-width: 76rem) {
  .mn-docs-in { grid-template-columns: 14rem minmax(0, 1fr) 12rem; }
  .mn-docs-toc { display: block; }
}

/* @component auth */
.mn-auth { container: mn-auth / inline-size; display: flex; min-height: 100dvh; background: var(--mn-bg); }
.mn-auth-main { flex: 1; display: grid; place-items: center; padding: clamp(1.5rem, 5vw, 3rem); }
.mn-auth-form { display: grid; gap: 1.5rem; width: min(100%, 24rem); }
.mn-auth-form > * { margin: 0; }
.mn-auth-aside { display: none; flex: 0 0 46%; flex-direction: column; justify-content: space-between; gap: 2rem; padding: clamp(2rem, 4vw, 3.5rem); background-color: var(--mn-surface-2); overflow: hidden; }
@container mn-auth (min-width: 60rem) { .mn-auth-aside { display: flex; } }
.mn-or { display: flex; align-items: center; gap: .75rem; color: var(--mn-muted); font-size: .8125rem; }
.mn-or::before, .mn-or::after { content: ""; flex: 1; border-top: var(--mn-border-w) solid var(--mn-border); }

/* @component price-list */
.mn-pricelist { display: grid; gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
.mn-pricelist-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .75rem; align-items: baseline; }
.mn-pricelist-name { display: flex; align-items: baseline; gap: .6rem; min-width: 0; margin: 0; font: 600 1.0625rem/1.35 var(--mn-font-heading); color: var(--mn-fg); }
.mn-pricelist-name::after { content: ""; flex: 1 1 1.5rem; min-width: 1.5rem; border-bottom: 1.5px dotted var(--mn-input); translate: 0 -.3em; }
.mn-pricelist-price { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mn-fg); }
.mn-pricelist-desc { grid-column: 1 / -1; margin: 0; max-width: 40em; color: var(--mn-muted); font-size: .9375rem; line-height: 1.55; }
.mn-pricelist-desc .mn-badge { margin-inline-start: .35rem; vertical-align: 1px; }

/* @component team */
.mn-people { display: grid; gap: 2.25rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.mn-person { display: grid; gap: .2rem; align-content: start; }
.mn-person > * { margin: 0; }
.mn-person > .mn-media { margin-bottom: .75rem; }
.mn-person-name { font: 600 1rem/1.35 var(--mn-font-heading); color: var(--mn-fg); }
.mn-person-role { color: var(--mn-muted); font-size: .875rem; }

/* @component product-card */
.mn-products { display: grid; gap: 2.25rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.mn-product { position: relative; display: grid; gap: .3rem; align-content: start; color: var(--mn-fg); }
.mn-product > * { margin: 0; }
.mn-product > .mn-media { margin-bottom: .7rem; }
.mn-product > .mn-media > * { transition: scale 600ms var(--mn-ease); }
.mn-product:hover > .mn-media > * { scale: 1.035; }
.mn-product-name { font: 550 .9688rem/1.35 var(--mn-font); }
.mn-product-name a { color: inherit; text-decoration: none; }
.mn-product-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mn-product-name a:focus-visible { outline: none; }
.mn-product:has(.mn-product-name a:focus-visible) { box-shadow: var(--mn-focus); border-radius: var(--mn-radius-box); }
.mn-product-meta { color: var(--mn-muted); font-size: .875rem; }
.mn-product-price { font-variant-numeric: tabular-nums; font-size: .9375rem; }
.mn-product-price s { color: var(--mn-muted); margin-inline-start: .4rem; }
.mn-product .mn-media > .mn-badge { position: absolute; top: .75rem; left: .75rem; z-index: 1; }

/* @component story-card */
.mn-stories { display: grid; gap: 3rem 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.mn-story { position: relative; display: grid; gap: .55rem; align-content: start; min-width: 0; }
.mn-story > * { margin: 0; }
.mn-story > .mn-media { margin-bottom: .45rem; }
.mn-story > .mn-media > * { transition: scale 600ms var(--mn-ease); }
.mn-story:hover > .mn-media > * { scale: 1.03; }
.mn-story-title { font: var(--mn-heading-weight) clamp(1.2rem, 1.05rem + .5cqi, 1.45rem)/1.25 var(--mn-font-heading); letter-spacing: -.015em; color: var(--mn-fg); text-wrap: balance; }
.mn-story-lead .mn-story-title { font-size: clamp(2rem, 1.3rem + 2.6cqi, 3.2rem); line-height: 1.08; letter-spacing: -.03em; }
.mn-story-title a { color: inherit; text-decoration: none; }
.mn-story-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mn-story-title a:focus-visible { outline: none; }
.mn-story:has(.mn-story-title a:focus-visible) { box-shadow: var(--mn-focus); border-radius: var(--mn-radius-box); }
.mn-story:hover .mn-story-title a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.mn-story-excerpt { color: var(--mn-muted); font-size: .9688rem; line-height: 1.6; }
.mn-story-meta { color: var(--mn-muted); font-size: .8125rem; }

/* @component agenda */
.mn-agenda { margin: 0; padding: 0; list-style: none; border-top: var(--mn-border-w) solid var(--mn-border); }
.mn-agenda-item { display: grid; gap: .4rem 1.5rem; padding-block: 1.3rem; border-bottom: var(--mn-border-w) solid var(--mn-border); }
.mn-agenda-item > * { margin: 0; min-width: 0; }
.mn-agenda-time { font: 500 .875rem/1.5 var(--mn-font-mono); font-variant-numeric: tabular-nums; color: var(--mn-muted); }
.mn-agenda-body { display: grid; gap: .25rem; }
.mn-agenda-body > * { margin: 0; }
.mn-agenda-title { font: 600 1.0625rem/1.35 var(--mn-font-heading); color: var(--mn-fg); letter-spacing: -.01em; }
.mn-agenda-who { color: var(--mn-muted); font-size: .9375rem; }
.mn-agenda-item-break .mn-agenda-title { font-weight: 500; color: var(--mn-muted); }
@container mn (min-width: 44rem) { .mn-agenda-item { grid-template-columns: 8rem minmax(0, 1fr) auto; align-items: baseline; } }

/* @component faq */
.mn-faq { display: grid; gap: 2rem; }
.mn-faq > .mn-section-head { margin: 0; }
@container mn (min-width: 56rem) {
  .mn-faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(3rem, 7cqi, 6rem); align-items: start; }
  .mn-faq > .mn-section-head { position: sticky; top: 6rem; }
}

/* @component figures */
.mn-figures { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); margin: 0; }
@container mn (min-width: 56rem) { .mn-figures { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } }
.mn-figures > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .55rem; padding-top: 1.25rem; border-top: var(--mn-border-w) solid var(--mn-border); min-width: 0; }
.mn-figures dt { color: var(--mn-muted); font-size: .9375rem; line-height: 1.45; }
.mn-figures dd { margin: 0; font: var(--mn-heading-weight) clamp(2.2rem, 1.5rem + 2.6cqi, 3.6rem)/1 var(--mn-font-heading); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--mn-fg); }

/* @component process */
.mn-process { display: grid; gap: 2.25rem; margin: 0; padding: 0; list-style: none; counter-reset: mn-step; }
@container mn (min-width: 48rem) { .mn-process { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1.5rem; } }
.mn-process > li { display: grid; gap: .5rem; align-content: start; padding-top: 1.1rem; border-top: 2px solid var(--mn-fg); counter-increment: mn-step; }
.mn-process > li > * { margin: 0; }
.mn-process > li::before { content: counter(mn-step, decimal-leading-zero); font: 500 .8125rem/1 var(--mn-font-mono); color: var(--mn-muted); margin-bottom: .5rem; }
.mn-process h3 { font: var(--mn-heading-weight) 1.0625rem/1.3 var(--mn-font-heading); letter-spacing: -.01em; }
.mn-process p { color: var(--mn-muted); font-size: .9375rem; line-height: 1.6; }
}

/* MIAN — components for SaaS, admin, commerce, education and agency sites.
   Built only from tokens, so every noodle restyles them. */
@layer mian.components {

/* @component filter-bar */
.mn-filterbar { container: mn-filterbar / inline-size; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .75rem; }
.mn-filterbar-search { flex: 1 1 14rem; min-width: 0; }
.mn-filterbar-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.mn-filterbar-end { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; }
.mn-filterbar-count { flex-basis: 100%; margin: 0; color: var(--mn-muted); font-size: var(--mn-text-sm); font-variant-numeric: tabular-nums; }
.mn-filterbar-count strong { color: var(--mn-fg); }
@container mn-filterbar (max-width: 32rem) { .mn-filterbar-end { margin-inline-start: 0; } }

/* @component bulk-actions */
.mn-bulk { display: grid; gap: .6rem; min-width: 0; }
.mn-bulkbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .5rem .5rem .5rem .9rem; border-radius: var(--mn-radius-box); background: var(--mn-fg); color: var(--mn-bg); animation: var(--mn-enter, none); }
.mn-bulkbar[hidden] { display: none; }
.mn-bulkbar p { margin: 0; font-size: var(--mn-text-sm); font-variant-numeric: tabular-nums; }
.mn-bulkbar .mn-btn { --_bg: transparent; background: transparent; color: var(--mn-bg); border-color: color-mix(in oklab, var(--mn-bg) 35%, transparent); box-shadow: none; }
.mn-bulkbar .mn-btn:hover { background: color-mix(in oklab, var(--mn-bg) 14%, transparent); }
.mn-bulkbar .mn-btn:focus-visible { outline-color: var(--mn-bg); }
.mn-bulk tr:has(> td > input:checked) > td { background: color-mix(in oklab, var(--mn-primary) 8%, transparent); }

/* @component curriculum */
.mn-curriculum { display: grid; border-block: var(--mn-border-w) solid var(--mn-border); }
.mn-module + .mn-module { border-top: var(--mn-border-w) solid var(--mn-border); }
.mn-module > summary { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; padding: 1rem .25rem; cursor: pointer; list-style: none; font: var(--mn-heading-weight) 1.0625rem/1.35 var(--mn-font-heading); color: var(--mn-fg); }
.mn-module > summary::-webkit-details-marker { display: none; }
.mn-module > summary::after { content: "+"; order: 3; font: 400 1.25rem/1 var(--mn-font); color: var(--mn-muted); transition: rotate var(--mn-duration) var(--mn-ease); }
.mn-module[open] > summary::after { rotate: 45deg; }
.mn-module-meta { margin-inline-start: auto; color: var(--mn-muted); font: 400 var(--mn-text-sm) var(--mn-font); font-variant-numeric: tabular-nums; }
.mn-lessons { display: grid; margin: 0 0 1rem; padding: 0; list-style: none; }
.mn-lesson { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .55rem .25rem; border-radius: var(--mn-radius-field); color: var(--mn-fg); font-size: .9375rem; }
.mn-lesson > svg { width: 1rem; height: 1rem; color: var(--mn-muted); }
.mn-lesson[data-state="done"] > svg { color: var(--mn-success-text, var(--mn-success)); }
.mn-lesson[data-state="done"] > span { color: var(--mn-muted); }
.mn-lesson[data-state="locked"] { color: var(--mn-muted); }
.mn-lesson-time { color: var(--mn-muted); font: 400 var(--mn-text-sm) var(--mn-font-mono); font-variant-numeric: tabular-nums; }

/* @component listing-card */
.mn-listings { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 1.5rem 1.25rem; }
.mn-listing { position: relative; display: grid; gap: .2rem; align-content: start; min-width: 0; }
.mn-listing-media { position: relative; aspect-ratio: 4 / 3; margin-bottom: .6rem; overflow: hidden; border-radius: var(--mn-radius-box); background: var(--mn-surface-2); }
.mn-listing-media > svg, .mn-listing-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mn-listing-media > .mn-badge { position: absolute; left: .6rem; top: .6rem; }
.mn-listing-save { position: absolute; z-index: 2; right: .6rem; top: .6rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 999px; background: color-mix(in oklab, var(--mn-surface) 88%, transparent); color: var(--mn-fg); cursor: pointer; }
.mn-listing-save svg { width: 1.1rem; height: 1.1rem; }
.mn-listing-save[aria-pressed="true"] { color: var(--mn-danger-text, var(--mn-danger)); }
.mn-listing-save[aria-pressed="true"] svg { fill: currentColor; }
.mn-listing-price { margin: 0; font-variant-numeric: tabular-nums; }
.mn-listing-price strong { font: var(--mn-heading-weight) 1.125rem/1.3 var(--mn-font-heading); color: inherit; }
.mn-listing-price span { color: var(--mn-muted); font-size: var(--mn-text-sm); }
.mn-listing-title { margin: 0; font: 500 1rem/1.35 var(--mn-font); }
.mn-listing-title a { color: var(--mn-fg); text-decoration: none; }
.mn-listing-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--mn-radius-box); }
.mn-listing-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mn-listing-address { margin: 0; color: var(--mn-muted); font-size: var(--mn-text-sm); }
.mn-listing-facts { display: flex; flex-wrap: wrap; gap: .15rem .9rem; margin: .35rem 0 0; padding: 0; list-style: none; color: var(--mn-fg); font-size: var(--mn-text-sm); font-variant-numeric: tabular-nums; }

/* @component cookie-consent */
.mn-consent { display: grid; gap: .9rem; max-width: 34rem; padding: 1.1rem 1.25rem; border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-surface); color: var(--mn-fg); box-shadow: var(--mn-shadow-lg); font-size: var(--mn-text-sm); line-height: 1.55; }
.mn-consent > p { margin: 0; }
.mn-consent-fixed { position: fixed; z-index: 60; inset: auto 1rem calc(1rem + env(safe-area-inset-bottom, 0px)) auto; width: min(34rem, calc(100vw - 2rem)); }
.mn-consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.mn-consent-options > summary { width: fit-content; cursor: pointer; color: var(--mn-fg); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.mn-consent-options[open] { display: grid; gap: .55rem; }
.mn-consent-options[open] > summary { margin-bottom: .2rem; }

/* @component work-grid */
.mn-work { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5cqi, 3.5rem) clamp(1.25rem, 3cqi, 2rem); }
@container mn (min-width: 40rem) { .mn-work { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mn-work-full { grid-column: 1 / -1; } }
@container mn (min-width: 62rem) {
  .mn-work { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mn-work-item { grid-column: span 3; }
  .mn-work-wide { grid-column: span 4; }
  .mn-work-narrow { grid-column: span 2; }
  .mn-work-full { grid-column: 1 / -1; }
}
.mn-work-item { position: relative; display: grid; gap: .35rem; align-content: start; min-width: 0; }
.mn-work-media { aspect-ratio: 4 / 3; margin-bottom: .75rem; overflow: hidden; border-radius: var(--mn-radius-box); background: var(--mn-surface-2); }
.mn-work-wide .mn-work-media, .mn-work-full .mn-work-media { aspect-ratio: 16 / 10; }
@container mn (min-width: 62rem) { .mn-work-narrow .mn-work-media { aspect-ratio: 4 / 5.2; } }
.mn-work-media > svg, .mn-work-media > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale calc(var(--mn-duration) * 3) var(--mn-ease); }
.mn-work-item:hover .mn-work-media > * { scale: 1.02; }
.mn-work-client { margin: 0; color: var(--mn-muted); font-size: var(--mn-text-sm); }
.mn-work-title { margin: 0; font: var(--mn-heading-weight) clamp(1.125rem, 2.2cqi, 1.5rem)/1.25 var(--mn-font-heading); letter-spacing: -.01em; text-wrap: balance; }
.mn-work-title a { color: var(--mn-fg); text-decoration: none; }
.mn-work-title a::after { content: ""; position: absolute; inset: 0; }
.mn-work-title a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.mn-work-outcome { margin: 0; color: var(--mn-muted); line-height: 1.55; }

/* @component comparison */
.mn-compare { min-width: 36rem; }
.mn-compare thead th { position: sticky; top: 0; z-index: 1; background: var(--mn-surface); vertical-align: bottom; font: var(--mn-heading-weight) 1rem/1.3 var(--mn-font-heading); }
.mn-compare thead th small { display: block; margin-top: .15rem; color: inherit; font: 400 var(--mn-text-sm) var(--mn-font); font-variant-numeric: tabular-nums; }
.mn-compare tbody th[scope="row"] { font-weight: 400; color: var(--mn-fg); }
.mn-compare th[scope="row"], .mn-compare thead th:first-child { position: sticky; left: 0; background: var(--mn-surface); }
.mn-compare td { text-align: center; font-variant-numeric: tabular-nums; }
.mn-compare thead th:not(:first-child) { text-align: center; }
.mn-compare .mn-compare-featured { background: color-mix(in oklab, var(--mn-primary) 7%, var(--mn-surface)); }
.mn-compare-group th { padding-top: 1.25rem; background: none; color: var(--mn-muted); font: 600 .75rem/1 var(--mn-font); letter-spacing: .06em; text-transform: uppercase; text-align: start; }
.mn-compare-yes { display: inline-grid; place-items: center; color: var(--mn-primary-text); }
.mn-compare-yes svg { width: 1.1rem; height: 1.1rem; }
.mn-compare-no { display: inline-block; width: .8rem; height: 2px; vertical-align: middle; background: var(--mn-input); }

/* @component changelog */
.mn-changelog { display: grid; border-top: var(--mn-border-w) solid var(--mn-border); }
.mn-release { container: mn-release / inline-size; display: grid; gap: .75rem 2rem; padding: 1.75rem 0; border-bottom: var(--mn-border-w) solid var(--mn-border); }
@container mn (min-width: 40rem) { .mn-release { grid-template-columns: 11rem minmax(0, 1fr); } }
.mn-release-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; align-content: start; color: var(--mn-muted); font-size: var(--mn-text-sm); font-variant-numeric: tabular-nums; }
.mn-release h3 { margin: 0 0 .4rem; font: var(--mn-heading-weight) 1.25rem/1.3 var(--mn-font-heading); letter-spacing: -.01em; color: var(--mn-fg); }
.mn-release p { margin: 0 0 .75rem; color: var(--mn-muted); max-width: 42rem; }
.mn-release ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.mn-change { display: flex; align-items: baseline; gap: .6rem; line-height: 1.5; }
.mn-change > .mn-badge { flex: none; min-width: 5.2rem; justify-content: center; }

/* @component integrations */
.mn-integrations { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 1rem; }
.mn-integration { position: relative; display: grid; gap: .3rem; align-content: start; padding: 1.1rem; border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box); background: var(--mn-surface); transition: border-color var(--mn-duration) var(--mn-ease); }
.mn-integration:hover { border-color: color-mix(in oklab, var(--mn-border), var(--mn-fg) 35%); }
.mn-integration > * { margin: 0; }
.mn-integration-mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: .5rem; border-radius: var(--mn-radius-field); background: var(--mn-surface-2); color: var(--mn-fg); font: 700 .875rem/1 var(--mn-font); }
.mn-integration-cat { color: var(--mn-muted); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.mn-integration h3 { font: var(--mn-heading-weight) 1rem/1.3 var(--mn-font-heading); }
.mn-integration h3 a { color: var(--mn-fg); text-decoration: none; }
.mn-integration h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mn-integration p:last-child { color: var(--mn-muted); font-size: var(--mn-text-sm); line-height: 1.5; }

/* @component contact-section */
.mn-contact { display: grid; gap: clamp(2rem, 5cqi, 4rem); align-items: start; }
@container mn (min-width: 52rem) { .mn-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.mn-contact-details { display: grid; gap: .9rem; margin: .5rem 0 0; }
.mn-contact-details > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; padding-top: .9rem; border-top: var(--mn-border-w) solid var(--mn-border); }
.mn-contact-details dt { color: var(--mn-muted); font-size: var(--mn-text-sm); }
.mn-contact-details dd { margin: 0; overflow-wrap: anywhere; }

}


/* ── MIAN ──────────────────────────────────────────────────────────────────
   面 — the noodle itself: flour, water, hands. The default system and the
   base every other noodle varies. Black on white, one-pixel edges, clear
   type, a soft shadow only when something floats, and quick, quiet motion.
   Nothing is decorated; everything is exact. */
@keyframes mian-in { from { opacity: 0; transform: translateY(3px); } }
@keyframes mian-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope (:root:not([data-noodle]), [data-noodle="mian"]) to ([data-noodle]:not([data-noodle="mian"])) {
  :scope {
    --mn-enter: mian-in; --mn-enter-duration: 160ms; --mn-ease-enter: cubic-bezier(.2, 0, 0, 1);
    --mn-duration: 150ms; --mn-spring: cubic-bezier(.2, 0, 0, 1);
    --m-float: 0 0 0 1px var(--mn-border), 0 4px 8px -2px rgb(0 0 0 / .06), 0 16px 32px -12px rgb(0 0 0 / .14);
    --mn-focus: 0 0 0 2px var(--mn-bg), 0 0 0 4px color-mix(in oklab, var(--mn-ring) 55%, transparent);
    --mn-bar-radius: 4px; --mn-bar-gap: 6px; --mn-line-width: 2px; --mn-area-opacity: .06; --mn-point-opacity: 0;
    --mn-bar-fill: color-mix(in oklab, var(--mn-fg) 12%, var(--mn-surface));
    --mn-bar-fill-hl: var(--mn-fg);
    --mn-series-1: var(--mn-fg); --mn-series-2: color-mix(in oklab, var(--mn-fg) 45%, var(--mn-surface));
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3) { letter-spacing: -.035em; }

  /* Buttons: solid ink, or white with a 1px edge. Hover shifts tone only. */
  .mn-btn { box-shadow: none; font-weight: 500; letter-spacing: -.005em; }
  .mn-btn:not(.mn-btn-outline, .mn-btn-soft, .mn-btn-ghost, .mn-btn-link):hover { --_bg: color-mix(in oklab, var(--_c, var(--mn-primary)) 84%, var(--mn-bg)); }
  .mn-btn:active { transform: scale(.98); }
  .mn-btn-outline { --_bd: var(--_c, var(--mn-border)); background-color: var(--mn-surface); box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
  .mn-btn-outline:hover { --_bg: var(--mn-surface-2); --_bd: var(--_c, var(--mn-input)); }
  .mn-btn-soft { --_bg: var(--mn-surface-2); --_fg: var(--_ct, var(--mn-fg)); }

  /* Fields: a clean 1px box; focus darkens the edge and adds a soft halo. */
  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { box-shadow: none; border-color: var(--mn-border); }
  .mn-input:hover, .mn-select:hover, .mn-textarea:hover, .mn-input-group:hover { border-color: var(--mn-input); }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within, .mn-number:focus-within, .mn-otp > input:focus {
    border-color: var(--mn-fg); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mn-fg) 10%, transparent);
  }
  .mn-input-group > .mn-input { box-shadow: none; }
  .mn-checkbox { border-radius: 4px; }
  .mn-checkbox, .mn-radio { box-shadow: none; }
  .mn-switch { --_w: 2.25rem; --_hh: 1.25rem; background: var(--mn-input); }
  .mn-switch:checked { background: var(--_on); }
  .mn-switch::before { box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
  .mn-slider { --_track: 4px; --_thumb: 1rem; }
  .mn-slider::-webkit-slider-runnable-track { box-shadow: none; background: linear-gradient(to right, var(--_on) var(--_v), var(--mn-border) var(--_v)); }
  .mn-slider::-moz-range-track { box-shadow: none; background: var(--mn-border); }
  .mn-slider::-webkit-slider-thumb { border: 1px solid var(--mn-input); background: var(--mn-surface); box-shadow: 0 1px 3px rgb(0 0 0 / .15); }
  .mn-slider::-moz-range-thumb { border: 1px solid var(--mn-input); background: var(--mn-surface); box-shadow: 0 1px 3px rgb(0 0 0 / .15); }

  /* Surfaces: a 1px edge; the shadow appears only on hover or when floating. */
  .mn-card { box-shadow: none; transition: box-shadow var(--mn-duration) var(--mn-ease), border-color var(--mn-duration) var(--mn-ease); }
  a.mn-card:hover, .mn-card-interactive:hover { box-shadow: var(--m-float); border-color: transparent; }
  .mn-card-title { font-weight: 600; letter-spacing: -.02em; }
  .mn-card-footer-bordered { background: var(--mn-surface-2); }
  .mn-stat-value { font-weight: 600; letter-spacing: -.04em; }

  .mn-table thead th { background: var(--mn-surface-2); font-size: .75rem; font-weight: 500; }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--mn-surface-2) 70%, transparent); }

  .mn-badge { font-weight: 500; letter-spacing: 0; }
  .mn-badge-outline { border-color: var(--mn-border); color: var(--_ct, var(--mn-fg)); }
  .mn-kbd { box-shadow: none; }

  /* Tabs: a 2px ink underline; hovering shows a faint pill behind the label. */
  .mn-tab { font-weight: 500; border-radius: var(--mn-radius-field); }
  .mn-tab:hover { background: var(--mn-hover); }
  .mn-tab::after { inset-inline: .6rem; }
  .mn-tabs-boxed .mn-tab-list { background: var(--mn-surface-2); border: 1px solid var(--mn-border); }
  .mn-tabs-boxed .mn-tab[aria-selected="true"] { box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 0 0 1px var(--mn-border); }
  .mn-toggle-group { border: 1px solid var(--mn-border); background: var(--mn-surface-2); }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 0 0 1px var(--mn-border); }

  .mn-progress { height: 6px; box-shadow: none; background: var(--mn-border); }
  .mn-radial { --_t: .35rem; background: conic-gradient(var(--_c, var(--mn-fg)) calc(var(--_v) * 1%), var(--mn-border) 0); }
  .mn-spinner { border-width: 1.5px; border-color: color-mix(in oklab, var(--_c, currentColor) 18%, transparent); border-top-color: var(--_c, currentColor); animation: mian-spin .6s linear infinite; }
  .mn-alert { background: var(--mn-surface); border-color: var(--mn-border); }
  .mn-alert .mn-alert-title { color: var(--_at); }

  /* Floating things share one shadow and a 1px edge. */
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { border-color: transparent; box-shadow: var(--m-float); }
  .mn-modal::backdrop { background: color-mix(in oklab, #000 40%, transparent); backdrop-filter: none; }
  .mn-page[aria-current="page"] { border-color: var(--mn-fg); box-shadow: none; }
  .mn-step + .mn-step::after { height: 1px; }

  /* Charts: ink for what matters, pale grey for the rest. */
  .mn-bar[data-value]::after { border-radius: 6px; }
  .mn-legend li::before { border-radius: 2px; }
  .mn-donut { --thick: 22%; }
}}