:root{color:#f6f7fb;background:#101114;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body{overscroll-behavior:none}body{min-width:320px;min-height:100vh;margin:0;background:linear-gradient(135deg,rgba(70,141,149,.18),transparent 34%),linear-gradient(315deg,rgba(212,91,91,.14),transparent 38%),#101114}body.export-active{overflow-anchor:none;touch-action:pan-y}button,input{font:inherit}.app-shell{width:min(100%,980px);min-height:100vh;margin:0 auto;padding:48px 20px}.hero{display:flex;align-items:center;gap:20px;margin-bottom:28px}.mark{position:relative;width:86px;height:70px;flex:0 0 auto;border:2px solid #e9eef2;border-radius:6px;background:#191b20;overflow:hidden;box-shadow:0 18px 60px #00000052}.mark:before{content:"";position:absolute;inset:0 0 auto;height:22px;background:repeating-linear-gradient(135deg,#e9eef2 0,#e9eef2 12px,#191b20 12px,#191b20 24px);border-bottom:2px solid #e9eef2}.mark span{position:absolute;bottom:14px;width:5px;border-radius:99px;background:#65d4c4}.mark span:nth-child(1){left:24px;height:18px}.mark span:nth-child(2){left:40px;height:30px;background:#f2c36b}.mark span:nth-child(3){left:56px;height:22px;background:#ee7878}h1,h2,p{margin:0}h1{font-size:clamp(3rem,8vw,6rem);line-height:.95;letter-spacing:0}.hero p{margin-top:10px;color:#aeb6c2;font-size:1.2rem}.panel{padding:24px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#16181de0;box-shadow:0 20px 80px #00000057}.notice{max-width:780px;margin-bottom:22px;color:#cdd4dd;line-height:1.55}.unsupported-panel{display:grid;grid-template-columns:64px 1fr;gap:18px}.unsupported-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;color:#101114;background:#f2c36b;font-size:1.8rem;font-weight:900}.unsupported-panel .eyebrow{margin-bottom:8px;color:#65d4c4;font-size:.82rem;font-weight:800;text-transform:uppercase}.unsupported-panel h2{max-width:760px;margin-bottom:14px;font-size:clamp(1.65rem,5vw,2.4rem);line-height:1.08}.unsupported-panel p{max-width:780px;margin-top:12px;color:#cdd4dd;line-height:1.55}.unsupported-panel details{max-width:780px;margin-top:18px;padding:14px 16px;border-radius:6px;background:#0d0f12}.unsupported-panel summary{color:#f6f7fb;font-weight:800;cursor:pointer}.unsupported-panel ul{margin:12px 0 0;padding-left:20px;color:#cdd4dd;line-height:1.55}.detected-browser{color:#aeb6c2!important;font-size:.9rem}.upload-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.file-field{display:grid;gap:10px;min-height:124px;padding:18px;border:1px dashed rgba(255,255,255,.24);border-radius:8px;background:#13151a}.file-field span{color:#f6f7fb;font-weight:700}.file-field input{width:100%;color:#aeb6c2}.file-field input::file-selector-button{margin-right:12px;padding:10px 14px;border:0;border-radius:6px;color:#101114;background:#65d4c4;font-weight:800;cursor:pointer}.actions{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0}.export-note{margin:0 0 18px;color:#cdd4dd;font-size:.95rem}button{min-height:46px;padding:0 18px;border:0;border-radius:6px;color:#101114;background:#f2c36b;font-weight:800;cursor:pointer}button:hover:not(:disabled){filter:brightness(1.06)}button:disabled{cursor:not-allowed;opacity:.5}#export-button{background:#65d4c4}.status-panel{display:grid;grid-template-columns:180px 1fr;gap:22px;align-items:center;padding:18px;border-radius:8px;background:#0d0f12}.waveform{display:flex;align-items:center;justify-content:center;gap:7px;height:96px;border-radius:6px;background:linear-gradient(180deg,#65d4c424,#f2c36b14)}.waveform span{width:5px;height:26px;border-radius:99px;background:#65d4c4}.waveform span:nth-child(2n){height:58px;background:#f2c36b}.waveform span:nth-child(3n){height:38px;background:#ee7878}.status-panel h2{margin-bottom:8px;font-size:1rem}#status-text{color:#cdd4dd;line-height:1.5}.progress-wrap{margin-top:14px}.progress-meta{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px;color:#aeb6c2;font-size:.84rem}.progress-track{width:100%;height:9px;overflow:hidden;border-radius:99px;background:#20242b}.progress-bar{width:0%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#65d4c4,#f2c36b,#ee7878);transition:width .18s ease}.results{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:16px 0 0}.results div{padding:12px;border-radius:6px;background:#181b20}.results dt{margin-bottom:4px;color:#aeb6c2;font-size:.82rem}.results dd{margin:0;font-weight:800}.download-link{display:inline-flex;margin-top:18px;padding:12px 14px;border-radius:6px;color:#101114;background:#65d4c4;font-weight:800;text-decoration:none}.diagnostics{margin-top:16px;padding:12px;border-radius:6px;background:#181b20}.diagnostics summary{color:#cdd4dd;font-size:.86rem;font-weight:800;cursor:pointer}.diagnostics pre{margin:10px 0 0;white-space:pre-wrap;color:#aeb6c2;font-size:.8rem;line-height:1.45}.capability-panel{margin:0 0 18px;padding:12px 14px;border-radius:6px;background:#181b20}.capability-panel summary{color:#cdd4dd;font-size:.9rem;font-weight:800;cursor:pointer}.capability-output{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.capability-item{min-width:0;padding:10px;border-radius:6px;background:#0d0f12}.capability-item dt{margin-bottom:4px;color:#aeb6c2;font-size:.78rem}.capability-item dd{margin:0;color:#f6f7fb;font-size:.9rem;font-weight:800;overflow-wrap:anywhere}.capability-warnings{grid-column:1 / -1;margin:0;padding-left:18px;color:#f2c36b;font-size:.84rem;line-height:1.45}.offset-controls{margin-top:16px;padding:12px;border-radius:6px;background:#181b20}.offset-controls label{display:block;margin-bottom:8px;color:#aeb6c2;font-size:.84rem;font-weight:700}.offset-row{display:grid;grid-template-columns:auto auto minmax(120px,1fr) auto auto;gap:8px}.offset-row input{min-width:0;border:1px solid rgba(255,255,255,.16);border-radius:6px;padding:0 10px;color:#f6f7fb;background:#0d0f12;font-weight:800}.offset-nudge{min-height:38px;padding:0 12px;background:#cdd4dd}.visual-panel{margin-top:18px;padding:18px;border-radius:8px;background:#0d0f12}.visual-header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:12px}.visual-header h2{font-size:1rem}.visual-header p{color:#aeb6c2;font-size:.9rem}.sync-canvas{display:block;width:100%;border:1px solid rgba(255,255,255,.08);border-radius:6px;background:#0d0f12}.visual-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;color:#aeb6c2;font-size:.84rem}.visual-legend span{display:inline-flex;align-items:center;gap:7px}.visual-legend i{width:18px;height:4px;border-radius:99px}.legend-video{background:#65d4c4}.legend-audio{background:#f2c36b}.legend-aligned{background:#ee7878}[hidden]{display:none!important}@media (max-width: 720px){.app-shell{padding:28px 14px}.hero{align-items:flex-start}.mark{width:68px;height:58px}.upload-grid,.status-panel,.results,.capability-output,.offset-row,.unsupported-panel{grid-template-columns:1fr}.visual-header{display:block}.status-panel{align-items:stretch}}
