@instruments/materia-ui 0.1.0

package/dist/styles/index.css

@@ -0,0 +1,2068 @@
+/* Design-system styles for the Materia UI package - the single stylesheet an
+   external consumer needs. Tailwind v4 excludes node_modules from class
+   detection, so the @source directives below re-include the package's compiled
+   components. Import AFTER Tailwind and before your app CSS:
+
+     @import "tailwindcss";
+     @import "@instruments/materia-ui/styles";
+
+   In-monorepo, each app's globals.css imports THIS file by relative source path
+   (not the package specifier - the specifier resolves through dist/) and adds
+   its own @source lines for the workspace packages it renders. */
+
+@import "./fonts.css";
+
+@plugin "tailwindcss-animate";
+@plugin "@tailwindcss/typography";
+
+@custom-variant dark (&:is(.dark *));
+
+/* Scan the package's own surface for class names. Directory-form @source is
+   extension-agnostic: it resolves to src/* (.tsx) in-monorepo and dist/* (.js)
+   in the published package. */
+@source "../components";
+@source "../compositions";
+@source "../tokens";
+@source "../hooks";
+@source "../utils";
+
+/* Responsive `size` prop safelist.
+   Component `size` scales resolve to per-breakpoint classes at RUNTIME (e.g.
+   `getResponsiveSizeClasses({ base: "sm", md: "lg", "@sm": "xl" })` →
+   `h-8 … md:h-10 … @sm:h-12 …`). Tailwind's static scanner can't see those
+   concatenations, so the VIEWPORT (`md:`) and CONTAINER (`@md:`) variants of
+   every size utility must be force-generated here. The prefix brace group
+   below carries both axes; keep the value lists in sync with the union of
+   component size-variant classes. Arbitrary/named container keys
+   (`@[240px]/card`) can't be enumerated - those pass literal class strings via
+   the resolver's `literalOverrides` param instead. */
+@source inline("{2xs,xs,sm,md,lg,xl,2xl,3xl,@2xs,@xs,@sm,@md,@lg,@xl,@2xl,@3xl}:h-{3,3.5,4,4.5,5,5.5,6,7,8,9,10,11,12,14,16}");
+@source inline("{2xs,xs,sm,md,lg,xl,2xl,3xl,@2xs,@xs,@sm,@md,@lg,@xl,@2xl,@3xl}:w-{5,6,7,8,9,11,13,15}");
+@source inline("{2xs,xs,sm,md,lg,xl,2xl,3xl,@2xs,@xs,@sm,@md,@lg,@xl,@2xl,@3xl}:min-w-{3,4,4.5,5,5.5,6,7,8,9,10,12}");
+@source inline("{2xs,xs,sm,md,lg,xl,2xl,3xl,@2xs,@xs,@sm,@md,@lg,@xl,@2xl,@3xl}:size-{1,1.5,2,2.5,3,3.5,4,4.5,5,5.5,6,7,8,9,10,11,12,14,16}");
+@source inline("{2xs,xs,sm,md,lg,xl,2xl,3xl,@2xs,@xs,@sm,@md,@lg,@xl,@2xl,@3xl}:px-{0,0.5,1,1.5,2,2.5,3,3.5,4,5,6,7,8}");
+@source inline("{2xs,xs,sm,md,lg,xl,2xl,3xl,@2xs,@xs,@sm,@md,@lg,@xl,@2xl,@3xl}:py-{0,0.5,1,1.5,2,2.5,3,3.5,4,5}");
+@source inline("{2xs,xs,sm,md,lg,xl,2xl,3xl,@2xs,@xs,@sm,@md,@lg,@xl,@2xl,@3xl}:p-{0,0.5,1,1.5,2,2.5,3,4}");
+@source inline("{2xs,xs,sm,md,lg,xl,2xl,3xl,@2xs,@xs,@sm,@md,@lg,@xl,@2xl,@3xl}:text-{3xs,2xs,xs,sm,base,lg,xl,2xl,caption,paragraph-sm,paragraph,paragraph-lg,subheading,subheading-lg,heading-sm,heading,heading-lg,title}");
+@source inline("{2xs,xs,sm,md,lg,xl,2xl,3xl,@2xs,@xs,@sm,@md,@lg,@xl,@2xl,@3xl}:gap-{0,0.5,1,1.5,2,2.5,3,4,5,6,8,10}");
+@source inline("{2xs,xs,sm,md,lg,xl,2xl,3xl,@2xs,@xs,@sm,@md,@lg,@xl,@2xl,@3xl}:gap-x-{0,0.5,1,1.5,2,2.5,3,4,5,6,8,10}");
+@source inline("{2xs,xs,sm,md,lg,xl,2xl,3xl,@2xs,@xs,@sm,@md,@lg,@xl,@2xl,@3xl}:gap-y-{0,0.5,1,1.5,2,2.5,3,4,5,6,8,10}");
+@source inline("{2xs,xs,sm,md,lg,xl,2xl,3xl,@2xs,@xs,@sm,@md,@lg,@xl,@2xl,@3xl}:card-inset-{none,2xs,xs,sm,base,lg,xl,2xl,3xl}");
+@source inline("{2xs,xs,sm,md,lg,xl,2xl,3xl,@2xs,@xs,@sm,@md,@lg,@xl,@2xl,@3xl}:mr-{1.5,2,2.5,3,3.5,4,6}");
+@source inline("{2xs,xs,sm,md,lg,xl,2xl,3xl,@2xs,@xs,@sm,@md,@lg,@xl,@2xl,@3xl}:pr-{1.5,2,2.5,3,3.5,4,6}");
+@source inline("{2xs,xs,sm,md,lg,xl,2xl,3xl,@2xs,@xs,@sm,@md,@lg,@xl,@2xl,@3xl}:pl-{2,2.5,3,3.5,4,5,7}");
+@source inline("{2xs,xs,sm,md,lg,xl,2xl,3xl,@2xs,@xs,@sm,@md,@lg,@xl,@2xl,@3xl}:top-{3.5,4.5,5.5,9,11,13}");
+@source inline("{2xs,xs,sm,md,lg,xl,2xl,3xl,@2xs,@xs,@sm,@md,@lg,@xl,@2xl,@3xl}:right-{3.5,4.5,5.5}");
+@source inline("{2xs,xs,sm,md,lg,xl,2xl,3xl,@2xs,@xs,@sm,@md,@lg,@xl,@2xl,@3xl}:left-{3.5,4.5,5.5}");
+@source inline("{2xs,xs,sm,md,lg,xl,2xl,3xl,@2xs,@xs,@sm,@md,@lg,@xl,@2xl,@3xl}:rounded{,-sm,-md,-lg,-xl,-2xl}");
+@source inline("{2xs,xs,sm,md,lg,xl,2xl,3xl,@2xs,@xs,@sm,@md,@lg,@xl,@2xl,@3xl}:shrink-{0}");
+/* SimpleGrid `cols` and GridCol `span` resolve per breakpoint the same way. */
+@source inline("{2xs,xs,sm,md,lg,xl,2xl,3xl,@2xs,@xs,@sm,@md,@lg,@xl,@2xl,@3xl}:grid-cols-{1,2,3,4,5,6,7,8,9,10,11,12}");
+@source inline("{2xs,xs,sm,md,lg,xl,2xl,3xl,@2xs,@xs,@sm,@md,@lg,@xl,@2xl,@3xl}:col-span-{1,2,3,4,5,6,7,8,9,10,11,12}");
+@source inline("{2xs,xs,sm,md,lg,xl,2xl,3xl,@2xs,@xs,@sm,@md,@lg,@xl,@2xl,@3xl}:file:h-{4,5,6,7,8,9,10,11}");
+@source inline("{2xs,xs,sm,md,lg,xl,2xl,3xl,@2xs,@xs,@sm,@md,@lg,@xl,@2xl,@3xl}:file:text-{xs,sm,base,caption,paragraph-sm,paragraph}");
+
+@theme {
+  /* Typeface - the locked Materia sans. Registering it here sets both the
+     `font-sans` utility and Tailwind v4's `--default-font-family`, so preflight
+     applies it to the document body; no per-app `--font-sans` override needed.
+     The metric-adjusted fallback (see fonts.css) sits ahead of the generics. */
+  --font-sans:
+    "InterVariable", "InterVariable Fallback", ui-sans-serif, system-ui,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
+  --font-mono:
+    "GeistMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+
+  /* Alpha tokens: white at N% opacity. Figma's alpha-light/N counts the other
+     way (alpha-light/5 is white at 95%) and turns gray-900 in dark mode; for a
+     veil that follows the theme, use an opacity modifier on a semantic colour
+     such as bg-background/50. */
+  --color-alpha-5: rgba(255, 255, 255, 0.05);
+  --color-alpha-10: rgba(255, 255, 255, 0.1);
+  --color-alpha-20: rgba(255, 255, 255, 0.2);
+  --color-alpha-30: rgba(255, 255, 255, 0.3);
+  --color-alpha-40: rgba(255, 255, 255, 0.4);
+  --color-alpha-50: rgba(255, 255, 255, 0.5);
+  --color-alpha-60: rgba(255, 255, 255, 0.6);
+  --color-alpha-70: rgba(255, 255, 255, 0.7);
+  --color-alpha-80: rgba(255, 255, 255, 0.8);
+  --color-alpha-90: rgba(255, 255, 255, 0.9);
+
+  /* Black alpha tokens - matches alpha scale but for dark overlays */
+  --color-black-alpha-5: rgba(0, 0, 0, 0.05);
+  --color-black-alpha-10: rgba(0, 0, 0, 0.1);
+  --color-black-alpha-20: rgba(0, 0, 0, 0.2);
+  --color-black-alpha-30: rgba(0, 0, 0, 0.3);
+  --color-black-alpha-40: rgba(0, 0, 0, 0.4);
+  --color-black-alpha-50: rgba(0, 0, 0, 0.5);
+  --color-black-alpha-60: rgba(0, 0, 0, 0.6);
+  --color-black-alpha-70: rgba(0, 0, 0, 0.7);
+  --color-black-alpha-80: rgba(0, 0, 0, 0.8);
+  --color-black-alpha-90: rgba(0, 0, 0, 0.9);
+
+  /* Custom font sizes. Tracking tightens as size grows, as Inter is drawn to:
+     the variable font already sets small text looser through its optical
+     size, so body sizes sit at zero and only display sizes pull in. Body sizes
+     carry generous leading (about 1.6) for running text. */
+  --text-2xs: 0.6875rem;
+  --text-2xs--line-height: 0.875rem;
+  --text-caption: 0.75rem;
+  --text-caption--line-height: 1.125rem;
+  --text-caption--letter-spacing: 0em;
+  --text-paragraph-sm: 0.875rem;
+  --text-paragraph-sm--line-height: 1.375rem;
+  --text-paragraph-sm--letter-spacing: 0em;
+  --text-paragraph: 1rem;
+  --text-paragraph--line-height: 1.625rem;
+  --text-paragraph--letter-spacing: 0em;
+  --text-paragraph-lg: 1.125rem;
+  --text-paragraph-lg--line-height: 1.75rem;
+  --text-paragraph-lg--letter-spacing: -0.005em;
+  --text-subheading: 1.25rem;
+  --text-subheading--line-height: 1.75rem;
+  --text-subheading--letter-spacing: -0.01em;
+  --text-subheading-lg: 1.5rem;
+  --text-subheading-lg--line-height: 2rem;
+  --text-subheading-lg--letter-spacing: -0.012em;
+  --text-heading-sm: 1.875rem;
+  --text-heading-sm--line-height: 2.25rem;
+  --text-heading-sm--letter-spacing: -0.015em;
+  --text-heading: 2.25rem;
+  --text-heading--line-height: 2.75rem;
+  --text-heading--letter-spacing: -0.018em;
+  --text-heading-lg: 3rem;
+  --text-heading-lg--line-height: 3.5rem;
+  --text-heading-lg--letter-spacing: -0.02em;
+  --text-title: 3.75rem;
+  --text-title--line-height: 4.5rem;
+  --text-title--letter-spacing: -0.022em;
+
+  /* One-off sizes that sit between the ramp steps. Named for the surface that
+     owns them rather than their value, so a change lands in one place. */
+  --text-micro: 0.625rem; /* 10px: product card image caption */
+  --text-calendar: 0.8rem; /* calendar grid */
+  --text-grid-header: 0.8125rem; /* data grid column header */
+  --text-grid-header--line-height: calc(1.125 / 0.8125);
+  --tracking-folder-label: -0.24px;
+
+  /* Core colours using Tailwind gray palette */
+  --color-background: var(--color-white);
+  --color-foreground: var(--color-gray-950);
+  --color-card: var(--color-white);
+  --color-card-foreground: var(--color-gray-950);
+  --color-popover: var(--color-white);
+  --color-popover-foreground: var(--color-gray-950);
+
+  /* Theme tokens using Tailwind gray palette */
+  --color-primary: var(--color-gray-900);
+  --color-primary-foreground: var(--color-gray-50);
+  --color-secondary: var(--color-gray-100);
+  --color-secondary-foreground: var(--color-gray-900);
+  --color-muted: var(--color-gray-100);
+  --color-muted-foreground: var(--color-gray-600);
+  --color-accent: var(--color-gray-200);
+  --color-accent-foreground: var(--color-gray-900);
+  --color-destructive: var(--color-red-600);
+  --color-destructive-foreground: var(--color-red-50);
+  --color-favorite: var(--color-red-500);
+  --color-border: var(--color-gray-200);
+  --color-input: var(--color-white);
+  --color-ring: var(--color-gray-300);
+
+  /*
+   * Adaptive surface tokens.
+   *
+   * These adapt to any parent background via alpha blending (or swap between
+   * solid/translucent in light vs dark mode) so call sites never need
+   * `dark:` variants. Use them instead of hardcoded grays whenever a surface
+   * should feel "recessed into" or "raised above" its parent.
+   *
+   * - `surface-inset`  : recessed into parent (e.g. segmented shell, inset panels)
+   * - `surface-raised` : raised above parent  (e.g. segmented active pill)
+   * - `border-subtle`  : low-contrast edge on translucent surfaces
+   */
+  --color-surface-inset: rgba(0, 0, 0, 0.05);
+  --color-surface-raised: var(--color-white);
+  --color-border-subtle: rgba(0, 0, 0, 0.1);
+
+  /* Role ladder for consumers that need an explicit position in the surface
+     hierarchy. Light mode preserves the existing white/gray treatment; dark
+     mode re-derives these roles as a close cool-graphite sequence below. */
+  --color-surface-sunk: var(--color-gray-100);
+  --color-surface-0: var(--color-white);
+  --color-surface-1: var(--color-white);
+  --color-surface-2: var(--color-gray-100);
+
+  /* Sidebar tokens (synced with Figma light mode) */
+  --color-sidebar: var(--color-white);
+  --color-sidebar-foreground: var(--color-gray-950);
+  --color-sidebar-primary: var(--color-gray-900);
+  --color-sidebar-primary-foreground: var(--color-gray-50);
+  --color-sidebar-accent: var(--color-gray-200);
+  --color-sidebar-accent-foreground: var(--color-gray-900);
+  --color-sidebar-border: var(--color-gray-300);
+  --color-sidebar-ring: var(--color-gray-400);
+
+  /* Materials grid specific colour tokens */
+  --color-card-background: #ffffff;
+  --color-card-border: var(--color-gray-200);
+  --color-text-primary: var(--color-gray-900);
+  --color-text-secondary: var(--color-gray-600);
+  --color-text-muted: var(--color-gray-600);
+
+  /* Calm semantic colours - Next.js inspired */
+  --color-affirmative-soft: #f0fdf4; /* green-50 */
+  --color-affirmative-accent: #16a34a; /* green-600 */
+  --color-affirmative-foreground: #14532d; /* green-900 */
+
+  --color-warning-soft: #fffbeb; /* very soft amber */
+  --color-warning-accent: #fcd34d; /* amber-300 - much calmer */
+  --color-warning-foreground: #92400e; /* amber-800 */
+
+  --color-error-soft: #fef2f2; /* very soft red */
+  --color-error-accent: #fca5a5; /* red-300 - much calmer */
+  --color-error-foreground: #991b1b; /* red-800 */
+
+  --color-info-soft: #eff6ff; /* blue-50 */
+  --color-info-accent: #3b82f6; /* blue-500 */
+  --color-info-foreground: #1e3a5f; /* blue-900 */
+
+  --color-brand: #ffe600; /* Brand yellow, per the Figma base/brand token */
+  --color-brand-soft: #fffef5; /* very soft brand yellow (code-only) */
+  --color-brand-accent: #dda600; /* per Figma base/brand accent - consumed at /40 for borders/accents */
+  --color-brand-foreground: var(--color-gray-800); /* #1F2937 - per Figma */
+
+  /* Status border tokens (light mode base values - desaturated blends) */
+  --color-affirmative-border: #dcfce7; /* green-100 - muted */
+  --color-warning-border: #fef3c7; /* amber-100 - muted */
+  --color-info-border: #dbeafe; /* blue-100 - muted */
+  --color-error-border: #fee2e2; /* red-100 - muted */
+
+  /* Border radius scale (synced with Figma) */
+  --radius: 0.5rem;
+  --radius-2xs: 0.0625rem; /* 1px */
+  --radius-xs: 0.25rem; /* 4px */
+  --radius-sm: 0.375rem; /* 6px */
+  --radius-md: 0.5rem; /* 8px */
+  --radius-lg: 0.625rem; /* 10px */
+
+  /* Extra large radius for cards. 4xl is Figma's radius/4xl (36px) and
+     Material Bank's product card corner, mirrored in radius-tokens.ts (the JS
+     values used by motion animations). Product cards use 3xl (24px) below
+     240px and 4xl above it. */
+  --radius-4xl: 2.25rem; /* 36px */
+  --radius-5xl: 2.5rem; /* 40px */
+
+  /* Modal/dialog surface radius - deliberately larger than the 4xl card corner
+     to a 36px corner. Applied only to Dialog and
+     AlertDialog via `rounded-modal`; do NOT use for cards (use 3xl/4xl).
+     Surface-weight ladder: 2xl 16px inner · 3xl 24px card · modal 36px dialog. */
+  --radius-modal: 2.25rem; /* 36px */
+
+  /* Editorial card stack: the inner card sits one pixel inside a 16px frame. */
+  --radius-editorial-stack: 17px;
+
+  /* Signature floating-overlay entrance: blur+settle across every zoom/fade
+     overlay, asymmetric 220ms in / 120ms out. Keyframes read tailwindcss-animate
+     tw-enter and tw-exit vars, keeping each overlay scale, slide and origin; we
+     only layer blur and shared timing. Reduced motion opts out via motion-reduce.
+     Easing is referenced via var(): an inline cubic-bezier() in an --animate-*
+     value trips Tailwind v4's @tailwindcss/postcss parser (the commas), so reuse
+     the --ease-* tokens defined below. */
+  --animate-overlay-in: overlay-in 220ms var(--ease-out);
+  --animate-overlay-out: overlay-out 120ms var(--ease-in);
+
+  /* Agent-surface entrances and the label shimmer. Timing comes from the motion
+     tokens below; keyframes sit with the other component animations. */
+  --animate-fade-up: fade-up var(--duration-moderate) var(--ease-out) both;
+  --animate-fade-in: fade-in var(--duration-normal) var(--ease-out) both;
+  --animate-pop-in: pop-in var(--duration-normal) var(--ease-out) both;
+  --animate-shimmer-text: shimmer-text var(--duration-slow) linear infinite;
+
+  /* BEGIN GENERATED: motion tokens - source of truth is packages/ui/src/tokens/motion.ts.
+     Regenerate with `pnpm --filter @instruments/materia-ui generate:motion-css`; do not hand-edit.
+     The motion-css-sync vitest fails when this block drifts from the TS tokens. */
+
+  /* Motion: Duration tokens (milliseconds) */
+  --duration-instant: 0ms;
+  --duration-quick: 120ms;
+  --duration-normal: 220ms;
+  --duration-moderate: 400ms;
+  --duration-slow: 1000ms;
+
+  /* Motion: Easing tokens (cubic-bezier) */
+  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
+
+  /* Motion: Scale tokens (press / hover feedback) - `scale-press`, `active:scale-press-deep`, `hover:scale-hover` */
+  --scale-press: 0.97;
+  --scale-press-deep: 0.95;
+  --scale-hover: 1.02;
+
+  /* END GENERATED: motion tokens */
+
+  /* Page container max-width (synced with Figma) */
+  --max-w-page: 74.375rem; /* 1190px */
+
+  /* Breakpoints. In rem, like Tailwind's own: Tailwind orders media queries
+     within a unit, so a px breakpoint among rem ones is emitted out of
+     cascade order. Keep the values in step with tokens/breakpoint.ts. */
+  --breakpoint-2xs: 20rem; /* 320px */
+  --breakpoint-xs: 30rem; /* 480px */
+  --breakpoint-3xl: 120rem; /* 1920px */
+
+  /* Mtag product page layout */
+  --product-actions-height: 286px;
+
+  /* Small container steps below Tailwind's @xs (320px), for UI on small
+     displays. 3xs and 2xs are Tailwind's and Figma's own (256px, 288px);
+     4xs adds a 192px step beneath them. */
+  --container-4xs: 12rem; /* 192px */
+  --container-3xs: 16rem; /* 256px */
+  --container-2xs: 18rem; /* 288px */
+
+  /* Sidepanel breakpoint: content wider than sidepanel footprint (440px panel + 24px right edge = 464px) */
+  --container-sidepanel: 464px;
+
+  /* Sidepanel layout dimensions */
+  --sidepanel-width: 440px; /* Panel width */
+  --sidepanel-gap: 24px; /* Gap between sidepanel and viewport edge (1.5rem / right-6) */
+  --sidepanel-footprint: calc(
+    var(--sidepanel-width) + var(--sidepanel-gap)
+  ); /* Total space from viewport edge to sidepanel left edge: 464px */
+
+  /* Viewport dialog (`DialogContent size="viewport"`): fills the screen less an
+     8px margin on phones, 32px left and right and 24px top and bottom from md,
+     capped at 1224 by 960. */
+  --width-dialog-viewport: calc(100vw - 1rem);
+  --height-dialog-viewport: calc(100dvh - 1rem);
+  --width-dialog-viewport-md: calc(100vw - 4rem);
+  --height-dialog-viewport-md: calc(100dvh - 3rem);
+  --max-width-dialog-viewport: 76.5rem; /* 1224px */
+  --max-height-dialog-viewport: 60rem; /* 960px */
+
+  /* Header nav layout */
+  /* Gap between the nav buttons and the viewport edge. This IS the page
+     gutter - the header's left already uses `pl-page-gutter`, so hardcoding
+     the right meant the two sides of the same bar could disagree, and they
+     did: 32px here against a 24px `--page-gutter` left every page's content
+     8px inside the header's right edge. Deriving it keeps both sides of the
+     header on the one gutter and inherits the sm breakpoint for free. */
+  --header-nav-edge-gap: var(--page-gutter);
+  --header-nav-buttons-width: 342px; /* Products + Brands + Cart + gaps + gap-3 before Products */
+  --header-cart-button-width: 64px; /* Cart button with padding */
+  --header-nav-sidepanel-offset: calc(
+    var(--sidepanel-footprint) + 12px
+  ); /* Right position when sidepanel open: 476px (gap-3 from sidepanel) */
+
+  /* Elevation ladder. The values live on `--elevation-*`; `--shadow-*` points at
+     them, because Tailwind inlines a shadow utility's theme value and a `var()`
+     is the only thing that stays live for dark mode to swap. */
+  --elevation-2xs: 0 1px 1px 0 rgb(17 24 39 / 0.03);
+  --elevation-xs: 0 0 4px 0 rgb(17 24 39 / 0.04);
+  --elevation-sm:
+    0 18px 47px 0 rgb(17 24 39 / 0.03), 0 7.5px 19px 0 rgb(17 24 39 / 0.02),
+    0 4px 10.5px 0 rgb(17 24 39 / 0.02), 0 2.3px 5.8px 0 rgb(17 24 39 / 0.01),
+    0 0.5px 1.3px 0 rgb(17 24 39 / 0.01), 0 0 0 1px rgb(17 24 39 / 0.05);
+  --elevation-md:
+    0 17.54px 23.39px 0 rgb(17 24 39 / 0.04),
+    0 9.4px 12.5px 0 rgb(17 24 39 / 0.03), 0 5.25px 7px 0 rgb(17 24 39 / 0.02),
+    0 2.79px 3.72px -2px rgb(17 24 39 / 0.01),
+    0 1.16px 1.5px 0 rgb(17 24 39 / 0.01), 0 0 0 1px rgb(17 24 39 / 0.05);
+  --elevation-lg:
+    0 25px 50px 0 rgb(17 24 39 / 0.05), 0 12px 24px 0 rgb(17 24 39 / 0.04),
+    0 6px 12px 0 rgb(17 24 39 / 0.03), 0 3px 6px 0 rgb(17 24 39 / 0.02),
+    0 1.5px 3px 0 rgb(17 24 39 / 0.02), 0 0 0 1px rgb(17 24 39 / 0.05);
+  --elevation-xl:
+    0 40px 80px 0 rgb(17 24 39 / 0.06), 0 20px 40px 0 rgb(17 24 39 / 0.05),
+    0 10px 20px 0 rgb(17 24 39 / 0.04), 0 5px 10px 0 rgb(17 24 39 / 0.03),
+    0 2px 4px 0 rgb(17 24 39 / 0.02), 0 0 0 1px rgb(17 24 39 / 0.05);
+  --elevation-2xl:
+    0 60px 120px 0 rgb(17 24 39 / 0.07), 0 30px 60px 0 rgb(17 24 39 / 0.06),
+    0 15px 30px 0 rgb(17 24 39 / 0.05), 0 7.5px 15px 0 rgb(17 24 39 / 0.04),
+    0 3px 6px 0 rgb(17 24 39 / 0.03), 0 0 0 1px rgb(17 24 39 / 0.05);
+  --elevation-3xl:
+    0 80px 160px 0 rgb(17 24 39 / 0.08), 0 40px 80px 0 rgb(17 24 39 / 0.07),
+    0 20px 40px 0 rgb(17 24 39 / 0.06), 0 10px 20px 0 rgb(17 24 39 / 0.05),
+    0 4px 8px 0 rgb(17 24 39 / 0.04), 0 0 0 1px rgb(17 24 39 / 0.05);
+  --elevation-4xl:
+    0 100px 200px 0 rgb(17 24 39 / 0.09), 0 50px 100px 0 rgb(17 24 39 / 0.08),
+    0 25px 50px 0 rgb(17 24 39 / 0.07), 0 12.5px 25px 0 rgb(17 24 39 / 0.06),
+    0 5px 10px 0 rgb(17 24 39 / 0.05), 0 0 0 1px rgb(17 24 39 / 0.05);
+
+  --shadow-2xs: var(--elevation-2xs);
+  --shadow-xs: var(--elevation-xs);
+  --shadow-sm: var(--elevation-sm);
+  --shadow-md: var(--elevation-md);
+  --shadow-lg: var(--elevation-lg);
+  --shadow-xl: var(--elevation-xl);
+  --shadow-2xl: var(--elevation-2xl);
+  --shadow-3xl: var(--elevation-3xl);
+  --shadow-4xl: var(--elevation-4xl);
+
+  /* Edge divider shadows (scroll-container headers/footers) */
+  --shadow-edge-bottom: 0 1px 0 0 rgb(17 24 39 / 0.06);
+  --shadow-edge-top: 0 -4px 12px -4px rgb(17 24 39 / 0.08);
+
+  /* Inner shadow definitions (from Figma) */
+  --shadow-inner-2xs: inset 0 1px 0 0 rgb(0 0 0 / 0.05);
+  --shadow-inner-xs: inset 0 1px 1px 0 rgb(0 0 0 / 0.05);
+  --shadow-inner-sm: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+
+  /* Blur scale (from Figma) */
+  --blur-xs: 4px;
+  --blur-sm: 8px;
+  --blur-md: 12px;
+  --blur-lg: 16px;
+  --blur-xl: 24px;
+  --blur-2xl: 40px;
+  --blur-3xl: 64px;
+
+  /* Backdrop blur scale (from Figma - same values as blur) */
+  --backdrop-blur-xs: 4px;
+  --backdrop-blur-sm: 8px;
+  --backdrop-blur-md: 12px;
+  --backdrop-blur-lg: 16px;
+  --backdrop-blur-xl: 24px;
+  --backdrop-blur-2xl: 40px;
+  --backdrop-blur-3xl: 64px;
+
+  /* Drop shadow definitions (from Figma) - CSS filter values */
+  --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
+  --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
+  --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
+  --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
+  --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
+  --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
+  --drop-shadow-folder: 0 3.881px 2.91px rgba(0, 0, 0, 0.35);
+
+  /* Surface-specific shadows. Literal values, not on the elevation ladder, so
+     they do not swap in dark mode (they never did as arbitrary values). */
+  --shadow-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.3);
+  --shadow-button-sheen:
+    0 1px 2px rgba(0, 0, 0, 0.05), inset 0 1px 0 var(--color-alpha-30);
+
+  /* Library: warm paper colour used for book page edges and feature banner */
+  --color-paper: oklch(0.96 0.02 80);
+}
+
+/* Tokens whose values read other live variables (alpha ramp, foreground, the
+   product card tool presence). `inline` writes the value into each utility, so
+   the variable resolves on the element and dark mode or a local override still
+   reaches it; a plain @theme would freeze it at :root. */
+@theme inline {
+  /* Button face sheens: a light wash fading down the pseudo-element. */
+  --background-image-sheen-bright: linear-gradient(
+    180deg,
+    white 0%,
+    var(--color-alpha-10) 100%
+  );
+  --background-image-sheen-strong: linear-gradient(
+    180deg,
+    var(--color-alpha-40) 0%,
+    var(--color-alpha-5) 100%
+  );
+  --background-image-sheen-hover: linear-gradient(
+    180deg,
+    var(--color-alpha-50) 0%,
+    var(--color-alpha-5) 100%
+  );
+  --background-image-sheen-dark: linear-gradient(
+    180deg,
+    var(--color-alpha-10) 0%,
+    transparent 100%
+  );
+
+  /* Hover wash for quiet buttons. */
+  --color-foreground-wash: color-mix(
+    in srgb,
+    var(--color-foreground) 2%,
+    transparent
+  );
+
+  /* Product card tool buttons: dark scrim that follows the tool presence. */
+  --color-tool-scrim: color-mix(
+    in srgb,
+    var(--color-gray-900) calc(var(--product-card-tool-presence, 1) * 50%),
+    transparent
+  );
+  --color-tool-scrim-hover: color-mix(
+    in srgb,
+    var(--color-gray-900) calc(var(--product-card-tool-presence, 1) * 70%),
+    transparent
+  );
+}
+
+/* Literal images with no variable inside, so a plain @theme is enough. */
+@theme {
+  /* Fine diagonal hatch over a surface; scroll-fade edge texture. */
+  --background-image-hatch: repeating-linear-gradient(
+    135deg,
+    rgb(255 255 255 / 0.025) 0px,
+    rgb(255 255 255 / 0.025) 1px,
+    rgb(0 0 0 / 0.02) 2px,
+    rgb(0 0 0 / 0.02) 3px
+  );
+
+  /* Transparency checkerboards for the token stories (pair with bg-size-checker). */
+  --background-image-checkerboard-light: repeating-conic-gradient(
+    #e5e7eb 0 25%,
+    transparent 0 50%
+  );
+  --background-image-checkerboard-dark: repeating-conic-gradient(
+    #6b7280 0 25%,
+    #d1d5db 0 50%
+  );
+
+  /* Sample backdrop for the scrim story. */
+  --background-image-scrim-sample: linear-gradient(
+    135deg,
+    #fbbf24,
+    #fb7185,
+    #6366f1
+  );
+}
+
+@layer base {
+  :root {
+    /* Tell the browser which scheme is active so native controls (checkboxes,
+       radios, scrollbars, selects, date pickers) and the default focus ring
+       render for the theme, not the OS preference. Flipped in `.dark` below. */
+    color-scheme: light;
+    /* Core tokens - synced with Figma Design System */
+    --color-background: var(--color-white);
+    --color-foreground: var(--color-gray-950);
+    --color-card: var(--color-white);
+    --color-card-foreground: var(--color-gray-950);
+    --color-popover: var(--color-white);
+    --color-popover-foreground: var(--color-gray-950);
+    --color-primary: var(--color-gray-900);
+    --color-primary-foreground: var(--color-gray-50);
+    --color-secondary: var(--color-gray-100);
+    --color-secondary-foreground: var(--color-gray-900);
+    --color-muted: var(--color-gray-100);
+    --color-muted-foreground: var(--color-gray-600);
+    --color-accent: var(--color-gray-200);
+    --color-accent-foreground: var(--color-gray-900);
+    --color-destructive: var(--color-red-600);
+    --color-destructive-foreground: var(--color-red-50);
+    --color-favorite: var(--color-red-500);
+    --color-border: var(--color-gray-200);
+    --color-input: var(--color-white);
+    --color-ring: var(--color-gray-300);
+    --color-surface-inset: rgba(0, 0, 0, 0.05);
+    --color-surface-raised: var(--color-white);
+    --color-border-subtle: rgba(0, 0, 0, 0.1);
+    --radius: 0.5rem;
+    /* Chart palette (synced with Figma) */
+    --chart-1: var(--color-orange-600);
+    --chart-2: var(--color-teal-600);
+    --chart-3: var(--color-cyan-900);
+    --chart-4: var(--color-amber-400);
+    --chart-5: var(--color-amber-500);
+
+    /* Sidebar colour variables - synced with Figma */
+    --sidebar: var(--color-white);
+    --sidebar-foreground: var(--color-gray-950);
+    --sidebar-primary: var(--color-gray-900);
+    --sidebar-primary-foreground: var(--color-gray-50);
+    --sidebar-accent: var(--color-gray-200);
+    --sidebar-accent-foreground: var(--color-gray-900);
+    --sidebar-border: var(--color-gray-300);
+    --sidebar-ring: var(--color-gray-400);
+  }
+
+  .dark {
+    color-scheme: dark;
+    /* Dark mode is a second contrast design, not the Tailwind gray scale
+       inverted. Close cool-graphite steps keep the canvas lifted and let
+       grouping come from surfaces and space instead of bright outlines. */
+    --color-surface-sunk: oklch(0.165 0.008 250);
+    --color-surface-0: oklch(0.19 0.009 250);
+    --color-surface-1: oklch(0.225 0.01 250);
+    --color-surface-2: oklch(0.255 0.011 250);
+
+    --color-background: var(--color-surface-0);
+    --color-foreground: oklch(0.91 0.005 250);
+    --color-card: var(--color-surface-1);
+    --color-card-muted: var(--color-surface-2);
+    --color-card-foreground: var(--color-foreground);
+    --color-popover: var(--color-surface-2);
+    --color-popover-foreground: var(--color-foreground);
+    /* Solid neutral actions stay light, but a cool pearl takes the glare off
+       the repeated pure-white controls on a graphite canvas. */
+    --color-primary: oklch(0.9 0.012 245);
+    --color-primary-foreground: var(--color-surface-sunk);
+    --color-secondary: var(--color-surface-2);
+    --color-secondary-foreground: var(--color-foreground);
+    --color-muted: var(--color-surface-2);
+    --color-muted-foreground: var(--color-gray-400);
+    --color-accent: var(--color-surface-2);
+    --color-accent-foreground: var(--color-foreground);
+    --color-destructive: var(--color-red-500);
+    --color-destructive-foreground: var(--color-red-50);
+    --color-favorite: var(--color-red-400);
+    --color-border: oklch(0.82 0.007 250 / 0.1);
+    --color-input: var(--color-surface-1);
+    --color-ring: oklch(0.67 0.011 250);
+    --color-surface-inset: var(--color-surface-0);
+    --color-surface-raised: var(--color-surface-2);
+    --color-border-subtle: var(--color-border);
+    /* Library pages stay legible without introducing a warm brown well. */
+    --color-paper: var(--color-surface-1);
+
+    /* Status stays in the signal, border, and text. Large tinted light-mode
+       fills collapse onto the neutral graphite card ground. */
+    --color-affirmative-soft: var(--color-surface-1);
+    --color-affirmative-accent: oklch(0.76 0.115 165);
+    --color-affirmative-foreground: oklch(0.76 0.115 165);
+    --color-warning-soft: var(--color-surface-1);
+    --color-warning-accent: oklch(0.78 0.1 85);
+    --color-warning-foreground: oklch(0.78 0.1 85);
+    --color-error-soft: var(--color-surface-1);
+    --color-error-accent: oklch(0.68 0.13 25);
+    --color-error-foreground: oklch(0.72 0.1 25);
+    --color-info-soft: var(--color-surface-1);
+    --color-info-accent: oklch(0.72 0.1 245);
+    --color-info-foreground: oklch(0.74 0.08 245);
+    --color-brand-soft: var(--color-surface-1);
+
+    /* Dark surfaces are separated by the role ladder and hairline, never
+       elevation. This also neutralises custom shadow utilities package-wide. */
+    /* Dark surfaces cast no shadow. Overlay tiers (md and up) take a hairline
+       edge instead, so a dialog or menu still reads as a separate layer. */
+    --elevation-dark-edge: 0 0 0 1px var(--color-border);
+    /* A transparent shadow, not `none`: Tailwind joins the shadow and ring into
+       one box-shadow list, and a `none` in that list voids the focus ring too. */
+    --elevation-2xs: 0 0 #0000;
+    --elevation-xs: 0 0 #0000;
+    --elevation-sm: 0 0 #0000;
+    --elevation-md: var(--elevation-dark-edge);
+    --elevation-lg: var(--elevation-dark-edge);
+    --elevation-xl: var(--elevation-dark-edge);
+    --elevation-2xl: var(--elevation-dark-edge);
+    --elevation-3xl: var(--elevation-dark-edge);
+    --elevation-4xl: var(--elevation-dark-edge);
+    --shadow-edge-bottom: 0 0 #0000;
+    --shadow-edge-top: 0 0 #0000;
+    --shadow-inner-2xs: 0 0 #0000;
+    --shadow-inner-xs: 0 0 #0000;
+    --shadow-inner-sm: 0 0 #0000;
+    --drop-shadow-xs: 0 0 0 transparent;
+    --drop-shadow-sm: 0 0 0 transparent;
+    --drop-shadow-md: 0 0 0 transparent;
+    --drop-shadow-lg: 0 0 0 transparent;
+    --drop-shadow-xl: 0 0 0 transparent;
+    --drop-shadow-2xl: 0 0 0 transparent;
+    /* Chart palette (synced with Figma) */
+    --chart-1: var(--color-blue-700);
+    --chart-2: var(--color-emerald-500);
+    --chart-3: var(--color-amber-500);
+    --chart-4: var(--color-purple-500);
+    --chart-5: var(--color-rose-500);
+
+    /* Status border tokens (dark mode) */
+    --color-affirmative-border: oklch(0.76 0.115 165 / 0.3);
+    --color-warning-border: oklch(0.78 0.1 85 / 0.28);
+    --color-info-border: oklch(0.72 0.1 245 / 0.3);
+    --color-error-border: oklch(0.68 0.13 25 / 0.3);
+
+    /* Sidebar is the single sunk application surface. */
+    --color-sidebar: var(--color-surface-sunk);
+    --color-sidebar-foreground: var(--color-gray-100);
+    --color-sidebar-primary: var(--color-gray-100);
+    --color-sidebar-primary-foreground: var(--color-surface-sunk);
+    --color-sidebar-accent: var(--color-surface-1);
+    --color-sidebar-accent-foreground: var(--color-gray-100);
+    --color-sidebar-border: var(--color-border);
+    --color-sidebar-ring: var(--color-ring);
+    --sidebar: var(--color-surface-sunk);
+    --sidebar-foreground: var(--color-gray-100);
+    --sidebar-primary: var(--color-gray-100);
+    --sidebar-primary-foreground: var(--color-surface-sunk);
+    --sidebar-accent: var(--color-surface-1);
+    --sidebar-accent-foreground: var(--color-gray-100);
+    --sidebar-border: var(--color-border);
+    --sidebar-ring: var(--color-ring);
+  }
+}
+
+@layer base {
+  * {
+    outline-color: var(--color-ring);
+    border-color: var(--color-border);
+  }
+  body {
+    font-kerning: normal;
+    /* Inter OpenType features: contextual alternates and the open 4. Not
+       case-sensitive forms: they lift hyphens, brackets and colons to cap
+       height, which only suits all-capital text. These are no-ops without the
+       real InterVariable file (fonts.css). */
+    font-feature-settings: "calt", "cv02";
+    font-optical-sizing: auto;
+    /* Type rendering optimizations */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-synthesis: none;
+    color: var(--color-foreground);
+    text-rendering: optimizeLegibility;
+  }
+}
+
+/* Match card fade-in (CSS-only, zero JS overhead after paint) */
+@keyframes match-card-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Shimmer animation for loading states */
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* Breathe animation for subtle pulsing effect */
+@keyframes breathe {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.01);
+    opacity: 0.97;
+  }
+}
+
+/* Border glow animation for analyzing state */
+@keyframes border-glow {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
+  }
+  50% {
+    box-shadow: 0 0 20px 4px rgba(99, 102, 241, 0.3);
+  }
+}
+
+/* Crossfade for swapped inline labels: a touch of blur masks the text change */
+@keyframes fade-swap {
+  from {
+    opacity: 0;
+    filter: blur(2px);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+
+/* Orbital motion animation for floating swatches */
+@keyframes orbit {
+  from {
+    transform: rotate(var(--start-angle, 0rad))
+      translateX(var(--orbit-radius, 60px))
+      rotate(calc(-1 * var(--start-angle, 0rad)));
+  }
+  to {
+    transform: rotate(calc(var(--start-angle, 0rad) + 360deg))
+      translateX(var(--orbit-radius, 60px))
+      rotate(calc(-1 * (var(--start-angle, 0rad) + 360deg)));
+  }
+}
+
+/* Continuous horizontal marquee - reveals clipped inline text (e.g. a product
+   card's category) on hover. Paused by default; a parent `.group:hover` (or a
+   `data-play="running"` escape hatch) starts it. For a seamless loop the track
+   holds two identical copies and the consumer sets `--marquee-shift` to the
+   negative width of one copy plus the inter-copy gap. */
+@keyframes marquee {
+  to {
+    transform: translateX(var(--marquee-shift, -100%));
+  }
+}
+
+/* Entrances for streamed and staged agent content. Each animates from the
+   hidden state to the element's own resting styles. */
+@keyframes fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+/* Highlight sweep across a gradient-clipped label (`.shimmer-text`). */
+@keyframes shimmer-text {
+  0% {
+    background-position: 150% 0;
+  }
+  100% {
+    background-position: -50% 0;
+  }
+}
+
+/* One pixel-grid cell lifting from its trough to full strength. */
+@keyframes pixel-pulse {
+  0%,
+  100% {
+    opacity: 0.15;
+  }
+  40%,
+  60% {
+    opacity: 1;
+  }
+}
+
+/* Floating-overlay entrance/exit. The transform/opacity `from`/`to` mirror
+   tailwindcss-animate's own `enter`/`exit` keyframes (reading the same
+   tw-enter / tw-exit vars its fade/zoom/slide utilities set), so an
+   overlay keeps its scale + directional slide; we add only the blur pass. */
+@keyframes overlay-in {
+  from {
+    opacity: var(--tw-enter-opacity, 1);
+    transform: translate3d(
+        var(--tw-enter-translate-x, 0),
+        var(--tw-enter-translate-y, 0),
+        0
+      )
+      scale3d(
+        var(--tw-enter-scale, 1),
+        var(--tw-enter-scale, 1),
+        var(--tw-enter-scale, 1)
+      )
+      rotate(var(--tw-enter-rotate, 0));
+    filter: blur(2px);
+  }
+  to {
+    filter: blur(0);
+  }
+}
+
+@keyframes overlay-out {
+  from {
+    filter: blur(0);
+  }
+  to {
+    opacity: var(--tw-exit-opacity, 1);
+    transform: translate3d(
+        var(--tw-exit-translate-x, 0),
+        var(--tw-exit-translate-y, 0),
+        0
+      )
+      scale3d(
+        var(--tw-exit-scale, 1),
+        var(--tw-exit-scale, 1),
+        var(--tw-exit-scale, 1)
+      )
+      rotate(var(--tw-exit-rotate, 0));
+    filter: blur(1px);
+  }
+}
+
+@layer components {
+  /* Marquee track: idle (paused at start) until an ancestor opts it in. */
+  .animate-marquee {
+    animation: marquee var(--marquee-duration, 6s) linear infinite;
+    animation-play-state: paused;
+  }
+  .group:hover .animate-marquee,
+  .animate-marquee[data-play="running"] {
+    animation-play-state: running;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .animate-marquee {
+      animation: none;
+    }
+  }
+
+  /* Status label whose glyphs show a travelling highlight through a clipped
+     gradient. Without motion the sweep freezes partway along a gradient seen
+     through transparent text, so reduced motion restores a plain, legible
+     foreground colour instead. */
+  .shimmer-text {
+    color: transparent;
+    -webkit-background-clip: text;
+    background-clip: text;
+    background-image: linear-gradient(
+      90deg,
+      color-mix(in oklab, var(--color-muted-foreground) 60%, transparent) 35%,
+      var(--color-foreground) 50%,
+      color-mix(in oklab, var(--color-muted-foreground) 60%, transparent) 65%
+    );
+    background-size: 200% 100%;
+    animation: var(--animate-shimmer-text);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .shimmer-text {
+      animation: none;
+      background-image: none;
+      color: var(--color-foreground);
+    }
+  }
+
+  /* One cell of a pixel-grid loader. The component sets `animation-delay` and
+     `animation-duration` per cell to place it in the wavefront; a `data-blank`
+     cell never lights. A frozen trough is close to invisible, so reduced
+     motion raises live cells to full strength while blanks stay distinct. */
+  .pixel-cell {
+    opacity: 0.15;
+    animation: pixel-pulse 650ms ease-in-out infinite;
+  }
+  .pixel-cell[data-blank] {
+    opacity: 0.07;
+    animation: none;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .pixel-cell {
+      animation: none;
+      opacity: 1;
+    }
+    .pixel-cell[data-blank] {
+      opacity: 0.07;
+    }
+  }
+
+  /* Underline that draws in from the left on hover. */
+  .underline-grow {
+    background-image: linear-gradient(currentColor, currentColor);
+    background-position: 0 100%;
+    background-repeat: no-repeat;
+    background-size: 0 1px;
+    transition: background-size var(--duration-normal) var(--ease-out);
+  }
+  .underline-grow:hover {
+    background-size: 100% 1px;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .underline-grow {
+      transition: none;
+    }
+  }
+
+  /* Glass scrim (dark overlay for modals/dialogs) */
+  .glass-scrim {
+    @apply bg-black/20 backdrop-blur-md;
+  }
+
+  /* Glass surface (frosted panel for floating UI, nav bars, controls) */
+  .glass-surface {
+    @apply bg-background/80 backdrop-blur-md;
+  }
+
+  /* Glass media (dark label on images/video) */
+  .glass-media {
+    @apply bg-black/40 backdrop-blur-md;
+  }
+
+  .scrollbar-menu {
+    scrollbar-color: rgb(107 114 128 / 0.25) transparent;
+    scrollbar-width: thin;
+  }
+
+  .scrollbar-menu::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .scrollbar-menu::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .scrollbar-menu::-webkit-scrollbar-thumb {
+    background-color: rgb(107 114 128 / 0.25);
+    border-radius: 9999px;
+  }
+
+  /* Fully hidden scrollbar - keeps a scroll region scrollable (trackpad/wheel)
+     without the scrollbar track reserving space and causing layout shift. */
+  .scrollbar-none {
+    scrollbar-width: none;
+  }
+
+  .scrollbar-none::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@layer utilities {
+  .w-menu-sidebar {
+    width: 235px;
+  }
+
+  .max-h-menu-sidebar-list {
+    max-height: 370px;
+  }
+
+  .shadow-3xl {
+    box-shadow: var(--elevation-3xl);
+  }
+
+  .shadow-4xl {
+    box-shadow: var(--elevation-4xl);
+  }
+
+  /* Inner shadow utilities */
+  .shadow-inner-2xs {
+    box-shadow: var(--shadow-inner-2xs);
+  }
+
+  .shadow-inner-xs {
+    box-shadow: var(--shadow-inner-xs);
+  }
+
+  .shadow-inner-sm {
+    box-shadow: var(--shadow-inner-sm);
+  }
+
+  /* Edge divider shadow utilities (scroll-container headers/footers) */
+  .shadow-edge-bottom {
+    box-shadow: var(--shadow-edge-bottom);
+  }
+
+  .shadow-edge-top {
+    box-shadow: var(--shadow-edge-top);
+  }
+
+  /* Drop shadow utilities (CSS filter) */
+  .drop-shadow-xs {
+    filter: drop-shadow(var(--drop-shadow-xs));
+  }
+
+  .drop-shadow-sm {
+    filter: drop-shadow(var(--drop-shadow-sm));
+  }
+
+  .drop-shadow-md {
+    filter: drop-shadow(var(--drop-shadow-md));
+  }
+
+  .drop-shadow-lg {
+    filter: drop-shadow(var(--drop-shadow-lg));
+  }
+
+  .drop-shadow-xl {
+    filter: drop-shadow(var(--drop-shadow-xl));
+  }
+
+  .drop-shadow-2xl {
+    filter: drop-shadow(var(--drop-shadow-2xl));
+  }
+
+  /* Blur utilities */
+  .blur-xs {
+    filter: blur(var(--blur-xs));
+  }
+  .blur-sm {
+    filter: blur(var(--blur-sm));
+  }
+  .blur-md {
+    filter: blur(var(--blur-md));
+  }
+  .blur-lg {
+    filter: blur(var(--blur-lg));
+  }
+  .blur-xl {
+    filter: blur(var(--blur-xl));
+  }
+  .blur-2xl {
+    filter: blur(var(--blur-2xl));
+  }
+  .blur-3xl {
+    filter: blur(var(--blur-3xl));
+  }
+
+  /* Backdrop blur utilities */
+  .backdrop-blur-xs {
+    backdrop-filter: blur(var(--backdrop-blur-xs));
+  }
+  .backdrop-blur-sm {
+    backdrop-filter: blur(var(--backdrop-blur-sm));
+  }
+  .backdrop-blur-md {
+    backdrop-filter: blur(var(--backdrop-blur-md));
+  }
+  .backdrop-blur-lg {
+    backdrop-filter: blur(var(--backdrop-blur-lg));
+  }
+  .backdrop-blur-xl {
+    backdrop-filter: blur(var(--backdrop-blur-xl));
+  }
+  .backdrop-blur-2xl {
+    backdrop-filter: blur(var(--backdrop-blur-2xl));
+  }
+  .backdrop-blur-3xl {
+    backdrop-filter: blur(var(--backdrop-blur-3xl));
+  }
+
+  /* Text box trim utilities */
+  .trim-none {
+    text-box-trim: none;
+  }
+
+  .trim-start {
+    text-box-trim: trim-start;
+  }
+
+  .trim-end {
+    text-box-trim: trim-end;
+  }
+
+  .trim-both {
+    text-box-trim: trim-both;
+  }
+
+  /* Typography scale utilities (from Figma) */
+
+  /* 3XS: 8/8 - micro text for tiny badges */
+  .text-3xs {
+    font-size: 0.5rem;
+    line-height: 0.5rem;
+  }
+
+  /* Eyebrow: the quiet label above a title, in sentence case on the caption
+     role. Never tracked capitals: they shout at this size. */
+  .eyebrow {
+    @apply text-caption text-muted-foreground font-medium;
+  }
+
+  .w-sidebar {
+    width: var(--sidebar-width);
+  }
+
+  /* Mtag product actions height */
+  .pb-product-actions {
+    padding-bottom: var(--product-actions-height);
+  }
+
+  /* Match feature animations */
+  .animate-shimmer {
+    animation: shimmer 1.5s ease-in-out infinite;
+  }
+
+  .animate-breathe {
+    animation: breathe 3s ease-in-out infinite;
+  }
+
+  .animate-border-glow {
+    animation: border-glow 2s ease-in-out infinite;
+  }
+
+  .animate-fade-swap {
+    animation: fade-swap 200ms ease-out both;
+  }
+}
+
+/* Focus-ring width. Tailwind v4 only ships ring-{0,1,2,4,8}; the Materia focus
+   ring is 3px (Figma focus/default = drop-shadow spread 3, #6b7280@30%). Mirrors
+   the generated `.ring-2` structure with 3px so `ring-3` (and its variants,
+   focus-visible:ring-3 etc.) behaves exactly like the former `ring-[3px]`. */
+@utility ring-3 {
+  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
+    calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+  box-shadow:
+    var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+/* Transition property lists. Tailwind ships single-property transitions only;
+   each of these sets the same three declarations its arbitrary
+   `transition-[a,b]` form did (property list, default easing, default
+   duration), so `ease-*` and `duration-*` on the element still win. Named for
+   the properties they move. */
+/* Motion durations by name: `duration-normal`, `data-ending-style:duration-quick`.
+   Tailwind's own `duration-*` takes milliseconds only and reads no theme
+   namespace, so without this the `--duration-*` tokens make no class at all.
+   Sets `--tw-duration` as the built-in does, so the transition utilities
+   below pick it up. */
+@utility duration-* {
+  --tw-duration: --value(--duration-*);
+  transition-duration: --value(--duration-*);
+}
+/* Collapsible and accordion panels. The duration lives here rather than in a
+   `duration-*` class because tailwindcss-animate makes `duration-*` set
+   `animation-duration` too, and Base UI then warns that a panel which starts
+   open has both a transition and an animation. */
+@utility transition-panel {
+  transition-property: height, opacity, grid-template-rows;
+  transition-timing-function: var(
+    --tw-ease,
+    var(--default-transition-timing-function)
+  );
+  transition-duration: var(--tw-duration, var(--duration-normal));
+}
+/* The quicker close for a panel, for `data-ending-style:`. Sets the transition
+   duration only, for the same reason as above. */
+@utility transition-panel-close {
+  transition-duration: var(--duration-quick);
+}
+@utility transition-color-shadow {
+  transition-property: color, box-shadow;
+  transition-timing-function: var(
+    --tw-ease,
+    var(--default-transition-timing-function)
+  );
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
+@utility transition-color-shadow-border {
+  transition-property: color, box-shadow, border-color;
+  transition-timing-function: var(
+    --tw-ease,
+    var(--default-transition-timing-function)
+  );
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
+@utility transition-color-bg-shadow-border {
+  transition-property: color, background-color, box-shadow, border-color;
+  transition-timing-function: var(
+    --tw-ease,
+    var(--default-transition-timing-function)
+  );
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
+@utility transition-shadow-border {
+  transition-property: box-shadow, border-color;
+  transition-timing-function: var(
+    --tw-ease,
+    var(--default-transition-timing-function)
+  );
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
+@utility transition-bg-shadow-border {
+  transition-property: background-color, box-shadow, border-color;
+  transition-timing-function: var(
+    --tw-ease,
+    var(--default-transition-timing-function)
+  );
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
+@utility transition-border-shadow-opacity {
+  transition-property: border-color, box-shadow, opacity;
+  transition-timing-function: var(
+    --tw-ease,
+    var(--default-transition-timing-function)
+  );
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
+@utility transition-opacity-translate {
+  transition-property: opacity, translate;
+  transition-timing-function: var(
+    --tw-ease,
+    var(--default-transition-timing-function)
+  );
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
+@utility transition-opacity-transform {
+  transition-property: opacity, transform;
+  transition-timing-function: var(
+    --tw-ease,
+    var(--default-transition-timing-function)
+  );
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
+@utility transition-opacity-bg {
+  transition-property: opacity, background-color;
+  transition-timing-function: var(
+    --tw-ease,
+    var(--default-transition-timing-function)
+  );
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
+@utility transition-opacity-scale-color-bg {
+  transition-property: opacity, scale, color, background-color;
+  transition-timing-function: var(
+    --tw-ease,
+    var(--default-transition-timing-function)
+  );
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
+@utility transition-margin-shadow {
+  transition-property: margin, box-shadow;
+  transition-timing-function: var(
+    --tw-ease,
+    var(--default-transition-timing-function)
+  );
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
+@utility transition-width {
+  transition-property: width;
+  transition-timing-function: var(
+    --tw-ease,
+    var(--default-transition-timing-function)
+  );
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
+@utility transition-stroke-dashoffset {
+  transition-property: stroke-dashoffset;
+  transition-timing-function: var(
+    --tw-ease,
+    var(--default-transition-timing-function)
+  );
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
+@utility transition-inset-start-bottom {
+  transition-property: inset-inline-start, bottom;
+  transition-timing-function: var(
+    --tw-ease,
+    var(--default-transition-timing-function)
+  );
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
+
+/* Safe-area padding: a fixed offset plus the device inset, so chrome clears the
+   notch and home indicator. The number is the offset in rem-quarters, as in the
+   spacing scale (`pt-safe-2` is 0.5rem plus the inset). */
+@utility pt-safe-2 {
+  padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
+}
+@utility pt-safe-18 {
+  padding-top: calc(4.5rem + env(safe-area-inset-top, 0px));
+}
+/* Holds a sticky bar beneath the phone's fixed app bar: 3.5rem of bar plus
+   the top safe-area inset it grows by on notched devices. */
+@utility top-app-bar {
+  top: calc(3.5rem + env(safe-area-inset-top, 0px));
+}
+@utility pb-safe-24 {
+  padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
+}
+/* At least 1rem, growing to the inset when the device needs more. */
+@utility pb-safe-min-4 {
+  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
+}
+
+/* Half-pixel rules for dense tables. Tailwind's border-width scale starts at
+   1px. The style falls back to solid, matching preflight, so these hold even
+   on a page where no stock border utility registered `--tw-border-style`. */
+@utility border-b-hairline {
+  border-bottom-style: var(--tw-border-style, solid);
+  border-bottom-width: 0.5px;
+}
+@utility border-e-hairline {
+  border-inline-end-style: var(--tw-border-style, solid);
+  border-inline-end-width: 0.5px;
+}
+@utility border-s-hairline {
+  border-inline-start-style: var(--tw-border-style, solid);
+  border-inline-start-width: 0.5px;
+}
+/* Folder tile material edge, drawn from the Figma frame. */
+@utility border-folder-edge {
+  border-style: var(--tw-border-style, solid);
+  border-width: 1.584px;
+}
+
+/* Icon stroke widths between Tailwind's stroke-1 and stroke-2. */
+@utility stroke-fine {
+  stroke-width: 1.25;
+}
+@utility stroke-medium {
+  stroke-width: 1.5;
+}
+@utility stroke-bold {
+  stroke-width: 2.5;
+}
+
+@utility rounded-inherit {
+  border-radius: inherit;
+}
+@utility pr-tag-dot {
+  padding-right: 1.25em;
+}
+@utility pb-dialog-lift {
+  padding-bottom: 20vh;
+}
+@utility bg-size-shimmer {
+  background-size: 250% 100%;
+}
+@utility bg-size-checker {
+  background-size: 8px 8px;
+}
+
+/* Single app-wide horizontal page gutter. A live var (not in @theme) so the
+   media query can widen it at sm; consumed by the header and Container's
+   default inset (and SidebarInset in a later stage). 16px base, 24px from sm. */
+:root {
+  --page-gutter: 1rem;
+}
+@media (min-width: 40rem) {
+  :root {
+    --page-gutter: 1.5rem;
+  }
+}
+/* Card inset. `--card-inset` is the one padding value a Card root hands to its
+   parts: the root reads it for vertical padding and the gap between parts,
+   CardHeader and CardContent read it for horizontal padding. Custom properties
+   inherit, so the parts follow the root with no React context, and the
+   responsive and container-query variants of these utilities (safelisted below)
+   change it per breakpoint. The :root default keeps parts used outside a Card
+   at the standard 1.5rem. */
+:root {
+  --card-inset: 1.5rem;
+}
+@utility card-inset-none {
+  --card-inset: 0;
+}
+@utility card-inset-2xs {
+  --card-inset: 0.25rem;
+}
+@utility card-inset-xs {
+  --card-inset: 0.5rem;
+}
+@utility card-inset-sm {
+  --card-inset: 0.75rem;
+}
+@utility card-inset-base {
+  --card-inset: 1rem;
+}
+@utility card-inset-lg {
+  --card-inset: 1.25rem;
+}
+@utility card-inset-xl {
+  --card-inset: 1.5rem;
+}
+@utility card-inset-2xl {
+  --card-inset: 2rem;
+}
+@utility card-inset-3xl {
+  --card-inset: 2.5rem;
+}
+
+@utility px-page-gutter {
+  padding-inline: var(--page-gutter);
+}
+@utility pl-page-gutter {
+  padding-left: var(--page-gutter);
+}
+@utility pr-page-gutter {
+  padding-right: var(--page-gutter);
+}
+/* The same gutter beneath a closing panel, such as the site footer. */
+@utility pb-page-gutter {
+  padding-bottom: var(--page-gutter);
+}
+@utility -mx-page-gutter {
+  margin-inline: calc(-1 * var(--page-gutter));
+}
+
+/* Drawer scrim fade. Base UI's Drawer exposes `--drawer-swipe-progress` (0 at
+   rest, 1 when fully swiped away) on its backdrop; this scales the scrim's
+   opacity by the remaining progress so it fades with the gesture. */
+@utility drawer-scrim-fade {
+  opacity: calc(1 - var(--drawer-swipe-progress, 0));
+}
+
+/* Holds the last frame of an exit animation. Tailwind's `animate-*` shorthand
+   resets `animation-fill-mode` to none, which would snap a closing popup back
+   to visible before it unmounts. */
+@utility fill-mode-forwards {
+  animation-fill-mode: forwards;
+}
+
+/* Header-height layout utilities - registered as @utility so responsive
+   variants (lg:pt-header, md:h-header, etc.) work in Tailwind v4. */
+@utility pt-header {
+  padding-top: var(--header-height);
+}
+@utility mt-header {
+  margin-top: var(--header-height);
+}
+@utility top-header {
+  /* Fallback to the default header height so a fixed element anchored with
+     `bottom-*` stays bounded on routes that never set --header-height (e.g.
+     the immersive canvas layout). Without it, an undefined var resolves to
+     `top: auto`, the element sizes to its content, and tall panels (the cart)
+     overflow past the viewport. */
+  top: var(--header-height, 6rem);
+}
+@utility h-below-header {
+  height: calc(100svh - var(--header-height));
+}
+@utility max-h-below-header {
+  max-height: calc(100vh - var(--header-height));
+}
+@utility h-header {
+  height: var(--header-height);
+}
+@utility pt-header-half {
+  padding-top: calc(var(--header-height) / 2);
+}
+@utility top-header-plus {
+  top: calc(var(--header-height) + 1rem);
+}
+
+/* Transitions.dev - Success check */
+
+/*
+  Usage:
+    <!-- Wrap your icon (SVG, image, anything) in .t-success-check.
+         The wrapper drives fade + rotate + blur + Y-bob; if your
+         icon is an SVG <path>, it gets the stroke-draw animation.
+         Bring your own icon size / colours. -->
+    <span class="t-success-check" data-state="out" aria-hidden="true">
+      <svg viewBox="0 0 48 48" fill="none">
+        <!-- your icon path(s) here -->
+      </svg>
+    </span>
+
+  Trigger:
+    - Cold load is data-state="out" (opacity 0; no animation).
+    - Show: set data-state="in" (fade + rotate + blur + Y-bob
+      + path draw run in parallel).
+
+  Snippet covers the appear transition only - bring your own
+  hide behaviour (e.g. unmount, opacity:0, or a custom exit).
+*/
+
+:root {
+  --check-opacity-dur: 550ms;
+  --check-rotate-dur: 550ms;
+  --check-rotate-from: 80deg;
+  --check-bob-dur: 450ms;
+  --check-y-amount: 40px;
+  --check-blur-dur: 500ms;
+  --check-blur-from: 10px;
+  --check-path-dur: 550ms;
+  --check-path-delay: 80ms;
+  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
+  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
+  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
+  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* Wrapper drives the appear animation; it doesn't own any
+   sizing or colour so you can drop in any icon. It does centre the
+   icon: this rule is unlayered, so a `flex` utility on the wrapper
+   never applies, and an icon smaller than a sized wrapper (a tick in
+   a disc) would otherwise sit in its top-left corner. */
+.t-success-check {
+  display: inline-grid;
+  place-items: center;
+  transform-origin: center;
+  opacity: 0;
+  will-change: transform, opacity, filter;
+}
+/* overflow: visible keeps the stroke from clipping while it
+   draws; display: block kills the inline whitespace under SVGs. */
+.t-success-check svg {
+  display: block;
+  overflow: visible;
+}
+/* Stroke-draw setup. Replace 20 with the result of
+   path.getTotalLength() for your path; round caps mean any
+   sub-pixel overshoot is invisible. */
+.t-success-check svg path {
+  stroke-dasharray: 20;
+  stroke-dashoffset: 20;
+}
+
+.t-success-check[data-state="in"] {
+  animation:
+    t-check-fade var(--check-opacity-dur) var(--check-ease-opacity) forwards,
+    t-check-arrive var(--check-bob-dur) var(--check-ease-bob) forwards,
+    t-check-blur var(--check-blur-dur) var(--check-ease-out) forwards;
+}
+.t-success-check[data-state="in"] svg path {
+  animation: t-check-draw var(--check-path-dur) var(--check-ease-path)
+    var(--check-path-delay, 0ms) forwards;
+}
+
+@keyframes t-check-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Single composite transform for the entrance - combines the bob and
+   the rotate into one keyframe so they share a transform stack.
+   Splitting them into the `translate` property + `transform: rotate(…)`
+   (as in the original snippet) makes the rotation pivot around the
+   layout centre while the element is visually offset by `translate`,
+   producing an arc-shaped sweep - the medallion appears to come in
+   from the bottom-LEFT instead of straight from below. Composing them
+   here pivots around the translated centre, so the motion is true
+   vertical with a rotation in place. */
+@keyframes t-check-arrive {
+  from {
+    transform: translateY(var(--check-y-amount))
+      rotate(var(--check-rotate-from));
+  }
+  to {
+    transform: translateY(0) rotate(0deg);
+  }
+}
+
+@keyframes t-check-blur {
+  from {
+    filter: blur(var(--check-blur-from));
+  }
+  to {
+    filter: blur(0);
+  }
+}
+@keyframes t-check-draw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-success-check {
+    animation: none;
+    opacity: 1;
+  }
+  .t-success-check svg path {
+    animation: none;
+    stroke-dashoffset: 0;
+  }
+}
+
+/* Pulse ring - emits from behind the medallion as the tick lands.
+   Pair with `.t-success-check`: same wrapper toggles data-state="in"
+   on the pulse element to play. Sits behind the medallion (z-0) and
+   never blocks pointer events. */
+.t-success-check-pulse {
+  position: absolute;
+  inset: 0;
+  border-radius: 9999px;
+  background-color: var(--color-green-100, #dcfce7);
+  opacity: 0;
+  transform: scale(0.95);
+  pointer-events: none;
+  will-change: transform, opacity;
+}
+
+.t-success-check-pulse[data-state="in"] {
+  animation: t-check-pulse 900ms cubic-bezier(0.22, 1, 0.36, 1) 240ms forwards;
+}
+
+@keyframes t-check-pulse {
+  0% {
+    transform: scale(0.95);
+    opacity: 0.55;
+  }
+  100% {
+    transform: scale(1.9);
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-success-check-pulse {
+    animation: none;
+    opacity: 0;
+  }
+}
+
+/* SuccessTickRipple - green medallion with celebration ripple.
+
+   Usage:
+     <div class="relative overflow-hidden">
+       <span class="t-success-tick-ripple-field" aria-hidden>
+         <span class="t-success-tick-ripple-glow"></span>
+         <span class="t-success-tick-ripple-ring t-success-tick-ripple-ring-primary"></span>
+         <span class="t-success-tick-ripple-ring t-success-tick-ripple-ring-soft"></span>
+         <span class="t-success-tick-ripple-ring t-success-tick-ripple-ring-sheen"></span>
+       </span>
+       <span class="t-success-tick-medallion">...</span>
+     </div>
+
+   The parent (`position: relative; overflow: hidden`) defines the visual
+   boundary for the ripple. The ripple field is absolutely positioned and
+   attaches to the nearest positioned ancestor. Origin is controlled via
+   `--tick-impact-x` / `--tick-impact-y` on the parent (default 50% / 50%).
+   Animations are CSS-only and run once on mount. */
+
+.t-success-tick-ripple-field {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  /* No `overflow: hidden` - the outer ancestor (e.g. the cart drawer)
+     clips so the bright top of the glow can fade through the surrounding
+     chrome instead of cutting off at a hard inner boundary. */
+}
+
+.t-success-tick-ripple-glow,
+.t-success-tick-ripple-ring {
+  position: absolute;
+  pointer-events: none;
+  will-change: transform, opacity;
+}
+
+/* Residual glow - settles along the top edge and sides of the parent
+   container after the rings sweep past. The parent should NOT have
+   `overflow: hidden` so the bright top of this gradient can fade out
+   into the surrounding chrome instead of cutting off at a hard line. */
+.t-success-tick-ripple-glow {
+  top: 0;
+  left: 50%;
+  width: 124%;
+  height: 72%;
+  transform: translateX(-50%);
+  opacity: 0;
+  background:
+    radial-gradient(
+      ellipse at 50% 0%,
+      rgba(74, 222, 128, 0.22),
+      transparent 58%
+    ),
+    linear-gradient(180deg, rgba(134, 239, 172, 0.16), transparent 72%);
+  animation: t-tick-glow-in 1.2s 700ms cubic-bezier(0.2, 0, 0, 1) forwards;
+}
+
+.t-success-tick-ripple-ring {
+  left: var(--tick-impact-x, 50%);
+  top: var(--tick-impact-y, 50%);
+  width: 42px;
+  height: 42px;
+  border-radius: 9999px;
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0.7);
+  animation: t-tick-ripple-out var(--ring-duration) var(--ring-delay)
+    cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.t-success-tick-ripple-ring-primary {
+  --ring-duration: 1.8s;
+  --ring-delay: 260ms;
+  --ring-scale: 9;
+  background: radial-gradient(
+    circle,
+    rgba(52, 199, 89, 0) 42%,
+    rgba(52, 199, 89, 0.3) 55%,
+    rgba(52, 199, 89, 0) 72%
+  );
+  filter: blur(5px);
+}
+
+.t-success-tick-ripple-ring-soft {
+  --ring-duration: 2.35s;
+  --ring-delay: 340ms;
+  --ring-scale: 11;
+  background: radial-gradient(
+    circle,
+    rgba(134, 239, 172, 0) 38%,
+    rgba(134, 239, 172, 0.24) 56%,
+    rgba(134, 239, 172, 0) 74%
+  );
+  filter: blur(8px);
+}
+
+.t-success-tick-ripple-ring-sheen {
+  --ring-duration: 2.1s;
+  --ring-delay: 460ms;
+  --ring-scale: 10;
+  background: radial-gradient(
+    circle,
+    rgba(255, 255, 255, 0) 44%,
+    rgba(255, 255, 255, 0.58) 58%,
+    rgba(255, 255, 255, 0) 76%
+  );
+  filter: blur(4px);
+}
+
+.t-success-tick-medallion {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  border-radius: 9999px;
+  color: white;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)),
+    #34c759;
+  box-shadow:
+    0 10px 20px rgba(52, 199, 89, 0.28),
+    0 1px 0 rgba(255, 255, 255, 0.28) inset;
+  animation: t-tick-medallion-drop 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.t-success-tick-medallion svg {
+  display: block;
+  width: 56%;
+  height: 56%;
+  overflow: visible;
+}
+
+.t-success-tick-medallion svg path {
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+  animation: t-tick-check-draw 420ms 170ms cubic-bezier(0.16, 1, 0.3, 1)
+    forwards;
+}
+
+@keyframes t-tick-ripple-out {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.7);
+  }
+  10% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(var(--ring-scale));
+  }
+}
+
+@keyframes t-tick-glow-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Drop ~8px from above with a spring-like rebound. Settles by 720ms. */
+@keyframes t-tick-medallion-drop {
+  0% {
+    opacity: 0;
+    transform: translateY(-8px) scale(0.92);
+  }
+  36% {
+    opacity: 1;
+    transform: translateY(1.5px) scale(1.03);
+  }
+  56% {
+    transform: translateY(-1.2px) scale(0.99);
+  }
+  76% {
+    transform: translateY(0.5px) scale(1.005);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes t-tick-check-draw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-success-tick-medallion {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+  .t-success-tick-medallion svg path {
+    animation: none;
+    stroke-dashoffset: 0;
+  }
+  .t-success-tick-ripple-ring,
+  .t-success-tick-ripple-glow {
+    animation: none;
+    opacity: 0;
+  }
+}
+
+/* Mega menu. The sheet unrolls downward from behind the shell's chrome, its
+   content held still, then its links rise in a wave: column by column from the
+   lead link, then down each list. Transitions rather than keyframes, keyed on
+   Base UI's starting and ending styles, so a second press mid-flight reverses
+   from where it is. The open clip reaches past the bottom edge so the sheet's
+   shadow shows. Nothing waits on the wave: every link is live from the first
+   frame. Closing leaves the way it came: the links fade together, quickly, and
+   the emptied sheet rolls back up behind the chrome on a softer curve. */
+[data-slot="mega-menu-content"] {
+  clip-path: inset(0 0 -6rem 0);
+  transition: clip-path var(--duration-normal) var(--ease-sheet);
+}
+[data-slot="mega-menu-content"][data-starting-style] {
+  clip-path: inset(0 0 100% 0);
+}
+[data-slot="mega-menu-content"][data-ending-style] {
+  clip-path: inset(0 0 100% 0);
+  transition: clip-path var(--duration-normal) var(--ease-in-out);
+}
+
+/* Each column's place in the wave, inherited by its links. The lead link is
+   column 0; the wave stops growing after six sections. */
+[data-slot="mega-menu-grid"] > :nth-child(2) {
+  --mega-menu-column: 1;
+}
+[data-slot="mega-menu-grid"] > :nth-child(3) {
+  --mega-menu-column: 2;
+}
+[data-slot="mega-menu-grid"] > :nth-child(4) {
+  --mega-menu-column: 3;
+}
+[data-slot="mega-menu-grid"] > :nth-child(5) {
+  --mega-menu-column: 4;
+}
+[data-slot="mega-menu-grid"] > :nth-child(6) {
+  --mega-menu-column: 5;
+}
+[data-slot="mega-menu-grid"] > :nth-child(n + 7) {
+  --mega-menu-column: 6;
+}
+/* Each link's row beneath its heading, which is row 0. */
+[data-slot="mega-menu-section"] li:nth-child(1) {
+  --mega-menu-row: 1;
+}
+[data-slot="mega-menu-section"] li:nth-child(2) {
+  --mega-menu-row: 2;
+}
+[data-slot="mega-menu-section"] li:nth-child(3) {
+  --mega-menu-row: 3;
+}
+[data-slot="mega-menu-section"] li:nth-child(4) {
+  --mega-menu-row: 4;
+}
+[data-slot="mega-menu-section"] li:nth-child(5) {
+  --mega-menu-row: 5;
+}
+[data-slot="mega-menu-section"] li:nth-child(6) {
+  --mega-menu-row: 6;
+}
+[data-slot="mega-menu-section"] li:nth-child(n + 7) {
+  --mega-menu-row: 7;
+}
+
+[data-slot="mega-menu-content"]
+  :is(
+    [data-slot="mega-menu-lead"],
+    [data-slot="mega-menu-section"] > :first-child,
+    [data-slot="mega-menu-section"] li
+  ) {
+  transition:
+    opacity var(--duration-moderate) var(--ease-out),
+    transform var(--duration-moderate) var(--ease-out);
+  transition-delay: calc(
+    40ms + var(--mega-menu-column, 0) * 40ms + var(--mega-menu-row, 0) * 25ms
+  );
+}
+[data-slot="mega-menu-content"][data-starting-style]
+  :is(
+    [data-slot="mega-menu-lead"],
+    [data-slot="mega-menu-section"] > :first-child,
+    [data-slot="mega-menu-section"] li
+  ) {
+  opacity: 0;
+  transform: translateY(0.5rem);
+}
+[data-slot="mega-menu-content"][data-ending-style]
+  :is(
+    [data-slot="mega-menu-lead"],
+    [data-slot="mega-menu-section"] > :first-child,
+    [data-slot="mega-menu-section"] li
+  ) {
+  opacity: 0;
+  transition: opacity var(--duration-quick) var(--ease-out);
+}
+
+/* Reduced motion: the sheet fades in and out whole, nothing travels or waits. */
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="mega-menu-content"],
+  [data-slot="mega-menu-content"][data-starting-style],
+  [data-slot="mega-menu-content"][data-ending-style] {
+    clip-path: none;
+    transition: opacity var(--duration-normal) var(--ease-out);
+  }
+  [data-slot="mega-menu-content"][data-starting-style],
+  [data-slot="mega-menu-content"][data-ending-style] {
+    opacity: 0;
+  }
+  [data-slot="mega-menu-content"]
+    :is(
+      [data-slot="mega-menu-lead"],
+      [data-slot="mega-menu-section"] > :first-child,
+      [data-slot="mega-menu-section"] li
+    ),
+  [data-slot="mega-menu-content"]:is([data-starting-style], [data-ending-style])
+    :is(
+      [data-slot="mega-menu-lead"],
+      [data-slot="mega-menu-section"] > :first-child,
+      [data-slot="mega-menu-section"] li
+    ) {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}
+
+/* Page side-by-side: two stacked panes crossfade with a short horizontal slide
+   and a touch of blur (PromptPanelStage step transitions). The active pane is
+   selected by `data-page` on `.page-slide`; pane 1 exits left, pane 2 exits
+   right. The stage zeroes the two duration variables inline to snap a pane
+   without animating. */
+:root {
+  --page-slide-dur: var(--duration-normal);
+  --page-fade-dur: var(--duration-normal);
+  --page-slide-distance: 8px;
+  --page-blur: 3px;
+  --page-stagger: 0ms;
+  --page-exit-enabled: 1;
+  --page-slide-ease: var(--ease-out);
+  --page-fade-ease: var(--ease-out);
+}
+
+.page-slide {
+  position: relative;
+}
+.page-slide .page-slide-pane[data-page-id="1"] {
+  --page-slide-from-x: calc(var(--page-slide-distance) * -1);
+}
+.page-slide .page-slide-pane[data-page-id="2"] {
+  --page-slide-from-x: var(--page-slide-distance);
+}
+.page-slide .page-slide-pane {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(
+    calc(var(--page-slide-from-x, 0px) * var(--page-exit-enabled))
+  );
+  filter: blur(calc(var(--page-blur) * var(--page-exit-enabled)));
+  transition:
+    opacity var(--page-fade-dur) var(--page-fade-ease),
+    transform var(--page-slide-dur) var(--page-slide-ease),
+    filter var(--page-slide-dur) var(--page-slide-ease);
+  will-change: opacity, transform, filter;
+}
+.page-slide[data-page="1"] .page-slide-pane[data-page-id="1"],
+.page-slide[data-page="2"] .page-slide-pane[data-page-id="2"] {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(0);
+  filter: blur(0);
+  transition-delay: var(--page-stagger);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .page-slide .page-slide-pane {
+    transition: none;
+  }
+}