:root{margin:0;padding:0;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-size:16px}*{box-sizing:border-box}body{color:#333;background:#fff;margin:0;padding:1rem}main{text-align:center;flex-direction:column;align-items:center;gap:2rem;display:flex}h1{text-transform:uppercase;margin:0}.grid{flex-direction:column;gap:.25rem;display:flex}.gridRow{flex-direction:row;gap:.25rem;display:flex}.letter{text-transform:uppercase;color:#fff;background:#fff;justify-content:center;align-items:center;width:3rem;height:3rem;font-size:1.5rem;display:flex}.letter.empty{border:1px solid #d1d1d1}.letter.correctLetterAndPlace{background:#6baa64}.letter.correctLetter{background:#dfc56e}.letter.incorrectLetter{background:#656665}.vStack{flex-direction:column;gap:1rem;display:flex}.textInput{color:#222;text-align:center;text-transform:uppercase;background:#fff;border:1px solid #909090;border-radius:4px;outline:none;height:32px;padding:4px 8px}.textInput:focus-visible{border-color:#1976d2}.button{cursor:pointer;color:#333;background:#ddd;border:none;border-radius:4px;padding:8px 16px;font-family:inherit;font-size:1rem;line-height:1rem}.button[disabled]{opacity:.6;cursor:not-allowed}.button:focus-visible{outline-offset:1px;outline:2px solid #1976d2}.button:not([disabled]):hover{background:#aaa}.button.primary{color:#fff;background:#1976d2}.button.primary:not([disabled]):hover{background:#005db9}