.app{flex-direction:column;align-items:center;width:100%;min-height:100vh;padding:28px 20px 40px;display:flex}.header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;width:100%;max-width:980px;padding:8px 4px 24px;display:flex}.brand{align-items:center;gap:14px;display:flex}.logo{color:#fff;background:linear-gradient(135deg, var(--accent), var(--accent2));border-radius:16px;place-items:center;width:52px;height:52px;display:grid;box-shadow:0 8px 28px #6366f166,inset 0 1px #ffffff40}.logo svg{width:26px;height:26px}.brand-text h1{letter-spacing:-.02em;background:linear-gradient(120deg,#fff 30%,#b9bdf3 90%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.55rem;font-weight:800}.brand-text p{color:var(--text2);margin-top:2px;font-size:.86rem}.header-lang{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;align-items:center;gap:8px;padding:8px 14px;font-size:.85rem;font-weight:600;display:inline-flex}.header-flag{font-size:1.1rem;line-height:1}.card{background:var(--surface);border:1px solid var(--border);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:22px;width:100%;max-width:980px;padding:26px;box-shadow:0 24px 60px #00000073}.section{margin-bottom:26px}.section-title{text-transform:uppercase;letter-spacing:.09em;color:var(--text2);align-items:center;gap:10px;margin-bottom:12px;font-size:.8rem;font-weight:700;display:flex}.step{background:var(--accent-soft);color:#b7baf8;letter-spacing:0;border:1px solid #6366f159;border-radius:7px;place-items:center;width:22px;height:22px;font-size:.72rem;font-weight:800;display:inline-grid}.lang-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;display:grid}.lang-card{background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;color:var(--text);text-align:left;flex-direction:column;align-items:flex-start;gap:3px;padding:12px 14px;font-family:inherit;transition:border-color .16s,background .16s,transform .16s;display:flex}.lang-card:hover{border-color:var(--border-strong);transform:translateY(-1px)}.lang-card.active{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px #6366f126}.lang-flag{font-size:1.35rem;line-height:1.2}.lang-name{font-size:.86rem;font-weight:600}.lang-count{color:var(--text3);font-size:.7rem}.lang-card.active .lang-count{color:#a5a8ef}.voice-grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;display:grid}.voice-chip{background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;color:var(--text);text-align:left;flex-direction:column;align-items:flex-start;gap:6px;padding:12px;font-family:inherit;transition:border-color .16s,background .16s,transform .16s;display:flex}.voice-chip:hover{border-color:var(--border-strong);transform:translateY(-1px)}.voice-chip.active{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px #6366f126}.voice-avatar{text-transform:uppercase;border-radius:50%;place-items:center;width:30px;height:30px;font-size:.85rem;font-weight:800;display:grid}.voice-avatar.f{color:#f9a8d4;background:linear-gradient(135deg,#ec489940,#ec48991a);border:1px solid #ec489959}.voice-avatar.m{color:#93c5fd;background:linear-gradient(135deg,#3b82f640,#3b82f61a);border:1px solid #3b82f659}.voice-name{font-size:.88rem;font-weight:600}.gender-badge{letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:2px 8px;font-size:.62rem;font-weight:700}.gender-badge.f{color:#f9a8d4;background:#ec48991f}.gender-badge.m{color:#93c5fd;background:#3b82f61f}.textarea-card{background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--radius);transition:border-color .16s,box-shadow .16s;overflow:hidden}.textarea-card:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px #6366f126}.textarea-card textarea{resize:vertical;width:100%;min-height:150px;color:var(--text);background:0 0;border:none;outline:none;padding:16px;font-family:inherit;font-size:.95rem;line-height:1.65;display:block}.textarea-card textarea::placeholder{color:var(--text3)}.textarea-footer{border-top:1px solid var(--border);justify-content:space-between;align-items:center;gap:10px;padding:8px 14px;display:flex}.char-count{color:var(--text3);font-size:.72rem}.clear-btn{color:var(--text2);cursor:pointer;background:0 0;border:none;font-family:inherit;font-size:.75rem;font-weight:600;transition:color .15s}.clear-btn:hover{color:var(--danger)}.speed-wrap{flex-direction:column;gap:12px;display:flex}.speed-wrap input[type=range]{appearance:none;background:linear-gradient(90deg, var(--accent) var(--pct,33%), #ffffff1f var(--pct,33%));cursor:pointer;border-radius:999px;outline:none;width:100%;height:6px}.speed-wrap input[type=range]::-webkit-slider-thumb{appearance:none;border:3px solid var(--accent);background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .12s;box-shadow:0 2px 10px #0006}.speed-wrap input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}.speed-wrap input[type=range]::-moz-range-thumb{border:3px solid var(--accent);background:#fff;border-radius:50%;width:18px;height:18px;box-shadow:0 2px 10px #0006}.speed-presets{flex-wrap:wrap;gap:8px;display:flex}.speed-chip{border:1.5px solid var(--border);background:var(--surface2);color:var(--text2);cursor:pointer;border-radius:999px;padding:6px 14px;font-family:inherit;font-size:.78rem;font-weight:700;transition:all .15s}.speed-chip:hover{border-color:var(--border-strong);color:var(--text)}.speed-chip.active{background:var(--accent);border-color:var(--accent);color:#fff}.speed-value{color:#b7baf8;align-self:flex-end;font-size:.85rem;font-weight:800}.generate-btn{border-radius:var(--radius);background:linear-gradient(120deg, var(--accent), var(--accent2));color:#fff;letter-spacing:.01em;cursor:pointer;border:none;justify-content:center;align-items:center;gap:10px;width:100%;padding:16px;font-family:inherit;font-size:1rem;font-weight:700;transition:transform .14s,box-shadow .14s,opacity .14s;display:flex;box-shadow:0 10px 30px #6366f159,inset 0 1px #fff3}.generate-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 14px 36px #6366f173,inset 0 1px #fff3}.generate-btn:active:not(:disabled){transform:translateY(0)}.generate-btn:disabled{opacity:.45;cursor:not-allowed}.btn-icon{width:19px;height:19px}.hint{text-align:center;color:var(--text3);margin-top:10px;font-size:.74rem}.equalizer{align-items:flex-end;gap:3px;height:16px;display:inline-flex}.equalizer i{background:#fff;border-radius:2px;width:3px;animation:.9s ease-in-out infinite eq}.equalizer i:first-child{height:40%;animation-delay:0s}.equalizer i:nth-child(2){height:90%;animation-delay:.15s}.equalizer i:nth-child(3){height:60%;animation-delay:.3s}.equalizer i:nth-child(4){height:100%;animation-delay:.45s}@keyframes eq{0%,to{transform:scaleY(.5)}50%{transform:scaleY(1)}}.error{border-radius:var(--radius-sm);color:#fca5a5;background:#f871711a;border:1px solid #f871714d;align-items:center;gap:10px;margin-top:16px;padding:12px 16px;font-size:.87rem;display:flex}.error-icon{font-size:1rem}.player-card{background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--radius);margin-top:22px;padding:18px;animation:.25s pop}@keyframes pop{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.player-top{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px;display:flex}.player-title{font-size:.95rem;font-weight:700}.player-meta{color:var(--text2);margin-top:2px;font-size:.78rem}.player-actions{flex-wrap:wrap;gap:8px;display:flex}.action-btn{border-radius:var(--radius-sm);cursor:pointer;padding:8px 16px;font-family:inherit;font-size:.8rem;font-weight:700;transition:all .15s}.action-btn.ghost{background:var(--surface2);border:1.5px solid var(--border);color:var(--text)}.action-btn.ghost:hover{border-color:var(--accent);color:#c7c9f7}.action-btn.solid{background:var(--success);border:1.5px solid var(--success);color:#052e2b}.action-btn.solid:hover{filter:brightness(1.1)}.player-card audio{border-radius:var(--radius-sm);width:100%}.phonemes{margin-top:12px}.phonemes summary{cursor:pointer;color:var(--text2);-webkit-user-select:none;user-select:none;font-size:.76rem;font-weight:700}.phonemes summary:hover{color:var(--text)}.phonemes code{border-radius:var(--radius-sm);border:1px solid var(--border);color:var(--text2);word-break:break-all;background:#00000059;max-height:140px;margin-top:8px;padding:12px;font-family:Fira Code,Cascadia Code,Consolas,monospace;font-size:.72rem;line-height:1.7;display:block;overflow-y:auto}.footer{color:var(--text3);margin-top:26px;font-size:.75rem}@media (width<=640px){.app{padding:18px 12px 30px}.card{border-radius:18px;padding:18px}.header{padding-bottom:18px}.brand-text p{font-size:.78rem}.lang-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.voice-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.player-top{flex-direction:column;align-items:flex-start}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#08080f;--surface:#ffffff09;--surface2:#ffffff0f;--border:#ffffff17;--border-strong:#ffffff29;--text:#f1f2f8;--text2:#9aa0b4;--text3:#6b7188;--accent:#6366f1;--accent2:#a855f7;--accent-soft:#6366f124;--success:#2dd4bf;--danger:#f87171;--radius:16px;--radius-sm:10px;--font:"Inter", "Segoe UI", system-ui, -apple-system, sans-serif}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{font-family:var(--font);background:radial-gradient(900px 500px at 15% -10%, #6366f129, transparent 60%), radial-gradient(800px 500px at 110% 15%, #a855f71f, transparent 55%), radial-gradient(700px 600px at 50% 120%, #2dd4bf12, transparent 60%), var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;min-height:100vh}#root{flex-direction:column;min-height:100vh;display:flex}::selection{background:#6366f159}