@note{...} renders a margin note beside the line it comments. Numbering comes from CSS counters, so an author no need to maintain that, numbers are computed automatically via CSShttps://www.w3schools.com/Css/.
A @mention written with no anchor text (i.e. @mention["..."]) inside a note expands into the mentioned card's calling card. With anchor text it stays a plain link (i.e. @mention["..."]{...})
Citing a card therefore costs what writing a link costs, while the reader learns what is over there without leaving the page. Either way the mention reaches the backlink graph.
Where there is no margin to write in the note falls back to an indented block, and on a phone it folds away with the superscript as its tap target.