.viaAvatar{--octahedron-size:calc(var(--avatar-size,40px)*.5);--tri-height:calc(var(--tri-width)*1.732);--tri-width:calc(var(--octahedron-size)*.5);box-sizing:border-box;position:relative;overflow:hidden}.viaAvatar__scene{perspective:800px;width:100%;height:100%;position:relative}.viaAvatar__octahedron{height:calc(var(--tri-width)*2);transform-style:preserve-3d;width:calc(var(--tri-width)*2);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotateY(45deg)}@keyframes octahedron-spin{0%{transform:translate(-50%,-50%)rotateY(45deg)}to{transform:translate(-50%,-50%)rotateY(405deg)}}@keyframes top-face-light{0%{background-color:var(--tint-1)}3%{background-color:var(--highlight-color)}7.5%{background-color:var(--tint-1)}25%{background-color:var(--shade-1)}75%{background-color:var(--shade-1)}to{background-color:var(--tint-1)}}@keyframes bottom-face-light{0%{background-color:var(--shade-1)}3%{background-color:var(--tint-2)}7.5%{background-color:var(--shade-1)}25%{background-color:var(--shade-2)}75%{background-color:var(--shade-2)}to{background-color:var(--shade-1)}}@keyframes mask-breathe{0%{transform:translate(-50%,-50%)scaleX(1)}25%{transform:translate(-50%,-50%)scaleX(.7)}50%{transform:translate(-50%,-50%)scaleX(1)}75%{transform:translate(-50%,-50%)scaleX(.7)}to{transform:translate(-50%,-50%)scaleX(1)}}@keyframes mask-breathe-fast{0%{transform:translate(-50%,-50%)scaleX(1)}25%{transform:translate(-50%,-50%)scaleX(.7)}50%{transform:translate(-50%,-50%)scaleX(1)}75%{transform:translate(-50%,-50%)scaleX(.7)}to{transform:translate(-50%,-50%)scaleX(1)}}.viaAvatar__face{--highlight-color:#9cf;--tint-1:#7bb5e6;--tint-2:#5a84ad;--shade-1:#426384;--shade-2:#102131;-webkit-clip-path:polygon(50% 0%,0% 100%,100% 100%);clip-path:polygon(50% 0%,0% 100%,100% 100%);color:#369;font-size:calc(var(--octahedron-size)/1.5);height:var(--tri-height);bottom:50%;left:calc(50% - var(--tri-width));transform-origin:50% 100%;width:calc(var(--tri-width)*2);background-color:#5a84ad;transition:background-color .25s;position:absolute}.viaAvatar__face--1{transform:rotateY(90deg)translateZ(var(--tri-width))rotateX(35.264deg)}.viaAvatar__face--2{transform:rotateY(180deg)translateZ(var(--tri-width))rotateX(35.264deg)}.viaAvatar__face--3{transform:rotateY(270deg)translateZ(var(--tri-width))rotateX(35.264deg)}.viaAvatar__face--4{transform:rotateY(360deg)translateZ(var(--tri-width))rotateX(35.264deg)}.viaAvatar__face--5{transform:rotateY(90deg)translateZ(var(--tri-width))rotateX(144.736deg)}.viaAvatar__face--6{transform:rotateY(180deg)translateZ(var(--tri-width))rotateX(144.736deg)}.viaAvatar__face--7{transform:rotateY(270deg)translateZ(var(--tri-width))rotateX(144.736deg)}.viaAvatar__face--8{transform:rotateY(360deg)translateZ(var(--tri-width))rotateX(144.736deg)}.viaAvatar--idle.viaAvatar .viaAvatar__octahedron{transform:translate(-50%,-50%)rotateY(45deg)}.viaAvatar--idle.viaAvatar .viaAvatar__face--1,.viaAvatar--idle.viaAvatar .viaAvatar__face--3{background-color:var(--tint-2);animation:none}.viaAvatar--idle.viaAvatar .viaAvatar__face--2,.viaAvatar--idle.viaAvatar .viaAvatar__face--4{background-color:var(--tint-1);animation:none}.viaAvatar--idle.viaAvatar .viaAvatar__face--5,.viaAvatar--idle.viaAvatar .viaAvatar__face--7{background-color:var(--shade-2);animation:none}.viaAvatar--idle.viaAvatar .viaAvatar__face--6,.viaAvatar--idle.viaAvatar .viaAvatar__face--8{background-color:var(--shade-1);animation:none}.viaAvatar--spinning.viaAvatar .viaAvatar__octahedron{animation:8s linear infinite octahedron-spin}.viaAvatar--spinning.viaAvatar .viaAvatar__mask{animation:4s linear infinite mask-breathe}.viaAvatar--spinning.viaAvatar .viaAvatar__face--1{animation:8s linear -2s infinite top-face-light}.viaAvatar--spinning.viaAvatar .viaAvatar__face--2{animation:8s linear -4s infinite top-face-light}.viaAvatar--spinning.viaAvatar .viaAvatar__face--3{animation:8s linear -6s infinite top-face-light}.viaAvatar--spinning.viaAvatar .viaAvatar__face--4{animation:8s linear infinite top-face-light}.viaAvatar--spinning.viaAvatar .viaAvatar__face--5{animation:8s linear -2s infinite bottom-face-light}.viaAvatar--spinning.viaAvatar .viaAvatar__face--6{animation:8s linear -4s infinite bottom-face-light}.viaAvatar--spinning.viaAvatar .viaAvatar__face--7{animation:8s linear -6s infinite bottom-face-light}.viaAvatar--spinning.viaAvatar .viaAvatar__face--8{animation:8s linear infinite bottom-face-light}.viaAvatar--thinking.viaAvatar .viaAvatar__octahedron{animation:2s linear infinite octahedron-spin}.viaAvatar--thinking.viaAvatar .viaAvatar__mask{animation:1s linear infinite mask-breathe-fast}.viaAvatar--thinking.viaAvatar .viaAvatar__face--1{animation:2s linear -.5s infinite top-face-light}.viaAvatar--thinking.viaAvatar .viaAvatar__face--2{animation:2s linear -1s infinite top-face-light}.viaAvatar--thinking.viaAvatar .viaAvatar__face--3{animation:2s linear -1.5s infinite top-face-light}.viaAvatar--thinking.viaAvatar .viaAvatar__face--4{animation:2s linear infinite top-face-light}.viaAvatar--thinking.viaAvatar .viaAvatar__face--5{animation:2s linear -.5s infinite bottom-face-light}.viaAvatar--thinking.viaAvatar .viaAvatar__face--6{animation:2s linear -1s infinite bottom-face-light}.viaAvatar--thinking.viaAvatar .viaAvatar__face--7{animation:2s linear -1.5s infinite bottom-face-light}.viaAvatar--thinking.viaAvatar .viaAvatar__face--8{animation:2s linear infinite bottom-face-light}.viaAvatar__mask{background:var(--avatar-background,#fafafa);height:calc(var(--tri-width)*4);pointer-events:none;width:calc(var(--tri-width)*4);z-index:10;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cdefs%3E%3Cmask id=%27diamondCutout%27%3E%3Crect width=%27100%27 height=%27100%27 fill=%27white%27/%3E%3Crect x=%2725%27 y=%2725%27 width=%2750%27 height=%2750%27 fill=%27black%27 rx=%274%27 transform=%27rotate%2845 50 50%29%27/%3E%3C/mask%3E%3C/defs%3E%3Crect width=%27100%27 height=%27100%27 fill=%27white%27 mask=%27url%28%23diamondCutout%29%27/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cdefs%3E%3Cmask id=%27diamondCutout%27%3E%3Crect width=%27100%27 height=%27100%27 fill=%27white%27/%3E%3Crect x=%2725%27 y=%2725%27 width=%2750%27 height=%2750%27 fill=%27black%27 rx=%274%27 transform=%27rotate%2845 50 50%29%27/%3E%3C/mask%3E%3C/defs%3E%3Crect width=%27100%27 height=%27100%27 fill=%27white%27 mask=%27url%28%23diamondCutout%29%27/%3E%3C/svg%3E");-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}