.layout-container{display:flex;flex-direction:column;min-height:100vh}.layout-container>header{flex:0 0 auto}.layout-container>main{flex:1 1 0;display:flex;flex-direction:column}.component-main{background-color:var(--main-900)}#console-panel{display:none}.mainview-content{color:var(--main-100);background:var(--main-900);overflow-x:clip;max-width:100vw;flex:1;overflow:hidden}.mainview-main{display:flex;flex-direction:column;justify-content:flex-start;gap:0px;padding:0}@media(min-width:801px){.mainview-content{display:grid;grid-template-columns:1fr var(--controls-width);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"main properties" "code properties";gap:0px;align-items:stretch}.mainview-main{grid-area:main;min-height:0}.mainview-bottom-panel{display:contents}.mainview-bottom-tabs{display:none}.mainview-bottom-body{display:contents}.mainview-bottom-tab-panel{min-height:0}.mainview-bottom-tab-panel--properties{grid-area:properties;display:flex;flex-direction:column;overflow:hidden}.mainview-bottom-tab-panel--properties .properties-panel{flex:1 1 0;min-height:0;overflow-y:auto}.mainview-bottom-tab-panel--code{grid-area:code;display:flex;flex-direction:column;min-height:0}.mainview-bottom-tab-panel--code #mainview-code-block{flex:1 1 auto;min-height:0;overflow:auto}.mainview-bottom-tab-panel--code console-panel{flex:1 1 auto;min-height:0}}.mainview-main-component{background-color:var(--main-800);display:grid;grid-template-columns:auto 1fr;align-items:stretch;transition:var(--global-transition);flex:1 1 0;min-height:300px}.mainview-component{display:flex;justify-content:center;align-items:center;overflow:clip;transition:var(--global-transition)}.mainview-main-component .component-palette{display:flex;flex-direction:column;width:20px;height:100%}.mainview-component-html{display:flex;align-items:center;align-content:center;justify-content:center;overflow:auto}.mainview-component-dark{background:var( --dark-600);background-size:var(--component-square-size) var(--component-square-size);background-color:var(--component-dark-bg);background-image:repeating-conic-gradient(var(--component-dark-square) 0deg 90deg,var(--component-dark-bg) 90deg 180deg)}.mainview-component-light{background:var( --light-900);background-size:var(--component-square-size) var(--component-square-size);background-color:var(--component-light-bg);background-image:repeating-conic-gradient(var(--component-light-square) 0deg 90deg,var(--component-light-bg) 90deg 180deg)}.mainview-code-block{background:var(--code-bg)}