@nadicodeai/design-system 9.2.0 → 10.0.0

package/GLOSSARY.md

@@ -1,21 +1,21 @@
 # Design Language
 
-The shared vocabulary for NadicodeAI's reusable visual decisions and interface structures.
+The shared vocabulary for nadicode's reusable visual decisions and interface structures.
 
 ## Language
 
 ### Foundations
 
 **Foundation**:
-The visual values available to every NadicodeAI product, whether one product renders them or three: colour roles, typography, spacing, shape, material, elevation, motion, icons, and brand assets.
+The visual values available to every nadicode product, whether one product renders them or three: colour roles, typography, spacing, shape, material, elevation, motion, icons, and brand assets.
 _Avoid_: Palette, base theme
 
 **Register**:
-One product's visual rules for applying the Foundation. NadicodeAI has three Registers: website, Portal, and Nadia desktop.
+One product's visual rules for applying the Foundation. nadicode has three Registers: website, Portal, and Nadia desktop.
 _Avoid_: Theme, skin
 
 **Neutral spine**:
-The achromatic colour roles that carry grounds, chrome, hierarchy, and every control in every Register. Chromatic colour is reserved for the semantic feedback roles, the verde brand accent in its scoped duties, the chart palettes, and the Agent identity palette.
+The achromatic colour roles that carry grounds, chrome, hierarchy, and every control in every Register. Chromatic colour is reserved for the semantic feedback roles, the two greens in their scoped duties, the chart palettes, and the Agent identity palette.
 
 **Functional tier**:
 The semantic colour roles and chart colours used for interface state and data.

package/README.md

@@ -1,4 +1,4 @@
-# NadicodeAI Design System
+# nadicode Design System
 
 The `@nadicodeai/design-system` package. [`DESIGN.md`](./DESIGN.md) is the normative contract for reusable design tokens, mode behavior, CSS architecture, and generated output. The canonical human brand book lives in the monorepo at `brand/brand-book/index.html`.
 
@@ -12,7 +12,7 @@ Import the complete CSS module once:
 @import "@nadicodeai/design-system/css";
 ```
 
-That interface includes the generated tokens, mode aliases, semantic role maps, page geometry, type utilities, motion primitives, and framework-agnostic CSS components. Apply `.dark` to the document root or to a scoped static composition to select dark mode. The generation and cascade mechanics live only in [`DESIGN.md`, "CSS Architecture & Token Pipeline"](./DESIGN.md#css-architecture--token-pipeline).
+That interface includes the generated tokens, mode aliases, semantic role maps, the website's content column, type utilities, motion primitives, and framework-agnostic CSS components. Apply `.dark` to the document root or to a scoped static composition to select dark mode. The generation and cascade mechanics live only in [`DESIGN.md`, "CSS Architecture & Token Pipeline"](./DESIGN.md#css-architecture--token-pipeline).
 
 That interface also registers the brand typeface. Geist and Geist Mono (SIL Open Font License 1.1) ship with the package, and the CSS module declares their `@font-face` rules and loads the woff2 files from package paths, so no consumer supplies its own font loading. The `@font-face` shim stays exported for a consumer that wants the faces without the CSS module:
 
@@ -22,32 +22,36 @@ That interface also registers the brand typeface. Geist and Geist Mono (SIL Open
 
 Individual font files are also exposed under `@nadicodeai/design-system/assets/fonts/*` if the consumer needs to write its own `@font-face` declarations.
 
-## NadicodeAI logo assets
+## nadicode logo assets
 
-The horizontal lockup identifies the company with both the mark and the readable
-name. Use the separate mark where space is tight and the separate wordmark where
-the name must read by itself. Transparent PNG fallbacks are provided for software
-that cannot place SVG files.
+The wordmark names the company in full and is the form to reach for. The mark
+is the plain n cut from it, for placements where the name does not fit; the
+icon is that n white on the cobalto tile, for app icons, favicons and avatars.
+Transparent PNG fallbacks are provided for software that cannot place SVG files.
 
-| Treatment | Lockup | Mark | Wordmark |
-| --- | --- | --- | --- |
-| Full colour on white or a soft neutral | `assets/logo-lockup` | `assets/logo-mark` | `assets/logo-wordmark` |
-| Mono ink | `assets/logo-lockup-mono` | `assets/logo-mark-mono` | `assets/logo-wordmark-mono` |
-| Inverse on ink | `assets/logo-lockup-inverse` | `assets/logo-mark-inverse` | `assets/logo-wordmark-inverse` |
-| On verde | `assets/logo-lockup-on-verde` | `assets/logo-mark-on-verde` | `assets/logo-wordmark-on-verde` |
+| Form | On white or a soft neutral | On black or another dark ground |
+| --- | --- | --- |
+| Wordmark | `assets/logo` | `assets/logo-white` |
+| Wordmark, one ink | `assets/logo-one-ink` | `assets/logo-one-ink-white` |
+| Mark | `assets/mark` | `assets/mark-white` |
+| Icon | `assets/app-icon` | `assets/app-icon` |
+
+The one-ink files exist for embossing, stamps and one-colour print, where a
+second colour cannot be laid down. The icon carries its own field, so one file
+serves both grounds.
 
 Prefix each route with `@nadicodeai/design-system/`. Append `.png` for the
 transparent PNG fallback, for example
-`@nadicodeai/design-system/assets/logo-lockup-on-verde.png`.
+`@nadicodeai/design-system/assets/logo-white.png`.
 
 ```ts
-import logoLockupUrl from "@nadicodeai/design-system/assets/logo-lockup";
+import logoUrl from "@nadicodeai/design-system/assets/logo";
 
-document.querySelector<HTMLImageElement>("[data-nc-logo]")!.src = logoLockupUrl;
+document.querySelector<HTMLImageElement>("[data-nc-logo]")!.src = logoUrl;
 ```
 
 For direct HTML or CDN delivery, use a version-pinned file URL such as
-`https://unpkg.com/@nadicodeai/design-system@<version>/dist/assets/logo-lockup.svg`.
+`https://unpkg.com/@nadicodeai/design-system@<version>/dist/assets/logo.svg`.
 The clear-space, minimum-size, accessibility, background, and prohibited-use rules live only in
 [`DESIGN.md`, "Brand media authority"](./DESIGN.md#brand-media-authority).
 
@@ -84,7 +88,10 @@ The CSS interfaces are not for this consumer. `@nadicodeai/design-system/css` an
 
 `package.json` owns the current public export paths. [`DESIGN.md`](./DESIGN.md)
 owns what those exports mean and how the CSS cascade, modes, tokens, layout,
-components, motion, and assets behave. The runnable [`examples/`](./examples/)
+components, motion, and assets behave. The website's layout is one rule:
+three kinds of full-bleed section (white for reading, black for a scene, and
+at most one flat colour section per page), each centring its content in the
+`.nc-page` column, one spacing step apart. The runnable [`examples/`](./examples/)
 consume only those public exports and are the inspection surface. This README
 does not maintain a parallel inventory.
 
@@ -116,17 +123,15 @@ The exact layer order and ownership rules are defined in `DESIGN.md`.
     <!-- In a bundler, prefer a CSS entry: @import "@nadicodeai/design-system/css"; -->
   </head>
   <body>
-    <main class="nc-page-system">
-      <div class="nc-page-frame">
-        <section class="nc-page-row">
-          <div class="nc-row-lane nc-row-lane-active">
-            <div class="nc-artifact-surface">Inspectable agent output</div>
-          </div>
-        </section>
-      </div>
+    <main>
+      <section>
+        <div class="nc-page">
+          <div class="nc-artifact-surface">Inspectable agent output</div>
+        </div>
+      </section>
     </main>
   </body>
 </html>
 ```
 
-Use the monorepo's `brand/brand-book/` for NadicodeAI story, positioning, buyer, promise, method, use cases, technology story, trust doctrine, identity, voice, visual direction, sales behavior, language, and boundaries.
+Use the monorepo's `brand/brand-book/` for nadicode story, positioning, buyer, promise, method, use cases, technology story, trust doctrine, identity, voice, visual direction, sales behavior, language, and boundaries.

package/dist/assets/app-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024" role="img" aria-label="nadicode"><rect width="1024" height="1024" rx="230" fill="#1e3cff"/><path d="M9 150V100A41 41 0 0 1 91 100V150" transform="translate(276.48 40.96) scale(4.71)" fill="none" stroke="#ffffff" stroke-width="18"/></svg>

package/dist/assets/logo-one-ink-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 858 150" width="858" height="150" role="img" aria-label="nadicode"><g fill="none" stroke="#ffffff" stroke-width="18"><path d="M9 150V100A41 41 0 0 1 91 100V150"/><circle cx="172" cy="100" r="41"/><path d="M213 50V150"/><circle cx="294" cy="100" r="41"/><path d="M335 0V150"/><path d="M375 50V150"/><path d="M484.99 71.01A41 41 0 1 0 484.99 128.99"/><circle cx="564" cy="100" r="41"/><circle cx="686" cy="100" r="41"/><path d="M727 0V150"/><path d="M767 100H849A41 41 0 1 0 839.41 126.35"/></g><circle cx="375" cy="21" r="14" fill="#ffffff"/></svg>

package/dist/assets/logo-one-ink.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 858 150" width="858" height="150" role="img" aria-label="nadicode"><g fill="none" stroke="#111111" stroke-width="18"><path d="M9 150V100A41 41 0 0 1 91 100V150"/><circle cx="172" cy="100" r="41"/><path d="M213 50V150"/><circle cx="294" cy="100" r="41"/><path d="M335 0V150"/><path d="M375 50V150"/><path d="M484.99 71.01A41 41 0 1 0 484.99 128.99"/><circle cx="564" cy="100" r="41"/><circle cx="686" cy="100" r="41"/><path d="M727 0V150"/><path d="M767 100H849A41 41 0 1 0 839.41 126.35"/></g><circle cx="375" cy="21" r="14" fill="#111111"/></svg>

package/dist/assets/logo-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 858 150" width="858" height="150" role="img" aria-label="nadicode"><g fill="none" stroke="#ffffff" stroke-width="18"><path d="M9 150V100A41 41 0 0 1 91 100V150"/><circle cx="172" cy="100" r="41"/><path d="M213 50V150"/><circle cx="294" cy="100" r="41"/><path d="M335 0V150"/><path d="M375 50V150"/><path d="M484.99 71.01A41 41 0 1 0 484.99 128.99"/><circle cx="564" cy="100" r="41"/><circle cx="686" cy="100" r="41"/><path d="M727 0V150"/><path d="M767 100H849A41 41 0 1 0 839.41 126.35"/></g><circle cx="375" cy="21" r="14" fill="#4d6bff"/></svg>

package/dist/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 858 150" width="858" height="150" role="img" aria-label="nadicode"><g fill="none" stroke="#111111" stroke-width="18"><path d="M9 150V100A41 41 0 0 1 91 100V150"/><circle cx="172" cy="100" r="41"/><path d="M213 50V150"/><circle cx="294" cy="100" r="41"/><path d="M335 0V150"/><path d="M375 50V150"/><path d="M484.99 71.01A41 41 0 1 0 484.99 128.99"/><circle cx="564" cy="100" r="41"/><circle cx="686" cy="100" r="41"/><path d="M727 0V150"/><path d="M767 100H849A41 41 0 1 0 839.41 126.35"/></g><circle cx="375" cy="21" r="14" fill="#1e3cff"/></svg>

package/dist/assets/mark-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 50 100 100" width="100" height="100" role="img" aria-label="nadicode"><path d="M9 150V100A41 41 0 0 1 91 100V150" fill="none" stroke="#ffffff" stroke-width="18"/></svg>

package/dist/assets/mark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 50 100 100" width="100" height="100" role="img" aria-label="nadicode"><path d="M9 150V100A41 41 0 0 1 91 100V150" fill="none" stroke="#111111" stroke-width="18"/></svg>

package/dist/css/host.css

@@ -41,7 +41,6 @@
 /* src/css/tokens.generated.css */
 @layer tokens {
   :root {
-    --nc-primary: oklch(0.5075 0.1338 151.91);
     --nc-on-primary: oklch(1.0000 0.0000 0.00);
     --nc-action: oklch(0.1776 0.0000 0.00);
     --nc-action-foreground: oklch(1.0000 0.0000 0.00);
@@ -77,7 +76,6 @@
     --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-verde-vivo: oklch(0.5604 0.1485 151.68);
     --nc-selection-bg: oklch(0.1776 0.0000 0.00);
     --nc-selection-fg: oklch(0.9851 0.0000 0.00);
     --nc-navigation-selection-bg: oklch(0.9461 0.0000 0.00);
@@ -96,6 +94,7 @@
     --nc-identity-azzurro: oklch(0.5618 0.2019 258.24);
     --nc-identity-ink: oklch(0.0000 0.0000 0.00);
     --nc-identity-white: oklch(1.0000 0.0000 0.00);
+    --nc-logo-dot: oklch(0.5005 0.2804 266.17);
     --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.7638 0.1562 86.86);
@@ -121,7 +120,6 @@
     --nc-dark-line: oklch(0.2686 0.0000 0.00);
     --nc-dark-input: oklch(0.5208 0.0000 0.00);
     --nc-dark-seam: oklch(0.2178 0.0000 0.00);
-    --nc-dark-primary: oklch(0.7727 0.1753 155.96);
     --nc-dark-on-primary: oklch(0.1448 0.0000 0.00);
     --nc-dark-action: oklch(1.0000 0.0000 0.00);
     --nc-dark-action-foreground: oklch(0.1448 0.0000 0.00);
@@ -149,13 +147,13 @@
     --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-logo-dot: oklch(0.5923 0.2215 269.61);
     --nc-dark-selection-bg: oklch(0.9461 0.0000 0.00);
     --nc-dark-selection-fg: oklch(0.1448 0.0000 0.00);
     --nc-dark-navigation-selection-bg: oklch(0.2178 0.0000 0.00);
     --nc-dark-navigation-selection-fg: oklch(0.9461 0.0000 0.00);
     --nc-dark-navigation-selection-hover: oklch(0.2686 0.0000 0.00);
     --nc-dark-cross: oklch(0.4495 0.0000 0.00);
-    --nc-dark-verde-vivo: oklch(0.7868 0.1398 156.43);
     --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);
@@ -209,7 +207,7 @@
     --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-xl-letter-spacing: -2.52px;
     --nc-type-display-lg-font-family:
       Geist,
       Inter,
@@ -219,57 +217,47 @@
     --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-lg-letter-spacing: -1.5px;
     --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-size: 40px;
     --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:
+    --nc-type-display-md-line-height: 42px;
+    --nc-type-display-md-letter-spacing: -1px;
+    --nc-type-heading-lg-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:
+    --nc-type-heading-lg-font-size: 30px;
+    --nc-type-heading-lg-font-weight: 600;
+    --nc-type-heading-lg-line-height: 32px;
+    --nc-type-heading-lg-letter-spacing: 0px;
+    --nc-type-heading-md-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:
+    --nc-type-heading-md-font-size: 24px;
+    --nc-type-heading-md-font-weight: 600;
+    --nc-type-heading-md-line-height: 32px;
+    --nc-type-heading-md-letter-spacing: 0px;
+    --nc-type-heading-sm-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-heading-sm-font-size: 20px;
+    --nc-type-heading-sm-font-weight: 600;
+    --nc-type-heading-sm-line-height: 28px;
+    --nc-type-heading-sm-letter-spacing: 0px;
     --nc-type-body-lg-font-family:
       Geist,
       Inter,
@@ -290,16 +278,6 @@
     --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,
@@ -310,16 +288,6 @@
     --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,
@@ -330,58 +298,28 @@
     --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:
+    --nc-type-code-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:
+    --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-label-mono-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-type-label-mono-font-size: 12px;
+    --nc-type-label-mono-font-weight: 500;
+    --nc-type-label-mono-line-height: 16px;
+    --nc-type-label-mono-letter-spacing: 0px;
     --nc-material-scrim-opacity: 10%;
     --nc-material-glass-opacity: 76%;
     --nc-material-glass-saturation: 116%;
@@ -423,59 +361,17 @@
     --nc-duration-transition: 240ms;
     --nc-duration-drawer-swipe: 400ms;
     --nc-duration-drawer: 450ms;
-    --nc-duration-spin: 600ms;
-    --nc-duration-typing: 1s;
-    --nc-duration-pulse: 1.6s;
-    --nc-duration-shimmer: 2s;
+    --nc-duration-wait: 1.6s;
     --nc-ease-emphasized: cubic-bezier(0.3, 0.7, 0.2, 1);
     --nc-ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
     --nc-ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
     --nc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
-    --nc-section: 192px;
-    --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-content-max: 1200px;
+    --nc-gutter-mobile: 20px;
+    --nc-gutter-tablet: 40px;
+    --nc-gutter-desktop: 64px;
+    --nc-section-step-mobile: 64px;
+    --nc-section-step-desktop: 96px;
     --nc-filter-chip-gap: 6px;
     --nc-filter-chip-height: 28px;
     --nc-filter-chip-icon: 14px;
@@ -496,7 +392,6 @@
     --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);
@@ -524,13 +419,13 @@
     --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-logo-dot: var(--nc-dark-logo-dot);
     --nc-selection-bg: var(--nc-dark-selection-bg);
     --nc-selection-fg: var(--nc-dark-selection-fg);
     --nc-navigation-selection-bg: var(--nc-dark-navigation-selection-bg);
     --nc-navigation-selection-fg: var(--nc-dark-navigation-selection-fg);
     --nc-navigation-selection-hover: var(--nc-dark-navigation-selection-hover);
     --nc-cross: var(--nc-dark-cross);
-    --nc-verde-vivo: var(--nc-dark-verde-vivo);
     --nc-chart-1: var(--nc-dark-chart-1);
     --nc-chart-2: var(--nc-dark-chart-2);
     --nc-chart-3: var(--nc-dark-chart-3);
@@ -551,34 +446,34 @@
       0px 5.25px 7px 0px rgb(0% 0% 0% / 0.02),
       0px 2.79px 3.72px -2px rgb(0% 0% 0% / 0.01),
       0px 1.16px 1.5px 0px rgb(0% 0% 0% / 0.01),
-      0px 0px 0px 1px rgb(100% 100% 100% / 0.18);
+      0px 0px 0px 1px rgb(100% 100% 100% / 0.12);
     --nc-elevation-raised:
       0px 25px 50px 0px rgb(0% 0% 0% / 0.05),
       0px 12px 24px 0px rgb(0% 0% 0% / 0.04),
       0px 6px 12px 0px rgb(0% 0% 0% / 0.03),
       0px 3px 6px 0px rgb(0% 0% 0% / 0.02),
       0px 1.5px 3px 0px rgb(0% 0% 0% / 0.02),
-      0px 0px 0px 1px rgb(100% 100% 100% / 0.18);
+      0px 0px 0px 1px rgb(100% 100% 100% / 0.16);
     --nc-elevation-floating:
       0px 40px 80px 0px rgb(0% 0% 0% / 0.06),
       0px 20px 40px 0px rgb(0% 0% 0% / 0.05),
       0px 10px 20px 0px rgb(0% 0% 0% / 0.04),
       0px 5px 10px 0px rgb(0% 0% 0% / 0.03),
       0px 2px 4px 0px rgb(0% 0% 0% / 0.02),
-      0px 0px 0px 1px rgb(100% 100% 100% / 0.18);
+      0px 0px 0px 1px rgb(100% 100% 100% / 0.22);
     --nc-elevation-modal:
       0px 60px 120px 0px rgb(0% 0% 0% / 0.07),
       0px 30px 60px 0px rgb(0% 0% 0% / 0.06),
       0px 15px 30px 0px rgb(0% 0% 0% / 0.05),
       0px 7.5px 15px 0px rgb(0% 0% 0% / 0.04),
       0px 3px 6px 0px rgb(0% 0% 0% / 0.03),
-      0px 0px 0px 1px rgb(100% 100% 100% / 0.18);
+      0px 0px 0px 1px rgb(100% 100% 100% / 0.28);
   }
 }
 
 /* src/css/theme-host.generated.css */
 @layer theme {
-  @theme { --color-nc-primary: oklch(0.5075 0.1338 151.91); --color-nc-on-primary: oklch(1.0000 0.0000 0.00); --color-nc-action: oklch(0.1776 0.0000 0.00); --color-nc-action-foreground: oklch(1.0000 0.0000 0.00); --color-nc-action-hover: oklch(0.3012 0.0000 0.00); --color-nc-action-active: oklch(0.0000 0.0000 0.00); --color-nc-ink: oklch(0.1776 0.0000 0.00); --color-nc-body: oklch(0.3867 0.0000 0.00); --color-nc-muted: oklch(0.5278 0.0000 0.00); --color-nc-canvas: oklch(1.0000 0.0000 0.00); --color-nc-canvas-soft: oklch(0.9851 0.0000 0.00); --color-nc-canvas-soft-2: oklch(0.9702 0.0000 0.00); --color-nc-material-workspace: oklch(0.9761 0.0000 0.00); --color-nc-material-solid: oklch(1.0000 0.0000 0.00); --color-nc-line: oklch(0.9219 0.0000 0.00); --color-nc-input: oklch(0.5624 0.0000 0.00); --color-nc-seam: oklch(0.8699 0.0000 0.00); --color-nc-cross: oklch(0.6830 0.0000 0.00); --color-nc-focus-ring: oklch(0.1776 0.0000 0.00); --color-nc-scrim: oklch(0.1776 0.0000 0.00); --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-success-soft: oklch(0.9170 0.0519 161.77); --color-nc-success-deep: oklch(0.3852 0.0953 154.99); --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-verde-vivo: oklch(0.5604 0.1485 151.68); --color-nc-selection-bg: oklch(0.1776 0.0000 0.00); --color-nc-selection-fg: oklch(0.9851 0.0000 0.00); --color-nc-navigation-selection-bg: oklch(0.9461 0.0000 0.00); --color-nc-navigation-selection-fg: oklch(0.1776 0.0000 0.00); --color-nc-navigation-selection-hover: oklch(0.9219 0.0000 0.00); --color-nc-state-ready: oklch(0.5278 0.0000 0.00); --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-identity-verde: oklch(0.6415 0.1644 153.23); --color-nc-identity-rosso: oklch(0.5688 0.1995 26.59); --color-nc-identity-arancio: oklch(0.6824 0.2108 37.70); --color-nc-identity-giallo: oklch(0.8466 0.1678 84.63); --color-nc-identity-cobalto: oklch(0.5005 0.2804 266.17); --color-nc-identity-azzurro: oklch(0.5618 0.2019 258.24); --color-nc-identity-ink: oklch(0.0000 0.0000 0.00); --color-nc-identity-white: 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.7638 0.1562 86.86); --color-nc-chart-4: oklch(0.5688 0.1995 26.59); --color-nc-chart-5: oklch(0.6161 0.1062 208.85); --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.5278 0.0000 0.00); --color-nc-chart-div-cool: oklch(0.5923 0.2215 269.61); --color-nc-dark-canvas: oklch(0.0000 0.0000 0.00); --color-nc-dark-canvas-soft: oklch(0.1776 0.0000 0.00); --color-nc-dark-canvas-soft-2: oklch(0.2178 0.0000 0.00); --color-nc-dark-material-workspace: oklch(0.0000 0.0000 0.00); --color-nc-dark-material-solid: oklch(0.0000 0.0000 0.00); --color-nc-dark-ink: oklch(0.9461 0.0000 0.00); --color-nc-dark-body: oklch(0.8297 0.0000 0.00); --color-nc-dark-muted: oklch(0.6500 0.0000 0.00); --color-nc-dark-line: oklch(0.2686 0.0000 0.00); --color-nc-dark-input: oklch(0.5208 0.0000 0.00); --color-nc-dark-seam: oklch(0.2178 0.0000 0.00); --color-nc-dark-primary: oklch(0.7727 0.1753 155.96); --color-nc-dark-on-primary: oklch(0.1448 0.0000 0.00); --color-nc-dark-action: oklch(1.0000 0.0000 0.00); --color-nc-dark-action-foreground: oklch(0.1448 0.0000 0.00); --color-nc-dark-action-hover: oklch(0.9189 0.0000 0.00); --color-nc-dark-action-active: oklch(0.8761 0.0000 0.00); --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.9461 0.0000 0.00); --color-nc-dark-scrim: oklch(0.9461 0.0000 0.00); --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-success: oklch(0.7019 0.1753 153.20); --color-nc-dark-success-soft: oklch(0.2893 0.0697 156.32); --color-nc-dark-success-deep: oklch(0.8524 0.0996 159.83); --color-nc-dark-state-ready: oklch(0.5624 0.0000 0.00); --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.9461 0.0000 0.00); --color-nc-dark-selection-fg: oklch(0.1448 0.0000 0.00); --color-nc-dark-navigation-selection-bg: oklch(0.2178 0.0000 0.00); --color-nc-dark-navigation-selection-fg: oklch(0.9461 0.0000 0.00); --color-nc-dark-navigation-selection-hover: oklch(0.2686 0.0000 0.00); --color-nc-dark-cross: oklch(0.4495 0.0000 0.00); --color-nc-dark-verde-vivo: oklch(0.7868 0.1398 156.43); --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.9219 0.0000 0.00); --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; --ease-nc-emphasized: cubic-bezier(0.3, 0.7, 0.2, 1); --ease-nc-out-strong: cubic-bezier(0.23, 1, 0.32, 1); --ease-nc-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1); --ease-nc-drawer: cubic-bezier(0.32, 0.72, 0, 1); --outline-width-focus: var(--spacing-nadicode-focus-outline-width); --outline-offset-focus: var(--spacing-nadicode-focus-outline-offset); --opacity-scrim: var(--nc-material-scrim-opacity); --spacing-nadicode-xxs: 4px; --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-guide: 1px; --spacing-nadicode-icon-stroke: 1.5px; --spacing-nadicode-icon-stroke-sm: 1.25px; --spacing-nadicode-focus-outline-width: 2px; --spacing-nadicode-focus-outline-offset: 2px; --spacing-nadicode-control-height: 32px; --spacing-nadicode-control-padding-inline: 10px; --spacing-nadicode-touch-target: 44px; --spacing-nadicode-section: 192px; --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-gap: 6px; --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); }
+  @theme { --color-nc-on-primary: oklch(1.0000 0.0000 0.00); --color-nc-action: oklch(0.1776 0.0000 0.00); --color-nc-action-foreground: oklch(1.0000 0.0000 0.00); --color-nc-action-hover: oklch(0.3012 0.0000 0.00); --color-nc-action-active: oklch(0.0000 0.0000 0.00); --color-nc-ink: oklch(0.1776 0.0000 0.00); --color-nc-body: oklch(0.3867 0.0000 0.00); --color-nc-muted: oklch(0.5278 0.0000 0.00); --color-nc-canvas: oklch(1.0000 0.0000 0.00); --color-nc-canvas-soft: oklch(0.9851 0.0000 0.00); --color-nc-canvas-soft-2: oklch(0.9702 0.0000 0.00); --color-nc-material-workspace: oklch(0.9761 0.0000 0.00); --color-nc-material-solid: oklch(1.0000 0.0000 0.00); --color-nc-line: oklch(0.9219 0.0000 0.00); --color-nc-input: oklch(0.5624 0.0000 0.00); --color-nc-seam: oklch(0.8699 0.0000 0.00); --color-nc-cross: oklch(0.6830 0.0000 0.00); --color-nc-focus-ring: oklch(0.1776 0.0000 0.00); --color-nc-scrim: oklch(0.1776 0.0000 0.00); --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-success-soft: oklch(0.9170 0.0519 161.77); --color-nc-success-deep: oklch(0.3852 0.0953 154.99); --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-selection-bg: oklch(0.1776 0.0000 0.00); --color-nc-selection-fg: oklch(0.9851 0.0000 0.00); --color-nc-navigation-selection-bg: oklch(0.9461 0.0000 0.00); --color-nc-navigation-selection-fg: oklch(0.1776 0.0000 0.00); --color-nc-navigation-selection-hover: oklch(0.9219 0.0000 0.00); --color-nc-state-ready: oklch(0.5278 0.0000 0.00); --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-identity-verde: oklch(0.6415 0.1644 153.23); --color-nc-identity-rosso: oklch(0.5688 0.1995 26.59); --color-nc-identity-arancio: oklch(0.6824 0.2108 37.70); --color-nc-identity-giallo: oklch(0.8466 0.1678 84.63); --color-nc-identity-cobalto: oklch(0.5005 0.2804 266.17); --color-nc-identity-azzurro: oklch(0.5618 0.2019 258.24); --color-nc-identity-ink: oklch(0.0000 0.0000 0.00); --color-nc-identity-white: oklch(1.0000 0.0000 0.00); --color-nc-logo-dot: oklch(0.5005 0.2804 266.17); --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.7638 0.1562 86.86); --color-nc-chart-4: oklch(0.5688 0.1995 26.59); --color-nc-chart-5: oklch(0.6161 0.1062 208.85); --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.5278 0.0000 0.00); --color-nc-chart-div-cool: oklch(0.5923 0.2215 269.61); --color-nc-dark-canvas: oklch(0.0000 0.0000 0.00); --color-nc-dark-canvas-soft: oklch(0.1776 0.0000 0.00); --color-nc-dark-canvas-soft-2: oklch(0.2178 0.0000 0.00); --color-nc-dark-material-workspace: oklch(0.0000 0.0000 0.00); --color-nc-dark-material-solid: oklch(0.0000 0.0000 0.00); --color-nc-dark-ink: oklch(0.9461 0.0000 0.00); --color-nc-dark-body: oklch(0.8297 0.0000 0.00); --color-nc-dark-muted: oklch(0.6500 0.0000 0.00); --color-nc-dark-line: oklch(0.2686 0.0000 0.00); --color-nc-dark-input: oklch(0.5208 0.0000 0.00); --color-nc-dark-seam: oklch(0.2178 0.0000 0.00); --color-nc-dark-on-primary: oklch(0.1448 0.0000 0.00); --color-nc-dark-action: oklch(1.0000 0.0000 0.00); --color-nc-dark-action-foreground: oklch(0.1448 0.0000 0.00); --color-nc-dark-action-hover: oklch(0.9189 0.0000 0.00); --color-nc-dark-action-active: oklch(0.8761 0.0000 0.00); --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.9461 0.0000 0.00); --color-nc-dark-scrim: oklch(0.9461 0.0000 0.00); --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-success: oklch(0.7019 0.1753 153.20); --color-nc-dark-success-soft: oklch(0.2893 0.0697 156.32); --color-nc-dark-success-deep: oklch(0.8524 0.0996 159.83); --color-nc-dark-state-ready: oklch(0.5624 0.0000 0.00); --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-logo-dot: oklch(0.5923 0.2215 269.61); --color-nc-dark-selection-bg: oklch(0.9461 0.0000 0.00); --color-nc-dark-selection-fg: oklch(0.1448 0.0000 0.00); --color-nc-dark-navigation-selection-bg: oklch(0.2178 0.0000 0.00); --color-nc-dark-navigation-selection-fg: oklch(0.9461 0.0000 0.00); --color-nc-dark-navigation-selection-hover: oklch(0.2686 0.0000 0.00); --color-nc-dark-cross: oklch(0.4495 0.0000 0.00); --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.9219 0.0000 0.00); --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-heading-lg: Geist, Inter, system-ui, -apple-system, sans-serif; --font-heading-md: Geist, Inter, system-ui, -apple-system, sans-serif; --font-heading-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-sm: Geist, Inter, system-ui, -apple-system, sans-serif; --font-caption: Geist, Inter, system-ui, -apple-system, sans-serif; --font-code: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --font-label-mono: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --text-display-xl: 72px; --text-display-xl--line-height: 74px; --leading-display-xl: 74px; --text-display-xl--letter-spacing: -2.52px; --tracking-display-xl: -2.52px; --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: -1.5px; --tracking-display-lg: -1.5px; --text-display-lg--font-weight: 600; --font-weight-display-lg: 600; --text-display-md: 40px; --text-display-md--line-height: 42px; --leading-display-md: 42px; --text-display-md--letter-spacing: -1px; --tracking-display-md: -1px; --text-display-md--font-weight: 600; --font-weight-display-md: 600; --text-heading-lg: 30px; --text-heading-lg--line-height: 32px; --leading-heading-lg: 32px; --text-heading-lg--letter-spacing: 0px; --tracking-heading-lg: 0px; --text-heading-lg--font-weight: 600; --font-weight-heading-lg: 600; --text-heading-md: 24px; --text-heading-md--line-height: 32px; --leading-heading-md: 32px; --text-heading-md--letter-spacing: 0px; --tracking-heading-md: 0px; --text-heading-md--font-weight: 600; --font-weight-heading-md: 600; --text-heading-sm: 20px; --text-heading-sm--line-height: 28px; --leading-heading-sm: 28px; --text-heading-sm--letter-spacing: 0px; --tracking-heading-sm: 0px; --text-heading-sm--font-weight: 600; --font-weight-heading-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-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-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-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-label-mono: 12px; --text-label-mono--line-height: 16px; --leading-label-mono: 16px; --text-label-mono--letter-spacing: 0px; --tracking-label-mono: 0px; --text-label-mono--font-weight: 500; --font-weight-label-mono: 500; --ease-nc-emphasized: cubic-bezier(0.3, 0.7, 0.2, 1); --ease-nc-out-strong: cubic-bezier(0.23, 1, 0.32, 1); --ease-nc-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1); --ease-nc-drawer: cubic-bezier(0.32, 0.72, 0, 1); --outline-width-focus: var(--spacing-nadicode-focus-outline-width); --outline-offset-focus: var(--spacing-nadicode-focus-outline-offset); --opacity-scrim: var(--nc-material-scrim-opacity); --spacing-nadicode-xxs: 4px; --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-guide: 1px; --spacing-nadicode-icon-stroke: 1.5px; --spacing-nadicode-icon-stroke-sm: 1.25px; --spacing-nadicode-focus-outline-width: 2px; --spacing-nadicode-focus-outline-offset: 2px; --spacing-nadicode-control-height: 32px; --spacing-nadicode-control-padding-inline: 10px; --spacing-nadicode-touch-target: 44px; --spacing-nadicode-content-max: 1200px; --spacing-nadicode-gutter-mobile: 20px; --spacing-nadicode-gutter-tablet: 40px; --spacing-nadicode-gutter-desktop: 64px; --spacing-nadicode-section-step-mobile: 64px; --spacing-nadicode-section-step-desktop: 96px; --spacing-nadicode-filter-chip-gap: 6px; --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/host.css */