improve mobile experience and visual polish

- upgrade font stack to modern system monospace fonts
- add responsive touch targets for all interactive elements
- improve button/link active states for mobile
- make detail panel full-width on mobile
- add tap highlight removal for better mobile feel
- increase padding on mobile for better usability

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[e-mail]>

src/templates.rs

···
         }}
 
         body {{
-            font-family: 'Courier New', monospace;
+            font-family: ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Menlo, 'Courier New', monospace;
             height: 100vh;
             background: var(--bg);
             color: var(--text);
             overflow: hidden;
             position: relative;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
         }}
 
         .canvas {{
···
             padding: 0.4rem 0.8rem;
             transition: all 0.2s ease;
             z-index: 100;
+            -webkit-tap-highlight-color: transparent;
+            cursor: pointer;
+            border-radius: 2px;
         }}
 
-        .logout:hover {{
+        .logout:hover, .logout:active {{
             background: var(--surface);
             color: var(--text);
+            border-color: var(--text-light);
+        }}
+
+        @media (max-width: 768px) {{
+            .logout {{
+                padding: 0.6rem 1rem;
+                font-size: 0.75rem;
+                top: 1rem;
+                right: 1rem;
+            }}
         }}
 
         .info {{
···
             -webkit-tap-highlight-color: transparent;
         }}
 
-        .info:hover {{
+        .info:hover, .info:active {{
             background: var(--surface);
             color: var(--text);
+            border-color: var(--text-light);
         }}
 
         @media (max-width: 768px) {{
···
                 width: 40px;
                 height: 40px;
                 font-size: 0.85rem;
+                top: 1rem;
+                left: 1rem;
             }}
         }}
 
···
             background: var(--bg);
             border: 1px solid var(--border);
             color: var(--text);
-            font-family: 'Courier New', monospace;
+            font-family: inherit;
             font-size: 0.7rem;
             cursor: pointer;
             transition: all 0.2s ease;
+            -webkit-tap-highlight-color: transparent;
+            border-radius: 2px;
         }}
 
-        .info-modal button:hover {{
+        .info-modal button:hover, .info-modal button:active {{
             background: var(--surface-hover);
+            border-color: var(--text-light);
+        }}
+
+        @media (max-width: 768px) {{
+            .info-modal button {{
+                padding: 0.65rem 1.2rem;
+                font-size: 0.75rem;
+            }}
         }}
 
         .overlay {{
···
             z-index: 10;
             cursor: pointer;
             transition: all 0.2s ease;
+            -webkit-tap-highlight-color: transparent;
         }}
 
-        .identity:hover {{
+        .identity:hover, .identity:active {{
             transform: scale(1.05);
             border-color: var(--text);
             box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
         }}
 
+        @media (max-width: 768px) {{
+            .identity {{
+                width: 100px;
+                height: 100px;
+            }}
+        }}
+
         .identity-label {{
             font-size: 0.5rem;
             color: var(--text-light);
···
             transform: translateX(0);
         }}
 
+        @media (max-width: 768px) {{
+            .detail-panel {{
+                width: 100%;
+                padding: 4rem 1.5rem 2rem;
+                border-right: none;
+                border-bottom: 2px solid var(--border);
+            }}
+        }}
+
         .detail-panel h3 {{
             margin-bottom: 0.75rem;
             font-size: 0.85rem;
···
             margin-bottom: 0.5rem;
             transition: all 0.15s ease;
             cursor: pointer;
+            -webkit-tap-highlight-color: transparent;
         }}
 
-        .tree-item:hover {{
+        .tree-item:hover, .tree-item:active {{
             background: var(--surface-hover);
             border-color: var(--text-light);
         }}
 
+        @media (max-width: 768px) {{
+            .tree-item {{
+                padding: 0.8rem 0.9rem;
+                font-size: 0.8rem;
+            }}
+        }}
+
         .tree-item:last-child {{
             margin-bottom: 0;
         }}
···
             background: var(--bg);
             border: 1px solid var(--border);
             color: var(--text);
-            font-family: 'Courier New', monospace;
+            font-family: inherit;
             font-size: 0.65rem;
             cursor: pointer;
             width: 100%;
             transition: all 0.15s ease;
+            -webkit-tap-highlight-color: transparent;
+            border-radius: 2px;
         }}
 
-        .load-more:hover {{
+        .load-more:hover, .load-more:active {{
             background: var(--surface-hover);
+            border-color: var(--text-light);
+        }}
+
+        @media (max-width: 768px) {{
+            .load-more {{
+                padding: 0.6rem 0.8rem;
+                font-size: 0.7rem;
+            }}
         }}
 
         .footer {{