/* SnapTiler / 窗多多 · A5. Signature lettering is separate from UI text. */
:root { --paper:#faf9fd; --ink:#252437; --green:#6861b9; --muted:#6f697d; --line:#e7e4ef; --ease-out:cubic-bezier(.22,1,.36,1); scroll-padding-top:105px; }
body { background:var(--paper); }
.site-header { height:92px; gap:24px; border-bottom:1px solid var(--line); }
.brand { flex-shrink:0; }
.brand .brand-lockup { width:135px; height:auto; }
html[lang=en] .brand .brand-lockup { width:172px; height:auto; }
.desktop-nav { gap:28px; font-size:13px; color:#6c687b; }
.header-actions { gap:18px; }
.language-switch { min-width:38px; min-height:40px; border-radius:9px; }
.language-switch:hover { background:#eeebf7; }
.button { border-radius:12px; min-height:50px; padding:14px 22px; transition:transform .22s var(--ease-out),box-shadow .22s,background .22s; }
.button-dark { background:#5751a6; box-shadow:inset 0 1px 0 #ffffff23,0 5px 10px #3931640b; }
.button-dark:hover { background:#45418a; box-shadow:0 7px 18px #39316420; transform:translateY(-2px); }
.button:active { transform:translateY(1px); }
.button-small { min-height:38px; padding:10px 16px; font-size:12px; border-radius:10px; }
.hero { display:flex; flex-direction:column; gap:54px; padding-top:78px; padding-bottom:54px; }
.hero-copy { text-align:center; max-width:780px; }
.hero .eyebrow { justify-content:center; color:#70697f; letter-spacing:1.5px; font-size:11px; }
.status-dot { background:#9d96de; box-shadow:0 0 0 4px #eeebf8; width:6px; height:6px; }
.hero h1 { font-size:clamp(40px,4.25vw,64px); font-weight:680; line-height:1.32; letter-spacing:-2.4px; margin-bottom:24px; }
.hero h1 br { display:none; }
.hero h1 > span { display:block; }
.green-text { color:#8278c4; }
.hero-description { max-width:480px; font-size:15px; line-height:1.9; margin:0 auto 28px; }
.hero-actions { justify-content:center; gap:26px; }
.text-link { font-size:13px; }
.compatibility { justify-content:center; margin-top:19px; font-size:10px; gap:9px; }
.product-stage { width:100%; max-width:1056px; padding:25px 44px 22px; border-radius:28px; background:radial-gradient(ellipse at 25% 0%,#e9e4ff99,transparent 70%),linear-gradient(125deg,#efecf8,#e4e0f2); border:1px solid #e6e0f3; }
.stage-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:22px; font-size:10px; color:#62586e; letter-spacing:1.2px; }
.stage-version { letter-spacing:0; font-size:10px; }
.stage-label { font-weight:600; }
.product-stage .app-screenshot { width:min(100%,860px); height:auto; margin:auto; border-radius:10px; box-shadow:0 20px 50px -22px #4d416c70,0 2px 6px #3a31521a; }
.screenshot-placeholder { min-height:300px; display:grid; place-content:center; text-align:center; background:#ffffff85; color:#918c9f; border:1px dashed #cfc8e3; border-radius:12px; }
.placeholder-icon { font-size:38px; line-height:1; }
.screenshot-placeholder p { font-size:12px; }
.stage-foot { display:flex; justify-content:space-between; gap:24px; align-items:center; padding-top:22px; font-size:11px; color:#62586e; }
.stage-foot p { margin:0; }
.stage-foot a { font-size:11px; white-space:nowrap; }
.facts { width:min(1056px,calc(100% - 104px)); border-top:0; padding-top:10px; padding-bottom:40px; gap:25px; }
.facts strong { font-size:29px; font-weight:640; color:#716697; }
.facts > div { gap:14px; }
.facts > div > span { font-size:11px; }
.section { padding-block:88px; }
.section h2,.layout-section h2,.download-section h2 { font-size:32px; font-weight:630; line-height:1.45; letter-spacing:-1px; }
.section-heading { margin-bottom:36px; }
.section-heading > p { font-size:13px; }
.eyebrow { font-size:9px; color:#766b82; letter-spacing:1.5px; }
.feature-grid { gap:36px; }
.feature-card { border:0; border-radius:0; background:none; padding:0; }
.feature-art { height:130px; margin-bottom:24px; border-radius:16px; background:#f2eff8; }
.card-index { font-size:9px; color:#756b7f; letter-spacing:1.2px; }
.feature-card h3 { font-size:18px; font-weight:600; margin:10px 0; }
.feature-card p { font-size:13px; }
.art-grid > div { background:#e3ddf6; border-color:#c8bedf; }
.art-grid > div:nth-child(2) { background:#b9ace4; }
.art-grid > span { color:#8b79b4; }
.art-keys kbd { width:43px; height:43px; line-height:42px; font-size:17px; border-color:#e3ddeb; box-shadow:0 3px 0 #e7e0ee; color:#81728e; }
.art-keys kbd:last-child { background:#d8d0ed; color:#665c85; box-shadow:0 1px 0 #bfb2d6; }
.layout-section { padding-block:70px; background:#f0edf7; border-color:#e9e3f1; }
.layout-inner { grid-template-columns:.7fr 1.3fr; gap:68px; }
.layout-copy > p:not(.eyebrow) { font-size:13px; max-width:320px; }
.layout-demo { min-width:0; }
.desktop-demo { background:linear-gradient(130deg,#ded8f3,#c9c1e9); border:6px solid #fff; border-radius:18px; padding:0 11px 9px; box-shadow:0 20px 40px -22px #75668550; }
.demo-menubar { height:27px; color:#7b7189; }
.demo-canvas { height:310px; }
.demo-window { border-radius:7px; border:1px solid #ffffff70; box-shadow:0 2px 7px #6c5b7916; }
.window-bar { height:21px; background:#f7f5fa; }
.window-bar span { font-size:7px; }
.demo-canvas[data-layout="4"] .demo-window { width:calc((100% - 7px)/2); height:calc((100% - 7px)/2); }
.demo-canvas[data-layout="4"] .window-1 { left:0; top:0; }
.demo-canvas[data-layout="4"] .window-2 { left:calc((100% + 7px)/2); top:0; }
.demo-canvas[data-layout="4"] .window-3 { left:0; top:calc((100% + 7px)/2); }
.demo-canvas[data-layout="4"] .window-4 { left:calc((100% + 7px)/2); top:calc((100% + 7px)/2); }
.demo-canvas[data-layout="4"] .demo-window:nth-child(n+5) { opacity:0; visibility:hidden; }
.demo-canvas[data-layout="4"] .window-body { padding:15px; }
.demo-canvas[data-layout="4"] .window-body strong { font-size:24px; font-weight:650; }
.demo-canvas[data-layout="4"] .checklist { font-size:8px; line-height:2.2; }
.demo-canvas[data-layout="4"] .checklist b { font-size:13px; font-weight:600; }
.demo-canvas[data-layout="4"] .code-body { font-size:9px; }
.demo-canvas[data-layout="4"] .mini-picture { height:60px; }
.demo-controls { padding:4px; border:1px solid #e3ddeb; border-radius:12px; width:fit-content; background:#ffffffb0; margin-top:20px; }
.demo-controls > span:first-child { padding-left:9px; margin-right:6px; }
.demo-controls button { border:0; border-radius:8px; min-height:35px; }
.demo-controls button[aria-pressed="true"] { background:#8a7cab; }
.demo-controls button:hover { background:#e9e2f5; }
.demo-controls button[aria-pressed="true"]:hover { background:#796b9a; }
.demo-hint { display:none; }
.demo-caption { font-size:10px; color:#7a7087; }
.workflow-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.workflow-card { min-width:0; border:1px solid var(--line); background:#fff; border-radius:20px; overflow:hidden; }
.workflow-copy { padding:28px 30px 24px; }
.workflow-copy h3 { margin:10px 0; font-size:20px; font-weight:590; letter-spacing:-.5px; }
.workflow-copy p { font-size:12px; color:var(--muted); line-height:1.9; max-width:380px; margin:0; }
.workflow-card .screenshot-placeholder { min-height:300px; margin:0 20px 20px; }
.workflow-image { padding:18px 18px 0; background:linear-gradient(135deg,#f1eef8,#eae5f3); overflow:hidden; }
.workflow-image .app-screenshot { width:100%; height:auto; border-radius:7px 7px 0 0; box-shadow:0 8px 28px #5947671a; }
.screenshot-note { margin:18px 0 0; font-size:10px; color:#70637d; text-align:center; }
.language-section { border-top:1px solid var(--line); padding-block:70px; }
.language-number { font-size:100px; font-weight:650; letter-spacing:-6px; color:#9c91bb; }
.language-list { gap:9px; }
.language-list li { border:0; border-radius:6px; padding:7px 12px; background:#f1eef6; font-size:11px; color:#6f6579; }
.language-heading h2 { font-size:29px; }
.language-heading p:not(.eyebrow) { font-size:13px; }
.setup-section { padding-block:70px; }
.setup-steps { gap:36px; }
.setup-steps li { padding-top:20px; border-top:1px solid #dcd4e8; }
.step-number { background:#eee8f6; color:#9784af; width:30px; height:30px; font-size:12px; }
.setup-steps h3 { font-size:17px; font-weight:600; }
.setup-steps p { font-size:12px; }
.faq-section { padding-top:45px; }
.faq-section h2 { font-size:27px; }
.faq-list summary { font-size:14px; }
.faq-list p { font-size:12px; }
.download-card { padding:48px; border-radius:22px; background:#625672; box-shadow:inset 0 1px 0 #ffffff17; }
.download-card .eyebrow { color:#d3c7df; }
.download-card h2 { font-size:30px; }
.download-action .button { background:#f0eaf8; color:#6d5a7e; }
.release-status { color:#e0d5e9!important; }
.download-card > div > p:not(.eyebrow) { color:#e0d4ea; }
.download-card .download-meta { color:#d9cde3; }
.site-footer { flex-wrap:wrap; border-top:0; }
.site-footer .brand .brand-lockup { width:120px; }
html[lang=en] .site-footer .brand .brand-lockup { width:155px; }
.site-footer p { color:#71607d; font-size:10px; }
.site-footer nav { font-size:11px; }
.site-footer small { font-size:10px; color:#71607d; }
.will-reveal { opacity:0; transform:translateY(14px); transition:opacity .65s var(--ease-out),transform .65s var(--ease-out); }
.will-reveal.is-visible { opacity:1; transform:none; }
@media (min-width:1500px) { .wrap { width:min(1200px,calc(100% - 160px)); } }
@media (max-width:1080px) { .desktop-nav { gap:18px; } .layout-inner { gap:36px; } .feature-grid { gap:24px; } .hero h1 { font-size:54px; } }
@media (max-width:900px) { .desktop-nav { display:none; } .layout-inner { grid-template-columns:1fr; gap:30px; } .layout-copy { max-width:540px; } .layout-copy > p:not(.eyebrow) { max-width:100%; } .layout-copy h2 br { display:none; } .layout-demo { width:100%; max-width:620px; margin:auto; } .product-stage { padding:22px 26px; } .workflow-copy { padding:22px; } .facts { width:calc(100% - 70px); } }
@media (max-width:680px) { .wrap { width:calc(100% - 40px); } .site-header { height:78px; gap:10px; } .brand .brand-lockup { width:110px; height:auto; } .header-actions { gap:5px; } .header-actions .button-small { font-size:10px; padding-inline:11px; } .hero { padding-top:45px; padding-bottom:32px; gap:36px; } .hero h1 { font-size:40px; line-height:1.37; letter-spacing:-1.5px; } html[lang=en] .hero h1 { font-size:43px; letter-spacing:-1.7px; } .hero-description { font-size:13px; max-width:340px; padding-inline:5px; } .hero .eyebrow { font-size:9px; } .hero-actions { gap:20px; } .hero-actions .button { font-size:13px; padding:12px 17px; min-height:45px; } .hero-actions .text-link { font-size:12px; } .compatibility { font-size:9px; gap:6px; } .product-stage { border-radius:16px; padding:15px 12px 14px; } .stage-heading { font-size:8px; gap:10px; padding-bottom:13px; letter-spacing:.8px; } .stage-version { font-size:8px; } .stage-foot { padding-top:14px; gap:12px; align-items:flex-start; font-size:9px; line-height:1.7; } .stage-foot a { font-size:9px; gap:4px; } .product-stage .app-screenshot { border-radius:6px; } .screenshot-placeholder { min-height:210px; } .facts { width:calc(100% - 52px); grid-template-columns:1fr 1fr; row-gap:24px; padding-bottom:26px; } .facts strong { font-size:26px; } .facts > div { justify-content:flex-start; padding-left:6px; gap:13px; } .facts > div:nth-child(2) { border:0; } .facts > div > span { font-size:10px; } .section { padding-block:52px; } .section h2,.layout-section h2 { font-size:27px; letter-spacing:-.8px; } .section-heading { display:block; margin-bottom:27px; } .section-heading > p { margin-top:14px; font-size:12px; } .section-heading > p br { display:none; } .feature-grid { grid-template-columns:1fr; gap:29px; } .feature-card { display:grid; grid-template-columns:102px 1fr; column-gap:20px; } .feature-art { grid-row:1/4; height:120px; margin:0; border-radius:12px; } .feature-card .card-index { font-size:8px; } .feature-card h3 { font-size:16px; margin:6px 0; } .feature-card p { font-size:12px; } .art-grid { grid-template-columns:repeat(3,22px); grid-template-rows:repeat(2,24px); gap:3px; } .art-grid > span { font-size:23px; } .art-keys { display:grid; grid-template-columns:repeat(2,29px); align-content:center; gap:5px; } .art-keys kbd { width:29px; height:29px; line-height:28px; font-size:12px; border-radius:5px; } .undo-window { width:54px; height:42px; } .undo-window.back { left:15%; top:26px; } .undo-window.front { left:32%; top:51px; } .art-undo > span { left:13%; top:60px; font-size:24px; } .layout-section { padding-block:48px; } .demo-canvas { height:265px; } .demo-controls { gap:2px; } .demo-controls > span:first-child { display:none; } .demo-controls button { min-width:52px; font-size:10px; } .demo-canvas[data-layout="4"] .window-body { padding:9px; } .demo-canvas[data-layout="4"] .window-body strong { font-size:19px; } .demo-canvas[data-layout="4"] .checklist { font-size:6px; } .demo-canvas[data-layout="4"] .checklist b { font-size:10px; } .demo-canvas[data-layout="4"] .code-body { font-size:7px; } .workflow-grid { grid-template-columns:1fr; gap:20px; } .workflow-copy { padding:23px; } .workflow-copy h3 { font-size:19px; } .language-heading { gap:20px; align-items:flex-start; } .language-number { font-size:64px; letter-spacing:-4px; } .language-heading h2 { font-size:25px; } .language-heading p:not(.eyebrow) { font-size:12px; } .language-list li { padding:6px 9px; font-size:10px; } .setup-steps { gap:22px; } .faq-section { gap:25px; } .download-card { padding:30px 25px; border-radius:18px; gap:28px; } .download-card h2 { font-size:26px; } .site-footer { gap:23px; padding-block:32px; } .site-footer nav { gap:15px; flex-wrap:wrap; } .screenshot-note { font-size:9px; } }
@media (max-width:360px) { .wrap { width:calc(100% - 30px); } .brand .brand-lockup { width:99px; height:auto; } .header-actions .button-small { padding-inline:8px; } .hero h1 { font-size:35px; } html[lang=en] .hero h1 { font-size:38px; } .feature-card { grid-template-columns:88px 1fr; gap:15px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } .will-reveal { opacity:1; transform:none; } }

@media(max-width:680px) { .brand .brand-lockup { width:120px; height:auto; } html[lang=en] .brand .brand-lockup { width:146px; height:auto; } }
@media(max-width:360px) { .brand .brand-lockup { width:108px; } html[lang=en] .brand .brand-lockup { width:130px; } }

.screenshot-link { display:block; cursor:zoom-in; border-radius:10px; }
.screenshot-link:focus-visible { outline:3px solid #5751a6; outline-offset:5px; }

/* Keep action labels intact; compact wording is preferable to ellipsis or wrapping. */
.button,.text-link,.language-switch,.desktop-nav a { white-space:nowrap; }
@media(max-width:360px) { html[lang=en] .brand .brand-lockup { width:120px; } .hero-actions { gap:14px; } .hero-actions .text-link { font-size:11px; gap:6px; } .hero-actions .button { font-size:12px; padding-inline:14px; gap:8px; } }

.stage-label,.stage-version { white-space:nowrap; }