Update app.py

app.py

@@ -400,11 +400,12 @@ def build_image(filename):
 def build_d3_graph():
     with gr.Group():
         gr.Markdown("### 🔗 Interactive Model Dependency Graph")
-        html_file = Path("static/d3_dependency_graph.html")
-        if html_file.exists():
+        fp = Path("static/d3_dependency_graph.html")
+        if fp.exists():
             gr.HTML(
-                f"""
+                """
                 <iframe src="file=static/d3_dependency_graph.html"
+                        sandbox="allow-scripts allow-same-origin"
                         style="width:100%;height:640px;border:1px solid #e2e8f0;border-radius:8px"
                         loading="lazy"></iframe>
                 """
@@ -448,6 +449,19 @@ HLJS = """
   mo.observe(document.body, {subtree: true, childList: true});
 })();
 </script>
+<script>
+(function(){
+  function highlightAll() {
+    document.querySelectorAll('pre code').forEach((el) => { hljs.highlightElement(el); });
+    document.querySelectorAll('.article ol > li').forEach((li) => {
+      if (li.querySelector(':scope > a[id]')) li.classList.add('tenet');
+    });
+  }
+  highlightAll();
+  new MutationObserver(highlightAll).observe(document.body, {subtree: true, childList: true});
+})();
+</script>
+
 """
 
 
@@ -486,8 +500,9 @@ html, body, .gradio-container { background: #fff !important; }
 .gradio-container .gr-html,
 .gradio-container .gr-html * {
   opacity: 1 !important;
-  color: var(--body-text-color) !important;
 }
+/* scope body text color to prose only */
+.article { color: var(--body-text-color); }
 
 /* Scope article typography */
 .article { max-width: 72ch; margin: 0 auto; }
@@ -518,16 +533,15 @@ html, body, .gradio-container { background: #fff !important; }
 .hljs { background: transparent !important; }
 
 /* Tenets highlight: any list item that contains an anchor id gets a card look */
-.article ol > li:has(> a[id]) {
+.article ol > li.tenet {
   border-left: 4px solid #1d4ed8;
   background: #f8fafc;
   padding: .75rem 1rem;
   margin: .5rem 0;
   border-radius: 8px;
 }
-.article ol > li:has(> a[id])::marker { color: #1d4ed8; font-weight: 700; }
-.article ol > li:has(> a[id]) code { background: #e0e7ff !important; }
-
+.article ol > li.tenet::marker { color: #1d4ed8; font-weight: 700; }
+.article ol > li.tenet code { background: #e0e7ff !important; }
 
 
 /* Blockquotes, images, rules */