{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "styles",
  "type": "registry:item",
  "title": "Styles",
  "description": "Tailwind 4 entry stylesheet: tokens, the app and marketing surfaces, light and dark.",
  "dependencies": [
    "tailwindcss"
  ],
  "files": [
    {
      "path": "src/styles.css",
      "type": "registry:file",
      "target": "styles/wibo-ui.css",
      "content": "/*\n * Wibo UI stylesheet: Tailwind 4, design tokens and the two surfaces.\n *\n * An app imports this file once, as its only Tailwind entry:\n *   @import \"@wibo/ui/styles.css\";\n *\n * Root attributes select the token set:\n *   data-surface=\"app\" | \"marketing\"   (no attribute: app)\n *   data-theme=\"light\" | \"dark\"        (no attribute: follows prefers-color-scheme)\n * A nested element with data-theme switches the scheme for its subtree\n * (for example a dark hero band on a light marketing page).\n *\n * Colours come only from these tokens. Tailwind's default palette is reset,\n * so classes such as bg-blue-500 do not exist. The values below are mirrored\n * in src/tokens/index.ts and a test keeps the two in sync.\n *\n * The app surface follows the Mastra Studio console (mastra-ai/mastra,\n * packages/playground-ui, Apache-2.0): achromatic grey ramp, three stacked\n * surfaces (sidebar, canvas, card), alpha borders, two elevations. The accent\n * is Wibo indigo (#6452d9, from the wordmark). See docs/mastra-reference.md\n * for the source values and the mapping onto these token names.\n */\n\n@import \"tailwindcss\";\n\n/* Scan this package for class names when an app compiles its CSS. */\n@source \"./\";\n\n@custom-variant dark (&:where([data-theme=\"dark\"], [data-theme=\"dark\"] *));\n\n/* ------------------------------------------------------------------------ */\n/* Static tokens: shared by every surface and theme.                         */\n/* ------------------------------------------------------------------------ */\n\n@theme {\n  /* Only Wibo tokens: drop Tailwind's palette, shadows and type scale. */\n  --color-*: initial;\n  --shadow-*: initial;\n  --text-*: initial;\n\n  /* Spacing base: 4 px. Control heights: h-7 (28 px, small), h-8.5 (34 px, default), h-9 (36 px, large); nav rows h-7.5 (30 px). */\n  --spacing: 0.25rem;\n\n  /* Radii: 4 px small, 6 px badges, avatars and inner controls, 10 px nav and menu rows, 14 px cards and menus. */\n  --radius-sm: 4px;\n  --radius-md: 6px;\n  --radius-lg: 10px;\n  --radius-xl: 14px;\n  /*\n   * The control role (`rounded-control`): buttons, inputs, selects, comboboxes,\n   * date ranges, textareas, filter chips and the pill tab track share one\n   * rounded-rectangle corner, so a button sits in a toolbar with the same\n   * silhouette as the field beside it. A surface may redefine the variable.\n   */\n  --radius-control: 8px;\n\n  /* Type scale: 7 UI steps, the 13 px control label, two marketing display sizes. */\n  --text-xs: 0.75rem;\n  --text-xs--line-height: 1rem;\n  --text-label: 0.8125rem;\n  --text-label--line-height: 1.25rem;\n  --text-sm: 0.875rem;\n  --text-sm--line-height: 1.25rem;\n  --text-base: 1rem;\n  --text-base--line-height: 1.5rem;\n  --text-lg: 1.125rem;\n  --text-lg--line-height: 1.75rem;\n  --text-xl: 1.25rem;\n  --text-xl--line-height: 1.75rem;\n  --text-2xl: 1.5rem;\n  --text-2xl--line-height: 2rem;\n  --text-3xl: 1.875rem;\n  --text-3xl--line-height: 2.25rem;\n  --text-display: 4rem;\n  --text-display--line-height: 1.05;\n  --text-display--letter-spacing: -0.03em;\n  --text-display-lg: 6rem;\n  --text-display-lg--line-height: 1;\n  --text-display-lg--letter-spacing: -0.04em;\n\n  /*\n   * Motion: 120 to 220 ms. `ease-out` for colour and opacity, `ease-glide`\n   * (a quint ease-out) for anything that moves: sliding indicators, sheets,\n   * popovers, the press. Every animation and transition is cut under\n   * `prefers-reduced-motion` (base layer below).\n   */\n  --default-transition-duration: 150ms;\n  --default-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  --ease-out: cubic-bezier(0, 0, 0.2, 1);\n  --ease-glide: cubic-bezier(0.22, 1, 0.36, 1);\n\n  --animate-fade-in: wibo-fade-in 150ms cubic-bezier(0, 0, 0.2, 1);\n  --animate-fade-out: wibo-fade-out 150ms cubic-bezier(0, 0, 0.2, 1);\n  --animate-scale-in: wibo-scale-in 150ms cubic-bezier(0, 0, 0.2, 1);\n  --animate-scale-out: wibo-scale-out 150ms cubic-bezier(0, 0, 0.2, 1);\n  --animate-slide-in-right: wibo-slide-in-right 220ms cubic-bezier(0.22, 1, 0.36, 1);\n  --animate-slide-out-right: wibo-slide-out-right 160ms cubic-bezier(0.4, 0, 1, 1);\n  --animate-slide-in-left: wibo-slide-in-left 220ms cubic-bezier(0.22, 1, 0.36, 1);\n  --animate-slide-out-left: wibo-slide-out-left 160ms cubic-bezier(0.4, 0, 1, 1);\n  --animate-slide-in-bottom: wibo-slide-in-bottom 220ms cubic-bezier(0.22, 1, 0.36, 1);\n  --animate-slide-out-bottom: wibo-slide-out-bottom 160ms cubic-bezier(0.4, 0, 1, 1);\n  --animate-slide-in-top: wibo-slide-in-top 220ms cubic-bezier(0.22, 1, 0.36, 1);\n  --animate-slide-out-top: wibo-slide-out-top 160ms cubic-bezier(0.4, 0, 1, 1);\n  /* Menus, popovers, selects, tooltips: a short rise from the trigger's side (`data-side`). */\n  --animate-pop-in: wibo-pop-in 160ms cubic-bezier(0.22, 1, 0.36, 1);\n  --animate-pop-out: wibo-pop-out 120ms cubic-bezier(0.4, 0, 1, 1);\n  /* Dialogs: scale and lift in, fade and settle out. */\n  --animate-dialog-in: wibo-dialog-in 200ms cubic-bezier(0.22, 1, 0.36, 1);\n  --animate-dialog-out: wibo-dialog-out 140ms cubic-bezier(0.4, 0, 1, 1);\n  /* Toasts: rise in from below, leave to the right. */\n  --animate-toast-in: wibo-toast-in 220ms cubic-bezier(0.22, 1, 0.36, 1);\n  --animate-toast-out: wibo-toast-out 160ms cubic-bezier(0.4, 0, 1, 1);\n  /* A page's content on arrival (PageContainer). */\n  --animate-content-in: wibo-content-in 200ms cubic-bezier(0.22, 1, 0.36, 1);\n  /* Loading skeletons: held back 50 ms, so an instant navigation does not flash them. */\n  --animate-skeleton-in: wibo-fade-in 150ms cubic-bezier(0, 0, 0.2, 1) 50ms both;\n  /* Check marks and copied ticks. */\n  --animate-check-in: wibo-check-in 160ms cubic-bezier(0.22, 1, 0.36, 1);\n  /* Nested rows folding open and shut under their row (Radix Collapsible's measured height). */\n  --animate-collapsible-down: wibo-collapsible-down 200ms cubic-bezier(0.22, 1, 0.36, 1);\n  --animate-collapsible-up: wibo-collapsible-up 160ms cubic-bezier(0.22, 1, 0.36, 1);\n\n  @keyframes wibo-fade-in {\n    from { opacity: 0; }\n  }\n  @keyframes wibo-fade-out {\n    to { opacity: 0; }\n  }\n  @keyframes wibo-scale-in {\n    from { opacity: 0; transform: scale(0.97); }\n  }\n  @keyframes wibo-scale-out {\n    to { opacity: 0; transform: scale(0.97); }\n  }\n  @keyframes wibo-pop-in {\n    from { opacity: 0; transform: translate(var(--wibo-pop-x, 0), var(--wibo-pop-y, 0)) scale(0.97); }\n  }\n  @keyframes wibo-pop-out {\n    to { opacity: 0; transform: scale(0.97); }\n  }\n  @keyframes wibo-dialog-in {\n    from { opacity: 0; transform: translateY(6px) scale(0.97); }\n  }\n  @keyframes wibo-dialog-out {\n    to { opacity: 0; transform: scale(0.98); }\n  }\n  @keyframes wibo-toast-in {\n    from { opacity: 0; transform: translateY(12px) scale(0.98); }\n  }\n  @keyframes wibo-toast-out {\n    to { opacity: 0; transform: translateX(16px); }\n  }\n  @keyframes wibo-content-in {\n    from { opacity: 0; transform: translateY(4px); }\n  }\n  @keyframes wibo-check-in {\n    from { opacity: 0; transform: scale(0.6); }\n  }\n  @keyframes wibo-collapsible-down {\n    from { height: 0; opacity: 0; }\n    to { height: var(--radix-collapsible-content-height); }\n  }\n  @keyframes wibo-collapsible-up {\n    from { height: var(--radix-collapsible-content-height); }\n    to { height: 0; opacity: 0; }\n  }\n  @keyframes wibo-slide-in-right {\n    from { transform: translateX(100%); }\n  }\n  @keyframes wibo-slide-out-right {\n    to { transform: translateX(100%); }\n  }\n  @keyframes wibo-slide-in-left {\n    from { transform: translateX(-100%); }\n  }\n  @keyframes wibo-slide-out-left {\n    to { transform: translateX(-100%); }\n  }\n  @keyframes wibo-slide-in-bottom {\n    from { transform: translateY(100%); }\n  }\n  @keyframes wibo-slide-out-bottom {\n    to { transform: translateY(100%); }\n  }\n  @keyframes wibo-slide-in-top {\n    from { transform: translateY(-100%); }\n  }\n  @keyframes wibo-slide-out-top {\n    to { transform: translateY(-100%); }\n  }\n}\n\n/* ------------------------------------------------------------------------ */\n/* Semantic utilities: bg-background, text-muted-foreground, bg-chart-1...   */\n/* `inline` makes each utility read the per-surface variable at use time.    */\n/* ------------------------------------------------------------------------ */\n\n@theme inline {\n  --font-sans: var(--font-geist-sans, \"Geist\"), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  --font-mono: var(--font-geist-mono, \"Geist Mono\"), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", monospace;\n\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-card: var(--card);\n  --color-card-foreground: var(--card-foreground);\n  --color-popover: var(--popover);\n  --color-popover-foreground: var(--popover-foreground);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-primary-hover: var(--primary-hover);\n  --color-secondary: var(--secondary);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-accent-hover: var(--accent-hover);\n  --color-border: var(--border);\n  --color-input: var(--input);\n  --color-ring: var(--ring);\n  --color-sidebar: var(--sidebar);\n  --color-sidebar-foreground: var(--sidebar-foreground);\n  --color-sidebar-hover: var(--sidebar-hover);\n  --color-sidebar-active: var(--sidebar-active);\n  --color-sidebar-border: var(--sidebar-border);\n  --color-success: var(--success);\n  --color-success-foreground: var(--success-foreground);\n  --color-warning: var(--warning);\n  --color-warning-foreground: var(--warning-foreground);\n  --color-danger: var(--danger);\n  --color-danger-foreground: var(--danger-foreground);\n  --color-info: var(--info);\n  --color-info-foreground: var(--info-foreground);\n  --color-chart-1: var(--chart-1);\n  --color-chart-2: var(--chart-2);\n  --color-chart-3: var(--chart-3);\n  --color-chart-4: var(--chart-4);\n  --color-chart-5: var(--chart-5);\n  --color-chart-6: var(--chart-6);\n  --color-avatar-red: var(--avatar-red);\n  --color-avatar-orange: var(--avatar-orange);\n  --color-avatar-amber: var(--avatar-amber);\n  --color-avatar-green: var(--avatar-green);\n  --color-avatar-teal: var(--avatar-teal);\n  --color-avatar-blue: var(--avatar-blue);\n  --color-avatar-indigo: var(--avatar-indigo);\n  --color-avatar-pink: var(--avatar-pink);\n  --color-avatar-face: var(--avatar-face);\n  --color-overlay: var(--overlay);\n\n  --shadow-card: var(--elevation-card);\n  --shadow-overlay: var(--elevation-overlay);\n}\n\n/* ------------------------------------------------------------------------ */\n/* App surface (default). Light.                                             */\n/* Three stacked surfaces: sidebar (gray-3) < canvas (gray-2) < card (white). */\n/* ------------------------------------------------------------------------ */\n\n:root,\n:root[data-surface=\"app\"],\n:root:not([data-surface=\"marketing\"]) [data-theme=\"light\"] {\n  color-scheme: light;\n  --gray-1: oklch(1 0 0);\n  --gray-2: oklch(0.9851 0 0);\n  --gray-3: oklch(0.9642 0 0);\n  --gray-4: oklch(0.9431 0 0);\n  --gray-5: oklch(0.9189 0 0);\n  --gray-6: oklch(0.8945 0 0);\n  --gray-7: oklch(0.8452 0 0);\n  --gray-8: oklch(0.7604 0 0);\n  --gray-9: oklch(0.6201 0 0);\n  --gray-10: oklch(0.5486 0 0);\n  --gray-11: oklch(0.4459 0 0);\n  --gray-12: oklch(0.1286 0 0);\n  --background: var(--gray-2);\n  --foreground: var(--gray-12);\n  --card: var(--gray-1);\n  --card-foreground: var(--gray-12);\n  --popover: var(--gray-1);\n  --popover-foreground: var(--gray-12);\n  --primary: var(--gray-12);\n  --primary-foreground: var(--gray-1);\n  --primary-hover: color-mix(in srgb, var(--primary) 75%, var(--background));\n  --secondary: var(--gray-4);\n  --secondary-foreground: var(--gray-12);\n  --muted: var(--gray-4);\n  --muted-foreground: var(--gray-11);\n  --accent: oklch(0.534 0.198 283.5);\n  --accent-foreground: var(--gray-1);\n  --accent-hover: oklch(0.48 0.198 283.5);\n  --border: oklch(0.205 0 0 / 0.09);\n  --input: oklch(0.205 0 0 / 0.14);\n  --ring: var(--accent);\n  --sidebar: var(--gray-3);\n  --sidebar-foreground: var(--gray-12);\n  --sidebar-hover: oklch(0.205 0 0 / 0.04);\n  --sidebar-active: oklch(0.205 0 0 / 0.06);\n  --sidebar-border: var(--border);\n  --success: oklch(0.47 0.129 150);\n  --success-foreground: var(--gray-1);\n  --warning: oklch(0.5 0.12 54);\n  --warning-foreground: var(--gray-1);\n  --danger: oklch(0.56 0.22 24);\n  --danger-foreground: var(--gray-1);\n  --info: oklch(0.55 0.21 260);\n  --info-foreground: var(--gray-1);\n  --chart-1: oklch(0.575 0.163 255.5);\n  --chart-2: oklch(0.671 0.175 40.6);\n  --chart-3: oklch(0.669 0.141 162.1);\n  --chart-4: oklch(0.764 0.161 75.1);\n  --chart-5: oklch(0.716 0.141 357.4);\n  --chart-6: oklch(0.529 0.18 142.5);\n  --avatar-red: oklch(0.6 0.19 29);\n  --avatar-orange: oklch(0.68 0.165 50);\n  --avatar-amber: oklch(0.74 0.15 76);\n  --avatar-green: oklch(0.66 0.15 142);\n  --avatar-teal: oklch(0.62 0.105 192);\n  --avatar-blue: oklch(0.55 0.15 256);\n  --avatar-indigo: oklch(0.534 0.198 283.5);\n  --avatar-pink: oklch(0.64 0.19 355);\n  --avatar-face: oklch(1 0 0);\n  --overlay: oklch(0.208 0 0 / 0.45);\n  --elevation-card: 0 1px 2px -1px oklch(0 0 0 / 0.05), 0 1px 3px -2px oklch(0 0 0 / 0.04);\n  --elevation-overlay: 0 2px 4px -1px oklch(0 0 0 / 0.08), 0 4px 8px -2px oklch(0 0 0 / 0.06), 0 8px 16px -4px oklch(0 0 0 / 0.06);\n}\n\n/* App surface. Dark: sidebar (gray-1) < canvas (gray-2) < card (gray-3). */\n:root[data-theme=\"dark\"],\n:root[data-surface=\"app\"][data-theme=\"dark\"],\n:root:not([data-surface=\"marketing\"]) [data-theme=\"dark\"] {\n  color-scheme: dark;\n  --gray-1: oklch(0.1382 0 0);\n  --gray-2: oklch(0.1591 0 0);\n  --gray-3: oklch(0.1913 0 0);\n  --gray-4: oklch(0.2178 0 0);\n  --gray-5: oklch(0.2435 0 0);\n  --gray-6: oklch(0.2686 0 0);\n  --gray-7: oklch(0.3092 0 0);\n  --gray-8: oklch(0.3715 0 0);\n  --gray-9: oklch(0.4495 0 0);\n  --gray-10: oklch(0.5208 0 0);\n  --gray-11: oklch(0.65 0 0);\n  --gray-12: oklch(0.9851 0 0);\n  --background: var(--gray-2);\n  --foreground: var(--gray-12);\n  --card: var(--gray-3);\n  --card-foreground: var(--gray-12);\n  --popover: var(--gray-3);\n  --popover-foreground: var(--gray-12);\n  --primary: var(--gray-12);\n  --primary-foreground: var(--gray-2);\n  --primary-hover: color-mix(in srgb, var(--primary) 75%, var(--background));\n  --secondary: var(--gray-5);\n  --secondary-foreground: var(--gray-12);\n  --muted: var(--gray-4);\n  --muted-foreground: var(--gray-11);\n  --accent: oklch(0.68 0.15 283.5);\n  --accent-foreground: var(--gray-1);\n  --accent-hover: oklch(0.62 0.15 283.5);\n  --border: oklch(1 0 0 / 0.09);\n  --input: oklch(1 0 0 / 0.14);\n  --ring: var(--accent);\n  --sidebar: var(--gray-1);\n  --sidebar-foreground: var(--gray-12);\n  --sidebar-hover: oklch(1 0 0 / 0.04);\n  --sidebar-active: oklch(1 0 0 / 0.06);\n  --sidebar-border: var(--border);\n  --success: oklch(0.7 0.15 150);\n  --success-foreground: var(--gray-1);\n  --warning: oklch(0.86 0.146 84);\n  --warning-foreground: var(--gray-1);\n  --danger: oklch(0.7 0.18 24);\n  --danger-foreground: var(--gray-1);\n  --info: oklch(0.7 0.157 260);\n  --info-foreground: var(--gray-1);\n  --chart-1: oklch(0.622 0.161 255.1);\n  --chart-2: oklch(0.622 0.173 40.1);\n  --chart-3: oklch(0.621 0.128 163.1);\n  --chart-4: oklch(0.67 0.143 73.2);\n  --chart-5: oklch(0.622 0.171 0.8);\n  --chart-6: oklch(0.529 0.18 142.5);\n  --avatar-red: oklch(0.6 0.175 29);\n  --avatar-orange: oklch(0.67 0.15 50);\n  --avatar-amber: oklch(0.72 0.135 76);\n  --avatar-green: oklch(0.64 0.135 142);\n  --avatar-teal: oklch(0.61 0.095 192);\n  --avatar-blue: oklch(0.58 0.14 256);\n  --avatar-indigo: oklch(0.58 0.18 283.5);\n  --avatar-pink: oklch(0.63 0.17 355);\n  --avatar-face: oklch(0.97 0 0);\n  --overlay: oklch(0 0 0 / 0.75);\n  --elevation-card: inset 0 1px 0 oklch(1 0 0 / 0.03), 0 1px 2px -1px oklch(0 0 0 / 0.22), 0 2px 3px -2px oklch(0 0 0 / 0.14);\n  --elevation-overlay: inset 0 1px 0 oklch(1 0 0 / 0.03), 0 2px 2px oklch(0 0 0 / 0.1), 0 4px 4px oklch(0 0 0 / 0.1), 0 8px 8px oklch(0 0 0 / 0.1);\n}\n\n/* App surface. Dark through the operating system when no data-theme is set. */\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]),\n  :root[data-surface=\"app\"]:not([data-theme]) {\n    color-scheme: dark;\n    --gray-1: oklch(0.1382 0 0);\n    --gray-2: oklch(0.1591 0 0);\n    --gray-3: oklch(0.1913 0 0);\n    --gray-4: oklch(0.2178 0 0);\n    --gray-5: oklch(0.2435 0 0);\n    --gray-6: oklch(0.2686 0 0);\n    --gray-7: oklch(0.3092 0 0);\n    --gray-8: oklch(0.3715 0 0);\n    --gray-9: oklch(0.4495 0 0);\n    --gray-10: oklch(0.5208 0 0);\n    --gray-11: oklch(0.65 0 0);\n    --gray-12: oklch(0.9851 0 0);\n    --background: var(--gray-2);\n    --foreground: var(--gray-12);\n    --card: var(--gray-3);\n    --card-foreground: var(--gray-12);\n    --popover: var(--gray-3);\n    --popover-foreground: var(--gray-12);\n    --primary: var(--gray-12);\n    --primary-foreground: var(--gray-2);\n    --primary-hover: color-mix(in srgb, var(--primary) 75%, var(--background));\n    --secondary: var(--gray-5);\n    --secondary-foreground: var(--gray-12);\n    --muted: var(--gray-4);\n    --muted-foreground: var(--gray-11);\n    --accent: oklch(0.68 0.15 283.5);\n    --accent-foreground: var(--gray-1);\n    --accent-hover: oklch(0.62 0.15 283.5);\n    --border: oklch(1 0 0 / 0.09);\n    --input: oklch(1 0 0 / 0.14);\n    --ring: var(--accent);\n    --sidebar: var(--gray-1);\n    --sidebar-foreground: var(--gray-12);\n    --sidebar-hover: oklch(1 0 0 / 0.04);\n    --sidebar-active: oklch(1 0 0 / 0.06);\n    --sidebar-border: var(--border);\n    --success: oklch(0.7 0.15 150);\n    --success-foreground: var(--gray-1);\n    --warning: oklch(0.86 0.146 84);\n    --warning-foreground: var(--gray-1);\n    --danger: oklch(0.7 0.18 24);\n    --danger-foreground: var(--gray-1);\n    --info: oklch(0.7 0.157 260);\n    --info-foreground: var(--gray-1);\n    --chart-1: oklch(0.622 0.161 255.1);\n    --chart-2: oklch(0.622 0.173 40.1);\n    --chart-3: oklch(0.621 0.128 163.1);\n    --chart-4: oklch(0.67 0.143 73.2);\n    --chart-5: oklch(0.622 0.171 0.8);\n    --chart-6: oklch(0.529 0.18 142.5);\n    --avatar-red: oklch(0.6 0.175 29);\n    --avatar-orange: oklch(0.67 0.15 50);\n    --avatar-amber: oklch(0.72 0.135 76);\n    --avatar-green: oklch(0.64 0.135 142);\n    --avatar-teal: oklch(0.61 0.095 192);\n    --avatar-blue: oklch(0.58 0.14 256);\n    --avatar-indigo: oklch(0.58 0.18 283.5);\n    --avatar-pink: oklch(0.63 0.17 355);\n    --avatar-face: oklch(0.97 0 0);\n    --overlay: oklch(0 0 0 / 0.75);\n    --elevation-card: inset 0 1px 0 oklch(1 0 0 / 0.03), 0 1px 2px -1px oklch(0 0 0 / 0.22), 0 2px 3px -2px oklch(0 0 0 / 0.14);\n    --elevation-overlay: inset 0 1px 0 oklch(1 0 0 / 0.03), 0 2px 2px oklch(0 0 0 / 0.1), 0 4px 4px oklch(0 0 0 / 0.1), 0 8px 8px oklch(0 0 0 / 0.1);\n  }\n}\n\n/* ------------------------------------------------------------------------ */\n/* Marketing surface. Light. Same ramp; white canvas, accent primary.        */\n/* ------------------------------------------------------------------------ */\n\n:root[data-surface=\"marketing\"],\n[data-surface=\"marketing\"] [data-theme=\"light\"] {\n  color-scheme: light;\n  --gray-1: oklch(1 0 0);\n  --gray-2: oklch(0.9851 0 0);\n  --gray-3: oklch(0.9642 0 0);\n  --gray-4: oklch(0.9431 0 0);\n  --gray-5: oklch(0.9189 0 0);\n  --gray-6: oklch(0.8945 0 0);\n  --gray-7: oklch(0.8452 0 0);\n  --gray-8: oklch(0.7604 0 0);\n  --gray-9: oklch(0.6201 0 0);\n  --gray-10: oklch(0.5486 0 0);\n  --gray-11: oklch(0.4459 0 0);\n  --gray-12: oklch(0.1286 0 0);\n  --background: var(--gray-1);\n  --foreground: var(--gray-12);\n  --card: var(--gray-2);\n  --card-foreground: var(--gray-12);\n  --popover: var(--gray-1);\n  --popover-foreground: var(--gray-12);\n  --primary: var(--accent);\n  --primary-foreground: var(--accent-foreground);\n  --primary-hover: var(--accent-hover);\n  --secondary: var(--gray-4);\n  --secondary-foreground: var(--gray-12);\n  --muted: var(--gray-3);\n  --muted-foreground: var(--gray-11);\n  --accent: oklch(0.534 0.198 283.5);\n  --accent-foreground: var(--gray-1);\n  --accent-hover: oklch(0.48 0.198 283.5);\n  --border: oklch(0.205 0 0 / 0.09);\n  --input: oklch(0.205 0 0 / 0.14);\n  --ring: var(--accent);\n  --sidebar: var(--gray-3);\n  --sidebar-foreground: var(--gray-12);\n  --sidebar-hover: oklch(0.205 0 0 / 0.04);\n  --sidebar-active: oklch(0.205 0 0 / 0.06);\n  --sidebar-border: var(--border);\n  --success: oklch(0.47 0.129 150);\n  --success-foreground: var(--gray-1);\n  --warning: oklch(0.5 0.12 54);\n  --warning-foreground: var(--gray-1);\n  --danger: oklch(0.56 0.22 24);\n  --danger-foreground: var(--gray-1);\n  --info: oklch(0.55 0.21 260);\n  --info-foreground: var(--gray-1);\n  --chart-1: oklch(0.575 0.163 255.5);\n  --chart-2: oklch(0.671 0.175 40.6);\n  --chart-3: oklch(0.669 0.141 162.1);\n  --chart-4: oklch(0.764 0.161 75.1);\n  --chart-5: oklch(0.716 0.141 357.4);\n  --chart-6: oklch(0.529 0.18 142.5);\n  --avatar-red: oklch(0.6 0.19 29);\n  --avatar-orange: oklch(0.68 0.165 50);\n  --avatar-amber: oklch(0.74 0.15 76);\n  --avatar-green: oklch(0.66 0.15 142);\n  --avatar-teal: oklch(0.62 0.105 192);\n  --avatar-blue: oklch(0.55 0.15 256);\n  --avatar-indigo: oklch(0.534 0.198 283.5);\n  --avatar-pink: oklch(0.64 0.19 355);\n  --avatar-face: oklch(1 0 0);\n  --overlay: oklch(0.208 0 0 / 0.45);\n  --elevation-card: 0 1px 2px -1px oklch(0 0 0 / 0.05), 0 16px 40px -16px oklch(0 0 0 / 0.12);\n  --elevation-overlay: 0 2px 4px -1px oklch(0 0 0 / 0.08), 0 4px 8px -2px oklch(0 0 0 / 0.06), 0 8px 16px -4px oklch(0 0 0 / 0.06);\n}\n\n/* Marketing surface. Dark. */\n:root[data-surface=\"marketing\"][data-theme=\"dark\"],\n[data-surface=\"marketing\"] [data-theme=\"dark\"] {\n  color-scheme: dark;\n  --gray-1: oklch(0.1382 0 0);\n  --gray-2: oklch(0.1591 0 0);\n  --gray-3: oklch(0.1913 0 0);\n  --gray-4: oklch(0.2178 0 0);\n  --gray-5: oklch(0.2435 0 0);\n  --gray-6: oklch(0.2686 0 0);\n  --gray-7: oklch(0.3092 0 0);\n  --gray-8: oklch(0.3715 0 0);\n  --gray-9: oklch(0.4495 0 0);\n  --gray-10: oklch(0.5208 0 0);\n  --gray-11: oklch(0.65 0 0);\n  --gray-12: oklch(0.9851 0 0);\n  --background: var(--gray-1);\n  --foreground: var(--gray-12);\n  --card: var(--gray-2);\n  --card-foreground: var(--gray-12);\n  --popover: var(--gray-3);\n  --popover-foreground: var(--gray-12);\n  --primary: var(--accent);\n  --primary-foreground: var(--accent-foreground);\n  --primary-hover: var(--accent-hover);\n  --secondary: var(--gray-5);\n  --secondary-foreground: var(--gray-12);\n  --muted: var(--gray-4);\n  --muted-foreground: var(--gray-11);\n  --accent: oklch(0.68 0.15 283.5);\n  --accent-foreground: var(--gray-1);\n  --accent-hover: oklch(0.62 0.15 283.5);\n  --border: oklch(1 0 0 / 0.09);\n  --input: oklch(1 0 0 / 0.14);\n  --ring: var(--accent);\n  --sidebar: var(--gray-1);\n  --sidebar-foreground: var(--gray-12);\n  --sidebar-hover: oklch(1 0 0 / 0.04);\n  --sidebar-active: oklch(1 0 0 / 0.06);\n  --sidebar-border: var(--border);\n  --success: oklch(0.7 0.15 150);\n  --success-foreground: var(--gray-1);\n  --warning: oklch(0.86 0.146 84);\n  --warning-foreground: var(--gray-1);\n  --danger: oklch(0.7 0.18 24);\n  --danger-foreground: var(--gray-1);\n  --info: oklch(0.7 0.157 260);\n  --info-foreground: var(--gray-1);\n  --chart-1: oklch(0.622 0.161 255.1);\n  --chart-2: oklch(0.622 0.173 40.1);\n  --chart-3: oklch(0.621 0.128 163.1);\n  --chart-4: oklch(0.67 0.143 73.2);\n  --chart-5: oklch(0.622 0.171 0.8);\n  --chart-6: oklch(0.529 0.18 142.5);\n  --avatar-red: oklch(0.6 0.175 29);\n  --avatar-orange: oklch(0.67 0.15 50);\n  --avatar-amber: oklch(0.72 0.135 76);\n  --avatar-green: oklch(0.64 0.135 142);\n  --avatar-teal: oklch(0.61 0.095 192);\n  --avatar-blue: oklch(0.58 0.14 256);\n  --avatar-indigo: oklch(0.58 0.18 283.5);\n  --avatar-pink: oklch(0.63 0.17 355);\n  --avatar-face: oklch(0.97 0 0);\n  --overlay: oklch(0 0 0 / 0.75);\n  --elevation-card: inset 0 1px 0 oklch(1 0 0 / 0.03), 0 1px 2px -1px oklch(0 0 0 / 0.3), 0 16px 40px -16px oklch(0 0 0 / 0.6);\n  --elevation-overlay: inset 0 1px 0 oklch(1 0 0 / 0.03), 0 2px 2px oklch(0 0 0 / 0.1), 0 4px 4px oklch(0 0 0 / 0.1), 0 8px 8px oklch(0 0 0 / 0.1);\n}\n\n/* Marketing surface. Dark through the operating system when no data-theme is set. */\n@media (prefers-color-scheme: dark) {\n  :root[data-surface=\"marketing\"]:not([data-theme]) {\n    color-scheme: dark;\n    --gray-1: oklch(0.1382 0 0);\n    --gray-2: oklch(0.1591 0 0);\n    --gray-3: oklch(0.1913 0 0);\n    --gray-4: oklch(0.2178 0 0);\n    --gray-5: oklch(0.2435 0 0);\n    --gray-6: oklch(0.2686 0 0);\n    --gray-7: oklch(0.3092 0 0);\n    --gray-8: oklch(0.3715 0 0);\n    --gray-9: oklch(0.4495 0 0);\n    --gray-10: oklch(0.5208 0 0);\n    --gray-11: oklch(0.65 0 0);\n    --gray-12: oklch(0.9851 0 0);\n    --background: var(--gray-1);\n    --foreground: var(--gray-12);\n    --card: var(--gray-2);\n    --card-foreground: var(--gray-12);\n    --popover: var(--gray-3);\n    --popover-foreground: var(--gray-12);\n    --primary: var(--accent);\n    --primary-foreground: var(--accent-foreground);\n    --primary-hover: var(--accent-hover);\n    --secondary: var(--gray-5);\n    --secondary-foreground: var(--gray-12);\n    --muted: var(--gray-4);\n    --muted-foreground: var(--gray-11);\n    --accent: oklch(0.68 0.15 283.5);\n    --accent-foreground: var(--gray-1);\n    --accent-hover: oklch(0.62 0.15 283.5);\n    --border: oklch(1 0 0 / 0.09);\n    --input: oklch(1 0 0 / 0.14);\n    --ring: var(--accent);\n    --sidebar: var(--gray-1);\n    --sidebar-foreground: var(--gray-12);\n    --sidebar-hover: oklch(1 0 0 / 0.04);\n    --sidebar-active: oklch(1 0 0 / 0.06);\n    --sidebar-border: var(--border);\n    --success: oklch(0.7 0.15 150);\n    --success-foreground: var(--gray-1);\n    --warning: oklch(0.86 0.146 84);\n    --warning-foreground: var(--gray-1);\n    --danger: oklch(0.7 0.18 24);\n    --danger-foreground: var(--gray-1);\n    --info: oklch(0.7 0.157 260);\n    --info-foreground: var(--gray-1);\n    --chart-1: oklch(0.622 0.161 255.1);\n    --chart-2: oklch(0.622 0.173 40.1);\n    --chart-3: oklch(0.621 0.128 163.1);\n    --chart-4: oklch(0.67 0.143 73.2);\n    --chart-5: oklch(0.622 0.171 0.8);\n    --chart-6: oklch(0.529 0.18 142.5);\n    --avatar-red: oklch(0.6 0.175 29);\n    --avatar-orange: oklch(0.67 0.15 50);\n    --avatar-amber: oklch(0.72 0.135 76);\n    --avatar-green: oklch(0.64 0.135 142);\n    --avatar-teal: oklch(0.61 0.095 192);\n    --avatar-blue: oklch(0.58 0.14 256);\n    --avatar-indigo: oklch(0.58 0.18 283.5);\n    --avatar-pink: oklch(0.63 0.17 355);\n    --avatar-face: oklch(0.97 0 0);\n    --overlay: oklch(0 0 0 / 0.75);\n    --elevation-card: inset 0 1px 0 oklch(1 0 0 / 0.03), 0 1px 2px -1px oklch(0 0 0 / 0.3), 0 16px 40px -16px oklch(0 0 0 / 0.6);\n    --elevation-overlay: inset 0 1px 0 oklch(1 0 0 / 0.03), 0 2px 2px oklch(0 0 0 / 0.1), 0 4px 4px oklch(0 0 0 / 0.1), 0 8px 8px oklch(0 0 0 / 0.1);\n  }\n}\n\n/* ------------------------------------------------------------------------ */\n/* Base styles.                                                              */\n/* ------------------------------------------------------------------------ */\n\n@layer base {\n  /*\n   * Font tokens as plain variables for custom CSS (`var(--font-sans)`).\n   * Declared on body as well, so a next/font variable class placed on <body>\n   * still resolves.\n   */\n  :root,\n  body {\n    --font-sans: --theme(--font-sans);\n    --font-mono: --theme(--font-mono);\n  }\n\n  *,\n  ::after,\n  ::before,\n  ::backdrop,\n  ::file-selector-button {\n    border-color: var(--border);\n  }\n\n  /* Thin scrollbars on the console surfaces, as in Mastra Studio. */\n  * {\n    scrollbar-width: thin;\n    scrollbar-color: var(--input) transparent;\n  }\n\n  body {\n    background-color: var(--background);\n    color: var(--foreground);\n    font-family: --theme(--font-sans);\n    font-size: --theme(--text-sm);\n    line-height: --theme(--text-sm--line-height);\n    /* Numbers are data: tabular figures everywhere by default. */\n    font-variant-numeric: tabular-nums;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  :root[data-surface=\"marketing\"] body {\n    font-size: --theme(--text-base);\n    line-height: --theme(--text-base--line-height);\n  }\n\n  /* With the app shell mounted the page scrolls inside its frame, so the\n     document must not bounce and drag the shell along. */\n  html:has([data-slot=\"app-shell\"]) {\n    overscroll-behavior-y: none;\n  }\n\n  code,\n  kbd,\n  samp,\n  pre {\n    font-family: --theme(--font-mono);\n  }\n\n  ::selection {\n    background-color: color-mix(in oklab, var(--accent) 22%, transparent);\n  }\n\n  :focus-visible {\n    outline-color: var(--ring);\n  }\n\n  /*\n   * Reduced motion: no animation, no transition, no delay. The delays matter:\n   * an entrance held back with `both` (the skeleton fade) would otherwise sit\n   * invisible for its delay.\n   */\n  @media (prefers-reduced-motion: reduce) {\n    *,\n    ::after,\n    ::before {\n      animation-duration: 0.01ms !important;\n      animation-delay: 0s !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      transition-delay: 0s !important;\n      scroll-behavior: auto !important;\n    }\n  }\n}\n\n/* ------------------------------------------------------------------------ */\n/* The press: everything clickable gives a little under the pointer.         */\n/*                                                                           */\n/*   press        0.97   buttons, chips, tabs, crumbs: compact controls      */\n/*   press-item   0.99   rows and cards: anything up to a column wide        */\n/*   press-icon   0.92   icon-only buttons, checkboxes, switches             */\n/*                                                                           */\n/* The utility owns the element's transition (colours, shadow, opacity and   */\n/* transform, 120 ms unless a `duration-*` says otherwise): the press goes   */\n/* in over 75 ms and comes back on the element's own duration. Nothing       */\n/* presses while disabled, and nothing presses under reduced motion. An      */\n/* element stays put while a nested control is the thing being pressed       */\n/* (`:active` is true for every ancestor of the pressed element).            */\n/* ------------------------------------------------------------------------ */\n\n@property --press-scale {\n  syntax: \"<number>\";\n  inherits: false;\n  initial-value: 0.97;\n}\n\n@utility press {\n  transition-property:\n    color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity,\n    box-shadow, transform, translate, scale;\n  transition-timing-function: var(--tw-ease, var(--ease-glide));\n  transition-duration: var(--tw-duration, 120ms);\n  @media (prefers-reduced-motion: no-preference) {\n    &:active:not(:disabled, [aria-disabled=\"true\"], [data-disabled]:not([data-disabled=\"false\"])):not(\n        :has(\n            :is(\n                a[href],\n                button,\n                [role=\"button\"],\n                [role=\"checkbox\"],\n                [role=\"switch\"],\n                [role=\"tab\"],\n                [role=\"menuitem\"],\n                [role=\"option\"],\n                .press,\n                .press-item,\n                .press-icon\n              ):active\n          )\n      ) {\n      transform: scale(var(--press-scale));\n      transition-duration: 75ms;\n    }\n  }\n}\n\n@utility press-item {\n  @apply press;\n  --press-scale: 0.99;\n}\n\n@utility press-icon {\n  @apply press;\n  --press-scale: 0.92;\n}\n\n/* ------------------------------------------------------------------------ */\n/* Agent avatars: the motion of `AgentAvatar` (components/agent-avatar.tsx). */\n/*                                                                           */\n/*   data-motion=\"static\"     nothing moves                                  */\n/*   data-motion=\"idle\"       a blink now and then, a slow breath            */\n/*   data-motion=\"thinking\"   eyes glance around, the head ponders, the      */\n/*                            shoulders glow                                 */\n/*   data-motion=\"greeting\"   a hop on mount, then idle                      */\n/*                                                                           */\n/* Transforms and opacity only. Lengths are view-box units (the avatar is    */\n/* drawn on 48), so the motion scales with the avatar. Each instance carries */\n/* its own durations and negative delays (`--agent-avatar-*`), so avatars on */\n/* one page never blink or breathe in step. Nothing moves under reduced      */\n/* motion: the rules live inside `no-preference`.                            */\n/* ------------------------------------------------------------------------ */\n\n@layer components {\n  .agent-avatar :is(.agent-avatar-head, .agent-avatar-look, .agent-avatar-eyes, .agent-avatar-body) {\n    transform-box: fill-box;\n  }\n  .agent-avatar .agent-avatar-head {\n    transform-origin: 50% 100%;\n  }\n  .agent-avatar :is(.agent-avatar-look, .agent-avatar-eyes) {\n    transform-origin: 50% 50%;\n  }\n  .agent-avatar .agent-avatar-body {\n    transform-origin: 50% 0%;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    .agent-avatar:is([data-motion=\"idle\"], [data-motion=\"greeting\"], [data-motion=\"thinking\"]) .agent-avatar-eyes {\n      animation: wibo-avatar-blink var(--agent-avatar-blink, 6s) linear var(--agent-avatar-blink-delay, 0s) infinite;\n    }\n    .agent-avatar[data-blink=\"twice\"]:is([data-motion=\"idle\"], [data-motion=\"greeting\"]) .agent-avatar-eyes {\n      animation-name: wibo-avatar-blink-twice;\n    }\n    .agent-avatar:is([data-motion=\"idle\"], [data-motion=\"greeting\"]) .agent-avatar-body {\n      animation: wibo-avatar-breathe var(--agent-avatar-breath, 4.8s) ease-in-out var(--agent-avatar-breath-delay, 0s) infinite;\n    }\n    .agent-avatar[data-motion=\"idle\"] .agent-avatar-head {\n      animation: wibo-avatar-nod var(--agent-avatar-breath, 4.8s) ease-in-out var(--agent-avatar-breath-delay, 0s) infinite;\n    }\n    .agent-avatar[data-motion=\"greeting\"] .agent-avatar-head {\n      animation:\n        wibo-avatar-hop 900ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both,\n        wibo-avatar-nod var(--agent-avatar-breath, 4.8s) ease-in-out 1020ms infinite;\n    }\n    .agent-avatar[data-motion=\"greeting\"] .agent-avatar-look {\n      animation: wibo-avatar-smile 900ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;\n    }\n\n    /* Working: a quicker blink, the eyes look around, the head ponders side to side, the shoulders glow. */\n    .agent-avatar[data-motion=\"thinking\"] .agent-avatar-eyes {\n      animation-duration: calc(var(--agent-avatar-blink, 6s) * 0.6);\n    }\n    .agent-avatar[data-motion=\"thinking\"] .agent-avatar-look {\n      animation: wibo-avatar-glance 3.2s cubic-bezier(0.45, 0, 0.2, 1) var(--agent-avatar-breath-delay, 0s) infinite;\n    }\n    .agent-avatar[data-motion=\"thinking\"] .agent-avatar-head {\n      animation: wibo-avatar-ponder 2.4s ease-in-out var(--agent-avatar-breath-delay, 0s) infinite;\n    }\n    .agent-avatar[data-motion=\"thinking\"] .agent-avatar-body {\n      animation: wibo-avatar-glow 1.6s ease-in-out infinite;\n    }\n\n    @media (hover: hover) {\n      .agent-avatar:is([data-motion=\"idle\"], [data-motion=\"greeting\"]):hover .agent-avatar-head {\n        animation: wibo-avatar-hop 900ms cubic-bezier(0.22, 1, 0.36, 1) both;\n      }\n      .agent-avatar:is([data-motion=\"idle\"], [data-motion=\"greeting\"]):hover .agent-avatar-look {\n        animation: wibo-avatar-smile 900ms cubic-bezier(0.22, 1, 0.36, 1) both;\n      }\n    }\n  }\n}\n\n@keyframes wibo-avatar-blink {\n  0%, 94%, 97%, 100% { transform: scaleY(1); }\n  95.5% { transform: scaleY(0.1); }\n}\n@keyframes wibo-avatar-blink-twice {\n  0%, 90%, 93%, 96%, 100% { transform: scaleY(1); }\n  91.5%, 94.5% { transform: scaleY(0.1); }\n}\n@keyframes wibo-avatar-breathe {\n  0%, 100% { transform: translateY(0) scaleX(1); }\n  50% { transform: translateY(-0.55px) scaleX(1.015); }\n}\n@keyframes wibo-avatar-nod {\n  0%, 100% { transform: translateY(0); }\n  50% { transform: translateY(-0.3px); }\n}\n@keyframes wibo-avatar-hop {\n  0%, 100% { transform: translateY(0) rotate(0); }\n  30% { transform: translateY(-2.2px) rotate(-7deg); }\n  55% { transform: translateY(0) rotate(4deg); }\n  75% { transform: translateY(0) rotate(-1.5deg); }\n}\n@keyframes wibo-avatar-smile {\n  0%, 100% { transform: translateY(0) scaleY(1); }\n  25%, 55% { transform: translateY(-0.4px) scaleY(0.45); }\n}\n@keyframes wibo-avatar-glance {\n  0%, 6%, 100% { transform: translate(0, 0); }\n  14%, 32% { transform: translate(-1.6px, 0); }\n  42%, 60% { transform: translate(1.6px, 0); }\n  70%, 88% { transform: translate(0.5px, -1.5px); }\n}\n@keyframes wibo-avatar-ponder {\n  0%, 50%, 100% { transform: translateY(0) rotate(0); }\n  25% { transform: translateY(-0.9px) rotate(-4deg); }\n  75% { transform: translateY(-0.9px) rotate(4deg); }\n}\n@keyframes wibo-avatar-glow {\n  0%, 100% { opacity: 0.4; }\n  50% { opacity: 0.62; }\n}\n"
    }
  ]
}