#piano-pull-refresh {
  position:fixed;
  z-index:10000;
  top:max(10px,env(safe-area-inset-top,0px));
  left:50%;
  max-width:calc(100vw - 32px);
  box-sizing:border-box;
  padding:11px 18px;
  border:1px solid #d5e1e8;
  border-radius:999px;
  background:#fff;
  color:#17384f;
  box-shadow:0 5px 20px #17384f26;
  font:600 14px/1.4 system-ui,sans-serif;
  text-align:center;
  opacity:0;
  transform:translate(-50%,-120%);
  pointer-events:none;
}
#piano-pull-refresh[data-visible="true"] {
  opacity:1;
  transform:translate(-50%,min(var(--pull-distance,48px),64px));
}