/* GIF 调速 */
.gif-drop{position:relative;display:flex;align-items:center;justify-content:center;min-height:16rem;padding:1rem;
  border:2px dashed #d7dce5;border-radius:.75rem;background:#fafbfd;cursor:pointer;text-align:center;
  transition:border-color .2s,background-color .2s}
.gif-drop:hover,.gif-drop.hover,.gif-drop:focus{border-color:var(--site-primary);background:var(--site-tint);outline:0}
.gif-drop-hint i{display:block;margin-bottom:.5rem;color:var(--site-primary);font-size:2.5rem;line-height:1}
.gif-drop-hint p{font-size:.9375rem}
.gif-preview{max-width:100%;max-height:22rem;border-radius:.5rem;box-shadow:0 1px 6px rgba(16,24,40,.12)}
.gif-info{margin-top:1rem;padding:.75rem .875rem;border:1px solid #eef1f5;border-radius:.5rem;background:#fafbfd;font-size:.8125rem;color:#5c636a}
.gif-info dl{display:flex;flex-wrap:wrap;margin:0}
.gif-info dt{flex:0 0 5rem;font-weight:400;color:#8a9199}
.gif-info dd{flex:1 1 auto;margin:0 0 .25rem}
.gif-box{display:flex;align-items:center;justify-content:center;min-height:9rem;padding:.75rem;border:1px solid #eef1f5;border-radius:.6rem;
  background:linear-gradient(45deg,#f7f8fa 25%,transparent 25%,transparent 75%,#f7f8fa 75%),
             linear-gradient(45deg,#f7f8fa 25%,#fff 25%,#fff 75%,#f7f8fa 75%);
  background-size:16px 16px;background-position:0 0,8px 8px}
.gif-box img{display:block;max-width:100%;max-height:16rem;border-radius:.375rem}
.gif-box-out{border-color:var(--site-primary)}
.gif-speed-on{background-color:var(--site-primary)!important;border-color:var(--site-primary)!important;color:#fff!important}