*{position:relative}html,body{z-index:-1;height:100%;width:100%;margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#eceff4}#app{z-index:1;height:100%;width:100%;max-width:800px;font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;background:#eceff4}#console{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:360px;max-width:calc(100% - 24px);height:24px;padding:6px;border-radius:6px;color:#eceff4;background:#2e3440;transition:top 1s cubic-bezier(0,0,.1,1),padding .6s cubic-bezier(0,0,.1,1),background-color .8s cubic-bezier(0,0,.1,1),color .8s cubic-bezier(0,0,.1,1)}#console>span{font-size:1rem;transform:rotate(0);transition:all .3s cubic-bezier(0,0,.4,1)}#main{margin:20px 0}.code{display:none;padding:1px 16px;width:80%;margin:40px auto;border-radius:6px;background:#2e3440;box-shadow:#2e344000 0 0 0 300vmax;text-align:left;opacity:0;transform:translateY(60px);transition:transform .4s ease-out,opacity .6s cubic-bezier(0,0,.4,1),box-shadow .3s cubic-bezier(0,0,.4,1)}.code:hover,.code:active{z-index:9999;box-shadow:#2e344099 0 0 0 300vmax}pre.shiki{overflow:hidden;white-space:break-spaces}#copyright{display:none;opacity:0;transition:opacity .6s cubic-bezier(0,0,.4,1)}::-webkit-scrollbar{width:0px}#background{z-index:0;position:fixed;top:0;left:0;width:100%;height:100%;background:#eceff4}#background:before,#background:after{content:"";position:absolute;width:0vmin;height:0vmin;opacity:1;animation:rotate 16s linear infinite,colors 32s steps(8) infinite;transition:all .5s,opacity 5s 5s}#background:before{bottom:18vmin;right:18vmin;background:#ad8fff44;box-shadow:#ad8fff44 30vmin 30vmin 0 -2vmin,#ad8fff44 -30vmin 30vmin 0 -2vmin,#ad8fff44 30vmin -30vmin 0 -2vmin,#ad8fff44 -30vmin -30vmin 0 -2vmin}#background:after{top:18vmin;left:18vmin;background:#6effc744;box-shadow:#6effc744 30vmin 30vmin 0 -2vmin,#6effc744 -30vmin 30vmin 0 -2vmin,#6effc744 30vmin -30vmin 0 -2vmin,#6effc744 -30vmin -30vmin 0 -2vmin}#background.active1:before,#background.active2:after{width:10vmin;height:10vmin}#background:active:before,#background:active:after{width:14vmin;height:14vmin;animation-duration:.3s;border-radius:50%;opacity:0}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes colors{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}