*{box-sizing:border-box}:root{--slate-100: #f9fafb;--slate-200: #c9cccf;--slate-300: #aeb3b7;--slate-400: #788087;--slate-500: #32393f;--slate-600: #292f33;--slate-700: #21272c;--slate-800: #151a1e;--slate-900: #0f1418;--red-200: #e05252;--red-400: #cc3333;--yellow-400: #fcd34d;--green-200: #00d281;--green-400: #00995d}@supports (color: oklch(0% 0 0)){:root{--green-200: oklch(.75 .2 160);--green-400: oklch(.65 .2 160)}}html,body,#app{height:100%;position:relative;overflow:hidden;overscroll-behavior:none}body{margin:0;padding:20px;display:grid;grid-template-columns:1fr;grid-template-rows:32px 1fr 72px;align-items:center;background-color:var(--slate-900);color:var(--slate-100);font-family:GT Flexa,system-ui,ui-sans-serif,sans-serif;line-height:1;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font-family:inherit;font-size:inherit;background:none;border:none;cursor:pointer}.button{height:48px;min-width:224px;padding:0 20px;background-color:var(--slate-100);border-radius:24px;color:var(--slate-900);font-size:18px;transition:all .25s linear;display:flex;justify-content:center;align-items:center;gap:6px}#header{width:100%;display:flex;justify-content:space-between;align-items:center}#header-logo{font-size:24px;font-weight:400;margin:0}.icon{width:24px;flex-shrink:0;transition:color .25s linear}.icon-button{width:24px;height:24px;display:flex;justify-content:center;align-items:center;border-radius:12px;color:var(--slate-400);transition:background-color .25s linear}#board{width:100%;max-width:640px;aspect-ratio:1;margin:12px auto 0;position:relative;overflow:visible;transition:all .5s cubic-bezier(.65,0,.35,1);animation:blur-in 1s cubic-bezier(.65,0,.35,1);animation-fill-mode:backwards}.tile{width:18%;aspect-ratio:1;position:absolute;left:calc(var(--col) * 20.5% + var(--nudge-x, 0px));top:calc(var(--row) * 20.5% + var(--nudge-y, 0px));display:flex;justify-content:center;align-items:center;text-transform:uppercase;background-color:var(--slate-800);border:.025em solid var(--slate-700);border-radius:.375em;font-size:min(72px,10vw);cursor:grab;user-select:none;-webkit-user-select:none;transition:all .25s cubic-bezier(.61,1,.88,1)}.tile:active{cursor:grabbing}.tile.solved,#help-tutorial .tile.solved{background-color:var(--green-400);border-color:var(--green-200);animation:jump .5s linear;animation-delay:calc((var(--col) + 1) * 50ms)}#help-tutorial .tile{font-size:min(48px,8vw);background-color:var(--slate-600);border-color:var(--slate-500);top:calc(var(--row) * 54% + var(--nudge-y, 0px))}body[data-tutorial-step="1"] #help-tutorial .tile:nth-child(3),body[data-tutorial-step="2"] #help-tutorial .tile:nth-child(9){z-index:10;animation:nudge 2.5s cubic-bezier(.76,0,.24,1) infinite}body[data-tutorial-step="1"] #help-tutorial .tile:nth-child(3){--nudge: translateY(25%)}body[data-tutorial-step="2"] #help-tutorial .tile:nth-child(9){--nudge: translateX(25%)}body[data-status=failed] #board .tile:not(.solved){background-color:var(--red-400);border-color:var(--red-200)}body:not([data-status=in-progress]) #board .tile{pointer-events:none;transition-duration:.5s}body[data-status=new] #board .tile,body[data-status=restored] #board .tile{transition-duration:.5s;transition-timing-function:cubic-bezier(.65,0,.35,1)}#counter{height:40px;width:fit-content;grid-row:3;grid-column:1;display:flex;justify-content:center;align-items:center;margin:0 auto;padding:0 20px;background-color:var(--slate-800);border-radius:20px;transition:all .5s cubic-bezier(.25,1,.5,1);transition-delay:.25s}#counter.warning{animation:warn 1.5s cubic-bezier(.45,0,.55,1)}body:not([data-status=in-progress]) #counter{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(calc(100% + 6vh));transition-delay:1s}#counter-value{height:1em;margin-right:8px;display:flex;align-items:flex-start;position:relative;overflow:hidden;font-size:20px;font-variant-numeric:tabular-nums;transition:color .25s;transition-delay:.25s}#counter.warning #counter-value{color:var(--yellow-400)}body[data-status=failed] :is(#counter.warning #counter-value){color:var(--red-200)}.counter-value-place{transition:transform .5s cubic-bezier(.85,0,.15,1)}#counter-label{margin-bottom:2px;color:var(--slate-400)}#footer{width:100%;grid-row:3;grid-column:1;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:14px;color:var(--slate-400);position:relative;z-index:20;box-shadow:0 0 25vh 15vh #0f1418;transition:all .5s cubic-bezier(.25,1,.5,1);transition-delay:1s}body[data-status=in-progress] #footer{opacity:0;visibility:none;pointer-events:none;box-shadow:0 0 #0f1418;transform:translateY(calc(100% + 6vh));transition-delay:0ms}#footer-button,#footer-countdown{animation:slide-in .75s cubic-bezier(.65,0,.35,1);animation-fill-mode:backwards;animation-delay:.5s}#footer-countdown{animation-delay:.65s}body[data-status=solved] #footer-countdown-current,body[data-status=failed] #footer-countdown-current{display:none}body:not([data-status=solved]):not([data-status=failed]) #footer-countdown-next{display:none}body:not([data-status=new]) #footer-button-play{display:none}body:not([data-status=restored]) #footer-button-continue{display:none}body:not([data-status=solved]):not([data-status=failed]) #footer-button-stats{display:none}.dialog{width:100%;max-width:480px;padding:20px 20px 24px;top:auto;right:0;bottom:0;left:0;z-index:30;background-color:var(--slate-700);color:var(--slate-100);border-radius:24px 24px 0 0;box-shadow:0 0 0 100vmax #0f1418bf;border:none;outline:none;transition:all .5s cubic-bezier(.25,1,.5,1)}.dialog:not([open]){display:block;visibility:hidden;pointer-events:none;transform:translateY(100%);box-shadow:0 0 0 100vmax transparent}.dialog::backdrop{display:none}.dialog-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.dialog-title{font-size:20px}.dialog-button{height:40px;min-width:160px;margin:24px auto 0;font-size:16px}#stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}body[data-can-share=false] #stats-share,body:not([data-status=solved]):not([data-status=failed]) #stats-share{display:none}.stat{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;background-color:var(--slate-600);border-radius:8px}.stat-title{font-size:14px;color:var(--slate-300);line-height:1.15}.stat-value{font-size:24px}#help-tutorial{width:100%;aspect-ratio:2.625;margin-bottom:24px;position:relative;overflow:visible}body:not([data-onboarding]) #help-button{display:none}#help-instructions{text-align:center;line-height:1.25;color:var(--slate-400);margin:0}@media (hover: hover){.button:hover{background-color:var(--slate-200)}.icon-button:hover{color:var(--slate-100)}}@media (min-width: 640px){.dialog{max-width:480px;top:0;border-radius:16px}.dialog:not([open]){transform:translateY(20px);opacity:0}}@keyframes jump{50%{transform:translateY(-.125em)}}@keyframes nudge{50%{transform:var(--nudge)}}@keyframes blur-in{0%{filter:blur(min(2.5vw,16px));opacity:0;transform:translateZ(0) scale(.9)}}@keyframes slide-in{0%{opacity:0;transform:translateY(100%)}}@keyframes warn{50%{transform:scale(1.1)}}