#root{width:100%;height:100%;touch-action:none}#app{width:100%;height:100%;display:flex;flex-direction:column}#footer{text-align:center;margin:0 auto;font-family:monospace;font-size:.8rem;padding:2rem}#footer>p{margin-block-start:0;margin-block-end:1rem}kbd{--bg-color: #1a1a1a;--sub-color: #f9f9f9;color:var(--bg-color);background-color:var(--sub-color);display:inline-block;margin:0;padding:.1rem .3rem;border-radius:.1rem;font-size:1rem;line-height:.7rem}@media (prefers-color-scheme: dark){#footer{--bg-color: #f9f9f9;--sub-color: #1a1a1a}}#github{text-decoration:none;display:flex;align-items:center;justify-content:center}#github>img{height:1rem;margin:0 .2rem;vertical-align:middle}#github:visited{color:#747bff}#page{display:flex;flex-direction:column;gap:1rem;max-width:1280px;margin:0 auto;text-align:center;place-items:center;justify-content:center;flex-grow:1}#continue,#try-again{cursor:pointer}.direction-button{padding:2px;width:45px;height:45px;margin:0 .25rem}@media (prefers-color-scheme: dark){.direction-button>svg>path{stroke:#fff}}.direction-button>svg{height:100%;width:100%}.direction-button>svg>path{stroke-width:1px}.direction-button:enabled:active>svg>path{stroke-width:2px}.direction-button:enabled{opacity:1;transition:opacity .25s}.direction-button:disabled{opacity:.5;cursor:default;border:none;transition:opacity .25s}.direction-button:disabled>svg>path{stroke:gray}.grid-container{--grid-size: 470px;--border-width: 7.5px;--background-color: #bbada0;--animation-delay: .1s;--animation-duration: .1s;width:var(--grid-size);height:var(--grid-size);position:relative;background-color:var(--background-color);border:var(--border-width) solid transparent;border-radius:6px;box-sizing:border-box;--font-size-1: 55px;--font-size-2: 45px;--font-size-3: 35px;--font-size-4: 30px}@media screen and (max-width: 480px){.grid-container{--grid-size: calc(100vw - 4rem) ;--font-size-1: 35px;--font-size-2: 25px;--font-size-3: 15px;--font-size-4: 10px}}.grid{width:100%;height:100%;position:absolute}.cell-container{width:25%;height:25%;position:absolute;border:var(--border-width) solid transparent;box-sizing:border-box;border-radius:6px}.cell{height:100%;width:100%;display:flex;justify-content:center;align-items:center;border-radius:3px;font-family:Clear Sans,Helvetica Neue,Arial,sans-serif;font-weight:700;overflow:hidden}.cell-background{width:100%;height:100%;background-color:#eee4da59;border-radius:3px}.cell-moved{animation:var(--animation-delay) moveCell 0s ease-in-out forwards}@keyframes moveCell{to{transform:translate(0)}}.cell-current{visibility:hidden;animation:showCell var(--animation-delay) ease-in-out forwards}@keyframes showCell{to{visibility:visible}}.cell-merged{visibility:hidden;animation:var(--animation-duration) mergeCell var(--animation-delay) ease-in-out forwards}@keyframes mergeCell{80%{transform:scale(1.1)}to{transform:scale(1);visibility:visible}}.cell-new{transform:scale(0);animation:var(--animation-duration) newCell var(--animation-delay) ease-in-out forwards}@keyframes newCell{80%{transform:scale(1.1)}to{transform:scale(1)}}.cell-2{background-color:#eee4da;color:#776e65;box-shadow:0 0 30px 10px #f3d77400,inset 0 0 0 1px #fff0;font-size:var(--font-size-1)}.cell-4{background-color:#eee1c9;color:#776e65;box-shadow:0 0 30px 10px #f3d77400,inset 0 0 0 1px #fff0;font-size:var(--font-size-1)}.cell-8{background-color:#f3b27a;color:#f9f6f2;font-size:var(--font-size-1)}.cell-16{background-color:#f69664;color:#f9f6f2;font-size:var(--font-size-1)}.cell-32{background-color:#f77c5f;color:#f9f6f2;font-size:var(--font-size-1)}.cell-64{background-color:#f75f3b;color:#f9f6f2;font-size:var(--font-size-1)}.cell-128{background-color:#edd073;color:#f9f6f2;font-size:var(--font-size-2)}.cell-256{background-color:#edcc62;color:#f9f6f2;font-size:var(--font-size-2)}.cell-512{background-color:#edc950;color:#f9f6f2;font-size:var(--font-size-2)}.cell-1024{background-color:#edc53f;color:#f9f6f2;font-size:var(--font-size-3)}.cell-2048{background-color:#edc22e;color:#f9f6f2;font-size:var(--font-size-3)}.cell-super{background-color:#3c3a33;color:#f9f6f2;font-size:var(--font-size-4)}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#000}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}