body{height:100vh;margin:0;padding:0;font-family:monospace;text-align:center;background:dimgrey;overflow:hidden;overscroll-behavior:none;user-select:none}
.grid{margin:0 auto;width:320px;height:320px;display:flex;flex-direction:column;background-color:cornflowerblue;border-radius:16px}
.row{display:flex}
.cell{width:64px;height:64px;border-radius:25%;margin:8px;position:relative}
.cell[value]::after{color:black;text-align:center;content:attr(value);font-weight:bold;font-size:24px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.cell:is([value="2"],[value="4"],[value="8"])::after{font-size:40px}
.cell:is([value="16"],[value="32"],[value="64"],[value="8192"])::after{font-size:32px}
.cell:is([value="128"],[value="256"],[value="512"],[value="16384"],[value="32768"],[value="65536"],[value="262144"])::after{font-size:28px}
.cell[value]{background-color:dimgrey}
.cell[value="2"]{background-color:hsl(0,0%,100%)}
.cell[value="4"]{background-color:hsl(40,49%,80%)}
.cell[value="8"]{background-color:hsl(28,82%,71%)}
.cell[value="16"]{background-color:hsl(21,83%,67%)}
.cell[value="32"]{background-color:hsl(11,80%,65%)}
.cell[value="64"]{background-color:hsl(12,82%,57%)}
.cell[value="128"]{background-color:hsl(47,82%,80%)}
.cell[value="256"]{background-color:hsl(47,83%,74%);box-shadow:0 0 16px 8px hsla(47,83%,74%,0.2)}
.cell[value="512"]{background-color:hsl(47,84%,68%);box-shadow:0 0 16px 8px hsla(47,84%,68%,0.25)}
.cell[value="1024"]{background-color:hsl(47,84%,62%);box-shadow:0 0 16px 8px hsla(47,84%,62%,0.3)}
.cell[value="2048"]{background-color:hsl(47,84%,56%);box-shadow:0 0 16px 8px hsla(47,84%,56%,0.35)}
.cell[value="4096"]{background-color:hsl(47,84%,50%);box-shadow:0 0 16px 8px hsla(47,84%,50%,0.4)}
.cell[value="8192"]{background-color:hsl(47,84%,44%);box-shadow:0 0 16px 8px hsla(47,84%,44%,0.45)}.cell[value="8192"]::after{content:'8K'}
.cell[value="16384"]{background-color:hsl(47,84%,38%);box-shadow:0 0 16px 8px hsla(47,84%,38%,0.5)}.cell[value="16384"]::after{content:'16K'}
.cell[value="32768"]{background-color:hsl(47,84%,32%);box-shadow:0 0 16px 8px hsla(47,84%,32%,0.55)}.cell[value="32768"]::after{content:'32K'}
.cell[value="65536"]{background-color:hsl(47,83%,26%);box-shadow:0 0 16px 8px hsla(47,84%,26%,0.6)}.cell[value="65536"]::after{content:'65K'}
.cell[value="131072"]{background-color:hsl(47,82%,20%);box-shadow:0 0 16px 8px hsla(47,84%,20%,0.65)}.cell[value="131072"]::after{content:'131K'}
.cell[value="262144"]{background-color:black;box-shadow:0 0 12px 10px #000000}.cell[value="262144"]::after{content:'how';color:white}
/* 262k is impossible to get simply due to the lack of space */
#reset{background:#ffffff80;border-radius:4px;padding:4px;font-size:2em;text-align:center;position:absolute;left:50vw;transform:translateX(-50%);cursor:pointer;bottom:-3em;transition:bottom 1s ease-in-out}
#reset.shown{bottom:5em}
#helptext{width:100vw;text-align:center;position:absolute;bottom:-3em;transition:bottom 1s ease-in-out}
#helptext.shown{bottom:3em}