body{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#f0f0f0;overflow:hidden}select{padding:5px;font-size:14px;border:1px solid #5c5c5c;border-radius:5px}.legend{position:fixed;top:20px;left:20px;background-color:#fffc;padding:15px;border-radius:10px;z-index:10}.legend h3{margin-top:0}.legend ul{padding-left:20px;margin-bottom:0}.scene{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;perspective:1000px;cursor:move}.container{width:200px;height:200px;position:relative;transform-style:preserve-3d}.box{position:absolute;width:100%;height:100%;background-color:gray;border:2px solid #333;display:flex;justify-content:center;align-items:center;font-size:24px;transition:transform .5s,opacity .5s;backface-visibility:visible}.box:hover{opacity:1!important}canvas{width:100%;height:100%}*{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}#picker{display:none}