: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:#fafaff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;place-items:center;min-height:100vh}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer;transition:border-color .25s}@font-face{font-family:Poppins;font-style:normal;font-weight:700;src:url(/dev/symages-assets/ttf/Poppins-Regular-CTKNfV9P.ttf) format("truetype")}@font-face{font-family:Kode Mono;font-weight:400 700;src:url(/dev/symages-assets/ttf/KodeMono-CbOeNK3S.ttf)}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}body{overflow:hidden;font-family:Kode Mono;position:relative;padding:0px env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);-webkit-user-select:none;user-select:none}@keyframes font{0%{font-variation-settings:"wght" 400}50%{font-variation-settings:"wght" 700}to{font-variation-settings:"wght" 400}}#root{background-color:#0002;transition:3s}button{z-index:1;color:#000;background-color:#fff;box-shadow:5px 5px #000;border-radius:5px;border:2px solid black;padding:15px;transition:.1s;-webkit-tap-highlight-color:#00000000}button:hover,button:active,div.pack{box-shadow:3px 3px #000}button.spin{animation-timing-function:ease-out}@keyframes buttonSpin{0%{transform:rotate(0)}50%{transform:rotate(365deg)}to{transform:rotate(360deg)}}@keyframes onOff{0%{color:#fff}49%{color:#fff}50%{color:#000}}@keyframes buttonSpinHorizontal{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}to{transform:rotateY(0);box-shadow:5px 5px #000}}#root{width:100vw;height:100vh;overflow:hidden;position:relative}#title{display:flex;opacity:0%;align-items:center;justify-content:center;height:100vh;width:100vw;flex-direction:column;gap:10vh;transition:1s;position:absolute;margin-left:-200%}#title.active{margin-left:0%;position:absolute;transition:1s;opacity:100%;display:flex}#h1container,#h2container{z-index:1}h1,h2{font-family:Kode Mono;font-size:min(20vw,20vh);font-weight:700;color:#000;margin:0;text-align:left;line-height:80%;font-variation-settings:"wght" 700}.letter.active{opacity:0%;animation:blink 1s 1 forwards}.letter{opacity:100%;animation:none}h2{font-size:min(10vw,10vh);text-align:center;text-wrap:nowrap;margin-top:20px}@keyframes blink{0%{opacity:0}99%{opacity:0}to{opacity:100%;transform:none}}#title #startButton{opacity:100%;transition:.5s}#title.active #startButton{opacity:0%;transition:.1s;animation:startButtonAppear .5s 1 2s forwards}@keyframes startButtonAppear{0%{opacity:50%;transform:scale(.25) rotate(-10deg)}to{opacity:100%;transform:scale(1)}}@keyframes startButtonAnimation{0%{transform:scale(.9) rotate(1deg)}10%{transform:scale(.9) rotate(1deg)}to{transform:scale(3);opacity:0}}#select{opacity:0%;height:100vh;width:100vw;flex-direction:column;gap:10vh;transition:1s;position:absolute;margin-left:200%;padding-top:20px;padding-bottom:20px;box-sizing:border-box;z-index:2;overflow-y:scroll}#select.active{margin-left:0%;position:absolute;transition:1s;opacity:100%}div.pack{cursor:pointer;width:100%;height:25px;max-width:min(500px,80%);transition:.33s;transition-timing-function:cubic-bezier(.5,.25,0,1);display:flex;flex-direction:column;margin-top:20px;margin-left:auto;margin-right:auto;font-variation-settings:"wght" 700;overflow:hidden;border-radius:5px;border:2px solid black;background-color:#fff;color:#000;padding:15px;-webkit-tap-highlight-color:#00000000}div.pack.active{height:400px;max-height:80%;justify-content:flex-start}div.levelButtonContainer{width:100%;display:flex;flex-wrap:wrap;gap:5px;height:100%;margin-top:10px}div.levelButton{position:relative;border:1px solid gray;border-radius:5px;width:calc(20% - 6px);height:calc(20% - 6px);text-align:center;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:.33s;background-color:#fff;transition-timing-function:cubic-bezier(.5,.25,0,1);backface-visibility:hidden;font-size:xx-large}@keyframes enterLevel{0%{transform:scale(1)}to{color:#fff;transform:scale(10) rotate(10deg)}}.puzzle{opacity:0%;transition:.66s ease-in-out;transition-timing-function:cubic-bezier(.5,.25,0,1);width:100%;margin-top:100vh;height:0%;flex-direction:column}.puzzle.active{opacity:100%;margin-top:0vh;height:100vh;transition-timing-function:cubic-bezier(.5,.25,0,1);align-items:center;justify-content:center;position:absolute}.gridContainer{margin-top:10vh;margin-bottom:auto;height:100%;padding-top:auto}.grid{opacity:100%;position:relative;transition:1s;max-width:95vw;max-height:80vh;object-fit:contain;margin-left:auto;margin-right:auto;border-radius:15px;display:grid;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);top:50%;-ms-transform:translateY(-50%);transform:translateY(-50%)}.grid.solved{gap:0px;animation:gridWin 3s cubic-bezier(.5,.25,0,1) 0s 1 forwards;animation-play-state:paused}@keyframes gridWin{0%{transform:scale(1) translateY(-50%)}25%{transform:scale(.8) translateY(-60%);top:50%}to{transform:scale(1) translateY(0);top:max(env(safe-area-inset-right),30px)}}.tile{overflow:scroll;scroll-snap-type:y mandatory;border-radius:5px;transition:1s;gap:2px;display:flex;flex-wrap:wrap;transform:scale(.98);width:100%;height:100%;box-sizing:border-box;scrollbar-width:none}.tile.solved{animation:tileBounce 2s cubic-bezier(.5,.25,0,1) 0s 1 forwards;animation-play-state:running;overflow:hidden;transition:1s}@keyframes tileBounce{0%{transform:scale(1) rotate(0);border-radius:10px}60%{transform:scale(.6) rotate(400deg);border-radius:30px;box-shadow:10px 10px 100px #0004;box-sizing:unset}to{transform:scale(1.001) rotate(360deg);border-radius:0;box-shadow:10px 10px 100px #0000}}div.tileImage{scroll-snap-align:start;overflow:hidden;background-position-y:bottom}.winContainer{position:absolute;height:100vh;background-color:#0007;width:100vw;z-index:1;display:flex;align-items:center;justify-content:center;transition:2s;transition-delay:2s}.winContainer.hidden{background-color:#0000;pointer-events:none}.win{position:absolute;width:90vw;left:5vw;gap:10vh;z-index:1;transition:.75s;background-color:none;border-radius:20px;border:2px solid black;overflow:hidden;background-color:#fff;color:#000;padding:10px;box-shadow:5px 5px #000;transform:none;display:flex;flex-direction:row;gap:0px;justify-content:space-between;align-items:center;box-sizing:border-box;transition-delay:2s;height:150px}.win.hidden{transition:.5s;z-index:0;transition-delay:2s;margin-top:50vh;transform:translateY(50vh)}h3{font-family:Kode Mono;font-size:48pt;font-weight:700;color:#000;margin:0;text-align:center;line-height:99%;font-variation-settings:"wght" 700;width:100%;max-width:50%}.winButtons{height:100%;max-height:30vh;display:flex;padding:10px 0 10px 10px;width:100%;justify-content:center;gap:10px;flex-direction:column;align-items:center;max-width:50%}.winButton{box-shadow:none!important;border:1px solid gray;box-sizing:border-box}.backgroundContainer{transform:rotate(10deg) scale(2) translate(25%) translateY(-25%);transform-origin:top left}.backgroundRow{position:absolute;gap:10px}div.backgroundSquare{background-color:#fffffd;border-radius:5px;width:100px;height:100px;animation:backgroundSlide 4s linear 0s infinite forwards;animation-play-state:running;margin-bottom:10px;transition:3s}@keyframes backgroundSlide{0%{transform:translateY(0)}to{transform:translateY(110px)}}@keyframes backgroundSlide2{0%{transform:translateY(0)}50%{transform:translateY(55px) scale(.5) rotate(45deg)}to{transform:translateY(110px) rotate(90deg)}}@keyframes backgroundSlide3{0%{transform:translateY(0)}33%{transform:translate(112px) rotate(15deg) skew(35deg) rotate(170deg) scale(.25)}66%{transform:translate(-20px) rotate(-90deg) skew(50deg) rotate(35deg) scale(.33)}to{transform:translateY(-0px) translate(0)}}#flashEffect{background-color:#fff;position:absolute;width:100vw;height:100vh;z-index:99;transition-delay:.5s;display:none}
