@media(min-width:701px){
  main{grid-template-columns:var(--studio-panel-width,365px) 14px minmax(0,1fr)}
  main>aside{border-right:0}
  .studio-separator{position:sticky;top:0;height:min(760px,90dvh);min-height:240px;cursor:col-resize}
  .studio-separator::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:2px;background:#dce2ec}
  .studio-separator span{position:absolute;top:45%;left:2px;width:10px;height:52px;border:1px solid #bbc8dc;border-radius:8px;background:#fff;box-shadow:0 2px 5px #233a6510}
  .studio-separator span::after{content:"";position:absolute;inset:13px 3px;border-left:2px dotted #748198}
  .workspace{padding-left:clamp(14px,2vw,32px)}
}
.studio-separator{touch-action:none;z-index:5;outline-offset:-2px}
.studio-separator:hover span,.studio-separator:focus-visible span{background:#dbe9ff;border-color:#3987ed}
.studio-separator:focus-visible{outline:2px solid #3987ed}
.studio-resizing{user-select:none;cursor:col-resize}
.studio-resizing #canvas-host,.studio-resizing #flat{pointer-events:none}
.workspace-top,.view-switch{flex-wrap:wrap}
@media(max-width:700px){
  main>.workspace{order:-2;width:100%;min-width:0}
  .studio-separator{order:-1;position:relative;width:100%;height:28px;cursor:row-resize;background:#f4f6fa}
  .studio-separator::before{content:"";position:absolute;top:13px;left:18px;right:18px;height:2px;background:#dce2ec}
  .studio-separator span{position:absolute;left:calc(50% - 30px);top:7px;width:60px;height:14px;border:1px solid #bbc8dc;border-radius:8px;background:white}
  .studio-separator span::after{content:"";position:absolute;left:18px;right:18px;top:5px;border-top:2px dotted #748198}
  main>aside{width:100%}
  #stage,body:fullscreen #stage{height:var(--studio-stage-height,360px)}
  .studio-resizing{cursor:row-resize}
  .tools>div,.tools label{max-width:100%;flex-wrap:wrap}
}