/* The live type resolves in place; its original letters retain the layout. */
.cover-signature { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.hero-sequence-status { justify-self: start; text-align: left; font: 8px/1.6 var(--mono); letter-spacing: .06em; color: #797467; }
.hero-replay { justify-self: end; border: 0; border-bottom: 1px solid #c9c6b8; padding: 5px 0; background: transparent; font: 9px/1.6 var(--mono); letter-spacing: .02em; color: #716d64; cursor: pointer; }
.hero-replay:hover { color: #a23829; border-color: #a23829; }
.hero-replay:focus-visible { outline: 2px solid #a23829; outline-offset: 5px; }
.hero-cipher { position: relative; }
.hero-cipher-ink { position: absolute; inset: 0; white-space: nowrap; pointer-events: none; opacity: 0; }
.hero-cipher-cell { display: inline-block; text-align: center; white-space: pre; letter-spacing: 0; overflow: hidden; vertical-align: top; }
.hero-cipher.is-ciphering > .hero-original { opacity: 0; }
.hero-cipher.is-ciphering > .hero-cipher-ink { opacity: .65; }
.hero-cipher.is-ciphering.cipher-resolved > .hero-original { opacity: 1; }
.hero-cipher.is-ciphering.cipher-resolved > .hero-cipher-ink { opacity: 0; }
.hero-cipher.is-ciphering.cipher-waiting > .hero-cipher-ink,
.hero-opening-active .cipher-waiting > .hero-word-visual { opacity: .16; }
.hero-opening-active .hero-word-visual { opacity: .65; }
.hero-opening-active .hero-word-visual.is-decoding, .hero-opening-active .cipher-resolved > .hero-word-visual { opacity: 1; }
.is-ciphering::after { content: ''; position: absolute; inset: auto 0 .08em; height: 1px; background: #a23829; transform: scaleX(var(--cipher-progress, 0)); transform-origin: left; opacity: .28; pointer-events: none; }
.is-ciphering.cipher-resolved::after { opacity: 0; transition: opacity .35s ease; }
.hero-opening-active .hero-sequence-status { color: #a23829; }
@media (max-width: 560px) {
  .cover-signature { grid-template-columns: 1fr 1fr; gap: 15px 12px; }
  .cover-logotype { grid-column: 1 / -1; grid-row: 1; }
  .hero-sequence-status, .hero-replay { grid-row: 2; font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-replay { display: none; }
  .cover-signature { grid-template-columns: 1fr auto 1fr; }
  .hero-cipher.is-ciphering > .hero-original { opacity: 1; }
  .hero-cipher-ink, .is-ciphering::after { display: none; }
}