:root{color:#f4f3e9;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background-color:#264941;font-family:system-ui,sans-serif;line-height:1.5}*{box-sizing:border-box}body{margin:0}.top-screen,.settings-screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:2.5rem;min-height:100svh;padding:2rem 1rem;font-family:Yomogi,cursive;display:flex}.top-screen h1,.settings-screen h1{letter-spacing:.02em;margin:0;font-size:clamp(2.5rem,10vw,4.5rem);font-weight:400}button{max-width:100%;font:inherit;color:inherit;cursor:pointer;background-color:#0000;border:2px solid;border-radius:.5rem;padding:.875rem 1.75rem;font-size:1.125rem;font-weight:400}button:hover:not(:disabled){background-color:#ffffff14}button:focus-visible{outline-offset:5px;outline:3px solid #f4f3e9}button:disabled{opacity:.6;cursor:not-allowed}.settings-screen{gap:1.5rem}.settings-screen>button{margin-top:.75rem}.settings-screen h1{font-size:clamp(2rem,8vw,3rem)}.settings-screen fieldset{border:0;width:min(100%,32rem);min-width:0;margin:0;padding:0}.settings-screen legend{width:100%;margin-bottom:.75rem;font-size:1.25rem}.setting-options{flex-wrap:wrap;justify-content:center;gap:.75rem;display:flex}.setting-options label{cursor:pointer;border:2px solid #f4f3e966;border-radius:.5rem;align-items:center;gap:.5rem;padding:.625rem .875rem;display:flex}.setting-options label:has(input:checked){background-color:#ffffff24;border-color:#f4f3e9}.setting-options label:has(input:focus-visible){outline-offset:4px;outline:3px solid #f4f3e9}.setting-options input{accent-color:#f4f3e9;margin:0}.practice-screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;min-height:100svh;padding:2rem 1rem;font-family:Yomogi,cursive;display:flex}.practice-screen h1,.practice-screen p{margin:0}.practice-screen h1{font-size:clamp(2rem,8vw,3rem);font-weight:400}.practice-prompt{overflow-wrap:anywhere;font-size:1.5rem}.practice-screen form{flex-direction:column;align-items:center;gap:0;width:min(100%,48rem);display:flex}.typing-positions{width:fit-content;max-width:100%;margin-bottom:.75rem;position:relative}.typing-characters{flex-wrap:wrap;justify-content:center;gap:.25rem 1ch;font-family:monospace;font-size:clamp(1.5rem,5vw,2rem);display:flex}.typing-character{border-bottom:3px solid #0000;width:1ch;position:relative}.typing-character.correct{color:#b1c1b9}.typing-character.incorrect{color:#ffb4b4;-webkit-text-decoration:underline wavy;text-decoration:underline wavy}.typing-character.current{background:#ffffff24;border-bottom-color:#f4f3e9}.typing-input{opacity:0;border:0;width:1px;height:1px;padding:0;position:absolute}.typing-characters{cursor:text;border-radius:.25rem;padding:.5rem}.enter-hint{white-space:nowrap;border:1px solid;border-radius:.5rem;padding:.125rem .5rem;font-size:.875rem;animation:1.5s ease-in-out infinite enter-pulse;position:absolute;top:50%;left:calc(100% + 1.5rem);translate:0 -50%}@keyframes enter-pulse{50%{opacity:.6}}@media (prefers-reduced-motion:reduce){.enter-hint{animation:none}}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.long-text .enter-hint{top:calc(100% + .125rem);left:50%;translate:-50%}.typing-positions.long-text{margin-bottom:2.5rem}@media (width<=40rem){.enter-hint{top:calc(100% + .125rem);left:50%;translate:-50%}.typing-positions{margin-bottom:2.5rem}}.practice-screen .question-progress{margin-bottom:.75rem}.practice-screen .practice-prompt{margin-bottom:.25rem}#typing-instructions{color:#c4cec7;flex-wrap:wrap;justify-content:center;column-gap:.5em;max-width:100%;font-size:.875rem;line-height:1.7;display:flex}.practice-screen form>button{margin-top:1.75rem}@media (width<=40rem){#typing-instructions{flex-direction:column;row-gap:.125rem;line-height:1.6}.practice-screen{gap:.625rem;padding:1.5rem 1rem}.practice-screen form>button{margin-top:1.25rem}}.typing-word{gap:.25rem;display:inline-flex}.punctuation-hint{inset-inline:0;color:#f4f3e9;opacity:.45;pointer-events:none;position:absolute;top:-.3em}
