/* Custom pointer everywhere, also over text and form fields (selection still works); dark panels get a light pointer */
#cursor-dot,#cursor-ring{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;border-radius:50%;will-change:transform;transition:opacity .18s ease;visibility:hidden}
body.cursor-ready #cursor-dot,body.cursor-ready #cursor-ring{visibility:visible}
#cursor-dot{width:.4rem;height:.4rem;background:var(--color-cursor);transform:translate(-50%,-50%)}
#cursor-ring{width:2.25rem;height:2.25rem;border:.0938rem solid var(--color-overlay-cursor);transform:translate(-50%,-50%);transition:width .22s ease,height .22s ease,border-radius .22s ease,opacity .18s ease,border-color .18s ease}
/* Only the dot follows the pointer; the ring appears only as the outline around a hovered control */
body:not(.cursor-hover) #cursor-ring{opacity:0}
body.cursor-hover #cursor-dot{opacity:0}
body.cursor-light #cursor-dot{background:var(--color-white)}
body.cursor-light #cursor-ring{border-color:rgba(255,255,255,.78)}
@media(hover:hover) and (pointer:fine){html,body,body *,body *::before,body *::after{cursor:none!important}}
@media(hover:none){#cursor-dot,#cursor-ring{display:none}body{cursor:auto}}

body.cursor-hover #cursor-ring{border-color:var(--color-accent-primary)}

body.cursor-light.cursor-hover #cursor-ring{border-color:rgba(255,255,255,.78)}