:root{--bg: #f5f6fa;--bg-blob-1: #dfe3ff;--bg-blob-2: #ffe8e0;--surface: #ffffff;--surface-2: #eef0f6;--text: #14161f;--text-dim: #62697a;--border: rgba(20, 22, 31, .1);--accent: #5b5df8;--accent-2: #7c6cff;--accent-contrast: #ffffff;--danger: #e0522f;--shadow: 0 20px 50px -25px rgba(20, 22, 31, .35);--radius-lg: 28px;--radius-md: 18px;--radius-sm: 12px;--focus: #5b5df8}@media(prefers-color-scheme:dark){:root{--bg: #0a0d12;--bg-blob-1: #1c2140;--bg-blob-2: #2a1b30;--surface: #131722;--surface-2: #1b2030;--text: #eef0f6;--text-dim: #9aa2b8;--border: rgba(238, 240, 246, .1);--accent: #7c6cff;--accent-2: #9c8cff;--accent-contrast: #0a0d12;--danger: #ff8464;--shadow: 0 20px 50px -20px rgba(0, 0, 0, .6);--focus: #9c8cff}}*{box-sizing:border-box}html,body{height:100%;overscroll-behavior:none}body{margin:0;height:100vh;height:100dvh;overflow:hidden;background:var(--bg);background-image:radial-gradient(circle at 12% 10%,var(--bg-blob-1),transparent 45%),radial-gradient(circle at 88% 85%,var(--bg-blob-2),transparent 45%);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;transition:background-color .3s ease}body.drag-over:after{content:"";position:fixed;inset:10px;border:3px dashed var(--accent);border-radius:var(--radius-lg);pointer-events:none;z-index:50;animation:pulse-ring 1.1s ease-in-out infinite}.lock-badge{position:fixed;right:clamp(14px,3vw,24px);top:clamp(14px,3vh,24px);z-index:40;font-size:1.1rem;cursor:default;opacity:.75;transition:opacity .2s ease}.lock-badge:hover{opacity:1}.viewport{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;overflow:hidden}.panel{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:clamp(16px,4vw,40px);overflow-y:auto;animation:panel-settle .32s cubic-bezier(.22,.8,.28,1) both}.panel:focus-visible{outline:none}.panel-word{margin:0;font-size:clamp(1.6rem,6vw,2.75rem);font-weight:800;letter-spacing:-.02em}.panel-word-audio{font-size:clamp(1.3rem,4.5vw,1.9rem)}.panel-video{cursor:pointer}.dropzone{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,4vh,32px);border-radius:var(--radius-lg);cursor:pointer;transition:background-color .2s ease}.dropzone:focus-visible{outline:3px solid var(--focus);outline-offset:-6px}body.drag-over .dropzone{background:color-mix(in srgb,var(--accent) 10%,transparent)}.upload-icon{font-size:clamp(4.5rem,20vw,8rem);line-height:1;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}.dropzone:hover .upload-icon,.dropzone:focus-visible .upload-icon,body.drag-over .upload-icon{transform:translateY(-6px) scale(1.05)}.panel-audio-content{width:100%;max-width:480px;display:flex;flex-direction:column;align-items:center;gap:18px}.file-card{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px;box-shadow:var(--shadow);animation:rise .35s cubic-bezier(.2,.8,.3,1.1)}.thumb{width:84px;height:47px;border-radius:var(--radius-sm);background:var(--surface-2);object-fit:cover;flex:none}.file-meta{min-width:0;flex:1}.file-name{margin:0 0 2px;font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-sub{margin:0;font-size:.85rem;color:var(--text-dim);font-variant-numeric:tabular-nums}.chip-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.chip{position:relative;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:9px 16px;font-size:.95rem;font-family:inherit;font-weight:600;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background-color .15s ease,box-shadow .15s ease}.chip:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px)}.chip:active:not(:disabled){transform:translateY(0) scale(.97)}.chip:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.chip:disabled{opacity:.35;cursor:not-allowed}.chip.selected{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast);box-shadow:0 8px 20px -10px var(--accent)}.chip.is-best{border-color:var(--accent-2)}.chip .chip-emoji{font-size:1.05em}.chip .best-badge{position:absolute;top:-8px;right:-6px;font-size:.85rem;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}.go-btn{align-self:center;width:84px;height:84px;border-radius:50%;border:none;background:linear-gradient(145deg,var(--accent-2),var(--accent));color:var(--accent-contrast);font-size:2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 16px 32px -14px var(--accent);transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease;margin:8px 0}.go-btn:hover{transform:scale(1.06)}.go-btn:active{transform:scale(.95)}.go-btn:focus-visible{outline:3px solid var(--focus);outline-offset:4px}.progress-panel{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 0;animation:rise .35s cubic-bezier(.2,.8,.3,1.1)}.progress-ring-wrap{position:relative;width:132px;height:132px;display:flex;align-items:center;justify-content:center}.progress-ring{width:100%;height:100%;transform:rotate(-90deg)}.ring-bg,.ring-fg{fill:none;stroke-width:8}.ring-bg{stroke:var(--border)}.ring-fg{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .25s ease}.ring-fg.indeterminate{animation:spin 1.1s linear infinite;transform-origin:50px 50px}.progress-pct{position:absolute;font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums}.progress-elapsed{margin:0;color:var(--text-dim);font-variant-numeric:tabular-nums;font-size:.9rem}.abort-btn{width:52px;height:52px;border-radius:50%;border:1px solid var(--border);background:var(--surface);font-size:1.3rem;cursor:pointer;transition:transform .15s ease,border-color .15s ease}.abort-btn:hover{border-color:var(--danger);transform:translateY(-1px)}.abort-btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.result-panel{display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;box-shadow:var(--shadow);animation:rise .4s cubic-bezier(.2,.8,.3,1.1)}.result-headline{margin:0;font-weight:700;font-size:1.05rem;text-align:center;word-break:break-word}.result-sub{margin:0;color:var(--text-dim);font-size:.85rem;font-variant-numeric:tabular-nums}#result-audio{width:100%;max-width:320px;height:40px}.result-actions{display:flex;align-items:center;gap:14px;margin-top:4px}.download-btn,.again-btn{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;font-size:1.5rem;text-decoration:none;cursor:pointer;border:none;transition:transform .15s cubic-bezier(.34,1.56,.64,1)}.download-btn{background:linear-gradient(145deg,var(--accent-2),var(--accent));color:var(--accent-contrast);box-shadow:0 12px 24px -12px var(--accent)}.again-btn{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}.download-btn:hover,.again-btn:hover{transform:scale(1.08)}.download-btn:focus-visible,.again-btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.error-panel,.unsupported-panel{display:flex;flex-direction:column;align-items:center;gap:16px;padding:clamp(32px,8vh,64px) 24px;animation:rise .35s cubic-bezier(.2,.8,.3,1.1)}.error-emoji{margin:0;font-size:3rem;line-height:1}[hidden]{display:none!important}@keyframes panel-settle{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-ring{0%,to{opacity:.6}50%{opacity:1}}@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}@media(max-width:420px){.go-btn{width:72px;height:72px;font-size:1.7rem}.chip{padding:8px 13px;font-size:.88rem}.upload-icon{font-size:clamp(3.5rem,26vw,5rem)}}