.outer{width:60px;height:60px;border-radius:6px;padding:1px;background:radial-gradient(circle at center,#a855f7,#1e1b4b);position:relative;margin:10px;display:inline-block;vertical-align:middle;box-shadow:0 0 10px rgb(168 85 247 / .5);overflow:hidden}.dot{width:6px;height:6px;position:absolute;background-color:#a855f7;box-shadow:0 0 10px #a855f7,0 0 20px #9333ea;border-radius:50%;z-index:2;animation:moveDot 3s linear infinite}@keyframes moveDot{0%{top:10%;left:10%}25%{top:10%;left:90%}50%{top:90%;left:90%}75%{top:90%;left:10%}100%{top:10%;left:10%}}.card{z-index:1;width:100%;height:100%;border-radius:5px;border:solid 1px #9333ea;background:radial-gradient(circle at center,#7e22ce,#1e1b4b);display:flex;align-items:center;justify-content:center;position:relative;flex-direction:column}.card .text{font-weight:700;font-size:1.2rem;color:#fff;text-align:center;text-shadow:0 0 5px #a855f7,0 0 10px #7e22ce}.card div:not(.text){font-size:.8rem;color:#d8b4fe;text-align:center;font-weight:500}.line{width:100%;height:1px;position:absolute;background:linear-gradient(90deg,#a855f7,transparent);opacity:.8}.topl{top:8%}.bottoml{bottom:8%}.leftl{left:8%;width:1px;height:100%;background:linear-gradient(180deg,#a855f7,transparent)}.rightl{right:8%;width:1px;height:100%}