#root{height:100%;width:100%;margin:0 auto;text-align:center;font-family:Noto Sans Display,sans-serif;color:var(--color-light)}:root{--bg: #009fcc;--color: #36454f;--bg-secondary: #f4f0ec;--accent: #d97f18;--color-light: #f4f0ec;--bg-dark: #161618;--bg-dark-gradient: radial-gradient(ellipse at left, #35353d 0%, #09090b 80%)}body{margin:0;height:100vh;width:100%;background-repeat:no-repeat;object-fit:cover;background:var(--bg-dark-gradient);pointer-events:none;font-size:1rem;line-height:1.4;font-family:Noto Sans Display,sans-serif;font-optical-sizing:auto;font-weight:400;font-style:normal;font-variation-settings:"wdth" 400}body:focus{background-color:var(--bg-dark)}.body-mobile{pointer-events:auto!important}nav{display:flex;gap:12;justify-content:space-between;width:100%;align-items:center;font-size:1.6rem}a{text-decoration:none;color:var(--color-light)}a:focus-visible{outline:3px solid var(--bg-secondary);outline-offset:2px}a:has(.game-link-button){outline:none}.game{animation:fadeInOpacity .3s ease-in}.container{margin:auto;display:flex;justify-content:center;align-items:center}.part-two,.part-three{display:none;opacity:1;animation-name:fadeInOpacity;animation-iteration-count:1;animation-timing-function:ease-in;animation-duration:1s}@keyframes fadeInOpacity{0%{opacity:0}to{opacity:1}}.stats{display:flex;flex-direction:column;align-items:center;min-height:180px}.game-play{min-height:65vh;justify-content:center;flex-direction:column;position:relative}.achieved-container{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly}label>h3{font-weight:500;margin:0}label>h4{padding:1rem}.label{max-width:800px}.achieved{margin:.25em;border-radius:4px;padding:2px 6px;color:var(--color-light);font-weight:600;text-align:center}.display-none{display:none}.display-block{display:block}.safari{max-width:500px;border-bottom:#28536b55 2px solid;padding-bottom:1rem}header{padding:1rem;display:flex;justify-content:space-between;border-bottom:2px solid #28536b55}.instruction{margin:2em;color:#fff}.game .card{background:#ffffff0d;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:20px;margin:0;max-width:none;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.game .label{display:flex;justify-content:center;align-items:center;flex-direction:column;margin-bottom:1rem;color:#fff}.game .relative{padding:0 1rem;width:100%}.game h3{margin:2rem 0 3rem;text-align:center;color:#fff}button{border:0;position:relative;display:block;width:100px;height:32px;background:transparent;border:1px solid rgb(198,198,198);border-radius:0;box-sizing:border-box;margin:1em;padding:.5em 3em;font-size:2vh;color:#fff;font-family:Noto Sans Display,sans-serif}button:focus{transition:1s ease-in-out;background:var(--bg-secondary);color:#000;outline:none}button:focus svg{stroke-dashoffset:-256}button span{width:100px;position:absolute;left:0;top:4px;height:32px}.svg{display:block;position:absolute;left:-1px;top:-1px;fill:none;width:100px;height:32px;stroke:#fff;stroke-dasharray:80 256;stroke-dashoffset:80;transition:1s ease-in-out}.spinner{width:32px;height:32px;position:relative;border-radius:6px;background:#fff;animation:wave 1s ease-in infinite;animation-direction:reverse}@keyframes wave{0%{box-shadow:0 0 #fffc,0 0 0 10px #fff3}to{box-shadow:0 0 0 10px #fff9,0 0 #ffffffe6}}body{display:flex;align-items:center;font-family:sans-serif;letter-spacing:1.5px;--bg-key: linear-gradient(180deg, #1b1b1d 0%, #19191b 55%, #18181a 100%);--bg-key-pressed: linear-gradient( 180deg, #202022 0%, #1d1d1f 55%, #1c1c1e 100% );--box-shadow-key: 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(255, 255, 255, .08);--box-shadow-key-pressed: inset 0 -1px 0 rgba(230, 235, 255, .08), inset 1px 0 0 rgba(230, 235, 255, .15)}#keyboard{opacity:1}.keyboard{display:flex;flex-direction:column;align-items:center;font-family:Noto Sans Display,sans-serif}.keyboard-row{display:flex;gap:calc(var(--u) * .12)}.keyboard-row-top{align-self:end}:root{--u: clamp(12px, 3vw, 20px);--h: var(--u);--gap: calc(var(--u) * .12)}.keyboard{display:grid;grid-template-rows:repeat(6,var(--h));gap:var(--gap);width:max-content}.key{height:var(--h);display:flex;justify-content:center}:root{--u: clamp(48px, 6vw, 6vw);--key-h: calc(var(--u));--gap: calc(var(--u) * .12)}@keyframes flash{0%{background:var(--bg-key-pressed)}to{background:var(--bg-key)}}@keyframes pulse{0%{box-shadow:0 0 #fffc,0 0 0 calc(var(--u) * .08) #fff3}to{box-shadow:0 0 0 calc(var(--u) * .08) #fff9,0 0 #ffffffe6}}.key{background:#000;position:relative;background:var(--bg-key);height:var(--u);max-height:100%;width:var(--u);overflow:hidden;border-radius:5px;padding:calc(var(--u) * .1);box-sizing:border-box;color:#fff;align-items:end;font-weight:300;box-shadow:var(--box-shadow-key)}.key svg{position:relative}.key-pressed{background:var(--bg-key-pressed);box-shadow:inset 0 1px #e6ebff73,inset 0 -1px #e6ebff14,inset 1px 0 #e6ebff26,inset -1px 0 #e6ebff26}.key[data-type=char]{font-size:calc(var(--u) * .3);align-items:center}.key[data-type=word]{font-size:calc(var(--u) * .2);text-transform:lowercase}.new-key{animation:pulse 1s ease-in-out infinite;background:linear-gradient(135deg,#8a8c8f,#b8babd 20%,#f2f3f4 42%,#fff,#f2f3f4 54%,#a5a7aa 72%,#75777a);box-shadow:inset 0 1px #fff9,inset 0 -1px #0000004d,0 2px 4px #0000004d;color:#2c2d2f;text-shadow:0 1px 0 rgba(255,255,255,.5)}.h-05{height:calc(var(--u) * .5)}.h-05-min{min-height:calc(var(--u) * .5)}.h-10{height:calc(var(--u) * .1)}.h-068{height:calc(var(--u) * .68)}.w-068{width:calc(var(--u) * .68)}.w-129{width:calc(var(--u) * 1.29)}.w-156{width:calc(var(--u) * 1.56)}.w-185{width:calc(var(--u) * 1.85)}.w-242{width:calc(var(--u) * 2.42)}.w-551{width:calc(var(--u) * 5.51)}.w-1418{width:calc(var(--u) * 14.18)}.key-group{background:transparent;flex-direction:column}.key-group>.key{transform:translate(9px)}.key-up{border-radius:6px 6px 0 0}.key-down{border-radius:0 0 6px 6px}.key-bottom{align-self:end}.key-left{justify-content:start}.key-right{justify-content:end}.arrow-left{transform:rotate(90deg)}.arrow-up{transform:rotate(180deg)}.arrow-right{transform:rotate(-90deg)}textarea{background:var(--bg-secondary);border-radius:6px;padding:4px;height:100%;font-size:2vh}textarea:focus-visible{outline:5px solid var(--accent);outline-offset:2px}.chord-container{display:inline-flex;align-items:center;justify-content:center;gap:.5rem}.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;overflow:hidden}.confetti-piece{position:absolute;top:-10px;width:10px;height:10px;opacity:0;animation:confetti-fall linear forwards}@keyframes confetti-fall{0%{top:-10px;opacity:1;transform:translate(0) rotate(0)}to{top:100%;opacity:0;transform:translate(100px) rotate(720deg)}}.modal{position:fixed;height:100%;width:100%;background-color:#000;opacity:.9;display:none;top:0;left:0;color:#fff;justify-content:center;align-items:center;z-index:1000}.warning{background-color:var(--charcoal);height:30%;width:30%;display:flex;justify-content:center;align-items:center;text-align:center;padding:1rem;border-radius:1rem;box-shadow:0 1px 10px #a9a9a9}.intro{height:100%;margin-top:1rem;text-align:center;display:flex}.intro,.part-two,.part-three{display:flex;align-items:center;flex-direction:column}.card{background:#ffffff12;box-shadow:0 4px 12px #0000001a;padding:20px 0;margin:20px auto;max-width:800px;background:#ffffff0d;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.2);border-radius:16px}.is-mobile{text-align:center;padding:2rem;max-width:40rem}