You are building me a single, self-contained, interactive HTML page called "NetworkExplorer" from my LinkedIn data export. I've given you my unzipped LinkedIn export folder (CSV files). Read the files, compute the stats, and generate ONE file named `NetworkExplorer.html` with everything (HTML, CSS, JS, and the data) inline. Use Chart.js and D3 from cdnjs CDNs. No backend, no external data — embed my computed data as a JS object.

## STEP 1 — PARSE MY DATA (Python or equivalent)
Read these files from my export (filenames may vary slightly; match loosely):
- **Connections.csv** (has a 2–3 line preamble before the real header `First Name,Last Name,URL,Email Address,Company,Position,Connected On`). Skip the preamble.
- **Invitations.csv** (`From,To,Sent At,Message,Direction,...`) — Direction is INCOMING or OUTGOING.
- **messages.csv** (`CONVERSATION ID,CONVERSATION TITLE,FROM,...,TO,...,DATE,SUBJECT,CONTENT,FOLDER,...`).
- **Company Follows.csv**, **Endorsement_Received_Info.csv**, **Skills.csv**, **Recommendations_Received.csv**, **Recommendations_Given.csv**, **Positions.csv**, **Profile.csv**, **Ad_Targeting.csv**.

Use MY name from Profile.csv as the "owner" for message direction. Treat "LinkedIn Member" as a masked/private profile and exclude it from named lists.

### Compute these (be exact, show me the key totals when done):
**Network composition & influence** — classify each connection by their `Position` using case-insensitive regex:
- Recruiters/Talent: `recruit|talent acquisition|talent partner|sourcer|headhunt|staffing|\btalent\b|people operations|head of people`
- Founders/C-suite: `\b(ceo|cto|coo|cfo|cmo|cpo|ciso|cio|chief|founder|co-?founder|president|owner|managing director|managing partner|general partner|partner)\b`
- VP/Director/Head: `\b(vp|vice president|svp|evp|head of|director|principal)\b`
- Investors/VC: `\b(investor|venture|\bvc\b|capital|angel|equity)\b` (check Position AND Company)
- Engineers/Builders: `\b(engineer|developer|software|devops|sre|architect|full[- ]?stack|backend|frontend)\b`
- **high_influence** = count of connections matching Founders/C-suite OR VP/Director OR Investors.
- Top companies by connection count; total unique companies.

**Growth** — connections grouped by month and by year (parse `Connected On` like "12 Jun 2026"). Build "career layers": buckets like 2008–2014, 2015–2019, 2020–2022, 2023–2024, 2025, 2026 (adapt to my date range) with a connection count and a short evocative label each.

**Inbound vs outbound** — from Invitations.csv: count INCOMING vs OUTGOING overall and by month. Compute ratio = inbound / max(1, outbound).

**Engagement & relationships** — from messages.csv grouped by CONVERSATION ID:
- messages_sent (FROM = me) vs messages_received.
- Top engagers: people (FROM ≠ me) who sent me the most messages — top ~18, with their last message date and how many times I replied.
- Relationship tiers across my connections: **active** (≥5 messages & messaged within 12 mo), **some** (1–4 within 12 mo), **stale** (last message 6–24 mo ago), **dormant** (>2 yrs), **never** (never messaged).
- Messages by month.

**Lost-opportunity DM search** — find conversations where the MOST RECENT message is from someone else (I haven't replied) within the last 6 months, whose content matches an opportunity type, EXCLUDING spam/sales pitches:
- Spam/pitch exclusion regex (skip these): `dedicated developers?|hire developers?|outsourc|web design services|seo services|guaranteed|crypto|increase your (sales|revenue|traffic)|boost your|lead generation|book a (call|demo)|free trial|% off|i (specialis|special)|i'?m a (full[- ]?stack|react|node) (developer|engineer)|my team|staff augment|hourly rate|portfolio|financial advisor|life insurance|mortgage`
- Opportunity types (keep, classify by first match): **Opportunity / Role** (`opportunity|fractional|advisor|consult|contract role|position|opening|we'?re hiring|board seat|equity`), **Collaboration** (`collaborat|partner with|work together|co-?found`), **Podcast / Media** (`podcast|interview|guest|on (the|our) show|webinar|speaker`), **Meeting** (`grab (a )?(coffee|call|chat)|quick call|15[- ]?min|30[- ]?min|book (a )?time|calendar|are you (free|available)`), **Warm Intro** (`introduc|connect you (with|to)|mutual (connection|friend)`).
- For each: partner name, type, days waiting, a 160-char snippet of their last message, whether they followed up (≥2 inbound messages with no reply), count of their messages.
- Totals: total unanswered high-value, how many followed up, how many "salvageable" (arrived in last 14 days). Sort by: followups first, then high-value type, then most recent.

**Inbox quality** — of all inbound messages, what % are genuine vs spam/sales (use the spam regex above). Break down by half-year (e.g. "2025 H1") as genuine vs spam counts.

**LinkedIn inferences vs reality** — from Ad_Targeting.csv, scan the "Member Interests" AND "Member Skills" columns (semicolon-separated). Surface the funniest OFF-BASE inferred items (things unrelated to my real work) by matching: `perfume|mountaineer|fisher|drone|swarm robot|petroleum|nuclear|wind turbine|marine eng|aircraft|landscape arch|hvac|steel struct|food prep|sanctuary|energy psych|automotive enthus|cctv|closed-circuit|locomotive|rolling stock|earthquake|pipeline|oil and gas|farm machin|agriculture|reservoir|subsea|mining eng|aerospace|chemical eng|gene editing|dna sequenc`. Call this "What LinkedIn thinks." For "What your data shows," derive 6–10 real themes from my top skills, company follows, and headline (e.g. AI Strategy, Engineering Leadership, Fractional/Advisory, my actual industry).

**Endorsements & credibility** — accepted endorsements grouped by skill (top 14–20); top ~15 endorsers by count; counts of recommendations received and given; my skills list.

**Network Score (0–100)** — a fun composite, computed as:
`score = min(40, total_connections/150) + min(25, high_influence/100) + min(20, inbound_ratio*1.0) + min(15, total_endorsements/80)`, rounded. Map to a grade label: ≥85 "Powerhouse operator", ≥70 "Strong connector", ≥50 "Rising builder", else "Early networker", each with a one-line description.

## STEP 2 — BUILD THE PAGE (exact design system — match it precisely)

**Aesthetic: dark luxury + gold ("PeptIQ" style).** Premium, editorial, confident.
- Fonts (Google Fonts): headings **Fraunces** (serif, weight 600, letter-spacing -0.02em); body **Instrument Sans**.
- CSS variables / palette:
  - `--bg:#000000; --card:#0c0c0c; --line:#1f1f1f; --line2:#2a2a2a;`
  - `--fg:#ffffff; --fg2:#a3a3a3; --fg3:#6f6f6f;`
  - Gold scale: `--gold:#c49746; --gold-hi/cream:#feeaa5; --gold-lo:#a07a37; --gold-deep:#533517; --gold-text:#F2DCA9;`
  - Brand highlights for charts: pink `#ffc0cb`, blue `#c8d8ff`, light-gold `#d7b261`, bronze `#7b5d2a`.
  - Gold gradient (for headings, score, "gold-text" elements): `linear-gradient(135deg,#c49746 0%,#feeaa5 38%,#c49746 72%,#feeaa5 100%)` with `background-clip:text;color:transparent`.
  - Easing `cubic-bezier(0.22,1,0.36,1)`; gold glow shadow `0 10px 50px -18px rgba(196,151,70,.55)`.
- Body background: subtle radial gold glows top-left/top-right + a faint 30px gold grid overlay.
- Chart.js styled for dark: axis/legend text `#a3a3a3`, gridlines `rgba(255,255,255,.07)`, bars/lines in the gold palette above.

**Layout: full-screen, fixed LEFT sidebar nav (NOT top).**
- Sidebar (~264px, fixed): top shows the brand **"NetworkExplorer"** (the word "Explorer" in gold) with a small uppercase subtitle. Below it, a vertical nav list of all sections, each with a 2-digit index and label. As I scroll (or click), the current section's nav item becomes **active** — highlighted gold with a glowing left indicator bar — using an IntersectionObserver scroll-spy. At the bottom of the sidebar: a **"Names: shown/hidden"** privacy toggle button and my connection count + generated date.
- Main area (margin-left for sidebar) with a **sticky top bar**: left = current section name (breadcrumb that updates on scroll); **top-right = a gold pill button "+ Add Kris Chase on LinkedIn" linking to https://www.linkedin.com/in/krisrchase (target=_blank).** Keep this exact CTA — it credits the creator.
- On mobile (<1000px): sidebar slides off-canvas behind a ☰ toggle; single-column.

**Animations (subtle, tasteful):**
- Every section/card fades + slides up as it scrolls into view (IntersectionObserver adds an `in` class; respect `prefers-reduced-motion`).
- Stat numbers **count up** from 0 when revealed.
- The Network Score ring animates (SVG stroke-dashoffset) and the number counts up.
- Staggered reveal for grids of cards; career-layer bars grow to width on reveal.

**Sections (in this order, numbered 01–12), each pulling from the computed data:**
1. **Overview** — hero: "Inside the network of **[My Name]**" (gold gradient), my headline, location + total connections. Then the **Network Score card** (animated ring + grade + description) beside a 2×2 "flex" grid (high-influence people, inbound ratio, founders/C-suite, endorsements). Then a **share bar**: "✦ Copy my brag card", "Copy Network Score", and "Connect with [First name] →". Then 8 animated stat cards.
2. **Network Universe** — an EXPANDABLE D3 force-directed graph with depth: a glowing gold "YOU" node linked to the top ~30 companies (node size = connections there; color by Big Tech / Talent-HR / Startup / Agency-Other; circles use radial gold gradients + an SVG glow filter). **Clicking a company node expands it** to reveal the individual people you know there as a second layer of small child nodes (with names), animating in via the D3 enter/exit update pattern; clicking again collapses it. Clicking "YOU" collapses everything and recenters. Draggable, zoomable (scroll), tooltips on hover that say "click to expand people." Pre-compute a `company_people` map (top ~36 companies → up to ~22 people each: name + title) and embed it. Add a one-line hint under the graph: "click a company to expand the people · drag · scroll to zoom."
3. **Reach & Influence** — 3 stat cards + two scrollable people lists (Founders & C-suite; Recruiters & talent) with colored initial-avatars (no photos — LinkedIn exports don't include them).
4. **Composition** — role doughnut + top-companies horizontal bar.
5. **Growth** — connections-by-month area line + "career in layers" animated bars.
6. **Inbound vs Outbound** — 3 stats (ratio, received, sent) + grouped bar by month.
7. **Engagement** — relationship-tiers stacked bar (active→never) with legend + top-engagers list + messages-by-month bar.
8. **Lost-opportunity DM search** — 3 stats (unanswered high-value, followed up, salvageable) + an urgency-sorted list (priority marker, masked-able name, snippet, type badge, days waiting) + a type breakdown. Frame honestly: "flagged by keyword — skim and judge."
9. **Inbox Quality** — 3 stats (% genuine, % noise, total analyzed) + stacked genuine-vs-spam bar by half-year.
10. **Inferences vs Reality** — two columns: "🤖 What LinkedIn thinks" (the funny inferred tags) vs "✦ What your data shows" (real themes).
11. **Credibility** — most-endorsed-skills bar + top-endorsers list + recommendation counts.
12. **Activity Graphs** — GitHub-style contribution heatmaps (trailing 12 months, brighter square = busier day, gold color ramp, month + weekday labels, hover tooltip per day, less→more legend). Build these from data I actually have:
    - **Messaging activity** — daily message count from messages.csv (real, rich).
    - **New connections** — daily new connections from Connections.csv `Connected On` (real).
    - **Posting activity** — daily posts from Rich_Media.csv (parse the "uploaded a feed document on [date]" entries) plus a short list of my recent posts with their text.
    - Be honest in the UI: LinkedIn's **basic** export only includes posts that had media, and contains **no post-engagement data** (likes/comments) or text-only posts — those require the "larger data archive" (Shares.csv). If a Shares.csv / reactions / comments file IS present, build real posts + engagement heatmaps from it instead.
13. **2026 Playbook** — 6 action cards generated from MY numbers (clear buried opportunities; re-activate cooling connections; leverage recruiters; court founders/execs; amplify inbound with content; lead with top endorsed skill). End with a **"Make your own NetworkExplorer"** call-to-action card with a button **"Get the prompt from Kris →" linking to https://www.linkedin.com/in/krisrchase** and a "+ Connect on LinkedIn" button to the same URL.

## STEP 3 — VIRAL / SHARE FEATURES (make it brag-worthy)
- **Network Score** front-and-center — the screenshot magnet.
- **"Copy my brag card"** button: copies a clean text block to clipboard with my score + grade + 5 headline stats + a line: "Generated my own NetworkExplorer from my LinkedIn export. Get the prompt from Kris Chase: https://www.linkedin.com/in/krisrchase". Show a gold toast "Copied ✦".
- **"Copy Network Score"** button: short one-liner with score + the make-your-own link.
- **Privacy / share-safe toggle**: a button that instantly anonymizes every person's name to initials (e.g. "A. V.") across all lists, the universe tooltip, and the hero — so I can screenshot and post publicly without exposing others. Default = names shown.
- Keep the page a single shareable `.html` file (works offline except fonts/CDN).

## IMPORTANT — make it actually work
- **Inline the libraries, don't hot-link a CDN.** When the page is opened as a local `file://` (or behind an ad-blocker/firewall), CDN `<script src>` tags often fail to load — which silently blanks the D3 graph and Chart.js charts. Download Chart.js (`chart.umd.min.js`) and D3 (`d3.min.js`) and paste their full source inline into `<script>…</script>` tags so the page works offline and when shared. (Google Fonts via `<link>` is fine — it degrades gracefully.)
- **Don't use SVG `url(#…)` references** for the network graph (no `<filter>` glow, no `<radialGradient>` fills). Chrome blocks `url()` references in SVG on `file://` pages (throws "Unsafe attempt to load URL") and the graph renders blank. Use solid hex fills, and create depth with a second translucent circle behind a node (a "halo") rather than a filter.
- **No duplicate IDs.** Give the graph's container `<div>` a unique id (e.g. `universeGraph`) that is DIFFERENT from the section's id. If the section and the inner graph div share an id, `d3.select('#id')` grabs the section and renders the graph in the wrong place (it appears ~800px lower, overlapping other sections, while the box looks empty).
- Give the score card an `id` and observe THAT id for the ring/count-up animation — don't observe an element that doesn't exist, or the script will halt and later sections (like the universe graph) silently won't load.
- **Wrap chart creation in try/catch** so that if one chart errors, it can't halt the script before the graph and later sections render.
- **Lay the force graph out synchronously** (run the simulation's tick a couple hundred times immediately, then paint) instead of relying only on animation-frame timers — different browsers throttle background/offscreen rAF and the graph can otherwise show up blank.
- Run the page logic AFTER injecting the HTML, and **verify the JavaScript parses with no syntax/runtime errors before you finish** (a single broken reference can stop everything below it from rendering).

## OUTPUT
Generate the complete `NetworkExplorer.html`. Then tell me my Network Score, my 5 headline stats, and remind me to use the Names toggle before sharing publicly. Verify the JavaScript has no syntax errors before finishing.