.tech-cube-container{display:flex;justify-content:center;align-items:center;height:400px;margin:4rem auto;perspective:1000px;position:relative;overflow:visible;z-index:5}.cube-scene{width:300px;height:300px;position:relative;transform-style:preserve-3d;cursor:pointer}.cube-face{position:absolute;width:250px;height:250px;background:transparent;border-radius:15px;display:flex;flex-direction:column;justify-content:center;align-items:center;-webkit-backdrop-filter:none;backdrop-filter:none;font-family:VT323,Zpix,monospace;transition:all .8s cubic-bezier(.4,0,.2,1);box-shadow:none;transform-origin:center center;z-index:1}.cube-face:before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(135deg,#21f3a3,#2196f3);border-radius:17px;z-index:-2;opacity:0;transition:opacity .4s cubic-bezier(.4,0,.2,1);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:xor;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;padding:2px}.cube-face:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#000c;border-radius:15px;z-index:-1}.cube-scene:hover .face-front:before{opacity:.8;transition:opacity .4s cubic-bezier(.4,0,.2,1);transition-delay:0s}.cube-scene:hover .face-right:before{opacity:.8;transition:opacity .4s cubic-bezier(.4,0,.2,1);transition-delay:.1s}.cube-scene:hover .face-back:before{opacity:.8;transition:opacity .4s cubic-bezier(.4,0,.2,1);transition-delay:.15s}.cube-scene:hover .face-left:before{opacity:.8;transition:opacity .4s cubic-bezier(.4,0,.2,1);transition-delay:.2s}.cube-face:before{transition:opacity .3s cubic-bezier(.4,0,.2,1)}.face-front:before{transition-delay:.35s}.face-right:before{transition-delay:.25s}.face-back:before{transition-delay:.15s}.face-left:before{transition-delay:0s}.face-front{transform:translateZ(125px)}.face-back{transform:translateZ(-125px) rotateY(180deg)}.face-right{transform:rotateY(90deg) translateZ(125px)}.face-left{transform:rotateY(-90deg) translateZ(125px)}.face-icon{font-size:3rem;margin-bottom:1rem;text-shadow:0 0 20px currentColor;animation:iconPulse 8s ease-in-out infinite}:lang(zh-CN) .face-icon,:lang(ja-JP) .face-icon{font-size:2.4rem;letter-spacing:.05em}:lang(en-US) .face-icon{font-size:3rem;letter-spacing:normal}.face-data{font-size:1.5rem;color:#7dea00;margin-top:4rem;text-align:center;opacity:.9}.face-browser .face-icon{color:#4facfe}.face-version .face-icon{color:#43e97b}.face-engine .face-icon{color:#38f9d7}.face-os .face-icon{color:#f093fb}.cube-scene:hover .cube-face{box-shadow:0 0 10px #38f9d7,inset 0 0 10px #1383851a}.cube-scene.expanded .cube-face{transition:all .8s cubic-bezier(.4,0,.2,1)}@keyframes iconPulse{0%,to{transform:scale(1);opacity:.8}50%{transform:scale(1.1);opacity:1}}@keyframes fadeInSlide{0%{opacity:0;transform:translateY(20px) scale(.9);filter:blur(2px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}@keyframes fadeOutSlide{0%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}to{opacity:0;transform:translateY(-20px) scale(.9);filter:blur(2px)}}.cube-face.face-appear{animation:fadeInSlide .6s cubic-bezier(.4,0,.2,1) forwards}.cube-face.face-disappear{animation:fadeOutSlide .5s cubic-bezier(.4,0,.2,1) forwards}.cube-face.face-appear:before{animation:borderGlow .8s cubic-bezier(.4,0,.2,1) forwards}@keyframes borderGlow{0%{opacity:0;transform:scale(.95)}50%{opacity:.6;transform:scale(1.02)}to{opacity:.9;transform:scale(1)}}.loading-dots{display:inline-block}.loading-dots:after{content:"...";animation:loadingDots 1s steps(3,end) infinite}@keyframes loadingDots{0%,33%{content:"."}34%,66%{content:".."}67%,to{content:"..."}}.data-updating{animation:dataUpdate 1s ease-in-out}@keyframes dataUpdate{0%{color:#fff}50%{color:#4facfe;text-shadow:0 0 10px #4facfe}to{color:#8bc34a}}@media (max-width: 768px){.tech-cube-container{height:300px;margin:2rem auto;overflow:visible}.cube-scene{width:200px;height:200px}.cube-face{width:180px;height:180px}.face-front{transform:translateZ(90px)}.face-back{transform:translateZ(-90px) rotateY(180deg)}.face-right{transform:rotateY(90deg) translateZ(90px)}.face-left{transform:rotateY(-90deg) translateZ(90px)}.face-icon{font-size:2rem;margin-bottom:.5rem}:lang(zh-CN) .face-icon,:lang(ja-JP) .face-icon{font-size:1.6rem;letter-spacing:.04em;line-height:1.2}:lang(en-US) .face-icon{font-size:2rem;letter-spacing:normal;line-height:normal}@media (min-width: 1200px){.tech-cube-container{height:500px;margin:5rem auto}.cube-scene{width:350px;height:350px}.cube-face{width:300px;height:300px}.face-front{transform:translateZ(150px)}.face-back{transform:translateZ(-150px) rotateY(180deg)}.face-right{transform:rotateY(90deg) translateZ(150px)}.face-left{transform:rotateY(-90deg) translateZ(150px)}.face-icon{font-size:3.5rem}:lang(zh-CN) .face-icon,:lang(ja-JP) .face-icon{font-size:2.8rem;letter-spacing:.06em}:lang(en-US) .face-icon{font-size:3.5rem;letter-spacing:normal}}@media (prefers-color-scheme: dark){.cube-face:after{background:#000000e6}}.cube-scene,.cube-face{will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}.tech-particles{contain:layout style paint}@media (prefers-reduced-motion: reduce){.cube-scene,.cube-face,.face-icon,.loading-dots,.particle{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.particle:nth-child(3n){background:#4facfe}.particle:nth-child(3n+1){background:#4facfe}.particle:nth-child(3n+2){background:#4facfe}}
