/*! MIAN 1.7.0: https://mian.ro: 135 components, 67 noodles. 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);
    /* Shared motion scale: three durations and three curves. Use these for
       your own transitions so they match the components. */
    --mn-dur-fast: 120ms; --mn-dur: 200ms; --mn-dur-slow: 360ms;
    --mn-ease-out: cubic-bezier(.16, 1, .3, 1);
    --mn-ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --mn-ease-spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 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; --mn-dur-fast: 0ms; --mn-dur: 0ms; --mn-dur-slow: 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; }
/* A filled tile keeps its fill in every noodle. */
  .mn-tile-fill { background: var(--mn-primary); border-color: transparent; color: var(--mn-primary-fg); }
  .mn-tile-fill :is(.mn-tile-title, p, .mn-tile-figure) { color: inherit; }
  .mn-tile-fill p { opacity: .82; }
  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; }
}

/* MIAN noodles: generated from src/tokens/noodles.mjs. Do not edit. */
@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: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mn-font-heading: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, 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;
  }
  [data-noodle="yangchun"] {
    --mn-bg: light-dark(#f2f2f7, #000000);
    --mn-surface: light-dark(#ffffff, #1c1c1e);
    --mn-surface-2: light-dark(#e9e9ee, #2c2c2e);
    --mn-fg: light-dark(#1c1c1e, #f5f5f7);
    --mn-muted: light-dark(#636366, #a1a1a6);
    --mn-border: light-dark(#dedee3, #38383a);
    --mn-input: light-dark(#c7c7cc, #545458);
    --mn-primary: light-dark(#0071e3, #0071e3);
    --mn-primary-fg: light-dark(#ffffff, #ffffff);
    --mn-secondary: light-dark(#e9e9ee, #2c2c2e);
    --mn-secondary-fg: light-dark(#1c1c1e, #f5f5f7);
    --mn-accent: light-dark(#5856d6, #7d7aff);
    --mn-accent-fg: light-dark(#ffffff, #0b0a2e);
    --mn-ring: light-dark(#0071e3, #409cff);
    --mn-success: light-dark(#1f7a35, #30d158);
    --mn-success-fg: light-dark(#ffffff, #04210c);
    --mn-warning: light-dark(#b25000, #fbbf24);
    --mn-warning-fg: light-dark(#ffffff, #1f1300);
    --mn-danger: light-dark(#d70015, #ff6961);
    --mn-danger-fg: light-dark(#ffffff, #2a0402);
    --mn-info: light-dark(#0071a4, #38bdf8);
    --mn-info-fg: light-dark(#ffffff, #03202d);
    --mn-primary-text: light-dark(#0367cb, #3b91e8);
    --mn-secondary-text: light-dark(#6e6e71, #88888a);
    --mn-accent-text: light-dark(#5856d6, #8784fe);
    --mn-success-text: light-dark(#1f7835, #30d158);
    --mn-warning-text: light-dark(#ac4e01, #fbbf24);
    --mn-danger-text: light-dark(#cc0216, #ff6961);
    --mn-info-text: light-dark(#016fa1, #38bdf8);
    --mn-link: light-dark(#5856d6, #7d7aff);
    --mn-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "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: 700;
    --mn-radius-field: 10px;
    --mn-radius-box: 16px;
    --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: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="linguine"] {
    --mn-bg: light-dark(#faf9f5, #1f1e1d);
    --mn-surface: light-dark(#ffffff, #262624);
    --mn-surface-2: light-dark(#f0eee6, #30302e);
    --mn-fg: light-dark(#1f1e1d, #f5f4ee);
    --mn-muted: light-dark(#5e5d59, #b0aea5);
    --mn-border: light-dark(#e8e6dc, #3b3a37);
    --mn-input: light-dark(#d1cfc5, #55534e);
    --mn-primary: light-dark(#ae5630, #d97757);
    --mn-primary-fg: light-dark(#ffffff, #1f1108);
    --mn-secondary: light-dark(#f0eee6, #30302e);
    --mn-secondary-fg: light-dark(#1f1e1d, #f5f4ee);
    --mn-accent: light-dark(#3d3d3a, #c2c0b6);
    --mn-accent-fg: light-dark(#ffffff, #1f1e1d);
    --mn-ring: light-dark(#ae5630, #d97757);
    --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(#a3522e, #dc8669);
    --mn-secondary-text: light-dark(#73716d, #8f8e8a);
    --mn-accent-text: light-dark(#3d3d3a, #c2c0b6);
    --mn-success-text: light-dark(#16783a, #4ade80);
    --mn-warning-text: light-dark(#a84f0b, #fbbf24);
    --mn-danger-text: light-dark(#c52525, #f87474);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#ae5630, #d97757);
    --mn-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 500;
    --mn-radius-field: 8px;
    --mn-radius-box: 14px;
    --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: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="penne"] {
    --mn-bg: light-dark(#ffffff, #1c1c1c);
    --mn-surface: light-dark(#ffffff, #262626);
    --mn-surface-2: light-dark(#f4f4f4, #303030);
    --mn-fg: light-dark(#0d0d0d, #ececec);
    --mn-muted: light-dark(#5d5d5d, #b4b4b4);
    --mn-border: light-dark(#ececec, #363636);
    --mn-input: light-dark(#d0d0d0, #4f4f4f);
    --mn-primary: light-dark(#0d0d0d, #f9f9f9);
    --mn-primary-fg: light-dark(#ffffff, #0d0d0d);
    --mn-secondary: light-dark(#f4f4f4, #303030);
    --mn-secondary-fg: light-dark(#0d0d0d, #ececec);
    --mn-accent: light-dark(#0f6e58, #6fd3b8);
    --mn-accent-fg: light-dark(#ffffff, #04241c);
    --mn-ring: light-dark(#0d0d0d, #f9f9f9);
    --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(#0d0d0d, #f9f9f9);
    --mn-secondary-text: light-dark(#737373, #8e8e8e);
    --mn-accent-text: light-dark(#0f6e58, #6fd3b8);
    --mn-success-text: light-dark(#15793a, #4ade80);
    --mn-warning-text: light-dark(#aa4f09, #fbbf24);
    --mn-danger-text: light-dark(#c72424, #f87676);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#0d0d0d, #f9f9f9);
    --mn-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "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: 24px;
    --mn-radius-box: 20px;
    --mn-radius-badge: 999px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --mn-size-xs: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="chitarra"] {
    --mn-bg: light-dark(#ffffff, #000000);
    --mn-surface: light-dark(#ffffff, #0a0a0a);
    --mn-surface-2: light-dark(#eff3f4, #16181c);
    --mn-fg: light-dark(#0f1419, #e7e9ea);
    --mn-muted: light-dark(#536471, #8b98a5);
    --mn-border: light-dark(#e1e8ed, #2f3336);
    --mn-input: light-dark(#cfd9de, #536471);
    --mn-primary: light-dark(#0f1419, #eff3f4);
    --mn-primary-fg: light-dark(#ffffff, #0f1419);
    --mn-secondary: light-dark(#eff3f4, #16181c);
    --mn-secondary-fg: light-dark(#0f1419, #e7e9ea);
    --mn-accent: light-dark(#0f6cbd, #1d9bf0);
    --mn-accent-fg: light-dark(#ffffff, #001523);
    --mn-ring: light-dark(#0f6cbd, #1d9bf0);
    --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(#0f1419, #eff3f4);
    --mn-secondary-text: light-dark(#727679, #7a7c7f);
    --mn-accent-text: light-dark(#0f6aba, #1d9bf0);
    --mn-success-text: light-dark(#15773a, #4ade80);
    --mn-warning-text: light-dark(#aa4f0a, #fbbf24);
    --mn-danger-text: light-dark(#c82425, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#0f1419, #eff3f4);
    --mn-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "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: 800;
    --mn-radius-field: 24px;
    --mn-radius-box: 16px;
    --mn-radius-badge: 999px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --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;
  }
  [data-noodle="shio"] {
    --mn-bg: light-dark(#fafaf9, #0e1014);
    --mn-surface: light-dark(#ffffff, #16191e);
    --mn-surface-2: light-dark(#f3f3f1, #1e2228);
    --mn-fg: light-dark(#14181f, #eef1f5);
    --mn-muted: light-dark(#5d6470, #9aa3ae);
    --mn-border: light-dark(#ececea, #262a31);
    --mn-input: light-dark(#d5d6d4, #3a404a);
    --mn-primary: light-dark(#1f3a5f, #a9c3e8);
    --mn-primary-fg: light-dark(#ffffff, #0e1a2b);
    --mn-secondary: light-dark(#f3f3f1, #1e2228);
    --mn-secondary-fg: light-dark(#14181f, #eef1f5);
    --mn-accent: light-dark(#2f6b5a, #8fd1bd);
    --mn-accent-fg: light-dark(#ffffff, #06231b);
    --mn-ring: light-dark(#1f3a5f, #a9c3e8);
    --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(#1f3a5f, #a9c3e8);
    --mn-secondary-text: light-dark(#6d7073, #82858a);
    --mn-accent-text: light-dark(#2f6b5a, #8fd1bd);
    --mn-success-text: light-dark(#15783b, #4ade80);
    --mn-warning-text: light-dark(#aa4f0a, #fbbf24);
    --mn-danger-text: light-dark(#c82525, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#1f3a5f, #a9c3e8);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mn-font-heading: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 500;
    --mn-radius-field: 10px;
    --mn-radius-box: 16px;
    --mn-radius-badge: 999px;
    --mn-shadow-sm: 0 1px 3px rgb(0 0 0 / .08);
    --mn-shadow-md: 0 4px 14px -4px rgb(0 0 0 / .12), 0 2px 4px -2px rgb(0 0 0 / .06);
    --mn-shadow-lg: 0 20px 48px -12px rgb(0 0 0 / .25), 0 8px 16px -8px rgb(0 0 0 / .10);
    --mn-size-xs: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="spaghetti"] {
    --mn-bg: light-dark(#ffffff, #0c0c0c);
    --mn-surface: light-dark(#ffffff, #141414);
    --mn-surface-2: light-dark(#f4f4f2, #1d1d1d);
    --mn-fg: light-dark(#111111, #f2f2f0);
    --mn-muted: light-dark(#5c5c5c, #a3a3a0);
    --mn-border: light-dark(#e4e4e1, #2a2a2a);
    --mn-input: light-dark(#cfcfcb, #444444);
    --mn-primary: light-dark(#111111, #f2f2f0);
    --mn-primary-fg: light-dark(#ffffff, #111111);
    --mn-secondary: light-dark(#f4f4f2, #1d1d1d);
    --mn-secondary-fg: light-dark(#111111, #f2f2f0);
    --mn-accent: light-dark(#c8001a, #ff5a67);
    --mn-accent-fg: light-dark(#ffffff, #1a0003);
    --mn-ring: light-dark(#c8001a, #ff5a67);
    --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(#111111, #f2f2f0);
    --mn-secondary-text: light-dark(#757574, #7f7f7e);
    --mn-accent-text: light-dark(#c8001a, #ff5a67);
    --mn-success-text: light-dark(#15793a, #4ade80);
    --mn-warning-text: light-dark(#aa4f09, #fbbf24);
    --mn-danger-text: light-dark(#c82424, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#111111, #f2f2f0);
    --mn-font: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, ui-sans-serif, system-ui, sans-serif;
    --mn-font-heading: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, ui-sans-serif, system-ui, sans-serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 800;
    --mn-radius-field: 2px;
    --mn-radius-box: 2px;
    --mn-radius-badge: 2px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --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;
  }
  [data-noodle="bucatini"] {
    --mn-bg: light-dark(#fcfcfb, #111111);
    --mn-surface: light-dark(#fcfcfb, #111111);
    --mn-surface-2: light-dark(#f2f2f0, #1b1b1b);
    --mn-fg: light-dark(#151515, #f0f0ee);
    --mn-muted: light-dark(#5e5e5e, #a0a09c);
    --mn-border: light-dark(#d9d9d6, #2c2c2c);
    --mn-input: light-dark(#8a8a86, #6b6b67);
    --mn-primary: light-dark(#151515, #f0f0ee);
    --mn-primary-fg: light-dark(#fcfcfb, #111111);
    --mn-secondary: light-dark(#f2f2f0, #1b1b1b);
    --mn-secondary-fg: light-dark(#151515, #f0f0ee);
    --mn-accent: light-dark(#b3261e, #f47c6c);
    --mn-accent-fg: light-dark(#ffffff, #2a0500);
    --mn-ring: light-dark(#151515, #f0f0ee);
    --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(#151515, #f0f0ee);
    --mn-secondary-text: light-dark(#727271, #7d7d7c);
    --mn-accent-text: light-dark(#b3261e, #f47c6c);
    --mn-success-text: light-dark(#15773a, #4ade80);
    --mn-warning-text: light-dark(#a74e0a, #fbbf24);
    --mn-danger-text: light-dark(#c42424, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#151515, #f0f0ee);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mn-font-heading: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 600;
    --mn-radius-field: 999px;
    --mn-radius-box: 18px;
    --mn-radius-badge: 999px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --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;
  }
  [data-noodle="hofun"] {
    --mn-bg: light-dark(#faf9fb, #121116);
    --mn-surface: light-dark(#ffffff, #19181e);
    --mn-surface-2: light-dark(#f1eff5, #232029);
    --mn-fg: light-dark(#1d1b22, #f3f1f7);
    --mn-muted: light-dark(#5f5b69, #a8a3b3);
    --mn-border: light-dark(#ebe8f0, #2b2833);
    --mn-input: light-dark(#dcd8e3, #3e3a48);
    --mn-primary: light-dark(#2c5f66, #8fd0d6);
    --mn-primary-fg: light-dark(#ffffff, #06262a);
    --mn-secondary: light-dark(#f1eff5, #232029);
    --mn-secondary-fg: light-dark(#1d1b22, #f3f1f7);
    --mn-accent: light-dark(#8a5a3c, #dcb392);
    --mn-accent-fg: light-dark(#ffffff, #231608);
    --mn-ring: light-dark(#2c5f66, #8fd0d6);
    --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(#2c5f66, #8fd0d6);
    --mn-secondary-text: light-dark(#727076, #87848c);
    --mn-accent-text: light-dark(#8a5a3c, #dcb392);
    --mn-success-text: light-dark(#16783b, #4ade80);
    --mn-warning-text: light-dark(#a84f0b, #fbbf24);
    --mn-danger-text: light-dark(#c52526, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#2c5f66, #8fd0d6);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: 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: 500;
    --mn-radius-field: 14px;
    --mn-radius-box: 24px;
    --mn-radius-badge: 8px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --mn-size-xs: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="hiyamugi"] {
    --mn-bg: light-dark(#fbfbfa, #0e0e10);
    --mn-surface: light-dark(#ffffff, #161618);
    --mn-surface-2: light-dark(#f3f3f2, #1f1f22);
    --mn-fg: light-dark(#1b1b1d, #f4f4f5);
    --mn-muted: light-dark(#616166, #a1a1a8);
    --mn-border: light-dark(#e8e8e6, #2a2a2e);
    --mn-input: light-dark(#d3d3d1, #44444a);
    --mn-primary: light-dark(#1b1b1d, #f4f4f5);
    --mn-primary-fg: light-dark(#ffffff, #1b1b1d);
    --mn-secondary: light-dark(#f3f3f2, #1f1f22);
    --mn-secondary-fg: light-dark(#1b1b1d, #f4f4f5);
    --mn-accent: light-dark(#c92a63, #f27aa6);
    --mn-accent-fg: light-dark(#ffffff, #2a0715);
    --mn-ring: light-dark(#c92a63, #f27aa6);
    --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(#1b1b1d, #f4f4f5);
    --mn-secondary-text: light-dark(#717172, #818183);
    --mn-accent-text: light-dark(#bf295f, #f27aa6);
    --mn-success-text: light-dark(#15783a, #4ade80);
    --mn-warning-text: light-dark(#a84f0b, #fbbf24);
    --mn-danger-text: light-dark(#c52525, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#1b1b1d, #f4f4f5);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: 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: 500;
    --mn-radius-field: 8px;
    --mn-radius-box: 12px;
    --mn-radius-badge: 6px;
    --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: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="ramyeon"] {
    --mn-bg: light-dark(#f7f7f4, #0b0b0a);
    --mn-surface: light-dark(#ffffff, #121211);
    --mn-surface-2: light-dark(#eeeeea, #1b1b19);
    --mn-fg: light-dark(#111111, #e9e9e4);
    --mn-muted: light-dark(#595955, #9d9d97);
    --mn-border: light-dark(#d9d9d4, #2a2a27);
    --mn-input: light-dark(#a9a9a3, #55554f);
    --mn-primary: light-dark(#111111, #e9e9e4);
    --mn-primary-fg: light-dark(#f7f7f4, #0b0b0a);
    --mn-secondary: light-dark(#eeeeea, #1b1b19);
    --mn-secondary-fg: light-dark(#111111, #e9e9e4);
    --mn-accent: light-dark(#a34c05, #fbbf24);
    --mn-accent-fg: light-dark(#ffffff, #1f1300);
    --mn-ring: light-dark(#a34c05, #fbbf24);
    --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(#111111, #e9e9e4);
    --mn-secondary-text: light-dark(#6e6e6c, #7e7e7a);
    --mn-accent-text: light-dark(#a34c05, #fbbf24);
    --mn-success-text: light-dark(#15793a, #4ade80);
    --mn-warning-text: light-dark(#aa4f09, #fbbf24);
    --mn-danger-text: light-dark(#c82424, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#111111, #e9e9e4);
    --mn-font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-font-heading: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 700;
    --mn-radius-field: 0px;
    --mn-radius-box: 0px;
    --mn-radius-badge: 0px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --mn-size-xs: 24px;
    --mn-size-sm: 28px;
    --mn-size-md: 34px;
    --mn-size-lg: 42px;
    --mn-text-sm: 13px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="fettuccine"] {
    --mn-bg: light-dark(#f8fafd, #131314);
    --mn-surface: light-dark(#ffffff, #1e1f20);
    --mn-surface-2: light-dark(#e9eef6, #282a2c);
    --mn-fg: light-dark(#1f1f1f, #e3e3e3);
    --mn-muted: light-dark(#444746, #c4c7c5);
    --mn-border: light-dark(#dde3ea, #333537);
    --mn-input: light-dark(#747775, #8e918f);
    --mn-primary: light-dark(#0b57d0, #a8c7fa);
    --mn-primary-fg: light-dark(#ffffff, #062e6f);
    --mn-secondary: light-dark(#d3e3fd, #004a77);
    --mn-secondary-fg: light-dark(#041e49, #c2e7ff);
    --mn-accent: light-dark(#146c2e, #6dd58c);
    --mn-accent-fg: light-dark(#ffffff, #0a3818);
    --mn-ring: light-dark(#0b57d0, #a8c7fa);
    --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(#0b57d0, #a8c7fa);
    --mn-secondary-text: light-dark(#6b717c, #6890a9);
    --mn-accent-text: light-dark(#146c2e, #6dd58c);
    --mn-success-text: light-dark(#16783b, #4ade80);
    --mn-warning-text: light-dark(#a84f0b, #fbbf24);
    --mn-danger-text: light-dark(#c52525, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#0b57d0, #a8c7fa);
    --mn-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "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: 400;
    --mn-radius-field: 12px;
    --mn-radius-box: 20px;
    --mn-radius-badge: 8px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --mn-size-xs: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="lasagne"] {
    --mn-bg: light-dark(#fbf4e4, #1a110c);
    --mn-surface: light-dark(#fffaf0, #22160f);
    --mn-surface-2: light-dark(#f3e7cc, #2e1e15);
    --mn-fg: light-dark(#2a160f, #fbefdc);
    --mn-muted: light-dark(#6e5446, #c3a993);
    --mn-border: light-dark(#ead9b8, #3a281d);
    --mn-input: light-dark(#d8c29a, #5a4130);
    --mn-primary: light-dark(#b8322a, #ef6b5f);
    --mn-primary-fg: light-dark(#ffffff, #2a0703);
    --mn-secondary: light-dark(#f3e7cc, #2e1e15);
    --mn-secondary-fg: light-dark(#2a160f, #fbefdc);
    --mn-accent: light-dark(#2e6b3a, #7cc48a);
    --mn-accent-fg: light-dark(#ffffff, #0b2410);
    --mn-ring: light-dark(#b8322a, #ef6b5f);
    --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(#b8322a, #ef6b5f);
    --mn-secondary-text: light-dark(#7a6a5b, #908275);
    --mn-accent-text: light-dark(#2e6b3a, #7cc48a);
    --mn-success-text: light-dark(#177538, #4ade80);
    --mn-warning-text: light-dark(#a64d0a, #fbbf24);
    --mn-danger-text: light-dark(#c32423, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#b8322a, #ef6b5f);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: 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: 750;
    --mn-radius-field: 6px;
    --mn-radius-box: 10px;
    --mn-radius-badge: 6px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --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;
  }
  [data-noodle="pappardelle"] {
    --mn-bg: light-dark(#f6f4ef, #10130f);
    --mn-surface: light-dark(#ffffff, #181c16);
    --mn-surface-2: light-dark(#ece8de, #22271f);
    --mn-fg: light-dark(#1c1f1a, #eef1ea);
    --mn-muted: light-dark(#5d6158, #a3aa9c);
    --mn-border: light-dark(#e2ddd1, #2b3127);
    --mn-input: light-dark(#cbc5b6, #465040);
    --mn-primary: light-dark(#1f5f4a, #6fcfae);
    --mn-primary-fg: light-dark(#ffffff, #04241a);
    --mn-secondary: light-dark(#ece8de, #22271f);
    --mn-secondary-fg: light-dark(#1c1f1a, #eef1ea);
    --mn-accent: light-dark(#e9b949, #f1c95e);
    --mn-accent-fg: light-dark(#2b1f00, #2b1f00);
    --mn-ring: light-dark(#1f5f4a, #6fcfae);
    --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(#1f5f4a, #6fcfae);
    --mn-secondary-text: light-dark(#6f6f68, #848880);
    --mn-accent-text: light-dark(#826c32, #f1c95e);
    --mn-success-text: light-dark(#16783a, #4ade80);
    --mn-warning-text: light-dark(#a84f0a, #fbbf24);
    --mn-danger-text: light-dark(#c52525, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#1f5f4a, #6fcfae);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mn-font-heading: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 700;
    --mn-radius-field: 4px;
    --mn-radius-box: 8px;
    --mn-radius-badge: 4px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --mn-size-xs: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="paccheri"] {
    --mn-bg: light-dark(#f5f1e8, #101010);
    --mn-surface: light-dark(#fffdf8, #181818);
    --mn-surface-2: light-dark(#ebe5d7, #222222);
    --mn-fg: light-dark(#141414, #f5f1e8);
    --mn-muted: light-dark(#545454, #aeaaa0);
    --mn-border: light-dark(#ddd6c6, #333333);
    --mn-input: light-dark(#bdb5a4, #555555);
    --mn-primary: light-dark(#1d4ed8, #8fb0ff);
    --mn-primary-fg: light-dark(#ffffff, #07153d);
    --mn-secondary: light-dark(#f3c623, #f3c623);
    --mn-secondary-fg: light-dark(#141414, #141414);
    --mn-accent: light-dark(#c92a1c, #ff7a6e);
    --mn-accent-fg: light-dark(#ffffff, #2b0501);
    --mn-ring: light-dark(#1d4ed8, #8fb0ff);
    --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(#1d4ed8, #8fb0ff);
    --mn-secondary-text: light-dark(#7f691b, #f3c623);
    --mn-accent-text: light-dark(#c2291c, #ff7a6e);
    --mn-success-text: light-dark(#15773a, #4ade80);
    --mn-warning-text: light-dark(#a74e0a, #fbbf24);
    --mn-danger-text: light-dark(#c42424, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#1d4ed8, #8fb0ff);
    --mn-font: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, ui-sans-serif, system-ui, sans-serif;
    --mn-font-heading: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, ui-sans-serif, system-ui, sans-serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 800;
    --mn-radius-field: 0px;
    --mn-radius-box: 0px;
    --mn-radius-badge: 999px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --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;
  }
  [data-noodle="farfalle"] {
    --mn-bg: light-dark(#fff8f5, #17121a);
    --mn-surface: light-dark(#ffffff, #1f1823);
    --mn-surface-2: light-dark(#fdebe6, #2a2130);
    --mn-fg: light-dark(#2a1f2d, #fbeff5);
    --mn-muted: light-dark(#6d5f70, #bca9c1);
    --mn-border: light-dark(#f3dcd6, #352a3b);
    --mn-input: light-dark(#e3c3bb, #52435a);
    --mn-primary: light-dark(#b5305e, #ff8db4);
    --mn-primary-fg: light-dark(#ffffff, #3a0418);
    --mn-secondary: light-dark(#e5f5ee, #1e3329);
    --mn-secondary-fg: light-dark(#1f3a2e, #d9f5e7);
    --mn-accent: light-dark(#6f4fcf, #b8a4ff);
    --mn-accent-fg: light-dark(#ffffff, #1c0f4a);
    --mn-ring: light-dark(#b5305e, #ff8db4);
    --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(#b5305e, #ff8db4);
    --mn-secondary-text: light-dark(#717076, #7f8683);
    --mn-accent-text: light-dark(#6f4fcf, #b8a4ff);
    --mn-success-text: light-dark(#17783c, #4ade80);
    --mn-warning-text: light-dark(#a94f0c, #fbbf24);
    --mn-danger-text: light-dark(#c72527, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#b5305e, #ff8db4);
    --mn-font: ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mn-font-heading: ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 700;
    --mn-radius-field: 12px;
    --mn-radius-box: 18px;
    --mn-radius-badge: 999px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --mn-size-xs: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="yinzhen"] {
    --mn-bg: light-dark(#f4f4f2, #000000);
    --mn-surface: light-dark(#ffffff, #0f0f0f);
    --mn-surface-2: light-dark(#ebebe8, #1a1a1a);
    --mn-fg: light-dark(#0d0d0d, #f2f2f2);
    --mn-muted: light-dark(#5c5c5a, #9e9e9e);
    --mn-border: light-dark(#dcdcd8, #262626);
    --mn-input: light-dark(#b3b3ad, #4a4a4a);
    --mn-primary: light-dark(#0d0d0d, #f2f2f2);
    --mn-primary-fg: light-dark(#ffffff, #000000);
    --mn-secondary: light-dark(#ebebe8, #1a1a1a);
    --mn-secondary-fg: light-dark(#0d0d0d, #f2f2f2);
    --mn-accent: light-dark(#c8102e, #ff4545);
    --mn-accent-fg: light-dark(#ffffff, #000000);
    --mn-ring: light-dark(#c8102e, #ff4545);
    --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(#0d0d0d, #f2f2f2);
    --mn-secondary-text: light-dark(#6f6f6d, #7d7d7d);
    --mn-accent-text: light-dark(#c8102e, #ff4545);
    --mn-success-text: light-dark(#15793a, #4ade80);
    --mn-warning-text: light-dark(#aa4f09, #fbbf24);
    --mn-danger-text: light-dark(#c72424, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#0d0d0d, #f2f2f2);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 500;
    --mn-radius-field: 999px;
    --mn-radius-box: 20px;
    --mn-radius-badge: 999px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --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;
  }
  [data-noodle="quadretti"] {
    --mn-bg: light-dark(#fbfcff, #0a0f1f);
    --mn-surface: light-dark(#ffffff, #0f1630);
    --mn-surface-2: light-dark(#eef2fb, #16203f);
    --mn-fg: light-dark(#0f1830, #eef2ff);
    --mn-muted: light-dark(#505a75, #9aa6c7);
    --mn-border: light-dark(#d5ddef, #22305a);
    --mn-input: light-dark(#9fb0d6, #3c4f8a);
    --mn-primary: light-dark(#1d3fbf, #8ea8ff);
    --mn-primary-fg: light-dark(#ffffff, #0a1030);
    --mn-secondary: light-dark(#eef2fb, #16203f);
    --mn-secondary-fg: light-dark(#0f1830, #eef2ff);
    --mn-accent: light-dark(#c7381a, #ff8a66);
    --mn-accent-fg: light-dark(#ffffff, #2a0a00);
    --mn-ring: light-dark(#1d3fbf, #8ea8ff);
    --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(#1d3fbf, #8ea8ff);
    --mn-secondary-text: light-dark(#6d7485, #798197);
    --mn-accent-text: light-dark(#bc361b, #ff8a66);
    --mn-success-text: light-dark(#15783c, #4ade80);
    --mn-warning-text: light-dark(#aa4f0b, #fbbf24);
    --mn-danger-text: light-dark(#c82527, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#1d3fbf, #8ea8ff);
    --mn-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "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: 700;
    --mn-radius-field: 0px;
    --mn-radius-box: 0px;
    --mn-radius-badge: 0px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --mn-size-xs: 24px;
    --mn-size-sm: 28px;
    --mn-size-md: 34px;
    --mn-size-lg: 42px;
    --mn-text-sm: 13px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="acini"] {
    --mn-bg: light-dark(#fbf9f4, #11100e);
    --mn-surface: light-dark(#fffefb, #191815);
    --mn-surface-2: light-dark(#f1ede3, #22201c);
    --mn-fg: light-dark(#1b1a17, #f2eee5);
    --mn-muted: light-dark(#5f5b52, #a9a397);
    --mn-border: light-dark(#e3ddcf, #2d2a25);
    --mn-input: light-dark(#b9b1a0, #5b564c);
    --mn-primary: light-dark(#1b1a17, #f2eee5);
    --mn-primary-fg: light-dark(#ffffff, #1b1a17);
    --mn-secondary: light-dark(#f1ede3, #22201c);
    --mn-secondary-fg: light-dark(#1b1a17, #f2eee5);
    --mn-accent: light-dark(#0f766e, #5eead4);
    --mn-accent-fg: light-dark(#ffffff, #04201c);
    --mn-ring: light-dark(#0f766e, #5eead4);
    --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(#1b1a17, #f2eee5);
    --mn-secondary-text: light-dark(#75736d, #86837c);
    --mn-accent-text: light-dark(#0f746c, #5eead4);
    --mn-success-text: light-dark(#15783a, #4ade80);
    --mn-warning-text: light-dark(#a84e0a, #fbbf24);
    --mn-danger-text: light-dark(#c52524, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#1b1a17, #f2eee5);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mn-font-heading: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 650;
    --mn-radius-field: 8px;
    --mn-radius-box: 12px;
    --mn-radius-badge: 999px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --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;
  }
  [data-noodle="kalguksu"] {
    --mn-bg: light-dark(#ffffff, #0a0a0a);
    --mn-surface: light-dark(#ffffff, #111111);
    --mn-surface-2: light-dark(#f4f4f3, #1b1b1b);
    --mn-fg: light-dark(#0a0a0a, #ededed);
    --mn-muted: light-dark(#5e5e5e, #a3a3a3);
    --mn-border: light-dark(#e6e6e6, #262626);
    --mn-input: light-dark(#d0d0d0, #3b3b3b);
    --mn-primary: light-dark(#0a0a0a, #ededed);
    --mn-primary-fg: light-dark(#ffffff, #0a0a0a);
    --mn-secondary: light-dark(#f4f4f3, #1b1b1b);
    --mn-secondary-fg: light-dark(#0a0a0a, #ededed);
    --mn-accent: light-dark(#2f6f3e, #86c795);
    --mn-accent-fg: light-dark(#ffffff, #0b1f10);
    --mn-ring: light-dark(#2f6f3e, #86c795);
    --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(#717171, #808080);
    --mn-accent-text: light-dark(#2f6f3e, #86c795);
    --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: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mn-font-heading: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, 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: 8px;
    --mn-radius-badge: 0px;
    --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;
  }
  [data-noodle="sanuki"] {
    --mn-bg: light-dark(#f7f6f2, #0e0e0d);
    --mn-surface: light-dark(#ffffff, #161615);
    --mn-surface-2: light-dark(#eeece6, #21201e);
    --mn-fg: light-dark(#121212, #f2f1ec);
    --mn-muted: light-dark(#595650, #a8a59c);
    --mn-border: light-dark(#121212, #f2f1ec);
    --mn-input: light-dark(#121212, #f2f1ec);
    --mn-primary: light-dark(#1e3a8a, #93b4ff);
    --mn-primary-fg: light-dark(#ffffff, #0b1633);
    --mn-secondary: light-dark(#eeece6, #21201e);
    --mn-secondary-fg: light-dark(#121212, #f2f1ec);
    --mn-accent: light-dark(#b45309, #f59e0b);
    --mn-accent-fg: light-dark(#ffffff, #1f1300);
    --mn-ring: light-dark(#1e3a8a, #93b4ff);
    --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(#1e3a8a, #93b4ff);
    --mn-secondary-text: light-dark(#6e6e6b, #81807d);
    --mn-accent-text: light-dark(#aa4f0a, #f59e0b);
    --mn-success-text: light-dark(#15793a, #4ade80);
    --mn-warning-text: light-dark(#aa4f0a, #fbbf24);
    --mn-danger-text: light-dark(#c82424, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#1e3a8a, #93b4ff);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: 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: 800;
    --mn-radius-field: 0px;
    --mn-radius-box: 0px;
    --mn-radius-badge: 0px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --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;
  }
  [data-noodle="hakata"] {
    --mn-bg: light-dark(#f7f7f5, #0c0c0c);
    --mn-surface: light-dark(#ffffff, #141414);
    --mn-surface-2: light-dark(#efefec, #1e1e1e);
    --mn-fg: light-dark(#111111, #f0f0ee);
    --mn-muted: light-dark(#5a5a5a, #a0a09c);
    --mn-border: light-dark(#e2e2de, #2a2a2a);
    --mn-input: light-dark(#c4c4bf, #444444);
    --mn-primary: light-dark(#111111, #f0f0ee);
    --mn-primary-fg: light-dark(#ffffff, #111111);
    --mn-secondary: light-dark(#efefec, #1e1e1e);
    --mn-secondary-fg: light-dark(#111111, #f0f0ee);
    --mn-accent: light-dark(#d61f4f, #ff5c85);
    --mn-accent-fg: light-dark(#ffffff, #2a0510);
    --mn-ring: light-dark(#d61f4f, #ff5c85);
    --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(#111111, #f0f0ee);
    --mn-secondary-text: light-dark(#6e6e6d, #7f7f7e);
    --mn-accent-text: light-dark(#c61e4a, #ff5c85);
    --mn-success-text: light-dark(#15793a, #4ade80);
    --mn-warning-text: light-dark(#aa4f09, #fbbf24);
    --mn-danger-text: light-dark(#c82424, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#111111, #f0f0ee);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: 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: 800;
    --mn-radius-field: 3px;
    --mn-radius-box: 4px;
    --mn-radius-badge: 2px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --mn-size-xs: 24px;
    --mn-size-sm: 28px;
    --mn-size-md: 34px;
    --mn-size-lg: 42px;
    --mn-text-sm: 13px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="ditalini"] {
    --mn-bg: light-dark(#f7f8fa, #0b0f16);
    --mn-surface: light-dark(#ffffff, #111722);
    --mn-surface-2: light-dark(#eef1f5, #19212f);
    --mn-fg: light-dark(#111827, #e8edf5);
    --mn-muted: light-dark(#4b5563, #9aa6b8);
    --mn-border: light-dark(#dde2ea, #263042);
    --mn-input: light-dark(#c3cad6, #3b475c);
    --mn-primary: light-dark(#1d3557, #9dbbe6);
    --mn-primary-fg: light-dark(#ffffff, #0b1a30);
    --mn-secondary: light-dark(#e8edf5, #1c2638);
    --mn-secondary-fg: light-dark(#1d3557, #e8edf5);
    --mn-accent: light-dark(#0f766e, #5eead4);
    --mn-accent-fg: light-dark(#ffffff, #042f2b);
    --mn-ring: light-dark(#2563eb, #7aa7ff);
    --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(#1d3557, #9dbbe6);
    --mn-secondary-text: light-dark(#6b717e, #7a828f);
    --mn-accent-text: light-dark(#0f766e, #5eead4);
    --mn-success-text: light-dark(#15783b, #4ade80);
    --mn-warning-text: light-dark(#aa4f0b, #fbbf24);
    --mn-danger-text: light-dark(#c82526, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#1d3557, #9dbbe6);
    --mn-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "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: 4px;
    --mn-radius-box: 6px;
    --mn-radius-badge: 4px;
    --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: 24px;
    --mn-size-sm: 28px;
    --mn-size-md: 34px;
    --mn-size-lg: 42px;
    --mn-text-sm: 13px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="juksing"] {
    --mn-bg: light-dark(#f6f6f0, #0d100c);
    --mn-surface: light-dark(#ffffff, #141812);
    --mn-surface-2: light-dark(#ecece3, #1c211a);
    --mn-fg: light-dark(#151a14, #eef1e8);
    --mn-muted: light-dark(#5b6356, #a1ab98);
    --mn-border: light-dark(#dfe2d6, #283024);
    --mn-input: light-dark(#b3baa7, #4b5644);
    --mn-primary: light-dark(#33513a, #a9d3a4);
    --mn-primary-fg: light-dark(#ffffff, #0e1f10);
    --mn-secondary: light-dark(#ecece3, #1c211a);
    --mn-secondary-fg: light-dark(#151a14, #eef1e8);
    --mn-accent: light-dark(#8f5b0e, #e8b45a);
    --mn-accent-fg: light-dark(#ffffff, #241603);
    --mn-ring: light-dark(#33513a, #a9d3a4);
    --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(#33513a, #a9d3a4);
    --mn-secondary-text: light-dark(#6f726b, #81857d);
    --mn-accent-text: light-dark(#8f5b0e, #e8b45a);
    --mn-success-text: light-dark(#15783a, #4ade80);
    --mn-warning-text: light-dark(#a74e0a, #fbbf24);
    --mn-danger-text: light-dark(#c82524, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#33513a, #a9d3a4);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: 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: 650;
    --mn-radius-field: 4px;
    --mn-radius-box: 6px;
    --mn-radius-badge: 3px;
    --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;
  }
  [data-noodle="kishimen"] {
    --mn-bg: light-dark(#fbfaf6, #15120e);
    --mn-surface: light-dark(#ffffff, #1c1813);
    --mn-surface-2: light-dark(#f3f0e8, #26211a);
    --mn-fg: light-dark(#221d17, #f3eee5);
    --mn-muted: light-dark(#625a4e, #aca290);
    --mn-border: light-dark(#e7e1d4, #342d24);
    --mn-input: light-dark(#d3cbba, #483f33);
    --mn-primary: light-dark(#9a4a3c, #f0a594);
    --mn-primary-fg: light-dark(#ffffff, #2a0e08);
    --mn-secondary: light-dark(#f3e7e1, #26211a);
    --mn-secondary-fg: light-dark(#6b2e24, #f3eee5);
    --mn-accent: light-dark(#3f7d3a, #86c77e);
    --mn-accent-fg: light-dark(#ffffff, #0b2408);
    --mn-ring: light-dark(#9a4a3c, #f0a594);
    --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(#9a4a3c, #f0a594);
    --mn-secondary-text: light-dark(#7a726c, #88837b);
    --mn-accent-text: light-dark(#3d7537, #86c77e);
    --mn-success-text: light-dark(#16783a, #4ade80);
    --mn-warning-text: light-dark(#a84f0a, #fbbf24);
    --mn-danger-text: light-dark(#c62524, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#9a4a3c, #f0a594);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: 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: 650;
    --mn-radius-field: 3px;
    --mn-radius-box: 5px;
    --mn-radius-badge: 2px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --mn-size-xs: 24px;
    --mn-size-sm: 28px;
    --mn-size-md: 34px;
    --mn-size-lg: 42px;
    --mn-text-sm: 13px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="lamian"] {
    --mn-bg: light-dark(#fbfbfe, #0b0c18);
    --mn-surface: light-dark(#ffffff, #12142a);
    --mn-surface-2: light-dark(#f1f2f9, #1b1e38);
    --mn-fg: light-dark(#111327, #eef0ff);
    --mn-muted: light-dark(#5b5e78, #9da1c4);
    --mn-border: light-dark(#e3e5f0, #262a4a);
    --mn-input: light-dark(#cfd2e3, #393e68);
    --mn-primary: light-dark(#1f4fd6, #86a8ff);
    --mn-primary-fg: light-dark(#ffffff, #081433);
    --mn-secondary: light-dark(#e9eefb, #1b1e38);
    --mn-secondary-fg: light-dark(#16307a, #eef0ff);
    --mn-accent: light-dark(#0e7490, #22d3ee);
    --mn-accent-fg: light-dark(#ffffff, #032a31);
    --mn-ring: light-dark(#1f4fd6, #86a8ff);
    --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(#1f4fd6, #86a8ff);
    --mn-secondary-text: light-dark(#707384, #7c7f94);
    --mn-accent-text: light-dark(#0e728e, #22d3ee);
    --mn-success-text: light-dark(#15793c, #4ade80);
    --mn-warning-text: light-dark(#aa4f0b, #fbbf24);
    --mn-danger-text: light-dark(#c82426, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#1f4fd6, #86a8ff);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: 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: 650;
    --mn-radius-field: 8px;
    --mn-radius-box: 12px;
    --mn-radius-badge: 999px;
    --mn-shadow-sm: 0 1px 3px rgb(0 0 0 / .08);
    --mn-shadow-md: 0 4px 14px -4px rgb(0 0 0 / .12), 0 2px 4px -2px rgb(0 0 0 / .06);
    --mn-shadow-lg: 0 20px 48px -12px rgb(0 0 0 / .25), 0 8px 16px -8px rgb(0 0 0 / .10);
    --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;
  }
  [data-noodle="somen"] {
    --mn-bg: light-dark(#f8fafc, #070b12);
    --mn-surface: light-dark(#ffffff, #0c121c);
    --mn-surface-2: light-dark(#f1f5f9, #141c28);
    --mn-fg: light-dark(#0b1220, #eef3f9);
    --mn-muted: light-dark(#566174, #93a1b5);
    --mn-border: light-dark(#e2e8f0, #1e2835);
    --mn-input: light-dark(#cbd5e1, #2d3a4c);
    --mn-primary: light-dark(#0b1220, #eef3f9);
    --mn-primary-fg: light-dark(#f8fafc, #0b1220);
    --mn-secondary: light-dark(#f1f5f9, #141c28);
    --mn-secondary-fg: light-dark(#0b1220, #eef3f9);
    --mn-accent: light-dark(#0369a1, #7dd3fc);
    --mn-accent-fg: light-dark(#ffffff, #04202e);
    --mn-ring: light-dark(#475569, #93a1b5);
    --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(#0b1220, #eef3f9);
    --mn-secondary-text: light-dark(#6c717b, #787f88);
    --mn-accent-text: light-dark(#0369a1, #7dd3fc);
    --mn-success-text: light-dark(#14793b, #4ade80);
    --mn-warning-text: light-dark(#aa4f0a, #fbbf24);
    --mn-danger-text: light-dark(#c72425, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#0b1220, #eef3f9);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: 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: 300;
    --mn-radius-field: 2px;
    --mn-radius-box: 4px;
    --mn-radius-badge: 2px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --mn-size-xs: 24px;
    --mn-size-sm: 28px;
    --mn-size-md: 34px;
    --mn-size-lg: 42px;
    --mn-text-sm: 13px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="capellini"] {
    --mn-bg: light-dark(#fdfcf8, #121210);
    --mn-surface: light-dark(#ffffff, #1a1a17);
    --mn-surface-2: light-dark(#f5f3ea, #23231f);
    --mn-fg: light-dark(#26241f, #f3f1e8);
    --mn-muted: light-dark(#6b675c, #aaa697);
    --mn-border: light-dark(#ebe8dd, #2d2c27);
    --mn-input: light-dark(#d8d4c6, #45433b);
    --mn-primary: light-dark(#26241f, #f3f1e8);
    --mn-primary-fg: light-dark(#ffffff, #1b1a16);
    --mn-secondary: light-dark(#f5f3ea, #23231f);
    --mn-secondary-fg: light-dark(#26241f, #f3f1e8);
    --mn-accent: light-dark(#e8d44d, #efe06a);
    --mn-accent-fg: light-dark(#2b2500, #262000);
    --mn-ring: light-dark(#8a7a0a, #efe06a);
    --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(#26241f, #f3f1e8);
    --mn-secondary-text: light-dark(#75736c, #87867f);
    --mn-accent-text: light-dark(#7b7133, #efe06a);
    --mn-success-text: light-dark(#16793b, #4ade80);
    --mn-warning-text: light-dark(#a94f0b, #fbbf24);
    --mn-danger-text: light-dark(#c62625, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#26241f, #f3f1e8);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: 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: 300;
    --mn-radius-field: 14px;
    --mn-radius-box: 20px;
    --mn-radius-badge: 999px;
    --mn-shadow-sm: 0 1px 3px rgb(0 0 0 / .08);
    --mn-shadow-md: 0 4px 14px -4px rgb(0 0 0 / .12), 0 2px 4px -2px rgb(0 0 0 / .06);
    --mn-shadow-lg: 0 20px 48px -12px rgb(0 0 0 / .25), 0 8px 16px -8px rgb(0 0 0 / .10);
    --mn-size-xs: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="longxu"] {
    --mn-bg: light-dark(#f8f5ee, #11100d);
    --mn-surface: light-dark(#fffdf8, #181612);
    --mn-surface-2: light-dark(#f0ebe0, #221f1a);
    --mn-fg: light-dark(#1a1712, #f2ede3);
    --mn-muted: light-dark(#625b50, #a79f92);
    --mn-border: light-dark(#e3dccd, #2f2b24);
    --mn-input: light-dark(#b8ad97, #5a5347);
    --mn-primary: light-dark(#1a1712, #f2ede3);
    --mn-primary-fg: light-dark(#fffdf8, #1a1712);
    --mn-secondary: light-dark(#f0ebe0, #221f1a);
    --mn-secondary-fg: light-dark(#1a1712, #f2ede3);
    --mn-accent: light-dark(#8a2a1c, #e59a8a);
    --mn-accent-fg: light-dark(#ffffff, #2a0a05);
    --mn-ring: light-dark(#1a1712, #f2ede3);
    --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(#1a1712, #f2ede3);
    --mn-secondary-text: light-dark(#747069, #86827a);
    --mn-accent-text: light-dark(#8a2a1c, #e59a8a);
    --mn-success-text: light-dark(#15783a, #4ade80);
    --mn-warning-text: light-dark(#a84e0a, #fbbf24);
    --mn-danger-text: light-dark(#c52424, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#1a1712, #f2ede3);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 400;
    --mn-radius-field: 3px;
    --mn-radius-box: 4px;
    --mn-radius-badge: 2px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --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;
  }
  [data-noodle="misua"] {
    --mn-bg: light-dark(#fbf9f5, #12100d);
    --mn-surface: light-dark(#ffffff, #191612);
    --mn-surface-2: light-dark(#f3efe7, #231f1a);
    --mn-fg: light-dark(#1f1b16, #f1ece3);
    --mn-muted: light-dark(#6a6258, #a99f91);
    --mn-border: light-dark(#e6dfd3, #302a23);
    --mn-input: light-dark(#c9bfae, #4a4238);
    --mn-primary: light-dark(#1f1b16, #f1ece3);
    --mn-primary-fg: light-dark(#fbf9f5, #1f1b16);
    --mn-secondary: light-dark(#f3efe7, #231f1a);
    --mn-secondary-fg: light-dark(#1f1b16, #f1ece3);
    --mn-accent: light-dark(#b3261e, #ff7b6e);
    --mn-accent-fg: light-dark(#ffffff, #2a0603);
    --mn-ring: light-dark(#b3261e, #ff7b6e);
    --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(#1f1b16, #f1ece3);
    --mn-secondary-text: light-dark(#74706a, #86817a);
    --mn-accent-text: light-dark(#b3261e, #ff7b6e);
    --mn-success-text: light-dark(#16783a, #4ade80);
    --mn-warning-text: light-dark(#a84f0a, #fbbf24);
    --mn-danger-text: light-dark(#c52524, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#1f1b16, #f1ece3);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 400;
    --mn-radius-field: 4px;
    --mn-radius-box: 6px;
    --mn-radius-badge: 999px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --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;
  }
  [data-noodle="bun"] {
    --mn-bg: light-dark(#fffafa, #170b0d);
    --mn-surface: light-dark(#ffffff, #1f0f12);
    --mn-surface-2: light-dark(#fcefef, #2b161a);
    --mn-fg: light-dark(#2a1215, #fcecee);
    --mn-muted: light-dark(#6e5156, #c09aa0);
    --mn-border: light-dark(#f3dfe1, #3a1f24);
    --mn-input: light-dark(#e3c2c7, #55303a);
    --mn-primary: light-dark(#e11d48, #fb7185);
    --mn-primary-fg: light-dark(#ffffff, #2a0610);
    --mn-secondary: light-dark(#fde8ea, #2b161a);
    --mn-secondary-fg: light-dark(#881337, #fcecee);
    --mn-accent: light-dark(#0f766e, #2dd4bf);
    --mn-accent-fg: light-dark(#ffffff, #042f2c);
    --mn-ring: light-dark(#e11d48, #fb7185);
    --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(#c71b41, #fb7185);
    --mn-secondary-text: light-dark(#836c6e, #8f7d80);
    --mn-accent-text: light-dark(#0f766e, #2dd4bf);
    --mn-success-text: light-dark(#16793b, #4ade80);
    --mn-warning-text: light-dark(#a94e0a, #fbbf24);
    --mn-danger-text: light-dark(#c72424, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#e11d48, #fb7185);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 650;
    --mn-radius-field: 10px;
    --mn-radius-box: 16px;
    --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;
  }
  [data-noodle="kuzukiri"] {
    --mn-bg: light-dark(#eef0f2, #07080a);
    --mn-surface: light-dark(#ffffff, #121418);
    --mn-surface-2: light-dark(#e6e9ec, #1b1e23);
    --mn-fg: light-dark(#0a0a0a, #f1f3f5);
    --mn-muted: light-dark(#555b62, #9ba2ab);
    --mn-border: light-dark(#dde1e5, #262a30);
    --mn-input: light-dark(#b9c0c7, #434a53);
    --mn-primary: light-dark(#0a0a0a, #f1f3f5);
    --mn-primary-fg: light-dark(#ffffff, #0a0a0a);
    --mn-secondary: light-dark(#e6e9ec, #1b1e23);
    --mn-secondary-fg: light-dark(#0a0a0a, #f1f3f5);
    --mn-accent: light-dark(#3b2a1e, #c9a88a);
    --mn-accent-fg: light-dark(#ffffff, #1c120a);
    --mn-ring: light-dark(#0a0a0a, #f1f3f5);
    --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, #f1f3f5);
    --mn-secondary-text: light-dark(#6b6c6d, #7d8084);
    --mn-accent-text: light-dark(#3b2a1e, #c9a88a);
    --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, #f1f3f5);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mn-font-heading: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 600;
    --mn-radius-field: 10px;
    --mn-radius-box: 18px;
    --mn-radius-badge: 999px;
    --mn-shadow-sm: 0 1px 3px rgb(0 0 0 / .08);
    --mn-shadow-md: 0 4px 14px -4px rgb(0 0 0 / .12), 0 2px 4px -2px rgb(0 0 0 / .06);
    --mn-shadow-lg: 0 20px 48px -12px rgb(0 0 0 / .25), 0 8px 16px -8px rgb(0 0 0 / .10);
    --mn-size-xs: 26px;
    --mn-size-sm: 32px;
    --mn-size-md: 38px;
    --mn-size-lg: 46px;
    --mn-text-sm: 14px;
    --mn-surface-alpha: 72%;
    --mn-backdrop: blur(18px) saturate(1.4);
    --mn-bg-image: radial-gradient(600px 420px at 88% 8%, light-dark(rgb(10 10 10 / .07), rgb(255 255 255 / .06)), transparent 62%), radial-gradient(900px 600px at 5% 0%, light-dark(#dde5ee, #121a24) 0%, transparent 60%), radial-gradient(800px 600px at 100% 100%, light-dark(#e3e7ea, #15171b) 0%, transparent 60%);
  }
  [data-noodle="sotanghon"] {
    --mn-bg: light-dark(#e9eef5, #05070c);
    --mn-surface: light-dark(#ffffff, #0f141c);
    --mn-surface-2: light-dark(#dfe6ee, #19202b);
    --mn-fg: light-dark(#0b1220, #eef3f9);
    --mn-muted: light-dark(#3d4858, #a3afc0);
    --mn-border: light-dark(#d5dde7, #252e3b);
    --mn-input: light-dark(#b3bfcd, #3b4658);
    --mn-primary: light-dark(#0b1220, #f2f6fb);
    --mn-primary-fg: light-dark(#ffffff, #0b1220);
    --mn-secondary: light-dark(#dfe6ee, #19202b);
    --mn-secondary-fg: light-dark(#0b1220, #eef3f9);
    --mn-accent: light-dark(#0e7490, #67d7ee);
    --mn-accent-fg: light-dark(#ffffff, #03222b);
    --mn-ring: light-dark(#0e7490, #67d7ee);
    --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(#0b1220, #f2f6fb);
    --mn-secondary-text: light-dark(#646b77, #7b818a);
    --mn-accent-text: light-dark(#0e728e, #67d7ee);
    --mn-success-text: light-dark(#14793b, #4ade80);
    --mn-warning-text: light-dark(#aa4f0a, #fbbf24);
    --mn-danger-text: light-dark(#c72425, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#0b1220, #f2f6fb);
    --mn-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable Text", "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: 650;
    --mn-radius-field: 14px;
    --mn-radius-box: 24px;
    --mn-radius-badge: 999px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --mn-size-xs: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 72%;
    --mn-backdrop: blur(18px) saturate(1.4);
    --mn-bg-image: radial-gradient(900px 600px at 0% 0%, light-dark(#b9e0ff, #0c3d63) 0%, transparent 62%), radial-gradient(800px 600px at 100% 8%, light-dark(#ffd6bd, #5c2b12) 0%, transparent 60%), radial-gradient(900px 700px at 55% 112%, light-dark(#c3f0da, #0b4638) 0%, transparent 62%);
  }
  [data-noodle="harusame"] {
    --mn-bg: light-dark(#eef2f7, #0a0f1a);
    --mn-surface: light-dark(#ffffff, #131b2b);
    --mn-surface-2: light-dark(#e4eaf2, #1c2536);
    --mn-fg: light-dark(#0f172a, #e8eef7);
    --mn-muted: light-dark(#4f5d70, #95a3b8);
    --mn-border: light-dark(#d8e0eb, #27334a);
    --mn-input: light-dark(#c3cedc, #374560);
    --mn-primary: light-dark(#0369a1, #38bdf8);
    --mn-primary-fg: light-dark(#ffffff, #04202e);
    --mn-secondary: light-dark(#e2e8f0, #1c2536);
    --mn-secondary-fg: light-dark(#0f172a, #e8eef7);
    --mn-accent: light-dark(#9a4a12, #fdba74);
    --mn-accent-fg: light-dark(#ffffff, #2a1403);
    --mn-ring: light-dark(#0369a1, #38bdf8);
    --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(#0369a1, #38bdf8);
    --mn-secondary-text: light-dark(#636b79, #7e8593);
    --mn-accent-text: light-dark(#9a4a12, #fdba74);
    --mn-success-text: light-dark(#15783b, #4ade80);
    --mn-warning-text: light-dark(#aa4f0b, #fbbf24);
    --mn-danger-text: light-dark(#c82526, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#0369a1, #38bdf8);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: 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: 650;
    --mn-radius-field: 12px;
    --mn-radius-box: 20px;
    --mn-radius-badge: 999px;
    --mn-shadow-sm: 0 1px 3px rgb(0 0 0 / .08);
    --mn-shadow-md: 0 4px 14px -4px rgb(0 0 0 / .12), 0 2px 4px -2px rgb(0 0 0 / .06);
    --mn-shadow-lg: 0 20px 48px -12px rgb(0 0 0 / .25), 0 8px 16px -8px rgb(0 0 0 / .10);
    --mn-size-xs: 26px;
    --mn-size-sm: 32px;
    --mn-size-md: 38px;
    --mn-size-lg: 46px;
    --mn-text-sm: 14px;
    --mn-surface-alpha: 72%;
    --mn-backdrop: blur(18px) saturate(1.4);
    --mn-bg-image: radial-gradient(1200px 600px at 10% -10%, light-dark(#dbeafe, #0c2744) 0%, transparent 60%), radial-gradient(900px 500px at 110% 10%, light-dark(#d9f2ee, #0b3330) 0%, transparent 55%);
  }
  [data-noodle="fensi"] {
    --mn-bg: light-dark(#eaf1f8, #060b14);
    --mn-surface: light-dark(#ffffff, #101826);
    --mn-surface-2: light-dark(#dde7f1, #1a2436);
    --mn-fg: light-dark(#0b1524, #eaf2fb);
    --mn-muted: light-dark(#46566b, #94a4ba);
    --mn-border: light-dark(#d4dfeb, #263349);
    --mn-input: light-dark(#b8c7d8, #3a4a64);
    --mn-primary: light-dark(#0b6e99, #5ccfff);
    --mn-primary-fg: light-dark(#ffffff, #03202e);
    --mn-secondary: light-dark(#dde7f1, #1a2436);
    --mn-secondary-fg: light-dark(#0b1524, #eaf2fb);
    --mn-accent: light-dark(#b4391f, #ffa98c);
    --mn-accent-fg: light-dark(#ffffff, #2e0a02);
    --mn-ring: light-dark(#0b6e99, #5ccfff);
    --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(#0b6e99, #5ccfff);
    --mn-secondary-text: light-dark(#636d7a, #7a8391);
    --mn-accent-text: light-dark(#b4391f, #ffa98c);
    --mn-success-text: light-dark(#14773b, #4ade80);
    --mn-warning-text: light-dark(#aa4f0b, #fbbf24);
    --mn-danger-text: light-dark(#c72426, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#0b6e99, #5ccfff);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: 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: 650;
    --mn-radius-field: 999px;
    --mn-radius-box: 28px;
    --mn-radius-badge: 999px;
    --mn-shadow-sm: 0 1px 3px rgb(0 0 0 / .08);
    --mn-shadow-md: 0 4px 14px -4px rgb(0 0 0 / .12), 0 2px 4px -2px rgb(0 0 0 / .06);
    --mn-shadow-lg: 0 20px 48px -12px rgb(0 0 0 / .25), 0 8px 16px -8px rgb(0 0 0 / .10);
    --mn-size-xs: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 72%;
    --mn-backdrop: blur(18px) saturate(1.4);
    --mn-bg-image: radial-gradient(700px 500px at 0% 0%, light-dark(#b7e3ff, #06395a) 0%, transparent 60%), radial-gradient(600px 500px at 100% 20%, light-dark(#ffdcc4, #56270f) 0%, transparent 60%), radial-gradient(700px 500px at 50% 110%, light-dark(#c5f7e1, #07423a) 0%, transparent 60%);
  }
  [data-noodle="tokoroten"] {
    --mn-bg: light-dark(#edf3f3, #081010);
    --mn-surface: light-dark(#ffffff, #0f1919);
    --mn-surface-2: light-dark(#e2ebeb, #172222);
    --mn-fg: light-dark(#0d1717, #e8f2f1);
    --mn-muted: light-dark(#4c5c5c, #93a7a5);
    --mn-border: light-dark(#d4e0e0, #233131);
    --mn-input: light-dark(#a9bcbc, #3e5251);
    --mn-primary: light-dark(#134e4a, #7dd3c7);
    --mn-primary-fg: light-dark(#ffffff, #062522);
    --mn-secondary: light-dark(#e2ebeb, #172222);
    --mn-secondary-fg: light-dark(#0d1717, #e8f2f1);
    --mn-accent: light-dark(#8a5a06, #facc15);
    --mn-accent-fg: light-dark(#ffffff, #1c1500);
    --mn-ring: light-dark(#134e4a, #7dd3c7);
    --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(#134e4a, #7dd3c7);
    --mn-secondary-text: light-dark(#667070, #7b8685);
    --mn-accent-text: light-dark(#8a5a06, #facc15);
    --mn-success-text: light-dark(#14783a, #4ade80);
    --mn-warning-text: light-dark(#aa4f0a, #fbbf24);
    --mn-danger-text: light-dark(#c72525, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#134e4a, #7dd3c7);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: 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: 4px;
    --mn-radius-box: 6px;
    --mn-radius-badge: 2px;
    --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: 72%;
    --mn-backdrop: blur(18px) saturate(1.4);
    --mn-bg-image: linear-gradient(135deg, light-dark(#dcefec, #0a1b19) 0%, light-dark(#eef4f4, #081010) 50%, light-dark(#e6ecf6, #0b1019) 100%);
  }
  [data-noodle="nagashi"] {
    --mn-bg: light-dark(#eef6fa, #061018);
    --mn-surface: light-dark(#ffffff, #0d1a24);
    --mn-surface-2: light-dark(#e2eef4, #15232f);
    --mn-fg: light-dark(#0b1a24, #e6f2f8);
    --mn-muted: light-dark(#48606e, #8fa8b8);
    --mn-border: light-dark(#d3e3ec, #1f3140);
    --mn-input: light-dark(#a9c2d0, #3a5264);
    --mn-primary: light-dark(#0b5f8f, #6cc4f2);
    --mn-primary-fg: light-dark(#ffffff, #031b2a);
    --mn-secondary: light-dark(#e2eef4, #15232f);
    --mn-secondary-fg: light-dark(#0b1a24, #e6f2f8);
    --mn-accent: light-dark(#3d6b1f, #a7d77a);
    --mn-accent-fg: light-dark(#ffffff, #132404);
    --mn-ring: light-dark(#0b5f8f, #6cc4f2);
    --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(#0b5f8f, #6cc4f2);
    --mn-secondary-text: light-dark(#616f77, #79868f);
    --mn-accent-text: light-dark(#3d6b1f, #a7d77a);
    --mn-success-text: light-dark(#14783b, #4ade80);
    --mn-warning-text: light-dark(#a64e0b, #fbbf24);
    --mn-danger-text: light-dark(#c72526, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#0b5f8f, #6cc4f2);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: 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: 14px;
    --mn-radius-box: 22px;
    --mn-radius-badge: 999px;
    --mn-shadow-sm: 0 1px 3px rgb(0 0 0 / .08);
    --mn-shadow-md: 0 4px 14px -4px rgb(0 0 0 / .12), 0 2px 4px -2px rgb(0 0 0 / .06);
    --mn-shadow-lg: 0 20px 48px -12px rgb(0 0 0 / .25), 0 8px 16px -8px rgb(0 0 0 / .10);
    --mn-size-xs: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 72%;
    --mn-backdrop: blur(18px) saturate(1.4);
    --mn-bg-image: linear-gradient(172deg, light-dark(#d9edf7, #07202e) 0%, light-dark(#eef6fa, #061018) 38%, light-dark(#e5f1ec, #0b1a14) 72%, light-dark(#eef6fa, #061018) 100%);
  }
  [data-noodle="liangfen"] {
    --mn-bg: light-dark(#e9f1eb, #08100b);
    --mn-surface: light-dark(#ffffff, #0f1a13);
    --mn-surface-2: light-dark(#dde8e0, #17241b);
    --mn-fg: light-dark(#101a13, #e8f2eb);
    --mn-muted: light-dark(#4b5d51, #93a89a);
    --mn-border: light-dark(#cfdcd2, #223328);
    --mn-input: light-dark(#a4b7a9, #3d5344);
    --mn-primary: light-dark(#b42318, #ff8a7a);
    --mn-primary-fg: light-dark(#ffffff, #2a0505);
    --mn-secondary: light-dark(#dde8e0, #17241b);
    --mn-secondary-fg: light-dark(#101a13, #e8f2eb);
    --mn-accent: light-dark(#4a3322, #d6b79c);
    --mn-accent-fg: light-dark(#ffffff, #1c1109);
    --mn-ring: light-dark(#b42318, #ff8a7a);
    --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(#b42318, #ff8a7a);
    --mn-secondary-text: light-dark(#626c65, #7b877f);
    --mn-accent-text: light-dark(#4a3322, #d6b79c);
    --mn-success-text: light-dark(#15783a, #4ade80);
    --mn-warning-text: light-dark(#a74e0a, #fbbf24);
    --mn-danger-text: light-dark(#c82524, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#b42318, #ff8a7a);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: 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: 700;
    --mn-radius-field: 8px;
    --mn-radius-box: 14px;
    --mn-radius-badge: 8px;
    --mn-shadow-sm: 0 1px 3px rgb(0 0 0 / .08);
    --mn-shadow-md: 0 4px 14px -4px rgb(0 0 0 / .12), 0 2px 4px -2px rgb(0 0 0 / .06);
    --mn-shadow-lg: 0 20px 48px -12px rgb(0 0 0 / .25), 0 8px 16px -8px rgb(0 0 0 / .10);
    --mn-size-xs: 26px;
    --mn-size-sm: 32px;
    --mn-size-md: 38px;
    --mn-size-lg: 46px;
    --mn-text-sm: 14px;
    --mn-surface-alpha: 72%;
    --mn-backdrop: blur(18px) saturate(1.4);
    --mn-bg-image: radial-gradient(800px 500px at 0% 0%, light-dark(#d6e9da, #0f2416) 0%, transparent 60%), radial-gradient(700px 500px at 100% 100%, light-dark(#e3ecdf, #141f10) 0%, transparent 60%);
  }
  [data-noodle="dangmyeon"] {
    --mn-bg: light-dark(#e7e3dd, #0f0d0b);
    --mn-surface: light-dark(#faf8f5, #1b1815);
    --mn-surface-2: light-dark(#dcd6ce, #26221e);
    --mn-fg: light-dark(#1d1915, #f1ebe3);
    --mn-muted: light-dark(#5b5249, #a8998a);
    --mn-border: light-dark(#cdc5ba, #3a332c);
    --mn-input: light-dark(#a99f92, #564c42);
    --mn-primary: light-dark(#a14a0d, #f5a524);
    --mn-primary-fg: light-dark(#ffffff, #1f1300);
    --mn-secondary: light-dark(#dcd6ce, #26221e);
    --mn-secondary-fg: light-dark(#1d1915, #f1ebe3);
    --mn-accent: light-dark(#3f6212, #a3d65c);
    --mn-accent-fg: light-dark(#ffffff, #132203);
    --mn-ring: light-dark(#a14a0d, #f5a524);
    --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(#a14a0d, #f5a524);
    --mn-secondary-text: light-dark(#69655f, #87827d);
    --mn-accent-text: light-dark(#3f6212, #a3d65c);
    --mn-success-text: light-dark(#167438, #4ade80);
    --mn-warning-text: light-dark(#a24c0a, #fbbf24);
    --mn-danger-text: light-dark(#c12424, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#a14a0d, #f5a524);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: 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: 700;
    --mn-radius-field: 12px;
    --mn-radius-box: 18px;
    --mn-radius-badge: 999px;
    --mn-shadow-sm: 0 1px 3px rgb(0 0 0 / .08);
    --mn-shadow-md: 0 4px 14px -4px rgb(0 0 0 / .12), 0 2px 4px -2px rgb(0 0 0 / .06);
    --mn-shadow-lg: 0 20px 48px -12px rgb(0 0 0 / .25), 0 8px 16px -8px rgb(0 0 0 / .10);
    --mn-size-xs: 26px;
    --mn-size-sm: 32px;
    --mn-size-md: 38px;
    --mn-size-lg: 46px;
    --mn-text-sm: 14px;
    --mn-surface-alpha: 72%;
    --mn-backdrop: blur(18px) saturate(1.4);
    --mn-bg-image: radial-gradient(800px 500px at 0% 0%, light-dark(#d8c7ad, #3a2a14) 0%, transparent 60%), radial-gradient(700px 500px at 100% 100%, light-dark(#c9d4b6, #1f2a12) 0%, transparent 60%);
  }
  [data-noodle="woonsen"] {
    --mn-bg: light-dark(#f5f7fb, #07080d);
    --mn-surface: light-dark(#ffffff, #11131c);
    --mn-surface-2: light-dark(#eceff6, #1a1d29);
    --mn-fg: light-dark(#111827, #eef1f8);
    --mn-muted: light-dark(#4b5563, #9aa3b5);
    --mn-border: light-dark(#dfe3ec, #272b3a);
    --mn-input: light-dark(#c3c9d6, #3b4154);
    --mn-primary: light-dark(#111827, #eef1f8);
    --mn-primary-fg: light-dark(#ffffff, #111827);
    --mn-secondary: light-dark(#eceff6, #1a1d29);
    --mn-secondary-fg: light-dark(#111827, #eef1f8);
    --mn-accent: light-dark(#3f6212, #bef264);
    --mn-accent-fg: light-dark(#ffffff, #1a2e05);
    --mn-ring: light-dark(#111827, #eef1f8);
    --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(#111827, #eef1f8);
    --mn-secondary-text: light-dark(#696e7a, #7c7f88);
    --mn-accent-text: light-dark(#3f6212, #bef264);
    --mn-success-text: light-dark(#15783b, #4ade80);
    --mn-warning-text: light-dark(#aa4f0b, #fbbf24);
    --mn-danger-text: light-dark(#c82526, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#111827, #eef1f8);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: 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: 650;
    --mn-radius-field: 10px;
    --mn-radius-box: 16px;
    --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: 72%;
    --mn-backdrop: blur(18px) saturate(1.4);
    --mn-bg-image: linear-gradient(135deg, light-dark(#f4f8fb, #070b10) 0%, light-dark(#f5f7fb, #07080d) 45%, light-dark(#f3fbef, #08110a) 100%);
  }
  [data-noodle="shirataki"] {
    --mn-bg: light-dark(#f5f6f5, #0f1211);
    --mn-surface: light-dark(#fbfcfb, #161a19);
    --mn-surface-2: light-dark(#eceeec, #1f2523);
    --mn-fg: light-dark(#1d2321, #eaf0ed);
    --mn-muted: light-dark(#56605b, #9aa7a1);
    --mn-border: light-dark(#dde2df, #2a322f);
    --mn-input: light-dark(#c7cfcb, #3a4541);
    --mn-primary: light-dark(#0f766e, #5eead4);
    --mn-primary-fg: light-dark(#ffffff, #042f2c);
    --mn-secondary: light-dark(#e4e9e6, #1f2523);
    --mn-secondary-fg: light-dark(#1d2321, #eaf0ed);
    --mn-accent: light-dark(#6d28d9, #c4b5fd);
    --mn-accent-fg: light-dark(#ffffff, #1a0b3a);
    --mn-ring: light-dark(#0f766e, #5eead4);
    --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(#10736b, #5eead4);
    --mn-secondary-text: light-dark(#6d7270, #808684);
    --mn-accent-text: light-dark(#6d28d9, #c4b5fd);
    --mn-success-text: light-dark(#16773a, #4ade80);
    --mn-warning-text: light-dark(#a54e0b, #fbbf24);
    --mn-danger-text: light-dark(#c12625, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#0f766e, #5eead4);
    --mn-font: ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mn-font-heading: ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 650;
    --mn-radius-field: 16px;
    --mn-radius-box: 26px;
    --mn-radius-badge: 999px;
    --mn-shadow-sm: 0 1px 3px rgb(0 0 0 / .08);
    --mn-shadow-md: 0 4px 14px -4px rgb(0 0 0 / .12), 0 2px 4px -2px rgb(0 0 0 / .06);
    --mn-shadow-lg: 0 20px 48px -12px rgb(0 0 0 / .25), 0 8px 16px -8px rgb(0 0 0 / .10);
    --mn-size-xs: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="chasoba"] {
    --mn-bg: light-dark(#f7f8f3, #10130d);
    --mn-surface: light-dark(#fdfdfa, #161a12);
    --mn-surface-2: light-dark(#ecefe3, #20261a);
    --mn-fg: light-dark(#1c2117, #eef1e6);
    --mn-muted: light-dark(#5b6452, #a3ab95);
    --mn-border: light-dark(#dde2d2, #2b3323);
    --mn-input: light-dark(#c7cfb8, #3f4a33);
    --mn-primary: light-dark(#4d7c0f, #a3e635);
    --mn-primary-fg: light-dark(#ffffff, #10130d);
    --mn-secondary: light-dark(#e6ebd9, #20261a);
    --mn-secondary-fg: light-dark(#1c2117, #eef1e6);
    --mn-accent: light-dark(#a16207, #facc15);
    --mn-accent-fg: light-dark(#ffffff, #1c1600);
    --mn-ring: light-dark(#4d7c0f, #a3e635);
    --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(#487310, #a3e635);
    --mn-secondary-text: light-dark(#6d7265, #83877c);
    --mn-accent-text: light-dark(#945c09, #facc15);
    --mn-success-text: light-dark(#16783a, #4ade80);
    --mn-warning-text: light-dark(#a54e0a, #fbbf24);
    --mn-danger-text: light-dark(#c52524, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#4d7c0f, #a3e635);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 650;
    --mn-radius-field: 6px;
    --mn-radius-box: 10px;
    --mn-radius-badge: 6px;
    --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;
  }
  [data-noodle="daoxiao"] {
    --mn-bg: light-dark(#f6f0e4, #15110b);
    --mn-surface: light-dark(#fffaf1, #1e1911);
    --mn-surface-2: light-dark(#ece2cf, #2a231a);
    --mn-fg: light-dark(#231c12, #f4ecdd);
    --mn-muted: light-dark(#665a47, #b0a28a);
    --mn-border: light-dark(#dfd2ba, #3a3124);
    --mn-input: light-dark(#c2b193, #574a36);
    --mn-primary: light-dark(#7f1d1d, #f5a3a3);
    --mn-primary-fg: light-dark(#ffffff, #2a0707);
    --mn-secondary: light-dark(#ece2cf, #2a231a);
    --mn-secondary-fg: light-dark(#231c12, #f4ecdd);
    --mn-accent: light-dark(#8a5a12, #e5b867);
    --mn-accent-fg: light-dark(#ffffff, #261a04);
    --mn-ring: light-dark(#7f1d1d, #f5a3a3);
    --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(#7f1d1d, #f5a3a3);
    --mn-secondary-text: light-dark(#736b5e, #8b8378);
    --mn-accent-text: light-dark(#8a5a12, #e5b867);
    --mn-success-text: light-dark(#167639, #4ade80);
    --mn-warning-text: light-dark(#a64e0a, #fbbf24);
    --mn-danger-text: light-dark(#c22523, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#7f1d1d, #f5a3a3);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: 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: 750;
    --mn-radius-field: 6px;
    --mn-radius-box: 10px;
    --mn-radius-badge: 4px;
    --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;
  }
  [data-noodle="pici"] {
    --mn-bg: light-dark(#f3ede1, #16120d);
    --mn-surface: light-dark(#faf6ec, #1f1a13);
    --mn-surface-2: light-dark(#e9e0cd, #2a231a);
    --mn-fg: light-dark(#231c14, #f3ede1);
    --mn-muted: light-dark(#5f5344, #b9ad98);
    --mn-border: light-dark(#d8ccb4, #3d3326);
    --mn-input: light-dark(#b9a988, #5d503d);
    --mn-primary: light-dark(#7a3b1d, #e6a57c);
    --mn-primary-fg: light-dark(#ffffff, #2a1105);
    --mn-secondary: light-dark(#e9e0cd, #2a231a);
    --mn-secondary-fg: light-dark(#231c14, #f3ede1);
    --mn-accent: light-dark(#56642a, #bfd08a);
    --mn-accent-fg: light-dark(#ffffff, #1b2206);
    --mn-ring: light-dark(#7a3b1d, #e6a57c);
    --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(#7a3b1d, #e6a57c);
    --mn-secondary-text: light-dark(#726a5e, #8a847a);
    --mn-accent-text: light-dark(#56642a, #bfd08a);
    --mn-success-text: light-dark(#177237, #4ade80);
    --mn-warning-text: light-dark(#a04b0b, #fbbf24);
    --mn-danger-text: light-dark(#be2423, #f87171);
    --mn-info-text: light-dark(#04679e, #38bdf8);
    --mn-link: light-dark(#7a3b1d, #e6a57c);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 700;
    --mn-radius-field: 10px;
    --mn-radius-box: 14px;
    --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: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="naengmyeon"] {
    --mn-bg: light-dark(#eef1f4, #0b0e12);
    --mn-surface: light-dark(#fbfcfd, #141920);
    --mn-surface-2: light-dark(#e2e7ec, #1d242d);
    --mn-fg: light-dark(#0f172a, #e8edf3);
    --mn-muted: light-dark(#4a5568, #98a4b3);
    --mn-border: light-dark(#d3dae2, #2a333e);
    --mn-input: light-dark(#aab5c2, #445061);
    --mn-primary: light-dark(#334155, #cbd5e1);
    --mn-primary-fg: light-dark(#ffffff, #0f172a);
    --mn-secondary: light-dark(#e2e7ec, #1d242d);
    --mn-secondary-fg: light-dark(#0f172a, #e8edf3);
    --mn-accent: light-dark(#0369a1, #7dd3fc);
    --mn-accent-fg: light-dark(#ffffff, #04202e);
    --mn-ring: light-dark(#0369a1, #7dd3fc);
    --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(#334155, #cbd5e1);
    --mn-secondary-text: light-dark(#686e7b, #7e848c);
    --mn-accent-text: light-dark(#0369a1, #7dd3fc);
    --mn-success-text: light-dark(#14763b, #4ade80);
    --mn-warning-text: light-dark(#a74e0c, #fbbf24);
    --mn-danger-text: light-dark(#c32426, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#334155, #cbd5e1);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: 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: 650;
    --mn-radius-field: 8px;
    --mn-radius-box: 12px;
    --mn-radius-badge: 6px;
    --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;
  }
  [data-noodle="hoto"] {
    --mn-bg: light-dark(#f1e9dc, #15100b);
    --mn-surface: light-dark(#fbf6ee, #1f1811);
    --mn-surface-2: light-dark(#e6dac7, #2b2218);
    --mn-fg: light-dark(#271c12, #f3e9da);
    --mn-muted: light-dark(#675644, #b3a18a);
    --mn-border: light-dark(#d8c8b0, #3d3124);
    --mn-input: light-dark(#b9a384, #5a4a37);
    --mn-primary: light-dark(#6b4423, #e0b98f);
    --mn-primary-fg: light-dark(#ffffff, #21150a);
    --mn-secondary: light-dark(#e6dac7, #2b2218);
    --mn-secondary-fg: light-dark(#271c12, #f3e9da);
    --mn-accent: light-dark(#b45309, #fb923c);
    --mn-accent-fg: light-dark(#ffffff, #2a1204);
    --mn-ring: light-dark(#6b4423, #e0b98f);
    --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(#6b4423, #e0b98f);
    --mn-secondary-text: light-dark(#73685a, #8b8275);
    --mn-accent-text: light-dark(#a34c0a, #fb923c);
    --mn-success-text: light-dark(#177438, #4ade80);
    --mn-warning-text: light-dark(#a34c0a, #fbbf24);
    --mn-danger-text: light-dark(#bf2423, #f87171);
    --mn-info-text: light-dark(#04679e, #38bdf8);
    --mn-link: light-dark(#6b4423, #e0b98f);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 700;
    --mn-radius-field: 10px;
    --mn-radius-box: 16px;
    --mn-radius-badge: 8px;
    --mn-shadow-sm: 0 1px 3px rgb(0 0 0 / .08);
    --mn-shadow-md: 0 4px 14px -4px rgb(0 0 0 / .12), 0 2px 4px -2px rgb(0 0 0 / .06);
    --mn-shadow-lg: 0 20px 48px -12px rgb(0 0 0 / .25), 0 8px 16px -8px rgb(0 0 0 / .10);
    --mn-size-xs: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="ramen"] {
    --mn-bg: light-dark(#ffffff, #0c0a09);
    --mn-surface: light-dark(#ffffff, #151211);
    --mn-surface-2: light-dark(#f5f5f4, #1f1b19);
    --mn-fg: light-dark(#0c0a09, #fafaf9);
    --mn-muted: light-dark(#66615d, #a8a29e);
    --mn-border: light-dark(#e7e5e4, #2b2523);
    --mn-input: light-dark(#d6d3d1, #443b37);
    --mn-primary: light-dark(#dc2626, #dc2626);
    --mn-primary-fg: light-dark(#ffffff, #ffffff);
    --mn-secondary: light-dark(#0c0a09, #fafaf9);
    --mn-secondary-fg: light-dark(#ffffff, #0c0a09);
    --mn-accent: light-dark(#f59e0b, #fbbf24);
    --mn-accent-fg: light-dark(#1c1002, #1c1002);
    --mn-ring: light-dark(#dc2626, #f87171);
    --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(#c72323, #e35554);
    --mn-secondary-text: light-dark(#0c0a09, #fafaf9);
    --mn-accent-text: light-dark(#98630a, #fbbf24);
    --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(#dc2626, #fbbf24);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: 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: 800;
    --mn-radius-field: 8px;
    --mn-radius-box: 12px;
    --mn-radius-badge: 6px;
    --mn-shadow-sm: 0 1px 3px rgb(0 0 0 / .08);
    --mn-shadow-md: 0 4px 14px -4px rgb(0 0 0 / .12), 0 2px 4px -2px rgb(0 0 0 / .06);
    --mn-shadow-lg: 0 20px 48px -12px rgb(0 0 0 / .25), 0 8px 16px -8px rgb(0 0 0 / .10);
    --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;
  }
  [data-noodle="biangbiang"] {
    --mn-bg: light-dark(#fff7ed, #0c0a09);
    --mn-surface: light-dark(#ffffff, #171412);
    --mn-surface-2: light-dark(#fde9d4, #24201c);
    --mn-fg: light-dark(#0a0a0a, #fff7ed);
    --mn-muted: light-dark(#5c4a3c, #b8a898);
    --mn-border: light-dark(#0a0a0a, #fff7ed);
    --mn-input: light-dark(#0a0a0a, #fff7ed);
    --mn-primary: light-dark(#ea580c, #fb923c);
    --mn-primary-fg: light-dark(#0a0a0a, #0a0a0a);
    --mn-secondary: light-dark(#0a0a0a, #fff7ed);
    --mn-secondary-fg: light-dark(#fff7ed, #0c0a09);
    --mn-accent: light-dark(#166534, #4ade80);
    --mn-accent-fg: light-dark(#ffffff, #052e16);
    --mn-ring: light-dark(#0a0a0a, #fb923c);
    --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(#b4450c, #fb923c);
    --mn-secondary-text: light-dark(#0a0a0a, #fff7ed);
    --mn-accent-text: light-dark(#166534, #4ade80);
    --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(#166534, #fb923c);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: 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: 900;
    --mn-radius-field: 4px;
    --mn-radius-box: 6px;
    --mn-radius-badge: 3px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --mn-size-xs: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="maccheroni"] {
    --mn-bg: light-dark(#fffdf5, #121212);
    --mn-surface: light-dark(#ffffff, #1c1c1c);
    --mn-surface-2: light-dark(#fff3c4, #2a2616);
    --mn-fg: light-dark(#111111, #fffdf5);
    --mn-muted: light-dark(#4a4a4a, #b8b5a8);
    --mn-border: light-dark(#111111, #fffdf5);
    --mn-input: light-dark(#111111, #fffdf5);
    --mn-primary: light-dark(#ffd23f, #ffd23f);
    --mn-primary-fg: light-dark(#111111, #111111);
    --mn-secondary: light-dark(#90e0c9, #90e0c9);
    --mn-secondary-fg: light-dark(#111111, #111111);
    --mn-accent: light-dark(#ff8fab, #ff8fab);
    --mn-accent-fg: light-dark(#111111, #111111);
    --mn-ring: light-dark(#111111, #ffd23f);
    --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(#836e27, #ffd23f);
    --mn-secondary-text: light-dark(#50786d, #90e0c9);
    --mn-accent-text: light-dark(#9b5a6a, #ff8fab);
    --mn-success-text: light-dark(#15793a, #4ade80);
    --mn-warning-text: light-dark(#aa4f09, #fbbf24);
    --mn-danger-text: light-dark(#c82424, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#836e27, #ffd23f);
    --mn-font: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, ui-sans-serif, system-ui, sans-serif;
    --mn-font-heading: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, ui-sans-serif, system-ui, sans-serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 800;
    --mn-radius-field: 8px;
    --mn-radius-box: 12px;
    --mn-radius-badge: 6px;
    --mn-shadow-sm: 2px 2px 0 currentColor;
    --mn-shadow-md: 3px 3px 0 currentColor;
    --mn-shadow-lg: 5px 5px 0 currentColor;
    --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;
  }
  [data-noodle="rigatoni"] {
    --mn-bg: light-dark(#f4efe4, #120f0b);
    --mn-surface: light-dark(#fbf8f1, #1b1712);
    --mn-surface-2: light-dark(#ebe3d2, #262019);
    --mn-fg: light-dark(#17130e, #f4efe4);
    --mn-muted: light-dark(#5a5145, #b3a893);
    --mn-border: light-dark(#d9cfbb, #3a3228);
    --mn-input: light-dark(#b8ab93, #5a4f40);
    --mn-primary: light-dark(#17130e, #f4efe4);
    --mn-primary-fg: light-dark(#f4efe4, #17130e);
    --mn-secondary: light-dark(#ebe3d2, #262019);
    --mn-secondary-fg: light-dark(#17130e, #f4efe4);
    --mn-accent: light-dark(#c2410c, #fb8a4c);
    --mn-accent-fg: light-dark(#ffffff, #1d0a00);
    --mn-ring: light-dark(#c2410c, #fb8a4c);
    --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(#17130e, #f4efe4);
    --mn-secondary-text: light-dark(#706a60, #89837a);
    --mn-accent-text: light-dark(#b13c0c, #fb8a4c);
    --mn-success-text: light-dark(#157538, #4ade80);
    --mn-warning-text: light-dark(#a44d0a, #fbbf24);
    --mn-danger-text: light-dark(#c02323, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#17130e, #f4efe4);
    --mn-font: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, ui-sans-serif, system-ui, sans-serif;
    --mn-font-heading: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, ui-sans-serif, system-ui, sans-serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 900;
    --mn-radius-field: 3px;
    --mn-radius-box: 4px;
    --mn-radius-badge: 3px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --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;
  }
  [data-noodle="fusilli"] {
    --mn-bg: light-dark(#fbfaf5, #0d120c);
    --mn-surface: light-dark(#ffffff, #141b12);
    --mn-surface-2: light-dark(#eef2e6, #1d271a);
    --mn-fg: light-dark(#141a12, #f0f5ea);
    --mn-muted: light-dark(#565e50, #a6b29c);
    --mn-border: light-dark(#e2e6d8, #2a3626);
    --mn-input: light-dark(#c3cab6, #43523d);
    --mn-primary: light-dark(#1f6b34, #8fdc6a);
    --mn-primary-fg: light-dark(#ffffff, #0d2204);
    --mn-secondary: light-dark(#e2efd9, #22331c);
    --mn-secondary-fg: light-dark(#14401f, #e6f5dc);
    --mn-accent: light-dark(#b8361d, #ff8a6b);
    --mn-accent-fg: light-dark(#ffffff, #2a0a02);
    --mn-ring: light-dark(#1f6b34, #8fdc6a);
    --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(#1f6b34, #8fdc6a);
    --mn-secondary-text: light-dark(#6b7366, #7d8877);
    --mn-accent-text: light-dark(#b8361d, #ff8a6b);
    --mn-success-text: light-dark(#15783a, #4ade80);
    --mn-warning-text: light-dark(#a74e0a, #fbbf24);
    --mn-danger-text: light-dark(#c82524, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#1f6b34, #8fdc6a);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mn-font-heading: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 800;
    --mn-radius-field: 14px;
    --mn-radius-box: 20px;
    --mn-radius-badge: 999px;
    --mn-shadow-sm: 0 1px 3px rgb(0 0 0 / .08);
    --mn-shadow-md: 0 4px 14px -4px rgb(0 0 0 / .12), 0 2px 4px -2px rgb(0 0 0 / .06);
    --mn-shadow-lg: 0 20px 48px -12px rgb(0 0 0 / .25), 0 8px 16px -8px rgb(0 0 0 / .10);
    --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;
  }
  [data-noodle="jjajang"] {
    --mn-bg: light-dark(#f6f3ee, #050403);
    --mn-surface: light-dark(#ffffff, #110e0b);
    --mn-surface-2: light-dark(#ebe6de, #1c1814);
    --mn-fg: light-dark(#15110d, #f6f0e6);
    --mn-muted: light-dark(#5f554a, #ac9f8e);
    --mn-border: light-dark(#ddd5ca, #2c2620);
    --mn-input: light-dark(#bcb0a1, #4a4138);
    --mn-primary: light-dark(#15110d, #f6f0e6);
    --mn-primary-fg: light-dark(#f6f3ee, #110e0b);
    --mn-secondary: light-dark(#ebe6de, #1c1814);
    --mn-secondary-fg: light-dark(#15110d, #f6f0e6);
    --mn-accent: light-dark(#3f7d1f, #9bdc62);
    --mn-accent-fg: light-dark(#ffffff, #132503);
    --mn-ring: light-dark(#3f7d1f, #9bdc62);
    --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(#15110d, #f6f0e6);
    --mn-secondary-text: light-dark(#736f69, #807b75);
    --mn-accent-text: light-dark(#3c771e, #9bdc62);
    --mn-success-text: light-dark(#15793a, #4ade80);
    --mn-warning-text: light-dark(#aa4f09, #fbbf24);
    --mn-danger-text: light-dark(#c82424, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#15110d, #f6f0e6);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: 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: 850;
    --mn-radius-field: 14px;
    --mn-radius-box: 20px;
    --mn-radius-badge: 999px;
    --mn-shadow-sm: 0 1px 3px rgb(0 0 0 / .08);
    --mn-shadow-md: 0 4px 14px -4px rgb(0 0 0 / .12), 0 2px 4px -2px rgb(0 0 0 / .06);
    --mn-shadow-lg: 0 20px 48px -12px rgb(0 0 0 / .25), 0 8px 16px -8px rgb(0 0 0 / .10);
    --mn-size-xs: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="laksa"] {
    --mn-bg: light-dark(#fff5e8, #170b06);
    --mn-surface: light-dark(#fffcf6, #22120a);
    --mn-surface-2: light-dark(#fbe6cd, #2f1a0f);
    --mn-fg: light-dark(#2a120a, #fdebdc);
    --mn-muted: light-dark(#6e4a36, #c9a58c);
    --mn-border: light-dark(#f2d6b6, #45281a);
    --mn-input: light-dark(#dfb58b, #654030);
    --mn-primary: light-dark(#be3a10, #ff8a5b);
    --mn-primary-fg: light-dark(#ffffff, #2a0d03);
    --mn-secondary: light-dark(#fbe6cd, #2f1a0f);
    --mn-secondary-fg: light-dark(#2a120a, #fdebdc);
    --mn-accent: light-dark(#3f6212, #b5e36b);
    --mn-accent-fg: light-dark(#ffffff, #172603);
    --mn-ring: light-dark(#be3a10, #ff8a5b);
    --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(#b83810, #ff8a5b);
    --mn-secondary-text: light-dark(#826b5c, #927e71);
    --mn-accent-text: light-dark(#3f6212, #b5e36b);
    --mn-success-text: light-dark(#177739, #4ade80);
    --mn-warning-text: light-dark(#a64d09, #fbbf24);
    --mn-danger-text: light-dark(#c32322, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#be3a10, #ff8a5b);
    --mn-font: ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mn-font-heading: 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: 850;
    --mn-radius-field: 14px;
    --mn-radius-box: 22px;
    --mn-radius-badge: 999px;
    --mn-shadow-sm: 0 1px 3px rgb(0 0 0 / .08);
    --mn-shadow-md: 0 4px 14px -4px rgb(0 0 0 / .12), 0 2px 4px -2px rgb(0 0 0 / .06);
    --mn-shadow-lg: 0 20px 48px -12px rgb(0 0 0 / .25), 0 8px 16px -8px rgb(0 0 0 / .10);
    --mn-size-xs: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="soba"] {
    --mn-bg: light-dark(#f7f6f3, #161513);
    --mn-surface: light-dark(#ffffff, #1d1c19);
    --mn-surface-2: light-dark(#eeece6, #282622);
    --mn-fg: light-dark(#1f1d1a, #eeebe4);
    --mn-muted: light-dark(#66615a, #a39d91);
    --mn-border: light-dark(#e0ddd5, #33302b);
    --mn-input: light-dark(#cdc8bc, #48443c);
    --mn-primary: light-dark(#3f3a33, #eeebe4);
    --mn-primary-fg: light-dark(#faf9f6, #1d1c19);
    --mn-secondary: light-dark(#eeece6, #282622);
    --mn-secondary-fg: light-dark(#1f1d1a, #eeebe4);
    --mn-accent: light-dark(#7c5a2e, #d4a466);
    --mn-accent-fg: light-dark(#ffffff, #1d1407);
    --mn-ring: light-dark(#7c5a2e, #d4a466);
    --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(#3f3a33, #eeebe4);
    --mn-secondary-text: light-dark(#72706c, #87857f);
    --mn-accent-text: light-dark(#7c5a2e, #d4a466);
    --mn-success-text: light-dark(#16783a, #4ade80);
    --mn-warning-text: light-dark(#a84f0a, #fbbf24);
    --mn-danger-text: light-dark(#c52525, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#3f3a33, #eeebe4);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 650;
    --mn-radius-field: 4px;
    --mn-radius-box: 6px;
    --mn-radius-badge: 4px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --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;
  }
  [data-noodle="tagliatelle"] {
    --mn-bg: light-dark(#fbf7ef, #14110c);
    --mn-surface: light-dark(#fffcf6, #1c1812);
    --mn-surface-2: light-dark(#f2eadb, #27211a);
    --mn-fg: light-dark(#1f1a14, #f6efe2);
    --mn-muted: light-dark(#5e5446, #b8ab95);
    --mn-border: light-dark(#e6dcc8, #3a3226);
    --mn-input: light-dark(#cbbd9f, #5b4e3c);
    --mn-primary: light-dark(#2a2118, #f6efe2);
    --mn-primary-fg: light-dark(#fbf7ef, #1f1a14);
    --mn-secondary: light-dark(#f2eadb, #27211a);
    --mn-secondary-fg: light-dark(#1f1a14, #f6efe2);
    --mn-accent: light-dark(#9a6400, #f2b84b);
    --mn-accent-fg: light-dark(#ffffff, #2a1a00);
    --mn-ring: light-dark(#9a6400, #f2b84b);
    --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(#2a2118, #f6efe2);
    --mn-secondary-text: light-dark(#787168, #8a847a);
    --mn-accent-text: light-dark(#905e02, #f2b84b);
    --mn-success-text: light-dark(#16783a, #4ade80);
    --mn-warning-text: light-dark(#a84e0a, #fbbf24);
    --mn-danger-text: light-dark(#c52524, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#2a2118, #f6efe2);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mn-font-heading: "EB Garamond", Garamond, "Adobe Garamond Pro", "Cormorant Garamond", "Iowan Old Style", ui-serif, Georgia, serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 500;
    --mn-radius-field: 2px;
    --mn-radius-box: 4px;
    --mn-radius-badge: 2px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --mn-size-xs: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="tajarin"] {
    --mn-bg: light-dark(#faf8f3, #080807);
    --mn-surface: light-dark(#ffffff, #10100e);
    --mn-surface-2: light-dark(#f1eee6, #191816);
    --mn-fg: light-dark(#0d0d0c, #f3efe4);
    --mn-muted: light-dark(#5d5b55, #a8a395);
    --mn-border: light-dark(#e5e1d7, #262521);
    --mn-input: light-dark(#b9b4a7, #4a4740);
    --mn-primary: light-dark(#0d0d0c, #f3efe4);
    --mn-primary-fg: light-dark(#faf8f3, #0d0d0c);
    --mn-secondary: light-dark(#f1eee6, #191816);
    --mn-secondary-fg: light-dark(#0d0d0c, #f3efe4);
    --mn-accent: light-dark(#8a6508, #e3b547);
    --mn-accent-fg: light-dark(#ffffff, #221700);
    --mn-ring: light-dark(#0d0d0c, #e3b547);
    --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(#0d0d0c, #f3efe4);
    --mn-secondary-text: light-dark(#71706c, #827f79);
    --mn-accent-text: light-dark(#886308, #e3b547);
    --mn-success-text: light-dark(#15793a, #4ade80);
    --mn-warning-text: light-dark(#aa4f09, #fbbf24);
    --mn-danger-text: light-dark(#c72423, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#0d0d0c, #f3efe4);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: "EB Garamond", Garamond, "Adobe Garamond Pro", "Cormorant Garamond", "Iowan Old Style", ui-serif, Georgia, serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 400;
    --mn-radius-field: 0px;
    --mn-radius-box: 0px;
    --mn-radius-badge: 0px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --mn-size-xs: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="mafaldine"] {
    --mn-bg: light-dark(#fbf7ef, #150a0d);
    --mn-surface: light-dark(#fffdf8, #1d0f13);
    --mn-surface-2: light-dark(#f3ece0, #28151b);
    --mn-fg: light-dark(#2a1016, #f8ece6);
    --mn-muted: light-dark(#6d5359, #c3a7ad);
    --mn-border: light-dark(#e9dccc, #36212a);
    --mn-input: light-dark(#d4c0ab, #573a43);
    --mn-primary: light-dark(#6d1a2b, #e8a0ae);
    --mn-primary-fg: light-dark(#ffffff, #33070f);
    --mn-secondary: light-dark(#f3ece0, #28151b);
    --mn-secondary-fg: light-dark(#2a1016, #f8ece6);
    --mn-accent: light-dark(#846020, #e2c07a);
    --mn-accent-fg: light-dark(#ffffff, #2b1d00);
    --mn-ring: light-dark(#6d1a2b, #e8a0ae);
    --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(#6d1a2b, #e8a0ae);
    --mn-secondary-text: light-dark(#7e6c6b, #8c7c7c);
    --mn-accent-text: light-dark(#846020, #e2c07a);
    --mn-success-text: light-dark(#17773a, #4ade80);
    --mn-warning-text: light-dark(#a94e0a, #fbbf24);
    --mn-danger-text: light-dark(#c72324, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#6d1a2b, #e8a0ae);
    --mn-font: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif;
    --mn-font-heading: Didot, "Bodoni 72", "Bodoni MT", "Bodoni Moda", "Libre Bodoni", ui-serif, Georgia, serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 400;
    --mn-radius-field: 4px;
    --mn-radius-box: 6px;
    --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: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="corzetti"] {
    --mn-bg: light-dark(#f6f1e6, #0f141c);
    --mn-surface: light-dark(#fbf7ee, #161d28);
    --mn-surface-2: light-dark(#ede5d3, #1f2835);
    --mn-fg: light-dark(#1c2533, #efe8d8);
    --mn-muted: light-dark(#5c6474, #a9a597);
    --mn-border: light-dark(#e0d6c0, #2a3443);
    --mn-input: light-dark(#c6b99c, #465368);
    --mn-primary: light-dark(#1e3a5f, #a9c1e6);
    --mn-primary-fg: light-dark(#ffffff, #0d1a2d);
    --mn-secondary: light-dark(#ede5d3, #1f2835);
    --mn-secondary-fg: light-dark(#1c2533, #efe8d8);
    --mn-accent: light-dark(#8c2f1b, #e58a70);
    --mn-accent-fg: light-dark(#ffffff, #2a0a02);
    --mn-ring: light-dark(#1e3a5f, #a9c1e6);
    --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(#1e3a5f, #a9c1e6);
    --mn-secondary-text: light-dark(#6b6e70, #878887);
    --mn-accent-text: light-dark(#8c2f1b, #e58a70);
    --mn-success-text: light-dark(#16733c, #4ade80);
    --mn-warning-text: light-dark(#a24d0e, #fbbf24);
    --mn-danger-text: light-dark(#bd2628, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#1e3a5f, #a9c1e6);
    --mn-font: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif;
    --mn-font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, 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;
  }
  [data-noodle="inaniwa"] {
    --mn-bg: light-dark(#faf7f0, #0f0e0c);
    --mn-surface: light-dark(#fffdf8, #171612);
    --mn-surface-2: light-dark(#f2ece0, #211f1a);
    --mn-fg: light-dark(#1b1a24, #f3eee3);
    --mn-muted: light-dark(#5f5a55, #aaa192);
    --mn-border: light-dark(#e6dccb, #332f26);
    --mn-input: light-dark(#c9bca5, #4e4839);
    --mn-primary: light-dark(#1e2a44, #e7dcc2);
    --mn-primary-fg: light-dark(#fffdf8, #16140f);
    --mn-secondary: light-dark(#f2ece0, #211f1a);
    --mn-secondary-fg: light-dark(#1b1a24, #f3eee3);
    --mn-accent: light-dark(#7d6118, #d4b55f);
    --mn-accent-fg: light-dark(#ffffff, #1f1705);
    --mn-ring: light-dark(#7d6118, #d4b55f);
    --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(#1e2a44, #e7dcc2);
    --mn-secondary-text: light-dark(#716e6f, #86827a);
    --mn-accent-text: light-dark(#7d6118, #d4b55f);
    --mn-success-text: light-dark(#15783b, #4ade80);
    --mn-warning-text: light-dark(#a84e0b, #fbbf24);
    --mn-danger-text: light-dark(#c52526, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#1e2a44, #e7dcc2);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 500;
    --mn-radius-field: 2px;
    --mn-radius-box: 4px;
    --mn-radius-badge: 2px;
    --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: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="yifu"] {
    --mn-bg: light-dark(#faf3ea, #0d0806);
    --mn-surface: light-dark(#fffaf3, #1a0f0c);
    --mn-surface-2: light-dark(#f2e4d2, #26160f);
    --mn-fg: light-dark(#221210, #f8ecdc);
    --mn-muted: light-dark(#6a4f45, #c2a58e);
    --mn-border: light-dark(#e5cfb8, #3e2319);
    --mn-input: light-dark(#c9a98a, #5e382a);
    --mn-primary: light-dark(#8b1a1a, #e8b64a);
    --mn-primary-fg: light-dark(#ffffff, #1f1403);
    --mn-secondary: light-dark(#f2e4d2, #26160f);
    --mn-secondary-fg: light-dark(#221210, #f8ecdc);
    --mn-accent: light-dark(#b8860b, #ef6b6b);
    --mn-accent-fg: light-dark(#1a1203, #2a0505);
    --mn-ring: light-dark(#8b1a1a, #e8b64a);
    --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(#8b1a1a, #e8b64a);
    --mn-secondary-text: light-dark(#796a61, #8b7d71);
    --mn-accent-text: light-dark(#8b630d, #ef6b6b);
    --mn-success-text: light-dark(#167539, #4ade80);
    --mn-warning-text: light-dark(#a54d0a, #fbbf24);
    --mn-danger-text: light-dark(#c22323, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#8b1a1a, #e8b64a);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", ui-serif, Georgia, serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 600;
    --mn-radius-field: 4px;
    --mn-radius-box: 8px;
    --mn-radius-badge: 3px;
    --mn-shadow-sm: 0 1px 3px rgb(0 0 0 / .08);
    --mn-shadow-md: 0 4px 14px -4px rgb(0 0 0 / .12), 0 2px 4px -2px rgb(0 0 0 / .06);
    --mn-shadow-lg: 0 20px 48px -12px rgb(0 0 0 / .25), 0 8px 16px -8px rgb(0 0 0 / .10);
    --mn-size-xs: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="udon"] {
    --mn-bg: light-dark(#faf7f2, #1a1612);
    --mn-surface: light-dark(#ffffff, #221d18);
    --mn-surface-2: light-dark(#f1ebe1, #2d2620);
    --mn-fg: light-dark(#2b2520, #f5efe6);
    --mn-muted: light-dark(#6c6257, #b3a795);
    --mn-border: light-dark(#e8e0d4, #3a322a);
    --mn-input: light-dark(#d6cbbb, #4d4338);
    --mn-primary: light-dark(#c2410c, #fb923c);
    --mn-primary-fg: light-dark(#ffffff, #1a0d03);
    --mn-secondary: light-dark(#f1ebe1, #2d2620);
    --mn-secondary-fg: light-dark(#2b2520, #f5efe6);
    --mn-accent: light-dark(#0f766e, #2dd4bf);
    --mn-accent-fg: light-dark(#ffffff, #042f2c);
    --mn-ring: light-dark(#c2410c, #fb923c);
    --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(#b93f0d, #fb923c);
    --mn-secondary-text: light-dark(#767069, #8d867f);
    --mn-accent-text: light-dark(#0f766e, #2dd4bf);
    --mn-success-text: light-dark(#17793b, #4ade80);
    --mn-warning-text: light-dark(#a94f0b, #fbbf24);
    --mn-danger-text: light-dark(#c72625, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#c2410c, #fb923c);
    --mn-font: ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mn-font-heading: ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 650;
    --mn-radius-field: 12px;
    --mn-radius-box: 18px;
    --mn-radius-badge: 999px;
    --mn-shadow-sm: 0 1px 3px rgb(0 0 0 / .08);
    --mn-shadow-md: 0 4px 14px -4px rgb(0 0 0 / .12), 0 2px 4px -2px rgb(0 0 0 / .06);
    --mn-shadow-lg: 0 20px 48px -12px rgb(0 0 0 / .25), 0 8px 16px -8px rgb(0 0 0 / .10);
    --mn-size-xs: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="gnocchi"] {
    --mn-bg: light-dark(#fdf1e7, #1d1512);
    --mn-surface: light-dark(#fff8f1, #281d18);
    --mn-surface-2: light-dark(#f7e4d3, #342621);
    --mn-fg: light-dark(#2b1d14, #fdeee2);
    --mn-muted: light-dark(#6b5547, #c7ab9a);
    --mn-border: light-dark(#f0d9c6, #40302a);
    --mn-input: light-dark(#dcc0a8, #5e483e);
    --mn-primary: light-dark(#c93c24, #ff8f73);
    --mn-primary-fg: light-dark(#ffffff, #3a0d02);
    --mn-secondary: light-dark(#ffd166, #ffd166);
    --mn-secondary-fg: light-dark(#3a2a00, #3a2a00);
    --mn-accent: light-dark(#1f7a6b, #6fd6c3);
    --mn-accent-fg: light-dark(#ffffff, #04302a);
    --mn-ring: light-dark(#c93c24, #ff8f73);
    --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(#b63822, #ff8f73);
    --mn-secondary-text: light-dark(#846936, #ffd166);
    --mn-accent-text: light-dark(#207162, #6fd6c3);
    --mn-success-text: light-dark(#187438, #4ade80);
    --mn-warning-text: light-dark(#a44d0a, #fbbf24);
    --mn-danger-text: light-dark(#c02523, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#c93c24, #ff8f73);
    --mn-font: ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mn-font-heading: ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 800;
    --mn-radius-field: 18px;
    --mn-radius-box: 28px;
    --mn-radius-badge: 999px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --mn-size-xs: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="cavatelli"] {
    --mn-bg: light-dark(#e8ecf1, #23272e);
    --mn-surface: light-dark(#e8ecf1, #23272e);
    --mn-surface-2: light-dark(#dde2e9, #2b3038);
    --mn-fg: light-dark(#1c2430, #e9edf3);
    --mn-muted: light-dark(#4a5565, #a7b0bd);
    --mn-border: light-dark(#d5dbe3, #30353e);
    --mn-input: light-dark(#8c97a6, #6b7482);
    --mn-primary: light-dark(#2a56c6, #8fb0ff);
    --mn-primary-fg: light-dark(#ffffff, #0a1a40);
    --mn-secondary: light-dark(#dde2e9, #2b3038);
    --mn-secondary-fg: light-dark(#1c2430, #e9edf3);
    --mn-accent: light-dark(#0f766e, #5eead4);
    --mn-accent-fg: light-dark(#ffffff, #042f2b);
    --mn-ring: light-dark(#2a56c6, #8fb0ff);
    --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(#2a55c3, #8fb0ff);
    --mn-secondary-text: light-dark(#616873, #8a8f96);
    --mn-accent-text: light-dark(#116964, #5eead4);
    --mn-success-text: light-dark(#176c3a, #4ade80);
    --mn-warning-text: light-dark(#964a11, #fbbf24);
    --mn-danger-text: light-dark(#ae2628, #f77676);
    --mn-info-text: light-dark(#056398, #38bdf8);
    --mn-link: light-dark(#2a56c6, #8fb0ff);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: 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: 650;
    --mn-radius-field: 14px;
    --mn-radius-box: 22px;
    --mn-radius-badge: 999px;
    --mn-shadow-sm: none;
    --mn-shadow-md: none;
    --mn-shadow-lg: none;
    --mn-size-xs: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="orecchiette"] {
    --mn-bg: light-dark(#f6f3ec, #12140d);
    --mn-surface: light-dark(#fbf9f4, #1a1d14);
    --mn-surface-2: light-dark(#ece6da, #24281c);
    --mn-fg: light-dark(#1e2216, #f1f0e6);
    --mn-muted: light-dark(#595e4c, #b0b39c);
    --mn-border: light-dark(#e1dbcd, #33382a);
    --mn-input: light-dark(#c7bfae, #50573f);
    --mn-primary: light-dark(#4f5d23, #c3d38a);
    --mn-primary-fg: light-dark(#ffffff, #1b2206);
    --mn-secondary: light-dark(#e6e9d6, #2b3220);
    --mn-secondary-fg: light-dark(#2e3614, #eef2da);
    --mn-accent: light-dark(#a33b20, #f08c6a);
    --mn-accent-fg: light-dark(#ffffff, #2a0a02);
    --mn-ring: light-dark(#4f5d23, #c3d38a);
    --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(#4f5d23, #c3d38a);
    --mn-secondary-text: light-dark(#6a6e5f, #86897b);
    --mn-accent-text: light-dark(#a33b20, #f08c6a);
    --mn-success-text: light-dark(#167538, #4ade80);
    --mn-warning-text: light-dark(#a24d0b, #fbbf24);
    --mn-danger-text: light-dark(#c12524, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#4f5d23, #c3d38a);
    --mn-font: ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mn-font-heading: ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 700;
    --mn-radius-field: 14px;
    --mn-radius-box: 26px;
    --mn-radius-badge: 999px;
    --mn-shadow-sm: 0 1px 3px rgb(0 0 0 / .08);
    --mn-shadow-md: 0 4px 14px -4px rgb(0 0 0 / .12), 0 2px 4px -2px rgb(0 0 0 / .06);
    --mn-shadow-lg: 0 20px 48px -12px rgb(0 0 0 / .25), 0 8px 16px -8px rgb(0 0 0 / .10);
    --mn-size-xs: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="mee"] {
    --mn-bg: light-dark(#fffdf5, #14110a);
    --mn-surface: light-dark(#ffffff, #1c180e);
    --mn-surface-2: light-dark(#fbf3dc, #272114);
    --mn-fg: light-dark(#231c05, #fbf3dc);
    --mn-muted: light-dark(#6b6030, #b8aa7c);
    --mn-border: light-dark(#efe4c4, #342c1a);
    --mn-input: light-dark(#dccb95, #4d4226);
    --mn-primary: light-dark(#eab308, #facc15);
    --mn-primary-fg: light-dark(#231c05, #1c1600);
    --mn-secondary: light-dark(#231c05, #fbf3dc);
    --mn-secondary-fg: light-dark(#fffdf5, #14110a);
    --mn-accent: light-dark(#0f766e, #2dd4bf);
    --mn-accent-fg: light-dark(#ffffff, #042f2c);
    --mn-ring: light-dark(#a16207, #facc15);
    --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(#8a6b07, #facc15);
    --mn-secondary-text: light-dark(#231c05, #fbf3dc);
    --mn-accent-text: light-dark(#0f766e, #2dd4bf);
    --mn-success-text: light-dark(#167839, #4ade80);
    --mn-warning-text: light-dark(#a84f09, #fbbf24);
    --mn-danger-text: light-dark(#c62522, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#0f766e, #facc15);
    --mn-font: ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mn-font-heading: ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 650;
    --mn-radius-field: 999px;
    --mn-radius-box: 22px;
    --mn-radius-badge: 999px;
    --mn-shadow-sm: 0 1px 3px rgb(0 0 0 / .08);
    --mn-shadow-md: 0 4px 14px -4px rgb(0 0 0 / .12), 0 2px 4px -2px rgb(0 0 0 / .06);
    --mn-shadow-lg: 0 20px 48px -12px rgb(0 0 0 / .25), 0 8px 16px -8px rgb(0 0 0 / .10);
    --mn-size-xs: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="mixian"] {
    --mn-bg: light-dark(#f8f6f1, #12110f);
    --mn-surface: light-dark(#ffffff, #1a1916);
    --mn-surface-2: light-dark(#efece5, #24221e);
    --mn-fg: light-dark(#1c1b19, #f3f0ea);
    --mn-muted: light-dark(#625e57, #aaa398);
    --mn-border: light-dark(#e6e1d8, #302d28);
    --mn-input: light-dark(#cfc8bc, #48443c);
    --mn-primary: light-dark(#1f3fa6, #8fa8f5);
    --mn-primary-fg: light-dark(#ffffff, #0b1433);
    --mn-secondary: light-dark(#efece5, #24221e);
    --mn-secondary-fg: light-dark(#1c1b19, #f3f0ea);
    --mn-accent: light-dark(#b3541e, #f0a070);
    --mn-accent-fg: light-dark(#ffffff, #2a1204);
    --mn-ring: light-dark(#1f3fa6, #8fa8f5);
    --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(#1f3fa6, #8fa8f5);
    --mn-secondary-text: light-dark(#706f6b, #878580);
    --mn-accent-text: light-dark(#a74f1e, #f0a070);
    --mn-success-text: light-dark(#16783a, #4ade80);
    --mn-warning-text: light-dark(#a84f0a, #fbbf24);
    --mn-danger-text: light-dark(#c52524, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#1f3fa6, #8fa8f5);
    --mn-font: ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mn-font-heading: ui-rounded, "SF Pro Rounded", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --mn-heading-weight: 650;
    --mn-radius-field: 999px;
    --mn-radius-box: 28px;
    --mn-radius-badge: 999px;
    --mn-shadow-sm: 0 1px 3px rgb(0 0 0 / .08);
    --mn-shadow-md: 0 4px 14px -4px rgb(0 0 0 / .12), 0 2px 4px -2px rgb(0 0 0 / .06);
    --mn-shadow-lg: 0 20px 48px -12px rgb(0 0 0 / .25), 0 8px 16px -8px rgb(0 0 0 / .10);
    --mn-size-xs: 28px;
    --mn-size-sm: 34px;
    --mn-size-md: 42px;
    --mn-size-lg: 50px;
    --mn-text-sm: 15px;
    --mn-surface-alpha: 100%;
    --mn-backdrop: none;
    --mn-bg-image: none;
  }
  [data-noodle="pho"] {
    --mn-bg: light-dark(#fbfdfb, #0a130d);
    --mn-surface: light-dark(#ffffff, #0f1b13);
    --mn-surface-2: light-dark(#eef5ef, #17271c);
    --mn-fg: light-dark(#0f1f14, #e7f3ea);
    --mn-muted: light-dark(#54665a, #93aa99);
    --mn-border: light-dark(#dce8de, #20362a);
    --mn-input: light-dark(#c2d4c6, #30503d);
    --mn-primary: light-dark(#15803d, #4ade80);
    --mn-primary-fg: light-dark(#ffffff, #052e16);
    --mn-secondary: light-dark(#e6f2e8, #17271c);
    --mn-secondary-fg: light-dark(#14532d, #e7f3ea);
    --mn-accent: light-dark(#c2410c, #fb923c);
    --mn-accent-fg: light-dark(#ffffff, #1a0d03);
    --mn-ring: light-dark(#15803d, #4ade80);
    --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(#15783a, #4ade80);
    --mn-secondary-text: light-dark(#69786d, #7b897f);
    --mn-accent-text: light-dark(#b73f0c, #fb923c);
    --mn-success-text: light-dark(#15783a, #4ade80);
    --mn-warning-text: light-dark(#a74f0a, #fbbf24);
    --mn-danger-text: light-dark(#c82524, #f87171);
    --mn-info-text: light-dark(#0369a1, #38bdf8);
    --mn-link: light-dark(#15803d, #4ade80);
    --mn-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mn-font-heading: 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: 650;
    --mn-radius-field: 8px;
    --mn-radius-box: 14px;
    --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; } }
}

/* MIAN: dashboard components, gradient backdrops and the motion utilities.
   Layout only where a surface is needed: add mn-card next to mn-kpi or
   mn-widget and the noodle's own card skin applies. */
@layer mian.components {

/* @component kpi */
.mn-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); gap: var(--mn-gap, 1rem); }
.mn-kpi { display: grid; align-content: start; gap: .4rem; min-width: 0; padding: 1.05rem 1.2rem 1.1rem; }
.mn-kpi-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: var(--mn-muted); font-size: var(--mn-text-sm); }
.mn-kpi-head svg { width: 1rem; height: 1rem; }
.mn-kpi-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; min-width: 0; }
.mn-kpi-value { font: 700 1.75rem/1.1 var(--mn-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--mn-fg); }
.mn-kpi-foot { margin: 0; color: var(--mn-muted); font-size: .75rem; line-height: 1.4; }
.mn-kpi-foot .mn-stat-delta { margin-inline-end: .3rem; }
svg.mn-spark { --h: 2.5rem; flex: 0 1 7rem; width: 7rem; min-width: 3.5rem; cursor: default; }
.mn-spark .mn-grid-line { display: none; }
.mn-spark .mn-line { stroke-width: 1.5px; }
.mn-spark.mn-up .mn-line, .mn-spark.mn-up .mn-point { stroke: var(--mn-success-text, var(--mn-success)); }
.mn-spark.mn-up .mn-area { fill: var(--mn-success); }
.mn-spark.mn-down .mn-line, .mn-spark.mn-down .mn-point { stroke: var(--mn-danger-text, var(--mn-danger)); }
.mn-spark.mn-down .mn-area { fill: var(--mn-danger); }

/* @component dashboard */
.mn-dash { container: mn-dash / inline-size; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--mn-gap, 1rem); }
.mn-dash > * { grid-column: span 12; min-width: 0; }
@container mn-dash (min-width: 38rem) {
  .mn-dash > :is(.mn-dash-3, .mn-dash-4, .mn-dash-6) { grid-column: span 6; }
}
@container mn-dash (min-width: 62rem) {
  .mn-dash > .mn-dash-3 { grid-column: span 3; }
  .mn-dash > .mn-dash-4 { grid-column: span 4; }
  .mn-dash > .mn-dash-5 { grid-column: span 5; }
  .mn-dash > .mn-dash-7 { grid-column: span 7; }
  .mn-dash > .mn-dash-8 { grid-column: span 8; }
  .mn-dash > .mn-dash-9 { grid-column: span 9; }
}
.mn-widget { display: flex; flex-direction: column; min-width: 0; }
.mn-widget-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: .95rem 1.15rem .2rem; }
.mn-widget-title { margin: 0; font: 600 .9375rem/1.35 var(--mn-font); color: var(--mn-fg); }
.mn-widget-sub { margin: .1rem 0 0; color: var(--mn-muted); font-size: .8125rem; }
.mn-widget-body { flex: 1; min-width: 0; padding: .8rem 1.15rem 1.15rem; }
.mn-widget-flush > .mn-widget-body { padding: .5rem 0 0; }
.mn-widget-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem 1.15rem; border-top: var(--mn-border-w) solid var(--mn-border); color: var(--mn-muted); font-size: var(--mn-text-sm); }

/* @component heatmap */
.mn-heatmap { --cell: .85rem; --gap: 3px; display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, var(--cell)); grid-auto-columns: var(--cell); gap: var(--gap); margin: 0; padding: 2rem 0 .25rem; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.mn-heatmap > * { position: relative; border-radius: min(3px, var(--mn-radius-field)); background: color-mix(in oklab, var(--_c, var(--mn-primary)) calc(var(--v, 0) * 100%), var(--mn-surface-2)); outline: 1px solid color-mix(in oklab, var(--mn-fg) 6%, transparent); outline-offset: -1px; }
.mn-heatmap-hours { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(var(--cols, 24), minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; }
.mn-heatmap-hours > * { aspect-ratio: 1; }
:is(.mn-heatmap, .mn-uptime-bars) > [data-tip]:hover { z-index: 2; outline: 2px solid var(--mn-fg); outline-offset: 1px; }
:is(.mn-heatmap, .mn-uptime-bars) > [data-tip]:hover::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 7px); translate: -50% 0; z-index: 5;
  padding: .3rem .5rem; border-radius: min(6px, var(--mn-radius-field)); background: var(--mn-fg); color: var(--mn-bg);
  font: 500 .6875rem/1.2 var(--mn-font); white-space: nowrap; pointer-events: none;
}
:is(.mn-heatmap, .mn-uptime-bars) > [data-tip]:nth-child(-n+14):hover::after { left: 0; translate: 0 0; }
:is(.mn-heatmap, .mn-uptime-bars) > [data-tip]:nth-last-child(-n+14):hover::after { left: auto; right: 0; translate: 0 0; }
.mn-heatmap-legend { display: flex; align-items: center; gap: .3rem; margin: .5rem 0 0; color: var(--mn-muted); font-size: .75rem; }
.mn-heatmap-legend i { width: .75rem; height: .75rem; border-radius: 2px; background: color-mix(in oklab, var(--_c, var(--mn-primary)) calc(var(--v, 0) * 100%), var(--mn-surface-2)); outline: 1px solid color-mix(in oklab, var(--mn-fg) 6%, transparent); outline-offset: -1px; }

/* @component gauge */
.mn-gauge { --v: 0; --size: 11rem; --thick: .85rem; position: relative; display: grid; place-items: end center; width: var(--size); max-width: 100%; aspect-ratio: 2 / 1; overflow: hidden; }
.mn-gauge::before {
  content: ""; position: absolute; inset: 0 0 -100% 0; border-radius: 50%;
  background: conic-gradient(from -90deg, var(--_c, var(--mn-primary)) calc(var(--v) * 1.8deg), var(--mn-surface-2) 0 180deg, transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--thick)), #000 calc(100% - var(--thick) + .5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--thick)), #000 calc(100% - var(--thick) + .5px));
}
.mn-gauge-value { position: relative; font: 700 1.6rem/1 var(--mn-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--mn-fg); }
.mn-gauge-sm { --size: 7.5rem; --thick: .6rem; }
.mn-gauge-sm .mn-gauge-value { font-size: 1.15rem; }
.mn-gauge-scale { display: flex; justify-content: space-between; width: var(--size, 11rem); max-width: 100%; margin: .3rem 0 0; color: var(--mn-muted); font-size: .6875rem; font-variant-numeric: tabular-nums; }

/* @component breakdown */
.mn-breakdown { display: grid; gap: .85rem; min-width: 0; }
.mn-breakdown-bar { display: flex; gap: 2px; height: .7rem; border-radius: min(999px, var(--mn-radius-field)); overflow: hidden; }
.mn-breakdown-bar > i { flex: var(--v, 1) 1 0; min-width: 3px; background: var(--_s); }
.mn-breakdown-list { display: grid; margin: 0; padding: 0; list-style: none; font-size: var(--mn-text-sm); }
.mn-breakdown-list > li { display: grid; grid-template-columns: .65rem minmax(0, 1fr) auto 3.25rem; align-items: center; gap: .65rem; padding: .45rem 0; color: var(--mn-fg); }
.mn-breakdown-list > li + li { border-top: var(--mn-border-w) solid var(--mn-border); }
.mn-breakdown-list > li::before { content: ""; width: .65rem; height: .65rem; border-radius: 2px; background: var(--_s); }
.mn-breakdown-list b { font-weight: 600; font-variant-numeric: tabular-nums; }
.mn-breakdown-list small { color: var(--mn-muted); font-size: .75rem; text-align: end; font-variant-numeric: tabular-nums; }
:is(.mn-breakdown-bar, .mn-breakdown-list) > :nth-child(1) { --_s: var(--mn-series-1); }
:is(.mn-breakdown-bar, .mn-breakdown-list) > :nth-child(2) { --_s: var(--mn-series-2); }
:is(.mn-breakdown-bar, .mn-breakdown-list) > :nth-child(3) { --_s: var(--mn-series-3); }
:is(.mn-breakdown-bar, .mn-breakdown-list) > :nth-child(4) { --_s: var(--mn-series-4); }
:is(.mn-breakdown-bar, .mn-breakdown-list) > :nth-child(n+5) { --_s: color-mix(in oklab, var(--mn-fg) 28%, var(--mn-surface-2)); }

/* @component uptime */
.mn-uptime { display: grid; gap: 1.1rem; min-width: 0; }
.mn-uptime-row { display: grid; gap: .45rem; min-width: 0; }
.mn-uptime-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; font-size: var(--mn-text-sm); color: var(--mn-fg); }
.mn-uptime-head strong { font-weight: 600; }
.mn-uptime-head small { margin-inline-start: auto; color: var(--mn-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.mn-uptime-bars { display: flex; align-items: flex-end; gap: 2px; height: 1.75rem; }
.mn-uptime-bars > * { position: relative; flex: 1; min-width: 2px; height: 100%; border-radius: 1.5px; background: var(--mn-success); }
.mn-uptime-bars > [data-s="degraded"] { height: 66%; background: var(--mn-warning); }
.mn-uptime-bars > [data-s="down"] { height: 33%; background: var(--mn-danger); }
.mn-uptime-bars > [data-s="none"] { background: var(--mn-surface-2); }
.mn-uptime-foot { display: flex; justify-content: space-between; color: var(--mn-muted); font-size: .6875rem; }

/* @component page-header */
.mn-pagehead { display: grid; gap: .8rem; min-width: 0; padding-bottom: 1.1rem; border-bottom: var(--mn-border-w) solid var(--mn-border); }
.mn-pagehead-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; min-width: 0; }
.mn-pagehead-title { margin: 0; font: var(--mn-heading-weight) 1.5rem/1.2 var(--mn-font-heading); letter-spacing: -.02em; color: var(--mn-fg); }
.mn-pagehead-desc { margin: .3rem 0 0; max-width: 44rem; color: var(--mn-muted); font-size: .9375rem; line-height: 1.5; }
.mn-pagehead-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: .5rem 0 0; padding: 0; list-style: none; color: var(--mn-muted); font-size: var(--mn-text-sm); }
.mn-pagehead-meta > li { display: inline-flex; align-items: center; gap: .35rem; }
.mn-pagehead-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.mn-pagehead:has(> .mn-tab-list) { padding-bottom: 0; border-bottom: 0; }

/* @component date-range */
.mn-daterange { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; min-width: 0; }
.mn-daterange-custom { display: flex; align-items: center; gap: .4rem; color: var(--mn-muted); font-size: var(--mn-text-sm); }
.mn-daterange-custom .mn-input { width: auto; min-width: 8.5rem; }

/* @component gradient */
.mn-gradient {
  --g1: var(--mn-primary); --g2: var(--mn-accent); --g3: var(--mn-info); --g4: var(--mn-success); --g-mix: 24%; --g-base: var(--mn-bg);
  position: relative; isolation: isolate; background-color: var(--g-base);
  background-image:
    radial-gradient(80% 110% at 6% 0%, color-mix(in oklab, var(--g1) var(--g-mix), transparent), transparent 75%),
    radial-gradient(70% 100% at 98% 8%, color-mix(in oklab, var(--g2) var(--g-mix), transparent), transparent 72%),
    radial-gradient(90% 100% at 72% 112%, color-mix(in oklab, var(--g3) var(--g-mix), transparent), transparent 75%),
    radial-gradient(65% 90% at 12% 104%, color-mix(in oklab, var(--g4) var(--g-mix), transparent), transparent 72%);
}
.mn-gradient-vivid { --g-mix: 88%; --g-base: color-mix(in oklab, var(--g2) 50%, var(--g4)); }
.mn-gradient-aurora { --g1: #2bd4a4; --g2: #3d8bfd; --g3: #b6e84a; --g4: #19b8d6; }
.mn-gradient-dawn { --g1: #ff9a6c; --g2: #ffc75f; --g3: #f76d8e; --g4: #ffd9b0; }
.mn-gradient-tide { --g1: #0b5cad; --g2: #12a5b8; --g3: #0a3d7a; --g4: #55d3c8; }
.mn-gradient-ember { --g1: #e2432c; --g2: #f59e0b; --g3: #a61e2b; --g4: #ff7a3d; }
.mn-gradient-moss { --g1: #6f8f3a; --g2: #d6c48a; --g3: #2f6b4f; --g4: #a7b86a; }
.mn-gradient-dusk { --g1: #7a2f4f; --g2: #e07a5f; --g3: #1f3358; --g4: #c9596b; }
.mn-gradient-steel { --g1: #6b7c93; --g2: #a9b6c6; --g3: #3d4c63; --g4: #8fa3b8; }
.mn-gradient-sand { --g1: #d9c3a0; --g2: #e9d9c0; --g3: #b89b72; --g4: #cdb893; }
.mn-gradient-linear { background-image: linear-gradient(var(--g-angle, 135deg), color-mix(in oklab, var(--g1) var(--g-mix), var(--mn-bg)), color-mix(in oklab, var(--g2) var(--g-mix), var(--mn-bg))); }
.mn-gradient-conic { background-image: conic-gradient(from var(--g-angle, 210deg) at 60% 55%, color-mix(in oklab, var(--g1) var(--g-mix), var(--mn-bg)), color-mix(in oklab, var(--g2) var(--g-mix), var(--mn-bg)), color-mix(in oklab, var(--g3) var(--g-mix), var(--mn-bg)), color-mix(in oklab, var(--g4) var(--g-mix), var(--mn-bg)), color-mix(in oklab, var(--g1) var(--g-mix), var(--mn-bg))); }
.mn-gradient-animate { background-size: 170% 170%; animation: mn-gradient-drift 26s ease-in-out infinite alternate; }
@keyframes mn-gradient-drift { 0% { background-position: 0% 0%; } 50% { background-position: 100% 40%; } 100% { background-position: 30% 100%; } }
.mn-grain::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: var(--grain, .28); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}
.mn-grain { position: relative; isolation: isolate; }
@media (prefers-reduced-motion: reduce) { .mn-gradient-animate { animation: none; } }

/* @component motion */
.mn-enter { animation: var(--mn-enter) var(--mn-enter-duration) var(--mn-ease-enter) both; }
.mn-stagger > * { animation: var(--mn-enter) var(--mn-enter-duration) var(--mn-ease-enter) both; animation-delay: calc(var(--mn-stagger-step, 45ms) * var(--i, 8)); }
.mn-stagger > :nth-child(1) { --i: 0; } .mn-stagger > :nth-child(2) { --i: 1; } .mn-stagger > :nth-child(3) { --i: 2; } .mn-stagger > :nth-child(4) { --i: 3; }
.mn-stagger > :nth-child(5) { --i: 4; } .mn-stagger > :nth-child(6) { --i: 5; } .mn-stagger > :nth-child(7) { --i: 6; } .mn-stagger > :nth-child(8) { --i: 7; }
.mn-press { transition: scale var(--mn-dur-fast) var(--mn-ease-out); }
.mn-press:active { scale: .97; }
@media (hover: hover) {
  .mn-lift { transition: translate var(--mn-dur) var(--mn-ease-out), box-shadow var(--mn-dur) var(--mn-ease-out); }
  .mn-lift:hover { translate: 0 -2px; box-shadow: var(--mn-shadow-md); }
}
.mn-draw { stroke-dasharray: 1; stroke-dashoffset: 0; animation: mn-draw var(--mn-dur-draw, 900ms) var(--mn-ease-out) both; }
@keyframes mn-draw { from { stroke-dashoffset: 1; } }
@keyframes mn-vt-out { to { opacity: 0; } }
@keyframes mn-vt-in { from { opacity: 0; } }
html.mn-vt::view-transition-old(root) { animation: mn-vt-out 140ms var(--mn-ease-out) both; }
html.mn-vt::view-transition-new(root) { animation: mn-vt-in 240ms var(--mn-ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  .mn-enter, .mn-stagger > *, .mn-draw { animation: none; }
  .mn-press, .mn-lift { transition: none; }
  .mn-press:active { scale: none; } .mn-lift:hover { translate: none; }
}
}
@layer mian.components {

/* @component voice-note */
.mn-voice { --_p: 0%; display: inline-flex; align-items: center; gap: .7rem; max-width: 100%; min-width: 0; padding: .45rem .9rem .45rem .45rem; border: var(--mn-border-w) solid var(--mn-border); border-radius: 999px; background: var(--mn-card); color: var(--mn-fg); }
.mn-voice-play { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: var(--mn-primary); color: var(--mn-primary-fg); cursor: pointer; transition: scale var(--mn-dur-fast) var(--mn-ease-out); }
.mn-voice-play:active { scale: .94; }
.mn-voice-play:focus-visible { outline: 2px solid var(--mn-ring); outline-offset: 2px; }
.mn-voice-play svg { width: 1rem; height: 1rem; }
.mn-voice-play .mn-voice-pause, .mn-voice[data-playing] .mn-voice-play .mn-voice-go { display: none; }
.mn-voice[data-playing] .mn-voice-play .mn-voice-pause { display: block; }
.mn-voice-wave { display: flex; align-items: center; gap: 2px; flex: 1 1 9rem; min-width: 4rem; height: 1.75rem; cursor: pointer; touch-action: none; border-radius: 4px; }
.mn-voice-wave:focus-visible { outline: 2px solid var(--mn-ring); outline-offset: 3px; }
.mn-voice-wave > i { flex: 1 1 0; min-width: 2px; max-width: 3px; height: calc(var(--h, .4) * 100%); border-radius: 2px; background: color-mix(in oklab, var(--mn-fg) 28%, transparent); transition: background-color var(--mn-dur-fast) linear; }
.mn-voice-wave > i.mn-on { background: var(--mn-primary-text, var(--mn-primary)); }
.mn-voice-time { flex: none; color: var(--mn-muted); font: 500 .75rem/1 var(--mn-font-mono); font-variant-numeric: tabular-nums; }

/* @component task-list */
.mn-tasks { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.mn-task { position: relative; display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-field); background: var(--mn-card); color: var(--mn-fg); font-size: var(--mn-text-sm); cursor: pointer; transition: background-color var(--mn-duration) var(--mn-ease), border-color var(--mn-duration) var(--mn-ease); }
.mn-task:hover { border-color: color-mix(in oklab, var(--mn-border), var(--mn-fg) 25%); }
.mn-task > span { position: relative; min-width: 0; transition: color var(--mn-dur) var(--mn-ease-out); }
.mn-task > span::after { content: ""; position: absolute; left: 0; top: 55%; width: 100%; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform var(--mn-dur-slow) var(--mn-ease-out); }
.mn-task:has(input:checked) > span { color: var(--mn-muted); }
.mn-task:has(input:checked) > span::after { transform: scaleX(1); }
.mn-task:has(input:focus-visible) { outline: 2px solid var(--mn-ring); outline-offset: 2px; }
.mn-task-meta { margin-inline-start: auto; flex: none; color: var(--mn-muted); font-size: .75rem; }

/* @component hold-button */
.mn-hold { --_hold: 1200ms; position: relative; overflow: hidden; isolation: isolate; }
.mn-hold::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in oklab, var(--_fg, currentColor) 26%, transparent); transform: scaleX(0); transform-origin: left center; transition: transform 180ms var(--mn-ease-out); }
.mn-hold[data-holding]::before { transform: scaleX(1); transition: transform var(--_hold) linear; }
.mn-hold[data-done]::before { transform: scaleX(1); transition: none; }
@media (prefers-reduced-motion: reduce) { .mn-hold[data-holding]::before { transition-duration: var(--_hold); } }

/* @component duration-picker */
.mn-duration { display: inline-flex; align-items: stretch; gap: .35rem; min-width: 0; }
.mn-duration-part { display: grid; grid-template-rows: auto auto; justify-items: center; gap: .2rem; }
.mn-duration-part > input { width: 3.4rem; height: calc(var(--mn-size-lg) + 6px); 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); font: 600 1.375rem/1 var(--mn-font); font-variant-numeric: tabular-nums; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.mn-duration-part > input::-webkit-outer-spin-button, .mn-duration-part > input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mn-duration-part > 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-duration-part > label { color: var(--mn-muted); font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase; }
.mn-duration-sep { align-self: start; margin-top: calc((var(--mn-size-lg) + 6px) / 2 - .7rem); color: var(--mn-muted); font: 600 1.25rem/1 var(--mn-font); }

/* Flowing gradients and poster type (see gradient and hero). */
.mn-gradient-flow { background-image: none; background-color: color-mix(in oklab, var(--g2) 55%, var(--g3)); overflow: hidden; }
.mn-gradient-flow::before { content: ""; position: absolute; inset: -30%; z-index: -2; filter: blur(clamp(28px, 6cqi, 70px)); pointer-events: none;
  background:
    radial-gradient(46% 50% at 24% 30%, var(--g1), transparent 72%),
    radial-gradient(48% 54% at 78% 30%, var(--g2), transparent 72%),
    radial-gradient(54% 58% at 54% 80%, var(--g3), transparent 74%),
    radial-gradient(38% 42% at 16% 84%, var(--g4), transparent 72%);
  animation: mn-flow 22s var(--mn-ease-in-out) infinite alternate; }
.mn-gradient-flow.mn-gradient-still::before { animation: none; }
@keyframes mn-flow { 0% { transform: rotate(0deg) scale(1) translate(0, 0); } 50% { transform: rotate(14deg) scale(1.12) translate(4%, -3%); } 100% { transform: rotate(-10deg) scale(1.06) translate(-4%, 4%); } }
.mn-gradient-halo { --g1: #ff5005; --g2: #dbba95; --g3: #d0bce1; --g4: #ff8a4c; }
.mn-gradient-lagoon { --g1: #00c2a8; --g2: #0a6cff; --g3: #9ef0d0; --g4: #0b3a7a; }
.mn-gradient-citrus { --g1: #ffd000; --g2: #ff7a00; --g3: #b8e04a; --g4: #ffe9a8; }
.mn-gradient-nightfall { --g1: #0b1b3a; --g2: #d9480f; --g3: #14325e; --g4: #f2a65a; }
.mn-gridlines { background-image: linear-gradient(to right, color-mix(in oklab, var(--mn-fg) 9%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--mn-fg) 9%, transparent) 1px, transparent 1px); background-size: var(--grid, 4rem) var(--grid, 4rem); }
.mn-poster { margin: 0; font: var(--mn-heading-weight) clamp(2.75rem, 13.5cqi, 16rem)/.88 var(--mn-font-heading); letter-spacing: -.045em; text-wrap: balance; color: var(--mn-fg); }
@media (prefers-reduced-motion: reduce) { .mn-gradient-flow::before { animation: none; } .mn-task > span::after { transition: none; } }
}

@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 :where(p:not([class])) { 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; }
}
.mn-tile-figure { font: 700 clamp(2.25rem, 7cqi, 3.5rem)/1 var(--mn-font-heading); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--mn-fg); }
.mn-tile-quote { margin: 0; font: 500 1.1875rem/1.45 var(--mn-font-heading); letter-spacing: -.01em; color: var(--mn-fg); text-wrap: pretty; }
.mn-tile-end { margin-top: auto; }
a.mn-tile { position: relative; color: inherit; text-decoration: none; transition: border-color var(--mn-duration) var(--mn-ease), box-shadow var(--mn-duration) var(--mn-ease); }
a.mn-tile:hover { border-color: color-mix(in oklab, var(--mn-border), var(--mn-fg) 35%); }
a.mn-tile:focus-visible { outline: 2px solid var(--mn-ring); outline-offset: 2px; }
.mn-tile-arrow { position: absolute; top: var(--_p); inset-inline-end: var(--_p); width: 1.1rem; height: 1.1rem; color: var(--mn-muted); rotate: -45deg; transition: translate var(--mn-dur, 200ms) var(--mn-ease-out, ease-out), color var(--mn-duration) var(--mn-ease); }
a.mn-tile:hover .mn-tile-arrow { translate: 2px -2px; color: currentColor; }
.mn-bento-rows { grid-auto-rows: minmax(9.5rem, auto); }
@container mn (min-width: 40rem) { .mn-bento-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container mn (min-width: 62rem) {
  .mn-bento-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mn-bento-compact > .mn-tile { grid-column: span 1; }
  .mn-bento-compact > :is(.mn-tile-half, .mn-tile-wide) { grid-column: span 2; }
  .mn-bento-compact > .mn-tile-full { grid-column: span 4; }
}

/* @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%; }
}}

/* ── YANGCHUN ──────────────────────────────────────────────────────────────
   Shanghai's plain noodle in clear broth: nothing extra, everything in its
   place. A native-feeling system: grouped inset surfaces, hairline
   separators that start at the text, segmented controls, 51×31 switches,
   round checkmarks, frosted menus, dialogs that settle in from slightly
   larger, spring sheets. Pressing dims instead of moving. */
@keyframes yangchun-in { from { opacity: 0; transform: scale(.965); } }
@keyframes yangchun-alert { from { opacity: 0; transform: scale(1.12); } }
@keyframes yangchun-tick { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="yangchun"]) to ([data-noodle]:not([data-noodle="yangchun"])) {
  :scope {
    --mn-enter: yangchun-in; --mn-enter-duration: 360ms; --mn-ease-enter: cubic-bezier(.32, .72, 0, 1);
    --mn-duration: 200ms; --mn-spring: cubic-bezier(.32, .72, 0, 1);
    --yc-fill: color-mix(in oklab, #787880 16%, transparent);
    --yc-fill-2: color-mix(in oklab, #787880 24%, transparent);
    --yc-sep: color-mix(in oklab, var(--mn-fg) 14%, transparent);
    --yc-glass: color-mix(in oklab, var(--mn-surface) 80%, transparent);
    --yc-lift: 0 3px 8px rgb(0 0 0 / .12), 0 3px 1px rgb(0 0 0 / .04);
    --mn-focus: 0 0 0 3.5px color-mix(in oklab, var(--mn-ring) 45%, transparent);
    --mn-bar-radius: 5px; --mn-bar-gap: 5px; --mn-line-width: 2.5px; --mn-area-opacity: .16; --mn-point-opacity: 0;
    --mn-bar-fill: color-mix(in oklab, var(--mn-series-1) 28%, var(--mn-surface));
  }
  :scope :where(h1, h2, .mn-h1, .mn-h2) { letter-spacing: -.022em; }

  /* Buttons: filled, tinted, gray or plain, and pressing highlights. */
  .mn-btn { border: 0; box-shadow: none; font-weight: 600; letter-spacing: -.01em; border-radius: 12px; transition: opacity 260ms ease-out, background-color var(--mn-duration); }
  .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)) 90%, #000); }
  .mn-btn:active { transform: none; opacity: .55; transition-duration: 0ms; }
  .mn-btn-sm, .mn-btn-xs { border-radius: 999px; }
  .mn-btn-lg { border-radius: 14px; }
  .mn-btn-outline { --_bg: var(--yc-fill); --_fg: color-mix(in oklab, var(--_ct, var(--mn-primary-text)) 84%, var(--mn-fg)); --_bd: transparent; }
  .mn-btn-outline:hover { --_bg: var(--yc-fill-2); }
  .mn-btn-soft { --_bg: color-mix(in oklab, var(--_c, var(--mn-primary)) 15%, transparent); }
  .mn-btn-ghost { --_fg: var(--_ct, var(--mn-primary-text)); font-weight: 500; }
  .mn-btn-ghost:hover { --_bg: transparent; opacity: .7; }
  .mn-btn-group > .mn-btn:not(.mn-btn-outline) + .mn-btn:not(.mn-btn-outline) { border-inline-start: .5px solid color-mix(in oklab, var(--_fg) 30%, transparent); }

  /* Fields: gray filled wells, no outline until focus. */
  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { border-color: transparent; background-color: var(--yc-fill); box-shadow: none; }
  .mn-input::placeholder, .mn-textarea::placeholder { color: color-mix(in oklab, var(--mn-muted) 85%, transparent); }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within, .mn-number:focus-within, .mn-otp > input:focus { border-color: transparent; background-color: var(--mn-surface); box-shadow: var(--mn-focus); }
  .mn-input-group > .mn-input { background: transparent; box-shadow: none; }
  .mn-addon { background: transparent; border: 0 !important; color: var(--mn-muted); }
  .mn-otp > input { border-radius: 12px; font-weight: 600; }

  /* Checkmarks are round, like a list you can tick off. */
  .mn-checkbox { --_s: 1.35rem; border-radius: 50%; border: 1.5px solid var(--mn-input); background: transparent; }
  .mn-checkbox:checked, .mn-checkbox:indeterminate { background-color: var(--_on); border-color: var(--_on); }
  .mn-checkbox::before { width: .6em; height: .6em; }
  .mn-radio { --_s: 1.35rem; border-width: 1.5px; }
  /* Switch: 51 × 31, knob with a lifted shadow; the knob widens while held. */
  .mn-switch { --_w: 3.1875rem; --_hh: 1.9375rem; --_on: var(--_c, var(--mn-success)); --_k: calc(var(--_hh) - 4px); background: var(--yc-fill-2); transition: background-color 300ms ease; }
  .mn-switch::before { width: var(--_k); height: var(--_k); background: #fff; box-shadow: 0 3px 8px rgb(0 0 0 / .15), 0 3px 1px rgb(0 0 0 / .06); transform: none; left: 2px; border-radius: 999px; transition: left 380ms var(--mn-spring), width 200ms var(--mn-spring); }
  .mn-switch:checked { background: var(--_on); }
  .mn-switch:checked::before { transform: none; background: #fff; left: calc(100% - var(--_k) - 2px); }
  .mn-switch:active::before { width: calc(var(--_k) + 6px); }
  .mn-switch:checked:active::before { left: calc(100% - var(--_k) - 8px); }
  .mn-switch-sm { --_w: 2.5rem; --_hh: 1.5rem; }
  .mn-slider { --_track: 4px; --_thumb: 1.75rem; }
  .mn-slider::-webkit-slider-runnable-track { box-shadow: none; background: linear-gradient(to right, var(--_on) var(--_v), var(--yc-fill-2) var(--_v)); }
  .mn-slider::-moz-range-track { box-shadow: none; background: var(--yc-fill-2); }
  .mn-slider::-webkit-slider-thumb { border: 0; background: #fff; box-shadow: 0 .5px 4px rgb(0 0 0 / .12), 0 6px 13px rgb(0 0 0 / .12); }
  .mn-slider::-moz-range-thumb { border: 0; background: #fff; box-shadow: 0 .5px 4px rgb(0 0 0 / .12), 0 6px 13px rgb(0 0 0 / .12); }
  .mn-slider:active::-webkit-slider-thumb { transform: scale(1.08); }

  /* Grouped surfaces: white on gray, no borders, no shadows. */
  .mn-card, .mn-list, .mn-accordion, .mn-stats, .mn-table-wrap { border-color: transparent; box-shadow: none; }
  .mn-card { border-radius: 16px; }
  .mn-card-title { font-weight: 600; letter-spacing: -.015em; }
  .mn-card-footer-bordered { background: none; border-top: .5px solid var(--yc-sep); }
  .mn-list > li + li, .mn-accordion > details + details { border-top: 0; background: linear-gradient(var(--yc-sep), var(--yc-sep)) no-repeat 100% 0 / calc(100% - 1rem) 1px; }
  .mn-stats > .mn-stat + .mn-stat { border-inline-start: .5px solid var(--yc-sep); }
  .mn-stat-value { font-weight: 700; letter-spacing: -.025em; }
  .mn-accordion summary { font-weight: 500; }

  /* Tables: an inset grouped list. Separators start at the text. */
  .mn-table-wrap { border-radius: 12px; }
  .mn-table th, .mn-table td { border-bottom: 0; background: linear-gradient(var(--yc-sep), var(--yc-sep)) no-repeat 0 100% / 100% 1px; }
  .mn-table tbody > tr > :first-child { background-position: 100% 100%; background-size: calc(100% - 1rem) 1px; }
  .mn-table tbody tr:last-child > *, .mn-table thead th { background: none; }
  .mn-table thead th { height: 2.2rem; font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; }
  .mn-table-hover tbody tr:hover { background: var(--yc-fill); }
  .mn-table-striped tbody tr:nth-child(even) { background: color-mix(in oklab, var(--mn-surface-2) 45%, transparent); }

  .mn-badge { height: 1.3rem; padding: 0 .6em; border: 0; font-weight: 600; letter-spacing: -.005em; }
  .mn-badge-outline { background: var(--yc-fill); color: var(--_ct, var(--mn-fg)); }
  .mn-chip { border: 0; background: var(--yc-fill); }
  .mn-kbd { border-radius: 6px; box-shadow: none; border-color: transparent; background: var(--yc-fill); }

  /* Tabs: a scope bar. Boxed tabs and toggle groups are segmented controls
     whose white thumb slides between segments. */
  .mn-tab-list { border-bottom: .5px solid var(--yc-sep); }
  .mn-tab { font-weight: 500; }
  .mn-tab[aria-selected="true"] { color: var(--mn-primary-text); font-weight: 600; }
  .mn-tab::after { inset-inline: .9rem; height: 2.5px; border-radius: 999px; }
  .mn-tab[aria-selected="true"]::after { background: var(--mn-primary); }
  .mn-tabs-boxed .mn-tab-list { isolation: isolate; border: 0; padding: 2px; gap: 0; border-radius: 9px; background: var(--yc-fill); }
  .mn-tabs-boxed .mn-tab-list::after { content: ""; position: absolute; z-index: -1; top: 2px; bottom: 2px; left: var(--_ix, 2px); width: var(--_iw, 0); border-radius: 7px; background: var(--mn-surface); box-shadow: var(--yc-lift); transition: left 380ms var(--mn-spring), width 380ms var(--mn-spring); }
  .mn-tabs-boxed .mn-tab { height: calc(var(--mn-size-md) - 8px); border-radius: 7px; background: transparent !important; box-shadow: none !important; color: var(--mn-fg); font-weight: 500; }
  .mn-tabs-boxed .mn-tab[aria-selected="true"] { color: var(--mn-fg); font-weight: 600; }
  .mn-tabs-boxed .mn-tab + .mn-tab::before { content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: .5px; background: var(--yc-sep); }
  .mn-tabs-boxed .mn-tab[aria-selected="true"]::before, .mn-tabs-boxed .mn-tab[aria-selected="true"] + .mn-tab::before { opacity: 0; }
  .mn-tabs-pills .mn-tab[aria-selected="true"] { color: var(--mn-primary-fg); }
  .mn-toggle-group { padding: 2px; gap: 0; border: 0; border-radius: 9px; background: var(--yc-fill); }
  .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 7px; color: var(--mn-fg); font-weight: 500; transition: background-color 250ms var(--mn-spring), box-shadow 250ms var(--mn-spring); }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-surface); box-shadow: var(--yc-lift); color: var(--mn-fg); font-weight: 600; }

  .mn-progress { height: 4px; background: var(--yc-fill-2); box-shadow: none; }
  .mn-progress-lg { height: 8px; }
  .mn-radial { --_t: .6rem; background: conic-gradient(var(--_c, var(--mn-primary)) calc(var(--_v) * 1%), var(--yc-fill-2) 0); }
  .mn-radial::before { background: var(--mn-card); }
  /* Spinner: the eight-spoke activity indicator, ticking. */
  .mn-spinner {
    --_spokes: repeating-conic-gradient(from -9deg, #000 0 18deg, transparent 18deg 45deg);
    --_ring: radial-gradient(closest-side, transparent 42%, #000 45% 97%, transparent 100%);
    border: 0; border-radius: 50%;
    background: conic-gradient(from 22.5deg, color-mix(in oklab, var(--_c, currentColor) 18%, transparent), var(--_c, currentColor));
    -webkit-mask: var(--_spokes), var(--_ring); -webkit-mask-composite: source-in;
    mask: var(--_spokes), var(--_ring); mask-composite: intersect;
    animation: yangchun-tick .9s steps(8) infinite;
  }

  .mn-alert { border: 0; border-radius: 14px; background: color-mix(in oklab, var(--_a) 10%, var(--mn-surface)); }
  .mn-avatar-group > .mn-avatar { box-shadow: 0 0 0 2px var(--mn-bg); }
  .mn-step::before { border-width: 1.5px; }
  .mn-step + .mn-step::after { height: 2px; border-radius: 2px; }

  /* Menus, popovers and toasts are frosted. Dialogs settle in like alerts. */
  .mn-menu, .mn-popover, .mn-toast { border: 0; border-radius: 14px; background: var(--yc-glass); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); box-shadow: 0 0 0 .5px var(--yc-sep), 0 12px 40px rgb(0 0 0 / .18); }
  .mn-menu-item { border-radius: 8px; }
  .mn-menu-item + .mn-menu-item { box-shadow: 0 -.5px 0 var(--yc-sep); }
  .mn-menu-item:hover, .mn-menu-item:focus-visible { box-shadow: none; }
  .mn-menu-item:hover + .mn-menu-item, .mn-menu-item:focus-visible + .mn-menu-item { box-shadow: none; }
  .mn-modal { border: 0; border-radius: 20px; box-shadow: 0 20px 60px rgb(0 0 0 / .25); }
  .mn-modal[open] { animation: yangchun-alert 340ms var(--mn-spring); }
  .mn-modal::backdrop { background: rgb(0 0 0 / .32); backdrop-filter: none; }
  .mn-modal-title { font-weight: 600; }
  .mn-drawer { border: 0; }
  .mn-drawer[open] { animation-duration: 420ms; animation-timing-function: var(--mn-spring); }
  .mn-drawer-bottom { border-radius: 14px 14px 0 0; }
  .mn-drawer-bottom::before { width: 2.25rem; height: 5px; background: var(--yc-fill-2); }
  .mn-drawer-header, .mn-drawer-footer { border-color: var(--yc-sep); }
  .mn-page { border-radius: 999px; }
  .mn-page[aria-current="page"] { border-color: transparent; background: var(--mn-primary); color: var(--mn-primary-fg); }

  /* Charts: rounded bars, a soft area under the line and
     activity-ring donuts. */
  .mn-chart-bars { background: repeating-linear-gradient(to top, var(--yc-sep) 0 .5px, transparent .5px calc((var(--h) - 1.25rem) / 4)); background-size: 100% calc(100% - 1.25rem); background-repeat: no-repeat; }
  .mn-bar::before { border-radius: 5px; }
  .mn-chart-h .mn-bar::before { border-radius: 5px; }
  .mn-bar[data-value]::after { border-radius: 8px; padding: 3px 8px; background: var(--yc-glass); color: var(--mn-fg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 0 0 .5px var(--yc-sep), 0 4px 12px rgb(0 0 0 / .12); }
  .mn-chart-h .mn-bar[data-value]::after { box-shadow: none; backdrop-filter: none; background: none; }
  .mn-legend li::before { border-radius: 50%; width: .6rem; height: .6rem; }
  .mn-donut { --thick: 30%; }
}}

/* ── LINGUINE ──────────────────────────────────────────────────────────────
   “Little tongues”: flat, narrow, made for conversation at the table. A warm
   paper system for products people talk to and read in: a serif for what is
   said, a quiet sans for controls, hairline edges and one clay colour that
   appears only where something can be done. */
@keyframes linguine-in { from { opacity: 0; transform: translateY(2px); } }
@keyframes linguine-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="linguine"]) to ([data-noodle]:not([data-noodle="linguine"])) {
  :scope {
    --mn-enter: linguine-in; --mn-enter-duration: 240ms; --mn-ease-enter: cubic-bezier(.16, 1, .3, 1);
    --mn-duration: 180ms; --mn-spring: cubic-bezier(.16, 1, .3, 1);
    --lg-float: 0 0 0 1px var(--mn-border), 0 8px 24px -8px color-mix(in srgb, #3b2a1a 22%, transparent);
    --mn-focus: 0 0 0 2px var(--mn-bg), 0 0 0 4px color-mix(in oklab, var(--mn-ring) 60%, transparent);
    --mn-bar-radius: 3px; --mn-bar-gap: 7px; --mn-line-width: 1.75px; --mn-area-opacity: .08;
    --mn-bar-fill: color-mix(in oklab, var(--mn-fg) 13%, var(--mn-surface)); --mn-bar-fill-hl: var(--mn-primary);
    --mn-series-1: var(--mn-primary); --mn-series-2: color-mix(in oklab, var(--mn-fg) 50%, var(--mn-surface));
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3, .mn-display) { letter-spacing: -.02em; font-weight: 500; }
  :scope :where(.mn-lead) { line-height: 1.6; }

  .mn-btn { box-shadow: none; font-weight: 500; }
  .mn-btn:active { transform: scale(.985); }
  .mn-btn-outline { --_bd: var(--mn-input); background-color: var(--mn-surface); }
  .mn-btn-outline:hover { --_bg: var(--mn-surface-2); }

  .mn-input, .mn-select, .mn-textarea, .mn-number, .mn-input-group { background-color: var(--mn-surface); border-color: var(--mn-input); box-shadow: 0 1px 2px color-mix(in srgb, #3b2a1a 5%, transparent); }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within { border-color: var(--mn-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mn-primary) 18%, transparent); }
  .mn-textarea { border-radius: var(--mn-radius-box); padding: .8rem .95rem; line-height: 1.55; }
  .mn-label { font-weight: 500; }
  .mn-switch { background: var(--mn-input); }
  .mn-switch:checked { background: var(--mn-primary); }

  .mn-card, .mn-table-wrap, .mn-accordion, .mn-list, .mn-stats { box-shadow: none; border-color: var(--mn-border); }
  .mn-card-title { font-family: var(--mn-font-heading); font-weight: 500; font-size: 1.125rem; letter-spacing: -.01em; }
  .mn-card-interactive:hover { border-color: var(--mn-input); background-color: color-mix(in oklab, var(--mn-surface-2) 45%, var(--mn-surface)); }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer, .mn-command-dialog { box-shadow: var(--lg-float); border-color: transparent; }

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

  .mn-badge { font-weight: 500; }
  .mn-badge-outline { border-color: var(--mn-input); }
  .mn-chip { background-color: var(--mn-surface); border-color: var(--mn-input); }

  .mn-tab { font-weight: 500; }
  .mn-tab[aria-selected="true"]::after { background: var(--mn-primary); height: 2px; }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { background: var(--mn-surface-2); border-color: transparent; }

  .mn-progress { height: 6px; background: var(--mn-surface-2); }
  .mn-progress::after { background: var(--mn-primary); }
  .mn-spinner { border-width: 2px; border-color: var(--mn-border); border-top-color: var(--mn-primary); animation: linguine-spin .8s linear infinite; }
  .mn-alert { border-color: var(--mn-border); background-color: var(--mn-surface); }
  .mn-bar::before { border-radius: 3px 3px 0 0; }
  .mn-quote, .mn-tile-quote, blockquote { font-family: var(--mn-font-heading); }
}}

/* ── PENNE ─────────────────────────────────────────────────────────────────
   Quills: plain tubes cut once, on the diagonal, and nothing else done to
   them. A neutral product system: white page, soft grey wells instead of
   outlines, pill controls, black for the one thing to press, and overlays
   that float on a wide, soft shadow. */
@keyframes penne-in { from { opacity: 0; transform: scale(.98); } }
@keyframes penne-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="penne"]) to ([data-noodle]:not([data-noodle="penne"])) {
  :scope {
    --mn-enter: penne-in; --mn-enter-duration: 200ms; --mn-ease-enter: cubic-bezier(.16, 1, .3, 1);
    --mn-duration: 160ms; --mn-spring: cubic-bezier(.16, 1, .3, 1);
    --pn-float: 0 0 0 1px color-mix(in srgb, var(--mn-fg) 8%, transparent), 0 16px 48px -12px rgb(0 0 0 / .22), 0 4px 12px -4px rgb(0 0 0 / .08);
    --mn-focus: 0 0 0 2px var(--mn-bg), 0 0 0 4px var(--mn-ring);
    --mn-bar-radius: 999px; --mn-bar-gap: 8px; --mn-line-width: 2px; --mn-area-opacity: .06;
    --mn-bar-fill: var(--mn-surface-2); --mn-bar-fill-hl: var(--mn-fg);
    --mn-series-1: var(--mn-fg); --mn-series-2: var(--mn-accent);
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3, .mn-display) { letter-spacing: -.03em; }

  .mn-btn { box-shadow: none; font-weight: 500; }
  .mn-btn:active { transform: scale(.97); }
  .mn-btn-outline { --_bd: var(--mn-border); }
  .mn-btn-outline:hover { --_bg: var(--mn-surface-2); }
  .mn-btn-ghost:hover { --_bg: var(--mn-surface-2); }

  .mn-input, .mn-select, .mn-textarea, .mn-number, .mn-input-group { border-color: transparent; background-color: var(--mn-surface-2); box-shadow: none; }
  .mn-input:hover, .mn-select:hover, .mn-textarea:hover { border-color: transparent; background-color: color-mix(in oklab, var(--mn-surface-2), var(--mn-fg) 4%); }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within { border-color: var(--mn-fg); background-color: var(--mn-surface); box-shadow: none; }
  .mn-input-group > .mn-input { background: transparent; }
  .mn-input, .mn-select { padding-inline: 1rem; }
  .mn-textarea { padding: .85rem 1rem; }
  .mn-switch { background: var(--mn-input); }
  .mn-switch:checked { background: var(--mn-fg); }
  .mn-checkbox, .mn-radio { border-color: var(--mn-input); }

  .mn-card, .mn-table-wrap, .mn-accordion, .mn-list, .mn-stats { box-shadow: none; border-color: var(--mn-border); }
  .mn-card-interactive:hover { background-color: var(--mn-surface-2); border-color: var(--mn-border); }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer, .mn-command-dialog { box-shadow: var(--pn-float); border-color: transparent; }
  .mn-menu { padding: 6px; border-radius: 16px; }
  .mn-menu-item { border-radius: 10px; }

  .mn-table thead th { background: transparent; color: var(--mn-muted); font-weight: 500; }
  .mn-table-hover tbody tr:hover { background: var(--mn-surface-2); }

  .mn-badge { font-weight: 500; }
  .mn-chip { border-color: transparent; background-color: var(--mn-surface-2); }

  .mn-tab-list { border-bottom: 0; gap: 2px; }
  .mn-tab { border-radius: 999px; }
  .mn-tab::after { display: none; }
  .mn-tab:hover { background: var(--mn-surface-2); }
  .mn-tab[aria-selected="true"] { background: var(--mn-surface-2); color: var(--mn-fg); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { background: var(--mn-surface-2); border-color: transparent; border-radius: 999px; padding: 3px; }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-surface); box-shadow: 0 1px 3px rgb(0 0 0 / .12); border-radius: 999px; }
  .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 999px; }
  .mn-tabs-vertical .mn-tab-list { border-radius: 20px; }

  .mn-progress { height: 6px; background: var(--mn-surface-2); }
  .mn-progress::after { background: var(--mn-fg); }
  .mn-spinner { border-width: 2px; border-color: var(--mn-surface-2); border-top-color: var(--mn-fg); animation: penne-spin .7s linear infinite; }
  .mn-alert { border-color: transparent; background-color: var(--mn-surface-2); }
  .mn-bar::before { border-radius: 999px 999px 0 0; }
}}

/* ── CHITARRA ──────────────────────────────────────────────────────────────
   Spaghetti alla chitarra is pressed through a frame of steel strings: every
   strand square, every strand the same. A stark system for feeds and
   timelines: true black or true white, hairline rules edge to edge, bold
   type, pill buttons and a single blue for what is live. */
@keyframes chitarra-in { from { opacity: 0; } }
@keyframes chitarra-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="chitarra"]) to ([data-noodle]:not([data-noodle="chitarra"])) {
  :scope {
    --mn-enter: chitarra-in; --mn-enter-duration: 120ms; --mn-ease-enter: ease-out;
    --mn-duration: 120ms; --mn-spring: cubic-bezier(.2, 0, 0, 1);
    --mn-border: light-dark(#e1e8ed, #2f3336);
    --mn-focus: 0 0 0 2px var(--mn-bg), 0 0 0 4px var(--mn-ring);
    --mn-bar-radius: 2px; --mn-bar-gap: 5px; --mn-line-width: 2px; --mn-area-opacity: .1;
    --mn-bar-fill: color-mix(in oklab, var(--mn-fg) 16%, var(--mn-surface)); --mn-bar-fill-hl: var(--mn-accent);
    --mn-series-1: var(--mn-accent); --mn-series-2: var(--mn-fg);
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3, .mn-display) { letter-spacing: -.03em; }

  .mn-btn { box-shadow: none; font-weight: 700; }
  .mn-btn:active { transform: none; opacity: .85; }
  .mn-btn-outline { --_bd: var(--mn-input); }
  .mn-btn-outline:hover, .mn-btn-ghost:hover { --_bg: color-mix(in oklab, var(--_c, var(--mn-fg)) 10%, transparent); }

  .mn-input, .mn-select, .mn-textarea, .mn-number, .mn-input-group { background-color: transparent; border-color: var(--mn-input); box-shadow: none; }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within { border-color: var(--mn-accent); box-shadow: 0 0 0 1px var(--mn-accent); }
  .mn-input, .mn-select { padding-inline: 1rem; }
  .mn-label { font-weight: 700; }
  .mn-switch { background: var(--mn-input); }
  .mn-switch:checked { background: var(--mn-accent); }
  .mn-checkbox, .mn-radio { --_on: var(--mn-accent); --_onf: var(--mn-accent-fg); }

  .mn-card, .mn-table-wrap, .mn-accordion, .mn-list, .mn-stats { box-shadow: none; border-color: var(--mn-border); }
  .mn-card-title { font-weight: 800; font-size: 1.125rem; }
  .mn-card-interactive:hover { background-color: color-mix(in oklab, var(--mn-fg) 3%, var(--mn-surface)); border-color: var(--mn-border); }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer, .mn-command-dialog { border-color: var(--mn-border); box-shadow: 0 0 15px color-mix(in srgb, var(--mn-fg) 14%, transparent), 0 0 3px 1px color-mix(in srgb, var(--mn-fg) 8%, transparent); }
  .mn-menu-item { font-weight: 700; }

  .mn-table thead th { background: transparent; color: var(--mn-muted); font-weight: 500; }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--mn-fg) 3%, transparent); }

  .mn-badge { font-weight: 700; }
  .mn-chip { border-color: var(--mn-input); font-weight: 700; }

  .mn-tab { font-weight: 500; flex: 1 0 auto; justify-content: center; height: calc(var(--mn-size-md) + 10px); }
  .mn-tab:hover { background: color-mix(in oklab, var(--mn-fg) 6%, transparent); }
  .mn-tab[aria-selected="true"] { font-weight: 700; }
  .mn-tab::after { inset-inline: 30%; height: 4px; border-radius: 999px; bottom: 0; }
  .mn-tab[aria-selected="true"]::after { background: var(--mn-accent); }
  .mn-tabs-boxed .mn-tab, .mn-tabs-pills .mn-tab, .mn-tabs-vertical .mn-tab { flex: none; height: var(--mn-size-md); }
  .mn-tabs-vertical .mn-tab-list { border-radius: 16px; }

  .mn-progress { height: 4px; background: color-mix(in oklab, var(--mn-fg) 14%, transparent); }
  .mn-progress::after { background: var(--mn-accent); }
  .mn-spinner { border-width: 3px; border-color: color-mix(in oklab, var(--mn-accent) 25%, transparent); border-top-color: var(--mn-accent); animation: chitarra-spin .75s linear infinite; }
  .mn-alert { border-color: var(--mn-border); }
  .mn-link { color: var(--mn-accent-text); }
  .mn-bar::before { border-radius: 2px 2px 0 0; }
}}

/* ── SHIO ──────────────────────────────────────────────────────────────────
   Salt ramen: the clearest, lightest broth, you can see every noodle. An
   airy system with no visible borders: surfaces float on soft, layered
   elevation (--sh-1 … --sh-3) over a pale page, rise a little and cast a
   softer shadow when touched, with generous space, medium type and one
   sea-slate ink. */
@keyframes shio-in { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } }
@keyframes shio-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="shio"]) to ([data-noodle]:not([data-noodle="shio"])) {
  :scope {
    --mn-enter: shio-in; --mn-enter-duration: 300ms; --mn-ease-enter: cubic-bezier(.2, .7, .2, 1);
    --mn-duration: 200ms; --mn-spring: cubic-bezier(.2, .7, .2, 1);
    --sh-1: 0 0 0 1px light-dark(rgb(20 24 31 / .05), rgb(255 255 255 / .06)), 0 1px 2px light-dark(rgb(20 24 31 / .05), rgb(0 0 0 / .4));
    --sh-2: 0 0 0 1px light-dark(rgb(20 24 31 / .04), rgb(255 255 255 / .06)), 0 2px 4px light-dark(rgb(20 24 31 / .04), rgb(0 0 0 / .35)), 0 8px 24px -8px light-dark(rgb(20 40 70 / .12), rgb(0 0 0 / .55));
    --sh-3: 0 0 0 1px light-dark(rgb(20 24 31 / .04), rgb(255 255 255 / .07)), 0 4px 8px light-dark(rgb(20 24 31 / .04), rgb(0 0 0 / .35)), 0 24px 48px -16px light-dark(rgb(20 40 70 / .2), rgb(0 0 0 / .6));
    --mn-focus: 0 0 0 3px color-mix(in oklab, var(--mn-ring) 30%, transparent);
    --mn-bar-radius: 6px; --mn-bar-gap: 10px; --mn-line-width: 2px; --mn-area-opacity: .1; --mn-point-opacity: 0;
    --mn-bar-fill: color-mix(in oklab, var(--mn-primary) 14%, var(--mn-surface));
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3) { letter-spacing: -.03em; }

  /* Buttons: soft pills of ink, or floating white; they rise when hovered. */
  .mn-btn { border: 0; box-shadow: var(--sh-1); font-weight: 500; transition: box-shadow 260ms var(--mn-spring), transform 260ms var(--mn-spring), background-color var(--mn-duration); }
  .mn-btn:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
  .mn-btn:active { transform: none; box-shadow: var(--sh-1); }
  .mn-btn-outline { --_bg: var(--mn-surface); --_fg: var(--_ct, var(--mn-fg)); --_bd: transparent; }
  .mn-btn-outline:hover { --_bg: var(--mn-surface); }
  .mn-btn-soft { box-shadow: none; }
  .mn-btn-ghost, .mn-btn-link { box-shadow: none; }
  .mn-btn-ghost:hover, .mn-btn-link:hover, .mn-btn-soft:hover { transform: none; box-shadow: none; }

  /* Fields: white wells on a faint shadow ring; focus lifts them. */
  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { border-color: transparent; background-color: var(--mn-surface); box-shadow: var(--sh-1); transition: box-shadow 260ms var(--mn-spring); }
  .mn-input:hover, .mn-select:hover, .mn-textarea:hover { box-shadow: var(--sh-2); }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within, .mn-number:focus-within, .mn-otp > input:focus { border-color: transparent; box-shadow: var(--sh-2), var(--mn-focus); }
  .mn-input-group > .mn-input { box-shadow: none; }
  .mn-addon { background: transparent; border: 0 !important; }
  .mn-checkbox, .mn-radio { border-color: transparent; box-shadow: var(--sh-1); }
  .mn-checkbox { border-radius: 6px; }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); box-shadow: 0 2px 6px -2px color-mix(in oklab, var(--_on) 60%, transparent); }
  .mn-switch { --_w: 2.6rem; --_hh: 1.5rem; background: var(--mn-surface-2); box-shadow: inset 0 1px 2px rgb(0 0 0 / .08); }
  .mn-switch::before { box-shadow: var(--sh-2); }
  .mn-switch:checked { background: var(--_on); box-shadow: none; }
  .mn-slider { --_track: 4px; --_thumb: 1.3rem; }
  .mn-slider::-webkit-slider-runnable-track { box-shadow: none; background: linear-gradient(to right, var(--_on) var(--_v), var(--mn-surface-2) var(--_v)); }
  .mn-slider::-moz-range-track { box-shadow: none; }
  .mn-slider::-webkit-slider-thumb { border: 0; background: var(--mn-surface); box-shadow: var(--sh-2); }
  .mn-slider::-moz-range-thumb { border: 0; background: var(--mn-surface); box-shadow: var(--sh-2); }

  /* Surfaces float: no borders, layered shadows, a lift on hover. */
  .mn-card, .mn-table-wrap, .mn-list, .mn-accordion, .mn-stats, .mn-collapse { border-color: transparent; box-shadow: var(--sh-2); }
  .mn-card { transition: box-shadow 300ms var(--mn-spring), transform 300ms var(--mn-spring); }
  a.mn-card:hover, .mn-card-interactive:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
  .mn-card-title { font-weight: 550; letter-spacing: -.02em; }
  .mn-card-footer-bordered { border-top: 0; background: var(--mn-surface-2); }
  .mn-list > li + li, .mn-accordion > details + details { border-top-color: var(--mn-surface-2); }
  .mn-stats > .mn-stat + .mn-stat { border-inline-start-color: var(--mn-surface-2); }
  .mn-stat-value { font-weight: 500; letter-spacing: -.03em; }

  .mn-table th, .mn-table td { border-bottom-color: var(--mn-surface-2); padding-block: .85rem; }
  .mn-table thead th { background: none; font-weight: 500; }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--mn-primary) 4%, transparent); }

  .mn-badge { border: 0; font-weight: 500; }
  .mn-badge-outline { background: var(--mn-surface); box-shadow: var(--sh-1); color: var(--_ct, var(--mn-fg)); }
  .mn-chip { border: 0; background: var(--mn-surface); box-shadow: var(--sh-1); }
  .mn-kbd { border: 0; box-shadow: var(--sh-1); }

  /* Tabs: the selected tab floats up as a small white card. */
  .mn-tab-list { border-bottom: 0; gap: .25rem; padding: 4px; border-radius: calc(var(--mn-radius-field) + 4px); background: var(--mn-surface-2); display: inline-flex; max-width: 100%; }
  .mn-tab { border-radius: var(--mn-radius-field); height: calc(var(--mn-size-md) - 8px); font-weight: 500; transition: background-color 260ms var(--mn-spring), box-shadow 260ms var(--mn-spring), color var(--mn-duration); }
  .mn-tab::after { display: none; }
  .mn-tab[aria-selected="true"] { background: var(--mn-surface); box-shadow: var(--sh-1); color: var(--mn-fg); }
  .mn-tabs-boxed .mn-tab-list { border: 0; }
  .mn-tabs-pills .mn-tab[aria-selected="true"] { background: var(--mn-primary); color: var(--mn-primary-fg); }
  .mn-toggle-group { border: 0; padding: 4px; background: var(--mn-surface-2); }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-surface); box-shadow: var(--sh-1); }

  .mn-progress { height: 6px; background: var(--mn-surface-2); box-shadow: none; }
  .mn-radial { --_t: .35rem; background: conic-gradient(var(--_c, var(--mn-primary)) calc(var(--_v) * 1%), var(--mn-surface-2) 0); box-shadow: var(--sh-1); }
  .mn-radial::before { background: var(--mn-surface); }
  .mn-spinner { border-width: 2px; border-color: var(--mn-surface-2); border-top-color: var(--_c, var(--mn-primary)); animation: shio-spin .9s cubic-bezier(.5, .15, .5, .85) infinite; }

  .mn-alert { border-color: transparent; background: color-mix(in oklab, var(--_a) 6%, var(--mn-surface)); box-shadow: var(--sh-1); }
  .mn-avatar { box-shadow: var(--sh-1); }
  .mn-step::before { border-color: transparent; box-shadow: var(--sh-1); background: var(--mn-surface); }
  .mn-step[data-state="complete"]::before { box-shadow: none; }
  .mn-step + .mn-step::after { height: 2px; background: var(--mn-surface-2); }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { border-color: transparent; box-shadow: var(--sh-3); }
  .mn-modal[open] { animation-duration: 340ms; }
  .mn-page { border: 0; }
  .mn-page[aria-current="page"] { background: var(--mn-surface); box-shadow: var(--sh-1); border-color: transparent; }

  /* Charts: soft rounded bars that lift when hovered. */
  .mn-chart-bars { background: none; }
  .mn-bar::before { transition: height 500ms var(--mn-spring), transform 260ms var(--mn-spring), box-shadow 260ms var(--mn-spring); }
  .mn-bar:hover::before { transform: translateY(-2px); box-shadow: 0 8px 16px -8px color-mix(in oklab, var(--mn-primary) 50%, transparent); }
  .mn-donut { --thick: 20%; }
}}

/* ── SPAGHETTI ─────────────────────────────────────────────────────────────
   Spaghetti al pomodoro: three ingredients on a white plate. Italian poster
   minimalism: a heavy grotesk, flush-left, thick black rules on top of
   surfaces instead of boxes around them, flat black and one tomato red that
   marks the single most important thing. Al dente: firm, fast motion. */
@keyframes spaghetti-in { from { opacity: 0; transform: translateX(-10px); } }
@keyframes spaghetti-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="spaghetti"]) to ([data-noodle]:not([data-noodle="spaghetti"])) {
  :scope {
    --mn-enter: spaghetti-in; --mn-enter-duration: 160ms; --mn-ease-enter: cubic-bezier(.2, 0, 0, 1);
    --mn-duration: 110ms; --mn-spring: cubic-bezier(.2, 0, 0, 1);
    --sp-rule: 3px solid var(--mn-fg);
    --mn-focus: 0 0 0 2px var(--mn-bg), 0 0 0 4px var(--mn-accent);
    --mn-bar-radius: 0; --mn-bar-gap: 4px; --mn-line-width: 3px; --mn-area-opacity: 0; --mn-point-opacity: 0;
    --mn-bar-fill: var(--mn-fg); --mn-bar-fill-hl: var(--mn-accent);
    --mn-series-1: var(--mn-fg); --mn-series-2: var(--mn-accent);
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3, .mn-display, .mn-title) { letter-spacing: -.045em; line-height: .98; }

  /* Buttons: flat black slabs; hover turns them tomato. */
  .mn-btn { box-shadow: none; font-weight: 700; letter-spacing: -.01em; }
  .mn-btn:not(.mn-btn-outline, .mn-btn-soft, .mn-btn-ghost, .mn-btn-link):hover { --_bg: var(--_c, var(--mn-accent)); --_fg: var(--_cf, var(--mn-accent-fg)); }
  .mn-btn:active { transform: none; }
  .mn-btn-outline { --_bd: var(--_c, var(--mn-fg)); border-width: 2px; }
  .mn-btn-outline:hover { --_bg: var(--_c, var(--mn-fg)); --_fg: var(--_cf, var(--mn-bg)); }
  .mn-btn-link { --_fg: var(--_ct, var(--mn-fg)); text-decoration: underline; text-decoration-color: var(--mn-accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }

  /* Fields: a line to write on, only the bottom edge, black; red when focused. */
  .mn-input, .mn-select, .mn-textarea, .mn-number, .mn-file { border-width: 0 0 2px; border-color: var(--mn-fg); border-radius: 0; background-color: transparent; box-shadow: none; }
  .mn-input-group { border-width: 0 0 2px; border-color: var(--mn-fg); border-radius: 0; background: transparent; }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within, .mn-number:focus-within { border-color: var(--mn-accent); box-shadow: 0 2px 0 var(--mn-accent); }
  .mn-input-group > .mn-input { border: 0; box-shadow: none; }
  .mn-label { font-weight: 700; }
  .mn-checkbox, .mn-radio { border: 2px solid var(--mn-fg); }
  .mn-checkbox { border-radius: 0; }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); border-color: var(--_on); }
  /* Switch: a black bar; on, it turns tomato. */
  .mn-switch { --_w: 2.6rem; --_hh: 1.25rem; border-radius: 0; background: var(--mn-surface-2); box-shadow: inset 0 0 0 2px var(--mn-fg); }
  .mn-switch::before { border-radius: 0; background: var(--mn-fg); box-shadow: none; top: 4px; left: 4px; width: calc(var(--_hh) - 8px); height: calc(var(--_hh) - 8px); }
  .mn-switch:checked { background: var(--mn-accent); box-shadow: inset 0 0 0 2px var(--mn-fg); }
  .mn-switch:checked::before { background: var(--mn-bg); }
  .mn-slider { --_track: 3px; }
  .mn-slider::-webkit-slider-thumb { border-radius: 0; border: 0; background: var(--mn-fg); }
  .mn-slider::-moz-range-thumb { border-radius: 0; border: 0; background: var(--mn-fg); }

  /* Surfaces: no box, a thick black rule on top, like a poster column. */
  .mn-card, .mn-table-wrap, .mn-accordion, .mn-stats, .mn-list, .mn-collapse { border: 0; border-top: var(--sp-rule); border-radius: 0; box-shadow: none; background: transparent; }
  .mn-card-header { padding-inline: 0; } .mn-card-body { padding-inline: 0; } .mn-card-footer { padding-inline: 0; }
  .mn-card-title { font-weight: 800; letter-spacing: -.03em; font-size: 1.2rem; }
  .mn-card-footer-bordered { background: none; border-top: 1px solid var(--mn-fg); }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { border: 2px solid var(--mn-fg); border-radius: 0; box-shadow: 8px 8px 0 color-mix(in srgb, var(--mn-fg) 12%, transparent); }
  .mn-stat-value { font-weight: 800; letter-spacing: -.05em; }

  .mn-table th, .mn-table td { border-bottom-color: color-mix(in srgb, var(--mn-fg) 18%, transparent); }
  .mn-table thead th { background: none; color: var(--mn-fg); font-weight: 800; border-bottom: 2px solid var(--mn-fg); }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--mn-accent) 7%, transparent); }

  .mn-badge { border-radius: 0; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; font-size: .6875rem; }
  .mn-badge-soft { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
  .mn-chip { border-radius: 0; border-width: 2px; border-color: var(--mn-fg); font-weight: 700; }

  /* Tabs: heavy words; the chosen one is underlined in tomato. */
  .mn-tab-list { border-bottom: 2px solid var(--mn-fg); }
  .mn-tab { font-weight: 800; letter-spacing: -.01em; }
  .mn-tab[aria-selected="true"]::after { height: 4px; bottom: -3px; border-radius: 0; background: var(--mn-accent); inset-inline: .5rem; }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { border: 2px solid var(--mn-fg); border-radius: 0; background: transparent; padding: 0; gap: 0; }
  .mn-tabs-boxed .mn-tab, .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 0; }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-fg); color: var(--mn-bg); box-shadow: none; }

  .mn-progress { height: 6px; border-radius: 0; background: var(--mn-surface-2); box-shadow: none; }
  .mn-progress::after { border-radius: 0; background: var(--mn-accent); }
  .mn-radial { --_t: .35rem; background: conic-gradient(var(--mn-accent) calc(var(--_v) * 1%), var(--mn-surface-2) 0); }
  /* Spinner: a black quarter turning, a tomato dot at its tip. */
  .mn-spinner { border-width: 3px; border-color: transparent; border-top-color: var(--_c, var(--mn-fg)); border-right-color: var(--mn-accent); animation: spaghetti-spin .6s cubic-bezier(.6, 0, .4, 1) infinite; }

  .mn-alert { border: 0; border-top: var(--sp-rule); border-radius: 0; background: transparent; padding-inline: 0; }
  .mn-avatar { border-radius: 0; }
  .mn-step::before { border-radius: 0; border-width: 2px; }
  .mn-page { border-radius: 0; }
  .mn-page[aria-current="page"] { background: var(--mn-fg); color: var(--mn-bg); border-color: var(--mn-fg); }
  .mn-divider::before, .mn-divider::after { background: var(--mn-fg); height: 2px; }

  /* Charts: black columns; the one that matters is tomato. */
  .mn-bar::before { background: var(--mn-fg); }
  .mn-bar.mn-hl::before, .mn-bar:hover::before { background: var(--mn-accent); }
  .mn-donut { --thick: 18%; }
}}

/* ── BUCATINI ──────────────────────────────────────────────────────────────
   A strand with a hole through the middle. A hollow system: everything is
   drawn in 1.5px outline: tube-shaped pill buttons and fields, ring
   switches with a hollow knob, hollow checkboxes, outlined cards and charts —
   and fills from the inside only when pressed, hovered or chosen. */
@keyframes bucatini-in { from { opacity: 0; transform: scale(.97); } }
@keyframes bucatini-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="bucatini"]) to ([data-noodle]:not([data-noodle="bucatini"])) {
  :scope {
    --mn-enter: bucatini-in; --mn-enter-duration: 200ms; --mn-ease-enter: cubic-bezier(.2, .8, .2, 1);
    --mn-duration: 160ms; --mn-spring: cubic-bezier(.2, .8, .2, 1);
    --bu-line: 1.5px;
    --mn-border-w: 1.5px;
    --mn-focus: 0 0 0 2px var(--mn-bg), 0 0 0 3.5px var(--mn-fg);
    --mn-bar-radius: 999px; --mn-bar-gap: 10px; --mn-line-width: 1.5px; --mn-area-opacity: 0; --mn-point-opacity: 1;
    --mn-bar-fill: transparent; --mn-bar-fill-hl: var(--mn-fg);
  }

  /* Buttons: hollow tubes; the primary fills from inside on hover. */
  .mn-btn { --_bd: var(--_c, var(--mn-fg)); --_bg: transparent; --_fg: var(--_ct, var(--mn-fg)); border-width: var(--bu-line); box-shadow: none; font-weight: 600; }
  .mn-btn:not(.mn-btn-outline, .mn-btn-soft, .mn-btn-ghost, .mn-btn-link) { --_bg: var(--_c, var(--mn-fg)); --_fg: var(--_cf, var(--mn-primary-fg)); --_gap: inset 0 0 0 2.5px var(--mn-bg); box-shadow: var(--_gap); }
  .mn-btn:not(.mn-btn-outline, .mn-btn-soft, .mn-btn-ghost, .mn-btn-link):hover { --_bg: var(--_c, var(--mn-fg)); --_gap: inset 0 0 0 0 var(--mn-bg); }
  .mn-btn:not(.mn-btn-outline, .mn-btn-soft, .mn-btn-ghost, .mn-btn-link):focus-visible { box-shadow: var(--_gap), var(--mn-focus); }
  .mn-btn:is(.mn-btn-outline, .mn-btn-soft, .mn-btn-ghost, .mn-btn-link):focus-visible { box-shadow: var(--mn-focus); }
  .mn-btn-outline:hover { --_bg: color-mix(in oklab, var(--_c, var(--mn-fg)) 8%, transparent); }
  .mn-btn-soft { --_bd: color-mix(in oklab, var(--_c, var(--mn-fg)) 35%, transparent); --_bg: transparent; }
  .mn-btn-ghost, .mn-btn-link { --_bd: transparent; }
  .mn-btn:active { transform: scale(.98); }

  /* Fields: tubes with a hollow core. */
  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { border: var(--bu-line) solid var(--mn-input); background-color: transparent; box-shadow: none; }
  .mn-textarea { border-radius: 18px; }
  .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: inset 0 0 0 1px var(--mn-fg); }
  .mn-input-group > .mn-input { border: 0; box-shadow: none; }
  .mn-checkbox, .mn-radio { border: var(--bu-line) solid var(--mn-fg); background-color: transparent; }
  .mn-checkbox { border-radius: 50%; }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); border-color: var(--_on); box-shadow: inset 0 0 0 2px var(--mn-bg); }
  /* Switch: a ring track and a hollow ring knob that fills when on. */
  .mn-switch { --_w: 2.6rem; --_hh: 1.4rem; background: transparent; box-shadow: inset 0 0 0 var(--bu-line) var(--mn-fg); }
  .mn-switch::before { background: transparent; box-shadow: inset 0 0 0 var(--bu-line) var(--mn-fg); top: 3px; left: 3px; width: calc(var(--_hh) - 6px); height: calc(var(--_hh) - 6px); }
  .mn-switch:checked { background: transparent; box-shadow: inset 0 0 0 var(--bu-line) var(--_on); }
  .mn-switch:checked::before { background: var(--_on); box-shadow: none; }
  .mn-slider { --_track: 6px; }
  .mn-slider::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--_on) var(--_v), transparent var(--_v)); box-shadow: inset 0 0 0 var(--bu-line) var(--mn-fg); }
  .mn-slider::-moz-range-track { background: transparent; box-shadow: inset 0 0 0 var(--bu-line) var(--mn-fg); }
  .mn-slider::-webkit-slider-thumb { border: var(--bu-line) solid var(--mn-fg); background: var(--mn-bg); }
  .mn-slider::-moz-range-thumb { border: var(--bu-line) solid var(--mn-fg); background: var(--mn-bg); }

  /* Surfaces: outlined, hollow, never filled. */
  .mn-card, .mn-table-wrap, .mn-list, .mn-accordion, .mn-stats, .mn-collapse { border: var(--bu-line) solid var(--mn-fg); background: transparent; box-shadow: none; }
  .mn-card-footer-bordered { background: none; border-top-color: var(--mn-border); }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { border: var(--bu-line) solid var(--mn-fg); box-shadow: 0 0 0 4px var(--mn-bg), 0 0 0 5.5px var(--mn-border); }
  .mn-table thead th { background: none; border-bottom: var(--bu-line) solid var(--mn-fg); }
  .mn-table-hover tbody tr:hover { background: none; box-shadow: inset 0 0 0 var(--bu-line) var(--mn-border); }

  .mn-badge { background: transparent; border: var(--bu-line) solid var(--_c, var(--mn-fg)); color: var(--_ct, var(--mn-fg)); }
  .mn-chip, .mn-kbd { background: transparent; border: var(--bu-line) solid var(--mn-input); box-shadow: none; }

  /* Tabs: an outlined tube; the chosen tab is a filled capsule inside it. */
  .mn-tab-list { border-bottom: 0; gap: 2px; padding: 3px; border: var(--bu-line) solid var(--mn-fg); border-radius: 999px; display: inline-flex; max-width: 100%; }
  .mn-tab { border-radius: 999px; height: calc(var(--mn-size-md) - 6px); }
  .mn-tab::after { display: none; }
  .mn-tab[aria-selected="true"] { background: var(--mn-fg); color: var(--mn-bg); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { background: transparent; border: var(--bu-line) solid var(--mn-fg); border-radius: 999px; }
  .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 999px; }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-fg); color: var(--mn-bg); box-shadow: none; }

  /* Progress: a hollow tube filling from the inside with a gap. */
  .mn-progress { height: .75rem; background: transparent; box-shadow: inset 0 0 0 var(--bu-line) var(--mn-fg); }
  .mn-progress::after { inset: 3px auto 3px 3px; width: max(0px, calc(var(--_v) - 6px)); }
  .mn-radial { --_t: .45rem; background: conic-gradient(var(--_c, var(--mn-fg)) calc(var(--_v) * 1%), transparent 0); box-shadow: inset 0 0 0 var(--bu-line) var(--mn-fg), 0 0 0 var(--bu-line) var(--mn-fg); }
  .mn-radial::before { box-shadow: 0 0 0 var(--bu-line) var(--mn-fg); background: var(--mn-bg); }
  /* Spinner: two hollow rings chasing. */
  .mn-spinner { border: var(--bu-line) solid var(--_c, currentColor); border-right-color: transparent; border-left-color: transparent; box-shadow: inset 0 0 0 3px var(--mn-bg), inset 0 0 0 4.5px color-mix(in oklab, var(--_c, currentColor) 35%, transparent); animation: bucatini-spin .8s linear infinite; }

  .mn-alert { background: transparent; border: var(--bu-line) solid var(--_a); }
  .mn-avatar { background: transparent; box-shadow: inset 0 0 0 var(--bu-line) var(--mn-fg); color: var(--mn-fg); }
  .mn-step::before { background: transparent; border: var(--bu-line) solid var(--mn-fg); }
  .mn-page { border: var(--bu-line) solid transparent; border-radius: 999px; }
  .mn-page[aria-current="page"] { border-color: var(--mn-fg); background: transparent; color: var(--mn-fg); }

  /* Charts: hollow capsules; the highlighted one is filled. */
  .mn-bar::before { background: transparent; box-shadow: inset 0 0 0 var(--bu-line) var(--mn-fg); }
  .mn-bar.mn-hl::before, .mn-bar:hover::before { background: var(--mn-fg); }
  .mn-donut { --thick: 16%; }
}}

/* ── HOFUN ─────────────────────────────────────────────────────────────────
   Shahe fen: rice batter steamed into one thin sheet, then cut into wide,
   silky ribbons. A borderless, tonal system: surfaces are sheets told apart
   by tone, controls are wide flat ribbons, indicators are ribbons laid
   behind the text, and everything glides in long and frictionless, with no
   bounce. A faint pearly sheen sits on raised sheets. */
@keyframes hofun-glide { from { opacity: 0; transform: translateX(-16px); } }
@keyframes hofun-rise { from { opacity: 0; transform: translateY(20px); } }
@keyframes hofun-twist { 0% { transform: rotate(0) scaleY(1); } 50% { transform: rotate(90deg) scaleY(.3); } 100% { transform: rotate(180deg) scaleY(1); } }

@layer mian.noodles { @scope ([data-noodle="hofun"]) to ([data-noodle]:not([data-noodle="hofun"])) {
  :scope {
    --mn-enter: hofun-glide; --mn-enter-duration: 480ms; --mn-ease-enter: cubic-bezier(.22, 1, .36, 1);
    --mn-duration: 260ms; --mn-spring: cubic-bezier(.22, 1, .36, 1);
    --h-sheet: color-mix(in oklab, var(--mn-primary) 4%, var(--mn-surface));
    --h-tone: color-mix(in oklab, var(--mn-primary) 9%, var(--mn-surface));
    --h-sheen: linear-gradient(120deg, color-mix(in oklab, var(--mn-primary) 7%, transparent), transparent 38%, transparent 62%, color-mix(in oklab, var(--mn-accent) 6%, transparent));
    --h-edge: inset 0 -2px 0 var(--mn-input);
    --mn-focus: 0 0 0 3px color-mix(in oklab, var(--mn-ring) 35%, transparent), 0 0 0 1.5px var(--mn-ring);
    --mn-bar-radius: 8px; --mn-bar-gap: 3px; --mn-line-width: 4px; --mn-area-opacity: .1; --mn-point-opacity: 0;
    --mn-bar-fill: color-mix(in oklab, var(--mn-series-1) 22%, var(--mn-surface));
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3) { letter-spacing: -.02em; }

  /* Sheets: no borders, told apart by a pearly tint. */
  .mn-card, .mn-list, .mn-accordion, .mn-stats, .mn-table-wrap, .mn-collapse { border-color: transparent; background: var(--h-sheet) var(--h-sheen); box-shadow: none; }
  .mn-card-header { padding-bottom: .25rem; }
  .mn-card-footer-bordered { border-top: 0; background: color-mix(in oklab, var(--mn-primary) 5%, transparent); }
  .mn-list > li + li, .mn-accordion > details + details { border-top: 0; margin-top: 2px; }
  .mn-list > li:nth-child(even) { background: color-mix(in oklab, var(--mn-primary) 3%, transparent); }
  .mn-stats > .mn-stat + .mn-stat { border-inline-start: 0; }
  .mn-stats { gap: 2px; background: transparent; }
  .mn-stats > .mn-stat { background: var(--h-sheet); }
  .mn-stat-value { font-weight: 500; letter-spacing: -.03em; }

  /* Buttons: wide ribbons. A lighter layer is laid across on hover. */
  .mn-btn { border: 0; box-shadow: none; padding-inline: calc(var(--_h) * .7); font-weight: 500; overflow: hidden; isolation: isolate; }
  .mn-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in oklab, #fff 16%, transparent); clip-path: inset(0 100% 0 0); transition: clip-path 420ms var(--mn-spring); }
  .mn-btn:not(.mn-btn-outline, .mn-btn-soft, .mn-btn-ghost, .mn-btn-link):hover { --_bg: var(--_c, var(--mn-primary)); }
  .mn-btn:hover::before { clip-path: inset(0 0 0 0); }
  .mn-btn:active { transform: scale(.985); }
  .mn-btn-icon { padding: 0; }
  .mn-btn-group > .mn-btn:not(.mn-btn-icon) { padding-inline: calc(var(--_h) * .4); }
  .mn-btn-outline { --_bg: color-mix(in oklab, var(--_c, var(--mn-primary)) 9%, transparent); --_fg: var(--_ct, var(--mn-primary-text)); --_bd: transparent; }
  .mn-btn-outline:hover { --_bg: color-mix(in oklab, var(--_c, var(--mn-primary)) 14%, transparent); }
  .mn-btn-soft { --_bg: color-mix(in oklab, var(--_c, var(--mn-primary)) 16%, transparent); }
  .mn-btn-outline::before, .mn-btn-soft::before, .mn-btn-ghost::before { background: color-mix(in oklab, var(--_c, var(--mn-primary)) 8%, transparent); }
  .mn-btn-link::before { display: none; }
  .mn-btn-group { gap: 2px; }
  .mn-btn-group > .mn-btn:not(.mn-btn-outline) + .mn-btn:not(.mn-btn-outline) { border-inline-start: 0; }

  /* Fields: a white ribbon with a soft lower edge that turns to ink. */
  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input {
    border-color: transparent; background-color: var(--mn-surface); box-shadow: var(--h-edge);
    transition: box-shadow 320ms var(--mn-spring), background-color var(--mn-duration);
  }
  .mn-card .mn-input, .mn-card .mn-select, .mn-card .mn-textarea, .mn-card .mn-input-group, .mn-card .mn-number { background-color: var(--mn-surface); }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within, .mn-number:focus-within, .mn-otp > input:focus { border-color: transparent; box-shadow: inset 0 -2px 0 var(--mn-ring), 0 0 0 4px color-mix(in oklab, var(--mn-ring) 18%, transparent); }
  .mn-input-group > .mn-input { box-shadow: none; background: transparent; }
  .mn-addon { background: transparent; border: 0 !important; }
  .mn-checkbox, .mn-radio { --_s: 1.2rem; border: 0; background: var(--h-tone); box-shadow: var(--h-edge); }
  .mn-checkbox { border-radius: 6px; }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); box-shadow: none; }
  /* Switch: a flat ribbon with a wide, flat knob that glides a long way. */
  .mn-switch { --_w: 3.3rem; --_hh: 1.45rem; --_k: 1.7rem; border-radius: 8px; background: var(--h-tone); box-shadow: var(--h-edge); }
  .mn-switch::before { width: var(--_k); border-radius: 6px; box-shadow: 0 1px 2px rgb(0 0 0 / .15); transform: none; left: 3px; top: 3px; height: calc(var(--_hh) - 6px); transition: left 460ms var(--mn-spring); }
  .mn-switch:checked { background: var(--_on); box-shadow: none; }
  .mn-switch:checked::before { transform: none; left: calc(100% - var(--_k) - 3px); background: var(--_onf); }
  .mn-slider { --_track: 8px; --_thumb: 1.5rem; }
  .mn-slider::-webkit-slider-runnable-track { border-radius: 4px; box-shadow: none; background: linear-gradient(to right, var(--_on) var(--_v), var(--h-tone) var(--_v)); }
  .mn-slider::-moz-range-track { border-radius: 4px; box-shadow: none; background: var(--h-tone); }
  .mn-slider::-moz-range-progress { border-radius: 4px; }
  .mn-slider::-webkit-slider-thumb { width: .55rem; border-radius: 4px; border: 0; background: var(--_on); box-shadow: 0 0 0 3px var(--mn-bg); }
  .mn-slider::-moz-range-thumb { width: .55rem; border-radius: 4px; border: 0; background: var(--_on); box-shadow: 0 0 0 3px var(--mn-bg); }
  .mn-slider:active::-webkit-slider-thumb { transform: scaleY(1.15); }

  /* Tables: no rules at all. Rows are ribbons that tint under the pointer. */
  .mn-table { border-collapse: separate; border-spacing: 0 2px; }
  .mn-table th, .mn-table td { border: 0; }
  .mn-table thead th { background: none; height: 2.2rem; font-weight: 500; }
  .mn-table tbody td { background: color-mix(in oklab, var(--mn-surface) 70%, transparent); transition: background-color 320ms var(--mn-spring); }
  .mn-table tbody td:first-child { border-radius: 12px 0 0 12px; }
  .mn-table tbody td:last-child { border-radius: 0 12px 12px 0; }
  .mn-table-hover tbody tr:hover { background: none; }
  .mn-table-hover tbody tr:hover td { background: var(--h-tone); }
  .mn-table-striped tbody tr:nth-child(even) { background: none; }
  .mn-table-striped tbody tr:nth-child(even) td { background: color-mix(in oklab, var(--mn-primary) 5%, var(--mn-surface)); }
  .mn-table-wrap { padding: 0 6px; }

  .mn-badge { border: 0; font-weight: 500; padding-inline: .7em; }
  .mn-badge-outline { background: var(--h-tone); color: var(--_ct, var(--mn-primary-text)); }
  .mn-chip { border: 0; background: var(--h-tone); border-radius: 10px; }
  .mn-kbd { border: 0; box-shadow: none; background: var(--h-tone); }

  /* Tabs: a tinted ribbon laid behind the selected tab, gliding between them. */
  .mn-tab-list { border-bottom: 0; isolation: isolate; gap: 2px; }
  .mn-tab { border-radius: 12px; font-weight: 500; }
  .mn-tab::after { display: none; }
  .mn-tab-list::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: var(--_ix, 0); width: var(--_iw, 0); border-radius: 12px; background: var(--h-tone); transition: left 520ms var(--mn-spring), width 520ms var(--mn-spring); }
  .mn-tab[aria-selected="true"] { color: var(--mn-primary-text); }
  .mn-tabs-boxed .mn-tab-list { padding: 4px; border-radius: 16px; background: var(--h-sheet); }
  .mn-tabs-boxed .mn-tab-list::after { top: 4px; bottom: 4px; background: var(--mn-surface); box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
  .mn-tabs-boxed .mn-tab, .mn-tabs-pills .mn-tab { background: transparent !important; box-shadow: none !important; }
  .mn-tabs-pills .mn-tab-list::after { background: var(--mn-primary); }
  .mn-tabs-pills .mn-tab[aria-selected="true"] { color: var(--mn-primary-fg); }
  .mn-tabs-vertical .mn-tab-list::after { display: none; }
  .mn-tabs-vertical .mn-tab[aria-selected="true"] { background: var(--h-tone); }
  .mn-toggle-group { border: 0; gap: 2px; padding: 3px; border-radius: 16px; background: var(--h-sheet); }
  .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 12px; transition: background-color 360ms var(--mn-spring), color 360ms var(--mn-spring); }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--h-tone); color: var(--mn-primary-text); box-shadow: none; }

  /* Progress: a wide flat ribbon with a sheen. */
  .mn-progress { height: .625rem; border-radius: 4px; background: var(--h-tone); box-shadow: none; }
  .mn-progress-sm { height: .4rem; }
  .mn-progress::after { border-radius: 4px; background: var(--_p) linear-gradient(90deg, transparent 40%, rgb(255 255 255 / .22), transparent 90%); transition: width 700ms var(--mn-spring); }
  .mn-radial { --_t: .7rem; background: conic-gradient(var(--_c, var(--mn-primary)) calc(var(--_v) * 1%), var(--h-tone) 0); }
  /* Spinner: a ribbon twisting over. */
  .mn-spinner { border: 0; border-radius: 3px; height: calc(var(--_s) * .42); margin-block: calc(var(--_s) * .29); background: var(--_c, currentColor); animation: hofun-twist 1.1s cubic-bezier(.65, 0, .35, 1) infinite; }

  .mn-alert { border: 0; border-radius: 18px; background: color-mix(in oklab, var(--_a) 9%, var(--mn-surface)); }
  .mn-avatar { border-radius: 30%; }
  .mn-avatar-group > .mn-avatar { box-shadow: 0 0 0 2px var(--mn-bg); }
  .mn-step::before { border: 0; background: var(--h-tone); }
  .mn-step[data-state="complete"]::before, .mn-step[data-state="current"]::before { background: var(--mn-primary); color: var(--mn-primary-fg); }
  .mn-step + .mn-step::after { height: 6px; top: calc(1rem - 3px); border-radius: 3px; background: var(--h-tone); }
  .mn-step[data-state="complete"] + .mn-step::after { background: color-mix(in oklab, var(--mn-primary) 45%, var(--h-tone)); }

  /* Overlays: sheets lifted off the table, gliding up. */
  .mn-menu, .mn-popover, .mn-modal, .mn-drawer, .mn-toast { border: 0; background: var(--mn-surface) var(--h-sheen); box-shadow: 0 24px 60px -24px rgb(0 0 0 / .28), 0 0 0 1px color-mix(in oklab, var(--mn-fg) 5%, transparent); }
  .mn-menu, .mn-popover { border-radius: 18px; }
  .mn-menu-item { border-radius: 12px; }
  .mn-modal { border-radius: 26px; }
  .mn-modal[open] { animation: hofun-rise 520ms var(--mn-spring); }
  .mn-drawer[open] { animation-duration: 520ms; animation-timing-function: var(--mn-spring); }
  .mn-drawer-header, .mn-drawer-footer { border-color: transparent; }
  .mn-page { border: 0; border-radius: 12px; }
  .mn-page[aria-current="page"] { background: var(--h-tone); color: var(--mn-primary-text); box-shadow: none; }

  /* Charts: ribbons laid almost edge to edge. */
  .mn-chart-bars { background: none; }
  .mn-bar::before { border-radius: 8px 8px 3px 3px; transition: height 700ms var(--mn-spring), background-color var(--mn-duration); }
  .mn-chart-h .mn-bar::before { border-radius: 3px 8px 8px 3px; }
  .mn-bar[data-value]::after { border-radius: 8px; background: var(--mn-primary); color: var(--mn-primary-fg); }
  .mn-legend li::before { border-radius: 3px; width: 1.1rem; height: .45rem; }
  .mn-donut { --thick: 36%; }
}}

/* ── HIYAMUGI ──────────────────────────────────────────────────────────────
   White wheat noodles served cold, a bundle at a time, with a few pink and
   green strands in every bundle. A quiet white system in which exactly one
   coloured strand (2px) marks what matters in each component: the active
   tab, the focused field, the primary action, the current value. */
@keyframes hiyamugi-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes hiyamugi-lay { from { transform: scaleX(0); } }
@keyframes hiyamugi-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="hiyamugi"]) to ([data-noodle]:not([data-noodle="hiyamugi"])) {
  :scope {
    --mn-enter: hiyamugi-in; --mn-enter-duration: 320ms; --mn-ease-enter: cubic-bezier(.25, .1, .25, 1);
    --mn-duration: 200ms; --mn-spring: cubic-bezier(.25, .1, .25, 1);
    --hy-pink: var(--mn-accent); --hy-green: var(--mn-success);
    --hy-strand: inset 0 -2px 0 var(--hy-pink);
    --mn-bar-radius: 3px; --mn-bar-gap: 14px; --mn-line-width: 1.5px; --mn-area-opacity: 0; --mn-point-opacity: 0;
    --mn-bar-fill: var(--mn-border); --mn-bar-fill-hl: var(--hy-pink);
    --mn-series-1: var(--mn-fg); --mn-series-2: var(--hy-pink); --mn-series-3: var(--hy-green);
  }
  :scope :where(h1, h2, .mn-h1, .mn-h2) { font-weight: 500; letter-spacing: -.02em; }

  /* Buttons: charcoal or white; the pink strand runs along the bottom of the
     one that matters, and appears on the others only on hover. */
  .mn-btn { box-shadow: none; font-weight: 500; }
  .mn-btn:not(.mn-btn-outline, .mn-btn-soft, .mn-btn-ghost, .mn-btn-link):not(.mn-primary, .mn-secondary, .mn-accent, .mn-success, .mn-warning, .mn-danger, .mn-info, .mn-neutral) { box-shadow: var(--hy-strand); }
  .mn-btn:active { transform: none; opacity: .85; }
  .mn-btn-outline { --_bd: var(--mn-border); background-color: var(--mn-surface); transition: box-shadow 300ms var(--mn-spring), background-color var(--mn-duration); }
  .mn-btn-outline:hover, .mn-btn-ghost:hover { --_bg: var(--mn-surface); box-shadow: var(--hy-strand); }
  .mn-btn-soft { --_bg: var(--mn-surface-2); --_fg: var(--_ct, var(--mn-fg)); }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { box-shadow: none; border-color: var(--mn-border); transition: box-shadow 300ms var(--mn-spring), border-color var(--mn-duration); }
  .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-input); box-shadow: var(--hy-strand); }
  .mn-input-group > .mn-input { box-shadow: none; }
  .mn-checkbox { border-radius: 5px; border-width: 1.5px; box-shadow: none; }
  .mn-radio { border-width: 1.5px; box-shadow: none; }
  /* Switch: a grey strand that turns pink. */
  .mn-switch { --_w: 2.5rem; --_hh: 1.35rem; --_on: var(--_c, var(--hy-pink)); background: var(--mn-surface-2); box-shadow: inset 0 0 0 1px var(--mn-border); }
  .mn-switch::before { background: var(--mn-surface); box-shadow: 0 0 0 1px var(--mn-border), 0 1px 2px rgb(0 0 0 / .08); }
  .mn-switch:checked { background: var(--_on); box-shadow: none; }
  .mn-switch:checked::before { background: #fff; box-shadow: none; }
  .mn-slider { --_track: 2px; --_on: var(--_c, var(--hy-pink)); }
  .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 2px rgb(0 0 0 / .1); }
  .mn-slider::-moz-range-thumb { border: 1px solid var(--mn-input); background: var(--mn-surface); box-shadow: 0 1px 2px rgb(0 0 0 / .1); }

  /* Cards: white, with one short strand lying across the top edge, pink,
     and green on every third card, as in the bundle. */
  .mn-card { position: relative; box-shadow: none; }
  .mn-card::before { content: ""; position: absolute; top: -1px; left: 1.5rem; width: 2.5rem; height: 2px; border-radius: 2px; background: var(--hy-pink); transform-origin: left; animation: hiyamugi-lay 600ms var(--mn-spring) both; }
  .mn-card:nth-of-type(3n + 2)::before { background: var(--hy-green); }
  .mn-card-title { font-weight: 500; }
  .mn-card-footer-bordered { background: none; }

  .mn-table-wrap { background: var(--mn-surface); }
  .mn-table th, .mn-table td { padding-block: .9rem; }
  .mn-table thead th { background: none; font-size: .75rem; font-weight: 500; color: var(--mn-muted); }
  .mn-table-hover tbody tr:hover { background: none; }
  .mn-table-hover tbody tr:hover > :first-child { box-shadow: inset 2px 0 0 var(--hy-pink); }

  /* Badges: white labels with a short vertical strand in their colour. */
  .mn-badge { gap: .45em; background: var(--mn-surface); color: var(--mn-fg); border-color: var(--mn-border); font-weight: 500; }
  .mn-badge::before { content: ""; width: 2px; height: .85em; border-radius: 1px; background: var(--_c, var(--hy-pink)); }
  .mn-badge-soft { background: var(--mn-surface-2); border-color: transparent; }
  .mn-chip { background: var(--mn-surface); }

  .mn-tab { font-weight: 450; }
  .mn-tab::after { inset-inline: .9rem; height: 2px; border-radius: 2px; transform-origin: left; }
  .mn-tab[aria-selected="true"]::after { background: var(--hy-pink); animation: hiyamugi-lay 320ms var(--mn-spring); }
  .mn-tabs-boxed .mn-tab-list { background: var(--mn-surface); border: 1px solid var(--mn-border); }
  .mn-tabs-boxed .mn-tab[aria-selected="true"] { background: var(--mn-surface); box-shadow: var(--hy-strand); }
  .mn-toggle-group { background: var(--mn-surface); border: 1px solid var(--mn-border); }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-surface); box-shadow: var(--hy-strand); color: var(--mn-fg); }

  .mn-progress { height: 2px; background: var(--mn-border); box-shadow: none; border-radius: 2px; }
  .mn-progress-lg { height: 4px; }
  .mn-progress::after { background: var(--_c, var(--hy-pink)); }
  .mn-radial { --_t: .18rem; background: conic-gradient(var(--_c, var(--hy-pink)) calc(var(--_v) * 1%), var(--mn-border) 0); font-weight: 500; }
  /* Spinner: a pink strand and a green strand chasing each other. */
  .mn-spinner { border: 1.5px solid transparent; border-top-color: var(--_c, var(--hy-pink)); border-bottom-color: var(--hy-green); animation: hiyamugi-spin 1s linear infinite; }

  .mn-alert { position: relative; background: var(--mn-surface); border-color: var(--mn-border); }
  .mn-alert::before { content: ""; position: absolute; top: -1px; left: 1rem; width: 2rem; height: 2px; border-radius: 2px; background: var(--_a); }
  .mn-avatar { box-shadow: inset 0 0 0 1px var(--mn-border); }
  .mn-step::before { border-width: 1.5px; font-weight: 500; }
  .mn-step[aria-current="step"]::before { border-color: var(--hy-pink); color: var(--mn-fg); box-shadow: none; }
  .mn-step[data-state="complete"]::before { background: var(--mn-fg); border-color: var(--mn-fg); color: var(--mn-bg); }
  .mn-step + .mn-step::after, .mn-step[data-state="complete"] + .mn-step::after { height: 1px; background: var(--mn-border); }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast { box-shadow: 0 12px 32px -16px rgb(0 0 0 / .2); }
  .mn-menu-item:hover, .mn-menu-item:focus-visible { box-shadow: inset 2px 0 0 var(--hy-pink); }
  .mn-page[aria-current="page"] { border-color: var(--mn-border); box-shadow: var(--hy-strand); }

  /* Charts: thin grey strands; one pink strand for what matters. */
  .mn-bar::before { max-width: 10px; margin-inline: auto; width: 100%; }
  .mn-chart-h .mn-bar::before { max-width: none; margin: 0; height: 4px; }
  .mn-donut { --thick: 9%; }
}}

/* ── RAMYEON ───────────────────────────────────────────────────────────────
   Instant noodles: a packet of instructions and a three-minute wait. A
   terminal system: monospace everything, square corners, [ bracketed ]
   buttons and badges, inverted selection, block-character progress and
   bars, a | /, \ spinner, a blinking cursor on the page title, and content
   that types itself in from the left. */
@keyframes ramyeon-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ramyeon-tick { to { transform: rotate(180deg); } }
@keyframes ramyeon-blink { 50% { opacity: 0; } }

@layer mian.noodles { @scope ([data-noodle="ramyeon"]) to ([data-noodle]:not([data-noodle="ramyeon"])) {
  :scope {
    --mn-enter: ramyeon-type; --mn-enter-duration: 220ms; --mn-ease-enter: steps(10, end);
    --mn-duration: 80ms; --mn-spring: steps(3, end);
    --ry-dash: 1px dashed var(--mn-input);
    --mn-focus: 0 0 0 2px var(--mn-bg), 0 0 0 3px var(--mn-ring);
    --mn-bar-radius: 0; --mn-bar-gap: 6px; --mn-line-width: 2px; --mn-area-opacity: 0; --mn-point-opacity: 1;
    --mn-series-1: var(--mn-fg); --mn-series-2: var(--mn-accent);
    caret-color: var(--mn-accent);
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3) { letter-spacing: -.02em; }
  :scope .mn-h1::after { content: "_"; color: var(--mn-accent); animation: ramyeon-blink 1.1s steps(1) infinite; }
  @media (prefers-reduced-motion: reduce) { :scope .mn-h1::after { animation: none; } }

  /* Buttons: [ LABEL ]. Hover inverts. */
  .mn-btn { box-shadow: none; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: calc(var(--mn-text-sm) - 1px); gap: .35em; transition: none; }
  .mn-btn:not(.mn-btn-icon, .mn-btn-link, [aria-busy="true"])::before { content: "["; opacity: .6; }
  .mn-btn:not(.mn-btn-icon, .mn-btn-link, [aria-busy="true"])::after { content: "]"; opacity: .6; }
  .mn-btn:active { transform: none; }
  .mn-btn-outline { --_bd: var(--_c, var(--mn-fg)); }
  .mn-btn-outline:hover, .mn-btn-ghost:hover, .mn-btn-soft:hover { --_bg: var(--_c, var(--mn-fg)); --_fg: var(--mn-bg); }
  .mn-btn-soft { --_bg: var(--mn-surface-2); --_fg: var(--_ct, var(--mn-fg)); }
  .mn-btn-link { text-transform: none; letter-spacing: 0; text-decoration: underline; text-underline-offset: 3px; }
  .mn-btn-link:hover { --_bg: transparent; --_fg: var(--mn-accent); }

  /* Fields: a plain box; focus switches the edge to the accent. */
  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { box-shadow: none; border-color: var(--mn-input); }
  .mn-input::placeholder, .mn-textarea::placeholder { color: var(--mn-muted); }
  .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-accent); box-shadow: 0 0 0 1px var(--mn-accent); }
  .mn-input-group > .mn-input { box-shadow: none; }
  .mn-addon { font-weight: 700; color: var(--mn-accent); }
  .mn-label { text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; }
  .mn-checkbox, .mn-radio { border-radius: 0; box-shadow: none; border-color: var(--mn-fg); }
  .mn-radio::before { border-radius: 0; }
  /* Switch: a slot and a solid block. */
  .mn-switch { --_w: 2.6rem; --_hh: 1.3rem; border-radius: 0; background: var(--mn-surface); box-shadow: inset 0 0 0 1px var(--mn-fg); }
  .mn-switch::before { border-radius: 0; top: 3px; left: 3px; width: calc(var(--_hh) - 6px); height: calc(var(--_hh) - 6px); background: var(--mn-fg); box-shadow: none; transition: none; }
  .mn-switch:checked { background: var(--_on); }
  .mn-switch:checked::before { transform: translateX(calc(var(--_w) - var(--_hh))); background: var(--_onf); }
  .mn-slider { --_track: 8px; --_thumb: 1rem; }
  .mn-slider::-webkit-slider-runnable-track { border-radius: 0; box-shadow: inset 0 0 0 1px var(--mn-fg); background: linear-gradient(to right, var(--_on) var(--_v), transparent var(--_v)), repeating-linear-gradient(90deg, var(--mn-surface-2) 0 6px, transparent 6px 8px); }
  .mn-slider::-moz-range-track { border-radius: 0; box-shadow: inset 0 0 0 1px var(--mn-fg); }
  .mn-slider::-moz-range-progress { border-radius: 0; }
  .mn-slider::-webkit-slider-thumb { width: .6rem; border-radius: 0; border: 0; background: var(--mn-accent); box-shadow: none; }
  .mn-slider::-moz-range-thumb { width: .6rem; border-radius: 0; border: 0; background: var(--mn-accent); box-shadow: none; }

  /* Cards: a box with a # heading, like a section of a README. */
  .mn-card { box-shadow: none; }
  .mn-card-header { border-bottom: var(--ry-dash); padding-bottom: .9rem; margin-bottom: .25rem; }
  .mn-card-title::before { content: "# "; color: var(--mn-accent); }
  .mn-card-footer-bordered { background: none; border-top: var(--ry-dash); }
  .mn-stat-label { text-transform: uppercase; letter-spacing: .06em; font-size: .6875rem; }
  .mn-stat-value { font-weight: 700; }

  .mn-table th, .mn-table td { border-bottom: var(--ry-dash); }
  .mn-table thead th { background: none; text-transform: uppercase; letter-spacing: .06em; font-size: .6875rem; border-bottom: 1px solid var(--mn-fg); }
  .mn-table-hover tbody tr:hover { background: var(--mn-fg); color: var(--mn-bg); }
  .mn-table-hover tbody tr:hover .mn-muted, .mn-table-hover tbody tr:hover .mn-badge { color: inherit; }

  /* Badges: [TEXT], coloured by role, no fill. */
  .mn-badge { background: transparent; color: var(--_ct, var(--mn-fg)); border: 0; padding: 0; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
  .mn-badge::before { content: "["; } .mn-badge::after { content: "]"; }
  .mn-chip { border-style: dashed; }
  .mn-kbd { border-radius: 0; box-shadow: none; }

  /* Tabs: the current tab is shown in inverse video. */
  .mn-tab-list { border-bottom: var(--ry-dash); gap: 2px; }
  .mn-tab { text-transform: uppercase; letter-spacing: .05em; font-size: .75rem; height: var(--mn-size-sm); }
  .mn-tab::after { display: none; }
  .mn-tab[aria-selected="true"] { background: var(--mn-fg); color: var(--mn-bg); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { border: 1px solid var(--mn-fg); border-radius: 0; padding: 2px; background: none; }
  .mn-tabs-boxed .mn-tab, .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 0; }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-fg); color: var(--mn-bg); box-shadow: none; }

  /* Progress: ▮▮▮▮▮▯▯▯, blocks with gaps. */
  .mn-progress { height: .9rem; border-radius: 0; box-shadow: inset 0 0 0 1px var(--mn-input); background: repeating-linear-gradient(90deg, transparent 0 2px, var(--mn-surface-2) 2px 8px, transparent 8px 10px); }
  .mn-progress::after { border-radius: 0; background: repeating-linear-gradient(90deg, transparent 0 2px, var(--_p) 2px 8px, transparent 8px 10px); transition: width 300ms steps(8, end); }
  .mn-radial { --_t: .25rem; font-weight: 700; }
  /* Spinner: a bar stepping through | /, \. */
  .mn-spinner { border: 0; border-radius: 0; background: linear-gradient(var(--_c, currentColor), var(--_c, currentColor)) center / 2px 80% no-repeat; animation: ramyeon-tick .6s steps(4) infinite; }

  .mn-alert { border: var(--ry-dash); border-color: var(--_a); background: none; }
  .mn-alert-title::before { content: "! "; color: var(--_at); }
  .mn-avatar { border-radius: 0; box-shadow: inset 0 0 0 1px var(--mn-fg); }
  .mn-step::before { border-radius: 0; }
  .mn-step + .mn-step::after { height: 0; background: none; border-top: var(--ry-dash); }
  .mn-step[data-state="complete"] + .mn-step::after { background: none; border-top: 1px solid var(--mn-fg); }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { border-color: var(--mn-fg); box-shadow: 4px 4px 0 color-mix(in oklab, var(--mn-fg) 18%, transparent); }
  .mn-menu-item { border-radius: 0; }
  .mn-menu-item:hover, .mn-menu-item:focus-visible { background: var(--mn-fg); color: var(--mn-bg); }
  .mn-page { border-radius: 0; }
  .mn-page[aria-current="page"] { background: var(--mn-fg); color: var(--mn-bg); border-color: var(--mn-fg); box-shadow: none; }
  .mn-divider::before, .mn-divider::after { height: 0; background: none; border-top: var(--ry-dash); }

  /* Charts: bars stacked from character blocks; dashed grid. */
  .mn-chart-bars { background: repeating-linear-gradient(to top, transparent 0 calc((var(--h) - 1.25rem) / 4 - 1px), var(--mn-border) calc((var(--h) - 1.25rem) / 4 - 1px) calc((var(--h) - 1.25rem) / 4)); background-size: 100% calc(100% - 1.25rem); background-repeat: no-repeat; }
  .mn-bar::before { background: repeating-linear-gradient(to top, color-mix(in oklab, var(--mn-fg) 30%, transparent) 0 6px, transparent 6px 8px); }
  .mn-bar.mn-hl::before, .mn-bar:hover::before { background: repeating-linear-gradient(to top, var(--mn-accent) 0 6px, transparent 6px 8px); }
  .mn-chart-h .mn-bar::before { background: repeating-linear-gradient(to right, color-mix(in oklab, var(--mn-fg) 30%, transparent) 0 6px, transparent 6px 8px); }
  .mn-chart-h .mn-bar.mn-hl::before { background: repeating-linear-gradient(to right, var(--mn-accent) 0 6px, transparent 6px 8px); }
  .mn-bar[data-value]::after { border-radius: 0; }
  .mn-chart-line .mn-line { stroke-linecap: square; stroke-linejoin: miter; }
  .mn-chart-line .mn-grid-line { stroke-dasharray: 3 3; }
  .mn-legend li::before { border-radius: 0; }
  .mn-donut { --thick: 24%; }
}}

/* ── FETTUCCINE ────────────────────────────────────────────────────────────
   “Little ribbons” of egg dough, all cut from one sheet. A tonal system:
   every surface is a tint of the same seed colour, layers are told apart by
   tone rather than by lines, buttons are pills, and whatever you touch
   answers with a soft layer of the colour it sits on. */
@keyframes fettuccine-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes fettuccine-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="fettuccine"]) to ([data-noodle]:not([data-noodle="fettuccine"])) {
  :scope {
    --mn-enter: fettuccine-in; --mn-enter-duration: 260ms; --mn-ease-enter: cubic-bezier(.05, .7, .1, 1);
    --mn-duration: 200ms; --mn-spring: cubic-bezier(.05, .7, .1, 1);
    --ft-1: color-mix(in oklab, var(--mn-primary) 5%, var(--mn-surface));
    --ft-2: color-mix(in oklab, var(--mn-primary) 9%, var(--mn-surface));
    --ft-3: color-mix(in oklab, var(--mn-primary) 14%, var(--mn-surface));
    --ft-lift: 0 1px 2px rgb(0 0 0 / .18), 0 2px 6px 2px rgb(0 0 0 / .09);
    --mn-bar-radius: 6px; --mn-bar-gap: 6px; --mn-line-width: 2.5px; --mn-area-opacity: .14;
    --mn-bar-fill: var(--ft-3); --mn-bar-fill-hl: var(--mn-primary);
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3, .mn-display) { letter-spacing: -.01em; font-weight: 400; }

  .mn-btn { border-radius: 999px; box-shadow: none; font-weight: 500; letter-spacing: .01em; padding: 0 calc(var(--_h) * .6); }
  .mn-btn-icon { padding: 0; }
  .mn-btn:not(.mn-btn-outline, .mn-btn-soft, .mn-btn-ghost, .mn-btn-link):hover { box-shadow: var(--ft-lift); }
  .mn-btn:active { transform: none; }
  .mn-btn-outline { --_bd: var(--mn-input); --_fg: var(--_ct, var(--mn-primary-text)); }
  .mn-btn-ghost { --_fg: var(--_ct, var(--mn-primary-text)); }
  .mn-btn-outline:hover, .mn-btn-ghost:hover { --_bg: color-mix(in oklab, var(--_c, var(--mn-primary)) 9%, transparent); }

  .mn-input, .mn-select, .mn-textarea, .mn-number, .mn-input-group { border-color: var(--mn-input); background-color: transparent; box-shadow: none; }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within { border-color: var(--mn-primary); box-shadow: inset 0 0 0 1px var(--mn-primary); }
  .mn-label { font-weight: 500; }
  .mn-switch { --_w: 3.1rem; --_hh: 1.85rem; background: var(--ft-3); box-shadow: inset 0 0 0 2px var(--mn-input); }
  .mn-switch::before { top: 7px; left: 7px; width: calc(var(--_hh) - 14px); height: calc(var(--_hh) - 14px); background: var(--mn-input); box-shadow: none; transition: all var(--mn-duration) var(--mn-spring); }
  .mn-switch:checked { background: var(--mn-primary); box-shadow: none; }
  .mn-switch:checked::before { top: 3px; left: 3px; width: calc(var(--_hh) - 6px); height: calc(var(--_hh) - 6px); background: var(--mn-primary-fg); }

  .mn-card, .mn-table-wrap, .mn-accordion, .mn-list, .mn-stats { border-color: transparent; box-shadow: none; background-color: var(--ft-1); }
  .mn-card-interactive:hover { background-color: var(--ft-2); border-color: transparent; box-shadow: var(--ft-lift); }
  .mn-menu, .mn-popover, .mn-toast, .mn-combobox-list { border-color: transparent; background-color: var(--ft-2); box-shadow: var(--ft-lift); border-radius: 12px; }
  .mn-modal, .mn-drawer, .mn-command-dialog { border-color: transparent; background-color: var(--ft-2); box-shadow: 0 4px 8px 3px rgb(0 0 0 / .1), 0 1px 3px rgb(0 0 0 / .2); border-radius: 28px; }
  .mn-drawer { border-radius: 0; }

  .mn-table thead th { background: transparent; color: var(--mn-muted); font-weight: 500; }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--mn-primary) 7%, transparent); }

  .mn-badge { font-weight: 500; }
  .mn-chip { border-color: var(--mn-input); background-color: transparent; border-radius: 8px; font-weight: 500; }

  .mn-tab { font-weight: 500; }
  .mn-tab[aria-selected="true"] { color: var(--mn-primary-text); }
  .mn-tab::after { height: 3px; border-radius: 3px 3px 0 0; inset-inline: 1rem; }
  .mn-tab[aria-selected="true"]::after { background: var(--mn-primary); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { background: transparent; border-color: var(--mn-input); border-radius: 999px; }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked), .mn-tabs-boxed .mn-tab[aria-selected="true"] { background: var(--mn-secondary); color: var(--mn-secondary-fg); box-shadow: none; }
  .mn-tabs-vertical .mn-tab-list { border-radius: 20px; }

  .mn-progress { height: 4px; background: var(--ft-3); }
  .mn-progress::after { background: var(--mn-primary); }
  .mn-spinner { border-width: 3px; border-color: transparent; border-top-color: var(--mn-primary); border-right-color: var(--mn-primary); animation: fettuccine-spin .9s cubic-bezier(.4, 0, .2, 1) infinite; }
  .mn-alert { border-color: transparent; background-color: var(--ft-2); }
  .mn-bar::before { border-radius: 6px 6px 0 0; }
}}

/* ── LASAGNE ───────────────────────────────────────────────────────────────
   Flat sheets, built in layers: sheet, ragù, béchamel, sheet. A flat, layered
   system: solid colour with no gradients, blur or soft shadows, and surfaces
   stacked on offset layers you can count (--ls-layers: pasta yellow, then
   ragù red). Pressing a button pushes it down onto its layer. */
@keyframes lasagne-in { from { opacity: 0; transform: translate(-6px, -6px); } to { transform: none; } }
@keyframes lasagne-stack { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-4px, -4px); } }

@layer mian.noodles { @scope ([data-noodle="lasagne"]) to ([data-noodle]:not([data-noodle="lasagne"])) {
  :scope {
    --mn-enter: lasagne-in; --mn-enter-duration: 220ms; --mn-ease-enter: cubic-bezier(.3, 1.3, .6, 1);
    --mn-duration: 120ms; --mn-spring: cubic-bezier(.3, 1.3, .6, 1);
    --ls-sheet: light-dark(#f2c75c, #c9962e);
    --ls-ragu: light-dark(#b8322a, #ef6b5f);
    --ls-layers: 4px 4px 0 var(--ls-sheet), 8px 8px 0 var(--ls-ragu);
    --ls-layer: 3px 3px 0 var(--ls-sheet);
    --mn-focus: 0 0 0 3px var(--mn-bg), 0 0 0 5px var(--mn-ring);
    --mn-bar-radius: 4px; --mn-bar-gap: 8px; --mn-line-width: 3px; --mn-area-opacity: .18; --mn-point-opacity: 1;
    --mn-bar-fill: var(--ls-sheet); --mn-bar-fill-hl: var(--ls-ragu);
    --mn-series-1: var(--ls-ragu); --mn-series-2: var(--mn-accent);
  }

  /* Buttons: flat slabs on one layer of pasta; pressing drops them onto it. */
  .mn-btn { box-shadow: 3px 3px 0 color-mix(in oklab, var(--_c, var(--mn-primary)) 55%, var(--ls-sheet)); font-weight: 700; transition: transform 90ms var(--mn-ease), box-shadow 90ms var(--mn-ease), background-color var(--mn-duration); }
  .mn-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 transparent; }
  .mn-btn:focus-visible { box-shadow: 3px 3px 0 var(--ls-sheet), var(--mn-focus); }
  .mn-btn-outline { --_bd: var(--mn-fg); border-width: 2px; --_bg: var(--mn-surface); box-shadow: var(--ls-layer); }
  .mn-btn-soft { box-shadow: none; }
  .mn-btn-ghost, .mn-btn-link { box-shadow: none; }
  .mn-btn-ghost:active, .mn-btn-link:active { transform: none; }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { border: 2px solid var(--mn-fg); background-color: var(--mn-surface); box-shadow: none; }
  .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: var(--ls-layer); }
  .mn-input-group > .mn-input { border: 0; box-shadow: none; }
  .mn-label { font-weight: 700; }
  .mn-checkbox, .mn-radio { border: 2px solid var(--mn-fg); background-color: var(--mn-surface); }
  .mn-checkbox { border-radius: 3px; }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); border-color: var(--mn-fg); box-shadow: 2px 2px 0 var(--ls-sheet); }
  /* Switch: a flat slot and a sheet of pasta that slides across it. */
  .mn-switch { --_w: 2.8rem; --_hh: 1.5rem; border-radius: 6px; background: var(--mn-surface-2); box-shadow: inset 0 0 0 2px var(--mn-fg); }
  .mn-switch::before { border-radius: 3px; background: var(--mn-fg); box-shadow: none; top: 4px; left: 4px; width: calc(var(--_hh) - 8px); height: calc(var(--_hh) - 8px); }
  .mn-switch:checked { background: var(--_on); box-shadow: inset 0 0 0 2px var(--mn-fg), 2px 2px 0 var(--ls-sheet); }
  .mn-switch:checked::before { background: var(--mn-surface); }
  .mn-slider { --_track: 8px; }
  .mn-slider::-webkit-slider-runnable-track { border-radius: 3px; box-shadow: inset 0 0 0 2px var(--mn-fg); background: linear-gradient(to right, var(--ls-ragu) var(--_v), var(--mn-surface-2) var(--_v)); }
  .mn-slider::-moz-range-track { border-radius: 3px; background: var(--mn-surface-2); }
  .mn-slider::-webkit-slider-thumb { border-radius: 3px; border: 2px solid var(--mn-fg); background: var(--ls-sheet); }
  .mn-slider::-moz-range-thumb { border-radius: 3px; border: 2px solid var(--mn-fg); background: var(--ls-sheet); }

  /* Surfaces: a sheet on two offset layers, pasta, then ragù. */
  .mn-card, .mn-table-wrap, .mn-accordion, .mn-stats, .mn-collapse { border: 2px solid var(--mn-fg); box-shadow: var(--ls-layers); }
  .mn-list { border: 2px solid var(--mn-fg); box-shadow: var(--ls-layer); }
  .mn-card-title { font-weight: 800; }
  .mn-card-footer-bordered { background: var(--mn-surface-2); border-top: 2px solid var(--mn-fg); }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { border: 2px solid var(--mn-fg); box-shadow: var(--ls-layers); }
  .mn-list > li + li, .mn-accordion > details + details { border-top: 2px solid var(--mn-fg); }
  .mn-stats > .mn-stat + .mn-stat { border-inline-start: 2px solid var(--mn-fg); }

  .mn-table th, .mn-table td { border-bottom: 2px solid color-mix(in oklab, var(--mn-fg) 14%, transparent); }
  .mn-table thead th { background: var(--ls-sheet); color: #2a160f; font-weight: 800; border-bottom: 2px solid var(--mn-fg); }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--ls-sheet) 30%, transparent); }

  .mn-badge { border: 2px solid var(--mn-fg); font-weight: 800; box-shadow: 2px 2px 0 var(--ls-sheet); }
  .mn-badge-soft { background: var(--mn-surface); color: var(--_ct, var(--mn-fg)); }
  .mn-chip { border: 2px solid var(--mn-fg); font-weight: 700; }

  /* Tabs: the chosen tab is lifted onto the stack. */
  .mn-tab-list { border-bottom: 2px solid var(--mn-fg); gap: .35rem; }
  .mn-tab { font-weight: 700; border-radius: 6px 6px 0 0; }
  .mn-tab::after { display: none; }
  .mn-tab[aria-selected="true"] { background: var(--ls-sheet); color: #2a160f; box-shadow: inset 0 0 0 2px var(--mn-fg); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { border: 2px solid var(--mn-fg); background: var(--mn-surface-2); box-shadow: var(--ls-layer); }
  .mn-tabs-boxed .mn-tab { border-radius: 4px; }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--ls-sheet); color: #2a160f; box-shadow: inset 0 0 0 2px var(--mn-fg); }

  /* Progress: layers filling a tray. */
  .mn-progress { height: .9rem; border-radius: 4px; background: var(--mn-surface-2); box-shadow: inset 0 0 0 2px var(--mn-fg); }
  .mn-progress::after { border-radius: 4px 0 0 4px; background: linear-gradient(var(--ls-sheet) 0 45%, var(--ls-ragu) 45%); box-shadow: inset 0 0 0 2px var(--mn-fg); }
  .mn-radial { --_t: .5rem; background: conic-gradient(var(--ls-ragu) calc(var(--_v) * 1%), var(--mn-surface-2) 0); box-shadow: 0 0 0 2px var(--mn-fg), 3px 3px 0 2px var(--ls-sheet); }
  .mn-radial::before { box-shadow: 0 0 0 2px var(--mn-fg); }
  /* Spinner: three stacked sheets shuffling. */
  .mn-spinner { border: 2px solid var(--mn-fg); border-radius: 3px; width: calc(var(--_s) * .8); height: calc(var(--_s) * .8); margin: calc(var(--_s) * .1); background: var(--mn-surface); box-shadow: 3px 3px 0 var(--ls-sheet), 6px 6px 0 var(--ls-ragu); animation: lasagne-stack .9s var(--mn-spring) infinite; }

  .mn-alert { border: 2px solid var(--mn-fg); box-shadow: 4px 4px 0 var(--_a); }
  .mn-avatar { box-shadow: 0 0 0 2px var(--mn-fg), 3px 3px 0 2px var(--ls-sheet); }
  .mn-step::before { border: 2px solid var(--mn-fg); box-shadow: 2px 2px 0 var(--ls-sheet); }
  .mn-page { border: 2px solid transparent; font-weight: 700; }
  .mn-page[aria-current="page"] { border-color: var(--mn-fg); background: var(--ls-sheet); color: #2a160f; box-shadow: 2px 2px 0 var(--ls-ragu); }

  /* Charts: columns stacked from sheets; the highlighted column is ragù. */
  .mn-bar::before { box-shadow: inset 0 0 0 2px var(--mn-fg); background-image: repeating-linear-gradient(to top, transparent 0 10px, rgb(0 0 0 / .18) 10px 12px); }
  .mn-donut { --thick: 30%; }
}}

/* ── PAPPARDELLE ───────────────────────────────────────────────────────────
   The widest ribbons of egg pasta, cut by hand, served with slow Tuscan
   ragù. A bold flat system: broad bands of solid colour, tall flat buttons,
   wide ribbons for tabs and progress, tonal fills instead of borders, and no
   gradients, shadows or blur anywhere. Cypress green with a yolk ribbon. */
@keyframes pappardelle-in { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes pappardelle-ribbon { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

@layer mian.noodles { @scope ([data-noodle="pappardelle"]) to ([data-noodle]:not([data-noodle="pappardelle"])) {
  :scope {
    --mn-enter: pappardelle-in; --mn-enter-duration: 260ms; --mn-ease-enter: cubic-bezier(.65, 0, .35, 1);
    --mn-duration: 140ms; --mn-spring: cubic-bezier(.65, 0, .35, 1);
    --pp-band: color-mix(in oklab, var(--mn-primary) 12%, var(--mn-surface));
    --mn-focus: 0 0 0 3px var(--mn-accent);
    --mn-bar-radius: 0; --mn-bar-gap: 6px; --mn-line-width: 4px; --mn-area-opacity: .2; --mn-point-opacity: 0;
    --mn-bar-fill: var(--pp-band); --mn-bar-fill-hl: var(--mn-primary);
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3, .mn-display, .mn-title) { letter-spacing: -.025em; }

  /* Buttons: tall flat slabs; no shadow ever. */
  .mn-btn { --_h: calc(var(--mn-size-md) + 4px); border: 0; box-shadow: none; font-weight: 650; }
  .mn-btn-sm { --_h: var(--mn-size-sm); } .mn-btn-xs { --_h: var(--mn-size-xs); } .mn-btn-lg { --_h: calc(var(--mn-size-lg) + 4px); }
  .mn-btn:active { transform: none; filter: brightness(.94); }
  .mn-btn-outline { --_bg: var(--pp-band); --_fg: var(--_ct, var(--mn-fg)); }
  .mn-btn-outline:hover { --_bg: color-mix(in oklab, var(--mn-primary) 20%, var(--mn-surface)); }
  .mn-btn-soft { --_bg: color-mix(in oklab, var(--mn-accent) 40%, var(--mn-surface)); --_fg: var(--mn-fg); }
  .mn-btn:focus-visible { box-shadow: var(--mn-focus); }

  /* Fields: tonal flat wells with a ribbon underneath on focus. */
  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { border: 0; background-color: var(--mn-surface-2); box-shadow: inset 0 -2px 0 color-mix(in oklab, var(--mn-fg) 25%, transparent); }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within, .mn-number:focus-within, .mn-otp > input:focus { box-shadow: inset 0 -4px 0 var(--mn-primary); background-color: var(--pp-band); }
  .mn-input-group > .mn-input { box-shadow: none; background: transparent; }
  .mn-label { font-weight: 650; }
  .mn-checkbox, .mn-radio { border: 0; background-color: var(--mn-surface-2); box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--mn-fg) 30%, transparent); }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); box-shadow: none; }
  /* Switch: a flat ribbon with a square yolk. */
  .mn-switch { --_w: 3rem; --_hh: 1.5rem; border-radius: 4px; background: var(--mn-surface-2); box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--mn-fg) 25%, transparent); }
  .mn-switch::before { border-radius: 2px; box-shadow: none; background: var(--mn-fg); }
  .mn-switch:checked { background: var(--_on); box-shadow: none; }
  .mn-switch:checked::before { background: var(--mn-accent); }
  .mn-slider { --_track: 10px; }
  .mn-slider::-webkit-slider-runnable-track { border-radius: 0; box-shadow: none; background: linear-gradient(to right, var(--_on) var(--_v), var(--mn-surface-2) var(--_v)); }
  .mn-slider::-moz-range-track { border-radius: 0; background: var(--mn-surface-2); }
  .mn-slider::-webkit-slider-thumb { border-radius: 2px; border: 0; background: var(--mn-accent); width: 1.1rem; }
  .mn-slider::-moz-range-thumb { border-radius: 2px; border: 0; background: var(--mn-accent); }

  /* Surfaces: flat tones, no borders; a ribbon of colour across the top. */
  .mn-card, .mn-table-wrap, .mn-list, .mn-accordion, .mn-stats, .mn-collapse { border: 0; box-shadow: none; background: var(--mn-surface); }
  .mn-card { box-shadow: inset 0 6px 0 var(--mn-primary); }
  .mn-card-header { padding-top: 1.6rem; }
  .mn-card-title { font-weight: 750; }
  .mn-card-footer-bordered { border-top: 0; background: var(--mn-surface-2); padding-top: 1rem; }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { border: 0; box-shadow: 0 0 0 1px var(--mn-border); background: var(--mn-surface); }
  .mn-modal, .mn-drawer { box-shadow: inset 0 6px 0 var(--mn-primary); }
  .mn-list > li + li, .mn-accordion > details + details { border-top: 2px solid var(--mn-bg); }
  .mn-stats > .mn-stat + .mn-stat { border-inline-start: 2px solid var(--mn-bg); }

  .mn-table th, .mn-table td { border-bottom: 0; }
  .mn-table tbody tr:nth-child(odd) { background: color-mix(in oklab, var(--mn-surface-2) 60%, transparent); }
  .mn-table thead th { background: var(--mn-primary); color: var(--mn-primary-fg); font-weight: 650; }
  .mn-table-hover tbody tr:hover { background: var(--pp-band); }

  .mn-badge { border: 0; border-radius: 2px; font-weight: 700; }
  .mn-badge-soft, .mn-badge-outline { background: var(--pp-band); color: var(--_ct, var(--mn-fg)); }
  .mn-chip { border: 0; background: var(--mn-surface-2); }

  /* Tabs: each tab is a ribbon; the chosen one is solid colour. */
  .mn-tab-list { border-bottom: 0; gap: 4px; }
  .mn-tab { background: var(--mn-surface-2); border-radius: 0; font-weight: 650; }
  .mn-tab::after { display: none; }
  .mn-tab[aria-selected="true"] { background: var(--mn-primary); color: var(--mn-primary-fg); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { background: transparent; border: 0; padding: 0; gap: 4px; }
  .mn-toggle-group > button, .mn-toggle-group > label { background: var(--mn-surface-2); border-radius: 2px; }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-primary); color: var(--mn-primary-fg); box-shadow: none; }

  /* Progress: a wide ribbon with a yolk edge. */
  .mn-progress { height: .9rem; border-radius: 0; background: var(--mn-surface-2); box-shadow: none; }
  .mn-progress::after { border-radius: 0; background: var(--mn-primary); box-shadow: inset -6px 0 0 var(--mn-accent); }
  .mn-radial { --_t: .6rem; background: conic-gradient(var(--mn-primary) calc(var(--_v) * 1%), var(--mn-surface-2) 0); }
  /* Spinner: a ribbon running through a square window. */
  .mn-spinner { border: 0; border-radius: 2px; overflow: hidden; position: relative; background: var(--mn-surface-2); height: calc(var(--_s) * .5); margin-block: calc(var(--_s) * .25); }
  .mn-spinner::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--_c, var(--mn-primary)); animation: pappardelle-ribbon .9s var(--mn-spring) infinite; }

  .mn-alert { border: 0; background: color-mix(in oklab, var(--_a) 14%, var(--mn-surface)); box-shadow: inset 6px 0 0 var(--_a); }
  .mn-avatar { border-radius: 4px; }
  .mn-step::before { border: 0; background: var(--mn-surface-2); border-radius: 2px; }
  .mn-step + .mn-step::after { height: 6px; top: calc(1rem - 3px); background: var(--mn-surface-2); }
  .mn-step[data-state="complete"] + .mn-step::after { background: var(--mn-primary); }
  .mn-page { border: 0; background: var(--mn-surface-2); border-radius: 2px; }
  .mn-page[aria-current="page"] { background: var(--mn-primary); color: var(--mn-primary-fg); }

  /* Charts: flat square columns; the highlighted one is solid green. */
  .mn-bar::before { border-radius: 0; }
  .mn-donut { --thick: 34%; }
}}

/* ── PACCHERI ──────────────────────────────────────────────────────────────
   The widest tubes, cooked into big flat ribbons. A flat, geometric system:
   solid blue, red and yellow blocks on off-white, square rectangles and
   true circles, bold grotesk, no shadows or gradients: Bauhaus on a plate. */
@keyframes paccheri-in { from { opacity: 0; transform: translateX(-12px); } }
@keyframes paccheri-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="paccheri"]) to ([data-noodle]:not([data-noodle="paccheri"])) {
  :scope {
    --mn-enter: paccheri-in; --mn-enter-duration: 160ms; --mn-ease-enter: cubic-bezier(.2, 0, 0, 1);
    --mn-duration: 100ms;
    --mn-focus: 0 0 0 3px var(--mn-secondary);
    --mn-bar-radius: 0; --mn-bar-gap: 4px; --mn-line-width: 4px; --mn-area-opacity: 0;
    --mn-bar-fill: var(--mn-primary); --mn-bar-fill-hl: var(--mn-accent);
    --mn-series-1: var(--mn-primary); --mn-series-2: var(--mn-accent); --mn-series-3: var(--mn-secondary);
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3, .mn-display, .mn-title) { letter-spacing: -.035em; }

  .mn-btn { box-shadow: none; font-weight: 800; border-width: 2px; }
  .mn-btn:not(.mn-btn-outline, .mn-btn-soft, .mn-btn-ghost, .mn-btn-link) { border-color: var(--mn-fg); }
  .mn-btn:not(.mn-btn-outline, .mn-btn-soft, .mn-btn-ghost, .mn-btn-link):hover { --_bg: var(--_c, var(--mn-accent)); --_fg: var(--_cf, var(--mn-accent-fg)); }
  .mn-btn-outline { --_bd: var(--_c, var(--mn-fg)); }
  .mn-btn-outline:hover { --_bg: var(--mn-secondary); --_fg: var(--mn-secondary-fg); }

  .mn-input, .mn-select, .mn-textarea, .mn-number, .mn-input-group { border-width: 2px; border-color: var(--mn-fg); box-shadow: none; }
  .mn-input-group > .mn-input { border: 0; }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within { border-color: var(--mn-primary); box-shadow: 4px 4px 0 var(--mn-secondary); }
  .mn-label { font-weight: 800; }
  .mn-checkbox { border: 2px solid var(--mn-fg); border-radius: 0; }
  .mn-radio { border: 2px solid var(--mn-fg); }
  .mn-switch { border-radius: 999px; background: var(--mn-surface); box-shadow: inset 0 0 0 2px var(--mn-fg); }
  .mn-switch::before { background: var(--mn-fg); box-shadow: none; }
  .mn-switch:checked { background: var(--mn-primary); box-shadow: inset 0 0 0 2px var(--mn-fg); }
  .mn-switch:checked::before { background: var(--mn-secondary); }

  .mn-card, .mn-table-wrap, .mn-accordion, .mn-list, .mn-stats { border: 2px solid var(--mn-fg); box-shadow: none; }
  .mn-card-header { border-bottom: 2px solid var(--mn-fg); }
  .mn-card-title { font-weight: 800; }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { border: 2px solid var(--mn-fg); box-shadow: 8px 8px 0 var(--mn-secondary); }
  /* The muted band is a yellow field in light mode; in dark mode it stays a dark surface so text keeps its contrast. */
  .mn-section-muted { background: light-dark(var(--mn-secondary), var(--mn-surface-2)); }
  .mn-section-muted :is(.mn-link, a:not([class]), .mn-eyebrow) { color: var(--mn-fg); text-decoration-color: var(--mn-accent); }

  .mn-table thead th { background: var(--mn-fg); color: var(--mn-bg); font-weight: 800; }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--mn-secondary) 35%, transparent); }

  .mn-badge { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .6875rem; }
  .mn-chip { border-width: 2px; border-color: var(--mn-fg); border-radius: 999px; font-weight: 700; }

  .mn-tab-list { border-bottom: 2px solid var(--mn-fg); }
  .mn-tab { font-weight: 800; }
  .mn-tab[aria-selected="true"]::after { height: 6px; border-radius: 0; background: var(--mn-accent); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { border: 2px solid var(--mn-fg); background: var(--mn-surface); padding: 0; gap: 0; }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-primary); color: var(--mn-primary-fg); box-shadow: none; }

  .mn-progress { height: 12px; border-radius: 0; background: var(--mn-surface-2); box-shadow: inset 0 0 0 2px var(--mn-fg); }
  .mn-progress::after { border-radius: 0; background: var(--mn-primary); }
  .mn-spinner { border: 0; border-radius: 50%; background: conic-gradient(var(--mn-primary) 0 33%, var(--mn-accent) 0 66%, var(--mn-secondary) 0); -webkit-mask: radial-gradient(farthest-side, transparent 45%, #000 46%); mask: radial-gradient(farthest-side, transparent 45%, #000 46%); animation: paccheri-spin .9s steps(3) infinite; }
  .mn-alert { border: 2px solid var(--mn-fg); box-shadow: none; }
  .mn-avatar { border: 2px solid var(--mn-fg); }
  .mn-bar::before { background: var(--mn-primary); }
  .mn-bar:nth-child(3n)::before { background: var(--mn-secondary); }
  .mn-bar.mn-hl::before, .mn-bar:hover::before { background: var(--mn-accent); }
}}

/* ── FARFALLE ──────────────────────────────────────────────────────────────
   Butterflies, or bow ties: small rectangles with crimped edges, pinched in
   the middle. A playful flat system in pastels: soft flat fills and no
   shadows, badges and the chosen tab pinched at the waist like a bow tie,
   crimped zig-zag dividers, and a springy, slightly tilted flutter. */
@keyframes farfalle-in { 0% { opacity: 0; transform: translateY(8px) rotate(-2deg) scale(.96); } 60% { opacity: 1; transform: translateY(-2px) rotate(1deg); } 100% { transform: none; } }
@keyframes farfalle-flap { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.35); } }

@layer mian.noodles { @scope ([data-noodle="farfalle"]) to ([data-noodle]:not([data-noodle="farfalle"])) {
  :scope {
    --mn-enter: farfalle-in; --mn-enter-duration: 380ms; --mn-ease-enter: cubic-bezier(.34, 1.56, .64, 1);
    --mn-duration: 180ms; --mn-spring: cubic-bezier(.34, 1.56, .64, 1);
    --ff-pinch: polygon(0 0, 50% 18%, 100% 0, 100% 100%, 50% 82%, 0 100%);
    --ff-mint: light-dark(#dff3e9, #1e3329); --ff-butter: light-dark(#fff1c7, #3a3017); --ff-lilac: light-dark(#ece6ff, #2a2346);
    --ff-crimp: linear-gradient(135deg, var(--mn-border) 25%, transparent 25%) 0 0 / 10px 10px, linear-gradient(225deg, var(--mn-border) 25%, transparent 25%) 0 0 / 10px 10px;
    --mn-focus: 0 0 0 3px var(--mn-bg), 0 0 0 6px color-mix(in oklab, var(--mn-ring) 60%, transparent);
    --mn-bar-radius: 999px; --mn-bar-gap: 10px; --mn-line-width: 3px; --mn-area-opacity: .15; --mn-point-opacity: 1;
    --mn-series-1: var(--mn-primary); --mn-series-2: var(--mn-accent);
  }

  /* Buttons: soft flat candy; they wobble a little when pressed. */
  .mn-btn { border: 0; box-shadow: none; font-weight: 700; }
  .mn-btn:active { transform: scale(.95) rotate(-1deg); }
  .mn-btn-outline { --_bg: var(--ff-mint); --_fg: var(--_ct, var(--mn-fg)); }
  .mn-btn-outline:hover { --_bg: color-mix(in oklab, var(--ff-mint) 70%, var(--mn-fg) 8%); }
  .mn-btn-soft { --_bg: var(--ff-lilac); --_fg: var(--mn-fg); }
  .mn-btn:focus-visible { box-shadow: var(--mn-focus); }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { border: 2px solid transparent; background-color: var(--mn-surface-2); box-shadow: none; }
  .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-primary); background-color: var(--mn-surface); box-shadow: none; }
  .mn-input-group > .mn-input { border: 0; background: transparent; }
  .mn-checkbox, .mn-radio { border: 2px solid color-mix(in oklab, var(--mn-primary) 45%, transparent); background-color: var(--mn-surface); }
  .mn-checkbox { border-radius: 7px; }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); border-color: var(--_on); animation: farfalle-in 300ms var(--mn-spring); }
  .mn-switch { --_w: 2.7rem; --_hh: 1.55rem; background: var(--ff-lilac); }
  .mn-switch::before { box-shadow: none; }
  .mn-switch:checked { background: var(--_on); }
  .mn-slider { --_track: 8px; }
  .mn-slider::-webkit-slider-runnable-track { box-shadow: none; background: linear-gradient(to right, var(--_on) var(--_v), var(--ff-lilac) var(--_v)); }
  .mn-slider::-moz-range-track { background: var(--ff-lilac); }
  .mn-slider::-webkit-slider-thumb { border: 3px solid var(--_on); background: var(--mn-surface); }
  .mn-slider::-moz-range-thumb { border: 3px solid var(--_on); background: var(--mn-surface); }

  /* Surfaces: flat pastel paper, no shadows, a crimped bottom edge on cards. */
  .mn-card, .mn-table-wrap, .mn-list, .mn-accordion, .mn-stats, .mn-collapse { border: 0; box-shadow: none; background: var(--mn-surface); }
  .mn-card { box-shadow: 0 0 0 2px var(--mn-border); }
  .mn-card-title { font-weight: 750; }
  .mn-card-footer-bordered { border-top: 0; background: var(--ff-butter); }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { border: 0; box-shadow: 0 0 0 2px var(--mn-border); }
  .mn-list > li + li, .mn-accordion > details + details { border-top: 2px dashed var(--mn-border); }

  .mn-table th, .mn-table td { border-bottom: 2px dashed var(--mn-border); }
  .mn-table thead th { background: var(--ff-butter); font-weight: 700; }
  .mn-table-hover tbody tr:hover { background: var(--ff-mint); }

  /* Badges: little bow ties, pinched at the waist. */
  .mn-badge { border: 0; border-radius: 4px; clip-path: var(--ff-pinch); padding-inline: .7rem; font-weight: 750; }
  .mn-badge-soft { background: var(--ff-lilac); color: var(--_ct, var(--mn-fg)); }
  .mn-badge-outline { background: var(--ff-mint); color: var(--_ct, var(--mn-fg)); }
  .mn-chip { border: 0; background: var(--ff-mint); }

  /* Tabs: pastel pills; the chosen one is a bow tie. */
  .mn-tab-list { border-bottom: 0; gap: .35rem; }
  .mn-tab { border-radius: 999px; font-weight: 700; }
  .mn-tab::after { display: none; }
  .mn-tab[aria-selected="true"] { background: var(--mn-primary); color: var(--mn-primary-fg); border-radius: 6px; clip-path: var(--ff-pinch); padding-inline: 1.3rem; }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { background: var(--ff-butter); border: 0; }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-surface); color: var(--mn-fg); box-shadow: none; }

  .mn-progress { height: .7rem; background: var(--ff-lilac); box-shadow: none; }
  .mn-progress::after { background: repeating-linear-gradient(-45deg, var(--_p) 0 8px, color-mix(in oklab, var(--_p) 80%, #fff) 8px 16px); }
  .mn-radial { --_t: .5rem; background: conic-gradient(var(--mn-primary) calc(var(--_v) * 1%), var(--ff-lilac) 0); }
  /* Spinner: a butterfly flapping its wings. */
  .mn-spinner { border: 0; border-radius: 3px; background: var(--_c, var(--mn-primary)); clip-path: polygon(0 0, 50% 30%, 100% 0, 100% 100%, 50% 70%, 0 100%); animation: farfalle-flap .6s ease-in-out infinite; }

  .mn-alert { border: 0; background: color-mix(in oklab, var(--_a) 14%, var(--mn-surface)); }
  .mn-avatar { background: var(--ff-mint); color: var(--mn-fg); }
  .mn-step::before { border: 0; background: var(--ff-lilac); }
  .mn-step + .mn-step::after { height: 4px; top: calc(1rem - 2px); background: var(--ff-crimp); }
  .mn-divider::before, .mn-divider::after { height: 6px; background: var(--ff-crimp); }
  .mn-page { border: 0; border-radius: 999px; }
  .mn-page[aria-current="page"] { background: var(--mn-primary); color: var(--mn-primary-fg); }

  /* Charts: pastel pill columns; the highlighted one is raspberry. */
  .mn-bar::before { background: var(--ff-lilac); }
  .mn-bar.mn-hl::before, .mn-bar:hover::before { background: var(--mn-primary); }
  .mn-donut { --thick: 30%; }
}}

/* ── YINZHEN ───────────────────────────────────────────────────────────────
   Silver needle noodles: short strands rolled one at a time and tapered to
   a point at each end: a noodle that is almost a dot. A dot-matrix system:
   dotted outlines that join into solid lines on focus, LED-dot progress,
   sliders and bars, dotted chart lines, big numbers drawn in dots, and one
   red indicator dot for the current thing. Things switch on like LEDs.

   --y-base is the colour behind a dot row; surfaces update it so the holes
   punched through progress bars and sliders always match. */
@keyframes yinzhen-on { 0% { opacity: 0; } 18% { opacity: .9; } 30% { opacity: .15; } 46% { opacity: 1; } 60% { opacity: .55; } 100% { opacity: 1; } }
@keyframes yinzhen-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="yinzhen"]) to ([data-noodle]:not([data-noodle="yinzhen"])) {
  :scope {
    --mn-enter: yinzhen-on; --mn-enter-duration: 280ms; --mn-ease-enter: linear;
    --mn-duration: 140ms; --mn-spring: cubic-bezier(.2, 0, 0, 1);
    --y-base: var(--mn-bg);
    --y-red: var(--mn-accent);
    --mn-focus: 0 0 0 0 transparent;
    --mn-bar-radius: 0; --mn-bar-gap: 6px; --mn-line-width: 3.5px; --mn-area-opacity: 0; --mn-point-opacity: 0;
    --mn-series-1: var(--mn-fg); --mn-series-2: var(--y-red);
  }
  .mn-card, .mn-modal, .mn-popover, .mn-menu, .mn-drawer, .mn-toast, .mn-table-wrap, .mn-list, .mn-accordion, .mn-stats { --y-base: var(--mn-surface); }

  /* Focus is a dotted ring, everywhere. */
  :where(*):focus-visible { outline: 2px dotted var(--mn-ring); outline-offset: 3px; }
  :where(.mn-input, .mn-select, .mn-textarea, .mn-otp > input, .mn-input-group input):focus-visible { outline: none; }
  :scope :where(.mn-h1, h1) { letter-spacing: -.02em; }

  /* Buttons: pills. The default button carries the red dot. */
  .mn-btn { border-radius: 999px; box-shadow: none; font-weight: 500; letter-spacing: .01em; }
  .mn-btn:not(.mn-btn-outline, .mn-btn-soft, .mn-btn-ghost, .mn-btn-link, .mn-btn-icon):not(.mn-primary, .mn-secondary, .mn-accent, .mn-success, .mn-warning, .mn-danger, .mn-info, .mn-neutral):not(:has(svg))::before {
    content: ""; width: .4em; height: .4em; border-radius: 50%; background: var(--y-red); flex: none;
  }
  .mn-btn:active { transform: scale(.97); }
  .mn-btn-outline { border: 2px dotted var(--_c, var(--mn-input)); }
  .mn-btn-outline:hover { --_bg: transparent; border-color: var(--_c, var(--mn-fg)); }
  .mn-btn-soft { --_bg: var(--mn-surface-2); --_fg: var(--_ct, var(--mn-fg)); }
  .mn-btn-group > .mn-btn { border-radius: 0; }

  /* Fields: a dotted outline that joins into a solid line when focused. */
  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file { border: 2px dotted var(--mn-input); border-radius: 999px; background-color: var(--mn-surface); box-shadow: none; }
  .mn-textarea { border-radius: 20px; }
  .mn-input:hover, .mn-select:hover, .mn-textarea:hover { border-color: var(--mn-muted); }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within, .mn-number:focus-within { border-style: solid; border-color: var(--mn-fg); box-shadow: none; }
  .mn-input-group > .mn-input { border: 0; }
  .mn-otp > input { border: 2px dotted var(--mn-input); border-radius: 14px; box-shadow: none; font-family: var(--mn-font-mono); }
  .mn-otp > input:focus { border-style: solid; border-color: var(--mn-fg); box-shadow: none; }
  .mn-label { font: 500 .6875rem/1.2 var(--mn-font-mono); text-transform: uppercase; letter-spacing: .08em; }

  .mn-checkbox, .mn-radio { border: 2px dotted var(--mn-input); border-radius: 50%; box-shadow: none; }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { border-style: solid; background-color: var(--_on); border-color: var(--_on); }
  /* Switch: a dotted track; on, it fills red and the dot moves across. */
  .mn-switch { --_w: 2.9rem; --_hh: 1.55rem; --_on: var(--_c, var(--y-red)); --_onf: var(--_cf, var(--mn-accent-fg)); border: 2px dotted var(--mn-input); background: transparent; }
  .mn-switch::before { top: 2px; left: 2px; width: calc(var(--_hh) - 8px); height: calc(var(--_hh) - 8px); background: var(--mn-fg); box-shadow: none; }
  .mn-switch:checked { border-style: solid; border-color: var(--_on); background: var(--_on); }
  .mn-switch:checked::before { background: var(--_onf); }
  /* Slider: a row of LEDs, lit up to the value. */
  .mn-slider { --_track: 7px; --_thumb: 1.1rem; }
  .mn-slider::-webkit-slider-runnable-track { border-radius: 0; box-shadow: none; background: radial-gradient(circle, transparent 0 2.2px, var(--y-base) 2.8px) 0 50% / 7px 7px, linear-gradient(to right, var(--_on) var(--_v), var(--mn-input) var(--_v)); }
  .mn-slider::-moz-range-track { border-radius: 0; box-shadow: none; background: radial-gradient(circle, transparent 0 2.2px, var(--y-base) 2.8px) 0 50% / 7px 7px, linear-gradient(to right, var(--_on) var(--_v), var(--mn-input) var(--_v)); }
  .mn-slider::-moz-range-progress { background: transparent; }
  .mn-slider::-webkit-slider-thumb { border: 0; background: var(--y-red); box-shadow: 0 0 0 3px var(--y-base); }
  .mn-slider::-moz-range-thumb { border: 0; background: var(--y-red); box-shadow: 0 0 0 3px var(--y-base); }

  .mn-card { border-radius: 20px; box-shadow: none; }
  .mn-card-title { font-weight: 500; letter-spacing: -.01em; }
  .mn-card-description { font-family: var(--mn-font-mono); font-size: .75rem; }
  .mn-card-footer-bordered { background: none; border-top: 2px dotted var(--mn-border); }

  /* Numbers are drawn in dots, like a matrix display. */
  .mn-stat-value { font-family: var(--mn-font-mono); font-weight: 800; letter-spacing: -.02em; }
  .mn-stat-label { font: 500 .6875rem/1.2 var(--mn-font-mono); text-transform: uppercase; letter-spacing: .08em; }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .mn-stat-value, .mn-h1 { background: radial-gradient(circle, currentColor 0 1.6px, transparent 1.9px) 0 0 / 4px 4px; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  }
  @media (forced-colors: active) { .mn-stat-value, .mn-h1 { -webkit-text-fill-color: CanvasText; background: none; } }

  .mn-table-wrap { border-radius: 20px; }
  .mn-table th, .mn-table td { border-bottom: 2px dotted var(--mn-border); }
  .mn-table thead th { background: none; font: 500 .6875rem/1 var(--mn-font-mono); text-transform: uppercase; letter-spacing: .08em; }
  .mn-table-hover tbody tr:hover { background: var(--mn-surface-2); }

  /* Badges: pills with a status dot. */
  .mn-badge { gap: .45em; border-radius: 999px; font: 500 .6875rem/1 var(--mn-font-mono); text-transform: uppercase; letter-spacing: .06em; }
  .mn-badge::before { content: ""; width: .45em; height: .45em; border-radius: 50%; background: currentColor; }
  .mn-badge-outline { border: 1.5px dotted currentColor; }
  .mn-chip { border: 2px dotted var(--mn-border); }
  .mn-kbd { font-family: var(--mn-font-mono); border-style: dotted; box-shadow: none; }

  /* Tabs: a red dot under the current tab. */
  .mn-tab-list { border-bottom: 2px dotted var(--mn-border); }
  .mn-tab { font: 500 .75rem/1 var(--mn-font-mono); text-transform: uppercase; letter-spacing: .06em; }
  .mn-tab::after { inset: auto auto 4px 50%; width: 6px; height: 6px; border-radius: 50%; translate: -50% 0; }
  .mn-tab[aria-selected="true"]::after { background: var(--y-red); }
  .mn-tabs-boxed .mn-tab-list { border: 2px dotted var(--mn-border); border-radius: 999px; background: none; padding: 3px; }
  .mn-tabs-boxed .mn-tab { border-radius: 999px; }
  .mn-tabs-boxed .mn-tab[aria-selected="true"] { background: var(--mn-fg); color: var(--mn-bg); box-shadow: none; }
  .mn-toggle-group { border: 2px dotted var(--mn-border); border-radius: 999px; background: none; padding: 3px; }
  .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 999px; }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-fg); color: var(--mn-bg); box-shadow: none; }

  /* Progress: an LED row. Holes are punched through a solid fill. */
  .mn-progress, .mn-progress-sm, .mn-progress-lg { height: 7px; border-radius: 0; box-shadow: none; background: radial-gradient(circle, transparent 0 2.2px, var(--y-base) 2.8px) 0 50% / 7px 7px, var(--mn-input); }
  .mn-progress::after { border-radius: 0; background: radial-gradient(circle, transparent 0 2.2px, var(--y-base) 2.8px) 0 50% / 7px 7px, var(--_p); }
  .mn-radial { --_t: .3rem; font-family: var(--mn-font-mono); font-weight: 600; }
  /* Spinner: eight dots, the lit one travelling round. */
  .mn-spinner {
    --d: 22%;
    border: 0; border-radius: 50%; color: var(--_c, currentColor);
    background:
      radial-gradient(circle closest-side, currentColor 92%, transparent) 50% 0 / var(--d) var(--d) no-repeat,
      radial-gradient(circle closest-side, color-mix(in oklab, currentColor 85%, transparent) 92%, transparent) 85% 15% / var(--d) var(--d) no-repeat,
      radial-gradient(circle closest-side, color-mix(in oklab, currentColor 70%, transparent) 92%, transparent) 100% 50% / var(--d) var(--d) no-repeat,
      radial-gradient(circle closest-side, color-mix(in oklab, currentColor 55%, transparent) 92%, transparent) 85% 85% / var(--d) var(--d) no-repeat,
      radial-gradient(circle closest-side, color-mix(in oklab, currentColor 42%, transparent) 92%, transparent) 50% 100% / var(--d) var(--d) no-repeat,
      radial-gradient(circle closest-side, color-mix(in oklab, currentColor 32%, transparent) 92%, transparent) 15% 85% / var(--d) var(--d) no-repeat,
      radial-gradient(circle closest-side, color-mix(in oklab, currentColor 24%, transparent) 92%, transparent) 0 50% / var(--d) var(--d) no-repeat,
      radial-gradient(circle closest-side, color-mix(in oklab, currentColor 18%, transparent) 92%, transparent) 15% 15% / var(--d) var(--d) no-repeat;
    animation: yinzhen-spin .8s steps(8) infinite;
  }

  .mn-alert { border: 2px dotted var(--_a); border-radius: 20px; background: var(--mn-surface); }
  .mn-avatar { outline: 2px dotted var(--mn-input); outline-offset: 2px; }
  .mn-avatar-group > .mn-avatar { outline: 0; }
  .mn-step::before { border-style: dotted; border-width: 2px; font-family: var(--mn-font-mono); }
  .mn-step[data-state="complete"]::before, .mn-step[aria-current="step"]::before { border-style: solid; }
  .mn-step[aria-current="step"]::before { box-shadow: none; border-color: var(--y-red); color: var(--mn-fg); }
  .mn-step + .mn-step::after, .mn-step[data-state="complete"] + .mn-step::after { height: 0; background: none; border-top: 2px dotted var(--mn-input); }
  .mn-step[data-state="complete"] + .mn-step::after { border-top-color: var(--mn-fg); }
  .mn-steps-vertical .mn-step + .mn-step::after { width: 0; height: 1.5rem; border-top: 0; border-left: 2px dotted var(--mn-input); }
  .mn-menu, .mn-popover, .mn-toast { border-radius: 20px; box-shadow: 0 16px 40px -20px rgb(0 0 0 / .35); }
  .mn-modal { border-radius: 24px; box-shadow: 0 24px 60px -24px rgb(0 0 0 / .4); }
  .mn-menu-item { border-radius: 999px; }
  .mn-page { border-radius: 999px; }
  .mn-page[aria-current="page"] { background: var(--mn-fg); color: var(--mn-bg); border-color: var(--mn-fg); box-shadow: none; }
  .mn-list > li + li, .mn-accordion > details + details { border-top: 2px dotted var(--mn-border); }
  .mn-divider::before, .mn-divider::after { height: 0; background: none; border-top: 2px dotted var(--mn-border); }

  /* Charts: dot-matrix bars; the highlighted one lights red. */
  .mn-chart-bars { background: radial-gradient(circle, var(--mn-border) 1px, transparent 1.4px) 0 0 / 8px 8px; }
  .mn-bar::before { border-radius: 0; background: radial-gradient(circle, color-mix(in oklab, var(--mn-series-1) 55%, transparent) 0 2.6px, transparent 3.1px) 50% 100% / 8px 8px; }
  .mn-bar.mn-hl::before, .mn-bar:hover::before { background: radial-gradient(circle, var(--y-red) 0 2.6px, transparent 3.1px) 50% 100% / 8px 8px; }
  .mn-chart-h .mn-bar::before { background-position: 0 50%; }
  .mn-bar[data-value]::after { font-family: var(--mn-font-mono); border-radius: 999px; }
  .mn-chart-line .mn-line { stroke-dasharray: 0 7; stroke-linecap: round; }
  .mn-chart-line .mn-grid-line { stroke-dasharray: 1 5; stroke-linecap: round; }
  .mn-legend li::before { border-radius: 50%; }
  .mn-donut {
    --thick: 16%;
    -webkit-mask: repeating-conic-gradient(#000 0 6deg, transparent 6deg 9deg), radial-gradient(closest-side, transparent calc(100% - var(--thick)), #000 calc(100% - var(--thick) + .5px));
    -webkit-mask-composite: source-in;
    mask: repeating-conic-gradient(#000 0 6deg, transparent 6deg 9deg), radial-gradient(closest-side, transparent calc(100% - var(--thick)), #000 calc(100% - var(--thick) + .5px));
    mask-composite: intersect;
  }
}}

/* ── QUADRETTI ─────────────────────────────────────────────────────────────
   Little squares of egg pasta, cut from a sheet in both directions and cooked
   in broth. A pixel system on graph paper: a faint blue grid behind every
   surface, square controls, pixel-stepped corners (--qd-step) instead of
   curves, progress and charts built from squares, and a spinner of four
   squares that step round. Things step into place; nothing slides. */
@keyframes quadretti-in { 0% { opacity: 0; clip-path: inset(0 0 100% 0); } 50% { opacity: 1; clip-path: inset(0 0 50% 0); } 100% { clip-path: inset(0); } }
@keyframes quadretti-turn { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="quadretti"]) to ([data-noodle]:not([data-noodle="quadretti"])) {
  :scope {
    --mn-enter: quadretti-in; --mn-enter-duration: 180ms; --mn-ease-enter: steps(3, end);
    --mn-duration: 100ms; --mn-spring: steps(2, end);
    --qd-line: light-dark(rgb(29 63 191 / .08), rgb(142 168 255 / .08));
    --qd-grid: linear-gradient(var(--qd-line) 1px, transparent 1px) 0 0 / 12px 12px, linear-gradient(90deg, var(--qd-line) 1px, transparent 1px) 0 0 / 12px 12px;
    --qd-step: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
    --qd-cells: linear-gradient(90deg, transparent 0 8px, var(--mn-bg) 8px 10px) 0 0 / 10px 100%;
    --mn-focus: 0 0 0 2px var(--mn-bg), 0 0 0 4px var(--mn-accent);
    --mn-bar-radius: 0; --mn-bar-gap: 6px; --mn-line-width: 2px; --mn-area-opacity: .12; --mn-point-opacity: 1;
    --mn-bar-fill: color-mix(in oklab, var(--mn-primary) 22%, var(--mn-surface)); --mn-bar-fill-hl: var(--mn-primary);
  }
  :scope :where(.mn-display, .mn-title, h1, h2) { letter-spacing: -.02em; }

  /* Buttons: pixel-cornered slabs; focus draws a vermilion square ring. */
  .mn-btn { box-shadow: none; clip-path: var(--qd-step); font-weight: 650; }
  .mn-btn:focus-visible { clip-path: none; outline: 2px solid var(--mn-accent); outline-offset: 2px; box-shadow: none; }
  .mn-btn:active { transform: translate(1px, 1px); }
  .mn-btn-outline { --_bd: var(--mn-primary); border-width: 2px; --_fg: var(--_ct, var(--mn-primary-text)); }
  .mn-btn-ghost, .mn-btn-link { clip-path: none; }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { border: 1px solid var(--mn-input); border-radius: 0; background-color: var(--mn-surface); box-shadow: none; }
  .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-primary); background: var(--qd-grid), var(--mn-surface); box-shadow: 0 0 0 1px var(--mn-primary); }
  .mn-input-group > .mn-input { border: 0; box-shadow: none; background: transparent; }
  .mn-label { font-family: var(--mn-font-mono); font-size: .75rem; letter-spacing: .02em; }
  .mn-checkbox, .mn-radio { border: 2px solid var(--mn-primary); border-radius: 0; background-color: var(--mn-surface); }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); box-shadow: inset 0 0 0 2px var(--mn-surface); }
  /* Switch: a slot of three cells; the square knob steps across. */
  .mn-switch { --_w: 2.6rem; --_hh: 1.3rem; border-radius: 0; background: var(--qd-cells), var(--mn-surface-2); box-shadow: inset 0 0 0 2px var(--mn-primary); }
  .mn-switch::before { border-radius: 0; box-shadow: none; background: var(--mn-primary); top: 3px; left: 3px; width: calc(var(--_hh) - 6px); height: calc(var(--_hh) - 6px); transition: transform 150ms steps(3, end); }
  .mn-switch:checked { background: var(--_on); box-shadow: inset 0 0 0 2px var(--mn-primary); }
  .mn-switch:checked::before { background: var(--mn-surface); }
  .mn-slider { --_track: 6px; }
  .mn-slider::-webkit-slider-runnable-track { border-radius: 0; box-shadow: none; background: var(--qd-cells), linear-gradient(to right, var(--_on) var(--_v), var(--mn-surface-2) var(--_v)); }
  .mn-slider::-moz-range-track { border-radius: 0; background: var(--mn-surface-2); }
  .mn-slider::-webkit-slider-thumb { border-radius: 0; border: 2px solid var(--mn-primary); background: var(--mn-surface); }
  .mn-slider::-moz-range-thumb { border-radius: 0; border: 2px solid var(--mn-primary); background: var(--mn-surface); }

  /* Surfaces: graph paper with a blue rule; floating panels cast a square pixel shadow. */
  .mn-card, .mn-table-wrap, .mn-list, .mn-accordion, .mn-stats, .mn-collapse { border: 1px solid var(--mn-input); border-radius: 0; background: var(--qd-grid), var(--mn-card); box-shadow: none; }
  .mn-card-title { font-weight: 700; }
  .mn-card-header { border-bottom: 1px dashed var(--mn-input); padding-bottom: .9rem; margin-bottom: .25rem; }
  .mn-card-footer-bordered { background: none; border-top: 1px dashed var(--mn-input); }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { border: 2px solid var(--mn-primary); border-radius: 0; box-shadow: 6px 6px 0 color-mix(in oklab, var(--mn-primary) 25%, transparent); }

  .mn-table th, .mn-table td { border-bottom-color: var(--mn-border); }
  .mn-table thead th { background: color-mix(in oklab, var(--mn-primary) 8%, var(--mn-surface)); font-family: var(--mn-font-mono); font-size: .75rem; letter-spacing: .02em; }
  .mn-table-hover tbody tr:hover { background: var(--qd-grid), color-mix(in oklab, var(--mn-primary) 6%, transparent); }

  .mn-badge { border-radius: 0; clip-path: var(--qd-step); font-family: var(--mn-font-mono); font-weight: 600; font-size: .6875rem; }
  .mn-badge-soft, .mn-badge-outline { clip-path: none; }
  .mn-chip { border-radius: 0; }

  /* Tabs: square cells; the chosen tab is a filled blue cell. */
  .mn-tab-list { border-bottom: 2px solid var(--mn-primary); gap: 2px; }
  .mn-tab { border-radius: 0; font-weight: 600; }
  .mn-tab::after { display: none; }
  .mn-tab[aria-selected="true"] { background: var(--mn-primary); color: var(--mn-primary-fg); clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% 100%, 0 100%); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { border: 2px solid var(--mn-primary); border-radius: 0; background: var(--qd-grid), var(--mn-surface); padding: 2px; }
  .mn-tabs-boxed .mn-tab, .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 0; }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-primary); color: var(--mn-primary-fg); box-shadow: none; }

  /* Progress: a row of square cells filling up. */
  .mn-progress { height: 12px; border-radius: 0; background: var(--qd-cells), var(--mn-surface-2); box-shadow: inset 0 0 0 1px var(--mn-input); }
  .mn-progress::after { border-radius: 0; background: var(--qd-cells), var(--_p); }
  .mn-radial { --_t: .4rem; border-radius: 0; background: conic-gradient(var(--mn-primary) calc(var(--_v) * 1%), var(--mn-surface-2) 0); clip-path: var(--qd-step); }
  .mn-radial::before { border-radius: 0; background: var(--qd-grid), var(--mn-surface); }
  /* Spinner: four squares stepping round. */
  .mn-spinner { border: 0; border-radius: 0; background: conic-gradient(var(--_c, var(--mn-primary)) 0 25%, transparent 0 50%, color-mix(in oklab, var(--_c, var(--mn-primary)) 35%, transparent) 0 75%, transparent 0); -webkit-mask: linear-gradient(#000 0 0) center / 70% 70% no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) center / 70% 70% no-repeat exclude, linear-gradient(#000 0 0); animation: quadretti-turn .8s steps(4, end) infinite; }

  .mn-alert { border-radius: 0; border-color: var(--mn-input); background: var(--qd-grid), color-mix(in oklab, var(--_a) 6%, var(--mn-surface)); box-shadow: inset 4px 0 0 var(--_a); }
  .mn-avatar { border-radius: 0; clip-path: var(--qd-step); }
  .mn-step::before { border-radius: 0; }
  .mn-step + .mn-step::after { height: 4px; top: calc(1rem - 2px); background: var(--qd-cells), var(--mn-input); }
  .mn-page { border-radius: 0; }
  .mn-page[aria-current="page"] { background: var(--mn-primary); color: var(--mn-primary-fg); border-color: var(--mn-primary); }

  /* Charts: columns built of square cells on graph paper. */
  .mn-chart-bars { background: var(--qd-grid); }
  .mn-bar::before { background-image: linear-gradient(transparent 0 8px, var(--mn-bg) 8px 10px); background-size: 100% 10px; background-position: 0 100%; }
  .mn-donut { --thick: 24%; }
}}

/* ── ACINI DI PEPE ─────────────────────────────────────────────────────────
   "Peppercorns": tiny beads of pasta, a pinch of dots in every spoonful of
   soup. A halftone system: dotted edges instead of lines, surfaces shaded
   with dot screens (--ac-screen), selection and emphasis shown by bigger
   dots, progress that grows from specks to full circles, and charts printed
   in dots. Pepper black on warm paper, one teal accent. */
@keyframes acini-in { from { opacity: 0; filter: blur(2px); transform: scale(.985); } }
@keyframes acini-bounce { 0%, 80%, 100% { transform: scale(.4); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

@layer mian.noodles { @scope ([data-noodle="acini"]) to ([data-noodle]:not([data-noodle="acini"])) {
  :scope {
    --mn-enter: acini-in; --mn-enter-duration: 240ms; --mn-ease-enter: cubic-bezier(.2, .8, .2, 1);
    --mn-duration: 160ms; --mn-spring: cubic-bezier(.3, 1.4, .6, 1);
    --ac-dot: color-mix(in oklab, var(--mn-fg) 16%, transparent);
    --ac-screen: radial-gradient(var(--ac-dot) 1px, transparent 1.4px) 0 0 / 6px 6px;
    --ac-screen-2: radial-gradient(var(--ac-dot) 1.6px, transparent 2px) 0 0 / 6px 6px;
    --ac-edge: radial-gradient(circle, var(--mn-input) 1.1px, transparent 1.5px) 0 100% / 6px 3px repeat-x;
    --mn-focus: 0 0 0 2px var(--mn-bg), 0 0 0 4px var(--mn-ring);
    --mn-bar-radius: 999px; --mn-bar-gap: 10px; --mn-line-width: 2px; --mn-area-opacity: 0; --mn-point-opacity: 1;
  }

  /* Buttons: ink pills; outline buttons are drawn with a dotted edge. */
  .mn-btn { box-shadow: none; font-weight: 600; }
  .mn-btn:active { transform: scale(.97); }
  .mn-btn-outline { border: 2px dotted var(--_c, var(--mn-fg)); }
  .mn-btn-outline:hover { --_bg: transparent; background-image: var(--ac-screen-2); }
  .mn-btn-soft { background-image: var(--ac-screen); }

  /* Fields: a dotted baseline and a faint dot screen inside. */
  .mn-input, .mn-select, .mn-textarea, .mn-number, .mn-file, .mn-otp > input { border: 2px dotted var(--mn-input); background-color: var(--mn-surface); box-shadow: none; }
  .mn-input-group { border: 2px dotted var(--mn-input); box-shadow: none; }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within, .mn-number:focus-within, .mn-otp > input:focus { border-style: solid; border-color: var(--mn-ring); box-shadow: none; }
  .mn-input-group > .mn-input { border: 0; }
  .mn-checkbox, .mn-radio { border: 2px dotted var(--mn-fg); background-color: var(--mn-surface); }
  .mn-checkbox { border-radius: 4px; }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { border-style: solid; border-color: var(--_on); background-color: var(--_on); }
  /* Switch: a dotted track; on, the knob is a big peppercorn. */
  .mn-switch { --_w: 2.7rem; --_hh: 1.45rem; background: var(--ac-screen-2), var(--mn-surface-2); box-shadow: inset 0 0 0 2px var(--mn-input); }
  .mn-switch::before { box-shadow: none; background: var(--mn-fg); transform: scale(.7); }
  .mn-switch:checked { background: var(--_on); box-shadow: none; }
  .mn-switch:checked::before { background: var(--mn-surface); transform: translateX(calc(var(--_w) - var(--_hh))) scale(1); }
  .mn-slider { --_track: 6px; }
  .mn-slider::-webkit-slider-runnable-track { box-shadow: none; background: radial-gradient(circle, var(--_on) 2px, transparent 2.4px) 0 50% / 8px 6px repeat-x; }
  .mn-slider::-moz-range-track { background: radial-gradient(circle, var(--mn-input) 2px, transparent 2.4px) 0 50% / 8px 6px repeat-x; }
  .mn-slider::-webkit-slider-thumb { border: 0; background: var(--mn-fg); }
  .mn-slider::-moz-range-thumb { border: 0; background: var(--mn-fg); }

  /* Surfaces: paper with a dotted edge; floating panels are shaded by a halftone. */
  .mn-card, .mn-table-wrap, .mn-list, .mn-accordion, .mn-stats, .mn-collapse { border: 2px dotted var(--mn-input); box-shadow: none; }
  .mn-card-footer-bordered { background: var(--ac-screen), var(--mn-surface); border-top: 2px dotted var(--mn-input); }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { border: 2px dotted var(--mn-input); box-shadow: 6px 6px 0 -2px var(--mn-bg), 6px 6px 0 0 transparent; }
  .mn-list > li + li, .mn-accordion > details + details { border-top: 2px dotted var(--mn-border); }
  .mn-stats > .mn-stat + .mn-stat { border-inline-start: 2px dotted var(--mn-border); }

  .mn-table th, .mn-table td { border-bottom: 2px dotted var(--mn-border); }
  .mn-table thead th { background: var(--ac-screen), var(--mn-surface-2); }
  .mn-table-hover tbody tr:hover { background: var(--ac-screen-2); }

  .mn-badge { font-weight: 650; }
  .mn-badge-soft { background: var(--ac-screen-2), color-mix(in oklab, var(--_c, var(--mn-primary)) 10%, var(--mn-surface)); color: var(--_ct, var(--mn-fg)); }
  .mn-badge-outline { border: 2px dotted currentColor; }
  .mn-chip { border: 2px dotted var(--mn-input); }

  /* Tabs: a dotted rule; the chosen tab is underlined by a row of big dots. */
  .mn-tab-list { border-bottom: 0; background: var(--ac-edge); }
  .mn-tab::after { height: 6px; bottom: 0; border-radius: 0; background: none; }
  .mn-tab[aria-selected="true"]::after { background: radial-gradient(circle, var(--mn-fg) 2.4px, transparent 2.8px) 0 50% / 8px 6px repeat-x; }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { border: 2px dotted var(--mn-input); background: transparent; }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--ac-screen-2), var(--mn-surface-2); color: var(--mn-fg); box-shadow: none; }

  /* Progress: dots growing from specks to full peppercorns. */
  .mn-progress { height: 10px; background: radial-gradient(circle, var(--ac-dot) 1.5px, transparent 2px) 0 50% / 10px 10px repeat-x; box-shadow: none; border-radius: 0; }
  .mn-progress::after { border-radius: 0; background: radial-gradient(circle, var(--_p) 4px, transparent 4.5px) 0 50% / 10px 10px repeat-x; }
  .mn-radial { --_t: .45rem; background: repeating-conic-gradient(from 0deg, transparent 0 4deg, var(--mn-bg) 4deg 12deg), conic-gradient(var(--_c, var(--mn-primary)) calc(var(--_v) * 1%), var(--ac-dot) 0); }
  /* Spinner: three peppercorns bouncing. */
  .mn-spinner { border: 0; border-radius: 0; width: calc(var(--_s) * 1.6); background: radial-gradient(circle, var(--_c, currentColor) 45%, transparent 50%) 0 50% / 33.3% 60% no-repeat, radial-gradient(circle, var(--_c, currentColor) 45%, transparent 50%) 50% 50% / 33.3% 60% no-repeat, radial-gradient(circle, var(--_c, currentColor) 45%, transparent 50%) 100% 50% / 33.3% 60% no-repeat; animation: acini-bounce 1s ease-in-out infinite; }

  .mn-alert { border: 2px dotted color-mix(in oklab, var(--_a) 60%, transparent); background: var(--ac-screen), color-mix(in oklab, var(--_a) 6%, var(--mn-surface)); }
  .mn-avatar { box-shadow: 0 0 0 2px var(--mn-bg), 0 0 0 4px transparent; outline: 2px dotted var(--mn-input); outline-offset: 2px; }
  .mn-step::before { border-style: dotted; border-width: 2px; }
  .mn-step + .mn-step::after { height: 4px; top: calc(1rem - 2px); background: radial-gradient(circle, var(--mn-input) 1.5px, transparent 2px) 0 50% / 7px 4px repeat-x; }
  .mn-divider::before, .mn-divider::after { height: 4px; background: radial-gradient(circle, var(--mn-input) 1.5px, transparent 2px) 0 50% / 7px 4px repeat-x; }
  .mn-page { border: 2px dotted transparent; }
  .mn-page[aria-current="page"] { border-color: var(--mn-fg); background: var(--ac-screen-2); color: var(--mn-fg); }

  /* Charts: columns printed in halftone; the highlight is solid teal. */
  .mn-bar::before { background: radial-gradient(color-mix(in oklab, var(--mn-fg) 45%, transparent) 1.6px, transparent 2px) 0 0 / 6px 6px; }
  .mn-bar.mn-hl::before, .mn-bar:hover::before { background: radial-gradient(var(--mn-accent) 2.6px, transparent 3px) 0 0 / 6px 6px; }
  .mn-donut { --thick: 24%; }
}}

/* ── KALGUKSU ──────────────────────────────────────────────────────────────
   "Knife noodles": dough rolled flat on a floured board and cut by hand into
   clean strips. Monochrome and grid-true: full table rules, tabular mono
   numbers, 45° cut corners on badges, bars and progress ends, a blade-thin
   switch knob. Motion slices: content is wiped in along a cut line, and
   indicators are drawn across rather than faded. */
@keyframes kalguksu-cut { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes kalguksu-drop { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes kalguksu-chop { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }

@layer mian.noodles { @scope ([data-noodle="kalguksu"]) to ([data-noodle]:not([data-noodle="kalguksu"])) {
  :scope {
    --mn-enter: kalguksu-drop; --mn-enter-duration: 240ms; --mn-ease-enter: cubic-bezier(.7, 0, .3, 1);
    --mn-duration: 120ms; --mn-spring: cubic-bezier(.7, 0, .3, 1);
    --k-cut: 6px;
    --k-notch: polygon(0 0, calc(100% - var(--k-cut)) 0, 100% var(--k-cut), 100% 100%, 0 100%);
    --mn-focus: 0 0 0 1px var(--mn-bg), 0 0 0 3px var(--mn-ring);
    --mn-bar-radius: 0; --mn-bar-gap: 4px; --mn-line-width: 1.5px; --mn-area-opacity: .05; --mn-point-opacity: 1;
    --mn-bar-fill: color-mix(in oklab, var(--mn-fg) 16%, var(--mn-surface));
    --mn-bar-fill-hl: var(--mn-fg);
    font-feature-settings: "tnum" 1;
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3) { letter-spacing: -.035em; }

  /* Buttons: flat ink, crisp 1px edges. Pressing cuts, it does not move. */
  .mn-btn { box-shadow: none; font-weight: 500; letter-spacing: -.005em; transition: background-color 80ms linear, color 80ms linear, border-color 80ms linear; }
  .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)) 82%, var(--mn-bg)); }
  .mn-btn:active { transform: none; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mn-bg) 35%, transparent); }
  .mn-btn-outline { --_bd: var(--_c, var(--mn-border)); background-color: var(--mn-surface); }
  .mn-btn-outline:hover { --_bd: var(--_c, var(--mn-fg)); --_bg: var(--mn-surface); }
  .mn-btn-soft { --_bg: var(--mn-surface-2); --_fg: var(--_ct, var(--mn-fg)); }
  .mn-btn-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

  /* Fields: a clean box. Focus draws the edge in ink. */
  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { box-shadow: none; }
  .mn-input:hover, .mn-select:hover, .mn-textarea:hover { border-color: color-mix(in oklab, var(--mn-fg) 40%, 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-ring) 22%, transparent); }
  .mn-input-group > .mn-input { box-shadow: none; }
  .mn-otp > input { font-family: var(--mn-font-mono); }
  .mn-checkbox { border-radius: 3px; }
  .mn-checkbox, .mn-radio { box-shadow: none; }
  /* Switch: a slot with a blade for a knob. */
  .mn-switch { --_w: 2.6rem; --_hh: 1.35rem; --_k: .4rem; border-radius: 4px; background: var(--mn-surface-2); box-shadow: inset 0 0 0 1px var(--mn-input); }
  .mn-switch::before { width: var(--_k); height: calc(var(--_hh) - 6px); top: 3px; left: 4px; border-radius: 1px; background: var(--mn-fg); box-shadow: none; transform: none; transition: left 160ms var(--mn-spring); }
  .mn-switch:checked { background: var(--_on); box-shadow: none; }
  .mn-switch:checked::before { transform: none; left: calc(100% - var(--_k) - 4px); background: var(--_onf); }
  .mn-slider { --_track: 2px; --_thumb: 1.25rem; }
  .mn-slider::-webkit-slider-runnable-track { border-radius: 0; box-shadow: none; background: linear-gradient(to right, var(--_on) var(--_v), var(--mn-border) var(--_v)); }
  .mn-slider::-moz-range-track { border-radius: 0; box-shadow: none; background: var(--mn-border); }
  .mn-slider::-moz-range-progress { border-radius: 0; }
  .mn-slider::-webkit-slider-thumb { width: 5px; border-radius: 1px; border: 0; background: var(--_on); box-shadow: 0 0 0 2px var(--mn-bg); }
  .mn-slider::-moz-range-thumb { width: 5px; border-radius: 1px; border: 0; background: var(--_on); box-shadow: 0 0 0 2px var(--mn-bg); }
  .mn-slider:active::-webkit-slider-thumb { transform: none; }

  .mn-card { box-shadow: none; }
  .mn-card-header { border-bottom: 1px solid var(--mn-border); padding-bottom: 1rem; margin-bottom: .25rem; }
  .mn-card-title { font-weight: 600; letter-spacing: -.02em; }
  .mn-card-footer-bordered { background: var(--mn-surface-2); }
  .mn-stat-label { font: 500 .6875rem/1.2 var(--mn-font-mono); text-transform: uppercase; letter-spacing: .06em; }
  .mn-stat-value { font-weight: 600; letter-spacing: -.04em; }

  /* Tables: a full grid, ruled like a cutting board. */
  .mn-table th, .mn-table td { border-inline-end: 1px solid var(--mn-border); }
  .mn-table th:last-child, .mn-table td:last-child { border-inline-end: 0; }
  .mn-table thead th { height: 2.3rem; background: var(--mn-surface-2); color: var(--mn-muted); font: 500 .6875rem/1 var(--mn-font-mono); text-transform: uppercase; letter-spacing: .06em; }
  .mn-table .mn-num, .mn-table td:has(> .mn-num) { font-family: var(--mn-font-mono); font-size: calc(var(--mn-text-sm) - 1px); }
  .mn-table-hover tbody tr:hover { background: var(--mn-surface-2); }

  /* Badges: notched labels, cut at 45°. */
  .mn-badge { border-radius: 0; clip-path: var(--k-notch); padding-inline: .5em calc(.5em + 3px); font: 500 .6875rem/1 var(--mn-font-mono); text-transform: uppercase; letter-spacing: .04em; }
  .mn-badge-outline { clip-path: none; border-radius: 2px; }
  .mn-chip { border-radius: 4px; }
  .mn-kbd { font-family: var(--mn-font-mono); border-radius: 3px; box-shadow: none; }

  /* Tabs: the indicator is drawn across, left to right, like a cut. */
  .mn-tab { font-weight: 500; }
  .mn-tab::after { inset-inline: 0; height: 2px; border-radius: 0; background: var(--mn-fg); transform: scaleX(0); transform-origin: left; transition: transform 180ms var(--mn-spring); }
  .mn-tab[aria-selected="true"]::after { transform: scaleX(1); }
  .mn-tabs-boxed .mn-tab-list { padding: 0; gap: 0; border: 1px solid var(--mn-border); border-radius: 6px; background: var(--mn-surface); overflow: hidden; }
  .mn-tabs-boxed .mn-tab { border-radius: 0; height: calc(var(--mn-size-md) - 2px); }
  .mn-tabs-boxed .mn-tab + .mn-tab { border-inline-start: 1px solid var(--mn-border); }
  .mn-tabs-boxed .mn-tab[aria-selected="true"] { background: var(--mn-fg); color: var(--mn-bg); box-shadow: none; }
  .mn-tabs-pills .mn-tab { border-radius: 4px; }
  .mn-toggle-group { padding: 0; gap: 0; border: 1px solid var(--mn-border); border-radius: 6px; background: var(--mn-surface); overflow: hidden; }
  .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 0; }
  .mn-toggle-group > * + * { border-inline-start: 1px solid var(--mn-border); }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-fg); color: var(--mn-bg); box-shadow: none; }

  /* Progress: a measured strip with ticks, its leading edge cut at 45°. */
  .mn-progress { height: .5rem; border-radius: 0; box-shadow: inset 0 0 0 1px var(--mn-border); background: var(--mn-surface) repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--mn-border) calc(10% - 1px) 10%); }
  .mn-progress::after { border-radius: 0; background: var(--_p); clip-path: polygon(0 0, 100% 0, calc(100% - var(--k-cut)) 100%, 0 100%); }
  .mn-radial { --_t: .2rem; font-family: var(--mn-font-mono); font-weight: 500; }
  /* Spinner: strips cut away one by one. */
  .mn-spinner { border: 0; border-radius: 0; background: repeating-linear-gradient(90deg, var(--_c, currentColor) 0 2px, transparent 2px 4px); animation: kalguksu-chop .9s steps(5, jump-none) infinite; }

  .mn-alert { background: var(--mn-surface); border-color: var(--mn-border); border-inline-start: 3px solid var(--_a); border-radius: 0 6px 6px 0; }
  .mn-alert-title { font-weight: 600; }
  .mn-avatar { border-radius: 6px; }
  .mn-step::before { border-radius: 2px; font-family: var(--mn-font-mono); font-weight: 500; }
  .mn-step + .mn-step::after { height: 1px; top: 1rem; }
  .mn-menu, .mn-popover, .mn-toast { border-radius: 8px; box-shadow: 0 8px 24px -10px rgb(0 0 0 / .18); }
  .mn-menu-item { border-radius: 4px; }
  .mn-modal { border-radius: 10px; box-shadow: 0 24px 48px -16px rgb(0 0 0 / .25); }
  .mn-modal::backdrop { backdrop-filter: none; }
  .mn-modal-header { border-bottom: 1px solid var(--mn-border); padding-bottom: 1rem; }
  .mn-modal-footer { border-top: 1px solid var(--mn-border); padding-top: 1rem; background: var(--mn-surface-2); }
  .mn-drawer[open] { animation-duration: 200ms; animation-timing-function: var(--mn-spring); }
  .mn-page { border-radius: 4px; font-family: var(--mn-font-mono); }
  .mn-page[aria-current="page"] { background: var(--mn-fg); color: var(--mn-bg); border-color: var(--mn-fg); box-shadow: none; }

  /* Charts: square strips with the top-left corner cut, on a dotted board. */
  .mn-chart-bars { background: radial-gradient(circle, var(--mn-input) .9px, transparent 1.2px) 0 0 / 12px 12px; background-size: 12px 12px; background-repeat: repeat; }
  .mn-bar::before { border-radius: 0; clip-path: polygon(0 var(--k-cut), var(--k-cut) 0, 100% 0, 100% 100%, 0 100%); animation: kalguksu-drop 420ms var(--mn-spring); }
  .mn-chart-h .mn-bar::before { border-radius: 0; clip-path: polygon(0 0, calc(100% - var(--k-cut)) 0, 100% var(--k-cut), 100% 100%, 0 100%); animation-name: kalguksu-cut; }
  .mn-bar[data-value]::after { border-radius: 0; font-family: var(--mn-font-mono); font-weight: 500; }
  .mn-bar > span { font-family: var(--mn-font-mono); }
  .mn-chart-line .mn-grid-line { stroke-dasharray: 2 4; }
  .mn-legend li::before { border-radius: 0; width: .6rem; height: .6rem; }
  .mn-donut { --thick: 16%; }
}}

/* ── SANUKI ────────────────────────────────────────────────────────────────
   Kagawa's udon, cut square with sharp edges and a firm bite. A rigid,
   square system: zero radius anywhere, 2px straight lines, chunky square
   controls and blocks, and motion that snaps into place with no tail. */
@keyframes sanuki-in { from { opacity: 0; clip-path: inset(0 0 100% 0); } 60% { opacity: 1; } to { clip-path: inset(0); } }

@layer mian.noodles { @scope ([data-noodle="sanuki"]) to ([data-noodle]:not([data-noodle="sanuki"])) {
  :scope {
    --mn-enter: sanuki-in; --mn-enter-duration: 140ms; --mn-ease-enter: steps(4, end);
    --mn-duration: 90ms; --mn-spring: cubic-bezier(.9, 0, .1, 1);
    --mn-border-w: 2px;
    --mn-focus: 0 0 0 2px var(--mn-bg), 0 0 0 5px var(--mn-ring);
    --sk-block: 4px 4px 0 var(--mn-fg);
    --mn-bar-radius: 0; --mn-bar-gap: 4px; --mn-line-width: 3px; --mn-area-opacity: .12; --mn-point-opacity: 1;
    --mn-bar-fill: var(--mn-surface-2); --mn-bar-fill-hl: var(--mn-primary);
  }
  :scope :where(h1, h2, .mn-h1, .mn-h2) { letter-spacing: -.04em; }

  /* Everything square. Buttons are blocks that press flat. */
  .mn-btn { border-radius: 0; border-width: 2px; --_bd: var(--mn-fg); box-shadow: var(--sk-block); font-weight: 800; transition: transform 90ms var(--mn-spring), box-shadow 90ms var(--mn-spring), background-color 90ms; }
  .mn-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--mn-fg); }
  .mn-btn-outline { --_bg: var(--mn-surface); --_fg: var(--_ct, var(--mn-fg)); }
  .mn-btn-ghost, .mn-btn-link { box-shadow: none; --_bd: transparent; }
  .mn-btn-ghost:active, .mn-btn-link:active { transform: none; }
  .mn-btn-group > .mn-btn { box-shadow: none; }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { border-radius: 0; border: 2px solid var(--mn-fg); box-shadow: none; }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within, .mn-number:focus-within, .mn-otp > input:focus { box-shadow: var(--sk-block); border-color: var(--mn-fg); }
  .mn-input-group > .mn-input { border: 0; box-shadow: none; }
  .mn-addon { border-color: var(--mn-fg) !important; }
  .mn-checkbox, .mn-radio { --_s: 1.25rem; border-radius: 0; border: 2px solid var(--mn-fg); box-shadow: none; }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); border-color: var(--mn-fg); }
  .mn-radio::before { border-radius: 0; }
  /* Switch: a square slot with a square block. */
  .mn-switch { --_w: 2.9rem; --_hh: 1.5rem; border-radius: 0; background: var(--mn-surface); box-shadow: inset 0 0 0 2px var(--mn-fg); }
  .mn-switch::before { border-radius: 0; top: 4px; left: 4px; width: calc(var(--_hh) - 8px); height: calc(var(--_hh) - 8px); background: var(--mn-fg); box-shadow: none; transition: transform 90ms var(--mn-spring); }
  .mn-switch:checked { background: var(--_on); }
  .mn-switch:checked::before { transform: translateX(calc(var(--_w) - var(--_hh))); background: var(--_onf); }
  .mn-slider { --_track: 8px; --_thumb: 1.25rem; }
  .mn-slider::-webkit-slider-runnable-track { border-radius: 0; box-shadow: inset 0 0 0 2px var(--mn-fg); }
  .mn-slider::-moz-range-track { border-radius: 0; box-shadow: inset 0 0 0 2px var(--mn-fg); }
  .mn-slider::-moz-range-progress { border-radius: 0; }
  .mn-slider::-webkit-slider-thumb { border-radius: 0; border: 2px solid var(--mn-fg); box-shadow: none; }
  .mn-slider::-moz-range-thumb { border-radius: 0; border: 2px solid var(--mn-fg); box-shadow: none; }

  .mn-card, .mn-table-wrap, .mn-list, .mn-accordion, .mn-stats, .mn-alert, .mn-collapse { border-radius: 0; border: 2px solid var(--mn-fg); box-shadow: var(--sk-block); }
  .mn-card-header { border-bottom: 2px solid var(--mn-fg); padding-bottom: 1rem; margin-bottom: .25rem; }
  .mn-card-title { font-weight: 800; letter-spacing: -.02em; }
  .mn-card-footer-bordered { border-top: 2px solid var(--mn-fg); background: var(--mn-surface-2); }

  .mn-table th, .mn-table td { border-bottom: 2px solid var(--mn-fg); border-inline-end: 2px solid var(--mn-fg); }
  .mn-table th:last-child, .mn-table td:last-child { border-inline-end: 0; }
  .mn-table thead th { background: var(--mn-fg); color: var(--mn-bg); font-weight: 800; text-transform: uppercase; font-size: .75rem; letter-spacing: .04em; }
  .mn-table-hover tbody tr:hover { background: var(--mn-surface-2); }

  .mn-badge { border-radius: 0; border: 2px solid var(--mn-fg); font-weight: 800; text-transform: uppercase; font-size: .6875rem; letter-spacing: .04em; }
  .mn-chip, .mn-kbd, .mn-avatar, .mn-menu-item, .mn-page, .mn-tooltip > [role="tooltip"] { border-radius: 0; }
  .mn-avatar { box-shadow: inset 0 0 0 2px var(--mn-fg); }

  .mn-tab-list { border-bottom: 2px solid var(--mn-fg); }
  .mn-tab { font-weight: 800; border-radius: 0; }
  .mn-tab::after { inset-inline: 0; height: 6px; border-radius: 0; bottom: -2px; }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { padding: 0; gap: 0; border: 2px solid var(--mn-fg); border-radius: 0; background: var(--mn-surface); box-shadow: var(--sk-block); }
  .mn-tabs-boxed .mn-tab, .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 0; }
  .mn-tabs-boxed .mn-tab + .mn-tab, .mn-toggle-group > * + * { border-inline-start: 2px solid var(--mn-fg); }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-fg); color: var(--mn-bg); box-shadow: none; }

  .mn-progress { height: 1rem; border-radius: 0; background: var(--mn-surface); box-shadow: inset 0 0 0 2px var(--mn-fg); }
  .mn-progress::after { border-radius: 0; box-shadow: inset 0 0 0 2px var(--mn-fg); }
  .mn-radial { --_t: .5rem; border-radius: 0; background: conic-gradient(var(--_c, var(--mn-primary)) calc(var(--_v) * 1%), var(--mn-surface-2) 0); box-shadow: inset 0 0 0 2px var(--mn-fg); }
  .mn-radial::before { border-radius: 0; box-shadow: 0 0 0 2px var(--mn-fg); }
  /* Spinner: a square that turns a quarter at a time. */
  .mn-spinner { border: 0; border-radius: 0; width: calc(var(--_s) * .8); height: calc(var(--_s) * .8); margin: calc(var(--_s) * .1); background: var(--_c, currentColor); animation: mn-spin 1s steps(4) infinite; }

  .mn-step::before { border-radius: 0; border-width: 2px; font-weight: 800; }
  .mn-step + .mn-step::after { height: 2px; }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { border-radius: 0; border: 2px solid var(--mn-fg); box-shadow: 6px 6px 0 var(--mn-fg); }
  .mn-page[aria-current="page"] { background: var(--mn-fg); color: var(--mn-bg); border-color: var(--mn-fg); box-shadow: none; }

  /* Charts: square blocks with a 2px outline. */
  .mn-bar::before { border-radius: 0; box-shadow: inset 0 0 0 2px var(--mn-fg); }
  .mn-bar[data-value]::after { border-radius: 0; }
  .mn-legend li::before { border-radius: 0; }
  .mn-donut { --thick: 34%; }
}}

/* ── HAKATA ────────────────────────────────────────────────────────────────
   Hakata ramen: ultra-thin straight noodles, boiled for seconds, ordered by
   firmness at the counter. A fast, horizontal system: pinstripe speed lines,
   everything on straight rules, compact controls, oblique headings, a
   ginger-red accent, and the fastest motion in MIAN: things slide in along
   the line. */
@keyframes hakata-in { from { opacity: 0; transform: translateX(-10px); } }
@keyframes hakata-run { from { background-position: 0 0; } to { background-position: 24px 0; } }

@layer mian.noodles { @scope ([data-noodle="hakata"]) to ([data-noodle]:not([data-noodle="hakata"])) {
  :scope {
    --mn-enter: hakata-in; --mn-enter-duration: 110ms; --mn-ease-enter: cubic-bezier(0, 0, .2, 1);
    --mn-duration: 90ms; --mn-spring: cubic-bezier(0, 0, .2, 1);
    --hk-pin: repeating-linear-gradient(180deg, transparent 0 3px, color-mix(in oklab, var(--mn-fg) 6%, transparent) 3px 4px);
    --hk-red: var(--mn-accent);
    --mn-bar-radius: 0; --mn-bar-gap: 3px; --mn-line-width: 1.5px; --mn-area-opacity: 0; --mn-point-opacity: 0;
    --mn-bar-fill: color-mix(in oklab, var(--mn-fg) 18%, var(--mn-surface)); --mn-bar-fill-hl: var(--hk-red);
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3, .mn-card-title, .mn-modal-title) { font-style: oblique 10deg; letter-spacing: -.02em; }

  /* Buttons: low and wide, with a leading speed line that runs on hover. */
  .mn-btn { box-shadow: none; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; font-size: calc(var(--mn-text-sm) - 1px); }
  .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)) 85%, var(--mn-bg)); }
  .mn-btn:active { transform: translateX(2px); }
  .mn-btn-outline { --_bd: var(--_c, var(--mn-fg)); }
  .mn-btn-outline:hover { --_bg: transparent; background-image: var(--hk-pin); }
  .mn-btn-link { text-transform: none; }

  /* Fields sit on a straight rule; focus runs a red line underneath. */
  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { box-shadow: none; border-width: 0 0 2px; border-radius: 0; background-color: var(--mn-surface-2); }
  .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(--hk-red); box-shadow: none; background-color: var(--mn-surface); }
  .mn-input-group > .mn-input { border: 0; background: transparent; }
  .mn-addon { background: transparent; border: 0 !important; }
  .mn-checkbox { border-radius: 2px; box-shadow: none; }
  .mn-radio { box-shadow: none; }
  /* Switch: a long, low track with a thin bar for a knob. */
  .mn-switch { --_w: 2.6rem; --_hh: .95rem; --_k: .9rem; border-radius: 2px; background: var(--mn-input); }
  .mn-switch::before { top: 2px; left: 2px; width: var(--_k); height: calc(var(--_hh) - 4px); border-radius: 1px; transform: none; transition: left 90ms var(--mn-spring); box-shadow: none; }
  .mn-switch:checked { background: var(--_on); }
  .mn-switch:checked::before { transform: none; left: calc(100% - var(--_k) - 2px); }
  .mn-slider { --_track: 2px; --_thumb: .9rem; }
  .mn-slider::-webkit-slider-runnable-track { border-radius: 0; box-shadow: none; }
  .mn-slider::-moz-range-track { border-radius: 0; box-shadow: none; }
  .mn-slider::-webkit-slider-thumb { width: .45rem; border-radius: 1px; border: 0; background: var(--_on); box-shadow: none; }
  .mn-slider::-moz-range-thumb { width: .45rem; border-radius: 1px; border: 0; background: var(--_on); box-shadow: none; }

  /* Surfaces: a pinstripe header band ruled off from the body. */
  .mn-card { box-shadow: none; border-width: 1px 0; border-radius: 0; }
  .mn-card-header { background-image: var(--hk-pin); border-bottom: 1px solid var(--mn-border); padding-bottom: .9rem; margin-bottom: .25rem; }
  .mn-card-footer-bordered { background: none; }
  .mn-stats, .mn-list, .mn-accordion, .mn-table-wrap { border-width: 1px 0; border-radius: 0; }

  .mn-table th, .mn-table td { padding-block: .45rem; }
  .mn-table thead th { background: var(--hk-pin); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; border-bottom: 2px solid var(--mn-fg); }
  .mn-table-hover tbody tr:hover { background: none; box-shadow: inset 3px 0 0 var(--hk-red); }

  .mn-badge { border-radius: 2px; font-weight: 700; text-transform: uppercase; font-size: .625rem; letter-spacing: .08em; font-style: oblique 10deg; }
  .mn-chip { border-radius: 2px; }

  /* Tabs: a straight rule; the current tab's line runs in from the left. */
  .mn-tab { font-weight: 700; text-transform: uppercase; font-size: .75rem; letter-spacing: .06em; }
  .mn-tab::after { inset-inline: 0; height: 2px; border-radius: 0; transform: scaleX(0); transform-origin: left; transition: transform 110ms var(--mn-spring); }
  .mn-tab[aria-selected="true"]::after { transform: scaleX(1); background: var(--hk-red); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { border-radius: 2px; padding: 2px; }
  .mn-tabs-boxed .mn-tab, .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 1px; }

  /* Progress: a thin line with speed lines running along it. */
  .mn-progress { height: 4px; border-radius: 0; box-shadow: none; }
  .mn-progress::after { border-radius: 0; background: repeating-linear-gradient(90deg, var(--_p) 0 16px, color-mix(in oklab, var(--_p) 70%, transparent) 16px 24px); }
  .mn-progress[aria-valuenow]::after { animation: hakata-run .5s linear infinite; }
  .mn-progress:not([aria-valuenow])::after { animation: mn-indeterminate 1s var(--mn-ease) infinite, hakata-run .5s linear infinite; }
  .mn-radial { --_t: .2rem; }
  /* Spinner: three bars racing along a line. */
  .mn-spinner { border: 0; border-radius: 0; height: calc(var(--_s) * .25); margin-block: calc(var(--_s) * .375); background: repeating-linear-gradient(90deg, var(--_c, currentColor) 0 30%, transparent 30% 45%) 0 0 / 24px 100%; animation: hakata-run .35s linear infinite; }

  .mn-alert { border-width: 0 0 0 3px; border-radius: 0; background: var(--mn-surface-2); }
  .mn-step::before { border-radius: 2px; }
  .mn-step + .mn-step::after { height: 1px; }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast { border-radius: 4px; box-shadow: 0 10px 24px -12px rgb(0 0 0 / .3); }
  .mn-menu-item { border-radius: 2px; }
  .mn-page { border-radius: 2px; }

  /* Charts: bars packed tight, one ginger-red; thin straight lines. */
  .mn-chart-bars { background: repeating-linear-gradient(to top, var(--mn-border) 0 1px, transparent 1px calc((var(--h) - 1.25rem) / 8)); background-size: 100% calc(100% - 1.25rem); background-repeat: no-repeat; }
  .mn-bar[data-value]::after { border-radius: 0; }
  .mn-chart-line .mn-line { stroke-linecap: square; stroke-linejoin: miter; }
  .mn-legend li::before { border-radius: 0; height: 3px; width: 1rem; }
  .mn-donut { --thick: 12%; }
}}

/* ── DITALINI ──────────────────────────────────────────────────────────────
   Tiny tubes that fill a spoon evenly. A dense, conservative system for
   data: compact controls, small exact type with tabular figures, ruled
   tables, sober slate blue and nothing that competes with the numbers. */
@keyframes ditalini-in { from { opacity: 0; } }
@keyframes ditalini-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="ditalini"]) to ([data-noodle]:not([data-noodle="ditalini"])) {
  :scope {
    --mn-enter: ditalini-in; --mn-enter-duration: 120ms; --mn-ease-enter: linear;
    --mn-duration: 90ms;
    --mn-bar-radius: 1px; --mn-bar-gap: 3px; --mn-line-width: 1.5px; --mn-area-opacity: .1;
    --mn-bar-fill: color-mix(in oklab, var(--mn-primary) 35%, var(--mn-surface-2)); --mn-bar-fill-hl: var(--mn-primary);
    font-variant-numeric: tabular-nums;
  }
  :scope :where(h1, h2, .mn-h1, .mn-h2, .mn-title) { letter-spacing: -.015em; }

  .mn-btn { box-shadow: none; font-weight: 600; letter-spacing: 0; }
  .mn-btn:active { transform: none; }
  .mn-btn-outline { --_bd: var(--mn-input); }

  .mn-input, .mn-select, .mn-textarea, .mn-number, .mn-input-group { border-color: var(--mn-input); box-shadow: none; }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within { border-color: var(--mn-ring); box-shadow: 0 0 0 1px var(--mn-ring); }
  .mn-label { font-size: .75rem; font-weight: 600; color: var(--mn-muted); }
  .mn-switch { --_w: 2rem; --_hh: 1.1rem; }
  .mn-switch:checked { background: var(--mn-primary); }

  .mn-card, .mn-table-wrap, .mn-accordion, .mn-list, .mn-stats { border-color: var(--mn-border); box-shadow: var(--mn-shadow-sm); }
  .mn-card-header { padding-block: .7rem .4rem; }
  .mn-card-title { font-size: .9375rem; font-weight: 600; }
  .mn-card-description { font-size: .8125rem; }
  .mn-stat-value { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
  .mn-stat-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }

  .mn-table { font-size: .8125rem; }
  .mn-table th, .mn-table td { padding-block: .4rem; border-bottom-color: var(--mn-border); }
  .mn-table thead th { background: var(--mn-surface-2); color: var(--mn-muted); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--mn-primary) 5%, transparent); }

  .mn-badge { font-size: .6875rem; font-weight: 600; }
  .mn-chip { font-size: .75rem; }

  .mn-tab { font-size: .8125rem; font-weight: 600; }
  .mn-tab[aria-selected="true"]::after { height: 2px; border-radius: 0; background: var(--mn-primary); }

  .mn-progress { height: 4px; border-radius: 2px; }
  .mn-progress::after { border-radius: 2px; background: var(--mn-primary); }
  .mn-spinner { border-width: 2px; border-color: var(--mn-border); border-top-color: var(--mn-primary); animation: ditalini-spin .7s linear infinite; }
  .mn-alert { border-color: var(--mn-border); font-size: .8125rem; }
  .mn-bar::before { border-radius: 1px; }
}}

/* ── JUKSING ───────────────────────────────────────────────────────────────
   Jook-sing noodles: kneaded by a cook bouncing along a long bamboo pole.
   A bamboo system: straight lines broken by nodes, buttons carry a node
   ring near each end, progress, sliders and bars are jointed into segments,
   dividers and tab lines end in node caps, and a small springy bounce on
   press and on arrival. Sage-green ink, egg-yolk accent. */
@keyframes juksing-in { 0% { opacity: 0; transform: translateY(-6px); } 60% { opacity: 1; transform: translateY(2px); } 100% { transform: none; } }
@keyframes juksing-bounce { 0% { transform: none; } 35% { transform: translateY(2px); } 70% { transform: translateY(-1px); } 100% { transform: none; } }
@keyframes juksing-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="juksing"]) to ([data-noodle]:not([data-noodle="juksing"])) {
  :scope {
    --mn-enter: juksing-in; --mn-enter-duration: 320ms; --mn-ease-enter: cubic-bezier(.3, .8, .4, 1);
    --mn-duration: 160ms; --mn-spring: cubic-bezier(.3, 1.4, .5, 1);
    --jk-node: color-mix(in oklab, var(--mn-fg) 16%, transparent);
    --jk-culm: linear-gradient(180deg, rgb(255 255 255 / .16), transparent 45%, rgb(0 0 0 / .08));
    --jk-rings: linear-gradient(90deg, transparent 9px, rgb(0 0 0 / .16) 9px 10px, rgb(255 255 255 / .18) 10px 11px, transparent 11px calc(100% - 11px), rgb(0 0 0 / .16) calc(100% - 11px) calc(100% - 10px), rgb(255 255 255 / .18) calc(100% - 10px) calc(100% - 9px), transparent calc(100% - 9px));
    --jk-joints: repeating-linear-gradient(90deg, transparent 0 26px, var(--jk-node) 26px 28px);
    --mn-bar-radius: 3px; --mn-bar-gap: 8px; --mn-line-width: 2px; --mn-area-opacity: .1; --mn-point-opacity: 1;
  }

  /* Buttons: a length of bamboo, rounded shading and a node ring near each end. */
  .mn-btn { background-image: var(--jk-rings), var(--jk-culm); box-shadow: 0 1px 2px rgb(0 0 0 / .12); font-weight: 600; padding-inline: calc(var(--_h) * .55); }
  .mn-btn-icon { padding: 0; background-image: var(--jk-culm); }
  .mn-btn:active { transform: none; animation: juksing-bounce 260ms var(--mn-spring); }
  .mn-btn-outline { --_bd: var(--_c, var(--mn-input)); --_bg: var(--mn-surface); background-image: linear-gradient(90deg, transparent 9px, var(--jk-node) 9px 10px, transparent 10px calc(100% - 10px), var(--jk-node) calc(100% - 10px) calc(100% - 9px), transparent calc(100% - 9px)); box-shadow: none; }
  .mn-btn-soft, .mn-btn-ghost, .mn-btn-link { background-image: none; box-shadow: none; }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { box-shadow: none; }
  .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-ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mn-ring) 20%, transparent); }
  .mn-input-group > .mn-input { box-shadow: none; }
  .mn-checkbox { border-radius: 3px; }
  .mn-checkbox, .mn-radio { box-shadow: none; }
  .mn-checkbox:checked, .mn-radio:checked { animation: juksing-bounce 260ms var(--mn-spring); }
  /* Switch: a bamboo tube with a node in the middle. */
  .mn-switch { --_w: 2.8rem; --_hh: 1.4rem; background: linear-gradient(90deg, transparent calc(50% - 1px), var(--jk-node) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), var(--mn-surface-2); box-shadow: inset 0 0 0 1px var(--mn-border); }
  .mn-switch:checked { background: linear-gradient(90deg, transparent calc(50% - 1px), rgb(0 0 0 / .2) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), var(--_on) var(--jk-culm); box-shadow: none; }
  .mn-switch::before { box-shadow: 0 1px 3px rgb(0 0 0 / .25); }
  .mn-slider { --_track: 8px; }
  .mn-slider::-webkit-slider-runnable-track { border-radius: 2px; box-shadow: none; background: var(--jk-joints), linear-gradient(to right, var(--_on) var(--_v), var(--mn-surface-2) var(--_v)); }
  .mn-slider::-moz-range-track { border-radius: 2px; box-shadow: none; background: var(--jk-joints), var(--mn-surface-2); }
  .mn-slider::-webkit-slider-thumb { border-radius: 4px; width: .9rem; }
  .mn-slider::-moz-range-thumb { border-radius: 4px; width: .9rem; }

  .mn-card { box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
  .mn-card-header { padding-bottom: 1rem; margin-bottom: .25rem; background: linear-gradient(var(--mn-border), var(--mn-border)) left 1.25rem bottom / calc(100% - 2.5rem) 1px no-repeat, radial-gradient(circle, var(--jk-node) 2.5px, transparent 3px) left calc(1.25rem - 3px) bottom -2.5px / 6px 6px no-repeat, radial-gradient(circle, var(--jk-node) 2.5px, transparent 3px) right calc(1.25rem - 3px) bottom -2.5px / 6px 6px no-repeat; }
  .mn-card-footer-bordered { background: none; }

  .mn-table thead th { background: none; border-bottom: 2px solid var(--mn-border); }
  .mn-table td { border-bottom-color: var(--mn-border); }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--mn-primary) 6%, transparent); }

  .mn-badge { background-image: var(--jk-culm); font-weight: 600; }
  .mn-chip { border-radius: 3px; }

  /* Tabs: the current tab's line ends in two node caps. */
  .mn-tab { font-weight: 550; }
  .mn-tab::after { height: 6px; bottom: -3px; border-radius: 0; background: none; }
  .mn-tab[aria-selected="true"]::after { background: radial-gradient(circle at 3px 50%, var(--mn-primary) 2.5px, transparent 3px), radial-gradient(circle at calc(100% - 3px) 50%, var(--mn-primary) 2.5px, transparent 3px), linear-gradient(var(--mn-primary), var(--mn-primary)) center / 100% 2px no-repeat; }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background-image: var(--jk-culm); animation: juksing-bounce 260ms var(--mn-spring); }

  /* Progress: a jointed bamboo stalk filling up. */
  .mn-progress { height: .7rem; border-radius: 3px; box-shadow: none; background: var(--jk-joints), var(--mn-surface-2); }
  .mn-progress::after { border-radius: 3px; background: repeating-linear-gradient(90deg, transparent 0 26px, rgb(0 0 0 / .22) 26px 28px), var(--jk-culm), var(--_p); }
  .mn-radial { --_t: .45rem; background: repeating-conic-gradient(transparent 0 1deg, var(--mn-bg) 1deg 3deg, transparent 3deg 30deg), conic-gradient(var(--_c, var(--mn-primary)) calc(var(--_v) * 1%), var(--mn-surface-2) 0); }
  /* Spinner: a jointed ring turning. */
  .mn-spinner { border: 0; background: repeating-conic-gradient(var(--_c, currentColor) 0 80deg, transparent 80deg 90deg); -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 65%); mask: radial-gradient(closest-side, transparent 62%, #000 65%); animation: juksing-spin 1s cubic-bezier(.4, 1.3, .6, 1) infinite; }

  .mn-alert { box-shadow: inset 4px 0 0 var(--_a); border-color: var(--mn-border); }
  .mn-step + .mn-step::after { height: 6px; top: calc(1rem - 3px); background: radial-gradient(circle at 3px 50%, var(--jk-node) 2.5px, transparent 3px), radial-gradient(circle at calc(100% - 3px) 50%, var(--jk-node) 2.5px, transparent 3px), linear-gradient(var(--mn-border), var(--mn-border)) center / 100% 2px no-repeat; }
  .mn-step[data-state="complete"] + .mn-step::after { background: radial-gradient(circle at 3px 50%, var(--mn-primary) 2.5px, transparent 3px), radial-gradient(circle at calc(100% - 3px) 50%, var(--mn-primary) 2.5px, transparent 3px), linear-gradient(var(--mn-primary), var(--mn-primary)) center / 100% 2px no-repeat; }
  .mn-steps-vertical .mn-step + .mn-step::after { background: var(--mn-border); height: 1.5rem; width: 2px; }
  .mn-divider::before, .mn-divider::after { height: 5px; background: linear-gradient(var(--mn-border), var(--mn-border)) center / 100% 1px no-repeat, repeating-linear-gradient(90deg, transparent 0 38px, var(--jk-node) 38px 40px); }
  .mn-page[aria-current="page"] { background-image: var(--jk-culm); }

  /* Charts: bamboo stalks with a joint every few pixels. */
  .mn-bar::before { background-image: repeating-linear-gradient(to top, transparent 0 16px, rgb(0 0 0 / .14) 16px 18px), var(--jk-culm); }
  .mn-chart-h .mn-bar::before { background-image: repeating-linear-gradient(90deg, transparent 0 16px, rgb(0 0 0 / .14) 16px 18px); }
  .mn-donut { --thick: 26%; }
}}

/* ── KISHIMEN ──────────────────────────────────────────────────────────────
   Nagoya's wide, paper-thin flat noodles: broad ribbons with a glossy top,
   folded over in the bowl, with bonito flakes that dance in the steam.
   Low, wide controls; folded-corner cards and tabs; flakes that flutter. */
@keyframes kishimen-drop { from { opacity: 0; transform: scaleY(.1); transform-origin: top; } to { transform-origin: top; } }
@keyframes kishimen-flake { 0%, 100% { transform: rotate(-8deg) translateY(0); } 25% { transform: rotate(10deg) translateY(-2px); } 50% { transform: rotate(-4deg) translateY(1px) skewX(10deg); } 75% { transform: rotate(6deg) translateY(-1px); } }
@keyframes kishimen-swing { 0%, 100% { transform: rotate(-35deg) skewX(15deg); } 50% { transform: rotate(35deg) skewX(-15deg); } }

@layer mian.noodles { @scope ([data-noodle="kishimen"]) to ([data-noodle]:not([data-noodle="kishimen"])) {
  :scope {
    --mn-enter: kishimen-drop; --mn-enter-duration: 200ms; --mn-ease-enter: cubic-bezier(.2, .9, .3, 1);
    --mn-duration: 140ms;
    --k-sheen: inset 0 1px 0 rgb(255 255 255 / .45);
    --k-fold: 12px;
    --k-flake: color-mix(in oklab, var(--mn-primary) 70%, #e9b8a8);
    --mn-bar-radius: 0; --mn-bar-gap: 2px; --mn-line-width: 5px; --mn-area-opacity: .3;
    --mn-bar-fill: color-mix(in oklab, var(--mn-series-1) 22%, var(--mn-surface-2));
  }

  /* Buttons: wide, low ribbons; flakes flutter above on hover. */
  .mn-btn { --_h: calc(var(--mn-size-md) - 4px); padding-inline: calc(var(--_h) * .85); box-shadow: var(--k-sheen); font-weight: 600; letter-spacing: .04em; }
  .mn-btn-icon { padding: 0; }
  .mn-btn::before {
    content: ""; position: absolute; top: -5px; right: 12%; width: 7px; height: 4px; border-radius: 1px 3px;
    background: var(--k-flake); box-shadow: -11px 2px 0 -1px var(--k-flake), -22px -1px 0 0 var(--k-flake);
    opacity: 0; transition: opacity var(--mn-duration);
  }
  .mn-btn:hover::before, .mn-btn:focus-visible::before { opacity: 1; animation: kishimen-flake .9s ease-in-out infinite; }
  .mn-btn-ghost::before, .mn-btn-link::before, .mn-btn-icon::before { display: none; }
  .mn-btn:active { transform: scaleY(.9); }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input {
    border: 0; background-color: var(--mn-surface-2); box-shadow: inset 0 -3px 0 var(--mn-input);
  }
  .mn-input, .mn-select { --_h: calc(var(--mn-size-md) - 4px); }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within, .mn-number:focus-within, .mn-otp > input:focus {
    box-shadow: inset 0 -3px 0 var(--mn-primary); background-color: color-mix(in oklab, var(--mn-primary) 6%, var(--mn-surface-2));
  }
  .mn-input-group > .mn-input { box-shadow: none; }
  .mn-otp > input { width: calc(var(--mn-size-md) + 16px); height: var(--mn-size-md); }
  .mn-checkbox, .mn-radio { border-radius: 2px; width: 1.4rem; height: .95rem; }
  .mn-radio { border-radius: 2px; }
  .mn-radio::before { border-radius: 1px; width: .7em; height: .3em; }
  /* Switch: a wide flat tile slides in a wide flat slot. */
  .mn-switch { --_w: 3rem; --_hh: 1rem; border-radius: 2px; }
  .mn-switch::before { border-radius: 1px; width: 1.4rem; height: calc(var(--_hh) - 4px); box-shadow: var(--k-sheen); }
  .mn-switch:checked::before { transform: translateX(calc(3rem - 1.4rem - 4px)); }
  .mn-slider { --_track: 8px; }
  .mn-slider::-webkit-slider-runnable-track { border-radius: 1px; }
  .mn-slider::-webkit-slider-thumb { border-radius: 2px; width: 1.8rem; height: .9rem; margin-top: calc((8px - .9rem) / 2); box-shadow: var(--k-sheen); }
  .mn-slider::-moz-range-thumb { border-radius: 2px; width: 1.8rem; height: .9rem; }

  /* Cards: a folded ribbon corner. */
  .mn-card { position: relative; border: 0; background: var(--mn-surface); box-shadow: none; clip-path: polygon(0 0, calc(100% - var(--k-fold)) 0, 100% var(--k-fold), 100% 100%, 0 100%); border-top: 3px solid var(--mn-primary); }
  .mn-card::after { content: ""; position: absolute; top: 0; right: 0; width: var(--k-fold); height: var(--k-fold); background: linear-gradient(225deg, transparent 50%, var(--mn-surface-2) 50%); }
  .mn-card-header { padding-top: 1rem; }
  .mn-card-title { letter-spacing: .01em; }

  /* Tables: full-width flat bands. */
  .mn-table-wrap { border: 0; border-radius: 0; background: none; }
  .mn-table thead th { background: var(--mn-fg); color: var(--mn-bg); font-weight: 600; letter-spacing: .06em; font-size: .75rem; text-transform: uppercase; height: 2rem; }
  .mn-table td { border: 0; padding-block: .55rem; }
  .mn-table tbody tr:nth-child(odd) { background: var(--mn-surface-2); }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--mn-primary) 12%, var(--mn-surface)); box-shadow: inset 3px 0 0 var(--mn-primary); }

  .mn-badge { height: 1.2rem; padding-inline: .9em; font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; }
  .mn-chip { border-radius: 2px; border: 0; height: 1.7rem; }
  /* Tabs: equal wide ribbons, the chosen one folded. */
  .mn-tab-list { border-bottom: 3px solid var(--mn-surface-2); }
  .mn-tab { flex: 1; height: calc(var(--mn-size-md) - 6px); letter-spacing: .04em; }
  .mn-tab::after { inset-inline: 0; height: 3px; bottom: -3px; border-radius: 0; }
  .mn-tab[aria-selected="true"] { background: color-mix(in oklab, var(--mn-primary) 9%, transparent); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
  .mn-tab[aria-selected="true"]::after { background: var(--mn-primary); }
  .mn-tabs-boxed .mn-tab-list { display: flex; border-radius: 2px; padding: 2px; }
  .mn-tabs-boxed .mn-tab { border-radius: 1px; }
  .mn-tabs-boxed .mn-tab[aria-selected="true"] { clip-path: none; background: var(--mn-primary); color: var(--mn-primary-fg); box-shadow: var(--k-sheen); }
  .mn-toggle-group { border-radius: 2px; padding: 2px; }
  .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 1px; padding-inline: 1.3em; height: calc(var(--mn-size-md) - 8px); }

  .mn-progress { height: .8rem; border-radius: 1px; box-shadow: none; }
  .mn-progress::after { border-radius: 0; box-shadow: var(--k-sheen); }
  .mn-radial { border-radius: 4px; background: conic-gradient(var(--_c, var(--mn-primary)) calc(var(--_v) * 1%), var(--mn-surface-2) 0); }
  .mn-radial::before { border-radius: 2px; }
  /* Spinner: a flake dancing. */
  .mn-spinner { border: 0; border-radius: 1px 5px; width: calc(var(--_s) * .9); height: calc(var(--_s) * .45); background: var(--k-flake); animation: kishimen-swing .8s ease-in-out infinite; }
  .mn-alert { border: 0; border-radius: 0; border-top: 3px solid var(--_a); }
  .mn-avatar { border-radius: 4px; }
  .mn-step::before { border-radius: 2px; width: 2.6rem; height: 1.5rem; }
  .mn-step + .mn-step::after { top: .75rem; height: 3px; }
  .mn-steps-vertical .mn-step + .mn-step::after { left: 1.3rem; }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast { border: 0; border-top: 3px solid var(--mn-primary); }
  .mn-menu-item, .mn-page { border-radius: 1px; }
  .mn-accordion, .mn-list, .mn-stats { border: 0; border-radius: 0; border-top: 3px solid var(--mn-fg); background: var(--mn-surface); }

  /* Charts: wide flat bars that touch, each with a glossy top. */
  .mn-bar::before { box-shadow: inset 0 2px 0 rgb(255 255 255 / .45); }
  .mn-bar.mn-hl::before, .mn-bar:hover::before { background: var(--mn-series-1); }
  .mn-chart-line .mn-line { stroke-linecap: butt; }
  .mn-donut { --thick: 26%; }
}}

/* ── LAMIAN ────────────────────────────────────────────────────────────────
   Hand-pulled: stretched, elastic, one long continuous strand. Controls
   stretch when pressed, everything springs with overshoot, indicators glide
   between positions, bars are long horizontal strands. */
@keyframes lamian-stretch { 0% { opacity: 0; transform: scaleX(.35) scaleY(.9); } 55% { opacity: 1; transform: scaleX(1.06) scaleY(.98); } 100% { transform: none; } }
@keyframes lamian-knob { 0% { width: var(--_k); } 45% { width: calc(var(--_k) * 2.1); } 100% { width: var(--_k); } }
@keyframes lamian-pull { 0% { transform: scaleX(.15); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 50.1% { transform-origin: right; } 100% { transform: scaleX(.15); transform-origin: right; } }
@keyframes lamian-grow { from { transform: scaleX(0); } }

@layer mian.noodles { @scope ([data-noodle="lamian"]) to ([data-noodle]:not([data-noodle="lamian"])) {
  :scope {
    --mn-enter: lamian-stretch; --mn-enter-duration: 420ms; --mn-ease-enter: cubic-bezier(.34, 1.56, .64, 1);
    --mn-duration: 260ms; --mn-spring: cubic-bezier(.5, 1.7, .4, .8);
    --mn-bar-radius: 999px; --mn-bar-gap: 7px; --mn-line-width: 3px; --mn-area-opacity: .14;
  }

  /* Buttons: long pills that stretch when pulled. */
  .mn-btn {
    border-radius: 999px; padding-inline: calc(var(--_h) * .7); letter-spacing: .015em;
    transition: transform 380ms var(--mn-spring), letter-spacing 380ms var(--mn-spring), background-color var(--mn-duration), box-shadow var(--mn-duration);
  }
  .mn-btn:hover { letter-spacing: .05em; }
  .mn-btn:active { transform: scale(1.1, .9); transition-duration: 120ms; }
  .mn-btn-icon { padding: 0; }
  .mn-btn-group > .mn-btn:not(.mn-btn-icon) { padding-inline: calc(var(--_h) * .4); }
  .mn-btn-icon:hover { letter-spacing: 0; transform: scaleX(1.12); }

  .mn-input, .mn-select, .mn-input-group, .mn-number, .mn-file { border-radius: 999px; padding-inline: 1.1rem; transition: box-shadow 420ms var(--mn-spring), border-color var(--mn-duration); }
  .mn-select { padding-inline-end: 2.4rem; }
  .mn-input-group, .mn-number { padding: 0; }
  .mn-textarea { border-radius: 22px; }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within, .mn-number:focus-within { box-shadow: 0 0 0 5px color-mix(in oklab, var(--mn-ring) 18%, transparent), 0 0 0 1px var(--mn-ring); }
  .mn-otp > input { border-radius: 999px; width: calc(var(--mn-size-md) + 12px); }
  .mn-checkbox { border-radius: 999px; width: 1.8rem; }
  .mn-checkbox::before { transition: transform 380ms var(--mn-spring); }
  /* Switch: the knob stretches as it is pulled across. */
  .mn-switch { --_w: 3.1rem; --_hh: 1.2rem; --_k: calc(var(--_hh) - 4px); }
  .mn-switch::before { transform: none; left: 2px; width: var(--_k); border-radius: 999px; transition: left 420ms var(--mn-spring); }
  .mn-switch:checked::before { transform: none; left: calc(100% - var(--_k) - 2px); animation: lamian-knob 420ms var(--mn-spring); }
  .mn-slider { --_track: 4px; }
  .mn-slider::-webkit-slider-thumb { width: 2rem; border-radius: 999px; transition: transform 380ms var(--mn-spring); }
  .mn-slider::-moz-range-thumb { width: 2rem; border-radius: 999px; }
  .mn-slider:active::-webkit-slider-thumb { transform: scaleX(1.4); }

  /* Cards carry one strand along the top that pulls taut on hover. */
  .mn-card { position: relative; }
  .mn-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--mn-primary), var(--mn-accent)); transform: scaleX(.22); transform-origin: left; transition: transform 700ms var(--mn-spring); }
  .mn-card:hover::before, .mn-card:focus-within::before { transform: scaleX(1); }

  .mn-table tbody tr { background-image: linear-gradient(var(--mn-primary), var(--mn-primary)); background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 500ms var(--mn-spring); }
  .mn-table-hover tbody tr:hover { background-color: transparent; background-size: 100% 2px; }
  .mn-table thead th { background: none; border-bottom: 2px solid var(--mn-fg); }

  .mn-badge { border-radius: 999px; padding-inline: 1em; }
  .mn-chip { padding-inline-start: 1rem; }

  /* Tabs: one indicator that glides and stretches between tabs. */
  .mn-tab-list { position: relative; }
  .mn-tab::after { display: none; }
  .mn-tab-list::after { content: ""; position: absolute; bottom: calc(var(--mn-border-w) * -1); left: var(--_ix, 0); width: var(--_iw, 0); height: 3px; border-radius: 3px; background: var(--mn-primary); transition: left 460ms var(--mn-spring), width 460ms var(--mn-spring); }
  .mn-tabs-boxed .mn-tab-list, .mn-tabs-pills .mn-tab-list { isolation: isolate; }
  .mn-tabs-boxed .mn-tab-list::after, .mn-tabs-pills .mn-tab-list::after { top: 3px; bottom: 3px; height: auto; z-index: -1; border-radius: 999px; background: var(--mn-surface); box-shadow: 0 1px 3px rgb(0 0 0 / .12), 0 0 0 1px var(--mn-border); }
  .mn-tabs-pills .mn-tab-list::after { top: 0; bottom: 0; background: var(--mn-primary); }
  .mn-tabs-boxed .mn-tab-list { border-radius: 999px; }
  .mn-tabs-boxed .mn-tab, .mn-tabs-pills .mn-tab { border-radius: 999px; background: transparent !important; box-shadow: none !important; }
  .mn-tabs-pills .mn-tab[aria-selected="true"] { color: var(--mn-primary-fg); }
  .mn-toggle-group { border-radius: 999px; }
  .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 999px; padding-inline: 1.1em; transition: background-color 380ms var(--mn-spring), box-shadow 380ms var(--mn-spring), transform 380ms var(--mn-spring); }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { transform: scaleX(1.04); }

  .mn-progress { height: 6px; }
  .mn-progress::after { transition: width 700ms var(--mn-spring); background: linear-gradient(90deg, var(--_p), color-mix(in oklab, var(--_p), #fff 30%) 80%, var(--_p)); }
  .mn-radial { --_t: .25rem; }
  /* Spinner: a strand being pulled and released. */
  .mn-spinner { border: 0; border-radius: 999px; width: calc(var(--_s) * 2); height: calc(var(--_s) * .3); background: var(--_c, currentColor); animation: lamian-pull 1.1s cubic-bezier(.6, 0, .4, 1) infinite; }
  .mn-alert { border-radius: 999px 22px 22px 999px; padding-inline-start: 1.25rem; }
  .mn-step + .mn-step::after { height: 3px; border-radius: 3px; }
  .mn-step[data-state="complete"] + .mn-step::after { animation: lamian-grow 700ms var(--mn-spring) both; transform-origin: left; }
  .mn-menu, .mn-popover { transform-origin: top center; }
  .mn-menu-item { border-radius: 999px; padding-inline: .9rem; }
  .mn-page { border-radius: 999px; }
  .mn-avatar-group > .mn-avatar + .mn-avatar { margin-inline-start: calc(var(--_s) * -.45); }

  /* Charts: bars become long horizontal strands. */
  .mn-chart-bars { flex-direction: column; height: auto; padding: 4px 2.5rem 4px var(--mn-chart-label, 3rem); background: none; gap: 6px; }
  .mn-chart-bars .mn-bar { flex: none; flex-direction: row; justify-content: flex-start; align-items: center; height: .55rem; }
  .mn-chart-bars .mn-bar::before { height: 100%; width: calc(var(--v, 0) / var(--max) * 100%); border-radius: 999px; transform-origin: left; animation: lamian-grow 900ms var(--mn-spring) both; }
  .mn-chart-bars .mn-bar > span { left: calc(var(--mn-chart-label, 3rem) * -1); bottom: auto; top: 50%; translate: 0 -50%; width: calc(var(--mn-chart-label, 3rem) - .4rem); text-align: end; overflow: hidden; text-overflow: ellipsis; }
  .mn-chart-bars .mn-bar[data-value]::after { left: calc(var(--v, 0) / var(--max) * 100% + 6px); bottom: auto; top: 50%; translate: 0 -50%; background: none; color: var(--mn-muted); padding: 0; }
  .mn-chart-line .mn-point { opacity: 0; }
  .mn-donut { --thick: 14%; }
}}

/* ── SOMEN ─────────────────────────────────────────────────────────────────
   Hair-thin wheat strands, bundled straight, served on ice.
   A hairline system: 1px strokes, underline fields, dot knobs, light type,
   crisp near-instant motion. */
@keyframes somen-in { from { opacity: 0; transform: translateY(-3px); } }

@layer mian.noodles { @scope ([data-noodle="somen"]) to ([data-noodle]:not([data-noodle="somen"])) {
  :scope { --mn-enter: somen-in; --mn-enter-duration: 120ms; --mn-ease-enter: linear; --mn-duration: 110ms; --mn-spring: cubic-bezier(.3, 0, .2, 1);
    --mn-bar-radius: 0; --mn-bar-gap: 10px; --mn-line-width: 1px; --mn-area-opacity: 0; --mn-point-opacity: 1; }

  /* Buttons: one strand. Thin outline, light weight, no shadow. */
  .mn-btn { font-weight: 400; letter-spacing: .02em; box-shadow: none; border-width: 1px; }
  .mn-btn:active { transform: none; opacity: .75; }
  .mn-btn-outline { --_bd: var(--_c, var(--mn-fg)); }
  .mn-btn-soft { --_bg: transparent; border-color: color-mix(in oklab, var(--_c, var(--mn-primary)) 35%, transparent); }
  .mn-btn-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

  /* Fields are a single line to write on. */
  .mn-input, .mn-select, .mn-textarea {
    border-width: 0 0 1px; border-radius: 0; background-color: transparent; box-shadow: none; padding-inline: 0;
    background-image: linear-gradient(var(--mn-fg), var(--mn-fg)); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat;
    transition: background-size 200ms var(--mn-spring), border-color var(--mn-duration);
  }
  .mn-input:focus, .mn-textarea:focus { box-shadow: none; background-size: 100% 1px; }
  .mn-select { padding-inline-end: 1.5rem; background-image: linear-gradient(45deg, transparent 50%, var(--mn-muted) 50%), linear-gradient(135deg, var(--mn-muted) 50%, transparent 50%); background-size: 4px 4px, 4px 4px; background-position: calc(100% - 7px) 55%, calc(100% - 3px) 55%; }
  .mn-select:focus { box-shadow: none; border-color: var(--mn-fg); }
  .mn-textarea { border-width: 1px 0; padding: .5rem 0; }
  .mn-input-group { border-width: 0 0 1px; border-radius: 0; box-shadow: none; background: transparent; }
  .mn-input-group:focus-within { box-shadow: none; border-color: var(--mn-fg); }
  .mn-addon { background: transparent; border: 0 !important; padding-inline: 0 .5rem; }
  .mn-number, .mn-file { box-shadow: none; }
  .mn-otp > input { border-width: 0 0 1px; border-radius: 0; box-shadow: none; background: transparent; font-weight: 300; }

  .mn-checkbox, .mn-radio { --_s: .95rem; border-radius: 1px; box-shadow: none; border-width: 1px; }
  .mn-radio { border-radius: 50%; }
  .mn-checkbox::before { width: .5em; height: .5em; }
  /* Switch: a 2px strand with a bead. */
  .mn-switch { --_w: 2.1rem; --_hh: 2px; height: .9rem; background: linear-gradient(var(--mn-input), var(--mn-input)) center / 100% 2px no-repeat; }
  .mn-switch::before { top: 50%; left: 0; width: .7rem; height: .7rem; margin-top: -.35rem; box-shadow: none; border: 1px solid var(--mn-fg); background: var(--mn-surface); }
  .mn-switch:checked { background: linear-gradient(var(--_on), var(--_on)) center / 100% 2px no-repeat; }
  .mn-switch:checked::before { transform: translateX(calc(2.1rem - .7rem)); background: var(--_on); border-color: var(--_on); }
  .mn-slider { --_track: 1px; --_thumb: .8rem; }
  .mn-slider::-webkit-slider-thumb { border-width: 1px; box-shadow: none; }
  .mn-slider::-moz-range-thumb { border-width: 1px; box-shadow: none; }

  .mn-card { box-shadow: none; border-width: 1px; }
  .mn-card-title { font-weight: 400; letter-spacing: -.005em; }
  .mn-card-footer-bordered { background: none; }

  .mn-table-wrap { border-width: 0; border-radius: 0; background: none; }
  .mn-table thead th { background: none; font-size: .6875rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; border-bottom-color: var(--mn-fg); }
  .mn-table td { padding-block: .85rem; }

  .mn-badge { height: 1.25rem; font-weight: 500; letter-spacing: .04em; background: transparent; color: var(--_ct, var(--mn-fg)); border-color: currentColor; }
  .mn-badge-soft { border-color: color-mix(in oklab, currentColor 35%, transparent); }
  .mn-chip { border-radius: 2px; background: transparent; }

  .mn-tab-list { border-bottom-color: var(--mn-border); }
  .mn-tab { font-weight: 400; letter-spacing: .02em; }
  .mn-tab::after { height: 1px; inset-inline: 0; }
  .mn-tabs-boxed .mn-tab-list { background: none; border: 1px solid var(--mn-border); padding: 0; gap: 0; border-radius: 2px; }
  .mn-tabs-boxed .mn-tab { border-radius: 0; }
  .mn-tabs-boxed .mn-tab[aria-selected="true"] { box-shadow: none; background: var(--mn-fg); color: var(--mn-bg); }
  .mn-toggle-group { background: none; padding: 0; gap: 0; border: 1px solid var(--mn-border); border-radius: 2px; }
  .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 0; font-weight: 400; }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { box-shadow: none; background: var(--mn-fg); color: var(--mn-bg); }

  .mn-progress { height: 1px; box-shadow: none; background: var(--mn-border); overflow: visible; }
  .mn-progress::after { height: 3px; top: -1px; border-radius: 0; }
  .mn-radial { --_t: 2px; font-weight: 300; }
  .mn-spinner { border-width: 1px; }
  .mn-alert { border-width: 0 0 0 1px; border-radius: 0; background: none; border-color: var(--_a); padding-block: .4rem; }
  .mn-avatar { box-shadow: inset 0 0 0 1px var(--mn-border); font-weight: 400; }
  .mn-step::before { width: 1.5rem; height: 1.5rem; border-width: 1px; font-weight: 400; }
  .mn-step + .mn-step::after { height: 1px; top: .75rem; }
  .mn-steps-vertical .mn-step + .mn-step::after { width: 1px; left: .75rem; }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast { box-shadow: 0 8px 24px -12px rgb(0 0 0 / .25); }
  .mn-accordion { border-width: 1px 0; border-radius: 0; background: none; }
  .mn-page[aria-current="page"] { box-shadow: none; border-color: transparent; border-bottom-color: var(--mn-fg); border-radius: 0; }
  .mn-stats { border-width: 1px 0; border-radius: 0; background: none; }
  .mn-stat-value { font-weight: 200; font-size: 2rem; }
  .mn-h1, .mn-h2, .mn-prose h1, .mn-prose h2 { font-weight: 200; letter-spacing: -.035em; }
  .mn-donut { --thick: 3px; }
  .mn-bar::before { max-width: 2px; margin-inline: auto; box-shadow: 0 -4px 0 1px var(--mn-bar-fill-hl, var(--mn-series-1)); }
  .mn-bar::before, .mn-bar.mn-hl::before, .mn-bar:hover::before { width: 2px; background: var(--mn-series-1); }
  .mn-chart-h .mn-bar::before { max-width: none; height: 1px; box-shadow: 4px 0 0 1px var(--mn-series-1); }
}}

/* ── CAPELLINI ─────────────────────────────────────────────────────────────
   Capellini d'angelo, angel hair: the finest pasta there is, twisted into
   loose nests and served with lemon and butter. An airy system: 300-weight
   type, lines at the edge of visibility, round soft surfaces floating on
   diffuse light, lots of space, and one pale note of lemon. Motion is
   feather-light; the spinner is a nest of fine arcs. */
@keyframes capellini-in { from { opacity: 0; transform: translateY(4px); filter: blur(3px); } }
@keyframes capellini-nest { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="capellini"]) to ([data-noodle]:not([data-noodle="capellini"])) {
  :scope {
    --mn-enter: capellini-in; --mn-enter-duration: 340ms; --mn-ease-enter: cubic-bezier(.16, 1, .3, 1);
    --mn-duration: 220ms; --mn-spring: cubic-bezier(.16, 1, .3, 1);
    --cp-air: 0 1px 1px light-dark(rgb(40 36 20 / .03), rgb(0 0 0 / .3)), 0 12px 32px -12px light-dark(rgb(90 80 30 / .14), rgb(0 0 0 / .55));
    --cp-hair: light-dark(rgb(38 36 31 / .09), rgb(243 241 232 / .09));
    --mn-focus: 0 0 0 4px color-mix(in oklab, var(--mn-accent) 55%, transparent);
    --mn-bar-radius: 999px; --mn-bar-gap: 12px; --mn-line-width: 1px; --mn-area-opacity: .08; --mn-point-opacity: 0;
    --mn-bar-fill: color-mix(in oklab, var(--mn-fg) 9%, transparent); --mn-bar-fill-hl: var(--mn-accent);
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3, .mn-display, .mn-title) { font-weight: 250; letter-spacing: -.035em; }
  :scope :where(p, li, td) { font-weight: 350; }

  /* Buttons: soft, low and light; the primary is soft ink with a lemon glow on hover. */
  .mn-btn { box-shadow: none; font-weight: 400; letter-spacing: .005em; }
  .mn-btn:not(.mn-btn-outline, .mn-btn-soft, .mn-btn-ghost, .mn-btn-link):hover { box-shadow: 0 8px 22px -10px color-mix(in oklab, var(--mn-accent) 90%, transparent); }
  .mn-btn-outline { --_bd: var(--cp-hair); --_bg: var(--mn-surface); box-shadow: var(--cp-air); }
  .mn-btn-soft { --_bg: color-mix(in oklab, var(--mn-accent) 22%, transparent); --_fg: var(--mn-fg); }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { border-color: var(--cp-hair); background-color: var(--mn-surface); box-shadow: var(--cp-air); font-weight: 350; }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within, .mn-number:focus-within, .mn-otp > input:focus { border-color: color-mix(in oklab, var(--mn-accent) 70%, var(--mn-fg)); box-shadow: var(--cp-air), var(--mn-focus); }
  .mn-input-group > .mn-input { box-shadow: none; border: 0; }
  .mn-label { font-weight: 400; color: var(--mn-muted); }
  .mn-checkbox, .mn-radio { border-color: color-mix(in oklab, var(--mn-fg) 25%, transparent); background-color: var(--mn-surface); }
  .mn-checkbox { border-radius: 6px; }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); border-color: var(--_on); }
  /* Switch: a thread of a track and a pearl of a knob. */
  .mn-switch { --_w: 2.5rem; --_hh: 1.4rem; background: color-mix(in oklab, var(--mn-fg) 10%, transparent); }
  .mn-switch::before { box-shadow: 0 2px 8px rgb(0 0 0 / .18); }
  .mn-switch:checked { background: var(--mn-accent); }
  .mn-switch:checked::before { background: var(--mn-surface); }
  .mn-slider { --_track: 2px; }
  .mn-slider::-webkit-slider-runnable-track { box-shadow: none; background: linear-gradient(to right, var(--mn-fg) var(--_v), var(--cp-hair) var(--_v)); }
  .mn-slider::-webkit-slider-thumb { border: 0; background: var(--mn-surface); box-shadow: var(--cp-air), 0 0 0 1px var(--cp-hair); }
  .mn-slider::-moz-range-thumb { border: 0; background: var(--mn-surface); box-shadow: var(--cp-air); }

  /* Surfaces: white clouds on warm air, a hairline edge and diffuse shadow. */
  .mn-card, .mn-table-wrap, .mn-list, .mn-accordion, .mn-stats, .mn-collapse { border-color: var(--cp-hair); box-shadow: var(--cp-air); }
  .mn-card-title { font-weight: 400; letter-spacing: -.015em; font-size: 1.125rem; }
  .mn-card-footer-bordered { border-top-color: var(--cp-hair); background: none; }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { border-color: var(--cp-hair); box-shadow: var(--cp-air), 0 30px 60px -30px rgb(0 0 0 / .25); }
  .mn-list > li + li, .mn-accordion > details + details { border-top-color: var(--cp-hair); }
  .mn-stat-value { font-weight: 250; letter-spacing: -.04em; }

  .mn-table th, .mn-table td { border-bottom-color: var(--cp-hair); }
  .mn-table thead th { background: none; font-weight: 400; color: var(--mn-muted); }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--mn-accent) 10%, transparent); }

  .mn-badge { font-weight: 450; border: 0; }
  .mn-badge-soft { background: color-mix(in oklab, var(--_c, var(--mn-accent)) 12%, transparent); color: var(--_ct, var(--mn-fg)); }
  .mn-badge-outline { border: 1px solid var(--cp-hair); }
  .mn-chip { border-color: var(--cp-hair); font-weight: 400; }

  /* Tabs: words; the chosen one sits on a lemon thread. */
  .mn-tab-list { border-bottom-color: var(--cp-hair); }
  .mn-tab { font-weight: 400; }
  .mn-tab[aria-selected="true"]::after { height: 2px; background: var(--mn-accent); inset-inline: 30%; border-radius: 2px; }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { background: color-mix(in oklab, var(--mn-fg) 5%, transparent); border: 0; }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-surface); box-shadow: var(--cp-air); color: var(--mn-fg); }

  .mn-progress { height: 3px; background: var(--cp-hair); box-shadow: none; }
  .mn-progress::after { background: var(--mn-fg); }
  .mn-radial { --_t: 2px; background: conic-gradient(var(--mn-fg) calc(var(--_v) * 1%), var(--cp-hair) 0); }
  .mn-radial::before { background: var(--mn-surface); }
  /* Spinner: a nest, three fine arcs turning at different speeds. */
  .mn-spinner { border: 1px solid transparent; border-top-color: var(--_c, currentColor); box-shadow: inset 0 0 0 3px var(--mn-bg); background: conic-gradient(from 90deg, transparent 0 70%, color-mix(in oklab, var(--mn-accent) 80%, transparent) 70% 72%, transparent 72%); animation: capellini-nest 1.2s cubic-bezier(.4, .1, .4, .9) infinite; }

  .mn-alert { border-color: var(--cp-hair); box-shadow: var(--cp-air); background-color: var(--mn-surface); }
  .mn-avatar { box-shadow: 0 0 0 1px var(--cp-hair); font-weight: 400; }
  .mn-step::before { border-color: var(--cp-hair); font-weight: 400; }
  .mn-step + .mn-step::after { height: 1px; background: var(--cp-hair); }
  .mn-page { border-color: transparent; font-weight: 400; }
  .mn-page[aria-current="page"] { background: var(--mn-surface); box-shadow: var(--cp-air); border-color: var(--cp-hair); color: var(--mn-fg); }

  /* Charts: fine threads, soft rounded columns; the one that matters is lemon. */
  .mn-bar::before { background: var(--mn-bar-fill); }
  .mn-donut { --thick: 10%; }
}}

/* ── LONGXU ────────────────────────────────────────────────────────────────
   Dragon's beard noodles: one rope of dough folded and pulled again and
   again, each fold doubling the strands until there are thousands. An
   engraving system on warm paper: fills are drawn with fine hatching
   (--lx-hatch) whose spacing halves (--lx-hatch-2) when something is
   hovered, selected or on; everything else is a 1px ink line and a book
   serif. */
@keyframes longxu-in { from { opacity: 0; transform: translateY(3px); } }
@keyframes longxu-pull { from { background-position: 0 0; } to { background-position: 12px 0; } }
@keyframes longxu-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="longxu"]) to ([data-noodle]:not([data-noodle="longxu"])) {
  :scope {
    --mn-enter: longxu-in; --mn-enter-duration: 260ms; --mn-ease-enter: cubic-bezier(.3, .1, .3, 1);
    --mn-duration: 180ms; --mn-spring: cubic-bezier(.3, .1, .3, 1);
    --lx-ink: var(--mn-fg);
    --lx-hatch: repeating-linear-gradient(-45deg, var(--lx-ink) 0 1px, transparent 1px 6px);
    --lx-hatch-2: repeating-linear-gradient(-45deg, var(--lx-ink) 0 1px, transparent 1px 3px);
    --lx-cross: repeating-linear-gradient(-45deg, var(--lx-ink) 0 1px, transparent 1px 4px), repeating-linear-gradient(45deg, var(--lx-ink) 0 1px, transparent 1px 4px);
    --mn-focus: 0 0 0 2px var(--mn-bg), 0 0 0 3px var(--lx-ink);
    --mn-bar-radius: 0; --mn-bar-gap: 10px; --mn-line-width: 1.25px; --mn-area-opacity: 0; --mn-point-opacity: 1;
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3, .mn-card-title, .mn-modal-title) { font-family: var(--mn-font-heading); font-weight: 400; letter-spacing: -.01em; }

  /* Buttons: solid ink, or a 1px outline that fills with hatching on hover. */
  .mn-btn { box-shadow: none; font-weight: 500; letter-spacing: .02em; border-width: 1px; }
  .mn-btn:active { transform: none; opacity: .8; }
  .mn-btn-outline, .mn-btn-soft { --_bd: var(--_c, var(--lx-ink)); --_bg: var(--mn-surface); --_fg: var(--_ct, var(--lx-ink)); }
  .mn-btn-outline:hover, .mn-btn-soft:hover { --_bg: var(--mn-surface); background-image: var(--lx-hatch); background-color: var(--mn-surface); }
  .mn-btn-ghost:hover { --_bg: transparent; background-image: var(--lx-hatch); }
  .mn-btn-outline:hover, .mn-btn-soft:hover, .mn-btn-ghost:hover { text-shadow: 0 0 3px var(--mn-surface), 0 0 3px var(--mn-surface), 0 0 2px var(--mn-surface); }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { box-shadow: none; border-color: var(--mn-input); background-color: var(--mn-surface); }
  .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(--lx-ink); box-shadow: 0 1px 0 var(--lx-ink); }
  .mn-input-group > .mn-input { box-shadow: none; }
  .mn-checkbox, .mn-radio { border-width: 1px; border-color: var(--lx-ink); box-shadow: none; }
  .mn-checkbox { border-radius: 1px; }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--mn-surface); background-image: var(--lx-cross); border-color: var(--lx-ink); }
  .mn-checkbox:checked::before { background: var(--mn-surface); box-shadow: 0 0 0 1px var(--mn-surface); }
  .mn-radio:checked::before { background: var(--lx-ink); box-shadow: 0 0 0 2px var(--mn-surface); }
  /* Switch: a hairline box that fills with hatching when on. */
  .mn-switch { --_w: 2.6rem; --_hh: 1.3rem; border-radius: 2px; background: var(--mn-surface); box-shadow: inset 0 0 0 1px var(--lx-ink); }
  .mn-switch::before { border-radius: 1px; top: 3px; left: 3px; width: calc(var(--_hh) - 6px); height: calc(var(--_hh) - 6px); background: var(--lx-ink); box-shadow: none; }
  .mn-switch:checked { background: var(--mn-surface) var(--lx-hatch-2); box-shadow: inset 0 0 0 1px var(--lx-ink); }
  .mn-switch:checked::before { transform: translateX(calc(var(--_w) - var(--_hh))); background: var(--lx-ink); box-shadow: 0 0 0 2px var(--mn-surface); }
  .mn-slider { --_track: 6px; --_thumb: 1rem; }
  .mn-slider::-webkit-slider-runnable-track { border-radius: 0; box-shadow: inset 0 0 0 1px var(--lx-ink); background: var(--lx-hatch-2) 0 0 / var(--_v) 100% no-repeat, var(--mn-surface); }
  .mn-slider::-moz-range-track { border-radius: 0; box-shadow: inset 0 0 0 1px var(--lx-ink); background: var(--mn-surface); }
  .mn-slider::-moz-range-progress { border-radius: 0; background: var(--lx-hatch-2); }
  .mn-slider::-webkit-slider-thumb { border-radius: 1px; border: 1px solid var(--lx-ink); background: var(--mn-surface); box-shadow: none; }
  .mn-slider::-moz-range-thumb { border-radius: 1px; border: 1px solid var(--lx-ink); background: var(--mn-surface); box-shadow: none; }

  /* Cards: a hairline frame and a hatched rule under the heading. */
  .mn-card { box-shadow: none; border-color: color-mix(in oklab, var(--lx-ink) 35%, var(--mn-border)); }
  .mn-card-header { padding-bottom: 1rem; margin-bottom: .25rem; background: var(--lx-hatch) left bottom / 100% 5px no-repeat; }
  .mn-card-title { font-size: 1.2rem; }
  .mn-card-footer-bordered { background: none; }
  .mn-stat-value { font-family: var(--mn-font-heading); font-weight: 400; }

  .mn-table th, .mn-table td { border-bottom-color: color-mix(in oklab, var(--lx-ink) 22%, transparent); }
  .mn-table thead th { background: none; font-weight: 500; border-bottom: 1px solid var(--lx-ink); }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--lx-ink) 4%, transparent); }
  .mn-table-hover tbody tr:hover > :first-child { background: var(--lx-hatch) left / 5px 100% no-repeat; }

  .mn-badge { background: var(--mn-surface); color: var(--_ct, var(--lx-ink)); border: 1px solid currentColor; font-weight: 500; }
  .mn-badge-soft { background: var(--mn-surface-2); border-color: transparent; }
  .mn-chip { background: var(--mn-surface); border-color: var(--mn-input); }
  .mn-kbd { box-shadow: 0 1px 0 var(--lx-ink); }

  /* Tabs: the current tab is underlined with a hatched band. */
  .mn-tab-list { border-bottom-color: var(--lx-ink); }
  .mn-tab { font-weight: 500; }
  .mn-tab::after { inset-inline: 0; height: 6px; bottom: 0; border-radius: 0; }
  .mn-tab[aria-selected="true"]::after { background: var(--lx-hatch-2); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { border: 1px solid var(--lx-ink); background: var(--mn-surface); padding: 2px; }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-surface) var(--lx-hatch); box-shadow: inset 0 0 0 1px var(--lx-ink); text-shadow: 0 0 3px var(--mn-surface), 0 0 3px var(--mn-surface), 0 0 2px var(--mn-surface); color: var(--lx-ink); }

  /* Progress: a hairline box filled with dense hatching that is drawn along. */
  .mn-progress { height: .6rem; border-radius: 0; background: var(--mn-surface); box-shadow: inset 0 0 0 1px var(--lx-ink); }
  .mn-progress::after { border-radius: 0; background: var(--lx-hatch-2); }
  .mn-progress[aria-valuenow]::after { animation: longxu-pull 1.2s linear infinite; }
  .mn-progress:not([aria-valuenow])::after { animation: mn-indeterminate 1.4s var(--mn-ease) infinite, longxu-pull 1.2s linear infinite; }
  .mn-radial { --_t: .45rem; background: conic-gradient(transparent calc(var(--_v) * 1%), color-mix(in srgb, var(--mn-card) 82%, transparent) 0), repeating-conic-gradient(from 0deg, var(--_c, var(--lx-ink)) 0 2deg, transparent 2deg 5deg); }
  .mn-radial::before { background: var(--mn-card); }
  /* Spinner: a hatched ring turning. */
  .mn-spinner { border: 0; background: repeating-conic-gradient(var(--_c, currentColor) 0 3deg, transparent 3deg 12deg); -webkit-mask: radial-gradient(closest-side, transparent 58%, #000 61%); mask: radial-gradient(closest-side, transparent 58%, #000 61%); animation: longxu-spin 1.4s linear infinite; }

  .mn-alert { background: var(--mn-surface); border-color: var(--_a); border-width: 1px 1px 1px 6px; border-image: none; box-shadow: none; }
  .mn-avatar { box-shadow: inset 0 0 0 1px var(--lx-ink); }
  .mn-step::before { border-width: 1px; border-color: var(--lx-ink); font-family: var(--mn-font-heading); }
  .mn-step[data-state="complete"]::before { background: var(--mn-surface) var(--lx-hatch-2); color: var(--lx-ink); border-color: var(--lx-ink); }
  .mn-step + .mn-step::after { height: 1px; background: var(--lx-ink); }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast { border-color: var(--lx-ink); box-shadow: 5px 5px 0 -1px var(--mn-bg), 5px 5px 0 0 var(--lx-ink); }
  .mn-page[aria-current="page"] { background: var(--mn-surface) var(--lx-hatch); border-color: var(--lx-ink); box-shadow: none; }

  /* Charts: hatched columns; the highlighted one cross-hatched. */
  .mn-chart-bars { background: none; }
  .mn-bar::before { background: var(--lx-hatch); box-shadow: inset 0 0 0 1px var(--lx-ink); }
  .mn-bar.mn-hl::before, .mn-bar:hover::before { background: var(--lx-cross); }
  .mn-bar[data-value]::after { border-radius: 0; }
  .mn-legend li::before { border-radius: 0; background: var(--lx-hatch-2); box-shadow: inset 0 0 0 1px var(--lx-ink); }
  .mn-legend li:nth-child(2)::before { background: var(--lx-cross); }
  .mn-donut { --thick: 24%; }
}}

/* ── MISUA ─────────────────────────────────────────────────────────────────
   Misua (mee sua): hair-fine wheat threads eaten on birthdays for long life —
   the longer and more unbroken, the better. A thread-thin system where long,
   unbroken 1px lines run through and between components (list items, steps
   and tabs strung on one thread), drawn slowly from start to end, with a red
   longevity thread for progress, selection and focus. */
@keyframes misua-in { from { opacity: 0; } }
@keyframes misua-draw { from { transform: scaleX(0); } }
@keyframes misua-draw-y { from { transform: scaleY(0); } }
@keyframes misua-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="misua"]) to ([data-noodle]:not([data-noodle="misua"])) {
  :scope {
    --mn-enter: misua-in; --mn-enter-duration: 500ms; --mn-ease-enter: cubic-bezier(.4, 0, .2, 1);
    --mn-duration: 240ms; --mn-spring: cubic-bezier(.4, 0, .2, 1);
    --ms-red: var(--mn-accent);
    --ms-thread: color-mix(in oklab, var(--mn-fg) 22%, transparent);
    --mn-focus: 0 0 0 3px var(--mn-bg), 0 0 0 4px var(--ms-red);
    --mn-bar-radius: 0; --mn-bar-gap: 12px; --mn-line-width: 1px; --mn-area-opacity: 0; --mn-point-opacity: 1;
    --mn-series-1: var(--mn-fg); --mn-series-2: var(--ms-red);
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3) { font-weight: 400; letter-spacing: -.01em; }

  /* Buttons: a single thread outline; the default one is ink. */
  .mn-btn { box-shadow: none; font-weight: 400; letter-spacing: .03em; border-width: 1px; }
  .mn-btn:active { transform: none; opacity: .7; }
  .mn-btn-outline { --_bd: var(--_c, var(--mn-fg)); }
  .mn-btn-outline:hover { --_bg: transparent; box-shadow: inset 0 -1px 0 var(--ms-red); }
  .mn-btn-soft { --_bg: transparent; border-color: var(--ms-thread); }
  .mn-btn-link { text-decoration: underline; text-decoration-color: var(--ms-red); text-decoration-thickness: 1px; text-underline-offset: 5px; }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { box-shadow: none; border-color: var(--ms-thread); background-color: transparent; }
  .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(--ms-red); box-shadow: none; }
  .mn-input-group > .mn-input { border: 0; }
  .mn-checkbox, .mn-radio { border-width: 1px; box-shadow: none; }
  /* Switch: a bead strung on a red thread. */
  .mn-switch { --_w: 2.6rem; --_hh: 1rem; background: linear-gradient(var(--ms-thread), var(--ms-thread)) center / 100% 1px no-repeat; }
  .mn-switch::before { width: .7rem; height: .7rem; top: 50%; margin-top: -.35rem; background: var(--mn-bg); border: 1px solid var(--mn-fg); box-shadow: none; }
  .mn-switch:checked { background: linear-gradient(var(--_on), var(--_on)) center / 100% 1px no-repeat; }
  .mn-switch:checked::before { transform: translateX(calc(2.6rem - .7rem)); background: var(--_on); border-color: var(--_on); }
  .mn-switch { --_on: var(--_c, var(--ms-red)); }
  .mn-slider { --_track: 1px; --_thumb: .75rem; --_on: var(--_c, var(--ms-red)); }
  .mn-slider::-webkit-slider-runnable-track { box-shadow: none; background: linear-gradient(to right, var(--_on) var(--_v), var(--ms-thread) var(--_v)); }
  .mn-slider::-moz-range-track { box-shadow: none; background: var(--ms-thread); }
  .mn-slider::-webkit-slider-thumb { border: 1px solid var(--_on); background: var(--mn-bg); box-shadow: none; }
  .mn-slider::-moz-range-thumb { border: 1px solid var(--_on); background: var(--mn-bg); box-shadow: none; }

  .mn-card, .mn-table-wrap, .mn-stats { box-shadow: none; border-color: var(--ms-thread); }
  .mn-card-title { font-weight: 400; font-size: 1.125rem; }
  .mn-card-header { position: relative; padding-bottom: 1rem; margin-bottom: .25rem; }
  .mn-card-header::after { content: ""; position: absolute; left: 1.25rem; right: 0; bottom: 0; height: 1px; background: var(--ms-thread); transform-origin: left; animation: misua-draw 900ms var(--mn-spring) both; }
  .mn-card-footer-bordered { background: none; border-color: var(--ms-thread); }

  /* Lists: items strung on one vertical thread. */
  .mn-list { border-color: var(--ms-thread); }
  .mn-list > li { position: relative; padding-inline-start: 1.75rem; }
  .mn-list > li + li { border-top-color: var(--ms-thread); }
  .mn-list > li::before { content: ""; position: absolute; left: .85rem; top: 0; bottom: 0; width: 1px; background: var(--ms-thread); transform-origin: top; animation: misua-draw-y 700ms var(--mn-spring) both; }
  .mn-list > li::after { content: ""; position: absolute; left: calc(.85rem - 2.5px); top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--mn-bg); box-shadow: inset 0 0 0 1px var(--mn-fg); }

  .mn-table th, .mn-table td { border-bottom-color: var(--ms-thread); padding-block: .8rem; }
  .mn-table thead th { background: none; font-weight: 400; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; border-bottom-color: var(--mn-fg); }
  .mn-table-hover tbody tr:hover { background: none; box-shadow: inset 0 -1px 0 var(--ms-red); }

  .mn-badge { background: transparent; color: var(--_ct, var(--mn-fg)); border: 1px solid currentColor; font-weight: 400; letter-spacing: .04em; }
  .mn-badge-soft { border-color: var(--ms-thread); }
  .mn-chip { background: transparent; border-color: var(--ms-thread); }

  /* Tabs: one continuous thread; the current segment turns red. */
  .mn-tab-list { border-bottom: 1px solid var(--ms-thread); }
  .mn-tab { font-weight: 400; letter-spacing: .02em; }
  .mn-tab::after { inset-inline: 0; height: 1px; border-radius: 0; transform-origin: left; }
  .mn-tab[aria-selected="true"]::after { background: var(--ms-red); animation: misua-draw 400ms var(--mn-spring); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { background: none; border: 1px solid var(--ms-thread); padding: 2px; }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: none; box-shadow: inset 0 0 0 1px var(--ms-red); color: var(--mn-fg); }

  /* Progress: a thread with a bead travelling along it. */
  .mn-progress { height: 7px; overflow: hidden; box-shadow: none; background: linear-gradient(var(--ms-thread), var(--ms-thread)) center / 100% 1px no-repeat; border-radius: 0; }
  .mn-progress::after { border-radius: 0; background: radial-gradient(circle at calc(100% - 3.5px) 50%, var(--_c, var(--ms-red)) 2.5px, transparent 3px), linear-gradient(var(--_c, var(--ms-red)), var(--_c, var(--ms-red))) center / calc(100% - 3.5px) 1px no-repeat; background-repeat: no-repeat; }
  .mn-radial { --_t: 1px; font-weight: 300; background: conic-gradient(var(--_c, var(--ms-red)) calc(var(--_v) * 1%), var(--ms-thread) 0); }
  /* Spinner: a thread wound round a bead. */
  .mn-spinner { border: 1px solid var(--ms-thread); border-top-color: var(--_c, var(--ms-red)); animation: misua-spin 1.4s linear infinite; }

  .mn-alert { border-width: 0 0 0 1px; border-radius: 0; background: none; border-color: var(--_a); }
  .mn-avatar { box-shadow: 0 0 0 1px var(--mn-bg), 0 0 0 2px var(--ms-thread); }
  /* Steps strung on one thread. */
  .mn-step::before { border-width: 1px; font-weight: 400; background: var(--mn-bg); }
  .mn-step[aria-current="step"]::before { border-color: var(--ms-red); box-shadow: none; }
  .mn-step + .mn-step::after { height: 1px; background: var(--ms-thread); transform-origin: left; }
  .mn-step[data-state="complete"] + .mn-step::after { background: var(--ms-red); animation: misua-draw 700ms var(--mn-spring) both; }
  .mn-steps-vertical .mn-step + .mn-step::after { width: 1px; }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast { border-color: var(--ms-thread); box-shadow: 0 16px 40px -24px rgb(0 0 0 / .3); }
  .mn-page[aria-current="page"] { box-shadow: none; border-color: transparent; border-bottom-color: var(--ms-red); border-radius: 0; }
  .mn-divider::before, .mn-divider::after { background: var(--ms-thread); }

  /* Charts: bars are single threads topped with a bead. */
  .mn-bar::before { width: 7px; margin-inline: auto; background: radial-gradient(circle at 50% 3.5px, var(--_b, var(--mn-fg)) 2.5px, transparent 3px) no-repeat, linear-gradient(var(--_bl, var(--ms-thread)), var(--_bl, var(--ms-thread))) 50% 0 / 1px 100% no-repeat; }
  .mn-bar.mn-hl::before, .mn-bar:hover::before { --_b: var(--ms-red); --_bl: var(--ms-red); }
  .mn-chart-h .mn-bar::before { width: calc(var(--v, 0) / var(--max) * 100%); height: 7px; margin: 0; background: radial-gradient(circle at calc(100% - 3.5px) 50%, var(--_b, var(--mn-fg)) 2.5px, transparent 3px) no-repeat, linear-gradient(var(--_bl, var(--ms-thread)), var(--_bl, var(--ms-thread))) 0 50% / 100% 1px no-repeat; }
  .mn-chart-line .mn-point { r: 2.5; }
  .mn-donut { --thick: 3px; }
}}

/* ── BÚN ───────────────────────────────────────────────────────────────────
   Thread-thin rice vermicelli, served in little nests, lightly tangled.
   Fine double-thread outlines, concentric rings on focus and on avatars,
   looping thread dividers, beads on threads, nested spinning rings. */
@keyframes bun-in { from { opacity: 0; transform: rotate(-3deg) scale(.96); } }
@keyframes bun-nest { from { box-shadow: 0 0 0 0 var(--mn-bg), 0 0 0 0 var(--mn-ring), 0 0 0 0 var(--mn-bg), 0 0 0 0 var(--mn-ring); } }
@keyframes bun-spin { to { transform: rotate(360deg); } }
@keyframes bun-spin-r { to { transform: rotate(-360deg); } }

@layer mian.noodles { @scope ([data-noodle="bun"]) to ([data-noodle]:not([data-noodle="bun"])) {
  :scope {
    --mn-enter: bun-in; --mn-enter-duration: 220ms; --mn-ease-enter: cubic-bezier(.2, .8, .2, 1);
    --mn-duration: 170ms;
    --b-thread: 0 0 0 1px var(--mn-border), 0 0 0 4px var(--mn-bg), 0 0 0 5px var(--mn-border);
    --b-nest: 0 0 0 2px var(--mn-bg), 0 0 0 3px var(--mn-ring), 0 0 0 5px var(--mn-bg), 0 0 0 6px color-mix(in oklab, var(--mn-ring) 45%, transparent);
    --mn-focus: var(--b-nest);
    --mn-bar-radius: 999px; --mn-bar-gap: 14px; --mn-line-width: 1.5px; --mn-area-opacity: .06; --mn-point-opacity: 1;
  }
  :where([class*="mn-"]):focus-visible { animation: bun-nest 260ms ease-out; }

  /* Buttons: small pills tied with a thread that loosens on hover. */
  .mn-btn { border-radius: 999px; box-shadow: 0 0 0 2px var(--mn-bg), 0 0 0 3px color-mix(in oklab, var(--_c, var(--mn-primary)) 50%, transparent); transition: box-shadow 220ms var(--mn-ease), background-color var(--mn-duration); font-weight: 500; }
  .mn-btn:hover { box-shadow: 0 0 0 4px var(--mn-bg), 0 0 0 5px color-mix(in oklab, var(--_c, var(--mn-primary)) 60%, transparent), 0 0 0 7px var(--mn-bg), 0 0 0 8px color-mix(in oklab, var(--_c, var(--mn-primary)) 25%, transparent); }
  .mn-btn:active { transform: scale(.97); box-shadow: 0 0 0 1px var(--mn-bg), 0 0 0 2px var(--_c, var(--mn-primary)); }
  .mn-btn-outline { border-width: 1px; box-shadow: 0 0 0 2px var(--mn-bg), 0 0 0 3px var(--mn-border); }
  .mn-btn-ghost, .mn-btn-link { box-shadow: none; }
  .mn-btn-ghost:hover, .mn-btn-link:hover { box-shadow: none; }
  .mn-btn-group > .mn-btn { box-shadow: none; }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { border-radius: 999px; border-width: 1px; box-shadow: 0 0 0 3px var(--mn-bg), 0 0 0 4px var(--mn-border); }
  .mn-textarea { border-radius: 18px; }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within, .mn-number:focus-within, .mn-otp > input:focus { box-shadow: var(--b-nest); animation: bun-nest 260ms ease-out; border-color: var(--mn-ring); }
  .mn-input-group > .mn-input { box-shadow: none; animation: none; }
  .mn-otp > input { border-radius: 50%; }
  .mn-checkbox, .mn-radio { border-radius: 50%; border-width: 1px; box-shadow: 0 0 0 2px var(--mn-bg), 0 0 0 3px var(--mn-border); }
  /* Switch: a hollow bead on a thread. */
  .mn-switch { --_w: 2.6rem; --_hh: 1.15rem; background: linear-gradient(var(--mn-input), var(--mn-input)) center / 100% 1.5px no-repeat; }
  .mn-switch::before { background: var(--mn-bg); border: 1.5px solid var(--mn-muted); box-shadow: 0 0 0 3px var(--mn-bg), 0 0 0 4px var(--mn-border); }
  .mn-switch:checked { background: linear-gradient(var(--_on), var(--_on)) center / 100% 1.5px no-repeat; }
  .mn-switch:checked::before { background: var(--_on); border-color: var(--_on); box-shadow: 0 0 0 3px var(--mn-bg), 0 0 0 4px var(--_on); }
  .mn-slider { --_track: 2px; --_thumb: 1rem; }
  .mn-slider::-webkit-slider-thumb { border-width: 1.5px; box-shadow: 0 0 0 3px var(--mn-bg), 0 0 0 4px var(--_on); }
  .mn-slider::-moz-range-thumb { border-width: 1.5px; box-shadow: 0 0 0 3px var(--mn-bg), 0 0 0 4px var(--_on); }

  .mn-card, .mn-table-wrap, .mn-list, .mn-accordion, .mn-stats, .mn-alert, .mn-collapse { box-shadow: 0 0 0 4px var(--mn-bg), 0 0 0 5px var(--mn-border); }
  .mn-card { border-width: 1px; }
  .mn-card-header { border-bottom: 1px dashed var(--mn-border); padding-bottom: 1rem; }
  .mn-card-footer-bordered { background: none; border-top-style: dashed; }

  .mn-table thead th { background: none; border-bottom: 3px double var(--mn-border); font-weight: 500; }
  .mn-table td { border-bottom-style: dotted; }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--mn-primary) 5%, transparent); }

  .mn-badge { background: transparent; color: var(--_ct, var(--mn-primary-text)); border: 1px solid currentColor; box-shadow: 0 0 0 2px var(--mn-bg), 0 0 0 3px color-mix(in oklab, currentColor 30%, transparent); }
  .mn-badge-soft { background: color-mix(in oklab, var(--_c, var(--mn-primary)) 10%, transparent); }
  .mn-chip { border-radius: 999px; box-shadow: 0 0 0 2px var(--mn-bg), 0 0 0 3px var(--mn-border); background: transparent; }
  .mn-tab-list { border-bottom: 1px dashed var(--mn-border); }
  .mn-tab { font-weight: 450; }
  .mn-tab::after { height: 5px; bottom: -3px; border-radius: 999px; background: none; }
  .mn-tab[aria-selected="true"]::after { background: radial-gradient(circle, var(--mn-primary) 2.5px, transparent 3px) center / 10px 5px repeat-x; }
  .mn-tabs-boxed .mn-tab-list { border-radius: 999px; background: none; box-shadow: 0 0 0 1px var(--mn-border), 0 0 0 4px var(--mn-bg), 0 0 0 5px var(--mn-border); }
  .mn-tabs-boxed .mn-tab { border-radius: 999px; }
  .mn-tabs-boxed .mn-tab[aria-selected="true"] { box-shadow: 0 0 0 1px var(--mn-primary); background: none; color: var(--mn-primary-text); }
  .mn-toggle-group { border-radius: 999px; background: none; box-shadow: 0 0 0 1px var(--mn-border); }
  .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 999px; }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { box-shadow: 0 0 0 1px var(--mn-primary); background: none; color: var(--mn-primary-text); }

  /* Progress: a thread with a bead at its end. */
  .mn-progress { height: 10px; background: linear-gradient(var(--mn-border), var(--mn-border)) center / 100% 1.5px no-repeat; box-shadow: none; overflow: visible; }
  .mn-progress::after { background: radial-gradient(circle at calc(100% - 5px) 50%, var(--_p) 4px, transparent 4.5px), linear-gradient(var(--_p), var(--_p)) center / calc(100% - 5px) 2px no-repeat; background-repeat: no-repeat; border-radius: 0; }
  .mn-radial { --_t: .3rem; box-shadow: 0 0 0 3px var(--mn-bg), 0 0 0 4px var(--mn-border); }
  /* Spinner: two nested rings turning opposite ways. */
  .mn-spinner { border-width: 1.5px; position: relative; animation: bun-spin 1s linear infinite; }
  .mn-spinner::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1.5px solid transparent; border-bottom-color: var(--_c, currentColor); animation: bun-spin-r .7s linear infinite; }
  .mn-alert { border-width: 1px; }
  .mn-avatar { box-shadow: 0 0 0 2px var(--mn-bg), 0 0 0 3px var(--mn-border), 0 0 0 5px var(--mn-bg), 0 0 0 6px color-mix(in oklab, var(--mn-border) 60%, transparent); }
  .mn-avatar-group > .mn-avatar { box-shadow: 0 0 0 2px var(--mn-bg), 0 0 0 3px var(--mn-border); }
  .mn-step::before { border-width: 1px; box-shadow: 0 0 0 3px var(--mn-bg), 0 0 0 4px var(--mn-border); }
  .mn-step + .mn-step::after { height: 0; border-top: 1.5px dashed var(--mn-border); background: none; }
  .mn-step[data-state="complete"] + .mn-step::after { border-top-color: var(--mn-primary); background: none; }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast { box-shadow: 0 0 0 4px var(--mn-bg), 0 0 0 5px var(--mn-border), 0 20px 40px -20px rgb(0 0 0 / .3); }
  .mn-menu-item, .mn-page { border-radius: 999px; }
  .mn-page[aria-current="page"] { box-shadow: 0 0 0 2px var(--mn-bg), 0 0 0 3px var(--mn-primary); }
  .mn-divider::before, .mn-divider::after { height: 4px; background: radial-gradient(ellipse 5px 2px at 50% 50%, transparent 60%, var(--mn-border) 65% 85%, transparent 90%) 0 0 / 9px 4px repeat-x; }

  /* Charts: threads topped with a little nest. */
  .mn-bar { align-items: center; }
  .mn-bar::before { width: 3px; background: var(--mn-border); position: relative; }
  .mn-bar.mn-hl::before, .mn-bar:hover::before { background: var(--mn-series-1); box-shadow: 0 -6px 0 3px var(--mn-bg), 0 -6px 0 4px var(--mn-series-1); }
  .mn-bar:not(.mn-hl)::before { box-shadow: 0 -4px 0 2px var(--mn-bg), 0 -4px 0 3px var(--mn-muted); }
  .mn-chart-h .mn-bar::before { width: auto; height: 3px; }
  .mn-chart-line .mn-line { filter: drop-shadow(0 3px 0 color-mix(in oklab, var(--mn-series-1) 35%, transparent)) drop-shadow(0 -3px 0 color-mix(in oklab, var(--mn-series-1) 20%, transparent)); }
  .mn-donut { --thick: 6px; box-shadow: 0 0 0 5px var(--mn-bg), 0 0 0 6px var(--mn-border); }
}}

/* ── KUZUKIRI ──────────────────────────────────────────────────────────────
   Kyoto's clear kudzu noodles, served in ice water with black sugar syrup.
   Mian in glass: black and white, 1px edges and clear type, but every
   surface is a sheet of clear, cold glass over a pale backdrop, with a
   bright hairline along its top edge. The only colour is the dark syrup. */
@keyframes kuzukiri-in { from { opacity: 0; transform: translateY(4px); filter: blur(4px); } }
@keyframes kuzukiri-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="kuzukiri"]) to ([data-noodle]:not([data-noodle="kuzukiri"])) {
  :scope {
    --mn-enter: kuzukiri-in; --mn-enter-duration: 260ms; --mn-ease-enter: cubic-bezier(.2, 0, 0, 1);
    --mn-duration: 160ms; --mn-spring: cubic-bezier(.2, 0, 0, 1);
    --kz-glass: light-dark(color-mix(in srgb, #fff 58%, transparent), color-mix(in srgb, #1a1d22 52%, transparent));
    --kz-glass-hi: light-dark(color-mix(in srgb, #fff 78%, transparent), color-mix(in srgb, #23272d 72%, transparent));
    --kz-blur: blur(20px) saturate(1.2);
    --kz-edge: inset 0 1px 0 light-dark(rgb(255 255 255 / .95), rgb(255 255 255 / .12)), 0 0 0 1px light-dark(rgb(10 10 10 / .07), rgb(255 255 255 / .08));
    --kz-float: 0 12px 32px -16px light-dark(rgb(10 20 30 / .25), rgb(0 0 0 / .7));
    --mn-card: var(--kz-glass); --mn-popover: var(--kz-glass-hi);
    --mn-focus: 0 0 0 2px light-dark(rgb(255 255 255 / .8), rgb(0 0 0 / .6)), 0 0 0 4px color-mix(in oklab, var(--mn-ring) 60%, 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 srgb, var(--mn-fg) 14%, transparent); --mn-bar-fill-hl: var(--mn-fg);
    --mn-series-1: var(--mn-fg); --mn-series-2: var(--mn-accent);
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3) { letter-spacing: -.035em; }

  /* Every surface is clear glass with a bright top edge. */
  .mn-card, .mn-table-wrap, .mn-list, .mn-accordion, .mn-stats, .mn-alert, .mn-collapse, .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer {
    border-color: transparent; background-color: var(--mn-card);
    -webkit-backdrop-filter: var(--kz-blur); backdrop-filter: var(--kz-blur);
    box-shadow: var(--kz-edge);
  }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { background-color: var(--mn-popover); box-shadow: var(--kz-edge), var(--kz-float); }
  a.mn-card:hover, .mn-card-interactive:hover { background-color: var(--kz-glass-hi); box-shadow: var(--kz-edge), var(--kz-float); }

  /* Buttons: solid ink, or a glass pane with a hairline. */
  .mn-btn { box-shadow: none; font-weight: 500; }
  .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, .mn-btn-soft { --_bg: var(--kz-glass); --_bd: transparent; --_fg: var(--_ct, var(--mn-fg)); -webkit-backdrop-filter: var(--kz-blur); backdrop-filter: var(--kz-blur); box-shadow: var(--kz-edge); }
  .mn-btn-outline:hover, .mn-btn-soft:hover { --_bg: var(--kz-glass-hi); }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input {
    border-color: transparent; background-color: var(--kz-glass); box-shadow: var(--kz-edge);
    -webkit-backdrop-filter: var(--kz-blur); backdrop-filter: var(--kz-blur);
  }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within, .mn-number:focus-within, .mn-otp > input:focus { border-color: transparent; background-color: var(--kz-glass-hi); box-shadow: inset 0 0 0 1px var(--mn-fg), 0 0 0 3px color-mix(in oklab, var(--mn-fg) 10%, transparent); }
  .mn-input-group > .mn-input { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mn-addon { background: transparent; border: 0 !important; }
  .mn-checkbox, .mn-radio { border-color: color-mix(in oklab, var(--mn-fg) 30%, transparent); background-color: var(--kz-glass); box-shadow: none; }
  .mn-checkbox { border-radius: 5px; }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); border-color: var(--_on); }
  .mn-switch { --_w: 2.4rem; --_hh: 1.35rem; background: var(--kz-glass); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mn-fg) 16%, transparent); -webkit-backdrop-filter: var(--kz-blur); backdrop-filter: var(--kz-blur); }
  .mn-switch::before { box-shadow: 0 1px 3px rgb(0 0 0 / .2), inset 0 1px 0 #fff; }
  .mn-switch:checked { background: var(--_on); box-shadow: none; }
  .mn-slider { --_track: 4px; }
  .mn-slider::-webkit-slider-runnable-track { box-shadow: none; background: linear-gradient(to right, var(--_on) var(--_v), color-mix(in srgb, var(--mn-fg) 14%, transparent) var(--_v)); }
  .mn-slider::-moz-range-track { box-shadow: none; background: color-mix(in srgb, var(--mn-fg) 14%, transparent); }
  .mn-slider::-webkit-slider-thumb { border: 0; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .25), 0 0 0 1px rgb(0 0 0 / .06); }
  .mn-slider::-moz-range-thumb { border: 0; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .25); }

  .mn-card-title { font-weight: 600; letter-spacing: -.02em; }
  .mn-card-footer-bordered { border-top-color: color-mix(in oklab, var(--mn-fg) 8%, transparent); background: color-mix(in srgb, var(--mn-surface) 30%, transparent); }
  .mn-list > li + li, .mn-accordion > details + details { border-top-color: color-mix(in oklab, var(--mn-fg) 8%, transparent); }
  .mn-stats > .mn-stat + .mn-stat { border-inline-start-color: color-mix(in oklab, var(--mn-fg) 8%, transparent); }
  .mn-stat-value { letter-spacing: -.04em; font-weight: 600; }

  .mn-table th, .mn-table td { border-bottom-color: color-mix(in oklab, var(--mn-fg) 8%, transparent); }
  .mn-table thead th { background: color-mix(in srgb, var(--mn-surface) 35%, transparent); font-size: .75rem; }
  .mn-table-hover tbody tr:hover { background: color-mix(in srgb, var(--mn-surface) 45%, transparent); }

  .mn-badge { font-weight: 500; }
  .mn-badge-soft, .mn-badge-outline { background: var(--kz-glass); border-color: color-mix(in oklab, var(--mn-fg) 12%, transparent); color: var(--_ct, var(--mn-fg)); }
  .mn-chip, .mn-kbd { background: var(--kz-glass); border-color: color-mix(in oklab, var(--mn-fg) 12%, transparent); box-shadow: none; }

  .mn-tab-list { border-bottom-color: color-mix(in oklab, var(--mn-fg) 10%, transparent); }
  .mn-tab { font-weight: 500; }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { background: var(--kz-glass); border: 0; box-shadow: var(--kz-edge); -webkit-backdrop-filter: var(--kz-blur); backdrop-filter: var(--kz-blur); }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-fg); color: var(--mn-bg); box-shadow: none; }

  .mn-progress { height: 5px; box-shadow: none; background: color-mix(in srgb, var(--mn-fg) 12%, transparent); }
  .mn-radial { --_t: .3rem; background: conic-gradient(var(--_c, var(--mn-fg)) calc(var(--_v) * 1%), color-mix(in srgb, var(--mn-fg) 12%, transparent) 0); }
  .mn-radial::before { background: var(--kz-glass-hi); }
  .mn-spinner { border-width: 1.5px; border-color: color-mix(in srgb, var(--_c, currentColor) 18%, transparent); border-top-color: var(--_c, currentColor); animation: kuzukiri-spin .7s linear infinite; }

  .mn-alert { background-color: color-mix(in srgb, var(--_a) 7%, var(--kz-glass)); }
  .mn-avatar { box-shadow: var(--kz-edge); }
  .mn-step::before { background: var(--kz-glass); }
  .mn-page[aria-current="page"] { background: var(--mn-fg); color: var(--mn-bg); border-color: transparent; box-shadow: none; }
  .mn-modal::backdrop { background: color-mix(in srgb, #000 20%, transparent); backdrop-filter: blur(6px); }

  /* Charts: ink for what matters, frosted grey for the rest. */
  .mn-bar[data-value]::after { background: var(--mn-fg); color: var(--mn-bg); border-radius: 6px; }
  .mn-donut { --thick: 22%; }
}}

/* ── SOTANGHON ─────────────────────────────────────────────────────────────
   Filipino glass noodles: in the bowl you see the broth through them, not
   the noodle. Real transparency: surfaces are a third opaque, they blur and
   brighten what is behind them, a thin line of light runs along the top
   edge, and the page behind is part of the design. */
@keyframes sotanghon-in { from { opacity: 0; transform: translateY(6px) scale(.985); filter: blur(6px); } }
@keyframes sotanghon-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="sotanghon"]) to ([data-noodle]:not([data-noodle="sotanghon"])) {
  :scope {
    --mn-enter: sotanghon-in; --mn-enter-duration: 320ms; --mn-ease-enter: cubic-bezier(.16, 1, .3, 1);
    --mn-duration: 200ms; --mn-spring: cubic-bezier(.16, 1, .3, 1);
    --mn-surface-alpha: 34%; --mn-backdrop: blur(22px) saturate(1.7);
    --st-glass: color-mix(in srgb, var(--mn-surface) 34%, transparent);
    --st-glass-2: color-mix(in srgb, var(--mn-surface) 18%, transparent);
    --st-solid: color-mix(in srgb, var(--mn-surface) 68%, transparent);
    --st-edge: light-dark(rgb(255 255 255 / .7), rgb(255 255 255 / .14));
    --st-line: light-dark(rgb(15 23 42 / .1), rgb(255 255 255 / .1));
    --st-rim: inset 0 1px 0 var(--st-edge), inset 0 0 0 1px var(--st-line);
    --st-drop: 0 10px 30px -12px light-dark(rgb(15 23 42 / .28), rgb(0 0 0 / .7));
    --mn-popover: var(--st-solid);
    --mn-bar-radius: 6px; --mn-bar-gap: 7px; --mn-line-width: 2px; --mn-area-opacity: .16;
    --mn-bar-fill: color-mix(in srgb, var(--mn-fg) 16%, transparent); --mn-bar-fill-hl: var(--mn-fg);
    --mn-series-1: var(--mn-fg); --mn-series-2: var(--mn-accent);
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3, .mn-display) { letter-spacing: -.03em; }

  .mn-btn { box-shadow: none; font-weight: 600; }
  .mn-btn:active { transform: scale(.975); }
  .mn-btn-outline, .mn-btn-ghost, .mn-btn-soft { --_bd: transparent; background-color: var(--st-glass); box-shadow: var(--st-rim); -webkit-backdrop-filter: var(--mn-backdrop); backdrop-filter: var(--mn-backdrop); }
  .mn-btn-outline:hover, .mn-btn-ghost:hover, .mn-btn-soft:hover { background-color: var(--st-solid); }
  .mn-btn-link { background-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

  .mn-input, .mn-select, .mn-textarea, .mn-number, .mn-input-group { border-color: transparent; background-color: var(--st-glass-2); box-shadow: var(--st-rim); -webkit-backdrop-filter: var(--mn-backdrop); backdrop-filter: var(--mn-backdrop); }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within { border-color: transparent; background-color: var(--st-glass); box-shadow: var(--st-rim), 0 0 0 3px color-mix(in srgb, var(--mn-ring) 45%, transparent); }
  .mn-input-group > .mn-input { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mn-switch { background: color-mix(in srgb, var(--mn-fg) 22%, transparent); box-shadow: var(--st-rim); }
  .mn-switch:checked { background: var(--mn-fg); }
  .mn-switch:checked::before { background: var(--mn-bg); }
  .mn-checkbox, .mn-radio { border-color: color-mix(in srgb, var(--mn-fg) 45%, transparent); background-color: var(--st-glass-2); }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); border-color: var(--_on); }

  .mn-card, .mn-table-wrap, .mn-accordion, .mn-list, .mn-stats { border-color: transparent; background-color: var(--st-glass); box-shadow: var(--st-rim), var(--st-drop); -webkit-backdrop-filter: var(--mn-backdrop); backdrop-filter: var(--mn-backdrop); }
  .mn-card .mn-card, .mn-card .mn-stats, .mn-card .mn-table-wrap, .mn-card .mn-list { background-color: var(--st-glass-2); box-shadow: var(--st-rim); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mn-card-interactive:hover { background-color: var(--st-solid); }
  .mn-menu, .mn-popover, .mn-toast, .mn-combobox-list, .mn-modal, .mn-drawer, .mn-command-dialog { border-color: transparent; background-color: var(--st-solid); box-shadow: var(--st-rim), 0 24px 60px -16px light-dark(rgb(15 23 42 / .4), rgb(0 0 0 / .8)); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); }

  .mn-table thead th { background: color-mix(in srgb, var(--mn-fg) 5%, transparent); }
  .mn-table th, .mn-table td { border-bottom-color: var(--st-line); }
  .mn-table-hover tbody tr:hover { background: color-mix(in srgb, var(--mn-fg) 6%, transparent); }

  .mn-badge-outline { border-color: color-mix(in srgb, var(--mn-fg) 30%, transparent); }
  .mn-badge-soft { background-color: color-mix(in srgb, var(--_c, var(--mn-fg)) 16%, transparent); box-shadow: inset 0 1px 0 var(--st-edge); }
  .mn-chip { border-color: transparent; background-color: var(--st-glass); box-shadow: var(--st-rim); }

  .mn-tab-list { border-bottom-color: var(--st-line); }
  .mn-tab[aria-selected="true"]::after { background: var(--mn-fg); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { background: var(--st-glass-2); border-color: transparent; box-shadow: var(--st-rim); }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--st-solid); box-shadow: var(--st-rim); }

  .mn-progress { height: 8px; background: color-mix(in srgb, var(--mn-fg) 14%, transparent); box-shadow: var(--st-rim); }
  .mn-progress::after { background: var(--mn-fg); }
  .mn-spinner { border-width: 2.5px; border-color: color-mix(in srgb, var(--mn-fg) 18%, transparent); border-top-color: var(--mn-fg); animation: sotanghon-spin .8s linear infinite; }
  .mn-alert { border-color: transparent; background-color: var(--st-glass); box-shadow: var(--st-rim); -webkit-backdrop-filter: var(--mn-backdrop); backdrop-filter: var(--mn-backdrop); }
  .mn-divider, .mn-card-footer, .mn-card-header { border-color: var(--st-line); }
  .mn-bar::before { border-radius: 6px 6px 0 0; }
  @media (prefers-reduced-transparency: reduce) { :scope { --mn-surface-alpha: 94%; --st-glass: color-mix(in srgb, var(--mn-surface) 94%, transparent); --st-glass-2: color-mix(in srgb, var(--mn-surface) 88%, transparent); --st-solid: var(--mn-surface); } }
}}

/* ── HARUSAME ──────────────────────────────────────────────────────────────
   Glass noodles: clear, glossy, refractive. Frosted see-through surfaces,
   specular edge highlights, a sheen that sweeps across buttons, translucent
   overlapping chart layers, blur-in transitions. */
@keyframes harusame-in { from { opacity: 0; filter: blur(10px); transform: scale(.97); } }
@keyframes harusame-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="harusame"]) to ([data-noodle]:not([data-noodle="harusame"])) {
  :scope {
    --mn-enter: harusame-in; --mn-enter-duration: 240ms; --mn-ease-enter: cubic-bezier(.2, .8, .2, 1);
    --mn-duration: 180ms;
    --h-glass: color-mix(in srgb, var(--mn-surface) 55%, transparent);
    --h-edge: inset 0 1px 0 rgb(255 255 255 / .55), inset 0 -1px 0 rgb(255 255 255 / .08);
    --h-blur: blur(16px) saturate(1.5);
    --mn-bar-radius: 10px; --mn-bar-gap: 8px; --mn-line-width: 2.5px; --mn-area-opacity: .22; --mn-point-opacity: 1;
    --mn-bar-fill: color-mix(in oklab, var(--mn-series-1) 30%, transparent);
  }
  .mn-card, .mn-table-wrap, .mn-list, .mn-accordion, .mn-stats, .mn-alert, .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer, .mn-collapse {
    background: var(--h-glass); backdrop-filter: var(--h-blur); -webkit-backdrop-filter: var(--h-blur);
    border-color: color-mix(in srgb, var(--mn-fg) 12%, transparent);
    box-shadow: var(--h-edge), 0 18px 40px -20px rgb(0 0 0 / .35);
  }
  .mn-alert { background: color-mix(in oklab, var(--_a) 14%, transparent); }

  /* Buttons: glass with a sheen that sweeps across. */
  .mn-btn {
    overflow: hidden; isolation: isolate;
    --_bg: color-mix(in srgb, var(--_c, var(--mn-primary)) 94%, transparent);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-color: rgb(255 255 255 / .25);
    box-shadow: var(--h-edge), 0 6px 18px -8px color-mix(in srgb, var(--_c, var(--mn-primary)) 70%, transparent);
  }
  .mn-btn::before { content: ""; position: absolute; inset: -2px; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .45) 48%, transparent 64%); transform: translateX(-110%); transition: transform 650ms cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
  .mn-btn:hover::before { transform: translateX(110%); }
  .mn-btn:not(.mn-btn-outline, .mn-btn-soft, .mn-btn-ghost, .mn-btn-link):hover { --_bg: color-mix(in srgb, var(--_c, var(--mn-primary)) 100%, transparent); }
  .mn-btn-outline, .mn-btn-ghost { --_bg: color-mix(in srgb, var(--mn-surface) 40%, transparent); border-color: color-mix(in srgb, var(--mn-fg) 16%, transparent); box-shadow: var(--h-edge); }
  .mn-btn-outline:hover, .mn-btn-ghost:hover { --_bg: color-mix(in srgb, var(--mn-surface) 70%, transparent); }
  .mn-btn-ghost { --_bg: transparent; box-shadow: none; border-color: transparent; }
  .mn-btn-soft { --_bg: color-mix(in srgb, var(--_c, var(--mn-primary)) 16%, transparent); box-shadow: var(--h-edge); }
  .mn-btn-link { --_bg: transparent; box-shadow: none; border-color: transparent; }
  .mn-btn-link::before { display: none; }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input {
    background-color: color-mix(in srgb, var(--mn-surface) 45%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-color: color-mix(in srgb, var(--mn-fg) 14%, transparent); box-shadow: var(--h-edge);
  }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within, .mn-number:focus-within, .mn-otp > input:focus {
    background-color: color-mix(in srgb, var(--mn-surface) 75%, transparent); border-color: var(--mn-ring);
    box-shadow: var(--h-edge), 0 0 0 4px color-mix(in srgb, var(--mn-ring) 20%, transparent), 0 0 24px -4px color-mix(in srgb, var(--mn-ring) 55%, transparent);
  }
  .mn-input-group > .mn-input { backdrop-filter: none; background: transparent; box-shadow: none; }
  .mn-addon { background: color-mix(in srgb, var(--mn-surface-2) 50%, transparent); }
  .mn-checkbox, .mn-radio { background: color-mix(in srgb, var(--mn-surface) 40%, transparent); box-shadow: var(--h-edge); }
  /* Switch: a glass tube with a bubble. */
  .mn-switch { background: color-mix(in srgb, var(--mn-fg) 14%, transparent); box-shadow: inset 0 1px 3px rgb(0 0 0 / .2), var(--h-edge); }
  .mn-switch::before { background: radial-gradient(circle at 35% 30%, #fff 0 25%, rgb(255 255 255 / .75) 60%, rgb(255 255 255 / .55)); box-shadow: 0 2px 6px rgb(0 0 0 / .25), inset 0 -2px 3px rgb(0 0 0 / .08); }
  .mn-switch:checked { background: color-mix(in srgb, var(--_on) 75%, transparent); }
  .mn-switch:checked::before { background: radial-gradient(circle at 35% 30%, #fff 0 25%, rgb(255 255 255 / .8) 60%, rgb(255 255 255 / .6)); }
  .mn-slider::-webkit-slider-thumb { background: radial-gradient(circle at 35% 30%, #fff 0 30%, rgb(255 255 255 / .7)); border-color: color-mix(in srgb, var(--_on) 70%, transparent); }

  .mn-table thead th { background: color-mix(in srgb, var(--mn-surface) 35%, transparent); }
  .mn-table td, .mn-table th { border-bottom-color: color-mix(in srgb, var(--mn-fg) 9%, transparent); }
  .mn-table-hover tbody tr:hover { background: color-mix(in srgb, var(--mn-surface) 50%, transparent); }

  .mn-badge { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: var(--h-edge); background: color-mix(in srgb, var(--_c, var(--mn-primary)) 94%, transparent); }
  .mn-badge-soft { background: color-mix(in srgb, var(--_c, var(--mn-primary)) 16%, transparent); }
  .mn-badge-outline { background: color-mix(in srgb, var(--mn-surface) 30%, transparent); }
  .mn-chip { background: color-mix(in srgb, var(--mn-surface) 40%, transparent); backdrop-filter: blur(8px); box-shadow: var(--h-edge); border-color: color-mix(in srgb, var(--mn-fg) 12%, transparent); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { background: color-mix(in srgb, var(--mn-fg) 7%, transparent); box-shadow: inset 0 1px 2px rgb(0 0 0 / .08); }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: color-mix(in srgb, var(--mn-surface) 70%, transparent); box-shadow: var(--h-edge), 0 2px 8px rgb(0 0 0 / .12); backdrop-filter: blur(6px); }
  .mn-tab[aria-selected="true"]::after { background: var(--mn-primary); box-shadow: 0 0 10px var(--mn-primary); }

  /* Progress: a glass tube with a glowing fill. */
  .mn-progress { height: .65rem; background: color-mix(in srgb, var(--mn-fg) 10%, transparent); box-shadow: inset 0 1px 3px rgb(0 0 0 / .2), var(--h-edge); }
  .mn-progress::after { background: linear-gradient(180deg, color-mix(in srgb, var(--_p), #fff 35%), var(--_p) 60%); box-shadow: 0 0 12px var(--_p); }
  .mn-radial::before { background: color-mix(in srgb, var(--mn-bg) 70%, transparent); backdrop-filter: blur(6px); box-shadow: var(--h-edge); }
  .mn-spinner { border: 0; background: conic-gradient(from 0deg, transparent, var(--_c, var(--mn-primary))); -webkit-mask: radial-gradient(circle, transparent 55%, #000 57%); mask: radial-gradient(circle, transparent 55%, #000 57%); animation: harusame-spin .8s linear infinite; }
  .mn-avatar { box-shadow: var(--h-edge), 0 0 0 2px color-mix(in srgb, var(--mn-surface) 60%, transparent); }
  .mn-step::before { background: color-mix(in srgb, var(--mn-surface) 50%, transparent); backdrop-filter: blur(6px); }
  .mn-step[aria-current="step"]::before { box-shadow: 0 0 0 4px color-mix(in srgb, var(--mn-primary) 18%, transparent), 0 0 18px color-mix(in srgb, var(--mn-primary) 50%, transparent); }
  .mn-modal::backdrop, .mn-drawer::backdrop { backdrop-filter: blur(10px) saturate(1.3); background: color-mix(in srgb, #000 30%, transparent); }

  /* Charts: translucent glass bars with a specular top edge; glowing lines. */
  .mn-bar::before { backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), inset 0 0 0 1px color-mix(in srgb, var(--mn-series-1) 45%, transparent); }
  .mn-bar.mn-hl::before, .mn-bar:hover::before { background: color-mix(in srgb, var(--mn-series-1) 75%, transparent); box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 0 20px -2px var(--mn-series-1); }
  .mn-chart-line .mn-line { filter: drop-shadow(0 0 5px var(--mn-series-1)); }
  .mn-chart-line .mn-line.mn-s2 { filter: drop-shadow(0 0 5px var(--mn-series-2)); }
  .mn-donut { opacity: .9; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--mn-series-1) 40%, transparent)); }
}}
@layer mian.noodles { @scope ([data-noodle="harusame"]) to ([data-noodle]:not([data-noodle="harusame"])) {
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background: var(--_on); border-color: var(--_on); }
}}

/* ── FENSI ─────────────────────────────────────────────────────────────────
   Mung-bean noodles turn perfectly clear and glossy when cooked, slipping
   and bending like liquid. A liquid-glass system: thick, very clear capsules
   that saturate and brighten the colour behind them, a bright rim of light
   along the top edge and a softer one along the bottom (a lens), and shapes
   that swell and flow when touched. */
@keyframes fensi-in { 0% { opacity: 0; transform: scale(.9); filter: blur(6px); } 60% { opacity: 1; transform: scale(1.02); filter: blur(0); } 100% { transform: none; } }
@keyframes fensi-drop { 0%, 100% { border-radius: 50%; transform: rotate(0) scale(1); } 50% { border-radius: 42% 58% 55% 45% / 55% 45% 58% 42%; transform: rotate(180deg) scale(.9); } }

@layer mian.noodles { @scope ([data-noodle="fensi"]) to ([data-noodle]:not([data-noodle="fensi"])) {
  :scope {
    --mn-enter: fensi-in; --mn-enter-duration: 460ms; --mn-ease-enter: cubic-bezier(.3, 1.2, .4, 1);
    --mn-duration: 240ms; --mn-spring: cubic-bezier(.3, 1.4, .4, 1);
    --f-clear: light-dark(color-mix(in srgb, var(--mn-surface) 34%, transparent), color-mix(in srgb, var(--mn-surface) 22%, transparent));
    --f-blur: blur(14px) saturate(1.9) brightness(1.03);
    --f-rim-hi: light-dark(rgb(255 255 255 / .95), rgb(255 255 255 / .38));
    --f-rim-lo: light-dark(rgb(255 255 255 / .5), rgb(255 255 255 / .14));
    --f-lens: inset 0 1.5px 1px var(--f-rim-hi), inset 0 -1px 1px var(--f-rim-lo), inset 0 0 0 1px light-dark(rgb(255 255 255 / .45), rgb(255 255 255 / .1)), inset 0 12px 20px -14px var(--f-rim-hi);
    --f-drop: 0 10px 30px -12px light-dark(rgb(15 40 70 / .28), rgb(0 0 0 / .6));
    --mn-card: var(--f-clear); --mn-popover: color-mix(in srgb, var(--mn-surface) 60%, transparent);
    --mn-focus: 0 0 0 3px color-mix(in oklab, var(--mn-ring) 45%, transparent);
    --mn-bar-radius: 999px; --mn-bar-gap: 9px; --mn-line-width: 4px; --mn-area-opacity: .16; --mn-point-opacity: 0;
  }

  /* Every surface is clear glass with a lens rim. */
  .mn-card, .mn-table-wrap, .mn-list, .mn-accordion, .mn-stats, .mn-alert, .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer, .mn-collapse {
    border-color: transparent; background-color: var(--mn-card);
    -webkit-backdrop-filter: var(--f-blur); backdrop-filter: var(--f-blur);
    box-shadow: var(--f-lens), var(--f-drop);
  }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { background-color: var(--mn-popover); }
  .mn-card { border-radius: 28px; }

  /* Buttons: liquid capsules. Hover swells, press squashes and flows back. */
  .mn-btn {
    border: 0; border-radius: 999px; font-weight: 600;
    background: color-mix(in srgb, var(--_bg) 88%, transparent);
    -webkit-backdrop-filter: var(--f-blur); backdrop-filter: var(--f-blur);
    box-shadow: var(--f-lens), 0 6px 16px -8px color-mix(in oklab, var(--_c, var(--mn-primary)) 60%, transparent);
    transition: transform 420ms var(--mn-spring), box-shadow var(--mn-duration), background-color var(--mn-duration);
  }
  .mn-btn:hover { transform: scale(1.04); }
  .mn-btn:active { transform: scale(1.08, .92); transition-duration: 120ms; }
  .mn-btn-outline, .mn-btn-soft, .mn-btn-ghost { --_bg: var(--f-clear); --_fg: var(--_ct, var(--mn-fg)); box-shadow: var(--f-lens); }
  .mn-btn-outline:hover, .mn-btn-soft:hover { --_bg: color-mix(in srgb, var(--mn-surface) 55%, transparent); }
  .mn-btn-ghost { box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mn-btn-link { box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: none; }
  .mn-btn-link:hover, .mn-btn-ghost:hover { transform: none; }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input {
    border-color: transparent; background-color: var(--f-clear);
    -webkit-backdrop-filter: var(--f-blur); backdrop-filter: var(--f-blur);
    box-shadow: inset 0 2px 6px light-dark(rgb(15 40 70 / .12), rgb(0 0 0 / .4)), inset 0 -1px 0 var(--f-rim-hi);
  }
  .mn-textarea { border-radius: 22px; }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within, .mn-number:focus-within, .mn-otp > input:focus {
    border-color: transparent; background-color: color-mix(in srgb, var(--mn-surface) 60%, transparent);
    box-shadow: var(--f-lens), var(--mn-focus);
  }
  .mn-input-group > .mn-input { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mn-addon { background: transparent; border: 0 !important; }
  .mn-checkbox, .mn-radio { border: 0; background-color: var(--f-clear); box-shadow: inset 0 1px 3px light-dark(rgb(15 40 70 / .2), rgb(0 0 0 / .5)), inset 0 -1px 0 var(--f-rim-hi); }
  .mn-checkbox { border-radius: 8px; }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); box-shadow: var(--f-lens); }
  /* Switch: a glass drop that stretches as it slides. */
  .mn-switch { --_w: 3rem; --_hh: 1.7rem; --_k: calc(var(--_hh) - 6px); background: var(--f-clear); box-shadow: inset 0 2px 5px light-dark(rgb(15 40 70 / .18), rgb(0 0 0 / .5)), inset 0 -1px 0 var(--f-rim-hi); }
  .mn-switch::before { top: 3px; left: 3px; width: var(--_k); height: var(--_k); transform: none; background: light-dark(rgb(255 255 255 / .9), rgb(255 255 255 / .8)); box-shadow: var(--f-lens), 0 3px 8px rgb(0 0 0 / .2); transition: left 460ms var(--mn-spring), width 220ms var(--mn-spring); }
  .mn-switch:checked { background: color-mix(in srgb, var(--_on) 85%, transparent); box-shadow: var(--f-lens); }
  .mn-switch:checked::before { transform: none; left: calc(100% - var(--_k) - 3px); background: rgb(255 255 255 / .92); }
  .mn-switch:active::before { width: calc(var(--_k) + 8px); }
  .mn-switch:checked:active::before { left: calc(100% - var(--_k) - 11px); }
  .mn-slider { --_track: 8px; --_thumb: 1.5rem; }
  .mn-slider::-webkit-slider-runnable-track { box-shadow: inset 0 1px 3px rgb(0 0 0 / .18); background: linear-gradient(to right, var(--_on) var(--_v), var(--f-clear) var(--_v)); }
  .mn-slider::-moz-range-track { box-shadow: inset 0 1px 3px rgb(0 0 0 / .18); background: var(--f-clear); }
  .mn-slider::-webkit-slider-thumb { border: 0; width: 2.2rem; border-radius: 999px; background: rgb(255 255 255 / .75); box-shadow: var(--f-lens), 0 4px 10px rgb(0 0 0 / .2); transition: transform 380ms var(--mn-spring); }
  .mn-slider::-moz-range-thumb { border: 0; width: 2.2rem; border-radius: 999px; background: rgb(255 255 255 / .75); box-shadow: 0 4px 10px rgb(0 0 0 / .2); }
  .mn-slider:active::-webkit-slider-thumb { transform: scale(1.15, .9); }

  .mn-table { border-collapse: separate; border-spacing: 0; }
  .mn-table th, .mn-table td { border-bottom-color: light-dark(rgb(255 255 255 / .6), rgb(255 255 255 / .08)); }
  .mn-table thead th { background: light-dark(rgb(255 255 255 / .35), rgb(255 255 255 / .04)); }
  .mn-table-hover tbody tr:hover { background: light-dark(rgb(255 255 255 / .45), rgb(255 255 255 / .06)); }

  .mn-badge { border: 0; box-shadow: var(--f-lens); background: color-mix(in srgb, var(--_c, var(--mn-primary)) 95%, transparent); }
  .mn-badge-soft, .mn-badge-outline { background: var(--f-clear); color: var(--_ct, var(--mn-fg)); -webkit-backdrop-filter: var(--f-blur); backdrop-filter: var(--f-blur); }
  .mn-chip { border: 0; background: var(--f-clear); box-shadow: var(--f-lens); }
  .mn-kbd { border: 0; background: var(--f-clear); box-shadow: var(--f-lens); }

  /* Tabs: a glass lens slides behind the current tab. */
  .mn-tab-list { border-bottom: 0; isolation: isolate; padding: 4px; border-radius: 999px; background: var(--f-clear); -webkit-backdrop-filter: var(--f-blur); backdrop-filter: var(--f-blur); box-shadow: inset 0 1px 3px light-dark(rgb(15 40 70 / .15), rgb(0 0 0 / .5)); display: inline-flex; max-width: 100%; }
  .mn-tab { border-radius: 999px; height: calc(var(--mn-size-md) - 8px); background: transparent !important; box-shadow: none !important; }
  .mn-tab::after { display: none; }
  .mn-tab-list::after { content: ""; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: var(--_ix, 4px); width: var(--_iw, 0); border-radius: 999px; background: light-dark(rgb(255 255 255 / .78), rgb(255 255 255 / .16)); box-shadow: var(--f-lens), 0 4px 12px -4px rgb(0 0 0 / .2); transition: left 520ms var(--mn-spring), width 520ms var(--mn-spring); }
  .mn-tab[aria-selected="true"] { color: var(--mn-fg); }
  /* The lens is the selection, in pills too: keep the text colour (the pill guarantee sets on-primary text). */
  .mn-tabs-pills .mn-tab[aria-selected="true"] { color: var(--mn-fg) !important; }
  .mn-toggle-group { border: 0; border-radius: 999px; padding: 4px; background: var(--f-clear); box-shadow: inset 0 1px 3px light-dark(rgb(15 40 70 / .15), rgb(0 0 0 / .5)); }
  .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 999px; transition: background-color 300ms var(--mn-spring), transform 400ms var(--mn-spring); }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: light-dark(rgb(255 255 255 / .8), rgb(255 255 255 / .16)); box-shadow: var(--f-lens); color: var(--mn-fg); }

  /* Progress: a glass tube filling with coloured liquid. */
  .mn-progress { height: .75rem; background: var(--f-clear); box-shadow: inset 0 1px 3px light-dark(rgb(15 40 70 / .2), rgb(0 0 0 / .5)), inset 0 -1px 0 var(--f-rim-hi); }
  .mn-progress::after { background: linear-gradient(180deg, color-mix(in srgb, var(--_p), #fff 35%), var(--_p) 60%); box-shadow: var(--f-lens); }
  .mn-radial::before { background: light-dark(rgb(255 255 255 / .7), rgb(20 30 45 / .8)); box-shadow: var(--f-lens); }
  /* Spinner: a clear droplet that wobbles as it turns. */
  .mn-spinner { border: 0; background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .95) 0 12%, transparent 30%), color-mix(in srgb, var(--_c, var(--mn-primary)) 55%, transparent); box-shadow: var(--f-lens); animation: fensi-drop 1.6s ease-in-out infinite; }

  .mn-avatar { box-shadow: var(--f-lens); }
  .mn-step::before { border: 0; background: var(--f-clear); box-shadow: var(--f-lens); }
  .mn-step[data-state="complete"]::before { background: var(--mn-primary); }
  .mn-step + .mn-step::after { height: 6px; top: calc(1rem - 3px); border-radius: 6px; background: var(--f-clear); box-shadow: inset 0 1px 2px rgb(0 0 0 / .15); }
  .mn-menu-item { border-radius: 16px; }
  .mn-page { border-radius: 999px; }
  .mn-page[aria-current="page"] { border-color: transparent; background: light-dark(rgb(255 255 255 / .8), rgb(255 255 255 / .16)); box-shadow: var(--f-lens); }

  /* Charts: glass tubes of colour. */
  .mn-bar::before { background: linear-gradient(90deg, color-mix(in srgb, var(--mn-series-1) 45%, transparent), color-mix(in srgb, var(--mn-series-1) 25%, transparent)); box-shadow: var(--f-lens); }
  .mn-bar.mn-hl::before, .mn-bar:hover::before { background: linear-gradient(90deg, color-mix(in srgb, var(--mn-series-1), #fff 25%), var(--mn-series-1)); }
  .mn-chart-line .mn-line { filter: drop-shadow(0 4px 6px color-mix(in oklab, var(--mn-series-1) 40%, transparent)); }
  .mn-donut { --thick: 30%; filter: drop-shadow(0 6px 12px rgb(0 0 0 / .15)); }
}}

/* ── TOKOROTEN ─────────────────────────────────────────────────────────────
   Agar jelly pushed through a wooden press whose blades form a square
   grid, so it comes out as clear, square strands. A glass-tile system:
   frosted glass etched with a fine square grid (--tk-grid), small square
   corners, indicators that snap to the grid, mono labels, and components
   that slide out of their slot in one clean push. */
@keyframes tokoroten-in { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(-6px); } to { clip-path: inset(0); } }
@keyframes tokoroten-step { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="tokoroten"]) to ([data-noodle]:not([data-noodle="tokoroten"])) {
  :scope {
    --mn-enter: tokoroten-in; --mn-enter-duration: 240ms; --mn-ease-enter: cubic-bezier(.6, 0, .2, 1);
    --mn-duration: 140ms; --mn-spring: cubic-bezier(.6, 0, .2, 1);
    --tk-line: light-dark(rgb(19 78 74 / .07), rgb(125 211 199 / .06));
    --tk-grid: linear-gradient(var(--tk-line) 1px, transparent 1px) 0 0 / 8px 8px, linear-gradient(90deg, var(--tk-line) 1px, transparent 1px) 0 0 / 8px 8px;
    --tk-glass: light-dark(color-mix(in srgb, #fff 62%, transparent), color-mix(in srgb, #0f1919 60%, transparent));
    --tk-blur: blur(16px) saturate(1.3);
    --tk-edge: inset 0 0 0 1px light-dark(rgb(255 255 255 / .7), rgb(255 255 255 / .07)), 0 0 0 1px light-dark(rgb(19 78 74 / .12), rgb(125 211 199 / .1));
    --mn-card: var(--tk-glass);
    --mn-focus: 0 0 0 2px var(--mn-bg), 0 0 0 4px var(--mn-ring);
    --mn-bar-radius: 1px; --mn-bar-gap: 8px; --mn-line-width: 2px; --mn-area-opacity: .12; --mn-point-opacity: 1;
  }

  /* Glass tiles etched with a grid. */
  .mn-card, .mn-table-wrap, .mn-list, .mn-accordion, .mn-stats, .mn-alert, .mn-collapse, .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer {
    border-color: transparent; background: var(--tk-grid), var(--tk-glass);
    -webkit-backdrop-filter: var(--tk-blur); backdrop-filter: var(--tk-blur);
    box-shadow: var(--tk-edge);
  }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { background: var(--tk-grid), light-dark(color-mix(in srgb, #fff 88%, transparent), color-mix(in srgb, #0f1919 90%, transparent)); box-shadow: var(--tk-edge), 0 16px 32px -16px rgb(0 0 0 / .3); }

  /* Buttons: square tiles; a grid shows through on hover. */
  .mn-btn { box-shadow: var(--tk-edge); font-weight: 600; }
  .mn-btn:not(.mn-btn-link):hover { background: var(--tk-grid), var(--_bg); }
  .mn-btn:active { transform: translateY(1px); }
  .mn-btn-outline, .mn-btn-soft { --_bg: var(--tk-glass); --_bd: transparent; --_fg: var(--_ct, var(--mn-fg)); -webkit-backdrop-filter: var(--tk-blur); backdrop-filter: var(--tk-blur); }
  .mn-btn-ghost, .mn-btn-link { box-shadow: none; }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { border-color: transparent; background-color: var(--tk-glass); box-shadow: var(--tk-edge); -webkit-backdrop-filter: var(--tk-blur); backdrop-filter: var(--tk-blur); }
  .mn-input:focus, .mn-textarea:focus, .mn-input-group:focus-within, .mn-number:focus-within, .mn-otp > input:focus { background: var(--tk-grid), var(--mn-surface); box-shadow: inset 0 0 0 1.5px var(--mn-ring); border-color: transparent; }
  .mn-select:focus { box-shadow: inset 0 0 0 1.5px var(--mn-ring); border-color: transparent; }
  .mn-input-group > .mn-input { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mn-addon { background: transparent; border: 0 !important; }
  .mn-label { font: 500 .6875rem/1.2 var(--mn-font-mono); text-transform: uppercase; letter-spacing: .06em; }
  .mn-checkbox, .mn-radio { box-shadow: none; }
  .mn-checkbox { border-radius: 2px; }
  /* Switch: a slot of cells; the knob steps from one end to the other. */
  .mn-switch { --_w: 2.6rem; --_hh: 1.3rem; border-radius: 3px; background: var(--tk-grid), var(--tk-glass); box-shadow: var(--tk-edge); }
  .mn-switch::before { border-radius: 2px; box-shadow: 0 1px 2px rgb(0 0 0 / .2); transition: transform 160ms steps(3, end); }
  .mn-switch:checked { background: var(--tk-grid), var(--_on); }
  .mn-slider { --_track: 8px; --_thumb: 1rem; }
  .mn-slider::-webkit-slider-runnable-track { border-radius: 1px; box-shadow: var(--tk-edge); background: var(--tk-grid), linear-gradient(to right, var(--_on) var(--_v), var(--tk-glass) var(--_v)); }
  .mn-slider::-moz-range-track { border-radius: 1px; background: var(--tk-glass); }
  .mn-slider::-webkit-slider-thumb { border-radius: 2px; }
  .mn-slider::-moz-range-thumb { border-radius: 2px; }

  .mn-card-header { border-bottom: 1px solid var(--tk-line); padding-bottom: .9rem; margin-bottom: .25rem; }
  .mn-card-description, .mn-stat-label { font-family: var(--mn-font-mono); font-size: .75rem; }
  .mn-card-footer-bordered { border-top-color: var(--tk-line); background: none; }

  .mn-table th, .mn-table td { border-bottom-color: var(--tk-line); }
  .mn-table thead th { background: color-mix(in srgb, var(--mn-surface) 40%, transparent); font: 500 .6875rem/1 var(--mn-font-mono); text-transform: uppercase; letter-spacing: .06em; }
  .mn-table-hover tbody tr:hover { background: var(--tk-grid); background-color: color-mix(in oklab, var(--mn-primary) 5%, transparent); }

  .mn-badge { border-radius: 2px; font: 500 .6875rem/1 var(--mn-font-mono); text-transform: uppercase; letter-spacing: .04em; }
  .mn-badge-soft, .mn-badge-outline { background: var(--tk-glass); color: var(--_ct, var(--mn-fg)); border-color: var(--tk-line); }
  .mn-chip, .mn-kbd { background: var(--tk-glass); border-radius: 2px; box-shadow: none; }

  /* Tabs: the current tab is a filled tile in a gridded strip. */
  .mn-tab-list { border-bottom: 0; gap: 2px; padding: 2px; background: var(--tk-grid), var(--tk-glass); box-shadow: var(--tk-edge); border-radius: 4px; display: inline-flex; max-width: 100%; }
  .mn-tab { border-radius: 2px; height: calc(var(--mn-size-md) - 4px); font-family: var(--mn-font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
  .mn-tab::after { display: none; }
  .mn-tab[aria-selected="true"] { background: var(--mn-primary); color: var(--mn-primary-fg); }
  .mn-tabs-boxed .mn-tab-list { border: 0; }
  .mn-tabs-boxed .mn-tab[aria-selected="true"] { background: var(--mn-primary); color: var(--mn-primary-fg); box-shadow: none; }
  .mn-toggle-group { border: 0; background: var(--tk-grid), var(--tk-glass); box-shadow: var(--tk-edge); padding: 2px; }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-primary); color: var(--mn-primary-fg); box-shadow: none; }

  /* Progress: fills cell by cell. */
  .mn-progress { height: 8px; border-radius: 1px; background: var(--tk-grid), var(--tk-glass); box-shadow: var(--tk-edge); }
  .mn-progress::after { border-radius: 1px; background: linear-gradient(90deg, transparent 7px, rgb(255 255 255 / .35) 7px 8px) 0 0 / 8px 100%, var(--_p); }
  .mn-radial { --_t: .35rem; border-radius: 4px; box-shadow: var(--tk-edge); }
  .mn-radial::before { border-radius: 2px; background: var(--tk-grid), var(--mn-surface); }
  /* Spinner: a square tile turning in quarter steps. */
  .mn-spinner { border: 0; border-radius: 2px; width: calc(var(--_s) * .7); height: calc(var(--_s) * .7); margin: calc(var(--_s) * .15); background: var(--tk-grid), var(--_c, currentColor); animation: tokoroten-step 1.2s steps(4) infinite; }

  .mn-alert { box-shadow: var(--tk-edge), inset 3px 0 0 var(--_a); }
  .mn-avatar { border-radius: 4px; }
  .mn-step::before { border-radius: 3px; background: var(--tk-glass); }
  .mn-menu-item, .mn-page { border-radius: 2px; }
  .mn-page[aria-current="page"] { background: var(--mn-primary); color: var(--mn-primary-fg); border-color: transparent; box-shadow: none; }

  /* Charts: bars built from grid cells. */
  .mn-chart-bars { background: var(--tk-grid); }
  .mn-bar::before { background-image: linear-gradient(transparent 7px, rgb(255 255 255 / .4) 7px 8px); background-size: 100% 8px; background-position: 0 100%; }
  .mn-legend li::before { border-radius: 1px; }
  .mn-donut { --thick: 20%; }
}}

/* ── NAGASHI ───────────────────────────────────────────────────────────────
   Nagashi-sōmen: noodles sent down a split-bamboo chute in cold running
   water and caught with chopsticks as they pass. A flowing-water glass
   system: clear blue-tinted glass, a current (--ng-flow) that runs along
   surfaces on hover and along progress bars continuously, open channels for
   tabs and tracks with an indicator that glides downstream, and things that
   arrive from upstream on a gentle curve. */
@keyframes nagashi-in { 0% { opacity: 0; transform: translate(-6px, -3px); } 70% { opacity: 1; transform: translate(1px, 1px); } 100% { transform: none; } }
@keyframes nagashi-flow { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes nagashi-swirl { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="nagashi"]) to ([data-noodle]:not([data-noodle="nagashi"])) {
  :scope {
    --mn-enter: nagashi-in; --mn-enter-duration: 420ms; --mn-ease-enter: cubic-bezier(.3, .7, .3, 1);
    --mn-duration: 220ms; --mn-spring: cubic-bezier(.3, .7, .3, 1);
    --ng-water: light-dark(color-mix(in srgb, #fff 55%, transparent), color-mix(in srgb, #0d1a24 58%, transparent));
    --ng-water-hi: light-dark(color-mix(in srgb, #fff 80%, transparent), color-mix(in srgb, #13222e 82%, transparent));
    --ng-blur: blur(18px) saturate(1.5);
    --ng-flow: linear-gradient(100deg, transparent 20%, light-dark(rgb(255 255 255 / .45), rgb(255 255 255 / .1)) 35%, transparent 48%, light-dark(rgb(255 255 255 / .25), rgb(255 255 255 / .06)) 62%, transparent 78%);
    --ng-edge: inset 0 1px 0 light-dark(rgb(255 255 255 / .9), rgb(255 255 255 / .12)), inset 0 -1px 0 light-dark(rgb(11 95 143 / .08), rgb(0 0 0 / .4)), 0 0 0 1px light-dark(rgb(11 95 143 / .1), rgb(108 196 242 / .1));
    --ng-channel: inset 0 2px 5px light-dark(rgb(11 60 90 / .14), rgb(0 0 0 / .5)), inset 0 -1px 0 light-dark(rgb(255 255 255 / .8), rgb(255 255 255 / .06));
    --mn-card: var(--ng-water); --mn-popover: var(--ng-water-hi);
    --mn-focus: 0 0 0 3px color-mix(in oklab, var(--mn-ring) 40%, transparent);
    --mn-bar-radius: 999px; --mn-bar-gap: 9px; --mn-line-width: 3px; --mn-area-opacity: .16; --mn-point-opacity: 0;
    --mn-bar-fill: color-mix(in srgb, var(--mn-primary) 30%, transparent);
  }

  .mn-card, .mn-table-wrap, .mn-list, .mn-accordion, .mn-stats, .mn-alert, .mn-collapse, .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer {
    border-color: transparent; background-color: var(--mn-card);
    -webkit-backdrop-filter: var(--ng-blur); backdrop-filter: var(--ng-blur);
    box-shadow: var(--ng-edge);
  }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { background-color: var(--mn-popover); box-shadow: var(--ng-edge), 0 18px 40px -18px rgb(5 40 60 / .35); }
  .mn-card { background-image: var(--ng-flow); background-size: 300% 100%; background-position: 100% 0; background-repeat: no-repeat; }
  .mn-card:hover { animation: nagashi-flow 1.6s var(--mn-ease) both; }

  /* Buttons: water droplets; a current runs across them on hover. */
  .mn-btn { border: 0; background-image: var(--ng-flow); background-size: 300% 100%; background-position: 100% 0; background-repeat: no-repeat; box-shadow: var(--ng-edge); font-weight: 600; }
  .mn-btn:hover { animation: nagashi-flow 900ms var(--mn-ease) both; }
  .mn-btn:active { transform: scale(.97); }
  .mn-btn-outline, .mn-btn-soft { --_bg: var(--ng-water); --_fg: var(--_ct, var(--mn-fg)); -webkit-backdrop-filter: var(--ng-blur); backdrop-filter: var(--ng-blur); }
  .mn-btn-outline:hover, .mn-btn-soft:hover { --_bg: var(--ng-water-hi); }
  .mn-btn-ghost, .mn-btn-link { background-image: none; box-shadow: none; }
  .mn-btn-ghost:hover, .mn-btn-link:hover { animation: none; }

  /* Fields: recessed channels of water. */
  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { border-color: transparent; background-color: var(--ng-water); box-shadow: var(--ng-channel); -webkit-backdrop-filter: var(--ng-blur); backdrop-filter: var(--ng-blur); }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within, .mn-number:focus-within, .mn-otp > input:focus { border-color: transparent; background-color: var(--ng-water-hi); box-shadow: var(--ng-channel), var(--mn-focus); }
  .mn-input-group > .mn-input { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mn-addon { background: transparent; border: 0 !important; }
  .mn-checkbox, .mn-radio { border: 0; background-color: var(--ng-water); box-shadow: var(--ng-channel); }
  .mn-checkbox { border-radius: 7px; }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); box-shadow: var(--ng-edge); }
  /* Switch: a channel that fills with water; the knob is a bead carried along. */
  .mn-switch { --_w: 2.9rem; --_hh: 1.6rem; background: var(--ng-water); box-shadow: var(--ng-channel); }
  .mn-switch::before { background: #fff; box-shadow: 0 2px 6px rgb(5 40 60 / .3), inset 0 -2px 3px rgb(11 95 143 / .12); transition: transform 420ms var(--mn-spring); }
  .mn-switch:checked { background: var(--_on) var(--ng-flow); box-shadow: var(--ng-edge); }
  .mn-slider { --_track: 8px; }
  .mn-slider::-webkit-slider-runnable-track { box-shadow: var(--ng-channel); background: linear-gradient(to right, var(--_on) var(--_v), var(--ng-water) var(--_v)); }
  .mn-slider::-moz-range-track { box-shadow: var(--ng-channel); background: var(--ng-water); }
  .mn-slider::-webkit-slider-thumb { border: 0; background: #fff; box-shadow: 0 2px 6px rgb(5 40 60 / .3); }
  .mn-slider::-moz-range-thumb { border: 0; background: #fff; box-shadow: 0 2px 6px rgb(5 40 60 / .3); }

  .mn-card-footer-bordered { border-top-color: light-dark(rgb(11 95 143 / .08), rgb(255 255 255 / .06)); background: none; }
  .mn-table th, .mn-table td { border-bottom-color: light-dark(rgb(11 95 143 / .08), rgb(255 255 255 / .06)); }
  .mn-table thead th { background: light-dark(rgb(255 255 255 / .4), rgb(255 255 255 / .03)); }
  .mn-table-hover tbody tr:hover { background: var(--ng-flow); background-color: light-dark(rgb(11 95 143 / .05), rgb(108 196 242 / .05)); }

  .mn-badge { box-shadow: var(--ng-edge); }
  .mn-badge-soft, .mn-badge-outline { background: var(--ng-water); color: var(--_ct, var(--mn-primary-text)); border-color: transparent; }
  .mn-chip, .mn-kbd { background: var(--ng-water); border-color: transparent; box-shadow: var(--ng-edge); }

  /* Tabs: a channel; the current tab is a glass bead gliding along it. */
  .mn-tab-list { border-bottom: 0; isolation: isolate; padding: 4px; border-radius: 999px; background: var(--ng-water); box-shadow: var(--ng-channel); display: inline-flex; max-width: 100%; }
  .mn-tab { border-radius: 999px; height: calc(var(--mn-size-md) - 8px); background: transparent !important; box-shadow: none !important; }
  .mn-tab::after { display: none; }
  .mn-tab-list::after { content: ""; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: var(--_ix, 4px); width: var(--_iw, 0); border-radius: 999px; background: var(--ng-water-hi) var(--ng-flow); box-shadow: var(--ng-edge), 0 3px 8px -3px rgb(5 40 60 / .25); transition: left 600ms var(--mn-spring), width 600ms var(--mn-spring); }
  .mn-tab[aria-selected="true"] { color: var(--mn-primary-text); }
  /* The lens is the selection, in pills too: keep the text colour (the pill guarantee sets on-primary text). */
  .mn-tabs-pills .mn-tab[aria-selected="true"] { color: var(--mn-primary-text) !important; }
  .mn-toggle-group { border: 0; border-radius: 999px; padding: 4px; background: var(--ng-water); box-shadow: var(--ng-channel); }
  .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 999px; }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--ng-water-hi); box-shadow: var(--ng-edge); color: var(--mn-primary-text); }

  /* Progress: water running through a channel. */
  .mn-progress { height: .6rem; background: var(--ng-water); box-shadow: var(--ng-channel); }
  .mn-progress::after { background: var(--ng-flow), linear-gradient(180deg, color-mix(in srgb, var(--_p), #fff 30%), var(--_p)); background-size: 300% 100%, 100% 100%; }
  .mn-progress[aria-valuenow]::after { animation: nagashi-flow 2.4s linear infinite; }
  .mn-progress:not([aria-valuenow])::after { animation: mn-indeterminate 1.6s var(--mn-ease) infinite, nagashi-flow 2.4s linear infinite; }
  .mn-radial { --_t: .45rem; box-shadow: var(--ng-channel); }
  .mn-radial::before { background: var(--ng-water-hi); }
  /* Spinner: a swirl of water. */
  .mn-spinner { border: 0; background: conic-gradient(from 0deg, transparent, var(--_c, var(--mn-primary))); -webkit-mask: radial-gradient(closest-side, transparent 55%, #000 58%); mask: radial-gradient(closest-side, transparent 55%, #000 58%); animation: nagashi-swirl .9s cubic-bezier(.4, .2, .4, .8) infinite; }

  .mn-alert { background-color: color-mix(in srgb, var(--_a) 8%, var(--ng-water)); }
  .mn-avatar { box-shadow: var(--ng-edge); }
  .mn-step::before { background: var(--ng-water); box-shadow: var(--ng-edge); border-color: transparent; }
  .mn-step + .mn-step::after { height: 6px; top: calc(1rem - 3px); border-radius: 6px; background: var(--ng-water); box-shadow: var(--ng-channel); }
  .mn-step[data-state="complete"] + .mn-step::after { background: var(--mn-primary); box-shadow: none; }
  .mn-menu-item, .mn-page { border-radius: 999px; }
  .mn-page[aria-current="page"] { background: var(--ng-water-hi); box-shadow: var(--ng-edge); border-color: transparent; }

  /* Charts: columns of water with a bright surface. */
  .mn-bar::before { background-image: linear-gradient(180deg, rgb(255 255 255 / .45), transparent 30%); box-shadow: var(--ng-edge); }
  .mn-chart-line .mn-line { filter: drop-shadow(0 3px 4px color-mix(in oklab, var(--mn-series-1) 35%, transparent)); }
  .mn-donut { --thick: 26%; }
}}

/* ── LIANGFEN ──────────────────────────────────────────────────────────────
   Mung-bean jelly cut into thick, translucent strips, served cold with
   chilli oil and black vinegar. A glass-brick system: translucent blocks
   with a visible, tinted thickness along their lower edge (--lf-depth), a
   bright top face, a cool jade page underneath, and presses that sink the
   block into its own thickness. */
@keyframes liangfen-in { from { opacity: 0; transform: translateY(-8px); } 70% { opacity: 1; transform: translateY(1px); } to { transform: none; } }
@keyframes liangfen-wobble { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(.85); } }

@layer mian.noodles { @scope ([data-noodle="liangfen"]) to ([data-noodle]:not([data-noodle="liangfen"])) {
  :scope {
    --mn-enter: liangfen-in; --mn-enter-duration: 300ms; --mn-ease-enter: cubic-bezier(.3, .9, .4, 1);
    --mn-duration: 150ms; --mn-spring: cubic-bezier(.3, 1.3, .5, 1);
    --lf-glass: light-dark(color-mix(in srgb, #fff 66%, transparent), color-mix(in srgb, #122018 62%, transparent));
    --lf-tint: light-dark(rgb(60 110 80 / .22), rgb(120 200 150 / .14));
    --lf-face: inset 0 1px 0 light-dark(rgb(255 255 255 / .95), rgb(255 255 255 / .14)), inset 1px 0 0 light-dark(rgb(255 255 255 / .5), rgb(255 255 255 / .05)), inset 0 0 0 1px light-dark(rgb(60 110 80 / .12), rgb(120 200 150 / .1));
    --lf-depth: 0 4px 0 var(--lf-tint), 0 10px 20px -10px light-dark(rgb(30 60 40 / .35), rgb(0 0 0 / .6));
    --lf-blur: blur(12px) saturate(1.3);
    --mn-card: var(--lf-glass);
    --mn-bar-radius: 6px; --mn-bar-gap: 8px; --mn-line-width: 3px; --mn-area-opacity: .14; --mn-point-opacity: 1;
  }

  /* Surfaces are glass bricks. */
  .mn-card, .mn-table-wrap, .mn-list, .mn-accordion, .mn-stats, .mn-alert, .mn-collapse, .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer {
    border-color: transparent; background-color: var(--mn-card);
    -webkit-backdrop-filter: var(--lf-blur); backdrop-filter: var(--lf-blur);
    box-shadow: var(--lf-face), 0 6px 0 var(--lf-tint), 0 16px 28px -14px light-dark(rgb(30 60 40 / .35), rgb(0 0 0 / .6));
  }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { background-color: light-dark(color-mix(in srgb, #fff 90%, transparent), color-mix(in srgb, #122018 92%, transparent)); }

  /* Buttons: glass blocks that sink into their own thickness. */
  .mn-btn {
    --_edge: color-mix(in srgb, var(--_c, var(--mn-primary)) 55%, transparent);
    border: 0; background: color-mix(in srgb, var(--_bg) 90%, transparent);
    box-shadow: var(--lf-face), 0 4px 0 var(--_edge), 0 8px 14px -8px rgb(0 0 0 / .3);
    font-weight: 700; transition: transform 120ms var(--mn-spring), box-shadow 120ms var(--mn-spring);
  }
  .mn-btn:active { transform: translateY(3px); box-shadow: var(--lf-face), 0 1px 0 var(--_edge); }
  .mn-btn-outline, .mn-btn-soft { --_bg: var(--lf-glass); --_edge: var(--lf-tint); --_fg: var(--_ct, var(--mn-fg)); -webkit-backdrop-filter: var(--lf-blur); backdrop-filter: var(--lf-blur); }
  .mn-btn-ghost, .mn-btn-link { box-shadow: none; }
  .mn-btn-ghost:active, .mn-btn-link:active { transform: none; box-shadow: none; }

  /* Fields: a well cut into the glass. */
  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { border-color: transparent; background-color: var(--lf-glass); box-shadow: inset 0 3px 0 var(--lf-tint), inset 0 0 0 1px light-dark(rgb(60 110 80 / .14), rgb(120 200 150 / .1)); }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within, .mn-number:focus-within, .mn-otp > input:focus { border-color: transparent; box-shadow: inset 0 3px 0 var(--lf-tint), inset 0 0 0 1.5px var(--mn-ring), 0 0 0 3px color-mix(in oklab, var(--mn-ring) 20%, transparent); }
  .mn-input-group > .mn-input { background: transparent; box-shadow: none; }
  .mn-addon { background: transparent; border: 0 !important; }
  .mn-checkbox, .mn-radio { border: 0; background-color: var(--lf-glass); box-shadow: inset 0 2px 0 var(--lf-tint), inset 0 0 0 1px light-dark(rgb(60 110 80 / .25), rgb(120 200 150 / .2)); }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); box-shadow: var(--lf-face), 0 2px 0 color-mix(in srgb, var(--_on) 55%, transparent); }
  /* Switch: a glass slot with a brick for a knob. */
  .mn-switch { --_w: 2.8rem; --_hh: 1.5rem; border-radius: 8px; background: var(--lf-glass); box-shadow: inset 0 3px 0 var(--lf-tint), inset 0 0 0 1px light-dark(rgb(60 110 80 / .2), rgb(120 200 150 / .14)); }
  .mn-switch::before { border-radius: 5px; background: #fff; box-shadow: 0 2px 0 var(--lf-tint), 0 3px 6px rgb(0 0 0 / .2); }
  .mn-switch:checked { background: color-mix(in srgb, var(--_on) 88%, transparent); box-shadow: var(--lf-face); }
  .mn-slider { --_track: 8px; }
  .mn-slider::-webkit-slider-runnable-track { border-radius: 4px; box-shadow: inset 0 2px 0 var(--lf-tint); background: linear-gradient(to right, var(--_on) var(--_v), var(--lf-glass) var(--_v)); }
  .mn-slider::-moz-range-track { border-radius: 4px; background: var(--lf-glass); }
  .mn-slider::-webkit-slider-thumb { border-radius: 6px; border: 0; background: #fff; box-shadow: 0 3px 0 var(--lf-tint), 0 4px 8px rgb(0 0 0 / .2); }
  .mn-slider::-moz-range-thumb { border-radius: 6px; border: 0; background: #fff; box-shadow: 0 3px 8px rgb(0 0 0 / .2); }

  .mn-card-title { font-weight: 700; }
  .mn-card-footer-bordered { background: none; border-top-color: var(--lf-tint); }
  .mn-table th, .mn-table td { border-bottom-color: var(--lf-tint); }
  .mn-table thead th { background: color-mix(in srgb, var(--mn-surface) 40%, transparent); font-weight: 650; }
  .mn-table-hover tbody tr:hover { background: color-mix(in srgb, var(--mn-surface) 50%, transparent); }

  .mn-badge { border: 0; box-shadow: var(--lf-face), 0 2px 0 color-mix(in srgb, var(--_c, var(--mn-primary)) 50%, transparent); font-weight: 700; }
  .mn-badge-soft, .mn-badge-outline { background: var(--lf-glass); color: var(--_ct, var(--mn-fg)); box-shadow: var(--lf-face), 0 2px 0 var(--lf-tint); }
  .mn-chip, .mn-kbd { border: 0; background: var(--lf-glass); box-shadow: var(--lf-face), 0 2px 0 var(--lf-tint); }

  /* Tabs: the current tab is a raised brick in a sunken slot. */
  .mn-tab-list { border-bottom: 0; gap: 4px; padding: 5px 5px 9px; border-radius: 12px; background: var(--lf-glass); box-shadow: inset 0 3px 0 var(--lf-tint); display: inline-flex; max-width: 100%; }
  .mn-tab { border-radius: 8px; height: calc(var(--mn-size-md) - 8px); font-weight: 600; transition: transform 120ms var(--mn-spring); }
  .mn-tab::after { display: none; }
  .mn-tab[aria-selected="true"] { background: #fff; color: #101a13; box-shadow: var(--lf-face), 0 3px 0 var(--lf-tint); transform: translateY(-2px); }
  .mn-tabs-boxed .mn-tab-list { border: 0; }
  .mn-toggle-group { border: 0; padding: 5px 5px 9px; background: var(--lf-glass); box-shadow: inset 0 3px 0 var(--lf-tint); }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: #fff; color: #101a13; box-shadow: var(--lf-face), 0 3px 0 var(--lf-tint); transform: translateY(-2px); }

  .mn-progress { height: .8rem; border-radius: 6px; background: var(--lf-glass); box-shadow: inset 0 3px 0 var(--lf-tint), inset 0 0 0 1px var(--lf-tint); }
  .mn-progress::after { border-radius: 6px; background: linear-gradient(180deg, rgb(255 255 255 / .35), transparent 50%), var(--_p); }
  .mn-radial { --_t: .5rem; box-shadow: var(--lf-face), 0 3px 0 var(--lf-tint); }
  .mn-radial::before { background: var(--lf-glass); }
  /* Spinner: a jelly cube tumbling. */
  .mn-spinner { border: 0; border-radius: 4px; width: calc(var(--_s) * .72); height: calc(var(--_s) * .72); margin: calc(var(--_s) * .14); background: color-mix(in srgb, var(--_c, var(--mn-primary)) 75%, transparent); box-shadow: var(--lf-face); animation: liangfen-wobble 1.1s cubic-bezier(.5, .1, .5, .9) infinite; }

  .mn-alert { background-color: color-mix(in srgb, var(--_a) 8%, var(--lf-glass)); }
  .mn-avatar { box-shadow: var(--lf-face), 0 2px 0 var(--lf-tint); }
  .mn-step::before { background: var(--lf-glass); box-shadow: var(--lf-face), 0 2px 0 var(--lf-tint); border-color: transparent; }
  .mn-step + .mn-step::after { height: 4px; top: calc(1rem - 2px); border-radius: 4px; background: var(--lf-tint); }
  .mn-page[aria-current="page"] { background: #fff; color: #101a13; box-shadow: var(--lf-face), 0 3px 0 var(--lf-tint); border-color: transparent; }

  /* Charts: glass bricks stacked into columns. */
  .mn-bar::before { background-image: linear-gradient(90deg, rgb(255 255 255 / .35) 0 25%, transparent 25%); box-shadow: var(--lf-face), 4px 0 0 var(--lf-tint); }
  .mn-chart-h .mn-bar::before { box-shadow: var(--lf-face), 0 3px 0 var(--lf-tint); }
  .mn-donut { --thick: 30%; }
}}

/* ── DANGMYEON ─────────────────────────────────────────────────────────────
   Korean sweet-potato glass noodles: grey-brown and translucent, chewy,
   glossy with sesame oil, tossed with bright julienned vegetables in
   japchae. A smoked-glass system: tinted translucent panels with a thicker
   glass edge at the bottom, a warm amber sheen that slides across on hover,
   and the vegetables' colours for data. */
@keyframes dangmyeon-in { from { opacity: 0; transform: translateY(8px) scale(.98); filter: blur(3px); } }
@keyframes dangmyeon-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="dangmyeon"]) to ([data-noodle]:not([data-noodle="dangmyeon"])) {
  :scope {
    --mn-enter: dangmyeon-in; --mn-enter-duration: 320ms; --mn-ease-enter: cubic-bezier(.3, 1.15, .5, 1);
    --mn-duration: 200ms; --mn-spring: cubic-bezier(.3, 1.2, .5, 1);
    --d-smoke: light-dark(color-mix(in srgb, #5a4a3a 10%, color-mix(in srgb, var(--mn-surface) 62%, transparent)), color-mix(in srgb, #0b0907 55%, transparent));
    --d-blur: blur(16px) saturate(1.3);
    --d-sheen: linear-gradient(115deg, transparent 20%, color-mix(in srgb, #f5a524 22%, transparent) 45%, transparent 60%);
    --d-edge: inset 0 1px 0 light-dark(rgb(255 255 255 / .55), rgb(255 255 255 / .1)), inset 0 -3px 0 light-dark(rgb(90 70 50 / .18), rgb(245 165 36 / .12));
    --mn-card: var(--d-smoke); --mn-popover: light-dark(color-mix(in srgb, var(--mn-surface) 82%, transparent), color-mix(in srgb, #15120f 85%, transparent));
    --mn-series-1: var(--mn-primary); --mn-series-2: light-dark(#3f6212, #a3d65c); --mn-series-3: light-dark(#a16207, #fcd34d); --mn-series-4: light-dark(#7c2d12, #fb923c);
    --mn-bar-radius: 6px; --mn-bar-gap: 6px; --mn-line-width: 3px; --mn-area-opacity: .14;
  }

  .mn-card, .mn-table-wrap, .mn-list, .mn-accordion, .mn-stats, .mn-alert, .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer, .mn-collapse {
    border-color: light-dark(rgb(90 70 50 / .14), rgb(255 255 255 / .07)); background-color: var(--mn-card);
    -webkit-backdrop-filter: var(--d-blur); backdrop-filter: var(--d-blur);
    box-shadow: var(--d-edge), 0 14px 34px -18px rgb(0 0 0 / .45);
  }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { background-color: var(--mn-popover); }

  /* Buttons: tinted glass; a sesame-oil sheen slides across on hover. */
  .mn-btn { position: relative; overflow: hidden; isolation: isolate; box-shadow: var(--d-edge); font-weight: 650; }
  .mn-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--d-sheen) no-repeat; background-size: 250% 100%; background-position: 120% 0; transition: background-position 600ms var(--mn-ease); }
  .mn-btn:hover::before { background-position: -20% 0; }
  .mn-btn:active { transform: scale(.97); }
  .mn-btn-outline, .mn-btn-soft { --_bg: var(--d-smoke); --_fg: var(--_ct, var(--mn-fg)); --_bd: light-dark(rgb(90 70 50 / .2), rgb(255 255 255 / .1)); -webkit-backdrop-filter: var(--d-blur); backdrop-filter: var(--d-blur); }
  .mn-btn-ghost, .mn-btn-link { box-shadow: none; }
  .mn-btn-link::before { display: none; }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input {
    border-color: light-dark(rgb(90 70 50 / .22), rgb(255 255 255 / .1)); background-color: var(--d-smoke);
    -webkit-backdrop-filter: var(--d-blur); backdrop-filter: var(--d-blur); box-shadow: inset 0 2px 4px rgb(0 0 0 / .08);
  }
  .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-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mn-primary) 25%, transparent), inset 0 2px 4px rgb(0 0 0 / .08); }
  .mn-input-group > .mn-input { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; }
  .mn-addon { background: transparent; }
  .mn-checkbox, .mn-radio { border-color: light-dark(rgb(90 70 50 / .35), rgb(255 255 255 / .2)); background-color: var(--d-smoke); box-shadow: none; }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); border-color: var(--_on); }
  .mn-switch { --_w: 2.7rem; --_hh: 1.5rem; background: var(--d-smoke); box-shadow: inset 0 1px 3px rgb(0 0 0 / .25), inset 0 0 0 1px light-dark(rgb(90 70 50 / .18), rgb(255 255 255 / .08)); }
  .mn-switch::before { background: light-dark(#fff, #e9e2d8); box-shadow: 0 2px 6px rgb(0 0 0 / .3), inset 0 -2px 0 rgb(0 0 0 / .08); }
  .mn-switch:checked { background: var(--_on) var(--d-sheen); }
  .mn-slider { --_track: 6px; }
  .mn-slider::-webkit-slider-runnable-track { box-shadow: inset 0 1px 3px rgb(0 0 0 / .25); background: linear-gradient(to right, var(--_on) var(--_v), var(--d-smoke) var(--_v)); }
  .mn-slider::-moz-range-track { box-shadow: inset 0 1px 3px rgb(0 0 0 / .25); background: var(--d-smoke); }
  .mn-slider::-webkit-slider-thumb { border: 0; background: light-dark(#fff, #e9e2d8); box-shadow: 0 2px 6px rgb(0 0 0 / .35); }
  .mn-slider::-moz-range-thumb { border: 0; background: light-dark(#fff, #e9e2d8); box-shadow: 0 2px 6px rgb(0 0 0 / .35); }

  .mn-table th, .mn-table td { border-bottom-color: light-dark(rgb(90 70 50 / .12), rgb(255 255 255 / .06)); }
  .mn-table thead th { background: light-dark(rgb(90 70 50 / .08), rgb(0 0 0 / .25)); }
  .mn-table-hover tbody tr:hover { background: var(--d-sheen); }

  .mn-badge { box-shadow: var(--d-edge); }
  .mn-badge-soft, .mn-badge-outline { background: var(--d-smoke); color: var(--_ct, var(--mn-fg)); }
  .mn-chip, .mn-kbd { background: var(--d-smoke); border-color: light-dark(rgb(90 70 50 / .2), rgb(255 255 255 / .1)); }

  .mn-tab-list { border-bottom-color: light-dark(rgb(90 70 50 / .2), rgb(255 255 255 / .1)); }
  .mn-tab::after { height: 3px; border-radius: 3px; }
  .mn-tab[aria-selected="true"]::after { background: linear-gradient(90deg, var(--mn-primary), light-dark(#3f6212, #a3d65c)); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { background: var(--d-smoke); border: 1px solid light-dark(rgb(90 70 50 / .15), rgb(255 255 255 / .07)); -webkit-backdrop-filter: var(--d-blur); backdrop-filter: var(--d-blur); }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: light-dark(rgb(255 255 255 / .8), rgb(255 255 255 / .12)); box-shadow: var(--d-edge); }

  /* Progress: a smoked tube with an amber, glossy fill. */
  .mn-progress { height: .6rem; background: var(--d-smoke); box-shadow: inset 0 1px 3px rgb(0 0 0 / .25); }
  .mn-progress::after { background: var(--_p) linear-gradient(180deg, rgb(255 255 255 / .35), transparent 60%); }
  .mn-radial::before { background: light-dark(var(--mn-surface), #15120f); }
  /* Spinner: a julienne of four colours turning. */
  .mn-spinner { border: 0; background: conic-gradient(var(--mn-primary) 0 22%, transparent 0 25%, light-dark(#3f6212, #a3d65c) 0 47%, transparent 0 50%, light-dark(#a16207, #fcd34d) 0 72%, transparent 0 75%, light-dark(#7c2d12, #fb923c) 0 97%, transparent 0); -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 65%); mask: radial-gradient(closest-side, transparent 62%, #000 65%); animation: dangmyeon-spin 1.1s linear infinite; }

  .mn-avatar { box-shadow: var(--d-edge); }
  .mn-step::before { background: var(--d-smoke); }
  .mn-menu-item:hover { background: var(--d-sheen), var(--mn-hover); }
  .mn-page[aria-current="page"] { background: var(--d-smoke); box-shadow: var(--d-edge); border-color: transparent; }

  /* Charts: julienne colours in glossy glass. */
  .mn-bar::before { background: linear-gradient(180deg, rgb(255 255 255 / .3), transparent 50%), color-mix(in srgb, var(--mn-series-1) 40%, transparent); }
  .mn-bar:nth-child(4n + 2)::before { background: linear-gradient(180deg, rgb(255 255 255 / .3), transparent 50%), color-mix(in srgb, var(--mn-series-2) 45%, transparent); }
  .mn-bar:nth-child(4n + 3)::before { background: linear-gradient(180deg, rgb(255 255 255 / .3), transparent 50%), color-mix(in srgb, var(--mn-series-3) 45%, transparent); }
  .mn-bar.mn-hl::before, .mn-bar:hover::before { background: linear-gradient(180deg, rgb(255 255 255 / .35), transparent 50%), var(--mn-series-1); }
  .mn-donut { --thick: 34%; }
}}

/* ── WOONSEN ───────────────────────────────────────────────────────────────
   Thai glass noodles, crystal clear in a bright salad of lime, chilli and
   herbs. A crystal system: clear, lightly frosted glass with bevelled edges
   (a light edge top-left, a darker edge bottom-right), a thin prism of
   colour along borders and focus rings, and a quick sparkle on arrival. */
@keyframes woonsen-in { from { opacity: 0; transform: scale(.97); filter: brightness(1.6) saturate(0); } }
@keyframes woonsen-turn { to { transform: rotate(360deg); } }
@keyframes woonsen-glint { from { background-position: 150% 0; } to { background-position: -50% 0; } }

@layer mian.noodles { @scope ([data-noodle="woonsen"]) to ([data-noodle]:not([data-noodle="woonsen"])) {
  :scope {
    --mn-enter: woonsen-in; --mn-enter-duration: 300ms; --mn-ease-enter: cubic-bezier(.2, .8, .2, 1);
    --mn-duration: 170ms;
    --w-prism: conic-gradient(from 210deg, #ff8fa3, #ffd479, #b8f28a, #7ee0ff, #b9a2ff, #ff8fa3);
    --w-glass: light-dark(color-mix(in srgb, var(--mn-surface) 70%, transparent), color-mix(in srgb, var(--mn-surface) 60%, transparent));
    --w-bevel: inset 1px 1px 0 light-dark(rgb(255 255 255 / .95), rgb(255 255 255 / .16)), inset -1px -1px 0 light-dark(rgb(40 40 80 / .08), rgb(0 0 0 / .5));
    --w-lift: 0 1px 1px rgb(20 20 60 / .04), 0 8px 24px -12px rgb(40 30 90 / .22);
    --mn-card: var(--w-glass);
    --mn-focus: 0 0 0 2px var(--mn-bg), 0 0 0 4px var(--mn-ring);
    --mn-series-1: var(--mn-primary); --mn-series-2: var(--mn-accent); --mn-series-3: light-dark(#be185d, #f9a8d4); --mn-series-4: light-dark(#0e7490, #67e8f9);
    --mn-bar-radius: 4px; --mn-bar-gap: 7px; --mn-line-width: 2px; --mn-area-opacity: .1; --mn-point-opacity: 1;
  }

  /* A prism edge: a 1px conic rainbow drawn under a glass fill. */
  .mn-card, .mn-table-wrap, .mn-stats, .mn-list, .mn-accordion, .mn-modal, .mn-popover, .mn-menu, .mn-toast, .mn-drawer {
    border: 1px solid transparent;
    background: linear-gradient(var(--w-glass), var(--w-glass)) padding-box, linear-gradient(light-dark(rgb(255 255 255 / .8), rgb(255 255 255 / .06)), light-dark(rgb(255 255 255 / .8), rgb(255 255 255 / .06))) border-box, var(--w-prism) border-box;
    -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5);
    box-shadow: var(--w-bevel), var(--w-lift);
  }
  .mn-modal, .mn-popover, .mn-menu, .mn-toast, .mn-drawer { --w-glass: light-dark(color-mix(in srgb, var(--mn-surface) 90%, transparent), color-mix(in srgb, var(--mn-surface) 88%, transparent)); }

  /* Buttons: cut glass; a glint sweeps across on hover. */
  .mn-btn { box-shadow: var(--w-bevel), 0 2px 6px -2px color-mix(in oklab, var(--_c, var(--mn-primary)) 50%, transparent); font-weight: 600; background-image: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / .35) 50%, transparent 60%); background-size: 250% 100%; background-position: 150% 0; background-repeat: no-repeat; }
  .mn-btn:hover { animation: woonsen-glint 700ms ease-out; }
  .mn-btn:active { transform: translateY(1px); box-shadow: inset 1px 1px 2px rgb(0 0 0 / .15); }
  .mn-btn-outline { --_bd: var(--mn-input); background: var(--w-glass); --_fg: var(--_ct, var(--mn-fg)); }
  .mn-btn-outline:hover { animation: none; background: var(--mn-surface); }
  .mn-btn-ghost, .mn-btn-link { box-shadow: none; background-image: none; }
  .mn-btn-ghost:hover, .mn-btn-link:hover { animation: none; }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { background-color: var(--w-glass); box-shadow: inset 1px 1px 2px light-dark(rgb(40 40 80 / .08), rgb(0 0 0 / .4)); }
  .mn-input:focus, .mn-textarea:focus, .mn-input-group:focus-within, .mn-number:focus-within, .mn-otp > input:focus {
    border-color: transparent; box-shadow: none;
    background: linear-gradient(var(--mn-surface), var(--mn-surface)) padding-box, var(--w-prism) border-box;
  }
  .mn-select:focus { border-color: var(--mn-ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mn-ring) 20%, transparent); }
  .mn-input-group > .mn-input { background: transparent; box-shadow: none; }
  .mn-checkbox, .mn-radio { box-shadow: var(--w-bevel); background-color: var(--w-glass); }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); }
  .mn-switch { --_w: 2.6rem; --_hh: 1.4rem; background: var(--w-glass); box-shadow: inset 1px 1px 3px rgb(0 0 0 / .15), inset 0 0 0 1px light-dark(rgb(40 40 80 / .1), rgb(255 255 255 / .1)); }
  .mn-switch::before { background: #fff; box-shadow: var(--w-bevel), 0 2px 5px rgb(0 0 0 / .2); }
  .mn-switch:checked { background: var(--_on) linear-gradient(105deg, rgb(255 255 255 / .3), transparent 50%); }
  .mn-slider { --_track: 5px; }
  .mn-slider::-webkit-slider-thumb { border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--w-prism) border-box; box-shadow: 0 2px 5px rgb(0 0 0 / .18); }
  .mn-slider::-moz-range-thumb { border: 1px solid var(--mn-input); background: #fff; box-shadow: 0 2px 5px rgb(0 0 0 / .18); }

  .mn-table thead th { background: light-dark(rgb(255 255 255 / .5), rgb(255 255 255 / .03)); }
  .mn-table-hover tbody tr:hover { background: color-mix(in srgb, var(--mn-fg) 4%, transparent); }

  .mn-badge { box-shadow: var(--w-bevel); }
  .mn-badge-outline { border: 1px solid transparent; background: linear-gradient(var(--mn-surface), var(--mn-surface)) padding-box, var(--w-prism) border-box; color: var(--_ct, var(--mn-fg)); }
  .mn-chip { border: 1px solid transparent; background: linear-gradient(var(--w-glass), var(--w-glass)) padding-box, var(--w-prism) border-box; }

  /* Tabs: the current tab gets a prism underline. */
  .mn-tab::after { height: 2px; border-radius: 2px; }
  .mn-tab[aria-selected="true"]::after { background: linear-gradient(90deg, #ff8fa3, #ffd479, #b8f28a, #7ee0ff, #b9a2ff); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { background: var(--w-glass); box-shadow: inset 1px 1px 3px rgb(0 0 0 / .08); }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { border: 1px solid transparent; background: linear-gradient(var(--mn-surface), var(--mn-surface)) padding-box, var(--w-prism) border-box; box-shadow: var(--w-lift); }

  /* Progress: a clear tube with a light-splitting fill. */
  .mn-progress { height: .5rem; background: var(--w-glass); box-shadow: inset 1px 1px 2px rgb(0 0 0 / .15); }
  .mn-progress::after { background: var(--_p) linear-gradient(90deg, transparent 60%, rgb(255 255 255 / .45)); }
  /* Spinner: a turning prism ring. */
  .mn-spinner { border: 0; background: var(--w-prism); -webkit-mask: radial-gradient(closest-side, transparent 64%, #000 67%); mask: radial-gradient(closest-side, transparent 64%, #000 67%); animation: woonsen-turn 1s linear infinite; }
  .mn-radial { box-shadow: var(--w-bevel); }

  .mn-alert { box-shadow: var(--w-bevel); background-color: color-mix(in srgb, var(--_a) 8%, var(--w-glass)); }
  .mn-avatar { box-shadow: 0 0 0 2px var(--mn-bg), 0 0 0 3px transparent; background-clip: padding-box; }
  .mn-step::before { box-shadow: var(--w-bevel); }
  .mn-page[aria-current="page"] { border: 1px solid transparent; background: linear-gradient(var(--mn-surface), var(--mn-surface)) padding-box, var(--w-prism) border-box; box-shadow: none; }

  /* Charts: cut-glass bars with a facet highlight. */
  .mn-bar::before { background: linear-gradient(90deg, rgb(255 255 255 / .5) 0 30%, transparent 30%), color-mix(in srgb, var(--mn-series-1) 30%, var(--w-glass)); box-shadow: var(--w-bevel); }
  .mn-bar.mn-hl::before, .mn-bar:hover::before { background: linear-gradient(90deg, rgb(255 255 255 / .35) 0 30%, transparent 30%), var(--mn-series-1); }
  .mn-donut { --thick: 22%; }
}}

/* ── SHIRATAKI ─────────────────────────────────────────────────────────────
   Konjac "white waterfall" noodles: translucent, gelatinous, springy,
   slippery. Pearl surfaces with a glossy highlight blob; controls jiggle
   when pressed; everything overshoots and settles like jelly. */
@keyframes shirataki-in { 0% { opacity: 0; transform: scale(.7, 1.15); } 45% { opacity: 1; transform: scale(1.08, .92); } 70% { transform: scale(.97, 1.03); } 100% { transform: none; } }
@keyframes shirataki-jiggle { 0% { transform: scale(1); } 25% { transform: scale(1.1, .88); } 50% { transform: scale(.94, 1.06); } 75% { transform: scale(1.03, .97); } 100% { transform: scale(1); } }
@keyframes shirataki-blob { 0%, 100% { border-radius: 58% 42% 55% 45% / 45% 55% 45% 55%; transform: rotate(0); } 50% { border-radius: 42% 58% 45% 55% / 58% 42% 58% 42%; transform: rotate(180deg); } }
@keyframes shirataki-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.82); } }

@layer mian.noodles { @scope ([data-noodle="shirataki"]) to ([data-noodle]:not([data-noodle="shirataki"])) {
  :scope {
    --mn-enter: shirataki-in; --mn-enter-duration: 480ms; --mn-ease-enter: cubic-bezier(.3, 1.3, .5, 1);
    --mn-duration: 220ms; --mn-spring: cubic-bezier(.5, 2, .5, .75);
    --s-gloss: radial-gradient(ellipse 60% 45% at 30% 12%, rgb(255 255 255 / .55), transparent 70%);
    --mn-bar-radius: 999px; --mn-bar-gap: 10px; --mn-line-width: 5px; --mn-area-opacity: .15; --mn-point-opacity: 1;
    --mn-bar-fill: color-mix(in oklab, var(--mn-series-1) 30%, var(--mn-surface));
  }
  .mn-card, .mn-table-wrap, .mn-list, .mn-accordion, .mn-stats, .mn-menu, .mn-popover, .mn-modal, .mn-toast {
    background-image: var(--s-gloss); border-color: color-mix(in oklab, var(--mn-border) 60%, transparent);
    box-shadow: 0 10px 30px -14px color-mix(in oklab, var(--mn-primary) 40%, transparent), inset 0 1px 0 rgb(255 255 255 / .6);
  }

  /* Buttons: glossy jelly that jiggles. */
  .mn-btn { background-image: var(--s-gloss); border: 0; box-shadow: 0 6px 16px -6px color-mix(in oklab, var(--_c, var(--mn-primary)) 60%, transparent), inset 0 -3px 0 rgb(0 0 0 / .1); }
  .mn-btn:hover { transform: scale(1.03); transition: transform 300ms var(--mn-spring); }
  .mn-btn:active { animation: shirataki-jiggle 420ms ease-out; transform: none; }
  .mn-btn-outline { border: 2px solid color-mix(in oklab, var(--_c, var(--mn-fg)) 25%, transparent); background-image: none; box-shadow: none; }
  .mn-btn-ghost, .mn-btn-link { background-image: none; box-shadow: none; }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input {
    border-color: transparent; background-color: var(--mn-surface-2);
    box-shadow: inset 0 2px 6px rgb(0 0 0 / .07), inset 0 -1px 0 rgb(255 255 255 / .6);
  }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within, .mn-number:focus-within, .mn-otp > input:focus {
    background-color: var(--mn-surface); border-color: transparent;
    box-shadow: 0 0 0 3px var(--mn-ring), 0 8px 20px -8px color-mix(in oklab, var(--mn-ring) 60%, transparent);
    animation: shirataki-jiggle 380ms ease-out;
  }
  .mn-input-group > .mn-input { box-shadow: none; animation: none; background: transparent; }
  .mn-addon { background: transparent; border: 0 !important; }
  .mn-checkbox, .mn-radio { --_s: 1.35rem; border-radius: 40%; border: 0; background: var(--mn-surface-2); box-shadow: inset 0 2px 4px rgb(0 0 0 / .1); }
  .mn-radio { border-radius: 50%; }
  .mn-checkbox:checked, .mn-radio:checked { background-image: var(--s-gloss); animation: shirataki-jiggle 380ms ease-out; box-shadow: 0 4px 10px -4px var(--_on); }
  /* Switch: a jelly bead that overshoots and wobbles. */
  .mn-switch { --_w: 2.8rem; --_hh: 1.6rem; background: var(--mn-surface-2); box-shadow: inset 0 2px 5px rgb(0 0 0 / .12); }
  .mn-switch::before { background: #fff var(--s-gloss); box-shadow: 0 3px 8px rgb(0 0 0 / .18); transition: transform 520ms var(--mn-spring); }
  .mn-switch:checked { background: var(--_on) var(--s-gloss); }
  .mn-switch:checked::before { background: #fff; }
  .mn-switch:active::before { animation: shirataki-jiggle 380ms ease-out; }
  .mn-slider { --_track: 10px; --_thumb: 1.5rem; }
  .mn-slider::-webkit-slider-thumb { border: 0; background: #fff var(--s-gloss); box-shadow: 0 3px 8px rgb(0 0 0 / .2); transition: transform 380ms var(--mn-spring); }
  .mn-slider::-moz-range-thumb { border: 0; background: #fff; box-shadow: 0 3px 8px rgb(0 0 0 / .2); }
  .mn-slider:active::-webkit-slider-thumb { transform: scale(1.25, .85); }

  .mn-card { border-radius: 28px; transition: transform 400ms var(--mn-spring); }
  a.mn-card:hover { transform: scale(1.015); }

  /* Tables: rows are soft blobs that swell under the pointer. */
  .mn-table-wrap { border-radius: 26px; padding: 6px; }
  .mn-table { border-collapse: separate; border-spacing: 0 4px; }
  .mn-table th, .mn-table td { border: 0; }
  .mn-table thead th { background: none; font-weight: 600; }
  .mn-table tbody td:first-child { border-radius: 18px 0 0 18px; }
  .mn-table tbody td:last-child { border-radius: 0 18px 18px 0; }
  .mn-table tbody tr { transition: transform 350ms var(--mn-spring); }
  .mn-table-hover tbody tr:hover { background: none; transform: scale(1.01); }
  .mn-table-hover tbody tr:hover td, .mn-table-striped tbody tr:nth-child(even) td { background: var(--mn-surface-2); }
  .mn-table-striped tbody tr:nth-child(even) { background: none; }

  .mn-badge { background-image: var(--s-gloss); height: 1.55rem; padding-inline: .8em; }
  .mn-chip { border: 0; background: var(--mn-surface-2) var(--s-gloss); }
  .mn-tab-list { border-bottom: 0; background: var(--mn-surface-2); border-radius: 999px; padding: 4px; gap: 2px; display: inline-flex; max-width: 100%; }
  .mn-tab { border-radius: 999px; height: calc(var(--mn-size-md) - 8px); }
  .mn-tab::after { display: none; }
  .mn-tab[aria-selected="true"] { background: var(--mn-surface) var(--s-gloss); box-shadow: 0 3px 8px rgb(0 0 0 / .1); animation: shirataki-jiggle 400ms ease-out; }
  .mn-tabs-boxed .mn-tab-list { border-radius: 999px; }
  .mn-toggle-group { border-radius: 999px; padding: 4px; }
  .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 999px; }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background-image: var(--s-gloss); animation: shirataki-jiggle 400ms ease-out; }

  .mn-progress { height: .9rem; background: var(--mn-surface-2); box-shadow: inset 0 2px 4px rgb(0 0 0 / .1); }
  .mn-progress::after { background: var(--_p) var(--s-gloss); transition: width 700ms var(--mn-spring); }
  .mn-progress:not([aria-valuenow])::after { animation: mn-indeterminate 1.3s var(--mn-ease) infinite, shirataki-breathe .65s ease-in-out infinite; }
  .mn-radial::before { background: var(--mn-bg) var(--s-gloss); }
  .mn-spinner { border: 0; background: var(--_c, currentColor) var(--s-gloss); opacity: .8; animation: shirataki-blob 1.6s ease-in-out infinite; }
  .mn-alert { border: 0; border-radius: 22px; background-image: var(--s-gloss); }
  .mn-avatar { box-shadow: inset 0 0 0 999px transparent, 0 4px 10px -4px rgb(0 0 0 / .3); }
  .mn-step::before { border: 0; background: var(--mn-surface-2) var(--s-gloss); }
  .mn-step[data-state="complete"]::before { background: var(--mn-primary) var(--s-gloss); }
  .mn-step + .mn-step::after { height: 6px; top: calc(1rem - 3px); border-radius: 6px; }
  .mn-menu-item, .mn-page { border-radius: 14px; }
  .mn-page[aria-current="page"] { background: var(--mn-primary) var(--s-gloss); color: var(--mn-primary-fg); border: 0; }

  /* Charts: jelly blobs. */
  .mn-bar::before { background-image: var(--s-gloss); transition: height 700ms var(--mn-spring), transform 400ms var(--mn-spring); transform-origin: bottom; }
  .mn-bar:hover::before { transform: scale(1.1, .95); }
  .mn-chart-line .mn-point { r: 5; }
  .mn-donut { --thick: 58%; filter: drop-shadow(0 6px 10px color-mix(in oklab, var(--mn-series-1) 30%, transparent)); }
}}
@layer mian.noodles { @scope ([data-noodle="shirataki"]) to ([data-noodle]:not([data-noodle="shirataki"])) {
  /* The unchecked style above sets a background; restate the checked one in this layer. */
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); }
}}

/* ── CHA SOBA ──────────────────────────────────────────────────────────────
   Green-tea soba and the tea ceremony. Washi paper texture, hand-drawn
   brush outlines, hanko-seal badges, ensō rings, and slow, deliberate
   motion where things appear like ink spreading into paper. */
@keyframes chasoba-ink { from { opacity: 0; clip-path: circle(0% at 30% 20%); filter: blur(4px); } to { clip-path: circle(150% at 30% 20%); } }
@keyframes chasoba-enso { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="chasoba"]) to ([data-noodle]:not([data-noodle="chasoba"])) {
  :scope {
    --mn-enter: chasoba-ink; --mn-enter-duration: 460ms; --mn-ease-enter: cubic-bezier(.3, .1, .2, 1);
    --mn-duration: 280ms; --mn-spring: cubic-bezier(.3, .1, .2, 1);
    --c-washi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .42 0 0 0 0 .3 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3Cg stroke='%23857a5c' stroke-opacity='.12' fill='none'%3E%3Cpath d='M10 40 q40 -8 80 4'/%3E%3Cpath d='M120 150 q30 10 70 -6'/%3E%3Cpath d='M40 190 q20 -12 50 -2'/%3E%3Cpath d='M150 60 q25 6 55 -4'/%3E%3C/g%3E%3C/svg%3E");
    --c-brush: 255px 14px 225px 16px / 16px 225px 14px 255px;
    --c-brush-2: 12px 240px 14px 255px / 255px 14px 230px 12px;
    --c-hanko: light-dark(#b4232a, #ec6a66);
    --mn-bar-radius: 0; --mn-bar-gap: 9px; --mn-line-width: 3.5px; --mn-area-opacity: .1;
    background-image: var(--c-washi), var(--mn-bg-image);
  }
  .mn-card, .mn-table-wrap, .mn-list, .mn-accordion, .mn-stats, .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer, .mn-input, .mn-textarea { background-image: var(--c-washi); }

  /* Buttons: a brush stroke. */
  .mn-btn { border-radius: var(--c-brush); box-shadow: none; border-width: 2px; font-family: var(--mn-font-heading); font-weight: 600; letter-spacing: .02em; transition: transform 280ms var(--mn-spring), background-color 280ms, box-shadow 280ms; }
  .mn-btn:hover { transform: rotate(-.6deg); box-shadow: 2px 3px 0 color-mix(in oklab, var(--mn-fg) 12%, transparent); }
  .mn-btn:active { transform: scale(.98) rotate(.4deg); }
  .mn-btn-outline { border-radius: var(--c-brush-2); border-color: var(--_c, var(--mn-fg)); }
  .mn-btn-link { font-family: var(--mn-font); }

  /* Fields: paper with a brushed line to write on. */
  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input {
    border: 0; border-bottom: 2px solid var(--mn-fg); border-radius: 0 0 6px 18px / 0 0 3px 5px; background-color: var(--mn-surface); box-shadow: none;
  }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within, .mn-number:focus-within, .mn-otp > input:focus { border-bottom-color: var(--mn-primary); box-shadow: 0 6px 10px -8px var(--mn-primary); }
  .mn-input-group > .mn-input { border: 0; }
  .mn-addon { background: transparent; border: 0 !important; font-family: var(--mn-font-heading); }
  .mn-label { font-family: var(--mn-font-heading); font-size: .9375rem; }
  .mn-checkbox, .mn-radio { border-radius: 3px 6px 4px 7px; border: 2px solid var(--mn-fg); box-shadow: none; }
  .mn-radio { border-radius: 48% 52% 50% 46%; }
  /* Switch: a square seal slides across. */
  .mn-switch { border-radius: 3px; --_hh: 1.35rem; --_w: 2.7rem; background: var(--mn-surface-2); box-shadow: inset 0 0 0 1.5px var(--mn-fg); }
  .mn-switch::before { border-radius: 2px; background: var(--mn-fg); box-shadow: none; transition: transform 320ms var(--mn-spring); }
  .mn-switch:checked { background: color-mix(in oklab, var(--mn-primary) 22%, var(--mn-surface-2)); }
  .mn-switch:checked::before { background: var(--c-hanko); box-shadow: inset 0 0 0 2px var(--c-hanko), inset 0 0 0 3.5px #fff; }
  .mn-slider::-webkit-slider-thumb { border-radius: 2px; transform: rotate(45deg); border-color: var(--mn-fg); box-shadow: none; }
  .mn-slider::-moz-range-thumb { border-radius: 2px; border-color: var(--mn-fg); box-shadow: none; }

  .mn-card { border-radius: 3px 5px 4px 6px; border: 1px solid color-mix(in oklab, var(--mn-fg) 18%, transparent); box-shadow: 3px 4px 0 color-mix(in oklab, var(--mn-primary) 12%, transparent); }
  .mn-card-title { font-size: 1.2rem; font-weight: 500; }
  .mn-card-header { position: relative; padding-bottom: .9rem; }
  .mn-card-header::after { content: ""; position: absolute; left: 1.25rem; bottom: 0; width: 3.5rem; height: 3px; border-radius: var(--c-brush); background: var(--mn-primary); }

  /* Tables: a brushed header line, ink rules, serif first column. */
  .mn-table-wrap { border-radius: 3px; }
  .mn-table thead th { background: none; font-family: var(--mn-font-heading); font-size: .9375rem; font-weight: 500; color: var(--mn-fg); border-bottom: 3px solid var(--mn-fg); border-radius: 0 0 40% 10% / 0 0 3px 2px; }
  .mn-table tbody td:first-child { font-family: var(--mn-font-heading); }
  .mn-table td { border-bottom-color: color-mix(in oklab, var(--mn-fg) 14%, transparent); }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--mn-primary) 7%, transparent); }

  /* Badges: hanko seals. */
  .mn-badge { border-radius: 2px; height: 1.45rem; font-family: var(--mn-font-heading); font-weight: 700; color: var(--_ct, var(--c-hanko)); background: transparent; border: 2px solid currentColor; box-shadow: inset 0 0 0 1.5px var(--mn-surface), inset 0 0 0 3px color-mix(in oklab, currentColor 25%, transparent); rotate: -3deg; }
  .mn-badge-soft { background: color-mix(in oklab, var(--_c, var(--c-hanko)) 8%, transparent); color: var(--_ct, var(--mn-primary-text)); }
  .mn-chip { border-radius: var(--c-brush-2); }
  .mn-tab-list { border-bottom: 1px solid color-mix(in oklab, var(--mn-fg) 20%, transparent); }
  .mn-tab { font-family: var(--mn-font-heading); font-size: .9375rem; }
  .mn-tab::after { height: 4px; bottom: -2px; border-radius: var(--c-brush); }
  .mn-tab[aria-selected="true"]::after { background: var(--mn-primary); }
  .mn-tabs-boxed .mn-tab-list { border-radius: 4px; }
  .mn-tabs-boxed .mn-tab { border-radius: var(--c-brush); }
  .mn-tabs-boxed .mn-tab[aria-selected="true"] { box-shadow: none; background: var(--mn-primary); color: var(--mn-primary-fg); }
  .mn-toggle-group { border-radius: 4px; }
  .mn-toggle-group > button, .mn-toggle-group > label { border-radius: var(--c-brush); font-family: var(--mn-font-heading); }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { box-shadow: none; background: var(--mn-primary); color: var(--mn-primary-fg); }

  /* Progress: a single brush stroke. */
  .mn-progress { height: .7rem; border-radius: 3px; background: var(--mn-surface-2); box-shadow: none; }
  .mn-progress::after { border-radius: var(--c-brush); background: var(--_p) var(--c-washi); transition: width 900ms var(--mn-spring); }
  /* Radial and spinner: the ensō. */
  .mn-radial { background: conic-gradient(from 20deg, var(--_c, var(--mn-primary)) calc(var(--_v) * 1%), color-mix(in oklab, var(--mn-surface-2), transparent 30%) 0 96%, transparent 0); font-family: var(--mn-font-heading); }
  .mn-spinner { border: 0; background: conic-gradient(from 30deg, transparent 0 8%, var(--_c, currentColor) 20% 92%, transparent); -webkit-mask: radial-gradient(closest-side, transparent 60%, #000 64% 88%, transparent 94%); mask: radial-gradient(closest-side, transparent 60%, #000 64% 88%, transparent 94%); animation: chasoba-enso 2.2s var(--mn-spring) infinite; }
  .mn-alert { border: 0; border-radius: 3px; border-left: 4px solid var(--_a); background-image: var(--c-washi); }
  .mn-avatar { border-radius: 46% 54% 50% 50% / 52% 48% 54% 46%; box-shadow: 0 0 0 2px var(--mn-fg); }
  .mn-step::before { border-radius: 48% 52% 50% 46%; border-color: var(--mn-fg); font-family: var(--mn-font-heading); }
  .mn-step[data-state="complete"]::before { background: var(--c-hanko); border-color: var(--c-hanko); color: #fff; border-radius: 2px; }
  .mn-step + .mn-step::after { height: 3px; border-radius: var(--c-brush); }
  .mn-menu-item, .mn-page { border-radius: var(--c-brush); }
  .mn-page[aria-current="page"] { border: 2px solid var(--mn-fg); box-shadow: none; background: none; }
  .mn-stat-value { font-family: var(--mn-font-heading); font-weight: 500; }
  .mn-kbd { font-family: var(--mn-font-heading); }

  /* Charts: brush-stroke bars and an ensō donut. */
  .mn-bar::before { border-radius: 40% 60% 2px 4px / 6px 8px 2px 2px; background-image: var(--c-washi); transform: skewX(-2deg); }
  .mn-bar.mn-hl::before, .mn-bar:hover::before { background-color: var(--mn-series-1); }
  .mn-chart-h .mn-bar::before { border-radius: 2px 60% 4px 40% / 2px 8px 2px 6px; transform: skewY(-1deg); }
  .mn-donut { --thick: 28%; --mn-donut-start: 17deg; }
}}

/* ── DAOXIAO ───────────────────────────────────────────────────────────────
   Knife-shaved noodles from Shanxi: shaved straight off a block of dough
   into the pot, each thick in the middle and thin at the edges like a
   willow leaf, with a ridged, hand-cut surface. A carved system: diagonal
   shaved-stroke textures, a raised ridge down the middle of controls,
   willow-leaf corners, and a quick flick into place. */
@keyframes daoxiao-in { from { opacity: 0; transform: translate(10px, -8px) rotate(2deg); } }
@keyframes daoxiao-shave { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="daoxiao"]) to ([data-noodle]:not([data-noodle="daoxiao"])) {
  :scope {
    --mn-enter: daoxiao-in; --mn-enter-duration: 220ms; --mn-ease-enter: cubic-bezier(.2, .9, .3, 1.1);
    --mn-duration: 150ms; --mn-spring: cubic-bezier(.2, .9, .3, 1.15);
    --dx-shave: repeating-linear-gradient(-28deg, transparent 0 5px, light-dark(rgb(120 90 50 / .07), rgb(255 230 190 / .045)) 5px 6px, transparent 6px 11px, light-dark(rgb(255 255 255 / .35), rgb(0 0 0 / .18)) 11px 12px);
    --dx-ridge: linear-gradient(180deg, rgb(255 255 255 / .22), transparent 45% 55%, rgb(0 0 0 / .14));
    --dx-leaf: 18px 4px 18px 4px;
    --dx-leaf-sm: 10px 3px 10px 3px;
    --mn-bar-radius: 12px; --mn-bar-gap: 5px; --mn-line-width: 3px; --mn-area-opacity: .14;
    --mn-bar-fill: color-mix(in oklab, var(--mn-series-1) 26%, var(--mn-surface));
  }
  :scope { background-image: var(--mn-bg-image), var(--dx-shave); }

  /* Buttons: willow leaves with a raised ridge down the middle. */
  .mn-btn { border-radius: var(--dx-leaf-sm); background-image: var(--dx-ridge); box-shadow: 0 2px 0 color-mix(in oklab, var(--_c, var(--mn-primary)), #000 35%); font-weight: 700; transition: transform 150ms var(--mn-spring), box-shadow 150ms; }
  .mn-btn:hover { transform: translateY(-1px) rotate(-.5deg); }
  .mn-btn:active { transform: translateY(1px); box-shadow: 0 0 0 transparent; }
  .mn-btn-outline { --_bd: var(--mn-input); background: var(--mn-surface) var(--dx-shave); box-shadow: 0 2px 0 var(--mn-border); }
  .mn-btn-outline:hover { background-color: var(--mn-surface-2); }
  .mn-btn-soft { background-image: var(--dx-shave); box-shadow: none; }
  .mn-btn-ghost, .mn-btn-link { background-image: none; box-shadow: none; }
  .mn-btn-ghost:hover, .mn-btn-link:hover { transform: none; }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { border-radius: var(--dx-leaf-sm); box-shadow: inset 0 2px 3px light-dark(rgb(90 60 20 / .1), rgb(0 0 0 / .35)); }
  .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-ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mn-ring) 22%, transparent), inset 0 2px 3px rgb(0 0 0 / .08); }
  .mn-input-group > .mn-input { box-shadow: none; }
  .mn-checkbox { border-radius: 6px 2px; box-shadow: none; }
  .mn-radio { box-shadow: none; }
  /* Switch: a carved groove with a leaf-shaped knob. */
  .mn-switch { --_w: 2.8rem; --_hh: 1.45rem; border-radius: var(--dx-leaf-sm); background: var(--mn-surface-2) var(--dx-shave); box-shadow: inset 0 2px 3px rgb(0 0 0 / .15); }
  .mn-switch::before { border-radius: 10px 2px; background: var(--mn-surface) var(--dx-ridge); box-shadow: 0 1px 2px rgb(0 0 0 / .25); }
  .mn-switch:checked { background: var(--_on) var(--dx-shave); }
  .mn-switch:checked::before { background: var(--_onf) var(--dx-ridge); }
  .mn-slider { --_track: 6px; }
  .mn-slider::-webkit-slider-thumb { border-radius: 10px 2px; background: var(--mn-surface); box-shadow: 0 1px 3px rgb(0 0 0 / .3); }
  .mn-slider::-moz-range-thumb { border-radius: 10px 2px; background: var(--mn-surface); box-shadow: 0 1px 3px rgb(0 0 0 / .3); }

  /* Cards: shaved surfaces with a willow-leaf corner. */
  .mn-card, .mn-table-wrap, .mn-alert { border-radius: var(--dx-leaf); }
  .mn-card { background-image: var(--dx-shave); box-shadow: 0 2px 0 var(--mn-border), 0 12px 24px -18px rgb(60 40 10 / .4); }
  .mn-card-title { font-weight: 750; letter-spacing: -.02em; }
  .mn-card-footer-bordered { background: var(--mn-surface-2) var(--dx-shave); }

  .mn-table thead th { background: var(--mn-surface-2) var(--dx-shave); font-weight: 700; }
  .mn-table-hover tbody tr:hover { background: var(--dx-shave); background-color: color-mix(in oklab, var(--mn-primary) 5%, transparent); }

  .mn-badge { border-radius: var(--dx-leaf-sm); background-image: var(--dx-ridge); font-weight: 700; }
  .mn-chip { border-radius: var(--dx-leaf-sm); }
  .mn-kbd { box-shadow: 0 2px 0 var(--mn-border); }

  /* Tabs: the current tab is a shaved leaf lifted out of the strip. */
  .mn-tab-list { border-bottom-width: 2px; }
  .mn-tab { font-weight: 650; border-radius: var(--dx-leaf-sm) var(--dx-leaf-sm) 0 0; }
  .mn-tab::after { height: 4px; border-radius: 4px 1px; }
  .mn-tab[aria-selected="true"] { background: var(--mn-surface-2) var(--dx-shave); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { border-radius: 12px 4px; }
  .mn-tabs-boxed .mn-tab, .mn-toggle-group > button, .mn-toggle-group > label { border-radius: var(--dx-leaf-sm); }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-surface) var(--dx-ridge); box-shadow: 0 2px 0 var(--mn-border); }

  /* Progress: a strip being shaved off. */
  .mn-progress { height: .7rem; border-radius: 8px 2px; background: var(--mn-surface-2) var(--dx-shave); box-shadow: inset 0 1px 2px rgb(0 0 0 / .12); }
  .mn-progress::after { border-radius: 8px 2px; background: var(--_p) var(--dx-ridge); }
  .mn-radial { --_t: .5rem; }
  /* Spinner: a leaf spun off the blade. */
  .mn-spinner { border: 0; border-radius: 80% 0; background: var(--_c, currentColor) var(--dx-ridge); width: calc(var(--_s) * .8); height: calc(var(--_s) * .8); margin: calc(var(--_s) * .1); animation: daoxiao-shave .7s cubic-bezier(.6, 0, .3, 1) infinite; }

  .mn-avatar { border-radius: 12px 4px; }
  .mn-step::before { border-radius: 10px 3px; }
  .mn-step + .mn-step::after { height: 3px; border-radius: 3px 1px; }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast { border-radius: 20px 6px; box-shadow: 0 3px 0 var(--mn-border), 0 18px 36px -18px rgb(60 40 10 / .4); }
  .mn-menu-item, .mn-page { border-radius: var(--dx-leaf-sm); }
  .mn-page[aria-current="page"] { background: var(--mn-surface) var(--dx-ridge); }

  /* Charts: leaf-shaped bars with a ridge. */
  .mn-bar::before { border-radius: 14px 3px 0 0; background-image: var(--dx-ridge); }
  .mn-chart-h .mn-bar::before { border-radius: 0 14px 3px 0; }
  .mn-donut { --thick: 30%; }
}}

/* ── PICI ──────────────────────────────────────────────────────────────────
   Thick strands rolled one by one between the palms, no two alike. A
   hand-made system: irregular corners, slightly uneven ink borders, a warm
   book serif for headings, rust and olive on unbleached paper. */
@keyframes pici-in { from { opacity: 0; transform: translateY(6px) rotate(-.4deg); } }
@keyframes pici-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="pici"]) to ([data-noodle]:not([data-noodle="pici"])) {
  :scope {
    --mn-enter: pici-in; --mn-enter-duration: 240ms; --mn-ease-enter: cubic-bezier(.3, .7, .3, 1);
    --mn-duration: 180ms;
    --pc-ink: 1.5px solid color-mix(in srgb, var(--mn-fg) 55%, transparent);
    --pc-r1: 12px 16px 10px 18px / 14px 10px 16px 12px;
    --pc-r2: 20px 14px 22px 12px / 12px 22px 14px 20px;
    --pc-r3: 8px 11px 7px 10px / 10px 7px 11px 8px;
    --mn-bar-radius: 6px 9px 0 0; --mn-bar-gap: 7px; --mn-line-width: 2.5px;
    --mn-bar-fill: color-mix(in oklab, var(--mn-primary) 70%, var(--mn-surface)); --mn-bar-fill-hl: var(--mn-accent);
  }

  .mn-btn { border-radius: var(--pc-r3); box-shadow: none; font-weight: 600; }
  .mn-btn-outline { border: var(--pc-ink); }
  .mn-btn:hover { transform: translateY(-1px) rotate(-.4deg); }
  .mn-btn:active { transform: none; }

  .mn-input, .mn-select, .mn-textarea, .mn-number, .mn-input-group { border: var(--pc-ink); border-radius: var(--pc-r3); box-shadow: none; background-color: var(--mn-surface); }
  .mn-input-group > .mn-input { border: 0; }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within { border-color: var(--mn-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mn-primary) 20%, transparent); }
  .mn-checkbox { border: var(--pc-ink); border-radius: 4px 6px 3px 5px; }
  .mn-radio { border: var(--pc-ink); }
  .mn-switch { background: var(--mn-surface-2); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mn-fg) 45%, transparent); border-radius: 999px 900px 999px 950px; }
  .mn-switch:checked { background: var(--mn-primary); box-shadow: none; }

  .mn-card, .mn-table-wrap, .mn-accordion, .mn-list, .mn-stats { border: var(--pc-ink); border-radius: var(--pc-r1); box-shadow: 0 2px 0 color-mix(in srgb, var(--mn-fg) 8%, transparent); }
  .mn-card:nth-child(2n), .mn-tile:nth-child(2n) { border-radius: var(--pc-r2); }
  .mn-card-title { font-weight: 700; }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { border: var(--pc-ink); border-radius: var(--pc-r1); box-shadow: 0 14px 34px color-mix(in srgb, var(--mn-fg) 16%, transparent); }

  .mn-table th, .mn-table td { border-bottom: 1px dashed color-mix(in srgb, var(--mn-fg) 30%, transparent); }
  .mn-table thead th { background: transparent; font-family: var(--mn-font-heading); font-weight: 700; border-bottom: var(--pc-ink); }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--mn-accent) 8%, transparent); }

  .mn-badge { border-radius: 999px 800px 999px 700px; font-weight: 600; }
  .mn-chip { border: var(--pc-ink); border-radius: 999px 800px 999px 700px; }

  .mn-tab { font-weight: 600; }
  .mn-tab[aria-selected="true"]::after { height: 3px; border-radius: 3px 1px 4px 2px; background: var(--mn-primary); transform: rotate(-.6deg); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { border: var(--pc-ink); border-radius: var(--pc-r3); }

  .mn-progress { height: 10px; border-radius: 6px 9px 7px 8px; background: var(--mn-surface-2); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mn-fg) 35%, transparent); }
  .mn-progress::after { border-radius: 6px 9px 7px 8px; background: var(--mn-primary); }
  .mn-spinner { border-width: 3px; border-color: color-mix(in srgb, var(--mn-fg) 15%, transparent); border-top-color: var(--mn-primary); border-radius: 48% 52% 50% 46%; animation: pici-spin 1s linear infinite; }
  .mn-alert { border: var(--pc-ink); border-radius: var(--pc-r1); }
  .mn-avatar { border-radius: 46% 54% 50% 48% / 52% 46% 54% 48%; }
  .mn-bar::before { border-radius: 6px 9px 0 0; }
  .mn-bar:nth-child(2n)::before { border-radius: 9px 5px 0 0; }
  @media (prefers-reduced-motion: reduce) { .mn-btn:hover { transform: none; } }
}}

/* ── NAENGMYEON ────────────────────────────────────────────────────────────
   Long, chewy buckwheat noodles in an ice-cold broth, served in a brushed
   stainless-steel bowl and cut at the table with scissors. A brushed-metal
   system: fine horizontal brushed-steel texture on raised surfaces and
   knobs, frosted icy highlights, cool steel greys, long steel rails, and a
   crisp snip when things open from the centre. */
@keyframes naengmyeon-in { from { opacity: 0; clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } }
@keyframes naengmyeon-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="naengmyeon"]) to ([data-noodle]:not([data-noodle="naengmyeon"])) {
  :scope {
    --mn-enter: naengmyeon-in; --mn-enter-duration: 220ms; --mn-ease-enter: cubic-bezier(.7, 0, .2, 1);
    --mn-duration: 160ms; --mn-spring: cubic-bezier(.7, 0, .2, 1);
    --nm-brush: repeating-linear-gradient(180deg, light-dark(rgb(255 255 255 / .5), rgb(255 255 255 / .035)) 0 1px, transparent 1px 2px, light-dark(rgb(0 0 0 / .025), rgb(0 0 0 / .18)) 2px 3px, transparent 3px 5px);
    --nm-steel: linear-gradient(180deg, light-dark(#f7f9fb, #2a323c), light-dark(#dbe1e8, #1a2028));
    --nm-steel-dark: linear-gradient(180deg, light-dark(#5b6878, #d6dde6), light-dark(#334155, #aab6c4));
    --nm-rim: inset 0 1px 0 light-dark(rgb(255 255 255 / .9), rgb(255 255 255 / .14)), inset 0 -1px 0 light-dark(rgb(15 23 42 / .12), rgb(0 0 0 / .45));
    --nm-frost: 0 0 0 1px light-dark(rgb(186 230 253 / .7), rgb(125 211 252 / .18));
    --mn-bar-radius: 3px; --mn-bar-gap: 6px; --mn-line-width: 2px; --mn-area-opacity: .1; --mn-point-opacity: 0;
    --mn-bar-fill: var(--mn-surface-2); --mn-bar-fill-hl: var(--mn-primary);
  }

  /* Raised steel: brushed texture, a bright top rim, a dark bottom rim. */
  .mn-btn { background-image: var(--nm-brush); box-shadow: var(--nm-rim), 0 1px 2px rgb(0 0 0 / .18); font-weight: 600; letter-spacing: .01em; }
  .mn-btn:not(.mn-btn-outline, .mn-btn-soft, .mn-btn-ghost, .mn-btn-link):not(.mn-primary, .mn-secondary, .mn-accent, .mn-success, .mn-warning, .mn-danger, .mn-info, .mn-neutral) { background: var(--nm-steel-dark); }
  .mn-btn:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgb(0 0 0 / .3); }
  .mn-btn-outline { --_bd: var(--mn-input); background: var(--nm-brush), var(--nm-steel); --_fg: var(--_ct, var(--mn-fg)); }
  .mn-btn-outline:hover { box-shadow: var(--nm-rim), var(--nm-frost); }
  .mn-btn-ghost, .mn-btn-link { background-image: none; box-shadow: none; }

  /* Fields: cold recessed steel; focus frosts the edge. */
  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { background-color: light-dark(#f4f6f8, #10151b); box-shadow: inset 0 1px 3px light-dark(rgb(15 23 42 / .12), rgb(0 0 0 / .5)); }
  .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-ring); box-shadow: inset 0 1px 3px rgb(15 23 42 / .1), 0 0 0 3px light-dark(rgb(186 230 253 / .8), rgb(125 211 252 / .25)); }
  .mn-input-group > .mn-input { box-shadow: none; background: transparent; }
  .mn-checkbox, .mn-radio { background: var(--nm-steel); box-shadow: var(--nm-rim); }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background: var(--_on); box-shadow: inset 0 1px 2px rgb(0 0 0 / .3); }
  /* Switch: a recessed slot with a brushed-steel slider knob. */
  .mn-switch { --_w: 2.8rem; --_hh: 1.45rem; border-radius: 7px; background: light-dark(#d5dce4, #0c1015); box-shadow: inset 0 1px 3px rgb(0 0 0 / .3); }
  .mn-switch::before { border-radius: 5px; background: var(--nm-brush), var(--nm-steel); box-shadow: var(--nm-rim), 0 1px 3px rgb(0 0 0 / .35); }
  .mn-switch:checked { background: var(--_on); }
  .mn-switch:checked::before { background: var(--nm-brush), var(--nm-steel); }
  .mn-slider { --_track: 4px; }
  .mn-slider::-webkit-slider-runnable-track { box-shadow: inset 0 1px 2px rgb(0 0 0 / .3); }
  .mn-slider::-webkit-slider-thumb { width: 1.5rem; border-radius: 5px; border: 0; background: var(--nm-brush), var(--nm-steel); box-shadow: var(--nm-rim), 0 1px 3px rgb(0 0 0 / .35); }
  .mn-slider::-moz-range-thumb { width: 1.5rem; border-radius: 5px; border: 0; background: var(--nm-steel); box-shadow: 0 1px 3px rgb(0 0 0 / .35); }

  /* Surfaces: a brushed-steel plate. */
  .mn-card, .mn-table-wrap, .mn-stats, .mn-list, .mn-accordion { background-image: var(--nm-brush), var(--nm-steel); box-shadow: var(--nm-rim), 0 10px 24px -16px rgb(15 23 42 / .35); }
  .mn-card-header { border-bottom: 1px solid var(--mn-border); padding-bottom: 1rem; margin-bottom: .25rem; }
  .mn-card-title { letter-spacing: -.01em; }
  .mn-card-footer-bordered { background: none; }

  .mn-table-wrap { background-image: none; background-color: var(--mn-surface); }
  .mn-table thead th { background: var(--nm-brush), var(--nm-steel); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
  .mn-table-hover tbody tr:hover { background: light-dark(rgb(186 230 253 / .25), rgb(125 211 252 / .06)); }

  .mn-badge { border-radius: 4px; background-image: var(--nm-brush); box-shadow: var(--nm-rim); font-weight: 600; }
  .mn-badge-outline { background: var(--nm-steel); color: var(--_ct, var(--mn-fg)); }
  .mn-chip, .mn-kbd { background: var(--nm-brush), var(--nm-steel); box-shadow: var(--nm-rim); }

  .mn-tab { font-weight: 600; }
  .mn-tab::after { height: 3px; border-radius: 1px; }
  .mn-tab[aria-selected="true"]::after { background: var(--nm-steel-dark); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { background: light-dark(#d5dce4, #0c1015); box-shadow: inset 0 1px 3px rgb(0 0 0 / .2); }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--nm-brush), var(--nm-steel); box-shadow: var(--nm-rim), 0 1px 2px rgb(0 0 0 / .25); color: var(--mn-fg); }

  /* Progress: a long steel rail with an icy fill. */
  .mn-progress { height: .5rem; border-radius: 2px; background: light-dark(#d5dce4, #0c1015); box-shadow: inset 0 1px 2px rgb(0 0 0 / .3); }
  .mn-progress::after { border-radius: 2px; background: var(--nm-brush), linear-gradient(180deg, color-mix(in oklab, var(--_p), #fff 30%), var(--_p)); }
  .mn-radial { --_t: .45rem; background: conic-gradient(var(--_c, var(--mn-accent)) calc(var(--_v) * 1%), light-dark(#d5dce4, #0c1015) 0); }
  .mn-radial::before { background: var(--nm-brush), var(--nm-steel); box-shadow: var(--nm-rim); }
  /* Spinner: a pair of steel blades turning. */
  .mn-spinner { border: 0; background: conic-gradient(var(--_c, currentColor) 0 12%, transparent 0 50%, var(--_c, currentColor) 0 62%, transparent 0); -webkit-mask: radial-gradient(closest-side, transparent 25%, #000 28%); mask: radial-gradient(closest-side, transparent 25%, #000 28%); animation: naengmyeon-spin .9s cubic-bezier(.7, 0, .3, 1) infinite; }

  .mn-alert { background-image: var(--nm-brush); box-shadow: var(--nm-rim); }
  .mn-avatar { box-shadow: 0 0 0 2px light-dark(#dbe1e8, #2a323c), 0 0 0 3px var(--mn-border); }
  .mn-step::before { background: var(--nm-brush), var(--nm-steel); box-shadow: var(--nm-rim); }
  .mn-step[data-state="complete"]::before { background: var(--nm-steel-dark); color: var(--mn-primary-fg); }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast { background-image: var(--nm-brush); box-shadow: var(--nm-rim), 0 18px 40px -18px rgb(15 23 42 / .45); }
  .mn-page[aria-current="page"] { background: var(--nm-brush), var(--nm-steel); box-shadow: var(--nm-rim); }

  /* Charts: steel bars; the highlighted one frosted blue. */
  .mn-bar::before { background: var(--nm-brush), var(--nm-steel); box-shadow: var(--nm-rim); }
  .mn-bar.mn-hl::before, .mn-bar:hover::before { background: var(--nm-brush), linear-gradient(180deg, color-mix(in oklab, var(--mn-accent), #fff 25%), var(--mn-accent)); }
  .mn-donut { --thick: 26%; }
}}

/* ── HŌTŌ ──────────────────────────────────────────────────────────────────
   Thick, flat, hand-cut noodles simmered in miso with pumpkin and root
   vegetables in a heavy iron pot. A rustic stoneware system: coarse clay
   grain on every surface, thick glazed rims on controls, hand-thrown
   (slightly uneven) radii, earthy colours, and slow motion that rises and
   settles like something simmering. */
@keyframes hoto-in { 0% { opacity: 0; transform: translateY(10px); } 70% { opacity: 1; transform: translateY(-1px); } 100% { transform: none; } }
@keyframes hoto-simmer { 0%, 100% { transform: scale(.55); opacity: .5; } 50% { transform: scale(1); opacity: 1; } }

@layer mian.noodles { @scope ([data-noodle="hoto"]) to ([data-noodle]:not([data-noodle="hoto"])) {
  :scope {
    --mn-enter: hoto-in; --mn-enter-duration: 520ms; --mn-ease-enter: cubic-bezier(.25, .8, .3, 1);
    --mn-duration: 240ms; --mn-spring: cubic-bezier(.25, .8, .3, 1);
    --ht-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .14 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.38'/%3E%3C/svg%3E");
    --ht-glaze: inset 0 2px 0 light-dark(rgb(255 255 255 / .45), rgb(255 255 255 / .08)), inset 0 -3px 0 light-dark(rgb(80 50 20 / .22), rgb(0 0 0 / .4));
    --ht-throw: 14px 18px 13px 17px / 17px 13px 18px 14px;
    --ht-throw-sm: 9px 12px 8px 11px / 11px 8px 12px 9px;
    --mn-series-1: var(--mn-primary); --mn-series-2: var(--mn-accent); --mn-series-3: light-dark(#4d7c0f, #a3e635); --mn-series-4: light-dark(#a16207, #fcd34d);
    --mn-bar-radius: 10px; --mn-bar-gap: 8px; --mn-line-width: 4px; --mn-area-opacity: .18; --mn-point-opacity: 1;
  }

  /* Buttons: glazed clay pieces. */
  .mn-btn { border-radius: var(--ht-throw-sm); background-image: var(--ht-grain); box-shadow: var(--ht-glaze), 0 3px 6px -3px rgb(60 30 10 / .4); font-weight: 650; transition: transform 240ms var(--mn-spring), box-shadow 240ms; }
  .mn-btn:hover { transform: translateY(-1px); }
  .mn-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgb(60 30 10 / .3); }
  .mn-btn-outline { --_bd: var(--mn-input); --_bg: var(--mn-surface); border-width: 1.5px; }
  .mn-btn-ghost, .mn-btn-link { background-image: none; box-shadow: none; }
  .mn-btn-ghost:hover, .mn-btn-link:hover { transform: none; }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { border-radius: var(--ht-throw-sm); border-width: 1.5px; background-color: var(--mn-surface); box-shadow: inset 0 2px 4px light-dark(rgb(80 50 20 / .12), rgb(0 0 0 / .4)); }
  .mn-textarea { border-radius: var(--ht-throw); }
  .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-ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mn-accent) 30%, transparent), inset 0 2px 4px rgb(80 50 20 / .1); }
  .mn-input-group > .mn-input { box-shadow: none; }
  .mn-checkbox { border-radius: 6px 7px 5px 8px; border-width: 1.5px; box-shadow: none; }
  .mn-radio { border-width: 1.5px; box-shadow: none; }
  /* Switch: a clay groove with a round glazed pebble. */
  .mn-switch { --_w: 2.9rem; --_hh: 1.6rem; background: var(--mn-surface-2) var(--ht-grain); box-shadow: inset 0 2px 4px rgb(60 30 10 / .25); }
  .mn-switch::before { background: var(--mn-surface) var(--ht-grain); box-shadow: var(--ht-glaze), 0 2px 4px rgb(60 30 10 / .35); transition: transform 360ms var(--mn-spring); }
  .mn-switch:checked { background: var(--_on) var(--ht-grain); }
  .mn-slider { --_track: 8px; --_thumb: 1.35rem; }
  .mn-slider::-webkit-slider-runnable-track { box-shadow: inset 0 2px 3px rgb(60 30 10 / .25); }
  .mn-slider::-webkit-slider-thumb { border: 0; background: var(--mn-surface) var(--ht-grain); box-shadow: var(--ht-glaze), 0 2px 4px rgb(60 30 10 / .35); }
  .mn-slider::-moz-range-thumb { border: 0; background: var(--mn-surface); box-shadow: 0 2px 4px rgb(60 30 10 / .35); }

  /* Surfaces: stoneware, grain, a glazed rim, a heavy soft shadow. */
  .mn-card, .mn-table-wrap, .mn-stats, .mn-list, .mn-accordion, .mn-alert { border-radius: var(--ht-throw); background-image: var(--ht-grain); box-shadow: var(--ht-glaze), 0 14px 28px -18px rgb(60 30 10 / .45); }
  .mn-card { border-width: 1.5px; }
  .mn-card-footer-bordered { background: var(--mn-surface-2) var(--ht-grain); }

  .mn-table thead th { background: var(--mn-surface-2) var(--ht-grain); font-weight: 700; }
  .mn-table td { border-bottom-style: dashed; }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--mn-accent) 7%, transparent); }

  .mn-badge { border-radius: var(--ht-throw-sm); background-image: var(--ht-grain); box-shadow: var(--ht-glaze); }
  .mn-chip { border-radius: var(--ht-throw-sm); background-image: var(--ht-grain); }
  .mn-kbd { background-image: var(--ht-grain); box-shadow: var(--ht-glaze); }

  .mn-tab { font-weight: 650; }
  .mn-tab::after { height: 4px; border-radius: 4px 3px 5px 2px; }
  .mn-tab[aria-selected="true"]::after { background: var(--mn-accent); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { border-radius: var(--ht-throw); background: var(--mn-surface-2) var(--ht-grain); box-shadow: inset 0 2px 4px rgb(60 30 10 / .15); }
  .mn-tabs-boxed .mn-tab, .mn-toggle-group > button, .mn-toggle-group > label { border-radius: var(--ht-throw-sm); }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-surface) var(--ht-grain); box-shadow: var(--ht-glaze), 0 2px 4px rgb(60 30 10 / .25); }

  /* Progress: a clay trough filling with glaze. */
  .mn-progress { height: .8rem; border-radius: 6px 8px 5px 7px; background: var(--mn-surface-2) var(--ht-grain); box-shadow: inset 0 2px 3px rgb(60 30 10 / .25); }
  .mn-progress::after { border-radius: inherit; background: var(--_p) var(--ht-grain); box-shadow: inset 0 2px 0 rgb(255 255 255 / .3); }
  .mn-radial::before { background: var(--mn-surface) var(--ht-grain); }
  /* Spinner: a bubble rising and settling in the pot. */
  .mn-spinner { border: 0; background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .5), transparent 45%), var(--_c, var(--mn-accent)); animation: hoto-simmer 1.2s ease-in-out infinite; }

  .mn-avatar { border-radius: var(--ht-throw); box-shadow: var(--ht-glaze); }
  .mn-step::before { border-radius: var(--ht-throw-sm); border-width: 1.5px; }
  .mn-step + .mn-step::after { height: 3px; border-radius: 3px; }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast { border-radius: var(--ht-throw); background-image: var(--ht-grain); box-shadow: var(--ht-glaze), 0 20px 40px -20px rgb(60 30 10 / .5); }
  .mn-menu-item, .mn-page { border-radius: var(--ht-throw-sm); }

  /* Charts: clay bars in four vegetable colours. */
  .mn-bar::before { border-radius: 10px 12px 0 0; background-image: var(--ht-grain); }
  .mn-bar:nth-child(4n + 2)::before { --mn-bar-fill: color-mix(in oklab, var(--mn-series-2) 30%, var(--mn-surface)); }
  .mn-bar:nth-child(4n + 3)::before { --mn-bar-fill: color-mix(in oklab, var(--mn-series-3) 30%, var(--mn-surface)); }
  .mn-chart-h .mn-bar::before { border-radius: 0 12px 10px 0; }
  .mn-donut { --thick: 34%; }
}}

/* ── RAMEN ─────────────────────────────────────────────────────────────────
   Curly alkaline noodles in a loud, rich bowl. Wavy underlines, wavy
   dividers and wave-topped bars; heavy outlines with hard offset shadows;
   sticker-like toppings; things rise into place like steam. */
@keyframes ramen-steam { from { opacity: 0; transform: translateY(14px); filter: blur(3px); } }
@keyframes ramen-flow { to { background-position: 28px 0; } }

@layer mian.noodles { @scope ([data-noodle="ramen"]) to ([data-noodle]:not([data-noodle="ramen"])) {
  :scope {
    --mn-enter: ramen-steam; --mn-enter-duration: 260ms; --mn-ease-enter: cubic-bezier(.2, .8, .2, 1.2);
    --mn-duration: 140ms; --mn-spring: cubic-bezier(.2, .8, .2, 1.15);
    --r-ink: var(--mn-fg);
    --r-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='8' viewBox='0 0 20 8'%3E%3Cpath d='M0 4 Q5 0 10 4 T20 4' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E");
    --r-wavetop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'%3E%3Cpath d='M0 5 Q4 0 8 5 T16 5 V8 H0Z'/%3E%3C/svg%3E");
    --mn-bar-radius: 0; --mn-bar-gap: 5px; --mn-line-width: 4px; --mn-area-opacity: .2; --mn-point-opacity: 1;
    --mn-bar-fill: var(--mn-series-1);
  }
  a:not([class]), .mn-link, .mn-prose a { text-decoration-style: wavy; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

  /* Buttons: outlined in ink with a hard shadow that you push into. */
  .mn-btn {
    border: 2px solid var(--r-ink); font-weight: 800; letter-spacing: .01em;
    box-shadow: 3px 3px 0 var(--r-ink);
    transition: transform 90ms ease-out, box-shadow 90ms ease-out, background-color var(--mn-duration);
  }
  .mn-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--r-ink); }
  .mn-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--r-ink); }
  .mn-btn-outline { background: var(--mn-surface); }
  .mn-btn-ghost { border-color: transparent; box-shadow: none; }
  .mn-btn-ghost:hover, .mn-btn-ghost:active { transform: none; box-shadow: none; }
  .mn-btn-link { border-color: transparent; box-shadow: none; text-decoration: underline wavy 1.5px; }
  .mn-btn-link:hover, .mn-btn-link:active { transform: none; box-shadow: none; }
  .mn-btn-group > .mn-btn { box-shadow: none; }
  .mn-btn-group { box-shadow: 3px 3px 0 var(--r-ink); border-radius: var(--mn-radius-field); }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file { border: 2px solid var(--r-ink); box-shadow: none; }
  .mn-input:focus, .mn-textarea:focus, .mn-select:focus, .mn-input-group:focus-within, .mn-number:focus-within { box-shadow: 4px 4px 0 var(--mn-primary); border-color: var(--r-ink); }
  .mn-input-group > .mn-input { border: 0; }
  .mn-addon:first-child { border-inline-end: 2px solid var(--r-ink); }
  .mn-addon:last-child { border-inline-start: 2px solid var(--r-ink); }
  .mn-otp > input { border: 2px solid var(--r-ink); box-shadow: 3px 3px 0 var(--r-ink); font-weight: 900; }
  .mn-checkbox, .mn-radio { border: 2px solid var(--r-ink); box-shadow: 2px 2px 0 var(--r-ink); border-radius: 5px; }
  .mn-radio { border-radius: 50%; }
  .mn-switch { border: 2px solid var(--r-ink); --_hh: 1.5rem; --_w: 2.7rem; box-shadow: 2px 2px 0 var(--r-ink); }
  .mn-switch::before { top: 1px; left: 1px; border: 2px solid var(--r-ink); box-shadow: none; width: calc(var(--_hh) - 6px); height: calc(var(--_hh) - 6px); }
  .mn-switch:checked::before { transform: translateX(calc(var(--_w) - var(--_hh))); }
  .mn-slider::-webkit-slider-thumb { border: 2px solid var(--r-ink); box-shadow: 2px 2px 0 var(--r-ink); border-radius: 6px; }
  .mn-slider::-moz-range-thumb { border: 2px solid var(--r-ink); box-shadow: 2px 2px 0 var(--r-ink); border-radius: 6px; }
  .mn-slider::-webkit-slider-runnable-track { box-shadow: inset 0 0 0 2px var(--r-ink); height: 10px; }
  .mn-slider { --_track: 10px; }

  /* Bowls: heavy rim, wavy divider under the header. */
  .mn-card { border: 2px solid var(--r-ink); box-shadow: 6px 6px 0 var(--r-ink); }
  .mn-card-header { position: relative; padding-bottom: 1rem; }
  .mn-card-header::after, .mn-divider::before, .mn-divider::after {
    content: ""; position: absolute; left: 1.25rem; right: 1.25rem; bottom: -4px; height: 8px;
    background: var(--mn-primary); -webkit-mask: var(--r-wave) 0 0/20px 8px repeat-x; mask: var(--r-wave) 0 0/20px 8px repeat-x;
  }
  .mn-card-title { font-weight: 900; font-size: 1.15rem; }
  .mn-divider::before, .mn-divider::after { position: static; height: 8px; background: var(--mn-border); }

  /* Tables: a topping band header, wavy row lines. */
  .mn-table-wrap { border: 2px solid var(--r-ink); box-shadow: 5px 5px 0 var(--r-ink); }
  .mn-table thead th { background: var(--mn-primary); color: var(--mn-primary-fg); font-weight: 800; text-transform: uppercase; font-size: .75rem; letter-spacing: .05em; border-bottom: 2px solid var(--r-ink); }
  .mn-table tbody td { position: relative; border-bottom: 0; }
  .mn-table tbody tr:not(:last-child) td::after { content: ""; position: absolute; inset: auto 0 -3px; height: 6px; background: var(--mn-border); -webkit-mask: var(--r-wave) 0 0/14px 6px repeat-x; mask: var(--r-wave) 0 0/14px 6px repeat-x; }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--mn-accent) 16%, transparent); }

  /* Toppings: stickers. */
  .mn-badge { border: 2px solid var(--r-ink); box-shadow: 2px 2px 0 var(--r-ink); font-weight: 900; text-transform: uppercase; font-size: .6875rem; rotate: -2deg; height: 1.5rem; }
  .mn-badge:nth-of-type(even) { rotate: 1.5deg; }
  .mn-badge-soft { border-color: color-mix(in oklab, var(--_c, var(--mn-primary)) 60%, var(--r-ink)); }
  .mn-chip { border: 2px solid var(--r-ink); font-weight: 800; }

  .mn-tab-list { border-bottom: 2px solid var(--r-ink); }
  .mn-tab { font-weight: 800; }
  .mn-tab::after { height: 8px; bottom: -5px; border-radius: 0; -webkit-mask: var(--r-wave) 0 0/16px 8px repeat-x; mask: var(--r-wave) 0 0/16px 8px repeat-x; }
  .mn-tab[aria-selected="true"]::after { background: var(--mn-primary); }
  .mn-tabs-boxed .mn-tab-list { border: 2px solid var(--r-ink); box-shadow: 3px 3px 0 var(--r-ink); }
  .mn-tabs-boxed .mn-tab[aria-selected="true"] { background: var(--mn-primary); color: var(--mn-primary-fg); box-shadow: none; }
  .mn-toggle-group { border: 2px solid var(--r-ink); box-shadow: 3px 3px 0 var(--r-ink); }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-accent); color: var(--mn-accent-fg); box-shadow: none; font-weight: 800; }

  /* Progress: noodles streaming through. */
  .mn-progress { height: .9rem; border: 2px solid var(--r-ink); box-shadow: 2px 2px 0 var(--r-ink); }
  .mn-progress::after { border-radius: 0; background: var(--_p) repeating-linear-gradient(-45deg, rgb(255 255 255 / .28) 0 7px, transparent 7px 14px); background-size: 28px 100%; animation: ramen-flow .6s linear infinite; }
  .mn-progress:not([aria-valuenow])::after { animation: mn-indeterminate 1.4s var(--mn-ease) infinite, ramen-flow .6s linear infinite; }
  .mn-radial { box-shadow: 0 0 0 2px var(--r-ink), 3px 3px 0 2px var(--r-ink); font-weight: 900; }
  .mn-radial::before { box-shadow: 0 0 0 2px var(--r-ink); }
  .mn-spinner { border-width: 4px; border-color: var(--mn-accent); border-top-color: var(--mn-primary); border-bottom-color: var(--mn-primary); }
  .mn-alert { border: 2px solid var(--r-ink); box-shadow: 4px 4px 0 var(--r-ink); }
  .mn-avatar { border: 2px solid var(--r-ink); }
  .mn-step::before { border: 2px solid var(--r-ink); box-shadow: 2px 2px 0 var(--r-ink); font-weight: 900; }
  .mn-step + .mn-step::after { height: 8px; top: calc(1rem - 4px); background: var(--mn-border); -webkit-mask: var(--r-wave) 0 0/16px 8px repeat-x; mask: var(--r-wave) 0 0/16px 8px repeat-x; }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { border: 2px solid var(--r-ink); box-shadow: 6px 6px 0 var(--r-ink); }
  .mn-menu-item { font-weight: 700; }
  .mn-page[aria-current="page"] { border: 2px solid var(--r-ink); box-shadow: 2px 2px 0 var(--r-ink); background: var(--mn-accent); color: var(--mn-accent-fg); }
  .mn-accordion, .mn-stats, .mn-list { border: 2px solid var(--r-ink); box-shadow: 4px 4px 0 var(--r-ink); }
  .mn-stat-value { font-weight: 900; }
  .mn-kbd { border: 2px solid var(--r-ink); box-shadow: 2px 2px 0 var(--r-ink); }

  /* Charts: wave-topped bars with an ink outline. */
  .mn-bar::before { background: var(--mn-series-1); opacity: .45; -webkit-mask: var(--r-wavetop) 0 0/16px 8px repeat-x, linear-gradient(#000 0 0) 0 7px/100% calc(100% - 7px) no-repeat; mask: var(--r-wavetop) 0 0/16px 8px repeat-x, linear-gradient(#000 0 0) 0 7px/100% calc(100% - 7px) no-repeat; }
  .mn-bar.mn-hl::before, .mn-bar:hover::before { opacity: 1; }
  .mn-chart-line .mn-line { stroke-dasharray: none; filter: drop-shadow(3px 3px 0 var(--r-ink)); }
  .mn-donut { --thick: 52%; filter: drop-shadow(3px 3px 0 var(--r-ink)); }
}}

/* ── BIANGBIANG ────────────────────────────────────────────────────────────
   Shaanxi's belt noodles: pulled as wide as a hand and slapped against the
   counter as they stretch: the sound gives them their name. A heavyweight
   system: belt-wide flat blocks, the heaviest type in MIAN, 3px borders,
   full-width colour bands, flat colour with no shadows, and a slap of
   motion: things land with an impact and a small rebound. */
@keyframes biangbiang-in { 0% { opacity: 0; transform: translateY(-14px) scaleY(1.06); } 55% { opacity: 1; transform: translateY(0) scaleY(.94); } 75% { transform: scaleY(1.02); } 100% { transform: none; } }
@keyframes biangbiang-slap { 0%, 100% { transform: scaleY(1); } 40% { transform: scaleY(.25); } }

@layer mian.noodles { @scope ([data-noodle="biangbiang"]) to ([data-noodle]:not([data-noodle="biangbiang"])) {
  :scope {
    --mn-enter: biangbiang-in; --mn-enter-duration: 300ms; --mn-ease-enter: cubic-bezier(.3, 0, .2, 1);
    --mn-duration: 110ms; --mn-spring: cubic-bezier(.3, 1.6, .5, 1);
    --mn-border-w: 3px;
    --bb-ink: var(--mn-fg);
    --mn-focus: 0 0 0 3px var(--mn-bg), 0 0 0 6px var(--mn-ring);
    --mn-bar-radius: 0; --mn-bar-gap: 4px; --mn-line-width: 6px; --mn-area-opacity: .2; --mn-point-opacity: 0;
    --mn-bar-fill: var(--mn-surface-2); --mn-bar-fill-hl: var(--mn-primary);
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3) { font-weight: 900; letter-spacing: -.05em; line-height: .95; }
  :scope .mn-h1 { font-size: clamp(2.4rem, 7vw, 4rem); }

  /* Buttons: wide belts, heavy uppercase, 3px ink edge. Pressing slaps them flat. */
  .mn-btn { --_bd: var(--bb-ink); border-width: 3px; border-radius: 4px; box-shadow: none; padding-inline: calc(var(--_h) * .7); font-weight: 900; text-transform: uppercase; letter-spacing: .02em; }
  .mn-btn:hover { --_bg: var(--_c, var(--mn-primary)); transform: translateY(-2px); }
  .mn-btn:active { transform: scaleY(.9); transition-duration: 60ms; }
  .mn-btn-outline { --_bg: var(--mn-surface); --_fg: var(--_ct, var(--bb-ink)); }
  .mn-btn-outline:hover { --_bg: var(--mn-surface-2); }
  .mn-btn-soft { --_bg: var(--mn-surface-2); --_fg: var(--bb-ink); }
  .mn-btn-soft:hover { --_bg: var(--mn-surface-2); }
  .mn-btn-ghost, .mn-btn-link { --_bd: transparent; }
  .mn-btn-ghost:hover { --_bg: var(--mn-surface-2); }
  .mn-btn-link:hover { --_bg: transparent; transform: none; }
  .mn-btn-icon { padding: 0; }
  /* Groups and small screens: keep the character, lose the extra width. */
  .mn-btn-group > .mn-btn:not(.mn-btn-icon) { padding-inline: calc(var(--_h) * .38); letter-spacing: 0; }
  @media (max-width: 30rem) { .mn-btn:not(.mn-btn-icon) { padding-inline: calc(var(--_h) * .42); letter-spacing: .01em; } }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { border: 3px solid var(--bb-ink); border-radius: 4px; box-shadow: none; font-weight: 700; }
  .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(--bb-ink); box-shadow: inset 0 -6px 0 var(--mn-primary); }
  .mn-input-group > .mn-input { border: 0; box-shadow: none; }
  .mn-addon { border-color: var(--bb-ink) !important; font-weight: 900; }
  .mn-label { font-weight: 900; text-transform: uppercase; letter-spacing: .03em; font-size: .75rem; }
  .mn-checkbox, .mn-radio { --_s: 1.4rem; border: 3px solid var(--bb-ink); box-shadow: none; }
  .mn-checkbox { border-radius: 3px; }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); border-color: var(--bb-ink); }
  /* Switch: a thick belt with a heavy block. */
  .mn-switch { --_w: 3.4rem; --_hh: 1.8rem; border-radius: 4px; background: var(--mn-surface); box-shadow: inset 0 0 0 3px var(--bb-ink); }
  .mn-switch::before { border-radius: 2px; top: 6px; left: 6px; width: calc(var(--_hh) - 12px); height: calc(var(--_hh) - 12px); background: var(--bb-ink); box-shadow: none; transition: transform 160ms var(--mn-spring); }
  .mn-switch:checked { background: var(--_on); }
  .mn-switch:checked::before { transform: translateX(calc(var(--_w) - var(--_hh))); background: var(--bb-ink); }
  .mn-slider { --_track: 12px; --_thumb: 1.6rem; }
  .mn-slider::-webkit-slider-runnable-track { border-radius: 2px; box-shadow: inset 0 0 0 3px var(--bb-ink); }
  .mn-slider::-moz-range-track { border-radius: 2px; box-shadow: inset 0 0 0 3px var(--bb-ink); }
  .mn-slider::-webkit-slider-thumb { width: 1rem; border-radius: 2px; border: 3px solid var(--bb-ink); background: var(--mn-surface); box-shadow: none; }
  .mn-slider::-moz-range-thumb { width: 1rem; border-radius: 2px; border: 3px solid var(--bb-ink); background: var(--mn-surface); box-shadow: none; }

  /* Cards: a thick band across the top, like a belt of noodle. */
  .mn-card, .mn-table-wrap, .mn-stats, .mn-list, .mn-accordion, .mn-alert { border: 3px solid var(--bb-ink); border-radius: 6px; box-shadow: none; }
  .mn-card-header { background: var(--mn-primary); color: var(--mn-primary-fg); margin: 0; padding: .9rem 1.25rem; border-bottom: 3px solid var(--bb-ink); border-radius: 3px 3px 0 0; }
  .mn-card-header { --mn-muted: color-mix(in srgb, var(--mn-primary-fg) 86%, var(--mn-primary)); }
  .mn-card-header .mn-card-description { color: var(--mn-muted); }
  .mn-card-header .mn-badge { background: var(--mn-primary-fg); color: var(--mn-primary); border-color: var(--mn-primary-fg); }
  .mn-card-title { font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; font-size: 1.2rem; }
  .mn-card-footer-bordered { border-top: 3px solid var(--bb-ink); background: var(--mn-surface-2); }
  .mn-stat-value { font-weight: 900; font-size: 2.2rem; letter-spacing: -.05em; }

  .mn-table th, .mn-table td { border-bottom: 3px solid var(--bb-ink); font-weight: 600; }
  .mn-table thead th { background: var(--bb-ink); color: var(--mn-bg); font-weight: 900; text-transform: uppercase; }
  .mn-table-hover tbody tr:hover { background: var(--mn-primary); color: var(--mn-primary-fg); }

  .mn-badge { height: 1.5rem; border: 3px solid var(--bb-ink); border-radius: 3px; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; }
  .mn-chip { border: 3px solid var(--bb-ink); border-radius: 3px; font-weight: 800; }
  .mn-kbd { border: 2px solid var(--bb-ink); box-shadow: none; font-weight: 800; }

  /* Tabs: a heavy belt under the current tab. */
  .mn-tab-list { border-bottom: 3px solid var(--bb-ink); }
  .mn-tab { font-weight: 900; text-transform: uppercase; letter-spacing: .02em; }
  @media (max-width: 26rem) { .mn-tab { font-size: .75rem; letter-spacing: 0; } }
  .mn-tab::after { inset-inline: 0; height: 8px; bottom: 0; border-radius: 0; }
  .mn-tab[aria-selected="true"]::after { background: var(--mn-primary); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { padding: 0; gap: 0; border: 3px solid var(--bb-ink); border-radius: 4px; background: var(--mn-surface); }
  .mn-tabs-boxed .mn-tab, .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 0; font-weight: 900; }
  .mn-tabs-boxed .mn-tab + .mn-tab, .mn-toggle-group > * + * { border-inline-start: 3px solid var(--bb-ink); }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-primary); color: var(--mn-primary-fg); box-shadow: none; }

  /* Progress: a belt being pulled. */
  .mn-progress { height: 1.1rem; border-radius: 3px; background: var(--mn-surface); box-shadow: inset 0 0 0 3px var(--bb-ink); }
  .mn-progress::after { border-radius: 0; box-shadow: inset 0 0 0 3px var(--bb-ink); }
  .mn-radial { --_t: .7rem; font-weight: 900; box-shadow: 0 0 0 3px var(--bb-ink); }
  .mn-radial::before { box-shadow: 0 0 0 3px var(--bb-ink); }
  /* Spinner: a belt slapped down again and again. */
  .mn-spinner { border: 0; border-radius: 2px; height: calc(var(--_s) * .45); margin-block: calc(var(--_s) * .275); background: var(--_c, var(--mn-primary)); box-shadow: inset 0 0 0 2px var(--bb-ink); animation: biangbiang-slap .6s cubic-bezier(.3, 0, .2, 1) infinite; }

  .mn-alert { background: var(--mn-surface); }
  .mn-alert .mn-alert-title { font-weight: 900; text-transform: uppercase; }
  .mn-avatar { border-radius: 4px; box-shadow: inset 0 0 0 3px var(--bb-ink); font-weight: 900; }
  .mn-step::before { border: 3px solid var(--bb-ink); border-radius: 4px; font-weight: 900; }
  .mn-step + .mn-step::after { height: 6px; top: calc(1rem - 3px); background: var(--bb-ink); }
  .mn-step[data-state="complete"] + .mn-step::after { background: var(--mn-primary); }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { border: 3px solid var(--bb-ink); border-radius: 6px; box-shadow: none; }
  .mn-menu-item { font-weight: 800; border-radius: 2px; }
  .mn-menu-item:hover, .mn-menu-item:focus-visible { background: var(--mn-primary); color: var(--mn-primary-fg); }
  .mn-page { border: 3px solid transparent; border-radius: 3px; font-weight: 900; }
  .mn-page[aria-current="page"] { border-color: var(--bb-ink); background: var(--mn-primary); color: var(--mn-primary-fg); box-shadow: none; }

  /* Charts: fat, flat belts with an ink edge. */
  .mn-bar::before { box-shadow: inset 0 0 0 3px var(--bb-ink); }
  .mn-bar[data-value]::after { border-radius: 2px; font-weight: 900; }
  .mn-bar > span { font-weight: 800; }
  .mn-legend li::before { border-radius: 0; box-shadow: inset 0 0 0 2px var(--bb-ink); }
  .mn-donut { --thick: 44%; }
}}

/* ── MACCHERONI ────────────────────────────────────────────────────────────
   Short elbows of pasta, the first shape a child draws. A blunt, cheerful
   system: a thick ink line around everything, a solid shadow you could cut
   out with scissors, sweet flat colours and corners just rounded enough to
   be friendly. Pressing a button pushes it down onto its shadow. */
@keyframes maccheroni-in { from { opacity: 0; transform: translate(-4px, -4px); } }
@keyframes maccheroni-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="maccheroni"]) to ([data-noodle]:not([data-noodle="maccheroni"])) {
  :scope {
    --mn-enter: maccheroni-in; --mn-enter-duration: 160ms; --mn-ease-enter: cubic-bezier(.2, 0, 0, 1);
    --mn-duration: 100ms; --mn-spring: cubic-bezier(.2, 0, 0, 1);
    --mn-border-w: 2px;
    --mc-ink: var(--mn-border);
    --mc-sh: 4px 4px 0 var(--mc-ink);
    --mc-sh-sm: 2px 2px 0 var(--mc-ink);
    --mc-sh-lg: 7px 7px 0 var(--mc-ink);
    --mn-focus: 0 0 0 2px var(--mn-bg), 0 0 0 5px var(--mn-ring);
    --mn-bar-radius: 6px; --mn-bar-gap: 7px; --mn-line-width: 3px; --mn-area-opacity: .25; --mn-point-opacity: 1;
    --mn-bar-fill: var(--mn-secondary); --mn-bar-fill-hl: var(--mn-primary);
    --mn-series-1: var(--mc-ink); --mn-series-2: var(--mn-accent);
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3, .mn-display) { letter-spacing: -.03em; }

  .mn-btn { --_bd: var(--mc-ink); box-shadow: var(--mc-sh); font-weight: 700; transition: transform var(--mn-duration) var(--mn-ease), box-shadow var(--mn-duration) var(--mn-ease), background-color var(--mn-duration) var(--mn-ease); }
  .mn-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--mc-ink); }
  .mn-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--mc-ink); }
  .mn-btn-outline, .mn-btn-soft { --_bd: var(--mc-ink); --_fg: var(--mn-fg); background-color: var(--mn-surface); }
  .mn-btn-ghost, .mn-btn-link { --_bd: transparent; box-shadow: none; }
  .mn-btn-ghost:hover, .mn-btn-link:hover { transform: none; box-shadow: none; }
  .mn-btn-sm, .mn-btn-xs { box-shadow: var(--mc-sh-sm); }
  .mn-btn-sm:hover, .mn-btn-xs:hover { box-shadow: 3px 3px 0 var(--mc-ink); }
  .mn-btn-sm:active, .mn-btn-xs:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--mc-ink); }
  @media (prefers-reduced-motion: reduce) { .mn-btn:hover, .mn-btn:active { transform: none; } }

  .mn-input, .mn-select, .mn-textarea, .mn-number, .mn-input-group { border-width: 2px; border-color: var(--mc-ink); background-color: var(--mn-surface); box-shadow: none; }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within { border-color: var(--mc-ink); box-shadow: var(--mc-sh); }
  .mn-input-group > .mn-input { box-shadow: none; border: 0; }
  .mn-label { font-weight: 700; }
  .mn-switch { --_w: 2.7rem; --_hh: 1.5rem; background: var(--mn-surface); box-shadow: inset 0 0 0 2px var(--mc-ink); }
  .mn-switch::before { top: 4px; left: 4px; width: calc(var(--_hh) - 8px); height: calc(var(--_hh) - 8px); background: var(--mc-ink); box-shadow: none; }
  .mn-switch:checked { background: var(--mn-primary); }
  .mn-switch:checked::before { background: var(--mc-ink); }
  .mn-checkbox, .mn-radio { --_s: 1.25rem; border-width: 2px; border-color: var(--mc-ink); background-color: var(--mn-surface); }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); border-color: var(--mc-ink); }

  .mn-card, .mn-table-wrap, .mn-accordion, .mn-list, .mn-stats { border-width: 2px; border-color: var(--mc-ink); box-shadow: var(--mc-sh); }
  .mn-card .mn-card, .mn-card .mn-stats, .mn-card .mn-table-wrap, .mn-card .mn-list, .mn-card .mn-accordion { box-shadow: none; }
  .mn-card-interactive { transition: transform var(--mn-duration) var(--mn-ease), box-shadow var(--mn-duration) var(--mn-ease); }
  .mn-card-interactive:hover { transform: translate(-2px, -2px); box-shadow: var(--mc-sh-lg); border-color: var(--mc-ink); }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer, .mn-command-dialog, .mn-combobox-list { border-width: 2px; border-color: var(--mc-ink); box-shadow: var(--mc-sh-lg); }

  .mn-table thead th { background: var(--mn-surface-2); border-bottom: 2px solid var(--mc-ink); font-weight: 800; }
  .mn-table th, .mn-table td { border-bottom-color: color-mix(in oklab, var(--mc-ink) 25%, transparent); }
  .mn-table-hover tbody tr:hover { background: var(--mn-surface-2); }

  .mn-badge { border: 2px solid var(--mc-ink); font-weight: 700; }
  .mn-badge-soft { background-color: color-mix(in oklab, var(--_c, var(--mn-primary)) 30%, var(--mn-surface)); color: var(--mn-fg); }
  .mn-chip { border-width: 2px; border-color: var(--mc-ink); background-color: var(--mn-surface); font-weight: 700; }

  .mn-tab-list { border-bottom: 2px solid var(--mc-ink); gap: 4px; }
  .mn-tab { font-weight: 700; border: 2px solid transparent; border-bottom: 0; border-radius: var(--mn-radius-field) var(--mn-radius-field) 0 0; }
  .mn-tab::after { display: none; }
  .mn-tab[aria-selected="true"] { background: var(--mn-primary); color: var(--mn-primary-fg); border-color: var(--mc-ink); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { border: 2px solid var(--mc-ink); background: var(--mn-surface); }
  .mn-tabs-boxed .mn-tab, .mn-tabs-pills .mn-tab { border: 0; border-radius: calc(var(--mn-radius-field) - 3px); }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-primary); color: var(--mn-primary-fg); box-shadow: none; }

  .mn-progress { height: 14px; border: 2px solid var(--mc-ink); border-radius: 999px; background: var(--mn-surface); }
  .mn-progress::after { background: var(--mn-primary); border-radius: 0; border-inline-end: 2px solid var(--mc-ink); }
  .mn-spinner { border-width: 4px; border-color: var(--mc-ink); border-top-color: var(--mn-primary); animation: maccheroni-spin .7s steps(8) infinite; }
  .mn-alert { border-width: 2px; border-color: var(--mc-ink); box-shadow: var(--mc-sh-sm); }
  .mn-avatar { box-shadow: 0 0 0 2px var(--mc-ink); }
  .mn-bar::before { border: 2px solid var(--mc-ink); border-bottom: 0; border-radius: 6px 6px 0 0; }
}}

/* ── RIGATONI ──────────────────────────────────────────────────────────────
   Ridged tubes that hold a heavy sauce. A ridged poster system: heavy
   grotesk at 900, parallel ridges as the one texture (rules, chosen tab,
   progress, highlighted bar), outlined controls that fill solid ink when
   chosen, cream paper and one paprika orange. */
@keyframes rigatoni-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes rigatoni-spin { to { transform: rotate(360deg); } }
@keyframes rigatoni-slide { to { background-position: 28px 0; } }

@layer mian.noodles { @scope ([data-noodle="rigatoni"]) to ([data-noodle]:not([data-noodle="rigatoni"])) {
  :scope {
    --mn-enter: rigatoni-in; --mn-enter-duration: 150ms; --mn-ease-enter: cubic-bezier(.2, 0, 0, 1);
    --mn-duration: 120ms;
    --rg-ridge: repeating-linear-gradient(90deg, var(--mn-fg) 0 3px, transparent 3px 7px);
    --rg-ridge-accent: repeating-linear-gradient(90deg, var(--mn-accent) 0 3px, transparent 3px 7px);
    --mn-focus: 0 0 0 2px var(--mn-bg), 0 0 0 4px var(--mn-accent);
    --mn-bar-radius: 0; --mn-bar-gap: 5px; --mn-line-width: 3px; --mn-area-opacity: 0;
    --mn-bar-fill: var(--mn-fg); --mn-bar-fill-hl: var(--mn-accent);
    --mn-series-1: var(--mn-fg); --mn-series-2: var(--mn-accent);
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3, .mn-display, .mn-title) { letter-spacing: -.04em; line-height: .95; }

  .mn-btn { box-shadow: none; font-weight: 800; letter-spacing: -.01em; border-width: 2px; }
  .mn-btn-outline { --_bd: var(--_c, var(--mn-fg)); }
  .mn-btn-outline:hover { --_bg: var(--_c, var(--mn-fg)); --_fg: var(--_cf, var(--mn-bg)); }
  .mn-btn:not(.mn-btn-outline, .mn-btn-soft, .mn-btn-ghost, .mn-btn-link):hover { box-shadow: inset 0 -5px 0 var(--mn-accent); }

  .mn-input, .mn-select, .mn-textarea, .mn-number, .mn-input-group { border-width: 2px; border-color: var(--mn-fg); box-shadow: none; background-color: var(--mn-surface); }
  .mn-input-group > .mn-input { border: 0; }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within { border-color: var(--mn-accent); box-shadow: 0 0 0 2px var(--mn-accent); }
  .mn-label { font-weight: 800; text-transform: uppercase; font-size: .75rem; letter-spacing: .06em; }
  .mn-checkbox, .mn-radio { border: 2px solid var(--mn-fg); }
  .mn-switch { border-radius: 3px; background: var(--mn-surface); box-shadow: inset 0 0 0 2px var(--mn-fg); }
  .mn-switch::before { border-radius: 2px; background: var(--mn-fg); box-shadow: none; }
  .mn-switch:checked { background: var(--mn-fg) var(--rg-ridge-accent); box-shadow: inset 0 0 0 2px var(--mn-fg); }
  .mn-switch:checked::before { background: var(--mn-bg); }

  .mn-card, .mn-table-wrap, .mn-accordion, .mn-list, .mn-stats { border: 2px solid var(--mn-fg); box-shadow: none; }
  .mn-card { position: relative; }
  .mn-card-title { font-weight: 900; letter-spacing: -.03em; }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { border: 2px solid var(--mn-fg); box-shadow: 6px 6px 0 var(--mn-fg); }
  .mn-section-muted { background-image: linear-gradient(var(--mn-surface-2), var(--mn-surface-2)); }
  .mn-divider::before, .mn-divider::after { height: 6px; background: var(--rg-ridge); opacity: .6; }

  .mn-table thead th { background: none; color: var(--mn-fg); font-weight: 800; text-transform: uppercase; font-size: .72rem; letter-spacing: .06em; border-bottom: 2px solid var(--mn-fg); }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--mn-accent) 8%, transparent); }

  .mn-badge { font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: .6875rem; }
  .mn-badge-soft { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
  .mn-chip { border-width: 2px; border-color: var(--mn-fg); font-weight: 700; }

  .mn-tab-list { border-bottom: 2px solid var(--mn-fg); }
  .mn-tab { font-weight: 800; }
  .mn-tab[aria-selected="true"]::after { height: 6px; bottom: -4px; border-radius: 0; background: var(--rg-ridge-accent); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { border: 2px solid var(--mn-fg); background: transparent; }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-fg); color: var(--mn-bg); box-shadow: none; }

  .mn-progress { height: 10px; border-radius: 2px; background: var(--mn-surface-2); box-shadow: inset 0 0 0 2px var(--mn-fg); }
  .mn-progress::after { border-radius: 0; background: var(--mn-accent) var(--rg-ridge); background-blend-mode: multiply; }
  .mn-spinner { border-width: 4px; border-color: color-mix(in srgb, var(--mn-fg) 18%, transparent); border-top-color: var(--mn-accent); border-radius: 50%; animation: rigatoni-spin .7s steps(8) infinite; }
  .mn-alert { border-width: 2px; border-color: var(--mn-fg); box-shadow: none; }
  .mn-bar::before { background: var(--mn-fg); }
  .mn-bar.mn-hl::before, .mn-bar:hover::before { background: var(--mn-accent) var(--rg-ridge); background-blend-mode: multiply; }
}}

/* ── FUSILLI ───────────────────────────────────────────────────────────────
   Strands wound into springs. An expressive system for creative work:
   italic heavy headings that lean forward, surfaces that tilt one degree
   under the pointer, presses that overshoot and settle, a spiral spinner,
   basil green with a tomato accent. */
@keyframes fusilli-in { from { opacity: 0; transform: translateY(10px) rotate(-1.5deg); } }
@keyframes fusilli-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="fusilli"]) to ([data-noodle]:not([data-noodle="fusilli"])) {
  :scope {
    --mn-enter: fusilli-in; --mn-enter-duration: 320ms; --mn-ease-enter: cubic-bezier(.34, 1.56, .64, 1);
    --mn-duration: 200ms; --mn-spring: cubic-bezier(.34, 1.56, .64, 1);
    --fs-glow: 0 10px 28px color-mix(in srgb, var(--mn-primary) 16%, transparent);
    --mn-bar-radius: 999px; --mn-bar-gap: 7px; --mn-line-width: 3px;
    --mn-bar-fill: color-mix(in oklab, var(--mn-primary) 30%, var(--mn-surface-2)); --mn-bar-fill-hl: var(--mn-primary);
    --mn-series-1: var(--mn-primary); --mn-series-2: var(--mn-accent);
  }
  :scope :where(h1, h2, .mn-h1, .mn-h2, .mn-display, .mn-title) { font-style: italic; letter-spacing: -.035em; }

  .mn-btn { font-weight: 700; transition: transform 320ms var(--mn-spring), background-color var(--mn-duration), box-shadow var(--mn-duration); }
  .mn-btn:hover { transform: translateY(-2px); }
  .mn-btn:active { transform: scale(.94); transition-duration: 80ms; }
  .mn-btn:not(.mn-btn-outline, .mn-btn-soft, .mn-btn-ghost, .mn-btn-link) { box-shadow: var(--fs-glow); }

  .mn-input, .mn-select, .mn-textarea, .mn-number, .mn-input-group { border-width: 2px; border-color: var(--mn-border); background-color: var(--mn-surface); }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within { border-color: var(--mn-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mn-primary) 18%, transparent); }
  .mn-checkbox:checked, .mn-radio:checked { animation: fusilli-in 260ms var(--mn-spring); }
  .mn-switch { background: var(--mn-surface-2); box-shadow: inset 0 0 0 2px var(--mn-border); }
  .mn-switch::before { transition: transform 360ms var(--mn-spring); }
  .mn-switch:checked { background: var(--mn-primary); box-shadow: none; }

  .mn-card, .mn-table-wrap, .mn-accordion, .mn-list, .mn-stats { border-color: var(--mn-border); box-shadow: var(--fs-glow); }
  .mn-card { transition: transform 360ms var(--mn-spring), box-shadow 360ms var(--mn-spring); }
  .mn-card-interactive:hover, .mn-tile:hover, .mn-work-item:hover { transform: rotate(-1deg) translateY(-3px); }
  .mn-card-title { font-style: italic; font-weight: 800; }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { box-shadow: 0 24px 60px color-mix(in srgb, var(--mn-primary) 22%, transparent); border-color: var(--mn-border); }

  .mn-table thead th { background: var(--mn-surface-2); color: var(--mn-secondary-fg); font-weight: 700; }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--mn-primary) 7%, transparent); }

  .mn-badge { font-weight: 700; }
  .mn-chip { border-width: 2px; font-weight: 600; transition: transform 300ms var(--mn-spring); }

  .mn-tab { font-weight: 700; }
  .mn-tab[aria-selected="true"]::after { height: 4px; border-radius: 999px; background: var(--mn-primary); transform: skewX(-20deg); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { border-radius: 999px; background: var(--mn-surface-2); }
  .mn-tabs-boxed .mn-tab, .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 999px; }

  .mn-progress { height: 10px; border-radius: 999px; background: var(--mn-surface-2); }
  .mn-progress::after { border-radius: 999px; background: linear-gradient(90deg, var(--mn-primary), var(--mn-accent)); }
  .mn-spinner { border: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 25%, var(--mn-primary) 25% 50%, transparent 50% 75%, var(--mn-accent) 75%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); animation: fusilli-spin .8s cubic-bezier(.5, 0, .5, 1) infinite; }
  .mn-alert { border-color: var(--mn-border); box-shadow: var(--fs-glow); }
  .mn-bar::before { border-radius: 999px 999px 6px 6px; }
  @media (prefers-reduced-motion: reduce) { .mn-btn:hover, .mn-card-interactive:hover, .mn-tile:hover, .mn-work-item:hover, .mn-chip:hover, .mn-badge { transform: none; } }
}}

/* ── JJAJANG ───────────────────────────────────────────────────────────────
   Jjajangmyeon: noodles under a thick, glossy black-bean sauce with diced
   onion and a crisp tangle of cucumber. A bold, lacquered-black system:
   heavy glossy black fills with a wet highlight across the top, filled
   controls rather than outlines, cucumber-green and onion-cream accents,
   rich heavy type and generous round shapes. */
@keyframes jjajang-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes jjajang-stir { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="jjajang"]) to ([data-noodle]:not([data-noodle="jjajang"])) {
  :scope {
    --mn-enter: jjajang-in; --mn-enter-duration: 300ms; --mn-ease-enter: cubic-bezier(.2, .9, .3, 1.1);
    --mn-duration: 180ms; --mn-spring: cubic-bezier(.2, .9, .3, 1.15);
    --jj-sauce: light-dark(#15110d, #1c1814);
    --jj-gloss: linear-gradient(180deg, rgb(255 255 255 / .24) 0, rgb(255 255 255 / .06) 42%, transparent 50%, rgb(0 0 0 / .18) 100%);
    --jj-wet: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -2px 0 rgb(0 0 0 / .35);
    --jj-green: var(--mn-accent);
    --mn-bar-radius: 999px; --mn-bar-gap: 8px; --mn-line-width: 5px; --mn-area-opacity: .18; --mn-point-opacity: 1;
    --mn-series-1: light-dark(#15110d, #f6f0e6); --mn-series-2: var(--jj-green);
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3) { font-weight: 850; letter-spacing: -.035em; }

  /* Buttons: glossy sauce-black, wet highlight across the top. */
  .mn-btn { background-image: var(--jj-gloss); box-shadow: var(--jj-wet), 0 4px 10px -4px rgb(0 0 0 / .45); font-weight: 800; border: 0; }
  .mn-btn:hover { filter: brightness(1.12); }
  .mn-btn:active { transform: scale(.97); filter: none; }
  .mn-btn-outline { --_bg: var(--mn-surface-2); --_fg: var(--_ct, var(--mn-fg)); background-image: none; box-shadow: inset 0 0 0 2px var(--mn-fg); }
  .mn-btn-soft { --_bg: color-mix(in oklab, var(--jj-green) 18%, var(--mn-surface)); --_fg: var(--_ct, var(--mn-fg)); background-image: none; box-shadow: none; }
  .mn-btn-ghost, .mn-btn-link { background-image: none; box-shadow: none; }
  .mn-btn-ghost:hover, .mn-btn-link:hover { filter: none; }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { border: 2px solid transparent; background-color: var(--mn-surface-2); box-shadow: inset 0 2px 4px rgb(0 0 0 / .1); font-weight: 600; }
  .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(--jj-green); background-color: var(--mn-surface); box-shadow: 0 0 0 4px color-mix(in oklab, var(--jj-green) 20%, transparent); }
  .mn-input-group > .mn-input { border: 0; box-shadow: none; background: transparent; }
  .mn-addon { background: transparent; border: 0 !important; }
  .mn-checkbox, .mn-radio { --_s: 1.3rem; border: 2px solid var(--mn-fg); box-shadow: none; }
  .mn-checkbox { border-radius: 7px; }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--jj-sauce); border-color: var(--jj-sauce); background-image: var(--jj-gloss); }
  /* Switch: a glossy black pill; on, a cucumber-green knob. */
  .mn-switch { --_w: 3.1rem; --_hh: 1.75rem; background: var(--mn-surface-2); box-shadow: inset 0 2px 4px rgb(0 0 0 / .2); }
  .mn-switch::before { background: var(--mn-surface); box-shadow: 0 2px 4px rgb(0 0 0 / .3); }
  .mn-switch:checked { background: var(--jj-sauce) var(--jj-gloss); box-shadow: var(--jj-wet); }
  .mn-switch:checked::before { background: var(--jj-green); }
  .mn-slider { --_track: 8px; --_thumb: 1.4rem; --_on: var(--_c, var(--jj-sauce)); }
  .mn-slider::-webkit-slider-thumb { border: 0; background: var(--jj-green); box-shadow: 0 0 0 4px var(--mn-surface), 0 2px 6px rgb(0 0 0 / .3); }
  .mn-slider::-moz-range-thumb { border: 0; background: var(--jj-green); box-shadow: 0 0 0 4px var(--mn-surface), 0 2px 6px rgb(0 0 0 / .3); }

  .mn-card { border: 0; box-shadow: 0 1px 0 var(--mn-border), 0 18px 36px -20px rgb(0 0 0 / .4); }
  .mn-card-title { font-weight: 850; font-size: 1.15rem; }
  .mn-card-footer-bordered { border-top: 0; background: var(--mn-surface-2); }
  .mn-stats, .mn-list, .mn-accordion { border: 0; box-shadow: 0 18px 36px -20px rgb(0 0 0 / .4); }
  .mn-stat-value { font-weight: 900; letter-spacing: -.045em; }

  /* Tables: a glossy black header and heavy rows. */
  .mn-table-wrap { border: 0; box-shadow: 0 18px 36px -20px rgb(0 0 0 / .4); }
  .mn-table thead th { background: var(--jj-sauce) var(--jj-gloss); color: #f6f0e6; font-weight: 800; }
  .mn-table td { font-weight: 550; }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--jj-green) 10%, transparent); }

  .mn-badge { background-image: var(--jj-gloss); box-shadow: var(--jj-wet); font-weight: 800; border: 0; }
  .mn-badge-outline, .mn-badge-soft { background-image: none; box-shadow: none; }
  .mn-chip { background: var(--mn-surface-2); border: 0; font-weight: 700; }

  /* Tabs: a glossy black pill for the current tab. */
  .mn-tab-list { border-bottom: 0; gap: .35rem; }
  .mn-tab { border-radius: 999px; font-weight: 750; height: var(--mn-size-sm); }
  .mn-tab::after { display: none; }
  .mn-tab[aria-selected="true"] { background: var(--jj-sauce) var(--jj-gloss); color: #f6f0e6; box-shadow: var(--jj-wet); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { border-radius: 999px; background: var(--mn-surface-2); padding: 4px; }
  .mn-tabs-boxed .mn-tab, .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 999px; }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--jj-sauce) var(--jj-gloss); color: #f6f0e6; box-shadow: var(--jj-wet); }

  /* Progress: glossy sauce filling a pale bowl. */
  .mn-progress { height: .85rem; background: var(--mn-surface-2); box-shadow: inset 0 2px 3px rgb(0 0 0 / .15); }
  .mn-progress::after { background: var(--_c, var(--jj-sauce)) var(--jj-gloss); }
  .mn-radial { --_t: .55rem; background: conic-gradient(var(--_c, var(--jj-sauce)) calc(var(--_v) * 1%), var(--mn-surface-2) 0); font-weight: 900; }
  /* Spinner: chopsticks stirring, a glossy ring with a green fleck. */
  .mn-spinner { border: 0; background: conic-gradient(var(--jj-green) 0 12%, var(--_c, var(--jj-sauce)) 12% 70%, transparent 70%); -webkit-mask: radial-gradient(closest-side, transparent 52%, #000 56%); mask: radial-gradient(closest-side, transparent 52%, #000 56%); animation: jjajang-stir .8s cubic-bezier(.5, .1, .5, .9) infinite; }

  .mn-alert { border: 0; background: color-mix(in oklab, var(--_a) 10%, var(--mn-surface)); box-shadow: inset 4px 0 0 var(--_a); }
  .mn-alert .mn-alert-title { font-weight: 800; }
  .mn-avatar { box-shadow: 0 0 0 3px var(--mn-bg), 0 0 0 5px var(--mn-fg); font-weight: 800; }
  .mn-step::before { border-width: 2px; font-weight: 800; }
  .mn-step[data-state="complete"]::before { background: var(--jj-sauce) var(--jj-gloss); border-color: var(--jj-sauce); color: #f6f0e6; }
  .mn-step + .mn-step::after { height: 4px; border-radius: 4px; top: calc(1rem - 2px); }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast { border: 0; box-shadow: 0 0 0 1px var(--mn-border), 0 24px 48px -20px rgb(0 0 0 / .5); }
  .mn-menu-item { border-radius: 10px; font-weight: 600; }
  .mn-page { border-radius: 999px; font-weight: 800; }
  .mn-page[aria-current="page"] { background: var(--jj-sauce) var(--jj-gloss); color: #f6f0e6; border-color: transparent; box-shadow: var(--jj-wet); }

  /* Charts: glossy black bars; one cucumber-green. */
  .mn-bar::before { background-image: var(--jj-gloss); }
  .mn-bar.mn-hl::before, .mn-bar:hover::before { background-color: var(--jj-green); }
  .mn-donut { --thick: 40%; }
}}

/* ── LAKSA ─────────────────────────────────────────────────────────────────
   Curry laksa: rice noodles in a rich coconut-curry broth, red with chilli
   oil, with tofu puffs, lime and laksa leaf. A bold colour system:
   saturated sambal red floating over coconut cream in thick layered bands,
   thick coloured rings instead of thin borders, round full shapes, herb and
   lime accents, and a bubbling pulse as things arrive. */
@keyframes laksa-in { 0% { opacity: 0; transform: scale(.9); } 60% { opacity: 1; transform: scale(1.03); } 100% { transform: none; } }
@keyframes laksa-bubble { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes laksa-simmer { 0% { transform: scale(.35); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

@layer mian.noodles { @scope ([data-noodle="laksa"]) to ([data-noodle]:not([data-noodle="laksa"])) {
  :scope {
    --mn-enter: laksa-in; --mn-enter-duration: 360ms; --mn-ease-enter: cubic-bezier(.3, 1.3, .5, 1);
    --mn-duration: 180ms; --mn-spring: cubic-bezier(.3, 1.45, .5, 1);
    --lk-oil: linear-gradient(180deg, color-mix(in oklab, var(--mn-primary) 22%, transparent), transparent 70%);
    --lk-ring: 0 0 0 3px color-mix(in oklab, var(--mn-primary) 22%, transparent);
    --mn-series-1: var(--mn-primary); --mn-series-2: light-dark(#a16207, #fcd34d); --mn-series-3: var(--mn-accent); --mn-series-4: light-dark(#7c2d12, #fdba74);
    --mn-bar-radius: 999px; --mn-bar-gap: 7px; --mn-line-width: 5px; --mn-area-opacity: .24; --mn-point-opacity: 1;
    --mn-bar-fill: color-mix(in oklab, var(--mn-primary) 28%, var(--mn-surface));
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3) { font-weight: 850; letter-spacing: -.035em; }

  /* Buttons: rich, round and saturated, with a layer of chilli oil on top. */
  .mn-btn { border-radius: 999px; border: 0; background-image: linear-gradient(180deg, rgb(255 255 255 / .18), transparent 55%); box-shadow: 0 4px 0 color-mix(in oklab, var(--_c, var(--mn-primary)), #000 30%); font-weight: 800; transition: transform 200ms var(--mn-spring), box-shadow 200ms var(--mn-spring); }
  .mn-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 color-mix(in oklab, var(--_c, var(--mn-primary)), #000 30%); }
  .mn-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in oklab, var(--_c, var(--mn-primary)), #000 30%); }
  .mn-btn-outline { --_bg: var(--mn-surface); --_fg: var(--_ct, var(--mn-primary-text)); box-shadow: inset 0 0 0 3px var(--_c, var(--mn-primary)), 0 4px 0 color-mix(in oklab, var(--_c, var(--mn-primary)) 35%, transparent); background-image: none; }
  .mn-btn-outline:hover { box-shadow: inset 0 0 0 3px var(--_c, var(--mn-primary)), 0 6px 0 color-mix(in oklab, var(--_c, var(--mn-primary)) 35%, transparent); }
  .mn-btn-soft { box-shadow: none; background-image: none; }
  .mn-btn-ghost, .mn-btn-link { box-shadow: none; background-image: none; }
  .mn-btn-ghost:hover, .mn-btn-link:hover, .mn-btn-soft:hover { transform: none; box-shadow: none; }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { border: 0; background-color: var(--mn-surface); box-shadow: inset 0 0 0 2px var(--mn-border); font-weight: 600; }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within, .mn-number:focus-within, .mn-otp > input:focus { box-shadow: inset 0 0 0 3px var(--mn-primary), var(--lk-ring); }
  .mn-input-group > .mn-input { box-shadow: none; }
  .mn-checkbox, .mn-radio { --_s: 1.3rem; border: 0; box-shadow: inset 0 0 0 3px var(--mn-input); }
  .mn-checkbox { border-radius: 8px; }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); box-shadow: inset 0 0 0 3px color-mix(in oklab, var(--_on), #000 25%); animation: laksa-bubble 300ms var(--mn-spring); }
  /* Switch: a thick ring of colour around a cream bead. */
  .mn-switch { --_w: 3.1rem; --_hh: 1.7rem; background: var(--mn-surface-2); box-shadow: inset 0 0 0 3px var(--mn-input); }
  .mn-switch::before { background: var(--mn-surface); box-shadow: 0 2px 0 rgb(0 0 0 / .15); transition: transform 280ms var(--mn-spring); }
  .mn-switch:checked { background: var(--_on) var(--lk-oil); box-shadow: inset 0 0 0 3px color-mix(in oklab, var(--_on), #000 25%); }
  .mn-slider { --_track: 10px; --_thumb: 1.5rem; }
  .mn-slider::-webkit-slider-thumb { border: 4px solid var(--_on); background: var(--mn-surface); box-shadow: 0 2px 0 rgb(0 0 0 / .15); }
  .mn-slider::-moz-range-thumb { border: 4px solid var(--_on); background: var(--mn-surface); box-shadow: 0 2px 0 rgb(0 0 0 / .15); }

  /* Cards: coconut cream with a thick band of chilli oil across the top. */
  .mn-card { border: 0; box-shadow: inset 0 5px 0 var(--mn-primary), 0 14px 28px -18px color-mix(in oklab, var(--mn-primary) 60%, transparent); background-image: var(--lk-oil); background-size: 100% 3.5rem; background-repeat: no-repeat; }
  .mn-card-title { font-weight: 850; }
  .mn-card-footer-bordered { border-top: 0; background: var(--mn-surface-2); }
  .mn-stats, .mn-list, .mn-accordion { border: 0; box-shadow: inset 0 0 0 3px var(--mn-border); }
  .mn-stat-value { font-weight: 900; color: var(--mn-primary-text); }

  .mn-table-wrap { border: 0; box-shadow: inset 0 0 0 3px var(--mn-border); }
  .mn-table thead th { background: var(--mn-primary); color: var(--mn-primary-fg); font-weight: 800; }
  .mn-table th, .mn-table td { border-bottom: 2px solid var(--mn-border); }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--mn-primary) 9%, transparent); }

  .mn-badge { border: 0; font-weight: 800; box-shadow: inset 0 -2px 0 rgb(0 0 0 / .2); }
  .mn-badge-outline { box-shadow: inset 0 0 0 2px currentColor; }
  .mn-chip { border: 0; box-shadow: inset 0 0 0 2px var(--mn-border); font-weight: 700; }

  /* Tabs: a thick band of colour under the current tab. */
  .mn-tab-list { border-bottom: 3px solid var(--mn-border); }
  .mn-tab { font-weight: 750; }
  .mn-tab::after { height: 5px; border-radius: 5px; bottom: -3px; }
  .mn-tab[aria-selected="true"]::after { background: var(--mn-primary); }
  .mn-tab[aria-selected="true"] { color: var(--mn-primary-text); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { border: 0; border-radius: 999px; padding: 4px; background: var(--mn-surface-2); }
  .mn-tabs-boxed .mn-tab, .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 999px; }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-primary); color: var(--mn-primary-fg); box-shadow: 0 3px 0 color-mix(in oklab, var(--mn-primary), #000 30%); }

  /* Progress: broth layers, a cream track with a thick chilli fill. */
  .mn-progress { height: .9rem; background: var(--mn-surface-2); box-shadow: inset 0 0 0 2px var(--mn-border); }
  .mn-progress::after { background: linear-gradient(180deg, color-mix(in oklab, var(--_p), #fff 20%), var(--_p) 60%); }
  .mn-radial { --_t: .7rem; font-weight: 900; }
  /* Spinner: a bubble rising from the pot. */
  .mn-spinner { border: 0; background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .6), transparent 45%), var(--_c, var(--mn-primary)); animation: laksa-simmer 1s ease-out infinite; }

  .mn-alert { border: 0; background: color-mix(in oklab, var(--_a) 12%, var(--mn-surface)); box-shadow: inset 0 0 0 3px color-mix(in oklab, var(--_a) 45%, transparent); }
  .mn-avatar { box-shadow: 0 0 0 3px var(--mn-bg), 0 0 0 6px var(--mn-primary); }
  .mn-avatar-group > .mn-avatar { box-shadow: 0 0 0 3px var(--mn-bg); }
  .mn-step::before { border: 0; box-shadow: inset 0 0 0 3px var(--mn-input); font-weight: 800; }
  .mn-step[data-state="complete"]::before { box-shadow: none; }
  .mn-step[aria-current="step"]::before { box-shadow: inset 0 0 0 3px var(--mn-primary), var(--lk-ring); }
  .mn-step + .mn-step::after { height: 5px; border-radius: 5px; top: calc(1rem - 2px); }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast { border: 0; box-shadow: inset 0 5px 0 var(--mn-primary), 0 20px 40px -20px rgb(0 0 0 / .4); }
  .mn-menu-item { border-radius: 12px; font-weight: 600; }
  .mn-page { border-radius: 999px; font-weight: 800; }
  .mn-page[aria-current="page"] { background: var(--mn-primary); color: var(--mn-primary-fg); border-color: transparent; box-shadow: none; }

  /* Charts: round, saturated bars in four broth colours. */
  .mn-bar::before { background-image: linear-gradient(180deg, rgb(255 255 255 / .2), transparent 50%); }
  .mn-bar:nth-child(4n + 2)::before { --mn-bar-fill: color-mix(in oklab, var(--mn-series-2) 35%, var(--mn-surface)); }
  .mn-bar:nth-child(4n + 3)::before { --mn-bar-fill: color-mix(in oklab, var(--mn-series-3) 35%, var(--mn-surface)); }
  .mn-donut { --thick: 42%; }
}}

/* ── SOBA ──────────────────────────────────────────────────────────────────
   Buckwheat: grey-brown, speckled, cut straight with a knife, served on a
   slatted bamboo zaru. Square corners, a speckle texture, slatted stripes in
   tables, progress and charts, calm unhurried motion. */
@keyframes soba-unroll { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

@layer mian.noodles { @scope ([data-noodle="soba"]) to ([data-noodle]:not([data-noodle="soba"])) {
  :scope {
    --mn-enter: soba-unroll; --mn-enter-duration: 260ms; --mn-ease-enter: cubic-bezier(.4, 0, .2, 1);
    --mn-duration: 200ms; --mn-spring: cubic-bezier(.4, 0, .2, 1);
    --s-speckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='%23806a55' fill-opacity='.28'%3E%3Ccircle cx='7' cy='12' r='.8'/%3E%3Ccircle cx='31' cy='5' r='.6'/%3E%3Ccircle cx='52' cy='22' r='.9'/%3E%3Ccircle cx='80' cy='9' r='.7'/%3E%3Ccircle cx='18' cy='41' r='.6'/%3E%3Ccircle cx='44' cy='48' r='.8'/%3E%3Ccircle cx='70' cy='37' r='.6'/%3E%3Ccircle cx='86' cy='60' r='.9'/%3E%3Ccircle cx='10' cy='72' r='.7'/%3E%3Ccircle cx='36' cy='80' r='.6'/%3E%3Ccircle cx='60' cy='70' r='.8'/%3E%3Ccircle cx='77' cy='84' r='.6'/%3E%3Ccircle cx='25' cy='60' r='.5'/%3E%3Ccircle cx='55' cy='88' r='.5'/%3E%3C/g%3E%3C/svg%3E");
    --s-slats: repeating-linear-gradient(90deg, transparent 0 9px, color-mix(in oklab, var(--mn-fg) 10%, transparent) 9px 10px);
    --mn-bar-radius: 0; --mn-bar-gap: 4px; --mn-line-width: 2px; --mn-area-opacity: .1;
    background-image: var(--s-speckle), var(--mn-bg-image);
  }
  .mn-card, .mn-table-wrap, .mn-list, .mn-accordion, .mn-stats, .mn-menu, .mn-modal, .mn-popover, .mn-drawer, .mn-toast { background-image: var(--s-speckle); }

  /* Buttons: flat, square, printed. Primary gets zaru slats. */
  .mn-btn { box-shadow: none; border-width: 1.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: calc(var(--mn-text-sm) - 2px); }
  .mn-btn:not(.mn-btn-outline):not(.mn-btn-ghost):not(.mn-btn-link):not(.mn-btn-soft) { background-image: var(--s-slats); }
  .mn-btn:active { transform: translateY(1px); }
  .mn-btn-outline { --_bd: var(--_c, var(--mn-fg)); }
  .mn-btn-outline:hover { --_bg: var(--_c, var(--mn-fg)); --_fg: var(--_cf, var(--mn-bg)); }
  .mn-btn-link { text-transform: none; letter-spacing: 0; font-size: var(--mn-text-sm); }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file { box-shadow: none; border-color: color-mix(in oklab, var(--mn-fg) 35%, var(--mn-input)); }
  .mn-input:focus, .mn-textarea:focus, .mn-select:focus, .mn-input-group:focus-within, .mn-number:focus-within { box-shadow: 3px 3px 0 color-mix(in oklab, var(--mn-ring) 30%, transparent); border-color: var(--mn-fg); }
  .mn-label { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--mn-muted); }
  .mn-checkbox, .mn-radio { box-shadow: none; border-radius: 0; border-color: var(--mn-fg); }
  .mn-radio { border-radius: 0; transform: rotate(45deg) scale(.85); }
  .mn-radio::before { border-radius: 0; }
  /* Switch: a square sliding block over slats. */
  .mn-switch { border-radius: 0; --_w: 2.5rem; --_hh: 1.25rem; background: var(--s-slats), var(--mn-input); }
  .mn-switch::before { border-radius: 0; box-shadow: none; }
  .mn-slider { --_track: 4px; }
  .mn-slider::-webkit-slider-thumb { border-radius: 0; width: .7rem; height: 1.3rem; margin-top: calc((4px - 1.3rem) / 2); box-shadow: none; background: var(--_on); }
  .mn-slider::-moz-range-thumb { border-radius: 0; width: .7rem; height: 1.3rem; box-shadow: none; background: var(--_on); }
  .mn-slider::-webkit-slider-runnable-track { border-radius: 0; }

  /* Cards: double-ruled, like a printed menu. */
  .mn-card { box-shadow: none; outline: 1px solid var(--mn-border); outline-offset: 3px; margin: 4px; }
  .mn-card-header { border-bottom: 1px solid var(--mn-border); padding-bottom: 1rem; }
  .mn-card-title { font-size: 1.2rem; font-weight: 500; letter-spacing: -.01em; }

  /* Tables: zaru slats. */
  .mn-table-wrap { border-radius: 0; }
  .mn-table thead th { background: none; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; border-bottom: 2px solid var(--mn-fg); color: var(--mn-fg); }
  .mn-table tbody tr:nth-child(odd) { background: color-mix(in oklab, var(--mn-surface-2) 70%, transparent); }
  .mn-table td { border-bottom-color: color-mix(in oklab, var(--mn-fg) 10%, transparent); }

  .mn-badge { border-radius: 0; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .625rem; height: 1.25rem; }
  .mn-chip { border-radius: 0; }
  .mn-tab-list { border-bottom: 2px solid var(--mn-fg); }
  .mn-tab { text-transform: uppercase; font-size: .75rem; letter-spacing: .08em; }
  .mn-tab::after { display: none; }
  .mn-tab[aria-selected="true"] { background: var(--mn-fg); color: var(--mn-bg); }
  .mn-tabs-boxed .mn-tab-list { border-radius: 0; padding: 0; background: none; border: 1.5px solid var(--mn-fg); gap: 0; }
  .mn-tabs-boxed .mn-tab { border-radius: 0; }
  .mn-tabs-boxed .mn-tab[aria-selected="true"] { box-shadow: none; background: var(--mn-fg); color: var(--mn-bg); }
  .mn-toggle-group { border-radius: 0; padding: 0; gap: 0; border: 1.5px solid var(--mn-fg); background: none; }
  .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 0; }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { box-shadow: none; background: var(--mn-fg); color: var(--mn-bg); }

  /* Progress: cut into slats. */
  .mn-progress { height: .7rem; border-radius: 0; box-shadow: inset 0 0 0 1px var(--mn-fg); background: none; }
  .mn-progress::after { border-radius: 0; background: repeating-linear-gradient(90deg, var(--_p) 0 8px, transparent 8px 11px); inset: 2px auto 2px 2px; }
  .mn-radial { background: conic-gradient(var(--_c, var(--mn-primary)) calc(var(--_v) * 1%), var(--mn-surface-2) 0); -webkit-mask: repeating-conic-gradient(#000 0 8deg, transparent 8deg 10deg); mask: repeating-conic-gradient(#000 0 8deg, transparent 8deg 10deg); }
  .mn-spinner { border-style: dashed; border-width: 2px; border-radius: 0; animation-duration: 1.4s; }
  .mn-alert { border-radius: 0; border-width: 0 0 0 4px; }
  .mn-avatar { border-radius: 0; }
  .mn-step::before { border-radius: 0; }
  .mn-menu-item, .mn-page { border-radius: 0; }
  .mn-modal, .mn-menu, .mn-popover, .mn-toast { outline: 1px solid var(--mn-border); outline-offset: 3px; }
  .mn-stat-label { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; }
  .mn-stat-value { font-family: var(--mn-font-heading); font-weight: 500; }
  .mn-donut { -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 62.5%), repeating-conic-gradient(#000 0 13deg, transparent 13deg 15deg); -webkit-mask-composite: source-in; mask: radial-gradient(closest-side, transparent 62%, #000 62.5%), repeating-conic-gradient(#000 0 13deg, transparent 13deg 15deg); mask-composite: intersect; }
  .mn-bar::before { background-image: repeating-linear-gradient(0deg, transparent 0 6px, var(--mn-surface) 6px 8px); }
  .mn-chart-h .mn-bar::before { background-image: repeating-linear-gradient(90deg, transparent 0 6px, var(--mn-surface) 6px 8px); }
}}
@layer mian.noodles { @scope ([data-noodle="soba"]) to ([data-noodle]:not([data-noodle="soba"])) {
  .mn-switch:checked { background: var(--s-slats), var(--_on); }
}}

/* ── TAGLIATELLE ───────────────────────────────────────────────────────────
   Egg ribbons rolled thin and cut by hand. An editorial system: Garamond
   headings over a clean sans, classic measures, hairline rules, warm paper,
   and one egg-yolk ribbon that marks what is chosen or important. */
@keyframes tagliatelle-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes tagliatelle-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="tagliatelle"]) to ([data-noodle]:not([data-noodle="tagliatelle"])) {
  :scope {
    --mn-enter: tagliatelle-in; --mn-enter-duration: 260ms; --mn-ease-enter: cubic-bezier(.2, .7, .2, 1);
    --mn-duration: 200ms;
    --tg-ribbon: inset 0 -3px 0 var(--mn-accent);
    --mn-bar-radius: 1px; --mn-bar-gap: 6px; --mn-line-width: 1.5px; --mn-area-opacity: .08;
    --mn-bar-fill: color-mix(in oklab, var(--mn-fg) 70%, var(--mn-bg)); --mn-bar-fill-hl: var(--mn-accent);
    --mn-series-1: var(--mn-fg); --mn-series-2: var(--mn-accent);
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3, .mn-display, .mn-title, .mn-card-title, .mn-stat-value) { letter-spacing: -.01em; font-weight: 500; }
  :scope :where(.mn-display) { font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.02; }

  .mn-btn { box-shadow: none; font-weight: 500; letter-spacing: .01em; }
  .mn-btn:not(.mn-btn-outline, .mn-btn-soft, .mn-btn-ghost, .mn-btn-link):hover { box-shadow: var(--tg-ribbon); }
  .mn-btn-outline { --_bd: var(--_c, var(--mn-fg)); border-width: 1px; }
  .mn-btn-link { text-decoration: underline; text-decoration-color: var(--mn-accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }

  .mn-input, .mn-select, .mn-textarea, .mn-number, .mn-file { border-width: 0 0 1px; border-color: var(--mn-fg); border-radius: 0; background-color: transparent; box-shadow: none; padding-inline: 0; }
  .mn-select { padding-inline-end: 1.8rem; }
  .mn-input-group { border-width: 0 0 1px; border-color: var(--mn-fg); border-radius: 0; background: transparent; }
  .mn-input-group > .mn-input { border: 0; }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within { border-color: var(--mn-accent); box-shadow: 0 2px 0 var(--mn-accent); }
  .mn-label { font-weight: 500; color: var(--mn-muted); }
  .mn-switch { background: var(--mn-surface-2); box-shadow: inset 0 0 0 1px var(--mn-input); }
  .mn-switch:checked { background: var(--mn-fg); box-shadow: none; }
  .mn-switch:checked::before { background: var(--mn-accent); }

  .mn-card, .mn-table-wrap, .mn-accordion, .mn-list, .mn-stats { border: 0; border-top: 1px solid var(--mn-fg); border-radius: 0; box-shadow: none; background: transparent; }
  .mn-card-header, .mn-card-body, .mn-card-footer { padding-inline: 0; }
  .mn-card-title { font-family: var(--mn-font-heading); font-size: 1.35rem; }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { border: 1px solid var(--mn-border); box-shadow: 0 16px 40px color-mix(in srgb, var(--mn-fg) 12%, transparent); }

  .mn-table th, .mn-table td { border-bottom-color: var(--mn-border); }
  .mn-table thead th { background: none; color: var(--mn-muted); font-weight: 500; border-bottom: 1px solid var(--mn-fg); }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--mn-accent) 7%, transparent); }

  .mn-badge { font-weight: 500; letter-spacing: .04em; }
  .mn-badge-soft { background: transparent; box-shadow: inset 0 -2px 0 currentColor; border-radius: 0; }
  .mn-chip { border-color: var(--mn-border); }

  .mn-tab-list { border-bottom: 1px solid var(--mn-border); }
  .mn-tab { font-family: var(--mn-font-heading); font-size: 1.05rem; font-weight: 500; }
  .mn-tab[aria-selected="true"]::after { height: 3px; border-radius: 0; background: var(--mn-accent); }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { box-shadow: var(--tg-ribbon); background: var(--mn-surface); }

  .mn-progress { height: 3px; border-radius: 0; background: var(--mn-border); box-shadow: none; }
  .mn-progress::after { border-radius: 0; background: var(--mn-accent); }
  .mn-spinner { border-width: 1.5px; border-color: var(--mn-border); border-top-color: var(--mn-accent); animation: tagliatelle-spin 1.1s linear infinite; }
  .mn-alert { border: 0; border-top: 1px solid var(--mn-fg); border-radius: 0; background: transparent; padding-inline: 0; }
  .mn-bar::before { background: var(--mn-bar-fill); }
  .mn-bar.mn-hl::before { background: var(--mn-accent); }
}}

/* ── TAJARIN ───────────────────────────────────────────────────────────────
   Piedmont's hair-thin egg noodles, up to forty yolks a kilo, under shaved
   white truffle. A luxury system: black and ivory at full contrast, Garamond
   headlines, tiny tracked capitals for every label and button, sharp
   corners, 1px hairlines, one yolk-gold signature and a lot of silence.
   Motion is slow and quiet: fades, never bounces. */
@keyframes tajarin-in { from { opacity: 0; } }
@keyframes tajarin-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="tajarin"]) to ([data-noodle]:not([data-noodle="tajarin"])) {
  :scope {
    --mn-enter: tajarin-in; --mn-enter-duration: 480ms; --mn-ease-enter: cubic-bezier(.4, 0, .2, 1);
    --mn-duration: 260ms; --mn-spring: cubic-bezier(.4, 0, .2, 1);
    --tj-caps: 500 .6875rem/1 var(--mn-font);
    --tj-track: .18em;
    --mn-focus: 0 0 0 1px var(--mn-bg), 0 0 0 2px var(--mn-fg);
    --mn-bar-radius: 0; --mn-bar-gap: 14px; --mn-line-width: 1px; --mn-area-opacity: 0; --mn-point-opacity: 0;
    --mn-bar-fill: color-mix(in oklab, var(--mn-fg) 12%, transparent); --mn-bar-fill-hl: var(--mn-accent);
    --mn-series-1: var(--mn-fg); --mn-series-2: var(--mn-accent);
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3, .mn-display, .mn-title, .mn-card-title, .mn-modal-title, .mn-stat-value) { font-family: var(--mn-font-heading); font-weight: 400; letter-spacing: -.01em; }

  /* Buttons: black slabs set in tiny tracked capitals. */
  .mn-btn { box-shadow: none; font: var(--tj-caps); letter-spacing: var(--tj-track); text-transform: uppercase; padding-inline: calc(var(--_h) * .7); }
  .mn-btn-icon { padding: 0; }
  .mn-btn:hover:not(.mn-btn-outline, .mn-btn-soft, .mn-btn-ghost, .mn-btn-link) { --_bg: color-mix(in oklab, var(--_c, var(--mn-primary)) 82%, var(--mn-accent)); }
  .mn-btn:active { transform: none; }
  .mn-btn-outline { --_bd: var(--mn-fg); }
  .mn-btn-outline:hover { --_bg: var(--mn-fg); --_fg: var(--mn-bg); }
  .mn-btn-link { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

  /* Fields: a single hairline to write on. */
  .mn-input, .mn-select, .mn-textarea, .mn-number, .mn-file { border-width: 0 0 1px; border-color: var(--mn-fg); background-color: transparent; box-shadow: none; padding-inline: 0; }
  .mn-select { padding-inline-end: 1.8rem; }
  .mn-input-group { border-width: 0 0 1px; border-color: var(--mn-fg); background: transparent; box-shadow: none; }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within, .mn-number:focus-within { border-color: var(--mn-accent); box-shadow: 0 1px 0 var(--mn-accent); }
  .mn-input-group > .mn-input { border: 0; box-shadow: none; }
  .mn-label { font: var(--tj-caps); letter-spacing: var(--tj-track); text-transform: uppercase; color: var(--mn-muted); }
  .mn-checkbox, .mn-radio { border: 1px solid var(--mn-fg); background-color: transparent; }
  .mn-checkbox { border-radius: 0; }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); border-color: var(--_on); }
  /* Switch: a hairline frame and a square knob. */
  .mn-switch { --_w: 2.4rem; --_hh: 1.1rem; border-radius: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--mn-fg); }
  .mn-switch::before { border-radius: 0; background: var(--mn-fg); box-shadow: none; top: 3px; left: 3px; width: calc(var(--_hh) - 6px); height: calc(var(--_hh) - 6px); }
  .mn-switch:checked { background: var(--mn-fg); box-shadow: none; }
  .mn-switch:checked::before { background: var(--mn-accent); }
  .mn-switch:focus-visible { box-shadow: inset 0 0 0 1px var(--mn-fg), var(--mn-focus); }
  .mn-slider { --_track: 1px; }
  .mn-slider::-webkit-slider-runnable-track { box-shadow: none; background: var(--mn-fg); }
  .mn-slider::-webkit-slider-thumb { border-radius: 0; border: 1px solid var(--mn-fg); background: var(--mn-bg); }
  .mn-slider::-moz-range-thumb { border-radius: 0; border: 1px solid var(--mn-fg); background: var(--mn-bg); }

  /* Surfaces: ivory with a hairline, never a shadow. */
  .mn-card, .mn-table-wrap, .mn-list, .mn-accordion, .mn-stats, .mn-collapse { border-color: var(--mn-border); box-shadow: none; }
  .mn-card-header { padding-top: 1.6rem; }
  .mn-card-title { font-size: 1.35rem; }
  .mn-card-description { font: var(--tj-caps); letter-spacing: var(--tj-track); text-transform: uppercase; }
  .mn-card-footer-bordered { background: none; border-top-color: var(--mn-border); }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { border-color: var(--mn-fg); box-shadow: none; }
  .mn-stat-label { font: var(--tj-caps); letter-spacing: var(--tj-track); text-transform: uppercase; }
  .mn-stat-value { font-size: 2rem; }

  .mn-table th, .mn-table td { border-bottom-color: var(--mn-border); padding-block: .9rem; }
  .mn-table thead th { background: none; font: var(--tj-caps); letter-spacing: var(--tj-track); text-transform: uppercase; color: var(--mn-muted); border-bottom: 1px solid var(--mn-fg); }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--mn-accent) 6%, transparent); }

  .mn-badge { border-radius: 0; font: var(--tj-caps); letter-spacing: .14em; text-transform: uppercase; }
  .mn-badge-soft { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
  .mn-chip { border-radius: 0; border-color: var(--mn-fg); font: var(--tj-caps); letter-spacing: var(--tj-track); text-transform: uppercase; }

  /* Tabs: tracked capitals; a gold hairline under the chosen one. */
  .mn-tab-list { border-bottom-color: var(--mn-border); gap: 1rem; }
  .mn-tab { font: var(--tj-caps); letter-spacing: var(--tj-track); text-transform: uppercase; padding-inline: .25rem; }
  .mn-tab[aria-selected="true"]::after { height: 1px; bottom: -1px; border-radius: 0; background: var(--mn-accent); inset-inline: 0; }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { background: transparent; border: 1px solid var(--mn-fg); border-radius: 0; gap: 0; padding: 0; }
  .mn-tabs-boxed .mn-tab, .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 0; font: var(--tj-caps); letter-spacing: var(--tj-track); text-transform: uppercase; padding-inline: 1rem; }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-fg); color: var(--mn-bg); box-shadow: none; }

  .mn-progress { height: 2px; border-radius: 0; background: var(--mn-border); box-shadow: none; }
  .mn-progress::after { border-radius: 0; background: var(--mn-fg); }
  .mn-radial { --_t: 1px; background: conic-gradient(var(--mn-accent) calc(var(--_v) * 1%), var(--mn-border) 0); }
  .mn-radial::before { font-family: var(--mn-font-heading); font-weight: 400; }
  /* Spinner: a hairline and a gold point. */
  .mn-spinner { border-width: 1px; border-color: var(--mn-border); border-top-color: var(--mn-accent); animation: tajarin-spin 1.6s linear infinite; }

  .mn-alert { border-color: var(--mn-border); background: transparent; box-shadow: inset 2px 0 0 var(--_a); }
  .mn-alert-title { font: var(--tj-caps); letter-spacing: var(--tj-track); text-transform: uppercase; }
  .mn-avatar { border-radius: 0; font-family: var(--mn-font-heading); font-weight: 400; background: transparent; box-shadow: inset 0 0 0 1px var(--mn-fg); color: var(--mn-fg); }
  .mn-step::before { border-radius: 0; font-family: var(--mn-font-heading); }
  .mn-step + .mn-step::after { height: 1px; background: var(--mn-border); }
  .mn-page { border-radius: 0; font-family: var(--mn-font-heading); }
  .mn-page[aria-current="page"] { background: var(--mn-fg); color: var(--mn-bg); border-color: var(--mn-fg); }

  /* Charts: thin columns, hairline axes, one gold column. */
  .mn-bar::before { width: 40%; margin-inline: auto; }
  .mn-donut { --thick: 8%; }
  /* On a phone, tracked caps in a row of controls would push the row past the screen: loosen the tracking and the padding. */
  @media (max-width: 480px) {
    .mn-btn-group > .mn-btn, .mn-toggle-group > button, .mn-toggle-group > label, .mn-header .mn-btn { letter-spacing: .08em; padding-inline: .75rem; }
  }
}}

/* ── MAFALDINE ─────────────────────────────────────────────────────────────
   Long ribbons with ruffled edges, named in 1902 for Princess Mafalda of
   Savoy. A regal system: Didone italics, wavy ruffled underlines and
   dividers (--mf-wave), scalloped badges, burgundy and antique gold on
   cream, generous margins and slow, courtly motion that settles. */
@keyframes mafaldine-in { from { opacity: 0; transform: translateY(6px); letter-spacing: .02em; } }
@keyframes mafaldine-turn { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="mafaldine"]) to ([data-noodle]:not([data-noodle="mafaldine"])) {
  :scope {
    --mn-enter: mafaldine-in; --mn-enter-duration: 420ms; --mn-ease-enter: cubic-bezier(.22, 1, .36, 1);
    --mn-duration: 240ms; --mn-spring: cubic-bezier(.22, 1, .36, 1);
    --mf-wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6' viewBox='0 0 16 6'%3E%3Cpath d='M0 3c2 0 2-2 4-2s2 2 4 2 2 2 4 2 2-2 4-2' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
    --mf-scallop: radial-gradient(circle at 50% 0, transparent 3px, #000 3.5px) 0 0 / 8px 100% repeat-x;
    --mf-gold: var(--mn-accent);
    --mn-focus: 0 0 0 2px var(--mn-bg), 0 0 0 3.5px var(--mf-gold);
    --mn-bar-radius: 999px 999px 0 0; --mn-bar-gap: 12px; --mn-line-width: 1.5px; --mn-area-opacity: .08; --mn-point-opacity: 1;
    --mn-bar-fill: color-mix(in oklab, var(--mn-primary) 18%, var(--mn-surface)); --mn-bar-fill-hl: var(--mn-primary);
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3, .mn-display, .mn-title, .mn-card-title, .mn-modal-title, .mn-stat-value) { font-family: var(--mn-font-heading); font-style: italic; font-weight: 400; letter-spacing: -.01em; }

  /* Buttons: burgundy with a gold hairline inside; ghosts are gold-underlined. */
  .mn-btn { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mf-gold) 55%, transparent), var(--mn-shadow-sm); font-weight: 500; letter-spacing: .02em; }
  .mn-btn:focus-visible { box-shadow: inset 0 0 0 1px var(--mf-gold), var(--mn-focus); }
  .mn-btn-outline { --_bd: var(--mn-primary); --_fg: var(--_ct, var(--mn-primary-text)); box-shadow: none; }
  .mn-btn-soft, .mn-btn-ghost { box-shadow: none; }
  .mn-btn-link { box-shadow: none; font-style: italic; }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { border-color: var(--mn-input); background-color: var(--mn-surface); box-shadow: none; }
  .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-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mf-gold) 25%, transparent); }
  .mn-input-group > .mn-input { box-shadow: none; }
  .mn-label { font-style: italic; }
  .mn-checkbox, .mn-radio { border-color: var(--mn-primary); background-color: var(--mn-surface); }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); box-shadow: 0 0 0 2px var(--mn-bg), 0 0 0 3px var(--mf-gold); }
  /* Switch: a burgundy ribbon with a gold bead. */
  .mn-switch { --_w: 2.5rem; --_hh: 1.35rem; background: var(--mn-surface-2); box-shadow: inset 0 0 0 1px var(--mn-input); }
  .mn-switch::before { background: var(--mn-surface); box-shadow: 0 0 0 1px var(--mf-gold), 0 1px 3px rgb(0 0 0 / .2); }
  .mn-switch:checked { background: var(--_on); box-shadow: inset 0 0 0 1px var(--mf-gold); }
  .mn-switch:checked::before { background: var(--mf-gold); }
  .mn-switch:focus-visible { box-shadow: inset 0 0 0 1px var(--mn-input), var(--mn-focus); }
  .mn-slider::-webkit-slider-thumb { border: 1px solid var(--mf-gold); }

  /* Surfaces: cream paper, a fine gold rule inside the edge. */
  .mn-card, .mn-table-wrap, .mn-accordion, .mn-stats, .mn-collapse { border-color: var(--mn-border); box-shadow: inset 0 0 0 4px var(--mn-surface), inset 0 0 0 5px color-mix(in oklab, var(--mf-gold) 35%, transparent); }
  .mn-card-header { text-align: start; }
  .mn-card-title { font-size: 1.3rem; }
  .mn-card-footer-bordered { background: none; border-top: 0; position: relative; }
  .mn-card-footer-bordered::before, .mn-divider::before, .mn-divider::after { content: ""; background: var(--mf-gold); -webkit-mask: var(--mf-wave-mask) 0 50% / 16px 6px repeat-x; mask: var(--mf-wave-mask) 0 50% / 16px 6px repeat-x; height: 6px; }
  .mn-card-footer-bordered::before { position: absolute; left: 1.25rem; right: 1.25rem; top: 0; }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { box-shadow: inset 0 0 0 4px var(--mn-surface), inset 0 0 0 5px color-mix(in oklab, var(--mf-gold) 35%, transparent), var(--mn-shadow-lg); }

  .mn-table th, .mn-table td { border-bottom-color: var(--mn-border); }
  .mn-table thead th { background: none; font-family: var(--mn-font-heading); font-style: italic; font-weight: 400; font-size: 1rem; color: var(--mn-primary-text); }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--mf-gold) 8%, transparent); }

  /* Badges: scalloped along the bottom like a ruffled ribbon. */
  .mn-badge { font-style: italic; font-weight: 500; border-radius: 3px 3px 0 0; padding-bottom: 3px; -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 3px) no-repeat, var(--mf-scallop); mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 3px) no-repeat, var(--mf-scallop); }
  .mn-badge-soft { background: color-mix(in oklab, var(--_c, var(--mn-primary)) 12%, var(--mn-surface)); color: var(--_ct, var(--mn-primary-text)); }
  .mn-badge-outline { -webkit-mask: none; mask: none; border-radius: 999px; padding-bottom: 0; }
  .mn-chip { border-color: color-mix(in oklab, var(--mf-gold) 50%, transparent); font-style: italic; }

  /* Tabs: italic names; the chosen one gets a ruffled burgundy underline. */
  .mn-tab-list { border-bottom-color: var(--mn-border); }
  .mn-tab { font-family: var(--mn-font-heading); font-style: italic; font-size: 1.0625rem; }
  .mn-tab::after { height: 6px; bottom: -3px; border-radius: 0; }
  .mn-tab[aria-selected="true"]::after { background: var(--mn-primary); -webkit-mask: var(--mf-wave-mask) 0 50% / 16px 6px repeat-x; mask: var(--mf-wave-mask) 0 50% / 16px 6px repeat-x; }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { background: var(--mn-surface-2); border: 1px solid var(--mn-border); }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-primary); color: var(--mn-primary-fg); box-shadow: inset 0 0 0 1px var(--mf-gold); }

  .mn-progress { height: 6px; background: var(--mn-surface-2); box-shadow: inset 0 0 0 1px var(--mn-border); }
  .mn-progress::after { background: linear-gradient(90deg, var(--mn-primary), color-mix(in oklab, var(--mn-primary) 70%, var(--mf-gold))); }
  .mn-radial { --_t: .3rem; background: conic-gradient(var(--mn-primary) calc(var(--_v) * 1%), var(--mn-surface-2) 0); box-shadow: 0 0 0 3px var(--mn-bg), 0 0 0 4px color-mix(in oklab, var(--mf-gold) 45%, transparent); }
  .mn-radial::before { font-family: var(--mn-font-heading); font-style: italic; }
  /* Spinner: a gold ring with a burgundy seal turning slowly. */
  .mn-spinner { border-width: 1.5px; border-color: color-mix(in oklab, var(--mf-gold) 35%, transparent); border-top-color: var(--_c, var(--mn-primary)); animation: mafaldine-turn 1.4s cubic-bezier(.5, .1, .5, .9) infinite; }

  .mn-alert { border-color: color-mix(in oklab, var(--_a) 30%, var(--mn-border)); background: color-mix(in oklab, var(--_a) 5%, var(--mn-surface)); }
  .mn-alert-title { font-family: var(--mn-font-heading); font-style: italic; font-weight: 400; font-size: 1.05rem; }
  .mn-avatar { box-shadow: 0 0 0 2px var(--mn-bg), 0 0 0 3px color-mix(in oklab, var(--mf-gold) 60%, transparent); font-family: var(--mn-font-heading); font-style: italic; }
  .mn-step::before { border-color: var(--mf-gold); font-family: var(--mn-font-heading); font-style: italic; }
  .mn-page { font-family: var(--mn-font-heading); font-style: italic; }
  .mn-page[aria-current="page"] { background: var(--mn-primary); color: var(--mn-primary-fg); border-color: var(--mn-primary); box-shadow: inset 0 0 0 1px var(--mf-gold); }

  /* Charts: arched columns like a colonnade; the highlight is burgundy. */
  .mn-bar::before { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mf-gold) 40%, transparent); }
  .mn-donut { --thick: 16%; }
}}

/* ── CORZETTI ──────────────────────────────────────────────────────────────
   Discs of pasta pressed between two carved wooden stamps, a coat of arms on
   one side and a flower on the other. A letterpress system: surfaces are
   pressed into the paper (inset light and shade, --cz-press), type is
   debossed, badges and avatars are round medallions with a stamped double
   ring, navy ink and a seal red on warm laid paper. The spinner turns like a
   stamp being pressed. */
@keyframes corzetti-in { from { opacity: 0; transform: scale(1.03); filter: blur(1px); } }
@keyframes corzetti-press { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(.86); } }

@layer mian.noodles { @scope ([data-noodle="corzetti"]) to ([data-noodle]:not([data-noodle="corzetti"])) {
  :scope {
    --mn-enter: corzetti-in; --mn-enter-duration: 300ms; --mn-ease-enter: cubic-bezier(.2, .8, .2, 1);
    --mn-duration: 180ms; --mn-spring: cubic-bezier(.3, 1.2, .6, 1);
    --cz-hi: light-dark(rgb(255 255 255 / .85), rgb(255 255 255 / .06));
    --cz-lo: light-dark(rgb(70 55 30 / .16), rgb(0 0 0 / .55));
    --cz-press: inset 0 1px 2px var(--cz-lo), inset 0 -1px 0 var(--cz-hi);
    --cz-raise: 0 1px 0 var(--cz-hi) inset, 0 -1px 0 var(--cz-lo) inset, 0 1px 2px var(--cz-lo);
    --cz-laid: repeating-linear-gradient(90deg, light-dark(rgb(90 70 30 / .035), rgb(255 255 255 / .02)) 0 1px, transparent 1px 7px);
    --cz-deboss: 0 1px 0 var(--cz-hi);
    --mn-focus: 0 0 0 2px var(--mn-bg), 0 0 0 4px var(--mn-ring);
    --mn-bar-radius: 999px; --mn-bar-gap: 10px; --mn-line-width: 2px; --mn-area-opacity: .1; --mn-point-opacity: 1;
    --mn-bar-fill: color-mix(in oklab, var(--mn-primary) 16%, var(--mn-surface-2)); --mn-bar-fill-hl: var(--mn-primary);
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3, .mn-display, .mn-title, .mn-card-title, .mn-stat-value) { text-shadow: var(--cz-deboss); font-variant-caps: small-caps; letter-spacing: .01em; }
  :scope :where(.mn-display, .mn-title, h1) { font-variant-caps: normal; }

  /* Buttons: raised ink stamps that press into the paper. */
  .mn-btn { box-shadow: var(--cz-raise); font-weight: 600; font-variant-caps: small-caps; letter-spacing: .03em; }
  .mn-btn:active { transform: translateY(1px); box-shadow: var(--cz-press); }
  .mn-btn:focus-visible { box-shadow: var(--cz-raise), var(--mn-focus); }
  .mn-btn-outline { --_bg: var(--mn-surface); --_bd: var(--mn-input); --_fg: var(--_ct, var(--mn-primary-text)); }
  .mn-btn-soft, .mn-btn-ghost, .mn-btn-link { box-shadow: none; }

  /* Fields: pressed into the page. */
  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { border-color: var(--mn-input); background: var(--cz-laid), var(--mn-surface); box-shadow: var(--cz-press); }
  .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-primary); box-shadow: var(--cz-press), 0 0 0 3px color-mix(in oklab, var(--mn-ring) 22%, transparent); }
  .mn-input-group > .mn-input { box-shadow: none; background: transparent; }
  .mn-label { font-variant-caps: small-caps; letter-spacing: .04em; font-weight: 600; }
  .mn-checkbox, .mn-radio { border-color: var(--mn-input); background-color: var(--mn-surface); box-shadow: var(--cz-press); }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); border-color: var(--_on); box-shadow: var(--cz-raise); }
  /* Switch: a pressed channel and a coin that rolls along it. */
  .mn-switch { --_w: 2.7rem; --_hh: 1.5rem; background: var(--mn-surface-2); box-shadow: var(--cz-press), inset 0 0 0 1px var(--mn-input); }
  .mn-switch::before { background: radial-gradient(circle, transparent 42%, color-mix(in oklab, var(--mn-primary) 25%, transparent) 44% 50%, transparent 52%), var(--mn-surface); box-shadow: var(--cz-raise); }
  .mn-switch:checked { background: var(--_on); box-shadow: var(--cz-press); }
  .mn-switch:focus-visible { box-shadow: var(--cz-press), var(--mn-focus); }
  .mn-slider::-webkit-slider-runnable-track { box-shadow: var(--cz-press); }
  .mn-slider::-webkit-slider-thumb { box-shadow: var(--cz-raise); }

  /* Surfaces: laid paper, gently embossed. */
  .mn-card, .mn-table-wrap, .mn-list, .mn-accordion, .mn-stats, .mn-collapse { border-color: var(--mn-border); background: var(--cz-laid), var(--mn-card); box-shadow: var(--cz-raise); }
  .mn-card-footer-bordered { background: var(--mn-surface-2); box-shadow: var(--cz-press); border-top-color: var(--mn-border); }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { background: var(--cz-laid), var(--mn-surface); box-shadow: var(--cz-raise), var(--mn-shadow-lg); }

  .mn-table th, .mn-table td { border-bottom-color: var(--mn-border); }
  .mn-table thead th { background: var(--mn-surface-2); box-shadow: var(--cz-press); font-variant-caps: small-caps; letter-spacing: .04em; font-weight: 600; }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--mn-primary) 5%, transparent); }

  /* Badges: round medallions with a stamped double ring. */
  .mn-badge { border: 0; font-weight: 700; font-variant-caps: small-caps; letter-spacing: .04em; box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--_cf, var(--mn-primary-fg)) 30%, transparent), var(--cz-raise); }
  .mn-badge-soft { background: var(--mn-surface-2); color: var(--_ct, var(--mn-primary-text)); box-shadow: var(--cz-press), inset 0 0 0 2px color-mix(in oklab, var(--_c, var(--mn-primary)) 25%, transparent); }
  .mn-badge-outline { box-shadow: inset 0 0 0 1px currentColor, inset 0 0 0 3px var(--mn-surface), inset 0 0 0 4px color-mix(in oklab, currentColor 40%, transparent); }
  .mn-chip { box-shadow: var(--cz-raise); }

  /* Tabs: a pressed tray; the chosen tab is a raised stamp. */
  .mn-tab-list { border-bottom: 0; gap: .25rem; padding: 4px; border-radius: 12px; background: var(--mn-surface-2); box-shadow: var(--cz-press); display: inline-flex; max-width: 100%; }
  .mn-tab { border-radius: 8px; height: calc(var(--mn-size-md) - 8px); font-variant-caps: small-caps; letter-spacing: .04em; font-weight: 600; }
  .mn-tab::after { display: none; }
  .mn-tab[aria-selected="true"] { background: var(--mn-surface); color: var(--mn-primary-text); box-shadow: var(--cz-raise); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { border: 0; background: var(--mn-surface-2); box-shadow: var(--cz-press); }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-surface); color: var(--mn-primary-text); box-shadow: var(--cz-raise); }

  .mn-progress { height: .6rem; background: var(--mn-surface-2); box-shadow: var(--cz-press); }
  .mn-progress::after { box-shadow: var(--cz-raise); }
  .mn-radial { --_t: .45rem; box-shadow: var(--cz-press); }
  .mn-radial::before { box-shadow: var(--cz-raise); background: var(--mn-surface); }
  /* Spinner: a coin stamped with a cross, pressed as it turns. */
  .mn-spinner { border: 2px solid var(--_c, var(--mn-primary)); background: linear-gradient(var(--_c, var(--mn-primary)) 0 0) center / 2px 60% no-repeat, linear-gradient(var(--_c, var(--mn-primary)) 0 0) center / 60% 2px no-repeat; box-shadow: inset 0 0 0 2px var(--mn-surface), inset 0 0 0 3px color-mix(in oklab, var(--_c, var(--mn-primary)) 40%, transparent); animation: corzetti-press 1.3s var(--mn-spring) infinite; }

  .mn-alert { border-color: var(--mn-border); background: var(--cz-laid), color-mix(in oklab, var(--_a) 6%, var(--mn-surface)); box-shadow: var(--cz-press); }
  .mn-avatar { box-shadow: 0 0 0 2px var(--mn-bg), 0 0 0 3px var(--mn-input), var(--cz-raise); font-variant-caps: small-caps; }
  .mn-step::before { box-shadow: var(--cz-raise); }
  .mn-page { box-shadow: none; }
  .mn-page[aria-current="page"] { background: var(--mn-surface); color: var(--mn-primary-text); border-color: var(--mn-input); box-shadow: var(--cz-raise); }

  /* Charts: rounded coin columns with an embossed edge. */
  .mn-bar::before { box-shadow: var(--cz-raise); }
  .mn-donut { --thick: 26%; }
}}

/* ── INANIWA ───────────────────────────────────────────────────────────────
   Akita's Inaniwa udon: kneaded, stretched and dried by hand over several
   days into thin, silky, glossy ivory noodles: once made only for the
   court. An elegant system: ivory and ink, a fine book serif with small
   capitals, gold hairlines, a faint silk sheen, generous space and slow,
   unhurried motion. */
@keyframes inaniwa-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes inaniwa-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="inaniwa"]) to ([data-noodle]:not([data-noodle="inaniwa"])) {
  :scope {
    --mn-enter: inaniwa-in; --mn-enter-duration: 560ms; --mn-ease-enter: cubic-bezier(.25, .1, .25, 1);
    --mn-duration: 260ms; --mn-spring: cubic-bezier(.25, .1, .25, 1);
    --in-gold: var(--mn-accent);
    --in-hair: color-mix(in oklab, var(--in-gold) 45%, transparent);
    --in-silk: linear-gradient(135deg, light-dark(rgb(255 255 255 / .7), rgb(255 255 255 / .04)) 0%, transparent 40%, light-dark(rgb(212 181 95 / .08), rgb(212 181 95 / .05)) 100%);
    --mn-focus: 0 0 0 3px var(--mn-bg), 0 0 0 4px var(--in-gold);
    --mn-bar-radius: 1px; --mn-bar-gap: 16px; --mn-line-width: 1.25px; --mn-area-opacity: .06; --mn-point-opacity: 1;
    --mn-bar-fill: color-mix(in oklab, var(--mn-fg) 14%, var(--mn-surface)); --mn-bar-fill-hl: var(--mn-primary);
    --mn-series-1: var(--mn-primary); --mn-series-2: var(--in-gold);
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3, .mn-card-title, .mn-modal-title) { font-family: var(--mn-font-heading); font-weight: 500; letter-spacing: -.005em; }
  :scope :where(.mn-label, .mn-stat-label) { font-variant: small-caps; letter-spacing: .06em; text-transform: lowercase; font-size: .875rem; }

  /* Buttons: ink with small capitals; a gold hairline on the quiet ones. */
  .mn-btn { box-shadow: none; font-weight: 500; font-variant: small-caps; text-transform: lowercase; letter-spacing: .08em; font-size: calc(var(--mn-text-sm) + 1px); padding-inline: calc(var(--_h) * .6); }
  .mn-btn:active { transform: none; opacity: .8; }
  .mn-btn-icon { padding: 0; }
  .mn-btn-outline { --_bd: var(--in-hair); --_fg: var(--_ct, var(--mn-fg)); }
  .mn-btn-outline:hover { --_bg: transparent; --_bd: var(--in-gold); }
  .mn-btn-soft { --_bg: var(--mn-surface-2); --_fg: var(--_ct, var(--mn-fg)); }
  /* Groups and small screens: keep the character, lose the extra width. */
  .mn-btn-group > .mn-btn:not(.mn-btn-icon) { padding-inline: calc(var(--_h) * .38); letter-spacing: 0; }
  @media (max-width: 30rem) { .mn-btn:not(.mn-btn-icon) { padding-inline: calc(var(--_h) * .42); letter-spacing: .01em; font-size: var(--mn-text-sm); } }
  .mn-btn-link { font-variant: normal; text-transform: none; letter-spacing: 0; text-decoration: underline; text-decoration-color: var(--in-hair); text-underline-offset: 5px; }

  /* Fields: a single ivory line underneath, gold when focused. */
  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file { border-width: 0 0 1px; border-radius: 0; background-color: transparent; box-shadow: none; padding-inline: .15rem; }
  .mn-select { padding-inline-end: 1.6rem; }
  .mn-textarea { border-width: 1px; border-color: var(--mn-border); padding: .75rem; }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within, .mn-number:focus-within { border-color: var(--in-gold); box-shadow: 0 1px 0 var(--in-gold); }
  .mn-input-group > .mn-input { border: 0; }
  .mn-addon { background: transparent; border: 0 !important; }
  .mn-otp > input { border-width: 0 0 1px; border-radius: 0; background: transparent; box-shadow: none; font-family: var(--mn-font-heading); font-size: 1.4rem; }
  .mn-checkbox, .mn-radio { border-width: 1px; box-shadow: none; }
  .mn-checkbox { border-radius: 1px; }
  /* Switch: a fine track with a small ivory pearl. */
  .mn-switch { --_w: 2.3rem; --_hh: 1.1rem; background: var(--mn-surface-2); box-shadow: inset 0 0 0 1px var(--mn-border); }
  .mn-switch::before { background: var(--mn-surface); box-shadow: 0 0 0 1px var(--in-hair), 0 1px 2px rgb(0 0 0 / .1); }
  .mn-switch:checked { background: var(--_on); box-shadow: none; }
  .mn-slider { --_track: 2px; --_thumb: .85rem; }
  .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(--in-gold); background: var(--mn-surface); box-shadow: none; }
  .mn-slider::-moz-range-thumb { border: 1px solid var(--in-gold); background: var(--mn-surface); box-shadow: none; }

  /* Surfaces: ivory with a silk sheen and a gold hairline set inside. */
  .mn-card, .mn-table-wrap, .mn-stats, .mn-list, .mn-accordion { background-image: var(--in-silk); border-color: var(--mn-border); box-shadow: inset 0 0 0 4px var(--mn-card), inset 0 0 0 5px var(--in-hair); }
  .mn-card-header { padding: 1.75rem 1.75rem 0; }
  .mn-card-body { padding: 1.25rem 1.75rem 1.75rem; }
  .mn-card-footer { padding-inline: 1.75rem; padding-bottom: 1.75rem; }
  .mn-card-title { font-size: 1.25rem; }
  .mn-card-footer-bordered { background: none; border-top-color: var(--in-hair); }
  .mn-stat-value { font-family: var(--mn-font-heading); font-weight: 400; font-size: 2rem; }

  .mn-table th, .mn-table td { padding-block: .85rem; border-bottom-color: var(--mn-border); }
  .mn-table thead th { background: none; font-variant: small-caps; text-transform: lowercase; letter-spacing: .08em; font-weight: 500; font-size: .875rem; border-bottom: 1px solid var(--in-gold); }
  .mn-table-hover tbody tr:hover { background: var(--in-silk); background-color: color-mix(in oklab, var(--in-gold) 5%, transparent); }

  .mn-badge { background: transparent; color: var(--_ct, var(--mn-fg)); border: 1px solid var(--in-hair); font-weight: 500; font-variant: small-caps; text-transform: lowercase; letter-spacing: .08em; font-size: .8125rem; }
  .mn-badge-soft { background: var(--mn-surface-2); border-color: transparent; }
  .mn-chip { background: transparent; border-color: var(--in-hair); }
  .mn-kbd { box-shadow: none; border-color: var(--in-hair); }

  .mn-tab-list { border-bottom-color: var(--mn-border); }
  .mn-tab { font-variant: small-caps; text-transform: lowercase; letter-spacing: .08em; font-weight: 500; font-size: .9375rem; }
  @media (max-width: 26rem) { .mn-tab { letter-spacing: .03em; } }
  .mn-tab::after { height: 1px; inset-inline: 30%; }
  .mn-tab[aria-selected="true"]::after { background: var(--in-gold); inset-inline: .9rem; transition: inset 400ms var(--mn-spring), background-color 400ms; }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { background: none; border: 1px solid var(--in-hair); padding: 3px; }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-surface-2); box-shadow: inset 0 -1px 0 var(--in-gold); }
  .mn-toggle-group > button, .mn-toggle-group > label { font-variant: small-caps; text-transform: lowercase; letter-spacing: .06em; }

  .mn-progress { height: 3px; border-radius: 0; background: var(--mn-border); box-shadow: none; }
  .mn-progress::after { border-radius: 0; background: linear-gradient(90deg, var(--_p), color-mix(in oklab, var(--_p), var(--in-gold) 40%)); }
  .mn-radial { --_t: 2px; font-family: var(--mn-font-heading); font-weight: 400; background: conic-gradient(var(--_c, var(--in-gold)) calc(var(--_v) * 1%), var(--mn-border) 0); }
  /* Spinner: a fine gold ring, turning slowly. */
  .mn-spinner { border-width: 1px; border-color: var(--mn-border); border-top-color: var(--_c, var(--in-gold)); animation: inaniwa-spin 1.6s cubic-bezier(.45, .05, .55, .95) infinite; }

  .mn-alert { background: var(--in-silk); background-color: var(--mn-surface); border-color: var(--in-hair); }
  .mn-avatar { box-shadow: 0 0 0 2px var(--mn-bg), 0 0 0 3px var(--in-hair); }
  .mn-step::before { border-width: 1px; font-family: var(--mn-font-heading); font-weight: 500; }
  .mn-step[aria-current="step"]::before { border-color: var(--in-gold); box-shadow: none; }
  .mn-step + .mn-step::after { height: 1px; }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast { border-color: var(--in-hair); background-image: var(--in-silk); box-shadow: 0 24px 48px -28px rgb(40 30 10 / .35); }
  .mn-modal-header { padding: 1.75rem 1.75rem 0; }
  .mn-modal-body { padding-inline: 1.75rem; }
  .mn-modal-footer { padding: 0 1.75rem 1.75rem; }
  .mn-page[aria-current="page"] { border-color: var(--in-gold); box-shadow: none; }
  .mn-divider::before, .mn-divider::after { background: var(--in-hair); }

  /* Charts: fine ink stems; the highlight in gold. */
  .mn-bar::before { max-width: 14px; margin-inline: auto; width: 100%; }
  .mn-bar.mn-hl::before, .mn-bar:hover::before { background: var(--in-gold); }
  .mn-chart-h .mn-bar::before { max-width: none; margin: 0; height: 5px; }
  .mn-legend li::before { border-radius: 50%; width: .5rem; height: .5rem; }
  .mn-donut { --thick: 7%; }
}}

/* ── YIFU ──────────────────────────────────────────────────────────────────
   Yifu mian (yi mein): golden fried egg noodles served at birthdays and
   weddings for long life. A celebratory lacquer system: deep lacquer red
   and black with fine gold inlay lines, panels framed like a lacquer box
   (a gold line set in from the edge), gold-rimmed controls, and slow,
   ceremonial rises. */
@keyframes yifu-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes yifu-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="yifu"]) to ([data-noodle]:not([data-noodle="yifu"])) {
  :scope {
    --mn-enter: yifu-in; --mn-enter-duration: 520ms; --mn-ease-enter: cubic-bezier(.2, .7, .2, 1);
    --mn-duration: 240ms; --mn-spring: cubic-bezier(.2, .7, .2, 1);
    --yf-gold: light-dark(#b8860b, #e8b64a);
    --yf-gold-soft: color-mix(in oklab, var(--yf-gold) 55%, transparent);
    --yf-lacquer: linear-gradient(180deg, rgb(255 255 255 / .16), transparent 40%, rgb(0 0 0 / .12));
    --yf-inlay: inset 0 0 0 3px var(--mn-card), inset 0 0 0 4px var(--yf-gold-soft);
    --mn-focus: 0 0 0 2px var(--mn-bg), 0 0 0 4px var(--yf-gold);
    --mn-bar-radius: 2px; --mn-bar-gap: 10px; --mn-line-width: 2px; --mn-area-opacity: .12; --mn-point-opacity: 1;
    --mn-bar-fill: color-mix(in oklab, var(--mn-primary) 22%, var(--mn-surface));
    --mn-series-1: var(--mn-primary); --mn-series-2: var(--yf-gold);
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3, .mn-card-title, .mn-modal-title) { font-family: var(--mn-font-heading); letter-spacing: .005em; }

  /* Buttons: lacquered, with a gold inlay line inside the edge. */
  .mn-btn { background-image: var(--yf-lacquer); box-shadow: inset 0 0 0 2px var(--_bg), inset 0 0 0 3px var(--yf-gold-soft), 0 3px 8px -4px rgb(60 10 10 / .5); font-weight: 600; letter-spacing: .04em; }
  .mn-btn:hover { filter: brightness(1.08); }
  .mn-btn:active { transform: translateY(1px); filter: none; }
  .mn-btn-outline { --_bd: var(--yf-gold); --_bg: transparent; --_fg: var(--_ct, var(--mn-fg)); background-image: none; box-shadow: none; }
  .mn-btn-outline:hover { --_bg: color-mix(in oklab, var(--yf-gold) 10%, transparent); filter: none; }
  .mn-btn-soft, .mn-btn-ghost, .mn-btn-link { background-image: none; box-shadow: none; }
  .mn-btn-soft:hover, .mn-btn-ghost:hover, .mn-btn-link:hover { filter: none; }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { border-color: var(--mn-border); box-shadow: none; }
  .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(--yf-gold); box-shadow: 0 0 0 3px color-mix(in oklab, var(--yf-gold) 22%, transparent); }
  .mn-input-group > .mn-input { box-shadow: none; }
  .mn-checkbox, .mn-radio { border-color: var(--yf-gold); box-shadow: none; }
  .mn-checkbox { border-radius: 2px; }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); border-color: var(--yf-gold); background-image: var(--yf-lacquer); }
  /* Switch: a lacquer slot with a gold coin. */
  .mn-switch { --_w: 2.7rem; --_hh: 1.45rem; background: var(--mn-surface-2); box-shadow: inset 0 0 0 1px var(--yf-gold-soft); }
  .mn-switch::before { background: radial-gradient(circle at 35% 30%, light-dark(#fff5d6, #fff0c2), var(--yf-gold)); box-shadow: 0 1px 3px rgb(60 20 0 / .35); }
  .mn-switch:checked { background: var(--_on) var(--yf-lacquer); box-shadow: inset 0 0 0 1px var(--yf-gold); }
  .mn-switch:checked::before { background: radial-gradient(circle at 35% 30%, #fff5d6, var(--yf-gold)); }
  .mn-slider { --_track: 4px; }
  .mn-slider::-webkit-slider-thumb { border: 0; background: radial-gradient(circle at 35% 30%, #fff5d6, var(--yf-gold)); box-shadow: 0 1px 3px rgb(60 20 0 / .35); }
  .mn-slider::-moz-range-thumb { border: 0; background: var(--yf-gold); box-shadow: 0 1px 3px rgb(60 20 0 / .35); }

  /* Surfaces: a lacquer box, a gold line set in from the edge. */
  .mn-card, .mn-table-wrap, .mn-stats, .mn-list, .mn-accordion, .mn-alert { border-color: var(--mn-border); box-shadow: var(--yf-inlay), 0 16px 32px -22px rgb(60 10 10 / .45); }
  .mn-card-header { padding-top: 1.6rem; }
  .mn-card-title { font-size: 1.2rem; font-weight: 600; }
  .mn-card-header::after { content: ""; display: block; width: 2.25rem; height: 1px; margin-top: .6rem; background: var(--yf-gold); }
  .mn-card-footer-bordered { background: none; border-top-color: var(--yf-gold-soft); }
  .mn-stat-value { font-family: var(--mn-font-heading); font-weight: 600; color: var(--mn-primary-text); }

  /* Tables: a lacquer-red header with a gold rule. */
  .mn-table thead th { background: var(--mn-primary) var(--yf-lacquer); color: var(--mn-primary-fg); font-weight: 600; letter-spacing: .03em; border-bottom: 1px solid var(--yf-gold); }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--yf-gold) 8%, transparent); }

  .mn-badge { background-image: var(--yf-lacquer); box-shadow: inset 0 0 0 1px var(--yf-gold-soft); font-weight: 600; letter-spacing: .03em; }
  .mn-badge-outline { border-color: var(--yf-gold); background: transparent; box-shadow: none; }
  .mn-chip { border-color: var(--yf-gold-soft); }
  .mn-kbd { border-color: var(--yf-gold-soft); box-shadow: none; }

  /* Tabs: a gold rule with a small lacquer diamond under the current tab. */
  .mn-tab-list { border-bottom-color: var(--yf-gold-soft); }
  .mn-tab { font-weight: 550; letter-spacing: .02em; }
  .mn-tab::after { inset: auto auto 4px 50%; width: 6px; height: 6px; border-radius: 1px; translate: -50% 0; rotate: 45deg; }
  .mn-tab[aria-selected="true"]::after { background: var(--mn-primary); box-shadow: 0 0 0 1px var(--yf-gold); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { background: var(--mn-surface-2); box-shadow: inset 0 0 0 1px var(--yf-gold-soft); }
  .mn-tabs-boxed .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-primary) var(--yf-lacquer); color: var(--mn-primary-fg); box-shadow: inset 0 0 0 1px var(--yf-gold); }

  /* Progress: a lacquer bar filling with gold. */
  .mn-progress { height: .55rem; background: var(--mn-surface-2); box-shadow: inset 0 0 0 1px var(--yf-gold-soft); }
  .mn-progress::after { background: linear-gradient(90deg, var(--_c, var(--mn-primary)), color-mix(in oklab, var(--_c, var(--mn-primary)), var(--yf-gold) 55%)); }
  .mn-radial { --_t: .35rem; background: conic-gradient(var(--_c, var(--mn-primary)) calc(var(--_v) * 1%), var(--mn-surface-2) 0); box-shadow: 0 0 0 1px var(--yf-gold-soft); font-family: var(--mn-font-heading); }
  .mn-radial::before { box-shadow: 0 0 0 1px var(--yf-gold-soft); }
  /* Spinner: a gold ring on lacquer. */
  .mn-spinner { border: 2px solid color-mix(in oklab, var(--mn-primary) 35%, transparent); border-top-color: var(--yf-gold); animation: yifu-spin 1.2s cubic-bezier(.45, .05, .55, .95) infinite; }

  .mn-alert { background: color-mix(in oklab, var(--_a) 7%, var(--mn-surface)); }
  .mn-avatar { box-shadow: 0 0 0 2px var(--mn-bg), 0 0 0 3px var(--yf-gold); }
  .mn-avatar-group > .mn-avatar { box-shadow: 0 0 0 2px var(--mn-bg), 0 0 0 3px var(--yf-gold-soft); }
  .mn-step::before { border-color: var(--yf-gold-soft); font-family: var(--mn-font-heading); }
  .mn-step[data-state="complete"]::before { background: var(--mn-primary) var(--yf-lacquer); border-color: var(--yf-gold); }
  .mn-step + .mn-step::after { height: 1px; background: var(--yf-gold-soft); }
  .mn-step[data-state="complete"] + .mn-step::after { background: var(--yf-gold); }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast { border-color: var(--mn-border); box-shadow: var(--yf-inlay), 0 24px 48px -24px rgb(60 10 10 / .5); }
  .mn-page[aria-current="page"] { background: var(--mn-primary); color: var(--mn-primary-fg); border-color: var(--yf-gold); box-shadow: none; }

  /* Charts: lacquer bars; the highlighted one gilded. */
  .mn-bar::before { background-image: var(--yf-lacquer); }
  .mn-bar.mn-hl::before, .mn-bar:hover::before { background: linear-gradient(180deg, color-mix(in oklab, var(--yf-gold), #fff 30%), var(--yf-gold)); }
  .mn-legend li::before { rotate: 45deg; border-radius: 1px; width: .55rem; height: .55rem; }
  .mn-donut { --thick: 22%; box-shadow: 0 0 0 1px var(--yf-gold-soft); }
}}

/* ── UDON ──────────────────────────────────────────────────────────────────
   Thick, chewy, soft, glossy in broth.
   Raised controls have a visible 5px thickness edge that compresses when
   pressed and springs back. Fat bars, fat rings, big pillow knobs. */
@keyframes udon-squish { 0% { opacity: 0; transform: scale(.86, .9); } 60% { opacity: 1; transform: scale(1.03, .97); } 100% { transform: none; } }
@keyframes udon-knob { 0% { transform: scale(1); } 40% { transform: scale(1.25, .8); } 100% { transform: scale(1); } }

@layer mian.noodles { @scope ([data-noodle="udon"]) to ([data-noodle]:not([data-noodle="udon"])) {
  :scope {
    --mn-enter: udon-squish; --mn-enter-duration: 320ms; --mn-ease-enter: cubic-bezier(.34, 1.4, .64, 1);
    --mn-duration: 180ms; --mn-spring: cubic-bezier(.34, 1.56, .64, 1);
    --mn-bar-radius: 999px; --mn-bar-gap: 10px; --mn-line-width: 7px; --mn-area-opacity: .18; --mn-point-opacity: 1;
    --mn-bar-fill: color-mix(in oklab, var(--mn-series-1) 22%, var(--mn-surface));
  }

  /* Buttons have thickness. */
  .mn-btn {
    --_edge: color-mix(in oklab, var(--_bg), #000 24%);
    font-weight: 700; border-width: 0;
    box-shadow: 0 5px 0 var(--_edge), inset 0 2px 0 rgb(255 255 255 / .28), 0 6px 14px -6px rgb(0 0 0 / .35);
    translate: 0 -2px;
    transition: translate 90ms ease-out, box-shadow 90ms ease-out, background-color var(--mn-duration);
  }
  .mn-btn:hover { translate: 0 -3px; box-shadow: 0 6px 0 var(--_edge), inset 0 2px 0 rgb(255 255 255 / .28), 0 8px 16px -6px rgb(0 0 0 / .35); }
  .mn-btn:active { transform: none; translate: 0 3px; box-shadow: 0 0 0 var(--_edge), inset 0 2px 5px rgb(0 0 0 / .18); transition-duration: 50ms; }
  .mn-btn-outline { border: 2px solid var(--_c, var(--mn-input)); --_edge: var(--_c, var(--mn-input)); background: var(--mn-surface); }
  .mn-btn-soft { --_edge: color-mix(in oklab, var(--_c, var(--mn-primary)) 35%, transparent); }
  .mn-btn-ghost, .mn-btn-link { box-shadow: none; translate: none; }
  .mn-btn-ghost:hover, .mn-btn-link:hover { translate: none; box-shadow: none; }
  .mn-btn-ghost:active { translate: 0 1px; box-shadow: none; }
  .mn-btn-group > .mn-btn { translate: none; }

  /* Fields are soft wells pressed into the surface. */
  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file {
    border: 2px solid var(--mn-input); background-color: var(--mn-surface-2);
    box-shadow: inset 0 3px 0 color-mix(in oklab, var(--mn-fg) 7%, transparent);
  }
  .mn-input:focus, .mn-textarea:focus, .mn-select:focus, .mn-input-group:focus-within, .mn-number:focus-within {
    background-color: var(--mn-surface); border-color: var(--mn-ring); box-shadow: 0 0 0 4px color-mix(in oklab, var(--mn-ring) 22%, transparent);
  }
  .mn-input-group > .mn-input { border: 0; box-shadow: none; background: transparent; }
  .mn-otp > input { border: 2px solid var(--mn-input); background: var(--mn-surface-2); box-shadow: inset 0 3px 0 color-mix(in oklab, var(--mn-fg) 7%, transparent); font-size: 1.35rem; }

  .mn-checkbox, .mn-radio { --_s: 1.4rem; border-width: 2px; border-radius: 8px; box-shadow: 0 3px 0 var(--mn-input); translate: 0 -2px; transition: translate 80ms, box-shadow 80ms, background-color 120ms; }
  .mn-radio { border-radius: 50%; }
  .mn-checkbox:checked, .mn-radio:checked { box-shadow: 0 3px 0 color-mix(in oklab, var(--_on), #000 25%); }
  .mn-checkbox:active, .mn-radio:active { translate: 0 1px; box-shadow: none; }
  /* Pillow switch: fat track, big knob that squashes when thrown. */
  .mn-switch { --_w: 3.2rem; --_hh: 1.9rem; box-shadow: inset 0 3px 0 rgb(0 0 0 / .12); }
  .mn-switch::before { top: 3px; left: 3px; width: calc(var(--_hh) - 6px); height: calc(var(--_hh) - 6px); box-shadow: 0 3px 0 rgb(0 0 0 / .18), inset 0 2px 0 rgb(255 255 255 / .6); transition: transform 320ms var(--mn-spring); }
  .mn-switch:checked::before { background: #fff; animation: udon-knob 320ms var(--mn-spring); }
  .mn-slider { --_track: 12px; --_thumb: 1.7rem; }
  .mn-slider::-webkit-slider-thumb { border-width: 0; background: #fff; box-shadow: 0 4px 0 color-mix(in oklab, var(--_on), #000 20%), 0 0 0 5px var(--_on) inset; }
  .mn-slider::-moz-range-thumb { border-width: 0; background: #fff; box-shadow: 0 4px 0 color-mix(in oklab, var(--_on), #000 20%), 0 0 0 5px var(--_on) inset; }

  /* Cards are slabs with a bottom edge. */
  .mn-card { border-width: 2px; box-shadow: 0 7px 0 var(--mn-border), 0 16px 30px -18px rgb(0 0 0 / .4); margin-bottom: 7px; }
  .mn-card-title { font-weight: 800; }
  .mn-card-footer-bordered { border-top-width: 2px; }

  /* Tables: separate chunky rows. */
  .mn-table-wrap { border: 0; background: none; overflow-x: auto; }
  .mn-table { border-collapse: separate; border-spacing: 0 8px; }
  .mn-table th, .mn-table td { border: 0; }
  .mn-table thead th { background: none; font-weight: 800; color: var(--mn-fg); padding-block: .25rem; }
  .mn-table tbody tr { box-shadow: 0 4px 0 var(--mn-border); }
  .mn-table tbody td { background: var(--mn-surface); border-block: 2px solid var(--mn-border); }
  .mn-table tbody td:first-child { border-inline-start: 2px solid var(--mn-border); border-radius: 14px 0 0 14px; }
  .mn-table tbody td:last-child { border-inline-end: 2px solid var(--mn-border); border-radius: 0 14px 14px 0; }
  .mn-table-hover tbody tr:hover { background: none; }
  .mn-table-hover tbody tr:hover td { background: var(--mn-surface-2); }
  .mn-table tfoot td { border: 0; }
  .mn-table-striped tbody tr:nth-child(even) { background: none; }

  .mn-badge { height: 1.6rem; padding: 0 .75em; font-weight: 800; box-shadow: 0 2px 0 color-mix(in oklab, var(--_c, var(--mn-primary)), #000 25%); }
  .mn-badge-soft, .mn-badge-outline { box-shadow: none; border: 2px solid color-mix(in oklab, var(--_c, var(--mn-primary)) 30%, transparent); }
  .mn-chip { border-width: 2px; height: 2.2rem; font-weight: 700; box-shadow: 0 3px 0 var(--mn-border); }

  .mn-tab-list { border-bottom: 0; gap: 6px; }
  .mn-tab { border-radius: 14px; font-weight: 700; background: var(--mn-surface-2); box-shadow: 0 3px 0 var(--mn-border); translate: 0 -2px; }
  .mn-tab::after { display: none; }
  .mn-tab[aria-selected="true"] { background: var(--mn-primary); color: var(--mn-primary-fg); box-shadow: 0 3px 0 color-mix(in oklab, var(--mn-primary), #000 25%); }
  .mn-tabs-boxed .mn-tab-list { background: none; padding: 0; gap: 6px; }
  .mn-tabs-boxed .mn-tab[aria-selected="true"] { background: var(--mn-primary); box-shadow: 0 3px 0 color-mix(in oklab, var(--mn-primary), #000 25%); }
  .mn-toggle-group { padding: 5px; border-radius: 18px; box-shadow: inset 0 3px 0 rgb(0 0 0 / .07); }
  .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 13px; font-weight: 700; }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { box-shadow: 0 3px 0 var(--mn-border); }

  .mn-progress { height: 1.1rem; box-shadow: inset 0 3px 0 rgb(0 0 0 / .1); }
  .mn-progress::after { box-shadow: inset 0 3px 0 rgb(255 255 255 / .35), inset 0 -3px 0 rgb(0 0 0 / .15); transition: width 600ms var(--mn-spring); }
  .mn-radial { --_t: .8rem; }
  .mn-spinner { border-width: 5px; }
  .mn-alert { border-width: 2px; box-shadow: 0 4px 0 color-mix(in oklab, var(--_a) 30%, var(--mn-border)); }
  .mn-avatar { box-shadow: 0 3px 0 rgb(0 0 0 / .15); border: 2px solid var(--mn-surface); }
  .mn-step::before { width: 2.4rem; height: 2.4rem; border-width: 3px; box-shadow: 0 3px 0 var(--mn-border); font-weight: 800; }
  .mn-step + .mn-step::after { height: 6px; top: 1.05rem; border-radius: 3px; }
  .mn-steps-vertical .mn-step + .mn-step::after { width: 6px; left: calc(1.2rem - 3px); }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast { border-width: 2px; box-shadow: 0 6px 0 var(--mn-border), 0 24px 40px -16px rgb(0 0 0 / .35); }
  .mn-menu-item { font-weight: 600; border-radius: 12px; }
  .mn-page { font-weight: 700; border-radius: 12px; }
  .mn-page[aria-current="page"] { background: var(--mn-primary); color: var(--mn-primary-fg); border: 0; box-shadow: 0 3px 0 color-mix(in oklab, var(--mn-primary), #000 25%); }
  .mn-accordion { border-width: 2px; box-shadow: 0 5px 0 var(--mn-border); }
  .mn-accordion > details + details { border-top-width: 2px; }
  .mn-stats { border-width: 2px; }
  .mn-stat-value { font-weight: 800; }
  .mn-donut { --thick: 62%; }
  .mn-bar::before { box-shadow: inset 0 4px 0 rgb(255 255 255 / .3); border: 2px solid color-mix(in oklab, var(--mn-series-1) 35%, transparent); }
  .mn-bar.mn-hl::before, .mn-bar:hover::before { border-color: color-mix(in oklab, var(--mn-series-1), #000 25%); box-shadow: inset 0 4px 0 rgb(255 255 255 / .3), 0 4px 0 color-mix(in oklab, var(--mn-series-1), #000 25%); }
  .mn-chart-h .mn-bar { height: 1.6rem; }
  .mn-skeleton { border-radius: 14px; }
}}

/* ── GNOCCHI ───────────────────────────────────────────────────────────────
   Small pillows of potato dough, rolled over a fork so each keeps the dent
   of a thumb. A clay system: everything is a soft, inflated shape lit from
   above, with a light inner edge on top, a darker one beneath and a wide
   coloured shadow. Things squash when pressed and pop back. */
@keyframes gnocchi-in { 0% { opacity: 0; transform: scale(.92); } 70% { transform: scale(1.015); } 100% { transform: none; } }
@keyframes gnocchi-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="gnocchi"]) to ([data-noodle]:not([data-noodle="gnocchi"])) {
  :scope {
    --mn-enter: gnocchi-in; --mn-enter-duration: 320ms; --mn-ease-enter: cubic-bezier(.2, .9, .3, 1);
    --mn-duration: 180ms; --mn-spring: cubic-bezier(.34, 1.4, .64, 1);
    --gn-hi: light-dark(rgb(255 255 255 / .75), rgb(255 255 255 / .1));
    --gn-lo: light-dark(rgb(120 72 40 / .16), rgb(0 0 0 / .45));
    --gn-drop: light-dark(rgb(150 88 50 / .26), rgb(0 0 0 / .6));
    --gn-clay: inset 0 5px 8px var(--gn-hi), inset 0 -6px 10px var(--gn-lo), 0 14px 28px -12px var(--gn-drop);
    --gn-clay-sm: inset 0 3px 5px var(--gn-hi), inset 0 -3px 6px var(--gn-lo), 0 6px 14px -8px var(--gn-drop);
    --gn-dent: inset 0 4px 8px var(--gn-lo), inset 0 -3px 5px var(--gn-hi);
    --mn-bar-radius: 999px; --mn-bar-gap: 9px; --mn-line-width: 4px; --mn-area-opacity: .14;
    --mn-bar-fill: color-mix(in oklab, var(--mn-primary) 30%, var(--mn-surface-2)); --mn-bar-fill-hl: var(--mn-primary);
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3, .mn-display) { letter-spacing: -.02em; }

  .mn-btn { border-color: transparent; font-weight: 800; box-shadow: inset 0 4px 6px color-mix(in oklab, var(--_bg), #fff 38%), inset 0 -5px 8px color-mix(in oklab, var(--_bg), #000 20%), 0 10px 18px -8px color-mix(in oklab, var(--_bg) 70%, #000); transition: transform var(--mn-duration) var(--mn-spring), box-shadow var(--mn-duration) var(--mn-ease), background-color var(--mn-duration) var(--mn-ease); }
  .mn-btn:hover { transform: translateY(-1px); }
  .mn-btn:active { transform: scale(.95); }
  .mn-btn-outline, .mn-btn-ghost, .mn-btn-soft { --_bd: transparent; background-color: var(--mn-surface); box-shadow: var(--gn-clay-sm); }
  .mn-btn-link { box-shadow: none; background-color: transparent; }
  @media (prefers-reduced-motion: reduce) { .mn-btn:hover, .mn-btn:active { transform: none; } }

  .mn-input, .mn-select, .mn-textarea, .mn-number, .mn-input-group { border-color: transparent; background-color: var(--mn-surface-2); box-shadow: var(--gn-dent); }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within { border-color: var(--mn-primary); box-shadow: var(--gn-dent), 0 0 0 3px color-mix(in oklab, var(--mn-primary) 25%, transparent); }
  .mn-input-group > .mn-input { background: transparent; box-shadow: none; }
  .mn-label { font-weight: 700; }
  .mn-switch { --_w: 2.9rem; --_hh: 1.65rem; background: var(--mn-surface-2); box-shadow: var(--gn-dent); }
  .mn-switch:checked { background: var(--mn-primary); box-shadow: inset 0 3px 6px color-mix(in oklab, var(--mn-primary), #000 30%); }
  .mn-switch::before { box-shadow: var(--gn-clay-sm); }
  .mn-checkbox, .mn-radio { --_s: 1.3rem; border-color: transparent; background-color: var(--mn-surface-2); box-shadow: var(--gn-dent); }
  .mn-checkbox { border-radius: 8px; }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); box-shadow: var(--gn-clay-sm); }

  .mn-card, .mn-table-wrap, .mn-accordion, .mn-list, .mn-stats { border-color: transparent; box-shadow: var(--gn-clay); }
  .mn-card .mn-card, .mn-card .mn-stats, .mn-card .mn-table-wrap, .mn-card .mn-list { box-shadow: var(--gn-dent); background-color: var(--mn-surface-2); }
  .mn-card-interactive { transition: transform var(--mn-duration) var(--mn-spring), box-shadow var(--mn-duration) var(--mn-ease); }
  .mn-card-interactive:hover { transform: translateY(-3px); border-color: transparent; }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer, .mn-command-dialog { border-color: transparent; box-shadow: inset 0 5px 8px var(--gn-hi), inset 0 -6px 10px var(--gn-lo), 0 30px 60px -20px var(--gn-drop); }

  .mn-table thead th { background: transparent; font-weight: 800; }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--mn-primary) 8%, transparent); }

  .mn-badge { font-weight: 800; box-shadow: var(--gn-clay-sm); }
  .mn-badge-outline { border-color: transparent; background-color: var(--mn-surface); }
  .mn-chip { border-color: transparent; background-color: var(--mn-surface); box-shadow: var(--gn-clay-sm); font-weight: 700; }

  .mn-tab-list { border-bottom: 0; }
  .mn-tab-list, .mn-toggle-group { background: var(--mn-surface-2); box-shadow: var(--gn-dent); border: 0; border-radius: 999px; padding: 5px; }
  .mn-tab, .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 999px; font-weight: 700; }
  .mn-tab::after { display: none; }
  .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-surface); color: var(--mn-fg); box-shadow: var(--gn-clay-sm); }
  .mn-tabs-vertical .mn-tab-list { border-radius: 28px; }

  .mn-progress { height: 14px; border-radius: 999px; background: var(--mn-surface-2); box-shadow: var(--gn-dent); }
  .mn-progress::after { border-radius: 999px; background: var(--mn-primary); box-shadow: inset 0 3px 4px color-mix(in oklab, var(--mn-primary), #fff 40%), inset 0 -3px 4px color-mix(in oklab, var(--mn-primary), #000 18%); }
  .mn-spinner { border-width: 5px; border-color: var(--mn-surface-2); border-top-color: var(--mn-primary); animation: gnocchi-spin .9s cubic-bezier(.5, .1, .4, .9) infinite; }
  .mn-alert { border-color: transparent; box-shadow: var(--gn-clay-sm); }
  .mn-avatar { box-shadow: var(--gn-clay-sm); }
  .mn-bar::before { border-radius: 999px; box-shadow: inset 0 3px 4px var(--gn-hi), inset 0 -3px 4px var(--gn-lo); }
}}

/* ── CAVATELLI ─────────────────────────────────────────────────────────────
   “Little hollows”: a small piece of dough dragged under two fingers, so it
   curls around the dent they leave. One material, one colour: every element
   is pushed out of the page or pressed into it, and only light and shadow
   draw its edge. Colour is kept for what is on. */
@keyframes cavatelli-in { from { opacity: 0; transform: scale(.985); } }
@keyframes cavatelli-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="cavatelli"]) to ([data-noodle]:not([data-noodle="cavatelli"])) {
  :scope {
    --mn-enter: cavatelli-in; --mn-enter-duration: 260ms; --mn-ease-enter: cubic-bezier(.16, 1, .3, 1);
    --mn-duration: 200ms; --mn-spring: cubic-bezier(.16, 1, .3, 1);
    --cv-hi: light-dark(rgb(255 255 255 / .9), rgb(255 255 255 / .055));
    --cv-lo: light-dark(rgb(150 163 184 / .6), rgb(0 0 0 / .6));
    --cv-out: 7px 7px 16px var(--cv-lo), -7px -7px 16px var(--cv-hi);
    --cv-out-sm: 3px 3px 7px var(--cv-lo), -3px -3px 7px var(--cv-hi);
    --cv-in: inset 3px 3px 7px var(--cv-lo), inset -3px -3px 7px var(--cv-hi);
    --cv-in-deep: inset 5px 5px 10px var(--cv-lo), inset -5px -5px 10px var(--cv-hi);
    --mn-card: var(--mn-bg); --mn-popover: var(--mn-bg);
    --mn-bar-radius: 999px; --mn-bar-gap: 10px; --mn-line-width: 3px; --mn-area-opacity: .1;
    --mn-bar-fill: color-mix(in oklab, var(--mn-fg) 14%, var(--mn-bg)); --mn-bar-fill-hl: var(--mn-primary);
  }
  :scope :where(h1, h2, h3, .mn-h1, .mn-h2, .mn-h3, .mn-display) { letter-spacing: -.025em; }

  .mn-btn { border-color: transparent; box-shadow: var(--cv-out-sm); font-weight: 600; }
  .mn-btn:active { transform: none; box-shadow: var(--cv-in); }
  .mn-btn-outline, .mn-btn-ghost, .mn-btn-soft { --_bg: var(--mn-bg); --_bd: transparent; background-color: var(--mn-bg); box-shadow: var(--cv-out-sm); }
  .mn-btn-outline:hover, .mn-btn-ghost:hover, .mn-btn-soft:hover { --_bg: var(--mn-bg); color: var(--mn-primary-text); }
  .mn-btn-outline:active, .mn-btn-ghost:active, .mn-btn-soft:active { box-shadow: var(--cv-in); }
  .mn-btn-link { box-shadow: none; }

  .mn-input, .mn-select, .mn-textarea, .mn-number, .mn-input-group { border-color: transparent; background-color: var(--mn-bg); box-shadow: var(--cv-in); }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within { border-color: var(--mn-ring); box-shadow: var(--cv-in-deep); }
  .mn-input-group > .mn-input { box-shadow: none; background: transparent; }
  .mn-switch { --_w: 2.9rem; --_hh: 1.6rem; background: var(--mn-bg); box-shadow: var(--cv-in), 0 0 0 1px var(--mn-input); }
  .mn-switch:checked { background: var(--mn-primary); box-shadow: inset 2px 2px 5px rgb(0 0 0 / .3); }
  .mn-switch::before { background: var(--mn-bg); box-shadow: 2px 2px 5px var(--cv-lo), -1px -1px 3px var(--cv-hi); }
  .mn-checkbox, .mn-radio { --_s: 1.25rem; border-color: var(--mn-input); background-color: var(--mn-bg); box-shadow: var(--cv-in); }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); border-color: var(--_on); box-shadow: var(--cv-out-sm); }

  .mn-card, .mn-table-wrap, .mn-accordion, .mn-list, .mn-stats { border-color: transparent; background-color: var(--mn-bg); box-shadow: var(--cv-out); }
  .mn-card .mn-card, .mn-card .mn-stats, .mn-card .mn-table-wrap, .mn-card .mn-list, .mn-card .mn-accordion { box-shadow: var(--cv-in); }
  .mn-card-interactive:hover { border-color: transparent; }
  .mn-card-interactive:active { box-shadow: var(--cv-in-deep); }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer, .mn-command-dialog, .mn-combobox-list { border-color: var(--mn-border); background-color: var(--mn-bg); box-shadow: 14px 14px 34px var(--cv-lo), -8px -8px 24px var(--cv-hi); }

  .mn-table thead th { background: transparent; color: var(--mn-muted); }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--mn-fg) 4%, transparent); }

  .mn-badge { font-weight: 600; }
  .mn-badge-outline { border-color: transparent; box-shadow: var(--cv-out-sm); }
  .mn-chip { border-color: transparent; background-color: var(--mn-bg); box-shadow: var(--cv-out-sm); }
  button.mn-chip:active { box-shadow: var(--cv-in); }

  .mn-tab-list { border-bottom: 0; }
  .mn-tab-list, .mn-toggle-group { background: var(--mn-bg); box-shadow: var(--cv-in); border: 0; border-radius: calc(var(--mn-radius-field) + 5px); padding: 5px; }
  .mn-tab, .mn-toggle-group > button, .mn-toggle-group > label { border-radius: var(--mn-radius-field); }
  .mn-tab::after { display: none; }
  .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-bg); color: var(--mn-primary-text); box-shadow: var(--cv-out-sm); }

  .mn-progress { height: 12px; border-radius: 999px; background: var(--mn-bg); box-shadow: var(--cv-in); }
  .mn-progress::after { border-radius: 999px; background: var(--mn-primary); }
  .mn-spinner { border-width: 4px; border-color: color-mix(in oklab, var(--mn-fg) 10%, var(--mn-bg)); border-top-color: var(--mn-primary); animation: cavatelli-spin 1s linear infinite; }
  .mn-alert { border-color: transparent; background-color: var(--mn-bg); box-shadow: var(--cv-in); }
  .mn-avatar { box-shadow: var(--cv-out-sm); }
  .mn-divider { border-color: transparent; box-shadow: 0 1px 0 var(--cv-hi), 0 -1px 0 var(--cv-lo); }
  .mn-bar::before { border-radius: 999px 999px 0 0; }
}}

/* ── ORECCHIETTE ───────────────────────────────────────────────────────────
   Little ears pressed with a thumb: a smooth cup with a rough rim. A concave
   system: controls and cards are cups pressed into the page; pressing
   deepens the cup; choosing fills it with olive. Round, warm, generous. */
@keyframes orecchiette-in { from { opacity: 0; transform: scale(.97); } }
@keyframes orecchiette-spin { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="orecchiette"]) to ([data-noodle]:not([data-noodle="orecchiette"])) {
  :scope {
    --mn-enter: orecchiette-in; --mn-enter-duration: 220ms; --mn-ease-enter: cubic-bezier(.2, .8, .2, 1);
    --mn-duration: 180ms;
    --oc-cup: inset 0 2px 6px color-mix(in srgb, var(--mn-fg) 11%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--mn-bg) 70%, transparent);
    --oc-cup-deep: inset 0 4px 10px color-mix(in srgb, var(--mn-fg) 18%, transparent);
    --mn-bar-radius: 999px; --mn-bar-gap: 8px; --mn-line-width: 3px;
    --mn-bar-fill: color-mix(in oklab, var(--mn-primary) 35%, var(--mn-surface-2)); --mn-bar-fill-hl: var(--mn-primary);
  }

  .mn-btn { border-radius: 999px; box-shadow: none; font-weight: 700; }
  .mn-btn-outline, .mn-btn-ghost { box-shadow: var(--oc-cup); border-color: transparent; background-color: var(--mn-surface-2); }
  .mn-btn:active { box-shadow: var(--oc-cup-deep); transform: none; }

  .mn-input, .mn-select, .mn-textarea, .mn-number, .mn-input-group { border-color: transparent; background-color: var(--mn-surface-2); box-shadow: var(--oc-cup); }
  .mn-input-group > .mn-input { box-shadow: none; background: transparent; }
  .mn-input:focus, .mn-select:focus, .mn-textarea:focus, .mn-input-group:focus-within { border-color: var(--mn-primary); box-shadow: var(--oc-cup), 0 0 0 3px color-mix(in srgb, var(--mn-primary) 22%, transparent); }
  .mn-checkbox, .mn-radio { border-color: transparent; background-color: var(--mn-surface-2); box-shadow: var(--oc-cup); }
  .mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background-color: var(--_on); box-shadow: none; }
  .mn-switch { background: var(--mn-surface-2); box-shadow: var(--oc-cup); }
  .mn-switch:checked { background: var(--mn-primary); box-shadow: var(--oc-cup-deep); }
  .mn-switch::before { box-shadow: 0 1px 2px color-mix(in srgb, var(--mn-fg) 25%, transparent); }

  .mn-card, .mn-table-wrap, .mn-accordion, .mn-list, .mn-stats { border-color: var(--mn-border); box-shadow: var(--oc-cup); background-color: color-mix(in oklab, var(--mn-surface-2) 55%, var(--mn-surface)); }
  .mn-card-interactive:active { box-shadow: var(--oc-cup-deep); }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast, .mn-drawer { box-shadow: 0 18px 50px color-mix(in srgb, var(--mn-fg) 18%, transparent); }

  .mn-table thead th { background: transparent; font-weight: 700; }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--mn-primary) 7%, transparent); }

  .mn-badge { border-radius: 999px; font-weight: 700; }
  .mn-badge-soft { box-shadow: var(--oc-cup); }
  .mn-chip { border-color: transparent; background-color: var(--mn-surface-2); box-shadow: var(--oc-cup); }

  .mn-tab-list { border-bottom: 0; }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group, .mn-tab-list { background: var(--mn-surface-2); box-shadow: var(--oc-cup); border-radius: 999px; padding: 4px; border: 0; }
  .mn-tab, .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 999px; }
  .mn-tab::after { display: none; }
  .mn-tab[aria-selected="true"], .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-surface); color: var(--mn-fg); box-shadow: 0 1px 3px color-mix(in srgb, var(--mn-fg) 18%, transparent); }
  .mn-tabs-vertical .mn-tab-list { border-radius: 26px; }

  .mn-progress { height: 12px; border-radius: 999px; background: var(--mn-surface-2); box-shadow: var(--oc-cup); }
  .mn-progress::after { border-radius: 999px; background: var(--mn-primary); }
  .mn-spinner { border-width: 4px; border-color: var(--mn-surface-2); border-top-color: var(--mn-primary); box-shadow: var(--oc-cup); animation: orecchiette-spin .9s linear infinite; }
  .mn-alert { border-color: var(--mn-border); box-shadow: var(--oc-cup); }
  .mn-avatar { box-shadow: var(--oc-cup); }
  .mn-bar::before { border-radius: 999px; }
}}

/* ── MEE ───────────────────────────────────────────────────────────────────
   Yellow egg noodles, wok-fried. Golden gradient fills, a toasted,
   charred bottom edge on raised controls, round pill shapes, round charts,
   and a quick sizzle wiggle when things are pressed or appear. */
@keyframes mee-sizzle { 0%, 100% { transform: none; } 20% { transform: rotate(-2.5deg); } 40% { transform: rotate(2deg); } 60% { transform: rotate(-1.5deg); } 80% { transform: rotate(1deg); } }
@keyframes mee-pop { 0% { opacity: 0; transform: scale(.85) rotate(-4deg); } 60% { opacity: 1; transform: scale(1.04) rotate(1deg); } 100% { transform: none; } }
@keyframes mee-toss { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-40%) rotate(160deg); } 70% { transform: translateY(0) rotate(300deg); } }

@layer mian.noodles { @scope ([data-noodle="mee"]) to ([data-noodle]:not([data-noodle="mee"])) {
  :scope {
    --mn-enter: mee-pop; --mn-enter-duration: 300ms; --mn-ease-enter: cubic-bezier(.3, 1.3, .5, 1);
    --mn-duration: 160ms; --mn-spring: cubic-bezier(.3, 1.4, .5, 1);
    --m-char: color-mix(in oklab, #7c2d12 70%, var(--mn-primary));
    --mn-bar-radius: 999px; --mn-bar-gap: 8px; --mn-line-width: 4px; --mn-area-opacity: .25; --mn-point-opacity: 1;
    --mn-bar-fill: color-mix(in oklab, var(--mn-series-1) 35%, var(--mn-surface));
    --mn-series-2: #c2410c;
  }

  /* Buttons: golden, toasted underneath, sizzle on hover. */
  .mn-btn { font-weight: 800; border: 0; background-image: linear-gradient(180deg, rgb(255 255 255 / .28), transparent 55%); box-shadow: inset 0 -3px 0 color-mix(in oklab, var(--_c, var(--mn-primary)), #3b1500 45%), 0 4px 12px -5px color-mix(in oklab, var(--_c, var(--mn-primary)) 80%, transparent); }
  .mn-btn:hover { animation: mee-sizzle 360ms ease-in-out; }
  .mn-btn:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--_c, var(--mn-primary)), #3b1500 45%); }
  .mn-btn-outline { border: 2px solid var(--_c, var(--mn-primary)); background-image: none; box-shadow: none; }
  .mn-btn-ghost, .mn-btn-link { background-image: none; box-shadow: none; }
  .mn-btn-soft { background-image: none; box-shadow: inset 0 -2px 0 color-mix(in oklab, var(--_c, var(--mn-primary)) 35%, transparent); }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { border: 2px solid var(--mn-input); box-shadow: inset 0 -3px 0 color-mix(in oklab, var(--mn-primary) 35%, transparent); }
  .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-primary); box-shadow: inset 0 -3px 0 var(--m-char), 0 0 0 4px color-mix(in oklab, var(--mn-primary) 30%, transparent); }
  .mn-input-group > .mn-input { border: 0; box-shadow: none; }
  .mn-otp > input { border-radius: 50%; width: calc(var(--mn-size-md) + 8px); }
  .mn-checkbox, .mn-radio { border: 2px solid var(--mn-input); border-radius: 50%; --_s: 1.35rem; }
  .mn-checkbox:checked, .mn-radio:checked { background-image: linear-gradient(180deg, rgb(255 255 255 / .3), transparent 60%); box-shadow: inset 0 -2px 0 var(--m-char); animation: mee-sizzle 300ms; }
  .mn-switch { --_w: 3rem; --_hh: 1.7rem; box-shadow: inset 0 2px 3px rgb(0 0 0 / .12); }
  .mn-switch::before { box-shadow: inset 0 -3px 0 rgb(0 0 0 / .12), 0 2px 4px rgb(0 0 0 / .2); transition: transform 300ms var(--mn-spring); }
  .mn-switch:checked { background: linear-gradient(180deg, color-mix(in oklab, var(--_on), #fff 20%), var(--_on)); box-shadow: inset 0 -3px 0 var(--m-char); }
  .mn-slider { --_track: 10px; --_thumb: 1.5rem; }
  .mn-slider::-webkit-slider-thumb { border: 0; background: radial-gradient(circle at 40% 35%, #fff6d6, var(--_on) 70%); box-shadow: inset 0 -3px 0 var(--m-char), 0 2px 5px rgb(0 0 0 / .25); }
  .mn-slider::-moz-range-thumb { border: 0; background: var(--_on); box-shadow: inset 0 -3px 0 var(--m-char); }

  .mn-card { border: 2px solid var(--mn-border); background-image: linear-gradient(180deg, color-mix(in oklab, var(--mn-primary) 7%, transparent), transparent 40%); box-shadow: 0 5px 0 color-mix(in oklab, var(--mn-primary) 22%, var(--mn-border)), 0 16px 28px -16px rgb(0 0 0 / .3); }
  .mn-card-title { font-weight: 800; }

  /* Tables: golden header pill, pill rows. */
  .mn-table-wrap { border: 0; background: none; overflow-x: auto; }
  .mn-table { border-collapse: separate; border-spacing: 0 5px; }
  .mn-table th, .mn-table td { border: 0; }
  .mn-table thead th { background: var(--mn-primary); color: var(--mn-primary-fg); font-weight: 800; }
  .mn-table thead th:first-child, .mn-table tbody td:first-child { border-radius: 999px 0 0 999px; }
  .mn-table thead th:last-child, .mn-table tbody td:last-child { border-radius: 0 999px 999px 0; }
  .mn-table tbody td { background: var(--mn-surface); box-shadow: inset 0 -2px 0 color-mix(in oklab, var(--mn-primary) 25%, transparent); }
  .mn-table-hover tbody tr:hover { background: none; }
  .mn-table-hover tbody tr:hover td { background: color-mix(in oklab, var(--mn-primary) 12%, var(--mn-surface)); }
  .mn-table-striped tbody tr:nth-child(even) { background: none; }

  .mn-badge { font-weight: 800; background-image: linear-gradient(180deg, rgb(255 255 255 / .25), transparent 60%); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .18); }
  .mn-badge-soft, .mn-badge-outline { background-image: none; box-shadow: none; }
  .mn-chip { border: 2px solid var(--mn-border); font-weight: 700; }
  .mn-tab-list { border-bottom: 0; gap: 6px; }
  .mn-tab { border-radius: 999px; background: var(--mn-surface-2); font-weight: 700; }
  .mn-tab::after { display: none; }
  .mn-tab[aria-selected="true"] { background: linear-gradient(180deg, color-mix(in oklab, var(--mn-primary), #fff 20%), var(--mn-primary)); color: var(--mn-primary-fg); box-shadow: inset 0 -3px 0 var(--m-char); animation: mee-sizzle 320ms; }
  .mn-tabs-boxed .mn-tab-list { border-radius: 999px; padding: 4px; }
  .mn-tabs-boxed .mn-tab { background: transparent; }
  .mn-toggle-group { border-radius: 999px; padding: 4px; }
  .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 999px; font-weight: 700; }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-primary); color: var(--mn-primary-fg); box-shadow: inset 0 -3px 0 var(--m-char); }

  .mn-progress { height: .9rem; box-shadow: inset 0 2px 3px rgb(0 0 0 / .1); }
  .mn-progress::after { background: linear-gradient(180deg, color-mix(in oklab, var(--_p), #fff 30%), var(--_p) 55%, color-mix(in oklab, var(--_p), #3b1500 35%)); }
  .mn-radial { --_t: .55rem; font-weight: 900; }
  .mn-spinner { border-width: 4px; border-style: dotted; border-color: var(--mn-primary); animation: mee-toss .9s var(--mn-spring) infinite; }
  .mn-alert { border-width: 2px; border-radius: 22px; }
  .mn-avatar { box-shadow: 0 0 0 2px var(--mn-primary), 0 3px 0 2px var(--m-char); }
  .mn-step::before { background: var(--mn-surface-2); border-color: var(--mn-input); font-weight: 800; }
  .mn-step[data-state="complete"]::before { background: linear-gradient(180deg, color-mix(in oklab, var(--mn-primary), #fff 20%), var(--mn-primary)); box-shadow: inset 0 -3px 0 var(--m-char); }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast { border-width: 2px; }
  .mn-menu-item, .mn-page { border-radius: 999px; font-weight: 600; }
  .mn-page[aria-current="page"] { background: var(--mn-primary); color: var(--mn-primary-fg); border: 0; box-shadow: inset 0 -3px 0 var(--m-char); }
  .mn-stat-value { font-weight: 900; }

  /* Charts: round, toasted. The donut becomes a full pie. */
  .mn-bar::before { background-image: linear-gradient(90deg, rgb(255 255 255 / .35), transparent 60%); }
  .mn-bar.mn-hl::before, .mn-bar:hover::before { background: linear-gradient(180deg, color-mix(in oklab, var(--mn-series-1), #fff 20%), var(--mn-series-1) 60%, var(--m-char)); }
  .mn-donut { --thick: 100%; box-shadow: inset 0 -6px 0 rgb(0 0 0 / .12); }
  .mn-chart-line .mn-line { stroke-dasharray: 0.1 9; stroke-width: 7px; }
  .mn-chart-line .mn-line.mn-s2 { stroke-dasharray: none; stroke-width: 3px; }
}}

/* ── MIXIAN ────────────────────────────────────────────────────────────────
   Yunnan's round rice noodles, smooth and springy. In crossing-the-bridge
   noodles they arrive with a bowl of very hot broth and a table of small
   plates, and each ingredient is slid in one at a time. A small-plates
   system: everything round, every choice on its own separate plate (button
   groups, toggles, tabs, table rows, list items, stats, avatars), and items
   that arrive one after another. Porcelain cobalt on warm white. */
@keyframes mixian-in { from { opacity: 0; transform: scale(.92); } }
@keyframes mixian-orbit { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="mixian"]) to ([data-noodle]:not([data-noodle="mixian"])) {
  :scope {
    --mn-enter: mixian-in; --mn-enter-duration: 320ms; --mn-ease-enter: cubic-bezier(.3, 1.25, .5, 1);
    --mn-duration: 200ms; --mn-spring: cubic-bezier(.3, 1.3, .5, 1);
    --mx-plate: 0 1px 2px rgb(40 30 10 / .06), 0 6px 16px -8px rgb(40 30 10 / .22);
    --mx-plate-hi: 0 2px 4px rgb(40 30 10 / .08), 0 12px 24px -10px rgb(40 30 10 / .28);
    --mn-bar-radius: 999px; --mn-bar-gap: 8px; --mn-line-width: 3px; --mn-area-opacity: .1; --mn-point-opacity: 1;
  }

  /* Things arrive one plate at a time. */
  :is(.mn-list > li, .mn-table tbody tr, .mn-toggle-group > *, .mn-stats > .mn-stat, .mn-btn-group > .mn-btn, .mn-avatar-group > *) { animation: mixian-in 320ms var(--mn-spring) both; }
  :is(.mn-list > li, .mn-table tbody tr, .mn-toggle-group > *, .mn-stats > .mn-stat, .mn-btn-group > .mn-btn, .mn-avatar-group > *):nth-child(2) { animation-delay: 50ms; }
  :is(.mn-list > li, .mn-table tbody tr, .mn-toggle-group > *, .mn-stats > .mn-stat, .mn-btn-group > .mn-btn, .mn-avatar-group > *):nth-child(3) { animation-delay: 100ms; }
  :is(.mn-list > li, .mn-table tbody tr, .mn-toggle-group > *, .mn-stats > .mn-stat, .mn-btn-group > .mn-btn, .mn-avatar-group > *):nth-child(4) { animation-delay: 150ms; }
  :is(.mn-list > li, .mn-table tbody tr, .mn-toggle-group > *, .mn-stats > .mn-stat, .mn-btn-group > .mn-btn, .mn-avatar-group > *):nth-child(n + 5) { animation-delay: 200ms; }
  @media (prefers-reduced-motion: reduce) { :is(.mn-list > li, .mn-table tbody tr, .mn-toggle-group > *, .mn-stats > .mn-stat, .mn-btn-group > .mn-btn, .mn-avatar-group > *) { animation: none; } }

  /* Buttons: round plates; icon buttons are perfect circles. */
  .mn-btn { border-radius: 999px; box-shadow: var(--mx-plate); font-weight: 650; transition: transform 240ms var(--mn-spring), box-shadow 240ms; }
  .mn-btn:hover { box-shadow: var(--mx-plate-hi); }
  .mn-btn:active { transform: scale(.95); }
  .mn-btn-outline { --_bd: transparent; --_bg: var(--mn-surface); --_fg: var(--_ct, var(--mn-fg)); }
  .mn-btn-outline:hover { --_bg: var(--mn-surface); }
  .mn-btn-ghost, .mn-btn-link { box-shadow: none; }
  .mn-btn-ghost:hover, .mn-btn-link:hover { box-shadow: none; }
  /* Groups split into separate plates. */
  .mn-btn-group { gap: 6px; }
  .mn-btn-group > .mn-btn, .mn-btn-group-vertical > .mn-btn { border-radius: 999px; margin: 0; box-shadow: var(--mx-plate); }
  .mn-btn-group > .mn-btn:not(.mn-btn-outline) + .mn-btn:not(.mn-btn-outline) { border-inline-start: var(--mn-border-w) solid var(--_bd); }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file, .mn-otp > input { border-color: var(--mn-border); background-color: var(--mn-surface); box-shadow: inset 0 1px 3px rgb(40 30 10 / .06); }
  .mn-textarea { border-radius: 24px; }
  .mn-otp > input { border-radius: 50%; width: calc(var(--mn-size-md) + 8px); height: calc(var(--mn-size-md) + 8px); }
  .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-ring); box-shadow: 0 0 0 4px color-mix(in oklab, var(--mn-ring) 18%, transparent); }
  .mn-input-group > .mn-input { box-shadow: none; }
  .mn-checkbox, .mn-radio { --_s: 1.3rem; border-radius: 50%; box-shadow: var(--mx-plate); }
  /* Switch: a round plate that rolls along a thin rail. */
  .mn-switch { --_w: 2.9rem; --_hh: 1.6rem; isolation: isolate; background: transparent; }
  .mn-switch::after { content: ""; position: absolute; z-index: -1; left: .35rem; right: .35rem; top: 50%; height: .55rem; margin-top: -.275rem; border-radius: 999px; background: var(--mn-input); transition: background-color var(--mn-duration); }
  .mn-switch::before { top: 0; left: 0; width: var(--_hh); height: var(--_hh); background: var(--mn-surface); box-shadow: var(--mx-plate), 0 0 0 1px var(--mn-border); transition: transform 320ms var(--mn-spring), background-color var(--mn-duration); }
  .mn-switch:checked { background: transparent; }
  .mn-switch:checked::after { background: color-mix(in oklab, var(--_on) 40%, var(--mn-surface)); }
  .mn-switch:checked::before { transform: translateX(calc(var(--_w) - var(--_hh))); background: var(--_on); box-shadow: var(--mx-plate); }
  .mn-slider { --_track: 6px; --_thumb: 1.4rem; }
  .mn-slider::-webkit-slider-thumb { border: 0; background: var(--mn-surface); box-shadow: var(--mx-plate), 0 0 0 1px var(--mn-border); }
  .mn-slider::-moz-range-thumb { border: 0; background: var(--mn-surface); box-shadow: 0 0 0 1px var(--mn-border); }

  .mn-card { border: 0; border-radius: 28px; box-shadow: var(--mx-plate); }
  .mn-card-footer-bordered { border-top: 0; background: none; }

  /* Lists, accordions and stats: separate plates with gaps. */
  .mn-list, .mn-accordion { border: 0; background: none; overflow: visible; display: grid; gap: 6px; }
  .mn-list > li { background: var(--mn-surface); border-radius: 20px; box-shadow: var(--mx-plate); overflow: hidden; }
  .mn-list > li + li { border-top: 0; }
  .mn-accordion > details { background: var(--mn-surface); border-radius: 22px; box-shadow: var(--mx-plate); overflow: hidden; }
  .mn-accordion > details + details { border-top: 0; }
  .mn-stats { border: 0; background: none; overflow: visible; gap: 8px; }
  .mn-stats > .mn-stat { background: var(--mn-surface); border-radius: 22px; box-shadow: var(--mx-plate); }
  .mn-stats > .mn-stat + .mn-stat { border-inline-start: 0; }

  /* Tables: every row is its own plate. */
  .mn-table-wrap { border: 0; background: none; padding: 2px 4px 8px; }
  .mn-table { border-collapse: separate; border-spacing: 0 6px; }
  .mn-table th, .mn-table td { border: 0; }
  .mn-table thead th { background: none; height: 2rem; font-weight: 600; }
  .mn-table tbody td { background: var(--mn-surface); }
  .mn-table tbody td:first-child { border-radius: 999px 0 0 999px; }
  .mn-table tbody td:last-child { border-radius: 0 999px 999px 0; }
  .mn-table tbody tr { filter: drop-shadow(0 3px 5px rgb(40 30 10 / .08)); }
  .mn-table-hover tbody tr:hover { background: none; }
  .mn-table-hover tbody tr:hover td { background: color-mix(in oklab, var(--mn-primary) 7%, var(--mn-surface)); }
  .mn-table-striped tbody tr:nth-child(even) { background: none; }

  .mn-badge { box-shadow: var(--mx-plate); }
  .mn-badge-soft, .mn-badge-outline { box-shadow: none; }
  .mn-chip { border: 0; background: var(--mn-surface); box-shadow: var(--mx-plate); }
  .mn-kbd { border-radius: 999px; min-width: 1.6rem; justify-content: center; }

  /* Tabs and toggles: separate round plates; the chosen one is filled. */
  .mn-tab-list { border-bottom: 0; gap: .45rem; padding: 4px 2px 8px; }
  .mn-tab { border-radius: 999px; height: var(--mn-size-sm); background: var(--mn-surface); box-shadow: var(--mx-plate); font-weight: 600; }
  .mn-tab::after { display: none; }
  .mn-tab[aria-selected="true"] { background: var(--mn-primary); color: var(--mn-primary-fg); }
  .mn-tabs-boxed .mn-tab-list, .mn-toggle-group { background: none; border: 0; gap: .45rem; padding: 4px 2px 8px; }
  .mn-tabs-boxed .mn-tab[aria-selected="true"] { background: var(--mn-primary); color: var(--mn-primary-fg); box-shadow: var(--mx-plate); }
  .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 999px; background: var(--mn-surface); box-shadow: var(--mx-plate); }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { background: var(--mn-primary); color: var(--mn-primary-fg); box-shadow: var(--mx-plate); }

  .mn-progress { height: .7rem; background: var(--mn-surface-2); box-shadow: inset 0 1px 2px rgb(40 30 10 / .1); }
  .mn-radial { --_t: .5rem; box-shadow: var(--mx-plate); }
  /* Spinner: three small plates going round the bowl. */
  .mn-spinner {
    border: 0; border-radius: 50%; color: var(--_c, currentColor);
    background:
      radial-gradient(circle closest-side, currentColor 92%, transparent) 50% 0 / 34% 34% no-repeat,
      radial-gradient(circle closest-side, color-mix(in oklab, currentColor 65%, transparent) 92%, transparent) 100% 80% / 34% 34% no-repeat,
      radial-gradient(circle closest-side, color-mix(in oklab, currentColor 35%, transparent) 92%, transparent) 0 80% / 34% 34% no-repeat;
    animation: mixian-orbit 1.1s cubic-bezier(.5, .1, .5, .9) infinite;
  }

  .mn-alert { border: 0; border-radius: 24px; box-shadow: var(--mx-plate); }
  .mn-avatar-group { gap: 6px; }
  .mn-avatar-group > .mn-avatar + .mn-avatar { margin-inline-start: 0; }
  .mn-avatar { box-shadow: var(--mx-plate); }
  .mn-step::before { box-shadow: var(--mx-plate); }
  .mn-step + .mn-step::after { height: 4px; border-radius: 4px; top: calc(1rem - 2px); }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast { border: 0; border-radius: 26px; box-shadow: var(--mx-plate-hi), 0 0 0 1px var(--mn-border); }
  .mn-menu-item { border-radius: 999px; }
  .mn-page { border-radius: 999px; }
  .mn-page[aria-current="page"] { background: var(--mn-primary); color: var(--mn-primary-fg); border-color: transparent; box-shadow: var(--mx-plate); }

  /* Charts: round bars with gaps, round points. */
  .mn-chart-line .mn-point { r: 4.5; }
  .mn-bar::before { box-shadow: 0 3px 8px -4px rgb(40 30 10 / .25); }
  .mn-donut { --thick: 30%; }
}}

/* ── PHO ───────────────────────────────────────────────────────────────────
   Flat rice ribbons in clear broth, with a plate of fresh herbs. Flat and
   borderless, ribbon bands, leaf-shaped corners, lightly tinted clear
   surfaces, brisk motion where things unfurl like a leaf. */
@keyframes pho-unfurl { from { opacity: 0; clip-path: inset(0 100% 0 0 round 18px 3px); transform: rotate(-1.5deg); } to { clip-path: inset(0 0 0 0 round 0); } }
@keyframes pho-leaf { to { transform: rotate(360deg); } }

@layer mian.noodles { @scope ([data-noodle="pho"]) to ([data-noodle]:not([data-noodle="pho"])) {
  :scope {
    --mn-enter: pho-unfurl; --mn-enter-duration: 260ms; --mn-ease-enter: cubic-bezier(.2, .7, .2, 1);
    --mn-duration: 150ms; --mn-spring: cubic-bezier(.2, .7, .3, 1.1);
    --p-leaf: 16px 3px; --p-leaf-sm: 10px 2px;
    --mn-bar-gap: 7px; --mn-line-width: 2.5px; --mn-area-opacity: .16;
    --mn-bar-fill: color-mix(in oklab, var(--mn-series-1) 32%, var(--mn-surface));
  }

  /* Leaves: one pair of opposite corners round, the other sharp. */
  .mn-btn { border-radius: var(--p-leaf); box-shadow: none; font-weight: 600; }
  .mn-btn:hover { transform: rotate(-1deg); }
  .mn-btn:active { transform: rotate(1deg) scale(.98); }
  .mn-btn-outline { border-width: 1.5px; }
  .mn-btn-icon { border-radius: 50% 4px; }

  .mn-input, .mn-select, .mn-textarea, .mn-input-group, .mn-number, .mn-file {
    border: 0; border-radius: var(--p-leaf); box-shadow: none;
    background-color: color-mix(in oklab, var(--mn-primary) 7%, var(--mn-surface));
    box-shadow: inset 0 -2px 0 color-mix(in oklab, var(--mn-primary) 30%, transparent);
  }
  .mn-input:focus, .mn-textarea:focus, .mn-select:focus, .mn-input-group:focus-within, .mn-number:focus-within {
    box-shadow: inset 0 -2px 0 var(--mn-primary), 0 0 0 3px color-mix(in oklab, var(--mn-ring) 18%, transparent);
  }
  .mn-input-group > .mn-input { box-shadow: none; }
  .mn-addon { background: transparent; border: 0 !important; color: var(--mn-primary-text); }
  .mn-otp > input { border: 0; border-radius: var(--p-leaf); background: color-mix(in oklab, var(--mn-primary) 8%, var(--mn-surface)); box-shadow: inset 0 -2px 0 var(--mn-primary); }
  .mn-checkbox { border-radius: 8px 2px; box-shadow: none; }
  .mn-radio { border-radius: 50% 0; transform: rotate(45deg); box-shadow: none; margin: 3px; }
  .mn-radio::before { border-radius: 50% 0; }
  /* Switch: a leaf slides along a stem. */
  .mn-switch { --_hh: 1.25rem; --_w: 2.5rem; border-radius: 12px 3px; }
  .mn-switch::before { border-radius: 50% 0; box-shadow: none; transition: transform 240ms var(--mn-spring); }
  .mn-switch:checked::before { transform: translateX(calc(var(--_w) - var(--_hh))) rotate(90deg); }
  .mn-slider::-webkit-slider-thumb { border-radius: 50% 0; transform: rotate(45deg); box-shadow: none; }
  .mn-slider::-moz-range-thumb { border-radius: 50% 0; box-shadow: none; }

  /* Bowls of clear broth: flat, a herb stripe at the start. */
  .mn-card { border: 0; box-shadow: none; border-radius: 22px 4px; background: color-mix(in oklab, var(--mn-primary) 4%, var(--mn-surface)); box-shadow: inset 4px 0 0 var(--mn-primary); }
  .mn-card-footer-bordered { background: none; border-top-style: dashed; }

  /* Tables: a green ribbon header. */
  .mn-table-wrap { border: 0; border-radius: 18px 3px; background: color-mix(in oklab, var(--mn-primary) 3%, var(--mn-surface)); }
  .mn-table thead th { background: color-mix(in oklab, var(--mn-primary) 9%, transparent); color: var(--mn-primary-text); font-weight: 650; border: 0; }
  .mn-table td { border-bottom-style: dashed; }
  .mn-table tbody td:first-child { position: relative; padding-inline-start: 1.6rem; }
  .mn-table tbody td:first-child::before { content: ""; position: absolute; left: .7rem; top: 50%; width: .45rem; height: .45rem; margin-top: -.225rem; border-radius: 50% 0; background: var(--mn-primary); opacity: .55; }
  .mn-table-hover tbody tr:hover { background: color-mix(in oklab, var(--mn-accent) 8%, transparent); }

  .mn-badge { border-radius: var(--p-leaf-sm); }
  .mn-chip { border-radius: 14px 3px; border: 0; background: color-mix(in oklab, var(--mn-primary) 9%, var(--mn-surface)); }
  .mn-tab-list { border-bottom: 0; gap: 4px; }
  .mn-tab { border-radius: 14px 14px 0 0; background: color-mix(in oklab, var(--mn-primary) 5%, transparent); }
  .mn-tab::after { display: none; }
  .mn-tab[aria-selected="true"] { background: var(--mn-primary); color: var(--mn-primary-fg); }
  .mn-tabs-boxed .mn-tab-list { border-radius: 16px 4px; background: color-mix(in oklab, var(--mn-primary) 8%, transparent); }
  .mn-tabs-boxed .mn-tab { border-radius: 12px 3px; background: transparent; }
  .mn-tabs-boxed .mn-tab[aria-selected="true"] { background: var(--mn-surface); color: var(--mn-fg); box-shadow: none; }
  .mn-toggle-group { border-radius: 16px 4px; background: color-mix(in oklab, var(--mn-primary) 8%, transparent); }
  .mn-toggle-group > button, .mn-toggle-group > label { border-radius: 12px 3px; }
  .mn-toggle-group > [aria-pressed="true"], .mn-toggle-group > label:has(input:checked) { box-shadow: none; background: var(--mn-primary); color: var(--mn-primary-fg); }

  /* Progress: a flat ribbon ending in a leaf tip. */
  .mn-progress { height: .55rem; border-radius: 0; box-shadow: none; background: color-mix(in oklab, var(--mn-primary) 12%, transparent); }
  .mn-progress::after { border-radius: 0 999px 0 999px; }
  .mn-radial::before { background: color-mix(in oklab, var(--mn-primary) 4%, var(--mn-bg)); }
  .mn-spinner { border: 0; border-radius: 50% 0; background: var(--_c, currentColor); opacity: .85; animation: pho-leaf 1s var(--mn-spring) infinite; }
  .mn-alert { border: 0; border-radius: 18px 3px; box-shadow: inset 4px 0 0 var(--_a); }
  .mn-avatar { border-radius: 50% 50% 50% 8px; }
  .mn-step::before { border-radius: 50% 4px; }
  .mn-menu, .mn-popover, .mn-modal, .mn-toast { border-radius: 22px 4px; border: 0; }
  .mn-menu-item { border-radius: 12px 2px; }
  .mn-page { border-radius: 12px 2px; }
  .mn-page[aria-current="page"] { background: var(--mn-primary); color: var(--mn-primary-fg); border: 0; box-shadow: none; }
  .mn-accordion, .mn-list, .mn-stats { border: 0; border-radius: 20px 4px; background: color-mix(in oklab, var(--mn-primary) 4%, var(--mn-surface)); }
  .mn-accordion > details + details, .mn-list > li + li, .mn-stats > .mn-stat + .mn-stat { border-color: color-mix(in oklab, var(--mn-primary) 14%, transparent); border-style: dashed; }
  .mn-divider::before, .mn-divider::after { background: repeating-linear-gradient(90deg, var(--mn-border) 0 8px, transparent 8px 12px); }

  /* Charts: leaf-tipped bars. */
  .mn-bar::before { border-radius: 100% 0 0 0 / 40% 0 0 0; }
  .mn-chart-h .mn-bar::before { border-radius: 0 100% 0 0 / 0 100% 0 0; }
  .mn-chart-line .mn-point { r: 4.5; }
  .mn-donut { --mn-donut-start: 45deg; --thick: 46%; }
}}