/* The keyboard preview owns its stage. All host overrides are limited to this page. */
body:has(.plugin-detail--keyhighlighter)::before,
body:has(.plugin-detail--keyhighlighter)::after { display: none; }
.plugin-detail--keyhighlighter .plugin-hero__visual::before,
.plugin-detail--keyhighlighter .plugin-hero__visual::after,
.plugin-detail--keyhighlighter .plugin-hero__light,
.plugin-detail--keyhighlighter .plugin-hero__blob { display: none; }
.plugin-detail--keyhighlighter .plugin-hero__stage {
  transform: none !important;
  aspect-ratio: auto;
  min-height: 320px;
  container-type: inline-size;
}
.keypress-stage {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 320px;
  padding-block: var(--space-lg);
  color: var(--color-text-primary);
  text-align: center;
}
.keypress-stage__label {
  margin: 0;
  font: 400 12px/1.5 var(--font-primary);
  color: var(--color-text-secondary);
}
.keypress-stage__display { display: grid; place-items: center; min-width: 0; padding: var(--space-lg) var(--space-xs); }
.keypress-stage__keys { opacity: 0; transition: opacity 180ms ease-out; }
.keypress-stage__keys.is-on { opacity: 1; }
.keypress-stage__hint { margin: 0; font: 400 14px/1.5 var(--font-secondary); color: var(--color-text-secondary); }
.keypress-stage__touch-hint { display: none; }
/* The frameless key demo has no window edge for an overlapping companion. Keep the mascot
   in flow below the demo so its feet cannot run into the Store action on phones. */
.plugin-detail--keyhighlighter .plugin-hero.plugin-hero--aurora .plugin-hero__stage:has(> .plugin-hero__companion) { aspect-ratio: auto; }
.plugin-detail--keyhighlighter .plugin-hero__companion {
  position: relative; top: auto; left: auto;
  margin: var(--space-sm) auto 0;
}
@media (max-width: 960px) {
  .plugin-detail--keyhighlighter .plugin-hero__visual { width: 100%; max-width: 560px; order: 2; }
  .plugin-detail--keyhighlighter .plugin-hero__copy { order: 1; }
  .plugin-detail--keyhighlighter .plugin-hero__stage,
  .keypress-stage { min-height: 260px; }
}
@media (max-width: 700px) {
  .plugin-detail--keyhighlighter .plugin-hero__copy { display: contents; }
  .plugin-detail--keyhighlighter .plugin-hero__title { order: 0; font-size: clamp(24px, 7.8vw, 42px); }
  .plugin-detail--keyhighlighter .plugin-hero__lead { order: 1; }
  .plugin-detail--keyhighlighter .plugin-hero__actions { order: 3; margin-top: var(--space-sm); }
  .plugin-detail--keyhighlighter .plugin-hero__facts { order: 4; }
}
@media (max-width: 768px) {
  .plugin-detail--keyhighlighter .plugin-detail__showcase .text-block { order: 1; }
  .plugin-detail--keyhighlighter .plugin-detail__showcase .content-block { order: 2; }
}
@media (pointer: coarse) {
  .keypress-stage__keyboard-hint { display: none; }
  .keypress-stage__touch-hint { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .keypress-stage__keys { transition: none; }
}

.keypress-stage__label { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); }
.keypress-stage__label .plugin-hero__art-marks img { width: 40px; height: 40px; object-fit: contain; }