* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:70px
}
body {
  margin:0;
  background:#f6f6ef;
  color:#172018;
  font:16px/1.55 Inter,"Segoe UI","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased
}
h1,h2,h3,h4,p,figure {
  margin:0
}
a {
  color:inherit;
  text-decoration:none
}
a:hover {
  text-decoration:underline;
  text-underline-offset:5px
}
a:focus-visible,summary:focus-visible {
  outline:3px solid #80a174;
  outline-offset:5px
}
.inner {
  width:min(1180px,calc(100% - 112px));
  margin:auto
}
.sr,.skip:not(:focus) {
  position:absolute;
  width:1px;
  height:1px;
  clip-path:inset(50%);
  overflow:hidden
}
.skip:focus {
  position:fixed;
  top:12px;
  left:12px;
  background:white;
  z-index:20;
  padding:10px
}
header {
  background:#101511;
  color:#eaf0e7;
  border-bottom:1px solid #ffffff18;
  position:relative;
  z-index:3
}
.nav {
  height:72px;
  display:flex;
  align-items:center;
  gap:42px
}
.wordmark,.screen-head {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:650;
  letter-spacing:-.045em
}
.wordmark {
  font-size:23px
}
.nav .wordmark img,.screen-head img {
  filter:brightness(1.8)
}
.navlinks,.navend {
  display:flex;
  gap:30px;
  align-items:center;
  font-size:14px
}
.navlinks {
  margin:auto
}
.navend {
  gap:20px
}
.navcta {
  border:1px solid #c6d2c150;
  border-radius:24px;
  padding:8px 15px
}
.hero {
  overflow:hidden;
  color:#f5f8f2;
  background:radial-gradient(ellipse at 77% 52%,#445444 0%,#222d24 24%,#141b16 49%,#101511 76%)
}
.hero-inner {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  min-height:min(765px,80vw);
  position:relative
}
.hero-copy {
  z-index:1;
  padding:66px 0 85px
}
.hero-era { margin-bottom:16px; color:#c3d3be; font-size:18px; font-weight:550; }
.hero h1 {
  font-size:clamp(70px,7.25vw,110px);
  line-height:.98;
  letter-spacing:-.075em;
  font-weight:600
}
.hero h1 span,.copy h2 span {
  display:block
}
.hero h1 span+span {
  color:#b4cfa8
}
.hero-copy>p,.copy>p,.testing p {
  max-width:490px;
  font-size:clamp(17px,1.45vw,21px);
  line-height:1.6;
  color:#bfcbbe;
  margin:29px 0 34px
}
.button {
  display:inline-flex;
  gap:22px;
  align-items:center;
  padding:14px 22px;
  border-radius:30px;
  font-weight:600
}
.primary {
  background:#c2d8b6;
  color:#182217
}
.button:hover {
  background:#d6e6ce;
  text-decoration:none
}
.product {
  height:650px;
  position:relative;
  display:grid;
  place-items:center;
  perspective:1100px
}
.orbit {
  position:absolute;
  width:118%;
  aspect-ratio:1;
  left:0;
  top:7%;
  border-radius:50%;
  border:1px solid #becfb329;
  box-shadow:0 0 0 34px #ccdec405,0 0 0 35px #d3e7c810,0 0 0 76px #d3e7c804;
  transform:rotate(-22deg) scaleY(.86)
}
.handset {
  width:258px;
  height:524px;
  border-radius:42px;
  padding:6px;
  background:linear-gradient(125deg,#b3c3ad,#383e37 12%,#7b8979 32%,#1d241c 47%,#3c4439 72%,#96a48f);
  transform:rotateY(-13deg) rotateZ(9deg);
  box-shadow:19px 18px 0 -13px #171c17,30px 42px 46px #060c0990,inset 1px 1px 1px #eef3e5;
  position:relative
}
.screen {
  height:100%;
  border:3px solid #101610;
  border-radius:36px;
  overflow:hidden;
  position:relative;
  background:linear-gradient(155deg,#314034,#1a241e 56%,#131b16);
  padding:30px 18px 20px
}
.camera {
  border-radius:50%;
  width:9px;
  height:9px;
  background:#0a0e0b;
  position:absolute;
  top:10px;
  left:calc(50% - 4px)
}
.screen-head {
  font-size:16px
}
.screen-head img {
  width:20px;
  height:20px
}
.phonebody {
  margin-top:23px
}
.phonebody small,.result small {
  color:#b8c9af;
  font-size:12px
}
.phonebody h2 {
  font-size:25px;
  line-height:1.1;
  letter-spacing:-.055em;
  margin:3px 0 13px
}
.phone-rule {
  border-top:1px solid #b5d2ad38
}
.clockface {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:114px;
  height:114px;
  border:2px solid #afc79f;
  border-right-color:#61735e;
  outline:5px solid #9ab18f12;
  border-radius:50%;
  margin:15px auto 12px
}
.clockface b {
  font-size:45px;
  font-weight:450;
  letter-spacing:-.07em;
  line-height:1
}
.clockface span {
  font-size:11px;
  color:#bfccba
}
.phonebody h3 {
  font-size:16px;
  line-height:1.3
}
.phone-progress,.focusline {
  height:3px;
  background:#475348;
  margin:12px 0
}
.phone-progress i,.focusline i {
  display:block;
  background:#b6cda9;
  width:36%;
  height:100%
}
.minirows>div,.result li {
  display:flex;
  align-items:center;
  gap:10px
}
.minirows>div {
  font-size:12px;
  padding:5px 0
}
.minirows span,.result li span {
  margin-left:auto
}
.dot {
  display:inline-block;
  flex:none;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#9bb795
}
.d1 {
  background:#67856d
}
.d2 {
  background:#a69265
}
.gesture {
  position:absolute;
  bottom:9px;
  left:32%;
  right:32%;
  height:3px;
  background:#c9d2c5;
  border-radius:3px
}
.product figcaption,.focus-art>small {
  position:absolute;
  bottom:15px;
  color:#a6b1a4;
  font-size:11px
}
.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,8vw,120px);
  align-items:center
}
.planning,.focus {
  padding:112px 0
}
.copy h2,.testing h2 {
  font-size:clamp(49px,5.8vw,82px);
  line-height:1.04;
  letter-spacing:-.065em;
  font-weight:580
}
.copy p {
  color:#516050
}
.plan-card {
  background:#fffefa;
  border:1px solid #dadfd3;
  border-radius:26px;
  padding:32px;
  box-shadow:0 25px 65px #254b2110
}
.cardheading h3 {
  font-size:23px;
  letter-spacing:-.035em
}
.cardheading p {
  font-size:15px;
  color:#586252;
  margin-top:4px
}
fieldset {
  border:0;
  padding:0;
  margin:21px 0 26px;
  display:flex;
  gap:8px
}
fieldset label {
  position:relative;
  cursor:pointer
}
fieldset input {
  position:absolute;
  opacity:0
}
fieldset span {
  display:block;
  padding:7px 16px;
  border:1px solid #c0cabc;
  border-radius:20px;
  font-size:14px
}
fieldset input:checked+span {
  background:#344b36;
  color:white;
  border-color:#344b36
}
fieldset input:focus-visible+span {
  outline:3px solid #80a174;
  outline-offset:3px
}
.result {
  border-top:1px solid #dae0d6;
  padding-top:21px
}
.result small {
  color:#5a6957
}
.result h4 {
  font-size:21px;
  line-height:1.3;
  font-weight:600;
  margin:6px 0 17px
}
.band {
  height:8px;
  border-radius:8px;
  overflow:hidden;
  display:flex;
  gap:3px
}
.band i {
  background:#9bb795;
  flex:10
}
.band i:nth-child(2) {
  background:#67856d;
  flex:15
}
.band i:last-child {
  background:#a69265;
  flex:5
}
.result ol,.focuscard ul {
  padding:0;
  list-style:none;
  margin:14px 0 0
}
.result li {
  font-size:14px;
  padding:6px 0
}
.result li span {
  white-space:nowrap
}
.result li b {
  font-weight:500
}
.focus {
  background:#172019;
  color:#edf4e9
}
.focus .copy p {
  color:#b8c5b4
}
.focus-art {
  height:440px;
  position:relative;
  display:grid;
  place-items:center;
  background:radial-gradient(ellipse,#41513e,transparent 70%)
}
.focuscard {
  width:min(100%,340px);
  border-radius:24px;
  background:linear-gradient(145deg,#323e33,#202b22);
  border:1px solid #71806d75;
  box-shadow:12px 25px 46px #0b120b70;
  padding:30px
}
.focuslabel {
  display:flex;
  gap:8px;
  align-items:center;
  color:#c2d6b9;
  font-size:13px
}
.focuscard strong {
  font-size:70px;
  font-weight:450;
  letter-spacing:-.08em;
  font-variant-numeric:tabular-nums
}
.focuscard li {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:14px;
  margin:15px 0
}
.focuscard li span {
  width:16px;
  height:16px;
  border:1px solid #a2b49b;
  border-radius:4px;
  line-height:15px;
  text-align:center
}
.done {
  color:#adbdab
}
.done span {
  background:#c4d6ba;
  color:#2e3b2d
}
.questions {
  padding-top:100px;
  padding-bottom:100px;
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:55px
}
.questions h2 {
  font-size:clamp(32px,3.3vw,48px);
  line-height:1.16;
  letter-spacing:-.055em
}
.questions details {
  border-top:1px solid #cbd2c5
}
.questions details:last-child {
  border-bottom:1px solid #cbd2c5
}
summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  padding:19px 0;
  font-size:17px;
  font-weight:550;
  list-style:none
}
summary::-webkit-details-marker {
  display:none
}
summary::after {
  content:'+';
  color:#536a50;
  font-size:22px
}
details[open] summary::after {
  content:'−'
}
details p {
  padding:0 26px 18px 0;
  color:#536050
}
.testing {
  padding:86px 0 100px;
  text-align:center;
  background:#e4ebdd
}
.testing p {
  color:#4e5d4b;
  margin:19px auto 23px
}
.testing .primary {
  background:#2d402e;
  color:#f5faf3
}
footer {
  display:flex;
  align-items:center;
  gap:28px;
  padding:24px 0;
  font-size:13px
}
footer .wordmark {
  margin-right:auto
}
html[lang=zh-CN] h1,html[lang=zh-CN] h2 {
  letter-spacing:-.045em;
  line-height:1.14
}
html[lang=zh-CN] .copy h2 {
  font-size:clamp(35px,4.6vw,67px)
}
@media(max-width:880px) {
  .inner {
    width:calc(100% - 64px)
  }
  .navlinks {
    gap:17px
  }
  .nav {
    gap:15px
  }
  .navend {
    gap:12px
  }
  .hero h1 {
    font-size:clamp(54px,7.2vw,73px)
  }
  .product {
    height:580px
  }
  .handset {
    transform:rotateY(-12deg) rotateZ(7deg) scale(.9)
  }
  .planning,.focus {
    padding:80px 0
  }
  .plan-card {
    padding:22px
  }
}
@media(max-width:680px) {
  .inner {
    width:calc(100% - 42px)
  }
  .nav {
    height:60px;
    justify-content:space-between
  }
  .navlinks {
    display:none
  }
  .navend {
    font-size:13px
  }
  .navcta {
    padding:5px 9px
  }
  .wordmark {
    font-size:20px
  }
  .hero-inner {
    display:flex;
    flex-direction:column;
    align-items:stretch
  }
  .hero-copy {
    padding:60px 0 0;
    text-align:center
  }
  .hero h1 {
    font-size:clamp(52px,12.3vw,76px)
  }
  .hero-copy>p {
    font-size:17px;
    margin:20px auto 22px;
    max-width:370px
  }
  .product {
    height:456px;
    margin:14px 0 4px
  }
  .handset {
    transform:rotateY(-13deg) rotateZ(7deg) scale(.74);
    position:absolute
  }
  .product figcaption {
    bottom:7px
  }
  .orbit {
    width:100%;
    top:15%
  }
  .split,.questions {
    grid-template-columns:1fr;
    gap:30px
  }
  .planning,.focus {
    padding:62px 0
  }
  .copy p {
    margin:16px 0 0;
    font-size:17px
  }
  .copy h2,.testing h2 {
    font-size:46px
  }
  .focus-art {
    grid-row:2;
    height:370px
  }
  .questions {
    padding-top:65px;
    padding-bottom:65px
  }
  .testing {
    padding:62px 0
  }
  footer {
    flex-wrap:wrap;
    gap:12px
  }
  footer .wordmark {
    width:100%
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
}
.hero-features { display:inline-block; margin:12px 0 12px 20px; color:#d2dfcd; font-size:15px; }
.features { padding-block:92px 44px; }
.features h2 { font-size:clamp(38px,5vw,68px); line-height:1.07; letter-spacing:-.055em; margin-bottom:44px; }
.scene-picker { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.scene-picker[hidden],.scene[hidden] { display:none; }
.scene-picker button { border:1px solid #bdc7b8; border-radius:30px; background:transparent; color:#364834; font:inherit; padding:8px 20px; cursor:pointer; }
.scene-picker button[aria-pressed="true"] { background:#263e32; border-color:#263e32; color:white; }
.scene { --stage:#d5e1cb; display:grid; grid-template-columns:1fr 1fr; background:#ebeee4; border:1px solid #cbd3c4; border-radius:24px; overflow:hidden; margin-bottom:18px; }
.scene-1 { --stage:#e7d7bd; }
.scene-2 { --stage:#374d43; }
.scene-3 { --stage:#cfdfdf; }
.scene-copy { padding:clamp(24px,5vw,70px); align-self:center; }
.scene h3 { font-size:clamp(28px,3.4vw,48px); line-height:1.13; letter-spacing:-.045em; text-wrap:balance; }
.scene-copy>p { margin:20px 0; color:#445641; max-width:38ch; line-height:1.65; }
.scene details { border-block:1px solid #bdc7b7; }
.scene dl { margin:0 0 20px; }
.scene dt { font-weight:650; }
.scene dd { margin:4px 0 14px; color:#465644; }
.scene figure { position:relative; display:grid; place-items:center; align-content:center; gap:12px; padding:24px; background:radial-gradient(ellipse at 50% 40%,#ffffff40,transparent 70%),var(--stage); }
.scene figure a { display:block; line-height:0; border-radius:16px; box-shadow:0 12px 35px #16231b33; }
.scene img { display:block; width:auto; height:clamp(330px,34vw,426px); max-width:100%; object-fit:contain; border-radius:inherit; }
.scene figcaption { font-size:12px; color:#304136; }
.scene-2 figcaption { color:#eef3e8; }
@media(prefers-reduced-motion:no-preference) {
  .scene img { animation:scene-arrive .52s cubic-bezier(.22,.7,.25,1) both; }
  .scene-copy { animation:scene-arrive .38s ease-out both; }
  @keyframes scene-arrive { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
}
@media(max-width:880px) { .navlinks { gap:12px; } .nav { gap:10px; } }
@media(max-width:680px) {
  .features { padding-block:58px 12px; }
  .features h2 { margin-bottom:24px; }
  .hero-features { margin-left:12px; }
  .scene { grid-template-columns:1fr; }
  .scene-picker button { padding:6px 12px; font-size:14px; }
  .scene figure { padding:18px; }
  .scene img { height:310px; }
}

.apk-form { max-width:32rem; padding:0 12px; margin:auto; }
.apk-form label,.apk-form output { display:block; margin:.6em 0; }
.apk-form div { display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; }
.apk-form input,.apk-form button { font:inherit; padding:.7em 1em; border:1px solid #718471; border-radius:1.5em; }
.apk-form input { width:min(100%,16em); }
.apk-form button { cursor:pointer; }
.apk-form button:disabled { opacity:.65; }

.download-dialog { width:min(29rem,calc(100% - 32px)); padding:34px 24px 26px; border:1px solid #c2cfc0; border-radius:22px; background:#f6f6ef; color:#182217; text-align:center; }
.download-dialog::backdrop { background:#101910b3; }
.download-dialog h2 { margin:10px 0 4px; font-size:28px; }
.download-dialog p { color:#4e5d4b; margin:0 0 16px; }
.download-dialog .apk-form { padding:0; }
.download-dialog .apk-form button { background:#2d402e; color:#fff; }
.download-dialog>a { display:inline-block; margin-top:12px; text-decoration:underline; }
.dialog-close { position:absolute; right:8px; top:8px; width:38px; height:38px; border:0; background:transparent; color:inherit; font-size:24px; cursor:pointer; }