.gif-drop{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;margin-top:16px;border:1px dashed #111;cursor:pointer;overflow:hidden;background:#fff}
.gif-drop:hover,.gif-drop.dragging{background:#f4f4f4}
.gif-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.gif-drop.has-file{border-style:solid;border-color:var(--hairline);background:#fff}
.gif-drop-empty{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:.66rem;color:#777;pointer-events:none;text-align:center;padding:0 20px}
.gif-drop-empty svg{width:26px;height:26px;color:#111}
.gif-drop-empty strong{font-weight:400;color:#111;font-size:.78rem}
.gif-drop img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.source-caption{display:flex;justify-content:space-between;gap:12px;padding-top:12px;color:#777;font-size:.66rem;min-height:30px}
.gif-replace{font-size:.66rem;color:#111;white-space:nowrap}.gif-replace:hover{text-decoration:underline;text-underline-offset:4px}
.gif-stage{position:relative;width:100%;aspect-ratio:1;margin-top:16px;border:1px solid var(--hairline);display:grid;place-items:center;overflow:hidden;background:#fff}
.gif-empty{color:#999;font-size:.72rem}
.gif-stage canvas,.gif-stage img{width:100%;height:100%;display:block;image-rendering:pixelated}
.gif-stage canvas{opacity:.92}
.gif-loader{position:absolute;left:16px;right:16px;bottom:16px;background:#fff;border:1px solid #111;padding:14px 16px 16px;font-size:.66rem;color:#777}
.gif-loader-top{display:flex;justify-content:space-between;gap:12px}
.gif-loader-top span:first-child{color:#111}
.gif-loader-bar{height:2px;background:var(--hairline);margin-top:12px;overflow:hidden}
.gif-loader-bar i{display:block;height:100%;width:0;background:#111;transition:width .4s ease}
.gif-loader-bar.indeterminate i{width:30%;animation:gif-slide 1.1s ease-in-out infinite}
@keyframes gif-slide{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
.gif-loader-frames{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;margin-top:10px}
.gif-loader-frames i{height:6px;background:#eee}
.gif-loader-frames i.done{background:#111}
.gif-loader-frames i.active{background:#bbb;animation:gif-pulse .9s ease-in-out infinite alternate}
@keyframes gif-pulse{from{opacity:.35}to{opacity:1}}
.gif-actions{grid-template-columns:repeat(2,1fr)}
@media(max-width:650px){.gif-actions{grid-template-columns:1fr 1fr}.gif-actions button:first-child{grid-column:auto;border-bottom:0}.gif-actions button:nth-child(2){border-left:1px solid #111}.gif-loader{left:10px;right:10px;bottom:10px;padding:11px 12px 12px}}
@media(prefers-reduced-motion:reduce){.gif-loader-bar.indeterminate i,.gif-loader-frames i.active{animation:none}}
.size-options.locked{pointer-events:none}.size-options.locked button:not(.selected){color:#bbb}
.gif-drop video{width:100%;height:100%;object-fit:cover;pointer-events:none}