:root{--bg:#0f1115;--fg:#e7e9ea;--muted:#9aa0a6;--accent:#6aaa64;--warn:#c9b458;--idle:#3a3a3c;--error:#e74c3c;--card:#151820;--border:#2a2f3a;--btn:#2b3240;--btn-fg:#e7e9ea}*{box-sizing:border-box}body,html{height:100%}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial}.page{max-width:720px;margin:0 auto;padding:24px}.header{margin-bottom:16px}h1{margin:0 0 6px}.tagline{margin:0;color:var(--muted)}.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px}.label{display:block;margin:0 0 6px;color:var(--muted)}.row{display:flex;gap:8px;align-items:center}.input{flex:1 1;min-width:0;background:#0f1218;color:var(--fg);border:1px solid var(--border);border-radius:8px;padding:12px;outline:none}.input:focus{border-color:#3f81ff}.btn{background:var(--btn);color:var(--btn-fg);border:1px solid var(--border);padding:10px 14px;border-radius:8px;cursor:pointer}.btn.primary{background:var(--accent);border-color:#4e7f4b;color:#0c0f0d;font-weight:600}.btn.link{background:transparent;border:0;color:#86a7ff;padding:0}.btn:disabled{opacity:.6;cursor:not-allowed}.hint{margin:6px 0 0;color:var(--muted)}.hint.small{font-size:.9em}.result{margin-top:16px}.error{background:rgba(231,76,60,.1);border:1px solid rgba(231,76,60,.4);color:#ffb3ab;padding:10px 12px;border-radius:8px}.hidden{display:none}.footer{margin-top:16px}.footer,.muted,.prompt{color:var(--muted)}.prompt{margin-bottom:12px}.grid{display:grid;grid-gap:8px;gap:8px;justify-items:center;align-items:center;margin:12px 0}.rowTiles{display:grid;grid-template-columns:repeat(var(--cols),40px);grid-gap:6px;gap:6px}.rowTiles,.tile{justify-content:center}.tile{width:40px;height:40px;border:2px solid var(--idle);display:flex;align-items:center;border-radius:6px;text-transform:uppercase;font-weight:700}.tile.filled{border-color:#5a5f6a}.tile.correct{background:var(--accent);border-color:var(--accent);color:#0c0f0d}.tile.present{background:var(--warn);border-color:var(--warn);color:#0c0f0d}.tile.absent{background:#3a3a3c;border-color:#3a3a3c;color:#cfd2d4}.keyboard{display:grid;grid-gap:6px;gap:6px;margin-top:10px}.kb-row{display:flex;gap:6px;justify-content:center}.key{min-width:32px;padding:8px 10px;border-radius:6px;border:1px solid var(--border);background:#262c36;color:var(--fg);font-weight:600;cursor:pointer}.key.correct{background:var(--accent);border-color:var(--accent);color:#0c0f0d}.key.present{background:var(--warn);border-color:var(--warn);color:#0c0f0d}.key.absent{background:#3a3a3c;border-color:#3a3a3c;color:#cfd2d4}.key.wide{min-width:56px}.status{margin-top:10px;min-height:1.2em}.actions{margin-top:10px;display:flex;gap:8px}button.btn[disabled]{opacity:.6}@media (min-width:520px){.tile{width:48px;height:48px}.rowTiles{grid-template-columns:repeat(var(--cols),48px)}}.legend{display:flex;gap:6px;margin-top:8px;align-items:center}.legend .tile{width:28px;height:28px;font-size:14px}@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}.shake{animation:shake .4s}.hidden-input{position:absolute;left:-9999px;width:0;height:0;opacity:0}.keyboardDock{margin-top:10px}@media (max-width:640px){.page{padding-bottom:220px}.keyboardDock{position:fixed;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(15,17,21,.98),rgba(15,17,21,.92) 60%,rgba(15,17,21,0));padding:16px 16px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--border)}.keyboard{max-width:720px;margin:0 auto;overflow-x:auto}.kb-row{grid-gap:8px;gap:8px;display:grid;grid-template-columns:repeat(var(--kb-cols),1fr)}.key{padding:14px 12px;min-width:0;width:100%}.kb-spacer{height:0}}