/* Approved Field Mesh geometry. Only the field responds; keyboard stays fixed. */
.kicap-field-mesh {
  --kfm-copper: var(--kicap-color-accent);
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: inherit;
  vertical-align: middle;
  overflow: visible;
  pointer-events: none;
}
:where(.ksp-detail__play, .kicap-featured-profile__play) .kicap-field-mesh {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
}
.kicap-field-mesh .fm-field {
  transform-origin: 12px 14px;
  transition: transform 200ms ease-out;
}
.kicap-field-mesh .fm-dot { transition: fill 160ms ease-out; }
.kicap-field-mesh .fm-traces { opacity: .65; }
@media (hover: hover) and (pointer: fine) {
  :where(button,a):hover:not(:disabled):not([aria-busy="true"]) .kicap-field-mesh:not([data-state="playing"]) .fm-field { transform: translateY(-.25px); }
  :where(button,a):hover:not(:disabled):not([aria-busy="true"]) .kicap-field-mesh:not([data-state="playing"]) :is(.fm-dot--0,.fm-dot--1) { fill: var(--kfm-copper); }
}
.kicap-field-mesh.is-contact .fm-field { animation: kicap-field-response 210ms ease-out both; }
.kicap-field-mesh.is-phase-0 .fm-dot--0,
.kicap-field-mesh.is-phase-1 .fm-dot--1,
.kicap-field-mesh.is-phase-2 .fm-dot--2,
.kicap-field-mesh.is-phase-3 .fm-dot--3,
.kicap-field-mesh.is-phase-4 .fm-dot--4 { fill: var(--kfm-copper); }
@keyframes kicap-field-response {
  0%, 100% { transform: translateY(0) scaleX(1); }
  38% { transform: translateY(-.3px) scaleX(1.035); }
  74% { transform: translateY(.1px) scaleX(.985); }
}
@media (prefers-reduced-motion: reduce) {
  .kicap-field-mesh .fm-field,
  .kicap-field-mesh .fm-dot { transition: none; }
  .kicap-field-mesh.is-contact .fm-field { animation: none; }
  :where(button,a):hover:not(:disabled):not([aria-busy="true"]) .kicap-field-mesh:not([data-state="playing"]) .fm-field { transform: none; }
}