:root{font-family:"Segoe UI",Arial,sans-serif;color:#242239;background:#eeedf6;font-synthesis:none;--muted:#6a687d;--purple:#6550b7;--line:#e4e2ec}*{box-sizing:border-box}body{margin:0}button,input,a,audio{-webkit-tap-highlight-color:transparent}button,a,input{outline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #8267db}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}a{color:inherit;text-decoration:none}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}[hidden]{display:none!important}header{height:88px;border-bottom:1px solid #dbd9e7;display:flex;align-items:center;justify-content:space-between;padding:0 5.5vw;background:#f6f5fa}.brand{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:750;letter-spacing:-1px}.brand-icon{background:#6550b7;color:white;width:32px;height:32px;border-radius:10px;font-size:27px;text-align:center;line-height:29px}.brand-divider{height:22px;width:1px;background:#d7d4e2;margin:0 10px}.brand-product{font-size:14px;letter-spacing:0;font-weight:500;color:var(--muted)}.badge,.format-tag,.small-badge{font-size:12px;border:1px solid #dcd9e8;border-radius:20px;padding:7px 12px;color:#625d78}.badge{background:#fff}main{max-width:1220px;margin:0 auto;padding:53px 30px 24px}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;gap:20px}h1{font-size:clamp(30px,3.2vw,43px);letter-spacing:-1.7px;font-weight:650;margin:0 0 12px;line-height:1.15}.intro p{font-size:15px;color:var(--muted);margin:0;line-height:1.6}.format-tag{white-space:nowrap}.workspace{display:grid;grid-template-columns:380px 1fr;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 12px 40px #32226008}.source-panel{padding:28px;background:#faf9fc;border-right:1px solid var(--line)}h2{font-size:16px;font-weight:650;margin:0 0 23px;letter-spacing:-.2px}.dropzone{width:100%;min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#fff;border:1.5px dashed #c6bedc;border-radius:12px;padding:24px;color:var(--muted);transition:background .15s,border-color .15s}.dropzone:hover,.dropzone.dragover{background:#f0ebfb;border-color:var(--purple)}.dropzone strong{font-size:16px;color:#40345e;max-width:100%;overflow-wrap:anywhere}.dropzone>span{font-size:13px}.dropzone .file-types{font-size:11px;margin-top:8px;color:#797287}.upload-icon{display:grid;place-items:center;width:54px;height:54px;background:#eee9f8;border-radius:16px;color:var(--purple);margin-bottom:6px}.upload-icon svg{width:30px;height:30px}.primary{margin-top:24px;background:var(--purple);border:0;border-radius:10px;color:#fff;width:100%;min-height:49px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:9px}.primary:hover:not(:disabled){background:#534095}.disclosure{font-size:12px;color:var(--muted);line-height:1.6;margin:15px 3px 0}.results-panel{padding:28px 32px}.results-heading{display:flex;align-items:baseline;justify-content:space-between}.small-badge{border:0;background:#f1f0f5;font-size:11px}.status-box{display:flex;gap:12px;padding:17px 18px;background:#f5f4f8;border-radius:10px;margin-bottom:22px;align-items:flex-start}.status-dot{width:8px;height:8px;background:#aaa4ba;border-radius:50%;flex-shrink:0;margin-top:6px}.status-dot.busy{background:var(--purple);box-shadow:0 0 0 4px #6550b71c}.status-dot.done{background:#398270}.status-box strong{font-size:13px;font-weight:600}.status-box p{font-size:12px;color:var(--muted);margin:5px 0 0;line-height:1.5}.track{border:1px solid #e4dfed;border-radius:12px;padding:20px;margin:16px 0}.track-heading{display:flex;align-items:center;gap:12px}.track-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;color:#7958a8;background:#f0e9f8}.instrumental .track-icon{background:#e6f2ef;color:#347566}h3{margin:0;font-size:15px;font-weight:650}.track-heading p{font-size:12px;margin:5px 0 0;color:var(--muted)}.download{font-size:11px;font-weight:600;margin-left:auto;color:#5b468f;border:1px solid #ded7ec;padding:8px;border-radius:7px;white-space:nowrap}.download:hover{background:#f4effb}.track-empty{height:91px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#81798e;font-size:11px}.wave-placeholder{display:block;height:25px;width:100%;opacity:.4;background:repeating-linear-gradient(90deg,#b8afca 0 3px,transparent 3px 8px);mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);clip-path:polygon(0 45%,10% 35%,20% 40%,30% 15%,40% 32%,50% 0,60% 28%,70% 15%,80% 40%,90% 35%,100% 45%,100% 55%,90% 65%,80% 60%,70% 85%,60% 72%,50% 100%,40% 68%,30% 85%,20% 60%,10% 65%,0 55%)}.instrumental .wave-placeholder{background:repeating-linear-gradient(90deg,#8eafa5 0 3px,transparent 3px 8px)}audio{width:100%;height:42px;display:block;margin:18px 0 3px}.original{margin-top:20px}.original audio{margin-top:10px}label{display:block;font-size:12px;font-weight:600;margin-top:20px}.text-button{border:0;background:none;padding:9px 0;color:var(--purple);font-size:12px}input[type=password]{width:100%;padding:12px;border:1px solid #c8c2d7;border-radius:7px;margin-top:8px;font:inherit;font-size:13px}.hint{font-size:11px;color:var(--muted)}.listening-note{font-size:12px;color:var(--muted);line-height:1.6;margin:22px 0 0}.error{background:#fff0ee;border:1px solid #e8bab3;color:#913a32;font-size:13px;padding:14px;border-radius:8px;margin-bottom:16px;line-height:1.5}footer{display:flex;justify-content:space-between;color:#79738b;font-size:12px;margin-top:24px;padding:0 4px}footer a:hover{text-decoration:underline}@media(max-width:900px){.workspace{grid-template-columns:320px 1fr}.source-panel,.results-panel{padding:23px}.download{font-size:10px;padding:6px}.format-tag{display:none}}@media(max-width:720px){header{height:72px;padding:0 22px}.brand-product{font-size:12px}.badge{display:none}main{padding:32px 16px 20px}.intro{margin-bottom:24px}.workspace{grid-template-columns:1fr}.source-panel{border-right:0;border-bottom:1px solid var(--line)}.dropzone{min-height:190px}.results-panel{padding:24px 20px}.track{padding:16px}.download{font-size:11px}.intro p{font-size:14px}h1{letter-spacing:-1px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

main{max-width:1460px}
.apps{display:flex;gap:10px;margin-bottom:26px;flex-wrap:wrap}
.app-tab{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px;text-align:left;color:inherit;transition:border-color .15s,background .15s}
.app-tab strong{display:block;font-size:14px;font-weight:650;letter-spacing:-.2px}
.app-tab small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.app-tab:hover{border-color:#c6bedc}
.app-tab[aria-pressed=true]{border-color:var(--purple);background:#f7f5fd}
.app-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#efecf9;color:var(--purple);flex:none}
.app-icon svg{width:20px;height:20px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 364px;gap:22px;align-items:start}
.apps-stage{min-width:0}
.api-panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;position:sticky;top:24px;box-shadow:0 12px 40px #32226008}
.api-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.api-heading h2{margin:0}
.api-lead{font-size:12px;color:var(--muted);line-height:1.6;margin:14px 0 16px}
.snippet{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:14px;background:#faf9fc}
.snippet-head{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;font-size:11px;font-weight:600;color:var(--muted);border-bottom:1px solid var(--line)}
.copy{border:0;background:none;color:var(--purple);font-size:11px;font-weight:600;padding:2px 4px;border-radius:6px}
.snippet pre{margin:0;padding:12px;overflow-x:auto}
.snippet code{font-family:"Cascadia Mono",Consolas,"SF Mono",monospace;font-size:11px;line-height:1.7;white-space:pre;color:#3a3450}
.api-notes{margin:2px 0 0;padding-left:17px;font-size:11px;color:var(--muted);line-height:1.75}
.api-notes li{margin-bottom:5px}
.api-docs{display:inline-block;margin-top:14px;font-size:12px;font-weight:600;color:var(--purple)}
.api-docs:hover{text-decoration:underline}
textarea{width:100%;padding:12px;border:1px solid #c8c2d7;border-radius:7px;margin-top:8px;font:inherit;font-size:13px;line-height:1.6;resize:vertical;background:#fff;color:inherit}
textarea:read-only{background:#faf9fc}
.section-label{margin-top:24px}
.optional{font-weight:500;color:var(--muted);font-size:11px;text-transform:none}
.dropzone.compact{min-height:112px;gap:6px}
.check{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;margin-top:16px}
.check input{width:16px;height:16px;accent-color:var(--purple);margin:0}
.advanced{margin-top:20px;border-top:1px solid var(--line);padding-top:14px}
.advanced summary{font-size:12px;font-weight:600;cursor:pointer;color:var(--purple)}
.sliders label{display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center;margin-top:15px;font-size:11px}
.sliders output{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:500}
.sliders input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--purple);margin:2px 0 0}
.tag-cloud{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tag{border:1px solid var(--line);background:#faf9fc;border-radius:999px;padding:4px 10px;font-size:11px;color:#4a4460}
.tag:hover{border-color:var(--purple);color:var(--purple)}
.transcript-box textarea{min-height:280px;font-size:13px;line-height:1.75;margin-top:0}
.transcript-box{margin-top:16px}
.heard{background:#f7f5fd;border:1px solid #ddd6f2;border-radius:10px;padding:12px 14px;margin-bottom:16px}
.heard strong{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--purple)}
.heard p{margin:6px 0 0;font-size:13px;line-height:1.6}
.speech .track-icon{color:#6550b7;background:#efecf9}
.speech .wave-placeholder{background:linear-gradient(90deg,#ddd6f2,#efecf9)}
@media(max-width:1200px){.layout{grid-template-columns:minmax(0,1fr)}.api-panel{position:static}}
@media(max-width:720px){.apps{flex-direction:column}.app-tab{width:100%}}

.keybar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-bottom:22px}
.keybar label{margin:0;white-space:nowrap}
.keybar input[type=password]{margin:0;flex:1 1 240px;max-width:420px}
.keybar .hint{margin:0;flex:1 1 100%}
@media(min-width:720px){.keybar .hint{flex:0 1 auto}}

.modes{display:flex;gap:8px;margin:14px 0 4px;flex-wrap:wrap}
.mode{flex:1 1 auto;border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 12px;font-size:12px;font-weight:600;color:var(--muted)}
.mode[aria-pressed=true]{border-color:var(--purple);background:#f7f5fd;color:var(--purple)}
.mode:hover{border-color:#c6bedc}
.tracks{margin-top:16px}
.tracks .track{margin:0 0 14px}
.tracks .track:last-child{margin-bottom:0}
.tracks h3{text-transform:capitalize}
.tracks .track-heading{justify-content:space-between;margin-bottom:12px}
.tracks audio,.tracks video{width:100%;display:block}
.tracks video{border-radius:8px;background:#000;max-height:280px}
.original video{width:100%;border-radius:8px;background:#000;max-height:220px;margin-top:8px}
input[type=text]{width:100%;padding:12px;border:1px solid #c8c2d7;border-radius:7px;margin-top:8px;font:inherit;font-size:13px;background:#fff;color:inherit}