button{padding:.4rem .6rem;background-color:#199fff;border-radius:.4rem;cursor:pointer;font-weight:700;transition:all .2s;font-size:1rem;border:none}@media (min-width: 992px){button{padding:.6rem 1rem}}#app{position:relative;display:flex;flex-direction:column;align-items:center;height:100vh;width:100vw;background-color:#161616;overflow-x:hidden}#background{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:5vw 5vw}@media (min-width: 768px){#background{background-size:3vw 3vw}}@media (min-width: 1200px){#background{background-size:2vw 2vw}}header{width:100%;display:flex;justify-content:center;align-items:center;padding:1rem;position:relative;z-index:10}header:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-color:#161616;box-shadow:0 10px 20px #161616cc;z-index:-1}main{z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;width:100%;max-width:1280px;padding:1rem;gap:3rem}main .btn-selections{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;width:100%}@media (max-width: 768px){main .btn-selections{flex-direction:column}}main .btn-selections .algorithms{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}main .btn-selections .algorithms .dropdown-container{position:relative}main .btn-selections .algorithms #select-algorithm{display:flex;align-items:center;justify-content:space-between;background-color:#f4f4f4;padding:.4rem .6rem;border-radius:.4rem;cursor:pointer;font-weight:700;gap:.5rem}main .btn-selections .algorithms #select-algorithm p{color:#000;margin:0}main .btn-selections .algorithms .algorithm-options{position:absolute;top:3rem;left:0;background-color:#f4f4f4;border-radius:.4rem;display:flex;flex-direction:column;visibility:hidden;opacity:0;transform:translateY(-10px);transition:all .2s ease;overflow:hidden;box-shadow:0 0 5px #0000001a}main .btn-selections .algorithms .algorithm-options .option{padding:.4rem 1rem;cursor:pointer;font-weight:700;color:#000;transition:all .2s}main .btn-selections .algorithms .speaker-btn{width:2rem;cursor:pointer}main .btn-selections .customization-btns{display:flex;flex-direction:column;gap:1rem;width:100%}@media (min-width: 992px){main .btn-selections .customization-btns{flex-direction:row;justify-content:flex-end;width:auto}}main .btn-selections .customization-btns .slider-group{display:flex;flex-direction:column;align-items:center;width:100%}main .btn-selections .customization-btns .slider-group label{font-weight:700;color:#f4f4f4}main .btn-selections .customization-btns .slider-group input[type=range]{width:100%;margin-top:.3rem}main #bar-container{width:100%;flex:1 1 auto;min-height:250px;max-height:500px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;margin-bottom:1rem}button{padding:.4rem .6rem;background-color:#199fff;border-radius:.4rem;cursor:pointer;font-weight:700;transition:all .2s;font-size:1rem}@media only screen and (min-width: 992px){button{padding:.6rem 1rem}}button:hover{background-color:#199fffe6}button:active{background-color:#199fffcc}#app{position:relative;display:flex;flex-direction:column;align-items:center;height:100vh;background-color:#161616;width:100vw}#background{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:5vw 5vw;z-index:0}#background:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(ellipse at center,transparent 80%,rgba(0,0,0,.2)),radial-gradient(ellipse at center,transparent 90%,rgba(10,10,10,.4));pointer-events:none}@media only screen and (min-width: 768px){#background{background-size:3vw 3vw}}@media only screen and (min-width: 1200px){#background{background-size:2vw 2vw}}header{width:100%;position:relative;display:flex;justify-content:center;align-items:center;padding:1rem;z-index:1;z-index:10}header:before{content:"";position:absolute;background-color:#161616;top:0;left:0;width:100%;height:100%;z-index:-1;box-shadow:0 10px 20px #161616cc}main{z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;gap:5rem;width:100%;max-width:1280px;padding:1rem 1rem 0}main .btn-selections{margin-top:1rem;display:flex;width:100%;gap:1rem;justify-content:space-between}@media only screen and (min-width: 992px){main .btn-selections{align-items:center}}main .btn-selections .algorithms{display:flex;flex-direction:column;gap:.4rem}@media only screen and (min-width: 992px){main .btn-selections .algorithms{flex-direction:row;gap:1rem}}main .btn-selections .algorithms #select-algorithm{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-radius:.4rem;cursor:pointer;font-weight:700;background-color:#f4f4f4;font-size:1rem;padding:.4rem .6rem}@media only screen and (min-width: 992px){main .btn-selections .algorithms #select-algorithm{padding:.6rem 1rem}}main .btn-selections .algorithms #select-algorithm:hover{background-color:#f4f4f4e6}main .btn-selections .algorithms #select-algorithm:active{background-color:#f4f4f4cc}main .btn-selections .algorithms #select-algorithm p{color:#000}main .btn-selections .algorithms #select-algorithm span{display:flex;align-items:center}main .btn-selections .algorithms #select-algorithm span svg{width:1rem}main .btn-selections .algorithms .algorithm-options{color:#000;display:flex;flex-direction:column;position:absolute;top:3rem;left:0;background-color:#f4f4f4;border-radius:.4rem;white-space:nowrap;overflow:hidden;transition:all .2s ease;visibility:hidden;transform:translateY(-10px);opacity:0}main .btn-selections .algorithms .algorithm-options .option{color:#000;cursor:pointer;font-weight:700;padding:.4rem 1rem;transition:all .1s;overflow:hidden}main .btn-selections .algorithms .algorithm-options .option:hover{background-color:#199fff;color:#f4f4f4}main .btn-selections .algorithms .algorithm-options.show{visibility:visible;opacity:1;transform:translateY(0)}main .btn-selections .algorithms .speaker-btn{cursor:pointer;width:2rem}main .btn-selections .algorithms .speaker-btn.hidden{display:none}main .btn-selections .customization-btns{display:flex;flex-direction:column;justify-content:flex-start;width:50%;gap:1rem}@media only screen and (min-width: 992px){main .btn-selections .customization-btns{flex-direction:row;justify-content:flex-end}}@media only screen and (min-width: 992px){main .btn-selections .customization-btns div{flex:1}}main .btn-selections .customization-btns div input{width:100%;margin-top:.3rem}main #bar-container{margin-top:auto;display:flex;justify-content:center;align-items:flex-end;width:100%;height:80%}main #bar-container .bar{background:linear-gradient(0deg,#161616 5%,#d2d2d2)}