/* The auto-played builder (builder-live.js): what the demo adds around the
   builder's own look (builder-real.css). The page sets the demo's height. */
.bdx-demo{position:relative;text-align:left;user-select:none;-webkit-user-select:none;transition:opacity .3s ease}
.bdx-demo.out{opacity:0}
/* the editor fills the demo; its palette and script scroll inside it, or on
   a phone the editor scrolls as one, as the builder's page would */
.bdx-demo > .bdx{height:100%;min-height:0;box-shadow:0 40px 100px -40px rgba(0,0,0,.7);isolation:isolate}
.bdx-demo > .bdx:not(.narrow) > .bx-pal,
.bdx-demo > .bdx:not(.narrow) > .bx-script{max-height:none}
.bdx-demo .bx-pal,.bdx-demo .bx-script,.bdx-demo > .bdx{scrollbar-width:none}
.bdx-demo .bx-pal::-webkit-scrollbar,.bdx-demo .bx-script::-webkit-scrollbar,.bdx-demo > .bdx::-webkit-scrollbar{display:none}
.bdx-demo .bx-script{padding-bottom:120px}
/* on a phone the script is as tall as its blocks, never a little scroller of
   its own under the palette: the editor scrolls as one, as the builder's page does */
.bdx-demo > .bdx.narrow > .bx-script{flex:1 0 auto;overflow:visible}
.bdx-demo textarea{resize:none}

/* the hand's layer: the drag ghost, drawn over the editor */
.bdx-layer{position:absolute;inset:0;z-index:20;pointer-events:none;overflow:hidden;border-radius:var(--r)}
.bdx-layer .bx-ivr-ghost{position:absolute;left:0;top:0}
.bdx-hand{position:absolute;left:0;top:0;z-index:30;width:22px;height:22px;pointer-events:none;opacity:0;color:#fff;
  transition:transform .55s cubic-bezier(.45,.05,.2,1),opacity .25s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.bdx-hand.fast{transition:opacity .25s}

/* a block landing, a field taking a variable, a popup opening */
.bdx-pop{animation:bdxpop .34s cubic-bezier(.16,1,.3,1) both}
@keyframes bdxpop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.bdx-flash{animation:bdxflash .6s ease}
@keyframes bdxflash{from{filter:brightness(1.35)}to{filter:none}}

@media(prefers-reduced-motion:reduce){ .bdx-hand{display:none} .bdx-pop,.bdx-flash{animation:none} }