:root{font-family:Inter,Avenir,Helvetica,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0 auto;display:flex;justify-content:center}h1{font-size:3.2em;line-height:1.1}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}}.comps-toolbar-wrapper{grid-area:header;display:flex;align-items:center;border-bottom:1px solid #ccc;gap:12px;padding:0 12px}.comp-toobar-canvas-control{display:flex;height:32px;align-items:center}.comps-TemplatesList-wrapper{flex:1;overflow:auto;display:grid;grid-template-columns:1fr 1fr;align-content:flex-start;gap:10px}.comps-TemplatesList-wrapper>div{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100px;border:1px solid #cccc;cursor:grab}.comps-righttoolnav-wrapper{grid-area:aside;padding:12px;display:flex;flex-direction:column}.comps-toolnav-layer{height:200px;width:100%;overflow:auto;padding:12px 0;border-top:1px solid #ccc;font-size:14px;cursor:pointer}.comps-toolnav-layer-item{display:flex;justify-content:space-between;height:30px;align-items:center;padding:0 6px}.comps-toolnav-layer-item:hover{background-color:#ddd}.comps-toolnav-layer-item:hover .comps-toolnav-layer-item-icons{display:block}.comps-toolnav-layer-item-click{background-color:#ecf5ff;color:#409eff}.comps-toolnav-layer-item-icons{display:none}.comps-toolnav-layer-item-icons>*{margin-left:6px}.comps-editor-wrapper{grid-area:canvas;margin:20px 0}.comps-editor-wrapper .comps-editor-wrapper-inner{width:calc(100vw - 560px);height:100%;overflow:auto}.comps-editor-canvas{height:1500px;width:500px;background-color:#fff;position:relative;margin:0 auto}.comps-editor-item-points-wrapper{position:absolute;cursor:move;border:1px solid #3300d0}.comps-editor-item-point{position:absolute;box-sizing:border-box;width:8px;height:8px;border-radius:4px;left:0;top:0;display:none;background-color:#fff;z-index:99999;border:1px solid #3300d0}.comps-editor-item-point-show{display:block}.comps-editor-item-point-rm{cursor:col-resize}.comps-editor-item-point-rb{cursor:nwse-resize}.comps-editor-item-point-bm{cursor:row-resize}.comps-editor-rightclick{position:fixed;width:150px;background-color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;border:1px solid #ddd;padding:6px 0;cursor:pointer}.comps-editor-rightclick-item{box-sizing:border-box;height:30px;width:150px;padding:0 12px}.comps-editor-rightclick-item:hover{width:150px;background-color:#1890ff}.comps-colorpicker-picker{position:relative}.comps-colorpicker-picker input{display:block;box-sizing:border-box;width:90px;margin:20px 55px 0;padding:6px;border:1px solid #ddd;border-radius:4px;background:#eee;outline:none;font:inherit;text-transform:uppercase;text-align:center}.comps-colorpicker-picker input:focus{border-color:#4298ef}.comps-colorpicker-swatch{width:28px;height:28px;border-radius:8px;border:3px solid #fff;box-shadow:0 0 0 1px #0000001a,inset 0 0 0 1px #0000001a;cursor:pointer}.comps-colorpicker-popover{position:absolute;z-index:999;background-color:#fff;padding-bottom:12px;top:calc(100% + 2px);left:-20px;border-radius:9px;box-shadow:0 6px 12px #00000026}.comps-attrtoollist-wrapper{grid-area:attr-aside;padding:12px;overflow:auto}.home-wrapper{display:grid;grid-template-columns:220px calc(100% - 560px) 300px;grid-template-rows:80px calc(100vh - 80px);grid-template-areas:"header header header" "aside canvas attr-aside";column-gap:20px;height:100vh;width:100vw;background-color:#f3f3f3}.home-wrapper>*{background-color:#fff}.pages-preview-wrapper{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;overflow:auto}.pages-preview-simulator{position:relative}