html.custom-cursor,
html.custom-cursor body,
html.custom-cursor a,
html.custom-cursor button,
html.custom-cursor [role="button"],
html.custom-cursor input,
html.custom-cursor textarea,
html.custom-cursor select{cursor:none!important}

.custom-cursor-dot,
.custom-cursor-ring{
  position:fixed;
  left:0;
  top:0;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  opacity:0
}

.custom-cursor-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#f4f4f4;
  transition:width .16s,height .16s,opacity .16s,background .25s
}

.custom-cursor-ring{
  width:30px;
  height:30px;
  border:1px solid rgba(244,244,244,.72);
  border-radius:50%;
  transition:width .2s,height .2s,border-color .2s,background .2s,opacity .16s
}

.custom-cursor-ring.is-interactive{
  width:46px;
  height:46px;
  border-color:rgba(244,244,244,.95);
  background:rgba(255,255,255,.035)
}

.custom-cursor-ring.is-clicking{
  width:54px;
  height:54px;
  background:rgba(255,255,255,.055)
}

body.light-mode .custom-cursor-dot{background:#202020}
body.light-mode .custom-cursor-ring{border-color:rgba(32,32,32,.7)}
body.light-mode .custom-cursor-ring.is-interactive{border-color:rgba(32,32,32,.92);background:rgba(0,0,0,.035)}
body.light-mode .custom-cursor-ring.is-clicking{background:rgba(0,0,0,.055)}

html.custom-cursor dialog,
html.custom-cursor dialog *{cursor:none!important}