html:is([data-pull=hairline],[data-pull=line]) .w57-pull{position:relative;display:block;height:0;opacity:1;text-shadow:none;pointer-events:none}html:is([data-pull=hairline],[data-pull=line]) .w57-pull-line{position:absolute;top:0;left:50%;height:1px;width:calc(var(--w57-p, 0) * 100%);transform:translate(-50%);background:var(--ink);overflow:hidden}html[data-pull=line] .w57-pull-dot{display:none}html[data-pull=hairline] .w57-pull-dot{position:absolute;top:4px;left:calc(50% + 6px);width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--signal);opacity:0;transform:scale(.4);transition:opacity var(--dur-micro) ease,transform var(--dur-surface) var(--ease-settle)}html[data-pull=hairline] .w57-pull-dot:after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1px solid var(--signal);opacity:0}html[data-pull=hairline] .w57-pull[data-state=armed] .w57-pull-dot,html[data-pull=hairline] .w57-pull[data-state=busy] .w57-pull-dot{opacity:1;transform:scale(1)}html[data-pull=hairline] .w57-pull[data-state=busy] .w57-pull-dot:after{animation:w57-pull-ring 2.2s cubic-bezier(.2,.6,.4,1) infinite}@keyframes w57-pull-ring{0%{transform:scale(.5);opacity:.9}70%{transform:scale(1.15);opacity:0}to{opacity:0}}html:is([data-pull=hairline],[data-pull=line]) .w57-pull[data-state=busy] .w57-pull-line{width:100%;background:var(--hairline)}html:is([data-pull=hairline],[data-pull=line]) .w57-pull[data-state=busy] .w57-pull-line:after{content:"";position:absolute;top:0;left:0;width:28%;height:1px;background:var(--ink);animation:w57-sweep 1.1s cubic-bezier(.45,0,.2,1) infinite}@keyframes w57-sweep{0%{transform:translate(-100%)}to{transform:translate(360%)}}html:is([data-pull=hairline],[data-pull=line]) .w57-pull[data-state=retract] .w57-pull-line{transition:width var(--dur-surface) var(--ease-settle)}@media(prefers-reduced-motion:reduce){html[data-pull=hairline] .w57-pull-dot,html:is([data-pull=hairline],[data-pull=line]) .w57-pull[data-state=retract] .w57-pull-line{transition:none}html:is([data-pull=hairline],[data-pull=line]) .w57-pull[data-state=busy] .w57-pull-line:after,html[data-pull=hairline] .w57-pull[data-state=busy] .w57-pull-dot:after{animation:none}html:is([data-pull=hairline],[data-pull=line]) .w57-pull[data-state=busy] .w57-pull-line{background:var(--ink)}}