.carousel-container{position:relative;height:1em;overflow:hidden;background-color:#1a1a1a}.carousel-container .carousel{position:absolute;display:flex}@keyframes expand-correct{0%{scale:1}50%{scale:1.1}to{scale:1;background-color:#03b83c;color:#ddd}}@keyframes expand-incorrect{0%{scale:1}50%{scale:1.1}to{scale:1;background-color:#000;color:#ddd}}.letter{font-family:Courier New,Courier,monospace;text-transform:uppercase;flex-shrink:0;display:flex;align-items:center;justify-content:center;text-align:center;width:1em;height:1em}.letter[data-status=correct] .inner{animation:expand-correct .5s ease-in-out forwards}.letter[data-status=incorrect] .inner{animation:expand-incorrect .5s ease-in-out forwards}.letter[data-row-index="0"] .inner{animation-delay:.5s}.letter[data-row-index="1"] .inner{animation-delay:.4s}.letter[data-row-index="2"] .inner{animation-delay:.3s}.letter[data-row-index="3"] .inner{animation-delay:.2s}.letter[data-row-index="4"] .inner{animation-delay:.1s}.letter[data-row-index="5"] .inner{animation-delay:0s}.letter .inner{border-radius:.1em;background-color:#ddd;color:#222;width:1.1em;height:1.1em;line-height:1.1em;font-size:.8em;font-weight:700;-webkit-user-select:none;user-select:none}.modal-container{position:fixed;left:0;bottom:0;background-color:#141414;display:flex;flex-direction:column;justify-content:start;align-items:center;z-index:10;width:100vw;width:100dvw;height:100vh;height:100dvh;box-shadow:0 2em 2em 2em #141414;padding:60px 1em 3em;overflow-y:auto}.modal-container.slide-in{animation:slide-down-modal .5s ease-in-out forwards}.modal-container.slide-out{animation:slide-out-modal .5s ease-in-out forwards}.modal-container .close-modal-button{cursor:pointer;color:#aaa;position:absolute;right:1.5em;top:60px;background-color:transparent;border:none;font-size:1em;font-weight:700;width:2.6em;height:2.6em;padding:0}@keyframes slide-down-modal{0%{bottom:calc(100% + 10em)}to{bottom:0%}}@keyframes slide-out-modal{0%{bottom:0}to{bottom:calc(100% + 10em)}}.help-modal .help-modal-title{margin-top:20px;margin-bottom:0}.help-modal .help-label{margin-top:2em;text-align:center;font-size:1em;text-wrap:wrap}.help-modal .help-carousels-container{max-width:100%;min-height:6em;padding:1em 0;overflow:hidden}.help-modal .help-key-button-container{display:flex;justify-content:center}.help-modal .help-letters{display:flex;justify-content:center;text-align:left}.help-modal .help-letters .letter{font-size:3em}.help-modal .help-letters .help-letter-label{color:#bbb}.help-modal .tap-and-drag-icon{position:absolute;height:3em}.help-modal .help-subtext{font-style:italic;color:#bbb;font-size:.8em;margin-top:0}.help-modal .play-button{font-size:1.8em;padding:.2em .6em;background-color:#03b83c;border:none;border-radius:.2em;margin-top:.4em}.keys-chart-title{margin-top:4em}.keys-chart{display:flex;height:170px;width:240px;gap:.5em;margin-bottom:2em}.keys-chart .column{flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-end;gap:.1em}.keys-chart .column .label{height:20px;color:#bbb}.keys-chart .column .bar{position:relative;background-color:#eee;color:#222}.keys-chart .column .bar.today{background-color:#03b83c;color:#eee}.keys-chart .column .bar.today:after{content:"today";position:absolute;bottom:calc(100% + .2em);left:50%;transform:translate(-50%);text-align:center;font-size:.8em}.keys-chart .column .bar .count{position:absolute;top:.1em;left:50%;font-size:.8em;transform:translate(-50%)}.level-modal{padding-top:100px}.level-modal .date{font-size:.8em}.level-modal .share-button-container{position:relative;font-size:1.2em}.level-modal .share-button-container .share-button{display:block;background-color:#03b83c;color:#000;border:none;border-radius:1em;padding:.2em 2em;display:flex;align-items:center;gap:.5em;font-weight:600}.level-modal .share-button-container .share-button img{height:.7em}.level-modal .share-button-container .share-button-notice{position:absolute;font-size:.7em;left:50%;top:calc(100% + 1em);transform:translate(-50%);background-color:#000;border-radius:.5em;padding:.5em 1em;border:solid #bbb 1px;color:#bbb;opacity:1;text-align:left;text-wrap:nowrap;animation:show-and-hide 5s forwards}.level-modal .click-to-reveal{display:inline-block;font-size:1em;background-color:#fff1;border:none;padding:.8em 1.4em;border-radius:.2em}.level-modal .revealed-word{display:flex;font-size:3em;font-family:Courier New,Courier,monospace;text-transform:uppercase}.level-modal .visit-tomorrow{font-size:.8em;color:#bbb;animation:slide-up-level-modal 1s 1.5s forwards;opacity:0}@keyframes show-and-hide{0%,to{opacity:0}5%,95%{opacity:1}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-up-level-modal{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.carousels{position:relative;background-color:#1a1a1a;display:flex;flex-direction:column;align-items:center;width:100%}.carousels .center{font-size:64px;position:absolute;top:-.2em;left:50%;transform:translate(-50%);width:1.4em;height:calc(100% + .4em);border:solid 10px #979797;border-radius:.1em;z-index:2;pointer-events:none}.test-row{position:relative}.test-row .remaining-keys{font-family:Courier New,Courier,monospace;position:absolute;top:50%;transform:translateY(-50%);left:100%;font-size:2em;text-wrap:nowrap;padding-left:.5em}.test-button{font-size:16px;display:flex;align-items:center;justify-content:center;border:none;border-radius:1em;padding:1em;width:4em;height:4em;background-color:#6b6b6b;cursor:default}.test-button:not([data-disabled=true]){animation:expand-and-contract .5s ease-in-out;background-color:#03b83c;cursor:pointer}.test-button:not([data-disabled=true]):active{scale:.95}.test-button img{max-width:100%;max-height:100%;vertical-align:middle}@keyframes expand-and-contract{0%,to{scale:1}50%{scale:1.1}}#root{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2em;overflow-x:hidden;padding-top:100px}.navbar{padding:0 1.5em;display:flex;align-items:center;background-color:#141414;gap:1em;position:fixed;width:100%;height:60px;top:0;left:0;z-index:20;text-align:left}.navbar .title-container{display:flex;align-items:baseline;gap:0 1em;flex-wrap:wrap}.navbar .title-container .title{font-family:Courier New,Courier,monospace;letter-spacing:.05em;font-size:1.6rem;font-weight:700}.navbar .title-container .date{font-size:.8rem;color:#ddd}.navbar .feedback-link{display:block;margin-left:auto;font-size:.8em;color:#bbb}.navbar .help-button{border:none;background-color:transparent;width:1.4em;height:1.4em;flex-shrink:0;position:relative}.navbar .help-button img{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%}.copyright{margin-top:auto;font-size:.8em;opacity:.5}:root{font-family:Montserrat,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{overflow-x:hidden}body{margin:0;display:flex;justify-content:center;width:100vw;width:100dvw;height:100vh;height:100dvh;color:#eee;background-color:#141414}*{box-sizing:border-box}a,button{text-decoration:none;font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;opacity:.8}a:hover,button:hover{opacity:1}a:active,button:active{opacity:.8}img{pointer-events:none}h1{font-size:2.4em;line-height:1.1;margin-bottom:0}h2{margin-top:0}h3{margin-bottom:0}h4{margin:0;opacity:.8}
