Engine DNA

Prompt

Act as an expert frontend developer and UI/UX designer. I want you to build a complete, production-ready web application called "Engine DNA". 

CRITICAL CONSTRAINT: Do NOT output everything in a single HTML file. You must separate the project into a clean multi-file structure:
1. `index.html` (Structure)
2. `style.css` (Styling)
3. `data.js` (Engine database and VIN tables)
4. `app.js` (Logic, charts, audio, and interactions)

Because the code is extensive, you must generate the files ONE BY ONE. Start by outputting `data.js` and `index.html`. Then wait for me to ask for `style.css`, and finally `app.js`.

### PROJECT OVERVIEW
Engine DNA is a free, interactive, single-page web app that decodes the "personality" of car and motorcycle engines. It visualizes engine traits (Reliability, Performance, Efficiency, Tunability, Sound) and allows users to compare them, listen to synthesized engine sounds, build hypothetical engines, decode VINs, and save favorites locally.

### UI/UX & DESIGN LANGUAGE
- Colors: Soft, automotive-inspired palette. Asphalt grey (#33363a), cream white (#f2f0ea), soft racing green (#5a7a6a), muted orange (#d88c5a), light silver (#d3d3d3).
- Typography: 'Inter' for body/data, 'Georgia' for headings.
- Layout: A long, single-page vertical scroll with a sticky top navigation bar. Use smooth reveal transitions on scroll.
- Responsive: Mobile-first design. Must not break on phones. Use CSS Grid/Flexbox.
- PWA: Must be installable. Include a manifest file and a simulated service worker registration in the JS.
- Fullscreen Toggle: A fixed button in the top right to toggle fullscreen mode.
- NO motion toggle (Animations are always on).
- Custom Favicon: Use an inline SVG DNA helix as the browser tab icon.

### CORE FEATURES & SECTIONS
1. HERO SECTION
   - Big title: "Engine DNA".
   - Subtitle: "Every engine has a personality..."
   - Buttons to scroll to the decoder.
   - A subtle, animated SVG DNA helix in the background.
   - DO NOT include the text "Free · No account · Installable".

2. DECODE SECTION
   - A dropdown to select an engine (populated from `data.js`).
   - Display engine metadata (Maker, Layout, Years, Displacement).
   - Display 5 animated trait bars (Reliability, Performance, Efficiency, Tunability, Sound).
   - A custom SVG Radar Chart (5 axes) that animates its shape when a new engine is selected.
   - A button to play the engine sound.
   - A button to save to "My Garage" (LocalStorage).

3. COMPARE SECTION
   - Two dropdowns (Engine A and Engine B).
   - A single SVG Radar Chart overlaying both engines' traits (Green for A, Orange for B).
   - A list showing the delta (which engine wins in each trait).

4. SOUND & SOUL SECTION (Dark background)
   - A grid of engine cards with animated waveform bars.
   - Clicking a card plays a synthesized engine sound using the Web Audio API (no external audio files). 
   - Use oscillators, gain nodes, and filters to create a realistic engine rev sound.

5. WHAT-IF GARAGE SECTION
   - 5 range sliders (0-10) for the traits.
   - A dedicated Radar Chart that updates in real-time as sliders move.
   - Dynamic text generation: Based on the slider values, generate a cool hypothetical engine name (e.g., "The Ferocious Flat-Plane V12") and a verdict paragraph.

6. LIBRARY SECTION
   - A search bar.
   - Filter chips (All, I4, V8, V12, Rotary, Electric, etc.).
   - A grid of engine cards. Clicking a card loads that engine into the Decode section and scrolls up.

7. VIN DECODER SECTION
   - An input for a 17-character VIN.
   - A "Decode" button and a "Try a sample" button.
   - Offline logic (no external API) to decode Manufacturer, Region, Model Year, Plant Code, and validate the North American Check Digit. Use standard VIN weighting and transliteration tables in `data.js`.

8. MY GARAGE SECTION
   - Displays saved engines from LocalStorage.
   - Buttons to "Open" or "Remove" each engine.

### SOUND ENGINE REQUIREMENTS (Web Audio API)
- UI Sound Effects: Create a global sound engine. 
  - 'tick': soft short click on buttons.
  - 'whoosh': noise sweep on section changes.
  - 'ding': positive chime on save.
  - 'thud': low frequency on delete/error.
- Engine Revs: Synthesize engine sounds using multiple oscillators (sawtooth/square) combined with a lowpass filter and a noise buffer to simulate exhaust rumble. 

### INSTRUCTIONS FOR CHATGPT
1. Do not use any external libraries (no React, no Chart.js, no Tailwind). Use Vanilla JS, SVG, and CSS.
2. Use modern CSS (CSS variables, Flexbox, Grid).
3. Ensure the VIN Decoder math is 100% accurate based on standard VIN check digit algorithms.
4. Write clean, well-commented code.
5. Remember: Output `data.js` and `index.html` first. Wait for my confirmation to output `style.css` and `app.js`.