*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}html,body,main{height:100%}body{margin:0;font-size:16px;user-select:none}body,button{font-family:"Rubik",sans-serif;font-weight:400}.foreground{display:flex;height:100%;flex-direction:column;overflow:auto}.background{display:flex;position:fixed;left:0;top:0;width:100%;height:100%;background:linear-gradient(#9ec9d6, #6a7996);align-items:flex-end;z-index:-1}.background .bar{flex:1 1 auto;background:var(--track-color);opacity:.9;transition:height 40ms linear}.toast{position:fixed;left:50%;top:30%;padding:1rem;background:rgba(0,0,0,.8);color:#fff;border-radius:4px;opacity:0;transform:translate(-50%, -50%) scale(0);pointer-events:none;transition:transform 150ms,opacity 150ms}.toast.in{opacity:1;transform:translate(-50%, -50%) scale(1)}
.board{display:flex;margin:0 auto;background:rgba(255,255,255,.6);overflow:hidden;border-radius:12px}@media(max-width: 459.98px){.board{flex:1 0 auto;width:calc(100% - .8rem);margin-left:.4rem}}.board .wrapper{display:flex;flex-direction:column;margin:2.6rem}@media(max-width: 575.98px){.board .wrapper{margin:2rem}}@media(max-width: 459.98px){.board .wrapper{flex-grow:1;margin:1.6rem}}.board .wrapper .row{display:flex}@media(max-width: 459.98px){.board .wrapper .row{flex:1 1 auto}}.board .cell{--dim: 3rem;flex:0 0 auto;display:flex;width:var(--dim);height:var(--dim);margin:.15rem;color:rgba(0,0,0,.8);background:#fff;font-size:calc(var(--dim)/2);justify-content:center;align-items:center;border-radius:4px}@media(max-width: 575.98px){.board .cell{--dim: 2.8rem}}@media(max-width: 459.98px){.board .cell{flex-grow:1;flex-basis:0;height:auto}}.board .cell.empty{color:transparent}.board .cell.selected{outline:solid 2px rgba(0,0,0,.5)}.board .cell.correct{background:#4caf50}.board .cell.present{background:#ff9800}.board .cell.absent{background:#b0bece}
.keyboard{margin:1.5rem auto}@media(max-width: 575.98px){.keyboard{width:100%;margin:.6rem auto;padding:0 .4rem}}.keyboard .row{display:flex;justify-content:center}.keyboard button{--dim: 3rem;flex:0 0 auto;min-width:var(--dim);height:var(--dim);margin:.15rem;padding:.2rem .8rem;color:rgba(0,0,0,.8);background:#fff;border:none;font-size:calc(var(--dim)/2);text-align:center;line-height:calc(var(--dim)/2);letter-spacing:-0.05em;border-radius:8px;cursor:pointer}@media(max-width: 575.98px){.keyboard button{--dim: 2.5rem;flex-grow:1;min-width:1.6rem;margin:.1rem;padding-left:.2rem;padding-right:.2rem}}.keyboard button:disabled{opacity:.7;pointer-events:none;cursor:default}.keyboard button:hover{background:#e6e6e6}.keyboard button.correct{background:#4caf50}.keyboard button.correct:hover{background:#6ec071}.keyboard button.present{background:#ff9800}.keyboard button.present:hover{background:#ffad33}.keyboard button.absent{background:#b0bece}.keyboard button.absent:hover{background:#cfd8e2}
header{display:flex;width:576px;margin:1.5rem auto;padding:0 .4rem;align-items:center}@media(max-width: 575.98px){header{width:auto;margin:.6rem 0}}header .col{flex:1 0 auto}header .col.left,header .col.right{flex-grow:0;width:5rem}header .col.right{text-align:right}header h1{margin:0;color:rgba(0,0,0,.8);font-size:1.8em;font-weight:500;text-align:center}@media(max-width: 459.98px){header h1{font-size:1.5em}}header button{padding:.2rem .4rem;background:transparent;border:none;border-radius:4px;cursor:pointer}header button:hover{background:rgba(255,255,255,.2)}header button svg{width:1.4rem;height:1.4rem;color:rgba(0,0,0,.8)}
.modal-container{position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;overflow-x:hidden;transition:background-color 300ms ease-in-out;z-index:9}.modal-container .modal{position:relative;width:560px;margin:2rem auto;background:#fff;border-radius:8px;overflow:hidden}@media(max-width: 575.98px){.modal-container .modal{width:calc(100% - .8rem);margin:.6rem .4rem}}.modal-container .modal button.close-btn{position:absolute;top:.4rem;right:.4rem;width:2.5rem;height:2.5rem;padding:0;background:none;border:none;color:rgba(0,0,0,.8);font-size:2rem;line-height:2.5rem;border-radius:4px;cursor:pointer}.modal-container .modal button.close-btn:hover{background:rgba(0,0,0,.1)}.modal-container .modal .body{margin:1.4rem;color:rgba(0,0,0,.8);line-height:1.6em}.modal-container .modal .body h2,.modal-container .modal .body p{margin:1rem 0}.modal-container .modal .body a.link{color:inherit;text-decoration:none;border-bottom:solid 1px}.modal-container.anim-enter-active,.modal-container.anim-enter-done{background:rgba(0,0,0,.6)}.modal-container.anim-enter .modal{opacity:0;transform:scale(0.9)}.modal-container.anim-enter-active .modal{opacity:1;transform:translateX(0);transition:opacity 300ms,transform 300ms}.modal-container.anim-exit .modal{opacity:1}.modal-container.anim-exit-active .modal{opacity:0;transform:scale(0.9);transition:opacity 300ms,transform 300ms}
.track-modal-wrapper{display:flex;justify-content:space-around;align-items:center;height:200px;margin:2rem 0}@media(max-width: 459.98px){.track-modal-wrapper{flex-direction:column;height:auto;margin:1rem 0}.track-modal-wrapper>*:first-child{margin-bottom:1.4rem}}.track-modal-wrapper a.track{flex:0 0 auto;display:flex;flex-direction:column;text-decoration:none}.track-modal-wrapper a.track img.cover{width:160px;height:160px}.track-modal-wrapper a.track img.scannable{width:160px;height:40px}.track-modal-wrapper .share{flex:0 0 auto}.track-modal-wrapper .share .emojis{margin-bottom:.3rem;white-space:pre-wrap}.track-modal-wrapper .share button{width:100%;padding:.3rem;color:#fff;background:rgba(0,0,0,.8);border:none;text-transform:uppercase;border-radius:4px;cursor:pointer}.track-modal-wrapper .share button:hover{background:rgba(26,26,26,.8)}