#app{position:fixed;left:0;top:0;right:0;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex}#container{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;position:relative}.hello-world{font-size:4vw;font-weight:700;opacity:.6;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);white-space:pre-wrap}#sidebar{-webkit-box-flex:0;-ms-flex:none;flex:none;overflow-y:auto;background:#000;border-left:1px solid hsla(0,0%,100%,.1);width:300px;-webkit-app-region:drag}#sidebar>.content{padding:20px 15px}#sidebar>.content>*{-webkit-app-region:no-drag}#sidebar>.content>.next{margin-bottom:10px}#sidebar>.content .btn{padding:12px;width:100%;font-size:1.05em;font-weight:700;background:#000;background:rgba(0,132,255,.2);border:2px solid rgba(0,132,255,0);color:#0084ff;cursor:pointer;border-radius:10px}#sidebar>.content .btn:hover{background:#0084ff;color:#fff}#sidebar>.content .card{margin-bottom:10px;padding:10px 15px;background:hsla(0,0%,100%,.1);color:#fff;border-radius:10px}#sidebar>.content .card-title{font-weight:700;font-size:.8em;margin-top:15px;margin-bottom:5px;opacity:.3}#sidebar>.content .card-title:first-child{margin-top:0}#sidebar>.content .tab-card{display:-webkit-box;display:-ms-flexbox;display:flex}#sidebar>.content .tab-card .tab{-webkit-box-flex:1;-ms-flex:1;flex:1;background:hsla(0,0%,100%,.08);border:2px solid rgba(0,132,255,0);border-radius:8px;margin-right:8px;font-weight:700;text-align:center;padding:6px 0;cursor:pointer}#sidebar>.content .tab-card .tab:last-child{margin-right:0}#sidebar>.content .tab-card .tab.selected{background:rgba(0,132,255,.2);border:2px solid #0084ff}#sidebar>.content .tab-card .tab:hover{background:rgba(0,132,255,.2)}#sidebar>.content .card .color{display:-webkit-box;display:-ms-flexbox;display:flex}#sidebar>.content .card .color .color-data{-webkit-box-flex:1;-ms-flex:1;flex:1}#sidebar>.content .card .color .color-ball{display:inline-block;width:15px;height:15px;border-radius:30px;border:2px solid #fff;-ms-flex-item-align:center;align-self:center}#sidebar>.content .card .color .color-text{font-size:.9em;margin:4px 0}#sidebar>.content .pos-card{display:-webkit-box;display:-ms-flexbox;display:flex;font-weight:700}#sidebar>.content .pos-card>div{-webkit-box-flex:1;-ms-flex:1;flex:1}#sidebar>.content .markup-list{margin-top:20px}#sidebar>.content .markup-card{cursor:pointer;border:2px solid hsla(0,0%,100%,0)}#sidebar>.content .markup-card.selected{border:2px solid rgba(0,132,255,.8);background:rgba(0,132,255,.2)}#sidebar>.content .markup-card:hover{background:rgba(0,132,255,.2)}#sidebar>.content .markup-card.selected .card-title.hl{color:#0084ff;opacity:1}#toolbar{position:absolute;left:20px;top:20px;padding:4px;background:#000;border:1px solid hsla(0,0%,100%,.2);border-radius:14px}.electron #toolbar{top:40px}#toolbar .tool{width:80px;height:40px;text-align:center;font-weight:700;color:#fff;border:2px solid hsla(0,0%,100%,0);border-radius:10px;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:2px}#toolbar .tool:last-child{margin-bottom:0}#toolbar .tool.selected{border:2px solid #0084ff}#toolbar .tool.selected,#toolbar .tool:hover{background:rgba(0,132,255,.2)}#toolbar .tool .svg{width:24px;height:24px;margin-right:5px}#toolbar .tool span{opacity:.3}.screen{width:5400px;-ms-interpolation-mode:nearest-neighbor;image-rendering:-webkit-optimize-contrast;image-rendering:-moz-crisp-edges;image-rendering:-o-pixelated;image-rendering:pixelated;position:absolute}.screen #dsImg{width:100%}.screen #dvImg{width:100%;position:absolute;left:0;top:0;pointer-events:none}#drag-layer{position:fixed;left:0;top:0;right:0;bottom:0;background:rgb(255 255 255/90%);-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}#drag-layer,#drag-layer .drag-area{display:-webkit-box;display:-ms-flexbox;display:flex}#drag-layer .drag-area{-webkit-box-flex:1;-ms-flex:1;flex:1;background:rgba(0,0,0,.1);color:hsla(0,0%,100%,.6);text-align:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}#drag-layer .drag-area.active{color:#fff}#drag-layer .drag-area *{pointer-events:none}#drag-layer .drag-area .drag-label{font-weight:700;font-size:8vh;-webkit-box-flex:1;-ms-flex:1;flex:1;margin:20px 20px;background:rgba(0,0,0,.15);border-radius:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}#drag-layer .drag-area:first-child .drag-label{margin:30px 20px 0}#drag-layer .drag-area.active .drag-label{background:rgba(0,0,0,.6)}.markup{position:absolute}.markup .guide{background-color:rgba(255,38,0,.2);width:10000000px;height:10000000px;pointer-events:none}.markup .guide,.markup .line{position:absolute;left:0;top:0;cursor:move}.markup .line{background-color:rgba(255,38,0,.8);width:12px;height:12px}.markup.line-row .guide,.markup.line-row .line{-webkit-transform:translateY(-50%);transform:translateY(-50%)}.markup.line-col .guide,.markup.line-col .line{-webkit-transform:translate(-50%);transform:translate(-50%)}.markup.line-col .bar,.markup.line-row .bar{background:#004c93;border:2px solid #fff;-webkit-box-shadow:0 2px 10px rgba(0,0,0,.3);box-shadow:0 2px 10px rgba(0,0,0,.3);border-radius:100px;width:12px;height:12px;position:absolute;cursor:-webkit-grab;cursor:grab}.markup.line-col .bar.focused,.markup.line-col .bar:hover,.markup.line-row .bar.focused,.markup.line-row .bar:hover{background:#0084ff}.markup.line-col .bar.top{top:0;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%);margin-top:-5px}.markup.line-col .bar.bottom{bottom:0;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%);margin-bottom:-5px}.markup.line-row .bar.left{left:0;-webkit-transform:translate(-100%,-50%);transform:translate(-100%,-50%);margin-left:-5px}.markup.line-row .bar.right{right:0;-webkit-transform:translate(100%,-50%);transform:translate(100%,-50%);margin-right:-5px}.markup.point .bar{background:rgba(255,38,0,.8);border:2px solid #fff;-webkit-box-shadow:0 2px 10px rgba(0,0,0,.3);box-shadow:0 2px 10px rgba(0,0,0,.3);border-radius:100px;width:12px;height:12px;position:absolute;cursor:-webkit-grab;cursor:grab;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.markup .tip{color:#fff;background:#0084ff;-webkit-box-shadow:0 2px 10px rgba(0,0,0,.2);box-shadow:0 2px 10px rgba(0,0,0,.2);font-weight:700;padding:4px 10px 4px;border-radius:40px;font-size:.8em;pointer-events:none}.markup.line-row .tip{position:absolute;left:50%;top:20px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.markup.line-col .tip,.markup.point .tip{position:absolute;left:20px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.guide-lines{pointer-events:none;opacity:.3}.guide-line{left:0;top:0;width:1px;height:1px;background:#ff2600;position:absolute}.fade-enter-active,.fade-leave-active{-webkit-transition:all .2s;transition:all .2s}.fade-enter,.fade-leave-to{opacity:0}