/* WIJZR design system: fonts + tokens + components. One file, load it first. */

/* Fonts (SIL Open Font License, see /fonts) */
@font-face { font-family: Geist; src: url("../assets/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../assets/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Unbounded; src: url("../assets/fonts/Unbounded-Variable.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

/* WIJZR design tokens v3. Dark is the default theme. */
:root,
[data-theme="dark"] {
  --bg: #0c0b0a;
  --surface-1: #141312;
  --surface-2: #1b1a18;
  --surface-3: #23211f;
  --surface-inverse: #f3f1ed;
  --glass: rgba(20, 19, 18, 0.56);
  --overlay: rgba(8, 7, 6, 0.64);
  --text: #f3f1ed;
  --text-muted: rgba(243, 241, 237, 0.56);
  --text-subtle: rgba(243, 241, 237, 0.34);
  --text-inverse: #151311;
  --line: rgba(255, 250, 240, 0.08);
  --line-strong: rgba(255, 250, 240, 0.14);
  --line-control: rgba(255, 250, 240, 0.4);
  --fill-hover: rgba(255, 250, 240, 0.05);
  --fill-active: rgba(255, 250, 240, 0.09);
  --primary: #f3f1ed;
  --primary-hover: #ffffff;
  --on-primary: #151311;
  --focus: #f3f1ed;
  --accent: var(--focus);
  --wijzr: #3dbe8b;
  --wijzr-soft: rgba(61, 190, 139, 0.14);
  --cijfr: #b4530a;
  --cijfr-text: #e8915a;
  --cijfr-soft: rgba(180, 83, 10, 0.16);
  --kyoosk: #5b85ff;
  --kyoosk-soft: rgba(91, 133, 255, 0.16);
  --success: #4ccf8a;
  --success-soft: rgba(76, 207, 138, 0.12);
  --warning: #f0b44a;
  --warning-soft: rgba(240, 180, 74, 0.12);
  --error: #ff7066;
  --error-soft: rgba(255, 112, 102, 0.12);
  --info: #6aa6ff;
  --info-soft: rgba(106, 166, 255, 0.12);
  --atmo-silver-1: #0c0b0a;
  --atmo-silver-2: #5f5b55;
  --atmo-silver-3: #ece9e4;
  --atmo-ember-1: #1a0603;
  --atmo-ember-2: #b8361a;
  --atmo-ember-3: #f6b48c;
  --atmo-mint-1: #050807;
  --atmo-mint-2: #2c4a43;
  --atmo-mint-3: #dcebe5;
  --atmo-cobalt-1: #04050d;
  --atmo-cobalt-2: #2140b8;
  --atmo-cobalt-3: #b4c4ff;
  --elev-0: none;
  --elev-1: inset 0 1px 0 rgba(255, 250, 240, 0.05), 0 1px 2px rgba(0, 0, 0, 0.4);
  --elev-2: inset 0 1px 0 rgba(255, 250, 240, 0.06), 0 8px 24px rgba(0, 0, 0, 0.4);
  --elev-3: inset 0 1px 0 rgba(255, 250, 240, 0.07), 0 24px 64px rgba(0, 0, 0, 0.5);
  --elev-press: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] {
  --bg: #f7f6f3;
  --surface-1: #ffffff;
  --surface-2: #efede9;
  --surface-3: #e7e4df;
  --surface-inverse: #151311;
  --glass: rgba(255, 255, 255, 0.62);
  --overlay: rgba(21, 19, 17, 0.28);
  --text: #151311;
  --text-muted: rgba(21, 19, 17, 0.62);
  --text-subtle: rgba(21, 19, 17, 0.36);
  --text-inverse: #f7f6f3;
  --line: rgba(21, 19, 17, 0.08);
  --line-strong: rgba(21, 19, 17, 0.14);
  --line-control: rgba(21, 19, 17, 0.5);
  --fill-hover: rgba(21, 19, 17, 0.04);
  --fill-active: rgba(21, 19, 17, 0.07);
  --primary: #151311;
  --primary-hover: #2b2825;
  --on-primary: #f7f6f3;
  --focus: #151311;
  --accent: var(--focus);
  --wijzr: #0f6b4f;
  --wijzr-soft: rgba(15, 107, 79, 0.1);
  --cijfr-text: #a64c09;
  --cijfr-soft: rgba(180, 83, 10, 0.1);
  --kyoosk: #1f47d6;
  --kyoosk-soft: rgba(31, 71, 214, 0.1);
  --success: #0f6a39;
  --success-soft: rgba(18, 115, 63, 0.09);
  --warning: #8a5600;
  --warning-soft: rgba(138, 86, 0, 0.09);
  --error: #b2241d;
  --error-soft: rgba(194, 43, 35, 0.08);
  --info: #1e5bc6;
  --info-soft: rgba(30, 91, 198, 0.08);
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(21, 19, 17, 0.06), 0 0 0 1px rgba(21, 19, 17, 0.04);
  --elev-2: 0 8px 24px rgba(21, 19, 17, 0.08), 0 0 0 1px rgba(21, 19, 17, 0.05);
  --elev-3: 0 24px 64px rgba(21, 19, 17, 0.14), 0 0 0 1px rgba(21, 19, 17, 0.05);
  --elev-press: inset 0 1px 2px rgba(21, 19, 17, 0.12);
}

:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;
  --size-icon-16: 16px;
  --size-icon-20: 20px;
  --size-icon-24: 24px;
  --size-control-sm: 32px;
  --size-control-md: 40px;
  --size-control-lg: 48px;
  --size-touch-kiosk: 64px;
  --size-chip: 28px;
  --size-dot: 8px;
  --size-nav: 64px;
  --size-sidebar: 272px;
  --size-container: 1280px;
  --size-prose: 640px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-20: 20px;
  --radius-28: 28px;
  --radius-full: 9999px;
  --duration-100: 100ms;
  --duration-200: 200ms;
  --duration-400: 400ms;
  --duration-600: 600ms;
  --duration-800: 800ms;
  --duration-1200: 1200ms;
  --duration-lava: 24000ms;
  --duration-slow: 1800ms;
  --spring-smooth: linear(0, 0.06, 0.187, 0.331, 0.467, 0.585, 0.683, 0.761, 0.822, 0.869, 0.904, 0.93, 0.949, 0.963, 0.974, 0.981, 0.987, 0.99, 0.993, 0.995, 0.997, 0.998, 0.998, 0.999, 1);
  --spring-snappy: linear(0, 0.058, 0.189, 0.348, 0.505, 0.644, 0.759, 0.849, 0.915, 0.96, 0.99, 1.007, 1.016, 1.02, 1.019, 1.017, 1.014, 1.011, 1.008, 1.006, 1.004, 1.002, 1.001, 1, 1);
  --spring-bouncy: linear(0, 0.09, 0.289, 0.517, 0.723, 0.884, 0.993, 1.055, 1.081, 1.082, 1.069, 1.051, 1.032, 1.016, 1.005, 0.998, 0.994, 0.993, 0.994, 0.995, 0.996, 0.998, 0.999, 1, 1);
  --ease-sharp: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-lava: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --ease-linear: linear;
  --bp-mobile: 0px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1440px;
  --grid-columns: 12;
  --gutter-mobile: 16px;
  --gutter-tablet: 20px;
  --gutter-desktop: 24px;
  --margin-mobile: 20px;
  --margin-tablet: 32px;
  --margin-desktop: 40px;
  --hairline: 1px;
  --stroke-icon: 1.5px;
  --focus-width: 2px;
  --focus-offset: 2px;
  --tilt-max: 2deg;
  --press-scale: 0.96;
  --lift: -4px;
  --reveal-shift: 24px;
  --reveal-blur: 8px;
  --reveal-stagger: 80ms;
  --lava-shift: 8%;
  --parallax-near: 0.12;
  --parallax-far: -0.06;
  --blur-glass: 20px;
  --grain-opacity: 0.07;
  --z-base: 0;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
  --font-sans: Geist, ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: Unbounded, Geist, ui-sans-serif, sans-serif;
  --wordmark-size: 28px;
  --wordmark-line: 28px;
  --wordmark-tracking: -0.02em;
  --wordmark-weight: 600;
  --display-size: 88px;
  --display-line: 88px;
  --display-tracking: -0.05em;
  --display-weight: 500;
  --h1-size: 64px;
  --h1-line: 64px;
  --h1-tracking: -0.045em;
  --h1-weight: 500;
  --h2-size: 44px;
  --h2-line: 48px;
  --h2-tracking: -0.035em;
  --h2-weight: 500;
  --h3-size: 28px;
  --h3-line: 32px;
  --h3-tracking: -0.025em;
  --h3-weight: 500;
  --h4-size: 20px;
  --h4-line: 28px;
  --h4-tracking: -0.015em;
  --h4-weight: 500;
  --stat-size: 64px;
  --stat-line: 64px;
  --stat-tracking: -0.04em;
  --stat-weight: 500;
  --body-lg-size: 20px;
  --body-lg-line: 28px;
  --body-lg-tracking: -0.01em;
  --body-lg-weight: 400;
  --body-size: 16px;
  --body-line: 24px;
  --body-tracking: -0.006em;
  --body-weight: 400;
  --body-sm-size: 14px;
  --body-sm-line: 20px;
  --body-sm-tracking: -0.003em;
  --body-sm-weight: 400;
  --caption-size: 12px;
  --caption-line: 16px;
  --caption-tracking: 0;
  --caption-weight: 400;
  --mono-size: 13px;
  --mono-line: 20px;
  --mono-tracking: 0;
  --mono-weight: 400;
  --mono-by-size: 11px;
  --mono-by-line: 16px;
  --mono-by-tracking: 0.14em;
  --mono-by-weight: 500;
}

/* Product scopes: set data-brand on (or inside) a themed element. */
[data-brand="wijzr"]  { --accent: var(--wijzr);  --accent-soft: var(--wijzr-soft);  --accent-text: var(--wijzr);      --focus: var(--wijzr); }
[data-brand="cijfr"]  { --accent: var(--cijfr);  --accent-soft: var(--cijfr-soft);  --accent-text: var(--cijfr-text); --focus: var(--cijfr); }
[data-brand="kyoosk"] { --accent: var(--kyoosk); --accent-soft: var(--kyoosk-soft); --accent-text: var(--kyoosk);     --focus: var(--kyoosk); }


/* =====================================================================
   WIJZR design system v2: warm paper and ink, soft geometry,
   colour as light. Every value comes from tokens.css.
   Prefix nm-. Product scope: data-brand="wijzr|cijfr|kyoosk".
   ===================================================================== */

:root, [data-theme] {
  --accent-soft: var(--fill-active);
  --accent-text: var(--text);
  --control-on: var(--primary);
  --on-control: var(--on-primary);
  --on-atmo: #f7f6f3;
}
/* theme-scoped helpers: declared on the themed element so nested panes resolve correctly */
:root, [data-theme="dark"] { --edge: var(--line); --edge-strong: var(--line-strong); --thumb: var(--surface-3); --side-bg: var(--bg); --side-edge: var(--line);
  --inv-success: #0f6a39; --inv-warning: #8a5600; --inv-error: #b2241d; --inv-info: #1e5bc6; }
[data-theme="light"] { --edge: transparent; --edge-strong: transparent; --thumb: var(--surface-1); --side-bg: var(--surface-2); --side-edge: transparent;
  --inv-success: #4ccf8a; --inv-warning: #f0b44a; --inv-error: #ff7066; --inv-info: #6aa6ff; }
[data-brand="wijzr"]  { --accent: var(--wijzr);  --accent-soft: var(--wijzr-soft);  --accent-text: var(--wijzr);      --focus: var(--wijzr);  --control-on: var(--wijzr);  --on-control: #ffffff; }
[data-brand="cijfr"]  { --accent: var(--cijfr);  --accent-soft: var(--cijfr-soft);  --accent-text: var(--cijfr-text); --focus: var(--cijfr);  --control-on: var(--cijfr);  --on-control: #ffffff; }
[data-brand="kyoosk"] { --accent: var(--kyoosk); --accent-soft: var(--kyoosk-soft); --accent-text: var(--kyoosk);     --focus: var(--kyoosk); --control-on: var(--kyoosk); --on-control: #ffffff; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: 16px; line-height: 24px; letter-spacing: -0.006em;
  font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: inherit; }
.nm-muted { color: var(--text-muted); }
.nm-mono { font-family: var(--font-mono); font-size: 13px; line-height: 20px; letter-spacing: 0; font-variant-numeric: tabular-nums slashed-zero; }
.nm-small { font-size: 14px; line-height: 20px; letter-spacing: -0.003em; }
.nm-caption { font-size: 12px; line-height: 16px; letter-spacing: 0; color: var(--text-muted); }
.nm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Headlines: big, tight, two-tone ---------- */
.nm-display, .nm-h1, .nm-h2, .nm-h3, .nm-h4 { margin: 0; font-weight: 500; color: var(--text); text-wrap: balance; }
.nm-display { font-size: 88px; line-height: 88px; letter-spacing: -0.05em; }
.nm-h1 { font-size: 64px; line-height: 64px; letter-spacing: -0.045em; }
.nm-h2 { font-size: 44px; line-height: 48px; letter-spacing: -0.035em; }
.nm-h3 { font-size: 28px; line-height: 32px; letter-spacing: -0.025em; }
.nm-h4 { font-size: 20px; line-height: 28px; letter-spacing: -0.015em; }
.nm-lead { margin: 0; font-size: 20px; line-height: 28px; letter-spacing: -0.01em; color: var(--text-muted); text-wrap: pretty; }
.nm-tt-2, .nm-display .m, .nm-h1 .m, .nm-h2 .m, .nm-h3 .m { color: var(--text-muted); } /* second tone */
.nm-mark { position: relative; white-space: nowrap; }
.nm-mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.06em; height: 0.05em; min-height: 3px; background: var(--line-control); border-radius: var(--radius-full); }

/* ---------- Icons ---------- */
.nm-icon { display: inline-block; flex: none; vertical-align: middle; overflow: visible; }
.nm-icon * { vector-effect: non-scaling-stroke; }

/* ---------- Preview scaffolding ---------- */
.nm-duo { display: grid; grid-template-columns: 1fr; }
.nm-pane { position: relative; background: var(--bg); color: var(--text); padding: 32px; overflow: hidden; }
.nm-pane-head { display: none; }
.nm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.nm-col { display: flex; flex-direction: column; gap: 12px; }
.nm-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.nm-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.nm-matrix { display: grid; grid-template-columns: 88px repeat(7, max-content); gap: 16px 12px; align-items: center; justify-items: start; overflow-x: auto; padding: 4px; }
.nm-matrix > .nm-caption { white-space: nowrap; }
.nm-spec { font-size: 13px; line-height: 20px; color: var(--text-muted); }

/* ---------- Structure: rules, ticks, sections (Mistral-like) ---------- */
.nm-rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.nm-frame { position: relative; border: 1px solid var(--line); }
.nm-ticks { position: relative; }
.nm-ticks::before, .nm-ticks::after { content: ""; position: absolute; width: 5px; height: 5px; background: var(--text); pointer-events: none; }
.nm-ticks::before { left: -3px; top: -3px; }
.nm-ticks::after { right: -3px; bottom: -3px; }
.nm-lines {
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* ---------- Atmospheres: brand light, imagery only ---------- */
.nm-atmo {
  --a1: var(--atmo-silver-1); --a2: var(--atmo-silver-2); --a3: var(--atmo-silver-3);
  position: relative; isolation: isolate; overflow: hidden; color: var(--on-atmo);
  background-color: var(--a1);
  background-image:
    radial-gradient(60% 70% at 78% 112%, var(--a3) 0%, transparent 70%),
    radial-gradient(110% 90% at 70% 118%, var(--a2) 0%, transparent 72%),
    radial-gradient(80% 60% at 10% -10%, var(--a1) 0%, transparent 60%);
}
.nm-atmo::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.6 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size: 200px 200px; opacity: 0.22;
}
.nm-atmo > * { position: relative; z-index: 1; }
.nm-atmo-ember  { --a1: var(--atmo-ember-1);  --a2: var(--atmo-ember-2);  --a3: var(--atmo-ember-3); }
.nm-atmo-mint   { --a1: var(--atmo-mint-1);   --a2: var(--atmo-mint-2);   --a3: var(--atmo-mint-3); }
.nm-atmo-cobalt { --a1: var(--atmo-cobalt-1); --a2: var(--atmo-cobalt-2); --a3: var(--atmo-cobalt-3); }
.nm-atmo-side   { background-image: radial-gradient(70% 90% at 108% 60%, var(--a3) 0%, transparent 62%), radial-gradient(120% 120% at 100% 50%, var(--a2) 0%, transparent 72%); }
.nm-atmo-top    { background-image: radial-gradient(70% 60% at 50% -12%, var(--a3) 0%, transparent 64%), radial-gradient(130% 90% at 50% -20%, var(--a2) 0%, transparent 74%); }
.nm-atmo-wash   { background-image: linear-gradient(180deg, var(--a1) 30%, var(--a2) 72%, var(--a3) 100%); }

/* ---------- Focus ---------- */
:where(.nm-btn, .nm-input, .nm-textarea, .nm-select select, .nm-check input, .nm-radio input, .nm-toggle input, .nm-seg button,
  .nm-tab, .nm-menu-item, .nm-card-link, .nm-media, .nm-th-sort, .nm-side-item, .nm-nav-link, .nm-kiosk-tile, .nm-chip-btn, .nm-announce):focus-visible,
.is-focus {
  outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset);
  animation: nm-ring var(--duration-200) var(--ease-sharp);
}
@keyframes nm-ring { from { outline-offset: 6px; outline-color: transparent; } }
.nm-spin { width: 16px; height: 16px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: nm-rotate 640ms linear infinite; flex: none; }
@keyframes nm-rotate { to { transform: rotate(360deg); } }

/* =====================================================================
   BUTTONS: pills
   ===================================================================== */
.nm-btn {
  --h: var(--size-control-md);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h); padding: 0 20px; border: 0; border-radius: var(--radius-full);
  font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap;
  cursor: pointer; user-select: none; text-decoration: none;
  transition: background-color var(--duration-100) var(--ease-sharp), color var(--duration-100) var(--ease-sharp),
              transform var(--duration-100) var(--ease-sharp), box-shadow var(--duration-100) var(--ease-sharp);
}
.nm-btn-sm { --h: var(--size-control-sm); padding: 0 14px; font-size: 14px; gap: 6px; }
.nm-btn-lg { --h: var(--size-control-lg); padding: 0 24px; font-size: 16px; }
.nm-btn-icon { width: var(--h); padding: 0; }
.nm-btn-primary { background: var(--primary); color: var(--on-primary); }
.nm-btn-primary:hover, .nm-btn-primary.is-hover { background: var(--primary-hover); }
.nm-btn-secondary { background: var(--surface-2); color: var(--text); }
.nm-btn-secondary:hover, .nm-btn-secondary.is-hover { background: var(--surface-3); }
.nm-btn-outline { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.nm-btn-outline:hover, .nm-btn-outline.is-hover { box-shadow: inset 0 0 0 1px var(--line-control); }
.nm-btn-ghost { background: transparent; color: var(--text); }
.nm-btn-ghost:hover, .nm-btn-ghost.is-hover { background: var(--fill-hover); }
.nm-btn-ghost:active, .nm-btn-ghost.is-active { background: var(--fill-active); }
.nm-btn-destructive { background: var(--error-soft); color: var(--error); }
.nm-btn-destructive:hover, .nm-btn-destructive.is-hover { background: var(--error); color: var(--bg); }
.nm-btn-onatmo { background: var(--on-atmo); color: #151311; }
.nm-btn:active, .nm-btn.is-active { transform: scale(var(--press-scale)); box-shadow: var(--elev-press); }
.nm-btn:disabled, .nm-btn.is-disabled { opacity: 0.36; cursor: not-allowed; transform: none; box-shadow: none; }
.nm-btn.is-loading { cursor: progress; }
.nm-btn.is-error { background: transparent; color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.nm-btn .nm-arrow { transition: transform var(--duration-200) var(--ease-sharp); }
.nm-btn:hover .nm-arrow { transform: translateX(2px); }
/* split button: "Try for free | v" */
.nm-split { display: inline-flex; border-radius: var(--radius-full); background: var(--primary); }
.nm-split .nm-btn { border-radius: 0; }
.nm-split .nm-btn:first-child { border-radius: var(--radius-full) 0 0 var(--radius-full); padding-right: 16px; }
.nm-split .nm-btn:last-child { border-radius: 0 var(--radius-full) var(--radius-full) 0; padding: 0 14px 0 12px; box-shadow: inset 1px 0 0 color-mix(in srgb, var(--on-primary) 24%, transparent); }

/* =====================================================================
   CHIPS, ANNOUNCEMENT PILL, BADGES, DOTS
   ===================================================================== */
.nm-chip { display: inline-flex; align-items: center; gap: 6px; height: var(--size-chip); padding: 0 12px; border-radius: var(--radius-full);
  background: var(--surface-2); color: var(--text); font-size: 14px; line-height: 20px; letter-spacing: -0.003em; white-space: nowrap; }
.nm-chip-glass { background: var(--glass); color: var(--text); -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass)); box-shadow: inset 0 0 0 1px var(--line-strong); }
.nm-chip-onatmo { background: rgba(12, 11, 10, 0.4); color: var(--on-atmo); -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass)); box-shadow: inset 0 0 0 1px rgba(255, 250, 240, 0.16); }
.nm-chip-btn { border: 0; cursor: pointer; transition: background-color var(--duration-100) var(--ease-sharp); }
.nm-chip-btn:hover { background: var(--surface-3); }
.nm-chip-btn[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }

.nm-announce { display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 6px 0 6px; border-radius: var(--radius-full);
  background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 15px; line-height: 20px; text-decoration: none; color: var(--text);
  transition: box-shadow var(--duration-100) var(--ease-sharp); }
.nm-announce:hover { box-shadow: inset 0 0 0 1px var(--line-control); }
.nm-announce-tag { height: 28px; padding: 0 10px; border-radius: var(--radius-full); display: inline-flex; align-items: center; background: var(--accent-soft); color: var(--accent-text); font-size: 13px; }
.nm-announce-go { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); }

.nm-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-full);
  font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: -0.003em; white-space: nowrap; background: var(--surface-2); color: var(--text-muted); }
.nm-badge .nm-dot { width: 6px; height: 6px; }
.nm-badge-outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.nm-badge-success { background: var(--success-soft); color: var(--success); }
.nm-badge-warning { background: var(--warning-soft); color: var(--warning); }
.nm-badge-error   { background: var(--error-soft);   color: var(--error); }
.nm-badge-info    { background: var(--info-soft);    color: var(--info); }
.nm-badge-brand   { background: var(--accent-soft);  color: var(--text); }
.nm-badge-brand .nm-dot { background: var(--accent); }

.nm-dot { position: relative; display: inline-block; width: var(--size-dot); height: var(--size-dot); border-radius: 50%; background: currentColor; flex: none; }
.nm-dot-success { color: var(--success); } .nm-dot-warning { color: var(--warning); } .nm-dot-error { color: var(--error); }
.nm-dot-info { color: var(--info); } .nm-dot-neutral { color: var(--text-subtle); } .nm-dot-accent { color: var(--accent); }
.nm-dot-live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid currentColor; opacity: 0; animation: nm-pulse 2000ms var(--ease-sharp) infinite; }
@keyframes nm-pulse { 0% { transform: scale(0.5); opacity: 0.8; } 70%, 100% { transform: scale(1.25); opacity: 0; } }
.nm-status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; }

/* =====================================================================
   FORMS
   ===================================================================== */
.nm-field { display: grid; gap: 8px; min-width: 0; }
.nm-field-label { font-size: 14px; line-height: 20px; font-weight: 500; display: flex; justify-content: space-between; gap: 8px; }
.nm-field-label .nm-caption { font-weight: 400; }
.nm-help { font-size: 13px; line-height: 16px; color: var(--text-muted); display: flex; gap: 6px; align-items: center; }
.nm-field.is-error .nm-help, .nm-help.is-error { color: var(--error); }
.nm-input, .nm-textarea, .nm-select select {
  width: 100%; height: var(--size-control-lg); padding: 0 16px; background: var(--surface-1); color: var(--text);
  border: 0; border-radius: var(--radius-12); box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: 15px; line-height: 20px; -webkit-appearance: none; appearance: none;
  transition: box-shadow var(--duration-100) var(--ease-sharp), background-color var(--duration-100) var(--ease-sharp);
}
.nm-input::placeholder, .nm-textarea::placeholder { color: var(--text-muted); }
.nm-input:hover, .nm-input.is-hover, .nm-textarea:hover, .nm-textarea.is-hover, .nm-select select:hover, .nm-select.is-hover select { box-shadow: inset 0 0 0 1px var(--line-control); }
.nm-input:focus, .nm-textarea:focus, .nm-select select:focus, .nm-input.is-focus, .nm-textarea.is-focus { box-shadow: inset 0 0 0 1px var(--text); }
.nm-input.is-active { box-shadow: inset 0 0 0 1px var(--text); background: var(--surface-1); }
.nm-field.is-error .nm-input, .nm-input.is-error, .nm-textarea.is-error, .nm-field.is-error .nm-select select { box-shadow: inset 0 0 0 1px var(--error); }
.nm-input:disabled, .nm-textarea:disabled, .nm-select select:disabled { opacity: 0.4; cursor: not-allowed; background: var(--surface-2); box-shadow: none; }
.nm-textarea { height: auto; min-height: 112px; padding: 12px 16px; resize: vertical; display: block; }
.nm-input-wrap { position: relative; display: block; }
.nm-input-wrap > .nm-icon, .nm-input-wrap > .nm-spin { position: absolute; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.nm-input-wrap > .nm-lead { left: 16px; }
.nm-input-wrap > .nm-trail { right: 16px; }
.nm-input-wrap > .nm-spin { right: 16px; margin-top: -8px; transform: none; }
.nm-input.has-lead { padding-left: 44px; } .nm-input.has-trail { padding-right: 44px; }
.nm-input.nm-num { font-family: var(--font-mono); font-size: 14px; text-align: right; }
.nm-select { position: relative; display: block; }
.nm-select select { padding-right: 44px; cursor: pointer; }
.nm-select > .nm-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-muted); }

.nm-check, .nm-radio { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; line-height: 20px; cursor: pointer; }
.nm-check input, .nm-radio input { -webkit-appearance: none; appearance: none; margin: 0; flex: none; position: relative; width: 18px; height: 18px;
  background: var(--surface-1); border: 1px solid var(--line-control); cursor: pointer;
  transition: background-color var(--duration-100) var(--ease-sharp), border-color var(--duration-100) var(--ease-sharp), box-shadow var(--duration-100) var(--ease-sharp); }
.nm-check input { border-radius: var(--radius-4); }
.nm-radio input { border-radius: 50%; }
.nm-check input:hover, .nm-check.is-hover input, .nm-radio input:hover, .nm-radio.is-hover input { border-color: var(--text-muted); }
.nm-check.is-active input, .nm-radio.is-active input { background: var(--fill-active); }
.nm-check input:checked, .nm-check input:indeterminate { background: var(--control-on); border-color: var(--control-on); }
.nm-check input::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 10px; border: solid var(--on-control); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) scale(0.6); opacity: 0; transition: transform var(--duration-100) var(--ease-sharp), opacity var(--duration-100) var(--ease-sharp); }
.nm-check input:checked::after { opacity: 1; transform: rotate(45deg) scale(1); }
.nm-check input:indeterminate::after { opacity: 1; transform: none; left: 4px; top: 7.5px; width: 8px; height: 0; border-width: 1.5px 0 0 0; }
.nm-radio input:checked { border-color: var(--control-on); background: var(--control-on); box-shadow: inset 0 0 0 4px var(--surface-1); }
.nm-check.is-disabled, .nm-radio.is-disabled, .nm-toggle.is-disabled { opacity: 0.4; cursor: not-allowed; }
.nm-check.is-error input, .nm-radio.is-error input { border-color: var(--error); }

.nm-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; line-height: 20px; }
.nm-toggle input { -webkit-appearance: none; appearance: none; margin: 0; flex: none; position: relative; cursor: pointer;
  width: 40px; height: 24px; border-radius: var(--radius-full); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-control);
  transition: background-color var(--duration-200) var(--ease-sharp), box-shadow var(--duration-200) var(--ease-sharp); }
.nm-toggle input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: var(--radius-full);
  background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform var(--duration-200) var(--ease-sharp), width var(--duration-100) var(--ease-sharp); }
.nm-toggle input:checked { background: var(--control-on); box-shadow: none; }
.nm-toggle input:checked::after { transform: translateX(16px); }
.nm-toggle input:active::after, .nm-toggle.is-active input::after { width: 22px; }
.nm-toggle input:checked:active::after, .nm-toggle.is-active input:checked::after { transform: translateX(12px); }
.nm-toggle.is-hover input:not(:checked) { box-shadow: inset 0 0 0 1px var(--text-muted); }
.nm-toggle.is-loading input::after { animation: nm-breathe 900ms var(--ease-sharp) infinite alternate; }
.nm-toggle.is-error input { box-shadow: inset 0 0 0 1px var(--error); }
@keyframes nm-breathe { to { opacity: 0.4; } }

.nm-seg { position: relative; display: inline-flex; height: var(--size-control-md); padding: 4px; border-radius: var(--radius-full); background: var(--surface-2); isolation: isolate; }
.nm-seg button { position: relative; z-index: 1; height: 32px; padding: 0 16px; border: 0; background: transparent; border-radius: var(--radius-full);
  font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--duration-200) var(--ease-sharp); }
.nm-seg button:hover, .nm-seg button[aria-pressed="true"] { color: var(--text); }
.nm-seg button:disabled { opacity: 0.4; cursor: not-allowed; }
.nm-seg-thumb { position: absolute; z-index: 0; top: 4px; left: 0; height: 32px; width: 0; border-radius: var(--radius-full); background: var(--thumb); box-shadow: var(--elev-1);
  transition: transform var(--duration-200) var(--ease-sharp), width var(--duration-200) var(--ease-sharp); }

/* prompt box (Grok-like) */
.nm-prompt { background: var(--surface-1); border-radius: var(--radius-20); box-shadow: var(--elev-1), inset 0 0 0 1px var(--line-strong); padding: 16px 12px 12px 20px; }
.nm-prompt textarea { width: 100%; min-height: 28px; border: 0; outline: 0; resize: none; background: transparent; font-size: 17px; line-height: 24px; padding: 4px 0 12px; }
.nm-prompt textarea::placeholder { color: var(--text-muted); }
.nm-prompt-bar { display: flex; align-items: center; gap: 8px; }
.nm-prompt:focus-within { box-shadow: var(--elev-2), inset 0 0 0 1px var(--line-control); }

/* =====================================================================
   TABS
   ===================================================================== */
.nm-tabs { position: relative; display: flex; gap: 24px; border-bottom: 1px solid var(--line); }
.nm-tab { position: relative; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; font-size: 15px; line-height: 20px; font-weight: 500;
  color: var(--text-muted); display: inline-flex; align-items: center; gap: 8px; transition: color var(--duration-200) var(--ease-sharp); }
.nm-tab:hover, .nm-tab[aria-selected="true"] { color: var(--text); }
.nm-tab:disabled { opacity: 0.4; cursor: not-allowed; }
.nm-tab .nm-count { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--text-muted); }
.nm-tab-ink { position: absolute; bottom: -1px; left: 0; height: 2px; width: 0; border-radius: var(--radius-full); background: var(--accent);
  transition: transform var(--duration-200) var(--ease-sharp), width var(--duration-200) var(--ease-sharp); }
.nm-tabs-pill { border: 0; gap: 4px; }
.nm-tabs-pill .nm-tab { height: 36px; padding: 0 14px; border-radius: var(--radius-full); font-size: 14px; }
.nm-tabs-pill .nm-tab[aria-selected="true"] { background: var(--surface-2); }
.nm-tabs-pill .nm-tab-ink { display: none; }

/* =====================================================================
   TOOLTIP, MENU, MODAL, TOAST
   ===================================================================== */
.nm-tip { position: relative; display: inline-flex; }
.nm-tip-bubble { position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: var(--z-tooltip); padding: 6px 10px; border-radius: var(--radius-8);
  background: var(--surface-inverse); color: var(--text-inverse); font-size: 13px; line-height: 16px; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(-50%, 4px); transition: opacity var(--duration-100) var(--ease-sharp), transform var(--duration-200) var(--ease-sharp); }
.nm-tip-bubble kbd { font-family: var(--font-mono); font-size: 12px; margin-left: 8px; opacity: 0.6; }
.nm-tip:hover .nm-tip-bubble, .nm-tip:focus-within .nm-tip-bubble, .nm-tip.is-open .nm-tip-bubble { opacity: 1; transform: translate(-50%, 0); transition-delay: 200ms; }
.nm-tip.is-open .nm-tip-bubble { transition-delay: 0ms; }
.nm-tip-bubble.nm-bottom { bottom: auto; top: calc(100% + 8px); }

.nm-menu-anchor { position: relative; display: inline-block; }
.nm-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: var(--z-dropdown); min-width: 240px; padding: 6px; background: var(--surface-1);
  border-radius: var(--radius-20); box-shadow: var(--elev-2), inset 0 0 0 1px var(--line-strong);
  opacity: 0; transform: translateY(-4px) scale(0.98); transform-origin: top left; pointer-events: none;
  transition: opacity var(--duration-200) var(--ease-sharp), transform var(--duration-200) var(--ease-sharp); }
.nm-menu-anchor.is-open .nm-menu, .nm-menu.is-static { opacity: 1; transform: none; pointer-events: auto; }
.nm-menu.is-static { position: relative; top: 0; }
.nm-menu-label { padding: 8px 10px 4px; font-size: 13px; line-height: 16px; color: var(--text-muted); }
.nm-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; background: transparent; border-radius: var(--radius-12);
  font-size: 15px; line-height: 20px; color: var(--text); cursor: pointer; text-align: left; transition: background-color var(--duration-100) var(--ease-sharp); }
.nm-menu-item > .nm-icon { color: var(--text-muted); }
.nm-menu-item:hover, .nm-menu-item.is-hover { background: var(--fill-hover); }
.nm-menu-item:active, .nm-menu-item.is-active { background: var(--fill-active); }
.nm-menu-item kbd { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.nm-menu-item .nm-tick { margin-left: auto; opacity: 0; color: var(--accent-text); }
.nm-menu-item[aria-checked="true"] .nm-tick { opacity: 1; }
.nm-menu-item:disabled { opacity: 0.4; cursor: not-allowed; background: transparent; }
.nm-menu-item.is-danger, .nm-menu-item.is-danger > .nm-icon { color: var(--error); }
.nm-menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }

.nm-scrim { position: absolute; inset: 0; z-index: var(--z-overlay); background: var(--overlay); display: grid; place-items: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity var(--duration-600) var(--spring-smooth); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.nm-scrim.is-open { opacity: 1; pointer-events: auto; }
.nm-modal { position: relative; z-index: var(--z-modal); width: min(480px, 100%); background: var(--surface-1); border-radius: var(--radius-28); box-shadow: var(--elev-3);
  padding: 28px; transform: translateY(12px) scale(0.98); opacity: 0; transition: transform var(--duration-600) var(--spring-smooth), opacity var(--duration-200) var(--ease-sharp); }
.nm-scrim.is-open .nm-modal, .nm-modal.is-static { transform: none; opacity: 1; }
.nm-modal-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.nm-modal-title { margin: 0; font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.025em; }
.nm-modal-body { margin-top: 8px; color: var(--text-muted); font-size: 15px; line-height: 22px; }
.nm-modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 28px; }

.nm-toasts { display: flex; flex-direction: column; gap: 8px; width: min(380px, 100%); }
.nm-toast { display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: start; padding: 14px 12px 14px 16px;
  background: var(--surface-inverse); color: var(--text-inverse); border-radius: var(--radius-20); box-shadow: var(--elev-3);
  animation: nm-toast-in var(--duration-600) var(--spring-smooth) both; }
.nm-toast.is-leaving { animation: nm-toast-out var(--duration-200) var(--ease-exit) both; }
@keyframes nm-toast-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes nm-toast-out { to { opacity: 0; transform: translateY(8px) scale(0.98); } }
.nm-toast-title { font-size: 15px; line-height: 20px; font-weight: 500; }
.nm-toast-desc { font-size: 14px; line-height: 20px; opacity: 0.66; }
.nm-toast .nm-btn { color: var(--text-inverse); margin: -6px -2px -6px 0; }
.nm-toast .nm-btn:hover { background: color-mix(in srgb, var(--text-inverse) 10%, transparent); }
/* status colours on the inverse surface use the opposite theme's values */
.nm-toast-success .nm-toast-icon { color: var(--inv-success); } .nm-toast-warning .nm-toast-icon { color: var(--inv-warning); }
.nm-toast-error .nm-toast-icon { color: var(--inv-error); } .nm-toast-info .nm-toast-icon { color: var(--inv-info); }

/* =====================================================================
   CARDS: tonal, feature (bento), media (news), interactive
   ===================================================================== */
.nm-card { position: relative; background: var(--surface-2); border-radius: var(--radius-20); padding: 24px; color: var(--text); box-shadow: inset 0 0 0 1px var(--edge); }
.nm-card-lifted { background: var(--surface-1); box-shadow: var(--elev-1), inset 0 0 0 1px var(--edge-strong); }
.nm-card-title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -0.015em; }
.nm-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; font-size: 15px; }
.nm-card-link { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.nm-card.is-disabled { opacity: 0.4; pointer-events: none; }
.nm-card.is-error { box-shadow: inset 0 0 0 1px var(--error); }

/* feature card: visual fills, label chip bottom-left (bento) */
.nm-feature { position: relative; border-radius: var(--radius-28); overflow: hidden; background: var(--surface-2); min-height: 240px; display: flex; flex-direction: column; box-shadow: inset 0 0 0 1px var(--edge); }
.nm-feature-visual { flex: 1; position: relative; display: grid; place-items: center; overflow: hidden; }
.nm-feature > .nm-chip { position: absolute; left: 16px; bottom: 16px; z-index: 2; }
.nm-feature-top > .nm-chip { top: 16px; bottom: auto; }

/* media card: image tile + meta + title (news) */
.nm-media { display: block; text-decoration: none; color: var(--text); }
.nm-media-tile { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-12); display: grid; place-items: center; overflow: hidden;
  transition: transform var(--duration-600) var(--spring-smooth), box-shadow var(--duration-600) var(--ease-sharp); }
.nm-media-tile .nm-media-word { font-size: 28px; line-height: 32px; letter-spacing: -0.03em; font-weight: 500; color: var(--on-atmo); text-align: center; padding: 0 24px; }
.nm-media-meta { display: flex; gap: 8px; align-items: center; margin-top: 16px; font-size: 14px; line-height: 20px; color: var(--text-muted); }
.nm-media-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.nm-media-title { margin-top: 6px; font-size: 18px; line-height: 26px; letter-spacing: -0.015em; font-weight: 500; text-wrap: balance; }
.nm-media-title .nm-icon { margin-left: 4px; transition: transform var(--duration-200) var(--ease-sharp); color: var(--text-muted); }
.nm-media:hover .nm-media-tile, .nm-media.is-hover .nm-media-tile { transform: translateY(var(--lift)); box-shadow: var(--elev-2); }
.nm-media:hover .nm-media-title .nm-icon { transform: translateX(3px); }

/* interactive tilt (cursor-following) */
.nm-tilt { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 0%; --glow: 0;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform var(--duration-600) var(--spring-smooth); will-change: transform; }
.nm-tilt::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgba(255, 250, 240, 0.12), transparent 60%); opacity: var(--glow); transition: opacity var(--duration-200) var(--ease-sharp); }
.nm-tilt:hover { --glow: 1; }
.nm-tilt.is-tilting { transition: transform var(--duration-100) linear; }
.nm-card-interactive { cursor: pointer; transition: background-color var(--duration-200) var(--ease-sharp), transform var(--duration-600) var(--spring-smooth); }
.nm-card-interactive:hover, .nm-card-interactive.is-hover { background: var(--surface-3); }
.nm-card-interactive:active, .nm-card-interactive.is-active { transform: scale(var(--press-scale)); }
.nm-glass { background: var(--glass); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.3); backdrop-filter: blur(var(--blur-glass)) saturate(1.3); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* =====================================================================
   STATS ROW (xAI-like)
   ===================================================================== */
.nm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 40px 0; }
.nm-stat { padding: 4px 40px; }
.nm-stat:first-child { padding-left: 0; }
.nm-stat + .nm-stat { border-left: 1px solid var(--line); }
.nm-stat-value { font-size: 64px; line-height: 64px; letter-spacing: -0.045em; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nm-stat-value .m { color: var(--text-muted); }
.nm-stat-label { margin-top: 16px; font-size: 15px; line-height: 20px; color: var(--text-muted); }

/* KPI card (app) */
.nm-kpi { position: relative; background: var(--surface-1); border-radius: var(--radius-20); box-shadow: var(--elev-1), inset 0 0 0 1px var(--edge); padding: 20px; overflow: hidden; }
.nm-kpi-label { font-size: 14px; line-height: 20px; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center; }
.nm-kpi-value { margin-top: 12px; font-size: 40px; line-height: 44px; letter-spacing: -0.04em; font-weight: 500; font-variant-numeric: tabular-nums; }
.nm-kpi-value .m { color: var(--text-muted); }
.nm-kpi-foot { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.nm-delta { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 13px; line-height: 16px; }
.nm-delta-up { color: var(--success); } .nm-delta-down { color: var(--error); }
.nm-spark { display: block; width: 96px; height: 32px; overflow: visible; }
.nm-spark path { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.nm-spark circle { fill: var(--accent); }

/* =====================================================================
   DATA TABLE
   ===================================================================== */
.nm-table-wrap { background: var(--surface-1); border-radius: var(--radius-20); overflow: hidden; box-shadow: var(--elev-1), inset 0 0 0 1px var(--edge); }
.nm-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.nm-table th { height: 44px; padding: 0 20px; text-align: left; font-weight: 400; color: var(--text-muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.nm-table td { height: 56px; padding: 0 20px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.nm-table tr:last-child td { border-bottom: 0; }
.nm-table tbody tr { transition: background-color var(--duration-100) var(--ease-sharp); }
.nm-table tbody tr:hover, .nm-table tbody tr.is-hover { background: var(--fill-hover); }
.nm-table tbody tr[aria-selected="true"] { background: var(--accent-soft); }
.nm-table .nm-num { text-align: right; font-family: var(--font-mono); font-size: 13px; }
.nm-table th.nm-num { font-family: var(--font-sans); font-size: 14px; }
.nm-th-sort { all: unset; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; border-radius: var(--radius-4); color: inherit; }
.nm-th-sort:hover { color: var(--text); }
.nm-th-sort .nm-icon { opacity: 0; transition: transform var(--duration-200) var(--ease-sharp), opacity var(--duration-100) var(--ease-sharp); }
.nm-th-sort:hover .nm-icon { opacity: 0.5; }
th[aria-sort] .nm-th-sort { color: var(--text); }
th[aria-sort] .nm-th-sort .nm-icon { opacity: 1; color: var(--accent-text); }
th[aria-sort="descending"] .nm-th-sort .nm-icon { transform: rotate(180deg); }
.nm-table-foot { display: flex; justify-content: space-between; align-items: center; padding: 12px 12px 12px 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-muted); }
.nm-cell-who { display: flex; align-items: center; gap: 12px; }
.nm-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 500; background: var(--surface-3); color: var(--text); flex: none; }

/* =====================================================================
   NAV, SIDEBAR, FOOTER
   ===================================================================== */
.nm-nav { position: relative; z-index: var(--z-sticky); height: var(--size-nav); display: flex; align-items: center; gap: 40px; padding: 0 24px; background: var(--bg); }
.nm-nav.is-scrolled { box-shadow: inset 0 -1px 0 var(--line); }
.nm-nav-links { display: flex; gap: 28px; flex: 1; }
.nm-nav-link { display: inline-flex; align-items: center; gap: 4px; height: 32px; color: var(--text); text-decoration: none; font-size: 15px; line-height: 20px; border-radius: var(--radius-4);
  transition: color var(--duration-100) var(--ease-sharp); }
.nm-nav-link .nm-icon { color: var(--text-muted); transition: transform var(--duration-200) var(--ease-sharp); }
.nm-nav-link:hover { color: var(--text-muted); }
.nm-nav-link[aria-expanded="true"] .nm-icon { transform: rotate(180deg); }
.nm-nav-actions { display: flex; gap: 8px; align-items: center; }
.nm-nav-burger { display: none; }
/* ruled variant: items separated by vertical lines */
.nm-nav-ruled { padding: 0; gap: 0; box-shadow: inset 0 -1px 0 var(--line); height: 52px; }
.nm-nav-ruled > * { height: 100%; display: flex; align-items: center; padding: 0 20px; box-shadow: inset -1px 0 0 var(--line); }
.nm-nav-ruled .nm-nav-links { gap: 0; padding: 0; box-shadow: none; }
.nm-nav-ruled .nm-nav-link { height: 100%; padding: 0 20px; border-radius: 0; box-shadow: inset -1px 0 0 var(--line); }
.nm-nav-ruled .nm-nav-actions { margin-left: auto; padding: 0; gap: 0; box-shadow: inset 1px 0 0 var(--line); }
.nm-nav-ruled .nm-nav-actions > a { height: 100%; display: flex; align-items: center; padding: 0 20px; text-decoration: none; font-size: 15px; }
.nm-nav-ruled .nm-nav-actions > a.is-ink { background: var(--primary); color: var(--on-primary); }

.nm-side { width: var(--size-sidebar); background: var(--side-bg); box-shadow: inset -1px 0 0 var(--side-edge); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.nm-side-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 12px 8px; }
.nm-side-item { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: var(--radius-12); border: 0; background: transparent;
  color: var(--text); font-size: 15px; line-height: 20px; text-decoration: none; cursor: pointer; width: 100%; text-align: left;
  transition: background-color var(--duration-100) var(--ease-sharp); }
.nm-side-item > .nm-icon { color: var(--text-muted); }
.nm-side-item:hover { background: var(--fill-hover); }
.nm-side-item[aria-current="page"] { background: var(--surface-3); }
.nm-side-item[aria-current="page"] > .nm-icon { color: var(--text); }
.nm-side-item .nm-dot { margin-left: auto; width: 6px; height: 6px; }
.nm-side-item .nm-count { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.nm-side-item:disabled { opacity: 0.4; cursor: not-allowed; }
.nm-side-label { padding: 20px 12px 6px; font-size: 14px; line-height: 20px; color: var(--text-muted); }
.nm-side-foot { margin-top: auto; }

.nm-footer { background: var(--bg); }
.nm-footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.nm-footer-col { padding: 40px 32px; display: flex; flex-direction: column; gap: 8px; }
.nm-footer-col + .nm-footer-col { border-left: 1px solid var(--line); }
.nm-footer-col h4 { margin: 0 0 16px; font-size: 15px; font-weight: 400; color: var(--text-muted); }
.nm-footer-col a { text-decoration: none; font-size: 15px; line-height: 24px; width: fit-content; transition: color var(--duration-100) var(--ease-sharp); }
.nm-footer-col a:hover { color: var(--text-muted); }
.nm-footer-mark { padding: 48px 32px 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.nm-footer-mark .nm-wordmark { font-size: clamp(56px, 16vw, 168px); line-height: 0.8; margin-bottom: -0.06em; }
.nm-footer-band { height: 96px; }

/* =====================================================================
   EMPTY STATE, SKELETON
   ===================================================================== */
.nm-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 64px 24px; }
.nm-empty-title { margin: 0; font-size: 28px; line-height: 32px; font-weight: 500; letter-spacing: -0.025em; }
.nm-empty-body { margin: 0 0 12px; color: var(--text-muted); max-width: 400px; }
.nm-skel { display: block; background-color: var(--fill-active); border-radius: var(--radius-8); position: relative; overflow: hidden; }
.nm-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--fill-hover), transparent);
  animation: nm-shimmer var(--duration-slow) var(--ease-linear) infinite; }
@keyframes nm-shimmer { to { transform: translateX(100%); } }
.nm-skel-line { height: 14px; } .nm-skel-title { height: 24px; } .nm-skel-num { height: 44px; width: 160px; } .nm-skel-tile { aspect-ratio: 16 / 9; border-radius: var(--radius-12); }

/* =====================================================================
   WORDMARK + LOCKUPS
   ===================================================================== */
.nm-wordmark { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; color: var(--text); }
.nm-lockup { display: inline-flex; align-items: baseline; gap: 10px; color: var(--text); white-space: nowrap; }
.nm-lockup-product { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.035em; font-size: 24px; line-height: 28px; }
.nm-lockup-by { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; line-height: 16px; font-weight: 500; color: var(--text-muted); }
.nm-lockup-stacked { flex-direction: column; align-items: flex-start; gap: 6px; }
.nm-lockup-lg .nm-lockup-product { font-size: 48px; line-height: 48px; letter-spacing: -0.045em; }
.nm-lockup-lg .nm-lockup-by { font-size: 13px; }
.nm-lockup-sm { gap: 8px; } .nm-lockup-sm .nm-lockup-product { font-size: 17px; line-height: 20px; letter-spacing: -0.025em; } .nm-lockup-sm .nm-lockup-by { font-size: 10px; line-height: 12px; }
.nm-lockup-onatmo, .nm-lockup-onatmo .nm-lockup-product { color: var(--on-atmo); } .nm-lockup-onatmo .nm-lockup-by { color: rgba(247, 246, 243, 0.64); }

/* =====================================================================
   MOTION utilities
   ===================================================================== */
.nm-reveal { opacity: 0; transform: translateY(var(--reveal-shift)); transition: opacity var(--duration-800) var(--spring-smooth), transform var(--duration-800) var(--spring-smooth);
  transition-delay: calc(var(--i, 0) * var(--reveal-stagger)); }
.nm-reveal.is-in { opacity: 1; transform: none; }
.nm-parallax { will-change: transform; }

/* =====================================================================
   KYOOSK
   ===================================================================== */
.nm-kiosk-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 184px; padding: 24px; border: 0;
  background: var(--surface-2); border-radius: var(--radius-28); color: var(--text); cursor: pointer; text-align: left; font: inherit;
  box-shadow: inset 0 0 0 1px var(--edge); transition: transform var(--duration-100) var(--ease-sharp), background-color var(--duration-200) var(--ease-sharp); }
.nm-kiosk-tile:active, .nm-kiosk-tile.is-active { transform: scale(var(--press-scale)); }
.nm-kiosk-tile.is-selected { box-shadow: inset 0 0 0 2px var(--accent); }
.nm-kiosk-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); }
.nm-kiosk-btn { --h: var(--size-touch-kiosk); padding: 0 32px; font-size: 18px; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 767px) {
  .nm-pane { padding: 20px; }
  .nm-display { font-size: 52px; line-height: 52px; } .nm-h1 { font-size: 44px; line-height: 44px; } .nm-h2 { font-size: 32px; line-height: 36px; }
  .nm-nav { gap: 16px; padding: 0 16px; } .nm-nav-links, .nm-nav-actions .nm-hide-sm { display: none; } .nm-nav-burger { display: inline-flex; }
  .nm-stats { padding: 24px 0; } .nm-stat { padding: 20px 0; } .nm-stat + .nm-stat { border-left: 0; border-top: 1px solid var(--line); }
  .nm-footer-cols { grid-template-columns: 1fr; } .nm-footer-col + .nm-footer-col { border-left: 0; border-top: 1px solid var(--line); }
  .nm-matrix { grid-template-columns: 96px repeat(7, minmax(96px, 1fr)); overflow-x: auto; }
}

/* =====================================================================
   MOTION v3: springs, morphs and light
   Apple-like: things move on springs, come into focus from a blur,
   stretch like liquid between positions and settle without a jolt.
   Colour changes stay on ease-sharp; movement always uses a spring.
   ===================================================================== */

/* pills press in and spring back */
.nm-btn, .nm-chip-btn, .nm-kiosk-tile, .nm-card-interactive, .nm-announce {
  transition: background-color var(--duration-200) var(--ease-sharp), color var(--duration-200) var(--ease-sharp), box-shadow var(--duration-200) var(--ease-sharp),
              transform var(--duration-600) var(--spring-bouncy);
}
.nm-btn:active, .nm-btn.is-active, .nm-chip-btn:active, .nm-kiosk-tile:active, .nm-kiosk-tile.is-active, .nm-card-interactive:active, .nm-card-interactive.is-active, .nm-announce:active {
  transform: scale(var(--press-scale)); transition-duration: var(--duration-100), var(--duration-100), var(--duration-100), var(--duration-200); transition-timing-function: var(--ease-sharp);
}
.nm-btn .nm-arrow, .nm-media-title .nm-icon, .nm-announce-go { transition: transform var(--duration-600) var(--spring-bouncy); }
.nm-btn:hover .nm-arrow { transform: translateX(3px); }
.nm-announce:hover .nm-announce-go { transform: rotate(45deg); }
.nm-chip-btn[aria-pressed="true"] { animation: nm-pop var(--duration-600) var(--spring-bouncy); }
@keyframes nm-pop { from { transform: scale(0.9); } }

/* focus ring breathes in on a spring */
:where(.nm-btn, .nm-input, .nm-textarea, .nm-select select, .nm-check input, .nm-radio input, .nm-toggle input, .nm-seg button,
  .nm-tab, .nm-menu-item, .nm-card-link, .nm-media, .nm-th-sort, .nm-side-item, .nm-nav-link, .nm-kiosk-tile, .nm-chip-btn, .nm-announce):focus-visible,
.is-focus { animation: nm-ring var(--duration-600) var(--spring-snappy); }
@keyframes nm-ring { from { outline-offset: 8px; outline-color: transparent; } }

/* checkbox tick and radio dot pop */
.nm-check input::after { transition: transform var(--duration-400) var(--spring-bouncy), opacity var(--duration-100) var(--ease-sharp); }
.nm-check input:checked::after { animation: nm-tick var(--duration-600) var(--spring-bouncy); }
@keyframes nm-tick { from { transform: rotate(45deg) scale(0.3); } }
.nm-radio input { transition: box-shadow var(--duration-600) var(--spring-bouncy), background-color var(--duration-100) var(--ease-sharp), border-color var(--duration-100) var(--ease-sharp); }
.nm-radio input:not(:checked) { box-shadow: inset 0 0 0 9px var(--surface-1); }

/* toggle: the thumb stretches like a drop while pressed and springs across */
.nm-toggle input { transition: background-color var(--duration-400) var(--ease-sharp), box-shadow var(--duration-400) var(--ease-sharp); }
.nm-toggle input::after { transition: transform var(--duration-600) var(--spring-bouncy), width var(--duration-400) var(--spring-snappy); }
.nm-toggle input:active::after, .nm-toggle.is-active input::after { width: 24px; }
.nm-toggle input:checked:active::after, .nm-toggle.is-active input:checked::after { transform: translateX(10px); }

/* liquid thumbs: position springs; bundle.js adds the stretch between stops */
.nm-seg-thumb, .nm-tab-ink { transition: transform var(--duration-600) var(--spring-snappy), width var(--duration-600) var(--spring-snappy); }

/* surfaces that appear come into focus: blur + scale on a spring */
.nm-menu { transform: translateY(-6px) scale(0.92); filter: blur(var(--reveal-blur)); transform-origin: top left;
  transition: opacity var(--duration-200) var(--ease-sharp), transform var(--duration-200) var(--ease-exit), filter var(--duration-200) var(--ease-sharp); }
.nm-menu-anchor.is-open .nm-menu { filter: none; transition: opacity var(--duration-200) var(--ease-sharp), transform var(--duration-600) var(--spring-snappy), filter var(--duration-400) var(--ease-sharp); }
.nm-menu.is-static { filter: none; }
.nm-menu-anchor.is-open .nm-menu-item { animation: nm-rise var(--duration-600) var(--spring-smooth) both; }
.nm-menu-anchor.is-open .nm-menu-item:nth-child(2) { animation-delay: 20ms; } .nm-menu-anchor.is-open .nm-menu-item:nth-child(3) { animation-delay: 40ms; }
.nm-menu-anchor.is-open .nm-menu-item:nth-child(4) { animation-delay: 60ms; } .nm-menu-anchor.is-open .nm-menu-item:nth-child(5) { animation-delay: 80ms; }
@keyframes nm-rise { from { opacity: 0; transform: translateY(-4px); } }

.nm-tip-bubble { transform: translate(-50%, 6px) scale(0.86); filter: blur(4px); transform-origin: 50% 100%;
  transition: opacity var(--duration-200) var(--ease-sharp), transform var(--duration-200) var(--ease-exit), filter var(--duration-200) var(--ease-sharp); }
.nm-tip:hover .nm-tip-bubble, .nm-tip:focus-within .nm-tip-bubble, .nm-tip.is-open .nm-tip-bubble { transform: translate(-50%, 0) scale(1); filter: none;
  transition: opacity var(--duration-200) var(--ease-sharp) 200ms, transform var(--duration-600) var(--spring-bouncy) 200ms, filter var(--duration-400) var(--ease-sharp) 200ms; }
.nm-tip.is-open .nm-tip-bubble { transition-delay: 0ms; }

.nm-scrim { transition: opacity var(--duration-400) var(--ease-sharp), backdrop-filter var(--duration-800) var(--spring-smooth); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
.nm-scrim.is-open { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.nm-modal { transform: translateY(24px) scale(0.92); filter: blur(var(--reveal-blur));
  transition: transform var(--duration-200) var(--ease-exit), opacity var(--duration-200) var(--ease-sharp), filter var(--duration-200) var(--ease-sharp); }
.nm-scrim.is-open .nm-modal { transform: none; filter: none; opacity: 1; transition: transform var(--duration-800) var(--spring-snappy), opacity var(--duration-200) var(--ease-sharp), filter var(--duration-400) var(--ease-sharp); }
.nm-modal.is-static { transform: none; filter: none; }

.nm-toast { animation: nm-toast-in var(--duration-800) var(--spring-bouncy) both; }
@keyframes nm-toast-in { from { opacity: 0; transform: translateY(24px) scale(0.86); filter: blur(var(--reveal-blur)); } 40% { opacity: 1; } }
.nm-toast.is-leaving { animation: nm-toast-out var(--duration-400) var(--ease-exit) both; }
@keyframes nm-toast-out { to { opacity: 0; transform: scale(0.9); filter: blur(var(--reveal-blur)); } }

/* reveal: rise out of a blur, staggered */
.nm-reveal { opacity: 0; transform: translateY(var(--reveal-shift)) scale(0.98); filter: blur(var(--reveal-blur));
  transition: opacity var(--duration-800) var(--ease-sharp), transform var(--duration-800) var(--spring-smooth), filter var(--duration-800) var(--ease-sharp);
  transition-delay: calc(var(--i, 0) * var(--reveal-stagger)); }
.nm-reveal.is-in { opacity: 1; transform: none; filter: none; }

/* cards: lift and tilt on springs, release slower than they follow */
.nm-media-tile { transition: transform var(--duration-800) var(--spring-snappy), box-shadow var(--duration-400) var(--ease-sharp); }
.nm-media:hover .nm-media-tile, .nm-media.is-hover .nm-media-tile { transform: translateY(var(--lift)) scale(1.01); }
.nm-tilt { transition: transform var(--duration-800) var(--spring-bouncy); }
.nm-tilt.is-tilting { transition: transform var(--duration-400) var(--spring-smooth); }

/* skeleton: a soft breathing sweep instead of a hard bar */
.nm-skel::after { animation-duration: var(--duration-slow); animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95); }

/* =====================================================================
   LAVA: atmospheres drift slightly and never repeat exactly.
   bundle.js injects .nm-lava with three blobs into every .nm-atmo.
   Blobs morph their outline while drifting; slow, low amplitude.
   ===================================================================== */
.nm-lava { position: absolute; inset: 0; z-index: 0 !important; pointer-events: none; overflow: hidden; border-radius: inherit; }
.nm-lava i { position: absolute; display: block; width: 70%; aspect-ratio: 1; border-radius: 42% 58% 61% 39% / 47% 41% 59% 53%;
  filter: blur(40px); opacity: 0.9; will-change: transform, border-radius;
  animation: nm-lava-a calc(var(--duration-lava) * 1) var(--ease-lava) infinite alternate, nm-morph calc(var(--duration-lava) * 0.7) var(--ease-lava) infinite alternate; }
.nm-lava i:nth-child(1) { background: radial-gradient(closest-side, var(--a3), transparent); left: 48%; top: 58%; }
.nm-lava i:nth-child(2) { background: radial-gradient(closest-side, var(--a2), transparent); left: 22%; top: 62%; width: 90%; opacity: 0.7;
  animation-name: nm-lava-b, nm-morph; animation-duration: calc(var(--duration-lava) * 1.37), calc(var(--duration-lava) * 0.91); animation-direction: alternate-reverse, alternate; }
.nm-lava i:nth-child(3) { background: radial-gradient(closest-side, var(--a3), transparent); left: 70%; top: 30%; width: 40%; opacity: 0.45;
  animation-name: nm-lava-c, nm-morph; animation-duration: calc(var(--duration-lava) * 0.83), calc(var(--duration-lava) * 1.13); }
.nm-atmo-side .nm-lava i:nth-child(1) { left: 66%; top: 24%; } .nm-atmo-side .nm-lava i:nth-child(2) { left: 52%; top: 4%; }
.nm-atmo-top .nm-lava i:nth-child(1) { left: 18%; top: -44%; } .nm-atmo-top .nm-lava i:nth-child(2) { left: -4%; top: -60%; } .nm-atmo-top .nm-lava i:nth-child(3) { left: 60%; top: -20%; }
.nm-atmo-wash .nm-lava i:nth-child(1) { left: 10%; top: 64%; width: 90%; }
@keyframes nm-lava-a { 0% { transform: translate(0, 0) scale(1) rotate(0deg); } 33% { transform: translate(calc(var(--lava-shift) * -1), calc(var(--lava-shift) * -0.6)) scale(1.08) rotate(24deg); }
  66% { transform: translate(calc(var(--lava-shift) * 0.5), calc(var(--lava-shift) * -1)) scale(0.96) rotate(-12deg); } 100% { transform: translate(var(--lava-shift), calc(var(--lava-shift) * 0.4)) scale(1.04) rotate(18deg); } }
@keyframes nm-lava-b { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(var(--lava-shift), calc(var(--lava-shift) * -0.8)) scale(1.1); } 100% { transform: translate(calc(var(--lava-shift) * -0.7), calc(var(--lava-shift) * 0.5)) scale(0.94); } }
@keyframes nm-lava-c { 0% { transform: translate(0, 0) scale(0.9); } 50% { transform: translate(calc(var(--lava-shift) * -1.4), var(--lava-shift)) scale(1.2); } 100% { transform: translate(calc(var(--lava-shift) * 0.6), calc(var(--lava-shift) * 1.2)) scale(1); } }
@keyframes nm-morph { 0% { border-radius: 42% 58% 61% 39% / 47% 41% 59% 53%; } 50% { border-radius: 58% 42% 38% 62% / 55% 63% 37% 45%; } 100% { border-radius: 49% 51% 56% 44% / 38% 52% 48% 62%; } }
.nm-atmo.is-still .nm-lava i { animation-play-state: paused; }

/* =====================================================================
   Reduced motion: every movement becomes a plain fade; lava stops
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-property: opacity, color, background-color, box-shadow !important; transition-timing-function: ease !important; scroll-behavior: auto !important; }
  .nm-lava i { animation: none !important; }
  .nm-reveal, .nm-menu, .nm-modal, .nm-tip-bubble { filter: none !important; }
  .nm-reveal { transform: none; }
  .nm-tilt { transform: none !important; }
  .nm-btn:active, .nm-btn.is-active, .nm-kiosk-tile:active, .nm-card-interactive:active, .nm-chip-btn:active { transform: none; }
  .nm-menu, .nm-modal { transform: none !important; }
  .nm-tip-bubble { transform: translateX(-50%) !important; }
  .nm-media:hover .nm-media-tile { transform: none; }
  .nm-toast { animation: nm-fade var(--duration-200) linear both; } .nm-toast.is-leaving { animation: nm-fade-out var(--duration-200) linear both; }
  .nm-chip-btn[aria-pressed="true"], .nm-check input:checked::after, .nm-menu-anchor.is-open .nm-menu-item { animation: none; }
  .nm-skel::after { display: none; } .nm-skel { animation: nm-fade-pulse 1600ms linear infinite alternate; }
  .nm-dot-live::after { animation: none; } .nm-spin { animation: none; border-right-color: currentColor; opacity: 0.6; }
  .is-focus, :focus-visible { animation: none !important; }
}
@keyframes nm-fade { from { opacity: 0; } }
@keyframes nm-fade-out { to { opacity: 0; } }
@keyframes nm-fade-pulse { to { opacity: 0.5; } }