@nadicodeai/design-system 12.1.62 → 12.1.63

package/DESIGN.md

@@ -70,15 +70,15 @@ colors:
   dark-canvas-soft-2: "#1a1a1a"
   dark-material-workspace: "#000000"
   dark-material-solid: "#000000"
-  dark-material-resting: "#0c0c0c"
-  dark-material-raised: "#121212"
-  dark-material-floating: "#181818"
-  dark-material-modal: "#1c1c1c"
+  dark-material-resting: "#121212"
+  dark-material-raised: "#1a1a1a"
+  dark-material-floating: "#262626"
+  dark-material-modal: "#2a2a2a"
   dark-ink: "#ededed"
   dark-body: "#c7c7c7"
-  dark-muted: "#8f8f8f"
+  dark-muted: "#9e9e9e"
   dark-line: "#262626"
-  dark-input: "#696969"
+  dark-input: "#747474"
   dark-on-primary: "#0a0a0a"
   dark-action: "#ededed"
   dark-action-foreground: "#0a0a0a"
@@ -194,12 +194,12 @@ typography:
 rounded:
   none: 0px
   xs: 2px
-  sm: 4px
-  md: 6px
-  lg: 8px
-  xl: 10px
-  2xl: 12px
-  3xl: 16px
+  sm: 6px
+  md: 8px
+  lg: 12px
+  xl: 16px
+  2xl: 20px
+  3xl: 24px
   full: 9999px
 
 spacing:
@@ -389,22 +389,26 @@ A product page is one of five compositions, each answering one question first:
 | Composition | First answer | Structure |
 | --- | --- | --- |
 | Overview | What needs attention? | Scoped facts, the exceptions that matter, links to their owners. Never a stack of previews of every section. |
-| Collection | Which object? | Search and filters, compact identity rows, comparable facts, trailing actions. One row is one hover and one open target. |
-| Object | What is this, where does it belong, what can I do? | The parent in the breadcrumb, local tabs, identity and grouped facts, the primary action beside its section. |
+| Collection | Which object? | The page header (its title with the page's actions on the title's row, and nothing under it), then one toolbar (filters, search, sort), one line per record with its identity and a few comparable facts, and the row's menu. One row is one hover and one open target. |
+| Object | What is this, where does it belong, what can I do? | The parent in the breadcrumb and its sections (tabs, or the sidebar for an object worked inside); then the object's header on the page ground, never in a card: its picture, its name at `{typography.heading-md}`, one line saying what it is, a row of key facts as label and value, and at the trailing edge the page's one primary action and the three dots; then grouped facts and settings sections as the cards below. An Agent is the exception: her first section, Profile, opens with her card, the same in every product (`AgentProfileCard`): on the left her orb at 64 px, her name with a ghost pencil that opens the edit drawer, her description and her facts (status, last activity, the template she was made from); on the right her model, drawn with its maker's mark, her reasoning and, where the product holds them, her permissions, saved from the card's footer; her instructions follow as the next card. The page's commands sit in the window's three dots where the product has one, and otherwise at the end of her name's row. |
 | Configuration | What can I change? | A centred reading column of titled sections, help beside each field, a local save and recovery. |
 | Library | What reusable thing can I use? | Kind, text identity, description, source and revision; detail shows content and requirements. |
 
-Every setting is that Configuration composition, whether it belongs to the person, to the platform or to one record's Settings tab, so the column keeps its width and its field layout from one entry of a settings menu to the next, and each section saves its own fields from its own footer. A table that reaches a reading column keeps the identity and the action beside it and lets its remaining columns fall to the row's supporting detail, rather than widening the page or scrolling sideways.
+Every setting is that Configuration composition, whether it belongs to the person, to the platform or to one record's Settings tab, so the column keeps its width and its field layout from one entry of a settings menu to the next, and each section saves its own fields from its own footer ("Cards and sections"). A table that reaches a reading column keeps the identity and the action beside it and lets its remaining columns fall to the row's supporting detail, rather than widening the page or scrolling sideways.
 
-A section earns a card when it owns a decision, not for every label and value. A row links to its object; overflow menus hold occasional commands, and a frequent next action stays visible. A summary on an overview opens the same owner as its tab. Supporting detail collapses only behind a summary that keeps a count, state or consequence.
+Every page in every product opens with the same header (`PageHeader`). The top bar holds only the path to the page: its sidebar group or its parents, ending at the destination or the object, such as "Business › Agents" or "Beta Studio › Beta Desk", and never the page's own title. The content then starts with the title at `{typography.heading-md}`, on the left, and on the same row at the trailing edge the page's actions: the page's three dots when it has two further commands or more, then at most one `outline` button, then the one `default` primary, rightmost. `PageActions` is their only owner: it takes a `primary`, a `secondary` and a `menu` of two commands or more, and draws the order and the variants, so a page never passes buttons of its own. Nothing sits under the title: no line introduces, explains or counts the page, and the toolbar, the list or the page follows the title row directly. Inside an object worked from a section sidebar, the title is the section's name ("Apps"); a page that opens with the object's own header or card, such as an Agent's Profile (`AgentProfileCard`), has it as its title and no title row above it.
+
+A collection is named once, by the page's title, and the collection's card never adds a header that only describes it. A populated collection carries no picture; a picture belongs only to a collection's first use ("Elevation & Depth"). The table's footer holds only a count or the paging, never a help sentence: guidance a step needs lives in that step.
+
+A section earns a card when it owns a decision, not for every label and value. A row links to its object and keeps its commands in its menu ("Menus and commands"). A summary on an overview opens the same owner as its tab. Supporting detail collapses only behind a summary that keeps a count, state or consequence.
 
 ## Elevation & Depth
 
 Product UI sits on one continuous workspace ground, `{colors.material-workspace}` (true black in dark), and solid objects rise above it at four heights: `nc-elevation-resting` for resting content, then `nc-elevation-raised`, `nc-elevation-floating` and `nc-elevation-modal` when an object is physically raised, floating or modal. Physical role chooses the height, never the importance of the content. Each recipe carries its own edge, so an elevated surface never adds a border, a ring or a second shadow.
 
-**In light, shadow carries height.** Every surface is white. Each recipe is a 1 px black edge at 8%, a tight contact shadow where the object meets the surface below, and an ambient shadow pushed down with negative spread so it stays under the object. The ambient shadow grows with the height, from 8 px of blur at resting to 128 px at modal.
+**In light, shadow carries height.** Every surface is white. Each recipe is a 1 px black edge at 8%, a neutral contact shadow where the object meets the surface below, and an ambient shadow tinted navy and pushed down with negative spread so it stays under the object. The ambient shadow grows with the height: one layer of 24 px blur at 30% for resting, then two layers from raised up, ending at 192 px of blur at 55% for modal.
 
-**In dark, tone carries height.** Shadows cannot show on true black, so each height's surface is one fixed step lighter than the page: resting `{colors.dark-material-resting}`, raised `{colors.dark-material-raised}`, floating `{colors.dark-material-floating}`, modal `{colors.dark-material-modal}`. The steps are equal-channel greys with nothing between or above them, so dark surfaces still read as black. `{colors.dark-ink}` keeps at least 14.5:1 and `{colors.dark-muted}` at least 5.2:1 on the lightest step. Each dark recipe adds an inset white hairline and a 1 px top highlight that strengthen with the height, and an outer black edge that separates a surface from a lighter one below it. A component names only its height and its role (`bg-card`, `bg-popover`); `@nadicodeai/ui/globals.css` sets those roles to the height's tone on the element.
+**In dark, tone carries height.** Shadows cannot show on true black, so each height's surface is one fixed step lighter than the page: resting `{colors.dark-material-resting}`, raised `{colors.dark-material-raised}`, floating `{colors.dark-material-floating}`, modal `{colors.dark-material-modal}`. The steps are equal-channel greys with nothing between or above them, far enough apart that each height reads at a glance on the black page. `{colors.dark-ink}` keeps at least 12.2:1 and `{colors.dark-muted}` at least 5.3:1 on the lightest step. Each dark recipe adds an inset white hairline and a 1 px top highlight that strengthen with the height, and an outer black edge that separates a surface from a lighter one below it. A component names only its height and its role (`bg-card`, `bg-popover`); `@nadicodeai/ui/globals.css` sets those roles to the height's tone on the element.
 
 | Surface | Fill | Height | Use |
 | --- | --- | --- | --- |
@@ -418,7 +422,7 @@ Product UI sits on one continuous workspace ground, `{colors.material-workspace}
 
 **Glass** is a material, not a height: the floating fill at 60% over a 20 px backdrop blur at 180% saturation, so colour behind it comes through saturated rather than grey. Its edge is the floating recipe, whose inset top highlight and inner hairline show once the fill turns translucent, and a 5% monochrome grain keeps the blurred colour from banding. Glass may go where something behind it moves or carries colour:
 
-- floating chrome over our own content: popovers, selects, comboboxes, the menubar, navigation popups, the command palette and control bars;
+- floating chrome over our own content: popovers, selects, comboboxes, the menubar, navigation popups, the command palette and control bars, including a collection's toolbar over the rows that scroll under it (on a page whose rows never pass under it, the toolbar is the plain row, with no fill or edge of its own) and Nadia's chat bar over her conversation;
 - the website header as the page scrolls under it;
 - a small floating card over a colour ground or moving Agents.
 
@@ -426,13 +430,20 @@ Content stays solid: cards, KPIs, tables, chat, forms, and dialog, sheet and dra
 
 **Product views on the website** are the product itself, built from the real components with example data that is labelled as such; never a screenshot, a device mockup or an invented interface. A product window takes the raised height on its ground; a card that overlaps it floats; its chrome may be glass over a colour or black ground; in a black section it renders in dark mode.
 
-Absence follows its container. A page or region with nothing in it is an opaque region with a dashed boundary; an empty state inside a card is unframed, because the card already owns the edge. Every absence leads with its icon tile, in every product, and a read that failed where content would be takes the same shape with the warning mark and its retry. A persistent notice sits in the section it concerns, action feedback is a toast, and field validation stays with its field.
+Absence follows its container. A page or region with nothing in it is an opaque region with a dashed boundary; an empty state inside a card is unframed, because the card already owns the edge. `EmptyState` (`@nadicodeai/ui/components/empty-state`) is the only owner of an absence: nothing else draws one, and its `scope` (`page`, `region` or `card`) sets that frame. A collection's `DataTable` takes the same props as `empty`. Its kind decides everything it shows:
+
+- `firstUse`: a collection with no records yet whose kind has a picture in the approved set in `@nadicodeai/design-system/assets/empty`, whoever the viewer is and however the collection fills. The picture, a title and one line saying what will live there, and, when this viewer can add the first record, the action that adds it.
+- `nothingYet`: a list whose kind has no picture of its own, such as invoices or history, or a table inside a page. One line, with no picture and nothing to press.
+- `noResults`: a search or filter that matches nothing. One line and Clear filters (or Clear search), with no picture.
+- `failed`: a read that failed where content would be. The warning mark, the message's title and body, and its controls, Retry among them.
+
+A persistent notice sits in the section it concerns, action feedback is a toast, and field validation stays with its field. A notice, a failed read, a confirmation's error and a toast each show a message its product's catalogue worded, never a sentence written where it shows: `MessageNotice` under the control whose write failed (`action`) or atop the section it concerns (`section`), `EmptyState` `failed`, `ConfirmDialog`'s error and the toast. Each wraps a long word, never truncates, and shows a body only when it says more than the title ([the decision](../../docs/adr/2026-10-08-every-message-a-customer-reads-is-a-code-its-products-catalogue-words.md)).
 
 Modal overlays use the scrim with no blur. Focus is not elevation: it is always the focus outline.
 
 ## Shapes
 
-Every surface and control takes `{rounded.md}` (6 px): cards, tables, menus, popovers, dialogs, sheets, tooltips, toasts, buttons, inputs, chips and badges. A surface never earns a larger corner by sitting higher. Full-bleed sections take `{rounded.none}`. `{rounded.full}` is for things that are circles by nature: avatars, switch and radio marks, slider thumbs, status dots. The other radii are for inner marks and geometry a component owns, such as a progress track.
+A corner follows what the thing is, on one scale: buttons, inputs, badges, tabs, menu rows and app-mark tiles take `{rounded.md}` (8 px); cards, tables, menus, popovers, dialogs, sheets, tooltips and toasts take `{rounded.lg}` (12 px), and so does a drawer on each edge not flush with the window; a collection's glass toolbar takes `{rounded.xl}` (16 px); a conversation bubble takes `{rounded.2xl}` (20 px); Nadia's chat bar takes `{rounded.3xl}` (24 px). A checkbox mark is a square at `{rounded.sm}` (6 px), because `{rounded.md}` on its 16 px mark would draw a circle and read as a radio. A surface never earns a larger corner by sitting higher. A corner nested inside another takes the outer radius minus the gap between them. Full-bleed sections take `{rounded.none}`. `{rounded.full}` is for avatars, switch and radio marks, slider thumbs, filter chips and tags. The other radii are for inner marks and geometry a component owns, such as a progress track.
 
 ## Motion
 
@@ -460,24 +471,27 @@ Every product builds from `@nadicodeai/ui`: stock shadcn components on Base UI,
 
 ### Controls
 
-- **Buttons.** Every button is `{spacing.control-height}` high with a `{typography.body-sm}` label at 500 and `{rounded.md}` corners ("Layout" says where the smaller sizes may go). `default` is the action (ink, white label; `{colors.dark-action}` with a `{colors.dark-action-foreground}` label in dark); `outline` and `secondary` are the quieter steps, edged with the `{colors.line}` hairline; `ghost` has no edge; `destructive` is the error pair; `link` is inline. On a colour or black ground a control takes a variant whose label clears AA there: `brandSolid` (white, ink label) or `brandGhost` (white label, no fill) on cobalto, rosso and black, and the default ink button on verde, arancio and giallo.
+- **Buttons.** Every button is `{spacing.control-height}` high with a `{typography.body-sm}` label at 500 and `{rounded.md}` corners ("Layout" says where the smaller sizes may go). `default` is the action (ink, white label; `{colors.dark-action}` with a `{colors.dark-action-foreground}` label in dark); `outline` and `secondary` are the quieter steps, edged with the `{colors.line}` hairline; `ghost` has no edge and is only for an icon-only button (the three dots, close, collapse), never a text button in a list; `destructive` is the error pair; `link` is inline. On a colour or black ground a control takes a variant whose label clears AA there: `brandSolid` (white, ink label) or `brandGhost` (white label, no fill) on cobalto, rosso and black, and the default ink button on verde, arancio and giallo.
+- **Dialog footers.** A dialog's actions sit at the footer's trailing edge, the primary last. A choice to stop being asked is a checkbox at the footer's leading edge, remembered by whichever action is taken, never a third button.
 - **Tabs** switch between one object's views. They are pills in one row directly under the top bar: `{spacing.control-height}` high, a `{typography.body-sm}` label at 500, `{spacing.sm}` inline padding and `{rounded.md}` corners. The current tab is filled with the `selection` role (`{colors.navigation-selection-bg}` with `{colors.navigation-selection-fg}`, `{colors.dark-navigation-selection-bg}` in dark); the others have no fill and `{colors.muted}` text, which turns ink on hover. A tab that opens a URL is a link in `TabsNav` with the same look; the `line` variant is for tabs inside a panel.
 - **Links** read as text. A link inside a sentence, or offered alone as a section's way on, is `{colors.link}` and underlined at rest; a link that is itself the value, such as a record's name or a fact, keeps the text's colour and underlines on hover; a secondary way out beside the content, such as a card header's "see everything" or a return link, is `{colors.muted}` and turns ink with its underline on hover. The underline sits 4 px under the text.
 - **Fields** keep the `{colors.input}` edge, `{rounded.md}`, no shadow and at least `{spacing.control-height}`. Help sits beside its field, and validation stays with it.
 - **Focus** is drawn once, by the base layer, on every `:focus-visible` element. A component never repaints it; it may move it to a proxy that stands for the focused element, as a field group does for its input.
-- Enabled buttons show a pointer; a disabled control advertises nothing. On coarse or non-hover input every target is at least `{spacing.touch-target}`, while a checkbox or radio mark stays compact and its label supplies the target.
+- Enabled buttons show a pointer; a disabled control advertises nothing. On coarse or non-hover input every target is at least `{spacing.touch-target}`, while a checkbox or radio mark stays compact and its label supplies the target. An unchecked checkbox or radio mark is its `{colors.input}` edge with no fill of its own, so it shows the surface it sits on; checked, it fills with the action pair.
 
 ### Cards and sections
 
-`Card` is the product's container, at the resting height by default ("Elevation & Depth"). A row of cards is a `CardRow`: siblings share one height, and the row collapses to one column below its breakpoint. A card or settings section is composed around a real task, collection or form; its header names the content and may explain scope or consequence, and it is never a card holding only an introduction. A settings section owns its heading, a one-line description of what the setting changes, its fields and its local save. Its footer is a strip one tone off the card body inside the card's edge, the `recessed` role behind a `{colors.line}` seam: `{colors.canvas-soft}` below the white card in light, and `{colors.dark-material-raised}` one step above the resting tone in dark, where only the page sits below it: an optional hint on the left, such as the plan a feature needs or a link to learn more, and the section's action on the right; a facts section shows labelled facts as plain pairs, the label above its value, in two equal columns, stacked on compact screens, with every label kept in place when a value is missing; a fact never gets a box of its own inside the card. A KPI card is one figure: label, value, the change as a badge in the top right, and a footer with the comparison.
+`Card` is the product's container, at the resting height by default ("Elevation & Depth"). A row of cards is a `CardRow`: siblings share one height, and the row collapses to one column below its breakpoint. A card or settings section is composed around a real task, collection or form; its header names the content and may explain scope or consequence, and it is never a card holding only an introduction. A settings section owns its heading, a one-line description of what the setting changes, its fields and its local save. On a settings page each card saves its own fields with its own Save in its footer, always visible and disabled until something in that card changes; nothing on a settings page applies on change. Only the preferences in the account menu, Theme and Language, apply at once. Its footer is a strip one tone off the card body inside the card's edge, the `recessed` role behind a `{colors.line}` seam: `{colors.canvas-soft}` below the white card in light, and `{colors.dark-material-raised}` one step above the resting tone in dark, where only the page sits below it: an optional hint on the left, such as the plan a feature needs or a link to learn more, and the section's action on the right; a facts section shows labelled facts as plain pairs, the label above its value, in two equal columns, stacked on compact screens, with every label kept in place when a value is missing; a fact never gets a box of its own inside the card. A KPI card is one figure: label, value, the change as a badge in the top right, and a footer with the comparison.
 
 ### Menus and commands
 
-A record's actions sit behind one three-dot trigger, a `{spacing.control-height}` ghost icon button that opens an end-aligned menu. In a collection every row carries that one trigger for its occasional commands, renaming and disconnecting included; a row shows a visible button only for its one frequent next action. Menu rows put the label first and a decorative icon at the trailing edge. A collection's filters are chips, an Add filter button and one outline chip per active filter with its own remove control, never a dropdown above the table. The scope a page works in, such as the company or the account it reports on, is a scope switcher: a ghost trigger reading the current name and ⇅ that opens a popover with a Find search, the choices with the current one checked, and a Create row at the bottom when the scope can be created there. The account menu names who is signed in, carries one gear to the account section, and holds the Theme and Language choices as compact inline rows. The command palette is glass and fills its dialog.
+A record's actions sit behind one three-dot trigger, a `{spacing.control-height}` ghost icon button that opens an end-aligned menu. In a collection every row's commands live in that menu, enabling, disabling, editing, pairing again and removing included, as plain text commands in task order: Edit, then the record's own commands, then the views that read it; a command that cannot run now stays in place, greyed, with its reason; the destructive command comes last, in the error colour, after a separator. A row shows no other text button, with one exception: a row whose main job is to start or open something it is not doing yet shows that one outline button ("Connect", "Connect again", "Manage"), and a row that has any other command keeps its three dots after that button. Menu rows put the label first and a decorative icon at the trailing edge.
+
+Every collection has the same toolbar: Add filter when the collection has facets, the search filling the row, then sort; the page's actions are never in it, they sit on the title's row ("Page compositions"). Creating a record (New or Add) is exactly one `default` button there; it opens a drawer from the right with the "Add …" title and a close control at the top, the fields in its body and the save as the primary button in its footer, and never an inline form on the page. Editing a record and connecting one (an app, a channel, a server) open the same drawer, from the record's Edit or Connect; a centred dialog only confirms a consequence: delete, revoke, sign out. One component draws that drawer in every product: `FormDrawer` (`@nadicodeai/ui/components/form-drawer`). A page has at most one other visible action, an `outline` button left of the create button; anything more goes in the page's three dots. A search box never stands alone in a box of its own. A collection's filters are chips, never a dropdown above the table: an Add filter button, a dashed chip for each suggested filter that applies in one click, and one outline chip per active filter with its own remove control. A sort control, an outline button naming the current order, sits at the toolbar's trailing edge. The scope a page works in, such as the company or the account it reports on, is a scope switcher: a ghost trigger reading the current name and ⇅ that opens a popover with a Find search, the choices with the current one checked, and a Create row at the bottom when the scope can be created there. The account menu names who is signed in, carries one gear to the account section, and holds the Theme and Language choices as compact inline rows. The command palette is glass and fills its dialog.
 
 ### Tables and missing values
 
-A table is native table structure at one density: 36 px header rows and 40 px body rows. It inherits its enclosing surface, whose Card owns the outer edge; the header and every record except the last end with a quiet 1 px `border` divider. A body row takes the full `accent` fill on hover, on keyboard focus within it and while its menu is open; a selected row takes `muted`; headers and footers never highlight. A collection fits its container without sideways scrolling: identity and actions keep their columns, and supporting facts move into a detail row inside the same record before the table gets cramped. The identity column claims up to a third of the table, gives it back down to a floor, and holds its name on one line: a long name ends in an ellipsis and is whole in its title, as a dashboard row does. A fact holds one line at its own width; a column of words, such as a summary or a sentence, wraps between them above a floor of its own; in the compact layout every cell but the identity wraps between words. Text anywhere in the product breaks between words, and inside a word only when that word alone cannot fit a line; a machine string such as a hash or a key may break at any character.
+A table is native table structure at one density: 48 px body rows. A collection row is one line: the record's identity and at most about five facts, and anything more lives on the record's page. Rows explain themselves by their cells (an identity with its orb or mark, a status badge, a tag, a relative time), so a collection's column header row is kept for screen readers only. A table whose columns are figures a reader cannot tell apart without their names, such as a statement or an analytics comparison, opts in to a visible header row of 36 px. The table inherits its enclosing surface, whose Card owns the outer edge; a visible header and every record except the last end with a quiet 1 px `border` divider. A body row takes the full `accent` fill on hover, on keyboard focus within it and while its menu is open; a selected row takes `muted`; headers and footers never highlight. A collection fits its container without sideways scrolling: identity and actions keep their columns, and supporting facts move into a detail row inside the same record before the table gets cramped. The identity column claims up to a third of the table, gives it back down to a floor, and holds its name on one line: a long name ends in an ellipsis and is whole in its title, as a dashboard row does. A fact holds one line at its own width; a column of words, such as a summary or a sentence, wraps between them above a floor of its own; in the compact layout every cell but the identity wraps between words. Text anywhere in the product breaks between words, and inside a word only when that word alone cannot fit a line; a machine string such as a hash or a key may break at any character. One categorical fact in a row, such as an installation or a partner, is a `Tag`: a 24 px pill with its mark, dashed when the fact states an absence. An app in a row is its brand mark in the 28 px tile.
 
 An unknown or not-applicable value in a table, a comparison list or a set of facts is a muted `—` with screen-reader text, in the same slot as a present value; zero stays zero. An absent report is not `None`: `None` is only for a complete report that found nothing. A stale value keeps its last reading with a short `Stale` qualifier. Loading, failure, missing permission and actionable setup each keep their own visible state and never turn into a dash. Essential reasons and actions never live only in a hover tooltip.
 
@@ -493,7 +507,7 @@ A status is one Badge: a mark and a word in one of five tones, so it reads witho
 | Amber | Waiting on a person's decision | `{colors.warning-soft}` / `{colors.warning-deep}` |
 | Blue | A step in motion | `{colors.info-soft}` / `{colors.info-deep}` |
 
-Each app keeps its whole status-to-tone map in one module; nothing else chooses a status colour. A status never moves.
+Both products draw every status with the one `StatusBadge` in `@nadicodeai/ui`, which owns the tones and their marks; each app keeps only its value-to-tone map in one module, and nothing else chooses a status colour. A status never moves.
 
 ### System activity
 
@@ -519,7 +533,7 @@ Two registers share that composition:
 - **An absence** is an address or a record that is not there. Its picture and label are the joke of the missing address. Nothing went wrong, so nothing takes a feedback role, no glyph stands in for the failure and no code is printed.
 - **A fault** is a request the product stopped. Its picture and label are calm and never a joke about lost work. Below the actions stands the evidence: the diagnostic code, the word that names it and one line saying what to do with it. The error pair marks the eyebrow.
 
-A failure inside a product's own chrome takes no picture, because the chrome already frames the page: it keeps the words alone. Identity hue reaches a product failure surface only through the picture. The words never apologize and never name the mechanism ("Product messages" in `product-design`). On the website a failure surface is an ordinary full-bleed section and takes a section ground like any other.
+An absence inside a product's own chrome, such as an address or a record the Portal cannot open, keeps its picture and label, centred in the content region with the chrome around it. A fault inside the chrome keeps the words alone. Identity hue reaches a product failure surface only through the picture. The words never apologize and never name the mechanism ("Product messages" in `product-design`). On the website a failure surface is an ordinary full-bleed section and takes a section ground like any other.
 
 ### Agent orbs
 
@@ -595,6 +609,7 @@ The clear space is one stroke width of the rendered logo on every side. The mini
 - **Website.** The page grammar is "The website column": full-bleed sections on white, soft, black and colour grounds, alternating, with product views floating on them. Its cards are outlined; its product views take their real heights.
 - **Portal.** A product shell on the workspace ground, built from the page compositions and the package components, with `globals.css` giving every elevated surface its tone.
 - **Nadia.** The desktop runs inside Hermes's shell, which owns Tailwind and its own surface layering. Nadia's theme paints Hermes's roles with the shared `semantic` roles and core radii, and imports `@nadicodeai/ui/components.css` with the design system's host stylesheet, so the package components render with the same recipes and glass. The window follows the operating system's material where the system composites it. Hermes answers reduced motion by cutting every transition and animation; Nadia's stylesheet gives her own parts, the package overlays, the entry screen and the waiting line, the reduced-motion policy in "Motion" back.
+  Her conversation is one centred column of `56rem` holding her replies, the person's messages and the chat bar: her reply is plain text across the column, only the person's message is a bubble, on the `raised` step at the column's trailing edge, and the chat bar floats over the messages as the lightest step, in glass. The selected Agent in her list carries no fill.
 - **Alveare.** The desktop keeps Buzz's components and layout, styled through an adapter as Nadia styles Hermes: Buzz's colour roles read the shared `semantic` roles, every text takes a type role, and Buzz's shared components take the package's geometry, states, focus and motion, over the design system's host stylesheet and `@nadicodeai/ui/components.css`.
 
 ## Do's and Don'ts
@@ -604,7 +619,7 @@ The clear space is one stroke width of the rendered logo on every side. The mini
 - Do choose a surface's height by its physical role, and let shadow show it in light and tone in dark. Don't add a border, ring or second shadow to an elevated surface.
 - Do put glass on floating chrome over colour or motion. Don't make content glass, or put glass over a plain ground.
 - Do show the product with its real components. Don't use screenshots, device frames or invented interfaces.
-- Do round every surface and control at `{rounded.md}`. Don't give a higher surface a bigger corner.
+- Do give each thing the corner its role takes on the scale ("Shapes"). Don't give a higher surface a bigger corner.
 - Do give every line one owner, and draw focus only with the focus outline.
 - Do say a status with a Badge tone, a mark and a word. Don't use colour alone or a bare dot.
 - Do open a failure page with one whole cut-out whose idea says what happened, labelled like a work in a museum, above the words on one centre line, with the recovery action leading and the diagnostic code only for a request that stopped. Don't apologise, don't crop the picture, don't joke about lost work, and don't put an orb on a failure page.
@@ -630,16 +645,16 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
       "light": {
         "resting": {
           "$value": [
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":1,"unit":"px"},"blur":{"value":2,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.05}},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":2,"unit":"px"},"blur":{"value":8,"unit":"px"},"spread":{"value":-2,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.06}},
+            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":1,"unit":"px"},"blur":{"value":2,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.1}},
+            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":12,"unit":"px"},"blur":{"value":24,"unit":"px"},"spread":{"value":-6,"unit":"px"},"color":{"colorSpace":"srgb","components":[0.039,0.078,0.353],"alpha":0.3}},
             {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.08}}
           ]
         },
         "raised": {
           "$value": [
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":1,"unit":"px"},"blur":{"value":2,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.06}},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":6,"unit":"px"},"blur":{"value":12,"unit":"px"},"spread":{"value":-4,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.08}},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":16,"unit":"px"},"blur":{"value":32,"unit":"px"},"spread":{"value":-8,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.1}},
+            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":2,"unit":"px"},"blur":{"value":4,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.1}},
+            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":24,"unit":"px"},"blur":{"value":48,"unit":"px"},"spread":{"value":-12,"unit":"px"},"color":{"colorSpace":"srgb","components":[0.039,0.078,0.353],"alpha":0.35}},
+            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":64,"unit":"px"},"blur":{"value":128,"unit":"px"},"spread":{"value":-32,"unit":"px"},"color":{"colorSpace":"srgb","components":[0.039,0.078,0.353],"alpha":0.45}},
             {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.08}}
           ]
         },
@@ -647,17 +662,17 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
           "$value": [
             {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":1,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.75},"inset":true},
             {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.35},"inset":true},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":2,"unit":"px"},"blur":{"value":4,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.06}},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":12,"unit":"px"},"blur":{"value":24,"unit":"px"},"spread":{"value":-6,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.12}},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":32,"unit":"px"},"blur":{"value":64,"unit":"px"},"spread":{"value":-16,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.16}},
+            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":2,"unit":"px"},"blur":{"value":4,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.1}},
+            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":32,"unit":"px"},"blur":{"value":64,"unit":"px"},"spread":{"value":-16,"unit":"px"},"color":{"colorSpace":"srgb","components":[0.039,0.078,0.353],"alpha":0.4}},
+            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":80,"unit":"px"},"blur":{"value":160,"unit":"px"},"spread":{"value":-40,"unit":"px"},"color":{"colorSpace":"srgb","components":[0.039,0.078,0.353],"alpha":0.5}},
             {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.08}}
           ]
         },
         "modal": {
           "$value": [
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":2,"unit":"px"},"blur":{"value":4,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.06}},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":24,"unit":"px"},"blur":{"value":48,"unit":"px"},"spread":{"value":-12,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.18}},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":64,"unit":"px"},"blur":{"value":128,"unit":"px"},"spread":{"value":-32,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.26}},
+            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":2,"unit":"px"},"blur":{"value":4,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.1}},
+            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":40,"unit":"px"},"blur":{"value":80,"unit":"px"},"spread":{"value":-20,"unit":"px"},"color":{"colorSpace":"srgb","components":[0.039,0.078,0.353],"alpha":0.45}},
+            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":96,"unit":"px"},"blur":{"value":192,"unit":"px"},"spread":{"value":-48,"unit":"px"},"color":{"colorSpace":"srgb","components":[0.039,0.078,0.353],"alpha":0.55}},
             {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.08}}
           ]
         }
@@ -665,24 +680,24 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
       "dark": {
         "resting": {
           "$value": [
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":1,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.05},"inset":true},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.07},"inset":true},
+            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":1,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.08},"inset":true},
+            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.11},"inset":true},
             {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":1,"unit":"px"},"blur":{"value":2,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.6}},
             {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.8}}
           ]
         },
         "raised": {
           "$value": [
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":1,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.07},"inset":true},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.09},"inset":true},
+            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":1,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.11},"inset":true},
+            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.14},"inset":true},
             {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":16,"unit":"px"},"blur":{"value":32,"unit":"px"},"spread":{"value":-8,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.6}},
             {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.8}}
           ]
         },
         "floating": {
           "$value": [
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":1,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.09},"inset":true},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.11},"inset":true},
+            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":1,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.14},"inset":true},
+            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.17},"inset":true},
             {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":12,"unit":"px"},"blur":{"value":24,"unit":"px"},"spread":{"value":-6,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.6}},
             {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":32,"unit":"px"},"blur":{"value":64,"unit":"px"},"spread":{"value":-16,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.7}},
             {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.8}}
@@ -690,8 +705,8 @@ The YAML front matter holds the four groups the DESIGN.md format defines: colors
         },
         "modal": {
           "$value": [
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":1,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.11},"inset":true},
-            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.13},"inset":true},
+            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":1,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":0,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.17},"inset":true},
+            {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[1,1,1],"alpha":0.2},"inset":true},
             {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":64,"unit":"px"},"blur":{"value":128,"unit":"px"},"spread":{"value":-32,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.8}},
             {"offsetX":{"value":0,"unit":"px"},"offsetY":{"value":0,"unit":"px"},"blur":{"value":0,"unit":"px"},"spread":{"value":1,"unit":"px"},"color":{"colorSpace":"srgb","components":[0,0,0],"alpha":0.8}}
           ]

package/dist/css/host.css

@@ -104,15 +104,15 @@
     --nc-dark-canvas-soft-2: oklch(0.2178 0.0000 0.00);
     --nc-dark-material-workspace: oklch(0.0000 0.0000 0.00);
     --nc-dark-material-solid: oklch(0.0000 0.0000 0.00);
-    --nc-dark-material-resting: oklch(0.1543 0.0000 0.00);
-    --nc-dark-material-raised: oklch(0.1822 0.0000 0.00);
-    --nc-dark-material-floating: oklch(0.2090 0.0000 0.00);
-    --nc-dark-material-modal: oklch(0.2264 0.0000 0.00);
+    --nc-dark-material-resting: oklch(0.1822 0.0000 0.00);
+    --nc-dark-material-raised: oklch(0.2178 0.0000 0.00);
+    --nc-dark-material-floating: oklch(0.2686 0.0000 0.00);
+    --nc-dark-material-modal: oklch(0.2850 0.0000 0.00);
     --nc-dark-ink: oklch(0.9461 0.0000 0.00);
     --nc-dark-body: oklch(0.8297 0.0000 0.00);
-    --nc-dark-muted: oklch(0.6500 0.0000 0.00);
+    --nc-dark-muted: oklch(0.6993 0.0000 0.00);
     --nc-dark-line: oklch(0.2686 0.0000 0.00);
-    --nc-dark-input: oklch(0.5208 0.0000 0.00);
+    --nc-dark-input: oklch(0.5590 0.0000 0.00);
     --nc-dark-on-primary: oklch(0.1448 0.0000 0.00);
     --nc-dark-action: oklch(0.9461 0.0000 0.00);
     --nc-dark-action-foreground: oklch(0.1448 0.0000 0.00);
@@ -171,12 +171,12 @@
     --nc-touch-target: 44px;
     --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-sm: 6px;
+    --nc-rounded-md: 8px;
+    --nc-rounded-lg: 12px;
+    --nc-rounded-xl: 16px;
+    --nc-rounded-2xl: 20px;
+    --nc-rounded-3xl: 24px;
     --nc-rounded-full: 9999px;
     --nc-type-display-xl-font-family:
       Geist,
@@ -305,25 +305,25 @@
     --nc-material-glass-saturation: 180%;
     --nc-material-glass-blur: 20px;
     --nc-elevation-resting:
-      0px 1px 2px 0px rgb(0% 0% 0% / 0.05),
-      0px 2px 8px -2px rgb(0% 0% 0% / 0.06),
+      0px 1px 2px 0px rgb(0% 0% 0% / 0.1),
+      0px 12px 24px -6px rgb(3.9% 7.8% 35.3% / 0.3),
       0px 0px 0px 1px rgb(0% 0% 0% / 0.08);
     --nc-elevation-raised:
-      0px 1px 2px 0px rgb(0% 0% 0% / 0.06),
-      0px 6px 12px -4px rgb(0% 0% 0% / 0.08),
-      0px 16px 32px -8px rgb(0% 0% 0% / 0.1),
+      0px 2px 4px 0px rgb(0% 0% 0% / 0.1),
+      0px 24px 48px -12px rgb(3.9% 7.8% 35.3% / 0.35),
+      0px 64px 128px -32px rgb(3.9% 7.8% 35.3% / 0.45),
       0px 0px 0px 1px rgb(0% 0% 0% / 0.08);
     --nc-elevation-floating:
       inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.75),
       inset 0px 0px 0px 1px rgb(100% 100% 100% / 0.35),
-      0px 2px 4px 0px rgb(0% 0% 0% / 0.06),
-      0px 12px 24px -6px rgb(0% 0% 0% / 0.12),
-      0px 32px 64px -16px rgb(0% 0% 0% / 0.16),
+      0px 2px 4px 0px rgb(0% 0% 0% / 0.1),
+      0px 32px 64px -16px rgb(3.9% 7.8% 35.3% / 0.4),
+      0px 80px 160px -40px rgb(3.9% 7.8% 35.3% / 0.5),
       0px 0px 0px 1px rgb(0% 0% 0% / 0.08);
     --nc-elevation-modal:
-      0px 2px 4px 0px rgb(0% 0% 0% / 0.06),
-      0px 24px 48px -12px rgb(0% 0% 0% / 0.18),
-      0px 64px 128px -32px rgb(0% 0% 0% / 0.26),
+      0px 2px 4px 0px rgb(0% 0% 0% / 0.1),
+      0px 40px 80px -20px rgb(3.9% 7.8% 35.3% / 0.45),
+      0px 96px 192px -48px rgb(3.9% 7.8% 35.3% / 0.55),
       0px 0px 0px 1px rgb(0% 0% 0% / 0.08);
     --nc-duration-control: 100ms;
     --nc-duration-close: 140ms;
@@ -401,24 +401,24 @@
     --nc-chart-5: var(--nc-dark-chart-5);
     --nc-chart-6: var(--nc-dark-chart-6);
     --nc-elevation-resting:
-      inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.05),
-      inset 0px 0px 0px 1px rgb(100% 100% 100% / 0.07),
+      inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.08),
+      inset 0px 0px 0px 1px rgb(100% 100% 100% / 0.11),
       0px 1px 2px 0px rgb(0% 0% 0% / 0.6),
       0px 0px 0px 1px rgb(0% 0% 0% / 0.8);
     --nc-elevation-raised:
-      inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.07),
-      inset 0px 0px 0px 1px rgb(100% 100% 100% / 0.09),
+      inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.11),
+      inset 0px 0px 0px 1px rgb(100% 100% 100% / 0.14),
       0px 16px 32px -8px rgb(0% 0% 0% / 0.6),
       0px 0px 0px 1px rgb(0% 0% 0% / 0.8);
     --nc-elevation-floating:
-      inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.09),
-      inset 0px 0px 0px 1px rgb(100% 100% 100% / 0.11),
+      inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.14),
+      inset 0px 0px 0px 1px rgb(100% 100% 100% / 0.17),
       0px 12px 24px -6px rgb(0% 0% 0% / 0.6),
       0px 32px 64px -16px rgb(0% 0% 0% / 0.7),
       0px 0px 0px 1px rgb(0% 0% 0% / 0.8);
     --nc-elevation-modal:
-      inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.11),
-      inset 0px 0px 0px 1px rgb(100% 100% 100% / 0.13),
+      inset 0px 1px 0px 0px rgb(100% 100% 100% / 0.17),
+      inset 0px 0px 0px 1px rgb(100% 100% 100% / 0.2),
       0px 64px 128px -32px rgb(0% 0% 0% / 0.8),
       0px 0px 0px 1px rgb(0% 0% 0% / 0.8);
   }
@@ -426,7 +426,7 @@
 
 /* src/css/theme-host.generated.css */
 @layer theme {
-  @theme { --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-material-resting: oklch(1.0000 0.0000 0.00); --color-nc-material-raised: oklch(1.0000 0.0000 0.00); --color-nc-material-floating: oklch(1.0000 0.0000 0.00); --color-nc-material-modal: 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-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-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-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-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-material-resting: oklch(0.1543 0.0000 0.00); --color-nc-dark-material-raised: oklch(0.1822 0.0000 0.00); --color-nc-dark-material-floating: oklch(0.2090 0.0000 0.00); --color-nc-dark-material-modal: oklch(0.2264 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-on-primary: oklch(0.1448 0.0000 0.00); --color-nc-dark-action: oklch(0.9461 0.0000 0.00); --color-nc-dark-action-foreground: oklch(0.1448 0.0000 0.00); --color-nc-dark-action-hover: oklch(0.8761 0.0000 0.00); --color-nc-dark-action-active: oklch(0.8297 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-navigation-selection-bg: oklch(0.2393 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-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); --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: 500; --font-weight-display-xl: 500; --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: 500; --font-weight-display-lg: 500; --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: 500; --font-weight-display-md: 500; --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-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-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-material-resting: oklch(1.0000 0.0000 0.00); --color-nc-material-raised: oklch(1.0000 0.0000 0.00); --color-nc-material-floating: oklch(1.0000 0.0000 0.00); --color-nc-material-modal: 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-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-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-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-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-material-resting: oklch(0.1822 0.0000 0.00); --color-nc-dark-material-raised: oklch(0.2178 0.0000 0.00); --color-nc-dark-material-floating: oklch(0.2686 0.0000 0.00); --color-nc-dark-material-modal: oklch(0.2850 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.6993 0.0000 0.00); --color-nc-dark-line: oklch(0.2686 0.0000 0.00); --color-nc-dark-input: oklch(0.5590 0.0000 0.00); --color-nc-dark-on-primary: oklch(0.1448 0.0000 0.00); --color-nc-dark-action: oklch(0.9461 0.0000 0.00); --color-nc-dark-action-foreground: oklch(0.1448 0.0000 0.00); --color-nc-dark-action-hover: oklch(0.8761 0.0000 0.00); --color-nc-dark-action-active: oklch(0.8297 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-navigation-selection-bg: oklch(0.2393 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-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); --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: 500; --font-weight-display-xl: 500; --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: 500; --font-weight-display-lg: 500; --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: 500; --font-weight-display-md: 500; --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-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/wait.css */