/* A footnote-sized, one-pass name transformation. Only transforms/opacity move. */
.name-shift { margin-top: 9px; max-width: 100%; color: var(--dim); font-size: 14px; line-height: 1.5; }
.name-shift .name-replay { display: block; position: relative; width: 100%; min-height: 26px; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.name-replay:focus-visible { outline: 1px solid var(--dim); outline-offset: 3px; }
.name-replay:hover { color: var(--face); }
.name-replay:disabled { cursor: default; color: inherit; }
.name-static { display: block; }
.name-stage { display: none; position: relative; height: 26px; white-space: pre; }
.name-letter { display: block; position: absolute; top: 2px; left: 0; line-height: 21px; white-space: pre; }
.name-alternate { position: absolute; left: 0; top: 0; opacity: 0; }
.name-accent { position: absolute; left: 1px; top: -1px; opacity: 0; }
.name-hidden-king { position: absolute; left: 0; top: 1px; width: 13px; height: 20px; }
.name-king { position: absolute; width: 13px; height: 20px; left: 0; top: 0; overflow: visible; opacity: 0; fill: currentColor; }
.name-king-gold { color: #d4b759; }
.name-king-turn { transform-origin: 10px 12px; }
.name-stroke { transform-origin: 0 0; }
.name-stroke-0 { transform: translate(3px,3px) scale(2,18); }
.name-stroke-1 { transform: translate(15px,3px) scale(2,18); }
.name-stroke-2 { transform: translate(3px,11px) scale(14,2); }
.name-stroke-3 { transform: translate(9px,5px) scale(2,14); opacity: 0; }
.name-pronunciations { display: block; min-height: 57px; font-size: 11.5px; line-height: 19px; }
.name-pronunciations > span { display: block; }
.name-pronunciation-label { display: inline-block; min-width: 43px; font-size: 9px; letter-spacing: .035em; }
.name-ipa { font-family: var(--sans); }
.name-shift.is-ready .name-static { display: none; }
.name-shift.is-ready .name-stage { display: block; }
.name-shift.is-ready .name-pronunciations { opacity: 0; }
.name-shift.is-settled .name-pronunciations { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .name-shift.is-ready .name-static { display: block; }
  .name-shift.is-ready .name-stage { display: none; }
  .name-shift.is-ready .name-pronunciations { opacity: 1; }
}