:root {
  --kb-u: 38px;
  --kb-gap: 4px;
  --kb-key-height: 38px;
}

.keyboard-stage {
  display: block;
  min-height: 0;
  padding: 18px;
  overflow-x: auto;
  background: #f7f7fa;
  border: 1px solid var(--line);
  border-radius: 12px;
}

#keyboardLayout,
.kb-board {
  width: max-content;
  max-width: none;
  margin: 0 auto;
  transform: none;
}

.kb-board {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kb-top,
.kb-body {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 14px;
}

.kb-section {
  display: flex;
  flex-direction: column;
  gap: var(--kb-gap);
  padding: 0;
  border: 0;
  background: transparent;
}

.kb-row {
  display: flex;
  gap: var(--kb-gap);
  min-height: var(--kb-key-height);
}

.kb-key {
  flex: 0 0 calc(
    var(--kb-u) * var(--key-width, 1) +
    var(--kb-gap) * (var(--key-width, 1) - 1)
  );
  width: auto;
  min-width: 0;
  height: var(--kb-key-height);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 4px;
  overflow: hidden;
  color: #686978;
  background: #eef0f4;
  /* border: 1px solid #d4d6df; */
  /* border-radius: 6px; */
  /* box-shadow: 0 2px 0 #c6c8d2; */
  font: 500 9px "DM Mono", monospace;
  white-space: nowrap;
}

.kb-key:not([data-heat]) {
  color: #686978;
  background: #eef0f4;
  /* border-color: #d4d6df;
  box-shadow: 0 2px 0 #c6c8d2; */
}

.kb-key::after {
  content: attr(data-count);
  position: absolute;
  right: 3px;
  bottom: 2px;
  font-size: 7px;
  opacity: .78;
}

.kb-key[data-heat="1"] {
  color: #6555b8;
  background: #e8e3ff;
  border-color: #d5ccff;
  box-shadow: 0 2px 0 #beb5e9;
}

.kb-key[data-heat="2"] {
  color: #352977;
  background: #baaaff;
  border-color: #a28ff2;
  box-shadow: 0 2px 0 #917de0;
}

.kb-key[data-heat="3"] {
  color: #fff;
  background: #7458ea;
  border-color: #6045cf;
  box-shadow: 0 2px 0 #4933ae;
}

.kb-gap {
  flex: 0 0 calc(var(--kb-u) * var(--key-width, .5));
}

.kb-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), var(--kb-u));
  grid-template-rows: repeat(var(--grid-rows), var(--kb-key-height));
  gap: var(--kb-gap);
}

.kb-grid .kb-key {
  width: auto;
  height: auto;
}

.kb-main,
.kb-function-main {
  width: calc(15 * var(--kb-u) + 14 * var(--kb-gap));
}

.kb-navigation,
.kb-function-nav {
  width: calc(3 * var(--kb-u) + 2 * var(--kb-gap));
}

.kb-numpad,
.kb-function-pad {
  width: calc(4 * var(--kb-u) + 3 * var(--kb-gap));
}

.kb-function-nav .kb-row,
.kb-function-pad .kb-row {
  width: 100%;
}

.kb-compact-main {
  padding: 10px;
  background: #f0f0f5;
  border: 1px solid #e2e2ea;
  border-radius: 10px;
  box-shadow: 0 4px 12px #33334d0b;
}

.layout-68 .kb-compact-main,
.layout-80 .kb-compact-main,
.layout-84 .kb-compact-main {
  width: auto;
}

.keyboard-card-full .keyboard-stage {
  height: auto;
  min-height: 0;
  margin: 8px 0 18px;
}

@media (max-width: 760px) {
  :root {
    --kb-u: 32px;
    --kb-key-height: 32px;
    --kb-gap: 3px;
  }

  .keyboard-stage {
    padding: 10px;
  }
}

.kb-key.kb-key-rec-focus {
  outline: 2px solid #6a4ce5;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px #6a4ce533;
  z-index: 2;
}

.kb-key.kb-key-rec-dim {
  opacity: 0.28;
}