Fix Mermaid diagram text visibility and styling issues

- Add essential CSS for proper text display in diagram nodes and edges
- Fix foreignObject text container inheritance for proper styling
- Ensure node labels and edge labels are visible with correct fonts
- Add responsive sizing for mobile devices
- Remove complex styling that was causing text clipping issues
- Simplify diagram container styling for better compatibility

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

public/themes-manifest.json

@@ -15,5 +15,5 @@
       "hasMasterSlide": true
     }
   },
-  "generated": "2025-08-22T02:33:14.669Z"
+  "generated": "2025-08-22T11:35:39.977Z"
 }

public/themes/default/layouts/diagram-slide.html

@@ -13,6 +13,12 @@
        data-placeholder="Enter Mermaid diagram syntax here..."
        data-multiline="true">{{diagram}}</div>
 
+  <div class="slot content-slot" data-slot="content2" data-placeholder="Second content block" data-required>
+            <span class="fade-in-slow">
+            {{content2}}
+            </span>
+
+  </div>
   <div class="slot notes-content" 
        data-slot="notes" 
        data-type="text"

public/themes/default/style.css

@@ -774,30 +774,73 @@ pre.code-content::before {
 
 /* Enhanced Mermaid diagram styling */
 .mermaid-container {
-  margin: 1rem 0;
+
-  padding: 1.5rem;
-  background: rgba(255, 255, 255, 0.02);
-  border-radius: 12px;
-  border: 1px solid var(--theme-secondary);
-  text-align: center;
-  overflow: hidden;
-  width: 100%;
-  max-width: 100%;
 }
 
+.mermaid-diagram svg {
+
+
+}
+
+/* Minimal essential styling for Mermaid text visibility */
+.mermaid-diagram svg .nodeLabel,
+.mermaid-diagram svg .edgeLabel {
+  font-size: 14px !important;
+  font-family: var(--theme-font-body) !important;
+  font-weight: 600 !important;
+}
+
+/* Fix for foreignObject text containers */
+.mermaid-diagram svg foreignObject div {
+  color: inherit !important;
+  font-size: inherit !important;
+  font-family: inherit !important;
+}
+
+.mermaid-diagram svg foreignObject .nodeLabel p,
+.mermaid-diagram svg foreignObject .edgeLabel p {
+  color: inherit !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  font-size: inherit !important;
+  font-family: inherit !important;
+  font-weight: inherit !important;
+}
+
+/* Edge label background visibility */
+.mermaid-diagram svg .edgeLabel .labelBkg {
+
+}
+
+.mermaid-diagram svg .edgeLabel .labelBkg p {
+
+}
 .mermaid-diagram {
-  max-width: 100%;
+
-  height: auto;
+}
-  display: flex;
+
-  align-items: center;
+/* Responsive diagram sizing */
-  justify-content: center;
+@media (max-width: 768px) {
+  .mermaid-container {
+    padding: 1rem;
+    margin: 0.5rem 0;
   }
   
   .mermaid-diagram svg {
     max-width: 100%;
     height: auto;
-  background: transparent;
+  }
-  border-radius: 8px;
+  
+  .mermaid-diagram svg .nodeLabel,
+  .mermaid-diagram svg .edgeLabel {
+    font-size: 12px !important;
+  }
+}
+.mermaid-diagram {
+    width: 100%;
+    height: auto;
+    max-width: 100%;
+    margin: 0 auto;
 }
 
 .diagram-error {