@charset "UTF-8";
:root {
  --paper:#f6f3ed;
  --ink:#282431;
  --muted:#716d79;
  --lavender:#b5a8ef;
  --iris:#7866b9;
  --night:#100f15;
  --line:rgba(47,40,62,.15);
  --serif:Georgia,"Times New Roman","Songti SC",serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color-scheme:light;
  font-family:var(--sans);
  font-synthesis:none;
  scroll-behavior:smooth;
  scroll-padding-top:96px
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased
}
button,input {
  font:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
a {
  color:inherit;
  text-decoration:none
}
p {
  line-height:1.7
}
button {
  color:inherit
}
button:disabled {
  cursor:default
}
button,a,input,summary {
  touch-action:manipulation
}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible {
  outline:3px solid #8b73d1;
  outline-offset:5px
}
button[hidden],[hidden] {
  display:none!important
}
::selection {
  background:#c9bbf3;
  color:#211c2e
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.skip {
  position:fixed;
  z-index:1000;
  top:10px;
  left:10px;
  transform:translateY(-150%);
  padding:14px 20px;
  background:var(--paper);
  color:var(--ink)
}
.skip:focus {
  transform:none
}
.site-header {
  height:88px;
  padding:0 5.3%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:var(--night);
  color:#efecf5;
  border-bottom:1px solid #ffffff12;
  position:relative;
  z-index:10
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:29px;
  font-weight:700;
  letter-spacing:-1.4px
}
.logo-mark {
  width:34px;
  height:30px;
  display:grid;
  place-items:center
}
.logo-mark .eyes {
  gap:6px;
  transform:rotate(-7deg)
}
.logo-mark .eyes i {
  width:7px;
  height:16px;
  background:var(--lavender);
  box-shadow:none
}
.site-header nav {
  display:flex;
  gap:30px;
  font-size:13px;
  color:#cbc6d4
}
.site-header nav a,.language {
  transition:color .2s
}
.site-header nav a:hover,.language:hover {
  color:#fff
}
.header-actions {
  display:flex;
  align-items:center;
  gap:22px;
  font-size:12px
}
.language {
  color:#c9c0d8
}
.header-cta {
  padding:12px 16px;
  border:1px solid #ffffff25;
  border-radius:40px;
  white-space:nowrap;
  display:flex;
  gap:16px
}
.header-cta:hover {
  background:#ffffff0b
}
.eyebrow {
  font-size:10px;
  font-weight:600;
  letter-spacing:2.1px;
  margin:0 0 26px;
  text-transform:uppercase;
  line-height:1.6
}
.hero {
  background:var(--night);
  color:#faf7f1;
  position:relative;
  overflow:hidden;
  isolation:isolate
}
.hero canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1;
  opacity:.83
}
.hero-grain {
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse at 72% 42%,transparent 0,#100f151c 30%,#100f15dd 80%)
}
.hero-inner {
  max-width:1440px;
  margin:auto;
  min-height:710px;
  padding:76px 8% 65px;
  display:grid;
  grid-template-columns:1.12fr 1fr;
  align-items:center;
  gap:48px
}
.hero-copy {
  position:relative;
  z-index:3
}
.hero .eyebrow {
  color:#b9accf;
  font-size:9px;
  letter-spacing:2.2px
}
.hero h1 {
  font-size:clamp(52px,6.4vw,96px);
  letter-spacing:-4px;
  line-height:1.05;
  font-weight:450;
  margin:0 0 27px
}
.hero h1 em {
  font-family:var(--serif);
  font-weight:400;
  color:var(--lavender);
  letter-spacing:-4px;
  white-space:nowrap
}
.hero-intro {
  font-size:15px;
  line-height:1.85;
  max-width:390px;
  color:#aaa4b6;
  margin:0 0 35px
}
.hero-buttons {
  display:flex;
  align-items:center;
  gap:25px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  border-radius:36px;
  padding:16px 25px;
  font-size:13px;
  border:1px solid transparent;
  line-height:1.2;
  min-height:49px;
  transition:transform .2s,background .2s
}
.button:hover {
  transform:translateY(-2px)
}
.button-light {
  background:#f4f0e9;
  color:#26212f
}
.button-light:hover {
  background:#fff
}
.button-dark {
  background:#2a2533;
  color:#fff
}
.button-dark:hover {
  background:#44364f
}
.text-link {
  display:inline-flex;
  gap:18px;
  align-items:center;
  font-size:12px;
  border-bottom:1px solid #ffffff40;
  padding:8px 0
}
.device-note {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  color:#aaa3b4;
  margin-top:27px
}
.mini-watch {
  display:inline-block;
  width:9px;
  height:12px;
  border:1px solid currentColor;
  border-radius:3px;
  position:relative
}
.mini-watch:before,.mini-watch:after {
  content:'';
  position:absolute;
  background:currentColor;
  width:4px;
  height:2px;
  left:1.5px
}
.mini-watch:before {
  top:-4px
}
.mini-watch:after {
  bottom:-4px
}
.hero-product {
  min-height:520px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column
}
.orbit {
  position:absolute;
  inset:7% -3% 8%;
  border:1px solid #c7b2fd13;
  border-radius:50%;
  transform:rotate(-25deg)
}
.orbit-two {
  inset:0 -14% 0;
  border-style:dashed;
  opacity:.65;
  transform:rotate(25deg)
}
.floating-note {
  position:absolute;
  font-size:10px;
  letter-spacing:2px;
  color:#a89abf;
  z-index:2
}
.note-one {
  top:35px;
  right:10px
}
.note-one i {
  font-size:23px;
  color:#c9b4fc;
  margin-left:15px
}
.product-caption {
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:30px;
  z-index:2
}
.product-caption p {
  font-size:12px;
  color:#d7cfe7;
  margin:0
}
.status-spark {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#c4afe9;
  box-shadow:0 0 12px #c4afe966
}
.watch-hint {
  font-size:10px;
  color:#8e839e;
  margin:8px 0 0;
  z-index:2
}
.hero-bottom {
  margin:0 5.3%;
  height:58px;
  border-top:1px solid #ffffff12;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#8d829e;
  font-size:8px;
  letter-spacing:2px
}
.hero-bottom>span:nth-child(2) {
  font-size:20px;
  position:absolute;
  left:50%;
  color:#c7b5e7
}
.watch-object {
  width:220px;
  height:366px;
  position:relative;
  isolation:isolate;
  flex-shrink:0;
  transform:rotate(-8deg);
  filter:drop-shadow(0 24px 25px #0009)
}
.watch-strap {
  position:absolute;
  width:122px;
  left:49px;
  background:linear-gradient(90deg,#282631,#3b3745 18%,#48434f 51%,#282530);
  z-index:-1;
  border:1px solid #aaa0b52a
}
.strap-top {
  height:128px;
  top:0;
  border-radius:39px 39px 15px 15px;
  transform:perspective(400px) rotateX(12deg);
  background-image:repeating-linear-gradient(0deg,transparent,transparent 11px,#0c0b0f6b 12px,#0c0b0f6b 13px),linear-gradient(90deg,#282631,#49434f 50%,#282631)
}
.strap-bottom {
  height:128px;
  bottom:0;
  border-radius:12px 12px 38px 38px;
  background-image:repeating-linear-gradient(0deg,transparent,transparent 11px,#0c0b0f6b 12px,#0c0b0f6b 13px),linear-gradient(90deg,#282631,#49434f 50%,#282631)
}
.watch-case {
  position:absolute;
  top:67px;
  width:220px;
  height:252px;
  border-radius:62px;
  background:linear-gradient(125deg,#81778c 0,#26232d 9%,#16141d 35%,#5d5567 65%,#a99cb8 87%,#37323e 100%);
  padding:7px;
  box-shadow:inset 1px 1px 3px #f1e3ff60,3px 6px 7px #0008
}
.watch-screen {
  height:100%;
  background:#050507;
  border:3px solid #15121b;
  border-radius:55px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  flex-direction:column
}
.watch-clock {
  font-size:10px;
  letter-spacing:1px;
  align-self:flex-end;
  margin:15px 18px 0;
  color:#b3a6c7
}
.watch-crown {
  position:absolute;
  right:-8px;
  top:123px;
  width:11px;
  height:29px;
  background:repeating-linear-gradient(0deg,#39323e,#39323e 2px,#94859e 3px);
  border-radius:4px;
  box-shadow:2px 2px 3px #0009;
  z-index:-1
}
.watch-face {
  position:absolute;
  top:63px;
  width:140px;
  height:75px;
  display:grid;
  place-items:center;
  border:0;
  background:transparent;
  border-radius:45px;
  z-index:3
}
.watch-face:focus-visible {
  outline-offset:-2px
}
.eyes {
  display:inline-flex;
  gap:22px;
  align-items:center;
  justify-content:center
}
.eyes i {
  display:block;
  width:21px;
  height:52px;
  border-radius:50%;
  background:#c5b3f6;
  box-shadow:0 0 30px #ac8eff17;
  transform-origin:center;
  animation:blink 6s infinite
}
.eyes i:nth-child(2) {
  animation-delay:.03s
}
.watch-timer {
  position:absolute;
  top:149px;
  font-size:17px;
  letter-spacing:2px;
  color:#d0c0e5;
  font-weight:300;
  opacity:.4
}
.watch-number {
  position:absolute;
  bottom:16px;
  font-size:8px;
  letter-spacing:2px;
  color:#9a8eac
}
.watch-orbit {
  position:absolute;
  width:136px;
  height:136px;
  top:56px;
  border:1px dotted #b8a3e84a;
  border-radius:50%;
  opacity:0;
  transition:opacity .3s
}
.watch-orbit:after {
  content:'';
  position:absolute;
  inset:-8px;
  border:1px dashed #c6b4ee40;
  border-radius:50%;
  transform:rotate(20deg)
}
.watch-stop {
  position:absolute;
  bottom:35px;
  z-index:5;
  width:22px;
  height:22px;
  border:1px solid #c9b4ed80;
  border-radius:50%;
  background:#221c2d;
  display:grid;
  place-items:center
}
.watch-stop>span {
  width:7px;
  height:7px;
  background:#c6b4ee;
  border-radius:2px
}
.hero-product.is-recording .watch-orbit {
  opacity:1;
  animation:turn 20s linear infinite
}
.hero-product.is-recording .watch-face {
  top:48px
}
.hero-product.is-recording .watch-face .eyes {
  transform:scale(.75)
}
.hero-product.is-recording .watch-timer {
  opacity:1;
  top:134px
}
.film-stop {
  display:none
}
.hero-product.is-saved .watch-face {
  animation:nod .6s ease
}
.section-pad {
  padding:105px 8%
}
.section-heading {
  max-width:900px;
  margin:0 auto 52px;
  text-align:center
}
.section-heading .eyebrow {
  color:#82758f
}
.section-heading h2,.privacy-copy h2,.closing h2 {
  font-size:clamp(35px,4.2vw,64px);
  line-height:1.13;
  font-weight:450;
  letter-spacing:-2.5px;
  margin:0 0 24px
}
.section-heading em,.privacy-copy em,.closing em {
  font-family:var(--serif);
  font-weight:400;
  color:var(--iris)
}
.section-intro {
  font-size:14px;
  color:var(--muted);
  max-width:520px;
  margin:0 auto;
  line-height:1.85
}
.experience {
  padding-bottom:45px
}
.story-frame {
  max-width:1170px;
  aspect-ratio:1.9;
  min-height:465px;
  border:1px solid #bfb4cc7d;
  border-radius:24px;
  background:#e8e1ed;
  overflow:hidden;
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr 1.05fr;
  align-items:center;
  padding:35px 6%;
  gap:20px
}
.story-light {
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 30% 25%,#fcf9fe99,transparent 60%),linear-gradient(120deg,#e5deeb,#ddd1e64d 55%,#f1e8e588);
  pointer-events:none
}
.story-mini-watch {
  position:relative;
  justify-self:center;
  transform:scale(.78);
  margin-left:-48px
}
.story-mini-watch .watch-object {
  transform:rotate(-12deg)
}
.story-mini-watch .watch-face {
  top:53px
}
.story-mini-watch .watch-timer {
  opacity:1
}
.story-mini-watch .watch-orbit {
  opacity:.8
}
.story-phone {
  position:relative;
  align-self:end;
  margin-bottom:-90px;
  justify-self:center;
  transform:rotate(6deg);
  filter:drop-shadow(4px 25px 25px #35254225)
}
.phone-object {
  position:relative;
  width:242px;
  height:510px;
  border:5px solid #37323d;
  border-radius:41px;
  background:var(--paper);
  padding:8px;
  box-shadow:0 0 0 1px #918895,inset 0 0 0 1px #fff;
  overflow:hidden
}
.phone-island {
  position:absolute;
  top:10px;
  left:79px;
  width:76px;
  height:19px;
  background:#111015;
  border-radius:20px;
  z-index:4
}
.phone-top {
  display:flex;
  justify-content:space-between;
  font-size:7px;
  font-weight:600;
  padding:10px 7px 0
}
.phone-app {
  padding:21px 9px 0
}
.phone-brand {
  display:flex;
  align-items:center;
  gap:2px;
  font-size:22px;
  font-weight:700;
  letter-spacing:-1px
}
.phone-brand .logo-mark {
  width:24px;
  height:20px
}
.phone-brand .logo-mark .eyes {
  gap:4px
}
.phone-brand .logo-mark .eyes i {
  height:10px;
  width:5px
}
.phone-dots {
  font-size:18px;
  margin-left:auto
}
.phone-date {
  font-size:6px;
  letter-spacing:.7px;
  color:#8a818e;
  display:block;
  margin:9px 0 18px
}
.phone-greeting {
  font-size:13px;
  font-weight:600;
  text-align:center
}
.pebble {
  width:100px;
  height:88px;
  position:relative;
  background:#b3a1e7;
  border-radius:50% 48% 48% 24% / 50% 66% 35% 31%;
  transform:rotate(-12deg);
  margin:16px auto;
  display:grid;
  place-items:center
}
.pebble .eyes {
  gap:15px;
  transform:rotate(12deg) translateY(-2px)
}
.pebble .eyes i {
  width:8px;
  height:16px;
  background:#352b4b;
  box-shadow:none
}
.pebble-smile {
  position:absolute;
  width:16px;
  height:10px;
  bottom:24px;
  left:45px;
  border-bottom:3px solid #fff;
  border-radius:50%;
  transform:rotate(12deg)
}
.memory-card,.chat-card {
  background:#fff;
  border-radius:15px;
  padding:13px 11px;
  position:relative
}
.memory-meta {
  font-size:6px;
  display:flex;
  align-items:center;
  gap:5px;
  color:#8a7c9c;
  letter-spacing:.3px
}
.memory-meta>span:last-child {
  margin-left:auto
}
.recording-dot {
  width:4px;
  height:4px;
  border-radius:50%;
  background:#a78acb
}
.memory-card h3 {
  font-size:11px;
  margin:10px 0 8px;
  letter-spacing:-.2px
}
.memory-card p {
  font-size:8px;
  line-height:1.8;
  margin:0;
  color:#736a7d
}
.waveform {
  height:25px;
  display:flex;
  gap:2px;
  align-items:center;
  margin-top:8px
}
.waveform i {
  flex:1;
  height:5px;
  border-radius:2px;
  background:#b9a4d9
}
.waveform i:nth-child(3n) {
  height:12px
}
.waveform i:nth-child(4n) {
  height:19px
}
.waveform i:nth-child(5n) {
  height:8px
}
.chat-card {
  margin-top:10px;
  font-size:8px;
  display:none
}
.chat-card>span {
  color:#7b6495;
  font-weight:600
}
.chat-card p {
  margin:8px 0;
  font-size:9px;
  line-height:1.6
}
.source-link {
  border:0;
  background:#f4effa;
  color:#71568c;
  border-radius:5px;
  font-size:8px;
  padding:6px
}
.phone-tabs {
  display:flex;
  justify-content:space-around;
  color:#a48dc3;
  margin:20px 10px;
  font-size:15px
}
.story-side {
  position:relative;
  align-self:center;
  margin-left:25px;
  max-width:230px;
  padding-bottom:18px
}
.tiny-label {
  font-size:8px;
  letter-spacing:2px;
  color:#887491
}
.story-side h3 {
  font-family:var(--serif);
  font-weight:400;
  font-size:32px;
  letter-spacing:-1px;
  line-height:1.13;
  margin:22px 0 15px
}
.story-side p {
  font-size:12px;
  color:#786a80;
  line-height:1.8
}
.story-side .button {
  font-size:10px;
  padding:13px 17px;
  min-height:42px;
  margin-top:10px
}
.sample-label {
  font-size:8px;
  letter-spacing:.5px;
  color:#776880
}
.story-frame>.sample-label {
  position:absolute;
  left:25px;
  bottom:20px
}
.story-lines {
  position:absolute;
  right:25px;
  bottom:22px;
  display:flex;
  gap:5px
}
.story-lines i {
  display:block;
  width:24px;
  height:2px;
  background:#c3b6cd
}
.story-lines i:first-child {
  background:#7e659c
}
.experience-caption {
  max-width:1170px;
  margin:17px auto;
  display:flex;
  justify-content:space-between;
  font-size:8px;
  letter-spacing:1.7px;
  color:#8e8199
}
.steps {
  padding-top:70px
}
.steps-grid {
  max-width:1170px;
  margin:0 auto 30px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:42px
}
.step {
  border-top:1px solid var(--line);
  padding-top:21px
}
.step-number {
  color:#95839f;
  font-size:10px;
  letter-spacing:2px
}
.step h3 {
  font-size:21px;
  font-weight:500;
  letter-spacing:-.6px;
  margin:24px 0 12px
}
.step p {
  font-size:13px;
  color:var(--muted);
  max-width:300px;
  margin:0;
  line-height:1.9
}
.step-art {
  height:100px;
  display:flex;
  align-items:center;
  justify-content:center
}
.step-art .eyes i {
  background:#a18acb;
  width:16px;
  height:37px;
  box-shadow:none
}
.word-lines {
  width:95px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transform:rotate(-7deg)
}
.word-lines i {
  display:block;
  height:5px;
  border-radius:4px;
  background:#b2a0c7
}
.word-lines i:nth-child(2) {
  width:75%;
  background:#c9bbd7
}
.word-lines i:nth-child(3) {
  width:90%;
  background:#d6cadd
}
.memory-star {
  font-size:88px;
  font-family:var(--serif);
  color:#a18acb;
  font-weight:400
}
.inline-link {
  font-size:12px;
  display:inline-flex;
  align-items:center;
  gap:13px;
  color:#755b91;
  padding:10px 0;
  border-bottom:1px solid #9b87b250
}
.steps>.inline-link {
  margin-left:max(0px,calc((100% - 1170px)/2))
}
.privacy-section {
  background:#14121a;
  color:#eee8f4;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10%;
  align-items:center;
  min-height:650px
}
.privacy-orb {
  justify-self:center;
  position:relative;
  width:clamp(210px,27vw,390px);
  aspect-ratio:1;
  border:1px solid #ad90ce33;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 45% 45%,#34243d,#201a29 40%,transparent 70%);
  box-shadow:0 0 90px #6d428a12
}
.privacy-orb:before,.privacy-orb:after {
  content:'';
  position:absolute;
  border:1px solid #b59ace19;
  border-radius:50%;
  inset:-30px;
  transform:rotate(-20deg)
}
.privacy-orb:after {
  inset:-60px;
  border-style:dashed;
  opacity:.6
}
.privacy-orb .eyes {
  gap:34px
}
.privacy-orb .eyes i {
  width:31px;
  height:73px;
  background:#c5abed;
  box-shadow:0 0 30px #b08ad41a
}
.privacy-copy {
  max-width:500px
}
.privacy-copy .eyebrow {
  font-size:9px;
  color:#b6a0ca
}
.privacy-copy h2 {
  font-size:clamp(34px,3.8vw,56px)
}
.privacy-copy em {
  color:#c3a7e0
}
.privacy-copy .section-intro {
  color:#a49aaf;
  max-width:420px;
  margin:0;
  font-size:13px
}
.data-flow {
  margin:30px 0
}
.data-flow>div {
  display:flex;
  gap:15px;
  border-top:1px solid #ffffff16;
  padding:15px 0;
  font-size:11px
}
.data-flow dt {
  color:#a49aaf;
  width:95px;
  flex-shrink:0
}
.data-flow dd {
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex:1;
  margin:0;
  color:#d3c7df
}
.data-flow dd span {
  color:#a48eb8
}
.privacy-copy .text-link {
  font-size:11px;
  color:#dbcaed
}
.faq {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:8%;
  max-width:1600px;
  margin:auto
}
.faq .section-heading {
  text-align:left
}
.faq h2 {
  font-size:42px;
  max-width:320px
}
.faq details {
  border-top:1px solid var(--line)
}
.faq details:last-child {
  border-bottom:1px solid var(--line)
}
.faq summary {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:24px 0;
  cursor:pointer;
  font-size:14px;
  font-weight:500
}
.faq summary::-webkit-details-marker {
  display:none
}
.faq summary span {
  font-size:23px;
  font-weight:300;
  color:#9b86b2;
  transition:transform .25s
}
.faq details[open] summary span {
  transform:rotate(45deg)
}
.faq details p {
  margin:0 0 24px;
  font-size:13px;
  color:var(--muted);
  max-width:540px;
  line-height:1.9
}
.closing {
  background:var(--paper);
  text-align:center;
  padding-top:75px;
  padding-bottom:85px
}
.closing-eyes {
  margin-bottom:32px
}
.closing-eyes .eyes {
  gap:13px
}
.closing-eyes .eyes i {
  width:11px;
  height:29px;
  background:#ad9ccf;
  box-shadow:none
}
.closing h2 {
  font-size:clamp(45px,5.8vw,85px);
  line-height:1.05;
  letter-spacing:-3.5px;
  margin-bottom:25px
}
.closing em {
  color:#77717d
}
.closing p {
  color:#5f506e;
  font-size:13px;
  margin:0 auto 30px;
  max-width:400px
}
.site-footer {
  padding:48px 5.3% 25px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:45px;
  background:var(--paper)
}
.site-footer .brand {
  font-size:26px
}
.site-footer p {
  font-size:11px;
  color:#887d92;
  margin:15px 0
}
.site-footer nav {
  display:flex;
  gap:30px;
  align-items:start;
  padding-top:10px;
  font-size:11px;
  color:#766982
}
.site-footer nav a {
  display:flex;
  gap:12px
}
.copyright {
  font-size:9px;
  color:#93869d
}
.back-top {
  justify-self:end;
  color:#8d769f;
  font-size:20px
}
.article-main {
  max-width:880px;
  margin:0 auto;
  padding:70px 32px 100px;
  min-height:65vh
}
.article-main>.inline-link {
  margin-bottom:55px
}
.article-main>.eyebrow {
  margin-bottom:25px;
  color:#8a729b
}
.article-main h1 {
  font-weight:450;
  font-size:clamp(38px,5vw,64px);
  letter-spacing:-2px;
  line-height:1.15;
  margin:0 0 55px
}
.article-body section {
  margin:0 0 35px;
  padding-top:20px;
  border-top:1px solid var(--line)
}
.article-body h2,.release-entry h2 {
  font-size:23px;
  font-weight:500;
  letter-spacing:-.4px
}
.article-body p,.release-entry p {
  font-size:15px;
  line-height:1.95;
  color:#6f6577
}
.release-main {
  position:relative
}
.release-companion {
  position:absolute;
  right:10px;
  top:125px;
  opacity:.65
}
.release-companion .pebble {
  width:130px;
  height:116px
}
.release-companion .eyes {
  gap:23px
}
.release-companion .eyes i {
  width:10px;
  height:23px
}
.release-companion .pebble-smile {
  left:57px;
  bottom:35px
}
.release-main h1 {
  max-width:560px;
  position:relative;
  z-index:1
}
.release-entry {
  border-top:1px solid var(--line);
  padding-top:35px
}
.release-entry time {
  font-size:11px;
  color:#8c799b;
  letter-spacing:.5px
}
.release-entry .button {
  margin-top:20px
}
.article-main>.button {
  margin-top:25px
}
dialog {
  width:min(1100px,calc(100% - 48px));
  max-height:94dvh;
  padding:0;
  border:1px solid #c5b6d3;
  border-radius:22px;
  background:#f2ecf3;
  color:var(--ink);
  overflow:auto;
  box-shadow:0 30px 100px #0008
}
dialog::backdrop {
  background:#09070ecf;
  backdrop-filter:blur(12px)
}
body.film-open {
  overflow:hidden
}
.film-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:20px 26px
}
.film-top .brand {
  font-size:23px
}
.film-top .sample-label {
  margin-left:auto
}
.icon-button {
  border:1px solid #7e659329;
  border-radius:50%;
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  background:transparent;
  font-size:21px
}
.film-stage {
  height:450px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:20px 7%;
  gap:45px;
  background:radial-gradient(ellipse at 40% 25%,#fff9,#e9dfee55 70%)
}
.film-device {
  width:45%;
  display:flex;
  justify-content:center;
  flex-shrink:0;
  transition:opacity .6s,transform .8s;
  position:absolute;
  left:3%
}
.watch-scene .watch-object {
  transform:rotate(-8deg) scale(.92)
}
.watch-scene .watch-orbit {
  opacity:1
}
.watch-scene .watch-timer {
  opacity:1
}
.watch-scene .film-stop {
  display:grid
}
.watch-scene .watch-face {
  top:48px
}
.watch-scene .eyes {
  transform:scale(.7)
}
.watch-scene .watch-timer {
  top:133px
}
.phone-scene {
  opacity:0;
  transform:translateY(80px) rotate(5deg);
  pointer-events:none;
  top:30px
}
.phone-scene .phone-object {
  width:226px;
  height:474px
}
.phone-scene .phone-island {
  left:72px;
  width:72px
}
.film-copy {
  width:48%;
  margin-left:50%;
  position:relative;
  z-index:2
}
.film-copy .eyebrow {
  font-size:9px;
  color:#8f759e;
  margin-bottom:20px
}
.film-copy h2 {
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(31px,4vw,52px);
  letter-spacing:-1.5px;
  line-height:1.12;
  margin:0 0 22px
}
.film-copy p {
  font-size:13px;
  color:#7a6a84;
  max-width:300px;
  line-height:1.9
}
.film-stage[data-chapter="1"] .watch-scene,.film-stage[data-chapter="2"] .watch-scene {
  opacity:0;
  transform:translateX(-100px) rotate(-10deg);
  pointer-events:none
}
.film-stage[data-chapter="1"] .phone-scene,.film-stage[data-chapter="2"] .phone-scene {
  opacity:1;
  transform:translateY(0);
  pointer-events:auto
}
.film-stage[data-chapter="2"] .phone-greeting,.film-stage[data-chapter="2"] .phone-scene .pebble {
  display:none
}
.film-stage[data-chapter="2"] .chat-card {
  display:block
}
.film-stage[data-chapter="2"] .phone-date {
  margin-bottom:25px
}
.film-copy blockquote {
  font-size:13px;
  line-height:1.8;
  border-left:2px solid #b6a0ca;
  padding-left:14px;
  margin:25px 0;
  max-width:300px;
  color:#695176
}
.film-controls {
  padding:22px 28px 18px;
  background:#f5f0f5
}
.film-chapters {
  display:flex;
  gap:25px;
  margin-bottom:16px
}
.film-chapters button {
  border:0;
  background:none;
  font-size:11px;
  color:#8c7a96;
  padding:7px 0
}
.film-chapters button span {
  font-size:8px;
  margin-right:6px
}
.film-chapters button[aria-pressed=true] {
  color:#392c44;
  border-bottom:1px solid #85609e
}
#film-progress {
  width:100%;
  accent-color:#8867a4;
  height:16px;
  cursor:pointer
}
.transport {
  display:flex;
  align-items:center;
  gap:20px;
  padding-top:10px;
  font-size:10px
}
.transport button:not(.icon-button) {
  background:none;
  border:0;
  padding:8px 0
}
.transport #film-time {
  margin-left:auto;
  font-variant-numeric:tabular-nums;
  color:#887591
}
.transport #film-sound {
  min-width:120px;
  text-align:right
}
.sound-note {
  font-size:9px;
  color:#887591;
  text-align:right;
  margin:12px 0 0
}
@keyframes blink {
  0%,43%,47%,100% {
    transform:scaleY(1)
  }
  45% {
    transform:scaleY(.08)
  }
}
@keyframes turn {
  to {
    transform:rotate(360deg)
  }
}
@keyframes nod {
  50% {
    transform:translateY(5px) rotate(-3deg)
  }
}
html[lang=zh-CN] .hero h1 {
  font-size:clamp(46px,5.2vw,78px);
  line-height:1.25;
  letter-spacing:-2px
}
html[lang=zh-CN] .hero h1 em {
  letter-spacing:-2px;
  font-family:var(--sans);
  font-style:normal
}
html[lang=zh-CN] .hero-intro {
  max-width:330px
}
html[lang=zh-CN] .section-heading h2,html[lang=zh-CN] .privacy-copy h2 {
  font-size:clamp(30px,3.5vw,52px);
  line-height:1.4;
  letter-spacing:-1.5px
}
html[lang=zh-CN] em {
  font-style:normal;
  font-family:var(--sans)
}
html[lang=zh-CN] .story-side h3 {
  font-family:var(--sans);
  font-size:27px;
  line-height:1.45
}
html[lang=zh-CN] .closing h2 {
  line-height:1.4;
  font-size:clamp(38px,5vw,67px);
  letter-spacing:-1px
}
html[lang=zh-CN] .film-copy h2 {
  font-family:var(--sans);
  line-height:1.45
}
@media(min-width:1600px) {
  .section-pad {
    padding-left:calc((100% - 1280px)/2);
    padding-right:calc((100% - 1280px)/2)
  }
}
@media(max-width:1000px) {
  .hero-inner {
    gap:18px;
    padding:60px 6% 50px;
    min-height:650px
  }
  .hero h1 {
    font-size:64px;
    letter-spacing:-3.5px
  }
  .hero h1 em {
    letter-spacing:-3.5px
  }
  .hero-product {
    min-height:490px
  }
  .hero-buttons {
    gap:18px
  }
  .hero-buttons .button {
    padding:15px 18px;
    font-size:12px
  }
  .hero-intro {
    font-size:14px
  }
  .story-frame {
    padding:30px 5%;
    gap:10px
  }
  .story-mini-watch {
    transform:scale(.62);
    margin-left:-70px
  }
  .story-phone {
    transform:rotate(6deg) scale(.87);
    transform-origin:center bottom;
    margin-left:-60px
  }
  .story-side {
    margin-left:5px
  }
  .story-side h3 {
    font-size:29px
  }
  .story-side p {
    font-size:11px
  }
  .section-pad {
    padding-left:6%;
    padding-right:6%
  }
  .privacy-section {
    gap:9%
  }
  .privacy-orb {
    width:220px
  }
  .steps-grid {
    gap:28px
  }
  .site-header nav {
    gap:20px
  }
  .header-actions {
    gap:15px
  }
  .film-stage {
    height:420px
  }
}
@media(max-width:720px) {
  .site-header {
    height:74px;
    padding:0 6%;
    gap:12px
  }
  .brand {
    font-size:26px
  }
  .site-header nav {
    display:none
  }
  .header-actions {
    font-size:10px;
    gap:18px
  }
  .header-cta {
    padding:10px 12px;
    gap:10px
  }
  .hero-inner {
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:57px 6% 35px;
    min-height:0
  }
  .hero-copy {
    text-align:center;
    width:100%
  }
  .hero .eyebrow {
    font-size:8px;
    letter-spacing:1.6px;
    margin-bottom:24px
  }
  .hero h1 {
    font-size:clamp(45px,9.8vw,68px);
    line-height:1.07;
    letter-spacing:-2.7px;
    margin-bottom:23px
  }
  .hero h1 em {
    letter-spacing:-2.7px
  }
  .hero-intro {
    font-size:13px;
    max-width:340px;
    margin:0 auto 27px
  }
  .hero-buttons {
    justify-content:center;
    gap:22px
  }
  .hero-buttons .button {
    font-size:11px;
    min-height:46px
  }
  .text-link {
    font-size:11px
  }
  .device-note {
    font-size:9px;
    justify-content:center;
    margin-top:22px
  }
  .hero-product {
    min-height:415px;
    width:100%;
    max-width:400px;
    margin-top:5px
  }
  .hero-product .watch-object {
    transform:rotate(-8deg) scale(.83);
    margin-top:-22px;
    margin-bottom:-36px
  }
  .orbit-one {
    inset:4% 5% 5%
  }
  .orbit-two {
    inset:0 -3% 2%
  }
  .note-one {
    top:40px;
    right:30px
  }
  .product-caption {
    margin-top:22px
  }
  .watch-hint {
    font-size:9px
  }
  .hero-bottom {
    height:54px;
    font-size:7px;
    letter-spacing:1.2px
  }
  .hero-bottom>span:last-child {
    font-size:7px
  }
  .section-pad {
    padding:72px 6%
  }
  .section-heading {
    margin-bottom:34px
  }
  .section-heading h2,.privacy-copy h2 {
    font-size:36px;
    letter-spacing:-1.7px;
    line-height:1.18
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.8px;
    margin-bottom:20px
  }
  .section-intro {
    font-size:12px;
    max-width:340px;
    line-height:1.9
  }
  .experience {
    padding-bottom:30px
  }
  .story-frame {
    aspect-ratio:auto;
    height:600px;
    min-height:0;
    border-radius:18px;
    display:block;
    padding:30px 25px
  }
  .story-phone {
    position:absolute;
    bottom:-100px;
    left:51%;
    margin:0;
    transform:scale(.82) rotate(7deg);
    transform-origin:center bottom
  }
  .story-mini-watch {
    position:absolute;
    bottom:16px;
    left:25%;
    margin:0;
    transform:translateX(-50%) scale(.7);
    transform-origin:center bottom;
    z-index:1
  }
  .story-side {
    max-width:260px;
    margin:0;
    position:relative;
    z-index:2;
    padding:0
  }
  .story-side h3 {
    font-size:32px;
    max-width:230px;
    margin:16px 0 10px
  }
  .story-side p {
    font-size:12px;
    max-width:260px
  }
  .story-side .button {
    margin-top:8px
  }
  .story-frame>.sample-label {
    font-size:7px;
    bottom:12px;
    left:18px;
    z-index:4
  }
  .story-lines {
    bottom:15px;
    right:18px
  }
  .experience-caption {
    font-size:6px;
    letter-spacing:1px
  }
  .steps {
    padding-top:40px
  }
  .steps-grid {
    grid-template-columns:1fr;
    gap:30px;
    margin-bottom:22px
  }
  .step {
    position:relative;
    min-height:170px;
    padding:21px 95px 0 0
  }
  .step-art {
    position:absolute;
    right:5px;
    top:38px;
    width:70px;
    height:80px
  }
  .step-art .eyes {
    gap:13px
  }
  .step-art .eyes i {
    width:13px;
    height:30px
  }
  .word-lines {
    width:65px
  }
  .memory-star {
    font-size:70px
  }
  .step h3 {
    font-size:20px;
    margin:17px 0 10px
  }
  .step p {
    font-size:12px;
    max-width:400px
  }
  .privacy-section {
    display:flex;
    flex-direction:column;
    gap:75px;
    padding-top:85px;
    padding-bottom:70px
  }
  .privacy-orb {
    width:200px
  }
  .privacy-orb:before {
    inset:-20px
  }
  .privacy-orb:after {
    inset:-40px
  }
  .privacy-orb .eyes {
    gap:25px
  }
  .privacy-orb .eyes i {
    width:22px;
    height:57px
  }
  .privacy-copy {
    width:100%;
    max-width:460px
  }
  .privacy-copy h2 {
    font-size:38px
  }
  .privacy-copy .section-intro {
    font-size:12px
  }
  .faq {
    display:block
  }
  .faq .section-heading {
    margin-bottom:30px
  }
  .faq h2 {
    font-size:36px;
    max-width:100%
  }
  .faq summary {
    font-size:13px;
    padding:22px 0;
    min-height:66px
  }
  .faq details p {
    font-size:12px
  }
  .closing {
    padding-top:60px;
    padding-bottom:65px
  }
  .closing h2 {
    font-size:55px;
    letter-spacing:-2.6px
  }
  .closing p {
    font-size:12px;
    max-width:300px
  }
  .site-footer {
    padding:40px 6% 25px;
    grid-template-columns:1fr auto;
    gap:25px
  }
  .site-footer>div {
    grid-column:1/-1
  }
  .site-footer p {
    font-size:10px
  }
  .site-footer nav {
    grid-column:1/-1;
    flex-wrap:wrap;
    gap:20px;
    font-size:10px;
    margin-bottom:15px
  }
  .copyright {
    font-size:8px
  }
  .article-main {
    padding:45px 6% 70px
  }
  .article-main>.inline-link {
    margin-bottom:40px
  }
  .article-main h1 {
    font-size:39px;
    letter-spacing:-1.5px;
    margin-bottom:38px
  }
  .article-body p,.release-entry p {
    font-size:14px
  }
  .article-body h2,.release-entry h2 {
    font-size:21px
  }
  .release-companion {
    display:none
  }
  dialog {
    width:calc(100% - 20px);
    max-height:96dvh;
    border-radius:15px
  }
  .film-top {
    padding:14px 16px
  }
  .film-top .brand {
    font-size:22px
  }
  .film-top .sample-label {
    font-size:7px;
    max-width:150px;
    line-height:1.5;
    text-align:right
  }
  .film-stage {
    height:480px;
    display:block;
    padding:20px
  }
  .film-device {
    width:100%;
    left:0;
    height:290px;
    top:0;
    align-items:center
  }
  .watch-scene .watch-object {
    transform:rotate(-8deg) scale(.68)
  }
  .phone-scene {
    top:12px;
    transform:translateY(40px) scale(.6);
    height:320px
  }
  .film-stage[data-chapter="1"] .phone-scene,.film-stage[data-chapter="2"] .phone-scene {
    transform:scale(.6)
  }
  .film-copy {
    position:absolute;
    bottom:14px;
    left:6%;
    width:88%;
    margin:0;
    text-align:center
  }
  .film-copy .eyebrow {
    font-size:8px;
    margin-bottom:10px
  }
  .film-copy h2 {
    font-size:32px;
    margin-bottom:12px;
    letter-spacing:-.8px
  }
  .film-copy p {
    font-size:11px;
    max-width:340px;
    margin:0 auto;
    line-height:1.8
  }
  .film-copy blockquote {
    font-size:10px;
    text-align:left;
    max-width:100%;
    margin:10px auto 0;
    line-height:1.6
  }
  .film-controls {
    padding:15px 18px
  }
  .film-chapters {
    gap:20px;
    margin-bottom:10px;
    justify-content:center
  }
  .film-chapters button {
    font-size:10px
  }
  .transport {
    gap:12px;
    font-size:9px
  }
  .transport .icon-button {
    height:30px;
    width:30px;
    font-size:17px
  }
  .transport #film-sound {
    min-width:105px;
    font-size:9px
  }
  .transport #film-time {
    font-size:8px
  }
  .sound-note {
    font-size:8px;
    text-align:center;
    margin-top:10px
  }
  html[lang=zh-CN] .hero h1 {
    font-size:clamp(39px,8.2vw,58px)
  }
  html[lang=zh-CN] .hero-intro {
    max-width:300px
  }
  html[lang=zh-CN] .section-heading h2 {
    font-size:31px
  }
  html[lang=zh-CN] .privacy-copy h2 {
    font-size:32px
  }
  html[lang=zh-CN] .closing h2 {
    font-size:43px
  }
  html[lang=zh-CN] .story-side h3 {
    font-size:25px
  }
  html[lang=zh-CN] .film-copy h2 {
    font-size:27px
  }
}
@media(prefers-reduced-motion:reduce) {
  :root {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .hero canvas {
    opacity:.55
  }
}
.beta-note {
  font-size:9px;
  line-height:1.5;
  color:#9b8eab;
  margin:16px 0 -12px
}
.hero-bottom button {
  background:none;
  border:0;
  color:#aea0bb;
  font-size:8px;
  letter-spacing:1px;
  padding:12px 0
}
.motion-paused *,.motion-paused *:before,.motion-paused *:after {
  animation:none!important;
  transition:none!important
}
.language {
  min-height:44px;
  min-width:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center
}
.header-cta {
  min-height:44px;
  align-items:center
}
.film-controls button {
  min-height:36px
}
.film-top .icon-button {
  width:44px;
  height:44px
}
.film-copy>.inline-link {
  font-size:11px;
  min-height:44px;
  margin-top:6px;
  color:#71528d
}
.tab-hidden * {
  animation-play-state:paused!important
}
#watch-face {
  scroll-margin-top:120px
}
@media(max-width:720px) {
  .film-controls button {
    min-height:40px
  }
  .film-controls .icon-button {
    width:40px;
    height:40px
  }
  .film-chapters {
    gap:17px
  }
  .film-chapters button {
    font-size:11px
  }
  .transport {
    gap:9px
  }
  .transport #film-sound {
    min-width:95px;
    font-size:10px
  }
  .film-stage[data-chapter="2"] .film-copy h2 {
    font-size:26px
  }
  .film-stage[data-chapter="2"] .film-copy p {
    font-size:10px
  }
  .film-stage[data-chapter="2"] .film-copy .eyebrow {
    margin-bottom:6px
  }
}
.film-copy>.inline-link{background:transparent;border:0;border-bottom:1px solid #9b87b250;padding:8px 0}.film-stage.show-source .film-device{opacity:.14;filter:blur(3px);pointer-events:none}.film-stage.show-source .film-copy{padding:20px;background:#f3edf6ed;border-radius:14px}@media(max-width:720px){.phone-scene{top:-5px}.film-stage.show-source .film-copy{padding:18px}.film-stage.show-source .film-copy blockquote{font-size:12px}}

/* Connected hero: code-built devices based on the current Auo iPhone UI. */
.hero-inner{grid-template-columns:1fr 1.15fr;gap:35px;padding:65px 5.5% 55px;min-height:740px}
.hero h1{font-size:clamp(52px,5.4vw,83px);letter-spacing:-3.8px;line-height:1.1}
.hero h1 em{white-space:normal;letter-spacing:-3px}
.hero-intro{max-width:435px;font-size:15px;line-height:1.8;margin-bottom:25px}
.hero .eyebrow{letter-spacing:1.8px}
.setup-note{font-size:10px;line-height:1.7;color:#a99cb9;margin:18px 0 0;max-width:380px}
.hero-copy .beta-note{margin-top:7px}
.hero-product{min-height:610px;display:flex;justify-content:center;padding-top:5px}
.device-pair{position:relative;width:500px;height:510px;flex-shrink:0}
.hero-watch{position:absolute;left:0;top:80px;width:210px;z-index:2;text-align:center}
.hero-watch .watch-object{transform:rotate(-10deg) scale(.78);transform-origin:50% 0;margin-bottom:-82px}
.device-label{display:block;color:#a899bb;font-size:8px;letter-spacing:2px;text-align:center;margin-top:18px}
.hero-phone-wrap{position:absolute;right:1px;top:0;z-index:3}
.hero-phone-wrap .device-label{margin-top:19px}
.device-bridge{position:absolute;display:flex;align-items:center;gap:9px;left:177px;top:205px;z-index:4;transform:rotate(-12deg);pointer-events:none}
.device-bridge span{width:24px;height:1px;background:#bca2f0;opacity:.5}
.device-bridge i{font-style:normal;color:#d1bcff;font-size:22px;text-shadow:0 0 15px #bca2f0}
.hero-phone{width:246px;height:503px;transform:rotate(5deg);box-shadow:0 0 0 1px #92869d,10px 28px 65px #0008;color:#27232f;border-color:#504858}
.hero-phone .phone-app{padding:19px 7px 0}
.hero-phone .phone-brand{font-size:21px;letter-spacing:-.8px;gap:4px}
.app-companion-mark{width:22px;height:18px;border-radius:50% 50% 30% 25%;background:#b4a1e9;display:grid;place-items:center;transform:rotate(-10deg)}
.app-companion-mark .eyes{gap:5px;transform:rotate(10deg)}
.app-companion-mark .eyes i{width:3px;height:4px;background:#30243d}
.hero-phone .phone-dots{background:white;border-radius:50%;width:27px;height:27px;text-align:center;font-size:18px;letter-spacing:0}
.hero-phone-connection{display:flex;align-items:center;gap:5px;font-size:7px;margin-top:9px;color:#706777}
.hero-phone-connection .status-spark{background:#6d9b7a;box-shadow:none;width:4px;height:4px}
.hero-phone-greeting{font-size:13px;text-align:center;margin:20px 0 0;font-weight:650;letter-spacing:-.3px}
.hero-phone .pebble{width:79px;height:65px;margin:13px auto 8px}
.hero-phone .pebble .eyes{gap:23px}
.hero-phone .pebble .eyes i{height:8px;width:5px;background:#34283e}
.hero-phone .pebble-smile{width:12px;height:7px;bottom:20px;border-color:#fff}
.hero-phone-clock{display:flex;justify-content:center;align-items:center;gap:5px;font-size:8px;color:#84798c;font-variant-numeric:tabular-nums}
.hero-phone-clock .recording-dot{width:4px;height:4px;background:#a99ab9}
.hero-transcript{background:#fff;border-radius:14px;padding:12px 11px 8px;margin-top:14px}
.hero-card-label{display:flex;justify-content:space-between;font-size:7px;color:#8d8199;line-height:1.6;letter-spacing:.1px}
.hero-transcript p{font-size:10px;font-weight:550;line-height:1.7;margin:6px 0}
.hero-transcript .waveform{height:14px;gap:3px;margin:4px 0 0;overflow:hidden}
.hero-task{display:flex;gap:8px;align-items:center;background:#e8e0f2;border-radius:12px;padding:10px;margin-top:8px}
.hero-task>div{flex:1;min-width:0}
.hero-task-icon{font-size:21px;color:#7460bc}
.hero-task strong{font-size:9px;display:block;line-height:1.7;font-weight:600}
#phone-task-status{color:#7964b2;font-size:6px;white-space:nowrap}
.hero-knowledge{display:flex;align-items:flex-start;gap:8px;padding:12px 4px 0;color:#7d6da4}
.hero-knowledge>span{font-size:16px}
.hero-knowledge strong{font-size:9px;color:#4b405d;font-weight:600}
.hero-knowledge p{font-size:6.5px;line-height:1.6;margin:3px 0;color:#8b8292}
#phone-knowledge-status{font-size:6.5px;color:#8e80a2}
.hero-phone-tabs{position:absolute;bottom:12px;left:13px;right:13px;display:flex;justify-content:space-around;background:#fffaf1e8;border:1px solid #fff;border-radius:30px;padding:5px;box-shadow:0 4px 15px #3930460a}
.hero-phone-tabs>span{display:flex;flex-direction:column;align-items:center;gap:3px;padding:3px 15px;border-radius:22px;font-size:6px;line-height:1.2}
.hero-phone-tabs>span.selected{color:#7860c3;background:#e8e1ec}
.hero-phone-tabs svg{width:15px;height:15px}
.pair-flow{font-size:9px;letter-spacing:1.6px;color:#c6b4df;margin:31px 0 0;text-align:center}
.hero-product .product-caption{margin-top:14px}
.hero-sample{font-size:8px;color:#95859e;margin:12px 0 0;text-align:center}
.hero-product.is-recording .device-bridge i{animation:link-pulse 1.7s ease-in-out infinite}
.hero-product.is-recording .hero-phone-clock .recording-dot{background:#e88080}
.hero-product.is-saved #phone-knowledge-status,.hero-product.is-saved #phone-task-status{color:#537b61}
.hero-product.is-saved .hero-knowledge{background:#e4ebdf;border-radius:12px;padding:8px;margin-top:6px}
@keyframes link-pulse{50%{opacity:.45;transform:scale(.8)}}
.motion-paused .device-bridge i,.tab-hidden .device-bridge i{animation:none!important}
html[lang=zh-CN] .hero h1{font-size:clamp(43px,4.6vw,70px);line-height:1.27;letter-spacing:-2px}
html[lang=zh-CN] .hero-intro{max-width:400px}
@media(min-width:721px) and (max-width:1150px){
 .hero-inner{padding:55px 5% 45px;gap:15px;grid-template-columns:1fr 1.05fr}
 .hero h1{font-size:clamp(47px,5.7vw,65px)}
 .device-pair{transform:scale(.82);margin:-42px -45px}
 .hero-product{min-height:535px}
 .hero-intro{font-size:13px}
 html[lang=zh-CN] .hero h1{font-size:clamp(39px,4.8vw,55px)}
}
@media(max-width:720px){
 .hero-inner{padding:45px 6% 30px;gap:14px;min-height:0;display:flex}
 .hero h1{font-size:clamp(44px,10.8vw,68px);letter-spacing:-2px;line-height:1.1}
 .hero h1 em{letter-spacing:-2px;white-space:normal}
 .hero-intro{font-size:13px;max-width:350px;margin:0 auto 24px}
 .hero .eyebrow{font-size:8px;margin-bottom:22px}
 .setup-note{margin:17px auto 0;max-width:310px;font-size:9px}
 .hero-product{min-height:475px;height:475px;width:100%;max-width:430px;padding-top:0;margin-top:0}
 .device-pair{transform:scale(.68);transform-origin:50% 50%;margin:-82px -80px -72px}
 .hero-product .hero-watch .watch-object{transform:rotate(-10deg) scale(.78);margin-top:0;margin-bottom:-82px}
 .pair-flow{margin:18px 0 0;font-size:8px;letter-spacing:1px}
 .hero-product .product-caption{margin-top:13px}
 .hero-sample{font-size:7px;margin-top:10px}
 .watch-hint{font-size:8px}
 html[lang=zh-CN] .hero h1{font-size:clamp(37px,9vw,58px);line-height:1.28}
 html[lang=zh-CN] .hero-intro{max-width:340px}
}
@media(prefers-reduced-motion:reduce){.device-bridge i{animation:none!important}}
@media(max-width:720px){
 .film-stage .phone-scene{top:-24px}
 .film-stage[data-chapter="1"] .phone-scene,.film-stage[data-chapter="2"] .phone-scene{transform:scale(.5)}
 .film-stage .watch-scene{top:-25px}
 .film-stage .watch-scene .watch-object{transform:rotate(-8deg) scale(.59)}
}

/* The story playhead follows native document scrolling in both directions. */
.scroll-cue{display:inline-flex;align-items:center;gap:18px;font-size:13px;line-height:1.5;color:#e5d9f5;padding:12px 0;border-bottom:1px solid #cab6e455}
.scroll-cue>span{font-size:21px}
.scroll-story{position:relative;max-width:1170px;margin:0 auto}
.story-sticky{position:relative;min-height:620px;padding:70px 38px 110px;border:1px solid #bfb4cc7d;border-radius:25px;background:#e8e1ed;display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:30px;overflow:hidden;isolation:isolate}
.story-sticky .story-light{z-index:-1}
.scroll-sample{position:absolute;top:24px;left:30px;font-size:9px;letter-spacing:1px;color:#8a7b98}
.scroll-visual{position:relative;height:510px;display:flex;justify-content:center;align-items:center;min-width:0}
.scroll-devices{position:relative;width:500px;height:510px;flex-shrink:0}
.scroll-watch{position:absolute;left:2px;top:115px;z-index:2}
.scroll-watch .watch-object{transform:rotate(var(--watch-turn,-12deg)) scale(var(--watch-scale,.82));transform-origin:50% 30%}
.scroll-watch .watch-timer{opacity:1}
.scroll-watch .watch-orbit{opacity:.8}
.scroll-phone{position:absolute;left:228px;top:0;z-index:3;transform:translateX(var(--phone-shift,0px))}
.scroll-phone .hero-phone{transform:rotate(var(--phone-turn,-4deg));box-shadow:0 0 0 1px #92869d,12px 24px 50px #53436526}
.scroll-phone .hero-transcript p{clip-path:inset(0 var(--words-inset,0%) 0 0)}
.scroll-phone .hero-task{opacity:var(--task-opacity,1);transform:translateY(var(--task-shift,0px))}
.scroll-phone .hero-knowledge{opacity:var(--knowledge-opacity,1);transform:translateY(var(--knowledge-shift,0px))}
.scroll-transfer{position:absolute;top:248px;left:185px;color:#9b7fbd;font-size:23px;transform:rotate(-15deg);z-index:4;opacity:var(--link-opacity,.6);letter-spacing:4px}
.scroll-transfer span{font-size:18px}
.scroll-phone #story-phone-task-status{color:#7861a6;font-size:6px;white-space:nowrap}
.scroll-phone #story-phone-knowledge-status{font-size:6.5px;color:#7861a6}
.scroll-story[data-stage="2"] .hero-knowledge{background:#e0e8da;border-radius:10px;padding:8px;margin-top:5px}
.story-captions{position:relative;min-width:0;z-index:4}
.story-chapter{margin-bottom:25px}
.story-chapter .eyebrow{font-size:9px;letter-spacing:2px;color:#8a749b;margin:0 0 20px}
.story-chapter h3{font:400 clamp(29px,3.1vw,47px)/1.14 var(--serif);letter-spacing:-1.6px;margin:0 0 20px;color:#342a40}
.story-chapter>p:last-child{font-size:13px;line-height:1.9;color:#81718d;max-width:330px;margin:0}
.story-rail{list-style:none;position:absolute;bottom:28px;left:32px;right:32px;display:flex;gap:20px;padding:0;margin:0;color:#9482a4}
.story-rail li{position:relative;flex:1;font-size:10px;letter-spacing:.5px;line-height:1.6;padding:10px 0 0;border-top:2px solid #c8b9d2}
.story-rail li>span{font-size:8px;margin-right:7px;opacity:.65}
.story-rail-fill{position:absolute;left:0;right:0;top:-2px;height:2px;background:#8262a4;transform:scaleX(var(--chapter-progress,0));transform-origin:0 50%}
.story-rail li[aria-current]{color:#674b83}
.scroll-instruction{position:absolute;right:32px;bottom:78px;color:#9987aa;font-size:9px;letter-spacing:.5px;margin:0}
.scroll-instruction span{margin-left:10px}
.scroll-enhanced .scroll-story{height:300svh}
.scroll-enhanced .story-sticky{position:sticky;top:24px;height:calc(100svh - 48px);min-height:580px;max-height:760px}
.scroll-enhanced .story-captions{height:310px;display:flex;align-items:center}
.scroll-enhanced .story-chapter{position:absolute;inset:auto 0;margin:0;opacity:0;visibility:hidden;transform:translateY(12px)}
.scroll-enhanced .story-chapter.is-current{opacity:1;visibility:visible;transform:none}
html[lang=zh-CN] .story-chapter h3{font-family:var(--sans);font-size:clamp(27px,2.7vw,39px);line-height:1.4;letter-spacing:-1px}
.motion-paused .scroll-story{height:auto}
.motion-paused .story-sticky{position:relative;height:auto;max-height:none}
.motion-paused .story-captions{height:auto;display:block}
.motion-paused .story-chapter{position:relative;opacity:1;visibility:visible;transform:none;margin-bottom:30px}
.motion-paused .scroll-instruction{display:none}
@media(min-width:721px) and (max-width:1100px){
 .story-sticky{padding:65px 25px 100px;gap:25px;grid-template-columns:1.1fr 1fr}
 .scroll-devices{transform:scale(.76)}
 .scroll-visual{height:450px}
 .story-chapter h3{font-size:33px}
 .story-chapter>p:last-child{font-size:12px}
}
@media(max-width:720px){
 .scroll-cue{font-size:11px;gap:10px}
 .experience.section-pad{padding-left:4%;padding-right:4%}
 .experience .section-heading{padding:0 3%;margin-bottom:36px}
 .story-sticky{display:flex;flex-direction:column;justify-content:flex-start;padding:30px 22px 85px;gap:0;border-radius:18px;min-height:0}
 .scroll-enhanced .scroll-story{height:290svh}
 .scroll-enhanced .story-sticky{top:12px;height:calc(100svh - 24px);max-height:810px;min-height:550px}
 .scroll-sample{top:18px;left:21px;font-size:7px;letter-spacing:.5px}
 .scroll-visual{height:350px;flex-shrink:0;width:100%;margin-top:7px}
 .scroll-devices{transform:scale(.58);transform-origin:50% 50%;margin-top:-20px}
 .scroll-enhanced .story-captions{height:auto;flex:1;width:100%;min-height:145px;align-items:center;text-align:center}
 .story-chapter .eyebrow{font-size:8px;margin-bottom:10px}
 .story-chapter h3{font-size:30px;line-height:1.15;letter-spacing:-.8px;margin-bottom:12px}
 html[lang=zh-CN] .story-chapter h3{font-size:26px;line-height:1.35}
 .story-chapter>p:last-child{font-size:11px;line-height:1.8;max-width:330px;margin:auto}
 .story-rail{left:20px;right:20px;bottom:23px;gap:12px}
 .story-rail li{font-size:9px;padding-top:8px;letter-spacing:0}
 .story-rail li>span{margin-right:4px;font-size:7px}
 .scroll-instruction{right:22px;bottom:72px;font-size:7px}
 .motion-paused .scroll-story{height:auto}
 .motion-paused .story-sticky{height:auto;max-height:none;min-height:0}
 .motion-paused .story-captions{display:block;flex:none}
}
@media(max-width:720px) and (max-height:720px){
 .scroll-enhanced .story-sticky{min-height:0;padding-top:22px}
 .scroll-visual{height:260px}
 .scroll-devices{transform:scale(.46);margin-top:-35px}
 .scroll-enhanced .story-captions{min-height:155px}
 .story-chapter h3{font-size:25px}
 html[lang=zh-CN] .story-chapter h3{font-size:23px}
 .story-chapter>p:last-child{font-size:10px;line-height:1.6}
}

/* Full-width scroll scene: the devices share the page background. */
.experience.section-pad{padding-left:0;padding-right:0}
.experience>.section-heading{max-width:700px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
.scroll-story{max-width:none;width:100%}
.story-sticky{background:transparent;border:0;border-radius:0;gap:40px;padding:40px 6% 50px;grid-template-columns:1.45fr 1fr}
.story-sticky .story-light{display:none}
.scroll-enhanced .story-sticky{height:calc(100svh - 48px);max-height:none}
.scroll-visual{height:min(660px,78svh)}
.scroll-devices{transform:scale(var(--scene-scale,1.18))}
.scroll-watch{left:0;top:100px;transform:translateX(var(--watch-shift,0px))}
.scroll-phone{transform:translate(var(--phone-shift,0px),var(--phone-rise,0px))}
.scroll-sample{left:6%;top:16px}
.scroll-enhanced .story-captions{height:340px}
.story-chapter h3{font-size:clamp(34px,3.6vw,56px);line-height:1.12;letter-spacing:-1.6px}
.story-chapter>p:last-child{font-size:14px;line-height:1.85;max-width:360px}
html[lang=zh-CN] .story-chapter h3{font-size:clamp(30px,3vw,44px)}
.motion-paused .story-sticky{height:auto;max-height:none}
.motion-paused .story-captions{height:auto}
@media(min-width:721px) and (max-width:1100px){
 .story-sticky{gap:15px;padding-left:4%;padding-right:4%;grid-template-columns:1.3fr 1fr}
 .scroll-devices{transform:scale(.92)}
 .story-chapter h3{font-size:36px}
 .story-chapter>p:last-child{font-size:12px}
}
@media(max-width:720px){
 .experience.section-pad{padding-left:0;padding-right:0}
 .story-sticky{padding:30px 7% 40px;gap:0}
 .scroll-enhanced .story-sticky{top:12px;height:calc(100svh - 24px);min-height:550px}
 .scroll-sample{left:7%;font-size:7px;top:18px}
 .scroll-visual{height:410px;max-height:52svh;margin-top:12px}
 .scroll-devices{transform:scale(.68);margin-top:-15px}
 .scroll-watch{transform:translateX(calc(var(--watch-shift,0px) * .35))}
 .scroll-phone{transform:translate(calc(var(--phone-shift,0px) * .25),calc(var(--phone-rise,0px) * .5))}
 .scroll-enhanced .story-captions{height:auto;min-height:165px;text-align:center}
 .story-chapter h3{font-size:32px;letter-spacing:-.8px;line-height:1.15;margin-bottom:15px}
 html[lang=zh-CN] .story-chapter h3{font-size:28px;line-height:1.35}
 .story-chapter>p:last-child{font-size:12px;line-height:1.8;max-width:340px}
 .motion-paused .story-sticky{height:auto;min-height:0;max-height:none}
}
@media(max-width:720px) and (max-height:720px){
 .scroll-enhanced .story-sticky{min-height:0;padding-top:25px;padding-bottom:30px}
 .scroll-visual{height:310px;max-height:48svh}
 .scroll-devices{transform:scale(.54);margin-top:-20px}
 .story-chapter h3{font-size:28px}
 html[lang=zh-CN] .story-chapter h3{font-size:25px}
 .story-chapter>p:last-child{font-size:11px;line-height:1.65}
}

.hero-product .device-pair{z-index:2}
.hero-transfer-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.transfer-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.scroll-visual{isolation:isolate}
.scroll-devices{z-index:2;left:-18px}
@media(max-width:720px){.scroll-devices{left:0}}

/* Resource links live in shared navigation, outside the product narrative. */
.mobile-navigation,.cta-short{display:none}
.site-header nav a[aria-current="page"]{color:#fff;text-decoration:underline;text-underline-offset:6px}
.site-footer .footer-navigation{display:grid;grid-template-columns:1fr 1fr;gap:68px;min-width:330px;padding-top:4px}
.footer-group{display:flex;flex-direction:column;gap:15px}
.footer-group h2{font-size:10px;line-height:1.5;font-weight:600;letter-spacing:.6px;color:#40364e;margin:0 0 5px}
.site-footer .footer-group a{display:inline-flex;line-height:1.6;min-height:28px;align-items:center;gap:0;font-size:12px}
.site-footer .footer-group a:hover{text-decoration:underline;text-underline-offset:5px;color:#4c3b62}
.site-footer .footer-brand p{max-width:300px;line-height:1.8}
@media(max-width:720px){
 .site-header .desktop-navigation,.cta-full{display:none}
 .cta-short{display:inline}
 .site-header .header-actions{gap:10px}
 .site-header .header-cta{padding:9px 12px;gap:8px}
 .mobile-navigation{display:block}
 .mobile-navigation summary{width:36px;height:44px;display:flex;justify-content:center;align-items:center;cursor:pointer;list-style:none}
 .mobile-navigation summary::-webkit-details-marker{display:none}
 .menu-glyph{display:flex;flex-direction:column;gap:6px;width:18px}
 .menu-glyph i{width:18px;height:1px;background:#d9d1e5;display:block}
 .mobile-navigation[open] .menu-glyph{gap:0}
 .mobile-navigation[open] .menu-glyph i:first-child{transform:translateY(.5px) rotate(45deg)}
 .mobile-navigation[open] .menu-glyph i:last-child{transform:translateY(-.5px) rotate(-45deg)}
 .site-header .mobile-navigation nav{position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column;gap:0;background:#100f15;border-bottom:1px solid #332b40;padding:12px 6% 22px;box-shadow:0 18px 25px #0002}
 .site-header .mobile-navigation nav a{padding:15px 4px;min-height:48px;font-size:14px;border-bottom:1px solid #ffffff0c}
 .site-footer .footer-navigation{display:grid;grid-template-columns:1fr 1fr;min-width:0;gap:30px;margin:0 0 15px}
 .site-footer .footer-group a{min-height:38px;font-size:12px}
 .footer-group{gap:4px}
 .footer-group h2{margin-bottom:7px;font-size:10px}
}

/* A quiet invitation, continuous with the paper surface. */
.closing { padding-top:100px; padding-bottom:110px; color:#25242a; }
.closing h2 { margin-bottom:42px; }
.closing .button-dark { background:#25242a; color:var(--paper); }
@media (max-width:600px) {
  .closing { padding-top:70px; padding-bottom:75px; }
  .closing h2 { font-size:clamp(35px,8.5vw,50px); letter-spacing:-1.5px; line-height:1.15; }
}

.search-intro { color:var(--muted); font-size:clamp(17px,2vw,21px); line-height:1.8; margin:32px 0 48px; max-width:760px; }
.search-related { margin:56px 0 36px; display:flex; flex-wrap:wrap; gap:16px 26px; }
.search-related h2 { flex-basis:100%; font-size:22px; }
.search-related a { color:var(--iris); font-size:15px; text-underline-offset:5px; }

/* Social profiles share the header across both languages and all routes. */
.social-links{display:flex;align-items:center;gap:8px}
.social-link{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-height:44px;text-decoration:none;transition:background .2s,border-color .2s}
.social-x{width:44px;border:1px solid #ffffff25;border-radius:50%;background:#ffffff06;color:#efecf5}
.social-x svg{width:17px;height:17px}
.social-x:hover{background:#ffffff15;border-color:#ffffff50}
.social-red{min-width:68px;padding:0 12px;border:1px solid #d74660;border-radius:24px;background:#c93651;color:#fff;font-size:13px;font-weight:700;letter-spacing:-.4px;white-space:nowrap}
.social-red:hover{background:#dd405c;border-color:#ef7186}
.social-link:focus-visible{outline:2px solid var(--lavender);outline-offset:4px}
@media(min-width:721px) and (max-width:1050px){
 .site-header{padding-left:3%;padding-right:3%;gap:16px}
 .site-header .desktop-navigation{gap:16px}
 .site-header .header-actions{gap:12px}
 .header-cta{padding:10px 12px;gap:8px}
 .cta-full{display:none}.cta-short{display:inline}
}
@media(max-width:720px){
 .site-header{padding-left:4%;padding-right:4%;gap:8px}
 .site-header .header-actions{gap:8px}
 .social-links{gap:6px}
 .social-x{width:40px}
 .social-red{min-width:60px;padding:0 9px;font-size:12px}
}
@media(max-width:480px){
 .site-header .header-cta{display:none}
 .site-header .brand{gap:6px;font-size:24px}
 .mobile-navigation summary{width:30px}
}

/* A recognizable beta invitation below the product introduction. */
.hero-beta{margin-top:28px}
.beta-download{display:inline-flex;align-items:center;gap:14px;padding:13px 18px 13px 13px;border:0;border-radius:18px;background:#ffffff05;color:#f4f0fa;min-height:76px;transition:background .2s,transform .2s}
.beta-download:hover{background:#ffffff0b;transform:translateY(-2px)}
.beta-download:focus-visible{outline:2px solid var(--lavender);outline-offset:5px}
.beta-download img{display:block;width:48px;height:48px;flex-shrink:0}
.beta-download-copy{display:flex;flex-direction:column;gap:7px;text-align:left}
.beta-download-label{display:flex;align-items:center;gap:9px;font-size:11px;line-height:1;color:#b8b1c8;letter-spacing:.2px}
.beta-tag{font-size:9px;line-height:1.4;letter-spacing:.5px;border:1px solid #b9a3ec40;border-radius:5px;padding:2px 5px;color:#d0c1ef;background:#b9a3ec0b}
.beta-download strong{font-size:15px;line-height:1.3;font-weight:500;letter-spacing:.1px}
.beta-download > span:last-child{margin-left:8px;color:#b6abc9;font-size:16px}
@media(max-width:720px){.hero-beta{margin-top:24px}.beta-download{padding:12px 16px 12px 12px}}
@media(prefers-reduced-motion:reduce){.beta-download:hover{transform:none}}