html,body,main{height:100%;width:100%;margin:0;padding:0;font-family:IBM Plex Sans Condensed,sans-serif;font-size:18px;background:var(--l-neutral);color:var(--l-object);-webkit-tap-highlight-color:transparent;touch-action:none}main{display:flex;flex-direction:column;align-items:center}.selection-area{background:rgba(46,115,252,.11);border:2px solid rgba(98,155,255,.81);border-radius:.1em}#action-container{margin:16px 0;display:grid;width:95%}#action-container>.label{grid-area:toggle}#action-container>.select{grid-area:select;justify-self:center}#speed{grid-area:speed}#size{grid-area:size}#theme{grid-area:theme;justify-self:center}#reset{grid-area:reset;justify-self:center}#search{grid-area:search;justify-self:end}#instructions{color:var(--main-color);text-align:center;align-self:center;grid-area:instructions;font-weight:100}#heuristic{grid-area:heuristic;justify-self:end;font-size:1.2em}#grid-container{background:var(--l-neutral);display:grid;place-items:center;flex:1;border-radius:12px;width:95%;padding:8px;user-select:none;margin-bottom:28px;box-shadow:inset 4px 4px 16px -7px var(--l-light),inset -7px -7px 9px -6px var(--l-shadow),6px 6px 12px 1px var(--l-shadow)}table{border-collapse:collapse;border-radius:12px;user-select:none}td{border:1px solid #a2b1ca;-webkit-transition:background-color .3s ease-out;-moz-transition:background-color .3s ease-out;-o-transition:background-color .3s ease-out;transition:background-color .3s ease-outne;user-select:none}table td:first-child{border-left:none}table td:last-child{border-right:none}table tr:first-child td{border-top:none}table tr:last-child td{border-bottom:none}table tr:first-child td:first-child{border-top-left-radius:8px}table tr:first-child td:last-child{border-top-right-radius:8px}table tr:last-child td:first-child{border-bottom-left-radius:8px}table tr:last-child td:last-child{border-bottom-right-radius:8px}td:hover{background-color:#a29ff5!important}@media only screen and (max-width: 645px){#action-container{grid-template-areas:"instructions instructions theme reset" "toggle toggle search search" "speed speed speed speed" "size size size size" "select select select select" "heuristic heuristic heuristic heuristic";gap:20px;width:85%}#reset{justify-self:end}#instructions{justify-self:center}#heuristic{justify-self:stretch}#heuristic>.label-text{margin-right:0}#heuristic>.neu-input-container{margin-left:12px}#grid-container{width:85%}}@media only screen and (min-width: 645px){#action-container{grid-template-areas:"toggle instructions instructions reset theme search" "speed speed speed size size size" "select select select heuristic heuristic heuristic";grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;gap:20px;width:93%}#instructions{justify-self:center}#grid-container{width:93%}#heuristic{justify-self:stretch}}@media only screen and (min-width: 910px){#action-container{grid-template-areas:"toggle select select heuristic heuristic reset theme search" "speed speed speed instructions instructions size size size";grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;gap:20px;width:93%}#instructions{justify-self:center}#grid-container{width:93%}}:root{--main-color: #fd8421;--main-color-light: #f39b53;--main-color-shadow: #d16a15;--accent-color: #fd8421;--hole-neutral: #aeaecb;--hole-light: #cbcbdb;--hole-shadow: #9595b0;--thumb-shine: rgba(255, 255, 255, .4);--l-neutral: #dedeed;--l-light: #f1f1f7;--l-shadow: #aaa4c4;--l-object: #8f8fb5}.container{width:calc(100vw - 200px);height:calc(100vh - 200px);display:flex;justify-content:center;align-content:center;flex-wrap:wrap;padding:100px}.neu-button{width:2.5em;height:2.5em;position:relative;display:flex;justify-content:center;align-items:center;cursor:pointer}.neu-button:before{content:"";width:100%;height:100%;border-radius:32px;filter:blur(1.5px);position:absolute;transition-duration:.3s;background:var(--l-neutral);box-shadow:7px 7px 15px var(--l-shadow),-7px -7px 15px var(--l-light)}.neu-button:hover:before{filter:blur(1.5px);box-shadow:-4px -4px 10px var(--l-shadow),4px 4px 10px var(--l-light)}.neu-button>*{transition-duration:.3s;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;filter:blur(0);-webkit-filter:blur(0);transform:translateZ(0);color:var(--l-object)}.neu-button:hover i{color:var(--main-color)!important}.neu-button:active>*{color:var(--main-color)!important}#theme:hover i{color:var(--accent-color)!important}.slider-container{display:flex;justify-content:center;align-items:center}.slider-container>.label-text{margin-right:20px}#speed-slider{direction:rtl}.neu-input-container{position:relative;height:30px;flex:1;padding:0 4px}.neu-input-container:before{cursor:pointer;content:"";position:absolute;width:100%;height:30px;left:0px;border-radius:26px;filter:blur(1.5px);box-shadow:-4px -4px 10px var(--l-shadow),4px 4px 10px var(--l-light)}input[type=range]{-webkit-appearance:none;margin:0;width:100%;height:30px;background:transparent;position:relative}input[type=range]:focus{outline:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin:4px 0;background:var(--main-color);border-radius:100%;box-shadow:inset .8em .8em 5px -7px var(--thumb-shine),inset -.4em -.4em 10px -3px #0003,.7em .5em 7px -.5em #0006;cursor:pointer}input[type=range]::-moz-range-thumb{width:22px;height:22px;background:var(--main-color);border-radius:100%;box-shadow:inset .8em .8em 5px -7px var(--thumb-shine),inset -.4em -.4em 10px -3px #0003,.7em .5em 7px -.5em #0006;cursor:pointer;border:0}.toggle{display:flex;align-items:center}.toggle>[type=checkbox]{position:absolute;left:0;top:0;visibility:hidden}.toggle>[type=checkbox]:checked+label,.toggle>[type=checkbox]:not(:checked)+label{content:"";width:2.5em;height:1.5em;margin:2px 16px 0;position:relative;cursor:pointer}.toggle>[type=checkbox]:checked+label:before,.toggle>[type=checkbox]:not(:checked)+label:before{content:"";width:49px;height:24px;filter:blur(.6px);-webkit-filter:blur(0);transform:translateZ(0);position:absolute;border-radius:1em;background:var(--hole-neutral);box-shadow:0 0 0 1.4px var(--l-light),7px 7px 15px var(--l-shadow),-7px -7px 15px var(--l-light),inset 3px 3px 13px var(--hole-shadow),inset -3px -3px 10px var(--hole-light);transition:all .15s}.toggle>[type=checkbox]:checked+label:before{background:var(--main-color);box-shadow:0 0 0 1.4px var(--l-light),7px 7px 15px var(--l-shadow),-7px -7px 15px var(--l-light),inset 3px 3px 13px var(--main-color-shadow),inset -3px -3px 10px var(--main-color-light)}.toggle>[type=checkbox]:checked+label:after,.toggle>[type=checkbox]:not(:checked)+label:after{content:"";width:20px;height:20px;margin:2px;filter:blur(.3px);-webkit-filter:blur(0);transform:translateZ(0);position:absolute;border-radius:1em;background:var(--l-neutral);left:0;box-shadow:inset 0 0 6px 1px var(--l-light),inset -2px -2px 6px var(--l-shadow);transition:all .2s}.toggle>[type=checkbox]:checked+label:after{left:25px}.select{height:2.5em;width:98%;position:relative}.select:before{content:"";width:100%;height:100%;border-radius:2em;filter:blur(1px);position:absolute;background:var(--l-neutral);box-shadow:7px 7px 15px var(--l-shadow),-7px -7px 15px var(--l-light)}.select select{-webkit-appearance:none;appearance:none;width:100%;height:100%;padding:0 .6em;background:transparent;border:0;position:absolute;font-size:1em;color:var(--l-object);outline:none;cursor:pointer!important}.select .neu-button{width:1.8em;height:1.8em;margin:.4em;right:0;position:absolute;pointer-events:none}.select .neu-button i{margin-top:.15em;font-size:1em}.select:hover .neu-button:before,.select select:focus~.neu-button:before{filter:blur(1.5px);box-shadow:-4px -4px 10px var(--l-shadow),4px 4px 10px var(--l-light)}.select:hover .neu-button i,.select select:focus~.neu-button i{color:var(--main-color)!important}