.reaction-container{display:flex;gap:1rem;flex-wrap:wrap;margin:1rem 0}.reaction-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border:1px solid #ccc;border-radius:.5rem;background:#fff;cursor:pointer;transition:transform .1s}.reaction-btn:hover{transform:scale(1.05)}.reaction-btn:active{transform:scale(.95)}.reaction-label{font-size:1.2rem}.reaction-count{font-size:.9rem;color:#666}.reaction-image{width:2rem;height:2rem;object-fit:contain}@keyframes fall-animation{0%{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(-200px) scale(1);opacity:0}}.effect-fall{position:fixed;pointer-events:none;z-index:9999;font-size:24px;animation:fall-animation 2s ease-out forwards}@keyframes burst-windmill{0%{transform:translate(0) scale(1) rotate(0);opacity:1}to{transform:translate(var(--end-x),var(--end-y)) scale(1) rotate(360deg);opacity:0}}.effect-burst-windmill{position:fixed;pointer-events:none;z-index:9999;font-size:24px;animation:burst-windmill 1.5s ease-out forwards}@keyframes clap-bounce{0%,to{opacity:1;transform:translate(0) scale(1) rotate(0)}25%{transform:translate(-10px,-20px) scale(1.2) rotate(-10deg)}50%{transform:translate(10px,-40px) scale(1.3) rotate(10deg)}75%{transform:translate(-5px,-60px) scale(1.1) rotate(-5deg)}to{opacity:0;transform:translateY(-80px) scale(.5) rotate(0)}}.effect-clap{position:fixed;pointer-events:none;z-index:9999;font-size:2rem;animation:clap-bounce .8s ease-out forwards}@keyframes cross-burst-up{0%{transform:translate(0) scale(1);opacity:1}to{transform:translateY(-120px) scale(.5);opacity:0}}@keyframes cross-burst-down{0%{transform:translate(0) scale(1);opacity:1}to{transform:translateY(120px) scale(.5);opacity:0}}@keyframes cross-burst-left{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(-120px) scale(.5);opacity:0}}@keyframes cross-burst-right{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(120px) scale(.5);opacity:0}}.effect-cross-burst-up{position:fixed;pointer-events:none;z-index:9999;font-size:2rem;animation:cross-burst-up .8s ease-out forwards}.effect-cross-burst-down{position:fixed;pointer-events:none;z-index:9999;font-size:2rem;animation:cross-burst-down .8s ease-out forwards}.effect-cross-burst-left{position:fixed;pointer-events:none;z-index:9999;font-size:2rem;animation:cross-burst-left .8s ease-out forwards}.effect-cross-burst-right{position:fixed;pointer-events:none;z-index:9999;font-size:2rem;animation:cross-burst-right .8s ease-out forwards}@keyframes cross-screen-random{0%{transform:translate(0) scale(.5) rotate(-20deg);opacity:0}20%{opacity:1;transform:translate(calc(var(--end-x) * .2),calc(var(--end-y) * .2)) scale(1) rotate(0)}80%{opacity:1;transform:translate(calc(var(--end-x) * .8),calc(var(--end-y) * .8)) scale(1) rotate(0)}to{transform:translate(var(--end-x),var(--end-y)) scale(.5) rotate(20deg);opacity:0}}.effect-cross-screen{position:fixed;pointer-events:none;z-index:9999;font-size:2rem;animation:cross-screen-random 1.5s ease-in-out forwards}@keyframes fire-rise{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-120px) scale(1.8)}}.effect-fire{position:fixed;pointer-events:none;z-index:9999;font-size:2rem;animation:fire-rise 1s ease-out forwards}@keyframes cross-screen-random{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(var(--end-x),var(--end-y)) scale(1.2);opacity:0}}.effect-big-emoji-crossing{position:fixed;pointer-events:none;z-index:10000;font-size:120px;animation:cross-screen-random 3s ease-in-out forwards}@keyframes firework-burst{0%{transform:translate(0) scale(1);opacity:1}50%{opacity:1}to{transform:translate(var(--end-x),var(--end-y)) scale(.5);opacity:0}}.effect-firework{position:fixed;pointer-events:none;z-index:9999;animation:firework-burst 1s ease-out forwards}@keyframes float-animation{0%{transform:translateY(0) translate(0);opacity:1}to{transform:translateY(-200px) translate(var(--float-x, 0px));opacity:0}}.effect-float{position:fixed;pointer-events:none;z-index:9999;animation:float-animation 1.2s ease-out forwards}@keyframes balloon-animation{0%{transform:translate(0) translateY(0) scale(1);opacity:1}16.7%{transform:translate(calc(var(--sway-amplitude, 20) * .5 * 1px)) translateY(-30px) scale(1);opacity:1}33.3%{transform:translate(calc(var(--sway-amplitude, 20) * -.4 * 1px)) translateY(-60px) scale(1);opacity:.9}50%{transform:translate(calc(var(--sway-amplitude, 20) * .3 * 1px)) translateY(-90px) scale(1);opacity:.7}66.7%{transform:translate(calc(var(--sway-amplitude, 20) * -.2 * 1px)) translateY(-120px) scale(1);opacity:.5}83.3%{transform:translate(calc(var(--sway-amplitude, 20) * .1 * 1px)) translateY(-150px) scale(1);opacity:.3}to{transform:translate(0) translateY(-180px) scale(1);opacity:0}}.effect-balloon{position:fixed;pointer-events:none;z-index:9999;font-size:24px;animation:balloon-animation 1s linear forwards}@keyframes float2-animation{0%{transform:translate(0) rotate(0);opacity:1}60%{opacity:.85}to{transform:translate(var(--end-x, 0),var(--end-y, -160px)) rotate(360deg);opacity:0}}.effect-float2{position:fixed;pointer-events:none;z-index:9999;animation:float2-animation var(--duration, 1.8s) ease-out forwards}@keyframes gather-circle{0%{transform:translate(0) scale(.5);opacity:0}50%{transform:translate(var(--target-x),var(--target-y)) scale(1);opacity:1}80%{transform:translate(var(--target-x),var(--target-y)) scale(1.1) rotate(360deg);opacity:1}to{transform:translate(var(--target-x),var(--target-y)) scale(0) rotate(720deg);opacity:0}}.effect-gather-circle{position:fixed;pointer-events:none;z-index:9999;font-size:2rem;animation:gather-circle 2s ease-in-out forwards}@keyframes heart-float{0%{opacity:1;transform:translateY(0) scale(1) rotate(0)}to{opacity:0;transform:translateY(-100px) scale(1.5) rotate(15deg)}}.effect-heart{position:fixed;pointer-events:none;z-index:9999;font-size:2rem;animation:heart-float 1s ease-out forwards}@keyframes laugh-pop{0%{opacity:1;transform:translate(0) scale(1)}50%{transform:translate(var(--tx),var(--ty)) scale(1.5)}to{opacity:0;transform:translate(calc(var(--tx) * 2),calc(var(--ty) * 2)) scale(.3)}}.effect-laugh{position:fixed;pointer-events:none;z-index:9999;font-size:2rem;animation:laugh-pop .9s ease-out forwards}@keyframes shake-ng{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}.effect-shake{animation:shake-ng .65s ease-in-out}@keyframes sparkle-burst{0%{opacity:1;transform:translate(0) scale(1) rotate(0)}to{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.3) rotate(360deg)}}.effect-sparkle{position:fixed;pointer-events:none;z-index:9999;font-size:2.4rem;animation:sparkle-burst .8s ease-out forwards}@keyframes sway-up-animation{0%{transform:translate(0) scale(.5);opacity:0}10%{opacity:1;transform:translate(var(--offset-x)) scale(1)}25%{transform:translate(calc(var(--offset-x) * 1.2),-30px) scale(1)}50%{transform:translate(calc(var(--offset-x) * .8),-70px) scale(.95)}75%{transform:translate(calc(var(--offset-x) * 1.1),-110px) scale(.85);opacity:.7}to{transform:translate(var(--offset-x),-150px) scale(.6);opacity:0}}.effect-sway-up{position:fixed;pointer-events:none;z-index:9999;font-size:2rem;animation:sway-up-animation 1.5s ease-out forwards}.sandbox-reaction[data-astro-cid-toenoctt]{max-width:800px;margin:2rem auto;padding:0 1rem}.demo-section[data-astro-cid-toenoctt]{margin-bottom:3rem;padding-bottom:2rem;border-bottom:1px solid #e0e0e0}.demo-section[data-astro-cid-toenoctt]:last-child{border-bottom:none}h1[data-astro-cid-toenoctt]{font-size:2rem;margin-bottom:2rem}h2[data-astro-cid-toenoctt]{font-size:1.5rem;margin-bottom:1rem}p[data-astro-cid-toenoctt]{margin-bottom:1rem;color:#666}ul[data-astro-cid-toenoctt]{margin-left:2rem;color:#666}li[data-astro-cid-toenoctt]{margin-bottom:.5rem}code[data-astro-cid-toenoctt]{background:#f5f5f5;padding:.2rem .5rem;border-radius:.25rem;font-family:monospace;font-size:.9rem}