body{color:#fff;background:linear-gradient(135deg,#020617,#0f172a,#111827);margin:0;padding:0;font-family:Poppins,sans-serif;overflow-x:hidden}.app{flex-direction:column;align-items:center;min-height:100vh;padding:30px 20px;display:flex}h1{background:linear-gradient(90deg,#60a5fa,#38bdf8,#818cf8);-webkit-text-fill-color:transparent;text-align:center;letter-spacing:1px;-webkit-background-clip:text;margin-top:10px;margin-bottom:35px;font-size:55px}.circle{background:radial-gradient(circle at top,#2563eb,#0f172a);border:5px solid #ffffff26;border-radius:50%;justify-content:center;align-items:center;width:220px;height:220px;margin-bottom:35px;font-size:55px;font-weight:700;transition:all .4s;display:flex;position:relative;overflow:hidden;box-shadow:0 0 40px #3b82f64d}.circle:before{content:"";background:conic-gradient(#0000,#60a5fab3,#0000);width:300px;height:300px;animation:4s linear infinite rotate;position:absolute}.circle:after{content:"";background:radial-gradient(circle,#0f172a,#020617);border-radius:50%;position:absolute;inset:8px}.circle span{z-index:10;position:relative}.active{transform:scale(1.08);box-shadow:0 0 25px #3b82f6,0 0 60px #2563eb,0 0 100px #3b82f699}button{color:#fff;cursor:pointer;background:linear-gradient(90deg,#2563eb,#3b82f6);border:none;border-radius:16px;margin-bottom:35px;padding:16px 38px;font-size:20px;font-weight:600;transition:all .3s;box-shadow:0 10px 30px #2563eb4d}button:hover{transform:translateY(-3px);box-shadow:0 15px 35px #2563eb80}button:active{transform:scale(.96)}.box{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#111827b3;border:1px solid #ffffff14;border-radius:24px;width:90%;max-width:800px;margin-top:20px;padding:25px;transition:all .3s;box-shadow:0 8px 30px #00000059}.box:hover{border:1px solid #60a5fa40;transform:translateY(-2px)}.box h2{color:#60a5fa;margin-top:0;margin-bottom:15px;font-size:28px}.box p{color:#e5e7eb;font-size:19px;line-height:1.8}@media (width<=768px){h1{font-size:38px}.circle{width:170px;height:170px;font-size:42px}button{width:100%;max-width:320px;font-size:18px}.box{width:95%}.box h2{font-size:24px}.box p{font-size:17px}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.active{animation:1s infinite pulse;box-shadow:0 0 25px #3b82f6,0 0 60px #2563eb,0 0 100px #3b82f6b3}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}.circle.active:after{content:"";border:4px solid #60a5fa80;border-radius:50%;width:100%;height:100%;animation:1.5s infinite wave;position:absolute}@keyframes wave{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.5)}}