/* Dorax Finance — pulling a screen down to bring it up to date, on a phone (app/pull-refresh.js): the logo's o, a forest ring and its lime
   quarter on a white disc, coming down from the top with the finger; the ring fills as the pull grows; past the mark, the quarter turns. */
#ptr { position: fixed; left: 50%; top: calc(var(--safe-t) + 10px); z-index: 70; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 6px 18px rgba(14, 15, 12, .16), 0 0 0 1px rgba(14, 15, 12, .06); transform: translate(-50%, -56px); opacity: 0; pointer-events: none; will-change: transform, opacity; }
#ptr svg { width: 26px; height: 26px; overflow: visible; transform-origin: 50% 50%; }
#ptr circle { fill: none; stroke: rgba(22, 51, 0, .14); stroke-width: 7; }
#ptr path { fill: none; stroke: #163300; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--ptr-off, 75); transition: stroke 120ms ease-out; }
#ptr.past path { stroke: #9FE870; }
#ptr.past circle { stroke: #163300; }
#ptr.spin path { stroke: #9FE870; stroke-dashoffset: 75; transition: stroke-dashoffset 160ms ease-out; }
#ptr.spin circle { stroke: #163300; }
#ptr.spin svg { animation: ptr-turn 1s cubic-bezier(.6, .1, .4, .9) infinite; }
@keyframes ptr-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #ptr.spin svg { animation-duration: 2.4s; animation-timing-function: linear; } }
@media (min-width: 921px) { #ptr { display: none; } }