#window                 { max-height: 84vh; left: 0; bottom: 0; transform: none; border-radius: 22px 22px 0 0; overflow: visible; top: auto; }
#window                 { box-shadow: 0 -16px 50px rgba(50, 30, 55, 0.22); width: 100vw; max-width: 100%; margin: 0; }
#window                 { cursor: grab; user-select: none; touch-action: none; -webkit-user-drag: none;  }
#window:after           { content: ''; height: 20px; background: #fff; left: 0; width: 100%; position: absolute; bottom: -20px; }
#window .inside         { border-radius: 22px 22px 0 0; max-height: 84vh; padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px)); }
#window .fa-close       { top: 20px; z-index: 100; }
/*#window .inside:before  { content: ''; display: block; width: 42px; height: 4px; border-radius: 999px; background: rgba(135, 92, 145, 0.22); margin: 0 auto 18px; }*/
#window .submit         { max-width: 100%; }
#window .button         { max-width: 100%; }
#window .mod_register .row { margin-bottom: 8px; }
#window .mod_login .row     { margin-bottom: 8px; }
#window .handle         { position: absolute; top: 10px; left: 50%; width: 50px; height: 5px; border-radius: 3px; background: #eee; transform: translateX(-50%); }
#window .grabber        { position: absolute; top: 0; left: 0; right: 0; height: 70px; z-index: 50; }

#wrapper { z-index: 1; }
.hero { overflow: visible; }

@keyframes winIn {
  0% {
    transform: translate3d(0, 110%, 0);
  }
  78% {
    transform: translate3d(0, -1.6%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
    #header .nav { transition: none; }
}