html,body{min-height:100vh;min-width:100vh}body{display:flex}#root{align-self:stretch;flex:1;display:flex;overflow:hidden}.builder{align-self:stretch;flex:1;display:flex}.menu-container{max-width:312px;flex:1}.frames-container{flex:2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;background-color:#d3d3d3}.panel-container{height:100vh;width:288px;display:flex;overflow:auto;background-color:var(--black)}.frame.selected{outline:2px solid mediumseagreen;outline-offset:-2px}.right{min-width:288px;max-width:288px;display:flex;flex-direction:column;padding:16px 0 16px 10px;gap:24px;overflow:auto;box-shadow:2px 0 0 var(--white-light) inset}.right.disable{pointer-events:none;opacity:30%;box-shadow:1px 0 0 var(--white) inset}.item{align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:16px}.title{height:36px;align-self:stretch;display:flex;flex-direction:row;justify-content:space-between;padding:8px 16px 8px 8px}.space{width:20px;aspect-ratio:1}.fields{align-self:stretch;display:flex;flex-direction:row;padding:0 16px;gap:8px;overflow:hidden}.field{width:100px;display:flex;flex-direction:row;align-items:center;gap:8px;padding:4px 8px;font-size:14px;overflow:hidden}.field.input-color{width:fit-content}.field input{width:100%!important}.field:hover,.field:focus-within{outline:1px solid var(--white-light);outline-offset:-1px}.field:focus-within{outline:1px solid var(--white)}.label{text-align:center;align-self:center;font-size:14px;color:var(--white)}.grouped-field{align-self:stretch;display:flex;flex-direction:row;justify-content:center}.actions{display:flex;flex-direction:row;align-items:center;gap:16px}.right :not(.alignment)>button.selected{background-color:var(--white)}.right :not(.alignment)>button.selected img{filter:invert(1)}.color{height:20px;aspect-ratio:1;outline:1px solid var(--white);outline-offset:-1px;background-color:red}.hidden{opacity:30%!important}.div-alignment{min-width:72px;max-width:72px;aspect-ratio:1;display:flex;flex-direction:row;flex-wrap:wrap;padding:6px;border:1px solid var(--white)}.div-alignment button{width:19px;aspect-ratio:1;padding:2px!important}.alignment img{opacity:30%}.alignment button.selected{cursor:inherit}.alignment button.selected img{opacity:100%}.text-alignment{width:100px;display:flex;flex-direction:row;gap:8px;padding:4px 8px;font-size:14px;overflow:hidden}.text-alignment img{opacity:30%}.text-alignment button.selected{cursor:inherit}.text-alignment button.selected img{opacity:100%}.menu{display:flex;flex-direction:column;padding:10px;border:1px solid #ddd;background-color:#f9f9f9}.menu button{margin:5px 0}.frame-node{cursor:pointer;padding:5px;display:flex;align-items:center}.frame-node input{width:100%}.frame-children{margin-left:20px}.fold-button{height:16px;aspect-ratio:1;margin-right:5px;background:none;border:none;cursor:pointer;font-size:14px}.selected .fold-button,.child-selected .fold-button{color:#fff}.selected .frame-node{background-color:#202020;color:#fff}.child-selected .frame-node{background-color:#202020cb;color:#fff}.component-frame>.frame-node{color:#f0f}*{margin-block-start:0;margin-block-end:0;margin-inline-start:0;margin-inline-end:0;box-sizing:border-box}a{all:unset;cursor:pointer;text-transform:uppercase;font-size:12px;font-weight:700;color:var(--black)}ul{padding:0;padding-inline-start:0}ul li{list-style-type:none}h1,h2{color:var(--white)}h3{font-size:14px;font-weight:700;color:var(--white)}p,label{color:var(--white)}div[contentEditable]{all:unset;-webkit-appearance:none;-moz-appearance:textfield}input[type=text],input[type=number]{all:unset;padding:4px 0;-webkit-appearance:none;-moz-appearance:textfield;color:var(--white)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}input[type=checkbox]{width:14px!important;aspect-ratio:1;outline:none;border:1px solid var(--white);cursor:pointer;accent-color:var(--white);background-color:var(--black)}input[type=color]{-webkit-appearance:none;border:none;width:22.43px!important}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none}.right select{background-color:transparent;outline:none;border:none;font-size:14px;color:var(--white)}.right select option{color:var(--black)}.right button{all:unset;height:fit-content;display:flex;justify-content:center;align-items:center;cursor:pointer}.right button:focus{outline:1px solid var(--white-light);outline-offset:-1px}:root{font-family:Inter,Avenir,Helvetica,Arial,sans-serif}:root{--white: #FFFFFF;--white-medium: #FFFFFFB3;--white-light: #FFFFFF4C;--black: #202020;--blackUltraLight: #2020200D;--grey: #20202080;--grey-medium: #2020204D;--grey-light: #2020201A;--grey-ultra-light: #2020200D;--red: #DF1939;--green: #16BE63;--yellow: #FFC93E;--purple: #5934A4;--shadow-light: #0000001A;--shadow: #0000003F;--overlay: #20202099}