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