.app-container{position:absolute;top:120px;left:5em;width:calc(100vw - 10em);height:calc(100vh - 160px);overflow-x:hidden;overflow-y:scroll}.app-container:before,.app-container:after{content:"";position:fixed;left:80px;right:80px;height:20px;pointer-events:none;transition:opacity .3s}.app-container:before{top:120px;background:linear-gradient(to bottom,rgba(0,0,0,.2),transparent);opacity:0}.app-container:after{bottom:40px;background:linear-gradient(to top,rgba(0,0,0,.2),transparent);opacity:0}.app-container.shadow-top:before{opacity:1;z-index:999999999}.app-container.shadow-bottom:after{opacity:1;z-index:999999999}.timer{display:flex;justify-content:center;align-items:center;font-family:monospace;font-size:20px;margin-bottom:20px}.timer p{margin:0}@media (prefers-color-scheme: dark){.app-container:before{background:linear-gradient(to bottom,rgba(255,255,255,.2),transparent)}.app-container:after{background:linear-gradient(to top,rgba(255,255,255,.2),transparent)}}input[type=range]{height:26px;-webkit-appearance:none;width:100%;max-width:300px;background-color:transparent;pointer-events:auto}input[type=range]:disabled{opacity:.5;cursor:not-allowed}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:5px;cursor:pointer;box-shadow:none!important;background:#d1d1d1;border-radius:14px;border:0px solid #000000}input[type=range]:disabled::-webkit-slider-runnable-track{cursor:not-allowed}input[type=range]::-webkit-slider-thumb{box-shadow:0 0 #000;border:0px solid #000000;height:17px;width:17px;border-radius:12px;background:#007bff;cursor:pointer;-webkit-appearance:none;margin-top:-6px}input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed}input[type=range]:focus::-webkit-slider-runnable-track{background:#d1d1d1}input[type=range]::-moz-range-track{width:100%;height:14px;cursor:pointer;box-shadow:1px 1px 1px #d1d1d1;background:#d1d1d1;border-radius:14px;border:0px solid #000000}input[type=range]:disabled::-moz-range-track{cursor:not-allowed}input[type=range]::-moz-range-thumb{box-shadow:0 0 #000;border:0px solid #000000;height:20px;width:40px;border-radius:12px;background:#007bff;cursor:pointer}input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed}input[type=range]::-ms-track{width:100%;height:14px;cursor:pointer;background:transparent;border-color:transparent;color:transparent}input[type=range]:disabled::-ms-track{cursor:not-allowed}input[type=range]::-ms-fill-lower{background:#d1d1d1;border:0px solid #000000;border-radius:28px;box-shadow:1px 1px 1px #d1d1d140}input[type=range]::-ms-fill-upper{background:#d1d1d1;border:0px solid #000000;border-radius:28px;box-shadow:1px 1px 1px #d1d1d1}input[type=range]::-ms-thumb{margin-top:1px;box-shadow:0 0 #000;border:0px solid #000000;height:20px;width:40px;border-radius:12px;background:#007bff;cursor:pointer}input[type=range]:disabled::-ms-thumb{cursor:not-allowed}input[type=range]:focus::-ms-fill-lower{background:#d1d1d1}input[type=range]:focus::-ms-fill-upper{background:#d1d1d1}@media (prefers-color-scheme: dark){input[type=range]::-webkit-slider-runnable-track{box-shadow:1px 1px 1px #50555c;background:#50555c}input[type=range]:focus::-webkit-slider-runnable-track{background:#50555c}input[type=range]::-moz-range-track{box-shadow:1px 1px 1px #50555c;background:#50555c}input[type=range]::-ms-fill-lower{background:#50555c;box-shadow:1px 1px 1px #50555c}input[type=range]::-ms-fill-upper{background:#50555c;box-shadow:1px 1px 1px #50555c}input[type=range]:focus::-ms-fill-lower{background:#50555c}input[type=range]:focus::-ms-fill-upper{background:#50555c}}nav{position:fixed;top:0;left:0;width:calc(100% - 40px);background:#fff;box-shadow:0 4px 8px #0000001a;padding:20px;z-index:1000;display:flex;justify-content:space-between;align-items:center}nav ul{list-style:none;padding:0;margin:0;display:flex;align-items:center}nav>ul>li{margin:0 15px}nav ul li a{color:#007bff;font-size:18px;padding:10px 15px;border-radius:4px;transition:background .3s ease,color .3s ease}nav>ul>li>a:hover{background:#007bff;color:#fff}nav .logo{width:30px;height:30px;pointer-events:none;color:#000}.inner-nav-sort{position:absolute;top:100%;right:35px;background-color:#fff;border-radius:15px;border:1px solid #ddd}.vertical-nav-line{border-left:.5px solid #ddd;height:55px}.inner-nav-sort>li{padding:20px}.inner-nav-a>p{display:flex;margin:0;cursor:pointer}.nav-info-text{font-size:12px;width:200px;margin-top:5px!important}.sort-algorithm-a{display:flex;align-items:center;gap:10px}.nav-options{padding:20px 40px;display:flex;flex-direction:column;gap:10px}.nav-options>div{display:flex;align-items:center;justify-content:space-between;gap:20px}.nav-options>div p{margin:0}.option-text{display:flex;align-items:center;gap:5px;position:relative}.dim-info-tooltip{display:none;position:absolute;background-color:#f2f2f2;color:#333;border:1px solid #d1d1d1;padding:10px;border-radius:5px;top:calc(100% + 10px);left:calc(100% - 8px);transform:translate(-50%);pointer-events:none;z-index:1;font-size:.8em;width:250px}.option-text svg:hover+.dim-info-tooltip{display:block}.dim-info-tooltip:after{content:"";position:absolute;bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:transparent transparent #d1d1d1 transparent}@media (prefers-color-scheme: dark){nav{background:#1e1e1e;box-shadow:0 4px 8px #0000004d;color:#fff}nav ul li a{color:#fff}nav .logo{color:#fff}.inner-nav-sort{background-color:#222;border:1px solid #686868}.vertical-nav-line{border-left:.5px solid #686868}.nav-info-text{color:#fff}.option-text svg:hover+.dim-info-tooltip{background-color:#1e1e1e;color:#fff;border:1px solid #333}.dim-info-tooltip:after{border-color:transparent transparent #333 transparent}}.switch{position:relative;display:inline-block;width:40px;height:24px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:"";height:20px;width:20px;left:2px;bottom:2px;background-color:#fff;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:#2196f3}input:focus+.slider{box-shadow:0 0 1px #2196f3}input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translate(16px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}@media (prefers-color-scheme: dark){.slider{background-color:#333}.slider:before{background-color:#1e1e1e}}.card-wrapper{display:flex;justify-content:center;align-items:center;width:80vw;height:100%;margin:auto}.card{background:#fff;box-shadow:0 4px 8px #0000001a;border:1px solid #d1d1d1;border-radius:8px;padding:20px;max-width:400px;width:100%;margin:20px;position:relative}.card>label{display:block;margin-bottom:8px;font-weight:700}.card select,.card input:not([type=checkbox]){-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;padding:10px;margin-bottom:16px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:16px}.card input:not([type=checkbox]):last-of-type{margin-bottom:0}.card select{background-image:url(/arrow-down-icon-black.png);background-repeat:no-repeat;background-position:right 2% center;background-size:24px 24px;padding-right:34px}.card button{background:#007bff;color:#fff;border:none;padding:10px 20px;border-radius:4px;cursor:pointer;font-size:16px;transition:background .3s ease;margin-right:10px}.card button:last-of-type{margin-right:0}.card button:hover{background:#0056b3}.card p{background:#f8f9fa;padding:10px;border:1px solid #ddd;border-radius:4px;margin:15px 0 8px}.card p:nth-child(2n){background:#e9ecef}.card-wrapper h4{margin:0}.step-wrapper{max-height:500px;overflow-x:hidden;overflow-y:scroll}.checkbox-wrapper{display:flex}.checkbox-wrapper input[type=checkbox]{margin:1px 8px;height:18px}.switch-container{display:flex;align-items:center;width:100%;justify-content:space-between;margin:5px 0}.switch-container>span{margin-right:10px}.switches{margin:15px 0}.sort-popup-background{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:9999999;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.sort-popup-content{background:#fff;border-radius:8px;box-shadow:0 4px 8px #0000001a;position:relative;width:80vw;height:fit-content}.sort-popup-content .sort-bar-container{max-width:100%}.sort-popup-content .close-button svg{position:absolute;top:14px;right:14px;background:none;border:none;cursor:pointer;font-size:24px;transition:color .3s ease;z-index:9999999}.sort-popup-content .close-button svg:hover{color:#f42b2b}.card .previous-arrays{position:absolute;z-index:9999999;width:calc(100% - 40px);background-color:#eee;max-height:155px;overflow-x:hidden;overflow-y:scroll}.card .previous-array{width:100%;background-color:transparent;padding:10px}.card .previous-array:hover{background-color:#d1d1d1}.step-wrapper{margin-top:15px}.step-wrapper>p:first-of-type{margin-top:0}.step-wrapper>p:last-of-type{margin-bottom:0}@media only screen and (max-width: 1024px){.card-wrapper{flex-direction:column}}@media (prefers-color-scheme: dark){.card{background:#1e1e1e;box-shadow:0 4px 8px #0000004d;color:#fff;border:1px solid #2c2c2c}.card p{background:#2b2b2b;border:1px solid #333333}.card p:nth-child(2n){background:#202020}.card select,.card input:not([type=checkbox]){background-color:#333;border-color:#555;color:#fff}.card select{background-image:url(/arrow-down-icon-white.png)}.card button{background:#007bff;color:#fff}.card button:hover{background:#0056b3}.sort-popup-background{background:#000c}.sort-popup-content{background:#1e1e1e;box-shadow:0 4px 8px #0000004d}.card .previous-arrays{background-color:#333}.card .previous-array:hover{background-color:#444}}.bar-3d{height:200px;width:2em;margin-right:2em;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(-30deg)}.bar-2d{height:200px;width:100%;position:relative}.bar-tooltip{display:none;position:absolute;background-color:#f2f2f2;border:1px solid #d1d1d1;padding:10px 15px 8px;border-radius:.3em;left:50%;transform:translate(-50%);z-index:1;align-items:center;justify-content:center;box-shadow:0 4px 8px #0000001a;pointer-events:none}.bar-tooltip:after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#d1d1d1 transparent transparent transparent}.bar-2d:hover+.bar-tooltip{display:flex}.bar-2d:hover>div{background-color:#189e83!important}.bar-2d .hidden-value{display:none}.bar:last-of-type{margin-right:0}.bar-2d-wrapper{margin-right:2px}.bar-2d-wrapper:last-of-type{margin-right:0}.bar-2d-wrapper:last-of-type .bar-2d-value{width:100%}.bar-3d .side{width:100%;height:100%;position:absolute;background:#64646440}.bar-3d .back{transform:translateZ(-4px)}.bar-3d .left{transform-origin:left;transform:rotateY(90deg)}.bar-3d .right{transform-origin:right;transform:rotateY(-90deg)}.bar-3d .top{height:34px;transform-origin:top;transform:rotateX(-90deg);background:#64646426}.bar-3d .bottom{height:34px;transform-origin:top;transition:.3s}.color-bar{transition:.3s}.input{text-align:center;transform:rotate(-90deg);outline:none;color:#fff}.quantity-button{display:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}@media (prefers-color-scheme: dark){.bar-tooltip{background-color:#131313;border:1px solid #2c2c2c}.bar-tooltip:after{border-color:#2c2c2c transparent transparent transparent}}.sort-card{z-index:999;pointer-events:none;background-color:#f2f2f2;border:1px solid #d1d1d1;box-shadow:0 4px 8px #0000001a;border-radius:10px;width:100%;position:relative}.sort-card-content{padding:35px 40px 15px;height:calc(100% - 98px);display:flex;flex-direction:column;justify-content:space-between;align-items:center;width:calc(100% - 80px)}.sort-card h4{margin:0;background-color:#d1d1d1;border-top-left-radius:10px;border-top-right-radius:10px;padding:15px 25px}.sort-card-frame{margin:0;display:flex;justify-content:center;align-items:center;width:100%}.sort-bar-container{display:flex;justify-content:center;align-items:center;height:220px}.sort-bar-card{border-radius:10px;pointer-events:auto;width:100%;padding:20px 0 5px}.sort-card-control-wrapper{display:flex;justify-content:space-between;align-items:center;width:100%}.controller{font-size:11px;padding:1em;gap:5px;border:none;height:3em;border-radius:5px;background-color:#007bff;color:#fff;cursor:pointer;display:flex;justify-content:center;align-items:center}.sort-card-controls-buttons{height:4em;display:flex;justify-content:center;align-items:center;border-radius:10px;pointer-events:auto;gap:.5em}.sort-card-controls{display:flex;justify-content:center;align-items:center}.controller:disabled{background-color:#ccc;color:#555;cursor:not-allowed}.controller:hover:not(:disabled){background-color:#0056b3}.controller:active:not(:disabled){transform:scale(.95)}.sort-card-mid-buttons svg{transform:scale(1.4)}.i-control{text-align:center;display:flex;align-items:center;gap:10px}.i-control p{min-width:fit-content;font-size:.8rem;margin-block-start:0;margin-block-end:0}.sort-alert{color:#f42b2b;display:flex;align-items:center;gap:10px;font-size:.8em;margin:10px 0 0 10px;position:absolute}.sort-card-mid-buttons{position:relative}.shuffle-tooltip{display:none}.shuffle-btn:not(:disabled):hover+.shuffle-tooltip{display:block;position:absolute;background-color:#d1d1d1;color:#333;padding:10px;border-radius:5px;min-width:max-content;top:60px;left:1rem;transform:translate(-50%)}.shuffle-tooltip:after{content:"";position:absolute;bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:transparent transparent #d1d1d1 transparent}@media (prefers-color-scheme: dark){.sort-card{background-color:#1e1e1e;box-shadow:0 4px 8px #0000004d;color:#fff;border:1px solid #2c2c2c}.sort-card h4{background-color:#131313}.shuffle-btn:not(:disabled):hover+.shuffle-tooltip{background-color:#333;color:#fff}.shuffle-tooltip:after{border-color:transparent transparent #333 transparent}}.sort-container{display:flex;justify-content:center;align-items:center;flex-direction:column;margin:20px 0;gap:20px}.sort-container-cards.insertion-sort-ovw .sort-card{max-width:calc(100% - 346px)}.sort-container-cards.bubble-sort-ovw .sort-card,.sort-container-cards.selection-sort-ovw .sort-card{max-width:calc(100% - 432px)}.sort-container h2{margin-top:0}.sort-definition{background-color:#fff;padding:20px;border-radius:10px;border:1px solid #d1d1d1}.sort-container-card{background-color:#f2f2f2;position:relative;border:1px solid #d1d1d1;border-radius:10px;width:calc(100% - 2px)}.sort-container-card h4{margin:0;background-color:#d1d1d1;border-top-left-radius:10px;border-top-right-radius:10px;padding:15px 25px;cursor:pointer}.sort-container-card-content,.sort-container-card pre{padding:20px!important;margin:0!important;border-bottom-left-radius:10px;border-bottom-right-radius:10px}.copy-button{position:absolute;top:62px;right:10px;cursor:pointer;background-color:#f2f2f2;padding:5px;border-radius:5px}.copy-button:hover{background-color:#d1d1d1}.copy-button button{background:none;border:none;cursor:pointer;font-size:14px;padding:2px;display:flex;justify-content:center;align-items:center}.copy-button span.tooltip{width:120px;background-color:#f2f2f2;text-align:center;border-radius:6px;padding:5px 0;position:absolute;z-index:1;top:120%;right:0;margin-left:-60px}.sort-container-cards{display:flex;justify-content:center;align-items:stretch;gap:20px;width:100%}.sort-container-vertical{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:20px}.sort-container-card-content{display:flex;flex-direction:column;gap:10px}.sort-container-card-content ol,.sort-container-card-content ul,.sort-container-card-content p{margin:0}.sort-container-card-content p:has(>strong){margin-top:10px}.inline-math span{display:inline-block!important}.time-complexity{display:flex;justify-content:space-between}.MathJax{font-size:16px!important}.sort-container-card .collapse-card{position:absolute;top:15px;right:25px}@media (prefers-color-scheme: dark){.sort-definition,.sort-container-card{background-color:#1e1e1e;border:1px solid #2c2c2c}.sort-container-card h4,.copy-button{background-color:#131313}.copy-button:hover{background-color:#2c2c2c}.copy-button button{color:#fff}.copy-button span.tooltip{background-color:#131313;border:1px solid #2c2c2c}}.compare-algorithms-wrapper{display:flex;align-items:center;flex-direction:column;width:80vw;height:100%;margin:auto}.compare-algorithms-card{background:#fff;box-shadow:0 4px 8px #0000001a;border-radius:8px;padding:20px;max-width:calc(100% - 40px);width:100%;margin:20px;position:relative;border:1px solid #d1d1d1}.compare-algorithms-card label{display:block;margin-bottom:8px;font-weight:700}.compare-algorithms-card .select-container{display:flex;justify-content:space-between;gap:20px}.compare-algorithms-card .select-container div{width:50%}.compare-algorithms-card .input-wrapper{display:flex;gap:20px;position:relative}.compare-algorithms-card select,.compare-algorithms-card input:not([type=checkbox]){-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;padding:10px;margin-bottom:16px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:16px}.compare-algorithms-card input:not([type=checkbox]):last-of-type{margin-bottom:0}.compare-algorithms-card select{background-image:url(/arrow-down-icon-black.png);background-repeat:no-repeat;background-position:right 2% center;background-size:24px 24px;padding-right:34px}.compare-algorithms-card button{background:#007bff;color:#fff;border:none;padding:10px 20px;border-radius:4px;cursor:pointer;font-size:16px;transition:background .3s ease;margin-right:10px}.compare-algorithms-card button:last-of-type{margin-right:0}.compare-algorithms-card button:hover{background:#0056b3}.compare-algorithms-card p{background:#f8f9fa;padding:10px;border:1px solid #ddd;border-radius:4px;margin:15px 0 8px}.compare-algorithms-card p:nth-child(2n){background:#e9ecef}.compare-algorithms-card .previous-arrays{position:absolute;z-index:9999999;width:calc(100% - 90px);background-color:#eee;max-height:155px;overflow-x:hidden;overflow-y:scroll;top:40px}.compare-algorithms-card .previous-array{width:100%;background-color:transparent;padding:10px}.compare-algorithms-card .previous-array:hover{background-color:#d1d1d1}.sort-anim-outer-wrapper{z-index:999;pointer-events:none;width:100%}.sort-anim-wrapper{display:flex;flex-direction:column;gap:20px}@media only screen and (max-width: 900px){.compare-algorithms-card .select-container{flex-direction:column;gap:0}.compare-algorithms-card .select-container div{width:100%}.compare-algorithms-card select,.compare-algorithms-card input:not([type=checkbox]){width:100%}}@media (prefers-color-scheme: dark){.compare-algorithms-card{background:#1e1e1e;box-shadow:0 4px 8px #0000004d;color:#fff;border:1px solid #2c2c2c}.compare-algorithms-card p{background:#2b2b2b;border:1px solid #333333}.compare-algorithms-card p:nth-child(2n){background:#202020}.compare-algorithms-card select,.compare-algorithms-card input:not([type=checkbox]){background-color:#333;border-color:#555;color:#fff}.compare-algorithms-card select{background-image:url(/arrow-down-icon-white.png)}.compare-algorithms-card button{background:#007bff;color:#fff}.compare-algorithms-card button:hover{background:#0056b3}.compare-algorithms-card .previous-arrays{background-color:#333}.compare-algorithms-card .previous-array:hover{background-color:#444}}.fixed-footer{font-size:11px}.left-footer{position:fixed;bottom:0;left:20px;width:calc((100% - 80px) / 3);display:flex;justify-content:space-between}.center-footer{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:calc((100% - 80px) / 3);text-align:center}.right-footer{position:fixed;bottom:0;right:20px;width:calc((100% - 80px) / 3);text-align:right}.fixed-footer label.switch{transform:scale(.8)}body{font-family:Arial,sans-serif;background-color:#f4f4f9;color:#333;display:flex;justify-content:center;align-items:center;height:100vh;margin:0;overflow:hidden}body.dotted{background-image:radial-gradient(#000 .5px,transparent .5px),radial-gradient(#000 .5px,#f4f4f9 .5px)}.body-bg{background-color:#f4f4f9;background-size:20px 20px;background-position:0 0,10px 10px}a:link,a:visited,a:hover,a:active{text-decoration:none;color:inherit}*{scrollbar-width:none;-ms-overflow-style:none;overflow:-moz-scrollbars-none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none}::-webkit-scrollbar{display:none}p,span,div,h1,h2,h3,h4,h5,h6,ul,ol,li{cursor:default}#particles-js{position:fixed;width:100vw;height:100vh;top:0;left:0;background-color:#1d1d1d;background-image:url();background-repeat:no-repeat;background-size:cover;background-position:50% 50%;z-index:-1}@media (prefers-color-scheme: dark){body{background-color:#121212;color:#fff}.body-bg{background-color:#121212}body.dotted{background-image:radial-gradient(#333 .5px,transparent .5px),radial-gradient(#333 .5px,#121212 .5px)}}