@keyframes introStage { 0%,100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-8px) rotate(1.2deg); } }
@keyframes flyEyesBlue { 0%,3% { transform: translate(0,0) rotate(-9deg); } 11%,36% { transform: translate(125px,68px) rotate(0deg); } 44%,100% { transform: translate(0,0) rotate(-9deg); } }
@keyframes flySmile { 0%,3% { transform: translate(0,0) rotate(11deg); } 12%,36% { transform: translate(-124px,-40px) rotate(0deg); } 44%,100% { transform: translate(0,0) rotate(11deg); } }
@keyframes flyShell { 0%,3% { transform: translate(0,0) rotate(-12deg); } 13%,36% { transform: translate(106px,-27px) rotate(0deg); } 44%,100% { transform: translate(0,0) rotate(-12deg); } }
@keyframes flyHat { 0%,50% { transform: translate(0,0) rotate(13deg); } 58%,86% { transform: translate(-114px,6px) rotate(0deg); } 94%,100% { transform: translate(0,0) rotate(13deg); } }
@keyframes flyEyesBrown { 0%,50% { transform: translate(0,0) rotate(-10deg); } 59%,86% { transform: translate(127px,-27px) rotate(0deg); } 94%,100% { transform: translate(0,0) rotate(-10deg); } }
@keyframes flyMouth { 0%,50% { transform: translate(0,0) rotate(14deg); } 60%,86% { transform: translate(-128px,18px) rotate(0deg); } 94%,100% { transform: translate(0,0) rotate(14deg); } }

.tool { cursor: pointer; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; border: 2px solid #e7e3f7; background: #fff; color: #4a3a68; }
.tool.on { border-color: #7b2ff2; background: #f6f2ff; color: #7b2ff2; }
#undoBtn:hover { border-color: #7b2ff2; color: #7b2ff2; }
.try-part { position: absolute; left: 0; top: 0; transform-origin: center center; user-select: none; touch-action: none; cursor: grab; filter: drop-shadow(0 4px 8px rgba(43,26,80,0.16)); outline-offset: 6px; }
.try-part.sel { outline: 2px dashed #7b2ff2; }
.drawing .try-part { pointer-events: none; cursor: inherit; }
#rotHandle { position: absolute; left: 0; top: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: #7b2ff2; color: #fff; display: flex; align-items: center; justify-content: center; cursor: grab; z-index: 9999; box-shadow: 0 8px 18px rgba(123,47,242,0.4); touch-action: none; }

@media (max-width: 900px) {
    #tryWrap { grid-template-columns: 1fr !important; }
}