@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--red:#f22b2b;--ink:#171719;--muted:#6f7075;--line:#e9e8e6;--paper:#fff}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font-family:Manrope,Arial,sans-serif}header{height:78px;border-bottom:1px solid var(--line);padding:0 max(24px,calc((100vw - 1220px)/2));display:flex;align-items:center;gap:42px}.brand{font-size:18px;font-weight:800;letter-spacing:-.8px;color:var(--ink);text-decoration:none;white-space:nowrap}.brand span{display:inline-grid;place-items:center;margin-right:4px;width:24px;height:24px;background:var(--red);color:#fff;border-radius:7px;font-size:15px}.brand b{font-weight:500;color:#777;letter-spacing:-.7px}nav{display:flex;gap:29px;align-items:center}nav a,.back{font-size:13px;text-decoration:none;color:#75757b;font-weight:700}.back{margin-left:auto}.back:hover,nav a:hover,nav .active{color:var(--red)}main{max-width:1170px;margin:auto;padding:64px 24px 44px}.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.eyebrow{font:500 11px/1 'DM Mono',monospace;letter-spacing:1.3px;color:var(--red);margin:0 0 14px}.eyebrow i{width:7px;height:7px;background:var(--red);border-radius:50%;display:inline-block;margin-right:7px}.intro h1{font-size:48px;line-height:1.05;margin:0 0 12px;letter-spacing:-2.4px}.intro p:not(.eyebrow){font-size:16px;color:var(--muted);margin:0}.privacy{border-left:1px solid var(--line);padding:6px 0 6px 18px;color:var(--red);font-size:13px;font-weight:800;min-width:215px}.privacy span{color:var(--ink);margin-left:5px}.privacy small{display:block;color:#8a8a8e;font-weight:500;margin:5px 0 0 19px;font-size:11px}.ad{height:90px;margin:45px 0 28px;border:1px dashed #dedddb;background:#fbfbfa;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:#a7a7a5}.ad span{font:500 10px 'DM Mono',monospace;letter-spacing:1.2px}.ad b{font-size:11px;font-weight:600}.workspace{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}.dropzone{min-height:390px;padding:72px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;outline:none;transition:.2s;background:linear-gradient(135deg,#fff,#f9f9f8)}.dropzone.dragging{background:#fff6f5;border:2px dashed var(--red)}.video-symbol{display:grid;place-items:center;width:54px;height:54px;border-radius:17px;background:#ffe8e7;color:var(--red);font-size:27px}.dropzone h2{font-size:22px;margin:17px 0 8px;letter-spacing:-.8px}.dropzone p{color:var(--muted);font-size:14px;margin:0;max-width:440px}.choose{margin:24px 0 12px;padding:12px 19px;background:var(--ink);color:#fff;border-radius:9px;font-size:13px;font-weight:800;cursor:pointer}.dropzone small{font-size:11px;color:#9a9a9a}.hidden{display:none!important}.editor{padding:22px}.filebar{display:flex;justify-content:space-between;align-items:center;padding-bottom:19px}.filebar>div{display:flex;gap:10px;align-items:center}.filebar>div>span{display:grid;place-items:center;background:#ffe6e4;color:var(--red);width:32px;height:32px;border-radius:9px;font-size:13px}.filebar b,.filebar small{display:block}.filebar b{font-size:13px}.filebar small{font:11px 'DM Mono',monospace;color:#89898e;margin-top:2px}.filebar button{background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 12px;font:700 12px Manrope;cursor:pointer}.stage{height:min(48vw,465px);min-height:270px;position:relative;border-radius:13px;overflow:hidden;background:#161616}.stage video{width:100%;height:100%;object-fit:contain;display:block}.stage-overlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(90deg,rgba(0,0,0,.15),transparent 50%,rgba(0,0,0,.1));pointer-events:none}.stage-overlay button{pointer-events:auto;width:62px;height:62px;border-radius:50%;border:0;background:rgba(255,255,255,.94);font-size:21px;padding-left:5px;color:var(--ink);cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,.18)}.stage.playing .stage-overlay{opacity:0;transition:.18s}.stage:hover .stage-overlay{opacity:1}.drop-overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(242,43,43,.9);color:#fff;font-weight:800;font-size:18px}.stage.dropping .drop-overlay{display:flex}.transport{display:grid;grid-template-columns:40px 48px 1fr 48px;align-items:center;gap:12px;margin:20px 0 13px}.transport>button{border:0;background:var(--ink);color:#fff;width:38px;height:38px;border-radius:50%;cursor:pointer;padding-left:3px}.transport>span{font:11px 'DM Mono',monospace;color:#5c5c61}.transport>span:last-child{text-align:right}.timeline{height:38px;position:relative;border-radius:10px;background:repeating-linear-gradient(90deg,#e3e3e1 0 2px,transparent 2px 10px),linear-gradient(#f4f4f2,#f4f4f2);overflow:visible}.timeline-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(242,43,43,.17);border-right:2px solid var(--red);z-index:1}.selection{position:absolute;top:0;bottom:0;left:0;right:0;background:rgba(242,43,43,.12);border-top:2px solid var(--red);border-bottom:2px solid var(--red);pointer-events:none}.timeline input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:4}.timeline #end-slider{z-index:5}.handle{position:absolute;top:-4px;width:10px;height:46px;border-radius:5px;background:var(--red);pointer-events:none;z-index:3;transform:translateX(-50%);box-shadow:0 1px 3px #999}.handle.start{left:0}.handle.end{left:100%}.trim-values{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 0;text-align:center}.trim-values label{font:11px 'DM Mono',monospace;color:#8a8a8e}.trim-values label:first-child{text-align:left}.trim-values label:last-child{text-align:right}.trim-values output{display:block;color:var(--ink);font:600 14px Manrope;margin-top:3px}.trim-values div b,.trim-values div small{display:block}.trim-values div b{font:800 17px Manrope}.trim-values div small{font:10px 'DM Mono',monospace;color:#8a8a8e;margin-top:2px}.actions{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:20px}.actions p{font-size:12px;color:#777;margin:0}.primary,.download{border:0;border-radius:9px;font:800 13px Manrope;cursor:pointer;padding:13px 18px}.primary{background:var(--red);color:#fff}.processing{border:1px solid #f3d1ce;background:#fff8f7;margin-top:18px;border-radius:11px;padding:15px;display:flex;align-items:center;gap:10px}.processing span{width:16px;height:16px;border:2px solid #f2b3ad;border-top-color:var(--red);border-radius:50%;animation:spin .8s linear infinite}.processing b{font-size:13px}.processing small{font-size:11px;color:#777;margin-left:auto}.result{margin-top:18px;border-top:1px solid var(--line);padding-top:18px;display:flex;align-items:center;justify-content:space-between}.result>div{display:flex;align-items:center;gap:10px}.result span{display:grid;place-items:center;background:#e8f8ec;color:#168237;width:32px;height:32px;border-radius:50%;font-weight:800}.result b,.result small{display:block}.result b{font-size:13px}.result small{font-size:11px;color:#777;margin-top:3px}.download{background:var(--ink);color:#fff}.compatibility{font-size:11px;color:#929297;text-align:center;margin:20px auto 0;max-width:650px}footer{max-width:1170px;margin:auto;padding:28px 24px;border-top:1px solid var(--line);display:flex;align-items:center;gap:22px}footer p{margin:0;color:#838386;font-size:12px}footer div{margin-left:auto;display:flex;gap:18px}footer a{font-size:12px;text-decoration:none;color:#777}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--ink);color:#fff;border-radius:8px;padding:11px 16px;font-size:12px;transition:.2s;z-index:9}.toast.show{transform:translateX(-50%) translateY(0)}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:680px){header{height:64px;padding:0 16px;gap:12px}nav{display:none}.back{font-size:11px}main{padding:36px 16px}.intro{display:block}.intro h1{font-size:38px}.privacy{margin-top:25px}.ad{height:58px;margin:30px 0 16px}.editor{padding:14px}.stage{min-height:215px}.transport{grid-template-columns:35px 41px 1fr 41px;gap:7px}.actions{align-items:flex-start;flex-direction:column}.primary{width:100%}.processing{align-items:flex-start}.processing small{margin:0}.result{align-items:flex-start;gap:12px;flex-direction:column}.download{width:100%}footer{flex-wrap:wrap;padding:26px 16px}footer div{margin-left:0}}
