main{--gridwidth:calc(1px*var(--ddc99908));--gap:calc(var(--gridwidth)*var(--076d6cb0)/var(--e14f7948));--colorGrid:#8d7b68;width:var(--gridwidth);height:calc(var(--gridwidth)*var(--e1e334be));margin:15px 0 0 75px;padding:0 70px 70px 35px}.gridchild>*{background-color:var(--colorGrid)}.gridchild{counter-reset:step}.gridchild div{position:relative}.gridchild div:before{position:absolute;display:block;padding:0 5px;text-align:center;color:#fff}.grid-button{right:0;padding:0 5px;margin:0;color:#161825;background-color:transparent;border:none;z-index:99999;display:inline-block}.grid-button:hover{background-color:transparent;color:inherit}#gridcontainer{width:100%;z-index:0;position:relative;background:#444;box-shadow:0 2px 5px 0 #000}.grid{width:100%;height:100%;display:grid;grid-auto-flow:row dense;grid-template-columns:var(--14b04856);grid-template-rows:var(--2d0786b0);grid-gap:var(--gap);padding:var(--gap);box-sizing:border-box;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.grid,.grid p{position:absolute}.grid p{padding-left:2px;margin:0;font-size:12px;color:#161825}.grid div[class*=box]{border:1px dotted var(--colorGrid);transition:all .2s ease;cursor:move;position:relative;z-index:1000;opacity:.5}.colunits,.rowunits{display:grid;grid-template-columns:var(--14b04856)}.colunits div,.rowunits div{text-align:center;position:relative}.rowunits{margin-left:-70px;float:left;height:calc(100% - 50px);grid-template-rows:var(--2d0786b0)}.rowunits div{align-self:center}@media screen and (max-width:768px){*{--gridwidth:calc(80vw - 50px)}}.grid-field>input{width:50px}.grid-field>input[type=button]{width:15px}.grid-template{opacity:.5}.grid-template:hover{opacity:1;font-weight:700}.grid-line{background:transparent;touch-action:none;pointer-events:auto}.grid-line .col{z-index:10;width:var(--gap);height:100%;bottom:0;left:100%;cursor:col-resize}.grid-line .row{z-index:10;height:var(--gap);width:100%;left:0;top:100%;cursor:row-resize}.line-handle{position:absolute!important}.demo-mask{position:fixed;z-index:100;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);overflow:auto;transition:opacity .25s ease}.demo-wrapper{width:100%;height:100%;align-content:center}.demo-container{width:86%;height:86%;top:7%;left:7%;position:relative;background-color:#f0f0f0;border-radius:5px;box-shadow:0 2px 20px rgba(0,0,0,.8);transition:all .3s ease;border:1px solid #000;display:grid;grid-template-rows:repeat(9,1fr)}@media screen and (max-width:700px){.demo-container{padding:0 20px 20px;width:calc(100% - 40px)}}.demo-header{font-size:1.5em;text-align:center;width:100%;grid-area:1/1/2/2}.demo-body{grid-area:2/1/9/2}.demo-button{margin:40px auto;display:table;grid-area:9/1/10/2}@media screen and (max-width:700px){.demo-button{margin:20px auto 0}}.demo-enter,.demo-leave-active{opacity:0}.demo-enter .demo-container,.demo-leave-active .demo-container{transform:scale(.9)}.preview-canvas{height:100%;position:relative;overflow-y:scroll;p{margin:5px}}canvas{position:absolute}.tp-rotv{width:250px;margin-top:0;left:8px;background-color:transparent!important;right:auto!important}@media (min-width:720px){.tp-rotv{margin-left:5.4rem}}aside{margin-top:60px;font-size:17px;width:30vw}label{padding-right:18px;display:inline-block;width:150px}label .label-extra-info{opacity:.7}.field{font-size:15px;background:#f0f0f0;color:#161825;width:40px;padding:.3ch 5px;max-height:40px;border:none}fieldset{margin-bottom:20px;border:none;margin:0;padding:5px 0}[type=reset]{color:#565656;border:1px solid #565656}[type=reset]:hover{background:#565656;color:#000}.descr{font-size:13px;margin-top:45px}@media screen and (max-width:700px){aside{width:80vw;margin-left:75px;margin-top:0}button[type=reset]{margin-left:20px}}*{box-sizing:border-box}*,:after,:before{box-sizing:inherit}:focus{outline:none}body{width:100%;height:90vh;padding:0;margin:0;background:#f0f0f0;font-family:ui-sans-serif,system-ui;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#161825;font-weight:300}.config-container{display:flex}.header-title{font-size:25px;font-weight:700;margin-top:30px;margin-bottom:40px;text-align:center}a{text-decoration:none;color:#161825}a:hover{color:#8d7b68}.header-subtitle{font-size:15px;font-weight:500}@media screen and (max-width:700px){.config-container{flex-direction:column}}button{background:transparent;color:#131321;padding:4px 30px 5px;border-radius:1000px;border:1px solid #131321;font-size:16px;margin:20px 0 0;cursor:pointer;transition:all .35s;display:block}button:hover{background:#444;color:#f0f0f0;border:none}