/* Only the grid slots change size. Panels keep their content width while
   sliding offscreen, so thumbnails, tabs and controls never reflow in motion. */
@media(min-width:801px){
 .library-sidebar{width:var(--library-panel-width,264px);justify-self:start}
 .sidebar{width:var(--controls-panel-width,286px);justify-self:end}
 .studio-panel{scrollbar-gutter:stable}
 .app[data-panel-motion=true]{transition:grid-template-columns 260ms cubic-bezier(.22,1,.36,1)}
 .app[data-panel-motion=true] .library-sidebar,.app[data-panel-motion=true] .sidebar{transition:transform 260ms cubic-bezier(.22,1,.36,1)}
 .library-sidebar,.sidebar{transform:translateX(0)}
 .app[data-left-collapsed=true] .library-sidebar{visibility:visible;transform:translateX(-100%)}
 .app[data-right-collapsed=true] .sidebar{visibility:visible;transform:translateX(100%)}
 .app.resizing,.app.resizing .library-sidebar,.app.resizing .sidebar{transition:none!important}
 .control-section[data-motion-open=false]>summary::after{transform:rotate(-45deg)}
 .control-section[data-motion-open=true]>summary::after{transform:rotate(45deg) translate(-1px,-1px)}
}
@media(prefers-reduced-motion:reduce){
 .app,.library-sidebar,.sidebar,.control-section>summary::after{transition:none!important}
}