*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--primary:#ff6b9d;--secondary:#c084fc;--accent:#fcd34d;--bg:#fff0f8;--text:#4a1942;--shadow:#ff6b9d4d}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:Segoe UI,Apple SD Gothic Neo,sans-serif}button{cursor:pointer;border:none;outline:none;font-family:inherit}button:focus-visible{outline:3px solid var(--secondary);outline-offset:2px}.layout{background:linear-gradient(135deg,#fff0f8 0%,#f3e8ff 50%,#fff0f8 100%);flex-direction:column;min-height:100vh;display:flex}.header{text-align:center;color:#fff;background:linear-gradient(90deg,#ff6b9d,#c084fc);padding:2rem 1rem 1rem;box-shadow:0 4px 20px #c084fc4d}.header h1{text-shadow:0 2px 8px #00000026;margin-bottom:.3rem;font-size:clamp(1.8rem,5vw,3rem);font-weight:800}.header p{opacity:.9;font-size:clamp(.9rem,2vw,1.1rem)}.main{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:1rem;padding:2rem 1rem;display:flex}.footer{text-align:center;color:#9d4edd;opacity:.8;padding:1rem;font-size:.85rem}@media (width<=480px){.header{padding:1.2rem 1rem .8rem}.main{padding:1.2rem .8rem}}@media (width>=768px){.main{gap:2rem;padding:3rem 2rem}}@media (width>=1024px){.header h1{font-size:3rem}}.cat-stage{justify-content:center;align-items:center;width:300px;height:300px;margin:0 auto 1.5rem;display:flex;position:relative}.cat-image{will-change:transform;filter:drop-shadow(0 8px 16px #f4a46066);width:200px;height:220px}.cat-dance{animation:dance var(--dur,2s) ease-in-out infinite}@keyframes dance{0%{transform:translateY(0)rotate(-8deg)scale(1)}25%{transform:translateY(-18px)rotate(0)scale(1.05)}50%{transform:translateY(0)rotate(8deg)scale(1)}75%{transform:translateY(-18px)rotate(0)scale(1.05)}to{transform:translateY(0)rotate(-8deg)scale(1)}}.cat-jump{animation:jump var(--dur,2s) cubic-bezier(.33, 1, .68, 1) infinite}@keyframes jump{0%{transform:translateY(0)scaleY(1)}10%{transform:translateY(0)scaleY(.85)scaleX(1.1)}40%{transform:translateY(-80px)scaleY(1.1)scaleX(.95)}60%{transform:translateY(-80px)scaleY(1.1)scaleX(.95)}90%{transform:translateY(0)scaleY(.85)scaleX(1.1)}to{transform:translateY(0)scaleY(1)}}.cat-spin{animation:spin var(--dur,2s) linear infinite}@keyframes spin{0%{transform:rotate(0)scale(1)}50%{transform:rotate(180deg)scale(1.1)}to{transform:rotate(360deg)scale(1)}}.cat-wiggle{animation:wiggle var(--dur,2s) ease-in-out infinite}@keyframes wiggle{0%{transform:rotate(0)translate(0)}15%{transform:rotate(-15deg)translate(-10px)}30%{transform:rotate(15deg)translate(10px)}45%{transform:rotate(-10deg)translate(-6px)}60%{transform:rotate(10deg)translate(6px)}75%{transform:rotate(-5deg)translate(-3px)}90%{transform:rotate(5deg)translate(3px)}to{transform:rotate(0)translate(0)}}.music-notes{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.note{opacity:0;font-size:1.5rem;animation:2s ease-in-out infinite floatNote;position:absolute}.note-1{color:#ff6b9d;animation-delay:0s;top:20%;left:5%}.note-2{color:#c084fc;animation-delay:.5s;top:10%;right:5%}.note-3{color:#fcd34d;animation-delay:1s;top:50%;left:2%}.note-4{color:#6ee7b7;animation-delay:1.5s;top:35%;right:2%}@keyframes floatNote{0%{opacity:0;transform:translateY(0)scale(.8)}30%{opacity:1;transform:translateY(-20px)scale(1.1)}70%{opacity:.6;transform:translateY(-40px)scale(1)}to{opacity:0;transform:translateY(-60px)scale(.8)}}.controls{background:#fff;border-radius:20px;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:480px;padding:1.5rem;display:flex;box-shadow:0 8px 32px #c084fc33}.btn-toggle{letter-spacing:.05em;border-radius:50px;padding:.75rem 2.5rem;font-size:1.1rem;font-weight:700;transition:transform .15s,box-shadow .15s}.btn-toggle.playing{color:#fff;background:linear-gradient(135deg,#ff6b9d,#ff8c69);box-shadow:0 4px 16px #ff6b9d66}.btn-toggle.paused{color:#fff;background:linear-gradient(135deg,#6ee7b7,#34d399);box-shadow:0 4px 16px #6ee7b766}.btn-toggle:hover{transform:translateY(-2px);box-shadow:0 8px 20px #c084fc59}.btn-toggle:active{transform:translateY(0)}.move-selector{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.btn-move{color:#7c3aed;background:#f3e8ff;border-radius:50px;padding:.5rem 1rem;font-size:.85rem;font-weight:600;transition:all .15s}.btn-move:hover{background:#e9d5ff;transform:translateY(-1px)}.btn-move.active{color:#fff;background:linear-gradient(135deg,#c084fc,#a855f7);transform:translateY(-2px);box-shadow:0 4px 12px #c084fc66}.speed-selector{flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;display:flex}.speed-label{color:#7c3aed;font-size:.85rem;font-weight:600}.btn-speed{color:#be185d;background:#fff0f8;border-radius:50px;padding:.4rem .85rem;font-size:.8rem;font-weight:600;transition:all .15s}.btn-speed:hover{background:#fce7f3}.btn-speed.active{color:#fff;background:linear-gradient(135deg,#ff6b9d,#e879a0);box-shadow:0 3px 10px #ff6b9d59}@media (width<=380px){.controls{gap:.75rem;padding:1rem}.btn-toggle{padding:.65rem 2rem;font-size:1rem}.btn-move{padding:.4rem .8rem;font-size:.78rem}}@media (width>=768px){.controls{gap:1.25rem;padding:2rem}.btn-toggle{padding:.85rem 3rem;font-size:1.2rem}}