/* Shared English introduction over the original electromagnetic field. */
:root { --hero-accent: #a9d9dd; }
html .hero-title.hero-introduction {
  font-size: clamp(44px, 6.8vw, 100px);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.hero-introduction .line-one { font-size: .72em; }
/* Smiley Sans's slanted Chinese greeting needs a small optical adjustment. */
html[lang="zh-CN"] .hero-introduction .line-one {
  margin-left: -.045em;
  padding-bottom: .08em;
}
.hero-introduction .line-three { font-size: .64em; }
.hero-introduction .hero-name { font-style: normal; color: var(--hero-accent); }
.hero-identity-prefix { display: inline-block; overflow: hidden; vertical-align: bottom; white-space: pre; }
.hero-introduction .hero-profession {
  display: flex;
  align-items: baseline;
  min-height: 1.35em;
  line-height: 1.35;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.hero-profession > span:first-child { margin-right: .25em; }
.hero-role { color: var(--hero-accent); }
.hero-caret {
  align-self: center;
  flex: 0 0 1px;
  height: .9em;
  margin-left: .15em;
  background: var(--hero-accent);
  visibility: hidden;
}
.hero-profession.is-typing .hero-caret {
  visibility: visible;
  animation: hero-caret-blink 1s step-end infinite;
}
@keyframes hero-caret-blink { 50% { opacity: 0; } }
@media (max-width: 760px) {
  html .hero-title.hero-introduction { font-size: clamp(34px, 9.5vw, 68px); }
  .hero-introduction .line-three { font-size: .72em; }
}
@media (max-height: 580px) and (min-width: 600px) {
  html .hero-title.hero-introduction { font-size: min(6vw, 12svh); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-profession .hero-caret { display: none; }
}