```markdown # VoidScape Media Player Design Brief ## Core Features 1. **Dual Interface System**: - Main Playlist View - Search Modal View 2. **Player Components**: - Draggable mini-player (fixed position) - Play/Pause, Next/Previous, Shuffle controls - Progress bar with time indicators - Current track display (X of Y) 3. **Playlist View**: - Title header with gradient text - Search bar with search button - Variable zoom flex-grid (2x2 to 8x8) - Card components showing: - Video thumbnail - Duration badge - Video title - Channel/author name - Green background (downloaded) - Remove "X" button (lower right) 4. **Search Modal**: - Full-screen overlay with blurred background - Same card format as playlist but with: - Red background (not downloaded) - Remove "X" button - Green glowing border on selection - "Back to Playlist" button 5. **Interaction Flow**: - User enters search term → clicks search → modal opens - Clicking cards in search adds to playlist - "Download New" button initiates downloads - All functions accessible while playing media ## Technical Requirements 1. **Frontend**: - HTML5, CSS3, JavaScript (ES6+) - Web Components for reusable UI - Responsive flex-grid layout - Smooth animations/transitions - Dark theme with accent colors 2. **Backend**: - Python Flask server - REST API endpoints for: - Playlist management - Search functionality - Player controls 3. **State Management**: - Current playlist - Search results - Player status (playing/paused) - Current track position ## Visual Design - Color Scheme: - Primary: Dark background (#111827) - Secondary: Gradient accents (blue-purple) - Status Indicators: - Green: Downloaded (#14532d) - Red: Not downloaded (#7f1d1d) - Typography: - Main font: Inter (clean, modern) - Headers: Bold with gradient text - Body: Medium weight, high contrast ## User Flow 1. Landing on playlist view 2. Searching for content 3. Adding to playlist 4. Managing downloads 5. Controlling playback 6. Accessing all features during playback ```