.scroll-progress{
    position:fixed;
    right:24px;
    bottom:24px;
    width:var(--ring-size);
    height:var(--ring-size);
    z-index:9999;
    pointer-events:none;     
  }
  
  .progress-svg{
    width:100%;
    height:100%;
    transform:rotate(-90deg); 
  }
  

  .track{
    fill:none;
    stroke: rgba(25,34,49,.15);
    stroke-width: var(--ring-thickness);
  }
  
  .indicator{
    fill:none;
    stroke: var(--blue-ink);
    stroke-width: var(--ring-thickness);
    stroke-linecap: round;
    stroke-dasharray: 0 999;  
    stroke-dashoffset: 0;
  }
  
  .to-top-btn{
    position:absolute;
    inset:0;                
    border:0;
    border-radius:50%;
    background: transparent;  
    box-shadow:none;         
    display:grid;
    place-items:center;
    cursor:pointer;
    pointer-events:auto;
  }
  
  .arrow{
    width:22px;
    height:22px;
    color: var(--blue-ink);   
  }
  
  .to-top-btn:hover .arrow{
    transform: translateY(-1px);
  }
  .to-top-btn:active .arrow{
    transform: translateY(0);
  }

  @media (max-width: 600px){
    :root{
      --ring-size: 48px;      
    }
    .scroll-progress{
      right: max(12px, env(safe-area-inset-right));
      bottom: calc(max(12px, env(safe-area-inset-bottom)) + 4px); 
    }
    .to-top-btn{ min-width: 44px; min-height: 44px; }}