diff --git a/example/src/app/layout.tsx b/example/src/app/layout.tsx
index 0f1c53d..213ed72 100644
--- a/example/src/app/layout.tsx
+++ b/example/src/app/layout.tsx
@@ -9,7 +9,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body style={{ margin: 0, background: "#0a0a0f", color: "#f0f0f5" }}>
+      <body style={{ margin: 0, background: "#0a0a0f", color: "#f0f0f5", fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" }}>
         {children}
       </body>
     </html>
diff --git a/src/client/AIAssistantProvider.tsx b/src/client/AIAssistantProvider.tsx
index 17b9e56..0885ed8 100644
--- a/src/client/AIAssistantProvider.tsx
+++ b/src/client/AIAssistantProvider.tsx
@@ -249,6 +249,20 @@ export default function AIAssistantProvider({
     }
   }, [explainMode]);
 
+  // Inject global styles via DOM to avoid SSR hydration mismatch
+  // (inline <style> tags with quotes get HTML-escaped differently on server vs client)
+  useEffect(() => {
+    const id = "nb-explain-styles";
+    if (document.getElementById(id)) return;
+    const style = document.createElement("style");
+    style.id = id;
+    style.textContent = S.CSS_VARS + S.ANIMATIONS + S.HIGHLIGHT_STYLES;
+    document.head.appendChild(style);
+    return () => {
+      style.remove();
+    };
+  }, []);
+
   return (
     <AIAssistantContext.Provider
       value={{
@@ -262,9 +276,6 @@ export default function AIAssistantProvider({
         clearExplainContext,
       }}
     >
-      {/* Inject CSS custom properties, animations, and highlight styles */}
-      <style>{S.CSS_VARS + S.ANIMATIONS + S.HIGHLIGHT_STYLES}</style>
-
       {children}
 
       {/* Explain mode banner */}
