Now let me check for any existing components I can leverage and read the tailwind config:

Now I'll create the yoga video library with the premium wellness aesthetic. Let me update the globals.css with earth tones and create the main component:

Now let me update the layout to add the Cormorant Garamond font and create the yoga video library component:

Now let me create the main Yoga Video Library component:

Now let me create the page that wraps the component and add a demo script for testing:

Now let me update the globals.css to fix the font reference:

Let me check the current state of the app by reading the debug logs:

The app is compiling successfully. Let me view the current state:

The app is running without errors. I've built a premium yoga video library UI with all the requested features:

Key Features:

1. Live Now Banner - A pulsing coral banner at the top when liveVideo exists, showing instructor name and start time with an animated live indicator
2. Tab Bar - Clean toggle between "Library" and "My Favourites" tabs
3. Category Pills - Horizontal scrollable filter pills with "All" plus dynamic categories from the data
4. Search Bar - Full-text search filtering by title, category, and instructor
5. Responsive Video Grid - 1/2/3/4 columns based on screen size, with cards showing thumbnails, titles, category badges, duration, and heart icons
6. Heart Toggle - Clicking the heart calls actions.toggleFavourite(id) and shows filled/outline state
7. Play Video - Clicking a card calls actions.playVideo(id) for the external modal
8. Empty States - Distinct messages for no search results vs. empty favourites
9. Premium Aesthetic - Muted earth tones (sage green, terracotta, warm beige, cream), clean typography with tight tracking, generous whitespace, and subtle hover animations

The component listens for yoga-app-update custom events on the #yoga-app element and re-renders when new state is dispatched. I've included demo data so you can see the UI in action immediately.