:root{--bg:#f4f6f9;--surface:#ffffff;--surface-2:#e8edf3;--text:#1a1d21;--muted:#5f6873;--line:#d3dae3;--accent:#1f5fa8;--accent-ink:#ffffff;--ok:#1f7a4d;--ok-bg:#e3f3ea;--ng:#b3261e;--ng-bg:#fbe5e3;--warn:#8a5a00;--warn-bg:#fff2d6;--radius:14px;--shadow:0 1px 2px rgb(0 0 0/6%),0 4px 14px rgb(0 0 0/6%);color-scheme:light}@media (prefers-color-scheme:dark){:root{--bg:#121417;--surface:#1c1f23;--surface-2:#272b31;--text:#eef1f5;--muted:#9aa3ae;--line:#353a41;--accent:#6ea8ff;--accent-ink:#06142a;--ok:#6fd39c;--ok-bg:#173325;--ng:#ff8a80;--ng-bg:#3a1a18;--warn:#ffcf6e;--warn-bg:#3a2c10;--shadow:none;color-scheme:dark}}*{box-sizing:border-box}body,html{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Hiragino Sans,Noto Sans JP,sans-serif;line-height:1.5;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}main{max-width:560px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom))}h1{font-size:1.6rem;margin:.5rem 0 1rem}h2{font-size:1.15rem;margin:1.5rem 0 .5rem}.card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);padding:14px 16px}.card,.note{border-radius:var(--radius);margin:12px 0}.note{background:var(--warn-bg);color:var(--warn);padding:12px 14px;font-size:.95rem}.muted{color:var(--muted);font-size:.9rem}a{color:var(--accent)}.kb{--key-h:clamp(46px,7.2dvh,62px);--gap:6px;position:fixed;left:0;right:0;bottom:0;z-index:10;padding:8px 4px max(8px,env(safe-area-inset-bottom));background:var(--surface-2);border-top:1px solid var(--line);touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.kb-grid{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:var(--key-h);grid-gap:var(--gap);gap:var(--gap)}.kb-key{position:relative;border:none;border-radius:8px;background:var(--surface);color:var(--text);box-shadow:0 1px 0 rgb(0 0 0/25%);font:inherit;padding:0;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.kb-fn{background:var(--line);font-size:.95rem}.kb-fn:disabled{color:var(--muted)}.kb-inert{opacity:.45;pointer-events:none}.kb-enter{grid-row:span 2}.kb-kana.kb-active{background:var(--line)}.kb-kana.kb-unmapped{color:var(--muted)}.kb-center{font-size:1.45rem;line-height:1}.kb-center.kb-small{font-size:.85rem}.kb-around{position:absolute;font-size:.62rem;line-height:1;color:var(--muted)}.kb-l{left:6px}.kb-l,.kb-r{top:50%;transform:translateY(-50%)}.kb-r{right:6px}.kb-u{top:4px}.kb-d,.kb-u{left:50%;transform:translateX(-50%)}.kb-d{bottom:4px}.kb-fan{position:absolute;width:0;height:0;pointer-events:none;z-index:20}.kb-fan-cell{position:absolute;left:0;top:0;width:var(--cell);height:var(--cell);display:grid;place-items:center;font-size:1.6rem;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:10px;box-shadow:0 2px 10px rgb(0 0 0/25%)}.kb-fan-cell.kb-fan-on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.with-kb{padding-bottom:calc(4 * clamp(46px, 7.2dvh, 62px) + 3 * 6px + 16px + env(safe-area-inset-bottom) + 24px)}.typed{min-height:3.2em;font-size:1.8rem;line-height:1.4;white-space:pre-wrap;word-break:break-all}.caret{display:inline-block;width:2px;height:1.1em;vertical-align:-.15em;background:var(--accent);animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}.seg{display:flex;gap:6px;flex-wrap:wrap}.btn,.seg button{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:6px 12px;font:inherit;font-size:.9rem}.seg button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.row{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}.links{list-style:none;padding:0;margin:0}.links a{display:block;padding:14px 16px;margin:8px 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--text);font-weight:600}.links small{display:block;font-weight:400;color:var(--muted)}