*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  background-image:
    radial-gradient(ellipse 85% 45% at 50% -12%, #2e1065 0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 100% 100%, #1e1b4b 0%, transparent 50%);
}
button, input, select { font-family: inherit; outline: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.hide { display: none !important; }
#app { height: 100%; display: flex; flex-direction: column; position: relative; }
#bg-particles {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  overflow: hidden;
}
#main {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding-bottom: calc(var(--nav-h) + 14px);
  -webkit-overflow-scrolling: touch;
  position: relative; z-index: 1;
}