:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #232323;
  --muted: rgba(35, 35, 35, 0.25);
  --line: rgba(0, 0, 0, 0.1);
  --red: #e80700;
  --demo-cycle: 9600ms;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Avenir Next", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

a,
button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

img {
  display: block;
  max-width: 100%;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  left: 24px;
  top: 16px;
  z-index: 20;
  transform: translateY(-180%);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  padding: 10px 14px;
  font-size: 14px;
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.page-shell {
  position: relative;
  width: 100%;
  max-width: 856px;
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 60vh;
}

.site-header {
  position: absolute;
  inset: 80px 24px auto;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.brand {
  pointer-events: auto;
}

.brand {
  display: inline-flex;
  width: auto;
  align-items: flex-end;
  gap: 12px;
  text-decoration: none;
}

.brand img {
  width: 300px;
  height: auto;
}

.brand-studio {
  color: #111;
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-7px);
}

.copy-flow {
  margin-top: 364px;
  padding: 0 24px;
  color: var(--ink);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.6;
}

.copy-flow h1,
.copy-flow p {
  display: inline;
  margin: 0;
  font: inherit;
  text-wrap: pretty;
}

.copy-flow h1 {
  font-weight: 600;
}

.copy-flow .member-line {
  display: block;
}

.copy-flow .line-start {
  display: block;
}

.copy-flow #contact {
  color: inherit;
}

.copy-flow #contact + .line-start {
  margin-top: 1.05em;
}

.copy-flow .half-copy {
  display: grid;
  width: calc(100% - 2em);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 4em;
  margin: 0 1em calc(40px + 4em);
  font-size: 0.5em;
  line-height: 1.6;
}

.copy-flow .half-copy:has(.workflow-demo) {
  margin-bottom: 40px;
}

.copy-flow .red-zone {
  position: relative;
  z-index: 0;
  display: block;
  margin-bottom: -60vh;
  padding-bottom: 78vh;
}

.copy-flow .red-zone::before {
  position: absolute;
  inset: 0 auto 0 50%;
  z-index: -1;
  width: 100vw;
  background: linear-gradient(
    180deg,
    #fff 0%,
    #fff 8%,
    #fff4f3 20%,
    #ffd8d5 46%,
    #ff928c 74%,
    var(--red) 100%
  );
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
}

.copy-flow .background-shift-start {
  line-height: 1.78;
}

.copy-flow .background-shift-start .line-start {
  margin-top: 0.72em;
}

.copy-flow .half-copy-lead {
  grid-column: 1 / -1;
  grid-row: 1;
}

.melt-word {
  display: inline-block;
}

.melt-word .scroll-token.is-lit {
  color: var(--red);
}

.copy-flow .half-copy-detail {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  transform: translateY(4em);
}

.copy-flow .ppt-copy .half-copy-detail {
  grid-column: 1;
}

.workflow-demo {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  display: block;
  align-self: start;
  min-height: 10.4em;
  transform: translateY(4em);
}

.client-demo {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  display: block;
  align-self: start;
  min-height: 10.4em;
  transform: translateY(4em);
  --client-cycle: 9000ms;
}

.ppt-demo {
  position: relative;
  grid-column: 2;
  grid-row: 2;
  display: block;
  align-self: stretch;
  width: min(100%, 16em);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(35, 35, 35, 0.12);
  border-radius: 8px;
  background: #f4f3ef;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transform: translateY(4em) scale(0.96);
}

.ppt-demo.is-visible {
  opacity: 1;
  transform: translateY(4em) scale(1);
  transition: opacity 520ms ease, transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ppt-track {
  display: flex;
  width: 600%;
  height: 100%;
  animation: none;
}

.ppt-demo.is-visible .ppt-track {
  animation: ppt-scroll 12s cubic-bezier(0.16, 1, 0.3, 1) 360ms infinite;
}

.ppt-track img {
  display: block;
  width: calc(100% / 6);
  height: 100%;
  object-fit: cover;
  object-position: center;
  flex: 0 0 calc(100% / 6);
}

.demo-screen,
.client-screen,
.demo-toolbar,
.demo-toolbar span,
.demo-body,
.demo-input,
.demo-prompt,
.demo-send,
.demo-thinking,
.demo-long-image,
.demo-long-image span,
.client-scroll,
.client-scroll-inner,
.client-input,
.client-prompt,
.client-attach,
.client-thinking,
.client-output {
  display: block;
}

.demo-screen {
  position: relative;
  width: 100%;
  max-width: 16em;
  min-height: 6.4em;
  border: 1px solid rgba(35, 35, 35, 0.12);
  border-radius: 8px;
  background: #f7f7f5;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
  opacity: 0;
  overflow: hidden;
  transform: translateY(1.4em) scale(0.96);
}

.workflow-demo.is-visible .demo-screen {
  animation: demo-screen-in 900ms cubic-bezier(0.16, 1, 0.3, 1) 80ms forwards;
}

.demo-toolbar {
  display: flex;
  position: relative;
  z-index: 2;
  gap: 0.28em;
  height: 1.1em;
  align-items: center;
  border-bottom: 1px solid rgba(35, 35, 35, 0.08);
  background: #f7f7f5;
  padding: 0 0.62em;
}

.demo-toolbar span {
  width: 0.34em;
  height: 0.34em;
  border-radius: 50%;
  background: rgba(35, 35, 35, 0.28);
}

.demo-body {
  position: relative;
  min-height: 5.3em;
  padding: 0.54em 0.72em;
}

.demo-input {
  position: relative;
  height: 1.7em;
  border: 1px solid rgba(35, 35, 35, 0.14);
  border-radius: 6px;
  background: #fff;
  color: #232323;
  font-size: 0.64em;
  font-weight: 700;
  line-height: 1.7em;
  opacity: 0;
  padding: 0 2.5em 0 0.78em;
  transform: translateY(0.8em);
}

.workflow-demo.is-visible .demo-input {
  animation: demo-input-in 460ms cubic-bezier(0.16, 1, 0.3, 1) 520ms forwards;
}

.demo-prompt {
  width: 0;
  max-width: 4.4em;
  overflow: hidden;
  white-space: nowrap;
}

.workflow-demo.is-visible .demo-prompt {
  animation: demo-type 720ms steps(4, end) 980ms forwards;
}

.demo-send {
  position: absolute;
  right: 0.52em;
  top: 50%;
  width: 1.08em;
  height: 1.08em;
  border-radius: 50%;
  background: #232323;
  opacity: 0;
  transform: translateY(-50%) scale(0.7);
}

.demo-send::before {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.46em;
  height: 0.46em;
  border-top: 1.25px solid #fff;
  border-left: 1.25px solid #fff;
  content: "";
  transform: translate(-50%, -42%) rotate(45deg);
}

.demo-send::after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.25px;
  height: 0.64em;
  background: #fff;
  content: "";
  transform: translate(-50%, -34%);
}

.workflow-demo.is-visible .demo-send {
  animation: demo-send-in 320ms cubic-bezier(0.16, 1, 0.3, 1) 1760ms forwards, demo-send-click 360ms ease 2300ms forwards;
}

.demo-thinking {
  margin-top: 0.42em;
  color: rgba(35, 35, 35, 0.5);
  font-size: 0.62em;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
}

.demo-thinking::after {
  display: inline-block;
  width: 1.4em;
  content: "...";
  animation: demo-dots 900ms steps(3, end) infinite;
}

.workflow-demo.is-visible .demo-thinking {
  animation: demo-thinking 1700ms ease 2700ms forwards;
}

.demo-long-image {
  position: absolute;
  left: 0.72em;
  top: 1.82em;
  width: 6.9em;
  height: 3.05em;
  min-height: 0;
  border-radius: 5px;
  background: #fff;
  color: #232323;
  padding: 0.3em;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14);
  opacity: 0;
  overflow: hidden;
  transform: translateY(1.6em) scale(0.72);
  transform-origin: center top;
}

.demo-report-scroll {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

.workflow-demo.is-visible .demo-long-image {
  animation: demo-card-in 900ms cubic-bezier(0.16, 1, 0.3, 1) 4200ms forwards;
}

.workflow-demo.is-visible .demo-report-scroll {
  animation: demo-report-scroll 3600ms cubic-bezier(0.16, 1, 0.3, 1) 5100ms forwards;
}

.client-screen {
  position: relative;
  width: 100%;
  max-width: 16em;
  height: 10.4em;
  border: 1px solid rgba(35, 35, 35, 0.12);
  border-radius: 8px;
  background: #f7f7f5;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
  opacity: 0;
  overflow: hidden;
  transform: translateY(1.4em) scale(0.96);
}

.client-demo.is-visible .client-screen {
  animation: demo-screen-in 900ms cubic-bezier(0.16, 1, 0.3, 1) 80ms forwards;
}

.client-scroll {
  position: absolute;
  inset: 1.1em 0 0;
  overflow: hidden;
}

.client-scroll-inner {
  padding: 0.56em 0.72em 0.78em;
  transform: translateY(0);
}

.client-demo.is-visible .client-scroll-inner {
  animation: client-scroll-cycle var(--client-cycle) cubic-bezier(0.16, 1, 0.3, 1) 800ms infinite;
}

.client-input {
  position: relative;
  min-height: 3.25em;
  border: 1px solid rgba(35, 35, 35, 0.14);
  border-radius: 6px;
  background: #fff;
  color: #232323;
  font-size: 0.5em;
  font-weight: 700;
  line-height: 1.36;
  opacity: 0;
  padding: 0.58em 3em 0.58em 0.78em;
  transform: translateY(0.8em);
}

.client-demo.is-visible .client-input {
  animation: client-input-cycle var(--client-cycle) cubic-bezier(0.16, 1, 0.3, 1) 800ms infinite;
}

.client-prompt {
  width: 0;
  max-width: 25em;
  overflow: hidden;
  white-space: nowrap;
}

.client-demo.is-visible .client-prompt {
  animation: client-type-cycle var(--client-cycle) steps(12, end) 800ms infinite;
}

.client-demo.is-visible .client-input .demo-send {
  animation: client-send-cycle var(--client-cycle) ease 800ms infinite;
}

.client-attach {
  width: 5.25em;
  height: 7.2em;
  margin-top: 0.55em;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14);
  opacity: 0;
  overflow: hidden;
  transform: translate(-1.2em, 1.2em) scale(0.72);
}

.client-demo.is-visible .client-attach {
  animation: client-attach-cycle var(--client-cycle) cubic-bezier(0.16, 1, 0.3, 1) 800ms infinite;
}

.client-attach img,
.client-output img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.client-output img {
  object-fit: contain;
}

.client-thinking {
  margin-top: 0.72em;
  color: rgba(35, 35, 35, 0.5);
  font-size: 0.58em;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
}

.client-thinking::after {
  display: inline-block;
  width: 1.4em;
  content: "...";
  animation: demo-dots 900ms steps(3, end) infinite;
}

.client-demo.is-visible .client-thinking {
  animation: client-thinking-cycle var(--client-cycle) ease 800ms infinite;
}

.client-output {
  width: 6.05em;
  height: 9.1em;
  margin-top: 0.64em;
  margin-left: auto;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
  opacity: 0;
  overflow: hidden;
  transform: translateY(1.2em) scale(0.82);
  transform-origin: center top;
}

.client-demo.is-visible .client-output {
  animation: client-output-cycle var(--client-cycle) cubic-bezier(0.16, 1, 0.3, 1) 800ms infinite;
}

@keyframes demo-screen-in {
  0% {
    opacity: 0;
    transform: translateY(1.4em) scale(0.96);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ppt-scroll {
  0%,
  12% {
    transform: translateX(0);
  }

  17%,
  28% {
    transform: translateX(-16.6667%);
  }

  33%,
  44% {
    transform: translateX(-33.3334%);
  }

  49%,
  60% {
    transform: translateX(-50%);
  }

  65%,
  76% {
    transform: translateX(-66.6667%);
  }

  81%,
  94% {
    transform: translateX(-83.3334%);
  }

  100% {
    transform: translateX(-83.3334%);
  }
}

@keyframes demo-input-in {
  0% {
    opacity: 0;
    transform: translateY(0.8em);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes demo-input-cycle {
  0% {
    opacity: 0;
    transform: translateY(0.8em);
  }

  7%,
  88% {
    opacity: 1;
    transform: translateY(0);
  }

  94%,
  100% {
    opacity: 0;
    transform: translateY(0.8em);
  }
}

@keyframes demo-type {
  0% {
    width: 0;
  }

  100% {
    width: 4.4em;
  }
}

@keyframes client-type {
  0% {
    width: 0;
  }

  100% {
    width: 25em;
  }
}

@keyframes client-input-cycle {
  0%,
  5%,
  100% {
    opacity: 0;
    transform: translateY(0.8em);
  }

  12%,
  90% {
    opacity: 1;
    transform: translateY(0);
  }

  96% {
    opacity: 0;
    transform: translateY(0.5em);
  }
}

@keyframes client-type-cycle {
  0%,
  12%,
  100% {
    width: 0;
  }

  31%,
  92% {
    width: 25em;
  }

  96% {
    width: 0;
  }
}

@keyframes demo-type-cycle {
  0%,
  7% {
    width: 0;
  }

  18%,
  88% {
    width: 4.4em;
  }

  94%,
  100% {
    width: 0;
  }
}

@keyframes client-attach-in {
  0% {
    opacity: 0;
    transform: translate(-1.2em, 1.2em) scale(0.72);
  }

  62% {
    opacity: 1;
    transform: translate(0.18em, -0.14em) scale(1.04);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes client-send-cycle {
  0%,
  31%,
  100% {
    opacity: 0;
    transform: translateY(-50%) scale(0.7);
  }

  35%,
  39%,
  44%,
  90% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }

  41% {
    opacity: 1;
    transform: translateY(-50%) scale(0.86);
  }

  96% {
    opacity: 0;
    transform: translateY(-50%) scale(0.7);
  }
}

@keyframes client-attach-cycle {
  0%,
  35%,
  100% {
    opacity: 0;
    transform: translate(-1.2em, 1.2em) scale(0.72);
  }

  43% {
    opacity: 1;
    transform: translate(0.18em, -0.14em) scale(1.04);
  }

  49%,
  88% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }

  96% {
    opacity: 0;
    transform: translateY(0.6em) scale(0.9);
  }
}

@keyframes client-thinking-cycle {
  0%,
  47%,
  66%,
  100% {
    opacity: 0;
  }

  52%,
  61% {
    opacity: 1;
  }
}

@keyframes client-output-in {
  0% {
    opacity: 0;
    transform: translateY(1.2em) scale(0.82);
  }

  58% {
    opacity: 1;
    transform: translateY(-0.16em) scale(1.04);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes client-output-cycle {
  0%,
  61%,
  100% {
    opacity: 0;
    transform: translateY(0) scale(1);
  }

  66%,
  91% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  96% {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
}

@keyframes client-scroll {
  0%,
  30% {
    transform: translateY(0);
  }

  50%,
  58% {
    transform: translateY(-2.35em);
  }

  82%,
  100% {
    transform: translateY(-11.55em);
  }
}

@keyframes client-scroll-cycle {
  0%,
  34%,
  100% {
    transform: translateY(0);
  }

  49%,
  56% {
    transform: translateY(-2.35em);
  }

  66% {
    transform: translateY(-9.2em);
  }

  86%,
  91% {
    transform: translateY(-11.55em);
  }

  96% {
    transform: translateY(-11.55em);
  }
}

@keyframes demo-send-in {
  0% {
    opacity: 0;
    transform: translateY(-50%) scale(0.7);
  }

  100% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

@keyframes demo-send-cycle {
  0%,
  8% {
    opacity: 0;
    transform: translateY(-50%) scale(0.7);
  }

  14%,
  22%,
  30%,
  88% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }

  26% {
    opacity: 1;
    transform: translateY(-50%) scale(0.86);
  }

  94%,
  100% {
    opacity: 0;
    transform: translateY(-50%) scale(0.7);
  }
}

@keyframes demo-send-click {
  0%,
  100% {
    transform: translateY(-50%) scale(1);
  }

  50% {
    transform: translateY(-50%) scale(0.86);
  }
}

@keyframes demo-thinking-cycle {
  0%,
  7%,
  32%,
  100% {
    opacity: 0;
  }

  12%,
  26% {
    opacity: 1;
  }
}

@keyframes demo-thinking {
  0%,
  100% {
    opacity: 0;
  }

  18%,
  78% {
    opacity: 1;
  }
}

@keyframes demo-card-cycle {
  0%,
  8% {
    opacity: 0;
    transform: translateY(1.6em) scale(0.72);
  }

  18% {
    opacity: 1;
    transform: translateY(-0.16em) scale(1.04);
  }

  25%,
  82% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  92%,
  100% {
    opacity: 0;
    transform: translateY(1.2em) scale(0.78);
  }
}

@keyframes demo-dots {
  0% {
    clip-path: inset(0 100% 0 0);
  }

  100% {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes demo-report-scroll-cycle {
  0%,
  12% {
    transform: translateY(0);
  }

  38%,
  54% {
    transform: translateY(-1.1em);
  }

  72%,
  86% {
    transform: translateY(-2.15em);
  }

  96%,
  100% {
    transform: translateY(0);
  }
}

@keyframes demo-card-in {
  0% {
    opacity: 0;
    transform: translateY(1.6em) scale(0.72);
  }

  58% {
    opacity: 1;
    transform: translateY(-0.16em) scale(1.04);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes demo-report-scroll {
  0%,
  18% {
    transform: translateY(0);
  }

  46%,
  62% {
    transform: translateY(-7.6em);
  }

  100% {
    transform: translateY(-15.2em);
  }
}

@keyframes demo-report-scroll-mobile {
  0%,
  10% {
    transform: translateY(0);
  }

  92%,
  100% {
    transform: translateY(calc(-100% + 4.06em));
  }
}

.faded {
  color: inherit;
}

.scroll-token {
  opacity: 0.25;
  transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-token.is-lit {
  opacity: 1;
}

.break {
  height: 64px;
}

.break.story-break {
  height: 72px;
}

.break.matched-story-break {
  height: 72px;
}

.break.small {
  height: 32px;
}

.member-cluster {
  position: relative;
  z-index: 5;
  display: inline-flex;
  width: 0;
  height: 1em;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  vertical-align: -0.08em;
  overflow: visible;
  pointer-events: none;
  transition: width 680ms cubic-bezier(0.16, 1, 0.3, 1), margin-right 680ms cubic-bezier(0.16, 1, 0.3, 1);
  --faces-width: 104px;
}

.member-cluster.is-revealed {
  width: var(--faces-width);
  margin-left: 12px;
  margin-right: -4px;
  pointer-events: auto;
}

.member-avatar {
  position: relative;
  width: 58px;
  height: 58px;
  min-width: 58px;
  margin-left: -12px;
  border: 4px solid #fff;
  border-radius: 999px;
  background: #f5f5f5;
  padding: 0;
  cursor: pointer;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.08),
    0 3px 3px rgba(0, 0, 0, 0.06),
    0 12px 24px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transform: translateY(24px) scale(0.68) rotate(-2deg);
  transform-origin: center bottom;
  transition: opacity 260ms ease, transform 360ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms ease;
  --member-delay: 40ms;
}

.member-avatar:first-child {
  margin-left: 0;
}

.member-avatar:nth-child(1) {
  z-index: 3;
  --member-delay: 80ms;
}

.member-avatar:nth-child(2) {
  z-index: 2;
  --member-delay: 170ms;
}

.member-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  image-rendering: auto;
}

.member-avatar:hover,
.member-avatar:focus-visible {
  z-index: 4;
  transform: translateY(2px) scale(1);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.1),
    0 24px 42px rgba(0, 0, 0, 0.1);
}

.member-cluster.is-revealed .member-avatar {
  opacity: 1;
  transform: translateY(0.08em) scale(1);
  animation: member-pop 860ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: var(--member-delay);
}

.member-cluster.is-revealed .member-avatar:hover,
.member-cluster.is-revealed .member-avatar:focus-visible {
  transform: translateY(0.04em) scale(1);
}

.member-avatar.is-active {
  z-index: 4;
}

@keyframes member-pop {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.68) rotate(-2deg);
  }

  42% {
    opacity: 1;
    transform: translateY(0) scale(1.06) rotate(0.8deg);
  }

  68% {
    transform: translateY(10px) scale(0.98) rotate(-0.2deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0.08em) scale(1) rotate(0deg);
  }
}

.member-tooltip {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 6;
  display: inline-flex;
  width: max-content;
  max-width: min(520px, calc(100vw - 48px));
  height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #000;
  color: #fff;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-10px);
  transition: opacity 300ms ease, transform 300ms cubic-bezier(0.19, 1, 0.22, 1);
}

.member-tooltip-divider {
  opacity: 0.3;
}

.member-tooltip-role {
  opacity: 0.7;
}

.member-cluster:hover .member-tooltip,
.member-cluster:focus-within .member-tooltip,
.member-cluster.is-open .member-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.book-link {
  position: relative;
  display: inline-flex;
  width: fit-content;
  align-items: baseline;
  gap: 0.32em;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  margin-top: 32px;
  padding: 0;
  text-decoration: none;
}

.book-link-icon {
  display: inline-flex;
  width: 1.11em;
  height: 1.11em;
  align-items: center;
  justify-content: center;
  transform: translate(0.08em, 0.16em);
}

.book-link-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: #000;
}

.book-link-text {
  position: relative;
  display: inline-block;
}

.book-link-text::after {
  position: absolute;
  left: 0;
  bottom: 7px;
  width: 100%;
  height: 2px;
  background: currentColor;
  content: "";
  opacity: 0.25;
  transform-origin: right;
  transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1), transform 260ms ease;
}

.book-link.is-lit .book-link-text::after {
  opacity: 1;
}

.book-link:hover .book-link-text::after,
.book-link:focus-visible .book-link-text::after {
  transform: scaleX(0);
}

.wechat-qr-panel {
  display: block;
  width: min(8em, 320px);
  margin-top: 0.55em;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 320ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.wechat-qr-panel[hidden] {
  display: none;
}

.wechat-qr-panel img {
  display: block;
  width: 100%;
  height: auto;
}

.site-footer {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 80px;
  color: rgba(35, 35, 35, 0.4);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.8;
}

.site-footer p {
  margin: 0;
}

@media (max-width: 760px) {
  .page-shell {
    max-width: 508px;
  }

  .site-header {
    inset: 40px 24px auto;
  }

  .brand img {
    width: min(220px, 56vw);
  }

  .brand-studio {
    font-size: clamp(24px, 6vw, 34px);
    transform: translateY(-5px);
  }

  .copy-flow {
    margin-top: 248px;
    font-size: 30px;
    line-height: 1.6;
    text-align: justify;
    text-align-last: left;
    text-justify: inter-character;
  }

  .copy-flow .result-copy {
    width: 100%;
    font-size: 1em;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: 0;
    text-wrap: pretty;
    text-align: left;
    text-align-last: left;
  }

  .copy-flow .half-copy-lead,
  .copy-flow .half-copy-detail,
  .copy-flow > p {
    text-align: justify;
    text-align-last: left;
    text-justify: inter-character;
  }

  .copy-flow .member-line {
    margin-top: 1.05em;
  }

  .break {
    height: 32px;
  }

  .break.small {
    height: 16px;
  }

  .copy-flow .half-copy {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 24px;
    margin: 0 0 calc(32px + 3em);
  }

  .copy-flow .half-copy-lead,
  .copy-flow .half-copy-detail,
  .copy-flow .ppt-copy .half-copy-detail,
  .workflow-demo,
  .client-demo,
  .ppt-demo {
    grid-column: 1;
  }

  .copy-flow .half-copy-lead {
    grid-row: 1;
  }

  .workflow-demo,
  .client-demo,
  .ppt-demo {
    grid-row: 2;
    width: 100%;
    max-width: 100%;
    transform: translateY(0);
  }

  .workflow-demo,
  .client-demo {
    font-size: calc((100vw - 48px) / 16);
    min-height: 0;
  }

  .workflow-demo {
    min-height: 0;
  }

  .client-demo {
    min-height: 0;
  }

  .demo-screen,
  .client-screen {
    max-width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
    height: auto;
  }

  .demo-body {
    box-sizing: border-box;
    height: calc(100% - 1.1em);
    min-height: 0;
  }

  .demo-long-image {
    left: 0.98em;
    top: 3.22em;
    bottom: 0.62em;
    width: calc((100% - 1.96em) / 2);
    height: auto;
    padding: 0;
    border-radius: 6px;
    transform: translateY(1em) scale(0.96);
    transform-origin: center top;
  }

  .ppt-demo {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
  }

  .ppt-track img {
    object-fit: contain;
  }

  .workflow-demo.is-visible .demo-report-scroll {
    animation: demo-report-scroll-mobile 5200ms linear 5100ms forwards;
  }

  .demo-report-scroll {
    width: calc(100% + 3px);
  }

  .workflow-demo.is-visible .demo-screen,
  .client-demo.is-visible .client-screen,
  .ppt-demo.is-visible {
    transform: translateY(0) scale(1);
  }

  .copy-flow .half-copy-detail,
  .copy-flow .ppt-copy .half-copy-detail {
    grid-row: 3;
    transform: translateY(0);
  }

  .member-cluster {
    width: 0;
    height: 1em;
    margin: 0;
    transform: none;
    --faces-width: 78px;
  }

  .member-avatar {
    width: 43.5px;
    height: 43.5px;
    min-width: 43.5px;
    margin-left: -9px;
    border-width: 3px;
  }

  .member-cluster.is-revealed {
    width: var(--faces-width);
    margin-left: 8px;
    margin-right: -4px;
  }

  .member-tooltip {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: auto;
    top: 42vh;
    width: auto;
    max-width: none;
    height: auto;
    min-height: 38px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.25;
    white-space: normal;
    transform: translateY(8px);
    transform-origin: center top;
  }

  .member-cluster:hover .member-tooltip,
  .member-cluster:focus-within .member-tooltip,
  .member-cluster.is-open .member-tooltip {
    transform: translateY(0);
  }

  .site-footer {
    bottom: 100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .member-avatar {
    opacity: 1;
    transform: translateY(0.08em) scale(1);
    animation: none !important;
  }

  .member-cluster {
    width: var(--faces-width);
    margin-left: 12px;
    margin-right: -4px;
  }
}