/* Enable only after a real mouse movement; touch and keyboard retain native behaviour. */
.portfolio-cursor-ring{position:fixed;top:0;left:0;pointer-events:none!important;z-index:2147483647;border-radius:50%;opacity:0;mix-blend-mode:difference;transition:opacity .15s;will-change:transform;contain:layout style}
.portfolio-cursor-ring{width:34px;height:34px;border:1px solid rgba(255,255,255,.8);box-sizing:border-box}
@media(hover:hover) and (pointer:fine){
  /* Keep a real cursor visible to remote-desktop software. The fine outline
     makes the small dot readable on both light and dark backgrounds. */
  html.portfolio-cursor-active,html.portfolio-cursor-active *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='3' fill='white' stroke='%232b2b2b' stroke-width='1'/%3E%3C/svg%3E") 4 4,auto!important}
  html.portfolio-cursor-active .portfolio-cursor-ring{opacity:1}
}
@media(forced-colors:active){.portfolio-cursor-ring{display:none!important}}
@media(prefers-reduced-motion:reduce){.portfolio-cursor-ring{transition:none}}