:root {
  color-scheme: dark;
  --ink: #f0f1f2;
  --muted: #a4aab3;
  --dim: #747b86;
  --line: #282d34;
  --line-strong: #373e48;
  --accent: #53c588;
  --accent-strong: #91e3b6;
  --warm: #ff9d3c;
  --bg: #080a0d;
  --bg-soft: #12161c;
  --surface: #0f1319;
  --surface-elevated: #171c24;
  --violet: #8477ff;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(60rem 38rem at 50% -8rem, rgba(116, 91, 255, .17), transparent 64%),
    radial-gradient(44rem 34rem at 88% 32rem, rgba(83, 197, 136, .07), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
  color: var(--ink);
  font: 16px/1.7 -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.skip-link {
  position: fixed;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  z-index: 20;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  transform: translateY(-160%);
  transition: transform 150ms var(--ease);
}

.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }

main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px 112px;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding-top: 8px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: block;
}

.brand-name {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.01em;
}

.language-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
  transition: color 150ms var(--ease);
}

.language-link:hover { color: var(--ink); }

header.hero {
  padding: 76px 0 40px;
  text-align: center;
}

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 560;
  letter-spacing: .02em;
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(83, 197, 136, .1);
}

h1, h2, h3 { text-wrap: balance; }

html[lang^="zh"] h1,
html[lang^="zh"] h2,
html[lang^="zh"] h3 { letter-spacing: 0; }

h1 {
  max-width: 13em;
  margin: 0 auto 24px;
  font-size: clamp(52px, 6.4vw, 72px);
  line-height: 1.04;
  font-weight: 650;
  letter-spacing: -.045em;
}

.hero p.lead {
  max-width: 62ch;
  margin: 0 auto 32px;
  color: var(--muted);
  font-size: clamp(18px, 2vw, 20px);
  line-height: 1.62;
}

p, li { text-wrap: pretty; }

figure.shot {
  width: min(900px, calc(100vw - 32px));
  margin: 56px auto 0;
  position: relative;
}

.hero figure.shot {
  width: min(1040px, calc(100vw - 32px));
}

figure.shot img,
.demo-frame {
  width: 100%;
  display: block;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  box-shadow: 0 28px 72px rgba(0, 0, 0, .48);
}

figure.shot img { height: auto; }

figure.shot img.window-shot {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 28px 36px rgba(0, 0, 0, .42));
}

.demo-frame {
  position: relative;
  overflow: hidden;
  background: #050706;
}

.demo-frame video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  background: #050706;
  cursor: pointer;
}

.demo-controls {
  position: absolute;
  inset-inline: 12px;
  inset-block-end: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}

.demo-toggle,
.demo-fullscreen {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: rgba(15, 17, 20, .92);
  color: var(--ink);
  cursor: pointer;
  pointer-events: auto;
  transition: background 150ms var(--ease), border-color 150ms var(--ease), transform 80ms var(--ease);
}

.demo-toggle { padding: 0 14px; }

.demo-fullscreen {
  padding: 0 13px;
  color: #c8ccd2;
  font-size: 13px;
}

.demo-toggle:hover,
.demo-fullscreen:hover {
  background: rgba(24, 27, 32, .96);
  border-color: rgba(255, 255, 255, .24);
}

.demo-toggle:active,
.demo-fullscreen:active { transform: scale(.98); }

.demo-toggle-icon {
  width: 13px;
  color: var(--accent-strong);
  font-size: 12px;
  text-align: center;
}

.demo-toggle-label { font-size: 13px; font-weight: 600; }

figure.shot figcaption {
  margin-top: 16px;
  color: var(--dim);
  font-size: 14px;
  text-align: center;
}

code {
  direction: ltr;
  unicode-bidi: embed;
  text-align: left;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .9em;
  font-variant-numeric: tabular-nums slashed-zero;
}

section { padding: 104px 0 0; }

main > section:not(.features-section):not(.console-showcase) {
  max-width: 760px;
  margin-inline: auto;
}

.features-section {
  max-width: 820px;
  margin-inline: auto;
}

h2 {
  margin: 0 0 28px;
  font-size: 28px;
  line-height: 1.18;
  font-weight: 620;
  letter-spacing: -.025em;
}

h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 620;
  letter-spacing: -.01em;
}

p { margin: 8px 0 18px; }
.muted { color: var(--muted); }
ul { padding-inline-start: 20px; }
li { margin: 6px 0; }

.cta {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  margin: 8px 0 0;
}

a.btn-primary,
a.btn-secondary {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

a.btn-primary {
  padding: 0 22px;
  border-radius: 9px;
  background: #eceeef;
  color: #101215;
  font-size: 16px;
  font-weight: 650;
  transition: background 150ms var(--ease), transform 80ms var(--ease);
}

a.btn-primary:hover { background: #ffffff; }
a.btn-primary:active { transform: scale(.985); }

a.btn-secondary {
  padding: 0 2px;
  color: #c8ccd2;
  font-size: 15px;
  font-weight: 560;
  transition: color 150ms var(--ease);
}

a.btn-secondary:hover { color: var(--ink); }

.form-note {
  max-width: 58ch;
  margin: 10px auto 0;
  color: var(--dim);
  font-size: 14px;
}

.feature-list {
  margin-top: 10px;
  border-top: 1px solid var(--line);
}

.feature-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 20px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
}

.feature-index {
  padding-top: 3px;
  color: var(--accent-strong);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.feature-item p {
  max-width: 65ch;
  margin: 0;
  color: var(--muted);
}

.console-showcase {
  padding-top: 136px;
  text-align: center;
}

.showcase-copy {
  max-width: 720px;
  margin: 0 auto 48px;
}

.showcase-copy h2 {
  max-width: 18em;
  margin: 0 auto 20px;
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -.04em;
}

html[lang^="zh"] .showcase-copy h2 { letter-spacing: -.015em; }

.showcase-copy > p:last-child {
  max-width: 66ch;
  margin: 0 auto;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
}

.product-stage {
  width: min(1120px, calc(100vw - 32px));
  margin: 0;
  padding: clamp(76px, 8vw, 104px) clamp(20px, 5vw, 64px) clamp(82px, 8vw, 96px);
  position: relative;
  inset-inline-start: 50%;
  overflow: hidden;
  isolation: isolate;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 30px;
  background:
    radial-gradient(46rem 24rem at 50% 4%, rgba(121, 103, 255, .25), transparent 68%),
    radial-gradient(30rem 22rem at 14% 94%, rgba(83, 197, 136, .14), transparent 72%),
    linear-gradient(180deg, #121720 0%, #090c11 78%);
  box-shadow:
    0 44px 120px rgba(0, 0, 0, .48),
    inset 0 1px rgba(255, 255, 255, .06);
}

.product-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .8), transparent 78%);
  pointer-events: none;
}

.product-stage::after {
  content: "";
  width: 72%;
  height: 28%;
  position: absolute;
  inset-block-start: 20%;
  inset-inline-start: 14%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(111, 89, 255, .2);
  filter: blur(76px);
  pointer-events: none;
}

.stage-window {
  width: min(100%, 1000px);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 2.2% / 3.7%;
  background: #101216;
  box-shadow:
    0 34px 80px rgba(0, 0, 0, .58),
    0 0 0 1px rgba(0, 0, 0, .5);
  transition: transform 280ms var(--ease);
}

.stage-window img {
  width: 100%;
  height: auto;
  display: block;
}

.stage-window-video {
  aspect-ratio: 1280 / 751;
  isolation: isolate;
  background: #0b0f10;
}

.stage-window-video .stage-poster,
.stage-window-video video {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  display: block;
  object-fit: cover;
}

.stage-window-video video {
  z-index: 1;
  opacity: 0;
  transition: opacity 180ms ease-out;
}

.stage-window-video.has-video-started video { opacity: 1; }

.stage-video-control {
  min-height: 34px;
  position: absolute;
  inset-inline-start: 12px;
  inset-block-end: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9px;
  background: rgba(9, 12, 16, .8);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
  backdrop-filter: blur(14px) saturate(145%);
  color: #d9dde4;
  font: 600 12px/1 var(--sans);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 180ms ease-out, transform 180ms ease-out, border-color 180ms ease-out;
  cursor: pointer;
}

.stage-video-control:hover { border-color: rgba(255, 255, 255, .26); }
.stage-video-control[hidden] { display: none; }

.stage-video-control:focus-visible,
.stage-window-video:hover .stage-video-control,
.stage-window-video.has-video-ended .stage-video-control,
.stage-window-video.is-video-fallback .stage-video-control {
  opacity: 1;
  transform: none;
}

@media (hover: hover) {
  .product-stage:hover .stage-window { transform: translateY(-3px) scale(1.002); }
}

.stage-badge {
  min-height: 38px;
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 10px;
  background: rgba(15, 19, 25, .82);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, .32),
    inset 0 1px rgba(255, 255, 255, .06);
  backdrop-filter: blur(16px) saturate(150%);
  color: #cdd2da;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

.stage-badge-device {
  inset-block-start: 28px;
  inset-inline-start: 36px;
}

.stage-badge-source {
  inset-block-start: 28px;
  inset-inline-end: 36px;
  color: var(--accent-strong);
}

.stage-badge-repl {
  min-width: 152px;
  inset-inline-end: 48px;
  inset-block-end: 48px;
  justify-content: space-between;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.stage-badge-repl span { color: var(--dim); }
.stage-badge-repl strong { color: var(--ink); font-weight: 650; }

.stage-live-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(83, 197, 136, .11);
}

.product-stage figcaption {
  position: absolute;
  inset-inline: 20px;
  inset-block-end: 16px;
  color: var(--dim);
  font-size: 13px;
  text-align: center;
}

.is-motion-ready .stage-window,
.is-motion-ready .stage-badge {
  opacity: 0;
}

.is-motion-ready .stage-window { transform: translateY(28px) scale(.985); }
.is-motion-ready .stage-badge { transform: translateY(8px) scale(.96); }

.is-motion-ready.is-visible .stage-window {
  opacity: 1;
  transform: none;
  animation: stage-window-enter 820ms var(--ease-emphasized);
}

.is-motion-ready.is-visible .stage-badge {
  opacity: 1;
  transform: none;
  animation: stage-badge-enter 460ms var(--ease-emphasized);
}

.is-motion-ready.is-visible .stage-badge-device { animation-delay: 360ms; }
.is-motion-ready.is-visible .stage-badge-source { animation-delay: 480ms; }
.is-motion-ready.is-visible .stage-badge-repl { animation-delay: 600ms; }

.is-motion-ready.is-visible .stage-live-dot {
  animation: stage-live-pulse 900ms ease-out 2 760ms;
}

@keyframes stage-window-enter {
  from { opacity: 0; transform: translateY(28px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes stage-badge-enter {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes stage-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(83, 197, 136, .4); }
  100% { box-shadow: 0 0 0 8px rgba(83, 197, 136, 0); }
}

.notice-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.notice-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.notice-list li::before { content: "—"; color: var(--warm); }

.section-kicker {
  margin: 0 0 12px;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .11em;
  text-transform: uppercase;
}

html[lang^="zh"] .section-kicker {
  letter-spacing: 0;
  text-transform: none;
}

.privacy-section p:last-child { max-width: 65ch; color: var(--muted); }
.faq-list { border-bottom: 1px solid var(--line); }

details {
  margin: 0;
  border-top: 1px solid var(--line);
}

details summary {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}

details summary::-webkit-details-marker { display: none; }

details summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--dim);
  font-size: 22px;
  font-weight: 350;
  transition: transform 150ms var(--ease), color 150ms var(--ease);
}

details[open] summary::after {
  color: var(--accent-strong);
  transform: rotate(45deg);
}

details p {
  max-width: 64ch;
  margin: 0;
  padding-block-end: 22px;
  padding-inline-end: 48px;
  color: var(--muted);
}

.closing-cta {
  margin-top: 96px;
  padding: 48px 0 16px;
  border-top: 1px solid var(--line-strong);
}

.closing-cta h2 { max-width: 18em; }
.closing-cta .cta { justify-content: flex-start; }
.closing-cta .form-note { margin-inline: 0; }

footer {
  border-top: 1px solid var(--line);
  padding: 28px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--dim);
}

footer a { color: var(--muted); }

@media (max-width: 640px) {
  body { font-size: 16px; line-height: 1.7; }
  main { padding: 0 20px 80px; }
  .site-nav { min-height: 64px; padding-top: 4px; }
  .brand-mark { width: 32px; height: 32px; }
  header.hero { padding: 48px 0 28px; }
  .eyebrow { margin-bottom: 18px; }
  h1 { max-width: none; font-size: 40px; line-height: 1.08; letter-spacing: -.03em; }
  .hero p.lead { margin-bottom: 26px; font-size: 18px; line-height: 1.62; }
  .cta { align-items: flex-start; gap: 8px; }
  .cta a.btn-primary { width: 100%; }
  a.btn-secondary { min-height: 44px; }
  .form-note { margin-top: 8px; font-size: 14px; }
  figure.shot,
  .hero figure.shot {
    width: calc(100% + 16px);
    margin-top: 40px;
    inset-inline-start: -8px;
    transform: none;
  }
  figure.shot img, .demo-frame { border-radius: 11px; }
  .demo-controls { inset-inline: 8px; inset-block-end: 8px; }
  .demo-toggle { padding: 0 12px; }
  .demo-fullscreen { padding: 0 12px; }
  figure.shot figcaption { padding: 0 8px; font-size: 14px; line-height: 1.55; }
  section { padding-top: 76px; }
  h2 { margin-bottom: 24px; font-size: 26px; }
  .feature-item { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 26px 0; }
  .console-showcase { padding-top: 96px; }
  .showcase-copy { margin-bottom: 34px; }
  .showcase-copy h2 { font-size: 34px; line-height: 1.12; }
  .showcase-copy > p:last-child { font-size: 17px; }
  .product-stage {
    width: calc(100vw - 24px);
    padding: 62px 10px 56px;
    border-radius: 22px;
  }
  .product-stage::before { background-size: 28px 28px; }
  .stage-badge { min-height: 34px; padding: 0 10px; border-radius: 9px; font-size: 11px; }
  .stage-badge-device { inset-block-start: 15px; inset-inline-start: 14px; }
  .stage-badge-source { display: none; }
  .stage-badge-repl {
    min-width: 142px;
    inset-inline-end: 14px;
    inset-block-end: 14px;
  }
  .stage-video-control { inset-inline-start: 8px; inset-block-end: 8px; }
  .product-stage figcaption { display: none; }
  .notice-list li { grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
  details summary { min-height: 68px; }
  details p { padding-inline-end: 24px; }
  .closing-cta { margin-top: 72px; padding-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .is-motion-ready .stage-window,
  .is-motion-ready .stage-badge {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-contrast: more) {
  :root { --muted: #c4c8ce; --dim: #a8aeb7; --line: #59616d; }
}