docs(html): align trace-tree code background with existing code-bg palette

The .trace-tree blocks I added in §06 / §08 used var(--ink-2) (#5b4a3c —
medium brown), which clashed with the page's dedicated --code-bg
(#16110d, deep dark). Switched to --code-bg + --code-paper for text,
plus the same border + inset/drop shadow as pre.code, so the new blocks
read consistently with every other code block on the page.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

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;

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 ─────────────────────────────────────────────────── */