:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#09090c;--bg-2:#0f0f14;--card:#121218;--line:#ffffff14;--line-2:#ffffff24;--text:#ececf2;--muted:#9a9aab;--accent:#7c5cff;--accent-2:#22d3ee;--ok:#34d399;--warn:#fbbf24;--bad:#f87171;--radius:16px;--font:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--mono:ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace}*{box-sizing:border-box}html{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-text-size-adjust:100%;font-size:16px;line-height:1.55}body{background:radial-gradient(900px 500px at 15% -10%, #7c5cff2e, transparent 60%), radial-gradient(700px 420px at 95% 0%, #22d3ee1a, transparent 60%), var(--bg);background-repeat:no-repeat;min-height:100vh;margin:0}[hidden]{display:none!important}a{color:inherit}code,pre,.mono{font-family:var(--mono);font-size:.86em}h1,h2{letter-spacing:-.02em;margin:0;line-height:1.1}h2{font-size:18px;font-weight:650}.muted{color:var(--muted)}.small{font-size:13px}.skip{position:absolute;left:-999px}.skip:focus{z-index:10;background:var(--card);border-radius:8px;padding:8px 12px;top:16px;left:16px}:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}.topbar{justify-content:space-between;align-items:center;gap:16px;max-width:1040px;margin:0 auto;padding:20px 16px;display:flex}.brand{letter-spacing:-.01em;align-items:center;gap:10px;font-weight:700;text-decoration:none;display:inline-flex}.brand__mark{gap:3px;display:inline-flex}.brand__mark i{background:var(--accent);border-radius:2px;width:5px;height:18px}.brand__mark i:nth-child(2){background:#a78bfa}.brand__mark i:nth-child(3){background:var(--accent-2)}.topbar__nav{color:var(--muted);align-items:center;gap:16px;font-size:14px;display:flex}.topbar__nav a{text-decoration:none}.topbar__nav a:hover{color:var(--text)}main{max-width:1040px;margin:0 auto;padding:0 16px}.hero{text-align:center;padding:48px 0 24px}.eyebrow{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin:0 0 16px;font-size:13px}.hero h1{letter-spacing:-.035em;font-size:clamp(38px,7vw,76px);font-weight:760}.grad{background:linear-gradient(100deg, var(--accent) 10%, #a78bfa 45%, var(--accent-2) 90%);color:#0000;white-space:nowrap;-webkit-background-clip:text;background-clip:text}.lede{max-width:620px;color:var(--muted);margin:20px auto 0;font-size:clamp(16px,2.2vw,19px)}.lede--small{margin:12px 0 0;font-size:16px}.drop{border:1.5px dashed var(--line-2);background:linear-gradient(#ffffff08,#ffffff03);border-radius:24px;max-width:640px;margin:40px auto 0;padding:40px 24px;transition:border-color .2s,background .2s,transform .2s;position:relative}.dragging .drop{border-color:var(--accent-2);background:#22d3ee0f;transform:scale(1.01)}.drop__icon{color:#c4b5fd;background:#7c5cff24;border-radius:16px;place-items:center;width:56px;height:56px;display:inline-grid}.drop__title{margin:16px 0 4px;font-size:20px;font-weight:650}.drop__hint{color:var(--muted);margin:0;font-size:14px}.drop__actions{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px;display:flex}.btn{appearance:none;border:1px solid var(--line-2);font:inherit;color:var(--text);cursor:pointer;background:#ffffff0a;border-radius:12px;padding:11px 18px;font-size:15px;font-weight:600;transition:background .15s,border-color .15s,transform .1s,opacity .15s}.btn:hover{background:#ffffff14}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background:linear-gradient(100deg, var(--accent), #6d4dff 60%, #5b8cff);border-color:#0000;box-shadow:0 6px 24px -8px #7c5cffb3}.btn--primary:hover{background:linear-gradient(100deg,#8b6dff,#7a5cff 60%,#6b98ff)}.btn--ghost{background:0 0}.btn--big{padding:14px 24px;font-size:16px}.btn--small{border-radius:8px;padding:6px 12px;font-size:13px}.link{appearance:none;color:var(--muted);font:inherit;text-underline-offset:3px;cursor:pointer;background:0 0;border:0;padding:0;font-size:14px;text-decoration:underline}.link:hover{color:var(--text)}.workspace,.results{gap:16px;padding:24px 0;display:grid}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);min-width:0;padding:20px}.card--flush{padding:0;overflow:hidden}.card--error{background:#f871710f;border-color:#f8717166}.card--error p{margin:0 0 8px}.card__head{justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}pre{border:1px solid var(--line);white-space:pre;background:#0a0a0e;border-radius:12px;margin:0;padding:16px;line-height:1.6;overflow-x:auto}.source{grid-template-columns:minmax(0,260px) minmax(0,1fr);align-items:start;gap:20px;display:grid}.source__video{aspect-ratio:16/9;object-fit:contain;background:#000;border-radius:12px;width:100%}.facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px;margin:0;display:grid}.facts dt{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:12px}.facts dd{text-overflow:ellipsis;white-space:nowrap;margin:2px 0 0;font-weight:600;overflow:hidden}.diag{background:#fbbf2414;border:1px solid #fbbf2440;border-radius:12px;margin:16px 0 0;padding:12px 14px}.diag--ok{background:#34d39914;border-color:#34d39940}.warn{color:var(--warn);margin:12px 0 0;font-size:14px}.note{color:var(--muted);margin:12px 0 0;font-size:14px}fieldset{border:0;min-width:0;margin:0;padding:0}legend{color:var(--muted);margin-bottom:8px;padding:0;font-size:13px;font-weight:600}.grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;display:grid}.seg{border:1px solid var(--line);background:#ffffff0a;border-radius:12px;flex-wrap:wrap;gap:4px;padding:4px;display:inline-flex}.seg label{cursor:pointer;position:relative}.seg input{opacity:0;cursor:pointer;position:absolute;inset:0}.seg span{color:var(--muted);border-radius:9px;padding:7px 14px;font-size:14px;font-weight:600;transition:background .15s,color .15s;display:block}.seg input:checked+span{color:var(--text);background:#7c5cff38;box-shadow:inset 0 0 0 1px #a78bfa73}.seg input:focus-visible+span{outline:2px solid var(--accent-2);outline-offset:1px}.trim{gap:10px;display:flex}.trim label,.frames-count{color:var(--muted);align-items:center;gap:8px;font-size:14px;display:flex}input[type=number]{border:1px solid var(--line-2);width:84px;color:var(--text);font:inherit;background:#0a0a0e;border-radius:10px;padding:8px 10px;font-size:14px}.outputs{gap:8px;margin-top:24px;display:grid}.check{border:1px solid var(--line);cursor:pointer;color:var(--muted);background:#ffffff05;border-radius:12px;align-items:flex-start;gap:12px;padding:12px 14px;font-size:14px;display:flex}.check:has(input:checked){background:#7c5cff12;border-color:#a78bfa66}.check b{color:var(--text);font-size:15px;display:block}.check input{accent-color:var(--accent);flex:none;width:16px;height:16px;margin-top:3px}.frames-count{padding:4px 14px 0}.mode{border-bottom:1px solid var(--line);margin-bottom:24px;padding-bottom:20px}.mode p{margin:8px 0 0}.seg--big span{padding:10px 18px;font-size:15px}.loop-row{margin:0;padding:0 2px}.savings{background:#34d39912;border:1px solid #34d39940;border-radius:12px;margin:-4px 0 16px;padding:14px 16px;font-size:18px}.savings b{color:var(--ok)}.phone-framing{gap:12px;padding:4px 14px 8px 42px;display:grid}.phone-framing__row{flex-wrap:wrap;align-items:center;gap:10px 14px;display:flex}.focus-wrap p{margin:6px 0 0}.focus{cursor:crosshair;touch-action:none;background:#000;border-radius:10px;width:min(100%,420px);position:relative;overflow:hidden}.focus video{object-fit:fill;pointer-events:none;width:100%;height:100%;display:block}.focus__box{border:2px solid var(--accent-2);pointer-events:none;border-radius:6px;transition:left 80ms,top 80ms;position:absolute;box-shadow:0 0 0 999px #0000008c}.focus__dot{background:var(--accent-2);border-radius:50%;width:10px;height:10px;margin:-5px 0 0 -5px;position:absolute;top:50%;left:50%;box-shadow:0 0 0 3px #00000080}#preview.is-phone{width:min(390px,100%);height:min(72vh,760px);box-shadow:0 0 0 8px #1b1b22, 0 0 0 9px var(--line-2);border-radius:28px;margin:16px auto}.estimate{margin-top:20px}.estimate__title{color:var(--muted);margin:0 0 8px;font-size:13px;font-weight:600}.estimate ul,.files{gap:6px;margin:0;padding:0;list-style:none;display:grid}.estimate li,.files li{background:#ffffff06;border-radius:10px;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px 12px;font-size:14px;display:grid}.files li>div{min-width:0}.files code{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.files small{color:var(--warn);margin-top:2px;display:block}.pill{white-space:nowrap;border-radius:99px;padding:2px 10px;font-size:12px;font-weight:650;display:inline-block}.pill--quiet{border:1px solid var(--line-2);color:var(--muted)}.pill--ok{color:var(--ok);background:#34d39924}.pill--heavy{color:var(--warn);background:#fbbf2424}.pill--too-heavy{color:var(--bad);background:#f8717124}.actions{flex-wrap:wrap;gap:10px;margin-top:20px;display:flex}.progress{gap:12px;display:grid}.progress__row{justify-content:space-between;gap:12px;font-size:14px;display:flex}.bar{background:#ffffff0f;border-radius:99px;height:8px;overflow:hidden}.bar__fill{border-radius:inherit;background:linear-gradient(90deg, var(--accent), var(--accent-2));width:0;height:100%;transition:width .25s ease-out}.preview-bar{border-bottom:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}.length{color:var(--muted);align-items:center;gap:10px;font-size:14px;display:flex}.length input{accent-color:var(--accent);width:120px}.length output{min-width:72px;color:var(--text)}#preview{background:#000;border:0;width:100%;height:min(72vh,680px);display:block}.preview-hint{color:var(--muted);border-top:1px solid var(--line);margin:0;padding:10px 16px;font-size:13px}.design{flex-wrap:wrap;gap:20px 40px;display:flex}.captions{margin-top:20px}.tl{-webkit-user-select:none;user-select:none;margin:4px 0 6px;overflow-x:clip}.tl__markers{z-index:2;touch-action:none;margin:0 2px;position:relative}.tl__marker{width:0;position:absolute}.tl__label{z-index:1;max-width:150px;height:24px;color:var(--text);font:inherit;white-space:nowrap;cursor:grab;transform:translateX(calc(var(--at,0) * -100%));background:#1d1638;border:1px solid #a78bfa8c;border-radius:99px;align-items:center;gap:8px;padding:0 10px;font-size:12px;font-weight:600;display:inline-flex;position:relative}.tl__label span{text-overflow:ellipsis;overflow:hidden}.tl__label b{color:#c4b5fd;font-family:var(--mono);font-weight:600}.tl__marker.is-dragging .tl__label{cursor:grabbing;background:var(--accent);border-color:var(--accent)}.tl__marker.is-dragging .tl__label b{color:#fff}.tl__stem{pointer-events:none;background:#a78bfacc;width:2px;position:absolute;top:24px;left:-1px}.tl__strip{border:1px solid var(--line-2);cursor:pointer;touch-action:none;background:#0a0a0e;border-radius:10px;height:56px;position:relative;overflow:hidden}.tl__thumbs{height:100%;display:flex}.tl__thumbs img{object-fit:cover;opacity:.85;pointer-events:none;flex:1 1 0;min-width:0;height:100%}.tl__playhead{background:var(--accent-2);pointer-events:none;width:2px;margin-left:-1px;position:absolute;top:0;bottom:0;left:0;box-shadow:0 0 0 1px #0006,0 0 12px #22d3eeb3}.tl__scale{color:var(--muted);justify-content:space-between;margin-top:4px;font-size:11px;display:flex}.tl-hint{margin:4px 0 14px}.captions ol{gap:8px;margin:0 0 10px;padding:0;list-style:none;display:grid}.captions li{grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;display:grid}input[type=text]{border:1px solid var(--line-2);width:100%;color:var(--text);font:inherit;background:#0a0a0e;border-radius:10px;padding:9px 12px;font-size:15px}.cap-at{color:var(--muted);align-items:center;gap:6px;font-size:14px;display:flex}.cap-at input{width:64px}.captions__foot{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.tabs{flex-wrap:wrap;gap:4px;margin:16px 0 10px;display:flex}.tabs button{appearance:none;color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:9px;padding:6px 12px;font-size:14px;font-weight:600}.tabs button[aria-selected=true]{color:var(--text);border-color:var(--line-2);background:#ffffff0d}.code{position:relative}.copy{position:absolute;top:10px;right:10px}.code pre{max-height:420px;padding-top:52px}.how{border-top:1px solid var(--line);margin-top:32px;padding:56px 0 24px}.how h2{font-size:clamp(24px,3.5vw,34px)}.strips{gap:14px;margin-top:28px;display:grid}.strip{grid-template-columns:140px minmax(0,1fr);align-items:center;gap:16px;display:grid}.strip__label{color:var(--muted);font-size:14px;font-weight:600}.strip__cells{grid-template-columns:repeat(30,minmax(0,1fr));gap:3px;display:grid}.strip__cells i{background:#ffffff0f;border:1px solid #ffffff0d;border-radius:4px;height:34px}.strip__cells i.key{background:linear-gradient(180deg, var(--accent), #5b8cff);border-color:#0000}.legend{color:var(--muted);align-items:center;gap:8px;margin:12px 0 0;font-size:13px;display:flex}.dot{background:#ffffff1f;border-radius:3px;width:10px;height:10px;margin-left:8px;display:inline-block}.dot--key{background:var(--accent);margin-left:0}.steps{counter-reset:step;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:40px 0 0;padding:0;list-style:none;display:grid}.steps li{counter-increment:step;border-radius:var(--radius);border:1px solid var(--line);background:var(--card);color:var(--muted);padding:20px;font-size:15px}.steps li:before{content:counter(step);color:#c4b5fd;background:#7c5cff2e;border-radius:8px;place-items:center;width:28px;height:28px;margin-bottom:12px;font-size:14px;font-weight:700;display:grid}.steps b{color:var(--text);margin-bottom:4px;display:block}.foot{max-width:1040px;color:var(--muted);margin:0 auto;padding:32px 16px 48px;font-size:13px}@media (max-width:720px){.topbar__nav a{display:none}.hero{padding-top:24px}.drop{padding:32px 16px}.source{grid-template-columns:minmax(0,1fr)}.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.steps{grid-template-columns:minmax(0,1fr)}.strip{grid-template-columns:minmax(0,1fr);gap:6px}.strip__cells i{height:24px}.estimate li,.files li{grid-template-columns:minmax(0,1fr) auto}.estimate li .pill,.files li .pill{grid-column:2;justify-self:end}.card{padding:16px}.captions li{grid-template-columns:minmax(0,1fr) auto}.captions li .cap-text{grid-column:1/-1}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important}}
