UI and Audio Processing Update

src/routes/layout.css

@@ -8,9 +8,11 @@
 	--bg-card: #131318;
 	--bg-glass: rgba(19, 19, 24, 0.7);
 
-	--primary: #6366f1; /* Indigo */
+	--primary: #6366f1;
+	/* Indigo */
 	--primary-glow: rgba(99, 102, 241, 0.4);
-	--accent: #ec4899; /* Pink */
+	--accent: #ec4899;
+	/* Pink */
 	--accent-glow: rgba(236, 72, 153, 0.4);
 
 	--text-main: #ffffff;
@@ -43,14 +45,12 @@ h4 {
 	margin-top: 0;
 }
 
-/* Glassmorphism Utilities */
+/* Card Styles (Solid Dark) */
 .glass-panel {
-	background: var(--bg-glass);
-	backdrop-filter: blur(12px);
-	-webkit-backdrop-filter: blur(12px);
+	background: var(--bg-card);
 	border: 1px solid var(--border-subtle);
 	border-radius: 16px;
-	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
+	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
 }
 
 .glass-input {
@@ -72,7 +72,7 @@ h4 {
 
 /* Button Styles */
 .btn-primary {
-	background: linear-gradient(135deg, var(--primary), #4f46e5);
+	background: var(--primary);
 	color: white;
 	border: none;
 	padding: 0.75rem 1.5rem;
@@ -81,7 +81,8 @@ h4 {
 	cursor: pointer;
 	transition:
 		transform 0.1s ease,
-		box-shadow 0.2s ease;
+		box-shadow 0.2s ease,
+		background-color 0.2s ease;
 	text-transform: uppercase;
 	font-size: 0.875rem;
 	letter-spacing: 0.05em;
@@ -90,6 +91,7 @@ h4 {
 .btn-primary:hover {
 	transform: translateY(-1px);
 	box-shadow: 0 4px 20px var(--primary-glow);
+	background: #5558e8;
 }
 
 .btn-primary:active {
@@ -117,7 +119,19 @@ h4 {
 .container {
 	max-width: 1200px;
 	margin: 0 auto;
-	padding: 2rem;
+	padding: 1rem;
+}
+
+@media (min-width: 640px) {
+	.container {
+		padding: 1.5rem;
+	}
+}
+
+@media (min-width: 768px) {
+	.container {
+		padding: 2rem;
+	}
 }
 
 .grid-cols-2 {
@@ -133,13 +147,20 @@ h4 {
 }
 
 .section-title {
-	font-size: 1.5rem;
-	margin-bottom: 1.5rem;
+	font-size: 1.25rem;
+	margin-bottom: 1rem;
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
 }
 
+@media (min-width: 640px) {
+	.section-title {
+		font-size: 1.5rem;
+		margin-bottom: 1.5rem;
+	}
+}
+
 .gradient-text {
 	background: linear-gradient(to right, var(--primary), var(--accent));
 	-webkit-background-clip: text;
@@ -162,4 +183,4 @@ h4 {
 	to {
 		transform: rotate(360deg);
 	}
-}
+}