/* Homepage only: complete App screenshots, native system fonts, HTML surroundings. */
.home-page{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
.home-page h1{font-weight:750;letter-spacing:-.045em;font-size:48px;line-height:1.26}
.home-page h2{font-weight:700;letter-spacing:-.035em}
.home-gradient{color:var(--website-link);background:linear-gradient(105deg,var(--website-gradient-start) 15%,var(--website-gradient-mid) 48%,var(--website-gradient-end));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.home-hero .home-container{width:min(1240px,calc(100% - 64px))}
/* Preserve the existing small-screen envelopes; desktop widths are owned by
   the shared page layout in website-sections.css. */
.home-page{--home-nav-width:100vw}
@media(max-width:1023px){
.home-page .home-container,.home-page .scene-container{max-width:calc(var(--home-nav-width) - 2rem)}
.home-page .website-container{max-width:min(1120px,calc(var(--home-nav-width) - 2rem))}
}
@media(min-width:640px) and (max-width:1023px){.home-page{--home-nav-width:640px}}
@media(min-width:768px) and (max-width:1023px){.home-page{--home-nav-width:768px}}

/* Center the copy and the demo's actual width, without spare space inside the right column. */
.home-hero .home-split{grid-template-columns:440px max-content;justify-content:center;gap:72px}
.home-hero .home-visual{position:relative;isolation:isolate}
.home-hero .home-visual::before{content:"";position:absolute;inset:5% 0 12%;z-index:-1;background:radial-gradient(ellipse,var(--website-glow) 0,transparent 68%);pointer-events:none}
.home-phone-demo{display:flex;align-items:center;gap:32px;position:relative;max-width:100%}
.home-interface{width:282px;max-width:none;flex-shrink:0;margin:0}
.home-device{--phone-radius:43px;--phone-shell:6px;--phone-rim:3px;--phone-border:1px;position:relative;padding:calc(var(--phone-shell) + var(--phone-rim));border:var(--phone-border) solid #17191e;border-radius:var(--phone-radius);background:#1d2025;box-shadow:0 28px 64px -20px #17395c40,0 5px 12px #1e293b12}
/* One continuous frame and one clipping boundary; avoid nested dark arcs. */
.home-screen{position:relative}
.home-screen-image{position:relative;aspect-ratio:1206/2622;background:#f2f2f7;border-radius:calc(var(--phone-radius) - var(--phone-shell) - var(--phone-border) - var(--phone-rim));overflow:hidden;isolation:isolate;container-type:inline-size}
.home-device-frame{position:absolute;inset:calc(-1 * var(--phone-border));width:calc(100% + 2 * var(--phone-border));height:calc(100% + 2 * var(--phone-border));overflow:visible;pointer-events:none;fill:#1d2025;filter:drop-shadow(0 20px 24px #17395c20) drop-shadow(0 4px 6px #1e293b12)}
.home-device.has-continuous-frame{background:transparent;border-color:transparent;box-shadow:none}
.has-continuous-frame .home-screen{z-index:1}
.has-continuous-frame .home-screen-image{border-radius:0}
.home-screen-edge{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:5;display:none}
.home-screen-edge path{fill:none;stroke:#1d2025;stroke-opacity:.35}
.home-device img{width:100%;height:auto;display:block}
.home-screen-image>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.home-device::before,.home-device::after,.home-device-key{position:absolute;width:4px;border:1px solid #101216;background:linear-gradient(90deg,#171a20,#454b55);border-radius:2px;box-shadow:0 1px 2px #33415526;pointer-events:none}
.home-device::before,.home-device::after{content:""}.home-device::before{height:3.6%;left:-4px;top:17%}.home-device::after{height:10%;right:-4px;top:28%}.home-device-key{left:-4px;height:7%}.home-volume-up{top:26%}.home-volume-down{top:36%}
.home-screen-nav{position:absolute;left:15.8%;width:68.4%;bottom:2.4%;height:8.5%;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;z-index:3}
.home-screen-nav button{font:inherit;border:0;background:transparent;cursor:pointer;min-height:44px;min-width:44px;border-radius:18px;padding:0;color:transparent}
.home-screen-nav button:hover,.home-screen-nav button[aria-pressed=true],.home-screen-nav button:focus,.home-screen-nav button:focus-visible{background:transparent;box-shadow:none;outline:none}
.home-phone-demo.using-keyboard .home-screen-nav button:focus-visible{outline:2px solid #2563eb;outline-offset:-3px}
.home-screen-nav button[data-loading]{box-shadow:inset 0 0 0 2px #2563eb80}
.home-hand-notes{width:200px;display:flex;align-self:stretch;flex-direction:column;gap:24px;padding-top:70px;color:var(--website-link)}
.home-hand-note{position:relative;transform:rotate(-3deg)}.home-hand-note:nth-child(2){transform:rotate(2deg)}
.home-page .home-hand-note h2{font-family:"Kaiti SC",STKaiti,KaiTi,"PingFang SC",sans-serif;font-size:25px;font-weight:600;line-height:1.55;letter-spacing:0;margin:0;white-space:nowrap;text-wrap:initial}
.home-page .home-hand-note p{font-size:14px;line-height:1.75;color:var(--website-text-muted);margin:10px 0 0}
.home-scribble{display:block;width:190px;height:16px;overflow:visible;color:var(--website-accent)}
/* Spread the desktop composition without enlarging the phone or changing small screens. */
@media(min-width:1280px){.home-hero .home-split{grid-template-columns:480px max-content;gap:88px}.home-hero .home-lead{max-width:480px}.home-phone-demo{gap:48px}.home-hand-notes{width:240px}.home-scribble{width:230px}}
.home-note-kicker{font-family:"Kaiti SC",STKaiti,KaiTi,sans-serif;font-size:18px;color:var(--website-text-muted);margin-bottom:20px;transform:rotate(-3deg)}
.home-demo-meta{margin-top:20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.home-phone-demo:not(.is-ready) .home-rotation{visibility:hidden}
.home-phone-demo:not(.is-ready) .home-demo-hint{visibility:hidden}
.home-page .home-demo-hint{font-size:12px;color:var(--website-text-muted);margin:0;line-height:1.6}
.home-state-title{font-weight:600;color:var(--website-text)}
.home-rotation{font:inherit;font-size:12px;min-height:44px;padding:8px 12px;border:0;background:transparent;color:var(--website-text-muted);cursor:pointer;border-radius:8px;display:flex;align-items:center;gap:8px}
.home-rotation-dot{width:6px;height:6px;border-radius:50%;background:var(--website-accent)}.home-rotation[aria-pressed=true] .home-rotation-dot{background:var(--website-text-muted)}
.home-phone-demo button:focus-visible,.home-explore-viewport:focus-visible{outline:2px solid #2563eb;outline-offset:3px}
.home-phone-demo [hidden]{display:none!important}.home-phone-demo .home-explore-controls[hidden]{display:flex!important;visibility:hidden}
.home-explore-view{position:absolute;inset:0;background:#f2f2f7}
.home-explore-viewport{position:absolute;inset:0;overflow:auto;scrollbar-width:none;overscroll-behavior:contain;outline-offset:-4px}.home-explore-viewport::-webkit-scrollbar{display:none}
.home-explore-track{position:relative;overflow:hidden}.home-explore-slice{position:relative;overflow:hidden;width:100%}
/* Keep the complete first screenshot visible until the next aligned slice is ready. */
.home-explore-slice:first-child{overflow:visible}
.home-explore-view.is-scrolled .home-explore-slice:first-child{overflow:hidden}
.home-explore-view:not(.is-scrolled) .home-explore-slice:nth-child(2) .home-explore-slice-status{visibility:hidden}
.home-explore-slice img[hidden]{display:none}
.home-explore-slice-status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#64748b}
.home-explore-slice-status[hidden]{display:none}
.home-explore-slice-status button,.home-demo-retry{font:inherit;min-height:44px;padding:8px 10px;border:1px solid var(--website-control-border);border-radius:9px;background:var(--website-surface);color:var(--website-link);cursor:pointer}
.home-explore-slice img{position:absolute;inset:auto;left:0;width:100%;height:auto;max-width:none}
.home-explore-header{position:absolute;top:7.63%;left:0;width:100%;height:4.5%;overflow:hidden;pointer-events:none;display:none;background:#f2f2f7;border-bottom:1px solid #e6e6ec;align-items:center;justify-content:center;color:#050505;font-size:4cqw;font-weight:650;z-index:2}.is-scrolled .home-explore-header{display:flex}.home-explore-header span{line-height:1}
.home-explore-footer{clip-path:inset(7% 15.7% 24% 15.7% round 999px);position:absolute;bottom:0;left:0;width:100%;height:9.95%;overflow:hidden;pointer-events:none}.home-explore-footer img{position:absolute;inset:auto;bottom:0;left:0;width:100%;height:auto}
.home-explore-controls{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}.home-explore-controls button{font:inherit;font-size:12px;border:1px solid var(--website-control-border);background:var(--website-surface);min-height:44px;padding:8px 10px;border-radius:9px;color:var(--website-text-muted);cursor:pointer}.home-explore-controls button[aria-pressed=true]{color:var(--website-link);border-color:var(--website-border);background:var(--website-info-bg)}
.home-screen-image:has(.home-explore-view:not([hidden])) #home-demo-image{visibility:hidden}
.home-demo-status-bar{position:absolute;inset:0 0 auto;height:7.63%;background:#f2f2f7;z-index:4;pointer-events:none}
.home-demo-status-bar time{position:absolute;left:8%;top:34%;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;font-size:4.48cqw;font-weight:650;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.1cqw;color:#050505}.home-demo-status-icons{position:absolute;right:9.9%;top:38%;width:25cqw;height:4.48cqw}
.home-annotation-arrows{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;color:var(--website-link);z-index:5}.home-annotation-arrows path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.home-page .home-demo-error{font-size:12px;color:var(--website-error);margin:0}
.home-screen-image noscript img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.home-screen-image>img[hidden]{display:none!important}
.home-screen-image.is-image-loading::after{content:"正在加载截图…";position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:#64748b}
.home-image-retry{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-height:44px;padding:10px 12px;border:1px solid var(--website-control-border);border-radius:10px;background:var(--website-surface);color:var(--website-link);font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.home-image-retry:focus-visible{outline:2px solid var(--website-accent);outline-offset:3px}
@media(min-width:1024px) and (max-width:1279px){.home-hero .home-split{grid-template-columns:360px max-content;gap:48px}.home-page h1{font-size:40px}.home-interface{width:248px}.home-phone-demo{gap:24px}.home-hand-notes{width:170px}.home-page .home-hand-note h2{font-size:21px}.home-scribble{width:170px}}
@media(max-width:1023px){.home-hero .home-split{grid-template-columns:1fr;gap:40px}.home-hero .home-copy{max-width:650px;text-align:center;margin:auto}.home-hero .home-actions{justify-content:center}.home-hero .home-container{width:min(700px,calc(100% - 40px))}.home-page h1{font-size:44px}.home-split{gap:36px}}
@media(max-width:767px){.home-page h1{font-size:34px;letter-spacing:-.04em}.home-page h2{font-size:28px}.home-hero{padding:40px 0 44px}}
@media(max-width:600px){.home-phone-demo{flex-direction:column;gap:28px;width:100%}.home-interface{width:264px}.home-hand-notes{width:100%;max-width:340px;display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:0 4px 12px}.home-note-kicker{display:none}.home-page .home-hand-note h2{font-size:19px}.home-page .home-hand-note p{font-size:12px}.home-scribble{width:145px}.home-annotation-arrows{display:none}.home-interface .home-device{--phone-radius:40px}}
@media(max-width:374px){}
@media(max-width:600px){.home-hand-notes{grid-template-columns:repeat(2,minmax(0,1fr))}.home-page .home-hand-note h2{white-space:normal}.home-scribble{width:100%;max-width:145px}}
@media(prefers-reduced-motion:reduce){.home-phone-demo *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){.home-gradient{background:none;-webkit-text-fill-color:CanvasText;color:CanvasText}.home-screen-nav button:focus-visible{outline:2px solid Highlight}}