# Meridian Metro

Demo: [website-metro-transit](../website-metro-transit/)

Create one complete, self-contained HTML file for MERIDIAN METRO, a bold public transit authority site for a fictional major city's subway and rail system.

Build the entire design language around a stylized metro map: bold primary line colors, thick rounded route lines, interchange "roundel" station markers, angular 45/90-degree diagram geometry, heavy grotesk typography, and a confident wayfinding-signage feel (in the tradition of iconic transit map design). The page itself should feel like it was designed by the same team that made the map, not a generic city-services site. Avoid soft gradients, stock-photo hero banners, and generic corporate-blue government-site styling.

Include a hero built around a large animated schematic system map, a line-status dashboard for six fictional lines, a fare and ticketing overview styled like a transit card, a station finder/index listing a dozen stations, a service-alerts ticker, an accessibility and accommodations section, and a footer styled like platform signage. Generate all diagrams and icons in-page with CSS, SVG, or Canvas: the metro map itself, line diagrams, roundel icons, and directional signage glyphs. Do not hotlink images.

Add purposeful motion: an animated train dot traveling along a line on the schematic map, a live-feeling status ticker, line-color hover highlighting across the map and station list, and signage-style directional hover states. The page must remain readable, responsive, and polished on desktop and mobile. No build tools or additional files. Pinned CDNs and Google Fonts are allowed only if genuinely helpful (a bold grotesk is expected). Return only the complete HTML document inside one html code block.