:root{font-family:Inter,system-ui,monospace,Avenir,Helvetica,Arial,sans-serif;color-scheme:light dark;--green: #00b755;--yellow: #daaf38;--red: #ca4754;--black: #222;--gray: #999}body{background-color:var(--black);display:grid;justify-content:center;padding:32px;margin-top:100px}section{padding:16px;display:flex;flex-direction:column;gap:4px;max-width:500px}time{color:var(--yellow)}input{z-index:-999;position:absolute;top:0;left:0;pointer-events:none;opacity:0}p{display:flex;flex-wrap:wrap;gap:3px 8px;margin:0}letter{color:var(--gray);position:relative}letter.active:before{content:"|";color:var(--yellow);font-size:14px;position:absolute;left:-30%;animation:1s blink infinite ease-in-out}letter.active.is-last:before{left:65%}letter.correct{color:var(--green)}letter.incorrect{color:var(--red)}@keyframes blink{0%,to{opacity:0}50%{opacity:1}}word{border-bottom:1px solid transparent;transition:border-color .3s ease-in-out}word.marked{border-color:var(--red)}#game{display:flex}#results{display:none}h2{font-weight:400;opacity:.4;margin:0;font-size:16px}h3{font-weight:400;font-size:24px;margin:0;color:var(--yellow)}button{background:transparent;border:0;margin-top:32px;padding:8px;opacity:.4;display:inline-block;transition:opacity .3s ease-in-out,transform .3s ease-in-out;cursor:pointer;border-radius:16px}button:hover{background:#444;opacity:1;scale:110%}