.intro-refined .site-intro {
  background:
    radial-gradient(ellipse at 82% 28%, #44216a26, transparent 55%),
    radial-gradient(ellipse at 12% 90%, #063b4220, transparent 50%), #090b10;
}
.intro-refined .site-intro .intro-atmosphere,
.intro-refined .site-intro .intro-scene,
.intro-refined .site-intro .intro-avatar {
  display: none;
}
.intro-refined .site-intro .intro-grid {
  opacity: 0.12;
  background-size: 100px 100px;
  background-image:
    linear-gradient(#ac91d418 1px, transparent 1px),
    linear-gradient(90deg, #ac91d418 1px, transparent 1px);
  mask-image: radial-gradient(ellipse at center, #000, transparent 72%);
  transform: none;
  animation: none;
}
.intro-refined .site-intro .intro-center {
  position: relative;
  width: min(760px, 82vw);
  padding: 36px 0;
  align-items: flex-start;
  text-align: left;
  background: none;
}
.intro-refined .site-intro .intro-center::before {
  content: "";
  display: block;
  position: absolute;
  left: -28px;
  top: 36px;
  bottom: 36px;
  width: 1px;
  height: auto;
  border: 0;
  transform: none;
  background: linear-gradient(
    transparent,
    #ab83df66 25%,
    #ab83df33 75%,
    transparent
  );
  box-shadow: none;
  animation: none;
}
.intro-refined .site-intro .intro-label {
  margin: 0 0 28px;
  color: #a48abf;
  font: 9px/1.6 monospace;
  letter-spacing: 3px;
}
.intro-refined .site-intro .intro-name-stage {
  width: 100%;
  height: clamp(68px, 10vw, 110px);
  margin: 0 0 16px;
}
.intro-refined .site-intro .intro-name-stage::after {
  display: none;
}
.intro-refined .site-intro .intro-name-stage .intro-name,
.intro-refined .site-intro .intro-name-stage .intro-real-name {
  text-align: left;
  font-size: clamp(38px, 7.5vw, 80px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.055em;
  text-shadow: none;
}
.intro-refined .site-intro .intro-name-stage .intro-name,
.intro-refined .site-intro .intro-name-stage .intro-name span {
  color: #e5dcef;
}
.intro-refined .site-intro .intro-name-stage .intro-real-name {
  background-image: linear-gradient(
    110deg,
    #e4d9f2 10%,
    #bc9bdf 50%,
    #d4bce9 85%
  );
  background-size: 160% 100%;
}
.intro-refined .site-intro .intro-caption {
  margin: 0 0 10px;
  color: #c1b0d3;
  font: 11px/1.6 monospace;
  letter-spacing: 2.3px;
}
.intro-refined .site-intro .intro-secondary {
  margin: 0;
  color: #776d86;
  font: 9px/1.8 monospace;
  letter-spacing: 1.3px;
}
.intro-refined .site-intro .intro-loader {
  width: 100%;
  height: 1px;
  margin: 38px 0 12px;
  background: #a58cbd20;
  overflow: hidden;
}
.intro-refined .site-intro .intro-loader span {
  height: 1px;
  background: #b491d9;
  box-shadow: none;
}
.intro-refined .site-intro .intro-status {
  margin: 0;
  color: #786c88;
  font: 8px/1.6 monospace;
  letter-spacing: 2px;
}
.intro-refined .site-intro .intro-skip {
  right: 5vw;
  bottom: 32px;
  border: 1px solid #b090d22b;
  border-radius: 4px;
  padding: 10px 14px;
  color: #b59ecb;
  background: transparent;
}
@media (max-width: 680px) {
  .intro-refined .site-intro .intro-center {
    width: 80vw;
  }
  .intro-refined .site-intro .intro-center::before {
    left: -17px;
  }
  .intro-refined .site-intro .intro-label {
    font-size: 7px;
    letter-spacing: 1.8px;
  }
  .intro-refined .site-intro .intro-secondary {
    font-size: 7px;
    letter-spacing: 0.7px;
  }
  .intro-refined .site-intro .intro-caption {
    font-size: 9px;
    letter-spacing: 1.6px;
  }
}

.intro-refined .site-intro .intro-center {
  width: min(760px, 86vw);
  align-items: center;
  text-align: center;
  padding: 20px 0;
}
.intro-refined .site-intro .intro-center::before {
  display: none;
}
.intro-refined .site-intro .intro-avatar {
  display: block;
  width: 104px;
  height: 104px;
  margin: 0 0 28px;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px #b38ae833,
    0 0 35px #8e3ecc18;
}
.intro-refined .site-intro .intro-label {
  margin-bottom: 20px;
}
.intro-refined .site-intro .intro-name-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(65px, 9vw, 100px);
  margin-bottom: 14px;
}
.intro-typed-name {
  font-size: clamp(34px, 7vw, 70px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.045em;
  color: #e5dcef;
  white-space: pre;
}
.typing-personal .intro-typed-name {
  background: linear-gradient(110deg, #e4d9f2, #bc9bdf 55%, #d4bce9);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.intro-typed-name::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.75em;
  margin-left: 7px;
  background: #b99ada;
  vertical-align: -0.02em;
  animation: identity-caret 0.7s steps(1) infinite;
}
.typing-complete .intro-typed-name::after {
  animation: none;
  opacity: 0;
  transition: opacity 0.25s;
}
.intro-refined .site-intro .intro-loader {
  width: min(340px, 75vw);
  margin-top: 28px;
}
@keyframes identity-caret {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
@media (max-width: 680px) {
  .intro-refined .site-intro .intro-avatar {
    width: 88px;
    height: 88px;
    margin-bottom: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .intro-typed-name::after {
    display: none;
  }
}

.intro-refined .site-intro .intro-name-stage.character-handoff {
  display: grid;
  place-items: center;
}
.character-handoff .identity-line {
  grid-area: 1/1;
  display: flex;
  justify-content: center;
  white-space: nowrap;
  font-size: clamp(34px, 7vw, 70px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.045em;
  color: #e5dcef;
}
.identity-character {
  display: inline-block;
  will-change: transform, opacity;
}
.typed-alias .identity-character {
  animation:
    identity-letter-in 0.48s cubic-bezier(0.2, 0.75, 0.25, 1) both,
    identity-letter-out 0.48s cubic-bezier(0.4, 0, 0.3, 1) forwards;
  animation-delay:
    calc(0.12s + var(--character) * 0.045s),
    calc(1.18s + var(--character) * 0.045s);
}
.typed-personal .identity-character {
  color: #cab0e6;
  animation: identity-letter-in 0.55s cubic-bezier(0.2, 0.75, 0.25, 1) both;
  animation-delay: calc(1.36s + var(--character) * 0.052s);
}
@keyframes identity-letter-in {
  from {
    opacity: 0;
    transform: translateY(20px) rotateX(-35deg);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0);
    filter: blur(0);
  }
}
@keyframes identity-letter-out {
  from {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translateY(-22px);
    filter: blur(3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .typed-alias {
    visibility: hidden;
  }
  .character-handoff .identity-character {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.intro-refined .site-intro .intro-name-stage.decode-stage {
  display: grid;
  place-items: center;
}
.decode-line {
  display: flex;
  justify-content: center;
  white-space: nowrap;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(32px, 6.6vw, 68px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.045em;
}
.decode-character {
  display: inline-block;
  min-width: 0.56em;
  text-align: center;
  color: #dedbe8;
  transition:
    color 0.16s,
    opacity 0.12s;
}
.decode-character.is-resolved {
  background: linear-gradient(180deg, #f0edf5 15%, #c4b9d6 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.decode-character.is-decoding {
  font-family: monospace;
  color: #a785ce;
  text-shadow: 0 0 10px #a785ce24;
}
@media (max-width: 680px) {
  .decode-line {
    font-size: clamp(27px, 6.6vw, 44px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .decode-character {
    transition: none;
  }
}

.decode-line {
  font-family:
    "Cascadia Code", "Cascadia Mono", "Consolas", "SFMono-Regular",
    "Liberation Mono", monospace;
  font-size: clamp(29px, 6vw, 62px);
  font-weight: 500;
  letter-spacing: -0.035em;
  font-variant-ligatures: none;
  font-feature-settings:
    "liga" 0,
    "calt" 0;
}
.decode-character {
  width: 1ch;
  min-width: 1ch;
}
.decode-character.is-decoding {
  font-family: inherit;
}
@media (max-width: 680px) {
  .decode-line {
    font-size: clamp(25px, 6vw, 40px);
    letter-spacing: -0.045em;
  }
}

.decode-line {
  font-family: "Chakra Petch", "Space Grotesk", sans-serif;
  font-size: clamp(32px, 6.6vw, 68px);
  font-weight: 600;
  letter-spacing: 0.015em;
}
.decode-character {
  width: 0.62em;
  min-width: 0.62em;
}
.decode-character.is-decoding {
  font-family: inherit;
}
@media (max-width: 680px) {
  .decode-line {
    font-size: clamp(27px, 6.3vw, 43px);
    letter-spacing: 0;
  }
}