*{box-sizing:border-box;margin:0}:root{--bg: #f6f4f0;--surface: #fdfcfa;--ink: #3d3a36;--ink-soft: #8a857e;--line: #e4e0d9;--accent: #a8b8a5;--accent-soft: #e7ece5;--highlight: #d9e3d6}body{background:var(--bg);color:var(--ink);font-family:Segoe UI,system-ui,-apple-system,sans-serif}.app{max-width:720px;margin:0 auto;padding:3rem 1.5rem 4rem;display:flex;flex-direction:column;gap:1.75rem;align-items:center}.header{text-align:center}.header h1{font-size:1.6rem;font-weight:600;letter-spacing:.35em;padding-left:.35em}.subtitle{color:var(--ink-soft);font-size:.95rem;margin-top:.25rem}.mode-switch{display:flex;gap:.5rem;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.3rem}.mode-switch button{border:none;background:transparent;color:var(--ink-soft);font-size:.9rem;padding:.45rem 1.1rem;border-radius:999px;cursor:pointer}.mode-switch button.active{background:var(--accent-soft);color:var(--ink)}.guided-info{display:flex;flex-direction:column;align-items:center;gap:.9rem;font-size:.9rem;color:var(--ink-soft)}.guided-info select{font-size:.9rem;padding:.35rem .5rem;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}.word-context{display:flex;flex-direction:column;align-items:center;gap:.15rem}.word-target{font-size:2.2rem;color:var(--ink)}.word-meta{font-size:.9rem}.typing-area{width:100%;min-height:5.5rem;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.6rem;font-size:2.4rem;line-height:1.4;word-break:break-all}.composing{border-bottom:3px solid var(--accent)}.placeholder{color:var(--ink-soft);font-size:1rem}.completion{color:var(--ink);font-size:1rem}.again{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:.3rem .8rem;margin-left:.5rem;cursor:pointer;font-size:.9rem}.again:hover{background:var(--accent-soft)}.keyboard{display:flex;flex-direction:column;gap:.4rem;align-items:center;-webkit-user-select:none;user-select:none}.keyboard-row{display:flex;gap:.4rem}.key{width:52px;height:56px;background:var(--surface);border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;transition:background .12s ease,border-color .12s ease,box-shadow .12s ease}.key-wide{width:110px}.key-latin{font-size:.65rem;color:var(--ink-soft)}.key-jamo{font-size:1.15rem}.key-expected{background:var(--highlight);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),0 0 14px #a8b8a58c}.key-pressed{background:var(--accent-soft)}.footer{color:var(--ink-soft);font-size:.85rem}