*{box-sizing:border-box}:root{color:#f5f5f7;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#07080b;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}html,body,#root{background:#07080b;min-width:320px;min-height:100%;margin:0}body{min-height:100vh}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}.app{background:radial-gradient(circle at 50% 0,#786eff13,#0000 34%),#07080b;min-height:100vh}.topbar{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:20;background:#07080beb;border-bottom:1px solid #1c1e25;justify-content:space-between;align-items:center;height:76px;padding:0 42px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:14px;display:flex}.brand-logo{object-fit:contain;border-radius:14px;flex-shrink:0;width:56px;height:56px}.brand-copy{flex-direction:column;display:flex}.brand-name{color:#f3f3f5;letter-spacing:-.035em;font-size:18px;font-weight:750;line-height:1}.brand-subtitle{color:#686d7b;margin-top:6px;font-size:10px}.processing-status{color:#777c89;align-items:center;gap:9px;font-size:12px;display:flex}.status-dot{background:#58e59b;border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 4px #58e59b0f,0 0 15px #58e59b73}.workspace{width:min(1120px,100% - 48px);margin:0 auto;padding:80px 0 40px}.hero{max-width:830px;margin-bottom:56px}.eyebrow{color:#80849a;letter-spacing:.17em;margin-bottom:24px;font-size:11px;font-weight:750}.hero h1{letter-spacing:-.065em;margin:0;font-size:clamp(54px,7vw,82px);font-weight:790;line-height:.98}.hero h1 span{color:#8c85ff}.hero p{color:#777c8a;max-width:700px;margin:26px 0 0;font-size:16px;line-height:1.7}.upload-zone{text-align:center;background:radial-gradient(circle,#786eff0d,#0000 50%),#090a0e;border:1px dashed #30333d;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;min-height:390px;padding:50px;transition:border-color .16s,transform .16s;display:flex}.upload-zone:hover{background:radial-gradient(circle,#786eff14,#0000 50%),#0a0b10;border-color:#55506f;transform:translateY(-1px)}.upload-icon{color:#9b94ff;background:#161820;border-radius:20px;justify-content:center;align-items:center;width:74px;height:74px;margin-bottom:25px;display:flex}.upload-zone h2{letter-spacing:-.03em;margin:0;font-size:23px}.upload-zone p{color:#727786;margin:12px 0 0;font-size:15px}.upload-zone strong{color:#d7d8de}.formats{color:#4f5361;letter-spacing:.12em;margin-top:28px;font-size:10px}.workspace-content{flex-direction:column;gap:18px;display:flex}.video-card,.settings-card,.progress-card,.results-card{background:#0b0c10;border:1px solid #20232b;border-radius:20px;overflow:hidden}.video-preview{background:#050609;justify-content:center;display:flex}.video-preview video{object-fit:contain;background:#050609;width:100%;max-height:580px;display:block}.video-info{border-top:1px solid #1c1e25;justify-content:space-between;align-items:center;gap:20px;padding:18px 22px;display:flex}.file-name{text-overflow:ellipsis;white-space:nowrap;color:#e6e7eb;max-width:650px;font-size:14px;font-weight:650;overflow:hidden}.file-size{color:#606572;margin-top:5px;font-size:11px}.video-stats{color:#777c8a;align-items:center;gap:18px;font-size:12px;display:flex}.video-stats div{align-items:center;gap:7px;display:flex}.settings-card{padding:30px}.settings-header{justify-content:space-between;align-items:flex-start;gap:30px;margin-bottom:5px;display:flex}.section-label{color:#777b91;letter-spacing:.16em;margin-bottom:9px;font-size:10px;font-weight:750}.settings-header h2{color:#eeeef1;letter-spacing:-.04em;max-width:680px;margin:0;font-size:25px;line-height:1.15}.reset-button{color:#a8abb5;white-space:nowrap;background:#111218;border:1px solid #2a2d36;border-radius:10px;align-items:center;gap:8px;padding:9px 13px;font-size:12px;display:flex}.reset-button:hover:not(:disabled){color:#e4e5e8;border-color:#4a4d58}.setting-block{border-top:1px solid #1d2027;padding:23px 0}.setting-title{align-items:baseline;gap:10px;margin-bottom:14px;display:flex}.setting-title div{color:#e5e6e9;font-size:13px;font-weight:700}.setting-title span{color:#626673;font-size:11px}.option-grid{grid-template-columns:repeat(6,1fr);gap:8px;display:grid}.quality-grid{grid-template-columns:repeat(4,1fr)}.layout-grid{grid-template-columns:repeat(2,1fr);max-width:600px}.option-button{color:#777b87;background:#101116;border:1px solid #282b34;border-radius:11px;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:62px;transition:all .15s;display:flex}.option-button strong{color:#c9cad0;font-size:13px}.option-button small{color:#626672;font-size:9px}.option-button:hover:not(:disabled){border-color:#484b58}.option-button.active{background:#766eff1f;border-color:#766eff;box-shadow:inset 0 0 0 1px #766eff14}.option-button.active strong{color:#aaa5ff}.estimate-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:5px;display:grid}.estimate-item{background:#0e0f14;border:1px solid #1f222a;border-radius:13px;padding:17px}.estimate-item span{color:#626673;text-transform:uppercase;letter-spacing:.1em;font-size:9px;display:block}.estimate-item strong{color:#e7e8ed;letter-spacing:-.03em;margin-top:7px;font-size:17px;display:block}.extract-button{color:#08090d;background:#8c85ff;border:0;border-radius:13px;justify-content:center;align-items:center;gap:9px;width:100%;height:54px;margin-top:14px;font-size:14px;font-weight:750;transition:all .15s;display:flex}.extract-button:hover:not(:disabled){background:#a29cff;transform:translateY(-1px);box-shadow:0 12px 30px #6f67ff24}.progress-card{padding:22px}.progress-heading{color:#8c909c;justify-content:space-between;font-size:12px;display:flex}.progress-heading strong{color:#aaa5ff}.progress-track{background:#171920;border-radius:999px;width:100%;height:7px;margin-top:13px;overflow:hidden}.progress-fill{border-radius:inherit;background:#8c85ff;height:100%;transition:width .12s}.progress-note{color:#555a68;margin-top:11px;font-size:10px}.results-card{padding:30px}.results-heading{border-bottom:1px solid #1d2027;justify-content:space-between;align-items:flex-start;gap:30px;padding-bottom:28px;display:flex}.success-line{color:#64dfa0;text-transform:uppercase;letter-spacing:.08em;align-items:center;gap:8px;font-size:11px;font-weight:700;display:flex}.results-heading h2{color:#eeeef1;letter-spacing:-.045em;margin:11px 0 0;font-size:27px}.results-heading p{color:#666b79;margin:7px 0 0;font-size:11px}.result-actions{flex-wrap:wrap;justify-content:flex-end;gap:9px;display:flex}.primary-download,.secondary-download{border-radius:11px;justify-content:center;align-items:center;gap:8px;min-height:45px;padding:0 15px;font-size:12px;font-weight:700;display:inline-flex}.primary-download{color:#08090d;background:#8c85ff;border:0}.primary-download:hover:not(:disabled){background:#a39dff}.secondary-download{color:#d0d2d9;background:#15171d;border:1px solid #30333d}.secondary-download:hover:not(:disabled){background:#1b1d24;border-color:#50535f}.preview-section{padding-top:25px}.preview-label{color:#666b78;letter-spacing:.14em;margin-bottom:13px;font-size:10px;font-weight:750}.frame-grid{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.frame-card{background:#0e0f13;border:1px solid #22252d;border-radius:12px;overflow:hidden}.frame-image{aspect-ratio:16/9;background:#06070a;overflow:hidden}.frame-image img{object-fit:contain;width:100%;height:100%;display:block}.frame-meta{border-top:1px solid #1d2027;justify-content:space-between;align-items:center;height:36px;padding:0 10px;display:flex}.frame-meta strong{color:#888c99;letter-spacing:.08em;font-size:9px}.frame-meta span{color:#626673;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px}.more-frames{text-align:center;color:#555a67;padding-top:17px;font-size:11px}.privacy-strip{border-top:1px solid #1d2027;flex-wrap:wrap;justify-content:center;gap:30px;margin-top:26px;padding-top:19px;display:flex}.privacy-strip div{color:#606572;align-items:center;gap:7px;font-size:10px;display:flex}.privacy-strip svg{color:#7771e8}.error-message{color:#ff9ca8;background:#211114;border:1px solid #5c3037;border-radius:11px;margin-top:18px;padding:14px 16px;font-size:12px;line-height:1.5}.footer{color:#454954;border-top:1px solid #171920;justify-content:space-between;width:min(1120px,100% - 48px);margin:30px auto 0;padding:22px 0 35px;font-size:10px;display:flex}.hidden-canvas{display:none}@media (width<=900px){.topbar{padding:0 24px}.workspace{padding-top:60px}.option-grid{grid-template-columns:repeat(3,1fr)}.quality-grid,.frame-grid{grid-template-columns:repeat(2,1fr)}.results-heading{flex-direction:column}.result-actions{justify-content:flex-start}}@media (width<=680px){.topbar{height:68px;padding:0 16px}.brand-logo{width:48px;height:48px}.brand-subtitle{font-size:9px}.processing-status{font-size:10px}.workspace{width:calc(100% - 28px);padding-top:45px}.hero h1{font-size:47px}.hero p{font-size:14px}.upload-zone{min-height:330px;padding:30px 20px}.settings-card,.results-card{padding:20px}.settings-header{flex-direction:column}.option-grid,.quality-grid{grid-template-columns:repeat(2,1fr)}.layout-grid{max-width:none}.estimate-grid{grid-template-columns:1fr}.video-info{flex-direction:column;align-items:flex-start}.video-stats{flex-wrap:wrap}.frame-grid{grid-template-columns:1fr}.result-actions{flex-direction:column;width:100%}.primary-download,.secondary-download{width:100%}.footer{flex-direction:column;gap:8px;width:calc(100% - 28px)}}