:root{font-family:Roboto Condensed,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at top,#273549 0,#111827 40%,#020617);color:#e5e7eb}body #app{width:100%;max-width:720px;padding:2.5rem 2rem 3rem;box-sizing:border-box;background:#0f172ae6;border-radius:.6rem;box-shadow:0 24px 60px #000000a6;border:1px solid rgba(148,163,184,.25)}body h1{margin:0 0 1.5rem;font-size:1.9rem;letter-spacing:.08em;text-transform:uppercase;color:#e5e7eb}body .input-container{margin:.75rem 0 1rem}body input[type=text]{width:100%;box-sizing:border-box;padding:.85rem 1rem;border-radius:.4rem;border:1px solid rgba(148,163,184,.6);background:#0f172ad9;color:#e5e7eb;font-size:1rem;outline:none;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}body input[type=text]::placeholder{color:#6b7280}body input[type=text]:focus{border-color:#38bdf8;box-shadow:0 0 0 1px #38bdf8b3;background:#0f172a}body input[type=text].shake{animation:shake-input .18s ease}@keyframes shake-input{0%{transform:translate(0)}25%{transform:translate(-3px);border-color:#f87171;box-shadow:0 0 0 1px #f87171e6}50%{transform:translate(3px);border-color:#f87171;box-shadow:0 0 0 1px #f87171e6}75%{transform:translate(-2px);border-color:#f87171;box-shadow:0 0 0 1px #f87171e6}to{transform:translate(0)}}.letter-display{margin:1.25rem 0;display:flex;flex-wrap:wrap;justify-content:center}.letter-tile{width:2.3rem;height:2.3rem;display:flex;align-items:center;justify-content:center;margin:.25rem;border-radius:.3rem;background:linear-gradient(145deg,#0f172a,#020617);border:1px solid rgba(148,163,184,.65);color:#e5e7eb;font-weight:600;font-size:1.1rem;text-transform:uppercase;letter-spacing:.03em;box-shadow:0 10px 24px #0009;transition:opacity .22s ease,transform .22s ease,border-color .22s ease,background .22s ease,width .22s ease,padding .22s ease,border-width .22s ease,margin .22s ease}.letter-tile.removed{opacity:0;transform:scale(.3) translateY(10px);background:#0f172a33;border-color:transparent;width:0;padding:0;border-width:0;margin:0}.helper-text{margin-top:.25rem;font-size:.8rem;color:#9ca3af}@media(max-width:600px){#app{margin:1.5rem;padding:1.75rem 1.25rem 2.25rem}.letter-tile{width:2.1rem;height:2.1rem;font-size:1rem}}