.video-editor{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:93vh;width:100%;color:#fff;font-family:Arial,sans-serif;overflow:auto;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.canvas-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:all;overflow:visible}.visualEditing-header-proportion{position:fixed;top:4px;z-index:999}.visualEditing-header-proportion .el-input__inner{width:77px;background-color:transparent;color:rgba(224,245,255,.85);border:none}.visualEditing-header-proportion .el-icon-arrow-up:before{color:rgba(224,245,255,.85)}.canvas-container{position:relative;margin:0 auto;background-color:#1d212b;background-image:linear-gradient(45deg,#292d37 25%,transparent 0),linear-gradient(-45deg,#292d37 25%,transparent 0),linear-gradient(45deg,transparent 75%,#292d37 0),linear-gradient(-45deg,transparent 75%,#292d37 0);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;border:1px solid #3a434b;border-radius:4px}.canvas-container canvas{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);max-width:100%;max-height:100%}.editing-overlay{position:absolute;top:-1000px;left:-1000px;right:-1000px;bottom:-1000px;pointer-events:none}.preview-canvas{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.preview-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:12px 0 5px}.preview-area canvas{max-width:100%;height:auto;border-radius:4px;-webkit-box-shadow:0 4px 6px rgba(0,0,0,.1);box-shadow:0 4px 6px rgba(0,0,0,.1)}.preview-area .preview-controls{margin-top:7px;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;gap:15px}.preview-area .preview-controls .el-button-group .el-button{margin:0;background-color:#0f1115;border:none;color:#92a0a9;font-size:23px}.preview-area .preview-controls .el-button-group .el-button:hover{background-color:#272c36;color:#fff}.timeline-area{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-radius:12px;overflow:hidden}.timeline-area,.timeline-header{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.timeline-header{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:10px;background-color:#1d2129;border-bottom:3px solid #0f1115;border-radius:12px 12px 0 0}.timeline-header .timeline-controls{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:1}.timeline-header .timeline-controls .time-display{white-space:nowrap}.zoom-controls{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px;width:200px}.zoom-controls>div{-webkit-box-flex:1;-ms-flex:1;flex:1}.zoom-controls i{color:#92a0a9;font-size:16px;cursor:pointer}.zoom-controls .zoom-slider{margin:0}.zoom-controls .zoom-slider .el-slider__runway{background-color:hsla(0,0%,100%,.1)}.zoom-controls .zoom-slider .el-slider__bar{background-color:#2de5fa;-webkit-box-shadow:0 0 4px rgba(64,158,255,.5);box-shadow:0 0 4px rgba(64,158,255,.5)}.zoom-controls .zoom-slider .el-slider__button{width:10px;height:10px;border:1px solid #2de5fa;background-color:#fff;-webkit-box-shadow:0 0 4px rgba(64,158,255,.5);box-shadow:0 0 4px rgba(64,158,255,.5)}.zoom-controls .zoom-slider .el-slider__button-wrapper{top:-7px;width:14px;height:14px}.zoom-controls .zoom-slider :deep(.el-slider__button:hover){-webkit-transform:scale(1.1);transform:scale(1.1)}.timeline-scroll-container{-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;height:100%;position:relative;overflow-x:auto;overflow-y:auto;background-color:#1d2129;scrollbar-width:thin;scrollbar-color:#3a434b #1d2129}.ruler-container{background-color:#252b35;margin-bottom:10px}.time-ruler{height:25px;position:sticky;top:0;left:0;z-index:2;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;min-width:100%;margin-left:39px}.time-ruler .time-mark{position:absolute;bottom:0;width:1px;background-color:hsla(0,0%,100%,.3)}.time-ruler .time-mark.major{background-color:hsla(0,0%,100%,.8)}.time-ruler .time-mark.major span{position:absolute;top:1px;left:16px;-webkit-transform:translateX(-50%);transform:translateX(-50%);font-size:12px;color:#fff}.video-track{position:relative;background-color:#1d2129;height:285px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;min-width:100%}.video-track .track-content{position:relative;height:100%}.has-filter:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:hsla(0,0%,100%,.1);pointer-events:none}.video-clip{position:absolute;top:0;height:273px;background-color:#272c36;border:1px solid #424b58;border-radius:12px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.video-clip.selected{border:2px solid #26c2d3;-webkit-box-shadow:0 0 8px rgba(64,158,255,.4);box-shadow:0 0 8px rgba(64,158,255,.4);z-index:2}.video-clip:hover{border:2px solid rgba(64,158,255,.5);cursor:pointer}.video-clip.is-dragging{opacity:.5;cursor:move}.video-clip.drag-over{border:2px dashed #409eff}.video-clip .filter-badge{pointer-events:auto;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:rgba(0,0,0,.7);color:#fff;padding:2px 6px;border-radius:4px;font-size:12px}.video-clip .filter-badge .el-icon-close{margin-left:4px;cursor:pointer;padding:2px}.video-clip .filter-badge .el-icon-close:hover{color:#ff4949}.video-clip .clip-controls{position:absolute;top:0;left:0;right:0;padding:5px;z-index:2;pointer-events:none}.video-clip .clip-controls .el-dropdown-link{color:#1e2e49;font-size:18px;cursor:pointer}.video-clip .frame-container{height:123px;position:relative;overflow:hidden}.video-clip .frame-container img{height:113px;position:absolute;top:0}.video-clip .clip-info{position:absolute;top:46px;left:0;right:0;color:#fff;padding:0 4px}.video-clip .clip-info .clip-info-content{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.video-clip .clip-info .clip-info-content,.video-clip .clip-info .clip-info-content .clip-info-content-title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.video-clip .clip-info .clip-info-content .clip-info-box{line-height:20px;padding:2px 4px;font-size:10px;border-radius:4px;background-color:rgba(0,0,0,.7);margin-right:4px}.video-clip .clip-info .clip-info-content .clip-info-more .el-icon-more{font-size:13px}.video-clip .clip-info-description{-webkit-box-flex:1;-ms-flex:1;flex:1;margin:10px}.video-clip .clip-info-description .el-textarea{height:100%}.video-clip .clip-info-description .el-textarea .el-textarea__inner{height:100%;background-color:#313641;border:1px solid #424b58;border-radius:10px;color:#fff}.video-clip .clip-handle{position:absolute;top:0;bottom:0;width:10px;cursor:ew-resize}.video-clip .clip-handle.left{left:0}.video-clip .clip-handle.right{right:0}.video-clip .clip-handle.left,.video-clip .clip-handle.right{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;cursor:ew-resize}.video-clip .clip-handle:hover{background-color:rgba(236,253,255,.3)}.video-clip:hover{background-color:#39404b}.playhead{position:absolute;top:0;width:2px;height:calc(100% + 77px);background-color:#26c2d3;z-index:1000;cursor:ew-resize}.playhead:before{content:"";top:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #2de5fa}.playhead .playhead-handle,.playhead:before{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:0;height:0}.playhead .playhead-handle{top:-6px;border-left:11px solid transparent;border-right:11px solid transparent;border-top:11px solid #26c2d3;cursor:pointer}.control-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.control-overlay .transform-controls{position:absolute;border:1px solid rgba(45,229,250,.8);-webkit-box-shadow:0 0 0 1px rgba(45,229,250,.3);box-shadow:0 0 0 1px rgba(45,229,250,.3)}.control-overlay .transform-controls .control-point{position:absolute;width:10px;height:10px;background:#fff;border:1px solid #2de5fa;border-radius:50%;pointer-events:auto;z-index:2}.control-overlay .transform-controls .control-point.top-left{top:-5px;left:-5px;cursor:nw-resize}.control-overlay .transform-controls .control-point.top-right{top:-5px;right:-5px;cursor:ne-resize}.control-overlay .transform-controls .control-point.bottom-right{bottom:-5px;right:-5px;cursor:se-resize}.control-overlay .transform-controls .control-point.bottom-left{bottom:-5px;left:-5px;cursor:sw-resize}.control-overlay .transform-controls .control-point:hover{background:#2de5fa;-webkit-transform:scale(1.2);transform:scale(1.2)}.control-overlay .transform-controls .drag-area{position:absolute;top:0;left:0;width:100%;height:100%;cursor:-webkit-grab;cursor:grab;pointer-events:auto}.control-overlay .transform-controls .rotate-handle{position:absolute;width:16px;height:16px;background:#fff;color:#2de5fa;border:2px solid #2de5fa;border-radius:50%;top:-24px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);cursor:pointer;pointer-events:auto;z-index:2;font-size:16px}.control-overlay .transform-controls .rotate-handle:hover{background:#2de5fa;color:#fff}.control-overlay .transform-controls .rotate-handle:hover:before{background:#fff}.tracks-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%}.track,.tracks-container{display:-webkit-box;display:-ms-flexbox;display:flex}.track{height:80px;background:#1d2129;margin-bottom:10px}.track.selected{background:#2c3340}.track .track-header{width:120px;padding:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.track .track-header .track-name{color:#fff;font-size:12px;width:-webkit-max-content;width:-moz-max-content;width:max-content}.track .track-content{-webkit-box-flex:1;-ms-flex:1;flex:1;position:relative;min-width:100%}.track .track-content.drag-over{background-color:rgba(64,158,255,.1)}.text-clip{position:absolute;background:rgba(0,160,233,.3);opacity:.8;border-radius:4px;color:#fff;line-height:100%;cursor:move;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}.text-clip.is-dragging{opacity:.5}.text-clip .text-clip-content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.text-clip .text-clip-content,.text-clip .text-clip-info{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.text-clip .text-clip-info{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;align-items:center}.text-clip .text-clip-info .text-clip-title{font-weight:700;color:#fff;font-size:13px}.text-clip .text-clip-info .text-clip-duration{color:#fff;font-size:15px}.text-clip .text-clip-text{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-size:12px}.text-clip .clip-handle{position:absolute;width:8px;height:100%;top:0;cursor:col-resize;background:rgba(0,0,0,.1)}.text-clip .clip-handle:hover{background:rgba(64,158,255,.5)}.text-clip .clip-handle.left{left:0}.text-clip .clip-handle.right{right:0}.sticker-clip,.text-clip{position:absolute;background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);border-radius:4px;overflow:hidden;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex}.sticker-clip.selected,.text-clip.selected{border-color:#409eff}.sticker-clip .sticker-preview,.text-clip .sticker-preview{margin-left:8px;width:27px;height:30px;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;background:rgba(0,0,0,.1)}.sticker-clip .sticker-preview img,.text-clip .sticker-preview img{border-radius:4px;max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}.sticker-clip .clip-handle,.text-clip .clip-handle{position:absolute;width:8px;height:100%;top:0;cursor:col-resize;background:hsla(0,0%,100%,.1)}.sticker-clip .clip-handle.left,.text-clip .clip-handle.left{left:0}.sticker-clip .clip-handle.right,.text-clip .clip-handle.right{right:0}.sticker-clip .clip-handle:hover,.text-clip .clip-handle:hover{background:rgba(64,158,255,.5)}.sticker-clip .clip-info,.text-clip .clip-info{-webkit-box-flex:1;-ms-flex:1;flex:1}.sticker-clip .clip-info .clip-info-content,.text-clip .clip-info .clip-info-content{height:100%;width:100%}.sticker-clip .clip-info .clip-info-content .clip-info-content-title,.text-clip .clip-info .clip-info-content .clip-info-content-title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:0 18px 0 10px;height:100%}.sticker-clip .clip-info .clip-info-content .clip-info-content-title .clip-info-box,.text-clip .clip-info .clip-info-content .clip-info-content-title .clip-info-box{font-size:12px}.audio-clip{background:#30333b;border:1px solid hsla(0,0%,100%,.2);border-radius:7px;position:relative;overflow:hidden;height:48px;cursor:pointer;-webkit-transition:all .3s ease;transition:all .3s ease;-webkit-box-sizing:border-box;box-sizing:border-box}.audio-clip .el-slider__button{height:7px;width:7px;border:1px solid #409eff}.audio-clip .el-slider__runway{width:6px;height:85%;margin:2px 16px}.audio-clip.selected{border-color:#2980b9}.audio-clip .waveform-container{position:absolute;top:0;left:0;right:0;bottom:0;padding:5px;opacity:.7;pointer-events:none}.audio-clip .waveform-container .waveform-canvas{width:100%;height:100%}.audio-clip .audio-info{position:absolute;left:20px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:#fff;font-size:12px;text-shadow:1px 1px 1px rgba(0,0,0,.5);z-index:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:2px}.audio-clip .audio-info .audio-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;margin-bottom:3px}.audio-clip .audio-info .audio-duration{opacity:.8}.audio-clip .volume-control{position:absolute;right:8px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:80%;z-index:2;opacity:0;-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.audio-clip .volume-control .el-slider{height:100%}.audio-clip:hover .volume-control{opacity:1}.audio-clip .clip-handle{position:absolute;top:0;width:8px;height:100%;cursor:col-resize;background:hsla(0,0%,100%,.1);-webkit-transition:background .3s ease;transition:background .3s ease}.audio-clip .clip-handle:hover{background:hsla(0,0%,100%,.3)}.audio-clip .clip-handle.left{left:0}.audio-clip .clip-handle.right{right:0}.special-effect-clip{position:relative;background-color:rgba(148,41,41,.5);height:30px;padding:0 10px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;overflow:hidden;cursor:pointer}.special-effect-clip .clip-info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:5px}.special-effect-clip .clip-handle{position:absolute;top:0;width:10px;height:100%;background-color:hsla(0,0%,100%,.7);cursor:ew-resize}.special-effect-clip .clip-handle.left{left:0}.special-effect-clip .clip-handle.right{right:0}