/* 墨線鍵盤的示意動畫（不是實機畫面），jetpiggy.com 和 ginput.jetpiggy.com 共用：兩站的 kb.css 要一模一樣。
   大小跟 figure 的闊度走（cqw），figure 的闊度由各站的 style.css 定。
   顏色用各站 style.css 的 --paper-2、--ink、--muted、--pink、--blue-text；影子和選中的顏色可以用 --kb-shadow、--kb-soft、--kb-accent 改。 */
.kb-demo { margin: 0; container-type: inline-size; }
.kb-demo:not(.ready) { display: none; }
.kb-demo figcaption { margin-top: 10px; font-family: var(--zh); font-size: 14px; line-height: 1.3; color: var(--muted); }
.kb-demo figcaption::before { content: ""; display: inline-block; width: 1.6em; border-top: 2px dashed var(--muted); vertical-align: .3em; margin-right: 7px; }
.kb { position: relative; border: 3px solid var(--ink); border-radius: 12px 12px 26px 26px; background: #E3ECF3; box-shadow: 5px 5px 0 var(--kb-shadow, #CDEFE9); overflow: hidden; -webkit-user-select: none; user-select: none; }
.kb-field { margin: 2.6cqw 2.6cqw 0; padding: 0 3.6cqw; height: 10.5cqw; display: flex; align-items: center; background: var(--paper-2); border: 2px solid var(--ink); border-radius: 99px; font-family: var(--zh); font-size: 4.3cqw; line-height: 1; white-space: pre; overflow: hidden; }
.kb-comp { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
.kb-sel { background: #BBD6F2; }
.kb-caret { display: inline-block; width: 2px; height: 1.2em; margin: 0 -1px; background: var(--blue-text); vertical-align: -.2em; animation: kb-blink 1s steps(2, start) infinite; }
@keyframes kb-blink { to { visibility: hidden; } }
.kb-bar { height: 10.5cqw; display: flex; align-items: center; gap: 5cqw; padding: 0 4cqw; font-family: var(--zh); font-size: 4cqw; line-height: 1; white-space: nowrap; overflow: hidden; }
html[lang="en"] .kb-bar { font-family: var(--body); }
.kb-bar .tool { color: var(--muted); padding: 1.4cqw 0; }
.kb-bar .mic, .kb-bar .x { margin-left: auto; display: flex; color: var(--muted); }
.kb-bar .wait { color: var(--muted); letter-spacing: .2em; }
.kb-bar .cand { font-family: var(--zh); font-size: 4.6cqw; padding: 1.4cqw 2.2cqw; margin: 0 -2.2cqw; border-radius: 2cqw; }
.kb-bar .cand.first { color: var(--kb-accent, #15756A); }
.kb-bar .cand.en { font-family: var(--body); font-size: 4.3cqw; }
.kb-bar .cand.mark { background: #C9D7E4; }
.kb-bar .sep { flex: none; width: 2px; height: 5cqw; margin: 0 -1.5cqw; background: rgba(22, 22, 22, .2); }
.kb-bar .on { background: var(--pink); color: var(--ink); }
.kb-body { position: relative; padding: 0 1.6cqw 2.6cqw; }
.kb-keys.away { visibility: hidden; }
.kb-row { display: flex; gap: 1.3cqw; margin-top: 2.1cqw; }
.kb-row:first-child { margin-top: .6cqw; }
.kb-key { flex: 1 1 0; min-width: 0; height: 11.5cqw; display: grid; place-items: center; position: relative; background: var(--paper-2); border: 2px solid var(--ink); border-radius: 1.8cqw; box-shadow: 0 .7cqw 0 rgba(22, 22, 22, .22); font-family: var(--body); font-size: 4.8cqw; line-height: 1; color: var(--ink); white-space: nowrap; transition: transform .08s ease, background-color .08s ease, box-shadow .08s ease; }
.kb-key.fn { background: #C9D7E4; font-size: 3.4cqw; }
.kb-key.w15 { flex-grow: 1.5; }
.kb-key.w4 { flex-grow: 4; }
.kb-key.on { background: var(--pink); transform: translateY(.6cqw); box-shadow: none; }
.kb-key small { position: absolute; top: .5cqw; right: .9cqw; font-family: var(--zh); font-size: 2.3cqw; line-height: 1; color: var(--muted); }
.kb-pad { flex: .5 1 0; }
.kb-key.zh { font-family: var(--zh); }
.kb.plain .kb-key small { display: none; }
.kb svg { width: 5.2cqw; height: 5.2cqw; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kb-bar .x svg { width: 4.4cqw; height: 4.4cqw; }
.kb-panel { position: absolute; inset: .6cqw 1.6cqw 2.6cqw; display: flex; flex-direction: column; gap: 2.2cqw; font-family: var(--zh); }
html[lang="en"] .kb-panel { font-family: var(--body); }
.kb-panel[hidden] { display: none; }
.kb-opts { display: flex; gap: 2cqw; }
.kb-opt { flex: 1 1 auto; height: 10cqw; display: grid; place-items: center; padding: 0 2cqw; background: var(--paper-2); border: 2px solid var(--ink); border-radius: 99px; font-size: 3.7cqw; line-height: 1; white-space: nowrap; transition: background-color .08s ease; }
.kb-opt.picked { background: var(--kb-soft, #CDEFE9); }
.kb-out { flex: 1; padding: 3cqw 3.6cqw; background: var(--paper-2); border: 2px solid var(--ink); border-radius: 2.4cqw; font-family: var(--zh); font-size: 4.5cqw; line-height: 1.45; }
.kb-out.muted { color: var(--muted); }
.kb-pbot { display: flex; justify-content: space-between; }
.kb-pbot .kb-key { flex: 0 0 auto; padding: 0 5cqw; height: 10.5cqw; }
.kb-pbot .kb-key.go { background: var(--ink); color: var(--paper-2); font-family: var(--zh); font-size: 3.8cqw; }
html[lang="en"] .kb-pbot .kb-key.go { font-family: var(--body); font-weight: 700; }
.kb-pbot .kb-key.go.on { background: var(--pink); color: var(--ink); }
/* 手指：紅圈，按下時深一點 */
.kb-finger { position: absolute; left: 0; top: 0; width: 9cqw; height: 9cqw; margin: -4.5cqw 0 0 -4.5cqw; border-radius: 50%; background: rgba(227, 49, 45, .22); border: 2px solid rgba(227, 49, 45, .75); opacity: 0; pointer-events: none; transition: translate .12s ease-out, opacity .15s ease, scale .1s ease; }
.kb-finger.show { opacity: .55; }
.kb-finger.down { opacity: 1; scale: .82; }
.kb-finger.slow { transition: translate .1s linear, opacity .15s ease, scale .1s ease; }
.kb.still .kb-caret { animation: none; }
@media (prefers-reduced-motion: reduce) { .kb-caret { animation: none; } }