/* Vendored from .zcode/design-ref/nabuxui (read-only source): dist/nabuxui.css + src-css/blocks/stat-strip.css appended, as the package build would emit. Update by re-copying from the design-ref, never by editing it in place. */
@layer nx.tokens, nx.base, nx.components, nx.utilities;

/* src/css/tokens.css */
@layer nx.tokens {
  :root {
    color-scheme: light dark;
    --nx-lapis-50: #eef0ff;
    --nx-lapis-100: #e0e3ff;
    --nx-lapis-200: #c6cbff;
    --nx-lapis-300: #a3a8ff;
    --nx-lapis-400: #8482fb;
    --nx-lapis-500: #6a63f4;
    --nx-lapis-600: #5647e6;
    --nx-lapis-700: #4739ca;
    --nx-lapis-800: #3b31a3;
    --nx-lapis-900: #322d80;
    --nx-lapis-950: #1e1a4a;
    --nx-violet-300: #c4b5fd;
    --nx-violet-400: #a78bfa;
    --nx-violet-500: #8b5cf6;
    --nx-violet-600: #7c3aed;
    --nx-violet-700: #6d28d9;
    --nx-cyan-300: #7df3ff;
    --nx-cyan-400: #2ee6fb;
    --nx-cyan-500: #06c7e3;
    --nx-cyan-600: #0aa0bb;
    --nx-cyan-700: #0b7288;
    --nx-gold-200: #ffe7b8;
    --nx-gold-300: #ffd68a;
    --nx-gold-400: #ffc462;
    --nx-gold-500: #f4a93c;
    --nx-gold-600: #d98a1c;
    --nx-gold-700: #9a5b0f;
    --nx-ink-50: #f7f7fa;
    --nx-ink-100: #eeeff4;
    --nx-ink-200: #dfe0e8;
    --nx-ink-300: #c3c5d3;
    --nx-ink-400: #9a9db3;
    --nx-ink-500: #6c7088;
    --nx-ink-600: #555a70;
    --nx-ink-700: #3f4258;
    --nx-ink-800: #2a2d40;
    --nx-ink-850: #1d2031;
    --nx-ink-900: #141726;
    --nx-ink-950: #0a0c17;
    --nx-clay-50: #fcfbf8;
    --nx-clay-100: #f7f5ef;
    --nx-clay-200: #eeeae0;
    --nx-clay-300: #e0dacb;
    --nx-green-400: #3ddc97;
    --nx-green-500: #10b981;
    --nx-green-600: #059669;
    --nx-green-700: #047857;
    --nx-amber-400: #fbbf24;
    --nx-amber-500: #f59e0b;
    --nx-amber-600: #d97706;
    --nx-amber-700: #a45207;
    --nx-red-400: #ff7a7a;
    --nx-red-500: #ef4444;
    --nx-red-600: #dc2626;
    --nx-red-700: #c02424;
    --nx-font-sans:
      "Inter",
      "Vazirmatn",
      ui-sans-serif,
      system-ui,
      -apple-system,
      "Segoe UI",
      sans-serif;
    --nx-font-display:
      "Bricolage Grotesque",
      "Vazirmatn",
      "Inter",
      ui-sans-serif,
      system-ui,
      sans-serif;
    --nx-font-mono:
      "JetBrains Mono",
      ui-monospace,
      "SFMono-Regular",
      Menlo,
      monospace;
    --nx-text-xs: 0.75rem;
    --nx-text-sm: 0.875rem;
    --nx-text-md: 1rem;
    --nx-text-lg: 1.125rem;
    --nx-text-xl: 1.25rem;
    --nx-text-2xl: 1.5rem;
    --nx-text-3xl: 1.875rem;
    --nx-text-4xl: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);
    --nx-text-5xl: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
    --nx-text-display: clamp(2.6rem, 1.4rem + 5vw, 5rem);
    --nx-space-1: 0.25rem;
    --nx-space-2: 0.5rem;
    --nx-space-3: 0.75rem;
    --nx-space-4: 1rem;
    --nx-space-5: 1.25rem;
    --nx-space-6: 1.5rem;
    --nx-space-8: 2rem;
    --nx-space-10: 2.5rem;
    --nx-space-12: 3rem;
    --nx-space-16: 4rem;
    --nx-space-24: 6rem;
    --nx-tracking-tightest: -0.035em;
    --nx-tracking-tighter: -0.025em;
    --nx-tracking-tight: -0.01em;
    --nx-tracking-wide: 0.02em;
    --nx-tracking-wider: 0.08em;
    --nx-radius-xs: 6px;
    --nx-radius-sm: 8px;
    --nx-radius-md: 12px;
    --nx-radius-lg: 16px;
    --nx-radius-xl: 22px;
    --nx-radius-2xl: 28px;
    --nx-radius-full: 999px;
    --nx-z-sticky: 40;
    --nx-z-dropdown: 50;
    --nx-z-overlay: 60;
    --nx-z-toast: 70;
    --nx-z-tooltip: 80;
    --nx-dur-instant: 90ms;
    --nx-dur-fast: 150ms;
    --nx-dur-base: 220ms;
    --nx-dur-slow: 380ms;
    --nx-dur-slower: 600ms;
    --nx-stagger: 55ms;
    --nx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --nx-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --nx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --nx-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --nx-motion: 1;
    --nx-spring-snappy: linear(0, 0.006 1.3%, 0.021 2.5%, 0.054 4.2%, 0.097 5.8%, 0.19 8.8%, 0.427 15.4%, 0.526 18.3%, 0.627 21.7%, 0.704 24.6%, 0.77 27.5%, 0.833 30.8%, 0.882 34.2%, 0.921 37.5%, 0.953 41.3%, 0.978 45.4%, 0.994 50%, 1.005 55.4%, 1.009 66.3%, 1);
    --nx-spring-snappy-duration: 425ms;
    --nx-spring-gentle: linear(0, 0.007 1.3%, 0.027 2.5%, 0.058 3.8%, 0.111 5.4%, 0.209 7.9%, 0.465 13.8%, 0.57 16.3%, 0.679 19.2%, 0.773 22.1%, 0.84 24.6%, 0.903 27.5%, 0.95 30.4%, 0.985 33.3%, 1.006 35.8%, 1.022 38.8%, 1.032 42.1%, 1.035 45.4%, 1.032 50.8%, 1.012 65%, 1.003 73.8%, 0.999 85.4%, 1);
    --nx-spring-gentle-duration: 763ms;
    --nx-spring-bouncy: linear(0, 0.003 0.4%, 0.011 0.8%, 0.042 1.7%, 0.09 2.5%, 0.153 3.3%, 0.227 4.2%, 0.31 5%, 0.399 5.8%, 0.722 8.8%, 0.852 10%, 0.968 11.3%, 1.068 12.5%, 1.149 13.8%, 1.211 15%, 1.253 16.3%, 1.277 17.5%, 1.283 18.3%, 1.283 19.2%, 1.277 20%, 1.258 21.3%, 1.207 23.3%, 1.053 28.3%, 0.989 30.8%, 0.964 32.1%, 0.945 33.3%, 0.931 34.6%, 0.921 36.3%, 0.92 37.9%, 0.927 40%, 1.001 49.2%, 1.014 51.7%, 1.022 54.6%, 1.021 58.8%, 1 67.9%, 0.994 72.9%, 1.002 90.4%, 1);
    --nx-spring-bouncy-duration: 1122ms;
    --nx-spring-soft: linear(0, 0.003 0.8%, 0.019 2.1%, 0.046 3.3%, 0.079 4.6%, 0.161 7.1%, 0.356 12.5%, 0.455 15.4%, 0.556 18.8%, 0.633 21.7%, 0.706 25%, 0.767 28.3%, 0.821 32.1%, 0.864 35.8%, 0.9 40%, 0.931 45%, 0.954 50.4%, 0.972 57.1%, 0.984 64.2%, 0.992 72.5%, 1);
    --nx-spring-soft-duration: 702ms;
    --nx-bg: #fcfbf8;
    --nx-bg-subtle: #f7f5ef;
    --nx-surface: #ffffff;
    --nx-surface-2: #f4f3ef;
    --nx-surface-3: #eae8e1;
    --nx-surface-inverse: #0a0c17;
    --nx-text-inverse: #f5f6fb;
    --nx-border: #e7e4dc;
    --nx-border-strong: #8f93a9;
    --nx-text: #12141f;
    --nx-text-muted: #555a70;
    --nx-text-subtle: #6c7088;
    --nx-accent: #5647e6;
    --nx-accent-hover: #4739ca;
    --nx-accent-text: #4a3dd6;
    --nx-accent-contrast: #ffffff;
    --nx-accent-soft: color-mix(in oklab, #5647e6 12%, transparent);
    --nx-accent-border: color-mix(in oklab, #5647e6 35%, transparent);
    --nx-gold: #f4a93c;
    --nx-gold-text: #9a5b0f;
    --nx-gold-contrast: #1a1206;
    --nx-gold-soft: color-mix(in oklab, #f4a93c 18%, transparent);
    --nx-glow: #06c7e3;
    --nx-success: #059669;
    --nx-success-text: #047857;
    --nx-success-soft: color-mix(in oklab, #10b981 14%, transparent);
    --nx-warning: #f59e0b;
    --nx-warning-text: #a45207;
    --nx-warning-soft: color-mix(in oklab, #f59e0b 16%, transparent);
    --nx-danger: #dc2626;
    --nx-danger-hover: #c02424;
    --nx-danger-text: #c02424;
    --nx-danger-soft: color-mix(in oklab, #ef4444 12%, transparent);
    --nx-info: #0aa0bb;
    --nx-info-text: #0b7288;
    --nx-info-soft: color-mix(in oklab, #06c7e3 14%, transparent);
    --nx-ring: #5647e6;
    --nx-backdrop: rgb(10 12 23 / 0.42);
    --nx-glass: rgb(255 255 255 / 0.72);
    --nx-glass-border: rgb(255 255 255 / 0.6);
    --nx-glass-tint: rgb(255 255 255 / 0.26);
    --nx-glass-tint-hover: rgb(255 255 255 / 0.4);
    --nx-glass-rim: rgb(255 255 255 / 0.95);
    --nx-glass-rim-soft: rgb(255 255 255 / 0.5);
    --nx-glass-edge: rgb(17 19 31 / 0.1);
    --nx-glass-shade: rgb(17 19 31 / 0.16);
    --nx-glass-sheen: rgb(255 255 255 / 0.5);
    --nx-skeleton: #ebe9e2;
    --nx-skeleton-shine: rgb(255 255 255 / 0.75);
    --nx-highlight: rgb(255 255 255 / 0.9);
    --nx-backdrop-intensity: 0.28;
    --nx-star: #8482fb;
    --nx-shadow-xs: 0 1px 2px rgb(17 19 31 / 0.06);
    --nx-shadow-sm: 0 1px 2px rgb(17 19 31 / 0.06), 0 2px 8px -2px rgb(17 19 31 / 0.08);
    --nx-shadow-md: 0 2px 4px rgb(17 19 31 / 0.04), 0 10px 24px -6px rgb(17 19 31 / 0.12);
    --nx-shadow-lg: 0 4px 8px rgb(17 19 31 / 0.04), 0 24px 48px -12px rgb(17 19 31 / 0.2);
    --nx-shadow-xl: 0 8px 16px rgb(17 19 31 / 0.05), 0 40px 80px -20px rgb(17 19 31 / 0.3);
    --nx-shadow-glow: 0 0 0 1px color-mix(in oklab, #5647e6 25%, transparent), 0 10px 32px -8px color-mix(in oklab, #5647e6 55%, transparent);
    --nx-chart-1: #5647e6;
    --nx-chart-2: #d6428a;
    --nx-chart-3: #b8870b;
    --nx-chart-4: #0f9fb4;
    --nx-chart-5: #e07a12;
    --nx-chart-6: #9a6bf0;
    --nx-chart-7: #1f9d57;
    --nx-chart-grid: #ebe9e3;
    --nx-gradient-brand:
      linear-gradient(
        135deg,
        #6a63f4,
        #7c3aed);
    --nx-gradient-text:
      linear-gradient(
        100deg,
        #4739ca,
        #7c3aed 45%,
        #0aa0bb);
    --nx-gradient-gold:
      linear-gradient(
        100deg,
        #f4a93c,
        #d98a1c);
    --nx-gradient-aurora:
      conic-gradient(
        from 210deg,
        #6a63f4,
        #8b5cf6,
        #2ee6fb,
        #ffc462,
        #6a63f4);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme=light], .light) {
      --nx-bg: #070812;
      --nx-bg-subtle: #0b0d19;
      --nx-surface: #0f1120;
      --nx-surface-2: #161a2c;
      --nx-surface-3: #1f2338;
      --nx-surface-inverse: #f5f6fb;
      --nx-text-inverse: #0a0c17;
      --nx-border: #23273f;
      --nx-border-strong: #5b6083;
      --nx-text: #eef0f8;
      --nx-text-muted: #a4a8bf;
      --nx-text-subtle: #80859e;
      --nx-accent: #6259f0;
      --nx-accent-hover: #8482fb;
      --nx-accent-text: #aeb1ff;
      --nx-accent-contrast: #ffffff;
      --nx-accent-soft: color-mix(in oklab, #6a63f4 20%, transparent);
      --nx-accent-border: color-mix(in oklab, #8482fb 40%, transparent);
      --nx-gold: #ffc462;
      --nx-gold-text: #ffcf7a;
      --nx-gold-contrast: #1a1206;
      --nx-gold-soft: color-mix(in oklab, #ffc462 16%, transparent);
      --nx-glow: #2ee6fb;
      --nx-success: #10b981;
      --nx-success-text: #3ddc97;
      --nx-success-soft: color-mix(in oklab, #10b981 18%, transparent);
      --nx-warning: #fbbf24;
      --nx-warning-text: #fbbf24;
      --nx-warning-soft: color-mix(in oklab, #fbbf24 16%, transparent);
      --nx-danger: #dc2626;
      --nx-danger-hover: #ef4444;
      --nx-danger-text: #ff7a7a;
      --nx-danger-soft: color-mix(in oklab, #ef4444 18%, transparent);
      --nx-info: #2ee6fb;
      --nx-info-text: #40e0f5;
      --nx-info-soft: color-mix(in oklab, #2ee6fb 16%, transparent);
      --nx-ring: #aeb1ff;
      --nx-backdrop: rgb(2 3 8 / 0.62);
      --nx-glass: rgb(18 21 36 / 0.62);
      --nx-glass-border: rgb(255 255 255 / 0.08);
      --nx-glass-tint: rgb(255 255 255 / 0.06);
      --nx-glass-tint-hover: rgb(255 255 255 / 0.11);
      --nx-glass-rim: rgb(255 255 255 / 0.62);
      --nx-glass-rim-soft: rgb(255 255 255 / 0.14);
      --nx-glass-edge: rgb(0 0 0 / 0.55);
      --nx-glass-shade: rgb(0 0 0 / 0.5);
      --nx-glass-sheen: rgb(255 255 255 / 0.12);
      --nx-skeleton: #191c2e;
      --nx-skeleton-shine: rgb(255 255 255 / 0.06);
      --nx-highlight: rgb(255 255 255 / 0.07);
      --nx-backdrop-intensity: 0.45;
      --nx-star: #ffffff;
      --nx-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
      --nx-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 8px -2px rgb(0 0 0 / 0.45);
      --nx-shadow-md: 0 2px 4px rgb(0 0 0 / 0.35), 0 12px 28px -6px rgb(0 0 0 / 0.55);
      --nx-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.35), 0 28px 56px -12px rgb(0 0 0 / 0.65);
      --nx-shadow-xl: 0 8px 16px rgb(0 0 0 / 0.4), 0 44px 88px -20px rgb(0 0 0 / 0.75);
      --nx-shadow-glow: 0 0 0 1px color-mix(in oklab, #8482fb 30%, transparent), 0 12px 40px -8px color-mix(in oklab, #6a63f4 70%, transparent);
      --nx-chart-1: #7c78f6;
      --nx-chart-2: #d9508f;
      --nx-chart-3: #b08812;
      --nx-chart-4: #159fb3;
      --nx-chart-5: #d27421;
      --nx-chart-6: #9270ea;
      --nx-chart-7: #27a05f;
      --nx-chart-grid: #20243a;
      --nx-gradient-brand:
        linear-gradient(
          135deg,
          #6a63f4,
          #7c3aed);
      --nx-gradient-text:
        linear-gradient(
          100deg,
          #a3a8ff,
          #c4b5fd 45%,
          #7df3ff);
      --nx-gradient-gold:
        linear-gradient(
          100deg,
          #ffd68a,
          #f4a93c);
      --nx-gradient-aurora:
        conic-gradient(
          from 210deg,
          #6a63f4,
          #8b5cf6,
          #2ee6fb,
          #ffc462,
          #6a63f4);
    }
  }
  [data-theme=dark],
  .dark {
    color-scheme: dark;
    --nx-bg: #070812;
    --nx-bg-subtle: #0b0d19;
    --nx-surface: #0f1120;
    --nx-surface-2: #161a2c;
    --nx-surface-3: #1f2338;
    --nx-surface-inverse: #f5f6fb;
    --nx-text-inverse: #0a0c17;
    --nx-border: #23273f;
    --nx-border-strong: #5b6083;
    --nx-text: #eef0f8;
    --nx-text-muted: #a4a8bf;
    --nx-text-subtle: #80859e;
    --nx-accent: #6259f0;
    --nx-accent-hover: #8482fb;
    --nx-accent-text: #aeb1ff;
    --nx-accent-contrast: #ffffff;
    --nx-accent-soft: color-mix(in oklab, #6a63f4 20%, transparent);
    --nx-accent-border: color-mix(in oklab, #8482fb 40%, transparent);
    --nx-gold: #ffc462;
    --nx-gold-text: #ffcf7a;
    --nx-gold-contrast: #1a1206;
    --nx-gold-soft: color-mix(in oklab, #ffc462 16%, transparent);
    --nx-glow: #2ee6fb;
    --nx-success: #10b981;
    --nx-success-text: #3ddc97;
    --nx-success-soft: color-mix(in oklab, #10b981 18%, transparent);
    --nx-warning: #fbbf24;
    --nx-warning-text: #fbbf24;
    --nx-warning-soft: color-mix(in oklab, #fbbf24 16%, transparent);
    --nx-danger: #dc2626;
    --nx-danger-hover: #ef4444;
    --nx-danger-text: #ff7a7a;
    --nx-danger-soft: color-mix(in oklab, #ef4444 18%, transparent);
    --nx-info: #2ee6fb;
    --nx-info-text: #40e0f5;
    --nx-info-soft: color-mix(in oklab, #2ee6fb 16%, transparent);
    --nx-ring: #aeb1ff;
    --nx-backdrop: rgb(2 3 8 / 0.62);
    --nx-glass: rgb(18 21 36 / 0.62);
    --nx-glass-border: rgb(255 255 255 / 0.08);
    --nx-glass-tint: rgb(255 255 255 / 0.06);
    --nx-glass-tint-hover: rgb(255 255 255 / 0.11);
    --nx-glass-rim: rgb(255 255 255 / 0.62);
    --nx-glass-rim-soft: rgb(255 255 255 / 0.14);
    --nx-glass-edge: rgb(0 0 0 / 0.55);
    --nx-glass-shade: rgb(0 0 0 / 0.5);
    --nx-glass-sheen: rgb(255 255 255 / 0.12);
    --nx-skeleton: #191c2e;
    --nx-skeleton-shine: rgb(255 255 255 / 0.06);
    --nx-highlight: rgb(255 255 255 / 0.07);
    --nx-backdrop-intensity: 0.45;
    --nx-star: #ffffff;
    --nx-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
    --nx-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4), 0 2px 8px -2px rgb(0 0 0 / 0.45);
    --nx-shadow-md: 0 2px 4px rgb(0 0 0 / 0.35), 0 12px 28px -6px rgb(0 0 0 / 0.55);
    --nx-shadow-lg: 0 4px 8px rgb(0 0 0 / 0.35), 0 28px 56px -12px rgb(0 0 0 / 0.65);
    --nx-shadow-xl: 0 8px 16px rgb(0 0 0 / 0.4), 0 44px 88px -20px rgb(0 0 0 / 0.75);
    --nx-shadow-glow: 0 0 0 1px color-mix(in oklab, #8482fb 30%, transparent), 0 12px 40px -8px color-mix(in oklab, #6a63f4 70%, transparent);
    --nx-chart-1: #7c78f6;
    --nx-chart-2: #d9508f;
    --nx-chart-3: #b08812;
    --nx-chart-4: #159fb3;
    --nx-chart-5: #d27421;
    --nx-chart-6: #9270ea;
    --nx-chart-7: #27a05f;
    --nx-chart-grid: #20243a;
    --nx-gradient-brand:
      linear-gradient(
        135deg,
        #6a63f4,
        #7c3aed);
    --nx-gradient-text:
      linear-gradient(
        100deg,
        #a3a8ff,
        #c4b5fd 45%,
        #7df3ff);
    --nx-gradient-gold:
      linear-gradient(
        100deg,
        #ffd68a,
        #f4a93c);
    --nx-gradient-aurora:
      conic-gradient(
        from 210deg,
        #6a63f4,
        #8b5cf6,
        #2ee6fb,
        #ffc462,
        #6a63f4);
  }
  [data-theme=light],
  .light {
    color-scheme: light;
    --nx-bg: #fcfbf8;
    --nx-bg-subtle: #f7f5ef;
    --nx-surface: #ffffff;
    --nx-surface-2: #f4f3ef;
    --nx-surface-3: #eae8e1;
    --nx-surface-inverse: #0a0c17;
    --nx-text-inverse: #f5f6fb;
    --nx-border: #e7e4dc;
    --nx-border-strong: #8f93a9;
    --nx-text: #12141f;
    --nx-text-muted: #555a70;
    --nx-text-subtle: #6c7088;
    --nx-accent: #5647e6;
    --nx-accent-hover: #4739ca;
    --nx-accent-text: #4a3dd6;
    --nx-accent-contrast: #ffffff;
    --nx-accent-soft: color-mix(in oklab, #5647e6 12%, transparent);
    --nx-accent-border: color-mix(in oklab, #5647e6 35%, transparent);
    --nx-gold: #f4a93c;
    --nx-gold-text: #9a5b0f;
    --nx-gold-contrast: #1a1206;
    --nx-gold-soft: color-mix(in oklab, #f4a93c 18%, transparent);
    --nx-glow: #06c7e3;
    --nx-success: #059669;
    --nx-success-text: #047857;
    --nx-success-soft: color-mix(in oklab, #10b981 14%, transparent);
    --nx-warning: #f59e0b;
    --nx-warning-text: #a45207;
    --nx-warning-soft: color-mix(in oklab, #f59e0b 16%, transparent);
    --nx-danger: #dc2626;
    --nx-danger-hover: #c02424;
    --nx-danger-text: #c02424;
    --nx-danger-soft: color-mix(in oklab, #ef4444 12%, transparent);
    --nx-info: #0aa0bb;
    --nx-info-text: #0b7288;
    --nx-info-soft: color-mix(in oklab, #06c7e3 14%, transparent);
    --nx-ring: #5647e6;
    --nx-backdrop: rgb(10 12 23 / 0.42);
    --nx-glass: rgb(255 255 255 / 0.72);
    --nx-glass-border: rgb(255 255 255 / 0.6);
    --nx-glass-tint: rgb(255 255 255 / 0.26);
    --nx-glass-tint-hover: rgb(255 255 255 / 0.4);
    --nx-glass-rim: rgb(255 255 255 / 0.95);
    --nx-glass-rim-soft: rgb(255 255 255 / 0.5);
    --nx-glass-edge: rgb(17 19 31 / 0.1);
    --nx-glass-shade: rgb(17 19 31 / 0.16);
    --nx-glass-sheen: rgb(255 255 255 / 0.5);
    --nx-skeleton: #ebe9e2;
    --nx-skeleton-shine: rgb(255 255 255 / 0.75);
    --nx-highlight: rgb(255 255 255 / 0.9);
    --nx-backdrop-intensity: 0.28;
    --nx-star: #8482fb;
    --nx-shadow-xs: 0 1px 2px rgb(17 19 31 / 0.06);
    --nx-shadow-sm: 0 1px 2px rgb(17 19 31 / 0.06), 0 2px 8px -2px rgb(17 19 31 / 0.08);
    --nx-shadow-md: 0 2px 4px rgb(17 19 31 / 0.04), 0 10px 24px -6px rgb(17 19 31 / 0.12);
    --nx-shadow-lg: 0 4px 8px rgb(17 19 31 / 0.04), 0 24px 48px -12px rgb(17 19 31 / 0.2);
    --nx-shadow-xl: 0 8px 16px rgb(17 19 31 / 0.05), 0 40px 80px -20px rgb(17 19 31 / 0.3);
    --nx-shadow-glow: 0 0 0 1px color-mix(in oklab, #5647e6 25%, transparent), 0 10px 32px -8px color-mix(in oklab, #5647e6 55%, transparent);
    --nx-chart-1: #5647e6;
    --nx-chart-2: #d6428a;
    --nx-chart-3: #b8870b;
    --nx-chart-4: #0f9fb4;
    --nx-chart-5: #e07a12;
    --nx-chart-6: #9a6bf0;
    --nx-chart-7: #1f9d57;
    --nx-chart-grid: #ebe9e3;
    --nx-gradient-brand:
      linear-gradient(
        135deg,
        #6a63f4,
        #7c3aed);
    --nx-gradient-text:
      linear-gradient(
        100deg,
        #4739ca,
        #7c3aed 45%,
        #0aa0bb);
    --nx-gradient-gold:
      linear-gradient(
        100deg,
        #f4a93c,
        #d98a1c);
    --nx-gradient-aurora:
      conic-gradient(
        from 210deg,
        #6a63f4,
        #8b5cf6,
        #2ee6fb,
        #ffc462,
        #6a63f4);
  }
  @media (prefers-reduced-motion: reduce) {
    :root {
      --nx-motion: 0;
      --nx-dur-slow: 160ms;
      --nx-dur-slower: 200ms;
      --nx-spring-snappy: cubic-bezier(0.16, 1, 0.3, 1);
      --nx-spring-snappy-duration: 180ms;
      --nx-spring-gentle: cubic-bezier(0.16, 1, 0.3, 1);
      --nx-spring-gentle-duration: 180ms;
      --nx-spring-bouncy: cubic-bezier(0.16, 1, 0.3, 1);
      --nx-spring-bouncy-duration: 180ms;
      --nx-spring-soft: cubic-bezier(0.16, 1, 0.3, 1);
      --nx-spring-soft-duration: 180ms;
    }
  }
}

/* src/css/base.css */
@layer nx.base {
  :where(html) {
    font-family: var(--nx-font-sans);
    line-height: 1.6;
    color: var(--nx-text);
    background-color: var(--nx-bg);
    accent-color: var(--nx-accent);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-size-adjust: 100%;
    scrollbar-color: var(--nx-border-strong) transparent;
  }
  :where([class^=nx-], [class*=" nx-"]),
  :where([class^=nx-], [class*=" nx-"])::before,
  :where([class^=nx-], [class*=" nx-"])::after {
    box-sizing: border-box;
  }
  [x-cloak] {
    display: none !important;
  }
  :where(:lang(fa), :lang(ar), :lang(ur)) {
    --nx-font-sans:
      "Vazirmatn",
      "Inter",
      ui-sans-serif,
      system-ui,
      sans-serif;
    --nx-font-display:
      "Vazirmatn",
      "Bricolage Grotesque",
      ui-sans-serif,
      system-ui,
      sans-serif;
    --nx-tracking-tightest: 0;
    --nx-tracking-tighter: 0;
    --nx-tracking-tight: 0;
    --nx-tracking-wide: 0;
    --nx-tracking-wider: 0;
  }
  :where(html:lang(fa), html:lang(ar), html:lang(ur)) {
    line-height: 1.8;
  }
  :where(html) {
    --nx-dir: 1;
  }
  :where([dir=rtl]) {
    --nx-dir: -1;
  }
  :where([dir=ltr]) {
    --nx-dir: 1;
  }
  ::selection {
    background-color: var(--nx-accent-soft);
    color: inherit;
  }
  :where(.nx-visually-hidden):where(:not(:focus-within, :active)) {
    position: absolute !important;
    inset-inline-start: 0;
    contain: size;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: nowrap !important;
  }
  @media (pointer: coarse) {
    :where(.nx-chip-remove, .nx-multiselect-chip-remove, .nx-taginput-chip-remove, .nx-json-toggle, .nx-stream-cite, .nx-diff-view, .nx-terminal-filter, .nx-promo-bar-link) {
      position: relative;
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        inline-size: max(100%, 2.75rem);
        block-size: max(100%, 2.75rem);
        translate: -50% -50%;
      }
    }
  }
  :where(table.nx-visually-hidden):where(:not(:focus-within, :active)) {
    table-layout: fixed !important;
    position: fixed !important;
    inset-inline-start: 0;
  }
  .nx-icon {
    inline-size: 1.15em;
    block-size: 1.15em;
    flex: none;
    stroke-width: 1.75;
  }
  :where([dir=rtl]) .nx-icon[data-directional] {
    scale: -1 1;
  }
  :where(.nx-focus-ring):focus-visible {
    outline: 2px solid var(--nx-ring);
    outline-offset: 2px;
  }
  :where(.nx-skip-link) {
    position: fixed;
    inset-block-start: var(--nx-space-3);
    inset-inline-start: var(--nx-space-3);
    z-index: var(--nx-z-tooltip);
    padding: var(--nx-space-2) var(--nx-space-4);
    border-radius: var(--nx-radius-sm);
    background: var(--nx-surface-inverse);
    color: var(--nx-text-inverse);
  }
  @media (forced-colors: active) {
    :where(.nx-focus-ring):focus-visible {
      outline-color: Highlight;
    }
  }
}

/* src/css/motion.css */
@layer nx.base {
  @property --nx-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
  @keyframes nx-fade-in {
    from {
      opacity: 0;
    }
  }
  @keyframes nx-fade-out {
    to {
      opacity: 0;
    }
  }
  @keyframes nx-rise {
    from {
      opacity: 0;
      translate: 0 calc(14px * var(--nx-motion));
    }
  }
  @keyframes nx-sink {
    from {
      opacity: 0;
      translate: 0 calc(-14px * var(--nx-motion));
    }
  }
  @keyframes nx-scale-in {
    from {
      opacity: 0;
      scale: calc(1 - 0.06 * var(--nx-motion));
    }
  }
  @keyframes nx-blur-in {
    from {
      opacity: 0;
      filter: blur(calc(10px * var(--nx-motion)));
      translate: 0 calc(10px * var(--nx-motion));
    }
  }
  @keyframes nx-spin {
    to {
      rotate: 1turn;
    }
  }
  @keyframes nx-turn {
    to {
      --nx-angle: 360deg;
    }
  }
  @keyframes nx-pulse {
    50% {
      opacity: 0.45;
    }
  }
  @keyframes nx-ping {
    75%, 100% {
      scale: 2.4;
      opacity: 0;
    }
  }
  @keyframes nx-float {
    50% {
      translate: 0 calc(-6px * var(--nx-motion));
    }
  }
  @keyframes nx-pop {
    40% {
      scale: calc(1 + 0.22 * var(--nx-motion));
    }
  }
  @keyframes nx-shake {
    20%, 60% {
      translate: calc(-5px * var(--nx-motion)) 0;
    }
    40%, 80% {
      translate: calc(5px * var(--nx-motion)) 0;
    }
  }
  @keyframes nx-sheen {
    from {
      background-position: 200% 0;
    }
    to {
      background-position: -100% 0;
    }
  }
  @keyframes nx-draw {
    to {
      stroke-dashoffset: 0;
    }
  }
  [data-nx-reveal] {
    transition:
      opacity var(--nx-dur-slower) var(--nx-ease-out),
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      scale var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      filter var(--nx-dur-slower) var(--nx-ease-out);
    transition-delay: calc(var(--nx-i, 0) * var(--nx-stagger) + var(--nx-delay, 0ms));
  }
  :where(.nx-js) [data-nx-reveal]:not([data-nx-revealed]) {
    opacity: 0;
    translate: 0 calc(18px * var(--nx-motion));
  }
  :where(.nx-js) [data-nx-reveal=fade]:not([data-nx-revealed]) {
    translate: none;
  }
  :where(.nx-js) [data-nx-reveal=scale]:not([data-nx-revealed]) {
    translate: none;
    scale: calc(1 - 0.08 * var(--nx-motion));
  }
  :where(.nx-js) [data-nx-reveal=blur]:not([data-nx-revealed]) {
    filter: blur(calc(10px * var(--nx-motion)));
  }
  :where(.nx-js) [data-nx-reveal=start]:not([data-nx-revealed]) {
    translate: calc(-24px * var(--nx-dir) * var(--nx-motion)) 0;
  }
  :where(.nx-js) [data-nx-reveal=end]:not([data-nx-revealed]) {
    translate: calc(24px * var(--nx-dir) * var(--nx-motion)) 0;
  }
  [data-nx-reveal=group] {
    transition: none;
  }
  [data-nx-reveal=group] > * {
    transition:
      opacity var(--nx-dur-slower) var(--nx-ease-out),
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      filter var(--nx-dur-slower) var(--nx-ease-out);
    transition-delay: calc(var(--nx-i, 0) * var(--nx-stagger) + var(--nx-delay, 0ms));
  }
  :where(.nx-js) [data-nx-reveal=group]:not([data-nx-revealed]) {
    opacity: 1;
    translate: none;
  }
  :where(.nx-js) [data-nx-reveal=group]:not([data-nx-revealed]) > * {
    opacity: 0;
    translate: 0 calc(18px * var(--nx-motion));
  }
  @keyframes nx-reveal-failsafe {
    to {
      opacity: 1;
      translate: none;
      scale: none;
      filter: none;
    }
  }
  :where(.nx-js:not(.nx-live)) [data-nx-reveal]:not([data-nx-revealed]),
  :where(.nx-js:not(.nx-live)) [data-nx-reveal=group]:not([data-nx-revealed]) > * {
    animation: nx-reveal-failsafe 1ms 2.5s forwards;
  }
  [data-nx-magnetic],
  [data-nx-tilt] {
    transition: transform var(--nx-transform-duration, var(--nx-spring-gentle-duration)) var(--nx-transform-ease, var(--nx-spring-gentle));
  }
  [data-nx-magnetic] {
    transform: translate(var(--nx-mx, 0px), var(--nx-my, 0px));
  }
  [data-nx-tilt] {
    transform: perspective(900px) rotateX(var(--nx-rx, 0deg)) rotateY(var(--nx-ry, 0deg));
    transform-style: preserve-3d;
  }
  [data-nx-pointer] {
    --nx-transform-duration: 140ms;
    --nx-transform-ease: var(--nx-ease-out);
  }
  .nx-page {
    view-transition-name: nx-page;
  }
  @keyframes nx-vt-out {
    to {
      opacity: 0;
      translate: 0 calc(-8px * var(--nx-motion));
      filter: blur(calc(3px * var(--nx-motion)));
    }
  }
  @keyframes nx-vt-in {
    from {
      opacity: 0;
      translate: 0 calc(14px * var(--nx-motion));
      filter: blur(calc(6px * var(--nx-motion)));
    }
  }
  @keyframes nx-vt-zoom-out {
    to {
      opacity: 0;
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
  }
  @keyframes nx-vt-zoom-in {
    from {
      opacity: 0;
      scale: calc(1 + 0.04 * var(--nx-motion));
    }
  }
  @keyframes nx-vt-to-start {
    to {
      opacity: 0;
      translate: calc(-12% * var(--nx-dir) * var(--nx-motion)) 0;
    }
  }
  @keyframes nx-vt-from-end {
    from {
      opacity: 0;
      translate: calc(12% * var(--nx-dir) * var(--nx-motion)) 0;
    }
  }
  @keyframes nx-vt-to-end {
    to {
      opacity: 0;
      translate: calc(12% * var(--nx-dir) * var(--nx-motion)) 0;
    }
  }
  @keyframes nx-vt-from-start {
    from {
      opacity: 0;
      translate: calc(-12% * var(--nx-dir) * var(--nx-motion)) 0;
    }
  }
  ::view-transition-old(nx-page) {
    animation: var(--nx-dur-base) var(--nx-ease-in) both nx-fade-out;
  }
  ::view-transition-new(nx-page) {
    animation: var(--nx-dur-slow) var(--nx-ease-out) both nx-fade-in;
  }
  :root[data-nx-transition=rise]::view-transition-old(nx-page) {
    animation-name: nx-vt-out;
  }
  :root[data-nx-transition=rise]::view-transition-new(nx-page) {
    animation-name: nx-vt-in;
    animation-timing-function: var(--nx-spring-soft);
    animation-duration: var(--nx-spring-soft-duration);
  }
  :root[data-nx-transition=zoom]::view-transition-old(nx-page) {
    animation-name: nx-vt-zoom-out;
  }
  :root[data-nx-transition=zoom]::view-transition-new(nx-page) {
    animation-name: nx-vt-zoom-in;
  }
  :root[data-nx-transition=slide]:active-view-transition-type(forward)::view-transition-old(nx-page) {
    animation-name: nx-vt-to-start;
  }
  :root[data-nx-transition=slide]:active-view-transition-type(forward)::view-transition-new(nx-page) {
    animation-name: nx-vt-from-end;
  }
  :root[data-nx-transition=slide]:active-view-transition-type(back)::view-transition-old(nx-page) {
    animation-name: nx-vt-to-end;
  }
  :root[data-nx-transition=slide]:active-view-transition-type(back)::view-transition-new(nx-page) {
    animation-name: nx-vt-from-start;
  }
  .nx-page[data-nx-entering] {
    animation: nx-vt-in var(--nx-dur-slow) var(--nx-ease-out) both;
  }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
      animation: none !important;
    }
    .nx-page[data-nx-entering] {
      animation-name: nx-fade-in;
    }
  }
}

/* src/css/components/text.css */
@layer nx.components {
  .nx-gradient-text {
    background: var(--nx-gradient-text);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    &[data-variant=gold] {
      background-image: var(--nx-gradient-gold);
    }
    &[data-variant=brand] {
      background-image: var(--nx-gradient-brand);
    }
    &[data-animate] {
      animation: nx-gradient-flow 6s var(--nx-ease-in-out) infinite alternate;
    }
  }
  @keyframes nx-gradient-flow {
    to {
      background-position: 100% 0;
    }
  }
  .nx-shimmer {
    --_base: var(--nx-text-subtle);
    --_shine: var(--nx-text);
    background:
      linear-gradient(
        100deg,
        var(--_base) 35%,
        var(--_shine) 50%,
        var(--_base) 65%) 0 0 / 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: nx-sheen var(--nx-shimmer-duration, 2.4s) linear infinite;
    &[data-variant=wave] {
      background: none;
      color: var(--_base);
      animation: none;
    }
  }
  .nx-shimmer[data-variant=wave] .nx-text-piece {
    display: inline-block;
    white-space: pre;
    animation: nx-wave var(--nx-shimmer-duration, 2.4s) var(--nx-ease-in-out) infinite;
    animation-delay: calc(var(--nx-i, 0) * 70ms);
  }
  @keyframes nx-wave {
    0%, 60%, 100% {
      translate: 0;
      color: var(--_base);
    }
    30% {
      translate: 0 calc(-0.18em * var(--nx-motion));
      color: var(--_shine);
    }
  }
  .nx-text-reveal {
    &[data-nx-reveal] {
      transition: none;
      opacity: 1;
      translate: none;
      filter: none;
    }
    .nx-text-piece {
      display: inline-block;
      white-space: pre;
      transition:
        opacity var(--nx-dur-slower) var(--nx-ease-out),
        translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
        filter var(--nx-dur-slower) var(--nx-ease-out);
      transition-delay: calc(var(--nx-i, 0) * var(--nx-text-stagger, 35ms) + var(--nx-delay, 0ms));
    }
    &[data-by=char] .nx-text-piece {
      --nx-text-stagger: 18ms;
    }
  }
  :where(.nx-js) .nx-text-reveal[data-nx-reveal]:not([data-nx-revealed]) .nx-text-piece {
    opacity: 0;
    translate: 0 calc(0.45em * var(--nx-motion));
    filter: blur(calc(8px * var(--nx-motion)));
  }
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .nx-text-reveal[data-trigger=scroll] {
      view-timeline: --nx-text-scroll block;
      .nx-text-piece {
        opacity: 1;
        filter: none;
        translate: none;
        transition: none;
        animation: nx-word-light linear both;
        animation-timeline: --nx-text-scroll;
        animation-range: cover calc(10% + var(--nx-i) * var(--nx-scroll-step, 1.5%)) cover calc(30% + var(--nx-i) * var(--nx-scroll-step, 1.5%));
      }
    }
  }
  @keyframes nx-word-light {
    from {
      opacity: 0.18;
    }
  }
  .nx-scramble {
    font-variant-numeric: tabular-nums;
    [data-scrambling] {
      color: var(--nx-scramble-color, var(--nx-accent-text));
    }
  }
  .nx-word-rotate {
    display: inline-grid;
    vertical-align: bottom;
    inline-size: var(--nx-word-width, auto);
    transition: inline-size var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    overflow: clip;
    overflow-clip-margin: 0.2em;
  }
  .nx-word-rotate-word {
    grid-area: 1 / 1;
    white-space: nowrap;
    color: var(--nx-word-color, inherit);
    &[data-state=enter] {
      animation: nx-word-in var(--nx-spring-gentle-duration) var(--nx-spring-gentle) both;
    }
    &[data-state=exit] {
      animation: nx-word-out var(--nx-dur-slow) var(--nx-ease-in) both;
    }
  }
  @keyframes nx-word-in {
    from {
      opacity: 0;
      translate: 0 calc(0.7em * var(--nx-motion));
      filter: blur(calc(6px * var(--nx-motion)));
    }
  }
  @keyframes nx-word-out {
    to {
      opacity: 0;
      translate: 0 calc(-0.7em * var(--nx-motion));
      filter: blur(calc(6px * var(--nx-motion)));
    }
  }
  .nx-number {
    display: inline-flex;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }
  .nx-number-roll {
    display: inline-flex;
    direction: ltr;
  }
  .nx-digit {
    display: inline-block;
    block-size: 1.1em;
    overflow: clip;
    text-align: center;
  }
  .nx-digit-track {
    display: flex;
    flex-direction: column;
    translate: 0 calc(var(--d, 0) * -1.1em);
    transition: translate var(--nx-number-duration, var(--nx-spring-gentle-duration)) var(--nx-spring-gentle);
    transition-delay: calc(var(--nx-p, 0) * 40ms);
    > span {
      block-size: 1.1em;
    }
  }
  :where(.nx-js) [data-nx-reveal]:not([data-nx-revealed]) .nx-digit-track,
  :where(.nx-js) .nx-number[data-nx-reveal]:not([data-nx-revealed]) .nx-digit-track {
    translate: 0 0;
  }
  .nx-number[data-nx-reveal] {
    opacity: 1;
    translate: none;
  }
  .nx-highlight {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    isolation: isolate;
    --_color: var(--nx-highlight-color, var(--nx-gold));
  }
  .nx-highlight-mark {
    position: absolute;
    inset-inline-start: -4%;
    inset-block-end: -0.28em;
    inline-size: 108%;
    block-size: 0.5em;
    overflow: visible;
    z-index: -1;
    fill: none;
    stroke: var(--_color);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 900ms var(--nx-ease-out) calc(var(--nx-delay, 0ms) + 150ms);
  }
  .nx-highlight[data-variant=circle] .nx-highlight-mark {
    inset-block: -18% auto;
    inset-inline-start: -8%;
    inline-size: 116%;
    block-size: 136%;
    stroke-width: 2.5;
  }
  .nx-highlight[data-variant=marker] {
    .nx-highlight-mark {
      display: none;
    }
    background: linear-gradient(var(--nx-gold-soft), var(--nx-gold-soft)) no-repeat 0 85% / 100% 45%;
    transition: background-size 800ms var(--nx-ease-out) calc(var(--nx-delay, 0ms) + 150ms);
  }
  :where(.nx-js) .nx-highlight[data-nx-reveal]:not([data-nx-revealed]) {
    opacity: 1;
    translate: none;
    .nx-highlight-mark {
      stroke-dashoffset: 1;
    }
    &[data-variant=marker] {
      background-size: 0% 45%;
    }
  }
  :where([dir=rtl]) .nx-highlight[data-variant=marker] {
    background-position: 100% 85%;
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-shimmer,
    .nx-gradient-text[data-animate],
    .nx-shimmer[data-variant=wave] .nx-text-piece {
      animation: none;
    }
    .nx-shimmer {
      color: var(--_base);
      background: none;
    }
  }
}

/* src/css/components/button.css */
@layer nx.components {
  .nx-button {
    --_h: 2.5rem;
    --_px: 1rem;
    --_fs: var(--nx-text-sm);
    --_radius: var(--nx-radius-md);
    --_bg: var(--nx-surface-2);
    --_bg-hover: var(--nx-surface-3);
    --_fg: var(--nx-text);
    --_border: var(--nx-border);
    --_shadow: var(--nx-shadow-xs);
    position: relative;
    isolation: isolate;
    display: inline-grid;
    grid-template-areas: "stack";
    place-items: center;
    min-block-size: var(--_h);
    padding-inline: var(--_px);
    border: 1px solid var(--_border);
    border-radius: var(--_radius);
    background: var(--_bg);
    color: var(--_fg);
    box-shadow: var(--_shadow);
    font: 600 var(--_fs) / 1.2 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tight);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    overflow: clip;
    transition:
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      border-color var(--nx-dur-fast) var(--nx-ease-out),
      color var(--nx-dur-fast) var(--nx-ease-out),
      box-shadow var(--nx-dur-base) var(--nx-ease-out),
      translate var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      transform var(--nx-transform-duration, var(--nx-spring-gentle-duration)) var(--nx-transform-ease, var(--nx-spring-gentle));
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:hover:not(:disabled, [aria-disabled=true]) {
      background: var(--_bg-hover);
    }
    &:active:not(:disabled, [aria-disabled=true]) {
      scale: calc(1 - 0.03 * var(--nx-motion));
    }
    &:is(:disabled, [aria-disabled=true]) {
      cursor: not-allowed;
      opacity: 0.5;
      box-shadow: none;
    }
    &[data-block] {
      display: grid;
      inline-size: 100%;
    }
    &[data-shape=pill] {
      --_radius: var(--nx-radius-full);
    }
    &[data-shape=square] {
      --_radius: var(--nx-radius-xs);
    }
    &[data-size=xs] {
      --_h: 1.75rem;
      --_px: 0.625rem;
      --_fs: var(--nx-text-xs);
      --_radius: var(--nx-radius-sm);
    }
    &[data-size=sm] {
      --_h: 2.125rem;
      --_px: 0.8rem;
      --_fs: var(--nx-text-sm);
      --_radius: var(--nx-radius-sm);
    }
    &[data-size=lg] {
      --_h: 3rem;
      --_px: 1.4rem;
      --_fs: var(--nx-text-md);
      --_radius: var(--nx-radius-lg);
    }
    &[data-size=xl] {
      --_h: 3.5rem;
      --_px: 1.75rem;
      --_fs: var(--nx-text-lg);
      --_radius: var(--nx-radius-lg);
    }
    &[data-shape=pill][data-size] {
      --_radius: var(--nx-radius-full);
    }
    &[data-icon-only] {
      --_px: 0;
      inline-size: var(--_h);
    }
    &[data-variant=primary] {
      --_bg:
        linear-gradient(
          180deg,
          color-mix(in oklab, var(--nx-accent) 86%, white),
          var(--nx-accent));
      --_bg-hover:
        linear-gradient(
          180deg,
          color-mix(in oklab, var(--nx-accent-hover) 84%, white),
          var(--nx-accent-hover));
      --_fg: var(--nx-accent-contrast);
      --_border: color-mix(in oklab, var(--nx-accent) 70%, black);
      --_shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.22),
        0 1px 2px rgb(0 0 0 / 0.12),
        0 6px 16px -6px color-mix(in oklab, var(--nx-accent) 70%, transparent);
    }
    &[data-variant=secondary] {
      --_bg: var(--nx-surface);
      --_bg-hover: var(--nx-surface-2);
      --_shadow: var(--nx-shadow-sm), inset 0 1px 0 var(--nx-highlight);
    }
    &[data-variant=outline] {
      --_bg: transparent;
      --_bg-hover: var(--nx-accent-soft);
      --_border: var(--nx-border-strong);
      --_shadow: none;
    }
    &[data-variant=ghost] {
      --_bg: transparent;
      --_bg-hover: var(--nx-surface-2);
      --_border: transparent;
      --_shadow: none;
    }
    &[data-variant=danger] {
      --_bg: var(--nx-danger);
      --_bg-hover: var(--nx-danger-hover);
      --_fg: #fff;
      --_border: transparent;
      --_shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 6px 16px -6px color-mix(in oklab, var(--nx-danger) 70%, transparent);
    }
    &[data-variant=gold] {
      --_bg: var(--nx-gradient-gold);
      --_bg-hover: var(--nx-gradient-gold);
      --_fg: var(--nx-gold-contrast);
      --_border: color-mix(in oklab, var(--nx-gold) 70%, black);
      --_shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 6px 18px -6px color-mix(in oklab, var(--nx-gold) 80%, transparent);
    }
    &[data-variant=inverse] {
      --_bg: var(--nx-surface-inverse);
      --_bg-hover: color-mix(in oklab, var(--nx-surface-inverse) 88%, var(--nx-accent));
      --_fg: var(--nx-text-inverse);
      --_border: transparent;
    }
    &[data-variant=link] {
      --_bg: transparent;
      --_bg-hover: transparent;
      --_fg: var(--nx-accent-text);
      --_border: transparent;
      --_shadow: none;
      --_px: 0;
      min-block-size: auto;
      &:hover .nx-button-label {
        text-decoration: underline;
        text-underline-offset: 0.2em;
      }
    }
    &[data-variant=glow] {
      --_beam:
        conic-gradient(
          from var(--nx-angle),
          transparent 15%,
          var(--nx-cyan-400),
          var(--nx-lapis-500),
          var(--nx-violet-500),
          transparent 85%) border-box;
      --_bg: linear-gradient(var(--nx-surface), var(--nx-surface)) padding-box, var(--_beam);
      --_bg-hover: linear-gradient(var(--nx-surface-2), var(--nx-surface-2)) padding-box, var(--_beam);
      --_border: transparent;
      --_shadow: var(--nx-shadow-glow);
      border-width: 1.5px;
      animation: nx-turn 3.2s linear infinite;
    }
    &:is([data-variant=primary], [data-variant=danger], [data-variant=gold], [data-variant=glow], [data-variant=inverse]):hover:not(:disabled, [aria-disabled=true]) {
      translate: 0 calc(-1px * var(--nx-motion));
    }
  }
  .nx-button-label,
  .nx-button-status {
    grid-area: stack;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    transition:
      opacity var(--nx-dur-base) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      filter var(--nx-dur-base) var(--nx-ease-out),
      translate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
  }
  .nx-button-status {
    opacity: 0;
    scale: 0.6;
    filter: blur(4px);
    pointer-events: none;
    .nx-icon {
      inline-size: 1.25em;
      block-size: 1.25em;
    }
    > * {
      grid-area: 1 / 1;
      display: none;
    }
  }
  .nx-button:is([data-status=loading], [data-status=success], [data-status=error], [data-loading], [aria-busy=true]) {
    .nx-button-label {
      opacity: 0;
      scale: 0.85;
      filter: blur(4px);
    }
    .nx-button-status {
      opacity: 1;
      scale: 1;
      filter: none;
    }
  }
  .nx-button:is([data-status=loading], [data-loading], [aria-busy=true]) {
    cursor: progress;
    .nx-button-status > .nx-spinner {
      display: inline-block;
    }
  }
  .nx-button[data-status=success] {
    --_bg: var(--nx-success);
    --_bg-hover: var(--nx-success);
    --_fg: #fff;
    --_border: transparent;
    .nx-button-status > .nx-status-check {
      display: block;
    }
  }
  .nx-button[data-status=error] {
    animation: nx-shake 420ms var(--nx-ease-out);
    .nx-button-status > .nx-status-cross {
      display: block;
    }
  }
  .nx-button-status .nx-status-check,
  .nx-button-status .nx-status-cross {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  .nx-button[data-status=success] .nx-status-check,
  .nx-button[data-status=error] .nx-status-cross {
    animation: nx-draw 420ms var(--nx-ease-out) 80ms forwards;
  }
  .nx-button[data-effect=shine]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(
        115deg,
        transparent 30%,
        rgb(255 255 255 / 0.35) 45%,
        rgb(255 255 255 / 0.05) 55%,
        transparent 70%) no-repeat;
    background-size: 250% 100%;
    background-position: 150% 0;
    pointer-events: none;
  }
  .nx-button[data-effect=shine]:hover::after {
    background-position: -100% 0;
    transition: background-position 900ms var(--nx-ease-out);
  }
  .nx-button[data-effect=slide] .nx-button-label {
    position: relative;
    overflow: clip;
    > * {
      transition: translate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    }
    &::after {
      content: attr(data-text) / "";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      translate: 0 110%;
      transition: translate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    }
  }
  .nx-button[data-effect=slide] .nx-button-label > .nx-button-text {
    display: inline-block;
  }
  .nx-button[data-effect=slide]:hover .nx-button-label {
    > * {
      translate: 0 calc(-110% * var(--nx-motion));
    }
    &::after {
      translate: 0 calc(110% - 110% * var(--nx-motion));
    }
  }
  .nx-ripple {
    position: absolute;
    z-index: -1;
    inline-size: var(--nx-ripple-size);
    block-size: var(--nx-ripple-size);
    inset-block-start: var(--nx-ripple-y);
    left: var(--nx-ripple-x);
    border-radius: 50%;
    background: currentColor;
    opacity: 0.18;
    translate: -50% -50%;
    scale: 0;
    pointer-events: none;
    animation: nx-ripple 650ms var(--nx-ease-out) forwards;
  }
  @keyframes nx-ripple {
    to {
      scale: 1;
      opacity: 0;
    }
  }
  .nx-copy {
    .nx-copy-icons {
      display: inline-grid;
    }
    .nx-copy-icons > * {
      grid-area: 1 / 1;
      transition:
        opacity var(--nx-dur-base) var(--nx-ease-out),
        scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy),
        filter var(--nx-dur-base) var(--nx-ease-out);
    }
    .nx-copy-done {
      opacity: 0;
      scale: 0.4;
      filter: blur(3px);
      color: var(--nx-success-text);
    }
    &[data-copied] {
      .nx-copy-idle {
        opacity: 0;
        scale: 0.4;
        filter: blur(3px);
      }
      .nx-copy-done {
        opacity: 1;
        scale: 1;
        filter: none;
      }
    }
  }
  .nx-like {
    .nx-like-heart {
      fill: transparent;
      transition: fill var(--nx-dur-fast) var(--nx-ease-out);
    }
    &[aria-pressed=true] {
      color: var(--nx-danger);
      .nx-like-heart {
        fill: currentColor;
        animation: nx-pop 560ms var(--nx-spring-bouncy);
      }
    }
  }
  .nx-burst {
    position: absolute;
    inset: 50% auto auto 50%;
    pointer-events: none;
  }
  .nx-burst-particle {
    position: absolute;
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--nx-burst-color, var(--nx-danger));
    translate: -50% -50%;
    animation: nx-burst 640ms var(--nx-ease-out) forwards;
  }
  @keyframes nx-burst {
    0% {
      opacity: 1;
      transform: rotate(var(--nx-angle-deg, 0deg)) translateY(0) scale(1);
    }
    100% {
      opacity: 0;
      transform: rotate(var(--nx-angle-deg, 0deg)) translateY(calc(-26px * var(--nx-motion))) scale(0.2);
    }
  }
  .nx-theme-icons {
    display: inline-grid;
    > .nx-icon {
      grid-area: 1 / 1;
      transition:
        opacity var(--nx-dur-base) var(--nx-ease-out),
        rotate var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy),
        scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
    }
    > .nx-theme-moon {
      opacity: 0;
      rotate: -90deg;
      scale: 0.4;
    }
  }
  :root:is([data-theme=dark], .dark) .nx-theme-icons {
    > .nx-theme-sun {
      opacity: 0;
      rotate: 90deg;
      scale: 0.4;
    }
    > .nx-theme-moon {
      opacity: 1;
      rotate: 0deg;
      scale: 1;
    }
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme], .light, .dark) .nx-theme-icons {
      > .nx-theme-sun {
        opacity: 0;
        rotate: 90deg;
        scale: 0.4;
      }
      > .nx-theme-moon {
        opacity: 1;
        rotate: 0deg;
        scale: 1;
      }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-button[data-variant=glow] {
      animation: none;
    }
    .nx-button[data-effect=shine]::after {
      display: none;
    }
  }
  @media (forced-colors: active) {
    .nx-button {
      border-color: ButtonText;
    }
  }
}

/* src/css/components/form.css */
@layer nx.components {
  .nx-field {
    display: grid;
    gap: var(--nx-space-2);
    align-content: start;
  }
  .nx-label {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-1);
    font-size: var(--nx-text-sm);
    font-weight: 600;
    color: var(--nx-text);
    .nx-label-required {
      color: var(--nx-danger-text);
    }
  }
  .nx-hint {
    margin: 0;
    font-size: var(--nx-text-sm);
    color: var(--nx-text-muted);
  }
  .nx-error {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    margin: 0;
    font-size: var(--nx-text-sm);
    color: var(--nx-danger-text);
    animation: nx-rise var(--nx-dur-slow) var(--nx-ease-out);
    .nx-icon {
      inline-size: 1em;
      block-size: 1em;
    }
  }
  .nx-input,
  .nx-textarea,
  .nx-select,
  .nx-input-group {
    --_border: var(--nx-border-strong);
    --_ring: var(--nx-accent-soft);
    --_focus: var(--nx-accent);
    inline-size: 100%;
    min-block-size: 2.75rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--_border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface);
    color: var(--nx-text);
    font: 400 var(--nx-text-md) / 1.5 var(--nx-font-sans);
    box-shadow: var(--nx-shadow-xs);
    transition:
      border-color var(--nx-dur-fast) var(--nx-ease-out),
      box-shadow var(--nx-dur-base) var(--nx-ease-out),
      background-color var(--nx-dur-fast) var(--nx-ease-out);
    &::placeholder {
      color: var(--nx-text-subtle);
      opacity: 1;
    }
    &:hover:not(:disabled, :focus, :focus-within) {
      --_border: color-mix(in oklab, var(--nx-border-strong) 70%, var(--nx-text));
    }
    &:is(:disabled, [aria-disabled=true]) {
      background: var(--nx-surface-2);
      color: var(--nx-text-muted);
      cursor: not-allowed;
      opacity: 0.75;
    }
    &[data-size=sm] {
      min-block-size: 2.25rem;
      padding-block: 0.375rem;
      font-size: var(--nx-text-sm);
      border-radius: var(--nx-radius-sm);
    }
    &[data-size=lg] {
      min-block-size: 3.25rem;
      padding-inline: 1rem;
      font-size: var(--nx-text-lg);
      border-radius: var(--nx-radius-lg);
    }
  }
  :is(.nx-input, .nx-textarea, .nx-select):focus-visible,
  .nx-input-group:focus-within {
    outline: none;
    --_border: var(--_focus);
    box-shadow: var(--nx-shadow-xs), 0 0 0 4px var(--_ring);
  }
  :is(.nx-input, .nx-textarea, .nx-select):is([aria-invalid=true], :user-invalid),
  .nx-input-group:has(> .nx-input:is([aria-invalid=true], :user-invalid)),
  .nx-field[data-invalid] :is(.nx-input, .nx-textarea, .nx-select, .nx-input-group) {
    --_border: var(--nx-danger);
    --_ring: var(--nx-danger-soft);
    --_focus: var(--nx-danger);
  }
  :is(.nx-input, .nx-textarea, .nx-select)[aria-invalid=true],
  .nx-input-group:has(> .nx-input[aria-invalid=true]) {
    animation: nx-shake 400ms var(--nx-ease-out);
  }
  @media (pointer: coarse) {
    :is(.nx-input, .nx-textarea, .nx-select)[data-size=sm] {
      font-size: var(--nx-text-md);
    }
  }
  .nx-input-group {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding-block: 0;
    cursor: text;
    > .nx-input {
      flex: 1;
      min-inline-size: 0;
      min-block-size: calc(2.75rem - 2px);
      padding-inline: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      animation: none;
      &:focus-visible {
        box-shadow: none;
      }
    }
  }
  .nx-input-addon {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-1);
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-sm);
    white-space: nowrap;
    .nx-icon {
      inline-size: 1.1rem;
      block-size: 1.1rem;
    }
  }
  .nx-textarea {
    display: block;
    min-block-size: calc(3lh + 1.25rem);
    max-block-size: var(--nx-textarea-max, 16lh);
    resize: vertical;
    field-sizing: content;
  }
  .nx-select {
    appearance: none;
    padding-inline-end: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8fa6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1.1rem;
    background-position: right 0.8rem center;
    cursor: pointer;
  }
  :where([dir=rtl]) .nx-select {
    background-position: left 0.8rem center;
  }
  @supports (appearance: base-select) {
    .nx-select,
    .nx-select::picker(select) {
      appearance: base-select;
    }
    .nx-select {
      display: flex;
      align-items: center;
      background-image: none;
      padding-inline-end: 0.875rem;
      &::picker-icon {
        content: "";
        inline-size: 1.1rem;
        block-size: 1.1rem;
        margin-inline-start: auto;
        background: currentColor;
        color: var(--nx-text-subtle);
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
        transition: rotate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
      }
      &:open::picker-icon {
        rotate: 180deg;
      }
    }
    .nx-select::picker(select) {
      margin-block: var(--nx-space-2);
      padding: var(--nx-space-1);
      border: 1px solid var(--nx-border);
      border-radius: var(--nx-radius-md);
      background: var(--nx-surface);
      box-shadow: var(--nx-shadow-lg);
      opacity: 0;
      translate: 0 calc(-6px * var(--nx-motion));
      transition:
        opacity var(--nx-dur-base) var(--nx-ease-out),
        translate var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
        display var(--nx-dur-base) allow-discrete,
        overlay var(--nx-dur-base) allow-discrete;
    }
    .nx-select:open::picker(select) {
      opacity: 1;
      translate: 0 0;
      @starting-style {
        opacity: 0;
        translate: 0 calc(-6px * var(--nx-motion));
      }
    }
    .nx-select option {
      padding: var(--nx-space-2) var(--nx-space-3);
      border-radius: var(--nx-radius-sm);
      transition: background-color var(--nx-dur-fast);
      &:is(:hover, :focus-visible) {
        background: var(--nx-surface-2);
        outline: none;
      }
      &:checked {
        background: var(--nx-accent-soft);
        color: var(--nx-accent-text);
        font-weight: 600;
      }
      &::checkmark {
        color: var(--nx-accent-text);
      }
    }
  }
  .nx-choice {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--nx-space-3);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    &:has(:disabled) {
      cursor: not-allowed;
      opacity: 0.55;
    }
  }
  .nx-choice-text {
    display: grid;
    gap: 0.1rem;
    font-size: var(--nx-text-sm);
    line-height: 1.45;
  }
  .nx-choice-label {
    font-weight: 500;
    color: var(--nx-text);
  }
  .nx-choice-description {
    color: var(--nx-text-muted);
  }
  .nx-checkbox,
  .nx-radio {
    appearance: none;
    flex: none;
    display: inline-grid;
    place-content: center;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    margin: 0.125rem 0 0;
    border: 1.5px solid var(--nx-border-strong);
    background: var(--nx-surface);
    color: var(--nx-accent-contrast);
    cursor: pointer;
    transition:
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      border-color var(--nx-dur-fast) var(--nx-ease-out),
      box-shadow var(--nx-dur-base) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &::before {
      content: "";
      grid-area: 1 / 1;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:active:not(:disabled) {
      scale: calc(1 - 0.12 * var(--nx-motion));
    }
    &:hover:not(:disabled, :checked) {
      border-color: var(--nx-accent);
      box-shadow: 0 0 0 4px var(--nx-accent-soft);
    }
    &:disabled {
      cursor: not-allowed;
    }
    &:is([aria-invalid=true], :user-invalid) {
      border-color: var(--nx-danger);
    }
  }
  .nx-checkbox {
    border-radius: 6px;
    &::before {
      inline-size: 0.8rem;
      block-size: 0.8rem;
      background: currentColor;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
      clip-path: inset(0 100% 0 0);
      transition: clip-path 280ms var(--nx-ease-out);
    }
    &:is(:checked, :indeterminate) {
      background: var(--nx-accent);
      border-color: var(--nx-accent);
    }
    &:checked::before {
      clip-path: inset(0);
      transition-delay: 40ms;
    }
    &:indeterminate::before {
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
      clip-path: inset(0);
    }
  }
  .nx-radio {
    border-radius: 50%;
    &::before {
      inline-size: 0.5rem;
      block-size: 0.5rem;
      border-radius: 50%;
      background: currentColor;
      scale: 0;
      transition: scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
    }
    &:checked {
      background: var(--nx-accent);
      border-color: var(--nx-accent);
    }
    &:checked::before {
      scale: 1;
    }
  }
  .nx-switch {
    --_w: 2.5rem;
    --_h: 1.5rem;
    --_knob: 1.125rem;
    --_pad: calc((var(--_h) - var(--_knob)) / 2);
    --_travel: calc(var(--_w) - var(--_knob) - var(--_pad) * 2);
    appearance: none;
    position: relative;
    flex: none;
    inline-size: var(--_w);
    block-size: var(--_h);
    margin: 0;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-3);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.12);
    cursor: pointer;
    transition: background-color var(--nx-dur-base) var(--nx-ease-out), border-color var(--nx-dur-base) var(--nx-ease-out);
    &::before {
      content: "";
      position: absolute;
      inset-block-start: calc(var(--_pad) - 1px);
      inset-inline-start: calc(var(--_pad) - 1px);
      inline-size: var(--_knob);
      block-size: var(--_knob);
      border-radius: var(--nx-radius-full);
      background: #fff;
      box-shadow: 0 1px 2px rgb(0 0 0 / 0.2), 0 2px 6px -1px rgb(0 0 0 / 0.2);
      transition:
        translate var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
        inline-size var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
        margin var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    }
    &:checked {
      background: var(--nx-accent);
      border-color: var(--nx-accent);
      &::before {
        translate: calc(var(--_travel) * var(--nx-dir)) 0;
      }
    }
    &:active:not(:disabled)::before {
      inline-size: calc(var(--_knob) + 0.3rem * var(--nx-motion));
    }
    &:checked:active:not(:disabled)::before {
      margin-inline-start: calc(-0.3rem * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:disabled {
      cursor: not-allowed;
      opacity: 0.55;
    }
    &[data-size=sm] {
      --_w: 2rem;
      --_h: 1.25rem;
      --_knob: 0.875rem;
    }
    &[data-size=lg] {
      --_w: 3rem;
      --_h: 1.75rem;
      --_knob: 1.375rem;
    }
  }
  .nx-otp {
    position: relative;
    display: inline-flex;
    max-inline-size: 100%;
    direction: ltr;
  }
  .nx-otp-input {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    opacity: 0;
    border: 0;
    font-size: 16px;
    color: transparent;
    caret-color: transparent;
    letter-spacing: 2em;
    cursor: text;
    z-index: 1;
  }
  .nx-otp-slots {
    display: flex;
    align-items: center;
    gap: clamp(0.25rem, 1.6vw, var(--nx-space-2));
    min-inline-size: 0;
  }
  .nx-otp-slot {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 1 3rem;
    inline-size: 3rem;
    min-inline-size: 2.25rem;
    block-size: 3.5rem;
    border: 1px solid var(--nx-border-strong);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-xs);
    font: 600 var(--nx-text-2xl) / 1 var(--nx-font-mono);
    color: var(--nx-text);
    transition:
      border-color var(--nx-dur-fast) var(--nx-ease-out),
      box-shadow var(--nx-dur-base) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &[data-filled] > span {
      animation: nx-pop 320ms var(--nx-spring-bouncy);
      display: inline-block;
    }
    &[data-active] {
      border-color: var(--nx-accent);
      box-shadow: 0 0 0 4px var(--nx-accent-soft);
      scale: calc(1 + 0.04 * var(--nx-motion));
    }
    &[data-active]:not([data-filled])::after {
      content: "";
      inline-size: 2px;
      block-size: 1.4rem;
      border-radius: 1px;
      background: var(--nx-accent);
      animation: nx-caret 1s steps(1) infinite;
    }
  }
  .nx-otp-sep {
    inline-size: 0.75rem;
    block-size: 2px;
    border-radius: 1px;
    background: var(--nx-border-strong);
  }
  .nx-otp[data-invalid] .nx-otp-slot {
    border-color: var(--nx-danger);
    animation: nx-shake 400ms var(--nx-ease-out);
  }
  .nx-otp:has(.nx-otp-input:disabled) {
    opacity: 0.55;
  }
  @keyframes nx-caret {
    50% {
      opacity: 0;
    }
  }
  .nx-slider {
    --_thumb: 1.25rem;
    --_track: 0.375rem;
    --_fill: var(--nx-accent);
    position: relative;
    display: grid;
    align-items: center;
    padding-block: var(--nx-space-3);
  }
  .nx-slider-input {
    appearance: none;
    inline-size: 100%;
    block-size: var(--_thumb);
    margin: 0;
    background: transparent;
    cursor: pointer;
    &:focus-visible {
      outline: none;
    }
    &:disabled {
      cursor: not-allowed;
      opacity: 0.55;
    }
    &::-webkit-slider-runnable-track {
      block-size: var(--_track);
      border-radius: var(--nx-radius-full);
      background:
        linear-gradient(
          calc(90deg * var(--nx-dir)),
          var(--_fill) var(--nx-pct, 50%),
          var(--nx-surface-3) var(--nx-pct, 50%));
    }
    &::-moz-range-track {
      block-size: var(--_track);
      border-radius: var(--nx-radius-full);
      background:
        linear-gradient(
          calc(90deg * var(--nx-dir)),
          var(--_fill) var(--nx-pct, 50%),
          var(--nx-surface-3) var(--nx-pct, 50%));
    }
    &::-webkit-slider-thumb {
      appearance: none;
      inline-size: var(--_thumb);
      block-size: var(--_thumb);
      margin-block-start: calc((var(--_track) - var(--_thumb)) / 2);
      border: 2px solid var(--_fill);
      border-radius: 50%;
      background: #fff;
      box-shadow: var(--nx-shadow-sm);
      transition: scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy), box-shadow var(--nx-dur-base);
    }
    &::-moz-range-thumb {
      inline-size: var(--_thumb);
      block-size: var(--_thumb);
      border: 2px solid var(--_fill);
      border-radius: 50%;
      background: #fff;
      box-shadow: var(--nx-shadow-sm);
      transition: scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy), box-shadow var(--nx-dur-base);
    }
    &:active::-webkit-slider-thumb {
      scale: calc(1 + 0.18 * var(--nx-motion));
    }
    &:active::-moz-range-thumb {
      scale: calc(1 + 0.18 * var(--nx-motion));
    }
    &:focus-visible::-webkit-slider-thumb {
      box-shadow: 0 0 0 4px var(--nx-accent-soft), var(--nx-shadow-sm);
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:focus-visible::-moz-range-thumb {
      box-shadow: 0 0 0 4px var(--nx-accent-soft), var(--nx-shadow-sm);
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-slider-value {
    position: absolute;
    inset-block-end: calc(100% - 0.25rem);
    inset-inline-start: calc(var(--nx-pct, 50%) + (0.5 - var(--nx-frac, 0.5)) * var(--_thumb));
    translate: calc(-50% * var(--nx-dir)) 0;
    padding: 0.2rem 0.5rem;
    border-radius: var(--nx-radius-sm);
    background: var(--nx-surface-inverse);
    color: var(--nx-text-inverse);
    font: 600 var(--nx-text-xs) / 1.3 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    scale: 0.7;
    transform-origin: bottom center;
    transition: opacity var(--nx-dur-fast) var(--nx-ease-out), scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
  }
  .nx-slider:is(:hover, :focus-within, [data-show-value]) .nx-slider-value {
    opacity: 1;
    scale: 1;
  }
  .nx-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: var(--nx-text-xs);
    color: var(--nx-text-subtle);
  }
  .nx-filedrop {
    --_border: var(--nx-border-strong);
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-8) var(--nx-space-6);
    border: 1.5px dashed var(--_border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    text-align: center;
    cursor: pointer;
    transition:
      border-color var(--nx-dur-fast) var(--nx-ease-out),
      background-color var(--nx-dur-base) var(--nx-ease-out),
      scale var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    &:hover {
      --_border: var(--nx-accent);
      background: color-mix(in oklab, var(--nx-accent-soft) 45%, var(--nx-surface));
    }
    &:focus-within {
      outline: 2px solid var(--nx-ring);
      outline-offset: 3px;
    }
    &[data-dragging] {
      --_border: transparent;
      border-style: solid;
      background:
        linear-gradient(color-mix(in oklab, var(--nx-accent-soft) 60%, var(--nx-surface)), color-mix(in oklab, var(--nx-accent-soft) 60%, var(--nx-surface))) padding-box,
        conic-gradient(
          from var(--nx-angle),
          var(--nx-lapis-500),
          var(--nx-cyan-400),
          var(--nx-violet-500),
          var(--nx-gold-400),
          var(--nx-lapis-500)) border-box;
      animation: nx-turn 2.4s linear infinite;
      scale: calc(1 + 0.015 * var(--nx-motion));
      .nx-filedrop-icon {
        translate: 0 calc(-6px * var(--nx-motion));
        scale: 1.1;
      }
    }
    &:has(input:disabled) {
      opacity: 0.55;
      cursor: not-allowed;
    }
  }
  .nx-filedrop-icon {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: var(--nx-radius-lg);
    background: var(--nx-accent-soft);
    color: var(--nx-accent-text);
    transition: translate var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy), scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
    .nx-icon {
      inline-size: 1.5rem;
      block-size: 1.5rem;
    }
  }
  .nx-filedrop-title {
    font-weight: 600;
    color: var(--nx-text);
  }
  .nx-filedrop-title u {
    color: var(--nx-accent-text);
    text-underline-offset: 0.2em;
  }
  .nx-filedrop-hint {
    font-size: var(--nx-text-sm);
    color: var(--nx-text-muted);
  }
  .nx-file-list {
    display: grid;
    gap: var(--nx-space-2);
    margin: var(--nx-space-3) 0 0;
    padding: 0;
    list-style: none;
  }
  .nx-file {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--nx-space-1) var(--nx-space-3);
    padding: var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface);
    animation: nx-rise var(--nx-spring-gentle-duration) var(--nx-spring-gentle) both;
    animation-delay: calc(var(--nx-i, 0) * var(--nx-stagger));
    .nx-progress {
      grid-column: 2 / -1;
    }
    &[data-status=error] {
      border-color: var(--nx-danger);
    }
    &[data-status=done] .nx-file-state {
      color: var(--nx-success-text);
    }
  }
  .nx-file-name {
    overflow: hidden;
    font-size: var(--nx-text-sm);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-file-meta {
    grid-column: 2;
    font-size: var(--nx-text-xs);
    color: var(--nx-text-muted);
  }
  .nx-file-state {
    grid-row: 1;
    grid-column: 3;
    display: inline-flex;
    color: var(--nx-text-subtle);
  }
  .nx-prompt {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: var(--nx-space-2);
    padding: var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    box-shadow: var(--nx-shadow-md);
    transition: border-color var(--nx-dur-base) var(--nx-ease-out), box-shadow var(--nx-dur-base) var(--nx-ease-out);
    &:focus-within {
      border-color: var(--nx-accent-border);
      box-shadow: var(--nx-shadow-md), 0 0 0 4px var(--nx-accent-soft);
    }
    &::before,
    &::after {
      content: "";
      position: absolute;
      z-index: -1;
      border-radius: inherit;
    }
    &::before {
      inset: -2px;
      background: var(--nx-gradient-aurora);
      filter: blur(18px);
      opacity: 0;
      transition: opacity var(--nx-dur-slower) var(--nx-ease-out);
    }
    &::after {
      inset: 0;
      background: var(--nx-surface);
    }
    &[data-glow]:focus-within::before {
      opacity: 0.4;
      animation: nx-pulse 3.2s var(--nx-ease-in-out) infinite;
    }
  }
  .nx-prompt-textarea {
    inline-size: 100%;
    min-block-size: 1.6lh;
    max-block-size: var(--nx-prompt-max, 12lh);
    padding: var(--nx-space-1) var(--nx-space-2);
    border: 0;
    background: transparent;
    color: var(--nx-text);
    font: 400 var(--nx-text-md) / 1.6 var(--nx-font-sans);
    resize: none;
    field-sizing: content;
    &:focus-visible {
      outline: none;
    }
    &::placeholder {
      color: var(--nx-text-subtle);
    }
  }
  .nx-prompt-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nx-space-2);
    &:empty {
      display: none;
    }
  }
  .nx-prompt-toolbar {
    display: flex;
    align-items: center;
    gap: var(--nx-space-1);
  }
  .nx-prompt-spacer {
    flex: 1;
  }
  .nx-prompt-send {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border: 0;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-inverse);
    color: var(--nx-text-inverse);
    cursor: pointer;
    transition:
      opacity var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy),
      background-color var(--nx-dur-base) var(--nx-ease-out);
    > * {
      grid-area: 1 / 1;
      transition:
        opacity var(--nx-dur-fast),
        scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
        rotate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    }
    .nx-prompt-stop {
      opacity: 0;
      scale: 0.4;
    }
    &:disabled {
      opacity: 0.35;
      scale: 0.9;
      cursor: not-allowed;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:hover:not(:disabled) {
      background: var(--nx-accent);
      color: var(--nx-accent-contrast);
    }
    &[data-state=streaming] {
      background: var(--nx-accent);
      color: var(--nx-accent-contrast);
      .nx-prompt-arrow {
        opacity: 0;
        scale: 0.4;
        rotate: -90deg;
      }
      .nx-prompt-stop {
        opacity: 1;
        scale: 1;
      }
    }
  }
  .nx-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-1);
    max-inline-size: 16rem;
    padding-block: 0.25rem;
    padding-inline: 0.625rem 0.375rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-2);
    font-size: var(--nx-text-xs);
    font-weight: 500;
    animation: nx-scale-in var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
    > span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .nx-chip-remove {
    display: grid;
    place-items: center;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--nx-text-subtle);
    cursor: pointer;
    &:hover {
      background: var(--nx-surface-3);
      color: var(--nx-text);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
    }
    .nx-icon {
      inline-size: 0.85rem;
      block-size: 0.85rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-filedrop[data-dragging],
    .nx-prompt[data-glow]:focus-within::before {
      animation: none;
    }
  }
}

/* src/css/components/card.css */
@layer nx.components {
  .nx-card {
    --_pad: var(--nx-card-padding, var(--nx-space-6));
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: var(--nx-space-4);
    padding: var(--_pad);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-sm), inset 0 1px 0 var(--nx-highlight);
    transition:
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      scale var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      box-shadow var(--nx-dur-slow) var(--nx-ease-out),
      border-color var(--nx-dur-base) var(--nx-ease-out),
      transform var(--nx-transform-duration, var(--nx-spring-gentle-duration)) var(--nx-transform-ease, var(--nx-spring-gentle));
    &[data-size=sm] {
      --_pad: var(--nx-space-4);
      border-radius: var(--nx-radius-lg);
      gap: var(--nx-space-3);
    }
    &[data-size=lg] {
      --_pad: var(--nx-space-8);
      border-radius: var(--nx-radius-2xl);
    }
    &[data-variant=glass] {
      background: var(--nx-glass);
      border-color: var(--nx-glass-border);
      -webkit-backdrop-filter: blur(18px) saturate(150%);
      backdrop-filter: blur(18px) saturate(150%);
    }
    &[data-variant=outline] {
      background: transparent;
      box-shadow: none;
    }
    &[data-variant=inverse] {
      --nx-text-muted: color-mix(in oklab, var(--nx-text-inverse) 70%, transparent);
      background: var(--nx-surface-inverse);
      color: var(--nx-text-inverse);
      border-color: transparent;
    }
    &[data-variant=gradient] {
      border-color: transparent;
      background:
        linear-gradient(var(--nx-surface), var(--nx-surface)) padding-box,
        linear-gradient(
          140deg,
          var(--nx-accent-border),
          transparent 40%,
          transparent 60%,
          color-mix(in oklab, var(--nx-gold) 50%, transparent)) border-box;
    }
    &:is([data-interactive], a, button):is(:hover, :focus-visible) {
      translate: 0 calc(-4px * var(--nx-motion));
      box-shadow: var(--nx-shadow-lg), inset 0 1px 0 var(--nx-highlight);
      border-color: var(--nx-accent-border);
    }
    &:is([data-interactive], a, button):active {
      scale: calc(1 - 0.01 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 3px;
    }
  }
  :is(a, button).nx-card {
    text-align: start;
    text-decoration: none;
    font: inherit;
    cursor: pointer;
  }
  .nx-card[data-spotlight]::before,
  .nx-card[data-spotlight]::after,
  .nx-spotlight::before,
  .nx-spotlight::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--nx-dur-slow) var(--nx-ease-out);
  }
  .nx-card[data-spotlight]::before,
  .nx-spotlight::before {
    z-index: -1;
    background:
      radial-gradient(
        28rem circle at var(--nx-px, 50%) var(--nx-py, 50%),
        var(--nx-accent-soft),
        transparent 42%);
  }
  .nx-card[data-spotlight]::after,
  .nx-spotlight::after {
    inset: -1px;
    padding: 1px;
    background:
      radial-gradient(
        16rem circle at var(--nx-px, 50%) var(--nx-py, 50%),
        color-mix(in oklab, var(--nx-accent) 85%, var(--nx-glow)),
        transparent 60%);
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
  :is(.nx-card[data-spotlight], .nx-spotlight):is(:hover, :focus-within)::before,
  :is(.nx-card[data-spotlight], .nx-spotlight):is(:hover, :focus-within)::after {
    opacity: 1;
  }
  .nx-spotlight {
    position: relative;
    isolation: isolate;
  }
  .nx-card[data-nx-tilt][data-nx-pointer] {
    box-shadow: var(--nx-shadow-xl);
  }
  .nx-card-header {
    display: grid;
    gap: var(--nx-space-2);
  }
  .nx-card-icon {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    margin-block-end: var(--nx-space-2);
    border-radius: var(--nx-radius-md);
    background: var(--nx-accent-soft);
    color: var(--nx-accent-text);
    transition: scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy), rotate var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
    .nx-icon {
      inline-size: 1.35rem;
      block-size: 1.35rem;
    }
  }
  .nx-card:is([data-interactive], a, button):hover .nx-card-icon {
    scale: calc(1 + 0.08 * var(--nx-motion));
    rotate: calc(-6deg * var(--nx-motion) * var(--nx-dir));
  }
  .nx-card-title {
    margin: 0;
    font: 650 var(--nx-text-lg) / 1.3 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
    text-wrap: balance;
  }
  .nx-card-description {
    margin: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    line-height: 1.6;
    text-wrap: pretty;
  }
  .nx-card-body {
    flex: 1;
  }
  .nx-card-footer {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    padding-block-start: var(--nx-space-4);
    border-block-start: 1px solid var(--nx-border);
  }
  .nx-flip {
    display: grid;
    perspective: 1400px;
  }
  .nx-flip-inner {
    display: grid;
    transform-style: preserve-3d;
    transition: rotate var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
  }
  .nx-flip-face {
    grid-area: 1 / 1;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .nx-flip-back {
    rotate: y 180deg;
  }
  .nx-flip[data-flipped] .nx-flip-inner,
  .nx-flip[data-trigger=hover]:is(:hover, :focus-within) .nx-flip-inner {
    rotate: y calc(180deg * var(--nx-dir));
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-flip-inner {
      transition: none;
      rotate: none !important;
    }
    .nx-flip-face {
      transition: opacity var(--nx-dur-base);
    }
    .nx-flip-back {
      rotate: none;
      opacity: 0;
    }
    .nx-flip:is([data-flipped], [data-trigger=hover]:is(:hover, :focus-within)) {
      .nx-flip-front {
        opacity: 0;
      }
      .nx-flip-back {
        opacity: 1;
      }
    }
  }
  .nx-stack {
    --_overlap: var(--nx-stack-overlap, -55%);
    display: flex;
    justify-content: center;
    min-inline-size: 0;
    max-inline-size: 100%;
    margin: 0;
    padding: var(--nx-space-6) 0;
    list-style: none;
  }
  .nx-stack-item {
    --_spread: calc((var(--i) - (var(--nx-count, 3) - 1) / 2));
    position: relative;
    flex: none;
    rotate: calc(var(--_spread) * 4deg * var(--nx-motion) * var(--nx-dir));
    transition:
      margin var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      rotate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      scale var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      filter var(--nx-dur-slow) var(--nx-ease-out);
    & + & {
      margin-inline-start: var(--_overlap);
    }
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-stack:is(:hover, :focus-within) {
      .nx-stack-item {
        rotate: 0deg;
      }
      .nx-stack-item + .nx-stack-item {
        margin-inline-start: var(--nx-space-3);
      }
    }
  }
  @media (max-width: 40rem) {
    .nx-stack {
      --_overlap: var(--nx-stack-overlap-narrow, -68%);
    }
  }
  .nx-stack-item:is(:hover, :focus-within) {
    z-index: 2;
    translate: 0 calc(-10px * var(--nx-motion));
    scale: calc(1 + 0.04 * var(--nx-motion));
  }
  .nx-stack:has(.nx-stack-item:hover) .nx-stack-item:not(:hover) {
    filter: saturate(0.7) brightness(0.92);
  }
  .nx-swipe-stack {
    position: relative;
    display: grid;
    padding-block-end: calc(var(--nx-space-3) * 3);
    touch-action: pan-y;
  }
  .nx-swipe-card {
    grid-area: 1 / 1;
    translate: 0 calc(var(--i, 0) * 12px * var(--nx-motion));
    scale: calc(1 - var(--i, 0) * 0.05);
    transform-origin: 50% 100%;
    opacity: clamp(0, 1.6 - var(--i, 0) * 0.4, 1);
    z-index: calc(10 - var(--i, 0));
    transition:
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      scale var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      rotate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      opacity var(--nx-dur-slow) var(--nx-ease-out);
    -webkit-user-select: none;
    user-select: none;
    &[data-state=top] {
      translate: var(--nx-dx, 0px) var(--nx-dy, 0px);
      rotate: var(--nx-drag-rotate, 0deg);
      cursor: grab;
    }
    &[data-dragging] {
      transition: none;
      cursor: grabbing;
    }
    &[data-state=leaving] {
      translate: calc(var(--nx-exit-x, 1) * 130%) var(--nx-dy, 0px);
      rotate: calc(var(--nx-exit-x, 1) * 18deg);
      opacity: 0;
      pointer-events: none;
      transition-duration: var(--nx-dur-slower);
      transition-timing-function: var(--nx-ease-out);
    }
  }
  .nx-swipe-hint {
    position: absolute;
    inset-block-start: var(--nx-space-6);
    padding: var(--nx-space-1) var(--nx-space-3);
    border: 2px solid currentColor;
    border-radius: var(--nx-radius-sm);
    font-weight: 800;
    letter-spacing: var(--nx-tracking-wider);
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    &[data-side=accept] {
      left: var(--nx-space-6);
      color: var(--nx-success-text);
      rotate: -12deg;
      opacity: clamp(0, var(--nx-drag-progress, 0), 1);
    }
    &[data-side=reject] {
      right: var(--nx-space-6);
      color: var(--nx-danger-text);
      rotate: 12deg;
      opacity: clamp(0, calc(var(--nx-drag-progress, 0) * -1), 1);
    }
  }
  .nx-swipe-actions {
    display: flex;
    justify-content: center;
    gap: var(--nx-space-4);
    margin-block-start: var(--nx-space-4);
  }
  .nx-stat {
    display: grid;
    gap: var(--nx-space-2);
    padding: var(--nx-space-5);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-sm), inset 0 1px 0 var(--nx-highlight);
  }
  .nx-stat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-2);
  }
  .nx-stat-label {
    font-size: var(--nx-text-sm);
    font-weight: 500;
    color: var(--nx-text-muted);
  }
  .nx-stat-value {
    font: 700 var(--nx-text-3xl) / 1.1 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tighter);
  }
  .nx-stat-caption {
    margin: 0;
    font-size: var(--nx-text-xs);
    color: var(--nx-text-subtle);
  }
  .nx-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: var(--nx-text-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    &[data-trend=up] {
      color: var(--nx-success-text);
    }
    &[data-trend=down] {
      color: var(--nx-danger-text);
    }
    .nx-icon {
      inline-size: 0.9rem;
      block-size: 0.9rem;
    }
  }
}

/* src/css/components/chart.css */
@layer nx.components {
  .nx-chart {
    --_surface: var(--nx-surface);
    display: grid;
    gap: var(--nx-space-4);
    margin: 0;
    min-inline-size: 0;
  }
  .nx-chart-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--nx-space-3);
  }
  .nx-chart-title {
    margin: 0;
    font: 600 var(--nx-text-md) / 1.3 var(--nx-font-sans);
  }
  .nx-chart-subtitle {
    margin: 0.15rem 0 0;
    font-size: var(--nx-text-sm);
    color: var(--nx-text-muted);
  }
  .nx-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nx-space-2) var(--nx-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--nx-text-xs);
    color: var(--nx-text-muted);
  }
  .nx-legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
  }
  .nx-legend-swatch {
    inline-size: 0.625rem;
    block-size: 0.625rem;
    border-radius: 2px;
    background: var(--nx-series);
    &[data-shape=line] {
      inline-size: 0.875rem;
      block-size: 2px;
      border-radius: 1px;
    }
  }
  .nx-chart-plot {
    position: relative;
    direction: ltr;
    border-radius: var(--nx-radius-md);
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 4px;
    }
  }
  .nx-chart-svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
    overflow: visible;
    font-family: var(--nx-font-sans);
  }
  .nx-chart-gridline {
    stroke: var(--nx-chart-grid);
    stroke-width: 1;
    shape-rendering: crispEdges;
    vector-effect: non-scaling-stroke;
  }
  .nx-chart-baseline {
    stroke: var(--nx-border-strong);
    stroke-width: 1;
    shape-rendering: crispEdges;
    vector-effect: non-scaling-stroke;
  }
  .nx-chart-tick {
    fill: var(--nx-text-subtle);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
  }
  .nx-chart-bar {
    fill: var(--nx-series, var(--nx-chart-1));
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transition:
      scale var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      opacity var(--nx-dur-base) var(--nx-ease-out),
      filter var(--nx-dur-fast) var(--nx-ease-out);
    transition-delay:
      calc(var(--nx-i, 0) * 45ms),
      0ms,
      0ms;
  }
  .nx-chart-hit {
    fill: transparent;
    cursor: crosshair;
  }
  .nx-chart[data-active] .nx-chart-bar:not([data-active]) {
    opacity: 0.45;
  }
  .nx-chart-bar[data-active] {
    filter: brightness(1.08) saturate(1.1);
  }
  .nx-chart-line {
    fill: none;
    stroke: var(--nx-series, var(--nx-chart-1));
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1200ms var(--nx-ease-out) calc(var(--nx-i, 0) * 120ms);
  }
  .nx-chart-area {
    fill: var(--nx-series, var(--nx-chart-1));
    fill-opacity: 0.1;
    transition: opacity 900ms var(--nx-ease-out) 300ms, translate 900ms var(--nx-ease-out) 300ms;
  }
  .nx-chart-area[fill^=url] {
    fill-opacity: 1;
  }
  .nx-chart-point {
    fill: var(--nx-series, var(--nx-chart-1));
    stroke: var(--_surface);
    stroke-width: 2;
    opacity: 0;
    scale: 0.4;
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity var(--nx-dur-fast) var(--nx-ease-out), scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
    &[data-active],
    &[data-end] {
      opacity: 1;
      scale: 1;
    }
  }
  .nx-chart-crosshair {
    stroke: var(--nx-border-strong);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    shape-rendering: crispEdges;
    opacity: 0;
    transition: opacity var(--nx-dur-fast) var(--nx-ease-out);
    &[data-active] {
      opacity: 1;
    }
  }
  .nx-donut {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: var(--nx-donut-size, 12rem);
    aspect-ratio: 1;
    margin-inline: auto;
    .nx-chart-svg {
      rotate: -90deg;
      grid-area: 1 / 1;
    }
  }
  .nx-donut-segment {
    fill: none;
    stroke: var(--nx-series, var(--nx-chart-1));
    stroke-width: var(--nx-donut-thickness, 14);
    stroke-dasharray: var(--nx-len) 100;
    stroke-dashoffset: var(--nx-offset);
    transition:
      stroke-dasharray 1100ms var(--nx-ease-out) calc(var(--nx-i, 0) * 90ms),
      stroke-width var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      opacity var(--nx-dur-base);
    cursor: pointer;
    &[data-active] {
      stroke-width: calc(var(--nx-donut-thickness, 14) + 4);
    }
  }
  .nx-donut:has(.nx-donut-segment[data-active]) .nx-donut-segment:not([data-active]) {
    opacity: 0.4;
  }
  .nx-donut-center {
    grid-area: 1 / 1;
    display: grid;
    justify-items: center;
    gap: 0.1rem;
    text-align: center;
    pointer-events: none;
  }
  .nx-donut-value {
    font: 700 var(--nx-text-2xl) / 1.1 var(--nx-font-sans);
  }
  .nx-donut-label {
    font-size: var(--nx-text-xs);
    color: var(--nx-text-muted);
  }
  :where(.nx-js) .nx-chart[data-nx-reveal]:not([data-nx-revealed]) {
    .nx-chart-bar {
      scale: 1 0;
    }
    .nx-chart-line {
      stroke-dashoffset: 1;
    }
    .nx-chart-area {
      opacity: 0;
      translate: 0 calc(8px * var(--nx-motion));
    }
    .nx-donut-segment {
      stroke-dasharray: 0 100;
    }
  }
  .nx-chart[data-nx-reveal] {
    opacity: 1;
    translate: none;
  }
  .nx-chart-tooltip {
    position: absolute;
    inset-block-start: 0;
    left: 0;
    z-index: 2;
    min-inline-size: 8rem;
    padding: var(--nx-space-2) var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-lg);
    font-size: var(--nx-text-xs);
    pointer-events: none;
    translate: var(--nx-tx, 0px) var(--nx-ty, 0px);
    opacity: 0;
    scale: 0.96;
    transition:
      opacity var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-dur-fast) var(--nx-ease-out),
      translate 120ms var(--nx-ease-out);
    &[data-open] {
      opacity: 1;
      scale: 1;
    }
  }
  .nx-chart-tooltip-title {
    margin: 0 0 var(--nx-space-1);
    color: var(--nx-text-muted);
  }
  .nx-chart-tooltip-row {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    white-space: nowrap;
    strong {
      font-size: var(--nx-text-sm);
      font-variant-numeric: tabular-nums;
      color: var(--nx-text);
    }
    span {
      color: var(--nx-text-muted);
    }
  }
  .nx-chart-tooltip-key {
    inline-size: 0.75rem;
    block-size: 2px;
    border-radius: 1px;
    background: var(--nx-series);
  }
  .nx-sparkline {
    display: block;
    inline-size: 100%;
    block-size: var(--nx-sparkline-height, 2.5rem);
    overflow: visible;
    .nx-chart-line {
      stroke: var(--nx-text-subtle);
      stroke-width: 1.5;
    }
    .nx-chart-area {
      fill: var(--nx-text-subtle);
      fill-opacity: 0.08;
    }
    .nx-chart-point {
      fill: var(--nx-accent);
      opacity: 1;
      scale: 1;
      r: 3;
    }
    &[data-trend=up] .nx-chart-line {
      stroke: var(--nx-success);
    }
    &[data-trend=down] .nx-chart-line {
      stroke: var(--nx-danger);
    }
  }
  @property --nx-value { syntax: "<number>"; inherits: true; initial-value: 0; }
  .nx-ring {
    position: relative;
    display: inline-grid;
    place-items: center;
    inline-size: var(--nx-ring-size, 6rem);
    aspect-ratio: 1;
  }
  .nx-ring-progress {
    --_thickness: var(--nx-ring-thickness, 0.6rem);
    --_fill: var(--nx-series, var(--nx-accent));
    appearance: none;
    grid-area: 1 / 1;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
    border-radius: 50%;
    background: conic-gradient(var(--_fill) calc(var(--nx-value) * 1%), var(--nx-surface-3) 0);
    mask:
      radial-gradient(
        farthest-side,
        transparent calc(100% - var(--_thickness)),
        #000 calc(100% - var(--_thickness) + 0.5px));
    transition: --nx-value 0s;
    &::-webkit-progress-bar {
      background: transparent;
    }
    &::-webkit-progress-value {
      background: transparent;
    }
    &::-moz-progress-bar {
      background: transparent;
    }
    &[data-tone=success] {
      --_fill: var(--nx-success);
    }
    &[data-tone=warning] {
      --_fill: var(--nx-warning);
    }
    &[data-tone=danger] {
      --_fill: var(--nx-danger);
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .nx-ring-progress {
      transition: --nx-value 1s var(--nx-ease-out);
    }
  }
  :where(.nx-js) .nx-ring[data-nx-reveal]:not([data-nx-revealed]) .nx-ring-progress {
    --nx-value: 0 !important;
  }
  .nx-ring[data-nx-reveal] {
    opacity: 1;
    translate: none;
  }
  .nx-ring-label {
    grid-area: 1 / 1;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  @media (forced-colors: active) {
    .nx-chart-bar,
    .nx-donut-segment {
      forced-color-adjust: none;
    }
  }
}

/* src/css/components/hero.css */
@layer nx.components {
  .nx-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: var(--nx-space-16);
    padding-block: clamp(4.5rem, 3rem + 8vw, 9rem) clamp(3rem, 2rem + 5vw, 6rem);
    padding-inline: var(--nx-space-6);
    overflow: clip;
  }
  .nx-hero-content {
    display: grid;
    justify-items: center;
    gap: var(--nx-space-6);
    max-inline-size: 56rem;
    margin-inline: auto;
    text-align: center;
    > * {
      margin: 0;
    }
  }
  .nx-hero[data-align=start] .nx-hero-content {
    justify-items: start;
    margin-inline: 0;
    text-align: start;
  }
  .nx-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding-block: 0.3rem;
    padding-inline: 0.35rem 0.75rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--nx-shadow-xs);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: border-color var(--nx-dur-base), box-shadow var(--nx-dur-base);
    .nx-badge {
      font-size: var(--nx-text-xs);
    }
    .nx-icon {
      transition: translate var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
    }
    &:is(a):hover {
      border-color: var(--nx-accent-border);
      box-shadow: var(--nx-shadow-glow);
      .nx-icon {
        translate: calc(3px * var(--nx-dir) * var(--nx-motion)) 0;
      }
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 3px;
    }
  }
  .nx-hero-title {
    font: 700 var(--nx-text-display) / 1.02 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tightest);
    text-wrap: balance;
  }
  :where(:lang(fa), :lang(ar), :lang(ur)) .nx-hero-title {
    line-height: 1.3;
  }
  .nx-hero-subtitle {
    max-inline-size: 42rem;
    font-size: clamp(var(--nx-text-lg), 1rem + 0.5vw, var(--nx-text-xl));
    line-height: 1.65;
    color: var(--nx-text-muted);
    text-wrap: pretty;
  }
  .nx-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--nx-space-3);
    margin-block-start: var(--nx-space-2);
  }
  .nx-hero[data-align=start] .nx-hero-actions {
    justify-content: flex-start;
  }
  .nx-hero-media {
    max-inline-size: 72rem;
    inline-size: 100%;
    margin-inline: auto;
    perspective: 1600px;
    > * {
      border: 1px solid var(--nx-border);
      border-radius: var(--nx-radius-2xl);
      box-shadow: var(--nx-shadow-xl);
      transform-origin: 50% 0;
      transition:
        rotate 1.4s var(--nx-ease-out),
        opacity 1s var(--nx-ease-out),
        translate 1.4s var(--nx-ease-out);
    }
  }
  :where(.nx-js) .nx-hero-media[data-nx-reveal]:not([data-nx-revealed]) > * {
    rotate: x calc(18deg * var(--nx-motion));
    translate: 0 calc(40px * var(--nx-motion));
    opacity: 0.2;
  }
  .nx-hero-media[data-nx-reveal] {
    opacity: 1;
    translate: none;
  }
  .nx-backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: clip;
    pointer-events: none;
    > i {
      position: absolute;
      display: block;
    }
  }
  .nx-backdrop[data-variant=aurora] {
    mask-image:
      radial-gradient(
        ellipse 80% 70% at 50% 30%,
        #000 30%,
        transparent 75%);
    > i {
      inline-size: 55vmax;
      aspect-ratio: 1;
      border-radius: 50%;
      filter: blur(70px);
      opacity: var(--nx-backdrop-intensity);
      animation: nx-drift 22s var(--nx-ease-in-out) infinite alternate;
    }
    > i:nth-child(1) {
      inset: -30% auto auto -10%;
      background:
        radial-gradient(
          circle,
          var(--nx-lapis-500),
          transparent 65%);
    }
    > i:nth-child(2) {
      inset: -25% -15% auto auto;
      background:
        radial-gradient(
          circle,
          var(--nx-violet-500),
          transparent 65%);
      animation-duration: 28s;
      animation-delay: -8s;
    }
    > i:nth-child(3) {
      inset: 10% auto auto 25%;
      background:
        radial-gradient(
          circle,
          var(--nx-cyan-400),
          transparent 60%);
      opacity: calc(var(--nx-backdrop-intensity) * 0.6);
      animation-duration: 34s;
      animation-delay: -16s;
    }
  }
  @keyframes nx-drift {
    33% {
      translate: calc(8vmax * var(--nx-motion)) calc(4vmax * var(--nx-motion));
      scale: 1.08;
    }
    66% {
      translate: calc(-6vmax * var(--nx-motion)) calc(6vmax * var(--nx-motion));
      scale: 0.94;
    }
    100% {
      translate: calc(4vmax * var(--nx-motion)) calc(-3vmax * var(--nx-motion));
      scale: 1.04;
    }
  }
  .nx-backdrop[data-variant=grid] {
    --_cell: var(--nx-grid-cell, 48px);
    --_line: color-mix(in oklab, var(--nx-text) 8%, transparent);
    background:
      linear-gradient(var(--_line) 1px, transparent 1px) 0 0 / var(--_cell) var(--_cell),
      linear-gradient(
        90deg,
        var(--_line) 1px,
        transparent 1px) 0 0 / var(--_cell) var(--_cell);
    mask-image:
      radial-gradient(
        ellipse 75% 65% at 50% 35%,
        #000 25%,
        transparent 78%);
    animation: nx-grid-pan 18s linear infinite;
    > i:nth-child(1) {
      inset: 0;
      background:
        linear-gradient(var(--nx-accent) 1px, transparent 1px) 0 0 / var(--_cell) var(--_cell),
        linear-gradient(
          90deg,
          var(--nx-accent) 1px,
          transparent 1px) 0 0 / var(--_cell) var(--_cell);
      mask-image:
        radial-gradient(
          18rem circle at var(--nx-px, 50%) var(--nx-py, 40%),
          #000,
          transparent 70%);
      opacity: 0.55;
      animation: inherit;
    }
    > i:nth-child(2) {
      inset: -20% 15% auto;
      block-size: 60%;
      background:
        radial-gradient(
          ellipse at 50% 0%,
          var(--nx-accent-soft),
          transparent 70%);
      filter: blur(20px);
    }
  }
  @keyframes nx-grid-pan {
    to {
      background-position: var(--_cell) var(--_cell), var(--_cell) var(--_cell);
    }
  }
  .nx-backdrop[data-variant=stars] {
    background:
      radial-gradient(
        ellipse at 50% 120%,
        color-mix(in oklab, var(--nx-lapis-700) 35%, transparent),
        transparent 60%);
    > i {
      inset: 0;
    }
    > i:nth-child(1) {
      background-image:
        radial-gradient(
          1px 1px at 20px 30px,
          var(--nx-star),
          transparent),
        radial-gradient(
          1px 1px at 80px 120px,
          var(--nx-star),
          transparent),
        radial-gradient(
          1.5px 1.5px at 150px 60px,
          var(--nx-star),
          transparent),
        radial-gradient(
          1px 1px at 210px 180px,
          var(--nx-star),
          transparent),
        radial-gradient(
          1px 1px at 260px 20px,
          var(--nx-star),
          transparent),
        radial-gradient(
          1.5px 1.5px at 40px 220px,
          var(--nx-star),
          transparent),
        radial-gradient(
          1px 1px at 120px 250px,
          var(--nx-star),
          transparent);
      background-size: 290px 290px;
      opacity: 0.55;
      animation: nx-twinkle 5s var(--nx-ease-in-out) infinite alternate;
    }
    > i:nth-child(2) {
      background-image:
        radial-gradient(
          1px 1px at 60px 90px,
          var(--nx-star),
          transparent),
        radial-gradient(
          2px 2px at 190px 140px,
          var(--nx-gold-300),
          transparent),
        radial-gradient(
          1px 1px at 330px 60px,
          var(--nx-star),
          transparent),
        radial-gradient(
          1.5px 1.5px at 280px 320px,
          var(--nx-cyan-300),
          transparent),
        radial-gradient(
          1px 1px at 100px 360px,
          var(--nx-star),
          transparent);
      background-size: 420px 420px;
      opacity: 0.7;
      animation: nx-twinkle 7s var(--nx-ease-in-out) infinite alternate-reverse;
    }
    > i:nth-child(3) {
      inset: 8% 6% auto auto;
      inline-size: min(34vmax, 420px);
      aspect-ratio: 1;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23a3a8ff' stroke-opacity='.35' stroke-width='.6'%3E%3Cpath d='M20 150 62 118 98 126 132 84 170 62M98 126 110 170M132 84 118 40'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Ccircle cx='20' cy='150' r='1.6'/%3E%3Ccircle cx='62' cy='118' r='2'/%3E%3Ccircle cx='98' cy='126' r='1.4'/%3E%3Ccircle cx='132' cy='84' r='2.4'/%3E%3Ccircle cx='170' cy='62' r='1.6'/%3E%3Ccircle cx='110' cy='170' r='1.2'/%3E%3Ccircle cx='118' cy='40' r='1.8'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
      opacity: 0.8;
      animation: nx-float 9s var(--nx-ease-in-out) infinite;
    }
  }
  @keyframes nx-twinkle {
    from {
      opacity: 0.25;
    }
  }
  .nx-backdrop[data-variant=beams] {
    mask-image:
      linear-gradient(
        to bottom,
        #000 40%,
        transparent);
    > i {
      inset-block-start: -40%;
      inline-size: 1px;
      block-size: 45%;
      background:
        linear-gradient(
          to bottom,
          transparent,
          var(--nx-cyan-400),
          transparent);
      box-shadow: 0 0 12px 1px color-mix(in oklab, var(--nx-cyan-400) 45%, transparent);
      opacity: 0.8;
      animation: nx-beam 7s linear infinite;
    }
    > i:nth-child(1) {
      left: 22%;
    }
    > i:nth-child(2) {
      left: 58%;
      animation-duration: 9s;
      animation-delay: -3s;
      background:
        linear-gradient(
          to bottom,
          transparent,
          var(--nx-lapis-400),
          transparent);
    }
    > i:nth-child(3) {
      left: 81%;
      animation-duration: 6s;
      animation-delay: -5s;
      background:
        linear-gradient(
          to bottom,
          transparent,
          var(--nx-gold-400),
          transparent);
    }
  }
  @keyframes nx-beam {
    to {
      translate: 0 330%;
    }
  }
  .nx-backdrop[data-variant=dots] {
    background-image: radial-gradient(color-mix(in oklab, var(--nx-text) 18%, transparent) 1px, transparent 1.5px);
    background-size: 22px 22px;
    mask-image:
      radial-gradient(
        ellipse 70% 60% at 50% 40%,
        #000 20%,
        transparent 75%);
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-backdrop,
    .nx-backdrop > i {
      animation: none !important;
    }
  }
}

/* src/css/components/pricing.css */
@layer nx.components {
  .nx-pricing {
    display: grid;
    gap: var(--nx-space-8);
    justify-items: center;
  }
  .nx-pricing-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-3);
  }
  .nx-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
    align-items: stretch;
    gap: var(--nx-space-6);
    inline-size: 100%;
  }
  .nx-plan {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: var(--nx-space-4);
    padding: var(--nx-space-8) var(--nx-space-6);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-2xl);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-sm), inset 0 1px 0 var(--nx-highlight);
    transition: translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle), box-shadow var(--nx-dur-slow) var(--nx-ease-out);
    &:hover {
      translate: 0 calc(-4px * var(--nx-motion));
      box-shadow: var(--nx-shadow-lg), inset 0 1px 0 var(--nx-highlight);
    }
    &[data-featured] {
      border-color: transparent;
      background:
        linear-gradient(var(--nx-surface), var(--nx-surface)) padding-box,
        conic-gradient(
          from var(--nx-angle),
          var(--nx-lapis-500),
          var(--nx-violet-500),
          var(--nx-cyan-400),
          var(--nx-gold-400),
          var(--nx-lapis-500)) border-box;
      border-width: 1.5px;
      box-shadow: var(--nx-shadow-glow), var(--nx-shadow-lg);
      animation: nx-turn 8s linear infinite;
      &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background:
          radial-gradient(
            ellipse 90% 50% at 50% 0%,
            var(--nx-accent-soft),
            transparent 70%);
      }
    }
  }
  .nx-plan-flag {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    translate: calc(-50% * var(--nx-dir)) -50%;
    padding: 0.25rem 0.75rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-gradient-brand);
    color: #fff;
    font-size: var(--nx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nx-tracking-wide);
    box-shadow: var(--nx-shadow-md);
    white-space: nowrap;
  }
  .nx-plan-name {
    margin: 0;
    font: 650 var(--nx-text-lg) / 1.3 var(--nx-font-display);
  }
  .nx-plan-description {
    margin: 0;
    min-block-size: 2lh;
    font-size: var(--nx-text-sm);
    color: var(--nx-text-muted);
  }
  .nx-plan-price {
    display: flex;
    align-items: baseline;
    gap: var(--nx-space-1);
    margin: 0;
    .nx-number {
      font: 700 var(--nx-text-5xl) / 1 var(--nx-font-sans);
      letter-spacing: var(--nx-tracking-tighter);
    }
  }
  .nx-plan-currency {
    font-size: var(--nx-text-xl);
    font-weight: 600;
    color: var(--nx-text-muted);
    align-self: flex-start;
    margin-block-start: 0.3rem;
  }
  .nx-plan-period {
    font-size: var(--nx-text-sm);
    color: var(--nx-text-muted);
  }
  .nx-plan-features {
    display: grid;
    gap: var(--nx-space-3);
    flex: 1;
    margin: 0;
    padding: var(--nx-space-4) 0 0;
    border-block-start: 1px solid var(--nx-border);
    list-style: none;
    font-size: var(--nx-text-sm);
    li {
      display: flex;
      align-items: flex-start;
      gap: var(--nx-space-2);
    }
    .nx-icon {
      margin-block-start: 0.15rem;
      color: var(--nx-success-text);
    }
    li[data-excluded] {
      color: var(--nx-text-subtle);
    }
    li[data-excluded] .nx-icon {
      color: var(--nx-text-subtle);
    }
  }
  .nx-plan-action {
    margin-block-start: var(--nx-space-2);
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-plan[data-featured] {
      animation: none;
    }
  }
}

/* src/css/components/feedback.css */
@layer nx.components {
  :is(.nx-alert, .nx-badge, .nx-toast) {
    --_tone: var(--nx-text-subtle);
    --_tone-soft: var(--nx-surface-2);
    --_tone-text: var(--nx-text-muted);
    &[data-tone=accent] {
      --_tone: var(--nx-accent);
      --_tone-soft: var(--nx-accent-soft);
      --_tone-text: var(--nx-accent-text);
    }
    &[data-tone=success] {
      --_tone: var(--nx-success);
      --_tone-soft: var(--nx-success-soft);
      --_tone-text: var(--nx-success-text);
    }
    &[data-tone=warning] {
      --_tone: var(--nx-warning);
      --_tone-soft: var(--nx-warning-soft);
      --_tone-text: var(--nx-warning-text);
    }
    &[data-tone=danger] {
      --_tone: var(--nx-danger);
      --_tone-soft: var(--nx-danger-soft);
      --_tone-text: var(--nx-danger-text);
    }
    &[data-tone=info] {
      --_tone: var(--nx-info);
      --_tone-soft: var(--nx-info-soft);
      --_tone-text: var(--nx-info-text);
    }
    &[data-tone=gold] {
      --_tone: var(--nx-gold);
      --_tone-soft: var(--nx-gold-soft);
      --_tone-text: var(--nx-gold-text);
    }
  }
  .nx-toaster {
    --_sign: -1;
    --_gap: 0.75rem;
    position: fixed;
    inset: auto;
    inset-block-end: var(--nx-space-6);
    inset-inline-end: var(--nx-space-6);
    z-index: var(--nx-z-toast);
    inline-size: min(24rem, calc(100vw - 2rem));
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    overflow: visible;
    &[data-position^=top] {
      --_sign: 1;
      inset-block: var(--nx-space-6) auto;
    }
    &[data-position$=start] {
      inset-inline: var(--nx-space-6) auto;
    }
    &[data-position$=center] {
      inset-inline: 0;
      margin-inline: auto;
    }
    @media (max-width: 40rem) {
      inset-inline: var(--nx-space-4) !important;
      inline-size: auto;
    }
  }
  .nx-toast-list {
    position: relative;
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-toast {
    grid-area: 1 / 1;
    align-self: end;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: var(--nx-space-1) var(--nx-space-3);
    padding: var(--nx-space-4);
    padding-inline-end: var(--nx-space-10);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-lg);
    color: var(--nx-text);
    z-index: calc(100 - var(--i, 0));
    translate: var(--nx-dx, 0px) calc(var(--_sign) * var(--i, 0) * 0.875rem);
    scale: calc(1 - var(--i, 0) * 0.05);
    transform-origin: 50% calc(50% - var(--_sign) * 50%);
    opacity: 1;
    touch-action: pan-y;
    transition:
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      scale var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      opacity var(--nx-dur-slow) var(--nx-ease-out),
      block-size var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    @starting-style {
      translate: 0 calc(var(--_sign) * -110%);
      opacity: 0;
      scale: 0.96;
    }
    &:not([data-front]) {
      block-size: var(--nx-front-height, auto);
      overflow: clip;
      > * {
        opacity: 0;
        transition: opacity var(--nx-dur-fast);
      }
    }
    &:nth-child(n+4 of :not([data-state=closing])) {
      opacity: 0;
      pointer-events: none;
    }
    &[data-swiping] {
      transition: none;
    }
    &::after {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block-end: 100%;
      block-size: calc(var(--_gap) + 1px);
    }
    &[data-state=closing] {
      translate: calc(var(--nx-dx, 0px) + var(--nx-exit-x, 0) * 110%) calc(var(--_sign) * var(--i, 0) * 0.875rem);
      opacity: 0;
      scale: 0.96;
      pointer-events: none;
      transition-duration: var(--nx-dur-slow);
      transition-timing-function: var(--nx-ease-out);
    }
  }
  .nx-toaster[data-position^=top] .nx-toast {
    align-self: start;
    &::after {
      inset-block: 100% auto;
    }
  }
  .nx-toaster:is(:hover, :focus-within) .nx-toast:not([data-state=closing]),
  .nx-toaster[data-expanded] .nx-toast:not([data-state=closing]) {
    translate: var(--nx-dx, 0px) calc(var(--_sign) * var(--nx-offset, 0px));
    scale: 1;
    block-size: auto;
    > * {
      opacity: 1;
    }
  }
  .nx-toaster:is(:hover, :focus-within) .nx-toast:nth-child(n+4 of :not([data-state=closing])),
  .nx-toaster[data-expanded] .nx-toast:nth-child(n+4 of :not([data-state=closing])) {
    opacity: 1;
    pointer-events: auto;
  }
  .nx-toast-icon {
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: 50%;
    background: var(--_tone-soft);
    color: var(--_tone-text);
    .nx-icon {
      inline-size: 0.95rem;
      block-size: 0.95rem;
    }
  }
  .nx-toast-body {
    display: grid;
    gap: 0.15rem;
    min-inline-size: 0;
  }
  .nx-toast-title {
    margin: 0;
    font-size: var(--nx-text-sm);
    font-weight: 600;
    line-height: 1.45;
  }
  .nx-toast-description {
    margin: 0;
    font-size: var(--nx-text-sm);
    color: var(--nx-text-muted);
    line-height: 1.5;
  }
  .nx-toast-action {
    grid-column: 2;
    justify-self: start;
    margin-block-start: var(--nx-space-2);
  }
  .nx-toast-close {
    position: absolute;
    inset-block-start: var(--nx-space-3);
    inset-inline-end: var(--nx-space-3);
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: transparent;
    color: var(--nx-text-subtle);
    cursor: pointer;
    &:hover {
      background: var(--nx-surface-2);
      color: var(--nx-text);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
    }
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  .nx-toast-timer {
    position: absolute;
    inset-inline: var(--nx-space-4);
    inset-block-end: 0;
    block-size: 2px;
    border-radius: 1px;
    background: var(--_tone);
    opacity: 0.55;
    transform-origin: left;
    animation: nx-toast-timer var(--nx-duration, 5s) linear forwards;
  }
  :where([dir=rtl]) .nx-toast-timer {
    transform-origin: right;
  }
  .nx-toaster:is(:hover, :focus-within) .nx-toast-timer,
  .nx-toast[data-paused] .nx-toast-timer {
    animation-play-state: paused;
  }
  @keyframes nx-toast-timer {
    to {
      scale: 0 1;
    }
  }
  .nx-alert {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: var(--nx-space-3);
    padding: var(--nx-space-4);
    border: 1px solid color-mix(in oklab, var(--_tone) 30%, transparent);
    border-radius: var(--nx-radius-lg);
    background: var(--_tone-soft);
    color: var(--nx-text);
    interpolate-size: allow-keywords;
    transition:
      opacity var(--nx-dur-base) var(--nx-ease-out),
      scale var(--nx-dur-base) var(--nx-ease-out),
      block-size var(--nx-dur-slow) var(--nx-ease-out),
      padding var(--nx-dur-slow) var(--nx-ease-out),
      margin var(--nx-dur-slow) var(--nx-ease-out);
    &[data-variant=outline] {
      background: transparent;
    }
    &[data-variant=accent-bar] {
      border-color: var(--nx-border);
      border-inline-start: 3px solid var(--_tone);
      background: var(--nx-surface);
    }
    &[data-state=closing] {
      opacity: 0;
      scale: 0.98;
      block-size: 0;
      padding-block: 0;
      margin-block: 0;
      overflow: clip;
    }
  }
  .nx-alert-icon {
    display: inline-flex;
    margin-block-start: 0.1rem;
    color: var(--_tone-text);
  }
  .nx-alert-content {
    display: grid;
    gap: var(--nx-space-1);
    min-inline-size: 0;
  }
  .nx-alert-title {
    margin: 0;
    font-weight: 600;
    font-size: var(--nx-text-sm);
  }
  .nx-alert-description {
    margin: 0;
    font-size: var(--nx-text-sm);
    color: var(--nx-text-muted);
  }
  .nx-alert-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nx-space-2);
    margin-block-start: var(--nx-space-2);
  }
  .nx-alert-close {
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    margin: -0.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: transparent;
    color: var(--nx-text-subtle);
    cursor: pointer;
    &:hover {
      background: color-mix(in oklab, var(--_tone) 12%, transparent);
      color: var(--nx-text);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
    }
  }
  .nx-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.15em 0.6em;
    border: 1px solid transparent;
    border-radius: var(--nx-radius-full);
    background: var(--_tone-soft);
    color: var(--_tone-text);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    &[data-variant=solid] {
      background: var(--_tone);
      color: #fff;
    }
    &[data-variant=solid][data-tone=gold] {
      color: var(--nx-gold-contrast);
    }
    &[data-variant=outline] {
      background: transparent;
      border-color: color-mix(in oklab, var(--_tone) 45%, transparent);
    }
    &[data-size=lg] {
      font-size: var(--nx-text-sm);
      padding: 0.25em 0.75em;
    }
    &[data-dot]::before {
      content: "";
      inline-size: 0.45em;
      block-size: 0.45em;
      border-radius: 50%;
      background: currentColor;
    }
    &[data-pulse] {
      position: relative;
    }
    &[data-pulse]::before {
      box-shadow: 0 0 0 0 currentColor;
      animation: nx-badge-pulse 1.8s var(--nx-ease-out) infinite;
    }
    &[data-animate] {
      animation: nx-pop 420ms var(--nx-spring-bouncy);
    }
  }
  @keyframes nx-badge-pulse {
    0% {
      box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 55%, transparent);
    }
    80%, 100% {
      box-shadow: 0 0 0 0.45em transparent;
    }
  }
  .nx-tooltip {
    position: fixed;
    inset: auto;
    margin: 0;
    max-inline-size: 18rem;
    padding: 0.4rem 0.65rem;
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: var(--nx-surface-inverse);
    color: var(--nx-text-inverse);
    font: 500 var(--nx-text-xs) / 1.45 var(--nx-font-sans);
    box-shadow: var(--nx-shadow-md);
    overflow: visible;
    z-index: var(--nx-z-tooltip);
    pointer-events: auto;
    opacity: 0;
    scale: 0.94;
    translate: var(--_from-x, 0) var(--_from-y, 4px);
    transition:
      opacity var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      translate var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      display var(--nx-dur-fast) allow-discrete,
      overlay var(--nx-dur-fast) allow-discrete;
    &[data-side=bottom] {
      --_from-y: -4px;
    }
    &[data-side=left] {
      --_from-x: 4px;
      --_from-y: 0;
    }
    &[data-side=right] {
      --_from-x: -4px;
      --_from-y: 0;
    }
  }
  .nx-tooltip:where(:popover-open, [data-open]) {
    opacity: 1;
    scale: 1;
    translate: 0 0;
    @starting-style {
      opacity: 0;
      scale: 0.94;
      translate: var(--_from-x, 0) var(--_from-y, 4px);
    }
  }
  .nx-tooltip:not([popover]):not([data-open]) {
    display: none;
  }
  .nx-progress {
    --_fill: var(--nx-series, var(--nx-accent));
    appearance: none;
    display: block;
    inline-size: 100%;
    block-size: var(--nx-progress-height, 0.375rem);
    border: 0;
    border-radius: var(--nx-radius-full);
    background:
      linear-gradient(
        calc(90deg * var(--nx-dir)),
        var(--_fill) calc(var(--nx-value) * 1%),
        var(--nx-surface-3) 0);
    overflow: clip;
    transition: --nx-value 0s;
    &::-webkit-progress-bar {
      background: transparent;
    }
    &::-webkit-progress-value {
      background: transparent;
    }
    &::-moz-progress-bar {
      background: transparent;
    }
    &[data-tone=success] {
      --_fill: var(--nx-success);
    }
    &[data-tone=warning] {
      --_fill: var(--nx-warning);
    }
    &[data-tone=danger] {
      --_fill: var(--nx-danger);
    }
    &[data-tone=brand] {
      --_fill: var(--nx-lapis-500);
    }
    &:indeterminate {
      background:
        linear-gradient(
          90deg,
          transparent,
          var(--_fill),
          transparent) 0 0 / 40% 100% no-repeat,
        var(--nx-surface-3);
      animation: nx-progress-slide 1.4s var(--nx-ease-in-out) infinite;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .nx-progress {
      transition: --nx-value 600ms var(--nx-ease-out);
    }
  }
  @keyframes nx-progress-slide {
    from {
      background-position: -40% 0, 0 0;
    }
    to {
      background-position: 140% 0, 0 0;
    }
  }
  .nx-skeleton {
    display: block;
    block-size: 1rem;
    border-radius: var(--nx-radius-sm);
    background:
      linear-gradient(
        100deg,
        var(--nx-skeleton) 40%,
        var(--nx-skeleton-shine) 50%,
        var(--nx-skeleton) 60%) var(--nx-skeleton) 0 0 / 300% 100%;
    animation: nx-sheen 1.6s linear infinite;
    &[data-shape=text] {
      block-size: 0.8em;
      border-radius: var(--nx-radius-xs);
    }
    &[data-shape=text]:last-child:not(:only-child) {
      inline-size: 65%;
    }
    &[data-shape=circle] {
      border-radius: 50%;
      aspect-ratio: 1;
      inline-size: var(--nx-skeleton-size, 2.5rem);
      block-size: auto;
    }
    &[data-shape=rect] {
      border-radius: var(--nx-radius-lg);
      block-size: var(--nx-skeleton-height, 8rem);
    }
  }
  .nx-spinner {
    --_size: 1.5rem;
    --_thickness: 2.5px;
    --_duration: 0.9s;
    appearance: none;
    display: inline-block;
    flex: none;
    inline-size: var(--_size);
    block-size: var(--_size);
    border: 0;
    border-radius: 50%;
    background:
      conic-gradient(
        from 0deg,
        transparent 10%,
        currentColor);
    mask:
      radial-gradient(
        farthest-side,
        transparent calc(100% - var(--_thickness)),
        #000 calc(100% - var(--_thickness) + 0.5px));
    animation: nx-spin var(--_duration) linear infinite;
    vertical-align: middle;
    &::-webkit-progress-bar,
    &::-webkit-progress-value {
      background: transparent;
    }
    &::-moz-progress-bar {
      background: transparent;
    }
    &[data-size=sm] {
      --_size: 1em;
      --_thickness: 2px;
    }
    &[data-size=lg] {
      --_size: 2.5rem;
      --_thickness: 3px;
    }
    &[data-tone=accent] {
      color: var(--nx-accent);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-spinner {
      --_duration: 3s;
    }
  }
  .nx-orbit {
    display: inline-grid;
    place-items: center;
    inline-size: var(--nx-loader-size, 3.5rem);
    aspect-ratio: 1;
    svg {
      inline-size: 100%;
      block-size: 100%;
      overflow: visible;
    }
  }
  .nx-orbit-ring {
    transform-origin: 32px 32px;
    rotate: var(--r, 0deg);
    ellipse {
      fill: none;
      stroke-width: 1.75;
      stroke-linecap: round;
    }
    .nx-orbit-path {
      stroke: color-mix(in oklab, currentColor 14%, transparent);
    }
    .nx-orbit-comet {
      stroke: var(--c, var(--nx-accent));
      stroke-dasharray: 16 84;
      animation: nx-orbit-dash var(--d, 1.6s) linear infinite;
      filter: drop-shadow(0 0 3px var(--c, var(--nx-accent)));
    }
  }
  .nx-orbit-core {
    fill: var(--nx-gold);
    transform-origin: 32px 32px;
    animation: nx-orbit-core 1.6s var(--nx-ease-in-out) infinite;
  }
  @keyframes nx-orbit-dash {
    to {
      stroke-dashoffset: -100;
    }
  }
  @keyframes nx-orbit-core {
    50% {
      scale: 0.7;
      opacity: 0.7;
    }
  }
  .nx-dots {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    color: var(--nx-text-subtle);
    > i {
      inline-size: 0.45em;
      block-size: 0.45em;
      border-radius: 50%;
      background: currentColor;
      animation: nx-dot 1.2s var(--nx-ease-in-out) infinite;
    }
    > i:nth-child(2) {
      animation-delay: 0.15s;
    }
    > i:nth-child(3) {
      animation-delay: 0.3s;
    }
  }
  @keyframes nx-dot {
    0%, 60%, 100% {
      translate: 0 0;
      opacity: 0.4;
    }
    30% {
      translate: 0 calc(-0.4em * var(--nx-motion));
      opacity: 1;
    }
  }
  .nx-cuneiform {
    display: inline-flex;
    color: var(--nx-accent-text);
    svg {
      inline-size: var(--nx-loader-size, 4rem);
      block-size: auto;
      overflow: visible;
    }
  }
  .nx-wedge {
    fill: currentColor;
    transform-box: fill-box;
    transform-origin: 20% 50%;
    opacity: 0;
    animation: nx-wedge 2.4s var(--nx-ease-out) infinite;
    animation-delay: calc(var(--i, 0) * 0.28s);
  }
  .nx-cuneiform g:nth-child(even) .nx-wedge {
    fill: var(--nx-gold);
  }
  @keyframes nx-wedge {
    0% {
      opacity: 0;
      scale: calc(1 + 0.6 * var(--nx-motion));
    }
    12% {
      opacity: 1;
      scale: 1;
    }
    70% {
      opacity: 1;
      scale: 1;
    }
    90%, 100% {
      opacity: 0;
      scale: 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-skeleton,
    .nx-progress:indeterminate {
      animation-duration: 4s;
    }
    .nx-orbit-comet {
      animation-duration: 5s;
    }
    .nx-toast-timer {
      animation: none;
      scale: 1;
    }
  }
}

/* src/css/components/display.css */
@layer nx.components {
  .nx-avatar {
    --_size: 2.5rem;
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: var(--_size);
    block-size: var(--_size);
    border-radius: 50%;
    background: var(--nx-gradient-brand);
    color: #fff;
    font-size: calc(var(--_size) * 0.38);
    font-weight: 600;
    line-height: 1;
    -webkit-user-select: none;
    user-select: none;
    &[data-size=xs] {
      --_size: 1.5rem;
    }
    &[data-size=sm] {
      --_size: 2rem;
    }
    &[data-size=lg] {
      --_size: 3.25rem;
    }
    &[data-size=xl] {
      --_size: 4.5rem;
    }
    &[data-shape=square] {
      border-radius: var(--nx-radius-md);
    }
    &[data-status]::after {
      content: "";
      position: absolute;
      inset-block-end: 2%;
      inset-inline-end: 2%;
      inline-size: 28%;
      block-size: 28%;
      border: 2px solid var(--nx-surface);
      border-radius: 50%;
      background: var(--nx-text-subtle);
    }
    &[data-status=online]::after {
      background: var(--nx-success);
    }
    &[data-status=busy]::after {
      background: var(--nx-danger);
    }
    &[data-status=away]::after {
      background: var(--nx-warning);
    }
  }
  .nx-avatar-image {
    inline-size: 100%;
    block-size: 100%;
    border-radius: inherit;
    object-fit: cover;
  }
  .nx-avatar-group {
    display: inline-flex;
    align-items: center;
    .nx-avatar {
      box-shadow: 0 0 0 2px var(--nx-surface);
      transition: translate var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy), scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
    }
    .nx-avatar + .nx-avatar {
      margin-inline-start: calc(var(--_size, 2.5rem) * -0.3);
    }
    .nx-avatar:is(:hover, :focus-visible) {
      z-index: 1;
      translate: 0 calc(-4px * var(--nx-motion));
      scale: calc(1 + 0.08 * var(--nx-motion));
    }
    .nx-avatar:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-avatar-more {
    background: var(--nx-surface-3);
    color: var(--nx-text-muted);
    font-size: calc(var(--_size) * 0.32);
  }
  .nx-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.15em;
    min-inline-size: 1.6em;
    padding: 0.1em 0.4em;
    border: 1px solid var(--nx-border);
    border-block-end-width: 2px;
    border-radius: var(--nx-radius-xs);
    background: var(--nx-surface-2);
    color: var(--nx-text-muted);
    font: 500 0.75em / 1.4 var(--nx-font-mono);
    white-space: nowrap;
  }
  .nx-rating {
    display: inline-flex;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    border: 0;
    direction: ltr;
  }
  .nx-rating-star {
    position: relative;
    display: inline-grid;
    color: var(--nx-border-strong);
    cursor: pointer;
    transition: color var(--nx-dur-fast) var(--nx-ease-out), scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
    svg {
      inline-size: var(--nx-rating-size, 1.5rem);
      block-size: var(--nx-rating-size, 1.5rem);
      fill: currentColor;
    }
    &:has(:focus-visible) {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
      border-radius: var(--nx-radius-xs);
    }
  }
  .nx-rating-input {
    appearance: none;
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  .nx-rating-star:has(.nx-rating-input:checked),
  .nx-rating-star:has(~ .nx-rating-star .nx-rating-input:checked) {
    color: var(--nx-gold);
  }
  .nx-rating-star:has(.nx-rating-input:checked) svg {
    animation: nx-pop 460ms var(--nx-spring-bouncy);
  }
  .nx-rating:has(.nx-rating-star:hover) .nx-rating-star {
    color: var(--nx-border-strong);
  }
  .nx-rating:has(.nx-rating-star:hover) .nx-rating-star:hover,
  .nx-rating:has(.nx-rating-star:hover) .nx-rating-star:has(~ .nx-rating-star:hover) {
    color: var(--nx-gold);
  }
  .nx-rating:has(.nx-rating-star:hover) .nx-rating-star:hover {
    scale: calc(1 + 0.15 * var(--nx-motion));
  }
  .nx-rating:has(:disabled) {
    pointer-events: none;
    opacity: 0.6;
  }
  .nx-steps {
    display: flex;
    gap: var(--nx-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: nx-step;
    &[data-orientation=vertical] {
      flex-direction: column;
      gap: var(--nx-space-6);
    }
  }
  .nx-step {
    position: relative;
    display: flex;
    flex: 1;
    align-items: flex-start;
    gap: var(--nx-space-3);
    min-inline-size: 0;
    counter-increment: nx-step;
    &:not(:last-child)::before,
    &:not(:last-child)::after {
      content: "";
      position: absolute;
      inset-block-start: calc(1rem - 1px);
      inset-inline-start: calc(2rem + var(--nx-space-2));
      inset-inline-end: var(--nx-space-2);
      block-size: 2px;
      border-radius: 1px;
      background: var(--nx-border);
    }
    &:not(:last-child)::after {
      background: var(--nx-accent);
      scale: 0 1;
      transform-origin: left;
      transition: scale 700ms var(--nx-ease-out);
    }
    &[data-status=complete]:not(:last-child)::after {
      scale: 1 1;
    }
  }
  :where([dir=rtl]) .nx-step:not(:last-child)::after {
    transform-origin: right;
  }
  .nx-steps[data-orientation=vertical] .nx-step:not(:last-child)::before,
  .nx-steps[data-orientation=vertical] .nx-step:not(:last-child)::after {
    inset-block: calc(2rem + var(--nx-space-2)) calc(var(--nx-space-6) * -1 + var(--nx-space-2));
    inset-inline: calc(1rem - 1px) auto;
    inline-size: 2px;
    block-size: auto;
  }
  .nx-steps[data-orientation=vertical] .nx-step:not(:last-child)::after {
    scale: 1 0;
    transform-origin: top;
  }
  .nx-steps[data-orientation=vertical] .nx-step[data-status=complete]:not(:last-child)::after {
    scale: 1 1;
  }
  .nx-step-marker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2rem;
    block-size: 2rem;
    border: 2px solid var(--nx-border);
    border-radius: 50%;
    background: var(--nx-surface);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    font-weight: 700;
    transition:
      background-color var(--nx-dur-base),
      border-color var(--nx-dur-base),
      color var(--nx-dur-base),
      scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
    &:empty::before {
      content: counter(nx-step);
    }
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  .nx-step[data-status=current] .nx-step-marker {
    border-color: var(--nx-accent);
    color: var(--nx-accent-text);
    box-shadow: 0 0 0 4px var(--nx-accent-soft);
    scale: calc(1 + 0.06 * var(--nx-motion));
  }
  .nx-step[data-status=complete] .nx-step-marker {
    border-color: var(--nx-accent);
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
  }
  .nx-step-text {
    display: grid;
    gap: 0.1rem;
    padding-block-start: 0.3rem;
    min-inline-size: 0;
  }
  .nx-step-title {
    font-size: var(--nx-text-sm);
    font-weight: 600;
  }
  .nx-step[data-status=upcoming] .nx-step-title {
    color: var(--nx-text-muted);
  }
  .nx-step-description {
    font-size: var(--nx-text-xs);
    color: var(--nx-text-muted);
  }
  .nx-marquee {
    --_gap: var(--nx-marquee-gap, var(--nx-space-10));
    position: relative;
    display: flex;
    min-inline-size: 0;
    contain: inline-size;
    overflow: clip;
    mask-image:
      linear-gradient(
        90deg,
        transparent,
        #000 8%,
        #000 92%,
        transparent);
  }
  .nx-marquee-track {
    display: flex;
    flex: none;
    animation: nx-marquee var(--nx-duration, 40s) linear infinite;
  }
  .nx-marquee[data-direction=reverse] .nx-marquee-track {
    animation-direction: reverse;
  }
  .nx-marquee:is(:hover, :focus-within, [data-paused]) .nx-marquee-track {
    animation-play-state: paused;
  }
  .nx-marquee-group {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--_gap);
    margin: 0;
    padding: 0;
    padding-inline-end: var(--_gap);
    list-style: none;
  }
  @keyframes nx-marquee {
    to {
      translate: calc(-50% * var(--nx-dir)) 0;
    }
  }
  .nx-marquee-toggle {
    position: absolute;
    inset-block-end: var(--nx-space-2);
    inset-inline-end: var(--nx-space-2);
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    padding: 0;
    border: 1px solid var(--nx-border);
    border-radius: 50%;
    background: var(--nx-surface);
    color: var(--nx-text-muted);
    opacity: 0;
    cursor: pointer;
    transition: opacity var(--nx-dur-fast);
    .nx-icon {
      inline-size: 0.9rem;
      block-size: 0.9rem;
    }
    &:focus-visible {
      opacity: 1;
      outline: 2px solid var(--nx-ring);
    }
  }
  .nx-marquee:hover .nx-marquee-toggle {
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-marquee {
      overflow-x: auto;
      mask-image: none;
    }
    .nx-marquee-track {
      animation: none;
    }
    .nx-marquee-group[aria-hidden=true],
    .nx-marquee-toggle {
      display: none;
    }
  }
  .nx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--nx-grid-min, 16rem)), 1fr));
    gap: var(--nx-grid-gap, var(--nx-space-6));
  }
  .nx-bento {
    display: grid;
    grid-template-columns: repeat(var(--nx-cols, 3), minmax(0, 1fr));
    grid-auto-rows: minmax(var(--nx-row, 12rem), auto);
    grid-auto-flow: dense;
    gap: var(--nx-bento-gap, var(--nx-space-4));
  }
  .nx-bento-item {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: var(--nx-space-2);
    grid-column: span var(--nx-col-span, 1);
    grid-row: span var(--nx-row-span, 1);
    padding: var(--nx-space-6);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-2xl);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-sm), inset 0 1px 0 var(--nx-highlight);
    overflow: clip;
    transition:
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      box-shadow var(--nx-dur-slow),
      border-color var(--nx-dur-base);
    &:is(a, [data-interactive]):hover {
      translate: 0 calc(-3px * var(--nx-motion));
      box-shadow: var(--nx-shadow-lg);
      border-color: var(--nx-accent-border);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 3px;
    }
  }
  :is(a).nx-bento-item {
    color: inherit;
    text-decoration: none;
  }
  .nx-bento-media {
    flex: 1;
    display: grid;
    place-items: center;
    min-block-size: 6rem;
    margin: calc(var(--nx-space-6) * -1) calc(var(--nx-space-6) * -1) var(--nx-space-2);
    overflow: clip;
    > img,
    > video {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }
  .nx-bento-title {
    margin: 0;
    font: 650 var(--nx-text-lg) / 1.3 var(--nx-font-display);
  }
  .nx-bento-description {
    margin: 0;
    font-size: var(--nx-text-sm);
    color: var(--nx-text-muted);
  }
  @media (max-width: 56rem) {
    .nx-bento {
      grid-template-columns: repeat(min(var(--nx-cols, 3), 2), minmax(0, 1fr));
    }
    .nx-bento-item {
      grid-column: span min(var(--nx-col-span, 1), 2);
    }
  }
  @media (max-width: 36rem) {
    .nx-bento {
      grid-template-columns: minmax(0, 1fr);
    }
    .nx-bento-item {
      grid-column: span 1;
      grid-row: span 1;
    }
  }
  .nx-divider {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    margin: var(--nx-space-6) 0;
    border: 0;
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    &::before,
    &::after {
      content: "";
      flex: 1;
      block-size: 1px;
      background: var(--nx-border);
    }
    &:empty {
      gap: 0;
    }
  }
}

/* src/css/components/navigation.css */
@layer nx.components {
  .nx-indicator {
    position: absolute;
    top: 0;
    left: 0;
    inline-size: var(--nx-ind-w, 0px);
    block-size: var(--nx-ind-h, 0px);
    translate: var(--nx-ind-x, 0px) var(--nx-ind-y, 0px);
    pointer-events: none;
    transition:
      translate var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      inline-size var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      block-size var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      opacity var(--nx-dur-fast) var(--nx-ease-out);
  }
  :not([data-nx-indicator]) > .nx-indicator,
  [data-nx-indicator=hidden] > .nx-indicator {
    opacity: 0;
  }
  [data-nx-indicator=init] > .nx-indicator {
    transition: none;
  }
  .nx-tabs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nx-space-4);
  }
  .nx-tab-list {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-1);
    justify-self: start;
    max-inline-size: 100%;
    padding: var(--nx-space-1);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface-2);
    overflow-x: auto;
    scrollbar-width: none;
    .nx-indicator {
      z-index: -1;
      border-radius: var(--nx-radius-md);
      background: var(--nx-surface);
      box-shadow: var(--nx-shadow-sm), inset 0 1px 0 var(--nx-highlight);
    }
  }
  .nx-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    min-block-size: 2.25rem;
    padding: 0 var(--nx-space-4);
    border: 0;
    border-radius: var(--nx-radius-md);
    background: transparent;
    color: var(--nx-text-muted);
    font: 500 var(--nx-text-sm) / 1 var(--nx-font-sans);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--nx-dur-base) var(--nx-ease-out);
    &:hover {
      color: var(--nx-text);
    }
    &[aria-selected=true] {
      color: var(--nx-text);
      font-weight: 600;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 1px;
    }
    &:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    .nx-badge {
      font-size: 0.7rem;
    }
  }
  .nx-tabs[data-variant=underline] {
    .nx-tab-list {
      gap: var(--nx-space-5);
      padding: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: inset 0 -1px 0 var(--nx-border);
      .nx-indicator {
        top: auto;
        bottom: 0;
        z-index: 1;
        block-size: 2px;
        translate: var(--nx-ind-x, 0px) 0;
        border-radius: 2px;
        background: var(--nx-accent);
        box-shadow: 0 0 12px var(--nx-accent-soft);
      }
    }
    .nx-tab {
      min-block-size: 2.75rem;
      padding-inline: 0.125rem;
      border-radius: 0;
    }
  }
  .nx-tabs[data-variant=enclosed] .nx-tab-list {
    background: transparent;
    border: 1px solid var(--nx-border);
    .nx-indicator {
      background: var(--nx-accent);
      box-shadow: var(--nx-shadow-glow);
    }
    .nx-tab[aria-selected=true] {
      color: var(--nx-accent-contrast);
    }
  }
  .nx-tab-panel {
    border-radius: var(--nx-radius-md);
    animation: nx-rise var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 4px;
    }
    &[hidden] {
      display: none;
    }
  }
  .nx-segmented {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    max-inline-size: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.25rem;
    border: 0;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-2);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.06);
    &::-webkit-scrollbar {
      display: none;
    }
    .nx-indicator {
      z-index: -1;
      border-radius: var(--nx-radius-full);
      background: var(--nx-surface);
      box-shadow: var(--nx-shadow-sm);
    }
    &[data-tone=accent] .nx-indicator {
      background: var(--nx-accent);
      box-shadow: var(--nx-shadow-glow);
    }
    &[data-size=sm] .nx-segment {
      min-block-size: 1.875rem;
      padding-inline: var(--nx-space-3);
      font-size: var(--nx-text-xs);
    }
  }
  .nx-segment {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    min-block-size: 2.25rem;
    padding-inline: var(--nx-space-4);
    border-radius: var(--nx-radius-full);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: color var(--nx-dur-base) var(--nx-ease-out);
    &:hover {
      color: var(--nx-text);
    }
    &:has(:checked) {
      color: var(--nx-text);
      font-weight: 600;
    }
    &:has(:focus-visible) {
      outline: 2px solid var(--nx-ring);
      outline-offset: 1px;
    }
    &:has(:disabled) {
      opacity: 0.45;
      cursor: not-allowed;
    }
  }
  .nx-segmented[data-tone=accent] .nx-segment:has(:checked) {
    color: var(--nx-accent-contrast);
  }
  .nx-segment-input {
    appearance: none;
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: inherit;
  }
  .nx-navmenu {
    position: relative;
    isolation: isolate;
    > ul {
      display: flex;
      align-items: center;
      gap: var(--nx-space-1);
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .nx-indicator {
      z-index: -1;
      border-radius: var(--nx-radius-full);
      background: var(--nx-surface-2);
    }
  }
  .nx-navmenu-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    min-block-size: 2.25rem;
    padding-inline: var(--nx-space-4);
    border-radius: var(--nx-radius-full);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--nx-dur-base) var(--nx-ease-out);
    &:hover,
    &:focus-visible,
    &[aria-current=page] {
      color: var(--nx-text);
    }
    &[aria-current=page] {
      font-weight: 600;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 1px;
    }
  }
  .nx-navmenu-link[aria-current=page]::after {
    content: "";
    position: absolute;
    inset-block-end: 0.15rem;
    inline-size: 0.3rem;
    block-size: 0.3rem;
    border-radius: 50%;
    background: var(--nx-accent);
    translate: calc(-50% * var(--nx-dir)) 0;
    inset-inline-start: 50%;
  }
  .nx-dock {
    --_size: var(--nx-dock-size, 2.75rem);
    display: inline-flex;
    align-items: flex-end;
    gap: var(--nx-space-2);
    block-size: calc(var(--_size) + var(--nx-space-4));
    padding: var(--nx-space-2) var(--nx-space-3);
    border: 1px solid var(--nx-glass-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-glass);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow: var(--nx-shadow-lg), inset 0 1px 0 var(--nx-highlight);
    &[data-variant=metal] {
      background:
        linear-gradient(
          180deg,
          color-mix(in oklab, var(--nx-surface) 70%, white),
          var(--nx-surface-2) 55%,
          color-mix(in oklab, var(--nx-surface-3) 85%, black));
      border-color: color-mix(in oklab, var(--nx-border) 60%, white);
      box-shadow:
        var(--nx-shadow-lg),
        inset 0 1px 0 rgb(255 255 255 / 0.6),
        inset 0 -1px 0 rgb(0 0 0 / 0.12);
    }
  }
  .nx-dock-item {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    inline-size: calc(var(--_size) * var(--nx-scale, 1));
    block-size: calc(var(--_size) * var(--nx-scale, 1));
    border: 1px solid var(--nx-border);
    border-radius: 28%;
    background: var(--nx-surface);
    color: var(--nx-text);
    text-decoration: none;
    box-shadow: var(--nx-shadow-sm), inset 0 1px 0 var(--nx-highlight);
    transition:
      inline-size 160ms var(--nx-ease-out),
      block-size 160ms var(--nx-ease-out),
      translate var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
    .nx-icon {
      inline-size: 45%;
      block-size: 45%;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:active {
      translate: 0 calc(-8px * var(--nx-motion));
    }
    &[aria-current=page]::after {
      content: "";
      position: absolute;
      inset-block-end: -0.45rem;
      inline-size: 0.25rem;
      block-size: 0.25rem;
      border-radius: 50%;
      background: var(--nx-text-muted);
    }
  }
  .nx-dock-label {
    position: absolute;
    inset-block-end: calc(100% + 0.6rem);
    padding: 0.25rem 0.55rem;
    border-radius: var(--nx-radius-sm);
    background: var(--nx-surface-inverse);
    color: var(--nx-text-inverse);
    font-size: var(--nx-text-xs);
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    translate: 0 4px;
    pointer-events: none;
    transition: opacity var(--nx-dur-fast), translate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
  }
  .nx-dock-item:is(:hover, :focus-visible) .nx-dock-label {
    opacity: 1;
    translate: 0 0;
  }
  .nx-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nx-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--nx-text-sm);
  }
  .nx-breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-1);
    color: var(--nx-text-muted);
    & + li::before {
      content: "";
      inline-size: 1rem;
      block-size: 1rem;
      background: currentColor;
      opacity: 0.5;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    }
  }
  :where([dir=rtl]) .nx-breadcrumbs li + li::before {
    scale: -1 1;
  }
  .nx-breadcrumbs a {
    border-radius: var(--nx-radius-xs);
    color: inherit;
    text-decoration: none;
    transition: color var(--nx-dur-fast);
    &:hover {
      color: var(--nx-text);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &[aria-current=page] {
      color: var(--nx-text);
      font-weight: 600;
    }
  }
  .nx-pagination {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nx-space-1);
    .nx-indicator {
      z-index: -1;
      border-radius: var(--nx-radius-md);
      background: var(--nx-accent);
      box-shadow: var(--nx-shadow-glow);
    }
  }
  .nx-page-link {
    display: grid;
    place-items: center;
    min-inline-size: 2.25rem;
    block-size: 2.25rem;
    padding-inline: var(--nx-space-2);
    border: 0;
    border-radius: var(--nx-radius-md);
    background: transparent;
    color: var(--nx-text-muted);
    font: 500 var(--nx-text-sm) / 1 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--nx-dur-base), background-color var(--nx-dur-fast);
    &:hover:not([aria-current=page], [aria-disabled=true]) {
      background: var(--nx-surface-2);
      color: var(--nx-text);
    }
    &[aria-current=page] {
      color: var(--nx-accent-contrast);
      font-weight: 700;
    }
    &[aria-disabled=true] {
      opacity: 0.4;
      pointer-events: none;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 1px;
    }
    &[data-gap] {
      pointer-events: none;
    }
  }
  .nx-accordion {
    display: grid;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    overflow: clip;
    &[data-variant=separated] {
      gap: var(--nx-space-3);
      border: 0;
      background: transparent;
      .nx-accordion-item {
        border: 1px solid var(--nx-border);
        border-radius: var(--nx-radius-lg);
        background: var(--nx-surface);
      }
    }
  }
  .nx-accordion-item {
    interpolate-size: allow-keywords;
    & + & {
      border-block-start: 1px solid var(--nx-border);
    }
    &::details-content {
      block-size: 0;
      overflow-y: clip;
      opacity: 0;
      transition:
        block-size var(--nx-spring-soft-duration) var(--nx-spring-soft),
        opacity var(--nx-dur-slow) var(--nx-ease-out),
        content-visibility var(--nx-spring-soft-duration) allow-discrete;
    }
    &[open]::details-content {
      block-size: auto;
      opacity: 1;
    }
  }
  .nx-accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-4);
    padding: var(--nx-space-4) var(--nx-space-5);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
    transition: background-color var(--nx-dur-fast);
    &::-webkit-details-marker {
      display: none;
    }
    &:hover {
      background: var(--nx-surface-2);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: -2px;
    }
    &::after {
      content: "";
      flex: none;
      inline-size: 1.1rem;
      block-size: 1.1rem;
      background: var(--nx-text-subtle);
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
      transition: rotate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    }
  }
  .nx-accordion-item[open] > .nx-accordion-trigger::after {
    rotate: 180deg;
  }
  .nx-accordion-content {
    padding: 0 var(--nx-space-5) var(--nx-space-5);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    line-height: 1.7;
  }
  .nx-menu {
    position: fixed;
    inset: auto;
    margin: 0;
    min-inline-size: 12rem;
    max-block-size: min(24rem, 70vh);
    padding: var(--nx-space-1);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-xl);
    overflow-y: auto;
    z-index: var(--nx-z-dropdown);
    transform-origin: var(--nx-origin, top center);
    opacity: 0;
    scale: 0.96;
    translate: 0 calc(-4px * var(--nx-motion));
    transition:
      opacity var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      translate var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      display var(--nx-dur-fast) allow-discrete,
      overlay var(--nx-dur-fast) allow-discrete;
  }
  .nx-menu:where(:popover-open, [data-open]) {
    opacity: 1;
    scale: 1;
    translate: 0 0;
    @starting-style {
      opacity: 0;
      scale: 0.96;
      translate: 0 calc(-4px * var(--nx-motion));
    }
  }
  .nx-menu:not([popover]):not([data-open]) {
    display: none;
  }
  .nx-menu-item {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    inline-size: 100%;
    min-block-size: 2.25rem;
    padding: 0 var(--nx-space-3);
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: transparent;
    color: inherit;
    font: 400 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    animation: nx-rise 260ms var(--nx-ease-out) both;
    animation-delay: calc(var(--nx-i, 0) * 18ms);
    .nx-icon {
      color: var(--nx-text-subtle);
    }
    .nx-kbd {
      margin-inline-start: auto;
    }
    &:is(:hover, :focus-visible, [data-active]) {
      background: var(--nx-surface-2);
      outline: none;
    }
    &:is(:hover, :focus-visible, [data-active]) .nx-icon {
      color: var(--nx-text);
    }
    &[data-tone=danger] {
      color: var(--nx-danger-text);
    }
    &[data-tone=danger]:is(:hover, :focus-visible) {
      background: var(--nx-danger-soft);
    }
    &:is(:disabled, [aria-disabled=true]) {
      opacity: 0.45;
      cursor: not-allowed;
    }
    &[aria-checked=true]::after {
      content: "\2713" / "";
      margin-inline-start: auto;
      color: var(--nx-accent-text);
      font-weight: 700;
    }
  }
  .nx-menu-label {
    padding: var(--nx-space-2) var(--nx-space-3) var(--nx-space-1);
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    font-weight: 600;
  }
  .nx-menu-separator {
    block-size: 1px;
    margin: var(--nx-space-1) calc(var(--nx-space-1) * -1);
    background: var(--nx-border);
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-accordion-item::details-content {
      transition-duration: 0s;
    }
    .nx-menu-item {
      animation: none;
    }
  }
}

/* src/css/components/overlay.css */
@layer nx.components {
  :root:has(.nx-dialog:modal) {
    overflow: hidden;
    scrollbar-gutter: stable;
  }
  .nx-dialog {
    --_width: 32rem;
    --_from-x: 0px;
    --_from-y: calc(12px * var(--nx-motion));
    --_from-scale: calc(1 - 0.04 * var(--nx-motion));
    position: fixed;
    display: flex;
    flex-direction: column;
    inline-size: min(var(--_width), calc(100vw - 2rem));
    max-block-size: min(85dvh, 52rem);
    margin: auto;
    padding: 0;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-2xl);
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-xl), inset 0 1px 0 var(--nx-highlight);
    overflow: hidden;
    opacity: 0;
    scale: var(--_from-scale);
    translate: var(--_from-x) var(--_from-y);
    transition:
      opacity var(--nx-dur-base) var(--nx-ease-out),
      scale var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      display var(--nx-dur-base) allow-discrete,
      overlay var(--nx-dur-base) allow-discrete;
    &:not([open]) {
      display: none;
    }
    &[data-size=sm] {
      --_width: 24rem;
    }
    &[data-size=lg] {
      --_width: 44rem;
    }
    &[data-size=xl] {
      --_width: 60rem;
    }
    &[data-size=full] {
      --_width: 100vw;
      inline-size: calc(100vw - 2rem);
      max-block-size: calc(100dvh - 2rem);
      block-size: 100%;
    }
    &::backdrop {
      background: transparent;
      -webkit-backdrop-filter: blur(0);
      backdrop-filter: blur(0);
      transition:
        background-color var(--nx-dur-slow) var(--nx-ease-out),
        backdrop-filter var(--nx-dur-slow) var(--nx-ease-out),
        display var(--nx-dur-slow) allow-discrete,
        overlay var(--nx-dur-slow) allow-discrete;
    }
  }
  .nx-dialog[open] {
    opacity: 1;
    scale: 1;
    translate: 0 0;
    @starting-style {
      opacity: 0;
      scale: var(--_from-scale);
      translate: var(--_from-x) var(--_from-y);
    }
    &::backdrop {
      background: var(--nx-backdrop, rgb(0 0 0 / 0.45));
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
    }
  }
  @starting-style {
    .nx-dialog[open]::backdrop {
      background: transparent;
      -webkit-backdrop-filter: blur(0);
      backdrop-filter: blur(0);
    }
  }
  .nx-dialog[data-variant=drawer] {
    --_width: 26rem;
    --_from-x: calc(100% * var(--nx-dir));
    --_from-y: 0px;
    --_from-scale: 1;
    inline-size: min(var(--_width), 100vw);
    block-size: 100dvh;
    max-block-size: 100dvh;
    margin: 0;
    margin-inline-start: auto;
    border-block: 0;
    border-inline-end: 0;
    border-radius: 0;
    border-start-start-radius: var(--nx-radius-2xl);
    border-end-start-radius: var(--nx-radius-2xl);
    transition-duration:
      var(--nx-dur-slow),
      var(--nx-spring-soft-duration),
      var(--nx-spring-soft-duration),
      var(--nx-dur-slow),
      var(--nx-dur-slow);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-spring-soft),
      var(--nx-spring-soft),
      linear,
      linear;
    &[data-side=start] {
      --_from-x: calc(-100% * var(--nx-dir));
      margin-inline: 0 auto;
      border-inline-end: 1px solid var(--nx-border);
      border-inline-start: 0;
      border-radius: 0;
      border-start-end-radius: var(--nx-radius-2xl);
      border-end-end-radius: var(--nx-radius-2xl);
    }
  }
  .nx-dialog[data-variant=sheet] {
    --_from-x: 0px;
    --_from-y: 100%;
    --_from-scale: 1;
    inline-size: min(var(--_width, 40rem), 100vw);
    max-block-size: 90dvh;
    margin: auto auto 0;
    border-block-end: 0;
    border-radius: var(--nx-radius-2xl) var(--nx-radius-2xl) 0 0;
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-spring-soft),
      var(--nx-spring-soft),
      linear,
      linear;
    &::before {
      content: "";
      align-self: center;
      flex: none;
      inline-size: 2.5rem;
      block-size: 0.3rem;
      margin-block-start: var(--nx-space-2);
      border-radius: var(--nx-radius-full);
      background: var(--nx-border-strong);
    }
  }
  .nx-dialog-header {
    display: grid;
    gap: var(--nx-space-1);
    padding: var(--nx-space-6) var(--nx-space-6) var(--nx-space-2);
    padding-inline-end: var(--nx-space-12);
  }
  .nx-dialog-title {
    margin: 0;
    font: 650 var(--nx-text-xl) / 1.3 var(--nx-font-display);
  }
  .nx-dialog-description {
    margin: 0;
    font-size: var(--nx-text-sm);
    color: var(--nx-text-muted);
  }
  .nx-dialog-body {
    flex: 1;
    padding: var(--nx-space-4) var(--nx-space-6);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nx-dialog-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--nx-space-3);
    padding: var(--nx-space-4) var(--nx-space-6) var(--nx-space-6);
  }
  .nx-dialog-close {
    position: absolute;
    inset-block-start: var(--nx-space-4);
    inset-inline-end: var(--nx-space-4);
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-2);
    color: var(--nx-text-muted);
    cursor: pointer;
    transition:
      background-color var(--nx-dur-fast),
      color var(--nx-dur-fast),
      rotate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &:hover {
      background: var(--nx-surface-3);
      color: var(--nx-text);
      rotate: calc(90deg * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  [popover]:not(:popover-open, [data-open]) {
    display: none;
  }
  .nx-popover {
    position: fixed;
    inset: auto;
    margin: 0;
    inline-size: max-content;
    max-inline-size: min(22rem, calc(100vw - 1rem));
    padding: var(--nx-space-4);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-xl);
    z-index: var(--nx-z-dropdown);
    transform-origin: var(--nx-origin, top center);
    opacity: 0;
    scale: 0.96;
    transition:
      opacity var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      display var(--nx-dur-fast) allow-discrete,
      overlay var(--nx-dur-fast) allow-discrete;
  }
  .nx-popover:where(:popover-open, [data-open]) {
    opacity: 1;
    scale: 1;
    @starting-style {
      opacity: 0;
      scale: 0.96;
    }
  }
  .nx-popover:not([popover]):not([data-open]) {
    display: none;
  }
  .nx-command {
    --_width: 38rem;
    margin-block-start: 12vh;
    max-block-size: min(70dvh, 34rem);
  }
  .nx-command-search {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    padding: var(--nx-space-4) var(--nx-space-5);
    border-block-end: 1px solid var(--nx-border);
    color: var(--nx-text-subtle);
    .nx-icon {
      inline-size: 1.25rem;
      block-size: 1.25rem;
    }
  }
  .nx-command-input {
    flex: 1;
    min-inline-size: 0;
    border: 0;
    background: transparent;
    color: var(--nx-text);
    font: 400 var(--nx-text-lg) / 1.5 var(--nx-font-sans);
    &:focus-visible {
      outline: none;
    }
    &::placeholder {
      color: var(--nx-text-subtle);
    }
  }
  .nx-command-list {
    position: relative;
    isolation: isolate;
    flex: 1;
    padding: var(--nx-space-2);
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: var(--nx-space-8);
    .nx-indicator {
      z-index: -1;
      border-radius: var(--nx-radius-md);
      background: var(--nx-surface-2);
      box-shadow: inset 0 0 0 1px var(--nx-border);
    }
  }
  .nx-command-group + .nx-command-group {
    margin-block-start: var(--nx-space-2);
  }
  .nx-command-group-label {
    padding: var(--nx-space-2) var(--nx-space-3) var(--nx-space-1);
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    font-weight: 600;
  }
  .nx-command-item {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    min-block-size: 2.75rem;
    padding: 0 var(--nx-space-3);
    border-radius: var(--nx-radius-md);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    cursor: pointer;
    animation: nx-rise 280ms var(--nx-ease-out) both;
    animation-delay: calc(min(var(--nx-i, 0), 12) * 16ms);
    .nx-icon {
      color: var(--nx-text-subtle);
    }
    .nx-kbd {
      margin-inline-start: auto;
    }
    &[aria-selected=true] {
      color: var(--nx-text);
    }
    &[aria-selected=true] .nx-icon {
      color: var(--nx-accent-text);
    }
    &[aria-disabled=true] {
      opacity: 0.45;
      cursor: not-allowed;
    }
  }
  .nx-command-item-hint {
    margin-inline-start: auto;
    font-size: var(--nx-text-xs);
    color: var(--nx-text-subtle);
  }
  .nx-command-empty {
    margin: 0;
    padding: var(--nx-space-10) var(--nx-space-4);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    text-align: center;
  }
  .nx-command-footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nx-space-4);
    padding: var(--nx-space-3) var(--nx-space-5);
    border-block-start: 1px solid var(--nx-border);
    background: var(--nx-bg-subtle);
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    span {
      display: inline-flex;
      align-items: center;
      gap: var(--nx-space-1);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-dialog,
    .nx-dialog[data-variant] {
      transition-duration: var(--nx-dur-fast);
    }
    .nx-command-item {
      animation: none;
    }
  }
}

/* src/css/components/header.css */
@layer nx.components {
  .nx-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--nx-z-sticky);
    padding: 0 var(--nx-space-4);
    transition: translate var(--nx-spring-soft-duration) var(--nx-spring-soft);
    &[data-hidden]:not(:focus-within) {
      translate: 0 -110%;
    }
  }
  .nx-header-inner {
    display: flex;
    align-items: center;
    gap: var(--nx-space-6);
    max-inline-size: var(--nx-header-width, 76rem);
    min-block-size: 4.25rem;
    margin-inline: auto;
    padding-inline: var(--nx-space-2);
    border: 1px solid transparent;
    transition:
      background-color var(--nx-dur-slow) var(--nx-ease-out),
      border-color var(--nx-dur-slow) var(--nx-ease-out),
      box-shadow var(--nx-dur-slow) var(--nx-ease-out),
      min-block-size var(--nx-spring-soft-duration) var(--nx-spring-soft),
      max-inline-size var(--nx-spring-soft-duration) var(--nx-spring-soft),
      margin var(--nx-spring-soft-duration) var(--nx-spring-soft),
      padding var(--nx-spring-soft-duration) var(--nx-spring-soft);
  }
  .nx-header:not([data-variant=floating])[data-scrolled] {
    background: var(--nx-glass);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    box-shadow: 0 1px 0 var(--nx-border);
    .nx-header-inner {
      min-block-size: 3.75rem;
    }
  }
  .nx-header[data-variant=floating] {
    padding-block-start: var(--nx-space-3);
    .nx-header-inner {
      min-block-size: 3.5rem;
      padding-inline: var(--nx-space-3) var(--nx-space-2);
      border-radius: var(--nx-radius-full);
    }
    &[data-scrolled] .nx-header-inner {
      max-inline-size: min(var(--nx-header-width, 76rem), 60rem);
      min-block-size: 3.25rem;
      border-color: var(--nx-glass-border);
      background: var(--nx-glass);
      -webkit-backdrop-filter: blur(18px) saturate(170%);
      backdrop-filter: blur(18px) saturate(170%);
      box-shadow: var(--nx-shadow-lg), inset 0 1px 0 var(--nx-highlight);
    }
  }
  .nx-header-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    color: var(--nx-text);
    font: 700 var(--nx-text-lg) / 1 var(--nx-font-display);
    text-decoration: none;
    border-radius: var(--nx-radius-sm);
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 3px;
    }
  }
  .nx-header-nav {
    flex: 1;
    display: flex;
    justify-content: center;
  }
  .nx-header-actions {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    margin-inline-start: auto;
  }
  .nx-header-nav + .nx-header-actions {
    margin-inline-start: 0;
  }
  .nx-header-toggle {
    display: none;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-full);
    background: transparent;
    color: var(--nx-text);
    cursor: pointer;
    &:hover {
      background: var(--nx-surface-2);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-burger {
    display: grid;
    gap: 5px;
    inline-size: 1.125rem;
    > i {
      display: block;
      block-size: 2px;
      border-radius: 1px;
      background: currentColor;
      transition: translate var(--nx-spring-snappy-duration) var(--nx-spring-snappy), rotate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    }
  }
  [aria-expanded=true] > .nx-burger > i:first-child {
    translate: 0 3.5px;
    rotate: 45deg;
  }
  [aria-expanded=true] > .nx-burger > i:last-child {
    translate: 0 -3.5px;
    rotate: -45deg;
  }
  @media (max-width: 56rem) {
    .nx-header-nav {
      display: none;
    }
    .nx-header-toggle {
      display: grid;
    }
    .nx-header-actions [data-desktop] {
      display: none;
    }
  }
  .nx-mega {
    position: relative;
    isolation: isolate;
    .nx-indicator {
      z-index: -1;
      border-radius: var(--nx-radius-full);
      background: var(--nx-surface-2);
    }
  }
  .nx-mega-list {
    display: flex;
    align-items: center;
    gap: var(--nx-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-mega-trigger,
  .nx-mega-link {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-1);
    min-block-size: 2.25rem;
    padding-inline: var(--nx-space-4);
    border: 0;
    border-radius: var(--nx-radius-full);
    background: transparent;
    color: var(--nx-text-muted);
    font: 500 var(--nx-text-sm) / 1 var(--nx-font-sans);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--nx-dur-base) var(--nx-ease-out);
    &:hover,
    &:focus-visible,
    &[aria-expanded=true],
    &[aria-current=page] {
      color: var(--nx-text);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 1px;
    }
    .nx-icon {
      inline-size: 0.9rem;
      block-size: 0.9rem;
      transition: rotate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    }
    &[aria-expanded=true] .nx-icon {
      rotate: 180deg;
    }
  }
  .nx-mega-viewport {
    position: absolute;
    inset-block-start: calc(100% + var(--nx-space-3));
    left: 0;
    z-index: var(--nx-z-dropdown);
    inline-size: var(--nx-mega-w, 32rem);
    block-size: var(--nx-mega-h, auto);
    translate: var(--nx-mega-x, 0px) 0;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-xl), inset 0 1px 0 var(--nx-highlight);
    overflow: clip;
    transform-origin: top center;
    transition:
      inline-size var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      block-size var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      opacity var(--nx-dur-base) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &[data-state=closed] {
      opacity: 0;
      scale: 0.96;
      pointer-events: none;
      visibility: hidden;
      transition-property:
        inline-size,
        block-size,
        translate,
        opacity,
        scale,
        visibility;
      transition-duration:
        0s,
        0s,
        0s,
        var(--nx-dur-base),
        var(--nx-dur-base),
        var(--nx-dur-base);
    }
    &[data-fresh] {
      transition-property: opacity, scale;
    }
  }
  .nx-mega-panel {
    position: absolute;
    inset-block-start: 0;
    left: 0;
    inline-size: max-content;
    max-inline-size: min(52rem, calc(100vw - 2rem));
    padding: var(--nx-space-4);
    &[hidden] {
      display: none;
    }
    &[data-motion=from-end] {
      animation: nx-mega-from-end var(--nx-spring-gentle-duration) var(--nx-spring-gentle) both;
    }
    &[data-motion=from-start] {
      animation: nx-mega-from-start var(--nx-spring-gentle-duration) var(--nx-spring-gentle) both;
    }
    &[data-motion=to-start] {
      animation: nx-mega-to-start var(--nx-dur-base) var(--nx-ease-in) both;
      pointer-events: none;
    }
    &[data-motion=to-end] {
      animation: nx-mega-to-end var(--nx-dur-base) var(--nx-ease-in) both;
      pointer-events: none;
    }
  }
  @keyframes nx-mega-from-end {
    from {
      opacity: 0;
      translate: calc(28px * var(--nx-dir) * var(--nx-motion)) 0;
    }
  }
  @keyframes nx-mega-from-start {
    from {
      opacity: 0;
      translate: calc(-28px * var(--nx-dir) * var(--nx-motion)) 0;
    }
  }
  @keyframes nx-mega-to-start {
    to {
      opacity: 0;
      translate: calc(-28px * var(--nx-dir) * var(--nx-motion)) 0;
    }
  }
  @keyframes nx-mega-to-end {
    to {
      opacity: 0;
      translate: calc(28px * var(--nx-dir) * var(--nx-motion)) 0;
    }
  }
  .nx-mega-grid {
    display: grid;
    grid-template-columns: repeat(var(--nx-mega-cols, 2), minmax(14rem, 1fr));
    gap: var(--nx-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-mega-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--nx-space-1) var(--nx-space-3);
    padding: var(--nx-space-3);
    border-radius: var(--nx-radius-md);
    color: var(--nx-text);
    text-decoration: none;
    transition: background-color var(--nx-dur-fast);
    &:hover,
    &:focus-visible {
      background: var(--nx-surface-2);
      outline: none;
    }
    &:focus-visible {
      box-shadow: inset 0 0 0 2px var(--nx-ring);
    }
  }
  .nx-mega-item-icon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    background: var(--nx-surface);
    color: var(--nx-accent-text);
    transition: scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
  }
  .nx-mega-item:hover .nx-mega-item-icon {
    scale: calc(1 + 0.08 * var(--nx-motion));
  }
  .nx-mega-item-title {
    font-size: var(--nx-text-sm);
    font-weight: 600;
  }
  .nx-mega-item-description {
    font-size: var(--nx-text-xs);
    color: var(--nx-text-muted);
    line-height: 1.5;
  }
  .nx-drilldown {
    overflow: clip;
  }
  .nx-drilldown-track {
    display: flex;
    translate: calc(var(--nx-level, 0) * -100% * var(--nx-dir)) 0;
    transition: translate var(--nx-spring-soft-duration) var(--nx-spring-soft);
  }
  .nx-drilldown-panel {
    flex: 0 0 100%;
    display: grid;
    align-content: start;
    gap: var(--nx-space-1);
    padding: var(--nx-space-2);
    &[hidden] {
      display: none;
    }
  }
  .nx-drilldown-item,
  .nx-drilldown-back {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-3);
    inline-size: 100%;
    min-block-size: 3rem;
    padding: 0 var(--nx-space-3);
    border: 0;
    border-radius: var(--nx-radius-md);
    background: transparent;
    color: var(--nx-text);
    font: 500 var(--nx-text-md) / 1.3 var(--nx-font-sans);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    animation: nx-rise var(--nx-spring-gentle-duration) var(--nx-spring-gentle) both;
    animation-delay: calc(var(--nx-i, 0) * 35ms);
    &:hover,
    &:focus-visible {
      background: var(--nx-surface-2);
      outline: none;
    }
    &:focus-visible {
      box-shadow: inset 0 0 0 2px var(--nx-ring);
    }
    .nx-icon {
      color: var(--nx-text-subtle);
    }
  }
  .nx-drilldown-back {
    justify-content: flex-start;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
  }
  .nx-route-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: calc(var(--nx-z-tooltip) + 1);
    block-size: 3px;
    background:
      linear-gradient(
        calc(90deg * var(--nx-dir)),
        var(--nx-lapis-500),
        var(--nx-violet-500),
        var(--nx-cyan-400));
    box-shadow: 0 0 10px var(--nx-accent), 0 0 4px var(--nx-glow);
    transform-origin: left;
    scale: 0 1;
    opacity: 0;
    pointer-events: none;
    &[data-state=loading] {
      opacity: 1;
      animation: nx-trickle 9s cubic-bezier(0.08, 0.7, 0.2, 1) forwards;
    }
    &[data-state=loading][data-determinate] {
      animation: none;
      scale: var(--nx-value, 0) 1;
      transition: scale var(--nx-dur-slow) var(--nx-ease-out);
    }
    &[data-state=done] {
      scale: 1 1;
      opacity: 0;
      transition: scale var(--nx-dur-base) var(--nx-ease-out), opacity var(--nx-dur-slow) var(--nx-ease-out) var(--nx-dur-base);
    }
  }
  :where([dir=rtl]) .nx-route-progress {
    transform-origin: right;
  }
  @keyframes nx-trickle {
    0% {
      scale: 0 1;
    }
    10% {
      scale: 0.25 1;
    }
    100% {
      scale: 0.92 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-drilldown-item,
    .nx-drilldown-back {
      animation: none;
    }
  }
}

/* src/css/blocks/text.css */
@layer nx.components {
  .nx-glyph-word {
    display: inline-block;
    white-space: nowrap;
    &[data-loose] {
      display: inline;
      white-space: normal;
    }
  }
  .nx-text-hero {
    container-type: inline-size;
    --_stagger: 34ms;
    --_title: calc(var(--_n, 12) * var(--_stagger));
    &[data-shaped] {
      --_stagger: 72ms;
    }
  }
  .nx-text-hero[data-nx-reveal] {
    opacity: 1;
    translate: none;
    transition: none;
  }
  .nx-text-hero-heading {
    position: relative;
    inline-size: fit-content;
    max-inline-size: 100%;
    font-size: clamp(2.5rem, 0.9rem + 7.2cqi, 6.5rem);
  }
  .nx-text-hero-title {
    font-size: 1em;
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: var(--nx-tracking-tightest);
    text-wrap: balance;
  }
  .nx-text-hero[data-shaped] .nx-text-hero-title {
    line-height: 1.4;
  }
  .nx-text-hero-char {
    display: inline-block;
    white-space: pre;
    transform-origin: 50% 90%;
    transition:
      opacity 280ms var(--nx-ease-out),
      translate var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy),
      rotate var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
    transition-delay: calc(var(--nx-i, 0) * var(--_stagger) + 60ms);
    &[data-mark] {
      background: var(--nx-gradient-brand) calc(var(--_k, 0) / max(1, var(--_m, 1) - 1) * 100%) 50% / calc(var(--_m, 1) * 100%) 100% no-repeat;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  }
  .nx-text-hero-char:nth-child(3n+1) {
    --_rise: 0.62em;
    --_tilt: -10deg;
  }
  .nx-text-hero-char:nth-child(3n+2) {
    --_rise: 0.8em;
    --_tilt: 7deg;
  }
  .nx-text-hero-char:nth-child(3n) {
    --_rise: 0.5em;
    --_tilt: -5deg;
  }
  :where(.nx-js) .nx-text-hero[data-nx-reveal]:not([data-nx-revealed]) .nx-text-hero-char {
    opacity: 0;
    translate: 0 calc(var(--_rise, 0.6em) * var(--nx-motion));
    rotate: calc(var(--_tilt, -8deg) * var(--nx-motion));
  }
  .nx-text-hero-subtitle,
  .nx-text-hero-actions {
    transition: opacity 280ms var(--nx-ease-out), translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    transition-delay: calc(var(--_title) * 0.6 + 180ms);
  }
  .nx-text-hero-actions {
    transition-delay: calc(var(--_title) * 0.6 + 260ms);
  }
  :where(.nx-js) .nx-text-hero[data-nx-reveal]:not([data-nx-revealed]) :is(.nx-text-hero-subtitle, .nx-text-hero-actions) {
    opacity: 0;
    translate: 0 calc(14px * var(--nx-motion));
  }
  .nx-text-hero-sticker {
    --_tone: var(--nx-gold);
    position: absolute;
    z-index: 1;
    inline-size: clamp(2.25rem, 0.62em, 4.5rem);
    aspect-ratio: 1;
    pointer-events: none;
    animation: nx-text-hero-float 5.6s var(--nx-ease-in-out) infinite;
    animation-delay: calc(var(--nx-i, 0) * -1.1s);
    &[data-tone=accent] {
      --_tone: var(--nx-accent);
    }
    &[data-tone=violet] {
      --_tone: var(--nx-violet-500);
    }
    &[data-tone=cyan] {
      --_tone: var(--nx-glow);
    }
    &[data-tone=pink] {
      --_tone: var(--nx-chart-2);
    }
    &[data-position=top-start] {
      inset-block-start: -0.42em;
      inset-inline-start: -0.5em;
      --_rest: -12deg;
    }
    &[data-position=top-end] {
      inset-block-start: -0.48em;
      inset-inline-end: -0.42em;
      --_rest: 14deg;
    }
    &[data-position=bottom-start] {
      inset-block-end: -0.36em;
      inset-inline-start: -0.3em;
      --_rest: 10deg;
    }
    &[data-position=bottom-end] {
      inset-block-end: -0.42em;
      inset-inline-end: -0.5em;
      --_rest: -8deg;
    }
    &[data-position=start] {
      inset-block-start: calc(50% - 0.3em);
      inset-inline-start: -0.95em;
      --_rest: -6deg;
    }
    &[data-position=end] {
      inset-block-start: calc(50% - 0.3em);
      inset-inline-end: -0.95em;
      --_rest: 8deg;
    }
    &[data-shape=arrow] {
      scale: var(--nx-dir) 1;
    }
    &[data-shape=arrow]:is([data-position$=end]) {
      scale: calc(-1 * var(--nx-dir)) 1;
    }
    > svg {
      display: block;
      inline-size: 100%;
      block-size: 100%;
      overflow: visible;
      rotate: var(--_rest, 0deg);
      filter: drop-shadow(0 0.05em 0.06em color-mix(in oklab, var(--nx-ink-950) 24%, transparent));
    }
    [data-part=body] {
      fill: var(--_tone);
      stroke: var(--nx-clay-50);
      stroke-width: 5;
      stroke-linejoin: round;
      paint-order: stroke;
    }
    [data-part=outline],
    [data-part=line] {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    [data-part=outline] {
      stroke: var(--nx-clay-50);
      stroke-width: 12;
    }
    [data-part=line] {
      stroke: var(--_tone);
      stroke-width: 6;
    }
    [data-part=ink] {
      fill: none;
      stroke: var(--nx-ink-900);
      stroke-width: 4.5;
      stroke-linecap: round;
    }
    [data-part=shine] {
      fill: none;
      stroke: var(--nx-clay-50);
      stroke-width: 2.6;
      stroke-linecap: round;
      opacity: 0.75;
    }
  }
  @container (inline-size < 36rem) {
    .nx-text-hero-sticker[data-position=start] {
      inset-inline-start: -0.35em;
    }
    .nx-text-hero-sticker[data-position=end] {
      inset-inline-end: -0.35em;
    }
  }
  @keyframes nx-text-hero-float {
    50% {
      translate: 0 calc(-0.08em * var(--nx-motion));
      rotate: calc(5deg * var(--nx-motion));
    }
  }
  @keyframes nx-text-hero-pop {
    0% {
      opacity: 0;
      scale: calc(1 - 0.05 * var(--nx-motion));
      rotate: calc(var(--_rest, 0deg) - 32deg * var(--nx-motion));
    }
    35% {
      opacity: 1;
      scale: calc(1 + 0.16 * var(--nx-motion));
      rotate: calc(var(--_rest, 0deg) + 9deg * var(--nx-motion));
    }
    62% {
      scale: calc(1 - 0.04 * var(--nx-motion));
      rotate: calc(var(--_rest, 0deg) - 4deg * var(--nx-motion));
    }
    82% {
      scale: calc(1 + 0.015 * var(--nx-motion));
      rotate: calc(var(--_rest, 0deg) + 1deg * var(--nx-motion));
    }
    100% {
      opacity: 1;
      scale: 1;
      rotate: var(--_rest, 0deg);
    }
  }
  :where(.nx-js) .nx-text-hero[data-nx-reveal]:not([data-nx-revealed]) .nx-text-hero-sticker > svg {
    opacity: 0;
    scale: calc(1 - 0.05 * var(--nx-motion));
  }
  :where(.nx-js) .nx-text-hero[data-nx-revealed] .nx-text-hero-sticker > svg {
    animation: nx-text-hero-pop 760ms var(--nx-ease-out) both;
    animation-delay: calc(var(--_title) + 200ms + var(--nx-i, 0) * 80ms);
  }
  @keyframes nx-text-hero-failsafe {
    to {
      opacity: 1;
      translate: none;
      scale: none;
      rotate: var(--_rest, 0deg);
    }
  }
  :where(.nx-js:not(.nx-live)) .nx-text-hero[data-nx-reveal]:not([data-nx-revealed]) :is(.nx-text-hero-char, .nx-text-hero-sticker > svg, .nx-text-hero-subtitle, .nx-text-hero-actions) {
    animation: nx-text-hero-failsafe 1ms 2.5s forwards;
  }
  @property --_scroll-reveal-p { syntax: "<number>"; inherits: false; initial-value: 0; }
  .nx-scroll-reveal {
    --nx-progress: 1;
    position: relative;
    block-size: var(--nx-scroll-height, 240vh);
  }
  :where(.nx-js) .nx-scroll-reveal {
    --nx-progress: 0;
  }
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .nx-scroll-reveal {
      --nx-progress: var(--_scroll-reveal-p);
      view-timeline: --nx-scroll-reveal block;
      animation: nx-scroll-reveal-progress auto linear both;
      animation-timeline: --nx-scroll-reveal;
      animation-range: contain 0% contain 100%;
    }
  }
  @keyframes nx-scroll-reveal-progress {
    to {
      --_scroll-reveal-p: 1;
    }
  }
  .nx-scroll-reveal-stage,
  .nx-scroll-scramble-stage {
    position: sticky;
    inset-block-start: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--nx-space-5);
    block-size: 100svh;
    padding-inline: var(--nx-space-6);
    overflow: clip;
    text-align: center;
  }
  .nx-scroll-reveal-eyebrow {
    margin: 0;
    color: var(--nx-text-subtle);
    font: 600 var(--nx-text-sm) / 1.4 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-wider);
    text-transform: uppercase;
    opacity: calc(0.35 + 0.65 * min(1, var(--nx-progress) * 4));
  }
  .nx-scroll-reveal-title {
    margin: 0;
    font: 800 clamp(3rem, 0.8rem + 9vw, 10.5rem) / 0.98 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tightest);
    text-wrap: balance;
    &[data-shaped] {
      line-height: 1.35;
    }
  }
  .nx-scroll-reveal-art {
    display: grid;
  }
  .nx-scroll-reveal-layer {
    grid-area: 1 / 1;
    &[data-layer=outline] {
      color: transparent;
      -webkit-text-stroke: max(1px, 0.012em) var(--nx-border-strong);
    }
    &[data-layer=fill] {
      --_wipe: calc((var(--nx-progress) - 0.42) * 240% - 10%);
      color: var(--nx-text);
      -webkit-mask-image:
        linear-gradient(
          calc(90deg * var(--nx-dir)),
          #000 calc(var(--_wipe) - 12%),
          transparent calc(var(--_wipe) + 12%));
      mask-image:
        linear-gradient(
          calc(90deg * var(--nx-dir)),
          #000 calc(var(--_wipe) - 12%),
          transparent calc(var(--_wipe) + 12%));
    }
  }
  .nx-scroll-reveal-char {
    --_t: clamp(0, (var(--nx-progress) - var(--nx-i, 0) / var(--_n, 1) * 0.3) / 0.4, 1);
    --_away: calc((1 - var(--_t)) * (1 - var(--_t)) * (1 - var(--_t)));
    display: inline-block;
    white-space: pre;
    translate: calc(var(--_x, 0) * 0.0017em * var(--_away) * var(--nx-motion)) calc(var(--_y, 0) * 0.0026em * var(--_away) * var(--nx-motion));
    rotate: calc(var(--_r, 0) * 0.07deg * var(--_away) * var(--nx-motion));
    opacity: calc(1 - 0.7 * var(--_away));
  }
  @property --_hover-reveal-glow { syntax: "<length>"; inherits: false; initial-value: 0px; }
  @property --_hover-reveal-wx { syntax: "<length>"; inherits: false; initial-value: 0px; }
  @property --_hover-reveal-wy { syntax: "<length>"; inherits: false; initial-value: 0px; }
  .nx-hover-reveal {
    container-type: inline-size;
    margin: 0;
    padding: 0;
    list-style: none;
    border-block-start: 1px solid var(--nx-border);
  }
  .nx-hover-reveal-item {
    transition:
      opacity 150ms var(--nx-ease-out),
      filter 150ms var(--nx-ease-out),
      translate var(--nx-spring-soft-duration) var(--nx-spring-soft);
  }
  .nx-hover-reveal-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--nx-space-6);
    row-gap: var(--nx-space-1);
    padding-block: clamp(0.85rem, 0.5rem + 1.4cqi, 1.4rem);
    padding-inline: var(--nx-space-2);
    border-block-end: 1px solid var(--nx-border);
    color: var(--nx-text);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    &:has(.nx-hover-reveal-description) {
      grid-template-columns: minmax(0, 1fr) minmax(0, 15rem) auto;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
      border-radius: var(--nx-radius-sm);
    }
  }
  .nx-hover-reveal-label {
    --nx-px: 30%;
    --nx-py: 50%;
    --_gx: calc(var(--nx-px) + var(--_hover-reveal-wx));
    --_gy: calc(var(--nx-py) + var(--_hover-reveal-wy));
    justify-self: start;
    font: 700 clamp(1.75rem, 0.9rem + 4.4cqi, 4.25rem) / 1.1 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tighter);
    background:
      radial-gradient(
        circle at var(--_gx) var(--_gy),
        var(--nx-glow),
        var(--nx-accent) calc(var(--_hover-reveal-glow) * 0.42),
        var(--nx-violet-500) calc(var(--_hover-reveal-glow) * 0.72),
        var(--nx-text) var(--_hover-reveal-glow));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transform-origin: calc(50% - 50% * var(--nx-dir)) 50%;
    transition:
      --_hover-reveal-glow 150ms var(--nx-ease-out),
      translate var(--nx-spring-soft-duration) var(--nx-spring-soft),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
  }
  .nx-hover-reveal-description {
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-sm);
    line-height: 1.5;
    text-wrap: pretty;
    transition: color 200ms var(--nx-ease-out);
  }
  .nx-hover-reveal-icon {
    display: inline-grid;
    place-items: center;
    inline-size: 2.75rem;
    aspect-ratio: 1;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    color: var(--nx-text-muted);
    transition:
      background-color 200ms var(--nx-ease-out),
      border-color 200ms var(--nx-ease-out),
      color 200ms var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    > .nx-icon {
      grid-area: 1 / 1;
      inline-size: 1.25rem;
      block-size: 1.25rem;
      transition:
        opacity 300ms cubic-bezier(0.2, 0, 0, 1),
        scale 300ms cubic-bezier(0.2, 0, 0, 1),
        filter 300ms cubic-bezier(0.2, 0, 0, 1),
        rotate var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
    }
    > .nx-hover-reveal-rest {
      scale: var(--nx-dir) 1;
    }
    > .nx-hover-reveal-active {
      opacity: 0;
      scale: calc(0.25 * var(--nx-dir)) 0.25;
      filter: blur(4px);
      rotate: calc(-45deg * var(--nx-dir) * var(--nx-motion));
    }
  }
  .nx-hover-reveal-link:is(:hover, :focus-visible) {
    .nx-hover-reveal-label {
      --_hover-reveal-glow: 10em;
    }
    .nx-hover-reveal-description {
      color: var(--nx-text-muted);
    }
    .nx-hover-reveal-icon {
      border-color: transparent;
      background: var(--nx-accent);
      color: var(--nx-accent-contrast);
      > .nx-hover-reveal-rest {
        opacity: 0;
        scale: calc(0.25 * var(--nx-dir)) 0.25;
        filter: blur(4px);
        rotate: calc(45deg * var(--nx-dir) * var(--nx-motion));
      }
      > .nx-hover-reveal-active {
        opacity: 1;
        scale: var(--nx-dir) 1;
        filter: blur(0);
        rotate: 0deg;
      }
    }
  }
  .nx-hover-reveal-link:focus-visible:not(:hover) .nx-hover-reveal-icon > .nx-icon {
    transition: opacity 150ms var(--nx-ease-out);
  }
  .nx-hover-reveal:has(.nx-hover-reveal-link:focus-visible) .nx-hover-reveal-item:not(:has(.nx-hover-reveal-link:focus-visible)) {
    opacity: 0.35;
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-hover-reveal-link:hover .nx-hover-reveal-label {
      translate: calc(0.14em * var(--nx-dir) * var(--nx-motion)) 0;
      transition-duration:
        280ms,
        var(--nx-spring-soft-duration),
        var(--nx-spring-snappy-duration);
      animation: nx-hover-reveal-wander 3.6s var(--nx-ease-in-out) infinite;
    }
    .nx-hover-reveal:not([data-static]) .nx-hover-reveal-link:hover .nx-hover-reveal-icon {
      scale: calc(1 + 0.08 * var(--nx-motion));
    }
    .nx-hover-reveal:has(.nx-hover-reveal-link:hover) .nx-hover-reveal-item:not(:has(.nx-hover-reveal-link:hover)) {
      opacity: 0.3;
      filter: blur(2px);
      transition-duration:
        250ms,
        250ms,
        var(--nx-spring-gentle-duration);
      transition-timing-function:
        var(--nx-ease-out),
        var(--nx-ease-out),
        var(--nx-spring-gentle);
    }
    .nx-hover-reveal-item:has(~ .nx-hover-reveal-item .nx-hover-reveal-link:hover) {
      translate: 0 calc(-0.4rem * var(--nx-motion));
    }
    .nx-hover-reveal-item:has(.nx-hover-reveal-link:hover) ~ .nx-hover-reveal-item {
      translate: 0 calc(0.4rem * var(--nx-motion));
    }
  }
  @keyframes nx-hover-reveal-wander {
    0%, 100% {
      --_hover-reveal-wx: 0px;
      --_hover-reveal-wy: 0px;
    }
    25% {
      --_hover-reveal-wx: calc(0.5em * var(--nx-motion));
      --_hover-reveal-wy: calc(-0.25em * var(--nx-motion));
    }
    50% {
      --_hover-reveal-wx: calc(-0.2em * var(--nx-motion));
      --_hover-reveal-wy: calc(0.3em * var(--nx-motion));
    }
    75% {
      --_hover-reveal-wx: calc(-0.45em * var(--nx-motion));
      --_hover-reveal-wy: calc(-0.15em * var(--nx-motion));
    }
  }
  .nx-hover-reveal:not([data-static]) .nx-hover-reveal-link:active :is(.nx-hover-reveal-label, .nx-hover-reveal-icon) {
    scale: calc(1 - 0.04 * var(--nx-motion));
  }
  @container (inline-size < 34rem) {
    .nx-hover-reveal-link:has(.nx-hover-reveal-description) {
      grid-template-columns: minmax(0, 1fr) auto;
    }
    .nx-hover-reveal-description {
      grid-row: 2;
      grid-column: 1;
    }
    .nx-hover-reveal-link:has(.nx-hover-reveal-description) .nx-hover-reveal-icon {
      grid-row: 1 / span 2;
      grid-column: 2;
    }
  }
  .nx-scroll-scramble {
    --nx-progress: 1;
    position: relative;
    block-size: var(--nx-scroll-height, 220vh);
  }
  :where(.nx-js) .nx-scroll-scramble {
    --nx-progress: 0;
  }
  .nx-scroll-scramble-stage {
    gap: var(--nx-space-10);
  }
  .nx-scroll-scramble-title {
    position: relative;
    margin: 0;
    font: 800 clamp(2.4rem, 0.9rem + 5.6vw, 6.5rem) / 1.02 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tighter);
    text-wrap: balance;
    &[data-shaped] {
      line-height: 1.4;
    }
  }
  .nx-scroll-scramble-sizer {
    display: block;
    visibility: hidden;
  }
  .nx-scroll-scramble-text {
    position: absolute;
    inset: 0;
  }
  .nx-scroll-scramble-pending {
    color: var(--nx-accent-text);
  }
  .nx-scroll-scramble-chips {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--nx-space-3);
    max-inline-size: 44rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-scroll-scramble-chip {
    --_dx: 0px;
    --_dy: 0px;
    --_r: 0;
    --_t: clamp(0, (var(--nx-progress) - 0.3 - var(--nx-i, 0) / var(--_n, 1) * 0.3) / 0.35, 1);
    --_u: calc(1 - var(--_t));
    --_away: calc(var(--_u) * var(--_u) * (2.2 * var(--_u) - 1.2));
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1.05rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-sm);
    color: color-mix(in oklab, var(--nx-text) calc(var(--_t) * 100%), var(--nx-text-subtle));
    font: 600 var(--nx-text-md) / 1.2 var(--nx-font-sans);
    white-space: nowrap;
    translate: calc(var(--_dx) * var(--_away) * var(--nx-motion)) calc(var(--_dy) * var(--_away) * var(--nx-motion));
    rotate: calc(var(--_r) * 0.018deg * var(--_away) * var(--nx-motion));
    scale: calc(1 - 0.1 * var(--_u) * var(--nx-motion));
  }
  .nx-roll-text {
    display: inline-block;
    color: inherit;
    font: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &:is(button) {
      padding: 0;
      border: 0;
      background: none;
      cursor: pointer;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
      border-radius: var(--nx-radius-xs);
    }
    &:is(a, button):active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
  }
  .nx-button .nx-roll-text {
    --nx-roll-color: currentColor;
  }
  .nx-roll-text-piece {
    display: inline-grid;
    overflow: clip;
    margin-block: -0.12em;
    white-space: pre;
    > span {
      grid-area: 1 / 1;
      padding-block: 0.12em;
      transition:
        translate var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
        opacity 200ms var(--nx-ease-out),
        color 200ms var(--nx-ease-out);
      transition-delay: calc(var(--nx-i, 0) * 30ms);
    }
    > span + span {
      opacity: 0;
      color: var(--nx-roll-color, var(--nx-accent-text));
      translate: 0 calc(100% * var(--nx-motion));
    }
  }
  :is(.nx-roll-text:focus-visible, :is(a, button):focus-visible .nx-roll-text) .nx-roll-text-piece {
    > span {
      transition: opacity 150ms var(--nx-ease-out), color 150ms var(--nx-ease-out);
      transition-delay: 0ms;
    }
    > span:first-child {
      opacity: 0;
    }
    > span + span {
      opacity: 1;
      translate: 0 0;
    }
  }
  @media (hover: hover) and (pointer: fine) {
    :is(.nx-roll-text:hover, :is(a, button):hover .nx-roll-text) .nx-roll-text-piece {
      > span:first-child {
        opacity: 0;
        translate: 0 calc(-100% * var(--nx-motion));
      }
      > span + span {
        opacity: 1;
        translate: 0 0;
      }
    }
  }
  .nx-pulse-button {
    --_size: 5.5rem;
    --_tone: var(--nx-accent);
    --_on-tone: var(--nx-accent-contrast);
    display: inline-grid;
    justify-items: center;
    gap: var(--nx-space-3);
    padding: 0;
    border: 0;
    background: none;
    color: var(--nx-text-muted);
    font: 600 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-wide);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 200ms var(--nx-ease-out);
    &[data-size=sm] {
      --_size: 4rem;
    }
    &[data-size=lg] {
      --_size: 7rem;
    }
    &[data-tone=gold] {
      --_tone: var(--nx-gold);
      --_on-tone: var(--nx-gold-contrast);
    }
    &[data-tone=inverse] {
      --_tone: var(--nx-surface-inverse);
      --_on-tone: var(--nx-text-inverse);
    }
    &:is(:hover, :focus-visible) {
      color: var(--nx-text);
    }
    &:focus-visible {
      outline: none;
    }
    &:is(:disabled, [aria-disabled=true]) {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }
  .nx-pulse-button-disc {
    position: relative;
    display: grid;
    inline-size: var(--_size);
    aspect-ratio: 1;
    &::before {
      content: "";
      position: absolute;
      inset: -14px;
      border-radius: 50%;
    }
  }
  .nx-pulse-button-rings,
  .nx-pulse-button-face {
    grid-area: 1 / 1;
    border-radius: 50%;
  }
  .nx-pulse-button-rings {
    position: relative;
    pointer-events: none;
    > i {
      position: absolute;
      inset: 0;
      border: 1px solid color-mix(in oklab, var(--_tone) 55%, transparent);
      border-radius: inherit;
      background: color-mix(in oklab, var(--_tone) 16%, transparent);
      opacity: 0;
      animation: nx-pulse-button-ring 2.7s var(--nx-ease-out) infinite;
    }
    > i:nth-child(2) {
      animation-delay: 0.9s;
    }
    > i:nth-child(3) {
      animation-delay: 1.8s;
    }
  }
  @keyframes nx-pulse-button-ring {
    0% {
      opacity: 0.7;
      scale: 1;
    }
    100% {
      opacity: 0;
      scale: calc(1 + 0.85 * var(--nx-motion));
    }
  }
  .nx-pulse-button-face {
    display: grid;
    place-items: center;
    background:
      radial-gradient(
        circle at 30% 25%,
        color-mix(in oklab, var(--_tone) 72%, white),
        var(--_tone) 62%);
    color: var(--_on-tone);
    box-shadow:
      0 1px 2px color-mix(in oklab, var(--_tone) 30%, transparent),
      0 14px 34px -12px color-mix(in oklab, var(--_tone) 75%, transparent),
      inset 0 1px 0 color-mix(in oklab, white 28%, transparent);
    transition: scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy), filter 200ms var(--nx-ease-out);
    .nx-icon {
      inline-size: 34%;
      block-size: 34%;
    }
  }
  .nx-pulse-button:hover .nx-pulse-button-face {
    filter: brightness(1.08) saturate(1.1);
  }
  .nx-pulse-button:focus-visible .nx-pulse-button-face {
    outline: 2px solid var(--nx-ring);
    outline-offset: 3px;
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-pulse-button:hover:not([data-static]) .nx-pulse-button-face {
      scale: calc(1 + 0.06 * var(--nx-motion));
    }
  }
  .nx-pulse-button:active:not([data-static], :disabled, [aria-disabled=true]) .nx-pulse-button-face {
    scale: calc(1 - 0.04 * var(--nx-motion));
  }
  .nx-backdrop[data-variant=mesh] {
    --_alpha: calc(var(--nx-backdrop-intensity) * 1.9);
    background:
      radial-gradient(
        ellipse 90% 70% at 50% 110%,
        color-mix(in oklab, var(--nx-violet-500) 14%, transparent),
        transparent 70%);
    > i,
    &::before {
      border-radius: 50%;
      opacity: var(--_alpha);
      animation: nx-mesh-drift 22s var(--nx-ease-in-out) infinite alternate;
    }
    > i:nth-child(1) {
      inset-block: -40% 30%;
      inset-inline: -20% 35%;
      background:
        radial-gradient(
          closest-side,
          var(--nx-lapis-500),
          color-mix(in oklab, var(--nx-lapis-500) 35%, transparent) 55%,
          transparent);
    }
    > i:nth-child(2) {
      inset-block: -30% 40%;
      inset-inline: 38% -22%;
      background:
        radial-gradient(
          closest-side,
          var(--nx-violet-500),
          color-mix(in oklab, var(--nx-violet-500) 35%, transparent) 55%,
          transparent);
      animation-duration: 27s;
      animation-delay: -9s;
    }
    > i:nth-child(3) {
      inset-block: 35% -45%;
      inset-inline: 8% 32%;
      background:
        radial-gradient(
          closest-side,
          var(--nx-cyan-400),
          color-mix(in oklab, var(--nx-cyan-400) 30%, transparent) 55%,
          transparent);
      animation-duration: 31s;
      animation-delay: -15s;
    }
    &::before {
      content: "";
      position: absolute;
      inset-block: 30% -35%;
      inset-inline: 50% -25%;
      background:
        radial-gradient(
          closest-side,
          var(--nx-gold-400),
          color-mix(in oklab, var(--nx-gold-400) 30%, transparent) 55%,
          transparent);
      opacity: calc(var(--_alpha) * 0.85);
      animation-duration: 25s;
      animation-delay: -4s;
      animation-direction: alternate-reverse;
    }
    &::after {
      --_line: color-mix(in oklab, var(--nx-text) 12%, transparent);
      content: "";
      position: absolute;
      inset-block-start: 52%;
      inset-inline: -50%;
      block-size: 540px;
      background:
        linear-gradient(var(--_line) 1px, transparent 1px) 50% 0 / 56px 56px,
        linear-gradient(
          90deg,
          var(--_line) 1px,
          transparent 1px) 50% 0 / 56px 56px;
      transform-origin: 50% 0;
      transform: perspective(600px) rotateX(62deg);
      -webkit-mask-image:
        linear-gradient(
          to bottom,
          transparent,
          #000 30%,
          #000 60%,
          transparent 95%);
      mask-image:
        linear-gradient(
          to bottom,
          transparent,
          #000 30%,
          #000 60%,
          transparent 95%);
      animation: nx-mesh-floor 2.8s linear infinite;
    }
  }
  @keyframes nx-mesh-drift {
    0% {
      translate: 0 0;
      rotate: 0deg;
      scale: 1;
    }
    50% {
      translate: calc(12% * var(--nx-motion)) calc(8% * var(--nx-motion));
      rotate: calc(28deg * var(--nx-motion));
      scale: calc(1 + 0.1 * var(--nx-motion));
    }
    100% {
      translate: calc(-8% * var(--nx-motion)) calc(14% * var(--nx-motion));
      rotate: calc(-18deg * var(--nx-motion));
      scale: calc(1 - 0.06 * var(--nx-motion));
    }
  }
  @keyframes nx-mesh-floor {
    to {
      transform: perspective(600px) rotateX(62deg) translateY(56px);
    }
  }
  .nx-backdrop[data-variant=stripes] {
    --_w: var(--nx-stripe-width, 72px);
    --_line: color-mix(in oklab, var(--nx-text) 9%, transparent);
    --_band: color-mix(in oklab, var(--nx-text) 2.5%, transparent);
    background:
      linear-gradient(
        90deg,
        transparent calc(50% - 0.5px),
        var(--_line) 0 calc(50% + 0.5px),
        transparent 0) 50% 0 / var(--_w) 100%,
      linear-gradient(
        90deg,
        var(--_band) 50%,
        transparent 0) calc(50% + var(--_w)) 0 / calc(var(--_w) * 2) 100%;
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        transparent,
        #000 14%,
        #000 72%,
        transparent);
    mask-image:
      linear-gradient(
        to bottom,
        transparent,
        #000 14%,
        #000 72%,
        transparent);
    > i,
    &::before,
    &::after {
      content: "";
      position: absolute;
      inset-block-start: -30%;
      inline-size: 1px;
      block-size: 30%;
      background:
        linear-gradient(
          to bottom,
          transparent,
          var(--_pulse));
      box-shadow: 0 0 12px 1px color-mix(in oklab, var(--_pulse) 55%, transparent);
      animation: nx-stripes-pulse 4.2s linear infinite;
    }
    > i:nth-child(1) {
      --_pulse: var(--nx-glow);
      inset-inline-start: calc(50% - 3 * var(--_w) - 0.5px);
      animation-duration: 3.8s;
    }
    > i:nth-child(2) {
      --_pulse: var(--nx-accent);
      inset-inline-start: calc(50% + var(--_w) - 0.5px);
      animation-duration: 5.6s;
      animation-delay: -2.1s;
    }
    > i:nth-child(3) {
      --_pulse: var(--nx-gold);
      inset-inline-start: calc(50% + 4 * var(--_w) - 0.5px);
      animation-duration: 7.2s;
      animation-delay: -4.4s;
    }
    &::before {
      --_pulse: var(--nx-violet-400);
      inset-inline-start: calc(50% - var(--_w) - 0.5px);
      animation-duration: 6.4s;
      animation-delay: -1.2s;
    }
    &::after {
      --_pulse: var(--nx-cyan-300);
      inset-inline-start: calc(50% + 2 * var(--_w) - 0.5px);
      animation-duration: 4.6s;
      animation-delay: -3.3s;
    }
  }
  @keyframes nx-stripes-pulse {
    to {
      translate: 0 calc(480% * var(--nx-motion));
    }
  }
  .nx-backdrop[data-variant=dither] {
    background:
      radial-gradient(
        ellipse 70% 50% at 50% 58%,
        var(--nx-accent-soft),
        transparent 70%);
  }
  .nx-backdrop-canvas {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 100%;
    image-rendering: pixelated;
    opacity: calc(var(--nx-backdrop-intensity) * 1.9);
    -webkit-mask-image:
      radial-gradient(
        ellipse 90% 80% at 50% 58%,
        #000 35%,
        transparent 85%);
    mask-image:
      radial-gradient(
        ellipse 90% 80% at 50% 58%,
        #000 35%,
        transparent 85%);
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-text-hero-sticker {
      animation: none;
    }
    .nx-scroll-reveal,
    .nx-scroll-scramble {
      block-size: auto;
      animation: none;
    }
    .nx-scroll-reveal-stage,
    .nx-scroll-scramble-stage {
      --nx-progress: 1;
      position: relative;
      block-size: auto;
      padding-block: var(--nx-space-24);
    }
    .nx-hover-reveal-link:hover .nx-hover-reveal-label {
      animation: none;
    }
    .nx-pulse-button-rings > i {
      animation: none;
    }
    .nx-pulse-button-rings > i:first-child {
      opacity: 0.45;
      scale: 1.2;
    }
    .nx-backdrop[data-variant=mesh]::before,
    .nx-backdrop[data-variant=mesh]::after,
    .nx-backdrop[data-variant=stripes]::before,
    .nx-backdrop[data-variant=stripes]::after {
      animation: none;
    }
  }
}

/* src/css/blocks/actions.css */
@layer nx.components {
  @property --_fill-reach { syntax: "<length>"; inherits: false; initial-value: 0px; }
  @property --_tx-wave { syntax: "<length>"; inherits: false; initial-value: 0px; }
  :is(.nx-flip-button, .nx-blob-button, .nx-border-button, .nx-tx-button, .nx-fill-button, .nx-metal-button):active:not(:disabled, [aria-disabled=true], [data-static]) {
    scale: calc(1 - 0.04 * var(--nx-motion));
  }
  .nx-flip-button {
    --_h: 2.75rem;
    --_px: 1.1rem;
    --_fs: var(--nx-text-sm);
    --_radius: var(--nx-radius-md);
    --_turn: 0deg;
    --_shade: 0;
    --_front:
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--nx-accent) 86%, white),
        var(--nx-accent));
    --_front-fg: var(--nx-accent-contrast);
    --_back: var(--nx-surface-inverse);
    --_back-fg: var(--nx-text-inverse);
    --_icon-back: var(--nx-gradient-gold);
    --_icon-back-fg: var(--nx-gold-contrast);
    --_shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.2),
      0 1px 2px rgb(0 0 0 / 0.12),
      0 6px 16px -6px color-mix(in oklab, var(--nx-accent) 65%, transparent);
    display: inline-flex;
    align-items: stretch;
    gap: 3px;
    block-size: var(--_h);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--_radius);
    background: none;
    color: var(--_front-fg);
    font: 600 var(--_fs) / 1 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tight);
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &:focus-visible {
      --_turn: 90deg;
      --_shade: 1;
      outline: 2px solid var(--nx-ring);
      outline-offset: 3px;
    }
    &:is(:disabled, [aria-disabled=true]) {
      cursor: not-allowed;
      opacity: 0.5;
    }
    &[data-size=sm] {
      --_h: 2.25rem;
      --_px: 0.85rem;
      --_radius: var(--nx-radius-sm);
    }
    &[data-size=lg] {
      --_h: 3.25rem;
      --_px: 1.4rem;
      --_fs: var(--nx-text-md);
      --_radius: var(--nx-radius-lg);
    }
    &[data-variant=secondary] {
      --_front: var(--nx-surface);
      --_front-fg: var(--nx-text);
      --_back:
        linear-gradient(
          180deg,
          color-mix(in oklab, var(--nx-accent) 86%, white),
          var(--nx-accent));
      --_back-fg: var(--nx-accent-contrast);
      --_icon-back: var(--nx-surface-inverse);
      --_icon-back-fg: var(--nx-text-inverse);
      --_shadow:
        inset 0 0 0 1px var(--nx-border),
        inset 0 1px 0 var(--nx-highlight),
        var(--nx-shadow-sm);
    }
    &[data-variant=inverse] {
      --_front: var(--nx-surface-inverse);
      --_front-fg: var(--nx-text-inverse);
      --_back:
        linear-gradient(
          180deg,
          color-mix(in oklab, var(--nx-accent) 86%, white),
          var(--nx-accent));
      --_back-fg: var(--nx-accent-contrast);
      --_shadow: var(--nx-shadow-md);
    }
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-flip-button:hover:not(:disabled, [aria-disabled=true]) {
      --_turn: 90deg;
      --_shade: 1;
    }
  }
  .nx-flip-button-part {
    display: grid;
    overflow: clip;
    border-radius: var(--_radius);
    box-shadow: var(--_shadow);
    perspective: calc(var(--_h) * 6);
    &[data-part=icon] {
      flex: none;
      inline-size: var(--_h);
    }
  }
  .nx-flip-button-cube {
    display: grid;
    transform-style: preserve-3d;
    transform: translateZ(calc(var(--_h) / -2)) rotateX(var(--_turn));
    transition: transform var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
  }
  .nx-flip-button-part[data-part=icon] > .nx-flip-button-cube {
    transition-delay: 45ms;
  }
  .nx-flip-button-face {
    grid-area: 1 / 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding-inline: var(--_px);
    background: var(--_front);
    color: var(--_front-fg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(calc(var(--_h) / 2));
    &[data-face=back] {
      background: var(--_back);
      color: var(--_back-fg);
      transform: rotateX(-90deg) translateZ(calc(var(--_h) / 2));
    }
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: black;
      opacity: calc(var(--_shade) * 0.35);
      pointer-events: none;
      transition: opacity 300ms var(--nx-ease-out);
    }
    &[data-face=back]::after {
      opacity: calc((1 - var(--_shade)) * 0.35);
    }
    .nx-icon {
      inline-size: 1.15em;
      block-size: 1.15em;
    }
  }
  .nx-flip-button-part[data-part=icon] .nx-flip-button-face {
    padding: 0;
    &[data-face=back] {
      background: var(--_icon-back);
      color: var(--_icon-back-fg);
    }
  }
  .nx-blob-button {
    --_h: 2.75rem;
    --_px: 1.35rem;
    --_fs: var(--nx-text-sm);
    --_base: color-mix(in oklab, var(--nx-surface-inverse) 12%, var(--nx-ink-950));
    --_glow: color-mix(in oklab, var(--nx-violet-500) 55%, transparent);
    position: relative;
    isolation: isolate;
    display: inline-grid;
    place-items: center;
    min-block-size: var(--_h);
    margin: 0;
    padding-inline: var(--_px);
    border: 0;
    border-radius: var(--nx-radius-full);
    background: var(--_base);
    color: var(--nx-ink-50);
    font: 600 var(--_fs) / 1.2 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tight);
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    overflow: clip;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.16),
      inset 0 0 0 1px rgb(255 255 255 / 0.07),
      0 1px 2px rgb(0 0 0 / 0.25),
      0 10px 28px -12px var(--_glow);
    transition: box-shadow var(--nx-dur-base) var(--nx-ease-out), scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: inherit;
      background:
        linear-gradient(
          180deg,
          rgb(255 255 255 / 0.14),
          transparent 55%);
      pointer-events: none;
    }
    &:hover:not(:disabled, [aria-disabled=true]),
    &:focus-visible {
      --_glow: color-mix(in oklab, var(--nx-violet-500) 85%, transparent);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 3px;
    }
    &:is(:disabled, [aria-disabled=true]) {
      cursor: not-allowed;
      opacity: 0.5;
    }
    &[data-size=sm] {
      --_h: 2.25rem;
      --_px: 1.05rem;
    }
    &[data-size=lg] {
      --_h: 3.25rem;
      --_px: 1.75rem;
      --_fs: var(--nx-text-md);
    }
  }
  .nx-blob-button-blobs {
    position: absolute;
    inset: 0;
    z-index: -2;
    container-type: size;
    border-radius: inherit;
    overflow: clip;
    filter: blur(calc(var(--_h) * 0.3)) saturate(1.3);
    opacity: 0.78;
    pointer-events: none;
    transition: opacity var(--nx-dur-base) var(--nx-ease-out);
    > i {
      --_rx: 16;
      --_ry: 30;
      --_gx: 0px;
      --_gy: 0px;
      --_x: calc(var(--_rx) * 1cqi);
      --_y: calc(var(--_ry) * 1cqb);
      position: absolute;
      top: 0;
      left: 0;
      inline-size: calc(var(--_h) * 1.6);
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--_c);
      translate: calc(var(--_x) - 50%) calc(var(--_y) - 50%);
      transition: translate var(--_follow, 700ms) var(--nx-ease-out);
      animation: nx-blob-drift var(--_drift, 9s) linear infinite;
    }
    > i:nth-child(1) {
      --_c: var(--nx-lapis-500);
      --_rx: 14;
      --_ry: 26;
      --_gx: -14px;
      --_gy: -4px;
      --_follow: 480ms;
      --_drift: 8s;
      --_orbit: 7px;
    }
    > i:nth-child(2) {
      --_c: var(--nx-violet-500);
      --_rx: 86;
      --_ry: 74;
      --_gx: 12px;
      --_gy: 5px;
      --_follow: 680ms;
      --_drift: 11s;
      --_orbit: 9px;
      animation-direction: reverse;
    }
    > i:nth-child(3) {
      --_c: var(--nx-gold-400);
      --_rx: 52;
      --_ry: 120;
      --_gx: 2px;
      --_gy: 11px;
      --_follow: 880ms;
      --_drift: 13s;
      --_orbit: 6px;
      inline-size: calc(var(--_h) * 1.25);
    }
  }
  @keyframes nx-blob-drift {
    from {
      transform: rotate(0turn) translateX(calc(var(--_orbit, 8px) * var(--nx-motion))) rotate(0turn);
    }
    to {
      transform: rotate(1turn) translateX(calc(var(--_orbit, 8px) * var(--nx-motion))) rotate(-1turn);
    }
  }
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .nx-blob-button:hover:not(:disabled, [aria-disabled=true]) .nx-blob-button-blobs > i {
      --_x: calc(var(--nx-px, 50cqi) + var(--_gx));
      --_y: calc(var(--nx-py, 50cqb) + var(--_gy));
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .nx-blob-button:focus-visible .nx-blob-button-blobs > i {
      --_x: calc(50cqi + var(--_gx));
      --_y: calc(50cqb + var(--_gy));
    }
  }
  .nx-blob-button:is(:hover, :focus-visible):not(:disabled, [aria-disabled=true]) .nx-blob-button-blobs {
    opacity: 1;
  }
  .nx-blob-button-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
    .nx-icon {
      inline-size: 1.15em;
      block-size: 1.15em;
    }
  }
  .nx-border-button {
    --_h: 2.75rem;
    --_px: 1.15rem;
    --_fs: var(--nx-text-sm);
    --_radius: var(--nx-radius-md);
    --_stroke: var(--nx-border-strong);
    --_trace: var(--nx-accent);
    position: relative;
    isolation: isolate;
    display: inline-grid;
    grid-template-areas: "stack";
    place-items: center;
    min-block-size: var(--_h);
    margin: 0;
    padding-inline: var(--_px);
    border: 0;
    border-radius: var(--_radius);
    background-color: transparent;
    color: var(--nx-text);
    font: 600 var(--_fs) / 1.2 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tight);
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color var(--nx-dur-base) var(--nx-ease-out),
      color var(--nx-dur-base) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &:hover:not(:disabled, [aria-disabled=true], [data-status], [aria-busy=true]) {
      --_stroke: var(--nx-accent);
      background-color: color-mix(in oklab, var(--nx-accent-soft) 60%, transparent);
    }
    &:focus-visible {
      --_stroke: var(--nx-accent);
      outline: 2px solid var(--nx-ring);
      outline-offset: 3px;
    }
    &:is(:disabled, [aria-disabled=true]):not([aria-busy=true]) {
      cursor: not-allowed;
      opacity: 0.5;
    }
    &[data-size=sm] {
      --_h: 2.25rem;
      --_px: 0.85rem;
      --_radius: var(--nx-radius-sm);
    }
    &[data-size=lg] {
      --_h: 3.25rem;
      --_px: 1.4rem;
      --_fs: var(--nx-text-md);
      --_radius: var(--nx-radius-lg);
    }
  }
  .nx-border-button-frame {
    position: absolute;
    inset: 0;
    z-index: -1;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
    pointer-events: none;
    rect {
      x: 0.75px;
      y: 0.75px;
      width: calc(100% - 1.5px);
      height: calc(100% - 1.5px);
      rx: calc(var(--_radius) - 0.75px);
      fill: none;
      stroke-width: 1.5px;
      transition: stroke var(--nx-dur-base) var(--nx-ease-out), opacity var(--nx-dur-base) var(--nx-ease-out);
    }
    .nx-border-button-track {
      stroke: var(--nx-border);
      opacity: 0.55;
    }
    .nx-border-button-march {
      stroke: var(--_stroke);
      stroke-dasharray: 4 6;
      stroke-linecap: round;
      animation: nx-border-march 1.2s linear infinite;
    }
    .nx-border-button-trace {
      stroke: var(--_trace);
      stroke-width: 2px;
      stroke-linecap: round;
      stroke-dasharray: 0 100;
      opacity: 0;
      animation: nx-border-trace 0.9s linear infinite paused;
      transition:
        stroke var(--nx-dur-base) var(--nx-ease-out),
        opacity var(--nx-dur-base) var(--nx-ease-out),
        stroke-dasharray 300ms var(--nx-ease-out);
    }
  }
  @keyframes nx-border-march {
    to {
      stroke-dashoffset: calc(-10 * var(--nx-dir));
    }
  }
  @keyframes nx-border-trace {
    to {
      stroke-dashoffset: calc(-50 * var(--nx-dir));
    }
  }
  .nx-border-button:is([data-status=loading], [data-status=success], [data-status=error], [aria-busy=true]) .nx-border-button-march {
    opacity: 0;
  }
  .nx-border-button:is([data-status=loading], [aria-busy=true]) {
    cursor: progress;
    .nx-border-button-trace {
      opacity: 1;
      stroke-dasharray: 24 26;
      animation-play-state: running;
    }
    .nx-border-button-label[data-slot=idle] {
      opacity: 0.62;
    }
  }
  .nx-border-button[data-status=success] {
    --_trace: var(--nx-success);
    background-color: var(--nx-success-soft);
    color: var(--nx-success-text);
    .nx-border-button-trace {
      opacity: 1;
      stroke-dasharray: 100 0;
      animation-play-state: running;
    }
  }
  .nx-border-button[data-status=error] {
    --_trace: var(--nx-danger);
    background-color: var(--nx-danger-soft);
    color: var(--nx-danger-text);
    animation: nx-shake 420ms var(--nx-ease-out);
    .nx-border-button-trace {
      opacity: 1;
      stroke-dasharray: 100 0;
      animation-play-state: running;
    }
  }
  .nx-border-button-label {
    grid-area: stack;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    transition:
      opacity 240ms var(--nx-ease-out),
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      filter 240ms var(--nx-ease-out);
    .nx-icon {
      inline-size: 1.15em;
      block-size: 1.15em;
    }
  }
  .nx-border-button-label:is([data-slot=success], [data-slot=error]),
  .nx-border-button:is([data-status=success], [data-status=error]) .nx-border-button-label[data-slot=idle] {
    opacity: 0;
    translate: 0 calc(10px * var(--nx-motion));
    filter: blur(4px);
    transition-duration: 150ms;
    transition-timing-function: var(--nx-ease-out);
  }
  .nx-border-button:is([data-status=success], [data-status=error]) .nx-border-button-label[data-slot=idle] {
    translate: 0 calc(-12px * var(--nx-motion));
  }
  .nx-border-button[data-status=success] .nx-border-button-label[data-slot=success],
  .nx-border-button[data-status=error] .nx-border-button-label[data-slot=error] {
    opacity: 1;
    translate: none;
    filter: none;
    transition-duration:
      240ms,
      var(--nx-spring-gentle-duration),
      240ms;
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-spring-gentle),
      var(--nx-ease-out);
  }
  .nx-border-button-mark {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 150ms var(--nx-ease-out);
  }
  .nx-border-button[data-status=success] [data-slot=success] .nx-border-button-mark,
  .nx-border-button[data-status=error] [data-slot=error] .nx-border-button-mark {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 300ms var(--nx-ease-out) 100ms;
  }
  .nx-tx-button {
    --_h: 3rem;
    --_px: 1.4rem;
    --_fs: var(--nx-text-md);
    --_glow: color-mix(in oklab, var(--nx-accent) 65%, transparent);
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-block-size: var(--_h);
    margin: 0;
    padding-inline: var(--_px);
    border: 0;
    border-radius: var(--nx-radius-full);
    background:
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--nx-accent) 86%, white),
        var(--nx-accent));
    color: var(--nx-accent-contrast);
    font: 600 var(--_fs) / 1.2 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tight);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    vertical-align: middle;
    overflow: clip;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.22),
      0 1px 2px rgb(0 0 0 / 0.12),
      0 10px 22px -10px var(--_glow);
    transition: box-shadow var(--nx-dur-base) var(--nx-ease-out), scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &::before,
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      border-radius: inherit;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--nx-dur-base) var(--nx-ease-out);
    }
    &::before {
      background:
        linear-gradient(
          180deg,
          color-mix(in oklab, var(--nx-success) 88%, black),
          color-mix(in oklab, var(--nx-success) 72%, black));
    }
    &::after {
      background:
        linear-gradient(
          180deg,
          color-mix(in oklab, var(--nx-danger) 92%, white),
          var(--nx-danger));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 3px;
    }
    &:is(:disabled, [aria-disabled=true]):not([aria-busy=true], [data-status]) {
      cursor: not-allowed;
      opacity: 0.5;
    }
    &[data-size=sm] {
      --_h: 2.5rem;
      --_px: 1.1rem;
      --_fs: var(--nx-text-sm);
    }
    &[data-size=lg] {
      --_h: 3.5rem;
      --_px: 1.75rem;
      --_fs: var(--nx-text-lg);
    }
    &:is([data-status=loading], [aria-busy=true]) {
      cursor: progress;
    }
    &[data-status=success] {
      --_glow: color-mix(in oklab, var(--nx-success) 65%, transparent);
      &::before {
        opacity: 1;
      }
    }
    &[data-status=error] {
      --_glow: color-mix(in oklab, var(--nx-danger) 65%, transparent);
      animation: nx-shake 420ms var(--nx-ease-out);
      &::after {
        opacity: 1;
      }
    }
  }
  .nx-tx-button-waves {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: conic-gradient(currentColor 0 25%, transparent 0) 0 0 / 6px 6px;
    opacity: 0;
    mask-image:
      repeating-radial-gradient(
        circle at 50% 50%,
        transparent calc(var(--_tx-wave) + 0px),
        black calc(var(--_tx-wave) + 8px),
        transparent calc(var(--_tx-wave) + 16px)),
      radial-gradient(
        circle at 50% 50%,
        rgb(0 0 0 / 0.45) 12%,
        black 36%,
        transparent 78%);
    mask-composite: intersect;
    pointer-events: none;
    transition: opacity var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-tx-button:is([data-status=loading], [aria-busy=true]) .nx-tx-button-waves {
    opacity: 0.42;
    animation: nx-tx-wave 800ms linear infinite;
  }
  @keyframes nx-tx-wave {
    to {
      --_tx-wave: 16px;
    }
  }
  .nx-tx-button-icon {
    display: inline-grid;
    flex: none;
    inline-size: 1.2em;
    block-size: 1.2em;
    > svg {
      grid-area: 1 / 1;
      inline-size: 100%;
      block-size: 100%;
      overflow: visible;
      transition:
        opacity 300ms var(--nx-ease-emphasized),
        scale 300ms var(--nx-ease-emphasized),
        filter 300ms var(--nx-ease-emphasized);
    }
  }
  .nx-tx-check,
  .nx-tx-cross,
  .nx-tx-button[data-status=success] .nx-tx-lock,
  .nx-tx-button[data-status=error] .nx-tx-lock {
    opacity: 0;
    scale: calc(1 - 0.75 * var(--nx-motion));
    filter: blur(4px);
  }
  .nx-tx-button[data-status=success] .nx-tx-check,
  .nx-tx-button[data-status=error] .nx-tx-cross {
    opacity: 1;
    scale: 1;
    filter: none;
  }
  .nx-tx-shackle {
    transition: translate 300ms var(--nx-ease-emphasized);
  }
  .nx-tx-button:is([data-status=loading], [aria-busy=true]) .nx-tx-shackle {
    translate: 0 calc(-2.5px * var(--nx-motion));
  }
  .nx-tx-mark {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 150ms var(--nx-ease-out);
  }
  .nx-tx-button[data-status=success] .nx-tx-check .nx-tx-mark,
  .nx-tx-button[data-status=error] .nx-tx-cross .nx-tx-mark {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 300ms var(--nx-ease-out) 100ms;
  }
  .nx-tx-button-label {
    position: relative;
    display: inline-flex;
    justify-content: center;
  }
  .nx-tx-button-text {
    display: inline-flex;
    justify-content: center;
    white-space: pre;
    > span {
      display: inline-block;
    }
    &[data-state=enter] > span {
      animation: nx-tx-text-in 300ms var(--nx-ease-out) both;
      animation-delay: calc(var(--nx-i, 0) * 40ms);
    }
    &[data-state=leave] {
      position: absolute;
      inset: 0;
      animation: nx-tx-text-out 150ms var(--nx-ease-out) forwards;
    }
  }
  @keyframes nx-tx-text-in {
    from {
      opacity: 0;
      translate: 0 calc(10px * var(--nx-motion));
      filter: blur(4px);
    }
  }
  @keyframes nx-tx-text-out {
    to {
      opacity: 0;
      translate: 0 calc(-12px * var(--nx-motion));
      filter: blur(4px);
    }
  }
  .nx-fill-button {
    --_h: 2.75rem;
    --_px: 1.35rem;
    --_fs: var(--nx-text-sm);
    --_fill: var(--nx-accent);
    --_fill-fg: var(--nx-accent-contrast);
    --_on: 0;
    position: relative;
    isolation: isolate;
    display: inline-grid;
    place-items: center;
    min-block-size: var(--_h);
    margin: 0;
    padding-inline: var(--_px);
    border: 0;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    color: var(--nx-text);
    font: 600 var(--_fs) / 1.2 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tight);
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    overflow: clip;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--nx-border-strong) 55%, transparent), var(--nx-shadow-xs);
    transition: scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &:focus-visible {
      --_on: 1;
      outline: 2px solid var(--nx-ring);
      outline-offset: 3px;
    }
    &:is(:disabled, [aria-disabled=true]) {
      cursor: not-allowed;
      opacity: 0.5;
    }
    &[data-size=sm] {
      --_h: 2.25rem;
      --_px: 1.05rem;
    }
    &[data-size=lg] {
      --_h: 3.25rem;
      --_px: 1.75rem;
      --_fs: var(--nx-text-md);
    }
    &[data-shape=rounded] {
      border-radius: var(--nx-radius-md);
    }
    &[data-variant=inverse] {
      --_fill: var(--nx-surface-inverse);
      --_fill-fg: var(--nx-text-inverse);
    }
    &[data-variant=gold] {
      --_fill: var(--nx-gradient-gold);
      --_fill-fg: var(--nx-gold-contrast);
    }
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-fill-button:hover:not(:disabled, [aria-disabled=true]) {
      --_on: 1;
    }
  }
  .nx-fill-button-fill {
    --_fill-reach: calc(var(--_on) * var(--nx-fill-reach, 20rem));
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--_fill);
    clip-path: circle(var(--_fill-reach) at var(--nx-px, 50%) var(--nx-py, 50%));
    pointer-events: none;
    transition: --_fill-reach 220ms var(--nx-ease-out);
  }
  .nx-fill-button:is(:focus-visible) .nx-fill-button-fill {
    transition-duration: 300ms;
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-fill-button:hover .nx-fill-button-fill {
      transition-duration: 300ms;
    }
  }
  .nx-fill-button-label {
    display: grid;
    overflow: clip;
    > * {
      grid-area: 1 / 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5em;
      translate: 0 calc(var(--_on) * -110% * var(--nx-motion));
      transition: translate var(--nx-spring-snappy-duration) var(--nx-spring-snappy), opacity var(--nx-dur-fast) var(--nx-ease-out);
    }
    > [data-copy] {
      color: var(--_fill-fg);
      translate: 0 calc((1 - var(--_on)) * 110% * var(--nx-motion));
    }
    .nx-icon {
      inline-size: 1.15em;
      block-size: 1.15em;
    }
  }
  .nx-metal-button {
    --_size: 3.25rem;
    --_rim: 3px;
    --_fs: var(--nx-text-sm);
    --_face-top: color-mix(in oklab, var(--nx-surface) 54%, var(--nx-ink-200));
    --_face-bottom: color-mix(in oklab, var(--nx-surface) 46%, var(--nx-ink-700));
    --_ink: var(--nx-text);
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    block-size: var(--_size);
    min-inline-size: var(--_size);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-full);
    background: none;
    color: var(--_ink);
    font: 600 var(--_fs) / 1 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tight);
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow:
      0 1px 1px rgb(0 0 0 / 0.14),
      0 4px 10px -4px rgb(0 0 0 / 0.32),
      0 16px 30px -16px rgb(0 0 0 / 0.45);
    transition:
      color var(--nx-dur-base) var(--nx-ease-out),
      box-shadow var(--nx-dur-base) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 3px;
    }
    &:is(:disabled, [aria-disabled=true]) {
      cursor: not-allowed;
      opacity: 0.5;
    }
    &[data-size=sm] {
      --_size: 2.5rem;
      --_rim: 2.5px;
    }
    &[data-size=lg] {
      --_size: 4rem;
      --_rim: 3.5px;
      --_fs: var(--nx-text-md);
    }
    &[data-shape=pill] {
      padding-inline: calc(var(--_size) * 0.3) calc(var(--_size) * 0.42);
    }
    &[aria-pressed=true] {
      --_ink: var(--nx-accent-text);
      box-shadow:
        0 1px 1px rgb(0 0 0 / 0.14),
        0 4px 10px -4px rgb(0 0 0 / 0.32),
        0 10px 30px -10px color-mix(in oklab, var(--nx-lapis-500) 75%, transparent);
    }
  }
  .nx-metal-button-rim {
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    background:
      conic-gradient(
        from var(--nx-angle),
        var(--nx-ink-100),
        var(--nx-ink-500) 12%,
        var(--nx-ink-200) 26%,
        var(--nx-ink-800) 40%,
        var(--nx-ink-300) 52%,
        var(--nx-ink-50) 60%,
        var(--nx-ink-600) 74%,
        var(--nx-ink-200) 88%,
        var(--nx-ink-100));
    animation: nx-turn 7s linear infinite;
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        conic-gradient(
          from var(--nx-angle),
          var(--nx-cyan-300),
          var(--nx-lapis-500) 18%,
          var(--nx-ink-100) 32%,
          var(--nx-violet-500) 48%,
          var(--nx-ink-700) 60%,
          var(--nx-cyan-400) 74%,
          var(--nx-lapis-400) 88%,
          var(--nx-cyan-300));
      opacity: 0;
      animation: nx-turn 7s linear infinite;
      transition: opacity 300ms var(--nx-ease-out);
    }
  }
  .nx-metal-button[aria-pressed=true] .nx-metal-button-rim::after {
    opacity: 1;
  }
  .nx-metal-button-face {
    position: absolute;
    inset: var(--_rim);
    z-index: -1;
    overflow: clip;
    border-radius: inherit;
    background:
      radial-gradient(
        130% 80% at 50% -12%,
        rgb(255 255 255 / 0.55),
        transparent 58%),
      conic-gradient(
        from var(--nx-angle) at 50% 62%,
        transparent,
        rgb(255 255 255 / 0.16) 10%,
        transparent 22%,
        transparent 50%,
        rgb(255 255 255 / 0.12) 62%,
        transparent 74%),
      linear-gradient(
        180deg,
        var(--_face-top),
        var(--_face-bottom));
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.6),
      inset 0 -2px 4px rgb(0 0 0 / 0.22),
      inset 0 0 0 1px rgb(0 0 0 / 0.1);
    animation: nx-turn 11s linear infinite reverse;
    transition: box-shadow var(--nx-dur-base) var(--nx-ease-out);
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(
          115deg,
          transparent 35%,
          rgb(255 255 255 / 0.42) 48%,
          rgb(255 255 255 / 0.08) 56%,
          transparent 66%) no-repeat;
      background-size: 250% 100%;
      background-position: 130% 0;
    }
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      opacity: 0.16;
      mix-blend-mode: overlay;
    }
  }
  .nx-metal-button[aria-pressed=true] .nx-metal-button-face {
    box-shadow:
      inset 0 2px 5px rgb(0 0 0 / 0.3),
      inset 0 -1px 0 rgb(255 255 255 / 0.35),
      inset 0 0 0 1px rgb(0 0 0 / 0.12);
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-metal-button:hover:not(:disabled, [aria-disabled=true]) .nx-metal-button-face::before {
      background-position: -60% 0;
      transition: background-position 700ms var(--nx-ease-out);
    }
  }
  .nx-metal-button-icons {
    display: inline-grid;
    flex: none;
    inline-size: calc(var(--_size) * 0.42);
    block-size: calc(var(--_size) * 0.42);
    > * {
      grid-area: 1 / 1;
      display: grid;
      place-items: center;
      transition:
        opacity 300ms var(--nx-ease-emphasized),
        scale 300ms var(--nx-ease-emphasized),
        filter 300ms var(--nx-ease-emphasized);
    }
    > [data-when=on] {
      opacity: 0;
      scale: calc(1 - 0.75 * var(--nx-motion));
      filter: blur(4px);
    }
    .nx-icon {
      inline-size: 100%;
      block-size: 100%;
      stroke-width: 2;
    }
  }
  .nx-metal-button[aria-pressed=true] .nx-metal-button-icons {
    > [data-when=off] {
      opacity: 0;
      scale: calc(1 - 0.75 * var(--nx-motion));
      filter: blur(4px);
    }
    > [data-when=on] {
      opacity: 1;
      scale: 1;
      filter: none;
    }
  }
  .nx-metal-bars {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12%;
    inline-size: 100%;
    block-size: 78%;
    > i {
      flex: none;
      inline-size: 11%;
      block-size: 100%;
      border-radius: 999px;
      background: currentColor;
      scale: 1 var(--_rest, 0.5);
      animation: nx-metal-bar 1.1s var(--nx-ease-in-out) infinite paused;
      animation-delay: calc(var(--_i, 0) * -0.23s);
    }
    > i:nth-child(1) {
      --_i: 0;
      --_rest: 0.35;
    }
    > i:nth-child(2) {
      --_i: 3;
      --_rest: 0.7;
    }
    > i:nth-child(3) {
      --_i: 1;
      --_rest: 1;
    }
    > i:nth-child(4) {
      --_i: 4;
      --_rest: 0.6;
    }
    > i:nth-child(5) {
      --_i: 2;
      --_rest: 0.4;
    }
  }
  .nx-metal-button[aria-pressed=true] .nx-metal-bars > i {
    animation-play-state: running;
  }
  @keyframes nx-metal-bar {
    0%, 100% {
      scale: 1 0.28;
    }
    50% {
      scale: 1 1;
    }
  }
  .nx-metal-button-label {
    padding-inline-end: 0.1rem;
  }
  :is(.nx-toaster, .nx-toast-list)[data-effect=ripple] .nx-toast-icon {
    position: relative;
    isolation: isolate;
    animation: nx-pop 560ms var(--nx-spring-bouncy) 140ms backwards;
    &::before,
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: inherit;
      border: 1.5px solid color-mix(in oklab, var(--_tone) 60%, transparent);
      background: color-mix(in oklab, var(--_tone) 14%, transparent);
      opacity: 0;
      pointer-events: none;
      animation: nx-toast-ripple 900ms var(--nx-ease-out) 160ms both;
    }
    &::after {
      animation-delay: 380ms;
    }
  }
  @keyframes nx-toast-ripple {
    0% {
      opacity: 0.85;
      scale: 1;
      filter: blur(0);
    }
    100% {
      opacity: 0;
      scale: calc(1 + 1.5 * var(--nx-motion));
      filter: blur(calc(2px + 3px * var(--nx-motion)));
    }
  }
  .nx-like[aria-pressed=true] .nx-like-heart {
    border-radius: 50%;
    animation: nx-pop 560ms var(--nx-spring-bouncy), nx-like-ring 620ms var(--nx-ease-out);
  }
  @keyframes nx-like-ring {
    0% {
      box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 55%, transparent);
    }
    100% {
      box-shadow: 0 0 0 0.7em transparent;
    }
  }
  .nx-interests {
    --_fade: 1.5rem;
    display: grid;
    gap: var(--nx-space-3);
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .nx-interests-legend {
    margin-block-end: var(--nx-space-3);
    padding: 0;
    font-size: var(--nx-text-sm);
    font-weight: 600;
    color: var(--nx-text);
  }
  .nx-interests-rows {
    display: grid;
    gap: var(--nx-space-1);
    min-inline-size: 0;
  }
  .nx-interests-row {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--_fade);
    scrollbar-width: none;
    padding-block: 0.375rem;
    mask-image:
      linear-gradient(
        90deg,
        transparent,
        black var(--_fade),
        black calc(100% - var(--_fade)),
        transparent);
    cursor: grab;
    &::-webkit-scrollbar {
      display: none;
    }
    &:is([data-dragging], [data-coasting]) {
      scroll-snap-type: none;
    }
    &[data-dragging] {
      cursor: grabbing;
    }
  }
  .nx-interests-track {
    display: flex;
    gap: var(--nx-space-2);
    inline-size: max-content;
    padding-inline: var(--_fade);
    transition: translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
  }
  .nx-interests-row[data-dragging] > .nx-interests-track {
    transition: none;
  }
  .nx-interests-row:nth-child(even) > .nx-interests-track {
    padding-inline-start: calc(var(--_fade) + 1.75rem);
  }
  @media (pointer: coarse) {
    .nx-interests-row {
      cursor: auto;
    }
  }
  .nx-interest {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.45rem;
    padding-block: 0.45rem;
    padding-inline: 0.7rem 0.55rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    color: var(--nx-text);
    font: 500 var(--nx-text-sm) / 1.25 var(--nx-font-sans);
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    scroll-snap-align: start;
    box-shadow: inset 0 0 0 1px var(--nx-border), var(--nx-shadow-xs);
    transition:
      color var(--nx-dur-base) var(--nx-ease-out),
      box-shadow var(--nx-dur-base) var(--nx-ease-out),
      scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: inherit;
      background:
        linear-gradient(
          180deg,
          color-mix(in oklab, var(--nx-accent) 86%, white),
          var(--nx-accent));
      opacity: 0;
      scale: calc(1 - 0.05 * var(--nx-motion));
      transition: opacity var(--nx-dur-fast) var(--nx-ease-out), scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    }
    &:active:not(:has(:disabled), [data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
      transition-duration: var(--nx-dur-fast);
      transition-timing-function: var(--nx-ease-out);
    }
    &:has(:checked) {
      color: var(--nx-accent-contrast);
      box-shadow: inset 0 0 0 1px transparent, 0 6px 16px -8px color-mix(in oklab, var(--nx-accent) 75%, transparent);
      &::before {
        opacity: 1;
        scale: 1;
      }
    }
    &:has(:focus-visible) {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:has(:disabled) {
      cursor: not-allowed;
      opacity: 0.55;
    }
    &[data-shaking] {
      animation: nx-interest-shake 320ms var(--nx-ease-in-out);
    }
    &[data-exploding] {
      animation: nx-interest-burst 420ms var(--nx-ease-out) backwards;
      animation-delay: calc(var(--nx-i, 0) * 40ms);
      &::before {
        animation: nx-interest-skin 420ms var(--nx-ease-out) backwards;
        animation-delay: inherit;
      }
    }
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-interest:hover:not(:has(:checked, :disabled)) {
      box-shadow: inset 0 0 0 1px var(--nx-border-strong), var(--nx-shadow-xs);
    }
  }
  .nx-interest-input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    appearance: none;
    pointer-events: none;
  }
  .nx-interest-emoji {
    display: inline-block;
    font-size: 1.05em;
    line-height: 1;
    transition: scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy), rotate var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
  }
  .nx-interest:has(:checked) .nx-interest-emoji {
    scale: calc(1 + 0.18 * var(--nx-motion));
    rotate: calc(-10deg * var(--nx-motion) * var(--nx-dir));
  }
  .nx-interest-mark {
    display: inline-grid;
    flex: none;
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--nx-text-subtle);
    transition: color var(--nx-dur-base) var(--nx-ease-out);
    > .nx-icon {
      grid-area: 1 / 1;
      inline-size: 100%;
      block-size: 100%;
      stroke-width: 2.25;
      transition:
        opacity 300ms var(--nx-ease-emphasized),
        scale 300ms var(--nx-ease-emphasized),
        filter 300ms var(--nx-ease-emphasized);
    }
    > .nx-interest-on {
      opacity: 0;
      scale: calc(1 - 0.75 * var(--nx-motion));
      filter: blur(4px);
    }
  }
  .nx-interest:has(:checked) .nx-interest-mark {
    color: inherit;
    > .nx-interest-off {
      opacity: 0;
      scale: calc(1 - 0.75 * var(--nx-motion));
      filter: blur(4px);
    }
    > .nx-interest-on {
      opacity: 1;
      scale: 1;
      filter: none;
    }
  }
  @keyframes nx-interest-shake {
    20% {
      translate: calc(-3px * var(--nx-motion)) 0;
      rotate: calc(-3deg * var(--nx-motion));
    }
    40% {
      translate: calc(3px * var(--nx-motion)) 0;
      rotate: calc(3deg * var(--nx-motion));
    }
    60% {
      translate: calc(-2px * var(--nx-motion)) 0;
      rotate: calc(-2deg * var(--nx-motion));
    }
    80% {
      translate: calc(2px * var(--nx-motion)) 0;
      rotate: calc(1deg * var(--nx-motion));
    }
  }
  @keyframes nx-interest-burst {
    0% {
      scale: 1;
    }
    35% {
      scale: calc(1 + 0.08 * var(--nx-motion));
    }
    100% {
      scale: 1;
    }
  }
  @keyframes nx-interest-skin {
    from {
      opacity: 1;
      scale: 1;
      filter: blur(0);
    }
    to {
      opacity: 0;
      scale: calc(1 + 0.3 * var(--nx-motion));
      filter: blur(6px);
    }
  }
  .nx-interests-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--nx-space-3);
  }
  .nx-emoji-burst {
    position: fixed;
    inset: auto;
    z-index: var(--nx-z-toast);
    inline-size: 0;
    block-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
    pointer-events: none;
  }
  .nx-emoji-burst-particle {
    position: absolute;
    top: 0;
    left: 0;
    font-size: calc(1.1rem * var(--_size, 1));
    line-height: 1;
    translate: -50% -50%;
    opacity: 0;
    animation: nx-emoji-fly 780ms var(--nx-ease-out) var(--_delay, 0ms) forwards;
  }
  @keyframes nx-emoji-fly {
    0% {
      opacity: 0;
      transform: translate(0, 0) rotate(0deg) scale(1);
    }
    12% {
      opacity: 1;
    }
    65% {
      opacity: 1;
      transform: translate(var(--_dx), var(--_dy)) rotate(var(--_rot)) scale(0.9);
    }
    100% {
      opacity: 0;
      transform: translate(var(--_dx), calc(var(--_dy) + 18px)) rotate(calc(var(--_rot) * 1.4)) scale(0.6);
    }
  }
  .nx-label-creator {
    position: relative;
    display: grid;
    min-inline-size: 0;
  }
  .nx-label-creator-field {
    --_border: var(--nx-border-strong);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    min-block-size: 2.75rem;
    padding: 0.375rem;
    border: 1px solid var(--_border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-xs);
    cursor: text;
    transition: border-color var(--nx-dur-fast) var(--nx-ease-out), box-shadow var(--nx-dur-base) var(--nx-ease-out);
    &:focus-within {
      --_border: var(--nx-accent);
      box-shadow: var(--nx-shadow-xs), 0 0 0 4px var(--nx-accent-soft);
    }
  }
  .nx-label-creator-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-label-creator-input {
    flex: 1 1 8rem;
    min-inline-size: 6rem;
    min-block-size: 1.75rem;
    padding: 0 0.375rem;
    border: 0;
    background: transparent;
    color: var(--nx-text);
    font: 400 var(--nx-text-sm) / 1.5 var(--nx-font-sans);
    &:focus-visible {
      outline: none;
    }
    &::placeholder {
      color: var(--nx-text-subtle);
      opacity: 1;
    }
  }
  @media (pointer: coarse) {
    .nx-label-creator-input {
      font-size: var(--nx-text-md);
    }
  }
  .nx-label-chip {
    --_c: var(--nx-chart-1);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-inline-size: 14rem;
    min-block-size: 1.75rem;
    padding-block: 0.125rem;
    padding-inline: 0.5rem 0.125rem;
    border-radius: var(--nx-radius-xs);
    background: color-mix(in oklab, var(--_c) 14%, var(--nx-surface));
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--_c) 26%, transparent);
    color: color-mix(in oklab, var(--_c) 62%, var(--nx-text));
    font: 500 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
    transition:
      opacity 150ms var(--nx-ease-out),
      scale 150ms var(--nx-ease-out),
      margin-inline-end 200ms var(--nx-ease-out);
    &[data-state=enter] {
      animation: nx-label-chip-fade 200ms var(--nx-ease-out) both, nx-label-chip-pop var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy) both;
    }
    &[data-leaving] {
      opacity: 0;
      scale: calc(1 - 0.05 * var(--nx-motion));
      margin-inline-end: calc(-1 * var(--_w, 0px) - 0.375rem);
      pointer-events: none;
    }
    &[data-flash] {
      animation: nx-shake 360ms var(--nx-ease-out);
    }
  }
  @keyframes nx-label-chip-fade {
    from {
      opacity: 0;
      filter: blur(4px);
    }
  }
  @keyframes nx-label-chip-pop {
    from {
      scale: calc(1 - 0.05 * var(--nx-motion));
    }
  }
  .nx-label-chip-dot {
    flex: none;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: var(--_c);
  }
  .nx-label-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-label-chip-remove {
    display: grid;
    flex: none;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: calc(var(--nx-radius-xs) - 2px);
    background: transparent;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    transition:
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      opacity var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &:hover {
      opacity: 1;
      background: color-mix(in oklab, var(--_c) 20%, transparent);
    }
    &:focus-visible {
      opacity: 1;
      outline: 2px solid var(--nx-ring);
      outline-offset: 1px;
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    .nx-icon {
      inline-size: 0.85rem;
      block-size: 0.85rem;
    }
  }
  .nx-label-creator-panel {
    --_c: var(--nx-chart-1);
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(100% + 0.375rem);
    z-index: var(--nx-z-dropdown);
    display: grid;
    gap: 0.125rem;
    padding: 0.25rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-lg);
    transform-origin: 50% 0;
    opacity: 0;
    scale: calc(1 - 0.05 * var(--nx-motion));
    translate: 0 calc(-4px * var(--nx-motion));
    visibility: hidden;
    transition:
      opacity 150ms var(--nx-ease-out),
      scale 150ms var(--nx-ease-out),
      translate 150ms var(--nx-ease-out),
      visibility 0s linear 150ms;
    &[data-open] {
      opacity: 1;
      scale: 1;
      translate: none;
      visibility: visible;
      transition:
        opacity 200ms var(--nx-ease-out),
        scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
        translate var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
        visibility 0s;
    }
  }
  .nx-label-creator-create {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    inline-size: 100%;
    min-block-size: 2.25rem;
    padding: 0.375rem 0.5rem;
    border: 0;
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface-2);
    color: var(--nx-text);
    font: 500 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
    text-align: start;
    cursor: pointer;
    transition: background-color var(--nx-dur-fast) var(--nx-ease-out);
    &:hover {
      background: var(--nx-surface-3);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: -2px;
    }
    &[data-state=creating] {
      cursor: progress;
    }
    strong {
      font-weight: 650;
      overflow-wrap: anywhere;
    }
  }
  .nx-label-creator-create-icon {
    display: inline-grid;
    flex: none;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: var(--nx-radius-xs);
    background: color-mix(in oklab, var(--_c) 16%, transparent);
    color: var(--_c);
    > * {
      grid-area: 1 / 1;
      transition:
        opacity 300ms var(--nx-ease-emphasized),
        scale 300ms var(--nx-ease-emphasized),
        filter 300ms var(--nx-ease-emphasized);
    }
    > .nx-icon {
      inline-size: 0.95rem;
      block-size: 0.95rem;
      stroke-width: 2.25;
    }
    > .nx-pixel-loader {
      opacity: 0;
      scale: calc(1 - 0.75 * var(--nx-motion));
      filter: blur(4px);
    }
  }
  .nx-label-creator-create[data-state=creating] .nx-label-creator-create-icon {
    > .nx-icon {
      opacity: 0;
      scale: calc(1 - 0.75 * var(--nx-motion));
      filter: blur(4px);
    }
    > .nx-pixel-loader {
      opacity: 1;
      scale: 1;
      filter: none;
    }
  }
  .nx-label-creator-colors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    min-inline-size: 0;
    margin: 0;
    padding: 0.25rem 0.375rem 0.375rem;
    border: 0;
  }
  .nx-label-creator-colors-legend {
    float: inline-start;
    margin-inline-end: 0.375rem;
    padding: 0;
    font-size: var(--nx-text-xs);
    color: var(--nx-text-subtle);
  }
  .nx-label-color {
    --_c: var(--nx-chart-1);
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: 50%;
    cursor: pointer;
  }
  .nx-label-color-input {
    position: absolute;
    inset: 0;
    margin: 0;
    border-radius: 50%;
    opacity: 0;
    appearance: none;
    cursor: pointer;
  }
  .nx-label-color-dot {
    inline-size: 1rem;
    block-size: 1rem;
    border-radius: 50%;
    background: var(--_c);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
    pointer-events: none;
    transition: box-shadow var(--nx-dur-base) var(--nx-ease-out), scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
  }
  .nx-label-color-input:checked + .nx-label-color-dot {
    scale: calc(1 - 0.2 * var(--nx-motion));
    box-shadow: 0 0 0 3px var(--nx-surface), 0 0 0 5px var(--_c);
  }
  .nx-label-color-input:focus-visible + .nx-label-color-dot {
    outline: 2px solid var(--nx-ring);
    outline-offset: 6px;
  }
  .nx-pixel-loader {
    --_px: 4px;
    --_gap: 2px;
    --_dur: 1.3s;
    --_step: 85ms;
    display: inline-grid;
    place-items: center;
    color: var(--nx-accent);
    vertical-align: middle;
    &[data-size=xs] {
      --_px: 2px;
      --_gap: 1px;
    }
    &[data-size=sm] {
      --_px: 3px;
      --_gap: 1.5px;
    }
    &[data-size=lg] {
      --_px: 6px;
      --_gap: 3px;
    }
    &[data-variant=chaos] {
      color: color-mix(in oklab, var(--nx-accent) 55%, var(--nx-text-subtle));
    }
  }
  .nx-pixel-loader-grid {
    display: grid;
    grid-template-columns: repeat(var(--nx-cols, 5), var(--_px));
    gap: var(--_gap);
    > i {
      --_k: calc(var(--_pl-x, 0) + var(--_pl-y, 0));
      --_t: calc(var(--_k) / max(1, var(--nx-rows, 5) + var(--nx-cols, 5) - 2));
      display: block;
      inline-size: var(--_px);
      block-size: var(--_px);
      border-radius: calc(var(--_px) * 0.25);
      background: color-mix(in oklab, currentColor, var(--nx-glow) calc(var(--_t) * 55%));
      opacity: 0.2;
      animation: nx-pixel-pulse calc(var(--_dur) * var(--_slow, 1)) var(--nx-ease-in-out) infinite;
      animation-delay: calc(var(--_k) * var(--_step) * var(--_slow, 1) - 60s);
    }
  }
  .nx-pixel-loader[data-variant=center] .nx-pixel-loader-grid > i {
    --_k: calc(var(--_pl-d, 0) * 5);
    --_t: var(--_pl-d, 0);
  }
  .nx-pixel-loader[data-variant=chaos] .nx-pixel-loader-grid > i {
    background: currentColor;
    animation-name: nx-pixel-flicker;
    animation-duration: calc(var(--_dur) * var(--_slow, 1) * (0.6 + var(--_pl-s, 0.5) * 1.1));
    animation-delay: calc(var(--_pl-r, 0) * -6s * var(--_slow, 1));
  }
  @keyframes nx-pixel-pulse {
    0%, 100% {
      opacity: 0.18;
      scale: calc(1 - 0.3 * var(--nx-motion));
    }
    40% {
      opacity: 1;
      scale: 1;
    }
  }
  @keyframes nx-pixel-flicker {
    0%, 100% {
      opacity: 0.16;
    }
    18% {
      opacity: 0.95;
    }
    36% {
      opacity: 0.3;
    }
    58% {
      opacity: 0.7;
    }
    76% {
      opacity: 0.2;
    }
  }
  .nx-parametric {
    --_dur: 2.6s;
    display: inline-grid;
    place-items: center;
    inline-size: var(--nx-loader-size, 3.5rem);
    aspect-ratio: 1;
    color: var(--nx-accent);
    vertical-align: middle;
    &[data-kind=spiro] {
      --_dur: 3.6s;
      color: var(--nx-violet-500);
    }
    &[data-kind=lissajous] {
      --_dur: 3s;
      color: var(--nx-glow);
    }
    svg {
      inline-size: 100%;
      block-size: 100%;
      overflow: visible;
      animation: nx-spin 28s linear infinite;
    }
    path {
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
  }
  .nx-parametric-track {
    stroke-width: 1.5;
    opacity: 0.16;
  }
  .nx-parametric-trail {
    stroke-width: 3;
    stroke-dasharray: var(--_len) calc(1 - var(--_len));
    opacity: var(--_alpha, 1);
    animation: nx-parametric-run calc(var(--_dur) * var(--_slow, 1)) linear infinite;
    &[data-head] {
      stroke-width: 4;
      stroke: color-mix(in oklab, currentColor 55%, white);
      filter: drop-shadow(0 0 2px currentColor) drop-shadow(0 0 5px currentColor);
    }
  }
  @keyframes nx-parametric-run {
    from {
      stroke-dashoffset: var(--_len);
    }
    to {
      stroke-dashoffset: calc(var(--_len) - 1);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-flip-button-cube {
      transform: none;
      transition: none;
    }
    .nx-flip-button-face,
    .nx-flip-button-face[data-face=back] {
      transform: none;
      transition: opacity var(--nx-dur-base) var(--nx-ease-out);
    }
    .nx-flip-button-face {
      opacity: calc(1 - var(--_shade));
    }
    .nx-flip-button-face[data-face=back] {
      opacity: var(--_shade);
    }
    .nx-flip-button-face::after {
      display: none;
    }
    .nx-blob-button-blobs > i {
      animation: none;
      transition: none;
    }
    .nx-border-button-march {
      animation: none;
    }
    .nx-border-button-frame .nx-border-button-trace {
      animation-duration: 3s;
    }
    .nx-tx-button-waves {
      animation-duration: 2.4s;
    }
    .nx-fill-button-label > * {
      translate: none;
    }
    .nx-fill-button-label > :not([data-copy]) {
      opacity: calc(1 - var(--_on));
    }
    .nx-fill-button-label > [data-copy] {
      opacity: var(--_on);
    }
    .nx-metal-button-rim,
    .nx-metal-button-rim::after,
    .nx-metal-button-face {
      animation: none;
    }
    .nx-metal-bars > i {
      animation: none;
      scale: 1 var(--_rest, 0.5);
    }
    .nx-like[aria-pressed=true] .nx-like-heart {
      animation: nx-pop 560ms var(--nx-spring-bouncy);
    }
    .nx-interests-track {
      transition: none;
    }
    :is(.nx-pixel-loader, .nx-parametric) {
      --_slow: 3;
    }
    .nx-parametric svg {
      animation: none;
    }
  }
  @media (forced-colors: active) {
    :is(.nx-flip-button-face, .nx-blob-button, .nx-tx-button, .nx-fill-button, .nx-metal-button, .nx-interest) {
      border: 1px solid ButtonText;
    }
    .nx-border-button-frame rect {
      stroke: ButtonText;
    }
  }
  .nx-upload {
    display: grid;
    gap: var(--nx-space-3);
  }
  .nx-upload-zone {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-8) var(--nx-space-6);
    border: 1.5px dashed var(--nx-border-strong);
    border-radius: var(--nx-radius-2xl);
    background: var(--nx-surface);
    text-align: center;
    cursor: pointer;
    overflow: clip;
    transition-property: background-color, border-color;
    transition-duration: var(--nx-dur-fast);
    transition-timing-function: var(--nx-ease-out);
  }
  .nx-upload-zone:hover {
    border-color: var(--nx-accent-border);
  }
  .nx-upload-zone:has(.nx-upload-input:focus-visible) {
    outline: 2px solid var(--nx-ring);
    outline-offset: 2px;
  }
  .nx-upload-input {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    opacity: 0;
    cursor: pointer;
  }
  .nx-upload-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--nx-gradient-brand);
    opacity: 0;
    transition: opacity 250ms var(--nx-ease-out);
  }
  .nx-upload[data-state=drag] .nx-upload-zone {
    border-color: var(--nx-accent-border);
    background: var(--nx-accent-soft);
  }
  .nx-upload[data-state=drag] .nx-upload-glow {
    opacity: 0.12;
  }
  .nx-upload-icon {
    position: relative;
    z-index: 0;
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-accent-soft);
    color: var(--nx-accent-text);
    box-shadow: var(--nx-shadow-sm);
    transition-property: translate, scale;
    transition-duration: var(--nx-spring-snappy-duration);
    transition-timing-function: var(--nx-spring-snappy);
    .nx-icon {
      inline-size: 1.25rem;
      block-size: 1.25rem;
    }
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: inherit;
      background: var(--nx-gradient-brand);
      opacity: 0;
      transition: opacity var(--nx-dur-fast) var(--nx-ease-out);
    }
  }
  .nx-upload[data-state=drag] .nx-upload-icon {
    translate: 0 calc(-4px * var(--nx-motion));
    scale: 1.06;
    &::after {
      opacity: 1;
    }
  }
  .nx-upload-title {
    position: relative;
    color: var(--nx-text);
    font: 600 var(--nx-text-base) / 1.4 var(--nx-font-sans);
  }
  .nx-upload-hint {
    position: relative;
    color: var(--nx-text-subtle);
    font: 400 var(--nx-text-xs) / 1.4 var(--nx-font-sans);
  }
  .nx-upload-list {
    display: grid;
    gap: var(--nx-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-upload-file {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon text remove" "icon progress remove";
    column-gap: var(--nx-space-3);
    row-gap: var(--nx-space-2);
    align-items: center;
    padding: var(--nx-space-2) var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    animation: nx-rise var(--nx-dur-slow) var(--nx-ease-out) backwards;
    animation-delay: calc(var(--nx-i, 0) * var(--nx-stagger));
  }
  .nx-upload-file-icon {
    grid-area: icon;
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--nx-radius-md);
    background: var(--nx-accent-soft);
    color: var(--nx-accent-text);
    .nx-icon {
      inline-size: 1.125rem;
      block-size: 1.125rem;
    }
  }
  .nx-upload-file-text {
    grid-area: text;
    display: grid;
    min-inline-size: 0;
  }
  .nx-upload-file-name {
    overflow: hidden;
    color: var(--nx-text);
    font: 500 var(--nx-text-sm) / 1.4 var(--nx-font-sans);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-upload-file-meta {
    color: var(--nx-text-subtle);
    font: 400 var(--nx-text-xs) / 1.4 var(--nx-font-sans);
  }
  .nx-upload-file-progress {
    grid-area: progress;
    block-size: 4px;
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--nx-border) 55%, transparent);
    overflow: clip;
  }
  .nx-upload-file-progress > i {
    display: block;
    inline-size: 0%;
    block-size: 100%;
    border-radius: inherit;
    background: var(--nx-gradient-brand);
    transition-property: inline-size, opacity;
    transition-duration: var(--nx-spring-gentle-duration), var(--nx-dur-fast);
    transition-timing-function: var(--nx-spring-gentle), var(--nx-ease-out);
  }
  .nx-upload-file[data-state=uploading] .nx-upload-file-progress > i {
    inline-size: 100%;
    opacity: 0.45;
    animation: nx-sheen 1.2s linear infinite;
  }
  .nx-upload-file[data-state=done] .nx-upload-file-progress > i {
    inline-size: 100%;
    opacity: 1;
  }
  .nx-upload-file[data-state=done] .nx-upload-file-icon {
    background: var(--nx-success-soft);
    color: var(--nx-success-text);
  }
  .nx-upload-file[data-state=error] {
    border-color: color-mix(in oklab, var(--nx-danger) 45%, transparent);
    background: var(--nx-danger-soft);
  }
  .nx-upload-file[data-state=error] .nx-upload-file-icon {
    background: var(--nx-danger-soft);
    color: var(--nx-danger-text);
  }
  .nx-upload-file[data-state=error] .nx-upload-file-meta {
    color: var(--nx-danger-text);
  }
  .nx-upload-file-remove {
    grid-area: remove;
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-full);
    background: transparent;
    color: var(--nx-text-subtle);
    cursor: pointer;
    transition-property:
      scale,
      background-color,
      color;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out);
    .nx-icon {
      inline-size: 0.875rem;
      block-size: 0.875rem;
    }
    &:hover {
      background: var(--nx-surface-2);
      color: var(--nx-text);
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-upload-file {
      animation: none;
    }
    .nx-upload[data-state=drag] .nx-upload-icon {
      translate: none;
    }
    .nx-upload-file[data-state=uploading] .nx-upload-file-progress > i {
      animation-duration: 3.6s;
    }
  }
  @media (forced-colors: active) {
    .nx-upload-zone,
    .nx-upload-file {
      border: 1px solid CanvasText;
    }
    .nx-upload-file-progress {
      border: 1px solid CanvasText;
    }
  }
}

/* src/css/blocks/cards.css */
@layer nx.components {
  :where(.nx-stacked-card, .nx-xstack-card, .nx-team-card, .nx-feature, .nx-orbit-screen, .nx-ring-face, .nx-depth-card, .nx-cycle-card) {
    &[data-tone=lapis] {
      --nx-tone: var(--nx-lapis-500);
    }
    &[data-tone=violet] {
      --nx-tone: var(--nx-violet-500);
    }
    &[data-tone=cyan] {
      --nx-tone: var(--nx-cyan-500);
    }
    &[data-tone=gold] {
      --nx-tone: var(--nx-gold-500);
    }
  }
  :is(.nx-stacked-media, .nx-ring-cover, .nx-xstack-media, .nx-orbit-cover, .nx-depth-media, .nx-elastic-cover) img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-radius: inherit;
    outline: 1px solid color-mix(in oklab, var(--nx-text) 10%, transparent);
    outline-offset: -1px;
  }
  .nx-stacked {
    --_top: var(--nx-stacked-top, var(--nx-space-24));
    --_offset: var(--nx-stacked-offset, var(--nx-space-5));
    --_h: var(--nx-stacked-height, min(26rem, 70svh));
    --_gap: var(--nx-stacked-gap, var(--nx-space-16));
    --_hold: var(--nx-stacked-hold, 18svh);
    --_slot: calc(var(--_h) + var(--_gap) - var(--_offset));
    --_shrink: 0.045;
    --_tilt: 9deg;
    container: nx-stacked / inline-size;
  }
  .nx-stacked-list {
    display: flow-root;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-stacked-item {
    position: sticky;
    inset-block-start: calc(var(--_top) + var(--nx-i, 0) * var(--_offset));
    block-size: var(--_h);
    margin-block-end: var(--_gap);
    perspective: 1600px;
    &:last-child {
      margin-block-end: var(--_hold);
    }
  }
  .nx-stacked-card {
    --_tone: var(--nx-tone, var(--nx-accent));
    --_radius: var(--nx-radius-2xl);
    --_inset: var(--nx-space-2);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--nx-space-2);
    block-size: 100%;
    padding: var(--_inset);
    overflow: clip;
    border: 1px solid color-mix(in oklab, var(--_tone) 22%, var(--nx-border));
    border-radius: var(--_radius);
    background:
      radial-gradient(
        120% 90% at 0% 0%,
        color-mix(in oklab, var(--_tone) 16%, transparent),
        transparent 62%),
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--_tone) 6%, var(--nx-surface)),
        var(--nx-surface));
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-lg), inset 0 1px 0 var(--nx-highlight);
    transform-origin: 50% 0%;
    scale: calc(1 - var(--_shrink) * var(--nx-depth, 0) * var(--nx-motion));
    rotate: x calc(var(--nx-progress, 0) * var(--_tilt) * -1 * var(--nx-motion));
    filter: brightness(calc(1 - var(--nx-progress, 0) * 0.3));
  }
  .nx-stacked-body {
    display: grid;
    align-content: space-between;
    gap: var(--nx-space-4);
    padding: var(--nx-space-6);
    min-block-size: 0;
  }
  .nx-stacked-eyebrow {
    display: block;
    margin-block-end: var(--nx-space-3);
    color: color-mix(in oklab, var(--_tone) 70%, var(--nx-text));
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-mono);
  }
  .nx-stacked-title {
    margin: 0;
    font: 700 var(--nx-text-4xl) / 1.08 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tighter);
    text-wrap: balance;
  }
  .nx-stacked-description {
    margin: var(--nx-space-3) 0 0;
    max-inline-size: 34ch;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-md);
    line-height: 1.6;
    text-wrap: pretty;
  }
  .nx-stacked-media {
    position: relative;
    min-block-size: 0;
    overflow: clip;
    border-radius: calc(var(--_radius) - var(--_inset));
    background: color-mix(in oklab, var(--_tone) 14%, var(--nx-surface-2));
  }
  @container nx-stacked (width < 40rem) {
    .nx-stacked-card {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto minmax(0, 1fr);
    }
    .nx-stacked-body {
      padding: var(--nx-space-4);
    }
    .nx-stacked-title {
      font-size: var(--nx-text-2xl);
    }
    .nx-stacked-description {
      font-size: var(--nx-text-sm);
    }
  }
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .nx-stacked-list {
      view-timeline: --nx-stacked block;
      view-timeline-inset: var(--_top) 0px;
    }
    .nx-stacked-item:not(:last-child) > .nx-stacked-card {
      --_depth: calc(var(--nx-count, 2) - 1 - var(--nx-i, 0));
      animation: nx-stacked-cover linear both, nx-stacked-sink linear both;
      animation-timeline: --nx-stacked, --nx-stacked;
      animation-range: exit-crossing calc(var(--nx-i, 0) * var(--_slot) + var(--_gap)) exit-crossing calc((var(--nx-i, 0) + 1) * var(--_slot)), exit-crossing calc(var(--nx-i, 0) * var(--_slot) + var(--_gap)) exit-crossing calc((var(--nx-count, 2) - 1) * var(--_slot));
    }
  }
  @keyframes nx-stacked-cover {
    to {
      rotate: x calc(var(--_tilt) * -1 * var(--nx-motion));
      filter: brightness(0.7);
    }
  }
  @keyframes nx-stacked-sink {
    to {
      scale: calc(1 - var(--_shrink) * var(--_depth, 1) * var(--nx-motion));
    }
  }
  .nx-ring {
    --_w: var(--nx-ring-card-width, 12.5rem);
    --_h: var(--nx-ring-card-height, 16.5rem);
    --_gap: var(--nx-ring-gap, var(--nx-space-5));
    --_step: calc(360deg / var(--nx-count, 8));
    --_r: calc((var(--_w) + var(--_gap)) / 2 / tan(var(--_step) / 2));
    display: grid;
    justify-items: center;
    gap: var(--nx-space-4);
    inline-size: 100%;
    min-inline-size: 0;
  }
  .nx-ring-stage {
    position: relative;
    inline-size: 100%;
    block-size: calc(var(--_h) + var(--nx-space-16));
    overflow: clip;
    perspective: var(--nx-ring-perspective, 1500px);
    perspective-origin: 50% 42%;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    cursor: grab;
    border-radius: var(--nx-radius-2xl);
    mask-image:
      linear-gradient(
        90deg,
        transparent,
        var(--nx-ink-950) 14%,
        var(--nx-ink-950) 86%,
        transparent);
    &[data-dragging] {
      cursor: grabbing;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
      mask-image: none;
    }
  }
  .nx-ring-track {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    translate: 0 0 calc(var(--_r) * -1);
    rotate: y calc(var(--nx-turn, 0) * var(--_step) * var(--nx-dir) * -1);
  }
  .nx-ring-card {
    --_near: calc((1 + cos((var(--i, 0) - var(--nx-turn, 0)) * var(--_step))) / 2);
    position: absolute;
    inset: 0;
    inline-size: var(--_w);
    block-size: var(--_h);
    margin: auto;
    transform: rotateY(calc(var(--i, 0) * var(--_step) * var(--nx-dir))) translateZ(var(--_r));
    backface-visibility: hidden;
  }
  .nx-ring-face {
    --_tone: var(--nx-tone, var(--nx-accent));
    --_radius: var(--nx-radius-xl);
    --_inset: var(--nx-space-2);
    --_press: 1;
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: var(--nx-space-2);
    block-size: 100%;
    padding: var(--_inset);
    border: 1px solid var(--nx-border);
    border-radius: var(--_radius);
    background: var(--nx-surface);
    color: var(--nx-text);
    text-decoration: none;
    box-shadow: var(--nx-shadow-md);
    opacity: calc(0.3 + 0.7 * var(--_near));
    filter: brightness(calc(0.5 + 0.5 * var(--_near))) blur(calc((1 - var(--_near)) * 2.5px));
    scale: var(--_press);
    transition:
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      box-shadow var(--nx-dur-base) var(--nx-ease-out),
      border-color var(--nx-dur-base) var(--nx-ease-out);
    -webkit-user-drag: none;
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:active {
      --_press: calc(1 - 0.04 * var(--nx-motion));
    }
  }
  .nx-ring-card[data-active] .nx-ring-face {
    border-color: color-mix(in oklab, var(--_tone) 45%, var(--nx-border));
    box-shadow: var(--nx-shadow-xl), 0 18px 48px -18px color-mix(in oklab, var(--_tone) 70%, transparent);
  }
  .nx-ring-cover {
    min-block-size: 0;
    overflow: clip;
    border-radius: calc(var(--_radius) - var(--_inset));
    background: color-mix(in oklab, var(--_tone) 18%, var(--nx-surface-2));
  }
  .nx-ring-caption {
    display: grid;
    gap: 0.1rem;
    padding: var(--nx-space-1) var(--nx-space-2) var(--nx-space-2);
    font-size: var(--nx-text-sm);
    font-weight: 600;
    line-height: 1.3;
    small {
      color: var(--nx-text-muted);
      font-size: var(--nx-text-xs);
      font-weight: 500;
    }
  }
  .nx-ring-label {
    display: grid;
    place-items: center;
    min-block-size: 4.25rem;
    text-align: center;
  }
  .nx-ring-titles {
    display: grid;
    place-items: center;
    font: 700 var(--nx-text-3xl) / 1.15 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
  }
  .nx-ring-label[data-morphing] .nx-ring-titles {
    filter: var(--_goo, none) blur(0.3px);
  }
  .nx-ring-title {
    grid-area: 1 / 1;
    white-space: nowrap;
    transition: opacity var(--nx-dur-slow) var(--nx-ease-out), filter var(--nx-dur-slow) var(--nx-ease-out);
    &[data-state=out] {
      opacity: 0;
      filter: blur(calc(9px * var(--nx-motion)));
    }
  }
  .nx-ring-subtitle {
    margin: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    transition: opacity var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-ring-label[data-morphing] .nx-ring-subtitle {
    opacity: 0.35;
  }
  .nx-ring-goo {
    position: absolute;
    inline-size: 0;
    block-size: 0;
  }
  .nx-ring-controls,
  .nx-depth-controls,
  .nx-cycle-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-3);
  }
  .nx-ring-count,
  .nx-cycle-count {
    min-inline-size: 4.5ch;
    color: var(--nx-text-muted);
    font: 500 var(--nx-text-sm) / 1 var(--nx-font-mono);
    font-variant-numeric: tabular-nums;
    text-align: center;
    white-space: nowrap;
  }
  .nx-xstack {
    --_w: var(--nx-xstack-card-width, 15rem);
    --_h: var(--nx-xstack-card-height, 16rem);
    --_fan: 1;
    display: grid;
    justify-items: center;
    gap: var(--nx-space-5);
  }
  .nx-xstack-list {
    display: grid;
    grid-template-columns: min(var(--_w), 100%);
    grid-auto-rows: var(--_h);
    justify-content: center;
    gap: var(--nx-space-4);
    inline-size: 100%;
    margin: 0;
    padding: var(--nx-space-6) 0 var(--nx-space-2);
    list-style: none;
  }
  .nx-xstack-item {
    position: relative;
    z-index: calc(var(--nx-count, 1) - var(--nx-i, 0));
    block-size: var(--_h);
  }
  .nx-xstack-card {
    --_tone: var(--nx-tone, var(--nx-accent));
    --_radius: var(--nx-radius-xl);
    --_inset: var(--nx-space-2);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: var(--nx-space-3);
    block-size: 100%;
    padding: var(--_inset);
    border: 1px solid var(--nx-border);
    border-radius: var(--_radius);
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-md), inset 0 1px 0 var(--nx-highlight);
    transition:
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      rotate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      scale var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      opacity var(--nx-dur-base) var(--nx-ease-out),
      box-shadow var(--nx-dur-slow) var(--nx-ease-out);
  }
  .nx-xstack-media {
    min-block-size: 0;
    overflow: clip;
    border-radius: calc(var(--_radius) - var(--_inset));
    background: color-mix(in oklab, var(--_tone) 18%, var(--nx-surface-2));
  }
  .nx-xstack-text {
    display: grid;
    gap: var(--nx-space-1);
    padding: 0 var(--nx-space-2) var(--nx-space-2);
  }
  .nx-xstack-title {
    margin: 0;
    font: 650 var(--nx-text-md) / 1.3 var(--nx-font-display);
  }
  .nx-xstack-description {
    margin: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    line-height: 1.5;
  }
  .nx-xstack:not([data-expanded]) {
    .nx-xstack-list {
      cursor: pointer;
    }
    .nx-xstack-item {
      grid-area: 1 / 1;
    }
    .nx-xstack-card {
      translate: calc(var(--nx-i, 0) * 12px * var(--_fan) * var(--nx-dir) * var(--nx-motion)) calc(var(--nx-i, 0) * -7px * var(--_fan) * var(--nx-motion));
      rotate: calc(var(--nx-i, 0) * 4deg * var(--_fan) * var(--nx-dir) * var(--nx-motion));
      scale: calc(1 - var(--nx-i, 0) * 0.03);
    }
    .nx-xstack-item:nth-child(n+2) .nx-xstack-card {
      box-shadow: var(--nx-shadow-sm);
    }
    .nx-xstack-item:nth-child(n+5) .nx-xstack-card {
      opacity: 0;
    }
  }
  .nx-xstack[data-expanded] .nx-xstack-list {
    grid-template-columns: repeat(auto-fill, min(var(--_w), 100%));
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-xstack:not([data-expanded]) .nx-xstack-list:hover {
      --_fan: 1.7;
    }
    .nx-xstack[data-expanded] .nx-xstack-card:hover {
      box-shadow: var(--nx-shadow-lg), inset 0 1px 0 var(--nx-highlight);
    }
  }
  .nx-xstack-toggle .nx-icon {
    transition: rotate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
  }
  .nx-xstack[data-expanded] .nx-xstack-toggle .nx-icon {
    rotate: 180deg;
  }
  .nx-orbit {
    --_step: calc(360deg / var(--nx-count, 6));
    --_tilt: var(--nx-orbit-tilt, -16deg);
    position: relative;
    container-type: inline-size;
  }
  .nx-orbit-stage {
    --_w: var(--nx-orbit-item-width, clamp(6.5rem, 30cqi, 10.5rem));
    --_h: var(--nx-orbit-item-height, calc(var(--_w) * 0.78));
    --_r: var(--nx-orbit-radius, min(36cqi, 20rem));
    position: relative;
    block-size: var(--nx-orbit-height, clamp(17rem, 60cqi, 25rem));
    overflow: clip;
    perspective: 1400px;
    perspective-origin: 50% 30%;
  }
  .nx-orbit-scene {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    rotate: x var(--_tilt);
  }
  .nx-orbit-path {
    position: absolute;
    inset: 0;
    inline-size: calc(var(--_r) * 2);
    block-size: calc(var(--_r) * 2);
    margin: auto;
    border: 1px dashed color-mix(in oklab, var(--nx-text) 18%, transparent);
    border-radius: 50%;
    translate: 0 calc(var(--_h) / 2 + var(--nx-space-4));
    rotate: x 90deg;
    pointer-events: none;
  }
  .nx-orbit-center {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    inline-size: var(--nx-orbit-center-size, min(8.5rem, 24cqi));
    block-size: var(--nx-orbit-center-size, min(8.5rem, 24cqi));
    margin: auto;
    rotate: x calc(var(--_tilt) * -1);
  }
  .nx-orbit-orb {
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    border-radius: 50%;
    background:
      radial-gradient(
        circle at 34% 28%,
        var(--nx-lapis-50),
        transparent 22%),
      radial-gradient(
        circle at 40% 36%,
        var(--nx-cyan-300),
        var(--nx-lapis-500) 46%,
        var(--nx-violet-700) 78%,
        var(--nx-lapis-950));
    box-shadow:
      0 0 0 1px color-mix(in oklab, var(--nx-lapis-300) 40%, transparent),
      0 0 48px 6px color-mix(in oklab, var(--nx-accent) 45%, transparent),
      0 0 120px 30px color-mix(in oklab, var(--nx-glow) 18%, transparent);
    animation: nx-orbit-breathe 5.5s var(--nx-ease-in-out) infinite;
    &::after {
      content: "";
      position: absolute;
      inset: -18%;
      border-radius: 50%;
      background:
        radial-gradient(
          circle,
          color-mix(in oklab, var(--nx-glow) 22%, transparent),
          transparent 62%);
      z-index: -1;
    }
  }
  @keyframes nx-orbit-breathe {
    50% {
      scale: calc(1 + 0.04 * var(--nx-motion));
      box-shadow:
        0 0 0 1px color-mix(in oklab, var(--nx-lapis-300) 55%, transparent),
        0 0 64px 10px color-mix(in oklab, var(--nx-accent) 55%, transparent),
        0 0 150px 40px color-mix(in oklab, var(--nx-glow) 24%, transparent);
    }
  }
  .nx-orbit-item {
    --_theta: calc((var(--i, 0) - var(--nx-orbit, 0)) * var(--_step) * var(--nx-dir));
    --_near: calc((1 + cos(var(--_theta))) / 2);
    position: absolute;
    inset: 0;
    inline-size: var(--_w);
    block-size: var(--_h);
    margin: auto;
    transform: rotateY(var(--_theta)) translateZ(var(--_r)) rotateY(calc(var(--_theta) * -1)) rotateX(calc(var(--_tilt) * -1));
  }
  .nx-orbit-screen {
    --_tone: var(--nx-tone, var(--nx-accent));
    --_radius: var(--nx-radius-lg);
    --_inset: 0.3rem;
    --_press: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--_inset);
    inline-size: 100%;
    block-size: 100%;
    padding: var(--_inset);
    border: 1px solid var(--nx-border);
    border-radius: var(--_radius);
    background: var(--nx-surface);
    color: var(--nx-text);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--nx-shadow-lg);
    scale: calc((0.78 + 0.22 * var(--_near)) * var(--_press));
    opacity: calc(0.45 + 0.55 * var(--_near));
    filter: brightness(calc(0.55 + 0.45 * var(--_near))) blur(calc((1 - var(--_near)) * 2px));
    transition:
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      border-color var(--nx-dur-base) var(--nx-ease-out),
      box-shadow var(--nx-dur-base) var(--nx-ease-out);
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 3px;
    }
    &:active {
      --_press: calc(1 - 0.04 * var(--nx-motion));
    }
  }
  .nx-orbit-item[data-front] .nx-orbit-screen {
    border-color: color-mix(in oklab, var(--_tone) 50%, var(--nx-border));
    box-shadow: var(--nx-shadow-xl), 0 16px 40px -14px color-mix(in oklab, var(--_tone) 75%, transparent);
  }
  .nx-orbit-bar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.3rem 0;
    > i {
      inline-size: 0.35rem;
      block-size: 0.35rem;
      border-radius: 50%;
      background: var(--nx-border-strong);
    }
    > span {
      margin-inline-start: auto;
      overflow: hidden;
      font-size: 0.625rem;
      font-weight: 600;
      color: var(--nx-text-muted);
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .nx-orbit-cover {
    position: relative;
    min-block-size: 0;
    overflow: clip;
    border-radius: calc(var(--_radius) - var(--_inset));
    background: color-mix(in oklab, var(--_tone) 22%, var(--nx-surface-2));
  }
  .nx-orbit-caption {
    display: grid;
    justify-items: center;
    gap: 0.15rem;
    min-block-size: 3rem;
    margin-block-start: calc(var(--nx-space-2) * -1);
    text-align: center;
  }
  .nx-orbit-caption strong {
    font: 650 var(--nx-text-lg) / 1.25 var(--nx-font-display);
  }
  .nx-orbit-caption span {
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
  }
  .nx-orbit-toggle {
    position: absolute;
    inset-block-end: var(--nx-space-3);
    inset-inline-end: var(--nx-space-3);
    z-index: 2;
  }
  .nx-team {
    --_ring: var(--nx-ring);
    container-type: inline-size;
  }
  .nx-team-list {
    --_n: var(--nx-count, 4);
    --_overlap: 0.26;
    --_w: clamp(5.5rem, 100cqi / (var(--_n) - var(--_overlap) * (var(--_n) - 1)), var(--nx-team-card-width, 13rem));
    --_h: calc(var(--_w) * 1.5);
    --_push: calc(var(--_w) * 0.2);
    display: flex;
    justify-content: safe center;
    margin: 0;
    padding: var(--nx-space-8) var(--nx-space-2) var(--nx-space-8);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    list-style: none;
  }
  @container (width < 36rem) {
    .nx-team-list {
      --_w: var(--nx-team-card-width-narrow, 9.5rem);
      --_overlap: 0.14;
      justify-content: flex-start;
      padding-inline: var(--nx-space-4);
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--nx-space-4);
    }
    .nx-team-item {
      scroll-snap-align: start;
    }
    .nx-team-card {
      padding: var(--nx-space-4) var(--nx-space-3);
    }
    .nx-team-name {
      font-size: var(--nx-text-base);
    }
    .nx-team-role {
      font-size: var(--nx-text-xs);
    }
  }
  .nx-team-item {
    position: relative;
    flex: none;
    inline-size: var(--_w);
    transition: translate var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
    & + & {
      margin-inline-start: calc(var(--_w) * var(--_overlap) * -1);
    }
  }
  .nx-team-card {
    --_color: var(--nx-tone, var(--nx-accent));
    --_lift: 0;
    --_press: 1;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--nx-space-4);
    block-size: var(--_h);
    padding: var(--nx-space-5) var(--nx-space-4);
    overflow: clip;
    border: 1px solid color-mix(in oklab, var(--nx-text) 10%, transparent);
    border-radius: var(--nx-radius-2xl);
    background:
      linear-gradient(
        180deg,
        var(--nx-surface-2),
        var(--nx-bg));
    color: var(--nx-text);
    text-decoration: none;
    box-shadow: var(--nx-shadow-lg), inset 0 1px 0 var(--nx-highlight);
    cursor: default;
    translate: 0 calc(var(--_lift) * -14px * var(--nx-motion));
    scale: calc((1 + var(--_lift) * 0.05 * var(--nx-motion)) * var(--_press));
    transition:
      translate var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy),
      scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy),
      border-color var(--nx-dur-base) var(--nx-ease-out),
      box-shadow var(--nx-dur-slow) var(--nx-ease-out);
    -webkit-tap-highlight-color: transparent;
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        radial-gradient(
          120% 70% at 50% 112%,
          color-mix(in oklab, var(--_color) 85%, transparent),
          transparent 70%),
        radial-gradient(
          70% 45% at 88% 104%,
          color-mix(in oklab, var(--_color) 45%, var(--nx-glow) 25%),
          transparent 70%);
      opacity: calc(0.5 + var(--_lift) * 0.5);
      translate: 0 calc((1 - var(--_lift)) * 16% * var(--nx-motion));
      transition: opacity var(--nx-dur-slow) var(--nx-ease-out), translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    }
    &:focus-visible {
      outline: 2px solid var(--_ring, var(--nx-ring));
      outline-offset: 3px;
    }
    &:active {
      --_press: calc(1 - 0.04 * var(--nx-motion));
    }
    &:is(a, [href]) {
      cursor: pointer;
    }
  }
  .nx-team-text {
    display: grid;
    gap: 0.2rem;
  }
  .nx-team-name {
    margin: 0;
    font: 650 var(--nx-text-lg) / 1.25 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
    overflow-wrap: anywhere;
  }
  .nx-team-role {
    margin: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
  }
  .nx-team-card .nx-avatar {
    align-self: flex-start;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--_color) 55%, transparent), var(--nx-shadow-md);
    transition: scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
  }
  .nx-team-item:focus-within {
    z-index: 3;
    .nx-team-card {
      --_lift: 1;
      border-color: color-mix(in oklab, var(--_color) 45%, transparent);
      box-shadow: var(--nx-shadow-xl), 0 24px 60px -24px color-mix(in oklab, var(--_color) 80%, transparent);
    }
    .nx-avatar {
      scale: calc(1 + 0.08 * var(--nx-motion));
    }
  }
  .nx-team-item:focus-within ~ .nx-team-item {
    translate: calc(var(--_push) * var(--nx-dir) * var(--nx-motion)) 0;
  }
  .nx-team-item:has(~ .nx-team-item:focus-within) {
    translate: calc(var(--_push) * -1 * var(--nx-dir) * var(--nx-motion)) 0;
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-team-item:hover {
      z-index: 3;
      .nx-team-card {
        --_lift: 1;
        border-color: color-mix(in oklab, var(--_color) 45%, transparent);
        box-shadow: var(--nx-shadow-xl), 0 24px 60px -24px color-mix(in oklab, var(--_color) 80%, transparent);
      }
      .nx-avatar {
        scale: calc(1 + 0.08 * var(--nx-motion));
      }
    }
    .nx-team-item:hover ~ .nx-team-item {
      translate: calc(var(--_push) * var(--nx-dir) * var(--nx-motion)) 0;
    }
    .nx-team-item:has(~ .nx-team-item:hover) {
      translate: calc(var(--_push) * -1 * var(--nx-dir) * var(--nx-motion)) 0;
    }
  }
  .nx-depth {
    --_w: var(--nx-depth-card-width, min(22rem, 74%));
    --_h: var(--nx-depth-card-height, 17rem);
    --_spread: var(--nx-depth-spread, 58%);
    display: grid;
    gap: var(--nx-space-5);
  }
  .nx-depth-stage {
    --_drag: var(--nx-dx, 0px);
    position: relative;
    display: grid;
    padding-block: var(--nx-space-4);
    overflow-x: clip;
    perspective: 1200px;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    border-radius: var(--nx-radius-2xl);
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &[data-at-start] {
      --_drag: calc(var(--nx-dir) * min(var(--nx-dx, 0px) * var(--nx-dir), var(--nx-dx, 0px) * var(--nx-dir) * 0.3));
    }
    &[data-at-end] {
      --_drag: calc(var(--nx-dir) * max(var(--nx-dx, 0px) * var(--nx-dir), var(--nx-dx, 0px) * var(--nx-dir) * 0.3));
    }
    &[data-at-start][data-at-end] {
      --_drag: calc(var(--nx-dx, 0px) * 0.3);
    }
  }
  .nx-depth-card {
    --_tone: var(--nx-tone, var(--nx-accent));
    --_press: 1;
    grid-area: 1 / 1;
    justify-self: center;
    inline-size: var(--_w);
    block-size: var(--_h);
    z-index: calc(10 - var(--_d, 0));
    translate: calc(var(--_o, 0) * var(--_spread) * var(--nx-dir) + var(--_drag)) 0 calc(var(--_d, 0) * -90px * var(--nx-motion));
    scale: calc((1 - min(var(--_d, 0), 2) * 0.1 * var(--nx-motion)) * var(--_press));
    opacity: clamp(0, 2.7 - var(--_d, 0), 1);
    filter: blur(calc(min(var(--_d, 0), 2) * 1.5px)) brightness(calc(1 - min(var(--_d, 0), 2) * 0.2));
    transition:
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      scale var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      filter var(--nx-dur-slow) var(--nx-ease-out),
      opacity var(--nx-dur-slow) var(--nx-ease-out);
    &:not([data-active]) {
      cursor: pointer;
    }
    &:not([data-active]):active {
      --_press: calc(1 - 0.04 * var(--nx-motion));
    }
  }
  .nx-depth-stage[data-dragging] .nx-depth-card {
    transition-property: filter, opacity;
  }
  .nx-depth-content {
    block-size: 100%;
    border-radius: var(--nx-radius-2xl);
    box-shadow: var(--nx-shadow-lg);
    transition: box-shadow var(--nx-dur-slow) var(--nx-ease-out);
  }
  .nx-depth-card[data-active] .nx-depth-content {
    box-shadow: var(--nx-shadow-xl);
  }
  .nx-depth-slide {
    --_radius: var(--nx-radius-2xl);
    position: relative;
    display: grid;
    align-content: end;
    gap: var(--nx-space-1);
    block-size: 100%;
    padding: var(--nx-space-6);
    overflow: clip;
    border-radius: var(--_radius);
    background: color-mix(in oklab, var(--_tone) 30%, var(--nx-surface-3));
    color: var(--nx-ink-50);
    text-decoration: none;
    > :not(.nx-depth-media) {
      position: relative;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 3px;
    }
  }
  .nx-depth-media {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        linear-gradient(
          to top,
          color-mix(in oklab, var(--nx-ink-950) 72%, transparent),
          transparent 62%);
    }
  }
  .nx-depth-title {
    margin: 0;
    font: 700 var(--nx-text-2xl) / 1.15 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
  }
  .nx-depth-description {
    margin: 0;
    color: color-mix(in oklab, var(--nx-ink-50) 80%, transparent);
    font-size: var(--nx-text-sm);
    line-height: 1.5;
  }
  .nx-depth-dots {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
  }
  .nx-depth-dot {
    position: relative;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-full);
    background: var(--nx-border-strong);
    cursor: pointer;
    transition:
      inline-size var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      background-color var(--nx-dur-base) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &::before {
      content: "";
      position: absolute;
      inset: -0.5rem -0.25rem;
    }
    &[aria-current=true] {
      inline-size: 1.5rem;
      background: var(--nx-accent);
    }
    &:hover:not([aria-current=true]) {
      background: var(--nx-text-muted);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 3px;
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
  }
  .nx-cycle {
    --_peek: var(--nx-cycle-peek, 0.8rem);
    display: grid;
    justify-items: center;
    gap: var(--nx-space-5);
  }
  .nx-cycle-deck {
    display: grid;
    inline-size: min(100%, var(--nx-cycle-width, 24rem));
    padding-block-start: calc(var(--_peek) * 3);
  }
  .nx-cycle-card {
    --_tone: var(--nx-tone, var(--nx-accent));
    --_press: 1;
    grid-area: 1 / 1;
    z-index: calc(20 - var(--_d, 0));
    transform-origin: 50% 0%;
    translate: 0 calc(var(--_d, 0) * var(--_peek) * -1 * var(--nx-motion));
    scale: calc((1 - min(var(--_d, 0), 4) * 0.055) * var(--_press));
    opacity: clamp(0, 3.4 - var(--_d, 0), 1);
    filter: brightness(calc(1 - min(var(--_d, 0), 3) * 0.07));
    -webkit-user-select: none;
    user-select: none;
    transition:
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      scale var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      opacity var(--nx-dur-slow) var(--nx-ease-out),
      filter var(--nx-dur-slow) var(--nx-ease-out);
    transition-delay: calc(min(var(--_d, 0), 4) * 35ms);
    &[data-state=top] {
      translate: 0 max(var(--nx-dy, 0px), var(--nx-dy, 0px) * 0.25);
      touch-action: pan-x;
      cursor: grab;
      transition-delay: 0ms;
      &:active {
        --_press: calc(1 - 0.04 * var(--nx-motion));
      }
    }
    &[data-dragging] {
      transition-property: opacity, filter;
      cursor: grabbing;
    }
    &[data-state=tucking] {
      z-index: 30;
      translate: 0 calc(62% * var(--nx-motion));
      scale: 0.92;
      opacity: calc(0.35 + 0.65 * var(--nx-motion));
      transition-delay: 0ms;
      transition-duration:
        var(--nx-spring-snappy-duration),
        var(--nx-spring-snappy-duration),
        var(--nx-dur-base),
        var(--nx-dur-base);
      transition-timing-function:
        var(--nx-spring-snappy),
        var(--nx-spring-snappy),
        var(--nx-ease-out),
        var(--nx-ease-out);
    }
  }
  .nx-cycle-face {
    --_radius: var(--nx-radius-2xl);
    display: grid;
    gap: var(--nx-space-2);
    min-block-size: var(--nx-cycle-height, 11rem);
    padding: var(--nx-space-6);
    border: 1px solid color-mix(in oklab, var(--_tone) 24%, var(--nx-border));
    border-radius: var(--_radius);
    background:
      radial-gradient(
        90% 80% at 100% 0%,
        color-mix(in oklab, var(--_tone) 18%, transparent),
        transparent 70%),
      var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-lg), inset 0 1px 0 var(--nx-highlight);
  }
  .nx-cycle-icon {
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--nx-radius-md);
    background: color-mix(in oklab, var(--_tone) 16%, transparent);
    color: color-mix(in oklab, var(--_tone) 75%, var(--nx-text));
  }
  .nx-cycle-title {
    margin: 0;
    font: 650 var(--nx-text-lg) / 1.3 var(--nx-font-display);
  }
  .nx-cycle-description {
    margin: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    line-height: 1.55;
  }
  .nx-cycle-meta {
    margin-block-start: auto;
    color: var(--nx-text-subtle);
    font: 500 var(--nx-text-xs) / 1.4 var(--nx-font-mono);
  }
  .nx-elastic {
    display: grid;
    grid-template-columns: repeat(var(--nx-columns, 3), minmax(0, 1fr));
    align-items: start;
    gap: var(--nx-elastic-gap, var(--nx-space-4));
  }
  .nx-elastic-col {
    display: grid;
    gap: var(--nx-elastic-gap, var(--nx-space-4));
    translate: 0 var(--nx-shift, 0px);
    will-change: translate;
    &:nth-child(even) {
      margin-block-start: var(--nx-space-12);
    }
  }
  .nx-elastic-cell {
    --_radius: var(--nx-radius-xl);
    position: relative;
    margin: 0;
    overflow: clip;
    border-radius: var(--_radius);
    background: var(--nx-surface-2);
    box-shadow: var(--nx-shadow-sm);
  }
  .nx-elastic-cover {
    display: block;
    aspect-ratio: var(--nx-ratio, 4 / 5);
    border-radius: inherit;
    background: color-mix(in oklab, var(--nx-accent) 16%, var(--nx-surface-3));
  }
  .nx-elastic-col > :nth-child(3n+2) .nx-elastic-cover {
    aspect-ratio: var(--nx-ratio, 1);
  }
  .nx-elastic-col > :nth-child(3n) .nx-elastic-cover {
    aspect-ratio: var(--nx-ratio, 3 / 4);
  }
  .nx-elastic-caption {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    display: grid;
    gap: 0.1rem;
    padding: var(--nx-space-8) var(--nx-space-4) var(--nx-space-3);
    border-radius: 0 0 var(--_radius) var(--_radius);
    background:
      linear-gradient(
        to top,
        color-mix(in oklab, var(--nx-ink-950) 70%, transparent),
        transparent);
    color: var(--nx-ink-50);
    font-size: var(--nx-text-sm);
    font-weight: 600;
    small {
      color: color-mix(in oklab, var(--nx-ink-50) 75%, transparent);
      font-size: var(--nx-text-xs);
      font-weight: 500;
    }
  }
  .nx-workflow {
    --_radius: var(--nx-radius-xl);
    --_pad: var(--nx-space-5);
    display: grid;
    gap: var(--nx-space-4);
    padding: var(--_pad);
    border: 1px solid var(--nx-border);
    border-radius: var(--_radius);
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-sm), inset 0 1px 0 var(--nx-highlight);
    transition:
      box-shadow var(--nx-dur-slow) var(--nx-ease-out),
      border-color var(--nx-dur-base) var(--nx-ease-out),
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 3px;
    }
  }
  .nx-workflow-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--nx-space-3);
  }
  .nx-workflow-icon {
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--nx-radius-md);
    background: var(--nx-accent-soft);
    color: var(--nx-accent-text);
    transition: rotate var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy), scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
    .nx-icon {
      inline-size: 1.25rem;
      block-size: 1.25rem;
    }
  }
  .nx-workflow-title {
    margin: 0;
    font: 650 var(--nx-text-md) / 1.35 var(--nx-font-display);
  }
  .nx-workflow-description {
    margin: 0.15rem 0 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    line-height: 1.5;
  }
  .nx-workflow-details {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--nx-spring-soft-duration) var(--nx-spring-soft);
    > div {
      min-block-size: 0;
      overflow: hidden;
      opacity: 0;
      translate: 0 calc(-6px * var(--nx-motion));
      transition: opacity var(--nx-dur-fast) var(--nx-ease-out), translate var(--nx-dur-base) var(--nx-ease-out);
    }
  }
  .nx-workflow-meta {
    display: grid;
    gap: var(--nx-space-2);
    margin: 0;
    padding-block-start: var(--nx-space-3);
    border-block-start: 1px dashed var(--nx-border);
  }
  .nx-workflow-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nx-space-3);
    font-size: var(--nx-text-sm);
    dt {
      color: var(--nx-text-muted);
    }
    dd {
      margin: 0;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      text-align: end;
    }
  }
  .nx-workflow-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-3);
    min-block-size: 2.25rem;
  }
  .nx-workflow-actions {
    display: flex;
    align-items: center;
    gap: var(--nx-space-1);
    margin-inline-start: auto;
    > * {
      opacity: 0;
      translate: calc(10px * var(--nx-dir) * var(--nx-motion)) 0;
      transition:
        opacity var(--nx-dur-fast) var(--nx-ease-out),
        translate var(--nx-dur-base) var(--nx-ease-out),
        scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    }
    > :nth-child(2) {
      --_ai: 1;
    }
    > :nth-child(3) {
      --_ai: 2;
    }
    > :nth-child(4) {
      --_ai: 3;
    }
    > :nth-child(5) {
      --_ai: 4;
    }
    > :nth-child(n+6) {
      --_ai: 5;
    }
  }
  .nx-workflow:is(:focus-within, [data-expanded]) {
    border-color: var(--nx-accent-border);
    box-shadow: var(--nx-shadow-lg), inset 0 1px 0 var(--nx-highlight);
    .nx-workflow-details {
      grid-template-rows: 1fr;
    }
    .nx-workflow-details > div {
      opacity: 1;
      translate: none;
      transition-duration: var(--nx-dur-slow), var(--nx-spring-gentle-duration);
      transition-timing-function: var(--nx-ease-out), var(--nx-spring-gentle);
    }
    .nx-workflow-icon {
      rotate: calc(-8deg * var(--nx-dir) * var(--nx-motion));
    }
    .nx-workflow-actions > * {
      opacity: 1;
      translate: none;
      transition:
        opacity var(--nx-dur-base) var(--nx-ease-out) calc(var(--_ai, 0) * 45ms + 60ms),
        translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle) calc(var(--_ai, 0) * 45ms + 60ms),
        scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    }
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-workflow:hover {
      border-color: var(--nx-accent-border);
      box-shadow: var(--nx-shadow-lg), inset 0 1px 0 var(--nx-highlight);
      translate: 0 calc(-3px * var(--nx-motion));
      .nx-workflow-details {
        grid-template-rows: 1fr;
      }
      .nx-workflow-details > div {
        opacity: 1;
        translate: none;
        transition-duration: var(--nx-dur-slow), var(--nx-spring-gentle-duration);
        transition-timing-function: var(--nx-ease-out), var(--nx-spring-gentle);
      }
      .nx-workflow-icon {
        rotate: calc(-8deg * var(--nx-dir) * var(--nx-motion));
      }
      .nx-workflow-actions > * {
        opacity: 1;
        translate: none;
        transition:
          opacity var(--nx-dur-base) var(--nx-ease-out) calc(var(--_ai, 0) * 45ms + 60ms),
          translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle) calc(var(--_ai, 0) * 45ms + 60ms),
          scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
      }
    }
  }
  .nx-feature {
    --_tone: var(--nx-tone, var(--nx-accent));
    --_radius: var(--nx-radius-2xl);
    --_inset: var(--nx-space-2);
    --_press: 1;
    display: grid;
    align-content: start;
    gap: var(--nx-space-4);
    padding: var(--_inset) var(--_inset) var(--nx-space-6);
    border: 1px solid var(--nx-border);
    border-radius: var(--_radius);
    background: var(--nx-surface);
    color: var(--nx-text);
    text-decoration: none;
    box-shadow: var(--nx-shadow-sm), inset 0 1px 0 var(--nx-highlight);
    scale: var(--_press);
    transition:
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      box-shadow var(--nx-dur-slow) var(--nx-ease-out),
      border-color var(--nx-dur-base) var(--nx-ease-out);
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 3px;
    }
    &:is(a, button):active {
      --_press: calc(1 - 0.04 * var(--nx-motion));
    }
    &:is(a, button) {
      cursor: pointer;
    }
    &:is(a, button):focus-visible {
      border-color: color-mix(in oklab, var(--_tone) 40%, var(--nx-border));
    }
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-feature:is(a, button):hover {
      translate: 0 calc(-4px * var(--nx-motion));
      border-color: color-mix(in oklab, var(--_tone) 40%, var(--nx-border));
      box-shadow: var(--nx-shadow-lg), inset 0 1px 0 var(--nx-highlight);
    }
  }
  .nx-feature-visual {
    --_row: 2.35rem;
    position: relative;
    display: grid;
    place-items: center;
    block-size: var(--nx-feature-visual-height, 11.5rem);
    overflow: clip;
    border-radius: calc(var(--_radius) - var(--_inset));
    background:
      radial-gradient(
        90% 80% at 50% 0%,
        color-mix(in oklab, var(--_tone) 16%, transparent),
        transparent 70%),
      var(--nx-surface-2);
    isolation: isolate;
  }
  .nx-feature-body {
    display: grid;
    gap: var(--nx-space-2);
    padding-inline: var(--nx-space-4);
  }
  .nx-feature-title {
    margin: 0;
    font: 650 var(--nx-text-lg) / 1.3 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
  }
  .nx-feature-description {
    margin: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    line-height: 1.6;
    text-wrap: pretty;
  }
  .nx-fv-line {
    display: block;
    block-size: 0.45rem;
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--nx-text) 12%, transparent);
  }
  .nx-fv-inbox {
    position: relative;
    inline-size: min(82%, 17rem);
    block-size: calc(var(--_row) * 4);
  }
  .nx-fv-row {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    block-size: calc(var(--_row) - 0.4rem);
    padding-inline: var(--nx-space-2);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-xs);
    translate: 0 calc(var(--nx-i, 0) * var(--_row));
    animation: nx-fv-inbox 8s var(--nx-ease-in-out) infinite;
    animation-delay: calc(var(--nx-i, 0) * -2s);
    &::before {
      content: "";
      position: absolute;
      inset: -1px;
      border: 1px solid color-mix(in oklab, var(--_tone) 55%, transparent);
      border-radius: inherit;
      background: color-mix(in oklab, var(--_tone) 12%, transparent);
      opacity: 0;
      animation: nx-fv-inbox-new 8s linear infinite;
      animation-delay: inherit;
    }
    > b {
      flex: none;
      inline-size: 1.1rem;
      block-size: 1.1rem;
      border-radius: 50%;
      background: var(--nx-chart-1);
    }
    &:nth-child(2) > b {
      background: var(--nx-chart-2);
    }
    &:nth-child(3) > b {
      background: var(--nx-chart-4);
    }
    &:nth-child(4) > b {
      background: var(--nx-chart-3);
    }
    > span {
      display: grid;
      flex: 1;
      gap: 0.3rem;
    }
    > span > .nx-fv-line:last-child {
      inline-size: 60%;
    }
  }
  @keyframes nx-fv-inbox {
    0% {
      translate: calc(-30% * var(--nx-dir)) 0;
      opacity: 0;
    }
    5%, 22% {
      translate: 0 0;
      opacity: 1;
    }
    27%, 47% {
      translate: 0 calc(var(--_row) * 1);
    }
    52%, 72% {
      translate: 0 calc(var(--_row) * 2);
    }
    77%, 93% {
      translate: 0 calc(var(--_row) * 3);
      opacity: 1;
    }
    100% {
      translate: calc(30% * var(--nx-dir)) calc(var(--_row) * 3);
      opacity: 0;
    }
  }
  @keyframes nx-fv-inbox-new {
    0%, 6% {
      opacity: 1;
    }
    24%, 100% {
      opacity: 0;
    }
  }
  .nx-fv-summary {
    position: relative;
    display: grid;
    gap: 0.55rem;
    inline-size: min(76%, 15rem);
    > .nx-fv-line {
      block-size: 0.55rem;
      background:
        linear-gradient(
          90deg,
          transparent 30%,
          color-mix(in oklab, var(--_tone) 45%, transparent) 50%,
          transparent 70%) 0 0 / 250% 100%,
        color-mix(in oklab, var(--nx-text) 12%, transparent);
      transform-origin: 50% 50%;
      animation: nx-sheen 1.6s linear infinite, nx-fv-fold 6s var(--nx-ease-in-out) infinite;
      animation-delay: calc(var(--nx-i, 0) * -0.2s), calc(var(--nx-i, 0) * 60ms);
    }
    > :nth-child(2) {
      inline-size: 88%;
    }
    > :nth-child(3) {
      inline-size: 94%;
    }
    > :nth-child(4) {
      inline-size: 64%;
    }
  }
  .nx-fv-pill {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    inline-size: fit-content;
    block-size: fit-content;
    margin: auto;
    padding: var(--nx-space-2) var(--nx-space-4);
    border: 1px solid color-mix(in oklab, var(--_tone) 45%, transparent);
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--_tone) 14%, var(--nx-surface));
    color: color-mix(in oklab, var(--_tone) 75%, var(--nx-text));
    box-shadow: var(--nx-shadow-md), 0 0 24px -6px color-mix(in oklab, var(--_tone) 60%, transparent);
    opacity: 0;
    animation: nx-fv-pill 6s var(--nx-ease-out) infinite;
    .nx-icon {
      inline-size: 1.1rem;
      block-size: 1.1rem;
    }
    > span {
      display: grid;
      gap: 0.3rem;
      inline-size: 5.5rem;
    }
    > span > .nx-fv-line {
      background: color-mix(in oklab, var(--_tone) 35%, transparent);
    }
    > span > .nx-fv-line:last-child {
      inline-size: 65%;
    }
  }
  @keyframes nx-fv-fold {
    0%, 42% {
      opacity: 1;
      scale: 1;
      translate: 0 0;
    }
    56%, 88% {
      opacity: 0;
      scale: 0.4 0.6;
      translate: 0 calc((1.5 - var(--nx-i, 0)) * 0.9rem);
    }
    100% {
      opacity: 1;
      scale: 1;
      translate: 0 0;
    }
  }
  @keyframes nx-fv-pill {
    0%, 52% {
      opacity: 0;
      scale: 0.95;
      filter: blur(4px);
    }
    62%, 84% {
      opacity: 1;
      scale: 1;
      filter: blur(0);
    }
    92%, 100% {
      opacity: 0;
      scale: 0.97;
      filter: blur(2px);
    }
  }
  .nx-fv-processing {
    position: relative;
    display: grid;
    place-items: center;
    gap: var(--nx-space-5);
    inline-size: 100%;
  }
  .nx-fv-core {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 3.5rem;
    block-size: 3.5rem;
  }
  .nx-fv-ring {
    position: absolute;
    inset: 0;
    border: 1.5px solid color-mix(in oklab, var(--_tone) 60%, transparent);
    border-radius: 50%;
    opacity: 0;
    animation: nx-fv-ring 2.7s var(--nx-ease-out) infinite;
    animation-delay: calc(var(--nx-i, 0) * 0.9s);
  }
  @keyframes nx-fv-ring {
    0% {
      opacity: 0.8;
      scale: 0.95;
    }
    100% {
      opacity: 0;
      scale: 2.3;
    }
  }
  .nx-fv-bolt {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 100%;
    block-size: 100%;
    border-radius: 50%;
    background:
      radial-gradient(
        circle at 35% 30%,
        color-mix(in oklab, var(--_tone) 55%, var(--nx-surface)),
        color-mix(in oklab, var(--_tone) 85%, var(--nx-ink-950)));
    color: var(--nx-ink-50);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--_tone) 18%, transparent), 0 8px 26px -8px color-mix(in oklab, var(--_tone) 80%, transparent);
    animation: nx-fv-bolt 2.7s var(--nx-ease-in-out) infinite;
    .nx-icon {
      inline-size: 1.5rem;
      block-size: 1.5rem;
      fill: currentColor;
    }
  }
  @keyframes nx-fv-bolt {
    0%, 100% {
      scale: 1;
    }
    12% {
      scale: calc(1 + 0.08 * var(--nx-motion));
    }
    30% {
      scale: 1;
    }
  }
  .nx-fv-bar {
    position: relative;
    inline-size: min(70%, 12rem);
    block-size: 0.4rem;
    overflow: clip;
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--nx-text) 10%, transparent);
    > i {
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        linear-gradient(
          calc(90deg * var(--nx-dir)),
          color-mix(in oklab, var(--_tone) 70%, transparent),
          var(--_tone));
      transform-origin: calc(50% - 50% * var(--nx-dir)) 50%;
      animation: nx-fv-fill 2.7s var(--nx-ease-in-out) infinite;
    }
  }
  @keyframes nx-fv-fill {
    0% {
      scale: 0 1;
      opacity: 1;
    }
    78% {
      scale: 1 1;
      opacity: 1;
    }
    100% {
      scale: 1 1;
      opacity: 0;
    }
  }
  .nx-fv-team {
    position: relative;
    inline-size: 12rem;
    block-size: 8rem;
  }
  .nx-fv-slot,
  .nx-fv-person {
    position: absolute;
    inset: 0;
    inline-size: 2.6rem;
    block-size: 2.6rem;
    margin: auto;
    border-radius: 50%;
  }
  .nx-fv-slot {
    translate: calc((var(--nx-i, 0) - 1) * 3.6rem) -1.4rem;
    border: 1.5px dashed color-mix(in oklab, var(--nx-text) 25%, transparent);
    animation: nx-fv-slot 6s var(--nx-ease-out) infinite;
    animation-delay: calc(var(--nx-i, 0) * 0.3s);
  }
  @keyframes nx-fv-slot {
    0%, 20% {
      border-style: dashed;
      border-color: color-mix(in oklab, var(--nx-text) 25%, transparent);
      scale: 1;
    }
    30%, 80% {
      border-style: solid;
      border-color: var(--_tone);
      scale: 1.12;
    }
    90%, 100% {
      border-style: dashed;
      border-color: color-mix(in oklab, var(--nx-text) 25%, transparent);
      scale: 1;
    }
  }
  .nx-fv-person {
    display: grid;
    place-items: center;
    inline-size: 2.2rem;
    block-size: 2.2rem;
    border: 2px solid var(--nx-surface);
    background: var(--nx-chart-1);
    color: var(--nx-ink-50);
    box-shadow: var(--nx-shadow-md);
    translate: calc((var(--nx-i, 0) - 1) * 3.6rem) -1.4rem;
    animation: nx-fv-person 6s var(--nx-spring-bouncy) infinite;
    animation-delay: calc(var(--nx-i, 0) * 0.3s);
    &:nth-child(5) {
      background: var(--nx-chart-2);
    }
    &:nth-child(6) {
      background: var(--nx-chart-4);
    }
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  @keyframes nx-fv-person {
    0%, 12% {
      translate: calc((var(--nx-i, 0) - 1) * 2.5rem) 2.2rem;
      scale: 0.95;
    }
    26%, 82% {
      translate: calc((var(--nx-i, 0) - 1) * 3.6rem) -1.4rem;
      scale: 1;
    }
    94%, 100% {
      translate: calc((var(--nx-i, 0) - 1) * 2.5rem) 2.2rem;
      scale: 0.95;
    }
  }
  .nx-pit {
    --_thumb: 1.5rem;
    --_track: var(--nx-pit-height, 3.25rem);
    --_rise: 0;
    --_grow: calc(0.58 + var(--_rise) * 0.16 * var(--nx-motion));
    position: relative;
    display: grid;
    gap: var(--nx-space-3);
    padding: var(--nx-space-4) var(--nx-space-4) var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background:
      linear-gradient(
        180deg,
        var(--nx-surface-2),
        var(--nx-surface));
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-md), inset 0 1px 0 var(--nx-highlight);
    &:has(.nx-pit-input:focus-visible) {
      outline: 2px solid var(--nx-accent);
      outline-offset: 2px;
    }
    &:has(.nx-pit-input:disabled) {
      opacity: 0.55;
    }
    &:is([data-dragging], [data-pit]) {
      --_rise: 1;
    }
  }
  .nx-pit-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nx-space-3);
    font-size: var(--nx-text-sm);
  }
  .nx-pit-label {
    color: var(--nx-text-muted);
    font-weight: 500;
  }
  .nx-pit-readout {
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-mono);
    font-variant-numeric: tabular-nums;
  }
  .nx-pit-track {
    position: relative;
    block-size: var(--_track);
  }
  .nx-pit-bars {
    position: absolute;
    inset-block: 0;
    inset-inline: calc(var(--_thumb) / 2);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    pointer-events: none;
  }
  .nx-pit-bar {
    --_on: clamp(0, (var(--nx-frac, 0) - var(--p, 0)) * 1000 + 1, 1);
    inline-size: 2px;
    block-size: 100%;
    border-radius: 2px;
    background: color-mix(in oklab, var(--nx-accent-text) calc(var(--_on) * 100%), color-mix(in oklab, var(--nx-text) 22%, transparent));
    transform-origin: 50% 100%;
    scale: 1 calc(var(--h, 1) * var(--_grow));
    transition: scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy), background-color var(--nx-dur-fast) var(--nx-ease-out);
  }
  .nx-pit-thumb,
  .nx-pit-value {
    position: absolute;
    inset-inline-start: calc(var(--_thumb) / 2 + var(--nx-frac, 0) * (100% - var(--_thumb)));
    translate: calc(-50% * var(--nx-dir)) 0;
    pointer-events: none;
  }
  .nx-pit-thumb {
    inset-block-end: 0;
    inline-size: 3px;
    block-size: calc(100% + 0.35rem);
    border-radius: 3px;
    background: var(--nx-text);
    box-shadow: 0 0 12px 1px color-mix(in oklab, var(--nx-accent) 60%, transparent);
    transition: block-size var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
  }
  .nx-pit[data-dragging] .nx-pit-thumb {
    block-size: calc(100% + 0.7rem);
  }
  .nx-pit-value {
    inset-block-end: calc(100% + 0.75rem);
    padding: 0.2rem 0.5rem;
    border-radius: var(--nx-radius-sm);
    background: var(--nx-surface-inverse);
    color: var(--nx-text-inverse);
    font: 600 var(--nx-text-xs) / 1.3 var(--nx-font-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    opacity: 0;
    scale: 0.95;
    transform-origin: 50% 100%;
    transition: opacity var(--nx-dur-fast) var(--nx-ease-out), scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
  }
  .nx-pit:is([data-dragging], [data-pit], :has(.nx-pit-input:focus-visible)) .nx-pit-value {
    opacity: 1;
    scale: 1;
  }
  .nx-pit-input {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    appearance: none;
    background: transparent;
    opacity: 0;
    cursor: grab;
    touch-action: pan-y;
    &:active {
      cursor: grabbing;
    }
    &:disabled {
      cursor: not-allowed;
    }
    &::-webkit-slider-thumb {
      appearance: none;
      inline-size: var(--_thumb);
      block-size: var(--_track);
    }
    &::-moz-range-thumb {
      inline-size: var(--_thumb);
      block-size: var(--_track);
      border: 0;
    }
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-pit:has(.nx-pit-input:hover):not([data-dragging], [data-pit]) {
      --_rise: 0.6;
    }
    .nx-pit:has(.nx-pit-input:hover) .nx-pit-value {
      opacity: 1;
      scale: 1;
    }
  }
  .nx-precision {
    display: grid;
    gap: var(--nx-space-2);
    .nx-slider {
      --_thumb: 1.25rem;
      padding-block: var(--nx-space-1);
    }
    .nx-slider-value {
      display: none;
    }
  }
  .nx-precision-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--nx-space-2) var(--nx-space-4);
  }
  .nx-precision-label {
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    font-weight: 600;
  }
  .nx-precision-readout {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    font: 700 var(--nx-text-5xl) / 1 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tighter);
    font-variant-numeric: tabular-nums;
    .nx-number {
      --nx-number-duration: 520ms;
    }
  }
  .nx-precision-affix {
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xl);
    font-weight: 600;
    letter-spacing: 0;
  }
  .nx-precision-ticks {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    block-size: 0.9rem;
    margin-inline: calc(1.25rem / 2);
    margin-block-end: calc(var(--nx-space-1) * -1);
    > i {
      --_on: clamp(0, (var(--nx-frac, 0) - var(--p, 0)) * 1000 + 1, 1);
      inline-size: 1px;
      block-size: 45%;
      background: color-mix(in oklab, var(--nx-accent) calc(var(--_on) * 100%), var(--nx-border-strong));
      transition: background-color var(--nx-dur-fast) var(--nx-ease-out);
      &[data-major] {
        block-size: 100%;
        inline-size: 1.5px;
      }
    }
  }
  .nx-precision-scale {
    display: flex;
    justify-content: space-between;
    color: var(--nx-text-subtle);
    font: 500 var(--nx-text-xs) / 1 var(--nx-font-mono);
    font-variant-numeric: tabular-nums;
  }
  .nx-infinite-grid {
    --_cell: 28px;
    --_dot: color-mix(in oklab, var(--nx-text) 15%, transparent);
    position: relative;
    display: grid;
    place-items: center;
    isolation: isolate;
    overflow: clip;
    min-block-size: 22rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    color: var(--nx-text);
  }
  .nx-infinite-grid-field,
  .nx-infinite-grid-glow {
    position: absolute;
    inset: calc(var(--_cell) * -1);
    pointer-events: none;
  }
  .nx-infinite-grid-field {
    background-image:
      radial-gradient(
        circle,
        var(--_dot) 1.25px,
        transparent 1.4px);
    background-size: var(--_cell) var(--_cell);
    animation: nx-infinite-grid-drift 7s linear infinite;
  }
  .nx-infinite-grid-glow {
    background-image:
      radial-gradient(
        circle,
        var(--nx-accent) 1.5px,
        transparent 1.65px);
    background-size: var(--_cell) var(--_cell);
    opacity: 0;
    transition: opacity var(--nx-dur-slow) var(--nx-ease-out);
    -webkit-mask-image:
      radial-gradient(
        10rem circle at var(--nx-px, 50%) var(--nx-py, 50%),
        #000,
        transparent 72%);
    mask-image:
      radial-gradient(
        10rem circle at var(--nx-px, 50%) var(--nx-py, 50%),
        #000,
        transparent 72%);
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-infinite-grid:hover .nx-infinite-grid-glow {
      opacity: 1;
    }
  }
  @keyframes nx-infinite-grid-drift {
    to {
      translate: calc(var(--_cell) * var(--nx-dir)) var(--_cell);
    }
  }
  .nx-infinite-grid-veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(
        ellipse 78% 66% at 50% 46%,
        transparent 52%,
        var(--nx-surface));
  }
  .nx-infinite-grid-body {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: var(--nx-space-3);
    padding: var(--nx-space-6);
    text-align: center;
  }
  .nx-infinite-grid-controls {
    position: absolute;
    inset-block-end: var(--nx-space-3);
    inset-inline-end: var(--nx-space-3);
    z-index: 1;
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-xs);
    > button {
      display: grid;
      place-items: center;
      inline-size: 1.9rem;
      block-size: 1.9rem;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: var(--nx-text-muted);
      cursor: pointer;
      transition-property:
        scale,
        background-color,
        color;
      transition-duration:
        var(--nx-spring-snappy-duration),
        var(--nx-dur-fast),
        var(--nx-dur-fast);
      transition-timing-function:
        var(--nx-spring-snappy),
        var(--nx-ease-out),
        var(--nx-ease-out);
      .nx-icon {
        inline-size: 0.95rem;
        block-size: 0.95rem;
      }
      &:hover:not(:disabled) {
        background: var(--nx-surface-2);
        color: var(--nx-text);
      }
      &:active:not([data-static]) {
        scale: calc(1 - 0.04 * var(--nx-motion));
      }
      &:focus-visible {
        outline: 2px solid var(--nx-ring);
        outline-offset: 1px;
      }
      &:disabled {
        opacity: 0.35;
        cursor: default;
      }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-orbit-orb,
    .nx-fv-row,
    .nx-fv-row::before,
    .nx-fv-summary > .nx-fv-line,
    .nx-fv-pill,
    .nx-fv-ring,
    .nx-fv-bolt,
    .nx-fv-bar > i,
    .nx-fv-slot,
    .nx-fv-person {
      animation: none;
    }
    .nx-fv-row:first-child::before {
      opacity: 1;
    }
    .nx-fv-summary > .nx-fv-line {
      opacity: 0.3;
    }
    .nx-fv-pill {
      opacity: 1;
    }
    .nx-fv-ring:first-child {
      opacity: 0.5;
      scale: 1.5;
    }
    .nx-fv-bar > i {
      scale: 0.7 1;
    }
    .nx-fv-slot {
      border-style: solid;
      border-color: var(--_tone);
    }
    .nx-ring-label[data-morphing] .nx-ring-titles {
      filter: none;
    }
    .nx-depth-card {
      transition-property: filter, opacity;
    }
    .nx-infinite-grid-field {
      animation: none;
    }
  }
}

/* src/css/blocks/data.css */
@layer nx.components {
  @property --nx-reach { syntax: "<number>"; inherits: true; initial-value: 1; }
  .nx-multiselect {
    --_pad: 0.3125rem;
    --_radius: var(--nx-radius-md);
    position: relative;
    display: grid;
    min-inline-size: 0;
  }
  .nx-multiselect-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    min-block-size: 2.75rem;
    padding: var(--_pad);
    border: 1px solid var(--nx-border-strong);
    border-radius: var(--_radius);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-xs);
    cursor: pointer;
    transition: border-color var(--nx-dur-fast) var(--nx-ease-out), box-shadow var(--nx-dur-base) var(--nx-ease-out);
    &:hover {
      border-color: color-mix(in oklab, var(--nx-border-strong) 70%, var(--nx-text));
    }
  }
  .nx-multiselect:is(:focus-within, [data-open]) .nx-multiselect-field {
    border-color: var(--nx-accent);
    box-shadow: var(--nx-shadow-xs), 0 0 0 4px var(--nx-accent-soft);
  }
  .nx-multiselect[data-disabled] .nx-multiselect-field {
    background: var(--nx-surface-2);
    opacity: 0.7;
    cursor: not-allowed;
  }
  .nx-multiselect-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    min-inline-size: 0;
    &:not(:has(.nx-multiselect-chip)) {
      display: none;
    }
  }
  .nx-multiselect-chip {
    display: inline-grid;
    grid-template-columns: 1fr;
    transition: grid-template-columns var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &[data-state=enter] {
      @starting-style {
        grid-template-columns: 0fr;
      }
    }
    &[data-state=exit] {
      grid-template-columns: 0fr;
      pointer-events: none;
      transition: grid-template-columns 200ms var(--nx-ease-out);
    }
  }
  .nx-multiselect-chip-body {
    min-inline-size: 0;
    overflow: hidden;
    padding-inline-end: 0.25rem;
    transition: padding 200ms var(--nx-ease-out);
  }
  .nx-multiselect-chip[data-state=exit] .nx-multiselect-chip-body {
    padding-inline-end: 0;
  }
  .nx-multiselect-chip-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    block-size: 1.75rem;
    padding-inline: 0.5rem 0.25rem;
    border: 1px solid color-mix(in oklab, var(--nx-accent) 22%, transparent);
    border-radius: calc(var(--_radius) - var(--_pad));
    background: color-mix(in oklab, var(--nx-accent) 9%, var(--nx-surface));
    color: var(--nx-accent-text);
    font: 500 var(--nx-text-sm) / 1 var(--nx-font-sans);
    white-space: nowrap;
    transition:
      opacity 300ms var(--nx-ease-emphasized),
      scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy),
      filter 300ms var(--nx-ease-emphasized);
    > .nx-icon {
      inline-size: 0.95rem;
      block-size: 0.95rem;
    }
  }
  .nx-multiselect-chip[data-state=enter] .nx-multiselect-chip-pill {
    @starting-style {
      opacity: 0;
      scale: 0.95;
      filter: blur(4px);
    }
  }
  .nx-multiselect-chip[data-state=exit] .nx-multiselect-chip-pill {
    opacity: 0;
    scale: 0.95;
    filter: blur(2px);
    transition-duration: 150ms;
    transition-timing-function: var(--nx-ease-out);
  }
  .nx-multiselect-chip-remove {
    display: grid;
    place-items: center;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    padding: 0;
    border: 0;
    border-radius: calc(var(--_radius) - var(--_pad) - 0.25rem);
    background: transparent;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    transition:
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      opacity var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    .nx-icon {
      inline-size: 0.8rem;
      block-size: 0.8rem;
    }
    &:hover {
      background: var(--nx-accent-soft);
      opacity: 1;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: -2px;
      opacity: 1;
    }
    &:active:not([data-static], [data-static] *) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
  }
  .nx-multiselect-trigger {
    display: flex;
    flex: 1 1 7rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-2);
    min-inline-size: 0;
    min-block-size: 1.875rem;
    padding-inline: 0.5rem 0.375rem;
    border: 0;
    border-radius: calc(var(--_radius) - var(--_pad));
    background: transparent;
    color: var(--nx-text-subtle);
    font: 400 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
    text-align: start;
    cursor: pointer;
    transition: scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 1px;
    }
    &:disabled {
      cursor: not-allowed;
    }
    &:active:not(:disabled, [data-static], [data-static] *) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
  }
  .nx-multiselect-placeholder {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-multiselect-count {
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    font-variant-numeric: tabular-nums;
  }
  .nx-multiselect-chevron {
    flex: none;
    color: var(--nx-text-subtle);
    transition: rotate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
  }
  .nx-multiselect[data-open] .nx-multiselect-chevron {
    rotate: 180deg;
  }
  .nx-multiselect-popover {
    --_pad: 0.375rem;
    position: fixed;
    inset: auto;
    margin: 0;
    max-inline-size: min(26rem, calc(100vw - 1rem));
    padding: var(--_pad);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-xl);
    z-index: var(--nx-z-dropdown);
    transform-origin: var(--nx-origin, top center);
    opacity: 0;
    scale: 0.96;
    transition:
      opacity var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-dur-fast) var(--nx-ease-out),
      display var(--nx-dur-fast) allow-discrete,
      overlay var(--nx-dur-fast) allow-discrete;
  }
  .nx-multiselect-popover:where(:popover-open, [data-open]) {
    opacity: 1;
    scale: 1;
    transition:
      opacity var(--nx-dur-base) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      display var(--nx-dur-base) allow-discrete,
      overlay var(--nx-dur-base) allow-discrete;
    @starting-style {
      opacity: 0;
      scale: 0.96;
    }
  }
  .nx-multiselect-popover:not([popover]):not([data-open]) {
    display: none;
  }
  .nx-multiselect-search {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    margin-block-end: var(--_pad);
    padding: 0.375rem 0.5rem;
    border-block-end: 1px solid var(--nx-border);
    color: var(--nx-text-subtle);
    transition: border-color var(--nx-dur-fast) var(--nx-ease-out);
    &:focus-within {
      border-block-end-color: var(--nx-accent);
    }
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  .nx-multiselect-input {
    flex: 1;
    min-inline-size: 0;
    padding: 0.25rem 0;
    border: 0;
    background: transparent;
    color: var(--nx-text);
    font: 400 var(--nx-text-sm) / 1.4 var(--nx-font-sans);
    &:focus-visible {
      outline: none;
    }
    &::placeholder {
      color: var(--nx-text-subtle);
    }
  }
  .nx-multiselect-list {
    display: grid;
    gap: 1px;
    max-block-size: min(16rem, 50vh);
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    scroll-padding-block: var(--_pad);
  }
  .nx-multiselect-option {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-block-size: 2.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: calc(var(--nx-radius-lg) - var(--_pad));
    color: var(--nx-text);
    font-size: var(--nx-text-sm);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    animation: nx-ms-option-in 200ms var(--nx-ease-out) both;
    animation-delay: calc(min(var(--nx-i, 0), 8) * 30ms);
    &[data-active] {
      background: var(--nx-surface-2);
    }
    &[aria-selected=true] .nx-multiselect-option-label {
      font-weight: 600;
    }
    &[aria-disabled=true] {
      opacity: 0.45;
      cursor: not-allowed;
    }
    &[hidden] {
      display: none;
    }
  }
  @keyframes nx-ms-option-in {
    from {
      opacity: 0;
      translate: 0 calc(-4px * var(--nx-motion));
    }
  }
  .nx-multiselect-check {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    border: 1.5px solid var(--nx-border-strong);
    border-radius: 5px;
    background: var(--nx-surface);
    color: var(--nx-accent-contrast);
    transition:
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      border-color var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    svg {
      inline-size: 0.8rem;
      block-size: 0.8rem;
      overflow: visible;
    }
    path {
      fill: none;
      stroke: currentColor;
      stroke-width: 3.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      transition: stroke-dashoffset 120ms var(--nx-ease-in);
    }
  }
  .nx-multiselect-option[aria-selected=true] .nx-multiselect-check {
    border-color: var(--nx-accent);
    background: var(--nx-accent);
    path {
      stroke-dashoffset: 0;
      transition: stroke-dashoffset 260ms var(--nx-ease-out) 40ms;
    }
  }
  .nx-multiselect-option:active:not([aria-disabled=true], [data-static] *) .nx-multiselect-check {
    scale: calc(1 - 0.04 * var(--nx-motion));
  }
  .nx-multiselect-option-icon {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 1.875rem;
    block-size: 1.875rem;
    border-radius: calc(var(--nx-radius-lg) - var(--_pad) - 0.25rem);
    background: var(--nx-surface-2);
    color: var(--nx-text-muted);
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  .nx-multiselect-option[aria-selected=true] .nx-multiselect-option-icon {
    background: var(--nx-accent-soft);
    color: var(--nx-accent-text);
  }
  .nx-multiselect-option-text {
    display: grid;
    gap: 0.05rem;
    min-inline-size: 0;
  }
  .nx-multiselect-option-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-multiselect-option-description {
    overflow: hidden;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-multiselect-empty {
    margin: 0;
    padding: var(--nx-space-6) var(--nx-space-3);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    text-align: center;
  }
  .nx-heatmap {
    --_gap: 3px;
    --_label: 2rem;
    --_l0: var(--nx-surface-3);
    --_l1: color-mix(in oklab, var(--nx-accent) 28%, var(--_l0));
    --_l2: color-mix(in oklab, var(--nx-accent) 52%, var(--_l0));
    --_l3: color-mix(in oklab, var(--nx-accent) 76%, var(--_l0));
    --_l4: var(--nx-accent);
  }
  .nx-heatmap-frame {
    position: relative;
    min-inline-size: 0;
    container-type: inline-size;
  }
  .nx-heatmap-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding-block: 2px;
  }
  .nx-heatmap-plot {
    --_cell: clamp(0.625rem, calc((100cqi - var(--_label) - 4px) / var(--nx-cols, 26) - var(--_gap)), 1rem);
    display: grid;
    grid-template-columns: var(--_label) auto;
    grid-template-rows: auto auto;
    inline-size: max-content;
    border-radius: var(--nx-radius-sm);
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 4px;
    }
  }
  .nx-heatmap-columns,
  .nx-heatmap-grid {
    display: grid;
    grid-template-columns: repeat(var(--nx-cols, 26), var(--_cell));
    column-gap: var(--_gap);
  }
  .nx-heatmap-columns {
    grid-column: 2;
    block-size: 1.25rem;
    color: var(--nx-text-subtle);
    font-size: 11px;
    line-height: 1;
  }
  .nx-heatmap-column {
    grid-row: 1;
    white-space: nowrap;
  }
  .nx-heatmap-rows,
  .nx-heatmap-grid {
    grid-template-rows: repeat(var(--nx-rows, 7), var(--_cell));
    row-gap: var(--_gap);
  }
  .nx-heatmap-rows {
    display: grid;
    grid-column: 1;
    grid-row: 2;
    align-items: center;
    color: var(--nx-text-subtle);
    font-size: 11px;
    line-height: 1;
  }
  .nx-heatmap-row {
    overflow: hidden;
    padding-inline-end: 0.35rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-heatmap-grid {
    grid-column: 2;
    grid-row: 2;
  }
  .nx-heatmap-cell {
    inline-size: var(--_cell);
    block-size: var(--_cell);
    border-radius: clamp(2px, calc(var(--_cell) * 0.22), 3px);
    background: var(--_l0);
    cursor: default;
    transition: opacity 300ms var(--nx-ease-out), scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    transition-delay: calc(var(--nx-d, 0) * 30ms);
    &[data-level="1"] {
      background: var(--_l1);
    }
    &[data-level="2"] {
      background: var(--_l2);
    }
    &[data-level="3"] {
      background: var(--_l3);
    }
    &[data-level="4"] {
      background: var(--_l4);
    }
    &[data-active] {
      position: relative;
      z-index: 1;
      outline: 2px solid var(--nx-text);
      outline-offset: 1px;
    }
  }
  :where(.nx-js) .nx-heatmap[data-nx-reveal]:not([data-nx-revealed]) .nx-heatmap-cell {
    opacity: 0;
    scale: 0.95;
  }
  :where(.nx-js:not(.nx-live)) .nx-heatmap[data-nx-reveal]:not([data-nx-revealed]) .nx-heatmap-cell {
    animation: nx-reveal-failsafe 1ms 2.5s forwards;
  }
  .nx-heatmap-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-2) var(--nx-space-4);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
  }
  .nx-heatmap-legend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-inline-start: auto;
    color: var(--nx-text-subtle);
    > span:first-child {
      margin-inline-end: 0.3rem;
    }
    > span:last-child {
      margin-inline-start: 0.3rem;
    }
    .nx-heatmap-cell {
      --_cell: 0.7rem;
      transition: none;
    }
  }
  :where(.nx-js) .nx-heatmap[data-nx-reveal]:not([data-nx-revealed]) .nx-heatmap-legend .nx-heatmap-cell {
    opacity: 1;
    scale: 1;
  }
  .nx-data-table {
    position: relative;
    max-block-size: var(--nx-table-max, none);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-sm), inset 0 1px 0 var(--nx-highlight);
    overflow: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    table {
      inline-size: 100%;
      border-collapse: separate;
      border-spacing: 0;
      font-size: var(--nx-text-sm);
    }
    caption {
      padding: var(--nx-space-4) var(--nx-space-4) var(--nx-space-2);
      color: var(--nx-text);
      font-weight: 600;
      text-align: start;
    }
    th,
    td {
      padding: 0.75rem 1rem;
      text-align: start;
      vertical-align: middle;
      white-space: nowrap;
      &[data-align=end] {
        text-align: end;
      }
      &[data-align=center] {
        text-align: center;
      }
    }
    thead th {
      position: sticky;
      inset-block-start: 0;
      z-index: 1;
      padding-block: 0.625rem;
      border-block-end: 1px solid var(--nx-border);
      background: var(--nx-surface);
      color: var(--nx-text-muted);
      font-size: var(--nx-text-xs);
      font-weight: 600;
      letter-spacing: var(--nx-tracking-wide);
    }
    td {
      border-block-end: 1px solid var(--nx-border);
      color: var(--nx-text-muted);
      &:first-child {
        color: var(--nx-text);
        font-weight: 500;
      }
      &[data-numeric] {
        font-variant-numeric: tabular-nums;
      }
    }
    tbody tr:last-child td {
      border-block-end: 0;
    }
    tbody tr {
      transition:
        background-color var(--nx-dur-fast) var(--nx-ease-out),
        opacity var(--nx-dur-slow) var(--nx-ease-out),
        translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
      transition-delay:
        0ms,
        calc(min(var(--nx-i, 0), 12) * 40ms),
        calc(min(var(--nx-i, 0), 12) * 40ms);
    }
    tbody tr:hover {
      background: var(--nx-surface-2);
    }
    &[data-density=compact] td {
      padding-block: 0.5rem;
    }
  }
  :where(.nx-js) .nx-data-table[data-nx-reveal]:not([data-nx-revealed]) tbody tr {
    opacity: 0;
    translate: 0 calc(8px * var(--nx-motion));
  }
  :where(.nx-js:not(.nx-live)) .nx-data-table[data-nx-reveal]:not([data-nx-revealed]) tbody tr {
    animation: nx-reveal-failsafe 1ms 2.5s forwards;
  }
  .nx-data-table[data-nx-reveal] {
    opacity: 1;
    translate: none;
  }
  .nx-data-table-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: -0.25rem -0.5rem;
    padding: 0.25rem 0.5rem;
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    transition:
      color var(--nx-dur-fast) var(--nx-ease-out),
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &:hover {
      color: var(--nx-text);
      background: var(--nx-surface-2);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 1px;
    }
    &:active:not([data-static], [data-static] *) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:is([data-direction=ascending], [data-direction=descending]) {
      color: var(--nx-text);
    }
  }
  [data-align=end] > .nx-data-table-sort {
    flex-direction: row-reverse;
  }
  .nx-data-table-sort-icon {
    inline-size: 0.85rem;
    block-size: 0.85rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    transition: opacity var(--nx-dur-fast) var(--nx-ease-out), rotate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
  }
  .nx-data-table-sort:is(:hover, :focus-visible) .nx-data-table-sort-icon {
    opacity: 0.4;
  }
  .nx-data-table-sort:is([data-direction=ascending], [data-direction=descending]) .nx-data-table-sort-icon {
    opacity: 1;
    color: var(--nx-accent-text);
  }
  .nx-data-table-sort[data-direction=descending] .nx-data-table-sort-icon {
    rotate: 180deg;
  }
  .nx-data-table-empty {
    padding: var(--nx-space-10) var(--nx-space-4) !important;
    color: var(--nx-text-muted) !important;
    text-align: center !important;
  }
  .nx-status-badge {
    --_tone: var(--nx-text-subtle);
    --_soft: var(--nx-surface-2);
    --_ink: var(--nx-text-muted);
    display: inline-grid;
    align-items: center;
    vertical-align: middle;
    inline-size: var(--_w, auto);
    block-size: 1.625rem;
    padding-inline: 0.4375rem 0.625rem;
    border: 1px solid color-mix(in oklab, var(--_tone) 28%, transparent);
    border-radius: var(--nx-radius-full);
    background: var(--_soft);
    color: var(--_ink);
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-sans);
    white-space: nowrap;
    overflow: clip;
    transition:
      inline-size var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      background-color var(--nx-dur-base) var(--nx-ease-out),
      border-color var(--nx-dur-base) var(--nx-ease-out),
      color var(--nx-dur-base) var(--nx-ease-out);
    &[data-status=running] {
      --_tone: var(--nx-info);
      --_soft: var(--nx-info-soft);
      --_ink: var(--nx-info-text);
    }
    &[data-status=success] {
      --_tone: var(--nx-success);
      --_soft: var(--nx-success-soft);
      --_ink: var(--nx-success-text);
    }
    &[data-status=failed] {
      --_tone: var(--nx-danger);
      --_soft: var(--nx-danger-soft);
      --_ink: var(--nx-danger-text);
    }
    &[data-status=queued] {
      --_tone: var(--nx-warning);
      --_soft: var(--nx-warning-soft);
      --_ink: var(--nx-warning-text);
    }
    &[data-status=canceled] {
      --_tone: var(--nx-text-subtle);
      --_soft: var(--nx-surface-2);
      --_ink: var(--nx-text-subtle);
    }
    &[data-size=sm] {
      block-size: 1.375rem;
      padding-inline: 0.375rem 0.5rem;
      font-size: 0.6875rem;
    }
    &[data-size=lg] {
      block-size: 2rem;
      padding-inline: 0.5625rem 0.8125rem;
      font-size: var(--nx-text-sm);
    }
    &[data-status=failed][data-changed] {
      animation: nx-shake 420ms var(--nx-ease-out);
    }
  }
  .nx-status-badge-layers {
    position: relative;
    display: grid;
    justify-items: start;
    align-items: center;
  }
  .nx-status-badge-layer {
    grid-area: 1 / 1;
    position: absolute;
    inset-inline-start: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    visibility: hidden;
    transition: visibility 0s linear 150ms;
    > .nx-status-badge-icon,
    > .nx-status-badge-label {
      opacity: 0;
      filter: blur(4px);
      transition:
        opacity 150ms var(--nx-ease-out),
        scale 150ms var(--nx-ease-out),
        filter 150ms var(--nx-ease-out),
        translate 150ms var(--nx-ease-out);
    }
    > .nx-status-badge-icon {
      scale: 0.25;
    }
    > .nx-status-badge-label {
      translate: 0 calc(-6px * var(--nx-motion));
    }
  }
  .nx-status-badge[data-status=running] .nx-status-badge-layer[data-for=running],
  .nx-status-badge[data-status=success] .nx-status-badge-layer[data-for=success],
  .nx-status-badge[data-status=failed] .nx-status-badge-layer[data-for=failed],
  .nx-status-badge[data-status=queued] .nx-status-badge-layer[data-for=queued],
  .nx-status-badge[data-status=canceled] .nx-status-badge-layer[data-for=canceled] {
    position: relative;
    visibility: visible;
    transition: visibility 0s;
    > .nx-status-badge-icon,
    > .nx-status-badge-label {
      opacity: 1;
      scale: 1;
      filter: none;
      translate: 0 0;
      transition:
        opacity 300ms var(--nx-ease-emphasized),
        scale 300ms var(--nx-ease-emphasized),
        filter 300ms var(--nx-ease-emphasized),
        translate 300ms var(--nx-ease-emphasized);
    }
  }
  .nx-status-badge-icon {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 0.875rem;
    block-size: 0.875rem;
    > * {
      grid-area: 1 / 1;
    }
    svg {
      inline-size: 100%;
      block-size: 100%;
      overflow: visible;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
  }
  .nx-status-badge[data-size=lg] .nx-status-badge-icon {
    inline-size: 1rem;
    block-size: 1rem;
  }
  .nx-status-badge-ring {
    inline-size: 100%;
    block-size: 100%;
    border: 1.5px solid color-mix(in oklab, currentColor 25%, transparent);
    border-block-start-color: currentColor;
    border-radius: 50%;
  }
  .nx-status-badge-dot {
    inline-size: 0.3rem;
    block-size: 0.3rem;
    border-radius: 50%;
    background: currentColor;
  }
  .nx-status-badge[data-status=running] {
    .nx-status-badge-ring {
      animation: nx-spin 0.9s linear infinite;
    }
    .nx-status-badge-dot {
      animation: nx-status-breathe 1.4s var(--nx-ease-in-out) infinite;
    }
  }
  @keyframes nx-status-breathe {
    50% {
      scale: 0.55;
      opacity: 0.5;
    }
  }
  .nx-status-badge-disc {
    fill: color-mix(in oklab, currentColor 16%, transparent);
    stroke: none;
  }
  .nx-status-badge-mark {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 120ms var(--nx-ease-in);
  }
  .nx-status-badge[data-status=success] [data-for=success] .nx-status-badge-mark,
  .nx-status-badge[data-status=failed] [data-for=failed] .nx-status-badge-mark,
  .nx-status-badge[data-status=canceled] [data-for=canceled] .nx-status-badge-mark {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 300ms var(--nx-ease-emphasized) 80ms;
  }
  .nx-status-badge-dots {
    display: inline-flex;
    gap: 1.5px;
    > i {
      inline-size: 3px;
      block-size: 3px;
      border-radius: 50%;
      background: currentColor;
      opacity: 0.45;
    }
  }
  .nx-status-badge[data-status=queued] .nx-status-badge-dots > i {
    animation: nx-status-queue 1.2s var(--nx-ease-in-out) infinite;
    &:nth-child(2) {
      animation-delay: 0.15s;
    }
    &:nth-child(3) {
      animation-delay: 0.3s;
    }
  }
  @keyframes nx-status-queue {
    0%, 70%, 100% {
      opacity: 0.35;
      scale: 0.8;
    }
    35% {
      opacity: 1;
      scale: 1;
    }
  }
  .nx-status-badge-label {
    position: relative;
  }
  .nx-status-badge-layer[data-for=canceled] .nx-status-badge-label::after {
    content: "";
    position: absolute;
    inset-inline: -1px;
    inset-block-start: 55%;
    block-size: 1px;
    border-radius: 1px;
    background: currentColor;
    scale: 0 1;
    transform-origin: left;
    transition: scale 120ms var(--nx-ease-in);
  }
  :where([dir=rtl]) .nx-status-badge-layer[data-for=canceled] .nx-status-badge-label::after {
    transform-origin: right;
  }
  .nx-status-badge[data-status=canceled] [data-for=canceled] .nx-status-badge-label::after {
    scale: 1 1;
    transition: scale 300ms var(--nx-ease-emphasized) 120ms;
  }
  .nx-metric-chart {
    --_surface: var(--nx-surface);
    display: grid;
    gap: var(--nx-space-4);
    min-inline-size: 0;
    padding: var(--nx-space-5);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-sm), inset 0 1px 0 var(--nx-highlight);
    &[data-nx-reveal] {
      opacity: 1;
      translate: none;
    }
  }
  .nx-metric-chart-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-3);
  }
  .nx-metric-chart-title {
    margin: 0;
    font: 600 var(--nx-text-md) / 1.3 var(--nx-font-sans);
  }
  .nx-metric-chart-subtitle {
    margin: 0.15rem 0 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
  }
  .nx-metric-chart-tabs {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    gap: 0.125rem;
    max-inline-size: 100%;
    padding: 0.1875rem;
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface-2);
    overflow-x: auto;
    scrollbar-width: none;
    .nx-indicator {
      z-index: -1;
      border-radius: calc(var(--nx-radius-md) - 0.1875rem);
      background: var(--nx-surface);
      box-shadow: var(--nx-shadow-sm), inset 0 1px 0 var(--nx-highlight);
    }
  }
  .nx-metric-chart-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-block-size: 2rem;
    padding-inline: 0.75rem;
    border: 0;
    border-radius: calc(var(--nx-radius-md) - 0.1875rem);
    background: transparent;
    color: var(--nx-text-muted);
    font: 500 var(--nx-text-sm) / 1 var(--nx-font-sans);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--nx-dur-base) var(--nx-ease-out), scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &:hover {
      color: var(--nx-text);
    }
    &[aria-selected=true] {
      color: var(--nx-text);
      font-weight: 600;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 1px;
    }
    &:active:not([data-static], [data-static] *) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
  }
  .nx-metric-chart-key {
    inline-size: 0.75rem;
    block-size: 2px;
    border-radius: 1px;
    background: var(--nx-series);
    opacity: 0.55;
    transition: opacity var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-metric-chart-tab[aria-selected=true] .nx-metric-chart-key {
    opacity: 1;
  }
  .nx-metric-chart-panel {
    display: grid;
    gap: var(--nx-space-3);
    min-inline-size: 0;
    border-radius: var(--nx-radius-md);
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 4px;
    }
  }
  .nx-metric-chart-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--nx-space-1) var(--nx-space-3);
  }
  .nx-metric-chart-value {
    font: 700 var(--nx-text-4xl) / 1.05 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tighter);
    font-variant-numeric: normal;
    .nx-number {
      font-variant-numeric: normal;
    }
  }
  .nx-metric-chart-caption {
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
  }
  .nx-metric-chart-plot {
    position: relative;
    direction: ltr;
    border-radius: var(--nx-radius-md);
    cursor: crosshair;
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 4px;
    }
  }
  .nx-metric-chart-line {
    fill: none;
    stroke: var(--nx-series, var(--nx-chart-1));
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    transition: stroke 400ms var(--nx-ease-out), stroke-dashoffset 1200ms var(--nx-ease-out);
  }
  .nx-metric-chart-stop {
    stop-color: var(--nx-series, var(--nx-chart-1));
    transition: stop-color 400ms var(--nx-ease-out);
  }
  .nx-metric-chart-area {
    transition: opacity 900ms var(--nx-ease-out) 300ms;
  }
  .nx-metric-chart-ticks {
    animation: nx-fade-in var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-metric-chart-point {
    fill: var(--nx-series, var(--nx-chart-1));
    stroke: var(--_surface);
    stroke-width: 2;
    opacity: 0;
    transition: opacity var(--nx-dur-fast) var(--nx-ease-out), fill 400ms var(--nx-ease-out);
    &[data-active],
    &[data-end] {
      opacity: 1;
    }
  }
  :where(.nx-js) .nx-metric-chart[data-nx-reveal]:not([data-nx-revealed]) {
    .nx-metric-chart-line {
      stroke-dashoffset: 1;
    }
    .nx-metric-chart-area {
      opacity: 0;
    }
    .nx-metric-chart-point[data-end] {
      opacity: 0;
    }
  }
  .nx-currency-converter {
    --_pad: var(--nx-space-4);
    display: grid;
    gap: var(--nx-space-4);
    min-inline-size: 0;
    padding: var(--_pad);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-2xl);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-md), inset 0 1px 0 var(--nx-highlight);
  }
  .nx-currency-converter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-3);
    padding-inline: var(--nx-space-1);
  }
  .nx-currency-converter-title {
    margin: 0;
    font: 600 var(--nx-text-md) / 1.3 var(--nx-font-sans);
  }
  .nx-currency-converter-rows {
    position: relative;
    display: grid;
    gap: 0.375rem;
  }
  .nx-currency-converter-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label label" "amount currency";
    align-items: center;
    gap: 0.25rem var(--nx-space-3);
    padding: 0.875rem 1rem;
    border-radius: calc(var(--nx-radius-2xl) - var(--_pad));
    background: var(--nx-surface-2);
    transition: box-shadow var(--nx-dur-base) var(--nx-ease-out);
    &:focus-within {
      box-shadow: inset 0 0 0 1px var(--nx-accent-border), 0 0 0 4px var(--nx-accent-soft);
    }
  }
  .nx-currency-converter-label {
    grid-area: label;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    font-weight: 600;
  }
  .nx-currency-converter-amount,
  .nx-currency-converter-result {
    grid-area: amount;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--nx-text);
    font: 650 var(--nx-text-3xl) / 1.15 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tight);
  }
  .nx-currency-converter-amount {
    inline-size: 100%;
    border-radius: var(--nx-radius-xs);
    &:focus-visible {
      outline: none;
    }
    &::placeholder {
      color: var(--nx-text-subtle);
    }
  }
  .nx-currency-converter-result {
    display: block;
    overflow: hidden;
    white-space: nowrap;
  }
  .nx-currency-converter-select {
    grid-area: currency;
    inline-size: auto;
    min-block-size: 2.25rem;
    padding-block: 0.25rem;
    border-radius: var(--nx-radius-full);
    font-weight: 600;
  }
  .nx-currency-converter-swap {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    padding: 0;
    border: 1px solid var(--nx-border);
    border-radius: 50%;
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-md), 0 0 0 4px var(--nx-surface);
    cursor: pointer;
    translate: calc(-50% * var(--nx-dir)) -50%;
    rotate: calc(var(--_turns, 0) * 180deg);
    transition:
      rotate var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      color var(--nx-dur-fast) var(--nx-ease-out),
      border-color var(--nx-dur-fast) var(--nx-ease-out);
    svg {
      inline-size: 1.15rem;
      block-size: 1.15rem;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    &:hover {
      color: var(--nx-accent-text);
      border-color: var(--nx-accent-border);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:active:not([data-static], [data-static] *) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
  }
  .nx-currency-converter-rate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-1) var(--nx-space-3);
    margin: 0;
    padding-inline: var(--nx-space-1);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    font-variant-numeric: tabular-nums;
    strong {
      color: var(--nx-text);
      font-weight: 600;
    }
  }
  .nx-workspace {
    --_side: 15rem;
    --_rail: 4.25rem;
    --_pad: 0.625rem;
    --_radius: var(--nx-radius-xl);
    container-type: inline-size;
    min-inline-size: 0;
  }
  .nx-workspace-frame {
    position: relative;
    display: grid;
    grid-template-columns: var(--_side) minmax(0, 1fr);
    block-size: var(--nx-workspace-height, 36rem);
    border: 1px solid var(--nx-border);
    border-radius: var(--_radius);
    background:
      radial-gradient(
        60% 50% at 0% 0%,
        var(--nx-accent-soft),
        transparent 70%),
      radial-gradient(
        50% 40% at 100% 100%,
        var(--nx-gold-soft),
        transparent 70%),
      var(--nx-bg-subtle);
    box-shadow: var(--nx-shadow-lg);
    overflow: clip;
    transition: grid-template-columns var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
  }
  .nx-workspace[data-collapsed] .nx-workspace-frame {
    grid-template-columns: var(--_rail) minmax(0, 1fr);
  }
  .nx-workspace-sidebar {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--nx-space-4);
    min-inline-size: 0;
    padding: var(--_pad);
    border-inline-end: 1px solid var(--nx-glass-border);
    background: var(--nx-glass);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    box-shadow: inset -1px 0 0 color-mix(in oklab, var(--nx-border) 60%, transparent);
  }
  .nx-workspace-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-block-size: 2.5rem;
    padding-inline: calc(0.9375rem - 0.25rem);
    overflow: hidden;
    font-weight: 700;
    white-space: nowrap;
  }
  .nx-workspace-mark {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 1.625rem;
    block-size: 1.625rem;
    border-radius: 0.5rem;
    background: var(--nx-gradient-brand);
    color: #fff;
    font-size: var(--nx-text-xs);
    font-weight: 800;
    box-shadow: var(--nx-shadow-glow);
  }
  .nx-workspace-nav {
    position: relative;
    isolation: isolate;
    display: grid;
    flex: 1;
    align-content: start;
    gap: 0.125rem;
    min-block-size: 0;
    ul {
      display: grid;
      gap: 0.125rem;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .nx-indicator {
      z-index: -1;
      inset-inline: 0;
      inline-size: auto;
      translate: 0 var(--nx-ind-y, 0px);
      border-radius: calc(var(--_radius) - var(--_pad));
      background: var(--nx-surface);
      box-shadow: var(--nx-shadow-sm), inset 0 1px 0 var(--nx-highlight);
      transition:
        translate var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
        block-size var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
        opacity var(--nx-dur-fast) var(--nx-ease-out);
    }
  }
  .nx-workspace-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    inline-size: 100%;
    min-block-size: 2.5rem;
    padding-inline: 0.9375rem;
    border: 0;
    border-radius: calc(var(--_radius) - var(--_pad));
    background: transparent;
    color: var(--nx-text-muted);
    font: 500 var(--nx-text-sm) / 1 var(--nx-font-sans);
    text-align: start;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
      color var(--nx-dur-fast) var(--nx-ease-out),
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    .nx-icon {
      inline-size: 1.125rem;
      block-size: 1.125rem;
    }
    &:hover {
      color: var(--nx-text);
      background: color-mix(in oklab, var(--nx-surface) 45%, transparent);
    }
    &:is([aria-current=page], [aria-current=true]) {
      color: var(--nx-text);
      font-weight: 600;
      background: transparent;
    }
    &:is([aria-current=page], [aria-current=true]) .nx-icon {
      color: var(--nx-accent-text);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: -2px;
    }
    &:active:not([data-static], [data-static] *) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &::after {
      content: attr(data-label) / "";
      position: absolute;
      inset-inline-start: calc(100% + 0.75rem);
      inset-block-start: 50%;
      z-index: 3;
      padding: 0.35rem 0.6rem;
      border-radius: var(--nx-radius-sm);
      background: var(--nx-surface-inverse);
      color: var(--nx-text-inverse);
      font-size: var(--nx-text-xs);
      font-weight: 500;
      white-space: nowrap;
      opacity: 0;
      translate: calc(-4px * var(--nx-dir) * var(--nx-motion)) -50%;
      pointer-events: none;
      visibility: hidden;
      transition:
        opacity var(--nx-dur-fast) var(--nx-ease-out),
        translate var(--nx-dur-fast) var(--nx-ease-out),
        visibility 0s linear var(--nx-dur-fast);
    }
  }
  .nx-workspace-label {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity var(--nx-dur-base) var(--nx-ease-out), translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
  }
  .nx-workspace-badge {
    flex: none;
    min-inline-size: 1.25rem;
    padding: 0.15rem 0.4rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-accent-soft);
    color: var(--nx-accent-text);
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    transition: opacity var(--nx-dur-fast) var(--nx-ease-out), scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
  }
  .nx-workspace-sidebar-foot {
    display: grid;
    gap: 0.25rem;
    padding-block-start: var(--nx-space-3);
    border-block-start: 1px solid var(--nx-glass-border);
  }
  .nx-workspace-toggle .nx-icon {
    transition: rotate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
  }
  .nx-workspace[data-collapsed] {
    .nx-workspace-label,
    .nx-workspace-brand-text {
      opacity: 0;
      translate: calc(-6px * var(--nx-dir) * var(--nx-motion)) 0;
      pointer-events: none;
      transition-duration: 150ms, 150ms;
      transition-timing-function: var(--nx-ease-out), var(--nx-ease-out);
    }
    .nx-workspace-toggle .nx-icon {
      rotate: 180deg;
    }
  }
  .nx-workspace[data-collapsed] {
    .nx-workspace-badge {
      position: absolute;
      inset-block-start: 0.35rem;
      inset-inline-start: 1.85rem;
      min-inline-size: 0.5rem;
      inline-size: 0.5rem;
      block-size: 0.5rem;
      padding: 0;
      border: 2px solid var(--nx-surface);
      background: var(--nx-accent);
      color: transparent;
      overflow: hidden;
    }
    .nx-workspace-item:is(:hover, :focus-visible)::after {
      opacity: 1;
      translate: 0 -50%;
      visibility: visible;
      transition-delay: 0s;
    }
  }
  .nx-workspace-brand-text {
    transition: opacity var(--nx-dur-base) var(--nx-ease-out), translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
  }
  .nx-workspace-main {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-inline-size: 0;
    min-block-size: 0;
  }
  .nx-workspace-header {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    min-block-size: 3.5rem;
    padding: var(--nx-space-2) var(--nx-space-5);
    border-block-end: 1px solid var(--nx-border);
    background: color-mix(in oklab, var(--nx-surface) 72%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    &:empty {
      display: none;
    }
  }
  .nx-workspace-content {
    min-block-size: 0;
    padding: var(--nx-space-5) var(--nx-space-5) 8rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: -2px;
    }
  }
  .nx-workspace-composer {
    position: absolute;
    inset-inline: var(--nx-space-4);
    inset-block-end: var(--nx-space-4);
    z-index: 2;
    display: grid;
    justify-items: center;
    pointer-events: none;
    &::before {
      content: "";
      position: absolute;
      inset: -3rem calc(var(--nx-space-4) * -1) calc(var(--nx-space-4) * -1);
      z-index: -1;
      background:
        linear-gradient(
          to bottom,
          transparent,
          var(--nx-bg-subtle) 55%);
    }
    > * {
      inline-size: min(100%, 40rem);
      pointer-events: auto;
    }
  }
  @container (max-width: 40rem) {
    .nx-workspace-frame {
      grid-template-columns: var(--_rail) minmax(0, 1fr);
    }
    .nx-workspace-label,
    .nx-workspace-brand-text {
      opacity: 0;
      pointer-events: none;
    }
    .nx-workspace-toggle {
      display: none;
    }
    .nx-workspace-content {
      padding-inline: var(--nx-space-4);
    }
    .nx-workspace-badge {
      position: absolute;
      inset-block-start: 0.35rem;
      inset-inline-start: 1.85rem;
      min-inline-size: 0.5rem;
      inline-size: 0.5rem;
      block-size: 0.5rem;
      padding: 0;
      border: 2px solid var(--nx-surface);
      background: var(--nx-accent);
      color: transparent;
      overflow: hidden;
    }
    .nx-workspace-item:is(:hover, :focus-visible)::after {
      opacity: 1;
      translate: 0 -50%;
      visibility: visible;
      transition-delay: 0s;
    }
  }
  .nx-agent-card {
    --_pad: var(--nx-space-5);
    display: grid;
    gap: var(--nx-space-5);
    min-inline-size: 0;
    padding: var(--_pad);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-2xl);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-md), inset 0 1px 0 var(--nx-highlight);
    .nx-avatar-image {
      outline: 1px solid color-mix(in oklab, var(--nx-text) 10%, transparent);
      outline-offset: -1px;
    }
  }
  .nx-agent-card[data-nx-reveal] {
    opacity: 1;
    translate: none;
  }
  .nx-agent-card-head {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    .nx-avatar {
      transition: scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy), opacity var(--nx-dur-slow) var(--nx-ease-out);
    }
  }
  :where(.nx-js) .nx-agent-card[data-nx-reveal]:not([data-nx-revealed]) .nx-agent-card-head .nx-avatar {
    opacity: 0;
    scale: 0.95;
  }
  .nx-agent-card-identity {
    display: grid;
    flex: 1;
    gap: 0.1rem;
    min-inline-size: 0;
  }
  .nx-agent-card-name {
    margin: 0;
    overflow: hidden;
    font: 650 var(--nx-text-md) / 1.3 var(--nx-font-display);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-agent-card-role {
    margin: 0;
    overflow: hidden;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-agent-card-status {
    --_tone: var(--nx-text-subtle);
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--_tone) 12%, transparent);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    > i {
      inline-size: 0.45rem;
      block-size: 0.45rem;
      border-radius: 50%;
      background: var(--_tone);
    }
    &[data-status=online] {
      --_tone: var(--nx-success);
    }
    &[data-status=online] > i {
      animation: nx-badge-pulse 1.8s var(--nx-ease-out) infinite;
      color: var(--nx-success);
    }
    &[data-status=away] {
      --_tone: var(--nx-warning);
    }
    &[data-status=busy] {
      --_tone: var(--nx-danger);
    }
  }
  .nx-agent-card-metrics {
    display: grid;
    gap: var(--nx-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-agent-card-metric {
    --_tone: var(--nx-accent);
    display: grid;
    gap: 0.45rem;
    &[data-tone=success] {
      --_tone: var(--nx-success);
    }
    &[data-tone=warning] {
      --_tone: var(--nx-warning);
    }
    &[data-tone=danger] {
      --_tone: var(--nx-danger);
    }
    &[data-tone=info] {
      --_tone: var(--nx-info);
    }
  }
  .nx-agent-card-metric-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nx-space-3);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    strong {
      color: var(--nx-text);
      font-weight: 650;
      font-variant-numeric: tabular-nums;
    }
    small {
      color: var(--nx-text-subtle);
      font-size: var(--nx-text-xs);
      font-weight: 500;
    }
  }
  .nx-agent-card-bar {
    position: relative;
    display: block;
    block-size: 0.5rem;
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--_tone) 14%, var(--nx-surface-2));
    overflow: hidden;
  }
  .nx-agent-card-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
      linear-gradient(
        calc(90deg * var(--nx-dir)),
        color-mix(in oklab, var(--_tone) 65%, var(--nx-surface)),
        var(--_tone));
    translate: calc((var(--nx-value, 0) - 1) * 100% * var(--nx-dir)) 0;
    transition: translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    transition-delay: calc(var(--nx-i, 0) * 80ms + 120ms);
  }
  :where(.nx-js) .nx-agent-card[data-nx-reveal]:not([data-nx-revealed]) .nx-agent-card-fill {
    translate: calc(-100% * var(--nx-dir)) 0;
  }
  .nx-agent-card-trend {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--nx-space-4);
    padding: var(--nx-space-3) var(--nx-space-4);
    border-radius: calc(var(--nx-radius-2xl) - var(--_pad));
    background: var(--nx-surface-2);
    .nx-sparkline {
      --nx-sparkline-height: 2.25rem;
    }
  }
  .nx-agent-card-trend-label {
    display: grid;
    gap: 0.1rem;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    strong {
      color: var(--nx-text);
      font-size: var(--nx-text-lg);
      font-weight: 650;
    }
  }
  .nx-agent-card-action {
    display: grid;
  }
  .nx-analytics-card {
    display: grid;
    gap: var(--nx-space-3);
    min-inline-size: 0;
    padding: var(--nx-space-5);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-sm), inset 0 1px 0 var(--nx-highlight);
  }
  .nx-analytics-card[data-nx-reveal] {
    opacity: 1;
    translate: none;
  }
  .nx-analytics-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-2) var(--nx-space-3);
  }
  .nx-analytics-card-title {
    margin: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    font-weight: 600;
  }
  .nx-analytics-card-kpi {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--nx-space-1) var(--nx-space-3);
    margin-block-start: var(--nx-space-1);
  }
  .nx-analytics-card-value {
    font: 700 var(--nx-text-4xl) / 1.05 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tighter);
    .nx-number {
      font-variant-numeric: normal;
    }
  }
  .nx-analytics-card-caption {
    margin: 0;
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
  }
  .nx-analytics-card-frame {
    position: relative;
    margin-block-start: var(--nx-space-2);
  }
  .nx-analytics-card-bars {
    display: flex;
    align-items: stretch;
    block-size: var(--nx-analytics-height, 5.5rem);
    direction: ltr;
    border-radius: var(--nx-radius-sm);
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 4px;
    }
  }
  .nx-analytics-card-slot {
    display: flex;
    flex: 1 1 0;
    justify-content: center;
    min-inline-size: 0;
    padding-inline: 1px;
    cursor: default;
    transition:
      flex-grow var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      padding var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      opacity var(--nx-dur-base) var(--nx-ease-out);
    &[data-state=off] {
      flex-grow: 0.0001;
      padding-inline: 0;
      opacity: 0;
    }
  }
  .nx-analytics-card-bar {
    position: relative;
    inline-size: min(100%, 1.5rem);
    block-size: 100%;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
  }
  .nx-analytics-card-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: color-mix(in oklab, var(--nx-accent) 42%, var(--nx-surface-3));
    translate: 0 calc((1 - var(--nx-v, 0)) * 100%);
    transition: translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle), background-color var(--nx-dur-fast) var(--nx-ease-out);
    transition-delay: calc(var(--nx-i, 0) * 30ms), 0ms;
  }
  .nx-analytics-card-slot:is([data-current], [data-active]) .nx-analytics-card-fill {
    background: var(--nx-accent);
  }
  :where(.nx-js) .nx-analytics-card[data-nx-reveal]:not([data-nx-revealed]) .nx-analytics-card-fill {
    translate: 0 100%;
  }
  .nx-analytics-card-axis {
    display: flex;
    justify-content: space-between;
    direction: ltr;
    color: var(--nx-text-subtle);
    font-size: 11px;
  }
  .nx-dot-matrix {
    --_dot: clamp(0.4rem, 1.4cqi, 0.6rem);
    --_gap: calc(var(--_dot) * 0.45);
  }
  .nx-dot-matrix-frame {
    position: relative;
    container-type: inline-size;
  }
  .nx-dot-matrix-plot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--_gap);
    padding-block-start: var(--nx-space-2);
    direction: ltr;
    border-radius: var(--nx-radius-md);
    overflow-x: auto;
    scrollbar-width: none;
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 4px;
    }
  }
  .nx-dot-matrix-col {
    display: grid;
    flex: 1 0 auto;
    justify-items: center;
    gap: var(--nx-space-2);
    padding-inline: 1px;
    cursor: default;
    transition: opacity var(--nx-dur-fast) var(--nx-ease-out);
  }
  .nx-dot-matrix-plot:has(.nx-dot-matrix-col[data-active]) .nx-dot-matrix-col:not([data-active]) {
    opacity: 0.35;
  }
  .nx-dot-matrix-dots {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--_gap);
  }
  .nx-dot-matrix-dot {
    display: block;
    inline-size: var(--_dot);
    block-size: var(--_dot);
    border-radius: 50%;
    background: var(--nx-chart-grid);
    transition: background-color 360ms var(--nx-ease-out);
    transition-delay: calc(var(--nx-c, 0) * 55ms + var(--nx-r, 0) * 30ms);
    &[data-series] {
      background: var(--nx-series, var(--nx-chart-1));
    }
  }
  :where(.nx-js) .nx-dot-matrix[data-nx-reveal]:not([data-nx-revealed]) .nx-dot-matrix-dot[data-series] {
    background: var(--nx-chart-grid);
  }
  .nx-dot-matrix-label {
    min-block-size: 1em;
    color: var(--nx-text-subtle);
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
  }
  .nx-dot-matrix-note {
    margin: 0;
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
  }
  @media (forced-colors: active) {
    .nx-dot-matrix-dot,
    .nx-heatmap-cell {
      forced-color-adjust: none;
    }
  }
  .nx-branch {
    --_flow: 2.4s;
    container-type: inline-size;
    min-inline-size: 0;
  }
  .nx-branch[data-nx-reveal] {
    opacity: 1;
    translate: none;
  }
  .nx-branch-layout {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(3.5rem, 1fr) minmax(0, auto);
    align-items: center;
    padding-block: var(--nx-space-2);
  }
  .nx-branch-links {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
    pointer-events: none;
  }
  .nx-branch-track {
    fill: none;
    stroke: var(--nx-border-strong);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0.7;
    transition: stroke-dashoffset 700ms var(--nx-ease-out);
    transition-delay: calc(var(--nx-i, 0) * 80ms + 150ms);
  }
  .nx-branch-pulse {
    fill: none;
    stroke: var(--nx-accent);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 0.08 1.92;
    stroke-dashoffset: 0.08;
    opacity: 0;
    filter: drop-shadow(0 0 3px var(--nx-glow));
  }
  .nx-branch[data-nx-connected]:where([data-nx-revealed], :not([data-nx-reveal])) {
    .nx-branch-track {
      stroke-dashoffset: 0;
    }
    .nx-branch-link:not([data-state=idle]) .nx-branch-pulse {
      opacity: 1;
      animation: nx-branch-flow var(--_flow) cubic-bezier(0.45, 0, 0.25, 1) infinite;
      animation-delay: calc(var(--nx-i, 0) * 0.35s + 0.9s);
    }
  }
  @keyframes nx-branch-flow {
    from {
      stroke-dashoffset: 0.08;
    }
    to {
      stroke-dashoffset: -1;
    }
  }
  .nx-branch-targets {
    display: flex;
    flex-direction: column;
    grid-column: 3;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-branch-node {
    --_pad: 0.5rem;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-inline-size: 0;
    padding: var(--_pad) 0.875rem var(--_pad) var(--_pad);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-sm);
    transition:
      opacity var(--nx-dur-slow) var(--nx-ease-out),
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      border-color var(--nx-dur-base) var(--nx-ease-out);
    transition-delay: calc(var(--nx-i, 0) * 55ms + 60ms);
  }
  .nx-branch-source {
    grid-column: 1;
    border-color: var(--nx-accent-border);
    box-shadow: var(--nx-shadow-glow);
    transition-delay: 0ms;
  }
  :where(.nx-js) .nx-branch[data-nx-reveal]:not([data-nx-revealed]) .nx-branch-node {
    opacity: 0;
    translate: calc(-10px * var(--nx-dir) * var(--nx-motion)) 0;
  }
  :where(.nx-js:not(.nx-live)) .nx-branch[data-nx-reveal]:not([data-nx-revealed]) .nx-branch-node {
    animation: nx-reveal-failsafe 1ms 2.5s forwards;
  }
  .nx-branch-icon {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: calc(var(--nx-radius-lg) - var(--_pad));
    background: var(--nx-accent-soft);
    color: var(--nx-accent-text);
    .nx-icon {
      inline-size: 1.05rem;
      block-size: 1.05rem;
    }
  }
  .nx-branch-node[data-nx-node=target]:not([data-state=idle]) .nx-branch-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 var(--nx-accent-border);
    opacity: 0;
  }
  .nx-branch[data-nx-connected]:where([data-nx-revealed], :not([data-nx-reveal])) .nx-branch-node[data-nx-node=target]:not([data-state=idle]) .nx-branch-icon::after {
    animation: nx-branch-land var(--_flow) linear infinite;
    animation-delay: calc(var(--nx-i, 0) * 0.35s + 0.9s);
  }
  @keyframes nx-branch-land {
    0%, 78% {
      opacity: 0;
      box-shadow: 0 0 0 0 var(--nx-accent-border);
    }
    84% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      box-shadow: 0 0 0 6px transparent;
    }
  }
  .nx-branch-node[data-state=idle] {
    color: var(--nx-text-muted);
    .nx-branch-icon {
      background: var(--nx-surface-2);
      color: var(--nx-text-subtle);
    }
  }
  .nx-branch-text {
    display: grid;
    gap: 0.05rem;
    min-inline-size: 0;
  }
  .nx-branch-label {
    overflow: hidden;
    font-size: var(--nx-text-sm);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-branch-description {
    overflow: hidden;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @container (max-width: 34rem) {
    .nx-branch-layout {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto 3.5rem auto;
      justify-items: center;
    }
    .nx-branch-source {
      grid-column: 1;
      grid-row: 1;
    }
    .nx-branch-targets {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      grid-column: 1;
      grid-row: 3;
    }
    :where(.nx-js) .nx-branch[data-nx-reveal]:not([data-nx-revealed]) .nx-branch-node {
      translate: 0 calc(10px * var(--nx-motion));
    }
  }
  .nx-curved-timeline {
    position: relative;
    container-type: inline-size;
    min-inline-size: 0;
  }
  .nx-curved-timeline-svg {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
    pointer-events: none;
  }
  .nx-curved-timeline-track {
    fill: none;
    stroke: var(--nx-border);
    stroke-width: 2;
    stroke-linecap: round;
  }
  .nx-curved-timeline-draw {
    fill: none;
    stroke: var(--nx-accent);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: calc(1 - var(--nx-draw, 1));
    filter: drop-shadow(0 0 4px color-mix(in oklab, var(--nx-accent) 45%, transparent));
  }
  .nx-curved-timeline-list {
    position: relative;
    display: grid;
    gap: var(--nx-space-10);
    margin: 0;
    padding: var(--nx-space-4) 0;
    list-style: none;
  }
  .nx-curved-timeline-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1fr);
    align-items: center;
    transition: --nx-reach 450ms var(--nx-ease-out);
  }
  .nx-curved-timeline-dot {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    inline-size: 1rem;
    block-size: 1rem;
    border: 2px solid color-mix(in oklab, var(--nx-accent) calc(var(--nx-reach) * 100%), var(--nx-border-strong));
    border-radius: 50%;
    background: color-mix(in oklab, var(--nx-accent) calc(var(--nx-reach) * 100%), var(--nx-surface));
    box-shadow: 0 0 0 calc(var(--nx-reach) * 5px) var(--nx-accent-soft);
    scale: calc(0.8 + var(--nx-reach) * 0.2);
  }
  .nx-curved-timeline-card {
    grid-row: 1;
    display: grid;
    gap: var(--nx-space-1);
    inline-size: 100%;
    max-inline-size: 22rem;
    padding: var(--nx-space-4) var(--nx-space-5);
    border: 1px solid color-mix(in oklab, var(--nx-accent) calc(var(--nx-reach) * 32%), var(--nx-border));
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-sm), inset 0 1px 0 var(--nx-highlight);
  }
  .nx-curved-timeline-item[data-side=start] .nx-curved-timeline-card {
    grid-column: 1;
    justify-self: end;
    text-align: end;
  }
  .nx-curved-timeline-item[data-side=end] .nx-curved-timeline-card {
    grid-column: 3;
    justify-self: start;
  }
  .nx-curved-timeline-date {
    margin: 0;
    color: var(--nx-accent-text);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    letter-spacing: var(--nx-tracking-wide);
  }
  .nx-curved-timeline-title {
    margin: 0;
    font: 650 var(--nx-text-md) / 1.35 var(--nx-font-display);
  }
  .nx-curved-timeline-text {
    margin: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    line-height: 1.55;
  }
  .nx-curved-timeline-card {
    transition: opacity var(--nx-dur-slower) var(--nx-ease-out), translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
  }
  :where(.nx-js) .nx-curved-timeline-item[data-nx-reveal]:not([data-nx-revealed]) .nx-curved-timeline-card {
    opacity: 0;
    translate: 0 calc(16px * var(--nx-motion));
  }
  .nx-curved-timeline-item[data-nx-reveal] {
    opacity: 1;
    translate: none;
  }
  :where(.nx-js:not(.nx-live)) .nx-curved-timeline-item[data-nx-reveal]:not([data-nx-revealed]) .nx-curved-timeline-card {
    animation: nx-reveal-failsafe 1ms 2.5s forwards;
  }
  @container (max-width: 40rem) {
    .nx-curved-timeline-item {
      grid-template-columns: 2.25rem minmax(0, 1fr);
    }
    .nx-curved-timeline-dot {
      grid-column: 1;
    }
    .nx-curved-timeline-item:is([data-side=start], [data-side=end]) .nx-curved-timeline-card {
      grid-column: 2;
      justify-self: stretch;
      max-inline-size: none;
      text-align: start;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
      .nx-curved-timeline {
        view-timeline: --nx-curve block;
      }
      .nx-curved-timeline[data-nx-curved] .nx-curved-timeline-draw {
        animation: nx-curve-draw linear both;
        animation-timeline: --nx-curve;
        animation-range: cover 40vh cover calc(100% - 60vh);
      }
      .nx-curved-timeline[data-nx-curved] .nx-curved-timeline-item {
        animation: nx-curve-reach linear both;
        animation-timeline: --nx-curve;
        animation-range: cover calc(40vh + var(--nx-at, 0) * (100% - 100vh) - 1.5vh) cover calc(40vh + var(--nx-at, 0) * (100% - 100vh) + 1.5vh);
      }
    }
  }
  @keyframes nx-curve-draw {
    from {
      stroke-dashoffset: 1;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
  @keyframes nx-curve-reach {
    from {
      --nx-reach: 0;
    }
    to {
      --nx-reach: 1;
    }
  }
  .nx-usage-card {
    --_pad: var(--nx-space-5);
    display: grid;
    gap: var(--nx-space-4);
    min-inline-size: 0;
    padding: var(--_pad);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-2xl);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-md), inset 0 1px 0 var(--nx-highlight);
  }
  .nx-usage-card[data-nx-reveal] {
    opacity: 1;
    translate: none;
  }
  .nx-usage-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-3);
  }
  .nx-usage-card-title {
    margin: 0;
    font: 650 var(--nx-text-md) / 1.3 var(--nx-font-display);
  }
  .nx-usage-card-count {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nx-space-1) var(--nx-space-3);
    margin: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    .nx-number {
      color: var(--nx-text);
      font-size: var(--nx-text-2xl);
      font-weight: 700;
      font-variant-numeric: normal;
    }
  }
  .nx-usage-card-percent {
    color: var(--nx-text-muted);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    &[data-level=warning] {
      color: var(--nx-warning-text);
    }
    &[data-level=danger] {
      color: var(--nx-danger-text);
    }
  }
  .nx-usage-card-bar {
    display: flex;
    gap: 2px;
    block-size: 0.875rem;
    border-radius: var(--nx-radius-full);
    overflow: clip;
  }
  .nx-usage-card-segment,
  .nx-usage-card-free {
    flex: var(--nx-share, 0) 1 0;
    min-inline-size: 0;
  }
  .nx-usage-card-segment {
    background:
      linear-gradient(
        to bottom,
        rgb(255 255 255 / 0.22),
        transparent 70%),
      var(--nx-series, var(--nx-chart-1));
    scale: 1 1;
    transform-origin: left center;
    transition: scale var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    transition-delay: calc(var(--nx-i, 0) * 80ms + 150ms);
  }
  :where([dir=rtl]) .nx-usage-card-segment {
    transform-origin: right center;
  }
  .nx-usage-card-free {
    background: var(--nx-surface-3);
  }
  :where(.nx-js) .nx-usage-card[data-nx-reveal]:not([data-nx-revealed]) .nx-usage-card-segment {
    scale: 0 1;
  }
  .nx-usage-card-legend {
    display: grid;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-usage-card-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--nx-space-3);
    padding: 0.4rem 0.5rem;
    border-radius: calc(var(--nx-radius-2xl) - var(--_pad));
    font-size: var(--nx-text-sm);
    transition:
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      opacity var(--nx-dur-slow) var(--nx-ease-out),
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    transition-delay:
      0ms,
      calc(var(--nx-i, 0) * 55ms + 200ms),
      calc(var(--nx-i, 0) * 55ms + 200ms);
    &:hover {
      background: var(--nx-surface-2);
    }
  }
  :where(.nx-js) .nx-usage-card[data-nx-reveal]:not([data-nx-revealed]) .nx-usage-card-row {
    opacity: 0;
    translate: 0 calc(6px * var(--nx-motion));
  }
  :where(.nx-js:not(.nx-live)) .nx-usage-card[data-nx-reveal]:not([data-nx-revealed]) .nx-usage-card-row {
    animation: nx-reveal-failsafe 1ms 2.5s forwards;
  }
  .nx-usage-card-swatch {
    inline-size: 0.625rem;
    block-size: 0.625rem;
    border-radius: 2px;
    background: var(--nx-series, var(--nx-chart-1));
  }
  .nx-usage-card-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-usage-card-value {
    color: var(--nx-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .nx-usage-card-share {
    min-inline-size: 3ch;
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    font-variant-numeric: tabular-nums;
    text-align: end;
  }
  .nx-usage-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-3);
    padding-block-start: var(--nx-space-4);
    border-block-start: 1px solid var(--nx-border);
  }
  .nx-usage-card-note {
    margin: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
  }
  .nx-usage-card-note[data-level=danger] {
    color: var(--nx-danger-text);
  }
  .nx-usage-card-note[data-level=warning] {
    color: var(--nx-warning-text);
  }
  .nx-comparison {
    --_accent-line: color-mix(in oklab, var(--nx-accent) 70%, transparent);
    --_glow: color-mix(in oklab, var(--nx-accent) 40%, transparent);
    min-inline-size: 0;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-2xl);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-sm), inset 0 1px 0 var(--nx-highlight);
  }
  .nx-comparison[data-nx-reveal] {
    opacity: 1;
    translate: none;
  }
  .nx-comparison-scroll {
    padding: var(--nx-space-5) var(--nx-space-2) var(--nx-space-3);
    border-radius: inherit;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-comparison-table {
    inline-size: 100%;
    min-inline-size: 38rem;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--nx-text-sm);
    th,
    td {
      padding: 0.8rem 1rem;
      border-block-end: 1px solid var(--nx-border);
      text-align: center;
      vertical-align: middle;
    }
    tbody tr:last-child > * {
      border-block-end: 0;
    }
  }
  .nx-comparison-corner,
  .nx-comparison-feature,
  .nx-comparison-group > th {
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    background: var(--nx-surface);
    text-align: start !important;
  }
  .nx-comparison-corner {
    vertical-align: bottom !important;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    letter-spacing: var(--nx-tracking-wide);
  }
  .nx-comparison-feature {
    min-inline-size: 11rem;
    color: var(--nx-text);
    font-weight: 500;
  }
  .nx-comparison-feature-hint {
    display: block;
    margin-block-start: 0.1rem;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    font-weight: 400;
  }
  .nx-comparison-group > th {
    padding-block: 1.1rem 0.5rem;
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nx-tracking-wider);
    text-transform: uppercase;
  }
  .nx-comparison-plan {
    min-inline-size: 9rem;
    padding-block: 1.25rem 1rem !important;
    vertical-align: top !important;
  }
  .nx-comparison-plan-inner {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
  }
  .nx-comparison-flag {
    margin-block-end: 0.15rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-gradient-brand);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--nx-tracking-wide);
    box-shadow: var(--nx-shadow-glow);
    white-space: nowrap;
  }
  .nx-comparison-plan-name {
    font: 650 var(--nx-text-lg) / 1.2 var(--nx-font-display);
  }
  .nx-comparison-price {
    color: var(--nx-text);
    font: 700 var(--nx-text-2xl) / 1.1 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tight);
  }
  .nx-comparison-price small {
    margin-inline-start: 0.15rem;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    font-weight: 500;
  }
  .nx-comparison-plan-description {
    max-inline-size: 14rem;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    font-weight: 400;
    line-height: 1.45;
  }
  .nx-comparison-plan .nx-button {
    margin-block-start: 0.4rem;
  }
  .nx-comparison-table [data-featured] {
    position: relative;
    z-index: 1;
    background: color-mix(in oklab, var(--nx-accent) 5%, var(--nx-surface));
    box-shadow:
      inset 1.5px 0 0 var(--_accent-line),
      inset -1.5px 0 0 var(--_accent-line),
      -14px 0 22px -18px var(--_glow),
      14px 0 22px -18px var(--_glow);
  }
  .nx-comparison-table thead [data-featured] {
    border-start-start-radius: var(--nx-radius-lg);
    border-start-end-radius: var(--nx-radius-lg);
    box-shadow:
      inset 1.5px 0 0 var(--_accent-line),
      inset -1.5px 0 0 var(--_accent-line),
      inset 0 1.5px 0 var(--_accent-line),
      -14px 0 22px -18px var(--_glow),
      14px 0 22px -18px var(--_glow),
      0 -12px 24px -18px var(--_glow);
  }
  .nx-comparison-table tbody tr:last-child [data-featured] {
    border-end-start-radius: var(--nx-radius-lg);
    border-end-end-radius: var(--nx-radius-lg);
    box-shadow:
      inset 1.5px 0 0 var(--_accent-line),
      inset -1.5px 0 0 var(--_accent-line),
      inset 0 -1.5px 0 var(--_accent-line),
      -14px 0 22px -18px var(--_glow),
      14px 0 22px -18px var(--_glow),
      0 12px 24px -18px var(--_glow);
  }
  .nx-comparison-mark {
    display: inline-grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: 50%;
    vertical-align: middle;
    transition:
      opacity 300ms var(--nx-ease-emphasized),
      scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy),
      filter 300ms var(--nx-ease-emphasized);
    transition-delay: calc(min(var(--nx-i, 0), 14) * 40ms + var(--nx-j, 0) * 30ms);
    svg {
      inline-size: 0.875rem;
      block-size: 0.875rem;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    &[data-value=yes] {
      background: var(--nx-success-soft);
      color: var(--nx-success-text);
    }
    &[data-value=no] {
      color: var(--nx-text-subtle);
    }
    &[data-value=no] svg {
      inline-size: 0.75rem;
      block-size: 0.75rem;
      stroke-width: 2;
    }
  }
  [data-featured] .nx-comparison-mark[data-value=yes] {
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
  }
  .nx-comparison-text {
    color: var(--nx-text);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    transition: opacity 300ms var(--nx-ease-out);
    transition-delay: calc(min(var(--nx-i, 0), 14) * 40ms + var(--nx-j, 0) * 30ms);
  }
  :where(.nx-js) .nx-comparison[data-nx-reveal]:not([data-nx-revealed]) {
    .nx-comparison-mark {
      opacity: 0;
      scale: 0.95;
      filter: blur(4px);
    }
    .nx-comparison-text {
      opacity: 0;
    }
  }
  :where(.nx-js:not(.nx-live)) .nx-comparison[data-nx-reveal]:not([data-nx-revealed]) :is(.nx-comparison-mark, .nx-comparison-text) {
    animation: nx-reveal-failsafe 1ms 2.5s forwards;
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-multiselect-option {
      animation: none;
    }
    .nx-status-badge[data-status=running] .nx-status-badge-ring {
      animation-duration: 3s;
    }
    .nx-status-badge[data-status=running] .nx-status-badge-dot,
    .nx-status-badge[data-status=queued] .nx-status-badge-dots > i,
    .nx-status-badge[data-changed],
    .nx-agent-card-status > i {
      animation: none;
    }
    .nx-status-badge[data-status=queued] .nx-status-badge-dots > i {
      opacity: 0.75;
    }
    .nx-branch[data-nx-connected] .nx-branch-link .nx-branch-pulse,
    .nx-branch[data-nx-connected] .nx-branch-node .nx-branch-icon::after {
      animation: none;
      opacity: 0;
    }
    .nx-heatmap-cell,
    .nx-dot-matrix-dot {
      transition-delay: 0ms;
    }
  }
  @media (forced-colors: active) {
    .nx-usage-card-segment,
    .nx-agent-card-fill,
    .nx-analytics-card-fill {
      forced-color-adjust: none;
    }
    .nx-comparison-table [data-featured] {
      outline: 2px solid Highlight;
      outline-offset: -2px;
    }
  }
}

/* src/css/blocks/menus.css */
@layer nx.components {
  .nx-fold-menu {
    position: relative;
    display: inline-flex;
  }
  .nx-fold-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-3);
    min-block-size: 2.5rem;
    padding-inline: var(--nx-space-4) var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    color: var(--nx-text);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    box-shadow: var(--nx-shadow-sm), inset 0 1px 0 var(--nx-highlight);
    cursor: pointer;
    transition-property:
      scale,
      background-color,
      border-color;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out);
    &:hover {
      background: var(--nx-surface-2);
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &[aria-expanded=true] {
      border-color: var(--nx-accent-border);
    }
  }
  .nx-fold-menu-burger {
    display: grid;
    gap: 4px;
    inline-size: 1rem;
    > i {
      display: block;
      block-size: 2px;
      border-radius: 1px;
      background: currentColor;
      transition-property: translate, rotate;
      transition-duration: var(--nx-spring-snappy-duration);
      transition-timing-function: var(--nx-spring-snappy);
    }
  }
  [aria-expanded=true] > .nx-fold-menu-burger > i:first-child {
    translate: 0 3px;
    rotate: 45deg;
  }
  [aria-expanded=true] > .nx-fold-menu-burger > i:last-child {
    translate: 0 -3px;
    rotate: -45deg;
  }
  .nx-fold-menu-panel {
    --_n: 3;
    --_open-step: 60ms;
    --_close-step: 35ms;
    --_close: 190ms;
    position: fixed;
    inset: auto;
    z-index: var(--nx-z-dropdown);
    inline-size: min(var(--nx-fold-width, 19rem), calc(100vw - 1rem));
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--nx-text);
    overflow: visible;
    perspective: 1100px;
    perspective-origin: 50% 0;
    transition: display calc((var(--_n) - 1) * var(--_close-step) + var(--_close) + 40ms) allow-discrete, overlay calc((var(--_n) - 1) * var(--_close-step) + var(--_close) + 40ms) allow-discrete;
  }
  .nx-fold-menu-panel:not([popover]):not([data-open]) {
    display: none;
  }
  .nx-fold-menu-fold {
    position: relative;
    transform-origin: 50% 0;
    transform-style: preserve-3d;
    transform: rotateX(calc(-92deg * var(--nx-motion)));
    transition: transform var(--nx-fold-close, var(--_close)) var(--nx-ease-in);
    transition-delay: calc((var(--_n) - 1 - var(--nx-i, 0)) * var(--_close-step));
    > .nx-fold-menu-fold {
      position: absolute;
      inset-block-start: 100%;
      inset-inline: 0;
    }
  }
  .nx-fold-menu-panel:where(:popover-open, [data-open]) .nx-fold-menu-fold {
    transform: rotateX(0deg);
    transition: transform var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    transition-delay: calc(var(--nx-i, 0) * var(--_open-step));
    @starting-style {
      transform: rotateX(calc(-92deg * var(--nx-motion)));
    }
  }
  .nx-fold-menu-face {
    position: relative;
    display: grid;
    gap: var(--nx-space-1);
    padding: var(--nx-space-2) var(--nx-space-3) var(--nx-space-3);
    border-inline: 1px solid var(--nx-border);
    background: var(--nx-surface);
    box-shadow: inset 0 1px 0 var(--nx-border);
    backface-visibility: hidden;
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        linear-gradient(
          to bottom,
          rgb(0 0 0 / 0.05),
          rgb(0 0 0 / 0.34));
      pointer-events: none;
      opacity: var(--nx-motion);
      transition: opacity var(--nx-fold-close, var(--_close)) var(--nx-ease-in);
      transition-delay: calc((var(--_n) - 1 - var(--nx-i, 0)) * var(--_close-step));
    }
  }
  .nx-fold-menu-panel:where(:popover-open, [data-open]) .nx-fold-menu-face::after {
    opacity: 0;
    transition: opacity var(--nx-dur-slow) var(--nx-ease-out);
    transition-delay: calc(var(--nx-i, 0) * var(--_open-step) + 60ms);
    @starting-style {
      opacity: var(--nx-motion);
    }
  }
  .nx-fold-menu-fold[data-first] > .nx-fold-menu-face {
    padding-block-start: var(--nx-space-3);
    border-block-start: 1px solid var(--nx-border);
    border-start-start-radius: var(--nx-radius-xl);
    border-start-end-radius: var(--nx-radius-xl);
    box-shadow: inset 0 1px 0 var(--nx-highlight);
  }
  .nx-fold-menu-fold[data-last] > .nx-fold-menu-face {
    border-block-end: 1px solid var(--nx-border);
    border-end-start-radius: var(--nx-radius-xl);
    border-end-end-radius: var(--nx-radius-xl);
    box-shadow: inset 0 1px 0 var(--nx-border), var(--nx-shadow-xl);
  }
  .nx-fold-menu-fold[data-first][data-last] > .nx-fold-menu-face {
    box-shadow: var(--nx-shadow-xl), inset 0 1px 0 var(--nx-highlight);
  }
  .nx-fold-menu-title {
    margin: 0;
    padding: var(--nx-space-1) var(--nx-space-2) 0;
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    letter-spacing: var(--nx-tracking-wide);
  }
  .nx-fold-menu-links {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-fold-menu-link {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    inline-size: 100%;
    min-block-size: 2.5rem;
    padding: var(--nx-space-1) var(--nx-space-2);
    border: 0;
    border-radius: var(--nx-radius-md);
    background: transparent;
    color: var(--nx-text);
    font: 500 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    opacity: 0;
    translate: 0 calc(8px * var(--nx-motion));
    transition-property:
      opacity,
      translate,
      background-color;
    transition-duration:
      120ms,
      120ms,
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-ease-in),
      var(--nx-ease-in),
      var(--nx-ease-out);
    &:hover {
      background: var(--nx-surface-2);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: -2px;
      background: var(--nx-surface-2);
    }
    &[aria-current=page] {
      color: var(--nx-accent-text);
      font-weight: 600;
    }
    &[aria-current=page]::after {
      content: "";
      inline-size: 0.375rem;
      block-size: 0.375rem;
      margin-inline-start: auto;
      border-radius: 50%;
      background: var(--nx-accent);
    }
  }
  .nx-fold-menu-panel:where(:popover-open, [data-open]) .nx-fold-menu-link {
    opacity: 1;
    translate: 0 0;
    transition-duration:
      var(--nx-dur-base),
      var(--nx-spring-gentle-duration),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-spring-gentle),
      var(--nx-ease-out);
    transition-delay:
      calc(var(--nx-i, 0) * var(--_open-step) + 140ms + var(--nx-j, 0) * 30ms),
      calc(var(--nx-i, 0) * var(--_open-step) + 140ms + var(--nx-j, 0) * 30ms),
      0s;
    @starting-style {
      opacity: 0;
      translate: 0 calc(8px * var(--nx-motion));
    }
  }
  .nx-fold-menu-icon {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2rem;
    block-size: 2rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    background: var(--nx-surface);
    color: var(--nx-accent-text);
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  .nx-fold-menu-text {
    display: grid;
    gap: 0.1rem;
    min-inline-size: 0;
  }
  .nx-fold-menu-description {
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    font-weight: 400;
  }
  .nx-dock-panels {
    --_item: 2.75rem;
    --_gap: 0.375rem;
    --_pad: 0.5rem;
    --_bar-w: calc(var(--_n, 4) * var(--_item) + (var(--_n, 4) - 1) * var(--_gap) + 2 * var(--_pad));
    --_bar-h: calc(var(--_item) + 2 * var(--_pad));
    position: relative;
    isolation: isolate;
    display: inline-flex;
    justify-content: center;
    min-inline-size: var(--_bar-w);
    &[data-state=open] {
      z-index: var(--nx-z-dropdown);
    }
  }
  .nx-dock-panels-bar {
    position: relative;
    z-index: 1;
    display: flex;
    gap: var(--_gap);
    padding: var(--_pad);
  }
  .nx-dock-panels-item {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: var(--_item);
    block-size: var(--_item);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--nx-text-muted);
    cursor: pointer;
    transition-property:
      scale,
      background-color,
      color,
      box-shadow;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-dur-base);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-ease-out);
    .nx-icon {
      inline-size: 1.25rem;
      block-size: 1.25rem;
    }
    &:hover {
      background: color-mix(in oklab, var(--nx-text) 7%, transparent);
      color: var(--nx-text);
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &[aria-expanded=true] {
      background: var(--nx-surface);
      color: var(--nx-accent-text);
      box-shadow: var(--nx-shadow-sm), inset 0 1px 0 var(--nx-highlight);
    }
  }
  .nx-dock-panels-tip {
    position: absolute;
    inset-block-end: calc(100% + 0.75rem);
    padding: 0.25rem 0.55rem;
    border-radius: var(--nx-radius-sm);
    background: var(--nx-surface-inverse);
    color: var(--nx-text-inverse);
    font: 500 var(--nx-text-xs) / 1.4 var(--nx-font-sans);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    translate: 0 calc(4px * var(--nx-motion));
    transition-property: opacity, translate;
    transition-duration: var(--nx-dur-fast), var(--nx-spring-snappy-duration);
    transition-timing-function: var(--nx-ease-out), var(--nx-spring-snappy);
  }
  .nx-dock-panels[data-state=closed] .nx-dock-panels-item:is(:hover, :focus-visible) .nx-dock-panels-tip {
    opacity: 1;
    translate: 0 0;
  }
  .nx-dock-panels-shell {
    position: absolute;
    z-index: 0;
    inset-block-end: 0;
    left: 50%;
    inline-size: var(--nx-morph-w, var(--_bar-w));
    block-size: var(--nx-morph-h, var(--_bar-h));
    translate: -50% 0;
    border-radius: calc(var(--_bar-h) / 2);
    background: var(--nx-glass);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow:
      var(--nx-shadow-lg),
      inset 0 0 0 1px var(--nx-glass-border),
      inset 0 1px 0 var(--nx-highlight);
    overflow: clip;
    transition-property:
      inline-size,
      block-size,
      border-radius,
      box-shadow;
    transition-duration:
      var(--nx-spring-gentle-duration),
      var(--nx-spring-gentle-duration),
      var(--nx-spring-gentle-duration),
      var(--nx-dur-slow);
    transition-timing-function:
      var(--nx-spring-gentle),
      var(--nx-spring-gentle),
      var(--nx-spring-gentle),
      var(--nx-ease-out);
    &:is(:not([data-nx-morph]), [data-nx-morph=init]) {
      transition: none;
    }
  }
  .nx-dock-panels[data-state=open] .nx-dock-panels-shell {
    border-radius: var(--nx-radius-2xl);
    box-shadow:
      var(--nx-shadow-xl),
      inset 0 0 0 1px var(--nx-glass-border),
      inset 0 1px 0 var(--nx-highlight);
  }
  .nx-dock-panels-measure {
    position: absolute;
    inset-block-end: 0;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    inline-size: max-content;
    translate: -50% 0;
  }
  .nx-dock-panels-view {
    position: relative;
    display: grid;
    justify-items: center;
  }
  .nx-dock-panels-spacer {
    flex: none;
    inline-size: var(--_bar-w);
    block-size: var(--_bar-h);
  }
  .nx-dock-panels-content {
    inline-size: min(var(--nx-dock-panel-width, 20rem), calc(100vw - 2rem));
    padding: var(--nx-space-5) var(--nx-space-5) var(--nx-space-2);
    color: var(--nx-text);
    transition-property:
      opacity,
      filter,
      visibility;
    transition-duration:
      var(--nx-dur-base),
      var(--nx-dur-base),
      0s;
    transition-timing-function: var(--nx-ease-out);
    transition-delay:
      90ms,
      90ms,
      0s;
    &:not([data-active]) {
      position: absolute;
      inset-block-end: 0;
      left: 50%;
      translate: -50% 0;
      opacity: 0;
      filter: blur(calc(2px * var(--nx-motion)));
      visibility: hidden;
      pointer-events: none;
      transition-duration:
        var(--nx-dur-fast),
        var(--nx-dur-fast),
        0s;
      transition-timing-function: var(--nx-ease-in);
      transition-delay:
        0s,
        0s,
        var(--nx-dur-fast);
    }
  }
  .nx-dock-panels-heading {
    margin: 0 0 var(--nx-space-2);
    font: 650 var(--nx-text-md) / 1.3 var(--nx-font-display);
  }
  .nx-morph-menu {
    --_h: 2.5rem;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    inline-size: var(--nx-morph-w, auto);
    block-size: var(--nx-morph-h, var(--_h));
    &[data-state=open] {
      z-index: var(--nx-z-dropdown);
    }
  }
  .nx-morph-menu-shell {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: var(--nx-morph-w, auto);
    block-size: var(--nx-morph-h, auto);
    border-radius: calc(var(--_h) / 2);
    background: var(--nx-surface);
    box-shadow:
      0 0 0 1px var(--nx-border),
      var(--nx-shadow-sm),
      inset 0 1px 0 var(--nx-highlight);
    overflow: clip;
    transition-property:
      inline-size,
      block-size,
      border-radius,
      box-shadow,
      scale;
    transition-duration:
      var(--nx-spring-gentle-duration),
      var(--nx-spring-gentle-duration),
      var(--nx-spring-gentle-duration),
      var(--nx-dur-slow),
      var(--nx-spring-snappy-duration);
    transition-timing-function:
      var(--nx-spring-gentle),
      var(--nx-spring-gentle),
      var(--nx-spring-gentle),
      var(--nx-ease-out),
      var(--nx-spring-snappy);
    &:is(:not([data-nx-morph]), [data-nx-morph=init]) {
      transition: none;
    }
    &:has(.nx-morph-menu-trigger:focus-visible) {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-morph-menu:not([data-nx-morph]) .nx-morph-menu-shell {
    position: relative;
  }
  .nx-morph-menu[data-side=top] .nx-morph-menu-shell {
    inset-block: auto 0;
    .nx-morph-menu-measure {
      flex-direction: column-reverse;
    }
  }
  .nx-morph-menu[data-state=open] .nx-morph-menu-shell {
    border-radius: var(--nx-radius-lg);
    box-shadow:
      0 0 0 1px var(--nx-border),
      var(--nx-shadow-xl),
      inset 0 1px 0 var(--nx-highlight);
  }
  .nx-morph-menu[data-state=closed] .nx-morph-menu-shell:has(.nx-morph-menu-trigger:active):not([data-static]) {
    scale: calc(1 - 0.04 * var(--nx-motion));
  }
  .nx-morph-menu-measure {
    position: relative;
    display: flex;
    flex-direction: column;
    inline-size: max-content;
  }
  .nx-morph-menu-trigger {
    display: flex;
    align-self: flex-start;
    align-items: center;
    gap: var(--nx-space-2);
    block-size: var(--_h);
    padding-inline: var(--nx-space-4) var(--nx-space-3);
    border: 0;
    background: transparent;
    color: var(--nx-text);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--nx-dur-fast) var(--nx-ease-out);
    &[aria-expanded=false]:hover {
      background: color-mix(in oklab, var(--nx-text) 5%, transparent);
    }
    &:focus-visible {
      outline: none;
    }
    > .nx-icon {
      color: var(--nx-text-subtle);
    }
  }
  .nx-morph-menu-chevron {
    display: inline-flex;
    margin-inline-start: auto;
    color: var(--nx-text-subtle);
    transition: rotate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  [aria-expanded=true] > .nx-morph-menu-chevron {
    rotate: 180deg;
  }
  .nx-morph-menu-count {
    display: inline-grid;
    grid-template-columns: 0fr;
    opacity: 0;
    scale: 0.95;
    transition-property:
      grid-template-columns,
      opacity,
      scale;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-spring-bouncy-duration);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-spring-bouncy);
    > span {
      min-inline-size: 0;
      overflow: clip;
    }
    &[data-active] {
      grid-template-columns: 1fr;
      opacity: 1;
      scale: 1;
    }
  }
  .nx-morph-menu-badge {
    display: inline-flex;
    align-items: center;
    min-inline-size: 1.25rem;
    block-size: 1.25rem;
    padding-inline: 0.375rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
    font: 700 var(--nx-text-xs) / 1 var(--nx-font-sans);
    justify-content: center;
    .nx-number {
      line-height: 1;
    }
  }
  .nx-morph-menu-list {
    display: grid;
    gap: 2px;
    padding: var(--nx-space-1);
    border-block-start: 1px solid var(--nx-border);
    transition: opacity var(--nx-dur-fast) var(--nx-ease-in), visibility 0s var(--nx-dur-fast);
    .nx-morph-menu[data-side=top] & {
      border-block: 0 1px solid var(--nx-border);
    }
  }
  .nx-morph-menu[data-state=closed] .nx-morph-menu-list {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .nx-morph-menu[data-state=closed][data-side=top] .nx-morph-menu-list {
    inset-block: auto 100%;
  }
  .nx-morph-menu[data-state=open] .nx-morph-menu-list {
    transition: opacity var(--nx-dur-base) var(--nx-ease-out), visibility 0s;
  }
  .nx-morph-menu-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    min-block-size: 2.375rem;
    padding: 0 var(--nx-space-2) 0 var(--nx-space-3);
    border-radius: var(--nx-radius-sm);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    opacity: 0;
    translate: 0 calc(-4px * var(--nx-motion));
    transition-property:
      opacity,
      translate,
      background-color,
      color;
    transition-duration:
      100ms,
      100ms,
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-ease-in),
      var(--nx-ease-in),
      var(--nx-ease-out),
      var(--nx-ease-out);
    > .nx-icon {
      color: var(--nx-text-subtle);
    }
    &:hover {
      background: var(--nx-surface-2);
      color: var(--nx-text);
    }
    &:has(:focus-visible) {
      outline: 2px solid var(--nx-ring);
      outline-offset: -2px;
      background: var(--nx-surface-2);
    }
    &:has(:checked) {
      color: var(--nx-text);
      font-weight: 500;
    }
    &:has(:checked) > .nx-icon {
      color: var(--nx-accent-text);
    }
    &:has(:disabled) {
      opacity: 0.45;
      cursor: not-allowed;
    }
  }
  .nx-morph-menu[data-state=open] .nx-morph-menu-option {
    opacity: 1;
    translate: 0 0;
    transition-duration:
      var(--nx-dur-base),
      var(--nx-spring-gentle-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-spring-gentle),
      var(--nx-ease-out),
      var(--nx-ease-out);
    transition-delay:
      calc(80ms + var(--nx-i, 0) * 35ms),
      calc(80ms + var(--nx-i, 0) * 35ms),
      0s,
      0s;
  }
  .nx-morph-menu-input {
    appearance: none;
    position: absolute;
    inset: 0;
    margin: 0;
    border-radius: inherit;
    opacity: 0;
    cursor: inherit;
  }
  .nx-morph-menu-check {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    margin-inline-start: auto;
    border: 1.5px solid var(--nx-border-strong);
    border-radius: 6px;
    color: var(--nx-accent-contrast);
    transition-property:
      background-color,
      border-color,
      scale;
    transition-duration:
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-spring-bouncy-duration);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-bouncy);
    svg {
      inline-size: 0.8rem;
      block-size: 0.8rem;
      fill: none;
      stroke: currentColor;
      stroke-width: 3.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      overflow: visible;
    }
    path {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      transition: stroke-dashoffset 120ms var(--nx-ease-in);
    }
  }
  .nx-morph-menu-option:has(:checked) .nx-morph-menu-check {
    border-color: var(--nx-accent);
    background: var(--nx-accent);
    path {
      stroke-dashoffset: 0;
      transition: stroke-dashoffset 280ms var(--nx-ease-out) 40ms;
    }
  }
  .nx-morph-menu-option:active:has(:not(:disabled)) .nx-morph-menu-check {
    scale: calc(1 - 0.04 * var(--nx-motion));
  }
  .nx-morph-menu-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--nx-space-3);
    padding: var(--nx-space-2) var(--nx-space-3) var(--nx-space-2) var(--nx-space-4);
    border-block-start: 1px solid var(--nx-border);
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    .nx-morph-menu[data-state=closed] & {
      display: none;
    }
  }
  .nx-morph-menu-clear {
    padding: 0.25rem 0.5rem;
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: transparent;
    color: var(--nx-accent-text);
    font: 600 var(--nx-text-xs) / 1.3 var(--nx-font-sans);
    cursor: pointer;
    transition-property:
      scale,
      background-color,
      opacity;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out);
    &:hover {
      background: var(--nx-accent-soft);
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: -2px;
    }
    &:disabled {
      opacity: 0.4;
      cursor: default;
      background: transparent;
    }
  }
  .nx-stacked-accordion {
    --_overlap: 0.75rem;
    display: grid;
    isolation: isolate;
    padding-block-end: var(--nx-space-1);
  }
  .nx-stacked-accordion-item {
    --_depth: min(calc(var(--_n, 1) - 1 - var(--_i, 0)), 4);
    --_scale: calc(1 - var(--_depth) * 0.03 * var(--nx-motion));
    --_press: 1;
    position: relative;
    z-index: var(--_i, 0);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    box-shadow: 0 -1px 0 var(--nx-highlight), var(--nx-shadow-md);
    transform-origin: 50% 0;
    scale: calc(var(--_scale) * var(--_press));
    transition-property:
      margin-block-start,
      scale,
      box-shadow,
      border-color;
    transition-duration:
      var(--nx-spring-gentle-duration),
      var(--nx-spring-snappy-duration),
      var(--nx-dur-slow),
      var(--nx-dur-base);
    transition-timing-function:
      var(--nx-spring-gentle),
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out);
    &::after {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: inherit;
      background: rgb(0 0 0 / calc(var(--_depth) * 0.035));
      pointer-events: none;
      transition: opacity var(--nx-dur-slow) var(--nx-ease-out);
    }
    & + & {
      margin-block-start: calc(var(--_overlap) * -1);
    }
    &:has(> .nx-stacked-accordion-heading > .nx-stacked-accordion-trigger:active:not([data-static], :disabled)) {
      --_press: calc(1 - 0.04 * var(--nx-motion));
    }
    &[data-state=open] {
      border-color: var(--nx-border-strong);
      box-shadow: 0 -1px 0 var(--nx-highlight), var(--nx-shadow-lg);
    }
  }
  .nx-stacked-accordion[data-open] .nx-stacked-accordion-item {
    --_scale: 1;
    &::after {
      opacity: 0;
    }
    & + .nx-stacked-accordion-item {
      margin-block-start: var(--nx-space-2);
    }
  }
  .nx-stacked-accordion-heading {
    margin: 0;
    font: inherit;
  }
  .nx-stacked-accordion-trigger {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    inline-size: 100%;
    min-block-size: 3.5rem;
    padding: var(--nx-space-3) var(--nx-space-4);
    border: 0;
    border-radius: calc(var(--nx-radius-xl) - 1px);
    background: transparent;
    color: var(--nx-text);
    font: 600 var(--nx-text-md) / 1.3 var(--nx-font-sans);
    text-align: start;
    cursor: pointer;
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:disabled {
      cursor: not-allowed;
      opacity: 0.55;
    }
  }
  .nx-stacked-accordion-icon {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--nx-radius-md);
    background: var(--nx-accent-soft);
    color: var(--nx-accent-text);
    transition: scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
    .nx-icon {
      inline-size: 1.1rem;
      block-size: 1.1rem;
    }
  }
  [data-state=open] > .nx-stacked-accordion-heading .nx-stacked-accordion-icon {
    scale: calc(1 + 0.06 * var(--nx-motion));
  }
  .nx-stacked-accordion-text {
    display: grid;
    gap: 0.1rem;
    min-inline-size: 0;
  }
  .nx-stacked-accordion-subtitle {
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    font-weight: 500;
  }
  .nx-stacked-accordion-chevron {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    margin-inline-start: auto;
    border-radius: 50%;
    background: var(--nx-surface-2);
    color: var(--nx-text-subtle);
    transition-property:
      rotate,
      background-color,
      color;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out);
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  [aria-expanded=true] > .nx-stacked-accordion-chevron {
    rotate: 180deg;
    background: var(--nx-accent-soft);
    color: var(--nx-accent-text);
  }
  .nx-stacked-accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows var(--nx-spring-soft-duration) var(--nx-spring-soft), visibility 0s linear var(--nx-spring-soft-duration);
  }
  [data-state=open] > .nx-stacked-accordion-panel {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows var(--nx-spring-gentle-duration) var(--nx-spring-gentle), visibility 0s;
  }
  .nx-stacked-accordion-inner {
    min-block-size: 0;
    overflow: hidden;
  }
  .nx-stacked-accordion-body {
    padding: 0 var(--nx-space-4) var(--nx-space-4);
    padding-inline-start: calc(var(--nx-space-4) + 2.25rem + var(--nx-space-3));
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    line-height: 1.7;
    opacity: 0;
    translate: 0 calc(-6px * var(--nx-motion));
    transition: opacity 120ms var(--nx-ease-in), translate 120ms var(--nx-ease-in);
    > :first-child {
      margin-block-start: 0;
    }
    > :last-child {
      margin-block-end: 0;
    }
  }
  .nx-stacked-accordion-item:not(:has(.nx-stacked-accordion-icon)) .nx-stacked-accordion-body {
    padding-inline-start: var(--nx-space-4);
  }
  [data-state=open] > .nx-stacked-accordion-panel .nx-stacked-accordion-body {
    opacity: 1;
    translate: 0 0;
    transition: opacity var(--nx-dur-slow) var(--nx-ease-out) 90ms, translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle) 90ms;
  }
  .nx-stack-menu {
    position: fixed;
    inset: auto;
    z-index: var(--nx-z-dropdown);
    display: grid;
    inline-size: min(var(--nx-stack-menu-width, 18.5rem), calc(100vw - 1rem));
    margin: 0;
    padding: 0;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-xl), inset 0 1px 0 var(--nx-highlight);
    overflow: clip;
    transform-origin: var(--nx-origin, top center);
    opacity: 0;
    scale: 0.96;
    transition:
      opacity var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      display var(--nx-dur-fast) allow-discrete,
      overlay var(--nx-dur-fast) allow-discrete;
  }
  .nx-stack-menu:where(:popover-open, [data-open]) {
    opacity: 1;
    scale: 1;
    @starting-style {
      opacity: 0;
      scale: 0.96;
    }
  }
  .nx-stack-menu:not([popover]):not([data-open]) {
    display: none;
  }
  .nx-stack-menu-search {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-2) var(--nx-space-3);
    border-block-end: 1px solid var(--nx-border);
    color: var(--nx-text-subtle);
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  .nx-stack-menu-input {
    flex: 1;
    min-inline-size: 0;
    min-block-size: 2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--nx-text);
    font: 400 var(--nx-text-sm) / 1.4 var(--nx-font-sans);
    &::placeholder {
      color: var(--nx-text-subtle);
    }
    &:focus-visible {
      outline: none;
    }
    &::-webkit-search-cancel-button {
      display: none;
    }
  }
  .nx-stack-menu-search:has(:focus-visible) {
    box-shadow: inset 0 -2px 0 var(--nx-ring);
  }
  .nx-stack-menu-viewport {
    position: relative;
    block-size: var(--nx-morph-h, auto);
    overflow: clip;
    transition: block-size var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    &:is(:not([data-nx-morph]), [data-nx-morph=init]) {
      transition: none;
    }
  }
  .nx-stack-menu-measure {
    position: relative;
  }
  .nx-stack-menu-level {
    z-index: var(--_depth, 0);
    display: grid;
    align-content: start;
    gap: 1px;
    padding: var(--nx-space-1);
    background: var(--nx-surface);
    translate: 0 0;
    opacity: 1;
    transition:
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      opacity var(--nx-dur-base) var(--nx-ease-out),
      visibility 0s;
    &[data-state=active] {
      position: relative;
    }
    &[data-state=active]:not([data-root]) {
      @starting-style {
        translate: calc(100% * var(--nx-dir) * var(--nx-motion)) 0;
        opacity: 0;
      }
    }
    &:not([data-state=active]) {
      position: absolute;
      inset-block-start: 0;
      inset-inline: 0;
      pointer-events: none;
    }
    &[data-state=behind] {
      translate: calc(-30% * var(--nx-dir) * var(--nx-motion)) 0;
      opacity: 0.35;
      visibility: hidden;
      transition:
        translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
        opacity var(--nx-dur-base) var(--nx-ease-out),
        visibility 0s linear var(--nx-spring-gentle-duration);
    }
    &[data-state=leaving] {
      translate: calc(100% * var(--nx-dir) * var(--nx-motion)) 0;
      opacity: 0;
      transition: translate 220ms var(--nx-ease-in), opacity 180ms var(--nx-ease-in);
    }
  }
  .nx-stack-menu-back {
    display: flex;
    align-items: center;
    gap: var(--nx-space-1);
    min-block-size: 2.25rem;
    padding: 0 var(--nx-space-2);
    border: 0;
    border-radius: var(--nx-radius-md);
    background: transparent;
    color: var(--nx-text-muted);
    font: 600 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
    text-align: start;
    cursor: pointer;
    transition-property:
      scale,
      background-color,
      color;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out);
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
    &:hover {
      background: var(--nx-surface-2);
      color: var(--nx-text);
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: -2px;
    }
  }
  .nx-stack-menu-list {
    display: grid;
    gap: 1px;
  }
  .nx-stack-menu-item {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    inline-size: 100%;
    min-block-size: 2.375rem;
    padding: var(--nx-space-1) var(--nx-space-3);
    border: 0;
    border-radius: var(--nx-radius-md);
    background: transparent;
    color: var(--nx-text);
    font: 400 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition-property: scale, background-color;
    transition-duration: var(--nx-spring-snappy-duration), var(--nx-dur-fast);
    transition-timing-function: var(--nx-spring-snappy), var(--nx-ease-out);
    > .nx-icon {
      flex: none;
      color: var(--nx-text-subtle);
    }
    > .nx-kbd {
      margin-inline-start: auto;
    }
    &:is(:hover, :focus-visible) {
      background: var(--nx-surface-2);
      outline: none;
    }
    &:is(:hover, :focus-visible) > .nx-icon {
      color: var(--nx-text);
    }
    &:focus-visible {
      box-shadow: inset 0 0 0 2px var(--nx-ring);
    }
    &:active:not([data-static], [aria-disabled=true]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &[aria-disabled=true] {
      opacity: 0.45;
      cursor: not-allowed;
    }
    &[data-tone=danger] {
      color: var(--nx-danger-text);
    }
  }
  .nx-stack-menu-label {
    display: grid;
    gap: 0.1rem;
    min-inline-size: 0;
  }
  .nx-stack-menu-hint {
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
  }
  .nx-stack-menu-more {
    display: inline-flex;
    margin-inline-start: auto;
    color: var(--nx-text-subtle);
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
    .nx-kbd + & {
      margin-inline-start: 0;
    }
  }
  .nx-stack-menu-trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    > span + span::before {
      content: "";
      display: inline-block;
      inline-size: 0.7rem;
      block-size: 0.7rem;
      margin-inline-end: 0.15rem;
      vertical-align: -0.05rem;
      background: currentColor;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    }
  }
  :where([dir=rtl]) .nx-stack-menu-trail > span + span::before {
    scale: -1 1;
  }
  .nx-stack-menu-results {
    display: grid;
    gap: 1px;
    padding: var(--nx-space-1);
    .nx-stack-menu-item {
      animation: nx-fade-in var(--nx-dur-fast) var(--nx-ease-out) both;
    }
  }
  .nx-stack-menu-empty {
    margin: 0;
    padding: var(--nx-space-8) var(--nx-space-4);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    text-align: center;
  }
  .nx-morph-tabs {
    display: grid;
    gap: var(--nx-space-4);
  }
  .nx-morph-tabs-rail {
    position: relative;
    isolation: isolate;
    display: flex;
    justify-content: var(--nx-morph-tabs-justify, flex-start);
  }
  .nx-morph-tabs-list {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-1);
    max-inline-size: 100%;
    padding: var(--nx-space-1);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-2);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.06), inset 0 0 0 1px var(--nx-border);
  }
  .nx-morph-tabs-pill {
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    box-shadow:
      var(--nx-shadow-sm),
      inset 0 1px 0 var(--nx-highlight),
      0 0 0 1px color-mix(in oklab, var(--nx-border) 70%, transparent);
  }
  .nx-morph-tab {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    block-size: 2.5rem;
    min-inline-size: 2.5rem;
    padding-inline: 0.7rem;
    border: 0;
    border-radius: var(--nx-radius-full);
    background: transparent;
    color: var(--nx-text-muted);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--nx-dur-base) var(--nx-ease-out);
    > :is(.nx-icon, .nx-morph-tab-label) {
      transition: scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    }
    > .nx-icon {
      inline-size: 1.15rem;
      block-size: 1.15rem;
      flex: none;
    }
    &:hover {
      color: var(--nx-text);
    }
    &[aria-selected=true] {
      color: var(--nx-text);
    }
    &[aria-selected=true] > .nx-icon {
      color: var(--nx-accent-text);
    }
    &:active:not([data-static], :disabled) > :is(.nx-icon, .nx-morph-tab-label) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
  }
  .nx-morph-tab-label {
    display: inline-block;
    inline-size: 0;
    overflow: clip;
    > span {
      display: inline-block;
      padding-inline-start: 0.45rem;
      opacity: 0;
      filter: blur(calc(4px * var(--nx-motion)));
      transition: opacity 120ms var(--nx-ease-in), filter 120ms var(--nx-ease-in);
    }
  }
  [aria-selected=true] > .nx-morph-tab-label {
    inline-size: auto;
    > span {
      opacity: 1;
      filter: none;
      transition: opacity var(--nx-dur-base) var(--nx-ease-out) 70ms, filter var(--nx-dur-slow) var(--nx-ease-out) 70ms;
    }
  }
  .nx-morph-tab-tip {
    position: absolute;
    inset-block-end: calc(100% + 0.6rem);
    left: 50%;
    padding: 0.25rem 0.55rem;
    border-radius: var(--nx-radius-sm);
    background: var(--nx-surface-inverse);
    color: var(--nx-text-inverse);
    font: 500 var(--nx-text-xs) / 1.4 var(--nx-font-sans);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    translate: -50% calc(4px * var(--nx-motion));
    transition-property: opacity, translate;
    transition-duration: var(--nx-dur-fast), var(--nx-spring-snappy-duration);
    transition-timing-function: var(--nx-ease-out), var(--nx-spring-snappy);
  }
  .nx-morph-tab:not([aria-selected=true]):is(:hover, :focus-visible) > .nx-morph-tab-tip {
    opacity: 1;
    translate: -50% 0;
    transition-delay: 250ms, 250ms;
  }
  .nx-morph-tab:not([aria-selected=true]):focus-visible > .nx-morph-tab-tip {
    transition-delay: 0s;
  }
  .nx-morph-tabs-panel {
    border-radius: var(--nx-radius-md);
    animation: nx-blur-in var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 4px;
    }
    &[hidden] {
      display: none;
    }
  }
  .nx-audio-room {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    inline-size: var(--nx-morph-w, auto);
    block-size: var(--nx-morph-h, 2.75rem);
    &[data-state=open] {
      z-index: var(--nx-z-dropdown);
    }
  }
  .nx-audio-room-shell {
    position: absolute;
    inset-block-start: 0;
    left: 50%;
    inline-size: var(--nx-morph-w, auto);
    block-size: var(--nx-morph-h, auto);
    translate: -50% 0;
    border-radius: 1.375rem;
    background: var(--nx-surface-inverse);
    color: var(--nx-text-inverse);
    box-shadow: var(--nx-shadow-md), inset 0 1px 0 color-mix(in oklab, var(--nx-text-inverse) 10%, transparent);
    overflow: clip;
    transition-property:
      inline-size,
      block-size,
      border-radius,
      box-shadow,
      scale;
    transition-duration:
      var(--nx-spring-gentle-duration),
      var(--nx-spring-gentle-duration),
      var(--nx-spring-gentle-duration),
      var(--nx-dur-slow),
      var(--nx-spring-snappy-duration);
    transition-timing-function:
      var(--nx-spring-gentle),
      var(--nx-spring-gentle),
      var(--nx-spring-gentle),
      var(--nx-ease-out),
      var(--nx-spring-snappy);
    &:is(:not([data-nx-morph]), [data-nx-morph=init]) {
      transition: none;
    }
    &:has(.nx-audio-room-pill:focus-visible) {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-audio-room:not([data-nx-morph]) .nx-audio-room-shell {
    position: relative;
    left: 0;
    translate: none;
  }
  .nx-audio-room[data-state=open] .nx-audio-room-shell {
    border-radius: var(--nx-radius-2xl);
    box-shadow: var(--nx-shadow-xl), inset 0 1px 0 color-mix(in oklab, var(--nx-text-inverse) 10%, transparent);
  }
  .nx-audio-room[data-state=closed] .nx-audio-room-shell:has(.nx-audio-room-pill:active):not([data-static]) {
    scale: calc(1 - 0.04 * var(--nx-motion));
  }
  .nx-audio-room-measure {
    position: absolute;
    inset-block-start: 0;
    left: 50%;
    display: grid;
    justify-items: center;
    inline-size: max-content;
    translate: -50% 0;
  }
  .nx-audio-room-shell:not([data-nx-morph]) > .nx-audio-room-measure {
    position: relative;
    left: 0;
    translate: none;
  }
  .nx-audio-room-pill,
  .nx-audio-room-panel {
    transition-property:
      opacity,
      filter,
      scale,
      visibility;
    transition-duration:
      var(--nx-dur-base),
      var(--nx-dur-base),
      var(--nx-spring-gentle-duration),
      0s;
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-gentle),
      linear;
    transition-delay:
      80ms,
      80ms,
      0s,
      0s;
  }
  .nx-audio-room[data-state=open] .nx-audio-room-pill,
  .nx-audio-room[data-state=closed] .nx-audio-room-panel {
    position: absolute;
    inset-block-start: 0;
    left: 50%;
    translate: -50% 0;
    opacity: 0;
    filter: blur(calc(4px * var(--nx-motion)));
    scale: 0.95;
    visibility: hidden;
    pointer-events: none;
    transition-duration:
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      0s;
    transition-timing-function: var(--nx-ease-in);
    transition-delay:
      0s,
      0s,
      0s,
      var(--nx-dur-fast);
  }
  .nx-audio-room-pill {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    block-size: 2.75rem;
    padding-inline: var(--nx-space-4) var(--nx-space-3);
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: inherit;
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    white-space: nowrap;
    cursor: pointer;
    &:focus-visible {
      outline: none;
    }
  }
  .nx-audio-room-live {
    position: relative;
    flex: none;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: var(--nx-danger);
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: inherit;
      animation: nx-ping 1.8s var(--nx-ease-out) infinite;
    }
  }
  .nx-audio-room-title {
    max-inline-size: min(12rem, 30vw);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nx-audio-room-faces {
    display: inline-flex;
    > * + * {
      margin-inline-start: -0.45rem;
    }
    .nx-avatar {
      --_size: 1.5rem;
      box-shadow: 0 0 0 2px var(--nx-surface-inverse);
    }
  }
  .nx-audio-room-eq {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    block-size: 1rem;
    color: var(--nx-success);
    > i {
      inline-size: 3px;
      block-size: 100%;
      border-radius: 2px;
      background: currentColor;
      transform-origin: 50% 50%;
      scale: 1 0.3;
    }
  }
  .nx-audio-room-eq[data-active] > i {
    animation: nx-audio-room-eq 820ms var(--nx-ease-in-out) infinite alternate;
    &:nth-child(2) {
      animation-delay: -340ms;
      animation-duration: 700ms;
    }
    &:nth-child(3) {
      animation-delay: -560ms;
      animation-duration: 900ms;
    }
    &:nth-child(4) {
      animation-delay: -150ms;
      animation-duration: 760ms;
    }
  }
  @keyframes nx-audio-room-eq {
    from {
      scale: 1 0.3;
    }
    to {
      scale: 1 1;
    }
  }
  .nx-audio-room-panel {
    display: grid;
    gap: var(--nx-space-4);
    inline-size: min(var(--nx-audio-room-width, 21rem), calc(100vw - 2rem));
    padding: var(--nx-space-4);
  }
  .nx-audio-room-head {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
  }
  .nx-audio-room-heading {
    display: grid;
    gap: 0.2rem;
    min-inline-size: 0;
    flex: 1;
  }
  .nx-audio-room-name {
    margin: 0;
    font: 650 var(--nx-text-md) / 1.3 var(--nx-font-display);
    overflow-wrap: anywhere;
  }
  .nx-audio-room-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nx-space-2);
    color: color-mix(in oklab, var(--nx-text-inverse) 65%, transparent);
    font-size: var(--nx-text-xs);
  }
  .nx-audio-room-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.1rem 0.5rem;
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--nx-danger) 22%, transparent);
    color: color-mix(in oklab, var(--nx-danger) 72%, currentColor);
    font-weight: 700;
    letter-spacing: var(--nx-tracking-wide);
  }
  .nx-audio-room-count {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
  }
  .nx-audio-room-speakers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr));
    gap: var(--nx-space-3) var(--nx-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-audio-room-speaker {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    min-inline-size: 0;
    text-align: center;
    .nx-audio-room[data-state=open] & {
      animation: nx-rise var(--nx-spring-gentle-duration) var(--nx-spring-gentle) both;
      animation-delay: calc(120ms + var(--nx-i, 0) * 45ms);
    }
  }
  .nx-audio-room-avatar {
    position: relative;
    display: inline-grid;
    border-radius: 50%;
    .nx-avatar {
      --_size: 3rem;
      outline: 1px solid color-mix(in oklab, currentColor 14%, transparent);
      outline-offset: -1px;
    }
    &::before,
    &::after {
      content: "";
      position: absolute;
      inset: -4px;
      border: 2px solid var(--nx-success);
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--nx-dur-base) var(--nx-ease-out);
    }
  }
  [data-speaking] > .nx-audio-room-avatar {
    &::before {
      opacity: 1;
    }
    &::after {
      animation: nx-audio-room-ring 1.5s var(--nx-ease-out) infinite;
    }
  }
  @keyframes nx-audio-room-ring {
    0% {
      opacity: 0.8;
      scale: 1;
    }
    100% {
      opacity: 0;
      scale: calc(1 + 0.28 * var(--nx-motion));
    }
  }
  .nx-audio-room-mic {
    position: absolute;
    inset-block-end: -2px;
    inset-inline-end: -2px;
    display: grid;
    place-items: center;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border-radius: 50%;
    background: var(--nx-surface-inverse);
    color: color-mix(in oklab, var(--nx-danger) 72%, var(--nx-text-inverse));
    box-shadow: 0 0 0 2px var(--nx-surface-inverse);
    .nx-icon {
      inline-size: 0.8rem;
      block-size: 0.8rem;
    }
  }
  .nx-audio-room-person {
    max-inline-size: 100%;
    overflow: hidden;
    font-size: var(--nx-text-xs);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-audio-room-role {
    color: color-mix(in oklab, var(--nx-text-inverse) 60%, transparent);
    font-size: 0.6875rem;
  }
  .nx-audio-room-controls {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
  }
  .nx-audio-room-control,
  .nx-audio-room-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    min-inline-size: 2.75rem;
    block-size: 2.75rem;
    padding-inline: var(--nx-space-3);
    border: 0;
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, currentColor 12%, transparent);
    color: inherit;
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    cursor: pointer;
    transition-property:
      scale,
      background-color,
      color;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out);
    &:hover {
      background: color-mix(in oklab, currentColor 19%, transparent);
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &[aria-pressed=true] {
      background: var(--nx-text-inverse);
      color: var(--nx-surface-inverse);
    }
  }
  .nx-audio-room-control[data-tone=danger] {
    margin-inline-start: auto;
    padding-inline: var(--nx-space-4);
    background: var(--nx-danger);
    color: var(--nx-accent-contrast);
    &:hover {
      background: var(--nx-danger-hover);
    }
  }
  .nx-audio-room-close {
    flex: none;
    min-inline-size: 2rem;
    block-size: 2rem;
    padding: 0;
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  :is(.nx-audio-room-swap, .nx-voice-recorder-swap) {
    display: inline-grid;
    > * {
      grid-area: 1 / 1;
      transition-property:
        opacity,
        scale,
        filter;
      transition-duration: 300ms;
      transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
    }
    > :last-child {
      opacity: 0;
      scale: 0.25;
      filter: blur(4px);
    }
  }
  :is([aria-pressed=true], [data-swapped]) > :is(.nx-audio-room-swap, .nx-voice-recorder-swap) {
    > :first-child {
      opacity: 0;
      scale: 0.25;
      filter: blur(4px);
    }
    > :last-child {
      opacity: 1;
      scale: 1;
      filter: none;
    }
  }
  .nx-activity-dropdown-trigger {
    position: relative;
    display: inline-grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    padding: 0;
    border: 1px solid var(--nx-border);
    border-radius: 50%;
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-xs);
    cursor: pointer;
    transition-property:
      scale,
      background-color,
      border-color;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out);
    > .nx-icon {
      inline-size: 1.2rem;
      block-size: 1.2rem;
      transform-origin: 50% 10%;
    }
    &:hover {
      background: var(--nx-surface-2);
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &[aria-expanded=true] {
      border-color: var(--nx-accent-border);
      background: var(--nx-accent-soft);
      color: var(--nx-accent-text);
    }
    &[data-ring] > .nx-icon {
      animation: nx-activity-dropdown-ring 700ms var(--nx-ease-out);
    }
  }
  @keyframes nx-activity-dropdown-ring {
    15% {
      rotate: calc(14deg * var(--nx-motion));
    }
    35% {
      rotate: calc(-12deg * var(--nx-motion));
    }
    55% {
      rotate: calc(8deg * var(--nx-motion));
    }
    75% {
      rotate: calc(-4deg * var(--nx-motion));
    }
  }
  .nx-activity-dropdown-badge {
    position: absolute;
    inset-block-start: -0.3rem;
    inset-inline-end: -0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.25rem;
    block-size: 1.25rem;
    padding-inline: 0.3rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-danger);
    color: var(--nx-accent-contrast);
    font: 700 0.6875rem / 1 var(--nx-font-sans);
    box-shadow: 0 0 0 2px var(--nx-surface);
    pointer-events: none;
    transition-property: opacity, scale;
    transition-duration: var(--nx-dur-base), var(--nx-spring-bouncy-duration);
    transition-timing-function: var(--nx-ease-out), var(--nx-spring-bouncy);
    .nx-number {
      line-height: 1;
    }
    &[data-pop] {
      animation: nx-pop 520ms var(--nx-spring-bouncy);
    }
    &[data-empty] {
      opacity: 0;
      scale: 0.95;
      transition-duration: var(--nx-dur-fast), var(--nx-dur-fast);
      transition-timing-function: var(--nx-ease-in);
      transition-delay: 520ms;
    }
  }
  .nx-activity-dropdown {
    position: fixed;
    inset: auto;
    z-index: var(--nx-z-dropdown);
    display: grid;
    inline-size: min(var(--nx-activity-width, 23rem), calc(100vw - 1rem));
    max-block-size: min(32rem, 80vh);
    margin: 0;
    padding: 0;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-xl), inset 0 1px 0 var(--nx-highlight);
    overflow: clip;
    transform-origin: var(--nx-origin, top center);
    opacity: 0;
    scale: 0.95;
    transition:
      opacity var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      display var(--nx-dur-fast) allow-discrete,
      overlay var(--nx-dur-fast) allow-discrete;
  }
  .nx-activity-dropdown:where(:popover-open, [data-open]) {
    opacity: 1;
    scale: 1;
    @starting-style {
      opacity: 0;
      scale: 0.95;
    }
  }
  .nx-activity-dropdown:not([popover]):not([data-open]) {
    display: none;
  }
  .nx-activity-dropdown-head {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    padding: var(--nx-space-3) var(--nx-space-3) var(--nx-space-3) var(--nx-space-4);
    border-block-end: 1px solid var(--nx-border);
  }
  .nx-activity-dropdown-title {
    margin: 0;
    font: 650 var(--nx-text-md) / 1.3 var(--nx-font-display);
  }
  .nx-activity-dropdown-unread {
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    font-weight: 500;
  }
  .nx-activity-dropdown-mark {
    margin-inline-start: auto;
    padding: 0.35rem 0.6rem;
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: transparent;
    color: var(--nx-accent-text);
    font: 600 var(--nx-text-xs) / 1.2 var(--nx-font-sans);
    cursor: pointer;
    transition-property:
      scale,
      background-color,
      opacity;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out);
    &:hover:not(:disabled) {
      background: var(--nx-accent-soft);
    }
    &:active:not([data-static], :disabled) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 1px;
    }
    &:disabled {
      opacity: 0.45;
      cursor: default;
    }
  }
  .nx-activity-dropdown-list {
    display: grid;
    margin: 0;
    padding: var(--nx-space-1);
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
  }
  .nx-activity-dropdown-item {
    opacity: 1;
    translate: 0 0;
    transition: opacity var(--nx-dur-base) var(--nx-ease-out) calc(40ms + var(--nx-i, 0) * 40ms), translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle) calc(40ms + var(--nx-i, 0) * 40ms);
    @starting-style {
      opacity: 0;
      translate: 0 calc(8px * var(--nx-motion));
    }
  }
  .nx-activity-dropdown-row {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: var(--nx-space-3);
    inline-size: 100%;
    padding: var(--nx-space-3);
    border: 0;
    border-radius: var(--nx-radius-md);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    text-decoration: none;
    transition: background-color var(--nx-dur-fast) var(--nx-ease-out);
    .nx-avatar {
      --_size: 2.25rem;
    }
    &:is(a, button) {
      cursor: pointer;
    }
    &:is(a, button):hover {
      background: var(--nx-surface-2);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: -2px;
    }
  }
  [data-unread] > .nx-activity-dropdown-row {
    background: color-mix(in oklab, var(--nx-accent-soft) 45%, transparent);
  }
  [data-unread] > .nx-activity-dropdown-row:is(a, button):hover {
    background: var(--nx-accent-soft);
  }
  .nx-activity-dropdown-text {
    display: grid;
    gap: 0.2rem;
    min-inline-size: 0;
    margin: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    line-height: 1.45;
    strong {
      color: var(--nx-text);
      font-weight: 600;
    }
  }
  .nx-activity-dropdown-time {
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
  }
  .nx-activity-dropdown-dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    margin-block-start: 0.45rem;
    border-radius: 50%;
    background: var(--nx-accent);
    box-shadow: 0 0 0 3px var(--nx-accent-soft);
    opacity: 0;
    scale: 0.25;
    transition: opacity var(--nx-dur-fast) var(--nx-ease-in) calc(var(--nx-i, 0) * 30ms), scale var(--nx-dur-base) var(--nx-ease-in) calc(var(--nx-i, 0) * 30ms);
  }
  [data-unread] > .nx-activity-dropdown-row .nx-activity-dropdown-dot {
    opacity: 1;
    scale: 1;
    transition: opacity var(--nx-dur-fast) var(--nx-ease-out), scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
  }
  .nx-activity-dropdown-empty {
    display: grid;
    justify-items: center;
    gap: var(--nx-space-2);
    margin: 0;
    padding: var(--nx-space-10) var(--nx-space-6);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    text-align: center;
    animation: nx-fade-in var(--nx-dur-slow) var(--nx-ease-out);
    .nx-icon {
      inline-size: 2.5rem;
      block-size: 2.5rem;
      padding: 0.6rem;
      border-radius: 50%;
      background: var(--nx-surface-2);
      color: var(--nx-text-subtle);
    }
  }
  .nx-member-selector-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    min-block-size: 2.75rem;
    padding: 0.25rem var(--nx-space-3) 0.25rem 0.375rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    color: var(--nx-text);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    box-shadow: var(--nx-shadow-xs);
    cursor: pointer;
    transition-property:
      scale,
      background-color,
      border-color;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out);
    &:hover {
      background: var(--nx-surface-2);
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &[aria-expanded=true] {
      border-color: var(--nx-accent-border);
    }
  }
  .nx-member-selector-stack {
    display: inline-flex;
    align-items: center;
    .nx-avatar {
      --_size: 2rem;
      box-shadow: 0 0 0 2px var(--nx-surface);
    }
    > * + * {
      margin-inline-start: -0.55rem;
    }
    > [data-new] {
      animation: nx-member-selector-in var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy) both;
    }
  }
  @keyframes nx-member-selector-in {
    from {
      opacity: 0;
      scale: 0.95;
      translate: calc(-10px * var(--nx-dir) * var(--nx-motion)) 0;
      box-shadow: 0 0 0 2px var(--nx-surface), 0 0 0 5px var(--nx-accent-border);
    }
  }
  .nx-member-selector-add {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: 1.5px dashed var(--nx-border-strong);
    border-radius: 50%;
    color: var(--nx-text-subtle);
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  .nx-member-selector-stack > .nx-member-selector-add {
    margin-inline-start: var(--nx-space-1);
  }
  .nx-member-selector {
    position: fixed;
    inset: auto;
    z-index: var(--nx-z-dropdown);
    display: grid;
    inline-size: min(var(--nx-member-selector-width, 23rem), calc(100vw - 1rem));
    max-block-size: min(30rem, 80vh);
    margin: 0;
    padding: 0;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-xl), inset 0 1px 0 var(--nx-highlight);
    overflow: clip;
    transform-origin: var(--nx-origin, top center);
    opacity: 0;
    scale: 0.95;
    transition:
      opacity var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      display var(--nx-dur-fast) allow-discrete,
      overlay var(--nx-dur-fast) allow-discrete;
  }
  .nx-member-selector:where(:popover-open, [data-open]) {
    opacity: 1;
    scale: 1;
    @starting-style {
      opacity: 0;
      scale: 0.95;
    }
  }
  .nx-member-selector:not([popover]):not([data-open]) {
    display: none;
  }
  .nx-member-selector-search {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-2) var(--nx-space-3);
    border-block-end: 1px solid var(--nx-border);
    color: var(--nx-text-subtle);
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
    &:has(:focus-visible) {
      box-shadow: inset 0 -2px 0 var(--nx-ring);
    }
  }
  .nx-member-selector-input {
    flex: 1;
    min-inline-size: 0;
    min-block-size: 2.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--nx-text);
    font: 400 var(--nx-text-sm) / 1.4 var(--nx-font-sans);
    &::placeholder {
      color: var(--nx-text-subtle);
    }
    &:focus-visible {
      outline: none;
    }
    &::-webkit-search-cancel-button {
      display: none;
    }
  }
  .nx-member-selector-list {
    display: grid;
    align-content: start;
    gap: 1px;
    margin: 0;
    padding: var(--nx-space-1);
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
  }
  .nx-member-selector-row {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding-inline-end: var(--nx-space-1);
    border-radius: var(--nx-radius-md);
    transition: background-color var(--nx-dur-fast) var(--nx-ease-out);
    &:hover {
      background: var(--nx-surface-2);
    }
    &[data-selected] {
      background: color-mix(in oklab, var(--nx-accent-soft) 55%, transparent);
    }
    &[hidden] {
      display: none;
    }
  }
  .nx-member-selector-choice {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--nx-space-3);
    min-inline-size: 0;
    min-block-size: 3rem;
    padding: var(--nx-space-1) var(--nx-space-2);
    border-radius: var(--nx-radius-md);
    cursor: pointer;
    .nx-checkbox {
      margin: 0;
    }
    .nx-avatar {
      --_size: 2rem;
    }
  }
  .nx-member-selector-who {
    display: grid;
    min-inline-size: 0;
  }
  .nx-member-selector-name {
    overflow: hidden;
    font-size: var(--nx-text-sm);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-member-selector-email {
    overflow: hidden;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-member-selector-role {
    flex: none;
    inline-size: 6.75rem;
    min-block-size: 2rem;
    padding-block: 0.2rem;
    font-size: var(--nx-text-xs);
    transition-property:
      opacity,
      translate,
      visibility,
      border-color,
      box-shadow;
    transition-duration:
      var(--nx-dur-base),
      var(--nx-spring-snappy-duration),
      0s,
      var(--nx-dur-fast),
      var(--nx-dur-base);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-spring-snappy),
      linear,
      var(--nx-ease-out),
      var(--nx-ease-out);
  }
  .nx-member-selector-row:not([data-selected]) .nx-member-selector-role {
    opacity: 0;
    translate: calc(8px * var(--nx-dir) * var(--nx-motion)) 0;
    visibility: hidden;
    transition-duration:
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      0s,
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-delay:
      0s,
      0s,
      var(--nx-dur-fast),
      0s,
      0s;
  }
  .nx-member-selector-empty {
    margin: 0;
    padding: var(--nx-space-8) var(--nx-space-4);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    text-align: center;
  }
  .nx-registration-card {
    display: grid;
    inline-size: min(100%, var(--nx-registration-width, 27rem));
    margin: 0;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-2xl);
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-lg), inset 0 1px 0 var(--nx-highlight);
    overflow: clip;
  }
  .nx-registration-card-head {
    position: relative;
    display: grid;
    gap: var(--nx-space-2);
    padding: var(--nx-space-5) var(--nx-space-6) var(--nx-space-4);
    background:
      radial-gradient(
        120% 90% at 100% 0%,
        var(--nx-accent-soft),
        transparent 60%),
      radial-gradient(
        90% 80% at 0% 0%,
        var(--nx-gold-soft),
        transparent 55%);
  }
  .nx-registration-card-eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nx-space-2);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    .nx-icon {
      inline-size: 0.95rem;
      block-size: 0.95rem;
      color: var(--nx-accent-text);
    }
    > span {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
    }
  }
  .nx-registration-card-title {
    margin: 0;
    font: 700 var(--nx-text-xl) / 1.25 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
    text-wrap: balance;
  }
  .nx-registration-card-steps {
    --_progress: 0;
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--_count, 3), 1fr);
    margin: 0;
    padding: var(--nx-space-2) var(--nx-space-6) var(--nx-space-1);
    list-style: none;
    &::before,
    &::after {
      content: "";
      position: absolute;
      inset-block-start: calc(var(--nx-space-2) + 0.875rem - 1px);
      inset-inline: calc(var(--nx-space-6) + (100% - 2 * var(--nx-space-6)) / var(--_count, 3) / 2);
      block-size: 2px;
      border-radius: 1px;
      background: var(--nx-border);
    }
    &::after {
      background: var(--nx-accent);
      transform-origin: left center;
      scale: var(--_progress) 1;
      transition: scale var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    }
  }
  :where([dir=rtl]) .nx-registration-card-steps::after {
    transform-origin: right center;
  }
  .nx-registration-card-stepmark {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    transition: color var(--nx-dur-base) var(--nx-ease-out);
    &[data-status=current],
    &[data-status=complete] {
      color: var(--nx-text);
    }
  }
  .nx-registration-card-marker {
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border: 2px solid var(--nx-border);
    border-radius: 50%;
    background: var(--nx-surface);
    font-size: var(--nx-text-xs);
    font-variant-numeric: tabular-nums;
    transition-property:
      background-color,
      border-color,
      color,
      scale,
      box-shadow;
    transition-duration:
      var(--nx-dur-base),
      var(--nx-dur-base),
      var(--nx-dur-base),
      var(--nx-spring-bouncy-duration),
      var(--nx-dur-base);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-bouncy),
      var(--nx-ease-out);
    > * {
      grid-area: 1 / 1;
    }
    .nx-icon {
      inline-size: 0.85rem;
      block-size: 0.85rem;
      opacity: 0;
      scale: 0.25;
      transition: opacity 300ms cubic-bezier(0.2, 0, 0, 1), scale 300ms cubic-bezier(0.2, 0, 0, 1);
    }
  }
  [data-status=current] > .nx-registration-card-marker {
    border-color: var(--nx-accent);
    color: var(--nx-accent-text);
    box-shadow: 0 0 0 4px var(--nx-accent-soft);
    scale: calc(1 + 0.06 * var(--nx-motion));
  }
  [data-status=complete] > .nx-registration-card-marker {
    border-color: var(--nx-accent);
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
    > span {
      opacity: 0;
    }
    .nx-icon {
      opacity: 1;
      scale: 1;
    }
  }
  .nx-registration-card-viewport {
    position: relative;
    block-size: var(--nx-morph-h, auto);
    overflow: clip;
    transition: block-size var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    &:is(:not([data-nx-morph]), [data-nx-morph=init]) {
      transition: none;
    }
  }
  .nx-registration-card-measure {
    position: relative;
    padding: var(--nx-space-4) var(--nx-space-6) var(--nx-space-5);
  }
  .nx-registration-card-step,
  .nx-registration-card-success {
    display: grid;
    gap: var(--nx-space-4);
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 1;
    translate: 0 0;
    transition:
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      opacity var(--nx-dur-base) var(--nx-ease-out) 60ms,
      visibility 0s;
    &:not([data-pos=current]) {
      position: absolute;
      inset-block-start: var(--nx-space-4);
      inset-inline: var(--nx-space-6);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition:
        translate 200ms var(--nx-ease-in),
        opacity 150ms var(--nx-ease-in),
        visibility 0s linear 200ms;
    }
    &[data-pos=before] {
      translate: calc(-26% * var(--nx-dir) * var(--nx-motion)) 0;
    }
    &[data-pos=after] {
      translate: calc(26% * var(--nx-dir) * var(--nx-motion)) 0;
    }
  }
  .nx-registration-card-legend {
    padding: 0;
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    font-weight: 600;
  }
  .nx-registration-card-tickets {
    display: grid;
    gap: var(--nx-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-registration-card-ticket {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    padding: var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    transition: border-color var(--nx-dur-base) var(--nx-ease-out), background-color var(--nx-dur-base) var(--nx-ease-out);
    &[data-picked] {
      border-color: var(--nx-accent-border);
      background: color-mix(in oklab, var(--nx-accent-soft) 40%, transparent);
    }
  }
  .nx-registration-card-ticket-text {
    display: grid;
    gap: 0.1rem;
    flex: 1;
    min-inline-size: 0;
  }
  .nx-registration-card-ticket-name {
    font-size: var(--nx-text-sm);
    font-weight: 600;
  }
  .nx-registration-card-ticket-note {
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
  }
  .nx-registration-card-price {
    color: var(--nx-accent-text);
    font-size: var(--nx-text-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .nx-registration-card-stepper {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-1);
    padding: 0.2rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-2);
  }
  .nx-registration-card-qty {
    display: inline-flex;
    justify-content: center;
    min-inline-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .nx-registration-card-stepbtn {
    display: grid;
    place-items: center;
    inline-size: 1.875rem;
    block-size: 1.875rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-xs);
    cursor: pointer;
    transition-property:
      scale,
      background-color,
      opacity;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out);
    .nx-icon {
      inline-size: 0.9rem;
      block-size: 0.9rem;
    }
    &:hover:not(:disabled) {
      background: var(--nx-accent-soft);
      color: var(--nx-accent-text);
    }
    &:active:not([data-static], :disabled) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      box-shadow: none;
    }
  }
  .nx-registration-card-summary {
    display: grid;
    gap: var(--nx-space-2);
    margin: 0;
    padding: var(--nx-space-3) var(--nx-space-4);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface-2);
    font-size: var(--nx-text-sm);
    > div {
      display: flex;
      justify-content: space-between;
      gap: var(--nx-space-3);
    }
    dt {
      color: var(--nx-text-muted);
    }
    dd {
      margin: 0;
      font-weight: 600;
      text-align: end;
      overflow-wrap: anywhere;
    }
  }
  .nx-registration-card-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nx-space-3);
    padding-block-start: var(--nx-space-2);
    border-block-start: 1px dashed var(--nx-border);
    font-weight: 700;
    .nx-number {
      font-size: var(--nx-text-lg);
    }
  }
  .nx-registration-card-hint {
    margin: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
  }
  .nx-registration-card-success {
    justify-items: center;
    gap: var(--nx-space-2);
    padding-block: var(--nx-space-4);
    text-align: center;
    p {
      margin: 0;
      color: var(--nx-text-muted);
      font-size: var(--nx-text-sm);
    }
  }
  .nx-registration-card-check {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 4rem;
    block-size: 4rem;
    margin-block-end: var(--nx-space-2);
    border-radius: 50%;
    background: var(--nx-success-soft);
    color: var(--nx-success);
    svg {
      inline-size: 2.25rem;
      block-size: 2.25rem;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      overflow: visible;
    }
    path {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
    }
  }
  [data-pos=current] > .nx-registration-card-check {
    animation: nx-scale-in var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy) both;
    path {
      animation: nx-draw 460ms var(--nx-ease-out) 220ms forwards;
    }
  }
  .nx-registration-card-success-title {
    margin: 0;
    font: 700 var(--nx-text-xl) / 1.25 var(--nx-font-display);
  }
  .nx-registration-card-foot {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    padding: var(--nx-space-4) var(--nx-space-6) var(--nx-space-5);
    border-block-start: 1px solid var(--nx-border);
    > :last-child {
      margin-inline-start: auto;
    }
  }
  .nx-registration-card[data-done] .nx-registration-card-foot {
    display: none;
  }
  .nx-voice-recorder {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    inline-size: var(--nx-morph-w, auto);
    block-size: var(--nx-morph-h, 3rem);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    box-shadow:
      0 0 0 1px var(--nx-border),
      var(--nx-shadow-md),
      inset 0 1px 0 var(--nx-highlight);
    overflow: clip;
    transition-property:
      inline-size,
      block-size,
      background-color,
      box-shadow;
    transition-duration:
      var(--nx-spring-gentle-duration),
      var(--nx-spring-gentle-duration),
      var(--nx-dur-base),
      var(--nx-dur-slow);
    transition-timing-function:
      var(--nx-spring-gentle),
      var(--nx-spring-gentle),
      var(--nx-ease-out),
      var(--nx-ease-out);
    &:is(:not([data-nx-morph]), [data-nx-morph=init]) {
      transition: none;
    }
    &[data-state=idle] {
      background: var(--nx-accent);
      box-shadow:
        0 0 0 1px color-mix(in oklab, var(--nx-accent) 70%, black),
        var(--nx-shadow-md),
        inset 0 1px 0 rgb(255 255 255 / 0.22);
    }
    &:has(:focus-visible) {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-voice-recorder-measure {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: max-content;
  }
  .nx-voice-recorder:not([data-nx-morph]) .nx-voice-recorder-measure {
    position: relative;
  }
  .nx-voice-recorder[data-align=end] .nx-voice-recorder-measure {
    inset-inline: auto 0;
  }
  .nx-voice-recorder-face {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    block-size: 3rem;
    padding-inline: var(--nx-space-2);
    color: var(--nx-text);
    transition-property:
      opacity,
      filter,
      visibility;
    transition-duration:
      var(--nx-dur-base),
      var(--nx-dur-base),
      0s;
    transition-timing-function: var(--nx-ease-out);
    transition-delay:
      90ms,
      90ms,
      0s;
    &:not([data-active]) {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      opacity: 0;
      filter: blur(calc(2px * var(--nx-motion)));
      visibility: hidden;
      pointer-events: none;
      transition-duration:
        var(--nx-dur-fast),
        var(--nx-dur-fast),
        0s;
      transition-timing-function: var(--nx-ease-in);
      transition-delay:
        0s,
        0s,
        var(--nx-dur-fast);
    }
    &[data-face=idle] {
      padding: 0;
    }
  }
  .nx-voice-recorder[data-align=end] .nx-voice-recorder-face:not([data-active]) {
    inset-inline: auto 0;
  }
  .nx-voice-recorder-mic {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--nx-accent-contrast);
    cursor: pointer;
    transition: scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    .nx-icon {
      inline-size: 1.3rem;
      block-size: 1.3rem;
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: none;
    }
  }
  .nx-voice-recorder-dot {
    flex: none;
    inline-size: 0.625rem;
    block-size: 0.625rem;
    margin-inline: var(--nx-space-2) 0.15rem;
    border-radius: 50%;
    background: var(--nx-danger);
    transition: background-color var(--nx-dur-base) var(--nx-ease-out);
    .nx-voice-recorder[data-state=recording] & {
      animation: nx-pulse 1.2s var(--nx-ease-in-out) infinite;
    }
    .nx-voice-recorder[data-state=paused] & {
      background: var(--nx-warning);
    }
  }
  .nx-voice-recorder-wave {
    display: flex;
    align-items: center;
    gap: 2px;
    block-size: 1.75rem;
    color: var(--nx-text);
    > i {
      flex: none;
      inline-size: 3px;
      block-size: 100%;
      border-radius: 2px;
      background: currentColor;
      scale: 1 max(0.1, var(--_v, 0));
      transition: scale 110ms linear;
    }
    .nx-voice-recorder[data-state=paused] & {
      opacity: 0.45;
    }
  }
  .nx-voice-recorder-time {
    min-inline-size: 3.1rem;
    color: var(--nx-text-muted);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-mono);
    font-variant-numeric: tabular-nums;
    .nx-number-roll {
      direction: ltr;
    }
    .nx-digit-track {
      transition-duration: var(--nx-spring-snappy-duration);
      transition-timing-function: var(--nx-spring-snappy);
    }
  }
  .nx-voice-recorder-btn {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--nx-surface-2);
    color: var(--nx-text);
    cursor: pointer;
    transition-property:
      scale,
      background-color,
      color;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out);
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
    &:hover {
      background: var(--nx-surface-3);
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: -2px;
    }
    &[data-tone=danger] {
      background: var(--nx-danger);
      color: var(--nx-accent-contrast);
    }
    &[data-tone=danger]:hover {
      background: var(--nx-danger-hover);
    }
    &[data-tone=accent] {
      background: var(--nx-accent);
      color: var(--nx-accent-contrast);
    }
    &[data-tone=accent]:hover {
      background: var(--nx-accent-hover);
    }
    &[data-tone=ghost] {
      background: transparent;
      color: var(--nx-text-subtle);
    }
    &[data-tone=ghost]:hover {
      background: var(--nx-surface-2);
      color: var(--nx-text);
    }
  }
  .nx-voice-recorder-take {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    block-size: 1.75rem;
    color: var(--nx-accent);
    > i {
      flex: none;
      inline-size: 3px;
      block-size: 100%;
      border-radius: 2px;
      background: currentColor;
      scale: 1 max(0.12, var(--_v, 0));
      opacity: clamp(0.3, (var(--_p, 0) * var(--_bars, 32) - var(--_i, 0)) * 100, 1);
      transition: opacity var(--nx-dur-fast) linear, scale var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    }
    &:has(:focus-visible) {
      outline: 2px solid var(--nx-ring);
      outline-offset: 3px;
      border-radius: 4px;
    }
  }
  .nx-voice-recorder-seek {
    position: absolute;
    inset: -0.5rem 0;
    inline-size: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-fold-menu-panel {
      opacity: 0;
      transition:
        opacity var(--nx-dur-fast) var(--nx-ease-out),
        display var(--nx-dur-fast) allow-discrete,
        overlay var(--nx-dur-fast) allow-discrete;
    }
    .nx-fold-menu-panel:where(:popover-open, [data-open]) {
      opacity: 1;
      @starting-style {
        opacity: 0;
      }
    }
    .nx-fold-menu-panel:where(:popover-open, [data-open]) .nx-fold-menu-link {
      transition-delay: 0s;
    }
    .nx-audio-room-live::after,
    .nx-audio-room-eq[data-active] > i,
    [data-speaking] > .nx-audio-room-avatar::after,
    .nx-voice-recorder[data-state=recording] .nx-voice-recorder-dot,
    .nx-activity-dropdown-trigger[data-ring] > .nx-icon {
      animation: none;
    }
    .nx-audio-room-eq[data-active] > i {
      scale: 1 0.7;
    }
    .nx-voice-recorder-wave > i {
      transition: none;
    }
  }
  .nx-chain-selector-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    min-block-size: 2.75rem;
    padding: 0.25rem var(--nx-space-3) 0.25rem 0.25rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    color: var(--nx-text);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    box-shadow: var(--nx-shadow-xs);
    cursor: pointer;
    transition-property:
      scale,
      background-color,
      border-color;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out);
    &:hover {
      background: var(--nx-surface-2);
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &[aria-expanded=true] {
      border-color: var(--nx-accent-border);
    }
  }
  .nx-chain-selector-who {
    display: grid;
    justify-items: start;
    min-inline-size: 0;
    text-align: start;
  }
  .nx-chain-selector-name {
    font-size: var(--nx-text-sm);
  }
  .nx-chain-selector-tag {
    color: var(--nx-text-subtle);
    font: 500 var(--nx-text-xs) / 1.2 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-wide);
  }
  .nx-chain-selector-glyph {
    --nx-tone: var(--nx-lapis-500);
    position: relative;
    display: inline-grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: 50%;
    background: color-mix(in oklab, var(--nx-tone) 16%, transparent);
    color: var(--nx-tone);
    &[data-tone=lapis] {
      --nx-tone: var(--nx-lapis-500);
    }
    &[data-tone=violet] {
      --nx-tone: var(--nx-violet-500);
    }
    &[data-tone=cyan] {
      --nx-tone: var(--nx-cyan-500);
    }
    &[data-tone=gold] {
      --nx-tone: var(--nx-gold-500);
    }
  }
  .nx-chain-selector-morph {
    grid-area: 1 / 1;
    display: grid;
    place-items: center;
    > .nx-icon {
      inline-size: 1.1rem;
      block-size: 1.1rem;
    }
    opacity: 0;
    scale: 0.25;
    rotate: calc(-30deg * var(--nx-motion));
    filter: blur(4px);
    transition:
      opacity 300ms cubic-bezier(0.2, 0, 0, 1),
      scale 300ms cubic-bezier(0.2, 0, 0, 1),
      rotate 300ms cubic-bezier(0.2, 0, 0, 1),
      filter 300ms cubic-bezier(0.2, 0, 0, 1);
  }
  .nx-chain-selector-glyph > [data-current] {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
    filter: blur(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-chain-selector-morph {
      rotate: 0deg;
      scale: 1;
      filter: none;
      transition: opacity 150ms var(--nx-ease-out);
    }
  }
  .nx-chain-selector .nx-chain-selector-glyph {
    inline-size: 1.75rem;
    block-size: 1.75rem;
  }
  .nx-chain-selector .nx-chain-selector-morph > .nx-icon {
    inline-size: 0.9rem;
    block-size: 0.9rem;
  }
  .nx-chain-selector {
    position: fixed;
    inset: auto;
    z-index: var(--nx-z-dropdown);
    display: grid;
    inline-size: min(var(--nx-chain-selector-width, 20rem), calc(100vw - 1rem));
    max-block-size: min(26rem, 80vh);
    margin: 0;
    padding: 0;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-xl), inset 0 1px 0 var(--nx-highlight);
    overflow: clip;
    transform-origin: var(--nx-origin, top center);
    opacity: 0;
    scale: 0.95;
    transition:
      opacity var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      display var(--nx-dur-fast) allow-discrete,
      overlay var(--nx-dur-fast) allow-discrete;
  }
  .nx-chain-selector:where(:popover-open, [data-open]) {
    opacity: 1;
    scale: 1;
    @starting-style {
      opacity: 0;
      scale: 0.95;
    }
  }
  .nx-chain-selector:not([popover]):not([data-open]) {
    display: none;
  }
  .nx-chain-selector-search {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-2) var(--nx-space-3);
    border-block-end: 1px solid var(--nx-border);
    color: var(--nx-text-subtle);
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
    &:has(:focus-visible) {
      box-shadow: inset 0 -2px 0 var(--nx-ring);
    }
  }
  .nx-chain-selector-input {
    inline-size: 100%;
    padding-block: var(--nx-space-2);
    border: 0;
    background: transparent;
    color: inherit;
    font: 500 var(--nx-text-sm) / 1.4 var(--nx-font-sans);
    outline: none;
    &::placeholder {
      color: var(--nx-text-subtle);
    }
  }
  .nx-chain-selector-list {
    margin: 0;
    padding: var(--nx-space-1);
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nx-chain-selector-row {
    border-radius: var(--nx-radius-lg);
    & + & {
      margin-block-start: 2px;
    }
  }
  .nx-chain-selector-choice {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    inline-size: 100%;
    padding: var(--nx-space-2);
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: inherit;
    font: 500 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
    text-align: start;
    cursor: pointer;
    transition-property: background-color;
    transition-duration: var(--nx-dur-fast);
    transition-timing-function: var(--nx-ease-out);
    &:hover {
      background: var(--nx-surface-2);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: -2px;
    }
    &:active .nx-chain-selector-glyph {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
  }
  .nx-chain-selector-row[data-selected] .nx-chain-selector-choice {
    background: var(--nx-accent-soft);
    color: var(--nx-accent-text);
  }
  .nx-chain-selector-what {
    display: grid;
    justify-items: start;
    min-inline-size: 0;
    margin-inline-end: auto;
  }
  .nx-chain-selector-mark {
    display: grid;
    place-items: center;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border-radius: 50%;
    background: var(--nx-accent);
    color: var(--nx-accent-text);
    opacity: 0;
    scale: 0.25;
    transition: opacity var(--nx-spring-snappy-duration) var(--nx-spring-snappy), scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
    .nx-icon {
      inline-size: 0.75rem;
      block-size: 0.75rem;
    }
  }
  .nx-chain-selector-row[data-selected] .nx-chain-selector-mark {
    opacity: 1;
    scale: 1;
  }
  .nx-chain-selector-empty {
    margin: 0;
    padding: var(--nx-space-4) var(--nx-space-3);
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-sm);
    text-align: center;
  }
  .nx-language-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    min-block-size: 2.5rem;
    padding-inline: var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    color: var(--nx-text);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    box-shadow: var(--nx-shadow-xs);
    cursor: pointer;
    transition-property:
      scale,
      background-color,
      border-color;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out);
    &:hover {
      background: var(--nx-surface-2);
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &[aria-expanded=true] {
      border-color: var(--nx-accent-border);
    }
  }
  .nx-language-globe {
    display: grid;
    place-items: center;
    color: var(--nx-text-subtle);
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  .nx-language-codes {
    display: inline-grid;
    place-items: center;
    min-inline-size: 2ch;
  }
  .nx-language-code {
    grid-area: 1 / 1;
    letter-spacing: var(--nx-tracking-wide);
    opacity: 0;
    translate: 0 calc(0.7em * var(--nx-motion));
    filter: blur(calc(2px * var(--nx-motion)));
    transition:
      opacity 300ms cubic-bezier(0.2, 0, 0, 1),
      translate 300ms cubic-bezier(0.2, 0, 0, 1),
      filter 300ms cubic-bezier(0.2, 0, 0, 1);
  }
  .nx-language-codes > [data-current] {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
  .nx-language-chevron {
    display: inline-flex;
    color: var(--nx-text-subtle);
    transition: rotate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  [aria-expanded=true] > .nx-language-chevron {
    rotate: 180deg;
  }
  .nx-language {
    position: fixed;
    inset: auto;
    z-index: var(--nx-z-dropdown);
    display: grid;
    inline-size: min(var(--nx-language-width, 15rem), calc(100vw - 1rem));
    margin: 0;
    padding: 0;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-xl), inset 0 1px 0 var(--nx-highlight);
    overflow: clip;
    transform-origin: var(--nx-origin, top center);
    opacity: 0;
    scale: 0.95;
    transition:
      opacity var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      display var(--nx-dur-fast) allow-discrete,
      overlay var(--nx-dur-fast) allow-discrete;
  }
  .nx-language:where(:popover-open, [data-open]) {
    opacity: 1;
    scale: 1;
    @starting-style {
      opacity: 0;
      scale: 0.95;
    }
  }
  .nx-language:not([popover]):not([data-open]) {
    display: none;
  }
  .nx-language-list {
    display: grid;
    margin: 0;
    padding: var(--nx-space-1);
    list-style: none;
    max-block-size: min(var(--nx-language-max-block-size, 24rem), calc(100dvh - 1.5rem));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nx-language-row {
    border-radius: var(--nx-radius-lg);
    & + & {
      margin-block-start: 2px;
    }
  }
  .nx-language-choice {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    inline-size: 100%;
    padding: var(--nx-space-2) var(--nx-space-3);
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: inherit;
    font: 500 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
    text-align: start;
    cursor: pointer;
    transition-property: background-color;
    transition-duration: var(--nx-dur-fast);
    transition-timing-function: var(--nx-ease-out);
    &:hover {
      background: var(--nx-surface-2);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: -2px;
    }
  }
  .nx-language-short {
    margin-inline-start: auto;
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    letter-spacing: var(--nx-tracking-wide);
  }
  .nx-language-row[data-selected] .nx-language-choice {
    background: var(--nx-accent-soft);
    color: var(--nx-accent-text);
  }
  .nx-language-row[data-selected] .nx-language-short {
    color: var(--nx-accent-text);
  }
  .nx-language-mark {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border-radius: 50%;
    background: var(--nx-accent);
    color: var(--nx-accent-text);
    opacity: 0;
    scale: 0.25;
    transition: opacity var(--nx-spring-snappy-duration) var(--nx-spring-snappy), scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
    .nx-icon {
      inline-size: 0.75rem;
      block-size: 0.75rem;
    }
  }
  .nx-language-row[data-selected] .nx-language-mark {
    opacity: 1;
    scale: 1;
  }
  .nx-theme-switch {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: var(--nx-space-1);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-2);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.06), inset 0 0 0 1px var(--nx-border);
  }
  .nx-theme-switch .nx-indicator {
    z-index: -1;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    box-shadow:
      var(--nx-shadow-sm),
      inset 0 1px 0 var(--nx-highlight),
      0 0 0 1px color-mix(in oklab, var(--nx-border) 70%, transparent);
  }
  .nx-theme-switch-option {
    position: relative;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--nx-radius-full);
    color: var(--nx-text-subtle);
    cursor: pointer;
    transition: color var(--nx-dur-base) var(--nx-ease-out);
    .nx-icon {
      inline-size: 1.15rem;
      block-size: 1.15rem;
    }
    &:hover {
      color: var(--nx-text);
    }
    &:has(:checked) {
      color: var(--nx-text);
    }
    &:has(:focus-visible) {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-theme-switch-input {
    appearance: none;
    position: absolute;
    inset: 0;
    margin: 0;
    border-radius: inherit;
    opacity: 0;
    cursor: inherit;
  }
  .nx-theme-switch-half {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    background:
      linear-gradient(
        to right,
        currentColor 50%,
        transparent 50%);
  }
  :where([dir=rtl]) .nx-theme-switch-half {
    background:
      linear-gradient(
        to left,
        currentColor 50%,
        transparent 50%);
  }
  .nx-promo-bar {
    position: relative;
    display: grid;
    grid-template-rows: 1fr;
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
    text-align: center;
    transition-property:
      grid-template-rows,
      opacity,
      translate;
    transition-duration:
      var(--nx-spring-gentle-duration),
      var(--nx-dur-base),
      var(--nx-dur-base);
    transition-timing-function:
      var(--nx-spring-gentle),
      var(--nx-ease-in),
      var(--nx-ease-in);
    animation: nx-promo-in var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    &[data-closing] {
      grid-template-rows: 0fr;
      opacity: 0;
      translate: 0 calc(-0.75rem * var(--nx-motion));
    }
    &[data-gone] {
      display: none;
    }
  }
  @keyframes nx-promo-in {
    from {
      opacity: 0;
      translate: 0 calc(-100% * var(--nx-motion));
    }
  }
  .nx-promo-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-3);
    min-block-size: 0;
    overflow: hidden;
    padding: var(--nx-space-2) calc(var(--nx-space-10) + var(--nx-space-2));
    font: 600 var(--nx-text-sm) / 1.4 var(--nx-font-sans);
  }
  .nx-promo-bar-text {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.15rem var(--nx-space-2);
    margin: 0;
  }
  .nx-promo-bar-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
      transition: translate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    }
    &:hover .nx-icon {
      translate: calc(0.15rem * var(--nx-dir)) 0;
    }
    &:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 2px;
      border-radius: var(--nx-radius-sm);
    }
  }
  .nx-promo-bar-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: var(--nx-radius-sm);
    background: var(--nx-surface);
    color: var(--nx-accent-text);
    font: 700 var(--nx-text-xs) / 1.4 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-wide);
    text-transform: uppercase;
    rotate: calc(-4deg * var(--nx-motion));
    box-shadow: var(--nx-shadow-sm);
  }
  .nx-promo-bar-close {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: var(--nx-space-2);
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-full);
    background: transparent;
    color: inherit;
    opacity: 0.75;
    translate: 0 -50%;
    cursor: pointer;
    transition-property:
      scale,
      opacity,
      background-color;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out);
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
    &:hover {
      opacity: 1;
      background: color-mix(in oklab, currentColor 14%, transparent);
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.06 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 2px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-promo-bar {
      animation: none;
    }
    .nx-promo-bar[data-closing] {
      translate: none;
    }
  }
  .nx-hover-nav-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nx-space-3) var(--nx-space-5);
    padding-block: var(--nx-space-2);
    padding-inline: var(--nx-space-4);
    border: 1px solid var(--nx-glass-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-glass);
    box-shadow: var(--nx-shadow-sm), inset 0 1px 0 var(--nx-highlight);
  }
  .nx-hover-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    color: var(--nx-text);
    font: 700 var(--nx-text-base) / 1 var(--nx-font-display);
    text-decoration: none;
    transition-property: opacity;
    transition-duration: var(--nx-dur-fast);
    transition-timing-function: var(--nx-ease-out);
    &:hover {
      opacity: 0.75;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 4px;
    }
  }
  .nx-hover-nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nx-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-hover-nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-1);
    min-block-size: 2.25rem;
    padding: var(--nx-space-2) var(--nx-space-3);
    border: 0;
    border-radius: var(--nx-radius-full);
    background: transparent;
    color: var(--nx-text-muted);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    text-decoration: none;
    cursor: pointer;
    transition-property:
      scale,
      background-color,
      color;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out);
    &:hover {
      background: color-mix(in oklab, var(--nx-text) 6%, transparent);
      color: var(--nx-text);
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-hover-nav-link[aria-expanded=true] {
    background: var(--nx-accent-soft);
    color: var(--nx-accent-text);
  }
  .nx-hover-nav-caret {
    display: inline-flex;
    opacity: 0.7;
    transition: rotate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    .nx-icon {
      inline-size: 0.875rem;
      block-size: 0.875rem;
    }
  }
  [aria-expanded=true] > .nx-hover-nav-caret {
    rotate: 180deg;
  }
  .nx-hover-nav-panel {
    --_ix: 0px;
    --_iy: calc(-10px * var(--nx-motion));
    --_lx: 0px;
    --_ly: calc(-8px * var(--nx-motion));
    position: fixed;
    inset: auto;
    z-index: var(--nx-z-dropdown);
    display: grid;
    inline-size: max-content;
    min-inline-size: min(var(--nx-hover-nav-width, 18rem), calc(100vw - 1rem));
    margin: 0;
    padding: 0;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-xl), inset 0 1px 0 var(--nx-highlight);
    overflow: clip;
    transform-origin: var(--nx-origin, top center);
    opacity: 0;
    scale: 0.95;
    translate: var(--_lx) var(--_ly);
    transition:
      opacity 150ms var(--nx-ease-out),
      scale 150ms var(--nx-ease-out),
      translate 150ms var(--nx-ease-out),
      display 150ms allow-discrete,
      overlay 150ms allow-discrete;
  }
  .nx-hover-nav-panel[data-enter=top] {
    --_iy: calc(-10px * var(--nx-motion));
  }
  .nx-hover-nav-panel[data-enter=bottom] {
    --_iy: calc(10px * var(--nx-motion));
  }
  .nx-hover-nav-panel[data-enter=left] {
    --_ix: calc(-10px * var(--nx-motion));
    --_iy: 0px;
  }
  .nx-hover-nav-panel[data-enter=right] {
    --_ix: calc(10px * var(--nx-motion));
    --_iy: 0px;
  }
  .nx-hover-nav-panel[data-leave=top] {
    --_ly: calc(-8px * var(--nx-motion));
    --_lx: 0px;
  }
  .nx-hover-nav-panel[data-leave=bottom] {
    --_ly: calc(8px * var(--nx-motion));
    --_lx: 0px;
  }
  .nx-hover-nav-panel[data-leave=left] {
    --_lx: calc(-8px * var(--nx-motion));
    --_ly: 0px;
  }
  .nx-hover-nav-panel[data-leave=right] {
    --_lx: calc(8px * var(--nx-motion));
    --_ly: 0px;
  }
  .nx-hover-nav-panel:where(:popover-open, [data-open]) {
    opacity: 1;
    scale: 1;
    translate: 0 0;
    transition:
      opacity var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      translate var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      display 300ms allow-discrete,
      overlay 300ms allow-discrete;
    @starting-style {
      opacity: 0;
      scale: 0.95;
      translate: var(--_ix) var(--_iy);
    }
  }
  .nx-hover-nav-panel:not([popover]):not([data-open]) {
    display: none;
  }
  .nx-hover-nav-menu {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: var(--nx-space-2);
    list-style: none;
  }
  .nx-hover-nav-choice {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    padding: var(--nx-space-2) var(--nx-space-3);
    border-radius: var(--nx-radius-lg);
    color: inherit;
    text-decoration: none;
    opacity: 0;
    translate: 0 calc(6px * var(--nx-motion));
    transition-property:
      opacity,
      translate,
      background-color;
    transition-duration:
      200ms,
      200ms,
      var(--nx-dur-fast);
    transition-timing-function: var(--nx-ease-out);
    &:hover {
      background: var(--nx-surface-2);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: -2px;
    }
  }
  .nx-hover-nav-panel:where(:popover-open, [data-open]) .nx-hover-nav-choice {
    opacity: 1;
    translate: 0 0;
    transition-delay:
      calc(var(--nx-j, 0) * var(--nx-stagger)),
      calc(var(--nx-j, 0) * var(--nx-stagger)),
      0s;
  }
  .nx-hover-nav-choice-icon {
    position: relative;
    z-index: 0;
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--nx-radius-md);
    background: var(--nx-accent-soft);
    color: var(--nx-accent-text);
    transition-property:
      scale,
      translate,
      color;
    transition-duration:
      var(--nx-spring-bouncy-duration),
      var(--nx-spring-bouncy-duration),
      var(--nx-dur-fast);
    transition-timing-function: var(--nx-spring-bouncy);
    .nx-icon {
      inline-size: 1.125rem;
      block-size: 1.125rem;
    }
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: inherit;
      background: var(--nx-gradient-brand);
      opacity: 0;
      transition: opacity var(--nx-dur-fast) var(--nx-ease-out);
    }
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-hover-nav-choice:hover .nx-hover-nav-choice-icon {
      scale: 1.08;
      translate: calc(2px * var(--nx-dir) * var(--nx-motion)) 0;
      &::after {
        opacity: 1;
      }
    }
  }
  .nx-hover-nav-choice-text {
    display: grid;
    gap: 2px;
    min-inline-size: 0;
  }
  .nx-hover-nav-choice-title {
    color: var(--nx-text);
    font: 600 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
  }
  .nx-hover-nav-choice-desc {
    color: var(--nx-text-subtle);
    font: 400 var(--nx-text-xs) / 1.4 var(--nx-font-sans);
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-hover-nav-panel {
      translate: none;
    }
    .nx-hover-nav-panel:where(:popover-open, [data-open]) {
      @starting-style {
        translate: none;
      }
    }
    .nx-hover-nav-choice {
      translate: none;
      transition-delay: 0s;
    }
  }
  @media (forced-colors: active) {
    .nx-hover-nav-bar,
    .nx-hover-nav-panel {
      border: 1px solid CanvasText;
    }
    .nx-hover-nav-choice-icon {
      border: 1px solid CanvasText;
    }
  }
  @media (forced-colors: active) {
    .nx-morph-menu-shell,
    .nx-dock-panels-shell,
    .nx-audio-room-shell,
    .nx-voice-recorder {
      border: 1px solid CanvasText;
    }
    .nx-morph-tabs-pill {
      outline: 2px solid Highlight;
    }
    .nx-promo-bar-badge {
      border: 1px solid CanvasText;
    }
  }
}

/* src/css/blocks/chip-filter.css */
@layer nx.components {
  .nx-chip-filter {
    --_fade: 1.5rem;
    min-inline-size: 0;
    max-inline-size: 100%;
  }
  .nx-chip-filter-row {
    position: relative;
    isolation: isolate;
    display: flex;
    gap: var(--nx-space-2);
    max-inline-size: 100%;
    padding-block: 0.375rem;
    padding-inline: var(--_fade);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--_fade);
    scrollbar-width: none;
    mask-image:
      linear-gradient(
        90deg,
        transparent,
        black var(--_fade),
        black calc(100% - var(--_fade)),
        transparent);
    &::-webkit-scrollbar {
      display: none;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .nx-chip-filter-row {
      scroll-behavior: smooth;
    }
  }
  .nx-chip-filter-thumb {
    z-index: -1;
    border-radius: var(--nx-radius-full);
    background: var(--nx-accent);
    box-shadow: var(--nx-shadow-glow);
  }
  .nx-chip-filter-chip {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--nx-space-2);
    min-block-size: 2rem;
    padding-inline: var(--nx-space-3);
    border-radius: var(--nx-radius-full);
    background: transparent;
    color: var(--nx-text-muted);
    font: 500 var(--nx-text-sm) / 1 var(--nx-font-sans);
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
    box-shadow: inset 0 0 0 1px var(--nx-border);
    transition-property:
      color,
      box-shadow,
      scale;
    transition-duration:
      var(--nx-dur-base),
      var(--nx-dur-base),
      var(--nx-spring-snappy-duration);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-snappy);
    > .nx-icon {
      flex: none;
      inline-size: 1rem;
      block-size: 1rem;
      color: var(--nx-text-subtle);
      transition: color var(--nx-dur-base) var(--nx-ease-out);
    }
    &:hover {
      color: var(--nx-text);
      box-shadow: inset 0 0 0 1px var(--nx-border-strong);
    }
    &:active:not(:has(:disabled)) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:has(:focus-visible) {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:has(:disabled) {
      opacity: 0.45;
      cursor: not-allowed;
    }
    &:has(:checked) {
      color: var(--nx-accent-contrast);
      font-weight: 600;
      box-shadow: none;
      > .nx-icon {
        color: var(--nx-accent-contrast);
      }
      .nx-chip-filter-count {
        background: color-mix(in oklab, var(--nx-accent-contrast) 22%, transparent);
        color: var(--nx-accent-contrast);
      }
    }
  }
  .nx-chip-filter-input {
    appearance: none;
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: inherit;
  }
  .nx-chip-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.25rem;
    block-size: 1.25rem;
    padding-inline: 0.3rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-2);
    color: var(--nx-text-muted);
    font: 700 var(--nx-text-xs) / 1 var(--nx-font-sans);
    transition: background-color var(--nx-dur-base) var(--nx-ease-out), color var(--nx-dur-base) var(--nx-ease-out);
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-chip-filter-row {
      scroll-behavior: auto;
    }
    .nx-chip-filter-chip:active {
      scale: none;
    }
  }
  @media (forced-colors: active) {
    .nx-chip-filter-chip {
      border: 1px solid CanvasText;
    }
    .nx-chip-filter-thumb {
      background: Highlight;
    }
  }
}

/* src/css/blocks/stat-strip.css */
@layer nx.components {
  .nx-stat-strip {
    --nx-stat-strip-value-size: var(--nx-text-3xl);
    display: flex;
    flex-wrap: wrap;
    gap: var(--nx-space-4) 0;
    margin: 0;
    padding: var(--nx-space-2) 0;
    overflow: clip;
  }
  .nx-stat-strip-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-3);
    flex: 1 1 auto;
    margin-inline-start: -1px;
    padding-inline: var(--nx-space-5);
    border-inline-start: 1px solid var(--nx-border);
  }
  .nx-stat-strip-icon {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-accent-soft);
    color: var(--nx-accent-text);
    .nx-icon {
      inline-size: 1.125rem;
      block-size: 1.125rem;
    }
  }
  .nx-stat-strip-what {
    display: grid;
    gap: 0.2rem;
    justify-items: center;
    min-inline-size: 0;
    text-align: center;
  }
  .nx-stat-strip-label {
    margin: 0;
    color: var(--nx-text-subtle);
    font: 600 var(--nx-text-xs) / 1.4 var(--nx-font-sans);
    text-transform: uppercase;
    letter-spacing: var(--nx-tracking-wider);
  }
  .nx-stat-strip-value {
    display: grid;
    gap: 0.15rem;
    justify-items: center;
    margin: 0;
    color: var(--nx-text);
    font: 650 var(--nx-stat-strip-value-size) / 1.1 var(--nx-font-display);
  }
  .nx-stat-strip-caption {
    color: var(--nx-text-muted);
    font: 400 var(--nx-text-xs) / 1.4 var(--nx-font-sans);
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-stat-strip .nx-digit-track {
      transition: none;
    }
  }
  @media (forced-colors: active) {
    .nx-stat-strip-item,
    .nx-stat-strip-icon {
      border-color: CanvasText;
    }
  }
}

/* src/css/blocks/sort-pill.css */
@layer nx.components {
  .nx-sort-pill-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    min-block-size: 2.5rem;
    padding-inline: var(--nx-space-4) var(--nx-space-3);
    border: 0;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-2);
    color: var(--nx-text);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.06), inset 0 0 0 1px var(--nx-border);
    cursor: pointer;
    transition-property:
      scale,
      background-color,
      box-shadow;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-base);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out);
    &:hover {
      background: var(--nx-surface-3);
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &[aria-expanded=true] {
      background: var(--nx-surface);
      box-shadow:
        var(--nx-shadow-sm),
        inset 0 1px 0 var(--nx-highlight),
        0 0 0 1px color-mix(in oklab, var(--nx-border) 70%, transparent);
    }
  }
  .nx-sort-pill-labels {
    display: inline-grid;
    place-items: center;
    min-inline-size: 4ch;
  }
  .nx-sort-pill-label {
    grid-area: 1 / 1;
    white-space: nowrap;
    opacity: 0;
    translate: 0 calc(0.7em * var(--nx-motion));
    filter: blur(calc(2px * var(--nx-motion)));
    transition:
      opacity 300ms cubic-bezier(0.2, 0, 0, 1),
      translate 300ms cubic-bezier(0.2, 0, 0, 1),
      filter 300ms cubic-bezier(0.2, 0, 0, 1);
  }
  .nx-sort-pill-labels > [data-current] {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
  .nx-sort-pill-chevron {
    display: inline-flex;
    color: var(--nx-text-subtle);
    transition: rotate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  [aria-expanded=true] > .nx-sort-pill-chevron {
    rotate: 180deg;
  }
  .nx-sort-pill {
    position: fixed;
    inset: auto;
    z-index: var(--nx-z-dropdown);
    display: grid;
    min-inline-size: min(13rem, calc(100vw - 1rem));
    margin: 0;
    padding: 0;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-xl), inset 0 1px 0 var(--nx-highlight);
    overflow: clip;
    transform-origin: var(--nx-origin, top center);
    opacity: 0;
    scale: 0.95;
    transition:
      opacity var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      display var(--nx-dur-fast) allow-discrete,
      overlay var(--nx-dur-fast) allow-discrete;
  }
  .nx-sort-pill:where(:popover-open, [data-open]) {
    opacity: 1;
    scale: 1;
    @starting-style {
      opacity: 0;
      scale: 0.95;
    }
  }
  .nx-sort-pill:not([popover]):not([data-open]) {
    display: none;
  }
  .nx-sort-pill-list {
    display: grid;
    margin: 0;
    padding: var(--nx-space-1);
    list-style: none;
  }
  .nx-sort-pill-option {
    border-radius: var(--nx-radius-lg);
    & + & {
      margin-block-start: 2px;
    }
  }
  .nx-sort-pill-choice {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    inline-size: 100%;
    min-block-size: 2.375rem;
    padding: var(--nx-space-2) var(--nx-space-3);
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: inherit;
    font: 500 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
    text-align: start;
    cursor: pointer;
    transition-property: background-color;
    transition-duration: var(--nx-dur-fast);
    transition-timing-function: var(--nx-ease-out);
    > .nx-icon {
      flex: none;
      inline-size: 1rem;
      block-size: 1rem;
      color: var(--nx-text-subtle);
    }
    > span {
      min-inline-size: 0;
    }
    &:hover {
      background: var(--nx-surface-2);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: -2px;
    }
  }
  .nx-sort-pill-option[data-selected] .nx-sort-pill-choice {
    background: var(--nx-accent-soft);
    color: var(--nx-accent-text);
    > .nx-icon {
      color: var(--nx-accent-text);
    }
  }
  .nx-sort-pill-mark {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin-inline-start: auto;
    border-radius: 50%;
    background: var(--nx-accent);
    color: var(--nx-accent-text);
    opacity: 0;
    scale: 0.25;
    transition: opacity var(--nx-spring-snappy-duration) var(--nx-spring-snappy), scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
    .nx-icon {
      inline-size: 0.75rem;
      block-size: 0.75rem;
    }
  }
  .nx-sort-pill-option[data-selected] .nx-sort-pill-mark {
    opacity: 1;
    scale: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-sort-pill-label {
      translate: none;
      filter: none;
      transition: opacity 150ms var(--nx-ease-out);
    }
  }
  @media (forced-colors: active) {
    .nx-sort-pill-trigger {
      box-shadow: inset 0 0 0 1px ButtonText;
    }
    .nx-sort-pill {
      border: 1px solid CanvasText;
    }
    .nx-sort-pill-mark {
      border: 1px solid ButtonText;
    }
  }
}

/* src/css/blocks/glass.css */
@property --nx-light { syntax: "<angle>"; inherits: true; initial-value: 315deg; }
@property --nx-lens-power { syntax: "<number>"; inherits: false; initial-value: 1; }
@layer nx.components {
  .nx-glass {
    --_frost: 10px;
    --_sat: 1.7;
    --_tint: var(--nx-glass-tint);
    --_rim: 1.25px;
    --_radius: var(--nx-radius-2xl);
    position: relative;
    isolation: isolate;
    border-radius: var(--_radius);
    color: var(--nx-text);
    background-color: var(--_tint);
    background-image:
      linear-gradient(
        180deg,
        var(--nx-glass-sheen),
        transparent 42%);
    -webkit-backdrop-filter: blur(var(--_frost)) saturate(var(--_sat));
    backdrop-filter: var(--nx-refract,) blur(var(--_frost)) saturate(var(--_sat));
    box-shadow:
      inset 0 0 0 1px var(--nx-glass-rim-soft),
      inset 0 1px 0 var(--nx-glass-rim),
      0 0 0 0.5px var(--nx-glass-edge),
      0 1px 2px var(--nx-glass-shade),
      0 16px 36px -16px var(--nx-glass-shade);
    &[data-preset=clear] {
      --_frost: 1px;
      --_sat: 1.4;
      --_tint: transparent;
    }
    &[data-preset=frost] {
      --_frost: 24px;
      --_tint: var(--nx-glass-tint-hover);
    }
    &[data-preset=thick] {
      --_frost: 4px;
      --_rim: 2px;
      box-shadow:
        inset 0 0 0 1px var(--nx-glass-rim-soft),
        inset 0 2px 1px var(--nx-glass-rim),
        inset 0 -8px 18px -12px var(--nx-glass-rim),
        0 0 0 0.5px var(--nx-glass-edge),
        0 2px 4px var(--nx-glass-shade),
        0 28px 56px -20px var(--nx-glass-shade);
    }
  }
  .nx-glass::before,
  .nx-lens::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: var(--_rim, 1.25px);
    background:
      conic-gradient(
        from var(--nx-light),
        var(--nx-glass-rim) 0deg,
        transparent 58deg,
        var(--nx-glass-edge) 90deg,
        transparent 122deg,
        var(--nx-glass-rim-soft) 180deg,
        transparent 238deg,
        var(--nx-glass-edge) 270deg,
        transparent 302deg,
        var(--nx-glass-rim) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
  }
  .nx-glass[data-iridescent]::after,
  .nx-lens[data-iridescent]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background:
      conic-gradient(
        from calc(var(--nx-light) + 30deg),
        var(--nx-violet-300),
        var(--nx-cyan-300),
        var(--nx-gold-200),
        var(--nx-lapis-300),
        var(--nx-violet-300));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    filter: blur(1px);
    opacity: 0.55;
    pointer-events: none;
  }
  .nx-glass[data-interactive] {
    cursor: pointer;
    transition: background-color var(--nx-dur-fast) var(--nx-ease-out), scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
    &:active:not([data-static], :disabled, [aria-disabled=true]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
      transition-duration: var(--nx-dur-fast), 120ms;
      transition-timing-function: var(--nx-ease-out), var(--nx-ease-out);
    }
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-glass[data-interactive]:hover:not(:disabled, [aria-disabled=true]) {
      --_tint: var(--nx-glass-tint-hover);
    }
  }
  .nx-glass-button {
    --_radius: var(--nx-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    min-block-size: 2.75rem;
    padding-block: 0;
    padding-inline: var(--nx-space-5);
    border: 0;
    font: inherit;
    font-weight: 600;
    font-size: var(--nx-text-sm);
    letter-spacing: var(--nx-tracking-tight);
    text-decoration: none;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    &:has(> .nx-icon:last-child):not(:has(> .nx-icon:first-child)) {
      padding-inline-end: calc(var(--nx-space-5) - 2px);
    }
    &:has(> .nx-icon:first-child):not(:has(> .nx-icon:last-child)) {
      padding-inline-start: calc(var(--nx-space-5) - 2px);
    }
    &[data-size=sm] {
      min-block-size: 2.25rem;
      padding-inline: var(--nx-space-4);
      font-size: var(--nx-text-xs);
    }
    &[data-size=lg] {
      min-block-size: 3.25rem;
      padding-inline: var(--nx-space-6);
      font-size: var(--nx-text-base);
    }
    &[data-icon-only] {
      padding-inline: 0;
      aspect-ratio: 1;
      min-inline-size: 2.75rem;
    }
    &[data-icon-only][data-size=sm] {
      min-inline-size: 2.25rem;
    }
    &[data-icon-only][data-size=lg] {
      min-inline-size: 3.25rem;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-glass-panel {
    display: block;
    padding: var(--nx-space-6);
  }
  .nx-lens {
    --_rim: 1.25px;
    --_tint: transparent;
    position: absolute;
    border-radius: var(--nx-radius-full);
    background-color: var(--_tint);
    background-image:
      radial-gradient(
        120% 80% at 50% 0%,
        var(--nx-glass-sheen),
        transparent 62%);
    box-shadow:
      inset 0 0 0 1px var(--nx-glass-rim-soft),
      inset 0 1px 1px var(--nx-glass-rim),
      inset 0 -2px 4px -2px var(--nx-glass-rim-soft),
      inset 0 0 12px -5px var(--nx-glass-shade),
      0 0 0 0.5px var(--nx-glass-edge),
      0 2px 4px -2px var(--nx-glass-shade),
      0 10px 22px -10px var(--nx-glass-shade);
    pointer-events: none;
  }
  .nx-glass-seg {
    --_pad: 4px;
    --_h: 2.25rem;
    --_radius: var(--nx-radius-full);
    display: inline-grid;
    padding: var(--_pad);
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
  }
  .nx-glass-seg-track {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
  .nx-glass-seg-option {
    position: relative;
    display: grid;
    place-items: center;
    gap: var(--nx-space-1);
    grid-auto-flow: column;
    min-block-size: var(--_h);
    padding-inline: var(--nx-space-4);
    border-radius: var(--nx-radius-full);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: color var(--nx-dur-fast) var(--nx-ease-out);
    & input {
      position: absolute;
      inset: 0;
      margin: 0;
      opacity: 0;
      cursor: pointer;
    }
    &:has(input:checked) {
      color: var(--nx-text);
    }
    &:has(input:focus-visible) {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:has(input:disabled) {
      opacity: 0.45;
      cursor: not-allowed;
    }
  }
  .nx-glass-seg-lens {
    --nx-lens-power: 1;
    --_tint: var(--nx-glass-tint);
    z-index: 1;
    transition:
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      inline-size var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      block-size var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy),
      --nx-lens-power var(--nx-dur-base) var(--nx-ease-out),
      opacity var(--nx-dur-fast) var(--nx-ease-out);
  }
  .nx-glass-seg[data-pressed] .nx-glass-seg-lens {
    --nx-lens-power: 1.7;
    scale: calc(1 + 0.1 * var(--nx-motion)) calc(1 + 0.16 * var(--nx-motion));
  }
  .nx-glass-seg[data-dragging] .nx-glass-seg-lens {
    transition: scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy), --nx-lens-power var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-glass-dock {
    --_item: 3rem;
    --_gap: var(--nx-space-2);
    --_pad: var(--nx-space-2);
    --_tile-radius: 0.875rem;
    --_radius: calc(var(--_tile-radius) + var(--_pad));
    display: inline-flex;
    padding: var(--_pad);
  }
  .nx-glass-dock-items {
    position: relative;
    display: flex;
    gap: var(--_gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-glass-dock-item {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: var(--_item);
    block-size: var(--_item);
    border: 0;
    border-radius: var(--_tile-radius);
    padding: 0;
    color: var(--nx-text);
    background: var(--_tile, var(--nx-surface-2));
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: scale var(--nx-dur-fast) var(--nx-ease-out);
    & .nx-icon {
      inline-size: 1.375rem;
      block-size: 1.375rem;
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 3px;
    }
    &[data-tone] {
      color: var(--nx-ink-50);
    }
    &[data-tone=lapis] {
      --_tile:
        linear-gradient(
          160deg,
          var(--nx-lapis-400),
          var(--nx-lapis-700));
    }
    &[data-tone=violet] {
      --_tile:
        linear-gradient(
          160deg,
          var(--nx-violet-400),
          var(--nx-violet-700));
    }
    &[data-tone=cyan] {
      --_tile:
        linear-gradient(
          160deg,
          var(--nx-cyan-300),
          var(--nx-cyan-600));
    }
    &[data-tone=gold] {
      --_tile:
        linear-gradient(
          160deg,
          var(--nx-gold-300),
          var(--nx-gold-600));
      color: var(--nx-ink-900);
    }
    &[data-tone=ink] {
      --_tile:
        linear-gradient(
          160deg,
          var(--nx-ink-600),
          var(--nx-ink-900));
    }
    &[data-tone=rose] {
      --_tile:
        linear-gradient(
          160deg,
          var(--nx-chart-2),
          color-mix(in oklab, var(--nx-chart-2) 60%, var(--nx-ink-900)));
    }
    &[data-tone=green] {
      --_tile:
        linear-gradient(
          160deg,
          var(--nx-chart-7),
          color-mix(in oklab, var(--nx-chart-7) 60%, var(--nx-ink-900)));
    }
    &[aria-current]::after {
      content: "";
      position: absolute;
      inset-block-end: -6px;
      inline-size: 4px;
      block-size: 4px;
      border-radius: 50%;
      background: var(--nx-text-muted);
    }
  }
  .nx-glass-dock-lens {
    --nx-lens-power: 1;
    --_rim: 1.5px;
    border-radius: calc(var(--_tile-radius) + 4px);
    margin: -4px;
    inline-size: calc(var(--nx-ind-w, 0px) + 8px);
    block-size: calc(var(--nx-ind-h, 0px) + 8px);
    z-index: 1;
    transition:
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy),
      --nx-lens-power var(--nx-dur-base) var(--nx-ease-out),
      opacity var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-glass-dock:not([data-active]) .nx-glass-dock-lens {
    opacity: 0;
    --nx-lens-power: 0;
  }
  .nx-glass-dock[data-pressed] .nx-glass-dock-lens {
    scale: calc(1 + 0.08 * var(--nx-motion));
    --nx-lens-power: 1.5;
  }
  .nx-glass-dock-tip {
    position: absolute;
    inset-block-end: calc(100% + var(--_pad) + var(--nx-space-2));
    left: 0;
    translate: calc(var(--nx-ind-x, 0px) + var(--nx-ind-w, 0px) / 2 - 50%) calc(4px * var(--nx-motion));
    padding: var(--nx-space-1) var(--nx-space-2);
    border-radius: var(--nx-radius-sm);
    background: var(--nx-text);
    color: var(--nx-bg);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle), opacity var(--nx-dur-fast) var(--nx-ease-out);
  }
  .nx-glass-dock[data-active] .nx-glass-dock-tip {
    opacity: 1;
    translate: calc(var(--nx-ind-x, 0px) + var(--nx-ind-w, 0px) / 2 - 50%) 0;
  }
  .nx-glass-switch {
    --_w: 3.5rem;
    --_h: 2rem;
    --_knob: 1.625rem;
    --_gap: 3px;
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-3);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .nx-glass-switch-control {
    position: relative;
    flex: none;
    inline-size: var(--_w);
    block-size: var(--_h);
  }
  .nx-glass-switch-input {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  .nx-glass-switch-track {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-3);
    box-shadow: inset 0 1px 2px var(--nx-glass-edge);
    transition: background-color var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-glass-switch-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
      linear-gradient(
        90deg,
        var(--nx-accent),
        color-mix(in oklab, var(--nx-accent) 70%, var(--nx-cyan-400)));
    clip-path: inset(0 100% 0 0 round var(--nx-radius-full));
    transition: clip-path var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
  }
  :dir(rtl) .nx-glass-switch-fill {
    clip-path: inset(0 0 0 100% round var(--nx-radius-full));
  }
  .nx-glass-switch-control:has(:checked) .nx-glass-switch-fill {
    clip-path: inset(0 0 0 0 round var(--nx-radius-full));
  }
  .nx-glass-switch-thumb {
    --nx-lens-power: 0;
    --_tint: var(--nx-ink-50);
    --_travel: calc(var(--_w) - var(--_knob) - var(--_gap) * 2);
    inset-block-start: var(--_gap);
    inset-inline-start: var(--_gap);
    inline-size: var(--_knob);
    block-size: var(--_knob);
    background-color: var(--_tint);
    transition:
      translate var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy),
      inline-size var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy),
      scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy),
      background-color var(--nx-dur-base) var(--nx-ease-out),
      --nx-lens-power var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-glass-switch-control:has(:checked) .nx-glass-switch-thumb {
    translate: calc(var(--_travel) * var(--nx-dir)) 0;
  }
  .nx-glass-switch-control:has(:active:not(:disabled)) .nx-glass-switch-thumb {
    --nx-lens-power: 1;
    --_tint: color-mix(in oklab, var(--nx-surface) 12%, transparent);
    inline-size: calc(var(--_knob) + 0.625rem);
    scale: calc(1 + 0.22 * var(--nx-motion));
  }
  .nx-glass-switch-control:has(:checked:active:not(:disabled)) .nx-glass-switch-thumb {
    translate: calc((var(--_travel) - 0.625rem) * var(--nx-dir)) 0;
  }
  .nx-glass-switch-control:has(:focus-visible) {
    outline: 2px solid var(--nx-ring);
    outline-offset: 2px;
    border-radius: var(--nx-radius-full);
  }
  .nx-glass-switch:has(:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .nx-glass-slider {
    --_thumb: 1.75rem;
    --_track: 0.375rem;
    --p: 0.5;
    position: relative;
    display: block;
    block-size: 2.75rem;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
  }
  .nx-glass-slider-bed {
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
  }
  .nx-glass-slider-track {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 50%;
    block-size: var(--_track);
    translate: 0 -50%;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-3);
    overflow: hidden;
  }
  .nx-glass-slider-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: calc(var(--_thumb) / 2 + var(--p) * (100% - var(--_thumb)));
    border-radius: inherit;
    background:
      linear-gradient(
        90deg,
        var(--nx-accent),
        color-mix(in oklab, var(--nx-accent) 65%, var(--nx-cyan-400)));
  }
  :dir(rtl) .nx-glass-slider-fill {
    background:
      linear-gradient(
        270deg,
        var(--nx-accent),
        color-mix(in oklab, var(--nx-accent) 65%, var(--nx-cyan-400)));
  }
  .nx-glass-slider-ticks {
    position: absolute;
    inset-inline: calc(var(--_thumb) / 2);
    inset-block: 0.35rem;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    & > span {
      inline-size: 1px;
      background:
        linear-gradient(
          var(--nx-border-strong) 0 28%,
          transparent 28% 72%,
          var(--nx-border-strong) 72%);
    }
  }
  .nx-glass-slider-thumb {
    --nx-lens-power: 0;
    --_tint: var(--nx-ink-50);
    inset-block-start: 50%;
    inset-inline-start: calc(var(--p) * (100% - var(--_thumb)));
    inline-size: var(--_thumb);
    block-size: var(--_thumb);
    translate: 0 -50%;
    transition:
      scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy),
      background-color var(--nx-dur-base) var(--nx-ease-out),
      --nx-lens-power var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-glass-slider[data-dragging] .nx-glass-slider-thumb {
    --nx-lens-power: 1;
    --_tint: color-mix(in oklab, var(--nx-surface) 10%, transparent);
    scale: calc(1 + 0.5 * var(--nx-motion));
  }
  .nx-glass-slider-input {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    appearance: none;
    background: transparent;
    &::-webkit-slider-thumb {
      appearance: none;
      inline-size: var(--_thumb);
      block-size: var(--_thumb);
    }
    &::-moz-range-thumb {
      inline-size: var(--_thumb);
      block-size: var(--_thumb);
      border: 0;
    }
  }
  .nx-glass-slider:has(.nx-glass-slider-input:focus-visible) .nx-glass-slider-thumb {
    outline: 2px solid var(--nx-ring);
    outline-offset: 2px;
  }
  .nx-glass-slider-value {
    position: absolute;
    inset-block-end: calc(100% + var(--nx-space-1));
    inset-inline-start: calc(var(--_thumb) / 2 + var(--p) * (100% - var(--_thumb)));
    translate: calc(-50% * var(--nx-dir)) calc(6px * var(--nx-motion));
    padding: 2px var(--nx-space-2);
    border-radius: var(--nx-radius-full);
    background: var(--nx-text);
    color: var(--nx-bg);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    pointer-events: none;
    transition: translate var(--nx-spring-snappy-duration) var(--nx-spring-snappy), opacity var(--nx-dur-fast) var(--nx-ease-out);
  }
  .nx-glass-slider[data-dragging] .nx-glass-slider-value {
    opacity: 1;
    translate: calc(-50% * var(--nx-dir)) calc(-0.625rem * var(--nx-motion));
  }
  .nx-glass-tabbar {
    --_pad: 5px;
    --_radius: var(--nx-radius-full);
    display: inline-flex;
    padding: var(--_pad);
    transition: padding var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
  }
  .nx-glass-tabbar-items {
    position: relative;
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-glass-tab {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    justify-items: center;
    align-content: center;
    min-inline-size: 4.25rem;
    min-block-size: 2.75rem;
    padding: var(--nx-space-1) var(--nx-space-3);
    border: 0;
    border-radius: var(--nx-radius-full);
    color: var(--nx-text-muted);
    background: none;
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
      color var(--nx-dur-fast) var(--nx-ease-out),
      min-inline-size var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      grid-template-rows var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      padding var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    & .nx-icon {
      inline-size: 1.375rem;
      block-size: 1.375rem;
    }
    & > span {
      max-inline-size: 10rem;
      overflow: hidden;
      white-space: nowrap;
      transition: opacity var(--nx-dur-fast) var(--nx-ease-out), max-inline-size var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    }
    &:is([aria-current=page], [aria-selected=true]) {
      color: var(--nx-accent-text);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-glass-tabbar[data-compact] {
    --_pad: 4px;
    & .nx-glass-tab {
      grid-template-rows: auto 0fr;
      min-inline-size: 2.75rem;
      padding-inline: var(--nx-space-2);
    }
    & .nx-glass-tab > span {
      opacity: 0;
      max-inline-size: 0;
    }
  }
  .nx-glass-tabbar-lens {
    --nx-lens-power: 1;
    --_tint: color-mix(in oklab, var(--nx-accent) 9%, transparent);
    z-index: 1;
    transition:
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      inline-size var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      block-size var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy),
      --nx-lens-power var(--nx-dur-base) var(--nx-ease-out),
      opacity var(--nx-dur-fast) var(--nx-ease-out);
  }
  .nx-glass-tabbar[data-pressed] .nx-glass-tabbar-lens {
    --nx-lens-power: 1.6;
    scale: calc(1 + 0.08 * var(--nx-motion)) calc(1 + 0.12 * var(--nx-motion));
  }
  .nx-reading-glass {
    position: relative;
    isolation: isolate;
  }
  .nx-reading-glass-content {
    background: var(--nx-bg);
  }
  .nx-reading-glass-lens {
    --nx-lens-power: 1;
    --_rim: 1.5px;
    --_size: 9rem;
    top: 0;
    left: 0;
    inline-size: var(--_size);
    block-size: var(--_size);
    padding: 0;
    border: 0;
    z-index: 2;
    translate: var(--nx-lens-x, 0px) var(--nx-lens-y, 0px);
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
    transition: scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy), --nx-lens-power var(--nx-dur-base) var(--nx-ease-out);
    &[data-shape=pill] {
      inline-size: calc(var(--_size) * 1.7);
    }
    &[data-shape=rounded] {
      border-radius: calc(var(--_size) * 0.28);
    }
    &[data-held] {
      cursor: grabbing;
      scale: calc(1 + 0.06 * var(--nx-motion));
      --nx-lens-power: 1.25;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 4px;
    }
  }
  .nx-liquid-ripple {
    position: relative;
    display: block;
  }
}

/* src/css/blocks/backdrops.css */
@layer nx.components {
  .nx-backdrop-aurora,
  .nx-backdrop-starfield,
  .nx-backdrop-mesh,
  .nx-backdrop-dither,
  .nx-backdrop-plain {
    position: relative;
    isolation: isolate;
    overflow: clip;
  }
  .nx-backdrop-layer {
    position: absolute;
    z-index: -1;
    pointer-events: none;
  }
  .nx-backdrop-aurora > .nx-backdrop-layer {
    border-radius: 50%;
    filter: blur(72px);
    opacity: var(--nx-backdrop-intensity);
    animation: nx-backdrop-aurora-drift 26s var(--nx-ease-in-out) infinite alternate;
  }
  .nx-backdrop-aurora > .nx-backdrop-layer:nth-child(1) {
    inline-size: 62vmax;
    aspect-ratio: 1.75;
    inset-block-start: -18%;
    inset-inline-start: -12%;
    background:
      linear-gradient(
        115deg,
        transparent,
        color-mix(in oklab, var(--nx-lapis-500) 85%, var(--nx-violet-500)) 38% 62%,
        transparent);
    animation-delay: -4s;
  }
  .nx-backdrop-aurora > .nx-backdrop-layer:nth-child(2) {
    inline-size: 58vmax;
    aspect-ratio: 1.6;
    inset-block-end: -20%;
    inset-inline-end: -12%;
    background:
      linear-gradient(
        65deg,
        transparent,
        color-mix(in oklab, var(--nx-violet-500) 80%, var(--nx-lapis-500)) 35% 65%,
        transparent);
    filter: blur(88px);
    opacity: calc(var(--nx-backdrop-intensity) * 0.9);
    animation-duration: 32s;
    animation-delay: -13s;
  }
  .nx-backdrop-aurora > .nx-backdrop-layer:nth-child(3) {
    inline-size: 42vmax;
    aspect-ratio: 1.35;
    inset-block-start: 32%;
    inset-inline-start: 26%;
    background:
      radial-gradient(
        50% 50%,
        var(--nx-cyan-500),
        transparent 68%);
    filter: blur(60px);
    opacity: calc(var(--nx-backdrop-intensity) * 0.6);
    animation-duration: 21s;
    animation-delay: -9s;
  }
  @keyframes nx-backdrop-aurora-drift {
    0% {
      translate: 0 0;
      rotate: calc(-4deg * var(--nx-motion));
      scale: 1;
    }
    50% {
      translate: calc(5vmax * var(--nx-motion)) calc(3vmax * var(--nx-motion));
      rotate: calc(5deg * var(--nx-motion));
      scale: 1.07;
    }
    100% {
      translate: calc(-3vmax * var(--nx-motion)) calc(5vmax * var(--nx-motion));
      rotate: calc(-3deg * var(--nx-motion));
      scale: 0.96;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-backdrop-aurora > .nx-backdrop-layer {
      animation: none;
    }
  }
  .nx-backdrop-starfield {
    --_tile: 1500px;
    background:
      radial-gradient(
        ellipse 90% 70% at 50% 118%,
        color-mix(in oklab, var(--nx-lapis-700) 30%, transparent),
        transparent 62%);
  }
  .nx-backdrop-starfield > .nx-backdrop-layer {
    inset: 0;
    -webkit-mask-image:
      radial-gradient(
        ellipse 88% 82% at 50% 44%,
        #000 38%,
        transparent 78%);
    mask-image:
      radial-gradient(
        ellipse 88% 82% at 50% 44%,
        #000 38%,
        transparent 78%);
    &::before,
    &::after {
      content: "";
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      inline-size: var(--_dot);
      block-size: var(--_dot);
      border-radius: 50%;
      box-shadow: var(--_stars);
      animation: nx-backdrop-starfield-drift var(--_speed) linear infinite;
    }
    &::after {
      inset-block-start: calc(-1 * var(--_tile));
    }
    &:nth-child(1) {
      --_dot: 1px;
      --_speed: 190s;
      --_c: color-mix(in oklab, var(--nx-star) 45%, transparent);
      --_stars:
        983px 1363px 0 0 var(--_c),
        477px 996px 0 0 var(--_c),
        1390px 248px 0 0 var(--_c),
        1158px 998px 0 0 var(--_c),
        525px 733px 0 0 var(--_c),
        955px 266px 0 0 var(--_c),
        1847px 175px 0 0 var(--_c),
        2093px 347px 0 0 var(--_c),
        1157px 1134px 0 0 var(--_c),
        531px 1337px 0 0 var(--_c),
        1298px 328px 0 0 var(--_c),
        148px 1084px 0 0 var(--_c),
        67px 1147px 0 0 var(--_c),
        690px 143px 0 0 var(--_c),
        96px 573px 0 0 var(--_c),
        182px 440px 0 0 var(--_c),
        2119px 623px 0 0 var(--_c),
        886px 696px 0 0 var(--_c),
        669px 334px 0 0 var(--_c),
        1292px 916px 0 0 var(--_c),
        1857px 1432px 0 0 var(--_c),
        31px 550px 0 0 var(--_c),
        287px 681px 0 0 var(--_c),
        104px 1301px 0 0 var(--_c),
        508px 1077px 0 0 var(--_c),
        1793px 980px 0 0 var(--_c),
        1684px 1240px 0 0 var(--_c),
        452px 1231px 0 0 var(--_c),
        1916px 429px 0 0 var(--_c),
        1213px 1195px 0 0 var(--_c),
        317px 1047px 0 0 var(--_c),
        442px 1368px 0 0 var(--_c),
        2301px 57px 0 0 var(--_c),
        241px 534px 0 0 var(--_c),
        1463px 412px 0 0 var(--_c),
        828px 885px 0 0 var(--_c),
        837px 1330px 0 0 var(--_c),
        1637px 516px 0 0 var(--_c),
        1589px 13px 0 0 var(--_c),
        1257px 277px 0 0 var(--_c),
        225px 640px 0 0 var(--_c),
        931px 899px 0 0 var(--_c),
        2338px 1323px 0 0 var(--_c),
        747px 1087px 0 0 var(--_c),
        2152px 1099px 0 0 var(--_c),
        98px 641px 0 0 var(--_c),
        492px 877px 0 0 var(--_c),
        2265px 584px 0 0 var(--_c),
        1499px 1337px 0 0 var(--_c),
        1353px 1322px 0 0 var(--_c),
        2149px 782px 0 0 var(--_c),
        868px 164px 0 0 var(--_c),
        1774px 1458px 0 0 var(--_c),
        2129px 723px 0 0 var(--_c),
        1575px 1185px 0 0 var(--_c),
        997px 772px 0 0 var(--_c),
        1349px 375px 0 0 var(--_c),
        686px 490px 0 0 var(--_c),
        475px 310px 0 0 var(--_c),
        376px 996px 0 0 var(--_c),
        2100px 121px 0 0 var(--_c),
        1574px 796px 0 0 var(--_c),
        1477px 173px 0 0 var(--_c),
        49px 182px 0 0 var(--_c),
        1581px 203px 0 0 var(--_c),
        276px 407px 0 0 var(--_c);
    }
    &:nth-child(2) {
      --_dot: 1.5px;
      --_speed: 125s;
      --_c: color-mix(in oklab, var(--nx-star) 70%, transparent);
      --_stars:
        1346px 649px 0 0 var(--_c),
        874px 300px 0 0 var(--_c),
        1323px 294px 0 0 var(--_c),
        1877px 784px 0 0 var(--_c),
        95px 889px 0 0 var(--_c),
        679px 1378px 0 0 var(--_c),
        1064px 117px 0 0 var(--_c),
        2295px 529px 0 0 var(--_c),
        783px 383px 0 0 var(--_c),
        1272px 988px 0 0 var(--_c),
        1147px 70px 0 0 var(--nx-cyan-300),
        1832px 1369px 0 0 var(--_c),
        1844px 225px 0 0 var(--_c),
        829px 1104px 0 0 var(--_c),
        1753px 530px 0 0 var(--_c),
        1292px 1382px 0 0 var(--_c),
        230px 384px 0 0 var(--_c),
        1095px 784px 0 0 var(--_c),
        449px 51px 0 0 var(--_c),
        461px 284px 0 0 var(--_c),
        14px 812px 0 0 var(--_c),
        1832px 1243px 0 0 var(--_c),
        890px 1436px 0 0 var(--_c),
        2060px 1087px 0 0 var(--_c),
        1272px 138px 0 0 var(--_c),
        1005px 639px 0 0 var(--_c),
        761px 190px 0 0 var(--_c),
        1625px 30px 0 0 var(--nx-gold-300),
        894px 729px 0 0 var(--_c),
        1037px 1449px 0 0 var(--_c),
        799px 754px 0 0 var(--_c),
        1094px 418px 0 0 var(--_c),
        1945px 712px 0 0 var(--_c),
        77px 1353px 0 0 var(--nx-cyan-300),
        2152px 943px 0 0 var(--_c),
        2378px 1382px 0 0 var(--_c),
        1026px 204px 0 0 var(--_c),
        162px 1010px 0 0 var(--_c),
        2155px 759px 0 0 var(--_c),
        627px 762px 0 0 var(--_c),
        1949px 16px 0 0 var(--_c),
        1834px 571px 0 0 var(--_c);
    }
    &:nth-child(3) {
      --_dot: 2.5px;
      --_speed: 75s;
      --_c: var(--nx-star);
      --_stars:
        1936px 1355px 0 0 var(--_c),
        131px 1141px 0 0 var(--_c),
        431px 148px 0 0 var(--_c),
        2319px 163px 3px 0 color-mix(in oklab, var(--nx-gold-300) 55%, transparent),
        2319px 163px 0 0 var(--nx-gold-300),
        1235px 261px 0 0 var(--_c),
        1931px 480px 3px 0 color-mix(in oklab, var(--nx-cyan-300) 55%, transparent),
        1931px 480px 0 0 var(--nx-cyan-300),
        190px 67px 0 0 var(--_c),
        719px 412px 0 0 var(--_c),
        1302px 1045px 3px 0 color-mix(in oklab, var(--nx-gold-300) 55%, transparent),
        1302px 1045px 0 0 var(--nx-gold-300),
        273px 317px 0 0 var(--_c),
        702px 893px 0 0 var(--_c),
        906px 776px 0 0 var(--_c),
        849px 1334px 0 0 var(--_c),
        436px 635px 0 0 var(--_c),
        1544px 662px 3px 0 color-mix(in oklab, var(--nx-gold-300) 55%, transparent),
        1544px 662px 0 0 var(--nx-gold-300),
        477px 484px 0 0 var(--_c),
        1061px 365px 0 0 var(--_c),
        291px 1083px 3px 0 color-mix(in oklab, var(--nx-cyan-300) 55%, transparent),
        291px 1083px 0 0 var(--nx-cyan-300),
        189px 520px 0 0 var(--_c),
        309px 1378px 0 0 var(--_c);
      animation: nx-backdrop-starfield-twinkle 7.5s var(--nx-ease-in-out) infinite alternate;
    }
  }
  @keyframes nx-backdrop-starfield-drift {
    to {
      translate: 0 calc(var(--_tile) * var(--nx-motion));
    }
  }
  @keyframes nx-backdrop-starfield-twinkle {
    from {
      opacity: 0.6;
    }
    to {
      opacity: 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-backdrop-starfield > .nx-backdrop-layer,
    .nx-backdrop-starfield > .nx-backdrop-layer::before,
    .nx-backdrop-starfield > .nx-backdrop-layer::after {
      animation: none !important;
    }
  }
  .nx-backdrop-dither {
    background:
      radial-gradient(
        ellipse 75% 60% at 50% 58%,
        var(--nx-accent-soft),
        transparent 72%);
  }
  .nx-backdrop-dither > .nx-backdrop-layer {
    --_cell: var(--nx-dither-cell, 9px);
    inset: 0;
    opacity: calc(var(--nx-backdrop-intensity) * 2.2);
    background-image: radial-gradient(var(--_dot) 1px, transparent 1.5px);
    background-size: var(--_cell) var(--_cell);
    -webkit-mask-image:
      radial-gradient(
        ellipse 78% 68% at 50% 46%,
        #000 32%,
        transparent 80%);
    mask-image:
      radial-gradient(
        ellipse 78% 68% at 50% 46%,
        #000 32%,
        transparent 80%);
  }
  .nx-backdrop-dither > .nx-backdrop-layer:nth-child(1) {
    --_dot: color-mix(in oklab, var(--nx-lapis-500) 60%, transparent);
    animation: nx-backdrop-dither-wave-a 17s var(--nx-ease-in-out) infinite;
  }
  .nx-backdrop-dither > .nx-backdrop-layer:nth-child(2) {
    --_dot: color-mix(in oklab, var(--nx-violet-500) 55%, transparent);
    --_cell: calc(var(--nx-dither-cell, 9px) * 1.3);
    animation: nx-backdrop-dither-wave-b 23s var(--nx-ease-in-out) -7s infinite;
  }
  .nx-backdrop-dither > .nx-backdrop-layer:nth-child(3) {
    display: none;
  }
  @keyframes nx-backdrop-dither-wave-a {
    from {
      background-position: 0 0;
    }
    25% {
      background-position: calc(2 * var(--_cell) * var(--nx-motion)) calc(-1 * var(--_cell) * var(--nx-motion));
    }
    50% {
      background-position: calc(1 * var(--_cell) * var(--nx-motion)) calc(2 * var(--_cell) * var(--nx-motion));
    }
    75% {
      background-position: calc(3 * var(--_cell) * var(--nx-motion)) calc(1 * var(--_cell) * var(--nx-motion));
    }
    to {
      background-position: calc(4 * var(--_cell) * var(--nx-motion)) 0;
    }
  }
  @keyframes nx-backdrop-dither-wave-b {
    from {
      background-position: 0 0;
    }
    33% {
      background-position: calc(-2 * var(--_cell) * var(--nx-motion)) calc(1 * var(--_cell) * var(--nx-motion));
    }
    66% {
      background-position: calc(-1 * var(--_cell) * var(--nx-motion)) calc(-2 * var(--_cell) * var(--nx-motion));
    }
    to {
      background-position: calc(-3 * var(--_cell) * var(--nx-motion)) calc(2 * var(--_cell) * var(--nx-motion));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-backdrop-dither > .nx-backdrop-layer {
      animation: none !important;
    }
  }
  .nx-backdrop-mesh > .nx-backdrop-layer {
    border-radius: 50%;
    filter: blur(clamp(20px, 3vw, 44px));
    opacity: calc(var(--nx-backdrop-intensity) * 1.5);
    mix-blend-mode: var(--_mesh-blend, soft-light);
    animation: nx-backdrop-mesh-drift 26s var(--nx-ease-in-out) infinite alternate;
  }
  .nx-backdrop-mesh > .nx-backdrop-layer:nth-child(1) {
    inset-block: -32% 52%;
    inset-inline: -18% 46%;
    background:
      radial-gradient(
        closest-side,
        var(--nx-lapis-500),
        color-mix(in oklab, var(--nx-lapis-500) 30%, transparent) 58%,
        transparent);
    animation-delay: -5s;
  }
  .nx-backdrop-mesh > .nx-backdrop-layer:nth-child(2) {
    inset-block: -26% 44%;
    inset-inline: 44% -22%;
    background:
      radial-gradient(
        closest-side,
        var(--nx-violet-500),
        color-mix(in oklab, var(--nx-violet-500) 30%, transparent) 58%,
        transparent);
    animation-name: nx-backdrop-mesh-breathe;
    animation-duration: 31s;
    animation-delay: -14s;
    animation-direction: alternate-reverse;
  }
  .nx-backdrop-mesh > .nx-backdrop-layer:nth-child(3) {
    inset-block: 34% -32%;
    inset-inline: 30% -28%;
    background:
      radial-gradient(
        closest-side,
        var(--nx-cyan-500),
        color-mix(in oklab, var(--nx-cyan-500) 30%, transparent) 58%,
        transparent);
    animation-duration: 37s;
    animation-delay: -21s;
  }
  .nx-backdrop-mesh > .nx-backdrop-layer:nth-child(4) {
    inset-block: 46% -34%;
    inset-inline: -24% 42%;
    background:
      radial-gradient(
        closest-side,
        var(--nx-gold-500),
        color-mix(in oklab, var(--nx-gold-500) 26%, transparent) 55%,
        transparent);
    opacity: calc(var(--nx-backdrop-intensity) * 1.1);
    animation-name: nx-backdrop-mesh-breathe;
    animation-duration: 29s;
    animation-delay: -9s;
    animation-direction: alternate-reverse;
  }
  .nx-backdrop-mesh > .nx-backdrop-layer:nth-child(5) {
    --_weave: color-mix(in oklab, var(--nx-violet-500) 55%, var(--nx-cyan-500));
    inset-block: 12% 16%;
    inset-inline: 26% 30%;
    background:
      radial-gradient(
        closest-side,
        var(--_weave),
        color-mix(in oklab, var(--_weave) 28%, transparent) 60%,
        transparent);
    opacity: calc(var(--nx-backdrop-intensity) * 1.25);
    animation-duration: 43s;
    animation-delay: -30s;
  }
  @keyframes nx-backdrop-mesh-drift {
    0% {
      translate: 0 0;
      scale: 1;
    }
    33% {
      translate: calc(9% * var(--nx-motion) * var(--nx-dir)) calc(-6% * var(--nx-motion));
      scale: calc(1 + 0.14 * var(--nx-motion));
    }
    66% {
      translate: calc(-8% * var(--nx-motion) * var(--nx-dir)) calc(6% * var(--nx-motion));
      scale: calc(1 - 0.1 * var(--nx-motion));
    }
    100% {
      translate: calc(6% * var(--nx-motion) * var(--nx-dir)) calc(8% * var(--nx-motion));
      scale: calc(1 + 0.08 * var(--nx-motion));
    }
  }
  @keyframes nx-backdrop-mesh-breathe {
    0% {
      translate: calc(-4% * var(--nx-motion) * var(--nx-dir)) calc(3% * var(--nx-motion));
      scale: 0.94;
    }
    50% {
      translate: calc(5% * var(--nx-motion) * var(--nx-dir)) calc(-5% * var(--nx-motion));
      scale: calc(1 + 0.16 * var(--nx-motion));
    }
    100% {
      translate: calc(-3% * var(--nx-motion) * var(--nx-dir)) calc(5% * var(--nx-motion));
      scale: 0.98;
    }
  }
  :root {
    --_mesh-blend: soft-light;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme=light], .light) {
      --_mesh-blend: screen;
    }
  }
  [data-theme=dark],
  .dark {
    --_mesh-blend: screen;
  }
  [data-theme=light],
  .light {
    --_mesh-blend: soft-light;
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-backdrop-mesh > .nx-backdrop-layer {
      animation: none !important;
    }
  }
}

/* src/css/blocks/admin-shell.css */
@layer nx.components {
  .nx-admin {
    --_side: 16rem;
    --_rail: 4.25rem;
    --_pad: 0.625rem;
    --_radius: var(--nx-admin-radius, 0px);
    --_item-radius: var(--nx-radius-md);
    container-type: inline-size;
    min-inline-size: 0;
  }
  .nx-admin-frame {
    position: relative;
    display: grid;
    grid-template-columns: var(--_side) minmax(0, 1fr);
    block-size: var(--nx-admin-height, 100dvh);
    min-block-size: var(--nx-admin-min-height, 0px);
    border: var(--nx-admin-border, 0px) solid var(--nx-border);
    border-radius: var(--_radius);
    background: var(--nx-bg);
    overflow: clip;
    transition: grid-template-columns var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
  }
  .nx-admin-frame[data-collapsed] {
    grid-template-columns: var(--_rail) minmax(0, 1fr);
  }
  .nx-admin-sidebar {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--nx-space-3);
    min-inline-size: 0;
    min-block-size: 0;
    padding: var(--_pad);
    border-inline-end: 1px solid var(--nx-border);
    background: var(--nx-surface);
  }
  .nx-admin-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-block-size: 2.5rem;
    padding-inline: 0.6875rem;
    overflow: hidden;
    font-weight: 700;
    white-space: nowrap;
  }
  .nx-admin-mark {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 1.625rem;
    block-size: 1.625rem;
    border-radius: 0.5rem;
    background: var(--nx-gradient-brand);
    color: var(--nx-accent-contrast);
    font-size: var(--nx-text-xs);
    font-weight: 800;
    box-shadow: var(--nx-shadow-glow);
  }
  .nx-admin-brand-text {
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--nx-text);
    transition: opacity var(--nx-dur-base) var(--nx-ease-out), translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
  }
  .nx-admin-nav {
    position: relative;
    isolation: isolate;
    display: grid;
    flex: 1;
    align-content: start;
    gap: var(--nx-space-4);
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-inline-end: 0.125rem;
    .nx-indicator {
      z-index: -1;
      inset-inline: 0;
      inline-size: auto;
      translate: 0 var(--nx-ind-y, 0px);
      border-radius: var(--_item-radius);
      background: var(--nx-surface-2);
      box-shadow: var(--nx-shadow-sm), inset 0 1px 0 var(--nx-highlight);
      transition:
        translate var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
        block-size var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
        opacity var(--nx-dur-fast) var(--nx-ease-out);
    }
  }
  .nx-admin-group {
    display: grid;
    gap: 0.125rem;
    ul {
      display: grid;
      gap: 0.125rem;
      margin: 0;
      padding: 0;
      list-style: none;
    }
  }
  .nx-admin-group-label {
    margin: 0;
    padding: var(--nx-space-2) 0.9375rem var(--nx-space-1);
    overflow: hidden;
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    letter-spacing: var(--nx-tracking-wide);
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity var(--nx-dur-base) var(--nx-ease-out), translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
  }
  .nx-admin-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    inline-size: 100%;
    min-block-size: 2.5rem;
    padding-inline: 0.9375rem;
    border: 0;
    border-radius: var(--_item-radius);
    background: transparent;
    color: var(--nx-text-muted);
    font: 500 var(--nx-text-sm) / 1 var(--nx-font-sans);
    text-align: start;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
      color var(--nx-dur-fast) var(--nx-ease-out),
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    .nx-icon {
      flex: none;
      inline-size: 1.125rem;
      block-size: 1.125rem;
      color: var(--nx-text-subtle);
      transition: color var(--nx-dur-fast) var(--nx-ease-out);
    }
    &:hover {
      color: var(--nx-text);
      background: color-mix(in oklab, var(--nx-surface-2) 65%, transparent);
    }
    &:is([aria-current=page], [aria-current=true]) {
      color: var(--nx-text);
      font-weight: 600;
    }
    &:is([aria-current=page], [aria-current=true]) .nx-icon {
      color: var(--nx-accent-text);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: -2px;
    }
    &:active:not([data-static], [data-static] *, :disabled) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:disabled,
    &[aria-disabled=true] {
      opacity: 0.45;
      cursor: not-allowed;
    }
    &::after {
      content: attr(data-label) / "";
      position: absolute;
      inset-inline-start: calc(100% + 0.75rem);
      inset-block-start: 50%;
      z-index: 3;
      padding: 0.35rem 0.6rem;
      border-radius: var(--nx-radius-sm);
      background: var(--nx-surface-inverse);
      color: var(--nx-text-inverse);
      font-size: var(--nx-text-xs);
      font-weight: 500;
      white-space: nowrap;
      opacity: 0;
      translate: calc(-4px * var(--nx-dir) * var(--nx-motion)) -50%;
      pointer-events: none;
      visibility: hidden;
      transition:
        opacity var(--nx-dur-fast) var(--nx-ease-out),
        translate var(--nx-dur-fast) var(--nx-ease-out),
        visibility 0s linear var(--nx-dur-fast);
    }
  }
  .nx-admin-label {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity var(--nx-dur-base) var(--nx-ease-out), translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
  }
  .nx-admin-badge {
    flex: none;
    min-inline-size: 1.25rem;
    padding: 0.15rem 0.4rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-accent-soft);
    color: var(--nx-accent-text);
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    transition: opacity var(--nx-dur-fast) var(--nx-ease-out), scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
  }
  .nx-admin-sidebar-foot {
    display: grid;
    gap: 0.25rem;
    padding-block-start: var(--nx-space-3);
    border-block-start: 1px solid var(--nx-border);
  }
  .nx-admin-toggle .nx-icon {
    transition: rotate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
  }
  :is(.nx-admin-frame[data-collapsed], .nx-admin-sidebar[data-collapsed]) {
    .nx-admin-label,
    .nx-admin-brand-text,
    .nx-admin-group-label {
      opacity: 0;
      translate: calc(-6px * var(--nx-dir) * var(--nx-motion)) 0;
      pointer-events: none;
      transition-duration: 150ms, 150ms;
      transition-timing-function: var(--nx-ease-out), var(--nx-ease-out);
    }
    .nx-admin-toggle .nx-icon {
      rotate: 180deg;
    }
    .nx-admin-badge {
      position: absolute;
      inset-block-start: 0.35rem;
      inset-inline-start: 1.85rem;
      min-inline-size: 0.5rem;
      inline-size: 0.5rem;
      block-size: 0.5rem;
      padding: 0;
      border: 2px solid var(--nx-surface);
      background: var(--nx-accent);
      color: transparent;
      overflow: hidden;
    }
    .nx-admin-item:is(:hover, :focus-visible)::after {
      opacity: 1;
      translate: 0 -50%;
      visibility: visible;
      transition-delay: 0s;
    }
  }
  .nx-admin-main {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-inline-size: 0;
    min-block-size: 0;
  }
  .nx-admin-topbar {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    min-block-size: 3.5rem;
    padding: var(--nx-space-2) var(--nx-space-5);
    border-block-end: 1px solid var(--nx-border);
    background: color-mix(in oklab, var(--nx-surface) 72%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .nx-admin-topbar-start {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--nx-space-3);
    min-inline-size: 0;
  }
  .nx-admin-menu {
    display: none;
    place-items: center;
    flex: none;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-md);
    background: transparent;
    color: var(--nx-text-muted);
    cursor: pointer;
    transition:
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      color var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    .nx-icon {
      inline-size: 1.125rem;
      block-size: 1.125rem;
    }
    &:hover {
      background: var(--nx-surface-2);
      color: var(--nx-text);
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-admin-heading {
    display: grid;
    gap: 0.125rem;
    min-inline-size: 0;
    &:empty {
      display: none;
    }
  }
  .nx-admin-title {
    margin: 0;
    overflow: hidden;
    color: var(--nx-text);
    font: 650 var(--nx-text-md) / 1.3 var(--nx-font-display);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-admin-subtitle {
    margin: 0;
    overflow: hidden;
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-admin-search {
    display: flex;
    flex: 1;
    justify-content: center;
    min-inline-size: 0;
  }
  .nx-admin-search-btn {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    inline-size: min(100%, 22rem);
    min-block-size: 2.25rem;
    padding-inline: var(--nx-space-3);
    border: 0;
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface-2);
    box-shadow: inset 0 0 0 1px var(--nx-border);
    color: var(--nx-text-subtle);
    font: 400 var(--nx-text-sm) / 1 var(--nx-font-sans);
    cursor: pointer;
    transition:
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      box-shadow var(--nx-dur-fast) var(--nx-ease-out),
      color var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &:hover {
      background: var(--nx-surface-3);
      color: var(--nx-text-muted);
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
      box-shadow: none;
    }
    .nx-icon {
      flex: none;
      inline-size: 1rem;
      block-size: 1rem;
    }
    span {
      flex: 1;
      min-inline-size: 0;
      overflow: hidden;
      text-align: start;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .nx-kbd {
      flex: none;
    }
  }
  .nx-admin-actions {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    flex: none;
    &:empty {
      display: none;
    }
  }
  .nx-admin-user {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding-block: 0.25rem;
    padding-inline: 0.25rem 0.5rem;
    border: 0;
    border-radius: var(--nx-radius-full);
    background: transparent;
    color: var(--nx-text);
    font: 500 var(--nx-text-sm) / 1 var(--nx-font-sans);
    cursor: pointer;
    transition: background-color var(--nx-dur-fast) var(--nx-ease-out), scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &:hover {
      background: var(--nx-surface-2);
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    .nx-icon {
      flex: none;
      inline-size: 1rem;
      block-size: 1rem;
      color: var(--nx-text-subtle);
    }
  }
  .nx-admin-user-text {
    display: grid;
    gap: 0.0625rem;
    min-inline-size: 0;
    text-align: start;
    span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .nx-admin-user-name {
    font-weight: 600;
  }
  .nx-admin-user-role {
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
  }
  .nx-admin-user-menu {
    display: grid;
    min-inline-size: 12rem;
    padding: var(--nx-space-2);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-xl);
    z-index: var(--nx-z-dropdown);
    transform-origin: var(--nx-origin, top center);
    opacity: 0;
    scale: 0.96;
    transition:
      opacity var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      display var(--nx-dur-fast) allow-discrete,
      overlay var(--nx-dur-fast) allow-discrete;
  }
  .nx-admin-user-menu:where(:popover-open, [data-open]) {
    opacity: 1;
    scale: 1;
    @starting-style {
      opacity: 0;
      scale: 0.96;
    }
  }
  .nx-admin-user-menu:not([popover]):not([data-open]) {
    display: none;
  }
  .nx-admin-user-head {
    display: grid;
    gap: 0.125rem;
    padding: var(--nx-space-2) var(--nx-space-2) var(--nx-space-2);
    border-block-end: 1px solid var(--nx-border);
    margin-block-end: var(--nx-space-1);
  }
  .nx-admin-user-item {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    min-block-size: 2.25rem;
    padding-inline: var(--nx-space-2);
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: transparent;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    text-align: start;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      color var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    .nx-icon {
      flex: none;
      inline-size: 1rem;
      block-size: 1rem;
      color: var(--nx-text-subtle);
    }
    &:hover {
      background: var(--nx-surface-2);
      color: var(--nx-text);
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: -2px;
    }
  }
  .nx-admin-user-divider {
    margin: var(--nx-space-1) 0;
    border: 0;
    border-block-start: 1px solid var(--nx-border);
  }
  .nx-admin-content {
    min-block-size: 0;
    padding: var(--nx-space-5) var(--nx-space-5) var(--nx-space-8);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: -2px;
    }
  }
  .nx-admin-drawer {
    position: fixed;
    inset: auto;
    inset-block: 0;
    inset-inline-start: 0;
    display: flex;
    flex-direction: column;
    inline-size: min(var(--_side, 16rem), 86vw);
    max-inline-size: none;
    max-block-size: none;
    margin: 0;
    padding: var(--_pad, 0.625rem);
    border: 0;
    border-inline-end: 1px solid var(--nx-border);
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-xl);
    overflow: visible;
    opacity: 0;
    translate: calc(-100% * var(--nx-dir)) 0;
    transition:
      opacity var(--nx-dur-base) var(--nx-ease-out),
      translate var(--nx-spring-soft-duration) var(--nx-spring-soft),
      display var(--nx-dur-base) allow-discrete,
      overlay var(--nx-dur-base) allow-discrete;
  }
  .nx-admin-drawer:where(:popover-open, [data-open]) {
    opacity: 1;
    translate: 0 0;
    @starting-style {
      opacity: 0;
      translate: calc(-100% * var(--nx-dir)) 0;
    }
  }
  .nx-admin-drawer:not([popover]):not([data-open]) {
    display: none;
  }
  .nx-admin-drawer::backdrop {
    background: transparent;
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    transition:
      background-color var(--nx-dur-slow) var(--nx-ease-out),
      backdrop-filter var(--nx-dur-slow) var(--nx-ease-out),
      display var(--nx-dur-slow) allow-discrete,
      overlay var(--nx-dur-slow) allow-discrete;
  }
  .nx-admin-drawer:popover-open::backdrop {
    background: var(--nx-backdrop);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    @starting-style {
      background: transparent;
      -webkit-backdrop-filter: blur(0);
      backdrop-filter: blur(0);
    }
  }
  .nx-admin-drawer .nx-admin-sidebar {
    flex: 1;
    min-block-size: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .nx-admin-drawer .nx-admin-toggle {
    display: none;
  }
  .nx-admin-drawer .nx-admin-brand {
    padding-inline-end: 2.5rem;
  }
  .nx-admin-drawer-close {
    position: absolute;
    inset-block-start: calc(var(--_pad, 0.625rem) + 0.25rem);
    inset-inline-end: 0.25rem;
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: transparent;
    color: var(--nx-text-muted);
    cursor: pointer;
    transition:
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      color var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
    &:hover {
      background: var(--nx-surface-2);
      color: var(--nx-text);
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  @container (max-width: 48rem) {
    .nx-admin-frame {
      grid-template-columns: minmax(0, 1fr);
    }
    .nx-admin-frame > .nx-admin-sidebar {
      display: none;
    }
    .nx-admin-menu {
      display: grid;
    }
    .nx-admin-search {
      display: none;
    }
    .nx-admin-search[data-keep] {
      display: flex;
    }
    .nx-admin-content {
      padding: var(--nx-space-4);
    }
    .nx-admin-user-text {
      display: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-admin-frame,
    .nx-admin-drawer,
    .nx-admin-drawer::backdrop {
      transition-duration: var(--nx-dur-fast);
    }
    .nx-admin-item:active,
    .nx-admin-menu:active,
    .nx-admin-search-btn:active,
    .nx-admin-user:active,
    .nx-admin-user-item:active {
      scale: none;
    }
  }
  @media (forced-colors: active) {
    .nx-admin-item[aria-current] {
      border: 1px solid CanvasText;
    }
    .nx-admin-nav .nx-indicator {
      background: Highlight;
    }
  }
}

/* src/css/blocks/auth-card.css */
@layer nx.components {
  .nx-auth-card {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    inline-size: min(100%, var(--nx-auth-width, 64rem));
    margin: 0;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-2xl);
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-lg), inset 0 1px 0 var(--nx-highlight);
    overflow: clip;
  }
  @media (max-width: 52rem) {
    .nx-auth-card {
      grid-template-columns: minmax(0, 1fr);
    }
    .nx-auth-card-media {
      display: none;
    }
  }
  .nx-auth-card-media {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--nx-space-6);
    min-block-size: 30rem;
    padding: var(--nx-space-8);
    overflow: clip;
    background:
      linear-gradient(
        168deg,
        var(--nx-ink-850),
        var(--nx-ink-950) 72%);
    color: var(--nx-ink-50);
  }
  .nx-auth-card-glow {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(58px);
    opacity: 0.5;
    pointer-events: none;
    animation: nx-auth-card-drift 24s var(--nx-ease-in-out) infinite alternate;
  }
  .nx-auth-card-glow[data-i="1"] {
    inline-size: 130%;
    aspect-ratio: 1.5;
    inset-block-start: -22%;
    inset-inline-start: -28%;
    background:
      linear-gradient(
        120deg,
        transparent,
        var(--nx-lapis-500) 42% 62%,
        transparent);
  }
  .nx-auth-card-glow[data-i="2"] {
    inline-size: 120%;
    aspect-ratio: 1.4;
    inset-block-end: -26%;
    inset-inline-end: -30%;
    background:
      linear-gradient(
        280deg,
        transparent,
        var(--nx-violet-500) 40% 60%,
        transparent);
    animation-duration: 30s;
    animation-delay: -9s;
  }
  .nx-auth-card-glow[data-i="3"] {
    inline-size: 60%;
    aspect-ratio: 1.2;
    inset-block-start: 34%;
    inset-inline-end: -14%;
    background:
      radial-gradient(
        circle,
        var(--nx-cyan-400),
        transparent 68%);
    animation-duration: 21s;
    animation-delay: -15s;
    opacity: 0.3;
  }
  .nx-auth-card-gridlines {
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background:
      repeating-linear-gradient(
        to right,
        color-mix(in oklab, var(--nx-ink-50) 5%, transparent) 0 1px,
        transparent 1px 3.25rem),
      repeating-linear-gradient(
        to bottom,
        color-mix(in oklab, var(--nx-ink-50) 5%, transparent) 0 1px,
        transparent 1px 3.25rem);
    -webkit-mask-image:
      radial-gradient(
        115% 95% at 12% 6%,
        rgb(0 0 0 / 0.9),
        transparent 72%);
    mask-image:
      radial-gradient(
        115% 95% at 12% 6%,
        rgb(0 0 0 / 0.9),
        transparent 72%);
  }
  .nx-auth-card-brand {
    display: grid;
    gap: var(--nx-space-3);
    justify-items: start;
    margin-block-start: var(--nx-space-2);
  }
  .nx-auth-card-mark {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--nx-radius-md);
    background: var(--nx-gradient-brand);
    color: var(--nx-accent-contrast);
    font: 700 var(--nx-text-lg) / 1 var(--nx-font-display);
    box-shadow: 0 10px 26px -10px color-mix(in oklab, var(--nx-lapis-500) 80%, transparent);
  }
  .nx-auth-card-name {
    margin: 0;
    font: 650 var(--nx-text-xl) / 1.2 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
  }
  .nx-auth-card-tagline {
    margin: 0;
    max-inline-size: 28ch;
    color: var(--nx-ink-300);
    font-size: var(--nx-text-sm);
    line-height: 1.7;
    text-wrap: pretty;
  }
  .nx-auth-card-perks {
    display: grid;
    gap: var(--nx-space-3);
    margin: 0;
    padding: var(--nx-space-5) 0 0;
    list-style: none;
    border-block-start: 1px solid color-mix(in oklab, var(--nx-ink-50) 12%, transparent);
    color: var(--nx-ink-200);
    font-size: var(--nx-text-sm);
    > li {
      display: flex;
      align-items: center;
      gap: var(--nx-space-2);
    }
    .nx-icon {
      flex: none;
      inline-size: 1rem;
      block-size: 1rem;
      color: var(--nx-gold);
    }
  }
  .nx-auth-card-body {
    display: flex;
    flex-direction: column;
    padding: var(--nx-space-8);
  }
  @media (max-width: 32rem) {
    .nx-auth-card-body {
      padding: var(--nx-space-6) var(--nx-space-5);
    }
  }
  .nx-auth-card-head {
    display: grid;
    gap: var(--nx-space-2);
    margin-block-end: var(--nx-space-6);
  }
  .nx-auth-card-title,
  .nx-auth-card-subtitle {
    display: grid;
    margin: 0;
    > span {
      grid-area: 1 / 1;
      transition: opacity var(--nx-dur-base) var(--nx-ease-out), translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    }
    > span:not([data-current]) {
      opacity: 0;
      translate: 0 calc(9px * var(--nx-motion));
      pointer-events: none;
    }
  }
  .nx-auth-card-title {
    font: 700 var(--nx-text-2xl) / 1.2 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
  }
  .nx-auth-card-subtitle {
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    line-height: 1.7;
    text-wrap: pretty;
  }
  .nx-auth-card-form {
    display: grid;
    gap: var(--nx-space-5);
    margin: 0;
  }
  .nx-auth-card-viewport {
    position: relative;
    block-size: var(--nx-morph-h, auto);
    overflow: clip;
    transition: block-size var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    &:is(:not([data-nx-morph]), [data-nx-morph=init]) {
      transition: none;
    }
  }
  .nx-auth-card-measure {
    position: relative;
    display: grid;
  }
  .nx-auth-card-pane {
    display: grid;
    gap: var(--nx-space-4);
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 1;
    translate: 0 0;
    transition:
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      opacity var(--nx-dur-base) var(--nx-ease-out) 60ms,
      visibility 0s;
    &:not([data-pos=current]) {
      position: absolute;
      inset-block-start: 0;
      inset-inline: 0;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition:
        translate 200ms var(--nx-ease-in),
        opacity 150ms var(--nx-ease-in),
        visibility 0s linear 200ms;
    }
    &[data-pos=before] {
      translate: calc(-22% * var(--nx-dir) * var(--nx-motion)) 0;
    }
    &[data-pos=after] {
      translate: calc(22% * var(--nx-dir) * var(--nx-motion)) 0;
    }
    > legend {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: clip;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }
  .nx-auth-card-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-3);
    font-size: var(--nx-text-sm);
  }
  .nx-auth-card-submit-labels {
    display: inline-grid;
    justify-items: stretch;
    > span {
      grid-area: 1 / 1;
      transition: opacity var(--nx-dur-base) var(--nx-ease-out), translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    }
    > span:not([data-current]) {
      opacity: 0;
      translate: 0 calc(6px * var(--nx-motion));
    }
  }
  .nx-auth-card-switch {
    display: grid;
    justify-items: center;
    margin: 0;
    margin-block-start: var(--nx-space-5);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    text-align: center;
  }
  .nx-auth-card-switch-row {
    display: inline-flex;
    grid-area: 1 / 1;
    align-items: center;
    gap: 0.4rem;
    transition: opacity var(--nx-dur-base) var(--nx-ease-out);
    &:not([data-current]) {
      opacity: 0;
      pointer-events: none;
    }
  }
  .nx-auth-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--nx-accent-text);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
    transition-property:
      color,
      text-decoration-thickness,
      scale;
    transition-duration:
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-spring-snappy-duration);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-snappy);
    &:hover {
      color: var(--nx-accent);
      text-decoration-thickness: 2px;
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
      border-radius: var(--nx-radius-xs);
    }
    .nx-icon {
      inline-size: 0.9rem;
      block-size: 0.9rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-auth-card-glow {
      animation: none;
    }
  }
  @media (forced-colors: active) {
    .nx-auth-card,
    .nx-auth-card-media,
    .nx-auth-card-mark,
    .nx-auth-card-perks {
      border-color: CanvasText;
    }
    .nx-auth-card-glow,
    .nx-auth-card-gridlines {
      display: none;
    }
  }
  @keyframes nx-auth-card-drift {
    from {
      translate: 0 0;
      rotate: -3deg;
    }
    to {
      translate: calc(2.5rem * var(--nx-motion)) calc(-1.6rem * var(--nx-motion));
      rotate: 4deg;
    }
  }
}

/* src/css/blocks/calendar.css */
@layer nx.components {
  .nx-calendar [data-tone] {
    --_tone: var(--nx-accent);
    --_tone-text: var(--nx-accent-text);
    --_tone-soft: var(--nx-accent-soft);
  }
  .nx-calendar [data-tone=success] {
    --_tone: var(--nx-success);
    --_tone-text: var(--nx-success-text);
    --_tone-soft: var(--nx-success-soft);
  }
  .nx-calendar [data-tone=warning] {
    --_tone: var(--nx-warning);
    --_tone-text: var(--nx-warning-text);
    --_tone-soft: var(--nx-warning-soft);
  }
  .nx-calendar [data-tone=danger] {
    --_tone: var(--nx-danger);
    --_tone-text: var(--nx-danger-text);
    --_tone-soft: var(--nx-danger-soft);
  }
  .nx-calendar [data-tone=info] {
    --_tone: var(--nx-info);
    --_tone-text: var(--nx-info-text);
    --_tone-soft: var(--nx-info-soft);
  }
  .nx-calendar [data-tone=gold] {
    --_tone: var(--nx-gold);
    --_tone-text: var(--nx-gold-text);
    --_tone-soft: var(--nx-gold-soft);
  }
  .nx-calendar {
    display: grid;
    gap: var(--nx-space-3);
    padding: var(--nx-space-4);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-sm), inset 0 1px 0 var(--nx-highlight);
  }
  .nx-calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-3);
  }
  .nx-calendar-title {
    margin: 0;
    color: var(--nx-text);
    font: 600 var(--nx-text-lg) / 1.2 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tight);
  }
  .nx-calendar-nav {
    display: flex;
    gap: var(--nx-space-1);
  }
  .nx-calendar-nav-btn {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: 0;
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface-2);
    color: var(--nx-text-muted);
    cursor: pointer;
    transition-property:
      scale,
      background-color,
      color;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out);
    > .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
    &:hover {
      background: var(--nx-surface-3);
      color: var(--nx-text);
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--nx-space-1);
    padding-inline: var(--nx-space-1);
  }
  .nx-calendar-weekday {
    padding-block: var(--nx-space-1);
    color: var(--nx-text-subtle);
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-wide);
    text-align: center;
  }
  .nx-calendar-grid {
    --_travel: 0px;
    display: grid;
    gap: var(--nx-space-1);
  }
  .nx-calendar-grid[data-enter=next] {
    --_travel: calc(20px * var(--nx-dir) * var(--nx-motion));
  }
  .nx-calendar-grid[data-enter=prev] {
    --_travel: calc(-20px * var(--nx-dir) * var(--nx-motion));
  }
  .nx-calendar-grid[data-enter] {
    animation: nx-calendar-enter var(--nx-dur-base) var(--nx-ease-emphasized);
  }
  @keyframes nx-calendar-enter {
    from {
      opacity: 0;
      translate: var(--_travel) 0;
    }
  }
  .nx-calendar-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--nx-space-1);
  }
  .nx-calendar-cell {
    display: grid;
  }
  .nx-calendar-day {
    display: grid;
    justify-items: center;
    gap: var(--nx-space-1);
    inline-size: 100%;
    min-block-size: 3.5rem;
    padding: var(--nx-space-1);
    border: 0;
    border-radius: var(--nx-radius-lg);
    background: transparent;
    color: var(--nx-text);
    font: inherit;
    cursor: pointer;
    transition-property:
      scale,
      background-color,
      box-shadow;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out);
    &:hover {
      background: var(--nx-surface-2);
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: -2px;
    }
  }
  .nx-calendar-cell[data-out] .nx-calendar-day {
    color: var(--nx-text-subtle);
    opacity: 0.66;
  }
  .nx-calendar-daynum {
    display: grid;
    place-items: center;
    min-inline-size: 1.625rem;
    block-size: 1.625rem;
    border-radius: var(--nx-radius-full);
    font: 500 var(--nx-text-sm) / 1 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
    transition:
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      color var(--nx-dur-fast) var(--nx-ease-out),
      box-shadow var(--nx-dur-fast) var(--nx-ease-out);
  }
  .nx-calendar-cell[data-today] .nx-calendar-daynum {
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--nx-border-strong);
  }
  .nx-calendar-today-dot {
    inline-size: 0.25rem;
    block-size: 0.25rem;
    margin-block-start: -0.25rem;
    border-radius: 50%;
    background: var(--nx-accent);
  }
  .nx-calendar-cell[aria-selected] .nx-calendar-daynum {
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
    box-shadow: var(--nx-shadow-glow);
  }
  .nx-calendar-cell[aria-selected] .nx-calendar-today-dot {
    background: var(--nx-accent-contrast);
  }
  .nx-calendar-day-events {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2px;
    inline-size: 100%;
    min-block-size: 0.5rem;
  }
  .nx-calendar-chip {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: var(--nx-radius-full);
    background: var(--_tone);
    box-shadow: 0 0 0 1.5px var(--nx-surface);
    transition: scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
  }
  .nx-calendar-more {
    color: var(--nx-text-subtle);
    font: 500 var(--nx-text-xs) / 1 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
  }
  .nx-calendar-panel {
    display: none;
    padding: var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface-2);
  }
  .nx-calendar-panel:where([data-open]) {
    display: grid;
    gap: var(--nx-space-2);
  }
  .nx-calendar-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nx-space-3);
  }
  .nx-calendar-panel-title {
    margin: 0;
    color: var(--nx-text);
    font: 600 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
  }
  .nx-calendar-panel-count {
    color: var(--nx-text-subtle);
    font: 400 var(--nx-text-xs) / 1 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
  }
  .nx-calendar-panel-list {
    display: grid;
    gap: var(--nx-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-calendar-panel-list > li {
    animation: nx-calendar-item-in var(--nx-dur-base) var(--nx-ease-out) backwards;
    animation-delay: calc(min(var(--nx-i, 0), 8) * var(--nx-stagger));
  }
  @keyframes nx-calendar-item-in {
    from {
      opacity: 0;
      translate: 0 calc(6px * var(--nx-motion));
    }
  }
  .nx-calendar-panel-item {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-2) var(--nx-space-3);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface);
    color: var(--nx-text);
    font: 400 var(--nx-text-sm) / 1.35 var(--nx-font-sans);
  }
  .nx-calendar-panel-item:where(a) {
    text-decoration: none;
    transition-property: background-color;
    transition-duration: var(--nx-dur-fast);
    transition-timing-function: var(--nx-ease-out);
    &:hover {
      background: var(--nx-surface-2);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: -2px;
    }
  }
  .nx-calendar-panel-time {
    flex: none;
    color: var(--nx-text-subtle);
    font: 500 var(--nx-text-xs) / 1 var(--nx-font-mono);
    font-variant-numeric: tabular-nums;
  }
  .nx-calendar-panel-dot {
    flex: none;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: var(--_tone);
    box-shadow: 0 0 0 3px var(--_tone-soft);
  }
  .nx-calendar-panel-label {
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }
  .nx-calendar-panel-empty {
    margin: 0;
    padding: var(--nx-space-3);
    border: 1px dashed var(--nx-border);
    border-radius: var(--nx-radius-md);
    color: var(--nx-text-subtle);
    font: 400 var(--nx-text-xs) / 1.5 var(--nx-font-sans);
    text-align: center;
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-calendar-grid[data-enter],
    .nx-calendar-panel-list > li {
      animation-duration: 150ms;
    }
  }
  @media (forced-colors: active) {
    .nx-calendar {
      border: 1px solid CanvasText;
    }
    .nx-calendar-day:focus-visible {
      outline-offset: 2px;
    }
    .nx-calendar-cell[aria-selected] .nx-calendar-daynum {
      border: 1px solid Highlight;
    }
    .nx-calendar-panel {
      border: 1px solid CanvasText;
    }
  }
  @media (max-width: 30rem) {
    .nx-calendar-day {
      min-block-size: 2.75rem;
    }
    .nx-calendar-day-events {
      display: none;
    }
    .nx-calendar-day[data-count]::after {
      content: "";
      inline-size: 0.375rem;
      block-size: 0.375rem;
      border-radius: 50%;
      background: var(--nx-accent);
    }
  }
}

/* src/css/blocks/chat.css */
@layer nx.components {
  @keyframes nx-chat-msg-in {
    from {
      opacity: 0;
      translate: calc(-10px * var(--nx-dir) * var(--nx-motion)) calc(6px * var(--nx-motion));
      scale: calc(1 - 0.05 * var(--nx-motion));
    }
  }
  @keyframes nx-chat-msg-out {
    from {
      opacity: 0;
      translate: calc(10px * var(--nx-dir) * var(--nx-motion)) calc(6px * var(--nx-motion));
      scale: calc(1 - 0.05 * var(--nx-motion));
    }
  }
  @keyframes nx-chat-dot {
    30% {
      translate: 0 calc(-4px * var(--nx-motion));
    }
    60% {
      translate: 0 0;
    }
  }
  @keyframes nx-chat-dot-breathe {
    50% {
      opacity: 0.35;
    }
  }
  .nx-chat {
    --_radius: var(--nx-radius-xl);
    --_pad: 0.625rem;
    container-type: inline-size;
    min-inline-size: 0;
  }
  .nx-chat-frame {
    display: grid;
    grid-template-columns: minmax(15rem, 17.5rem) minmax(0, 1fr);
    block-size: var(--nx-chat-height, 34rem);
    border: 1px solid var(--nx-border);
    border-radius: var(--_radius);
    background:
      radial-gradient(
        50% 40% at 100% 0%,
        var(--nx-accent-soft),
        transparent 70%),
      radial-gradient(
        40% 30% at 0% 100%,
        var(--nx-gold-soft),
        transparent 70%),
      var(--nx-bg-subtle);
    box-shadow: var(--nx-shadow-lg);
    overflow: clip;
  }
  .nx-chat-side {
    display: flex;
    flex-direction: column;
    gap: var(--nx-space-3);
    min-inline-size: 0;
    min-block-size: 0;
    padding: var(--_pad);
    border-inline-end: 1px solid var(--nx-glass-border);
    background: color-mix(in oklab, var(--nx-surface-2) 88%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
  }
  .nx-chat-search {
    position: relative;
    display: flex;
    align-items: center;
    > .nx-icon {
      position: absolute;
      inset-inline-start: 0.6875rem;
      pointer-events: none;
      color: var(--nx-text-subtle);
    }
  }
  .nx-chat-search-input {
    inline-size: 100%;
    min-block-size: 2.25rem;
    padding-inline: 2.125rem 0.875rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    color: var(--nx-text);
    font: 400 var(--nx-text-sm) / 1 var(--nx-font-sans);
    transition: border-color var(--nx-dur-base) var(--nx-ease-out), box-shadow var(--nx-dur-base) var(--nx-ease-out);
    &::placeholder {
      color: var(--nx-text-subtle);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-chat-list {
    display: grid;
    align-content: start;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .nx-chat-conversation {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    inline-size: 100%;
    padding: 0.5rem 0.5625rem;
    border: 0;
    border-radius: calc(var(--_radius) - var(--_pad));
    background: transparent;
    color: var(--nx-text-muted);
    font: 500 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
    text-align: start;
    cursor: pointer;
    transition:
      background-color var(--nx-dur-base) var(--nx-ease-out),
      color var(--nx-dur-base) var(--nx-ease-out),
      scale var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &[aria-selected=true] {
      background: var(--nx-surface);
      color: var(--nx-text);
      box-shadow: var(--nx-shadow-sm), inset 0 1px 0 0 var(--nx-highlight);
    }
  }
  .nx-chat-cell {
    display: grid;
    flex: 1;
    gap: 0.125rem;
    min-inline-size: 0;
  }
  .nx-chat-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    min-inline-size: 0;
  }
  .nx-chat-name {
    overflow: hidden;
    font-weight: 650;
    color: var(--nx-text);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-chat-preview {
    overflow: hidden;
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-chat-time {
    flex: none;
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .nx-chat-unread {
    display: inline-grid;
    place-items: center;
    flex: none;
    min-inline-size: 1.25rem;
    padding-inline: 0.3125rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
    font: 700 0.6875rem / 1.25 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
  }
  .nx-chat-conversation:not([aria-selected=true]) .nx-chat-unread {
    background: var(--nx-accent-soft);
    color: var(--nx-accent-text);
  }
  .nx-chat-main {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    min-block-size: 0;
  }
  .nx-chat-panel {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-block-size: 0;
  }
  .nx-chat-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: var(--nx-space-3) var(--nx-space-4);
    border-block-end: 1px solid var(--nx-border);
    background: color-mix(in oklab, var(--nx-surface) 72%, transparent);
  }
  .nx-chat-head-meta {
    display: grid;
    gap: 0.125rem;
    min-inline-size: 0;
  }
  .nx-chat-head-name {
    overflow: hidden;
    color: var(--nx-text);
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-chat-head-role {
    overflow: hidden;
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-chat-thread {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--nx-space-2);
    min-block-size: 0;
    padding: var(--nx-space-4);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  @media (prefers-reduced-motion: no-preference) {
    .nx-chat-thread {
      scroll-behavior: smooth;
    }
  }
  .nx-chat-day {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block: var(--nx-space-2);
    color: var(--nx-text-subtle);
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-sans);
    &::before,
    &::after {
      content: "";
      flex: 1;
      block-size: 1px;
      background: var(--nx-border);
    }
  }
  .nx-chat-message {
    display: flex;
    align-items: flex-end;
    gap: 0.4375rem;
    max-inline-size: min(36rem, 82%);
    &[data-side=out] {
      justify-content: flex-end;
      margin-inline-start: auto;
    }
    &[data-grouped] {
      margin-block-start: calc(-1 * var(--nx-space-1));
    }
    &[data-grouped][data-side=in] .nx-chat-bubble {
      border-start-start-radius: var(--nx-radius-lg);
    }
    &[data-grouped][data-side=out] .nx-chat-bubble {
      border-start-end-radius: var(--nx-radius-lg);
    }
    &[data-fresh] {
      animation: nx-chat-msg-in var(--nx-spring-gentle-duration) var(--nx-spring-gentle) both;
    }
    &[data-fresh][data-side=out] {
      animation-name: nx-chat-msg-out;
    }
  }
  .nx-chat-bubble {
    padding: 0.4375rem 0.75rem 0.375rem;
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
    box-shadow: var(--nx-shadow-xs);
    color: var(--nx-text);
    font: 400 var(--nx-text-sm) / 1.55 var(--nx-font-sans);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    transition: background-color var(--nx-dur-base) var(--nx-ease-out), border-color var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-chat-message[data-side=in] .nx-chat-bubble {
    border-end-start-radius: var(--nx-radius-xs);
  }
  .nx-chat-message[data-side=out] .nx-chat-bubble {
    border-color: transparent;
    border-end-end-radius: var(--nx-radius-xs);
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
  }
  .nx-chat-message-time {
    display: block;
    margin-block-start: 0.125rem;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.62;
  }
  .nx-chat-typing {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    max-inline-size: min(36rem, 82%);
    margin-block-start: calc(-1 * var(--nx-space-1));
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--nx-border);
    border-end-start-radius: var(--nx-radius-xs);
    border-start-start-radius: var(--nx-radius-lg);
    border-start-end-radius: var(--nx-radius-lg);
    border-end-end-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
    color: var(--nx-text-subtle);
    font: 400 var(--nx-text-xs) / 1 var(--nx-font-sans);
    &[data-open] {
      animation: nx-chat-msg-in var(--nx-spring-gentle-duration) var(--nx-spring-gentle) both;
    }
    &:not([data-open]) {
      display: none;
    }
  }
  .nx-chat-typing-dots {
    display: inline-flex;
    gap: 0.25rem;
    > i {
      inline-size: 0.3125rem;
      block-size: 0.3125rem;
      border-radius: var(--nx-radius-full);
      background: var(--nx-accent);
      animation: nx-chat-dot 1.1s var(--nx-ease-in-out) infinite;
      &:nth-child(2) {
        animation-delay: 140ms;
      }
      &:nth-child(3) {
        animation-delay: 280ms;
      }
    }
  }
  .nx-chat-empty {
    display: grid;
    place-content: center;
    gap: var(--nx-space-2);
    justify-items: center;
    flex: 1;
    padding: var(--nx-space-8) var(--nx-space-4);
    color: var(--nx-text-subtle);
    font: 500 var(--nx-text-sm) / 1.5 var(--nx-font-sans);
    text-align: center;
    > .nx-icon {
      color: var(--nx-text-subtle);
    }
  }
  .nx-chat-composer {
    display: flex;
    align-items: flex-end;
    gap: var(--nx-space-2);
    padding: var(--nx-space-3) var(--nx-space-4);
    border-block-start: 1px solid var(--nx-border);
    background: color-mix(in oklab, var(--nx-surface) 72%, transparent);
  }
  .nx-chat-input {
    flex: 1;
    min-block-size: 2.5rem;
    max-block-size: 8lh;
    padding: var(--nx-space-2) var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface);
    color: var(--nx-text);
    font: 400 var(--nx-text-sm) / 1.5 var(--nx-font-sans);
    resize: none;
    transition: border-color var(--nx-dur-base) var(--nx-ease-out), box-shadow var(--nx-dur-base) var(--nx-ease-out);
    &::placeholder {
      color: var(--nx-text-subtle);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-chat-send {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--nx-radius-full);
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
    cursor: pointer;
    scale: 0.95;
    transition:
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      box-shadow var(--nx-dur-base) var(--nx-ease-out),
      opacity var(--nx-dur-fast) var(--nx-ease-out),
      background-color var(--nx-dur-base) var(--nx-ease-out);
    > .nx-icon {
      transition: translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle), opacity var(--nx-dur-fast) var(--nx-ease-out);
      opacity: 0.7;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &[data-ready] {
      scale: 1;
      box-shadow: var(--nx-shadow-glow);
      > .nx-icon {
        opacity: 1;
      }
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:disabled {
      background: var(--nx-surface-3);
      color: var(--nx-text-subtle);
      box-shadow: none;
      cursor: not-allowed;
    }
  }
  @container (width < 42rem) {
    .nx-chat-frame {
      grid-template-columns: minmax(0, 1fr);
    }
    .nx-chat-side {
      max-block-size: 13rem;
      border-inline-end: 0;
      border-block-end: 1px solid var(--nx-glass-border);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-chat-typing-dots > i {
      animation: nx-chat-dot-breathe 1.4s var(--nx-ease-in-out) infinite;
    }
  }
}

/* src/css/blocks/empty-state.css */
@layer nx.components {
  .nx-empty-state {
    --nx-empty-plate: 4.25rem;
    display: grid;
    justify-items: center;
    gap: var(--nx-space-3);
    padding: var(--nx-space-10) var(--nx-space-6);
    color: var(--nx-text-muted);
    text-align: center;
  }
  .nx-empty-state[data-size=sm] {
    --nx-empty-plate: 2.75rem;
    gap: var(--nx-space-2);
    padding: var(--nx-space-6) var(--nx-space-4);
  }
  .nx-empty-state[data-size=lg] {
    --nx-empty-plate: 5.5rem;
    padding: var(--nx-space-12) var(--nx-space-6);
  }
  .nx-empty-state-art {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: calc(var(--nx-empty-plate) * 1.9);
    aspect-ratio: 1;
    margin-block-end: var(--nx-space-1);
  }
  .nx-empty-state-halo {
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    border: 1px solid color-mix(in oklab, var(--nx-accent) 38%, transparent);
    animation: nx-empty-halo 6s var(--nx-ease-out) infinite;
  }
  .nx-empty-state-orbit {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed color-mix(in oklab, var(--nx-border-strong) 85%, transparent);
    animation: nx-empty-turn 34s linear infinite;
  }
  .nx-empty-state-spark {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: 0.34rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--nx-accent);
    box-shadow: 0 0 7px color-mix(in oklab, var(--nx-accent) 65%, transparent);
    translate: -50% -50%;
    transform: rotate(var(--_a, 0deg)) translateY(calc(var(--nx-empty-plate) * -0.95));
    &:nth-child(2) {
      --_a: 135deg;
      background: var(--nx-gold);
      box-shadow: 0 0 7px color-mix(in oklab, var(--nx-gold) 65%, transparent);
    }
  }
  .nx-empty-state-plate {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: var(--nx-empty-plate);
    aspect-ratio: 1;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background:
      radial-gradient(
        120% 120% at 30% 18%,
        var(--nx-accent-soft),
        transparent 62%),
      radial-gradient(
        90% 90% at 78% 88%,
        var(--nx-gold-soft),
        transparent 58%),
      var(--nx-surface-2);
    color: var(--nx-accent-text);
    box-shadow: var(--nx-shadow-sm), inset 0 1px 0 var(--nx-highlight);
    animation: nx-empty-float 8s var(--nx-ease-in-out) infinite;
    .nx-icon {
      inline-size: 42%;
      block-size: 42%;
    }
  }
  .nx-empty-state-title {
    margin: 0;
    color: var(--nx-text);
    font: 650 var(--nx-text-lg) / 1.3 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
    text-wrap: balance;
  }
  .nx-empty-state[data-size=sm] .nx-empty-state-title {
    font-size: var(--nx-text-md);
  }
  .nx-empty-state[data-size=lg] .nx-empty-state-title {
    font-size: var(--nx-text-xl);
  }
  .nx-empty-state-description {
    margin: 0;
    max-inline-size: 46ch;
    font-size: var(--nx-text-sm);
    line-height: 1.75;
    text-wrap: pretty;
  }
  .nx-empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--nx-space-3);
    margin-block-start: var(--nx-space-2);
  }
  .nx-empty-state:not(:has(.nx-empty-state-actions)) .nx-empty-state-description {
    margin-block-end: var(--nx-space-1);
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-empty-state-halo {
      animation: none;
      opacity: 0.5;
    }
    .nx-empty-state-orbit,
    .nx-empty-state-plate {
      animation: none;
    }
  }
  @media (forced-colors: active) {
    .nx-empty-state-plate {
      border-color: CanvasText;
      background: Canvas;
    }
    .nx-empty-state-halo,
    .nx-empty-state-spark {
      display: none;
    }
  }
  @keyframes nx-empty-halo {
    from {
      scale: 0.86;
      opacity: 0.65;
    }
    70%, to {
      scale: calc(1 + 0.22 * var(--nx-motion));
      opacity: 0;
    }
  }
  @keyframes nx-empty-float {
    50% {
      translate: 0 calc(-3px * var(--nx-motion));
    }
  }
  @keyframes nx-empty-turn {
    from {
      rotate: 0deg;
    }
    to {
      rotate: calc(360deg * var(--nx-motion));
    }
  }
}

/* src/css/blocks/invoice.css */
@layer nx.components {
  .nx-invoice {
    --_pad: clamp(1.25rem, 4cqi, 2.25rem);
    --_line: minmax(18rem, 24rem);
    container-type: inline-size;
    display: grid;
    gap: var(--nx-space-8);
    padding: var(--_pad);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background:
      radial-gradient(
        55% 36% at 100% 0%,
        var(--nx-accent-soft),
        transparent 70%),
      radial-gradient(
        36% 26% at 0% 100%,
        var(--nx-gold-soft),
        transparent 70%),
      var(--nx-surface);
    box-shadow: var(--nx-shadow-lg);
  }
  .nx-invoice-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--nx-space-6);
  }
  .nx-invoice-brand {
    display: grid;
    gap: 0.125rem;
  }
  .nx-invoice-brand-row {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
  }
  .nx-invoice-mark {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--nx-radius-md);
    background: var(--nx-gradient-brand);
    color: var(--nx-accent-contrast);
    font: 800 var(--nx-text-sm) / 1 var(--nx-font-display);
    box-shadow: var(--nx-shadow-glow);
  }
  .nx-invoice-brand-name {
    color: var(--nx-text);
    font: 700 var(--nx-text-lg) / 1.2 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
  }
  .nx-invoice-brand-tagline {
    margin-inline-start: calc(2.5rem + var(--nx-space-3));
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
  }
  .nx-invoice-meta {
    display: grid;
    justify-items: end;
    gap: var(--nx-space-3);
    text-align: end;
  }
  .nx-invoice-title {
    margin: 0;
    color: var(--nx-text);
    font: 800 var(--nx-text-2xl) / 1.1 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
  }
  .nx-invoice-facts {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    > div {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: var(--nx-space-2);
    }
    dt {
      color: var(--nx-text-subtle);
      font-size: var(--nx-text-xs);
    }
    dd {
      margin: 0;
      color: var(--nx-text);
      font-size: var(--nx-text-xs);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }
  }
  .nx-invoice-parties {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nx-space-6);
  }
  .nx-invoice-party {
    display: grid;
    gap: 0.375rem;
    align-content: start;
  }
  .nx-invoice-party-label {
    color: var(--nx-text-subtle);
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-wider);
    text-transform: uppercase;
  }
  :lang(fa) .nx-invoice-party-label,
  :lang(ar) .nx-invoice-party-label {
    text-transform: none;
  }
  .nx-invoice-party-name {
    margin: 0;
    color: var(--nx-text);
    font-weight: 650;
    font-size: var(--nx-text-sm);
  }
  .nx-invoice-party-lines {
    display: grid;
    gap: 0.125rem;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    line-height: 1.6;
  }
  .nx-invoice-lines {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--nx-text-sm);
  }
  .nx-invoice-lines th {
    padding-block: var(--nx-space-2);
    border-block-end: 1px solid var(--nx-border-strong);
    color: var(--nx-text-subtle);
    font: 600 var(--nx-text-xs) / 1.2 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-wide);
    text-align: start;
  }
  :lang(fa) .nx-invoice-lines th,
  :lang(ar) .nx-invoice-lines th {
    letter-spacing: 0;
  }
  .nx-invoice-lines th[data-align=end],
  .nx-invoice-lines td[data-align=end] {
    text-align: end;
  }
  .nx-invoice-line > td {
    padding-block: var(--nx-space-3);
    border-block-end: 1px solid var(--nx-border);
    vertical-align: top;
  }
  .nx-invoice-line > td:not(.nx-invoice-item) {
    font-variant-numeric: tabular-nums;
  }
  .nx-invoice-index {
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .nx-invoice-item {
    display: grid;
    gap: 0.125rem;
  }
  .nx-invoice-item-title {
    color: var(--nx-text);
    font-weight: 600;
  }
  .nx-invoice-item-description {
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    line-height: 1.6;
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-invoice-line {
      transition: background-color var(--nx-dur-base) var(--nx-ease-out);
    }
    .nx-invoice-line:hover {
      background: color-mix(in oklab, var(--nx-accent-soft) 45%, transparent);
    }
  }
  .nx-invoice-totals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
  }
  .nx-invoice-row {
    display: flex;
    justify-content: space-between;
    gap: var(--nx-space-8);
    min-inline-size: var(--_line);
    > span:first-child {
      color: var(--nx-text-muted);
      font-size: var(--nx-text-sm);
    }
    > .nx-invoice-amount {
      font-size: var(--nx-text-sm);
    }
  }
  .nx-invoice-amount {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    color: var(--nx-text);
    font-variant-numeric: tabular-nums;
  }
  .nx-invoice-currency {
    color: var(--nx-text-muted);
    font-size: 0.75em;
    font-weight: 500;
  }
  .nx-invoice-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nx-space-8);
    margin-block-start: var(--nx-space-2);
    padding-block-start: var(--nx-space-3);
    border-block-start: 1px solid var(--nx-border-strong);
    min-inline-size: var(--_line);
  }
  .nx-invoice-total-label {
    color: var(--nx-text);
    font-weight: 700;
    font-size: var(--nx-text-sm);
  }
  .nx-invoice-total .nx-invoice-amount .nx-number {
    font: 800 var(--nx-text-2xl) / 1.1 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
  }
  .nx-invoice-total .nx-invoice-currency {
    font-size: var(--nx-text-sm);
  }
  .nx-invoice-note {
    max-inline-size: var(--_line);
    margin: 0;
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    line-height: 1.7;
    text-align: end;
  }
  .nx-invoice-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nx-space-3);
    padding-block-start: var(--nx-space-4);
    border-block-start: 1px solid var(--nx-border);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
  }
  @container (width < 40rem) {
    .nx-invoice-parties {
      grid-template-columns: minmax(0, 1fr);
    }
    .nx-invoice-meta {
      justify-items: start;
      text-align: start;
    }
    .nx-invoice-facts > div {
      justify-content: flex-start;
    }
    .nx-invoice-row,
    .nx-invoice-total {
      min-inline-size: 100%;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-invoice [data-nx-reveal],
    .nx-invoice [data-nx-reveal] > * {
      transition-delay: 0ms;
    }
    .nx-invoice .nx-digit-track {
      transition: none;
    }
  }
  @media print {
    .nx-invoice {
      display: block;
      padding: 0;
      border: none;
      border-radius: 0;
      background: none;
      box-shadow: none;
      color: CanvasText;
    }
    .nx-invoice-head,
    .nx-invoice-party,
    .nx-invoice-line,
    .nx-invoice-totals,
    .nx-invoice-foot {
      break-inside: avoid;
    }
    .nx-invoice-section + .nx-invoice-section {
      margin-block-start: 1.25rem;
    }
    .nx-invoice-mark {
      print-color-adjust: exact;
      -webkit-print-color-adjust: exact;
    }
    .nx-invoice [data-nx-reveal],
    .nx-invoice [data-nx-reveal] > * {
      transition: none !important;
      animation: none !important;
      opacity: 1 !important;
      translate: none !important;
      scale: none !important;
      filter: none !important;
      transition-delay: 0ms !important;
    }
    .nx-invoice .nx-digit-track {
      translate: 0 calc(var(--d, 0) * -1.1em) !important;
    }
  }
}

/* src/css/blocks/kanban.css */
@layer nx.components {
  .nx-kanban [data-tone] {
    --_tone: var(--nx-accent);
    --_tone-text: var(--nx-accent-text);
    --_tone-soft: var(--nx-accent-soft);
    --_tone-border: var(--nx-accent-border, var(--nx-accent));
  }
  .nx-kanban [data-tone=success] {
    --_tone: var(--nx-success);
    --_tone-text: var(--nx-success-text);
    --_tone-soft: var(--nx-success-soft);
  }
  .nx-kanban [data-tone=warning] {
    --_tone: var(--nx-warning);
    --_tone-text: var(--nx-warning-text);
    --_tone-soft: var(--nx-warning-soft);
  }
  .nx-kanban [data-tone=danger] {
    --_tone: var(--nx-danger);
    --_tone-text: var(--nx-danger-text);
    --_tone-soft: var(--nx-danger-soft);
  }
  .nx-kanban [data-tone=info] {
    --_tone: var(--nx-info);
    --_tone-text: var(--nx-info-text);
    --_tone-soft: var(--nx-info-soft);
  }
  .nx-kanban [data-tone=gold] {
    --_tone: var(--nx-gold);
    --_tone-text: var(--nx-gold-text);
    --_tone-soft: var(--nx-gold-soft);
  }
  .nx-kanban {
    --nx-kanban-height: none;
    display: grid;
    gap: var(--nx-space-3);
  }
  .nx-kanban-board {
    display: flex;
    align-items: start;
    gap: var(--nx-space-4);
    padding-block-end: var(--nx-space-2);
    padding-inline: var(--nx-space-1);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .nx-kanban-column {
    display: flex;
    flex-direction: column;
    inline-size: clamp(16rem, 22vw, 20.5rem);
    max-block-size: var(--nx-kanban-height);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface-2);
    box-shadow: var(--nx-shadow-xs);
    transition:
      border-color var(--nx-dur-fast) var(--nx-ease-out),
      box-shadow var(--nx-dur-fast) var(--nx-ease-out),
      background-color var(--nx-dur-fast) var(--nx-ease-out);
  }
  .nx-kanban-column[data-dropping] {
    border-color: color-mix(in oklab, var(--_tone, var(--nx-accent)) 55%, var(--nx-border));
    background: var(--nx-surface-3);
    box-shadow: var(--nx-shadow-sm), inset 0 0 0 1px color-mix(in oklab, var(--_tone, var(--nx-accent)) 22%, transparent);
  }
  .nx-kanban-column-head {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-3) var(--nx-space-3) var(--nx-space-2);
  }
  .nx-kanban-column-dot {
    flex: none;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: var(--_tone);
    box-shadow: 0 0 0 3px var(--_tone-soft);
  }
  .nx-kanban-column-title {
    min-inline-size: 0;
    margin: 0;
    overflow: hidden;
    color: var(--nx-text);
    font: 600 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tight);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-kanban-column-count {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.625rem;
    margin-inline-start: auto;
    padding-inline: var(--nx-space-2);
    block-size: 1.375rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    color: var(--nx-text-muted);
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
    .nx-number {
      font-size: inherit;
    }
  }
  .nx-kanban-list {
    display: grid;
    gap: var(--nx-space-2);
    align-content: start;
    margin: 0;
    padding: 0 var(--nx-space-2) var(--nx-space-2);
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .nx-kanban-card {
    display: flex;
    align-items: start;
    gap: var(--nx-space-2);
    padding: var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-xs);
    cursor: grab;
    transition:
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      opacity var(--nx-dur-base) var(--nx-ease-out),
      border-color var(--nx-dur-fast) var(--nx-ease-out),
      box-shadow var(--nx-dur-fast) var(--nx-ease-out);
    transition-delay:
      calc(min(var(--nx-i, 0), 12) * 40ms),
      0ms,
      calc(min(var(--nx-i, 0), 12) * 40ms),
      0ms,
      0ms;
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-kanban-card:hover {
      border-color: var(--nx-border-strong);
      box-shadow: var(--nx-shadow-sm);
      translate: 0 calc(-2px * var(--nx-motion));
      transition-delay: 0ms;
    }
  }
  .nx-kanban-card[data-dragging] {
    opacity: 0.35;
    scale: calc(0.98 * (1 - 0.02 * var(--nx-motion)));
    border-style: dashed;
    border-color: var(--nx-border-strong);
    cursor: grabbing;
  }
  .nx-kanban-card-dot {
    flex: none;
    margin-block-start: 0.3125rem;
    inline-size: 0.375rem;
    block-size: 0.375rem;
    border-radius: 50%;
    background: var(--_tone);
  }
  .nx-kanban-card-main {
    display: grid;
    gap: var(--nx-space-1);
    min-inline-size: 0;
    flex: 1;
  }
  .nx-kanban-card-title {
    margin: 0;
    font: 500 var(--nx-text-sm) / 1.45 var(--nx-font-sans);
    overflow-wrap: anywhere;
  }
  .nx-kanban-card-meta {
    margin: 0;
    color: var(--nx-text-subtle);
    font: 400 var(--nx-text-xs) / 1.4 var(--nx-font-sans);
  }
  .nx-kanban-card-avatar {
    flex: none;
    margin-block-start: 0.125rem;
  }
  .nx-kanban-card-menu {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    margin-inline-start: auto;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: transparent;
    color: var(--nx-text-subtle);
    cursor: pointer;
    transition-property:
      scale,
      background-color,
      color;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out);
    & svg {
      inline-size: 1rem;
      block-size: 1rem;
    }
    &:hover {
      background: var(--nx-surface-3);
      color: var(--nx-text);
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 1px;
    }
    &[aria-expanded=true] {
      background: var(--nx-surface-3);
      color: var(--nx-text);
    }
  }
  .nx-kanban-menu {
    position: fixed;
    inset: auto;
    z-index: var(--nx-z-dropdown);
    display: grid;
    min-inline-size: min(12rem, calc(100vw - 1rem));
    margin: 0;
    padding: var(--nx-space-1);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-xl), inset 0 1px 0 var(--nx-highlight);
    overflow: clip;
    transform-origin: var(--nx-origin, top center);
    opacity: 0;
    scale: 0.95;
    transition:
      opacity var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      display var(--nx-dur-fast) allow-discrete,
      overlay var(--nx-dur-fast) allow-discrete;
  }
  .nx-kanban-menu:where(:popover-open, [data-open]) {
    opacity: 1;
    scale: 1;
    @starting-style {
      opacity: 0;
      scale: 0.95;
    }
  }
  .nx-kanban-menu:not([popover]):not([data-open]) {
    display: none;
  }
  .nx-kanban-menu-choice {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    inline-size: 100%;
    min-block-size: 2.125rem;
    padding: var(--nx-space-1) var(--nx-space-2);
    border: 0;
    border-radius: var(--nx-radius-md);
    background: transparent;
    color: inherit;
    font: 500 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
    text-align: start;
    cursor: pointer;
    transition-property: background-color;
    transition-duration: var(--nx-dur-fast);
    transition-timing-function: var(--nx-ease-out);
    > .nx-icon {
      flex: none;
      inline-size: 1rem;
      block-size: 1rem;
      color: var(--nx-text-subtle);
    }
    > span {
      min-inline-size: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &:hover {
      background: var(--nx-surface-2);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: -2px;
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
  }
  .nx-kanban-menu-choice[data-danger] {
    color: var(--nx-danger-text);
  }
  .nx-kanban-menu-choice[data-danger]:is(:hover, :focus-visible) {
    background: var(--nx-danger-soft);
  }
  .nx-kanban-menu-sep {
    block-size: 1px;
    margin: var(--nx-space-1) var(--nx-space-2);
    background: var(--nx-border);
  }
  .nx-kanban-placeholder {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    min-block-size: 2.25rem;
    padding-inline: var(--nx-space-3);
    border: 1px dashed color-mix(in oklab, var(--_tone, var(--nx-accent)) 60%, var(--nx-border));
    border-radius: var(--nx-radius-lg);
    background: var(--_tone-soft, var(--nx-accent-soft));
    animation: nx-kanban-slot var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
  }
  .nx-kanban-placeholder[hidden] {
    display: none;
  }
  @keyframes nx-kanban-slot {
    from {
      opacity: 0;
      scale: calc(1 - 0.1 * var(--nx-motion));
    }
  }
  .nx-kanban-placeholder-dot {
    flex: none;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: var(--_tone, var(--nx-accent));
    animation: nx-kanban-breathe 1.4s var(--nx-ease-in-out) infinite;
  }
  .nx-kanban-placeholder-bar {
    inline-size: min(9rem, 60%);
    block-size: 0.375rem;
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--_tone, var(--nx-accent)) 28%, transparent);
  }
  @keyframes nx-kanban-breathe {
    50% {
      scale: calc(1 + 0.35 * var(--nx-motion));
      opacity: 0.55;
    }
  }
  .nx-kanban-empty {
    padding: var(--nx-space-3);
    border: 1px dashed var(--nx-border);
    border-radius: var(--nx-radius-lg);
    color: var(--nx-text-subtle);
    font: 400 var(--nx-text-xs) / 1.5 var(--nx-font-sans);
    text-align: center;
  }
  .nx-kanban-add {
    display: grid;
    padding: 0 var(--nx-space-2) var(--nx-space-2);
  }
  .nx-kanban-add-open {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    min-block-size: 2.25rem;
    border: 1px dashed var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: transparent;
    color: var(--nx-text-subtle);
    font: 500 var(--nx-text-xs) / 1 var(--nx-font-sans);
    cursor: pointer;
    transition-property:
      scale,
      border-color,
      color,
      background-color;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-ease-out);
    > .nx-icon {
      inline-size: 0.85rem;
      block-size: 0.85rem;
    }
    &:hover {
      border-color: var(--nx-border-strong);
      color: var(--nx-text);
      background: var(--nx-surface-2);
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-kanban-add-form {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows var(--nx-dur-base) var(--nx-ease-out), opacity var(--nx-dur-fast) var(--nx-ease-out);
    &:where([data-open]) {
      grid-template-rows: 1fr;
      opacity: 1;
    }
  }
  .nx-kanban-add-body {
    display: flex;
    gap: var(--nx-space-2);
    overflow: hidden;
    padding-block-end: var(--nx-space-1);
  }
  .nx-kanban-add-input {
    min-inline-size: 0;
    flex: 1;
    padding: var(--nx-space-2) var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface);
    color: var(--nx-text);
    font: 400 var(--nx-text-sm) / 1.4 var(--nx-font-sans);
    &::placeholder {
      color: var(--nx-text-subtle);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 1px;
    }
  }
  .nx-kanban-add-submit {
    flex: none;
    display: inline-grid;
    place-items: center;
    min-block-size: 2.25rem;
    padding-inline: var(--nx-space-3);
    border: 0;
    border-radius: var(--nx-radius-md);
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    cursor: pointer;
    transition-property: scale, background-color;
    transition-duration: var(--nx-spring-snappy-duration), var(--nx-dur-fast);
    transition-timing-function: var(--nx-spring-snappy), var(--nx-ease-out);
    &:hover {
      background: color-mix(in oklab, var(--nx-accent) 88%, var(--nx-text));
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  :where(.nx-js) .nx-kanban[data-nx-reveal]:not([data-nx-revealed]) .nx-kanban-card {
    opacity: 0;
    translate: 0 calc(8px * var(--nx-motion));
  }
  :where(.nx-js:not(.nx-live)) .nx-kanban[data-nx-reveal]:not([data-nx-revealed]) .nx-kanban-card {
    animation: nx-reveal-failsafe 1ms 2.5s forwards;
  }
  .nx-kanban[data-nx-revealed] .nx-kanban-card,
  .nx-kanban:not([data-nx-reveal]) .nx-kanban-card {
    opacity: 1;
    translate: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-kanban-placeholder {
      animation-duration: 150ms;
    }
    .nx-kanban-placeholder-dot {
      animation: none;
      opacity: 0.75;
    }
    .nx-kanban-card[data-dragging] {
      scale: 1;
    }
  }
  @media (forced-colors: active) {
    .nx-kanban-column {
      border: 1px solid CanvasText;
    }
    .nx-kanban-card {
      border: 1px solid CanvasText;
    }
    .nx-kanban-placeholder {
      border: 1px dashed CanvasText;
    }
    .nx-kanban-card[data-dragging] {
      opacity: 0.6;
    }
  }
}

/* src/css/blocks/timeline-feed.css */
@layer nx.components {
  .nx-timeline-feed {
    --_node: 2rem;
    --_line: 2px;
    --_tone: var(--nx-text-subtle);
    min-inline-size: 0;
  }
  .nx-timeline-feed-list {
    display: grid;
    gap: var(--nx-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-timeline-feed-item {
    --_tone: var(--nx-text-subtle);
    --_tone-soft: var(--nx-surface-2);
    position: relative;
    display: grid;
    grid-template-columns: var(--_node) minmax(0, 1fr);
    gap: 0 var(--nx-space-3);
    align-items: start;
    padding-block: var(--nx-space-1);
    border-radius: var(--nx-radius-md);
    &[data-tone=success] {
      --_tone: var(--nx-success-text);
      --_tone-soft: var(--nx-success-soft);
    }
    &[data-tone=warning] {
      --_tone: var(--nx-warning-text);
      --_tone-soft: var(--nx-warning-soft);
    }
    &[data-tone=info] {
      --_tone: var(--nx-info-text);
      --_tone-soft: var(--nx-info-soft);
    }
    &[data-tone=danger] {
      --_tone: var(--nx-danger-text);
      --_tone-soft: var(--nx-danger-soft);
    }
    &::before {
      content: "";
      grid-area: 1 / 1;
      justify-self: center;
      inline-size: var(--_line);
      block-size: calc(100% - var(--_node));
      margin-block-start: calc(var(--_node) + var(--nx-space-2) / 2);
      border-radius: var(--nx-radius-full);
      background:
        linear-gradient(
          to bottom,
          var(--_tone),
          color-mix(in oklab, var(--nx-border) 80%, transparent));
      opacity: 0.55;
      transition: opacity var(--nx-dur-slower) var(--nx-ease-out);
    }
    &:last-child::before {
      display: none;
    }
    &:hover::before {
      opacity: 0.9;
    }
  }
  .nx-timeline-feed-node {
    grid-area: 1 / 1;
    display: grid;
    place-items: center;
    inline-size: var(--_node);
    block-size: var(--_node);
    border-radius: var(--nx-radius-sm);
    background: var(--_tone-soft);
    color: var(--_tone);
    transition:
      background-color var(--nx-dur-base) var(--nx-ease-out),
      color var(--nx-dur-base) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  .nx-timeline-feed-item:is(:hover, :focus-within) .nx-timeline-feed-node {
    scale: calc(1 + 0.08 * var(--nx-motion));
  }
  .nx-timeline-feed-body {
    grid-area: 1 / 2;
    display: grid;
    gap: 0.125rem;
    align-content: center;
    min-block-size: var(--_node);
    padding-block-start: 0.125rem;
  }
  .nx-timeline-feed-text {
    margin: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    line-height: 1.55;
    strong {
      color: var(--nx-text);
      font-weight: 600;
    }
    a {
      color: var(--nx-accent-text);
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
    a:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
      border-radius: var(--nx-radius-xs);
    }
  }
  .nx-timeline-feed-time {
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    transition: color var(--nx-dur-fast) var(--nx-ease-out);
  }
  .nx-timeline-feed-item:is(:hover, :focus-within) .nx-timeline-feed-time {
    color: var(--nx-text-muted);
  }
  :where(.nx-js) .nx-timeline-feed-list[data-nx-reveal]:not([data-nx-revealed]) > .nx-timeline-feed-item {
    translate: calc(14px * var(--nx-dir) * var(--nx-motion)) 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-timeline-feed-item:is(:hover, :focus-within) .nx-timeline-feed-node {
      scale: none;
    }
  }
  @media (forced-colors: active) {
    .nx-timeline-feed-node {
      border: 1px solid CanvasText;
    }
    .nx-timeline-feed-item::before {
      background: CanvasText;
    }
  }
}

/* src/css/blocks/email.css */
@layer nx.components {
  @keyframes nx-email-read-in {
    from {
      opacity: 0;
      translate: calc(-10px * var(--nx-dir) * var(--nx-motion)) 0;
    }
  }
  @keyframes nx-email-star-pop {
    0% {
      scale: calc(1 - 0.3 * var(--nx-motion));
    }
    60% {
      scale: calc(1 + 0.12 * var(--nx-motion));
    }
  }
  .nx-email {
    --_radius: var(--nx-radius-xl);
    --_pad: 0.625rem;
    container-type: inline-size;
    min-inline-size: 0;
  }
  .nx-email-frame {
    display: grid;
    grid-template-columns: minmax(9.5rem, 11.5rem) minmax(15.5rem, 19rem) minmax(0, 1fr);
    block-size: var(--nx-email-height, 36rem);
    border: 1px solid var(--nx-border);
    border-radius: var(--_radius);
    background:
      radial-gradient(
        50% 40% at 100% 0%,
        var(--nx-accent-soft),
        transparent 70%),
      radial-gradient(
        40% 30% at 0% 100%,
        var(--nx-gold-soft),
        transparent 70%),
      var(--nx-bg-subtle);
    box-shadow: var(--nx-shadow-lg);
    overflow: clip;
  }
  .nx-email-folders {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    padding: var(--_pad);
    border-inline-end: 1px solid var(--nx-glass-border);
    background: color-mix(in oklab, var(--nx-surface-2) 88%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
  }
  .nx-email-folder-list {
    display: grid;
    align-content: start;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-email-folder {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    inline-size: 100%;
    padding: 0.5rem 0.625rem;
    border: 0;
    border-radius: calc(var(--_radius) - var(--_pad));
    background: transparent;
    color: var(--nx-text-muted);
    font: 500 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
    text-align: start;
    cursor: pointer;
    transition:
      background-color var(--nx-dur-base) var(--nx-ease-out),
      color var(--nx-dur-base) var(--nx-ease-out),
      scale var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    > .nx-icon {
      flex: none;
      inline-size: 1rem;
      block-size: 1rem;
      color: var(--nx-text-subtle);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:hover {
      background: var(--nx-surface-3);
      color: var(--nx-text);
    }
    &[aria-selected=true],
    &[aria-current=true] {
      background: var(--nx-surface);
      color: var(--nx-text);
      box-shadow: var(--nx-shadow-sm), inset 0 1px 0 0 var(--nx-highlight);
      > .nx-icon {
        color: var(--nx-accent-text);
      }
    }
  }
  .nx-email-folder-label {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-email-folder-count {
    display: inline-grid;
    place-items: center;
    flex: none;
    min-inline-size: 1.375rem;
    padding-inline: 0.3125rem;
    block-size: 1.25rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-accent-soft);
    color: var(--nx-accent-text);
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
    &[hidden] {
      display: none;
    }
  }
  .nx-email-folder[aria-current=true] .nx-email-folder-count {
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
  }
  .nx-email-listcol {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    min-block-size: 0;
    border-inline-end: 1px solid var(--nx-border);
  }
  .nx-email-list {
    display: grid;
    align-content: start;
    gap: 0.125rem;
    flex: 1;
    margin: 0;
    padding: var(--_pad);
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .nx-email-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.125rem;
  }
  .nx-email-item[hidden] {
    display: none;
  }
  .nx-email-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-inline-size: 0;
    padding: 0.5rem 0.5625rem;
    padding-inline-start: 0.75rem;
    border: 0;
    border-radius: calc(var(--_radius) - var(--_pad));
    background: transparent;
    color: var(--nx-text-muted);
    font: 500 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
    text-align: start;
    cursor: pointer;
    transition:
      background-color var(--nx-dur-base) var(--nx-ease-out),
      color var(--nx-dur-base) var(--nx-ease-out),
      scale var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &[aria-selected=true] {
      background: var(--nx-surface);
      color: var(--nx-text);
      box-shadow: var(--nx-shadow-sm), inset 0 1px 0 0 var(--nx-highlight);
    }
    &::before {
      content: "";
      position: absolute;
      inset-inline-start: 0.3125rem;
      block-size: 60%;
      inline-size: 0.1875rem;
      border-radius: var(--nx-radius-full);
      background: var(--nx-accent);
      scale: 1 1;
      opacity: 1;
      transition: scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy), opacity var(--nx-dur-fast) var(--nx-ease-out);
    }
    &:not([data-unread])::before {
      scale: 1 calc(1 - 1 * var(--nx-motion));
      opacity: 0;
    }
  }
  .nx-email-row[data-unread] .nx-email-from,
  .nx-email-row[data-unread] .nx-email-subject {
    color: var(--nx-text);
    font-weight: 650;
  }
  .nx-email-cell {
    display: grid;
    flex: 1;
    gap: 0.125rem;
    min-inline-size: 0;
  }
  .nx-email-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    min-inline-size: 0;
  }
  .nx-email-from {
    overflow: hidden;
    font-weight: 600;
    color: var(--nx-text);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-email-when {
    flex: none;
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .nx-email-subject {
    overflow: hidden;
    font-weight: 500;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-email-snippet {
    overflow: hidden;
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-email-star {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: calc(var(--_radius) - var(--_pad));
    background: transparent;
    color: var(--nx-text-subtle);
    cursor: pointer;
    transition-property:
      scale,
      color,
      background-color;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out);
    > .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
    &:hover {
      background: var(--nx-surface-3);
      color: var(--nx-gold-text);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 1px;
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &[aria-pressed=true] {
      background: var(--nx-gold-soft);
      color: var(--nx-gold-text);
      animation: nx-email-star-pop var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    }
  }
  .nx-email-empty {
    display: grid;
    place-content: center;
    gap: var(--nx-space-2);
    justify-items: center;
    flex: 1;
    padding: var(--nx-space-8) var(--nx-space-4);
    color: var(--nx-text-subtle);
    font: 500 var(--nx-text-sm) / 1.5 var(--nx-font-sans);
    text-align: center;
    > .nx-icon {
      color: var(--nx-text-subtle);
    }
  }
  .nx-email-main {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    min-block-size: 0;
  }
  .nx-email-reading {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-block-size: 0;
    animation: nx-email-read-in var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
  }
  .nx-email-head {
    display: flex;
    align-items: flex-start;
    gap: var(--nx-space-2);
    padding: var(--nx-space-3) var(--nx-space-4);
    border-block-end: 1px solid var(--nx-border);
    background: color-mix(in oklab, var(--nx-surface) 72%, transparent);
  }
  .nx-email-head-main {
    display: grid;
    gap: var(--nx-space-2);
    flex: 1;
    min-inline-size: 0;
  }
  .nx-email-subject-full {
    margin: 0;
    overflow: hidden;
    color: var(--nx-text);
    font: 650 var(--nx-text-base) / 1.35 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tight);
    overflow-wrap: anywhere;
  }
  .nx-email-parties {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-inline-size: 0;
  }
  .nx-email-party-group {
    display: grid;
    gap: 0.125rem;
    min-inline-size: 0;
  }
  .nx-email-party {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    min-inline-size: 0;
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    white-space: nowrap;
    > .nx-email-role {
      color: var(--nx-text-subtle);
    }
    > .nx-email-address {
      overflow: hidden;
      color: var(--nx-text-muted);
      font-weight: 600;
      text-overflow: ellipsis;
    }
  }
  .nx-email-when-full {
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    font-variant-numeric: tabular-nums;
  }
  .nx-email-head > .nx-email-star {
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--nx-radius-md);
    > .nx-icon {
      inline-size: 1.125rem;
      block-size: 1.125rem;
    }
  }
  .nx-email-body {
    display: grid;
    align-content: start;
    gap: var(--nx-space-3);
    flex: 1;
    min-block-size: 0;
    padding: var(--nx-space-4);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    color: var(--nx-text);
    font: 400 var(--nx-text-sm) / 1.65 var(--nx-font-sans);
    overflow-wrap: anywhere;
    > p {
      margin: 0;
    }
  }
  .nx-email-noselect {
    display: grid;
    place-content: center;
    gap: var(--nx-space-2);
    justify-items: center;
    flex: 1;
    padding: var(--nx-space-8) var(--nx-space-4);
    color: var(--nx-text-subtle);
    font: 500 var(--nx-text-sm) / 1.5 var(--nx-font-sans);
    text-align: center;
  }
  .nx-email-composer {
    display: grid;
    gap: var(--nx-space-2);
    padding: var(--nx-space-3) var(--nx-space-4);
    border-block-start: 1px solid var(--nx-border);
    background: color-mix(in oklab, var(--nx-surface) 72%, transparent);
  }
  .nx-email-reply {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--nx-text-subtle);
    font: 500 var(--nx-text-xs) / 1 var(--nx-font-sans);
    > .nx-icon {
      inline-size: 0.875rem;
      block-size: 0.875rem;
    }
  }
  .nx-email-compose {
    display: flex;
    align-items: flex-end;
    gap: var(--nx-space-2);
  }
  .nx-email-input {
    flex: 1;
    min-inline-size: 0;
    min-block-size: 2.5rem;
    max-block-size: 10lh;
    padding: var(--nx-space-2) var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface);
    color: var(--nx-text);
    font: 400 var(--nx-text-sm) / 1.7 var(--nx-font-sans);
    letter-spacing: normal;
    overflow-wrap: anywhere;
    resize: none;
    transition: border-color var(--nx-dur-base) var(--nx-ease-out), box-shadow var(--nx-dur-base) var(--nx-ease-out);
    &::placeholder {
      color: var(--nx-text-subtle);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-email-send {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--nx-radius-full);
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
    cursor: pointer;
    scale: 0.95;
    transition:
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      box-shadow var(--nx-dur-base) var(--nx-ease-out),
      opacity var(--nx-dur-fast) var(--nx-ease-out),
      background-color var(--nx-dur-base) var(--nx-ease-out);
    > .nx-icon {
      transition: translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle), opacity var(--nx-dur-fast) var(--nx-ease-out);
      opacity: 0.7;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &[data-ready] {
      scale: 1;
      box-shadow: var(--nx-shadow-glow);
      > .nx-icon {
        opacity: 1;
      }
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:disabled {
      background: var(--nx-surface-3);
      color: var(--nx-text-subtle);
      box-shadow: none;
      cursor: not-allowed;
    }
  }
  @container (width < 62rem) {
    .nx-email-frame {
      grid-template-columns: minmax(3rem, 3.5rem) minmax(14rem, 17rem) minmax(0, 1fr);
    }
    .nx-email-folder {
      justify-content: center;
      padding-inline: 0;
    }
    .nx-email-folder-label {
      display: none;
    }
  }
  @container (width < 44rem) {
    .nx-email-frame {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto minmax(9rem, 13rem) minmax(0, 1fr);
    }
    .nx-email-folders {
      flex-direction: row;
      border-inline-end: 0;
      border-block-end: 1px solid var(--nx-glass-border);
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
    }
    .nx-email-folder-list {
      display: flex;
      gap: 0.25rem;
    }
    .nx-email-folder {
      justify-content: flex-start;
      padding-inline: 0.625rem;
      white-space: nowrap;
    }
    .nx-email-folder-label {
      display: block;
    }
    .nx-email-listcol {
      border-inline-end: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-email-reading {
      animation-duration: 150ms;
    }
    .nx-email-star[aria-pressed=true] {
      animation: none;
    }
  }
  @media (forced-colors: active) {
    .nx-email-frame {
      border: 1px solid CanvasText;
    }
    .nx-email-row[aria-selected=true] {
      outline: 1px solid Highlight;
    }
    .nx-email-star[aria-pressed=true] {
      color: Highlight;
    }
    .nx-email-input {
      border: 1px solid CanvasText;
    }
  }
}

/* src/css/blocks/file-manager.css */
@layer nx.components {
  .nx-file-manager [data-kind] {
    --_tone: var(--nx-text-muted);
    --_tone-soft: color-mix(in oklab, var(--nx-text-muted) 14%, transparent);
  }
  .nx-file-manager [data-kind=folder] {
    --_tone: var(--nx-gold);
    --_tone-soft: var(--nx-gold-soft);
  }
  .nx-file-manager [data-kind=image] {
    --_tone: var(--nx-info);
    --_tone-soft: var(--nx-info-soft);
  }
  .nx-file-manager [data-kind=audio] {
    --_tone: var(--nx-accent);
    --_tone-soft: var(--nx-accent-soft);
  }
  .nx-file-manager [data-kind=video] {
    --_tone: var(--nx-success);
    --_tone-soft: var(--nx-success-soft);
  }
  .nx-file-manager {
    --nx-fm-height: none;
    display: grid;
    gap: var(--nx-space-3);
  }
  .nx-fm-toolbar {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    flex-wrap: wrap;
    padding-inline: var(--nx-space-1);
  }
  .nx-fm-crumbs {
    display: flex;
    align-items: center;
    gap: var(--nx-space-1);
    flex: 1 1 11rem;
    min-inline-size: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .nx-fm-crumb {
    display: inline-flex;
    align-items: center;
    flex: none;
    min-block-size: 1.75rem;
    padding: var(--nx-space-1) var(--nx-space-2);
    border: 0;
    border-radius: var(--nx-radius-md);
    background: transparent;
    color: var(--nx-text-muted);
    font: 500 var(--nx-text-xs) / 1.2 var(--nx-font-sans);
    cursor: pointer;
    transition-property:
      scale,
      background-color,
      color;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out);
    > .nx-icon {
      flex: none;
      inline-size: 0.9rem;
      block-size: 0.9rem;
      color: var(--nx-text-subtle);
    }
    > span {
      min-inline-size: 0;
      max-inline-size: 11rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &:hover {
      background: var(--nx-surface-3);
      color: var(--nx-text);
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 1px;
    }
    &[aria-current=page] {
      background: var(--nx-surface-3);
      color: var(--nx-text);
      font-weight: 600;
    }
  }
  .nx-fm-crumb:not(:first-child)::before {
    content: "";
    flex: none;
    inline-size: 0.8rem;
    block-size: 0.8rem;
    margin-inline-end: var(--nx-space-1);
    background: currentColor;
    color: var(--nx-text-subtle);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  :where([dir=rtl]) .nx-fm-crumb:not(:first-child)::before {
    rotate: 180deg;
  }
  .nx-fm-countwrap {
    display: inline-flex;
    flex: none;
    align-items: center;
  }
  .nx-fm-count {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.625rem;
    block-size: 1.375rem;
    padding-inline: var(--nx-space-2);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-2);
    color: var(--nx-text-muted);
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
    .nx-number {
      font-size: inherit;
    }
  }
  .nx-fm-tools {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    flex-wrap: wrap;
    margin-inline-start: auto;
  }
  .nx-fm-search {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    flex: 1 1 9rem;
    max-inline-size: 17rem;
    min-block-size: 2.25rem;
    padding-inline: var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    transition: border-color var(--nx-dur-fast) var(--nx-ease-out), box-shadow var(--nx-dur-fast) var(--nx-ease-out);
    > .nx-icon {
      flex: none;
      inline-size: 1rem;
      block-size: 1rem;
      color: var(--nx-text-subtle);
    }
    &:focus-within {
      border-color: var(--nx-border-strong);
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--nx-accent) 16%, transparent);
    }
  }
  .nx-fm-search-input {
    min-inline-size: 0;
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--nx-text);
    font: 400 var(--nx-text-sm) / 1.4 var(--nx-font-sans);
    &::placeholder {
      color: var(--nx-text-subtle);
    }
    &:focus-visible {
      outline: none;
    }
    &::-webkit-search-cancel-button {
      display: none;
    }
  }
  .nx-fm-clear {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: transparent;
    color: var(--nx-text-subtle);
    cursor: pointer;
    transition-property:
      scale,
      background-color,
      color;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out);
    > .nx-icon {
      inline-size: 0.85rem;
      block-size: 0.85rem;
    }
    &:hover {
      background: var(--nx-surface-3);
      color: var(--nx-text);
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 1px;
    }
  }
  .nx-fm-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    flex: none;
    min-block-size: 2.25rem;
    padding-inline: var(--nx-space-3);
    border: 0;
    border-radius: var(--nx-radius-full);
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tight);
    cursor: pointer;
    transition-property: scale, background-color;
    transition-duration: var(--nx-spring-snappy-duration), var(--nx-dur-fast);
    transition-timing-function: var(--nx-spring-snappy), var(--nx-ease-out);
    > .nx-icon {
      inline-size: 0.9rem;
      block-size: 0.9rem;
    }
    &:hover {
      background: color-mix(in oklab, var(--nx-accent) 88%, var(--nx-text));
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-fm-stage {
    display: grid;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface-2);
    box-shadow: var(--nx-shadow-xs);
  }
  .nx-fm-scroll {
    grid-area: 1 / 1;
    block-size: var(--nx-fm-height, auto);
    overflow-block: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .nx-fm-items {
    display: grid;
    gap: var(--nx-space-2);
    align-content: start;
    margin: 0;
    padding: var(--nx-space-3);
    list-style: none;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  }
  .nx-fm-items[data-view=list] {
    gap: var(--nx-space-1);
    grid-template-columns: minmax(0, 1fr);
  }
  .nx-fm-item {
    min-inline-size: 0;
    transition: translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle), opacity var(--nx-dur-base) var(--nx-ease-out);
    transition-delay: calc(min(var(--nx-i, 0), 12) * 40ms), calc(min(var(--nx-i, 0), 12) * 40ms);
  }
  .nx-fm-item[hidden],
  .nx-fm-empty[hidden],
  .nx-fm-crumb[hidden],
  .nx-fm-clear[hidden] {
    display: none;
  }
  .nx-fm-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--nx-space-2);
    inline-size: 100%;
    min-block-size: 0;
    padding: var(--nx-space-4) var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
    color: var(--nx-text);
    text-align: center;
    box-shadow: var(--nx-shadow-xs);
    cursor: pointer;
    transition:
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      opacity var(--nx-dur-base) var(--nx-ease-out),
      border-color var(--nx-dur-fast) var(--nx-ease-out),
      box-shadow var(--nx-dur-fast) var(--nx-ease-out);
    transition-delay:
      calc(min(var(--nx-i, 0), 12) * 40ms),
      0ms,
      calc(min(var(--nx-i, 0), 12) * 40ms),
      0ms,
      0ms;
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-fm-card:hover {
      border-color: var(--nx-border-strong);
      box-shadow: var(--nx-shadow-sm);
      translate: 0 calc(-2px * var(--nx-motion));
      transition-delay: 0ms;
    }
  }
  .nx-fm-card:active:not([data-static]) {
    scale: calc(1 - 0.04 * var(--nx-motion));
  }
  .nx-fm-card:focus-visible {
    outline: 2px solid var(--nx-ring);
    outline-offset: 2px;
  }
  .nx-fm-card[data-active] {
    border-color: color-mix(in oklab, var(--nx-accent) 55%, var(--nx-border));
    box-shadow: var(--nx-shadow-xs), inset 0 0 0 1px color-mix(in oklab, var(--nx-accent) 30%, transparent);
  }
  .nx-fm-icon {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--nx-radius-md);
    background: var(--_tone-soft);
    color: var(--_tone);
    > .nx-icon,
    > svg {
      inline-size: 1.25rem;
      block-size: 1.25rem;
    }
  }
  .nx-fm-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    font: 500 var(--nx-text-sm) / 1.4 var(--nx-font-sans);
  }
  .nx-fm-meta {
    color: var(--nx-text-subtle);
    font: 400 var(--nx-text-xs) / 1.4 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
  }
  .nx-fm-items[data-view=list] .nx-fm-card {
    flex-direction: row;
    align-items: center;
    gap: var(--nx-space-3);
    padding: var(--nx-space-2) var(--nx-space-3);
    border-color: transparent;
    border-radius: var(--nx-radius-md);
    background: transparent;
    text-align: start;
    box-shadow: none;
  }
  .nx-fm-items[data-view=list] .nx-fm-card:hover {
    border-color: var(--nx-border);
    background: var(--nx-surface);
    box-shadow: none;
  }
  .nx-fm-items[data-view=list] .nx-fm-card[data-active] {
    border-color: color-mix(in oklab, var(--nx-accent) 55%, var(--nx-border));
    background: var(--nx-surface);
  }
  .nx-fm-items[data-view=list] .nx-fm-icon {
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--nx-radius-sm);
  }
  .nx-fm-items[data-view=list] .nx-fm-name {
    display: block;
    flex: 1;
    min-inline-size: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .nx-fm-items[data-view=list] .nx-fm-meta {
    flex: none;
    white-space: nowrap;
  }
  .nx-fm-empty {
    display: grid;
    place-items: center;
    margin: 0 var(--nx-space-3) var(--nx-space-3);
    padding: var(--nx-space-8) var(--nx-space-4);
    border: 1px dashed var(--nx-border);
    border-radius: var(--nx-radius-lg);
    color: var(--nx-text-subtle);
    font: 400 var(--nx-text-xs) / 1.5 var(--nx-font-sans);
    text-align: center;
  }
  .nx-fm-scrim {
    grid-area: 1 / 1;
    z-index: 1;
    border: 0;
    padding: 0;
    background: color-mix(in oklab, var(--nx-bg) 55%, transparent);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--nx-dur-base) var(--nx-ease-out), visibility 0s linear var(--nx-dur-base);
  }
  .nx-fm-scrim[data-open] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .nx-fm-drawer {
    grid-area: 1 / 1;
    z-index: 2;
    justify-self: end;
    display: flex;
    flex-direction: column;
    inline-size: min(21rem, 100%);
    border: 1px solid var(--nx-border);
    border-start-start-radius: var(--nx-radius-xl);
    border-end-start-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-xl), inset 0 1px 0 var(--nx-highlight);
    translate: calc(100% * var(--nx-dir)) 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      opacity var(--nx-dur-base) var(--nx-ease-out),
      visibility 0s linear var(--nx-spring-gentle-duration);
  }
  .nx-fm-drawer[data-open] {
    translate: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .nx-fm-drawer-head {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    padding: var(--nx-space-4);
    border-block-end: 1px solid var(--nx-border);
  }
  .nx-fm-drawer-id {
    display: grid;
    gap: var(--nx-space-1);
    flex: 1;
    min-inline-size: 0;
  }
  .nx-fm-drawer-title {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--nx-text);
    font: 600 var(--nx-text-sm) / 1.35 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tight);
  }
  .nx-fm-drawer-kind {
    margin: 0;
    color: var(--nx-text-subtle);
    font: 400 var(--nx-text-xs) / 1.3 var(--nx-font-sans);
  }
  .nx-fm-drawer-close {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: transparent;
    color: var(--nx-text-subtle);
    cursor: pointer;
    transition-property:
      scale,
      background-color,
      color;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out);
    > .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
    &:hover {
      background: var(--nx-surface-3);
      color: var(--nx-text);
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 1px;
    }
  }
  .nx-fm-drawer-body {
    display: grid;
    gap: var(--nx-space-4);
    align-content: start;
    padding: var(--nx-space-4);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .nx-fm-drawer-preview {
    margin: 0;
    border-radius: var(--nx-radius-lg);
    overflow: clip;
    & img {
      display: block;
      inline-size: 100%;
      block-size: 11rem;
      object-fit: cover;
      outline: 1px solid color-mix(in oklab, currentColor 10%, transparent);
      outline-offset: -1px;
    }
  }
  .nx-fm-drawer-preview[hidden],
  .nx-fm-drawer-open[hidden] {
    display: none;
  }
  .nx-fm-drawer-rows {
    display: grid;
    margin: 0;
  }
  .nx-fm-drawer-rows > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nx-space-3);
    padding-block: var(--nx-space-2);
    border-block-end: 1px solid var(--nx-border);
  }
  .nx-fm-drawer-rows > div:last-child {
    border-block-end: 0;
  }
  .nx-fm-drawer-rows dt {
    flex: none;
    color: var(--nx-text-subtle);
    font: 400 var(--nx-text-xs) / 1.5 var(--nx-font-sans);
  }
  .nx-fm-drawer-rows dd {
    margin: 0;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    text-align: end;
    color: var(--nx-text);
    font: 500 var(--nx-text-sm) / 1.5 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
  }
  .nx-fm-drawer-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    min-block-size: 2.25rem;
    padding-inline: var(--nx-space-3);
    border-radius: var(--nx-radius-md);
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    text-decoration: none;
    cursor: pointer;
    transition-property: scale, background-color;
    transition-duration: var(--nx-spring-snappy-duration), var(--nx-dur-fast);
    transition-timing-function: var(--nx-spring-snappy), var(--nx-ease-out);
    > .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
    &:hover {
      background: color-mix(in oklab, var(--nx-accent) 88%, var(--nx-text));
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  :where(.nx-js) .nx-file-manager[data-nx-reveal]:not([data-nx-revealed]) .nx-fm-item {
    opacity: 0;
    translate: 0 calc(8px * var(--nx-motion));
  }
  :where(.nx-js:not(.nx-live)) .nx-file-manager[data-nx-reveal]:not([data-nx-revealed]) .nx-fm-item {
    animation: nx-reveal-failsafe 1ms 2.5s forwards;
  }
  .nx-file-manager[data-nx-revealed] .nx-fm-item,
  .nx-file-manager:not([data-nx-reveal]) .nx-fm-item {
    opacity: 1;
    translate: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-fm-drawer {
      translate: none;
      transition: opacity 150ms var(--nx-ease-out), visibility 0s linear 150ms;
    }
  }
  @media (forced-colors: active) {
    .nx-fm-stage {
      border: 1px solid CanvasText;
    }
    .nx-fm-card {
      border: 1px solid CanvasText;
    }
    .nx-fm-items[data-view=list] .nx-fm-card {
      border-color: CanvasText;
    }
    .nx-fm-empty {
      border: 1px dashed CanvasText;
    }
    .nx-fm-drawer {
      border: 1px solid CanvasText;
    }
    .nx-fm-scrim {
      background: Canvas;
    }
  }
}

/* src/css/blocks/todo.css */
@layer nx.components {
  .nx-todo [data-tone] {
    --_tone: var(--nx-accent);
    --_tone-soft: var(--nx-accent-soft);
  }
  .nx-todo [data-tone=success] {
    --_tone: var(--nx-success);
    --_tone-soft: var(--nx-success-soft);
  }
  .nx-todo [data-tone=warning] {
    --_tone: var(--nx-warning);
    --_tone-soft: var(--nx-warning-soft);
  }
  .nx-todo [data-tone=danger] {
    --_tone: var(--nx-danger);
    --_tone-soft: var(--nx-danger-soft);
  }
  .nx-todo [data-tone=info] {
    --_tone: var(--nx-info);
    --_tone-soft: var(--nx-info-soft);
  }
  .nx-todo [data-tone=gold] {
    --_tone: var(--nx-gold);
    --_tone-soft: var(--nx-gold-soft);
  }
  .nx-todo {
    display: grid;
    gap: var(--nx-space-3);
  }
  .nx-todo-head {
    display: flex;
    align-items: baseline;
    gap: var(--nx-space-3);
  }
  .nx-todo-title {
    min-inline-size: 0;
    margin: 0;
    overflow: hidden;
    color: var(--nx-text);
    font: 600 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tight);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-todo-count {
    display: inline-flex;
    align-items: baseline;
    gap: var(--nx-space-1);
    margin-inline-start: auto;
    padding-inline: var(--nx-space-2);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-2);
    color: var(--nx-text-muted);
    font: 600 var(--nx-text-xs) / 1.7 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
    .nx-number {
      font-size: inherit;
    }
  }
  .nx-todo-count-sep {
    color: var(--nx-text-subtle);
  }
  .nx-todo-progress {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
  }
  .nx-todo-progress-track {
    position: relative;
    flex: 1;
    block-size: 0.5rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-3);
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.08);
    overflow: clip;
  }
  .nx-todo-progress-fill {
    display: block;
    block-size: 100%;
    inline-size: calc(var(--nx-todo-p, 0) * 1%);
    border-radius: inherit;
    background:
      linear-gradient(
        90deg,
        var(--nx-accent),
        color-mix(in oklab, var(--nx-accent) 65%, var(--nx-gold)));
    transition: inline-size var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
  }
  .nx-todo[data-complete] .nx-todo-progress-fill {
    background: var(--nx-success);
  }
  .nx-todo-progress-label {
    flex: none;
    min-inline-size: 2.75rem;
    color: var(--nx-text-muted);
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
    text-align: end;
    .nx-number {
      font-size: inherit;
    }
  }
  .nx-todo-add {
    display: flex;
    gap: var(--nx-space-2);
  }
  .nx-todo-add-input,
  .nx-todo-add-select {
    min-inline-size: 0;
    padding: var(--nx-space-2) var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface);
    color: var(--nx-text);
    font: 400 var(--nx-text-sm) / 1.4 var(--nx-font-sans);
    &::placeholder {
      color: var(--nx-text-subtle);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 1px;
    }
  }
  .nx-todo-add-input {
    flex: 1;
  }
  .nx-todo-add-select {
    flex: none;
    max-inline-size: 9rem;
    cursor: pointer;
  }
  .nx-todo-add-submit {
    flex: none;
    display: inline-grid;
    place-items: center;
    min-block-size: 2.25rem;
    padding-inline: var(--nx-space-3);
    border: 0;
    border-radius: var(--nx-radius-md);
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    cursor: pointer;
    transition-property: scale, background-color;
    transition-duration: var(--nx-spring-snappy-duration), var(--nx-dur-fast);
    transition-timing-function: var(--nx-spring-snappy), var(--nx-ease-out);
    > .nx-icon {
      inline-size: 0.95rem;
      block-size: 0.95rem;
    }
    &:hover {
      background: color-mix(in oklab, var(--nx-accent) 88%, var(--nx-text));
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-todo-groups {
    display: grid;
    gap: var(--nx-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-todo-group {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface-2);
    box-shadow: var(--nx-shadow-xs);
    transition:
      border-color var(--nx-dur-fast) var(--nx-ease-out),
      box-shadow var(--nx-dur-fast) var(--nx-ease-out),
      background-color var(--nx-dur-fast) var(--nx-ease-out);
  }
  .nx-todo-group[data-dropping] {
    border-color: color-mix(in oklab, var(--_tone, var(--nx-accent)) 55%, var(--nx-border));
    background: var(--nx-surface-3);
    box-shadow: var(--nx-shadow-sm), inset 0 0 0 1px color-mix(in oklab, var(--_tone, var(--nx-accent)) 22%, transparent);
  }
  .nx-todo-group-head {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-3) var(--nx-space-3) var(--nx-space-2);
  }
  .nx-todo-group-dot {
    flex: none;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: var(--_tone);
    box-shadow: 0 0 0 3px var(--_tone-soft);
  }
  .nx-todo-group-title {
    min-inline-size: 0;
    margin: 0;
    overflow: hidden;
    color: var(--nx-text);
    font: 600 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tight);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-todo-group-count {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.625rem;
    margin-inline-start: auto;
    padding-inline: var(--nx-space-2);
    block-size: 1.375rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    color: var(--nx-text-muted);
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
    .nx-number {
      font-size: inherit;
    }
  }
  .nx-todo-list {
    display: grid;
    gap: var(--nx-space-1);
    align-content: start;
    margin: 0;
    padding: 0 var(--nx-space-2) var(--nx-space-2);
    list-style: none;
  }
  .nx-todo-item {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding-block: var(--nx-space-2);
    padding-inline: var(--nx-space-1) var(--nx-space-2);
    border: 1px solid transparent;
    border-radius: var(--nx-radius-lg);
    cursor: grab;
    transition:
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      opacity var(--nx-dur-base) var(--nx-ease-out),
      border-color var(--nx-dur-fast) var(--nx-ease-out),
      background-color var(--nx-dur-fast) var(--nx-ease-out);
    transition-delay:
      calc(min(var(--nx-i, 0), 12) * 40ms),
      0ms,
      calc(min(var(--nx-i, 0), 12) * 40ms),
      0ms,
      0ms;
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-todo-item:hover {
      border-color: var(--nx-border);
      background: var(--nx-surface);
      translate: 0 calc(-1px * var(--nx-motion));
      transition-delay: 0ms;
    }
  }
  .nx-todo-item[data-dragging] {
    opacity: 0.35;
    scale: calc(0.98 * (1 - 0.02 * var(--nx-motion)));
    border: 1px dashed var(--nx-border-strong);
    background: var(--nx-surface);
    cursor: grabbing;
  }
  .nx-todo-grip {
    flex: none;
    inline-size: 0.875rem;
    block-size: 1.125rem;
    background: radial-gradient(currentColor 1px, transparent 1.3px) 50% / 5px 5px no-repeat;
    color: var(--nx-text-subtle);
    opacity: 0.45;
    transition: opacity var(--nx-dur-fast) var(--nx-ease-out);
  }
  .nx-todo-item:is(:hover, :focus-within, [data-dragging]) .nx-todo-grip {
    opacity: 1;
  }
  .nx-todo-item[data-dragging] .nx-todo-grip {
    color: var(--nx-text-muted);
  }
  .nx-todo-check {
    appearance: none;
    flex: none;
    display: inline-grid;
    place-content: center;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border: 1.5px solid var(--nx-border-strong);
    border-radius: var(--nx-radius-sm);
    background: var(--nx-surface);
    color: var(--nx-accent-contrast);
    cursor: pointer;
    transition:
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      border-color var(--nx-dur-fast) var(--nx-ease-out),
      box-shadow var(--nx-dur-base) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &::before {
      content: "";
      grid-area: 1 / 1;
      inline-size: 0.85rem;
      block-size: 0.85rem;
      background: currentColor;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
      scale: calc(0.4 + 0.6 * (1 - var(--nx-motion)));
      opacity: 0;
      rotate: calc(-8deg * var(--nx-motion));
      transition:
        scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy),
        rotate var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy),
        opacity var(--nx-dur-fast) var(--nx-ease-out);
    }
    &:hover:not(:disabled, :checked) {
      border-color: var(--nx-accent);
      box-shadow: 0 0 0 4px var(--nx-accent-soft);
    }
    &:active:not(:disabled) {
      scale: calc(1 - 0.12 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:disabled {
      cursor: not-allowed;
      opacity: 0.6;
    }
    &:checked {
      border-color: var(--nx-accent);
      background: var(--nx-accent);
      box-shadow: 0 0 0 4px var(--nx-accent-soft);
      &::before {
        scale: 1;
        opacity: 1;
        rotate: 0deg;
        transition-delay: 30ms;
      }
    }
  }
  .nx-todo-label {
    position: relative;
    min-inline-size: 0;
    flex: 1;
    color: var(--nx-text);
    font: 500 var(--nx-text-sm) / 1.5 var(--nx-font-sans);
    overflow-wrap: anywhere;
    transition: color var(--nx-dur-base) var(--nx-ease-out), opacity var(--nx-dur-base) var(--nx-ease-out);
    &::after {
      content: "";
      position: absolute;
      inset-block-start: 0.72em;
      inset-inline-start: 0;
      inline-size: 0;
      block-size: 1.5px;
      border-radius: var(--nx-radius-full);
      background: currentColor;
      opacity: 0.55;
      transition: inline-size var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    }
  }
  .nx-todo-item[data-done] .nx-todo-label {
    color: var(--nx-text-subtle);
    &::after {
      inline-size: 100%;
    }
  }
  .nx-todo-remove {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: transparent;
    color: var(--nx-text-subtle);
    cursor: pointer;
    opacity: 0;
    transition-property:
      scale,
      background-color,
      color,
      opacity;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-ease-out);
    > .nx-icon {
      inline-size: 0.9rem;
      block-size: 0.9rem;
    }
    &:hover {
      background: var(--nx-danger-soft);
      color: var(--nx-danger-text);
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      opacity: 1;
      outline: 2px solid var(--nx-ring);
      outline-offset: 1px;
    }
  }
  .nx-todo-item:is(:hover, :focus-within) .nx-todo-remove,
  .nx-todo-item[data-dragging] .nx-todo-remove {
    opacity: 1;
  }
  @media (hover: none) {
    .nx-todo-remove {
      opacity: 1;
    }
    .nx-todo-grip {
      opacity: 0.8;
    }
  }
  .nx-todo-placeholder {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    min-block-size: 2rem;
    padding-inline: var(--nx-space-3);
    border: 1px dashed color-mix(in oklab, var(--_tone, var(--nx-accent)) 60%, var(--nx-border));
    border-radius: var(--nx-radius-lg);
    background: var(--_tone-soft, var(--nx-accent-soft));
    animation: nx-todo-slot var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
  }
  .nx-todo-placeholder[hidden] {
    display: none;
  }
  @keyframes nx-todo-slot {
    from {
      opacity: 0;
      scale: calc(1 - 0.1 * var(--nx-motion));
    }
  }
  .nx-todo-placeholder-dot {
    flex: none;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: var(--_tone, var(--nx-accent));
    animation: nx-todo-breathe 1.4s var(--nx-ease-in-out) infinite;
  }
  .nx-todo-placeholder-bar {
    inline-size: min(9rem, 60%);
    block-size: 0.375rem;
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--_tone, var(--nx-accent)) 28%, transparent);
  }
  @keyframes nx-todo-breathe {
    50% {
      scale: calc(1 + 0.35 * var(--nx-motion));
      opacity: 0.55;
    }
  }
  .nx-todo-empty {
    padding: var(--nx-space-3);
    border: 1px dashed var(--nx-border);
    border-radius: var(--nx-radius-lg);
    color: var(--nx-text-subtle);
    font: 400 var(--nx-text-xs) / 1.5 var(--nx-font-sans);
    text-align: center;
  }
  :where(.nx-js) .nx-todo[data-nx-reveal]:not([data-nx-revealed]) .nx-todo-item {
    opacity: 0;
    translate: 0 calc(8px * var(--nx-motion));
  }
  :where(.nx-js:not(.nx-live)) .nx-todo[data-nx-reveal]:not([data-nx-revealed]) .nx-todo-item {
    animation: nx-reveal-failsafe 1ms 2.5s forwards;
  }
  .nx-todo[data-nx-revealed] .nx-todo-item,
  .nx-todo:not([data-nx-reveal]) .nx-todo-item {
    opacity: 1;
    translate: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-todo-progress-fill,
    .nx-todo-label::after {
      transition-duration: 150ms;
      transition-timing-function: var(--nx-ease-out);
    }
    .nx-todo-check::before {
      transition-duration: 150ms;
      transition-timing-function: var(--nx-ease-out);
    }
    .nx-todo-placeholder {
      animation-duration: 150ms;
    }
    .nx-todo-placeholder-dot {
      animation: none;
      opacity: 0.75;
    }
    .nx-todo-item[data-dragging] {
      scale: 1;
    }
  }
  @media (forced-colors: active) {
    .nx-todo-group {
      border: 1px solid CanvasText;
    }
    .nx-todo-item[data-dragging] {
      border: 1px dashed CanvasText;
      opacity: 0.6;
    }
    .nx-todo-placeholder {
      border: 1px dashed CanvasText;
    }
    .nx-todo-check:checked {
      background: Highlight;
      border-color: Highlight;
    }
    .nx-todo-label::after {
      background: CanvasText;
    }
  }
}

/* src/css/blocks/product-card.css */
@layer nx.components {
  .nx-product-card [data-stock] {
    --_tone: var(--nx-success);
    --_tone-text: var(--nx-success-text);
    --_tone-soft: var(--nx-success-soft);
  }
  .nx-product-card [data-stock=low] {
    --_tone: var(--nx-warning);
    --_tone-text: var(--nx-warning-text);
    --_tone-soft: var(--nx-warning-soft);
  }
  .nx-product-card [data-stock=out] {
    --_tone: var(--nx-danger);
    --_tone-text: var(--nx-danger-text);
    --_tone-soft: var(--nx-danger-soft);
  }
  .nx-product-card {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-xs);
    transition:
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      border-color var(--nx-dur-fast) var(--nx-ease-out),
      box-shadow var(--nx-dur-fast) var(--nx-ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-product-card:hover {
      border-color: var(--nx-border-strong);
      box-shadow: var(--nx-shadow-sm);
      translate: 0 calc(-3px * var(--nx-motion));
    }
  }
  .nx-product-card-media {
    position: relative;
    display: block;
    overflow: clip;
    margin: var(--nx-space-2);
    border-radius: var(--nx-radius-lg);
    aspect-ratio: 4 / 5;
    background: var(--nx-surface-2);
  }
  .nx-product-card-img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    outline: 1px solid color-mix(in oklab, var(--nx-text) 10%, transparent);
    outline-offset: -1px;
    transition: scale var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-product-card:hover .nx-product-card-img {
      scale: calc(1 + 0.05 * var(--nx-motion));
    }
    .nx-product-card:focus-within .nx-product-card-img {
      scale: calc(1 + 0.03 * var(--nx-motion));
    }
  }
  .nx-product-card-tags {
    position: absolute;
    inset-block-start: var(--nx-space-2);
    inset-inline-start: var(--nx-space-2);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--nx-space-1);
    pointer-events: none;
  }
  .nx-product-card-body > .nx-product-card-tags {
    position: static;
    flex-direction: row;
    align-items: center;
  }
  .nx-product-card-discount,
  .nx-product-card-stock {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-1);
    padding: var(--nx-space-1) var(--nx-space-2);
    border-radius: var(--nx-radius-full);
    font: 600 var(--nx-text-xs) / 1.2 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .nx-product-card-discount {
    background: var(--nx-danger-soft);
    color: var(--nx-danger-text);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--nx-danger) 30%, transparent);
  }
  .nx-product-card-stock {
    background: color-mix(in oklab, var(--nx-surface) 78%, transparent);
    color: var(--_tone-text, var(--nx-text-muted));
  }
  .nx-product-card-stock-dot {
    flex: none;
    inline-size: 0.4375rem;
    block-size: 0.4375rem;
    border-radius: 50%;
    background: var(--_tone, var(--nx-text-subtle));
  }
  .nx-product-card-stock[data-stock=low] .nx-product-card-stock-dot {
    animation: nx-product-card-breathe 1.4s var(--nx-ease-in-out) infinite;
  }
  @keyframes nx-product-card-breathe {
    50% {
      scale: calc(1 + 0.35 * var(--nx-motion));
      opacity: 0.6;
    }
  }
  .nx-product-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--nx-space-2);
    flex: 1;
    min-inline-size: 0;
    padding: var(--nx-space-2) var(--nx-space-3) var(--nx-space-3);
  }
  .nx-product-card-category {
    margin: 0;
    color: var(--nx-text-subtle);
    font: 500 var(--nx-text-xs) / 1.4 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-wide);
  }
  :lang(fa) .nx-product-card-category,
  :lang(ar) .nx-product-card-category {
    letter-spacing: 0;
  }
  .nx-product-card-title {
    margin: 0;
    font: 600 var(--nx-text-sm) / 1.45 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tight);
  }
  .nx-product-card-link {
    color: var(--nx-text);
    text-decoration: none;
    overflow-wrap: anywhere;
    transition-property: color;
    transition-duration: var(--nx-dur-fast);
    transition-timing-function: var(--nx-ease-out);
    &:hover {
      color: var(--nx-accent-text);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
      border-radius: var(--nx-radius-xs);
    }
  }
  .nx-product-card-rating {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    color: var(--nx-text-muted);
    font: 500 var(--nx-text-xs) / 1.3 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
  }
  .nx-product-card-stars {
    position: relative;
    display: inline-flex;
    flex: none;
  }
  .nx-product-card-stars-row {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0.125rem;
    & .nx-icon {
      inline-size: 0.875rem;
      block-size: 0.875rem;
    }
  }
  .nx-product-card-stars-bg {
    color: var(--nx-border-strong);
  }
  .nx-product-card-stars-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    overflow: clip;
    inline-size: calc(clamp(0, var(--nx-product-rating, 0), 5) / 5 * 100%);
    color: var(--nx-gold);
  }
  .nx-product-card-rating-count {
    color: var(--nx-text-subtle);
  }
  .nx-product-card-pricing {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--nx-space-1) var(--nx-space-2);
    margin-block-start: auto;
  }
  .nx-product-card-price {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    color: var(--nx-text);
    font: 700 var(--nx-text-lg) / 1.2 var(--nx-font-display);
    font-variant-numeric: tabular-nums;
  }
  .nx-product-card-currency {
    color: var(--nx-text-muted);
    font: 500 0.75em / 1 var(--nx-font-sans);
  }
  .nx-product-card-compare {
    color: var(--nx-text-subtle);
    font: 400 var(--nx-text-xs) / 1.2 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
    text-decoration: line-through;
  }
  .nx-product-card-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    min-block-size: 2.5rem;
    margin-block-start: var(--nx-space-1);
    padding-inline: var(--nx-space-3);
    border: 0;
    border-radius: var(--nx-radius-md);
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    cursor: pointer;
    transition-property:
      scale,
      background-color,
      color,
      box-shadow;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-base),
      var(--nx-dur-base),
      var(--nx-dur-base);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-ease-out);
    &:hover:not(:disabled) {
      background: color-mix(in oklab, var(--nx-accent) 88%, var(--nx-text));
    }
    &:active:not(:disabled, [data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:disabled {
      cursor: not-allowed;
    }
  }
  .nx-product-card-add[data-in-cart] {
    background: var(--nx-success-soft);
    color: var(--nx-success-text);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--nx-success) 35%, transparent);
    &:hover {
      background: color-mix(in oklab, var(--nx-success-soft) 82%, var(--nx-success) 18%);
    }
  }
  .nx-product-card-add:disabled {
    background: var(--nx-surface-3);
    color: var(--nx-text-subtle);
    box-shadow: inset 0 0 0 1px var(--nx-border);
  }
  .nx-product-card-add-icon {
    position: relative;
    flex: none;
    inline-size: 1rem;
    block-size: 1rem;
    > [data-part] {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      display: block;
      inline-size: 1rem;
      block-size: 1rem;
      transition:
        scale 300ms cubic-bezier(0.2, 0, 0, 1),
        opacity 300ms cubic-bezier(0.2, 0, 0, 1),
        filter 300ms cubic-bezier(0.2, 0, 0, 1);
      & .nx-icon {
        inline-size: 1rem;
        block-size: 1rem;
      }
    }
    > [data-part=done] {
      scale: 0.25;
      opacity: 0;
      filter: blur(4px);
    }
  }
  .nx-product-card-add[data-in-cart] .nx-product-card-add-icon > [data-part=idle] {
    scale: 0.25;
    opacity: 0;
    filter: blur(4px);
  }
  .nx-product-card-add[data-in-cart] .nx-product-card-add-icon > [data-part=done] {
    scale: 1;
    opacity: 1;
    filter: blur(0);
  }
  .nx-product-card-add-label {
    display: grid;
    min-inline-size: 0;
    > span {
      grid-area: 1 / 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .nx-product-card-add-label > [data-part=idle] {
    transition: opacity var(--nx-dur-fast) var(--nx-ease-out), translate var(--nx-dur-fast) var(--nx-ease-out);
  }
  .nx-product-card-add-label > [data-part=done] {
    opacity: 0;
    translate: 0 calc(-6px * var(--nx-motion));
    transition: opacity var(--nx-dur-base) var(--nx-ease-out), translate var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-product-card-add[data-in-cart] .nx-product-card-add-label > [data-part=idle] {
    opacity: 0;
    translate: 0 calc(6px * var(--nx-motion));
  }
  .nx-product-card-add[data-in-cart] .nx-product-card-add-label > [data-part=done] {
    opacity: 1;
    translate: none;
  }
  .nx-product-card[data-stock=out] .nx-product-card-img {
    opacity: 0.65;
  }
  :where(.nx-js) .nx-product-card[data-nx-reveal]:not([data-nx-revealed]) {
    opacity: 0;
    translate: 0 calc(12px * var(--nx-motion));
  }
  :where(.nx-js:not(.nx-live)) .nx-product-card[data-nx-reveal]:not([data-nx-revealed]) {
    animation: nx-reveal-failsafe 1ms 2.5s forwards;
  }
  .nx-product-card[data-nx-revealed],
  .nx-product-card:not([data-nx-reveal]) {
    opacity: 1;
  }
  @container (width < 14rem) {
    .nx-product-card-body {
      padding-inline: var(--nx-space-2);
    }
    .nx-product-card-rating-count {
      display: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-product-card-stock[data-stock=low] .nx-product-card-stock-dot {
      animation: none;
      opacity: 0.75;
    }
    .nx-product-card-add-icon > [data-part] {
      transition: opacity 150ms var(--nx-ease-out);
    }
    .nx-product-card-add-label > span {
      transition: opacity 150ms var(--nx-ease-out);
    }
  }
  @media (forced-colors: active) {
    .nx-product-card {
      border: 1px solid CanvasText;
    }
    .nx-product-card-add {
      border: 1px solid ButtonText;
    }
    .nx-product-card-add:disabled {
      border: 1px solid GrayText;
      color: GrayText;
    }
    .nx-product-card-compare {
      color: GrayText;
    }
  }
}

/* src/css/blocks/order-tracking.css */
@layer nx.components {
  .nx-order-tracking {
    --_pad: clamp(1.25rem, 4cqi, 2.25rem);
    --_node: 2rem;
    container-type: inline-size;
    display: grid;
    gap: var(--nx-space-6);
    padding: var(--_pad);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background:
      radial-gradient(
        52% 34% at 100% 0%,
        var(--nx-accent-soft),
        transparent 70%),
      radial-gradient(
        34% 24% at 0% 100%,
        var(--nx-success-soft),
        transparent 70%),
      var(--nx-surface);
    box-shadow: var(--nx-shadow-md);
  }
  .nx-order-tracking-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-4) var(--nx-space-6);
  }
  .nx-order-tracking-order {
    display: grid;
    gap: 0.25rem;
  }
  .nx-order-tracking-kicker {
    color: var(--nx-text-subtle);
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-wider);
    text-transform: uppercase;
  }
  :lang(fa) .nx-order-tracking-kicker,
  :lang(ar) .nx-order-tracking-kicker {
    letter-spacing: 0;
    text-transform: none;
  }
  .nx-order-tracking-number {
    margin: 0;
    color: var(--nx-text);
    font: 800 var(--nx-text-2xl) / 1.15 var(--nx-font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--nx-tracking-tight);
  }
  .nx-order-tracking-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nx-space-2) var(--nx-space-6);
    margin: 0;
  }
  .nx-order-tracking-fact {
    display: grid;
    gap: 0.125rem;
  }
  .nx-order-tracking-fact dt {
    color: var(--nx-text-subtle);
    font: 600 var(--nx-text-xs) / 1.2 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-wide);
  }
  :lang(fa) .nx-order-tracking-fact dt,
  :lang(ar) .nx-order-tracking-fact dt {
    letter-spacing: 0;
  }
  .nx-order-tracking-fact dd {
    margin: 0;
    color: var(--nx-text);
    font: 600 var(--nx-text-sm) / 1.35 var(--nx-font-sans);
  }
  .nx-order-tracking-status {
    margin-inline-start: auto;
  }
  .nx-order-tracking-steps {
    display: flex;
    align-items: flex-start;
    margin: 0;
    padding: 0 var(--nx-space-1) var(--nx-space-2);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .nx-order-tracking-step {
    position: relative;
    flex: 1 1 0;
    min-inline-size: 6.75rem;
    display: grid;
    justify-items: center;
    gap: var(--nx-space-2);
    padding-inline: var(--nx-space-1);
    text-align: center;
  }
  .nx-order-tracking-step:not(:last-child)::before,
  .nx-order-tracking-step:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block-start: calc(1.125rem - 1px);
    inset-inline-start: 50%;
    inline-size: 100%;
    block-size: 2px;
    border-radius: 1px;
    background: var(--nx-border);
  }
  .nx-order-tracking-step:not(:last-child)::after {
    background: var(--nx-gradient-brand);
    scale: 0 1;
    transform-origin: left;
    transition: scale var(--nx-spring-soft-duration) var(--nx-spring-soft);
  }
  .nx-order-tracking-step[data-state=complete]:not(:last-child)::after {
    scale: 1 1;
  }
  :where([dir=rtl]) .nx-order-tracking-step:not(:last-child)::after {
    transform-origin: right;
  }
  .nx-order-tracking-marker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border: 2px solid var(--nx-border);
    border-radius: 50%;
    background: var(--nx-surface);
    color: var(--nx-text-muted);
    font: 700 var(--nx-text-sm) / 1 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
    transition:
      background-color var(--nx-dur-base) var(--nx-ease-out),
      border-color var(--nx-dur-base) var(--nx-ease-out),
      color var(--nx-dur-base) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  .nx-order-tracking-step[data-state=complete] .nx-order-tracking-marker {
    border-color: var(--nx-success);
    background: var(--nx-success-soft);
    color: var(--nx-success-text);
  }
  .nx-order-tracking-step[data-state=current] .nx-order-tracking-marker {
    border-color: var(--nx-accent);
    background: var(--nx-accent-soft);
    color: var(--nx-accent-text);
    box-shadow: 0 0 0 4px var(--nx-accent-soft);
    scale: calc(1 + 0.08 * var(--nx-motion));
  }
  .nx-order-tracking-step[data-state=current] .nx-order-tracking-marker::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid var(--nx-accent);
    animation: nx-order-tracking-ping 1.8s var(--nx-ease-out) infinite;
  }
  @keyframes nx-order-tracking-ping {
    from {
      scale: 1;
      opacity: 0.55;
    }
    70%, to {
      scale: calc(1 + 0.5 * var(--nx-motion));
      opacity: 0;
    }
  }
  .nx-order-tracking-step-text {
    display: grid;
    gap: 0.125rem;
    min-inline-size: 0;
  }
  .nx-order-tracking-step-title {
    margin: 0;
    color: var(--nx-text);
    font: 600 var(--nx-text-sm) / 1.35 var(--nx-font-sans);
    overflow-wrap: anywhere;
  }
  .nx-order-tracking-step[data-state=upcoming] .nx-order-tracking-step-title {
    color: var(--nx-text-muted);
  }
  .nx-order-tracking-step-desc {
    margin: 0;
    color: var(--nx-text-subtle);
    font: 400 var(--nx-text-xs) / 1.5 var(--nx-font-sans);
  }
  .nx-order-tracking-step-time {
    color: var(--nx-text-subtle);
    font: 500 var(--nx-text-xs) / 1.4 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
  }
  .nx-order-tracking-step[data-state=current] .nx-order-tracking-step-time {
    color: var(--nx-accent-text);
  }
  .nx-order-tracking-events {
    display: grid;
    gap: var(--nx-space-2);
  }
  .nx-order-tracking-events-title {
    margin: 0;
    color: var(--nx-text-subtle);
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-wider);
    text-transform: uppercase;
  }
  :lang(fa) .nx-order-tracking-events-title,
  :lang(ar) .nx-order-tracking-events-title {
    letter-spacing: 0;
    text-transform: none;
  }
  .nx-order-tracking-events-list {
    display: grid;
    gap: var(--nx-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-order-tracking-event {
    --_tone: var(--nx-text-subtle);
    --_tone-soft: var(--nx-surface-2);
    position: relative;
    display: grid;
    grid-template-columns: var(--_node) minmax(0, 1fr);
    gap: 0 var(--nx-space-3);
    align-items: start;
    padding-block: var(--nx-space-1);
    &[data-tone=success] {
      --_tone: var(--nx-success-text);
      --_tone-soft: var(--nx-success-soft);
    }
    &[data-tone=warning] {
      --_tone: var(--nx-warning-text);
      --_tone-soft: var(--nx-warning-soft);
    }
    &[data-tone=info] {
      --_tone: var(--nx-info-text);
      --_tone-soft: var(--nx-info-soft);
    }
    &[data-tone=danger] {
      --_tone: var(--nx-danger-text);
      --_tone-soft: var(--nx-danger-soft);
    }
    &::before {
      content: "";
      grid-area: 1 / 1;
      justify-self: center;
      inline-size: 2px;
      block-size: calc(100% - var(--_node));
      margin-block-start: calc(var(--_node) + var(--nx-space-2) / 2);
      border-radius: var(--nx-radius-full);
      background:
        linear-gradient(
          to bottom,
          var(--_tone),
          color-mix(in oklab, var(--nx-border) 80%, transparent));
      opacity: 0.55;
    }
    &:last-child::before {
      display: none;
    }
  }
  .nx-order-tracking-event-node {
    display: grid;
    place-items: center;
    inline-size: var(--_node);
    block-size: var(--_node);
    border-radius: var(--nx-radius-sm);
    background: var(--_tone-soft);
    color: var(--_tone);
    transition:
      background-color var(--nx-dur-base) var(--nx-ease-out),
      color var(--nx-dur-base) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  .nx-order-tracking-event:is(:hover, :focus-within) .nx-order-tracking-event-node {
    scale: calc(1 + 0.08 * var(--nx-motion));
  }
  .nx-order-tracking-event-body {
    display: grid;
    gap: 0.125rem;
    align-content: center;
    min-block-size: var(--_node);
    padding-block-start: 0.125rem;
  }
  .nx-order-tracking-event-title {
    margin: 0;
    color: var(--nx-text);
    font: 600 var(--nx-text-sm) / 1.45 var(--nx-font-sans);
    overflow-wrap: anywhere;
  }
  .nx-order-tracking-event-desc {
    margin: 0;
    color: var(--nx-text-muted);
    font: 400 var(--nx-text-xs) / 1.55 var(--nx-font-sans);
  }
  .nx-order-tracking-event-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--nx-space-1);
    margin: 0;
    color: var(--nx-text-subtle);
    font: 400 var(--nx-text-xs) / 1.4 var(--nx-font-sans);
  }
  .nx-order-tracking-event-time {
    font-variant-numeric: tabular-nums;
    transition: color var(--nx-dur-fast) var(--nx-ease-out);
  }
  .nx-order-tracking-event:is(:hover, :focus-within) .nx-order-tracking-event-time {
    color: var(--nx-text-muted);
  }
  .nx-order-tracking-event-place {
    color: var(--nx-text-muted);
  }
  .nx-order-tracking-empty {
    padding: var(--nx-space-3);
    border: 1px dashed var(--nx-border);
    border-radius: var(--nx-radius-lg);
    color: var(--nx-text-subtle);
    font: 400 var(--nx-text-xs) / 1.5 var(--nx-font-sans);
    text-align: center;
  }
  :where(.nx-js) .nx-order-tracking[data-nx-reveal]:not([data-nx-revealed]) .nx-order-tracking-step[data-state=complete]:not(:last-child)::after {
    scale: 0 1;
    transition-delay: calc(min(var(--nx-i, 0), 10) * 60ms + 150ms);
  }
  :where(.nx-js:not(.nx-live)) .nx-order-tracking[data-nx-reveal]:not([data-nx-revealed]) .nx-order-tracking-step:not(:last-child)::after {
    animation: nx-reveal-failsafe 1ms 2.5s forwards;
  }
  :where(.nx-js) .nx-order-tracking-events-list[data-nx-reveal]:not([data-nx-revealed]) > .nx-order-tracking-event {
    translate: calc(14px * var(--nx-dir) * var(--nx-motion)) 0;
  }
  @container (width < 34rem) {
    .nx-order-tracking-head {
      display: grid;
      justify-items: start;
    }
    .nx-order-tracking-status {
      margin-inline-start: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-order-tracking-step:not(:last-child)::after {
      transition: none;
    }
    .nx-order-tracking-step[data-state=current] .nx-order-tracking-marker {
      scale: none;
    }
    .nx-order-tracking-step[data-state=current] .nx-order-tracking-marker::after {
      animation: none;
      opacity: 0.3;
    }
    .nx-order-tracking-event:is(:hover, :focus-within) .nx-order-tracking-event-node {
      scale: none;
    }
  }
  @media (forced-colors: active) {
    .nx-order-tracking {
      border: 1px solid CanvasText;
    }
    .nx-order-tracking-marker {
      border: 2px solid CanvasText;
    }
    .nx-order-tracking-step:not(:last-child)::before {
      background: CanvasText;
    }
    .nx-order-tracking-step:not(:last-child)::after {
      background: Highlight;
    }
    .nx-order-tracking-event::before {
      background: CanvasText;
    }
    .nx-order-tracking-empty {
      border: 1px dashed CanvasText;
    }
  }
}

/* src/css/blocks/bar-chart.css */
@layer nx.components {
  .nx-bar-chart {
    --_axis: 3rem;
    --nx-bar-chart-height: 15rem;
  }
  .nx-bar-chart-frame {
    display: grid;
    grid-template-rows: 1fr auto;
    block-size: var(--nx-bar-chart-height);
    min-inline-size: 0;
  }
  .nx-bar-chart-plot {
    position: relative;
    min-inline-size: 0;
    padding-inline-start: var(--_axis);
    overflow: visible;
  }
  .nx-bar-chart-gridline {
    position: absolute;
    inset-inline: 0;
    inset-block-end: calc(var(--_p, 0) * 1%);
    block-size: 1px;
    background: var(--nx-chart-grid);
    &[data-zero] {
      background: var(--nx-border-strong);
    }
  }
  .nx-bar-chart-tick {
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: calc(var(--_p, 0) * 1%);
    inline-size: calc(var(--_axis) - var(--nx-space-2));
    translate: 0 50%;
    overflow: hidden;
    color: var(--nx-text-subtle);
    font: 400 var(--nx-text-xs) / 1 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
    text-align: end;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-bar-chart-row {
    position: relative;
    display: flex;
    gap: var(--nx-space-3);
    block-size: 100%;
  }
  .nx-bar-chart-group {
    position: relative;
    flex: 1 1 0;
    min-inline-size: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-radius: var(--nx-radius-sm);
    cursor: default;
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-bar-chart-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--nx-space-1);
    block-size: 100%;
    flex: 1 1 0;
    min-inline-size: 0;
    transition: opacity var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-bar-chart-bar {
    flex: 1 1 0;
    min-inline-size: 0.25rem;
    max-inline-size: 2.75rem;
    block-size: calc(var(--_v, 0) * 1%);
    background: var(--nx-series, var(--nx-chart-1));
    transform-origin: 50% 100%;
    transition:
      scale var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      opacity var(--nx-dur-base) var(--nx-ease-out),
      filter var(--nx-dur-fast) var(--nx-ease-out);
    transition-delay:
      calc(min(var(--nx-i, 0), 14) * 60ms + min(var(--nx-j, 0), 6) * 30ms),
      0ms,
      0ms;
    &[data-cap] {
      border-start-start-radius: 4px;
      border-start-end-radius: 4px;
    }
  }
  .nx-bar-chart-bars[data-stacked] {
    flex: 0 0 auto;
    flex-direction: column-reverse;
    justify-content: flex-start;
    gap: 2px;
    inline-size: min(100%, 3.25rem);
    transform-origin: 50% 100%;
    transition: scale var(--nx-spring-gentle-duration) var(--nx-spring-gentle), opacity var(--nx-dur-base) var(--nx-ease-out);
    transition-delay: calc(min(var(--nx-i, 0), 14) * 60ms), 0ms;
  }
  .nx-bar-chart-bars[data-stacked] .nx-bar-chart-bar {
    flex: none;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: none;
    transition-property: opacity, filter;
    transition-duration: var(--nx-dur-base), var(--nx-dur-fast);
    transition-timing-function: var(--nx-ease-out), var(--nx-ease-out);
  }
  .nx-bar-chart-row:has(.nx-bar-chart-group:is(:hover, :focus-visible)) .nx-bar-chart-group:not(:is(:hover, :focus-visible)) .nx-bar-chart-bars {
    opacity: 0.45;
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-bar-chart-group:hover .nx-bar-chart-bar {
      filter: brightness(1.07) saturate(1.05);
    }
  }
  .nx-bar-chart-tip {
    inset-block-start: auto;
    inset-inline: 0;
    inset-block-end: calc(var(--_top, 100) * 1% + var(--nx-space-2));
    margin-inline: auto;
    inline-size: max-content;
    translate: 0 calc(4px * var(--nx-motion));
  }
  .nx-bar-chart-group:is(:hover, :focus-visible) .nx-bar-chart-tip {
    opacity: 1;
    scale: 1;
    translate: 0 0;
  }
  .nx-bar-chart-names {
    display: flex;
    gap: var(--nx-space-3);
    padding-inline-start: var(--_axis);
    padding-block-start: var(--nx-space-2);
  }
  .nx-bar-chart-name {
    flex: 1 1 0;
    min-inline-size: 0;
    color: var(--nx-text-muted);
    font: 400 var(--nx-text-xs) / 1.35 var(--nx-font-sans);
    text-align: center;
    overflow-wrap: anywhere;
  }
  :where(.nx-js) .nx-bar-chart[data-nx-reveal]:not([data-nx-revealed]) .nx-bar-chart-bar {
    scale: 1 0;
  }
  :where(.nx-js) .nx-bar-chart[data-nx-reveal]:not([data-nx-revealed]) .nx-bar-chart-bars[data-stacked] {
    scale: 1 0;
  }
  :where(.nx-js:not(.nx-live)) .nx-bar-chart[data-nx-reveal]:not([data-nx-revealed]) .nx-bar-chart-bar,
  :where(.nx-js:not(.nx-live)) .nx-bar-chart[data-nx-reveal]:not([data-nx-revealed]) .nx-bar-chart-bars[data-stacked] {
    animation: nx-reveal-failsafe 1ms 2.5s forwards;
  }
  .nx-bar-chart[data-nx-revealed] .nx-bar-chart-bar,
  .nx-bar-chart:not([data-nx-reveal]) .nx-bar-chart-bar,
  .nx-bar-chart[data-nx-revealed] .nx-bar-chart-bars[data-stacked],
  .nx-bar-chart:not([data-nx-reveal]) .nx-bar-chart-bars[data-stacked] {
    scale: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-bar-chart-bar {
      transition: opacity var(--nx-dur-base) var(--nx-ease-out), filter var(--nx-dur-fast) var(--nx-ease-out);
    }
    .nx-bar-chart-bars[data-stacked] {
      transition: opacity var(--nx-dur-base) var(--nx-ease-out);
    }
  }
  @media (forced-colors: active) {
    .nx-bar-chart-bar {
      forced-color-adjust: none;
    }
    .nx-bar-chart-group:focus-visible {
      outline: 2px solid Highlight;
    }
  }
}

/* src/css/blocks/donut-chart.css */
@layer nx.components {
  @property --nx-donut-sweep { syntax: "<number>"; inherits: false; initial-value: 0; }
  .nx-donut-chart {
    --nx-donut-chart-size: 12rem;
    --nx-donut-chart-thickness: 14%;
    container-type: inline-size;
  }
  .nx-donut-chart-frame {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-6) var(--nx-space-8);
  }
  .nx-donut-chart-ring {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: var(--nx-donut-chart-size);
    aspect-ratio: 1;
    margin-inline: auto;
  }
  .nx-donut-chart-track,
  .nx-donut-chart-segment {
    grid-area: 1 / 1;
    inline-size: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    -webkit-mask:
      radial-gradient(
        farthest-side,
        transparent calc(100% - var(--nx-donut-chart-thickness)),
        #000 calc(100% - var(--nx-donut-chart-thickness) + 0.5px));
    mask:
      radial-gradient(
        farthest-side,
        transparent calc(100% - var(--nx-donut-chart-thickness)),
        #000 calc(100% - var(--nx-donut-chart-thickness) + 0.5px));
  }
  .nx-donut-chart-track {
    background: var(--nx-surface-3);
  }
  .nx-donut-chart-segment {
    background:
      conic-gradient(
        from calc(var(--_start, 0) * 3.6deg),
        var(--nx-series, var(--nx-chart-1)) 0 calc(var(--_len, 0) * var(--nx-donut-sweep, 1) * 1%),
        transparent 0);
    transition: --nx-donut-sweep var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    transition-delay: calc(min(var(--nx-i, 0), 12) * 90ms);
  }
  .nx-donut-chart-center {
    grid-area: 1 / 1;
    display: grid;
    justify-items: center;
    gap: var(--nx-space-1);
    padding-inline: calc(var(--nx-donut-chart-thickness) + var(--nx-space-3));
    text-align: center;
    pointer-events: none;
  }
  .nx-donut-chart-value {
    font: 700 var(--nx-text-2xl) / 1.1 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
    color: var(--nx-text);
  }
  .nx-donut-chart-caption {
    max-inline-size: 100%;
    color: var(--nx-text-muted);
    font: 400 var(--nx-text-xs) / 1.35 var(--nx-font-sans);
    overflow-wrap: anywhere;
  }
  .nx-donut-chart-legend {
    flex: 1 1 12rem;
    min-inline-size: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--nx-space-1);
    font-size: var(--nx-text-sm);
  }
  .nx-donut-chart-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--nx-space-3);
    padding-block: var(--nx-space-1);
    padding-inline: var(--nx-space-2);
    border-radius: var(--nx-radius-sm);
    color: var(--nx-text-muted);
    transition: color var(--nx-dur-fast) var(--nx-ease-out), background-color var(--nx-dur-fast) var(--nx-ease-out);
  }
  .nx-donut-chart-row-label {
    min-inline-size: 0;
    color: var(--nx-text);
    overflow-wrap: anywhere;
  }
  .nx-donut-chart-row-value {
    font-variant-numeric: tabular-nums;
  }
  .nx-donut-chart-row-share {
    color: var(--nx-text-subtle);
    font-variant-numeric: tabular-nums;
    min-inline-size: 3ch;
    text-align: end;
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-donut-chart-row:hover {
      background: var(--nx-surface-2);
      color: var(--nx-text);
    }
    .nx-donut-chart-legend:has(.nx-donut-chart-row:hover) .nx-donut-chart-row:not(:hover) {
      opacity: 0.55;
    }
  }
  :where(.nx-js) .nx-donut-chart[data-nx-reveal]:not([data-nx-revealed]) .nx-donut-chart-segment {
    --nx-donut-sweep: 0;
  }
  .nx-donut-chart[data-nx-revealed] .nx-donut-chart-segment,
  .nx-donut-chart:not([data-nx-reveal]) .nx-donut-chart-segment {
    --nx-donut-sweep: 1;
  }
  @keyframes nx-donut-chart-failsafe {
    to {
      --nx-donut-sweep: 1;
    }
  }
  :where(.nx-js:not(.nx-live)) .nx-donut-chart[data-nx-reveal]:not([data-nx-revealed]) .nx-donut-chart-segment {
    animation: nx-donut-chart-failsafe 1ms 2.5s forwards;
  }
  @container (width < 30rem) {
    .nx-donut-chart-frame {
      flex-direction: column;
    }
    .nx-donut-chart-legend {
      max-inline-size: 24rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-donut-chart-segment {
      transition: none;
    }
  }
  @media (forced-colors: active) {
    .nx-donut-chart-segment {
      forced-color-adjust: none;
    }
  }
}

/* src/css/blocks/gauge.css */
@layer nx.components {
  .nx-gauge {
    --_tone: var(--nx-accent);
    --_tone-text: var(--nx-accent-text);
    --nx-gauge-size: 26rem;
    container-type: inline-size;
    display: grid;
    gap: var(--nx-space-5);
    justify-items: center;
    text-align: center;
  }
  .nx-gauge[data-tone=success],
  .nx-gauge [data-tone=success] {
    --_tone: var(--nx-success);
    --_tone-text: var(--nx-success-text);
  }
  .nx-gauge[data-tone=warning],
  .nx-gauge [data-tone=warning] {
    --_tone: var(--nx-warning);
    --_tone-text: var(--nx-warning-text);
  }
  .nx-gauge[data-tone=danger],
  .nx-gauge [data-tone=danger] {
    --_tone: var(--nx-danger);
    --_tone-text: var(--nx-danger-text);
  }
  .nx-gauge[data-tone=info],
  .nx-gauge [data-tone=info] {
    --_tone: var(--nx-info);
    --_tone-text: var(--nx-info-text);
  }
  .nx-gauge[data-tone=accent],
  .nx-gauge [data-tone=accent] {
    --_tone: var(--nx-accent);
    --_tone-text: var(--nx-accent-text);
  }
  .nx-gauge .nx-chart-head {
    justify-self: stretch;
    text-align: start;
  }
  .nx-gauge-dial {
    display: grid;
    justify-items: center;
    gap: var(--nx-space-2);
    inline-size: min(100%, var(--nx-gauge-size));
  }
  .nx-gauge-face {
    position: relative;
    inline-size: 100%;
  }
  .nx-gauge-svg {
    display: block;
    inline-size: 100%;
    scale: var(--nx-dir, 1) 1;
  }
  .nx-gauge-track {
    fill: none;
    stroke: var(--nx-surface-3);
    stroke-width: 8;
  }
  .nx-gauge-zone {
    fill: none;
    stroke: var(--_tone);
    stroke-width: 8;
    stroke-dasharray: var(--_len, 0) 100;
    stroke-dashoffset: var(--_off, 0);
    opacity: 0.45;
    transition: opacity var(--nx-dur-slower) var(--nx-ease-out) calc(var(--nx-i, 0) * var(--nx-stagger));
  }
  .nx-gauge-ticks {
    transition: opacity var(--nx-dur-slower) var(--nx-ease-out) calc(var(--nx-stagger) * 2);
  }
  .nx-gauge-tick {
    stroke: var(--nx-border-strong);
    stroke-width: 1;
    stroke-linecap: round;
  }
  .nx-gauge-tick[data-major] {
    stroke: var(--nx-text-subtle);
    stroke-width: 1.8;
  }
  .nx-gauge-value {
    fill: none;
    stroke: var(--_tone);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: var(--_sweep, 0) 100;
    transition: stroke-dasharray var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
  }
  .nx-gauge-needle {
    rotate: calc(var(--_angle, -90) * 1deg);
    transform-box: view-box;
    transform-origin: 50px 50px;
    transition: rotate var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
  }
  .nx-gauge-hand {
    fill: var(--nx-text);
  }
  .nx-gauge-hub {
    fill: var(--nx-surface);
    stroke: var(--nx-border-strong);
    stroke-width: 1.5;
  }
  .nx-gauge-hub-dot {
    fill: var(--_tone);
    transition: fill var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-gauge-end {
    position: absolute;
    inset-block-end: 0.125rem;
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    font-variant-numeric: tabular-nums;
  }
  .nx-gauge-end[data-end=min] {
    inset-inline-start: 0;
  }
  .nx-gauge-end[data-end=max] {
    inset-inline-end: 0;
  }
  .nx-gauge-readout {
    display: grid;
    justify-items: center;
    gap: 0.125rem;
    margin: 0;
  }
  .nx-gauge-figure {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    color: var(--nx-text);
    font: 800 clamp(1.5rem, 13cqi, var(--nx-text-3xl)) / 1 var(--nx-font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--nx-tracking-tight);
  }
  .nx-gauge-unit {
    color: var(--nx-text-muted);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
  }
  .nx-gauge-zone-label {
    color: var(--_tone-text);
    font: 600 var(--nx-text-xs) / 1.4 var(--nx-font-sans);
  }
  :where(.nx-js) .nx-gauge[data-nx-reveal]:not([data-nx-revealed]) .nx-gauge-value {
    stroke-dasharray: 0 100;
  }
  :where(.nx-js) .nx-gauge[data-nx-reveal]:not([data-nx-revealed]) .nx-gauge-needle {
    rotate: -90deg;
  }
  :where(.nx-js) .nx-gauge[data-nx-reveal]:not([data-nx-revealed]) .nx-gauge-zone,
  :where(.nx-js) .nx-gauge[data-nx-reveal]:not([data-nx-revealed]) .nx-gauge-ticks {
    opacity: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-gauge-value,
    .nx-gauge-needle {
      transition: none;
    }
  }
}

/* src/css/blocks/tree-view.css */
@layer nx.components {
  .nx-tree-view [data-tone] {
    --_tone: var(--nx-accent);
  }
  .nx-tree-view [data-tone=success] {
    --_tone: var(--nx-success);
  }
  .nx-tree-view [data-tone=warning] {
    --_tone: var(--nx-warning);
  }
  .nx-tree-view [data-tone=danger] {
    --_tone: var(--nx-danger);
  }
  .nx-tree-view [data-tone=info] {
    --_tone: var(--nx-info);
  }
  .nx-tree-view [data-tone=gold] {
    --_tone: var(--nx-gold);
  }
  .nx-tree-view {
    --nx-tree-view-indent: 1.25rem;
    display: grid;
    gap: var(--nx-space-1);
    align-content: start;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--nx-text);
  }
  .nx-tree-view-item {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle), opacity var(--nx-dur-base) var(--nx-ease-out);
    transition-delay: calc(min(var(--nx-i, 0), 12) * var(--nx-stagger)), 0ms;
  }
  .nx-tree-view-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    min-block-size: 2.125rem;
    padding-inline: var(--nx-space-2);
    border: 1px solid transparent;
    border-radius: var(--nx-radius-md);
    color: var(--nx-text);
    font: 500 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition-property:
      background-color,
      color,
      border-color,
      scale;
    transition-duration:
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-spring-snappy-duration);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-snappy);
  }
  .nx-tree-view-row:hover {
    background: var(--nx-surface-2);
    border-color: var(--nx-border);
  }
  .nx-tree-view-item:not([data-static]) > .nx-tree-view-row:active {
    scale: calc(1 - 0.04 * var(--nx-motion));
  }
  .nx-tree-view-item:focus-visible > .nx-tree-view-row {
    outline: 2px solid var(--nx-ring);
    outline-offset: -2px;
  }
  .nx-tree-view-item[aria-selected=true] > .nx-tree-view-row {
    background: var(--nx-accent-soft);
    border-color: var(--nx-accent-border, var(--nx-accent));
    color: var(--nx-accent-text);
  }
  .nx-tree-view-item[aria-selected=true] > .nx-tree-view-row::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 22%;
    inline-size: 2px;
    border-radius: var(--nx-radius-full);
    background: var(--nx-accent);
  }
  .nx-tree-view-twist {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin-inline-start: calc(-0.5rem);
    color: var(--nx-text-subtle);
    scale: var(--nx-dir, 1) 1;
    transition-property: rotate, color;
    transition-duration: var(--nx-spring-snappy-duration), var(--nx-dur-fast);
    transition-timing-function: var(--nx-spring-snappy), var(--nx-ease-out);
    > svg {
      inline-size: 0.875rem;
      block-size: 0.875rem;
    }
  }
  .nx-tree-view-row:hover .nx-tree-view-twist {
    color: var(--nx-text);
  }
  .nx-tree-view-item[aria-expanded=true] > .nx-tree-view-row > .nx-tree-view-twist {
    rotate: calc(90deg * var(--nx-dir, 1));
    color: var(--nx-text);
  }
  .nx-tree-view-twist[data-leaf]::before {
    content: "";
    inline-size: 0.25rem;
    block-size: 0.25rem;
    border-radius: 50%;
    background: var(--nx-border-strong);
  }
  .nx-tree-view-icon {
    flex: none;
    display: grid;
    color: var(--_tone, var(--nx-text-subtle));
    > .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  .nx-tree-view-item[aria-selected=true] > .nx-tree-view-row .nx-tree-view-icon {
    color: inherit;
  }
  .nx-tree-view-label {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-tree-view-meta {
    flex: none;
    max-inline-size: 45%;
    overflow: hidden;
    color: var(--nx-text-subtle);
    font: 400 var(--nx-text-xs) / 1.3 var(--nx-font-sans);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-tree-view-count {
    flex: none;
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.5rem;
    block-size: 1.25rem;
    padding-inline: var(--nx-space-2);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-2);
    color: var(--nx-text-subtle);
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
    .nx-number {
      font-size: inherit;
    }
  }
  .nx-tree-view-item[aria-selected=true] > .nx-tree-view-row .nx-tree-view-count {
    background: color-mix(in oklab, var(--nx-accent) 14%, transparent);
    color: var(--nx-accent-text);
  }
  .nx-tree-view-group {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transition:
      grid-template-rows var(--nx-dur-base) var(--nx-ease-out),
      opacity var(--nx-dur-fast) var(--nx-ease-out),
      visibility var(--nx-dur-base) linear;
  }
  :where(.nx-js) .nx-tree-view-item[aria-expanded=false] > .nx-tree-view-group {
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
  }
  .nx-tree-view-group-list {
    display: grid;
    gap: var(--nx-space-1);
    align-content: start;
    min-block-size: 0;
    margin: 0;
    margin-inline-start: var(--nx-tree-view-indent);
    padding-block-start: var(--nx-space-1);
    border-inline-start: 1px solid var(--nx-border);
    list-style: none;
    overflow: clip;
  }
  :where(.nx-js) .nx-tree-view-item[aria-expanded=false] .nx-tree-view-item {
    opacity: 0;
    translate: 0 calc(6px * var(--nx-motion));
    transition-delay: 0ms, 0ms;
  }
  .nx-tree-view-empty {
    padding: var(--nx-space-3);
    border: 1px dashed var(--nx-border);
    border-radius: var(--nx-radius-md);
    color: var(--nx-text-subtle);
    font: 400 var(--nx-text-xs) / 1.5 var(--nx-font-sans);
    text-align: center;
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-tree-view-item {
      transition: opacity var(--nx-dur-fast) var(--nx-ease-out);
      transition-delay: 0ms;
    }
    :where(.nx-js) .nx-tree-view-item[aria-expanded=false] .nx-tree-view-item {
      translate: none;
    }
    .nx-tree-view-group {
      transition: opacity var(--nx-dur-fast) var(--nx-ease-out), visibility 0ms;
    }
    .nx-tree-view-twist {
      transition-duration: var(--nx-dur-fast), var(--nx-dur-fast);
      transition-timing-function: var(--nx-ease-out), var(--nx-ease-out);
    }
    .nx-tree-view-row:active {
      scale: 1;
    }
  }
  @media (forced-colors: active) {
    .nx-tree-view-row {
      border: 1px solid CanvasText;
    }
    .nx-tree-view-item[aria-selected=true] > .nx-tree-view-row {
      border: 1px solid Highlight;
    }
    .nx-tree-view-group-list {
      border-inline-start: 1px solid CanvasText;
    }
    .nx-tree-view-twist[data-leaf]::before {
      background: CanvasText;
    }
    .nx-tree-view-empty {
      border: 1px dashed CanvasText;
    }
  }
}

/* src/css/blocks/gantt.css */
@layer nx.components {
  .nx-gantt [data-tone] {
    --_tone: var(--nx-accent);
    --_tone-text: var(--nx-accent-text);
    --_tone-soft: var(--nx-accent-soft);
    --_tone-border: var(--nx-accent-border, var(--nx-accent));
  }
  .nx-gantt [data-tone=success] {
    --_tone: var(--nx-success);
    --_tone-text: var(--nx-success-text);
    --_tone-soft: var(--nx-success-soft);
  }
  .nx-gantt [data-tone=warning] {
    --_tone: var(--nx-warning);
    --_tone-text: var(--nx-warning-text);
    --_tone-soft: var(--nx-warning-soft);
  }
  .nx-gantt [data-tone=danger] {
    --_tone: var(--nx-danger);
    --_tone-text: var(--nx-danger-text);
    --_tone-soft: var(--nx-danger-soft);
  }
  .nx-gantt [data-tone=info] {
    --_tone: var(--nx-info);
    --_tone-text: var(--nx-info-text);
    --_tone-soft: var(--nx-info-soft);
  }
  .nx-gantt [data-tone=gold] {
    --_tone: var(--nx-gold);
    --_tone-text: var(--nx-gold-text);
    --_tone-soft: var(--nx-gold-soft);
  }
  .nx-gantt {
    --nx-gantt-lane: 1.75rem;
    --nx-gantt-label-w: 10.5rem;
    --nx-gantt-height: none;
    display: grid;
    gap: var(--nx-space-3);
  }
  .nx-gantt[data-zoom=day] {
    --nx-gantt-unit: 2.75rem;
  }
  .nx-gantt[data-zoom=week] {
    --nx-gantt-unit: 0.6rem;
  }
  .nx-gantt[data-zoom=month] {
    --nx-gantt-unit: 0.3rem;
  }
  .nx-gantt-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--nx-space-2);
    padding-inline: var(--nx-space-1);
  }
  .nx-gantt-today-button {
    display: inline-grid;
    place-items: center;
    min-block-size: 2rem;
    padding-inline: var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: transparent;
    color: var(--nx-text-muted);
    font: 500 var(--nx-text-xs) / 1 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tight);
    cursor: pointer;
    transition-property:
      scale,
      border-color,
      color,
      background-color;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-ease-out);
    &:hover {
      border-color: var(--nx-border-strong);
      color: var(--nx-text);
      background: var(--nx-surface-2);
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-gantt-zoom {
    display: inline-flex;
    gap: 2px;
    margin: 0;
    padding: 3px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-2);
  }
  .nx-gantt-zoom-choice {
    position: relative;
    display: grid;
  }
  .nx-gantt-zoom-input {
    position: absolute;
    inset: 0;
    margin: 0;
    appearance: none;
    opacity: 0;
    cursor: pointer;
  }
  .nx-gantt-zoom-label {
    display: inline-grid;
    place-items: center;
    min-block-size: 1.625rem;
    padding-inline: var(--nx-space-3);
    border-radius: var(--nx-radius-full);
    color: var(--nx-text-muted);
    font: 500 var(--nx-text-xs) / 1 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tight);
    pointer-events: none;
    transition-property:
      scale,
      background-color,
      color,
      box-shadow;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-ease-out);
  }
  .nx-gantt-zoom-input:active + .nx-gantt-zoom-label {
    scale: calc(1 - 0.04 * var(--nx-motion));
  }
  .nx-gantt-zoom-input:checked + .nx-gantt-zoom-label {
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-xs), inset 0 0 0 1px color-mix(in oklab, var(--nx-accent) 30%, transparent);
  }
  .nx-gantt-zoom-input:focus-visible + .nx-gantt-zoom-label {
    outline: 2px solid var(--nx-ring);
    outline-offset: 1px;
  }
  .nx-gantt-frame {
    max-block-size: var(--nx-gantt-height);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-xs);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .nx-gantt-inner {
    display: grid;
    grid-template-columns: var(--nx-gantt-label-w) calc(var(--nx-gantt-days, 28) * var(--nx-gantt-unit));
  }
  .nx-gantt-corner {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 5;
    border-inline-end: 1px solid var(--nx-border);
    border-block-end: 1px solid var(--nx-border);
    background: var(--nx-surface);
  }
  .nx-gantt-head {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    inset-block-start: 0;
    z-index: 4;
    display: grid;
    inline-size: calc(var(--nx-gantt-days, 28) * var(--nx-gantt-unit));
    border-block-end: 1px solid var(--nx-border);
    background: var(--nx-surface);
  }
  .nx-gantt-months {
    position: relative;
    block-size: 1.875rem;
  }
  .nx-gantt-month {
    position: absolute;
    inset-block: 0;
    display: flex;
    align-items: center;
    padding-inline: var(--nx-space-2);
    border-inline-start: 1px solid color-mix(in oklab, var(--nx-border-strong) 65%, transparent);
    overflow: hidden;
    color: var(--nx-text-muted);
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tight);
    text-overflow: ellipsis;
    white-space: nowrap;
    &:first-child {
      border-inline-start: 0;
    }
  }
  .nx-gantt-days,
  .nx-gantt-weeks {
    position: relative;
    block-size: 1.5rem;
    border-block-start: 1px solid color-mix(in oklab, var(--nx-border) 60%, transparent);
  }
  .nx-gantt-day {
    position: absolute;
    inset-block: 0;
    display: grid;
    place-items: center;
    inset-inline-start: calc(var(--d) * var(--nx-gantt-unit));
    inline-size: var(--nx-gantt-unit);
    color: var(--nx-text-subtle);
    font: 500 calc(var(--nx-text-xs) * 0.9) / 1 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
  }
  .nx-gantt-day[data-weekend] {
    background: color-mix(in oklab, var(--nx-text) 4%, transparent);
  }
  .nx-gantt-week {
    position: absolute;
    inset-block: 0;
    display: flex;
    align-items: center;
    padding-inline: var(--nx-space-1);
    inset-inline-start: calc(var(--d) * var(--nx-gantt-unit));
    inline-size: calc(7 * var(--nx-gantt-unit));
    overflow: hidden;
    color: var(--nx-text-subtle);
    font: 500 var(--nx-text-xs) / 1 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
  }
  .nx-gantt[data-zoom=week] .nx-gantt-days,
  .nx-gantt[data-zoom=month] .nx-gantt-days {
    display: none;
  }
  .nx-gantt:not([data-zoom=week]) .nx-gantt-weeks {
    display: none;
  }
  .nx-gantt-side {
    grid-column: 1;
    grid-row: 2;
    position: sticky;
    inset-inline-start: 0;
    z-index: 3;
    display: grid;
    align-content: start;
    border-inline-end: 1px solid var(--nx-border);
    background: var(--nx-surface);
  }
  .nx-gantt-label {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    block-size: calc(var(--lanes, 1) * var(--nx-gantt-lane));
    padding-inline: var(--nx-space-3);
    border-block-end: 1px solid color-mix(in oklab, var(--nx-border) 55%, transparent);
    overflow: hidden;
    color: var(--nx-text);
    font: 500 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-gantt-label-dot {
    flex: none;
    inline-size: 0.375rem;
    block-size: 0.375rem;
    border-radius: 50%;
    background: var(--_tone);
  }
  .nx-gantt-lanes {
    grid-column: 2;
    grid-row: 2;
    position: relative;
  }
  .nx-gantt-grid,
  .nx-gantt-link,
  .nx-gantt-today {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .nx-gantt-tick {
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--d) * var(--nx-gantt-unit));
    inline-size: 1px;
    background: color-mix(in oklab, var(--nx-border) 55%, transparent);
  }
  .nx-gantt-tick[data-week] {
    background: color-mix(in oklab, var(--nx-border-strong) 55%, transparent);
  }
  .nx-gantt-tick[data-month] {
    background: var(--nx-border-strong);
  }
  .nx-gantt[data-zoom=week] .nx-gantt-tick:not([data-week]) {
    display: none;
  }
  .nx-gantt[data-zoom=month] .nx-gantt-tick:not([data-month]) {
    display: none;
  }
  .nx-gantt-weekend {
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--d) * var(--nx-gantt-unit));
    inline-size: var(--nx-gantt-unit);
    background: color-mix(in oklab, var(--nx-text) 3.5%, transparent);
  }
  .nx-gantt:not([data-zoom=day]) .nx-gantt-weekend {
    display: none;
  }
  .nx-gantt-link-h {
    position: absolute;
    block-size: 1.5px;
    inset-block-start: calc(var(--y) * var(--nx-gantt-lane) - 0.75px);
    inset-inline-start: calc(var(--x) * var(--nx-gantt-unit));
    inline-size: max(calc(var(--w) * var(--nx-gantt-unit)), 0.1875rem);
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--_tone, var(--nx-accent)) 45%, var(--nx-border));
  }
  .nx-gantt-link-v {
    position: absolute;
    inline-size: 1.5px;
    inset-inline-start: calc(var(--x) * var(--nx-gantt-unit) - 0.75px);
    inset-block-start: calc(var(--y) * var(--nx-gantt-lane));
    block-size: max(calc(var(--h) * var(--nx-gantt-lane)), 0.1875rem);
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--_tone, var(--nx-accent)) 45%, var(--nx-border));
  }
  .nx-gantt-link-dot {
    position: absolute;
    inline-size: 0.4375rem;
    block-size: 0.4375rem;
    border-radius: 50%;
    background: var(--_tone, var(--nx-accent));
    box-shadow: 0 0 0 2px var(--nx-surface);
    inset-inline-start: calc(var(--x) * var(--nx-gantt-unit));
    inset-block-start: calc(var(--y) * var(--nx-gantt-lane));
    translate: -50% -50%;
  }
  .nx-gantt-today::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--d) * var(--nx-gantt-unit) - 0.75px);
    inline-size: 1.5px;
    background:
      linear-gradient(
        to bottom,
        color-mix(in oklab, var(--nx-accent) 80%, transparent),
        color-mix(in oklab, var(--nx-accent) 18%, transparent));
  }
  .nx-gantt-today-dot {
    position: absolute;
    inset-block-start: calc(0.5 * var(--nx-gantt-lane) - 0.3125rem);
    inset-inline-start: calc(var(--d) * var(--nx-gantt-unit));
    inline-size: 0.375rem;
    block-size: 0.375rem;
    border-radius: 50%;
    background: var(--nx-accent);
    box-shadow: 0 0 0 3px var(--nx-accent-soft);
    translate: -50% -50%;
    animation: nx-gantt-breathe 1.6s var(--nx-ease-in-out) infinite;
  }
  .nx-gantt-today-flag {
    position: absolute;
    inset-block-start: 0.1875rem;
    inset-inline-start: calc(var(--d) * var(--nx-gantt-unit));
    translate: -50% 0;
    padding: 0.1875rem var(--nx-space-2);
    border-radius: var(--nx-radius-full);
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
    font: 600 calc(var(--nx-text-xs) * 0.9) / 1.2 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tight);
    white-space: nowrap;
    box-shadow: var(--nx-shadow-sm);
  }
  @keyframes nx-gantt-breathe {
    50% {
      scale: calc(1 + 0.3 * var(--nx-motion));
      opacity: 0.6;
    }
  }
  .nx-gantt-track {
    position: relative;
    block-size: calc(var(--lanes, 1) * var(--nx-gantt-lane));
    border-block-end: 1px solid color-mix(in oklab, var(--nx-border) 55%, transparent);
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-gantt-track:hover {
      background: color-mix(in oklab, var(--nx-text) 2%, transparent);
    }
  }
  .nx-gantt-bar {
    --ds: 0;
    --dn: 0;
    position: absolute;
    display: flex;
    align-items: center;
    gap: var(--nx-space-1);
    inset-block-start: calc((var(--l, 0) + 0.14) * var(--nx-gantt-lane));
    block-size: calc(0.72 * var(--nx-gantt-lane));
    inset-inline-start: calc((var(--s) + var(--ds) + var(--over, 0)) * var(--nx-gantt-unit));
    inline-size: max(calc((var(--n) + var(--dn)) * var(--nx-gantt-unit)), 0.625rem);
    padding-inline: var(--nx-space-2);
    border: 1px solid color-mix(in oklab, var(--_tone-border) 55%, var(--nx-border));
    border-radius: var(--nx-radius-sm);
    background: var(--_tone-soft);
    color: var(--_tone-text);
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tight);
    text-align: start;
    cursor: grab;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
    transition:
      inset-inline-start var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      inline-size var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      opacity var(--nx-dur-base) var(--nx-ease-out),
      border-color var(--nx-dur-fast) var(--nx-ease-out),
      box-shadow var(--nx-dur-fast) var(--nx-ease-out);
    transition-delay:
      0ms,
      0ms,
      0ms,
      calc(min(var(--nx-i, 0), 12) * 45ms),
      0ms,
      0ms;
  }
  .nx-gantt-bar[data-dragging] {
    transition:
      inset-inline-start var(--nx-dur-fast) var(--nx-ease-out),
      inline-size var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      opacity var(--nx-dur-fast) var(--nx-ease-out),
      border-color var(--nx-dur-fast) var(--nx-ease-out),
      box-shadow var(--nx-dur-fast) var(--nx-ease-out);
    transition-delay: 0ms;
    z-index: 4;
    cursor: grabbing;
    border-color: var(--_tone-border);
    box-shadow: var(--nx-shadow-md);
    scale: calc(1 + 0.02 * var(--nx-motion));
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-gantt-bar:hover {
      border-color: var(--_tone-border);
      box-shadow: var(--nx-shadow-sm);
      transition-delay: 0ms;
    }
  }
  .nx-gantt-bar:focus-visible {
    outline: 2px solid var(--nx-ring);
    outline-offset: 2px;
  }
  .nx-gantt-bar-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: calc(var(--p, 100) * 1%);
    background: color-mix(in oklab, var(--_tone) 55%, transparent);
    transition: inline-size var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
  }
  .nx-gantt-bar-title {
    position: relative;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-gantt-bar-handle {
    position: absolute;
    inset-block: 0;
    inset-inline-start: -0.25rem;
    inline-size: 0.5rem;
    display: grid;
    place-items: center;
    cursor: ew-resize;
    opacity: 0.45;
    transition-property: opacity, scale;
    transition-duration: var(--nx-dur-fast), var(--nx-spring-snappy-duration);
    transition-timing-function: var(--nx-ease-out), var(--nx-spring-snappy);
    &::before {
      content: "";
      inline-size: 2px;
      block-size: 55%;
      border-radius: var(--nx-radius-full);
      background: var(--_tone);
    }
  }
  .nx-gantt-bar-handle[data-handle=end] {
    inset-inline-start: auto;
    inset-inline-end: -0.25rem;
  }
  .nx-gantt-bar:hover .nx-gantt-bar-handle,
  .nx-gantt-bar:focus-visible .nx-gantt-bar-handle,
  .nx-gantt-bar[data-dragging] .nx-gantt-bar-handle {
    opacity: 1;
    scale: calc(1 + 0.1 * var(--nx-motion));
  }
  .nx-gantt-empty {
    display: grid;
    place-items: center;
    min-block-size: 10rem;
    color: var(--nx-text-subtle);
    font: 400 var(--nx-text-sm) / 1.5 var(--nx-font-sans);
  }
  :where(.nx-js) .nx-gantt[data-nx-reveal]:not([data-nx-revealed]) .nx-gantt-bar {
    opacity: 0;
    translate: 0 calc(8px * var(--nx-motion));
  }
  :where(.nx-js:not(.nx-live)) .nx-gantt[data-nx-reveal]:not([data-nx-revealed]) .nx-gantt-bar {
    animation: nx-reveal-failsafe 1ms 2.5s forwards;
  }
  .nx-gantt[data-nx-revealed] .nx-gantt-bar,
  .nx-gantt:not([data-nx-reveal]) .nx-gantt-bar {
    opacity: 1;
    translate: 0 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-gantt-today-dot {
      animation: none;
      opacity: 0.75;
    }
    .nx-gantt-bar[data-dragging] {
      scale: 1;
    }
  }
  @media (forced-colors: active) {
    .nx-gantt-frame {
      border: 1px solid CanvasText;
    }
    .nx-gantt-bar {
      border: 1px solid CanvasText;
      background: Canvas;
    }
    .nx-gantt-today::before {
      background: Highlight;
    }
    .nx-gantt-today-flag {
      background: Highlight;
      color: HighlightText;
    }
    .nx-gantt-link-h,
    .nx-gantt-link-v {
      background: CanvasText;
    }
  }
}

/* src/css/blocks/wizard.css */
@layer nx.components {
  .nx-wizard {
    display: grid;
    gap: var(--nx-space-6);
    inline-size: min(100%, var(--nx-wizard-width, 44rem));
    margin: 0;
    padding: var(--nx-space-8);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-2xl);
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-lg), inset 0 1px 0 var(--nx-highlight);
  }
  @media (max-width: 32rem) {
    .nx-wizard {
      gap: var(--nx-space-5);
      padding: var(--nx-space-6) var(--nx-space-5);
    }
  }
  .nx-wizard-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--nx-space-4);
  }
  .nx-wizard-title {
    margin: 0;
    font: 700 var(--nx-text-xl) / 1.25 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
  }
  .nx-wizard-subtitle {
    margin: 0;
    margin-block-start: var(--nx-space-1);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    line-height: 1.65;
    text-wrap: pretty;
  }
  .nx-wizard-count {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--nx-space-1);
    padding: var(--nx-space-1) var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-2);
    color: var(--nx-text-muted);
    font: 600 var(--nx-text-xs) / 1.4 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
    .nx-number {
      font-size: inherit;
    }
  }
  .nx-wizard-count-sep {
    color: var(--nx-text-subtle);
  }
  .nx-wizard-progress {
    display: grid;
  }
  .nx-wizard-progress-track {
    position: relative;
    display: block;
    block-size: 0.375rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-3);
    box-shadow: inset 0 0 0 1px var(--nx-border);
    overflow: clip;
  }
  .nx-wizard-progress-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: calc(var(--nx-wizard-p, 0) * 1%);
    border-radius: inherit;
    background: var(--nx-gradient-brand);
    transition: inline-size var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
  }
  .nx-wizard-steps {
    margin-block: calc(-1 * var(--nx-space-2)) 0;
  }
  .nx-wizard-steps .nx-step-marker > .nx-icon {
    display: none;
  }
  .nx-wizard-steps .nx-step[data-status=complete] .nx-step-marker > .nx-icon {
    display: block;
  }
  .nx-wizard-steps .nx-step:not([data-status=complete]) .nx-step-marker::before {
    content: counter(nx-step);
  }
  .nx-wizard-step-jump {
    display: flex;
    align-items: flex-start;
    gap: var(--nx-space-3);
    min-inline-size: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: default;
    transition-property: scale;
    transition-duration: var(--nx-spring-snappy-duration);
    transition-timing-function: var(--nx-spring-snappy);
    &:is(:enabled) {
      cursor: pointer;
    }
    &:is(:enabled):active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:is(:enabled):focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
      border-radius: var(--nx-radius-md);
    }
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-wizard-step-jump:is(:enabled):hover .nx-step-title {
      color: var(--nx-accent-text);
    }
  }
  @media (max-width: 36rem) {
    .nx-wizard-steps .nx-step-description {
      display: none;
    }
    .nx-wizard-steps .nx-step-text {
      padding-block-start: 0.35rem;
    }
  }
  .nx-wizard-viewport {
    position: relative;
    block-size: var(--nx-morph-h, auto);
    overflow: clip;
    transition: block-size var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    &:is(:not([data-nx-morph]), [data-nx-morph=init]) {
      transition: none;
    }
  }
  .nx-wizard-measure {
    position: relative;
    display: grid;
  }
  .nx-wizard-pane {
    display: grid;
    gap: var(--nx-space-4);
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    translate: 0 0;
    transition:
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      opacity var(--nx-dur-base) var(--nx-ease-out) 60ms,
      visibility 0s;
    &:not([data-pos=current]) {
      position: absolute;
      inset-block-start: 0;
      inset-inline: 0;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition:
        translate 200ms var(--nx-ease-in),
        opacity 150ms var(--nx-ease-in),
        visibility 0s linear 200ms;
    }
    &[data-pos=before] {
      translate: calc(-22% * var(--nx-dir) * var(--nx-motion)) 0;
    }
    &[data-pos=after] {
      translate: calc(22% * var(--nx-dir) * var(--nx-motion)) 0;
    }
    > legend {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: clip;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }
  .nx-wizard-pane[data-invalid] {
    animation: nx-wizard-refuse 320ms var(--nx-ease-out);
  }
  @keyframes nx-wizard-refuse {
    20% {
      translate: calc(-8px * var(--nx-dir) * var(--nx-motion)) 0;
    }
    45% {
      translate: calc(6px * var(--nx-dir) * var(--nx-motion)) 0;
    }
    70% {
      translate: calc(-3px * var(--nx-dir) * var(--nx-motion)) 0;
    }
  }
  .nx-wizard-summary {
    display: grid;
    gap: var(--nx-space-3);
    margin: 0;
  }
  .nx-wizard-summary-group {
    display: grid;
    gap: var(--nx-space-3);
    padding: var(--nx-space-4);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface-2);
  }
  .nx-wizard-summary-head {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
  }
  .nx-wizard-summary-step {
    min-inline-size: 0;
    flex: 1;
    font: 600 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tight);
  }
  .nx-wizard-summary-edit {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.35rem;
    min-block-size: 1.75rem;
    padding: var(--nx-space-1) var(--nx-space-2);
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: transparent;
    color: var(--nx-accent-text);
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-sans);
    cursor: pointer;
    transition-property: scale, background-color;
    transition-duration: var(--nx-spring-snappy-duration), var(--nx-dur-fast);
    transition-timing-function: var(--nx-spring-snappy), var(--nx-ease-out);
    > .nx-icon {
      inline-size: 0.85rem;
      block-size: 0.85rem;
    }
    &:hover {
      background: var(--nx-accent-soft);
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 1px;
    }
  }
  .nx-wizard-summary-rows {
    display: grid;
    gap: var(--nx-space-1);
    margin: 0;
  }
  .nx-wizard-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nx-space-4);
  }
  .nx-wizard-summary-label {
    flex: none;
    max-inline-size: 55%;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    line-height: 1.6;
  }
  .nx-wizard-summary-value {
    margin: 0;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    font: 500 var(--nx-text-sm) / 1.6 var(--nx-font-sans);
    text-align: end;
    &[data-empty] {
      color: var(--nx-text-subtle);
      font-weight: 400;
    }
  }
  .nx-wizard-foot {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
  }
  .nx-wizard-back[data-off=on] {
    visibility: hidden;
    pointer-events: none;
  }
  .nx-wizard-error {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-inline-size: 0;
    min-block-size: 2.25rem;
    margin: 0;
    color: var(--nx-danger-text);
    font: 500 var(--nx-text-xs) / 1.45 var(--nx-font-sans);
    text-align: center;
    opacity: 0;
    translate: 0 calc(4px * var(--nx-motion));
    pointer-events: none;
    transition: opacity var(--nx-dur-fast) var(--nx-ease-out), translate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    > .nx-icon {
      flex: none;
      inline-size: 0.9rem;
      block-size: 0.9rem;
    }
    &[data-invalid] {
      opacity: 1;
      translate: none;
    }
  }
  .nx-wizard-next {
    flex: none;
    margin-inline-start: auto;
  }
  .nx-wizard-next-labels {
    display: inline-grid;
    justify-items: stretch;
    > span {
      grid-area: 1 / 1;
      transition: opacity var(--nx-dur-base) var(--nx-ease-out), translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    }
    > span:not([data-current]) {
      opacity: 0;
      translate: 0 calc(6px * var(--nx-motion));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-wizard-progress-fill {
      transition: none;
    }
    .nx-wizard-pane[data-invalid] {
      animation: none;
    }
    .nx-wizard-pane:not([data-pos=current]) {
      translate: none;
    }
    .nx-wizard-error {
      translate: none;
    }
    .nx-wizard-next-labels > span:not([data-current]) {
      translate: none;
    }
  }
  @media (forced-colors: active) {
    .nx-wizard,
    .nx-wizard-summary-group {
      border-color: CanvasText;
    }
    .nx-wizard-progress-track {
      background: Canvas;
      box-shadow: inset 0 0 0 1px CanvasText;
    }
    .nx-wizard-progress-fill {
      background: Highlight;
    }
    .nx-wizard-count {
      border-color: CanvasText;
    }
  }
}

/* src/css/blocks/profile-card.css */
@layer nx.components {
  .nx-profile-card {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-xs);
    overflow: clip;
    transition:
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      border-color var(--nx-dur-fast) var(--nx-ease-out),
      box-shadow var(--nx-dur-fast) var(--nx-ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-profile-card:hover {
      border-color: var(--nx-border-strong);
      box-shadow: var(--nx-shadow-sm);
      translate: 0 calc(-3px * var(--nx-motion));
    }
  }
  .nx-profile-card-cover {
    position: relative;
    display: block;
    block-size: clamp(5rem, 22cqi, 7.5rem);
    background:
      radial-gradient(
        60% 90% at 100% 0%,
        color-mix(in oklab, var(--nx-gold) 26%, transparent),
        transparent 62%),
      radial-gradient(
        75% 120% at 0% 0%,
        color-mix(in oklab, var(--nx-cyan-400) 40%, transparent),
        transparent 58%),
      var(--nx-gradient-brand);
  }
  .nx-profile-card-cover-img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    outline: 1px solid color-mix(in oklab, var(--nx-text) 10%, transparent);
    outline-offset: -1px;
  }
  .nx-profile-card[data-covered] .nx-profile-card-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        to top,
        var(--nx-surface),
        transparent 58%);
  }
  .nx-profile-card-body {
    display: grid;
    gap: var(--nx-space-4);
    padding: 0 var(--nx-space-5) var(--nx-space-5);
    min-inline-size: 0;
  }
  .nx-profile-card-id {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: var(--nx-space-3);
  }
  .nx-profile-card-avatar {
    --_size: 4.5rem;
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    inline-size: var(--_size);
    block-size: var(--_size);
    margin-block-start: calc(-1 * (var(--_size) / 2) - var(--nx-space-2));
    margin-block-end: calc(-1 * var(--nx-space-2));
    border-radius: 50%;
    background: var(--nx-gradient-brand);
    color: var(--nx-accent-contrast);
    font: 600 calc(var(--_size) * 0.34) / 1 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
    -webkit-user-select: none;
    user-select: none;
    box-shadow: 0 0 0 4px var(--nx-surface), var(--nx-shadow-sm);
    &[data-status]::after {
      content: "";
      position: absolute;
      inset-block-end: 4%;
      inset-inline-end: 4%;
      inline-size: 26%;
      block-size: 26%;
      border: 2px solid var(--nx-surface);
      border-radius: 50%;
      background: var(--nx-text-subtle);
    }
    &[data-status=online]::after {
      background: var(--nx-success);
    }
    &[data-status=busy]::after {
      background: var(--nx-danger);
    }
    &[data-status=away]::after {
      background: var(--nx-warning);
    }
  }
  .nx-profile-card-avatar[data-status=online]::after {
    animation: nx-profile-card-breathe 1.6s var(--nx-ease-in-out) infinite;
  }
  @keyframes nx-profile-card-breathe {
    50% {
      scale: calc(1 + 0.3 * var(--nx-motion));
      opacity: 0.65;
    }
  }
  .nx-profile-card-avatar-img {
    inline-size: 100%;
    block-size: 100%;
    border-radius: inherit;
    object-fit: cover;
    outline: 1px solid color-mix(in oklab, var(--nx-text) 10%, transparent);
    outline-offset: -1px;
  }
  .nx-profile-card-id-text {
    display: grid;
    gap: 0.125rem;
    min-inline-size: 0;
    padding-block-end: 0.125rem;
  }
  .nx-profile-card-name {
    display: flex;
    align-items: center;
    gap: var(--nx-space-1);
    margin: 0;
    min-inline-size: 0;
    color: var(--nx-text);
    font: 700 var(--nx-text-lg) / 1.2 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
  }
  .nx-profile-card-link {
    color: var(--nx-text);
    text-decoration: none;
    overflow-wrap: anywhere;
    transition-property: color;
    transition-duration: var(--nx-dur-fast);
    transition-timing-function: var(--nx-ease-out);
    &:hover {
      color: var(--nx-accent-text);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
      border-radius: var(--nx-radius-xs);
    }
  }
  .nx-profile-card-verified {
    display: inline-flex;
    flex: none;
    color: var(--nx-gold);
    & .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  .nx-profile-card-role {
    margin: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  .nx-profile-card-handle {
    color: var(--nx-text-subtle);
    font-family: var(--nx-font-mono);
    font-size: var(--nx-text-xs);
  }
  .nx-profile-card-actions {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--nx-space-2);
  }
  .nx-profile-card-follow,
  .nx-profile-card-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    min-block-size: 2.5rem;
    padding-inline: var(--nx-space-3);
    border-radius: var(--nx-radius-md);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    cursor: pointer;
    transition-property:
      scale,
      background-color,
      color,
      box-shadow,
      border-color;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-base),
      var(--nx-dur-base),
      var(--nx-dur-base),
      var(--nx-dur-base);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-ease-out);
    &:active:not(:disabled, [data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-profile-card-follow {
    border: 0;
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
    text-decoration: none;
    &:hover:not(:disabled) {
      background: color-mix(in oklab, var(--nx-accent) 88%, var(--nx-text));
    }
    &:disabled {
      cursor: not-allowed;
    }
  }
  .nx-profile-card-follow[data-following] {
    background: var(--nx-success-soft);
    color: var(--nx-success-text);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--nx-success) 35%, transparent);
    &:hover {
      background: color-mix(in oklab, var(--nx-success-soft) 82%, var(--nx-success) 18%);
    }
  }
  .nx-profile-card-message {
    border: 1px solid var(--nx-border);
    background: var(--nx-surface-2);
    color: var(--nx-text);
    text-decoration: none;
    &:hover {
      border-color: var(--nx-border-strong);
      background: var(--nx-surface-3);
    }
  }
  .nx-profile-card-message .nx-icon {
    inline-size: 1rem;
    block-size: 1rem;
  }
  .nx-profile-card-follow-icon {
    position: relative;
    flex: none;
    inline-size: 1rem;
    block-size: 1rem;
    > [data-part] {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      display: block;
      inline-size: 1rem;
      block-size: 1rem;
      transition:
        scale 300ms cubic-bezier(0.2, 0, 0, 1),
        opacity 300ms cubic-bezier(0.2, 0, 0, 1),
        filter 300ms cubic-bezier(0.2, 0, 0, 1);
      & .nx-icon {
        inline-size: 1rem;
        block-size: 1rem;
      }
    }
    > [data-part=done] {
      scale: 0.25;
      opacity: 0;
      filter: blur(4px);
    }
  }
  .nx-profile-card-follow[data-following] .nx-profile-card-follow-icon > [data-part=idle] {
    scale: 0.25;
    opacity: 0;
    filter: blur(4px);
  }
  .nx-profile-card-follow[data-following] .nx-profile-card-follow-icon > [data-part=done] {
    scale: 1;
    opacity: 1;
    filter: blur(0);
  }
  .nx-profile-card-follow-label {
    display: grid;
    min-inline-size: 0;
    > span {
      grid-area: 1 / 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .nx-profile-card-follow-label > [data-part=idle] {
    transition: opacity var(--nx-dur-fast) var(--nx-ease-out), translate var(--nx-dur-fast) var(--nx-ease-out);
  }
  .nx-profile-card-follow-label > [data-part=done] {
    opacity: 0;
    translate: 0 calc(-6px * var(--nx-motion));
    transition: opacity var(--nx-dur-base) var(--nx-ease-out), translate var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-profile-card-follow[data-following] .nx-profile-card-follow-label > [data-part=idle] {
    opacity: 0;
    translate: 0 calc(6px * var(--nx-motion));
  }
  .nx-profile-card-follow[data-following] .nx-profile-card-follow-label > [data-part=done] {
    opacity: 1;
    translate: none;
  }
  .nx-profile-card-stats {
    display: flex;
    margin: 0;
  }
  .nx-profile-card-stat {
    display: grid;
    flex: 1;
    gap: 0.125rem;
    min-inline-size: 0;
    padding-inline: var(--nx-space-3);
    dd {
      order: 1;
      margin: 0;
      color: var(--nx-text);
      font: 700 var(--nx-text-md) / 1.2 var(--nx-font-display);
      font-variant-numeric: tabular-nums;
      letter-spacing: var(--nx-tracking-tight);
    }
    dt {
      order: 2;
      color: var(--nx-text-subtle);
      font: 500 var(--nx-text-xs) / 1.4 var(--nx-font-sans);
      overflow-wrap: anywhere;
    }
    & + & {
      border-inline-start: 1px solid var(--nx-border);
    }
  }
  .nx-profile-card-stats .nx-profile-card-stat:first-child {
    padding-inline-start: 0;
  }
  .nx-profile-card-tabs {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    gap: 0.125rem;
    justify-self: start;
    max-inline-size: 100%;
    padding: 0.1875rem;
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface-2);
    overflow-x: auto;
    scrollbar-width: none;
    .nx-indicator {
      z-index: -1;
      border-radius: calc(var(--nx-radius-md) - 0.1875rem);
      background: var(--nx-surface);
      box-shadow: var(--nx-shadow-sm), inset 0 1px 0 var(--nx-highlight);
    }
  }
  .nx-profile-card-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-block-size: 1.75rem;
    padding-inline: 0.625rem;
    border: 0;
    border-radius: calc(var(--nx-radius-md) - 0.1875rem);
    background: transparent;
    color: var(--nx-text-muted);
    font: 500 var(--nx-text-xs) / 1 var(--nx-font-sans);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--nx-dur-base) var(--nx-ease-out), scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &:hover {
      color: var(--nx-text);
    }
    &[aria-selected=true] {
      color: var(--nx-text);
      font-weight: 600;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 1px;
    }
    &:active:not([data-static], [data-static] *) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
  }
  .nx-profile-card-panel {
    display: grid;
    gap: var(--nx-space-2);
    min-inline-size: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    line-height: 1.7;
    animation: nx-profile-card-panel-in var(--nx-dur-base) var(--nx-ease-out);
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 4px;
    }
  }
  @keyframes nx-profile-card-panel-in {
    from {
      opacity: 0;
      translate: 0 calc(6px * var(--nx-motion));
    }
  }
  @container (width < 18rem) {
    .nx-profile-card-body {
      padding-inline: var(--nx-space-4) var(--nx-space-4);
    }
    .nx-profile-card-stat {
      padding-inline: var(--nx-space-2);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-profile-card-avatar[data-status=online]::after {
      animation: none;
      opacity: 0.75;
    }
    .nx-profile-card-follow-icon > [data-part] {
      transition: opacity 150ms var(--nx-ease-out);
    }
    .nx-profile-card-follow-label > span {
      transition: opacity 150ms var(--nx-ease-out);
    }
  }
  @media (forced-colors: active) {
    .nx-profile-card {
      border: 1px solid CanvasText;
    }
    .nx-profile-card-follow {
      border: 1px solid ButtonText;
    }
    .nx-profile-card-message {
      border: 1px solid ButtonText;
    }
    .nx-profile-card-avatar {
      border: 1px solid CanvasText;
    }
    .nx-profile-card-stat + .nx-profile-card-stat {
      border-inline-start: 1px solid CanvasText;
    }
  }
}

/* src/css/blocks/pickers.css */
@layer nx.components {
  .nx-picker-pop {
    --_pad: 0.375rem;
    --_radius: var(--nx-radius-lg);
    position: fixed;
    inset: auto;
    margin: 0;
    padding: var(--_pad);
    border: 1px solid var(--nx-border);
    border-radius: var(--_radius);
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-xl);
    z-index: var(--nx-z-dropdown);
    transform-origin: var(--nx-origin, top center);
    opacity: 0;
    scale: calc(1 - 0.05 * var(--nx-motion));
    translate: 0 calc(-4px * var(--nx-motion));
    transition:
      opacity var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-dur-fast) var(--nx-ease-out),
      translate var(--nx-dur-fast) var(--nx-ease-out),
      display var(--nx-dur-fast) allow-discrete,
      overlay var(--nx-dur-fast) allow-discrete;
    &[data-side=top] {
      translate: 0 calc(4px * var(--nx-motion));
    }
  }
  .nx-picker-pop:where(:popover-open, [data-open]) {
    opacity: 1;
    scale: 1;
    translate: 0 0;
    transition:
      opacity var(--nx-dur-base) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      translate var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      display var(--nx-dur-base) allow-discrete,
      overlay var(--nx-dur-base) allow-discrete;
    @starting-style {
      opacity: 0;
      scale: calc(1 - 0.05 * var(--nx-motion));
    }
  }
  .nx-picker-pop:not([popover]):not([data-open]) {
    display: none;
  }
  :where(.nx-combobox-field, .nx-taginput-field) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    min-block-size: 2.75rem;
    padding: 0.3125rem;
    padding-inline-start: 0.75rem;
    border: 1px solid var(--nx-border-strong);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-xs);
    cursor: text;
    transition: border-color var(--nx-dur-fast) var(--nx-ease-out), box-shadow var(--nx-dur-base) var(--nx-ease-out);
    &:hover {
      border-color: color-mix(in oklab, var(--nx-border-strong) 70%, var(--nx-text));
    }
    &:focus-within {
      border-color: var(--nx-accent);
      box-shadow: var(--nx-shadow-xs), 0 0 0 4px var(--nx-accent-soft);
    }
  }
  :where(.nx-combobox-input, .nx-taginput-input) {
    flex: 1 1 6rem;
    min-inline-size: 0;
    padding: 0.375rem 0;
    border: 0;
    background: transparent;
    color: var(--nx-text);
    font: 400 var(--nx-text-sm) / 1.4 var(--nx-font-sans);
    &:focus-visible {
      outline: none;
    }
    &::placeholder {
      color: var(--nx-text-subtle);
    }
  }
  .nx-combobox {
    position: relative;
    display: grid;
    gap: 0.375rem;
    min-inline-size: 0;
  }
  .nx-combobox-field {
    flex-wrap: nowrap;
  }
  .nx-combobox[data-disabled] .nx-combobox-field {
    background: var(--nx-surface-2);
    cursor: not-allowed;
    opacity: 0.7;
  }
  :where(.nx-combobox-clear, .nx-combobox-toggle) {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2rem;
    block-size: 2rem;
    padding: 0;
    border: 0;
    border-radius: calc(var(--nx-radius-md) - 0.3125rem);
    background: transparent;
    color: var(--nx-text-subtle);
    cursor: pointer;
    transition:
      color var(--nx-dur-fast) var(--nx-ease-out),
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-dur-fast) var(--nx-ease-out),
      opacity var(--nx-dur-fast) var(--nx-ease-out),
      rotate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &:hover {
      color: var(--nx-text);
      background: var(--nx-surface-2);
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  .nx-combobox-clear[data-hidden] {
    opacity: 0;
    scale: 0.95;
    pointer-events: none;
  }
  .nx-combobox[data-open] .nx-combobox-toggle {
    rotate: 180deg;
  }
  .nx-combobox-popover,
  .nx-taginput-popover {
    max-inline-size: min(28rem, calc(100vw - 1rem));
  }
  :where(.nx-combobox-list) {
    display: grid;
    gap: 1px;
    max-block-size: min(17rem, 50vh);
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    scroll-padding-block: var(--_pad, 0.375rem);
  }
  .nx-combobox-option {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-block-size: 2.5rem;
    padding: 0.375rem 0.625rem;
    border-radius: calc(var(--nx-radius-lg) - 0.375rem);
    color: var(--nx-text);
    font-size: var(--nx-text-sm);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    animation: nx-picker-row-in 200ms var(--nx-ease-out) both;
    animation-delay: calc(min(var(--nx-i, 0), 8) * 30ms);
    &[data-active] {
      background: var(--nx-surface-2);
    }
    &[aria-selected=true] {
      color: var(--nx-accent-text);
    }
    &[aria-selected=true] .nx-combobox-option-label {
      font-weight: 600;
    }
    &[aria-disabled=true] {
      opacity: 0.45;
      cursor: not-allowed;
    }
    &[hidden] {
      display: none;
    }
  }
  @keyframes nx-picker-row-in {
    from {
      opacity: 0;
      translate: 0 calc(-4px * var(--nx-motion));
    }
  }
  .nx-combobox-option-text {
    display: grid;
    flex: 1;
    min-inline-size: 0;
  }
  .nx-combobox-option-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    mark {
      padding: 0;
      border-radius: 2px;
      background: transparent;
      color: inherit;
      font-weight: 650;
      text-decoration: underline;
      text-decoration-color: var(--nx-accent);
      text-decoration-thickness: 2px;
      text-underline-offset: 3px;
    }
  }
  .nx-combobox-option-desc {
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-combobox-option > .nx-icon:first-child {
    flex: none;
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--nx-text-muted);
  }
  .nx-combobox-check {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--nx-accent);
    opacity: 0;
    scale: 0.25;
    filter: blur(4px);
    transition:
      opacity 300ms cubic-bezier(0.2, 0, 0, 1),
      scale 300ms cubic-bezier(0.2, 0, 0, 1),
      filter 300ms cubic-bezier(0.2, 0, 0, 1);
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  .nx-combobox-option[aria-selected=true] .nx-combobox-check {
    opacity: 1;
    scale: 1;
    filter: blur(0);
  }
  .nx-combobox-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    margin: 0;
    padding: var(--nx-space-5) var(--nx-space-3);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    text-align: center;
    &[hidden] {
      display: none;
    }
  }
  .nx-combobox-spinner {
    inline-size: 0.875rem;
    block-size: 0.875rem;
    border: 2px solid var(--nx-border-strong);
    border-block-start-color: var(--nx-accent);
    border-radius: var(--nx-radius-full);
    animation: nx-picker-spin 700ms linear infinite;
  }
  @keyframes nx-picker-spin {
    to {
      rotate: 1turn;
    }
  }
  .nx-taginput {
    display: grid;
    gap: 0.375rem;
    min-inline-size: 0;
  }
  .nx-taginput-field {
    padding-inline-start: 0.3125rem;
  }
  .nx-taginput-chips {
    display: contents;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-taginput-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-inline-size: 100%;
    block-size: 1.875rem;
    padding-inline: 0.625rem 0.25rem;
    border: 1px solid var(--nx-accent-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-accent-soft);
    color: var(--nx-accent-text);
    font: 500 var(--nx-text-sm) / 1 var(--nx-font-sans);
    white-space: nowrap;
    transform-origin: center;
    transition:
      opacity var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy),
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      border-color var(--nx-dur-fast) var(--nx-ease-out),
      color var(--nx-dur-fast) var(--nx-ease-out);
    > span {
      overflow: hidden;
      text-overflow: ellipsis;
    }
    @starting-style {
      opacity: 0;
      scale: calc(1 - 0.05 * var(--nx-motion));
    }
    &[data-state=exit] {
      opacity: 0;
      scale: calc(1 - 0.05 * var(--nx-motion));
      pointer-events: none;
      transition-duration: var(--nx-dur-fast);
      transition-timing-function: var(--nx-ease-out);
    }
    &[data-flash] {
      border-color: var(--nx-warning);
      background: var(--nx-warning-soft);
      color: var(--nx-warning-text);
      animation: nx-picker-shake 360ms var(--nx-ease-out);
    }
    &[data-armed] {
      border-color: var(--nx-danger);
      background: var(--nx-danger-soft);
      color: var(--nx-danger-text);
    }
  }
  @keyframes nx-picker-shake {
    20% {
      translate: calc(-3px * var(--nx-motion)) 0;
    }
    45% {
      translate: calc(3px * var(--nx-motion)) 0;
    }
    70% {
      translate: calc(-2px * var(--nx-motion)) 0;
    }
  }
  .nx-taginput-chip-remove {
    display: grid;
    place-items: center;
    inline-size: 1.375rem;
    block-size: 1.375rem;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-full);
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
    transition:
      opacity var(--nx-dur-fast) var(--nx-ease-out),
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-dur-fast) var(--nx-ease-out);
    &:hover {
      opacity: 1;
      background: color-mix(in oklab, currentColor 14%, transparent);
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 1px;
      opacity: 1;
    }
    .nx-icon {
      inline-size: 0.8125rem;
      block-size: 0.8125rem;
    }
  }
  .nx-taginput-input {
    padding-inline: 0.4375rem;
  }
  .nx-taginput[data-full] .nx-taginput-input::placeholder {
    color: transparent;
  }
  .nx-taginput-meta {
    display: flex;
    justify-content: space-between;
    gap: var(--nx-space-3);
    margin: 0;
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
  }
  .nx-taginput-count {
    font-variant-numeric: tabular-nums;
  }
  .nx-taginput[data-full] .nx-taginput-count {
    color: var(--nx-warning-text);
  }
  .nx-ctxmenu {
    position: relative;
    border-radius: var(--nx-radius-lg);
    -webkit-touch-callout: none;
    transition: scale var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &[data-pressing] {
      scale: calc(1 - 0.02 * var(--nx-motion));
      transition-duration: 500ms;
      transition-timing-function: linear;
    }
  }
  .nx-ctxmenu-menu {
    --_pad: 0.3125rem;
    min-inline-size: 13rem;
    max-inline-size: min(20rem, calc(100vw - 1rem));
    translate: 0 0;
  }
  .nx-ctxmenu-menu:where(:popover-open, [data-open]) {
    display: grid;
  }
  .nx-ctxmenu-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    inline-size: 100%;
    min-block-size: 2.25rem;
    padding: 0.375rem 0.625rem;
    border: 0;
    border-radius: calc(var(--nx-radius-lg) - var(--_pad));
    background: transparent;
    color: var(--nx-text);
    font: 450 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
    text-align: start;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color var(--nx-dur-instant) var(--nx-ease-out), color var(--nx-dur-instant) var(--nx-ease-out);
    &:is(:hover, :focus-visible, [data-open]):not([aria-disabled=true]) {
      outline: none;
      background: var(--nx-surface-2);
    }
    &:focus-visible {
      box-shadow: inset 0 0 0 2px var(--nx-ring);
    }
    &[data-tone=danger] {
      color: var(--nx-danger-text);
    }
    &[data-tone=danger]:is(:hover, :focus-visible) {
      background: var(--nx-danger-soft);
    }
    &[aria-disabled=true] {
      opacity: 0.45;
      cursor: not-allowed;
    }
    > .nx-icon {
      flex: none;
      inline-size: 1rem;
      block-size: 1rem;
      color: var(--nx-text-muted);
    }
    &[data-tone=danger] > .nx-icon {
      color: currentColor;
    }
  }
  .nx-ctxmenu-label {
    flex: 1;
    min-inline-size: 0;
  }
  .nx-ctxmenu-shortcut {
    margin-inline-start: auto;
    color: var(--nx-text-subtle);
    font: 500 var(--nx-text-xs) / 1 var(--nx-font-mono);
    letter-spacing: var(--nx-tracking-wide, 0);
  }
  .nx-ctxmenu-sub-arrow {
    margin-inline-start: auto;
    inline-size: 0.875rem;
    block-size: 0.875rem;
    color: var(--nx-text-subtle);
  }
  .nx-ctxmenu-sep {
    block-size: 1px;
    margin: 0.25rem 0.375rem;
    border: 0;
    background: var(--nx-border);
  }
  .nx-ctxmenu-heading {
    margin: 0;
    padding: 0.5rem 0.625rem 0.25rem;
    color: var(--nx-text-subtle);
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-wide, 0);
    text-transform: uppercase;
  }
  .nx-hovercard {
    display: inline;
  }
  .nx-hovercard-trigger {
    display: inline;
  }
  .nx-hovercard-card {
    --_pad: var(--nx-space-4);
    --_radius: var(--nx-radius-xl);
    inline-size: min(var(--nx-hovercard-width, 20rem), calc(100vw - 1rem));
    padding: var(--_pad);
    font-style: normal;
    font-weight: 400;
    text-align: start;
    white-space: normal;
    box-shadow: var(--nx-shadow-xl), inset 0 1px 0 var(--nx-highlight);
  }
  .nx-hovercard-card:where(:popover-open, [data-open]) {
    display: block;
    transition:
      opacity var(--nx-dur-base) var(--nx-ease-out),
      scale var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      display var(--nx-dur-base) allow-discrete,
      overlay var(--nx-dur-base) allow-discrete;
  }
  :root:has(.nx-bsheet:modal) {
    overflow: hidden;
  }
  .nx-bsheet {
    --_full: var(--nx-sheet-full, 90dvh);
    --_y: var(--nx-sheet-y, 0px);
    position: fixed;
    inset: auto 0 0;
    display: flex;
    flex-direction: column;
    inline-size: min(40rem, 100vw);
    block-size: var(--_full);
    max-block-size: none;
    max-inline-size: none;
    margin: 0 auto;
    padding: 0;
    border: 1px solid var(--nx-border);
    border-block-end: 0;
    border-radius: var(--nx-radius-2xl) var(--nx-radius-2xl) 0 0;
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-xl), inset 0 1px 0 var(--nx-highlight);
    overflow: hidden;
    translate: 0 100%;
    transition:
      translate var(--nx-dur-base) var(--nx-ease-out),
      display var(--nx-dur-base) allow-discrete,
      overlay var(--nx-dur-base) allow-discrete;
    &:not([open]) {
      display: none;
    }
    &::backdrop {
      background: transparent;
      transition:
        background-color var(--nx-dur-slow) var(--nx-ease-out),
        display var(--nx-dur-slow) allow-discrete,
        overlay var(--nx-dur-slow) allow-discrete;
    }
    @media (prefers-reduced-motion: reduce) {
      translate: 0 var(--_y);
      opacity: 0;
      transition:
        opacity var(--nx-dur-fast) var(--nx-ease-out),
        display var(--nx-dur-fast) allow-discrete,
        overlay var(--nx-dur-fast) allow-discrete;
    }
  }
  .nx-bsheet[open] {
    translate: 0 var(--_y);
    transition:
      translate var(--nx-spring-soft-duration) var(--nx-spring-soft),
      display var(--nx-dur-base) allow-discrete,
      overlay var(--nx-dur-base) allow-discrete;
    @starting-style {
      translate: 0 100%;
    }
    &::backdrop {
      background: var(--nx-backdrop, rgb(0 0 0 / 0.45));
    }
    @media (prefers-reduced-motion: reduce) {
      opacity: 1;
      @starting-style {
        opacity: 0;
      }
    }
  }
  @starting-style {
    .nx-bsheet[open]::backdrop {
      background: transparent;
    }
  }
  .nx-bsheet[data-dragging] {
    transition: none;
  }
  .nx-bsheet-head {
    display: grid;
    justify-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-2) var(--nx-space-5) var(--nx-space-3);
    border-block-end: 1px solid var(--nx-border);
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
  }
  .nx-bsheet[data-dragging] .nx-bsheet-head {
    cursor: grabbing;
  }
  .nx-bsheet-handle {
    display: block;
    inline-size: 2.75rem;
    block-size: 1.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: inherit;
    &::before {
      content: "";
      display: block;
      inline-size: 100%;
      block-size: 0.3125rem;
      margin-block: 0.46875rem;
      border-radius: var(--nx-radius-full);
      background: var(--nx-border-strong);
      transition: background-color var(--nx-dur-fast) var(--nx-ease-out), scale var(--nx-dur-fast) var(--nx-ease-out);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
      border-radius: var(--nx-radius-sm);
    }
  }
  .nx-bsheet:is([data-dragging], :has(.nx-bsheet-handle:focus-visible)) .nx-bsheet-handle::before {
    background: var(--nx-accent);
    scale: 1.15 1;
  }
  .nx-bsheet-titles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-3);
    inline-size: 100%;
  }
  .nx-bsheet-title {
    margin: 0;
    font: 650 var(--nx-text-lg) / 1.3 var(--nx-font-display);
  }
  .nx-bsheet-body {
    flex: 1;
    min-block-size: 0;
    padding: var(--nx-space-4) var(--nx-space-5) var(--nx-space-6);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nx-bsheet-close {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-2);
    color: var(--nx-text-muted);
    cursor: pointer;
    transition: background-color var(--nx-dur-fast) var(--nx-ease-out), scale var(--nx-dur-fast) var(--nx-ease-out);
    &:hover {
      background: var(--nx-surface-3);
      color: var(--nx-text);
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  .nx-daterange {
    display: inline-grid;
    min-inline-size: 0;
  }
  .nx-daterange-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    min-block-size: 2.75rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--nx-border-strong);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-xs);
    color: var(--nx-text);
    font: 500 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
    text-align: start;
    cursor: pointer;
    transition:
      border-color var(--nx-dur-fast) var(--nx-ease-out),
      box-shadow var(--nx-dur-base) var(--nx-ease-out),
      scale var(--nx-dur-fast) var(--nx-ease-out);
    &:hover {
      border-color: color-mix(in oklab, var(--nx-border-strong) 70%, var(--nx-text));
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &[aria-expanded=true] {
      border-color: var(--nx-accent);
      box-shadow: var(--nx-shadow-xs), 0 0 0 4px var(--nx-accent-soft);
    }
    > .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
      color: var(--nx-text-muted);
    }
  }
  .nx-daterange-value[data-empty] {
    color: var(--nx-text-subtle);
  }
  .nx-daterange-popover {
    --_pad: var(--nx-space-3);
    --_radius: var(--nx-radius-xl);
    grid-template-columns: auto 1fr;
    gap: var(--nx-space-3);
    max-inline-size: calc(100vw - 1rem);
    max-block-size: calc(100dvh - 1rem);
    overflow: auto;
  }
  .nx-daterange-popover:where(:popover-open, [data-open]) {
    display: grid;
  }
  .nx-daterange-presets {
    display: grid;
    align-content: start;
    gap: 2px;
    min-inline-size: 9rem;
    margin: 0;
    padding: 0 0 0 0;
    padding-inline-end: var(--nx-space-3);
    border-inline-end: 1px solid var(--nx-border);
    list-style: none;
  }
  .nx-daterange-preset {
    inline-size: 100%;
    padding: 0.5rem 0.625rem;
    border: 0;
    border-radius: var(--nx-radius-md);
    background: transparent;
    color: var(--nx-text-muted);
    font: 500 var(--nx-text-sm) / 1.2 var(--nx-font-sans);
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
    transition:
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      color var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-dur-fast) var(--nx-ease-out);
    &:hover {
      background: var(--nx-surface-2);
      color: var(--nx-text);
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 0;
    }
    &[aria-pressed=true] {
      background: var(--nx-accent-soft);
      color: var(--nx-accent-text);
    }
  }
  .nx-daterange-main {
    display: grid;
    gap: var(--nx-space-3);
    min-inline-size: 0;
  }
  .nx-daterange-months {
    display: grid;
    grid-template-columns: repeat(var(--nx-daterange-months, 2), minmax(0, 1fr));
    gap: var(--nx-space-5);
  }
  .nx-daterange-month {
    display: grid;
    align-content: start;
    gap: var(--nx-space-2);
  }
  .nx-daterange-head {
    display: grid;
    grid-template-columns: 2rem 1fr 2rem;
    align-items: center;
    min-block-size: 2rem;
    h3 {
      grid-column: 2;
      grid-row: 1;
      margin: 0;
      font: 600 var(--nx-text-sm) / 1.2 var(--nx-font-sans);
      text-align: center;
    }
  }
  .nx-daterange-nav {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-md);
    background: transparent;
    color: var(--nx-text-muted);
    cursor: pointer;
    transition: background-color var(--nx-dur-fast) var(--nx-ease-out), scale var(--nx-dur-fast) var(--nx-ease-out);
    &:hover {
      background: var(--nx-surface-2);
      color: var(--nx-text);
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &[data-at=next] {
      grid-column: 3;
      grid-row: 1;
    }
    &[data-at=prev] {
      grid-column: 1;
      grid-row: 1;
    }
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  .nx-daterange-month:not(:first-child) .nx-daterange-nav[data-at=prev],
  .nx-daterange-month:not(:last-child) .nx-daterange-nav[data-at=next] {
    visibility: hidden;
  }
  .nx-daterange-grid {
    display: grid;
    gap: 2px;
  }
  .nx-daterange-months[data-enter] .nx-daterange-grid {
    animation: nx-daterange-in var(--nx-spring-gentle-duration) var(--nx-spring-gentle) both;
  }
  .nx-daterange-months[data-enter=prev] {
    --_from: -1;
  }
  .nx-daterange-months[data-enter=next] {
    --_from: 1;
  }
  @keyframes nx-daterange-in {
    from {
      opacity: 0;
      translate: calc(16px * var(--_from, 1) * var(--nx-dir) * var(--nx-motion)) 0;
    }
  }
  .nx-daterange-row {
    display: grid;
    grid-template-columns: repeat(7, 2.375rem);
  }
  .nx-daterange-weekday {
    display: grid;
    place-items: center;
    block-size: 1.75rem;
    color: var(--nx-text-subtle);
    font: 500 var(--nx-text-xs) / 1 var(--nx-font-sans);
  }
  .nx-daterange-cell {
    position: relative;
    display: grid;
    place-items: center;
    block-size: 2.375rem;
    &::before {
      content: "";
      position: absolute;
      inset-block: 0.1875rem;
      inset-inline: 0;
      background: var(--nx-accent-soft);
      opacity: 0;
      transition: opacity var(--nx-dur-fast) var(--nx-ease-out);
    }
    &[data-mark=middle]::before {
      opacity: 1;
    }
    &[data-mark=start]::before {
      opacity: 1;
      inset-inline-start: 50%;
    }
    &[data-mark=end]::before {
      opacity: 1;
      inset-inline-end: 50%;
    }
    &[data-preview]::before {
      background: color-mix(in oklab, var(--nx-accent-soft) 55%, transparent);
    }
    &:first-child::before {
      border-start-start-radius: var(--nx-radius-full);
      border-end-start-radius: var(--nx-radius-full);
    }
    &:last-child::before {
      border-start-end-radius: var(--nx-radius-full);
      border-end-end-radius: var(--nx-radius-full);
    }
  }
  .nx-daterange-day {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-full);
    background: transparent;
    color: var(--nx-text);
    font: 500 var(--nx-text-sm) / 1 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition:
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      color var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &:hover {
      background: var(--nx-surface-2);
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 1px;
    }
    &:disabled {
      color: var(--nx-text-subtle);
      opacity: 0.5;
      cursor: not-allowed;
    }
    &[data-today]::after {
      content: "";
      position: absolute;
      inset-block-end: 0.25rem;
      inline-size: 0.25rem;
      block-size: 0.25rem;
      border-radius: var(--nx-radius-full);
      background: currentColor;
    }
  }
  .nx-daterange-cell:is([data-mark=start], [data-mark=end], [data-mark=single]) .nx-daterange-day {
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
    box-shadow: var(--nx-shadow-sm);
  }
  .nx-daterange-cell[data-preview]:is([data-mark=start], [data-mark=end]) .nx-daterange-day {
    background: color-mix(in oklab, var(--nx-accent) 70%, var(--nx-surface));
  }
  .nx-daterange-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--nx-space-3);
    padding-block-start: var(--nx-space-3);
    border-block-start: 1px solid var(--nx-border);
  }
  .nx-daterange-summary {
    margin: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
  }
  .nx-daterange-actions {
    display: flex;
    gap: var(--nx-space-2);
  }
  @media (max-width: 40rem) {
    .nx-daterange-popover {
      grid-template-columns: 1fr;
    }
    .nx-daterange-popover:where(:popover-open, [data-open]) {
      display: grid;
    }
    .nx-daterange-presets {
      display: flex;
      overflow-x: auto;
      padding-inline-end: 0;
      padding-block-end: var(--nx-space-2);
      border-inline-end: 0;
      border-block-end: 1px solid var(--nx-border);
    }
    .nx-daterange-months {
      --nx-daterange-months: 1;
    }
    .nx-daterange-month + .nx-daterange-month {
      display: none;
    }
    .nx-daterange-month:first-child .nx-daterange-nav[data-at=next] {
      visibility: visible;
    }
  }
  .nx-timepicker {
    --_row: 2.5rem;
    --_rows: 5;
    display: inline-grid;
    gap: var(--nx-space-2);
    padding: var(--nx-space-2);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-sm);
  }
  .nx-timepicker-wheels {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-1);
    direction: ltr;
  }
  .nx-timepicker-band {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 50%;
    block-size: var(--_row);
    translate: 0 -50%;
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface-2);
    box-shadow: inset 0 0 0 1px var(--nx-border);
    pointer-events: none;
  }
  .nx-timepicker-wheel {
    position: relative;
    inline-size: 3.5rem;
    block-size: calc(var(--_row) * var(--_rows));
    margin: 0;
    padding: calc(var(--_row) * (var(--_rows) - 1) / 2) 0;
    overflow-y: auto;
    list-style: none;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    overscroll-behavior: contain;
    border-radius: var(--nx-radius-md);
    mask-image:
      linear-gradient(
        to bottom,
        transparent,
        black 30%,
        black 70%,
        transparent);
    &::-webkit-scrollbar {
      display: none;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &[data-period] {
      inline-size: 4rem;
    }
  }
  .nx-timepicker-option {
    display: grid;
    place-items: center;
    block-size: var(--_row);
    color: var(--nx-text-muted);
    font: 500 var(--nx-text-lg) / 1 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
    scroll-snap-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    scale: calc(1 - min(var(--nx-wheel-d, 0), 2) * 0.08 * var(--nx-motion));
    transition: color var(--nx-dur-fast) var(--nx-ease-out);
    &[aria-selected=true] {
      color: var(--nx-text);
      font-weight: 650;
    }
    &[aria-disabled=true] {
      opacity: 0.35;
      cursor: not-allowed;
    }
  }
  .nx-timepicker-wheel[data-period] .nx-timepicker-option {
    font-size: var(--nx-text-sm);
  }
  .nx-timepicker-sep {
    position: relative;
    color: var(--nx-text-muted);
    font: 650 var(--nx-text-lg) / 1 var(--nx-font-sans);
  }
  .nx-timepicker-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-2);
    padding-inline: var(--nx-space-1);
  }
  .nx-timepicker-value {
    margin: 0;
    color: var(--nx-text-muted);
    font: 500 var(--nx-text-sm) / 1.2 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
  }
  .nx-numfield {
    display: inline-grid;
    gap: 0.375rem;
    min-inline-size: 0;
  }
  .nx-numfield-label {
    justify-self: start;
    color: var(--nx-text);
    font: 500 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
    cursor: ew-resize;
    -webkit-user-select: none;
    user-select: none;
    touch-action: pan-y;
    transition: color var(--nx-dur-fast) var(--nx-ease-out);
    &[data-scrubbing] {
      color: var(--nx-accent-text);
    }
  }
  .nx-numfield-hint {
    margin: 0;
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
  }
  .nx-numfield-group {
    --_pad: 0.25rem;
    display: inline-grid;
    grid-template-columns: auto minmax(4rem, 1fr) auto;
    align-items: center;
    padding: var(--_pad);
    border: 1px solid var(--nx-border-strong);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-xs);
    transition: border-color var(--nx-dur-fast) var(--nx-ease-out), box-shadow var(--nx-dur-base) var(--nx-ease-out);
    &:focus-within {
      border-color: var(--nx-accent);
      box-shadow: var(--nx-shadow-xs), 0 0 0 4px var(--nx-accent-soft);
    }
  }
  .nx-numfield[data-disabled] .nx-numfield-group {
    background: var(--nx-surface-2);
    opacity: 0.7;
  }
  .nx-numfield-step {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: calc(var(--nx-radius-md) - var(--_pad));
    background: var(--nx-surface-2);
    color: var(--nx-text);
    cursor: pointer;
    touch-action: manipulation;
    transition:
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      opacity var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-dur-fast) var(--nx-ease-out);
    &:hover:not(:disabled) {
      background: var(--nx-surface-3);
    }
    &:is(:active, [data-holding]):not(:disabled) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  .nx-numfield-box {
    position: relative;
    display: grid;
    min-inline-size: 0;
  }
  .nx-numfield-input {
    grid-area: 1 / 1;
    inline-size: 100%;
    min-inline-size: 0;
    padding: 0.375rem 0.5rem;
    border: 0;
    background: transparent;
    color: var(--nx-text);
    font: 600 var(--nx-text-base) / 1.3 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
    text-align: center;
    &:focus-visible {
      outline: none;
    }
  }
  .nx-numfield-display {
    grid-area: 1 / 1;
    place-self: center;
    font: 600 var(--nx-text-base) / 1.3 var(--nx-font-sans);
    pointer-events: none;
  }
  .nx-numfield-box:not(:focus-within) .nx-numfield-input {
    color: transparent;
  }
  .nx-numfield-box:focus-within .nx-numfield-display {
    visibility: hidden;
  }
  .nx-numfield-unit {
    color: var(--nx-text-muted);
    font-weight: 500;
  }
}

/* src/css/blocks/agent.css */
@layer nx.components {
  @keyframes nx-agent-shimmer {
    from {
      background-position: 100% 0;
    }
    to {
      background-position: -100% 0;
    }
  }
  @keyframes nx-agent-rise {
    from {
      opacity: 0;
      translate: 0 calc(6px * var(--nx-motion));
      scale: calc(1 - 0.05 * var(--nx-motion));
    }
  }
  @keyframes nx-agent-token {
    from {
      opacity: 0;
      filter: blur(calc(4px * var(--nx-motion)));
    }
  }
  @keyframes nx-agent-blink {
    50% {
      opacity: 0;
    }
  }
  @keyframes nx-agent-flash {
    from {
      background-color: var(--nx-accent-soft);
    }
  }
  .nx-agent-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--nx-spring-gentle-duration) var(--nx-spring-gentle), opacity var(--nx-dur-fast) var(--nx-ease-out);
    opacity: 0;
    > * {
      min-block-size: 0;
      overflow: hidden;
      visibility: hidden;
      transition: visibility 0s linear var(--nx-dur-base);
    }
    &[data-open] {
      grid-template-rows: 1fr;
      opacity: 1;
      transition: grid-template-rows var(--nx-spring-gentle-duration) var(--nx-spring-gentle), opacity var(--nx-dur-base) var(--nx-ease-out);
      > * {
        visibility: visible;
        transition: none;
      }
    }
  }
  .nx-agent-icon-button {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 1.875rem;
    block-size: 1.875rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--nx-radius-sm);
    background: transparent;
    color: var(--nx-text-muted);
    cursor: pointer;
    transition:
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      color var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &:hover {
      background: var(--nx-surface-3);
      color: var(--nx-text);
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &[aria-pressed=true] {
      background: var(--nx-accent-soft);
      color: var(--nx-accent-text);
    }
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  .nx-agent-swap {
    display: inline-grid;
    > * {
      grid-area: 1 / 1;
      transition:
        opacity 300ms cubic-bezier(0.2, 0, 0, 1),
        scale 300ms cubic-bezier(0.2, 0, 0, 1),
        filter 300ms cubic-bezier(0.2, 0, 0, 1);
    }
    > :not([data-on]) {
      opacity: 0;
      scale: 0.25;
      filter: blur(4px);
    }
  }
  [data-copied] > .nx-agent-swap > .nx-agent-swap-idle,
  :not([data-copied]) > .nx-agent-swap > .nx-agent-swap-done {
    opacity: 0;
    scale: 0.25;
    filter: blur(4px);
  }
  [data-copied] > .nx-agent-swap > .nx-agent-swap-done {
    opacity: 1;
    scale: 1;
    filter: none;
    color: var(--nx-success-text);
  }
  .nx-thinking {
    --_radius: var(--nx-radius-lg);
    display: grid;
    border: 1px solid var(--nx-border);
    border-radius: var(--_radius);
    background: color-mix(in oklab, var(--nx-surface) 80%, transparent);
    box-shadow: var(--nx-shadow-xs);
    overflow: clip;
    transition: border-color var(--nx-dur-base) var(--nx-ease-out);
    &[data-state=active] {
      border-color: var(--nx-accent-border);
    }
  }
  .nx-thinking-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    inline-size: 100%;
    padding: 0.625rem 0.875rem;
    border: 0;
    border-radius: var(--_radius);
    background: transparent;
    color: var(--nx-text-muted);
    font: 550 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
    text-align: start;
    cursor: pointer;
    transition: background-color var(--nx-dur-fast) var(--nx-ease-out);
    &:hover {
      background: var(--nx-surface-2);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: -2px;
    }
    > .nx-agent-swap {
      color: var(--nx-accent-text);
    }
  }
  .nx-thinking-label {
    flex: 1;
    min-inline-size: 0;
  }
  .nx-thinking[data-state=active] .nx-thinking-label {
    background:
      linear-gradient(
        90deg,
        var(--nx-text-muted) 0%,
        var(--nx-text-muted) 35%,
        var(--nx-text) 50%,
        var(--nx-text-muted) 65%,
        var(--nx-text-muted) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: nx-agent-shimmer 1.8s linear infinite;
  }
  .nx-thinking-time {
    flex: none;
    color: var(--nx-text-subtle);
    font: 500 var(--nx-text-xs) / 1 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
  }
  .nx-thinking-chevron {
    flex: none;
    color: var(--nx-text-subtle);
    transition: rotate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    [aria-expanded=true] > & {
      rotate: 180deg;
    }
  }
  .nx-thinking-steps {
    display: grid;
    gap: 0.125rem;
    margin: 0;
    padding: 0 0.875rem 0.75rem;
    list-style: none;
  }
  .nx-thinking-step {
    position: relative;
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    column-gap: 0.625rem;
    padding-block: 0.3125rem;
    color: var(--nx-text-muted);
    font: 400 var(--nx-text-sm) / 1.5 var(--nx-font-sans);
    animation: nx-agent-rise var(--nx-spring-gentle-duration) var(--nx-spring-gentle) both;
    animation-delay: calc(var(--nx-i, 0) * var(--nx-stagger));
    &:not(:last-child)::before {
      content: "";
      position: absolute;
      inset-block: 1.625rem -0.375rem;
      inset-inline-start: calc(0.625rem - 0.5px);
      inline-size: 1px;
      background: var(--nx-border);
    }
    &[data-status=pending] {
      color: var(--nx-text-subtle);
    }
    &[data-status=running] {
      color: var(--nx-text);
    }
    &[data-status=error] .nx-thinking-step-label {
      color: var(--nx-danger-text);
    }
  }
  .nx-thinking-mark {
    display: grid;
    place-items: center;
    inline-size: 1.25rem;
    block-size: 1.3125rem;
    color: var(--nx-text-subtle);
    .nx-icon {
      inline-size: 0.875rem;
      block-size: 0.875rem;
    }
    [data-status=done] > & {
      color: var(--nx-success-text);
    }
    [data-status=error] > & {
      color: var(--nx-danger-text);
    }
    [data-status=running] > & {
      color: var(--nx-accent-text);
    }
  }
  .nx-thinking-dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border: 1.5px solid currentColor;
    border-radius: var(--nx-radius-full);
  }
  .nx-thinking-step-detail {
    grid-column: 2;
    margin: 0.125rem 0 0;
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
  }
  .nx-stream {
    color: var(--nx-text);
    font: 400 var(--nx-text-md) / 1.75 var(--nx-font-sans);
  }
  .nx-stream-body {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .nx-stream-token[data-fresh] {
    animation: nx-agent-token 320ms var(--nx-ease-out) both;
  }
  .nx-stream-caret {
    display: inline-block;
    inline-size: 0.5em;
    block-size: 1.1em;
    margin-inline-start: 0.125em;
    border-radius: 2px;
    background: var(--nx-accent);
    vertical-align: -0.15em;
    animation: nx-agent-blink 1s steps(1) infinite;
    .nx-stream:not([data-streaming]) & {
      display: none;
    }
  }
  .nx-stream-cite {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.25rem;
    block-size: 1.125rem;
    margin-inline: 0.125rem;
    padding-inline: 0.3125rem;
    border: 1px solid var(--nx-accent-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-accent-soft);
    color: var(--nx-accent-text);
    font: 650 0.6875rem / 1 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
    vertical-align: 0.15em;
    cursor: pointer;
    transition:
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      color var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &[data-fresh] {
      animation: nx-agent-rise var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy) both;
    }
    &:hover,
    &[aria-expanded=true] {
      background: var(--nx-accent);
      color: var(--nx-accent-contrast);
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-stream-source {
    display: grid;
    gap: 0.375rem;
    inline-size: min(20rem, calc(100vw - 1rem));
    padding: 0.875rem 1rem;
    font: 400 var(--nx-text-sm) / 1.5 var(--nx-font-sans);
  }
  .nx-stream-source-domain {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    .nx-icon {
      inline-size: 0.875rem;
      block-size: 0.875rem;
    }
  }
  .nx-stream-source-title {
    margin: 0;
    color: var(--nx-text);
    font-weight: 650;
    line-height: 1.35;
  }
  .nx-stream-source-snippet {
    margin: 0;
    color: var(--nx-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .nx-stream-source-link {
    justify-self: start;
    color: var(--nx-accent-text);
    font-weight: 550;
    font-size: var(--nx-text-xs);
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
      border-radius: 2px;
    }
  }
  .nx-tool {
    --_radius: var(--nx-radius-md);
    min-inline-size: 0;
    border: 1px solid var(--nx-border);
    border-radius: var(--_radius);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-xs);
    overflow: clip;
    transition: border-color var(--nx-dur-base) var(--nx-ease-out);
    &[data-status=running] {
      border-color: var(--nx-accent-border);
    }
    &[data-status=error] {
      border-color: color-mix(in oklab, var(--nx-danger) 45%, var(--nx-border));
    }
  }
  .nx-tool-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    inline-size: 100%;
    min-block-size: 2.5rem;
    padding: 0.375rem 0.75rem;
    border: 0;
    background: transparent;
    color: var(--nx-text);
    font: 500 var(--nx-text-sm) / 1.3 var(--nx-font-sans);
    text-align: start;
    cursor: pointer;
    transition: background-color var(--nx-dur-fast) var(--nx-ease-out);
    &:hover {
      background: var(--nx-surface-2);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: -2px;
    }
  }
  .nx-tool-status {
    display: inline-grid;
    place-items: center;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    flex: none;
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
    .nx-spinner {
      --_size: 0.9375rem;
      --_thickness: 2px;
      color: var(--nx-accent);
    }
    [data-icon=queued] {
      color: var(--nx-text-subtle);
    }
    [data-icon=success] {
      color: var(--nx-success-text);
    }
    [data-icon=error] {
      color: var(--nx-danger-text);
    }
  }
  .nx-tool-name {
    flex: none;
    max-inline-size: 45%;
    overflow: hidden;
    font: 600 var(--nx-text-sm) / 1.3 var(--nx-font-mono);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-tool-args {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    color: var(--nx-text-subtle);
    font: 400 var(--nx-text-xs) / 1.3 var(--nx-font-mono);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-tool-time {
    flex: none;
    color: var(--nx-text-subtle);
    font: 500 var(--nx-text-xs) / 1 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
  }
  .nx-tool-state {
    flex: none;
    padding: 0.125rem 0.4375rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-3);
    color: var(--nx-text-muted);
    font: 600 0.6875rem / 1.3 var(--nx-font-sans);
    [data-status=running] & {
      background: var(--nx-accent-soft);
      color: var(--nx-accent-text);
    }
    [data-status=success] & {
      background: var(--nx-success-soft);
      color: var(--nx-success-text);
    }
    [data-status=error] & {
      background: var(--nx-danger-soft);
      color: var(--nx-danger-text);
    }
  }
  .nx-tool-chevron {
    flex: none;
    color: var(--nx-text-subtle);
    transition: rotate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    [aria-expanded=true] > & {
      rotate: 180deg;
    }
  }
  .nx-tool-panels {
    display: grid;
    gap: 0.625rem;
    padding: 0.25rem 0.75rem 0.75rem;
    border-block-start: 1px solid var(--nx-border);
  }
  .nx-tool-section {
    display: grid;
    gap: 0.3125rem;
    padding-block-start: 0.5rem;
  }
  .nx-tool-label {
    margin: 0;
    color: var(--nx-text-subtle);
    font: 600 0.6875rem / 1 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-wider);
    text-transform: uppercase;
  }
  .nx-tool-pre {
    margin: 0;
    max-block-size: 16rem;
    padding: 0.625rem 0.75rem;
    overflow: auto;
    border-radius: calc(var(--_radius) - 2px);
    background: var(--nx-surface-2);
    color: var(--nx-text);
    font: 400 var(--nx-text-xs) / 1.6 var(--nx-font-mono);
    white-space: pre;
    scrollbar-width: thin;
    contain: inline-size;
    [data-status=error] .nx-tool-section:last-child > & {
      color: var(--nx-danger-text);
    }
  }
  .nx-approval {
    --_radius: var(--nx-radius-xl);
    --_pad: var(--nx-space-4);
    display: grid;
    border: 1px solid color-mix(in oklab, var(--nx-gold) 40%, var(--nx-border));
    border-radius: var(--_radius);
    background:
      radial-gradient(
        60% 60% at 100% 0%,
        var(--nx-gold-soft),
        transparent 70%),
      var(--nx-surface);
    box-shadow: var(--nx-shadow-md);
    overflow: clip;
    transition: border-color var(--nx-dur-base) var(--nx-ease-out), box-shadow var(--nx-dur-base) var(--nx-ease-out);
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &[data-state=approved],
    &[data-state=always] {
      border-color: color-mix(in oklab, var(--nx-success) 40%, var(--nx-border));
      box-shadow: var(--nx-shadow-xs);
    }
    &[data-state=denied] {
      border-color: var(--nx-border);
      box-shadow: var(--nx-shadow-xs);
    }
  }
  .nx-approval-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: var(--_pad);
    transition: padding var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    .nx-approval:not([data-state=pending]) & {
      padding-block: 0.625rem;
      align-items: center;
    }
  }
  .nx-approval-badge {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--nx-radius-md);
    background: var(--nx-gold-soft);
    color: var(--nx-gold-text);
    transition:
      background-color var(--nx-dur-base) var(--nx-ease-out),
      color var(--nx-dur-base) var(--nx-ease-out),
      inline-size var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      block-size var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    .nx-icon {
      inline-size: 1.125rem;
      block-size: 1.125rem;
    }
    [data-state=approved] &,
    [data-state=always] & {
      background: var(--nx-success-soft);
      color: var(--nx-success-text);
    }
    [data-state=denied] & {
      background: var(--nx-danger-soft);
      color: var(--nx-danger-text);
    }
    .nx-approval:not([data-state=pending]) & {
      inline-size: 1.75rem;
      block-size: 1.75rem;
    }
  }
  .nx-approval-copy {
    display: grid;
    flex: 1;
    gap: 0.25rem;
    min-inline-size: 0;
  }
  .nx-approval-title {
    margin: 0;
    color: var(--nx-text);
    font: 650 var(--nx-text-md) / 1.35 var(--nx-font-sans);
    transition: font-size var(--nx-dur-base) var(--nx-ease-out);
    .nx-approval:not([data-state=pending]) & {
      font-size: var(--nx-text-sm);
    }
  }
  .nx-approval-summary {
    margin: 0;
    color: var(--nx-text-muted);
    font: 400 var(--nx-text-sm) / 1.55 var(--nx-font-sans);
  }
  .nx-approval-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-block-start: 0.25rem;
  }
  .nx-approval-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.1875rem 0.5rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-2);
    color: var(--nx-text-muted);
    font: 500 var(--nx-text-xs) / 1.2 var(--nx-font-mono);
    .nx-icon {
      inline-size: 0.75rem;
      block-size: 0.75rem;
    }
  }
  .nx-approval-result {
    flex: none;
    color: var(--nx-text-muted);
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-sans);
    [data-state=approved] &,
    [data-state=always] & {
      color: var(--nx-success-text);
    }
    [data-state=denied] & {
      color: var(--nx-danger-text);
    }
  }
  .nx-approval-undo {
    flex: none;
    padding: 0.25rem 0.5rem;
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: transparent;
    color: var(--nx-text-subtle);
    font: 550 var(--nx-text-xs) / 1 var(--nx-font-sans);
    cursor: pointer;
    &:hover {
      color: var(--nx-text);
      background: var(--nx-surface-2);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-approval-body {
    display: grid;
    gap: var(--nx-space-3);
    padding: 0 var(--_pad) var(--_pad);
  }
  .nx-approval-details {
    min-inline-size: 0;
  }
  .nx-approval-details:empty {
    display: none;
  }
  .nx-approval-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    .nx-kbd {
      margin-inline-start: 0.375rem;
      opacity: 0.8;
    }
  }
  .nx-approval-spacer {
    flex: 1;
  }
  @keyframes nx-orbs-breathe {
    50% {
      opacity: 0.45;
      scale: 0.85;
    }
  }
  @keyframes nx-orbs-orbit {
    to {
      rotate: 1turn;
    }
  }
  @keyframes nx-orbs-bar {
    0%, 100% {
      scale: 1 0.45;
    }
    50% {
      scale: 1 1;
    }
  }
  @keyframes nx-orbs-ring {
    from {
      opacity: 0.55;
      scale: 0.6;
    }
    to {
      opacity: 0;
      scale: 1.6;
    }
  }
  @keyframes nx-orbs-fade {
    50% {
      opacity: 0.5;
    }
  }
  .nx-orbs {
    --_size: 1.5rem;
    --_dot: calc(var(--_size) * 0.24);
    position: relative;
    display: inline-grid;
    place-items: center;
    inline-size: var(--_size);
    block-size: var(--_size);
    flex: none;
    vertical-align: middle;
    &[data-size=sm] {
      --_size: 1rem;
    }
    &[data-size=lg] {
      --_size: 2.5rem;
    }
    > i {
      grid-area: 1 / 1;
      inline-size: var(--_dot);
      block-size: var(--_dot);
      border-radius: var(--nx-radius-full);
      background: var(--nx-accent);
      transition:
        translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
        scale var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
        border-radius var(--nx-dur-base) var(--nx-ease-out),
        background-color var(--nx-dur-base) var(--nx-ease-out),
        block-size var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
      &:nth-child(2) {
        background: var(--nx-violet-400, var(--nx-accent));
      }
      &:nth-child(3) {
        background: var(--nx-cyan-400, var(--nx-accent));
      }
    }
    &::before {
      content: "";
      grid-area: 1 / 1;
      inline-size: 100%;
      block-size: 100%;
      border: 1.5px solid var(--nx-accent);
      border-radius: var(--nx-radius-full);
      opacity: 0;
    }
  }
  .nx-orbs[data-state=idle] > i {
    animation: nx-orbs-breathe 2.4s var(--nx-ease-in-out) infinite;
    opacity: 0.7;
    &:nth-child(1) {
      translate: calc(var(--_size) * -0.3) 0;
    }
    &:nth-child(3) {
      translate: calc(var(--_size) * 0.3) 0;
      animation-delay: 0.6s;
    }
    &:nth-child(2) {
      animation-delay: 0.3s;
    }
  }
  .nx-orbs[data-state=thinking] {
    animation: nx-orbs-orbit 1.4s linear infinite;
    > i:nth-child(1) {
      translate: 0 calc(var(--_size) * -0.32);
    }
    > i:nth-child(2) {
      translate: calc(var(--_size) * 0.28) calc(var(--_size) * 0.16);
      scale: 0.8;
    }
    > i:nth-child(3) {
      translate: calc(var(--_size) * -0.28) calc(var(--_size) * 0.16);
      scale: 0.6;
    }
  }
  .nx-orbs[data-state=speaking] > i {
    block-size: calc(var(--_size) * 0.8);
    border-radius: var(--nx-radius-full);
    animation: nx-orbs-bar 0.9s var(--nx-ease-in-out) infinite;
    &:nth-child(1) {
      translate: calc(var(--_size) * -0.3) 0;
      animation-delay: -0.3s;
    }
    &:nth-child(3) {
      translate: calc(var(--_size) * 0.3) 0;
      animation-delay: -0.6s;
    }
  }
  .nx-orbs[data-state=listening] {
    > i {
      scale: 1.6;
    }
    > i:nth-child(n+2) {
      opacity: 0;
      scale: 0.5;
    }
    &::before {
      animation: nx-orbs-ring 1.6s var(--nx-ease-out) infinite;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-orbs,
    .nx-orbs > i,
    .nx-orbs::before {
      animation: none !important;
    }
    .nx-orbs[data-state=thinking] > i,
    .nx-orbs[data-state=speaking] > i {
      animation: nx-orbs-fade 2.4s var(--nx-ease-in-out) infinite !important;
    }
    .nx-orbs[data-state=listening]::before {
      opacity: 0.4;
    }
  }
  .nx-code {
    --_radius: var(--nx-radius-lg);
    display: grid;
    min-inline-size: 0;
    border: 1px solid var(--nx-border);
    border-radius: var(--_radius);
    background: var(--nx-surface-2);
    color: var(--nx-text);
    overflow: clip;
    direction: ltr;
    text-align: left;
  }
  .nx-code-head,
  .nx-diff-head,
  .nx-json-bar,
  .nx-terminal-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.5rem;
    min-block-size: 2.5rem;
    padding: 0.3125rem 0.375rem 0.3125rem 0.875rem;
    border-block-end: 1px solid var(--nx-border);
    background: color-mix(in oklab, var(--nx-surface) 70%, transparent);
    font: 500 var(--nx-text-xs) / 1.2 var(--nx-font-sans);
  }
  .nx-code-file,
  .nx-diff-file {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    min-inline-size: 0;
    overflow: hidden;
    color: var(--nx-text);
    font: 550 var(--nx-text-xs) / 1.2 var(--nx-font-mono);
    text-overflow: ellipsis;
    white-space: nowrap;
    .nx-icon {
      flex: none;
      inline-size: 0.875rem;
      block-size: 0.875rem;
      color: var(--nx-text-subtle);
    }
  }
  .nx-code-lang {
    padding: 0.125rem 0.4375rem;
    border-radius: var(--nx-radius-xs);
    background: var(--nx-surface-3);
    color: var(--nx-text-muted);
    font: 600 0.6875rem / 1.3 var(--nx-font-mono);
    text-transform: lowercase;
  }
  .nx-code-tools {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    margin-inline-start: auto;
  }
  .nx-code-body {
    overflow: auto;
    contain: inline-size;
    max-block-size: var(--nx-code-height, none);
    scrollbar-width: thin;
  }
  .nx-code-pre {
    display: grid;
    min-inline-size: max-content;
    margin: 0;
    padding-block: 0.625rem;
    font: 400 var(--nx-text-sm) / 1.7 var(--nx-font-mono);
    tab-size: 2;
    [data-wrap] & {
      min-inline-size: 0;
    }
  }
  .nx-code-line {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    padding-inline-end: 1rem;
    &[data-highlight] {
      background: var(--nx-accent-soft);
      box-shadow: inset 2px 0 0 var(--nx-accent);
    }
    &[data-mark=add] {
      background: var(--nx-success-soft);
    }
    &[data-mark=del] {
      background: var(--nx-danger-soft);
    }
  }
  .nx-code-num {
    min-inline-size: 3ch;
    padding-inline: 0.875rem 0.75rem;
    color: var(--nx-text-subtle);
    text-align: right;
    font-variant-numeric: tabular-nums;
    -webkit-user-select: none;
    user-select: none;
    opacity: 0.75;
    .nx-code[data-numbers=false] & {
      display: none;
    }
    [data-highlight] > & {
      color: var(--nx-accent-text);
      opacity: 1;
    }
  }
  .nx-code-sign {
    inline-size: 1.25ch;
    color: var(--nx-text-subtle);
    -webkit-user-select: none;
    user-select: none;
    [data-mark=add] > & {
      color: var(--nx-success-text);
    }
    [data-mark=del] > & {
      color: var(--nx-danger-text);
    }
    .nx-code:not([data-diff]) & {
      display: none;
    }
  }
  .nx-code-text {
    white-space: pre;
    padding-inline-start: 0.125rem;
    .nx-code[data-numbers=false] & {
      padding-inline-start: 1rem;
    }
    [data-wrap] & {
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
  }
  .nx-tok-comment {
    color: var(--nx-text-subtle);
    font-style: italic;
  }
  .nx-tok-string {
    color: var(--nx-success-text);
  }
  .nx-tok-number,
  .nx-tok-literal {
    color: var(--nx-gold-text);
  }
  .nx-tok-keyword {
    color: var(--nx-accent-text);
    font-weight: 550;
  }
  .nx-tok-fn {
    color: var(--nx-info-text);
  }
  .nx-tok-tag {
    color: var(--nx-danger-text);
  }
  .nx-tok-attr {
    color: var(--nx-warning-text);
  }
  .nx-tok-var {
    color: var(--nx-info-text);
  }
  .nx-tok-punct {
    color: var(--nx-text-muted);
  }
  .nx-diff {
    --_radius: var(--nx-radius-lg);
    display: grid;
    min-inline-size: 0;
    border: 1px solid var(--nx-border);
    border-radius: var(--_radius);
    background: var(--nx-surface);
    overflow: clip;
    direction: ltr;
    text-align: left;
  }
  .nx-diff-stats {
    display: flex;
    gap: 0.375rem;
    font: 650 var(--nx-text-xs) / 1 var(--nx-font-mono);
    font-variant-numeric: tabular-nums;
  }
  .nx-diff-stat[data-kind=add] {
    color: var(--nx-success-text);
  }
  .nx-diff-stat[data-kind=del] {
    color: var(--nx-danger-text);
  }
  .nx-diff-views {
    display: inline-flex;
    gap: 0.125rem;
    margin-inline-start: auto;
    padding: 0.125rem;
    border-radius: var(--nx-radius-sm);
    background: var(--nx-surface-2);
  }
  .nx-diff-view {
    padding: 0.3125rem 0.625rem;
    border: 0;
    border-radius: calc(var(--nx-radius-sm) - 2px);
    background: transparent;
    color: var(--nx-text-muted);
    font: 550 var(--nx-text-xs) / 1 var(--nx-font-sans);
    cursor: pointer;
    transition:
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      color var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &[aria-pressed=true] {
      background: var(--nx-surface);
      color: var(--nx-text);
      box-shadow: var(--nx-shadow-xs);
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-diff-body {
    overflow: auto;
    contain: inline-size;
    max-block-size: var(--nx-diff-height, none);
    scrollbar-width: thin;
  }
  .nx-diff-table {
    display: grid;
    min-inline-size: max-content;
    font: 400 var(--nx-text-xs) / 1.75 var(--nx-font-mono);
    &[data-view=split] {
      min-inline-size: 0;
    }
  }
  .nx-diff-row {
    display: grid;
    grid-template-columns: 3.25rem 3.25rem 1.5rem minmax(0, 1fr);
    &[data-kind=add] {
      background: var(--nx-success-soft);
    }
    &[data-kind=del] {
      background: var(--nx-danger-soft);
    }
    &[data-fresh] {
      animation: nx-agent-flash 900ms var(--nx-ease-out);
    }
    [data-view=split] & {
      grid-template-columns: 3rem minmax(0, 1fr) 3rem minmax(0, 1fr);
    }
  }
  .nx-diff-num {
    padding-inline: 0.5rem;
    color: var(--nx-text-subtle);
    text-align: right;
    font-variant-numeric: tabular-nums;
    -webkit-user-select: none;
    user-select: none;
  }
  .nx-diff-sign {
    color: var(--nx-text-subtle);
    text-align: center;
    -webkit-user-select: none;
    user-select: none;
    [data-kind=add] > & {
      color: var(--nx-success-text);
    }
    [data-kind=del] > & {
      color: var(--nx-danger-text);
    }
  }
  .nx-diff-text {
    padding-inline-end: 1rem;
    color: var(--nx-text);
    white-space: pre;
    [data-view=split] & {
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
  }
  .nx-diff-cell {
    &[data-kind=add] {
      background: var(--nx-success-soft);
    }
    &[data-kind=del] {
      background: var(--nx-danger-soft);
    }
    &[data-kind=empty] {
      background: color-mix(in oklab, var(--nx-surface-3) 55%, transparent);
    }
    &.nx-diff-text[data-kind=add]::before {
      content: "+ ";
      color: var(--nx-success-text);
    }
    &.nx-diff-text[data-kind=del]::before {
      content: "- ";
      color: var(--nx-danger-text);
    }
    &.nx-diff-text[data-kind=same]::before {
      content: "  ";
    }
  }
  .nx-diff-cell.nx-diff-num:nth-child(3) {
    border-inline-start: 1px solid var(--nx-border);
  }
  .nx-diff-gap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    inline-size: 100%;
    padding: 0.25rem 0.875rem;
    border: 0;
    border-block: 1px solid var(--nx-border);
    background: var(--nx-info-soft);
    color: var(--nx-info-text);
    font: 550 var(--nx-text-xs) / 1.6 var(--nx-font-sans);
    text-align: start;
    cursor: pointer;
    transition: background-color var(--nx-dur-fast) var(--nx-ease-out);
    &:hover {
      background: color-mix(in oklab, var(--nx-info-soft) 60%, var(--nx-info) 12%);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: -2px;
    }
    .nx-icon {
      inline-size: 0.875rem;
      block-size: 0.875rem;
    }
  }
  .nx-diff-empty {
    margin: 0;
    padding: 1.25rem;
    color: var(--nx-text-subtle);
    font: 500 var(--nx-text-sm) / 1.5 var(--nx-font-sans);
    text-align: center;
  }
  .nx-json {
    --_radius: var(--nx-radius-lg);
    display: grid;
    min-inline-size: 0;
    border: 1px solid var(--nx-border);
    border-radius: var(--_radius);
    background: var(--nx-surface);
    overflow: clip;
    direction: ltr;
    text-align: left;
  }
  .nx-json-bar {
    padding-inline-start: 0.5rem;
  }
  .nx-json-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-inline-size: 8rem;
    > .nx-icon {
      position: absolute;
      inset-inline-start: 0.5rem;
      inline-size: 0.875rem;
      block-size: 0.875rem;
      color: var(--nx-text-subtle);
      pointer-events: none;
    }
  }
  .nx-json-search-input {
    inline-size: 100%;
    min-block-size: 1.875rem;
    padding-inline: 1.75rem 0.625rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    background: var(--nx-surface-2);
    color: var(--nx-text);
    font: 400 var(--nx-text-xs) / 1 var(--nx-font-sans);
    &::placeholder {
      color: var(--nx-text-subtle);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 1px;
    }
  }
  .nx-json-found {
    flex: none;
    color: var(--nx-text-subtle);
    font-variant-numeric: tabular-nums;
  }
  .nx-json-tree {
    margin: 0;
    padding: 0.5rem 0;
    max-block-size: var(--nx-json-height, 26rem);
    overflow: auto;
    contain: inline-size;
    list-style: none;
    font: 400 var(--nx-text-xs) / 1.85 var(--nx-font-mono);
    scrollbar-width: thin;
  }
  .nx-json-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-block-size: 1.625rem;
    padding-inline: calc(0.5rem + var(--_depth, 0) * 1.125rem) 0.5rem;
    white-space: nowrap;
    &:hover,
    &:focus-within {
      background: var(--nx-surface-2);
    }
    &[data-hit] {
      background: var(--nx-gold-soft);
    }
  }
  .nx-json-toggle {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-xs);
    background: transparent;
    color: var(--nx-text-subtle);
    cursor: pointer;
    .nx-icon {
      inline-size: 0.75rem;
      block-size: 0.75rem;
      transition: rotate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    }
    &[aria-expanded=false] .nx-icon {
      rotate: -90deg;
    }
    &:hover {
      color: var(--nx-text);
      background: var(--nx-surface-3);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 1px;
    }
  }
  .nx-json-spacer {
    flex: none;
    inline-size: 1.125rem;
  }
  .nx-json-key {
    color: var(--nx-accent-text);
  }
  .nx-json-punct {
    color: var(--nx-text-subtle);
  }
  .nx-json-value {
    overflow: hidden;
    text-overflow: ellipsis;
    &[data-type=string] {
      color: var(--nx-success-text);
    }
    &[data-type=number] {
      color: var(--nx-gold-text);
    }
    &[data-type=boolean] {
      color: var(--nx-info-text);
    }
    &[data-type=null] {
      color: var(--nx-text-subtle);
      font-style: italic;
    }
  }
  .nx-json-count {
    padding: 0 0.375rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-3);
    color: var(--nx-text-subtle);
    font: 500 0.625rem / 1.5 var(--nx-font-sans);
  }
  .nx-json-tree mark {
    border-radius: 2px;
    background: var(--nx-gold);
    color: var(--nx-ink-950, var(--nx-text));
  }
  .nx-json-actions {
    display: flex;
    gap: 0.125rem;
    margin-inline-start: auto;
    padding-inline-start: 0.75rem;
    opacity: 0;
    transition: opacity var(--nx-dur-fast) var(--nx-ease-out);
    .nx-json-row:hover &,
    .nx-json-row:focus-within & {
      opacity: 1;
    }
    .nx-agent-icon-button {
      inline-size: 1.5rem;
      block-size: 1.5rem;
    }
    .nx-agent-icon-button .nx-icon {
      inline-size: 0.8125rem;
      block-size: 0.8125rem;
    }
  }
  @media (hover: none) {
    .nx-json-actions {
      opacity: 1;
    }
  }
  .nx-terminal {
    --_radius: var(--nx-radius-lg);
    position: relative;
    display: grid;
    min-inline-size: 0;
    border: 1px solid var(--nx-border-strong);
    border-radius: var(--_radius);
    background: var(--nx-surface-2);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-md);
    overflow: clip;
    direction: ltr;
    text-align: left;
  }
  .nx-terminal-lights {
    display: inline-flex;
    gap: 0.375rem;
    margin-inline-end: 0.25rem;
    > i {
      inline-size: 0.625rem;
      block-size: 0.625rem;
      border-radius: var(--nx-radius-full);
      background: var(--nx-danger);
      &:nth-child(2) {
        background: var(--nx-warning);
      }
      &:nth-child(3) {
        background: var(--nx-success);
      }
    }
  }
  .nx-terminal-title {
    min-inline-size: 0;
    overflow: hidden;
    color: var(--nx-text-muted);
    font: 550 var(--nx-text-xs) / 1.2 var(--nx-font-mono);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-terminal-filters {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-inline-start: auto;
  }
  .nx-terminal-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--nx-radius-full);
    background: transparent;
    color: var(--nx-text-muted);
    font: 550 0.6875rem / 1 var(--nx-font-sans);
    cursor: pointer;
    transition:
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      border-color var(--nx-dur-fast) var(--nx-ease-out),
      color var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &:hover {
      color: var(--nx-text);
    }
    &[aria-pressed=true] {
      border-color: var(--nx-border);
      background: var(--nx-surface);
      color: var(--nx-text);
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    > b {
      font-weight: 650;
      font-variant-numeric: tabular-nums;
      color: var(--nx-text-subtle);
    }
    &[data-level=warn] > b {
      color: var(--nx-warning-text);
    }
    &[data-level=error] > b {
      color: var(--nx-danger-text);
    }
  }
  .nx-terminal-screen {
    block-size: var(--nx-terminal-height, 18rem);
    padding: 0.625rem 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    font: 400 var(--nx-text-xs) / 1.75 var(--nx-font-mono);
    scrollbar-width: thin;
  }
  .nx-terminal-line {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    column-gap: 0.625rem;
    padding-inline: 0.875rem;
    &[data-fresh] {
      animation: nx-agent-token 260ms var(--nx-ease-out) both;
    }
    &[data-level=warn] {
      background: color-mix(in oklab, var(--nx-warning-soft) 70%, transparent);
    }
    &[data-level=error] {
      background: color-mix(in oklab, var(--nx-danger-soft) 80%, transparent);
    }
  }
  .nx-terminal-time {
    color: var(--nx-text-subtle);
    font-variant-numeric: tabular-nums;
    -webkit-user-select: none;
    user-select: none;
  }
  .nx-terminal-level {
    min-inline-size: 5ch;
    color: var(--nx-text-subtle);
    font-weight: 650;
    text-transform: uppercase;
    -webkit-user-select: none;
    user-select: none;
    [data-level=info] > & {
      color: var(--nx-info-text);
    }
    [data-level=warn] > & {
      color: var(--nx-warning-text);
    }
    [data-level=error] > & {
      color: var(--nx-danger-text);
    }
    [data-level=success] > & {
      color: var(--nx-success-text);
    }
  }
  .nx-terminal-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    unicode-bidi: plaintext;
    [data-level=error] > & {
      color: var(--nx-danger-text);
    }
  }
  .nx-terminal-prompt {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding-inline: 0.875rem;
    color: var(--nx-text-muted);
  }
  .nx-terminal-ps {
    color: var(--nx-success-text);
    font-weight: 650;
  }
  .nx-terminal-caret {
    display: inline-block;
    inline-size: 0.55em;
    block-size: 1.15em;
    background: var(--nx-text-muted);
    vertical-align: -0.2em;
    animation: nx-agent-blink 1.05s steps(1) infinite;
  }
  .nx-terminal-empty {
    padding: 0.5rem 0.875rem;
    color: var(--nx-text-subtle);
    font-family: var(--nx-font-sans);
  }
  .nx-terminal-jump {
    position: absolute;
    inset-block-end: 0.75rem;
    inset-inline-end: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-lg);
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-sans);
    cursor: pointer;
    opacity: 0;
    translate: 0 calc(8px * var(--nx-motion));
    scale: 0.95;
    pointer-events: none;
    transition:
      opacity var(--nx-dur-fast) var(--nx-ease-out),
      translate var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    .nx-icon {
      inline-size: 0.875rem;
      block-size: 0.875rem;
      rotate: 180deg;
    }
    &[data-show] {
      opacity: 1;
      translate: 0 0;
      scale: 1;
      pointer-events: auto;
    }
    &[data-show]:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-thinking[data-state=active] .nx-thinking-label {
      animation-duration: 4s;
    }
    .nx-stream-caret,
    .nx-terminal-caret {
      animation: none;
    }
    .nx-stream-token[data-fresh] {
      animation-name: nx-orbs-fade;
      animation-iteration-count: 1;
      animation-duration: 1ms;
    }
  }
}

/* src/css/blocks/interact.css */
@layer nx.components {
  :is(.nx-hold, .nx-slide-confirm-thumb, .nx-snackbar-undo, .nx-swipe-action, .nx-lightbox-thumb, .nx-inline-edit-display):active:not(:disabled, [aria-disabled=true], [data-static]) {
    scale: calc(1 - 0.04 * var(--nx-motion));
  }
  :is(.nx-hold-icon, .nx-slide-confirm-icon, .nx-password-toggle, .nx-password-tick) {
    display: inline-grid;
    place-items: center;
    > * {
      grid-area: 1 / 1;
      display: inline-grid;
      transition-property:
        scale,
        opacity,
        filter;
      transition-duration: 300ms;
      transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
    }
    > [data-off] {
      opacity: 0;
      scale: calc(1 - 0.75 * var(--nx-motion));
      filter: blur(4px);
    }
  }
  .nx-hold {
    --_tone: var(--nx-danger);
    --_tone-text: var(--nx-danger-text);
    --_tone-soft: var(--nx-danger-soft);
    --_h: 2.75rem;
    --_radius: var(--nx-radius-md);
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    min-block-size: var(--_h);
    padding-inline: 1.1rem;
    overflow: clip;
    border: 1px solid color-mix(in oklab, var(--_tone) 35%, var(--nx-border));
    border-radius: var(--_radius);
    background: var(--nx-surface);
    color: var(--_tone-text);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    box-shadow: var(--nx-shadow-xs);
    transition-property:
      scale,
      background-color,
      border-color,
      color;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-base),
      var(--nx-dur-base),
      var(--nx-dur-base);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-ease-out);
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:is(:disabled, [aria-disabled=true]) {
      cursor: not-allowed;
      opacity: 0.5;
    }
    &[data-tone=accent] {
      --_tone: var(--nx-accent);
      --_tone-text: var(--nx-accent-text);
      --_tone-soft: var(--nx-accent-soft);
    }
    &[data-tone=warning] {
      --_tone: var(--nx-warning);
      --_tone-text: var(--nx-warning-text);
      --_tone-soft: var(--nx-warning-soft);
    }
    &[data-size=sm] {
      --_h: 2.25rem;
      --_radius: var(--nx-radius-sm);
      padding-inline: 0.85rem;
    }
    &[data-size=lg] {
      --_h: 3.25rem;
      --_radius: var(--nx-radius-lg);
      padding-inline: 1.4rem;
      font-size: var(--nx-text-md);
    }
    &[data-state=holding]:not([data-static]) {
      scale: calc(1 - 0.03 * var(--nx-motion));
    }
    &[data-state=done] {
      --_tone: var(--nx-success);
      --_tone-text: var(--nx-success-text);
      --_tone-soft: var(--nx-success-soft);
      background: var(--nx-success-soft);
    }
    &[data-state=done] :is(.nx-hold-icon, .nx-hold-label) > :not([data-off]) {
      opacity: 0;
      scale: calc(1 - 0.75 * var(--nx-motion));
      filter: blur(4px);
    }
    &[data-state=done] :is(.nx-hold-icon, .nx-hold-label) > [data-off] {
      opacity: 1;
      scale: 1;
      filter: none;
    }
  }
  .nx-hold-fill {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in oklab, var(--_tone) 20%, transparent);
    transform-origin: left center;
    scale: var(--_p) 1;
    &:dir(rtl) {
      transform-origin: right center;
    }
  }
  .nx-hold[data-state=done] .nx-hold-fill {
    scale: 1;
    background: transparent;
  }
  .nx-hold-label {
    display: inline-grid;
    > * {
      grid-area: 1 / 1;
      transition-property:
        scale,
        opacity,
        filter;
      transition-duration: 300ms;
      transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
    }
    > [data-off] {
      opacity: 0;
      filter: blur(4px);
      scale: calc(1 - 0.08 * var(--nx-motion));
    }
  }
  .nx-hold-icon {
    position: relative;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    .nx-icon {
      inline-size: 1.05rem;
      block-size: 1.05rem;
    }
  }
  .nx-hold-ring {
    position: absolute;
    inset: -0.3rem;
    inline-size: calc(100% + 0.6rem);
    block-size: calc(100% + 0.6rem);
    rotate: -90deg;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    pointer-events: none;
    circle {
      stroke: color-mix(in oklab, var(--_tone) 18%, transparent);
    }
    .nx-hold-ring-bar {
      stroke: var(--_tone);
      stroke-dasharray: 1;
      stroke-dashoffset: calc(1 - var(--_p));
    }
  }
  .nx-hold:not([data-variant=ring]) .nx-hold-ring {
    display: none;
  }
  .nx-hold[data-variant=ring] .nx-hold-fill {
    display: none;
  }
  .nx-hold[data-variant=ring] .nx-hold-icon {
    margin-inline-end: 0.2rem;
  }
  .nx-hold[data-state=done] .nx-hold-ring {
    opacity: 0;
    transition: opacity var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-slide-confirm {
    --_tone: var(--nx-accent);
    --_tone-contrast: var(--nx-accent-contrast);
    --_pad: 0.3rem;
    --_thumb: 2.9rem;
    --_radius: var(--nx-radius-full);
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    inline-size: 100%;
    max-inline-size: 22rem;
    block-size: calc(var(--_thumb) + var(--_pad) * 2);
    padding-inline: var(--_pad);
    overflow: clip;
    border-radius: var(--_radius);
    background: var(--nx-surface-2);
    box-shadow: inset 0 0 0 1px var(--nx-border), inset 0 1px 2px color-mix(in oklab, var(--nx-text) 8%, transparent);
    user-select: none;
    -webkit-user-select: none;
    &[data-tone=danger] {
      --_tone: var(--nx-danger);
      --_tone-contrast: var(--nx-accent-contrast);
    }
    &[data-tone=success] {
      --_tone: var(--nx-success);
      --_tone-contrast: var(--nx-accent-contrast);
    }
    &[data-state=done] {
      --_tone: var(--nx-success);
    }
    &[aria-disabled=true] {
      opacity: 0.5;
    }
  }
  .nx-slide-confirm-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: -1;
    inline-size: calc(var(--_x, 0px) + var(--_thumb) + var(--_pad) * 2);
    border-radius: inherit;
    background: color-mix(in oklab, var(--_tone) calc(10% + 18% * var(--_p)), transparent);
    transition: inline-size var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy), background-color var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-slide-confirm-label {
    grid-area: 1 / 1;
    display: grid;
    place-items: center;
    padding-inline: calc(var(--_thumb) + var(--nx-space-3));
    color: var(--nx-text-muted);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    white-space: nowrap;
    pointer-events: none;
    > * {
      grid-area: 1 / 1;
      transition-property:
        opacity,
        translate,
        filter;
      transition-duration: 300ms;
      transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
    }
    > :not([data-off]) {
      opacity: calc(1 - var(--_p) * 1.8);
      translate: calc(var(--_p) * 18px * var(--nx-dir) * var(--nx-motion)) 0;
      background:
        linear-gradient(
          90deg,
          var(--nx-text-muted) 0 40%,
          var(--nx-text) 50%,
          var(--nx-text-muted) 60% 100%) 0 0 / 250% 100%;
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      animation: nx-slide-sheen 2.6s linear infinite;
    }
    > [data-off] {
      opacity: 0;
      color: var(--nx-success-text);
      translate: 0 calc(6px * var(--nx-motion));
    }
  }
  .nx-slide-confirm[data-state=dragging] .nx-slide-confirm-label > :not([data-off]),
  .nx-slide-confirm[data-dragging] .nx-slide-confirm-label > :not([data-off]) {
    transition-duration: 0ms;
  }
  .nx-slide-confirm[data-state=done] .nx-slide-confirm-label {
    > :not([data-off]) {
      opacity: 0;
    }
    > [data-off] {
      opacity: 1;
      translate: 0;
    }
  }
  @keyframes nx-slide-sheen {
    from {
      background-position: 100% 0;
    }
    to {
      background-position: -50% 0;
    }
  }
  .nx-slide-confirm-thumb {
    grid-area: 1 / 1;
    justify-self: start;
    display: grid;
    place-items: center;
    inline-size: var(--_thumb);
    block-size: var(--_thumb);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: calc(var(--_radius) - var(--_pad));
    background: var(--_tone);
    color: var(--_tone-contrast);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.22),
      0 1px 2px rgb(0 0 0 / 0.14),
      0 6px 16px -6px color-mix(in oklab, var(--_tone) 70%, transparent);
    cursor: grab;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    translate: calc(var(--_x, 0px) * var(--nx-dir)) 0;
    transition-property:
      translate,
      scale,
      background-color;
    transition-duration:
      var(--nx-spring-bouncy-duration),
      var(--nx-spring-snappy-duration),
      var(--nx-dur-base);
    transition-timing-function:
      var(--nx-spring-bouncy),
      var(--nx-spring-snappy),
      var(--nx-ease-out);
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &[aria-disabled=true] {
      cursor: default;
    }
    .nx-icon {
      inline-size: 1.2rem;
      block-size: 1.2rem;
    }
  }
  .nx-slide-confirm[data-dragging] {
    .nx-slide-confirm-thumb {
      cursor: grabbing;
      transition-duration:
        0ms,
        var(--nx-spring-snappy-duration),
        var(--nx-dur-base);
    }
    .nx-slide-confirm-fill {
      transition-duration: 0ms, var(--nx-dur-base);
    }
  }
  .nx-slide-confirm[data-state=done] .nx-slide-confirm-icon {
    > :not([data-off]) {
      opacity: 0;
      scale: calc(1 - 0.75 * var(--nx-motion));
      filter: blur(4px);
    }
    > [data-off] {
      opacity: 1;
      scale: 1;
      filter: none;
    }
  }
  .nx-inline-edit {
    --_pad-x: 0.4rem;
    --_radius: var(--nx-radius-sm);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    max-inline-size: 100%;
    vertical-align: middle;
    font: inherit;
    color: inherit;
    &[data-size=lg] {
      font-size: var(--nx-text-xl);
      font-weight: 650;
    }
  }
  .nx-inline-edit-display {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    min-inline-size: 0;
    max-inline-size: 100%;
    margin: 0;
    margin-inline: calc(var(--_pad-x) * -1);
    padding: 0.15em var(--_pad-x);
    border: 0;
    border-radius: var(--_radius);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: text;
    transition-property: background-color, scale;
    transition-duration: var(--nx-dur-fast), var(--nx-spring-snappy-duration);
    transition-timing-function: var(--nx-ease-out), var(--nx-spring-snappy);
    &:hover {
      background: var(--nx-surface-2);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-inline-edit-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    &[data-placeholder] {
      color: var(--nx-text-subtle);
    }
  }
  .nx-inline-edit-pen {
    display: inline-flex;
    color: var(--nx-text-subtle);
    opacity: 0.55;
    transition: opacity var(--nx-dur-fast) var(--nx-ease-out);
    .nx-icon {
      inline-size: 0.85em;
      block-size: 0.85em;
    }
  }
  .nx-inline-edit-display:is(:hover, :focus-visible) .nx-inline-edit-pen {
    opacity: 1;
  }
  .nx-inline-edit-field {
    display: none;
    grid-template-areas: "cell";
    min-inline-size: 3ch;
    max-inline-size: 100%;
    margin-inline: calc(var(--_pad-x) * -1);
  }
  .nx-inline-edit:is([data-state=editing], [data-state=saving], [data-state=error]) {
    .nx-inline-edit-display {
      display: none;
    }
    .nx-inline-edit-field {
      display: inline-grid;
    }
  }
  :is(.nx-inline-edit-sizer, .nx-inline-edit-input) {
    grid-area: cell;
    min-inline-size: 0;
    padding: 0.15em var(--_pad-x);
    font: inherit;
    letter-spacing: inherit;
    white-space: pre;
  }
  .nx-inline-edit-sizer {
    visibility: hidden;
    overflow: hidden;
    padding-inline-end: calc(var(--_pad-x) + 2px);
  }
  .nx-inline-edit-input {
    inline-size: 100%;
    margin: 0;
    border: 0;
    border-radius: var(--_radius);
    background: var(--nx-surface);
    color: inherit;
    box-shadow: 0 0 0 1px var(--nx-accent-border), 0 0 0 4px var(--nx-accent-soft);
    outline: none;
    transition: box-shadow var(--nx-dur-base) var(--nx-ease-out);
    &:read-only {
      color: var(--nx-text-muted);
    }
  }
  .nx-inline-edit[data-state=error] .nx-inline-edit-input {
    box-shadow: 0 0 0 1px var(--nx-danger), 0 0 0 4px var(--nx-danger-soft);
    animation: nx-shake 400ms var(--nx-ease-out);
  }
  .nx-inline-edit-status {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-1);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    font-weight: 500;
    white-space: nowrap;
    &:empty {
      display: none;
    }
    .nx-spinner {
      --_size: 0.95em;
      --_thickness: 2px;
      color: var(--nx-accent);
    }
  }
  .nx-inline-edit[data-state=idle] .nx-inline-edit-status {
    display: none;
  }
  .nx-inline-edit[data-state=error] .nx-inline-edit-status {
    color: var(--nx-danger-text);
    animation: nx-rise var(--nx-dur-slow) var(--nx-ease-out);
  }
  .nx-inline-edit[data-state=saved] .nx-inline-edit-status {
    color: var(--nx-success-text);
  }
  .nx-odometer {
    --_lh: 1.15em;
    display: inline-flex;
    font-variant-numeric: tabular-nums;
    line-height: var(--_lh);
    vertical-align: bottom;
  }
  .nx-odometer-roll {
    display: inline-flex;
    direction: ltr;
    unicode-bidi: isolate;
  }
  .nx-odometer-col {
    position: relative;
    display: inline-block;
    block-size: var(--_lh);
    overflow: clip;
    overflow-clip-margin: 0.1em;
    text-align: center;
    &[data-rolling] {
      mask-image:
        linear-gradient(
          to bottom,
          transparent,
          black 24%,
          black 76%,
          transparent);
    }
  }
  .nx-odometer-strip {
    display: flex;
    flex-direction: column;
    will-change: transform;
  }
  .nx-odometer-cell {
    display: block;
    block-size: var(--_lh);
    white-space: pre;
    &:empty::before {
      content: "\200b";
    }
  }
  .nx-snackbars {
    position: fixed;
    inset-block: auto var(--nx-space-6);
    inset-inline: 0;
    block-size: auto;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: inherit;
    z-index: var(--nx-z-toast);
    inline-size: min(100% - 2rem, 28rem);
    margin-inline: auto;
    pointer-events: none;
    &[data-position=bottom-start] {
      margin-inline: var(--nx-space-6) auto;
    }
    &[data-position=bottom-end] {
      margin-inline: auto var(--nx-space-6);
    }
    &[data-position=inline] {
      position: relative;
      inset: auto;
      z-index: auto;
      margin: 0;
      inline-size: 100%;
    }
  }
  .nx-snackbar-list {
    display: flex;
    flex-direction: column;
    gap: var(--nx-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-snackbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    min-block-size: 3.25rem;
    padding-block: 0.5rem;
    padding-inline: 0.9rem 0.45rem;
    overflow: clip;
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface-inverse);
    color: var(--nx-text-inverse);
    box-shadow: var(--nx-shadow-lg);
    pointer-events: auto;
    transition-property:
      opacity,
      translate,
      scale;
    transition-duration: var(--nx-spring-gentle-duration);
    transition-timing-function: var(--nx-spring-gentle);
    @starting-style {
      opacity: 0;
      translate: 0 calc(16px * var(--nx-motion));
      scale: calc(1 - 0.05 * var(--nx-motion));
    }
    &[data-state=closing] {
      opacity: 0;
      translate: 0 calc(8px * var(--nx-motion));
      transition-duration: 150ms;
      transition-timing-function: var(--nx-ease-in);
    }
    &:nth-last-child(n+4) {
      display: none;
    }
  }
  .nx-snackbar-icon {
    display: inline-flex;
    flex: none;
    color: color-mix(in oklab, var(--nx-text-inverse) 70%, transparent);
    .nx-icon {
      inline-size: 1.1rem;
      block-size: 1.1rem;
    }
  }
  .nx-snackbar-message {
    flex: 1;
    min-inline-size: 0;
    margin: 0;
    font-size: var(--nx-text-sm);
    font-weight: 500;
    line-height: 1.4;
  }
  .nx-snackbar-undo {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.35rem;
    min-block-size: 2.25rem;
    padding-inline: 0.75rem;
    border: 0;
    border-radius: var(--nx-radius-md);
    background: color-mix(in oklab, var(--nx-text-inverse) 12%, transparent);
    color: inherit;
    font: 650 var(--nx-text-sm) / 1 var(--nx-font-sans);
    cursor: pointer;
    transition-property: background-color, scale;
    transition-duration: var(--nx-dur-fast), var(--nx-spring-snappy-duration);
    transition-timing-function: var(--nx-ease-out), var(--nx-spring-snappy);
    &:hover {
      background: color-mix(in oklab, var(--nx-text-inverse) 20%, transparent);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    svg {
      inline-size: 1rem;
      block-size: 1rem;
    }
    svg:dir(rtl) {
      scale: -1 1;
    }
  }
  .nx-snackbar-close {
    display: inline-grid;
    flex: none;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-md);
    background: transparent;
    color: color-mix(in oklab, var(--nx-text-inverse) 65%, transparent);
    cursor: pointer;
    &:hover {
      color: var(--nx-text-inverse);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  .nx-snackbar-timer {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 2px;
    background: color-mix(in oklab, var(--nx-text-inverse) 10%, transparent);
    i {
      display: block;
      block-size: 100%;
      background: color-mix(in oklab, var(--nx-text-inverse) 55%, transparent);
      transform-origin: left center;
      animation: nx-snackbar-drain var(--_duration, 6000ms) linear forwards;
      &:dir(rtl) {
        transform-origin: right center;
      }
    }
  }
  .nx-snackbar[data-paused] .nx-snackbar-timer i {
    animation-play-state: paused;
  }
  @keyframes nx-snackbar-drain {
    to {
      scale: 0 1;
    }
  }
  .nx-sortable {
    position: relative;
  }
  .nx-sortable-list {
    display: grid;
    gap: var(--nx-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-sortable-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: 0.55rem;
    padding-inline-end: 0.9rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-xs);
    translate: 0 calc(var(--_shift, 0px) + var(--_dy, 0px));
    transition-property:
      translate,
      scale,
      box-shadow,
      background-color;
    transition-duration:
      var(--nx-spring-gentle-duration),
      var(--nx-spring-snappy-duration),
      var(--nx-dur-base),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-gentle),
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out);
    &[data-dragging] {
      z-index: 2;
      scale: calc(1 + 0.02 * var(--nx-motion));
      box-shadow: var(--nx-shadow-lg), 0 0 0 1px var(--nx-accent-border);
      transition-duration:
        0ms,
        var(--nx-spring-snappy-duration),
        var(--nx-dur-base),
        var(--nx-dur-fast);
    }
    &[data-grabbed] {
      z-index: 1;
      background: color-mix(in oklab, var(--nx-accent-soft) 60%, var(--nx-surface));
      box-shadow: var(--nx-shadow-md), 0 0 0 2px var(--nx-accent);
    }
  }
  .nx-sortable[data-settling] .nx-sortable-item {
    transition: none;
  }
  .nx-sortable-handle {
    display: inline-grid;
    flex: none;
    place-items: center;
    inline-size: 2rem;
    block-size: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: transparent;
    color: var(--nx-text-subtle);
    cursor: grab;
    touch-action: none;
    transition: color var(--nx-dur-fast) var(--nx-ease-out), background-color var(--nx-dur-fast) var(--nx-ease-out);
    &:hover {
      color: var(--nx-text);
      background: var(--nx-surface-2);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &[aria-pressed=true] {
      color: var(--nx-accent-text);
      background: var(--nx-accent-soft);
    }
    svg {
      inline-size: 1.1rem;
      block-size: 1.1rem;
    }
  }
  .nx-sortable-item[data-dragging] .nx-sortable-handle {
    cursor: grabbing;
  }
  .nx-sortable[data-sorting] {
    user-select: none;
    -webkit-user-select: none;
  }
  .nx-sortable-body {
    flex: 1;
    min-inline-size: 0;
  }
  .nx-lightbox-grid {
    --_cols: 3;
    display: grid;
    grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
    gap: var(--nx-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    > li {
      display: grid;
    }
  }
  .nx-lightbox-thumb {
    display: block;
    inline-size: 100%;
    aspect-ratio: var(--_ratio, 4 / 3);
    margin: 0;
    padding: 0;
    overflow: clip;
    border: 0;
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface-2);
    cursor: zoom-in;
    transition: scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    img {
      display: block;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      outline: 1px solid rgb(0 0 0 / 0.1);
      outline-offset: -1px;
      border-radius: inherit;
      transition: scale var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    }
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-lightbox-thumb:hover img {
      scale: calc(1 + 0.04 * var(--nx-motion));
    }
  }
  html:has(.nx-lightbox[open]) {
    overflow: hidden;
  }
  .nx-lightbox {
    --_ink: var(--nx-ink-950);
    --_fg: var(--nx-ink-50);
    position: fixed;
    inset: 0;
    inline-size: 100%;
    max-inline-size: none;
    block-size: 100dvh;
    max-block-size: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--_fg);
    overflow: hidden;
    overscroll-behavior: contain;
    &[open] {
      display: grid;
      grid-template-rows: auto 1fr auto;
      grid-template-columns: auto 1fr auto;
    }
    &::backdrop {
      background: color-mix(in oklab, var(--_ink) calc(94% - 40% * var(--_dismiss, 0)), transparent);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }
    &[open]:not([data-morph]) {
      animation: nx-fade-in var(--nx-dur-base) var(--nx-ease-out);
      &::backdrop {
        animation: nx-fade-in var(--nx-dur-base) var(--nx-ease-out);
      }
    }
    &[data-state=closing] {
      opacity: 0;
      transition: opacity 200ms var(--nx-ease-in);
      &::backdrop {
        opacity: 0;
        transition: opacity 200ms var(--nx-ease-in);
      }
    }
  }
  .nx-lightbox-bar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-3);
    padding: var(--nx-space-3) var(--nx-space-4);
    z-index: 1;
  }
  .nx-lightbox-counter {
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
    color: color-mix(in oklab, var(--_fg) 75%, transparent);
  }
  .nx-lightbox-tools {
    display: flex;
    gap: var(--nx-space-1);
  }
  :is(.nx-lightbox-tool, .nx-lightbox-nav) {
    display: inline-grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--_fg) 10%, transparent);
    color: var(--_fg);
    cursor: pointer;
    transition-property:
      background-color,
      scale,
      opacity;
    transition-duration:
      var(--nx-dur-fast),
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-spring-snappy),
      var(--nx-ease-out);
    &:hover {
      background: color-mix(in oklab, var(--_fg) 18%, transparent);
    }
    &:active:not(:disabled) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ink-50);
      outline-offset: 2px;
    }
    &:disabled {
      opacity: 0.3;
      cursor: default;
    }
    .nx-icon {
      inline-size: 1.2rem;
      block-size: 1.2rem;
    }
  }
  .nx-lightbox-nav {
    grid-row: 2;
    align-self: center;
    margin-inline: var(--nx-space-3);
    z-index: 1;
    &[data-dir=prev] {
      grid-column: 1;
    }
    &[data-dir=next] {
      grid-column: 3;
    }
  }
  @media (pointer: coarse) {
    .nx-lightbox-nav {
      display: none;
    }
  }
  .nx-lightbox-stage {
    grid-row: 2;
    grid-column: 1 / -1;
    position: relative;
    display: grid;
    place-items: center;
    min-block-size: 0;
    padding-inline: clamp(var(--nx-space-2), 6vw, 5rem);
    overflow: hidden;
    touch-action: none;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-select: none;
    &[data-zoomed] {
      cursor: grab;
    }
    &[data-zoomed][data-gesture] {
      cursor: grabbing;
    }
  }
  .nx-lightbox-image {
    display: block;
    max-inline-size: 100%;
    max-block-size: 100%;
    inline-size: auto;
    block-size: auto;
    object-fit: contain;
    border-radius: var(--nx-radius-sm);
    outline: 1px solid rgb(255 255 255 / 0.1);
    outline-offset: -1px;
    box-shadow: var(--nx-shadow-xl);
    translate: calc(var(--_pan-x, 0px) + var(--_swipe-x, 0px)) calc(var(--_pan-y, 0px) + var(--_swipe-y, 0px));
    scale: calc(var(--_zoom, 1) * (1 - 0.12 * var(--_dismiss, 0)));
    -webkit-user-drag: none;
    transition-property: translate, scale;
    transition-duration: var(--nx-spring-gentle-duration);
    transition-timing-function: var(--nx-spring-gentle);
  }
  .nx-lightbox-stage[data-gesture] .nx-lightbox-image {
    transition-duration: 0ms;
  }
  .nx-lightbox-stage[data-gesture=wheel] .nx-lightbox-image {
    transition-duration: 120ms;
    transition-timing-function: var(--nx-ease-out);
  }
  .nx-lightbox-stage[data-nav=next] .nx-lightbox-image {
    animation: nx-lightbox-from-end 320ms cubic-bezier(0.2, 0, 0, 1);
  }
  .nx-lightbox-stage[data-nav=prev] .nx-lightbox-image {
    animation: nx-lightbox-from-start 320ms cubic-bezier(0.2, 0, 0, 1);
  }
  @keyframes nx-lightbox-from-end {
    from {
      opacity: 0;
      translate: calc(48px * var(--nx-dir) * var(--nx-motion)) 0;
    }
  }
  @keyframes nx-lightbox-from-start {
    from {
      opacity: 0;
      translate: calc(-48px * var(--nx-dir) * var(--nx-motion)) 0;
    }
  }
  .nx-lightbox-caption {
    grid-column: 1 / -1;
    max-inline-size: 48rem;
    margin: 0 auto;
    padding: var(--nx-space-3) var(--nx-space-4) var(--nx-space-5);
    color: color-mix(in oklab, var(--_fg) 82%, transparent);
    font-size: var(--nx-text-sm);
    line-height: 1.6;
    text-align: center;
    &:empty {
      display: none;
    }
  }
  ::view-transition-group(nx-lightbox-hero) {
    animation-duration: var(--nx-spring-soft-duration);
    animation-timing-function: var(--nx-spring-soft);
  }
  ::view-transition-old(nx-lightbox-hero),
  ::view-transition-new(nx-lightbox-hero) {
    block-size: 100%;
    object-fit: cover;
    overflow: clip;
  }
  .nx-compare {
    --_pos: 50%;
    position: relative;
    display: grid;
    overflow: clip;
    aspect-ratio: var(--_ratio, 16 / 10);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface-2);
    user-select: none;
    -webkit-user-select: none;
    outline: 1px solid rgb(0 0 0 / 0.1);
    outline-offset: -1px;
  }
  .nx-compare-img {
    grid-area: 1 / 1;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
    &[data-side=before] {
      clip-path: inset(0 calc(100% - var(--_pos)) 0 0);
    }
    &[data-side=before]:dir(rtl) {
      clip-path: inset(0 0 0 calc(100% - var(--_pos)));
    }
  }
  .nx-compare[data-orientation=vertical] .nx-compare-img[data-side=before] {
    clip-path: inset(0 0 calc(100% - var(--_pos)) 0);
  }
  .nx-compare-tag {
    position: absolute;
    inset-block-start: var(--nx-space-3);
    z-index: 1;
    padding: 0.3rem 0.6rem;
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--nx-ink-950) 55%, transparent);
    color: var(--nx-ink-50);
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-sans);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    pointer-events: none;
    transition: opacity var(--nx-dur-base) var(--nx-ease-out);
    &[data-side=before] {
      inset-inline-start: var(--nx-space-3);
    }
    &[data-side=after] {
      inset-inline-end: var(--nx-space-3);
    }
  }
  .nx-compare[data-orientation=vertical] .nx-compare-tag {
    &[data-side=before] {
      inset-block-start: var(--nx-space-3);
      inset-inline-start: var(--nx-space-3);
    }
    &[data-side=after] {
      inset-block: auto var(--nx-space-3);
      inset-inline-start: var(--nx-space-3);
      inset-inline-end: auto;
    }
  }
  .nx-compare-divider {
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--_pos);
    z-index: 2;
    inline-size: 2px;
    margin-inline-start: -1px;
    background: var(--nx-ink-50);
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12), 0 0 12px rgb(0 0 0 / 0.25);
    pointer-events: none;
  }
  .nx-compare[data-orientation=vertical] .nx-compare-divider {
    inset-inline: 0;
    inset-block: var(--_pos) auto;
    inline-size: auto;
    block-size: 2px;
    margin: -1px 0 0;
  }
  .nx-compare-knob {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    display: grid;
    grid-auto-flow: column;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-ink-50);
    color: var(--nx-ink-900);
    box-shadow: var(--nx-shadow-md);
    translate: -50% -50%;
    transition: scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &:dir(rtl) {
      translate: 50% -50%;
    }
    .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  .nx-compare[data-orientation=vertical] .nx-compare-knob {
    rotate: 90deg;
  }
  .nx-compare[data-dragging] .nx-compare-knob {
    scale: calc(1 - 0.06 * var(--nx-motion));
  }
  .nx-compare:has(.nx-compare-range:focus-visible) .nx-compare-knob {
    outline: 2px solid var(--nx-ring);
    outline-offset: 3px;
  }
  .nx-compare-range {
    position: absolute;
    inset: 0;
    z-index: 3;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    appearance: none;
    background: transparent;
    touch-action: pan-y;
    &::-webkit-slider-thumb {
      appearance: none;
      inline-size: 1px;
      block-size: 100%;
    }
    &::-moz-range-thumb {
      inline-size: 1px;
      block-size: 100%;
      border: 0;
    }
  }
  .nx-compare[data-orientation=vertical] .nx-compare-range {
    writing-mode: vertical-lr;
    direction: ltr;
    cursor: ns-resize;
    touch-action: pan-x;
    &::-webkit-slider-thumb {
      inline-size: 100%;
      block-size: 1px;
    }
  }
  .nx-swipe-row {
    position: relative;
    isolation: isolate;
    display: grid;
    overflow: clip;
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface-2);
    --_abs: max(var(--_x, 0px), var(--_x, 0px) * -1);
  }
  .nx-swipe-actions {
    position: absolute;
    inset-block: 0;
    z-index: 0;
    display: flex;
    inline-size: max-content;
    min-inline-size: var(--_abs);
    opacity: 0;
    transition: opacity var(--nx-dur-fast) var(--nx-ease-out);
    &[data-side=start] {
      inset-inline-start: 0;
    }
    &[data-side=end] {
      inset-inline-end: 0;
      flex-direction: row-reverse;
    }
  }
  .nx-swipe-row[data-side=start] .nx-swipe-actions[data-side=start],
  .nx-swipe-row[data-side=end] .nx-swipe-actions[data-side=end],
  .nx-swipe-actions:focus-within {
    opacity: 1;
  }
  .nx-swipe-action {
    --_bg: var(--nx-surface-3);
    --_fg: var(--nx-text);
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    inline-size: 4.75rem;
    padding: 0 var(--nx-space-2);
    border: 0;
    background: var(--_bg);
    color: var(--_fg);
    font: 600 var(--nx-text-xs) / 1.1 var(--nx-font-sans);
    cursor: pointer;
    transition-property:
      flex-grow,
      scale,
      background-color;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-spring-snappy),
      var(--nx-ease-out);
    &[data-tone=accent] {
      --_bg: var(--nx-accent);
      --_fg: var(--nx-accent-contrast);
    }
    &[data-tone=danger] {
      --_bg: var(--nx-danger);
      --_fg: var(--nx-accent-contrast);
    }
    &[data-tone=success] {
      --_bg: var(--nx-success);
      --_fg: var(--nx-accent-contrast);
    }
    &[data-tone=warning] {
      --_bg: var(--nx-warning);
      --_fg: var(--nx-ink-950);
    }
    &[data-tone=gold] {
      --_bg: var(--nx-gold);
      --_fg: var(--nx-gold-contrast);
    }
    &[data-primary] {
      flex-grow: 1;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: -4px;
    }
    .nx-icon {
      inline-size: 1.25rem;
      block-size: 1.25rem;
      scale: calc(0.8 + 0.2 * var(--_reveal, 0));
      transition: scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
    }
  }
  .nx-swipe-row[data-armed] .nx-swipe-action[data-primary] .nx-icon {
    scale: calc(1 + 0.15 * var(--nx-motion));
  }
  .nx-swipe-content {
    position: relative;
    z-index: 1;
    background: var(--nx-surface);
    translate: var(--_x, 0px) 0;
    touch-action: pan-y;
    transition: translate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
  }
  .nx-swipe-row[data-dragging] .nx-swipe-content {
    transition-duration: 0ms;
    cursor: grabbing;
  }
  .nx-swipe-row[data-fired] .nx-swipe-content {
    transition: translate 260ms var(--nx-ease-in);
  }
  .nx-password {
    --_tone: var(--nx-border-strong);
    --_tone-text: var(--nx-text-muted);
    --_filled: 0;
    &[data-score="0"]:not([data-empty]) {
      --_tone: var(--nx-danger);
      --_tone-text: var(--nx-danger-text);
      --_filled: 1;
    }
    &[data-score="1"] {
      --_tone: var(--nx-danger);
      --_tone-text: var(--nx-danger-text);
      --_filled: 1;
    }
    &[data-score="2"] {
      --_tone: var(--nx-warning);
      --_tone-text: var(--nx-warning-text);
      --_filled: 2;
    }
    &[data-score="3"] {
      --_tone: var(--nx-info);
      --_tone-text: var(--nx-info-text);
      --_filled: 3;
    }
    &[data-score="4"] {
      --_tone: var(--nx-success);
      --_tone-text: var(--nx-success-text);
      --_filled: 4;
    }
  }
  .nx-password .nx-input-group {
    padding-inline-end: 0.3rem;
  }
  .nx-password-toggle {
    flex: none;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: transparent;
    color: var(--nx-text-muted);
    cursor: pointer;
    &:hover {
      color: var(--nx-text);
      background: var(--nx-surface-2);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 1px;
    }
    svg {
      inline-size: 1.15rem;
      block-size: 1.15rem;
    }
    &[aria-pressed=true] {
      > :not([data-off]) {
        opacity: 0;
        scale: calc(1 - 0.75 * var(--nx-motion));
        filter: blur(4px);
      }
      > [data-off] {
        opacity: 1;
        scale: 1;
        filter: none;
      }
    }
  }
  .nx-password-meter {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
  }
  .nx-password-bars {
    display: grid;
    flex: 1;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.3rem;
    i {
      position: relative;
      block-size: 0.3rem;
      overflow: clip;
      border-radius: var(--nx-radius-full);
      background: var(--nx-surface-3);
      &::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: var(--_tone);
        transform-origin: left center;
        scale: 0 1;
        transition-property: scale, background-color;
        transition-duration: var(--nx-spring-gentle-duration), var(--nx-dur-base);
        transition-timing-function: var(--nx-spring-gentle), var(--nx-ease-out);
        transition-delay: calc(var(--_i, 0) * 40ms), 0ms;
      }
      &:dir(rtl)::after {
        transform-origin: right center;
      }
      &:nth-child(1) {
        --_i: 0;
        --_n: 1;
      }
      &:nth-child(2) {
        --_i: 1;
        --_n: 2;
      }
      &:nth-child(3) {
        --_i: 2;
        --_n: 3;
      }
      &:nth-child(4) {
        --_i: 3;
        --_n: 4;
      }
    }
  }
  .nx-password[data-score="0"]:not([data-empty]) .nx-password-bars i:nth-child(-n+1)::after,
  .nx-password[data-score="1"] .nx-password-bars i:nth-child(-n+1)::after,
  .nx-password[data-score="2"] .nx-password-bars i:nth-child(-n+2)::after,
  .nx-password[data-score="3"] .nx-password-bars i:nth-child(-n+3)::after,
  .nx-password[data-score="4"] .nx-password-bars i:nth-child(-n+4)::after {
    scale: 1 1;
  }
  .nx-password-label {
    min-inline-size: 5.5rem;
    color: var(--_tone-text);
    font-size: var(--nx-text-sm);
    font-weight: 600;
    text-align: end;
    transition: color var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-password-rules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: var(--nx-space-1) var(--nx-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      display: flex;
      align-items: center;
      gap: var(--nx-space-2);
      color: var(--nx-text-muted);
      font-size: var(--nx-text-sm);
      transition: color var(--nx-dur-base) var(--nx-ease-out);
    }
    li[data-met] {
      color: var(--nx-text);
    }
  }
  .nx-password-tick {
    flex: none;
    inline-size: 1.1rem;
    block-size: 1.1rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-3);
    color: var(--nx-text-subtle);
    transition: background-color var(--nx-dur-base) var(--nx-ease-out), color var(--nx-dur-base) var(--nx-ease-out);
    svg {
      inline-size: 0.75rem;
      block-size: 0.75rem;
    }
  }
  .nx-password-rules li[data-met] .nx-password-tick {
    background: var(--nx-success);
    color: var(--nx-accent-contrast);
    > :not([data-off]) {
      opacity: 0;
      scale: calc(1 - 0.75 * var(--nx-motion));
      filter: blur(4px);
    }
    > [data-off] {
      opacity: 1;
      scale: 1;
      filter: none;
    }
  }
  .nx-pull-cord {
    --_color: var(--nx-accent);
    position: relative;
    overflow: visible;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    &[data-tone=gold] {
      --_color: var(--nx-gold);
    }
    &[data-tone=violet] {
      --_color: var(--nx-violet-500);
    }
    &[data-tone=success] {
      --_color: var(--nx-success);
    }
  }
  .nx-pull-cord-rope {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
    pointer-events: none;
    path {
      fill: none;
      stroke: color-mix(in oklab, var(--nx-text-muted) 80%, transparent);
      stroke-width: 2;
      stroke-linecap: round;
    }
  }
  .nx-pull-cord-knob {
    position: absolute;
    inset-inline-start: calc(50% - 1.05rem);
    inset-block-start: 0;
    inline-size: 2.1rem;
    block-size: 2.1rem;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: linear-gradient(var(--nx-surface-2), var(--nx-surface));
    color: var(--nx-text-muted);
    box-shadow: var(--nx-shadow-sm), inset 0 1px 0 color-mix(in oklab, white 12%, transparent);
    cursor: grab;
    will-change: transform;
    svg {
      inline-size: 1rem;
      block-size: 1rem;
      transition: rotate var(--nx-dur-base) var(--nx-spring-snappy);
    }
    &:active {
      cursor: grabbing;
    }
    &:focus-visible {
      outline: 2px solid var(--_color);
      outline-offset: 3px;
    }
  }
  .nx-pull-cord::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: calc(50% - 1.6rem);
    block-size: 0.5rem;
    border-radius: 0 0 var(--nx-radius-sm) var(--nx-radius-sm);
    background: color-mix(in oklab, var(--_color) 24%, var(--nx-surface-3));
    transition: background-color var(--nx-dur-base) var(--nx-ease-out), box-shadow var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-pull-cord[data-nx-armed] {
    .nx-pull-cord-knob {
      border-color: color-mix(in oklab, var(--_color) 55%, var(--nx-border));
      color: var(--_color);
      box-shadow:
        0 0 0 4px color-mix(in oklab, var(--_color) 18%, transparent),
        0 0 18px color-mix(in oklab, var(--_color) 45%, transparent),
        var(--nx-shadow-sm);
      svg {
        rotate: 180deg;
      }
    }
    &::before {
      box-shadow: 0 4px 14px color-mix(in oklab, var(--_color) 35%, transparent);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-slide-confirm-label > :not([data-off]) {
      animation: none;
      color: var(--nx-text-muted);
      background: none;
    }
    :is(.nx-sortable-item, .nx-swipe-content, .nx-slide-confirm-thumb, .nx-lightbox-image) {
      transition-duration: 0ms;
    }
    .nx-pull-cord-knob svg {
      transition: none;
    }
  }
}

/* src/css/blocks/charts-plus.css */
@layer nx.components {
  .nx-chart-toggle {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    margin: calc(var(--nx-space-1) * -1) calc(var(--nx-space-2) * -1);
    padding: var(--nx-space-1) var(--nx-space-2);
    border: 0;
    border-radius: var(--nx-radius-full);
    background: transparent;
    color: var(--nx-text-muted);
    font: inherit;
    cursor: pointer;
    transition-property:
      scale,
      background-color,
      color,
      opacity;
    transition-duration: var(--nx-dur-fast);
    transition-timing-function: var(--nx-ease-out);
    &:hover {
      background: var(--nx-surface-2);
      color: var(--nx-text);
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    .nx-legend-swatch {
      transition: background-color var(--nx-dur-fast) var(--nx-ease-out), box-shadow var(--nx-dur-fast) var(--nx-ease-out);
    }
    &[aria-pressed=false] {
      color: var(--nx-text-subtle);
      text-decoration: line-through;
      text-decoration-color: color-mix(in oklab, currentColor 60%, transparent);
      .nx-legend-swatch {
        background: transparent;
        box-shadow: inset 0 0 0 1.5px var(--nx-series);
      }
    }
  }
  .nx-legend-swatch[data-fill=hatched] {
    background:
      repeating-linear-gradient(
        45deg,
        var(--nx-series) 0 1.5px,
        color-mix(in oklab, var(--nx-series) 22%, transparent) 1.5px 3.5px);
  }
  .nx-legend-swatch[data-fill=duotone] {
    background: linear-gradient(var(--nx-series) 50%, color-mix(in oklab, var(--nx-series) 42%, var(--nx-surface)) 50%);
  }
  .nx-legend-swatch[data-shape=dash] {
    inline-size: 0.875rem;
    block-size: 2px;
    border-radius: 1px;
    background:
      linear-gradient(
        90deg,
        var(--nx-series) 0 40%,
        transparent 40% 60%,
        var(--nx-series) 60%);
  }
  .nx-chart-tooltip[data-frost] {
    border-color: var(--nx-glass-border, var(--nx-border));
    background: color-mix(in oklab, var(--nx-surface) 74%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    box-shadow: var(--nx-shadow-lg), inset 0 1px 0 color-mix(in oklab, #fff 14%, transparent);
  }
  .nx-chart-tooltip-row[data-total] {
    margin-block-start: var(--nx-space-1);
    padding-block-start: var(--nx-space-1);
    border-block-start: 1px solid var(--nx-border);
    .nx-chart-tooltip-key {
      background: transparent;
    }
  }
  .nx-chart-tooltip-key[data-shape=dash] {
    background:
      linear-gradient(
        90deg,
        var(--nx-series) 0 40%,
        transparent 40% 60%,
        var(--nx-series) 60%);
  }
  .nx-chart-tooltip-key[data-shape=rect] {
    block-size: 0.5rem;
    inline-size: 0.5rem;
    border-radius: 2px;
  }
  .nx-chart-ping {
    fill: var(--nx-series, var(--nx-chart-1));
    stroke: var(--nx-surface);
    stroke-width: 2;
  }
  .nx-chart-ping-ring {
    fill: var(--nx-series, var(--nx-chart-1));
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: nx-chart-ping 2s var(--nx-ease-out) 1.2s infinite;
  }
  @keyframes nx-chart-ping {
    0% {
      opacity: 0.45;
      scale: 1;
    }
    80%, 100% {
      opacity: 0;
      scale: 3.4;
    }
  }
  .nx-chart-marker {
    pointer-events: none;
    transition: opacity var(--nx-dur-base) var(--nx-ease-out) 900ms;
    circle {
      fill: var(--nx-surface);
      stroke: var(--nx-series, var(--nx-chart-1));
      stroke-width: 2;
    }
    rect {
      fill: var(--nx-surface);
      stroke: var(--nx-border);
      stroke-width: 1;
    }
    text {
      fill: var(--nx-text);
      font-size: 10.5px;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }
    .nx-chart-marker-kind {
      fill: var(--nx-text-subtle);
      font-weight: 500;
    }
  }
  .nx-chart-hitband {
    fill: transparent;
  }
  .nx-chart-hover {
    fill: var(--nx-text);
    fill-opacity: 0;
    transition: fill-opacity var(--nx-dur-fast) var(--nx-ease-out);
    &[data-active] {
      fill-opacity: 0.04;
    }
  }
  .nx-chart-layer {
    stroke: none;
    transition: opacity var(--nx-dur-base) var(--nx-ease-out), translate 900ms var(--nx-ease-out);
    transition-delay: calc(var(--nx-i, 0) * 80ms + 200ms), calc(var(--nx-i, 0) * 80ms + 200ms);
  }
  .nx-chart-layer[data-fill=solid] {
    opacity: 0.85;
  }
  .nx-stacked-area .nx-chart-line {
    stroke-width: 1.5;
  }
  :where(.nx-js) .nx-chart[data-nx-reveal]:not([data-nx-revealed]) .nx-chart-layer {
    opacity: 0;
    translate: 0 calc(10px * var(--nx-motion));
  }
  .nx-chart-col {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transition: scale var(--nx-spring-gentle-duration) var(--nx-spring-gentle), opacity var(--nx-dur-base) var(--nx-ease-out);
    transition-delay: calc(min(var(--nx-i, 0), 14) * 55ms), 0ms;
  }
  .nx-stacked-bar[data-orientation=horizontal] .nx-chart-col {
    transform-origin: 0% 50%;
  }
  .nx-stacked-bar[data-orientation=horizontal][data-rtl] .nx-chart-col {
    transform-origin: 100% 50%;
  }
  .nx-chart-seg {
    stroke: var(--nx-surface);
    stroke-width: 1.25;
    paint-order: stroke;
    transition: filter var(--nx-dur-fast) var(--nx-ease-out);
  }
  .nx-chart-seg-label {
    fill: var(--nx-text);
    font-size: 10.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    paint-order: stroke;
    stroke: var(--nx-surface);
    stroke-width: 3px;
    stroke-linejoin: round;
    pointer-events: none;
  }
  :is(.nx-stacked-bar, .nx-composed-chart)[data-active] .nx-chart-col:not([data-active]) {
    opacity: 0.45;
  }
  .nx-chart-col[data-active] .nx-chart-seg {
    filter: brightness(1.06) saturate(1.08);
  }
  :where(.nx-js) .nx-stacked-bar[data-nx-reveal]:not([data-nx-revealed]) .nx-chart-col {
    scale: 1 0;
  }
  :where(.nx-js) .nx-stacked-bar[data-orientation=horizontal][data-nx-reveal]:not([data-nx-revealed]) .nx-chart-col {
    scale: 0 1;
  }
  :where(.nx-js) .nx-composed-chart[data-nx-reveal]:not([data-nx-revealed]) .nx-chart-col {
    scale: 1 0;
  }
  .nx-chart-cat {
    fill: var(--nx-text-muted);
    font-size: 11px;
  }
  .nx-chart-axis-title {
    fill: var(--nx-text-subtle);
    font-size: 10.5px;
    font-weight: 500;
  }
  .nx-composed-chart .nx-chart-line {
    stroke-width: 2.25;
  }
  .nx-chart-dot {
    fill: var(--nx-surface);
    stroke: var(--nx-series, var(--nx-chart-1));
    stroke-width: 2;
    transition: r var(--nx-dur-fast) var(--nx-ease-out);
    &[data-active] {
      r: 5;
      fill: var(--nx-series, var(--nx-chart-1));
      stroke: var(--nx-surface);
    }
  }
  .nx-chart-future {
    fill: var(--nx-surface-2);
    opacity: 0.55;
  }
  .nx-chart-forecast {
    fill: none;
    stroke: var(--nx-series, var(--nx-chart-1));
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 5 6;
    vector-effect: non-scaling-stroke;
    transition: opacity 500ms var(--nx-ease-out) 1000ms;
    &[data-animate] {
      animation: nx-chart-march 900ms linear infinite;
    }
  }
  @keyframes nx-chart-march {
    to {
      stroke-dashoffset: -11;
    }
  }
  .nx-chart-band {
    fill: var(--nx-series, var(--nx-chart-1));
    fill-opacity: 0.13;
    stroke: var(--nx-series, var(--nx-chart-1));
    stroke-opacity: 0.25;
    stroke-width: 1;
    stroke-dasharray: 2 3;
    vector-effect: non-scaling-stroke;
    transition: opacity 600ms var(--nx-ease-out) 900ms;
  }
  .nx-chart-today {
    line {
      stroke: var(--nx-text-subtle);
      stroke-width: 1;
      stroke-dasharray: 3 3;
      vector-effect: non-scaling-stroke;
    }
    rect {
      fill: var(--nx-text);
    }
    text {
      fill: var(--nx-bg);
      font-size: 10px;
      font-weight: 600;
    }
  }
  :where(.nx-js) .nx-chart[data-nx-reveal]:not([data-nx-revealed]) :is(.nx-chart-forecast, .nx-chart-band, .nx-chart-marker, .nx-chart-ping, .nx-chart-ping-ring) {
    opacity: 0;
  }
  .nx-chart-ping {
    transition: opacity var(--nx-dur-base) var(--nx-ease-out) 1000ms;
  }
  .nx-brush {
    --_pad-start: 44px;
    --_pad-end: 12px;
    position: relative;
    direction: ltr;
    block-size: var(--nx-brush-height, 3.5rem);
    margin-inline: var(--_pad-start) var(--_pad-end);
    border-radius: var(--nx-radius-sm);
    background: color-mix(in oklab, var(--nx-surface-2) 70%, transparent);
    box-shadow: inset 0 0 0 1px var(--nx-border);
    touch-action: none;
  }
  .nx-brush-svg {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
    pointer-events: none;
    .nx-chart-line {
      stroke-width: 1.25;
      stroke-dasharray: none;
    }
    .nx-chart-area {
      fill-opacity: 0.14;
      opacity: 1;
      translate: none;
    }
  }
  .nx-brush-shade {
    position: absolute;
    inset-block: 0;
    background: color-mix(in oklab, var(--nx-bg) 58%, transparent);
    pointer-events: none;
    transition: inline-size 80ms linear, left 80ms linear;
    &[data-edge=start] {
      left: 0;
      border-start-start-radius: inherit;
      border-end-start-radius: inherit;
    }
    &[data-edge=end] {
      right: 0;
      border-start-end-radius: inherit;
      border-end-end-radius: inherit;
    }
  }
  .nx-brush-window {
    appearance: none;
    position: absolute;
    inset-block: 0;
    z-index: 1;
    min-inline-size: 6px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--nx-accent-border, var(--nx-accent));
    border-radius: var(--nx-radius-sm);
    background: color-mix(in oklab, var(--nx-accent) 8%, transparent);
    cursor: grab;
    transition: background-color var(--nx-dur-fast) var(--nx-ease-out), box-shadow var(--nx-dur-fast) var(--nx-ease-out);
    &:hover {
      background: color-mix(in oklab, var(--nx-accent) 13%, transparent);
    }
    &[data-dragging] {
      cursor: grabbing;
      background: color-mix(in oklab, var(--nx-accent) 16%, transparent);
      box-shadow: var(--nx-shadow-glow);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-brush-input {
    --_thumb: 10px;
    appearance: none;
    position: absolute;
    inset-block: 0;
    left: calc(var(--_thumb) / -2);
    z-index: 2;
    inline-size: calc(100% + var(--_thumb));
    block-size: 100%;
    margin: 0;
    background: transparent;
    pointer-events: none;
    outline: none;
    &::-webkit-slider-runnable-track {
      block-size: 100%;
      background: transparent;
      border: 0;
    }
    &::-moz-range-track {
      block-size: 100%;
      background: transparent;
      border: 0;
    }
    &::-webkit-slider-thumb {
      appearance: none;
      inline-size: var(--_thumb);
      block-size: 70%;
      margin-block-start: 0;
      border: 0;
      border-radius: 4px;
      background: var(--nx-surface);
      box-shadow: 0 0 0 1px var(--nx-border-strong), var(--nx-shadow-sm);
      pointer-events: auto;
      cursor: ew-resize;
      translate: 0 21%;
      transition: scale var(--nx-dur-fast) var(--nx-ease-out), box-shadow var(--nx-dur-fast) var(--nx-ease-out);
    }
    &::-moz-range-thumb {
      inline-size: var(--_thumb);
      block-size: 70%;
      border: 0;
      border-radius: 4px;
      background: var(--nx-surface);
      box-shadow: 0 0 0 1px var(--nx-border-strong), var(--nx-shadow-sm);
      pointer-events: auto;
      cursor: ew-resize;
    }
    &:active::-webkit-slider-thumb {
      scale: calc(1 + 0.08 * var(--nx-motion)) calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible::-webkit-slider-thumb {
      box-shadow: 0 0 0 2px var(--nx-ring), var(--nx-shadow-sm);
    }
    &:focus-visible::-moz-range-thumb {
      box-shadow: 0 0 0 2px var(--nx-ring), var(--nx-shadow-sm);
    }
  }
  .nx-brush-readout {
    display: flex;
    justify-content: space-between;
    gap: var(--nx-space-3);
    margin: 0;
    padding-inline-start: 44px;
    font-size: var(--nx-text-xs);
    color: var(--nx-text-muted);
    font-variant-numeric: tabular-nums;
    output {
      color: var(--nx-text);
      font-weight: 600;
    }
  }
  .nx-brush-chart .nx-chart-svg path {
    transition: none;
  }
  .nx-radar .nx-chart-svg {
    max-inline-size: var(--nx-radar-size, 22rem);
    margin-inline: auto;
  }
  .nx-radar .nx-chart-plot {
    display: grid;
    justify-items: center;
  }
  .nx-radar-ring {
    fill: none;
    stroke: var(--nx-chart-grid);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    &:nth-child(even) {
      fill: color-mix(in oklab, var(--nx-surface-2) 55%, transparent);
    }
  }
  .nx-radar-spoke {
    stroke: var(--nx-chart-grid);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    transition: stroke var(--nx-dur-fast) var(--nx-ease-out);
    &[data-active] {
      stroke: var(--nx-border-strong);
    }
  }
  .nx-radar-label {
    fill: var(--nx-text-muted);
    font-size: 11px;
    transition: fill var(--nx-dur-fast) var(--nx-ease-out);
    &[data-active] {
      fill: var(--nx-text);
      font-weight: 600;
    }
  }
  .nx-radar-shape {
    fill: var(--nx-series, var(--nx-chart-1));
    fill-opacity: 0.16;
    stroke: var(--nx-series, var(--nx-chart-1));
    stroke-width: 2;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transform-box: view-box;
    transform-origin: 50% 50%;
    transition:
      scale var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      opacity var(--nx-dur-base) var(--nx-ease-out),
      fill-opacity var(--nx-dur-fast) var(--nx-ease-out);
    transition-delay:
      calc(var(--nx-i, 0) * 120ms),
      calc(var(--nx-i, 0) * 120ms),
      0ms;
    &[data-off] {
      opacity: 0;
      scale: 0.92;
    }
  }
  .nx-radar:has(.nx-chart-toggle:hover) .nx-radar-shape {
    fill-opacity: 0.08;
  }
  .nx-radar-dot {
    fill: var(--nx-series, var(--nx-chart-1));
    stroke: var(--nx-surface);
    stroke-width: 2;
    opacity: 0;
    transition: opacity var(--nx-dur-fast) var(--nx-ease-out);
    &[data-active] {
      opacity: 1;
    }
  }
  :where(.nx-js) .nx-radar[data-nx-reveal]:not([data-nx-revealed]) .nx-radar-shape {
    opacity: 0;
    scale: calc(1 - 0.7 * var(--nx-motion));
  }
  .nx-radial-bar-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-5) var(--nx-space-8);
  }
  .nx-radial-bar-dial {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: var(--nx-radial-size, 13rem);
    aspect-ratio: 1;
    flex: none;
    .nx-chart-svg {
      grid-area: 1 / 1;
    }
  }
  .nx-radial-track {
    fill: none;
    stroke: var(--nx-surface-3);
    stroke-width: var(--_t);
    stroke-linecap: round;
  }
  .nx-radial-value {
    fill: none;
    stroke: var(--nx-series, var(--nx-chart-1));
    stroke-width: var(--_t);
    stroke-linecap: round;
    stroke-dasharray: var(--_v) 100;
    transition:
      stroke-dasharray 1200ms var(--nx-ease-out) calc(var(--nx-i, 0) * 110ms),
      opacity var(--nx-dur-base) var(--nx-ease-out),
      stroke-width var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &[data-empty] {
      opacity: 0;
    }
    &[data-active] {
      stroke-width: calc(var(--_t) + 1.5);
    }
  }
  .nx-radial-bar[data-active] .nx-radial-value:not([data-active]) {
    opacity: 0.4;
  }
  :where(.nx-js) .nx-radial-bar[data-nx-reveal]:not([data-nx-revealed]) .nx-radial-value {
    stroke-dasharray: 0 100;
    opacity: 0;
  }
  .nx-radial-bar-center {
    grid-area: 1 / 1;
    display: grid;
    justify-items: center;
    gap: 0.1rem;
    text-align: center;
    pointer-events: none;
  }
  .nx-radial-bar-value {
    font: 700 var(--nx-text-2xl) / 1.1 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
  }
  .nx-radial-bar-label {
    max-inline-size: 7rem;
    font-size: var(--nx-text-xs);
    color: var(--nx-text-muted);
  }
  .nx-radial-bar-list {
    display: grid;
    gap: var(--nx-space-2);
    min-inline-size: min(100%, 13rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-radial-bar-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--nx-space-2) var(--nx-space-3);
    padding: var(--nx-space-1) var(--nx-space-2);
    margin-inline: calc(var(--nx-space-2) * -1);
    border-radius: var(--nx-radius-sm);
    font-size: var(--nx-text-sm);
    transition: background-color var(--nx-dur-fast) var(--nx-ease-out);
    &[data-active] {
      background: var(--nx-surface-2);
    }
    strong {
      font-variant-numeric: tabular-nums;
    }
    small {
      grid-column: 2 / -1;
      color: var(--nx-text-subtle);
      font-size: var(--nx-text-xs);
    }
  }
  .nx-chart-loading {
    position: relative;
    display: grid;
    gap: var(--nx-space-4);
    min-inline-size: 0;
  }
  .nx-chart-loading-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--nx-space-3);
  }
  .nx-chart-loading-lines {
    display: grid;
    gap: var(--nx-space-2);
  }
  .nx-chart-loading-bone {
    display: block;
    block-size: 0.7rem;
    inline-size: var(--_w, 8rem);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-3);
    &[data-size=lg] {
      block-size: 0.95rem;
    }
  }
  .nx-chart-loading-plot {
    position: relative;
    overflow: hidden;
    block-size: var(--nx-chart-loading-height, 15rem);
    border-radius: var(--nx-radius-md);
    svg {
      display: block;
      inline-size: 100%;
      block-size: 100%;
    }
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(
          90deg,
          transparent 0%,
          color-mix(in oklab, var(--nx-surface) 70%, transparent) 50%,
          transparent 100%);
      translate: calc(-100% * var(--nx-dir, 1)) 0;
      animation: nx-chart-shimmer 1.7s var(--nx-ease-in-out, ease-in-out) infinite;
    }
  }
  @keyframes nx-chart-shimmer {
    to {
      translate: calc(100% * var(--nx-dir, 1)) 0;
    }
  }
  .nx-chart-loading-grid {
    stroke: var(--nx-chart-grid);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }
  .nx-chart-loading-shape {
    fill: var(--nx-surface-3);
  }
  .nx-chart-loading-wash {
    fill: var(--nx-surface-2);
  }
  .nx-chart-loading-line {
    fill: none;
    stroke: var(--nx-surface-3);
    stroke-width: 3;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }
  .nx-chart-loading-ring {
    fill: none;
    stroke: var(--nx-surface-3);
    stroke-width: 14;
  }
  .nx-chart-loading[data-variant=donut] .nx-chart-loading-plot {
    inline-size: var(--nx-chart-loading-height, 12rem);
    margin-inline: auto;
    border-radius: 50%;
  }
  .nx-chart-loading-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nx-space-3);
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-chart-ping-ring {
      animation: none;
      opacity: 0.2;
      scale: 1.8;
    }
    .nx-chart-forecast[data-animate] {
      animation: none;
    }
    .nx-chart-loading-plot::after {
      animation: nx-chart-loading-pulse 2.4s ease-in-out infinite;
      translate: none;
      background: color-mix(in oklab, var(--nx-surface) 35%, transparent);
    }
    .nx-chart-col,
    .nx-radar-shape {
      transition-property: opacity;
    }
  }
  @keyframes nx-chart-loading-pulse {
    0%, 100% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
  }
  :where(.nx-js:not(.nx-live)) :is(.nx-stacked-area, .nx-stacked-bar, .nx-composed-chart, .nx-forecast, .nx-radar, .nx-radial-bar)[data-nx-reveal]:not([data-nx-revealed]) :is(.nx-chart-layer, .nx-chart-col, .nx-radar-shape, .nx-radial-value, .nx-chart-forecast, .nx-chart-band, .nx-chart-marker, .nx-chart-ping) {
    animation: nx-reveal-failsafe 1ms 2.5s forwards;
  }
  @media (forced-colors: active) {
    .nx-chart-layer,
    .nx-chart-seg,
    .nx-radial-value,
    .nx-radar-shape,
    .nx-chart-band {
      forced-color-adjust: none;
    }
    .nx-brush-window {
      border-color: Highlight;
    }
  }
}

/* src/css/blocks/effects.css */
@property --_beam-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --_reveal-hole { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@layer nx.components {
  .nx-beam {
    --nx-beam-size: 70deg;
    --nx-beam-duration: 6s;
    --nx-beam-width: 1.5px;
    --nx-beam-from: var(--nx-accent);
    --nx-beam-to: var(--nx-cyan-400);
    --nx-beam-delay: 0s;
    position: relative;
    isolation: isolate;
  }
  .nx-beam[data-tone=gold] {
    --nx-beam-from: var(--nx-gold-600);
    --nx-beam-to: var(--nx-gold-300);
  }
  .nx-beam[data-tone=violet] {
    --nx-beam-from: var(--nx-violet-500);
    --nx-beam-to: var(--nx-cyan-300);
  }
  .nx-beam[data-tone=success] {
    --nx-beam-from: var(--nx-success);
    --nx-beam-to: var(--nx-cyan-300);
  }
  .nx-beam::before,
  .nx-beam::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: var(--nx-beam-width);
    border-radius: inherit;
    pointer-events: none;
    background:
      conic-gradient(
        from var(--_beam-angle),
        transparent 0deg calc(360deg - var(--nx-beam-size)),
        color-mix(in oklab, var(--nx-beam-from) 70%, transparent) calc(360deg - var(--nx-beam-size) * 0.55),
        var(--nx-beam-to) calc(360deg - 3deg),
        transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: nx-beam-turn var(--nx-beam-duration) linear var(--nx-beam-delay) infinite;
  }
  .nx-beam::after {
    inset: calc(var(--nx-beam-width) * -3);
    padding: calc(var(--nx-beam-width) * 5);
    border-radius: inherit;
    filter: blur(5px);
    opacity: 0.55;
  }
  .nx-beam[data-reverse]::before,
  .nx-beam[data-reverse]::after {
    animation-direction: reverse;
  }
  .nx-beam[data-paused]::before,
  .nx-beam[data-paused]::after {
    animation-play-state: paused;
  }
  @keyframes nx-beam-turn {
    to {
      --_beam-angle: 360deg;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-beam::before,
    .nx-beam::after {
      animation: none;
      background:
        linear-gradient(
          135deg,
          var(--nx-beam-from),
          var(--nx-beam-to));
    }
    .nx-beam::before {
      opacity: 0.7;
    }
    .nx-beam::after {
      opacity: 0.3;
    }
  }
  .nx-goo {
    --_gap: 3px;
    display: grid;
    inline-size: min(100%, 22rem);
    margin-inline: auto;
  }
  .nx-goo:is(:hover, :focus-within),
  .nx-goo[data-state=split] {
    --_gap: 14px;
  }
  .nx-goo[data-state=merged] {
    --_gap: 3px;
  }
  .nx-goo-filter {
    position: absolute;
    inline-size: 0;
    block-size: 0;
    overflow: hidden;
  }
  .nx-goo-layer {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--_gap);
    margin: 0;
    padding: 0;
    list-style: none;
    transition: gap var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
  }
  .nx-goo-blobs {
    filter: var(--_goo);
    pointer-events: none;
  }
  .nx-goo-pill {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    inline-size: 100%;
    min-block-size: 3rem;
    padding-block: var(--nx-space-2);
    padding-inline: var(--nx-space-4) var(--nx-space-2);
    border-radius: var(--nx-radius-full);
    font-size: var(--nx-text-sm);
  }
  .nx-goo-blobs .nx-goo-pill {
    background: var(--nx-surface-inverse);
  }
  .nx-goo-blobs .nx-goo-pill > * {
    visibility: hidden;
  }
  .nx-goo-items .nx-goo-pill {
    color: var(--nx-text-inverse);
  }
  .nx-goo-icon {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--nx-text-inverse) 14%, transparent);
  }
  .nx-goo-icon svg {
    inline-size: 1rem;
    block-size: 1rem;
  }
  .nx-goo-label {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-goo-dismiss {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2rem;
    block-size: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-full);
    background: transparent;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    transition-property:
      scale,
      opacity,
      background-color;
    transition-duration: var(--nx-dur-fast);
  }
  .nx-goo-dismiss svg {
    inline-size: 1rem;
    block-size: 1rem;
  }
  .nx-goo-dismiss:hover {
    opacity: 1;
    background: color-mix(in oklab, var(--nx-text-inverse) 14%, transparent);
  }
  .nx-goo-dismiss:active {
    scale: calc(1 - 0.04 * var(--nx-motion));
  }
  .nx-goo-dismiss:focus-visible {
    outline: 2px solid var(--nx-ring);
    outline-offset: 2px;
    opacity: 1;
  }
  .nx-goo-pill[data-state=enter] {
    animation: nx-goo-in var(--nx-spring-gentle-duration) var(--nx-spring-gentle) both;
  }
  .nx-goo-pill[data-state=leave] {
    animation: nx-goo-out 220ms var(--nx-ease-in) both;
  }
  @keyframes nx-goo-in {
    from {
      translate: 0 calc(-70% * var(--nx-motion));
      scale: 0.95;
      opacity: 0;
    }
  }
  @keyframes nx-goo-out {
    to {
      translate: calc(40% * var(--nx-dir) * var(--nx-motion)) 0;
      scale: 0.95;
      opacity: 0;
    }
  }
  .nx-glitch {
    position: relative;
    display: inline-block;
    isolation: isolate;
  }
  .nx-glitch-text {
    position: relative;
  }
  .nx-glitch-layer {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    white-space: inherit;
  }
  .nx-glitch-layer[data-layer=a] {
    color: var(--nx-cyan-500);
  }
  .nx-glitch-layer[data-layer=b] {
    color: var(--nx-danger);
  }
  :is(.nx-glitch[data-trigger=hover]:hover, .nx-glitch[data-trigger=hover]:focus-visible, :is(a, button):is(:hover, :focus-visible) .nx-glitch[data-trigger=hover], .nx-glitch[data-trigger=always]) > .nx-glitch-layer {
    opacity: 0.9;
    animation: nx-glitch-a 0.9s steps(1, end) infinite;
  }
  :is(.nx-glitch[data-trigger=hover]:hover, .nx-glitch[data-trigger=hover]:focus-visible, :is(a, button):is(:hover, :focus-visible) .nx-glitch[data-trigger=hover], .nx-glitch[data-trigger=always]) > .nx-glitch-layer[data-layer=b] {
    animation-name: nx-glitch-b;
    animation-duration: 1.1s;
  }
  :is(.nx-glitch[data-trigger=hover]:hover, .nx-glitch[data-trigger=hover]:focus-visible, :is(a, button):is(:hover, :focus-visible) .nx-glitch[data-trigger=hover], .nx-glitch[data-trigger=always]) > .nx-glitch-text {
    animation: nx-glitch-jitter 0.9s steps(1, end) infinite;
  }
  .nx-glitch[data-trigger=loop] > .nx-glitch-layer {
    opacity: 0.9;
    animation: nx-glitch-burst-a 3.6s steps(1, end) infinite;
  }
  .nx-glitch[data-trigger=loop] > .nx-glitch-layer[data-layer=b] {
    animation-name: nx-glitch-burst-b;
  }
  .nx-glitch[data-trigger=loop] > .nx-glitch-text {
    animation: nx-glitch-burst-jitter 3.6s steps(1, end) infinite;
  }
  @keyframes nx-glitch-a {
    0% {
      clip-path: inset(8% 0 72% 0);
      translate: calc(-3px * var(--nx-motion)) 0;
    }
    20% {
      clip-path: inset(55% 0 20% 0);
      translate: calc(3px * var(--nx-motion)) 0;
    }
    40% {
      clip-path: inset(30% 0 52% 0);
      translate: calc(-2px * var(--nx-motion)) 0;
    }
    60% {
      clip-path: inset(78% 0 4% 0);
      translate: calc(4px * var(--nx-motion)) 0;
    }
    80% {
      clip-path: inset(18% 0 60% 0);
      translate: calc(-4px * var(--nx-motion)) 0;
    }
  }
  @keyframes nx-glitch-b {
    0% {
      clip-path: inset(62% 0 14% 0);
      translate: calc(3px * var(--nx-motion)) 0;
    }
    25% {
      clip-path: inset(12% 0 70% 0);
      translate: calc(-3px * var(--nx-motion)) 0;
    }
    50% {
      clip-path: inset(40% 0 40% 0);
      translate: calc(2px * var(--nx-motion)) 0;
    }
    75% {
      clip-path: inset(84% 0 2% 0);
      translate: calc(-4px * var(--nx-motion)) 0;
    }
  }
  @keyframes nx-glitch-jitter {
    0%, 30%, 70% {
      translate: 0 0;
    }
    10% {
      translate: calc(1px * var(--nx-motion)) 0;
    }
    50% {
      translate: calc(-1px * var(--nx-motion)) 0;
    }
  }
  @keyframes nx-glitch-burst-a {
    0%, 84%, 100% {
      clip-path: inset(50% 0 50% 0);
      translate: 0 0;
    }
    86% {
      clip-path: inset(10% 0 70% 0);
      translate: calc(-3px * var(--nx-motion)) 0;
    }
    89% {
      clip-path: inset(58% 0 16% 0);
      translate: calc(4px * var(--nx-motion)) 0;
    }
    92% {
      clip-path: inset(32% 0 48% 0);
      translate: calc(-2px * var(--nx-motion)) 0;
    }
    95% {
      clip-path: inset(76% 0 6% 0);
      translate: calc(3px * var(--nx-motion)) 0;
    }
  }
  @keyframes nx-glitch-burst-b {
    0%, 85%, 100% {
      clip-path: inset(50% 0 50% 0);
      translate: 0 0;
    }
    87% {
      clip-path: inset(64% 0 12% 0);
      translate: calc(3px * var(--nx-motion)) 0;
    }
    90% {
      clip-path: inset(14% 0 68% 0);
      translate: calc(-4px * var(--nx-motion)) 0;
    }
    94% {
      clip-path: inset(44% 0 36% 0);
      translate: calc(2px * var(--nx-motion)) 0;
    }
  }
  @keyframes nx-glitch-burst-jitter {
    0%, 85%, 91%, 97%, 100% {
      translate: 0 0;
    }
    87% {
      translate: calc(1px * var(--nx-motion)) 0;
    }
    93% {
      translate: calc(-1px * var(--nx-motion)) 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-glitch > .nx-glitch-layer,
    .nx-glitch > .nx-glitch-text {
      animation: none !important;
    }
    .nx-glitch[data-trigger=loop] > .nx-glitch-layer {
      opacity: 0;
    }
    .nx-glitch > .nx-glitch-layer[data-layer=a] {
      translate: -1px 0;
    }
    .nx-glitch > .nx-glitch-layer[data-layer=b] {
      translate: 1px 0;
    }
  }
  .nx-typewriter {
    display: inline;
  }
  .nx-typewriter-line {
    display: inline;
    white-space: pre-wrap;
  }
  .nx-typewriter-text {
    color: inherit;
  }
  .nx-typewriter-caret {
    display: inline-block;
    inline-size: max(2px, 0.08em);
    block-size: 1.05em;
    margin-inline-start: 0.06em;
    vertical-align: -0.12em;
    border-radius: 1px;
    background: var(--nx-accent);
    animation: nx-typewriter-blink 1.05s steps(1, end) infinite;
  }
  .nx-typewriter[data-caret=block] .nx-typewriter-caret {
    inline-size: 0.55em;
    opacity: 0.85;
  }
  .nx-typewriter[data-caret=none] .nx-typewriter-caret {
    display: none;
  }
  .nx-typewriter:is([data-state=typing], [data-state=deleting]) .nx-typewriter-caret {
    animation: none;
  }
  @keyframes nx-typewriter-blink {
    50% {
      opacity: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-typewriter-caret {
      animation: none;
    }
  }
  .nx-resizable {
    display: flex;
    inline-size: 100%;
    block-size: 100%;
    min-inline-size: 0;
    min-block-size: 0;
  }
  .nx-resizable[data-orientation=vertical] {
    flex-direction: column;
  }
  .nx-resizable-pane {
    position: relative;
    flex: 1 1 0px;
    min-inline-size: 0;
    min-block-size: 0;
    overflow: auto;
  }
  .nx-resizable-pane > * {
    transition: opacity var(--nx-dur-fast) var(--nx-ease-out);
  }
  .nx-resizable-pane[data-collapsed] {
    overflow: hidden;
  }
  .nx-resizable-pane[data-collapsed] > * {
    opacity: 0;
  }
  .nx-resizable[data-animating] > .nx-resizable-pane {
    transition: flex-grow var(--nx-spring-soft-duration) var(--nx-spring-soft);
  }
  .nx-resizable[data-dragging] {
    -webkit-user-select: none;
    user-select: none;
    cursor: col-resize;
  }
  .nx-resizable[data-orientation=vertical][data-dragging] {
    cursor: row-resize;
  }
  .nx-resizable[data-dragging] > .nx-resizable-pane {
    pointer-events: none;
  }
  .nx-resizable-handle {
    position: relative;
    z-index: 1;
    flex: none;
    inline-size: 1px;
    background: var(--nx-border);
    cursor: col-resize;
    touch-action: none;
    outline: none;
    transition: background-color var(--nx-dur-fast) var(--nx-ease-out);
  }
  .nx-resizable[data-orientation=vertical] > .nx-resizable-handle {
    inline-size: auto;
    block-size: 1px;
    cursor: row-resize;
  }
  .nx-resizable-handle::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline: -6px;
  }
  .nx-resizable[data-orientation=vertical] > .nx-resizable-handle::before {
    inset-block: -6px;
    inset-inline: 0;
  }
  .nx-resizable-handle::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: 6px;
    block-size: 2rem;
    translate: calc(-50% * var(--nx-dir)) -50%;
    border: 1px solid var(--nx-border-strong);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-xs);
    transition-property:
      background-color,
      border-color,
      scale;
    transition-duration: var(--nx-dur-fast);
    transition-timing-function: var(--nx-ease-out);
  }
  .nx-resizable[data-orientation=vertical] > .nx-resizable-handle::after {
    inline-size: 2rem;
    block-size: 6px;
  }
  .nx-resizable-handle:is(:hover, [data-dragging]) {
    background: var(--nx-accent-border);
  }
  .nx-resizable-handle:is(:hover, :focus-visible, [data-dragging])::after {
    border-color: var(--nx-accent);
    background: var(--nx-accent);
  }
  .nx-resizable-handle[data-dragging]::after {
    scale: 1.15;
  }
  .nx-resizable-handle:focus-visible::after {
    outline: 2px solid var(--nx-ring);
    outline-offset: 2px;
  }
  .nx-scroll-progress[data-variant=bar] {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--nx-z-sticky);
    block-size: 3px;
    pointer-events: none;
    background: color-mix(in oklab, var(--nx-accent) 12%, transparent);
  }
  .nx-scroll-progress[data-variant=bar][data-position=sticky] {
    position: sticky;
  }
  .nx-scroll-progress[data-variant=bar][data-position=static] {
    position: relative;
  }
  .nx-scroll-progress-fill {
    display: block;
    block-size: 100%;
    background: var(--nx-gradient-brand);
    transform-origin: 0 50%;
    scale: var(--nx-scroll, 0) 1;
  }
  [dir=rtl] .nx-scroll-progress-fill {
    transform-origin: 100% 50%;
  }
  @supports (animation-timeline: scroll()) {
    .nx-scroll-progress:not([data-source=element]) .nx-scroll-progress-fill {
      animation: nx-scroll-progress-fill linear both;
      animation-timeline: scroll(root block);
    }
    .nx-scroll-progress:not([data-source=element]) .nx-scroll-progress-ring-fill {
      animation: nx-scroll-progress-ring linear both;
      animation-timeline: scroll(root block);
    }
  }
  @keyframes nx-scroll-progress-fill {
    from {
      scale: 0 1;
    }
    to {
      scale: 1 1;
    }
  }
  @keyframes nx-scroll-progress-ring {
    from {
      stroke-dashoffset: 100;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
  .nx-scroll-progress[data-variant=circle] {
    position: fixed;
    inset-block-end: var(--nx-space-6);
    inset-inline-end: var(--nx-space-6);
    z-index: var(--nx-z-sticky);
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-lg), 0 0 0 1px var(--nx-border);
    cursor: pointer;
    opacity: 0;
    scale: 0.95;
    translate: 0 calc(8px * var(--nx-motion));
    pointer-events: none;
    transition-property:
      opacity,
      scale,
      translate;
    transition-duration:
      150ms,
      var(--nx-spring-snappy-duration),
      var(--nx-spring-snappy-duration);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-spring-snappy),
      var(--nx-spring-snappy);
  }
  .nx-scroll-progress[data-variant=circle][data-position=static],
  .nx-scroll-progress[data-variant=circle][data-position=sticky] {
    position: sticky;
    inset-block-end: var(--nx-space-4);
    margin-inline-start: auto;
  }
  .nx-scroll-progress[data-variant=circle][data-started] {
    opacity: 1;
    scale: 1;
    translate: 0 0;
    pointer-events: auto;
    transition-duration:
      var(--nx-dur-base),
      var(--nx-spring-snappy-duration),
      var(--nx-spring-snappy-duration);
  }
  .nx-scroll-progress[data-variant=circle]:active {
    scale: calc(1 - 0.04 * var(--nx-motion));
  }
  .nx-scroll-progress[data-variant=circle]:focus-visible {
    outline: 2px solid var(--nx-ring);
    outline-offset: 2px;
  }
  .nx-scroll-progress-ring {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    rotate: -90deg;
    fill: none;
    stroke-width: 3;
  }
  .nx-scroll-progress-ring-track {
    stroke: var(--nx-border);
  }
  .nx-scroll-progress-ring-fill {
    stroke: var(--nx-accent);
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--nx-scroll, 0) * 100);
  }
  .nx-scroll-progress[data-complete] .nx-scroll-progress-ring-fill {
    stroke: var(--nx-success);
  }
  .nx-scroll-progress-icon {
    inline-size: 1.125rem;
    block-size: 1.125rem;
  }
  .nx-auto-height {
    display: block;
  }
  .nx-auto-height[data-animating] {
    overflow: clip;
  }
  .nx-auto-height[data-collapsed] {
    block-size: 0;
    overflow: clip;
  }
  .nx-auto-height[data-collapsed] > * {
    opacity: 0;
  }
  .nx-auto-height > * {
    transition: opacity var(--nx-dur-base) var(--nx-ease-out);
  }
  @supports (interpolate-size: allow-keywords) {
    .nx-auto-height {
      interpolate-size: allow-keywords;
      transition: block-size var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    }
  }
  .nx-island {
    position: relative;
    inline-size: var(--_w, 7.5rem);
    block-size: var(--_h, 2.25rem);
    max-inline-size: 100%;
    margin-inline: auto;
    overflow: clip;
    border-radius: var(--_r, 18px);
    background: var(--nx-ink-950);
    color: var(--nx-ink-50);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--nx-ink-50) 10%, transparent), var(--nx-shadow-lg);
    transition-property:
      inline-size,
      block-size,
      border-radius;
    transition-duration: var(--nx-spring-gentle-duration);
    transition-timing-function: var(--nx-spring-gentle);
  }
  .nx-island[data-instant],
  .nx-island[data-instant] > .nx-island-view {
    transition: none;
  }
  .nx-island-view {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    inline-size: max-content;
    max-inline-size: min(26rem, calc(100vw - 2rem));
    translate: calc(-50% * var(--nx-dir)) 0;
    padding-block: var(--nx-space-2);
    padding-inline: var(--nx-space-3);
    opacity: 0;
    scale: 0.96;
    filter: blur(4px);
    transition-property:
      opacity,
      scale,
      filter;
    transition-duration:
      150ms,
      150ms,
      150ms;
    transition-timing-function: var(--nx-ease-out);
  }
  .nx-island-view[data-current] {
    opacity: 1;
    scale: 1;
    filter: none;
    transition-duration:
      var(--nx-dur-base),
      var(--nx-spring-gentle-duration),
      var(--nx-dur-base);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-spring-gentle),
      var(--nx-ease-out);
    transition-delay: 70ms;
  }
  .nx-island-view[data-size=expanded] {
    padding: var(--nx-space-4);
    min-inline-size: min(20rem, calc(100vw - 2rem));
  }
  .nx-island-row {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
  }
  .nx-island-row[data-spread] {
    justify-content: space-between;
  }
  .nx-island-stack {
    display: grid;
    gap: var(--nx-space-1);
    min-inline-size: 0;
  }
  .nx-island-title {
    font-weight: 600;
    font-size: var(--nx-text-sm);
    line-height: 1.3;
  }
  .nx-island-sub {
    font-size: var(--nx-text-xs);
    color: color-mix(in oklab, var(--nx-ink-50) 62%, transparent);
  }
  .nx-island-figure {
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-mono);
    font-variant-numeric: tabular-nums;
  }
  .nx-island-avatar {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-gradient-brand);
    color: var(--nx-ink-50);
    font-weight: 700;
  }
  .nx-island-dot {
    flex: none;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-success);
  }
  .nx-island-actions {
    display: flex;
    gap: var(--nx-space-3);
    margin-block-start: var(--nx-space-3);
  }
  .nx-island-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    min-block-size: 2.5rem;
    padding-inline: var(--nx-space-4);
    border: 0;
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--nx-ink-50) 14%, transparent);
    color: var(--nx-ink-50);
    font: inherit;
    font-size: var(--nx-text-sm);
    font-weight: 600;
    cursor: pointer;
    transition-property: scale, background-color;
    transition-duration: var(--nx-dur-fast);
  }
  .nx-island-btn[data-icon-only] {
    inline-size: 2.5rem;
    padding: 0;
  }
  .nx-island-btn svg {
    inline-size: 1.125rem;
    block-size: 1.125rem;
  }
  .nx-island-btn:hover {
    background: color-mix(in oklab, var(--nx-ink-50) 22%, transparent);
  }
  .nx-island-btn[data-tone=danger] {
    background: var(--nx-danger);
  }
  .nx-island-btn[data-tone=success] {
    background: var(--nx-success);
  }
  .nx-island-btn:active {
    scale: calc(1 - 0.04 * var(--nx-motion));
  }
  .nx-island-btn:focus-visible,
  .nx-island-toggle:focus-visible {
    outline: 2px solid var(--nx-ring);
    outline-offset: 2px;
  }
  .nx-island-toggle {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    inline-size: 100%;
    padding: 0;
    border: 0;
    border-radius: inherit;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
  }
  .nx-island-wave {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    block-size: 1rem;
  }
  .nx-island-wave > i {
    inline-size: 3px;
    block-size: 100%;
    border-radius: 2px;
    background: var(--nx-success);
    transform-origin: 50% 50%;
    animation: nx-island-wave 0.9s var(--nx-ease-in-out) infinite alternate;
    animation-delay: calc(var(--nx-i, 0) * -0.17s);
  }
  @keyframes nx-island-wave {
    from {
      scale: 1 0.3;
    }
    to {
      scale: 1 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-island-wave > i {
      animation: none;
      scale: 1 0.6;
    }
  }
  .nx-tour {
    position: fixed;
    inset: 0;
    z-index: var(--nx-z-overlay);
  }
  .nx-tour[popover] {
    inline-size: auto;
    block-size: auto;
    max-inline-size: none;
    max-block-size: none;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: visible;
    background: transparent;
    color: inherit;
  }
  .nx-tour-catcher {
    position: fixed;
    inset: 0;
  }
  .nx-tour-hole {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--_w, 0px);
    height: var(--_h, 0px);
    translate: var(--_x, 50vw) var(--_y, 50vh);
    border-radius: var(--nx-radius-lg);
    box-shadow:
      0 0 0 2px var(--nx-accent),
      0 0 0 6px color-mix(in oklab, var(--nx-accent) 25%, transparent),
      0 0 0 200vmax color-mix(in oklab, var(--nx-ink-950) 58%, transparent);
    pointer-events: none;
    animation: nx-tour-dim var(--nx-dur-base) var(--nx-ease-out) both;
    transition-property:
      translate,
      width,
      height;
    transition-duration: var(--nx-spring-gentle-duration);
    transition-timing-function: var(--nx-spring-gentle);
  }
  .nx-tour[data-centered] .nx-tour-hole {
    --_w: 0px;
    --_h: 0px;
    --_x: 50vw;
    --_y: 50vh;
    box-shadow: 0 0 0 200vmax color-mix(in oklab, var(--nx-ink-950) 58%, transparent);
  }
  @keyframes nx-tour-dim {
    from {
      opacity: 0;
    }
  }
  .nx-tour-pop {
    position: fixed;
    inline-size: min(22rem, calc(100vw - 24px));
    display: grid;
    gap: var(--nx-space-3);
    padding: var(--nx-space-5);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-xl);
    transform-origin: var(--nx-origin, 50% 0);
    outline: none;
    animation: nx-tour-pop-in var(--nx-spring-snappy-duration) var(--nx-spring-snappy) both;
  }
  .nx-tour-pop[data-centered] {
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    transform-origin: 50% 50%;
  }
  .nx-tour-pop:focus-visible {
    outline: 2px solid var(--nx-ring);
    outline-offset: 2px;
  }
  @keyframes nx-tour-pop-in {
    from {
      opacity: 0;
      scale: 0.95;
    }
  }
  .nx-tour-step {
    margin: 0;
    font-size: var(--nx-text-xs);
    font-weight: 600;
    color: var(--nx-accent-text);
  }
  .nx-tour-title {
    margin: 0;
    font: 700 var(--nx-text-lg) / 1.3 var(--nx-font-display);
  }
  .nx-tour-body {
    margin: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    line-height: 1.6;
  }
  .nx-tour-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-3);
    margin-block-start: var(--nx-space-1);
  }
  .nx-tour-dots {
    display: flex;
    gap: 6px;
  }
  .nx-tour-dots > i {
    inline-size: 6px;
    block-size: 6px;
    border-radius: var(--nx-radius-full);
    background: var(--nx-border-strong);
    transition-property: inline-size, background-color;
    transition-duration: var(--nx-spring-snappy-duration);
    transition-timing-function: var(--nx-spring-snappy);
  }
  .nx-tour-dots > i[data-current] {
    inline-size: 18px;
    background: var(--nx-accent);
  }
  .nx-tour-actions {
    display: flex;
    gap: var(--nx-space-2);
  }
  .nx-image-reveal {
    position: relative;
    isolation: isolate;
    overflow: clip;
    aspect-ratio: var(--_ratio, 4 / 3);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface-2);
    outline: 1px solid color-mix(in oklab, var(--nx-text) 10%, transparent);
    outline-offset: -1px;
  }
  .nx-image-reveal-placeholder,
  .nx-image-reveal-img,
  .nx-image-reveal-noise {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
  }
  .nx-image-reveal-placeholder {
    object-fit: cover;
    filter: blur(20px) saturate(1.2);
    scale: 1.12;
    transition: opacity 600ms var(--nx-ease-out);
  }
  div.nx-image-reveal-placeholder {
    background: var(--nx-gradient-aurora);
    opacity: 0.45;
  }
  .nx-image-reveal-img {
    object-fit: cover;
    opacity: 0;
    filter: blur(18px);
    scale: calc(1 + 0.06 * var(--nx-motion));
    transition-property:
      opacity,
      filter,
      scale;
    transition-duration:
      450ms,
      800ms,
      var(--nx-spring-soft-duration);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-soft);
  }
  .nx-image-reveal-noise {
    color: var(--nx-text);
    image-rendering: pixelated;
    opacity: 0.85;
    --_reveal-hole: 0%;
    -webkit-mask-image:
      radial-gradient(
        circle at 50% 50%,
        transparent var(--_reveal-hole),
        #000 calc(var(--_reveal-hole) + 22%));
    mask-image:
      radial-gradient(
        circle at 50% 50%,
        transparent var(--_reveal-hole),
        #000 calc(var(--_reveal-hole) + 22%));
    transition: --_reveal-hole 900ms var(--nx-ease-out), opacity 900ms var(--nx-ease-out);
  }
  .nx-image-reveal[data-loaded]:not([data-pending]) .nx-image-reveal-img {
    opacity: 1;
    filter: none;
    scale: 1;
  }
  .nx-image-reveal[data-loaded]:not([data-pending]) .nx-image-reveal-placeholder {
    opacity: 0;
  }
  .nx-image-reveal[data-loaded]:not([data-pending]) .nx-image-reveal-noise {
    --_reveal-hole: 130%;
    opacity: 0;
  }
  .nx-image-reveal-status {
    position: absolute;
    inset-block-end: var(--nx-space-3);
    inset-inline-start: var(--nx-space-3);
    display: grid;
    gap: 6px;
    min-inline-size: 9rem;
    padding: var(--nx-space-2) var(--nx-space-3);
    border: 1px solid var(--nx-glass-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-glass);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    backdrop-filter: blur(12px) saturate(1.4);
    color: var(--nx-text);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    transition-property: opacity, translate;
    transition-duration: 150ms;
    transition-timing-function: var(--nx-ease-out);
  }
  .nx-image-reveal-status-row {
    display: flex;
    justify-content: space-between;
    gap: var(--nx-space-3);
  }
  .nx-image-reveal-status-row > span:last-child {
    font-variant-numeric: tabular-nums;
    color: var(--nx-text-muted);
  }
  .nx-image-reveal-bar {
    block-size: 3px;
    border-radius: var(--nx-radius-full);
    background: var(--nx-border);
    overflow: hidden;
  }
  .nx-image-reveal-bar > i {
    display: block;
    block-size: 100%;
    background: var(--nx-gradient-brand);
    transform-origin: 0 50%;
    scale: var(--_p, 0) 1;
    transition: scale var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
  }
  [dir=rtl] .nx-image-reveal-bar > i {
    transform-origin: 100% 50%;
  }
  .nx-image-reveal[data-loaded]:not([data-pending]) .nx-image-reveal-status {
    opacity: 0;
    translate: 0 calc(8px * var(--nx-motion));
    pointer-events: none;
  }
  .nx-image-reveal[data-error] .nx-image-reveal-status {
    color: var(--nx-danger-text);
  }
  .nx-image-reveal-error,
  .nx-image-reveal[data-error] .nx-image-reveal-label {
    display: none;
  }
  .nx-image-reveal[data-error] .nx-image-reveal-error {
    display: inline;
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-image-reveal-img {
      filter: none;
    }
    .nx-image-reveal-noise {
      -webkit-mask-image: none;
      mask-image: none;
    }
  }
}

/* src/css/blocks/cta.css */
@layer nx.components {
  .nx-cta-gradient {
    position: relative;
    isolation: isolate;
    overflow: clip;
    border-radius: var(--nx-radius-xl);
    background:
      linear-gradient(
        115deg,
        var(--nx-lapis-800),
        var(--nx-lapis-600) 38%,
        var(--nx-violet-500) 62%,
        var(--nx-violet-700));
    color: var(--nx-ink-50);
    text-align: center;
  }
  .nx-cta-gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(
        52rem 18rem at 18% -12%,
        color-mix(in oklab, var(--nx-ink-50) 17%, transparent),
        transparent 60%),
      radial-gradient(
        40rem 16rem at 88% 112%,
        color-mix(in oklab, var(--nx-ink-950) 45%, transparent),
        transparent 62%);
  }
  .nx-cta-gradient::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .nx-cta-gradient-sweep {
    position: absolute;
    inset-block: -25%;
    inset-inline-start: 0;
    z-index: 1;
    inline-size: 34%;
    pointer-events: none;
    background:
      linear-gradient(
        105deg,
        transparent,
        color-mix(in oklab, var(--nx-ink-50) 30%, transparent),
        transparent);
    transform: skewX(-18deg);
    animation: nx-cta-gradient-sweep 6.5s var(--nx-ease-in-out) infinite;
  }
  @keyframes nx-cta-gradient-sweep {
    0%, 12% {
      translate: calc(-180% * var(--nx-dir)) 0;
    }
    62%, 100% {
      translate: calc(480% * var(--nx-dir)) 0;
    }
  }
  .nx-cta-gradient-body {
    position: relative;
    z-index: 2;
    display: grid;
    gap: var(--nx-space-4);
    justify-items: center;
    padding: clamp(2.75rem, 7vw, 4.75rem) clamp(var(--nx-space-5), 5vw, var(--nx-space-16));
  }
  .nx-cta-gradient-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: 0.45rem 0.95rem;
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--nx-ink-50) 15%, transparent);
    color: var(--nx-ink-50);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--nx-ink-50) 18%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    & .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
      color: var(--nx-glow);
    }
  }
  .nx-cta-gradient-title {
    margin: 0;
    max-inline-size: 22ch;
    font: 800 clamp(1.85rem, 4.6vw, 3.1rem) / 1.15 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
    text-wrap: balance;
  }
  .nx-cta-gradient-subtitle {
    margin: 0;
    max-inline-size: 46ch;
    color: color-mix(in oklab, var(--nx-ink-50) 80%, transparent);
    font-size: var(--nx-text-md);
    line-height: 1.6;
    text-wrap: pretty;
  }
  .nx-cta-gradient-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--nx-space-3);
    margin-block-start: var(--nx-space-2);
  }
  .nx-cta-gradient-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    min-block-size: 3rem;
    padding-inline: var(--nx-space-6);
    border-radius: var(--nx-radius-full);
    background: var(--nx-ink-50);
    color: var(--nx-lapis-800);
    font: 700 var(--nx-text-sm) / 1 var(--nx-font-sans);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 2px color-mix(in oklab, var(--nx-ink-950) 30%, transparent);
    transition-property:
      translate,
      scale,
      box-shadow,
      background-color;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-spring-snappy-duration),
      var(--nx-dur-base),
      var(--nx-dur-base);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out);
    & .nx-icon {
      inline-size: 1.05rem;
      block-size: 1.05rem;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-glow);
      outline-offset: 3px;
    }
    &:active:not(:disabled, [aria-disabled=true]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &[data-variant=ghost] {
      background: color-mix(in oklab, var(--nx-ink-50) 12%, transparent);
      color: var(--nx-ink-50);
      box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--nx-ink-50) 35%, transparent);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-cta-gradient-button:not([data-variant=ghost]):hover {
      translate: 0 calc(-2px * var(--nx-motion));
      box-shadow: 0 12px 26px color-mix(in oklab, var(--nx-ink-950) 35%, transparent);
    }
    .nx-cta-gradient-button[data-variant=ghost]:hover {
      translate: 0 calc(-2px * var(--nx-motion));
      background: color-mix(in oklab, var(--nx-ink-50) 20%, transparent);
      box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--nx-ink-50) 48%, transparent), 0 12px 26px color-mix(in oklab, var(--nx-ink-950) 25%, transparent);
    }
  }
  .nx-cta-gradient[data-size=slim] {
    border-radius: var(--nx-radius-lg);
    text-align: start;
    & .nx-cta-gradient-body {
      grid-auto-flow: column;
      grid-auto-columns: auto;
      justify-content: space-between;
      align-items: center;
      gap: var(--nx-space-4);
      padding: var(--nx-space-4) var(--nx-space-6);
    }
    & .nx-cta-gradient-title {
      font-size: clamp(1.05rem, 2.6vw, 1.35rem);
      max-inline-size: none;
    }
    & .nx-cta-gradient-subtitle {
      font-size: var(--nx-text-sm);
    }
    & .nx-cta-gradient-actions {
      margin-block-start: 0;
    }
    & .nx-cta-gradient-button {
      min-block-size: 2.6rem;
      padding-inline: var(--nx-space-5);
    }
  }
  .nx-cta-gradient-slim-text {
    display: grid;
    gap: 0.2rem;
    min-inline-size: 0;
  }
  @media (max-width: 560px) {
    .nx-cta-gradient[data-size=slim] .nx-cta-gradient-body {
      grid-auto-flow: row;
      justify-items: start;
    }
    .nx-cta-gradient[data-size=slim] .nx-cta-gradient-actions {
      justify-content: flex-start;
    }
  }
  .nx-cta-terminal {
    display: grid;
    gap: var(--nx-space-8);
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  }
  .nx-cta-terminal-pitch {
    display: grid;
    gap: var(--nx-space-3);
    justify-items: start;
  }
  .nx-cta-terminal-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: 0.35rem 0.8rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-accent-soft);
    color: var(--nx-accent-text);
    font-size: var(--nx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nx-tracking-wide);
    text-transform: uppercase;
    & .nx-icon {
      inline-size: 0.95rem;
      block-size: 0.95rem;
    }
  }
  .nx-cta-terminal-title {
    margin: 0;
    font: 800 clamp(1.5rem, 3.4vw, 2.1rem) / 1.2 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
    color: var(--nx-text);
    text-wrap: balance;
  }
  .nx-cta-terminal-subtitle {
    margin: 0;
    max-inline-size: 40ch;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    line-height: 1.6;
    text-wrap: pretty;
  }
  .nx-cta-terminal-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nx-space-3);
    margin-block-start: var(--nx-space-1);
  }
  .nx-cta-terminal-window {
    --_fg: var(--nx-ink-50);
    --_muted: var(--nx-ink-400);
    --_line: var(--nx-ink-800);
    inline-size: 100%;
    overflow: clip;
    border-radius: var(--nx-radius-xl);
    background: var(--nx-ink-950);
    color: var(--_fg);
    box-shadow: var(--nx-shadow-lg);
  }
  .nx-cta-terminal-bar {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: 0.6rem 0.9rem;
    background: var(--nx-ink-900);
    border-block-end: 1px solid var(--_line);
  }
  .nx-cta-terminal-dot {
    inline-size: 0.7rem;
    aspect-ratio: 1;
    border-radius: 50%;
    &[data-r] {
      background: var(--nx-danger);
    }
    &[data-y] {
      background: var(--nx-warning);
    }
    &[data-g] {
      background: var(--nx-success);
    }
  }
  .nx-cta-terminal-tab {
    margin-inline-start: var(--nx-space-1);
    color: var(--_muted);
    font: 500 var(--nx-text-xs) / 1 var(--nx-font-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-cta-terminal-copy {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-1);
    margin-inline-start: auto;
    padding: 0.38rem 0.65rem;
    border: 0;
    border-radius: var(--nx-radius-sm);
    background: transparent;
    color: var(--_muted);
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-mono);
    white-space: nowrap;
    cursor: pointer;
    transition-property:
      color,
      background-color,
      scale;
    transition-duration:
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-spring-snappy-duration);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-snappy);
    &:hover {
      color: var(--_fg);
      background: var(--nx-ink-850);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-glow);
      outline-offset: 1px;
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &[data-copied] {
      color: var(--nx-success);
    }
    & .nx-icon {
      inline-size: 0.85rem;
      block-size: 0.85rem;
    }
  }
  :is(.nx-cta-terminal-copy-icons, .nx-cta-terminal-copy-text) {
    display: inline-grid;
    place-items: center;
    > * {
      grid-area: 1 / 1;
      display: inline-grid;
      place-items: center;
      transition-property:
        scale,
        opacity,
        filter;
      transition-duration: 300ms;
      transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
    }
    > [data-off] {
      opacity: 0;
      scale: calc(1 - 0.75 * var(--nx-motion));
      filter: blur(4px);
    }
  }
  .nx-cta-terminal-copy[data-copied] :is(.nx-cta-terminal-copy-icons, .nx-cta-terminal-copy-text) {
    > :not([data-off]) {
      opacity: 0;
      scale: calc(1 - 0.75 * var(--nx-motion));
      filter: blur(4px);
    }
    > [data-off] {
      opacity: 1;
      scale: 1;
      filter: none;
    }
  }
  .nx-cta-terminal-screen {
    min-block-size: 9rem;
    padding: var(--nx-space-4) var(--nx-space-5);
    font: 500 var(--nx-text-sm) / 1.95 var(--nx-font-mono);
    & p {
      margin: 0;
      overflow-wrap: anywhere;
    }
  }
  .nx-cta-terminal-prompt {
    color: var(--nx-success);
    margin-inline-end: 0.15em;
  }
  .nx-cta-terminal-command {
    color: var(--_fg);
  }
  .nx-cta-terminal-caret {
    display: inline-block;
    inline-size: 0.55em;
    block-size: 1.05em;
    margin-inline-start: 0.08em;
    background: var(--nx-glow);
    vertical-align: text-bottom;
    animation: nx-cta-terminal-blink 1.1s steps(2) infinite;
  }
  @keyframes nx-cta-terminal-blink {
    50% {
      opacity: 0;
    }
  }
  .nx-cta-terminal-output {
    color: var(--_muted);
    opacity: 0;
    translate: 0 calc(4px * var(--nx-motion));
    transition: opacity var(--nx-dur-base) var(--nx-ease-out), translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    transition-delay: calc(var(--nx-i, 0) * var(--nx-stagger));
    &[data-on] {
      opacity: 1;
      translate: 0 0;
    }
    & b {
      color: var(--nx-success);
      font-weight: 500;
    }
    & i {
      color: var(--nx-glow);
      font-style: normal;
    }
  }
  .nx-cta-image {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    overflow: clip;
    min-block-size: clamp(21rem, 46vw, 27rem);
    border-radius: var(--nx-radius-xl);
    color: var(--nx-ink-50);
  }
  .nx-cta-image-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    inline-size: 100%;
    block-size: 100%;
    & :is(.nx-cta-image-stars, .nx-cta-image-sun, .nx-cta-image-hills-far, .nx-cta-image-hills-near) {
      transition: translate var(--nx-spring-soft-duration) var(--nx-spring-soft);
    }
    & .nx-cta-image-stars {
      translate: calc(var(--nx-tx, 0) * 4px * var(--nx-motion)) calc(var(--nx-ty, 0) * 3px * var(--nx-motion));
    }
    & .nx-cta-image-sun {
      translate: calc(var(--nx-tx, 0) * 10px * var(--nx-motion)) calc(var(--nx-ty, 0) * 6px * var(--nx-motion));
    }
    & .nx-cta-image-hills-far {
      translate: calc(var(--nx-tx, 0) * -16px * var(--nx-motion)) 0;
    }
    & .nx-cta-image-hills-near {
      translate: calc(var(--nx-tx, 0) * -22px * var(--nx-motion)) 0;
    }
    & .nx-cta-image-stars circle {
      fill: var(--nx-ink-50);
    }
    & .nx-cta-image-sun-halo {
      fill: var(--nx-gold-300);
      opacity: 0.22;
    }
    & .nx-cta-image-sun-core {
      fill: var(--nx-gold-300);
    }
    & .nx-cta-image-hills-far {
      fill: var(--nx-violet-700);
    }
    & .nx-cta-image-hills-near-ridge {
      fill: var(--nx-lapis-950);
    }
    & .nx-cta-image-grid {
      stroke: var(--nx-glow);
      opacity: 0.18;
    }
    & .nx-cta-image-sky-top {
      stop-color: var(--nx-lapis-950);
    }
    & .nx-cta-image-sky-mid {
      stop-color: var(--nx-violet-600);
    }
    & .nx-cta-image-sky-horizon {
      stop-color: var(--nx-chart-2);
    }
  }
  .nx-cta-image-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(
        to top,
        color-mix(in oklab, var(--nx-ink-950) 82%, transparent),
        color-mix(in oklab, var(--nx-ink-950) 50%, transparent) 52%,
        color-mix(in oklab, var(--nx-ink-950) 26%, transparent));
  }
  .nx-cta-image-body {
    position: relative;
    z-index: 2;
    display: grid;
    gap: var(--nx-space-5);
    justify-items: center;
    text-align: center;
    padding: clamp(3.5rem, 9vw, 5.5rem) clamp(var(--nx-space-5), 5vw, var(--nx-space-12));
  }
  .nx-cta-image-title {
    margin: 0;
    max-inline-size: 20ch;
    font: 800 clamp(1.8rem, 4.4vw, 2.9rem) / 1.15 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
    text-wrap: balance;
  }
  .nx-cta-image-subtitle {
    margin: 0;
    max-inline-size: 44ch;
    color: color-mix(in oklab, var(--nx-ink-50) 75%, transparent);
    font-size: var(--nx-text-md);
    line-height: 1.6;
    text-wrap: pretty;
  }
  .nx-cta-image-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--nx-space-4) var(--nx-space-10);
  }
  .nx-cta-image-stat {
    display: grid;
    gap: 0.2rem;
  }
  .nx-cta-image-stat-value {
    font: 800 var(--nx-text-2xl) / 1.1 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
    font-variant-numeric: tabular-nums;
  }
  .nx-cta-image-stat-label {
    color: color-mix(in oklab, var(--nx-ink-50) 66%, transparent);
    font-size: var(--nx-text-xs);
  }
  .nx-cta-image-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    min-block-size: 3rem;
    padding-inline: var(--nx-space-6);
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--nx-ink-50) 18%, transparent);
    color: var(--nx-ink-50);
    font: 700 var(--nx-text-sm) / 1 var(--nx-font-sans);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--nx-ink-50) 35%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition-property:
      translate,
      scale,
      background-color,
      box-shadow;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-spring-snappy-duration),
      var(--nx-dur-base),
      var(--nx-dur-base);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out);
    & .nx-icon {
      inline-size: 1.05rem;
      block-size: 1.05rem;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-glow);
      outline-offset: 3px;
    }
    &:active:not(:disabled, [aria-disabled=true]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-cta-image-button:hover {
      translate: 0 calc(-2px * var(--nx-motion));
      background: color-mix(in oklab, var(--nx-ink-50) 26%, transparent);
      box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--nx-ink-50) 48%, transparent), 0 12px 28px color-mix(in oklab, var(--nx-ink-950) 30%, transparent);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-cta-gradient-sweep {
      animation: none;
    }
    .nx-cta-terminal-caret {
      animation: none;
    }
    .nx-cta-image-art :is(.nx-cta-image-stars, .nx-cta-image-sun, .nx-cta-image-hills-far, .nx-cta-image-hills-near) {
      transition: none;
    }
  }
}

/* src/css/blocks/flows.css */
@layer nx.components {
  .nx-flow {
    display: grid;
    gap: var(--nx-space-5);
    inline-size: min(100%, var(--nx-flow-width, 27rem));
    margin: 0;
    padding: var(--nx-space-6);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-2xl);
    background: var(--nx-surface);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-lg), inset 0 1px 0 var(--nx-highlight);
  }
  .nx-flow[data-size=wide] {
    --nx-flow-width: 34rem;
  }
  .nx-onboarding {
    --nx-flow-stage-min: 15.5rem;
  }
  .nx-checkout {
    --nx-flow-stage-min: 22rem;
  }
  .nx-auth-code {
    --nx-flow-stage-min: 12.5rem;
  }
  @media (max-width: 30rem) {
    .nx-flow {
      gap: var(--nx-space-4);
      padding: var(--nx-space-5) var(--nx-space-4);
    }
  }
  .nx-flow-top {
    display: grid;
    gap: var(--nx-space-2);
  }
  .nx-flow-bar {
    display: flex;
    gap: var(--nx-space-1);
  }
  .nx-flow-bar i {
    flex: 1;
    block-size: 0.25rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-3);
    box-shadow: inset 0 0 0 1px var(--nx-border);
    transition: background-color var(--nx-dur-slow) var(--nx-ease-out), box-shadow var(--nx-dur-slow) var(--nx-ease-out);
  }
  .nx-flow-bar i[data-on] {
    background: var(--nx-gradient-brand);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--nx-accent) 55%, transparent);
  }
  .nx-flow-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nx-space-3);
    color: var(--nx-text-muted);
    font: 600 var(--nx-text-xs) / 1.5 var(--nx-font-sans);
    font-variant-numeric: tabular-nums;
  }
  .nx-flow-meta > em {
    font-style: normal;
    color: var(--nx-accent-text);
  }
  .nx-flow-stage {
    display: grid;
    min-block-size: var(--nx-flow-stage-min, 0);
  }
  .nx-flow-step {
    grid-area: 1 / 1;
    display: grid;
    gap: var(--nx-space-3);
    align-content: start;
    min-inline-size: 0;
    translate: none;
    transition:
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      opacity var(--nx-dur-base) var(--nx-ease-out) 50ms,
      visibility 0s;
    &:not([data-pos=current]) {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition:
        translate 180ms var(--nx-ease-in),
        opacity 150ms var(--nx-ease-in),
        visibility 0s linear 180ms;
    }
    &[data-pos=before] {
      translate: calc(-24px * var(--nx-dir) * var(--nx-motion)) 0;
    }
    &[data-pos=after] {
      translate: calc(24px * var(--nx-dir) * var(--nx-motion)) 0;
    }
  }
  .nx-flow-title {
    margin: 0;
    font: 700 var(--nx-text-lg) / 1.4 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
    text-wrap: pretty;
  }
  .nx-flow-text {
    margin: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    line-height: 1.65;
    text-wrap: pretty;
  }
  .nx-flow-nav {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
  }
  .nx-flow-nav > .nx-button {
    margin-inline-start: auto;
  }
  .nx-flow-note {
    margin: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    line-height: 1.6;
  }
  .nx-flow-brand {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    color: var(--nx-text-muted);
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-sans);
  }
  .nx-flow-brand > .nx-icon {
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--nx-accent-text);
  }
  .nx-flow-done {
    display: grid;
    justify-items: center;
    gap: var(--nx-space-3);
    padding: var(--nx-space-6) var(--nx-space-4);
    text-align: center;
  }
  .nx-flow-done-ring {
    display: grid;
    place-items: center;
    inline-size: 4.5rem;
    aspect-ratio: 1;
    border-radius: var(--nx-radius-full);
    background: var(--nx-success-soft);
    color: var(--nx-success);
  }
  .nx-flow-done-ring > svg {
    inline-size: 2.4rem;
    block-size: 2.4rem;
  }
  .nx-flow-done-ring circle,
  .nx-flow-done-ring path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: nx-flow-draw 550ms var(--nx-ease-out) forwards;
  }
  .nx-flow-done-ring path {
    animation-delay: 140ms;
  }
  @keyframes nx-flow-draw {
    to {
      stroke-dashoffset: 0;
    }
  }
  .nx-flow-done-title {
    margin: 0;
    font: 700 var(--nx-text-lg) / 1.4 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
  }
  .nx-flow-done-text {
    margin: 0;
    max-inline-size: 38ch;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    line-height: 1.65;
  }
  .nx-onboarding-points {
    display: grid;
    gap: var(--nx-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-onboarding-points li {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    color: var(--nx-text);
    font-size: var(--nx-text-sm);
  }
  .nx-onboarding-points .nx-icon {
    flex: none;
    inline-size: 1.05rem;
    block-size: 1.05rem;
    color: var(--nx-success);
  }
  .nx-onboarding-roles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nx-space-2);
  }
  @media (max-width: 24rem) {
    .nx-onboarding-roles {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .nx-onboarding-role {
    position: relative;
    display: grid;
    gap: var(--nx-space-1);
    padding: var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
    color: var(--nx-text);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition-property:
      border-color,
      background-color,
      box-shadow,
      scale;
    transition-duration:
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-spring-snappy-duration);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-snappy);
    & > input {
      position: absolute;
      inset: 0;
      margin: 0;
      opacity: 0;
      cursor: pointer;
    }
    &:active:not(:disabled, [data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:has(input:focus-visible) {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:has(input:disabled) {
      opacity: 0.5;
      cursor: not-allowed;
    }
    &[data-on] {
      border-color: var(--nx-accent);
      background: var(--nx-accent-soft);
      box-shadow: inset 0 0 0 1px var(--nx-accent);
    }
    & b {
      font-size: var(--nx-text-sm);
      font-weight: 650;
      letter-spacing: var(--nx-tracking-tight);
    }
    & small {
      color: var(--nx-text-muted);
      font-size: var(--nx-text-xs);
      line-height: 1.5;
    }
  }
  .nx-onboarding-role-check {
    position: absolute;
    inset-block-start: var(--nx-space-2);
    inset-inline-end: var(--nx-space-2);
    display: grid;
    place-items: center;
    inline-size: 1.15rem;
    aspect-ratio: 1;
    border-radius: var(--nx-radius-full);
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
    opacity: 0;
    scale: calc(0.6 + 0.4 * var(--nx-motion));
    transition: opacity var(--nx-dur-fast) var(--nx-ease-out), scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
    & .nx-icon {
      inline-size: 0.65rem;
      block-size: 0.65rem;
    }
  }
  .nx-onboarding-role[data-on] .nx-onboarding-role-check {
    opacity: 1;
    scale: 1;
  }
  .nx-onboarding-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nx-space-2);
  }
  .nx-onboarding-chip {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.25rem;
    padding-inline: var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    color: var(--nx-text);
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tight);
    cursor: pointer;
    transition-property:
      border-color,
      background-color,
      color,
      scale;
    transition-duration:
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-spring-snappy-duration);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-snappy);
    &:active:not(:disabled, [data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &[aria-pressed=true] {
      border-color: var(--nx-accent);
      background: var(--nx-accent);
      color: var(--nx-accent-contrast);
    }
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-onboarding-role:hover:not([data-on], :disabled) {
      border-color: var(--nx-accent-border);
      background: var(--nx-surface-2);
    }
    .nx-onboarding-chip:hover:not([aria-pressed=true], :disabled) {
      border-color: var(--nx-accent-border);
    }
  }
  .nx-onboarding-summary {
    display: grid;
    margin: 0;
  }
  .nx-onboarding-summary > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--nx-space-1) var(--nx-space-4);
    padding-block: var(--nx-space-2);
    border-block-start: 1px solid var(--nx-border);
    font-size: var(--nx-text-sm);
  }
  .nx-onboarding-summary > div:first-child {
    border-block-start: 0;
    padding-block-start: 0;
  }
  .nx-onboarding-summary dt {
    color: var(--nx-text-muted);
  }
  .nx-onboarding-summary dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
  }
  .nx-checkout {
    --nx-flow-width: min(100%, 46rem);
  }
  .nx-checkout[data-step="3"] {
    --nx-flow-width: 27rem;
  }
  .nx-checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem;
    gap: var(--nx-space-5);
    align-items: start;
  }
  @media (max-width: 44rem) {
    .nx-checkout-grid {
      grid-template-columns: minmax(0, 1fr);
    }
    .nx-checkout-aside {
      order: -1;
      position: static;
    }
  }
  .nx-checkout-stage {
    display: grid;
    gap: var(--nx-space-3);
    min-inline-size: 0;
  }
  .nx-checkout-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nx-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--nx-text-muted);
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-sans);
  }
  .nx-checkout-crumb li {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
  }
  .nx-checkout-crumb li + li::before {
    content: "\b7";
    color: var(--nx-border-strong);
  }
  .nx-checkout-crumb li[data-now] {
    color: var(--nx-accent-text);
  }
  .nx-checkout-rows {
    display: grid;
  }
  .nx-checkout-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--nx-space-3);
    padding-block: var(--nx-space-3);
    border-block-start: 1px solid var(--nx-border);
    font-size: var(--nx-text-sm);
  }
  .nx-checkout-row:first-child {
    border-block-start: 0;
    padding-block-start: 0;
  }
  .nx-checkout-row small {
    display: block;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
  }
  .nx-checkout-row b {
    font-weight: 600;
    letter-spacing: var(--nx-tracking-tight);
  }
  .nx-checkout-qty {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-1);
    padding: var(--nx-space-1);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
  }
  .nx-checkout-qty-btn {
    display: grid;
    place-items: center;
    inline-size: 1.6rem;
    block-size: 1.6rem;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-full);
    background: transparent;
    color: var(--nx-text);
    cursor: pointer;
    transition-property:
      background-color,
      color,
      scale;
    transition-duration:
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-spring-snappy-duration);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-snappy);
    &:active:not(:disabled) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    & .nx-icon {
      inline-size: 0.75rem;
      block-size: 0.75rem;
    }
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-checkout-qty-btn:hover:not(:disabled) {
      background: var(--nx-surface-2);
    }
    .nx-checkout-remove:hover {
      background: var(--nx-danger-soft);
      color: var(--nx-danger-text);
    }
  }
  .nx-checkout-qty > b {
    min-inline-size: 1.4rem;
    text-align: center;
    font-size: var(--nx-text-sm);
    font-variant-numeric: tabular-nums;
  }
  .nx-checkout-price {
    font-weight: 650;
    font-variant-numeric: tabular-nums;
  }
  .nx-checkout-remove {
    display: grid;
    place-items: center;
    inline-size: 1.85rem;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-full);
    background: transparent;
    color: var(--nx-text-muted);
    cursor: pointer;
    transition-property:
      background-color,
      color,
      scale;
    transition-duration:
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-spring-snappy-duration);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-snappy);
    &:active:not(:disabled) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    & .nx-icon {
      inline-size: 0.9rem;
      block-size: 0.9rem;
    }
  }
  .nx-checkout-empty {
    display: grid;
    justify-items: center;
    gap: var(--nx-space-3);
    padding-block: var(--nx-space-6);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    text-align: center;
  }
  .nx-checkout-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nx-space-3);
  }
  .nx-checkout-fields > .nx-field {
    min-inline-size: 0;
  }
  .nx-checkout-fields > .nx-field:only-child,
  .nx-checkout-fields > .nx-checkout-span {
    grid-column: 1 / -1;
  }
  @media (max-width: 26rem) {
    .nx-checkout-fields {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .nx-checkout-card {
    position: relative;
    display: grid;
    gap: var(--nx-space-4);
    padding: var(--nx-space-4) var(--nx-space-5);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-gradient-brand);
    color: var(--nx-ink-50);
    overflow: clip;
  }
  .nx-checkout-card::after {
    content: "";
    position: absolute;
    inline-size: 12rem;
    aspect-ratio: 1;
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--nx-ink-50) 12%, transparent);
    inset-block-end: -6rem;
    inset-inline-end: -4rem;
  }
  .nx-checkout-card-chip {
    inline-size: 2.1rem;
    block-size: 1.5rem;
    border-radius: var(--nx-radius-xs);
    background: var(--nx-gradient-gold);
  }
  .nx-checkout-card-num {
    min-block-size: 1.2em;
    font: 600 var(--nx-text-md) / 1 var(--nx-font-mono);
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
  }
  .nx-checkout-card-foot {
    display: flex;
    justify-content: space-between;
    gap: var(--nx-space-4);
    font-size: var(--nx-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--nx-tracking-wide);
  }
  .nx-checkout-card-foot span {
    max-inline-size: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nx-checkout-decline {
    display: flex;
    gap: var(--nx-space-2);
    align-items: flex-start;
    margin: 0;
    padding: var(--nx-space-3);
    border: 1px solid var(--nx-danger);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-danger-soft);
    color: var(--nx-danger-text);
    font-size: var(--nx-text-sm);
    line-height: 1.6;
  }
  .nx-checkout-decline .nx-icon {
    flex: none;
    inline-size: 1rem;
    block-size: 1rem;
    margin-block-start: 0.15rem;
  }
  .nx-checkout-aside {
    position: sticky;
    inset-block-start: var(--nx-space-4);
    display: grid;
    gap: var(--nx-space-2);
    padding: var(--nx-space-4);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface-2);
    font-size: var(--nx-text-sm);
  }
  .nx-checkout-aside h3 {
    margin: 0 0 var(--nx-space-1);
    font: 650 var(--nx-text-sm) / 1.4 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
  }
  .nx-checkout-aside-row {
    display: flex;
    justify-content: space-between;
    gap: var(--nx-space-3);
    font-variant-numeric: tabular-nums;
  }
  .nx-checkout-aside-row > span:first-child {
    color: var(--nx-text-muted);
  }
  .nx-checkout-aside-row[data-tone=free] > span:last-child {
    color: var(--nx-success-text);
    font-weight: 650;
  }
  .nx-checkout-aside-row[data-tone=total] {
    border-block-start: 2px solid var(--nx-accent);
    margin-block-start: var(--nx-space-1);
    padding-block-start: var(--nx-space-2);
    font-weight: 650;
    font-size: var(--nx-text-md);
  }
  .nx-checkout-order {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-1) var(--nx-space-3);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface-2);
    font: 650 var(--nx-text-sm) / 1.5 var(--nx-font-mono);
    font-variant-numeric: tabular-nums;
  }
  .nx-checkout-order .nx-icon {
    inline-size: 0.95rem;
    block-size: 0.95rem;
    color: var(--nx-text-muted);
  }
  .nx-auth-code-boxes {
    display: grid;
    justify-items: center;
    padding-block: var(--nx-space-1);
  }
  .nx-auth-code-boxes .nx-otp {
    inline-size: min(100%, 17.5rem);
  }
  .nx-auth-code-hint {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    justify-self: center;
    padding: var(--nx-space-1) var(--nx-space-3);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-2);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
  }
  .nx-auth-code-hint .nx-icon {
    inline-size: 0.85rem;
    block-size: 0.85rem;
  }
  .nx-auth-code-hint b {
    font-family: var(--nx-font-mono);
    letter-spacing: 0.18em;
    color: var(--nx-text);
  }
  .nx-auth-code-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    margin: 0;
    color: var(--nx-danger-text);
    font: 600 var(--nx-text-sm) / 1.5 var(--nx-font-sans);
    text-align: center;
  }
  .nx-auth-code-error .nx-icon {
    flex: none;
    inline-size: 0.95rem;
    block-size: 0.95rem;
  }
  .nx-auth-code-resend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
  }
  .nx-auth-code-resend > b {
    font-variant-numeric: tabular-nums;
  }
  .nx-auth-code-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--nx-accent-text);
    font: 600 var(--nx-text-xs) / 1.6 var(--nx-font-sans);
    cursor: pointer;
    transition-property: color, scale;
    transition-duration: var(--nx-dur-fast), var(--nx-spring-snappy-duration);
    transition-timing-function: var(--nx-ease-out), var(--nx-spring-snappy);
    &:hover:not(:disabled) {
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    &:active:not(:disabled) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:disabled {
      color: var(--nx-text-subtle);
      cursor: default;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
      border-radius: var(--nx-radius-xs);
    }
  }
  .nx-auth-code-actions {
    display: grid;
    gap: var(--nx-space-2);
    justify-items: center;
  }
  .nx-auth-code-actions > .nx-button {
    inline-size: 100%;
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-flow-step:not([data-pos=current]) {
      translate: none;
    }
    .nx-flow-done-ring circle,
    .nx-flow-done-ring path {
      animation-duration: 1ms;
      animation-delay: 0ms;
    }
    .nx-onboarding-role-check {
      scale: 1;
    }
  }
  @media (forced-colors: active) {
    .nx-flow,
    .nx-checkout-aside {
      border-color: CanvasText;
    }
    .nx-flow-bar i {
      background: Canvas;
    }
    .nx-flow-bar i[data-on] {
      background: Highlight;
    }
    .nx-onboarding-chip[aria-pressed=true] {
      background: Highlight;
      color: HighlightText;
    }
    .nx-checkout-card {
      border: 1px solid CanvasText;
    }
  }
}

/* src/css/blocks/footers.css */
@layer nx.components {
  :is(.nx-footer-wordmark-head, .nx-footer-newsletter-head) {
    margin: 0 0 var(--nx-space-3);
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    font-weight: 650;
    letter-spacing: var(--nx-tracking-wider);
    text-transform: uppercase;
  }
  :is(.nx-footer-wordmark-list, .nx-footer-newsletter-list) {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  :is(.nx-footer-wordmark-link, .nx-footer-newsletter-link) {
    display: inline-block;
    padding-block: 0.2rem;
    border-radius: var(--nx-radius-xs);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    text-decoration: none;
    transition: color var(--nx-dur-fast) var(--nx-ease-out), translate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    &:hover {
      color: var(--nx-accent-text);
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  @media (hover: hover) and (pointer: fine) {
    :is(.nx-footer-wordmark-link, .nx-footer-newsletter-link):hover {
      translate: calc(2px * var(--nx-dir) * var(--nx-motion)) 0;
    }
  }
  .nx-footer-wordmark {
    padding-block: var(--nx-space-10) var(--nx-space-4);
    padding-inline: var(--nx-space-4);
    border-block-start: 1px solid var(--nx-border);
    background: var(--nx-bg);
    color: var(--nx-text);
  }
  .nx-footer-wordmark-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
    gap: var(--nx-space-6) var(--nx-space-8);
    max-inline-size: 72rem;
    margin-inline: auto;
  }
  .nx-footer-wordmark-col {
    min-inline-size: 0;
  }
  .nx-footer-wordmark-mark {
    margin-block: var(--nx-space-10) 0;
    overflow: clip;
    color: transparent;
    font: 800 clamp(2.6rem, 15vw, 8.75rem) / 1 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tightest);
    text-align: center;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    -webkit-text-stroke: max(1px, 0.012em) var(--nx-border-strong);
    transition: color var(--nx-dur-slower) var(--nx-ease-out), -webkit-text-stroke-color var(--nx-dur-slower) var(--nx-ease-out);
  }
  .nx-footer-wordmark:is(:hover, :focus-within) .nx-footer-wordmark-mark {
    color: var(--nx-accent);
    -webkit-text-stroke-color: var(--nx-accent);
  }
  .nx-footer-wordmark-base {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nx-space-3) var(--nx-space-6);
    align-items: center;
    justify-content: space-between;
    max-inline-size: 72rem;
    margin-block: var(--nx-space-8) 0;
    margin-inline: auto;
    padding-block-start: var(--nx-space-4);
    border-block-start: 1px solid var(--nx-border);
  }
  .nx-footer-wordmark-copy {
    margin: 0;
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
  }
  .nx-footer-wordmark-social {
    display: flex;
    gap: var(--nx-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-footer-wordmark-social-link {
    display: inline-grid;
    place-items: center;
    min-inline-size: 2rem;
    block-size: 2rem;
    padding-inline: var(--nx-space-2);
    border-radius: var(--nx-radius-full);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    text-decoration: none;
    transition-property:
      color,
      background-color,
      scale;
    transition-duration:
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-spring-snappy-duration);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-snappy);
    &:hover {
      color: var(--nx-text);
      background: var(--nx-surface-3);
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    & .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  .nx-footer-newsletter {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-block: var(--nx-space-12) var(--nx-space-6);
    padding-inline: var(--nx-space-4);
    border-block-start: 1px solid var(--nx-border);
    background-color: var(--nx-bg-subtle);
    background-image:
      radial-gradient(
        circle at 1px 1px,
        color-mix(in oklab, var(--nx-text) 8%, transparent) 1px,
        transparent 1.5px);
    background-size: 22px 22px;
    color: var(--nx-text);
    &::before {
      content: "";
      position: absolute;
      inset-block-start: -30%;
      inset-inline: 0;
      z-index: -1;
      block-size: 70%;
      pointer-events: none;
      background:
        radial-gradient(
          60% 100% at 50% 0%,
          var(--nx-accent-soft),
          transparent 70%);
    }
  }
  .nx-footer-newsletter-inner {
    display: grid;
    gap: var(--nx-space-3);
    justify-items: center;
    max-inline-size: 46rem;
    margin-inline: auto;
    text-align: center;
  }
  .nx-footer-newsletter-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: 0.3rem var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--nx-surface) 72%, transparent);
    color: var(--nx-accent-text);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    letter-spacing: var(--nx-tracking-wide);
    & i {
      inline-size: 0.4rem;
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--nx-accent);
      animation: nx-pulse 2.4s var(--nx-ease-in-out) infinite;
    }
  }
  .nx-footer-newsletter-title {
    margin: 0;
    font-family: var(--nx-font-display);
    font-size: var(--nx-text-5xl);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: var(--nx-tracking-tight);
    text-wrap: balance;
  }
  .nx-footer-newsletter-sub {
    margin: 0;
    max-inline-size: 52ch;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-md);
    text-wrap: pretty;
  }
  .nx-footer-newsletter-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nx-space-2);
    justify-content: center;
    inline-size: 100%;
    margin-block-start: var(--nx-space-2);
  }
  .nx-footer-newsletter-field {
    display: grid;
    flex: 1 1 15rem;
    gap: 0.3rem;
    text-align: start;
  }
  .nx-footer-newsletter-input {
    inline-size: 100%;
    block-size: 3rem;
    margin: 0;
    padding-inline: var(--nx-space-4);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface);
    color: var(--nx-text);
    font: inherit;
    transition: border-color var(--nx-dur-fast) var(--nx-ease-out), box-shadow var(--nx-dur-fast) var(--nx-ease-out);
    &::placeholder {
      color: var(--nx-text-subtle);
      opacity: 1;
    }
    &:focus-visible {
      outline: none;
      border-color: var(--nx-accent-border);
      box-shadow: 0 0 0 4px var(--nx-accent-soft);
    }
  }
  .nx-footer-newsletter-field[data-invalid] .nx-footer-newsletter-input {
    border-color: var(--nx-danger);
    animation: nx-shake 360ms var(--nx-ease-out);
  }
  .nx-footer-newsletter-error {
    min-block-size: 1.1em;
    color: var(--nx-danger-text);
    font-size: var(--nx-text-xs);
    font-weight: 500;
    &:empty {
      visibility: hidden;
    }
  }
  .nx-footer-newsletter-join {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    align-self: center;
    block-size: 3rem;
    padding-inline: var(--nx-space-6);
    border: 0;
    border-radius: var(--nx-radius-md);
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
    font: 700 var(--nx-text-sm) / 1 var(--nx-font-sans);
    cursor: pointer;
    transition-property: scale, background-color;
    transition-duration: var(--nx-spring-snappy-duration), var(--nx-dur-fast);
    transition-timing-function: var(--nx-spring-snappy), var(--nx-ease-out);
    &:hover {
      background: var(--nx-accent-hover);
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    & .nx-icon {
      inline-size: 1.1rem;
      block-size: 1.1rem;
    }
  }
  .nx-footer-newsletter-done {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    margin-block-start: var(--nx-space-2);
    padding: var(--nx-space-3) var(--nx-space-5);
    border: 1px solid color-mix(in oklab, var(--nx-success) 40%, transparent);
    border-radius: var(--nx-radius-md);
    background: var(--nx-success-soft);
    color: var(--nx-success-text);
    font-size: var(--nx-text-sm);
    font-weight: 600;
    animation: nx-rise var(--nx-dur-slow) var(--nx-ease-out) both;
    & .nx-icon {
      flex: none;
      inline-size: 1.15rem;
      block-size: 1.15rem;
    }
  }
  .nx-footer-newsletter-again {
    border: 0;
    padding: 0;
    background: none;
    color: inherit;
    font: 500 var(--nx-text-xs) var(--nx-font-sans);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity var(--nx-dur-fast) var(--nx-ease-out);
    &:hover {
      opacity: 1;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
      border-radius: var(--nx-radius-xs);
    }
  }
  .nx-footer-newsletter-note {
    margin: 0;
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
  }
  .nx-footer-newsletter-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nx-space-6) var(--nx-space-10);
    align-items: flex-start;
    justify-content: space-between;
    max-inline-size: 72rem;
    margin-block: var(--nx-space-12) 0;
    margin-inline: auto;
    padding-block-start: var(--nx-space-6);
    border-block-start: 1px solid var(--nx-border);
  }
  .nx-footer-newsletter-cols {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nx-space-8);
  }
  .nx-footer-newsletter-col {
    min-inline-size: 0;
  }
  .nx-footer-newsletter-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nx-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-footer-newsletter-social-link {
    display: inline-flex;
    align-items: center;
    min-inline-size: 2.1rem;
    block-size: 2.1rem;
    padding-inline: var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    text-decoration: none;
    transition-property:
      color,
      border-color,
      background-color,
      scale;
    transition-duration:
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-spring-snappy-duration);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-snappy);
    &:hover {
      color: var(--nx-text);
      border-color: var(--nx-accent-border);
      background: var(--nx-accent-soft);
    }
    &:active:not([data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-footer-minimal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nx-space-2) var(--nx-space-5);
    align-items: center;
    justify-content: center;
    padding-block: var(--nx-space-3);
    padding-inline: var(--nx-space-4);
    border-block-start: 1px solid var(--nx-border);
    background: var(--nx-bg);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    &[data-align=spread] {
      justify-content: space-between;
    }
  }
  .nx-footer-minimal-copy {
    color: inherit;
    font-size: inherit;
  }
  .nx-footer-minimal-status {
    --_tone: var(--nx-success);
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    color: inherit;
    font-size: inherit;
    text-decoration: none;
    transition: color var(--nx-dur-fast) var(--nx-ease-out);
    &[data-tone=warning] {
      --_tone: var(--nx-warning);
    }
    &[data-tone=danger] {
      --_tone: var(--nx-danger);
    }
    &:is(:hover, :focus-visible) {
      color: var(--nx-text);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
      border-radius: var(--nx-radius-xs);
    }
  }
  .nx-footer-minimal-dot {
    position: relative;
    flex: none;
    inline-size: 0.45rem;
    block-size: 0.45rem;
    border-radius: 50%;
    background: var(--_tone);
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: var(--_tone);
      animation: nx-ping 2.4s var(--nx-ease-out) infinite;
    }
  }
  .nx-footer-minimal-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nx-space-4);
  }
  .nx-footer-minimal-link {
    color: inherit;
    font-size: inherit;
    text-decoration: none;
    transition: color var(--nx-dur-fast) var(--nx-ease-out);
    &:hover {
      color: var(--nx-text);
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
      border-radius: var(--nx-radius-xs);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-footer-newsletter-eyebrow i,
    .nx-footer-minimal-dot::after {
      animation: none;
    }
  }
}

/* src/css/blocks/heroes.css */
@layer nx.components {
  @keyframes nx-hero-part-in {
    from {
      opacity: 0;
      translate: 0 calc(16px * var(--nx-motion));
    }
  }
  :is(.nx-hero-spotlight-copy, .nx-hero-split-copy, .nx-hero-marquee-copy) > * {
    margin: 0;
    animation: nx-hero-part-in var(--nx-spring-soft-duration) var(--nx-spring-soft) backwards;
    animation-delay: calc(var(--nx-i, 0) * var(--nx-stagger));
  }
  :is(.nx-hero-spotlight-copy, .nx-hero-split-copy, .nx-hero-marquee-copy) > :nth-child(2) {
    --nx-i: 1;
  }
  :is(.nx-hero-spotlight-copy, .nx-hero-split-copy, .nx-hero-marquee-copy) > :nth-child(3) {
    --nx-i: 2;
  }
  :is(.nx-hero-spotlight-copy, .nx-hero-split-copy, .nx-hero-marquee-copy) > :nth-child(4) {
    --nx-i: 3;
  }
  :is(.nx-hero-spotlight-copy, .nx-hero-split-copy, .nx-hero-marquee-copy) > :nth-child(5) {
    --nx-i: 4;
  }
  .nx-hero-spotlight {
    --_ink: var(--nx-ink-950);
    --_ink-2: color-mix(in oklab, var(--nx-ink-900) 72%, var(--nx-violet-600));
    --_fg: var(--nx-ink-50);
    --_muted: color-mix(in oklab, var(--nx-ink-50) 66%, transparent);
    --_glow: var(--nx-glow);
    position: relative;
    isolation: isolate;
    overflow: clip;
    display: grid;
    justify-items: center;
    gap: var(--nx-space-4);
    padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5.5rem);
    padding-inline: var(--nx-space-5);
    background:
      radial-gradient(
        120% 90% at 50% 0%,
        var(--_ink-2),
        var(--_ink) 62%);
    color: var(--_fg);
    text-align: center;
  }
  .nx-hero-spotlight-blobs {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }
  .nx-hero-spotlight-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.5;
    background:
      radial-gradient(
        circle,
        var(--_b, var(--nx-lapis-500)),
        transparent 70%);
    animation: nx-hero-spotlight-drift var(--_t, 30s) var(--nx-ease-in-out) infinite alternate;
  }
  .nx-hero-spotlight-blob:nth-child(1) {
    inline-size: 34rem;
    aspect-ratio: 1;
    inset-block-start: -12rem;
    inset-inline-start: -8rem;
    --_b: var(--nx-lapis-500);
    --_t: 26s;
  }
  .nx-hero-spotlight-blob:nth-child(2) {
    inline-size: 28rem;
    aspect-ratio: 1.4;
    inset-block-end: -10rem;
    inset-inline-end: -6rem;
    --_b: var(--nx-violet-500);
    --_t: 32s;
    animation-direction: alternate-reverse;
  }
  .nx-hero-spotlight-blob:nth-child(3) {
    inline-size: 20rem;
    aspect-ratio: 1;
    inset-block-start: 22%;
    inset-inline-start: 58%;
    --_b: var(--nx-cyan-500);
    --_t: 38s;
    opacity: 0.32;
  }
  @keyframes nx-hero-spotlight-drift {
    from {
      translate: 0 0;
      scale: 1;
    }
    to {
      translate: calc(6rem * var(--nx-motion)) calc(-3rem * var(--nx-motion));
      scale: calc(1 + 0.18 * var(--nx-motion));
    }
  }
  .nx-hero-spotlight-light {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(
        34rem circle at var(--nx-px, 50%) var(--nx-py, 28%),
        color-mix(in oklab, var(--_glow) 24%, transparent),
        color-mix(in oklab, var(--_glow) 7%, transparent) 42%,
        transparent 70%),
      radial-gradient(
        7rem circle at var(--nx-px, 50%) var(--nx-py, 28%),
        color-mix(in oklab, var(--nx-ink-50) 10%, transparent),
        transparent 100%);
  }
  .nx-hero-spotlight-copy {
    display: grid;
    justify-items: center;
    gap: var(--nx-space-4);
    max-inline-size: 46rem;
    min-inline-size: 0;
  }
  .nx-hero-spotlight-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding-block: 0.3rem;
    padding-inline: var(--nx-space-3);
    border: 1px solid color-mix(in oklab, var(--nx-ink-50) 16%, transparent);
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--nx-ink-50) 7%, transparent);
    color: var(--_muted);
    font-size: var(--nx-text-sm);
    font-weight: 500;
  }
  .nx-hero-spotlight-badge::before {
    content: "";
    inline-size: 0.375rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--_glow);
    animation: nx-pulse 2.4s var(--nx-ease-in-out) infinite;
  }
  .nx-hero-spotlight-title {
    font: 800 clamp(2.4rem, 7vw, 4.75rem) / 1.06 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
    text-wrap: balance;
    text-shadow: 0 0 3rem color-mix(in oklab, var(--_glow) 45%, transparent);
  }
  .nx-hero-spotlight-title em {
    font-style: normal;
    background:
      linear-gradient(
        92deg,
        var(--nx-lapis-300),
        var(--nx-violet-300) 55%,
        var(--nx-cyan-300));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
  .nx-hero-spotlight-subtitle {
    max-inline-size: 42ch;
    font-size: var(--nx-text-lg);
    line-height: 1.65;
    color: var(--_muted);
    text-wrap: pretty;
  }
  .nx-hero-spotlight-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--nx-space-3);
  }
  .nx-hero-spotlight-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--nx-space-1) var(--nx-space-5);
    margin-block-start: var(--nx-space-1);
    padding: 0;
    list-style: none;
    font-size: var(--nx-text-xs);
    color: var(--_muted);
  }
  .nx-hero-spotlight-trust li {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
  }
  .nx-hero-spotlight-trust .nx-icon {
    inline-size: 0.875rem;
    block-size: 0.875rem;
    color: color-mix(in oklab, var(--_glow) 80%, var(--nx-ink-50));
  }
  .nx-hero-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    padding-block: clamp(3rem, 7vw, 5.5rem);
    padding-inline: clamp(1.25rem, 4vw, 3rem);
    background:
      radial-gradient(
        120% 100% at 50% 0%,
        color-mix(in oklab, var(--nx-surface) 60%, var(--nx-bg)),
        var(--nx-bg) 70%);
  }
  .nx-hero-split-copy {
    display: grid;
    justify-items: start;
    gap: var(--nx-space-5);
    min-inline-size: 0;
  }
  .nx-hero-split-title {
    font: 800 clamp(2.2rem, 5.2vw, 4rem) / 1.08 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
    text-wrap: balance;
  }
  .nx-hero-split-subtitle {
    max-inline-size: 44ch;
    font-size: var(--nx-text-lg);
    line-height: 1.65;
    color: var(--nx-text-muted);
    text-wrap: pretty;
  }
  .nx-hero-split-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nx-space-3);
  }
  .nx-hero-split-note {
    font-size: var(--nx-text-xs);
    color: var(--nx-text-muted);
  }
  .nx-hero-split-stage {
    --_k: 1;
    position: relative;
    isolation: isolate;
    display: grid;
    justify-items: center;
    perspective: 1200px;
    perspective-origin: 50% 45%;
    min-inline-size: 0;
  }
  .nx-hero-split-stage[data-nx-tilt] {
    transform: none;
  }
  .nx-hero-split-halo {
    position: absolute;
    inset: -12% -18%;
    z-index: 0;
    border-radius: 50%;
    background:
      radial-gradient(
        closest-side,
        color-mix(in oklab, var(--nx-accent) 34%, transparent),
        transparent 68%);
    filter: blur(38px);
    pointer-events: none;
  }
  .nx-hero-split-mock {
    position: relative;
    z-index: 1;
    inline-size: min(100%, 30rem);
    overflow: clip;
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
    box-shadow: 0 0 0 1px var(--nx-border), var(--nx-shadow-xl);
    transform: rotateY(calc(var(--nx-ry, 0deg) * var(--_k) - 9deg)) rotateX(calc(var(--nx-rx, 0deg) * var(--_k)));
    transition: transform var(--nx-transform-duration, var(--nx-spring-gentle-duration)) var(--nx-transform-ease, var(--nx-spring-gentle));
  }
  .nx-hero-split-mock:dir(rtl) {
    transform: rotateY(calc(var(--nx-ry, 0deg) * var(--_k) * -1 + 9deg)) rotateX(calc(var(--nx-rx, 0deg) * var(--_k)));
  }
  .nx-hero-split-bar {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-2) var(--nx-space-3);
    border-block-end: 1px solid var(--nx-border);
    background: color-mix(in oklab, var(--nx-surface) 86%, var(--nx-accent) 4%);
  }
  .nx-hero-split-bar i {
    inline-size: 0.6rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--nx-border-strong);
  }
  .nx-hero-split-bar i:nth-child(1) {
    background: var(--nx-danger);
  }
  .nx-hero-split-bar i:nth-child(2) {
    background: var(--nx-warning);
  }
  .nx-hero-split-bar i:nth-child(3) {
    background: var(--nx-success);
  }
  .nx-hero-split-bar b {
    flex: 1;
    block-size: 0.95rem;
    margin-inline-start: var(--nx-space-2);
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--nx-accent) 10%, transparent);
  }
  .nx-hero-split-body {
    display: grid;
    grid-template-columns: auto 1fr;
  }
  .nx-hero-split-nav {
    display: grid;
    gap: var(--nx-space-2);
    align-content: start;
    padding: var(--nx-space-3) var(--nx-space-2);
    border-inline-end: 1px solid var(--nx-border);
  }
  .nx-hero-split-nav i {
    inline-size: 4.5rem;
    block-size: 0.55rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-3);
  }
  .nx-hero-split-nav i:first-child {
    background: color-mix(in oklab, var(--nx-accent) 55%, transparent);
  }
  .nx-hero-split-main {
    display: grid;
    gap: var(--nx-space-2);
    padding: var(--nx-space-3);
    min-inline-size: 0;
  }
  .nx-hero-split-row {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-2);
    border-radius: var(--nx-radius-md);
    box-shadow: inset 0 0 0 1px var(--nx-border);
  }
  .nx-hero-split-dot {
    flex: none;
    inline-size: 0.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--nx-success);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--nx-success) 22%, transparent);
  }
  .nx-hero-split-dot[data-run] {
    background: var(--nx-accent);
    animation: nx-hero-split-ping 1.6s var(--nx-ease-in-out) infinite;
  }
  @keyframes nx-hero-split-ping {
    50% {
      box-shadow: 0 0 0 6px transparent;
    }
  }
  .nx-hero-split-line {
    flex: 1;
    block-size: 0.55rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-3);
  }
  .nx-hero-split-state {
    flex: none;
    inline-size: 3.25rem;
    block-size: 0.8rem;
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--nx-success) 14%, transparent);
  }
  .nx-hero-split-state[data-run] {
    background: color-mix(in oklab, var(--nx-accent) 14%, transparent);
  }
  .nx-hero-split-bars {
    display: flex;
    align-items: end;
    gap: var(--nx-space-1);
    block-size: 2.6rem;
    padding: var(--nx-space-2) var(--nx-space-2) 0;
    border-block-start: 1px solid var(--nx-border);
  }
  .nx-hero-split-bars i {
    flex: 1;
    border-radius: var(--nx-radius-xs) var(--nx-radius-xs) 0 0;
    background:
      linear-gradient(
        to top,
        color-mix(in oklab, var(--nx-accent) 30%, transparent),
        color-mix(in oklab, var(--nx-accent) 70%, transparent));
    transform-origin: 50% 100%;
    animation: nx-hero-split-grow 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    animation-delay: calc(var(--nx-i, 0) * 90ms);
  }
  @keyframes nx-hero-split-grow {
    from {
      scale: 1 0.12;
    }
  }
  .nx-hero-split-chips {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
  }
  .nx-hero-split-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-2) var(--nx-space-3);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    box-shadow: 0 0 0 1px var(--nx-border), var(--nx-shadow-md);
    color: var(--nx-text);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    white-space: nowrap;
    rotate: calc(var(--nx-ry, 0deg) * -0.35 * var(--nx-motion));
    transition: rotate var(--nx-transform-duration, var(--nx-spring-gentle-duration)) var(--nx-transform-ease, var(--nx-spring-gentle));
    animation: nx-hero-split-float 6s var(--nx-ease-in-out) infinite;
    animation-delay: var(--_d, 0s);
  }
  .nx-hero-split-chip:nth-child(1) {
    inset-block-start: -6%;
    inset-inline-end: 4%;
  }
  .nx-hero-split-chip:nth-child(2) {
    inset-block-start: 38%;
    inset-inline-start: -7%;
    --_d: 1.4s;
  }
  .nx-hero-split-chip:nth-child(3) {
    inset-block-end: -7%;
    inset-inline-end: 12%;
    --_d: 2.6s;
  }
  .nx-hero-split-chip .nx-icon {
    inline-size: 0.9rem;
    block-size: 0.9rem;
    color: var(--nx-accent);
  }
  @keyframes nx-hero-split-float {
    50% {
      translate: 0 calc(-0.45rem * var(--nx-motion));
    }
  }
  @media (max-width: 56.25rem) {
    .nx-hero-split {
      grid-template-columns: 1fr;
    }
    .nx-hero-split-stage {
      --_k: 0.5;
      margin-block-start: var(--nx-space-2);
    }
    .nx-hero-split-chip:nth-child(2) {
      inset-inline-start: 0;
    }
    .nx-hero-split-chip:nth-child(1),
    .nx-hero-split-chip:nth-child(3) {
      inset-inline-end: 0;
    }
    .nx-hero-split-body {
      grid-template-columns: 1fr;
    }
    .nx-hero-split-nav {
      display: none;
    }
  }
  .nx-hero-marquee {
    display: grid;
    justify-items: center;
    gap: var(--nx-space-4);
    padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2.5rem, 5vw, 4rem);
    padding-inline: var(--nx-space-5);
    overflow: clip;
    text-align: center;
    background:
      radial-gradient(
        120% 100% at 50% 0%,
        color-mix(in oklab, var(--nx-surface) 55%, var(--nx-bg)),
        var(--nx-bg) 70%);
  }
  .nx-hero-marquee-copy {
    display: grid;
    justify-items: center;
    gap: var(--nx-space-4);
    max-inline-size: 46rem;
    min-inline-size: 0;
  }
  .nx-hero-marquee-title {
    max-inline-size: 18ch;
    font: 800 clamp(2.4rem, 7vw, 4.75rem) / 1.06 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
    text-wrap: balance;
  }
  .nx-hero-marquee-subtitle {
    max-inline-size: 46ch;
    font-size: var(--nx-text-lg);
    line-height: 1.65;
    color: var(--nx-text-muted);
    text-wrap: pretty;
  }
  .nx-hero-marquee-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--nx-space-3);
  }
  .nx-hero-marquee-note {
    font-size: var(--nx-text-xs);
    color: var(--nx-text-muted);
  }
  .nx-hero-marquee-label {
    margin-block-start: var(--nx-space-6);
    color: var(--nx-text-muted);
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-mono);
    letter-spacing: var(--nx-tracking-wider);
    text-transform: uppercase;
  }
  .nx-hero-marquee-belt {
    inline-size: min(100%, 64rem);
    overflow: clip;
    direction: ltr;
    mask-image:
      linear-gradient(
        to right,
        transparent,
        #000 12%,
        #000 88%,
        transparent);
    -webkit-mask-image:
      linear-gradient(
        to right,
        transparent,
        #000 12%,
        #000 88%,
        transparent);
  }
  .nx-hero-marquee-track {
    display: flex;
    inline-size: max-content;
    animation: nx-hero-marquee-scroll var(--_speed, 32s) linear infinite;
  }
  .nx-hero-marquee-belt:hover .nx-hero-marquee-track,
  .nx-hero-marquee-belt:focus-within .nx-hero-marquee-track {
    animation-play-state: paused;
  }
  .nx-hero-marquee-group {
    display: flex;
    align-items: center;
    gap: clamp(2rem, 5vw, 3.5rem);
    padding-inline-end: clamp(2rem, 5vw, 3.5rem);
  }
  @keyframes nx-hero-marquee-scroll {
    to {
      translate: -50% 0;
    }
  }
  .nx-hero-marquee-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    flex: none;
    color: var(--nx-text-muted);
    font: 650 clamp(0.95rem, 2.6vw, 1.1rem) / 1 var(--nx-font-sans);
    transition: color var(--nx-dur-fast) var(--nx-ease-out);
  }
  .nx-hero-marquee-logo svg {
    inline-size: clamp(1.25rem, 3.4vw, 1.6rem);
    block-size: clamp(1.25rem, 3.4vw, 1.6rem);
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-hero-marquee-logo:hover {
      color: var(--nx-text);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-hero-spotlight-blob,
    .nx-hero-spotlight-badge::before,
    .nx-hero-split-dot[data-run],
    .nx-hero-split-chip,
    .nx-hero-split-bars i,
    .nx-hero-marquee-track {
      animation: none;
    }
    .nx-hero-split-mock,
    .nx-hero-split-chip {
      transition: none;
    }
  }
}

/* src/css/blocks/icon-motion.css */
@layer nx.components {
  .nx-icon-draw {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.25rem), 1fr));
    gap: var(--nx-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-icon-draw-tile {
    display: grid;
    gap: var(--nx-space-2);
    justify-items: center;
    padding: var(--nx-space-5) var(--nx-space-2) var(--nx-space-4);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
    transition-property:
      border-color,
      background-color,
      translate;
    transition-duration:
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-spring-snappy-duration);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-snappy);
    & svg {
      display: block;
      inline-size: 2.4rem;
      block-size: 2.4rem;
      overflow: visible;
    }
  }
  .nx-icon-draw-name {
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    text-align: center;
    transition: color var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-icon-draw-ink {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
  }
  :where(.nx-js) .nx-icon-draw-tile:not([data-nx-drawn]) .nx-icon-draw-ink {
    stroke-dashoffset: 1;
    transition: none;
  }
  :where(.nx-js) .nx-icon-draw-tile[data-nx-drawn] .nx-icon-draw-ink {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset var(--nx-dur-slower) var(--nx-ease-out) var(--_d, 0ms);
  }
  :where(.nx-js) .nx-icon-draw-tile[data-nx-drawn] .nx-icon-draw-name {
    color: var(--nx-text);
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-icon-draw-tile:hover {
      border-color: var(--nx-accent-border);
      background: var(--nx-surface-2);
      translate: 0 calc(-2px * var(--nx-motion));
    }
  }
  .nx-icon-toggle {
    --_tone: var(--nx-accent);
    --_tone-text: var(--nx-accent-text);
    --_tone-soft: var(--nx-accent-soft);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    min-block-size: 2.75rem;
    padding-inline: 1.1rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-surface);
    color: var(--nx-text);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tight);
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: var(--nx-shadow-xs);
    transition-property:
      scale,
      background-color,
      border-color,
      color;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-ease-out);
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:is(:disabled, [aria-disabled=true]) {
      cursor: not-allowed;
      opacity: 0.5;
    }
    &:active:not(:disabled, [aria-disabled=true], [data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &[data-variant=heart] {
      --_tone: var(--nx-danger);
      --_tone-text: var(--nx-danger-text);
      --_tone-soft: var(--nx-danger-soft);
    }
    &[data-size=sm] {
      min-block-size: 2.25rem;
      padding-inline: 0.85rem;
      font-size: var(--nx-text-xs);
    }
    &[aria-pressed=true] {
      color: var(--_tone-text);
      border-color: color-mix(in oklab, var(--_tone) 40%, var(--nx-border));
      background: color-mix(in oklab, var(--_tone-soft) 60%, var(--nx-surface));
    }
  }
  .nx-icon-toggle-icon {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    & svg {
      display: block;
      inline-size: 1.5rem;
      block-size: 1.5rem;
      overflow: visible;
    }
  }
  .nx-icon-toggle-line {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .nx-icon-toggle-fill {
    fill: currentColor;
    stroke: none;
    scale: calc(1 - 0.75 * var(--nx-motion));
    opacity: 0;
    filter: blur(4px);
    transform-box: fill-box;
    transform-origin: center;
    transition-property:
      scale,
      opacity,
      filter;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
  }
  .nx-icon-toggle[aria-pressed=true] .nx-icon-toggle-fill {
    scale: 1;
    opacity: 1;
    filter: none;
  }
  .nx-icon-toggle-swing {
    transform-box: fill-box;
    transform-origin: 50% 10%;
  }
  .nx-icon-toggle[aria-pressed=true] .nx-icon-toggle-swing {
    animation: nx-icon-toggle-ring 800ms var(--nx-ease-out);
  }
  @keyframes nx-icon-toggle-ring {
    0%, 100% {
      rotate: 0deg;
    }
    18% {
      rotate: calc(14deg * var(--nx-motion));
    }
    38% {
      rotate: calc(-11deg * var(--nx-motion));
    }
    58% {
      rotate: calc(7deg * var(--nx-motion));
    }
    78% {
      rotate: calc(-4deg * var(--nx-motion));
    }
  }
  .nx-icon-toggle-badge {
    position: absolute;
    inset-block-start: -0.4rem;
    inset-inline-end: -0.55rem;
    min-inline-size: 1.05rem;
    padding: 0.08rem 0.3rem;
    border-radius: var(--nx-radius-full);
    background: var(--_tone);
    color: var(--nx-accent-contrast);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    animation: nx-icon-toggle-pop 420ms cubic-bezier(0.2, 0.9, 0.3, 1.3);
  }
  @keyframes nx-icon-toggle-pop {
    from {
      scale: calc(1 - 0.6 * var(--nx-motion));
      opacity: 0;
    }
    70% {
      scale: calc(1 + 0.18 * var(--nx-motion));
    }
    to {
      scale: 1;
      opacity: 1;
    }
  }
  .nx-icon-toggle-window {
    display: block;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    overflow: clip;
    direction: ltr;
  }
  .nx-icon-toggle-track {
    display: flex;
    inline-size: 3rem;
    block-size: 1.5rem;
    transition: translate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
  }
  .nx-icon-toggle-half {
    display: block;
    flex: none;
    inline-size: 1.5rem;
    block-size: 1.5rem;
  }
  .nx-icon-toggle[aria-pressed=true] .nx-icon-toggle-track {
    translate: -1.5rem 0;
  }
  .nx-icon-toggle-label {
    display: inline-grid;
    justify-items: start;
    > * {
      grid-area: 1 / 1;
      transition-property:
        scale,
        opacity,
        filter;
      transition-duration: 300ms;
      transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
    }
    > [data-off] {
      opacity: 0;
      scale: calc(1 - 0.75 * var(--nx-motion));
      filter: blur(4px);
    }
  }
  .nx-icon-toggle[aria-pressed=true] .nx-icon-toggle-label {
    > :not([data-off]) {
      opacity: 0;
      scale: calc(1 - 0.75 * var(--nx-motion));
      filter: blur(4px);
    }
    > [data-off] {
      opacity: 1;
      scale: 1;
      filter: none;
    }
  }
  .nx-icon-loop {
    --_size: 2.5rem;
    --_glyph: 1.4rem;
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: var(--_size);
    block-size: var(--_size);
    border-radius: var(--nx-radius-md);
    background: var(--nx-accent-soft);
    color: var(--nx-accent-text);
    & svg {
      display: block;
      inline-size: var(--_glyph);
      block-size: var(--_glyph);
      overflow: visible;
    }
    &[data-bare] {
      --_glyph: 1.2rem;
      inline-size: auto;
      block-size: auto;
      background: none;
      color: inherit;
    }
    &[data-paused] * {
      animation-play-state: paused;
    }
    &[data-paused]::after {
      animation-play-state: paused;
    }
  }
  .nx-icon-loop-line {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .nx-icon-loop-dots {
    display: flex;
    gap: 0.28rem;
    & i {
      inline-size: 0.34rem;
      block-size: 0.34rem;
      border-radius: var(--nx-radius-full);
      background: currentColor;
      animation: nx-icon-loop-dot 1s var(--nx-ease-in-out) infinite;
      &:nth-child(2) {
        animation-delay: 150ms;
      }
      &:nth-child(3) {
        animation-delay: 300ms;
      }
    }
  }
  @keyframes nx-icon-loop-dot {
    0%, 100% {
      translate: 0 0;
      opacity: 0.45;
    }
    40% {
      translate: 0 calc(-0.3rem * var(--nx-motion));
      opacity: 1;
    }
  }
  .nx-icon-loop-arc {
    transform-box: fill-box;
    transform-origin: center;
    animation: nx-icon-loop-spin 1.3s linear infinite;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-dasharray: 30 70;
  }
  @keyframes nx-icon-loop-spin {
    to {
      rotate: 360deg;
    }
  }
  .nx-icon-loop-sync {
    & g {
      transform-box: view-box;
      transform-origin: 12px 12px;
    }
    & .nx-icon-loop-cw {
      animation: nx-icon-loop-spin 1.7s linear infinite;
    }
    & .nx-icon-loop-ccw {
      animation: nx-icon-loop-spin 1.7s linear infinite reverse;
    }
  }
  .nx-icon-loop-bounce {
    animation: nx-icon-loop-drop 1.5s var(--nx-ease-in-out) infinite;
  }
  @keyframes nx-icon-loop-drop {
    0%, 100% {
      translate: 0 0;
    }
    42% {
      translate: 0 calc(3px * var(--nx-motion));
    }
    60% {
      translate: 0 calc(-3.5px * var(--nx-motion));
    }
    78% {
      translate: 0 calc(1px * var(--nx-motion));
    }
  }
  .nx-icon-loop-upfill {
    clip-path: inset(calc(100% - var(--_p, 0%)) 0 0 0);
    transition: clip-path var(--nx-dur-fast) var(--nx-ease-out);
    & path {
      fill: currentColor;
      stroke: none;
    }
  }
  .nx-icon-loop-pct {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: calc(100% + var(--nx-space-2));
    translate: 0 -50%;
    min-inline-size: 3ch;
    color: var(--nx-accent-text);
    font: 650 var(--nx-text-xs) / 1 var(--nx-font-mono);
    font-variant-numeric: tabular-nums;
    text-align: end;
  }
  .nx-icon-loop[data-kind=search] svg {
    transition: scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
  }
  .nx-icon-loop[data-busy] svg {
    animation: nx-icon-loop-pulse 0.9s var(--nx-ease-in-out) infinite;
  }
  .nx-icon-loop[data-busy]::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid currentColor;
    border-radius: inherit;
    pointer-events: none;
    animation: nx-icon-loop-halo 1.2s var(--nx-ease-out) infinite;
  }
  @keyframes nx-icon-loop-pulse {
    0%, 100% {
      scale: 1;
    }
    50% {
      scale: calc(1 + 0.14 * var(--nx-motion));
    }
  }
  @keyframes nx-icon-loop-halo {
    from {
      opacity: 0.55;
      scale: calc(1 - 0.15 * var(--nx-motion));
    }
    to {
      opacity: 0;
      scale: calc(1 + 0.25 * var(--nx-motion));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    :where(.nx-js) .nx-icon-draw-tile:not([data-nx-drawn]) .nx-icon-draw-ink {
      stroke-dashoffset: 0;
    }
    .nx-icon-draw-ink {
      transition: none;
    }
    .nx-icon-draw-tile {
      transition-property: border-color, background-color;
    }
    .nx-icon-toggle-swing,
    .nx-icon-toggle-badge {
      animation: none;
    }
    :is(.nx-icon-toggle-fill, .nx-icon-toggle-track, .nx-icon-toggle-label > *) {
      transition-duration: 0ms;
      filter: none;
    }
    .nx-icon-loop :is(i, svg, g, circle) {
      animation: none;
    }
    .nx-icon-loop[data-busy]::after {
      animation: none;
      opacity: 0;
    }
  }
}

/* src/css/blocks/icons.css */
@layer nx.components {
  .nx-icon3d {
    --_c1: var(--nx-lapis-200);
    --_c2: var(--nx-lapis-600);
    --_c3: var(--nx-cyan-300);
    --_c4: var(--nx-cyan-600);
    --_size: 3rem;
    display: inline-grid;
    place-items: center;
    inline-size: var(--_size);
    block-size: var(--_size);
    vertical-align: middle;
    transition-property: translate, filter;
    transition-duration: var(--nx-spring-gentle-duration), var(--nx-dur-base);
    transition-timing-function: var(--nx-spring-gentle), var(--nx-ease-out);
    &[data-tone=violet] {
      --_c1: var(--nx-violet-300);
      --_c2: var(--nx-violet-700);
    }
    &[data-tone=gold] {
      --_c1: var(--nx-gold-200);
      --_c2: var(--nx-gold-600);
    }
    &[data-size=sm] {
      --_size: 1.5rem;
    }
    &[data-size=lg] {
      --_size: 4rem;
    }
    &[data-size=display] {
      --_size: 6.75rem;
    }
    & svg {
      inline-size: 100%;
      block-size: 100%;
      overflow: visible;
    }
  }
  .nx-icon3d-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
    gap: var(--nx-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-icon3d-cell {
    display: grid;
    justify-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-4) var(--nx-space-2) var(--nx-space-3);
    border-radius: var(--nx-radius-lg);
    background: color-mix(in oklab, var(--nx-accent) 6%, transparent);
    transition: background-color var(--nx-dur-fast) var(--nx-ease-out);
    &:focus-within {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-icon3d-name {
    font-size: var(--nx-text-xs);
    font-weight: 600;
    color: var(--nx-text-muted);
    letter-spacing: var(--nx-tracking-tight);
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-icon3d-cell:hover {
      background: color-mix(in oklab, var(--nx-accent) 12%, transparent);
    }
    .nx-icon3d-cell:hover .nx-icon3d {
      translate: 0 calc(-4px * var(--nx-motion));
      filter: drop-shadow(0 14px 12px color-mix(in oklab, var(--nx-ink-950) 18%, transparent));
    }
  }
  .nx-icon3d-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
    gap: var(--nx-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-icon3d-item {
    display: grid;
    align-content: start;
    gap: var(--nx-space-2);
    padding: var(--nx-space-5);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-xs);
    transition-property:
      translate,
      box-shadow,
      border-color,
      transform;
    transition-duration:
      var(--nx-spring-gentle-duration),
      var(--nx-dur-base),
      var(--nx-dur-base),
      var(--nx-spring-gentle-duration);
    transition-timing-function:
      var(--nx-spring-gentle),
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-gentle);
  }
  .nx-icon3d-title {
    margin: 0;
    color: var(--nx-text);
    font-size: var(--nx-text-md);
    font-weight: 650;
  }
  .nx-icon3d-text {
    margin: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    line-height: 1.65;
  }
  .nx-icon3d-link {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-1);
    margin-block-start: var(--nx-space-1);
    border-radius: var(--nx-radius-xs);
    color: var(--nx-accent-text);
    font-size: var(--nx-text-sm);
    font-weight: 650;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    .nx-icon {
      inline-size: 0.95rem;
      block-size: 0.95rem;
    }
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-icon3d-item:hover {
      translate: 0 calc(-3px * var(--nx-motion));
      border-color: color-mix(in oklab, var(--nx-accent) 32%, var(--nx-border));
      box-shadow: var(--nx-shadow-md), 0 14px 28px -18px color-mix(in oklab, var(--nx-accent) 45%, transparent);
    }
    .nx-icon3d-item:hover .nx-icon3d {
      translate: 0 calc(-2px * var(--nx-motion));
      filter: drop-shadow(0 10px 10px color-mix(in oklab, var(--nx-ink-950) 16%, transparent));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-icon3d,
    .nx-icon3d-item {
      transition-duration: 0ms;
    }
  }
}

/* src/css/blocks/loaders.css */
@layer nx.components {
  :is(.nx-loader-orbit-mark, .nx-loader-ring-tick, .nx-loader-liquid-tick) {
    --_mark: 1.15rem;
    display: inline-block;
    flex: none;
    inline-size: var(--_mark);
    block-size: var(--_mark);
    path {
      fill: none;
      stroke: currentColor;
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 24;
      stroke-dashoffset: 24;
      animation: nx-loader-draw 450ms var(--nx-ease-out) forwards;
    }
  }
  @keyframes nx-loader-draw {
    to {
      stroke-dashoffset: 0;
    }
  }
  .nx-loader-orbit {
    --_tone: var(--nx-accent);
    --_contrast: var(--nx-accent-contrast);
    --_h: 2.75rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    min-block-size: var(--_h);
    padding-inline: var(--nx-space-5);
    border: 1px solid transparent;
    border-radius: var(--nx-radius-full);
    background: var(--_tone);
    color: var(--_contrast);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tight);
    white-space: nowrap;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.18),
      0 1px 2px rgb(0 0 0 / 0.12),
      0 8px 20px -10px color-mix(in oklab, var(--_tone) 65%, transparent);
    transition-property:
      scale,
      background-color,
      border-color,
      color,
      box-shadow;
    transition-duration:
      var(--nx-spring-snappy-duration),
      var(--nx-dur-base),
      var(--nx-dur-base),
      var(--nx-dur-base),
      var(--nx-dur-base);
    transition-timing-function:
      var(--nx-spring-snappy),
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-ease-out);
    &:active:not(:disabled, [aria-disabled=true], [data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:is(:disabled, [aria-disabled=true]) {
      cursor: default;
    }
    &[data-tone=gold] {
      --_tone: var(--nx-gold);
      --_contrast: var(--nx-gold-contrast);
    }
    &[data-size=sm] {
      --_h: 2.25rem;
      padding-inline: var(--nx-space-4);
      font-size: var(--nx-text-xs);
    }
    &[data-size=lg] {
      --_h: 3.25rem;
      padding-inline: var(--nx-space-6);
      font-size: var(--nx-text-md);
    }
    &[data-state=success] {
      --_tone: var(--nx-success);
    }
    &[data-state=error] {
      background: var(--nx-danger-soft);
      border-color: color-mix(in oklab, var(--nx-danger) 40%, var(--nx-border));
      color: var(--nx-danger-text);
      box-shadow: none;
    }
  }
  .nx-loader-orbit-orbit {
    position: relative;
    flex: none;
    inline-size: 1.375rem;
    block-size: 0.875rem;
    i {
      position: absolute;
      inset: 0;
      offset-path: path("M2 7 A9 5.5 0 1 1 20 7 A9 5.5 0 1 1 2 7");
      animation: nx-loader-lap 1.15s cubic-bezier(0.62, 0.05, 0.37, 0.95) infinite;
      &::after {
        content: "";
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        inline-size: 5px;
        block-size: 5px;
        border-radius: var(--nx-radius-full);
        background: currentColor;
        translate: -50% -50%;
      }
    }
    i:nth-child(2) {
      animation-delay: -0.16s;
      &::after {
        opacity: 0.7;
        scale: 0.8;
      }
    }
    i:nth-child(3) {
      animation-delay: -0.32s;
      &::after {
        opacity: 0.5;
        scale: 0.6;
      }
    }
    i:nth-child(4) {
      animation-delay: -0.48s;
      &::after {
        opacity: 0.35;
        scale: 0.45;
      }
    }
    i:nth-child(5) {
      animation-delay: -0.6s;
      &::after {
        opacity: 0.25;
        scale: 0.35;
      }
    }
    i:nth-child(6) {
      animation-delay: -0.72s;
      &::after {
        opacity: 0.18;
        scale: 0.28;
      }
    }
  }
  .nx-loader-orbit[data-size=sm] .nx-loader-orbit-orbit {
    scale: 0.85;
  }
  .nx-loader-orbit[data-size=lg] .nx-loader-orbit-orbit {
    scale: 1.15;
  }
  @keyframes nx-loader-lap {
    from {
      offset-distance: 0%;
    }
    to {
      offset-distance: 100%;
    }
  }
  .nx-loader-orbit-label {
    display: inline-grid;
    justify-items: center;
    text-align: center;
    > span {
      grid-area: 1 / 1;
      transition-property: opacity, translate;
      transition-duration: 200ms;
      transition-timing-function: var(--nx-ease-out);
    }
    > [data-off] {
      opacity: 0;
      translate: 0 calc(4px * var(--nx-motion));
      transition-duration: 150ms;
      pointer-events: none;
    }
  }
  .nx-loader-ring {
    --_size: 7.5rem;
    --_value: var(--nx-text-xl);
    --_tone: var(--nx-accent);
    position: relative;
    display: grid;
    place-items: center;
    inline-size: var(--_size);
    aspect-ratio: 1;
    color: var(--_tone);
    &[data-size=sm] {
      --_size: 4.5rem;
      --_value: var(--nx-text-md);
    }
    &[data-size=lg] {
      --_size: 10rem;
      --_value: var(--nx-text-3xl);
    }
    &[data-state=error] {
      --_tone: var(--nx-danger);
    }
    &[data-state=success] {
      --_tone: var(--nx-success);
    }
    svg {
      position: absolute;
      inset: 0;
    }
    circle {
      fill: none;
    }
  }
  .nx-loader-ring-track {
    stroke: var(--nx-surface-3);
    stroke-width: 3;
  }
  .nx-loader-ring-morph {
    stroke: var(--_tone);
    stroke-linecap: round;
    animation: nx-loader-morph 2.6s var(--nx-ease-in-out) infinite, nx-loader-spin 1.8s linear infinite;
    transition: opacity var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-loader-ring[data-state=idle] .nx-loader-ring-morph {
    animation-play-state: paused;
    opacity: 0.3;
  }
  .nx-loader-ring[data-state=error] .nx-loader-ring-morph {
    animation-play-state: paused;
    opacity: 0.45;
  }
  .nx-loader-ring[data-state=success] .nx-loader-ring-morph {
    display: none;
  }
  .nx-loader-ring-fill {
    stroke: color-mix(in oklab, var(--_tone) 45%, transparent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--_p, 0) * 100);
    rotate: -90deg;
    transition: stroke-dashoffset var(--nx-dur-base) var(--nx-ease-out), stroke var(--nx-dur-base) var(--nx-ease-out);
  }
  @keyframes nx-loader-morph {
    0%, 100% {
      stroke-width: 3;
      stroke-dasharray: 58 42;
    }
    28% {
      stroke-width: 10;
      stroke-dasharray: 22 30;
    }
    52% {
      stroke-width: 5;
      stroke-dasharray: 84 16;
    }
    76% {
      stroke-width: 12;
      stroke-dasharray: 10 26;
    }
  }
  @keyframes nx-loader-spin {
    to {
      rotate: 360deg;
    }
  }
  .nx-loader-ring-read {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--nx-space-1);
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .nx-loader-ring-value {
    font-size: var(--_value);
    font-weight: 700;
    line-height: 1;
  }
  .nx-loader-ring-tick {
    --_mark: 2rem;
  }
  .nx-loader-ring-caption {
    max-inline-size: 100%;
    padding-inline: var(--nx-space-1);
    overflow-wrap: anywhere;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    transition: color var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-loader-ring[data-state=success] .nx-loader-ring-caption {
    color: var(--nx-success-text);
  }
  .nx-loader-ring[data-state=error] .nx-loader-ring-caption {
    color: var(--nx-danger-text);
  }
  .nx-loader-liquid {
    --_size: 10.5rem;
    --_value: var(--nx-text-2xl);
    --_liquid-a: var(--nx-cyan-400);
    --_liquid-b: var(--nx-cyan-700);
    --_wave-back: color-mix(in oklab, var(--nx-cyan-300) 55%, transparent);
    position: relative;
    display: grid;
    place-items: center;
    inline-size: var(--_size);
    aspect-ratio: 1;
    &[data-size=sm] {
      --_size: 6.5rem;
      --_value: var(--nx-text-md);
    }
    &[data-size=lg] {
      --_size: 13rem;
      --_value: var(--nx-text-4xl);
    }
    &[data-state=error] {
      --_liquid-a: color-mix(in oklab, var(--nx-text-muted) 55%, var(--nx-surface-3));
      --_liquid-b: color-mix(in oklab, var(--nx-text-muted) 75%, var(--nx-surface-3));
      --_wave-back: color-mix(in oklab, var(--nx-text-muted) 25%, transparent);
    }
    &[data-state=success] {
      --_liquid-a: var(--nx-success);
      --_liquid-b: color-mix(in oklab, var(--nx-success) 70%, var(--nx-ink-900));
      --_wave-back: color-mix(in oklab, var(--nx-success) 35%, transparent);
    }
    svg {
      position: absolute;
      inset: 0;
    }
  }
  .nx-loader-liquid-bowl {
    fill: var(--nx-surface-2);
  }
  .nx-loader-liquid-glass {
    fill: none;
    stroke: color-mix(in oklab, var(--nx-text) 12%, transparent);
    stroke-width: 3;
  }
  .nx-loader-liquid-rim {
    fill: none;
    stroke: color-mix(in oklab, var(--nx-text) 9%, transparent);
    stroke-width: 1.5;
  }
  .nx-loader-liquid-level {
    translate: 0 calc(176px * (1 - var(--_p, 0)));
    transition: translate var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-loader-liquid-wave {
    animation: nx-loader-drift 3.2s linear infinite;
  }
  .nx-loader-liquid-back {
    fill: var(--_wave-back);
    animation-delay: -1.6s;
  }
  .nx-loader-liquid-front-a {
    stop-color: var(--_liquid-a);
  }
  .nx-loader-liquid-front-b {
    stop-color: var(--_liquid-b);
  }
  .nx-loader-liquid[data-state=error] .nx-loader-liquid-wave {
    animation-play-state: paused;
  }
  @keyframes nx-loader-drift {
    to {
      translate: -100px 0;
    }
  }
  .nx-loader-liquid-read {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    transition: color var(--nx-dur-base) var(--nx-ease-out);
    &[data-wet] {
      color: var(--nx-ink-50);
      text-shadow: 0 1px 4px rgb(0 0 0 / 0.4);
      .nx-loader-liquid-caption {
        color: inherit;
      }
    }
  }
  .nx-loader-liquid-value {
    font-size: var(--_value);
    font-weight: 700;
    line-height: 1;
  }
  .nx-loader-liquid-tick {
    --_mark: 2rem;
  }
  .nx-loader-liquid-caption {
    max-inline-size: 6.5rem;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    font-weight: 700;
    transition: color var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-loader-liquid[data-size=sm] .nx-loader-liquid-caption {
    display: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-loader-orbit-orbit i {
      animation: none;
    }
    .nx-loader-orbit-orbit i:nth-child(1) {
      offset-distance: 0%;
    }
    .nx-loader-orbit-orbit i:nth-child(2) {
      offset-distance: 25%;
    }
    .nx-loader-orbit-orbit i:nth-child(3) {
      offset-distance: 50%;
    }
    .nx-loader-orbit-orbit i:nth-child(n+4) {
      offset-distance: 75%;
    }
    .nx-loader-ring-morph {
      animation: none;
      stroke-width: 6;
      stroke-dasharray: 58 42;
    }
    .nx-loader-liquid-wave {
      animation: none;
    }
    :is(.nx-loader-orbit, .nx-loader-ring-fill, .nx-loader-liquid-level) {
      transition-duration: 0ms;
    }
    :is(.nx-loader-orbit-mark, .nx-loader-ring-tick, .nx-loader-liquid-tick) path {
      animation: none;
      stroke-dashoffset: 0;
    }
  }
}

/* src/css/blocks/maps.css */
@layer nx.components {
  .nx-map-stage {
    position: relative;
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    overflow: clip;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    touch-action: manipulation;
  }
  .nx-map-art {
    position: absolute;
    inset: 0;
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }
  .nx-map-land {
    fill: var(--nx-surface);
  }
  .nx-map-water {
    fill: none;
    stroke: color-mix(in oklab, var(--nx-cyan-400) 24%, var(--nx-surface));
    stroke-width: 24;
    stroke-linecap: round;
  }
  .nx-map-street {
    fill: none;
    stroke: var(--nx-border-strong);
    stroke-width: 4;
    opacity: 0.5;
  }
  .nx-map-block {
    fill: var(--nx-surface-3);
  }
  .nx-map-park {
    fill: color-mix(in oklab, var(--nx-chart-7) 24%, var(--nx-surface));
  }
  .nx-map-leaf {
    fill: color-mix(in oklab, var(--nx-chart-7) 42%, var(--nx-surface-3));
  }
  .nx-map-district {
    fill: transparent;
    stroke: none;
    pointer-events: all;
    cursor: default;
    transition: fill var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-map-district[data-active] {
    fill: var(--nx-accent-soft);
  }
  .nx-map-district-name {
    fill: var(--nx-text-subtle);
    font-family: var(--nx-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--nx-tracking-wide);
    text-anchor: middle;
    pointer-events: none;
  }
  .nx-map-pin {
    position: absolute;
    translate: -50% -50%;
    inline-size: 1.6rem;
    aspect-ratio: 1;
    z-index: 2;
    border: 0;
    padding: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
  }
  .nx-map-pin:active {
    scale: calc(1 - 0.04 * var(--nx-motion));
  }
  .nx-map-pin:focus-visible {
    outline: 2px solid var(--nx-ring);
    outline-offset: 3px;
    border-radius: var(--nx-radius-full);
  }
  .nx-map-bead {
    position: relative;
    display: block;
    inline-size: 100%;
    aspect-ratio: 1;
    border: 3px solid var(--nx-surface);
    border-radius: var(--nx-radius-full);
    background: var(--_tint, var(--nx-accent));
    box-shadow: var(--nx-shadow-sm);
    transition: scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy), background-color var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-map-pin[aria-expanded=true] .nx-map-bead,
  .nx-map-pin[aria-pressed=true] .nx-map-bead {
    scale: calc(1 + 0.25 * var(--nx-motion));
  }
  .nx-map-pin[aria-expanded=true] .nx-map-bead::after,
  .nx-map-pin[aria-pressed=true] .nx-map-bead::after {
    content: "";
    position: absolute;
    inset: -7px;
    border: 2px solid var(--_tint, var(--nx-accent));
    border-radius: var(--nx-radius-full);
    animation: nx-map-halo 1.6s var(--nx-ease-out) infinite;
    pointer-events: none;
  }
  .nx-map-label {
    position: absolute;
    inset-block-end: calc(100% + 0.4rem);
    inset-inline-start: 50%;
    translate: -50% 0;
    z-index: 1;
    padding: var(--nx-space-1) var(--nx-space-2);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    background: var(--nx-surface-2);
    color: var(--nx-text);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--nx-shadow-sm);
    pointer-events: none;
    display: none;
  }
  .nx-map-pin:focus-visible .nx-map-label,
  .nx-map-pin[aria-expanded=true] .nx-map-label,
  .nx-map-pin[aria-pressed=true] .nx-map-label {
    display: block;
    animation: nx-map-label-in var(--nx-dur-base) var(--nx-ease-out) both;
  }
  @keyframes nx-map-label-in {
    from {
      opacity: 0;
      translate: -50% calc(0.35rem * var(--nx-motion));
    }
    to {
      opacity: 1;
      translate: -50% 0;
    }
  }
  .nx-map-pop {
    --_gap: 0.7rem;
    position: absolute;
    z-index: 3;
    display: none;
    gap: var(--nx-space-2);
    inline-size: 12rem;
    padding: var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface-2);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow-lg);
    transform-origin: 50% 100%;
    translate: -50% calc(-100% - var(--_gap));
    pointer-events: none;
  }
  .nx-map-pop[data-open] {
    display: grid;
    pointer-events: auto;
    animation: nx-map-pop-in var(--nx-spring-gentle-duration) var(--nx-spring-gentle) both;
  }
  @keyframes nx-map-pop-in {
    from {
      opacity: 0;
      scale: 0.95;
      translate: -50% calc(-100% - var(--_gap) + (6px * var(--nx-motion)));
    }
    to {
      opacity: 1;
      scale: 1;
      translate: -50% calc(-100% - var(--_gap));
    }
  }
  .nx-map-pop[data-below] {
    transform-origin: 50% 0%;
    translate: -50% calc(var(--_gap) - (6px * var(--nx-motion)));
  }
  .nx-map-pop[data-below][data-open] {
    translate: -50% var(--_gap);
  }
  .nx-map-thumb {
    block-size: 3.25rem;
    border-radius: var(--nx-radius-sm);
    background: var(--_thumb, linear-gradient(135deg, var(--nx-chart-1), var(--nx-chart-2)));
  }
  .nx-map-pop-name {
    display: flex;
    align-items: baseline;
    gap: var(--nx-space-2);
    margin: 0;
    font-size: var(--nx-text-sm);
  }
  .nx-map-pop-name b {
    font-weight: 700;
    overflow-wrap: anywhere;
  }
  .nx-map-pop-name small {
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
  }
  .nx-map-pop-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nx-space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-map-pop-meta li {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px var(--nx-space-2);
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--nx-text) 7%, transparent);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    font-weight: 600;
  }
  .nx-map-pop-meta li[data-tone=star] {
    background: var(--nx-gold-soft);
    color: var(--nx-gold-text);
  }
  .nx-map-pop-meta .nx-icon {
    inline-size: 0.7rem;
    block-size: 0.7rem;
  }
  .nx-map-close {
    position: absolute;
    inset-block-start: var(--nx-space-1);
    inset-inline-end: var(--nx-space-1);
    display: grid;
    place-items: center;
    inline-size: 1.4rem;
    aspect-ratio: 1;
    border: 0;
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--nx-text) 8%, transparent);
    color: var(--nx-text-muted);
    font: inherit;
    cursor: pointer;
    transition: color var(--nx-dur-fast) var(--nx-ease-out), scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
  }
  .nx-map-close .nx-icon {
    inline-size: 0.75rem;
    block-size: 0.75rem;
  }
  .nx-map-close:hover {
    color: var(--nx-text);
  }
  .nx-map-close:active {
    scale: calc(1 - 0.04 * var(--nx-motion));
  }
  .nx-map-close:focus-visible {
    outline: 2px solid var(--nx-ring);
    outline-offset: 1px;
  }
  @keyframes nx-map-halo {
    from {
      scale: 0.7;
      opacity: 0.8;
    }
    to {
      scale: 1.6;
      opacity: 0;
    }
  }
  .nx-marker-map {
    display: grid;
    gap: var(--nx-space-4);
    justify-items: center;
    inline-size: 100%;
  }
  .nx-marker-map .nx-map-stage {
    inline-size: min(100%, 44rem);
  }
  .nx-marker-map-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--nx-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-marker-map-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-1) var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-2);
    color: var(--nx-text-muted);
    font-family: inherit;
    font-size: var(--nx-text-xs);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
      color var(--nx-dur-fast) var(--nx-ease-out),
      border-color var(--nx-dur-fast) var(--nx-ease-out),
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
  }
  .nx-marker-map-chip i {
    inline-size: 0.55rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--nx-accent);
    opacity: 0.5;
    transition: opacity var(--nx-dur-fast) var(--nx-ease-out);
  }
  .nx-marker-map-chip[data-active] {
    color: var(--nx-text);
    border-color: var(--nx-accent);
    background: var(--nx-accent-soft);
  }
  .nx-marker-map-chip[data-active] i {
    opacity: 1;
  }
  .nx-marker-map-chip:active {
    scale: calc(1 - 0.04 * var(--nx-motion));
  }
  .nx-marker-map-chip:focus-visible {
    outline: 2px solid var(--nx-ring);
    outline-offset: 2px;
  }
  .nx-route-map {
    display: grid;
    gap: var(--nx-space-5);
    align-items: start;
    grid-template-columns: minmax(0, 1.55fr) minmax(15rem, 1fr);
  }
  .nx-route-map-ghost {
    fill: none;
    stroke: var(--nx-border-strong);
    stroke-width: 3;
    stroke-dasharray: 2 7;
    stroke-linecap: round;
  }
  .nx-route-map-line {
    fill: none;
    stroke: var(--nx-accent);
    stroke-width: 4.5;
    stroke-linecap: round;
  }
  .nx-route-map-pen {
    fill: none;
    stroke: white;
    stroke-width: 18;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: nx-route-map-draw var(--nx-spring-gentle-duration) var(--nx-spring-gentle) 0.15s forwards;
  }
  @keyframes nx-route-map-draw {
    to {
      stroke-dashoffset: 0;
    }
  }
  .nx-route-map-stop {
    opacity: 0;
    scale: 0.95;
    transform-box: fill-box;
    transform-origin: center;
    animation: nx-route-map-stop-in var(--nx-spring-snappy-duration) var(--nx-spring-snappy) both;
    animation-delay: calc(0.2s + var(--nx-i, 0) * 0.3s);
  }
  @keyframes nx-route-map-stop-in {
    to {
      opacity: 1;
      scale: 1;
    }
  }
  .nx-route-map-stop circle {
    fill: var(--nx-surface-2);
    stroke: var(--nx-accent);
    stroke-width: 3;
  }
  .nx-route-map-stop[data-end] circle {
    fill: var(--nx-accent);
  }
  .nx-route-map-stop text {
    fill: var(--nx-accent);
    font-family: var(--nx-font-sans);
    font-size: 9.5px;
    font-weight: 700;
    text-anchor: middle;
  }
  .nx-route-map-stop[data-end] text {
    fill: var(--nx-accent-contrast);
  }
  .nx-route-map-stop-name {
    fill: var(--nx-text);
    font-family: var(--nx-font-sans);
    font-size: 11px;
    font-weight: 600;
    paint-order: stroke;
    stroke: var(--nx-surface);
    stroke-width: 3px;
    stroke-linejoin: round;
  }
  .nx-route-map-panel {
    display: grid;
    gap: var(--nx-space-4);
    align-content: start;
    padding: var(--nx-space-5);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface-2);
  }
  .nx-route-map-title {
    margin: 0;
    font-size: var(--nx-text-base);
    font-weight: 700;
  }
  .nx-route-map-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nx-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-route-map-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-1);
    padding: 2px var(--nx-space-2);
    border-radius: var(--nx-radius-full);
    background: var(--nx-accent-soft);
    color: var(--nx-accent-text);
    font-size: var(--nx-text-xs);
    font-weight: 700;
  }
  .nx-route-map-steps {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-route-map-step {
    position: relative;
    display: grid;
    grid-template-columns: 1.7rem 1fr;
    gap: 2px var(--nx-space-3);
    align-items: baseline;
    padding-block: var(--nx-space-2);
  }
  .nx-route-map-step:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-inline-start: 0.8rem;
    inset-block: 1.5rem 0;
    border-inline-start: 2px dotted color-mix(in oklab, var(--nx-accent) 45%, transparent);
  }
  .nx-route-map-step i {
    display: grid;
    place-items: center;
    inline-size: 1.7rem;
    aspect-ratio: 1;
    border: 2px solid var(--nx-accent);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-2);
    color: var(--nx-accent);
    font-style: normal;
    font-size: var(--nx-text-xs);
    font-weight: 700;
    translate: 0 0.15rem;
  }
  .nx-route-map-step b {
    font-size: var(--nx-text-sm);
    font-weight: 700;
  }
  .nx-route-map-step small {
    grid-column: 2;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
  }
  .nx-route-map-step[data-end] i {
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
  }
  .nx-route-map-swap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-2) var(--nx-space-4);
    border: 0;
    border-radius: var(--nx-radius-full);
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
    font-family: inherit;
    font-size: var(--nx-text-sm);
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy), box-shadow var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-route-map-swap .nx-icon {
    inline-size: 0.95rem;
    block-size: 0.95rem;
  }
  .nx-route-map-swap:active {
    scale: calc(1 - 0.04 * var(--nx-motion));
  }
  .nx-route-map-swap:focus-visible {
    outline: 2px solid var(--nx-ring);
    outline-offset: 2px;
  }
  .nx-route-map-note {
    margin: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
  }
  .nx-store-locator {
    display: grid;
    gap: var(--nx-space-4);
    align-items: start;
    grid-template-columns: minmax(15rem, 1fr) minmax(0, 1.5fr);
  }
  .nx-store-locator-side {
    display: grid;
    gap: var(--nx-space-3);
    align-content: start;
  }
  .nx-store-locator-searchbox {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding-block: 2px;
    padding-inline: var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface-2);
    transition: border-color var(--nx-dur-fast) var(--nx-ease-out), box-shadow var(--nx-dur-fast) var(--nx-ease-out);
  }
  .nx-store-locator-searchbox:focus-within {
    border-color: var(--nx-accent);
    box-shadow: 0 0 0 3px var(--nx-accent-soft);
  }
  .nx-store-locator-searchbox .nx-icon {
    flex: none;
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--nx-text-muted);
  }
  .nx-store-locator-search {
    flex: 1;
    min-inline-size: 0;
    padding-block: var(--nx-space-2);
    border: 0;
    background: transparent;
    color: var(--nx-text);
    font-family: inherit;
    font-size: var(--nx-text-sm);
    line-height: 1.4;
  }
  .nx-store-locator-search::placeholder {
    color: var(--nx-text-muted);
  }
  .nx-store-locator-search:focus,
  .nx-store-locator-search:focus-visible {
    outline: none;
  }
  .nx-store-locator-clear {
    display: none;
    place-items: center;
    inline-size: 1.35rem;
    aspect-ratio: 1;
    border: 0;
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--nx-text) 8%, transparent);
    color: var(--nx-text-muted);
    font: inherit;
    cursor: pointer;
    transition: color var(--nx-dur-fast) var(--nx-ease-out), scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
  }
  .nx-store-locator[data-has-query] .nx-store-locator-clear {
    display: grid;
  }
  .nx-store-locator-clear .nx-icon {
    inline-size: 0.7rem;
    block-size: 0.7rem;
  }
  .nx-store-locator-clear:hover {
    color: var(--nx-text);
  }
  .nx-store-locator-clear:active {
    scale: calc(1 - 0.04 * var(--nx-motion));
  }
  .nx-store-locator-clear:focus-visible {
    outline: 2px solid var(--nx-ring);
    outline-offset: 1px;
  }
  .nx-store-locator-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nx-space-2);
  }
  .nx-store-locator-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-1) var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-2);
    color: var(--nx-text-muted);
    font-family: inherit;
    font-size: var(--nx-text-xs);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
      color var(--nx-dur-fast) var(--nx-ease-out),
      border-color var(--nx-dur-fast) var(--nx-ease-out),
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
  }
  .nx-store-locator-chip i {
    inline-size: 0.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--_tint, var(--nx-accent));
  }
  .nx-store-locator-chip[aria-pressed=true] {
    color: var(--nx-text);
    border-color: var(--_tint, var(--nx-accent));
    background: color-mix(in oklab, var(--_tint, var(--nx-accent)) 12%, transparent);
  }
  .nx-store-locator-chip:active {
    scale: calc(1 - 0.04 * var(--nx-motion));
  }
  .nx-store-locator-chip:focus-visible {
    outline: 2px solid var(--nx-ring);
    outline-offset: 2px;
  }
  .nx-store-locator-count {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    margin: 0;
    color: var(--nx-accent);
    font-size: var(--nx-text-xs);
    font-weight: 700;
  }
  .nx-store-locator-count::after {
    content: "";
    flex: 1;
    border-block-end: 1px dashed var(--nx-border-strong);
  }
  .nx-store-locator-list {
    display: grid;
    gap: var(--nx-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-store-locator-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2px var(--nx-space-2);
    align-items: center;
    inline-size: 100%;
    padding: var(--nx-space-2) var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface-2);
    color: var(--nx-text);
    font-family: inherit;
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
      border-color var(--nx-dur-fast) var(--nx-ease-out),
      box-shadow var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
  }
  .nx-store-locator-row[aria-current] {
    border-color: var(--_tint, var(--nx-accent));
    box-shadow: inset calc(2.5px * var(--nx-dir)) 0 0 var(--_tint, var(--nx-accent));
  }
  .nx-store-locator-row:active {
    scale: calc(1 - 0.04 * var(--nx-motion));
  }
  .nx-store-locator-row:focus-visible {
    outline: 2px solid var(--nx-ring);
    outline-offset: 2px;
  }
  .nx-store-locator-dot {
    inline-size: 0.65rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--_tint, var(--nx-accent));
  }
  .nx-store-locator-main {
    display: grid;
    gap: 1px;
    min-inline-size: 0;
  }
  .nx-store-locator-main b {
    font-size: var(--nx-text-sm);
    font-weight: 700;
    overflow-wrap: anywhere;
  }
  .nx-store-locator-main small {
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    overflow-wrap: anywhere;
  }
  .nx-store-locator-tag {
    padding: 2px var(--nx-space-2);
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--_tint, var(--nx-accent)) 16%, transparent);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    font-weight: 700;
  }
  .nx-store-locator-empty {
    display: grid;
    gap: var(--nx-space-2);
    justify-items: center;
    padding: var(--nx-space-5) var(--nx-space-4);
    border: 1.5px dashed var(--nx-border-strong);
    border-radius: var(--nx-radius-lg);
    text-align: center;
  }
  .nx-store-locator-empty .nx-icon {
    inline-size: 1.6rem;
    block-size: 1.6rem;
    color: var(--nx-text-muted);
  }
  .nx-store-locator-empty p {
    margin: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
  }
  .nx-store-locator-reset {
    padding: var(--nx-space-2) var(--nx-space-4);
    border: 0;
    border-radius: var(--nx-radius-full);
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
    font-family: inherit;
    font-size: var(--nx-text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
  }
  .nx-store-locator-reset:active {
    scale: calc(1 - 0.04 * var(--nx-motion));
  }
  .nx-store-locator-reset:focus-visible {
    outline: 2px solid var(--nx-ring);
    outline-offset: 2px;
  }
  .nx-store-locator-mapcol {
    display: grid;
    gap: var(--nx-space-2);
  }
  .nx-store-locator-world {
    position: absolute;
    inset: 0;
    inline-size: 155%;
    block-size: 155%;
    transition: translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
  }
  .nx-store-locator-world .nx-map-art {
    position: absolute;
    inset: 0;
  }
  .nx-store-locator-pin {
    animation: nx-store-locator-pin-in var(--nx-spring-snappy-duration) var(--nx-spring-snappy) backwards;
    animation-delay: calc(var(--nx-i, 0) * var(--nx-stagger));
  }
  @keyframes nx-store-locator-pin-in {
    from {
      opacity: 0;
      scale: 0.95;
      translate: -50% calc(-50% - (6px * var(--nx-motion)));
    }
  }
  .nx-store-locator-pop {
    --_gap: 1rem;
    inline-size: 9.5rem;
    transform-origin: 0% 50%;
    translate: calc(var(--_gap) - (6px * var(--nx-motion))) -50%;
  }
  .nx-store-locator-pop[data-open] {
    translate: var(--_gap) -50%;
  }
  .nx-store-locator-pop[data-flip] {
    transform-origin: 100% 50%;
    translate: calc(-100% - var(--_gap) + (6px * var(--nx-motion))) -50%;
  }
  .nx-store-locator-pop[data-flip][data-open] {
    translate: calc(-100% - var(--_gap)) -50%;
  }
  .nx-store-locator-pop .nx-map-pop-name {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }
  .nx-store-locator-citybadge {
    position: absolute;
    inset-block-start: var(--nx-space-3);
    inset-inline-start: var(--nx-space-3);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-1) var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-2);
    color: var(--nx-text);
    font-size: var(--nx-text-xs);
    font-weight: 700;
    pointer-events: none;
  }
  .nx-store-locator-citybadge i {
    inline-size: 0.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--_tint, var(--nx-accent));
  }
  .nx-store-locator-note {
    margin: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-map-pin:hover .nx-map-bead {
      scale: calc(1 + 0.25 * var(--nx-motion));
    }
    .nx-map-pin:hover .nx-map-label {
      opacity: 1;
      visibility: visible;
    }
    .nx-map-district:hover {
      fill: var(--nx-accent-soft);
    }
    .nx-marker-map-chip:hover {
      color: var(--nx-text);
      border-color: var(--nx-accent);
      background: var(--nx-accent-soft);
    }
    .nx-marker-map-chip:hover i {
      opacity: 1;
    }
    .nx-route-map-swap:hover {
      box-shadow: var(--nx-shadow-glow);
    }
    .nx-store-locator-chip:hover {
      color: var(--nx-text);
    }
    .nx-store-locator-row:hover {
      border-color: color-mix(in oklab, var(--_tint, var(--nx-accent)) 55%, var(--nx-border));
    }
  }
  @media (max-width: 48rem) {
    .nx-route-map {
      grid-template-columns: 1fr;
    }
    .nx-store-locator {
      grid-template-columns: 1fr;
    }
    .nx-store-locator-mapcol {
      order: -1;
    }
  }
  @media (max-width: 30rem) {
    .nx-map-pop {
      inline-size: 10rem;
    }
    .nx-map-thumb {
      block-size: 2.75rem;
    }
    .nx-store-locator-pop {
      inline-size: 8.5rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-route-map-pen {
      animation: none;
      stroke-dashoffset: 0;
    }
    .nx-route-map-stop {
      animation: none;
      opacity: 1;
      scale: 1;
    }
    .nx-store-locator-pin {
      animation: none;
    }
    .nx-store-locator-world {
      transition: none;
    }
    .nx-map-pin[aria-expanded=true] .nx-map-bead::after,
    .nx-map-pin[aria-pressed=true] .nx-map-bead::after {
      animation: none;
      opacity: 0.5;
    }
  }
}

/* src/css/blocks/motion-fx.css */
@layer nx.components {
  .nx-spotlight-grid {
    position: relative;
    isolation: isolate;
    overflow: clip;
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface-2);
    padding: clamp(var(--nx-space-4), 3vw, var(--nx-space-6));
  }
  .nx-spotlight-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(
        calc(var(--nx-spot-r, 260px) * 2) circle at var(--nx-spot-x, 50%) var(--nx-spot-y, 10%),
        var(--nx-accent-soft),
        transparent 70%);
    opacity: 0;
    transition: opacity var(--nx-dur-slow) var(--nx-ease-out);
    pointer-events: none;
  }
  .nx-spotlight-grid[data-spot]::before {
    opacity: 1;
  }
  .nx-spotlight-list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--nx-space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    & > li {
      display: grid;
    }
  }
  .nx-spotlight-card {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: var(--nx-space-2);
    align-content: start;
    padding: var(--nx-space-5);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
    color: var(--nx-text);
    transition:
      background-color var(--nx-dur-base) var(--nx-ease-out),
      border-color var(--nx-dur-base) var(--nx-ease-out),
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    &::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: inherit;
      padding: 1px;
      background:
        radial-gradient(
          16rem circle at var(--nx-px, 50%) var(--nx-py, 50%),
          color-mix(in oklab, var(--nx-accent) 85%, var(--nx-glow)),
          transparent 60%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
      opacity: 0;
      transition: opacity var(--nx-dur-base) var(--nx-ease-out);
      pointer-events: none;
    }
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: inherit;
      background:
        radial-gradient(
          14rem circle at var(--nx-px, 50%) var(--nx-py, 50%),
          var(--nx-accent-soft),
          transparent 65%);
      opacity: 0;
      transition: opacity var(--nx-dur-base) var(--nx-ease-out);
      pointer-events: none;
    }
    &:is([data-hot], :focus-within)::before,
    &:is([data-hot], :focus-within)::after {
      opacity: 1;
    }
  }
  .nx-spotlight-card:is([data-hot], :focus-within) {
    border-color: var(--nx-accent-border);
    & .nx-spotlight-title {
      color: var(--nx-accent-text);
    }
  }
  .nx-spotlight-title {
    margin: 0;
    font-size: var(--nx-text-md);
    font-weight: 650;
    line-height: 1.3;
    & a {
      color: inherit;
      text-decoration: none;
      &:focus-visible {
        outline: 2px solid var(--nx-ring);
        outline-offset: 3px;
        border-radius: var(--nx-radius-xs);
      }
    }
  }
  .nx-spotlight-note {
    margin: 0;
    font-size: var(--nx-text-sm);
    line-height: 1.7;
    color: var(--nx-text-muted);
  }
  .nx-spotlight-meta {
    justify-self: start;
    margin-block-start: var(--nx-space-1);
    padding: 0.25rem var(--nx-space-2);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--nx-tracking-wide);
    color: var(--nx-text-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-spotlight-card:hover {
      translate: 0 calc(-2px * var(--nx-motion));
      border-color: var(--nx-border-strong);
    }
  }
  .nx-cursor-halo {
    position: relative;
    overflow: clip;
  }
  .nx-cursor-halo-ring,
  .nx-cursor-halo-dot {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 0;
    block-size: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-cursor-halo-ring {
    z-index: 3;
  }
  .nx-cursor-halo-dot {
    z-index: 4;
  }
  .nx-cursor-halo[data-active] .nx-cursor-halo-ring,
  .nx-cursor-halo[data-active] .nx-cursor-halo-dot {
    opacity: 1;
  }
  .nx-cursor-halo-face {
    position: absolute;
    display: grid;
    place-items: center;
    translate: -50% -50%;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border: 1.5px solid var(--nx-border-strong);
    border-radius: var(--nx-radius-full);
    color: transparent;
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-sans);
    white-space: nowrap;
    transition-property:
      inline-size,
      block-size,
      scale,
      background-color,
      color,
      border-color;
    transition-duration: var(--nx-dur-fast);
    transition-timing-function: var(--nx-ease-out);
  }
  .nx-cursor-halo-dot::before {
    content: "";
    position: absolute;
    translate: -50% -50%;
    inline-size: 5px;
    block-size: 5px;
    border-radius: 50%;
    background: var(--nx-text);
  }
  .nx-cursor-halo[data-mode=link] .nx-cursor-halo-face {
    inline-size: clamp(4rem, 18vw, 6rem);
    block-size: 3rem;
    background: color-mix(in oklab, var(--nx-text) 8%, transparent);
    border-color: var(--nx-accent);
  }
  .nx-cursor-halo[data-mode=text] .nx-cursor-halo-face {
    inline-size: 4px;
    block-size: 30px;
    border-radius: 2px;
    background: var(--nx-accent);
    border-color: transparent;
  }
  .nx-cursor-halo[data-mode=play] .nx-cursor-halo-face {
    inline-size: 4.5rem;
    block-size: 4.5rem;
    background: var(--nx-text);
    border-color: var(--nx-text);
    color: var(--nx-bg);
  }
  .nx-cursor-halo[data-pressed] .nx-cursor-halo-face {
    scale: calc(1 - 0.05 * var(--nx-motion));
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-cursor-halo[data-fx][data-hide-cursor],
    .nx-cursor-halo[data-fx][data-hide-cursor] :is(a, button, summary, label) {
      cursor: none;
    }
  }
  @media (pointer: coarse) {
    .nx-cursor-halo-ring,
    .nx-cursor-halo-dot {
      display: none;
    }
  }
  .nx-marquee-wall {
    display: grid;
    gap: var(--nx-space-4);
    justify-items: center;
  }
  .nx-marquee-wall-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2) var(--nx-space-4);
  }
  :is(.nx-marquee-flip, .nx-marquee-park) {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-2) var(--nx-space-4);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    color: var(--nx-text);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    cursor: pointer;
    transition-property:
      border-color,
      color,
      scale;
    transition-duration:
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-spring-snappy-duration);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-snappy);
    &:hover {
      border-color: var(--nx-accent-border);
      color: var(--nx-accent-text);
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    & .nx-icon {
      inline-size: 0.95rem;
      block-size: 0.95rem;
      transition: rotate var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
    }
  }
  .nx-marquee-wall[data-reversed] .nx-marquee-flip .nx-icon {
    rotate: 180deg;
  }
  .nx-marquee-park[aria-pressed=true] {
    color: var(--nx-accent-text);
    border-color: var(--nx-accent-border);
  }
  .nx-marquee-wall-rows {
    display: grid;
    gap: var(--nx-space-3);
    inline-size: 100%;
    border-block: 1px solid var(--nx-border);
    padding-block: var(--nx-space-4);
  }
  .nx-marquee-wall-row {
    inline-size: 100%;
  }
  .nx-marquee-wall[data-paused] .nx-marquee-track {
    animation-play-state: paused;
  }
  .nx-marquee-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: var(--nx-space-3);
    inline-size: min(21rem, 82vw);
    padding: var(--nx-space-3) var(--nx-space-4);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
  }
  .nx-marquee-avatar {
    display: grid;
    place-items: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    border-radius: var(--nx-radius-full);
    background:
      linear-gradient(
        135deg,
        var(--nx-accent),
        var(--nx-cyan-400));
    color: var(--nx-ink-50);
    font: 700 var(--nx-text-xs) / 1 var(--nx-font-sans);
  }
  .nx-marquee-quote {
    display: grid;
    gap: 0.15rem;
    min-inline-size: 0;
    & blockquote {
      margin: 0;
      font-size: var(--nx-text-sm);
      line-height: 1.7;
      color: var(--nx-text);
    }
  }
  .nx-marquee-caption {
    font-size: var(--nx-text-xs);
    color: var(--nx-text-muted);
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-spotlight-grid::before {
      background:
        radial-gradient(
          calc(var(--nx-spot-r, 260px) * 2) circle at 50% 18%,
          var(--nx-accent-soft),
          transparent 70%);
      opacity: 1;
      transition: none;
    }
    .nx-spotlight-card,
    .nx-spotlight-card::before,
    .nx-spotlight-card::after {
      transition: none;
    }
    .nx-cursor-halo-ring,
    .nx-cursor-halo-dot,
    .nx-cursor-halo-face {
      transition-duration: 1ms;
    }
    .nx-marquee-flip .nx-icon {
      transition: none;
    }
  }
}

/* src/css/blocks/navbars.css */
@layer nx.components {
  .nx-floating-nav {
    --_pad: 0.5rem;
    position: sticky;
    inset-block-start: var(--nx-space-3);
    z-index: var(--nx-z-sticky);
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    inline-size: fit-content;
    max-inline-size: calc(100% - var(--nx-space-4));
    margin-inline: auto;
    padding: var(--_pad) var(--_pad) var(--_pad) var(--nx-space-3);
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--nx-surface) 88%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--nx-shadow-md);
    transition:
      padding var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      gap var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      background-color var(--nx-dur-base) var(--nx-ease-out),
      box-shadow var(--nx-dur-base) var(--nx-ease-out);
    &[data-condensed] {
      --_pad: 0.25rem;
      gap: 0.25rem;
      padding-inline: 0.375rem;
      background: color-mix(in oklab, var(--nx-surface) 96%, transparent);
      box-shadow: var(--nx-shadow-lg);
    }
  }
  .nx-floating-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    color: var(--nx-text);
    font-size: var(--nx-text-sm);
    font-weight: 700;
    letter-spacing: var(--nx-tracking-tight);
    text-decoration: none;
    white-space: nowrap;
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-floating-nav-mark {
    flex: none;
    inline-size: 1.2rem;
    block-size: 1.2rem;
    border-radius: var(--nx-radius-full);
    background:
      conic-gradient(
        from 210deg,
        var(--nx-lapis-400),
        var(--nx-violet-500),
        var(--nx-cyan-400),
        var(--nx-lapis-400));
    box-shadow: inset 0 1px 0 var(--nx-highlight);
  }
  .nx-floating-nav-word {
    max-inline-size: 6rem;
    overflow: clip;
    transition: max-inline-size var(--nx-spring-gentle-duration) var(--nx-spring-gentle), opacity var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-floating-nav[data-condensed] .nx-floating-nav-word {
    max-inline-size: 0;
    opacity: 0;
  }
  .nx-floating-nav-links {
    position: relative;
    isolation: isolate;
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-floating-nav-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-1);
    padding: 0.4rem 0.8rem;
    border: 0;
    border-radius: var(--nx-radius-full);
    background: none;
    color: var(--nx-text-muted);
    font: inherit;
    font-size: var(--nx-text-sm);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--nx-dur-fast) var(--nx-ease-out), padding var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    &:hover {
      color: var(--nx-text);
    }
    &:is([aria-current=page]) {
      color: var(--nx-text);
      font-weight: 650;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-floating-nav[data-condensed] .nx-floating-nav-link {
    padding: 0.3rem 0.65rem;
    font-size: var(--nx-text-xs);
  }
  .nx-floating-nav-pill {
    margin: 3px 2px;
    inline-size: calc(var(--nx-ind-w, 0px) - 4px);
    block-size: calc(var(--nx-ind-h, 0px) - 6px);
    border-radius: var(--nx-radius-full);
    background: var(--nx-accent-soft);
    box-shadow: inset 0 0 0 1px var(--nx-accent-border), inset 0 1px 0 var(--nx-highlight);
  }
  .nx-floating-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-1);
    min-block-size: 2.25rem;
    padding-inline: var(--nx-space-4);
    border-radius: var(--nx-radius-full);
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
    font: inherit;
    font-size: var(--nx-text-sm);
    font-weight: 650;
    letter-spacing: var(--nx-tracking-tight);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy),
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      padding var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      min-block-size var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    & .nx-icon {
      inline-size: 0.95em;
      block-size: 0.95em;
    }
    &:active:not(:disabled, [aria-disabled=true], [data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-floating-nav[data-condensed] .nx-floating-nav-cta {
    min-block-size: 1.95rem;
    padding-inline: 0.8rem;
    font-size: var(--nx-text-xs);
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-floating-nav-cta:hover:not(:disabled, [aria-disabled=true]) {
      background: var(--nx-accent-hover);
    }
  }
  .nx-glassbar {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: var(--nx-z-sticky);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nx-space-3) var(--nx-space-5);
    padding: var(--nx-space-3) var(--nx-space-5);
    color: var(--nx-text);
    background: var(--nx-glass-tint);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow:
      inset 0 1px 0 color-mix(in oklab, var(--nx-glass-rim) 45%, transparent),
      inset 0 -1px 0 color-mix(in oklab, var(--nx-glass-rim-soft) 70%, transparent),
      0 10px 30px -18px var(--nx-glass-shade);
    &[data-position=sticky] {
      position: sticky;
    }
  }
  .nx-glassbar-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    color: var(--nx-text);
    font-size: var(--nx-text-sm);
    font-weight: 700;
    letter-spacing: var(--nx-tracking-tight);
    text-decoration: none;
    white-space: nowrap;
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-glassbar-mark {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 1.2rem;
    block-size: 1.2rem;
    border-radius: var(--nx-radius-xs);
    background: var(--nx-glass-tint-hover);
    box-shadow: inset 0 1px 0 color-mix(in oklab, var(--nx-glass-rim) 45%, transparent), inset 0 0 0 1px var(--nx-glass-rim-soft);
  }
  .nx-glassbar-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-glassbar-link {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-1);
    padding: 0.5rem 0.9rem;
    border-radius: var(--nx-radius-full);
    color: var(--nx-text-muted);
    font: 500 var(--nx-text-sm) / 1 var(--nx-font-sans);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
      color var(--nx-dur-fast) var(--nx-ease-out),
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      box-shadow var(--nx-dur-fast) var(--nx-ease-out);
    & .nx-icon {
      inline-size: 1em;
      block-size: 1em;
    }
    &:is(:hover, :focus-visible) {
      color: var(--nx-text);
      background: var(--nx-glass-tint-hover);
      box-shadow: inset 0 1px 0 color-mix(in oklab, var(--nx-glass-rim) 40%, transparent);
    }
    &:is([aria-current=page]) {
      color: var(--nx-text);
      background: var(--nx-glass-tint-hover);
      box-shadow: inset 0 1px 0 color-mix(in oklab, var(--nx-glass-rim) 40%, transparent);
      font-weight: 650;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-glassbar-end {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
  }
  .nx-glassbar-tool {
    display: grid;
    place-items: center;
    inline-size: 2.15rem;
    block-size: 2.15rem;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-full);
    background: var(--nx-glass-tint-hover);
    color: var(--nx-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: inset 0 1px 0 color-mix(in oklab, var(--nx-glass-rim) 30%, transparent);
    transition: scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy), background-color var(--nx-dur-fast) var(--nx-ease-out);
    & .nx-icon {
      inline-size: 1.05rem;
      block-size: 1.05rem;
    }
    &:active:not(:disabled, [aria-disabled=true], [data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:hover {
      background: color-mix(in oklab, var(--nx-glass-tint-hover) 60%, var(--nx-surface));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-glassbar-avatar {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 2.15rem;
    block-size: 2.15rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-glass-tint-hover);
    color: var(--nx-text);
    font-size: var(--nx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nx-tracking-tight);
    &::after {
      content: "";
      position: absolute;
      inset: -3px;
      z-index: -1;
      border-radius: var(--nx-radius-full);
      background:
        conic-gradient(
          var(--nx-chart-4),
          var(--nx-chart-6),
          var(--nx-chart-2),
          var(--nx-chart-4));
    }
  }
  .nx-mega {
    position: relative;
    display: inline-flex;
    max-inline-size: 100%;
  }
  .nx-mega-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nx-space-2) var(--nx-space-4);
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--nx-surface) 90%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--nx-shadow-md);
  }
  .nx-mega-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    color: var(--nx-text);
    font-size: var(--nx-text-sm);
    font-weight: 700;
    letter-spacing: var(--nx-tracking-tight);
    text-decoration: none;
    white-space: nowrap;
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-mega-mark {
    flex: none;
    inline-size: 1.2rem;
    block-size: 1.2rem;
    border-radius: var(--nx-radius-xs);
    background:
      conic-gradient(
        from 210deg,
        var(--nx-lapis-400),
        var(--nx-violet-500),
        var(--nx-cyan-400),
        var(--nx-lapis-400));
    box-shadow: inset 0 1px 0 var(--nx-highlight);
  }
  .nx-mega-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-1);
    padding: 0.5rem 0.8rem;
    border: 0;
    border-radius: var(--nx-radius-full);
    background: none;
    color: var(--nx-text);
    font: 500 var(--nx-text-sm) / 1 var(--nx-font-sans);
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color var(--nx-dur-fast) var(--nx-ease-out),
      color var(--nx-dur-fast) var(--nx-ease-out),
      scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
    & .nx-icon {
      inline-size: 0.9em;
      block-size: 0.9em;
      transition: rotate var(--nx-dur-base) var(--nx-spring-snappy);
    }
    &:hover {
      background: var(--nx-surface-2);
    }
    &:active:not(:disabled, [data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &[aria-expanded=true] {
      background: var(--nx-accent-soft);
      color: var(--nx-accent-text);
      font-weight: 650;
      & .nx-icon {
        rotate: 180deg;
      }
    }
  }
  .nx-mega-link {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-1);
    padding: 0.5rem 0.8rem;
    border-radius: var(--nx-radius-full);
    color: var(--nx-text-muted);
    font: 500 var(--nx-text-sm) / 1 var(--nx-font-sans);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--nx-dur-fast) var(--nx-ease-out), background-color var(--nx-dur-fast) var(--nx-ease-out);
    &:hover {
      color: var(--nx-text);
      background: var(--nx-surface-2);
    }
    &:is([aria-current=page]) {
      color: var(--nx-text);
      font-weight: 650;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-mega-end {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
  }
  .nx-mega-panel {
    position: absolute;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline-start: 0;
    z-index: var(--nx-z-dropdown);
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(12.5rem, 1fr);
    gap: var(--nx-space-5);
    inline-size: max-content;
    max-inline-size: min(56rem, 92vw);
    padding: var(--nx-space-5);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-xl);
    transform-origin: top;
    transition:
      opacity var(--nx-dur-base) var(--nx-ease-out),
      translate var(--nx-dur-base) var(--nx-ease-out),
      scale var(--nx-dur-base) var(--nx-ease-out);
    @starting-style {
      opacity: 0;
      translate: 0 calc(-6px * var(--nx-motion));
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &[data-state=closing] {
      opacity: 0;
      translate: 0 calc(-4px * var(--nx-motion));
      pointer-events: none;
      transition-duration: 150ms;
      transition-timing-function: var(--nx-ease-in);
    }
  }
  .nx-mega-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nx-space-4) var(--nx-space-5);
  }
  .nx-mega-group {
    display: grid;
    gap: var(--nx-space-1);
    align-content: start;
  }
  .nx-mega-heading {
    margin: 0 0 var(--nx-space-1);
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    font-weight: 650;
    letter-spacing: var(--nx-tracking-wider);
    text-transform: uppercase;
  }
  .nx-mega-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--nx-space-2);
    align-items: center;
    padding: 0.5rem 0.6rem;
    border-radius: var(--nx-radius-md);
    color: var(--nx-text);
    text-decoration: none;
    transition: background-color var(--nx-dur-fast) var(--nx-ease-out);
    & b {
      font-size: var(--nx-text-sm);
      font-weight: 600;
    }
    & span {
      grid-column: 2;
      color: var(--nx-text-muted);
      font-size: var(--nx-text-xs);
      line-height: 1.5;
    }
    &:hover {
      background: var(--nx-surface-2);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-mega-item-icon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--nx-radius-sm);
    background: var(--nx-accent-soft);
    color: var(--nx-accent-text);
    transition: background-color var(--nx-dur-fast) var(--nx-ease-out);
    & .nx-icon {
      inline-size: 1.05rem;
      block-size: 1.05rem;
    }
  }
  .nx-mega-item:hover .nx-mega-item-icon {
    background: color-mix(in oklab, var(--nx-accent) 16%, transparent);
  }
  .nx-mega-promo {
    position: relative;
    display: grid;
    gap: var(--nx-space-2);
    align-content: start;
    padding: var(--nx-space-4);
    overflow: clip;
    border-radius: var(--nx-radius-lg);
    background: var(--nx-gradient-brand);
    color: var(--nx-ink-50);
    &::after {
      content: "";
      position: absolute;
      inset-block-start: -40%;
      inset-inline-end: -30%;
      block-size: 10rem;
      inline-size: 10rem;
      border-radius: 50%;
      background: color-mix(in oklab, var(--nx-ink-50) 18%, transparent);
      filter: blur(6px);
      pointer-events: none;
    }
  }
  .nx-mega-promo-title {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    font-size: var(--nx-text-sm);
    font-weight: 700;
    & .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }
  .nx-mega-promo-body {
    position: relative;
    margin: 0;
    font-size: var(--nx-text-xs);
    line-height: 1.6;
    opacity: 0.92;
  }
  .nx-mega-promo-action {
    position: relative;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-1);
    margin-block-start: var(--nx-space-1);
    padding: 0.45rem 0.9rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-ink-50);
    color: var(--nx-accent-text);
    font: 650 var(--nx-text-xs) / 1 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-tight);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy), filter var(--nx-dur-fast) var(--nx-ease-out);
    &:active:not(:disabled, [aria-disabled=true], [data-static]) {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  @media (max-width: 40rem) {
    .nx-mega-panel {
      grid-template-columns: minmax(0, 1fr);
    }
    .nx-mega-cols {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-mega-trigger .nx-icon {
      transition: none;
    }
    .nx-mega-panel {
      transition-duration: 120ms;
    }
    .nx-mega-panel[data-state=closing] {
      transition-duration: 90ms;
    }
  }
}

/* src/css/blocks/scroll.css */
@layer nx.components {
  .nx-scroll-stage {
    --_inset: 4.5rem;
    --_pages: 2;
    --_zone: 88vh;
    --_board: 40rem;
    --_card: 34rem;
    position: relative;
    display: grid;
    overflow: clip;
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface-2);
    color: var(--nx-text);
    &[data-mode=horizontal],
    &[data-mode=zoom] {
      block-size: calc((1 + var(--_pages)) * 100vh);
    }
  }
  .nx-scroll-view {
    position: sticky;
    inset-block-start: var(--_inset);
    display: grid;
    gap: var(--nx-space-4);
    align-content: center;
    inline-size: min(100%, var(--_board));
    margin-inline: auto;
    padding: var(--nx-space-4);
  }
  .nx-scroll-stage[data-mode=horizontal] .nx-scroll-view {
    grid-template-rows: auto 1fr auto;
    align-content: start;
    block-size: min(calc(100vh - var(--_inset) - var(--nx-space-4)), 44rem);
  }
  .nx-scroll-head {
    display: grid;
    gap: var(--nx-space-1);
    justify-items: center;
    text-align: center;
    &[data-roadmap] {
      grid-template-columns: 1fr auto;
      align-items: center;
      justify-items: start;
      gap: var(--nx-space-3);
      inline-size: 100%;
      text-align: start;
    }
    & .nx-scroll-title {
      margin: 0;
      font: 700 var(--nx-text-xl) / 1.2 var(--nx-font-display);
      letter-spacing: var(--nx-tracking-tight);
    }
    & .nx-scroll-subtitle {
      margin: 0;
      max-inline-size: 56ch;
      color: var(--nx-text-muted);
      font-size: var(--nx-text-sm);
    }
  }
  .nx-scroll-meter-group {
    display: grid;
    gap: var(--nx-space-2);
  }
  .nx-scroll-meter {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-1) var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    font-size: var(--nx-text-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    & i {
      inline-size: 0.55rem;
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--nx-accent);
    }
  }
  .nx-scroll-bar {
    block-size: 4px;
    overflow: clip;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-3);
  }
  .nx-scroll-bar-fill {
    display: block;
    block-size: 100%;
    border-radius: inherit;
    background:
      linear-gradient(
        90deg,
        var(--nx-accent),
        color-mix(in oklab, var(--nx-accent) 65%, var(--nx-cyan-400)));
    scale: var(--nx-stage, 0) 1;
    transform-origin: 0 50%;
  }
  :dir(rtl) .nx-scroll-bar-fill {
    background:
      linear-gradient(
        270deg,
        var(--nx-accent),
        color-mix(in oklab, var(--nx-accent) 65%, var(--nx-cyan-400)));
    transform-origin: 100% 50%;
  }
  .nx-scroll-readout {
    margin: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    font-variant-numeric: tabular-nums;
    text-align: center;
  }
  .nx-scroll-zone {
    display: grid;
    block-size: var(--_zone);
  }
  .nx-scroll-card {
    --nx-buried: 0;
    --_accent: var(--nx-accent);
    position: sticky;
    inset-block-start: calc(var(--_inset) + var(--nx-i, 0) * 0.875rem);
    justify-self: center;
    inline-size: min(100%, var(--_card));
    margin-inline: auto;
    padding: clamp(var(--nx-space-4), 3vw, var(--nx-space-6));
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-lg);
    scale: calc(1 - var(--nx-buried) * 0.06 * var(--nx-motion));
    opacity: calc(1 - var(--nx-buried) * 0.55);
    &::before {
      content: "";
      position: absolute;
      inset-block-start: 0;
      inset-inline: var(--nx-space-6);
      block-size: 3px;
      border-radius: var(--nx-radius-full);
      background: var(--_accent);
    }
  }
  .nx-scroll-card-icon {
    display: inline-flex;
    margin-inline-end: var(--nx-space-2);
    color: var(--_accent);
    vertical-align: -0.155em;
    & .nx-icon {
      inline-size: 1.1rem;
      block-size: 1.1rem;
    }
  }
  .nx-scroll-card-kicker {
    margin: 0;
    color: var(--_accent);
    font-size: var(--nx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nx-tracking-wide);
    text-transform: uppercase;
  }
  .nx-scroll-card-title {
    margin: var(--nx-space-1) 0 0;
    font: 700 var(--nx-text-xl) / 1.2 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
  }
  .nx-scroll-card-text {
    margin: var(--nx-space-2) 0 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
  }
  .nx-scroll-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nx-space-3);
    margin-block-start: var(--nx-space-5);
    padding-block-start: var(--nx-space-4);
    border-block-start: 1px dashed var(--nx-border);
  }
  .nx-scroll-card-chip {
    margin-inline-start: auto;
    padding: var(--nx-space-1) var(--nx-space-3);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-3);
    font-size: var(--nx-text-xs);
    font-weight: 600;
  }
  .nx-scroll-lane {
    position: relative;
    display: grid;
    overflow: clip;
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
  }
  .nx-scroll-track {
    display: flex;
    align-items: stretch;
    gap: clamp(var(--nx-space-3), 2.5vw, var(--nx-space-5));
    block-size: 100%;
    inline-size: max-content;
    margin: 0;
    padding-inline: clamp(var(--nx-space-2), 2vw, var(--nx-space-5));
    list-style: none;
    translate: calc(var(--nx-stage, 0) * var(--nx-shift, 0px) * -1 * var(--nx-dir) * var(--nx-motion)) 0;
  }
  .nx-scroll-panel {
    display: grid;
    grid-template-rows: auto 1fr;
    inline-size: min(76vw, 24rem);
    margin: 0;
    overflow: clip;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-md);
  }
  .nx-scroll-panel-media {
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 10;
    background: var(--nx-surface-3);
    & > :is(img, svg) {
      display: block;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      outline: 1px solid var(--nx-glass-edge);
      outline-offset: -1px;
    }
  }
  .nx-scroll-panel-cap {
    display: grid;
    gap: var(--nx-space-2);
    align-content: start;
    padding: var(--nx-space-3) var(--nx-space-4) var(--nx-space-4);
    & .nx-scroll-panel-title {
      margin: 0;
      font: 700 var(--nx-text-md) / 1.3 var(--nx-font-display);
      letter-spacing: var(--nx-tracking-tight);
    }
  }
  .nx-scroll-panel-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nx-space-2);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
  }
  .nx-scroll-state {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-1);
    padding: calc(var(--nx-space-1) / 2) var(--nx-space-2);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-3);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    & i {
      inline-size: 0.5rem;
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--nx-success);
    }
    &[data-state=canary] i,
    &[data-state=building] i {
      background: var(--nx-warning);
    }
    &[data-state=design] i {
      background: var(--nx-accent);
    }
    &[data-state=scheduled] i {
      background: var(--nx-text-subtle);
    }
  }
  .nx-scroll-rail {
    position: relative;
    display: grid;
    gap: var(--nx-space-4);
    margin: 0;
    padding: 0;
    padding-block-start: var(--nx-space-1);
    list-style: none;
  }
  .nx-scroll-line {
    position: absolute;
    inset-block: var(--nx-space-1) var(--nx-space-6);
    inset-inline-start: 1.02rem;
    inline-size: 3px;
    overflow: clip;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-3);
  }
  .nx-scroll-fill {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    border-radius: inherit;
    background: var(--nx-accent);
    scale: 1 var(--nx-stage, 0);
    transform-origin: 50% 0;
  }
  .nx-scroll-stop {
    --nx-gate: 0;
    position: relative;
    padding-inline-start: 2.9rem;
  }
  .nx-scroll-node {
    position: absolute;
    inset-block-start: 0.95rem;
    inset-inline-start: 0.47rem;
    inline-size: 1.1rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: color-mix(in oklab, var(--nx-success) calc(var(--nx-gate) * 100%), var(--nx-surface-3));
    box-shadow: 0 0 0 calc(var(--nx-gate) * 4px * var(--nx-motion)) color-mix(in oklab, var(--nx-success) 22%, transparent);
    scale: calc(1 - (1 - var(--nx-gate)) * 0.4 * var(--nx-motion));
  }
  .nx-scroll-station {
    display: grid;
    gap: var(--nx-space-1);
    padding: var(--nx-space-4) var(--nx-space-5);
    border: 1px solid var(--nx-border);
    border-inline-start: 3px solid color-mix(in oklab, var(--nx-accent) calc(var(--nx-gate) * 100%), var(--nx-border));
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
    scale: calc(1 - (1 - var(--nx-gate)) * 0.26 * var(--nx-motion));
    opacity: calc(0.25 + 0.75 * var(--nx-gate));
    filter: blur(calc((1 - var(--nx-gate)) * 6px * var(--nx-motion)));
    translate: calc((1 - var(--nx-gate)) * 12px * var(--nx-motion) * var(--nx-dir)) 0;
  }
  .nx-scroll-station-kicker {
    color: var(--nx-text-subtle);
    font-size: var(--nx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nx-tracking-wide);
    text-transform: uppercase;
  }
  .nx-scroll-station-title {
    margin: 0;
    font: 700 var(--nx-text-md) / 1.3 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
  }
  .nx-scroll-station-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nx-space-2);
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
  }
  .nx-scroll-station-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nx-space-2);
    margin-block-start: var(--nx-space-1);
  }
  .nx-scroll-station[data-cta] {
    gap: var(--nx-space-2);
    border: 0;
    border-inline-start: 3px solid var(--nx-gold);
    background:
      linear-gradient(
        135deg,
        var(--nx-lapis-700),
        color-mix(in oklab, var(--nx-lapis-700) 55%, var(--nx-ink-950)));
    color: var(--nx-lapis-50);
    & .nx-scroll-station-kicker {
      color: color-mix(in oklab, var(--nx-lapis-50) 75%, transparent);
    }
    & .nx-scroll-station-text {
      margin: 0;
      color: color-mix(in oklab, var(--nx-lapis-50) 85%, transparent);
      font-size: var(--nx-text-sm);
    }
  }
  .nx-scroll-stop:has(.nx-scroll-station[data-cta]) .nx-scroll-node {
    background: color-mix(in oklab, var(--nx-gold) calc(var(--nx-gate) * 100%), var(--nx-surface-3));
    box-shadow: 0 0 0 calc(var(--nx-gate) * 4px * var(--nx-motion)) color-mix(in oklab, var(--nx-gold) 25%, transparent);
  }
  @media (max-width: 480px) {
    .nx-scroll-stage {
      --_inset: 3.25rem;
      --_zone: 84vh;
    }
    .nx-scroll-panel {
      inline-size: 80vw;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-scroll-track {
      translate: none;
    }
    .nx-scroll-lane {
      overflow-x: auto;
      overscroll-behavior-inline: contain;
    }
  }
}

/* src/css/blocks/sections.css */
@layer nx.components {
  .nx-pricing-section {
    display: grid;
    gap: var(--nx-space-8);
    justify-items: center;
  }
  .nx-pricing-section-head {
    display: grid;
    gap: var(--nx-space-3);
    justify-items: center;
    max-inline-size: 46ch;
    text-align: center;
  }
  .nx-pricing-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: 0.35rem 0.85rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-2);
    color: var(--nx-text-muted);
    box-shadow: inset 0 0 0 1px var(--nx-border);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    white-space: nowrap;
    &::before {
      content: "";
      inline-size: 0.45rem;
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--nx-success);
    }
  }
  .nx-pricing-section-title {
    margin: 0;
    font: 800 clamp(1.5rem, 3.4vw, 2.15rem) / 1.2 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
    color: var(--nx-text);
    text-wrap: balance;
  }
  .nx-pricing-section-subtitle {
    margin: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    line-height: 1.7;
    text-wrap: pretty;
  }
  .nx-pricing-section-toggle {
    position: relative;
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    padding: 3px;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    box-shadow: inset 0 0 0 1px var(--nx-border);
  }
  .nx-pricing-section-toggle-thumb {
    position: absolute;
    inset-block: 3px;
    inset-inline-start: 3px;
    inline-size: calc(50% - 3px);
    border-radius: var(--nx-radius-full);
    background: var(--nx-accent);
    transition: translate var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
  }
  .nx-pricing-section-toggle[data-interval=yearly] .nx-pricing-section-toggle-thumb {
    translate: calc(100% * var(--nx-dir)) 0;
  }
  .nx-pricing-section-toggle-button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    padding: 0.6rem 1.25rem;
    border: 0;
    border-radius: var(--nx-radius-full);
    background: transparent;
    color: var(--nx-text-muted);
    font: 600 var(--nx-text-sm) / 1.2 var(--nx-font-sans);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--nx-dur-base) var(--nx-ease-out);
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &[aria-pressed=true] {
      color: var(--nx-accent-contrast);
    }
  }
  .nx-pricing-section-save {
    padding: 0.16rem 0.55rem;
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--nx-ink-950) 22%, transparent);
    color: var(--nx-accent-contrast);
    font-size: 0.68rem;
    font-weight: 700;
    font-style: normal;
    white-space: nowrap;
    opacity: 0;
    scale: calc(1 - 0.12 * var(--nx-motion));
    transition: opacity var(--nx-dur-base) var(--nx-ease-out), scale var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
  }
  .nx-pricing-section-toggle-button[aria-pressed=true] .nx-pricing-section-save {
    opacity: 1;
    scale: 1;
  }
  .nx-pricing-section-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--nx-space-5);
    align-items: start;
    inline-size: 100%;
    max-inline-size: 62rem;
  }
  .nx-pricing-section-card {
    position: relative;
    display: grid;
    gap: var(--nx-space-4);
    align-content: start;
    padding: var(--nx-space-6) var(--nx-space-5);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    box-shadow: inset 0 0 0 1px var(--nx-border), var(--nx-shadow-sm);
    transition: translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle), box-shadow var(--nx-dur-base) var(--nx-ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-pricing-section-card:hover {
      translate: 0 calc(-3px * var(--nx-motion));
      box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--nx-accent) 45%, var(--nx-border)), var(--nx-shadow-md);
    }
  }
  .nx-pricing-section-card[data-featured] {
    background: var(--nx-ink-950);
    color: var(--nx-ink-50);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--nx-accent) 45%, transparent), var(--nx-shadow-lg);
  }
  .nx-pricing-section-card[data-featured] :is(.nx-pricing-section-tag, .nx-pricing-section-suffix) {
    color: var(--nx-ink-400);
  }
  .nx-pricing-section-badge {
    position: absolute;
    inset-block-start: calc(-0.75rem - 1px);
    inset-inline-start: 50%;
    translate: calc(-50% * var(--nx-dir)) 0;
    padding: 0.28rem 0.8rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .nx-pricing-section-name {
    margin: 0;
    display: grid;
    gap: 0.2rem;
    font-size: var(--nx-text-md);
    font-weight: 700;
    color: inherit;
  }
  .nx-pricing-section-tag {
    font-size: var(--nx-text-xs);
    font-weight: 500;
    color: var(--nx-text-muted);
  }
  .nx-pricing-section-price {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
  }
  .nx-pricing-section-amount {
    display: inline-block;
    font: 800 var(--nx-text-4xl) / 1 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
    font-variant-numeric: tabular-nums;
    @starting-style {
      opacity: 0;
      translate: 0 calc(0.35em * var(--nx-motion));
    }
    transition: opacity var(--nx-dur-base) var(--nx-ease-out), translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
  }
  .nx-pricing-section-suffix {
    font-size: var(--nx-text-xs);
    color: var(--nx-text-muted);
  }
  .nx-pricing-section-perks {
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--nx-space-2);
    list-style: none;
    font-size: var(--nx-text-sm);
    line-height: 1.5;
    color: var(--nx-text-muted);
    & li {
      display: flex;
      align-items: start;
      gap: var(--nx-space-2);
    }
    & .nx-icon {
      flex: none;
      inline-size: 1rem;
      block-size: 1rem;
      margin-block-start: 0.14rem;
      color: var(--nx-accent-text);
    }
  }
  .nx-pricing-section-card[data-featured] .nx-pricing-section-perks .nx-icon {
    color: var(--nx-glow);
  }
  .nx-pricing-section-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    min-block-size: 2.6rem;
    margin-block-start: var(--nx-space-1);
    padding-inline: var(--nx-space-4);
    border-radius: var(--nx-radius-md);
    background: transparent;
    color: inherit;
    font: 600 var(--nx-text-sm) / 1.2 var(--nx-font-sans);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--nx-border);
    transition-property:
      background-color,
      box-shadow,
      color,
      scale,
      filter;
    transition-duration:
      var(--nx-dur-fast),
      var(--nx-dur-base),
      var(--nx-dur-fast),
      var(--nx-spring-snappy-duration),
      var(--nx-dur-fast);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-snappy),
      var(--nx-ease-out);
    &:hover {
      box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--nx-accent) 55%, var(--nx-border));
      color: var(--nx-accent-text);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
  }
  .nx-pricing-section-card[data-featured] .nx-pricing-section-cta {
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
    box-shadow: var(--nx-shadow-glow);
  }
  .nx-pricing-section-card[data-featured] .nx-pricing-section-cta:hover {
    color: var(--nx-accent-contrast);
    filter: brightness(1.08);
  }
  .nx-pricing-section-compare {
    display: grid;
    gap: var(--nx-space-3);
    inline-size: 100%;
    max-inline-size: 62rem;
  }
  .nx-pricing-section-compare-title {
    margin: 0;
    font-size: var(--nx-text-md);
    font-weight: 700;
    color: var(--nx-text);
  }
  .nx-pricing-section-table-wrap {
    overflow-x: auto;
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
    box-shadow: inset 0 0 0 1px var(--nx-border);
    scrollbar-width: thin;
  }
  .nx-pricing-section-table {
    inline-size: 100%;
    min-inline-size: 34rem;
    border-collapse: collapse;
    font-size: var(--nx-text-sm);
  }
  .nx-pricing-section-table th,
  .nx-pricing-section-table td {
    padding: 0.72rem 1rem;
    border-block-start: 1px solid var(--nx-border);
    text-align: start;
  }
  .nx-pricing-section-table thead th {
    border-block-start: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    font-weight: 600;
  }
  .nx-pricing-section-table thead th[data-featured] {
    color: var(--nx-accent-text);
  }
  .nx-pricing-section-table tbody th {
    font-weight: 500;
    color: var(--nx-text);
  }
  .nx-pricing-section-table td {
    text-align: center;
    color: var(--nx-text-muted);
  }
  .nx-pricing-section-table td[data-featured] {
    color: var(--nx-text);
    background: color-mix(in oklab, var(--nx-accent) 6%, transparent);
  }
  .nx-pricing-section-table .nx-icon {
    inline-size: 1.05rem;
    block-size: 1.05rem;
    vertical-align: -0.18em;
  }
  .nx-pricing-section-table .nx-icon[data-included] {
    color: var(--nx-accent-text);
  }
  .nx-pricing-section-table .nx-icon[data-missing] {
    opacity: 0.45;
  }
  .nx-pricing-section-note {
    margin: 0;
    font-size: var(--nx-text-xs);
    color: var(--nx-text-muted);
    text-align: center;
  }
  @media (max-width: 640px) {
    .nx-pricing-section-cards {
      grid-template-columns: 1fr;
    }
    .nx-pricing-section-toggle {
      inline-size: 100%;
    }
  }
  .nx-faq {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: clamp(var(--nx-space-6), 4vw, 3.5rem);
    align-items: start;
  }
  .nx-faq-side {
    display: grid;
    gap: var(--nx-space-3);
    align-content: start;
    justify-items: start;
    position: sticky;
    inset-block-start: var(--nx-space-4);
  }
  .nx-faq-eyebrow {
    margin: 0;
    color: var(--nx-accent-text);
    font-size: var(--nx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nx-tracking-wide);
    text-transform: uppercase;
  }
  .nx-faq-title {
    margin: 0;
    font: 800 clamp(1.35rem, 2.8vw, 1.9rem) / 1.3 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
    color: var(--nx-text);
    text-wrap: balance;
  }
  .nx-faq-intro {
    margin: 0;
    max-inline-size: 38ch;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    line-height: 1.75;
    text-wrap: pretty;
  }
  .nx-faq-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    margin-block-start: var(--nx-space-1);
    min-block-size: 2.6rem;
    padding-inline: var(--nx-space-5);
    border-radius: var(--nx-radius-md);
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
    font: 600 var(--nx-text-sm) / 1.2 var(--nx-font-sans);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition-property: scale, filter;
    transition-duration: var(--nx-spring-snappy-duration), var(--nx-dur-fast);
    transition-timing-function: var(--nx-spring-snappy), var(--nx-ease-out);
    & .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
    &:hover {
      filter: brightness(1.08);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
  }
  .nx-faq-more {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-1);
    color: var(--nx-accent-text);
    font-size: var(--nx-text-sm);
    font-weight: 600;
    text-decoration: none;
    & .nx-icon {
      inline-size: 0.95rem;
      block-size: 0.95rem;
    }
    &:hover {
      text-decoration: underline;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-faq-list {
    display: grid;
    min-inline-size: 0;
  }
  .nx-faq-heading {
    display: contents;
    margin: 0;
    font: inherit;
  }
  .nx-faq-item {
    display: grid;
    grid-template-rows: auto 0fr;
    transition: grid-template-rows var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
  }
  .nx-faq-item[data-open] {
    grid-template-rows: auto 1fr;
  }
  .nx-faq-q {
    display: flex;
    align-items: center;
    gap: var(--nx-space-4);
    inline-size: 100%;
    padding: var(--nx-space-4) 0.15rem;
    border: 0;
    border-block-end: 1px solid var(--nx-border);
    background: transparent;
    color: inherit;
    font: 650 var(--nx-text-md) / 1.5 var(--nx-font-sans);
    text-align: start;
    cursor: pointer;
    transition: color var(--nx-dur-fast) var(--nx-ease-out);
    &:hover {
      color: var(--nx-accent-text);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: -2px;
    }
    & > span:first-child {
      flex: 1;
      min-inline-size: 0;
    }
  }
  .nx-faq-a {
    overflow: hidden;
    & > div {
      padding: 0.15rem 0.15rem var(--nx-space-5);
      max-inline-size: 62ch;
      color: var(--nx-text-muted);
      font-size: var(--nx-text-sm);
      line-height: 1.8;
      opacity: 0.7;
      transition: opacity var(--nx-dur-slow) var(--nx-ease-out);
    }
  }
  .nx-faq-item[data-open] .nx-faq-a > div {
    opacity: 1;
  }
  .nx-faq-plus {
    position: relative;
    flex: none;
    inline-size: 1.05rem;
    aspect-ratio: 1;
    color: var(--nx-accent-text);
    transition: rotate var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    &::before,
    &::after {
      content: "";
      position: absolute;
      inset-block-start: calc(50% - 1px);
      inset-inline-start: 0;
      inline-size: 100%;
      block-size: 2px;
      border-radius: 2px;
      background: currentColor;
    }
    &::after {
      rotate: 90deg;
    }
  }
  .nx-faq-item[data-open] .nx-faq-plus {
    rotate: 45deg;
  }
  .nx-faq-note {
    margin: var(--nx-space-4) 0 0;
    font-size: var(--nx-text-xs);
    color: var(--nx-text-muted);
  }
  @media (max-width: 760px) {
    .nx-faq {
      grid-template-columns: 1fr;
    }
    .nx-faq-side {
      position: static;
    }
  }
  .nx-stats-band {
    --_fg: var(--nx-ink-50);
    --_muted: var(--nx-ink-400);
    --_line: color-mix(in oklab, var(--nx-ink-50) 14%, transparent);
    position: relative;
    display: grid;
    gap: var(--nx-space-8);
    justify-items: center;
    overflow: clip;
    padding: clamp(var(--nx-space-8), 5vw, 3.5rem) clamp(var(--nx-space-4), 3.5vw, 2.5rem);
    border-radius: var(--nx-radius-xl);
    color: var(--_fg);
    background:
      radial-gradient(
        60rem 18rem at 85% -20%,
        color-mix(in oklab, var(--nx-glow) 14%, transparent),
        transparent 60%),
      radial-gradient(color-mix(in oklab, var(--nx-ink-400) 15%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px,
      var(--nx-ink-950);
  }
  .nx-stats-band-head {
    display: grid;
    gap: var(--nx-space-2);
    justify-items: center;
    text-align: center;
  }
  .nx-stats-band-eyebrow {
    margin: 0;
    color: var(--nx-glow);
    font-size: var(--nx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nx-tracking-wide);
    text-transform: uppercase;
  }
  .nx-stats-band-title {
    margin: 0;
    font: 800 clamp(1.15rem, 2.4vw, 1.5rem) / 1.3 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
    text-wrap: balance;
  }
  .nx-stats-band-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    inline-size: 100%;
    max-inline-size: 62rem;
  }
  .nx-stats-band-stat {
    display: grid;
    gap: var(--nx-space-2);
    justify-items: center;
    padding: var(--nx-space-3) var(--nx-space-3);
    text-align: center;
  }
  .nx-stats-band-stat + .nx-stats-band-stat {
    border-inline-start: 1px solid var(--_line);
  }
  .nx-stats-band-icon {
    color: var(--nx-glow);
    & .nx-icon {
      inline-size: 1.5rem;
      block-size: 1.5rem;
    }
  }
  .nx-stats-band-value {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    justify-content: center;
    font: 800 clamp(1.9rem, 4.6vw, 3.2rem) / 1 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
    font-variant-numeric: tabular-nums;
  }
  .nx-stats-band-unit {
    font-size: 0.42em;
    font-weight: 700;
    color: var(--nx-glow);
  }
  .nx-stats-band-label {
    color: var(--_muted);
    font-size: var(--nx-text-xs);
  }
  .nx-stats-band-note {
    margin: 0;
    font-size: var(--nx-text-xs);
    color: var(--_muted);
    text-align: center;
  }
  @media (max-width: 640px) {
    .nx-stats-band-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      row-gap: var(--nx-space-6);
    }
    .nx-stats-band-stat + .nx-stats-band-stat {
      border-inline-start: 0;
    }
    .nx-stats-band-stat:nth-child(even) {
      border-inline-start: 1px solid var(--_line);
    }
  }
  .nx-logos {
    display: grid;
    gap: var(--nx-space-8);
    justify-items: center;
  }
  .nx-logos-head {
    display: grid;
    gap: var(--nx-space-2);
    justify-items: center;
    text-align: center;
  }
  .nx-logos-eyebrow {
    margin: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nx-tracking-wide);
    text-transform: uppercase;
  }
  .nx-logos-title {
    margin: 0;
    font: 800 clamp(1.2rem, 2.6vw, 1.65rem) / 1.3 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
    color: var(--nx-text);
    text-wrap: balance;
  }
  .nx-logos-switch {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-2);
    box-shadow: inset 0 0 0 1px var(--nx-border);
  }
  .nx-logos-switch-button {
    padding: 0.42rem 1.05rem;
    border: 0;
    border-radius: var(--nx-radius-full);
    background: transparent;
    color: var(--nx-text-muted);
    font: 600 0.78rem / 1 var(--nx-font-sans);
    cursor: pointer;
    transition-property: background-color, color;
    transition-duration: var(--nx-dur-base), var(--nx-dur-base);
    transition-timing-function: var(--nx-ease-out), var(--nx-ease-out);
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &[aria-pressed=true] {
      background: var(--nx-text);
      color: var(--nx-bg);
    }
  }
  .nx-logos-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--nx-space-6) var(--nx-space-5);
    align-items: center;
    justify-items: center;
    inline-size: 100%;
    max-inline-size: 58rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nx-logos-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    color: var(--_brand, var(--nx-text));
    font-weight: 700;
    font-size: var(--nx-text-md);
    letter-spacing: var(--nx-tracking-tight);
    white-space: nowrap;
    text-decoration: none;
    filter: grayscale(1);
    opacity: 0.55;
    border-radius: var(--nx-radius-sm);
    transition: filter var(--nx-dur-slow) var(--nx-ease-out), opacity var(--nx-dur-slow) var(--nx-ease-out);
    &:is(:hover, :focus-visible) {
      filter: grayscale(0);
      opacity: 1;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 3px;
    }
  }
  .nx-logos-mark {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    flex: none;
  }
  .nx-logos-marquee {
    inline-size: 100%;
    max-inline-size: 62rem;
    overflow: clip;
    -webkit-mask-image:
      linear-gradient(
        to right,
        transparent,
        black 8%,
        black 92%,
        transparent);
    mask-image:
      linear-gradient(
        to right,
        transparent,
        black 8%,
        black 92%,
        transparent);
  }
  .nx-logos-track {
    display: flex;
    gap: 3.25rem;
    inline-size: max-content;
    margin: 0;
    padding: 0;
    padding-inline: var(--nx-space-6);
    list-style: none;
    animation: nx-logos-run 36s linear infinite;
  }
  .nx-logos-marquee:is(:hover, :focus-within) .nx-logos-track {
    animation-play-state: paused;
  }
  @keyframes nx-logos-run {
    to {
      translate: calc(-50% * var(--nx-dir)) 0;
    }
  }
  .nx-logos-footnote {
    margin: 0;
    font-size: var(--nx-text-xs);
    color: var(--nx-text-muted);
    text-align: center;
  }
  @media (max-width: 640px) {
    .nx-logos-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--nx-space-5) var(--nx-space-4);
    }
  }
  .nx-testimonials {
    display: grid;
    gap: var(--nx-space-8);
    justify-items: center;
  }
  .nx-testimonials-head {
    display: grid;
    gap: var(--nx-space-3);
    justify-items: center;
    max-inline-size: 46ch;
    text-align: center;
  }
  .nx-testimonials-score {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: 0.35rem 0.9rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    color: var(--nx-text-muted);
    box-shadow: inset 0 0 0 1px var(--nx-border);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    & .nx-icon {
      inline-size: 0.95rem;
      block-size: 0.95rem;
      color: var(--nx-gold);
    }
  }
  .nx-testimonials-title {
    margin: 0;
    font: 800 clamp(1.4rem, 3vw, 2rem) / 1.25 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
    color: var(--nx-text);
    text-wrap: balance;
  }
  .nx-testimonials-subtitle {
    margin: 0;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-sm);
    line-height: 1.75;
    text-wrap: pretty;
  }
  .nx-testimonials-stage {
    display: grid;
    inline-size: 100%;
    max-inline-size: 46rem;
  }
  .nx-testimonials-quote {
    grid-area: 1 / 1;
    margin: 0;
    display: grid;
    gap: var(--nx-space-5);
    justify-items: center;
    text-align: center;
    transition: opacity var(--nx-dur-slow) var(--nx-ease-out), translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    &[data-off] {
      opacity: 0;
      pointer-events: none;
      translate: 0 calc(0.75rem * var(--nx-motion));
    }
  }
  .nx-testimonials-mark {
    inline-size: 2.1rem;
    block-size: 2.1rem;
    fill: none;
    stroke: var(--nx-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.9;
  }
  .nx-testimonials-text {
    margin: 0;
    max-inline-size: 40ch;
    font: 650 clamp(1.12rem, 2.6vw, 1.55rem) / 1.75 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-tight);
    color: var(--nx-text);
    text-wrap: pretty;
  }
  .nx-testimonials-who {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-3);
    text-align: start;
  }
  .nx-testimonials-avatar {
    display: inline-grid;
    place-items: center;
    inline-size: 2.85rem;
    aspect-ratio: 1;
    border-radius: var(--nx-radius-full);
    background: var(--_avatar, var(--nx-accent));
    color: var(--nx-ink-50);
    font-size: var(--nx-text-xs);
    font-weight: 700;
  }
  .nx-testimonials-name {
    display: block;
    font-size: var(--nx-text-sm);
    font-weight: 700;
    color: var(--nx-text);
  }
  .nx-testimonials-role {
    display: block;
    color: var(--nx-text-muted);
    font-size: var(--nx-text-xs);
  }
  .nx-testimonials-nav {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
  }
  .nx-testimonials-arrow {
    display: inline-grid;
    place-items: center;
    inline-size: 2.3rem;
    aspect-ratio: 1;
    border: 0;
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-2);
    color: var(--nx-text);
    cursor: pointer;
    transition-property: background-color, scale;
    transition-duration: var(--nx-dur-fast), var(--nx-spring-snappy-duration);
    transition-timing-function: var(--nx-ease-out), var(--nx-spring-snappy);
    & .nx-icon {
      inline-size: 1rem;
      block-size: 1rem;
    }
    &:hover {
      background: var(--nx-surface-3);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
  }
  .nx-testimonials-dots {
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }
  .nx-testimonials-dot {
    inline-size: 0.5rem;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-full);
    background: var(--nx-border-strong);
    cursor: pointer;
    transition: inline-size var(--nx-spring-snappy-duration) var(--nx-spring-snappy), background-color var(--nx-dur-base) var(--nx-ease-out);
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &[aria-current=true] {
      inline-size: 1.3rem;
      background: var(--nx-accent);
    }
  }
  .nx-testimonials-shorts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--nx-space-4);
    inline-size: 100%;
    max-inline-size: 62rem;
  }
  .nx-testimonials-short {
    display: grid;
    gap: var(--nx-space-2);
    align-content: start;
    margin: 0;
    padding: var(--nx-space-5) var(--nx-space-4);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
    box-shadow: inset 0 0 0 1px var(--nx-border);
  }
  .nx-testimonials-stars {
    display: inline-flex;
    gap: 0.15rem;
    & .nx-icon {
      inline-size: 0.9rem;
      block-size: 0.9rem;
    }
    & .nx-icon[data-on] {
      color: var(--nx-gold);
    }
    & .nx-icon:not([data-on]) {
      color: var(--nx-border-strong);
    }
  }
  .nx-testimonials-short > blockquote {
    margin: 0;
    font-size: var(--nx-text-sm);
    font-weight: 600;
    line-height: 1.65;
    color: var(--nx-text);
    text-wrap: pretty;
  }
  .nx-testimonials-short > figcaption {
    display: flex;
    align-items: center;
    gap: var(--nx-space-2);
    margin-block-start: var(--nx-space-1);
    font-size: var(--nx-text-xs);
    color: var(--nx-text-muted);
  }
  .nx-testimonials-mini {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 1.7rem;
    aspect-ratio: 1;
    border-radius: var(--nx-radius-full);
    background: var(--_avatar, var(--nx-accent));
    color: var(--nx-ink-50);
    font-size: 0.62rem;
    font-weight: 700;
  }
  @media (max-width: 860px) {
    .nx-testimonials-shorts {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (max-width: 480px) {
    .nx-testimonials-shorts {
      grid-template-columns: 1fr;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-logos-track {
      animation: none;
    }
    :is(.nx-pricing-section-card, .nx-testimonials-quote) {
      transition: opacity var(--nx-dur-fast) var(--nx-ease-out);
    }
    :is(.nx-faq-item, .nx-faq-plus, .nx-pricing-section-toggle-thumb) {
      transition-duration: var(--nx-dur-fast);
    }
  }
}

/* src/css/blocks/shaders.css */
@layer nx.components {
  .nx-shader {
    --_radius: var(--nx-radius-2xl);
    position: relative;
    isolation: isolate;
    overflow: clip;
    border-radius: var(--_radius);
    background: var(--nx-surface-2);
  }
  .nx-shader-canvas {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    display: block;
  }
  .nx-shader-fallback {
    position: absolute;
    inset: 0;
    display: block;
    background: var(--nx-gradient-brand);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-shader[data-fallback] .nx-shader-fallback {
    opacity: 1;
  }
  .nx-shader[data-fallback] .nx-shader-canvas {
    visibility: hidden;
  }
  .nx-shader-content {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--nx-space-3);
    min-block-size: 100%;
    padding: var(--nx-space-6);
    align-content: var(--_align, center);
    justify-items: var(--_justify, start);
    &[data-align=start] {
      --_align: start;
    }
    &[data-align=center] {
      --_align: center;
    }
    &[data-align=end] {
      --_align: end;
    }
    &[data-align=between] {
      --_align: space-between;
    }
    &[data-justify=center] {
      --_justify: center;
    }
    &[data-justify=end] {
      --_justify: end;
    }
  }
  .nx-shader-pond {
    --_radius: var(--nx-radius-2xl);
    aspect-ratio: 16 / 8;
    cursor: crosshair;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: -2px;
    }
  }
  @media (max-width: 30rem) {
    .nx-shader-pond {
      aspect-ratio: 4 / 3;
    }
  }
  .nx-shader-probe {
    position: absolute;
    visibility: hidden;
    pointer-events: none;
  }
}

/* src/css/blocks/text-fx.css */
@layer nx.components {
  .nx-text-flow {
    background-image:
      linear-gradient(
        100deg,
        var(--nx-violet-400),
        var(--nx-cyan-400),
        var(--nx-gold-400),
        var(--nx-cyan-400),
        var(--nx-violet-400));
    background-size: 200% auto;
    animation: nx-text-flow-lap var(--nx-flow-duration, 8s) linear infinite;
    overflow-wrap: break-word;
    &[data-palette=ocean] {
      background-image:
        linear-gradient(
          100deg,
          var(--nx-cyan-400),
          var(--nx-lapis-400),
          var(--nx-violet-400),
          var(--nx-lapis-400),
          var(--nx-cyan-400));
    }
    &[data-palette=dusk] {
      background-image:
        linear-gradient(
          100deg,
          var(--nx-gold-400),
          var(--nx-violet-500),
          var(--nx-cyan-500),
          var(--nx-violet-500),
          var(--nx-gold-400));
    }
  }
  @supports (-webkit-background-clip: text) or (background-clip: text) {
    .nx-text-flow {
      color: transparent;
      -webkit-background-clip: text;
      background-clip: text;
    }
  }
  @keyframes nx-text-flow-lap {
    to {
      background-position: calc(-200% * var(--nx-dir)) center;
    }
  }
  .nx-outline-fill {
    position: relative;
    display: inline-block;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: var(--nx-tracking-tight);
    overflow-wrap: break-word;
  }
  .nx-outline-fill-ghost {
    color: transparent;
    -webkit-text-stroke: max(1px, 0.035em) var(--nx-border-strong);
  }
  .nx-outline-fill-fill {
    position: absolute;
    inset: 0;
    color: transparent;
    background-image:
      linear-gradient(
        15deg,
        var(--nx-accent),
        var(--nx-cyan-400));
    -webkit-background-clip: text;
    background-clip: text;
    clip-path: inset(100% 0 0 0);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    transition: clip-path var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
    .nx-outline-fill[data-body=solid] & {
      background-image: linear-gradient(var(--nx-accent), var(--nx-accent));
    }
    .nx-outline-fill[data-body=pattern] & {
      background-image: repeating-conic-gradient(var(--nx-accent) 0 25%, var(--nx-accent-soft) 0 50%) 0 0 / 0.875rem 0.875rem;
    }
  }
  .nx-outline-fill[data-trigger=always] .nx-outline-fill-fill,
  .nx-outline-fill[data-trigger=inview][data-nx-revealed] .nx-outline-fill-fill {
    clip-path: inset(0 0 0 0);
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-outline-fill[data-trigger=hover]:is(:hover, :focus-visible, :active) .nx-outline-fill-fill {
      clip-path: inset(0 0 0 0);
    }
  }
  .nx-text-extrude {
    --_face: var(--nx-accent-text);
    --_shade: var(--nx-violet-500);
    --_glow: color-mix(in oklab, var(--nx-accent) 32%, transparent);
    display: inline-block;
    perspective: 56.25rem;
    &[data-tone=gold] {
      --_face: var(--nx-gold-text);
      --_shade: var(--nx-gold-600);
      --_glow: color-mix(in oklab, var(--nx-gold) 35%, transparent);
    }
    &[data-tone=ink] {
      --_face: var(--nx-text);
      --_shade: color-mix(in oklab, var(--nx-text) 55%, transparent);
      --_glow: color-mix(in oklab, var(--nx-text) 18%, transparent);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 4px;
      border-radius: var(--nx-radius-md);
    }
  }
  .nx-text-extrude-word {
    display: inline-block;
    color: var(--_face);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: var(--nx-tracking-tight);
    overflow-wrap: break-word;
    transform: rotateX(calc(var(--nx-rx, 0deg) * var(--nx-motion))) rotateY(calc(var(--nx-ry, 0deg) * var(--nx-motion)));
    transition: transform 120ms var(--nx-ease-out);
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-text-flow {
      animation: none;
    }
    .nx-outline-fill-fill {
      transition: none;
    }
    .nx-text-extrude-word {
      transition: none;
    }
  }
}

/* src/css/blocks/ambient.css */
@layer nx.components {
  .nx-ambient-copy {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: var(--nx-space-4);
    padding: var(--nx-space-6);
    text-align: center;
  }
  .nx-ambient-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: 0.35rem var(--nx-space-3);
    border: 1px solid color-mix(in oklab, currentColor 20%, transparent);
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, currentColor 7%, transparent);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    letter-spacing: var(--nx-tracking-wide);
    & .nx-icon {
      inline-size: 0.85rem;
      block-size: 0.85rem;
    }
  }
  .nx-ambient-title {
    margin: 0;
    max-inline-size: 34rem;
    font-size: clamp(1.6rem, 4.5vw, 2.4rem);
    font-weight: 700;
    line-height: 1.25;
    font-family: var(--nx-font-display);
    text-wrap: balance;
  }
  .nx-ambient-text {
    margin: 0;
    max-inline-size: 30rem;
    font-size: var(--nx-text-sm);
    line-height: 1.7;
    color: color-mix(in oklab, currentColor 78%, transparent);
  }
  .nx-ambient-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--nx-space-2);
    margin-block-start: var(--nx-space-1);
  }
  .nx-ambient-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.45rem 0.95rem;
    border: 1px solid color-mix(in oklab, currentColor 18%, transparent);
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, currentColor 6%, transparent);
    font-size: var(--nx-text-sm);
    font-variant-numeric: tabular-nums;
    & strong {
      color: color-mix(in oklab, var(--nx-glow) 80%, currentColor);
      font-weight: 650;
    }
  }
  .nx-aurora {
    --_c1: var(--nx-aurora-c1, var(--nx-cyan-400));
    --_c2: var(--nx-aurora-c2, var(--nx-chart-7));
    --_c3: var(--nx-aurora-c3, var(--nx-violet-500));
    position: relative;
    isolation: isolate;
    overflow: clip;
    border-radius: var(--nx-radius-2xl);
    min-block-size: 24rem;
    display: grid;
    place-content: center;
    justify-items: center;
    padding: var(--nx-space-6);
    background: var(--nx-ink-950);
    color: var(--nx-lapis-50);
  }
  .nx-aurora-sky {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }
  .nx-aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(clamp(2.5rem, 6vw, 4rem));
    mix-blend-mode: screen;
    opacity: 0.55;
    will-change: transform;
    &:nth-child(1) {
      inline-size: 24rem;
      aspect-ratio: 1;
      inset-inline-start: 4%;
      inset-block-start: 2%;
      background: var(--_c1);
      animation: nx-aurora-drift-a 26s var(--nx-ease-in-out) infinite alternate;
    }
    &:nth-child(2) {
      inline-size: 30rem;
      aspect-ratio: 1;
      inset-inline-start: 46%;
      inset-block-start: 12%;
      background: var(--_c2);
      animation: nx-aurora-drift-b 32s var(--nx-ease-in-out) infinite alternate;
    }
    &:nth-child(3) {
      inline-size: 20rem;
      aspect-ratio: 1;
      inset-inline-start: 62%;
      inset-block-start: 48%;
      background: var(--_c3);
      animation: nx-aurora-drift-c 24s var(--nx-ease-in-out) infinite alternate;
    }
    &:nth-child(4) {
      inline-size: 26rem;
      aspect-ratio: 1;
      inset-inline-start: 12%;
      inset-block-start: 52%;
      background: var(--_c1);
      opacity: 0.4;
      animation: nx-aurora-drift-d 34s var(--nx-ease-in-out) infinite alternate;
    }
  }
  .nx-aurora[data-paused] .nx-aurora-blob {
    animation-play-state: paused;
  }
  @keyframes nx-aurora-drift-a {
    from {
      translate: calc(-12% * var(--nx-motion)) calc(-18% * var(--nx-motion));
      scale: 1;
    }
    to {
      translate: calc(10% * var(--nx-motion)) calc(8% * var(--nx-motion));
      scale: 1.25;
    }
  }
  @keyframes nx-aurora-drift-b {
    from {
      translate: calc(6% * var(--nx-motion)) calc(10% * var(--nx-motion));
      scale: 1.2;
    }
    to {
      translate: calc(-8% * var(--nx-motion)) calc(-12% * var(--nx-motion));
      scale: 0.95;
    }
  }
  @keyframes nx-aurora-drift-c {
    from {
      translate: calc(4% * var(--nx-motion)) calc(-10% * var(--nx-motion));
      scale: 0.9;
    }
    to {
      translate: calc(-10% * var(--nx-motion)) calc(10% * var(--nx-motion));
      scale: 1.3;
    }
  }
  @keyframes nx-aurora-drift-d {
    from {
      translate: calc(-8% * var(--nx-motion)) calc(6% * var(--nx-motion));
      scale: 1.1;
    }
    to {
      translate: calc(10% * var(--nx-motion)) calc(-8% * var(--nx-motion));
      scale: 0.9;
    }
  }
  .nx-perspective-grid {
    --_cell: 64px;
    --_bg: var(--nx-surface);
    --_line: var(--nx-text-subtle);
    --_line-alpha: 0.28;
    --_accent: var(--nx-accent);
    --_line-colour: color-mix(in oklab, var(--_line) calc(var(--_line-alpha) * 100%), transparent);
    position: relative;
    isolation: isolate;
    overflow: clip;
    border-radius: var(--nx-radius-2xl);
    min-block-size: 24rem;
    display: grid;
    place-content: center;
    justify-items: center;
    padding: var(--nx-space-6) var(--nx-space-6) 25%;
    background: var(--_bg);
    color: var(--nx-text);
    perspective: 420px;
  }
  [data-theme=dark] .nx-perspective-grid,
  .dark .nx-perspective-grid {
    --_bg: color-mix(in oklab, var(--nx-ink-950) 78%, var(--nx-violet-700));
    --_line: var(--nx-violet-300);
    --_line-alpha: 0.38;
    --_accent: var(--nx-violet-300);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme=light], .light) .nx-perspective-grid {
      --_bg: color-mix(in oklab, var(--nx-ink-950) 78%, var(--nx-violet-700));
      --_line: var(--nx-violet-300);
      --_line-alpha: 0.38;
      --_accent: var(--nx-violet-300);
    }
  }
  .nx-perspective-sun {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 30%;
    margin-inline: auto;
    inline-size: 9.5rem;
    block-size: 9.5rem;
    border-radius: 50%;
    background:
      linear-gradient(
        var(--nx-gold),
        var(--nx-chart-2) 65%,
        var(--nx-violet-600));
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
  }
  .nx-perspective-floor {
    position: absolute;
    inset-inline: -60%;
    inset-block-start: 52%;
    block-size: 150%;
    transform: rotateX(58deg);
    transform-origin: 50% 0;
    z-index: 1;
    pointer-events: none;
  }
  .nx-perspective-lines {
    position: absolute;
    inset-inline: 0;
    inset-block: -100% 0;
    display: block;
    background-image:
      repeating-linear-gradient(
        to right,
        var(--_line-colour) 0 2px,
        transparent 2px var(--_cell)),
      repeating-linear-gradient(
        to bottom,
        var(--_line-colour) 0 2px,
        transparent 2px var(--_cell));
    animation: nx-perspective-run var(--nx-perspective-duration, 1.6s) linear infinite;
    will-change: transform;
  }
  [data-theme=dark] .nx-perspective-lines,
  .dark .nx-perspective-lines {
    filter: drop-shadow(0 0 6px color-mix(in oklab, var(--_line) 45%, transparent));
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme=light], .light) .nx-perspective-lines {
      filter: drop-shadow(0 0 6px color-mix(in oklab, var(--_line) 45%, transparent));
    }
  }
  .nx-perspective-grid[data-paused] .nx-perspective-lines {
    animation-play-state: paused;
  }
  @keyframes nx-perspective-run {
    to {
      translate: 0 var(--_cell);
    }
  }
  .nx-perspective-horizon {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(var(--_bg) 14%, transparent) top / 100% 56% no-repeat, linear-gradient(transparent, var(--_bg)) bottom / 100% 18% no-repeat;
  }
  .nx-starfield {
    --_sky: var(--nx-ink-950);
    --_star: var(--nx-lapis-50);
    position: relative;
    isolation: isolate;
    overflow: clip;
    border-radius: var(--nx-radius-2xl);
    min-block-size: 24rem;
    display: grid;
    place-content: center;
    justify-items: center;
    padding: var(--nx-space-6);
    background: var(--_sky);
    color: var(--nx-lapis-50);
  }
  .nx-starfield-canvas {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    display: block;
    pointer-events: none;
  }
  .nx-contour {
    --_bg: var(--nx-bg-subtle);
    --_line: var(--nx-cyan-700);
    --_line-alpha: 0.5;
    position: relative;
    isolation: isolate;
    overflow: clip;
    border-radius: var(--nx-radius-2xl);
    min-block-size: 24rem;
    display: grid;
    place-content: center;
    justify-items: center;
    padding: var(--nx-space-6);
    background:
      radial-gradient(
        140% 100% at 50% 0%,
        color-mix(in oklab, var(--_bg) 88%, var(--nx-lapis-50)),
        var(--_bg) 70%),
      var(--_bg);
    color: var(--nx-text);
  }
  [data-theme=dark] .nx-contour,
  .dark .nx-contour {
    --_bg: color-mix(in oklab, var(--nx-ink-950) 84%, var(--nx-cyan-700));
    --_line: var(--nx-cyan-300);
    --_line-alpha: 0.42;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme=light], .light) .nx-contour {
      --_bg: color-mix(in oklab, var(--nx-ink-950) 84%, var(--nx-cyan-700));
      --_line: var(--nx-cyan-300);
      --_line-alpha: 0.42;
    }
  }
  .nx-contour-svg {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    display: block;
    pointer-events: none;
  }
  [data-theme=dark] .nx-contour-svg,
  .dark .nx-contour-svg {
    filter: drop-shadow(0 0 5px color-mix(in oklab, var(--_line) 18%, transparent));
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme=light], .light) .nx-contour-svg {
      filter: drop-shadow(0 0 5px color-mix(in oklab, var(--_line) 18%, transparent));
    }
  }
  .nx-contour-line {
    fill: none;
    stroke: color-mix(in oklab, var(--_line) calc(var(--_line-alpha) * 100%), transparent);
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke var(--nx-dur-fast) var(--nx-ease-out);
  }
  .nx-contour-line[data-hot] {
    stroke: var(--nx-contour-hot, var(--nx-accent));
    stroke-opacity: 0.95;
  }
  .nx-contour-peak {
    pointer-events: auto;
  }
  .nx-contour-peak .nx-contour-dot {
    fill: currentColor;
    stroke: none;
    cursor: pointer;
    transition: r var(--nx-dur-fast) var(--nx-ease-out);
  }
  .nx-contour-peak .nx-contour-halo {
    fill: none;
    stroke: var(--nx-contour-hot, var(--nx-accent));
    stroke-width: 2;
    opacity: 0;
    transition: opacity var(--nx-dur-fast) var(--nx-ease-out);
  }
  .nx-contour-peak[data-hot] .nx-contour-halo {
    opacity: 0.8;
  }
  .nx-contour-peak .nx-contour-dot:focus-visible {
    outline: none;
    r: 8;
    stroke: var(--nx-contour-hot, var(--nx-accent));
    stroke-width: 3;
  }
  @media (hover: hover) and (pointer: fine) {
    .nx-contour-peak:hover .nx-contour-dot {
      r: 8;
    }
  }
  .nx-contour-card {
    position: absolute;
    inset-block-start: var(--nx-space-3);
    inset-inline-end: var(--nx-space-3);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    max-inline-size: min(13rem, 70%);
    margin: 0;
    padding: 0.5rem 0.85rem;
    border: 1px solid color-mix(in oklab, currentColor 16%, transparent);
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, currentColor 6%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: var(--nx-text-xs);
    font-weight: 600;
    text-align: start;
    pointer-events: none;
    & small {
      display: block;
      font-weight: 400;
      font-size: 0.7rem;
      color: color-mix(in oklab, currentColor 70%, transparent);
    }
    & .nx-contour-card-bar {
      flex: none;
      inline-size: 0.55rem;
      block-size: 0.55rem;
      border-radius: 50%;
      background: var(--nx-contour-hot, var(--nx-accent));
    }
  }
  .nx-metaballs {
    --_bg: var(--nx-surface-2);
    --_b1: var(--nx-violet-500);
    --_b2: var(--nx-violet-400);
    --_b3: var(--nx-chart-6);
    --_b4: var(--nx-lapis-600);
    --_b5: var(--nx-violet-600);
    position: relative;
    isolation: isolate;
    overflow: clip;
    border-radius: var(--nx-radius-2xl);
    min-block-size: 24rem;
    display: grid;
    place-content: center;
    justify-items: center;
    padding: var(--nx-space-6);
    background: var(--_bg);
    color: var(--nx-text);
    transition: background-color var(--nx-dur-slower) var(--nx-ease-out), color var(--nx-dur-slower) var(--nx-ease-out);
  }
  [data-theme=dark] .nx-metaballs,
  .dark .nx-metaballs {
    --_bg: var(--nx-ink-950);
    --_b1: var(--nx-cyan-400);
    --_b2: var(--nx-lapis-400);
    --_b3: var(--nx-chart-2);
    --_b4: var(--nx-cyan-500);
    --_b5: var(--nx-violet-400);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme=light], .light) .nx-metaballs {
      --_bg: var(--nx-ink-950);
      --_b1: var(--nx-cyan-400);
      --_b2: var(--nx-lapis-400);
      --_b3: var(--nx-chart-2);
      --_b4: var(--nx-cyan-500);
      --_b5: var(--nx-violet-400);
    }
  }
  .nx-metaballs[data-variant=light] {
    --_bg: var(--nx-surface-2);
    --_b1: var(--nx-violet-500);
    --_b2: var(--nx-violet-400);
    --_b3: var(--nx-chart-6);
    --_b4: var(--nx-lapis-600);
    --_b5: var(--nx-violet-600);
  }
  .nx-metaballs[data-variant=dark] {
    --_bg: var(--nx-ink-950);
    --_b1: var(--nx-cyan-400);
    --_b2: var(--nx-lapis-400);
    --_b3: var(--nx-chart-2);
    --_b4: var(--nx-cyan-500);
    --_b5: var(--nx-violet-400);
  }
  .nx-metaballs-svg {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    display: block;
    pointer-events: none;
  }
  .nx-metaballs-goo {
    mix-blend-mode: normal;
  }
  [data-theme=dark] .nx-metaballs-goo,
  .dark .nx-metaballs-goo,
  .nx-metaballs[data-variant=dark] .nx-metaballs-goo {
    mix-blend-mode: screen;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme=light], .light) .nx-metaballs-goo {
      mix-blend-mode: screen;
    }
  }
  .nx-metaballs-ball {
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
    &:nth-child(1) {
      fill: var(--_b1);
      animation: nx-goo-w1 24s var(--nx-ease-in-out) infinite alternate;
    }
    &:nth-child(2) {
      fill: var(--_b2);
      animation: nx-goo-w2 19s var(--nx-ease-in-out) infinite alternate;
    }
    &:nth-child(3) {
      fill: var(--_b3);
      animation: nx-goo-w3 28s var(--nx-ease-in-out) infinite alternate;
    }
    &:nth-child(4) {
      fill: var(--_b4);
      animation: nx-goo-w4 22s var(--nx-ease-in-out) infinite alternate;
    }
    &:nth-child(5) {
      fill: var(--_b5);
      animation: nx-goo-w5 31s var(--nx-ease-in-out) infinite alternate;
    }
    &:nth-child(6) {
      fill: var(--_b1);
      animation: nx-goo-w1 26s var(--nx-ease-in-out) -8s infinite alternate;
    }
    &:nth-child(7) {
      fill: var(--_b2);
      animation: nx-goo-w2 23s var(--nx-ease-in-out) -11s infinite alternate;
    }
  }
  .nx-metaballs[data-paused] .nx-metaballs-ball {
    animation-play-state: paused;
  }
  @keyframes nx-goo-w1 {
    from {
      translate: calc(-120px * var(--nx-motion)) calc(30px * var(--nx-motion));
      scale: 1;
    }
    to {
      translate: calc(210px * var(--nx-motion)) calc(-60px * var(--nx-motion));
      scale: 1.3;
    }
  }
  @keyframes nx-goo-w2 {
    from {
      translate: calc(160px * var(--nx-motion)) calc(-40px * var(--nx-motion));
      scale: 1.15;
    }
    to {
      translate: calc(-230px * var(--nx-motion)) calc(70px * var(--nx-motion));
      scale: 0.9;
    }
  }
  @keyframes nx-goo-w3 {
    from {
      translate: calc(-90px * var(--nx-motion)) calc(-70px * var(--nx-motion));
      scale: 0.95;
    }
    to {
      translate: calc(140px * var(--nx-motion)) calc(90px * var(--nx-motion));
      scale: 1.25;
    }
  }
  @keyframes nx-goo-w4 {
    from {
      translate: calc(130px * var(--nx-motion)) calc(60px * var(--nx-motion));
      scale: 1.05;
    }
    to {
      translate: calc(-160px * var(--nx-motion)) calc(-80px * var(--nx-motion));
      scale: 1.2;
    }
  }
  @keyframes nx-goo-w5 {
    from {
      translate: calc(-60px * var(--nx-motion)) calc(80px * var(--nx-motion));
      scale: 1.2;
    }
    to {
      translate: calc(190px * var(--nx-motion)) calc(-50px * var(--nx-motion));
      scale: 0.9;
    }
  }
  .nx-ambient-probe {
    position: absolute;
    visibility: hidden;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-aurora-blob,
    .nx-perspective-lines,
    .nx-metaballs-ball {
      animation: none;
    }
    .nx-metaballs {
      transition: none;
    }
    .nx-contour-line,
    .nx-contour-peak .nx-contour-dot,
    .nx-contour-peak .nx-contour-halo {
      transition: none;
    }
  }
}

/* src/css/blocks/depth-3d.css */
@layer nx.components {
  .nx-3d-stage {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 100%;
    aspect-ratio: 4 / 3;
    max-inline-size: 30rem;
    margin-inline: auto;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-2xl);
    background:
      radial-gradient(
        120% 100% at 50% 0%,
        var(--nx-surface-2),
        color-mix(in oklab, var(--nx-surface-3) 55%, var(--nx-bg)) 72%);
    perspective: 1000px;
    overflow: clip;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    &:active {
      cursor: grabbing;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-3d-cap {
    position: absolute;
    inset-block-start: var(--nx-space-3);
    inset-inline-start: var(--nx-space-3);
    z-index: 2;
    padding: 0.3rem var(--nx-space-3);
    border: 1px solid var(--nx-glass-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-glass);
    color: var(--nx-text-muted);
    font: 500 var(--nx-text-xs) / 1.3 var(--nx-font-sans);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
  }
  .nx-3d-dock {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2) var(--nx-space-3);
    max-inline-size: 30rem;
    margin-inline: auto;
  }
  .nx-3d-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-2) var(--nx-space-4);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    color: var(--nx-text);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    cursor: pointer;
    transition-property:
      border-color,
      color,
      scale;
    transition-duration:
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-spring-snappy-duration);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-snappy);
    &:hover {
      border-color: var(--nx-accent-border);
      color: var(--nx-accent-text);
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &:is([aria-pressed=true], [aria-expanded=true]) {
      border-color: var(--nx-accent-border);
      color: var(--nx-accent-text);
    }
    & .nx-icon {
      inline-size: 0.95rem;
      block-size: 0.95rem;
    }
  }
  .nx-3d-status {
    font: 500 var(--nx-text-xs) / 1.4 var(--nx-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--nx-text-muted);
    white-space: nowrap;
  }
  .nx-3d-hint {
    margin: 0;
    text-align: center;
    font-size: var(--nx-text-xs);
    color: var(--nx-text-muted);
  }
  .nx-product-room {
    --nx-lift: 13px;
    display: grid;
    gap: var(--nx-space-4);
  }
  .nx-product-room[data-exploded] {
    --nx-lift: 42px;
  }
  .nx-product-room-stage {
    perspective: 1100px;
  }
  .nx-product-room-world {
    --nx-d: min(36vw, 11rem);
    position: relative;
    inline-size: var(--nx-d);
    aspect-ratio: 1;
    transform-style: preserve-3d;
    transform: rotateX(var(--nx-tilt, 62deg)) rotateZ(var(--nx-spin, -28deg));
  }
  .nx-product-room-slab {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    transform-style: preserve-3d;
    transform: translateZ(calc((var(--nx-i, 0) - (var(--nx-n, 5) - 1) / 2) * var(--nx-lift)));
    transition: transform var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
  }
  .nx-product-room-slab[data-tone=pedestal] {
    background:
      linear-gradient(
        220deg,
        var(--nx-ink-600),
        var(--nx-ink-850));
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--nx-ink-950) 18%, transparent);
  }
  .nx-product-room-slab[data-tone=mesh] {
    background: radial-gradient(color-mix(in oklab, var(--nx-text) 16%, transparent) 1.1px, transparent 1.5px) 0 0 / 10px 10px, var(--nx-surface);
    box-shadow: inset 0 0 0 2px var(--nx-border);
  }
  .nx-product-room-slab[data-tone=driver] {
    background:
      repeating-radial-gradient(
        circle,
        var(--nx-ink-600) 0 6px,
        var(--nx-ink-400) 6px 12px);
  }
  .nx-product-room-slab[data-tone=ring] {
    background: transparent;
    border: calc(var(--nx-d) * 0.055) solid var(--nx-accent);
  }
  .nx-product-room-slab[data-tone=dome] {
    background:
      radial-gradient(
        circle,
        var(--nx-lapis-200) 0 30%,
        var(--nx-accent-soft) 70%);
  }
  .nx-product-room-pin {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 68%;
  }
  .nx-product-room-tag {
    position: absolute;
    display: block;
    white-space: nowrap;
    text-align: start;
    padding: var(--nx-space-1) var(--nx-space-2);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    background: var(--nx-surface);
    color: var(--nx-text);
    font: 600 var(--nx-text-xs) / 1.35 var(--nx-font-sans);
    transform: rotateZ(calc(var(--nx-spin, -28deg) * -1)) rotateX(calc(var(--nx-tilt, 62deg) * -1));
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--nx-dur-slow) var(--nx-ease-out) calc(var(--nx-i, 0) * var(--nx-stagger)), visibility 0s ease calc(var(--nx-i, 0) * var(--nx-stagger) + var(--nx-dur-slow));
  }
  .nx-product-room[data-exploded] .nx-product-room-tag {
    opacity: 1;
    visibility: visible;
  }
  .nx-product-room-tag-spec {
    display: block;
    font-weight: 400;
    color: var(--nx-text-muted);
  }
  .nx-flip-cube {
    display: grid;
    gap: var(--nx-space-4);
  }
  .nx-flip-cube-stage {
    perspective: 1000px;
  }
  .nx-flip-cube-cube {
    --nx-s: clamp(7.5rem, 40vw, 9.5rem);
    position: relative;
    inline-size: var(--nx-s);
    block-size: var(--nx-s);
    transform-style: preserve-3d;
    transform: rotateX(var(--nx-tilt, 0deg)) rotateY(var(--nx-spin, -24deg));
    transition: transform var(--nx-spring-gentle-duration) var(--nx-spring-gentle);
  }
  .nx-flip-cube-stage[data-dragging] .nx-flip-cube-cube {
    transition: none;
  }
  .nx-flip-cube-face {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-3);
    text-align: center;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: var(--ft) translateZ(calc(var(--nx-s) / 2));
    transition: border-color var(--nx-dur-base) var(--nx-ease-out), box-shadow var(--nx-dur-base) var(--nx-ease-out);
    & .nx-icon {
      inline-size: 1.6rem;
      block-size: 1.6rem;
      color: var(--nx-text-muted);
      transition: color var(--nx-dur-base) var(--nx-ease-out);
    }
  }
  .nx-flip-cube-face[data-on] {
    border-color: var(--nx-accent-border);
    box-shadow: 0 0 0 2px var(--nx-accent-soft), 0 18px 40px -24px color-mix(in oklab, var(--nx-accent) 55%, transparent);
    & .nx-icon {
      color: var(--nx-accent-text);
    }
  }
  .nx-flip-cube-title {
    font-size: clamp(var(--nx-text-xs), 3.2vw, var(--nx-text-sm));
    font-weight: 650;
    line-height: 1.4;
  }
  .nx-flip-cube-note {
    font-size: var(--nx-text-xs);
    line-height: 1.5;
    color: var(--nx-text-muted);
  }
  .nx-flip-cube-dots {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
  }
  .nx-flip-cube-dot {
    inline-size: 0.58rem;
    block-size: 0.58rem;
    padding: 0;
    border: 1px solid var(--nx-text-subtle);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition-property:
      background-color,
      border-color,
      scale;
    transition-duration:
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-spring-snappy-duration);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-snappy);
    &:hover {
      border-color: var(--nx-accent);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &[aria-current=true] {
      background: var(--nx-accent);
      border-color: var(--nx-accent);
      scale: 1.25;
    }
  }
  .nx-open-box {
    display: grid;
    gap: var(--nx-space-4);
  }
  .nx-open-box-stage {
    perspective: 950px;
    cursor: pointer;
    touch-action: manipulation;
  }
  .nx-open-box-shadow {
    position: absolute;
    inset-block-end: 14%;
    inline-size: 60%;
    block-size: 12%;
    background:
      radial-gradient(
        50% 50% at 50% 50%,
        rgb(0 0 0 / 0.22),
        transparent 70%);
    filter: blur(6px);
    pointer-events: none;
  }
  .nx-open-box-tilt {
    transform: rotateX(calc(-14deg + var(--nx-rx, 0deg) * 0.72)) rotateY(calc(32deg + var(--nx-ry, 0deg)));
    transform-style: preserve-3d;
    transition: transform var(--nx-dur-slow) var(--nx-ease-out);
  }
  .nx-open-box-box {
    --nx-w: clamp(8.5rem, 46vw, 10rem);
    --nx-h: calc(var(--nx-w) * 0.78);
    --nx-d: calc(var(--nx-w) * 0.52);
    position: relative;
    inline-size: var(--nx-w);
    block-size: var(--nx-h);
    transform-style: preserve-3d;
  }
  .nx-open-box-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .nx-open-box-front {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--nx-space-1);
    border-radius: var(--nx-radius-sm);
    background:
      radial-gradient(
        60% 46% at 50% 34%,
        rgb(255 255 255 / 0.16),
        transparent 68%),
      linear-gradient(
        200deg,
        var(--nx-accent),
        color-mix(in oklab, var(--nx-accent) 76%, black));
    color: var(--nx-accent-text);
    text-align: center;
    transform: translateZ(calc(var(--nx-d) / 2));
  }
  .nx-open-box-mark {
    inline-size: 34%;
    aspect-ratio: 1;
    margin-block-end: var(--nx-space-1);
    border: 1px solid color-mix(in oklab, currentColor 40%, transparent);
    border-radius: 50%;
    background:
      radial-gradient(
        circle at 38% 34%,
        color-mix(in oklab, currentColor 50%, transparent),
        transparent 42%);
  }
  .nx-open-box-brand {
    font: 800 clamp(1.05rem, 5vw, 1.5rem) / 1.1 var(--nx-font-display);
    letter-spacing: var(--nx-tracking-wider);
    padding-inline-start: var(--nx-tracking-wider);
  }
  .nx-open-box-sub {
    font-size: 0.58rem;
    letter-spacing: 0.42em;
    padding-inline-start: 0.42em;
    opacity: 0.82;
  }
  .nx-open-box-back {
    border-radius: var(--nx-radius-sm);
    background: color-mix(in oklab, var(--nx-accent) 60%, black);
    transform: rotateY(180deg) translateZ(calc(var(--nx-d) / 2));
  }
  .nx-open-box-left,
  .nx-open-box-right {
    inline-size: var(--nx-d);
    inset-inline-start: calc(50% - var(--nx-d) / 2);
    background:
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--nx-accent) 88%, white),
        var(--nx-accent));
  }
  .nx-open-box-left {
    transform: translateX(calc(var(--nx-w) / -2)) rotateY(-90deg);
  }
  .nx-open-box-right {
    transform: translateX(calc(var(--nx-w) / 2)) rotateY(90deg);
  }
  .nx-open-box-floor {
    position: absolute;
    inline-size: var(--nx-w);
    block-size: var(--nx-d);
    inset-inline: 0;
    inset-block-start: calc(50% - var(--nx-d) / 2);
    background:
      radial-gradient(
        60% 60% at 50% 40%,
        color-mix(in oklab, var(--nx-accent) 55%, black),
        color-mix(in oklab, var(--nx-ink-950) 80%, var(--nx-accent)));
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    transform: translateY(calc(var(--nx-h) / 2)) rotateX(90deg);
  }
  .nx-open-box-lid {
    position: absolute;
    inline-size: var(--nx-w);
    block-size: var(--nx-d);
    inset-inline: 0;
    inset-block-start: 0;
    transform-origin: 50% 0;
    border-radius: var(--nx-radius-sm) var(--nx-radius-sm) 0 0;
    background:
      radial-gradient(
        42% 60% at 50% 0%,
        rgb(255 255 255 / 0.14),
        transparent 70%),
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--nx-accent) 88%, white),
        var(--nx-accent));
    box-shadow: inset 0 -14px 22px -16px rgb(0 0 0 / 0.55);
    transform: translateZ(calc(var(--nx-d) / -2)) rotateX(90deg);
    transition: transform var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
  }
  .nx-open-box[data-open] .nx-open-box-lid {
    transform: translateZ(calc(var(--nx-d) / -2)) rotateX(200deg);
  }
  .nx-open-box-goods {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--nx-space-2);
    transform: translateY(6%) scale(0.96);
    transition: transform var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
  }
  .nx-open-box[data-open] .nx-open-box-goods {
    transform: translateY(-62%) scale(1);
  }
  .nx-open-box-budsrow {
    display: flex;
    gap: var(--nx-space-2);
  }
  .nx-open-box-bud {
    inline-size: 1.35rem;
    aspect-ratio: 1;
    border-radius: 50% 50% 50% 30%;
    background:
      linear-gradient(
        160deg,
        var(--nx-ink-50),
        var(--nx-ink-200));
    box-shadow: inset 0 -3px 5px rgb(0 0 0 / 0.18), 0 6px 12px -6px rgb(0 0 0 / 0.4);
    rotate: -18deg;
  }
  .nx-open-box-bud:last-child {
    border-radius: 50% 50% 30% 50%;
    rotate: 18deg;
  }
  .nx-open-box-case {
    display: grid;
    place-items: center;
    inline-size: 4.1rem;
    block-size: 1.75rem;
    border-radius: var(--nx-radius-full);
    background:
      linear-gradient(
        180deg,
        var(--nx-ink-50) 62%,
        var(--nx-ink-200) 62%);
    box-shadow: inset 0 2px 4px rgb(255 255 255 / 0.8), 0 10px 18px -8px rgb(0 0 0 / 0.45);
    &::after {
      content: "";
      inline-size: 0.3rem;
      block-size: 0.3rem;
      border-radius: 50%;
      background: var(--nx-accent);
      box-shadow: 0 0 6px var(--nx-accent);
    }
  }
  .nx-open-box-goods-name {
    padding: 0.18rem var(--nx-space-2);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    color: var(--nx-text-muted);
    font-size: 0.58rem;
    letter-spacing: 0.18em;
  }
  .nx-open-box-tagwrap {
    position: absolute;
    inset-inline-end: 8%;
    inset-block-end: 13%;
    perspective: 420px;
    pointer-events: none;
  }
  .nx-open-box-tag {
    position: relative;
    inline-size: 5rem;
    block-size: 3.1rem;
    transform-style: preserve-3d;
    animation: nx-open-box-tag-turn 7s linear infinite;
  }
  .nx-open-box[data-paused] .nx-open-box-tag {
    animation-play-state: paused;
  }
  @keyframes nx-open-box-tag-turn {
    to {
      transform: rotateY(360deg);
    }
  }
  .nx-open-box-tface {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.1rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    background: var(--nx-surface);
    color: var(--nx-text);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 12px 22px -14px rgb(0 0 0 / 0.5);
    &::before {
      content: "";
      position: absolute;
      inset-block-start: 0.3rem;
      inset-inline: 0;
      margin-inline: auto;
      inline-size: 0.32rem;
      block-size: 0.32rem;
      border-radius: 50%;
      box-shadow: inset 0 0 0 1.5px var(--nx-border);
    }
    &:last-child {
      transform: rotateY(180deg);
    }
  }
  .nx-open-box-price {
    font-size: var(--nx-text-lg);
    font-weight: 700;
  }
  .nx-open-box-price-note {
    font-size: 0.5rem;
    letter-spacing: 0.12em;
    color: var(--nx-text-muted);
  }
  @media (max-width: 30rem) {
    .nx-product-room-world {
      --nx-d: min(38vw, 8.5rem);
    }
    .nx-flip-cube-cube {
      --nx-s: clamp(7rem, 42vw, 8.75rem);
    }
    .nx-open-box-box {
      --nx-w: clamp(8.5rem, 50vw, 8.75rem);
    }
    .nx-open-box-tagwrap {
      inset-inline-end: 5%;
      inset-block-end: 10%;
    }
    .nx-open-box-tag {
      inline-size: 4.3rem;
      block-size: 2.8rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-3d-btn,
    .nx-product-room-slab,
    .nx-product-room-tag,
    .nx-flip-cube-cube,
    .nx-flip-cube-face,
    .nx-flip-cube-dot,
    .nx-open-box-tilt,
    .nx-open-box-lid,
    .nx-open-box-goods {
      transition: none;
    }
    .nx-open-box-tag {
      animation: none;
    }
    .nx-open-box-stage {
      cursor: pointer;
    }
  }
}

/* src/css/blocks/entrances.css */
@layer nx.components {
  .nx-curtain {
    display: grid;
    gap: var(--nx-space-4);
  }
  .nx-curtain-stage {
    position: relative;
    isolation: isolate;
    overflow: clip;
    display: grid;
    align-content: center;
    gap: var(--nx-space-4);
    min-block-size: min(26rem, 60vh);
    padding: clamp(var(--nx-space-5), 4.5%, var(--nx-space-9));
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
  }
  :where(.nx-js) .nx-curtain-stage:not([data-open]) .nx-curtain-item {
    opacity: 0;
    translate: 0 calc(18px * var(--nx-motion));
    filter: blur(calc(7px * var(--nx-motion)));
  }
  .nx-curtain-item {
    transition:
      opacity 550ms var(--nx-ease-out),
      translate var(--nx-spring-gentle-duration) var(--nx-spring-gentle),
      filter 550ms var(--nx-ease-out);
  }
  .nx-curtain-stage[data-open] .nx-curtain-item {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
    transition-delay: calc(400ms + var(--nx-i, 0) * 95ms);
  }
  .nx-curtain-panel {
    position: absolute;
    inset-block: 0;
    z-index: 2;
    inline-size: 50.5%;
    background:
      linear-gradient(
        180deg,
        var(--nx-ink-900),
        var(--nx-ink-800));
    translate: 0 0;
    transition: translate 900ms var(--nx-spring-gentle);
    pointer-events: none;
  }
  .nx-curtain-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(
        90deg,
        transparent 0 2.2rem,
        color-mix(in oklab, var(--nx-ink-50) 4%, transparent) 2.2rem 2.35rem);
  }
  .nx-curtain-panel-start {
    inset-inline-start: 0;
  }
  .nx-curtain-stage[data-open] .nx-curtain-panel-start {
    translate: calc(-102% * var(--nx-dir)) 0;
  }
  .nx-curtain-panel-end {
    inset-inline-end: 0;
  }
  .nx-curtain-stage[data-open] .nx-curtain-panel-end {
    translate: calc(102% * var(--nx-dir)) 0;
  }
  .nx-curtain-mark {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--nx-space-3);
    color: var(--nx-ink-50);
    pointer-events: none;
    transition: opacity 400ms var(--nx-ease-out), scale 400ms var(--nx-ease-out);
  }
  .nx-curtain-stage[data-open] .nx-curtain-mark {
    opacity: 0;
    scale: calc(0.92 + 0.08 * (1 - var(--nx-motion)));
  }
  .nx-curtain-aperture {
    inline-size: 3.2rem;
    block-size: 3.2rem;
    color: var(--nx-gold);
  }
  .nx-curtain-word {
    font-size: var(--nx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nx-tracking-wider);
    text-transform: uppercase;
    color: var(--nx-text-muted);
  }
  .nx-curtain-mark .nx-curtain-word {
    color: color-mix(in oklab, var(--nx-ink-50) 78%, transparent);
  }
  .nx-curtain-count {
    font: 800 clamp(2rem, 6vw, 3rem) / 1 var(--nx-font-display);
    font-variant-numeric: tabular-nums;
    & small {
      font-size: 0.45em;
      font-weight: 700;
      color: var(--nx-gold);
    }
  }
  .nx-curtain-replay {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-2) var(--nx-space-4);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    color: var(--nx-text);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    cursor: pointer;
    transition-property:
      border-color,
      color,
      scale;
    transition-duration:
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-spring-snappy-duration);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-snappy);
    &:hover {
      border-color: var(--nx-accent-border);
      color: var(--nx-accent-text);
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    & svg {
      inline-size: 0.95rem;
      block-size: 0.95rem;
      transition: rotate var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
    }
  }
  .nx-curtain-replay:active svg {
    rotate: calc(-360deg * var(--nx-motion));
  }
  .nx-stagger {
    display: grid;
    gap: var(--nx-space-4);
  }
  .nx-stagger-list {
    display: grid;
    gap: var(--nx-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  }
  :where(.nx-js) .nx-stagger-list:not([data-in]) .nx-stagger-item {
    opacity: 0;
    translate: 0 calc(22px * var(--nx-motion));
    filter: blur(calc(6px * var(--nx-motion)));
    transform: skewY(calc(-2deg * var(--nx-motion)));
  }
  .nx-stagger-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: var(--nx-space-3);
    row-gap: var(--nx-space-1);
    padding: var(--nx-space-4) var(--nx-space-5);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
    transition:
      opacity 700ms var(--nx-ease-out),
      translate var(--nx-spring-soft-duration) var(--nx-spring-soft),
      filter 700ms var(--nx-ease-out),
      transform var(--nx-spring-soft-duration) var(--nx-spring-soft);
  }
  .nx-stagger-list[data-in] .nx-stagger-item {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
    transform: skewY(0);
    transition-delay: calc(var(--nx-i, 0) * var(--_step, var(--nx-stagger)));
  }
  .nx-stagger-item-icon {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    inline-size: 2.3rem;
    aspect-ratio: 1;
    border-radius: var(--nx-radius-md);
    background: var(--nx-accent-soft);
    color: var(--nx-accent-text);
    & .nx-icon {
      inline-size: 1.1rem;
      block-size: 1.1rem;
    }
  }
  .nx-stagger-item-title {
    margin: 0;
    font-size: var(--nx-text-md);
    font-weight: 650;
    line-height: 1.3;
    color: var(--nx-text);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--nx-space-2);
  }
  .nx-stagger-item-tag {
    padding: 0.15rem var(--nx-space-2);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    font: 600 var(--nx-text-xs) / 1.3 var(--nx-font-mono);
    letter-spacing: var(--nx-tracking-wide);
    color: var(--nx-text-muted);
  }
  .nx-stagger-item-note {
    margin: 0;
    font-size: var(--nx-text-sm);
    line-height: 1.7;
    color: var(--nx-text-muted);
  }
  .nx-stagger-replay {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-2) var(--nx-space-4);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    color: var(--nx-text);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    cursor: pointer;
    transition-property:
      border-color,
      color,
      scale;
    transition-duration:
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-spring-snappy-duration);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-snappy);
    &:hover {
      border-color: var(--nx-accent-border);
      color: var(--nx-accent-text);
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    & svg {
      inline-size: 0.95rem;
      block-size: 0.95rem;
      transition: rotate var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
    }
  }
  .nx-stagger-replay:active svg {
    rotate: calc(-360deg * var(--nx-motion));
  }
  .nx-split-flap {
    direction: ltr;
    display: grid;
    gap: var(--nx-space-4);
    justify-items: start;
    inline-size: fit-content;
    max-inline-size: 100%;
    padding: clamp(var(--nx-space-4), 3.5%, var(--nx-space-6));
    border: 1px solid color-mix(in oklab, var(--nx-ink-900) 80%, var(--nx-gold) 6%);
    border-radius: var(--nx-radius-xl);
    background:
      linear-gradient(
        180deg,
        var(--nx-ink-900),
        var(--nx-ink-950) 70%);
    box-shadow:
      inset 0 1px 0 color-mix(in oklab, var(--nx-ink-50) 7%, transparent),
      inset 0 -8px 24px color-mix(in oklab, var(--nx-ink-950) 55%, transparent),
      var(--nx-shadow-lg);
  }
  .nx-split-flap-bar {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    inline-size: 100%;
  }
  .nx-split-flap-brand {
    font-size: var(--nx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nx-tracking-wider);
    text-transform: uppercase;
    color: var(--nx-gold);
  }
  .nx-split-flap-rule {
    flex: 1;
    block-size: 1px;
    background:
      linear-gradient(
        90deg,
        color-mix(in oklab, var(--nx-gold) 24%, transparent),
        color-mix(in oklab, var(--nx-ink-50) 8%, transparent));
  }
  .nx-split-flap-tag {
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-mono);
    letter-spacing: var(--nx-tracking-wider);
    text-transform: uppercase;
    color: color-mix(in oklab, var(--nx-ink-50) 46%, transparent);
    font-variant-numeric: tabular-nums;
  }
  .nx-split-flap-row {
    display: flex;
    gap: 0.22rem;
    max-inline-size: 100%;
  }
  .nx-split-flap-cell {
    position: relative;
    flex: 1 1 0;
    min-inline-size: 0;
    max-inline-size: 1.5rem;
    aspect-ratio: 1 / 1.72;
    perspective: 300px;
    container-type: inline-size;
  }
  .nx-split-flap-half,
  .nx-split-flap-leaf {
    position: absolute;
    inset-inline: 0;
    block-size: 50%;
    overflow: clip;
  }
  .nx-split-flap-half.nx-split-flap-top-half,
  .nx-split-flap-leaf.nx-split-flap-leaf-t {
    inset-block-start: 0;
    background:
      linear-gradient(
        180deg,
        color-mix(in oklab, var(--nx-ink-50) 16%, var(--nx-ink-800)),
        color-mix(in oklab, var(--nx-ink-50) 10%, var(--nx-ink-900)));
  }
  .nx-split-flap-half.nx-split-flap-bot-half,
  .nx-split-flap-leaf.nx-split-flap-leaf-b {
    inset-block-end: 0;
    background:
      linear-gradient(
        180deg,
        var(--nx-ink-950),
        color-mix(in oklab, var(--nx-ink-50) 8%, var(--nx-ink-900)));
  }
  .nx-split-flap-leaf.nx-split-flap-leaf-t {
    transform-origin: 50% 100%;
    transform: rotateX(0deg);
    z-index: 2;
    display: none;
    box-shadow: 0 1px 2px color-mix(in oklab, var(--nx-ink-950) 60%, transparent);
  }
  .nx-split-flap-leaf.nx-split-flap-leaf-b {
    transform-origin: 50% 0%;
    transform: rotateX(90deg);
    z-index: 2;
    display: none;
    box-shadow: 0 1px 2px color-mix(in oklab, var(--nx-ink-950) 60%, transparent);
  }
  .nx-split-flap-g {
    position: absolute;
    inset-inline: 0;
    block-size: 200%;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 64cqw / 1 var(--nx-font-mono);
    color: color-mix(in oklab, var(--nx-ink-50) 92%, var(--nx-gold));
    font-variant-numeric: tabular-nums;
  }
  .nx-split-flap-top-half .nx-split-flap-g,
  .nx-split-flap-leaf-t .nx-split-flap-g {
    inset-block-start: 0;
  }
  .nx-split-flap-bot-half .nx-split-flap-g,
  .nx-split-flap-leaf-b .nx-split-flap-g {
    inset-block-start: -100%;
  }
  .nx-split-flap-cell::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline: 0;
    block-size: 1px;
    background: color-mix(in oklab, var(--nx-ink-950) 65%, transparent);
    z-index: 3;
    pointer-events: none;
  }
  .nx-split-flap-row .nx-split-flap-cell:first-child {
    border-start-start-radius: var(--nx-radius-sm);
    border-end-start-radius: var(--nx-radius-sm);
  }
  .nx-split-flap-row .nx-split-flap-cell:last-child {
    border-start-end-radius: var(--nx-radius-sm);
    border-end-end-radius: var(--nx-radius-sm);
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-curtain-item,
    .nx-curtain-panel,
    .nx-curtain-mark,
    .nx-curtain-replay,
    .nx-stagger-item,
    .nx-stagger-replay {
      transition: none;
    }
    :where(.nx-js) .nx-curtain-stage:not([data-open]) .nx-curtain-item,
    :where(.nx-js) .nx-stagger-list:not([data-in]) .nx-stagger-item {
      opacity: 1;
      translate: 0 0;
      filter: none;
      transform: none;
    }
    .nx-curtain-stage[data-open] .nx-curtain-item,
    .nx-stagger-list[data-in] .nx-stagger-item {
      transition-delay: 0ms;
    }
    .nx-curtain-replay:active svg,
    .nx-stagger-replay:active svg {
      rotate: 0deg;
    }
  }
}

/* src/css/blocks/hover-fx.css */
@layer nx.components {
  .nx-image-trail {
    position: relative;
    overflow: clip;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    min-block-size: 24rem;
    padding: 0;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background-color: var(--nx-surface-2);
    background-image: radial-gradient(color-mix(in oklab, var(--nx-text) 14%, transparent) 1px, transparent 1px);
    background-size: 26px 26px;
    cursor: crosshair;
    touch-action: pan-y;
  }
  .nx-image-trail-list {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    margin: 0;
    padding: var(--nx-space-5) var(--nx-space-4);
    list-style: none;
  }
  .nx-image-trail-row {
    display: flex;
    align-items: baseline;
    gap: var(--nx-space-3);
    padding: var(--nx-space-2) var(--nx-space-1);
    border-block-end: 1px solid color-mix(in oklab, var(--nx-border) 70%, transparent);
  }
  .nx-image-trail-row:last-child {
    border-block-end: 0;
  }
  .nx-image-trail-no {
    min-inline-size: 2rem;
    font: 600 var(--nx-text-xs) / 1.4 var(--nx-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--nx-text-subtle);
    transition: color var(--nx-dur-base) var(--nx-ease-out);
  }
  .nx-image-trail-row:focus-within .nx-image-trail-no {
    color: var(--nx-accent-text);
  }
  .nx-image-trail-link {
    flex: 1;
    min-inline-size: 0;
    color: inherit;
    font-weight: 650;
    font-size: var(--nx-text-lg);
    text-decoration: none;
    transition: color var(--nx-dur-fast) var(--nx-ease-out);
    &:hover,
    &:focus-visible {
      color: var(--nx-accent-text);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
      border-radius: var(--nx-radius-xs);
    }
  }
  .nx-image-trail-kind {
    margin-inline-start: var(--nx-space-2);
    font-weight: 400;
    font-size: var(--nx-text-xs);
    color: var(--nx-text-muted);
  }
  .nx-image-trail-aside {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--nx-space-5);
    padding: var(--nx-space-4);
    border-inline-start: 1px dashed color-mix(in oklab, var(--nx-border) 80%, transparent);
  }
  .nx-image-trail-card {
    position: absolute;
    inset-block-start: 0;
    left: 0;
    inline-size: clamp(7.5rem, 24vw, 10.5rem);
    aspect-ratio: 3 / 2;
    overflow: clip;
    border-radius: var(--nx-radius-lg);
    box-shadow: var(--nx-shadow-lg);
    pointer-events: none;
    opacity: 0;
    z-index: 3;
    transition: opacity var(--nx-dur-slow) var(--nx-ease-out);
    transition-delay: calc(var(--nx-i, 0) * 55ms);
    will-change: transform;
  }
  .nx-image-trail[data-live] .nx-image-trail-card {
    opacity: 1;
  }
  .nx-image-trail-card img,
  .nx-image-trail-card svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    outline: 1px solid color-mix(in oklab, var(--nx-text) 10%, transparent);
    outline-offset: -1px;
  }
  @media (max-width: 40rem) {
    .nx-image-trail {
      grid-template-columns: 1fr;
      min-block-size: 30rem;
    }
    .nx-image-trail-list {
      align-content: start;
    }
    .nx-image-trail-aside {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--nx-space-5);
      padding: var(--nx-space-3);
      border-inline-start: 0;
      border-block-start: 1px dashed color-mix(in oklab, var(--nx-border) 80%, transparent);
    }
  }
  .nx-link-underline {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--nx-text);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--nx-radius-xs);
    transition: color var(--nx-dur-base) var(--nx-ease-out);
    &:is(:hover, :focus-visible) {
      color: var(--nx-accent-text);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-link-underline[data-variant=center]::before,
  .nx-link-underline[data-variant=center]::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: -0.34em;
    block-size: 2px;
    border-radius: 2px;
    background: var(--nx-accent);
  }
  .nx-link-underline[data-variant=center]::before {
    opacity: 0.22;
  }
  .nx-link-underline[data-variant=center]::after {
    scale: 0 1;
    transition: scale var(--nx-dur-base) cubic-bezier(0.22, 0.9, 0.3, 1);
  }
  .nx-link-underline[data-variant=center]:is(:hover, :focus-visible)::after {
    scale: 1 1;
  }
  .nx-link-underline[data-variant=brackets]::before,
  .nx-link-underline[data-variant=brackets]::after {
    content: "";
    position: absolute;
    inset-block: 0.06em;
    inline-size: 0.34em;
    block-size: calc(100% - 0.12em);
    border: 0 solid var(--nx-accent);
    opacity: 0;
    transition-property: translate, opacity;
    transition-duration: var(--nx-dur-fast);
    transition-timing-function: var(--nx-ease-out);
  }
  .nx-link-underline[data-variant=brackets]::before {
    inset-inline-start: -0.62em;
    border-inline-start-width: 2px;
    border-block-start-width: 2px;
    border-block-end-width: 2px;
    border-start-start-radius: 0.18em;
    border-end-start-radius: 0.18em;
    translate: calc(0.35em * var(--nx-dir) * var(--nx-motion)) 0;
  }
  .nx-link-underline[data-variant=brackets]::after {
    inset-inline-end: -0.62em;
    border-inline-end-width: 2px;
    border-block-start-width: 2px;
    border-block-end-width: 2px;
    border-start-end-radius: 0.18em;
    border-end-end-radius: 0.18em;
    translate: calc(-0.35em * var(--nx-dir) * var(--nx-motion)) 0;
  }
  .nx-link-underline[data-variant=brackets]:is(:hover, :focus-visible)::before,
  .nx-link-underline[data-variant=brackets]:is(:hover, :focus-visible)::after {
    opacity: 1;
    translate: 0 0;
  }
  .nx-link-underline[data-variant=arrow] {
    padding-inline-start: 0;
    transition-property: color, padding-inline-start;
    transition-duration: var(--nx-dur-base);
    transition-timing-function: cubic-bezier(0.22, 0.9, 0.3, 1);
  }
  .nx-link-underline[data-variant=arrow] > .nx-icon {
    position: absolute;
    inset-inline-start: -1.15em;
    inline-size: 0.95em;
    block-size: 0.95em;
    opacity: 0;
    translate: calc(-0.45em * var(--nx-dir) * var(--nx-motion)) 0;
    transition-property: translate, opacity;
    transition-duration: var(--nx-dur-base), var(--nx-dur-fast);
    transition-timing-function: cubic-bezier(0.22, 0.9, 0.3, 1);
  }
  .nx-link-underline[data-variant=arrow]:is(:hover, :focus-visible) {
    padding-inline-start: 1.28em;
  }
  .nx-link-underline[data-variant=arrow]:is(:hover, :focus-visible) > .nx-icon {
    opacity: 1;
    translate: calc(0.3em * var(--nx-dir) * var(--nx-motion)) 0;
  }
  .nx-link-underline-swap {
    position: relative;
    display: block;
    overflow: clip;
    block-size: 1.35em;
    line-height: 1.35em;
  }
  .nx-link-underline-swap-a {
    display: block;
    transition: translate var(--nx-dur-base) cubic-bezier(0.3, 0.8, 0.3, 1);
  }
  .nx-link-underline-swap::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: var(--nx-accent-text);
    translate: 0 calc(105% * var(--nx-motion));
    transition: translate var(--nx-dur-base) cubic-bezier(0.3, 0.8, 0.3, 1);
  }
  .nx-link-underline:is(:hover, :focus-visible) .nx-link-underline-swap-a {
    translate: 0 calc(-105% * var(--nx-motion));
  }
  .nx-link-underline:is(:hover, :focus-visible) .nx-link-underline-swap::after {
    translate: 0 0;
  }
  .nx-link-underline[data-variant=marker] {
    background-image: linear-gradient(color-mix(in oklab, var(--nx-gold) 45%, transparent), color-mix(in oklab, var(--nx-gold) 45%, transparent));
    background-repeat: no-repeat;
    background-size: 0% 44%;
    background-position: 0 72%;
    transition-property: background-size, color;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.25, 0.9, 0.3, 1);
  }
  :where([dir=rtl]) .nx-link-underline[data-variant=marker] {
    background-position: 100% 72%;
  }
  .nx-link-underline[data-variant=marker]:is(:hover, :focus-visible) {
    background-size: 100% 44%;
  }
  .nx-link-underline[data-variant=circle] {
    isolation: isolate;
    padding-inline: 0.35em;
    &::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset-block: 0.02em;
      inset-inline: -0.12em;
      border-radius: var(--nx-radius-full);
      background: var(--nx-accent);
      scale: 0 1;
      transition: scale var(--nx-spring-bouncy-duration) var(--nx-spring-bouncy);
    }
  }
  .nx-link-underline[data-variant=circle]:is(:hover, :focus-visible) {
    color: var(--nx-accent-contrast);
  }
  .nx-link-underline[data-variant=circle]:is(:hover, :focus-visible)::before {
    scale: 1 1;
  }
  .nx-link-underline[data-variant=wave] {
    display: inline;
  }
  .nx-link-underline-wave-word {
    display: inline-block;
    white-space: nowrap;
  }
  .nx-link-underline-wave-unit {
    display: inline-block;
    transition-property: translate, color;
    transition-duration: var(--nx-dur-base);
    transition-timing-function: cubic-bezier(0.3, 1.4, 0.5, 1);
    transition-delay: calc(var(--nx-i, 0) * 32ms);
  }
  .nx-link-underline[data-variant=wave]:is(:hover, :focus-visible) .nx-link-underline-wave-unit {
    translate: 0 calc(-0.3em * var(--nx-motion));
    color: var(--nx-accent-text);
  }
  .nx-link-underline-window {
    display: inline-block;
    overflow: clip;
    inline-size: 1em;
    block-size: 1em;
    margin-inline-start: 0.42em;
  }
  .nx-link-underline-strip {
    display: flex;
    transition: translate var(--nx-dur-base) cubic-bezier(0.25, 0.9, 0.3, 1);
    & > .nx-icon {
      inline-size: 1em;
      block-size: 1em;
      flex: none;
    }
  }
  .nx-link-underline[data-variant=icon]:is(:hover, :focus-visible) .nx-link-underline-strip {
    translate: calc(-1.05em * var(--nx-dir) * var(--nx-motion)) 0;
  }
  .nx-glare-card {
    --nx-glare-depth-art: 10px;
    --nx-glare-depth-body: 22px;
    --nx-glare-depth-actions: 34px;
    position: relative;
    display: grid;
    inline-size: min(100%, 24.5rem);
    aspect-ratio: 1.62 / 1;
    overflow: clip;
    border-radius: var(--nx-radius-xl);
    background: var(--nx-ink-950);
    color: var(--nx-ink-50);
    transform: perspective(950px) rotateX(var(--_rx, 0deg)) rotateY(var(--_ry, 0deg));
    transform-style: preserve-3d;
    container-type: inline-size;
    touch-action: manipulation;
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 3px;
    }
  }
  .nx-glare-art {
    position: absolute;
    inset: -6%;
    inline-size: 112%;
    block-size: 112%;
    translate: calc(var(--_x, 0) * var(--nx-glare-depth-art) * var(--nx-motion)) calc(var(--_y, 0) * var(--nx-glare-depth-art) * var(--nx-motion));
    & img,
    & svg {
      display: block;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      outline: 1px solid color-mix(in oklab, var(--nx-text) 10%, transparent);
      outline-offset: -1px;
    }
  }
  .nx-glare-sheen {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      radial-gradient(
        46% 62% at var(--_mx, 50%) var(--_my, 42%),
        color-mix(in oklab, var(--nx-ink-50) 38%, transparent),
        color-mix(in oklab, var(--nx-ink-50) 6%, transparent) 55%,
        transparent 72%);
    mix-blend-mode: soft-light;
    opacity: 0;
    transition: opacity var(--nx-dur-base) var(--nx-ease-out);
    &::before {
      content: "";
      position: absolute;
      inset: -45%;
      background:
        linear-gradient(
          90deg,
          transparent 26%,
          color-mix(in oklab, var(--nx-ink-50) 50%, transparent) 48%,
          color-mix(in oklab, var(--nx-ink-50) 8%, transparent) 56%,
          transparent 78%);
      rotate: var(--_rot, 105deg);
      filter: blur(2px);
    }
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(
          24% 34% at var(--_mx, 50%) var(--_my, 42%),
          color-mix(in oklab, var(--nx-ink-50) 55%, transparent),
          transparent 70%);
      mix-blend-mode: overlay;
    }
  }
  .nx-glare-card[data-lit] .nx-glare-sheen {
    opacity: 1;
  }
  .nx-glare-body {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--nx-space-2);
    inline-size: 100%;
    padding: var(--nx-space-4) var(--nx-space-5);
    translate: calc(var(--_x, 0) * var(--nx-glare-depth-body) * var(--nx-motion)) calc(var(--_y, 0) * var(--nx-glare-depth-body) * var(--nx-motion));
  }
  .nx-glare-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--nx-space-2);
  }
  .nx-glare-brand {
    display: grid;
    gap: 0.15rem;
    font-size: var(--nx-text-xs);
    letter-spacing: var(--nx-tracking-wider);
    text-transform: uppercase;
    color: var(--nx-ink-200);
    & strong {
      font-size: var(--nx-text-md);
      letter-spacing: 0;
      color: var(--nx-ink-50);
    }
  }
  .nx-glare-chip {
    inline-size: 2.5rem;
    aspect-ratio: 1.45;
    border-radius: var(--nx-radius-xs);
    background: var(--nx-gradient-gold);
  }
  .nx-glare-line {
    align-self: center;
    font: 600 clamp(0.95rem, 4.6cqi, 1.22rem) / 1.2 var(--nx-font-mono);
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    color: var(--nx-ink-50);
  }
  :where([dir=rtl]) .nx-glare-line {
    text-align: end;
  }
  .nx-glare-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--nx-space-3);
    color: var(--nx-ink-200);
    & small {
      display: block;
      font-size: var(--nx-text-xs);
      letter-spacing: var(--nx-tracking-wider);
      text-transform: uppercase;
      color: var(--nx-ink-300);
    }
    & b {
      font-size: var(--nx-text-sm);
      font-weight: 600;
      color: var(--nx-ink-50);
    }
  }
  .nx-glare-card:has(.nx-glare-actions) .nx-glare-foot {
    padding-inline-end: 8rem;
  }
  .nx-glare-actions {
    position: absolute;
    inset-block-end: var(--nx-space-4);
    inset-inline-end: var(--nx-space-5);
    z-index: 3;
    translate: calc(var(--_x, 0) * var(--nx-glare-depth-actions) * var(--nx-motion)) calc(var(--_y, 0) * var(--nx-glare-depth-actions) * var(--nx-motion));
  }
  .nx-glare-button {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-1);
    padding: 0.5rem 0.95rem;
    border: 1px solid color-mix(in oklab, var(--nx-ink-50) 28%, transparent);
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--nx-ink-950) 55%, transparent);
    color: var(--nx-ink-50);
    font: 600 var(--nx-text-xs) / 1 var(--nx-font-sans);
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition-property:
      background-color,
      border-color,
      scale;
    transition-duration:
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-spring-snappy-duration);
    transition-timing-function: var(--nx-ease-out);
    &:hover {
      border-color: var(--nx-accent);
      background: color-mix(in oklab, var(--nx-accent) 50%, transparent);
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-magnetic-set {
    position: relative;
    display: grid;
    gap: var(--nx-space-6);
    justify-items: center;
    align-content: center;
    min-block-size: 15rem;
    padding: var(--nx-space-5) var(--nx-space-4);
    overflow: clip;
    border: 1px dashed var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background-color: var(--nx-surface);
    background-image: radial-gradient(color-mix(in oklab, var(--nx-text) 14%, transparent) 1px, transparent 1px);
    background-size: 26px 26px;
    touch-action: manipulation;
  }
  .nx-magnetic-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-5);
  }
  .nx-magnetic-item {
    position: relative;
    translate: var(--_x, 0px) var(--_y, 0px);
    will-change: translate;
  }
  .nx-image-accordion {
    display: flex;
    gap: var(--nx-space-1);
    min-block-size: 22rem;
    padding: var(--nx-space-2);
    overflow: clip;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface);
    touch-action: pan-y;
    container-type: inline-size;
  }
  .nx-image-accordion-panel {
    position: relative;
    flex: 1 1 0;
    min-inline-size: 3rem;
    display: grid;
    align-content: end;
    justify-items: start;
    padding: 0;
    overflow: clip;
    border: 0;
    border-radius: var(--nx-radius-lg);
    background: var(--nx-ink-950);
    cursor: pointer;
    transition: flex-grow var(--nx-dur-slower) cubic-bezier(0.3, 0.8, 0.25, 1);
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: -2px;
    }
  }
  .nx-image-accordion-panel[data-open] {
    flex-grow: 4.6;
  }
  .nx-image-accordion-scene {
    position: absolute;
    inset: 0;
    & img,
    & svg {
      display: block;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      outline: 1px solid color-mix(in oklab, var(--nx-text) 10%, transparent);
      outline-offset: -1px;
    }
  }
  .nx-image-accordion-veil {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        to top,
        color-mix(in oklab, var(--nx-ink-950) 82%, transparent),
        color-mix(in oklab, var(--nx-ink-950) 12%, transparent) 55%,
        transparent);
    transition: opacity var(--nx-dur-slow) var(--nx-ease-out);
  }
  .nx-image-accordion-panel:not([data-open]) .nx-image-accordion-veil {
    opacity: 0.55;
  }
  .nx-image-accordion-fold {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.25rem;
    inline-size: 100%;
    padding: var(--nx-space-4);
    color: var(--nx-ink-50);
    text-align: start;
  }
  .nx-image-accordion-title-wrap {
    display: grid;
    gap: 0.1rem;
    overflow: clip;
    opacity: 0;
    translate: 0 calc(0.9rem * var(--nx-motion));
    visibility: hidden;
    transition:
      opacity var(--nx-dur-slow) var(--nx-ease-out) 120ms,
      translate var(--nx-dur-slow) cubic-bezier(0.3, 0.8, 0.3, 1) 120ms,
      visibility 0s linear 120ms;
  }
  .nx-image-accordion-panel[data-open] .nx-image-accordion-title-wrap {
    opacity: 1;
    translate: 0 0;
    visibility: visible;
  }
  .nx-image-accordion-no {
    font: 700 var(--nx-text-xs) / 1.4 var(--nx-font-mono);
    letter-spacing: var(--nx-tracking-wider);
    font-variant-numeric: tabular-nums;
    color: var(--nx-ink-100);
  }
  .nx-image-accordion-title {
    font-size: clamp(1rem, 3.4cqi, 1.5rem);
    font-weight: 700;
    white-space: nowrap;
  }
  .nx-image-accordion-caption {
    font-size: var(--nx-text-sm);
    color: var(--nx-ink-200);
    white-space: nowrap;
  }
  .nx-image-accordion-runner {
    position: absolute;
    z-index: 1;
    inset-block: var(--nx-space-4);
    inset-inline-start: 50%;
    translate: calc(-50% * var(--nx-dir)) 0;
    writing-mode: vertical-rl;
    font: 700 var(--nx-text-xs) / 1 var(--nx-font-mono);
    letter-spacing: var(--nx-tracking-wider);
    font-variant-numeric: tabular-nums;
    color: var(--nx-ink-100);
    transition: opacity var(--nx-dur-fast) var(--nx-ease-out);
  }
  .nx-image-accordion-panel[data-open] .nx-image-accordion-runner {
    opacity: 0;
  }
  @media (max-width: 40rem) {
    .nx-image-accordion {
      min-block-size: 24rem;
      gap: 0.35rem;
      padding: 0.35rem;
    }
    .nx-image-accordion-panel {
      min-inline-size: 2.5rem;
    }
    .nx-image-accordion-fold {
      padding: var(--nx-space-3);
    }
    .nx-image-accordion-title,
    .nx-image-accordion-caption {
      white-space: normal;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-image-trail-card {
      transition: none;
    }
    .nx-link-underline,
    .nx-link-underline *,
    .nx-link-underline::before,
    .nx-link-underline::after {
      transition-duration: 1ms;
      translate: 0 0;
    }
    .nx-link-underline[data-variant=center]::after {
      scale: 1 1;
      opacity: 0.5;
    }
    .nx-link-underline[data-variant=brackets]::before,
    .nx-link-underline[data-variant=brackets]::after {
      opacity: 1;
    }
    .nx-link-underline[data-variant=arrow] {
      padding-inline-start: 1.28em;
      & > .nx-icon {
        opacity: 1;
        translate: calc(0.3em * var(--nx-dir)) 0;
      }
    }
    .nx-link-underline[data-variant=marker] {
      background-size: 100% 44%;
    }
    .nx-link-underline[data-variant=circle]::before {
      scale: 1 1;
      opacity: 0.3;
    }
    .nx-link-underline[data-variant=icon] .nx-link-underline-strip {
      translate: calc(-1.05em * var(--nx-dir)) 0;
    }
    .nx-glare-card {
      transform: none;
      --_mx: 30%;
      --_my: 26%;
      --_rot: 115deg;
    }
    .nx-glare-sheen {
      opacity: 0.85;
    }
    .nx-glare-art,
    .nx-glare-body,
    .nx-glare-actions {
      translate: 0 0;
    }
    .nx-magnetic-item {
      translate: 0 0;
    }
    .nx-image-accordion-panel,
    .nx-image-accordion-title-wrap {
      transition: none;
    }
  }
}

/* src/css/blocks/kinetic.css */
@layer nx.components {
  .nx-wordfill {
    display: grid;
    gap: var(--nx-space-4);
  }
  .nx-wordfill-layout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--nx-space-4);
    align-items: start;
  }
  .nx-wordfill-rail {
    position: sticky;
    inset-block-start: var(--nx-space-2);
    display: grid;
    gap: var(--nx-space-2);
    justify-items: center;
    inline-size: 3rem;
    padding-block: var(--nx-space-1);
  }
  .nx-wordfill-pct {
    font-size: var(--nx-text-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--nx-text);
  }
  .nx-wordfill-track {
    display: block;
    inline-size: 3px;
    block-size: 8rem;
    border-radius: var(--nx-radius-full);
    background: var(--nx-border);
    overflow: clip;
  }
  .nx-wordfill-fill {
    display: block;
    block-size: calc(var(--nx-scroll, 0) * 100%);
    border-radius: inherit;
    background:
      linear-gradient(
        180deg,
        var(--nx-accent),
        color-mix(in oklab, var(--nx-accent) 60%, var(--nx-text)));
    transition: block-size var(--nx-dur-fast) linear;
  }
  .nx-wordfill-pane {
    block-size: var(--_pane, 18rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--nx-space-5);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
    scrollbar-width: thin;
    scrollbar-color: var(--nx-border) transparent;
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-wordfill-text {
    margin: 0;
    max-inline-size: 58ch;
    font-size: var(--nx-text-md);
    font-weight: 500;
    line-height: 2.1;
    color: var(--nx-text);
  }
  .nx-wordfill-word {
    color: color-mix(in oklab, var(--nx-text) calc(var(--lit, 0) * 100%), var(--nx-text-subtle));
    transition: color var(--nx-dur-base) linear;
  }
  .nx-wordfill-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--nx-space-3) var(--nx-space-5);
  }
  .nx-wordfill-reset {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-2) var(--nx-space-4);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    color: var(--nx-text);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    cursor: pointer;
    transition-property:
      border-color,
      color,
      scale;
    transition-duration:
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-spring-snappy-duration);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-snappy);
    &:hover {
      border-color: var(--nx-accent-border);
      color: var(--nx-accent-text);
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  @media (max-width: 30rem) {
    .nx-wordfill-layout {
      grid-template-columns: minmax(0, 1fr);
    }
    .nx-wordfill-rail {
      position: static;
      grid-auto-flow: column;
      grid-template-columns: auto var(--nx-space-24);
      justify-content: start;
      align-items: center;
      inline-size: auto;
    }
    .nx-wordfill-track {
      block-size: 3px;
      inline-size: 6rem;
    }
    .nx-wordfill-fill {
      block-size: auto;
      inline-size: calc(var(--nx-scroll, 0) * 100%);
      transition: inline-size var(--nx-dur-fast) linear, block-size var(--nx-dur-fast) linear;
    }
  }
  .nx-wordcycle {
    position: relative;
    display: grid;
    gap: var(--nx-space-5);
    justify-items: center;
    text-align: center;
    padding: clamp(var(--nx-space-6), 4vw, var(--nx-space-10)) var(--nx-space-5);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background:
      radial-gradient(
        120% 100% at 50% 0%,
        var(--nx-accent-soft),
        transparent 60%),
      var(--nx-surface);
    overflow: clip;
  }
  .nx-wordcycle-kicker {
    margin: 0;
    font-size: var(--nx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nx-tracking-wider);
    text-transform: uppercase;
    color: var(--nx-text-muted);
  }
  .nx-wordcycle-line {
    position: relative;
    margin: 0;
    max-inline-size: 24ch;
    font-weight: 800;
    font-size: var(--nx-text-4xl);
    line-height: 1.6;
    text-wrap: balance;
    color: var(--nx-text);
  }
  .nx-wordcycle-stage {
    display: inline-block;
    perspective: 600px;
    white-space: nowrap;
    vertical-align: bottom;
    text-align: start;
    inline-size: var(--_slot, max-content);
    transition: inline-size var(--nx-spring-snappy-duration) var(--nx-spring-snappy);
  }
  .nx-wordcycle-word {
    display: inline-block;
    transform-origin: 50% 100%;
    backface-visibility: hidden;
    color: var(--nx-accent-text);
    transition-property: transform, opacity;
    transition-duration: var(--nx-spring-snappy-duration);
    transition-timing-function: var(--nx-spring-snappy);
  }
  .nx-wordcycle-word[data-state=out] {
    transform: rotateX(90deg);
    opacity: 0;
  }
  .nx-wordcycle-word[data-state=in] {
    transform: rotateX(-90deg);
    opacity: 0;
    transition: none;
  }
  .nx-wordcycle-ghost {
    position: absolute;
    visibility: hidden;
    white-space: nowrap;
    pointer-events: none;
    font: inherit;
  }
  .nx-wordcycle-hint {
    margin: 0;
    font-size: var(--nx-text-xs);
    color: var(--nx-text-muted);
  }
  .nx-wordcycle-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nx-space-3) var(--nx-space-5);
    justify-content: space-between;
    inline-size: 100%;
  }
  .nx-wordcycle-dots {
    display: inline-flex;
    gap: var(--nx-space-2);
  }
  .nx-wordcycle-dot {
    inline-size: 0.55rem;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid var(--nx-text-muted);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition-property:
      background-color,
      border-color,
      scale;
    transition-duration:
      var(--nx-dur-base),
      var(--nx-dur-base),
      var(--nx-spring-snappy-duration);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-snappy);
    &[aria-current=true] {
      background: var(--nx-accent);
      border-color: var(--nx-accent);
      scale: 1.25;
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-wordcycle-again {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-2) var(--nx-space-4);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface-2);
    color: var(--nx-text);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    cursor: pointer;
    transition-property:
      border-color,
      color,
      scale;
    transition-duration:
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-spring-snappy-duration);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-snappy);
    &:hover {
      border-color: var(--nx-accent-border);
      color: var(--nx-accent-text);
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-velocity {
    display: grid;
    gap: var(--nx-space-4);
  }
  .nx-velocity-pane {
    block-size: var(--_pane, 11rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--nx-space-5);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
    color: var(--nx-text);
    scrollbar-width: thin;
    scrollbar-color: var(--nx-border) transparent;
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    & :first-child {
      margin-block-start: 0;
    }
    & :last-child {
      margin-block-end: 0;
    }
  }
  .nx-velocity-band {
    overflow: clip;
    border-block: 1px solid var(--nx-border);
    padding-block: var(--nx-space-2);
    -webkit-user-select: none;
    user-select: none;
    color: var(--nx-text);
    font-weight: 800;
    font-size: clamp(1.45rem, 5vw, 2.7rem);
    line-height: 1.25;
    letter-spacing: var(--nx-tracking-wide);
    white-space: nowrap;
  }
  .nx-velocity-band[data-reverse] {
    color: var(--nx-gold-text);
  }
  .nx-velocity-track {
    display: flex;
    align-items: center;
    inline-size: max-content;
    will-change: translate;
    & > span {
      padding-inline: 0.18em;
    }
  }
  .nx-velocity-meter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2) var(--nx-space-4);
    margin: 0;
    padding: var(--nx-space-2) var(--nx-space-5);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    color: var(--nx-text-muted);
  }
  .nx-velocity-value {
    min-inline-size: 6ch;
    text-align: center;
    color: var(--nx-accent-text);
    font-family: var(--nx-font-mono);
    font-variant-numeric: tabular-nums;
    direction: ltr;
  }
  .nx-velocity-dir .nx-icon {
    transition: rotate var(--nx-dur-fast) var(--nx-ease-out);
    color: var(--nx-accent-text);
  }
  .nx-velocity[data-reversing] .nx-velocity-dir .nx-icon {
    rotate: 180deg;
  }
  .nx-elastic {
    display: grid;
    gap: var(--nx-space-5);
    justify-items: center;
    padding: clamp(var(--nx-space-6), 5vw, var(--nx-space-10)) var(--nx-space-5) var(--nx-space-6);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background:
      radial-gradient(
        120% 80% at 50% -10%,
        color-mix(in oklab, var(--nx-accent) 7%, transparent),
        transparent 60%),
      var(--nx-surface);
    overflow: clip;
  }
  .nx-elastic-kicker {
    margin: 0;
    font-size: var(--nx-text-xs);
    font-weight: 700;
    letter-spacing: var(--nx-tracking-wider);
    text-transform: uppercase;
    color: var(--nx-text-muted);
    text-align: center;
  }
  .nx-elastic-title {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 0.05em;
    max-inline-size: 100%;
    font-weight: 800;
    font-size: clamp(2rem, 9vw, 4.2rem);
    line-height: 1.3;
    letter-spacing: var(--nx-tracking-wide);
    color: var(--nx-text);
    cursor: default;
    touch-action: manipulation;
  }
  [dir=rtl] .nx-elastic-title {
    gap: 0 0.35em;
  }
  .nx-elastic-gap {
    inline-size: 0.4em;
  }
  .nx-elastic-unit {
    position: relative;
    display: inline-block;
    white-space: pre;
    will-change: scale;
    transition: color var(--nx-dur-fast) var(--nx-ease-out);
    &:hover {
      z-index: 1;
      color: var(--nx-accent-text);
    }
  }
  .nx-elastic-sub {
    margin: 0;
    font-size: var(--nx-text-sm);
    color: var(--nx-text-muted);
    text-align: center;
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-wordfill-word,
    .nx-wordfill-fill,
    .nx-wordfill-reset,
    .nx-wordcycle-stage,
    .nx-wordcycle-word,
    .nx-wordcycle-dot,
    .nx-wordcycle-again,
    .nx-velocity-dir .nx-icon,
    .nx-elastic-unit {
      transition: none;
    }
    .nx-wordcycle-word[data-state=out],
    .nx-wordcycle-word[data-state=in] {
      transform: none;
      opacity: 1;
    }
    .nx-velocity-track {
      translate: none !important;
    }
    .nx-elastic-unit {
      scale: none !important;
    }
  }
}

/* src/css/blocks/micro-fx.css */
@layer nx.components {
  .nx-confetti-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
  }
  .nx-confetti-button-host {
    position: relative;
    display: inline-grid;
    isolation: isolate;
  }
  .nx-confetti-button-host > .nx-confetti-canvas {
    inset: calc(-1 * var(--nx-space-13)) calc(-1 * var(--nx-space-12));
    z-index: 4;
  }
  .nx-confetti-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nx-space-2);
    min-block-size: 2.75rem;
    padding-inline: var(--nx-space-5);
    border: 1px solid transparent;
    border-radius: var(--nx-radius-full);
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    cursor: pointer;
    transition-property:
      background-color,
      border-color,
      color,
      scale;
    transition-duration:
      var(--nx-dur-base),
      var(--nx-dur-base),
      var(--nx-dur-base),
      var(--nx-spring-snappy-duration);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-snappy);
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-confetti-button[data-state=done] {
    background: var(--nx-success);
    border-color: var(--nx-success);
    color: var(--nx-accent-contrast);
  }
  .nx-confetti-button-icons {
    display: inline-grid;
    place-items: center;
    & > * {
      grid-area: 1 / 1;
      transition:
        opacity 300ms cubic-bezier(0.2, 0, 0, 1),
        scale 300ms cubic-bezier(0.2, 0, 0, 1),
        filter 300ms cubic-bezier(0.2, 0, 0, 1);
    }
    & > :not(:first-child) {
      opacity: 0;
      scale: 0.25;
      filter: blur(4px);
    }
  }
  .nx-confetti-button[data-state=done] .nx-confetti-button-icons > :first-child {
    opacity: 0;
    scale: 0.25;
    filter: blur(4px);
  }
  .nx-confetti-button[data-state=done] .nx-confetti-button-icons > :not(:first-child) {
    opacity: 1;
    scale: 1;
    filter: none;
  }
  .nx-ripple-surface {
    position: relative;
    overflow: clip;
    -webkit-tap-highlight-color: transparent;
  }
  .nx-ripple-ink {
    position: absolute;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.22;
    translate: -50% -50%;
    scale: 0;
    pointer-events: none;
    animation: nx-ripple-ink-grow 550ms var(--nx-ease-out) forwards;
  }
  @keyframes nx-ripple-ink-grow {
    to {
      scale: 1;
      opacity: 0;
    }
  }
  .nx-ripple-surface[data-variant=filled] {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    min-block-size: 2.5rem;
    padding-inline: var(--nx-space-5);
    border: 1px solid transparent;
    border-radius: var(--nx-radius-full);
    background: var(--nx-accent);
    color: var(--nx-accent-contrast);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    cursor: pointer;
    transition-property: filter, scale;
    transition-duration: var(--nx-dur-fast), var(--nx-spring-snappy-duration);
    transition-timing-function: var(--nx-ease-out), var(--nx-spring-snappy);
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-ripple-surface[data-variant=outline] {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    min-block-size: 2.5rem;
    padding-inline: var(--nx-space-5);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    color: var(--nx-text);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    cursor: pointer;
    transition-property:
      border-color,
      color,
      scale;
    transition-duration:
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-spring-snappy-duration);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-snappy);
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:hover {
      border-color: var(--nx-accent-border);
      color: var(--nx-accent-text);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-ripple-surface[data-variant=plain] {
    color: inherit;
    font: inherit;
    background: none;
    border: none;
    padding: 0;
  }
  .nx-drag-wrap {
    display: grid;
    gap: var(--nx-space-3);
    justify-items: start;
  }
  .nx-drag-board {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: var(--nx-space-5) var(--nx-space-8);
    padding: var(--nx-space-6) var(--nx-space-5);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface-2);
    overflow: clip;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .nx-drag-pad {
    display: grid;
    place-items: center;
    align-content: center;
    gap: var(--nx-space-2);
    min-block-size: 10rem;
    min-inline-size: min(100%, 11rem);
    padding: var(--nx-space-4);
    border: 1.5px dashed color-mix(in oklab, var(--nx-border) 80%, var(--nx-text));
    border-radius: var(--nx-radius-lg);
    transition-property:
      border-color,
      background-color,
      box-shadow;
    transition-duration: var(--nx-dur-fast);
    transition-timing-function: var(--nx-ease-out);
  }
  .nx-drag-label {
    font: 700 var(--nx-text-xs) / 1 var(--nx-font-sans);
    letter-spacing: var(--nx-tracking-wider);
    text-transform: uppercase;
    color: var(--nx-text-muted);
  }
  .nx-drag-note {
    font-size: var(--nx-text-xs);
    color: var(--nx-text-subtle);
  }
  .nx-drag-status {
    margin: 0;
    min-block-size: 1.4em;
    font-size: var(--nx-text-sm);
    color: var(--nx-text-muted);
  }
  .nx-drag-chip {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-3) var(--nx-space-5);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: var(--nx-surface);
    color: var(--nx-text);
    font: 600 var(--nx-text-sm) / 1.2 var(--nx-font-sans);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: var(--nx-shadow-md);
    will-change: translate;
    transition-property: border-color, scale;
    transition-duration: var(--nx-dur-fast), var(--nx-spring-snappy-duration);
    transition-timing-function: var(--nx-ease-out), var(--nx-spring-snappy);
    &:hover {
      border-color: var(--nx-accent-border);
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
  }
  .nx-drag-chip[data-dragging] {
    cursor: grabbing;
    scale: 1.05;
    box-shadow: var(--nx-shadow-lg);
    transition: none;
  }
  .nx-drag-chip[data-locked] {
    scale: 0.97;
    border-color: var(--nx-accent-border);
  }
  .nx-drag-slot {
    &[data-near] {
      border-color: var(--nx-accent);
      box-shadow: 0 0 0 4px var(--nx-accent-soft);
    }
    &[data-held] {
      border-style: solid;
      border-color: var(--nx-accent);
      background: var(--nx-accent-soft);
    }
    &[data-settled] {
      animation: nx-drag-grip 400ms var(--nx-spring-bouncy);
    }
  }
  @keyframes nx-drag-grip {
    40% {
      scale: 1.04;
    }
  }
  .nx-drag-check {
    color: var(--nx-success-text);
    animation: nx-drag-check-pop 350ms var(--nx-spring-bouncy);
    & > .nx-icon,
    &.nx-icon {
      inline-size: 1.7rem;
      block-size: 1.7rem;
      stroke-width: 2.4;
    }
  }
  @keyframes nx-drag-check-pop {
    from {
      scale: 0.25;
      opacity: 0;
    }
  }
  .nx-reaction-bar {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--nx-space-2);
    overflow: clip;
    -webkit-tap-highlight-color: transparent;
  }
  .nx-reaction-btn {
    --_tint: var(--nx-accent);
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: var(--nx-space-2) var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-full);
    background: color-mix(in oklab, var(--nx-surface-2) 62%, var(--nx-surface));
    color: var(--nx-text-muted);
    font: 600 var(--nx-text-sm) / 1 var(--nx-font-sans);
    cursor: pointer;
    transition-property:
      border-color,
      color,
      background-color,
      box-shadow,
      scale;
    transition-duration:
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-dur-fast),
      var(--nx-spring-snappy-duration);
    transition-timing-function:
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-ease-out),
      var(--nx-spring-snappy);
    &:hover {
      border-color: color-mix(in oklab, var(--_tint) 55%, var(--nx-border));
      color: var(--_tint);
    }
    &:active {
      scale: calc(1 - 0.04 * var(--nx-motion));
    }
    &:focus-visible {
      outline: 2px solid var(--nx-ring);
      outline-offset: 2px;
    }
    &[aria-pressed=true] {
      border-color: var(--_tint);
      color: var(--_tint);
      background: color-mix(in oklab, var(--_tint) 12%, var(--nx-surface));
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--_tint) 16%, transparent);
      & .nx-icon {
        animation: nx-reaction-thump 400ms var(--nx-spring-bouncy);
      }
    }
  }
  @keyframes nx-reaction-thump {
    45% {
      scale: 1.35;
    }
  }
  .nx-reaction-count {
    min-inline-size: 2ch;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: var(--nx-text-xs);
  }
  .nx-live-ticker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nx-space-2);
    padding: var(--nx-space-3);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-xl);
    background: var(--nx-surface-2);
  }
  .nx-ticker-cell {
    display: grid;
    gap: var(--nx-space-1);
    align-content: center;
    flex: 1 1 9rem;
    max-inline-size: 100%;
    min-inline-size: min(9rem, 100%);
    padding: var(--nx-space-3) var(--nx-space-4);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-lg);
    background: var(--nx-surface);
    transition-property: border-color;
    transition-duration: var(--nx-dur-base);
    transition-timing-function: var(--nx-ease-out);
  }
  .nx-ticker-cell[data-dir=up] {
    border-color: color-mix(in oklab, var(--nx-success) 38%, var(--nx-border));
  }
  .nx-ticker-cell[data-dir=down] {
    border-color: color-mix(in oklab, var(--nx-danger) 38%, var(--nx-border));
  }
  .nx-ticker-sym {
    display: flex;
    align-items: baseline;
    gap: var(--nx-space-2);
    & b {
      font-size: var(--nx-text-sm);
      font-weight: 700;
      letter-spacing: var(--nx-tracking-wide);
    }
    & span {
      font-size: var(--nx-text-xs);
      color: var(--nx-text-muted);
    }
  }
  .nx-ticker-quote {
    display: inline-flex;
    align-items: baseline;
    gap: var(--nx-space-2);
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
  }
  .nx-ticker-price {
    font-size: var(--nx-text-md);
    font-weight: 700;
  }
  .nx-ticker-chg {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--nx-text-xs);
    font-weight: 700;
    & .nx-icon {
      inline-size: 0.95rem;
      block-size: 0.95rem;
    }
  }
  .nx-ticker-cell[data-dir=up] .nx-ticker-chg {
    color: var(--nx-success-text);
  }
  .nx-ticker-cell[data-dir=down] .nx-ticker-chg {
    color: var(--nx-danger-text);
  }
  @media (prefers-reduced-motion: reduce) {
    .nx-confetti-button,
    .nx-ripple-surface[data-variant=filled],
    .nx-ripple-surface[data-variant=outline],
    .nx-reaction-btn {
      transition-property:
        background-color,
        border-color,
        color,
        box-shadow;
      transition-duration: var(--nx-dur-fast);
    }
    .nx-confetti-button:active,
    .nx-ripple-surface[data-variant=filled]:active,
    .nx-ripple-surface[data-variant=outline]:active,
    .nx-reaction-btn:active {
      scale: 1;
    }
    .nx-confetti-canvas,
    .nx-ripple-ink {
      display: none;
    }
    .nx-confetti-button-icons > * {
      transition-duration: 1ms;
    }
    .nx-drag-pad,
    .nx-drag-chip {
      transition: none;
    }
    .nx-drag-chip[data-dragging] {
      scale: 1;
    }
    .nx-drag-slot[data-settled],
    .nx-drag-check,
    .nx-reaction-btn[aria-pressed=true] .nx-icon {
      animation: none;
    }
  }
}

/* src/css/index.css */