@charset "UTF-8";
:root{--purple:#4b3859;--purple2:#32253e;--sage:#cbd8bd;--sage2:#e8eee1;--paper:#f3f0eb;--white:#fff;--ink:#231e27;--muted:#746e78;--line:#d8d2da;--shell:min(1190px,calc(100% - 40px))}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}img{display:block;max-width:100%}a{text-decoration:none;color:inherit}.shell{width:var(--shell);margin:auto}
.header{background:#fff;border-bottom:1px solid var(--line)}.header-grid{height:72px;display:grid;grid-template-columns:190px 1fr auto;align-items:center;gap:25px}.brand img{max-height:38px;width:auto}.header nav{display:flex;justify-content:center;gap:27px;font-size:12px;color:#746d79}.header nav a:hover{color:var(--purple)}.header-cta{background:var(--purple);color:#fff;padding:11px 17px;border-radius:6px;font-size:12px;font-weight:900}
.hero{position:relative;background:linear-gradient(145deg,#e7eee1,#d8e4cf);overflow:hidden}.hero-side{position:absolute;left:0;top:0;bottom:0;width:76px;background:var(--purple2);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:40px 0}.hero-side span{font-size:32px;font-weight:900;color:#8b779c}.hero-side b{writing-mode:vertical-rl;transform:rotate(180deg);font-size:8px;letter-spacing:.16em;color:#9a8aa7}.hero-grid{min-height:650px;display:grid;grid-template-columns:.78fr 1.22fr;gap:70px;align-items:center}.kicker,.devices-head span,.layout-copy>span,.install-head span,.compat-title span,.content-copy>span,.fix-title span,.faq-title span,.final-grid>div>span{display:block;font-size:9px;letter-spacing:.16em;color:var(--purple);font-weight:900;margin-bottom:14px}.hero h1{font-size:clamp(64px,7vw,98px);line-height:.86;letter-spacing:-.065em;margin:20px 0 24px}.hero-copy>p{font-size:15px;line-height:1.9;color:#61705c;max-width:590px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.primary{background:var(--purple);color:#fff;padding:14px 17px;border-radius:6px;font-size:12px;font-weight:900}.secondary{background:#f8fbf6;border:1px solid #bdcbb3;padding:13px 17px;border-radius:6px;font-size:12px;color:#53634d}.tablet-stage{position:relative;min-height:530px;display:grid;place-items:center}.tablet-frame{width:min(100%,690px);aspect-ratio:16/10;background:#17121d;border:12px solid #211a28;border-radius:30px;box-shadow:0 35px 60px rgba(50,37,62,.22);display:grid;place-items:center;position:relative;overflow:hidden}.camera{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;background:#4c4452}.tablet-frame img{max-width:93%;max-height:90%;object-fit:contain;filter:drop-shadow(0 20px 25px rgba(0,0,0,.28))}.tablet-note{position:absolute;background:#fff;color:var(--purple);padding:8px 11px;border-radius:999px;font-size:8px;font-weight:900;box-shadow:0 14px 25px rgba(75,56,89,.12)}.t1{left:2%;top:18%}.t2{right:0;bottom:18%}
.devices{padding:105px 0;background:#fff}.devices-head{display:grid;grid-template-columns:1fr 380px;gap:70px;align-items:end;margin-bottom:38px}.devices-head h2,.layout-copy h2,.install-head h2,.compat-title h2,.content-copy h2,.fix-title h2,.faq-title h2{font-size:clamp(40px,5vw,62px);line-height:1.04;letter-spacing:-.05em;margin:0}.devices-head>p,.content-copy p{margin:0;color:var(--muted);font-size:13px;line-height:1.8}.device-split{display:grid;grid-template-columns:1fr 1fr;gap:14px}.device-split article{min-height:360px;padding:28px;display:flex;flex-direction:column}.ipad{background:#4b3859;color:#fff}.android{background:#dfe8d5}.device-name{display:flex;justify-content:space-between;border-bottom:1px solid currentColor;padding-bottom:13px;opacity:.7}.device-name span{font-size:9px;letter-spacing:.14em}.device-name b{font-size:32px}.device-split h3{font-size:34px;margin:55px 0 10px}.device-split p{font-size:13px;line-height:1.75;opacity:.75}.device-split a{margin-top:auto;border-top:1px solid currentColor;padding-top:14px;font-size:12px;font-weight:900}
.layout{padding:110px 0;background:#ece8e2}.layout-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:80px;align-items:center}.layout-copy>p{font-size:13px;line-height:1.8;color:var(--muted)}.layout-copy ul{list-style:none;padding:0;margin:28px 0;border-top:1px solid var(--line)}.layout-copy li{display:grid;grid-template-columns:90px 1fr;padding:12px 0;border-bottom:1px solid var(--line);font-size:12px}.layout-copy span{color:var(--muted)}.layout-visual{min-height:570px;position:relative}.layout-visual figure{margin:0;position:absolute;background:#241b2c;box-shadow:0 24px 40px rgba(50,37,62,.16);display:grid;place-items:center}.portrait{left:0;bottom:0;width:37%;height:84%;padding:25px}.landscape{right:0;top:0;width:68%;height:66%;padding:25px;background:#dce5d5!important}.layout-visual img{max-height:90%;max-width:92%;width:auto;object-fit:contain}.portrait img{filter:drop-shadow(0 20px 22px rgba(0,0,0,.25))}.layout-visual figcaption{position:absolute;left:14px;bottom:12px;font-size:8px;letter-spacing:.14em;color:#887b91}.landscape figcaption{color:#6f7f68}
.install{padding:105px 0;background:#fff}.install-head{max-width:760px;margin-bottom:35px}.install-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.install-grid article{min-height:230px;background:#f0ece7;border:1px solid var(--line);padding:20px}.install-grid span{font-size:9px;color:var(--purple);font-weight:900}.install-grid h3{font-size:18px;margin:55px 0 8px}.install-grid p{font-size:12px;line-height:1.7;color:var(--muted);margin:0}
.compat{padding:100px 0;background:var(--sage)}.compat-grid{display:grid;grid-template-columns:360px 1fr;gap:80px}.compat-list{border-top:1px solid rgba(50,37,62,.2)}.compat-list>div{display:grid;grid-template-columns:170px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid rgba(50,37,62,.2);font-size:12px}.compat-list b{font-size:13px}.compat-list span{color:#53634f}
.content{padding:100px 0;background:var(--purple2);color:#fff}.content-grid{display:grid;grid-template-columns:340px 1fr;gap:80px;align-items:center}.content-copy h2{color:#fff}.content-copy p{color:#b6aebc}.content-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.content-icons figure{margin:0;min-height:200px;background:#43344f;border:1px solid rgba(255,255,255,.07);padding:20px 12px 13px;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.content-icons img{height:110px;width:110px;object-fit:contain}.content-icons figcaption{width:100%;border-top:1px solid rgba(255,255,255,.08);padding-top:10px;text-align:center;color:#b4a9bd;font-size:10px}
.fix{padding:100px 0;background:#fff}.fix-grid{display:grid;grid-template-columns:340px 1fr;gap:80px}.fix-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}.fix-list article{min-height:180px;background:#eef2ea;border:1px solid #d6ded0;padding:22px}.fix-list b{font-size:9px;color:var(--purple)}.fix-list h3{font-size:19px;margin:45px 0 8px}.fix-list p{font-size:12px;line-height:1.7;color:var(--muted);margin:0}
.faq{padding:110px 0;background:#f3f0eb}.faq-grid{display:grid;grid-template-columns:350px 1fr;gap:90px}.faq-list{border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line)}summary{list-style:none;cursor:pointer;padding:23px 48px 23px 0;font-weight:900;position:relative}summary::-webkit-details-marker{display:none}summary::after{content:"+";position:absolute;right:4px;top:17px;color:var(--purple);font-size:24px}details[open] summary::after{content:"−"}details p{margin:0 0 23px;color:var(--muted);font-size:13px;line-height:1.8}
.final{position:relative;background:#ddd5e4}.final-band{position:absolute;left:0;top:0;bottom:0;width:80px;background:var(--purple)}.final-grid{min-height:190px;display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center}.final-grid h2{font-size:33px;margin:7px 0 8px;letter-spacing:-.04em}.final-grid p{margin:0;color:#655b6a;font-size:12px}.final-grid>a{background:var(--purple);color:#fff;padding:14px 17px;border-radius:6px;font-size:12px;font-weight:900}
.footer{background:#211927;color:#82778a;padding:38px 0 90px}.footer-grid{display:grid;grid-template-columns:180px 1fr auto;gap:30px;align-items:center}.footer img{max-height:34px;width:auto}.footer p{font-size:11px}.footer nav{display:flex;gap:18px;font-size:11px}.mobile-bar{display:none}
@media(max-width:1000px){.hero-grid,.devices-head,.layout-grid,.compat-grid,.content-grid,.fix-grid,.faq-grid{grid-template-columns:1fr}.hero-side{display:none}.tablet-stage{min-height:450px}.layout-visual{min-height:520px}}
@media(max-width:760px){:root{--shell:min(100% - 28px,1190px)}body{padding-bottom:70px}.header nav,.header-cta{display:none}.header-grid{grid-template-columns:1fr}.hero-grid{padding:50px 0}.hero h1{font-size:58px}.tablet-stage{min-height:330px}.tablet-frame{border-width:8px;border-radius:20px}.devices,.layout,.install,.compat,.content,.fix,.faq{padding:74px 0}.device-split{grid-template-columns:1fr}.layout-visual{min-height:470px}.install-grid{display:flex;overflow:auto}.install-grid article{min-width:190px}.compat-list>div{grid-template-columns:130px 1fr}.content-icons{display:flex;overflow:auto}.content-icons figure{min-width:150px}.fix-list{grid-template-columns:1fr}.final-band{display:none}.final-grid{grid-template-columns:1fr;gap:18px;padding:32px 0}.final-grid>a{justify-self:start}.footer-grid{grid-template-columns:1fr}.footer nav{flex-wrap:wrap}.mobile-bar{position:fixed;z-index:100;left:0;right:0;bottom:0;background:rgba(33,25,39,.96);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:10px 14px calc(10px + env(safe-area-inset-bottom));backdrop-filter:blur(12px)}.mobile-bar span{display:flex;flex-direction:column}.mobile-bar b{font-size:12px}.mobile-bar small{font-size:9px;color:#958a9c;margin-top:3px}.mobile-bar a{background:var(--sage);color:var(--purple2);padding:10px 16px;border-radius:6px;font-size:12px;font-weight:900}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}