.keyboard-checker{flex-direction:column;gap:16px;margin-block:24px;display:flex}.keyboard-settings{flex-wrap:wrap;gap:12px 24px;display:flex}.keyboard-settings-note{color:var(--text-muted);font-size:var(--fs-xs);flex-basis:100%;margin:0}.keyboard-setting{border:0;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0;padding:0;display:flex}.keyboard-setting legend{float:left;font-weight:var(--fw-bold);margin-right:8px}.keyboard-radio{cursor:pointer;align-items:center;gap:4px;display:inline-flex}.keyboard-status{flex-wrap:wrap;gap:4px 24px;display:flex}.keyboard-status p{margin:0}.keyboard-last-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.keyboard-figures{flex-wrap:wrap;align-items:flex-end;gap:16px;display:flex}.keyboard-figure{background:var(--surface);border:1px solid var(--text);border-radius:12px;flex:520px;min-width:0;position:relative;container-type:inline-size}.kb-key{--u:calc(100cqw / (var(--kb-w) + 1));--gap:calc(var(--u) * .04);left:calc((var(--x) + .5) * var(--u) + var(--gap));top:calc((var(--y) + .5) * var(--u) + var(--gap));width:calc(var(--w) * var(--u) - var(--gap) * 2);height:calc(var(--h) * var(--u) - var(--gap) * 2);box-sizing:border-box;border:1px solid var(--text);border-radius:calc(var(--u) * .12);color:var(--text);font-size:calc(var(--u) * .24);background:#fff;line-height:1.1;position:absolute}.kb-key:before{content:"";inset:calc(var(--u) * var(--kb-face-top)) calc(var(--u) * var(--kb-face-side)) calc(var(--u) * var(--kb-face-bottom));border:1px solid var(--border);border-radius:calc(var(--u) * .08);position:absolute}.kb-legend{inset:calc(var(--u) * .1) calc(var(--u) * .16) calc(var(--u) * .2);white-space:nowrap;flex-direction:column;display:flex;position:absolute;overflow:hidden}.kb-key[data-align=top-left] .kb-legend{justify-content:flex-start;align-items:flex-start}.kb-key[data-align=top-left][data-lines="2"] .kb-legend{justify-content:space-between}.kb-key[data-align=center] .kb-legend{text-align:center;justify-content:center;align-items:center}.kb-key[data-align=left] .kb-legend{justify-content:flex-end;align-items:flex-start}.kb-key[data-detectable=false]{background:repeating-linear-gradient(45deg, var(--surface-alt) 0 3px, var(--border) 3px 5px);color:var(--text-muted)}.kb-key[data-pressed=true]{background:var(--primary);color:var(--on-primary)}.kb-key[data-pressed=true]:before{border-color:#ffffff59}.kb-key[data-shape=jis-enter]{background:0 0;border:0}.kb-key[data-shape=jis-enter]:before{content:none}.kb-key[data-shape=jis-enter] .kb-legend{padding-left:calc(var(--u) * var(--kb-enter-notch))}.kb-key-shape{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.kb-key-shape-outer{fill:#fff;stroke:var(--text);stroke-width:1px;stroke-linejoin:round}.kb-key-shape-top{fill:none;stroke:var(--border);stroke-width:1px;stroke-linejoin:round}.kb-key[data-shape=jis-enter][data-pressed=true] .kb-key-shape-outer{fill:var(--primary)}.kb-key[data-shape=jis-enter][data-pressed=true] .kb-key-shape-top{stroke:#ffffff59}.mouse-figure{flex:none;width:96px;max-width:100%;height:auto}.mouse-body,.mouse-part{fill:#fff;stroke:var(--text);stroke-width:1.5px;stroke-linejoin:round}.mouse-part[data-pressed=true]{fill:var(--primary)}