#apip-root .controls { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
#apip-root button { border: 1px solid #d975b8; border-radius: 22px; background: #281020; color: #fff; padding: 10px 18px; font: inherit; cursor: pointer; }
#apip-root button:hover { background: #451634; }
#apip-root button:focus-visible { outline: 3px solid #ffe65c; outline-offset: 4px; }
#apip-root button:disabled { opacity: .45; cursor: wait; }
#apip-play { background: #a8236e; font-weight: 700; box-shadow: 0 0 22px #ee479b44; }
#apip-stage { position: relative; height: min(58vw, 520px); min-height: 310px; margin: 12px auto; overflow: hidden; border-block: 1px solid #211321; isolation: isolate; }
#apip-flight-path { position: absolute; left: 50%; top: 50%; width: min(44vw, 270px); height: min(44vw, 270px); transform: translate(-50%, -50%); transform-origin: center; }
#apip-pip { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; pointer-events: none; }
#apip-flight-path.folding { animation: apip-fold-paper 2.4s ease-in-out forwards; }
#apip-flight-path.unfolding { animation: apip-unfold-bat 1.4s ease-in-out forwards; }
#apip-flight-path.flying { animation: apip-first-flight 6s ease-in-out forwards; }
#apip-flight-path.approaching { animation: apip-fly-towards 2.4s ease-in forwards; }
#apip-flight-path.impact { animation: apip-hit-screen .45s ease-out forwards; }
#apip-flight-path.sliding { animation: apip-slide-down 3.3s ease-in forwards; }
#apip-crash { position: absolute; inset: 0; display: grid; place-items: center; color: #ffe65c; font-size: clamp(36px, 11vw, 86px); font-weight: 900; letter-spacing: .08em; opacity: 0; transform: rotate(-9deg) scale(.7); pointer-events: none; }
#apip-crash { z-index: 2; text-shadow: 3px 3px 0 #8c245e, 0 0 16px #000; }
#apip-crash.visible { animation: apip-crash-word 1.7s ease-out forwards; }
#apip-status { min-height: 1.6em; color: #f2b9df; }
#apip-caption { min-height: 1.6em; color: #ffe9a0; font-size: clamp(18px, 3vw, 25px); }
@keyframes apip-fold-paper {
  0% { transform: translate(-50%, -50%) perspective(700px) rotateY(0) rotateZ(0); }
  38% { transform: translate(-50%, -50%) perspective(700px) rotateY(65deg) rotateZ(-18deg) scale(.92); }
  72% { transform: translate(-50%, -50%) perspective(700px) rotateY(165deg) rotateZ(12deg) scale(.84); }
  100% { transform: translate(-50%, -50%) perspective(700px) rotateY(180deg) rotateZ(0) scale(.9); }
}
@keyframes apip-unfold-bat {
  from { transform: translate(-50%, -50%) perspective(700px) rotateY(180deg) scale(.9); }
  to { transform: translate(-50%, -50%) perspective(700px) rotateY(360deg) scale(1); }
}
@keyframes apip-first-flight {
  0%, 100% { transform: translate(-50%, -50%) rotate(0); }
  20% { transform: translate(-62%, -72%) rotate(-9deg) scale(.92); }
  42% { transform: translate(-34%, -92%) rotate(8deg) scale(.82); }
  64% { transform: translate(-58%, -77%) rotate(-6deg) scale(.9); }
  82% { transform: translate(-44%, -63%) rotate(4deg) scale(.96); }
}
@keyframes apip-fly-towards {
  from { transform: translate(-50%, -50%) scale(1); }
  to { transform: translate(-50%, -50%) scale(1.65); }
}
@keyframes apip-hit-screen {
  0% { transform: translate(-50%, -50%) scale(1.65); }
  35% { transform: translate(-50%, -50%) scale(1.88, 1.38); }
  65% { transform: translate(-50%, -50%) scale(1.72, 1.57); }
  100% { transform: translate(-50%, -50%) scale(1.8, 1.48); }
}
@keyframes apip-slide-down {
  0% { transform: translate(-50%, -50%) scale(1.8, 1.48); opacity: 1; }
  24% { transform: translate(-50%, -43%) scale(1.8, 1.48); }
  58% { transform: translate(-50%, 10%) scale(1.8, 1.48); opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translate(-50%, 700px) scale(1.8, 1.48); opacity: 0; }
}
@keyframes apip-crash-word { 0% { opacity: 0; transform: rotate(-9deg) scale(.7); } 12% { opacity: 1; transform: rotate(-9deg) scale(1.15); } 25%, 75% { opacity: 1; transform: rotate(-9deg) scale(1); } 100% { opacity: 0; transform: rotate(-9deg) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  #apip-flight-path { animation: none !important; }
  #apip-crash.visible { animation: none; }
  #apip-flight-path.impact { transform: translate(-50%, -50%) scale(1.8, 1.48); }
  #apip-crash.visible { opacity: 1; }
}
@media (max-width: 500px) { #apip-stage { min-height: 270px; } }

#apip-root{width:100%;max-width:760px;margin:24px auto;text-align:center;color:#eee;font:17px/1.5 system-ui,sans-serif;container-type:inline-size}#apip-root,#apip-root *{box-sizing:border-box}#apip-root [hidden]{display:none!important}#apip-root #apip-flight-path{width:min(44vw,270px,52cqw);height:min(44vw,270px,52cqw)}