Graphemica: Different Fonts on Hover by myfonj

/* ==UserStyle==
@name           Graphemica: Different Fonts on Hover
@description    Change font families of example characters by position mouse cursor over body or character and/or holding left mouse button
@namespace      myfonj
@version        2.0.1
@license        CC0 - Public Domain
==/UserStyle== */
@-moz-document domain("graphemica.com") {
/*
Chanelog
2.0.1 (2023-08-08) Saner rule, forced variation selector variants for main chars always visible.
1.0.1 (2023-07-06) Init
1.0.0 Init
Notes:
Original is:
  body .char {
    font-family: "Times", "Times New Roman", "serif", "sans-serif", "EmojiSymbols";
  }
  EmojiSymbols (http://emojisymbols.com/) is embedded in page style.
https://greasyfork.org/en/scripts/411367/versions/new
https://userstyles.org/styles/130470/edit
 
 ? try Twemoji Mozilla + gfx.bundled-fonts.activate=1
*/

 /* debug * /
 .char {
  font-family: 'segoe ui emoji', 'segoe ui symbol', 'segoe ui' !important;
 }
 /* */
 
/* Default is (2023-02-07,2023-07-06):
 so on windows most likely to pick up Times New Roman or Segoe UI
* /
.body .char {
 font-family: 'Times', 'Times New Roman',
 'serif', 'sans-serif', system-ui, -apple-system, BlinkMacSystemFont,
 'Avenir Next', 'Avenir',
 'Segoe UI', 'Lucida Grande',
 'Helvetica Neue', 'Helvetica',
 'Fira Sans', 'Roboto', 'Noto', 'Droid Sans', 'Cantarell', 'Oxygen', 'Ubuntu',
 'Franklin Gothic Medium', 'Century Gothic', 'Liberation Sans', sans-serif, 'EmojiSymbols';
}


Plan:
what states I want to see:
- graphemica's "EmojiSymbols"
- dumb default amd generics (Segoe UI, system)
- system textual (Segoe UI Symbol)
- system emoji (Segoe UI Emoji)
- browser emoji (Twemoji mozilla)

States available:
- cold (mouse out)
- body:hover
- body:active
- char:hover
- char:active


/* */

body {
  --graphemica-emojisymbol-stack: 'EmojiSymbols';
  --graphemica-emojisymbol-descr: "'EmojiSymbols'";
 
  --system-ascii-stack: 'Segoe UI', system-ui, 'serif', 'sans-serif';
  --system-ascii-descr: "'Segoe UI', system-ui, 'serif', 'sans-serif'";
 
  --system-symbol-stack: 'Segoe UI Symbol';
  --system-symbol-descr: "'Segoe UI Symbol'";
 
  --system-emoji-stack: 'Segoe UI Emoji';
  --system-emoji-descr: "'Segoe UI Emoji'";
 
  --browser-emoji-stack: 'Twemoji Mozilla';
  --browser-emoji-descr: "'Twemoji Mozilla'";
 
  --stack: var(--graphemica-emojisymbol-stack);
  --descr: var(--graphemica-emojisymbol-descr);
}

.char[data-text]::after {
 content: ' ' attr(data-text) '\FE0E' attr(data-text) '\FE0F';
 font-size: .7em;
}

body .char {
  font-family: var(--stack);
  --stack: var(--graphemica-emojisymbol-stack);
  --descr: var(--graphemica-emojisymbol-descr);
}
body:hover .char {
  --stack: var(--system-ascii-stack);
  --descr: var(--system-ascii-descr);
}
body:active .char {
  --stack: var(--browser-emoji-stack);
  --descr: var(--browser-emoji-descr);
}
body .char:hover {
  --stack: var(--system-emoji-stack);
  --descr: var(--system-emoji-descr);
}
body:active .char:hover:active {
  --stack: var(--system-symbol-stack);
  --descr: var(--system-symbol-descr);
}


body h1.char {
 position: relative;
}
body h1.char::before {
  display: block;
  position: absolute;
  font-size: 1.5rem;
  font-family: Montserrat;
  content: 'In ' var(--descr);
  top: calc(100% + 3em);
  left: 50%;
  transform: translatex(-50%);
  opacity: .5;
}


}