.hero-identity { position: relative; width: 100%; max-width: 230px; }
button.hero-replay { display: block; width: 100%; height: auto; padding: 0; border: 0; background: transparent; cursor: pointer; }
.hero-replay:focus-visible { outline: 2px solid var(--teal); outline-offset: 7px; border-radius: 2px; }
.hero-identity::before, .hero-identity::after { content: ''; position: absolute; width: 28px; height: 28px; pointer-events: none; opacity: 0; border-color: var(--teal); border-style: solid; }
.hero-identity::before { top: -12px; left: -12px; border-width: 1px 0 0 1px; }
.hero-identity::after { bottom: -12px; right: -12px; border-width: 0 1px 1px 0; }
.hero-identity[data-phase="resolve"]::before, .hero-identity[data-phase="resolve"]::after { animation: hello-structure 850ms ease-out both; }
.hello-message, .replay-hint { position: absolute; top: calc(100% + 10px); left: 0; width: 100%; text-align: center; color: var(--teal); font-size: .875rem; line-height: 18px; pointer-events: none; }
.hello-message { opacity: 0; }
.hero-identity[data-phase] .hello-message { opacity: 1; }
.hero-identity[data-phase="finish"] .hello-message { opacity: 0; transition: opacity 250ms ease-out; }
.hello-cursor { display: inline-block; width: 1px; height: .9em; margin-left: 3px; vertical-align: -.08em; background: currentColor; animation: hello-cursor 650ms step-end infinite; }
.hero-identity:not([data-phase]) .hello-cursor, .hero-identity[data-phase="finish"] .hello-cursor { animation: none; }
.replay-hint { opacity: 0; }
.hero-identity:not([data-phase]):hover .replay-hint, .hero-identity:not([data-phase]):focus-within .replay-hint { opacity: 1; }
.hello-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes hello-cursor { 50% { opacity: 0; } }
@keyframes hello-structure { 0% { opacity: 0; } 35%, 75% { opacity: .5; } 100% { opacity: 0; } }
@media (max-width: 700px) { .hero-identity { grid-row: 1; width: 112px; justify-self: center; } }
@media (prefers-reduced-motion: reduce) {
  .hello-cursor, .hero-identity::before, .hero-identity::after { display: none; animation: none !important; }
  .hero-identity .hello-message { transition: none !important; }
}