A CSS pixel has no fixed physical size. Browsers fix it at 1/96 of an inch only for printing; on a display it is whatever the panel density and the device pixel ratio make it. The same 100-pixel circle is about 26 mm on an older desktop monitor and about 16 mm on a dense phone. An on-screen sizer that draws a circle without calibrating first is drawing a guess, and the guess can be wrong by 40%.
Calibration produces one number, cssPxPerMm, and every circle drawn afterwards derives from it. Card calibration gets that number directly:
cssPxPerMm = card width on screen (px) ÷ 85.6
85.6 mm by 53.98 mm is the ID-1 format defined by ISO/IEC 7810. Bank cards, credit cards and most national ID cards and driving licences are manufactured to it worldwide, to a tolerance of a few hundredths of a millimetre — tighter than you can see. That makes the card in your pocket a better reference object than most household rulers.
The other two methods work backwards from pixel density instead: cssPxPerMm = PPI ÷ devicePixelRatio ÷ 25.4, with the PPI either looked up from a device table or computed from your native resolution and screen diagonal. A calibration implying a density below 72 or above 700 PPI is rejected outright, because no real display sits outside that range.