@layer components{.kb{-webkit-user-select:none;user-select:none;touch-action:manipulation;gap:7px;width:min(100%,560px);margin-inline:auto;display:grid}.kb-row{justify-content:center;gap:5px;display:flex}.kb-key{min-width:0;max-width:50px;height:clamp(42px,6.4cqh,54px);color:var(--on-dark);background:#ffffff21;border-radius:9px;flex:1 1 0;place-items:center;font-size:16px;font-weight:650;transition:background-color .22s,color .22s,transform 80ms;display:grid;position:relative;overflow:hidden}.kb-key:active:not(:disabled){transform:scale(.93)}.kb-key:focus-visible{outline:2px solid var(--rn);outline-offset:2px}.kb-key:disabled{opacity:.55}.kb-wide{letter-spacing:.02em;flex:1.55 1 0;max-width:76px;font-size:12.5px}.kb-wide svg{width:22px;height:22px}.kb-l{position:relative}@media (hover:hover){.kb-key:hover:not(:disabled){filter:brightness(1.15)}}}