/* Marketing iframe: transparent stage so the parent page shows through. */
html,
body.kit-float.is-popup {
  background: transparent !important;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: auto;
  min-height: 0;
}

body.kit-float.is-popup {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.kit-float .panel {
  margin: 0 auto;
}

/* Keep Compact at its design width so keys (and the select ring) stay proportional. */
html[data-kit-shell="demo"] body.kit-float.is-popup .panel.compact {
  width: min(100%, 380px);
  max-width: 380px;
}

html[data-kit-shell="demo"] body.kit-float.is-popup .panel.mini {
  width: min(100%, 340px);
  max-width: 340px;
}

.kit-float .panel .name-track {
  display: inline-block;
}

/* Keep LCD message icons readable on the phosphor glass in the marketing iframe. */
.kit-float .lcd-message-actions {
  position: relative;
  z-index: 2;
}

.kit-float .lcd-message-btn {
  color: currentColor !important;
  opacity: 1 !important;
}

.kit-float .lcd-message-btn .action-icon {
  width: 20px;
  height: 20px;
}

.kit-float .panel.compact .lcd-message-btn {
  width: 26px;
  height: 26px;
}

.kit-float .panel.compact .lcd-message-btn .action-icon {
  width: 20px;
  height: 20px;
}