/* Shared Creator UX: keep artwork visible while side tools scroll independently. */
@media (min-width: 1001px){
  /* Chuck & Duck */
  #builder{align-items:start;}
  #builder .builder-rail,
  #builder .editor-panel{
    position:sticky;
    top:88px;
    max-height:calc(100vh - 106px);
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }
  #builder .canvas-zone{
    position:sticky;
    top:88px;
    align-self:start;
    max-height:calc(100vh - 106px);
    overflow:hidden;
  }
  #builder .canvas-shell{
    height:min(650px,calc(100vh - 180px));
  }
  #builder .canvas-shell canvas{
    max-height:min(650px,calc(100vh - 180px));
  }

  /* Kay-Cee */
  #create .studio{align-items:start;}
  #create .studio>aside{
    position:sticky;
    top:94px;
    max-height:calc(100vh - 112px);
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }
  #create .studio>.canvas-wrap{
    position:sticky;
    top:94px;
    align-self:start;
    max-height:calc(100vh - 112px);
    overflow:hidden;
  }
  #create .studio>.canvas-wrap canvas{
    max-height:calc(100vh - 175px);
  }
}

/* Provenza uses the same .studio/.controls structure; override its existing sticky controls cleanly. */
@media (min-width:1101px){
  .create .studio{align-items:start;}
  .create .studio>.controls{
    position:sticky;
    top:94px;
    max-height:calc(100vh - 112px);
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }
  .create .studio>.canvas-wrap{
    position:sticky;
    top:94px;
    align-self:start;
    max-height:calc(100vh - 112px);
    overflow:hidden;
  }
  .create .studio>.canvas-wrap canvas{
    max-height:calc(100vh - 175px);
  }
}

/* Visible but discreet vertical scrollbars for tool rails. */
#builder .builder-rail::-webkit-scrollbar,
#builder .editor-panel::-webkit-scrollbar,
#create .studio>aside::-webkit-scrollbar,
.create .studio>.controls::-webkit-scrollbar{width:8px;}
#builder .builder-rail::-webkit-scrollbar-track,
#builder .editor-panel::-webkit-scrollbar-track,
#create .studio>aside::-webkit-scrollbar-track,
.create .studio>.controls::-webkit-scrollbar-track{background:transparent;}
#builder .builder-rail::-webkit-scrollbar-thumb,
#builder .editor-panel::-webkit-scrollbar-thumb,
#create .studio>aside::-webkit-scrollbar-thumb,
.create .studio>.controls::-webkit-scrollbar-thumb{background:rgba(140,140,140,.42);border-radius:999px;border:2px solid transparent;background-clip:padding-box;}
#builder .builder-rail,
#builder .editor-panel,
#create .studio>aside,
.create .studio>.controls{scrollbar-width:thin;scrollbar-color:rgba(140,140,140,.42) transparent;}

@media (max-width:1000px){
  #builder .builder-rail,#builder .editor-panel,#builder .canvas-zone,
  #create .studio>aside,#create .studio>.canvas-wrap,
  .create .studio>.controls,.create .studio>.canvas-wrap{
    position:static;
    max-height:none;
    overflow:visible;
  }
}