:root{color-scheme:light;--ink:#26251f;--muted:#77776e;--line:#e9e6dc;--yellow:#f5d769;--paper:#faf9f5}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.wrap{width:min(1240px,calc(100% - 96px));margin:auto}.header{border-bottom:1px solid rgba(38,37,31,.07)}.nav{height:88px;display:flex;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:10px;font-size:21px;font-weight:750;letter-spacing:-.04em}.brand img{width:40px;height:40px;border-radius:11px}.nav nav{display:flex;align-items:center;gap:38px;font-size:14px;font-weight:600}.nav nav>a:not(.nav-cta){color:#66665e}.nav-cta{background:#282820;color:white;padding:13px 19px;border-radius:100px}.nav-cta span{margin-left:15px}.hero{min-height:700px;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:25px;padding-top:35px;padding-bottom:58px}.hero-copy{position:relative;z-index:2}.eyebrow,.section-kicker{font-size:11px;letter-spacing:.16em;font-weight:750;color:#8b815b}.eyebrow{display:flex;gap:9px;align-items:center;letter-spacing:.08em}.dot{width:8px;height:8px;background:#d9b947;border-radius:50%;box-shadow:0 0 0 5px #f4ebc7}.hero h1{font-size:clamp(50px,5.4vw,76px);line-height:1.23;letter-spacing:-.065em;margin:30px 0 23px;font-weight:750}.hero h1 span{color:#ad8e35}.hero-copy>p{line-height:1.9;color:#73746d;font-size:16px;margin:0}.actions{display:flex;align-items:center;gap:14px;margin-top:35px}.button{display:inline-flex;align-items:center;justify-content:center;gap:35px;padding:17px 22px;border-radius:100px;font-size:14px;font-weight:700}.primary{background:#e8c452;box-shadow:0 8px 24px #d8bd5a3d}.primary:hover{background:#e0ba43}.text-button{gap:16px}.support{display:flex;align-items:center;gap:12px;margin-top:44px;color:#98988d;font-size:11px;font-weight:650;letter-spacing:.03em}.support i{width:3px;height:3px;background:#c7c5bb;border-radius:100%}.hero-art{height:510px;position:relative;display:flex;align-items:center}.orb{position:absolute;border-radius:50%;filter:blur(1px)}.orb-one{width:440px;height:440px;right:5%;top:0;background:radial-gradient(circle,#f4e4ab 0%,#f5ebcda6 54%,transparent 73%)}.orb-two{width:240px;height:240px;right:0;bottom:0;background:radial-gradient(circle,#e4cfd1aa,transparent 70%)}.display{width:92%;aspect-ratio:1.62;position:relative;border:9px solid #403e38;background:#403e38;border-radius:17px;box-shadow:0 30px 65px #70695735;transform:rotate(-2deg);overflow:hidden}.screen{height:100%;background:linear-gradient(125deg,#f8f3e8,#eee7e8 75%,#e3dbe2);overflow:hidden}.screen-nav{height:14%;display:flex;justify-content:space-between;align-items:center;padding:0 5%;background:#ffffff91;font-size:clamp(7px,.7vw,10px)}.screen-logo{display:flex;align-items:center;gap:5px;font-weight:700}.screen-logo img{width:19px}.screen-links{display:flex;align-items:center;gap:18px;color:#7c7d7a}.screen-links b{background:#e9dec2;color:#685b32;border-radius:5px;padding:5px 8px}.screen-body{padding:6% 6%}.screen-heading{display:flex;justify-content:space-between;align-items:end}.screen-heading div{display:grid;gap:7px}.screen-heading small{font-size:6px;letter-spacing:.16em;color:#a39a84}.screen-heading strong{font-size:clamp(11px,1.3vw,18px)}.screen-heading>span{font-size:8px;color:#98958d}.poster-row{display:flex;gap:3%;height:125px;margin-top:5%}.poster{flex:1;border-radius:5px;position:relative;overflow:hidden;box-shadow:0 5px 10px #403e3816}.poster:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#2e29275c,transparent 65%)}.poster span{position:absolute;bottom:10px;left:9px;color:#fff;font-size:clamp(6px,.7vw,10px);font-weight:700;letter-spacing:.12em;line-height:1.25}.poster-a{background:linear-gradient(145deg,#d5b878,#8d774b 45%,#d9cbb4)}.poster-b{background:linear-gradient(140deg,#edcdc0,#b8796d 53%,#645860)}.poster-c{background:linear-gradient(145deg,#9db2a6,#607a79 55%,#d5c9b6)}.poster-d{background:linear-gradient(145deg,#bfc5d0,#757b92 52%,#e1bbb0)}.poster-e{background:linear-gradient(145deg,#e3d3a9,#b7a577 55%,#747962)}.screen-bottom{margin-top:7%;font-size:11px}.mini-cards{display:flex;gap:3%;margin-top:4%}.mini-cards div{width:31%;height:45px;border-radius:5px;background:linear-gradient(120deg,#d8c8af,#abb8b4)}.mini-cards div:nth-child(2){background:linear-gradient(120deg,#c0b4aa,#a4a5b6)}.mini-cards div:nth-child(3){background:linear-gradient(120deg,#b3c0b4,#e2cbae)}.phone{position:absolute;width:24%;right:0;bottom:30px;aspect-ratio:.49;background:#383631;border:6px solid #383631;border-radius:24px;box-shadow:0 24px 40px #5b504944;transform:rotate(5deg);overflow:hidden}.phone-notch{position:absolute;z-index:2;top:0;left:32%;width:36%;height:9px;border-radius:0 0 8px 8px;background:#383631}.phone-content{height:100%;background:linear-gradient(155deg,#f5e6cf,#e8d4cf 60%,#f8f5eb);padding:14% 9% 0;overflow:hidden}.phone-top{display:flex;justify-content:space-between;align-items:center;font-size:14px}.phone-top img{width:22px}.phone-content small{display:block;font-size:5px;letter-spacing:.16em;margin-top:15%;color:#a08e77}.phone-content>b{display:block;font-size:clamp(10px,1vw,15px);line-height:1.3;margin-top:5%}.phone-card{height:32%;border-radius:7px;margin-top:10%;background:linear-gradient(140deg,#bdc4ad,#e4d5b3 50%,#8d9994);display:grid;place-items:center}.phone-card span{width:25px;height:25px;border-radius:50%;background:#ffffffcc;display:grid;place-items:center;font-size:8px}.phone-label{font-size:8px;font-weight:700;margin-top:12%}.phone-posters{display:flex;gap:6%;height:18%;margin-top:8%}.phone-posters i{width:30%;border-radius:4px;background:linear-gradient(145deg,#c8aa8e,#6f7d7a)}.phone-posters i:nth-child(2){background:linear-gradient(145deg,#a9b8af,#e0c1a6)}.phone-posters i:nth-child(3){background:linear-gradient(145deg,#c8aab0,#7c7c91)}.phone-nav{text-align:center;font-size:10px;margin-top:12%;color:#777}.floating-label{position:absolute;bottom:70px;left:-20px;background:#fffdfaeb;border:1px solid #fff;border-radius:15px;padding:13px 17px;display:flex;align-items:center;gap:12px;box-shadow:0 12px 28px #716f5d16;font-size:11px;font-weight:700}.floating-label>span{color:#c3a040;font-size:19px}.floating-label small{font-size:9px;color:#9b9a8e;font-weight:400}.art-caption{position:absolute;right:5px;bottom:4px;font-size:10px;color:#aca99d}.intro{padding-top:105px;border-top:1px solid var(--line)}.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:end}.intro h2,.download h2{font-size:clamp(34px,4vw,52px);letter-spacing:-.055em;line-height:1.25;margin:24px 0 0}.intro-grid p{max-width:450px;color:#77776e;line-height:2;font-size:15px;margin:0 0 5px}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding-top:70px;padding-bottom:120px}.features article{border-top:1px solid #dcd9cd;padding-top:26px}.feature-icon{color:#a58936;font-size:25px;height:53px}.features h3{font-size:17px;letter-spacing:-.02em;margin:16px 0}.features p{font-size:13px;line-height:1.9;color:#83837a;max-width:310px}.download{background:#f0eee6;padding:100px 0 110px}.download-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:43px}.download-heading p{color:#828177;font-size:14px}.platform-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.platform{min-height:280px;display:flex;flex-direction:column;justify-content:space-between;background:#fbfaf6;border:1px solid #fff;border-radius:17px;padding:27px;transition:transform .2s,box-shadow .2s}.platform:hover{transform:translateY(-5px);box-shadow:0 16px 35px #706b5114}.platform-top{display:flex;justify-content:space-between;align-items:start}.platform-icon{font-size:32px;line-height:1;color:#a58b3d}.arrow{font-size:17px;color:#a8a69b}.platform small{font-size:9px;font-weight:750;letter-spacing:.14em;color:#aaa392}.platform h3{font-size:23px;margin:10px 0 5px}.platform p{color:#96958b;font-size:13px;margin:0}.platform-link{font-size:12px;font-weight:700;border-top:1px solid #eeece4;padding-top:18px;display:flex;justify-content:space-between}.footer{display:flex;align-items:center;gap:30px;padding-top:35px;padding-bottom:35px}.footer .brand{font-size:17px}.footer .brand img{width:32px;height:32px}.footer p{font-size:12px;color:#a2a197}.footer>span{margin-left:auto;font-size:11px;color:#aaa99f}@media(max-width:800px){.wrap{width:min(100% - 40px,600px)}.nav{height:72px}.nav nav{gap:16px}.nav nav>a:not(.nav-cta){display:none}.nav-cta{font-size:12px;padding:11px 15px}.hero{grid-template-columns:1fr;padding-top:68px;gap:20px;min-height:0}.hero h1{font-size:clamp(45px,10vw,65px)}.hero-art{height:auto;aspect-ratio:1.3;margin-top:12px}.display{width:91%}.poster-row{height:clamp(55px,18vw,115px)}.phone{bottom:5%;border-width:4px;border-radius:18px}.floating-label{bottom:12%;left:0}.intro{padding-top:75px}.intro-grid{grid-template-columns:1fr;gap:22px}.features{grid-template-columns:1fr;gap:22px;padding-top:50px;padding-bottom:75px}.features article{padding-top:20px}.feature-icon{height:35px}.features h3{margin:12px 0}.download{padding:75px 0}.download-heading{display:block}.download-heading p{margin-top:20px}.platform-grid{grid-template-columns:1fr}.platform{min-height:220px}.footer{gap:12px;flex-wrap:wrap}.footer p{width:100%;order:3;margin:0}.footer>span{margin-left:auto}.screen-links{gap:8px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.platform{transition:none}}
.screen .screen-body{padding:4% 6%}
.screen .poster-row{height:clamp(55px,9vw,105px);margin-top:3%}
.screen .screen-bottom{margin-top:4%}
.screen .mini-cards{margin-top:2%}
.screen .mini-cards>div{height:clamp(24px,3vw,38px)}
.poster{animation:demo-focus 12s ease-in-out infinite}
.poster:nth-child(2){animation-delay:2.4s}.poster:nth-child(3){animation-delay:4.8s}.poster:nth-child(4){animation-delay:7.2s}.poster:nth-child(5){animation-delay:9.6s}
@keyframes demo-focus{0%,18%,100%{outline:2px solid transparent;outline-offset:0;filter:brightness(1)}4%,14%{outline:2px solid #fff0b3;outline-offset:2px;filter:brightness(1.12)}}
.mini-cards .demo-playing{position:relative;overflow:hidden;display:grid;place-items:center}
.demo-playing span{display:grid;place-items:center;width:19px;height:19px;border:1px solid #ffffffd9;border-radius:50%;background:#29282455;color:#fff;font-size:7px;padding-left:1px}
.demo-playing i{position:absolute;bottom:4px;left:5px;right:5px;height:2px;background:#ffffff70;border-radius:5px;overflow:hidden}
.demo-playing i:after{content:"";display:block;width:100%;height:100%;background:#fff;transform-origin:left;animation:demo-progress 12s linear infinite}
@keyframes demo-progress{from{transform:scaleX(.18)}to{transform:scaleX(.92)}}
.art-controls{position:absolute;right:5px;bottom:4px;display:flex;align-items:center;gap:10px;color:#969488;font-size:10px}
.demo-toggle{border:0;background:transparent;padding:5px 0;color:#766e56;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.demo-toggle:focus-visible{outline:2px solid #ad8e35;outline-offset:3px}
.demo-paused .poster,.demo-paused .demo-playing i:after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.poster,.demo-playing i:after{animation-play-state:paused}.hero-art.demo-playing-explicit .poster,.hero-art.demo-playing-explicit .demo-playing i:after{animation-play-state:running}}
