@charset "UTF-8";
:root{
  color-scheme:light;
  --bg:#f7f8fc;
  --ink:#272a35;
  --muted:#636a7d;
  --blue:#526fbe;
  font-family:"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
  font-synthesis:none;
  color:var(--ink);
  background:var(--bg);
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
*{
  box-sizing:border-box
}
body{
  margin:0
}
a{
  color:inherit;
  text-decoration:none
}
button{
  font:inherit
}
button,a{
  -webkit-tap-highlight-color:transparent
}
button{
  color:inherit;
  cursor:pointer
}
button:disabled{
  cursor:default
}
button:focus-visible,a:focus-visible{
  outline:3px solid #5873c3;
  outline-offset:5px
}
img{
  max-width:100%;
  object-fit:contain
}
button[hidden],img[hidden],[hidden]{
  display:none!important
}
p{
  line-height:1.9;
  color:var(--muted);
  margin:20px 0
}
h1,h2,h3,p{
  overflow-wrap:break-word
}
h1,h2,h3{
  letter-spacing:-.045em
}
h1{
  font-size:clamp(44px,4.65vw,68px);
  font-weight:750;
  line-height:1.24;
  margin:25px 0
}
h1>span{
  color:var(--blue)
}
h2{
  font-size:clamp(32px,3.1vw,45px);
  font-weight:700;
  line-height:1.4;
  margin:16px 0 22px
}
h3{
  font-size:23px;
  line-height:1.5;
  margin:16px 0 9px
}
b,strong{
  font-weight:650
}
.wrap{
  width:min(1180px,calc(100% - 96px));
  margin-inline:auto
}
.header{
  position:sticky;
  top:0;
  z-index:20;
  background:#f7f8fcf2;
  border-bottom:1px solid #e9ebf2;
  backdrop-filter:blur(16px)
}
.nav{
  min-height:86px;
  display:flex;
  align-items:center;
  gap:44px
}
.brand{
  font-size:29px;
  font-weight:800;
  letter-spacing:-1.5px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex-shrink:0
}
.brand-dot{
  color:var(--blue)
}
.brand img{
  width:35px;
  height:35px;
  border-radius:10px
}
.menu-toggle{
  display:none
}
.nav-links{
  display:flex;
  align-items:center;
  gap:32px;
  margin-left:auto;
  font-size:14px;
  font-weight:550
}
.nav-links a{
  padding-block:12px
}
.nav-links a:hover,.text-link:hover,.footer a:hover{
  color:var(--blue)
}
.nav-links a span{
  color:#888fa7;
  font-size:12px
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  min-height:54px;
  padding:14px 24px;
  border:1px solid var(--blue);
  border-radius:12px;
  background:var(--blue);
  color:#fff;
  font-weight:600;
  font-size:15px;
  box-shadow:0 7px 16px #526fbe16;
  transition:background .18s,transform .18s;
  white-space:nowrap
}
.button:hover{
  background:#425ca4;
  transform:translateY(-2px)
}
.button-small{
  min-height:42px;
  padding:10px 18px;
  font-size:14px
}
.button-ghost{
  color:var(--ink);
  background:#ffffff80;
  border-color:#dfe3ef;
  box-shadow:none
}
.button-ghost:hover{
  background:#e9edf8
}
.button-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap
}
.fine-print{
  font-size:13px;
  letter-spacing:.06em
}
.fine-print span{
  margin:0 8px;
  color:#8d96ad
}
.eyebrow{
  font-size:11px;
  letter-spacing:.16em;
  font-weight:650;
  color:var(--blue);
  line-height:1.8;
  display:block
}
.eyebrow i{
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#8094c8;
  margin:0 8px 2px 0
}
.text-link{
  display:inline-flex;
  gap:15px;
  font-size:14px;
  font-weight:600;
  color:var(--blue);
  line-height:1.8
}
.caption{
  font-size:12px;
  line-height:1.9;
  margin:13px 0;
  color:#676d80
}
.caption a{
  text-decoration:underline;
  text-underline-offset:4px
}
.hero{
  position:relative;
  min-height:742px;
  padding-block:88px 100px;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto 1fr;
  column-gap:36px;
  align-items:center
}
.hero-copy{
  align-self:end
}
.intro{
  font-size:16px;
  margin-bottom:28px
}
.hero-scene{
  grid-column:2;
  grid-row:1 / 3;
  position:relative;
  display:flex;
  align-items:center;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  isolation:isolate;
  align-self:center
}
.hero-scene::before{
  content:"";
  position:absolute;
  width:125%;
  height:115%;
  z-index:-2;
  background:radial-gradient(ellipse at 50% 48%,#e1e7fc 0%,#eae8f7a6 34%,transparent 69%);
  pointer-events:none
}
.hero-orbit{
  position:absolute;
  inset:8% -3% 14%;
  border:1px dashed #ccd3e6;
  border-radius:50%;
  transform:rotate(-18deg);
  z-index:-1
}
.hero-pet{
  width:500px;
  max-width:100%
}
.floating-note{
  position:absolute;
  z-index:3;
  border:1px solid #e1e4f1;
  background:#ffffffbc;
  border-radius:13px;
  padding:12px 17px;
  font-size:12px;
  color:#626981;
  box-shadow:0 8px 22px #4c5d8d06
}
.note-top{
  top:0;
  right:5%;
  transform:rotate(5deg)
}
.note-top span{
  color:#9d8ac6;
  margin-left:16px
}
.scene-star{
  position:absolute;
  color:#a2b1d6;
  font-size:36px
}
.star-one{
  left:0;
  top:30%;
  transform:rotate(15deg)
}
.star-two{
  right:1%;
  bottom:25%;
  font-size:25px;
  color:#b3a0c9
}
.pet{
  position:relative;
  display:block;
  width:min(100%,500px);
  aspect-ratio:1;
  isolation:isolate;
  flex-shrink:0
}
.pet-image,.pet-front{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  pointer-events:none
}
.pet-image{
  z-index:1
}
.pet-food{
  position:absolute;
  z-index:2;
  pointer-events:none;
  transform-origin:center;
  aspect-ratio:1
}
.pet-front{
  z-index:3
}
.touch{
  position:absolute;
  z-index:4;
  padding:0;
  border:0;
  background:transparent;
  border-radius:30%;
  cursor:pointer
}
.touch-head{
  left:31.8%;
  top:3.2%;
  width:37.8%;
  height:35.6%
}
.touch-body{
  left:33.2%;
  top:41.2%;
  width:32.6%;
  height:27.2%
}
.touch:focus-visible{
  background:#c4cdf033;
  outline-offset:1px
}
.pet-hint{
  font-size:12px;
  margin:10px 0 0;
  color:#69738f;
  position:relative;
  z-index:5
}
.pet-hint span{
  display:inline-block;
  margin-left:8px;
  color:#8c9bc0
}
.motion-toggle{
  border:1px solid #d8ddeb;
  background:#fff;
  border-radius:10px;
  padding:8px 14px;
  margin-top:12px;
  font-size:12px
}
.hero-download{
  align-self:start;
  grid-column:1
}
.hero-download .fine-print{
  margin-bottom:0
}
.scroll-note{
  position:absolute;
  bottom:34px;
  left:0;
  display:flex;
  align-items:center;
  gap:13px;
  color:#747c92;
  font-size:11px;
  letter-spacing:.04em
}
.scroll-note span{
  border:1px solid #dce0ec;
  border-radius:20px;
  width:24px;
  height:34px;
  display:grid;
  place-items:center;
  color:var(--blue)
}
.section{
  padding-block:94px
}
.split{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  align-items:center;
  gap:85px
}
.section-copy>p{
  font-size:15px;
  max-width:390px
}
.section-copy>.text-link{
  margin-top:16px
}
.section-heading{
  text-align:center;
  max-width:720px;
  margin:0 auto 48px
}
.section-heading p{
  font-size:15px
}
.desktop-section{
  background:linear-gradient(135deg,#eef2f9,#f0edf7)
}
.quiet-list{
  list-style:none;
  padding:0;
  color:#5c647b;
  font-size:13px;
  line-height:2.8;
  margin:23px 0
}
.quiet-list li::before{
  content:"";
  width:5px;
  height:5px;
  display:inline-block;
  border-radius:50%;
  background:#9baed6;
  margin-right:12px;
  vertical-align:middle
}
.desktop-demo{
  min-width:0
}
.desktop-scene{
  position:relative;
  aspect-ratio:1.19;
  background:linear-gradient(125deg,#e2e9f7 5%,#dce2f2 48%,#e5e1ef);
  border:1px solid #d4dcec;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 18px 40px #3c508215;
  isolation:isolate
}
.desktop-folder{
  position:absolute;
  left:7%;
  top:9%;
  font-size:10px;
  color:#657493;
  text-align:center;
  display:grid;
  gap:3px
}
.desktop-folder>span{
  display:block;
  color:#a8bce2;
  font-size:36px;
  line-height:1
}
.editor-window{
  position:absolute;
  right:5%;
  top:20%;
  width:56%;
  height:54%;
  border:1px solid #d2d9ea;
  background:#ffffff9e;
  border-radius:9px;
  box-shadow:0 8px 15px #5572940a
}
.window-bar{
  height:31px;
  border-bottom:1px solid #e0e4f0;
  display:flex;
  align-items:center;
  padding:0 10px;
  gap:5px;
  font-size:9px;
  color:#8a92a6
}
.window-bar>i{
  width:5px;
  height:5px;
  background:#b9c6df;
  border-radius:50%
}
.window-bar>span{
  margin-left:auto
}
.editor-window p{
  font-size:11px;
  line-height:2.5;
  margin:12px 15px;
  color:#939ab0
}
.editor-window p span{
  color:#7e91b8
}
.desktop-pet{
  position:absolute;
  bottom:0;
  left:0;
  width:90%;
  max-width:500px;
  z-index:3;
  transform:translate(var(--drag-x,0px),var(--drag-y,0px))
}
.desktop-pet .touch-body{
  cursor:grab
}
.desktop-pet.dragging .touch-body{
  cursor:grabbing
}
.desktop-pet.walking{
  animation:desktop-walk 9s ease-in-out infinite alternate
}
.desktop-pet.dragging{
  animation:none
}
.taskbar{
  position:absolute;
  inset:auto 0 0;
  height:35px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 17px;
  background:#f7f9ffad;
  backdrop-filter:blur(9px);
  font-size:9px;
  color:#7e8aa5
}
.taskbar>span:first-child{
  display:flex;
  align-items:center;
  gap:13px;
  font-size:22px;
  color:#7d95c4
}
.taskbar i{
  width:11px;
  height:11px;
  border-radius:3px;
  background:#adbcd9
}
.choices{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:24px
}
.choices button{
  padding:10px 17px;
  font-size:13px;
  border:1px solid #dfe3ee;
  background:#ffffff9c;
  border-radius:11px;
  min-height:42px;
  transition:background .18s,color .18s
}
.choices button:hover:not(:disabled){
  background:#e9edf8
}
.choices button[aria-pressed="true"]{
  color:#425fa9;
  border-color:#bfcbea;
  background:#e7ecf9
}
.desktop-demo>.caption{
  text-align:center;
  max-width:520px
}
.care-section{
  grid-template-columns:1.15fr 1fr;
  padding-block:105px
}
.care-scene{
  position:relative;
  max-width:530px;
  min-width:0;
  background:radial-gradient(ellipse,#f0eaf980,transparent 70%)
}
.care-scene>.pet{
  margin-inline:auto;
  width:100%
}
.care-level{
  position:absolute;
  left:6%;
  right:6%;
  top:0;
  display:flex;
  justify-content:space-between;
  z-index:5
}
.care-level>span{
  font-size:16px;
  color:#797c99
}
.care-level b{
  font-size:30px;
  color:#4a5273;
  margin-left:3px
}
.care-level small{
  display:block;
  font-size:10px;
  margin-top:3px;
  color:#7b8195;
  letter-spacing:.03em
}
.care-level .money{
  padding-top:10px;
  font-size:19px;
  color:#79718b;
  text-align:right
}
.vitals{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:17px 55px;
  margin:0 34px 27px;
  position:relative;
  z-index:5
}
.vitals>span{
  font-size:11px;
  color:#737b93
}
.vitals b{
  float:right;
  font-size:12px;
  color:#5a647d
}
.vitals i{
  display:block;
  height:5px;
  border-radius:5px;
  background:#e6e8f1;
  margin-top:7px;
  overflow:hidden
}
.vitals i::after{
  content:"";
  display:block;
  width:var(--value);
  height:100%;
  background:var(--bar);
  border-radius:5px;
  transition:width .3s
}
.care-scene .choices{
  margin-top:10px
}
.care-scene .caption{
  text-align:center
}
.growth-flow{
  display:grid;
  gap:10px;
  margin:28px 0
}
.growth-flow>span{
  font-size:12px;
  color:#6a7287
}
.growth-flow b{
  font-weight:400;
  color:#a5afc6;
  margin:0 10px
}
.states-section{
  background:#f0f2f8
}
.state-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px
}
.state-option{
  border:1px solid transparent;
  background:transparent;
  border-radius:20px;
  padding:10px 10px 24px;
  min-width:0;
  text-align:center;
  transition:border-color .2s,background .2s
}
.state-option.selected{
  border-color:#c5cfea;
  background:#ffffff80
}
.state-option:hover{
  background:#ffffff80
}
.state-option>.pet{
  width:100%
}
.state-option>strong{
  display:block;
  font-size:17px;
  margin-top:10px;
  position:relative
}
.state-option>span:last-child{
  display:block;
  font-size:11px;
  color:#697186;
  margin-top:9px
}
.activity-section{
  padding-bottom:86px
}
.activity-section .section-heading{
  margin-bottom:0
}
.activity-demo{
  max-width:650px;
  margin:0 auto;
  position:relative
}
.activity-demo>.pet{
  margin:0 auto
}
.activity-backdrop{
  position:absolute;
  inset:12% 0 20%;
  border-radius:50%;
  background:radial-gradient(ellipse,#e5eaf6,transparent 70%);
  z-index:-1;
  display:grid;
  align-items:center;
  text-align:center
}
.activity-backdrop span{
  font-size:clamp(28px,4vw,57px);
  font-weight:800;
  letter-spacing:.12em;
  color:#e0e4f0;
  transform:rotate(-7deg)
}
.activity-choices{
  margin-top:12px;
  position:relative;
  z-index:5;
  gap:10px
}
.activity-choices button{
  min-width:105px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  padding-block:14px
}
.activity-demo>.caption{
  text-align:center;
  min-height:23px
}
.talk-section{
  background:linear-gradient(120deg,#f0edf6,#edf1fa)
}
.talk-demo{
  position:relative;
  min-width:0;
  display:flex;
  align-items:center;
  flex-direction:column
}
.talk-demo>.pet{
  width:min(100%,450px)
}
.speech{
  min-height:75px;
  position:relative;
  max-width:95%;
  align-self:flex-end;
  background:#ffffffe0;
  box-shadow:0 10px 25px #786a9a09;
  border-radius:18px;
  padding:24px 27px;
  font-size:15px;
  z-index:5;
  margin-bottom:-20px
}
.speech::after{
  content:"";
  position:absolute;
  bottom:-10px;
  left:32%;
  border-top:13px solid #ffffffe0;
  border-inline:10px solid transparent
}
.speech span{
  margin-left:25px;
  color:#a18bba
}
.talk-demo>.choices{
  margin-top:10px;
  position:relative;
  z-index:5
}
.section-copy .small-copy{
  font-size:12px;
  max-width:335px;
  line-height:1.9;
  margin-top:24px
}
.memory-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px
}
.memory{
  min-width:0
}
.memory>div{
  height:190px;
  border-radius:16px;
  position:relative;
  overflow:hidden;
  background:#eeeff7
}
.memory h3{
  font-size:18px;
  letter-spacing:0
}
.memory p{
  font-size:12px;
  line-height:1.9;
  margin-top:10px
}
.level-art{
  display:flex;
  gap:12px;
  align-content:center;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  padding:35px 23px
}
.level-art>span{
  font-size:13px;
  color:#939bb4
}
.level-art>strong{
  font-size:26px;
  color:#586c9e
}
.level-art>i{
  font-size:24px;
  color:#91a5cf;
  font-style:normal
}
.level-art>div{
  width:100%;
  height:5px;
  border-radius:9px;
  background:linear-gradient(to right,#a6b7de 78%,#dce2f0 78%);
  margin:10px 0 0
}
.level-art>small{
  font-size:10px;
  color:#7c88a3
}
.photo-art{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f4f0e9!important;
  border:9px solid #fff;
  box-shadow:0 5px 15px #5360840a;
  transform:rotate(-3deg)
}
.photo-art img{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:contain;
  top:-5px
}
.photo-art>span{
  position:absolute;
  bottom:4px;
  font-size:7px;
  letter-spacing:.13em;
  color:#968c84
}
.schedule-art{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:20px;
  gap:24px
}
.schedule-art>span{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:#747c94
}
.schedule-art small{
  font-size:9px;
  color:#8b95b0
}
.schedule-art i{
  width:6px;
  height:6px;
  background:#aebddd;
  border-radius:50%
}
.favorites-art{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f3edf2!important;
  gap:5px
}
.favorites-art img{
  width:38%;
  height:auto
}
.favorites-art>span{
  position:absolute;
  bottom:20px;
  right:25px;
  color:#bd9bad;
  font-size:25px
}
.memories-section>.caption{
  margin-top:32px;
  text-align:center
}
.mods-section{
  background:#f0f1f8
}
.mod-tabs{
  margin-bottom:35px
}
.mod-tabs button{
  background:transparent;
  border-color:transparent;
  padding-inline:23px
}
.mod-tabs button[aria-pressed="true"]{
  background:#fff;
  border-color:#fff;
  box-shadow:0 4px 12px #53608408
}
.mod-showcase{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  align-items:center;
  gap:70px;
  max-width:960px;
  margin:auto;
  min-height:460px
}
.mod-detail{
  min-width:0
}
.pill{
  display:inline-block;
  padding:5px 10px;
  border-radius:6px;
  background:#e6e7f2;
  font-size:10px;
  color:#747c9b;
  letter-spacing:.05em
}
.mod-detail h3{
  font-size:28px;
  margin-top:22px
}
.mod-detail>p{
  font-size:13px;
  max-width:320px
}
.mod-detail>.caption{
  font-size:10px
}
.mod-items{
  display:flex;
  gap:10px;
  margin:25px 0
}
.mod-items button{
  min-width:0;
  flex:1;
  border:1px solid #e1e3ef;
  background:#ffffff82;
  border-radius:14px;
  padding:10px 8px 14px;
  display:grid;
  justify-items:center;
  align-content:center;
  gap:8px;
  font-size:11px
}
.mod-items button:hover{
  background:white;
  border-color:#b8c6e9
}
.mod-items button[aria-pressed="true"]{
  background:#e5eafb;
  border-color:#9badde
}
.mod-items img{
  width:80px;
  height:80px;
  object-fit:contain
}
.mod-preview{
  position:relative;
  min-width:0;
  aspect-ratio:1
}
.mod-preview>.pet{
  width:100%
}
.mod-preview>.caption{
  margin:8px 0 0;
  position:relative;
  z-index:5;
  text-align:center
}
.mod-preview>img{
  width:100%;
  height:100%
}
.mod-bottom{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  margin-top:22px;
  flex-wrap:wrap
}
.mod-bottom>.text-link{
  font-size:12px
}
.developers-section{
  gap:70px
}
.developer-links{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-top:24px;
  font-size:12px;
  color:#687593
}
.repo-scene{
  border:1px solid #dfe3ef;
  background:#fff;
  border-radius:18px;
  box-shadow:0 18px 45px #5260870a;
  overflow:hidden;
  min-width:0
}
.repo-bar{
  display:flex;
  align-items:center;
  gap:6px;
  background:#fafbfe;
  border-bottom:1px solid #e9ebf3;
  min-height:65px;
  padding:16px 23px;
  font-size:12px;
  color:#6c7795
}
.repo-bar>span:first-child{
  font-size:23px;
  margin-right:7px;
  color:#7a8ebc
}
.repo-public{
  font-size:9px;
  border:1px solid #dfe3ee;
  border-radius:12px;
  padding:3px 7px;
  margin-left:auto;
  color:#8a92a5
}
.code-comment{
  margin:30px 28px 0;
  font-family:Consolas,monospace;
  font-size:12px;
  color:#8b96ae
}
.repo-scene pre{
  margin:18px 28px 25px;
  line-height:2;
  font-size:14px;
  color:#596985;
  overflow-x:auto
}
.repo-scene code>span{
  color:#8f7bb3
}
.repo-scene code>em{
  color:#739d9d;
  font-style:normal
}
.repo-scene>.caption{
  margin:0 28px;
  font-size:10px
}
.repo-tags{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  padding:23px 28px
}
.repo-tags span{
  padding:5px 10px;
  background:#edf1fa;
  color:#7285ac;
  border-radius:6px;
  font-size:10px
}
.repo-scene>a{
  display:flex;
  justify-content:space-between;
  border-top:1px solid #e9ebf3;
  padding:17px 28px;
  color:#7182a3;
  font-size:12px
}
.online-section{
  background:#ebeff7;
  overflow:hidden
}
.online-inner{
  display:grid;
  grid-template-columns:1fr 280px;
  align-items:center;
  gap:70px;
  max-width:960px;
  padding-block:65px
}
.online-inner h2{
  font-size:34px
}
.online-inner p{
  font-size:14px
}
.online-inner .button{
  margin-top:6px
}
.phone{
  position:relative;
  max-width:240px;
  height:330px;
  align-self:end;
  margin-bottom:-96px;
  border:7px solid #6b748b;
  border-radius:36px;
  background:#f7f8fc;
  box-shadow:10px 15px 30px #4d608726;
  overflow:hidden;
  transform:rotate(7deg)
}
.phone-camera{
  width:70px;
  height:14px;
  background:#6b748b;
  margin:auto;
  border-radius:0 0 14px 14px
}
.phone-top{
  font-size:16px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 17px
}
.phone-top>span{
  font-size:8px;
  font-weight:400;
  color:#8190ac
}
.phone-label{
  display:block;
  text-align:center;
  font-size:9px;
  color:#8791aa;
  margin-top:13px
}
.phone>img{
  width:100%;
  height:auto;
  margin-top:15px
}
.phone-bottom{
  position:absolute;
  bottom:20px;
  left:0;
  right:0;
  text-align:center;
  font-size:8px;
  color:#8791aa
}
.download-section{
  text-align:center;
  display:flex;
  align-items:center;
  flex-direction:column;
  padding-top:75px;
  padding-bottom:80px;
  background:radial-gradient(ellipse at 50% 30%,#e9e9f7,transparent 55%)
}
.download-pet{
  width:300px;
  margin-bottom:0
}
.download-section h2{
  font-size:40px;
  margin:17px 0 0
}
.download-section>.eyebrow{
  position:relative;
  z-index:5
}
.download-section>.fine-print{
  margin:17px 0 28px
}
.download-github{
  margin-top:20px;
  font-size:12px
}
.footer{
  border-top:1px solid #e1e4ee;
  display:flex;
  align-items:center;
  gap:35px;
  padding-block:27px
}
.footer .brand{
  font-size:23px;
  gap:0
}
.footer>p{
  font-size:11px;
  margin:0
}
.footer>div{
  display:flex;
  gap:23px;
  margin-left:auto;
  font-size:11px;
  color:#67718a
}
.skip-link{
  position:fixed;
  top:10px;
  left:10px;
  transform:translateY(-160%);
  z-index:100;
  background:white;
  padding:12px 20px;
  border:1px solid var(--blue);
  border-radius:8px
}
.skip-link:focus{
  transform:none
}
.noscript-note{
  padding:20px;
  text-align:center;
  font-size:13px;
  background:#eceff8;
  margin:0
}
body.page-hidden .desktop-pet,.pet:not(.is-playing){
  animation-play-state:paused!important
}
.pet.unavailable::after{
  content:"动画暂未加载，静态陪伴中";
  position:absolute;
  bottom:10%;
  left:0;
  right:0;
  font-size:10px;
  color:#68738e;
  text-align:center;
  z-index:5
}
.pet.is-playing.unavailable::after{
  display:none
}
@keyframes desktop-walk{
  from{
    translate:-5% 0
  }
  to{
    translate:17% 0
  }
}
@media(min-width:1500px){
  .hero{
    min-height:800px
  }
}
@media(max-width:1100px){
  .wrap{
    width:calc(100% - 64px)
  }
  .nav{
    gap:25px
  }
  .nav-links{
    gap:20px;
    font-size:12px
  }
  .split{
    gap:45px
  }
  .hero{
    column-gap:20px
  }
  .hero-pet{
    width:470px
  }
  .hero{
    min-height:690px
  }
  .mod-showcase{
    gap:35px
  }
  .memory-grid{
    gap:18px
  }
  .section{
    padding-block:75px
  }
  .care-section{
    padding-block:90px
  }
  .schedule-art{
    padding:13px;
    gap:24px
  }
  .schedule-art>span{
    font-size:10px;
    gap:6px
  }
  .activity-section{
    padding-bottom:75px
  }
  .online-inner{
    padding-block:55px;
    max-width:850px
  }
}
@media(max-width:800px){
  .wrap{
    width:calc(100% - 40px)
  }
  .nav{
    gap:16px;
    min-height:72px;
    flex-wrap:wrap;
    padding-block:12px
  }
  .nav>.button{
    margin-left:auto;
    font-size:12px;
    min-height:38px;
    padding:8px 13px
  }
  .nav .brand{
    font-size:26px
  }
  .nav-links{
    order:4;
    width:100%;
    justify-content:center;
    gap:23px;
    font-size:12px;
    margin:0
  }
  .nav-links a{
    padding-block:6px
  }
  .menu-toggle{
    display:block;
    border:0;
    background:transparent;
    font-size:12px;
    padding:8px;
    margin-left:auto
  }
  .menu-toggle:not([hidden])+.nav-links{
    display:none
  }
  .menu-toggle[aria-expanded="true"]+.nav-links{
    display:flex
  }
  .menu-toggle~.button{
    margin-left:0
  }
  .hero{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    min-height:0;
    padding:40px 0 85px;
    gap:0;
    text-align:center
  }
  .hero-copy{
    grid-column:1;
    grid-row:1
  }
  .hero h1{
    font-size:45px;
    line-height:1.3;
    margin-top:20px
  }
  .hero .desktop-break{
    display:block
  }
  .hero .intro br{
    display:none
  }
  .intro{
    font-size:14px;
    margin:20px 0
  }
  .hero-scene{
    grid-column:1;
    grid-row:2;
    width:min(100%,400px);
    justify-self:center;
    margin-top:25px
  }
  .hero-scene::before{
    width:100%;
    height:100%
  }
  .hero-pet{
    width:350px
  }
  .note-top{
    top:0;
    right:0;
    font-size:10px;
    padding:10px 13px
  }
  .hero-orbit{
    inset:8% 1% 13%
  }
  .star-one{
    left:2%;
    font-size:25px
  }
  .star-two{
    right:6%;
    font-size:20px
  }
  .pet-hint{
    margin-top:10px;
    font-size:11px
  }
  .hero-download{
    grid-column:1;
    grid-row:3;
    margin-top:26px
  }
  .button-row{
    justify-content:center
  }
  .hero-download .fine-print{
    font-size:11px
  }
  .scroll-note{
    bottom:25px;
    left:50%;
    transform:translateX(-50%);
    white-space:nowrap;
    font-size:10px
  }
  .section{
    padding-block:65px
  }
  .split,.care-section{
    grid-template-columns:1fr;
    gap:35px
  }
  .section-copy{
    text-align:center;
    max-width:490px;
    margin-inline:auto
  }
  .section-copy>p{
    max-width:none;
    font-size:14px
  }
  .section-copy .small-copy{
    margin-inline:auto
  }
  .section-copy h2{
    font-size:34px
  }
  .eyebrow{
    font-size:10px
  }
  .quiet-list{
    text-align:left;
    display:inline-block;
    font-size:12px;
    margin:12px 0 10px
  }
  .section-copy>.text-link{
    display:flex;
    justify-content:center;
    margin-top:15px
  }
  .desktop-demo{
    max-width:520px;
    width:100%;
    margin:auto
  }
  .desktop-scene{
    aspect-ratio:1.1
  }
  .care-section{
    padding-block:65px
  }
  .care-section>.section-copy{
    grid-row:1
  }
  .care-scene{
    width:min(100%,470px);
    margin:auto;
    grid-row:2
  }
  .care-level{
    top:5px
  }
  .care-scene>.pet{
    width:100%
  }
  .care-level b{
    font-size:26px
  }
  .vitals{
    margin-top:0;
    gap:17px 45px
  }
  .growth-flow{
    justify-content:center;
    text-align:left;
    margin:20px 0
  }
  .section-heading{
    margin-bottom:30px
  }
  .section-heading h2{
    font-size:32px
  }
  .section-heading p{
    font-size:13px
  }
  .state-grid{
    gap:8px;
    grid-template-columns:repeat(2,1fr);
    max-width:540px;
    margin:auto
  }
  .state-option{
    padding:5px 10px 20px
  }
  .state-option>strong{
    font-size:15px
  }
  .state-option>span:last-child{
    font-size:10px
  }
  .activity-demo>.pet{
    width:400px;
    max-width:100%
  }
  .activity-choices{
    margin-top:12px;
    gap:7px
  }
  .activity-choices button{
    min-width:85px;
    padding:11px 14px;
    gap:8px
  }
  .talk-demo{
    width:min(100%,500px);
    margin:auto
  }
  .talk-demo>.pet{
    width:390px
  }
  .speech{
    max-width:90%;
    font-size:13px;
    padding:22px;
    min-height:65px;
    align-self:center;
    margin-left:40px
  }
  .talk-demo .choices{
    margin-top:10px
  }
  .memory-grid{
    grid-template-columns:repeat(2,1fr);
    gap:28px 18px;
    max-width:550px;
    margin:auto
  }
  .memory>div{
    height:175px
  }
  .memory h3{
    font-size:16px
  }
  .memory p{
    font-size:11px
  }
  .memories-section>.caption{
    font-size:10px
  }
  .schedule-art{
    padding:20px
  }
  .mod-tabs{
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding:5px 2px 15px;
    gap:3px;
    margin-bottom:15px
  }
  .mod-tabs button{
    flex-shrink:0;
    padding:10px 14px;
    font-size:12px
  }
  .mod-showcase{
    grid-template-columns:1fr;
    gap:12px;
    max-width:450px;
    min-height:0
  }
  .mod-detail{
    text-align:center
  }
  .mod-detail h3{
    font-size:24px;
    margin-top:16px
  }
  .mod-detail>p{
    max-width:none
  }
  .mod-items{
    max-width:340px;
    margin:20px auto
  }
  .mod-items img{
    width:60px;
    height:60px
  }
  .mod-detail>.caption{
    font-size:9px
  }
  .mod-preview{
    width:min(100%,400px);
    margin:auto
  }
  .mod-preview>.caption{
    font-size:11px
  }
  .mod-bottom{
    margin-top:28px;
    gap:18px;
    flex-direction:column
  }
  .developer-links{
    justify-content:center;
    gap:18px
  }
  .repo-scene{
    width:100%;
    max-width:480px;
    margin:auto
  }
  .online-inner{
    grid-template-columns:1fr 170px;
    gap:25px;
    padding-block:50px
  }
  .online-inner h2{
    font-size:26px
  }
  .online-inner p{
    font-size:12px
  }
  .online-inner .eyebrow{
    font-size:9px
  }
  .online-inner .button{
    font-size:12px;
    padding:11px 15px;
    min-height:44px
  }
  .phone{
    width:160px;
    height:260px;
    border-width:5px;
    border-radius:25px;
    margin-bottom:-80px
  }
  .phone-top{
    font-size:12px;
    padding:10px
  }
  .phone-top>span{
    font-size:7px
  }
  .phone-label{
    font-size:7px
  }
  .phone-bottom{
    font-size:6px;
    bottom:45px
  }
  .download-section{
    padding-block:50px 60px
  }
  .download-section h2{
    font-size:33px
  }
  .download-pet{
    width:280px;
    margin-bottom:0
  }
  .footer{
    flex-wrap:wrap;
    gap:20px;
    padding-block:25px
  }
  .footer>p{
    font-size:10px
  }
  .footer>div{
    width:100%;
    margin:0;
    gap:24px;
    font-size:11px
  }
}
@media(max-width:420px){
  .hero h1{
    font-size:38px
  }
  .nav-links{
    gap:16px;
    font-size:11px
  }
  .brand img{
    width:28px;
    height:28px
  }
  .hero-scene{
    width:100%
  }
  .hero-pet{
    width:320px
  }
  .button{
    padding:13px 17px;
    font-size:13px
  }
  .hero-download .button-row{
    gap:9px
  }
  .vitals{
    margin-inline:20px;
    margin-top:0;
    gap:17px 30px
  }
  .choices{
    gap:6px
  }
  .choices button{
    font-size:12px;
    padding:10px 13px
  }
  .activity-choices button{
    min-width:70px;
    gap:5px;
    padding-inline:10px
  }
  .memory>div{
    height:155px
  }
  .level-art{
    padding:22px 12px;
    gap:9px
  }
  .level-art>strong{
    font-size:23px
  }
  .schedule-art{
    padding:12px;
    gap:22px
  }
  .schedule-art>span{
    font-size:9px;
    gap:5px
  }
  .schedule-art small{
    font-size:8px
  }
  .section-heading h2,.section-copy h2{
    font-size:30px
  }
  .online-inner{
    grid-template-columns:1fr 125px;
    gap:12px
  }
  .online-inner h2{
    font-size:24px
  }
  .online-inner p{
    font-size:11px
  }
  .phone{
    width:133px;
    height:230px;
    margin-bottom:-75px
  }
  .phone-top{
    font-size:11px;
    padding:10px 7px
  }
  .phone-label{
    font-size:6px
  }
  .phone-bottom{
    bottom:35px
  }
  .repo-bar{
    padding:14px;
    font-size:11px
  }
  .repo-scene pre{
    margin-inline:20px;
    font-size:12px
  }
  .code-comment{
    margin-inline:20px;
    font-size:10px
  }
  .repo-scene>.caption{
    margin-inline:20px
  }
  .repo-tags{
    padding-inline:20px
  }
  .download-section h2{
    font-size:29px
  }
}
@media(prefers-reduced-motion:reduce){
  :root{
    scroll-behavior:auto
  }
  *,*::before,*::after{
    animation:none!important;
    transition:none!important
  }
  .desktop-pet{
    translate:0 0!important
  }
}