Move inline CSS from App render to static App.css

[Copilot]

The entire stylesheet was embedded as a JSX <style> string inside App's render, causing style recalculation on every state change (e.g., accordion toggles).

Changes

• src/App.css — extracted all styles into a static file; Vite bundles and fingerprints it at build time
• src/App.jsx — replaced <style>{...}</style> block with import "./App.css"
• index.html — replaced the @import URL inside the CSS string with a proper <link rel="stylesheet"> for Google Fonts, alongside the existing preconnect hints

Before:

return (
  <>
    <style>{`
      @import url('https://fonts.googleapis.com/...');
      *, *::before, *::after { box-sizing: border-box; }
      body { margin: 0; font-family: "Inter", ... }
      /* ~160 more lines */
    `}</style>
    <section className="container">...

After:

// App.jsx
import "./App.css";
// ...
return <><section className="container">...

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.