/* 键盘测试：一块键帽面板 + 当前按键信息 */
.kb-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:1rem}
.kb-progress{flex:1 1 16rem;max-width:32rem;height:.6rem;margin-bottom:0}

.kb-board{padding:1rem;border:1px solid #eef1f5;border-radius:.6rem;background:#f7f9fc;overflow-x:auto}
.kb-fn{margin-bottom:.375rem}
.kb-cols{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1.5rem}
.kb-row{display:flex;gap:.25rem}
.kb-row+.kb-row{margin-top:.25rem}
.kb-key{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:calc(var(--u,1) * 2.5rem);height:2.5rem;padding:0 .25rem;border:1px solid #d8dee6;border-radius:.4rem;background:#fff;color:#5a6472;font-size:.8125rem;line-height:1;white-space:nowrap;overflow:hidden;transition:background .08s,border-color .08s,color .08s,box-shadow .08s;user-select:none}
.kb-key.is-down{background:var(--site-primary);border-color:var(--site-primary);color:#fff;box-shadow:0 0 0 3px rgba(var(--site-primary-rgb),.22)}
.kb-key.is-hit{border-color:#7ac7a3;background:#f1fbf5;color:#2f7a55}
.kb-key.is-hit::after{content:"";position:absolute;right:.25rem;top:.25rem;width:.3rem;height:.3rem;border-radius:50%;background:#38a169}
.kb-key.is-down.is-hit{background:var(--site-primary);border-color:var(--site-primary);color:#fff}
.kb-key.is-down.is-hit::after{background:#fff}
.kb-gap{flex:none;width:calc(var(--u,1) * 2.5rem)}

.kb-legend{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.75rem}
.kb-dot{display:inline-block;width:.7rem;height:.7rem;margin-right:.25rem;border:1px solid #d8dee6;border-radius:.2rem;background:#fff;vertical-align:-.05rem}
.kb-dot-down{background:var(--site-primary);border-color:var(--site-primary)}
.kb-dot-hit{background:#f1fbf5;border-color:#7ac7a3}

.kb-kv{padding:.625rem .75rem;border:1px solid #eef1f5;border-radius:.5rem;background:#fafbfd}
.kb-kv-k{color:#8a9199;font-size:.75rem}
.kb-kv-v{margin-top:.125rem;font-size:.9375rem;font-weight:600;color:#3f4650;word-break:break-all}
.kb-log{display:flex;flex-wrap:wrap;gap:.375rem;min-height:1.75rem}
.kb-chip{display:inline-flex;align-items:baseline;gap:.3rem;padding:.2rem .5rem;border:1px solid #e2e6ed;border-radius:.375rem;background:#fff;font-size:.75rem;color:#4d5259}
.kb-chip small{color:#a7b0bb;font-size:.6875rem}
.kb-notes li+li{margin-top:.375rem}

@media (max-width:575.98px){
  .kb-board{padding:.5rem}
  .kb-key{width:calc(var(--u,1) * 2.2rem);height:2.2rem;font-size:.75rem}
  .kb-gap{width:calc(var(--u,1) * 2.2rem)}
}