@keyframes rolc{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes uplo{0%{transform:translateY(80px)}to{transform:translateY(0)}}@keyframes downlo{0%{transform:translateY(0)}to{transform:translateY(80px)}}.disc{position:relative;margin:0 auto;width:200px;height:200px;z-index:5}.disc-small{width:60px;height:60px}.disc-small>.disc_cover{width:50px;height:50px}.disc-small>.disc_cover:before{left:20px;top:20px;width:10px;height:10px}.disc-small:before{top:25px;margin-left:-30px;width:60px;height:60px}.disc-small:after{top:25px;margin-left:-20px;width:40px;height:10px}.disc>.disc_cover{z-index:0;top:0;margin-left:auto;margin-right:auto;width:190px;height:190px;box-shadow:0 0 20px rgba(0,0,0,.2);background-image:url(http://upload.wikimedia.org/wikipedia/zh/a/a4/After_Dark_CD_Cover.jpg);background-position:50% 50%;transform:translateY(80px);animation:downlo 1s 1}.disc>.disc_cover,.disc>.disc_cover:before{position:relative;border-radius:1000em;border:5px solid #fff}.disc>.disc_cover:before{display:block;content:"";width:40px;height:40px;background:#000;left:75px;top:75px;box-sizing:border-box}.disc:after,.disc:before{position:absolute;content:"";display:block;box-sizing:border-box;transform-origin:50% 50%}.disc:after,.disc:before{content:none}.disc{cursor:pointer}.disc>.disc_cover{animation:rolc 4s linear infinite}.wooden-shelf-container{width:100%;display:flex;justify-content:center;padding:100px 0 40px;background:transparent}.shelf-container{position:relative;display:inline-block}.shelf{position:relative;width:721px;border-bottom:13px solid #24252a;text-align:center;padding:0 27px;margin:20px auto}.shelf,.shelf:after{background:transparent}.shelf:after{position:absolute;bottom:-13px;left:34px;height:10px;content:"";transform:perspective(150px) rotateX(-25deg);right:34px;box-shadow:0 0 17px 5px rgba(0,0,0,.7);z-index:-1}.shelf>div{border-bottom:23px solid #303138;position:relative;z-index:1;display:flex;align-items:flex-end;gap:40px;justify-content:center;padding:18px 0}.shelf>div:before{border-color:transparent transparent #303138;border-style:solid;border-width:0 0 23px 27px;left:-27px;transform:rotate(1turn)}.shelf>div:after,.shelf>div:before{content:"";width:0;height:0;position:absolute;bottom:-23px;z-index:2}.shelf>div:after{border-color:transparent transparent transparent #303138;border-style:solid;border-width:23px 0 0 27px;right:-27px}.case{display:inline-block;width:142px;height:131px;border-radius:5px;position:relative;z-index:2;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);top:-5px;animation:idleFloat 3s ease-in-out infinite}.case:after{width:100%;height:10px;border-radius:20px;content:"";background:rgba(0,0,0,.3);position:absolute;bottom:-5px;transform:perspective(600px) rotateX(100deg);box-shadow:0 0 20px rgba(0,0,0,.5);left:0}.case.hovered{transform:translateY(-8px);z-index:10}.case.hovered:after{bottom:-15px;filter:blur(6px);background:rgba(0,0,0,.4)}.case>div{background:hsla(0,0%,100%,.15);padding:1px 1px 1px 13px;overflow:hidden}.case>div,.case>div>.img{width:100%;height:100%;border-radius:0;border:1px solid rgba(0,0,0,.6);box-sizing:border-box;position:relative}.case>div>.img{padding:0;background:rgba(0,0,0,.2)}.case>div>.img:before{box-shadow:none;width:12px;background-color:#444;background-image:linear-gradient(0deg,rgba(0,0,0,.2) 50%,transparent 0,transparent);border-radius:0;background-size:2px 100%;top:-1px;bottom:-1px;left:-14px;position:absolute;content:""}.case>div>.img>span{background:transparent;box-sizing:border-box;padding:1px 1px 1px 0;position:relative}.case>div>.img>span,.case>div>.img>span>img{width:100%;height:100%;border-radius:0;display:block}.case>div>.img>span>img{-o-object-fit:cover;object-fit:cover}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spinFast{0%{transform:scale(1.1) rotate(0deg)}to{transform:scale(1.1) rotate(1turn)}}@keyframes idleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes idleFloatDelay1{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes idleFloatDelay2{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.case.hovered,.case:hover{animation-play-state:paused;transform:translateY(-15px)}@media (max-width:768px){.shelf{width:90%;max-width:600px}.case{width:120px;height:110px;margin:0 5px}.spinning-cd{width:60px;height:60px;right:-30px;top:25px}.cd-hole{width:15px;height:15px}}.album-shelf-container{position:relative;width:100%;display:flex;flex-direction:column;align-items:center}.vinyl-collection{position:relative;width:100%;height:120px;margin-top:-40px}.vinyl-collection .vinyl-container{position:absolute}@media (max-width:768px){.vinyl-collection .vinyl-container{left:calc(90px + (var(--index) * 140px))!important}}:root{--body-color:#858fa7;--light:#fbfbfb;--white:#fff;--dark:#858fa7;--size:170px;--blue-light:rgba(135,206,250,.6);--blue-mid:rgba(173,216,230,.4)}.neo{width:100%;height:100%;overflow:hidden;position:absolute;top:0;left:0;background:linear-gradient(120deg,rgba(133,143,167,0) 30%,rgba(133,143,167,.17))}.neo,.neo-center{display:flex;align-items:center;justify-content:center}.neo-center{width:var(--size);height:var(--size);border-radius:50%;position:relative;z-index:10;background:radial-gradient(circle at 20% 20%,hsla(0,0%,100%,.87) 25%,rgba(133,143,167,.1)),linear-gradient(120deg,rgba(133,143,167,.1),rgba(133,143,167,.27));box-shadow:inset 10px 15px 40px -10px #fff,inset -20px -30px 12px -32px rgba(133,143,167,.4),inset -20px -30px 40px -20px rgba(133,143,167,.27),-10px -15px 17px -2px #fff,12px 18px 12px -18px rgba(133,143,167,.4),12px 20px 20px -12px rgba(133,143,167,.27);animation:center-pulse 4s ease-in-out infinite}.neo-center-glow{position:absolute;top:-30px;left:-30px;right:-30px;bottom:-30px;border-radius:50%;background:radial-gradient(circle,var(--blue-light) 0,var(--blue-mid) 30%,rgba(135,206,250,.1) 60%,transparent 100%);filter:blur(20px);animation:aura-pulse 3s ease-in-out infinite alternate;z-index:-1}.neo-center:before{z-index:2;top:-100%;left:-100%;bottom:-100%;right:-100%;backdrop-filter:blur(7px)}.neo-center:after,.neo-center:before{content:"";position:absolute;pointer-events:none}.neo-center:after{z-index:1;left:10%;top:10%;right:10%;bottom:10%;border-radius:50%;filter:blur(12px);background:radial-gradient(circle at 75% 75%,hsla(0,0%,100%,.87) 25%,rgba(133,143,167,.27));opacity:0;animation:neo-inner-shadow 1.5s ease infinite}.neo-center-inner{width:100%;height:100%;border-radius:50%;background:hsla(0,0%,100%,.05);backdrop-filter:blur(5px);z-index:3}.neo-center-inner,.neo-logo{display:flex;align-items:center;justify-content:center;position:relative}.neo-logo{z-index:4;color:rgba(133,143,167,.8)}.neo-waves{width:220px;height:220px;transform:translate(-50%,-50%) scale(.8);animation:wave-main 12s linear infinite}.neo-wave-background,.neo-waves{position:absolute;top:50%;left:50%;border-radius:50%;opacity:0}.neo-wave-background{width:400px;height:400px;transform:translate(-50%,-50%) scale(1);animation:wave-main-background 15s linear infinite;z-index:-1}.neo-wave-background:before{animation:wave-before-background 8s linear .2s infinite}.neo-wave-background:after,.neo-wave-background:before{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%,-50%) scale(1);border-radius:50%;box-shadow:inset -10px -15px 15px -8px hsla(0,0%,100%,.8),inset 10px 15px 15px -8px rgba(133,143,167,.3),inset 8px 12px 15px -8px hsla(0,0%,100%,.8),inset -15px -20px 10px -25px rgba(133,143,167,.3),inset -15px -20px 30px -15px rgba(133,143,167,.2),-8px -12px 15px -2px hsla(0,0%,100%,.8),10px 15px 10px -15px rgba(133,143,167,.3),10px 15px 18px -10px rgba(133,143,167,.15)}.neo-wave-background:after{animation:wave-before-background -7.5s linear 4s infinite}.neo-wave-primary-1{animation-delay:0s}.neo-wave-primary-2{animation-delay:3s}.neo-wave-primary-3{animation-delay:6s}.neo-wave-primary-4{animation-delay:9s}.neo-waves:before{animation:wave-before 6s linear .2s infinite}.neo-waves:after,.neo-waves:before{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%,-50%) scale(1);border-radius:50%;box-shadow:inset -14px -20px 20px -10px #fff,inset 14px 20px 20px -10px rgba(133,143,167,.4),inset 10px 15px 20px -10px #fff,inset -20px -30px 12px -32px rgba(133,143,167,.4),inset -20px -30px 40px -20px rgba(133,143,167,.27),-10px -15px 17px -2px #fff,12px 18px 12px -18px rgba(133,143,167,.4),12px 20px 20px -12px rgba(133,143,167,.17)}.neo-waves:after{animation:wave-before -5.5s linear 3s infinite}.audio-vis-circle{position:absolute;top:50%;left:50%;border-radius:50%;background:radial-gradient(circle,var(--blue-light) 0,var(--blue-mid) 40%,transparent 70%);backdrop-filter:blur(8px)}.audio-vis-1{width:200px;height:200px;margin:-100px 0 0 -100px;animation:audio-pulse 2s ease-in-out infinite}.audio-vis-2{width:320px;height:320px;margin:-160px 0 0 -160px;animation:audio-pulse 2s ease-in-out .5s infinite}.audio-vis-3{width:440px;height:440px;margin:-220px 0 0 -220px;animation:audio-pulse 2s ease-in-out 1s infinite}.audio-vis-4{width:560px;height:560px;margin:-280px 0 0 -280px;animation:audio-pulse 2s ease-in-out 1.5s infinite}.gradient-glow{position:absolute;top:50%;left:50%;border-radius:50%;filter:blur(25px);pointer-events:none}.glow-layer-1{width:300px;height:300px;margin:-150px 0 0 -150px;background:radial-gradient(circle,var(--blue-light) 0,var(--blue-mid) 30%,transparent 60%);animation:glow-sync 4s ease-in-out infinite}.glow-layer-2{width:500px;height:500px;margin:-250px 0 0 -250px;background:radial-gradient(circle,rgba(135,206,250,.4) 0,rgba(173,216,230,.2) 25%,transparent 50%);animation:glow-sync 4s ease-in-out 1.3s infinite}.glow-layer-3{width:700px;height:700px;margin:-350px 0 0 -350px;background:radial-gradient(circle,rgba(135,206,250,.3) 0,rgba(173,216,230,.1) 20%,transparent 40%);animation:glow-sync 4s ease-in-out 2.6s infinite}@keyframes center-pulse{0%,to{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.05);filter:brightness(1.1)}}@keyframes aura-pulse{0%{opacity:.4;transform:scale(.9)}to{opacity:.8;transform:scale(1.2)}}@keyframes neo-inner-shadow{0%{opacity:0}50%{opacity:1}to{opacity:0}}@keyframes wave-main{30%{opacity:1}}@keyframes wave-before{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}10%{opacity:.7}90%{opacity:.3;transform:translate(-50%,-50%) scale(4.5)}to{opacity:0;transform:translate(-50%,-50%) scale(5)}}@keyframes wave-main-background{25%{opacity:.6}}@keyframes wave-before-background{0%{opacity:0;transform:translate(-50%,-50%) scale(1)}10%{opacity:.5}90%{opacity:.2;transform:translate(-50%,-50%) scale(6)}to{opacity:0;transform:translate(-50%,-50%) scale(7)}}@keyframes audio-pulse{0%,to{opacity:.2;transform:scale(.9)}50%{opacity:.6;transform:scale(1.1)}}@keyframes glow-sync{0%,to{opacity:.3;transform:scale(.8)}50%{opacity:.7;transform:scale(1.2)}}@media (max-width:768px){:root{--size:140px}.neo-logo svg{width:50px;height:50px}.audio-vis-1{width:180px;height:180px;margin:-90px 0 0 -90px}.audio-vis-2{width:280px;height:280px;margin:-140px 0 0 -140px}.audio-vis-3{width:380px;height:380px;margin:-190px 0 0 -190px}.audio-vis-4{width:480px;height:480px;margin:-240px 0 0 -240px}}.audio-vis-circle,.gradient-glow,.neo-waves{will-change:transform,opacity;transform-origin:center}.neo-center{will-change:transform;transform-origin:center}