body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu,
    Cantarell, Oxygen, "Helvetica Neue", Arial, sans-serif;
  /* - November 2025 -
  👉 -apple-system targets San Francisco in Safari (on Mac OS X and iOS), and it targets Neue Helvetica and Lucida Grande on older versions of Mac OS X. It properly selects between San Francisco Text and San Francisco Display depending on the text’s size.
  👉 BlinkMacSystemFont is the equivalent to -apple-system for Chrome on Mac OS X.
  👉 Segoe UI targets Windows and Windows Phone.
  👉 Roboto targets Android and newer Chrome OS. It is deliberately listed after Segoe UI so that if you’re an Android developer on Windows and have Roboto installed, Segoe UI will be used instead.
  👉 Ubuntu targets all versions of Ubuntu
  👉 Cantarell targets GNOME
  👉 Oxygen targets KDE

  source:
  - https://github.com/necolas/normalize.css/issues/665#issue-218860829 (warning: system-ui)
  - https://stackoverflow.com/a/47880631 (warning: system-ui)
  - https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-family#system-ui
  - https://stackoverflow.com/a/64636194
  */
}