*{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;box-sizing:border-box}h1,p{margin:0}body{max-width:600px;margin:0 auto;padding:2em;display:flex;flex-direction:column;gap:2em}footer{text-align:center;font-size:.9em}a{color:#00f;text-decoration:none}input{font-size:1em;padding:.5em}.keypad{position:relative;display:inline-grid;grid-template-columns:repeat(4,1fr);gap:1em;width:18em;margin:1em auto;-webkit-user-select:none;user-select:none}.keypad div{border:1px solid #000;padding:.75em;cursor:pointer;transition:all .1s ease;border-radius:100%;display:flex;aspect-ratio:1 / 1;align-items:center;justify-content:center;font-weight:550;flex-direction:column;width:100%}.keypad div[data-letters]:after{content:attr(data-letters);font-size:.7em;opacity:.6}.keypad div:hover{background:#f0f0f0}.keypad div.active{scale:.9;background:#000;color:#fff}.row{display:flex;gap:1em;padding:1em;border:1px solid #000;border-radius:.5em}.row input{flex-grow:1;border:none;border-bottom:1px solid #000;border-radius:0}.row button{flex-shrink:0;padding:.5em 1em;background-color:#000;color:#fff;border:none;border-radius:.5em;cursor:pointer}