html,
body {
  margin: 0;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    system-ui,
    sans-serif;
}
/* macOS desktop: semi-transparent for vibrancy blur effect */
html[data-desktop-mac].light {
  background: rgba(255, 255, 255, 0.6);
  color: #202020;
}
html[data-desktop-mac].dark {
  background: rgba(17, 17, 19, 0.4);
  color: #eee;
}
/* Non-macOS desktop: opaque backgrounds (no vibrancy) */
html[data-desktop]:not([data-desktop-mac]).light {
  background: #fff;
  color: #202020;
}
html[data-desktop]:not([data-desktop-mac]).dark {
  background: #111113;
  color: #eee;
}
#root:not(:has(*)) {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh;
}
/* Make window draggable during loading (before React renders) in desktop app */
html[data-desktop] #root:not(:has(*)) {
  -webkit-app-region: drag;
}