/* One clear shortcut control, with the same interactive panel as the Mac demo. */
.keyboard-demo .keyboard-screen {
  height: max(260px, calc(var(--shortcut-panel-height, 140px) + 116px));
}
.keyboard-demo .mini-notch {
  width: calc(184px * var(--shortcut-scale, 0.45));
  height: calc(30px * var(--shortcut-scale, 0.45));
  z-index: 4;
  border-radius: 0 0 7px 7px;
}
.keyboard-demo .shortcut-stage {
  padding: 45px 26px 22px;
  gap: 12px;
  justify-content: center;
  transition: padding-top 0.45s var(--ease);
}
.keyboard-demo .shortcut-title {
  margin: 0;
  font-size: clamp(17px, 1.75vw, 22px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.03em;
  color: #252536;
}
.keyboard-demo .shortcut-stage .text-button {
  font-size: 12px;
  line-height: 1.4;
  min-height: 36px;
}
.keyboard-demo.is-shortcut-open .shortcut-stage {
  justify-content: flex-end;
  padding-top: calc(var(--shortcut-panel-height, 140px) + 12px);
}
.keyboard-demo.is-shortcut-open .shortcut-symbol {
  display: none;
}
.keyboard-demo.is-shortcut-open .shortcut-title {
  font-size: 18px;
}
.keyboard-demo .keyboard-deck {
  display: flex;
  justify-content: center;
  padding: 18px 20px 21px;
}
.keyboard-demo .shortcut-combination {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: min(100%, 240px);
  padding: 3px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
.shortcut-combination kbd {
  display: grid;
  place-items: center;
  height: 52px;
  border: 1px solid #c5c7d1;
  border-radius: 8px;
  background: linear-gradient(#fff, #f0f1f6);
  color: #4c4c60;
  font:
    500 25px -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  box-shadow:
    inset 0 1px #fff,
    0 3px 0 #babdc9,
    0 5px 8px #4c568a16;
  transition:
    transform 0.16s,
    background 0.16s,
    box-shadow 0.16s;
}
.shortcut-combination:hover kbd {
  background: #f5f3ff;
}
.shortcut-combination:is(.is-key-down, :active) kbd {
  transform: translateY(2px);
  background: #dfe1fb;
  box-shadow:
    inset 0 1px #fff,
    0 1px 0 #a6aac0;
}
.shortcut-combination:focus-visible {
  outline: 3px solid #6675bd;
  outline-offset: 5px;
}
.keyboard-demo .keyboard-caption {
  line-height: 1.5;
  min-height: 18px;
}
.shortcut-preview {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1060px;
  z-index: 3;
  background: #000;
  border-radius: 0 0 24px 24px;
  transform: translateX(-50%) scale(var(--shortcut-scale, 0.45));
  transform-origin: top center;
  clip-path: inset(
    0 calc((100% - 184px) / 2) calc(100% - 30px) round 0 0 12px 12px
  );
  transition: clip-path 0.5s cubic-bezier(0.18, 0.88, 0.22, 1);
}
.shortcut-preview.is-open {
  clip-path: inset(0 0 0 round 0 0 24px 24px);
}
.shortcut-preview .mac-demo {
  width: 1060px;
  min-width: 1060px;
  opacity: 0;
  transition: opacity 0.2s;
}
.shortcut-preview.is-open .mac-demo {
  opacity: 1;
  transition: opacity 0.25s 0.12s;
}
@media (max-width: 767px) {
  .keyboard-demo .keyboard-screen {
    height: max(220px, calc(var(--shortcut-panel-height, 140px) + 120px));
  }
  .keyboard-demo .shortcut-stage {
    padding-inline: 22px;
  }
  .keyboard-demo .shortcut-stage .text-button {
    min-height: 44px;
  }
  .keyboard-demo .shortcut-title {
    font-size: 19px;
  }
  .keyboard-demo.is-shortcut-open .shortcut-title {
    font-size: 17px;
  }
  .keyboard-demo .keyboard-deck {
    padding: 17px 20px 20px;
  }
  .shortcut-combination kbd {
    height: 48px;
    font-size: 23px;
  }
}
html[data-motion="paused"]
  .keyboard-demo
  :is(.shortcut-stage, .shortcut-preview, .mac-demo, kbd) {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .keyboard-demo :is(.shortcut-stage, .shortcut-preview, .mac-demo, kbd) {
    transition: none;
  }
}