Fix RevealSlideshow marker text styling

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

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

Author: ofriw

website/src/components/PresentationMode/RevealSlideshow.tsx

@@ -22,6 +22,7 @@ import ThreeContextWorkflow from '../VisualElements/ThreeContextWorkflow';
 import ContextWindowMeter from '../VisualElements/ContextWindowMeter';
 import AbstractShapesVisualization from '../VisualElements/AbstractShapesVisualization';
 import PlanningStrategyComparison from '../VisualElements/PlanningStrategyComparison';
+import CompoundQualityVisualization from '../VisualElements/CompoundQualityVisualization';
 
 interface SpeakerNotes {
   talkingPoints: string;
@@ -90,6 +91,7 @@ const VISUAL_COMPONENTS = {
   ContextWindowMeter,
   AbstractShapesVisualization,
   PlanningStrategyComparison,
+  CompoundQualityVisualization,
 };
 
 export default function RevealSlideshow({

website/src/css/custom.css

@@ -175,8 +175,10 @@
   /* All emphasis colors desaturated for optimal dark mode readability */
 }
 
-/* Mermaid diagram styling - Centered horizontally */
-.mermaid {
+/* Mermaid diagram styling - Centered horizontally
+   Docusaurus theme-mermaid uses CSS modules with hashed class names (e.g., container_lyt7)
+   Target using attribute selector that matches the Mermaid SVG ID pattern */
+[class*="container_"]:has(> svg[id^="mermaid"]) {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -189,7 +191,7 @@
 }
 
 /* Mermaid SVG responsive behavior */
-.mermaid svg {
+[class*="container_"]:has(> svg[id^="mermaid"]) > svg {
   max-width: 100%;
   height: auto;
   display: block;