@brainfish-ai/devdoc 0.1.21

package/renderer/app/globals.css

@@ -0,0 +1,1103 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+/* Custom xs breakpoint for extra small screens */
+@custom-media --xs (min-width: 480px);
+@media (min-width: 480px) {
+  .xs\:inline { display: inline; }
+  .xs\:flex { display: flex; }
+  .xs\:hidden { display: none; }
+  .xs\:block { display: block; }
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --animate-shine: shine var(--duration) infinite linear;
+  @keyframes shine {
+  0% {
+    background-position: 0% 0%;
+    }
+  50% {
+    background-position: 100% 100%;
+    }
+  to {
+    background-position: 0% 0%;
+    }
+  }
+}
+
+:root {
+  --radius: 0.625rem;
+  /* Shadcn Default Neutral Light Theme with Brainfish Primary */
+  --background: oklch(1 0 0); /* Pure white */
+  --foreground: oklch(0.145 0 0); /* Near black */
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.65 0.18 140); /* Brainfish vibrant green - single primary */
+  --primary-foreground: oklch(0.985 0 0); /* White text on primary */
+  --secondary: oklch(0.965 0 0); /* Neutral gray */
+  --secondary-foreground: oklch(0.145 0 0);
+  --muted: oklch(0.965 0 0);
+  --muted-foreground: oklch(0.45 0 0);
+  --accent: oklch(0.965 0 0);
+  --accent-foreground: oklch(0.145 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.65 0.18 140); /* Focus ring matches primary */
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.65 0.18 140); /* Same primary green */
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.965 0 0);
+  --sidebar-accent-foreground: oklch(0.145 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.65 0.18 140);
+
+  /* Custom header background color */
+  --header-bg-custom: #a3e635;
+
+  /* Inkeep-style colors for chat button */
+  --inkeep-primary-text-bold: #171717;
+  --gray-dark-600: #171717;
+}
+
+.dark {
+  /* Shadcn Default Neutral Dark Theme with Brainfish Primary */
+  --background: oklch(0.145 0 0); /* Near black */
+  --foreground: oklch(0.985 0 0); /* Near white */
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.65 0.18 140); /* Same Brainfish green - single primary */
+  --primary-foreground: oklch(0.145 0 0); /* Dark text on primary for contrast */
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.65 0.18 140); /* Focus ring matches primary */
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.145 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.65 0.18 140); /* Same primary green */
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.65 0.18 140);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  
+  /* Custom scrollbar - light and thin */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
+  }
+  
+  .dark * {
+    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
+  }
+  
+  /* Webkit scrollbar (Chrome, Safari, Edge) */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  ::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 3px;
+  }
+  
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.25);
+  }
+  
+  .dark ::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.15);
+  }
+  
+  .dark ::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.25);
+  }
+}
+
+@layer utilities {
+  .bg-inkeep-primary-text-bold {
+    background-color: var(--inkeep-primary-text-bold);
+  }
+  .dark\:bg-gray-dark-600 {
+    @apply dark:bg-[var(--gray-dark-600)];
+  }
+}
+
+/* Custom spinner animations */
+@keyframes spinner-wave {
+  0%, 40%, 100% {
+    transform: scaleY(0.4);
+  }
+  20% {
+    transform: scaleY(1.0);
+  }
+}
+
+@keyframes spinner-bounce-smooth {
+  0%, 80%, 100% {
+    transform: scale(0);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes spinner-orbit {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spinner-glow {
+  0%, 100% {
+    opacity: 0.3;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1.1);
+  }
+}
+
+.animate-wave {
+  animation: spinner-wave 1.2s ease-in-out infinite;
+}
+
+.animate-bounce-smooth {
+  animation: spinner-bounce-smooth 1.4s ease-in-out infinite;
+}
+
+.animate-orbit {
+  animation: spinner-orbit 1s linear infinite;
+}
+
+.animate-orbit-reverse {
+  animation: spinner-orbit 1.5s linear infinite reverse;
+}
+
+.animate-glow {
+  animation: spinner-glow 2s ease-in-out infinite;
+}
+
+/* ============================================
+   Mermaid Diagram Dark Mode Overrides
+   ============================================ */
+
+/* Force all node shapes to have dark blue background */
+.mermaid .node rect,
+.mermaid .node circle,
+.mermaid .node ellipse,
+.mermaid .node polygon,
+.mermaid .node path {
+  fill: #3b82f6 !important;
+  stroke: #60a5fa !important;
+}
+
+/* Force all node text to be white */
+.mermaid .node .label,
+.mermaid .nodeLabel,
+.mermaid .node text,
+.mermaid .label text,
+.mermaid text.nodeLabel,
+.mermaid .flowchart-label text {
+  fill: #ffffff !important;
+  color: #ffffff !important;
+}
+
+/* Cluster/subgraph styling */
+.mermaid .cluster rect {
+  fill: #1f2937 !important;
+  stroke: #4b5563 !important;
+}
+
+.mermaid .cluster text,
+.mermaid .cluster .nodeLabel {
+  fill: #e5e7eb !important;
+}
+
+/* Edge/arrow styling */
+.mermaid .edgePath path,
+.mermaid .flowchart-link {
+  stroke: #94a3b8 !important;
+}
+
+.mermaid marker path {
+  fill: #94a3b8 !important;
+}
+
+/* Edge labels */
+.mermaid .edgeLabel text,
+.mermaid .edgeLabel {
+  fill: #e5e7eb !important;
+  color: #e5e7eb !important;
+}
+
+.mermaid .edgeLabel rect {
+  fill: #1e1e1e !important;
+  opacity: 0.8 !important;
+}
+
+/* Sequence diagram specific */
+.mermaid .actor {
+  fill: #3b82f6 !important;
+  stroke: #60a5fa !important;
+}
+
+.mermaid .actor text {
+  fill: #ffffff !important;
+}
+
+.mermaid .messageText {
+  fill: #e5e7eb !important;
+}
+
+.mermaid line.messageLine0,
+.mermaid line.messageLine1 {
+  stroke: #94a3b8 !important;
+}
+
+/* Notes in sequence diagrams */
+.mermaid .note {
+  fill: #374151 !important;
+  stroke: #4b5563 !important;
+}
+
+.mermaid .noteText {
+  fill: #e5e7eb !important;
+}
+
+/* Loop boxes */
+.mermaid .loopText text {
+  fill: #e5e7eb !important;
+}
+
+.mermaid .loopLine {
+  stroke: #4b5563 !important;
+}
+
+/* Activation boxes */
+.mermaid .activation0,
+.mermaid .activation1,
+.mermaid .activation2 {
+  fill: #3b82f6 !important;
+  stroke: #60a5fa !important;
+}
+
+/* ============================================
+   Prose Typography - Headers
+   ============================================ */
+
+/* Header configuration variables */
+:root {
+  --docs-h1-size: 2.25rem;
+  --docs-h1-weight: 700;
+  --docs-h1-line-height: 1.2;
+  --docs-h1-margin-top: 0;
+  --docs-h1-margin-bottom: 1.5rem;
+  
+  --docs-h2-size: 1.875rem;
+  --docs-h2-weight: 600;
+  --docs-h2-line-height: 1.3;
+  --docs-h2-margin-top: 2.5rem;
+  --docs-h2-margin-bottom: 1rem;
+  --docs-h2-border: 1px solid var(--border);
+  
+  --docs-h3-size: 1.5rem;
+  --docs-h3-weight: 600;
+  --docs-h3-line-height: 1.4;
+  --docs-h3-margin-top: 2rem;
+  --docs-h3-margin-bottom: 0.75rem;
+  
+  --docs-h4-size: 1.25rem;
+  --docs-h4-weight: 600;
+  --docs-h4-line-height: 1.4;
+  --docs-h4-margin-top: 1.5rem;
+  --docs-h4-margin-bottom: 0.5rem;
+  
+  --docs-h5-size: 1.125rem;
+  --docs-h5-weight: 600;
+  --docs-h5-line-height: 1.5;
+  --docs-h5-margin-top: 1.25rem;
+  --docs-h5-margin-bottom: 0.5rem;
+  
+  --docs-h6-size: 1rem;
+  --docs-h6-weight: 600;
+  --docs-h6-line-height: 1.5;
+  --docs-h6-margin-top: 1rem;
+  --docs-h6-margin-bottom: 0.5rem;
+}
+
+.docs-prose h1,
+.docs-prose.prose h1,
+.docs-prose.prose-sm h1 {
+  font-size: var(--docs-h1-size) !important;
+  font-weight: var(--docs-h1-weight) !important;
+  line-height: var(--docs-h1-line-height) !important;
+  margin-top: var(--docs-h1-margin-top) !important;
+  margin-bottom: var(--docs-h1-margin-bottom) !important;
+  color: var(--foreground) !important;
+  letter-spacing: -0.025em;
+}
+
+.docs-prose h2,
+.docs-prose.prose h2,
+.docs-prose.prose-sm h2 {
+  font-size: var(--docs-h2-size) !important;
+  font-weight: var(--docs-h2-weight) !important;
+  line-height: var(--docs-h2-line-height) !important;
+  margin-top: var(--docs-h2-margin-top) !important;
+  margin-bottom: var(--docs-h2-margin-bottom) !important;
+  padding-bottom: 0.5rem;
+  border-bottom: var(--docs-h2-border);
+  color: var(--foreground) !important;
+  letter-spacing: -0.02em;
+}
+
+.docs-prose h3,
+.docs-prose.prose h3,
+.docs-prose.prose-sm h3 {
+  font-size: var(--docs-h3-size) !important;
+  font-weight: var(--docs-h3-weight) !important;
+  line-height: var(--docs-h3-line-height) !important;
+  margin-top: var(--docs-h3-margin-top) !important;
+  margin-bottom: var(--docs-h3-margin-bottom) !important;
+  color: var(--foreground) !important;
+  letter-spacing: -0.015em;
+}
+
+/* Reset margins for card titles */
+.docs-card h3,
+.docs-card .docs-card-title,
+.docs-prose .docs-card h3,
+.docs-prose .docs-card .docs-card-title {
+  font-size: 1rem !important;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  line-height: 1.5 !important;
+}
+
+.docs-prose h4,
+.docs-prose.prose h4,
+.docs-prose.prose-sm h4 {
+  font-size: var(--docs-h4-size) !important;
+  font-weight: var(--docs-h4-weight) !important;
+  line-height: var(--docs-h4-line-height) !important;
+  margin-top: var(--docs-h4-margin-top) !important;
+  margin-bottom: var(--docs-h4-margin-bottom) !important;
+  color: var(--foreground) !important;
+}
+
+.docs-prose h5,
+.docs-prose.prose h5,
+.docs-prose.prose-sm h5 {
+  font-size: var(--docs-h5-size) !important;
+  font-weight: var(--docs-h5-weight) !important;
+  line-height: var(--docs-h5-line-height) !important;
+  margin-top: var(--docs-h5-margin-top) !important;
+  margin-bottom: var(--docs-h5-margin-bottom) !important;
+  color: var(--foreground) !important;
+}
+
+.docs-prose h6,
+.docs-prose.prose h6,
+.docs-prose.prose-sm h6 {
+  font-size: var(--docs-h6-size) !important;
+  font-weight: var(--docs-h6-weight) !important;
+  line-height: var(--docs-h6-line-height) !important;
+  margin-top: var(--docs-h6-margin-top) !important;
+  margin-bottom: var(--docs-h6-margin-bottom) !important;
+  color: var(--muted-foreground) !important;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* First heading in content should have no top margin */
+.docs-prose > h1:first-child,
+.docs-prose > h2:first-child,
+.docs-prose > h3:first-child,
+.docs-prose > h4:first-child,
+.docs-prose > h5:first-child,
+.docs-prose > h6:first-child {
+  margin-top: 0;
+}
+
+/* Anchor links on headers */
+.docs-prose h1 a,
+.docs-prose h2 a,
+.docs-prose h3 a,
+.docs-prose h4 a,
+.docs-prose h5 a,
+.docs-prose h6 a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.docs-prose h1 a:hover,
+.docs-prose h2 a:hover,
+.docs-prose h3 a:hover,
+.docs-prose h4 a:hover,
+.docs-prose h5 a:hover,
+.docs-prose h6 a:hover {
+  text-decoration: underline;
+}
+
+/* ============================================
+   Prose Typography - Lists
+   ============================================ */
+
+/* List configuration variables */
+:root {
+  --docs-list-margin: 1.25rem 0;
+  --docs-list-padding-left: 1.5rem;
+  --docs-list-item-margin: 0.5rem 0;
+  --docs-list-item-padding-left: 0.375rem;
+  --docs-list-nested-margin-top: 0.5rem;
+  --docs-list-bullet-color: var(--muted-foreground);
+  --docs-list-number-color: var(--muted-foreground);
+}
+
+/* Unordered lists */
+.docs-prose ul,
+.docs-prose.prose ul,
+.docs-prose.prose-sm ul {
+  list-style-type: disc !important;
+  margin: var(--docs-list-margin) !important;
+  padding-left: var(--docs-list-padding-left) !important;
+}
+
+.docs-prose ul li,
+.docs-prose.prose ul li,
+.docs-prose.prose-sm ul li {
+  margin: var(--docs-list-item-margin) !important;
+  padding-left: var(--docs-list-item-padding-left) !important;
+  color: var(--foreground) !important;
+}
+
+.docs-prose ul li::marker,
+.docs-prose.prose ul li::marker,
+.docs-prose.prose-sm ul li::marker {
+  color: var(--docs-list-bullet-color) !important;
+}
+
+/* Nested unordered lists */
+.docs-prose ul ul,
+.docs-prose.prose ul ul,
+.docs-prose.prose-sm ul ul {
+  list-style-type: circle !important;
+  margin-top: var(--docs-list-nested-margin-top) !important;
+  margin-bottom: 0 !important;
+}
+
+.docs-prose ul ul ul,
+.docs-prose.prose ul ul ul,
+.docs-prose.prose-sm ul ul ul {
+  list-style-type: square !important;
+}
+
+/* Ordered lists */
+.docs-prose ol,
+.docs-prose.prose ol,
+.docs-prose.prose-sm ol {
+  list-style-type: decimal !important;
+  margin: var(--docs-list-margin) !important;
+  padding-left: var(--docs-list-padding-left) !important;
+}
+
+.docs-prose ol li,
+.docs-prose.prose ol li,
+.docs-prose.prose-sm ol li {
+  margin: var(--docs-list-item-margin) !important;
+  padding-left: var(--docs-list-item-padding-left) !important;
+  color: var(--foreground) !important;
+}
+
+.docs-prose ol li::marker,
+.docs-prose.prose ol li::marker,
+.docs-prose.prose-sm ol li::marker {
+  color: var(--docs-list-number-color) !important;
+  font-weight: 500 !important;
+}
+
+/* Nested ordered lists */
+.docs-prose ol ol,
+.docs-prose.prose ol ol,
+.docs-prose.prose-sm ol ol {
+  list-style-type: lower-alpha !important;
+  margin-top: var(--docs-list-nested-margin-top) !important;
+  margin-bottom: 0 !important;
+}
+
+.docs-prose ol ol ol,
+.docs-prose.prose ol ol ol,
+.docs-prose.prose-sm ol ol ol {
+  list-style-type: lower-roman !important;
+}
+
+/* Mixed nested lists */
+.docs-prose ul ol,
+.docs-prose ol ul {
+  margin-top: var(--docs-list-nested-margin-top);
+  margin-bottom: 0;
+}
+
+/* Task/Checkbox lists */
+.docs-prose ul.contains-task-list {
+  list-style-type: none;
+  padding-left: 0;
+}
+
+.docs-prose ul.contains-task-list li {
+  padding-left: 0;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.docs-prose ul.contains-task-list input[type="checkbox"] {
+  margin-top: 0.25rem;
+  width: 1rem;
+  height: 1rem;
+  accent-color: var(--primary);
+}
+
+/* Definition lists */
+.docs-prose dl {
+  margin: var(--docs-list-margin);
+}
+
+.docs-prose dt {
+  font-weight: 600;
+  color: var(--foreground);
+  margin-top: 1rem;
+}
+
+.docs-prose dt:first-child {
+  margin-top: 0;
+}
+
+.docs-prose dd {
+  margin-left: var(--docs-list-padding-left);
+  margin-top: 0.25rem;
+  color: var(--muted-foreground);
+}
+
+/* ============================================
+   Prose Typography - Paragraphs & Links
+   ============================================ */
+
+:root {
+  --docs-paragraph-margin: 1rem 0;
+  --docs-paragraph-line-height: 1.75;
+  --docs-link-color: var(--primary);
+  --docs-link-hover-color: var(--primary);
+}
+
+.docs-prose p,
+.docs-prose.prose p,
+.docs-prose.prose-sm p {
+  margin: var(--docs-paragraph-margin) !important;
+  line-height: var(--docs-paragraph-line-height) !important;
+  color: var(--foreground) !important;
+}
+
+.docs-prose p:first-child,
+.docs-prose.prose p:first-child,
+.docs-prose.prose-sm p:first-child {
+  margin-top: 0 !important;
+}
+
+.docs-prose p:last-child,
+.docs-prose.prose p:last-child,
+.docs-prose.prose-sm p:last-child {
+  margin-bottom: 0 !important;
+}
+
+.docs-prose a,
+.docs-prose.prose a,
+.docs-prose.prose-sm a {
+  color: var(--docs-link-color) !important;
+  text-decoration: underline !important;
+  text-underline-offset: 2px !important;
+  transition: color 0.15s ease;
+}
+
+.docs-prose a:hover,
+.docs-prose.prose a:hover,
+.docs-prose.prose-sm a:hover {
+  color: var(--docs-link-hover-color) !important;
+  text-decoration-thickness: 2px !important;
+}
+
+/* Remove underline from card links */
+.docs-card-link {
+  text-decoration: none !important;
+  display: block;
+}
+
+.docs-card-link:hover {
+  text-decoration: none !important;
+}
+
+/* Ensure card links in prose don't get link styling */
+.docs-prose .docs-card-link,
+.docs-prose.prose .docs-card-link,
+.docs-prose.prose-sm .docs-card-link {
+  text-decoration: none !important;
+  color: inherit !important;
+}
+
+.docs-prose .docs-card-link:hover,
+.docs-prose.prose .docs-card-link:hover,
+.docs-prose.prose-sm .docs-card-link:hover {
+  text-decoration: none !important;
+  color: inherit !important;
+}
+
+/* Strong and emphasis */
+.docs-prose strong,
+.docs-prose.prose strong,
+.docs-prose.prose-sm strong {
+  font-weight: 600 !important;
+  color: var(--foreground) !important;
+}
+
+.docs-prose em,
+.docs-prose.prose em,
+.docs-prose.prose-sm em {
+  font-style: italic !important;
+}
+
+/* Blockquotes */
+.docs-prose blockquote,
+.docs-prose.prose blockquote,
+.docs-prose.prose-sm blockquote {
+  margin: 1.5rem 0 !important;
+  padding: 0.5rem 0 0.5rem 1rem !important;
+  border-left: 4px solid var(--primary) !important;
+  background-color: var(--muted) !important;
+  border-radius: 0 0.5rem 0.5rem 0 !important;
+}
+
+.docs-prose blockquote p,
+.docs-prose.prose blockquote p,
+.docs-prose.prose-sm blockquote p {
+  color: var(--muted-foreground) !important;
+  font-style: italic !important;
+}
+
+/* Horizontal rule */
+.docs-prose hr,
+.docs-prose.prose hr,
+.docs-prose.prose-sm hr {
+  margin: 2rem 0 !important;
+  border: none !important;
+  border-top: 1px solid var(--border) !important;
+}
+
+/* ============================================
+   Prose Table Styles
+   ============================================ */
+
+/* Table configuration variables */
+:root {
+  --docs-table-border: 1px solid var(--border);
+  --docs-table-border-radius: 0.5rem;
+  --docs-table-header-bg: var(--muted);
+  --docs-table-row-hover: var(--muted);
+  --docs-table-cell-padding: 0.75rem 1rem;
+}
+
+.docs-prose table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  margin: 1.5rem 0;
+  font-size: 0.875rem;
+  border: var(--docs-table-border);
+  border-radius: var(--docs-table-border-radius);
+  overflow: hidden;
+}
+
+.docs-prose thead {
+  background-color: var(--docs-table-header-bg);
+}
+
+.docs-prose th {
+  padding: var(--docs-table-cell-padding);
+  text-align: left;
+  font-weight: 600;
+  color: var(--foreground);
+  border-bottom: var(--docs-table-border);
+  border-right: var(--docs-table-border);
+}
+
+.docs-prose th:last-child {
+  border-right: none;
+}
+
+.docs-prose td {
+  padding: var(--docs-table-cell-padding);
+  border-bottom: var(--docs-table-border);
+  border-right: var(--docs-table-border);
+  color: var(--muted-foreground);
+}
+
+.docs-prose td:last-child {
+  border-right: none;
+}
+
+.docs-prose tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.docs-prose tbody tr:hover {
+  background-color: var(--docs-table-row-hover);
+}
+
+/* Responsive table wrapper */
+.docs-prose .table-wrapper {
+  overflow-x: auto;
+  margin: 1.5rem 0;
+}
+
+/* Borderless table variant - add class "borderless" to table */
+.docs-prose table.borderless,
+.docs-prose table[data-borderless] {
+  border: none;
+  border-radius: 0;
+}
+
+.docs-prose table.borderless th,
+.docs-prose table.borderless td,
+.docs-prose table[data-borderless] th,
+.docs-prose table[data-borderless] td {
+  border-right: none;
+}
+
+/* ============================================
+   Code Block Syntax Highlighting (rehype-pretty-code)
+   ============================================ */
+
+/* Code block container */
+[data-rehype-pretty-code-figure] {
+  margin: 1rem 0;
+}
+
+/* Pre element styles */
+[data-rehype-pretty-code-figure] pre {
+  padding: 1rem 0;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  font-size: 0.875rem;
+  line-height: 1.7;
+  border: 1px solid var(--border);
+}
+
+/* Code element inside pre */
+[data-rehype-pretty-code-figure] pre > code {
+  display: grid;
+  background: transparent !important;
+  padding: 0 !important;
+  border: none !important;
+  font-family: var(--font-geist-mono), ui-monospace, monospace;
+}
+
+/* Inline code (not in pre) */
+:not(pre) > code {
+  padding: 0.2em 0.4em;
+  border-radius: 0.25rem;
+  background-color: var(--muted);
+  font-size: 0.875em;
+  font-family: var(--font-geist-mono), ui-monospace, monospace;
+}
+
+/* Inline code figures from rehype-pretty-code - keep them inline */
+[data-rehype-pretty-code-figure]:not(:has(pre)) {
+  display: inline !important;
+  margin: 0 !important;
+  border: none !important;
+  background: transparent !important;
+  border-radius: 0 !important;
+  overflow: visible !important;
+}
+
+[data-rehype-pretty-code-figure]:not(:has(pre)) code {
+  display: inline !important;
+  padding: 0.2em 0.4em !important;
+  border-radius: 0.25rem !important;
+  background-color: var(--muted) !important;
+  font-size: 0.875em !important;
+  font-family: var(--font-geist-mono), ui-monospace, monospace !important;
+  color: inherit !important;
+}
+
+/* Remove line highlighting styles from inline code */
+[data-rehype-pretty-code-figure]:not(:has(pre)) [data-line] {
+  display: inline !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+[data-rehype-pretty-code-figure]:not(:has(pre)) [data-highlighted-line] {
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+/* Code block with title - wrapper styling like CodeGroup */
+[data-rehype-pretty-code-figure]:has([data-rehype-pretty-code-title]) {
+  border-radius: 0.75rem;
+  border: 1px solid rgb(39, 39, 42);
+  overflow: hidden;
+  background-color: #1a1a1a;
+  margin: 1rem 0;
+  position: relative;
+}
+
+[data-rehype-pretty-code-figure]:has([data-rehype-pretty-code-title]) pre {
+  border: none !important;
+  border-radius: 0 !important;
+  margin: 0;
+  background-color: #1a1a1a !important;
+}
+
+/* Title text as tab - matches CodeGroup tab */
+[data-rehype-pretty-code-title] {
+  display: inline-block;
+  font-family: var(--font-geist-mono), ui-monospace, monospace;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: white;
+  padding: 0.625rem 1rem;
+  margin: 0;
+  position: relative;
+  white-space: nowrap;
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+}
+
+/* Green underline - matches CodeGroup tab indicator */
+[data-rehype-pretty-code-title]::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0.5rem;
+  right: 0.5rem;
+  height: 2px;
+  background-color: rgb(16, 185, 129);
+  border-radius: 9999px;
+}
+
+/* Code copy button header wrapper */
+.code-header-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  background-color: #262626;
+  padding-right: 0.5rem;
+}
+
+/* Copy button styling - matches CodeGroup */
+.code-copy-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.375rem;
+  border-radius: 0.25rem;
+  color: rgb(113, 113, 122);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s;
+  flex-shrink: 0;
+}
+
+.code-copy-button:hover {
+  color: rgb(212, 212, 216);
+  background-color: rgba(113, 113, 122, 0.2);
+}
+
+.code-copy-button:focus {
+  outline: none;
+}
+
+.code-copy-button:focus-visible {
+  ring: 2px;
+  ring-color: rgba(var(--primary), 0.5);
+}
+
+/* Floating copy button for code blocks without title */
+.code-copy-button-floating {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+[data-rehype-pretty-code-figure]:hover .code-copy-button-floating,
+pre:hover .code-copy-button-floating {
+  opacity: 1;
+}
+
+/* Pre after title - connects to header */
+[data-rehype-pretty-code-title] + pre {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-top: none;
+  margin-top: 0;
+}
+
+/* Line numbers */
+code[data-line-numbers] {
+  counter-reset: line;
+}
+
+code[data-line-numbers] > [data-line]::before {
+  counter-increment: line;
+  content: counter(line);
+  display: inline-block;
+  width: 1.5rem;
+  margin-right: 1.5rem;
+  text-align: right;
+  color: var(--muted-foreground);
+  opacity: 0.5;
+}
+
+/* Line styling */
+[data-line] {
+  display: block;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+/* Line highlighting */
+[data-highlighted-line] {
+  background-color: rgba(16, 185, 129, 0.1);
+  box-shadow: inset 2px 0 0 rgb(16, 185, 129);
+}
+
+/* Word highlighting */
+[data-highlighted-chars] {
+  background-color: rgba(255, 255, 0, 0.2);
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.25rem;
+}
+
+/* Diff highlighting */
+[data-diff-add] {
+  background-color: rgba(34, 197, 94, 0.15);
+}
+
+[data-diff-remove] {
+  background-color: rgba(239, 68, 68, 0.15);
+}
+
+/* Code block background - dark theme to match CodeGroup */
+[data-rehype-pretty-code-figure] pre {
+  background-color: #1a1a1a;
+  border-color: #3f3f46;
+}
+
+/* Code blocks with titles get different border radius */
+[data-rehype-pretty-code-title] + pre {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: 0.75rem;
+  border-bottom-right-radius: 0.75rem;
+}
+
+/* Standalone code blocks (no title) */
+[data-rehype-pretty-code-figure]:not(:has([data-rehype-pretty-code-title])) pre {
+  border-radius: 0.75rem;
+  background-color: #1a1a1a !important;
+  border: 1px solid rgb(39, 39, 42) !important;
+}
+
+/* Scroll margin for agent navigation */
+[id] {
+  scroll-margin-top: 80px;
+}