Hugging Face's logo

Spaces:
Supertone
/
supertonic
Running

App Files Community
1
dbpq commited on
Commit
7dbbc09
·
verified ·
1 Parent(s): 9e06ee4

Upload 3 files

Browse files
Files changed (3) hide show
  1. img/index.html +933 -0
  2. img/script.js +0 -0
  3. img/styles.css +3811 -0
img/index.html ADDED
@@ -0,0 +1,933 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Supertonic - Lightning-Fast, On-Device TTS</title>
7
+ <meta name="description"
8
+ content="Supertonic - A lightweight, super-fast text-to-speech synthesis system with on-device capabilities. Multi-language support with ONNX Runtime.">
9
+ <link rel="stylesheet" href="styles.css">
10
+ <link rel="preconnect" href="https://fonts.googleapis.com">
11
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12
+ <link
13
+ href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
14
+ rel="stylesheet">
15
+ <link
16
+ 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"
17
+ rel="stylesheet">
18
+ <link rel="stylesheet"
19
+ href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
20
+
21
+ <!-- Import map for ES modules -->
22
+ <script type="importmap">
23
+ {
24
+ "imports": {
25
+ "onnxruntime-web": "https://cdn.jsdelivr.net/npm/onnxruntime-web@1.23.0/dist/ort.webgpu.min.mjs",
26
+ "fft.js": "https://esm.sh/fft.js@4.0.4"
27
+ }
28
+ }
29
+ </script>
30
+
31
+ <!-- Privacy-friendly analytics by Plausible -->
32
+ <script async src="https://plausible.io/js/pa-sinHiv4XIaXgFEvrm77a0.js"></script>
33
+ <script>
34
+ window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};
35
+ plausible.init()
36
+ </script>
37
+
38
+ </head>
39
+ <body>
40
+ <header class="header">
41
+ <img src="img/supertone.svg" alt="Supertone" class="header-logo">
42
+ </header>
43
+ <div id="lightning-bg" aria-hidden="true">
44
+ <svg class="hero-lightning" viewBox="0 0 855.4 868.1" xmlns="http://www.w3.org/2000/svg"
45
+ role="presentation" focusable="false">
46
+ <path
47
+ d="M581.9 -75.4 h0 c-29.7 71 -63.1 135.1 -107.2 212.4 l83.1 -12.5 c-73.7 130.8 -158.9 265 -254.7 381.2 l83.5 -12.6 C278.2 625.3 133.6 746.6 0.6 855.2 c214.7 -136.9 388.4 -279.3 556.2 -428.3 l-96.5 14.5 c138.8 -123.7 270.7 -264.7 395.1 -402.3 l-127.7 19.2 c41.1 -45.6 80 -90.3 116.9 -133.7 h-262.7 Z" />
48
+ </svg>
49
+ </div>
50
+ <!-- Side Navigation Dots -->
51
+ <nav class="side-nav">
52
+ <a href="#hero" class="nav-dot" data-tooltip="Home"></a>
53
+ <a href="#benchmark" class="nav-dot" data-tooltip="Model comparison"></a>
54
+ <a href="#demo" class="nav-dot" data-tooltip="Intro Video"></a>
55
+ <a href="#interactive-demo" class="nav-dot"
56
+ data-tooltip="Try It"></a>
57
+ <a href="#text-handling" class="nav-dot" data-tooltip="Text handling"></a>
58
+ <a href="#features" class="nav-dot" data-tooltip="Features"></a>
59
+ <a href="#languages" class="nav-dot" data-tooltip="Programming languages"></a>
60
+ <a href="#research" class="nav-dot" data-tooltip="Research"></a>
61
+ <a href="#business" class="nav-dot" data-tooltip="Business"></a>
62
+ </nav>
63
+
64
+ <!-- Hero Section -->
65
+ <section class="hero" id="hero">
66
+ <div class="container">
67
+ <div class="hero-content">
68
+ <h1 class="hero-title">
69
+ <span class="hero-title-text">Supertonic</span>
70
+ <img src="img/supertonic_wordmark.svg" alt="Supertonic" class="hero-wordmark">
71
+ </h1>
72
+ <div class="hero-headings">
73
+ <p class="hero-subtitle">
74
+ <img src="img/supertonic_symbol.svg" alt="" aria-hidden="true" class="hero-subtitle-icon">
75
+ <span>Lightning Fast, On-Device TTS.</span>
76
+ </p>
77
+ <p class="hero-description">
78
+ <span>Incredibly lightweight and blazingly fast,</span>
79
+ <span>running natively in your environment via ONNX.</span>
80
+ </p>
81
+ </div>
82
+ <div class="hero-buttons">
83
+ <a href="https://github.com/supertone-inc/supertonic/"
84
+ class="btn btn-secondary" target="_blank">
85
+ GitHub <span class="arrow">↗</span>
86
+ </a>
87
+ <a href="https://huggingface.co/Supertone/Supertonic"
88
+ class="btn btn-secondary" target="_blank">
89
+ Models <span class="arrow">↗</span>
90
+ </a>
91
+ <a href="https://supertone.ai/"
92
+ class="btn btn-secondary" id="btn-supertone" target="_blank">
93
+ Supertone <span class="arrow">↗</span>
94
+ </a>
95
+ </div>
96
+ <div class="hero-stats">
97
+ <div class="hero-stat">
98
+ <div class="hero-stat-label">Parameters</div>
99
+ <div class="hero-stat-value">66M</div>
100
+ </div>
101
+ <div class="hero-stat">
102
+ <div class="hero-stat-label">PROGRAMMING LANGUAGES</div>
103
+ <div class="hero-stat-value">8+</div>
104
+ </div>
105
+ <div class="hero-stat">
106
+ <div class="hero-stat-label">On-Device</div>
107
+ <div class="hero-stat-value">100%</div>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ <div class="hero-bg" aria-hidden="true"></div>
113
+ </section>
114
+
115
+ <!-- Benchmark Section -->
116
+ <section class="benchmark" id="benchmark">
117
+ <div class="container">
118
+ <div class="comparison-container">
119
+ <div class="comparison-header">
120
+ <div class="comparison-header-wrapper">
121
+ <div class="comparison-title-group">
122
+ <h2 class="section-title model-comparison">Model comparison</h2>
123
+ <h3 class="section-subtitle supertonic-is-faster-than-ever">A new standard in TTS speed</h3>
124
+ </div>
125
+ </div>
126
+ <img src="img/supertonic-cps.png" alt="Supertonic CPS" class="comparison-cps-image" />
127
+ </div>
128
+ <div class="comparison-content">
129
+ <div class="comparison-text">
130
+ <h3 class="section-subtitle comparison-subtitle">Characters per second</h3>
131
+ <p>Supertonic can process over 12,000 characters on high-end GPUs,<br>and up to about 2,500 characters on consumer laptops.</p>
132
+ </div>
133
+ <img src="img/supertonic-graph.png" alt="Supertonic Graph" style="max-width: 100%; display: block; margin: 0 auto;" />
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </section>
138
+
139
+ <!-- Demo Video Section -->
140
+ <section class="intro-video" id="demo">
141
+ <div class="container">
142
+ <h2 class="section-title">See It In Action</h2>
143
+ <h3 class="section-subtitle">Experience the speed and quality</h3>
144
+
145
+ <div class="video-container">
146
+ <iframe
147
+ src="https://www.youtube.com/embed/USdrptxgSnI"
148
+ title="YouTube video player"
149
+ frameborder="0"
150
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
151
+ referrerpolicy="strict-origin-when-cross-origin"
152
+ allowfullscreen>
153
+ </iframe>
154
+ </div>
155
+
156
+ <div class="demo-videos-grid">
157
+ <div class="demo-video-item">
158
+ <div class="video-container">
159
+ <iframe
160
+ src="https://www.youtube.com/embed/EbHrtSmfoiE"
161
+ title="YouTube video player"
162
+ frameborder="0"
163
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
164
+ referrerpolicy="strict-origin-when-cross-origin"
165
+ allowfullscreen>
166
+ </iframe>
167
+ </div>
168
+ <h3>Raspberry Pi</h3>
169
+ <p>Watch Supertonic running on a Raspberry Pi, demonstrating on-device, real-time text-to-speech synthesis</p>
170
+ </div>
171
+
172
+ <div class="demo-video-item">
173
+ <div class="video-container">
174
+ <iframe
175
+ src="https://www.youtube.com/embed/tP_ceNiPc7g"
176
+ title="YouTube video player"
177
+ frameborder="0"
178
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
179
+ referrerpolicy="strict-origin-when-cross-origin"
180
+ allowfullscreen>
181
+ </iframe>
182
+ </div>
183
+ <h3>E-Reader</h3>
184
+ <p>Experience Supertonic on an Onyx Boox Go 6 e-reader in airplane mode, achieving an average RTF of 0.3× with zero network dependency</p>
185
+ </div>
186
+ </div>
187
+
188
+ </div>
189
+ </section>
190
+
191
+ <!-- Interactive TTS Demo Section -->
192
+ <section class="interactive-demo" id="interactive-demo">
193
+ <div class="container">
194
+ <h2 class="section-title">Try It Yourself</h2>
195
+ <h3 class="section-subtitle">Generate speech directly in your browser</h3>
196
+
197
+ <div class="demo-container">
198
+ <div class="demo-content">
199
+ <!-- Title row for the two-column grid -->
200
+ <div class="demo-title-row">
201
+ <div class="demo-title-left">Text</div>
202
+ <div class="demo-title-center">
203
+ <img src="img/supertonic_lighteninggraphic.svg" alt="Lightning" class="lightning-icon">
204
+ </div>
205
+ <div class="demo-title-right">Speech</div>
206
+ </div>
207
+
208
+ <div class="demo-input-section">
209
+ <div class="demo-input-label">
210
+ <label for="demoTextInput">Enter text to
211
+ synthesize:</label>
212
+ </div>
213
+ <textarea
214
+ id="demoTextInput"
215
+ placeholder="Type any text here to convert it into speech... (minimum 10 characters)"
216
+ rows="3">This text-to-speech system runs entirely in your browser, providing fast and private operation without sending any data to external servers.</textarea>
217
+ <div id="presetControlsRow">
218
+ <div id="presetButtonGroup">
219
+ <span class="preset-icon" aria-hidden="true">
220
+ <svg viewBox="0 0 24 24" width="18" height="18" focusable="false">
221
+ <rect x="4" y="6" width="14" height="2" fill="#000"/>
222
+ <rect x="4" y="10" width="10" height="2" fill="#000"/>
223
+ <rect x="4" y="14" width="14" height="2" fill="#000"/>
224
+ <rect x="4" y="18" width="10" height="2" fill="#000"/>
225
+ </svg>
226
+ </span>
227
+ <button class="btn btn-secondary text-toggle" data-preset="quote" id="presetQuoteBtn">Quote</button>
228
+ <button class="btn btn-secondary text-toggle" data-preset="paragraph" id="presetParagraphBtn">Paragraph</button>
229
+ <button class="btn btn-secondary text-toggle" data-preset="fullstory" id="presetFullStoryBtn">Full story</button>
230
+ <button class="btn btn-secondary text-toggle" data-preset="book" id="presetBookBtn">Book</button>
231
+ <button class="btn btn-secondary text-toggle" data-preset="freeform" id="freeformBtn">Freeform</button>
232
+ </div>
233
+ <span class="demo-char-counter" id="demoCharCounter">
234
+ <span id="demoCharCount">126</span> characters
235
+ <span class="demo-char-status" id="demoCharStatus">✓</span>
236
+ </span>
237
+ </div>
238
+ </div>
239
+
240
+ <div class="demo-output-section">
241
+ <!-- Controls at the top of the right pane -->
242
+ <div class="demo-controls">
243
+ <div class="demo-param">
244
+ <div class="demo-param-header">
245
+ <label>
246
+ Voice:
247
+ </label>
248
+ <div class="voice-toggle-container">
249
+ <span class="voice-toggle-text active" data-voice="F">Female</span>
250
+ <span class="voice-toggle-text" data-voice="M">Male</span>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ <div class="demo-param">
255
+ <div class="demo-param-header">
256
+ <label for="demoTotalSteps">
257
+ Quality (Steps): <span class="param-value" id="demoTotalStepsValue">5</span>
258
+ </label>
259
+ <span class="param-hint">Higher = Better quality, slower inference</span>
260
+ </div>
261
+ <input type="range" id="demoTotalSteps" value="5" min="2" max="16" step="1">
262
+ </div>
263
+ <div class="demo-param">
264
+ <div class="demo-param-header">
265
+ <label for="demoDurationFactor">
266
+ Speech Length: <span class="param-value" id="demoDurationFactorValue">1</span>
267
+ </label>
268
+ <span class="param-hint">Higher = Longer speech duration</span>
269
+ </div>
270
+ <input type="range" id="demoDurationFactor" value="1.0" min="0.75" max="1.1" step="0.05">
271
+ </div>
272
+ </div>
273
+
274
+ <div class="demo-param-header">
275
+ <label class="demo-api-keys-label">
276
+ <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
277
+ <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
278
+ <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
279
+ </svg>
280
+ API Keys
281
+ </label>
282
+ <span class="param-hint">Optional for performance comparison</span>
283
+ </div>
284
+ <div class="demo-elevenlabs-config">
285
+ <input type="password" id="demoElevenLabsApiKey" placeholder="ElevenLabs Flash v2.5">
286
+ <input type="password" id="demoSecondaryApiKey" placeholder="OpenAI TTS-1">
287
+ <input type="password" id="demoTertiaryApiKey" placeholder="Gemini 2.5 Flash TTS">
288
+ </div>
289
+
290
+ <button id="demoGenerateBtn" class="demo-generate-btn" disabled>
291
+ <img src="img/supertonic_lighteninggraphic.svg" alt="Generate" width="20" height="20" />
292
+ <span class="text">Generate Speech</span>
293
+ <span class="shimmer" aria-hidden="true"></span>
294
+ </button>
295
+ </div>
296
+ <div id="demoResults" class="demo-results">
297
+ <div class="demo-placeholder">
298
+ <div class="demo-placeholder-icon">🎙️</div>
299
+ <p>Your generated speech will appear here</p>
300
+ </div>
301
+ </div>
302
+ </div>
303
+
304
+ <!-- Performance Comparison Table -->
305
+ <div id="demoComparisonSection" class="demo-comparison-section" style="display: none;">
306
+ <h3 class="demo-comparison-title">⚡ Performance Comparison</h3>
307
+ <div class="demo-comparison-table">
308
+ <div class="demo-comparison-header">
309
+ <div class="demo-comparison-cell">System</div>
310
+ <div class="demo-comparison-cell">Status</div>
311
+ <div class="demo-comparison-cell">Processing Time</div>
312
+ <div class="demo-comparison-cell">Audio Duration</div>
313
+ <div class="demo-comparison-cell">RTF (Real-Time Factor)</div>
314
+ </div>
315
+ <div class="demo-comparison-row supertonic-row">
316
+ <div class="demo-comparison-cell">
317
+ <strong>Supertonic</strong>
318
+ <span class="system-badge supertonic">On-Device</span>
319
+ </div>
320
+ <div class="demo-comparison-cell" id="supertonicStatus">⏳ Running...</div>
321
+ <div class="demo-comparison-cell" id="supertonicTime">-</div>
322
+ <div class="demo-comparison-cell" id="supertonicDuration">-</div>
323
+ <div class="demo-comparison-cell" id="supertonicRTF">-</div>
324
+ </div>
325
+ <div class="demo-comparison-row elevenlabs-row">
326
+ <div class="demo-comparison-cell">
327
+ <strong>ElevenLabs Flash v2.5</strong>
328
+ <span class="system-badge elevenlabs">Cloud API</span>
329
+ </div>
330
+ <div class="demo-comparison-cell" id="elevenlabsStatus">⏳ Running...</div>
331
+ <div class="demo-comparison-cell" id="elevenlabsTime">-</div>
332
+ <div class="demo-comparison-cell" id="elevenlabsDuration">-</div>
333
+ <div class="demo-comparison-cell" id="elevenlabsRTF">-</div>
334
+ </div>
335
+ <div class="demo-comparison-row openai-row">
336
+ <div class="demo-comparison-cell">
337
+ <strong>OpenAI TTS-1</strong>
338
+ <span class="system-badge openai">Cloud API</span>
339
+ </div>
340
+ <div class="demo-comparison-cell" id="openaiStatus">⏳ Running...</div>
341
+ <div class="demo-comparison-cell" id="openaiTime">-</div>
342
+ <div class="demo-comparison-cell" id="openaiDuration">-</div>
343
+ <div class="demo-comparison-cell" id="openaiRTF">-</div>
344
+ </div>
345
+ <div class="demo-comparison-row gemini-row">
346
+ <div class="demo-comparison-cell">
347
+ <strong>Gemini 2.5 Flash TTS</strong>
348
+ <span class="system-badge gemini">Cloud API</span>
349
+ </div>
350
+ <div class="demo-comparison-cell" id="geminiStatus">⏳ Running...</div>
351
+ <div class="demo-comparison-cell" id="geminiTime">-</div>
352
+ <div class="demo-comparison-cell" id="geminiDuration">-</div>
353
+ <div class="demo-comparison-cell" id="geminiRTF">-</div>
354
+ </div>
355
+ </div>
356
+ </div>
357
+
358
+ <!-- Moved below content: status box and info banner -->
359
+ <div class="demo-status-box" id="demoStatusBox">
360
+ <div class="demo-status-content">
361
+ <div class="demo-status-text" id="demoStatusText">
362
+ <strong>Initializing...</strong> Loading models...
363
+ </div>
364
+ </div>
365
+ <div class="demo-backend-badge" id="demoBackendBadge">Loading</div>
366
+ </div>
367
+
368
+ <div id="demoError" class="demo-error"></div>
369
+ </div>
370
+
371
+ <div class="transformers-container">
372
+ <img src="img/hugging_supertonic.svg" alt="Hugging Face Supertonic" class="transformers-logo">
373
+ <p>
374
+ Supertonic is now fully supported in <a href="https://huggingface.co/docs/transformers.js/en/index" target="_blank" rel="noopener noreferrer">Transformers.js</a> 🤗!<br>
375
+ It uses a quantized ONNX version of Supertonic for faster inference.
376
+ </p>
377
+ <div class="transformers-buttons">
378
+ <a href="https://huggingface.co/spaces/webml-community/Supertonic-TTS-WebGPU" class="btn btn-secondary" target="_blank" rel="noopener noreferrer">
379
+ <span class="btn-label">Try it out</span>
380
+ <span class="arrow">↗</span>
381
+ </a>
382
+ </div>
383
+ </div>
384
+ </div>
385
+ </section>
386
+
387
+ <!-- Natural Text Handling Section -->
388
+ <section class="text-handling" id="text-handling">
389
+ <div class="container">
390
+ <h2 class="section-title">Text handling</h2>
391
+ <h3 class="section-subtitle">Handles text like humans</h3>
392
+
393
+ <div class="features-grid text-handling-grid">
394
+ <article class="feature-card text-handling-card" data-card="financial">
395
+ <div class="text-handling-card-body">
396
+ <div class="text-handling-top">
397
+ <div>
398
+ <h3 class="text-handling-label">Financial Expressions</h3>
399
+ <p class="text-handling-desc">Currency symbols, codes, and abbreviations (M, K, $)</p>
400
+ </div>
401
+ <button class="text-handling-player" type="button" aria-pressed="false" aria-label="Play Financial Expressions sample"></button>
402
+ </div>
403
+ <div class="text-handling-buttons" role="group" aria-label="System selection">
404
+ <button type="button" class="provider-option" data-provider="Supertone" aria-pressed="false">
405
+ <img src="img/icon-provider-supertonic.svg" alt="" aria-hidden="true" class="provider-option-icon">
406
+ <span>Supertone</span>
407
+ </button>
408
+ <button type="button" class="provider-option" data-provider="ElevenLabs" aria-pressed="false">
409
+ <img src="img/icon-provider-elevenlabs.svg" alt="" aria-hidden="true" class="provider-option-icon">
410
+ <span>ElevenLabs</span>
411
+ </button>
412
+ <button type="button" class="provider-option" data-provider="OpenAI" aria-pressed="false">
413
+ <img src="img/icon-provider-openai.svg" alt="" aria-hidden="true" class="provider-option-icon">
414
+ <span>OpenAI</span>
415
+ </button>
416
+ <button type="button" class="provider-option" data-provider="Gemini" aria-pressed="false">
417
+ <img src="img/icon-provider-gemini.png" alt="" aria-hidden="true" class="provider-option-icon">
418
+ <span>Gemini</span>
419
+ </button>
420
+ <button type="button" class="provider-option" data-provider="Microsoft" aria-pressed="false">
421
+ <img src="img/icon-provider-microsoft.svg" alt="" aria-hidden="true" class="provider-option-icon">
422
+ <span>Microsoft</span>
423
+ </button>
424
+ </div>
425
+ <p class="text-handling-sample">
426
+ The startup secured <span class="text-highlight">$5.2M</span> in venture capital,<br>
427
+ a huge leap from their initial <span class="text-highlight">$450K</span> seed round.
428
+ </p>
429
+ <div class="text-handling-footer">
430
+ <div class="text-model">
431
+ <img src="img/icon-provideo-model.svg" alt="" aria-hidden="true" class="text-model-icon">
432
+ <span class="text-model-label">Supertonic</span>
433
+ </div>
434
+ </div>
435
+ </div>
436
+ </article>
437
+
438
+ <article class="feature-card text-handling-card" data-card="time-date">
439
+ <div class="text-handling-card-body">
440
+ <div class="text-handling-top">
441
+ <div>
442
+ <h3 class="text-handling-label">Time and Date</h3>
443
+ <p class="text-handling-desc">Time and date formats, abbreviated weekdays/months</p>
444
+ </div>
445
+ <button class="text-handling-player" type="button" aria-pressed="false" aria-label="Play Time and Date sample"></button>
446
+ </div>
447
+ <div class="text-handling-buttons" role="group" aria-label="System selection">
448
+ <button type="button" class="provider-option" data-provider="Supertone" aria-pressed="false">
449
+ <img src="img/icon-provider-supertonic.svg" alt="" aria-hidden="true" class="provider-option-icon">
450
+ <span>Supertone</span>
451
+ </button>
452
+ <button type="button" class="provider-option" data-provider="ElevenLabs" aria-pressed="false">
453
+ <img src="img/icon-provider-elevenlabs.svg" alt="" aria-hidden="true" class="provider-option-icon">
454
+ <span>ElevenLabs</span>
455
+ </button>
456
+ <button type="button" class="provider-option" data-provider="OpenAI" aria-pressed="false">
457
+ <img src="img/icon-provider-openai.svg" alt="" aria-hidden="true" class="provider-option-icon">
458
+ <span>OpenAI</span>
459
+ </button>
460
+ <button type="button" class="provider-option" data-provider="Gemini" aria-pressed="false">
461
+ <img src="img/icon-provider-gemini.png" alt="" aria-hidden="true" class="provider-option-icon">
462
+ <span>Gemini</span>
463
+ </button>
464
+ <button type="button" class="provider-option" data-provider="Microsoft" aria-pressed="false">
465
+ <img src="img/icon-provider-microsoft.svg" alt="" aria-hidden="true" class="provider-option-icon">
466
+ <span>Microsoft</span>
467
+ </button>
468
+ </div>
469
+ <p class="text-handling-sample">
470
+ The train delay was announced at <span class="text-highlight">4:45 PM</span> on
471
+ <span class="text-highlight">Wed, Apr 3, 2024</span> due to track maintenance.
472
+ </p>
473
+ <div class="text-handling-footer">
474
+ <div class="text-model">
475
+ <img src="img/icon-provideo-model.svg" alt="" aria-hidden="true" class="text-model-icon">
476
+ <span class="text-model-label">Supertonic</span>
477
+ </div>
478
+ </div>
479
+ </div>
480
+ </article>
481
+
482
+ <article class="feature-card text-handling-card" data-card="phone-number">
483
+ <div class="text-handling-card-body">
484
+ <div class="text-handling-top">
485
+ <div>
486
+ <h3 class="text-handling-label">Phone Numbers</h3>
487
+ <p class="text-handling-desc">Area codes, hyphens, extensions (ext.)</p>
488
+ </div>
489
+ <button class="text-handling-player" type="button" aria-pressed="false" aria-label="Play Phone Numbers sample"></button>
490
+ </div>
491
+ <div class="text-handling-buttons" role="group" aria-label="System selection">
492
+ <button type="button" class="provider-option" data-provider="Supertone" aria-pressed="false">
493
+ <img src="img/icon-provider-supertonic.svg" alt="" aria-hidden="true" class="provider-option-icon">
494
+ <span>Supertone</span>
495
+ </button>
496
+ <button type="button" class="provider-option" data-provider="ElevenLabs" aria-pressed="false">
497
+ <img src="img/icon-provider-elevenlabs.svg" alt="" aria-hidden="true" class="provider-option-icon">
498
+ <span>ElevenLabs</span>
499
+ </button>
500
+ <button type="button" class="provider-option" data-provider="OpenAI" aria-pressed="false">
501
+ <img src="img/icon-provider-openai.svg" alt="" aria-hidden="true" class="provider-option-icon">
502
+ <span>OpenAI</span>
503
+ </button>
504
+ <button type="button" class="provider-option" data-provider="Gemini" aria-pressed="false">
505
+ <img src="img/icon-provider-gemini.png" alt="" aria-hidden="true" class="provider-option-icon">
506
+ <span>Gemini</span>
507
+ </button>
508
+ <button type="button" class="provider-option" data-provider="Microsoft" aria-pressed="false">
509
+ <img src="img/icon-provider-microsoft.svg" alt="" aria-hidden="true" class="provider-option-icon">
510
+ <span>Microsoft</span>
511
+ </button>
512
+ </div>
513
+ <p class="text-handling-sample">
514
+ You can reach the hotel front desk at <span class="text-highlight">(212) 555-0142 ext. 402</span> anytime.
515
+ </p>
516
+ <div class="text-handling-footer">
517
+ <div class="text-model">
518
+ <img src="img/icon-provideo-model.svg" alt="" aria-hidden="true" class="text-model-icon">
519
+ <span class="text-model-label">Supertonic</span>
520
+ </div>
521
+ </div>
522
+ </div>
523
+ </article>
524
+
525
+ <article class="feature-card text-handling-card" data-card="technical-unit">
526
+ <div class="text-handling-card-body">
527
+ <div class="text-handling-top">
528
+ <div>
529
+ <h3 class="text-handling-label">Technical Units</h3>
530
+ <p class="text-handling-desc">Numbers with units, abbreviated technical notations</p>
531
+ </div>
532
+ <button class="text-handling-player" type="button" aria-pressed="false" aria-label="Play Technical Units sample"></button>
533
+ </div>
534
+ <div class="text-handling-buttons" role="group" aria-label="System selection">
535
+ <button type="button" class="provider-option" data-provider="Supertone" aria-pressed="false">
536
+ <img src="img/icon-provider-supertonic.svg" alt="" aria-hidden="true" class="provider-option-icon">
537
+ <span>Supertone</span>
538
+ </button>
539
+ <button type="button" class="provider-option" data-provider="ElevenLabs" aria-pressed="false">
540
+ <img src="img/icon-provider-elevenlabs.svg" alt="" aria-hidden="true" class="provider-option-icon">
541
+ <span>ElevenLabs</span>
542
+ </button>
543
+ <button type="button" class="provider-option" data-provider="OpenAI" aria-pressed="false">
544
+ <img src="img/icon-provider-openai.svg" alt="" aria-hidden="true" class="provider-option-icon">
545
+ <span>OpenAI</span>
546
+ </button>
547
+ <button type="button" class="provider-option" data-provider="Gemini" aria-pressed="false">
548
+ <img src="img/icon-provider-gemini.png" alt="" aria-hidden="true" class="provider-option-icon">
549
+ <span>Gemini</span>
550
+ </button>
551
+ <button type="button" class="provider-option" data-provider="Microsoft" aria-pressed="false">
552
+ <img src="img/icon-provider-microsoft.svg" alt="" aria-hidden="true" class="provider-option-icon">
553
+ <span>Microsoft</span>
554
+ </button>
555
+ </div>
556
+ <p class="text-handling-sample">
557
+ Our drone battery lasts <span class="text-highlight">2.3h</span> when flying at
558
+ <span class="text-highlight">30kph</span> with full camera payload.
559
+ </p>
560
+ <div class="text-handling-footer">
561
+ <div class="text-model">
562
+ <img src="img/icon-provideo-model.svg" alt="" aria-hidden="true" class="text-model-icon">
563
+ <span class="text-model-label">Supertonic</span>
564
+ </div>
565
+ </div>
566
+ </div>
567
+ </article>
568
+ </div>
569
+ </div>
570
+ </section>
571
+
572
+ <!-- Features Section -->
573
+ <section class="features" id="features">
574
+ <div class="container">
575
+ <h2 class="section-title">Why Supertonic?</h2>
576
+ <h3 class="section-subtitle">Performance by design</h3>
577
+
578
+ <div class="features-grid">
579
+ <div class="feature-card">
580
+ <div class="feature-icon">
581
+ <img src="img/spec0.svg" alt="">
582
+ </div>
583
+ <h3>Blazingly Fast</h3>
584
+ <p>Optimized ONNX Runtime inference delivers speech
585
+ synthesis at unprecedented speeds. No more
586
+ waiting.</p>
587
+ </div>
588
+
589
+ <div class="feature-card">
590
+ <div class="feature-icon">
591
+ <img src="img/spec1.svg" alt="">
592
+ </div>
593
+ <h3>Ultra Lightweight</h3>
594
+ <p>Minimal footprint means it runs smoothly on any
595
+ device - from servers to embedded systems.</p>
596
+ </div>
597
+
598
+ <div class="feature-card">
599
+ <div class="feature-icon">
600
+ <img src="img/spec2.svg" alt="">
601
+ </div>
602
+ <h3>On-Device Capable</h3>
603
+ <p>Complete privacy and zero latency. All
604
+ processing
605
+ happens locally - no cloud dependencies.</p>
606
+ </div>
607
+
608
+ <div class="feature-card">
609
+ <div class="feature-icon">
610
+ <img src="img/spec3.svg" alt="">
611
+ </div>
612
+ <h3>Natural Text Handling</h3>
613
+ <p>Seamlessly processes numbers, dates, currency, abbreviations, and complex expressions without pre-processing.</p>
614
+ </div>
615
+
616
+ <div class="feature-card">
617
+ <div class="feature-icon">
618
+ <img src="img/spec4.svg" alt="">
619
+ </div>
620
+ <h3>Highly Configurable</h3>
621
+ <p>Adjust inference steps, batch processing, and
622
+ other parameters to match your specific needs.</p>
623
+ </div>
624
+
625
+ <div class="feature-card">
626
+ <div class="feature-icon">
627
+ <img src="img/spec5.svg" alt="">
628
+ </div>
629
+ <h3>Flexible Deployment</h3>
630
+ <p>Deploy seamlessly across servers, browsers, and edge
631
+ devices with multiple runtime backends.</p>
632
+ </div>
633
+ </div>
634
+ </div>
635
+ </section>
636
+
637
+ <!-- Language Support Section -->
638
+ <section class="languages" id="languages">
639
+ <div class="container">
640
+ <div class="languages-layout">
641
+ <div class="languages-text-section">
642
+ <div class="languages-header">
643
+ <h2 class="section-title">Programming Languages</h2>
644
+ <h3 class="languages-subtitle">Fast setup,<br>instant execution.<br><br>Experience Supertonic in your favorite language.</h3>
645
+ </div>
646
+ </div>
647
+ <div class="languages-placeholder">
648
+ <div class="languages-code-card">
649
+ <div class="languages-tablist" role="tablist"
650
+ aria-label="Programming language code snippets">
651
+ <button class="language-option active" type="button"
652
+ data-language="python" role="tab" aria-selected="true"
653
+ tabindex="0">
654
+ <img class="component-2" src="img/lang_1.svg"
655
+ alt="Python logo">
656
+ <span class="language-label">Python</span>
657
+ </button>
658
+ <button class="language-option" type="button"
659
+ data-language="javascript" role="tab" aria-selected="false"
660
+ tabindex="-1">
661
+ <img class="component-2" src="img/lang_2.svg"
662
+ alt="" aria-hidden="true">
663
+ <span class="language-label">JavaScript</span>
664
+ </button>
665
+ <button class="language-option" type="button"
666
+ data-language="java" role="tab" aria-selected="false"
667
+ tabindex="-1">
668
+ <img class="component-2" src="img/lang_3.svg"
669
+ alt="" aria-hidden="true">
670
+ <span class="language-label">Java</span>
671
+ </button>
672
+ <button class="language-option" type="button"
673
+ data-language="cpp" role="tab" aria-selected="false"
674
+ tabindex="-1">
675
+ <img class="component-2" src="img/lang_4.svg"
676
+ alt="" aria-hidden="true">
677
+ <span class="language-label">C++</span>
678
+ </button>
679
+ <button class="language-option" type="button"
680
+ data-language="csharp" role="tab" aria-selected="false"
681
+ tabindex="-1">
682
+ <img class="component-2" src="img/lang_8.svg"
683
+ alt="" aria-hidden="true">
684
+ <span class="language-label">C#</span>
685
+ </button>
686
+ <button class="language-option" type="button"
687
+ data-language="go" role="tab" aria-selected="false"
688
+ tabindex="-1">
689
+ <img class="component-2" src="img/lang_5.svg"
690
+ alt="" aria-hidden="true">
691
+ <span class="language-label">Go</span>
692
+ </button>
693
+ <button class="language-option" type="button"
694
+ data-language="swift" role="tab" aria-selected="false"
695
+ tabindex="-1">
696
+ <img class="component-2" src="img/lang_6.svg"
697
+ alt="" aria-hidden="true">
698
+ <span class="language-label">Swift</span>
699
+ </button>
700
+ <button class="language-option" type="button"
701
+ data-language="rust" role="tab" aria-selected="false"
702
+ tabindex="-1">
703
+ <img class="component-2" src="img/lang_7.svg"
704
+ alt="" aria-hidden="true">
705
+ <span class="language-label">Rust</span>
706
+ </button>
707
+ </div>
708
+ <div class="languages-code-body">
709
+ <pre class="code-snippet" data-language-snippet aria-live="polite"></pre>
710
+ <button type="button" class="code-copy-btn" aria-label="Copy code snippet">
711
+ <img src="img/btn_cv.svg" alt="">
712
+ </button>
713
+ <div class="code-copy-toast" role="status" aria-live="polite"></div>
714
+ </div>
715
+ </div>
716
+ </div>
717
+ <div class="languages-icons-container">
718
+ <div class="languages-icons-grid">
719
+ <button type="button" class="language-icon component-22 active"
720
+ data-language="python" aria-label="Python" aria-pressed="true">
721
+ <img class="lang_btn" src="img/lang_1.svg" alt="">
722
+ </button>
723
+ <button type="button" class="language-icon component-3"
724
+ data-language="javascript" aria-label="JavaScript"
725
+ aria-pressed="false">
726
+ <img class="lang_btn" src="img/lang_2.svg" alt="" aria-hidden="true">
727
+ </button>
728
+ <button type="button" class="language-icon component-4"
729
+ data-language="java" aria-label="Java" aria-pressed="false">
730
+ <img class="lang_btn" src="img/lang_3.svg" alt="" aria-hidden="true">
731
+ </button>
732
+ <button type="button" class="language-icon component-5"
733
+ data-language="cpp" aria-label="C++" aria-pressed="false">
734
+ <img class="lang_btn" src="img/lang_4.svg" alt="">
735
+ </button>
736
+ <button type="button" class="language-icon component-6"
737
+ data-language="csharp" aria-label="C#" aria-pressed="false">
738
+ <img class="text-model" src="img/lang_8.svg" alt="">
739
+ </button>
740
+ <button type="button" class="language-icon component-7"
741
+ data-language="go" aria-label="Go" aria-pressed="false">
742
+ <img class="lang_btn" src="img/lang_5.svg" alt="">
743
+ </button>
744
+ <button type="button" class="language-icon component-8"
745
+ data-language="swift" aria-label="Swift" aria-pressed="false">
746
+ <img class="lang_btn" src="img/lang_6.svg" alt="">
747
+ </button>
748
+ <button type="button" class="language-icon component-9"
749
+ data-language="rust" aria-label="Rust" aria-pressed="false">
750
+ <img class="lang_btn" src="img/lang_7.svg" alt="">
751
+ </button>
752
+ </div>
753
+ </div>
754
+ </div>
755
+ </div>
756
+ </section>
757
+
758
+ <!-- Research Papers Section -->
759
+ <section class="research-papers" id="research">
760
+ <div class="container">
761
+ <h2 class="section-title">Research & Innovation</h2>
762
+ <h3 class="section-subtitle">Built on our cutting-edge research</h3>
763
+
764
+ <div class="papers-grid">
765
+ <a class="paper-card" href="https://arxiv.org/abs/2503.23108"
766
+ target="_blank" rel="noopener">
767
+ <h3>SupertonicTTS: Towards Highly Efficient and
768
+ Streamlined Text-to-Speech System</h3>
769
+ <p class="paper-authors">Hyeongju Kim, Jinhyeok Yang,
770
+ Yechan Yu, Seunghun Ji, Jacob Morton, Frederik Bous,
771
+ Joon Byun, Juheon Lee</p>
772
+ <p class="paper-description">
773
+ Presents <span class="paper-highlight">SupertonicTTS</span>, a highly
774
+ efficient TTS framework built on flow-matching and
775
+ ConvNeXt blocks. Features context-sharing batch
776
+ expansion,
777
+ character-level processing, and cross-attention
778
+ alignment without the need for external G2P
779
+ modules or aligners.
780
+ </p>
781
+ <span class="paper-link">
782
+ <span class="link-text">Read Paper</span><span class="arrow">↗</span>
783
+ </span>
784
+ </a>
785
+
786
+ <a class="paper-card" href="https://arxiv.org/abs/2509.11084"
787
+ target="_blank" rel="noopener">
788
+ <h3>Length-Aware Rotary Position Embedding for
789
+ Text-Speech Alignment</h3>
790
+ <p class="paper-authors">Hyeongju Kim, Juheon Lee,
791
+ Jinhyeok Yang, Jacob Morton</p>
792
+ <p class="paper-description">
793
+ Introduces <span class="paper-highlight">LARoPE</span>, an improved
794
+ position embedding method that enables faster
795
+ convergence,
796
+ more accurate alignment, and better stability in
797
+ extended speech generation up to 30 seconds.
798
+ Achieves state-of-the-art word error rate on
799
+ zero-shot TTS benchmarks.
800
+ </p>
801
+ <span class="paper-link">
802
+ <span class="link-text">Read Paper</span><span class="arrow">↗</span>
803
+ </span>
804
+ </a>
805
+
806
+ <a class="paper-card" href="https://arxiv.org/abs/2509.19091"
807
+ target="_blank" rel="noopener">
808
+ <h3>Training Flow Matching Models with Reliable Labels
809
+ via Self-Purification</h3>
810
+ <p class="paper-authors">Hyeongju Kim, Yechan Yu, June
811
+ Young Yi, Juheon Lee</p>
812
+ <p class="paper-description">
813
+ Proposes <span class="paper-highlight">Self-Purifying Flow Matching
814
+ (SPFM)</span>, a principled approach to handle
815
+ noisy training data.
816
+ Identifies unreliable samples during training
817
+ without pretrained models, ensuring accurate
818
+ conditioning
819
+ even with label contamination.
820
+ </p>
821
+ <span class="paper-link">
822
+ <span class="link-text">Read Paper</span><span class="arrow">↗</span>
823
+ </span>
824
+ </a>
825
+ </div>
826
+ </div>
827
+ </section>
828
+
829
+ <!-- Business Inquiry Section -->
830
+ <section class="business-inquiry" id="business">
831
+ <div class="container">
832
+ <div class="business-content">
833
+ <div class="business-text">
834
+ <h2>
835
+ <span style="display:block;">On-Device SDK Solutions</span>
836
+ <span style="display:block;">for Your Business</span>
837
+ </h2>
838
+ <h6 class="business-subheadline">
839
+ Looking to integrate Supertonic into your product?<br>
840
+ We offer customized on-device SDK solutions tailored to your business needs. Our lightweight, high-performance TTS technology can be seamlessly integrated into mobile apps, IoT devices, automotive systems, and more.
841
+ </h6>
842
+ <div class="business-buttons">
843
+ <a href="mailto:contact@supertone.ai"
844
+ class="btn btn-secondary" id="btn-contact" target="_blank">
845
+ <span class="btn-label">Contact</span>
846
+ <span class="arrow">↗</span>
847
+ </a>
848
+ </div>
849
+ </div>
850
+ </div>
851
+ </div>
852
+ </section>
853
+
854
+ <!-- Footer -->
855
+ <footer class="footer">
856
+ <div class="container">
857
+ <div class="footer-content">
858
+ <img src="img/logo.svg" alt="Supertonic logo" class="footer-logo">
859
+ <div class="footer-text">
860
+ <p>
861
+ Developed by <a href="https://www.supertone.ai/"
862
+ target="_blank" rel="noopener">Supertone</a> ·
863
+ &copy; 2025 Supertone Inc.
864
+ </p>
865
+ <div class="footer-links">
866
+ <a href="https://github.com/supertone-inc/supertonic/"
867
+ target="_blank">GitHub</a>
868
+ <a href="https://huggingface.co/Supertone/Supertonic"
869
+ target="_blank">Models</a>
870
+ <a href="https://www.supertone.ai/"
871
+ target="_blank" rel="noopener">Supertone</a>
872
+ <a href="mailto:contact@supertone.ai" target="_blank">Contact</a>
873
+ </div>
874
+ </div>
875
+ </div>
876
+ </div>
877
+ </footer>
878
+
879
+ <svg class="lightning-filters" width="0" height="0" aria-hidden="true" focusable="false">
880
+ <filter id="lightning-flicker-filter">
881
+ <feColorMatrix type="matrix"
882
+ values="0 0 0 0 1
883
+ 0 0 0 0 1
884
+ 0 0 0 0 1
885
+ 0 0 0 1 0"></feColorMatrix>
886
+ </filter>
887
+ <filter id="lightning-flash-filter">
888
+ <feColorMatrix type="matrix"
889
+ values="0 0 0 0 1
890
+ 0 0 0 0 1
891
+ 0 0 0 0 1
892
+ 0 0 0 1 0"></feColorMatrix>
893
+ </filter>
894
+ </svg>
895
+
896
+ <!-- Billing Confirmation Modal -->
897
+ <div id="billingModal" class="billing-modal">
898
+ <div class="billing-modal-overlay"></div>
899
+ <div class="billing-modal-content">
900
+ <div class="billing-modal-header">
901
+ <svg class="billing-modal-icon" width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
902
+ <path d="M12 2L1 21h22L12 2z" fill="currentColor"/>
903
+ <path d="M12 9.5v5M12 17.5h.01" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
904
+ <circle cx="12" cy="17.5" r="1" fill="#fff"/>
905
+ </svg>
906
+ <h3 class="billing-modal-title">Confirm API Usage</h3>
907
+ </div>
908
+ <div class="billing-modal-body">
909
+ <p class="billing-modal-message" id="billingModalMessage"></p>
910
+ <div class="billing-modal-details">
911
+ <div class="billing-detail-item">
912
+ <span class="billing-detail-label">Characters:</span>
913
+ <span class="billing-detail-value" id="billingCharCount">0</span>
914
+ </div>
915
+ <div class="billing-detail-item">
916
+ <span class="billing-detail-label">TTS Model:</span>
917
+ <span class="billing-detail-value" id="billingProviders"></span>
918
+ </div>
919
+ </div>
920
+ <p class="billing-modal-warning">⚠️ You will be charged by each API provider according to their respective pricing policies.</p>
921
+ </div>
922
+ <div class="billing-modal-footer">
923
+ <button class="billing-modal-btn billing-modal-btn-cancel" id="billingModalCancel">Cancel</button>
924
+ <button class="billing-modal-btn billing-modal-btn-confirm" id="billingModalConfirm">Proceed</button>
925
+ </div>
926
+ </div>
927
+ </div>
928
+
929
+ <script src="preset-texts.js"></script>
930
+ <script type="module" src="script.js"></script>
931
+
932
+ </body>
933
+ </html>
img/script.js ADDED
The diff for this file is too large to render. See raw diff
 
img/styles.css ADDED
@@ -0,0 +1,3811 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .btn .arrow {
2
+ display: inline-block;
3
+ transform: translateY(-0.25em);
4
+ }
5
+ * {
6
+ margin: 0;
7
+ padding: 0;
8
+ box-sizing: border-box;
9
+ }
10
+
11
+ strong {
12
+ font-weight: normal;
13
+ }
14
+
15
+ /* ------------------------------
16
+ 1. Font Import & Variable Setup
17
+ ------------------------------ */
18
+ @font-face {
19
+ font-family: 'Euclid Circular B';
20
+ src: url('fonts/EuclidCircularB.woff2') format('woff2');
21
+ font-style: normal;
22
+ font-display: swap;
23
+ }
24
+
25
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
26
+
27
+ :root {
28
+ --font-display: 'Euclid Circular B', sans-serif;
29
+ --font-body: 'Inter', sans-serif;
30
+ --font-mono: 'IBM Plex Mono', monospace;
31
+
32
+ --color-text-default: #161615;
33
+ --color-text-secondary: #5d5d5d;
34
+ --brand-elevenlabs: #777;
35
+ --brand-openai: #52a584;
36
+ --brand-gemini: #724fd5;
37
+ }
38
+
39
+ /* Text handling player icon masks */
40
+ :root {
41
+ --text-player-play-mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gIDxjaXJjbGUgY3g9IjI0IiBjeT0iMjQiIHI9IjIzIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIvPiAgPHBhdGggZD0iTTE5IDE0Ljc1TDM0IDI0TDE5IDMzLjI1WiIgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=");
42
+ --text-player-pause-mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gIDxjaXJjbGUgY3g9IjI0IiBjeT0iMjQiIHI9IjIzIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIvPiAgPHJlY3QgeD0iMTciIHk9IjE1IiB3aWR0aD0iNiIgaGVpZ2h0PSIxOCIgcng9IjIiIGZpbGw9IiNmZmZmZmYiLz4gIDxyZWN0IHg9IjI1IiB5PSIxNSIgd2lkdGg9IjYiIGhlaWdodD0iMTgiIHJ4PSIyIiBmaWxsPSIjZmZmZmZmIi8+PC9zdmc+");
43
+ }
44
+
45
+ /* ------------------------------
46
+ 2. Base Typography (h1 ~ p)
47
+ ------------------------------ */
48
+ h1 {
49
+ font-family: var(--font-display);
50
+ font-size: 4rem; /* 64px */
51
+ line-height: 1.2;
52
+ letter-spacing: -0.01em;
53
+ color: var(--color-text-default);
54
+ font-weight: 400;
55
+ }
56
+
57
+ h2 {
58
+ font-family: var(--font-display);
59
+ font-size: 2.5rem; /* 40px */
60
+ line-height: 1.3;
61
+ letter-spacing: -0.01em;
62
+ color: var(--color-text-default);
63
+ font-weight: 400;
64
+ }
65
+
66
+ h3 {
67
+ font-family: var(--font-display);
68
+ font-size: clamp(1.5rem, 4vw, 2.3rem);
69
+ line-height: 125%;
70
+ letter-spacing: -0.035em;
71
+ font-weight: 300;
72
+ }
73
+
74
+ h4 {
75
+ font-family: var(--font-body);
76
+ font-size: 1.5rem; /* 24px */
77
+ line-height: 1.4;
78
+ color: var(--color-text-default);
79
+ font-weight: 400;
80
+ }
81
+
82
+ h5 {
83
+ font-family: var(--font-body);
84
+ font-size: 1.25rem; /* 20px */
85
+ line-height: 1.5;
86
+ color: var(--color-text-default);
87
+ font-weight: 400;
88
+ }
89
+
90
+ h6 {
91
+ font-family: var(--font-body);
92
+ font-size: 1.125rem; /* 18px */
93
+ line-height: 1.5;
94
+ color: var(--color-text-default);
95
+ font-weight: 400;
96
+ }
97
+
98
+ p {
99
+ font-family: var(--font-body);
100
+ font-size: 1rem; /* 16px */
101
+ line-height: 1.6;
102
+ color: var(--color-text-secondary);
103
+ }
104
+
105
+ html {
106
+ font-size: 16px; /* 기본 1rem = 16px */
107
+ overflow-x: hidden;
108
+ max-width: 100vw;
109
+ }
110
+
111
+ @media (max-width: 1280px) {
112
+ html {
113
+ font-size: 15px; /* 1rem = 15px */
114
+ }
115
+ }
116
+
117
+ @media (max-width: 768px) {
118
+ html {
119
+ font-size: 14px; /* 1rem = 14px */
120
+ }
121
+ }
122
+
123
+ :root {
124
+ /* Primary */
125
+ --supertone_blue: #227cff;
126
+ --primary: var(--supertone_blue); /* 기본 블루 */
127
+ --primary-dark: #0849CC; /* 호버 시 블루 */
128
+ --primary-light: var(--supertone_blue); /* 밝은 블루 */
129
+ --accent: var(--supertone_blue); /* 강조 블루 (서브 액센트) */
130
+
131
+ /* Secondary / Highlight */
132
+ --highlight: #f4fa7d; /* 하이라이트 옐로우 (포인트 색) */
133
+
134
+ /* Backgrounds */
135
+ --light: #f2f2f2; /* 전체 배경 */
136
+ --light-lighter: rgba(249, 249, 249, 1); /* 카드/섹션 배경 */
137
+ --light-darker: #e6e6e6; /* 구분선/테두리 배경 */
138
+
139
+ /* Text */
140
+ --text: #161615; /* 주요 텍스트 */
141
+ --text-secondary: #5d5d5d; /* 보조 텍스트 */
142
+ --text-muted: #888888; /* 보조 텍스트 */
143
+
144
+ /* Border */
145
+ --border: #cccccc; /* 기본 테두리 */
146
+
147
+ /* Status / Semantic */
148
+ --success: #3FB950;
149
+
150
+ /* Gradients */
151
+ --gradient: linear-gradient(135deg, var(--supertone_blue) 0%, var(--supertone_blue) 100%);
152
+ --gradient-alt: linear-gradient(135deg, var(--supertone_blue) 0%, var(--supertone_blue) 100%);
153
+ }
154
+ :root {
155
+ --demo-generate-glow-hue: 52deg;
156
+ --demo-generate-shadow-hue: 48deg;
157
+ --demo-generate-spring-easing: linear(
158
+ 0, 0.002, 0.01 0.9%, 0.038 1.8%, 0.156, 0.312 5.8%, 0.789 11.1%, 1.015 14.2%,
159
+ 1.096, 1.157, 1.199, 1.224 20.3%, 1.231, 1.231, 1.226, 1.214 24.6%,
160
+ 1.176 26.9%, 1.057 32.6%, 1.007 35.5%, 0.984, 0.968, 0.956, 0.949 42%,
161
+ 0.946 44.1%, 0.95 46.5%, 0.998 57.2%, 1.007, 1.011 63.3%, 1.012 68.3%,
162
+ 0.998 84%, 1
163
+ );
164
+ --demo-generate-spring-duration: 1.33s;
165
+ --demo-generate-inset: 40px;
166
+ }
167
+ body {
168
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
169
+ background: var(--light);
170
+ color: var(--text);
171
+ line-height: 1.6;
172
+ overflow-x: hidden;
173
+ max-width: 100vw;
174
+ position: relative;
175
+ font-weight: 300;
176
+ --lightning-scroll: 0px;
177
+ --lightning-filter: none;
178
+ }
179
+
180
+ .header {
181
+ position: absolute;
182
+ top: 0;
183
+ left: 0;
184
+ right: 0;
185
+ z-index: 1000;
186
+ padding: 1.5rem 2rem;
187
+ pointer-events: none;
188
+ }
189
+
190
+ .header a {
191
+ display: inline-block;
192
+ pointer-events: auto;
193
+ }
194
+
195
+ .header-logo {
196
+ height: 2rem;
197
+ width: auto;
198
+ display: block;
199
+ }
200
+
201
+ .hero {
202
+ position: relative;
203
+ min-height: 100vh;
204
+ display: flex;
205
+ align-items: center;
206
+ justify-content: center;
207
+ overflow: visible;
208
+ padding: 12rem 0 4rem;
209
+ /* cursor: pointer; */
210
+ z-index: 0;
211
+ }
212
+
213
+ body.lightning-flicker {
214
+ --lightning-filter: url('#lightning-flicker-filter');
215
+ }
216
+
217
+ body.lightning-flash {
218
+ background: #ffffff;
219
+ --lightning-filter: url('#lightning-flash-filter');
220
+ }
221
+
222
+ /* Side Navigation Dots */
223
+ .side-nav {
224
+ position: fixed;
225
+ right: 2rem;
226
+ top: 50%;
227
+ transform: translateY(-50%);
228
+ z-index: 1000;
229
+ display: flex;
230
+ flex-direction: column;
231
+ gap: 1rem;
232
+ }
233
+
234
+ .nav-dot {
235
+ width: 8px;
236
+ height: 8px;
237
+ border-radius: 50%;
238
+ background: var(--border);
239
+ border: none;
240
+ position: relative;
241
+ cursor: pointer;
242
+ transition: background 0.3s ease;
243
+ }
244
+
245
+ .nav-dot::before {
246
+ content: "";
247
+ position: absolute;
248
+ top: -8px;
249
+ left: -8px;
250
+ width: 24px;
251
+ height: 24px;
252
+ border-radius: 50%;
253
+ pointer-events: auto;
254
+ }
255
+
256
+ .nav-dot::after {
257
+ content: attr(data-tooltip);
258
+ position: absolute;
259
+ right: 25px;
260
+ top: 50%;
261
+ transform: translateY(-50%);
262
+ background: none;
263
+ color: var(--text);
264
+ padding: 0.5rem 1rem;
265
+ border-radius: 8px;
266
+ font-size: 0.875rem;
267
+ white-space: nowrap;
268
+ opacity: 0;
269
+ pointer-events: none;
270
+ transition: opacity 0.3s ease;
271
+ border: 1px solid var(--border);
272
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
273
+ }
274
+
275
+ .nav-dot:hover::after {
276
+ opacity: 1;
277
+ }
278
+
279
+ .nav-dot:hover {
280
+ background: var(--primary);
281
+ }
282
+
283
+ .nav-dot.active {
284
+ background: var(--primary);
285
+ }
286
+
287
+ .container {
288
+ max-width: 1280px;
289
+ margin: 0 auto;
290
+ padding: 0 2rem;
291
+ }
292
+
293
+ @media (max-width: 1280px) {
294
+ .container {
295
+ max-width: 100%;
296
+ padding: 0 1.5rem;
297
+ }
298
+ }
299
+
300
+ /* Hero Section */
301
+ .hero {
302
+ position: relative;
303
+ min-height: 100vh;
304
+ display: flex;
305
+ align-items: center;
306
+ justify-content: center;
307
+ overflow: visible;
308
+ padding: 12rem 0 4rem;
309
+ }
310
+ .hero-headings {
311
+ display: grid;
312
+ grid-template-columns: 1.25fr 1fr;
313
+ gap: 2rem;
314
+ align-items: center;
315
+ width: 100%;
316
+ max-width: 1200px;
317
+ margin: 4rem auto 4rem;
318
+ }
319
+ .hero-bg {
320
+ position: absolute;
321
+ inset: 0;
322
+ pointer-events: none;
323
+ z-index: 0;
324
+ overflow: visible;
325
+ }
326
+
327
+ #lightning-bg {
328
+ position: absolute;
329
+ inset: 0;
330
+ z-index: -2;
331
+ pointer-events: none;
332
+ }
333
+
334
+ #lightning-bg .hero-lightning {
335
+ position: absolute;
336
+ top: 0;
337
+ left: 3%;
338
+ width: 100vw;
339
+ height: auto;
340
+ color: #ffff05;
341
+ pointer-events: none;
342
+ /* Removed CSS variable-based transform for direct scroll response */
343
+ /* transform: translateY(calc(var(--lightning-scroll) * -0.45)) scale(0.76); */
344
+ /* transform: translateY(calc(var(--lightning-scroll) * -1)) scale(0.76); */
345
+ transform: scale(0.76);
346
+ transform-origin: top left;
347
+ will-change: transform;
348
+ filter: var(--lightning-filter, none);
349
+ z-index: -2;
350
+ }
351
+
352
+ #lightning-bg .hero-lightning path {
353
+ fill: currentColor;
354
+ }
355
+
356
+ .hero {
357
+ position: relative;
358
+ min-height: 100vh;
359
+ display: flex;
360
+ align-items: center;
361
+ justify-content: center;
362
+ overflow: visible;
363
+ padding: 12rem 0 4rem;
364
+ }
365
+
366
+ #lightning-bg svg {
367
+ width: 100vw;
368
+ height: auto;
369
+ }
370
+
371
+ .hero-content {
372
+ position: relative;
373
+ z-index: 1;
374
+ text-align: center;
375
+ max-width: none;
376
+ width: 100%;
377
+ margin: 0 auto;
378
+ }
379
+
380
+ .badge {
381
+ display: inline-block;
382
+ padding: 0.5rem 1.5rem;
383
+ background: rgba(10, 91, 255, 0.15);
384
+ border: 1px solid rgba(10, 91, 255, 0.5);
385
+ border-radius: 50px;
386
+ color: var(--accent);
387
+ font-size: 0.875rem;
388
+ letter-spacing: 0.05em;
389
+ text-transform: uppercase;
390
+ margin-bottom: 2rem;
391
+ animation: fadeInDown 0.6s ease-out;
392
+ }
393
+ .hero-title {
394
+ margin-bottom: 1.5rem;
395
+ display: flex;
396
+ justify-content: center;
397
+ align-items: center;
398
+ position: relative;
399
+ }
400
+
401
+ .hero-title-text {
402
+ position: absolute;
403
+ width: 1px;
404
+ height: 1px;
405
+ padding: 0;
406
+ margin: -1px;
407
+ overflow: hidden;
408
+ clip: rect(0 0 0 0);
409
+ white-space: nowrap;
410
+ border: 0;
411
+ }
412
+
413
+ .hero-wordmark {
414
+ width: 97%;
415
+ height: auto;
416
+ }
417
+
418
+ .hero-subtitle {
419
+ font-family: 'Euclid Circular B', sans-serif;
420
+ font-size: clamp(1.75rem, 4vw, 2.5rem);
421
+ line-height: 105%;
422
+ letter-spacing: -0.035em;
423
+ margin: 0;
424
+ text-align: left;
425
+ color: #000000;
426
+ animation: fadeInUp 0.6s ease-out 0.2s both;
427
+ display: inline-flex;
428
+ align-items: center;
429
+ gap: 0.75rem;
430
+ justify-content: flex-start;
431
+ }
432
+
433
+ .hero-subtitle-icon {
434
+ width: clamp(2.5rem, 5vw, 3.5rem);
435
+ height: auto;
436
+ flex-shrink: 0;
437
+ }
438
+
439
+ .gradient-text {
440
+ background: linear-gradient(135deg, #0A5BFF 0%, #4D8AFF 50%, #58A6FF 100%);
441
+ -webkit-background-clip: text;
442
+ -webkit-text-fill-color: transparent;
443
+ background-clip: text;
444
+ background-size: 200% auto;
445
+ animation: gradientShift 3s ease infinite;
446
+ }
447
+
448
+ @keyframes gradientShift {
449
+ 0%, 100% { background-position: 0% 50%; }
450
+ 50% { background-position: 100% 50%; }
451
+ }
452
+
453
+
454
+ .hero-description {
455
+ font-family: 'Euclid Circular B', sans-serif;
456
+ font-size: 1.4rem;
457
+ color: #000000;
458
+ line-height: 130%;
459
+ letter-spacing: -0.02em;
460
+ text-align: left;
461
+ margin: 0;
462
+ animation: fadeInUp 0.6s ease-out 0.4s both;
463
+ }
464
+
465
+ .hero-description span {
466
+ display: block;
467
+ }
468
+
469
+ .hero-buttons,
470
+ .business-buttons {
471
+ display: flex;
472
+ gap: 1.5rem;
473
+ justify-content: center;
474
+ flex-wrap: wrap;
475
+ margin-bottom: 6rem;
476
+ animation: fadeInUp 0.6s ease-out 0.5s both;
477
+ }
478
+
479
+ .hero-buttons a svg,
480
+ .hero-buttons a img {
481
+ display: none;
482
+ }
483
+
484
+ .business-buttons {
485
+ width: 100%;
486
+ margin-top: 2rem;
487
+ }
488
+
489
+ .btn {
490
+ display: inline-flex;
491
+ align-items: center;
492
+ gap: 0.535rem;
493
+ padding: 0.8rem 2.1rem;
494
+ border-radius: 1rem;
495
+ text-decoration: none;
496
+ transition: all 0.3s ease;
497
+ font-size: 1rem;
498
+ cursor: pointer;
499
+ border: 0.0625rem solid;
500
+ border: 1px solid;
501
+ font-family: inherit;
502
+ line-height: 150%;
503
+ background: var(--light);
504
+ }
505
+
506
+ .btn-primary {
507
+ background: var(--gradient);
508
+ color: white;
509
+ border-color: transparent;
510
+ box-shadow: 0 4px 20px rgba(57, 121, 255, 0.3);
511
+ }
512
+
513
+ .btn-primary:hover {
514
+ transform: translateY(-2px);
515
+ box-shadow: 0 6px 30px rgba(57, 121, 255, 0.5);
516
+ }
517
+
518
+ .btn-secondary {
519
+ background: rgba(242, 242, 242, 0);
520
+ color: var(--text);
521
+ width: 11rem;
522
+ display: flex;
523
+ justify-content: center;
524
+ align-items: center;
525
+ }
526
+
527
+ .btn-secondary:hover {
528
+ border-color: var(--primary);
529
+ background: var(--light);
530
+ transform: translateY(-2px);
531
+ }
532
+
533
+ /* Text toggle style for btn-secondary buttons */
534
+ .btn.btn-secondary.text-toggle {
535
+ background: none;
536
+ border: none;
537
+ padding: 0;
538
+ display: inline;
539
+ font-family: inherit;
540
+ border-radius: 0;
541
+ box-shadow: none;
542
+ transform: none;
543
+ gap: 0;
544
+ font-size: 0.875rem;
545
+ cursor: pointer;
546
+ transition: all 0.3s ease;
547
+ text-decoration: none;
548
+ width: auto;
549
+ justify-content: initial;
550
+ align-items: initial;
551
+ }
552
+
553
+ .preset-icon {
554
+ display: inline-flex;
555
+ align-items: center;
556
+ vertical-align: middle;
557
+ }
558
+
559
+ .preset-icon svg {
560
+ display: block;
561
+ }
562
+
563
+
564
+ .btn.btn-secondary.text-toggle:hover {
565
+ opacity: 0.7;
566
+ border-color: transparent;
567
+ background: transparent;
568
+ transform: none;
569
+ }
570
+
571
+ .btn.btn-secondary.text-toggle.active {
572
+ color: var(--supertone_blue);
573
+ text-decoration: underline;
574
+ text-decoration-style: wavy;
575
+ text-decoration-thickness: 1px;
576
+ text-decoration-color: var(--supertone_blue);
577
+ text-underline-offset: 4px;
578
+ border-color: transparent;
579
+ background: transparent;
580
+ font-weight: 400;
581
+ }
582
+
583
+ .btn.btn-secondary svg {
584
+ color: var(--text-secondary);
585
+ }
586
+
587
+ #presetButtonGroup #presetBookBtn {
588
+ display: none;
589
+ }
590
+
591
+ .hero-stats {
592
+ display: flex;
593
+ flex-direction: row;
594
+ align-items: flex-start;
595
+ justify-content: space-between;
596
+ align-self: stretch;
597
+ flex-wrap: wrap;
598
+ animation: fadeInUp 0.6s ease-out 0.6s both;
599
+ }
600
+
601
+ .hero-stat {
602
+ text-align: left;
603
+ padding: 0 1.25rem;
604
+ flex-shrink: 0;
605
+ position: relative;
606
+ display: flex;
607
+ flex-direction: column;
608
+ align-items: flex-start;
609
+ }
610
+
611
+ .hero-stat-value {
612
+ font-size: 8rem;
613
+ color: var(--text);
614
+ margin: 0;
615
+ font-family: var(--font-display);
616
+ line-height: 1;
617
+ letter-spacing: -0.04em;
618
+ }
619
+
620
+ .hero-stat-label {
621
+ font-size: 0.875rem;
622
+ text-transform: uppercase;
623
+ letter-spacing: normal;
624
+ line-height: 1.3125rem;
625
+ font-family: var(--font-body);
626
+ margin-top: 0.5rem;
627
+ }
628
+
629
+ .stat {
630
+ text-align: center;
631
+ padding: 0 1.25rem 0 1.25rem;
632
+ flex-shrink: 0;
633
+ position: relative;
634
+ }
635
+
636
+ .stat-value {
637
+ font-size: 8rem;
638
+ color: var(--text);
639
+ margin-bottom: 0;
640
+ font-family: var(--font-display);
641
+ line-height: 150%;
642
+ letter-spacing: -0.04em;
643
+ }
644
+
645
+ .stat-label {
646
+ font-size: 0.875rem;
647
+ text-transform: none;
648
+ letter-spacing: normal;
649
+ line-height: 1.3125rem;
650
+ font-family: var(--font-body);
651
+ display: inline-flex;
652
+ align-items: center;
653
+ }
654
+
655
+ .stat-arrow {
656
+ margin-left: 0.25em;
657
+ display: inline-block;
658
+ }
659
+
660
+ /* Section Styles */
661
+ section {
662
+ padding: 6rem 0;
663
+ }
664
+
665
+ .section-title {
666
+ text-align: center;
667
+ font-family: 'IBM Plex Mono', monospace;
668
+ color: var(--primary);
669
+ font-size: 0.875rem;
670
+ margin-bottom: 0.5rem;
671
+ letter-spacing: -0.01em;
672
+ line-height: 120%;
673
+ text-transform: uppercase;
674
+ }
675
+
676
+ .section-title2 {
677
+ font-size: clamp(2rem, 5vw, 3rem);
678
+ text-align: left;
679
+ margin-bottom: 0.25rem;
680
+ color: var(--text);
681
+ }
682
+
683
+ .section-subtitle {
684
+ text-align: center;
685
+ margin-bottom: 3rem;
686
+ font-size: 2.3rem;
687
+ }
688
+
689
+ /* Benchmark Section */
690
+ .benchmark {
691
+ padding: 5rem 0;
692
+ width: 100%;
693
+ margin: 0 auto;
694
+ }
695
+
696
+ .benchmark-content {
697
+ display: flex;
698
+ flex-direction: row;
699
+ gap: 3.75rem;
700
+ align-items: flex-start;
701
+ justify-content: flex-start;
702
+ width: 100%;
703
+ max-width: 1080px;
704
+ margin: 0 auto;
705
+ position: relative;
706
+ }
707
+
708
+ .comparison-container {
709
+ display: flex;
710
+ flex-direction: column;
711
+ gap: 4rem;
712
+ width: 100%;
713
+ max-width: 1080px;
714
+ margin: 0 auto;
715
+ }
716
+
717
+ .comparison-header {
718
+ display: flex;
719
+ flex-direction: column;
720
+ align-items: flex-start;
721
+ }
722
+
723
+ .comparison-cps-image {
724
+ max-width: 100%;
725
+ display: block;
726
+ margin: 0 auto;
727
+ padding: 2rem clamp(0rem, 2vw, 2rem) 3rem;
728
+ }
729
+
730
+ .comparison-content {
731
+ display: flex;
732
+ flex-direction: column;
733
+ gap: 3rem;
734
+ align-items: flex-start;
735
+ }
736
+
737
+ .comparison-header-wrapper,
738
+ .comparison-text {
739
+ width: 100%;
740
+ }
741
+
742
+ .comparison-text p {
743
+ text-align: center;
744
+ line-height: 1.2rem;
745
+ font-size: 16px;
746
+ font-family: var(--font-body);
747
+ }
748
+
749
+ .comparison-title-group {
750
+ display: flex;
751
+ flex-direction: column;
752
+ gap: 0.5rem;
753
+ }
754
+
755
+ .comparison-text-grid {
756
+ display: grid;
757
+ grid-template-columns: 1fr;
758
+ gap: 3.75rem;
759
+ align-items: flex-start;
760
+ }
761
+
762
+
763
+
764
+ .supertonic-is-faster-than-ever {
765
+ margin-bottom: 2rem;
766
+ }
767
+
768
+ .comparison-subtitle {
769
+ margin-bottom: 1rem;
770
+ }
771
+
772
+
773
+ .benchmark-text-section {
774
+ display: flex;
775
+ flex-direction: column;
776
+ gap: 0.5rem;
777
+ align-items: flex-start;
778
+ justify-content: flex-start;
779
+ flex: 1 1 0;
780
+ max-width: 100%;
781
+ position: relative;
782
+ }
783
+
784
+ .benchmark-header {
785
+ display: flex;
786
+ flex-direction: column;
787
+ gap: 0.5rem;
788
+ align-items: flex-start;
789
+ justify-content: flex-start;
790
+ flex-shrink: 0;
791
+ width: 100%;
792
+ position: relative;
793
+ }
794
+
795
+ .benchmark-texts {
796
+ display: flex;
797
+ flex-direction: column;
798
+ gap: 1.875rem;
799
+ align-items: flex-start;
800
+ justify-content: flex-start;
801
+ align-self: stretch;
802
+ flex-shrink: 0;
803
+ position: relative;
804
+ }
805
+
806
+ .benchmark-description {
807
+ color: var(--text-secondary);
808
+ text-align: left;
809
+ font-family: var(--font-body);
810
+ font-size: 1.125rem;
811
+ line-height: 150%;
812
+ letter-spacing: -0.025em;
813
+ position: relative;
814
+ align-self: stretch;
815
+ display: flex;
816
+ align-items: center;
817
+ justify-content: flex-start;
818
+ margin: 0;
819
+ }
820
+
821
+ .benchmark-image {
822
+ flex: 1 1 0;
823
+ max-width: 100%;
824
+ position: relative;
825
+ }
826
+
827
+ .benchmark-image img {
828
+ width: 100%;
829
+ height: auto;
830
+ object-fit: cover;
831
+ }
832
+
833
+ /* Demo Video Section */
834
+ .intro-video {
835
+ padding: 5rem 0;
836
+ }
837
+
838
+ .video-container {
839
+ width: 80%;
840
+ margin: 0 auto 1rem;
841
+ position: relative;
842
+ padding-bottom: 45%; /* 16:9 aspect ratio (80% * 56.25% = 45%) */
843
+ height: 0;
844
+ border-radius: 12px;
845
+ overflow: hidden;
846
+ background: var(--light);
847
+ z-index: 1;
848
+ }
849
+
850
+ .video-container iframe {
851
+ position: absolute;
852
+ top: 0;
853
+ left: 0;
854
+ width: 100%;
855
+ height: 100%;
856
+ border: none;
857
+ outline: none;
858
+ }
859
+
860
+ .demo-videos-grid {
861
+ display: grid;
862
+ grid-template-columns: 1fr 1fr;
863
+ gap: 2rem;
864
+ margin-top: 5rem;
865
+ }
866
+
867
+ .demo-video-item {
868
+ display: flex;
869
+ flex-direction: column;
870
+ }
871
+
872
+ .demo-video-item .video-container {
873
+ width: 100%;
874
+ margin: 0 0 1.5rem 0;
875
+ position: relative;
876
+ padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 * 100 = 56.25%) */
877
+ height: 0;
878
+ border-radius: 12px;
879
+ overflow: hidden;
880
+ background: var(--light);
881
+ }
882
+
883
+ .demo-video-item h3 {
884
+ font-size: 1.5rem;
885
+ margin: 0 0 0.75rem 0;
886
+ color: var(--text);
887
+ }
888
+
889
+ .demo-video-item p {
890
+ margin: 0;
891
+ line-height: 1.6;
892
+ color: var(--text-secondary);
893
+ }
894
+
895
+ @media (max-width: 768px) {
896
+ .demo-videos-grid {
897
+ grid-template-columns: 1fr;
898
+ gap: 2rem;
899
+ }
900
+ }
901
+
902
+ .demo-note {
903
+ text-align: center;
904
+ color: #A8B3C1;
905
+ font-size: 0.875rem; /* Reduced from 0.9375rem */
906
+ max-width: 650px; /* Reduced from 700px */
907
+ margin: 0 auto;
908
+ line-height: 1.5; /* Reduced from 1.6 */
909
+ }
910
+
911
+ /* Interactive TTS Demo Section */
912
+ .interactive-demo {
913
+ padding: 5rem 0;
914
+ }
915
+
916
+ .demo-container {
917
+ margin: 0 auto;
918
+ background: var(--light-lighter);
919
+ border-radius: 12px;
920
+ padding: 2.5rem 4.5rem;
921
+ box-shadow: none;
922
+ }
923
+
924
+ .transformers-container {
925
+ margin: 1rem auto 0;
926
+ border-radius: 12px;
927
+ box-shadow: none;
928
+ text-align: center;
929
+ }
930
+
931
+ .transformers-logo {
932
+ width: 100px;
933
+ display: block;
934
+ margin-left: auto;
935
+ margin-right: auto;
936
+ }
937
+
938
+ .transformers-container p {
939
+ margin: 0;
940
+ line-height: 1.6;
941
+ color: black;
942
+ }
943
+
944
+ .transformers-container a {
945
+ color: inherit;
946
+ text-decoration: underline;
947
+ }
948
+
949
+ .transformers-container .btn,
950
+ .transformers-container .transformers-buttons a {
951
+ text-decoration: none;
952
+ }
953
+
954
+ .transformers-buttons {
955
+ display: flex;
956
+ gap: 1.5rem;
957
+ justify-content: center;
958
+ flex-wrap: wrap;
959
+ width: 100%;
960
+ margin-top: 2rem;
961
+ }
962
+
963
+ .demo-status-box {
964
+ display: flex;
965
+ justify-content: space-between;
966
+ align-items: center;
967
+ gap: 0.75rem;
968
+ padding: 0.2rem 1rem;
969
+ background: rgba(255, 152, 0, 0.1);
970
+ border: 1px solid rgba(255, 152, 0, 0.3);
971
+ border-radius: 8px;
972
+ margin-bottom: 0rem;
973
+ min-height: 45px;
974
+ position: relative;
975
+ overflow: hidden;
976
+ --status-progress: 0%;
977
+ --status-progress-color: rgba(255, 152, 0, 0.2);
978
+ z-index: 0;
979
+ }
980
+
981
+ .demo-status-box::before {
982
+ content: '';
983
+ position: absolute;
984
+ inset: 0;
985
+ width: var(--status-progress, 0%);
986
+ background: var(--status-progress-color);
987
+ transition: width 0.4s ease;
988
+ z-index: 0;
989
+ pointer-events: none;
990
+ }
991
+
992
+ .demo-status-box > * {
993
+ position: relative;
994
+ z-index: 1;
995
+ }
996
+
997
+ .demo-status-content {
998
+ flex: 1;
999
+ display: flex;
1000
+ flex-direction: column;
1001
+ gap: 0.5rem;
1002
+ }
1003
+
1004
+ .demo-status-box.success {
1005
+ background: rgba(63, 185, 80, 0.1);
1006
+ border-color: rgba(63, 185, 80, 0.3);
1007
+ font-family: 'IBM Plex Mono', monospace;
1008
+ --status-progress-color: rgba(63, 185, 80, 0.2);
1009
+ }
1010
+
1011
+ .demo-status-box.success .demo-status-text {
1012
+ color: var(--success);
1013
+ }
1014
+
1015
+ .demo-status-box.success * {
1016
+ font-family: inherit;
1017
+ }
1018
+
1019
+ .demo-status-text,
1020
+ .demo-backend-badge.visible.webgpu,
1021
+ .demo-info-banner {
1022
+ font-family: 'IBM Plex Mono', monospace;
1023
+ font-size: 0.85rem;
1024
+ font-weight: 400;
1025
+ }
1026
+
1027
+ .demo-status-box.error {
1028
+ background: rgba(239, 68, 68, 0.1);
1029
+ border-color: rgba(239, 68, 68, 0.3);
1030
+ --status-progress-color: rgba(239, 68, 68, 0.2);
1031
+ }
1032
+
1033
+ .demo-status-box.error .demo-status-text {
1034
+ color: #ef4444;
1035
+ }
1036
+
1037
+ @keyframes shimmer {
1038
+ 0% {
1039
+ transform: translateX(-100%);
1040
+ }
1041
+ 100% {
1042
+ transform: translateX(100%);
1043
+ }
1044
+ }
1045
+
1046
+ .demo-backend-badge {
1047
+ display: inline-block;
1048
+ padding: 0.375rem 0.75rem;
1049
+ background: var(--primary);
1050
+ color: white;
1051
+ border-radius: 8px;
1052
+ font-size: 0.8125rem;
1053
+ white-space: nowrap;
1054
+ opacity: 0;
1055
+ transition: opacity 0.3s ease;
1056
+ }
1057
+
1058
+ .demo-backend-badge.visible {
1059
+ opacity: 1;
1060
+ }
1061
+
1062
+ .demo-backend-badge.webgpu {
1063
+ background: var(--success);
1064
+ }
1065
+
1066
+ .demo-backend-badge.wasm {
1067
+ background: #ff9800;
1068
+ }
1069
+
1070
+ .demo-info-banner {
1071
+ display: inline-block;
1072
+ padding: 0.25rem 0.5rem;
1073
+ border: none;
1074
+ border-radius: 2px;
1075
+ margin-bottom: 1.0rem;
1076
+ color: var(--text);
1077
+ font-size: 0.8125rem;
1078
+ line-height: 1.6;
1079
+ box-decoration-break: clone;
1080
+ -webkit-box-decoration-break: clone;
1081
+ }
1082
+
1083
+ .demo-info-banner strong {
1084
+ color: #FFD54F;
1085
+ }
1086
+
1087
+ .demo-content {
1088
+ display: grid;
1089
+ grid-template-columns: 1fr 1fr;
1090
+ gap: 2rem 3rem;
1091
+ margin-bottom: 2rem;
1092
+ }
1093
+
1094
+ /* Title row aligning with the two-column layout and center spacer */
1095
+ .demo-title-row {
1096
+ display: grid;
1097
+ grid-template-columns: 1fr auto 1fr; /* left | center spacer | right */
1098
+ align-items: center;
1099
+ margin-bottom: 1rem;
1100
+ grid-column: 1 / -1; /* span across both columns of demo-content */
1101
+ font-size: 2rem;
1102
+ font-family: var(--font-display);
1103
+ position: relative;
1104
+ }
1105
+
1106
+ .demo-title-row::after {
1107
+ content: '';
1108
+ position: absolute;
1109
+ left: 0;
1110
+ right: 0;
1111
+ bottom: calc(-1rem);
1112
+ border-bottom: 1px solid #000;
1113
+ }
1114
+ .demo-title-left,
1115
+ .demo-title-right {
1116
+ text-align: center;
1117
+ color: var(--text);
1118
+ }
1119
+
1120
+ /* Text animation - letters appear one by one */
1121
+ .demo-title-left .letter {
1122
+ display: inline-block;
1123
+ visibility: hidden;
1124
+ }
1125
+
1126
+ .demo-title-left .letter.visible {
1127
+ visibility: visible;
1128
+ }
1129
+
1130
+ /* Speech animation - blur and fade in */
1131
+ @keyframes speechBlurFadeIn {
1132
+ 0% {
1133
+ filter: blur(40px);
1134
+ opacity: 0;
1135
+ }
1136
+ 100% {
1137
+ filter: blur(0);
1138
+ opacity: 1;
1139
+ }
1140
+ }
1141
+
1142
+ .demo-title-right.animate-speech {
1143
+ animation: speechBlurFadeIn 0.25s ease-out forwards;
1144
+ }
1145
+ .demo-title-center {
1146
+ text-align: center;
1147
+ color: #ff3;
1148
+ font-family: 'IBM Plex Mono', monospace;
1149
+ }
1150
+
1151
+ .demo-title-center .lightning-icon {
1152
+ width: 4rem;
1153
+ height: 4rem;
1154
+ min-width: 4rem;
1155
+ min-height: 4rem;
1156
+ display: block;
1157
+ object-fit: contain;
1158
+ flex-shrink: 0;
1159
+ }
1160
+
1161
+ .demo-input-section,
1162
+ .demo-output-section {
1163
+ display: flex;
1164
+ flex-direction: column;
1165
+ width: 100%;
1166
+ min-width: 0; /* Allow flex items to shrink below their minimum content size */
1167
+ }
1168
+
1169
+ /* Ensure the input section can define a maximum height for its textarea */
1170
+ .demo-input-section {
1171
+ height: 100%;
1172
+ position: relative; /* allow inner absolute positioning */
1173
+ }
1174
+
1175
+ /* Keep label/counter in DOM for scripts, but hide visually */
1176
+ .demo-input-label {
1177
+ display: none;
1178
+ }
1179
+
1180
+ .demo-input-label {
1181
+ display: none; /* hidden but kept in DOM */
1182
+ }
1183
+
1184
+ .demo-input-section label {
1185
+ display: block;
1186
+ color: var(--text);
1187
+ font-size: 1.125rem;
1188
+ margin: 0;
1189
+ }
1190
+
1191
+ .demo-char-counter {
1192
+ display: flex;
1193
+ align-items: center;
1194
+ gap: 0.375rem;
1195
+ font-size: 0.875rem;
1196
+ color: var(--text-muted);
1197
+ justify-content: flex-end;
1198
+ }
1199
+
1200
+ /* Blinking caret shown when textarea is not focused */
1201
+ .demo-text-mirror {
1202
+ position: absolute;
1203
+ pointer-events: none;
1204
+ color: transparent; /* hide mirrored text */
1205
+ white-space: pre-wrap;
1206
+ word-break: break-word;
1207
+ z-index: 2;
1208
+ }
1209
+
1210
+ .demo-text-mirror #demoTextMirrorContent {
1211
+ /* ensure content takes same flow as textarea */
1212
+ display: block;
1213
+ }
1214
+
1215
+ .demo-fake-caret {
1216
+ display: inline-block;
1217
+ width: 2px;
1218
+ height: 1.2em;
1219
+ background: var(--text);
1220
+ opacity: 0.6;
1221
+ animation: caret-blink 1s steps(2, start) infinite;
1222
+ }
1223
+
1224
+ @keyframes caret-blink {
1225
+ 0%, 49% { opacity: 0.6; }
1226
+ 50%, 100% { opacity: 0; }
1227
+ }
1228
+
1229
+ /* Hide fake caret while the textarea (or any child) has focus */
1230
+ .demo-input-section:focus-within .demo-text-mirror {
1231
+ display: none;
1232
+ }
1233
+
1234
+ .demo-char-counter.error,
1235
+ .demo-char-counter.warning,
1236
+ .demo-char-counter.valid {
1237
+ color: var(--text-muted);
1238
+ }
1239
+
1240
+ .demo-char-counter .demo-char-status {
1241
+ color: inherit;
1242
+ }
1243
+
1244
+ .demo-char-counter.valid .demo-char-status {
1245
+ color: #10b981;
1246
+ }
1247
+
1248
+ .demo-char-counter.error .demo-char-status {
1249
+ color: #ef4444;
1250
+ }
1251
+
1252
+ .demo-char-counter.warning .demo-char-status {
1253
+ color: #f59e0b;
1254
+ }
1255
+
1256
+ .demo-char-status {
1257
+ font-size: 1rem;
1258
+ transition: all 0.2s ease;
1259
+ }
1260
+
1261
+ .demo-input-section textarea {
1262
+ width: 100%;
1263
+ padding: 0 0.5rem;
1264
+ background: var(--light-lighter);
1265
+ border: none;
1266
+ border-radius: 0;
1267
+ color: var(--text);
1268
+ font-size: 2rem;
1269
+ font-weight: 300;
1270
+ line-height: 1.4;
1271
+ font-family: inherit;
1272
+ resize: vertical;
1273
+ transition: all 0.3s ease;
1274
+ margin-bottom: 0;
1275
+ min-height: 90px;
1276
+ height: 100%; /* Fill parent max height by default */
1277
+ flex: 1 1 auto; /* Grow to occupy available space in section */
1278
+ }
1279
+
1280
+ #demoTextInput {
1281
+ border-bottom: 1px solid #000;
1282
+ overflow-y: auto;
1283
+ scrollbar-color: var(--light) transparent;
1284
+ scrollbar-width: thin;
1285
+ }
1286
+
1287
+ #demoTextInput::-webkit-scrollbar {
1288
+ width: 10px;
1289
+ }
1290
+
1291
+ #demoTextInput::-webkit-scrollbar-track {
1292
+ background: transparent !important;
1293
+ border: none;
1294
+ }
1295
+
1296
+ #demoTextInput::-webkit-scrollbar-thumb {
1297
+ background: var(--light) !important;
1298
+ border-radius: 999px;
1299
+ }
1300
+
1301
+ #demoTextInput::-webkit-scrollbar-thumb:hover {
1302
+ background: var(--light-darker) !important;
1303
+ }
1304
+
1305
+ .demo-input-section textarea:focus {
1306
+ outline: none;
1307
+ border-color: transparent;
1308
+ background: var(--light-lighter);
1309
+ }
1310
+
1311
+ .demo-input-section textarea::placeholder {
1312
+ color: var(--text-muted);
1313
+ }
1314
+
1315
+ /* Make pages container resizable like the demo text input */
1316
+ .pages-container {
1317
+ display: block;
1318
+ }
1319
+
1320
+ /* Center inner elements of the text animation section */
1321
+ .text-animation-container {
1322
+ display: flex;
1323
+ flex-direction: column;
1324
+ align-items: center; /* horizontal center */
1325
+ justify-content: center; /* vertical center within its area */
1326
+ gap: 0.75rem;
1327
+ }
1328
+
1329
+ /* Apply resize handler to the animation box (correct target) */
1330
+ .animation-box {
1331
+ resize: both;
1332
+ overflow: auto;
1333
+ min-height: 120px;
1334
+ min-width: 120px;
1335
+ }
1336
+
1337
+ .demo-controls {
1338
+ display: grid;
1339
+ grid-template-columns: 1fr;
1340
+ gap: 0.5rem;
1341
+ margin-bottom: 1rem;
1342
+ }
1343
+
1344
+ .demo-param {
1345
+ display: flex;
1346
+ flex-direction: column;
1347
+ }
1348
+
1349
+ .demo-param-header {
1350
+ display: flex;
1351
+ justify-content: space-between;
1352
+ align-items: center;
1353
+ margin-bottom: 0.35rem;
1354
+ gap: 1rem;
1355
+ font-weight: 400;
1356
+ }
1357
+
1358
+ .demo-param label {
1359
+ font-size: 0.875rem;
1360
+ color: var(--text);
1361
+ display: flex;
1362
+ align-items: center;
1363
+ gap: 0.5rem;
1364
+ font-weight: 400;
1365
+ }
1366
+
1367
+ .param-value {
1368
+ font-size: 0.875rem;
1369
+ color: var(--text);
1370
+ }
1371
+
1372
+ .demo-param input[type="range"] {
1373
+ width: 100%;
1374
+ height: 18px;
1375
+ background: transparent;
1376
+ outline: none;
1377
+ -webkit-appearance: none;
1378
+ appearance: none;
1379
+ cursor: pointer;
1380
+ margin: 0;
1381
+ padding: 0;
1382
+ }
1383
+
1384
+ .demo-param input[type="range"]::-webkit-slider-thumb {
1385
+ -webkit-appearance: none;
1386
+ appearance: none;
1387
+ width: 14px;
1388
+ height: 14px;
1389
+ background: white;
1390
+ border: 1.5px solid black;
1391
+ border-radius: 50%;
1392
+ cursor: pointer;
1393
+ margin-top: -7px;
1394
+ }
1395
+
1396
+ .demo-param input[type="range"]::-webkit-slider-thumb:hover {
1397
+ background: white;
1398
+ border: 1.5px solid black;
1399
+ }
1400
+
1401
+ .demo-param input[type="range"]::-moz-range-thumb {
1402
+ width: 14px;
1403
+ height: 14px;
1404
+ background: white;
1405
+ border: 1.5px solid black;
1406
+ border-radius: 50%;
1407
+ cursor: pointer;
1408
+ }
1409
+
1410
+ .demo-param input[type="range"]::-moz-range-thumb:hover {
1411
+ background: white;
1412
+ border: 1.5px solid black;
1413
+ }
1414
+
1415
+ .demo-param input[type="range"]::-webkit-slider-runnable-track {
1416
+ width: 100%;
1417
+ height: 1px;
1418
+ background: #999;
1419
+ border: none;
1420
+ border-radius: 0;
1421
+ }
1422
+
1423
+ .demo-param input[type="range"]::-moz-range-track {
1424
+ width: 100%;
1425
+ height: 1px;
1426
+ background: #999;
1427
+ border: none;
1428
+ border-radius: 0;
1429
+ }
1430
+
1431
+ .param-hint {
1432
+ font-size: 0.75rem;
1433
+ color: var(--text-muted);
1434
+ font-style: italic;
1435
+ text-align: right;
1436
+ }
1437
+
1438
+ .voice-toggle-container {
1439
+ display: flex;
1440
+ gap: 0.75rem;
1441
+ flex: 1;
1442
+ }
1443
+
1444
+ /* Reusable text toggle style */
1445
+ .text-toggle {
1446
+ font-size: 0.875rem;
1447
+ cursor: pointer;
1448
+ transition: all 0.3s ease;
1449
+ text-decoration: none;
1450
+ background: none;
1451
+ border: none;
1452
+ padding: 0;
1453
+ font-family: inherit;
1454
+ font-weight: 400;
1455
+ }
1456
+
1457
+ .text-toggle:hover {
1458
+ opacity: 0.7;
1459
+ }
1460
+
1461
+ .text-toggle.active {
1462
+ color: var(--supertone_blue);
1463
+ text-decoration: underline;
1464
+ text-decoration-style: wavy;
1465
+ text-decoration-thickness: 1px;
1466
+ text-decoration-color: var(--supertone_blue);
1467
+ text-underline-offset: 4px;
1468
+ }
1469
+
1470
+ /* Voice toggle uses text-toggle style */
1471
+ .voice-toggle-text {
1472
+ color: var(--text-muted);
1473
+ font-size: 0.875rem;
1474
+ cursor: pointer;
1475
+ transition: all 0.3s ease;
1476
+ text-decoration: none;
1477
+ font-weight: 400;
1478
+ }
1479
+
1480
+ .voice-toggle-text:hover {
1481
+ opacity: 0.7;
1482
+ }
1483
+
1484
+ .voice-toggle-text.active {
1485
+ color: var(--supertone_blue);
1486
+ text-decoration: underline;
1487
+ text-decoration-style: wavy;
1488
+ text-decoration-thickness: 1px;
1489
+ text-decoration-color: var(--supertone_blue);
1490
+ text-underline-offset: 4px;
1491
+ font-weight: 400;
1492
+ }
1493
+
1494
+ .voice-toggle-text.disabled {
1495
+ opacity: 0.5;
1496
+ cursor: not-allowed;
1497
+ pointer-events: none;
1498
+ }
1499
+
1500
+
1501
+ .demo-generate-btn {
1502
+ display: inline-flex;
1503
+ align-items: center;
1504
+ justify-content: center;
1505
+ gap: 0.5rem;
1506
+ width: 100%;
1507
+ padding: 0.875rem 1.5rem;
1508
+ border: none;
1509
+ border-radius: 0.5rem;
1510
+ font-size: 0.9375rem;
1511
+ font-family: inherit;
1512
+ cursor: pointer;
1513
+ transition: all 0.3s ease;
1514
+ margin-top: 1.5rem;
1515
+ position: relative;
1516
+ isolation: isolate;
1517
+ overflow: visible;
1518
+ }
1519
+
1520
+ .demo-generate-btn:hover:not(:disabled) {
1521
+ transform: translateY(-2px);
1522
+ }
1523
+
1524
+ #demoGenerateBtn {
1525
+ --demo-generate-base-color: #2b2913;
1526
+ --demo-generate-highlight: #ffd400;
1527
+ color: var(--demo-generate-base-color);
1528
+ font-weight: 600;
1529
+ background: #ff3;
1530
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
1531
+ transition: all var(--demo-generate-spring-duration) var(--demo-generate-spring-easing);
1532
+ position: relative;
1533
+ overflow: hidden;
1534
+ }
1535
+
1536
+ #demoGenerateBtn img {
1537
+ flex-shrink: 0;
1538
+ transform: scale(1.3);
1539
+ transform-origin: center;
1540
+ filter: brightness(0);
1541
+ }
1542
+
1543
+ #demoGenerateBtn::after {
1544
+ content: '';
1545
+ position: absolute;
1546
+ top: -50%;
1547
+ left: -150%;
1548
+ width: 250%;
1549
+ height: 200%;
1550
+ background: linear-gradient(120deg, transparent 30%, hsla(var(--demo-generate-glow-hue), 100%, 80%, 0.66) 45%, hsla(var(--demo-generate-glow-hue), 100%, 90%, 0.9) 55%, transparent 70%);
1551
+ opacity: 0;
1552
+ pointer-events: none;
1553
+ transform: translate3d(0, 0, 0);
1554
+ }
1555
+
1556
+ #demoGenerateBtn .text {
1557
+ font-weight: 400;
1558
+ color: transparent;
1559
+ background-clip: text;
1560
+ background-color: var(--demo-generate-base-color);
1561
+ background-image: linear-gradient(120deg, transparent, hsla(var(--demo-generate-glow-hue), 100%, 80%, 0.66) 40%, hsla(var(--demo-generate-glow-hue), 100%, 90%, 0.9) 50%, transparent 52%);
1562
+ background-repeat: no-repeat;
1563
+ background-size: 300% 300%;
1564
+ background-position: center 200%;
1565
+ }
1566
+
1567
+ #demoGenerateBtn .shimmer {
1568
+ display: none;
1569
+ }
1570
+
1571
+
1572
+
1573
+
1574
+ #demoGenerateBtn:hover:not(:disabled),
1575
+ #demoGenerateBtn.active {
1576
+ transition-duration: calc(var(--demo-generate-spring-duration) * 0.5);
1577
+ box-shadow: 0 0 30px rgba(255, 255, 0, 1),
1578
+ inset 0 0 0 1px rgba(255, 255, 255, 0.55);
1579
+ }
1580
+
1581
+ #demoGenerateBtn:hover:not(:disabled)::after,
1582
+ #demoGenerateBtn.active::after {
1583
+ opacity: 1;
1584
+ animation: demo-generate-btn-shine 0.165s ease-in 1 forwards;
1585
+ }
1586
+
1587
+ #demoGenerateBtn:active {
1588
+ transition-duration: calc(var(--demo-generate-spring-duration) * 0.5);
1589
+ }
1590
+
1591
+
1592
+ #demoGenerateBtn:hover .text,
1593
+ #demoGenerateBtn.active .text {
1594
+ animation: demo-generate-text 0.165s ease-in 1 both;
1595
+ }
1596
+
1597
+ .demo-generate-btn:disabled {
1598
+ opacity: 0.5;
1599
+ cursor: not-allowed;
1600
+ transform: none;
1601
+ }
1602
+
1603
+ .demo-results {
1604
+ flex: 1;
1605
+ background: var(--light-lighter);
1606
+ border: 1px solid var(--border);
1607
+ border-radius: 0.5rem;
1608
+ padding: 0;
1609
+ display: flex;
1610
+ flex-direction: column;
1611
+ width: 100%;
1612
+ min-width: 0;
1613
+ overflow-x: hidden;
1614
+ grid-column: 1 / -1;
1615
+ font-family: var(--font-mono);
1616
+ font-weight: 400;
1617
+ }
1618
+
1619
+ #demoResults {
1620
+ display: none;
1621
+ }
1622
+
1623
+ .demo-placeholder {
1624
+ flex: 1;
1625
+ display: flex;
1626
+ flex-direction: column;
1627
+ align-items: center;
1628
+ justify-content: center;
1629
+ text-align: center;
1630
+ color: var(--text-muted);
1631
+ }
1632
+
1633
+ .demo-placeholder-icon {
1634
+ font-size: 2.5rem;
1635
+ margin-bottom: 0.75rem;
1636
+ opacity: 0.5;
1637
+ animation: float 3s ease-in-out infinite;
1638
+ }
1639
+
1640
+ .demo-placeholder.generating .demo-placeholder-icon {
1641
+ animation: spin 2s linear infinite;
1642
+ }
1643
+
1644
+
1645
+ @keyframes demo-generate-text {
1646
+ 0% {
1647
+ background-position: 100% center;
1648
+ }
1649
+ 100% {
1650
+ background-position: -100% center;
1651
+ }
1652
+ }
1653
+
1654
+ @keyframes demo-generate-btn-shine {
1655
+ 0% {
1656
+ transform: translate3d(0, 0, 0);
1657
+ }
1658
+ 100% {
1659
+ transform: translate3d(60%, 0, 0);
1660
+ }
1661
+ }
1662
+
1663
+ @keyframes float {
1664
+ 0%, 100% {
1665
+ transform: translateY(0px);
1666
+ }
1667
+ 50% {
1668
+ transform: translateY(-10px);
1669
+ }
1670
+ }
1671
+
1672
+ @keyframes spin {
1673
+ 0% {
1674
+ transform: rotate(0deg);
1675
+ }
1676
+ 100% {
1677
+ transform: rotate(360deg);
1678
+ }
1679
+ }
1680
+
1681
+ .demo-placeholder p {
1682
+ font-size: 0.875rem;
1683
+ color: var(--text-muted);
1684
+ margin: 0;
1685
+ }
1686
+
1687
+ .demo-result-item {
1688
+ --result-progress: 0%;
1689
+ --result-title-size: 1rem;
1690
+ position: relative;
1691
+ overflow: hidden;
1692
+ z-index: 0;
1693
+ display: grid;
1694
+ grid-template-columns: 12% 40% auto;
1695
+ column-gap: 2rem;
1696
+ row-gap: 1rem;
1697
+ align-items: center;
1698
+ padding: 1rem 1.5rem;
1699
+ }
1700
+
1701
+ body.comparison-mode .demo-result-item {
1702
+ grid-template-columns: 23% 31% auto;
1703
+ }
1704
+
1705
+ #demoResults > .demo-result-item + .demo-result-item {
1706
+ border-top: 1px dashed #aaa;
1707
+ }
1708
+
1709
+ .demo-result-item.supertonic-result-item::before {
1710
+ content: '';
1711
+ position: absolute;
1712
+ top: 0;
1713
+ left: 0;
1714
+ width: var(--result-progress, 0%);
1715
+ height: 100%;
1716
+ background: #eee;
1717
+ pointer-events: none;
1718
+ z-index: -1;
1719
+ transition: width 0.1s ease;
1720
+ }
1721
+
1722
+ .demo-result-title {
1723
+ display: flex;
1724
+ flex-direction: column;
1725
+ gap: 0.1rem;
1726
+ font-size: var(--result-title-size, 1rem);
1727
+ line-height: 1.2;
1728
+ grid-column: 1;
1729
+ justify-content: center;
1730
+ font-weight: 400;
1731
+ }
1732
+ .demo-result-title span {
1733
+ font-weight: 400;
1734
+ }
1735
+
1736
+
1737
+ .demo-result-title .title-status {
1738
+ font-size: 0.85rem;
1739
+ color: var(--text-secondary);
1740
+ display: none;
1741
+ }
1742
+
1743
+ .demo-result-title .title-status.status-success {
1744
+ color: var(--success);
1745
+ }
1746
+
1747
+ .demo-result-title .title-status.status-error {
1748
+ color: #ef4444;
1749
+ }
1750
+
1751
+ .demo-result-title .title-status.status-running {
1752
+ color: var(--accent);
1753
+ }
1754
+
1755
+
1756
+ .demo-result-title .title-sub {
1757
+ color: var(--text-secondary);
1758
+ }
1759
+
1760
+ .demo-result-text {
1761
+ padding: 0.75rem;
1762
+ background: var(--light-lighter);
1763
+ border-radius: 0;
1764
+ color: var(--text);
1765
+ font-size: 0.875rem;
1766
+ line-height: 1.6;
1767
+ max-height: 150px;
1768
+ overflow-y: auto;
1769
+ }
1770
+
1771
+ .demo-result-text::-webkit-scrollbar {
1772
+ width: 6px;
1773
+ }
1774
+
1775
+ .demo-result-text::-webkit-scrollbar-track {
1776
+ background: var(--dark-light);
1777
+ border-radius: 3px;
1778
+ }
1779
+
1780
+ .demo-result-text::-webkit-scrollbar-thumb {
1781
+ background: var(--border);
1782
+ border-radius: 3px;
1783
+ }
1784
+
1785
+ .demo-result-text::-webkit-scrollbar-thumb:hover {
1786
+ background: var(--text-muted);
1787
+ }
1788
+
1789
+
1790
+
1791
+ .demo-result-info {
1792
+ display: flex;
1793
+ flex-direction: row;
1794
+ align-items: center;
1795
+ justify-content: space-evenly;
1796
+ align-self: stretch;
1797
+ padding: 0;
1798
+ margin: 0;
1799
+ flex-wrap: wrap;
1800
+ grid-column: 2;
1801
+ }
1802
+
1803
+ .demo-result-info .stat {
1804
+ text-align: center;
1805
+ padding: 0;
1806
+ flex-shrink: 0;
1807
+ position: relative;
1808
+ }
1809
+
1810
+ .demo-result-info .stat-value {
1811
+ font-size: var(--result-title-size, 1rem);
1812
+ color: var(--text);
1813
+ margin-bottom: -0.2rem;
1814
+ line-height: 150%;
1815
+ letter-spacing: -0.04em;
1816
+ font-weight: 400;
1817
+ font-family: var(--font-mono);
1818
+ position: relative;
1819
+ }
1820
+
1821
+ .demo-result-info .stat-label {
1822
+ color: var(--text-secondary);
1823
+ font-size: 0.7rem;
1824
+ text-transform: none;
1825
+ letter-spacing: normal;
1826
+ line-height: 1.3125rem;
1827
+ font-weight: 400;
1828
+ font-family: var(--font-mono);
1829
+ }
1830
+
1831
+ .demo-result-info .stat-value .stat-label.stat-suffix {
1832
+ margin-left: 0.1rem;
1833
+ font-size: 0.7rem;
1834
+ line-height: 1;
1835
+ }
1836
+
1837
+ .demo-result-info .stat-value .stat-value-segment {
1838
+ position: relative;
1839
+ display: inline-block;
1840
+ }
1841
+
1842
+ .demo-result-info .stat-value .stat-value-number {
1843
+ display: inline-block;
1844
+ transition: color 0.3s ease, transform 0.3s ease;
1845
+ }
1846
+
1847
+ #demoResults.quote-mode .stat-value-number {
1848
+ transition-duration: 0.1s;
1849
+ }
1850
+
1851
+ .demo-result-info .stat-value .stat-prefix {
1852
+ position: absolute;
1853
+ top: 0.2rem;
1854
+ left: -2.3rem;
1855
+ transform: scale(0.8);
1856
+ line-height: 1;
1857
+ }
1858
+
1859
+
1860
+ .demo-result-item audio {
1861
+ width: 100%;
1862
+ height: 48px;
1863
+ border-radius: 8px;
1864
+ margin-top: 0.5rem;
1865
+ }
1866
+
1867
+ .demo-result-actions {
1868
+ display: flex;
1869
+ gap: 0.75rem;
1870
+ align-items: center;
1871
+ margin-left: auto;
1872
+ }
1873
+
1874
+ .demo-download-btn {
1875
+ display: inline-flex;
1876
+ align-items: center;
1877
+ justify-content: center;
1878
+ padding: 0.5rem;
1879
+ background: transparent;
1880
+ color: var(--text);
1881
+ border: none;
1882
+ border-radius: 50%;
1883
+ cursor: pointer;
1884
+ transition: color 0.2s ease, transform 0.2s ease;
1885
+ }
1886
+
1887
+ .demo-download-btn:hover {
1888
+ color: var(--primary);
1889
+ transform: scale(1.05);
1890
+ }
1891
+
1892
+ .demo-download-btn svg {
1893
+ width: 16px;
1894
+ height: 16px;
1895
+ }
1896
+
1897
+ .demo-error {
1898
+ display: none;
1899
+ padding: 0.75rem 1rem;
1900
+ background: rgba(239, 68, 68, 0.1);
1901
+ border: 1px solid rgba(239, 68, 68, 0.3);
1902
+ border-radius: 8px;
1903
+ color: #ef4444;
1904
+ font-size: 0.875rem;
1905
+ line-height: 1.4;
1906
+ }
1907
+
1908
+ .demo-error.active {
1909
+ display: block;
1910
+ }
1911
+
1912
+ /* ElevenLabs API Key Input */
1913
+ .demo-elevenlabs-config {
1914
+ display: flex;
1915
+ flex-direction: row;
1916
+ gap: 0.75rem;
1917
+ margin-bottom: 1rem;
1918
+ padding: 0;
1919
+ background: none;
1920
+ border: none;
1921
+ }
1922
+
1923
+ .demo-elevenlabs-config input {
1924
+ flex: 1 1 0;
1925
+ width: 100%;
1926
+ padding: 0.5rem;
1927
+ background: var(--light-lighter);
1928
+ border: none;
1929
+ border-bottom: 1px solid #000;
1930
+ border-radius: 0;
1931
+ color: var(--text);
1932
+ font-size: 0.8rem;
1933
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
1934
+ font-weight: 300;
1935
+ transition: all 0.3s ease;
1936
+ }
1937
+
1938
+ @media (max-width: 768px) {
1939
+ .demo-elevenlabs-config {
1940
+ flex-direction: column;
1941
+ }
1942
+ }
1943
+
1944
+ .demo-elevenlabs-config input:focus {
1945
+ outline: none;
1946
+ border-bottom-color: var(--primary);
1947
+ }
1948
+
1949
+ .demo-elevenlabs-config input::placeholder {
1950
+ color: var(--text-muted);
1951
+ font-family: inherit;
1952
+ }
1953
+
1954
+ .demo-api-keys-label {
1955
+ display: inline-flex;
1956
+ align-items: center;
1957
+ gap: 0.5rem;
1958
+ font-size: 0.875rem;
1959
+ color: var(--text);
1960
+ font-weight: 400;
1961
+ }
1962
+
1963
+ .demo-api-keys-label svg {
1964
+ color: #000;
1965
+ }
1966
+
1967
+ /* Performance Comparison Table */
1968
+ .demo-comparison-section {
1969
+ margin-top: 1.5rem;
1970
+ margin-bottom: 1.5rem;
1971
+ padding: 0;
1972
+ background: var(--light-lighter);
1973
+ border: 1px solid var(--border);
1974
+ border-radius: 0;
1975
+ }
1976
+
1977
+ .demo-comparison-title {
1978
+ font-size: 1.125rem;
1979
+ color: var(--text);
1980
+ margin-bottom: 1rem;
1981
+ text-align: center;
1982
+ }
1983
+
1984
+ .demo-comparison-table {
1985
+ display: flex;
1986
+ flex-direction: column;
1987
+ gap: 0.5rem;
1988
+ overflow-x: auto;
1989
+ }
1990
+
1991
+ .demo-comparison-header,
1992
+ .demo-comparison-row {
1993
+ display: grid;
1994
+ grid-template-columns: 2fr 1fr 1.2fr 1.2fr 1.2fr;
1995
+ gap: 0.75rem;
1996
+ padding: 0.75rem;
1997
+ border-radius: 8px;
1998
+ align-items: center;
1999
+ }
2000
+
2001
+ .demo-comparison-header {
2002
+ background: var(--dark);
2003
+ font-size: 0.8125rem;
2004
+ color: var(--text);
2005
+ text-transform: uppercase;
2006
+ letter-spacing: 0.05em;
2007
+ }
2008
+
2009
+ .demo-comparison-row {
2010
+ background: var(--dark);
2011
+ border: 1px solid var(--border);
2012
+ transition: all 0.3s ease;
2013
+ }
2014
+
2015
+ .demo-comparison-row:hover {
2016
+ border-color: var(--accent);
2017
+ background: rgba(10, 91, 255, 0.05);
2018
+ }
2019
+
2020
+ .demo-comparison-row.winner {
2021
+ border-color: var(--success);
2022
+ background: rgba(63, 185, 80, 0.05);
2023
+ }
2024
+
2025
+ .demo-comparison-cell {
2026
+ font-size: 0.875rem;
2027
+ color: var(--text);
2028
+ display: flex;
2029
+ flex-direction: column;
2030
+ gap: 0.25rem;
2031
+ }
2032
+
2033
+ .demo-comparison-cell strong {
2034
+ font-size: 0.9375rem;
2035
+ }
2036
+
2037
+ .system-badge {
2038
+ display: inline-block;
2039
+ padding: 0.2rem 0.5rem;
2040
+ border-radius: 4px;
2041
+ font-size: 0.6875rem;
2042
+ text-transform: uppercase;
2043
+ letter-spacing: 0.05em;
2044
+ }
2045
+
2046
+ .system-badge.supertonic {
2047
+ background: rgba(63, 185, 80, 0.2);
2048
+ color: var(--success);
2049
+ }
2050
+
2051
+ .system-badge.elevenlabs {
2052
+ background: rgba(10, 91, 255, 0.2);
2053
+ color: var(--accent);
2054
+ }
2055
+
2056
+ .demo-comparison-cell.status-running {
2057
+ color: #ff9800;
2058
+ }
2059
+
2060
+ .demo-comparison-cell.status-success {
2061
+ color: var(--success);
2062
+ }
2063
+
2064
+ .demo-comparison-cell.status-error {
2065
+ color: #ef4444;
2066
+ }
2067
+
2068
+ .demo-comparison-cell.fastest {
2069
+ color: var(--success);
2070
+ }
2071
+
2072
+ /* Natural Text Handling Section */
2073
+ .text-handling {
2074
+ background: var(--dark);
2075
+ padding: clamp(3rem, 7vw, 6rem) 0;
2076
+ }
2077
+
2078
+ .text-handling .section-heading {
2079
+ text-align: center;
2080
+ margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
2081
+ max-width: 640px;
2082
+ }
2083
+
2084
+ .text-handling-grid {
2085
+ max-width: 1020px;
2086
+ margin: 0 auto;
2087
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2088
+ }
2089
+
2090
+ .text-handling-card {
2091
+ --provider-color: var(--supertone_blue);
2092
+ }
2093
+
2094
+ .text-handling-card {
2095
+ background: var(--light-lighter);
2096
+ min-height: 100%;
2097
+ }
2098
+
2099
+ .text-handling-card:hover {
2100
+ transform: none;
2101
+ }
2102
+
2103
+ .text-handling-card-body {
2104
+ display: flex;
2105
+ flex-direction: column;
2106
+ gap: 0.5rem;
2107
+ height: 100%;
2108
+ }
2109
+
2110
+ .text-handling-top {
2111
+ display: flex;
2112
+ align-items: flex-start;
2113
+ justify-content: space-between;
2114
+ gap: 0.5rem;
2115
+ width: 100%;
2116
+ }
2117
+
2118
+ .text-handling-top > div:first-child {
2119
+ flex: 1;
2120
+ min-width: 0;
2121
+ overflow: hidden;
2122
+ }
2123
+
2124
+ .text-handling-label {
2125
+ font-size: 1.5rem;
2126
+ }
2127
+
2128
+ .text-handling-desc {
2129
+ font-size: 0.8rem;
2130
+ line-height: 1.2rem;
2131
+ font-family: var(--font-body);
2132
+ }
2133
+
2134
+ .text-handling-buttons {
2135
+ display: flex;
2136
+ flex-wrap: wrap;
2137
+ gap: 0.375rem;
2138
+ padding-top: 0.5rem;
2139
+ padding-bottom: 1.25rem;
2140
+ border-bottom: 1px solid rgba(8, 19, 33, 0.12);
2141
+ width: 100%;
2142
+ }
2143
+
2144
+ .provider-option {
2145
+ display: inline-flex;
2146
+ align-items: center;
2147
+ gap: 0.25rem;
2148
+ padding: 0.25rem 0.75rem;
2149
+ border-radius: 1.5rem;
2150
+ border: 1px solid rgba(8, 19, 33, 0.12);
2151
+ background: transparent;
2152
+ color: rgba(8, 19, 33, 0.65);
2153
+ font-size: 0.8rem;
2154
+ font-weight: 500;
2155
+ cursor: pointer;
2156
+ transition: all 0.2s ease;
2157
+ }
2158
+
2159
+ .provider-option.active {
2160
+ color: var(--text);
2161
+ background: rgba(255, 255, 255, 0.9);
2162
+ }
2163
+
2164
+ .provider-option[data-provider="Supertone"].active {
2165
+ border-color: var(--supertone_blue);
2166
+ box-shadow: 0 0px 10px rgba(34, 124, 255, 0.5);
2167
+ }
2168
+
2169
+ .provider-option[data-provider="ElevenLabs"].active {
2170
+ border-color: var(--brand-elevenlabs);
2171
+ box-shadow: 0 0px 10px rgba(153, 153, 153, 0.5);
2172
+ }
2173
+
2174
+ .provider-option[data-provider="OpenAI"].active {
2175
+ border-color: var(--brand-openai);
2176
+ box-shadow: 0 0px 10px rgba(82, 165, 132, 0.5);
2177
+ }
2178
+
2179
+ .provider-option[data-provider="Gemini"].active {
2180
+ border-color: var(--brand-gemini);
2181
+ box-shadow: 0 0px 10px rgba(114, 79, 213, 0.5);
2182
+ }
2183
+
2184
+ .provider-option-icon {
2185
+ width: 85%;
2186
+ height: 85%;
2187
+ display: inline-block;
2188
+ max-width: 0.9rem;
2189
+ max-height: 0.9rem;
2190
+ }
2191
+
2192
+ .provider-option[data-provider="Gemini"] .provider-option-icon {
2193
+ width: 100%;
2194
+ height: 100%;
2195
+ }
2196
+
2197
+ .provider-option[data-provider="Microsoft"] .provider-option-icon {
2198
+ width: 72.25%;
2199
+ height: 72.25%;
2200
+ }
2201
+
2202
+ .text-handling-player {
2203
+ width: 3rem;
2204
+ height: 3rem;
2205
+ border-radius: 50%;
2206
+ border: none;
2207
+ background: transparent;
2208
+ box-shadow: none;
2209
+ display: inline-flex;
2210
+ align-items: center;
2211
+ justify-content: center;
2212
+ cursor: pointer;
2213
+ transition: all 0.2s ease;
2214
+ padding: 0;
2215
+ color: var(--provider-color, var(--supertone_blue));
2216
+ flex-shrink: 0;
2217
+ margin-left: auto;
2218
+ }
2219
+
2220
+ .text-handling-player.is-playing {
2221
+ background: transparent;
2222
+ box-shadow: none;
2223
+ }
2224
+
2225
+ .text-handling-player::before {
2226
+ content: "";
2227
+ width: 100%;
2228
+ height: 100%;
2229
+ display: inline-flex;
2230
+ background-color: currentColor;
2231
+ -webkit-mask: var(--text-player-play-mask) center / contain no-repeat;
2232
+ mask: var(--text-player-play-mask) center / contain no-repeat;
2233
+ transition: background-color 0.8s ease;
2234
+ }
2235
+
2236
+ .text-handling-player.is-playing::before {
2237
+ -webkit-mask-image: var(--text-player-pause-mask);
2238
+ mask-image: var(--text-player-pause-mask);
2239
+ }
2240
+
2241
+ .text-handling-card .text-handling-sample {
2242
+ font-size: 1.1rem;
2243
+ line-height: 1.8rem;
2244
+ color: rgba(8, 19, 33, 0.85);
2245
+ padding: 0.5rem 0;
2246
+ }
2247
+
2248
+ .text-highlight {
2249
+ color: var(--provider-color, var(--primary));
2250
+ font-weight: 400;
2251
+ transition: color 0.8s ease;
2252
+ text-decoration-line: underline;
2253
+ text-decoration-style: wavy;
2254
+ text-decoration-thickness: 1px;
2255
+ text-decoration-color: currentColor;
2256
+ text-underline-offset: 0.25em;
2257
+ }
2258
+
2259
+ .text-handling-footer {
2260
+ margin-top: auto;
2261
+ padding-top: 0;
2262
+ display: flex;
2263
+ justify-content: flex-start;
2264
+ width: 100%;
2265
+ }
2266
+
2267
+ .text-handling-card .text-model {
2268
+ background: #f9f9f9;
2269
+ border-radius: 0.5rem;
2270
+ border: 0.05rem solid #cccccc;
2271
+ padding: 0.25rem 0.75rem;
2272
+ display: inline-flex;
2273
+ flex-direction: row;
2274
+ gap: 0.5rem;
2275
+ align-items: center;
2276
+ justify-content: flex-start;
2277
+ height: 2rem;
2278
+ width: auto;
2279
+ }
2280
+
2281
+ .text-handling-card .text-model-label {
2282
+ color: #4d4d4d;
2283
+ font-size: 0.875rem;
2284
+ line-height: 1.3125rem;
2285
+ font-weight: 400;
2286
+ }
2287
+
2288
+ .text-model-icon {
2289
+ width: 0.85rem;
2290
+ height: 0.85rem;
2291
+ display: inline-block;
2292
+ flex-shrink: 0;
2293
+ }
2294
+
2295
+ @media (max-width: 1024px) {
2296
+ .text-handling-grid {
2297
+ grid-template-columns: 1fr;
2298
+ }
2299
+ }
2300
+
2301
+ /* Features Section */
2302
+ .features {
2303
+ background: var(--dark);
2304
+ }
2305
+
2306
+ .features-grid {
2307
+ display: grid;
2308
+ grid-template-columns: repeat(3, 1fr);
2309
+ grid-auto-rows: 1fr;
2310
+ gap: 2rem;
2311
+ margin: 0 auto;
2312
+ }
2313
+
2314
+ .features-grid.text-handling-grid {
2315
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2316
+ }
2317
+
2318
+ .features-grid.text-handling-grid .feature-card h3 {
2319
+ margin-bottom: 0.3rem;
2320
+ }
2321
+
2322
+ .feature-card {
2323
+ display: flex;
2324
+ flex-direction: column;
2325
+ gap: 0;
2326
+ padding: 2rem;
2327
+ border-radius: 24px;
2328
+ transition: all 0.3s ease;
2329
+ background: var(--light-lighter);
2330
+ }
2331
+
2332
+ .feature-card:hover {
2333
+ transform: translateY(-3px);
2334
+ border-color: var(--primary);
2335
+ box-shadow: 0 0px 30px rgba(0, 0, 0, 0.1);
2336
+ }
2337
+
2338
+ .feature-card.text-handling-card:hover,
2339
+ .text-handling-card:hover {
2340
+ transform: none;
2341
+ }
2342
+
2343
+ .feature-icon {
2344
+ width: 56px;
2345
+ height: 56px;
2346
+ display: flex;
2347
+ align-items: baseline;
2348
+ justify-content: flex-start;
2349
+ flex-shrink: 0;
2350
+ }
2351
+
2352
+ .feature-icon img {
2353
+ width: 55%;
2354
+ height: auto;
2355
+ display: block;
2356
+ }
2357
+
2358
+ .feature-card h3 {
2359
+ font-size: 1.25rem;
2360
+ margin-bottom: 0.75rem;
2361
+ color: var(--text);
2362
+ font-family: var(--font-body);
2363
+ line-height: 120%;
2364
+ font-weight: 300;
2365
+ }
2366
+
2367
+ .feature-card > p {
2368
+ line-height: 150%;
2369
+ font-size: 1rem;
2370
+ font-family: var(--font-body);
2371
+ letter-spacing: -0.02em;
2372
+ }
2373
+
2374
+ /* Languages Section */
2375
+ /* Languages Section - features2 style layout */
2376
+ .languages-layout {
2377
+ display: grid;
2378
+ grid-template-columns: 4fr 6fr;
2379
+ grid-template-rows: auto auto;
2380
+ gap: 3.75rem 5.75rem;
2381
+ width: 100%;
2382
+ max-width: 75rem;
2383
+ margin: 0 auto;
2384
+ }
2385
+
2386
+ .languages-placeholder {
2387
+ display: flex;
2388
+ align-items: center;
2389
+ justify-content: center;
2390
+ }
2391
+
2392
+ .languages-text-section {
2393
+ display: flex;
2394
+ flex-direction: column;
2395
+ gap: 3.75rem;
2396
+ align-items: flex-start;
2397
+ justify-content: flex-start;
2398
+ position: relative;
2399
+ }
2400
+
2401
+ .languages-header {
2402
+ display: flex;
2403
+ flex-direction: column;
2404
+ gap: 0.5rem;
2405
+ align-items: flex-start;
2406
+ justify-content: flex-start;
2407
+ flex-shrink: 0;
2408
+ width: 100%;
2409
+ position: relative;
2410
+ }
2411
+
2412
+ .languages-subtitle {
2413
+ text-align: left;
2414
+ position: relative;
2415
+ width: 100%;
2416
+ display: flex;
2417
+ align-items: center;
2418
+ justify-content: flex-start;
2419
+ font-size: 2.5rem;
2420
+ }
2421
+
2422
+ .languages-placeholder .languages-code-card {
2423
+ display: flex;
2424
+ flex-direction: column;
2425
+ align-items: stretch;
2426
+ justify-content: flex-start;
2427
+ width: 100%;
2428
+ border: 1px solid var(--border);
2429
+ border-radius: 16px;
2430
+ overflow: hidden;
2431
+ box-shadow: 0 0px 80px rgba(22, 22, 21, 0.1);
2432
+ }
2433
+
2434
+ .languages-placeholder .languages-tablist {
2435
+ display: flex;
2436
+ flex-wrap: wrap;
2437
+ align-items: center;
2438
+ justify-content: space-between;
2439
+ border-bottom: 1px solid var(--border);
2440
+ background: none;
2441
+ }
2442
+
2443
+ .languages-placeholder .languages-tablist .language-option:first-child {
2444
+ padding-left: 1rem;
2445
+ }
2446
+
2447
+ .languages-placeholder .languages-tablist .language-option:last-child {
2448
+ padding-right: 1rem;
2449
+ }
2450
+ .language-option {
2451
+ display: inline-flex;
2452
+ align-items: center;
2453
+ gap: 0.3rem;
2454
+ padding: 1.2rem 1.3rem;
2455
+ background: transparent;
2456
+ border: none;
2457
+ cursor: pointer;
2458
+ color: var(--text-muted);
2459
+ font-family: var(--font-body);
2460
+ font-size: 0.875rem;
2461
+ font-weight: 400;
2462
+ border-bottom: 2px solid transparent;
2463
+ transition: color 0.2s ease, border-color 0.2s ease;
2464
+ }
2465
+
2466
+ .language-option img {
2467
+ width: 13px;
2468
+ height: 13px;
2469
+ display: none;
2470
+ }
2471
+
2472
+ .language-option.active img {
2473
+ display: block;
2474
+ }
2475
+
2476
+ .language-option .language-label {
2477
+ font-weight: inherit;
2478
+ }
2479
+
2480
+ .language-option.active {
2481
+ color: var(--text);
2482
+ border-bottom-color: var(--supertone_blue);
2483
+ background: rgba(34, 124, 255, 0.1);
2484
+ }
2485
+
2486
+ @media (max-width: 768px) {
2487
+ .languages-tablist .language-option {
2488
+ padding: 1.2rem 0.5rem;
2489
+ }
2490
+
2491
+ .languages-tablist .language-option.active .component-2 {
2492
+ display: none;
2493
+ }
2494
+
2495
+ .language-option[data-language="javascript"] .language-label {
2496
+ font-size: 0;
2497
+ line-height: 0;
2498
+ }
2499
+
2500
+ .language-option[data-language="javascript"] .language-label::after {
2501
+ content: "JS";
2502
+ font-size: 0.875rem;
2503
+ line-height: 1;
2504
+ display: inline-block;
2505
+ vertical-align: baseline;
2506
+ }
2507
+ }
2508
+
2509
+ .language-option:focus-visible {
2510
+ outline: 2px solid var(--supertone_blue);
2511
+ outline-offset: 2px;
2512
+ }
2513
+
2514
+ .languages-placeholder .languages-code-body {
2515
+ background: #ddd;
2516
+ padding: 1.5rem 1.75rem;
2517
+ display: flex;
2518
+ align-items: flex-start;
2519
+ justify-content: space-between;
2520
+ min-height: 330px;
2521
+ position: relative;
2522
+ }
2523
+
2524
+ .code-snippet {
2525
+ flex: 1;
2526
+ margin: 0;
2527
+ font-family: var(--font-mono);
2528
+ font-size: 0.9rem;
2529
+ line-height: 1.6;
2530
+ color: var(--text);
2531
+ background: transparent;
2532
+ border: none;
2533
+ white-space: pre-wrap;
2534
+ word-break: break-word;
2535
+ }
2536
+
2537
+ .code-snippet .token-command {
2538
+ color: var(--supertone_blue);
2539
+ }
2540
+
2541
+ .code-snippet .token-heading {
2542
+ display: inline-block;
2543
+ font-weight: 500;
2544
+ color: var(--supertone_blue);
2545
+ }
2546
+
2547
+ .code-snippet .token-argument {
2548
+ color: #000;
2549
+ }
2550
+
2551
+ .code-copy-btn {
2552
+ position: absolute;
2553
+ right: 1.25rem;
2554
+ bottom: 1.25rem;
2555
+ width: 36px;
2556
+ height: 36px;
2557
+ padding: 0;
2558
+ border: none;
2559
+ border-radius: 50%;
2560
+ background: #ccc;
2561
+ display: inline-flex;
2562
+ align-items: center;
2563
+ justify-content: center;
2564
+ cursor: pointer;
2565
+ transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
2566
+ }
2567
+
2568
+ .code-copy-btn:hover {
2569
+ transform: translateY(-2px);
2570
+ box-shadow: 0 6px 18px rgba(34, 124, 255, 0.2);
2571
+ background: rgba(34, 124, 255, 0.18);
2572
+ }
2573
+
2574
+ .code-copy-btn:focus-visible {
2575
+ outline: 2px solid var(--supertone_blue);
2576
+ outline-offset: 2px;
2577
+ }
2578
+
2579
+ .code-copy-btn img {
2580
+ width: 16px;
2581
+ height: 16px;
2582
+ display: block;
2583
+ }
2584
+
2585
+ .code-copy-toast {
2586
+ position: absolute;
2587
+ right: 1.25rem;
2588
+ bottom: 3.75rem;
2589
+ background: rgba(22, 22, 21, 0.85);
2590
+ color: #fff;
2591
+ font-size: 0.75rem;
2592
+ padding: 0.35rem 0.75rem;
2593
+ border-radius: 999px;
2594
+ opacity: 0;
2595
+ transform: translateY(8px);
2596
+ pointer-events: none;
2597
+ transition: opacity 0.2s ease, transform 0.2s ease;
2598
+ }
2599
+
2600
+ .code-copy-toast.is-visible {
2601
+ opacity: 1;
2602
+ transform: translateY(0);
2603
+ }
2604
+
2605
+ .languages-icons-container {
2606
+ display: flex;
2607
+ flex-direction: column;
2608
+ gap: 2rem;
2609
+ align-items: center;
2610
+ justify-content: flex-start;
2611
+ grid-column: 1 / -1;
2612
+ }
2613
+
2614
+ .languages-icons-grid {
2615
+ display: flex;
2616
+ flex-wrap: wrap;
2617
+ gap: 2.5rem;
2618
+ align-items: center;
2619
+ justify-content: center;
2620
+ }
2621
+
2622
+ .language-icon {
2623
+ width: 86px;
2624
+ height: 86px;
2625
+ border-radius: 12px;
2626
+ border: 1px solid var(--border);
2627
+ display: flex;
2628
+ align-items: center;
2629
+ justify-content: center;
2630
+ background: none;
2631
+ cursor: pointer;
2632
+ transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
2633
+ }
2634
+
2635
+ .language-icon:hover {
2636
+ border-color: var(--supertone_blue);
2637
+ }
2638
+
2639
+ .language-icon img {
2640
+ width: 45px;
2641
+ height: 45px;
2642
+ display: block;
2643
+ }
2644
+
2645
+ .language-icon.active {
2646
+ border-color: var(--supertone_blue);
2647
+ box-shadow: 0 0px 20px rgba(34, 124, 255, 0.2);
2648
+ background: #e9f2ff;
2649
+ transform: translateY(-4px);
2650
+ }
2651
+
2652
+ .language-icon:focus-visible {
2653
+ outline: 2px solid var(--supertone_blue);
2654
+ outline-offset: 2px;
2655
+ }
2656
+
2657
+ /* Research Papers Section */
2658
+ .research-papers {
2659
+ padding: 5rem 0;
2660
+ }
2661
+
2662
+ .papers-grid {
2663
+ display: grid;
2664
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
2665
+ gap: 1.5rem; /* Reduced from 2rem */
2666
+ margin-bottom: 2rem; /* Reduced from 3rem */
2667
+ }
2668
+
2669
+ .paper-card {
2670
+ text-decoration: none;
2671
+ background: #ececec;
2672
+ padding: 2rem;
2673
+ border-radius: 1.5rem;
2674
+ border: 0.0625rem solid var(--border);
2675
+ transition: all 0.3s ease;
2676
+ display: flex;
2677
+ flex-direction: column;
2678
+ justify-content: space-between;
2679
+ cursor: pointer;
2680
+ }
2681
+
2682
+ .paper-card:hover {
2683
+ transform: translateY(-3px);
2684
+ border-color: var(--primary);
2685
+ box-shadow: 0 8px 30px rgba(57, 121, 255, 0.15);
2686
+ }
2687
+
2688
+ .paper-card:focus-visible {
2689
+ outline: 0.125rem solid var(--primary);
2690
+ outline-offset: 0.25rem;
2691
+ }
2692
+
2693
+ .paper-card h3 {
2694
+ font-size: 1.25rem;
2695
+ line-height: 120%;
2696
+ margin-bottom: 0.75rem;
2697
+ color: var(--text);
2698
+ font-family: var(--font-body);
2699
+ font-weight: 300;
2700
+ }
2701
+
2702
+ .paper-authors {
2703
+ font-size: 0.8rem;
2704
+ color: var(--text-muted);
2705
+ margin-bottom: 1rem;
2706
+ font-style: normal;
2707
+ font-family: var(--font-body);
2708
+ line-height: 150%;
2709
+ }
2710
+
2711
+ .paper-description {
2712
+ line-height: 150%;
2713
+ margin-bottom: 1.25rem;
2714
+ flex-grow: 1;
2715
+ font-size: 1rem;
2716
+ font-family: var(--font-body);
2717
+ letter-spacing: -0.02em;
2718
+ }
2719
+
2720
+ .paper-highlight {
2721
+ color: var(--supertone_blue);
2722
+ text-decoration: underline;
2723
+ text-decoration-style: wavy;
2724
+ text-decoration-color: var(--supertone_blue);
2725
+ text-decoration-thickness: 1px;
2726
+ text-underline-offset: 4px;
2727
+ }
2728
+
2729
+ .paper-highlight:hover {
2730
+ color: var(--primary);
2731
+ text-decoration-color: var(--primary);
2732
+ }
2733
+
2734
+ .paper-link {
2735
+ display: inline-flex;
2736
+ align-items: center;
2737
+ justify-content: flex-start;
2738
+ gap: 0;
2739
+ color: var(--text);
2740
+ text-decoration: none;
2741
+ font-size: 0.875rem;
2742
+ transition: all 0.3s ease;
2743
+ line-height: 1.3125rem;
2744
+ position: relative;
2745
+ }
2746
+
2747
+ .paper-link .link-text {
2748
+ text-decoration: none;
2749
+ }
2750
+
2751
+
2752
+ .paper-link .arrow {
2753
+ transform: translateY(-0.2em);
2754
+ margin-left: 0.4rem;
2755
+ }
2756
+
2757
+ /* Business Inquiry Section */
2758
+ .business-inquiry {
2759
+ background: var(--light);
2760
+ padding: 3rem 0 4rem;
2761
+ }
2762
+
2763
+ .business-content {
2764
+ display: flex;
2765
+ gap: 4rem;
2766
+ align-items: stretch;
2767
+ max-width: 1280px;
2768
+ margin: 0 auto;
2769
+ }
2770
+
2771
+ .business-text {
2772
+ flex: 1 1 100%;
2773
+ max-width: 500px;
2774
+ margin: 0 auto;
2775
+ text-align: center;
2776
+ display: flex;
2777
+ flex-direction: column;
2778
+ align-items: center;
2779
+ }
2780
+
2781
+ /* Footer */
2782
+ .footer {
2783
+ background: var(--light);
2784
+ padding: 2.5rem 0;
2785
+ border-top: 1px solid #000;
2786
+ }
2787
+
2788
+ .footer-content {
2789
+ display: flex;
2790
+ justify-content: flex-start;
2791
+ align-items: flex-start;
2792
+ flex-wrap: wrap;
2793
+ gap: 1.5rem;
2794
+ }
2795
+
2796
+ .footer-content p {
2797
+ color: #000;
2798
+ margin: 0;
2799
+ font-size: 0.9375rem;
2800
+ }
2801
+
2802
+ .footer-content strong {
2803
+ font-size: 1.125rem;
2804
+ }
2805
+
2806
+ .footer-content a {
2807
+ color: var(--accent);
2808
+ text-decoration: none;
2809
+ transition: color 0.3s ease;
2810
+ }
2811
+
2812
+ .footer-content a:hover {
2813
+ color: var(--primary);
2814
+ }
2815
+
2816
+ .footer-links {
2817
+ display: flex;
2818
+ gap: 2rem;
2819
+ flex-wrap: wrap;
2820
+ margin-left: auto;
2821
+ }
2822
+
2823
+ .footer-links a {
2824
+ color: #000;
2825
+ text-decoration: none;
2826
+ font-size: 0.9375rem;
2827
+ transition: color 0.3s ease;
2828
+ }
2829
+
2830
+ .footer-links a:hover {
2831
+ color: var(--text);
2832
+ }
2833
+
2834
+ /* Animations */
2835
+ @keyframes fadeInUp {
2836
+ from {
2837
+ opacity: 0;
2838
+ transform: translateY(30px);
2839
+ }
2840
+ to {
2841
+ opacity: 1;
2842
+ transform: translateY(0);
2843
+ }
2844
+ }
2845
+
2846
+ @keyframes fadeInDown {
2847
+ from {
2848
+ opacity: 0;
2849
+ transform: translateY(-30px);
2850
+ }
2851
+ to {
2852
+ opacity: 1;
2853
+ transform: translateY(0);
2854
+ }
2855
+ }
2856
+
2857
+ @keyframes fadeIn {
2858
+ from {
2859
+ opacity: 0;
2860
+ }
2861
+ to {
2862
+ opacity: 1;
2863
+ }
2864
+ }
2865
+
2866
+ /* ↓ 1440px 이하 */
2867
+ @media (max-width: 1440px) {
2868
+ .container {
2869
+ max-width: 1200px;
2870
+ padding: 0 2rem;
2871
+ }
2872
+
2873
+ .hero-title {
2874
+ font-size: clamp(2.75rem, 7vw, 5.5rem);
2875
+ }
2876
+ }
2877
+
2878
+ /* ↓ 1280px 이하 */
2879
+ @media (max-width: 1280px) {
2880
+ .container {
2881
+ max-width: 1100px;
2882
+ padding: 0 2rem;
2883
+ }
2884
+
2885
+ .hero-title {
2886
+ font-size: clamp(2.5rem, 6.5vw, 5rem);
2887
+ }
2888
+ }
2889
+
2890
+ /* ↓ 768px 이하 */
2891
+ @media (max-width: 768px) {
2892
+ .side-nav {
2893
+ right: 0.5rem;
2894
+ gap: 0.75rem;
2895
+ }
2896
+
2897
+ .nav-dot {
2898
+ width: 8px;
2899
+ height: 8px;
2900
+ }
2901
+
2902
+ #lightning-bg .hero-lightning {
2903
+ /* Removed CSS variable-based transform for direct scroll response */
2904
+ /* transform: translateY(calc(var(--lightning-scroll) * -0.45)) translateX(-10%) scale(1.3); */
2905
+ /* transform: translateY(calc(var(--lightning-scroll) * -1)) translateX(-10%) scale(1.3); */
2906
+ transform: translateX(-10%) scale(1.3);
2907
+ transform-origin: top center;
2908
+ }
2909
+
2910
+ .nav-dot::before {
2911
+ display: none;
2912
+ }
2913
+
2914
+ .container {
2915
+ padding: 0 1.5rem;
2916
+ }
2917
+
2918
+ section {
2919
+ padding: 4rem 0;
2920
+ }
2921
+
2922
+ .hero {
2923
+ padding: 12rem 0 4rem;
2924
+ }
2925
+
2926
+ .hero-stats {
2927
+ gap: 2rem;
2928
+ }
2929
+
2930
+ .features-grid {
2931
+ grid-template-columns: 1fr;
2932
+ }
2933
+
2934
+ .features-grid.text-handling-grid {
2935
+ grid-template-columns: 1fr;
2936
+ }
2937
+
2938
+ .feature-card {
2939
+ display: grid;
2940
+ grid-template-columns: auto 1fr;
2941
+ align-items: flex-start;
2942
+ }
2943
+
2944
+ .feature-card.text-handling-card {
2945
+ display: flex;
2946
+ flex-direction: column;
2947
+ grid-template-columns: none;
2948
+ }
2949
+
2950
+ .text-handling-card-body {
2951
+ width: 100%;
2952
+ }
2953
+
2954
+ .feature-card .feature-icon {
2955
+ grid-column: 1;
2956
+ grid-row: 1;
2957
+ height: auto;
2958
+ }
2959
+
2960
+ .feature-card h3,
2961
+ .feature-card > p {
2962
+ grid-column: 2;
2963
+ }
2964
+
2965
+ .text-handling-player {
2966
+ width: 3rem !important;
2967
+ height: 3rem !important;
2968
+ min-width: 3rem;
2969
+ min-height: 3rem;
2970
+ flex-shrink: 0;
2971
+ }
2972
+
2973
+ .comparison-subtitle {
2974
+ text-align: center;
2975
+ }
2976
+
2977
+ .benchmark-content {
2978
+ flex-direction: column;
2979
+ gap: 2rem;
2980
+ max-width: 100%;
2981
+ }
2982
+
2983
+ .comparison-container {
2984
+ gap: 2rem;
2985
+ max-width: 100%;
2986
+ }
2987
+
2988
+ .comparison-content {
2989
+ gap: 1.5rem;
2990
+ }
2991
+
2992
+
2993
+ .benchmark-text-section {
2994
+ width: 100%;
2995
+ max-width: 100%;
2996
+ }
2997
+
2998
+ .benchmark-image {
2999
+ width: 100%;
3000
+ max-width: 100%;
3001
+ height: auto;
3002
+ aspect-ratio: 571/392;
3003
+ }
3004
+
3005
+ .benchmark-title {
3006
+ font-size: 1.75rem;
3007
+ }
3008
+
3009
+ .benchmark-description {
3010
+ font-size: 1rem;
3011
+ }
3012
+
3013
+ .languages-layout {
3014
+ display: flex;
3015
+ flex-direction: column;
3016
+ gap: 1.5rem;
3017
+ max-width: 100%;
3018
+ }
3019
+
3020
+ .languages-placeholder,
3021
+ .languages-text-section,
3022
+ .languages-icons-container {
3023
+ width: 100%;
3024
+ max-width: 100%;
3025
+ }
3026
+
3027
+ .languages-placeholder .languages-code-card {
3028
+ width: 100%;
3029
+ }
3030
+
3031
+ .languages-icons-container {
3032
+ margin-top: 0.5rem;
3033
+ }
3034
+
3035
+ .languages-code-body {
3036
+ padding: 1.25rem;
3037
+ }
3038
+
3039
+ .language-option {
3040
+ padding: 1.2rem 0.2rem;
3041
+ }
3042
+
3043
+ .languages-icons-grid {
3044
+ justify-content: center;
3045
+ gap: 1rem;
3046
+ }
3047
+
3048
+ .language-icon {
3049
+ width: 72px;
3050
+ height: 72px;
3051
+ }
3052
+
3053
+ .hero-buttons,
3054
+ .business-buttons {
3055
+ flex-direction: column;
3056
+ align-items: stretch;
3057
+ }
3058
+
3059
+ .btn-secondary {
3060
+ width: auto;
3061
+ display: inline-block;
3062
+ }
3063
+
3064
+ .btn {
3065
+ justify-content: center;
3066
+ }
3067
+
3068
+ .video-container {
3069
+ width: 100%;
3070
+ padding-bottom: 56.25%; /* 16:9 aspect ratio */
3071
+ }
3072
+
3073
+ .tabs {
3074
+ gap: 0.5rem;
3075
+ }
3076
+
3077
+ .papers-grid {
3078
+ grid-template-columns: 1fr;
3079
+ }
3080
+
3081
+ .paper-card {
3082
+ padding: 2rem;
3083
+ }
3084
+
3085
+ .hero-headings {
3086
+ grid-template-columns: 1fr;
3087
+ gap: 3rem;
3088
+ align-items: flex-start;
3089
+ margin: 4rem auto 2rem;
3090
+ }
3091
+
3092
+ .hero-headings .hero-subtitle,
3093
+ .hero-headings .hero-description {
3094
+ align-self: flex-start;
3095
+ text-align: left;
3096
+ }
3097
+
3098
+ .footer-content {
3099
+ flex-direction: column;
3100
+ gap: 1rem;
3101
+ }
3102
+
3103
+ .footer-links {
3104
+ justify-content: center;
3105
+ gap: 1.5rem;
3106
+ margin-left: 0;
3107
+ }
3108
+
3109
+ .footer {
3110
+ padding: 2.5rem 0 1.5rem;
3111
+ }
3112
+
3113
+ .footer-text {
3114
+ margin-left: 0;
3115
+ text-align: center;
3116
+ flex-direction: column;
3117
+ gap: 1rem;
3118
+ align-items: center;
3119
+ }
3120
+
3121
+ .footer-logo {
3122
+ margin: 0 auto;
3123
+ }
3124
+
3125
+ .business-content {
3126
+ flex-direction: column;
3127
+ gap: 2rem;
3128
+ }
3129
+
3130
+ .business-text {
3131
+ max-width: 100%;
3132
+ }
3133
+
3134
+ /* Interactive Demo Responsive */
3135
+ .interactive-demo {
3136
+ padding: 3rem 0 !important;
3137
+ }
3138
+
3139
+ .demo-container {
3140
+ padding: 1rem;
3141
+ }
3142
+
3143
+ .demo-content {
3144
+ grid-template-columns: 1fr;
3145
+ gap: 1rem;
3146
+ }
3147
+
3148
+ .demo-controls {
3149
+ grid-template-columns: 1fr;
3150
+ gap: 0.875rem;
3151
+ }
3152
+
3153
+ .demo-param-header {
3154
+ flex-direction: row;
3155
+ align-items: center;
3156
+ justify-content: space-between;
3157
+ gap: 0.5rem;
3158
+ flex-wrap: nowrap;
3159
+ }
3160
+
3161
+ .param-hint {
3162
+ font-size: 0.6875rem;
3163
+ }
3164
+
3165
+ .demo-status-box {
3166
+ flex-direction: column;
3167
+ align-items: flex-start;
3168
+ padding: 0.625rem 0.875rem;
3169
+ }
3170
+
3171
+ .demo-status-content {
3172
+ width: 100%;
3173
+ }
3174
+
3175
+ .demo-info-banner {
3176
+ padding: 0.25rem 0.4rem;
3177
+ font-size: 0.75rem;
3178
+ }
3179
+
3180
+ .demo-results {
3181
+ min-height: 200px;
3182
+ padding: 0;
3183
+ overflow-x: hidden;
3184
+ }
3185
+
3186
+ .demo-output-section {
3187
+ width: 100%;
3188
+ min-width: 0;
3189
+ overflow: hidden;
3190
+ }
3191
+
3192
+ .demo-result-title {
3193
+ flex-direction: row;
3194
+ flex-wrap: nowrap;
3195
+ align-items: center;
3196
+ gap: 0.5rem;
3197
+ }
3198
+
3199
+ .demo-result-info {
3200
+ gap: 0.75rem;
3201
+ flex-wrap: wrap;
3202
+ justify-content: flex-start;
3203
+ }
3204
+
3205
+ .demo-result-info .stat {
3206
+ padding: 0;
3207
+ flex: 1 1 calc(50% - 0.4rem);
3208
+ min-width: 0;
3209
+ }
3210
+
3211
+ .demo-result-info .stat:first-child {
3212
+ flex-basis: 100%;
3213
+ }
3214
+
3215
+ .demo-result-info .stat-value {
3216
+ font-size: 1.5rem;
3217
+ }
3218
+
3219
+ .demo-result-info .stat-label {
3220
+ font-size: 0.7rem;
3221
+ }
3222
+
3223
+ .demo-char-counter {
3224
+ justify-content: flex-end;
3225
+ text-align: right;
3226
+ width: 100%;
3227
+ }
3228
+
3229
+ .hero-stat-value,
3230
+ .stat-value {
3231
+ font-size: 5rem;
3232
+ }
3233
+
3234
+ /* Comparison Table Responsive */
3235
+ .demo-comparison-section {
3236
+ padding: 0;
3237
+ }
3238
+
3239
+ .demo-comparison-title {
3240
+ font-size: 1rem;
3241
+ }
3242
+
3243
+ .demo-comparison-header,
3244
+ .demo-comparison-row {
3245
+ grid-template-columns: 1fr;
3246
+ gap: 0.5rem;
3247
+ padding: 0.5rem;
3248
+ }
3249
+
3250
+ .demo-comparison-header {
3251
+ display: none;
3252
+ }
3253
+
3254
+ .demo-comparison-cell {
3255
+ border-bottom: 1px solid var(--border);
3256
+ padding-bottom: 0.5rem;
3257
+ }
3258
+
3259
+ .demo-comparison-cell:last-child {
3260
+ border-bottom: none;
3261
+ }
3262
+
3263
+ .demo-comparison-cell::before {
3264
+ content: attr(data-label);
3265
+ font-size: 0.75rem;
3266
+ color: var(--text-muted);
3267
+ text-transform: uppercase;
3268
+ display: block;
3269
+ margin-bottom: 0.25rem;
3270
+ }
3271
+
3272
+ .demo-elevenlabs-config {
3273
+ padding: 0.75rem;
3274
+ }
3275
+
3276
+ .demo-elevenlabs-config label {
3277
+ font-size: 0.75rem;
3278
+ }
3279
+
3280
+ .demo-elevenlabs-config input {
3281
+ font-size: 0.75rem;
3282
+ }
3283
+
3284
+ .hero {
3285
+ padding: 7rem 0 4rem;
3286
+ }
3287
+ }
3288
+
3289
+ /* Smooth Scrolling */
3290
+ html {
3291
+ scroll-behavior: smooth;
3292
+ }
3293
+
3294
+ /* Selection */
3295
+ ::selection {
3296
+ background: var(--primary);
3297
+ color: white;
3298
+ }
3299
+
3300
+ ::-webkit-scrollbar {
3301
+ width: 10px;
3302
+ }
3303
+
3304
+ ::-webkit-scrollbar-track {
3305
+ background: #f2f2f2;
3306
+ }
3307
+
3308
+ ::-webkit-scrollbar-thumb {
3309
+ background: var(--dark-light);
3310
+ border-radius: 5px;
3311
+ }
3312
+
3313
+ ::-webkit-scrollbar-thumb:hover {
3314
+ background: var(--primary);
3315
+ }
3316
+
3317
+ :where(.bg-white)::-webkit-scrollbar-track,
3318
+ :where(.bg-white):is(.dark *)::-webkit-scrollbar-track {
3319
+ background: transparent !important;
3320
+ }
3321
+
3322
+ /* Custom Audio Player Styles */
3323
+ .custom-audio-player {
3324
+ display: flex;
3325
+ align-items: center;
3326
+ gap: 1rem;
3327
+ padding: 0;
3328
+ background: rgba(255, 255, 255, 0.03);
3329
+ border-radius: 12px;
3330
+ margin-top: 0;
3331
+ border: 1px solid rgba(255, 255, 255, 0.08);
3332
+ font-weight: 400;
3333
+ grid-column: 3;
3334
+ width: 100%;
3335
+ flex-wrap: wrap;
3336
+ }
3337
+
3338
+ .player-btn {
3339
+ width: 40px;
3340
+ height: 40px;
3341
+ border-radius: 50%;
3342
+ border: none;
3343
+ background: #ddd;
3344
+ color: var(--bg-dark);
3345
+ font-size: 20px;
3346
+ cursor: pointer;
3347
+ display: flex;
3348
+ align-items: center;
3349
+ justify-content: center;
3350
+ transition: all 0.3s ease;
3351
+ flex-shrink: 0;
3352
+ }
3353
+
3354
+ .player-btn svg {
3355
+ width: 24px;
3356
+ height: 24px;
3357
+ display: block;
3358
+ pointer-events: none;
3359
+ }
3360
+
3361
+ .player-btn:hover {
3362
+ background: var(--supertone_blue);
3363
+ transform: scale(1.05);
3364
+ }
3365
+
3366
+ .player-btn:active {
3367
+ transform: scale(0.95);
3368
+ }
3369
+
3370
+ .demo-result-item.supertonic-result-item .player-btn:hover,
3371
+ .demo-result-item.supertonic-result-item .player-btn:focus-visible {
3372
+ background: var(--supertone_blue);
3373
+ color: #fff;
3374
+ }
3375
+
3376
+ .demo-result-item.elevenlabs-result-item .player-btn:hover,
3377
+ .demo-result-item.elevenlabs-result-item .player-btn:focus-visible {
3378
+ background: var(--brand-elevenlabs);
3379
+ color: #fff;
3380
+ }
3381
+
3382
+ .demo-result-item.openai-result-item .player-btn:hover,
3383
+ .demo-result-item.openai-result-item .player-btn:focus-visible {
3384
+ background: var(--brand-openai);
3385
+ color: #fff;
3386
+ }
3387
+
3388
+ .demo-result-item.gemini-result-item .player-btn:hover,
3389
+ .demo-result-item.gemini-result-item .player-btn:focus-visible {
3390
+ background: var(--brand-gemini);
3391
+ color: #fff;
3392
+ }
3393
+
3394
+ .custom-audio-player .time-display {
3395
+ font-size: 0.875rem;
3396
+ color: var(--text-secondary);
3397
+ font-weight: 400;
3398
+ min-width: 42px;
3399
+ text-align: center;
3400
+ flex-shrink: 0;
3401
+ }
3402
+
3403
+ .progress-container {
3404
+ flex: 1;
3405
+ cursor: pointer;
3406
+ padding: 0.5rem 0;
3407
+ }
3408
+
3409
+ .progress-bar {
3410
+ width: 100%;
3411
+ height: 6px;
3412
+ background: #ddd;
3413
+ border-radius: 3px;
3414
+ overflow: hidden;
3415
+ position: relative;
3416
+ }
3417
+
3418
+ .progress-bar:hover {
3419
+ height: 8px;
3420
+ transition: height 0.2s ease;
3421
+ }
3422
+
3423
+ .progress-fill {
3424
+ height: 100%;
3425
+ background: linear-gradient(90deg, var(--provider-color, var(--supertone_blue)) 0%, rgba(34, 124, 255, 0.5) 100%);
3426
+ border-radius: 3px;
3427
+ transition: width 0.1s linear;
3428
+ position: relative;
3429
+ }
3430
+
3431
+ .progress-fill::after {
3432
+ content: '';
3433
+ position: absolute;
3434
+ right: 0;
3435
+ top: 50%;
3436
+ transform: translateY(-50%);
3437
+ width: 12px;
3438
+ height: 12px;
3439
+ background: var(--provider-color, var(--supertone_blue));
3440
+ border-radius: 50%;
3441
+ box-shadow: 0 0 8px var(--provider-color, rgba(34, 124, 255, 0.6));
3442
+ opacity: 0;
3443
+ transition: opacity 0.2s ease;
3444
+ }
3445
+
3446
+ .progress-container:hover .progress-fill::after {
3447
+ opacity: 1;
3448
+ }
3449
+
3450
+ .supertonic-result-item {
3451
+ --provider-color: var(--supertone_blue);
3452
+ }
3453
+
3454
+ .elevenlabs-result-item {
3455
+ --provider-color: var(--brand-elevenlabs);
3456
+ }
3457
+
3458
+ .openai-result-item {
3459
+ --provider-color: var(--brand-openai);
3460
+ }
3461
+
3462
+ .gemini-result-item {
3463
+ --provider-color: var(--brand-gemini);
3464
+ }
3465
+
3466
+ .elevenlabs-result-item .progress-fill {
3467
+ background: linear-gradient(90deg, var(--brand-elevenlabs) 0%, rgba(153, 153, 153, 0.5) 100%);
3468
+ }
3469
+
3470
+ .openai-result-item .progress-fill {
3471
+ background: linear-gradient(90deg, var(--brand-openai) 0%, rgba(82, 165, 132, 0.5) 100%);
3472
+ }
3473
+
3474
+ .gemini-result-item .progress-fill {
3475
+ background: linear-gradient(90deg, var(--brand-gemini) 0%, rgba(114, 79, 213, 0.5) 100%);
3476
+ }
3477
+
3478
+
3479
+ #presetControlsRow {
3480
+ display: flex;
3481
+ gap: 0.8rem;
3482
+ margin-top: 0.75rem;
3483
+ flex-wrap: wrap;
3484
+ align-items: center;
3485
+ justify-content: space-between;
3486
+ color: #000;
3487
+ }
3488
+
3489
+ #presetButtonGroup {
3490
+ display: flex;
3491
+ gap: 0.7rem;
3492
+ flex-wrap: wrap;
3493
+ }
3494
+
3495
+
3496
+
3497
+ @media (max-width: 768px) {
3498
+ .demo-result-item {
3499
+ grid-template-columns: 1fr;
3500
+ padding: 1rem 0;
3501
+ }
3502
+
3503
+ .demo-result-title,
3504
+ .demo-result-info,
3505
+ .custom-audio-player {
3506
+ grid-column: 1;
3507
+ }
3508
+
3509
+ .custom-audio-player {
3510
+ width: 100%;
3511
+ padding: 0 1rem;
3512
+ }
3513
+
3514
+ #demoTextInput {
3515
+ height: 168px;
3516
+ }
3517
+
3518
+ }
3519
+
3520
+ #demoGenerateBtn:disabled {
3521
+ box-shadow: none;
3522
+ }
3523
+
3524
+ #demoGenerateBtn:disabled .shimmer {
3525
+ display: none;
3526
+ }
3527
+
3528
+ #demoComparisonSection {
3529
+ display: none !important;
3530
+ }
3531
+
3532
+ .business-text h2 {
3533
+ margin-bottom: 1.5rem;
3534
+ color: var(--text);
3535
+ }
3536
+
3537
+ .business-subheadline {
3538
+ color: var(--text-secondary);
3539
+ line-height: 1.7;
3540
+ font-size: 1.125rem;
3541
+ font-weight: 300;
3542
+ margin: 0;
3543
+ }
3544
+
3545
+ .business-buttons .btn {
3546
+ background: #eee;
3547
+ }
3548
+
3549
+ .footer-logo {
3550
+ width: 48px;
3551
+ height: auto;
3552
+ display: block;
3553
+ }
3554
+
3555
+ .footer-text {
3556
+ margin-left: 0;
3557
+ display: flex;
3558
+ align-items: flex-start;
3559
+ gap: 2rem;
3560
+ flex: 1 1 auto;
3561
+ }
3562
+
3563
+
3564
+ @media (max-width: 768px) {
3565
+ .footer-content {
3566
+ align-items: center;
3567
+ text-align: center;
3568
+ }
3569
+
3570
+ .footer-text {
3571
+ flex-direction: column;
3572
+ align-items: center;
3573
+ gap: 0.3em;
3574
+ padding: 1rem 0 0rem;
3575
+ }
3576
+ }
3577
+
3578
+ /* ------------------------------
3579
+ Billing Confirmation Modal
3580
+ ------------------------------ */
3581
+ .billing-modal {
3582
+ display: none;
3583
+ position: fixed;
3584
+ top: 0;
3585
+ left: 0;
3586
+ right: 0;
3587
+ bottom: 0;
3588
+ z-index: 10000;
3589
+ align-items: center;
3590
+ justify-content: center;
3591
+ padding: 1rem;
3592
+ }
3593
+
3594
+ .billing-modal.show {
3595
+ display: flex;
3596
+ animation: modalFadeIn 0.2s ease-out;
3597
+ }
3598
+
3599
+ .billing-modal-overlay {
3600
+ position: absolute;
3601
+ top: 0;
3602
+ left: 0;
3603
+ right: 0;
3604
+ bottom: 0;
3605
+ background: rgba(0, 0, 0, 0.6);
3606
+ backdrop-filter: blur(4px);
3607
+ animation: overlayFadeIn 0.2s ease-out;
3608
+ }
3609
+
3610
+ .billing-modal-content {
3611
+ position: relative;
3612
+ background: white;
3613
+ border-radius: 1.25rem;
3614
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
3615
+ max-width: 500px;
3616
+ width: 100%;
3617
+ overflow: hidden;
3618
+ animation: modalSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
3619
+ }
3620
+
3621
+ .billing-modal-header {
3622
+ padding: 2rem 2rem 1.5rem;
3623
+ text-align: center;
3624
+ border-bottom: 1px solid var(--light-darker);
3625
+ }
3626
+
3627
+ .billing-modal-icon {
3628
+ color: #ef4444;
3629
+ margin-bottom: 1rem;
3630
+ animation: iconPulse 0.5s ease-out;
3631
+ }
3632
+
3633
+ .billing-modal-title {
3634
+ font-family: var(--font-display);
3635
+ font-size: 1.5rem;
3636
+ font-weight: 500;
3637
+ color: var(--text);
3638
+ margin: 0;
3639
+ }
3640
+
3641
+ .billing-modal-body {
3642
+ padding: 2rem;
3643
+ }
3644
+
3645
+ .billing-modal-message {
3646
+ font-family: var(--font-body);
3647
+ font-size: 1rem;
3648
+ color: var(--text-secondary);
3649
+ margin: 0 0 1.5rem 0;
3650
+ line-height: 1.6;
3651
+ }
3652
+
3653
+ .billing-modal-details {
3654
+ background: var(--light);
3655
+ border-radius: 0.75rem;
3656
+ padding: 1.25rem;
3657
+ margin-bottom: 1.5rem;
3658
+ }
3659
+
3660
+ .billing-detail-item {
3661
+ display: flex;
3662
+ justify-content: space-between;
3663
+ align-items: center;
3664
+ padding: 0.5rem 0;
3665
+ }
3666
+
3667
+ .billing-detail-item:not(:last-child) {
3668
+ border-bottom: 1px solid var(--light-darker);
3669
+ }
3670
+
3671
+ .billing-detail-label {
3672
+ font-family: var(--font-body);
3673
+ font-size: 0.9rem;
3674
+ color: var(--text-secondary);
3675
+ font-weight: 500;
3676
+ }
3677
+
3678
+ .billing-detail-value {
3679
+ font-family: var(--font-mono);
3680
+ font-size: 0.95rem;
3681
+ color: var(--text);
3682
+ font-weight: 600;
3683
+ }
3684
+
3685
+ .billing-modal-warning {
3686
+ font-family: var(--font-body);
3687
+ font-size: 0.875rem;
3688
+ color: var(--text-secondary);
3689
+ background: #fff9e6;
3690
+ border-left: 3px solid #ffc107;
3691
+ padding: 0.75rem 1rem;
3692
+ border-radius: 0.5rem;
3693
+ margin: 0;
3694
+ line-height: 1.5;
3695
+ }
3696
+
3697
+ .billing-modal-footer {
3698
+ display: flex;
3699
+ gap: 1rem;
3700
+ padding: 1.5rem 2rem 2rem;
3701
+ border-top: 1px solid var(--light-darker);
3702
+ }
3703
+
3704
+ .billing-modal-btn {
3705
+ flex: 1;
3706
+ padding: 0.875rem 1.5rem;
3707
+ border-radius: 0.75rem;
3708
+ font-family: var(--font-body);
3709
+ font-size: 1rem;
3710
+ font-weight: 600;
3711
+ cursor: pointer;
3712
+ transition: all 0.2s ease;
3713
+ border: none;
3714
+ outline: none;
3715
+ }
3716
+
3717
+ .billing-modal-btn-cancel {
3718
+ background: var(--light);
3719
+ color: var(--text);
3720
+ border: 1px solid var(--border);
3721
+ }
3722
+
3723
+ .billing-modal-btn-cancel:hover {
3724
+ background: var(--light-darker);
3725
+ transform: translateY(-1px);
3726
+ }
3727
+
3728
+ .billing-modal-btn-cancel:active {
3729
+ transform: translateY(0);
3730
+ }
3731
+
3732
+ .billing-modal-btn-confirm {
3733
+ background: var(--supertone_blue);
3734
+ color: white;
3735
+ }
3736
+
3737
+ .billing-modal-btn-confirm:hover {
3738
+ background: var(--primary-dark);
3739
+ transform: translateY(-1px);
3740
+ box-shadow: 0 4px 12px rgba(34, 124, 255, 0.3);
3741
+ }
3742
+
3743
+ .billing-modal-btn-confirm:active {
3744
+ transform: translateY(0);
3745
+ }
3746
+
3747
+ /* Modal Animations */
3748
+ @keyframes modalFadeIn {
3749
+ from {
3750
+ opacity: 0;
3751
+ }
3752
+ to {
3753
+ opacity: 1;
3754
+ }
3755
+ }
3756
+
3757
+ @keyframes overlayFadeIn {
3758
+ from {
3759
+ opacity: 0;
3760
+ }
3761
+ to {
3762
+ opacity: 1;
3763
+ }
3764
+ }
3765
+
3766
+ @keyframes modalSlideUp {
3767
+ from {
3768
+ opacity: 0;
3769
+ transform: translateY(30px) scale(0.95);
3770
+ }
3771
+ to {
3772
+ opacity: 1;
3773
+ transform: translateY(0) scale(1);
3774
+ }
3775
+ }
3776
+
3777
+ @keyframes iconPulse {
3778
+ 0%, 100% {
3779
+ transform: scale(1);
3780
+ }
3781
+ 50% {
3782
+ transform: scale(1.1);
3783
+ }
3784
+ }
3785
+
3786
+ /* Mobile Responsive */
3787
+ @media (max-width: 640px) {
3788
+ .billing-modal-content {
3789
+ max-width: calc(100% - 2rem);
3790
+ }
3791
+
3792
+ .billing-modal-header {
3793
+ padding: 1.5rem 1.5rem 1rem;
3794
+ }
3795
+
3796
+ .billing-modal-body {
3797
+ padding: 1.5rem;
3798
+ }
3799
+
3800
+ .billing-modal-footer {
3801
+ flex-direction: column;
3802
+ padding: 1rem 1.5rem 1.5rem;
3803
+ }
3804
+
3805
+ .billing-modal-btn {
3806
+ width: 100%;
3807
+ }
3808
+ }
3809
+
3810
+
3811
+