.speech-playground-component{flex-direction:column;gap:24px;width:100%;max-width:750px;margin:0 auto;display:flex}.speech-playground-component .panel,.speech-playground-component .input,.speech-playground-component .output{flex-direction:column;gap:12px;min-width:0;display:flex}.speech-playground-component .panel{gap:24px}.speech-playground-component .upload-row{color:var(--secondary-dark-grey);align-items:center;gap:8px;display:flex}.speech-playground-component .upload-link{color:var(--primary-bright-blue);font:inherit;cursor:pointer;background:0 0;border:0;padding:0;text-decoration:underline}.speech-playground-component .upload-link:disabled{color:var(--secondary-mid-grey);cursor:not-allowed}.speech-playground-component .output{box-sizing:border-box;background-color:var(--secondary-light-grey);border:1px solid var(--secondary-mid-grey);min-height:200px;padding:16px}.speech-playground-component .placeholder{color:var(--secondary-mid-grey);margin:auto}.speech-playground-component .state{text-align:center;color:var(--secondary-dark-grey);flex-direction:column;align-items:center;gap:12px;margin:auto;display:flex}.speech-playground-component .result{flex-direction:column;gap:8px;display:flex}.speech-playground-component .result h4{color:var(--primary-bright-blue)}.speech-playground-component .result .transcription{color:var(--primary-dark-blue);margin:0 0 12px;line-height:1.6}.speech-playground-component .timestamps{border-collapse:collapse;width:100%}.speech-playground-component .timestamps th,.speech-playground-component .timestamps td{border-bottom:1px solid var(--secondary-grey);text-align:left;vertical-align:top;padding:6px 8px}.speech-playground-component .timestamps th{color:var(--secondary-dark-grey);font-weight:var(--font-weight-title)}.speech-playground-component .timestamps td.time{white-space:nowrap;font-variant-numeric:tabular-nums;width:1%;color:var(--secondary-dark-grey)}.speech-playground-component .audio-component{box-shadow:none;background-color:#ffffff0d;border:1px solid #ffffff1f;border-radius:0}.speech-playground-component .audio-component .file-name,.speech-playground-component .audio-component .timer,.speech-playground-component .audio-component .max-time{color:var(--primary-white)}.speech-playground-component .audio-component .level-bars.recording,.speech-playground-component .audio-component .ring{color:#ff6b6b}.speech-playground-component .audio-component .level-bars.playing{color:#4ade80}.speech-playground-component .audio-component .max-time{font-size:14px;line-height:20px}.speech-playground-component .record-btn-component[state=record]{color:var(--primary-white);background:#0b152b;border:2px solid #7db8ff;box-shadow:0 0 22px #7db8ff40}.speech-playground-component .record-btn-component[state=record] .icon{fill:#7db8ff}.speech-playground-component .record-btn-component[state=play]{color:var(--primary-white);background:#0b152b;border:2px solid #4ade80;box-shadow:0 0 22px #4ade8033}.speech-playground-component .record-btn-component[state=play] .icon{fill:#4ade80}.speech-playground-component .record-btn-component[state=stop]{color:var(--primary-white);background:#ff6b6b1f;border:2px solid #ff6b6b;box-shadow:0 0 26px #ff6b6b4d}.speech-playground-component .record-btn-component[state=stop] .icon{fill:#ff6b6b}@media (hover:hover){.speech-playground-component .record-btn-component[state=record]:hover{background:#7db8ff24}.speech-playground-component .record-btn-component[state=play]:hover{background:#4ade801f}}.speech-playground-component .output{background-color:#0000;border:1px solid #ffffff1f;border-radius:0}.speech-playground-component .state{color:var(--primary-white)}.speech-playground-component .placeholder{color:var(--secondary-footer-dark-grey)}.speech-playground-component .error-message-component{--error-message-colour:#ff9b9b}.speech-playground-component .result h4{color:var(--primary-yellow)}.speech-playground-component .result .transcription{color:var(--primary-white)}.speech-playground-component .timestamps th,.speech-playground-component .timestamps td{border-bottom-color:#ffffff1a}.speech-playground-component .timestamps th,.speech-playground-component .timestamps td.time,.speech-playground-component .timestamps td{color:var(--primary-white)}.speech-playground-component .upload-row{color:var(--primary-white)}.speech-playground-component .upload-link{color:#7db8ff;align-items:center;gap:8px;display:inline-flex}.speech-playground-component .upload-icon{flex:none}.speech-playground-component .upload-link:disabled{color:var(--secondary-footer-dark-grey)}.speech-playground-component .recorder-footer .upload-row{flex:1;justify-content:center;display:flex}.speech-playground-component .recorder-footer .upload-link{flex-direction:column;gap:18px;text-decoration:none}.speech-playground-component .recorder-footer .upload-circle{box-sizing:border-box;width:72px;height:72px;color:var(--primary-white);transition:var(--transition);background:#0b152b;border:2px solid #7db8ff;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:4px;font-size:14px;line-height:18px;display:flex;box-shadow:0 0 22px #7db8ff40}.speech-playground-component .recorder-footer .upload-icon{color:#7db8ff;flex:none}.speech-playground-component .recorder-footer .upload-types{color:var(--primary-white);font-size:14px;line-height:20px}.speech-playground-component .recorder-footer .upload-link:hover:not(:disabled) .upload-circle{background:#7db8ff24}.speech-playground-component .recorder-footer .upload-link:disabled .upload-circle{box-shadow:none;border-color:var(--disabled-btn-background);background:var(--disabled-btn-background);color:var(--disabled-btn-text)}.speech-playground-component .recorder-footer .upload-link:disabled .upload-circle .upload-icon{color:var(--disabled-btn-text)}.speech-playground-component .result-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.speech-playground-component .result-head .copy-btn{color:var(--primary-white);cursor:pointer;transition:var(--transition);background:0 0;border:1px solid #fff3;border-radius:999px;padding:4px 14px}.speech-playground-component .result-head .copy-btn:hover{color:#7db8ff;border-color:#7db8ff}.speech-playground-component .panel.dragging .recorder-footer{outline-offset:-2px;background:#7db8ff14;outline:2px solid #7db8ff}.speech-playground-component .panel.dragging .recorder-footer .upload-circle{background:#7db8ff33}.speech-playground-component .panel.dragging .recorder-footer .upload-types{color:#7db8ff}.speech-playground-component .upload-types .pointer-only{display:none}@media (hover:hover) and (pointer:fine){.speech-playground-component .upload-types .touch-only{display:none}.speech-playground-component .upload-types .pointer-only{display:inline}}.speech-playground-component{gap:0}.speech-playground-component .panel{display:contents}.speech-playground-component .audio-component{order:1}.speech-playground-component .output{order:2}.speech-playground-component .input{order:3;margin-top:24px}.speech-playground-component .output{background-color:#ffffff0d;border-top:0}.speech-playground-component .result .result-head{border-bottom:1px solid #ffffff1f;align-items:flex-end}.speech-playground-component .result .result-tabs{gap:20px;display:flex}.speech-playground-component .result .result-tab{color:var(--primary-white);cursor:pointer;transition:var(--transition);background:0 0;border:0;border-bottom:2px solid #0000;margin-bottom:-1px;padding:6px 0;font-weight:700}.speech-playground-component .result .result-tab[aria-selected=true]{color:var(--primary-white);border-bottom-color:var(--primary-yellow)}.speech-playground-component .result .copy-btn{margin-bottom:6px}@media (hover:hover){.speech-playground-component .result .result-tab:hover{color:var(--primary-white)}}.speech-playground-component .result .result-body{scrollbar-width:thin;scrollbar-color:#ffffff40 transparent;max-height:280px;padding-right:8px;overflow-y:auto}.speech-playground-component .result .result-body .transcription{margin:0}