feat(threejs): add visibility optimization, host styling, transparent background

- Add visibility-based animation pause (IntersectionObserver + wrapped rAF)
- Zero CPU usage when widget scrolls out of view
- Apply host style variables via useHostStyles
- Support transparent WebGL background (alpha: true)
- Use light-dark() for theme-aware fallback colors
- Tool no longer echoes code back in result
- Document performance features in README

examples/threejs-server/src/global.css

@@ -1,13 +1,17 @@
+:root {
+  color-scheme: light dark;
+}
+
 * {
   box-sizing: border-box;
 }
 
 html, body {
-  font-family: system-ui, -apple-system, sans-serif;
+  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
   font-size: 1rem;
   margin: 0;
   padding: 0;
-  background: #1a1a2e;
+  background: transparent;
 }
 
 .loading {
@@ -15,13 +19,13 @@ html, body {
   align-items: center;
   justify-content: center;
   height: 400px;
-  color: #888;
+  color: var(--color-text-secondary, #888);
   font-size: 14px;
 }
 
 .error {
   padding: 20px;
-  color: #ff6b6b;
+  color: var(--color-text-danger, #ff6b6b);
 }
 
 .threejs-container {
@@ -35,9 +39,9 @@ html, body {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #ff6b6b;
-  background: rgba(26, 26, 46, 0.9);
-  border-radius: 8px;
-  font-family: system-ui;
+  color: var(--color-text-danger, #ff6b6b);
+  background: var(--color-background-secondary, rgba(26, 26, 46, 0.9));
+  border-radius: var(--border-radius-md, 8px);
+  font-family: var(--font-sans, system-ui);
   padding: 20px;
 }