I've created a flashcard application that allows you to:

1. View Hiragana characters and their romanized pronunciations
2. Flip cards by clicking on them
3. Navigate between cards using Previous/Next buttons
4. Switch between standard mode (Hiragana → Romaji) and reverse mode (Romaji → Hiragana)
5. Track your progress with a card counter

The cards feature a smooth 3D flip animation and are fully responsive. You can start studying by clicking on the card to reveal its answer, and use the navigation buttons to move through the deck.

To use this in your project, you can:

1. Copy the provided files into your Next.js project
2. Complete the hiragana data set in data/hiragana.ts with all characters from the chart
3. Import the CSS file in your layout or page file

Would you like me to add any additional features or make any modifications to the flashcard system?