*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;line-height:1.6;margin:0;padding:0;overflow-x:hidden}#root{width:100%;min-height:100vh}button{border-radius:12px;border:2px solid transparent;padding:12px 24px;font-size:1.1em;font-weight:600;font-family:inherit;background:linear-gradient(45deg,#ff6b6b,#4ecdc4);color:#fff;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003}button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}button:active{transform:translateY(0)}.dancing-cat-container{display:flex;flex-direction:column;align-items:center;gap:2rem;padding:2rem;width:100%;max-width:600px;margin:0 auto}.dancing-cat{position:relative;width:200px;height:200px;margin:2rem}.cat-image{width:100%;height:100%;filter:drop-shadow(0 10px 20px rgba(0,0,0,.3));transform-origin:center bottom}.dancing-cat.dancing .cat-image{animation:dancingCat 1.2s ease-in-out infinite}@keyframes dancingCat{0%{transform:translate(0) translateY(0) rotate(0) scale(1)}12.5%{transform:translate(-8px) translateY(-10px) rotate(-2deg) scale(1.02)}25%{transform:translate(-10px) translateY(-20px) rotate(-3deg) scale(1.05)}37.5%{transform:translate(-8px) translateY(-15px) rotate(-2deg) scale(1.03)}50%{transform:translate(0) translateY(-10px) rotate(0) scale(1.02)}62.5%{transform:translate(8px) translateY(-15px) rotate(2deg) scale(1.03)}75%{transform:translate(10px) translateY(-20px) rotate(3deg) scale(1.05)}87.5%{transform:translate(8px) translateY(-10px) rotate(2deg) scale(1.02)}to{transform:translate(0) translateY(0) rotate(0) scale(1)}}.controls{display:flex;flex-direction:column;align-items:center;gap:1rem}.dance-button{font-size:1.2rem;padding:15px 30px;border-radius:50px;background:linear-gradient(135deg,#ff6b6b,#feca57,#48dbfb,#ff9ff3);background-size:400% 400%;animation:gradientShift 3s ease infinite;border:none;color:#fff;font-weight:700;cursor:pointer;transition:transform .2s ease;box-shadow:0 8px 25px #0003}.dance-button:hover{transform:scale(1.05);box-shadow:0 12px 35px #0000004d}.dance-button:active{transform:scale(.98)}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.dance-status{font-size:1.1rem;padding:10px 20px;background:#fff3;border-radius:25px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;text-align:center;min-width:300px;transition:all .3s ease}.dancing-cat:hover .cat-image{transform:perspective(1000px) rotateX(10deg) rotateY(10deg);transition:transform .3s ease}.dancing-cat.dancing{position:relative}.dancing-cat.dancing:before{content:"";position:absolute;inset:-20px;background:radial-gradient(circle,rgba(255,107,107,.3) 0%,transparent 70%);border-radius:50%;animation:glow 2s ease-in-out infinite alternate;z-index:-1}@keyframes glow{0%{opacity:.5;transform:scale(1)}to{opacity:1;transform:scale(1.1)}}.dancing-cat.dancing:after{content:"✨ 🎵 ✨ 🎶 ✨ 🎵 ✨";position:absolute;top:-30px;left:50%;transform:translate(-50%);font-size:1.2rem;animation:sparkle 1.5s ease-in-out infinite;white-space:nowrap}@keyframes sparkle{0%,to{opacity:0;transform:translate(-50%) translateY(0)}50%{opacity:1;transform:translate(-50%) translateY(-10px)}}@media (max-width: 768px){.dancing-cat-container{padding:1.5rem;gap:1.5rem}.dancing-cat{width:150px;height:150px}.dance-button{font-size:1rem;padding:12px 24px}.dance-status{font-size:1rem;min-width:250px;padding:8px 16px}.app-header h1{font-size:2.5rem}.app-header p{font-size:1.1rem}}@media (max-width: 480px){.dancing-cat-container{padding:1rem;gap:1rem}.dancing-cat{width:120px;height:120px;margin:1rem}.dance-button{font-size:.9rem;padding:10px 20px}.dance-status{font-size:.9rem;min-width:200px;padding:6px 12px}.app-header{margin:1rem 0}.app-header h1{font-size:2rem}.app-header p{font-size:1rem}@keyframes dancingCat{0%{transform:translate(0) translateY(0) rotate(0) scale(1)}12.5%{transform:translate(-4px) translateY(-5px) rotate(-1deg) scale(1.01)}25%{transform:translate(-5px) translateY(-10px) rotate(-1.5deg) scale(1.02)}37.5%{transform:translate(-4px) translateY(-7px) rotate(-1deg) scale(1.01)}50%{transform:translate(0) translateY(-5px) rotate(0) scale(1.01)}62.5%{transform:translate(4px) translateY(-7px) rotate(1deg) scale(1.01)}75%{transform:translate(5px) translateY(-10px) rotate(1.5deg) scale(1.02)}87.5%{transform:translate(4px) translateY(-5px) rotate(1deg) scale(1.01)}to{transform:translate(0) translateY(0) rotate(0) scale(1)}}}@media (hover: none) and (pointer: coarse){.dance-button:hover{transform:none}.dance-button:active{transform:scale(.95);transition:transform .1s ease}.dancing-cat:hover .cat-image{transform:none}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){.cat-image{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}}.control-row{display:flex;gap:1rem;margin-bottom:1rem;flex-wrap:wrap;justify-content:center}.reset-button{font-size:1rem;padding:12px 20px;border-radius:25px;background:linear-gradient(135deg,#ff7675,#74b9ff);border:none;color:#fff;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003}.reset-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.speed-controls{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-bottom:1rem}.speed-controls label{font-weight:700;color:#fff}.speed-buttons{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}.speed-button{font-size:.9rem;padding:8px 16px;border-radius:20px;background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid transparent;color:#fff;font-weight:600;cursor:pointer;transition:all .3s ease}.speed-button:hover{background:#ffffff4d;transform:translateY(-1px)}.speed-button.active{background:linear-gradient(135deg,#00cec9,#6c5ce7);border-color:#fff;box-shadow:0 4px 15px #0000004d}.dance-counter{font-size:1rem;padding:8px 16px;background:#ffffff26;border-radius:20px;color:#fff;text-align:center;margin-bottom:.5rem;font-weight:700;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.keyboard-hint{font-size:.85rem;color:#fffc;text-align:center;font-style:italic;margin-top:.5rem}.dance-button:focus,.reset-button:focus,.speed-button:focus{outline:3px solid rgba(255,255,255,.6);outline-offset:2px}@media (prefers-reduced-motion: reduce){.dancing-cat.dancing .cat-image{animation:none}.dancing-cat.dancing:before,.dancing-cat.dancing:after{animation:none}.dance-button{animation:none}}@media (max-width: 480px){.control-row{flex-direction:column;align-items:center;gap:.5rem}.speed-buttons{gap:.3rem}.speed-button{font-size:.8rem;padding:6px 12px}.dance-counter{font-size:.9rem;padding:6px 12px}.keyboard-hint{font-size:.75rem}}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-family:Arial,sans-serif}.app-header{text-align:center;margin:2rem 0}.app-header h1{font-size:3rem;margin-bottom:.5rem;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.app-header p{font-size:1.2rem;opacity:.9}.app-main{flex:1;display:flex;justify-content:center;align-items:center;width:100%;max-width:800px}
