:root{--text-font: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;--display-font: "Crimson Text", system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}html,body{margin:0;padding:0;font-size:16px;font-family:var(--text-font)}h1{font-size:2rem;line-height:1em;margin:.5em 0;font-family:var(--display-font)}h2{font-size:1.5rem;line-height:1em;margin:.5em 0;font-family:var(--display-font)}h3{font-size:1.25rem;line-height:1em;margin:.5em 0;font-family:var(--display-font)}p{line-height:1.5em;margin:1em 0}strong{font-weight:900}button{border:0;outline:0;border-radius:2px;font-family:var(--text-font);text-transform:uppercase;font-weight:600;font-size:.75rem;transition:all ease-out .1s;background:#000;color:#fff;padding:.25rem .5rem;margin:0 .1rem;cursor:pointer}button:disabled{background:#ccc}.root{display:grid;place-items:center;align-content:center;min-height:100vh}.puzzle-app{margin:0 auto;width:320px;padding:10px;transition:all ease-in .2s}.puzzle-app.-loading{opacity:0}.puzzle-app>.title{line-height:1.5rem;font-size:1.2rem;font-weight:normal;letter-spacing:.1em;float:right;margin-top:.65em;font-style:oblique}.puzzle-app>.intro{font-size:.8rem;color:#999}.puzzle-app>.board{position:relative}.puzzle-app>.board>.overlay{position:absolute;top:0;left:0;right:0;height:0;overflow:hidden;opacity:0;display:flex;align-items:center;justify-content:center;font-family:var(--display-font);font-size:2rem;font-style:oblique;color:#fff;text-align:center;transition:all ease-out .5s;cursor:pointer}.puzzle-app.-won>.board>.overlay,.puzzle-app.-empty>.board>.overlay{opacity:1;height:400px}.puzzle-app>.controls{text-align:center;font-family:var(--display-font);font-weight:600;font-style:oblique;font-size:1.25rem;margin:.5em 0}.puzzle-app>.footer{margin-top:2rem;text-align:center;color:#999;font-size:.8rem}.puzzle-app>.footer a{color:#999}.puzzle-board{position:relative;width:300px;height:400px;user-select:none}.puzzle-board>.tile{position:absolute;width:50px;height:50px;text-align:center;line-height:50px;font-size:20px;transition:all .2s;cursor:pointer}.puzzle-board>.tile.-a{background:#2979db}.puzzle-board>.tile.-b{background:#e085ce}.puzzle-board>.tile.-c{background:#ff595e}.puzzle-board>.tile.-d{background:#8ac926}.puzzle-board>.tile.-e{background:#ffca3a}.puzzle-board>.tile.-f{background:#9e69e8}.puzzle-board>.tile.-scored{animation:.8s score}.puzzle-board.-lost>.tile{background:#000}.puzzle-board.-won{background:linear-gradient(150deg, #d76615, #2eecdd, #c600e6, #cdad10, #2eecdd, #c600e6, #d76615, #2eecdd, #c600e6, #cdad10, #2eecdd, #c600e6, #d76615, #2eecdd);background-size:400% 400%;animation:won 3s linear infinite}.puzzle-board.-empty{background:linear-gradient(150deg, #2eecdd, #5bcdc4, #cdad10, #5bcdc4, #2eecdd, #5bcdc4, #cdad10, #5bcdc4, #2eecdd, #cdad10, #5bcdc4, #2eecdd);background-size:400% 400%;animation:empty 3s linear infinite}@keyframes score{0%{opacity:1}20%{opacity:.5}40%{opacity:.75}60%{opacity:.5}80%{opacity:.75}100%{opacity:0}}@keyframes won{0%{background-position:0% 0%}100%{background-position:95% 50%}}@keyframes empty{0%{background-position:0% 0%}100%{background-position:47% 50%}}