#hero.hero-parts-ready .ar-tag { display: none; }
#hero.hero-parts-ready .hero-anchor h1,
#hero.hero-parts-ready .hero-anchor p { max-width: 52%; }
#hero-parts-stage {
  position: absolute;
  top: 6rem;
  bottom: 7rem;
  right: 2rem;
  width: 42%;
  z-index: 3;
  cursor: grab;
  touch-action: pan-y;
  visibility: hidden;
  pointer-events: none;
}
#hero.ar-active #hero-parts-stage { visibility: visible; pointer-events: auto; }
#hero-parts-stage.is-dragging { cursor: grabbing; }
#hero-parts-stage canvas { display: block; width: 100%; height: 100%; }
#hero-part-boxes { position: absolute; inset: 0; pointer-events: none; }
#hero-part-boxes * { pointer-events: none; }
.hero-part-box {
  --status-color: #00e5c3;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  scale: .65;
  transition: opacity .25s ease, scale .35s cubic-bezier(.2,1.5,.4,1);
  filter: drop-shadow(0 0 4px var(--status-color));
  background:
    linear-gradient(var(--status-color),var(--status-color)) top left/14px 2px no-repeat,
    linear-gradient(var(--status-color),var(--status-color)) top left/2px 14px no-repeat,
    linear-gradient(var(--status-color),var(--status-color)) top right/14px 2px no-repeat,
    linear-gradient(var(--status-color),var(--status-color)) top right/2px 14px no-repeat,
    linear-gradient(var(--status-color),var(--status-color)) bottom left/14px 2px no-repeat,
    linear-gradient(var(--status-color),var(--status-color)) bottom left/2px 14px no-repeat,
    linear-gradient(var(--status-color),var(--status-color)) bottom right/14px 2px no-repeat,
    linear-gradient(var(--status-color),var(--status-color)) bottom right/2px 14px no-repeat;
}
.hero-part-box.is-visible { opacity: 1; scale: 1; }
.hero-part-box[data-status="inspect"] { --status-color: #ffc247; }
.hero-part-box[data-status="deviation"] { --status-color: #ff5d6c; }
.hero-part-tag {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  max-width: 220px;
  white-space: normal;
  border: 1px solid var(--status-color);
  border-radius: 6px;
  padding: .45rem .65rem;
  background: rgba(4,18,15,.94);
  color: var(--status-color);
  font: 600 .875rem/1.5 ui-monospace, monospace;
}
.hero-part-tag strong {
  display: block;
  margin-top: .3rem;
  font-size: .9em;
  font-weight: 600;
}
.hero-part-tag small { display: block; font-size: .9em; font-weight: 400; color: #e2e8e6; }
.hero-part-box.flip .hero-part-tag { left: auto; right: calc(100% + 10px); }
@media (max-width: 820px) {
  #hero.hero-parts-ready .hero-anchor h1,
  #hero.hero-parts-ready .hero-anchor p { max-width: none; }
  #hero.hero-parts-ready .hero-anchor { padding-bottom: 0; }
  #hero.hero-parts-ready .hero-content { padding-bottom: 1rem; }
  #hero-parts-stage {
    position: relative;
    inset: auto;
    flex: 0 0 400px;
    height: 400px;
    width: 100%;
    margin-bottom: 5rem;
  }
  .hero-part-tag { max-width: 180px; font-size: .8125rem; padding: .35rem .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-part-box { transition: none; }
}