*{box-sizing:border-box;cursor:pointer}body{margin:0;min-height:100vh;padding:0;background:#111;overflow:hidden}body:after{content:"";position:absolute;background:linear-gradient(90deg,#666 10%,silver);width:10px;height:10px;top:50%;left:50%;transform:translate(-50%,120px);border-radius:0 0 100% 100%}canvas{position:absolute;inset:0;z-index:2}.tesla-coil__head{border-radius:100%;height:50px;width:50px;background:radial-gradient(circle at 60% 40%,silver 50%,#000),silver;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) translateZ(100px);z-index:3;perspective:350px;transform-style:preserve-3d}.tesla-coil__head--active{box-shadow:0 0 15px 4px #a537fd}.tesla-coil__body{height:180px;top:50%;left:50%;width:10px;background:linear-gradient(90deg,#666 10%,silver);transform:translate(-50%) rotateX(-30deg);position:absolute;perspective:350px;transform-style:preserve-3d}.tesla-coil__ring{content:"";height:calc(var(--size) * 1px);width:calc(var(--size) * 1px);border-radius:100%;border:15px solid #555;position:absolute;top:50%;left:50%;transform:translate(-50%) rotateX(90deg)}.tesla-coil__ring:nth-of-type(1){--size: 60;top:10%}.tesla-coil__ring:nth-of-type(2){--size: 70;top:20%}.tesla-coil__ring:nth-of-type(3){--size: 80;top:30%}.tesla-coil__base{height:60px;transform-style:preserve-3d;width:60px;position:absolute;top:90%;left:50%;transform:translate(-50%,-50%) rotateY(35deg)}.tesla-coil__base div{background-color:silver;height:100%;position:absolute;width:100%}.tesla-coil__base div:nth-of-type(1){background:#333;transform:rotateY(270deg) translate(-50%);transform-origin:center left}.tesla-coil__base div:nth-of-type(2){transform:rotateX(90deg) translateY(-50%);transform-origin:top center}.tesla-coil__base div:nth-of-type(3){background:#666;transform:translateZ(30px)}