*{margin:0;padding:0;box-sizing:border-box}:root{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.5;font-weight:400}body{min-height:100vh;background:linear-gradient(135deg,#ffe5e5,#ffecd2,#fffde7,#e8f5e9,#e3f2fd,#ede7f6,#fce4ec 90%,#ffe5e5);background-size:400% 400%;animation:gradient-shift 15s ease infinite;display:flex;justify-content:center;align-items:center}#root{width:100%;min-height:100vh;display:flex;justify-content:center;align-items:center}.dancing-cat-container{--animation-speed: 1s;display:flex;flex-direction:column;align-items:center;position:relative}.cat-wrapper{width:200px;height:200px;transition:transform .3s ease;will-change:transform}.cat-wrapper.dancing{animation:dance var(--animation-speed) ease-in-out infinite}.cat-svg{width:100%;height:100%}.cat-shadow{width:100px;height:20px;background:#0000004d;border-radius:50%;margin-top:-10px;transition:all .3s ease}.cat-shadow.shadow-dancing{animation:shadow-dance calc(var(--animation-speed) / 2) ease-in-out infinite}.music-notes{position:absolute;inset:0;pointer-events:none}.note{position:absolute;font-size:24px;color:gold;text-shadow:2px 2px 4px rgba(0,0,0,.3);animation:float-note 2s ease-in-out infinite}.note-1{top:30%;left:-30px;animation-delay:0s}.note-2{top:20%;right:-30px;animation-delay:.5s}.note-3{top:10%;left:10px;animation-delay:1s}.note-4{top:15%;right:10px;animation-delay:1.5s}@media(max-width:768px){.cat-wrapper{width:150px;height:150px}.cat-shadow{width:75px;height:15px}.note{font-size:20px}}@media(max-width:480px){.cat-wrapper{width:120px;height:120px}.cat-shadow{width:60px;height:12px}.note{font-size:16px}.note-1,.note-3{left:-20px}.note-2,.note-4{right:-20px}}.controls-container{margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:20px}.control-button{display:flex;align-items:center;gap:10px;padding:15px 35px;font-size:18px;font-weight:600;border:none;border-radius:50px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #0003}.control-button.paused{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff}.control-button.paused:hover{background:linear-gradient(135deg,#45a049,#3d8b40);transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.control-button.playing{background:linear-gradient(135deg,#f44336,#e53935);color:#fff}.control-button.playing:hover{background:linear-gradient(135deg,#e53935,#d32f2f);transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.control-button:focus{outline:3px solid rgba(255,255,255,.5);outline-offset:2px}.control-button:active{transform:translateY(0)}.button-icon{font-size:20px}.button-text{letter-spacing:1px}@media(max-width:768px){.control-button{padding:12px 28px;font-size:16px}.button-icon{font-size:18px}}@media(max-width:480px){.control-button{padding:10px 24px;font-size:14px}.button-icon{font-size:16px}}.speed-controls{display:flex;align-items:center;gap:12px}.speed-label{color:#7c4dff;font-weight:600}.speed-buttons{display:flex;gap:8px}.speed-button{padding:8px 16px;font-size:14px;font-weight:600;border:2px solid #E1BEE7;border-radius:20px;background:#fff;color:#9575cd;cursor:pointer;transition:all .2s ease}.speed-button:hover{background:#f3e5f5;border-color:#ce93d8}.speed-button.active{background:linear-gradient(135deg,#e91e63,#9c27b0);color:#fff;border-color:transparent}@media(max-width:480px){.speed-controls{flex-direction:column;gap:8px}.speed-button{padding:6px 12px;font-size:12px}}@keyframes sway{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-30px)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes dance{0%{transform:translateY(0) rotate(0) scale(1)}15%{transform:translateY(-20px) rotate(-10deg) scale(1.05)}30%{transform:translateY(0) rotate(10deg) scale(1)}45%{transform:translateY(-25px) rotate(-5deg) scale(1.08)}60%{transform:translateY(0) rotate(5deg) scale(1)}75%{transform:translateY(-15px) rotate(-8deg) scale(1.03)}90%{transform:translateY(0) rotate(8deg) scale(1)}to{transform:translateY(0) rotate(0) scale(1)}}@keyframes shadow-dance{0%,to{transform:scaleX(1);opacity:.3}50%{transform:scaleX(.7);opacity:.15}}@keyframes float-note{0%{opacity:0;transform:translateY(0) rotate(0)}10%{opacity:1}90%{opacity:1}to{opacity:0;transform:translateY(-100px) rotate(20deg)}}@keyframes gradient-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.app-header{margin-bottom:40px}.title{font-size:3rem;color:#e91e63;text-shadow:2px 2px 4px rgba(233,30,99,.2);margin-bottom:10px;letter-spacing:2px}.subtitle{font-size:1.2rem;color:#7c4dff;text-shadow:1px 1px 2px rgba(124,77,255,.2)}.app-main{display:flex;flex-direction:column;align-items:center;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:30px;padding:50px;box-shadow:0 8px 32px #0000001a}.app-footer{margin-top:40px;color:#9575cd;font-size:.9rem}@media(max-width:768px){.title{font-size:2.2rem}.subtitle{font-size:1rem}.app-main{padding:30px}}@media(max-width:480px){.app{padding:15px}.title{font-size:1.8rem}.subtitle{font-size:.9rem}.app-main{padding:25px 20px;border-radius:20px}.app-header{margin-bottom:25px}.app-footer{margin-top:25px}}