Fix ASCII diagram font rendering on concepts page (#420)

* Fix ASCII diagram rendering: use system mono font for box-drawing chars

Geist Mono renders box-drawing characters (┌─┐│└┘) at double width,
breaking alignment in the concepts page diagram. Use system monospace
fonts (Menlo, Monaco, Consolas) for ascii-variant code blocks, which
handle these characters at correct single width.

* Fix CSS specificity: code element was overriding pre font-family

.docs-content code sets font-family to Geist Mono, which overrides
the system mono font set on the parent pre element. Geist Mono is
loaded with Latin subset only, lacking box-drawing glyphs (U+2500-257F),
so browsers fall back to CJK-aware fonts that render them double-width.

Fix: add font-family: inherit to .docs-content pre code so code
elements inside pre blocks inherit the correct font from their parent.

web/app/components/code-block.tsx

@@ -48,11 +48,21 @@ export async function CodeBlock({
         </div>
       )}
       <pre
-        className={`bg-code-bg border border-border px-4 py-3 overflow-x-auto text-[13px] ${lineHeightClass} font-mono ${
-          title ? "rounded-b-lg" : "rounded-lg"
-        }`}
+        className={`bg-code-bg border border-border px-4 py-3 overflow-x-auto text-[13px] ${lineHeightClass} ${
+          variant === "ascii" ? "" : "font-mono "
+        }${title ? "rounded-b-lg" : "rounded-lg"}`}
+        style={
+          variant === "ascii"
+            ? {
+                fontFamily:
+                  "Menlo, Monaco, Consolas, 'Courier New', monospace",
+              }
+            : undefined
+        }
       >
-        <code>{children}</code>
+        <code style={variant === "ascii" ? { fontFamily: "inherit" } : undefined}>
+          {children}
+        </code>
       </pre>
     </div>
   );

web/app/globals.css

@@ -168,6 +168,7 @@ body {
   background: none;
   padding: 0;
   font-size: 1em;
+  font-family: inherit;
 }
 
 /* Shiki dual theme */