/* Video to GIF interface styles, optimized for touch trimming, draggable framing, color controls, and four-line cropping. Version 1.6.3. */
[hidden]{display:none!important}
.preview-shell{max-height:none!important}
.preview-shell video{position:absolute!important;inset:0;z-index:1;pointer-events:none;user-select:none;-webkit-user-drag:none}
.pan-surface{position:absolute;z-index:2;inset:0;touch-action:none}
.preview-shell.can-pan{cursor:grab;touch-action:none}
.preview-shell.can-pan.panning{cursor:grabbing}
.preview-shell .play-button{z-index:7}
.crop-shade{position:absolute;z-index:8;background:rgba(12,17,27,.66);pointer-events:none}
.crop-box{position:absolute;z-index:9;touch-action:none;pointer-events:none;border:3px solid transparent;box-shadow:0 0 0 1px transparent;transition:border-color .15s,box-shadow .15s}
.crop-box.active{border-color:#5cfff0;box-shadow:0 0 0 1px #001c19,0 0 16px #21d7c080}
.crop-box:not(.active) .crop-handle{opacity:0;pointer-events:none}
.crop-grid{position:absolute;background:rgba(255,255,255,.42);opacity:.35;pointer-events:none}
.crop-box.active .crop-grid{opacity:.72}
.crop-grid-v{top:0;bottom:0;width:1px}.crop-grid-h{left:0;right:0;height:1px}
.crop-grid-v.one{left:33.333%}.crop-grid-v.two{left:66.666%}.crop-grid-h.one{top:33.333%}.crop-grid-h.two{top:66.666%}
.crop-handle{position:absolute;z-index:10;display:block;margin:0;padding:0;border:0;-webkit-appearance:none;appearance:none;background:transparent;pointer-events:auto;touch-action:none;cursor:grab}
.crop-handle:active{cursor:grabbing}
.crop-handle::after{content:"";position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);display:block;border-radius:99px;background:var(--cyan);box-shadow:0 1px 5px #000b,0 0 0 1px #bafff6}
.crop-handle.n,.crop-handle.s{left:0;width:100%;height:34px}.crop-handle.n{top:-3px}.crop-handle.s{bottom:-3px}.crop-handle.n::after,.crop-handle.s::after{width:64px;height:7px}
.crop-handle.e,.crop-handle.w{top:0;height:100%;width:34px}.crop-handle.e{right:-3px}.crop-handle.w{left:-3px}.crop-handle.e::after,.crop-handle.w::after{width:7px;height:64px}
.range-wrap{height:40px!important;margin:3px 15px 8px!important;overflow:visible}
.range-track,.range-fill{top:17px!important;height:7px!important}
.trim-handle{position:absolute;z-index:12;top:-2px;width:44px;height:44px;margin-left:-22px;border:0;border-radius:50%;-webkit-appearance:none;appearance:none;background:transparent;box-shadow:none;touch-action:none;cursor:grab;padding:0;display:block;opacity:1;visibility:visible}
.trim-handle::after{content:"";position:absolute;left:50%;top:50%;width:27px;height:27px;transform:translate(-50%,-50%);border-radius:50%;border:7px solid var(--cyan2);background:#f8ffff;box-shadow:0 2px 9px #000b,0 0 0 1px #8ffff2}
.trim-handle:active{cursor:grabbing}.trim-handle:active::after{transform:translate(-50%,-50%) scale(1.08)}
.file-row-bottom{margin-top:16px;margin-bottom:0}
.text-button{border:0;background:transparent;color:var(--cyan);font-size:12px;font-weight:750;cursor:pointer;padding:4px}
.effect-controls{display:grid;gap:9px;margin-top:14px;padding-top:12px;border-top:1px solid #25354c}.effect-controls label{display:grid;grid-template-columns:108px 1fr;align-items:center;gap:10px;color:#a9b6c9;font-size:12px}.effect-controls label>span{display:flex;align-items:center;justify-content:space-between;gap:5px}.effect-controls output{color:var(--cyan);font-variant-numeric:tabular-nums}.effect-controls input{width:100%;height:30px;margin:0;accent-color:var(--cyan);cursor:pointer}
:root{color-scheme:dark;--bg:#08111f;--panel:#111e31;--panel2:#15243a;--line:#263752;--text:#f7f9fd;--muted:#91a0b7;--cyan:#36d6c3;--cyan2:#23b7ad;--violet:#8b6cff;--danger:#ff6b80;--radius:18px}*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 15% -10%,#15315c 0,transparent 36%),var(--bg);color:var(--text);padding:0 max(18px,env(safe-area-inset-right)) calc(26px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));overflow-x:hidden}.ambient{position:fixed;border-radius:999px;filter:blur(70px);opacity:.17;pointer-events:none}.ambient-one{width:240px;height:240px;background:#486dff;top:35%;left:-150px}.ambient-two{width:190px;height:190px;background:#24d8be;right:-120px;bottom:4%}.topbar{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;max-width:720px;margin:auto;padding:24px 0 0}.topbar h1{font-size:clamp(25px,7vw,32px);line-height:1;margin:0 0 7px;letter-spacing:-.7px}.topbar a{color:#9cacc2;text-decoration:none}.topbar a:hover{color:var(--cyan)}button,input,select{font:inherit}.icon-button,.clear-button{appearance:none;border:0;color:#d9e3f2;cursor:pointer}.icon-button{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:#142239;box-shadow:inset 0 0 0 1px #2b3c59,0 9px 25px #0005}.icon-button svg{width:21px;fill:none;stroke:currentColor;stroke-width:1.7}.clear-button{width:34px;height:34px;flex:0 0 auto;background:#22324a;border-radius:50%;font-size:25px;line-height:1}main{position:relative;z-index:1;width:100%;max-width:720px;margin:auto}.drop-card{min-height:58vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px;border:1px dashed #3c5579;border-radius:26px;background:linear-gradient(145deg,#12223aec,#0d1729ee);box-shadow:0 25px 70px #0004}.film-icon{width:86px;height:86px;display:grid;place-items:center;border-radius:27px;background:linear-gradient(145deg,#1d3655,#14243a);box-shadow:inset 0 0 0 1px #385271,0 18px 42px #0005}.film-icon svg{width:45px;fill:none;stroke:var(--cyan);stroke-width:1.5}.film-icon .play-fill{fill:var(--cyan);stroke:none}.drop-card h2{font-size:25px;margin:24px 0 8px}.drop-card p{color:var(--muted);margin:0 0 26px;line-height:1.5}.primary-button{border:0;border-radius:15px;min-height:54px;padding:0 27px;background:linear-gradient(135deg,#3de2ca,#29b9b6);color:#04201f;font-weight:800;cursor:pointer;box-shadow:0 13px 32px #1fbbae35,0 1px 0 #87fff1 inset}.primary-button:active{transform:translateY(1px)}.primary-button:disabled{opacity:.65;cursor:wait}.file-button{display:flex;align-items:center;justify-content:center;min-width:190px}.file-button input{position:absolute;width:1px;height:1px;opacity:0}.drop-hint{font-size:13px;color:#6f8099;margin-top:14px}.file-row{display:flex;align-items:center;gap:11px;background:#101d30;border:1px solid var(--line);padding:10px 12px;border-radius:15px;margin-bottom:13px}.file-badge{font-size:10px;font-weight:900;color:#061c1c;background:var(--cyan);border-radius:6px;padding:6px}.file-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}.file-copy strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-copy span{font-size:12px;color:var(--muted)}.preview-shell{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:16/9;max-height:55vh;background:#02060c;border-radius:20px;overflow:hidden;border:1px solid #243550;box-shadow:0 24px 60px #0006;transition:aspect-ratio .2s}.preview-shell video{width:100%;height:100%;object-fit:cover}.play-button{position:absolute;display:grid;place-items:center;width:54px;height:54px;border:1px solid #fff4;border-radius:50%;background:#06101dbb;color:white;backdrop-filter:blur(10px);font-size:19px;cursor:pointer}.time-row{display:flex;justify-content:space-between;padding:7px 4px 11px;color:#9babc1;font-variant-numeric:tabular-nums;font-size:12px}.panel{background:linear-gradient(145deg,#111e31,#0e192a);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:12px;box-shadow:0 12px 35px #0002}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.panel-title h2{font-size:16px;margin:0}.panel-title span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.range-wrap{position:relative;height:28px;margin:4px 9px 7px}.range-track,.range-fill{position:absolute;height:6px;top:11px;border-radius:99px}.range-track{left:0;right:0;background:#293a54}.range-fill{left:0;right:0;background:linear-gradient(90deg,var(--cyan),#6d84ff)}.range{position:absolute;left:0;top:0;width:100%;height:28px;margin:0;appearance:none;background:transparent;pointer-events:none}.range::-webkit-slider-thumb{appearance:none;width:23px;height:23px;border-radius:50%;background:#f8ffff;border:6px solid var(--cyan2);box-shadow:0 2px 8px #0009;pointer-events:auto;cursor:grab}.range::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#fff;border:5px solid var(--cyan2);pointer-events:auto}.trim-inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px}.trim-inputs label{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;color:#a9b6c9;font-size:12px}.trim-inputs em{font-style:normal;color:#718198}.number-wrap{display:grid;grid-template-columns:1fr 25px;align-items:center;background:#0b1525;border:1px solid #2a3a52;border-radius:10px}.number-wrap input{width:100%;min-width:0;background:transparent;border:0;color:#fff;padding:9px 3px 9px 9px;outline:0}.number-wrap button{border:0;background:transparent;color:#73849c;font-size:18px;padding:0;cursor:pointer}.select-row,.settings-sheet>label{display:flex;align-items:center;justify-content:space-between;gap:14px;color:#bdc8d8;font-size:14px}.select-row select,.settings-sheet select{border:1px solid #31425c;border-radius:10px;background:#0c1728;color:#fff;padding:9px 30px 9px 10px;max-width:61%}.crop-controls{margin-top:15px;padding-top:13px;border-top:1px solid #25354c}.crop-controls label{display:grid;grid-template-columns:110px 1fr;align-items:center;font-size:12px;color:#92a2b8;margin:8px 0}.crop-controls input{accent-color:var(--cyan)}.estimate-row{display:flex;align-items:center;gap:8px;color:#91a2b9;font-size:12px;padding:2px 4px 12px}.estimate-row .spark{color:var(--cyan)}.estimate-row button{margin-left:auto;border:0;background:transparent;color:var(--cyan);font-weight:700;cursor:pointer}.convert-button{width:100%;font-size:16px}.button-spinner{display:none;width:18px;height:18px;margin-right:9px;border:2px solid #063e3b55;border-top-color:#063e3b;border-radius:50%;vertical-align:-4px;animation:spin .7s linear infinite}.convert-button:disabled .button-spinner{display:inline-block}.cancel-button{display:block;margin:9px auto 0;border:0;background:transparent;color:#a9b8cc;cursor:pointer}.progress-area{margin-top:14px;padding:13px 15px;background:#101d30;border:1px solid var(--line);border-radius:14px}.progress-copy{display:flex;justify-content:space-between;gap:12px;color:#aab8ca;font-size:12px;margin-bottom:9px}.progress-copy strong{color:var(--cyan)}.progress-track{height:7px;background:#26364c;border-radius:99px;overflow:hidden}.progress-track div{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),#7884ff);transition:width .12s}.settings-sheet{width:min(500px,100%);padding:10px 20px calc(18px + env(safe-area-inset-bottom));background:#101c2e;border:1px solid #2b3d58;border-radius:25px 25px 0 0;box-shadow:0 -30px 80px #0008}.sheet-handle{width:45px;height:4px;border-radius:99px;background:#4a5a71;margin:0 auto 16px}.settings-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.settings-title h2{margin:0 0 5px;font-size:22px}.settings-title p{margin:0;color:var(--muted);font-size:13px}.settings-sheet>label{padding:14px 0;border-bottom:1px solid #223149}.settings-sheet>label>span{display:flex;flex-direction:column;gap:4px}.settings-sheet small{color:#718199}.privacy-note{display:flex;gap:10px;align-items:center;margin:16px 0 4px;padding:12px;background:#102b31;border:1px solid #1e5559;border-radius:13px}.privacy-note>span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#1fb8a4;color:#042824;font-weight:900}.privacy-note p{display:flex;flex-direction:column;margin:0;color:#86aaa9;font-size:11px;line-height:1.4}.privacy-note strong{color:#ccebe8;font-size:12px}.revision{text-align:center;color:#63738b;font-size:11px;margin:11px}.done-button{width:100%}dialog{position:fixed;inset:auto 0 0;margin:auto;width:100%;max-width:none;padding:0;border:0;background:transparent;color:white}dialog::backdrop{background:#03070dbc;backdrop-filter:blur(4px)}dialog[open]{animation:sheetIn .2s ease-out}#dropOverlay{position:fixed;z-index:20;inset:0;display:grid;place-items:center;background:#071323ea;opacity:0;visibility:hidden;transition:.15s;pointer-events:none}#dropOverlay.active{opacity:1;visibility:visible}#dropOverlay div{display:flex;flex-direction:column;align-items:center;border:2px dashed var(--cyan);border-radius:28px;padding:55px;box-shadow:0 0 70px #2bd5c244}#dropOverlay strong{font-size:25px}#dropOverlay span{color:#9bacc0;margin-top:8px}#toast{position:fixed;z-index:30;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));max-width:calc(100vw - 32px);transform:translate(-50%,25px);background:#e7fff9;color:#07332e;border-radius:12px;padding:12px 16px;font-weight:700;font-size:13px;box-shadow:0 14px 40px #0008;opacity:0;visibility:hidden;transition:.2s;text-align:center}#toast.visible{opacity:1;visibility:visible;transform:translate(-50%,0)}#toast.error{background:#ffe9ed;color:#6d1020}@keyframes spin{to{transform:rotate(360deg)}}@keyframes sheetIn{from{transform:translateY(25px);opacity:.7}}@media(min-width:700px){body{padding-top:10px}.topbar{align-items:center}.topbar a{margin-bottom:14px!important}.drop-card{min-height:560px}.panel{padding:19px}.trim-panel,.edit-panel{display:inline-block;vertical-align:top;width:calc(50% - 6px);min-height:151px}.edit-panel{margin-left:8px}.settings-sheet{border-radius:25px;margin-bottom:24px}dialog{inset:0;display:none;place-items:center}dialog[open]{display:grid}.settings-sheet{border-radius:25px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}