@media (hover:hover) and (pointer:fine){
  html.has-fancy-cursor,
  html.has-fancy-cursor body,
  html.has-fancy-cursor a,
  html.has-fancy-cursor button,
  html.has-fancy-cursor input,
  html.has-fancy-cursor textarea,
  html.has-fancy-cursor select,
  html.has-fancy-cursor label{
    cursor:none !important;
  }

  .cursor-ring,
  .cursor-dot{
    position:fixed;
    left:0;
    top:0;
    pointer-events:none;
    opacity:0;
    z-index:9999;
    will-change:transform,opacity,width,height;
    transition:
      opacity .22s ease,
      width .22s ease,
      height .22s ease,
      border-color .22s ease,
      background .22s ease;
  }

  .cursor-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#efe5d5;
    mix-blend-mode:difference;
  }

  .cursor-ring{
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.76);
    background:radial-gradient(circle, rgba(255,85,56,.14), rgba(255,85,56,0));
    mix-blend-mode:difference;
  }

  .cursor-ring.is-visible,
  .cursor-dot.is-visible{
    opacity:1;
  }

  .cursor-ring.is-active{
    border-color:rgba(255,255,255,.96);
    background:radial-gradient(circle, rgba(255,85,56,.2), rgba(255,85,56,0));
  }

  .cursor-ring.is-card{
    width:82px;
    height:82px;
  }
}