/* Browser-native scrolling: preserve wheel, touch momentum, canvas zoom and timelines. */
html{scroll-behavior:smooth}
:is(dialog,[role=dialog],.ue-left,.ue-right,.fp-panel,.site-dialog-content,.auth-dialog-inner,.inspiration-editor,.discover-editor){scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
@media(prefers-reduced-motion:reduce){html,:is(dialog,[role=dialog],.ue-left,.ue-right,.fp-panel,.site-dialog-content,.auth-dialog-inner,.inspiration-editor,.discover-editor){scroll-behavior:auto!important}}
/* Large backdrop blurs behind long scrollers are expensive on phones. */
@media(max-width:760px){html[data-acbs-style=minimal] :is(.discover-card,.discover-comments,.site-dialog,.auth-dialog,.inspiration-card){backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}
:where(.page,dialog,[role=dialog]) :where([class*=scroll],[class*=panel],[class*=sidebar],[class*=settings]){scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
:where(.ve-timeline,.timeline,.ue-timeline,[class*=timeline]){scroll-behavior:auto}
@media(prefers-reduced-motion:reduce){:where(.page,dialog,[role=dialog]) :where([class*=scroll],[class*=panel],[class*=sidebar],[class*=settings]){scroll-behavior:auto!important}}
html[data-acbs-style=minimal] dialog::backdrop{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.acbs-reduce-motion,html.acbs-reduce-motion :where(dialog,[role=dialog],[class*=scroll],[class*=panel],[class*=sidebar],[class*=settings]){scroll-behavior:auto!important}

:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-sidebar:525ms;--motion-page:350ms;--motion-panel:320ms;--motion-accordion:280ms;--motion-menu:190ms;--motion-dialog:250ms;--motion-tab:220ms;--motion-interactive:150ms;--motion-toast:250ms;--motion-distance:8px}
/* Target interface chrome only. Media, canvases and generated artwork are excluded. */
html[data-interface-motion] :is(.btn,.ue-button,.ed-button,.ab-action,.dash-filters button,.site-nav button,.workspace-sidebar a,.workspace-sidebar button,[role=tab]){transition:background-color var(--motion-interactive) var(--motion-ease),color var(--motion-interactive) var(--motion-ease),border-color var(--motion-interactive) var(--motion-ease),box-shadow var(--motion-interactive) var(--motion-ease)!important}
html[data-interface-motion] :is(.dash-tool-card,.shop-live-card,.tutorial-card){transition:border-color var(--motion-interactive) var(--motion-ease),box-shadow var(--motion-interactive) var(--motion-ease)!important}
html[data-interface-motion] :is(.ue-workspace,.acbs-edit-workspace,.ve-workspace,.vy-layout){transition:grid-template-columns var(--motion-panel) var(--motion-ease)!important}
html[data-interface-motion] :is(.vy-panel,.ms-parts-board){transition:grid-template-rows var(--motion-panel) var(--motion-ease),max-height var(--motion-panel) var(--motion-ease)!important}
html[data-interface-motion] :is(.vy-panel-inner,.ref-panel){transition:opacity var(--motion-panel) var(--motion-ease),width var(--motion-panel) var(--motion-ease)!important}
html[data-interface-motion] .workspace-sidebar .workspace-label{transition:opacity var(--motion-menu) var(--motion-ease),max-width var(--motion-sidebar) var(--motion-ease),transform var(--motion-sidebar) var(--motion-ease)!important}
html[data-interface-motion][data-workspace-shell] .workspace-sidebar{transition:padding var(--motion-sidebar) var(--motion-ease)!important}
html[data-interface-motion] .workspace-sidebar [data-dash-collapse] svg{transition:transform var(--motion-sidebar) var(--motion-ease)!important}
@media(max-width:760px){html[data-interface-motion][data-workspace-shell] .workspace-sidebar{transition:transform var(--motion-sidebar) var(--motion-ease)!important}}
/* Native top-layer exits where discrete transitions are supported. Older engines close immediately. */
@supports(transition-behavior:allow-discrete){
 html[data-interface-motion] dialog{transition:opacity var(--motion-dialog) var(--motion-ease),transform var(--motion-dialog) var(--motion-ease),display var(--motion-dialog) allow-discrete,overlay var(--motion-dialog) allow-discrete!important;opacity:0;transform:translateY(var(--motion-distance))}
 html[data-interface-motion] dialog[open]{opacity:1;transform:translateY(0)}
 html[data-interface-motion] dialog::backdrop{transition:opacity var(--motion-dialog) var(--motion-ease),display var(--motion-dialog) allow-discrete,overlay var(--motion-dialog) allow-discrete;opacity:0}html[data-interface-motion] dialog[open]::backdrop{opacity:1}
 @starting-style{html[data-interface-motion] dialog[open],html[data-interface-motion] dialog[open]::backdrop{opacity:0}}
}
html[data-interface-motion] .dash-grid.motion-filter-enter{animation:acbs-filter-enter var(--motion-tab) var(--motion-ease)}
@keyframes acbs-filter-enter{from{opacity:.7}to{opacity:1}}
@media(prefers-reduced-motion:reduce){:root{--motion-sidebar:0ms!important;--motion-page:0ms!important;--motion-panel:0ms!important;--motion-accordion:0ms!important;--motion-menu:0ms!important;--motion-dialog:0ms!important;--motion-tab:0ms!important;--motion-interactive:0ms!important;--motion-toast:0ms!important;--motion-distance:0px!important}}
html[data-interface-motion=off]{--motion-sidebar:0ms;--motion-page:0ms;--motion-panel:0ms;--motion-accordion:0ms;--motion-menu:0ms;--motion-dialog:0ms;--motion-tab:0ms;--motion-interactive:0ms;--motion-toast:0ms;--motion-distance:0px}
/* Keep the same track count during shared desktop editor collapse. Floating reference
   workspaces keep their native layout and use the panel lifecycle fade instead. */
@media(min-width:1001px){
 html[data-interface-motion] body #mainContent .editing-studio .ue-workspace:not(.ve):not(.ref-workspace)[data-ue-columns=three]{grid-template-columns:var(--motion-left,var(--ed-left,240px)) minmax(0,1fr) var(--motion-right,var(--ed-right,240px))!important}
 html[data-interface-motion] body #mainContent .editing-studio .ue-workspace:not(.ve):not(.ref-workspace)[data-ue-columns=left]{grid-template-columns:var(--motion-left,var(--ed-left,240px)) minmax(0,1fr)!important}
 html[data-interface-motion] body #mainContent .editing-studio .ue-workspace:not(.ve):not(.ref-workspace)[data-ue-columns=right]{grid-template-columns:minmax(0,1fr) var(--motion-right,var(--ed-right,240px))!important}
 html[data-interface-motion] body #mainContent .editing-studio .ue-workspace.ed-hide-left{--motion-left:0px}
 html[data-interface-motion] body #mainContent .editing-studio .ue-workspace.ed-hide-right{--motion-right:0px}
 html[data-interface-motion] body #mainContent .editing-studio .ue-workspace:not(.ve):not(.ref-workspace):is([data-ue-columns=three],[data-ue-columns=left])>.ue-center{grid-column:2!important}
 html[data-interface-motion] body #mainContent .editing-studio .ue-workspace:not(.ve):not(.ref-workspace)[data-ue-columns=three]>.ue-right{grid-column:3!important}
}

html[data-interface-motion=off],html[data-interface-motion=off] :is(dialog,[role=dialog],.ue-left,.ue-right,.fp-panel,.site-dialog-content,.auth-dialog-inner,.inspiration-editor,.discover-editor){scroll-behavior:auto!important}
html[data-interface-motion] #vyWebGL{transition:opacity var(--motion-panel) var(--motion-ease)!important}

/* A typed inherited width lets the browser interpolate the whole application shell.
   Physical-property fallback is for engines without custom-property registration. */
@media(min-width:761px){
 html[data-workspace-shell][data-workspace-motion-ready][data-workspace-width-motion=typed]{transition:--ws-size var(--motion-sidebar,525ms) var(--motion-ease,cubic-bezier(.22,1,.36,1))!important}
 html[data-workspace-shell][data-workspace-motion-ready][data-workspace-width-motion=typed] :is(#mainContent.app,.site-nav){transition:none!important}
 html[data-workspace-shell][data-workspace-motion-ready][data-workspace-width-motion=physical] .workspace-sidebar{transition:width var(--motion-sidebar,525ms) var(--motion-ease),padding var(--motion-sidebar,525ms) var(--motion-ease)!important}
 html[data-workspace-shell][data-workspace-motion-ready][data-workspace-width-motion=physical] #mainContent.app{transition:margin-left var(--motion-sidebar,525ms) var(--motion-ease),width var(--motion-sidebar,525ms) var(--motion-ease)!important}
 html[data-workspace-shell][data-workspace-motion-ready][data-workspace-width-motion=physical] .site-nav{transition:margin-left var(--motion-sidebar,525ms) var(--motion-ease),max-width var(--motion-sidebar,525ms) var(--motion-ease)!important}
 html[data-workspace-shell][data-workspace-motion-ready][data-workspace-width-motion=physical] #mainContent :is(.ref-workspace:not([hidden]),.acbs-edit-workspace.ed-focus){transition:left var(--motion-sidebar,525ms) var(--motion-ease)!important}
}
/* The shell needs balanced acceleration: an ease-out completes most travel too
   early and makes a 525ms transition feel like an immediate jump. */
html[data-interface-motion]{--motion-shell-ease:cubic-bezier(.4,0,.2,1)}
@media(min-width:761px){
 html[data-workspace-shell][data-workspace-motion-ready][data-workspace-width-motion=typed]{transition:--ws-size var(--motion-sidebar,550ms) var(--motion-shell-ease)!important}
 html[data-workspace-shell][data-workspace-motion-ready] .workspace-sidebar{transition:padding var(--motion-sidebar) var(--motion-shell-ease)!important}
 html[data-workspace-shell][data-workspace-motion-ready] .workspace-sidebar :is(a,button){justify-content:flex-start!important;transition:padding var(--motion-sidebar) var(--motion-shell-ease),gap var(--motion-sidebar) var(--motion-shell-ease),background-color var(--motion-interactive) var(--motion-ease),color var(--motion-interactive) var(--motion-ease)!important}
 html[data-workspace-shell][data-workspace-motion-ready] .workspace-sidebar .workspace-start{justify-content:flex-start!important}
 html[data-workspace-shell] .workspace-sidebar .workspace-brand{height:40px!important;min-height:40px!important;flex:none!important;overflow:hidden!important}
 html[data-workspace-shell] .workspace-sidebar .workspace-brand .acbs-wordmark{height:40px!important;max-height:40px!important;object-fit:contain!important;object-position:left center!important}
 html[data-workspace-shell][data-workspace-motion-ready] .workspace-sidebar .workspace-label{display:inline-block!important;transition:opacity var(--motion-sidebar) var(--motion-shell-ease),max-width var(--motion-sidebar) var(--motion-shell-ease),transform var(--motion-sidebar) var(--motion-shell-ease)!important}
 html[data-workspace-shell][data-workspace-collapsed=true] .workspace-sidebar .workspace-label{display:inline-block!important;max-width:0!important}
 html[data-workspace-shell][data-workspace-motion-ready][data-workspace-width-motion=physical] .workspace-sidebar{transition:width var(--motion-sidebar) var(--motion-shell-ease),padding var(--motion-sidebar) var(--motion-shell-ease)!important}
 html[data-workspace-shell][data-workspace-motion-ready][data-workspace-width-motion=physical] #mainContent.app{transition:margin-left var(--motion-sidebar) var(--motion-shell-ease),width var(--motion-sidebar) var(--motion-shell-ease)!important}
}