Build a Font Pairing Tool with AI

Build a single-page font pairing tool as a static HTML/CSS/JS site. Use a dark theme with background #0f0f17, card surfaces #12121a, and accent color #ec4899 (pink). The layout should have a control panel on the left (300px sidebar on desktop) and a live preview area on the right. The control panel has two sections: "Heading Font" and "Body Font." Each section contains: a searchable dropdown of 80+ popular Google Fonts (load fonts dynamically by injecting link tags into the document head when selected — use the Google Fonts CSS API: https://fonts.googleapis.com/css2?family=Font+Name:wght@400;700&display=swap). Include at least these fonts: Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Raleway, Nunito, Playfair Display, Merriweather, Source Serif Pro, Lora, PT Serif, Oswald, Bebas Neue, Anton, Archivo Black, Work Sans, DM Sans, Space Grotesk, Sora, Outfit, Plus Jakarta Sans, Figtree, Geist, IBM Plex Sans, IBM Plex Serif, IBM Plex Mono, Fira Sans, Source Sans Pro, Noto Sans, Noto Serif, Crimson Text, Libre Baskerville, EB Garamond, Cormorant Garamond, Bitter, Cabin, Karla, Rubik, Manrope, Lexend, Quicksand, Comfortaa, Josefin Sans, Josefin Slab, Archivo, Barlow, Barlow Condensed, Exo 2, Mulish, Urbanist, Red Hat Display, Spectral, Vollkorn, Alegreya, Alegreya Sans, Zilla Slab, Cardo, Old Standard TT, Unna, Fraunces, Instrument Serif, Corben, Abril Fatface, Lobster, Pacifico, Dancing Script, Caveat, Permanent Marker, Satisfy, Great Vibes, Sacramento, Righteous, Bungee, Press Start 2P, Silkscreen, VT323. Below each font dropdown, add controls: font size slider (heading: 24-72px, default 36px; body: 12-24px, default 16px), font weight dropdown (100-900 in increments of 100, only showing weights available for the selected font — for simplicity default to 400 and 700 options), letter spacing slider (-0.05em to 0.15em), and line height slider (1.0 to 2.0, default 1.2 for headings, 1.6 for body). Below the controls, add an editable text area where users can type custom sample text (default: a meaningful paragraph about design, not Lorem Ipsum). This text updates the preview in real time. The preview area on the right shows a mock content layout: a large heading using the heading font and settings, followed by a subheading (using heading font at smaller size), then 2-3 paragraphs using the body font. Include a blockquote styled with the heading font italic, and a bullet list using the body font. The preview should feel like reading a real blog post or landing page. Add a toggle to switch the preview background between dark (#0f0f17) and light (#ffffff with dark text) modes so users can see how fonts look in both contexts. Below the font controls, add a "Popular Pairs" gallery section. Include 15 curated font pairings, each shown as a small card with the heading font name, body font name, a mini preview (heading text + body text at small size), and a category label (e.g., "Modern," "Classic," "Editorial," "Playful," "Technical"). The pairs should include well-known combinations like: Playfair Display + Source Sans Pro, Montserrat + Merriweather, Oswald + Lato, Raleway + Roboto, Space Grotesk + Inter, Fraunces + DM Sans, Bebas Neue + Open Sans, Cormorant Garamond + Fira Sans, Archivo Black + Work Sans, Lora + Poppins, Abril Fatface + Nunito, Sora + IBM Plex Serif, Plus Jakarta Sans + Spectral, Outfit + Libre Baskerville, Lexend + Crimson Text. Clicking a pair card loads both fonts into the selector and updates the preview instantly. Add a "Copy CSS" button at the bottom of the control panel that generates and copies to clipboard: the @import URL for both fonts, the CSS rules for heading and body with all current settings (font-family, font-size, font-weight, letter-spacing, line-height). Also add a "Copy HTML Link" button that copies the link tag version instead of @import. Save the last-used font pair and settings in localStorage. Make it responsive: on mobile (under 768px), the sidebar becomes a collapsible top panel, and the preview takes full width below it. The popular pairs gallery becomes a horizontally scrollable strip. Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].