.carsound-root{--window-width:100vw;--song-transition:.4s ease-in-out;--color-transition:1s ease;--active-color:transparent}.carsound-root *{box-sizing:border-box;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;margin:0;padding:0}.carsound-root svg,.carsound-root img{display:block}.carsound-root path,.carsound-root circle,.carsound-root ellipse,.carsound-root rect,.carsound-root line,.carsound-root polygon,.carsound-root polyline{stroke-width:calc(var(--window-width)*.0007);vector-effect:non-scaling-stroke}.carsound-root{--temp-color:rgba(255,255,255,.67);--fan-value:.5;--test:calc(var(--window-width)*.002);background:#000;position:relative}.carsound-root h1,.carsound-root h3,.carsound-root p,.carsound-root a{color:#fff}.carsound-root h1,.carsound-root h3{font-family:Bruno Ace,sans-serif;font-style:normal;font-weight:400}.carsound-root h1{font-size:calc(var(--window-width)*.04)}.carsound-root h3{font-size:calc(var(--window-width)*.01)}.carsound-root a,.carsound-root p{color:rgba(255,255,255,.4);font-optical-sizing:auto;font-family:JetBrains Mono,monospace;font-weight:600;font-size:calc(var(--window-width)*.01);letter-spacing:.01em;font-style:normal}.carsound-root .container{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;overflow:hidden;max-width:none!important}.carsound-root .content{position:relative;overflow:hidden}.carsound-root .mask{z-index:99;max-width:calc(var(--window-width)*1);object-fit:cover;pointer-events:none;filter:saturate(0)hue-rotate(130deg);position:relative}.carsound-root .interface{width:100%;height:100%;padding-bottom:calc(var(--window-width)*.03);flex-flow:horizontal;justify-content:stretch;display:flex;position:absolute;top:0;left:0}.carsound-root .border{z-index:2;pointer-events:none;border:0;position:absolute;top:20.9%;bottom:auto;left:8.75%;right:8.65%}.carsound-root .border svg{width:100%;height:100%;-webkit-mask:linear-gradient(90deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.8) 0%,rgba(0,0,0,.2) 100%);mask:linear-gradient(90deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.8) 0%,rgba(0,0,0,.2) 100%)}.carsound-root .songs-wrapper{z-index:1;height:55%;perspective:calc(var(--window-width)*.5);transform-style:preserve-3d;justify-content:center;align-items:center;display:flex;position:absolute;top:20.7%;bottom:auto;left:8.75%;right:8.65%;overflow:hidden}.carsound-root .song-waves{gap:calc(var(--window-width)*.07);width:100%;display:flex;position:absolute;top:50%;left:0;transform:translateY(-50%)}.carsound-root .soundwave{flex:1 1 0;width:0;min-width:0;height:100%}.carsound-root .song-waves svg:first-child{-webkit-mask:linear-gradient(to left,transparent 0%,black calc(var(--window-width)*.01),black 100%);mask:linear-gradient(to left,transparent 0%,black calc(var(--window-width)*.01),black 100%)}.carsound-root .song-waves svg:nth-child(2){-webkit-mask:linear-gradient(to right,transparent 0%,black calc(var(--window-width)*.01),black 100%);mask:linear-gradient(to right,transparent 0%,black calc(var(--window-width)*.01),black 100%)}.carsound-root .wave-path{fill:none;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}.carsound-root .wave-path.primary{stroke:var(--active-color);filter:drop-shadow(0 0 calc(var(--window-width)*.004)var(--active-color))}.carsound-root .wave-path.secondary{stroke:var(--active-color);filter:drop-shadow(0 0 calc(var(--window-width)*.003)var(--active-color));stroke-width:2px;opacity:.8;stroke-dasharray:4 2}.carsound-root .center-line{stroke:rgba(255,255,255,.2);stroke-width:1px;stroke-dasharray:5 5}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.carsound-root .songs{aspect-ratio:1;width:10%;transform:translateZ(calc(var(--window-width)*.45))rotateY(0deg);perspective:10000px;transform-style:preserve-3d;pointer-events:none;transition:transform var(--song-transition);position:relative}.carsound-root .song{aspect-ratio:1;perspective:800px;width:100%;transform-style:preserve-3d;position:absolute}.carsound-root .song img{object-fit:cover;border-radius:calc(var(--window-width)*.005);width:100%;height:100%;transition:transform var(--song-transition)}.carsound-root .song-cover{position:relative}.carsound-root .song-shadow{object-fit:cover;width:100%;height:100%;filter:blur(calc(var(--window-width)*.002));opacity:.2;transform:scaleY(-1)translateY(calc(var(--window-width)*-.083));position:absolute;top:0;left:0;-webkit-mask:linear-gradient(transparent 0%,#000 100%);mask:linear-gradient(transparent 0%,#000 100%)}.carsound-root .song-glow{opacity:0;filter:blur(10px);height:100%;transition:opacity .2s ease-in-out;position:absolute;top:0;left:50%;transform:translate(-50%)scaleY(.9)}.carsound-root .content.paused .song-glow{opacity:.7;transition:opacity 1s ease-in-out}.carsound-root .song-info{transform:translate(-50%,calc(var(--window-width)*.05));justify-content:center;align-items:center;gap:calc(var(--window-width)*.005);width:calc(var(--window-width)*1);text-align:center;flex-direction:column;transition:opacity .2s ease-in-out;display:flex;position:absolute;left:50%}.carsound-root .song-title{font-size:calc(var(--window-width)*.0125);letter-spacing:-.02em;color:rgba(255,255,255,.9);font-weight:600}.carsound-root .song-artist{font-size:calc(var(--window-width)*.011);letter-spacing:-.02em;color:rgba(255,255,255,.7);font-weight:400}.carsound-root .songs-ui{z-index:2;position:absolute;top:0;bottom:0;left:0;right:0}.carsound-root .songs-controls{bottom:calc(var(--window-width)*.07);height:calc(var(--window-width)*.012);justify-content:center;align-items:center;gap:calc(var(--window-width)*.02);display:flex;position:absolute;left:50%;transform:translate(-50%)}.carsound-root #toggleBtn{aspect-ratio:1;box-sizing:border-box;cursor:pointer;background:0 0;border:none;outline:none;justify-content:center;align-items:center;display:flex}.carsound-root .play-icon,.carsound-root #toggleBtn.playing .play-icon{display:none}.carsound-root #toggleBtn.playing .pause-icon,.carsound-root #toggleBtn.paused .play-icon{display:block}.carsound-root #toggleBtn.paused .pause-icon{display:none}.carsound-root .songs-controls>*{opacity:.5;cursor:pointer;height:100%;transition:opacity .2s ease-in-out}.carsound-root .songs-controls>:hover{opacity:1}.carsound-root .nav{z-index:2;width:auto;height:calc(var(--window-width)*.03);justify-content:center;align-items:center;gap:calc(var(--window-width)*.04);padding:calc(var(--window-width)*.012)calc(var(--window-width)*.03)calc(var(--window-width)*.002)calc(var(--window-width)*.03);border-radius:calc(var(--window-width)*.04)calc(var(--window-width)*.04)0 0;perspective:2000px;display:flex;position:absolute;bottom:25.2%;left:50%;transform:translate(-50%)}.carsound-root .overlay-ambience{z-index:4;background-color:var(--active-color);pointer-events:none;width:95%;height:80%;transition:background-color var(--color-transition);mix-blend-mode:overlay;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-mask:radial-gradient(transparent 0%,transparent 10%,#000 100%);mask:radial-gradient(transparent 0%,transparent 10%,#000 100%)}.carsound-root .bg-ambience{z-index:1;pointer-events:none;background-color:var(--active-color);opacity:.5;transition:background-color var(--color-transition),opacity var(--color-transition);position:absolute;top:0;bottom:0;left:0;right:0;-webkit-mask:radial-gradient(transparent 0%,transparent 10%,rgba(0,0,0,.02) 20%,rgba(0,0,0,.05) 30%,rgba(0,0,0,.1) 40%,rgba(0,0,0,.2) 50%,rgba(0,0,0,.4) 60%,rgba(0,0,0,.6) 70%,rgba(0,0,0,.7) 80%,rgba(0,0,0,.8) 90%,#000 100%);mask:radial-gradient(transparent 0%,transparent 10%,rgba(0,0,0,.02) 20%,rgba(0,0,0,.05) 30%,rgba(0,0,0,.1) 40%,rgba(0,0,0,.2) 50%,rgba(0,0,0,.4) 60%,rgba(0,0,0,.6) 70%,rgba(0,0,0,.7) 80%,rgba(0,0,0,.8) 90%,#000 100%)}.carsound-root .content.paused .bg-ambience{opacity:.2}.carsound-root{--right-1:linear-gradient(to right,rgba(255,255,255,0) 0%,#fff 12.5%);--right-2:linear-gradient(to right,rgba(255,255,255,0) 12.5%,#fff 25%);--right-3:linear-gradient(to right,rgba(255,255,255,0) 25%,#fff 37.5%);--right-4:linear-gradient(to right,rgba(255,255,255,0) 37.5%,#fff 50%);--right-5:linear-gradient(to right,rgba(255,255,255,0) 50%,#fff 62.5%);--right-6:linear-gradient(to right,rgba(255,255,255,0) 62.5%,#fff 75%);--right-7:linear-gradient(to right,rgba(255,255,255,0) 75%,#fff 87.5%);--right-8:linear-gradient(to right,rgba(255,255,255,0) 87.5%,#fff 100%);--left-1:linear-gradient(to left,rgba(255,255,255,0) 0%,#fff 12.5%);--left-2:linear-gradient(to left,rgba(255,255,255,0) 12.5%,#fff 25%);--left-3:linear-gradient(to left,rgba(255,255,255,0) 25%,#fff 37.5%);--left-4:linear-gradient(to left,rgba(255,255,255,0) 37.5%,#fff 50%);--left-5:linear-gradient(to left,rgba(255,255,255,0) 50%,#fff 62.5%);--left-6:linear-gradient(to left,rgba(255,255,255,0) 62.5%,#fff 75%);--left-7:linear-gradient(to left,rgba(255,255,255,0) 75%,#fff 87.5%);--left-8:linear-gradient(to left,rgba(255,255,255,0) 87.5%,#fff 100%)}.carsound-root .gradient-blurs{z-index:2;pointer-events:none;justify-content:space-between;display:flex;position:absolute;top:0;bottom:0;left:8.75%;right:8.65%}.carsound-root .gradient-blur{width:calc(var(--window-width)*.2);top:0;min-height:100%;position:relative;top:auto;bottom:0;left:0;right:0}.carsound-root .gradient-blur>div,.carsound-root .gradient-blur:before,.carsound-root .gradient-blur:after{position:absolute;top:0;bottom:0;left:0;right:0}.carsound-root .gradient-blur:before{content:"";z-index:1;-webkit-backdrop-filter:blur(.5px);backdrop-filter:blur(.5px)}.carsound-root .gradient-blur>div:first-of-type{z-index:2;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.carsound-root .gradient-blur>div:nth-of-type(2){z-index:3;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.carsound-root .gradient-blur>div:nth-of-type(3){z-index:4;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.carsound-root .gradient-blur>div:nth-of-type(4){z-index:5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.carsound-root .gradient-blur>div:nth-of-type(5){z-index:6;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.carsound-root .gradient-blur>div:nth-of-type(6){z-index:7;-webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px)}.carsound-root .gradient-blur:after{content:"";z-index:8;-webkit-backdrop-filter:blur(64px);backdrop-filter:blur(64px)}.carsound-root .gradient-blur:first-child:before{-webkit-mask:var(--left-1);mask:var(--left-1);-webkit-mask:var(--left-1)}.carsound-root .gradient-blur:first-child>div:first-of-type{-webkit-mask:var(--left-2);mask:var(--left-2);-webkit-mask:var(--left-2)}.carsound-root .gradient-blur:first-child>div:nth-of-type(2){-webkit-mask:var(--left-3);mask:var(--left-3);-webkit-mask:var(--left-3)}.carsound-root .gradient-blur:first-child>div:nth-of-type(3){-webkit-mask:var(--left-4);mask:var(--left-4);-webkit-mask:var(--left-4)}.carsound-root .gradient-blur:first-child>div:nth-of-type(4){-webkit-mask:var(--left-5);mask:var(--left-5);-webkit-mask:var(--left-5)}.carsound-root .gradient-blur:first-child>div:nth-of-type(5){-webkit-mask:var(--left-6);mask:var(--left-6);-webkit-mask:var(--left-6)}.carsound-root .gradient-blur:first-child>div:nth-of-type(6){-webkit-mask:var(--left-7);mask:var(--left-7);-webkit-mask:var(--left-7)}.carsound-root .gradient-blur:first-child:after{-webkit-mask:var(--left-8);mask:var(--left-8);-webkit-mask:var(--left-8)}.carsound-root .gradient-blur:nth-child(2):before{-webkit-mask:var(--right-1);mask:var(--right-1);-webkit-mask:var(--right-1)}.carsound-root .gradient-blur:nth-child(2)>div:first-of-type{-webkit-mask:var(--right-2);mask:var(--right-2);-webkit-mask:var(--right-2)}.carsound-root .gradient-blur:nth-child(2)>div:nth-of-type(2){-webkit-mask:var(--right-3);mask:var(--right-3);-webkit-mask:var(--right-3)}.carsound-root .gradient-blur:nth-child(2)>div:nth-of-type(3){-webkit-mask:var(--right-4);mask:var(--right-4);-webkit-mask:var(--right-4)}.carsound-root .gradient-blur:nth-child(2)>div:nth-of-type(4){-webkit-mask:var(--right-5);mask:var(--right-5);-webkit-mask:var(--right-5)}.carsound-root .gradient-blur:nth-child(2)>div:nth-of-type(5){-webkit-mask:var(--right-6);mask:var(--right-6);-webkit-mask:var(--right-6)}.carsound-root .gradient-blur:nth-child(2)>div:nth-of-type(6){-webkit-mask:var(--right-7);mask:var(--right-7);-webkit-mask:var(--right-7)}.carsound-root .gradient-blur:nth-child(2):after{-webkit-mask:var(--right-8);mask:var(--right-8);-webkit-mask:var(--right-8)}