Split player.html into separate CSS and JS files

.github/copilot-instructions.md

@@ -4,13 +4,13 @@ This file provides guidance for GitHub Copilot when working on the Local Web Aud
 
 ## Project Overview
 
-This is a single-page web audio player application that uses modern browser APIs (File System Access API, Web Audio API, Media Session API) to play local audio files. The entire application is contained in `player.html` with no build tooling or dependencies.
+This is a single-page web audio player application that uses modern browser APIs (File System Access API, Web Audio API, Media Session API) to play local audio files. The application consists of `player.html`, `player.css`, and `player.js` with no build tooling or dependencies.
 
 ## Key Architecture Principles
 
 ### Single-File Design
-- All HTML, CSS, and JavaScript are contained in `player.html`
-- Keep code inline unless there's a clear modular benefit
+- HTML, CSS, and JavaScript are separated into `player.html`, `player.css`, and `player.js` respectively
+- Keep code modular and maintainable
 - No bundlers, transpilers, or build steps required
 - The app runs directly in Chromium-based browsers
 
@@ -107,7 +107,9 @@ This is a single-page web audio player application that uses modern browser APIs
 ### Current Structure
 ```
 /
-├── player.html          # Main application file (HTML + CSS + JS)
+├── player.html          # Main application HTML structure
+├── player.css           # Application styles
+├── player.js            # Application logic
 ├── media/              # Optional local assets for manual testing (not shipped)
 ├── README.md           # User-facing documentation and manual test steps
 ├── AGENTS.md           # General repository guidelines for all agents
@@ -117,7 +119,7 @@ This is a single-page web audio player application that uses modern browser APIs
 
 ### Adding Files
 - Supporting assets (icons, fonts) go in `media/` with appropriate subfolders
-- Keep the single-file architecture unless absolutely necessary
+- Keep the separation of concerns (HTML structure, CSS styles, JS logic)
 - Document any new files in README.md and AGENTS.md
 
 ## Common Tasks

AGENTS.md

@@ -1,11 +1,13 @@
 # Repository Guidelines
 
 ## Project Structure & Module Organization
-- `player.html` – single-page web app with all UI, logic, and styles.
+- `player.html` – main HTML structure for the web app
+- `player.css` – all styles for the application
+- `player.js` – all application logic and interactivity
 - `media/` – optional local assets for manual testing; not shipped.
 - `README.md` – quick-start usage notes. Keep it aligned with UI changes.
 
-Keep any new JS or CSS inline unless a clear modular benefit exists. If you add supporting files (e.g., icons, fonts), place them under `media/` with subfolders as needed.
+The app maintains separation of concerns with HTML, CSS, and JavaScript in separate files. If you add supporting files (e.g., icons, fonts), place them under `media/` with subfolders as needed.
 
 ## Build, Test, and Development Commands
 - `open player.html` (macOS) / `xdg-open player.html` (Linux) – launch the app in a Chromium browser.

README.md

@@ -1,6 +1,6 @@
 # Local Web Audio Player
 
-Single-page MP3 folder player focused on fast local playback, rich listening history, and streamer-friendly tooling, all bundled into one `player.html`.
+Single-page MP3 folder player focused on fast local playback, rich listening history, and streamer-friendly tooling. The app uses `player.html` with separate `player.css` and `player.js` files.
 
 ## Why This Exists
 - YouTube/YouTube Music insert too many ads.