@import"https://fonts.googleapis.com/css2?family=Open+Sauce+One:wght@300;400;500;600;700;800&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{font-family:Open Sauce One,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.5;font-weight:400;color:#213547;background-color:#f2f5f6;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;background-color:#f2f5f6}h1{font-size:2.5em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer;transition:all .25s ease}button:focus,button:focus-visible{outline:2px solid #667eea;outline-offset:2px}input{font-family:inherit}input:focus{outline:none}.home-container{max-width:1200px;margin:0 auto;padding:2rem;background:#f2f5f6;font-family:Open Sauce One,sans-serif}.home-header{text-align:center;margin-bottom:3rem}.home-header h1{font-size:2.5rem;margin-bottom:.5rem;color:#002d3d;font-weight:700}.home-header p{font-size:1.2rem;color:#002d3d}.providers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem;margin-top:2rem}.provider-card{background:#fff;border:2px solid #C9D3D6;border-radius:12px;padding:2rem;text-decoration:none;color:inherit;transition:all .3s ease;position:relative;cursor:pointer;display:flex;flex-direction:column;gap:.5rem;height:160px;min-height:160px}.provider-icon{font-size:3rem;margin-bottom:.5rem;transition:transform .3s ease;display:flex;align-items:center;justify-content:center;flex:1}.provider-logo{max-height:4rem;max-width:100%;width:auto;height:auto;object-fit:contain}.provider-card:hover .provider-icon{transform:scale(1.1)}.provider-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px #1eb1e626;border-color:#1eb1e6}.provider-card h2{font-size:1.5rem;margin-bottom:.5rem;margin-top:0;color:#002d3d}.provider-card p{color:#002d3d;margin-bottom:1rem}.card-arrow{position:absolute;bottom:1.5rem;right:1.5rem;font-size:1.5rem;color:#1eb1e6;transition:transform .3s ease}.provider-card:hover .card-arrow{transform:translate(5px)}.header-logo{height:80px;display:block}.provider-container{max-width:900px;margin:0 auto;padding:2rem;font-family:Open Sauce One,sans-serif}.page-header{margin-bottom:2rem}.back-button{display:inline-block;color:#002d3d;text-decoration:none;margin-bottom:1rem;font-size:1rem;transition:color .3s ease}.back-button:hover{color:#1eb1e6}.page-header h1{font-size:2.5rem;margin-bottom:.5rem;color:#333}.page-header p{color:#666;font-size:1.1rem}.content-wrapper{background:#fff;border-radius:12px;padding:2rem}.api-config-section{margin-bottom:0}.api-key-section{margin-bottom:2rem}.api-config-section h3{margin-top:0;margin-bottom:1rem;color:#333;font-size:1.25rem}.config-row{display:grid;grid-template-columns:2fr 1fr;gap:1rem;align-items:start}.config-field{display:flex;flex-direction:column}.config-field label{display:block;font-weight:600;margin-bottom:.5rem;color:#333}.detecting-label{font-size:.85rem;font-weight:400;color:#667eea;font-style:italic}.key-selector,.api-key-input,.voice-id-input,.model-selector,.setting-select,.region-selector,.filter-selector{width:100%;padding:.75rem;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;transition:border-color .3s ease;background-color:#fff}.key-selector:focus,.api-key-input:focus,.voice-id-input:focus,.model-selector:focus,.setting-select:focus,.region-selector:focus,.filter-selector:focus{outline:none;border-color:#667eea}.key-selector,.model-selector,.setting-select,.region-selector,.filter-selector{cursor:pointer;text-align:left}.key-selector{margin-bottom:1rem}.key-selector-group{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.key-selector-group label,.api-key-section label,.voice-selection-section label,.setting-group label{display:block;font-weight:600;margin-bottom:.5rem;color:#333}.custom-key-input{margin-top:1rem}.custom-key-input label{display:block;font-weight:600;margin-bottom:.5rem;color:#333;font-size:.95rem}.custom-key-input input{width:100%}.api-note{margin-top:.5rem;font-size:.9rem;color:#666}.warning-text{color:#f5576c;font-weight:600}.api-note a{color:#667eea;text-decoration:none}.api-note a:hover{text-decoration:underline}.settings-section{margin-bottom:2rem;padding-top:2rem;border-top:1px solid #e0e0e0}.settings-section h3{margin-top:0;margin-bottom:1rem;color:#333;font-size:1.25rem}.setting-group{margin-bottom:1rem;text-align:left;display:flex;flex-direction:column;align-items:flex-start}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-weight:600;color:#333}.checkbox-label input[type=checkbox]{width:20px;height:20px;cursor:pointer}.recording-section{margin-top:2rem;padding-top:2rem;border-top:1px solid #e0e0e0;text-align:center}.recording-section h2{font-size:1.5rem;margin-bottom:1.5rem;color:#333;text-align:center}.recording-section h3{font-size:1.2rem;margin-bottom:1rem;color:#333;text-align:left}.recording-controls{display:flex;gap:1rem;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:1rem}.upload-divider{color:#999;font-weight:600;font-size:1rem}.record-button,.upload-button{display:flex;align-items:center;gap:.5rem;padding:1rem 2rem;font-size:1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#1eb1e6,#002d3d);border:none;border-radius:8px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.upload-button{color:#fff!important;background:linear-gradient(135deg,#1eb1e6,#002d3d)}.record-button:hover:not(:disabled),.upload-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 2px 8px #002d3d}.upload-button:hover:not(:disabled){box-shadow:0 2px 8px #002d3d}.record-button:disabled,.upload-button:disabled,.upload-button:has(input:disabled){opacity:.5;cursor:not-allowed;pointer-events:none}.record-button.stop{background:linear-gradient(135deg,#f093fb,#f5576c)}.mic-icon,.stop-icon,.upload-icon{font-size:1.2rem}.recording-indicator{display:flex;align-items:center;gap:.75rem;padding:1rem;background:linear-gradient(135deg,#ffeef8,#ffe8f5);border-radius:8px;font-weight:600;color:#764ba2;margin-bottom:1rem}.pulse{width:12px;height:12px;background:#f5576c;border-radius:50%;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}.uploaded-file-container{margin-top:1rem;display:flex;align-items:center;justify-content:center;gap:.75rem}.uploaded-file-info{padding:.75rem 1rem;background:#f2f5f6;border:2px solid #002D3D;border-radius:8px;color:#002d3d;font-weight:500;display:inline-flex;align-items:center}.play-uploaded-button{background:#667eea;color:#fff;border:none;border-radius:6px;padding:.5rem 1rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.3rem;white-space:nowrap}.play-uploaded-button:hover{background:#5568d3;transform:translateY(-1px);box-shadow:0 2px 8px #002d3d}.play-uploaded-button:active{transform:translateY(0)}.transcribe-uploaded-button{background:#1eb1e6;color:#fff!important;border:none;border-radius:6px;padding:.5rem 1rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.3rem;white-space:nowrap}.transcribe-uploaded-button:hover{background:#1eb1e6;transform:translateY(-1px);box-shadow:0 2px 8px #002d3d}.transcribe-uploaded-button:active{transform:translateY(0)}.audio-player-section{margin:2rem 0;padding:1.5rem;background:#f8f9fa;border-radius:12px}.audio-player-section h4{margin-top:0;color:#333;margin-bottom:1rem}.audio-player{width:100%;margin-top:.5rem}.loading-indicator,.loading-models{display:flex;flex-direction:column;align-items:center;gap:1rem;margin:2rem 0;padding:2rem;background:#f8f9fa;border-radius:12px}.spinner{width:50px;height:50px;border:4px solid #e0e0e0;border-top-color:#667eea;border-radius:50%;animation:spin 1s linear infinite}.spinner-icon{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-indicator p,.loading-models p{color:#666;font-size:1.1rem;margin:0}.error-message{padding:1rem;background:#ffebee;border-left:4px solid #f44336;border-radius:4px;color:#c62828;margin-bottom:1rem}.transcript-section{padding-top:2rem}.transcript-section h3{font-size:1.2rem;margin-bottom:1rem;color:#333;text-align:left}.transcript-box{background:#f7fafc;border:2px solid #e0e0e0;border-radius:8px;padding:1.5rem;min-height:100px;font-size:1rem;line-height:1.6;color:#333;white-space:pre-wrap;word-wrap:break-word;margin-bottom:1.5rem;text-align:left}.transcription-time{margin-bottom:10px;color:#002d3d;font-weight:700;text-align:left;display:flex;align-items:center;gap:.5rem}.copy-button{padding:.75rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.copy-button:hover{transform:translateY(-1px);box-shadow:0 2px 8px #002d3d}.manual-text-section{margin-bottom:2rem;text-align:left}.manual-text-section label{display:block;font-weight:600;margin-bottom:.5rem;color:#333;font-size:1rem}.manual-text-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.manual-text-header label:first-child{margin-bottom:0}.upload-text-button{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#1eb1e6;color:#fff!important;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;margin-bottom:0;border:none}.upload-text-button:hover{transform:translateY(-2px);box-shadow:0 2px 8px #002d3d;color:#fff!important}.upload-text-button:active{transform:translateY(0);color:#fff!important}.manual-text-input{width:100%;padding:1rem;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;font-family:inherit;line-height:1.6;min-height:8rem;resize:vertical;transition:border-color .3s ease;background:#fff}.manual-text-input:focus{outline:none;border-color:#667eea}.similarity-score{margin-top:1rem;padding:1rem;background:#f0f4ff;border-radius:8px;border:2px solid #667eea}.similarity-score strong{color:#667eea;font-size:1.1rem;margin-right:.5rem}.similarity-bar{margin-top:.75rem;height:24px;background:#e0e0e0;border-radius:12px;overflow:hidden;position:relative}.similarity-fill{height:100%;background:linear-gradient(135deg,#48bb78,#38a169);transition:width .5s ease;display:flex;align-items:center;justify-content:flex-end;padding-right:.5rem;border-radius:12px}.model-selection{margin:1rem 0}.model-selection label{display:block;font-weight:600;margin-bottom:.5rem;color:#333;font-size:.95rem;text-align:left}.model-description{color:#666;font-size:.9rem;margin-top:.5rem;padding:.5rem;background:#f7fafc;border-radius:4px}.model-info{color:#764ba2;font-size:.95rem;padding:.75rem;background:linear-gradient(135deg,#ffeef8,#f3e5f5);border-radius:6px;margin:.5rem 0 1rem}.model-info strong{color:#5a1c6b}.tts-section{text-align:center;padding:2rem 0;border-top:1px solid #e0e0e0;margin-top:2rem}.tts-section h2{font-size:1.5rem;margin-bottom:1.5rem;color:#333;text-align:center}.tts-section h3{font-size:1.2rem;margin-bottom:1rem;color:#333;text-align:left}.voice-generation-section{margin-top:2rem}.voice-selection-section{margin:2rem 0;text-align:left;padding-bottom:2rem;border-bottom:1px solid #e0e0e0}.voice-selection-section>label{display:block;font-weight:600;margin-bottom:1rem;color:#333;font-size:1.1rem}.generate-button{display:inline-flex;align-items:center;gap:.5rem;padding:1rem 2rem;font-size:1.1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50px;cursor:pointer;transition:all .3s ease;margin-bottom:1rem}.generate-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 2px 8px #002d3d}.generate-button:disabled{opacity:.6;cursor:not-allowed}.speaker-icon{font-size:1.5rem}.test-connection-button{padding:.75rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap;min-width:180px}.test-connection-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 2px 8px #002d3d}.test-connection-button:disabled{opacity:.5;cursor:not-allowed}.voice-filters{display:flex;gap:1.5rem;margin:1rem 0;padding:1rem;background:#f7fafc;border-radius:8px;border:1px solid #e0e0e0}.filter-group{display:flex;flex-direction:column;gap:.5rem;flex:1}.filter-group label{font-weight:600;font-size:.9rem;color:#333}.voices-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;max-height:500px;overflow-y:auto;padding:.5rem}.voice-card{background:#f7fafc;border:2px solid #e0e0e0;border-radius:8px;padding:1rem;cursor:pointer;transition:all .3s ease}.voice-card:hover{border-color:#667eea;background:#eef2ff;transform:translateY(-2px);box-shadow:0 2px 8px #002d3d}.voice-card.selected{border-color:#667eea;background:linear-gradient(135deg,#eef2ff,#e0e7ff);box-shadow:0 2px 8px #002d3d}.voice-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.voice-card-header h4{margin:0;font-size:1.1rem;color:#333}.play-preview-button{background:#667eea;color:#fff;border:none;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;transition:all .3s ease;padding:0;flex-shrink:0}.play-preview-button:hover{background:#5568d3;transform:scale(1.15)}.play-preview-button:active{transform:scale(.95)}.voice-card-details{display:flex;flex-direction:column;gap:.4rem}.voice-card-details span{font-size:.85rem;color:#666}.voices-table-container{max-height:500px;overflow-y:auto;border:1px solid #e0e0e0;border-radius:8px;margin-top:1rem}.voices-table{width:100%;border-collapse:collapse;background:#fff}.voices-table thead{position:sticky;top:0;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;z-index:10}.voices-table th{padding:1rem .75rem;text-align:left;font-weight:600;font-size:.9rem;border-bottom:2px solid #5568d3}.voices-table th:first-child{text-align:left}.voices-table tbody tr{cursor:pointer;transition:all .2s ease;border-bottom:1px solid #e0e0e0}.voices-table tbody tr:hover{background:#eef2ff}.voices-table tbody tr.selected{background:linear-gradient(135deg,#eef2ff,#e0e7ff);border-left:4px solid #667eea}.voices-table td{padding:.9rem .75rem;font-size:.9rem;color:#333}.voices-table td.voice-name{font-weight:600;color:#667eea}.voices-table td.voice-description{font-size:.85rem;color:#666}.voices-table td.voice-use-case{font-size:.85rem;color:#888}.voices-table .play-preview-button{width:32px;height:32px;font-size:.9rem}.selected-voice-info{color:#667eea;font-size:.95rem;padding:.75rem;background:#eef2ff;border-radius:6px;margin:.5rem 0 1rem;text-align:left}.selected-voice-info strong{color:#5568d3}.selected-voice-info span,.selected-voice-info .voice-detail{color:#666;font-size:.9rem}.info-section{margin-top:2rem;padding:1.5rem;background:linear-gradient(135deg,#eef2ff,#e0e7ff);border-radius:8px}.info-section h3{font-size:1.3rem;margin-bottom:1rem;color:#333}.info-section ul{list-style:none;padding:0;margin:0}.info-section li{padding:.75rem 0;color:#555;line-height:1.6}.info-section strong{color:#333}.info-message{color:#667eea;font-size:1rem;padding:1rem;background:#eef2ff;border-radius:8px;border-left:4px solid #667eea;margin:1rem 0}.events-section{margin-bottom:2rem}.events-section h3{font-size:1.3rem;margin-bottom:1rem;color:#333}.events-list{background:#f8f9fa;border:2px solid #e0e0e0;border-radius:8px;padding:1rem;max-height:300px;overflow-y:auto}.event-item{display:flex;align-items:center;gap:1rem;padding:.75rem;background:#fff;border-radius:6px;margin-bottom:.5rem;box-shadow:0 2px 8px #002d3d}.event-item:last-child{margin-bottom:0}.event-time{font-size:.85rem;color:#666;min-width:80px}.event-type{padding:.25rem .75rem;border-radius:4px;font-size:.9rem;font-weight:600}.event-type.startofturn{background:#e3f2fd;color:#1976d2}.event-type.endofturn{background:#f3e5f5;color:#7b1fa2}.event-type.connection{background:#e8f5e9;color:#388e3c}.models-list{margin:1rem 0}.models-list h4{font-size:1.1rem;margin-bottom:.75rem;color:#333}.models-table-container,.models-grid{margin-top:1rem}.models-table{width:100%;border-collapse:collapse;background:#fff}.models-table thead{background:#f7fafc}.models-table th{padding:1rem .75rem;text-align:left;font-weight:600;border-bottom:2px solid #e0e0e0}.models-table tbody tr{border-bottom:1px solid #e0e0e0}.models-table tbody tr:hover{background:#f7fafc}.models-table tbody tr.audio-model-row{background:#ffeef8}.models-table tbody tr.audio-model-row:hover{background:#ffd9f0}.models-table td{padding:.9rem .75rem;font-size:.9rem}.model-name-cell{font-weight:600;color:#667eea}.no-models{padding:2rem;text-align:center;color:#666;background:#f7fafc;border-radius:8px;margin:1rem 0}@media(max-width:768px){.provider-container{padding:1rem}.page-header h1{font-size:2rem}.recording-controls{flex-direction:column;gap:1rem}.record-button,.upload-button{width:100%;justify-content:center}.upload-divider{display:none}.config-row{grid-template-columns:1fr}.voice-filters{flex-direction:column}.voices-grid{grid-template-columns:1fr}}#root{min-height:100vh;width:100%;font-family:Open Sauce One,sans-serif}