:root{--bg: #0e1116;--panel: #181d25;--line: #2a323d;--ink: #eef3f7;--dim: #93a4b3;--accent: #7c5cff;--cell: #1b212b;--correct: #2f8a5b;--present: #c2a13a;--absent: #353d49;--good: #2f6b46;--bad: #5a1f26;--warn: #5a4a1f}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:radial-gradient(900px 560px at 50% -8%,#1c1a30,var(--bg));color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,sans-serif;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}#app{width:100%;max-width:500px;padding:12px 12px 26px}header{text-align:center;margin-bottom:6px}h1{margin:0;font-size:28px;letter-spacing:6px;font-weight:800;color:var(--accent)}.sub{margin:4px 0 0;color:var(--dim);font-size:13px;line-height:1.4}.sub b{color:var(--ink)}.bar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center;margin:10px 0}.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;overflow:hidden}.seg button{background:none;border:none;color:var(--dim);padding:6px 13px;font:600 13px system-ui;cursor:pointer}.seg button.active{background:var(--accent);color:#fff}.btn{background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:7px 14px;border-radius:999px;font:700 13px system-ui;cursor:pointer}.btn:hover{border-color:var(--accent)}.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.stage{position:relative}.grid{display:flex;flex-direction:column;gap:6px;align-items:center;margin:14px 0 8px}.grow{display:flex;gap:6px}.cell{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--cell);border:2px solid var(--line);border-radius:6px;font:800 28px ui-monospace,monospace;color:var(--ink);text-transform:uppercase}.cell.typed{border-color:var(--dim)}.cell.filled{border-color:transparent}.cell.correct{background:var(--correct)}.cell.present{background:var(--present)}.cell.absent{background:var(--absent)}.grow.shake{animation:shake .36s}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-7px)}40%{transform:translate(7px)}60%{transform:translate(-5px)}80%{transform:translate(5px)}}.feedback{text-align:center;min-height:22px;font:700 14px ui-monospace,monospace;color:var(--dim);margin:6px 0;transition:opacity .2s}.feedback.show{opacity:1}.feedback.good{color:#6fd99a}.feedback.bad{color:#ff9aa6}.feedback.warn{color:#e9c46a}.keyboard{display:flex;flex-direction:column;gap:6px;align-items:center;margin:10px 0}.krow{display:flex;gap:5px;justify-content:center}.key{min-width:30px;height:48px;padding:0 8px;background:#313a47;color:var(--ink);border:none;border-radius:5px;font:700 14px system-ui;cursor:pointer;text-transform:uppercase}.key:hover{filter:brightness(1.12)}.key.wide{min-width:56px;font-size:12px}.key.correct{background:var(--correct)}.key.present{background:var(--present)}.key.absent{background:var(--absent);color:#8a93a0}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#080c10db;border-radius:8px;backdrop-filter:blur(3px)}.overlay.hidden{display:none}.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px 24px;text-align:center;max-width:380px;max-height:90%;overflow-y:auto}.card h2{margin:0 0 6px;font-size:24px;color:var(--accent)}.card p{margin:8px 0;color:var(--dim);font-size:14px;line-height:1.5}.card p b{color:var(--ink);letter-spacing:1px}.card .reveal b{color:var(--accent)}.card .reveal b.anto{color:#e9c46a}.card .explain{font-size:12px;border-top:1px solid var(--line);padding-top:10px;margin-top:12px}.card .row{display:flex;gap:8px;justify-content:center;margin-top:16px}.hint{text-align:center;color:var(--dim);font-size:12px;margin-top:14px;line-height:1.55}.hint b{color:var(--ink)}