.input-group{position:relative;display:flex;background:#1c1f2a;border-radius:2px;transition:background .2s}.input-group>*{flex:1 1}.input-group .copiable-input{border-radius:0}.input-group .copiable-input:not(:last-child)>input{padding-right:0}.input-group-quiet,.input-group-quiet .copiable-input{background:transparent}.copiable-input,.input-group-quiet:hover{background:#1c1f2a}.copiable-input{display:flex;align-items:center;border-radius:2px;transition:background .2s}.copiable-input-quiet{background:transparent}.copiable-input-quiet:hover{background:#1c1f2a}.copiable-input .copiable-label{margin-left:6px;line-height:14px;color:hsla(0,0%,100%,.36)}.copiable-input .copiable-label svg{display:block}.copiable-input>input{padding:6px}.copiable-input>input,.copiable-input>textarea{outline:none;color:hsla(0,0%,100%,.85);font-size:13px;line-height:14px;transition:all .2s;background:#191c28;display:block;flex:1 1;width:100%;border:none;background:transparent;cursor:pointer}.copiable-input>textarea{height:50px;padding:8px 12px;line-height:1.5;resize:none}.collapse-button{outline:none;position:absolute;top:18px;width:16px;height:32px;padding:0;color:hsla(0,0%,100%,.65);background-color:#363945;border:none;vertical-align:middle;transition:all .2s;cursor:pointer;z-index:1000}.collapse-button-left{right:-16px;border-radius:0 6px 6px 0}.collapse-button-right{left:-16px;border-radius:6px 0 0 6px}.collapse-button:hover{color:#fff;background:#222531}.app-entry{display:flex;flex:1 1;align-items:center;justify-content:center;background:#0a0a17}.app-entry .entry-producthunt{position:fixed;bottom:36px;right:36px;width:180px;height:39px}.app-entry .entry-producthunt img{width:100%}.app-entry .entry-container{padding:60px 0}.app-entry .entry-container .entry-logo{text-align:center}.app-entry .entry-container .entry-logo img{width:120px}.app-entry .entry-container .entry-main{padding:30px 0;text-align:center}.app-entry .entry-container .entry-main p{width:360px;text-align:left}.app-entry .entry-container .entry-main p a{color:#0035ff}.app-entry .entry-container .entry-main .main-buttons{display:flex;align-items:center;justify-content:center;padding:6px}.app-entry .entry-container .entry-main .main-buttons .btn{display:flex;align-items:center;justify-content:center;margin:6px;padding:5px 16px}.app-entry .entry-container .entry-main .main-buttons .btn svg{margin-right:4px}.app-entry .entry-container .entry-coffee{position:relative;width:360px;padding:60px 15px 0;text-align:center}.app-entry .entry-container .entry-coffee .coffee-close{position:absolute;top:12px;right:12px;padding:6px;border-radius:2px;color:hsla(0,0%,100%,.65);transition:color .2s;cursor:pointer}.app-entry .entry-container .entry-coffee .coffee-close:hover{color:hsla(0,0%,100%,.85)}.app-entry .entry-container .entry-coffee img{width:240px;border-radius:12px}.app-entry .entry-container .entry-coffee .coffee-or{margin:10px 0;color:hsla(0,0%,100%,.36)}.app-entry .entry-container .entry-coffee a{display:flex;align-items:center;justify-content:center}.app-entry .entry-container .entry-footer{display:flex;align-items:center;justify-content:flex-end;text-align:right;padding:10px 0}.app-entry .entry-container .entry-footer .footer-stretch{flex:1 1}.app-entry .entry-container .entry-footer .footer-language{position:relative;display:flex;align-items:center;padding:3px 5px}.app-entry .entry-container .entry-footer .footer-language>select{position:absolute;top:0;left:0;opacity:0;height:20px;cursor:pointer}.app-entry .entry-container .entry-footer .footer-language>svg{display:block;margin-right:6px}.app-entry .entry-container .entry-footer .footer-item{padding:5px}.app-entry .entry-container .entry-footer .footer-item>svg{display:block}.app-entry .entry-container .entry-social{padding-top:100px}.app-entry .entry-container .entry-social h5{margin:0 0 6px;color:hsla(0,0%,100%,.16)}.app-entry .entry-container .entry-social .social-item{margin-bottom:6px;cursor:pointer}.app-entry .entry-container .entry-social .social-item>a,.app-entry .entry-container .entry-social .social-item>span{color:hsla(0,0%,100%,.36)}.app-entry .entry-container .entry-social .social-item>a:hover,.app-entry .entry-container .entry-social .social-item>span:hover{opacity:.85}.app-entry .entry-container .entry-social .social-item svg{vertical-align:middle}.frame-selector{position:relative;outline:none}.frame-selector-result{position:absolute;top:0;left:0;width:100%;height:26px;padding:4px 11px;color:hsla(0,0%,100%,.85);background:#191c28;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;z-index:0}.frame-selector .input{position:relative;background:transparent;z-index:1}.frame-selector .input-has-value,.frame-selector .input:focus{background-color:rgba(25,28,40,.8)}.main-left{position:relative;width:240px;transition:width .2s}.main-left.collapsed{width:0}.main-left.collapsed .collapse-button{display:block}.main-left .collapse-button{display:none}.main-left:hover .collapse-button{display:block}.main-left .left-sider{position:absolute;right:0;top:0;width:240px;height:100%;flex-shrink:0;background:#222531}.main-left .left-sider .left-sider-tabs{display:flex;justify-content:space-around;padding:0 12px;border-bottom:1px solid #383941}.main-left .left-sider .left-sider-tabs li{padding:8px 0;font-size:12px;opacity:.65;border-bottom:2px solid transparent;cursor:pointer}.main-left .left-sider .left-sider-tabs li.selected,.main-left .left-sider .left-sider-tabs li:hover{opacity:1;border-color:#fff}.main-left .left-sider .left-sider-list{height:calc(100% - 34px)}.main-left .left-sider .left-sider-list.without-tab{height:100%}.main-left .left-sider .left-sider-list .list-filter{position:relative;padding:12px}.main-left .left-sider .left-sider-list .list-filter>.filter-clear{position:absolute;right:16px;top:18px;color:hsla(0,0%,100%,.36);transition:color .2s;cursor:pointer}.main-left .left-sider .left-sider-list .list-filter>.filter-clear:hover{color:hsla(0,0%,100%,.65)}.main-left .left-sider .left-sider-list .list-items{height:calc(100% - 50px);overflow:auto}.main-left .left-sider .left-sider-list .list-items li{display:flex;align-items:center;padding:12px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}.main-left .left-sider .left-sider-list .list-items li:hover{background:#141723}.main-left .left-sider .left-sider-list .list-items li.list-item-hidden{display:none}.main-left .left-sider .left-sider-list .list-items li.selected{background:#303446}.main-left .left-sider .left-sider-list .list-items li .item-thumbnail{width:46px;height:46px;margin-right:6px;background-position:50%;background-size:contain;background-repeat:no-repeat;background-color:#111421}.main-left .left-sider .left-sider-list .list-items.list-frames li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.main-left .left-sider .left-sider-list .list-items.list-frames li .item-thumbnail{flex:0 0 46px}.main-left .left-sider .left-sider-list .list-items.list-components li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.main-left .left-sider .left-sider-list .list-items.list-components li .item-thumbnail{flex:0 0 46px;border:1px solid #8d77fc}.fill-item{position:relative}.fill-item-expanded .fill-summary .summary-chevron{transform:rotate(0)!important}.fill-item-expanded .fill-collapse{height:auto!important;margin-bottom:6px!important}.fill-item .fill-collapse{height:0;margin-bottom:0;overflow:hidden}.fill-item .fill-summary{display:flex;align-items:center;margin-bottom:6px;border-radius:2px;transition:background .2s;cursor:pointer}.fill-item .fill-summary:hover{background:#1b1e2a}.fill-item .fill-summary .summary-chevron{flex-shrink:0;padding:2px;transform:rotate(-90deg);transition:transform .2s}.fill-item .fill-summary .summary-bg,.fill-item .fill-summary .summary-preview{width:18px;height:18px;border-radius:2px;border:1px solid #3d3e44}.fill-item .fill-summary .summary-preview{flex-shrink:0;margin:0 4px;z-index:2}.fill-item .fill-summary .summary-bg{position:absolute;top:4px;left:22px;background-color:#fff;z-index:1}.fill-item .fill-summary .summary-type{flex:1 1}.fill-item .fill-summary .summary-degree{width:30px}.fill-item .fill-summary .summary-opacity{width:36px}.fill-item .fill-stops{position:relative;margin-left:22px}.fill-item .fill-stops:before{position:absolute;top:13px;left:2px;width:2px;height:calc(100% - 26px);content:"";background-color:#3d3e44;z-index:1}.fill-item .fill-stops .stops-item{position:relative;padding-left:3px}.fill-item .fill-stops .stops-item .stops-dot{position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:3px;background-color:#3d3e44;z-index:1}.fill-item .fill-code{margin-left:22px}.effect-item{position:relative}.effect-item-expanded .effect-summary .summary-chevron{transform:rotate(0)!important}.effect-item-expanded .effect-code,.effect-item-expanded .effect-extra{height:auto!important;margin-bottom:6px!important}.effect-item .effect-summary{display:flex;align-items:center;height:26px;margin-bottom:6px;border-radius:2px;transition:background .2s;cursor:pointer}.effect-item .effect-summary:hover{background:#1b1e2a}.effect-item .effect-summary .summary-chevron{flex-shrink:0;padding:2px;transform:rotate(-90deg);transition:transform .2s}.effect-item .effect-summary .effect-thumbnail{width:18px;height:18px;margin:0 4px}.effect-item .effect-summary .summary-name{flex:1 1}.effect-item .effect-summary .summary-blur{width:60px}.effect-item .effect-code,.effect-item .effect-extra{height:0;margin-bottom:0;margin-left:22px;overflow:hidden}.text-items .text-item{margin-bottom:6px}.export-item{display:flex;align-items:center;padding:12px;transition:background .2s;cursor:pointer}.export-item:hover{background:#141723}.export-item:hover>svg{opacity:1}.export-item-downloading>svg{opacity:1!important}.export-item>div{width:46px;height:46px;margin-right:6px;background-position:50%;background-size:contain;background-repeat:no-repeat;background-color:#111421}.export-item>span{flex:1 1}.export-item>svg{opacity:0;transition:opacity .2s}.preview{position:relative;width:100%;height:100%}.preview .preview-bg{background:#fff}.preview-fill>div{position:absolute;top:0;left:0}.preview-fill>div,.preview-text .preview-bg{width:100%;height:100%}.preview-text .text-item{display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;width:100%;height:100%;color:#333;overflow:hidden}.preview-effect .preview-bg{width:100%;height:100%;background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEAkACQAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCACgAKADAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9GKACgAoAKACgAoAKACgAoAKAP64KACgAoAKACgAoAKACgAoAKAP5H6ACgAoAKACgAoAKACgAoAKAP64KACgAoAKACgAoAKACgAoAKAP5H6ACgAoAKACgAoAKACgAoAKAP64KACgAoAKACgAoAKACgAoAKAP5H6ACgAoAKACgAoAKACgAoAKAP64KACgAoAKACgAoAKACgAoAKAP5H6ACgAoAKACgAoAKACgAoAKAP64KACgAoAKACgAoAKACgAoAKAP5H6ACgAoAKACgAoAKACgAoAKAP64KACgAoAKACgAoAKACgAoAKAP5H6ACgAoAKACgAoAKACgAoAKAP64KACgAoAKACgAoAKACgAoAKAP5H6ACgAoAKACgAoAKACgAoAKAP64KACgAoAKACgAoAKACgAoAKAP5H6ACgAoAKACgAoAKACgAoAKAP64KACgAoAKACgAoAKACgAoAKAP5H6ACgAoAKACgAoAKACgAoAKAP64KACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgD+R+gAoAKACgAoAKACgAoAKACgD+uCgAoAKACgAoAKACgAoAKACgD+R+gAoAKACgAoAKACgAoAKACgD+uCgAoAKACgAoAKACgAoAKACgD+R+gAoAKACgAoAKACgAoAKACgD+uCgAoAKACgAoAKACgAoAKACgD+R+gAoAKACgAoAKACgAoAKACgD+uCgAoAKACgAoAKACgAoAKACgD+R+gAoAKACgAoAKACgAoAKACgD+uCgAoAKACgAoAKACgAoAKACgD+R+gAoAKACgAoAKACgAoAKACgD+uCgAoAKACgAoAKACgAoAKACgD+R+gAoAKACgAoAKACgAoAKACgD+uCgAoAKACgAoAKACgAoAKACgD+R+gAoAKACgAoAKACgAoAKACgD+uCgAoAKACgAoAKACgAoAKACgD+R+gAoAKACgAoAKACgAoAKACgD+uCgAoAKACgAoAKACgAoAKACgD+R+gAoAKACgAoAKACgAoAKACgA/9k=);background-size:40px}.preview-effect .effect-item{position:absolute;top:50%;left:50%;width:100px;height:100px;transform:translate(-50%,-50%);border-radius:50px;background:hsla(0,0%,100%,.8)}.style-item{display:flex;padding:7px 12px;color:hsla(0,0%,100%,.85);transition:background .2s;cursor:pointer}.style-item-hoverable.selected,.style-item-hoverable:hover{background:#141723}.style-item .item-preview{width:18px;height:18px;margin-right:8px;border-radius:9px;border:1px solid #3d3e44;overflow:hidden}.style-item-effect .item-preview{border:none}select.color-format-select{width:86px;background:transparent;cursor:pointer}select.color-format-select:hover{border-color:transparent;background:#1b1e2a}select.color-format-select:focus{border-color:transparent}select.color-format-select option{background:transparent none repeat 0 0/auto auto padding-box border-box scroll;background:initial}.right-styles{height:100%;background:#222531;transition:transform .2s}.right-styles .styles-mask{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(16,19,33,.8);opacity:0;z-index:1;transition:opacity .2s}.right-styles .styles-mask.mask-starting{display:block}.right-styles .styles-mask.mask-entered,.right-styles .styles-mask.mask-entering{display:block;opacity:1}.right-styles .styles-mask.mask-leaving{display:block;opacity:0}.right-styles .styles-mask.mask-leaved{display:none}.right-styles .styles-tabs{display:flex;border-bottom:1px solid #383941}.right-styles .styles-tabs li{flex:1 1;display:flex;align-items:center;justify-content:center;padding:8px 12px;font-size:12px;opacity:.65;border-bottom:2px solid transparent;cursor:pointer}.right-styles .styles-tabs li.selected,.right-styles .styles-tabs li:hover{opacity:1;border-color:#fff}.right-styles .styles-tabs li svg{margin-right:5px}.right-styles .styles-list{height:calc(100% - 36px);overflow:auto;padding-bottom:12px}.right-styles .styles-list .list-title{padding:6px 12px;color:hsla(0,0%,100%,.85)}.right-styles .styles-exports{height:calc(100% - 36px);overflow:auto}.right-styles .styles-exports .exports-download-all{position:relative;display:flex;align-items:center;justify-content:flex-end;padding:6px 12px;color:hsla(0,0%,100%,.65);transition:background .2s,color .2s;cursor:pointer}.right-styles .styles-exports .exports-download-all.is-downloading{justify-content:flex-start}.right-styles .styles-exports .exports-download-all:hover{color:hsla(0,0%,100%,.85);background:#141723}.right-styles .styles-exports .exports-download-all svg{margin-left:6px}.right-styles .styles-exports .exports-download-all span{position:relative;z-index:1}.right-styles .styles-exports .exports-download-all .download-all-progress{position:absolute;top:0;left:0;height:100%;background-color:#2f3446;z-index:0}.right-styles .styles-exports .exports-empty{padding:12px;color:hsla(0,0%,100%,.36)}.title-reference{display:flex;align-items:center;font-weight:400;cursor:pointer}.title-reference .style-item{margin-right:6px;padding:0}.title-reference>svg{flex:1 1 14px}.props-text .text-content{position:relative;margin-bottom:10px}.props-text .text-content .content-copy{position:absolute;top:8px;right:6px;width:14px;height:14px;color:hsla(0,0%,100%,.36);cursor:pointer;transition:color .2s}.props-text .text-content .content-copy:hover{color:hsla(0,0%,100%,.85)}.props-text .text-content .content-box{max-height:70px;padding:8px 24px 8px 12px;border-radius:2px;background:#1c1f2a;font-size:12px;white-space:pre-wrap;overflow:auto}.props-text .text-content .content-box .box-piece{margin:0;padding:0 3px;border-radius:2px;cursor:pointer}.props-text .text-content .content-box .box-piece.selected{background:hsla(0,0%,100%,.2)}.props-text .text-content .content-box .box-piece:hover{text-decoration:underline}.props-text .text-content .section-helper{display:inline-block;margin-top:5px;cursor:pointer}.props-text .text-content .section-helper:hover{color:hsla(0,0%,100%,.85)}.right-props{position:absolute;top:0;left:0;width:100%;height:100%;background:#222531;overflow:auto;z-index:1;transition:transform .2s}.right-props-starting{transform:translateX(260px)}.right-props-entered,.right-props-entering{transform:translateX(0)}.right-props-leaved,.right-props-leaving{transform:translateX(260px)}.right-props .props-section{padding:12px;border-bottom:1px solid #383941}.right-props .props-section:last-child{border-bottom:none}.right-props .props-section .section-title{display:flex;align-items:center;margin:0 0 10px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.right-props .props-section .section-title .title-name{flex:1 1}.right-props .props-section .section-title.section-name{margin:0}.right-props .props-section .section-title.section-name span{flex:1 1;margin-right:6px;overflow:hidden;text-overflow:ellipsis}.right-props .props-section .section-helper{font-size:12px;color:hsla(0,0%,100%,.36)}.right-props .props-section .section-helper>span,.right-props .props-section .section-helper>svg{vertical-align:middle}.right-props .props-section .section-items .item-block{margin-bottom:6px}.right-props .props-section .section-items .item-block:last-child{margin-bottom:0}.right-props .props-section.props-basic .section-items{display:flex;flex-flow:wrap;justify-content:space-between;width:100%;font-size:12px}.right-props .props-section.props-basic .section-items .copiable-input{flex:0 1 47%}.right-props .props-section.props-code .section-items{position:relative;border-radius:2px;background:#191c28}.right-props .props-section.props-code .section-items .code-copy{position:absolute;top:8px;right:6px;width:14px;height:14px;color:hsla(0,0%,100%,.36);cursor:pointer;transition:color .2s}.right-props .props-section.props-code .section-items .code-copy:hover{color:hsla(0,0%,100%,.85)}.right-props .props-section.props-code .section-items .code-box{display:block;margin:0 24px 0 0;padding:12px;overflow-x:auto;white-space:pre-wrap}.right-props .props-section.props-export{padding:0}.right-props .props-section.props-export .section-title{margin-bottom:0;padding:12px}.style-detail{position:absolute;top:0;left:100%;width:100%;height:100%;overflow:auto;transition:transform .2s;background:#222531}.style-detail-visible{transform:translateX(-100%)}.style-detail .detail-title{display:flex;padding-right:12px;align-items:center;line-height:36px}.style-detail .detail-title svg{margin-right:4px;padding:8px;cursor:pointer}.style-detail .detail-title svg:hover{background:#1b1e2a}.style-detail .detail-title .title-name{flex:1 1}.style-detail .detail-main{height:calc(100% - 36px);overflow:auto}.style-detail .detail-main .detail-preview{position:relative;height:120px}.style-detail .detail-main .detail-preview>div{position:absolute;top:0;left:0;width:100%;height:100%}.style-detail .detail-main .detail-preview .preview-bg{background-color:#fff}.style-detail .detail-main .detail-name{padding:12px}.style-detail .detail-main .detail-name>h5{margin:0 0 6px}.style-detail .detail-main .detail-name .copiable-input+.copiable-input{margin-bottom:6px}.style-detail .detail-main .detail-properties{padding:12px}.style-detail .detail-main .detail-properties>h5{margin:0 0 8px}.main-right{position:relative;width:260px;height:100%;background:#222531;transition:width .2s}.main-right.collapsed{width:0}.main-right.collapsed .collapse-button{display:block}.main-right .collapse-button{display:none}.main-right:hover .collapse-button{display:block}.main-right .right-pannels{position:relative;width:260px;height:100%;transition:transform .2s;overflow:hidden}.main-right .right-pannels-out .right-props,.main-right .right-pannels-out .right-styles{transform:translateX(-260px)}.main-canvas{position:relative;flex:1 1;overflow:hidden;background-color:#111421}.main-canvas .canvas-help{position:absolute;bottom:16px;left:116px;width:26px;height:26px;padding:5px;text-align:center;border-radius:13px;background:#363945;cursor:pointer;z-index:1}.main-canvas .canvas-help:hover{background:#222531}.main-canvas .canvas-steper{display:flex;align-items:center;position:absolute;bottom:16px;left:16px;width:96px;height:26px;border-radius:13px;background:#363945;cursor:pointer;z-index:1}.main-canvas .canvas-steper .steper-button{padding:6px;transition:background .2s}.main-canvas .canvas-steper .steper-button.steper-minus{border-radius:13px 0 0 13px}.main-canvas .canvas-steper .steper-button.steper-plus{border-radius:0 13px 13px 0}.main-canvas .canvas-steper .steper-button svg{display:block}.main-canvas .canvas-steper .steper-button:hover{background:#222531}.main-canvas .canvas-steper .steper-percentage{height:26px;padding:6px;line-height:14px;transition:background .2s;flex:1 1}.main-canvas .canvas-steper .steper-percentage:hover{background:#222531}.main-canvas .canvas-container{display:flex;align-items:center;justify-content:center;position:absolute;padding:60px;background:#111421;transition:none}.canvas-tooltip .rc-tooltip-inner{padding:0!important;overflow:hidden}.canvas-tooltip .rc-tooltip-inner .tooltip-quick-zoom{background:#363945}.canvas-tooltip .rc-tooltip-inner .tooltip-quick-zoom>li{padding:6px 12px;cursor:pointer;transition:background .2s}.canvas-tooltip .rc-tooltip-inner .tooltip-quick-zoom>li:hover{background:#222531}.canvas-tooltip .rc-tooltip-inner .tooltip-help{padding:12px;background:#363945}.canvas-tooltip .rc-tooltip-inner .tooltip-help>li{margin-bottom:6px}.canvas-tooltip .rc-tooltip-inner .tooltip-help>li h3{margin:0}.mark-distance,.mark-distance-sizing{position:absolute;background:#2ca7fb}.mark-distance-sizing{padding:0 6px;border-radius:2px;font-size:12px}.mark-distance-v{width:1px}.mark-distance-v .mark-distance-sizing{position:absolute;top:50%;left:3px;transform:translateY(-50%)}.mark-distance-h{height:1px}.mark-distance-h .mark-distance-sizing{position:absolute;bottom:3px;left:50%;transform:translateX(-50%)}.mark-ruler{position:absolute}.mark-ruler-v{width:0;border-left:1px dashed #f36}.mark-ruler-h{height:0;border-top:1px dashed #f36}.container-mark{position:relative}.container-mark img{display:block;width:100%}.container-mark .mark-layers{position:absolute;width:100%;height:100%}.container-mark .mark-layers-exports-visible .layer.has-exports{opacity:1;background-color:rgba(255,51,102,.16)}.container-mark .mark-layers .layer{position:absolute;border:1px solid #f36;opacity:0;transition:opacity .2s}.container-mark .mark-layers .layer.current-component,.container-mark .mark-layers .layer.hovered{opacity:1}.container-mark .mark-layers .layer.group{border-style:dotted}.container-mark .mark-layers .layer.component{border-color:#8d77fc;border-style:dotted}.container-mark .mark-layers .layer.selected{border:1px solid #36a9f8;opacity:1}.container-mark .mark-layers .layer.selected.has-exports{opacity:1;background-color:rgba(255,51,102,.16)}.container-mark .mark-layers .layer.selected.group{border-style:dotted}.container-mark .mark-layers .layer.component.selected{border-color:#8d77fc}.container-mark .mark-layers .layer.selected.hovered .layer-sizing{display:block}.container-mark .mark-layers .layer.percentage-highlight{opacity:1;border-color:rgba(0,53,255,.12);background-color:rgba(0,53,255,.12)}.container-mark .mark-layers .layer-component{position:absolute;top:-19px;left:-1px;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:0 6px;color:hsla(0,0%,100%,.85);background-color:#8d77fc}.container-mark .mark-layers .layer-sizing{display:none;position:absolute;padding:0 6px;border-radius:2px;background:#36a9f8;font-size:12px}.container-mark .mark-layers .layer-width{top:-22px;left:50%;transform:translateX(-50%)}.container-mark .mark-layers .layer-height{left:calc(100% + 3px);top:calc(50% - 10px)}.app-main{flex:1 1;display:flex;height:50px;overflow:hidden}.settings .form:not(:last-child){margin-bottom:20px}.settings .form .settings-title{color:hsla(0,0%,100%,.36)}.settings .form .form-item-checkbox label{display:block;padding:2px 0;color:hsla(0,0%,100%,.85);transition:color .2s;cursor:pointer}.settings .form .form-item-checkbox label:hover{color:#fff}.settings .form .form-item-checkbox .help-block{margin-left:16px}.app-header{position:relative;display:flex;align-items:center;height:40px;background:#191c28}.app-header>*{z-index:1}.app-header .header-figmacn-logo{padding:10px 6px 10px 12px}.app-header .header-figmacn-logo img{display:block;height:20px}.app-header .header-divider{width:1px;height:20px;background-color:hsla(0,0%,100%,.16)}.app-header .header-logo{padding:5px 0 5px 6px}.app-header .header-logo img{display:block;height:30px}.app-header .header-back{padding:8px;cursor:pointer;transition:background .2s}.app-header .header-back:hover{background:#01040c}.app-header .header-back svg{display:block}.app-header .header-space{flex:1 1}.app-header .header-filename{padding:0 10px;font-weight:700}.app-header .header-pagename{position:absolute;left:50%;line-height:30px;text-align:center;font-weight:500;transform:translateX(-50%)}.app-header .header-pagename>span{color:hsla(0,0%,100%,.36)}.app-header .header-operates a,.app-header .header-operates span{display:inline-block;height:40px;padding:13px;transition:background .2s;cursor:pointer}.app-header .header-operates a:last-child,.app-header .header-operates span:last-child{margin-right:0}.app-header .header-operates a:hover,.app-header .header-operates span:hover{background:#01040c}.header-overlay .rc-tooltip-inner{padding:20px!important}.header-overlay .rc-tooltip-inner h3{margin-top:0}.header-overlay-settings .rc-tooltip-arrow{right:15px!important}.header-overlay-changelog .rc-tooltip-arrow{right:45px!important}.header-overlay-changelog h2{margin-top:0;margin-bottom:12px}.header-overlay-changelog .changelog-content{max-height:500px;overflow:auto}.header-overlay-changelog .changelog-content h2{margin-top:12px;margin-bottom:4px}.header-overlay-changelog .changelog-content ul{padding-left:16px}.header-overlay-changelog .changelog-content li{list-style-type:disc}.text-size-normal{font-size:12px}.text-size-large{font-size:14px}.text-regular{font-weight:400}.text-medium{font-weight:500}.text-bold{font-weight:700}.hide{display:none}.rc-tooltip{opacity:1}.rc-tooltip .rc-tooltip-inner{padding:6px 12px;min-height:30px;border-radius:6px;background-color:rgba(47,52,70,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 10px 10px rgba(0,0,0,.26)}.rc-tooltip .rc-tooltip-inner img{width:100%}.rc-tooltip-placement-top .rc-tooltip-arrow,.rc-tooltip-placement-topLeft .rc-tooltip-arrow{border-top-color:rgba(47,52,70,.9)}.rc-tooltip-placement-bottom .rc-tooltip-arrow,.rc-tooltip-placement-bottomRight .rc-tooltip-arrow{border-bottom-color:rgba(47,52,70,.9)}.rc-tooltip-placement-right .rc-tooltip-arrow{border-right-color:rgba(47,52,70,.9)}.rc-tooltip-slide-enter{animation-duration:.02s;animation-fill-mode:both;animation-timing-function:linear;opacity:1!important;transform:translateY(5px);animation-play-state:paused}.rc-tooltip-slide-enter.rc-tooltip-slide-enter-active{animation-name:slideIn;animation-play-state:running}.rc-tooltip-slide-leave{animation-duration:.02s;animation-fill-mode:both;animation-timing-function:linear;animation-play-state:paused}.rc-tooltip-slide-leave.rc-tooltip-slide-leave-active{animation-name:slideOut;animation-play-state:running}@keyframes slideIn{0%{transform:translateY(5px)}to{transform:translateY(0)}}@keyframes slideOut{0%{transform:translateY(0)}to{transform:translateY(5px)}}.rc-cascader{font-size:12px}.rc-cascader-menus{font-size:12px;overflow:hidden;color:#fff;background:rgba(47,52,70,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:absolute;border-radius:6px;box-shadow:0 0 10px 10px rgba(0,0,0,.26);white-space:nowrap}.rc-cascader-menus>div{display:flex}.rc-cascader-menus-hidden{display:none}.rc-cascader-menus.slide-up-appear,.rc-cascader-menus.slide-up-enter{animation-duration:.3s;animation-fill-mode:both;transform-origin:0 0;opacity:0;animation-timing-function:cubic-bezier(.08,.82,.17,1);animation-play-state:paused}.rc-cascader-menus.slide-up-leave{animation-duration:.3s;animation-fill-mode:both;transform-origin:0 0;opacity:1;animation-timing-function:cubic-bezier(.6,.04,.98,.34);animation-play-state:paused}.rc-cascader-menus-placement-bottomLeft.slide-up-appear.slide-up-appear-active,.rc-cascader-menus-placement-bottomLeft.slide-up-enter.slide-up-enter-active{animation-name:SlideUpIn;animation-play-state:running}.rc-cascader-menus-placement-topLeft.slide-up-appear.slide-up-appear-active,.rc-cascader-menus-placement-topLeft.slide-up-enter.slide-up-enter-active{animation-name:SlideDownIn;animation-play-state:running}.rc-cascader-menus-placement-bottomLeft.slide-up-leave.slide-up-leave-active{animation-name:SlideUpOut;animation-play-state:running}.rc-cascader-menus-placement-topLeft.slide-up-leave.slide-up-leave-active{animation-name:SlideDownOut;animation-play-state:running}.rc-cascader-menu{width:216px;height:192px;list-style:none;margin:0;padding:0;border-right:1px solid hsla(0,0%,100%,.08);overflow:auto}.rc-cascader-menu:last-child{border-right:0}.rc-cascader-menu-item{height:32px;line-height:32px;padding:0 16px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .3s ease;position:relative}.rc-cascader-menu-item:hover{background:#191c28}.rc-cascader-menu-item-disabled{cursor:not-allowed;color:hsla(0,0%,100%,.16)}.rc-cascader-menu-item-disabled:hover{background:transparent}.rc-cascader-menu-item-loading:after{position:absolute;right:12px;content:"loading";color:hsla(0,0%,100%,.16);font-style:italic}.rc-cascader-menu-item-active,.rc-cascader-menu-item-active:hover{background:#222531}.rc-cascader-menu-item-expand{position:relative}.rc-cascader-menu-item-expand-icon{font-size:12px;color:#999;position:absolute;right:2px;line-height:32px}.rc-cascader-menu-item-expand-icon svg{vertical-align:middle;color:hsla(0,0%,100%,.36)}.rc-input-number{outline:none;color:hsla(0,0%,100%,.85);font-size:13px;line-height:14px;transition:all .2s;background:#191c28;width:100%;height:26px;border:1px solid transparent;border-radius:2px;padding:0 0 0 10px}.rc-input-number:hover{border:1px solid rgba(0,53,255,.64)}.rc-input-number:hover .rc-input-number-handler-wrap{border-color:hsla(0,0%,100%,.16)}.rc-input-number-focused{border:1px solid transparent;box-shadow:none}.rc-input-number .rc-input-number-input-wrap .rc-input-number-input{text-align:left;color:hsla(0,0%,100%,.85);background:#1c1f2a}.rc-input-number .rc-input-number-handler-wrap{display:flex;flex-direction:column;border-left:1px solid hsla(0,0%,100%,.16)}.rc-input-number .rc-input-number-handler-wrap .rc-input-number-handler{flex:1 1 50%;display:flex;align-items:center;justify-content:center;padding-top:0;cursor:pointer}.rc-input-number .rc-input-number-handler-wrap .rc-input-number-handler:hover{flex:1 0 66.67%;background:hsla(0,0%,100%,.16)}.rc-input-number .rc-input-number-handler-wrap .rc-input-number-handler:hover .rc-input-number-handler-down-inner,.rc-input-number .rc-input-number-handler-wrap .rc-input-number-handler:hover .rc-input-number-handler-up-inner{color:hsla(0,0%,100%,.85)}.rc-input-number .rc-input-number-handler-wrap .rc-input-number-handler-down-inner,.rc-input-number .rc-input-number-handler-wrap .rc-input-number-handler-up-inner{color:hsla(0,0%,100%,.36)}.rc-input-number .rc-input-number-handler-wrap .rc-input-number-handler-up{border-bottom:none}.input{width:100%;height:26px;border:1px solid transparent;border-radius:2px;outline:none;padding:2px 10px;color:hsla(0,0%,100%,.85);font-size:13px;line-height:14px;transition:all .2s;background:#191c28}.input:focus,.input:hover{border:1px solid rgba(0,53,255,.64)}.input::-webkit-input-placeholder{color:hsla(0,0%,100%,.36)}.input:-ms-input-placeholder{color:hsla(0,0%,100%,.36)}.input::placeholder{color:hsla(0,0%,100%,.36)}.input[disabled]{opacity:.6;cursor:not-allowed}.input[disabled]:active,.input[disabled]:focus,.input[disabled]:hover{border-color:transparent}.input[readonly]{color:hsla(0,0%,100%,.65)}.input[readonly]:active,.input[readonly]:focus,.input[readonly]:hover{border-color:transparent}textarea.input{padding:5px 10px;resize:vertical;height:auto}.input-lg{height:32px;padding:5px 10px;line-height:16px;font-size:14px}.form .form-item{position:relative;margin-bottom:12px}.form .form-item:last-child{margin-bottom:0}.form .form-item-actions{margin-top:20px;text-align:right}.form .form-item-actions button{margin-left:10px}.form .form-item-centered{text-align:center}.form .form-item-right{text-align:right}.form .form-item-horizontal{display:flex;align-items:center}.form .form-item-horizontal .item-label{flex:1 0 66px}.form .form-item .item-group{display:flex}.form .form-item .help-block{padding:3px;font-size:12px;color:hsla(0,0%,100%,.65)}.form .form-item.has-error .help-block{color:#f24d1d}.form .form-error{margin-bottom:15px;padding:8px 12px;font-size:12px;color:#f24d1d;background:rgba(242,77,29,.1);border-radius:2px}.btn{outline:none;display:inline-block;border-radius:2px;cursor:pointer;text-align:center;vertical-align:middle;white-space:nowrap;line-height:20px;font-size:12px;padding:2px 12px;border:1px solid transparent;background-image:none;color:#333;background:#999;transition:all .6s}.btn,.btn:active,.btn:disabled,.btn:hover{text-decoration:none}.btn:disabled{cursor:not-allowed}.btn>svg{display:block}.btn.btn-primary{color:#fff;background:#0035ff}.btn.btn-primary:hover{background:#002fe0}.btn.btn-white-o{color:hsla(0,0%,100%,.85);border-color:hsla(0,0%,100%,.85);background:transparent}.btn.btn-white-o:hover{color:#0035ff;background:hsla(0,0%,100%,.85)}.btn.btn-block{display:block;width:100%}.btn.btn-round{border-radius:13px}.btn-lg{height:32px;padding:5px 10px;font-size:14px}.btn-lg.btn-round{border-radius:16px}.motion-loading{animation:loading 1s linear infinite}@keyframes loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes SlideUpIn{0%{opacity:0;transform-origin:0 0;transform:scaleY(.8)}to{opacity:1;transform-origin:0 0;transform:scaleY(1)}}@keyframes SlideUpOut{0%{opacity:1;transform-origin:0 0;transform:scaleY(1)}to{opacity:0;transform-origin:0 0;transform:scaleY(.8)}}@keyframes SlideDownIn{0%{opacity:0;transform-origin:0 100%;transform:scaleY(.8)}to{opacity:1;transform-origin:0 100%;transform:scaleY(1)}}@keyframes SlideDownOut{0%{opacity:1;transform-origin:0 100%;transform:scaleY(1)}to{opacity:0;transform-origin:0 100%;transform:scaleY(.8)}}body{margin:0;font-size:13px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box}ul{list-style:none}p,ul{margin:0;padding:0}a{color:hsla(0,0%,100%,.85);text-decoration:none}a:hover{opacity:.86}#root,body,html{width:100%;height:100%}body{overscroll-behavior-x:none}.app-container{display:flex;flex-direction:column;width:100%;height:100%;color:hsla(0,0%,100%,.85)}
/*# sourceMappingURL=main.ba45722c.chunk.css.map */