html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: transparent;
  font-family: "Segoe UI", system-ui, sans-serif;
}

#stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 180px;
  min-height: 220px;
  color: #f2f3f5;
  --accent: #38e0c4;
}

#character {
  position: absolute;
  inset: 0;
  transform-origin: 50% 94%;
}

#preview,
#puppet {
  position: absolute;
  right: -8%;
  bottom: 2%;
  width: 112%;
  height: 112%;
  user-select: none;
  pointer-events: none;
}

#preview {
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 20px 24px rgba(0, 0, 0, .46));
  animation: fallbackIdle 3.1s ease-in-out infinite;
}

#puppet {
  display: none;
  right: -2%;
  bottom: -18%;
  width: 104%;
  height: auto;
  aspect-ratio: 2 / 3;
  transform-origin: 50% 40%;
  filter: drop-shadow(0 20px 24px rgba(0, 0, 0, .46));
  animation: puppetRootIdle 4.8s ease-in-out infinite;
}

.has-puppet #preview {
  display: none;
}

.has-puppet #puppet {
  display: block;
}

.puppet-part,
.puppet-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
  will-change: transform, opacity;
}
.puppet-frame {
  opacity: 0;
  z-index: 1;
  transform-origin: 50% 40%;
  transition-property: opacity, transform;
  transition-duration: 180ms;
  transition-timing-function: cubic-bezier(.22,.84,.32,1);
}

.puppet-frame.is-active {
  opacity: 1;
}

.puppet-frame.is-exiting {
  opacity: 0;
}

#puppet[data-mode="pose-sequence"] .puppet-part {
  display: none;
}

#bubble {
  display: none;
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  min-height: 20px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, rgba(255,255,255,.12));
  border-radius: 8px;
  background: rgba(18,18,22,.84);
  color: #d7d9df;
  font-size: 12px;
  line-height: 1.35;
  box-shadow: 0 12px 24px rgba(0,0,0,.22);
  overflow: hidden;
  text-overflow: ellipsis;
}

.puppet-part[data-bone="base"] {
  animation: baseUpperIdle 4.8s ease-in-out infinite;
}

.puppet-part[data-bone="head"] {
  animation: headIdle 3.4s ease-in-out infinite;
}

.puppet-part[data-bone="neck"] {
  animation: neckIdle 3.4s ease-in-out infinite;
}

.puppet-part[data-bone="chest"] {
  animation: chestBreath 3.8s ease-in-out infinite;
}

.puppet-part[data-bone="pelvis"] {
  animation: pelvisIdle 3.8s ease-in-out infinite;
}

.puppet-part[data-bone="upperarm_l"],
.puppet-part[data-bone="forearm_l"],
.puppet-part[data-bone="hand_l"] {
  animation: armLeftIdle 3.6s ease-in-out infinite;
}

.puppet-part[data-bone="upperarm_r"],
.puppet-part[data-bone="forearm_r"],
.puppet-part[data-bone="hand_r"] {
  animation: armRightIdle 3.6s ease-in-out infinite;
}

.puppet-part[data-bone^="thigh_"],
.puppet-part[data-bone^="shin_"],
.puppet-part[data-bone^="foot_"] {
  animation: legIdle 4.2s ease-in-out infinite;
}

#stage[data-state="thinking"] #puppet {
  animation: puppetRootThinking 1.35s ease-in-out infinite;
}

#stage[data-state="thinking"] .puppet-part[data-bone="base"] {
  animation: baseUpperThinking 1.8s ease-in-out infinite;
}

#stage[data-state="thinking"] .puppet-part[data-bone="head"] {
  animation: headThinking 1.35s ease-in-out infinite;
}

#stage[data-state="thinking"] .puppet-part[data-bone="chest"] {
  animation: chestThinking 1.35s ease-in-out infinite;
}

#stage[data-state="thinking"] .puppet-part[data-bone="hand_l"],
#stage[data-state="thinking"] .puppet-part[data-bone="hand_r"] {
  animation: handThinking 1.35s ease-in-out infinite;
}

#stage[data-state="success"] {
  --accent: #4fd08a;
}

#stage[data-state="success"] #puppet {
  animation: puppetRootSuccess 1.7s cubic-bezier(.2,.9,.24,1) infinite;
}

#stage[data-state="success"] .puppet-part[data-bone="base"] {
  animation: baseUpperSuccess 1.7s cubic-bezier(.2,.9,.24,1) infinite;
}

#stage[data-state="success"] .puppet-part[data-bone="head"] {
  animation: headSuccess 1.7s cubic-bezier(.2,.9,.24,1) infinite;
}

#stage[data-state="success"] .puppet-part[data-bone="upperarm_l"],
#stage[data-state="success"] .puppet-part[data-bone="forearm_l"],
#stage[data-state="success"] .puppet-part[data-bone="hand_l"] {
  animation: armLeftSuccess 1.7s cubic-bezier(.2,.9,.24,1) infinite;
}

#stage[data-state="success"] .puppet-part[data-bone="upperarm_r"],
#stage[data-state="success"] .puppet-part[data-bone="forearm_r"],
#stage[data-state="success"] .puppet-part[data-bone="hand_r"] {
  animation: armRightSuccess 1.7s cubic-bezier(.2,.9,.24,1) infinite;
}

#stage[data-state="error"] {
  --accent: #ff6b6b;
}

#stage[data-state="error"] #puppet {
  animation: puppetRootError .36s ease-in-out 3, puppetRootIdle 3.8s ease-in-out 1.2s infinite;
}

#stage[data-state="muted"] #puppet,
#stage[data-state="muted"] #preview {
  opacity: .58;
  filter: grayscale(.75) drop-shadow(0 20px 24px rgba(0, 0, 0, .38));
}

@keyframes fallbackIdle {
  0%, 100% { transform: translateY(0) rotate(-.35deg) scale(1); }
  50% { transform: translateY(-10px) rotate(.35deg) scale(1.012); }
}

@keyframes puppetRootIdle {
  0%, 100% { transform: translateY(0) rotate(-.16deg); }
  50% { transform: translateY(-3px) rotate(.16deg); }
}

@keyframes baseUpperIdle {
  0%, 100% { transform: translateY(0) rotate(-.35deg) scale(1); }
  50% { transform: translateY(-2px) rotate(.45deg) scale(1.006); }
}

@keyframes headIdle {
  0%, 100% { transform: translateY(0) rotate(-0.8deg); }
  50% { transform: translateY(-2px) rotate(1.6deg); }
}

@keyframes neckIdle {
  0%, 100% { transform: rotate(-0.8deg); }
  50% { transform: rotate(0.8deg); }
}

@keyframes chestBreath {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

@keyframes pelvisIdle {
  0%, 100% { transform: translateY(0) rotate(.2deg); }
  50% { transform: translateY(2px) rotate(-.2deg); }
}

@keyframes armLeftIdle {
  0%, 100% { transform: rotate(1.2deg); }
  50% { transform: rotate(-0.8deg); }
}

@keyframes armRightIdle {
  0%, 100% { transform: rotate(-0.6deg); }
  50% { transform: rotate(0.4deg); }
}

@keyframes legIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(1px); }
}

@keyframes puppetRootThinking {
  0%, 100% { transform: translateY(-1px) rotate(-.45deg); }
  50% { transform: translateY(-4px) rotate(.45deg); }
}

@keyframes baseUpperThinking {
  0%, 100% { transform: translateY(0) rotate(-.8deg) scale(1.002); }
  50% { transform: translateY(-2px) rotate(.9deg) scale(1.008); }
}

@keyframes headThinking {
  0%, 100% { transform: translateY(0) rotate(-2.6deg); }
  50% { transform: translateY(-2px) rotate(2.8deg); }
}

@keyframes chestThinking {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

@keyframes handThinking {
  0%, 100% { transform: rotate(-3.4deg); }
  50% { transform: rotate(3.4deg); }
}

@keyframes puppetRootSuccess {
  0%, 100% { transform: translateY(0) scale(1); }
  24% { transform: translateY(-6px) scale(1.014); }
  48% { transform: translateY(-3px) scale(1.005); }
}

@keyframes baseUpperSuccess {
  0%, 100% { transform: rotate(-.25deg) scale(1); }
  24% { transform: rotate(1.1deg) translateY(-3px) scale(1.012); }
  48% { transform: rotate(.15deg) translateY(-1px) scale(1.004); }
}

@keyframes headSuccess {
  0%, 100% { transform: rotate(-0.8deg); }
  24% { transform: rotate(3deg) translateY(-3px); }
  48% { transform: rotate(-.4deg) translateY(-1px); }
}

@keyframes armLeftSuccess {
  0%, 100% { transform: rotate(.5deg); }
  24% { transform: rotate(-2.6deg) translateY(-3px); }
  48% { transform: rotate(-0.8deg); }
}

@keyframes armRightSuccess {
  0%, 100% { transform: rotate(-.5deg); }
  24% { transform: rotate(5deg) translateY(-3px); }
  48% { transform: rotate(1deg); }
}

@keyframes puppetRootError {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px) rotate(-.6deg); }
  75% { transform: translateX(5px) rotate(.6deg); }
}
#puppet[data-rig="LeeSoriDance"] {
  right: -12%;
  bottom: -65%;
  width: 124%;
  transform-origin: 50% 38%;
  animation: solo3RootDance 2.4s ease-in-out infinite;
}

#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone="base"] {
  animation: none;
}

#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone="chest"] {
  animation: solo3ChestDance 2.4s ease-in-out infinite;
}

#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone="pelvis"] {
  animation: solo3PelvisDance 2.4s ease-in-out infinite;
}

#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone="head"] {
  animation: solo3HeadDance 2.4s ease-in-out infinite;
}

#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone="upperarm_l"] {
  animation: solo3UpperArmLDance 2.4s ease-in-out infinite;
}

#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone="forearm_l"] {
  animation: solo3ForeArmLDance 2.4s ease-in-out infinite;
}

#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone="hand_l"] {
  animation: solo3HandLDance 2.4s ease-in-out infinite;
}

#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone="upperarm_r"] {
  animation: solo3UpperArmRDance 2.4s ease-in-out infinite;
}

#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone="forearm_r"] {
  animation: solo3ForeArmRDance 2.4s ease-in-out infinite;
}

#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone="hand_r"] {
  animation: solo3HandRDance 2.4s ease-in-out infinite;
}

#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone^="thigh_"],
#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone^="shin_"],
#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone^="foot_"] {
  animation: solo3LegDance 2.4s ease-in-out infinite;
}

@keyframes solo3RootDance {
  0%, 100% { transform: translateY(0) rotate(-0.7deg) scale(1); }
  18% { transform: translateY(-8px) rotate(0.8deg) scale(1.012); }
  38% { transform: translateY(-3px) rotate(-1.1deg) scale(1.004); }
  62% { transform: translateY(-10px) rotate(1.0deg) scale(1.016); }
  82% { transform: translateY(-2px) rotate(-0.4deg) scale(1.006); }
}

@keyframes solo3ChestDance {
  0%, 100% { transform: rotate(-1.6deg) translateX(-1px); }
  25% { transform: rotate(2.6deg) translateX(3px) translateY(-2px); }
  50% { transform: rotate(-2.2deg) translateX(-3px); }
  75% { transform: rotate(2.0deg) translateX(2px) translateY(-1px); }
}

@keyframes solo3PelvisDance {
  0%, 100% { transform: translateX(2px) rotate(1.4deg); }
  25% { transform: translateX(-3px) rotate(-2.0deg); }
  50% { transform: translateX(3px) rotate(1.8deg); }
  75% { transform: translateX(-2px) rotate(-1.2deg); }
}

@keyframes solo3HeadDance {
  0%, 100% { transform: translateY(0) rotate(1.0deg); }
  22% { transform: translateY(-3px) rotate(-2.8deg); }
  48% { transform: translateY(0) rotate(2.2deg); }
  72% { transform: translateY(-2px) rotate(-1.4deg); }
}

@keyframes solo3UpperArmLDance {
  0%, 100% { transform: rotate(5deg); }
  22% { transform: rotate(-13deg) translateY(-3px); }
  46% { transform: rotate(10deg); }
  70% { transform: rotate(-8deg) translateY(-2px); }
}

@keyframes solo3ForeArmLDance {
  0%, 100% { transform: rotate(-6deg); }
  22% { transform: rotate(18deg); }
  46% { transform: rotate(-12deg); }
  70% { transform: rotate(11deg); }
}

@keyframes solo3HandLDance {
  0%, 100% { transform: rotate(7deg) translateY(0); }
  22% { transform: rotate(-18deg) translateY(-4px); }
  46% { transform: rotate(15deg); }
  70% { transform: rotate(-10deg) translateY(-2px); }
}

@keyframes solo3UpperArmRDance {
  0%, 100% { transform: rotate(-5deg); }
  22% { transform: rotate(12deg) translateY(-3px); }
  46% { transform: rotate(-9deg); }
  70% { transform: rotate(8deg) translateY(-2px); }
}

@keyframes solo3ForeArmRDance {
  0%, 100% { transform: rotate(6deg); }
  22% { transform: rotate(-17deg); }
  46% { transform: rotate(12deg); }
  70% { transform: rotate(-11deg); }
}

@keyframes solo3HandRDance {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  22% { transform: rotate(18deg) translateY(-4px); }
  46% { transform: rotate(-15deg); }
  70% { transform: rotate(10deg) translateY(-2px); }
}

@keyframes solo3LegDance {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(2px) rotate(-0.4deg); }
  50% { transform: translateY(0) rotate(0.35deg); }
  75% { transform: translateY(1px) rotate(-0.2deg); }
}










/* LeeSori Solo Dance 3 parts-rig draft: continuous motion instead of pose-frame playback. */
#puppet[data-rig="LeeSoriDance"] {
  right: -10%;
  bottom: -62%;
  width: 122%;
  transform-origin: 50% 76%;
  animation: solo3RootDance 3.2s cubic-bezier(.42,0,.28,1) infinite;
}

#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone="chest"] {
  animation: solo3ChestDance 3.2s cubic-bezier(.42,0,.28,1) infinite;
}

#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone="pelvis"] {
  animation: solo3PelvisDance 3.2s cubic-bezier(.42,0,.28,1) infinite;
}

#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone="head"] {
  animation: solo3HeadDance 3.2s cubic-bezier(.42,0,.28,1) infinite;
}

#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone="upperarm_l"] {
  animation: solo3UpperArmLDance 3.2s cubic-bezier(.42,0,.28,1) infinite;
}

#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone="forearm_l"] {
  animation: solo3ForeArmLDance 3.2s cubic-bezier(.42,0,.28,1) infinite;
}

#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone="upperarm_r"] {
  animation: solo3UpperArmRDance 3.2s cubic-bezier(.42,0,.28,1) infinite;
}

#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone="forearm_r"] {
  animation: solo3ForeArmRDance 3.2s cubic-bezier(.42,0,.28,1) infinite;
}

#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone^="thigh_"],
#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone^="shin_"],
#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone^="foot_"] {
  animation: solo3LegDance 3.2s cubic-bezier(.42,0,.28,1) infinite;
}

@keyframes solo3RootDance {
  0%, 100% { transform: translateY(0) rotate(-0.8deg) scale(1); }
  12% { transform: translateY(-7px) rotate(0.7deg) scale(1.008); }
  28% { transform: translateY(-3px) rotate(-1.2deg) scale(1.004); }
  44% { transform: translateY(-12px) rotate(1.0deg) scale(1.014); }
  62% { transform: translateY(-5px) rotate(-0.5deg) scale(1.006); }
  80% { transform: translateY(-9px) rotate(0.7deg) scale(1.01); }
}

@keyframes solo3ChestDance {
  0%, 100% { transform: translateX(0) translateY(0) rotate(-1deg); }
  18% { transform: translateX(5px) translateY(-3px) rotate(2.8deg); }
  36% { transform: translateX(-5px) translateY(-1px) rotate(-3.2deg); }
  52% { transform: translateX(4px) translateY(-4px) rotate(2.4deg); }
  72% { transform: translateX(-3px) translateY(-2px) rotate(-1.8deg); }
}

@keyframes solo3PelvisDance {
  0%, 100% { transform: translateX(2px) rotate(1deg); }
  18% { transform: translateX(-5px) translateY(2px) rotate(-2deg); }
  36% { transform: translateX(5px) rotate(2deg); }
  52% { transform: translateX(-3px) translateY(1px) rotate(-1.6deg); }
  72% { transform: translateX(4px) rotate(1.4deg); }
}

@keyframes solo3HeadDance {
  0%, 100% { transform: translateY(0) rotate(0.8deg); }
  18% { transform: translateY(-5px) rotate(-3.0deg); }
  36% { transform: translateY(-1px) rotate(2.6deg); }
  52% { transform: translateY(-6px) rotate(-1.8deg); }
  72% { transform: translateY(-2px) rotate(2.0deg); }
}

@keyframes solo3UpperArmLDance {
  0%, 100% { transform: rotate(4deg) translate(0, 0); }
  16% { transform: rotate(34deg) translate(-8px, -12px); }
  32% { transform: rotate(76deg) translate(-26px, -44px); }
  46% { transform: rotate(118deg) translate(-40px, -78px); }
  60% { transform: rotate(88deg) translate(-30px, -54px); }
  76% { transform: rotate(36deg) translate(-10px, -16px); }
}

@keyframes solo3ForeArmLDance {
  0%, 100% { transform: rotate(-6deg) translate(0, 0); }
  16% { transform: rotate(24deg) translate(-6px, -8px); }
  32% { transform: rotate(64deg) translate(-14px, -28px); }
  46% { transform: rotate(102deg) translate(-22px, -46px); }
  60% { transform: rotate(66deg) translate(-14px, -30px); }
  76% { transform: rotate(18deg) translate(-5px, -8px); }
}

@keyframes solo3UpperArmRDance {
  0%, 100% { transform: rotate(-4deg) translate(0, 0); }
  16% { transform: rotate(-34deg) translate(8px, -12px); }
  32% { transform: rotate(-76deg) translate(26px, -44px); }
  46% { transform: rotate(-118deg) translate(40px, -78px); }
  60% { transform: rotate(-88deg) translate(30px, -54px); }
  76% { transform: rotate(-36deg) translate(10px, -16px); }
}

@keyframes solo3ForeArmRDance {
  0%, 100% { transform: rotate(6deg) translate(0, 0); }
  16% { transform: rotate(-24deg) translate(6px, -8px); }
  32% { transform: rotate(-64deg) translate(14px, -28px); }
  46% { transform: rotate(-102deg) translate(22px, -46px); }
  60% { transform: rotate(-66deg) translate(14px, -30px); }
  76% { transform: rotate(-18deg) translate(5px, -8px); }
}

@keyframes solo3LegDance {
  0%, 100% { transform: translateY(0) rotate(0); }
  18% { transform: translateY(3px) rotate(-0.4deg); }
  36% { transform: translateY(0) rotate(0.45deg); }
  52% { transform: translateY(4px) rotate(-0.35deg); }
  72% { transform: translateY(1px) rotate(0.25deg); }
}

/* LeeSori clean whole-arm rig override: one visible arm per side, shoulder-led lift. */
#puppet[data-rig="LeeSoriDance"] {
  right: -6%;
  bottom: -50%;
  width: 112%;
  transform-origin: 50% 76%;
  animation: solo3RootDance 3.4s cubic-bezier(.42,0,.28,1) infinite;
}

#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone="forearm_l"],
#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone="forearm_r"],
#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone="hand_l"],
#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone="hand_r"] {
  display: none;
  animation: none;
}

#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone="upperarm_l"] {
  animation: solo3UpperArmLDance 3.4s cubic-bezier(.42,0,.28,1) infinite;
}

#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone="upperarm_r"] {
  animation: solo3UpperArmRDance 3.4s cubic-bezier(.42,0,.28,1) infinite;
}

@keyframes solo3UpperArmLDance {
  0%, 100% { transform: rotate(2deg) translate(0, 0); }
  14% { transform: rotate(-18deg) translate(-2px, -4px); }
  34% { transform: rotate(-52deg) translate(-6px, -12px); }
  50% { transform: rotate(-68deg) translate(-8px, -18px); }
  66% { transform: rotate(-42deg) translate(-4px, -10px); }
  84% { transform: rotate(-12deg) translate(-1px, -3px); }
}

@keyframes solo3UpperArmRDance {
  0%, 100% { transform: rotate(-2deg) translate(0, 0); }
  14% { transform: rotate(18deg) translate(2px, -4px); }
  34% { transform: rotate(52deg) translate(6px, -12px); }
  50% { transform: rotate(68deg) translate(8px, -18px); }
  66% { transform: rotate(42deg) translate(4px, -10px); }
  84% { transform: rotate(12deg) translate(1px, -3px); }
}

/* LeeSori right-panel framing correction for clean parts rig. */
#puppet[data-rig="LeeSoriDance"] {
  right: -2%;
  bottom: 5%;
  width: 88%;
}

/* LeeSori right-panel framing correction v2: head-to-knee crop. */
#puppet[data-rig="LeeSoriDance"] {
  right: -2%;
  bottom: -5%;
  width: 88%;
}

/* Stabilize cleaned head layer while the dance rig is being refined. */
#puppet[data-rig="LeeSoriDance"] .puppet-part[data-bone="head"] {
  animation: none !important;
  transform: none !important;
}

/* LeeSori right-panel framing correction v3: visual-calibrated head-to-knee crop. */
#puppet[data-rig="LeeSoriDance"] {
  right: -2%;
  bottom: -28%;
  width: 88%;
}
