:root{
  --btt-size:52px;
  --btt-bottom:16px;
  --btt-right:16px;
  --btt-z:2147483000;
  --btt-fade:280ms;
  --btt-ease:cubic-bezier(0.25,0.75,0.35,1);
}
@media(min-width:782px){
  :root{ --btt-bottom:32px; --btt-right:32px; }
}

.btt-top-anchor{position:absolute;top:0;left:0;width:0;height:0;overflow:hidden;}

.btt-button{
  position:fixed;
  right:var(--btt-right);
  bottom:var(--btt-bottom);
  width:var(--btt-size);
  height:var(--btt-size);
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  cursor:pointer;
  opacity:0;
  transform:translateY(4px);
  transition:
    opacity var(--btt-fade) var(--btt-ease),
    transform var(--btt-fade) var(--btt-ease);
  z-index:var(--btt-z);
  pointer-events:none;
  will-change:opacity,transform;
  -webkit-tap-highlight-color: transparent;
}

#btt-button.is-visible{opacity:1;transform:translateY(0);pointer-events:auto;}

.btt-button:hover,.btt-button:focus-visible{opacity:.92;outline:none;}

.btt-img{width:100%;height:auto;display:block;filter:drop-shadow(0 1px 4px rgba(0,0,0,.12));}

/* Subtle tap */
@keyframes btt-tap{0%{transform:translateY(0)}50%{transform:translateY(3px)}100%{transform:translateY(0)}}
#btt-button.is-tap{animation:btt-tap 150ms var(--btt-ease);}

#btt-viewport-layer{position:fixed;inset:0;pointer-events:none;z-index:2147482999;}
#btt-viewport-layer #btt-button{position:absolute;right:var(--btt-right);bottom:var(--btt-bottom);}

@media (prefers-reduced-motion:reduce){
  .btt-button{transition:none;}
  #btt-button.is-tap{animation:none;}
}