/* Faces only. Original sphere colours, geometry and motion are preserved. */
.sphere::before{content:"";position:absolute;left:29%;top:39%;width:10%;height:15%;border-radius:50%;background:#202820;box-shadow:calc(var(--face-size,160px) * .31) 0 0 #202820;transform:rotate(-3deg)}
.sphere::after{content:"";position:absolute;left:43%;top:58%;width:17%;height:10%;border:0;border-bottom:3px solid #202820;border-radius:0 0 50% 50%;transform:rotate(-3deg)}
.large{--face-size:440px}.medium{--face-size:140px}.small{--face-size:65px}.builder-visual .sphere{--face-size:330px}.small::after{border-bottom-width:1.5px}.large::after{border-bottom-width:5px}.dot-card:nth-child(2) .sphere::after{height:5%;border-radius:50%}.dot-card:nth-child(3) .sphere::before{height:5%;top:45%;border-radius:10px}.dot-card:nth-child(4) .sphere::after{width:9%;height:9%;left:46%;border:0;border-radius:50%;background:#202820}.dot-card:nth-child(5) .sphere::after{transform:rotate(-12deg)}
@media(max-width:1000px){.large{--face-size:360px}}@media(max-width:700px){.large{--face-size:255px}.medium{--face-size:85px}.small{--face-size:40px}.dot-art .sphere{--face-size:115px}.builder-visual .sphere{--face-size:240px}.large::after{border-bottom-width:3px}}
footer>div{flex-wrap:wrap;row-gap:16px}