@nadicodeai/design-system 0.10.1 → 0.11.0

package/dist/css/index.css

@@ -1,56 +1,2540 @@
-/*
- * @nadicodeai/design-system/css — bundle entry.
- * Seven explicit, public-named cascade layers (D9). Each partial imports
- * into its own layer so cascade order is data and consumer overrides are
- * predictable. The `components` layer carries the KEPT atom family only.
- *
- * Tailwind+shadcn migration: the generic marketing/SaaS component CSS and ALL
- * section CSS retired in lockstep with their `DESIGN.md` contract entries — they
- * ship as React shadcn components from `@nadicodeai/ui`. The `sections` cascade
- * layer is dropped with them. What stays here is the framework-agnostic core:
- * the structural-geometry foundation (`layout` + `primitives` — kernel grid,
- * single-owner seams, `.nc-marker` corner crosshairs, cell/row grid math, the
- * stage system), the brand display atoms shadcn/Radix has no equivalent for (the
- * 13 agent-chat atoms + the run-state `state-tag` family + the entity-status
- * `status-tag` family + `image`), and the token/motion layers. The brand book
- * and every static surface import this
- * bundle raw — no Tailwind build step runs over `src/css/`, so the geometry is
- * `@layer` CSS, not `@utility` directives a browser would receive un-compiled.
- * The kept-geometry invariant guards stay live (kernel-css-architecture /
- * kernel-rendered-geometry / marker-placement).
- */
-@layer tokens, reset, foundation, motion, layout, primitives, components;
-
-@import url("./tokens.generated.css") layer(tokens);
-@import url("./tokens.local.css") layer(tokens);
-@import url("./reset.css") layer(reset);
-@import url("./foundation.css") layer(foundation);
-@import url("./motion.css") layer(motion);
-@import url("./layout.css") layer(layout);
-@import url("./primitives.css") layer(primitives);
-
-/* Run-state tags (ADR 0007 D3). Agentic run-state, kept as CSS. */
-@import url("./components/state-tag.css") layer(components);
-
-/* Entity-status tags. Record-level status vocabulary, sibling of state-tag. */
-@import url("./components/status-tag.css") layer(components);
-
-/* Agent-chat atoms (M6 / Part B). Conversation surface + role-grammar atoms. */
-@import url("./components/chat-thread.css") layer(components);
-@import url("./components/chat-bubble-user.css") layer(components);
-@import url("./components/chat-bubble-agent.css") layer(components);
-@import url("./components/tool-call-trace.css") layer(components);
-@import url("./components/memory-item.css") layer(components);
-@import url("./components/handoff-banner.css") layer(components);
-@import url("./components/approval-gate.css") layer(components);
-@import url("./components/artifact-preview.css") layer(components);
-@import url("./components/typing-dots.css") layer(components);
-@import url("./components/state-row.css") layer(components);
-@import url("./components/agent-avatar.css") layer(components);
-@import url("./components/usage-meter.css") layer(components);
-@import url("./components/run-timeline.css") layer(components);
-
-/* Editorial media mount. The bounded home for art-directed imagery: media fill
-   + optional tag chip + optional caption, framed or strip form. Self-contained;
-   owns at most its own hairline. */
-@import url("./components/image.css") layer(components);
+@layer tokens, theme, reset, foundation, motion, layout, primitives, components;
+
+/* src/css/tokens.generated.css */
+@layer tokens {
+  :root {
+    --nc-primary: oklch(0.6415 0.1644 153.23);
+    --nc-on-primary: oklch(0.1638 0.0063 91.70);
+    --nc-action: oklch(0.6415 0.1644 153.23);
+    --nc-action-foreground: oklch(0.1638 0.0063 91.70);
+    --nc-action-hover: oklch(0.6104 0.1561 153.32);
+    --nc-action-active: oklch(0.5875 0.1497 153.50);
+    --nc-ink: oklch(0.1638 0.0063 91.70);
+    --nc-body: oklch(0.3558 0.0069 95.25);
+    --nc-muted: oklch(0.5517 0.0109 93.66);
+    --nc-canvas: oklch(1.0000 0.0000 0.00);
+    --nc-canvas-soft: oklch(0.9753 0.0040 106.47);
+    --nc-canvas-soft-2: oklch(0.9505 0.0080 106.55);
+    --nc-line: oklch(0.9233 0.0080 106.56);
+    --nc-input: oklch(0.5523 0.0080 88.68);
+    --nc-seam: oklch(0.8800 0.0108 106.62);
+    --nc-cross: oklch(0.6686 0.0146 97.54);
+    --nc-focus-ring: oklch(0.4815 0.1209 154.24);
+    --nc-scrim: oklch(0.1638 0.0063 91.70);
+    --nc-link: oklch(0.4815 0.1209 154.24);
+    --nc-link-deep: oklch(0.3852 0.0953 154.99);
+    --nc-link-bg-soft: oklch(0.9170 0.0519 161.77);
+    --nc-accent: oklch(0.6824 0.2108 37.70);
+    --nc-info: oklch(0.5005 0.2804 266.17);
+    --nc-info-soft: oklch(0.9457 0.0259 276.40);
+    --nc-info-deep: oklch(0.3197 0.1758 266.79);
+    --nc-success: oklch(0.6415 0.1644 153.23);
+    --nc-error: oklch(0.5688 0.1995 26.59);
+    --nc-error-soft: oklch(0.9522 0.0207 17.52);
+    --nc-error-deep: oklch(0.4235 0.1525 27.08);
+    --nc-warning: oklch(0.8466 0.1678 84.63);
+    --nc-warning-soft: oklch(0.9649 0.0461 90.87);
+    --nc-warning-deep: oklch(0.4834 0.0995 82.44);
+    --nc-flag-red: oklch(0.5688 0.1995 26.59);
+    --nc-selection-bg: oklch(0.1638 0.0063 91.70);
+    --nc-selection-fg: oklch(0.9753 0.0040 106.47);
+    --nc-state-ready: oklch(0.5517 0.0109 93.66);
+    --nc-state-running: oklch(0.5005 0.2804 266.17);
+    --nc-state-review: oklch(0.8466 0.1678 84.63);
+    --nc-state-blocked: oklch(0.5688 0.1995 26.59);
+    --nc-state-complete: oklch(0.6415 0.1644 153.23);
+    --nc-background-100: oklch(1.0000 0.0000 0.00);
+    --nc-background-200: oklch(0.9753 0.0040 106.47);
+    --nc-campo-verde: oklch(0.6415 0.1644 153.23);
+    --nc-campo-rosso: oklch(0.5688 0.1995 26.59);
+    --nc-campo-arancio: oklch(0.6824 0.2108 37.70);
+    --nc-campo-giallo: oklch(0.8466 0.1678 84.63);
+    --nc-campo-cobalto: oklch(0.5005 0.2804 266.17);
+    --nc-campo-inchiostro: oklch(0.1638 0.0063 91.70);
+    --nc-campo-bianco: oklch(1.0000 0.0000 0.00);
+    --nc-chart-1: oklch(0.5005 0.2804 266.17);
+    --nc-chart-2: oklch(0.6415 0.1644 153.23);
+    --nc-chart-3: oklch(0.8466 0.1678 84.63);
+    --nc-chart-4: oklch(0.5688 0.1995 26.59);
+    --nc-chart-5: oklch(0.5571 0.0953 206.08);
+    --nc-chart-6: oklch(0.5015 0.1883 294.99);
+    --nc-chart-seq-1: oklch(0.6998 0.1347 269.48);
+    --nc-chart-seq-2: oklch(0.5724 0.1897 270.11);
+    --nc-chart-seq-3: oklch(0.4725 0.2271 267.41);
+    --nc-chart-seq-4: oklch(0.3989 0.1934 267.50);
+    --nc-chart-seq-5: oklch(0.3270 0.1487 267.91);
+    --nc-chart-div-warm: oklch(0.7592 0.1560 83.30);
+    --nc-chart-div-mid: oklch(0.5517 0.0109 93.66);
+    --nc-chart-div-cool: oklch(0.5923 0.2215 269.61);
+    --nc-dark-canvas: oklch(0.1676 0.0041 106.83);
+    --nc-dark-canvas-soft: oklch(0.2034 0.0058 106.91);
+    --nc-dark-canvas-soft-2: oklch(0.2417 0.0092 107.07);
+    --nc-dark-ink: oklch(0.9600 0.0053 106.50);
+    --nc-dark-body: oklch(0.8350 0.0083 98.90);
+    --nc-dark-muted: oklch(0.6424 0.0134 96.52);
+    --nc-dark-line: oklch(0.2836 0.0071 106.85);
+    --nc-dark-input: oklch(0.5166 0.0078 97.46);
+    --nc-dark-seam: oklch(0.2417 0.0092 107.07);
+    --nc-dark-primary: oklch(0.7727 0.1753 155.96);
+    --nc-dark-on-primary: oklch(0.1676 0.0041 106.83);
+    --nc-dark-action: oklch(0.7727 0.1753 155.96);
+    --nc-dark-action-foreground: oklch(0.1676 0.0041 106.83);
+    --nc-dark-action-hover: oklch(0.7661 0.1498 157.10);
+    --nc-dark-action-active: oklch(0.7019 0.1753 153.20);
+    --nc-dark-link: oklch(0.7661 0.1498 157.10);
+    --nc-dark-link-deep: oklch(0.8524 0.0996 159.83);
+    --nc-dark-link-bg-soft: oklch(0.2893 0.0697 156.32);
+    --nc-dark-focus-ring: oklch(0.7661 0.1498 157.10);
+    --nc-dark-scrim: oklch(0.9600 0.0053 106.50);
+    --nc-dark-error: oklch(0.7955 0.0980 21.02);
+    --nc-dark-error-soft: oklch(0.2296 0.0728 26.06);
+    --nc-dark-error-deep: oklch(0.8856 0.0534 19.64);
+    --nc-dark-warning: oklch(0.8939 0.1387 90.47);
+    --nc-dark-warning-soft: oklch(0.3135 0.0643 85.04);
+    --nc-dark-warning-deep: oklch(0.9320 0.0896 90.86);
+    --nc-dark-info: oklch(0.7067 0.1528 272.08);
+    --nc-dark-info-soft: oklch(0.2118 0.1033 268.28);
+    --nc-dark-info-deep: oklch(0.8222 0.0888 274.44);
+    --nc-dark-cyan: oklch(0.7820 0.1247 190.99);
+    --nc-dark-cyan-soft: oklch(0.8646 0.1000 187.55);
+    --nc-dark-cyan-deep: oklch(0.6347 0.1029 191.54);
+    --nc-dark-success: oklch(0.7019 0.1753 153.20);
+    --nc-dark-state-ready: oklch(0.5517 0.0109 93.66);
+    --nc-dark-state-running: oklch(0.5923 0.2215 269.61);
+    --nc-dark-state-review: oklch(0.8466 0.1678 84.63);
+    --nc-dark-state-blocked: oklch(0.5688 0.1995 26.59);
+    --nc-dark-state-complete: oklch(0.6415 0.1644 153.23);
+    --nc-dark-selection-bg: oklch(0.9600 0.0053 106.50);
+    --nc-dark-selection-fg: oklch(0.1676 0.0041 106.83);
+    --nc-dark-cross: oklch(0.4419 0.0164 93.17);
+    --nc-dark-chart-1: oklch(0.5923 0.2215 269.61);
+    --nc-dark-chart-2: oklch(0.6415 0.1644 153.23);
+    --nc-dark-chart-3: oklch(0.8939 0.1387 90.47);
+    --nc-dark-chart-4: oklch(0.6627 0.1685 23.66);
+    --nc-dark-chart-5: oklch(0.7820 0.1247 190.99);
+    --nc-dark-chart-6: oklch(0.6297 0.1321 299.36);
+    --nc-dark-chart-seq-1: oklch(0.5724 0.1897 270.11);
+    --nc-dark-chart-seq-2: oklch(0.6998 0.1347 269.48);
+    --nc-dark-chart-seq-3: oklch(0.8072 0.0884 269.44);
+    --nc-dark-chart-seq-4: oklch(0.8877 0.0514 270.78);
+    --nc-dark-chart-seq-5: oklch(0.9619 0.0179 272.31);
+    --nc-dark-chart-div-warm: oklch(0.8939 0.1387 90.47);
+    --nc-dark-chart-div-mid: oklch(0.9233 0.0080 106.56);
+    --nc-dark-chart-div-cool: oklch(0.8222 0.0888 274.44);
+    --nc-xxs: 4px;
+    --nc-filter-chip-gap: 6px;
+    --nc-xs: 8px;
+    --nc-sm: 12px;
+    --nc-md: 16px;
+    --nc-lg: 24px;
+    --nc-xl: 32px;
+    --nc-2xl: 40px;
+    --nc-3xl: 48px;
+    --nc-4xl: 64px;
+    --nc-5xl: 96px;
+    --nc-6xl: 128px;
+    --nc-section: 192px;
+    --nc-guide: 1px;
+    --nc-focus-ring-width: 3px;
+    --nc-control-height: 32px;
+    --nc-control-padding-inline: 10px;
+    --nc-touch-target: 44px;
+    --nc-page-pad: 24px;
+    --nc-page-max-mobile: 448px;
+    --nc-page-max-tablet: 624px;
+    --nc-page-max-desktop: 1440px;
+    --nc-frame-max: 1392px;
+    --nc-frame-gap: 24px;
+    --nc-cell-padding: 24px;
+    --nc-section-gap: 48px;
+    --nc-cross-size-mobile: 11px;
+    --nc-cross-size-tablet: 15px;
+    --nc-cross-size-desktop: 21px;
+    --nc-h-strip-mobile: 72px;
+    --nc-h-strip-tablet: 80px;
+    --nc-h-strip-desktop: 88px;
+    --nc-h-cell-sm: 120px;
+    --nc-h-cell-md-mobile: 144px;
+    --nc-h-cell-md-tablet: 160px;
+    --nc-h-cell-md-desktop: 168px;
+    --nc-h-cell-lg-mobile: 220px;
+    --nc-h-cell-lg-desktop: 240px;
+    --nc-h-visual-mobile: 276px;
+    --nc-h-visual-tablet: 318px;
+    --nc-h-visual-desktop: 360px;
+    --nc-h-precision-mobile: 276px;
+    --nc-h-precision-tablet: 480px;
+    --nc-h-precision-desktop: 720px;
+    --nc-h-hero-mobile: 560px;
+    --nc-h-hero-desktop: 720px;
+    --nc-h-action-strip-mobile: 20px;
+    --nc-h-action-strip-desktop: 32px;
+    --nc-h-action-body-mobile: 320px;
+    --nc-h-action-body-tablet: 338px;
+    --nc-h-action-band: 260px;
+    --nc-h-feature-mobile: 360px;
+    --nc-h-feature-tablet: 400px;
+    --nc-h-feature-desktop: 456px;
+    --nc-h-editorial-feature-mobile: 360px;
+    --nc-h-editorial-feature-tablet: 440px;
+    --nc-h-editorial-feature-desktop: 560px;
+    --nc-h-bento-primary: 384px;
+    --nc-h-bento-secondary: 240px;
+    --nc-h-bento-mobile-copy: 248px;
+    --nc-h-bento-mobile-main: 537px;
+    --nc-h-bento-strip: 20px;
+    --nc-filter-chip-height: 28px;
+    --nc-filter-chip-icon: 14px;
+    --nc-rounded-none: 0px;
+    --nc-rounded-xs: 2px;
+    --nc-rounded-sm: 4px;
+    --nc-rounded-md: 6px;
+    --nc-rounded-lg: 8px;
+    --nc-rounded-xl: 10px;
+    --nc-rounded-2xl: 12px;
+    --nc-rounded-3xl: 16px;
+    --nc-rounded-pill-sm: 64px;
+    --nc-rounded-pill: 100px;
+    --nc-rounded-full: 9999px;
+    --nc-type-display-xl-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-display-xl-font-size: 72px;
+    --nc-type-display-xl-font-weight: 600;
+    --nc-type-display-xl-line-height: 74px;
+    --nc-type-display-xl-letter-spacing: -1.5px;
+    --nc-type-display-lg-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-display-lg-font-size: 52px;
+    --nc-type-display-lg-font-weight: 600;
+    --nc-type-display-lg-line-height: 54px;
+    --nc-type-display-lg-letter-spacing: -1px;
+    --nc-type-display-md-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-display-md-font-size: 24px;
+    --nc-type-display-md-font-weight: 600;
+    --nc-type-display-md-line-height: 32px;
+    --nc-type-display-md-letter-spacing: 0px;
+    --nc-type-display-sm-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-display-sm-font-size: 20px;
+    --nc-type-display-sm-font-weight: 600;
+    --nc-type-display-sm-line-height: 28px;
+    --nc-type-display-sm-letter-spacing: 0px;
+    --nc-type-title-lg-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-title-lg-font-size: 40px;
+    --nc-type-title-lg-font-weight: 600;
+    --nc-type-title-lg-line-height: 41px;
+    --nc-type-title-lg-letter-spacing: 0px;
+    --nc-type-title-md-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-title-md-font-size: 30px;
+    --nc-type-title-md-font-weight: 600;
+    --nc-type-title-md-line-height: 32px;
+    --nc-type-title-md-letter-spacing: 0px;
+    --nc-type-title-sm-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-title-sm-font-size: 22px;
+    --nc-type-title-sm-font-weight: 600;
+    --nc-type-title-sm-line-height: 25px;
+    --nc-type-title-sm-letter-spacing: 0px;
+    --nc-type-body-lg-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-body-lg-font-size: 18px;
+    --nc-type-body-lg-font-weight: 400;
+    --nc-type-body-lg-line-height: 27px;
+    --nc-type-body-lg-letter-spacing: 0px;
+    --nc-type-body-md-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-body-md-font-size: 16px;
+    --nc-type-body-md-font-weight: 400;
+    --nc-type-body-md-line-height: 25px;
+    --nc-type-body-md-letter-spacing: 0px;
+    --nc-type-body-md-strong-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-body-md-strong-font-size: 16px;
+    --nc-type-body-md-strong-font-weight: 500;
+    --nc-type-body-md-strong-line-height: 24px;
+    --nc-type-body-md-strong-letter-spacing: 0px;
+    --nc-type-body-sm-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-body-sm-font-size: 14px;
+    --nc-type-body-sm-font-weight: 400;
+    --nc-type-body-sm-line-height: 20px;
+    --nc-type-body-sm-letter-spacing: 0px;
+    --nc-type-body-sm-strong-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-body-sm-strong-font-size: 14px;
+    --nc-type-body-sm-strong-font-weight: 500;
+    --nc-type-body-sm-strong-line-height: 20px;
+    --nc-type-body-sm-strong-letter-spacing: 0px;
+    --nc-type-caption-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-caption-font-size: 12px;
+    --nc-type-caption-font-weight: 400;
+    --nc-type-caption-line-height: 16px;
+    --nc-type-caption-letter-spacing: 0px;
+    --nc-type-caption-strong-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-caption-strong-font-size: 12px;
+    --nc-type-caption-strong-font-weight: 500;
+    --nc-type-caption-strong-line-height: 16px;
+    --nc-type-caption-strong-letter-spacing: 0px;
+    --nc-type-caption-mono-font-family:
+      Geist Mono,
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      monospace;
+    --nc-type-caption-mono-font-size: 12px;
+    --nc-type-caption-mono-font-weight: 500;
+    --nc-type-caption-mono-line-height: 16px;
+    --nc-type-caption-mono-letter-spacing: 0px;
+    --nc-type-code-font-family:
+      Geist Mono,
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      monospace;
+    --nc-type-code-font-size: 13px;
+    --nc-type-code-font-weight: 400;
+    --nc-type-code-line-height: 20px;
+    --nc-type-code-letter-spacing: 0px;
+    --nc-type-button-md-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-button-md-font-size: 14px;
+    --nc-type-button-md-font-weight: 500;
+    --nc-type-button-md-line-height: 18px;
+    --nc-type-button-md-letter-spacing: 0px;
+    --nc-type-button-lg-font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    --nc-type-button-lg-font-size: 16px;
+    --nc-type-button-lg-font-weight: 500;
+    --nc-type-button-lg-line-height: 24px;
+    --nc-type-button-lg-letter-spacing: 0px;
+    --nc-material-scrim-opacity: 10%;
+    --nc-material-shadow-tooltip: 0 1px 1px rgb(0 0 0 / 2%), 0 4px 8px rgb(0 0 0 / 4%);
+    --nc-material-shadow-menu:
+      0 1px 1px rgb(0 0 0 / 2%),
+      0 4px 8px -4px rgb(0 0 0 / 4%),
+      0 16px 24px -8px rgb(0 0 0 / 6%);
+    --nc-material-shadow-dialog:
+      0 1px 1px rgb(0 0 0 / 2%),
+      0 8px 16px -4px rgb(0 0 0 / 4%),
+      0 24px 32px -8px rgb(0 0 0 / 6%);
+    --nc-material-shadow-sheet: 0 2px 2px rgb(0 0 0 / 4%), 0 8px 16px -4px rgb(0 0 0 / 4%);
+  }
+}
+
+/* src/css/modes.generated.css */
+@layer theme {
+  .dark {
+    --nc-canvas: var(--nc-dark-canvas);
+    --nc-canvas-soft: var(--nc-dark-canvas-soft);
+    --nc-canvas-soft-2: var(--nc-dark-canvas-soft-2);
+    --nc-ink: var(--nc-dark-ink);
+    --nc-body: var(--nc-dark-body);
+    --nc-muted: var(--nc-dark-muted);
+    --nc-line: var(--nc-dark-line);
+    --nc-input: var(--nc-dark-input);
+    --nc-seam: var(--nc-dark-seam);
+    --nc-primary: var(--nc-dark-primary);
+    --nc-on-primary: var(--nc-dark-on-primary);
+    --nc-action: var(--nc-dark-action);
+    --nc-action-foreground: var(--nc-dark-action-foreground);
+    --nc-action-hover: var(--nc-dark-action-hover);
+    --nc-action-active: var(--nc-dark-action-active);
+    --nc-link: var(--nc-dark-link);
+    --nc-link-deep: var(--nc-dark-link-deep);
+    --nc-link-bg-soft: var(--nc-dark-link-bg-soft);
+    --nc-focus-ring: var(--nc-dark-focus-ring);
+    --nc-scrim: var(--nc-dark-scrim);
+    --nc-error: var(--nc-dark-error);
+    --nc-error-soft: var(--nc-dark-error-soft);
+    --nc-error-deep: var(--nc-dark-error-deep);
+    --nc-warning: var(--nc-dark-warning);
+    --nc-warning-soft: var(--nc-dark-warning-soft);
+    --nc-warning-deep: var(--nc-dark-warning-deep);
+    --nc-info: var(--nc-dark-info);
+    --nc-info-soft: var(--nc-dark-info-soft);
+    --nc-info-deep: var(--nc-dark-info-deep);
+    --nc-success: var(--nc-dark-success);
+    --nc-state-ready: var(--nc-dark-state-ready);
+    --nc-state-running: var(--nc-dark-state-running);
+    --nc-state-review: var(--nc-dark-state-review);
+    --nc-state-blocked: var(--nc-dark-state-blocked);
+    --nc-state-complete: var(--nc-dark-state-complete);
+    --nc-selection-bg: var(--nc-dark-selection-bg);
+    --nc-selection-fg: var(--nc-dark-selection-fg);
+    --nc-cross: var(--nc-dark-cross);
+    --nc-chart-1: var(--nc-dark-chart-1);
+    --nc-chart-2: var(--nc-dark-chart-2);
+    --nc-chart-3: var(--nc-dark-chart-3);
+    --nc-chart-4: var(--nc-dark-chart-4);
+    --nc-chart-5: var(--nc-dark-chart-5);
+    --nc-chart-6: var(--nc-dark-chart-6);
+    --nc-chart-seq-1: var(--nc-dark-chart-seq-1);
+    --nc-chart-seq-2: var(--nc-dark-chart-seq-2);
+    --nc-chart-seq-3: var(--nc-dark-chart-seq-3);
+    --nc-chart-seq-4: var(--nc-dark-chart-seq-4);
+    --nc-chart-seq-5: var(--nc-dark-chart-seq-5);
+    --nc-chart-div-warm: var(--nc-dark-chart-div-warm);
+    --nc-chart-div-mid: var(--nc-dark-chart-div-mid);
+    --nc-chart-div-cool: var(--nc-dark-chart-div-cool);
+  }
+}
+
+/* src/css/theme.generated.css */
+@layer theme {
+  :root {
+    --radius: var(--nc-rounded-md);
+    --background: var(--nc-canvas);
+    --foreground: var(--nc-ink);
+    --card: var(--nc-canvas);
+    --card-foreground: var(--nc-ink);
+    --popover: var(--nc-canvas);
+    --popover-foreground: var(--nc-ink);
+    --primary: var(--nc-action);
+    --primary-foreground: var(--nc-action-foreground);
+    --primary-hover: var(--nc-action-hover);
+    --primary-active: var(--nc-action-active);
+    --secondary: var(--nc-canvas-soft);
+    --secondary-foreground: var(--nc-ink);
+    --muted: var(--nc-canvas-soft);
+    --muted-foreground: var(--nc-body);
+    --placeholder: var(--nc-muted);
+    --accent: var(--nc-canvas-soft-2);
+    --accent-foreground: var(--nc-ink);
+    --destructive: var(--nc-error);
+    --destructive-foreground: var(--nc-campo-bianco);
+    --warning: var(--nc-warning);
+    --warning-foreground: var(--nc-ink);
+    --success: var(--nc-success);
+    --success-foreground: var(--nc-ink);
+    --border: var(--nc-line);
+    --input: var(--nc-input);
+    --ring: var(--nc-focus-ring);
+    --scrim: var(--nc-scrim);
+    --chart-1: var(--nc-chart-1);
+    --chart-2: var(--nc-chart-2);
+    --chart-3: var(--nc-chart-3);
+    --chart-4: var(--nc-chart-4);
+    --chart-5: var(--nc-chart-5);
+    --sidebar: var(--nc-canvas-soft);
+    --sidebar-foreground: var(--nc-ink);
+    --sidebar-primary: var(--nc-ink);
+    --sidebar-primary-foreground: var(--nc-campo-bianco);
+    --sidebar-accent: var(--nc-canvas-soft-2);
+    --sidebar-accent-foreground: var(--nc-ink);
+    --sidebar-border: var(--nc-line);
+    --sidebar-ring: var(--nc-focus-ring);
+  }
+  .dark {
+    --radius: var(--nc-rounded-md);
+    --background: var(--nc-dark-canvas);
+    --foreground: var(--nc-dark-ink);
+    --card: var(--nc-dark-canvas);
+    --card-foreground: var(--nc-dark-ink);
+    --popover: var(--nc-dark-canvas);
+    --popover-foreground: var(--nc-dark-ink);
+    --primary: var(--nc-dark-action);
+    --primary-foreground: var(--nc-dark-action-foreground);
+    --primary-hover: var(--nc-dark-action-hover);
+    --primary-active: var(--nc-dark-action-active);
+    --secondary: var(--nc-dark-canvas-soft);
+    --secondary-foreground: var(--nc-dark-ink);
+    --muted: var(--nc-dark-canvas-soft);
+    --muted-foreground: var(--nc-dark-body);
+    --placeholder: var(--nc-dark-muted);
+    --accent: var(--nc-dark-canvas-soft-2);
+    --accent-foreground: var(--nc-dark-ink);
+    --destructive: var(--nc-dark-error);
+    --destructive-foreground: var(--nc-dark-on-primary);
+    --warning: var(--nc-dark-warning);
+    --warning-foreground: var(--nc-dark-on-primary);
+    --success: var(--nc-dark-success);
+    --success-foreground: var(--nc-dark-on-primary);
+    --border: var(--nc-dark-line);
+    --input: var(--nc-dark-input);
+    --ring: var(--nc-dark-focus-ring);
+    --scrim: var(--nc-dark-scrim);
+    --chart-1: var(--nc-dark-chart-1);
+    --chart-2: var(--nc-dark-chart-2);
+    --chart-3: var(--nc-dark-chart-3);
+    --chart-4: var(--nc-dark-chart-4);
+    --chart-5: var(--nc-dark-chart-5);
+    --sidebar: var(--nc-dark-canvas);
+    --sidebar-foreground: var(--nc-dark-ink);
+    --sidebar-primary: var(--nc-dark-ink);
+    --sidebar-primary-foreground: var(--nc-dark-on-primary);
+    --sidebar-accent: var(--nc-dark-canvas-soft-2);
+    --sidebar-accent-foreground: var(--nc-dark-ink);
+    --sidebar-border: var(--nc-dark-line);
+    --sidebar-ring: var(--nc-dark-focus-ring);
+  }
+  @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-primary-hover: var(--primary-hover); --color-primary-active: var(--primary-active); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-placeholder: var(--placeholder); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-scrim: var(--scrim); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); }
+  @theme { --color-nc-primary: oklch(0.6415 0.1644 153.23); --color-nc-on-primary: oklch(0.1638 0.0063 91.70); --color-nc-action: oklch(0.6415 0.1644 153.23); --color-nc-action-foreground: oklch(0.1638 0.0063 91.70); --color-nc-action-hover: oklch(0.6104 0.1561 153.32); --color-nc-action-active: oklch(0.5875 0.1497 153.50); --color-nc-ink: oklch(0.1638 0.0063 91.70); --color-nc-body: oklch(0.3558 0.0069 95.25); --color-nc-muted: oklch(0.5517 0.0109 93.66); --color-nc-canvas: oklch(1.0000 0.0000 0.00); --color-nc-canvas-soft: oklch(0.9753 0.0040 106.47); --color-nc-canvas-soft-2: oklch(0.9505 0.0080 106.55); --color-nc-line: oklch(0.9233 0.0080 106.56); --color-nc-input: oklch(0.5523 0.0080 88.68); --color-nc-seam: oklch(0.8800 0.0108 106.62); --color-nc-cross: oklch(0.6686 0.0146 97.54); --color-nc-focus-ring: oklch(0.4815 0.1209 154.24); --color-nc-scrim: oklch(0.1638 0.0063 91.70); --color-nc-link: oklch(0.4815 0.1209 154.24); --color-nc-link-deep: oklch(0.3852 0.0953 154.99); --color-nc-link-bg-soft: oklch(0.9170 0.0519 161.77); --color-nc-accent: oklch(0.6824 0.2108 37.70); --color-nc-info: oklch(0.5005 0.2804 266.17); --color-nc-info-soft: oklch(0.9457 0.0259 276.40); --color-nc-info-deep: oklch(0.3197 0.1758 266.79); --color-nc-success: oklch(0.6415 0.1644 153.23); --color-nc-error: oklch(0.5688 0.1995 26.59); --color-nc-error-soft: oklch(0.9522 0.0207 17.52); --color-nc-error-deep: oklch(0.4235 0.1525 27.08); --color-nc-warning: oklch(0.8466 0.1678 84.63); --color-nc-warning-soft: oklch(0.9649 0.0461 90.87); --color-nc-warning-deep: oklch(0.4834 0.0995 82.44); --color-nc-flag-red: oklch(0.5688 0.1995 26.59); --color-nc-selection-bg: oklch(0.1638 0.0063 91.70); --color-nc-selection-fg: oklch(0.9753 0.0040 106.47); --color-nc-state-ready: oklch(0.5517 0.0109 93.66); --color-nc-state-running: oklch(0.5005 0.2804 266.17); --color-nc-state-review: oklch(0.8466 0.1678 84.63); --color-nc-state-blocked: oklch(0.5688 0.1995 26.59); --color-nc-state-complete: oklch(0.6415 0.1644 153.23); --color-nc-background-100: oklch(1.0000 0.0000 0.00); --color-nc-background-200: oklch(0.9753 0.0040 106.47); --color-nc-campo-verde: oklch(0.6415 0.1644 153.23); --color-nc-campo-rosso: oklch(0.5688 0.1995 26.59); --color-nc-campo-arancio: oklch(0.6824 0.2108 37.70); --color-nc-campo-giallo: oklch(0.8466 0.1678 84.63); --color-nc-campo-cobalto: oklch(0.5005 0.2804 266.17); --color-nc-campo-inchiostro: oklch(0.1638 0.0063 91.70); --color-nc-campo-bianco: oklch(1.0000 0.0000 0.00); --color-nc-chart-1: oklch(0.5005 0.2804 266.17); --color-nc-chart-2: oklch(0.6415 0.1644 153.23); --color-nc-chart-3: oklch(0.8466 0.1678 84.63); --color-nc-chart-4: oklch(0.5688 0.1995 26.59); --color-nc-chart-5: oklch(0.5571 0.0953 206.08); --color-nc-chart-6: oklch(0.5015 0.1883 294.99); --color-nc-chart-seq-1: oklch(0.6998 0.1347 269.48); --color-nc-chart-seq-2: oklch(0.5724 0.1897 270.11); --color-nc-chart-seq-3: oklch(0.4725 0.2271 267.41); --color-nc-chart-seq-4: oklch(0.3989 0.1934 267.50); --color-nc-chart-seq-5: oklch(0.3270 0.1487 267.91); --color-nc-chart-div-warm: oklch(0.7592 0.1560 83.30); --color-nc-chart-div-mid: oklch(0.5517 0.0109 93.66); --color-nc-chart-div-cool: oklch(0.5923 0.2215 269.61); --color-nc-dark-canvas: oklch(0.1676 0.0041 106.83); --color-nc-dark-canvas-soft: oklch(0.2034 0.0058 106.91); --color-nc-dark-canvas-soft-2: oklch(0.2417 0.0092 107.07); --color-nc-dark-ink: oklch(0.9600 0.0053 106.50); --color-nc-dark-body: oklch(0.8350 0.0083 98.90); --color-nc-dark-muted: oklch(0.6424 0.0134 96.52); --color-nc-dark-line: oklch(0.2836 0.0071 106.85); --color-nc-dark-input: oklch(0.5166 0.0078 97.46); --color-nc-dark-seam: oklch(0.2417 0.0092 107.07); --color-nc-dark-primary: oklch(0.7727 0.1753 155.96); --color-nc-dark-on-primary: oklch(0.1676 0.0041 106.83); --color-nc-dark-action: oklch(0.7727 0.1753 155.96); --color-nc-dark-action-foreground: oklch(0.1676 0.0041 106.83); --color-nc-dark-action-hover: oklch(0.7661 0.1498 157.10); --color-nc-dark-action-active: oklch(0.7019 0.1753 153.20); --color-nc-dark-link: oklch(0.7661 0.1498 157.10); --color-nc-dark-link-deep: oklch(0.8524 0.0996 159.83); --color-nc-dark-link-bg-soft: oklch(0.2893 0.0697 156.32); --color-nc-dark-focus-ring: oklch(0.7661 0.1498 157.10); --color-nc-dark-scrim: oklch(0.9600 0.0053 106.50); --color-nc-dark-error: oklch(0.7955 0.0980 21.02); --color-nc-dark-error-soft: oklch(0.2296 0.0728 26.06); --color-nc-dark-error-deep: oklch(0.8856 0.0534 19.64); --color-nc-dark-warning: oklch(0.8939 0.1387 90.47); --color-nc-dark-warning-soft: oklch(0.3135 0.0643 85.04); --color-nc-dark-warning-deep: oklch(0.9320 0.0896 90.86); --color-nc-dark-info: oklch(0.7067 0.1528 272.08); --color-nc-dark-info-soft: oklch(0.2118 0.1033 268.28); --color-nc-dark-info-deep: oklch(0.8222 0.0888 274.44); --color-nc-dark-cyan: oklch(0.7820 0.1247 190.99); --color-nc-dark-cyan-soft: oklch(0.8646 0.1000 187.55); --color-nc-dark-cyan-deep: oklch(0.6347 0.1029 191.54); --color-nc-dark-success: oklch(0.7019 0.1753 153.20); --color-nc-dark-state-ready: oklch(0.5517 0.0109 93.66); --color-nc-dark-state-running: oklch(0.5923 0.2215 269.61); --color-nc-dark-state-review: oklch(0.8466 0.1678 84.63); --color-nc-dark-state-blocked: oklch(0.5688 0.1995 26.59); --color-nc-dark-state-complete: oklch(0.6415 0.1644 153.23); --color-nc-dark-selection-bg: oklch(0.9600 0.0053 106.50); --color-nc-dark-selection-fg: oklch(0.1676 0.0041 106.83); --color-nc-dark-cross: oklch(0.4419 0.0164 93.17); --color-nc-dark-chart-1: oklch(0.5923 0.2215 269.61); --color-nc-dark-chart-2: oklch(0.6415 0.1644 153.23); --color-nc-dark-chart-3: oklch(0.8939 0.1387 90.47); --color-nc-dark-chart-4: oklch(0.6627 0.1685 23.66); --color-nc-dark-chart-5: oklch(0.7820 0.1247 190.99); --color-nc-dark-chart-6: oklch(0.6297 0.1321 299.36); --color-nc-dark-chart-seq-1: oklch(0.5724 0.1897 270.11); --color-nc-dark-chart-seq-2: oklch(0.6998 0.1347 269.48); --color-nc-dark-chart-seq-3: oklch(0.8072 0.0884 269.44); --color-nc-dark-chart-seq-4: oklch(0.8877 0.0514 270.78); --color-nc-dark-chart-seq-5: oklch(0.9619 0.0179 272.31); --color-nc-dark-chart-div-warm: oklch(0.8939 0.1387 90.47); --color-nc-dark-chart-div-mid: oklch(0.9233 0.0080 106.56); --color-nc-dark-chart-div-cool: oklch(0.8222 0.0888 274.44); --font-display-xl: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-display-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-title-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-title-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-title-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-md-strong: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-body-sm-strong: Geist, Inter, system-ui, -apple-system, sans-serif; --font-caption: Geist, Inter, system-ui, -apple-system, sans-serif; --font-caption-strong: Geist, Inter, system-ui, -apple-system, sans-serif; --font-caption-mono: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --font-code: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --font-button-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-button-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --text-display-xl: 72px; --text-display-xl--line-height: 74px; --leading-display-xl: 74px; --text-display-xl--letter-spacing: -1.5px; --tracking-display-xl: -1.5px; --text-display-xl--font-weight: 600; --font-weight-display-xl: 600; --text-display-lg: 52px; --text-display-lg--line-height: 54px; --leading-display-lg: 54px; --text-display-lg--letter-spacing: -1px; --tracking-display-lg: -1px; --text-display-lg--font-weight: 600; --font-weight-display-lg: 600; --text-display-md: 24px; --text-display-md--line-height: 32px; --leading-display-md: 32px; --text-display-md--letter-spacing: 0px; --tracking-display-md: 0px; --text-display-md--font-weight: 600; --font-weight-display-md: 600; --text-display-sm: 20px; --text-display-sm--line-height: 28px; --leading-display-sm: 28px; --text-display-sm--letter-spacing: 0px; --tracking-display-sm: 0px; --text-display-sm--font-weight: 600; --font-weight-display-sm: 600; --text-title-lg: 40px; --text-title-lg--line-height: 41px; --leading-title-lg: 41px; --text-title-lg--letter-spacing: 0px; --tracking-title-lg: 0px; --text-title-lg--font-weight: 600; --font-weight-title-lg: 600; --text-title-md: 30px; --text-title-md--line-height: 32px; --leading-title-md: 32px; --text-title-md--letter-spacing: 0px; --tracking-title-md: 0px; --text-title-md--font-weight: 600; --font-weight-title-md: 600; --text-title-sm: 22px; --text-title-sm--line-height: 25px; --leading-title-sm: 25px; --text-title-sm--letter-spacing: 0px; --tracking-title-sm: 0px; --text-title-sm--font-weight: 600; --font-weight-title-sm: 600; --text-body-lg: 18px; --text-body-lg--line-height: 27px; --leading-body-lg: 27px; --text-body-lg--letter-spacing: 0px; --tracking-body-lg: 0px; --text-body-lg--font-weight: 400; --font-weight-body-lg: 400; --text-body-md: 16px; --text-body-md--line-height: 25px; --leading-body-md: 25px; --text-body-md--letter-spacing: 0px; --tracking-body-md: 0px; --text-body-md--font-weight: 400; --font-weight-body-md: 400; --text-body-md-strong: 16px; --text-body-md-strong--line-height: 24px; --leading-body-md-strong: 24px; --text-body-md-strong--letter-spacing: 0px; --tracking-body-md-strong: 0px; --text-body-md-strong--font-weight: 500; --font-weight-body-md-strong: 500; --text-body-sm: 14px; --text-body-sm--line-height: 20px; --leading-body-sm: 20px; --text-body-sm--letter-spacing: 0px; --tracking-body-sm: 0px; --text-body-sm--font-weight: 400; --font-weight-body-sm: 400; --text-body-sm-strong: 14px; --text-body-sm-strong--line-height: 20px; --leading-body-sm-strong: 20px; --text-body-sm-strong--letter-spacing: 0px; --tracking-body-sm-strong: 0px; --text-body-sm-strong--font-weight: 500; --font-weight-body-sm-strong: 500; --text-caption: 12px; --text-caption--line-height: 16px; --leading-caption: 16px; --text-caption--letter-spacing: 0px; --tracking-caption: 0px; --text-caption--font-weight: 400; --font-weight-caption: 400; --text-caption-strong: 12px; --text-caption-strong--line-height: 16px; --leading-caption-strong: 16px; --text-caption-strong--letter-spacing: 0px; --tracking-caption-strong: 0px; --text-caption-strong--font-weight: 500; --font-weight-caption-strong: 500; --text-caption-mono: 12px; --text-caption-mono--line-height: 16px; --leading-caption-mono: 16px; --text-caption-mono--letter-spacing: 0px; --tracking-caption-mono: 0px; --text-caption-mono--font-weight: 500; --font-weight-caption-mono: 500; --text-code: 13px; --text-code--line-height: 20px; --leading-code: 20px; --text-code--letter-spacing: 0px; --tracking-code: 0px; --text-code--font-weight: 400; --font-weight-code: 400; --text-button-md: 14px; --text-button-md--line-height: 18px; --leading-button-md: 18px; --text-button-md--letter-spacing: 0px; --tracking-button-md: 0px; --text-button-md--font-weight: 500; --font-weight-button-md: 500; --text-button-lg: 16px; --text-button-lg--line-height: 24px; --leading-button-lg: 24px; --text-button-lg--letter-spacing: 0px; --tracking-button-lg: 0px; --text-button-lg--font-weight: 500; --font-weight-button-lg: 500; --radius-none: 0px; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-2xl: 12px; --radius-3xl: 16px; --radius-pill-sm: 64px; --radius-pill: 100px; --radius-full: 9999px; --ring-width-focus: var(--spacing-nadicode-focus-ring-width); --opacity-scrim: var(--nc-material-scrim-opacity); --shadow-tooltip: var(--nc-material-shadow-tooltip); --shadow-menu: var(--nc-material-shadow-menu); --shadow-dialog: var(--nc-material-shadow-dialog); --shadow-sheet: var(--nc-material-shadow-sheet); --spacing-nadicode-xxs: 4px; --spacing-nadicode-filter-chip-gap: 6px; --spacing-nadicode-xs: 8px; --spacing-nadicode-sm: 12px; --spacing-nadicode-md: 16px; --spacing-nadicode-lg: 24px; --spacing-nadicode-xl: 32px; --spacing-nadicode-2xl: 40px; --spacing-nadicode-3xl: 48px; --spacing-nadicode-4xl: 64px; --spacing-nadicode-5xl: 96px; --spacing-nadicode-6xl: 128px; --spacing-nadicode-section: 192px; --spacing-nadicode-guide: 1px; --spacing-nadicode-focus-ring-width: 3px; --spacing-nadicode-control-height: 32px; --spacing-nadicode-control-padding-inline: 10px; --spacing-nadicode-touch-target: 44px; --spacing-nadicode-page-pad: 24px; --spacing-nadicode-page-max-mobile: 448px; --spacing-nadicode-page-max-tablet: 624px; --spacing-nadicode-page-max-desktop: 1440px; --spacing-nadicode-frame-max: 1392px; --spacing-nadicode-frame-gap: 24px; --spacing-nadicode-cell-padding: 24px; --spacing-nadicode-section-gap: 48px; --spacing-nadicode-cross-size-mobile: 11px; --spacing-nadicode-cross-size-tablet: 15px; --spacing-nadicode-cross-size-desktop: 21px; --spacing-nadicode-h-strip-mobile: 72px; --spacing-nadicode-h-strip-tablet: 80px; --spacing-nadicode-h-strip-desktop: 88px; --spacing-nadicode-h-cell-sm: 120px; --spacing-nadicode-h-cell-md-mobile: 144px; --spacing-nadicode-h-cell-md-tablet: 160px; --spacing-nadicode-h-cell-md-desktop: 168px; --spacing-nadicode-h-cell-lg-mobile: 220px; --spacing-nadicode-h-cell-lg-desktop: 240px; --spacing-nadicode-h-visual-mobile: 276px; --spacing-nadicode-h-visual-tablet: 318px; --spacing-nadicode-h-visual-desktop: 360px; --spacing-nadicode-h-precision-mobile: 276px; --spacing-nadicode-h-precision-tablet: 480px; --spacing-nadicode-h-precision-desktop: 720px; --spacing-nadicode-h-hero-mobile: 560px; --spacing-nadicode-h-hero-desktop: 720px; --spacing-nadicode-h-action-strip-mobile: 20px; --spacing-nadicode-h-action-strip-desktop: 32px; --spacing-nadicode-h-action-body-mobile: 320px; --spacing-nadicode-h-action-body-tablet: 338px; --spacing-nadicode-h-action-band: 260px; --spacing-nadicode-h-feature-mobile: 360px; --spacing-nadicode-h-feature-tablet: 400px; --spacing-nadicode-h-feature-desktop: 456px; --spacing-nadicode-h-editorial-feature-mobile: 360px; --spacing-nadicode-h-editorial-feature-tablet: 440px; --spacing-nadicode-h-editorial-feature-desktop: 560px; --spacing-nadicode-h-bento-primary: 384px; --spacing-nadicode-h-bento-secondary: 240px; --spacing-nadicode-h-bento-mobile-copy: 248px; --spacing-nadicode-h-bento-mobile-main: 537px; --spacing-nadicode-h-bento-strip: 20px; --spacing-nadicode-filter-chip-height: 28px; --spacing-nadicode-filter-chip-icon: 14px; --spacing-control-height: var(--spacing-nadicode-control-height); --spacing-control-padding-inline: var(--spacing-nadicode-control-padding-inline); --spacing-touch-target: var(--spacing-nadicode-touch-target); }
+}
+
+/* src/css/reset.css */
+@layer reset {
+  * {
+    box-sizing: border-box;
+  }
+  html {
+    min-width: 320px;
+    overflow-x: clip;
+    text-rendering: optimizeLegibility;
+  }
+  body {
+    margin: 0;
+    overflow-x: clip;
+  }
+  h1,
+  h2,
+  h3,
+  p {
+    margin: 0;
+  }
+}
+
+/* src/css/foundation.css */
+@layer foundation {
+  body {
+    font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+  }
+  .nc-page {
+    width: 100%;
+    max-width: var(--nc-page-max);
+    margin-inline: auto;
+    padding-inline: var(--nc-page-pad);
+  }
+  .nc-frame {
+    width: 100%;
+    max-width: var(--nc-frame-max);
+    margin-inline: auto;
+  }
+  .nc-type-display-xl {
+    font-family: var(--nc-type-display-xl-font-family);
+    font-size: var(--nc-type-display-xl-font-size);
+    font-weight: var(--nc-type-display-xl-font-weight);
+    line-height: var(--nc-type-display-xl-line-height);
+    letter-spacing: var(--nc-type-display-xl-letter-spacing);
+  }
+  .nc-type-display-lg {
+    font-family: var(--nc-type-display-lg-font-family);
+    font-size: var(--nc-type-display-lg-font-size);
+    font-weight: var(--nc-type-display-lg-font-weight);
+    line-height: var(--nc-type-display-lg-line-height);
+    letter-spacing: var(--nc-type-display-lg-letter-spacing);
+  }
+  .nc-type-display-md {
+    font-family: var(--nc-type-display-md-font-family);
+    font-size: var(--nc-type-display-md-font-size);
+    font-weight: var(--nc-type-display-md-font-weight);
+    line-height: var(--nc-type-display-md-line-height);
+    letter-spacing: var(--nc-type-display-md-letter-spacing);
+  }
+  .nc-type-display-sm {
+    font-family: var(--nc-type-display-sm-font-family);
+    font-size: var(--nc-type-display-sm-font-size);
+    font-weight: var(--nc-type-display-sm-font-weight);
+    line-height: var(--nc-type-display-sm-line-height);
+    letter-spacing: var(--nc-type-display-sm-letter-spacing);
+  }
+  .nc-type-title-lg {
+    font-family: var(--nc-type-title-lg-font-family);
+    font-size: var(--nc-type-title-lg-font-size);
+    font-weight: var(--nc-type-title-lg-font-weight);
+    line-height: var(--nc-type-title-lg-line-height);
+    letter-spacing: var(--nc-type-title-lg-letter-spacing);
+  }
+  .nc-type-title-md {
+    font-family: var(--nc-type-title-md-font-family);
+    font-size: var(--nc-type-title-md-font-size);
+    font-weight: var(--nc-type-title-md-font-weight);
+    line-height: var(--nc-type-title-md-line-height);
+    letter-spacing: var(--nc-type-title-md-letter-spacing);
+  }
+  .nc-type-title-sm {
+    font-family: var(--nc-type-title-sm-font-family);
+    font-size: var(--nc-type-title-sm-font-size);
+    font-weight: var(--nc-type-title-sm-font-weight);
+    line-height: var(--nc-type-title-sm-line-height);
+    letter-spacing: var(--nc-type-title-sm-letter-spacing);
+  }
+  .nc-type-body-lg {
+    font-family: var(--nc-type-body-lg-font-family);
+    font-size: var(--nc-type-body-lg-font-size);
+    font-weight: var(--nc-type-body-lg-font-weight);
+    line-height: var(--nc-type-body-lg-line-height);
+    letter-spacing: var(--nc-type-body-lg-letter-spacing);
+  }
+  .nc-type-body-md {
+    font-family: var(--nc-type-body-md-font-family);
+    font-size: var(--nc-type-body-md-font-size);
+    font-weight: var(--nc-type-body-md-font-weight);
+    line-height: var(--nc-type-body-md-line-height);
+    letter-spacing: var(--nc-type-body-md-letter-spacing);
+  }
+  .nc-type-body-md-strong {
+    font-family: var(--nc-type-body-md-strong-font-family);
+    font-size: var(--nc-type-body-md-strong-font-size);
+    font-weight: var(--nc-type-body-md-strong-font-weight);
+    line-height: var(--nc-type-body-md-strong-line-height);
+    letter-spacing: var(--nc-type-body-md-strong-letter-spacing);
+  }
+  .nc-type-body-sm {
+    font-family: var(--nc-type-body-sm-font-family);
+    font-size: var(--nc-type-body-sm-font-size);
+    font-weight: var(--nc-type-body-sm-font-weight);
+    line-height: var(--nc-type-body-sm-line-height);
+    letter-spacing: var(--nc-type-body-sm-letter-spacing);
+  }
+  .nc-type-body-sm-strong {
+    font-family: var(--nc-type-body-sm-strong-font-family);
+    font-size: var(--nc-type-body-sm-strong-font-size);
+    font-weight: var(--nc-type-body-sm-strong-font-weight);
+    line-height: var(--nc-type-body-sm-strong-line-height);
+    letter-spacing: var(--nc-type-body-sm-strong-letter-spacing);
+  }
+  .nc-type-caption {
+    font-family: var(--nc-type-caption-font-family);
+    font-size: var(--nc-type-caption-font-size);
+    font-weight: var(--nc-type-caption-font-weight);
+    line-height: var(--nc-type-caption-line-height);
+    letter-spacing: var(--nc-type-caption-letter-spacing);
+  }
+  .nc-type-caption-strong {
+    font-family: var(--nc-type-caption-strong-font-family);
+    font-size: var(--nc-type-caption-strong-font-size);
+    font-weight: var(--nc-type-caption-strong-font-weight);
+    line-height: var(--nc-type-caption-strong-line-height);
+    letter-spacing: var(--nc-type-caption-strong-letter-spacing);
+  }
+  .nc-type-caption-mono {
+    font-family: var(--nc-type-caption-mono-font-family);
+    font-size: var(--nc-type-caption-mono-font-size);
+    font-weight: var(--nc-type-caption-mono-font-weight);
+    line-height: var(--nc-type-caption-mono-line-height);
+    letter-spacing: var(--nc-type-caption-mono-letter-spacing);
+  }
+  .nc-type-code {
+    font-family: var(--nc-type-code-font-family);
+    font-size: var(--nc-type-code-font-size);
+    font-weight: var(--nc-type-code-font-weight);
+    line-height: var(--nc-type-code-line-height);
+    letter-spacing: var(--nc-type-code-letter-spacing);
+  }
+  .nc-type-button-md {
+    font-family: var(--nc-type-button-md-font-family);
+    font-size: var(--nc-type-button-md-font-size);
+    font-weight: var(--nc-type-button-md-font-weight);
+    line-height: var(--nc-type-button-md-line-height);
+    letter-spacing: var(--nc-type-button-md-letter-spacing);
+  }
+  .nc-type-button-lg {
+    font-family: var(--nc-type-button-lg-font-family);
+    font-size: var(--nc-type-button-lg-font-size);
+    font-weight: var(--nc-type-button-lg-font-weight);
+    line-height: var(--nc-type-button-lg-line-height);
+    letter-spacing: var(--nc-type-button-lg-letter-spacing);
+  }
+}
+
+/* src/css/motion.css */
+@layer motion {
+  :root {
+    --nc-duration-stagger: 160ms;
+    --nc-duration-msg-in: 360ms;
+    --nc-duration-transition: 360ms;
+    --nc-duration-typing: 1s;
+    --nc-duration-pulse: 1.6s;
+    --nc-duration-confirm: 180ms;
+    --nc-duration-open: 220ms;
+    --nc-duration-close: 140ms;
+    --nc-ease-emphasized: cubic-bezier(0.3, 0.7, 0.2, 1);
+    --nc-ease-bounce: ease-in-out;
+    --nc-ease-out: ease-out;
+    --nc-ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
+  }
+  @keyframes nc-msg-in {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes nc-typing {
+    0%, 80%, 100% {
+      opacity: 0.25;
+      transform: translateY(0);
+    }
+    40% {
+      opacity: 1;
+      transform: translateY(-2px);
+    }
+  }
+  @keyframes nc-pulse {
+    0% {
+      box-shadow: 0 0 0 0 currentColor;
+    }
+    70% {
+      box-shadow: 0 0 0 6px transparent;
+    }
+    100% {
+      box-shadow: 0 0 0 0 transparent;
+    }
+  }
+  .nc-anim-msg-in {
+    animation: nc-msg-in var(--nc-duration-msg-in) var(--nc-ease-emphasized) both;
+    animation-delay: var(--nc-anim-delay, 0ms);
+  }
+  .nc-anim-typing {
+    animation: nc-typing var(--nc-duration-typing) var(--nc-ease-bounce) infinite;
+    animation-delay: var(--nc-anim-delay, 0ms);
+  }
+  .nc-anim-pulse {
+    animation: nc-pulse var(--nc-duration-pulse) var(--nc-ease-out) infinite;
+    animation-delay: var(--nc-anim-delay, 0ms);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    [data-nc-settle=armed] {
+      opacity: 0;
+    }
+    [data-nc-settle=in] {
+      animation: nc-msg-in var(--nc-duration-msg-in) var(--nc-ease-emphasized) both;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .nc-anim-msg-in,
+    .nc-anim-typing,
+    .nc-anim-pulse {
+      animation: none;
+      opacity: 1;
+      transform: none;
+      box-shadow: none;
+    }
+  }
+}
+
+/* src/css/layout.css */
+@layer layout {
+  :root {
+    --nc-page-max: var(--nc-page-max-mobile);
+    --nc-cross-size: var(--nc-cross-size-mobile);
+    --nc-h-cell-md: var(--nc-h-cell-md-mobile);
+    --nc-h-cell-lg: var(--nc-h-cell-lg-mobile);
+    --nc-h-hero: var(--nc-h-hero-mobile);
+    --nc-h-strip: var(--nc-h-strip-mobile);
+    --nc-h-action-strip: var(--nc-h-action-strip-mobile);
+    --nc-h-action-body: var(--nc-h-action-body-mobile);
+    --nc-h-feature: var(--nc-h-feature-mobile);
+    --nc-h-editorial-feature: var(--nc-h-editorial-feature-mobile);
+  }
+  @media (min-width: 600px) {
+    :root {
+      --nc-page-max: var(--nc-page-max-tablet);
+      --nc-cross-size: var(--nc-cross-size-tablet);
+      --nc-h-cell-md: var(--nc-h-cell-md-tablet);
+      --nc-h-strip: var(--nc-h-strip-tablet);
+      --nc-h-action-body: var(--nc-h-action-body-tablet);
+      --nc-h-feature: var(--nc-h-feature-tablet);
+      --nc-h-editorial-feature: var(--nc-h-editorial-feature-tablet);
+    }
+  }
+  @media (min-width: 960px) {
+    :root {
+      --nc-page-max: var(--nc-page-max-desktop);
+      --nc-cross-size: var(--nc-cross-size-desktop);
+      --nc-h-cell-md: var(--nc-h-cell-md-desktop);
+      --nc-h-cell-lg: var(--nc-h-cell-lg-desktop);
+      --nc-h-hero: var(--nc-h-hero-desktop);
+      --nc-h-strip: var(--nc-h-strip-desktop);
+      --nc-h-action-strip: var(--nc-h-action-strip-desktop);
+      --nc-h-feature: var(--nc-h-feature-desktop);
+      --nc-h-editorial-feature: var(--nc-h-editorial-feature-desktop);
+    }
+  }
+  .nc-page-system {
+    width: 100%;
+    padding-inline: var(--nc-page-pad);
+    padding-block: var(--nc-4xl);
+  }
+  .nc-page-frame {
+    position: relative;
+    width: 100%;
+    max-width: var(--nc-frame-max);
+    margin-inline: auto;
+    border-top: var(--nc-guide) solid var(--nc-line);
+    border-left: var(--nc-guide) solid var(--nc-line);
+    background: var(--nc-canvas);
+  }
+  .nc-page-frame::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 3;
+    border-right: var(--nc-guide) solid var(--nc-line);
+    border-bottom: var(--nc-guide) solid var(--nc-line);
+    pointer-events: none;
+  }
+  .nc-page-row {
+    --nc-row-min-height: var(--nc-h-cell-lg);
+    --nc-row-bleed-surface: var(--nc-canvas);
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    min-height: var(--nc-row-min-height);
+    border-top: var(--nc-guide) solid var(--nc-line);
+    background: var(--nc-canvas);
+  }
+  .nc-page-frame > .nc-page-row:first-child {
+    border-top: 0;
+  }
+  .nc-page-row[data-nc-bleed=surface]::before {
+    content: "";
+    position: absolute;
+    z-index: 0;
+    inset-block: 0;
+    left: 50%;
+    width: 100vw;
+    transform: translateX(-50%);
+    background: var(--nc-row-bleed-surface);
+    pointer-events: none;
+  }
+  .nc-page-row[data-nc-bleed=surface] > * {
+    position: relative;
+    z-index: 1;
+  }
+  .nc-row-lane {
+    display: grid;
+    min-width: 0;
+    min-height: 0;
+  }
+  .nc-row-lane[data-lane=active],
+  .nc-row-lane[data-lane=full] {
+    grid-column: 1 / -1;
+  }
+  .nc-grid-field {
+    --nc-grid-columns: 1;
+    --nc-grid-rows: 1;
+    --nc-grid-line: var(--nc-line);
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(var(--nc-grid-columns), minmax(0, 1fr));
+    grid-template-rows: repeat(var(--nc-grid-rows), minmax(0, 1fr));
+    min-width: 0;
+    overflow: visible;
+    background: var(--nc-canvas);
+  }
+  .nc-grid-field[data-grid-field=full-hero] {
+    --nc-grid-columns: 1;
+    --nc-grid-rows: 2;
+    height: var(--nc-h-hero);
+  }
+  .nc-grid-guides {
+    display: contents;
+    pointer-events: none;
+  }
+  .nc-grid-guide-v,
+  .nc-grid-guide-h {
+    position: relative;
+    z-index: 1;
+    display: none;
+    min-width: 0;
+    min-height: 0;
+    pointer-events: none;
+  }
+  .nc-grid-guide-v {
+    grid-column: var(--line);
+    grid-row: 1 / -1;
+    border-left: var(--nc-guide) solid var(--nc-grid-line);
+  }
+  .nc-grid-guide-h {
+    grid-column: 1 / -1;
+    grid-row: var(--line);
+    border-top: var(--nc-guide) solid var(--nc-grid-line);
+  }
+  .nc-grid-slot {
+    position: relative;
+    z-index: 2;
+    min-width: 0;
+  }
+  .nc-side-fill {
+    display: none;
+    min-width: 0;
+    min-height: 0;
+    background:
+      repeating-linear-gradient(
+        125deg,
+        var(--nc-canvas) 0,
+        var(--nc-canvas) 6px,
+        var(--nc-line) 6px,
+        var(--nc-line) 7px);
+  }
+  .nc-side-fill[data-side=start] {
+    grid-column: 1;
+    border-inline-end: var(--nc-guide) solid var(--nc-line);
+  }
+  .nc-side-fill[data-side=end] {
+    grid-column: 12;
+    border-inline-start: var(--nc-guide) solid var(--nc-line);
+  }
+  .nc-row-grid {
+    display: grid;
+    min-width: 0;
+    background: var(--nc-line);
+    column-gap: var(--nc-guide);
+    row-gap: var(--nc-guide);
+    padding-inline: var(--nc-guide);
+  }
+  .nc-row-grid[data-edges=inner] {
+    padding-inline: 0;
+  }
+  .nc-row-grid[data-grid="2"],
+  .nc-row-grid[data-grid="3"],
+  .nc-row-grid[data-grid="4"],
+  .nc-row-grid[data-grid="5"],
+  .nc-row-grid[data-grid="6"] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .nc-index-grid {
+    --nc-index-columns: 1;
+    --nc-index-rows: auto;
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(var(--nc-index-columns), minmax(0, 1fr));
+    min-width: 0;
+  }
+  .nc-index-guides {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    display: grid;
+    grid-template-columns: inherit;
+    pointer-events: none;
+  }
+  .nc-index-guide {
+    min-width: 0;
+    border-right: var(--nc-guide) solid var(--nc-line);
+  }
+  .nc-index-guide:last-child {
+    border-right: 0;
+  }
+  .nc-index-card {
+    position: relative;
+    z-index: 2;
+    display: grid;
+    min-width: 0;
+    min-height: var(--nc-h-cell-lg);
+    padding: var(--nc-cell-padding);
+    align-content: start;
+    gap: 14px;
+    overflow: hidden;
+    background: var(--nc-canvas);
+    color: var(--nc-ink);
+    text-decoration: none;
+  }
+  .nc-index-card[data-featured=true] {
+    min-height: var(--nc-h-editorial-feature);
+  }
+  .nc-article-shell {
+    display: grid;
+    min-width: 0;
+    background: var(--nc-line);
+    column-gap: var(--nc-guide);
+    row-gap: var(--nc-guide);
+    padding-inline: var(--nc-guide);
+  }
+  .nc-article-header,
+  .nc-article-body,
+  .nc-article-side,
+  .nc-article-footer {
+    display: grid;
+    min-width: 0;
+    padding: var(--nc-cell-padding);
+    gap: 12px;
+    background: var(--nc-canvas);
+  }
+  .nc-article-header {
+    min-height: 280px;
+    align-content: center;
+  }
+  .nc-article-side {
+    color: var(--nc-muted);
+  }
+  .nc-article-footer {
+    background: var(--nc-ink);
+    color: var(--nc-canvas);
+  }
+  .nc-span-12,
+  .nc-span-10 {
+    grid-column: 1 / -1;
+  }
+  .nc-stage-frame {
+    --nc-stage-active-column: 1 / -1;
+    --nc-stage-frame-gutter: 0px;
+    --nc-stage-surface: var(--nc-canvas);
+    --nc-stage-frame-color: var(--nc-line);
+    --nc-stage-filler-color: var(--nc-canvas-soft-2);
+    position: relative;
+    min-width: 0;
+    background: var(--nc-stage-surface);
+  }
+  .nc-stage-frame[data-frame-lines=true]::before,
+  .nc-stage-frame[data-frame-lines=true]::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 2;
+    width: var(--nc-guide);
+    background: var(--nc-stage-frame-color);
+    pointer-events: none;
+  }
+  .nc-stage-frame[data-frame-lines=true]::before {
+    left: 0;
+  }
+  .nc-stage-frame[data-frame-lines=true]::after {
+    right: 0;
+  }
+  .nc-stage-fill {
+    position: absolute;
+    inset-inline: 0;
+    top: var(--nc-stage-fill-top, 0px);
+    bottom: var(--nc-stage-fill-bottom, 0px);
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    column-gap: var(--nc-stage-frame-gutter);
+    pointer-events: none;
+  }
+  .nc-stage-fill::before,
+  .nc-stage-fill::after {
+    content: "";
+    min-width: 0;
+    background:
+      repeating-linear-gradient(
+        125deg,
+        transparent,
+        transparent 6px,
+        var(--nc-stage-filler-color) 6px,
+        var(--nc-stage-filler-color) 7px),
+      var(--nc-canvas);
+  }
+  .nc-stage-fill::before {
+    grid-column: 1;
+    margin-right: calc(var(--nc-stage-frame-gutter) * -1);
+  }
+  .nc-stage-fill::after {
+    grid-column: 12;
+    margin-left: calc(var(--nc-stage-frame-gutter) * -1);
+  }
+  .nc-stage-stack {
+    position: relative;
+    z-index: 1;
+    min-width: 0;
+  }
+  .nc-stage-grid,
+  .nc-connector-strip {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    column-gap: var(--nc-stage-frame-gutter);
+    min-width: 0;
+  }
+  .nc-stage-active,
+  .nc-connector-track {
+    grid-column: var(--nc-stage-active-column);
+  }
+  .nc-connector-strip {
+    height: calc(var(--nc-connector-height, var(--nc-h-action-strip)) + var(--nc-guide));
+  }
+  .nc-connector-strip[data-edge=start] {
+    border-bottom: var(--nc-guide) solid var(--nc-connector-frame-color, var(--nc-stage-frame-color));
+  }
+  .nc-connector-strip[data-edge=end] {
+    border-top: var(--nc-guide) solid var(--nc-connector-frame-color, var(--nc-stage-frame-color));
+  }
+  .nc-connector-track {
+    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0;
+    height: var(--nc-connector-height, var(--nc-h-action-strip));
+    min-width: 0;
+    padding-inline: var(--nc-guide);
+    overflow: hidden;
+  }
+  .nc-connector-track > div {
+    min-width: 0;
+    height: var(--nc-connector-height, var(--nc-h-action-strip));
+  }
+  .nc-connector-track > div:nth-child(n+2) {
+    display: none;
+  }
+  .nc-connector-strip svg {
+    color: var(--nc-connector-color, var(--nc-seam));
+    overflow: visible;
+  }
+  .nc-connector-strip line {
+    stroke: currentColor;
+    stroke-dasharray: var(--nc-connector-dash, 4 6);
+    stroke-linecap: round;
+  }
+  .nc-connector-track div svg {
+    display: block;
+    width: var(--nc-guide);
+    height: var(--nc-connector-height, var(--nc-h-action-strip));
+    margin-left: calc(var(--nc-guide) * -1);
+  }
+  .nc-connector-track > svg {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: block;
+    width: var(--nc-guide);
+    height: var(--nc-connector-height, var(--nc-h-action-strip));
+  }
+  @media (min-width: 600px) {
+    .nc-grid-field[data-grid-field=full-hero] {
+      --nc-grid-columns: 8;
+      --nc-grid-rows: 4;
+    }
+    .nc-grid-guide-v,
+    .nc-grid-guide-h {
+      display: block;
+    }
+    .nc-grid-guide-v[data-min=desktop],
+    .nc-grid-guide-h[data-min=desktop] {
+      display: none;
+    }
+    .nc-row-grid[data-grid="2"],
+    .nc-row-grid[data-grid="3"],
+    .nc-row-grid[data-grid="4"] {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .nc-row-grid[data-grid="5"],
+    .nc-row-grid[data-grid="6"] {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    .nc-index-grid {
+      --nc-index-columns: 2;
+    }
+  }
+  @media (min-width: 960px) {
+    .nc-grid-field[data-grid-field=full-hero] {
+      --nc-grid-columns: 12;
+      --nc-grid-rows: 8;
+    }
+    .nc-grid-guide-v,
+    .nc-grid-guide-h,
+    .nc-grid-guide-v[data-min=desktop],
+    .nc-grid-guide-h[data-min=desktop] {
+      display: block;
+    }
+    .nc-page-row {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+      column-gap: var(--nc-frame-gap);
+    }
+    .nc-row-lane[data-lane=active] {
+      grid-column: 2 / 12;
+    }
+    .nc-row-lane[data-lane=full] {
+      grid-column: 1 / -1;
+    }
+    .nc-row-lane[data-lane=active][data-frame-lines=true] {
+      position: relative;
+    }
+    .nc-row-lane[data-lane=active][data-frame-lines=true]::before,
+    .nc-row-lane[data-lane=active][data-frame-lines=true]::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      z-index: 2;
+      width: var(--nc-guide);
+      background: var(--nc-line);
+      pointer-events: none;
+    }
+    .nc-row-lane[data-lane=active][data-frame-lines=true]::before {
+      left: 0;
+    }
+    .nc-row-lane[data-lane=active][data-frame-lines=true]::after {
+      right: 0;
+    }
+    .nc-stage-frame {
+      --nc-stage-active-column: 2 / 12;
+      --nc-stage-frame-gutter: var(--nc-frame-gap);
+    }
+    .nc-stage-grid,
+    .nc-connector-strip {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+    .nc-page-row[data-rails=hatch] .nc-side-fill {
+      display: block;
+    }
+    .nc-side-fill[data-side=start] {
+      margin-right: calc(var(--nc-frame-gap) * -1);
+    }
+    .nc-side-fill[data-side=end] {
+      margin-left: calc(var(--nc-frame-gap) * -1);
+    }
+    .nc-row-grid[data-grid="3"] {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    .nc-row-grid[data-grid="4"] {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+    .nc-row-grid[data-grid="5"] {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+    .nc-row-grid[data-grid="6"] {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+    .nc-index-grid {
+      --nc-index-columns: 3;
+    }
+    .nc-index-card[data-featured=true] {
+      grid-column: span 2;
+    }
+    .nc-article-shell {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
+    }
+    .nc-article-header,
+    .nc-article-footer {
+      grid-column: 1 / -1;
+    }
+    .nc-article-side {
+      grid-column: 1 / 3;
+      grid-row: 2;
+    }
+    .nc-article-body {
+      grid-column: 3 / -1;
+    }
+    .nc-span-10 {
+      grid-column: 2 / 12;
+    }
+  }
+}
+
+/* src/css/primitives.css */
+@layer primitives {
+  .nc-cell {
+    position: relative;
+    z-index: 2;
+    display: grid;
+    min-width: 0;
+    min-height: var(--nc-h-cell-sm);
+    margin-right: var(--nc-guide);
+    margin-bottom: var(--nc-guide);
+    padding: var(--nc-cell-padding);
+    overflow: hidden;
+    overflow-wrap: anywhere;
+    place-content: center;
+    background: var(--nc-canvas);
+  }
+  .nc-cell-flush {
+    padding: 0;
+  }
+  .nc-diagonal-fill,
+  .nc-cell-filler {
+    background:
+      repeating-linear-gradient(
+        -45deg,
+        var(--nc-canvas-soft) 0,
+        var(--nc-canvas-soft) 7px,
+        var(--nc-line) 7px,
+        var(--nc-line) 8px),
+      var(--nc-canvas);
+  }
+  .nc-dotted-field {
+    background: radial-gradient(var(--nc-line) 0.8px, transparent 0.8px) 0 0 / 12px 12px, var(--nc-canvas);
+  }
+  .nc-marker {
+    --nc-cross-half: calc((var(--nc-cross-size) / 2) + (var(--nc-guide) / 2));
+    position: absolute;
+    z-index: 4;
+    grid-column-start: var(--nc-cross-column);
+    grid-row-start: var(--nc-cross-row);
+    width: var(--nc-cross-size);
+    height: var(--nc-cross-size);
+    inset: calc(var(--nc-cross-half) * -1);
+    pointer-events: none;
+  }
+  .nc-marker[data-position=top-left] {
+    --nc-cross-column: 1;
+    --nc-cross-row: 1;
+  }
+  .nc-marker[data-position=top-right] {
+    --nc-cross-column: -1;
+    --nc-cross-row: 1;
+  }
+  .nc-marker[data-position=bottom-left] {
+    --nc-cross-column: 1;
+    --nc-cross-row: -1;
+  }
+  .nc-marker[data-position=bottom-right] {
+    --nc-cross-column: -1;
+    --nc-cross-row: -1;
+  }
+  .nc-marker::before,
+  .nc-marker::after {
+    content: "";
+    position: absolute;
+    display: block;
+    background: var(--nc-cross);
+  }
+  .nc-marker::before {
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    width: var(--nc-guide);
+    transform: translateX(-50%);
+  }
+  .nc-marker::after {
+    left: 0;
+    right: 0;
+    top: 50%;
+    height: var(--nc-guide);
+    transform: translateY(-50%);
+  }
+  .nc-blueprint-field {
+    --nc-blueprint-columns: var(--nc-grid-columns, 12);
+    --nc-blueprint-rows: var(--nc-grid-rows, 8);
+    --nc-blueprint-line: var(--nc-line);
+    background-image:
+      linear-gradient(
+        to right,
+        var(--nc-blueprint-line) var(--nc-guide),
+        transparent var(--nc-guide)),
+      linear-gradient(
+        to bottom,
+        var(--nc-blueprint-line) var(--nc-guide),
+        transparent var(--nc-guide));
+    background-size: calc(100% / var(--nc-blueprint-columns)) calc(100% / var(--nc-blueprint-rows)), calc(100% / var(--nc-blueprint-columns)) calc(100% / var(--nc-blueprint-rows));
+  }
+  .nc-blueprint-field[data-feather=top] {
+    -webkit-mask-image:
+      linear-gradient(
+        to bottom,
+        transparent 0%,
+        black 22%,
+        black 100%);
+    mask-image:
+      linear-gradient(
+        to bottom,
+        transparent 0%,
+        black 22%,
+        black 100%);
+  }
+  .nc-rule-svg {
+    color: var(--nc-seam);
+    overflow: visible;
+  }
+  .nc-rule-svg line {
+    stroke: currentColor;
+    stroke-dasharray: 4 6;
+    stroke-linecap: round;
+  }
+  .nc-panel-cell {
+    display: grid;
+    min-width: 0;
+    min-height: var(--nc-h-cell-md);
+    padding: var(--nc-cell-padding);
+    align-content: center;
+    gap: 12px;
+    overflow: hidden;
+    overflow-wrap: anywhere;
+    background: var(--nc-canvas);
+    color: var(--nc-body);
+  }
+  .nc-artifact-surface {
+    display: grid;
+    gap: 12px;
+    min-width: 0;
+    border: var(--nc-guide) solid var(--nc-line);
+    padding: 18px;
+    background: radial-gradient(var(--nc-line) 0.8px, transparent 0.8px) 0 0 / 12px 12px, var(--nc-canvas);
+    color: var(--nc-body);
+  }
+  .nc-artifact-bar {
+    height: 10px;
+    background: var(--nc-line);
+  }
+  .nc-artifact-bar:nth-of-type(1) {
+    width: 76%;
+  }
+  .nc-artifact-bar:nth-of-type(2) {
+    width: 56%;
+  }
+  .nc-artifact-bar:nth-of-type(3) {
+    width: 38%;
+  }
+  .nc-icon {
+    display: inline-flex;
+    flex: none;
+    width: 16px;
+    height: 16px;
+    color: inherit;
+    vertical-align: middle;
+  }
+  .nc-icon[data-size=sm] {
+    width: 12px;
+    height: 12px;
+  }
+  .nc-icon[data-size=lg] {
+    width: 24px;
+    height: 24px;
+  }
+  .nc-icon svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.5;
+    stroke-linecap: butt;
+    stroke-linejoin: miter;
+  }
+  .nc-badge-secondary {
+    display: inline-flex;
+    width: fit-content;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    border: var(--nc-guide) solid var(--nc-line);
+    border-radius: var(--nc-rounded-full);
+    padding: 1px 8px;
+    background: var(--nc-canvas-soft);
+    color: var(--nc-body);
+  }
+  .nc-filter-chip {
+    display: inline-flex;
+    width: fit-content;
+    min-height: var(--nc-filter-chip-height);
+    align-items: center;
+    justify-content: center;
+    gap: var(--nc-filter-chip-gap);
+    border: var(--nc-guide) solid var(--nc-line);
+    border-radius: var(--nc-rounded-sm);
+    padding: 0 var(--nc-xs);
+    background: var(--nc-canvas-soft);
+    color: var(--nc-body);
+  }
+  .nc-filter-chip svg {
+    width: var(--nc-filter-chip-icon);
+    height: var(--nc-filter-chip-icon);
+    flex: none;
+    stroke: currentColor;
+    stroke-width: 1.5;
+  }
+  .nc-filter-chip:focus-visible {
+    outline: var(--nc-focus-ring-width) solid var(--nc-focus-ring);
+    outline-offset: 0;
+  }
+  .nc-link-inline {
+    color: var(--nc-link);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    text-decoration-thickness: var(--nc-guide);
+    transition:
+      background-color var(--nc-duration-stagger) var(--nc-ease-out-strong),
+      border-color var(--nc-duration-stagger) var(--nc-ease-out-strong),
+      color var(--nc-duration-stagger) var(--nc-ease-out-strong),
+      opacity var(--nc-duration-stagger) var(--nc-ease-out-strong);
+  }
+  @media (hover: hover) and (pointer: fine) {
+    .nc-link-inline:hover {
+      color: var(--nc-link-deep);
+    }
+  }
+  .nc-link-inline:focus-visible {
+    outline: var(--nc-focus-ring-width) solid var(--nc-focus-ring);
+    outline-offset: 0;
+    border-radius: var(--nc-rounded-md);
+  }
+  .nc-label-mono {
+    display: block;
+    margin: 0;
+    color: var(--nc-muted);
+    text-transform: uppercase;
+  }
+}
+
+/* src/css/components/state-tag.css */
+@layer components {
+  .nc-state-tag {
+    display: inline-flex;
+    align-items: center;
+    height: 26px;
+    padding: 0 8px;
+    border: var(--nc-guide) solid var(--nc-line);
+    border-left-width: 3px;
+    border-left-color: var(--nc-ink);
+    border-radius: var(--nc-rounded-sm);
+    background: var(--nc-canvas);
+    color: var(--nc-ink);
+    font-family:
+      "Geist Mono",
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      monospace;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 16px;
+    letter-spacing: 0;
+    white-space: nowrap;
+    transition:
+      background-color var(--nc-duration-confirm) var(--nc-ease-out-strong),
+      border-color var(--nc-duration-confirm) var(--nc-ease-out-strong),
+      color var(--nc-duration-confirm) var(--nc-ease-out-strong);
+  }
+  .nc-state-tag[data-variant=ready] {
+    border-left-color: var(--nc-state-ready);
+  }
+  .nc-state-tag[data-variant=running] {
+    border-left-color: var(--nc-state-running);
+  }
+  .nc-state-tag[data-variant=review] {
+    border-left-color: var(--nc-state-review);
+  }
+  .nc-state-tag[data-variant=blocked] {
+    border-left-color: var(--nc-state-blocked);
+  }
+  .nc-state-tag[data-variant=complete] {
+    border-left-color: var(--nc-state-complete);
+  }
+}
+
+/* src/css/components/status-tag.css */
+@layer components {
+  .nc-status-tag {
+    display: inline-flex;
+    align-items: center;
+    height: 24px;
+    padding: 0 10px;
+    border: 0;
+    border-radius: var(--nc-rounded-md);
+    font-family:
+      Geist,
+      Inter,
+      system-ui,
+      -apple-system,
+      sans-serif;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 16px;
+    letter-spacing: 0;
+    white-space: nowrap;
+    transition: background-color var(--nc-duration-confirm) var(--nc-ease-out-strong), color var(--nc-duration-confirm) var(--nc-ease-out-strong);
+  }
+  .nc-status-tag[data-tone=gray] {
+    background: var(--nc-canvas-soft-2);
+    color: var(--nc-body);
+  }
+  .nc-status-tag[data-tone=green] {
+    background: var(--nc-link-bg-soft);
+    color: var(--nc-link-deep);
+  }
+  .nc-status-tag[data-tone=red] {
+    background: var(--nc-error-soft);
+    color: var(--nc-error-deep);
+  }
+  .nc-status-tag[data-tone=amber] {
+    background: var(--nc-warning-soft);
+    color: var(--nc-warning-deep);
+  }
+  .nc-status-tag[data-tone=blue] {
+    background: var(--nc-info-soft);
+    color: var(--nc-info-deep);
+  }
+}
+
+/* src/css/components/chat-thread.css */
+@layer components {
+  .nc-chat-thread {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border: var(--nc-guide) solid var(--nc-line);
+    border-radius: var(--nc-rounded-md);
+    background: var(--nc-canvas);
+    color: var(--nc-ink);
+    font-family:
+      "Geist",
+      "Inter",
+      system-ui,
+      -apple-system,
+      "Segoe UI",
+      sans-serif;
+  }
+  .nc-chat-thread-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 14px 16px;
+    border-bottom: var(--nc-guide) solid var(--nc-line);
+    background: var(--nc-canvas);
+  }
+  .nc-chat-thread-domain {
+    font-family:
+      "Geist Mono",
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      monospace;
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 16px;
+    color: var(--nc-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .nc-chat-thread-identity {
+    min-width: 0;
+    flex: 1;
+  }
+  .nc-chat-thread-name {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    color: var(--nc-ink);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .nc-chat-thread-name .nc-chat-thread-role {
+    min-width: 0;
+    overflow: hidden;
+    font-weight: 400;
+    color: var(--nc-muted);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .nc-chat-thread-workflow {
+    flex: 0 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    font-family:
+      "Geist Mono",
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      monospace;
+    font-size: 11px;
+    line-height: 16px;
+    color: var(--nc-body);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .nc-chat-thread-body {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden auto;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 16px 18px;
+    background: radial-gradient(var(--nc-line) 0.8px, transparent 0.8px) 8px 8px / 12px 12px, var(--nc-canvas);
+  }
+  .nc-chat-pause {
+    display: block;
+    align-self: flex-end;
+    margin: var(--nc-xs) var(--nc-xs) 0;
+    padding: var(--nc-xs) var(--nc-sm);
+    background: var(--nc-canvas);
+    color: var(--nc-muted);
+    border: var(--nc-guide) solid var(--nc-line);
+    border-radius: var(--nc-rounded-xs);
+    font-family: var(--nc-type-caption-mono-font-family);
+    font-size: var(--nc-type-caption-mono-font-size);
+    font-weight: var(--nc-type-caption-mono-font-weight);
+    line-height: var(--nc-type-caption-mono-line-height);
+    letter-spacing: var(--nc-type-caption-mono-letter-spacing);
+    cursor: pointer;
+    transition:
+      background-color var(--nc-duration-stagger) var(--nc-ease-out-strong),
+      border-color var(--nc-duration-stagger) var(--nc-ease-out-strong),
+      color var(--nc-duration-stagger) var(--nc-ease-out-strong),
+      opacity var(--nc-duration-stagger) var(--nc-ease-out-strong);
+  }
+  @media (hover: hover) and (pointer: fine) {
+    .nc-chat-pause:hover {
+      color: var(--nc-ink);
+      border-color: var(--nc-body);
+    }
+  }
+  .nc-chat-pause[aria-pressed=true] {
+    color: var(--nc-ink);
+    border-color: var(--nc-body);
+  }
+  .nc-chat-pause:active {
+    transform: scale(0.97);
+    transition: transform var(--nc-duration-stagger) var(--nc-ease-out-strong);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .nc-chat-pause:active {
+      transform: none;
+    }
+  }
+  .nc-chat-thread-footer {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 10px 16px;
+    border-top: var(--nc-guide) solid var(--nc-line);
+    background: var(--nc-canvas);
+  }
+}
+
+/* src/css/components/chat-bubble-user.css */
+@layer components {
+  .nc-chat-bubble-user {
+    align-self: flex-end;
+    width: fit-content;
+    max-width: 84%;
+    padding: 9px 13px;
+    border: var(--nc-guide) solid var(--nc-ink);
+    border-radius: var(--nc-rounded-md);
+    background: var(--nc-ink);
+    color: var(--nc-canvas);
+    font-family:
+      "Geist",
+      "Inter",
+      system-ui,
+      -apple-system,
+      "Segoe UI",
+      sans-serif;
+    font-size: 14px;
+    line-height: 20px;
+    white-space: pre-wrap;
+    word-break: break-word;
+    animation-name: nc-msg-in;
+  }
+}
+
+/* src/css/components/chat-bubble-agent.css */
+@layer components {
+  .nc-chat-bubble-agent {
+    --nc-accent: var(--nc-link);
+    align-self: flex-start;
+    width: fit-content;
+    max-width: 84%;
+    padding: 9px 13px 9px 15px;
+    border: var(--nc-guide) solid var(--nc-line);
+    border-radius: var(--nc-rounded-md);
+    box-shadow: inset 3px 0 0 0 var(--nc-accent);
+    background: var(--nc-canvas);
+    color: var(--nc-ink);
+    font-family:
+      "Geist",
+      "Inter",
+      system-ui,
+      -apple-system,
+      "Segoe UI",
+      sans-serif;
+    font-size: 14px;
+    line-height: 20px;
+    white-space: pre-wrap;
+    word-break: break-word;
+    animation-name: nc-msg-in;
+  }
+  .nc-chat-bubble-agent[data-accent=green] {
+    --nc-accent: var(--nc-link);
+  }
+  .nc-chat-bubble-agent[data-accent=cyan] {
+    --nc-accent: var(--nc-info);
+  }
+  .nc-chat-bubble-agent[data-accent=amber] {
+    --nc-accent: var(--nc-warning-deep);
+  }
+  .nc-chat-bubble-agent[data-accent=ink] {
+    --nc-accent: var(--nc-ink);
+  }
+  .nc-chat-bubble-agent[data-accent=red] {
+    --nc-accent: var(--nc-error);
+  }
+  .nc-chat-bubble-agent code {
+    padding: 1px 5px;
+    border-radius: var(--nc-rounded-xs);
+    background: var(--nc-canvas-soft-2);
+    color: var(--nc-ink);
+    font-family:
+      "Geist Mono",
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      monospace;
+    font-size: 12px;
+  }
+}
+
+/* src/css/components/tool-call-trace.css */
+@layer components {
+  .nc-tool-call-trace {
+    align-self: flex-start;
+    width: fit-content;
+    max-width: 92%;
+    padding: 6px 10px;
+    border: var(--nc-guide) solid var(--nc-line);
+    border-radius: var(--nc-rounded-sm);
+    background: var(--nc-canvas-soft-2);
+    color: var(--nc-body);
+    font-family:
+      "Geist Mono",
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      monospace;
+    font-size: 12px;
+    line-height: 17px;
+    animation-name: nc-msg-in;
+  }
+  .nc-tool-call-trace::before {
+    content: "";
+    display: inline-block;
+    width: 13px;
+    height: 13px;
+    margin-right: 8px;
+    vertical-align: -2px;
+    background-color: var(--nc-muted);
+    -webkit-mask: url('data:image/svg+xml,<!-- @license lucide-static v1.17.0 - ISC -->%0A<svg%0A  class="lucide lucide-chevron-right"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.5"%0A  stroke-linecap="butt"%0A  stroke-linejoin="miter"%0A>%0A  <path d="m9 18 6-6-6-6" />%0A</svg>%0A') center / contain no-repeat;
+    mask: url('data:image/svg+xml,<!-- @license lucide-static v1.17.0 - ISC -->%0A<svg%0A  class="lucide lucide-chevron-right"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.5"%0A  stroke-linecap="butt"%0A  stroke-linejoin="miter"%0A>%0A  <path d="m9 18 6-6-6-6" />%0A</svg>%0A') center / contain no-repeat;
+  }
+}
+
+/* src/css/components/memory-item.css */
+@layer components {
+  .nc-memory-item {
+    align-self: flex-start;
+    display: flex;
+    gap: 10px;
+    align-items: flex-start;
+    width: fit-content;
+    max-width: 92%;
+    padding: 8px 12px;
+    border: var(--nc-guide) solid var(--nc-line);
+    border-radius: var(--nc-rounded-sm);
+    background: var(--nc-canvas-soft);
+    color: var(--nc-body);
+    font-family:
+      "Geist",
+      "Inter",
+      system-ui,
+      -apple-system,
+      "Segoe UI",
+      sans-serif;
+    font-size: 13px;
+    line-height: 18px;
+    animation-name: nc-msg-in;
+  }
+  .nc-memory-item-label {
+    flex: 0 0 auto;
+    margin-top: 2px;
+    font-family:
+      "Geist Mono",
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      monospace;
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 16px;
+    color: var(--nc-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+}
+
+/* src/css/components/handoff-banner.css */
+@layer components {
+  .nc-handoff-banner {
+    align-self: stretch;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    padding: 8px 12px;
+    border-left: 3px solid var(--nc-link);
+    border-radius: var(--nc-rounded-md);
+    background: var(--nc-link-bg-soft);
+    color: var(--nc-link-deep);
+    font-family:
+      "Geist",
+      "Inter",
+      system-ui,
+      -apple-system,
+      "Segoe UI",
+      sans-serif;
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 18px;
+    animation-name: nc-msg-in;
+  }
+  .nc-handoff-banner::before {
+    content: "";
+    flex: none;
+    width: 16px;
+    height: 16px;
+    background-color: var(--nc-link);
+    -webkit-mask: url('data:image/svg+xml,<!-- @license lucide-static v1.17.0 - ISC -->%0A<svg%0A  class="lucide lucide-arrow-right"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.5"%0A  stroke-linecap="butt"%0A  stroke-linejoin="miter"%0A>%0A  <path d="M5 12h14" />%0A  <path d="m12 5 7 7-7 7" />%0A</svg>%0A') center / contain no-repeat;
+    mask: url('data:image/svg+xml,<!-- @license lucide-static v1.17.0 - ISC -->%0A<svg%0A  class="lucide lucide-arrow-right"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.5"%0A  stroke-linecap="butt"%0A  stroke-linejoin="miter"%0A>%0A  <path d="M5 12h14" />%0A  <path d="m12 5 7 7-7 7" />%0A</svg>%0A') center / contain no-repeat;
+  }
+}
+
+/* src/css/components/approval-gate.css */
+@layer components {
+  .nc-approval-gate {
+    align-self: stretch;
+    display: grid;
+    gap: 6px;
+    padding: 12px;
+    border: var(--nc-guide) solid color-mix(in srgb, var(--nc-warning-deep) 40%, var(--nc-warning-soft));
+    border-radius: var(--nc-rounded-md);
+    background: var(--nc-warning-soft);
+    color: var(--nc-ink);
+    font-family:
+      "Geist",
+      "Inter",
+      system-ui,
+      -apple-system,
+      "Segoe UI",
+      sans-serif;
+    animation-name: nc-msg-in;
+    transition:
+      background-color var(--nc-duration-confirm) var(--nc-ease-out-strong),
+      border-color var(--nc-duration-confirm) var(--nc-ease-out-strong),
+      color var(--nc-duration-confirm) var(--nc-ease-out-strong);
+  }
+  .nc-approval-gate-label {
+    font-family:
+      "Geist Mono",
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      monospace;
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 16px;
+    color: var(--nc-warning-deep);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+  .nc-approval-gate-title {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    color: var(--nc-ink);
+  }
+  .nc-approval-gate-copy {
+    font-size: 13px;
+    line-height: 18px;
+    color: var(--nc-body);
+  }
+  .nc-approval-gate-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 2px;
+  }
+  .nc-approval-gate-actions button {
+    padding: 5px 10px;
+    border: var(--nc-guide) solid var(--nc-ink);
+    border-radius: var(--nc-rounded-sm);
+    background: var(--nc-ink);
+    color: var(--nc-canvas);
+    font-family: inherit;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 16px;
+    cursor: pointer;
+  }
+  .nc-approval-gate-actions button[data-variant=secondary] {
+    border-color: var(--nc-line);
+    background: var(--nc-canvas);
+    color: var(--nc-ink);
+  }
+  .nc-approval-gate-actions button[data-variant=outline] {
+    border-color: var(--nc-line);
+    background: transparent;
+    color: var(--nc-ink);
+  }
+  .nc-approval-gate-actions button[data-variant=destructive] {
+    border-color: var(--nc-error);
+    background: var(--nc-canvas);
+    color: var(--nc-error-deep);
+  }
+  .nc-approval-gate-actions button::before {
+    content: "";
+    display: inline-block;
+    width: 13px;
+    height: 13px;
+    margin-right: 5px;
+    vertical-align: -2px;
+    background-color: currentColor;
+    -webkit-mask: url('data:image/svg+xml,<!-- @license lucide-static v1.17.0 - ISC -->%0A<svg%0A  class="lucide lucide-check"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.5"%0A  stroke-linecap="butt"%0A  stroke-linejoin="miter"%0A>%0A  <path d="M20 6 9 17l-5-5" />%0A</svg>%0A') center / contain no-repeat;
+    mask: url('data:image/svg+xml,<!-- @license lucide-static v1.17.0 - ISC -->%0A<svg%0A  class="lucide lucide-check"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.5"%0A  stroke-linecap="butt"%0A  stroke-linejoin="miter"%0A>%0A  <path d="M20 6 9 17l-5-5" />%0A</svg>%0A') center / contain no-repeat;
+  }
+  .nc-approval-gate-actions button[data-variant=secondary]::before {
+    -webkit-mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.17.0 - ISC -->%0A<svg%0A  class="lucide lucide-square-pen"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.5"%0A  stroke-linecap="butt"%0A  stroke-linejoin="miter"%0A>%0A  <path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />%0A  <path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z" />%0A</svg>%0A');
+    mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.17.0 - ISC -->%0A<svg%0A  class="lucide lucide-square-pen"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.5"%0A  stroke-linecap="butt"%0A  stroke-linejoin="miter"%0A>%0A  <path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />%0A  <path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z" />%0A</svg>%0A');
+  }
+  .nc-approval-gate-actions button[data-approval-choice=deny]::before {
+    -webkit-mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.17.0 - ISC -->%0A<svg%0A  class="lucide lucide-ban"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.5"%0A  stroke-linecap="butt"%0A  stroke-linejoin="miter"%0A>%0A  <circle cx="12" cy="12" r="10" />%0A  <path d="M4.929 4.929 19.07 19.071" />%0A</svg>%0A');
+    mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.17.0 - ISC -->%0A<svg%0A  class="lucide lucide-ban"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.5"%0A  stroke-linecap="butt"%0A  stroke-linejoin="miter"%0A>%0A  <circle cx="12" cy="12" r="10" />%0A  <path d="M4.929 4.929 19.07 19.071" />%0A</svg>%0A');
+  }
+  .nc-approval-gate-actions button[data-approval-choice=session]::before {
+    -webkit-mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.17.0 - ISC -->%0A<svg%0A  class="lucide lucide-clock"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.5"%0A  stroke-linecap="butt"%0A  stroke-linejoin="miter"%0A>%0A  <circle cx="12" cy="12" r="10" />%0A  <path d="M12 6v6l4 2" />%0A</svg>%0A');
+    mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.17.0 - ISC -->%0A<svg%0A  class="lucide lucide-clock"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.5"%0A  stroke-linecap="butt"%0A  stroke-linejoin="miter"%0A>%0A  <circle cx="12" cy="12" r="10" />%0A  <path d="M12 6v6l4 2" />%0A</svg>%0A');
+  }
+  .nc-approval-gate-actions button[data-approval-choice=always]::before {
+    -webkit-mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.17.0 - ISC -->%0A<svg%0A  class="lucide lucide-shield"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.5"%0A  stroke-linecap="butt"%0A  stroke-linejoin="miter"%0A>%0A  <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />%0A</svg>%0A');
+    mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.17.0 - ISC -->%0A<svg%0A  class="lucide lucide-shield"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.5"%0A  stroke-linecap="butt"%0A  stroke-linejoin="miter"%0A>%0A  <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />%0A</svg>%0A');
+  }
+  .nc-approval-gate-actions button:focus-visible {
+    outline: var(--nc-focus-ring-width) solid var(--nc-focus-ring);
+    outline-offset: 0;
+  }
+}
+
+/* src/css/components/artifact-preview.css */
+@layer components {
+  .nc-artifact-preview {
+    align-self: stretch;
+    overflow: hidden;
+    border: var(--nc-guide) solid var(--nc-line);
+    border-radius: var(--nc-rounded-md);
+    background: var(--nc-canvas);
+    font-family:
+      "Geist",
+      "Inter",
+      system-ui,
+      -apple-system,
+      "Segoe UI",
+      sans-serif;
+    animation-name: nc-msg-in;
+  }
+  .nc-artifact-preview-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 7px 10px;
+    border-bottom: var(--nc-guide) solid var(--nc-line);
+    background: var(--nc-canvas-soft);
+  }
+  .nc-artifact-preview-header::before {
+    content: "";
+    flex: none;
+    width: 14px;
+    height: 14px;
+    background-color: var(--nc-muted);
+    -webkit-mask: url('data:image/svg+xml,<!-- @license lucide-static v1.17.0 - ISC -->%0A<svg%0A  class="lucide lucide-file-text"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.5"%0A  stroke-linecap="butt"%0A  stroke-linejoin="miter"%0A>%0A  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />%0A  <path d="M14 2v5a1 1 0 0 0 1 1h5" />%0A  <path d="M10 9H8" />%0A  <path d="M16 13H8" />%0A  <path d="M16 17H8" />%0A</svg>%0A') center / contain no-repeat;
+    mask: url('data:image/svg+xml,<!-- @license lucide-static v1.17.0 - ISC -->%0A<svg%0A  class="lucide lucide-file-text"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.5"%0A  stroke-linecap="butt"%0A  stroke-linejoin="miter"%0A>%0A  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />%0A  <path d="M14 2v5a1 1 0 0 0 1 1h5" />%0A  <path d="M10 9H8" />%0A  <path d="M16 13H8" />%0A  <path d="M16 17H8" />%0A</svg>%0A') center / contain no-repeat;
+  }
+  .nc-artifact-preview[data-kind=sheet] .nc-artifact-preview-header::before {
+    -webkit-mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.17.0 - ISC -->%0A<svg%0A  class="lucide lucide-table"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.5"%0A  stroke-linecap="butt"%0A  stroke-linejoin="miter"%0A>%0A  <path d="M12 3v18" />%0A  <rect width="18" height="18" x="3" y="3" rx="2" />%0A  <path d="M3 9h18" />%0A  <path d="M3 15h18" />%0A</svg>%0A');
+    mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.17.0 - ISC -->%0A<svg%0A  class="lucide lucide-table"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.5"%0A  stroke-linecap="butt"%0A  stroke-linejoin="miter"%0A>%0A  <path d="M12 3v18" />%0A  <rect width="18" height="18" x="3" y="3" rx="2" />%0A  <path d="M3 9h18" />%0A  <path d="M3 15h18" />%0A</svg>%0A');
+  }
+  .nc-artifact-preview[data-kind=code] .nc-artifact-preview-header::before {
+    -webkit-mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.17.0 - ISC -->%0A<svg%0A  class="lucide lucide-code"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.5"%0A  stroke-linecap="butt"%0A  stroke-linejoin="miter"%0A>%0A  <path d="m16 18 6-6-6-6" />%0A  <path d="m8 6-6 6 6 6" />%0A</svg>%0A');
+    mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.17.0 - ISC -->%0A<svg%0A  class="lucide lucide-code"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.5"%0A  stroke-linecap="butt"%0A  stroke-linejoin="miter"%0A>%0A  <path d="m16 18 6-6-6-6" />%0A  <path d="m8 6-6 6 6 6" />%0A</svg>%0A');
+  }
+  .nc-artifact-preview[data-kind=pdf] .nc-artifact-preview-header::before {
+    -webkit-mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.17.0 - ISC -->%0A<svg%0A  class="lucide lucide-file"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.5"%0A  stroke-linecap="butt"%0A  stroke-linejoin="miter"%0A>%0A  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />%0A  <path d="M14 2v5a1 1 0 0 0 1 1h5" />%0A</svg>%0A');
+    mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.17.0 - ISC -->%0A<svg%0A  class="lucide lucide-file"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.5"%0A  stroke-linecap="butt"%0A  stroke-linejoin="miter"%0A>%0A  <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />%0A  <path d="M14 2v5a1 1 0 0 0 1 1h5" />%0A</svg>%0A');
+  }
+  .nc-artifact-preview[data-kind=report] .nc-artifact-preview-header::before {
+    -webkit-mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.17.0 - ISC -->%0A<svg%0A  class="lucide lucide-chart-column"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.5"%0A  stroke-linecap="butt"%0A  stroke-linejoin="miter"%0A>%0A  <path d="M3 3v16a2 2 0 0 0 2 2h16" />%0A  <path d="M18 17V9" />%0A  <path d="M13 17V5" />%0A  <path d="M8 17v-3" />%0A</svg>%0A');
+    mask-image: url('data:image/svg+xml,<!-- @license lucide-static v1.17.0 - ISC -->%0A<svg%0A  class="lucide lucide-chart-column"%0A  xmlns="http://www.w3.org/2000/svg"%0A  width="24"%0A  height="24"%0A  viewBox="0 0 24 24"%0A  fill="none"%0A  stroke="currentColor"%0A  stroke-width="1.5"%0A  stroke-linecap="butt"%0A  stroke-linejoin="miter"%0A>%0A  <path d="M3 3v16a2 2 0 0 0 2 2h16" />%0A  <path d="M18 17V9" />%0A  <path d="M13 17V5" />%0A  <path d="M8 17v-3" />%0A</svg>%0A');
+  }
+  .nc-artifact-preview-title {
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 18px;
+    color: var(--nc-ink);
+  }
+  .nc-artifact-preview-kind {
+    margin-left: auto;
+    font-family:
+      "Geist Mono",
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      monospace;
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 16px;
+    color: var(--nc-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+  .nc-artifact-preview-body {
+    padding: 10px 12px;
+    color: var(--nc-body);
+    font-size: 13px;
+    line-height: 18px;
+    white-space: pre-wrap;
+  }
+}
+
+/* src/css/components/typing-dots.css */
+@layer components {
+  .nc-typing-dots {
+    --nc-accent: var(--nc-link);
+    align-self: flex-start;
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+    width: fit-content;
+    padding: 10px 14px 10px 15px;
+    border: var(--nc-guide) solid var(--nc-line);
+    border-radius: var(--nc-rounded-md);
+    box-shadow: inset 3px 0 0 0 var(--nc-accent);
+    background: var(--nc-canvas);
+  }
+  .nc-typing-dots[data-accent=green] {
+    --nc-accent: var(--nc-link);
+  }
+  .nc-typing-dots[data-accent=cyan] {
+    --nc-accent: var(--nc-info);
+  }
+  .nc-typing-dots[data-accent=amber] {
+    --nc-accent: var(--nc-warning-deep);
+  }
+  .nc-typing-dots[data-accent=ink] {
+    --nc-accent: var(--nc-ink);
+  }
+  .nc-typing-dots[data-accent=red] {
+    --nc-accent: var(--nc-error);
+  }
+  .nc-typing-dots-dot {
+    width: 5px;
+    height: 5px;
+    border-radius: var(--nc-rounded-full);
+    background: var(--nc-muted);
+  }
+}
+
+/* src/css/components/state-row.css */
+@layer components {
+  .nc-state-row {
+    align-self: stretch;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 3px 0;
+    font-family:
+      "Geist Mono",
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      monospace;
+    font-size: 11px;
+    line-height: 16px;
+    color: var(--nc-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+  .nc-state-row::before,
+  .nc-state-row::after {
+    content: "";
+    flex: 1;
+    height: var(--nc-guide);
+    background: var(--nc-line);
+  }
+  .nc-state-row-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    white-space: nowrap;
+  }
+  .nc-state-row-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: var(--nc-rounded-full);
+    color: var(--nc-state-running);
+    background: currentColor;
+  }
+  .nc-state-row[data-kind=ready] .nc-state-row-dot {
+    color: var(--nc-state-ready);
+  }
+  .nc-state-row[data-kind=running] .nc-state-row-dot {
+    color: var(--nc-state-running);
+  }
+  .nc-state-row[data-kind=review] .nc-state-row-dot {
+    color: var(--nc-state-review);
+  }
+  .nc-state-row[data-kind=blocked] .nc-state-row-dot {
+    color: var(--nc-state-blocked);
+  }
+  .nc-state-row[data-kind=complete] .nc-state-row-dot {
+    color: var(--nc-state-complete);
+  }
+}
+
+/* src/css/components/agent-avatar.css */
+@layer components {
+  .nc-agent-avatar {
+    --nc-accent: var(--nc-line);
+    display: grid;
+    place-items: center;
+    width: 32px;
+    height: 32px;
+    overflow: hidden;
+    border: var(--nc-guide) solid var(--nc-accent);
+    border-radius: var(--nc-rounded-full);
+    background: var(--nc-canvas-soft);
+    color: var(--nc-ink);
+    font-family:
+      "Geist Mono",
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      monospace;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1;
+    letter-spacing: 0.02em;
+  }
+  .nc-agent-avatar img,
+  .nc-agent-avatar svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .nc-agent-avatar[data-accent=green] {
+    --nc-accent: var(--nc-link);
+  }
+  .nc-agent-avatar[data-accent=cyan] {
+    --nc-accent: var(--nc-info);
+  }
+  .nc-agent-avatar[data-accent=amber] {
+    --nc-accent: var(--nc-warning-deep);
+  }
+  .nc-agent-avatar[data-accent=ink] {
+    --nc-accent: var(--nc-ink);
+  }
+  .nc-agent-avatar[data-accent=red] {
+    --nc-accent: var(--nc-error);
+  }
+}
+
+/* src/css/components/usage-meter.css */
+@layer components {
+  .nc-usage-meter {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 4px 8px;
+    border-radius: var(--nc-rounded-sm);
+    background: var(--nc-canvas);
+    color: var(--nc-body);
+    font-family:
+      "Geist Mono",
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      monospace;
+    font-size: 11px;
+    line-height: 16px;
+  }
+  .nc-usage-meter-meta {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--nc-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    white-space: nowrap;
+  }
+  .nc-usage-meter-sep {
+    color: var(--nc-line);
+  }
+  .nc-usage-meter-spacer {
+    flex: 1;
+  }
+  .nc-usage-meter-track {
+    position: relative;
+    height: 2px;
+    overflow: hidden;
+    background: var(--nc-line);
+  }
+  .nc-usage-meter-fill {
+    position: absolute;
+    inset: 0;
+    right: auto;
+    width: var(--nc-usage, 0%);
+    background: var(--nc-ink);
+    transition: width var(--nc-duration-transition) var(--nc-ease-emphasized);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .nc-usage-meter-fill {
+      transition: none;
+    }
+  }
+}
+
+/* src/css/components/run-timeline.css */
+@layer components {
+  .nc-run-timeline {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding: 0;
+    background: var(--nc-canvas);
+    color: var(--nc-ink);
+    font-family:
+      "Geist",
+      "Inter",
+      system-ui,
+      -apple-system,
+      "Segoe UI",
+      sans-serif;
+    font-size: 14px;
+    line-height: 20px;
+    --nc-run-timeline-rail: 22px;
+    --nc-run-timeline-node: 11px;
+  }
+  .nc-run-timeline::before {
+    content: "";
+    position: absolute;
+    top: 14px;
+    bottom: 14px;
+    left: var(--nc-run-timeline-rail);
+    width: var(--nc-guide);
+    transform: translateX(-50%);
+    background: var(--nc-line);
+  }
+  .nc-run-timeline-step {
+    position: relative;
+    display: flex;
+    gap: 14px;
+    align-items: flex-start;
+    padding: 8px 0;
+    animation-name: nc-msg-in;
+  }
+  .nc-run-timeline-node {
+    position: relative;
+    z-index: 1;
+    flex: 0 0 auto;
+    width: var(--nc-run-timeline-node);
+    height: var(--nc-run-timeline-node);
+    margin-top: 4px;
+    margin-left: calc(var(--nc-run-timeline-rail) - (var(--nc-run-timeline-node) / 2) - 14px - var(--nc-run-timeline-node));
+    border-radius: var(--nc-rounded-full);
+    background: var(--nc-canvas);
+    box-shadow: 0 0 0 var(--nc-guide) var(--nc-line);
+    color: var(--nc-state-ready);
+  }
+  .nc-run-timeline-node::before {
+    content: "";
+    position: absolute;
+    inset: 2px;
+    border-radius: var(--nc-rounded-full);
+    background: currentColor;
+  }
+  .nc-run-timeline-content {
+    flex: 1;
+    min-width: 0;
+    padding-left: 12px;
+    border-left: 3px solid var(--nc-line);
+  }
+  .nc-run-timeline-label {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    font-family:
+      "Geist Mono",
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      monospace;
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 16px;
+    color: var(--nc-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+  .nc-run-timeline-title {
+    font-weight: 500;
+    color: var(--nc-ink);
+  }
+  .nc-run-timeline-detail {
+    margin-top: 2px;
+    font-size: 13px;
+    line-height: 18px;
+    color: var(--nc-body);
+  }
+  .nc-run-timeline-step[data-state=ready] .nc-run-timeline-node {
+    color: var(--nc-state-ready);
+  }
+  .nc-run-timeline-step[data-state=ready] .nc-run-timeline-content {
+    border-left-color: var(--nc-state-ready);
+  }
+  .nc-run-timeline-step[data-state=running] .nc-run-timeline-node {
+    color: var(--nc-state-running);
+  }
+  .nc-run-timeline-step[data-state=running] .nc-run-timeline-content {
+    border-left-color: var(--nc-state-running);
+  }
+  .nc-run-timeline-step[data-state=review] .nc-run-timeline-node {
+    color: var(--nc-state-review);
+  }
+  .nc-run-timeline-step[data-state=review] .nc-run-timeline-content {
+    border-left-color: var(--nc-state-review);
+  }
+  .nc-run-timeline-step[data-state=blocked] .nc-run-timeline-node {
+    color: var(--nc-state-blocked);
+  }
+  .nc-run-timeline-step[data-state=blocked] .nc-run-timeline-content {
+    border-left-color: var(--nc-state-blocked);
+  }
+  .nc-run-timeline-step[data-state=complete] .nc-run-timeline-node {
+    color: var(--nc-state-complete);
+  }
+  .nc-run-timeline-step[data-state=complete] .nc-run-timeline-content {
+    border-left-color: var(--nc-state-complete);
+  }
+}
+
+/* src/css/components/image.css */
+@layer components {
+  .nc-image {
+    --nc-image-ratio: 4 / 3;
+    position: relative;
+    margin: 0;
+    display: grid;
+    grid-template-rows: auto;
+    width: 100%;
+    overflow: hidden;
+    background: var(--nc-canvas-soft);
+  }
+  .nc-image[data-frame=true] {
+    border: var(--nc-guide) solid var(--nc-line);
+  }
+  .nc-image-media {
+    display: block;
+    width: 100%;
+    height: auto;
+    aspect-ratio: var(--nc-image-ratio);
+    object-fit: cover;
+  }
+  .nc-image-tag {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    padding: 2px 6px;
+    border: var(--nc-guide) solid var(--nc-line);
+    background: var(--nc-canvas);
+    color: var(--nc-ink);
+    text-transform: uppercase;
+  }
+  .nc-image-caption {
+    margin: 0;
+    padding: 8px 12px;
+    color: var(--nc-body);
+    background: var(--nc-canvas);
+  }
+  .nc-image[data-strip=true] .nc-image-media {
+    aspect-ratio: auto;
+    height: var(--nc-h-strip);
+  }
+}
+
+/* src/css/index.css */