/* L7 articulated motion proof. All styling is scoped to the preview stage. */
#stage {
  --hero-width: 200px;
  --hero-height: 300px;
  --l7-scene-accent: #b7d1c6;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 460px;
  contain: layout paint;
}
#stage #work-panel { z-index: 3; will-change: rotate; filter: drop-shadow(var(--panel-lean-shadow, 3px) 14px 14px rgb(0 0 0 / .16)); }
#stage #hero {
  position: absolute;
  inset: 0 auto auto 0;
  width: var(--hero-width);
  height: var(--hero-height);
  z-index: 2;
  pointer-events: none;
  user-select: none;
  transform-origin: 0 0;
  opacity: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 14px 9px rgb(0 0 0 / .22));
}
#stage #hero *, #stage #code-thread { pointer-events: none; }
#stage #hero img, #stage #hero svg { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
#stage #hero-body, #stage #hero-head, #stage #hero-arm-left,
#stage #hero-arm-right, #stage #hero-cape, #stage #hero-leg-left,
#stage #hero-leg-right { position: absolute; will-change: transform; backface-visibility: hidden; }
#stage #hero-body { left: 49px; top: 88px; width: 102px; height: 136px; transform-origin: 50% 92%; z-index: 3; }
#stage #hero-head { left: 48px; top: 0; width: 104px; height: 104px; transform-origin: 50% 90%; z-index: 5; }
#stage #hero-arm-left { left: 20px; top: 99px; width: 42px; height: 132px; transform-origin: 50% 9%; z-index: 2; }
#stage #hero-arm-right { left: 138px; top: 99px; width: 42px; height: 132px; transform-origin: 50% 9%; z-index: 6; }
#stage #hero-leg-left { left: 54px; top: 207px; width: 43px; height: 91px; transform-origin: 50% 10%; z-index: 1; }
#stage #hero-leg-right { left: 106px; top: 207px; width: 43px; height: 91px; transform-origin: 50% 10%; z-index: 2; }
#stage #hero-cape { left: 27px; top: 74px; width: 146px; height: 169px; transform-origin: 50% 6%; z-index: 0; }
#stage #repair-tile { position: relative; transform-origin: 50% 50%; will-change: transform; }
#stage #repair-tile::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  pointer-events: none; border: 1px solid rgb(183 209 198 / .65);
  opacity: var(--repair-glow, 0); box-shadow: 0 0 20px rgb(183 209 198 / .12);
}
#stage #code-thread {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  z-index: 4; opacity: 0; fill: none;
}
#stage #code-thread path {
  stroke: var(--l7-scene-accent); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px rgb(183 209 198 / .22));
}
#stage[data-scene-state='inspect'] #repair-tile { --repair-glow: .7; }
#stage[data-scene-state='retreat'] #repair-tile { --repair-glow: .2; }
@media (max-width: 640px) {
  #stage { min-height: 430px; }
}
@media (prefers-reduced-motion: reduce) {
  #stage #hero, #stage #repair-tile { will-change: auto; }
}