From 37316c78725d1db203016b6c2e0219714217550d Mon Sep 17 00:00:00 2001
From: dsnsgithub <dominic@seung.dev>
Date: Sun, 18 Jan 2026 01:07:19 -0800
Subject: [PATCH] Update dependencies and remove unused output config

Updates @astrojs/vercel to v9.0.4 and adjusts the config to remove the
now-deprecated `output` property. Also updates other Astro-related
dependencies to their latest versions.
---
 astro.config.mjs               |   12 +-
 package.json                   |   84 +--
 src/components/Nav.astro       |    2 +-
 src/layouts/Layout.astro       |    4 +-
 src/pages/404.astro            |    1 -
 src/pages/blog/[...slug].astro |    4 +-
 src/pages/blog/index.astro     |   28 +-
 src/pages/eq.astro             | 1001 ++++++++++++++++----------------
 src/pages/status.astro         |    5 +-
 src/pages/youtube.astro        |    7 +-
 10 files changed, 574 insertions(+), 574 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index 45e401f..f6f2626 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,14 +1,12 @@
-import { defineConfig } from 'astro/config';
+import { defineConfig } from "astro/config";
 import tailwind from "@astrojs/tailwind";
 import icon from "astro-icon";
 import react from "@astrojs/react";
 import mdx from "@astrojs/mdx";
-import vercel from "@astrojs/vercel/serverless";
-
+import vercel from "@astrojs/vercel";
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind(), icon(), react(), mdx()],
-  output: "hybrid",
-  adapter: vercel()
-});
\ No newline at end of file
+	integrations: [tailwind(), icon(), react(), mdx()],
+	adapter: vercel()
+});
diff --git a/package.json b/package.json
index b7b61d3..aa5358a 100644
--- a/package.json
+++ b/package.json
@@ -1,44 +1,44 @@
 {
-  "name": "astro-test",
-  "type": "module",
-  "version": "0.0.1",
-  "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
-    "build": "astro check && astro build",
-    "preview": "astro preview",
-    "astro": "astro"
-  },
-  "dependencies": {
-    "@astrojs/check": "^0.9.1",
-    "@astrojs/mdx": "^3.1.3",
-    "@astrojs/react": "^3.6.1",
-    "@astrojs/tailwind": "^5.1.0",
-    "@astrojs/vercel": "^7.7.2",
-    "@fontsource-variable/dm-sans": "^5.0.6",
-    "@formkit/auto-animate": "^0.8.2",
-    "@iconify-json/fa6-brands": "^1.2.5",
-    "@iconify-json/mdi": "^1.2.2",
-    "@octokit/rest": "^22.0.1",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@types/whois-json": "^2.0.4",
-    "astro": "^4.13.0",
-    "astro-icon": "^1.1.5",
-    "bluesky-comments": "^0.9.0",
-    "react": "^18.3.1",
-    "react-confetti": "^6.1.0",
-    "react-dom": "^18.3.1",
-    "react-tooltip": "^5.28.0",
-    "sharp": "^0.33.4",
-    "tailwindcss": "^3.4.7",
-    "typescript": "^5.5.4",
-    "use-lanyard": "^1.7.0"
-  },
-  "devDependencies": {
-    "@tailwindcss/typography": "^0.5.13",
-    "prettier-plugin-astro": "^0.14.1",
-    "prettier-plugin-tailwindcss": "^0.6.6",
-    "tailwind-scrollbar": "^3.1.0"
-  }
+	"name": "dsns.dev",
+	"type": "module",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "astro dev",
+		"start": "astro dev",
+		"build": "astro check && astro build",
+		"preview": "astro preview",
+		"astro": "astro"
+	},
+	"dependencies": {
+		"@astrojs/check": "^0.9.6",
+		"@astrojs/mdx": "^4.3.13",
+		"@astrojs/react": "^4.4.2",
+		"@astrojs/tailwind": "^6.0.2",
+		"@astrojs/vercel": "^9.0.4",
+		"@fontsource-variable/dm-sans": "^5.0.6",
+		"@formkit/auto-animate": "^0.8.2",
+		"@iconify-json/fa6-brands": "^1.2.5",
+		"@iconify-json/mdi": "^1.2.2",
+		"@octokit/rest": "^22.0.1",
+		"@types/react": "^18.3.3",
+		"@types/react-dom": "^18.3.0",
+		"@types/whois-json": "^2.0.4",
+		"astro": "^5.16.11",
+		"astro-icon": "^1.1.5",
+		"bluesky-comments": "^0.9.0",
+		"react": "^18.3.1",
+		"react-confetti": "^6.1.0",
+		"react-dom": "^18.3.1",
+		"react-tooltip": "^5.28.0",
+		"sharp": "^0.33.4",
+		"tailwindcss": "^3.4.7",
+		"typescript": "^5.5.4",
+		"use-lanyard": "^1.7.0"
+	},
+	"devDependencies": {
+		"@tailwindcss/typography": "^0.5.13",
+		"prettier-plugin-astro": "^0.14.1",
+		"prettier-plugin-tailwindcss": "^0.6.6",
+		"tailwind-scrollbar": "^3.1.0"
+	}
 }
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index 06f1df2..ae74eea 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -6,7 +6,7 @@ import NavButton from "./NavButton.astro";
 import SocialButton from "./SocialButton.astro";
 ---
 
-<nav class="mb-10 flex flex-col sm:flex-row items-center justify-between rounded-xl bg-viola-100 px-10 py-6 shadow-lg gap-2">
+<nav class="mb-10 flex flex-col items-center justify-between gap-2 rounded-xl bg-viola-100 px-10 py-6 shadow-lg sm:flex-row">
 	<a class="flex flex-row items-center gap-5" href="/">
 		<Image src={profilePicture} alt="kirby" class="rounded-full" width={48} loading={"eager"} />
 		<h1 class="text-3xl font-bold">dsns.dev</h1>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index a7842f0..9af2fa1 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -13,13 +13,13 @@ const { title, description } = Astro.props;
 ---
 
 <!doctype html>
-<html lang="en" class="overflow-y-scroll overflow-x-hidden scrollbar scrollbar-track-viola-200 scrollbar-thumb-viola-400 scrollbar-track-rounded-full scrollbar-thumb-rounded-full scrollbar-w-2">
+<html lang="en" class="overflow-x-hidden overflow-y-scroll scrollbar scrollbar-track-viola-200 scrollbar-thumb-viola-400 scrollbar-track-rounded-full scrollbar-thumb-rounded-full scrollbar-w-2">
 	<head>
 		<meta charset="UTF-8" />
 		<meta property="og:type" content="website" />
 		<meta property="og:title" content={title} />
 		<meta property="og:description" content={description} />
-		<meta name="theme-color" content="#e2bfcd">
+		<meta name="theme-color" content="#e2bfcd" />
 		<meta property="og:url" content="https://astro.dsns.dev" />
 		<meta property="og:image" content="https://astro.dsns.dev/kirby.png" />
 		<meta name="description" content={description} />
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 73c76a5..025ec7c 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -11,7 +11,6 @@ import Layout from "../layouts/Layout.astro";
 			<p class="mb-10 text-gray-600">The page you're looking for doesn’t exist. It may have been moved or never existed.</p>
 
 			<div class="flex flex-col items-center gap-6 md:flex-row md:justify-center">
-				<!-- Home Card -->
 				<a href="/" class="flex flex-col items-start rounded-xl border border-viola-300 bg-white p-6 text-left shadow-md transition hover:bg-viola-50 hover:shadow-xl">
 					<div class="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-viola-100 text-viola-600 transition group-hover:bg-viola-200">
 						<Icon name="mdi:home" class="h-6 w-6" />
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index ea5a5e8..0167e8e 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -28,8 +28,8 @@ const { Content } = await post.render();
 ---
 
 <Layout title={title} description={description}>
-	<div class="container px-8 md:px-16 lg:px-32 xl:px-32 2xl:px-48 mx-auto flex flex-col gap-5">
-		<div class="font-bold text-2xl mb-6 flex flex-row justify-between">
+	<div class="container mx-auto flex flex-col gap-5 px-8 md:px-16 lg:px-32 xl:px-32 2xl:px-48">
+		<div class="mb-6 flex flex-row justify-between text-2xl font-bold">
 			<h1>{title}</h1>
 			<p>{date.toLocaleDateString()}</p>
 		</div>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 1cf3c54..2a8613c 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -6,22 +6,24 @@ const allBlogPosts = await getCollection("posts");
 ---
 
 <Layout title="Blog" description="Explore my blog posts.">
-	<div class="container px-1 md:px-16 lg:px-32 xl:px-32 2xl:px-48 mx-auto flex flex-col gap-10">
-		<div class="bg-viola-100 rounded-xl p-8 flex flex-col gap-5">
+	<div class="container mx-auto flex flex-col gap-10 px-1 md:px-16 lg:px-32 xl:px-32 2xl:px-48">
+		<div class="flex flex-col gap-5 rounded-xl bg-viola-100 p-8">
 			<h1 class="text-3xl font-bold">Blog</h1>
 			{
-				allBlogPosts.sort((a, b) => {
-					return new Date(b.data.date).getTime() - new Date(a.data.date).getTime();
-				}).map((post) => (
-					<a href={`/blog/${post.slug}`} class="bg-viola-50 rounded-lg p-8 m-2 shadow-lg">
-						<div class="flex flex-row justify-between items-center mb-4">
-							<span class="text-lg font-bold">{post.data.title}</span>
-							<span>{post.data.date.toLocaleDateString()}</span>
-						</div>
+				allBlogPosts
+					.sort((a, b) => {
+						return new Date(b.data.date).getTime() - new Date(a.data.date).getTime();
+					})
+					.map((post) => (
+						<a href={`/blog/${post.slug}`} class="m-2 rounded-lg bg-viola-50 p-8 shadow-lg">
+							<div class="mb-4 flex flex-row items-center justify-between">
+								<span class="text-lg font-bold">{post.data.title}</span>
+								<span>{post.data.date.toLocaleDateString()}</span>
+							</div>
 
-						<p>{post.data.description}</p>
-					</a>
-				))
+							<p>{post.data.description}</p>
+						</a>
+					))
 			}
 		</div>
 	</div>
diff --git a/src/pages/eq.astro b/src/pages/eq.astro
index 00a8716..31565a1 100644
--- a/src/pages/eq.astro
+++ b/src/pages/eq.astro
@@ -71,7 +71,7 @@ import Layout from "../layouts/Layout.astro";
 								type="range"
 								id="seek-bar"
 								value="0"
-								class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-viola-300 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-viola-500 [&::-moz-range-thumb]:transition [&::-moz-range-thumb]:hover:bg-viola-600 [&:disabled::-moz-range-thumb]:bg-slate-300 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-viola-500 [&::-webkit-slider-thumb]:transition [&::-webkit-slider-thumb]:hover:bg-viola-600 [&:disabled::-webkit-slider-thumb]:bg-slate-300 [&::-webkit-slider-thumb]:hover:cursor-not-allowed [&::-moz-range-thumb]:hover:cursor-not-allowed"
+								class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-viola-300 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-viola-500 [&::-moz-range-thumb]:transition [&::-moz-range-thumb]:hover:cursor-not-allowed [&::-moz-range-thumb]:hover:bg-viola-600 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-viola-500 [&::-webkit-slider-thumb]:transition [&::-webkit-slider-thumb]:hover:cursor-not-allowed [&::-webkit-slider-thumb]:hover:bg-viola-600 [&:disabled::-moz-range-thumb]:bg-slate-300 [&:disabled::-webkit-slider-thumb]:bg-slate-300"
 								disabled
 							/>
 							<span id="duration" class="w-12 text-center text-sm">0:00</span>
@@ -93,296 +93,292 @@ import Layout from "../layouts/Layout.astro";
 			</section>
 
 			<section class="mt-12 space-y-4">
-			<div id="eq-header" class="hidden items-center justify-between ">
-				<h3 class="text-lg font-semibold">Parametric EQ</h3>
-				<div class="flex gap-2">
-					<button id="add-band-btn" class="px-3 py-1 bg-viola-300 hover:bg-viola-400 rounded-lg text-sm font-medium transition shadow">
-						+ Add Band
-					</button>
-					<button id="reset-eq-btn" class="px-3 py-1 bg-viola-200 hover:bg-viola-300 rounded-lg text-sm font-medium transition shadow">
-						Reset EQ
-					</button>
+				<div id="eq-header" class="hidden items-center justify-between">
+					<h3 class="text-lg font-semibold">Parametric EQ</h3>
+					<div class="flex gap-2">
+						<button id="add-band-btn" class="rounded-lg bg-viola-300 px-3 py-1 text-sm font-medium shadow transition hover:bg-viola-400"> + Add Band </button>
+						<button id="reset-eq-btn" class="rounded-lg bg-viola-200 px-3 py-1 text-sm font-medium shadow transition hover:bg-viola-300"> Reset EQ </button>
+					</div>
 				</div>
-			</div>
-			<div id="eq-details" class="grid grid-cols-1 gap-4 pt-4 md:grid-cols-3 lg:grid-cols-5"></div>
-		</section>
-		<script is:inline>
-			document.addEventListener("astro:page-load", () => {
-				run();
-			});
-
-			function run() {
-				// DOM Elements
-				const audioFileInput = document.getElementById("audio-file");
-				const audioPlayer = document.getElementById("audio-player");
-				const visualizerWrapper = document.getElementById("visualizer-wrapper");
-				const canvas = document.getElementById("visualizer-canvas");
-				const eqDetailsContainer = document.getElementById("eq-details");
-				const playPauseBtn = document.getElementById("play-pause-btn");
-				const playIcon = document.getElementById("play-icon");
-				const pauseIcon = document.getElementById("pause-icon");
-				const seekBar = document.getElementById("seek-bar");
-				const currentTimeDisplay = document.getElementById("current-time");
-				const durationDisplay = document.getElementById("duration");
-				const resetSelectionBtn = document.getElementById("reset-selection-btn");
-				const addBandBtn = document.getElementById("add-band-btn");
-				const resetEqBtn = document.getElementById("reset-eq-btn");
-
-				const ctx = canvas.getContext("2d");
-
-				// Audio Context and Nodes
-				let audioContext;
-				let sourceNode;
-				let analyserNode;
-				let gainNode;
-				let filters = [];
-				let selectionFilters = { highpass: null, lowpass: null };
-
-				// State
-				let isPlaying = false;
-				let isDraggingPoint = null;
-				let isSelectingRange = false;
-				let selectionRect = { startX: 0, endX: 0, startFreq: 0, endFreq: 0 };
-
-				const EQ_BANDS = [];
-
-				const detailSlider = document.getElementById("detail-slider");
-				const detailTooltip = document.getElementById("detail-tooltip");
-				if (detailSlider && detailTooltip) {
-					detailSlider.addEventListener("input", () => {
-						detailTooltip.textContent = Math.pow(2, detailSlider.value);
-						detailTooltip.style.opacity = 1;
-
-						setTimeout(() => {
+				<div id="eq-details" class="grid grid-cols-1 gap-4 pt-4 md:grid-cols-3 lg:grid-cols-5"></div>
+			</section>
+			<script is:inline>
+				document.addEventListener("astro:page-load", () => {
+					run();
+				});
+
+				function run() {
+					// DOM Elements
+					const audioFileInput = document.getElementById("audio-file");
+					const audioPlayer = document.getElementById("audio-player");
+					const visualizerWrapper = document.getElementById("visualizer-wrapper");
+					const canvas = document.getElementById("visualizer-canvas");
+					const eqDetailsContainer = document.getElementById("eq-details");
+					const playPauseBtn = document.getElementById("play-pause-btn");
+					const playIcon = document.getElementById("play-icon");
+					const pauseIcon = document.getElementById("pause-icon");
+					const seekBar = document.getElementById("seek-bar");
+					const currentTimeDisplay = document.getElementById("current-time");
+					const durationDisplay = document.getElementById("duration");
+					const resetSelectionBtn = document.getElementById("reset-selection-btn");
+					const addBandBtn = document.getElementById("add-band-btn");
+					const resetEqBtn = document.getElementById("reset-eq-btn");
+
+					const ctx = canvas.getContext("2d");
+
+					// Audio Context and Nodes
+					let audioContext;
+					let sourceNode;
+					let analyserNode;
+					let gainNode;
+					let filters = [];
+					let selectionFilters = { highpass: null, lowpass: null };
+
+					// State
+					let isPlaying = false;
+					let isDraggingPoint = null;
+					let isSelectingRange = false;
+					let selectionRect = { startX: 0, endX: 0, startFreq: 0, endFreq: 0 };
+
+					const EQ_BANDS = [];
+
+					const detailSlider = document.getElementById("detail-slider");
+					const detailTooltip = document.getElementById("detail-tooltip");
+					if (detailSlider && detailTooltip) {
+						detailSlider.addEventListener("input", () => {
+							detailTooltip.textContent = Math.pow(2, detailSlider.value);
+							detailTooltip.style.opacity = 1;
+
+							setTimeout(() => {
+								detailTooltip.style.opacity = 0;
+							}, 1000);
+						});
+
+						detailSlider.addEventListener("mouseover", () => {
+							detailTooltip.style.opacity = 1;
+						});
+
+						detailSlider.addEventListener("mouseout", () => {
 							detailTooltip.style.opacity = 0;
-						}, 1000);
-					});
+						});
 
-					detailSlider.addEventListener("mouseover", () => {
-						detailTooltip.style.opacity = 1;
-					});
+						detailSlider.addEventListener("change", () => {
+							detailTooltip.style.opacity = 0;
+						});
+						detailSlider.addEventListener("blur", () => {
+							detailTooltip.style.opacity = 0;
+						});
+					}
 
-					detailSlider.addEventListener("mouseout", () => {
-						detailTooltip.style.opacity = 0;
-					});
+					// --- Initialization ---
 
-					detailSlider.addEventListener("change", () => {
-						detailTooltip.style.opacity = 0;
-					});
-					detailSlider.addEventListener("blur", () => {
-						detailTooltip.style.opacity = 0;
-					});
-				}
+					function initAudioContext() {
+						if (audioContext) return;
 
-				// --- Initialization ---
+						audioContext = new (window.AudioContext || window.webkitAudioContext)();
+						analyserNode = audioContext.createAnalyser();
+						analyserNode.fftSize = 16384;
+						gainNode = audioContext.createGain();
 
-				function initAudioContext() {
-					if (audioContext) return;
+						const detailSlider = document.getElementById("detail-slider");
+						detailSlider.addEventListener("input", () => {
+							analyserNode.fftSize = 2 ** detailSlider.value;
+						});
 
-					audioContext = new (window.AudioContext || window.webkitAudioContext)();
-					analyserNode = audioContext.createAnalyser();
-					analyserNode.fftSize = 16384;
-					gainNode = audioContext.createGain();
+						// Create selection filters (initially disabled)
+						selectionFilters.highpass = audioContext.createBiquadFilter();
+						selectionFilters.highpass.type = "highpass";
+						selectionFilters.highpass.frequency.value = 20; // Pass everything above 20Hz
+
+						selectionFilters.lowpass = audioContext.createBiquadFilter();
+						selectionFilters.lowpass.type = "lowpass";
+						selectionFilters.lowpass.frequency.value = 20000; // Pass everything below 20kHz
+
+						// Create EQ filters
+						filters = EQ_BANDS.map((band) => {
+							const filter = audioContext.createBiquadFilter();
+							filter.type = band.type;
+							filter.frequency.value = band.f;
+							filter.Q.value = 1.41;
+							filter.gain.value = 0;
+							return filter;
+						});
+					}
 
-					const detailSlider = document.getElementById("detail-slider");
-					detailSlider.addEventListener("input", () => {
-						analyserNode.fftSize = 2 ** detailSlider.value;
-					});
+					function connectAudioNodes() {
+						if (!sourceNode) return;
+						// Disconnect to avoid multiple connections
+						sourceNode.disconnect();
 
-					// Create selection filters (initially disabled)
-					selectionFilters.highpass = audioContext.createBiquadFilter();
-					selectionFilters.highpass.type = "highpass";
-					selectionFilters.highpass.frequency.value = 20; // Pass everything above 20Hz
-
-					selectionFilters.lowpass = audioContext.createBiquadFilter();
-					selectionFilters.lowpass.type = "lowpass";
-					selectionFilters.lowpass.frequency.value = 20000; // Pass everything below 20kHz
-
-					// Create EQ filters
-					filters = EQ_BANDS.map((band) => {
-						const filter = audioContext.createBiquadFilter();
-						filter.type = band.type;
-						filter.frequency.value = band.f;
-						filter.Q.value = 1.41;
-						filter.gain.value = 0;
-						return filter;
-					});
-				}
+						let lastNode = sourceNode;
 
-				function connectAudioNodes() {
-					if (!sourceNode) return;
-					// Disconnect to avoid multiple connections
-					sourceNode.disconnect();
+						// Chain EQ filters
+						for (const filter of filters) {
+							lastNode.connect(filter);
+							lastNode = filter;
+						}
 
-					let lastNode = sourceNode;
+						// Chain selection filters
+						lastNode.connect(selectionFilters.highpass);
+						selectionFilters.highpass.connect(selectionFilters.lowpass);
 
-					// Chain EQ filters
-					for (const filter of filters) {
-						lastNode.connect(filter);
-						lastNode = filter;
+						// Connect to analyser, gain, and destination
+						selectionFilters.lowpass.connect(analyserNode);
+						analyserNode.connect(gainNode);
+						gainNode.connect(audioContext.destination);
 					}
 
-					// Chain selection filters
-					lastNode.connect(selectionFilters.highpass);
-					selectionFilters.highpass.connect(selectionFilters.lowpass);
+					// --- File Handling ---
 
-					// Connect to analyser, gain, and destination
-					selectionFilters.lowpass.connect(analyserNode);
-					analyserNode.connect(gainNode);
-					gainNode.connect(audioContext.destination);
-				}
+					audioFileInput.addEventListener("change", (e) => {
+						const file = e.target.files[0];
+						if (file) {
+							if (isPlaying) {
+								audioPlayer.pause();
+								isPlaying = false;
+							}
 
-				// --- File Handling ---
+							// Reset play button to show play icon when new song is loaded
+							playIcon.classList.remove("hidden");
+							pauseIcon.classList.add("hidden");
 
-				audioFileInput.addEventListener("change", (e) => {
-					const file = e.target.files[0];
-					if (file) {
-						if (isPlaying) {
-							audioPlayer.pause();
-							isPlaying = false;
-						}
+							const objectUrl = URL.createObjectURL(file);
+							audioPlayer.src = objectUrl;
+							playPauseBtn.disabled = false;
+							seekBar.disabled = false;
 
-						// Reset play button to show play icon when new song is loaded
-						playIcon.classList.remove("hidden");
-						pauseIcon.classList.add("hidden");
+							// Show EQ header when file is loaded
+							const eqHeader = document.getElementById("eq-header");
+							if (eqHeader) {
+								eqHeader.classList.remove("hidden");
+								eqHeader.style.display = "flex";
+							}
 
-						const objectUrl = URL.createObjectURL(file);
-						audioPlayer.src = objectUrl;
-						playPauseBtn.disabled = false;
-						seekBar.disabled = false;
+							if (!audioContext) {
+								initAudioContext();
+							}
 
-						// Show EQ header when file is loaded
-						const eqHeader = document.getElementById("eq-header");
-						if (eqHeader) {
-							eqHeader.classList.remove("hidden");
-							eqHeader.style.display = "flex";
-						}
+							if (!sourceNode) {
+								sourceNode = audioContext.createMediaElementSource(audioPlayer);
+							}
 
-						if (!audioContext) {
-							initAudioContext();
+							connectAudioNodes();
 						}
+					});
 
-						if (!sourceNode) {
-							sourceNode = audioContext.createMediaElementSource(audioPlayer);
-						}
+					// --- Canvas and Visualization ---
 
-						connectAudioNodes();
+					function resizeCanvas() {
+						canvas.width = visualizerWrapper.clientWidth;
+						canvas.height = visualizerWrapper.clientHeight;
+					}
+					window.addEventListener("resize", resizeCanvas);
+					resizeCanvas();
+
+					function freqToX(freq, maxFreq) {
+						const logFreq = Math.log10(freq);
+						const minLogFreq = Math.log10(20); // Min audible frequency
+						const maxLogFreq = Math.log10(maxFreq);
+						const percent = (logFreq - minLogFreq) / (maxLogFreq - minLogFreq);
+						return percent * (canvas.width - 20) + 20;
 					}
-				});
 
-				// --- Canvas and Visualization ---
+					function xToFreq(x, maxFreq) {
+						const percent = x / canvas.width;
+						const minLogFreq = Math.log10(20);
+						const maxLogFreq = Math.log10(maxFreq);
+						const logFreq = minLogFreq + percent * (maxLogFreq - minLogFreq);
+						return Math.pow(10, logFreq);
+					}
 
-				function resizeCanvas() {
-					canvas.width = visualizerWrapper.clientWidth;
-					canvas.height = visualizerWrapper.clientHeight;
-				}
-				window.addEventListener("resize", resizeCanvas);
-				resizeCanvas();
-
-				function freqToX(freq, maxFreq) {
-					const logFreq = Math.log10(freq);
-					const minLogFreq = Math.log10(20); // Min audible frequency
-					const maxLogFreq = Math.log10(maxFreq);
-					const percent = (logFreq - minLogFreq) / (maxLogFreq - minLogFreq);
-					return percent * (canvas.width - 20) + 20;
-				}
+					function draw() {
+						requestAnimationFrame(draw);
+						if (!analyserNode) return;
 
-				function xToFreq(x, maxFreq) {
-					const percent = x / canvas.width;
-					const minLogFreq = Math.log10(20);
-					const maxLogFreq = Math.log10(maxFreq);
-					const logFreq = minLogFreq + percent * (maxLogFreq - minLogFreq);
-					return Math.pow(10, logFreq);
-				}
+						const bufferLength = analyserNode.frequencyBinCount;
+						const dataArray = new Uint8Array(bufferLength);
+						analyserNode.getByteFrequencyData(dataArray);
 
-				function draw() {
-					requestAnimationFrame(draw);
-					if (!analyserNode) return;
+						ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-					const bufferLength = analyserNode.frequencyBinCount;
-					const dataArray = new Uint8Array(bufferLength);
-					analyserNode.getByteFrequencyData(dataArray);
+						// Gradient for bars
+						const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
+						gradient.addColorStop(0, "#fbcfe8");
+						gradient.addColorStop(1, "#f9a8d4");
+						ctx.fillStyle = gradient;
 
-					ctx.clearRect(0, 0, canvas.width, canvas.height);
+						const maxFreq = audioContext.sampleRate / 2;
 
-					// Gradient for bars
-					const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
-					gradient.addColorStop(0, "#fbcfe8");
-					gradient.addColorStop(1, "#f9a8d4");
-					ctx.fillStyle = gradient;
+						for (let i = 0; i < bufferLength; i++) {
+							const barHeight = (dataArray[i] / 255) * canvas.height;
+							let freq = (i * maxFreq) / bufferLength;
+							if (freq < 20) freq = 20; // Clamp to 20 Hz for mapping
+							const posX = freqToX(freq, maxFreq);
+							const nextFreq = ((i + 1) * maxFreq) / bufferLength;
+							const nextPosX = freqToX(nextFreq, maxFreq);
+							const width = Math.max(2, nextPosX - posX);
+
+							if (posX < canvas.width) {
+								ctx.fillRect(posX, canvas.height - barHeight, width, barHeight);
+							}
+						}
 
-					const maxFreq = audioContext.sampleRate / 2;
+						// Draw frequency labels
+						drawFreqLabels(maxFreq);
 
-					for (let i = 0; i < bufferLength; i++) {
-						const barHeight = (dataArray[i] / 255) * canvas.height;
-						let freq = (i * maxFreq) / bufferLength;
-						if (freq < 20) freq = 20; // Clamp to 20 Hz for mapping
-						const posX = freqToX(freq, maxFreq);
-						const nextFreq = ((i + 1) * maxFreq) / bufferLength;
-						const nextPosX = freqToX(nextFreq, maxFreq);
-						const width = Math.max(2, nextPosX - posX);
+						// Draw selection rectangle
+						if (isSelectingRange || selectionRect.startX !== selectionRect.endX) {
+							ctx.fillStyle = "rgba(59, 130, 246, 0.2)";
+							const start = Math.min(selectionRect.startX, selectionRect.endX);
+							const width = Math.abs(selectionRect.endX - selectionRect.startX);
+							ctx.fillRect(start, 0, width, canvas.height);
 
-						if (posX < canvas.width) {
-							ctx.fillRect(posX, canvas.height - barHeight, width, barHeight);
+							ctx.strokeStyle = "rgba(96, 165, 250, 0.8)";
+							ctx.lineWidth = 1;
+							ctx.strokeRect(start, 0, width, canvas.height);
 						}
 					}
 
-					// Draw frequency labels
-					drawFreqLabels(maxFreq);
-
-					// Draw selection rectangle
-					if (isSelectingRange || selectionRect.startX !== selectionRect.endX) {
-						ctx.fillStyle = "rgba(59, 130, 246, 0.2)";
-						const start = Math.min(selectionRect.startX, selectionRect.endX);
-						const width = Math.abs(selectionRect.endX - selectionRect.startX);
-						ctx.fillRect(start, 0, width, canvas.height);
-
-						ctx.strokeStyle = "rgba(96, 165, 250, 0.8)";
-						ctx.lineWidth = 1;
-						ctx.strokeRect(start, 0, width, canvas.height);
+					function drawFreqLabels(maxFreq) {
+						const labels = [20, 30, 60, 100, 250, 500, 1000, 2000, 5000, 10000, 20000];
+						ctx.fillStyle = "#000000";
+						ctx.font = "bold 10px DM Sans Variable";
+						ctx.textAlign = "center";
+
+						labels.forEach((freq) => {
+							if (freq < maxFreq) {
+								const x = freqToX(freq, maxFreq);
+								ctx.fillText(`${freq < 1000 ? freq : freq / 1000 + "k"}Hz`, x, canvas.height - 10);
+								// Draw vertical line
+								ctx.beginPath();
+								ctx.moveTo(x, 0);
+								ctx.lineTo(x, canvas.height - 25);
+								ctx.strokeStyle = "rgba(255, 255, 255, 0.1)";
+								ctx.stroke();
+							}
+						});
 					}
-				}
 
-				function drawFreqLabels(maxFreq) {
-					const labels = [20, 30, 60, 100, 250, 500, 1000, 2000, 5000, 10000, 20000];
-					ctx.fillStyle = "#000000";
-					ctx.font = "bold 10px DM Sans Variable";
-					ctx.textAlign = "center";
-
-					labels.forEach((freq) => {
-						if (freq < maxFreq) {
-							const x = freqToX(freq, maxFreq);
-							ctx.fillText(`${freq < 1000 ? freq : freq / 1000 + "k"}Hz`, x, canvas.height - 10);
-							// Draw vertical line
-							ctx.beginPath();
-							ctx.moveTo(x, 0);
-							ctx.lineTo(x, canvas.height - 25);
-							ctx.strokeStyle = "rgba(255, 255, 255, 0.1)";
-							ctx.stroke();
-						}
-					});
-				}
+					// --- EQ Controls ---
 
-				// --- EQ Controls ---
+					function createEQControls() {
+						visualizerWrapper.querySelectorAll(".eq-point").forEach((p) => p.remove());
+						eqDetailsContainer.innerHTML = "";
 
-				function createEQControls() {
-					visualizerWrapper.querySelectorAll(".eq-point").forEach((p) => p.remove());
-					eqDetailsContainer.innerHTML = "";
+						const maxFreq = audioContext ? audioContext.sampleRate / 2 : 22050;
 
-					const maxFreq = audioContext ? audioContext.sampleRate / 2 : 22050;
+						filters.forEach((filter, index) => {
+							// Create draggable point
+							const point = document.createElement("div");
+							point.className =
+								"eq-point absolute w-4 h-4 bg-viola-800 border-2 border-white rounded-full cursor-grab shadow-lg transform -translate-x-1/2 -translate-y-1/2 hover:bg-viola-900 transition-colors";
+							point.dataset.index = index;
+							visualizerWrapper.appendChild(point);
 
-					filters.forEach((filter, index) => {
-						// Create draggable point
-						const point = document.createElement("div");
-						point.className =
-							"eq-point absolute w-4 h-4 bg-viola-800 border-2 border-white rounded-full cursor-grab shadow-lg transform -translate-x-1/2 -translate-y-1/2 hover:bg-viola-900 transition-colors";
-						point.dataset.index = index;
-						visualizerWrapper.appendChild(point);
-
-						// Create detail card
-						const card = document.createElement("div");
-						card.className = "bg-viola-200 p-3 rounded-lg text-sm border border-viola-300 relative";
-						card.innerHTML = `
+							// Create detail card
+							const card = document.createElement("div");
+							card.className = "bg-viola-200 p-3 rounded-lg text-sm border border-viola-300 relative";
+							card.innerHTML = `
                         <div class="flex items-center justify-between mb-2">
                             <p class="font-bold text-center flex-1" id="freq-display-${index}">${filter.frequency.value < 1000 ? Math.round(filter.frequency.value) + " Hz" : (filter.frequency.value / 1000).toFixed(1) + " kHz"}</p>
                             <button class="remove-band-btn ml-2 px-2 py-1 bg-viola-600 hover:bg-viola-700 rounded text-xs font-medium text-white transition" data-index="${index}">×</button>
@@ -410,310 +406,311 @@ import Layout from "../layouts/Layout.astro";
                             <input type="range" id="q-${index}" min="0.1" max="18" value="${filter.Q.value}" step="0.1" class="w-full h-1.5 bg-viola-50 rounded-lg appearance-none cursor-pointer [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-viola-500 [&::-moz-range-thumb]:transition [&::-moz-range-thumb]:hover:bg-viola-600 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-viola-500 [&::-webkit-slider-thumb]:transition [&::-webkit-slider-thumb]:hover:bg-viola-600">
                         </div>
                     `;
-						eqDetailsContainer.appendChild(card);
-
-						updatePointPosition(index);
+							eqDetailsContainer.appendChild(card);
 
-						// Event listeners for card controls
-						const freqSlider = card.querySelector(`#freq-${index}`);
-						freqSlider.addEventListener("input", (e) => {
-							const newFreq = parseFloat(e.target.value);
-							filter.frequency.value = newFreq;
 							updatePointPosition(index);
-							const freqText = newFreq < 1000 ? Math.round(newFreq) + " Hz" : (newFreq / 1000).toFixed(1) + " kHz";
-							card.querySelector(`#freq-val-${index}`).textContent = freqText;
-							card.querySelector(`#freq-display-${index}`).textContent = freqText;
-						});
 
-						const gainSlider = card.querySelector(`#gain-${index}`);
-						gainSlider.addEventListener("input", (e) => {
-							const newGain = parseFloat(e.target.value);
-							filter.gain.value = newGain;
-							updatePointPosition(index);
-							card.querySelector(`#gain-val-${index}`).textContent = `${newGain.toFixed(1)} dB`;
+							// Event listeners for card controls
+							const freqSlider = card.querySelector(`#freq-${index}`);
+							freqSlider.addEventListener("input", (e) => {
+								const newFreq = parseFloat(e.target.value);
+								filter.frequency.value = newFreq;
+								updatePointPosition(index);
+								const freqText = newFreq < 1000 ? Math.round(newFreq) + " Hz" : (newFreq / 1000).toFixed(1) + " kHz";
+								card.querySelector(`#freq-val-${index}`).textContent = freqText;
+								card.querySelector(`#freq-display-${index}`).textContent = freqText;
+							});
+
+							const gainSlider = card.querySelector(`#gain-${index}`);
+							gainSlider.addEventListener("input", (e) => {
+								const newGain = parseFloat(e.target.value);
+								filter.gain.value = newGain;
+								updatePointPosition(index);
+								card.querySelector(`#gain-val-${index}`).textContent = `${newGain.toFixed(1)} dB`;
+							});
+
+							const typeSelect = card.querySelector(`#type-${index}`);
+							typeSelect.addEventListener("change", (e) => {
+								const newType = e.target.value;
+								filter.type = newType;
+								const qContainer = card.querySelector(`#q-container-${index}`);
+								if (newType === "peaking" || newType === "lowpass" || newType === "highpass") {
+									qContainer.style.display = "block";
+								} else {
+									qContainer.style.display = "none";
+								}
+							});
+
+							const qSlider = card.querySelector(`#q-${index}`);
+							qSlider.addEventListener("input", (e) => {
+								const newQ = parseFloat(e.target.value);
+								filter.Q.value = newQ;
+								card.querySelector(`#q-val-${index}`).textContent = newQ.toFixed(2);
+							});
+
+							// Remove band button
+							const removeBtn = card.querySelector(".remove-band-btn");
+							removeBtn.addEventListener("click", () => {
+								removeBand(index);
+							});
 						});
 
-						const typeSelect = card.querySelector(`#type-${index}`);
-						typeSelect.addEventListener("change", (e) => {
-							const newType = e.target.value;
-							filter.type = newType;
-							const qContainer = card.querySelector(`#q-container-${index}`);
-							if (newType === "peaking" || newType === "lowpass" || newType === "highpass") {
-								qContainer.style.display = "block";
-							} else {
-								qContainer.style.display = "none";
-							}
-						});
-
-						const qSlider = card.querySelector(`#q-${index}`);
-						qSlider.addEventListener("input", (e) => {
-							const newQ = parseFloat(e.target.value);
-							filter.Q.value = newQ;
-							card.querySelector(`#q-val-${index}`).textContent = newQ.toFixed(2);
-						});
-
-						// Remove band button
-						const removeBtn = card.querySelector(".remove-band-btn");
-						removeBtn.addEventListener("click", () => {
-							removeBand(index);
-						});
-					});
-
-					addPointEventListeners();
-				}
+						addPointEventListeners();
+					}
 
-				function updatePointPosition(index) {
-					const point = visualizerWrapper.querySelector(`.eq-point[data-index='${index}']`);
-					const filter = filters[index];
-					const maxFreq = audioContext ? audioContext.sampleRate / 2 : 22050;
+					function updatePointPosition(index) {
+						const point = visualizerWrapper.querySelector(`.eq-point[data-index='${index}']`);
+						const filter = filters[index];
+						const maxFreq = audioContext ? audioContext.sampleRate / 2 : 22050;
 
-					const x = freqToX(filter.frequency.value, maxFreq);
-					const y = (-filter.gain.value / 20 + 1) * (canvas.height / 2); // Map gain (-20 to 20) to canvas height
+						const x = freqToX(filter.frequency.value, maxFreq);
+						const y = (-filter.gain.value / 20 + 1) * (canvas.height / 2); // Map gain (-20 to 20) to canvas height
 
-					point.style.left = `${x - point.offsetWidth / 2}px`;
-					point.style.top = `${y - point.offsetHeight / 2}px`;
-				}
+						point.style.left = `${x - point.offsetWidth / 2}px`;
+						point.style.top = `${y - point.offsetHeight / 2}px`;
+					}
 
-				function addPointEventListeners() {
-					const points = visualizerWrapper.querySelectorAll(".eq-point");
-					points.forEach((point) => {
-						point.addEventListener("mousedown", (e) => {
-							isDraggingPoint = e.target;
-							e.target.style.cursor = "grabbing";
-						});
-						point.addEventListener(
-							"touchstart",
-							(e) => {
+					function addPointEventListeners() {
+						const points = visualizerWrapper.querySelectorAll(".eq-point");
+						points.forEach((point) => {
+							point.addEventListener("mousedown", (e) => {
 								isDraggingPoint = e.target;
-								e.preventDefault();
-							},
-							{ passive: false }
-						);
-					});
-				}
-
-				visualizerWrapper.addEventListener("mousemove", (e) => {
-					if (isDraggingPoint) {
-						handlePointMove(e.clientX, e.clientY);
-					} else if (isSelectingRange) {
-						selectionRect.endX = e.clientX - visualizerWrapper.getBoundingClientRect().left;
+								e.target.style.cursor = "grabbing";
+							});
+							point.addEventListener(
+								"touchstart",
+								(e) => {
+									isDraggingPoint = e.target;
+									e.preventDefault();
+								},
+								{ passive: false }
+							);
+						});
 					}
-				});
-				visualizerWrapper.addEventListener(
-					"touchmove",
-					(e) => {
+
+					visualizerWrapper.addEventListener("mousemove", (e) => {
 						if (isDraggingPoint) {
-							handlePointMove(e.touches[0].clientX, e.touches[0].clientY);
+							handlePointMove(e.clientX, e.clientY);
 						} else if (isSelectingRange) {
-							selectionRect.endX = e.touches[0].clientX - visualizerWrapper.getBoundingClientRect().left;
+							selectionRect.endX = e.clientX - visualizerWrapper.getBoundingClientRect().left;
 						}
-						e.preventDefault();
-					},
-					{ passive: false }
-				);
-
-				function handlePointMove(clientX, clientY) {
-					const rect = visualizerWrapper.getBoundingClientRect();
-					const x = clientX - rect.left;
-					const y = clientY - rect.top;
-					const index = isDraggingPoint.dataset.index;
-
-					// Update gain (vertical movement)
-					const yPercent = y / rect.height;
-					const gain = (1 - 2 * yPercent) * 20; // Map y to gain (-20 to 20)
-					const gainValue = Math.max(-20, Math.min(20, gain));
-					filters[index].gain.value = gainValue;
-
-					// Update frequency (horizontal movement)
-					const maxFreq = audioContext ? audioContext.sampleRate / 2 : 22050;
-					const newFreq = xToFreq(x, maxFreq);
-					const freqValue = Math.max(20, Math.min(Math.min(maxFreq, 20000), newFreq));
-					filters[index].frequency.value = freqValue;
-
-					updatePointPosition(index);
-
-					// Update detail card
-					const freqSlider = eqDetailsContainer.querySelector(`#freq-${index}`);
-					const freqValSpan = eqDetailsContainer.querySelector(`#freq-val-${index}`);
-					const freqDisplaySpan = eqDetailsContainer.querySelector(`#freq-display-${index}`);
-					const gainSlider = eqDetailsContainer.querySelector(`#gain-${index}`);
-					const gainValSpan = eqDetailsContainer.querySelector(`#gain-val-${index}`);
-
-					if (freqSlider) {
-						freqSlider.value = freqValue;
-						const freqText = freqValue < 1000 ? Math.round(freqValue) + " Hz" : (freqValue / 1000).toFixed(1) + " kHz";
-						freqValSpan.textContent = freqText;
-						freqDisplaySpan.textContent = freqText;
-					}
+					});
+					visualizerWrapper.addEventListener(
+						"touchmove",
+						(e) => {
+							if (isDraggingPoint) {
+								handlePointMove(e.touches[0].clientX, e.touches[0].clientY);
+							} else if (isSelectingRange) {
+								selectionRect.endX = e.touches[0].clientX - visualizerWrapper.getBoundingClientRect().left;
+							}
+							e.preventDefault();
+						},
+						{ passive: false }
+					);
+
+					function handlePointMove(clientX, clientY) {
+						const rect = visualizerWrapper.getBoundingClientRect();
+						const x = clientX - rect.left;
+						const y = clientY - rect.top;
+						const index = isDraggingPoint.dataset.index;
+
+						// Update gain (vertical movement)
+						const yPercent = y / rect.height;
+						const gain = (1 - 2 * yPercent) * 20; // Map y to gain (-20 to 20)
+						const gainValue = Math.max(-20, Math.min(20, gain));
+						filters[index].gain.value = gainValue;
+
+						// Update frequency (horizontal movement)
+						const maxFreq = audioContext ? audioContext.sampleRate / 2 : 22050;
+						const newFreq = xToFreq(x, maxFreq);
+						const freqValue = Math.max(20, Math.min(Math.min(maxFreq, 20000), newFreq));
+						filters[index].frequency.value = freqValue;
 
-					gainSlider.value = gainValue;
-					gainValSpan.textContent = `${gainValue.toFixed(1)} dB`;
-				}
+						updatePointPosition(index);
 
-				window.addEventListener("mouseup", () => {
-					if (isDraggingPoint) {
-						isDraggingPoint.style.cursor = "grab";
-						isDraggingPoint = null;
-					}
-				});
-				window.addEventListener("touchend", () => {
-					if (isDraggingPoint) {
-						isDraggingPoint.style.cursor = "grab";
-						isDraggingPoint = null;
+						// Update detail card
+						const freqSlider = eqDetailsContainer.querySelector(`#freq-${index}`);
+						const freqValSpan = eqDetailsContainer.querySelector(`#freq-val-${index}`);
+						const freqDisplaySpan = eqDetailsContainer.querySelector(`#freq-display-${index}`);
+						const gainSlider = eqDetailsContainer.querySelector(`#gain-${index}`);
+						const gainValSpan = eqDetailsContainer.querySelector(`#gain-val-${index}`);
+
+						if (freqSlider) {
+							freqSlider.value = freqValue;
+							const freqText = freqValue < 1000 ? Math.round(freqValue) + " Hz" : (freqValue / 1000).toFixed(1) + " kHz";
+							freqValSpan.textContent = freqText;
+							freqDisplaySpan.textContent = freqText;
+						}
+
+						gainSlider.value = gainValue;
+						gainValSpan.textContent = `${gainValue.toFixed(1)} dB`;
 					}
-				});
 
-				// --- Frequency Range Selection ---
+					window.addEventListener("mouseup", () => {
+						if (isDraggingPoint) {
+							isDraggingPoint.style.cursor = "grab";
+							isDraggingPoint = null;
+						}
+					});
+					window.addEventListener("touchend", () => {
+						if (isDraggingPoint) {
+							isDraggingPoint.style.cursor = "grab";
+							isDraggingPoint = null;
+						}
+					});
 
-				visualizerWrapper.addEventListener("mousedown", (e) => {
-					// Only start selection if not dragging a point
-					if (!e.target.classList.contains("eq-point")) {
-						isSelectingRange = true;
-						selectionRect.startX = e.clientX - visualizerWrapper.getBoundingClientRect().left;
-						selectionRect.endX = selectionRect.startX;
-					}
-				});
+					// --- Frequency Range Selection ---
 
-				window.addEventListener("mouseup", () => {
-					if (isSelectingRange) {
-						isSelectingRange = false;
-						const maxFreq = audioContext.sampleRate / 2;
-						const freq1 = xToFreq(selectionRect.startX, maxFreq);
-						const freq2 = xToFreq(selectionRect.endX, maxFreq);
+					visualizerWrapper.addEventListener("mousedown", (e) => {
+						// Only start selection if not dragging a point
+						if (!e.target.classList.contains("eq-point")) {
+							isSelectingRange = true;
+							selectionRect.startX = e.clientX - visualizerWrapper.getBoundingClientRect().left;
+							selectionRect.endX = selectionRect.startX;
+						}
+					});
 
-						selectionRect.startFreq = Math.min(freq1, freq2);
-						selectionRect.endFreq = Math.max(freq1, freq2);
+					window.addEventListener("mouseup", () => {
+						if (isSelectingRange) {
+							isSelectingRange = false;
+							const maxFreq = audioContext.sampleRate / 2;
+							const freq1 = xToFreq(selectionRect.startX, maxFreq);
+							const freq2 = xToFreq(selectionRect.endX, maxFreq);
 
-						// Don't apply if selection is too small
-						if (Math.abs(selectionRect.endX - selectionRect.startX) > 5) {
-							applyFrequencySelection();
-						} else {
-							resetFrequencySelection();
+							selectionRect.startFreq = Math.min(freq1, freq2);
+							selectionRect.endFreq = Math.max(freq1, freq2);
+
+							// Don't apply if selection is too small
+							if (Math.abs(selectionRect.endX - selectionRect.startX) > 5) {
+								applyFrequencySelection();
+							} else {
+								resetFrequencySelection();
+							}
 						}
+					});
+
+					function applyFrequencySelection() {
+						if (!audioContext) return;
+						selectionFilters.highpass.frequency.setValueAtTime(selectionRect.startFreq, audioContext.currentTime);
+						selectionFilters.lowpass.frequency.setValueAtTime(selectionRect.endFreq, audioContext.currentTime);
+						resetSelectionBtn.classList.remove("hidden");
 					}
-				});
 
-				function applyFrequencySelection() {
-					if (!audioContext) return;
-					selectionFilters.highpass.frequency.setValueAtTime(selectionRect.startFreq, audioContext.currentTime);
-					selectionFilters.lowpass.frequency.setValueAtTime(selectionRect.endFreq, audioContext.currentTime);
-					resetSelectionBtn.classList.remove("hidden");
-				}
+					function resetFrequencySelection() {
+						if (!audioContext) return;
+						selectionFilters.highpass.frequency.setValueAtTime(20, audioContext.currentTime);
+						selectionFilters.lowpass.frequency.setValueAtTime(20000, audioContext.currentTime);
+						selectionRect = { startX: 0, endX: 0, startFreq: 0, endFreq: 0 };
+						resetSelectionBtn.classList.add("hidden");
+					}
 
-				function resetFrequencySelection() {
-					if (!audioContext) return;
-					selectionFilters.highpass.frequency.setValueAtTime(20, audioContext.currentTime);
-					selectionFilters.lowpass.frequency.setValueAtTime(20000, audioContext.currentTime);
-					selectionRect = { startX: 0, endX: 0, startFreq: 0, endFreq: 0 };
-					resetSelectionBtn.classList.add("hidden");
-				}
+					resetSelectionBtn.addEventListener("click", resetFrequencySelection);
 
-				resetSelectionBtn.addEventListener("click", resetFrequencySelection);
+					// --- Parametric EQ Functions ---
 
-				// --- Parametric EQ Functions ---
+					function addBand() {
+						if (!audioContext) return;
 
-				function addBand() {
-					if (!audioContext) return;
+						// Create new filter at 1kHz
+						const newFilter = audioContext.createBiquadFilter();
+						newFilter.type = "peaking";
+						newFilter.frequency.value = 1000;
+						newFilter.Q.value = 1.41;
+						newFilter.gain.value = 0;
 
-					// Create new filter at 1kHz
-					const newFilter = audioContext.createBiquadFilter();
-					newFilter.type = "peaking";
-					newFilter.frequency.value = 1000;
-					newFilter.Q.value = 1.41;
-					newFilter.gain.value = 0;
+						filters.push(newFilter);
+						connectAudioNodes();
+						createEQControls();
+					}
 
-					filters.push(newFilter);
-					connectAudioNodes();
-					createEQControls();
-				}
+					function removeBand(index) {
+						// Disconnect the filter
+						filters[index].disconnect();
 
-				function removeBand(index) {
-					// Disconnect the filter
-					filters[index].disconnect();
+						// Remove from array
+						filters.splice(index, 1);
 
-					// Remove from array
-					filters.splice(index, 1);
+						// Reconnect audio chain and recreate controls
+						connectAudioNodes();
+						createEQControls();
+					}
 
-					// Reconnect audio chain and recreate controls
-					connectAudioNodes();
-					createEQControls();
-				}
+					function resetEQ() {
+						if (!audioContext) return;
 
-				function resetEQ() {
-					if (!audioContext) return;
+						// Reset all existing filters' gain and Q
+						filters.forEach((filter) => {
+							filter.gain.value = 0;
+							filter.Q.value = 1.41;
+							filter.type = "peaking";
+						});
 
-					// Reset all existing filters' gain and Q
-					filters.forEach((filter) => {
-						filter.gain.value = 0;
-						filter.Q.value = 1.41;
-						filter.type = "peaking";
-					});
+						connectAudioNodes();
+						createEQControls();
+					}
 
-					connectAudioNodes();
-					createEQControls();
-				}
+					// Event listeners for parametric controls
+					addBandBtn.addEventListener("click", addBand);
+					resetEqBtn.addEventListener("click", resetEQ);
 
-				// Event listeners for parametric controls
-				addBandBtn.addEventListener("click", addBand);
-				resetEqBtn.addEventListener("click", resetEQ);
+					// --- Playback Controls ---
+					playPauseBtn.addEventListener("click", () => {
+						if (!audioContext) return;
 
-				// --- Playback Controls ---
-				playPauseBtn.addEventListener("click", () => {
-					if (!audioContext) return;
+						if (audioContext.state === "suspended") {
+							audioContext.resume();
+						}
 
-					if (audioContext.state === "suspended") {
-						audioContext.resume();
-					}
+						if (isPlaying) {
+							audioPlayer.pause();
+						} else {
+							audioPlayer.play();
+						}
+					});
 
-					if (isPlaying) {
-						audioPlayer.pause();
-					} else {
-						audioPlayer.play();
-					}
-				});
+					audioPlayer.addEventListener("play", () => {
+						isPlaying = true;
+						playIcon.classList.add("hidden");
+						pauseIcon.classList.remove("hidden");
+					});
 
-				audioPlayer.addEventListener("play", () => {
-					isPlaying = true;
-					playIcon.classList.add("hidden");
-					pauseIcon.classList.remove("hidden");
-				});
+					audioPlayer.addEventListener("pause", () => {
+						isPlaying = false;
+						playIcon.classList.remove("hidden");
+						pauseIcon.classList.add("hidden");
+					});
 
-				audioPlayer.addEventListener("pause", () => {
-					isPlaying = false;
-					playIcon.classList.remove("hidden");
-					pauseIcon.classList.add("hidden");
-				});
+					audioPlayer.addEventListener("timeupdate", () => {
+						seekBar.value = audioPlayer.currentTime;
+						currentTimeDisplay.textContent = formatTime(audioPlayer.currentTime);
+					});
 
-				audioPlayer.addEventListener("timeupdate", () => {
-					seekBar.value = audioPlayer.currentTime;
-					currentTimeDisplay.textContent = formatTime(audioPlayer.currentTime);
-				});
+					audioPlayer.addEventListener("loadedmetadata", () => {
+						durationDisplay.textContent = formatTime(audioPlayer.duration);
+						seekBar.max = audioPlayer.duration;
+					});
 
-				audioPlayer.addEventListener("loadedmetadata", () => {
-					durationDisplay.textContent = formatTime(audioPlayer.duration);
-					seekBar.max = audioPlayer.duration;
-				});
+					seekBar.addEventListener("input", () => {
+						audioPlayer.currentTime = seekBar.value;
+					});
 
-				seekBar.addEventListener("input", () => {
-					audioPlayer.currentTime = seekBar.value;
-				});
+					function formatTime(seconds) {
+						const minutes = Math.floor(seconds / 60);
+						const secs = Math.floor(seconds % 60);
+						return `${minutes}:${secs < 10 ? "0" : ""}${secs}`;
+					}
 
-				function formatTime(seconds) {
-					const minutes = Math.floor(seconds / 60);
-					const secs = Math.floor(seconds % 60);
-					return `${minutes}:${secs < 10 ? "0" : ""}${secs}`;
-				}
+					// --- Initial App State ---
+					function initApp() {
+						initAudioContext();
+						createEQControls();
+						draw();
+					}
 
-				// --- Initial App State ---
-				function initApp() {
-					initAudioContext();
-					createEQControls();
-					draw();
+					// Await user interaction for autoplay policy
+					document.body.addEventListener("click", initApp, { once: true });
 				}
-
-				// Await user interaction for autoplay policy
-				document.body.addEventListener("click", initApp, { once: true });
-			}
-		</script>
+			</script>
+		</div>
 	</div>
 </Layout>
diff --git a/src/pages/status.astro b/src/pages/status.astro
index 06999cb..cfc4c48 100644
--- a/src/pages/status.astro
+++ b/src/pages/status.astro
@@ -5,7 +5,6 @@ import ServerStatus from "../components/port/ServerStatus";
 
 <Layout title="Server Status" description="Check the status of various servers.">
 	<div class="container mx-auto flex flex-col gap-10 px-1 md:px-8 lg:px-10 xl:px-32 2xl:px-48">
-		<ServerStatus client:load>
-		</ServerStatus>
+		<ServerStatus client:load />
 	</div>
-</Layout>
\ No newline at end of file
+</Layout>
diff --git a/src/pages/youtube.astro b/src/pages/youtube.astro
index 990c4e9..e3f4b9b 100644
--- a/src/pages/youtube.astro
+++ b/src/pages/youtube.astro
@@ -11,7 +11,12 @@ import Layout from "../layouts/Layout.astro";
 			</div>
 
 			<form method="post" action="https://youtube.dsns.dev/download" class="mb-4 flex flex-row gap-x-4">
-				<input type="text" name="url" placeholder="https://www.youtube.com/watch?v=khy_ltiFBN0" class="w-5/6 flex-grow rounded-lg border px-6 py-4 text-xl focus:border-viola-500 focus:outline-none" />
+				<input
+					type="text"
+					name="url"
+					placeholder="https://www.youtube.com/watch?v=khy_ltiFBN0"
+					class="w-5/6 flex-grow rounded-lg border px-6 py-4 text-xl focus:border-viola-500 focus:outline-none"
+				/>
 
 				<select name="format" class="rounded-xl p-4">
 					<option value="video">Best Video (MP4)</option>