Merge podcast branch: preserve architectural improvements + bug fixes

Resolved merge conflicts by accepting podcast's architectural refactoring
while porting main's bug fixes to the new structure.

Architecture changes from podcast (accepted):
- Extract presentation CSS to central presentation-system.css file
- Add PresentationAwareProps interface for visual components
- Implement compact mode across all visual components
- Add PresentationSlideContent component
- Add visual components documentation

Bug fixes from main (ported to new structure):
- Caption sizing improvements: 0.75rem→0.8rem, 1vw→1.5vw, 0.85em→0.95em
- Caption padding reduction: 1.5em→0.5em for better spacing
- Add .presentationList base class for DRY principle
- Update .bulletList and .takeawayList to compose base class
- Add align-self: stretch to .centeredContent

Conflict resolution strategy:
- RevealSlideshow.module.css: Accept podcast extraction, port main fixes
- manifest.json: Accept podcast regeneration
- lesson-3 & lesson-2 JSONs: Accept podcast content structure
- Build verified: All changes compile successfully

Author: ofriw

website/src/components/PresentationMode/PresentationSlideContent.module.css

@@ -0,0 +1,61 @@
+/**
+ * Presentation slide content wrapper styles
+ *
+ * Provides reusable layout primitive for all presentation slide content.
+ * Replaces scattered centering and container patterns in RevealSlideshow.
+ */
+
+/* Base container - flexbox with configurable alignment */
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  overflow: hidden; /* Constrain to slide boundaries by default */
+}
+
+/* Content wrapper - handles scaling and centering */
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+/* Allow content to overflow slide boundaries (for scrollable content) */
+.allowOverflow {
+  overflow: visible;
+}
+
+.allowOverflow .content {
+  overflow: visible;
+}
+
+/* GPU optimization for smooth slide transitions */
+.gpuOptimized {
+  will-change: transform;
+  contain: layout paint;
+  transform: translateZ(0);
+}
+
+/* Responsive adjustments for edge cases */
+@media (max-width: 768px) {
+  .container {
+    max-width: 95%;
+  }
+}
+
+/* Accessibility - disable transforms for reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .gpuOptimized {
+    will-change: auto;
+    transform: none;
+  }
+
+  .content {
+    transform: none !important;
+  }
+}

website/src/components/PresentationMode/PresentationSlideContent.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import type { PresentationLayoutConfig } from './types';
+import styles from './PresentationSlideContent.module.css';
+
+/**
+ * Props for PresentationSlideContent wrapper component
+ */
+export interface PresentationSlideContentProps {
+  /** Child content to render within the slide layout */
+  children: React.ReactNode;
+
+  /** Layout configuration (alignment, overflow, scaling, sizing) */
+  config?: PresentationLayoutConfig;
+
+  /** CSS class name to apply to the container */
+  className?: string;
+
+  /** Enable GPU optimization for smooth animations */
+  gpuOptimized?: boolean;
+}
+
+/**
+ * Wrapper component for presentation slide content
+ *
+ * Provides consistent layout, spacing, and positioning for all slide types.
+ * Eliminates the need for ad-hoc centering classes and visual containers.
+ *
+ * Features:
+ * - Vertical alignment control (flex-start, center, space-between, etc.)
+ * - Overflow handling (scrollable vs constrained)
+ * - Content scaling for visual prominence
+ * - Max width/height constraints
+ * - GPU optimization for smooth transitions
+ *
+ * Usage:
+ * ```tsx
+ * <PresentationSlideContent
+ *   config={{
+ *     verticalAlign: 'center',
+ *     scaleContent: 1.5,
+ *     maxWidthPercent: 90
+ *   }}
+ * >
+ *   <MyVisualComponent compact />
+ * </PresentationSlideContent>
+ * ```
+ */
+export const PresentationSlideContent: React.FC<
+  PresentationSlideContentProps
+> = ({ children, config = {}, className = '', gpuOptimized = false }) => {
+  const {
+    verticalAlign = 'flex-start',
+    allowOverflow = false,
+    scaleContent = 1.0,
+    maxWidthPercent = 90,
+    maxHeightPercent = 85,
+  } = config;
+
+  // Build CSS classes
+  const containerClasses = [
+    styles.container,
+    gpuOptimized && styles.gpuOptimized,
+    allowOverflow && styles.allowOverflow,
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  // Build inline styles for dynamic configuration
+  const containerStyle: React.CSSProperties = {
+    justifyContent: verticalAlign,
+    maxWidth: `${maxWidthPercent}%`,
+    maxHeight: `${maxHeightPercent}%`,
+  };
+
+  const contentStyle: React.CSSProperties =
+    scaleContent !== 1.0
+      ? {
+          transform: `scale(${scaleContent})`,
+          transformOrigin: 'center center',
+        }
+      : {};
+
+  return (
+    <div className={containerClasses} style={containerStyle}>
+      <div className={styles.content} style={contentStyle}>
+        {children}
+      </div>
+    </div>
+  );
+};

website/src/components/PresentationMode/RevealSlideshow.module.css

@@ -54,25 +54,22 @@
 .objectives {
   margin-top: 1.5em;
   text-align: left;
-  max-width: 100%;
+  max-width: 90%;
   margin-left: auto;
   margin-right: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .objectives h3 {
   font-size: clamp(1rem, 2vw, 1.2em);
   margin-bottom: 0.5em;
-  margin-left: 0;
-  margin-right: 0;
 }
 
-:global(.reveal) .objectives ul {
+.objectives ul {
   list-style: none;
   padding: 0;
-  display: block;
-  max-width: 100%;
-  margin-left: 0;
-  margin-right: 0;
 }
 
 .objectives li {
@@ -129,14 +126,11 @@
   overflow-y: auto;
   overflow-x: auto;
   height: 100%;
-  white-space: pre-wrap;
+  white-space: pre;
 }
 
-:global(.reveal) .codeBlock code {
+.codeBlock code {
   font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
-  word-break: break-word;
-  white-space: pre-wrap;
-  overflow-wrap: break-word;
 }
 
 .codeBlockSmall {
@@ -151,14 +145,11 @@
   overflow-y: auto;
   overflow-x: auto;
   max-height: 400px;
-  white-space: pre-wrap;
+  white-space: pre;
 }
 
-:global(.reveal) .codeBlockSmall code {
+.codeBlockSmall code {
   font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
-  word-break: break-word;
-  white-space: pre-wrap;
-  overflow-wrap: break-word;
 }
 
 .caption {
@@ -311,11 +302,15 @@
   align-items: center;
   overflow: visible;
   width: 100%;
+  height: 100%;
+  max-height: 100%;
   transform-origin: center center;
 }
 
 .visualContainer > * {
   object-fit: contain;
+  max-width: 100%;
+  max-height: 100%;
 }
 
 .takeawayList {
@@ -481,131 +476,9 @@
   padding: 2em;
 }
 
-/* Override Reveal.js theme colors to match course design */
-:global(.reveal) {
-  font-family: var(--ifm-font-family-base);
-}
-
-:global(.reveal h1),
-:global(.reveal h2),
-:global(.reveal h3),
-:global(.reveal h4) {
-  font-family: var(--ifm-font-family-base);
-  font-weight: 700;
-}
-
-:global(.reveal h1) {
-  font-size: clamp(2.5rem, 4.5vw, 3em);
-  color: var(--ifm-color-primary);
-  max-width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-  word-wrap: break-word;
-}
-
-:global(.reveal h2) {
-  font-size: clamp(1.2rem, 2.5vw, 1.5em);
-  color: var(--ifm-color-primary);
-  max-width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-  word-wrap: break-word;
-}
-
-:global(.reveal h3) {
-  font-size: clamp(1rem, 2vw, 1.3em);
-  max-width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-  word-wrap: break-word;
-}
-
-:global(.reveal .controls) {
-  color: var(--ifm-color-primary);
-}
-
-:global(.reveal .progress) {
-  background: rgba(0, 0, 0, 0.2);
-}
-
-:global(.reveal .progress span) {
-  background: var(--ifm-color-primary);
-}
-
-/* Enable dark mode CSS variables for all components in presentation mode */
-:global(.reveal) {
-  --ifm-font-color-base: #c9d1d9;
-  --ifm-heading-color: #e6edf3;
-  --ifm-color-emphasis-700: #8b949e;
-  --ifm-color-emphasis-600: #6e7681;
-  --ifm-color-emphasis-300: #3d444d;
-  --ifm-color-emphasis-200: #30363d;
-  --ifm-background-color: #0d1117;
-  --ifm-background-surface-color: #161b22;
-
-  /* Visual element colors - adjusted for dark mode */
-  --visual-workflow: #a78bfa;
-  --visual-capability: #22d3ee;
-  --visual-limitation: #fb923c;
-  --visual-decision: #c4b5fd;
-  --visual-error: #fb7185;
-  --visual-neutral: #94a3b8;
-
-  /* Visual element backgrounds */
-  --visual-bg-workflow: rgba(167, 139, 250, 0.15);
-  --visual-bg-capability: rgba(34, 211, 238, 0.15);
-  --visual-bg-limitation: rgba(251, 146, 60, 0.15);
-  --visual-bg-decision: rgba(196, 181, 253, 0.15);
-}
-
-/* Fixed layout structure for consistent positioning across slides */
-:global(.reveal .slides section) {
-  max-width: 95%;
-  margin-left: auto;
-  margin-right: auto;
-  height: 100%;
-  display: flex !important;
-  flex-direction: column;
-  justify-content: flex-start;
-  padding: 1em 0 2.5em 0;
-  box-sizing: border-box;
-}
-
-/* Title area - fixed height and position */
-:global(.reveal .slides section > h2) {
-  margin-top: 0;
-  margin-bottom: 0.5em;
-  flex-shrink: 0;
-}
-
-/* Title slides have h1 instead */
-:global(.reveal .slides section > h1) {
-  margin-top: 2em;
-  margin-bottom: 0;
-  flex-shrink: 0;
-}
-
-/* Content area - fills remaining space with natural flow (safe by default) */
-:global(.reveal .slides section)
-  > *:not(h1):not(h2):not(.slideCaption):not(.subtitle) {
-  flex-grow: 1;
-  min-height: 0;
-  margin-top: 0.5em;
-}
-
-/* Caption area - fixed at bottom when present */
-:global(.reveal) .slideCaption {
-  margin-top: auto;
-  margin-bottom: 2em;
-  flex-shrink: 0;
-  padding-top: 0.5em;
-  padding-bottom: 0;
-}
-
-:global(.reveal p:not(.slideCaption)),
-:global(.reveal ul),
-:global(.reveal ol) {
-  max-width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
+/**
+ * NOTE: Core Reveal.js overrides (typography, layout, dark mode CSS variables)
+ * have been moved to /website/src/styles/presentation-system.css
+ *
+ * This file now contains only component-specific styles for RevealSlideshow.
+ */