.stage {
  height: 200px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #e7f4f2, #f3ead9); border-radius: 16px; margin-bottom: 18px; overflow: hidden;
}
.anim-box { width: 70px; height: 70px; border-radius: 16px; background: var(--primary); }
input[type="range"] { width: 100%; accent-color: var(--primary); }
.code {
  margin-top: 14px; background: #16181d; color: #e7f4f2; padding: 14px;
  border-radius: 10px; font-size: 0.82rem; white-space: pre-wrap;
}

@keyframes tb-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-40px); } }
@keyframes tb-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.3); } }
@keyframes tb-spin { to { transform: rotate(360deg); } }
@keyframes tb-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-12px); } 75% { transform: translateX(12px); } }
@keyframes tb-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes tb-flip { to { transform: rotateY(360deg); } }