*{padding:0;margin:0;box-sizing:border-box;user-select:none;-webkit-user-select:none}body,html{width:100%;min-height:100%;-webkit-tap-highlight-color:transparent}body{-moz-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-size-adjust:none;overscroll-behavior:none}a{text-decoration:none;color:inherit;pointer-events:all}button{-moz-appearance:none;appearance:none;-webkit-appearance:none;border:none;background:none;padding:0;color:inherit;cursor:pointer;pointer-events:all}button:focus{outline:none}img{user-drag:none;-webkit-user-drag:none}#canvas-wrapper,#canvas-wrapper canvas{pointer-events:auto;position:fixed;top:0;left:0;width:100%;height:100%;touch-action:none}#canvas-wrapper{z-index:0}html{pointer-events:none;color:#fff;font-size:.3125vw}@media (min-width: 768px){html{font-size:.1302083333vw}}@media (min-width: 1025px){html{font-size:.09765625vw}}@media (min-width: 1441px){html{font-size:.0694444444vw}}@media (min-width: 1600px){html{font-size:.0625vw}}#root{font-size:11px}body{pointer-events:none}#app{width:100%;height:100%;pointer-events:none}.hotspot{width:100px;height:100px;left:-50px;top:-50px;display:flex;align-items:center;justify-content:center;pointer-events:auto;cursor:pointer;z-index:10;transition:opacity .5s linear;position:absolute}.hotspot .inner{height:50px;display:flex;align-items:center;color:#202e39;min-width:calc(var(--text-width) + 55px);position:relative;overflow:hidden;border-radius:6px}.hotspot .inner:before{content:"";position:absolute;left:0;top:0;bottom:0;width:100%;background-color:#18ecfc;transform:scale3d(.2,1,1);transform-origin:left;transition:transform .4s cubic-bezier(.645,.045,.355,1);border:1px solid #00C2DE;border-left:none;border-right:none}.hotspot .inner:after{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;border:1px solid #00C2DE;border-radius:6px 0 0 6px;border-right:none}.hotspot .inner .left{position:relative;border-right:none;border-radius:6px 0 0 6px;height:100%;min-width:10px;margin-right:-1px}.hotspot .inner .right{background-color:#18ecfc;border:1px solid #00C2DE;border-left:none;border-radius:0 6px 6px 0;height:100%;width:44px;display:flex;align-items:center;justify-content:center;position:absolute;left:6px;transition:transform .4s cubic-bezier(.645,.045,.355,1)}.hotspot .inner .text{font-family:arial;font-size:12px;height:100%;display:flex;align-items:center;white-space:nowrap;padding:0 20px;font-weight:700;letter-spacing:-.05em;opacity:0;transition:opacity .4s cubic-bezier(.645,.045,.355,1)}.hotspot .inner .icon{position:relative;width:20px;height:20px;display:flex;align-items:center;transition:border-color .2s linear;border-radius:50%;border:1px solid transparent}.hotspot .inner .icon span{position:absolute;width:12px;height:1.5px;background-color:#202e39;top:8.5px;right:9px;transform-origin:center;transition:transform .4s cubic-bezier(.645,.045,.355,1)}.hotspot .inner .icon span:nth-child(1){transform:translate(3px) rotate(0)}.hotspot .inner .icon span:nth-child(2){transform:translate(3px) rotate(90deg)}.hotspot:hover .inner:before{transform:scaleZ(1)}.hotspot:hover .inner .left .text{opacity:1}.hotspot:hover .inner .right{transform:translate3d(calc(var(--text-width) + 5px),0,0)}.hotspot:hover .inner .right .icon{border:1px solid #202E39;transition:border-color .2s linear .2s}.hotspot:hover .inner .right .icon span:nth-child(1){transform:translate(7px) rotate(45deg) translate(-1.5px) scale3d(.3,.6,1)}.hotspot:hover .inner .right .icon span:nth-child(2){transform:translate(7px) rotate(-45deg) translate(-1.5px) scale3d(.3,.6,1)}.hotspot.disabled{pointer-events:none;opacity:0}