#body{display:flex;flex-direction:column;height:100vh}@media only screen and (min-width:1280px){#body{flex-direction:row}}[data-content]{display:none}[data-content].open{display:block}[data-container]{background:#fff;border-radius:8px}#main,[data-container]{display:flex;flex:1;flex-direction:column}#main{border-top:1px solid #e7e7e7;width:100%}@media only screen and (min-width:1280px){#main{background:#e7e7e7;border-top:0;overflow:hidden;overflow-y:scroll;padding:1rem}}#main [data-controls]{display:none;position:relative}@media only screen and (min-width:1280px){#main [data-controls]{align-items:center;border-bottom:1px solid #e7e7e7;display:flex;font-size:1rem;font-weight:400;gap:3rem;justify-content:center;padding:1rem}}#main [data-controls] [data-breakpoint],#main [data-controls] [data-copy-link],#main [data-controls] [data-default],#main [data-controls] [data-fullscreen]{align-items:center;cursor:pointer;display:flex;gap:.8rem;position:relative}#main [data-controls] [data-breakpoint] .icon,#main [data-controls] [data-copy-link] .icon,#main [data-controls] [data-default] .icon,#main [data-controls] [data-fullscreen] .icon{display:block;height:20px;pointer-events:none;width:20px}#main [data-controls] [data-breakpoint]:after,#main [data-controls] [data-copy-link]:after,#main [data-controls] [data-default]:after,#main [data-controls] [data-fullscreen]:after{background:#000;bottom:-1rem;content:"";height:3px;left:0;position:absolute;width:0}#main [data-controls] [data-breakpoint].active:after,#main [data-controls] [data-copy-link].active:after,#main [data-controls] [data-default].active:after,#main [data-controls] [data-fullscreen].active:after{width:100%}#main [data-controls] [data-default]{display:none;left:1.5rem;position:absolute;top:50%;transform:translateY(-50%)}#main [data-controls] [data-default] .icon{pointer-events:none;width:12px}#main [data-controls] [data-copy-link]{position:absolute;right:1.5rem;top:50%;transform:translateY(-50%)}#main #loader{height:100px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:100px}#main [data-content]{flex:1;height:100%;padding:3rem 0;position:relative}#main #canvas-wrapper{height:100%;left:0;position:absolute;top:0;width:100%}#main #canvas-wrapper>h2{font-size:1.2rem;margin:1.5rem 0 0;padding:0 2.5rem}@media only screen and (min-width:640px){#main #canvas-wrapper>h2{padding:0 3.5rem}}@media only screen and (min-width:768px){#main #canvas-wrapper>h2{padding:0 4.5rem}}#main #canvas{background-position:-1px -1px,-1px -1px,-1px -1px,-1px -1px;border:0;box-sizing:content-box;display:none;height:calc(100% - 5rem);left:50%;position:absolute;top:5rem;transform:translateX(-50%);transition:all .3s ease 0s,background-position 0s ease 0s,visibility 0s ease 0s;width:100%}#main #canvas.loaded{display:block}