Enhance UI with a highly responsive, clean, and mobile-friendly design

index.html

@@ -7,7 +7,7 @@
     
     <!-- Meta tags for premium look and SEO -->
     <meta name="description" content="Generate highly expressive speech with voice cloning. Powered by LTX-2.3 and Resemble Perth watermarking.">
-    <meta name="theme-color" content="#0d0f17">
+    <meta name="theme-color" content="#0a0b10">
     
     <!-- Google Fonts: Outfit and Inter -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -16,19 +16,22 @@
     
     <style>
         :root {
-            --bg-color: #080a10;
-            --panel-bg: rgba(18, 22, 38, 0.7);
-            --border-color: rgba(255, 255, 255, 0.08);
-            --text-primary: #f1f3f9;
-            --text-secondary: #9aa0b9;
+            --bg-color: #06070a;
+            --panel-bg: rgba(13, 15, 24, 0.7);
+            --panel-border: rgba(255, 255, 255, 0.05);
+            --text-primary: #f8fafc;
+            --text-secondary: #94a3b8;
             --accent-orange: #ff6b35;
-            --accent-orange-glow: rgba(255, 107, 53, 0.4);
+            --accent-orange-hover: #ff8554;
+            --accent-orange-glow: rgba(255, 107, 53, 0.25);
             --accent-purple: #8b5cf6;
-            --accent-purple-glow: rgba(139, 92, 246, 0.4);
+            --accent-purple-hover: #a78bfa;
+            --accent-purple-glow: rgba(139, 92, 246, 0.2);
             --accent-green: #10b981;
-            --radius-lg: 16px;
-            --radius-md: 10px;
-            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            --radius-lg: 20px;
+            --radius-md: 12px;
+            --radius-sm: 8px;
+            --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
         }
 
         * {
@@ -42,86 +45,107 @@
             color: var(--text-primary);
             font-family: 'Inter', sans-serif;
             min-height: 100vh;
-            line-height: 1.6;
+            line-height: 1.5;
             overflow-x: hidden;
             position: relative;
+            display: flex;
+            flex-direction: column;
         }
 
-        /* Animated glowing background patterns */
+        /* Modern background radial glows */
         body::before {
             content: '';
             position: absolute;
-            top: -20%;
-            left: -10%;
-            width: 60%;
-            height: 60%;
-            background: radial-gradient(circle, var(--accent-orange-glow) 0%, transparent 70%);
+            top: -10%;
+            left: 5%;
+            width: 50%;
+            height: 50%;
+            background: radial-gradient(circle, var(--accent-orange-glow) 0%, transparent 60%);
             z-index: -1;
-            filter: blur(100px);
+            filter: blur(80px);
             pointer-events: none;
-            opacity: 0.6;
+            opacity: 0.8;
         }
 
         body::after {
             content: '';
             position: absolute;
-            bottom: -10%;
-            right: -10%;
-            width: 50%;
-            height: 50%;
-            background: radial-gradient(circle, var(--accent-purple-glow) 0%, transparent 75%);
+            bottom: 5%;
+            right: 5%;
+            width: 45%;
+            height: 45%;
+            background: radial-gradient(circle, var(--accent-purple-glow) 0%, transparent 60%);
             z-index: -1;
-            filter: blur(100px);
+            filter: blur(80px);
             pointer-events: none;
-            opacity: 0.4;
+            opacity: 0.6;
         }
 
-        header {
-            max-width: 1280px;
+        .container {
+            width: 100%;
+            max-width: 1200px;
             margin: 0 auto;
-            padding: 30px 20px 10px 20px;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+        }
+
+        header {
             display: flex;
             flex-direction: column;
             align-items: center;
             text-align: center;
+            padding: 20px 0 10px 0;
+            gap: 12px;
+        }
+
+        .logo-area {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .logo-emoji {
+            font-size: 2.2rem;
+            animation: float 3s ease-in-out infinite;
+        }
+
+        @keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-5px); }
         }
 
         h1 {
             font-family: 'Outfit', sans-serif;
-            font-size: 2.8rem;
+            font-size: 2.5rem;
             font-weight: 800;
-            background: linear-gradient(135deg, #ffffff 40%, #ff8e53 70%, #d49aff 100%);
+            background: linear-gradient(135deg, #ffffff 40%, #ffa580 80%, #cfa0f7 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
-            margin-bottom: 8px;
-            letter-spacing: -1px;
-            display: flex;
-            align-items: center;
-            gap: 12px;
+            letter-spacing: -0.5px;
         }
 
         .subtitle {
-            font-size: 1.1rem;
+            font-size: 1rem;
             color: var(--text-secondary);
             font-weight: 400;
-            max-width: 600px;
-            margin-bottom: 20px;
+            max-width: 500px;
         }
 
         .ltx-banner {
-            background: linear-gradient(90deg, rgba(26, 31, 58, 0.8) 0%, rgba(42, 31, 58, 0.8) 100%);
-            border-left: 4px solid var(--accent-orange);
+            background: rgba(22, 28, 45, 0.4);
+            border: 1px solid var(--panel-border);
+            border-left: 3px solid var(--accent-orange);
             border-radius: var(--radius-md);
-            padding: 12px 20px;
-            color: #e8e8f0;
-            font-size: 0.9rem;
-            max-width: 900px;
-            margin: 0 auto 30px auto;
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            border-right: 1px solid var(--border-color);
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+            padding: 12px 18px;
+            color: #cbd5e1;
+            font-size: 0.85rem;
+            line-height: 1.6;
+            max-width: 800px;
             text-align: left;
+            backdrop-filter: blur(12px);
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
         }
 
         .ltx-banner a {
@@ -132,57 +156,78 @@
         }
 
         .ltx-banner a:hover {
-            text-decoration: underline;
-            color: #ffffff;
-        }
-
-        .ltx-banner strong {
             color: #ffffff;
+            text-decoration: underline;
         }
 
+        /* 2-Column Responsive Workspace */
         main {
-            max-width: 1280px;
-            margin: 0 auto;
-            padding: 0 20px 60px 20px;
             display: grid;
             grid-template-columns: 1.2fr 1fr;
-            gap: 30px;
+            gap: 24px;
+            align-items: start;
         }
 
-        @media (max-width: 992px) {
+        @media (max-width: 960px) {
             main {
                 grid-template-columns: 1fr;
             }
             h1 {
-                font-size: 2.2rem;
+                font-size: 2rem;
+            }
+            .logo-emoji {
+                font-size: 1.8rem;
             }
         }
 
-        .panel {
+        @media (max-width: 576px) {
+            .container {
+                padding: 12px;
+                gap: 16px;
+            }
+            header {
+                padding: 10px 0;
+            }
+            .ltx-banner {
+                font-size: 0.8rem;
+                padding: 10px 14px;
+            }
+        }
+
+        .card {
             background: var(--panel-bg);
-            border: 1px solid var(--border-color);
+            border: 1px solid var(--panel-border);
             border-radius: var(--radius-lg);
-            padding: 30px;
-            backdrop-filter: blur(16px);
-            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
+            padding: 24px;
+            backdrop-filter: blur(20px);
+            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
             display: flex;
             flex-direction: column;
-            gap: 24px;
+            gap: 20px;
             transition: var(--transition);
         }
 
-        .panel:hover {
-            border-color: rgba(255, 255, 255, 0.12);
+        .card:hover {
+            border-color: rgba(255, 255, 255, 0.08);
         }
 
-        .panel-title {
-            font-family: 'Outfit', sans-serif;
-            font-size: 1.4rem;
-            font-weight: 700;
+        @media (max-width: 576px) {
+            .card {
+                padding: 18px;
+                gap: 16px;
+            }
+        }
+
+        .card-header {
             display: flex;
             align-items: center;
             gap: 10px;
+            font-family: 'Outfit', sans-serif;
+            font-size: 1.25rem;
+            font-weight: 600;
             color: #ffffff;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+            padding-bottom: 12px;
         }
 
         .form-group {
@@ -192,115 +237,121 @@
         }
 
         .form-label {
-            font-size: 0.85rem;
+            font-size: 0.8rem;
             font-weight: 600;
             text-transform: uppercase;
-            letter-spacing: 0.5px;
+            letter-spacing: 0.8px;
             color: var(--text-secondary);
             display: flex;
             justify-content: space-between;
+            align-items: center;
         }
 
-        .form-label .label-info {
-            font-size: 0.8rem;
+        .label-badge {
+            font-size: 0.75rem;
             color: var(--accent-orange);
             text-transform: none;
-            font-weight: normal;
+            font-weight: 400;
+            letter-spacing: 0;
         }
 
         .textarea-custom {
             width: 100%;
-            background: rgba(8, 10, 16, 0.6);
-            border: 1px solid var(--border-color);
+            background: rgba(10, 11, 18, 0.7);
+            border: 1px solid var(--panel-border);
             border-radius: var(--radius-md);
-            padding: 16px;
+            padding: 14px 16px;
             color: var(--text-primary);
             font-family: 'Inter', sans-serif;
             font-size: 0.95rem;
             line-height: 1.5;
             resize: vertical;
-            min-height: 150px;
+            min-height: 120px;
             outline: none;
             transition: var(--transition);
         }
 
         .textarea-custom:focus {
             border-color: var(--accent-orange);
-            box-shadow: 0 0 15px rgba(255, 107, 53, 0.15);
-            background: rgba(8, 10, 16, 0.85);
+            box-shadow: 0 0 12px var(--accent-orange-glow);
+            background: rgba(10, 11, 18, 0.9);
         }
 
-        /* Drag & Drop Audio Upload Uploader */
-        .upload-container {
-            border: 2px dashed rgba(255, 255, 255, 0.15);
+        /* Modernized Flat Upload Block */
+        .upload-zone {
+            border: 2px dashed rgba(255, 255, 255, 0.1);
             border-radius: var(--radius-md);
-            padding: 24px;
+            padding: 20px;
             text-align: center;
             cursor: pointer;
-            background: rgba(255, 255, 255, 0.02);
-            transition: var(--transition);
+            background: rgba(255, 255, 255, 0.01);
             display: flex;
             flex-direction: column;
             align-items: center;
+            gap: 8px;
+            transition: var(--transition);
+            min-height: 100px;
             justify-content: center;
-            gap: 10px;
-            min-height: 120px;
         }
 
-        .upload-container:hover, .upload-container.dragover {
+        .upload-zone:hover, .upload-zone.dragover {
             border-color: var(--accent-purple);
-            background: rgba(139, 92, 246, 0.05);
+            background: rgba(139, 92, 246, 0.04);
         }
 
         .upload-icon {
-            font-size: 2rem;
+            font-size: 1.8rem;
             color: var(--text-secondary);
             transition: var(--transition);
         }
 
-        .upload-container:hover .upload-icon {
-            transform: translateY(-4px);
+        .upload-zone:hover .upload-icon {
+            transform: translateY(-2px);
             color: var(--accent-purple);
         }
 
         .upload-text {
-            font-size: 0.9rem;
+            font-size: 0.85rem;
             color: var(--text-secondary);
         }
 
         .upload-text strong {
-            color: var(--text-primary);
+            color: #ffffff;
+            font-weight: 500;
         }
 
         .hidden-input {
             display: none;
         }
 
-        .uploaded-file-info {
+        /* Styled Uploaded Capsule */
+        .file-capsule {
             display: flex;
             align-items: center;
-            gap: 12px;
-            background: rgba(139, 92, 246, 0.1);
+            justify-content: space-between;
+            background: rgba(139, 92, 246, 0.08);
             border: 1px solid rgba(139, 92, 246, 0.2);
-            padding: 10px 16px;
+            padding: 10px 14px;
             border-radius: var(--radius-md);
             width: 100%;
-            justify-content: space-between;
         }
 
-        .uploaded-file-details {
+        .file-info {
             display: flex;
             align-items: center;
             gap: 10px;
-            font-size: 0.9rem;
+            font-size: 0.85rem;
             font-weight: 500;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
         }
 
-        .clear-upload {
+        .btn-clear {
             background: none;
             border: none;
             color: var(--text-secondary);
-            font-size: 1.1rem;
+            font-size: 1rem;
             cursor: pointer;
             transition: var(--transition);
             padding: 2px;
@@ -309,52 +360,60 @@
             justify-content: center;
         }
 
-        .clear-upload:hover {
+        .btn-clear:hover {
             color: #ffffff;
             transform: scale(1.1);
         }
 
-        /* Sliders / Advanced Settings */
-        .accordion-btn {
-            background: rgba(255, 255, 255, 0.03);
-            border: 1px solid var(--border-color);
+        /* Modern Slider Accoridon Panels */
+        .settings-accordion {
+            background: rgba(255, 255, 255, 0.01);
+            border: 1px solid var(--panel-border);
             border-radius: var(--radius-md);
-            padding: 12px 18px;
-            color: var(--text-primary);
+            overflow: hidden;
+        }
+
+        .accordion-header {
+            background: none;
+            border: none;
+            padding: 14px 18px;
+            color: #ffffff;
             font-weight: 600;
             font-size: 0.9rem;
+            width: 100%;
             display: flex;
             justify-content: space-between;
             align-items: center;
             cursor: pointer;
-            transition: var(--transition);
-            width: 100%;
             outline: none;
+            transition: var(--transition);
         }
 
-        .accordion-btn:hover {
-            background: rgba(255, 255, 255, 0.06);
-            border-color: rgba(255, 255, 255, 0.15);
+        .accordion-header:hover {
+            background: rgba(255, 255, 255, 0.03);
         }
 
         .accordion-icon {
-            font-size: 0.8rem;
+            font-size: 0.75rem;
             transition: var(--transition);
+            color: var(--text-secondary);
         }
 
-        .accordion-content {
+        .accordion-body {
             max-height: 0;
             overflow: hidden;
-            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            transition: max-height 0.3s ease-out;
+            padding: 0 18px;
             display: flex;
             flex-direction: column;
-            gap: 18px;
-            padding: 0 4px;
+            gap: 16px;
         }
 
-        .accordion-content.open {
-            max-height: 500px;
-            margin-top: 15px;
+        .accordion-body.open {
+            max-height: 520px;
+            padding-bottom: 20px;
+            border-top: 1px solid rgba(255, 255, 255, 0.03);
+            padding-top: 16px;
         }
 
         .slider-group {
@@ -363,37 +422,38 @@
             gap: 6px;
         }
 
-        .slider-header {
+        .slider-meta {
             display: flex;
             justify-content: space-between;
-            font-size: 0.85rem;
+            font-size: 0.8rem;
             color: var(--text-secondary);
             font-weight: 500;
         }
 
-        .slider-val {
-            color: var(--text-primary);
+        .slider-value {
+            color: #ffffff;
             font-weight: 700;
+            font-family: monospace;
         }
 
+        /* Custom Slider Tracks */
         input[type="range"] {
             -webkit-appearance: none;
             width: 100%;
-            height: 6px;
-            background: rgba(255, 255, 255, 0.08);
+            height: 5px;
+            background: rgba(255, 255, 255, 0.06);
             border-radius: 3px;
             outline: none;
-            transition: var(--transition);
+            cursor: pointer;
         }
 
         input[type="range"]::-webkit-slider-thumb {
             -webkit-appearance: none;
-            width: 16px;
-            height: 16px;
+            width: 14px;
+            height: 14px;
             border-radius: 50%;
             background: var(--accent-orange);
-            cursor: pointer;
-            box-shadow: 0 0 10px var(--accent-orange-glow);
+            box-shadow: 0 0 8px var(--accent-orange-glow);
             transition: var(--transition);
         }
 
@@ -402,133 +462,136 @@
             background: #ffffff;
         }
 
-        .seed-input-container {
+        /* Seed Controls */
+        .seed-row {
             display: flex;
-            gap: 10px;
+            gap: 8px;
             align-items: center;
         }
 
-        .input-number {
+        .input-seed {
             flex: 1;
-            background: rgba(8, 10, 16, 0.6);
-            border: 1px solid var(--border-color);
-            border-radius: var(--radius-md);
-            padding: 10px;
+            background: rgba(10, 11, 18, 0.7);
+            border: 1px solid var(--panel-border);
+            border-radius: var(--radius-sm);
+            padding: 10px 14px;
             color: var(--text-primary);
-            font-family: inherit;
+            font-family: monospace;
             outline: none;
+            font-size: 0.9rem;
             transition: var(--transition);
+            height: 40px;
         }
 
-        .input-number:focus {
+        .input-seed:focus {
             border-color: var(--accent-orange);
         }
 
-        .btn-icon {
-            background: rgba(255, 255, 255, 0.05);
-            border: 1px solid var(--border-color);
-            border-radius: var(--radius-md);
+        .btn-seed-random {
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid var(--panel-border);
+            border-radius: var(--radius-sm);
             color: var(--text-primary);
-            height: 42px;
-            width: 42px;
+            height: 40px;
+            width: 40px;
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
             transition: var(--transition);
+            font-size: 0.95rem;
         }
 
-        .btn-icon:hover {
-            background: rgba(255, 255, 255, 0.1);
-            border-color: rgba(255, 255, 255, 0.2);
+        .btn-seed-random:hover {
+            background: rgba(255, 255, 255, 0.08);
+            border-color: rgba(255, 255, 255, 0.15);
         }
 
-        /* Generate Button */
-        .btn-primary {
+        /* Premium Floating Generate Button */
+        .btn-generate {
             background: linear-gradient(135deg, var(--accent-orange) 0%, #ff8e53 100%);
             border: none;
             border-radius: var(--radius-md);
             color: #ffffff;
             font-family: 'Outfit', sans-serif;
-            font-size: 1.1rem;
+            font-size: 1.05rem;
             font-weight: 700;
-            padding: 16px;
+            padding: 14px;
             cursor: pointer;
             transition: var(--transition);
             display: flex;
             align-items: center;
             justify-content: center;
-            gap: 12px;
-            box-shadow: 0 8px 24px rgba(255, 107, 53, 0.25);
-            margin-top: 10px;
-            position: relative;
-            overflow: hidden;
+            gap: 10px;
+            box-shadow: 0 6px 20px rgba(255, 107, 53, 0.2);
+            min-height: 48px;
         }
 
-        .btn-primary:hover:not(:disabled) {
-            transform: translateY(-2px);
-            box-shadow: 0 12px 30px rgba(255, 107, 53, 0.4);
-            filter: brightness(1.05);
+        .btn-generate:hover:not(:disabled) {
+            transform: translateY(-1.5px);
+            box-shadow: 0 10px 25px rgba(255, 107, 53, 0.35);
         }
 
-        .btn-primary:active:not(:disabled) {
+        .btn-generate:active:not(:disabled) {
             transform: translateY(0);
         }
 
-        .btn-primary:disabled {
-            background: #252836;
-            color: #636882;
+        .btn-generate:disabled {
+            background: #1b1c26;
+            color: #4e526a;
             cursor: not-allowed;
             box-shadow: none;
         }
 
         /* Right Panel: Output & Controls */
-        .output-card {
-            background: rgba(8, 10, 16, 0.4);
-            border: 1px solid var(--border-color);
+        .output-wrapper {
+            background: rgba(10, 11, 18, 0.5);
+            border: 1px solid var(--panel-border);
             border-radius: var(--radius-md);
-            padding: 24px;
+            padding: 20px;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            min-height: 200px;
+            min-height: 160px;
             position: relative;
-            gap: 16px;
         }
 
-        .output-empty {
+        .empty-placeholder {
             color: var(--text-secondary);
             text-align: center;
             display: flex;
             flex-direction: column;
             align-items: center;
-            gap: 12px;
+            gap: 10px;
         }
 
-        .output-empty-icon {
-            font-size: 2.5rem;
-            opacity: 0.5;
+        .empty-icon {
+            font-size: 2.2rem;
+            opacity: 0.4;
         }
 
-        /* Beautiful Custom Audio Player */
-        .custom-player {
+        .empty-text {
+            font-size: 0.85rem;
+        }
+
+        /* Highly Responsive Audio Player Layout */
+        .audio-player {
             width: 100%;
             display: flex;
             flex-direction: column;
-            gap: 16px;
+            gap: 14px;
         }
 
-        .visualizer-container {
+        .visualizer-box {
             width: 100%;
-            height: 60px;
-            background: linear-gradient(90deg, rgba(139, 92, 246, 0.05) 0%, rgba(255, 107, 53, 0.05) 100%);
-            border-radius: var(--radius-md);
+            height: 50px;
+            background: linear-gradient(90deg, rgba(139, 92, 246, 0.04) 0%, rgba(255, 107, 53, 0.04) 100%);
+            border-radius: var(--radius-sm);
             display: flex;
             align-items: center;
             justify-content: center;
-            border: 1px solid rgba(255, 255, 255, 0.03);
-            position: relative;
+            border: 1px solid rgba(255, 255, 255, 0.02);
             overflow: hidden;
         }
 
@@ -541,20 +604,19 @@
 
         .wave-bar {
             width: 3px;
-            height: 8px;
+            height: 6px;
             background: var(--accent-purple);
             border-radius: 1px;
             transition: var(--transition);
         }
 
-        .custom-player.playing .wave-bar {
-            animation: bounce 1.2s infinite ease-in-out alternate;
+        .audio-player.playing .wave-bar {
+            animation: playWave 1.2s infinite ease-in-out alternate;
         }
 
-        /* Animation for visualizer bars */
-        @keyframes bounce {
-            0% { height: 8px; }
-            100% { height: 40px; }
+        @keyframes playWave {
+            0% { height: 6px; }
+            100% { height: 32px; }
         }
 
         .wave-bar:nth-child(2n) { background: var(--accent-orange); animation-delay: 0.15s; }
@@ -562,273 +624,266 @@
         .wave-bar:nth-child(4n) { animation-delay: 0.45s; }
         .wave-bar:nth-child(5n) { background: var(--accent-purple); animation-delay: 0.6s; }
 
-        .player-controls {
+        .player-row {
             display: flex;
             align-items: center;
-            gap: 16px;
+            gap: 12px;
             width: 100%;
         }
 
-        .play-btn {
+        .btn-play {
             background: #ffffff;
             border: none;
             color: var(--bg-color);
-            width: 44px;
-            height: 44px;
+            width: 40px;
+            height: 40px;
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 1.1rem;
+            font-size: 1rem;
             cursor: pointer;
             transition: var(--transition);
-            box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
+            box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
             flex-shrink: 0;
         }
 
-        .play-btn:hover {
+        .btn-play:hover {
             transform: scale(1.05);
-            box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4);
+            box-shadow: 0 6px 18px rgba(255, 255, 255, 0.3);
         }
 
-        .time-slider-container {
+        .progress-box {
             flex: 1;
             display: flex;
             align-items: center;
-            gap: 10px;
+            gap: 8px;
         }
 
-        .time-label {
-            font-size: 0.8rem;
+        .time-lbl {
+            font-size: 0.75rem;
             color: var(--text-secondary);
             font-family: monospace;
-            min-width: 35px;
+            min-width: 32px;
         }
 
-        .extra-player-controls {
+        .deck-footer {
             display: flex;
             align-items: center;
             justify-content: space-between;
             width: 100%;
-            border-top: 1px solid rgba(255, 255, 255, 0.05);
-            padding-top: 14px;
+            border-top: 1px solid rgba(255, 255, 255, 0.04);
+            padding-top: 12px;
+            gap: 12px;
+            flex-wrap: wrap;
         }
 
-        .volume-container {
+        .vol-slider {
             display: flex;
             align-items: center;
-            gap: 8px;
-            max-width: 120px;
+            gap: 6px;
+            max-width: 100px;
+            flex-shrink: 0;
         }
 
-        .volume-icon {
-            font-size: 0.9rem;
+        .vol-icon {
+            font-size: 0.85rem;
             color: var(--text-secondary);
         }
 
-        .speed-control {
+        .speed-deck {
             display: flex;
             align-items: center;
-            gap: 6px;
+            gap: 4px;
         }
 
-        .speed-btn {
-            background: rgba(255, 255, 255, 0.03);
-            border: 1px solid var(--border-color);
+        .btn-speed {
+            background: rgba(255, 255, 255, 0.02);
+            border: 1px solid var(--panel-border);
             border-radius: 6px;
             color: var(--text-secondary);
-            font-size: 0.75rem;
+            font-size: 0.7rem;
             font-weight: 600;
-            padding: 4px 8px;
+            padding: 3px 6px;
             cursor: pointer;
             transition: var(--transition);
         }
 
-        .speed-btn.active, .speed-btn:hover {
-            background: rgba(255, 255, 255, 0.1);
+        .btn-speed.active, .btn-speed:hover {
+            background: rgba(255, 255, 255, 0.08);
             color: #ffffff;
-            border-color: rgba(255, 255, 255, 0.25);
+            border-color: rgba(255, 255, 255, 0.2);
         }
 
-        .btn-download {
-            background: rgba(255, 255, 255, 0.06);
-            border: 1px solid var(--border-color);
-            border-radius: var(--radius-md);
+        .btn-download-wav {
+            background: rgba(255, 255, 255, 0.04);
+            border: 1px solid var(--panel-border);
+            border-radius: var(--radius-sm);
             color: #ffffff;
-            font-size: 0.85rem;
+            font-size: 0.8rem;
             font-weight: 600;
-            padding: 8px 16px;
+            padding: 6px 12px;
             text-decoration: none;
             display: flex;
             align-items: center;
-            gap: 8px;
+            gap: 6px;
             transition: var(--transition);
         }
 
-        .btn-download:hover {
+        .btn-download-wav:hover {
             background: #ffffff;
             color: var(--bg-color);
             transform: translateY(-1px);
         }
 
-        /* Queue & Status Indicator */
-        .status-container {
+        @media (max-width: 480px) {
+            .deck-footer {
+                flex-direction: column;
+                align-items: stretch;
+                gap: 12px;
+            }
+            .vol-slider {
+                max-width: 100%;
+            }
+            .speed-deck {
+                justify-content: space-between;
+            }
+            .btn-download-wav {
+                justify-content: center;
+            }
+        }
+
+        /* Elegant Alert & Queues */
+        .status-alert {
             display: flex;
             align-items: center;
-            gap: 12px;
-            font-size: 0.9rem;
+            gap: 10px;
+            font-size: 0.85rem;
             font-weight: 500;
-            padding: 12px 18px;
+            padding: 10px 14px;
             border-radius: var(--radius-md);
             border: 1px solid transparent;
-            display: none; /* Shown dynamically */
+            display: none;
         }
 
-        .status-container.success {
-            background: rgba(16, 185, 129, 0.1);
-            border-color: rgba(16, 185, 129, 0.2);
+        .status-alert.success {
+            background: rgba(16, 185, 129, 0.06);
+            border-color: rgba(16, 185, 129, 0.15);
             color: var(--accent-green);
         }
 
-        .status-container.info {
-            background: rgba(139, 92, 246, 0.1);
-            border-color: rgba(139, 92, 246, 0.2);
+        .status-alert.info {
+            background: rgba(139, 92, 246, 0.06);
+            border-color: rgba(139, 92, 246, 0.15);
             color: #a78bfa;
         }
 
-        .status-container.error {
-            background: rgba(239, 68, 68, 0.1);
-            border-color: rgba(239, 68, 68, 0.2);
+        .status-alert.error {
+            background: rgba(239, 68, 68, 0.06);
+            border-color: rgba(239, 68, 68, 0.15);
             color: #f87171;
         }
 
-        .spinner {
-            width: 18px;
-            height: 18px;
+        .alert-spinner {
+            width: 14px;
+            height: 14px;
             border: 2px solid rgba(255, 255, 255, 0.1);
             border-top: 2px solid currentColor;
             border-radius: 50%;
             animation: spin 0.8s linear infinite;
         }
 
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-
-        /* Examples Section */
-        .examples-section {
+        /* Clean Selector Capsules for Quick Demos */
+        .demo-deck {
             display: flex;
             flex-direction: column;
-            gap: 14px;
-        }
-
-        .examples-title {
-            font-family: 'Outfit', sans-serif;
-            font-size: 1.1rem;
-            font-weight: 700;
-            color: #ffffff;
-            display: flex;
-            align-items: center;
-            gap: 8px;
+            gap: 10px;
         }
 
-        .examples-list {
+        .demo-capsules {
             display: flex;
             flex-direction: column;
-            gap: 10px;
-            max-height: 380px;
+            gap: 8px;
+            max-height: 240px;
             overflow-y: auto;
-            padding-right: 4px;
+            padding-right: 2px;
         }
 
-        /* Custom scrollbar for examples */
-        .examples-list::-webkit-scrollbar {
-            width: 6px;
+        .demo-capsules::-webkit-scrollbar {
+            width: 4px;
         }
 
-        .examples-list::-webkit-scrollbar-track {
-            background: rgba(255, 255, 255, 0.02);
-            border-radius: 3px;
+        .demo-capsules::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.01);
+            border-radius: 2px;
         }
 
-        .examples-list::-webkit-scrollbar-thumb {
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 3px;
+        .demo-capsules::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.08);
+            border-radius: 2px;
         }
 
-        .example-item {
-            background: rgba(255, 255, 255, 0.02);
-            border: 1px solid var(--border-color);
+        .demo-pill {
+            background: rgba(255, 255, 255, 0.01);
+            border: 1px solid var(--panel-border);
             border-radius: var(--radius-md);
-            padding: 12px 16px;
+            padding: 10px 14px;
             cursor: pointer;
             transition: var(--transition);
             display: flex;
-            flex-direction: column;
-            gap: 6px;
+            justify-content: space-between;
+            align-items: center;
+            gap: 12px;
             text-align: left;
         }
 
-        .example-item:hover {
-            background: rgba(255, 255, 255, 0.06);
-            border-color: rgba(255, 255, 255, 0.15);
-            transform: translateX(2px);
+        .demo-pill:hover {
+            background: rgba(255, 255, 255, 0.03);
+            border-color: rgba(255, 255, 255, 0.12);
+            transform: translateX(1px);
         }
 
-        .example-item.active {
+        .demo-pill.active {
             border-color: var(--accent-orange);
-            background: rgba(255, 107, 53, 0.04);
+            background: rgba(255, 107, 53, 0.03);
         }
 
-        .example-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .example-name {
+        .demo-pill-title {
+            font-size: 0.85rem;
             font-weight: 600;
-            font-size: 0.9rem;
             color: #ffffff;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 180px;
         }
 
-        .example-badges {
+        .pill-labels {
             display: flex;
-            gap: 6px;
+            gap: 4px;
+            flex-shrink: 0;
         }
 
-        .badge {
-            font-size: 0.7rem;
+        .pill-badge {
+            font-size: 0.65rem;
             font-weight: 700;
-            padding: 2px 6px;
+            padding: 1px 5px;
             border-radius: 4px;
             text-transform: uppercase;
         }
 
-        .badge-male { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
-        .badge-female { background: rgba(236, 72, 153, 0.15); color: #f472b6; }
-        .badge-long { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }
+        .pill-badge-male { background: rgba(59, 130, 246, 0.1); color: #60a5fa; }
+        .pill-badge-female { background: rgba(236, 72, 153, 0.1); color: #f472b6; }
+        .pill-badge-long { background: rgba(139, 92, 246, 0.1); color: #c084fc; }
 
-        .example-preview {
-            font-size: 0.8rem;
-            color: var(--text-secondary);
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        /* Prompt Writing Guide Styles */
-        .guide-container {
-            border-top: 1px solid rgba(255, 255, 255, 0.08);
-            padding-top: 24px;
-            display: flex;
-            flex-direction: column;
-            gap: 14px;
+        /* Minimalist Accordion Guide */
+        .guide-deck {
+            border-top: 1px solid rgba(255, 255, 255, 0.04);
+            padding-top: 16px;
         }
 
         .guide-header {
-            font-size: 0.95rem;
+            font-size: 0.85rem;
             font-weight: 600;
             color: #ffffff;
             cursor: pointer;
@@ -841,287 +896,302 @@
         .guide-body {
             max-height: 0;
             overflow: hidden;
-            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-            font-size: 0.85rem;
+            transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            font-size: 0.8rem;
             color: var(--text-secondary);
             display: flex;
             flex-direction: column;
-            gap: 12px;
+            gap: 10px;
             line-height: 1.5;
         }
 
         .guide-body.open {
-            max-height: 400px;
+            max-height: 380px;
             margin-top: 10px;
         }
 
-        .guide-section-title {
+        .guide-block-title {
             color: #ffffff;
             font-weight: 600;
             margin-bottom: 2px;
-            font-size: 0.85rem;
+            font-size: 0.8rem;
         }
 
         .guide-list {
-            padding-left: 18px;
+            padding-left: 14px;
             display: flex;
             flex-direction: column;
-            gap: 4px;
+            gap: 3px;
+        }
+
+        footer {
+            margin-top: auto;
+            text-align: center;
+            padding: 30px 20px;
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+            border-top: 1px solid rgba(255, 255, 255, 0.03);
         }
     </style>
 </head>
 <body>
 
-    <header>
-        <h1>🎭 DramaBox</h1>
-        <div class="subtitle">Expressive TTS with Voice Cloning</div>
-        <div class="ltx-banner">
-            🏗️&nbsp; Built on <a href="https://github.com/Lightricks/LTX-2" target="_blank">LTX-2</a> by 
-            <a href="https://huggingface.co/Lightricks" target="_blank">Lightricks</a>. 
-            <strong>DramaBox</strong> is <strong>Resemble AI's</strong> expressive TTS, 
-            trained on top of the LTX-2.3 audio branch under the LTX-2 Community License. 
-            Huge thanks to the Lightricks team for open-sourcing the base.
-        </div>
-    </header>
-
-    <main>
-        <!-- Left Panel: Form Inputs -->
-        <section class="panel">
-            <div class="panel-title">
-                <span>🪄</span> Voice Generator
+    <div class="container">
+        <header>
+            <div class="logo-area">
+                <span class="logo-emoji">🎭</span>
+                <h1>DramaBox</h1>
             </div>
-
-            <!-- Scene Prompt Input -->
-            <div class="form-group">
-                <div class="form-label">
-                    <span>Scene Prompt</span>
-                    <span class="label-info">Put speech in "quotes", directions outside</span>
-                </div>
-                <textarea 
-                    id="scene-prompt" 
-                    class="textarea-custom" 
-                    placeholder='A shadowy villain speaks with cold menace, "You have entered my domain, mortal." He chuckles darkly, "Such arrogance will be your undoing."'
-                ></textarea>
+            <div class="subtitle">Expressive TTS with Voice Cloning</div>
+            
+            <div class="ltx-banner">
+                🏗️&nbsp; Built on <a href="https://github.com/Lightricks/LTX-2" target="_blank">LTX-2</a> by 
+                <a href="https://huggingface.co/Lightricks" target="_blank">Lightricks</a>. 
+                <strong>DramaBox</strong> is <strong>Resemble AI's</strong> expressive TTS, 
+                trained on top of the LTX-2.3 audio branch under the LTX-2 Community License. 
+                Huge thanks to the Lightricks team for open-sourcing the base.
             </div>
+        </header>
 
-            <!-- Voice Reference Uploader -->
-            <div class="form-group">
-                <div class="form-label">
-                    <span>Voice Reference (Optional)</span>
-                    <span>10+ seconds recommended</span>
+        <main>
+            <!-- Left Side: Custom Configuration Card -->
+            <section class="card">
+                <div class="card-header">
+                    <span>🪄</span> Input Board
                 </div>
-                
-                <div id="dropzone" class="upload-container">
-                    <span class="upload-icon">📤</span>
-                    <div class="upload-text">
-                        <strong>Click to upload</strong> or drag & drop<br>
-                        <span>Supports MP3, WAV, M4A, etc.</span>
+
+                <!-- Textarea Script -->
+                <div class="form-group">
+                    <div class="form-label">
+                        <span>Script Prompt</span>
+                        <span class="label-badge">Double quotes for dialogue, standard text for style</span>
                     </div>
+                    <textarea 
+                        id="scene-prompt" 
+                        class="textarea-custom" 
+                        placeholder='A shadowy villain speaks with cold menace, "You have entered my domain, mortal." He chuckles darkly, "Such arrogance will be your undoing."'
+                    ></textarea>
                 </div>
-                <input type="file" id="audio-file" class="hidden-input" accept="audio/*">
-            </div>
 
-            <!-- Inference Settings Accordion -->
-            <div>
-                <button type="button" class="accordion-btn" id="accordion-toggle">
-                    <span>⚙️ Advanced Settings</span>
-                    <span class="accordion-icon" id="accordion-arrow">▼</span>
-                </button>
-                
-                <div class="accordion-content" id="accordion-panel">
-                    <!-- CFG Scale -->
-                    <div class="slider-group">
-                        <div class="slider-header">
-                            <span>CFG Scale</span>
-                            <span class="slider-val" id="val-cfg">2.5</span>
+                <!-- Modern Reference File Uploader -->
+                <div class="form-group">
+                    <div class="form-label">
+                        <span>Timbre Reference (Optional)</span>
+                        <span>10s+ file</span>
+                    </div>
+                    
+                    <div id="dropzone" class="upload-zone">
+                        <span class="upload-icon">📤</span>
+                        <div class="upload-text">
+                            <strong>Drop file</strong> or click to choose<br>
+                            <span>Supports WAV, MP3, etc.</span>
                         </div>
-                        <input type="range" id="cfg" min="1.0" max="10.0" step="0.5" value="2.5">
                     </div>
+                    <input type="file" id="audio-file" class="hidden-input" accept="audio/*">
+                </div>
 
-                    <!-- STG Scale -->
-                    <div class="slider-group">
-                        <div class="slider-header">
-                            <span>STG Scale</span>
-                            <span class="slider-val" id="val-stg">1.5</span>
+                <!-- Dynamic Accordion Panel -->
+                <div class="settings-accordion">
+                    <button type="button" class="accordion-header" id="accordion-toggle">
+                        <span>⚙️ Settings Dashboard</span>
+                        <span class="accordion-icon" id="accordion-arrow">▼</span>
+                    </button>
+                    
+                    <div class="accordion-body" id="accordion-panel">
+                        <!-- CFG Scale -->
+                        <div class="slider-group">
+                            <div class="slider-meta">
+                                <span>CFG Scale</span>
+                                <span class="slider-value" id="val-cfg">2.5</span>
+                            </div>
+                            <input type="range" id="cfg" min="1.0" max="10.0" step="0.5" value="2.5">
                         </div>
-                        <input type="range" id="stg" min="0.0" max="5.0" step="0.5" value="1.5">
-                    </div>
 
-                    <!-- Duration Multiplier -->
-                    <div class="slider-group">
-                        <div class="slider-header">
-                            <span>Duration Multiplier</span>
-                            <span class="slider-val" id="val-dur">1.10</span>
+                        <!-- STG Scale -->
+                        <div class="slider-group">
+                            <div class="slider-meta">
+                                <span>STG Scale</span>
+                                <span class="slider-value" id="val-stg">1.5</span>
+                            </div>
+                            <input type="range" id="stg" min="0.0" max="5.0" step="0.5" value="1.5">
                         </div>
-                        <input type="range" id="dur" min="0.8" max="2.0" step="0.05" value="1.1">
-                    </div>
 
-                    <!-- Target Duration -->
-                    <div class="slider-group">
-                        <div class="slider-header">
-                            <span>Target Duration (s) — 0 = Auto</span>
-                            <span class="slider-val" id="val-gendur">0.0</span>
+                        <!-- Duration factor -->
+                        <div class="slider-group">
+                            <div class="slider-meta">
+                                <span>Breathing Room Factor</span>
+                                <span class="slider-value" id="val-dur">1.10</span>
+                            </div>
+                            <input type="range" id="dur" min="0.8" max="2.0" step="0.05" value="1.1">
                         </div>
-                        <input type="range" id="gendur" min="0.0" max="60.0" step="1.0" value="0.0">
-                    </div>
 
-                    <!-- Reference Duration -->
-                    <div class="slider-group">
-                        <div class="slider-header">
-                            <span>Reference Duration (s)</span>
-                            <span class="slider-val" id="val-refdur">10.0</span>
+                        <!-- Target Length -->
+                        <div class="slider-group">
+                            <div class="slider-meta">
+                                <span>Fixed duration (s) - 0 = Auto</span>
+                                <span class="slider-value" id="val-gendur">0.0</span>
+                            </div>
+                            <input type="range" id="gendur" min="0.0" max="60.0" step="1.0" value="0.0">
                         </div>
-                        <input type="range" id="refdur" min="3.0" max="30.0" step="1.0" value="10.0">
-                    </div>
 
-                    <!-- Seed Input -->
-                    <div class="form-group">
-                        <span class="form-label">Generation Seed</span>
-                        <div class="seed-input-container">
-                            <input type="number" id="seed" class="input-number" value="42">
-                            <button type="button" id="btn-random-seed" class="btn-icon" title="Randomize Seed">🎲</button>
+                        <!-- Reference window -->
+                        <div class="slider-group">
+                            <div class="slider-meta">
+                                <span>Reference window (s)</span>
+                                <span class="slider-value" id="val-refdur">10.0</span>
+                            </div>
+                            <input type="range" id="refdur" min="3.0" max="30.0" step="1.0" value="10.0">
+                        </div>
+
+                        <!-- Seed Input -->
+                        <div class="form-group">
+                            <span class="form-label">Seed Value</span>
+                            <div class="seed-row">
+                                <input type="number" id="seed" class="input-seed" value="42">
+                                <button type="button" id="btn-random-seed" class="btn-seed-random" title="Randomize Seed">🎲</button>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
 
-            <!-- Generate Button -->
-            <button id="btn-generate" class="btn-primary">
-                <span>⚡</span> Generate Speech
-            </button>
-        </section>
-
-        <!-- Right Panel: Output & Examples -->
-        <section class="panel">
-            <div class="panel-title">
-                <span>🔊</span> Output Room
-            </div>
+                <!-- Generate Click -->
+                <button id="btn-generate" class="btn-generate">
+                    <span>⚡</span> Generate Speech
+                </button>
+            </section>
 
-            <!-- Status Indicator -->
-            <div id="status-box" class="status-container">
-                <div class="spinner"></div>
-                <span id="status-text">Connecting to DramaBox engine...</span>
-            </div>
+            <!-- Right Side: Status, Player, Demos & Guides -->
+            <section class="card">
+                <div class="card-header">
+                    <span>🔊</span> Output Lounge
+                </div>
 
-            <!-- Output Container -->
-            <div class="output-card">
-                <audio id="audio-element" style="display:none;"></audio>
-                
-                <!-- Empty State -->
-                <div id="output-empty-state" class="output-empty">
-                    <span class="output-empty-state-icon" style="font-size: 3rem;">🎛️</span>
-                    <p>Enter a prompt and hit generate to voice your script</p>
+                <!-- State alerts -->
+                <div id="status-box" class="status-alert">
+                    <div class="alert-spinner"></div>
+                    <span id="status-text">Synchronizing Engine...</span>
                 </div>
 
-                <!-- Custom Elegant Audio Player (Initially hidden) -->
-                <div id="custom-player" class="custom-player" style="display: none;">
-                    <div class="visualizer-container">
-                        <div class="visualizer-wave">
-                            <span class="wave-bar"></span>
-                            <span class="wave-bar"></span>
-                            <span class="wave-bar"></span>
-                            <span class="wave-bar"></span>
-                            <span class="wave-bar"></span>
-                            <span class="wave-bar"></span>
-                            <span class="wave-bar"></span>
-                            <span class="wave-bar"></span>
-                            <span class="wave-bar"></span>
-                            <span class="wave-bar"></span>
-                            <span class="wave-bar"></span>
-                            <span class="wave-bar"></span>
-                            <span class="wave-bar"></span>
-                            <span class="wave-bar"></span>
-                            <span class="wave-bar"></span>
-                            <span class="wave-bar"></span>
-                            <span class="wave-bar"></span>
-                            <span class="wave-bar"></span>
-                            <span class="wave-bar"></span>
-                            <span class="wave-bar"></span>
-                        </div>
-                    </div>
+                <!-- Audio visualizer & controller -->
+                <div class="output-wrapper">
+                    <audio id="audio-element" style="display:none;"></audio>
                     
-                    <div class="player-controls">
-                        <button type="button" id="player-play" class="play-btn">▶</button>
-                        <div class="time-slider-container">
-                            <span id="player-current-time" class="time-label">00:00</span>
-                            <input type="range" id="player-progress" min="0" max="100" value="0">
-                            <span id="player-duration" class="time-label">00:00</span>
-                        </div>
+                    <!-- Default Screen -->
+                    <div id="output-empty-state" class="empty-placeholder">
+                        <span class="empty-icon">🎚️</span>
+                        <span class="empty-text">Formulate a script above to voice speech</span>
                     </div>
 
-                    <div class="extra-player-controls">
-                        <!-- Volume -->
-                        <div class="volume-container">
-                            <span class="volume-icon">🔊</span>
-                            <input type="range" id="player-volume" min="0" max="1" step="0.1" value="0.8">
+                    <!-- Audio Player Deck -->
+                    <div id="custom-player" class="audio-player" style="display: none;">
+                        <div class="visualizer-box">
+                            <div class="visualizer-wave">
+                                <span class="wave-bar"></span>
+                                <span class="wave-bar"></span>
+                                <span class="wave-bar"></span>
+                                <span class="wave-bar"></span>
+                                <span class="wave-bar"></span>
+                                <span class="wave-bar"></span>
+                                <span class="wave-bar"></span>
+                                <span class="wave-bar"></span>
+                                <span class="wave-bar"></span>
+                                <span class="wave-bar"></span>
+                                <span class="wave-bar"></span>
+                                <span class="wave-bar"></span>
+                                <span class="wave-bar"></span>
+                                <span class="wave-bar"></span>
+                                <span class="wave-bar"></span>
+                                <span class="wave-bar"></span>
+                                <span class="wave-bar"></span>
+                                <span class="wave-bar"></span>
+                                <span class="wave-bar"></span>
+                                <span class="wave-bar"></span>
+                            </div>
                         </div>
-
-                        <!-- Speed Controls -->
-                        <div class="speed-control">
-                            <button type="button" class="speed-btn" data-speed="0.8">0.8x</button>
-                            <button type="button" class="speed-btn active" data-speed="1.0">1.0x</button>
-                            <button type="button" class="speed-btn" data-speed="1.2">1.2x</button>
-                            <button type="button" class="speed-btn" data-speed="1.5">1.5x</button>
+                        
+                        <div class="player-row">
+                            <button type="button" id="player-play" class="btn-play">▶</button>
+                            <div class="progress-box">
+                                <span id="player-current-time" class="time-lbl">00:00</span>
+                                <input type="range" id="player-progress" min="0" max="100" value="0">
+                                <span id="player-duration" class="time-lbl">00:00</span>
+                            </div>
                         </div>
 
-                        <!-- Download Link -->
-                        <a id="player-download" class="btn-download" href="#" download="dramabox_voice.wav">
-                            <span>📥</span> Download
-                        </a>
+                        <div class="deck-footer">
+                            <!-- Volume slider -->
+                            <div class="vol-slider">
+                                <span class="vol-icon">🔊</span>
+                                <input type="range" id="player-volume" min="0" max="1" step="0.1" value="0.8">
+                            </div>
+
+                            <!-- Speeds selector -->
+                            <div class="speed-deck">
+                                <button type="button" class="btn-speed" data-speed="0.8">0.8x</button>
+                                <button type="button" class="btn-speed active" data-speed="1.0">1.0x</button>
+                                <button type="button" class="btn-speed" data-speed="1.2">1.2x</button>
+                                <button type="button" class="btn-speed" data-speed="1.5">1.5x</button>
+                            </div>
+
+                            <!-- Direct WAV file downloading -->
+                            <a id="player-download" class="btn-download-wav" href="#" download="dramabox_audio.wav">
+                                <span>📥</span> Download
+                            </a>
+                        </div>
                     </div>
                 </div>
-            </div>
-
-            <!-- Example Section -->
-            <div class="examples-section">
-                <div class="examples-title">
-                    <span>🎬</span> Quick Demos
-                </div>
-                <div class="examples-list" id="examples-container">
-                    <!-- Loaded dynamically in JavaScript -->
-                </div>
-            </div>
 
-            <!-- Prompt Writing Guide -->
-            <div class="guide-container">
-                <div class="guide-header" id="guide-toggle">
-                    <span>📖 Prompt Writing Guide</span>
-                    <span class="accordion-icon" id="guide-arrow">▼</span>
-                </div>
-                
-                <div class="guide-body" id="guide-body">
-                    <div>
-                        <div class="guide-section-title">Structure Pattern</div>
-                        <p><code>&lt;speaker description&gt;, "&lt;dialogue&gt;" &lt;action&gt; "&lt;more dialogue&gt;"</code></p>
+                <!-- Custom Selector Capsules for Quick Demos -->
+                <div class="demo-deck">
+                    <div class="form-label" style="margin-bottom: 2px;">
+                        <span>Quick Demos</span>
+                        <span>Click to pre-populate</span>
                     </div>
-                    <div>
-                        <div class="guide-section-title">Inside Double Quotes (Spoken)</div>
-                        <ul class="guide-list">
-                            <li>Standard speech dialogue: <code>"Hello, how are you today?"</code></li>
-                            <li>Phonetic sounds and laughs: <code>"Hahaha"</code>, <code>"Hehehe"</code>, <code>"Mmmmm"</code>, <code>"Ugh"</code>, <code>"Argh"</code></li>
-                        </ul>
+                    <div class="demo-capsules" id="examples-container">
+                        <!-- Loaded dynamically -->
                     </div>
-                    <div>
-                        <div class="guide-section-title">Outside Double Quotes (Stage Directions)</div>
-                        <ul class="guide-list">
-                            <li>Physical movements and breaths: <code>She sighs deeply.</code>, <code>He gulps nervously.</code>, <code>A long pause.</code></li>
-                            <li>Voice adjustments: <code>Her voice cracks.</code>, <code>He clears his throat.</code></li>
-                        </ul>
+                </div>
+
+                <!-- Minimalist Guide Accordion -->
+                <div class="guide-deck">
+                    <div class="guide-header" id="guide-toggle">
+                        <span>📖 Prompt Structure Guide</span>
+                        <span class="accordion-icon" id="guide-arrow">▼</span>
                     </div>
-                    <div>
-                        <div class="guide-section-title">Common Pitfalls</div>
-                        <p>Avoid putting explicit words like <i>Sigh</i>, <i>Cough</i>, or <i>Gasp</i> inside quotes. The model will literally pronounce them. Put them outside quotes as directions!</p>
+                    
+                    <div class="guide-body" id="guide-body">
+                        <div>
+                            <div class="guide-block-title">Format Structure</div>
+                            <p><code>&lt;description&gt;, "&lt;dialogue&gt;" &lt;movement/breath&gt; "&lt;more dialogue&gt;"</code></p>
+                        </div>
+                        <div>
+                            <div class="guide-block-title">Inside Quotes (Model pronounces)</div>
+                            <ul class="guide-list">
+                                <li>Spoken transcript: <code>"We have achieved full takeoff."</code></li>
+                                <li>Phonetic expressions: <code>"Hahaha"</code>, <code>"Mmmm"</code>, <code>"Ugh"</code>, <code>"Argh"</code></li>
+                            </ul>
+                        </div>
+                        <div>
+                            <div class="guide-block-title">Outside Quotes (Stage Directions)</div>
+                            <ul class="guide-list">
+                                <li>Pacing/acting styles: <code>She sighs deeply.</code>, <code>A long pause.</code></li>
+                                <li>Tonal delivery: <code>His voice cracks.</code>, <code>He clears his throat.</code></li>
+                            </ul>
+                        </div>
                     </div>
                 </div>
-            </div>
-        </section>
-    </main>
+            </section>
+        </main>
+    </div>
+
+    <footer>
+        &copy; 2026 DramaBox. Generative speech outputs are invisibly watermarked with Resemble Perth.
+    </footer>
 
-    <!-- Connect Gradio Client via Module Script -->
+    <!-- Gradio Connection Module -->
     <script type="module">
         import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
 
-        // Examples Dataset
         const EXAMPLES = [
             {
                 name: "Villain monologue",
@@ -1217,7 +1287,7 @@
         let selectedAudioFile = null;
         let selectedAudioFilename = "";
 
-        // Elements
+        // UI nodes
         const statusBox = document.getElementById("status-box");
         const statusText = document.getElementById("status-text");
         const btnGenerate = document.getElementById("btn-generate");
@@ -1226,12 +1296,12 @@
         const dropzone = document.getElementById("dropzone");
         const audioFileInput = document.getElementById("audio-file");
         
-        // Advanced Accordion
+        // Accordion Nodes
         const accordionToggle = document.getElementById("accordion-toggle");
         const accordionPanel = document.getElementById("accordion-panel");
         const accordionArrow = document.getElementById("accordion-arrow");
         
-        // Sliders
+        // Settings sliders
         const sliderCfg = document.getElementById("cfg");
         const valCfg = document.getElementById("val-cfg");
         const sliderStg = document.getElementById("stg");
@@ -1246,7 +1316,7 @@
         const inputSeed = document.getElementById("seed");
         const btnRandomSeed = document.getElementById("btn-random-seed");
 
-        // Player Elements
+        // Player elements
         const audioElement = document.getElementById("audio-element");
         const outputEmptyState = document.getElementById("output-empty-state");
         const customPlayer = document.getElementById("custom-player");
@@ -1256,21 +1326,21 @@
         const playerDuration = document.getElementById("player-duration");
         const playerVolume = document.getElementById("player-volume");
         const playerDownload = document.getElementById("player-download");
-        const speedButtons = document.querySelectorAll(".speed-btn");
+        const speedButtons = document.querySelectorAll(".btn-speed");
 
-        // Guide Accordion
+        // Guide togglers
         const guideToggle = document.getElementById("guide-toggle");
         const guideBody = document.getElementById("guide-body");
         const guideArrow = document.getElementById("guide-arrow");
 
-        // Status Updater
-        function updateStatus(message, type = "info", showLoading = true) {
+        // Simple alert helper
+        function updateStatus(message, type = "info", showSpinner = true) {
             statusBox.style.display = "flex";
-            statusBox.className = `status-container ${type}`;
+            statusBox.className = `status-alert ${type}`;
             statusText.innerText = message;
             
-            const spinner = statusBox.querySelector(".spinner");
-            if (showLoading) {
+            const spinner = statusBox.querySelector(".alert-spinner");
+            if (showSpinner) {
                 spinner.style.display = "block";
             } else {
                 spinner.style.display = "none";
@@ -1281,20 +1351,20 @@
             statusBox.style.display = "none";
         }
 
-        // Initialize Gradio JS Client
+        // Establish Gradio Connection
         async function connectClient() {
             try {
-                updateStatus("Connecting to DramaBox server...", "info");
+                updateStatus("Connecting to DramaBox API...", "info");
                 client = await Client.connect(window.location.origin);
-                updateStatus("Engine connected and ready", "success", false);
-                setTimeout(hideStatus, 3000);
+                updateStatus("Engine online and ready", "success", false);
+                setTimeout(hideStatus, 2500);
             } catch (err) {
                 console.error(err);
-                updateStatus("Engine connection failed. Please reload.", "error", false);
+                updateStatus("API synchronization failed. Please refresh.", "error", false);
             }
         }
 
-        // Accordion Management
+        // Accordion animations
         accordionToggle.addEventListener("click", () => {
             const isOpen = accordionPanel.classList.toggle("open");
             accordionArrow.innerText = isOpen ? "▲" : "▼";
@@ -1305,22 +1375,22 @@
             guideArrow.innerText = isOpen ? "▲" : "▼";
         });
 
-        // Sliders Realtime Output updates
+        // Sliders updates
         sliderCfg.addEventListener("input", (e) => valCfg.innerText = parseFloat(e.target.value).toFixed(1));
         sliderStg.addEventListener("input", (e) => valStg.innerText = parseFloat(e.target.value).toFixed(1));
         sliderDur.addEventListener("input", (e) => valDur.innerText = parseFloat(e.target.value).toFixed(2));
         sliderGenDur.addEventListener("input", (e) => valGenDur.innerText = parseFloat(e.target.value).toFixed(1));
         sliderRefDur.addEventListener("input", (e) => valRefDur.innerText = parseFloat(e.target.value).toFixed(1));
 
-        // Seed Randomizer
+        // Seed randomizer
         btnRandomSeed.addEventListener("click", () => {
-            const randomSeed = Math.floor(Math.random() * 99999999);
-            inputSeed.value = randomSeed;
+            const randomVal = Math.floor(Math.random() * 99999999);
+            inputSeed.value = randomVal;
             btnRandomSeed.style.transform = "rotate(360deg)";
-            setTimeout(() => btnRandomSeed.style.transform = "none", 400);
+            setTimeout(() => btnRandomSeed.style.transform = "none", 300);
         });
 
-        // Uploader Handlers
+        // Upload triggers
         dropzone.addEventListener("click", () => audioFileInput.click());
         
         dropzone.addEventListener("dragover", (e) => {
@@ -1355,12 +1425,12 @@
 
         function renderUploadedUI(filename) {
             dropzone.innerHTML = `
-                <div class="uploaded-file-info">
-                    <div class="uploaded-file-details">
+                <div class="file-capsule">
+                    <div class="file-info">
                         <span>🎵</span>
-                        <span style="word-break: break-all; text-align: left;">${filename}</span>
+                        <span style="overflow: hidden; text-overflow: ellipsis;">${filename}</span>
                     </div>
-                    <button type="button" class="clear-upload" id="btn-clear-upload" title="Remove voice file">✕</button>
+                    <button type="button" class="btn-clear" id="btn-clear-upload" title="Remove voice file">✕</button>
                 </div>
             `;
             document.getElementById("btn-clear-upload").addEventListener("click", (e) => {
@@ -1376,87 +1446,78 @@
             dropzone.innerHTML = `
                 <span class="upload-icon">📤</span>
                 <div class="upload-text">
-                    <strong>Click to upload</strong> or drag & drop<br>
-                    <span>Supports MP3, WAV, M4A, etc.</span>
+                    <strong>Drop file</strong> or click to choose<br>
+                    <span>Supports WAV, MP3, etc.</span>
                 </div>
             `;
         }
 
-        // Fetch Example voice and load it into file variable
+        // Fetch preloaded voices as File
         async function loadExampleVoice(voicePath, originalFilename) {
             try {
-                updateStatus("Cloning example voice reference...", "info");
+                updateStatus("Buffering reference voice...", "info");
                 const response = await fetch(voicePath);
-                if (!response.ok) throw new Error("Failed to fetch audio resource.");
+                if (!response.ok) throw new Error("Could not fetch remote resource.");
                 
                 const blob = await response.blob();
                 selectedAudioFile = new File([blob], originalFilename, { type: blob.type || "audio/mpeg" });
                 selectedAudioFilename = originalFilename;
                 
                 renderUploadedUI(originalFilename);
-                updateStatus("Voice reference loaded successfully", "success", false);
-                setTimeout(hideStatus, 2000);
+                updateStatus("Reference voice mapped", "success", false);
+                setTimeout(hideStatus, 1500);
             } catch (err) {
                 console.error(err);
-                updateStatus("Could not fetch the example voice reference.", "error", false);
+                updateStatus("Unable to map the voice example.", "error", false);
             }
         }
 
-        // Populate Examples in dynamic Grid
+        // Dynamically build Example Capsules
         const examplesContainer = document.getElementById("examples-container");
-        EXAMPLES.forEach((ex, idx) => {
-            const item = document.createElement("div");
-            item.className = "example-item";
+        EXAMPLES.forEach((ex) => {
+            const pill = document.createElement("div");
+            pill.className = "demo-pill";
             
             const isLong = ex.name.startsWith("30s");
             const badgeHtml = `
-                <span class="badge ${ex.gender === "male" ? "badge-male" : "badge-female"}">${ex.gender}</span>
-                ${isLong ? '<span class="badge badge-long">30s scenes</span>' : ''}
+                <span class="pill-badge ${ex.gender === "male" ? "pill-badge-male" : "pill-badge-female"}">${ex.gender}</span>
+                ${isLong ? '<span class="pill-badge pill-badge-long">30s</span>' : ''}
             `;
 
-            item.innerHTML = `
-                <div class="example-header">
-                    <span class="example-name">${ex.name}</span>
-                    <div class="example-badges">${badgeHtml}</div>
-                </div>
-                <div class="example-preview">${ex.prompt}</div>
+            pill.innerHTML = `
+                <span class="demo-pill-title">${ex.name}</span>
+                <div class="pill-labels">${badgeHtml}</div>
             `;
 
-            item.addEventListener("click", () => {
-                // Highlight example
-                document.querySelectorAll(".example-item").forEach(el => el.classList.remove("active"));
-                item.classList.add("active");
+            pill.addEventListener("click", () => {
+                document.querySelectorAll(".demo-pill").forEach(el => el.classList.remove("active"));
+                pill.classList.add("active");
 
-                // Populate Fields
                 scenePrompt.value = ex.prompt;
                 sliderGenDur.value = ex.duration;
                 valGenDur.innerText = ex.duration.toFixed(1);
 
-                // Extrapolate simple voice name
                 const filename = ex.voice.substring(ex.voice.lastIndexOf('/') + 1);
                 loadExampleVoice(ex.voice, filename);
             });
 
-            examplesContainer.appendChild(item);
+            examplesContainer.appendChild(pill);
         });
 
-        // HTML5 Audio Custom Player controls
-        let isAudioLoaded = false;
+        // Custom HTML5 Audio controllers
+        let isAudioReady = false;
         
-        function setupAudioElement(src) {
+        function setupAudioSource(src) {
             audioElement.src = src;
             audioElement.load();
-            isAudioLoaded = true;
+            isAudioReady = true;
             
             outputEmptyState.style.display = "none";
             customPlayer.style.display = "flex";
             
-            // Set Player Initial state
             playerPlay.innerText = "▶";
             customPlayer.classList.remove("playing");
             playerProgress.value = 0;
-            
-            // Download button URL update
             playerDownload.href = src;
         }
 
@@ -1480,7 +1541,7 @@
         });
 
         playerPlay.addEventListener("click", () => {
-            if (!isAudioLoaded) return;
+            if (!isAudioReady) return;
             
             if (audioElement.paused) {
                 audioElement.play();
@@ -1494,7 +1555,7 @@
         });
 
         playerProgress.addEventListener("input", (e) => {
-            if (!isAudioLoaded || !audioElement.duration) return;
+            if (!isAudioReady || !audioElement.duration) return;
             const newTime = (e.target.value / 100) * audioElement.duration;
             audioElement.currentTime = newTime;
         });
@@ -1514,25 +1575,22 @@
         function formatTime(secs) {
             const minutes = Math.floor(secs / 60);
             const seconds = Math.floor(secs % 60);
-            const returnedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
-            const returnedMinutes = minutes < 10 ? `0${minutes}` : `${minutes}`;
-            return `${returnedMinutes}:${returnedSeconds}`;
+            return `${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
         }
 
-        // Action Trigger: Generator Click
+        // Process Speech Trigger
         btnGenerate.addEventListener("click", async () => {
-            const promptVal = scenePrompt.value.trim();
-            if (!promptVal) {
-                updateStatus("Please write a scene prompt first.", "error", false);
+            const prompt = scenePrompt.value.trim();
+            if (!prompt) {
+                updateStatus("Please enter a script prompt.", "error", false);
                 return;
             }
 
             if (!client) {
-                updateStatus("DramaBox engine is still connecting, please wait.", "error", false);
+                updateStatus("DramaBox is still configuring, please wait.", "error", false);
                 return;
             }
 
-            // Gather values
             const cfg = parseFloat(sliderCfg.value);
             const stg = parseFloat(sliderStg.value);
             const durMult = parseFloat(sliderDur.value);
@@ -1541,19 +1599,18 @@
             const seed = parseInt(inputSeed.value);
 
             try {
-                // UI Disable State
                 btnGenerate.disabled = true;
-                btnGenerate.innerHTML = `<div class="spinner"></div> Generating Voice...`;
-                updateStatus("Preparing models & queue slot...", "info");
+                btnGenerate.innerHTML = `<div class="alert-spinner"></div> Voice Synthesis...`;
+                updateStatus("Checking models & processing queues...", "info");
 
                 let uploadedFileData = null;
                 if (selectedAudioFile) {
                     uploadedFileData = handle_file(selectedAudioFile);
                 }
 
-                // Call Gradio queued api
+                // Execute Gradio Client request
                 const predictResponse = await client.predict("/generate_audio", {
-                    prompt: promptVal,
+                    prompt: prompt,
                     audio_ref: uploadedFileData,
                     cfg: cfg,
                     stg: stg,
@@ -1565,9 +1622,9 @@
 
                 if (predictResponse && predictResponse.data && predictResponse.data.length > 0) {
                     const audioUrl = predictResponse.data[0].url;
-                    setupAudioElement(audioUrl);
+                    setupAudioSource(audioUrl);
                     updateStatus("Speech generation complete!", "success", false);
-                    setTimeout(hideStatus, 3000);
+                    setTimeout(hideStatus, 2500);
                 } else {
                     throw new Error("No output returned from the generation server.");
                 }
@@ -1581,7 +1638,7 @@
             }
         });
 
-        // Auto Connect on Load
+        // Initialize connection
         connectClient();
     </script>
 </body>