diff --git a/docs/architecture/data-flow-explainer.html b/docs/architecture/data-flow-explainer.html
index fd42fc3..faca525 100644
--- a/docs/architecture/data-flow-explainer.html
+++ b/docs/architecture/data-flow-explainer.html
@@ -1415,7 +1415,8 @@ footer .colophon {
   max-width: 70ch;
 }
 .trace-tree {
-  background: var(--ink-2, rgba(0,0,0,.32));
+  background: var(--code-bg);
+  color: var(--code-paper);
   padding: 1.25rem 1.5rem;
   border-radius: 4px;
   overflow-x: auto;
@@ -1423,6 +1424,10 @@ footer .colophon {
   font-size: 0.85rem;
   line-height: 1.6;
   margin: 0 0 18px;
+  border: 1px solid var(--code-bg-2);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.04) inset,
+    0 14px 40px -20px rgba(20, 14, 8, 0.5);
 }
 .capture-rules {
   border-collapse: collapse;
diff --git a/docs/architecture/di-explainer.html b/docs/architecture/di-explainer.html
index 2d5de44..a6566a5 100644
--- a/docs/architecture/di-explainer.html
+++ b/docs/architecture/di-explainer.html
@@ -663,7 +663,8 @@ footer .colophon {
   font-size: 0.95rem;
 }
 .trace-tree {
-  background: var(--ink-2, rgba(0,0,0,.32));
+  background: var(--code-bg);
+  color: var(--code-paper);
   padding: 1rem 1.25rem;
   border-radius: 4px;
   overflow-x: auto;
@@ -671,6 +672,10 @@ footer .colophon {
   font-size: 0.82rem;
   line-height: 1.55;
   margin: 0 0 18px;
+  border: 1px solid var(--code-bg-2);
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.04) inset,
+    0 14px 40px -20px rgba(20, 14, 8, 0.5);
 }
 
 /* ─── Responsive ─────────────────────────────────────────────────── */