*{box-sizing:border-box;padding:0;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);background-attachment:fixed;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;min-height:100vh;color:#333;padding:20px;position:relative;overflow-x:hidden;font-weight:300}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle at 20% 20%,hsla(0,0%,100%,.1) 2px,transparent 0),radial-gradient(circle at 80% 80%,hsla(0,0%,100%,.1) 2px,transparent 0),radial-gradient(circle at 40% 60%,hsla(0,0%,100%,.05) 3px,transparent 0);background-size:100px 100px,150px 150px,200px 200px;animation:float 20s ease-in-out infinite;z-index:-1}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.container{min-width:320px;max-width:600px;width:100%;margin:30px auto 0;display:flex;flex-direction:column;align-items:center;padding:30px;background:hsla(0,0%,100%,.95);border-radius:25px;box-shadow:0 20px 40px rgba(0,0,0,.15),0 0 0 1px hsla(0,0%,100%,.5);backdrop-filter:blur(10px);position:relative;animation:slideIn .8s ease-out}@keyframes slideIn{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes twinkle{0%,to{transform:scale(1) rotate(0deg);opacity:.7}50%{transform:scale(1.2) rotate(180deg);opacity:1}}.container h1{font-size:2.5rem;margin-bottom:30px;text-align:center;background:linear-gradient(45deg,#ff6b6b,#4ecdc4,#45b7d1,#96ceb4);background-size:400% 400%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradient 3s ease infinite;font-weight:400;text-shadow:2px 2px 4px rgba(0,0,0,.1)}@keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.data-block{background:linear-gradient(135deg,#ff9a9e,#fecfef 50%,#fecfef);padding:25px;margin:15px 0;border-radius:20px;box-shadow:0 10px 30px rgba(255,154,158,.3),inset 0 1px 0 hsla(0,0%,100%,.6);width:100%;text-align:center;border:2px solid hsla(0,0%,100%,.3);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.data-block:nth-child(2){background:linear-gradient(135deg,#a8edea,#fed6e3);box-shadow:0 10px 30px rgba(168,237,234,.3),inset 0 1px 0 hsla(0,0%,100%,.6)}.data-block:nth-child(3){background:linear-gradient(135deg,#ffecd2,#fcb69f);box-shadow:0 10px 30px hsla(15,94%,81%,.3),inset 0 1px 0 hsla(0,0%,100%,.6)}.data-block:nth-child(4){background:linear-gradient(135deg,#a8caba,#5d4e75);box-shadow:0 10px 30px rgba(168,202,186,.3),inset 0 1px 0 hsla(0,0%,100%,.6)}.data-block:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,hsla(0,0%,100%,.1) 0,transparent 70%);animation:shimmer 3s linear infinite;opacity:0;transition:opacity .3s ease}.data-block:hover:before{opacity:1}@keyframes shimmer{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.data-block:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 15px 40px rgba(255,154,158,.4),inset 0 1px 0 hsla(0,0%,100%,.8)}.data-block h2{font-size:1.4rem;color:#2c3e50;margin-bottom:15px;font-weight:500;text-shadow:1px 1px 2px hsla(0,0%,100%,.8);position:relative;z-index:1}.data-block p{font-size:1.3rem;color:#34495e;font-weight:400;line-height:1.5;text-shadow:1px 1px 2px hsla(0,0%,100%,.6);position:relative;z-index:1}.data-block:nth-child(2):after{content:"🎈";position:absolute;top:10px;right:15px;font-size:1.5rem;animation:bounce 2s ease-in-out infinite}.data-block:nth-child(3):after{content:"🎯";position:absolute;top:10px;right:15px;font-size:1.5rem;animation:bounce 2s ease-in-out .3s infinite}.data-block:nth-child(4):after{content:"🎂";position:absolute;top:10px;right:15px;font-size:1.5rem;animation:bounce 2s ease-in-out .6s infinite}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}@media (max-width:768px){body{padding:10px;background-attachment:scroll;min-height:100vh;background-repeat:no-repeat;background-size:cover}.container{padding:20px;margin:20px auto 0;border-radius:20px}.container h1{font-size:2rem;margin-bottom:20px}.data-block{padding:20px;margin:10px 0;border-radius:15px}.data-block h2{font-size:1.2rem}.data-block p{font-size:1.1rem}}@media (max-width:480px){body{background-attachment:scroll;background-repeat:no-repeat;background-size:cover}.container{padding:15px;margin:10px auto 0;border-radius:15px}.container h1{font-size:1.8rem;margin-bottom:15px}.data-block{padding:15px;margin:8px 0}.data-block h2{font-size:1.1rem;margin-bottom:10px}.data-block p{font-size:1rem}}