I found where the genres are defined. I need to update both genreColors and estimatedCounts, and also check the search API to see if it maps genres correctly.

Now I understand the structure. I need to update all three places: genreColors and estimatedCounts in page.tsx, and the genre mappings in both API routes. Let me add more genres:

Now let me update the estimatedCounts:

Now let me update the API routes to support the new genres:

Now update the search API to recognize the new genres:

Now update the genreScores in the search API to include the new genres:

I've added 6 new genres to the home page: Romance, Horror, Historical Fiction, Biography, Self-Help, and Poetry. Each genre has a unique color, description, estimated book count, and proper Open Library subject mappings in both the books API and search API. The genre detection system will now correctly categorize books into these new categories based on their subjects.

The screenshot shows the home page with 12 genre nodes (Horror, Self-Help, Literary Fiction, Sci-Fi, Philosophy, Non-Fiction, Fantasy, Biography, Historical Fiction, Romance, Poetry) spread very far apart across the screen. The DomeGallery background shows book covers like Tolkien, George Orwell's 1984, and Coding Interview books.

I'll group the genres closer together, add the title/subtitle, and create a pulsing info button with a popup.

Now I understand the structure. I need to:

1. Adjust the D3 simulation forces to bring genres closer together
2. Add the title and subtitle above the genres
3. Add an info button with popup

Let me make these changes:

Now let me add a state for the info popup and add the title, subtitle, and info button. First, let me find where the states are defined:

Now let me add the import for the Info icon and update the UI with title, subtitle, info button, and popup:

Now let me update the Legend section in genres view to add the title, subtitle, and info button instead of the current legend. I'll replace the existing genres legend:

I've made three key changes:

1. Tightened genre clustering - Reduced the D3 force parameters: link distance from 180 to 90, increased link strength, reduced charge repulsion from -500 to -180, and added centering strength to pull genres together in the center.
2. Added title and subtitle - "Book Recommendation System" as the main heading with "made by SaiGuru" below it, positioned above the genre nodes.
3. Added pulsing info button - A "How it works" button with animated ping and pulse effects that opens a modal explaining the entire system: what it is, how it works (Open Library API + AI sentiment analysis + cosine similarity), and how to use it.

I see the issue. The CSS is using --segments-x and --segments-y variables but they might not be set properly with units. Let me check where these are set:

I see the issue - the CSS variables --segments-x and --segments-y are being set as numbers but CSS expects them to have default values in the CSS file. Also, there might be an issue with --item-size-x and --item-size-y. Let me check the full CSS and fix the default values:

The issue is that CSS variables like --segments-x, --segments-y, --item-size-x, --item-size-y are used in calculations but don't have default values. I need to add fallback default values:

Now let me also fix the .item class calculation which uses item-size variables:

I've fixed the CSS by adding default values for all the custom properties (--segments-x, --segments-y, --item-size-x, --item-size-y, --offset-x, --offset-y) that were being used in calculations without fallbacks. This should resolve the "Invalid custom property, expected a value" error.

The issue is that CSS custom properties set in inline styles need to be strings, not numbers. The values like segments, it.x, it.y, etc. are numbers but CSS expects string values. Let me fix this:

I've fixed the issue by converting all numeric CSS custom property values to strings using String(). CSS custom properties in React inline styles must be string values, not raw numbers. This should resolve the "Invalid custom property, expected a value" error.

The debug logs show AI Gateway errors related to credit card, but that's a separate issue. The CSS error might be coming from the original DomeGallery.tsx that was copied. Let me check it:

The original DomeGallery.tsx file also has the same issue with numeric values. Since we're not using that file (we're using BookCoverBackground.tsx), let me just delete it to avoid confusion, and also simplify the BookCoverBackground component by removing the problematic CSS variable approach entirely and using a simpler implementation:

Now let me rewrite the BookCoverBackground to use a simpler approach without the problematic CSS custom properties by calculating the transforms directly in JavaScript: