::selection{background:#000;color:#fff}body{font-family:Space Grotesk;display:flex;flex-direction:column;min-height:calc(100vh - 2em);justify-content:center;background:#000;color:#fff;margin:1em 0}h1{color:#fff;text-transform:uppercase;text-align:center;font-size:3em;line-height:.8em;margin:0 0 .5em}input,button,select,textarea{font-family:inherit;font-size:inherit;padding:.4em;margin:0 0 .5em;box-sizing:border-box;border:1px solid black}main{flex-wrap:wrap;display:flex;width:80%;margin:0 auto;justify-content:center;gap:1em}#motion,#patterns{flex-basis:calc((100% - 400px)/2 - 4em);max-width:400px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}@media (max-width: 1100px){#motion,#patterns{flex-basis:50%}}@media (max-width: 700px){#motion,#patterns{flex-basis:100%}}div.panel{font-family:Space Grotesk,serif;background:#fff;color:#000;padding:1em}input{font-family:Space Grotesk,serif}input[type=radio]{display:none}customradio{display:inline-block;width:6px;height:6px;border:solid 3px black;transform:rotate(45deg);margin-right:5px}label{cursor:pointer}label:hover customradio{background-color:gray}label:has(input[type=radio]:checked) customradio{background-color:#000}#grid{display:grid;background-color:var(--bg);grid-template:repeat(var(--gridTemplate),1fr) / repeat(var(--gridTemplate),1fr);width:var(--size);height:var(--size);transition:all .5s ease}.container{padding:0;box-sizing:border-box;background:transparent}.triangle{cursor:pointer;box-sizing:border-box;padding:0;background-color:transparent;width:0;height:0;border-left:var(--triSize) solid var(--leftColor);border-bottom:var(--triSize) solid var(--bottomColor)}button{cursor:pointer;background-color:#fff;padding:.2em;margin:.8em 0 0}.selector{-webkit-user-select:none;user-select:none;display:inline-block;margin:0;padding:.2em;font-weight:700;text-align:center;border:solid 1px black;width:20%}.tab{width:50%;border-bottom:none}.selector:not(.active){background:#000;color:gray;cursor:pointer}.selector:first-child:not(.tab){margin-left:.5em}