html.df-pull-refresh,html.df-pull-refresh body{overscroll-behavior-y:none}
html.df-pull-return{--df-pull-offset:60px;--df-pull-opacity:1}
html:is(.df-pull-active,.df-pull-return) body>:is(main,.wrap,.box){
  transform:translate3d(0,var(--df-pull-offset,0px),0);will-change:transform;
  transition:transform .4s cubic-bezier(.2,.85,.25,1.06);overflow-anchor:none}
html.df-pull-dragging body>:is(main,.wrap,.box){transition:none}
#dfPullRefresh{position:fixed;z-index:150;top:calc(env(safe-area-inset-top,0px) + var(--df-pull-offset,0px)/2 - 14px);
  left:50%;width:28px;height:28px;transform:translateX(-50%);pointer-events:none;
  color:var(--dim,#a8b4c8);opacity:var(--df-pull-opacity,0);
  transition:top .4s cubic-bezier(.2,.85,.25,1.06),opacity .25s ease}
.df-pull-dragging #dfPullRefresh{transition:none}
#dfPullRefresh.is-ready{color:var(--accent,#8ce99a)}
.df-refresh-wheel{display:block;position:relative;width:28px;height:28px;transform:rotate(var(--df-pull-rotation,0deg))}
.df-refresh-wheel i{position:absolute;left:12.5px;top:0;width:3px;height:7px;border-radius:2px;background:currentColor;
  transform-origin:1.5px 14px;transform:rotate(calc(var(--spoke)*30deg));
  opacity:clamp(.15,calc(var(--df-pull-progress,0)*12 - var(--spoke)),1)}
#dfPullRefresh.is-refreshing .df-refresh-wheel{animation:dfRefreshSpin .8s steps(12) infinite}
#dfPullRefresh.is-refreshing .df-refresh-wheel i{opacity:calc(.15 + var(--spoke)/14)}
.df-refresh-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes dfRefreshSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  html.df-pull-refresh body>:is(main,.wrap,.box),#dfPullRefresh{transition-duration:.01s}
  #dfPullRefresh.is-refreshing .df-refresh-wheel{animation:none}}