@font-face {
  font-family:Inter;
  src:url('/assets/Inter.ttf') format('truetype');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
:root {
  --paper:#fafaf8;
  --ink:#202226;
  --muted:#626975;
  --rule:#e4e7ec;
  --blue:#2563eb;
  --soft:#eff4ff;
  --serif:Georgia,'Times New Roman','Songti SC',serif;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
button,a,input {
  -webkit-tap-highlight-color:transparent;
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer;
}
a {
  color:inherit;
  text-decoration:none;
}
button {
  border:0;
  background:none;
}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:5px;
}
img,svg {
  display:block;
  max-width:100%;
}
h1,h2,h3,p {
  margin:0;
}
h1,h2 {
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-2.7px;
  line-height:1.1;
}
h2 {
  font-size:clamp(38px,4.2vw,58px);
}
em {
  font-weight:400;
}
.container {
  width:min(1240px,calc(100% - 96px));
  margin-inline:auto;
}
.section-space {
  padding-block:112px;
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  font-weight:600;
  letter-spacing:1.8px;
  line-height:1.5;
}
.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:100;
  background:var(--blue);
  color:white;
  padding:12px 20px;
  border-radius:8px;
}
.skip-link:focus {
  top:12px;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  min-height:52px;
  padding:13px 23px;
  border-radius:8px;
  font-size:13px;
  font-weight:550;
  line-height:1.5;
  transition:transform .2s,background .2s;
}
.button:hover {
  transform:translateY(-2px);
}
.button-blue {
  background:var(--blue);
  color:#fff;
}
.button-blue:hover {
  background:#1d4ed8;
}
.button-ink {
  background:var(--ink);
  color:#fff;
}
.button-small {
  min-height:40px;
  padding:9px 17px;
  gap:17px;
  font-size:11px;
}
.text-link {
  display:inline-flex;
  gap:20px;
  align-items:center;
  padding:8px 0;
  font-size:12px;
  font-weight:550;
}
.text-link:hover {
  color:var(--blue);
}
.site-header {
  height:89px;
  border-bottom:1px solid #e9e9e3;
  background:rgba(250,250,248,.94);
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter:blur(16px);
}
.header-inner {
  height:100%;
  width:min(1320px,calc(100% - 72px));
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.brand {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:23px;
  font-weight:650;
  letter-spacing:-1.1px;
  flex-shrink:0;
}
.brand-period {
  color:var(--blue);
}
.desktop-nav {
  display:flex;
  gap:30px;
  margin-left:36px;
}
.desktop-nav a {
  font-size:12px;
  color:#50545b;
}
.desktop-nav a:hover {
  color:var(--blue);
}
.header-actions {
  display:flex;
  align-items:center;
  gap:23px;
}
.language {
  font-size:11px;
  min-height:40px;
  min-width:40px;
  padding:6px;
  color:var(--muted);
}
.language:hover {
  color:var(--blue);
}
.mobile-menu {
  display:none;
}
.hero {
  display:grid;
  grid-template-columns:1.03fr 1fr;
  gap:30px;
  align-items:center;
  padding-block:80px 58px;
  min-height:675px;
}
.hero-copy {
  padding-bottom:34px;
  position:relative;
  z-index:1;
}
.status-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 4px var(--soft);
  flex-shrink:0;
}
.hero .eyebrow {
  letter-spacing:.7px;
  font-size:11px;
  margin-bottom:27px;
  color:var(--muted);
  font-weight:500;
}
.hero h1 {
  font-size:clamp(48px,5.35vw,77px);
  letter-spacing:-3.1px;
  line-height:1.07;
  white-space:nowrap;
}
.hero h1 em {
  color:var(--blue);
}
.hero-description {
  max-width:410px;
  font-size:15px;
  line-height:1.85;
  color:var(--muted);
  margin-top:26px;
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:30px;
  margin-top:31px;
}
.hero-actions .text-link {
  font-size:12px;
}
.development-note {
  font-size:10px;
  color:var(--muted);
  margin-top:22px;
  display:flex;
  gap:7px;
  align-items:center;
}
.tiny-ring {
  width:6px;
  height:6px;
  border:1px solid #858b95;
  border-radius:50%;
  display:inline-block;
  flex-shrink:0;
}
.hero-stage {
  height:500px;
  position:relative;
  isolation:isolate;
}
.stage-grid {
  position:absolute;
  inset:40px -20px 70px;
  z-index:-2;
  background-image:linear-gradient(#eae9e3 1px,transparent 1px),linear-gradient(90deg,#eae9e3 1px,transparent 1px);
  background-size:62px 62px;
  transform:perspective(700px) rotateX(55deg) rotateZ(-9deg);
  opacity:.7;
  mask-image:radial-gradient(ellipse at center,#000 14%,transparent 69%);
}
.stage-coordinate {
  position:absolute;
  right:16px;
  top:5px;
  font-size:8px;
  letter-spacing:1.8px;
  color:#93958e;
  writing-mode:vertical-rl;
}
.device-wrap {
  position:absolute;
  width:calc(100% - 22px);
  left:10px;
  top:62px;
  transform:perspective(1600px) rotateY(-12deg) rotateX(8deg) rotateZ(-6deg);
}
.device {
  background:linear-gradient(145deg,#fff 10%,#e9e8e2 80%,#fdfdfb);
  border:1px solid #fffffff0;
  padding:19px 19px 0;
  border-radius:18px;
  box-shadow:2px 3px 0 #c9c8c1,5px 7px 0 #bcbcb5,7px 12px 16px #38392d14,14px 33px 45px #3031281a;
  position:relative;
  z-index:1;
}
.device-screen {
  aspect-ratio:5/3;
  width:100%;
  background:#f9f8f1;
  border:1px solid #c1c0b5;
  border-radius:3px;
  overflow:hidden;
  box-shadow:inset 0 1px 3px #25251f20;
  container-type:inline-size;
  color:#242521;
}
.device-chin {
  display:flex;
  align-items:center;
  justify-content:center;
  height:32px;
  position:relative;
  font-size:7px;
  letter-spacing:1.4px;
  color:#82847e;
}
.device-led {
  position:absolute;
  right:4px;
  width:3px;
  height:3px;
  background:#bebfb5;
  border-radius:50%;
}
.device-stand {
  position:absolute;
  left:30%;
  right:24%;
  height:30px;
  bottom:-14px;
  background:linear-gradient(110deg,#e7e6de,#bcbcb3);
  border-radius:0 0 8px 8px;
  transform:perspective(200px) rotateX(40deg);
  z-index:-1;
}
.device-shadow {
  position:absolute;
  top:337px;
  left:4%;
  width:92%;
  height:34px;
  background:#6d70622b;
  filter:blur(20px);
  border-radius:50%;
  transform:rotate(-6deg);
  z-index:-1;
}
.stage-annotation {
  position:absolute;
  right:-6px;
  top:386px;
  color:#777c76;
  font-family:var(--serif);
  font-style:italic;
  font-size:16px;
  line-height:1.2;
  display:flex;
  align-items:center;
  gap:12px;
  transform:rotate(-5deg);
}
.annotation-line {
  width:50px;
  height:16px;
  border-top:1px solid #b6b9b0;
  border-radius:50%;
  transform:rotate(-16deg);
}
.hero-tabs {
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:5px;
  white-space:nowrap;
  padding:5px;
  border:1px solid var(--rule);
  border-radius:9px;
  background:#fff;
  box-shadow:0 6px 15px #20222604;
}
.hero-tabs button {
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  min-height:36px;
  border-radius:5px;
  font-size:10px;
  color:var(--muted);
  transition:background .15s,color .15s;
}
.hero-tabs button[aria-pressed=true] {
  background:var(--soft);
  color:var(--blue);
}
.hero-tabs button:hover {
  background:#f4f5f6;
}
.tab-symbol {
  font-size:14px;
  line-height:1;
}
.preview-note {
  position:absolute;
  bottom:-15px;
  left:0;
  width:100%;
  text-align:center;
  font-size:8px;
  letter-spacing:.1px;
  color:#888d91;
}
.principles {
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center;
  padding-block:27px;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.principles>span {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  color:#646971;
}
.principles i {
  font-style:normal;
  font-size:21px;
  line-height:1;
  color:#7a807b;
}
.screen-layout {
  height:100%;
  padding:5.4% 6%;
  font-family:Inter,sans-serif;
  line-height:1.3;
  position:relative;
}
.screen-header {
  display:flex;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid #85867d;
  padding-bottom:3%;
  font-size:2cqw;
  letter-spacing:.3px;
}
.screen-title {
  font-size:5.4cqw;
  letter-spacing:-1px;
  font-weight:550;
  margin:4% 0;
}
.screen-footer {
  position:absolute;
  bottom:5%;
  left:6%;
  right:6%;
  border-top:1px solid #85867d;
  padding-top:2.5%;
  text-align:center;
  font-size:2.2cqw;
}
.focus-body {
  display:grid;
  grid-template-columns:1.9fr 1fr;
  gap:6%;
  margin-top:3%;
}
.focus-list {
  padding:0;
  margin:0;
  list-style:none;
}
.focus-list li {
  display:flex;
  gap:7px;
  align-items:flex-start;
  margin-bottom:5%;
  font-size:3cqw;
}
.sample-check {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:3.5cqw;
  height:3.5cqw;
  border:1px solid #414139;
  border-radius:2px;
  margin-top:1px;
  font-size:2.8cqw;
  line-height:1;
  padding:0;
}
.sample-check[aria-checked=true] {
  background:#242521;
  color:#f8f7f1;
}
.focus-list .done {
  text-decoration:line-through;
  color:#74756e;
}
.calendar {
  border-left:1px solid #aaa99c;
  padding-left:12%;
  font-size:2.4cqw;
}
.calendar strong {
  font-size:2.6cqw;
  letter-spacing:.5px;
  display:block;
  margin-bottom:9%;
}
.calendar-grid {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  text-align:center;
  gap:4px 1px;
  font-size:1.8cqw;
}
.calendar-grid span {
  padding:1px 0;
}
.calendar-grid .today {
  color:#fff;
  border-radius:50%;
  background:#242521;
}
.calendar-grid .weekday {
  font-weight:600;
}
.screen-weather-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:2.6cqw;
  margin-top:4%;
}
.screen-weather-head strong {
  font-size:4.8cqw;
  letter-spacing:-.6px;
}
.weather-main {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:2%;
}
.weather-main .temperature {
  font-size:18cqw;
  font-weight:500;
  line-height:1.1;
  letter-spacing:-1.8px;
}
.weather-main small {
  display:block;
  font-size:2.9cqw;
  margin:3% 0 4%;
}
.weather-icon {
  width:22%;
  height:auto;
  margin-right:8%;
}
.forecast {
  border-top:1px solid #85867d;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding-top:3%;
  margin-top:3%;
}
.forecast div {
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:3cqw;
}
.forecast small {
  font-size:1.9cqw;
}
.weather-source {
  font-size:1.7cqw;
  margin-top:4%;
}
.photo-view {
  height:100%;
  width:100%;
  overflow:hidden;
}
.photo-view img {
  height:100%;
  width:100%;
  object-fit:fill;
}
.countdown-number {
  font-size:23cqw;
  letter-spacing:-2px;
  line-height:1;
  margin-top:4%;
  font-weight:500;
}
.countdown-details {
  display:flex;
  justify-content:space-between;
  margin-top:4%;
  font-size:2.8cqw;
  letter-spacing:.7px;
}
.countdown-details small {
  font-size:2.6cqw;
  letter-spacing:0;
}
.intro {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
}
.intro .eyebrow,.app-copy .eyebrow,.faq-section .eyebrow {
  color:var(--muted);
  margin-bottom:23px;
}
.intro h2 {
  font-size:51px;
  max-width:550px;
}
.intro-body {
  padding-top:30px;
}
.intro-body p {
  color:var(--muted);
  font-size:13px;
  line-height:1.9;
  max-width:450px;
}
.intro-body .large-body {
  font-size:19px;
  line-height:1.7;
  color:#444950;
  margin-bottom:20px;
  letter-spacing:-.3px;
}
.intro-body .text-link {
  margin-top:16px;
  color:var(--blue);
}
.templates-section {
  background:#232629;
  color:#fafaf8;
  padding-block:94px 38px;
}
.section-top {
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:flex-end;
  margin-bottom:48px;
}
.section-top .eyebrow {
  color:#aab1b4;
  margin-bottom:24px;
}
.section-top h2 {
  font-size:53px;
}
.section-top h2 em {
  color:#bdc5bd;
}
.section-aside {
  font-size:12px;
  line-height:1.9;
  color:#a8adb0;
  margin-bottom:7px;
}
.template-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.template-card {
  text-align:left;
  padding:0;
  min-width:0;
  color:#fff;
  border-radius:8px;
}
.mini-screen {
  aspect-ratio:5/3;
  background:#f9f8f1;
  border:7px solid #e9e9e1;
  border-radius:7px;
  overflow:hidden;
  container-type:inline-size;
  color:#242521;
  transition:transform .25s;
  box-shadow:0 7px 16px #0002;
  pointer-events:none;
}
.template-card:hover .mini-screen {
  transform:translateY(-6px);
}
.card-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:22px;
}
.card-title h3 {
  font-size:16px;
  letter-spacing:-.3px;
  font-weight:500;
}
.card-title>span {
  font-size:20px;
  color:#bbc1c1;
  transition:color .2s;
}
.template-card:hover .card-title>span {
  color:#fafaf8;
}
.template-card>p {
  font-size:11px;
  color:#b5babb;
  line-height:1.8;
  margin-top:8px;
  max-width:240px;
  min-height:40px;
}
.card-tag {
  display:block;
  font-size:8px;
  letter-spacing:1.1px;
  color:#8f999c;
  margin-top:24px;
}
.template-note {
  display:flex;
  justify-content:space-between;
  gap:25px;
  border-top:1px solid #454b4e;
  margin-top:50px;
  padding-top:24px;
  font-size:10px;
  color:#a5adae;
}
.template-note>span:last-child {
  white-space:nowrap;
  letter-spacing:2px;
}
.app-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:110px;
  align-items:center;
  padding-block:130px;
}
.app-visual {
  position:relative;
  min-height:640px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#edeee9;
  border-radius:3px;
  overflow:hidden;
}
.app-orbit {
  position:absolute;
  width:650px;
  height:650px;
  border:1px solid #daddd5;
  border-radius:50%;
}
.orbit-one {
  left:-300px;
  top:140px;
}
.orbit-two {
  right:-300px;
  top:-240px;
}
.phone {
  position:relative;
  width:250px;
  padding:8px 6px 12px;
  background:#26292a;
  border-radius:38px;
  box-shadow:1px 1px 0 #7e8384,3px 3px 0 #777c7e,8px 19px 27px #28302425;
  transform:rotate(-6deg);
  border:2px solid #585e60;
}
.phone-camera {
  position:absolute;
  width:66px;
  height:15px;
  border-radius:15px;
  background:#25282a;
  top:11px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
}
.phone-screenshot {
  padding:0;
  overflow:hidden;
  display:block;
  width:100%;
  border-radius:28px;
  background:#fafaf8;
  aspect-ratio:390/820;
}
.phone-screenshot img {
  width:100%;
  height:auto;
  margin-top:-15px;
  max-width:none;
}
.phone-home {
  position:absolute;
  bottom:15px;
  left:35%;
  right:35%;
  height:3px;
  background:#1c2021;
  border-radius:5px;
}
.app-note {
  position:absolute;
  font-family:var(--serif);
  font-style:italic;
  color:#6c736a;
  font-size:15px;
}
.note-top {
  top:29px;
  left:28px;
  transform:rotate(-3deg);
}
.note-bottom {
  bottom:30px;
  left:0;
  right:0;
  text-align:center;
  font-family:Inter,sans-serif;
  font-style:normal;
  font-size:9px;
}
.floating-label {
  position:absolute;
  right:17px;
  bottom:109px;
  background:#fff;
  padding:11px 14px;
  border:1px solid var(--rule);
  border-radius:7px;
  box-shadow:0 6px 18px #22292906;
  display:flex;
  gap:8px;
  font-size:10px;
  transform:rotate(3deg);
}
.floating-label>span:first-child {
  color:var(--blue);
}
.app-copy h2 {
  font-size:57px;
}
.app-copy h2 em {
  color:#6b7469;
}
.app-description {
  font-size:13px;
  line-height:1.9;
  color:var(--muted);
  margin-top:25px;
  max-width:420px;
}
.steps {
  list-style:none;
  padding:0;
  margin:29px 0 19px;
}
.steps li {
  display:flex;
  gap:18px;
  padding:18px 0;
  border-top:1px solid var(--rule);
}
.step-number {
  font-size:10px;
  color:#8c9299;
  padding-top:3px;
  font-variant-numeric:tabular-nums;
}
.steps h3 {
  font-size:13px;
  font-weight:550;
  margin-bottom:6px;
}
.steps p {
  font-size:11px;
  color:var(--muted);
  line-height:1.8;
  max-width:340px;
}
.app-copy>.text-link {
  color:var(--blue);
  font-size:11px;
}
.details-band {
  border-block:1px solid var(--rule);
  padding-block:45px;
}
.details-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:75px;
}
.detail-mark {
  display:block;
  font-family:var(--serif);
  font-size:28px;
  line-height:1;
  margin-bottom:20px;
  color:#7d8679;
}
.details-grid h3 {
  font-size:14px;
  font-weight:550;
  margin-bottom:9px;
}
.details-grid p {
  font-size:12px;
  color:var(--muted);
  line-height:1.85;
  max-width:300px;
}
.faq-section {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:100px;
}
.faq-intro {
  margin-top:22px;
  font-size:13px;
  line-height:1.9;
  color:var(--muted);
}
.faq-list details {
  border-bottom:1px solid var(--rule);
}
.faq-list details:first-child {
  border-top:1px solid var(--rule);
}
.faq-list summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  list-style:none;
  padding:23px 0;
  cursor:pointer;
  font-size:13px;
  font-weight:500;
}
.faq-list summary::-webkit-details-marker {
  display:none;
}
.faq-plus {
  font-size:21px;
  font-weight:300;
  color:#848b8e;
  transition:transform .2s;
  flex-shrink:0;
}
.faq-list details[open] .faq-plus {
  transform:rotate(45deg);
}
.faq-list details p {
  font-size:12px;
  color:var(--muted);
  line-height:1.95;
  padding:0 34px 24px 0;
}
.closing {
  text-align:center;
  background:#edf1e9;
  padding:68px 30px 62px;
  border-radius:4px;
}
.closing-star {
  display:block;
  font-size:33px;
  line-height:1;
  color:#7d8c77;
  margin-bottom:26px;
}
.closing .eyebrow {
  justify-content:center;
  color:#6a7465;
  margin-bottom:20px;
  font-size:9px;
}
.closing h2 {
  font-size:64px;
  line-height:1.04;
}
.closing h2 em {
  color:#697b62;
}
.closing .button {
  margin-top:32px;
}
.closing-note {
  font-size:10px;
  color:#7a8278;
  margin-top:17px;
}
.site-footer {
  display:flex;
  align-items:center;
  gap:35px;
  padding-block:47px 36px;
}
.site-footer .brand {
  font-size:20px;
}
.site-footer>span {
  font-size:10px;
  color:var(--muted);
}
.site-footer>div {
  margin-left:auto;
  display:flex;
  gap:20px;
  align-items:center;
  color:#7e858c;
  font-size:9px;
}
.site-footer button {
  font-size:9px;
  padding:10px 0;
}
.site-footer button:hover {
  color:var(--blue);
}
dialog {
  width:min(560px,calc(100% - 40px));
  max-height:calc(100dvh - 60px);
  overflow:auto;
  border:1px solid var(--rule);
  border-radius:15px;
  background:var(--paper);
  color:var(--ink);
  padding:30px;
  box-shadow:0 20px 100px #20222630;
}
dialog::backdrop {
  background:#20222666;
  backdrop-filter:blur(4px);
}
.dialog-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:25px;
}
.dialog-head>.eyebrow {
  color:var(--muted);
  font-size:9px;
}
.dialog-head button {
  font-size:27px;
  line-height:1;
  min-width:38px;
  min-height:38px;
  color:var(--muted);
}
dialog h2 {
  font-size:40px;
  letter-spacing:-1.4px;
}
dialog>p {
  font-size:13px;
  color:var(--muted);
  line-height:1.9;
  margin-top:20px;
}
.progress-list {
  list-style:none;
  padding:0;
  margin:28px 0;
}
.progress-list li {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:15px 0;
  border-bottom:1px solid var(--rule);
  font-size:12px;
}
.progress-check {
  color:var(--blue);
}
.progress-next {
  color:#818b73;
}
.dialog-note {
  font-size:11px!important;
}
.app-dialog {
  width:min(430px,calc(100% - 30px));
  padding:15px;
}
.app-dialog .dialog-head {
  margin:0 4px 10px;
}
.app-dialog>img {
  width:100%;
  height:auto;
  border-radius:5px;
}
.noscript-note {
  padding:20px;
  text-align:center;
  border:1px solid var(--rule);
  font-size:13px;
  color:var(--muted);
}
html[lang=zh-CN] h1,html[lang=zh-CN] h2 {
  letter-spacing:-1px;
  line-height:1.3;
}
html[lang=zh-CN] .hero h1 {
  font-size:clamp(42px,4.5vw,65px);
}
html[lang=zh-CN] .eyebrow {
  letter-spacing:1.3px;
}
html[lang=zh-CN] .hero-description {
  max-width:390px;
}
@media(min-width:1600px) {
  .hero {
    padding-block:100px 80px;
    min-height:730px;
  }
  .hero-stage {
    height:530px;
  }
  .device-wrap {
    top:68px;
  }
  .hero-tabs {
    bottom:20px;
  }
}
@media(max-width:1150px) {
  .container {
    width:calc(100% - 72px);
  }
  .header-inner {
    width:calc(100% - 54px);
  }
  .hero h1 {
    font-size:6vw;
    letter-spacing:-2.6px;
  }
  .hero {
    gap:20px;
    padding-block:66px 44px;
    min-height:620px;
  }
  .hero-description {
    max-width:355px;
    font-size:13px;
  }
  .hero-stage {
    height:450px;
  }
  .device-wrap {
    top:65px;
    width:100%;
    left:0;
  }
  .device {
    padding:15px 15px 0;
  }
  .stage-annotation {
    top:330px;
    right:0;
    font-size:14px;
  }
  .stage-coordinate {
    top:8px;
    right:0;
  }
  .hero-tabs {
    bottom:17px;
    gap:2px;
  }
  .hero-tabs button {
    font-size:9px;
    padding:7px 8px;
  }
  .preview-note {
    font-size:7px;
  }
  .intro {
    gap:65px;
  }
  .intro h2 {
    font-size:43px;
  }
  .section-top h2 {
    font-size:45px;
  }
  .template-grid {
    gap:17px;
  }
  .card-title h3 {
    font-size:14px;
  }
  .template-card>p {
    font-size:10px;
    min-height:54px;
  }
  .app-section {
    gap:65px;
  }
  .app-copy h2 {
    font-size:49px;
  }
  .app-visual {
    min-height:590px;
  }
  .floating-label {
    right:8px;
    bottom:85px;
    font-size:9px;
  }
  .faq-section {
    gap:65px;
  }
  .details-grid {
    gap:50px;
  }
  .desktop-nav {
    gap:23px;
    margin-left:0;
  }
}
@media(max-width:850px) {
  .container {
    width:calc(100% - 48px);
  }
  .site-header {
    height:75px;
  }
  .header-inner {
    width:calc(100% - 40px);
    gap:15px;
  }
  .brand {
    font-size:21px;
  }
  .brand img {
    width:30px;
    height:30px;
  }
  .desktop-nav {
    gap:18px;
  }
  .desktop-nav a {
    font-size:10px;
  }
  .header-actions {
    gap:8px;
  }
  .button-small {
    font-size:10px;
    padding:8px 12px;
  }
  .hero {
    padding-top:58px;
    grid-template-columns:1fr;
    gap:24px;
  }
  .hero-copy {
    text-align:center;
    padding-bottom:0;
  }
  .hero-copy .eyebrow {
    justify-content:center;
  }
  .hero h1 {
    font-size:72px;
    letter-spacing:-3px;
  }
  .hero-description {
    margin:25px auto 0;
    max-width:455px;
    font-size:14px;
  }
  .hero-actions {
    justify-content:center;
    margin-top:25px;
  }
  .development-note {
    justify-content:center;
  }
  .hero-stage {
    width:min(590px,100%);
    height:520px;
    margin:auto;
  }
  .device-wrap {
    width:90%;
    left:5%;
    top:50px;
  }
  .stage-coordinate {
    right:8px;
  }
  .stage-annotation {
    top:365px;
    right:6px;
    font-size:16px;
  }
  .hero-tabs {
    bottom:23px;
    gap:4px;
  }
  .hero-tabs button {
    padding:8px 13px;
    font-size:11px;
  }
  .preview-note {
    bottom:-9px;
    font-size:9px;
  }
  .principles {
    gap:18px;
    padding-block:23px;
  }
  .principles>span {
    gap:8px;
    font-size:9px;
    max-width:170px;
  }
  .principles i {
    font-size:19px;
  }
  .section-space {
    padding-block:80px;
  }
  .intro {
    gap:40px;
  }
  .intro h2 {
    font-size:39px;
  }
  .intro-body {
    padding-top:24px;
  }
  .intro-body .large-body {
    font-size:16px;
  }
  .intro-body p {
    font-size:12px;
  }
  .templates-section {
    padding-top:75px;
  }
  .section-top h2 {
    font-size:43px;
  }
  .section-aside {
    display:none;
  }
  .template-grid {
    grid-template-columns:repeat(2,1fr);
    gap:37px 24px;
  }
  .card-title h3 {
    font-size:18px;
  }
  .template-card>p {
    font-size:12px;
    min-height:unset;
  }
  .card-tag {
    margin-top:13px;
    font-size:8px;
  }
  .app-section {
    gap:40px;
    align-items:center;
  }
  .app-visual {
    min-height:575px;
  }
  .phone {
    width:216px;
  }
  .app-note {
    font-size:12px;
  }
  .note-top {
    top:25px;
    left:18px;
  }
  .note-bottom {
    font-size:8px;
  }
  .floating-label {
    font-size:8px;
    bottom:72px;
    right:10px;
    padding:8px;
  }
  .app-copy h2 {
    font-size:44px;
  }
  .app-copy .eyebrow {
    font-size:8px;
    letter-spacing:1.3px;
  }
  .app-description {
    font-size:12px;
  }
  .steps li {
    gap:12px;
    padding:14px 0;
  }
  .steps h3 {
    font-size:12px;
  }
  .steps p {
    font-size:10px;
  }
  .details-grid {
    gap:35px;
  }
  .details-grid p {
    font-size:11px;
  }
  .details-grid h3 {
    font-size:13px;
  }
  .faq-section {
    gap:40px;
    grid-template-columns:.8fr 1.2fr;
  }
  .faq-list summary {
    font-size:12px;
  }
  .faq-list details p {
    font-size:11px;
  }
  .closing h2 {
    font-size:58px;
  }
  .site-footer {
    gap:25px;
    flex-wrap:wrap;
  }
  .site-footer>div {
    margin-left:0;
    width:100%;
    justify-content:space-between;
  }
  .site-footer>span {
    margin-left:auto;
  }
  html[lang=zh-CN] .hero h1 {
    font-size:62px;
  }
}
@media(max-width:600px) {
  html {
    scroll-padding-top:80px;
  }
  .container {
    width:calc(100% - 40px);
  }
  .header-inner {
    width:calc(100% - 36px);
    gap:12px;
  }
  .site-header {
    height:70px;
  }
  .desktop-nav {
    display:none;
  }
  .header-actions {
    margin-left:auto;
    gap:5px;
  }
  .header-actions .button {
    display:none;
  }
  .language {
    font-size:10px;
  }
  .mobile-menu {
    display:block;
    position:relative;
  }
  .mobile-menu summary {
    width:36px;
    height:40px;
    display:flex;
    flex-direction:column;
    gap:6px;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    list-style:none;
  }
  .mobile-menu summary::-webkit-details-marker {
    display:none;
  }
  .mobile-menu summary span {
    width:17px;
    height:1px;
    background:var(--ink);
  }
  .mobile-menu nav {
    position:absolute;
    right:-5px;
    top:48px;
    width:190px;
    border:1px solid var(--rule);
    border-radius:10px;
    background:var(--paper);
    box-shadow:0 12px 35px #20222615;
    padding:10px;
  }
  .mobile-menu nav a {
    display:block;
    padding:12px 14px;
    font-size:13px;
  }
  .hero {
    padding-block:48px 31px;
    gap:15px;
    min-height:0;
  }
  .hero-copy .eyebrow {
    font-size:9px;
    margin-bottom:22px;
    letter-spacing:.7px;
  }
  .hero h1 {
    font-size:clamp(42px,10.3vw,62px);
    letter-spacing:-2px;
    line-height:1.12;
  }
  .hero-description {
    font-size:12px;
    max-width:330px;
    line-height:1.85;
    margin-top:21px;
  }
  .hero-actions {
    gap:22px;
    margin-top:24px;
  }
  .button {
    font-size:11px;
    padding:12px 17px;
    min-height:47px;
    gap:22px;
  }
  .hero-actions .text-link {
    font-size:11px;
    gap:10px;
  }
  .development-note {
    font-size:8px;
    margin-top:17px;
  }
  .hero-stage {
    height:366px;
    max-width:430px;
  }
  .device-wrap {
    top:40px;
    width:92%;
    left:3%;
  }
  .device {
    padding:12px 12px 0;
    border-radius:12px;
    box-shadow:2px 3px 0 #c9c8c1,4px 6px 0 #bcbcb5,7px 12px 16px #38392d14,14px 26px 34px #3031281a;
  }
  .device-chin {
    height:25px;
    font-size:6px;
  }
  .device-shadow {
    top:238px;
    height:25px;
  }
  .device-stand {
    height:24px;
    bottom:-10px;
  }
  .stage-coordinate {
    font-size:6px;
    right:0;
    top:12px;
  }
  .stage-annotation {
    top:263px;
    font-size:12px;
    right:1px;
    gap:5px;
  }
  .annotation-line {
    width:30px;
  }
  .hero-tabs {
    bottom:20px;
    padding:4px;
    gap:1px;
  }
  .hero-tabs button {
    font-size:9px;
    padding:6px 8px;
    gap:4px;
    min-height:32px;
  }
  .tab-symbol {
    font-size:12px;
  }
  .preview-note {
    font-size:7px;
    bottom:-2px;
  }
  .stage-grid {
    inset:20px -15px 40px;
    background-size:45px 45px;
  }
  .principles {
    padding-block:20px;
    gap:12px;
    align-items:flex-start;
  }
  .principles>span {
    font-size:8px;
    flex-direction:column;
    gap:7px;
    flex:1;
    text-align:center;
  }
  .principles i {
    font-size:20px;
  }
  .section-space {
    padding-block:64px;
  }
  .intro {
    grid-template-columns:1fr;
    gap:0;
  }
  .intro h2 {
    font-size:40px;
    letter-spacing:-1.6px;
  }
  .intro .eyebrow {
    font-size:9px;
    margin-bottom:19px;
  }
  .intro-body {
    padding-top:24px;
  }
  .intro-body .large-body {
    font-size:17px;
    max-width:none;
  }
  .intro-body p {
    font-size:12px;
    max-width:none;
  }
  .intro-body .text-link {
    font-size:11px;
  }
  .templates-section {
    padding-block:61px 27px;
  }
  .section-top {
    margin-bottom:32px;
  }
  .section-top h2 {
    font-size:38px;
    letter-spacing:-1.6px;
  }
  .section-top .eyebrow {
    font-size:8px;
    margin-bottom:18px;
  }
  .template-grid {
    gap:32px 16px;
  }
  .mini-screen {
    border-width:4px;
    border-radius:5px;
  }
  .card-title {
    margin-top:14px;
    gap:3px;
  }
  .card-title h3 {
    font-size:12px;
  }
  .card-title>span {
    font-size:16px;
  }
  .template-card>p {
    font-size:10px;
    line-height:1.75;
    margin-top:6px;
    min-height:52px;
  }
  .card-tag {
    font-size:6px;
    letter-spacing:.6px;
    margin-top:8px;
  }
  .template-note {
    font-size:8px;
    line-height:1.8;
    margin-top:34px;
    padding-top:20px;
  }
  .template-note>span:last-child {
    display:none;
  }
  .app-section {
    display:flex;
    flex-direction:column-reverse;
    gap:37px;
  }
  .app-copy {
    width:100%;
  }
  .app-copy h2 {
    font-size:46px;
    letter-spacing:-1.7px;
  }
  .app-copy .eyebrow {
    font-size:9px;
    margin-bottom:19px;
  }
  .app-description {
    font-size:12px;
    max-width:none;
    margin-top:21px;
  }
  .steps {
    margin-top:23px;
  }
  .steps li {
    padding:17px 0;
    gap:18px;
  }
  .steps h3 {
    font-size:13px;
  }
  .steps p {
    font-size:11px;
    max-width:none;
  }
  .app-copy>.text-link {
    font-size:10px;
  }
  .app-visual {
    min-height:575px;
    width:100%;
  }
  .phone {
    width:235px;
  }
  .app-note {
    font-size:14px;
  }
  .note-top {
    top:24px;
    left:22px;
  }
  .note-bottom {
    font-size:8px;
  }
  .floating-label {
    right:11px;
    bottom:83px;
    font-size:9px;
  }
  .details-band {
    padding-block:32px;
  }
  .details-grid {
    grid-template-columns:1fr;
    gap:27px;
  }
  .details-grid>div {
    position:relative;
    padding-left:53px;
  }
  .detail-mark {
    position:absolute;
    left:0;
    top:3px;
    font-size:27px;
  }
  .details-grid h3 {
    font-size:13px;
    margin-bottom:5px;
  }
  .details-grid p {
    font-size:11px;
    max-width:none;
  }
  .faq-section {
    grid-template-columns:1fr;
    gap:27px;
  }
  .faq-section h2 {
    font-size:43px;
  }
  .faq-section .eyebrow {
    font-size:8px;
    margin-bottom:17px;
  }
  .faq-intro {
    font-size:12px;
    margin-top:13px;
  }
  .faq-intro br {
    display:none;
  }
  .faq-list summary {
    font-size:12px;
    padding:21px 0;
    line-height:1.7;
  }
  .faq-list details p {
    font-size:11px;
    padding-right:17px;
  }
  .closing {
    padding:48px 19px 43px;
  }
  .closing-star {
    font-size:29px;
    margin-bottom:23px;
  }
  .closing h2 {
    font-size:45px;
    letter-spacing:-1.7px;
  }
  .closing .eyebrow {
    font-size:8px;
    margin-bottom:20px;
  }
  .closing-note {
    font-size:8px;
  }
  .site-footer {
    padding-block:36px 28px;
    gap:18px;
  }
  .site-footer .brand {
    font-size:19px;
    gap:9px;
  }
  .site-footer>span {
    font-size:8px;
  }
  .site-footer>div {
    gap:10px;
    font-size:8px;
  }
  .site-footer button {
    font-size:8px;
  }
  .site-footer .brand img {
    width:26px;
    height:26px;
  }
  dialog {
    padding:23px;
    max-height:calc(100dvh - 40px);
  }
  dialog h2 {
    font-size:34px;
  }
  dialog>p {
    font-size:12px;
  }
  .progress-list li {
    font-size:11px;
  }
  .app-dialog {
    padding:10px;
  }
  html[lang=zh-CN] .hero h1 {
    font-size:clamp(40px,10.5vw,58px);
  }
  html[lang=zh-CN] h2 {
    font-size:37px;
  }
  html[lang=zh-CN] .hero-description {
    max-width:300px;
  }
  html[lang=zh-CN] .template-card>p {
    min-height:40px;
  }
}
@media(max-width:360px) {
  .hero h1 {
    font-size:38px;
  }
  .hero-stage {
    height:335px;
  }
  .stage-annotation {
    top:235px;
    font-size:11px;
  }
  .hero-tabs button {
    font-size:8px;
    padding:5px 7px;
  }
  .preview-note {
    font-size:6px;
  }
  .hero-description {
    font-size:11px;
  }
  .hero-actions {
    gap:17px;
  }
  .hero-actions .text-link {
    font-size:10px;
  }
  .stage-coordinate {
    font-size:5px;
  }
  .device-shadow {
    top:219px;
  }
  .principles>span {
    font-size:7px;
  }
  .template-grid {
    gap:25px 13px;
  }
  .card-title h3 {
    font-size:11px;
  }
  .template-card>p {
    font-size:9px;
  }
  .card-tag {
    font-size:5px;
  }
  .app-copy h2 {
    font-size:40px;
  }
  .phone {
    width:216px;
  }
  .app-visual {
    min-height:540px;
  }
  .floating-label {
    font-size:8px;
    right:7px;
  }
  .closing h2 {
    font-size:40px;
  }
  .site-footer>span {
    max-width:100px;
    text-align:right;
  }
  .site-footer>div {
    gap:6px;
  }
  .site-footer>div>span {
    font-size:7px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important;
  }
}
/* Keep the decorative perspective grid inside its own box. */
.stage-grid {
  overflow:hidden;
  transform:none;
  background-image:none;
}
.stage-grid::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(#eae9e3 1px,transparent 1px),linear-gradient(90deg,#eae9e3 1px,transparent 1px);
  background-size:inherit;
  transform:perspective(700px) rotateX(55deg) rotateZ(-9deg);
}

@media (max-width: 600px) {
  .development-note { font-size: 10px; }
  .preview-note { font-size: 9px; }
  .principles > span { font-size: 10px; }
  .card-title { min-height: 40px; }
  .card-title h3 { font-size: 14px; }
  .template-card > p { font-size: 12px; min-height: 64px; }
  .card-tag { font-size: 8px; }
  .app-description, .intro-body p { font-size: 13px; }
  .steps p, .details-grid p, .faq-list details p { font-size: 12px; }
  .closing-note, .site-footer > span { font-size: 10px; }
  .site-footer > div { flex-wrap: wrap; }
  .site-footer button, .site-footer > div > span { font-size: 10px; }
}