Improve global.css as scaffolding template (#403)

Update `global.css` in all `basic-server-*` examples (and `integration-server`
for consistency) to better serve as templates for AI coding agents scaffolding
new MCP Apps.

Changes:
- Use CSS custom properties (`--font-sans`, `--color-text-primary`, etc.) with
  sensible fallbacks, enabling host design system integration
- Add `color-scheme: light dark` and `light-dark()` fallbacks for theme support
- Include comprehensive typography: h1-h6, body text, `code`/`pre`/`kbd`, `b`/`strong`
- Move `#server-time` styles from global CSS to component stylesheets (classes
  instead of IDs for better CSS practices)

Updates E2E test selectors in `DYNAMIC_MASKS` to match the new class-based
selectors.

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

examples/basic-server-svelte/src/App.svelte

@@ -111,7 +111,7 @@ async function handleOpenLink() {
   <p class="notice">Watch activity in the DevTools console!</p>
 
   <div class="action">
-    <p><strong>Server Time:</strong> <code id="server-time">{serverTime}</code></p>
+    <p><strong>Server Time:</strong> <code class="server-time">{serverTime}</code></p>
     <button onclick={handleGetTime}>Get Server Time</button>
   </div>
 
@@ -205,7 +205,7 @@ async function handleOpenLink() {
 }
 
 /* Server time fills remaining width for consistent E2E screenshot masking */
-:global(#server-time) {
+.server-time {
   flex: 1;
   min-width: 0;
 }