*{margin:0;padding:0;box-sizing:border-box;font-family:Px,sans-serif;font-weight:300;-webkit-user-select:none;user-select:none}html{overscroll-behavior:none;scroll-behavior:smooth;cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='32' height='32'><circle r='36' cx='50' cy='50' fill='grey' /></svg>") 16 16,auto}::-webkit-scrollbar{display:none}@font-face{src:url(../fonts/Px-Grotesk-Light.woff);font-family:Px;font-weight:300}@font-face{src:url(../fonts/Px-Grotesk-Regular.woff);font-family:Px;font-weight:400}body{width:100vw}h1{font-weight:300;font-size:50px}button{cursor:pointer;background:#fff;border:solid 1px black}button:hover{cursor:pointer;box-shadow:0 0 20px #e6e6e6}.c_eraser:hover{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='32' height='32'><circle r='32' cx='50' cy='50' stroke='grey' stroke-width='8' fill='none' /><circle r='8' cx='50' cy='50' fill='grey' /></svg>") 16 16,auto}div#title{margin:30px 0 40px;width:100%;display:flex;justify-content:center;position:sticky;top:30px}div#grids{--grids-per-row: 8;--grids-gap: clamp(1.75rem, 2.75rem - var(--grids-per-row) * .08rem, 4rem);width:100%;padding:100px;display:grid;gap:var(--grids-gap);grid-template-columns:repeat(var(--grids-per-row),minmax(0,1fr))}article.grid-container{position:relative;display:flex;flex-direction:column;align-items:center}article.grid-container.dragover.before:not(:has(button.drag:active)):before{content:"";position:absolute;top:0;left:calc(-.5 * var(--grids-gap));transform:translate(.5px);height:100%;width:1px;background:#000}article.grid-container.dragover.after:not(:has(button.drag:active)):after{content:"";position:absolute;top:0;right:calc(-.5 * var(--grids-gap));transform:translate(.5px);height:100%;width:1px;background:#000}body.dragging article.grid-container:not(:has(button.drag:active)) .grid{opacity:.5}div.grid{width:100%;position:relative;display:grid;grid-gap:1px;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(9,1fr);border:1px solid black}article.grid-container div.grid:before{content:"";background:#000;position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}div.cell{width:100%;aspect-ratio:1 / 1;background:#fff}article.grid-container div.buttons{width:100%;display:flex;justify-content:center;align-items:center;gap:8px;visibility:hidden;margin-top:10px}article.grid-container:hover div.buttons,article.grid-container div.buttons:hover{visibility:visible;width:fit-content}article.grid-container div.buttons button{width:26px;height:26px;font-size:15px;border-radius:100px;flex-shrink:0}article.grid-container div.buttons button:hover{box-shadow:0 0 8px #ccc}button.add{font-size:2vw;border-radius:5px;padding:20%;display:flex;align-items:center;justify-content:center}button.add div.icon-add{width:100%;aspect-ratio:1 / 1}div#params{position:fixed;top:25px;right:34px}div#params .param{display:flex;align-items:center}div#params .param label{margin-right:15px}div#params .param input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:1px;outline:none;cursor:pointer;background:#000;width:100px}div#params .param input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;background:#000;border-radius:30px;outline:none}div#modal{width:100vw;height:100vh;position:fixed;top:0;left:0;padding:50px;background:#fff}div#modal.grid{border:none;grid-gap:0}div#modal div.cell{aspect-ratio:auto}.icon-add{background-repeat:no-repeat;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 130'><line x1='65' y1='0' x2='65' y2='130' fill='none' stroke='black' stroke-width='10' /><line x1='0' y1='65' x2='130' y2='65' fill='none' stroke='black' stroke-width='10' /></svg>")}.icon-drag{background-repeat:no-repeat;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 130'><path d='M65 4.5V125M42.5 27.37 65 4.87l22.5 22.5M87.5 102.5 65 125l-22.5-22.5M125.25 64.75H4.75M102.38 42.25l22.5 22.5-22.5 22.5M27.25 87.25l-22.5-22.5 22.5-22.5' fill='none' stroke='black' stroke-width='10' /></svg>")}.icon-clear{background-repeat:no-repeat;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 130'><path d='M64.5 23c23.2 0 42 18.8 42 42s-18.8 42-42 42-42-18.8-42-42c0-16.6 9.63-30.95 23.6-37.77' fill='none' stroke='black' stroke-width='10' /><path d='M18.09 27.2h27v27' fill='none' stroke='black' stroke-width='10' /></svg>")}.icon-copy{background-repeat:no-repeat;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 130'><rect width='72.24' height='76.69' x='14.5' y='41.04' rx='6.56' ry='6.56' fill='none' stroke='black' stroke-width='10' /><path d='M38.26 36.54V17.77h72.24v76.69H91.74' fill='none' stroke='black' stroke-width='10' /></svg>")}.icon-delete{background-repeat:no-repeat;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 130'><path d='M29.09 35.42v67.93s0 15.29 15.2 15.29h41.79s15.2 0 15.2-15.29V35.42M89.74 35.11v-6.3s0-15.07-15.11-15.07H55.74s-15.11 0-15.11 15.07v6.3M15.18 34.98h100' fill='none' stroke='black' stroke-width='10' /></svg>")}.icon-zoom{background-repeat:no-repeat;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 130'><path d='M12 51V12h39M12 79v39h39M118 51V12H79M118 79v39H79' fill='none' stroke='black' stroke-width='14' /></svg>")}