Fix Getting Started light theme

scripts/test-website-theme.mjs

@@ -9,6 +9,7 @@ const template = fs.readFileSync(path.join(repoRoot, 'website', 'template.html')
 const app = fs.readFileSync(path.join(repoRoot, 'website', 'app.js'), 'utf8');
 const langInit = fs.readFileSync(path.join(repoRoot, 'website', 'lang-init.js'), 'utf8');
 const demoCss = fs.readFileSync(path.join(repoRoot, 'website', 'styles', 'demo.css'), 'utf8');
+const landingPrimaryCss = fs.readFileSync(path.join(repoRoot, 'website', 'styles', 'landing-primary.css'), 'utf8');
 const mockupStart = template.indexOf('<div class="extension-mockup">');
 const mockupEnd = template.indexOf('<div class="demo-invite-fly"', mockupStart);
 
@@ -65,6 +66,22 @@ if (!/\.film-hero-bird-drift\s*\{[^}]*animation:\s*filmBirdGlide/s.test(demoCss)
   throw new Error('Foreground film birds must glide and flap without waiting for video playback');
 }
 
+const gettingStartedLightSurfaces = [
+  'step-illustration-1',
+  'step-illustration-2',
+  'step-illustration-3',
+  'illus-popup-card',
+  'illus-player-card',
+  'popup-select-mock'
+];
+for (const className of gettingStartedLightSurfaces) {
+  const pattern = new RegExp(`html\\.theme-light[^{]*\\.${className}[^}]*\\{`);
+  if (!pattern.test(landingPrimaryCss)) {
+    throw new Error(`Getting Started .${className} must define an explicit light-theme surface`);
+  }
+}
+
 console.log('Extension mockup theme-sensitive text uses theme-aware colors');
 console.log('Landing CSS is render-blocking, single-request, and cascade-stable');
 console.log('Foreground film birds use complete, always-on wing and glide animations');
+console.log('All Getting Started mockups define explicit light-theme surfaces');

website/styles/landing-primary.css

@@ -1001,6 +1001,128 @@
     100% { box-shadow: 0 0 8px oklch(0.68 0.13 150 / 0.4); }
 }
 
+/* Getting Started uses real theme surfaces. Only the video canvases remain
+   dark in light mode, because they represent video content rather than UI. */
+html.theme-light .step-illustration-1,
+html.theme-light .step-illustration-2,
+html.theme-light .step-illustration-3 {
+    color: var(--text);
+    background:
+        radial-gradient(circle at 15% 10%, oklch(0.995 0.006 100), transparent 52%),
+        linear-gradient(145deg, oklch(0.965 0.014 105), oklch(0.925 0.025 115));
+    border-color: oklch(0.28 0.035 140 / 0.13);
+    box-shadow:
+        0 18px 38px oklch(0.20 0.025 140 / 0.12),
+        inset 0 1px 0 rgba(255, 255, 255, 0.9);
+}
+
+html.theme-light .step-illustration-1:hover,
+html.theme-light .step-illustration-2:hover,
+html.theme-light .step-illustration-3:hover {
+    border-color: oklch(0.56 0.13 150 / 0.28);
+    box-shadow:
+        0 22px 44px oklch(0.20 0.025 140 / 0.15),
+        0 0 22px oklch(0.56 0.13 150 / 0.10),
+        inset 0 1px 0 #ffffff;
+}
+
+html.theme-light .step-illustration-1 .illus-popup-card,
+html.theme-light .step-illustration-2 .illus-popup-card,
+html.theme-light .step-illustration-3 .illus-player-card {
+    --bg: oklch(0.965 0.014 105) !important;
+    --card: #ffffff !important;
+    --accent: oklch(0.56 0.13 150) !important;
+    --accent-glow: oklch(0.56 0.13 150 / 0.20) !important;
+    --text: oklch(0.20 0.025 140) !important;
+    --text-muted: oklch(0.43 0.03 135) !important;
+    --success: oklch(0.56 0.13 150) !important;
+    --glass-border: oklch(0.28 0.035 140 / 0.10) !important;
+}
+
+html.theme-light .illus-popup-card,
+html.theme-light .illus-player-card {
+    background: rgba(255, 255, 255, 0.91);
+    border-color: oklch(0.28 0.035 140 / 0.14);
+    box-shadow:
+        0 14px 30px oklch(0.20 0.025 140 / 0.16),
+        inset 0 1px 0 #ffffff;
+}
+
+html.theme-light .illus-popup-header {
+    border-bottom-color: oklch(0.28 0.035 140 / 0.10);
+}
+
+html.theme-light .illus-popup-brand,
+html.theme-light .player-user {
+    color: var(--text);
+}
+
+html.theme-light .illus-popup-tabs,
+html.theme-light .illus-collapsed-details {
+    background: oklch(0.92 0.02 112 / 0.72);
+    border-color: oklch(0.28 0.035 140 / 0.10);
+}
+
+html.theme-light .illus-popup-tab.active {
+    color: oklch(0.36 0.105 150);
+    background: #ffffff;
+    border: 1px solid oklch(0.56 0.13 150 / 0.18);
+    box-shadow: 0 2px 7px oklch(0.20 0.025 140 / 0.10);
+}
+
+html.theme-light .popup-form-label,
+html.theme-light .illus-popup-version,
+html.theme-light .illus-popup-tab,
+html.theme-light .illus-collapsed-details,
+html.theme-light .details-arrow,
+html.theme-light .control-time {
+    color: var(--text-muted);
+}
+
+html.theme-light .popup-select-mock {
+    color: var(--text);
+    background: #ffffff;
+    border-color: oklch(0.28 0.035 140 / 0.16);
+    box-shadow: inset 0 1px 2px oklch(0.20 0.025 140 / 0.06);
+}
+
+html.theme-light .illus-floating-success {
+    color: var(--text);
+    background: rgba(255, 255, 255, 0.96);
+    border-color: oklch(0.56 0.13 150 / 0.30);
+    box-shadow:
+        0 7px 16px oklch(0.20 0.025 140 / 0.14),
+        0 0 12px oklch(0.56 0.13 150 / 0.10);
+}
+
+html.theme-light .player-header,
+html.theme-light .player-controls {
+    color: var(--text);
+}
+
+html.theme-light .player-video-canvas {
+    border-color: oklch(0.28 0.035 140 / 0.18);
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
+}
+
+html.theme-light .player-timeline,
+html.theme-light .illus-sync-bridge .sync-line {
+    background: oklch(0.28 0.035 140 / 0.14);
+}
+
+html.theme-light .timeline-knob {
+    background: #ffffff;
+    border: 1px solid oklch(0.56 0.13 150 / 0.45);
+    box-shadow: 0 1px 4px oklch(0.20 0.025 140 / 0.22);
+}
+
+html.theme-light .sync-status-badge,
+html.theme-light .player-badge.active {
+    color: oklch(0.36 0.105 150);
+    background: oklch(0.60 0.12 150 / 0.12);
+    border-color: oklch(0.56 0.13 150 / 0.26);
+}
+
 /* --- Self Hosters Terminal --- */
 .terminal-container {
     max-width: 850px;
@@ -1211,5 +1333,3 @@ section:target[data-reveal] {
     opacity: 1;
     transform: translateY(0);
 }
-
-