/*! MIAN 1.7.0: https://mian.ro: noodle: Udon. MIAN License 1.0: free to use, not for resale. Copyright (c) 2026 BTN GROUP SRL. https://mian.ro/license */
@layer mian.tokens {
[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;
}
}
/* ── 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; }
}}