/* The container that holds ONLY the exponent/power text */
.exponent-container {
  position: relative;
  display: inline-block;
  /* forcibly a square shape */
  width: 1.5em;
  height: 1.5em;
  /* keep it near baseline, but we’ll nudge it up for that superscript feel: */
  vertical-align: baseline;
  top: -0.5em; /* raise it above the baseline */
  border: 1px solid transparent;
  margin: 0 2px;
  box-sizing: border-box;
  overflow: visible; /* if user types more than 1-2 chars, it might stick out */
}

/* Show a solid border & highlight only when exponent is focused */
.exponent-container.active-exponent {
  border-color: black;
  background-color: #f0f0f0; /* or any highlight color you want */
}

/* The exponent text part inside the container */
.exponent-part {
  display: inline-block;
  width: 100%;
  height: 100%;
  text-align: center; /* center the text within the square box */
  font-size: 0.8em;   /* smaller than base text */
  line-height: 1.2;  /* adjust to help center vertically */
  outline: none;
}