html, body, .sky-root {
  background-color: var(--color-bg, #8ec8f4);
}

html[data-sky="dark"],
html[data-sky="dark"] body,
html[data-sky="dark"] .sky-root {
  background-color: var(--sky-zenith, #08122a) !important;
}

#app-ink {
  background-color: transparent !important;
}

#lfqp-aurora,
.lfqp-aurora-css {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  bottom: auto !important;
  z-index: 1 !important;
  display: block !important;
  pointer-events: none !important;
  width: 100% !important;
  height: 66% !important;
  overflow: hidden !important;
  contain: none !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 38%, transparent 82%) !important;
  mask-image: linear-gradient(to bottom, #000 38%, transparent 82%) !important;
  animation: aurora-rest 20s ease-in-out infinite !important;
}

.lfqp-aurora-ribbon {
  position: absolute;
  inset: -30% -20% 0 -20%;
  pointer-events: none;
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.lfqp-aurora-ribbon-a {
  background: linear-gradient(108deg, rgba(127, 255, 0, 0.62) 0%, rgba(127, 255, 0, 0.18) 36%, transparent 68%);
  background: linear-gradient(
    108deg,
    color-mix(in srgb, var(--aurora-a, #7fff00) 78%, transparent) 0%,
    color-mix(in srgb, var(--aurora-a, #7fff00) 42%, transparent) 36%,
    transparent 68%
  );
  animation: aurora-drift-a 22s ease-in-out infinite;
}

.lfqp-aurora-ribbon-b {
  background: linear-gradient(252deg, rgba(174, 230, 12, 0.55) 0%, rgba(174, 230, 12, 0.16) 40%, transparent 70%);
  background: linear-gradient(
    252deg,
    color-mix(in srgb, var(--aurora-b, #aee60c) 72%, transparent) 0%,
    color-mix(in srgb, var(--aurora-b, #aee60c) 38%, transparent) 40%,
    transparent 70%
  );
  animation: aurora-drift-b 28s ease-in-out infinite;
}

@keyframes aurora-drift-a {
  0%, 100% { transform: translate3d(-6%, 4%, 0) skewX(-12deg); }
  50% { transform: translate3d(10%, -5%, 0) skewX(10deg); }
}

@keyframes aurora-drift-b {
  0%, 100% { transform: translate3d(8%, -3%, 0) skewX(10deg); }
  50% { transform: translate3d(-12%, 5%, 0) skewX(-8deg); }
}

.sky-aurora,
.sky-aurora-layer {
  display: none !important;
}

@keyframes aurora-rest {
  0%, 34% { opacity: 1; }
  46%, 70% { opacity: 0; }
  84%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #lfqp-aurora,
  .lfqp-aurora-ribbon-a,
  .lfqp-aurora-ribbon-b {
    animation: none !important;
  }
}

.sky-root {
  pointer-events: none !important;
}

#app-ink > .relative,
#app-ink > .relative button,
#app-ink > .relative a,
#app-ink > .relative input,
#app-ink > .relative textarea,
#app-ink > .relative select,
#app-ink > .relative label,
#app-ink > .relative .panel,
#app-ink > .relative .lfqp-menubar,
#app-ink > .relative .lfqp-menubar-btn {
  pointer-events: auto !important;
}

#app-ink > .relative {
  position: relative;
  z-index: 30 !important;
}

.lfqp-swipe-wash,
#lfqp-aurora,
#lfqp-aurora * {
  pointer-events: none !important;
}

#lfqp-aurora,
#lfqp-aurora *,
.lfqp-aurora-css,
.lfqp-aurora-css * {
  pointer-events: none !important;
}

#lfqp-login {
  isolation: isolate;
}