@import "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap";:root{--bg:#0b0d12;--surface:#12141c;--surface-2:#191d29;--border:#262b3a;--border-soft:#1f2330;--text:#f2efe6;--text-muted:#9297a8;--text-faint:#5c6272;--accent:#e8b84b;--accent-dim:#a9863c;--accent-soft:#e8b84b1f;--accent-soft-strong:#e8b84b38;--record:#e2543f;--record-soft:#e2543f26;--font-display:"Fraunces", Georgia, serif;--font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", "SFMono-Regular", Menlo, monospace;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--shadow-card:0 1px 2px #0006, 0 20px 40px -20px #0009;--shadow-focus:0 0 0 3px var(--accent-soft-strong)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:radial-gradient(ellipse 900px 500px at 50% -10%, #e8b84b12, transparent), var(--bg);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;min-height:100vh}h1,h2,h3{font-family:var(--font-display);color:var(--text);letter-spacing:-.01em;font-weight:600}a{color:inherit}:focus-visible{box-shadow:var(--shadow-focus);border-radius:var(--radius-sm);outline:none}.navbar{border-bottom:1px solid var(--border-soft);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10;background:#0b0d12d9;justify-content:space-between;align-items:center;gap:24px;padding:18px 32px;display:flex;position:sticky;top:0}.navbar-brand{font-family:var(--font-display);letter-spacing:-.01em;align-items:center;gap:10px;font-size:19px;font-weight:600;display:flex}.navbar-links{gap:8px;display:flex}.navbar-links a{color:var(--text-muted);border-radius:var(--radius-sm);padding:8px 14px;font-size:14px;font-weight:500;text-decoration:none;transition:color .15s,background .15s}.navbar-links a:hover{color:var(--text);background:var(--surface-2)}.navbar-links a.active{color:var(--bg);background:var(--accent)}.page{text-align:center;flex-direction:column;align-items:center;max-width:640px;margin:0 auto;padding:10px 24px 60px;display:flex}.page h1{margin:0 0 6px;font-size:34px}.page-kicker{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;font-size:11px}.page-sub{color:var(--text-muted);max-width:44ch;margin:0 0 40px;font-size:15px;line-height:1.6}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;box-shadow:var(--shadow-card);flex-direction:column;align-items:center;gap:18px;padding:28px;display:flex}textarea,select,input[type=text]{background:var(--surface-2);border:1px solid var(--border);width:100%;color:var(--text);font-family:var(--font-body);border-radius:var(--radius-md);resize:vertical;padding:14px 16px;font-size:16px;transition:border-color .15s}textarea{min-height:140px;line-height:1.6}textarea::placeholder{color:var(--text-faint)}textarea:hover,select:hover{border-color:var(--accent-dim)}select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);background-position:calc(100% - 18px),calc(100% - 13px);background-repeat:no-repeat;background-size:5px 5px,5px 5px;padding-right:40px}.row{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;width:100%;display:flex}.voice-picker{text-align:left;flex:260px;min-width:220px;position:relative}.voice-picker-trigger{background:var(--surface-2);border:1px solid var(--border);width:100%;color:var(--text);border-radius:var(--radius-md);font-family:var(--font-body);text-align:left;align-items:center;gap:8px;padding:14px 16px;font-size:16px;display:flex}.voice-picker-trigger:hover{border-color:var(--accent-dim);background:#1e2330}.voice-picker-name{white-space:nowrap;text-overflow:ellipsis;font-weight:500;overflow:hidden}.voice-picker-locale{color:var(--text-muted);font-family:var(--font-mono);white-space:nowrap;margin-left:auto;padding-left:8px;font-size:12px}.voice-picker-placeholder{color:var(--text-faint)}.voice-picker-caret{color:var(--text-muted);margin-left:4px;font-size:25px}.voice-picker-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-card);z-index:20;flex-direction:column;max-height:min(360px,60vh);display:flex;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow:hidden}.voice-picker-search{border:none;border-bottom:1px solid var(--border-soft);background:var(--surface-2);color:var(--text);font-size:16px;font-family:var(--font-body);border-radius:0;padding:12px 14px}.voice-picker-search:focus-visible{box-shadow:none;outline:none}.voice-picker-list{padding:6px;overflow-y:auto}.voice-picker-group-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);padding:10px 10px 4px;font-size:10.5px}.voice-picker-option{border-radius:var(--radius-sm);cursor:pointer;color:var(--text);justify-content:space-between;align-items:center;gap:10px;padding:9px 10px;font-size:14px;display:flex}.voice-picker-option.highlighted{background:var(--surface-2)}.voice-picker-option.selected{color:var(--accent)}.voice-picker-gender{font-family:var(--font-mono);color:var(--text-faint);flex-shrink:0;font-size:11px}.voice-picker-empty{color:var(--text-muted);text-align:center;padding:18px;font-size:13px}button{font-family:var(--font-body);border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface-2);color:var(--text);cursor:pointer;padding:12px 20px;font-size:14px;font-weight:600;transition:transform .1s,background .15s,border-color .15s,opacity .15s}button:hover:not(:disabled){border-color:var(--accent-dim);background:#1e2330}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.45;cursor:not-allowed}.row>button:first-of-type,button.primary{background:var(--accent);border-color:var(--accent);color:#1a1300}.row>button:first-of-type:hover:not(:disabled),button.primary:hover:not(:disabled){background:#f0c563;border-color:#f0c563}button.recording{background:var(--record);border-color:var(--record);color:#fff;position:relative}button.recording:before{content:"";background:#fff;border-radius:50%;width:8px;height:8px;margin-right:8px;animation:1.1s ease-in-out infinite pulse-dot;display:inline-block}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.25}}.status{font-family:var(--font-mono);color:var(--text-muted);min-height:18px;font-size:12.5px}.result{border-top:1px solid var(--border-soft);flex-direction:column;align-items:center;gap:12px;width:100%;margin-top:4px;padding-top:18px;display:flex}.result audio{width:100%;height:40px}.dl{color:var(--accent);border:1px solid var(--accent-dim);background:var(--accent-soft);border-radius:var(--radius-sm);margin-right:8px;padding:9px 16px;font-size:13px;font-weight:500;text-decoration:none;transition:background .15s}.dl:hover{background:var(--accent-soft-strong)}.transcript{color:var(--text);text-align:left;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);width:100%;padding:18px 20px;font-size:16px;line-height:1.7}.meta{font-family:var(--font-mono);color:var(--text-faint);font-size:12px}.advanced{border-top:1px solid var(--border-soft);width:100%;padding-top:14px}.advanced-toggle{width:100%;color:var(--text-muted);letter-spacing:.01em;background:0 0;border:none;justify-content:space-between;align-items:center;padding:6px 2px;font-size:13px;font-weight:600;display:flex}.advanced-toggle:hover{color:var(--text);background:0 0;border-color:#0000}.advanced-caret{color:var(--text-faint);font-size:40px;transition:transform .15s}.advanced-caret.open{transform:rotate(180deg)}.advanced-body{text-align:left;flex-direction:column;gap:20px;padding:18px 2px 4px;display:flex}.option-slider-head{justify-content:space-between;align-items:baseline;margin-bottom:8px;display:flex}.option-slider-head label{color:var(--text);font-size:13.5px;font-weight:500}.option-slider-value{font-family:var(--font-mono);color:var(--accent);text-align:right;min-width:3ch;font-size:12.5px}.option-slider input[type=range]{appearance:none;background:var(--border);border-radius:2px;outline:none;width:100%;height:4px;margin:0}.option-slider input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;border:2px solid var(--bg);width:16px;height:16px;box-shadow:0 0 0 1px var(--accent-dim);border-radius:50%}.option-slider input[type=range]::-moz-range-thumb{background:var(--accent);cursor:pointer;border:2px solid var(--bg);width:16px;height:16px;box-shadow:0 0 0 1px var(--accent-dim);border-radius:50%}.option-slider-hint{color:var(--text-faint);margin:6px 0 0;font-size:11.5px}.advanced-reset{border:1px solid var(--border);color:var(--text-muted);background:0 0;align-self:flex-start;padding:7px 12px;font-size:12.5px}.advanced-reset:hover{color:var(--text);border-color:var(--accent-dim);background:var(--surface-2)}.waveform{justify-content:center;align-items:center;gap:3px;height:22px;display:flex}.waveform.decorative{opacity:.5;margin-bottom:28px}.waveform span{background:var(--accent);border-radius:2px;width:3px;animation:1.2s ease-in-out infinite wave}.waveform.idle span{opacity:.35;height:6px;animation-play-state:paused}.waveform span:first-child{height:8px;animation-delay:-1.1s}.waveform span:nth-child(2){height:16px;animation-delay:-.9s}.waveform span:nth-child(3){height:22px;animation-delay:-.7s}.waveform span:nth-child(4){height:12px;animation-delay:-.5s}.waveform span:nth-child(5){height:19px;animation-delay:-.3s}.waveform span:nth-child(6){height:9px;animation-delay:-.1s}.waveform span:nth-child(7){height:15px;animation-delay:-.6s}@keyframes wave{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}@media (prefers-reduced-motion:reduce){.waveform span,button.recording:before{animation:none!important}}@media (width<=560px){.navbar{padding:14px 18px}.page{padding:40px 18px 72px}.page h1{font-size:27px}.row{align-items:stretch}.row .voice-picker,.row button{width:100%}}@media (width<=420px){.navbar{flex-wrap:wrap;justify-content:center;row-gap:10px;padding:14px 16px}.navbar-brand{font-size:17px}.navbar-links a{padding:7px 10px;font-size:13px}.dl{text-align:center;margin-bottom:8px;margin-right:0;display:block}}
