:root {
  color-scheme: dark;
  --surface: #0b0d10;
  --avatar-surface: #11151a;
  --avatar-edge: #3a424b;
  --text: #e7eaed;
  --text-secondary: #949aa2;
  --accent: #7eb6b7;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 20rem;
  min-height: 100%;
  background: var(--surface);
}

body {
  min-height: 100dvh;
  margin: 0;
  padding:
    max(clamp(1.5rem, 4vw, 4rem), env(safe-area-inset-top))
    max(clamp(1.5rem, 4vw, 4rem), env(safe-area-inset-right))
    max(clamp(1.5rem, 4vw, 4rem), env(safe-area-inset-bottom))
    max(clamp(1.5rem, 4vw, 4rem), env(safe-area-inset-left));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow-x: clip;
  background: var(--surface);
  color: var(--text);
  font-family:
    "Segoe UI Variable Display",
    "SF Pro Display",
    "PingFang SC",
    "Microsoft YaHei UI",
    system-ui,
    sans-serif;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--accent);
  color: var(--surface);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: clamp(0.65rem, 1vw, 0.9rem);
  font-size: clamp(0.78rem, 1.05vw, 1rem);
  font-weight: 590;
  letter-spacing: 0.075em;
  line-height: 1;
}

.brand-avatar {
  width: clamp(1.5rem, 2vw, 1.75rem);
  height: clamp(1.5rem, 2vw, 1.75rem);
  display: block;
}

.brand-name {
  white-space: nowrap;
}

.hero {
  display: grid;
  align-items: center;
  min-width: 0;
  padding-block: clamp(2.5rem, 7vh, 5rem);
}

.hero-title {
  min-width: 0;
  margin: 0;
  font-weight: inherit;
  transform: translateY(1.4vh);
}

.title-line {
  display: block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
}

.title-line-primary {
  min-height: 1.04em;
  font-size: clamp(2rem, 9vw, 8.5rem);
  font-weight: 520;
  letter-spacing: -0.04em;
  line-height: 1.04;
}

.title-line-local {
  margin-block-start: clamp(0.7rem, 1.3vw, 1.35rem);
  margin-inline-start: clamp(4.75rem, 35vw, 32rem);
  min-height: 1.15em;
  color: var(--text-secondary);
  font-size: clamp(1.5rem, 4.5vw, 4.75rem);
  font-weight: 390;
  letter-spacing: 0.09em;
  line-height: 1.15;
}

.accent,
.typed-infinity {
  color: var(--accent);
}

.typed-char {
  display: inline-block;
  opacity: 1;
  white-space: pre;
}

.typing-caret {
  display: inline-block;
  width: 0.035em;
  height: 0.78em;
  margin-inline-start: 0.055em;
  transform: translateY(0.055em);
  background: var(--accent);
  opacity: 0;
  animation: caret-blink 460ms steps(1, end) infinite;
}

.typing-caret.is-visible {
  opacity: 1;
}

.typing-caret.is-finished {
  animation: caret-release 160ms var(--ease-out) forwards;
}

.final-t {
  transform-origin: 50% 72%;
  animation: final-t-confirm 260ms var(--ease-out) both;
}

.primary-resolved .typed-infinity {
  animation: infinity-confirm 260ms var(--ease-out) both;
}

.site-footer {
  justify-self: end;
  color: var(--text-secondary);
  font-size: clamp(0.7rem, 0.82vw, 0.82rem);
  font-weight: 420;
  letter-spacing: 0.025em;
  line-height: 1.2;
  white-space: nowrap;
}

.motion-ready .brand-lockup,
.motion-ready .title-line-local,
.motion-ready .site-footer {
  opacity: 0;
}

.motion-ready .brand-lockup {
  transform: translateY(-0.35rem);
}

.motion-ready .title-line-local {
  clip-path: inset(0 100% 0 0);
  transform: translateY(0.22em);
}

.motion-ready .site-footer {
  transform: translateY(0.35rem);
}

.motion-ready .brand-lockup.is-visible,
.motion-ready .site-footer.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 360ms var(--ease-out),
    transform 460ms var(--ease-out);
}

.motion-ready .title-line-local.is-visible {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transform: translateY(0);
  transition:
    opacity 260ms var(--ease-out),
    clip-path 430ms var(--ease-out),
    transform 430ms var(--ease-out);
}

@keyframes caret-blink {
  0%,
  52% {
    opacity: 1;
  }
  53%,
  100% {
    opacity: 0;
  }
}

@keyframes caret-release {
  from {
    opacity: 1;
    transform: translateY(0.055em) scaleY(1);
  }
  to {
    opacity: 0;
    transform: translateY(0.055em) scaleY(0.6);
  }
}

@keyframes final-t-confirm {
  0% {
    color: var(--text);
    transform: scale(1);
  }
  46% {
    color: var(--accent);
    transform: scale(1.14);
  }
  100% {
    color: var(--text);
    transform: scale(1);
  }
}

@keyframes infinity-confirm {
  0%,
  100% {
    color: var(--accent);
    transform: scale(1);
  }
  46% {
    color: var(--text);
    transform: scale(1.035);
  }
}

@media (max-width: 47.99rem) {
  body {
    padding:
      max(1.35rem, env(safe-area-inset-top))
      max(1.25rem, env(safe-area-inset-right))
      max(1.35rem, env(safe-area-inset-bottom))
      max(1.25rem, env(safe-area-inset-left));
  }

  .hero {
    padding-block: 2rem;
  }

  .hero-title {
    transform: translateY(0);
  }

  .title-line-primary {
    font-size: clamp(2.35rem, 10.8vw, 4.75rem);
  }

  .title-line-local {
    margin-inline-start: clamp(4.75rem, 34vw, 9rem);
    font-size: clamp(1.6rem, 6.8vw, 2.5rem);
  }

  .brand-lockup {
    font-size: 0.8rem;
  }

  .site-footer {
    font-size: 0.8rem;
  }
}

@media (max-height: 35rem) {
  .hero {
    padding-block: 1.35rem;
  }

  .title-line-local {
    margin-block-start: 0.45rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .typing-caret {
    display: none;
  }
}