/* Keep the stage independent of the height of the settings columns. */
[hidden]{display:none!important}
.layout{grid-template-columns:270px minmax(0,1fr) 285px;align-items:start}
.side,.workspace{min-width:0}
.workspace{position:sticky;top:12px;min-height:300px;height:calc(100dvh - 240px);max-height:850px;z-index:2}
.canvaswrap{min-height:0;flex:1}
canvas{width:100%;height:100%;max-height:100%;object-fit:contain;box-shadow:none}
.tabs{flex-wrap:wrap}
.tabs div{flex-wrap:wrap}
.tab{padding:8px;font-size:11px}
.workspace .note{margin-top:12px;padding-top:10px}
.stats{gap:8px 16px}
summary{cursor:pointer;line-height:1.5}
summary.sectiontitle{margin:0}
details[open]>summary{margin-bottom:17px}
.hatch-layer{border-top:1px solid #3a3a35;padding-top:12px;margin-top:12px}
.hatch-layer summary{font-size:13px;font-weight:700}
.hatch-layer .control:last-child{margin-bottom:0}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid #eeeae0;outline-offset:3px}
@media(min-width:1201px){main{max-width:1800px}}
@media(min-width:701px) and (max-width:1200px){
 .layout{grid-template-columns:270px minmax(0,1fr)}
 .side:not(.right){grid-column:1;grid-row:1}
 .right{grid-column:1;grid-row:2}
 .workspace{grid-column:2;grid-row:1 / span 2}
}
@media(max-width:700px){
 html{scroll-padding-top:calc(44svh + 24px)}
 .layout{display:flex;flex-direction:column}
 .side{width:100%}
 .workspace{order:-1;width:100%;top:6px;height:44svh;min-height:230px;max-height:390px;padding:10px;box-shadow:0 5px 18px #0008}
 .tabs{gap:5px;margin-bottom:6px}
 .tabs div{gap:3px}
 .tab{font-size:10px;padding:6px}
 #demo{padding:6px;font-size:11px}
 .stats{font-size:10px;gap:4px 10px;padding-top:6px}
 .workspace .note{font-size:10px;line-height:1.3;margin-top:6px;padding-top:6px}
 .canvaswrap{min-height:0}
 .top{align-items:start}
 main{padding-bottom:80px}
}