fix: enhance inline code styling in mdx-components

- Distinguish inline vs block code in <code> component
- Inline code: bg-ink/[0.06] light / bg-white/[0.08] dark, no language classes
- Block code: pass className through unchanged (no double-styling)
- <pre> component: remove bg-surface/rounded-xl/overflow-x-auto/p-4
- <pre> now relies on globals.css for block code styling

mdx-components.tsx

@@ -44,16 +44,25 @@ export function getMDXComponents(components: MDXComponents): MDXComponents {
         </a>
       )
     },
-    code: ({ children, ...props }) => (
+    code: ({ children, className, ...props }: { children: React.ReactNode; className?: string }) => {
-      <code
+      const match = /language-(\w+)/.exec(className || '');
-        {...props}
+      const language = match ? match[1] : '';
-        className="rounded bg-surface px-[0.3rem] py-[0.2rem] font-mono text-sm text-ink"
+      const isInline = !className?.includes('language-');
-      >
+
-        {children}
+      if (isInline) {
-      </code>
+        return (
-    ),
+          <code
-    pre: ({ children, ...props }) => (
+            className="rounded-md bg-ink/[0.06] px-1.5 py-[0.15rem] font-mono text-[0.8125rem] leading-[1.4] dark:bg-white/[0.08]"
-      <pre {...props} className="overflow-x-auto rounded-xl bg-surface text-sm my-6 p-4">
+            {...props}
+          >
+            {children}
+          </code>
+        );
+      }
+      return <code className={className} {...props} />;
+    },
+    pre: ({ children, ...props }: { children: React.ReactNode; [key: string]: any }) => (
+      <pre className="my-6 p-0" {...props}>
         {children}
       </pre>
     ),