:root{--bg:#eee;--off-color:#333;--on-color:#fff;--border-radius:2em;overflow:hidden}*{margin:0}@font-face{font-style:normal;font-weight:700;src:url(/quicksand.woff2)format("woff2");font-family:Quicksand;font-display:swap;unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}body{background-color:var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:min(15dvh,3em);height:100dvh;display:flex;overflow:hidden}.cell{background-color:var(--off-color);aspect-ratio:1;width:100%;transition:all .5s}.cell.on{background-color:var(--on-color)}.cell:first-child{border-radius:var(--border-radius)0 0 0}.cell:nth-child(3){border-radius:0 var(--border-radius)0 0}.cell:nth-child(7){border-radius:0 0 0 var(--border-radius)}.cell:nth-child(9){border-radius:0 0 var(--border-radius)0}#stages{flex-direction:row;justify-content:center;align-items:center;gap:min(10dvw,4em);display:flex}#container{position:relative}.pattern{border-radius:var(--border-radius);--border-radius:1em;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);width:20dvw;max-width:7em;transition:all .5s;display:grid;box-shadow:-5px -5px 10px #fff,5px 5px 10px #0002}.pattern.done{opacity:.3}#board{border-radius:var(--border-radius);aspect-ratio:1;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:1%;width:90dvw;max-width:calc(30em + 10px);display:grid;box-shadow:-20px -20px 40px #fff}#board .cell{cursor:pointer;width:100%;height:100%;box-shadow:inset 24px 24px 24px #000a,0 0 #0000}#board .cell.on{box-shadow:inset 0 0 #0000,24px 24px 24px #0002}@media (hover:hover){#board .cell:hover{background-color:color-mix(in srgb,var(--on-color)15%,var(--off-color));box-shadow:inset 12px 12px 12px #0004,0 0 #0000}#board .cell:hover.on{background-color:color-mix(in srgb,var(--off-color)10%,var(--on-color));box-shadow:inset 0 0 #0000,12px 12px 24px #0002}}h2{width:100%;color:var(--bg);font-optical-sizing:auto;-webkit-user-select:none;user-select:none;text-align:center;text-shadow:0 0 10px var(--off-color);margin:0;font-family:Quicksand,sans-serif;font-size:72pt;font-style:normal;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.hidden{display:none}