:root{font-family:Inter,Segoe UI,system-ui,sans-serif;color:#e5e8ef;background:#0e1119;font-synthesis:none}*{box-sizing:border-box}body{margin:0}.shell{max-width:1120px;margin:0 auto;padding:0 28px}header{border-bottom:1px solid #303643;padding:30px 0}.brand{font-size:14px;font-weight:750;letter-spacing:.16em}.glyph{color:#b4c6d3;margin-right:10px}.brand-secondary{font-weight:400;color:#8995a6}.intro{margin:90px auto 54px;max-width:810px;text-align:center}.eyebrow{letter-spacing:.22em;font-size:11px;color:#a7bdc9;font-weight:700}h1{font-family:Georgia,serif;font-size:clamp(44px,7vw,78px);font-weight:400;letter-spacing:-.03em;margin:18px 0}p{color:#a9b1c0;line-height:1.75}.intro p{max-width:620px;margin:auto;font-size:17px}.decoder{background:#171d29;border:1px solid #343c4a;border-radius:16px;padding:36px;max-width:790px;margin:auto}.field label{font-size:12px;display:block;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;color:#bac7d1}input[type=file]{width:100%;display:block;padding:20px;background:#101622;color:#dce8f0;border:1px dashed #657186;border-radius:10px}input[type=file]::file-selector-button{padding:9px 15px;border:0;background:#d6e4ea;color:#0c1620;border-radius:6px;margin-right:16px;cursor:pointer}.filename,.status,.details{color:#a9b1c0;font-size:13px;margin-top:16px}.primary,.secondary{border:0;border-radius:7px;padding:14px 22px;font-weight:650;cursor:pointer}.primary{background:#d6e4ea;color:#111823;margin-top:24px}.secondary{background:#303e4e;color:#e9f2f6;margin-top:20px}.primary:disabled{opacity:.4;cursor:default}.result{border-top:1px solid #343c4a;margin-top:28px;padding-top:20px}h2{font-size:17px;font-weight:600}audio{width:100%;margin-top:10px}.note{text-align:center;max-width:640px;margin:78px auto}footer{border-top:1px solid #303643;padding:24px 0;margin-top:80px;color:#7e8b9c;font-size:12px;text-align:center}.boot{margin:26vh auto;text-align:center;color:#cbd8e2}@media(max-width:600px){.shell{padding:0 16px}.intro{margin:64px auto 34px}.decoder{padding:22px}}

/* Progress UI: file loading is measured; reconstruction is deliberately indeterminate. */
.progress-panel{margin-top:26px;padding:20px;border:1px solid #3b4b5a;border-radius:10px;background:#111926;overflow:hidden}
.progress-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font-size:13px;color:#e3edf3;margin-bottom:12px}
.progress-top span{color:#9fb7c7;font-size:12px;white-space:nowrap}
.progress-track{height:6px;width:100%;background:#29394b;overflow:hidden;border-radius:999px;position:relative}
.progress-fill{background:#8bbcd7;height:100%;border-radius:999px;transition:width .12s linear}
.progress-sweep{height:100%;width:32%;background:linear-gradient(90deg,transparent,#a9d7f1,transparent);border-radius:999px;animation:progress-move 1.7s ease-in-out infinite;will-change:transform}
@keyframes progress-move{from{transform:translate3d(-110%,0,0)}to{transform:translate3d(420%,0,0)}}
.waveform{margin:24px 0 16px;display:flex;align-items:center;justify-content:center;gap:3px;height:78px;overflow:hidden}
.wave-bar{background:#87bbd8;flex:1;max-width:6px;min-width:1px;border-radius:3px;height:var(--h);opacity:.74;transform-origin:center center;animation:wave-pulse 1.25s ease-in-out infinite alternate;animation-delay:calc(var(--n) * -31ms);will-change:transform}
@keyframes wave-pulse{0%{transform:scaleY(.45)}100%{transform:scaleY(1.28)}}
.progress-note{margin:0;color:#a9b1c0;font-size:12px;line-height:1.6}
@media(prefers-reduced-motion:reduce){.progress-sweep,.wave-bar{animation:none}.progress-sweep{width:100%;background:#79a6c1}}

/* Worker-decoding result actions */
.download-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; }
.download-actions .secondary { flex:1 1 210px; }

/* Estimated progressive reveal. Bars animate while the left-to-right mask grows. */
.waveform-building{position:relative;overflow:hidden;margin-top:20px;--reveal:0%}
.waveform-building .waveform{margin:4px 0 16px;position:relative;clip-path:inset(0 calc(100% - var(--reveal)) 0 0);transition:clip-path .65s linear}
.waveform-building:before{content:"";position:absolute;inset:4px 0 16px;background:repeating-linear-gradient(90deg,#2d3a4a 0px,#2d3a4a 3px,transparent 3px,transparent 9px);opacity:.35;pointer-events:none}
.notice-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.notice-dialog{width:min(100%,460px);background:#1b2635;border:1px solid #65829a;box-shadow:0 22px 90px rgba(0,0,0,.55);padding:28px;border-radius:14px}
.notice-dialog h2{margin:0 0 12px;color:#e6f0f7;font-size:22px}
.notice-dialog p{margin:0;color:#b8c8d6}
.notice-dialog .secondary{min-width:110px}

/* Two sequential phases: analysis bar, followed by real recovered WAV waveform. */
.progress-panel .progress-note { margin-top: 12px; }
.progress-fill.finish-fill { transition: width 1s ease-out; }
.real-waveform { display:flex;align-items:center;gap:2px;height:92px;overflow:hidden;margin:16px 0 4px;clip-path:inset(0 100% 0 0); }
.real-waveform.wave-revealing { animation:reveal-real-wave var(--wave-duration,3000ms) linear forwards; }
.real-wave-bar {background:#87bbd8;flex:1;min-width:1px;border-radius:2px;opacity:.84;}
@keyframes reveal-real-wave {from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media(prefers-reduced-motion:reduce){.real-waveform.wave-revealing{animation:none;clip-path:none}}