From 67bb47c0cd1ea8a6583c583e1a1c4636a0ecf923 Mon Sep 17 00:00:00 2001
From: Ryan Malloy <ryan@supported.systems>
Date: Fri, 20 Feb 2026 16:31:20 -0700
Subject: [PATCH] Fix oscilloscope CSS: use is:global for child component
 styles

Astro scopes <style> block imports to the authoring component.
Since OscilloscopeDisplay.astro is a child of index.astro, the
scoped selectors didn't match. Move the CSS import into the
component itself with is:global.
---
 frontend/src/components/OscilloscopeDisplay.astro | 4 ++++
 frontend/src/pages/index.astro                    | 1 -
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/OscilloscopeDisplay.astro b/frontend/src/components/OscilloscopeDisplay.astro
index a1d86d7..f6fa11f 100644
--- a/frontend/src/components/OscilloscopeDisplay.astro
+++ b/frontend/src/components/OscilloscopeDisplay.astro
@@ -599,3 +599,7 @@
   // Re-init on Astro page transitions
   document.addEventListener('astro:page-load', initAll);
 </script>
+
+<style is:global>
+  @import '../styles/oscilloscope.css';
+</style>
diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro
index 034b249..010d090 100644
--- a/frontend/src/pages/index.astro
+++ b/frontend/src/pages/index.astro
@@ -24,7 +24,6 @@ try {
 >
   <style>
     @import '../styles/homepage.css';
-    @import '../styles/oscilloscope.css';
   </style>
 
   <!-- Hero: Split layout — text left, animated scope visual right -->