*{margin:0;padding:0;box-sizing:border-box}@font-face{font-family:aften_screen;src:url(./aften_screen.woff?#iefix)}html,body{background-color:#141518;font-family:aften_screen,Arial,sans-serif;overflow:hidden;width:100%;height:100%;cursor:grab;-webkit-user-select:none;user-select:none;position:relative}#app{width:100%;height:100%;position:relative;min-height:400px}#canvas{width:100%!important;height:100%!important;display:block}body:active{cursor:grabbing}a{text-decoration:none;align-items:center;color:#fff;pointer-events:auto;font-size:1.1rem}nav{position:absolute;top:0;left:0;display:flex;justify-content:space-between;width:100%;padding:4.5vh;z-index:10}nav div{display:flex;align-items:center;gap:.5rem}.bottom{position:absolute;bottom:4.5vh;left:4.5vh;z-index:10}.bottom svg{width:auto;height:40px;opacity:.8;transition:opacity .3s ease}.top{position:absolute;top:4.5vh;left:4.5vh;z-index:10}.top svg{width:auto;height:40px;opacity:.8;transition:opacity .3s ease}.topright{position:absolute;top:4.5vh;right:4.5vh;z-index:10}.bottom svg:hover,.top svg:hover{opacity:1}.progress-bar{background:#fff3;bottom:4.5vh;height:1px;overflow:hidden;position:absolute;right:4.5vh;width:14vw;z-index:10}.progress-bar .progress{background:#fff;height:1px;left:0;position:absolute;top:0;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:left center;transform-origin:left center;width:100%}.circle{position:absolute;bottom:7%;left:50%;transform:translate(-50%);z-index:10}.circle .inner{position:absolute;left:0;top:0}.ring{animation:rotate 10s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#loader{width:20%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100}#loader p{color:#fff;font-size:large;position:absolute;top:50%;left:50%;transform:translate(-50%)}.fade{opacity:0;animation:fadeIn 3s 2s forwards}@keyframes fadeIn{to{opacity:1}}.nav-hint{position:absolute;bottom:15vh;left:50%;transform:translate(-50%);color:#fff9;font-size:.8rem;text-align:center;pointer-events:none;animation:fadeIn 2s 3s forwards;opacity:0;z-index:10}.nav-hint span{display:block;margin:.2rem 0}.connect-button{position:absolute;bottom:4.5vh;right:4.5vh;z-index:10}.btn-connect{display:inline-block;padding:12px 24px;background:#0e0e0e66;border:2px solid rgba(255,255,255,.3);border-radius:25px;color:#fff;font-size:1rem;font-family:aften_screen,Arial,sans-serif;text-decoration:none;transition:all .3s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.btn-connect:hover{background:#ffffff1a;border-color:#fff9;transform:translateY(-2px)}.btn-connect:active{transform:translateY(0)}@media (max-width: 768px){nav{padding:2vh}.bottom,.top,.topright{padding:2vh}.bottom{bottom:2vh;left:2vh}.top{top:2vh;left:2vh}.topright{top:2vh;right:2vh}.progress-bar{bottom:2vh;right:2vh;width:20vw}.connect-button{bottom:2vh;right:2vh}.btn-connect{padding:10px 20px;font-size:.9rem}.nav-hint{bottom:10vh;font-size:.7rem}#canvas,.background-container{min-height:100vh;min-height:-webkit-fill-available}}@media (max-width: 480px){.bottom svg,.top svg{height:30px}.progress-bar{width:25vw}a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}}@media (min-width: 769px) and (max-width: 1024px){#canvas{width:100vw;height:100vh}}