.kb-container{-webkit-user-select:none;user-select:none;box-sizing:border-box;background-color:#faf6f0;border-radius:12px;flex-direction:column;gap:4px;width:100%;margin-top:8px;display:flex}.kb-row{justify-content:space-between;gap:2px;width:100%;display:flex}.kb-row-inset{align-self:center;width:92%}.kb-key{min-width:26px;min-height:42px;font-size:16px;font-weight:var(--mantine-font-weight-normal);color:#334155;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background-color:#fff;border:1px solid #e4dacb;border-radius:5px;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:2px;transition:transform 50ms,background-color .1s,box-shadow 50ms;display:flex;position:relative;box-shadow:0 1px 2px #00000008}.kb-key.finger-l-pinky{border-color:#fda4af;background-color:#ffe4e6!important}.kb-key.finger-l-ring{border-color:#fed7aa;background-color:#ffedd5!important}.kb-key.finger-l-middle{border-color:#fef08a;background-color:#fef9c3!important}.kb-key.finger-l-index{border-color:#bbf7d0;background-color:#dcfce7!important}.kb-key.finger-r-index{border-color:#bae6fd;background-color:#e0f2fe!important}.kb-key.finger-r-middle{border-color:#ddd6fe;background-color:#ede9fe!important}.kb-key.finger-r-ring{border-color:#f5b3f8;background-color:#f5d0fe!important}.kb-key.finger-r-pinky{border-color:#cbd5e1;background-color:#e2e8f0!important}.kb-key.wide{background-color:#f1eae0;border-color:#decbba;flex:1.5}.kb-key.space{background-color:#fff;border-color:#cbd5e1;flex:6}.kb-key.pressed,.kb-key.shift-active{transform:scale(.96);color:#fff!important;background-color:#803018!important;border-color:#60200e!important}.kb-key.pressed .kb-kn-char,.kb-key.shift-active .kb-kn-char,.kb-key.pressed .kb-en-hint,.kb-key.shift-active .kb-en-hint{color:#fff!important}.kb-home-dot{background-color:#475569;border-radius:50%;width:4px;height:4px;position:absolute;bottom:2px}.kb-kn-char{font-size:16px;font-weight:var(--mantine-font-weight-bold);color:#0f172a}.kb-en-hint{color:#475569;font-size:8px;font-weight:var(--mantine-font-weight-semibold);margin-top:2px}@media (width>=768px){.kb-container{gap:8px;padding:16px}.kb-row{gap:6px}.kb-key{padding:12px 4px;font-size:18px}.kb-home-dot{width:6px;height:6px;bottom:5px}.kb-kn-char{font-size:18px}.kb-en-hint{font-size:8px}}