body{overflow:hidden;margin:0;height:100vh;width:100vw;font-family:sans-serif;background:black;text-shadow:0 0 3px black}a,body{color:#fff}#info{z-index:100;position:absolute;top:10px;left:10px}h3{margin:5px 0}p{margin:5px 0;font-size:small}.cube-wrapper{transform-style:preserve-3d}.cube{transform-style:preserve-3d;transform:rotateX(45deg) rotate(45deg);animation:rotation 2s infinite}.cube-faces{transform-style:preserve-3d;height:80px;width:80px;position:relative;transform-origin:0 0;transform:translate(0) translateY(0) translateZ(-40px)}.cube-face{position:absolute;top:0;right:0;bottom:0;left:0;background:#0017ff;border:solid 1px #ffffff}.cube-face.top{transform:translateZ(80px)}.cube-face.front{transform-origin:0 50%;transform:rotateY(-90deg)}.cube-face.back{transform-origin:0 50%;transform:rotateY(-90deg) translateZ(-80px)}.cube-face.right{transform-origin:50% 0;transform:rotateX(-90deg) translateY(-80px)}.cube-face.left{transform-origin:50% 0;transform:rotateX(-90deg) translateY(-80px) translateZ(80px)}@keyframes rotation{0%{transform:rotateX(45deg) rotateY(0) rotate(45deg);animation-timing-function:cubic-bezier(.17,.84,.44,1)}50%{transform:rotateX(45deg) rotateY(0) rotate(225deg);animation-timing-function:cubic-bezier(.76,.05,.86,.06)}to{transform:rotateX(45deg) rotateY(0) rotate(405deg);animation-timing-function:cubic-bezier(.17,.84,.44,1)}}.scene,#message{position:absolute;display:flex;top:0;right:0;left:0;bottom:0;z-index:2;height:100%;width:100%;align-items:center;justify-content:center}#message{font-weight:700;font-size:large;color:red;pointer-events:none}details{font-size:small}#progress{position:absolute;top:0;height:5px;background:blue;z-index:99;transition:width .1s ease-in-out}#quality{position:absolute;bottom:10px;z-index:999;right:10px}#canvas{display:block;position:absolute;top:0;left:0;width:100%;height:100%;touch-action:none}#instructions{background:rgba(0,0,0,.6);white-space:pre-wrap;padding:10px;border-radius:10px;font-size:x-small}body.nohf .nohf{display:none}