*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background-color:#121213;color:#fff;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:1rem}#app{max-width:500px;width:100%}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;border-bottom:1px solid #3a3a3c;padding-bottom:1rem}header h1{font-size:1.5rem;font-weight:700}#help-btn{width:36px;height:36px;border-radius:50%;border:1px solid #565758;background:transparent;color:#fff;font-size:1.2rem;cursor:pointer;transition:background-color .2s}#help-btn:hover{background-color:#3a3a3c}main{display:flex;flex-direction:column;gap:2rem}section{text-align:center}section h2{font-size:1rem;font-weight:500;margin-bottom:.75rem;color:#818384}.grid{display:grid;grid-template-rows:repeat(6,1fr);grid-template-columns:repeat(5,1fr);gap:5px;margin:0 auto}.row{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-bottom:5px}.cell{width:52px;height:52px;border:2px solid #3a3a3c;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;text-transform:uppercase;background-color:transparent;transition:all .15s ease}.cell input{width:100%;height:100%;border:none;background:transparent;color:inherit;font-size:inherit;font-weight:inherit;text-align:center;text-transform:uppercase;outline:none}.cell input:focus{outline:none}.cell.green{background-color:#6aaa64;border-color:#6aaa64}.cell.yellow{background-color:#c9b458;border-color:#c9b458}.cell.gray{background-color:#787c7e;border-color:#787c7e}.cell.filled{border-color:#818384}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.shake{animation:shake .3s ease-in-out}.message{min-height:1.5rem;text-align:center;font-size:1rem;margin-top:1rem;color:#fff}.message.error{color:#ff6b6b}.message.success{color:#6aaa64}footer{margin-top:2rem;text-align:center}button{padding:.75rem 1.5rem;font-size:1rem;font-weight:600;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s}#share-btn{background-color:#6aaa64;color:#fff}#share-btn:hover{background-color:#568c52}#share-btn.hidden{display:none}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.modal-overlay.hidden{display:none}.modal-content{background-color:#121213;border:1px solid #3a3a3c;border-radius:8px;padding:1.5rem;max-width:500px;width:100%;position:relative}.modal-close{position:absolute;top:1rem;right:1rem;background:transparent;border:none;color:#818384;font-size:1.5rem;cursor:pointer;padding:0;width:auto}.modal-close:hover{color:#fff}#modal-body h2{margin-bottom:1rem;color:#fff}#modal-body p{margin-bottom:.75rem;line-height:1.5;color:#d7dadc}#modal-body .example-grid{margin:1rem 0;display:inline-block;padding:.75rem;background-color:#3a3a3c;border-radius:4px}.fallback-textarea{width:100%;min-height:100px;margin-top:1rem;padding:.75rem;background-color:#3a3a3c;border:1px solid #565758;border-radius:4px;color:#fff;font-family:monospace;resize:vertical}.success-grid{margin:1rem 0;padding:1rem;background-color:#3a3a3c;border-radius:8px}.emoji-rows{display:flex;flex-direction:column;gap:4px}.emoji-row{font-size:1.5rem;letter-spacing:4px;text-align:center}.share-btn-modal{background-color:#6aaa64;color:#fff;border:none;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;border-radius:4px;cursor:pointer;margin-top:1rem;transition:background-color .2s}.share-btn-modal:hover{background-color:#568c52}.share-instruction{color:#818384;font-size:.9rem;margin-top:.5rem}#modal-body h3{color:#fff;font-size:1rem;margin-top:1.5rem;margin-bottom:.5rem}#modal-body ul{margin-left:1.5rem;line-height:1.8}.hidden{display:none!important}@media (max-width: 400px){.cell{width:40px;height:40px;font-size:1.5rem}header h1{font-size:1.2rem}}