Upload folder using huggingface_hub

.gitignore

@@ -0,0 +1 @@
+run_local_server.sh

README.md

@@ -0,0 +1,22 @@
+---
+title: Supertonic 2 (TTS)
+emoji: ⚡️
+colorFrom: blue
+colorTo: gray
+sdk: static
+header: mini
+pinned: false
+short_description: Lightning-Fast, On-Device, Multilingual TTS
+language:
+    - en
+    - ko
+    - es
+    - pt
+    - fr
+tags:
+    - speech-synthesis
+    - text-to-speech
+    - audio
+    - voice
+license: openrail
+---

assets/onnx/duration_predictor.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6d556b3691165c364be91dc0bd894656b5949f5acd2750d8ec2f954010845011
+size 1521526

assets/onnx/text_encoder.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dd5f535ed629f7df86071043e15f541ce1b2ab7f1bdbce4c7892b307bca79fa3
+size 27431318

assets/onnx/tts.json

@@ -0,0 +1,316 @@
+{
+    "tts_version": "v1.6.0",
+    "split": "opensource-multilingual",
+    "ttl_ckpt_path": "unknown.pt",
+    "dp_ckpt_path": "unknown.pt",
+    "ae_ckpt_path": "unknown.pt",
+    "ttl_train": "unknown",
+    "dp_train": "unknown",
+    "ae_train": "unknown",
+    "ttl": {
+        "latent_dim": 24,
+        "chunk_compress_factor": 6,
+        "batch_expander": {
+            "n_batch_expand": 6
+        },
+        "normalizer": {
+            "scale": 0.25
+        },
+        "text_encoder": {
+            "char_dict_path": "resources/metadata/char_dict/opensource-multilingual2/char_dict.json",
+            "text_embedder": {
+                "char_dict_path": "resources/metadata/char_dict/opensource-multilingual2/char_dict.json",
+                "char_emb_dim": 256
+            },
+            "convnext": {
+                "idim": 256,
+                "ksz": 5,
+                "intermediate_dim": 1024,
+                "num_layers": 6,
+                "dilation_lst": [
+                    1,
+                    1,
+                    1,
+                    1,
+                    1,
+                    1
+                ]
+            },
+            "attn_encoder": {
+                "hidden_channels": 256,
+                "filter_channels": 1024,
+                "n_heads": 4,
+                "n_layers": 4,
+                "p_dropout": 0.1
+            },
+            "proj_out": {
+                "idim": 256,
+                "odim": 256
+            }
+        },
+        "flow_matching": {
+            "sig_min": 0
+        },
+        "style_encoder": {
+            "proj_in": {
+                "ldim": 24,
+                "chunk_compress_factor": 6,
+                "odim": 256
+            },
+            "convnext": {
+                "idim": 256,
+                "ksz": 5,
+                "intermediate_dim": 1024,
+                "num_layers": 6,
+                "dilation_lst": [
+                    1,
+                    1,
+                    1,
+                    1,
+                    1,
+                    1
+                ]
+            },
+            "style_token_layer": {
+                "input_dim": 256,
+                "n_style": 50,
+                "style_key_dim": 256,
+                "style_value_dim": 256,
+                "prototype_dim": 256,
+                "n_units": 256,
+                "n_heads": 2
+            }
+        },
+        "speech_prompted_text_encoder": {
+            "text_dim": 256,
+            "style_dim": 256,
+            "n_units": 256,
+            "n_heads": 2
+        },
+        "uncond_masker": {
+            "prob_both_uncond": 0.04,
+            "prob_text_uncond": 0.01,
+            "std": 0.1,
+            "text_dim": 256,
+            "n_style": 50,
+            "style_key_dim": 256,
+            "style_value_dim": 256
+        },
+        "vector_field": {
+            "proj_in": {
+                "ldim": 24,
+                "chunk_compress_factor": 6,
+                "odim": 512
+            },
+            "time_encoder": {
+                "time_dim": 64,
+                "hdim": 256
+            },
+            "main_blocks": {
+                "n_blocks": 4,
+                "time_cond_layer": {
+                    "idim": 512,
+                    "time_dim": 64
+                },
+                "style_cond_layer": {
+                    "idim": 512,
+                    "style_dim": 256
+                },
+                "text_cond_layer": {
+                    "idim": 512,
+                    "text_dim": 256,
+                    "n_heads": 4,
+                    "use_residual": true,
+                    "rotary_base": 10000,
+                    "rotary_scale": 10
+                },
+                "convnext_0": {
+                    "idim": 512,
+                    "ksz": 5,
+                    "intermediate_dim": 1024,
+                    "num_layers": 4,
+                    "dilation_lst": [
+                        1,
+                        2,
+                        4,
+                        8
+                    ]
+                },
+                "convnext_1": {
+                    "idim": 512,
+                    "ksz": 5,
+                    "intermediate_dim": 1024,
+                    "num_layers": 1,
+                    "dilation_lst": [
+                        1
+                    ]
+                },
+                "convnext_2": {
+                    "idim": 512,
+                    "ksz": 5,
+                    "intermediate_dim": 1024,
+                    "num_layers": 1,
+                    "dilation_lst": [
+                        1
+                    ]
+                }
+            },
+            "last_convnext": {
+                "idim": 512,
+                "ksz": 5,
+                "intermediate_dim": 1024,
+                "num_layers": 4,
+                "dilation_lst": [
+                    1,
+                    1,
+                    1,
+                    1
+                ]
+            },
+            "proj_out": {
+                "idim": 512,
+                "chunk_compress_factor": 6,
+                "ldim": 24
+            }
+        }
+    },
+    "ae": {
+        "sample_rate": 44100,
+        "n_delay": 0,
+        "base_chunk_size": 512,
+        "chunk_compress_factor": 1,
+        "ldim": 24,
+        "encoder": {
+            "spec_processor": {
+                "n_fft": 2048,
+                "win_length": 2048,
+                "hop_length": 512,
+                "n_mels": 228,
+                "sample_rate": 44100,
+                "eps": 1e-05,
+                "norm_mean": 0.0,
+                "norm_std": 1.0
+            },
+            "ksz_init": 7,
+            "ksz": 7,
+            "num_layers": 10,
+            "dilation_lst": [
+                1,
+                1,
+                1,
+                1,
+                1,
+                1,
+                1,
+                1,
+                1,
+                1
+            ],
+            "intermediate_dim": 2048,
+            "idim": 1253,
+            "hdim": 512,
+            "odim": 24
+        },
+        "decoder": {
+            "ksz_init": 7,
+            "ksz": 7,
+            "num_layers": 10,
+            "dilation_lst": [
+                1,
+                2,
+                4,
+                1,
+                2,
+                4,
+                1,
+                1,
+                1,
+                1
+            ],
+            "intermediate_dim": 2048,
+            "idim": 24,
+            "hdim": 512,
+            "head": {
+                "idim": 512,
+                "hdim": 2048,
+                "odim": 512,
+                "ksz": 3
+            }
+        }
+    },
+    "dp": {
+        "latent_dim": 24,
+        "chunk_compress_factor": 6,
+        "normalizer": {
+            "scale": 1.0
+        },
+        "sentence_encoder": {
+            "char_emb_dim": 64,
+            "char_dict_path": "resources/metadata/char_dict/opensource-multilingual2/char_dict.json",
+            "text_embedder": {
+                "char_dict_path": "resources/metadata/char_dict/opensource-multilingual2/char_dict.json",
+                "char_emb_dim": 64
+            },
+            "convnext": {
+                "idim": 64,
+                "ksz": 5,
+                "intermediate_dim": 256,
+                "num_layers": 6,
+                "dilation_lst": [
+                    1,
+                    1,
+                    1,
+                    1,
+                    1,
+                    1
+                ]
+            },
+            "attn_encoder": {
+                "hidden_channels": 64,
+                "filter_channels": 256,
+                "n_heads": 2,
+                "n_layers": 2,
+                "p_dropout": 0.0
+            },
+            "proj_out": {
+                "idim": 64,
+                "odim": 64
+            }
+        },
+        "style_encoder": {
+            "proj_in": {
+                "ldim": 24,
+                "chunk_compress_factor": 6,
+                "odim": 64
+            },
+            "convnext": {
+                "idim": 64,
+                "ksz": 5,
+                "intermediate_dim": 256,
+                "num_layers": 4,
+                "dilation_lst": [
+                    1,
+                    1,
+                    1,
+                    1
+                ]
+            },
+            "style_token_layer": {
+                "input_dim": 64,
+                "n_style": 8,
+                "style_key_dim": 0,
+                "style_value_dim": 16,
+                "prototype_dim": 64,
+                "n_units": 64,
+                "n_heads": 2
+            }
+        },
+        "predictor": {
+            "sentence_dim": 64,
+            "n_style": 8,
+            "style_dim": 16,
+            "hdim": 128,
+            "n_layer": 2
+        }
+    }
+}

assets/onnx/vector_estimator.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:105e9d66fd8756876b210a6b4aa03fc393b1eaca3a8dadcc8d9a3bc785c86a35
+size 132471364

assets/onnx/vocoder.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:19bd51f47a186069c752403518a40f7ea4c647455056d2511f7249691ecddf7c
+size 101405066

index.html

@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Supertonic 2 - Lightning-Fast, On-Device Multilingual TTS</title>
+        <meta name="description"
+            content="Supertonic 2 - A lightweight, super-fast text-to-speech synthesis system with on-device capabilities. Multi-language support with ONNX Runtime.">
+        <link rel="stylesheet" href="styles.css">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link
+            href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
+            rel="stylesheet">
+        <link
+            href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
+            rel="stylesheet">
+        <link rel="stylesheet"
+            href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
+
+        <!-- Import map for ES modules -->
+        <script type="importmap">
+            {
+                "imports": {
+                    "onnxruntime-web": "https://cdn.jsdelivr.net/npm/onnxruntime-web@1.23.0/dist/ort.webgpu.min.mjs",
+                    "fft.js": "https://esm.sh/fft.js@4.0.4"
+                }
+            }
+        </script>
+
+        <!-- Privacy-friendly analytics by Plausible -->
+        <script async src="https://plausible.io/js/pa-GHmWt-afyVp4WuenlUJZX.js"></script>
+        <script>
+          window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};
+          plausible.init()
+        </script>
+      
+    </head>
+    <body>
+        <!-- Interactive TTS Demo Section -->
+        <section class="interactive-demo" id="interactive-demo">
+            <div class="container">
+                <div class="demo-container">
+                    <div class="demo-content">
+                        <div class="demo-header-wrapper">
+                            <img src="img/supertonic_lighteninggraphic.svg" alt="Lightning" class="demo-header-icon" />
+                            <h2 class="demo-header">
+                                <span class="demo-header-text"><span class="demo-header-bold">Supertonic 2</span> | Lightning Fast, On-Device, Multilingual TTS</span>
+                                <span class="demo-header-links">
+                                    <a href="https://github.com/supertone-inc/supertonic/" class="demo-header-link" target="_blank" rel="noopener noreferrer"><svg class="demo-header-link-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>Github</a><a href="https://huggingface.co/Supertone/supertonic-2" class="demo-header-link" target="_blank" rel="noopener noreferrer"><svg class="demo-header-link-icon" viewBox="0 0 95 88" fill="none" width="16" height="16"><path fill="#FFD21E" d="M47.21 76.5a34.75 34.75 0 1 0 0-69.5 34.75 34.75 0 0 0 0 69.5Z" /><path fill="#FF9D0B" d="M81.96 41.75a34.75 34.75 0 1 0-69.5 0 34.75 34.75 0 0 0 69.5 0Zm-73.5 0a38.75 38.75 0 1 1 77.5 0 38.75 38.75 0 0 1-77.5 0Z" /><path fill="#3A3B45" d="M58.5 32.3c1.28.44 1.78 3.06 3.07 2.38a5 5 0 1 0-6.76-2.07c.61 1.15 2.55-.72 3.7-.32ZM34.95 32.3c-1.28.44-1.79 3.06-3.07 2.38a5 5 0 1 1 6.76-2.07c-.61 1.15-2.56-.72-3.7-.32Z" /><path fill="#FF323D" d="M46.96 56.29c9.83 0 13-8.76 13-13.26 0-2.34-1.57-1.6-4.09-.36-2.33 1.15-5.46 2.74-8.9 2.74-7.19 0-13-6.88-13-2.38s3.16 13.26 13 13.26Z" /><path fill="#3A3B45" fillRule="evenodd" d="M39.43 54a8.7 8.7 0 0 1 5.3-4.49c.4-.12.81.57 1.24 1.28.4.68.82 1.37 1.24 1.37.45 0 .9-.68 1.33-1.35.45-.7.89-1.38 1.32-1.25a8.61 8.61 0 0 1 5 4.17c3.73-2.94 5.1-7.74 5.1-10.7 0-2.34-1.57-1.6-4.09-.36l-.14.07c-2.31 1.15-5.39 2.67-8.77 2.67s-6.45-1.52-8.77-2.67c-2.6-1.29-4.23-2.1-4.23.29 0 3.05 1.46 8.06 5.47 10.97Z" clipRule="evenodd" /><path fill="#FF9D0B" d="M70.71 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM24.21 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM17.52 48c-1.62 0-3.06.66-4.07 1.87a5.97 5.97 0 0 0-1.33 3.76 7.1 7.1 0 0 0-1.94-.3c-1.55 0-2.95.59-3.94 1.66a5.8 5.8 0 0 0-.8 7 5.3 5.3 0 0 0-1.79 2.82c-.24.9-.48 2.8.8 4.74a5.22 5.22 0 0 0-.37 5.02c1.02 2.32 3.57 4.14 8.52 6.1 3.07 1.22 5.89 2 5.91 2.01a44.33 44.33 0 0 0 10.93 1.6c5.86 0 10.05-1.8 12.46-5.34 3.88-5.69 3.33-10.9-1.7-15.92-2.77-2.78-4.62-6.87-5-7.77-.78-2.66-2.84-5.62-6.25-5.62a5.7 5.7 0 0 0-4.6 2.46c-1-1.26-1.98-2.25-2.86-2.82A7.4 7.4 0 0 0 17.52 48Zm0 4c.51 0 1.14.22 1.82.65 2.14 1.36 6.25 8.43 7.76 11.18.5.92 1.37 1.31 2.14 1.31 1.55 0 2.75-1.53.15-3.48-3.92-2.93-2.55-7.72-.68-8.01.08-.02.17-.02.24-.02 1.7 0 2.45 2.93 2.45 2.93s2.2 5.52 5.98 9.3c3.77 3.77 3.97 6.8 1.22 10.83-1.88 2.75-5.47 3.58-9.16 3.58-3.81 0-7.73-.9-9.92-1.46-.11-.03-13.45-3.8-11.76-7 .28-.54.75-.76 1.34-.76 2.38 0 6.7 3.54 8.57 3.54.41 0 .7-.17.83-.6.79-2.85-12.06-4.05-10.98-8.17.2-.73.71-1.02 1.44-1.02 3.14 0 10.2 5.53 11.68 5.53.11 0 .2-.03.24-.1.74-1.2.33-2.04-4.9-5.2-5.21-3.16-8.88-5.06-6.8-7.33.24-.26.58-.38 1-.38 3.17 0 10.66 6.82 10.66 6.82s2.02 2.1 3.25 2.1c.28 0 .52-.1.68-.38.86-1.46-8.06-8.22-8.56-11.01-.34-1.9.24-2.85 1.31-2.85Z" /><path fill="#FFD21E" d="M38.6 76.69c2.75-4.04 2.55-7.07-1.22-10.84-3.78-3.77-5.98-9.3-5.98-9.3s-.82-3.2-2.69-2.9c-1.87.3-3.24 5.08.68 8.01 3.91 2.93-.78 4.92-2.29 2.17-1.5-2.75-5.62-9.82-7.76-11.18-2.13-1.35-3.63-.6-3.13 2.2.5 2.79 9.43 9.55 8.56 11-.87 1.47-3.93-1.71-3.93-1.71s-9.57-8.71-11.66-6.44c-2.08 2.27 1.59 4.17 6.8 7.33 5.23 3.16 5.64 4 4.9 5.2-.75 1.2-12.28-8.53-13.36-4.4-1.08 4.11 11.77 5.3 10.98 8.15-.8 2.85-9.06-5.38-10.74-2.18-1.7 3.21 11.65 6.98 11.76 7.01 4.3 1.12 15.25 3.49 19.08-2.12Z" /><path fill="#FF9D0B" d="M77.4 48c1.62 0 3.07.66 4.07 1.87a5.97 5.97 0 0 1 1.33 3.76 7.1 7.1 0 0 1 1.95-.3c1.55 0 2.95.59 3.94 1.66a5.8 5.8 0 0 1 .8 7 5.3 5.3 0 0 1 1.78 2.82c.24.9.48 2.8-.8 4.74a5.22 5.22 0 0 1 .37 5.02c-1.02 2.32-3.57 4.14-8.51 6.1-3.08 1.22-5.9 2-5.92 2.01a44.33 44.33 0 0 1-10.93 1.6c-5.86 0-10.05-1.8-12.46-5.34-3.88-5.69-3.33-10.9 1.7-15.92 2.78-2.78 4.63-6.87 5.01-7.77.78-2.66 2.83-5.62 6.24-5.62a5.7 5.7 0 0 1 4.6 2.46c1-1.26 1.98-2.25 2.87-2.82A7.4 7.4 0 0 1 77.4 48Zm0 4c-.51 0-1.13.22-1.82.65-2.13 1.36-6.25 8.43-7.76 11.18a2.43 2.43 0 0 1-2.14 1.31c-1.54 0-2.75-1.53-.14-3.48 3.91-2.93 2.54-7.72.67-8.01a1.54 1.54 0 0 0-.24-.02c-1.7 0-2.45 2.93-2.45 2.93s-2.2 5.52-5.97 9.3c-3.78 3.77-3.98 6.8-1.22 10.83 1.87 2.75 5.47 3.58 9.15 3.58 3.82 0 7.73-.9 9.93-1.46.1-.03 13.45-3.8 11.76-7-.29-.54-.75-.76-1.34-.76-2.38 0-6.71 3.54-8.57 3.54-.42 0-.71-.17-.83-.6-.8-2.85 12.05-4.05 10.97-8.17-.19-.73-.7-1.02-1.44-1.02-3.14 0-10.2 5.53-11.68 5.53-.1 0-.19-.03-.23-.1-.74-1.2-.34-2.04 4.88-5.2 5.23-3.16 8.9-5.06 6.8-7.33-.23-.26-.57-.38-.98-.38-3.18 0-10.67 6.82-10.67 6.82s-2.02 2.1-3.24 2.1a.74.74 0 0 1-.68-.38c-.87-1.46 8.05-8.22 8.55-11.01.34-1.9-.24-2.85-1.31-2.85Z" /><path fill="#FFD21E" d="M56.33 76.69c-2.75-4.04-2.56-7.07 1.22-10.84 3.77-3.77 5.97-9.3 5.97-9.3s.82-3.2 2.7-2.9c1.86.3 3.23 5.08-.68 8.01-3.92 2.93.78 4.92 2.28 2.17 1.51-2.75 5.63-9.82 7.76-11.18 2.13-1.35 3.64-.6 3.13 2.2-.5 2.79-9.42 9.55-8.55 11 .86 1.47 3.92-1.71 3.92-1.71s9.58-8.71 11.66-6.44c2.08 2.27-1.58 4.17-6.8 7.33-5.23 3.16-5.63 4-4.9 5.2.75 1.2 12.28-8.53 13.36-4.4 1.08 4.11-11.76 5.3-10.97 8.15.8 2.85 9.05-5.38 10.74-2.18 1.69 3.21-11.65 6.98-11.76 7.01-4.31 1.12-15.26 3.49-19.08-2.12Z" /></svg>Models</a><a href="https://chromewebstore.google.com/detail/mdbiaajonlkomihpcaffhkagodbcgbme?utm_source=item-share-cb" class="demo-header-link" target="_blank" rel="noopener noreferrer"><img src="img/chrome.svg" class="demo-header-link-icon" width="16" height="16" alt="Chrome" />Extension</a>
+                                </span>
+                            </h2>
+                        </div>
+                        <div class="demo-controls">
+                            <div class="demo-param">
+                                <div class="speaker-container">
+                                    <label class="speaker-label">Speaker: </label>
+                                    <div class="speaker-list" id="speakerList">
+                                        <span class="speaker-item" data-voice="M1">Alex</span><span class="speaker-separator">, </span>
+                                        <span class="speaker-item" data-voice="M2">James</span><span class="speaker-separator">, </span>
+                                        <span class="speaker-item" data-voice="M3">Robert</span><span class="speaker-separator">, </span>
+                                        <span class="speaker-item" data-voice="M4">Sam</span><span class="speaker-separator">, </span>
+                                        <span class="speaker-item" data-voice="M5">Daniel</span><span class="speaker-separator">, </span>
+                                        <span class="speaker-item" data-voice="F1">Sarah</span><span class="speaker-separator">, </span>
+                                        <span class="speaker-item" data-voice="F2">Lily</span><span class="speaker-separator">, </span>
+                                        <span class="speaker-item" data-voice="F3">Jessica</span><span class="speaker-separator">, </span>
+                                        <span class="speaker-item" data-voice="F4">Olivia</span><span class="speaker-separator">, </span>
+                                        <span class="speaker-item" data-voice="F5">Emily</span>
+                                        <span class="speaker-item speaker-item-create" id="createVoiceBtn" style="display: none;">+Create your own voice</span>
+                                    </div>
+                                </div>
+                                <div class="language-info">
+                                    <label class="speaker-label">Language: </label>
+                                    <div class="speaker-list" id="languageList">
+                                        <span class="speaker-item" data-language="en">English</span><span class="speaker-separator">, </span>
+                                        <span class="speaker-item" data-language="es">Spanish</span><span class="speaker-separator">, </span>
+                                        <span class="speaker-item" data-language="pt">Portuguese</span><span class="speaker-separator">, </span>
+                                        <span class="speaker-item" data-language="fr">French</span><span class="speaker-separator">, </span>
+                                        <span class="speaker-item" data-language="ko">Korean</span>
+                                    </div>
+                                </div>
+                            </div>
+                            </div>
+
+                        <div class="demo-input-section">
+                            <div class="demo-input-label">
+                                <label for="demoTextInput">Enter text to synthesize:</label>
+                            </div>
+                            <div
+                                id="demoTextInput"
+                                contenteditable="true"
+                                spellcheck="false"
+                                class="demo-text-input-editable"
+                                data-placeholder="Type any text here to convert it into speech... (minimum 10 characters)">This text-to-speech system runs entirely in your browser, providing fast and private operation without sending any data to external servers.</div>
+                            <div id="presetControlsRow">
+                                <div id="presetButtonGroup">
+                                    <span class="preset-icon" aria-hidden="true">
+                                        <svg viewBox="0 0 24 24" width="18" height="18" focusable="false">
+                                            <rect x="4" y="6" width="14" height="2" fill="#000"/>
+                                            <rect x="4" y="10" width="10" height="2" fill="#000"/>
+                                            <rect x="4" y="14" width="14" height="2" fill="#000"/>
+                                            <rect x="4" y="18" width="10" height="2" fill="#000"/>
+                                        </svg>
+                                    </span>
+                                    <span class="preset-item" data-preset="freeform" id="freeformBtn">Freeform</span>
+                                    <span class="preset-item" data-preset="quote" id="presetQuoteBtn">Quote</span>
+                                    <span class="preset-item" data-preset="paragraph" id="presetParagraphBtn">Paragraph</span>
+                                    <span class="preset-item" data-preset="script" id="presetScriptBtn">Script</span>
+                                    <span class="preset-item" data-preset="book" id="presetBookBtn" style="display: none;">Book</span>
+                                </div>
+                                <span class="demo-char-counter" id="demoCharCounter">
+                                    <span class="demo-char-warning" id="demoCharWarning"></span>
+                                    <span id="demoCharCount">126</span> characters
+                                </span>
+                            </div>
+                        </div>
+
+                        <div class="demo-output-section">
+                            <!-- Coming Soon Modal -->
+                            <div id="comingSoonModal" class="coming-soon-modal">
+                                <div class="coming-soon-modal-overlay"></div>
+                                <div class="coming-soon-modal-content">
+                                    <div class="coming-soon-modal-header">
+                                        <h3>Coming Soon</h3>
+                                    </div>
+                                    <div class="coming-soon-modal-body">
+                                        <p>Custom voice creation feature will be available soon.</p>
+                                </div>
+                                    <div class="coming-soon-modal-footer">
+                                        <button class="coming-soon-modal-btn" id="comingSoonCloseBtn">OK</button>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Parameters in horizontal layout -->
+                            <div class="demo-params-row">
+                                <div class="demo-param">
+                                    <div class="demo-param-header">
+                                        <label for="demoTotalSteps">
+                                            Quality: <span class="param-value" id="demoTotalStepsValue">5 Steps</span>
+                                        </label>
+                                    </div>
+                                    <input type="range" id="demoTotalSteps" value="5" min="2" max="16" step="1">
+                                </div>
+                                <div class="demo-param">
+                                    <div class="demo-param-header">
+                                        <label for="demoSpeed">
+                                            Speech Speed: <span class="param-value" id="demoSpeedValue">1.0x</span>
+                                        </label>
+                                    </div>
+                                    <input type="range" id="demoSpeed" value="1.0" min="0.8" max="1.3" step="0.05">
+                                </div>
+                            <button id="demoGenerateBtn" class="demo-generate-btn" disabled>
+                                <img src="img/supertonic_lighteninggraphic.svg" alt="Generate" width="20" height="20" />
+                                <span class="text">Generate Speech</span>
+                                <span class="shimmer" aria-hidden="true"></span>
+                            </button>
+                            </div>
+                        </div>
+                        <div id="demoResults" class="demo-results">
+                            <div class="demo-placeholder">
+                                <div class="demo-placeholder-icon">🎙️</div>
+                                <p>Your generated speech will appear here</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Moved below content: status box and info banner -->
+                    <div class="demo-status-box" id="demoStatusBox">
+                        <div class="demo-status-content">
+                            <div class="demo-status-text" id="demoStatusText">
+                                <strong>Initializing...</strong> Loading models...
+                            </div>
+                        </div>
+                    </div>
+
+                    <div id="wasmWarningBanner" class="wasm-warning-banner" style="display: none;">
+                        Currently using WASM backend. For optimal performance, we recommend using a browser with WebGPU support (Chrome 113+ or Edge 113+).
+                    </div>
+
+                    <div id="demoError" class="demo-error"></div>
+                </div>
+            </div>
+        </section>
+
+        <script src="preset-texts.js"></script>
+        <!-- Speaker Tooltip -->
+        <div id="speakerTooltip" class="speaker-tooltip"></div>
+        
+        <!-- Language Auto-Detection Toast -->
+        <div id="languageToast" class="language-toast">
+            <span class="language-toast-icon">⚠️</span>
+            <span class="language-toast-message" id="languageToastMessage"></span>
+        </div>
+        
+        <script type="module" src="script.js"></script>
+  
+    </body>
+</html>

preset-texts.js

@@ -0,0 +1,121 @@
+// Preset text content for demo buttons
+window.presetTexts = {
+    quote: {
+        en: "This text-to-speech system runs entirely in your browser, providing fast and private operation without sending any data to external servers.",
+        es: "Este sistema de conversión de texto a voz funciona completamente de forma local en el navegador y procesa todos los datos en el dispositivo para ofrecer un rendimiento rápido y seguro.",
+        pt: "Este sistema de conversão de texto em fala funciona totalmente de forma local no navegador, processando todos os dados no próprio dispositivo para garantir desempenho rápido e seguro.",
+        fr: "Ce système de synthèse vocale fonctionne entièrement en local dans le navigateur et traite toutes les données sur l’appareil afin d’offrir des performances rapides et sécurisées.",
+        ko: "이 텍스트 음성 변환 시스템은 브라우저에서 완전히 로컬로 동작하며, 모든 데이터를 기기 내에서 처리해 안전하고 빠른 성능을 제공합니다.",    
+    },
+    paragraph: {
+        en: "Flat white and cafe latte are both espresso-based drinks with milk. However, they differ clearly in the amount and texture of the milk, as well as in overall flavor balance. A flat white is designed to highlight the espresso. It uses a very thin layer of finely textured microfoam, creating a smooth and almost flat surface. As a result, the coffee's rich flavor and aroma remain more pronounced. The drink is also typically served in a smaller cup with less milk than a latte. In contrast, a cafe latte contains a higher proportion of steamed milk. It also has a thicker foam layer, which gives it a creamier and milder character. This softens the bitterness and acidity of the espresso. Because of this, it is an approachable and widely enjoyed milk-based coffee.",
+        es: "El flat white y el café latte son bebidas a base de espresso con leche. Sin embargo, se diferencian claramente en la cantidad y la textura de la leche, así como en el equilibrio general del sabor. El flat white está pensado para resaltar el carácter del espresso. Utiliza una capa muy fina de microespuma bien integrada, que deja una superficie casi plana. Gracias a ello, el sabor y el aroma del café se perciben de forma más intensa. Además, normalmente se sirve en una taza más pequeña y con menos leche que un latte. En cambio, el café latte contiene una mayor proporción de leche vaporizada. También presenta una capa de espuma más gruesa, lo que le aporta una textura más cremosa y un sabor más suave. Esto atenúa el amargor y la acidez del espresso. Por esa razón, es una bebida fácil de disfrutar para un público amplio.",
+        pt: "O flat white e o café latte são bebidas à base de espresso com leite. No entanto, apresentam diferenças claras na quantidade e na textura do leite, bem como no equilíbrio geral do sabor. O flat white foi criado para destacar o sabor do espresso. Ele utiliza uma camada muito fina de microespuma bem integrada, resultando em uma superfície quase plana. Com isso, o aroma e a intensidade do café permanecem mais evidentes. A bebida também costuma ser servida em uma xícara menor, com menos leite do que o latte. Já o café latte possui uma proporção maior de leite vaporizado. Além disso, conta com uma camada de espuma mais espessa, oferecendo uma textura mais cremosa e um sabor mais suave. Isso reduz a percepção do amargor e da acidez do espresso. Por isso, é uma opção acessível e bastante popular.",
+        fr: "Le flat white et le café latte sont tous deux des boissons à base d’espresso et de lait. Toutefois, ils se distinguent nettement par la quantité et la texture du lait, ainsi que par l’équilibre global des saveurs. Le flat white met l’accent sur l’espresso. Il utilise une couche très fine de micro-mousse, créant une surface lisse et presque plate. Cela permet aux arômes et à l’intensité du café de rester bien perceptibles. La boisson est également servie dans une tasse plus petite, avec moins de lait qu’un latte. À l’inverse, le café latte contient une proportion plus élevée de lait chaud. Il présente aussi une couche de mousse plus épaisse, ce qui lui donne une texture plus onctueuse et un goût plus doux. Cette composition atténue l’amertume et l’acidité de l’espresso. Ainsi, il s’agit d’une boisson facile à apprécier par un large public.",
+        ko: "플랫화이트와 카페라떼는 모두 에스프레소에 우유를 더한 커피입니다. 하지만 우유의 양과 질감, 그리고 전체적인 맛의 균형에서 분명한 차이를 보입니다. 플랫화이트는 에스프레소의 풍미를 중심에 두는 음료입니다. 매우 얇고 고운 마이크로폼 형태의 우유 거품을 사용해 표면이 거의 평평하게 마무리됩니다. 이로 인해 커피의 진한 맛과 향이 우유에 묻히지 않고 또렷하게 느껴집니다. 또한 일반적으로 카페라떼보다 잔의 크기와 우유의 양이 적은 편입니다. 반면 카페라떼는 스팀 밀크의 비중이 더 높습니다. 우유 거품층도 플랫화이트에 비해 두껍게 형성되어 전체적으로 부드럽고 고소한 인상을 줍니다. 그 결과 에스프레소의 쓴맛이나 산미가 완화됩니다. 누구나 부담 없이 마시기 쉬운 밀크 커피로 인식되는 이유입니다."
+        },
+    script: {
+        en: 
+`Hello. Today, I would like to talk about one of the long-standing philosophical debates: “Which came first, the chicken or the egg?” This question may seem like simple curiosity, but in fact, it is a topic that allows us to deeply explore how we understand life, evolution, cause, and effect.
+
+First, let’s define the question a little more precisely. We often wonder about the order of the egg and the chicken. Which came first, the egg or the chicken? Here, the “egg” could mean a general “egg” or specifically a “chicken egg.” This distinction determines the direction of the discussion.
+
+From a philosophical perspective, this problem stimulates reflection on cause and effect. What started first? Causes produce effects, and effects in turn shape causes. Following this logic, we discover a cycle. Eggs exist because there are chickens, and chickens come from eggs. They depend on each other, making it difficult to find a starting point.
+
+However, from a scientific perspective, we can offer a slightly different answer. Modern biology and evolutionary theory show that the chicken we know today is the result of long evolution. Chickens are a species of birds whose ancestors gradually changed over tens of millions of years to take their current form. In other words, today’s chicken stands on a continuum of ancestors slightly different from past chickens.
+
+Here comes an important clue. There was an egg laid by a chicken ancestor that was not yet a true chicken. A mutation or genetic change occurred in that egg, resulting in the first chicken as we know it today. From this perspective, if we define the egg as a “chicken-laid egg,” then the egg came first. There was an egg in which the changes necessary to become a chicken occurred, and the first chicken hatched from it.
+
+While the evolutionary answer is like this, philosophical discussions are still valid. Because cause and effect cannot be completely separated, it requires circular thinking. This question is not mere curiosity; it is a door that makes us ponder causality, the flow of time, and the origin of life.
+
+Another perspective comes from religion or mythology. Many cultures believe life was created by a deity. From this viewpoint, the chicken could have been created first, because eggs can only exist if there are chickens. Unlike scientific evidence, mythological perspectives reflect human intuition and belief.
+
+Today’s conclusion can be summarized as follows. From philosophical, logical, and mythological viewpoints, it is a circular question. From scientific and evolutionary perspectives, the egg in which the genetic changes necessary to become a chicken occurred came first. In other words, the answer depends on which criteria and perspective we choose.
+
+Finally, let’s consider the meaning this debate gives us. Arguing about the order of the egg and the chicken is not just intellectual curiosity. Through this question, we can reflect on the essence of life, the process of change, cause and effect, and our way of thinking.
+
+The message I want to convey today is clear. Sometimes, the answer is not important. What matters is asking questions, thinking from various perspectives, and making an effort to understand the world deeply. The debate over which came first, the egg or the chicken, ultimately symbolizes human curiosity and the spirit of inquiry.`,
+    es: 
+`Hola. Hoy quiero hablar sobre uno de los debates filosóficos más antiguos: “¿Qué fue primero, el huevo o la gallina?” Esta pregunta puede parecer una simple curiosidad, pero en realidad es un tema que nos permite explorar profundamente cómo entendemos la vida, la evolución, la causa y el efecto.
+
+Primero, definamos la pregunta un poco más concretamente. A menudo nos preguntamos sobre el orden entre el huevo y la gallina. ¿Qué fue primero, el huevo o la gallina? Aquí, “huevo” podría significar un “huevo” en general o específicamente un “huevo de gallina”. Esta distinción determina la dirección de la discusión.
+
+Desde una perspectiva filosófica, este problema nos hace reflexionar sobre la causa y el efecto. ¿Qué comenzó primero? Las causas producen efectos, y los efectos a su vez forman causas. Siguiendo esta lógica, descubrimos un ciclo. Los huevos existen porque hay gallinas, y las gallinas provienen de huevos. Dependen unas de otras, lo que dificulta encontrar un punto de inicio.
+
+Sin embargo, desde una perspectiva científica, podemos ofrecer una respuesta algo diferente. La biología moderna y la teoría evolutiva muestran que la gallina que conocemos hoy es el resultado de una larga evolución. Las gallinas son una especie de aves cuyos antepasados cambiaron gradualmente durante decenas de millones de años hasta tomar su forma actual. En otras palabras, la gallina actual se encuentra sobre un continuo de antepasados ligeramente diferentes de las gallinas del pasado.
+
+Aquí surge una pista importante. Hubo un huevo puesto por un ancestro de la gallina que aún no era una gallina verdadera. En ese huevo ocurrió una mutación o cambio genético, dando lugar a la primera gallina tal como la conocemos hoy. Desde esta perspectiva, si definimos el huevo como “huevo puesto por una gallina”, entonces el huevo fue primero. Hubo un huevo en el que ocurrieron los cambios necesarios para convertirse en gallina, y de ese huevo nació la primera gallina.
+
+Aunque la respuesta evolutiva es así, las discusiones filosóficas siguen siendo válidas. Dado que no se puede separar completamente la causa del efecto, se requiere un pensamiento circular. Esta pregunta no es mera curiosidad; es una puerta que nos hace reflexionar sobre la causalidad, el flujo del tiempo y el origen de la vida.
+
+Otra perspectiva proviene de la religión o la mitología. Muchas culturas creen que la vida fue creada por un dios. Desde este punto de vista, la gallina pudo haber sido creada primero, porque los huevos solo pueden existir si hay gallinas. A diferencia de la evidencia científica, la perspectiva mitológica refleja la intuición y la creencia humana.
+
+La conclusión de hoy se puede resumir así. Desde los puntos de vista filosófico, lógico y mitológico, es una pregunta circular. Desde los puntos de vista científico y evolutivo, el huevo en el que ocurrieron los cambios genéticos necesarios para convertirse en gallina fue primero. En otras palabras, la respuesta depende de los criterios y la perspectiva que elijamos.
+
+Finalmente, consideremos el significado que nos da este debate. Discutir sobre el orden del huevo y la gallina no es solo curiosidad intelectual. A través de esta pregunta, podemos reflexionar sobre la esencia de la vida, el proceso de cambio, la causa y el efecto, y nuestra forma de pensar.
+
+El mensaje que quiero transmitir hoy es claro. A veces, la respuesta no es importante. Lo importante es hacer preguntas, pensar desde diversas perspectivas y esforzarse por comprender el mundo profundamente. El debate sobre qué fue primero, el huevo o la gallina, simboliza, en última instancia, la curiosidad humana y el espíritu de investigación.`,
+    pt: 
+`Olá. Hoje, gostaria de falar sobre um dos debates filosóficos mais antigos: “O que veio primeiro, o ovo ou a galinha?” Esta pergunta pode parecer uma simples curiosidade, mas, na verdade, é um tema que nos permite explorar profundamente como entendemos a vida, a evolução, a causa e o efeito.
+
+Primeiro, vamos definir a pergunta de forma um pouco mais precisa. Frequentemente nos perguntamos sobre a ordem entre o ovo e a galinha. O que veio primeiro, o ovo ou a galinha? Aqui, “ovo” pode significar um “ovo” em geral ou especificamente um “ovo de galinha”. Essa distinção determina a direção da discussão.
+
+Do ponto de vista filosófico, esse problema estimula a reflexão sobre causa e efeito. O que começou primeiro? As causas produzem efeitos, e os efeitos, por sua vez, formam causas. Seguindo essa lógica, descobrimos um ciclo. Os ovos existem porque existem galinhas, e as galinhas vêm dos ovos. Eles dependem uns dos outros, tornando difícil encontrar um ponto de início.
+
+No entanto, do ponto de vista científico, podemos oferecer uma resposta um pouco diferente. A biologia moderna e a teoria da evolução mostram que a galinha que conhecemos hoje é o resultado de uma longa evolução. As galinhas são uma espécie de ave cujos ancestrais mudaram gradualmente ao longo de dezenas de milhões de anos até assumirem a forma atual. Em outras palavras, a galinha de hoje está sobre um contínuo de ancestrais ligeiramente diferentes das galinhas do passado.
+
+Aqui surge uma pista importante. Houve um ovo colocado por um ancestral da galinha que ainda não era uma galinha verdadeira. Nesse ovo ocorreu uma mutação ou mudança genética, resultando na primeira galinha como conhecemos hoje. Dessa perspectiva, se definirmos o ovo como “ovo posto por uma galinha”, então o ovo veio primeiro. Houve um ovo em que ocorreram as mudanças necessárias para se tornar uma galinha, e a primeira galinha nasceu desse ovo.
+
+Embora a resposta evolutiva seja essa, as discussões filosóficas ainda são válidas. Como causa e efeito não podem ser completamente separados, é necessário um pensamento circular. Esta pergunta não é mera curiosidade; é uma porta que nos faz refletir sobre causalidade, o fluxo do tempo e a origem da vida.
+
+Outra perspectiva vem da religião ou da mitologia. Muitas culturas acreditam que a vida foi criada por uma divindade. Deste ponto de vista, a galinha poderia ter sido criada primeiro, porque os ovos só podem existir se houver galinhas. Ao contrário das evidências científicas, a perspectiva mitológica reflete a intuição e a crença humana.
+
+A conclusão de hoje pode ser resumida assim. Do ponto de vista filosófico, lógico e mitológico, é uma pergunta circular. Do ponto de vista científico e evolutivo, o ovo em que ocorreram as mudanças genéticas necessárias para se tornar uma galinha veio primeiro. Em outras palavras, a resposta depende dos critérios e da perspectiva que escolhemos.
+
+Finalmente, vamos considerar o significado que esse debate nos traz. Discutir a ordem do ovo e da galinha não é apenas curiosidade intelectual. Por meio desta pergunta, podemos refletir sobre a essência da vida, o processo de mudança, causa e efeito e nossa forma de pensar.
+
+A mensagem que quero transmitir hoje é clara. Às vezes, a resposta não é importante. O que importa é fazer perguntas, pensar sob diversas perspectivas e esforçar-se para compreender profundamente o mundo. O debate sobre o que veio primeiro, o ovo ou a galinha, simboliza, em última análise, a curiosidade humana e o espírito de investigação.`,
+    fr: 
+`Bonjour. Aujourd’hui, je voudrais parler de l’un des débats philosophiques les plus anciens : « Qu’est-ce qui est venu en premier, l’œuf ou la poule ? » Cette question peut sembler être une simple curiosité, mais en réalité, c’est un sujet qui nous permet d’explorer profondément comment nous comprenons la vie, l’évolution, la cause et l’effet.
+
+Tout d’abord, définissons un peu plus précisément la question. Nous nous demandons souvent quel est l’ordre entre l’œuf et la poule. Qu’est-ce qui est venu en premier, l’œuf ou la poule ? Ici, « œuf » peut signifier un « œuf » en général ou spécifiquement un « œuf de poule ». Cette distinction détermine la direction de la discussion.
+
+D’un point de vue philosophique, ce problème incite à réfléchir sur la cause et l’effet. Qu’est-ce qui a commencé en premier ? Les causes produisent des effets, et les effets, à leur tour, forment des causes. En suivant cette logique, nous découvrons un cycle. Les œufs existent parce qu’il y a des poules, et les poules viennent des œufs. Ils dépendent les uns des autres, ce qui rend difficile de trouver un point de départ.
+
+Cependant, d’un point de vue scientifique, nous pouvons proposer une réponse légèrement différente. La biologie moderne et la théorie de l’évolution montrent que la poule que nous connaissons aujourd’hui est le résultat d’une longue évolution. Les poules sont une espèce d’oiseaux dont les ancêtres ont progressivement changé au cours de dizaines de millions d’années pour prendre leur forme actuelle. En d’autres termes, la poule d’aujourd’hui se tient sur un continuum d’ancêtres légèrement différents des poules du passé.
+
+Voici un indice important. Il y avait un œuf pondu par un ancêtre de la poule qui n’était pas encore une vraie poule. Une mutation ou un changement génétique est survenu dans cet œuf, donnant naissance à la première poule telle que nous la connaissons aujourd’hui. De ce point de vue, si nous définissons l’œuf comme « œuf pondu par une poule », alors l’œuf est venu en premier. Il y avait un œuf dans lequel les changements nécessaires pour devenir une poule se sont produits, et la première poule en est sortie.
+
+Bien que la réponse évolutionniste soit ainsi, les discussions philosophiques restent valables. Comme la cause et l’effet ne peuvent pas être complètement séparés, cela exige une pensée circulaire. Cette question n’est pas une simple curiosité ; c’est une porte qui nous fait réfléchir sur la causalité, le flux du temps et l’origine de la vie.
+
+Une autre perspective vient de la religion ou de la mythologie. De nombreuses cultures croient que la vie a été créée par une divinité. De ce point de vue, la poule aurait pu être créée en premier, car les œufs ne peuvent exister que s’il y a des poules. Contrairement aux preuves scientifiques, la perspective mythologique reflète l’intuition et la croyance humaines.
+
+La conclusion d’aujourd’hui peut se résumer ainsi. Du point de vue philosophique, logique et mythologique, c’est une question circulaire. Du point de vue scientifique et évolutionniste, l’œuf dans lequel se sont produites les modifications génétiques nécessaires pour devenir une poule est venu en premier. En d’autres termes, la réponse dépend des critères et du point de vue que nous choisissons.
+
+Enfin, réfléchissons à la signification que ce débat nous apporte. Discuter de l’ordre de l’œuf et de la poule n’est pas seulement une curiosité intellectuelle. À travers cette question, nous pouvons réfléchir à l’essence de la vie, au processus de changement, à la cause et à l’effet, et à notre manière de penser.
+
+Le message que je veux transmettre aujourd’hui est clair. Parfois, la réponse n’est pas importante. Ce qui compte, c’est de poser des questions, de penser sous différents angles et de faire un effort pour comprendre profondément le monde. Le débat sur ce qui est venu en premier, l’œuf ou la poule, symbolise finalement la curiosité humaine et l’esprit d’investigation.`,
+    ko: 
+`안녕하세요. 오늘 저는 오랜 철학적 논쟁 중 하나인, '달걀이 먼저인가, 닭이 먼저인가'라는 주제에 대해 이야기하려 합니다. 이 질문은 단순한 호기심처럼 보이지만, 사실 우리가 생명과 진화, 원인과 결과를 어떻게 이해하는지 깊이 탐구할 수 있는 주제입니다.
+
+먼저, 질문을 조금 더 구체적으로 정의해보겠습니다. 우리는 흔히 달걀과 닭의 순서를 두고 고민합니다. 달걀이 먼저냐, 닭이 먼저냐. 여기서 달걀은 일반적인 '알'을 의미할 수도 있고, 닭이 낳는 '닭 알'을 의미할 수도 있습니다. 이 구분은 논의의 방향을 결정합니다.
+
+철학적 관점에서 보면, 이 문제는 원인과 결과에 대한 고민을 촉발합니다. 무엇이 먼저 시작되었는가. 원인은 결과를 만들어내고, 결과는 다시 원인을 형성합니다. 이 논리를 따라가면 우리는 순환의 고리를 발견하게 됩니다. 달걀은 닭이 있어야 존재하고, 닭은 달걀에서 나옵니다. 서로 의존하며 시작점을 찾기 어렵습니다.
+
+하지만 과학적 관점에서 보면 조금 다른 답을 제시할 수 있습니다. 현대 생물학과 진화론을 살펴보면, 오늘날 우리가 아는 닭은 오랜 진화의 결과입니다. 닭은 조류의 한 종으로, 그 조상들은 수천만 년 동안 서서히 변화를 겪으며 현재의 형태를 갖추었습니다. 즉, 지금의 닭은 과거의 닭과 조금 다른 조상의 연속체 위에 서 있습니다.
+
+여기서 중요한 단서가 나옵니다. 현대 닭의 조상이 완전히 닭이 아닌 상태에서 낳은 알이 있었습니다. 바로 그 알에서 돌연변이나 유전적 변화가 일어나 오늘날 우리가 알고 있는 닭이 태어난 것입니다. 이 관점에서 보면, '닭이 낳은 달걀'이라는 기준으로 달걀을 정의한다면 달걀이 먼저입니다. 닭이 되기 위해 변화가 일어난 알이 있었고, 그 알에서 첫 번째 닭이 탄생했기 때문입니다.
+
+진화론적 답은 이렇지만, 철학적 논의도 여전히 유효합니다. 원인과 결과를 완전히 분리할 수 없다는 점에서, 순환적 사고를 요구합니다. 이 질문은 단순한 호기심을 넘어, 인과관계와 시간의 흐름, 생명의 시작에 대해 깊이 생각하게 만드는 주제입니다.
+
+또 다른 관점으로는 종교적 혹은 신화적 해석도 있습니다. 많은 문화권에서는 생명이 신에 의해 창조되었다고 믿습니다. 이러한 관점에서는 닭이 먼저 창조되었을 수 있습니다. 달걀은 닭이 있어야 존재할 수 있기 때문입니다. 과학적 증거와 달리, 신화적 관점은 인간의 직관과 신념을 반영합니다.
+
+오늘의 결론은 이렇게 정리할 수 있습니다. 철학적, 논리적, 신화적 관점에서 보면 순환적 질문입니다. 과학적, 진화론적 관점에서 보면, 닭이 되기 위한 유전적 변화가 일어난 달걀이 먼저였습니다. 즉, 질문의 답은 우리가 어떤 기준과 관점을 택하느냐에 따라 달라집니다.
+
+마지막으로, 이 논쟁이 우리에게 주는 의미를 생각해봅시다. 달걀과 닭의 순서를 따지는 것은 단순한 지적 호기심에 그치지 않습니다. 우리는 이 질문을 통해 생명의 본질, 변화의 과정, 원인과 결과, 그리고 우리의 사고 방식을 돌아볼 수 있습니다.
+
+오늘 제가 전달하고 싶은 메시지는 명확합니다. 때로는 답이 중요하지 않습니다. 중요한 것은 질문을 던지고, 다양한 관점에서 사고하고, 세상을 깊이 이해하려는 노력입니다. 달걀이 먼저인지 닭이 먼저인지에 대한 토론은 결국 인간의 호기심과 탐구 정신을 상징합니다.
+
+감사합니다.`
+    }
+};

styles.css

@@ -0,0 +1,1840 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+strong {
+    font-weight: normal;
+}
+
+/* ------------------------------
+   1. Font Import & Variable Setup
+------------------------------ */
+@font-face {
+  font-family: 'Euclid Circular B';
+  src: url('fonts/EuclidCircularB.woff2') format('woff2');
+  font-style: normal;
+  font-display: swap;
+}
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+:root {
+  --font-display: 'Euclid Circular B', sans-serif;
+  --font-body: 'Inter', sans-serif;
+  --font-mono: 'IBM Plex Mono', monospace;
+
+  --color-text-default: #161615;
+  --color-text-secondary: #5d5d5d;
+  /* Accent colors */
+  --accent-yellow: #FFFF00;
+  --accent-pink: #FF69B4;
+}
+
+/* ------------------------------
+   2. Base Typography (h1 ~ p)
+------------------------------ */
+h1 {
+  font-family: var(--font-display);
+  font-size: 4rem;
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+  color: var(--color-text-default);
+  font-weight: 400;
+}
+
+h2 {
+  font-family: var(--font-display);
+  font-size: 2.5rem;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+  color: var(--color-text-default);
+  font-weight: 400;
+}
+
+h3 {
+  font-family: var(--font-display);
+  font-size: clamp(1.5rem, 4vw, 2.3rem);
+  line-height: 125%;
+  letter-spacing: -0.035em;
+  font-weight: 300;
+}
+
+h4 {
+  font-family: var(--font-body);
+  font-size: 1.5rem;
+  line-height: 1.4;
+  color: var(--color-text-default);
+  font-weight: 400;
+}
+
+h5 {
+  font-family: var(--font-body);
+  font-size: 1.25rem;
+  line-height: 1.5;
+  color: var(--color-text-default);
+  font-weight: 400;
+}
+
+h6 {
+  font-family: var(--font-body);
+  font-size: 1.125rem;
+  line-height: 1.5;
+  color: var(--color-text-default);
+  font-weight: 400;
+}
+
+p {
+  font-family: var(--font-body);
+  font-size: 1rem;
+  line-height: 1.6;
+  color: var(--color-text-secondary);
+}
+
+html {
+  font-size: 16px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  max-width: 100%;
+  scroll-behavior: smooth;
+}
+
+@media (max-width: 1280px) {
+  html {
+    font-size: 15px;
+  }
+}
+
+@media (max-width: 768px) {
+  html {
+    font-size: 14px;
+  }
+}
+
+:root {
+  /* Dark Mode */
+  --dark-mode: true;
+
+  /* Primary */
+  --supertone_blue: #227cff;
+  --primary: var(--supertone_blue);
+  --primary-dark: #0849CC;
+  --primary-light: var(--supertone_blue);
+  --accent: var(--supertone_blue);
+
+  /* Secondary / Highlight */
+  --highlight: #f4fa7d;
+
+  /* Backgrounds */
+  --light: #000000;
+  --light-lighter: #1a1a1a;
+  --light-darker: #2a2a2a;
+
+  /* Text */
+  --text: #ffffff;
+  --text-secondary: #b0b0b0;
+  --text-muted: #888888;
+
+  /* Border */
+  --border: #444444;
+
+  /* Status / Semantic */
+  --success: #3FB950;
+
+  /* Gradients */
+  --gradient: linear-gradient(135deg, var(--supertone_blue) 0%, var(--supertone_blue) 100%);
+  --gradient-alt: linear-gradient(135deg, var(--supertone_blue) 0%, var(--supertone_blue) 100%);
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: var(--light);
+    color: var(--text);
+    line-height: 1.6;
+    overflow-x: hidden;
+    max-width: 100%;
+    position: relative;
+    font-weight: 300;
+}
+
+.container {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+@media (min-width: 1921px) {
+  .container {
+    max-width: none;
+  }
+  
+  /* Scale elements by 1.75x for large screens */
+  .demo-result-item.supertonic-result-item {
+    --result-title-size: calc(1rem * 1.75);
+  }
+  
+  .demo-result-item.supertonic-result-item .demo-result-title {
+    font-size: calc(1rem * 1.75);
+  }
+  
+  .demo-result-item.supertonic-result-item .demo-result-info .stat-value {
+    font-size: calc(1rem * 1.75);
+  }
+  
+  .demo-result-item.supertonic-result-item .demo-result-info .stat-label {
+    font-size: calc(0.7rem * 1.75);
+  }
+  
+  .demo-result-item.supertonic-result-item .demo-result-info .stat-value .stat-label.stat-suffix {
+    font-size: calc(0.7rem * 1.75);
+  }
+  
+  .demo-result-item.supertonic-result-item .custom-audio-player .time-display {
+    font-size: calc(1rem * 1.75);
+  }
+  
+  #play-pause-btn {
+    width: calc(40px * 1.75) !important;
+    height: calc(40px * 1.75) !important;
+  }
+  
+  #play-pause-btn svg {
+    width: calc(24px * 1.75) !important;
+    height: calc(24px * 1.75) !important;
+  }
+  
+  .demo-result-item {
+    padding: calc(1rem * 1.75) calc(1.5rem * 1.75) !important;
+  }
+  
+  .demo-download-btn svg {
+    width: calc(16px * 1.75) !important;
+    height: calc(16px * 1.75) !important;
+  }
+  
+  .demo-result-item.supertonic-result-item .demo-result-info .stat-value .stat-prefix {
+    left: calc(-2.3rem * 1.75);
+  }
+}
+
+@media (max-width: 1280px) {
+  .container {
+    max-width: 100%;
+    padding: 0 1.5rem;
+  }
+}
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.535rem;
+    padding: 0.8rem 2.1rem;
+    border-radius: 1rem;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    font-size: 1rem;
+    cursor: pointer;
+    border: 1px solid;
+    font-family: inherit;
+    line-height: 150%;
+    background: var(--light);
+}
+
+.btn-primary {
+    background: var(--gradient);
+    color: white;
+    border-color: transparent;
+    box-shadow: 0 4px 20px rgba(57, 121, 255, 0.3);
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 30px rgba(57, 121, 255, 0.5);
+}
+
+.btn-secondary {
+    background: rgba(242, 242, 242, 0);
+    color: var(--text);
+    width: 11rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.btn-secondary:hover {
+    border-color: var(--primary);
+    background: var(--light);
+    transform: translateY(-2px);
+}
+
+/* Text toggle style for btn-secondary buttons */
+.btn.btn-secondary.text-toggle {
+    background: none;
+    border: none;
+    padding: 0;
+    display: inline;
+    font-family: inherit;
+    border-radius: 0;
+    box-shadow: none;
+    transform: none;
+    gap: 0;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-decoration: none;
+    width: auto;
+    justify-content: initial;
+    align-items: initial;
+}
+
+/* Preset item styles (matching speaker-item) */
+.preset-item {
+    font-size: 1rem;
+    color: #999;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    padding: 0.25rem 0;
+    white-space: nowrap;
+}
+
+.preset-item:hover {
+    color: #ddd;
+}
+
+.preset-item.active {
+    color: var(--text);
+    opacity: 1;
+    text-decoration: underline;
+    text-decoration-style: solid;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 4px;
+}
+
+.preset-icon {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+}
+
+.preset-icon svg {
+    display: block;
+    fill: #ffffff !important;
+}
+
+.preset-icon svg rect {
+    fill: #ffffff !important;
+}
+
+.btn.btn-secondary.text-toggle:hover {
+    opacity: 0.7;
+    border-color: transparent;
+    background: transparent;
+    transform: none;
+}
+
+.btn.btn-secondary.text-toggle.active {
+    color: var(--supertone_blue);
+    text-decoration: underline;
+    text-decoration-style: wavy;
+    text-decoration-thickness: 1px;
+    text-decoration-color: var(--supertone_blue);
+    text-underline-offset: 4px;
+    border-color: transparent;
+    background: transparent;
+    font-weight: 400;
+}
+
+.btn.btn-secondary svg {
+    color: var(--text-secondary);
+}
+
+#presetButtonGroup #presetBookBtn {
+    display: none;
+}
+
+.stat {
+    text-align: center;
+    padding: 0 1.25rem 0 1.25rem;
+    flex-shrink: 0;
+    position: relative;
+}
+
+.stat-value {
+    font-size: 8rem;
+    color: var(--text);
+    margin-bottom: 0;
+    font-family: var(--font-display);
+    line-height: 150%;
+    letter-spacing: -0.04em;
+}
+
+.stat-label {
+    font-size: 1rem;
+    text-transform: none;
+    letter-spacing: normal;
+    line-height: 1.3125rem;
+    font-family: var(--font-body);
+    display: inline-flex;
+    align-items: center;
+}
+
+.stat-arrow {
+    margin-left: 0.25em;
+    display: inline-block;
+}
+
+/* Interactive TTS Demo Section */
+.interactive-demo {
+    padding: 3.0rem 0 0.5rem 0;
+}
+
+.demo-container {
+    margin: 0 auto;
+    background: none;
+    border-radius: 12px;
+    padding: 2.5rem 4.5rem 0;
+    box-shadow: none;
+}
+
+.demo-status-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.2rem 1rem;
+    background: rgba(255, 152, 0, 0.1);
+    border: 1px solid rgba(255, 152, 0, 0.3);
+    border-radius: 8px;
+    margin-bottom: 0rem;
+    min-height: 45px;
+    position: relative;
+    overflow: hidden;
+    --status-progress: 0%;
+    --status-progress-color: rgba(255, 152, 0, 0.2);
+    z-index: 0;
+}
+
+.demo-status-box::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    width: var(--status-progress, 0%);
+    background: var(--status-progress-color);
+    transition: width 0.4s ease;
+    z-index: 0;
+    pointer-events: none;
+}
+
+.demo-status-box > * {
+    position: relative;
+    z-index: 1;
+}
+
+.demo-status-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.demo-status-box.success {
+    background: rgba(63, 185, 80, 0.1);
+    border-color: rgba(63, 185, 80, 0.3);
+    font-family: 'IBM Plex Mono', monospace;
+    --status-progress-color: rgba(63, 185, 80, 0.2);
+}
+
+.demo-status-box.success .demo-status-text {
+    color: var(--success);
+}
+
+.demo-status-box.success * {
+    font-family: inherit;
+}
+
+.demo-status-text {
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 0.85rem;
+    font-weight: 400;
+}
+
+.demo-status-box.error {
+    background: rgba(239, 68, 68, 0.1);
+    border-color: rgba(239, 68, 68, 0.3);
+    --status-progress-color: rgba(239, 68, 68, 0.2);
+}
+
+.demo-status-box.error .demo-status-text {
+    color: #ef4444;
+}
+
+/* WASM Warning Banner - subtle persistent notification */
+.wasm-warning-banner {
+    padding: 0.5rem 1rem;
+    background: rgba(239, 68, 68, 0.08);
+    border: 1px solid rgba(239, 68, 68, 0.25);
+    border-radius: 6px;
+    font-family: var(--font-body);
+    font-size: 0.8rem;
+    color: #b91c1c;
+    margin-top: 0.5rem;
+    line-height: 1.4;
+}
+
+.demo-content {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+    margin-bottom: 2rem;
+}
+
+.demo-input-section,
+.demo-output-section {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-width: 0;
+}
+
+.demo-input-section {
+    height: 100%;
+    position: relative;
+    overflow: visible;
+}
+
+.demo-input-label {
+    display: none;
+}
+
+.demo-input-section label {
+    display: block;
+    color: var(--text);
+    font-size: 1.125rem;
+    margin: 0;
+}
+
+.demo-char-counter {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 1rem;
+    color: var(--text-muted);
+    justify-content: flex-end;
+}
+
+.demo-char-counter.error,
+.demo-char-counter.warning {
+    color: var(--text-muted);
+}
+
+.demo-char-counter.valid {
+    color: var(--text-muted);
+}
+
+.demo-char-warning {
+    color: #ef4444;
+    font-size: 1rem;
+    transition: all 0.2s ease;
+}
+
+#demoCharCount {
+    display: inline-block;
+    min-width: 1.5ch;
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+}
+
+.demo-char-counter.valid .demo-char-warning {
+    display: none;
+}
+
+.demo-input-section textarea,
+.demo-text-input-editable {
+    width: 100%;
+    padding: 0;
+    background: none;
+    border: none;
+    border-radius: 0;
+    position: relative;
+    color: var(--text);
+    font-size: 2rem;
+    font-weight: 400;
+    line-height: 1.2;
+    font-family: inherit;
+    resize: vertical;
+    overflow-y: auto;
+    transition: all 0.3s ease;
+    margin-bottom: 0;
+    min-height: 90px;
+    height: 330px;
+    max-height: none;
+    flex: 0 0 auto;
+    -webkit-text-decoration-skip-ink: none;
+    text-decoration-skip-ink: none;
+}
+
+/* Hide spellcheck underlines */
+.demo-text-input-editable::spelling-error,
+#demoTextInput::spelling-error {
+    text-decoration: none !important;
+    background: none !important;
+}
+
+#demoTextInput {
+    position: relative;
+    overflow-y: auto;
+    scrollbar-color: transparent transparent;
+    scrollbar-width: thin;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    transition: scrollbar-color 0.3s ease;
+}
+
+.demo-input-section::after {
+    content: '';
+    position: absolute;
+    left: -27px;
+    top: 0;
+    width: 4px;
+    height: var(--demo-text-input-height, 330px);
+    min-height: 90px;
+    background: var(--text);
+    pointer-events: none;
+    z-index: 10;
+}
+
+#demoTextInput.scrolling {
+    scrollbar-color: var(--light) transparent;
+}
+
+#demoTextInput::-webkit-scrollbar {
+    width: 10px;
+}
+
+#demoTextInput::-webkit-scrollbar-track {
+    background: transparent !important;
+    border: none;
+}
+
+#demoTextInput::-webkit-scrollbar-thumb {
+    background: transparent !important;
+    border-radius: 999px;
+    transition: background 0.3s ease;
+}
+
+#demoTextInput.scrolling::-webkit-scrollbar-thumb {
+    background: var(--light) !important;
+}
+
+#demoTextInput.scrolling::-webkit-scrollbar-thumb:hover {
+    background: var(--light-darker) !important;
+}
+
+.demo-input-section textarea:focus,
+.demo-text-input-editable:focus {
+    outline: none;
+    border-color: transparent;
+    background: none;
+}
+
+.demo-input-section textarea::placeholder {
+    color: var(--text-muted);
+}
+
+/* Placeholder for contenteditable */
+.demo-text-input-editable:empty:before {
+    content: attr(data-placeholder);
+    color: var(--text-muted);
+    pointer-events: none;
+}
+
+.demo-header-wrapper {
+    position: relative;
+    margin-bottom: 1rem;
+}
+
+.demo-header-icon {
+    position: absolute;
+    left: -27px;
+    top: 57%;
+    transform: translateY(-50%) scale(1.3);
+    transform-origin: center;
+    width: 20px;
+    height: 20px;
+}
+
+.demo-header {
+    font-family: var(--font-body);
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.6;
+    color: var(--text);
+    margin: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+    width: 100%;
+}
+
+.demo-header-text {
+    flex: 1;
+}
+
+.demo-header-links {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+.demo-header-bold {
+    font-weight: 600;
+    color: var(--text);
+}
+
+.highlight-multilingual {
+    color: var(--text);
+}
+
+.demo-header-link {
+    color: #ffffff;
+    text-decoration: underline;
+    text-decoration-style: solid;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 4px;
+    transition: opacity 0.2s ease;
+    text-decoration-skip-ink: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.demo-header-link:hover {
+    opacity: 0.8;
+}
+
+.demo-header-link-icon {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+
+.demo-controls {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+.demo-params-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr 2fr;
+    gap: 1rem;
+    align-items: flex-start;
+    margin: 1.5rem 0 1rem;
+}
+
+.demo-params-row .demo-param {
+    display: flex;
+    flex-direction: column;
+}
+
+.demo-params-row #demoGenerateBtn {
+    align-self: flex-end;
+    margin-top: 0;
+    grid-column: 3;
+}
+
+.demo-param {
+    display: flex;
+    flex-direction: column;
+}
+
+.demo-param-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.35rem;
+    gap: 1rem;
+    font-weight: 400;
+}
+
+.demo-param label {
+    font-size: 1rem;
+    color: var(--text);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 600;
+}
+
+.param-value {
+    font-size: 1rem;
+    color: var(--text);
+}
+
+.demo-params-row .param-value {
+    font-weight: 400;
+    color: #999;
+}
+
+.demo-param input[type="range"] {
+    width: 100%;
+    height: 18px;
+    background: transparent;
+    outline: none;
+    -webkit-appearance: none;
+    appearance: none;
+    cursor: pointer;
+    margin: 0;
+    padding: 0;
+}
+
+.demo-param input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    background: #000;
+    border: 1px solid #ffffff;
+    border-radius: 50%;
+    cursor: pointer;
+    margin-top: -7px;
+}
+
+.demo-param input[type="range"]::-webkit-slider-thumb:hover {
+    background: #000;
+    border: 1px solid #ffffff;
+}
+
+.demo-param input[type="range"]::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    background: #000;
+    border: 1px solid #ffffff;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.demo-param input[type="range"]::-moz-range-thumb:hover {
+    background: #000;
+    border: 1px solid #ffffff;
+}
+
+.demo-param input[type="range"]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 1px;
+    background: #999;
+    border: none;
+    border-radius: 0;
+}
+
+.demo-param input[type="range"]::-moz-range-track {
+    width: 100%;
+    height: 1px;
+    background: #999;
+    border: none;
+    border-radius: 0;
+}
+
+/* Reusable text toggle style */
+.text-toggle {
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-decoration: none;
+    background: none;
+    border: none;
+    padding: 0;
+    font-family: inherit;
+    font-weight: 400;
+}
+
+.text-toggle:hover {
+    opacity: 0.7;
+}
+
+.text-toggle.active {
+    color: var(--supertone_blue);
+    text-decoration: underline;
+    text-decoration-style: wavy;
+    text-decoration-thickness: 1px;
+    text-decoration-color: var(--supertone_blue);
+    text-underline-offset: 4px;
+}
+
+/* Speaker List Styles */
+.speaker-container {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 0.3rem;
+}
+
+.speaker-label {
+    font-size: 1rem;
+    color: var(--text);
+    font-weight: 400;
+    white-space: pre;
+    flex-shrink: 0;
+}
+
+.speaker-list {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    overflow-x: auto;
+}
+
+.speaker-item {
+    font-size: 1rem;
+    color: #999;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+}
+
+.speaker-separator {
+    color: #999;
+    font-size: 1rem;
+    pointer-events: none;
+    white-space: pre;
+}
+
+.speaker-item:hover {
+    color: #ddd;
+}
+
+.speaker-item.active {
+    color: var(--text);
+    opacity: 1;
+    text-decoration: underline;
+    text-decoration-style: solid;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 4px;
+}
+
+.speaker-item.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.auto-detect-text {
+    font-size: 1rem;
+    color: #999;
+    padding: 0.25rem 0;
+    white-space: nowrap;
+    text-decoration: underline;
+    text-decoration-style: solid;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 4px;
+}
+
+.language-info {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 0.3rem;
+    margin-top: 0.25rem;
+}
+
+.language-info .speaker-label {
+    margin-right: 0;
+}
+
+.speaker-item-create {
+    color: #ffffff;
+    opacity: 1;
+}
+
+.speaker-item-create:hover {
+    opacity: 0.8;
+    text-decoration: underline;
+    text-decoration-style: solid;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 4px;
+}
+
+/* Speaker Tooltip */
+.speaker-tooltip {
+    position: fixed;
+    display: none;
+    background: var(--text);
+    color: var(--light);
+    padding: 0.25rem 0.75rem;
+    border-radius: 4px;
+    font-size: 0.875rem;
+    line-height: 1.4;
+    white-space: nowrap;
+    z-index: 10000;
+    pointer-events: none;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* Coming Soon Modal */
+.coming-soon-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10000;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+}
+
+.coming-soon-modal.show {
+    display: flex;
+    animation: modalFadeIn 0.2s ease-out;
+}
+
+.coming-soon-modal-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+}
+
+.coming-soon-modal-content {
+    position: relative;
+    background: white;
+    border-radius: 0.75rem;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    max-width: 400px;
+    width: 100%;
+    overflow: hidden;
+    animation: modalSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.coming-soon-modal-header {
+    padding: 1.5rem 1.5rem 1rem;
+    text-align: center;
+    border-bottom: 1px solid var(--light-darker);
+}
+
+.coming-soon-modal-header h3 {
+    font-family: var(--font-display);
+    font-size: 1.25rem;
+    font-weight: 500;
+    color: var(--text);
+    margin: 0;
+}
+
+.coming-soon-modal-body {
+    padding: 1.5rem;
+    text-align: center;
+}
+
+.coming-soon-modal-body p {
+    font-family: var(--font-body);
+    font-size: 1rem;
+    color: var(--text-secondary);
+    margin: 0;
+    line-height: 1.6;
+}
+
+.coming-soon-modal-footer {
+    padding: 1rem 1.5rem 1.5rem;
+    display: flex;
+    justify-content: center;
+}
+
+.coming-soon-modal-btn {
+    padding: 0.75rem 2rem;
+    border-radius: 0.5rem;
+    font-family: var(--font-body);
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: none;
+    outline: none;
+    background: var(--supertone_blue);
+    color: white;
+}
+
+.coming-soon-modal-btn:hover {
+    background: var(--primary-dark);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(34, 124, 255, 0.3);
+}
+
+.coming-soon-modal-btn:active {
+    transform: translateY(0);
+}
+
+.demo-generate-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.875rem 1.5rem;
+    border: 1px solid var(--accent-yellow);
+    border-radius: 999px;
+    background: none;
+    font-size: 0.9375rem;
+    font-family: inherit;
+    cursor: pointer;
+    margin-top: 1.5rem;
+}
+
+#demoGenerateBtn {
+    color: var(--accent-yellow);
+    font-weight: 400;
+}
+
+#demoGenerateBtn img {
+    flex-shrink: 0;
+    transform: scale(1.3);
+    transform-origin: center;
+    filter: brightness(0) invert(90%) sepia(100%) saturate(1000%) hue-rotate(0deg);
+}
+
+.demo-generate-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.demo-results {
+    flex: 1;
+    background: var(--light-lighter);
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-width: 0;
+    overflow-x: hidden;
+    grid-column: 1 / -1;
+    font-family: var(--font-mono);
+    font-weight: 400;
+}
+
+#demoResults {
+    display: none;
+}
+
+.demo-placeholder {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    color: var(--text-muted);
+}
+
+.demo-placeholder-icon {
+    font-size: 2.5rem;
+    margin-bottom: 0.75rem;
+    opacity: 0.5;
+    animation: float 3s ease-in-out infinite;
+}
+
+.demo-placeholder.generating .demo-placeholder-icon {
+    animation: spin 2s linear infinite;
+}
+
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0px);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.demo-placeholder p {
+    font-size: 1rem;
+    color: var(--text-muted);
+    margin: 0;
+}
+
+.demo-result-item {
+    --result-progress: 0%;
+    --result-title-size: 1rem;
+    position: relative;
+    overflow: hidden;
+    z-index: 0;
+    display: grid;
+    grid-template-columns: 12% 40% auto;
+    column-gap: 2rem;
+    row-gap: 1rem;
+    align-items: center;
+    padding: 1rem 1.5rem;
+    background: #000;
+}
+
+.demo-result-item.supertonic-result-item {
+    background: #000;
+}
+
+body.comparison-mode .demo-result-item {
+    grid-template-columns: 23% 31% auto;
+}
+
+#demoResults > .demo-result-item + .demo-result-item {
+    border-top: 1px dashed #aaa;
+}
+
+.demo-result-item.supertonic-result-item::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: var(--result-progress, 0%);
+    height: 100%;
+    background: #1a1a1a;
+    pointer-events: none;
+    z-index: -1;
+    transition: width 0.1s ease;
+}
+
+.demo-result-title {
+    display: flex;
+    flex-direction: column;
+    gap: 0.1rem;
+    font-size: var(--result-title-size, 1rem);
+    line-height: 1.2;
+    grid-column: 1;
+    justify-content: center;
+    font-weight: 400;
+}
+
+.demo-result-title span {
+    font-weight: 400;
+}
+
+.demo-result-title .title-status {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    display: none;
+}
+
+.demo-result-title .title-status.status-success {
+    color: var(--success);
+}
+
+.demo-result-title .title-status.status-error {
+    color: #ef4444;
+}
+
+.demo-result-title .title-status.status-running {
+    color: var(--accent);
+}
+
+.demo-result-title .title-sub {
+    color: var(--text-secondary);
+}
+
+.demo-result-info {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-evenly;
+    align-self: stretch;
+    padding: 0;
+    margin: 0;
+    flex-wrap: wrap;
+    grid-column: 2;
+}
+
+.demo-result-info .stat {
+    text-align: center;
+    padding: 0;
+    flex-shrink: 0;
+    position: relative;
+}
+
+.demo-result-info .stat-value {
+    font-size: var(--result-title-size, 1rem);
+    color: var(--text);
+    margin-bottom: -0.2rem;
+    line-height: 150%;
+    letter-spacing: -0.04em;
+    font-weight: 400;
+    font-family: var(--font-mono);
+    position: relative;
+}
+
+.demo-result-info .stat-label {
+    color: var(--text-secondary);
+    font-size: 0.7rem;
+    text-transform: none;
+    letter-spacing: normal;
+    line-height: 1.3125rem;
+    font-weight: 400;
+    font-family: var(--font-mono);
+}
+
+.demo-result-info .stat-value .stat-label.stat-suffix {
+    margin-left: 0.1rem;
+    font-size: 0.7rem;
+    line-height: 1;
+}
+
+.demo-result-info .stat-value .stat-value-segment {
+    position: relative;
+    display: inline-block;
+}
+
+.demo-result-info .stat-value .stat-value-number {
+    display: inline-block;
+    transition: color 0.3s ease, transform 0.3s ease;
+}
+
+#demoResults.quote-mode .stat-value-number {
+    transition-duration: 0.1s;
+}
+
+.demo-result-info .stat-value .stat-prefix {
+    position: absolute;
+    top: 0.2rem;
+    left: -2.3rem;
+    transform: scale(0.8);
+    line-height: 1;
+}
+
+.demo-result-item audio {
+    width: 100%;
+    height: 48px;
+    border-radius: 8px;
+    margin-top: 0.5rem;
+}
+
+.demo-result-actions {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+    margin-left: auto;
+}
+
+.demo-download-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem;
+    background: transparent;
+    color: var(--text);
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: color 0.2s ease, transform 0.2s ease;
+}
+
+.demo-download-btn:hover {
+    color: #ffffff;
+    transform: scale(1.05);
+}
+
+.demo-download-btn svg {
+    width: 16px;
+    height: 16px;
+}
+
+.demo-error {
+    display: none;
+    padding: 0.75rem 1rem;
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid rgba(239, 68, 68, 0.3);
+    border-radius: 8px;
+    color: #ef4444;
+    font-size: 1rem;
+    line-height: 1.4;
+}
+
+.demo-error.active {
+    display: block;
+}
+
+/* ↓ 1440px 이하 */
+@media (max-width: 1440px) {
+    .container {
+        max-width: 1200px;
+        padding: 0 2rem;
+    }
+}
+
+/* ↓ 1280px 이하 */
+@media (max-width: 1280px) {
+    .container {
+        max-width: 1100px;
+        padding: 0 2rem;
+    }
+}
+
+/* ↓ 768px 이하 */
+@media (max-width: 768px) {
+    .container {
+        padding: 0 1.5rem;
+    }
+
+    .btn-secondary {
+        width: auto;
+        display: inline-block;
+    }
+
+    .btn {
+        justify-content: center;
+    }
+
+    /* Interactive Demo Responsive */
+    .interactive-demo {
+        padding: 3.0rem 0 0.5rem 0 !important;
+    }
+
+    .demo-container {
+        padding: 1rem;
+    }
+
+    .demo-content {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+
+    .demo-controls {
+        grid-template-columns: 1fr;
+        gap: 0.875rem;
+    }
+
+    .demo-params-row {
+        grid-template-columns: 1fr;
+        gap: 0.875rem;
+    }
+
+    .demo-params-row #demoGenerateBtn {
+        width: 100%;
+        align-self: stretch;
+    }
+
+    .demo-param-header {
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.5rem;
+        flex-wrap: nowrap;
+    }
+
+    .demo-status-box {
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 0.625rem 0.875rem;
+    }
+
+    .demo-status-content {
+        width: 100%;
+    }
+
+    .demo-results {
+        min-height: 200px;
+        padding: 0;
+        overflow-x: hidden;
+    }
+
+    .demo-output-section {
+        width: 100%;
+        min-width: 0;
+        overflow: hidden;
+    }
+
+    .demo-result-title {
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .demo-result-info {
+        gap: 0.75rem;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+    }
+
+    .demo-result-info .stat {
+        padding: 0;
+        flex: 1 1 calc(50% - 0.4rem);
+        min-width: 0;
+    }
+
+    .demo-result-info .stat:first-child {
+        flex-basis: 100%;
+    }
+
+    .demo-result-info .stat-value {
+        font-size: 1.5rem;
+    }
+
+    .demo-result-info .stat-label {
+        font-size: 0.7rem;
+    }
+
+    .demo-char-counter {
+        justify-content: flex-end;
+        text-align: right;
+        width: 100%;
+    }
+    
+    .stat-value {
+        font-size: 5rem;
+    }
+}
+
+/* Selection */
+::selection {
+    background: var(--primary);
+    color: white;
+}
+
+
+/* Custom Audio Player Styles */
+.custom-audio-player {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0;
+    background: none;
+    border-radius: 0;
+    margin-top: 0;
+    border: none;
+    font-weight: 400;
+    grid-column: 3;
+    width: 100%;
+    flex-wrap: wrap;
+}
+
+.player-btn {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: none;
+    background: #ddd;
+    color: var(--bg-dark);
+    font-size: 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+}
+
+.player-btn svg {
+    width: 24px;
+    height: 24px;
+    display: block;
+    pointer-events: none;
+    color: #000;
+}
+
+.player-btn:hover {
+    background: #ffffff;
+    transform: scale(1.05);
+}
+
+.player-btn:active {
+    transform: scale(0.95);
+}
+
+.demo-result-item.supertonic-result-item .player-btn:hover,
+.demo-result-item.supertonic-result-item .player-btn:focus-visible {
+    background: #ffffff;
+    color: #000;
+}
+
+.custom-audio-player .time-display {
+    font-size: 1rem;
+    color: var(--text-secondary);
+    font-weight: 400;
+    min-width: 42px;
+    text-align: center;
+    flex-shrink: 0;
+}
+
+.progress-container {
+    flex: 1;
+    cursor: pointer;
+    padding: 0.5rem 0;
+}
+
+.progress-bar {
+    width: 100%;
+    height: 6px;
+    background: #999;
+    border-radius: 3px;
+    overflow: hidden;
+    position: relative;
+}
+
+.progress-bar:hover {
+    height: 8px;
+    transition: height 0.2s ease;
+}
+
+.progress-fill {
+    width: 0%;
+    height: 100%;
+    background: #ffffff;
+    border-radius: 3px;
+    transition: width 0.1s linear;
+    position: relative;
+}
+
+.progress-fill::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 12px;
+    height: 12px;
+    background: #ffffff;
+    border-radius: 50%;
+    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.progress-container:hover .progress-fill::after {
+    opacity: 1;
+}
+
+.supertonic-result-item {
+    --provider-color: #ffffff;
+}
+
+#presetControlsRow {
+    display: flex;
+    gap: 0.4rem;
+    margin-top: 0.75rem;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    color: #000;
+}
+
+#presetButtonGroup {
+    display: flex;
+    gap: 0.7rem;
+    flex-wrap: wrap;
+}
+
+@media (max-width: 768px) {
+    .demo-result-item {
+        grid-template-columns: 1fr;
+        padding: 1rem 0;
+    }
+
+    .demo-result-title,
+    .demo-result-info,
+    .custom-audio-player {
+        grid-column: 1;
+    }
+
+    .custom-audio-player {
+        width: 100%;
+        padding: 0 1rem;
+    }
+
+    #demoTextInput {
+        height: 264.6px;
+        min-height: 90px;
+    }
+}
+
+/* Modal Animations */
+@keyframes modalFadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes modalSlideUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+/* Language Auto-Detection Toast */
+.language-toast {
+    position: fixed;
+    bottom: 2rem;
+    left: 50%;
+    transform: translateX(-50%) translateY(100px);
+    background: linear-gradient(135deg, rgba(30, 30, 30, 0.95), rgba(20, 20, 20, 0.98));
+    color: #fff;
+    padding: 0.875rem 1.5rem;
+    border-radius: 12px;
+    font-family: var(--font-body);
+    font-size: 0.9375rem;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
+    z-index: 10000;
+    opacity: 0;
+    visibility: hidden;
+    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), 
+                opacity 0.3s ease,
+                visibility 0.3s ease;
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+
+.language-toast.show {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(-50%) translateY(0);
+}
+
+.language-toast-icon {
+    font-size: 1.125rem;
+    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
+}
+
+.language-toast-message {
+    letter-spacing: -0.01em;
+}
+
+.language-toast-message strong {
+    font-weight: 600;
+    color: var(--accent-yellow);
+}
+
+@media (max-width: 572px) {
+    /* interactive-demo padding 상단 3rem -> 1rem */
+    .interactive-demo {
+        padding: 1rem 0 0.5rem 0 !important;
+    }
+    
+    /* 1. demo-header: Supertonic 2 이후 문장 줄바꿈, line-height 1.6 -> 1.2 */
+    .demo-header {
+        line-height: 1.2;
+    flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+    
+    .demo-header .demo-header-bold {
+        display: block;
+        margin-bottom: 0.25rem;
+    }
+    
+    .demo-header .demo-header-bold::after {
+        content: '';
+    }
+    
+    .demo-header-links {
+        align-self: flex-start;
+    }
+    
+    /* 번개 아이콘과 H2 상하정렬: 중앙 -> 상단 */
+    .demo-header-icon {
+        top: 0;
+        transform: translateY(0) scale(1.3);
+    }
+    
+    /* speaker-container, language-info의 레이블과 선택항목간 상하정렬: 중앙 -> 상단 */
+    .speaker-container {
+        align-items: flex-start;
+    }
+    
+    .language-info {
+        align-items: flex-start;
+        flex-wrap: nowrap; /* 레이블과 리스트는 같은 줄 유지 */
+    }
+    
+    /* 2. speaker-list, languageList 줄바꿈 - 한 항목씩 줄바꿈 */
+    .speaker-list {
+        flex-wrap: wrap;
+    }
+    
+    /* language-info 내부의 speaker-list도 동일하게 처리 */
+    .language-info .speaker-list {
+        flex-wrap: wrap;
+    }
+    
+    /* 3. demo-input-section 폭 대응, padding 제거 */
+    .demo-input-section {
+        width: 100%;
+        max-width: 100%;
+    }
+    
+    /* demo-input-section::after left -27px -> -17px */
+    .demo-input-section::after {
+        left: -17px;
+    }
+    
+    
+    /* 4. demo-params-row: param 1,2는 1열, Generate 버튼은 2열 */
+    .demo-params-row {
+        grid-template-columns: 1fr 1fr;
+        gap: 0.875rem;
+    }
+    
+    .demo-params-row .demo-param:nth-child(1),
+    .demo-params-row .demo-param:nth-child(2) {
+        grid-column: span 1;
+    }
+    
+    .demo-params-row #demoGenerateBtn {
+        grid-column: 1 / -1;
+        width: 100%;
+    }
+    
+    /* 5. demoResults 박스 폭 대응 */
+    .demo-results {
+    width: 100%;
+        max-width: 100%;
+    }
+    
+    #demoResults {
+    width: 100%;
+        max-width: 100%;
+    }
+}
+
+@media (max-width: 768px) {
+    .demo-char-counter.valid {
+        justify-content: flex-start;
+        text-align: left;
+    }
+    
+    .language-toast {
+        bottom: 1.5rem;
+        padding: 0.75rem 1.25rem;
+    font-size: 0.875rem;
+        max-width: calc(100vw - 2rem);
+    }
+}