:root { --ink: #172b2c; --muted: #637173; --accent: #227c80; --line: #e1e9e8; --sans: -apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif; --display: 'Songti SC','STSong','Noto Serif CJK SC',serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0px; font: 16px/1.85 var(--sans); color: var(--ink); background: rgb(255, 255, 255); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure { margin: 0px; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: rgb(34, 124, 128) solid 3px; outline-offset: 5px; }
.wrap { max-width: 1200px; padding-inline: 40px; margin: auto; }
.skip { position: fixed; z-index: 100; top: -70px; left: 12px; background: var(--ink); color: rgb(255, 255, 255); padding: 10px; }
.skip:focus { top: 10px; }
header { position: sticky; top: 0px; z-index: 20; background: rgba(255, 255, 255, 0.933); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(225, 233, 232, 0.533); }
.nav { height: 86px; display: flex; align-items: center; gap: 40px; justify-content: space-between; }
.brand { font-size: 25px; font-weight: 650; letter-spacing: 0.15em; display: flex; gap: 15px; align-items: center; }
.brand span { font-size: 11px; letter-spacing: 0.15em; font-weight: 400; color: var(--muted); }
nav { display: flex; gap: 30px; margin-left: auto; }
nav a { font-size: 13px; color: var(--muted); }
nav a:hover { color: var(--accent); }
.download { display: inline-flex; align-items: center; justify-content: center; gap: 19px; background: var(--accent); color: rgb(255, 255, 255); border: 0px; border-radius: 10px; padding: 11px 25px; min-height: 58px; line-height: 1.3; text-align: left; box-shadow: rgba(34, 124, 128, 0.07) 0px 7px 20px; }
.download svg { width: 26px; height: 26px; fill: currentcolor; }
.download small { display: block; font-size: 10px; letter-spacing: 0.08em; margin-bottom: 3px; }
.download > span { font-size: 18px; }
.download.small { min-height: 44px; padding: 10px 19px; font-size: 13px; }
.download.small > span { font-size: 17px; }
.download[aria-disabled="true"] { cursor: default; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.17em; color: var(--accent); margin-bottom: 23px; }
.hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 45px; align-items: center; padding-top: 75px; padding-bottom: 60px; min-height: 690px; }
.hero h1 { font: 600 clamp(42px,4.4vw,62px)/1.36 var(--display); letter-spacing: -0.025em; }
.hero em { font-style: normal; color: var(--accent); }
.lead { max-width: 480px; font-size: 17px; line-height: 1.95; color: var(--muted); margin: 25px 0px 29px; }
.availability { font-size: 11px; color: var(--muted); margin-top: 17px; }
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 540px; }
.halo { position: absolute; width: 410px; height: 410px; max-width: 100%; border-radius: 100%; background: radial-gradient(circle, rgb(227, 241, 239) 0px, rgb(241, 248, 247) 55%, rgb(255, 255, 255) 72%); top: 55px; }
.phone { width: 232px; background: rgb(30, 32, 32); border: 3px solid rgb(102, 106, 105); border-radius: 37px; padding: 7px; box-shadow: rgb(25, 27, 27) 0px 0px 0px 2px inset, rgba(27, 60, 59, 0.082) 13px 22px 40px; position: relative; line-height: 0; flex-shrink: 0; }
.phone img { display: block; width: 100%; border-radius: 26px; height: auto; aspect-ratio: 1320 / 2868; object-fit: contain; background: rgb(250, 248, 244); }
.phone::before { content: ""; position: absolute; left: -6px; top: 100px; width: 3px; height: 34px; background: rgb(116, 119, 118); border-radius: 4px; }
.phone::after { content: ""; position: absolute; right: -6px; top: 128px; width: 3px; height: 48px; background: rgb(116, 119, 118); border-radius: 4px; }
.hero-phone { width: 244px; transform: rotate(6deg); animation: 7s ease-in-out 0s infinite normal none running float; transition: opacity 0.18s; }
.hero-switch { display: flex; gap: 4px; margin-top: 28px; z-index: 1; border: 1px solid var(--line); border-radius: 40px; padding: 4px; background: rgb(255, 255, 255); }
.hero-switch button { border: 0px; border-radius: 30px; background: transparent; color: var(--muted); padding: 7px 16px; font-size: 11px; }
.hero-switch button[aria-pressed="true"] { background: rgb(230, 242, 240); color: var(--accent); }
.motion-toggle { font-size: 10px; border: 0px; background: transparent; color: var(--muted); margin-top: 7px; padding: 4px 12px; }
.stats { background: rgb(245, 249, 249); border-block: 1px solid var(--line); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: 31px; text-align: center; }
.stats strong { font-size: 34px; line-height: 1.3; letter-spacing: -0.03em; }
.stats strong span { font-size: 25px; }
.stats p { font-size: 12px; color: var(--muted); margin-top: 5px; }
.stats-grid > div + div { border-left: 1px solid var(--line); }
.section-intro { text-align: center; padding-block: 94px 49px; }
.section-intro h2, h2 { font: 600 clamp(30px,3.2vw,44px)/1.5 var(--display); letter-spacing: -0.03em; }
.section-intro .eyebrow { margin-bottom: 15px; }
.directions { display: flex; gap: 22px; justify-content: center; align-items: center; font-size: 14px; color: var(--muted); margin-top: 22px; }
.directions i { width: 4px; height: 4px; background: rgb(173, 195, 193); border-radius: 100%; }
.feature { display: grid; grid-template-columns: 1.08fr 1fr; gap: 80px; align-items: center; padding-block: 65px; border-bottom: 1px solid var(--line); min-height: 660px; }
.feature.reverse .feature-copy { order: 2; }
.feature.reverse .visual { order: 1; }
.feature h3 { font: 600 clamp(29px,3vw,41px)/1.5 var(--display); letter-spacing: -0.03em; }
.feature-copy > p:not(.eyebrow) { font-size: 15px; color: var(--muted); margin-top: 22px; line-height: 2.05; max-width: 485px; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 25px; }
.tags span { font-size: 10px; padding: 5px 12px; background: rgb(243, 247, 247); border-radius: 40px; color: rgb(98, 120, 120); }
.visual { border-radius: 26px; min-height: 525px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 12px 16px; position: relative; background: rgb(244, 248, 247); }
.visual.teal { background: rgb(237, 245, 243); }
.visual.lavender { background: rgb(241, 240, 248); }
.visual.peach { background: rgb(252, 242, 237); }
.visual.sage { background: rgb(238, 244, 237); }
.visual.blue { background: rgb(238, 244, 250); }
.visual.sand { background: rgb(247, 245, 238); }
.visual figcaption { font-size: 10px; color: rgb(114, 128, 128); margin-top: 17px; letter-spacing: 0.06em; }
.steps { font-size: 11px; display: flex; gap: 13px; margin-top: 28px; color: rgb(156, 173, 172); }
.steps span { color: var(--accent); }
.creator { margin-top: 75px; padding: 77px 0px 70px; background: rgb(247, 250, 249); text-align: center; }
.creator .eyebrow { margin-bottom: 9px; }
.creator h2 { font-size: 34px; }
.portrait { width: 145px; height: 145px; border-radius: 50%; object-fit: cover; margin-top: 28px; border: 5px solid rgb(255, 255, 255); box-shadow: rgba(33, 59, 52, 0.063) 0px 8px 25px; }
.degree { font-size: 16px; font-weight: 500; margin-top: 17px; }
.school { font-size: 12px; color: var(--muted); margin-top: 5px; }
.faq { max-width: 880px; padding-bottom: 86px; }
.faq .section-intro { padding-block: 83px 35px; }
details { border-bottom: 1px solid var(--line); }
summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0px; font-size: 16px; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary span { font-size: 24px; color: var(--accent); font-weight: 300; }
details[open] summary span { transform: rotate(45deg); }
details > p { font-size: 14px; line-height: 2; color: var(--muted); padding-bottom: 25px; padding-right: 35px; }
.closing { text-align: center; padding: 79px 0px 83px; background: rgb(234, 244, 242); }
.closing h2 { font-size: clamp(32px, 4vw, 49px); }
.closing > .wrap > p:not(.eyebrow):not(.availability) { font-size: 13px; color: var(--muted); margin: 21px 0px; }
.closing .download { margin-top: 5px; }
.closing .availability { margin-top: 13px; }
footer { padding: 58px 0px 23px; }
.footer-main { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; align-items: start; }
.footer-main > div { display: flex; flex-direction: column; gap: 9px; font-size: 12px; color: var(--muted); }
.footer-main > div p { font-size: 11px; color: var(--ink); font-weight: 600; margin-bottom: 5px; }
.footer-main button { text-align: left; border: 0px; background: none; padding: 0px; color: inherit; font-size: 12px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; font-size: 10px; color: rgb(135, 147, 147); border-top: 1px solid var(--line); margin-top: 45px; padding-top: 22px; }
dialog { border: 1px solid var(--line); border-radius: 18px; max-width: 510px; width: calc(100% - 40px); padding: 35px; color: var(--ink); }
dialog::backdrop { background: rgba(20, 42, 43, 0.4); }
dialog h2 { font-size: 30px; }
dialog p:last-of-type { margin-top: 15px; color: var(--muted); font-size: 14px; }
.dialog-close { position: absolute; top: 10px; right: 15px; font-size: 25px; border: 0px; background: none; }
.dialog-done { border: 0px; background: var(--accent); color: white; padding: 8px 20px; border-radius: 8px; margin-top: 25px; }
.paused .hero-phone { animation-play-state: paused; }
@keyframes float { 
  0%, 100% { transform: rotate(6deg) translateY(0px); }
  50% { transform: rotate(4deg) translateY(-9px); }
}
@media (min-width: 1500px) {
  .hero { min-height: 745px; }
}
@media (max-width: 900px) {
  .wrap { padding-inline: 28px; }
  .nav { gap: 20px; }
  nav { gap: 16px; }
  .brand span { display: none; }
  .hero { gap: 18px; grid-template-columns: 1.1fr 1fr; }
  .hero h1 { font-size: 44px; }
  .lead { font-size: 15px; }
  .feature { gap: 35px; }
  .visual { min-height: 510px; }
  .phone { width: 218px; }
  .hero-phone { width: 235px; }
  .footer-main { gap: 25px; }
}
@media (max-width: 620px) {
  .wrap { padding-inline: 24px; }
  .nav { height: 70px; }
  .brand { font-size: 23px; }
  .nav nav { display: none; }
  .hero { display: flex; flex-direction: column; align-items: stretch; padding-top: 49px; padding-bottom: 36px; gap: 23px; min-height: 0px; }
  .hero h1 { font-size: 43px; line-height: 1.4; }
  .hero .eyebrow { font-size: 10px; margin-bottom: 20px; }
  .lead { font-size: 15px; margin: 20px 0px 23px; }
  .hero-visual { min-height: 475px; }
  .halo { width: 320px; height: 320px; top: 45px; }
  .hero-phone { width: 206px; }
  .hero-switch { margin-top: 23px; }
  .hero .availability { font-size: 10px; }
  .stats-grid { padding-block: 23px; gap: 0px; }
  .stats strong { font-size: 25px; }
  .stats strong span { font-size: 18px; }
  .stats p { font-size: 9px; }
  .section-intro { padding-block: 65px 22px; }
  .section-intro h2 { font-size: 30px; }
  .directions { font-size: 12px; gap: 14px; }
  .feature { display: flex; flex-direction: column; align-items: stretch; padding-block: 39px 43px; gap: 28px; min-height: 0px; }
  .feature.reverse .feature-copy, .feature.reverse .visual { order: initial; }
  .feature h3 { font-size: 31px; }
  .feature-copy > p:not(.eyebrow) { font-size: 14px; margin-top: 17px; }
  .feature .eyebrow { margin-bottom: 15px; }
  .tags { margin-top: 19px; }
  .tags span { font-size: 10px; padding: 5px 10px; }
  .visual { min-height: 495px; padding: 26px 12px 18px; border-radius: 20px; }
  .phone { width: 203px; }
  .creator { margin-top: 40px; padding-block: 55px; }
  .faq .section-intro { padding-block: 59px 25px; }
  .faq { padding-bottom: 58px; }
  summary { font-size: 14px; padding-block: 21px; }
  details > p { font-size: 13px; padding-right: 0px; }
  .closing { padding-block: 60px; }
  .closing h2 { font-size: 33px; }
  .footer-main { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .footer-main > .brand { grid-column: 1 / -1; margin-bottom: 12px; }
  .footer-main .brand span { display: block; }
  .footer-bottom { flex-direction: column; gap: 8px; margin-top: 30px; }
  footer { padding-top: 39px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-phone { animation: auto ease 0s 1 normal none running none; }
  .motion-toggle { display: none; }
}.visual,.visual.teal,.visual.lavender,.visual.peach,.visual.sage,.visual.blue,.visual.sand{background:transparent;border-radius:0}.halo{display:none}.hero-phone{animation:none;transform:none}.theme-toggle{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);font-size:22px;flex-shrink:0}.nav{gap:25px}.phone video{display:block;width:100%;height:auto;aspect-ratio:1320/2868;object-fit:contain;border-radius:26px;background:#fafafa}.video-note{font-size:9px;color:var(--muted);margin-top:6px}.hero-switch{gap:1px}.hero-switch button{padding:7px 11px}.hero-phone{width:244px;transform:none}.hero h1{max-width:550px}.hero-visual{min-height:575px}
html[data-theme=dark]{--ink:#ecf0ef;--muted:#acb8b8;--accent:#81c7c8;--line:#344243;color-scheme:dark}html[data-theme=dark] body{background:#142021}html[data-theme=dark] header{background:#142021ee;border-color:#344243}html[data-theme=dark] .download{background:#81c7c8;color:#142021}html[data-theme=dark] .stats,html[data-theme=dark] .creator{background:#1a2829}html[data-theme=dark] .closing{background:#1c3031}html[data-theme=dark] .hero-switch{background:#1b2a2b}html[data-theme=dark] .hero-switch button[aria-pressed=true]{background:#304849;color:#b5e0df}html[data-theme=dark] .tags span{background:#233536;color:#b7cdcd}html[data-theme=dark] .portrait{border-color:#344243}html[data-theme=dark] .phone{box-shadow:inset 0 0 0 2px #191b1b,9px 15px 30px #0002}html[data-theme=dark] .phone img,html[data-theme=dark] .phone video{background:#151515}html[data-theme=dark] dialog{background:#1a2829}html[data-theme=dark] .dialog-done{background:#81c7c8;color:#142021}html[data-theme=dark] .steps{color:#708a8c}html[data-theme=dark] .visual figcaption,html[data-theme=dark] .footer-bottom{color:#a2b4b4}
@media(max-width:620px){.nav{gap:12px}.theme-toggle{margin-left:auto;width:36px;height:36px}.hero h1{font-size:40px}.hero-visual{min-height:490px}.hero-phone{width:206px}.hero-switch button{font-size:10px;padding:7px 10px}.phone video{border-radius:26px}}

@media (prefers-reduced-motion: reduce){.motion-toggle{display:inline-block}}

.hero-switch button{white-space:nowrap;padding-inline:8px}

.stats small{display:block;font-size:11px;color:var(--muted);line-height:1.7;margin-top:5px}.stats strong span{margin-left:3px}@media(max-width:620px){.stats small{font-size:9px;padding:0 5px}.stats strong span{font-size:14px;margin-left:2px}}

.brand { white-space: nowrap; flex-shrink: 0; letter-spacing: .05em; }
.nav a, .nav .download { white-space: nowrap; }
@media (min-width: 601px) and (max-width: 760px) { .nav { gap: 14px; } .nav nav { gap: 14px; } .nav .brand { font-size: 22px; } }

.theme-toggle { display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; cursor: pointer; transition: background .2s, color .2s; }
.theme-toggle:hover { background: var(--line); }
.theme-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.theme-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .theme-sun { display: none; }
[data-theme="dark"] .theme-toggle .theme-moon { display: none; }
[data-theme="dark"] .theme-toggle .theme-sun { display: block; }