:root{--paper:#f8f6f0;--white:#fffefa;--ink:#302e39;--muted:#6e7075;--line:#d9ddd8;--teal:#176f70;--mint:#d8e9e5;--orange:#ef955e;--grape:#44404d;--max:1220px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,'Microsoft YaHei','PingFang SC',sans-serif;line-height:1.72}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{font:inherit}p{margin:.7em 0 1.2em}h1,h2,h3{line-height:1.25;letter-spacing:-.035em;margin:0 0 .65em}h1{font-size:clamp(2.8rem,6vw,5.9rem)}h2{font-size:clamp(2rem,3.8vw,3.7rem)}h3{font-size:clamp(1.25rem,2vw,1.7rem)}.wrap{width:min(calc(100% - 48px),var(--max));margin-inline:auto}.eyebrow,.kicker{font-size:.74rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--teal)}.lead{font-size:clamp(1.06rem,1.4vw,1.25rem);color:#555962}.muted{color:var(--muted)}.small{font-size:.88rem}.section{padding:clamp(70px,8vw,130px) 0}.section-head{max-width:740px;margin-bottom:42px}.text-link{display:inline-flex;align-items:center;gap:8px;border-bottom:1px solid currentColor;padding-bottom:3px;color:var(--teal);font-weight:700}.text-link:after{content:'↗';font-size:1.1em}.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:12px 23px;border-radius:4px;font-weight:700;transition:transform .2s,background .2s}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--teal);color:white}.btn-primary:hover{background:#0d5a5a}.btn-outline{border:1px solid var(--ink)}.btn-light{background:var(--white);color:var(--ink)}.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.site-header{position:relative;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}.header-in{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:10px;min-width:0;font-weight:700;font-size:1.1rem;letter-spacing:-.04em}.brand img{width:39px;height:39px;flex:none}.desktop-nav{display:flex;align-items:center;gap:clamp(13px,2vw,30px);font-size:.88rem;font-weight:600}.desktop-nav a{white-space:nowrap}.desktop-nav a:hover,.desktop-nav a[aria-current=page]{color:var(--teal)}.nav-toggle{display:none;background:none;border:0;padding:8px;font-size:1.4rem}.mobile-nav{display:none}
.hero{padding:68px 0 0;overflow:hidden}.hero-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,.7fr);gap:7vw;align-items:end}.hero h1{max-width:850px;margin-top:14px;margin-bottom:24px}.hero-copy{max-width:700px}.hero-copy p{max-width:650px}.hero-index{border-left:1px solid var(--line);padding-left:35px;margin-bottom:30px}.hero-index a{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:11px 0;font-size:.78rem;font-weight:700;letter-spacing:.18em}.hero-index a span{font-weight:400;letter-spacing:0;color:var(--muted);font-size:.82rem}.hero-index a:hover{color:var(--teal)}.hero-art{display:grid;grid-template-columns:1.32fr .63fr .9fr;gap:12px;align-items:end;margin-top:70px}.hero-art figure{margin:0;position:relative;overflow:hidden;background:var(--mint)}.hero-art figure:first-child{height:330px;border-radius:0 0 70px 0}.hero-art figure:nth-child(2){height:380px;border-radius:90px 0 0 0;transform:translateY(35px)}.hero-art figure:nth-child(3){height:265px;border-radius:0 90px 0 0;transform:translateY(-25px)}.hero-art img{width:100%;height:100%;object-fit:cover}.hero-art figure:nth-child(2) img{object-position:center}.hero-art figcaption{position:absolute;bottom:12px;left:15px;font-size:.67rem;letter-spacing:.13em;font-weight:700;color:white;text-shadow:0 1px 8px #222}
.chooser{background:#e9efea;margin-top:80px;padding:75px 0}.chooser-top{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:34px}.chooser-top h2{max-width:680px;margin:0}.chooser-grid{display:grid;grid-template-columns:1fr 80px 1.25fr;border-top:1px solid #b9c9c5;border-bottom:1px solid #b9c9c5;min-height:270px}.choose-side{padding:26px 0}.choose-side h3{font-size:1rem;margin-bottom:18px}.choice-buttons{display:flex;flex-direction:column;gap:6px}.choice-buttons button{display:flex;justify-content:space-between;width:100%;text-align:left;background:transparent;color:var(--ink);border:0;border-bottom:1px solid #c9d5d0;padding:10px 4px;cursor:pointer}.choice-buttons button.active{color:var(--teal);font-weight:700}.path-line{position:relative;display:grid;place-items:center}.path-line:before{content:'';position:absolute;top:0;bottom:0;left:50%;border-left:1px solid #a8c3bc}.path-line span{position:relative;background:#e9efea;border:1px solid #a8c3bc;border-radius:50%;width:29px;height:29px;display:grid;place-items:center;color:var(--teal)}.choice-result{padding:25px 0 0;border-top:1px solid #b9c9c5;margin-top:26px;display:flex;align-items:center;justify-content:space-between;gap:22px}.choice-result strong{display:block;font-size:1.2rem}.choice-result p{margin:3px 0;color:var(--muted)}
.platform-band{background:#fffdf7}.platform-band .band-top{max-width:790px}.platform-band .band-bottom{display:grid;grid-template-columns:1.15fr .8fr;gap:5vw;align-items:end;margin-top:34px}.platform-band img{width:100%;height:auto;border-radius:0 0 100px 0}.line-list{border-top:1px solid var(--line)}.line-list p{border-bottom:1px solid var(--line);padding:17px 0;margin:0}.chapter-no{font-size:.73rem;letter-spacing:.18em;color:var(--teal);font-weight:700;margin-bottom:13px}.iphone-layout{display:grid;grid-template-columns:minmax(250px,.75fr) 1fr;gap:clamp(40px,8vw,130px);align-items:center}.iphone-layout img{max-height:620px;width:100%;object-fit:cover;border-radius:160px 160px 8px 8px}.iphone-copy{max-width:600px}.iphone-copy .rule{border-top:1px solid var(--line);padding-top:24px;margin-top:32px}
.multi-figure{position:relative;width:min(calc(100% - 48px),1080px);margin:auto}.multi-figure img{width:100%;border-radius:8px}.multi-caption{display:grid;grid-template-columns:1fr 1fr;gap:6vw;max-width:1080px;margin:24px auto 0}.multi-caption p{margin:0}.route-section{background:var(--grape);color:#fff}.route-section .eyebrow{color:#a9d3c9}.route-section .section-head{margin-bottom:50px}.route-line{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #76717d;min-height:220px;align-items:center;gap:6vw}.route-line:nth-child(even) .route-copy{order:2}.route-line:nth-child(even) .route-visual{order:1}.route-copy{padding:36px 0}.route-copy .num{color:#a9d3c9;font-size:.75rem;letter-spacing:.17em}.route-copy h3{margin:8px 0}.route-copy p{color:#d3d0d4;max-width:570px}.route-visual{height:138px;display:grid;place-items:center;position:relative}.route-visual:before{content:'';position:absolute;width:72%;height:1px;background:#78b5a8;transform:rotate(-10deg)}.route-visual i{position:absolute;border:1px solid #a9d3c9;border-radius:50%;background:var(--grape);width:20px;height:20px}.route-visual i:first-child{left:13%;top:58%}.route-visual i:nth-child(2){left:49%;top:46%;background:var(--orange);border:0}.route-visual i:nth-child(3){right:13%;top:32%}.route-summary{display:grid;grid-template-columns:1fr 1fr;gap:6vw;border-top:1px solid #76717d;padding-top:32px}
.news-section{background:#f3f1eb}.news-head{display:flex;align-items:end;justify-content:space-between;gap:25px}.news-board{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #bfc3bf;border-left:1px solid #bfc3bf}.news-cell{padding:26px;border-right:1px solid #bfc3bf;border-bottom:1px solid #bfc3bf;display:grid;grid-template-columns:40% 1fr;gap:22px;min-width:0}.news-cell img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:2px}.news-cell .index{color:var(--teal);font-size:.73rem;letter-spacing:.16em;font-weight:700}.news-cell h3{font-size:1.16rem;margin:9px 0}.news-cell p{font-size:.89rem;color:var(--muted);margin:0 0 14px}.news-cell a:hover h3{color:var(--teal)}
.split-chapters{display:grid;grid-template-columns:1fr 1fr;gap:7vw}.android-chapter{padding-right:4vw;border-right:1px solid var(--line)}.android-bottom{display:grid;grid-template-columns:1fr .7fr;gap:18px;align-items:end;margin-top:30px}.android-bottom img{height:450px;width:100%;object-fit:cover;border-radius:110px 110px 4px 4px}.check-list{list-style:none;padding:0;margin:0}.check-list li{border-top:1px solid var(--line);padding:12px 0}.check-list li:before{content:'↗ ';color:var(--teal)}.mac-chapter img{width:100%;aspect-ratio:16/9;object-fit:cover;margin:30px 0}.version-strip{border-top:1px solid var(--line);padding-top:17px;color:var(--muted);font-size:.88rem}.version-section{background:#dcebe6}.version-layout{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:start}.version-columns{display:grid;grid-template-columns:1fr 1fr;gap:30px}.version-columns div{border-top:2px solid var(--teal);padding-top:18px}
.faq-index{display:grid;grid-template-columns:1fr 1fr;gap:0 45px;border-top:1px solid var(--line);margin:30px 0 45px}.faq-index a{display:flex;gap:22px;border-bottom:1px solid var(--line);padding:13px 0}.faq-index b,.faq-answer b{color:var(--teal);font-size:.74rem;letter-spacing:.12em}.faq-index a:hover{color:var(--teal)}.faq-answers{display:grid;grid-template-columns:1fr 1fr;gap:0 45px}.faq-answer{border-top:1px solid var(--line);padding:22px 0 28px;scroll-margin-top:20px}.faq-answer h3{font-size:1.08rem;margin:9px 0}.faq-answer p{color:var(--muted);font-size:.94rem;margin:0}.text-rail{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr)}.text-rail a{padding:22px 20px;border-right:1px solid var(--line);font-weight:700}.text-rail a:last-child{border:0}.text-rail a span{display:block;font-size:.72rem;letter-spacing:.15em;color:var(--teal)}.text-rail a:hover{background:#e9efea}.closing{background:var(--teal);color:white}.closing .wrap{display:flex;align-items:end;justify-content:space-between;gap:40px}.closing h2{max-width:750px;margin:10px 0}.closing p{color:#d3e8e4;max-width:660px}
.site-footer{background:#282b31;color:#d9dbdc;padding:52px 0 34px;font-size:.85rem}.footer-top{display:flex;justify-content:space-between;gap:35px;padding-bottom:35px;border-bottom:1px solid #53565a}.footer-links{display:flex;flex-wrap:wrap;gap:10px 26px}.footer-links a:hover{color:white}.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 35px;padding-top:23px;color:#b3b8bb}.footer-bottom p{margin:0}.site-footer a:hover{text-decoration:underline}
.page-hero{padding:75px 0 45px;border-bottom:1px solid var(--line)}.page-hero h1{font-size:clamp(2.5rem,5vw,4.8rem);max-width:930px}.page-hero p{max-width:760px;color:var(--muted)}.breadcrumb{font-size:.8rem;color:var(--muted);margin-bottom:28px}.breadcrumb a:hover{color:var(--teal)}.doc-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:6vw;align-items:start}.doc-sidebar{position:sticky;top:24px;border-top:2px solid var(--teal)}.doc-sidebar a{display:block;border-bottom:1px solid var(--line);padding:14px 0;font-size:.8rem;font-weight:700;letter-spacing:.1em}.doc-sidebar a:hover{color:var(--teal)}.doc-section{padding:0 0 65px;margin-bottom:65px;border-bottom:1px solid var(--line);scroll-margin-top:30px}.doc-section:last-child{border:0}.doc-section h2{margin-bottom:18px}.doc-section h3{font-size:1.15rem;margin-top:26px}.doc-section img{width:100%;max-height:390px;object-fit:cover;margin:30px 0}.doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 35px}.doc-grid div{border-top:1px solid var(--line);padding-top:16px}.related-band{padding:38px 0;border-top:1px solid var(--line)}.related-links{display:flex;gap:15px 28px;flex-wrap:wrap}.resource-links{display:flex;flex-wrap:wrap;gap:10px 20px;border-top:1px solid var(--line);padding-top:18px}.resource-links a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.article-list{display:grid;grid-template-columns:repeat(2,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line);margin:40px 0 0}.article-list article{padding:24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.article-list img{width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:18px}.article-list h2{font-size:1.35rem}.article-list p{color:var(--muted)}.article-main{max-width:850px;margin:0 auto;padding:58px 0 95px}.article-main .article-image{width:100%;aspect-ratio:3/2;object-fit:cover;margin:25px 0 43px}.article-main h2{font-size:1.75rem;margin:48px 0 14px}.article-main h3{font-size:1.18rem;margin-top:28px}.article-main p,.article-main li{color:#5b5c62}.article-main li{margin:8px 0}.article-nav{display:grid;grid-template-columns:1fr 1fr;gap:25px;border-top:1px solid var(--line);margin-top:50px;padding-top:22px}.article-nav a{color:var(--teal);font-weight:700}.article-nav a:last-child{text-align:right}.plain-page{max-width:850px;padding:60px 0 110px}.plain-page h2{font-size:1.7rem;margin-top:45px}.plain-page p,.plain-page li{color:#5b5c62}.tutorial-flow{counter-reset:flow;max-width:900px}.tutorial-flow section{border-top:1px solid var(--line);padding:24px 0 30px;display:grid;grid-template-columns:100px 1fr;gap:20px}.tutorial-flow section:before{counter-increment:flow;content:'0' counter(flow);color:var(--teal);font-size:1.7rem;font-weight:700}.tutorial-flow h2{font-size:1.55rem}
@media(max-width:980px){.desktop-nav{gap:12px;font-size:.77rem}.hero-top{gap:30px}.hero-art figure:first-child{height:260px}.hero-art figure:nth-child(2){height:310px}.hero-art figure:nth-child(3){height:220px}.news-cell{grid-template-columns:1fr}.news-cell img{max-height:200px}.split-chapters{gap:4vw}.doc-layout{grid-template-columns:175px 1fr;gap:35px}}
@media(max-width:700px){.wrap{width:min(calc(100% - 32px),var(--max))}.header-in{min-height:65px}.brand{font-size:.92rem}.brand img{width:32px;height:32px}.desktop-nav{display:none}.nav-toggle{display:block}.mobile-nav.open{display:grid;position:absolute;top:64px;left:0;right:0;background:var(--paper);padding:15px 16px 22px;box-shadow:0 15px 20px #25282d16}.mobile-nav a{padding:11px;border-bottom:1px solid var(--line)}.hero{padding-top:45px}.hero-top,.iphone-layout,.platform-band .band-bottom,.version-layout,.split-chapters,.multi-caption,.route-line,.route-summary,.faq-answers{grid-template-columns:1fr}.hero-index{border-left:0;border-top:1px solid var(--line);padding:12px 0 0;margin:20px 0 0}.hero-art{display:flex;flex-direction:column;gap:12px;margin-top:35px}.hero-art figure,.hero-art figure:first-child,.hero-art figure:nth-child(2),.hero-art figure:nth-child(3){width:100%;height:auto;transform:none;border-radius:6px}.hero-art figure:first-child img{aspect-ratio:16/9}.hero-art figure:nth-child(2){width:68%;align-self:flex-end}.hero-art figure:nth-child(2) img{aspect-ratio:3/4}.hero-art figure:nth-child(3){width:78%}.hero-art figure:nth-child(3) img{aspect-ratio:1/1}.chooser{margin-top:50px;padding:65px 0}.chooser-top,.news-head,.choice-result,.closing .wrap{display:block}.chooser-grid{grid-template-columns:1fr 30px 1fr}.choice-result .text-link{margin-top:14px}.iphone-layout img{max-height:470px;width:auto;margin:auto}.iphone-copy{max-width:none}.route-line:nth-child(even) .route-copy,.route-line:nth-child(even) .route-visual{order:initial}.route-line{gap:0}.route-visual{height:95px}.route-summary{gap:0}.news-board,.article-list{grid-template-columns:1fr}.news-cell{grid-template-columns:35% 1fr;padding:15px;gap:14px}.news-cell img{max-height:none}.news-cell h3{font-size:1rem}.news-cell p{display:none}.android-chapter{border-right:0;padding-right:0;border-bottom:1px solid var(--line);padding-bottom:45px}.mac-chapter{padding-top:45px}.faq-index{grid-template-columns:1fr}.text-rail{grid-template-columns:1fr}.text-rail a{border-right:0;border-bottom:1px solid var(--line)}.text-rail a:last-child{border-bottom:0}.footer-top{display:block}.footer-links{margin-top:25px}.doc-layout{display:block}.doc-sidebar{position:static;display:flex;overflow:auto;gap:20px;white-space:nowrap;border-bottom:1px solid var(--line);margin-bottom:45px}.doc-sidebar a{border:0}.doc-grid,.article-nav{grid-template-columns:1fr}.article-nav a:last-child{text-align:left}.page-hero{padding:45px 0 30px}.tutorial-flow section{grid-template-columns:50px 1fr}}
@media(max-width:430px){.hero h1{font-size:2.65rem}.news-cell{grid-template-columns:1fr}.news-cell img{aspect-ratio:3/2}.news-cell p{display:block}.android-bottom{grid-template-columns:1fr 1fr}.android-bottom img{height:330px}}

/* Image placement: one consistent image slot per news entry, and a wide Mac chapter. */
.news-cell{display:flex;flex-direction:column;gap:0;min-width:0}
.news-cell>a:first-child{display:block;width:100%;min-width:0}
.news-cell img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:3/2;object-fit:cover}
.news-cell>div{padding-top:18px;min-width:0}
.device-sequence{display:flex;flex-direction:column;gap:64px}
.device-sequence .android-chapter{border-right:0;border-bottom:1px solid var(--line);padding:0 0 64px;max-width:none}
.device-sequence .android-chapter>p{max-width:760px}
.device-sequence .android-bottom{max-width:760px;grid-template-columns:minmax(0,1fr) minmax(180px,.7fr);align-items:center}
.device-sequence .android-bottom img{width:100%;max-width:420px;height:510px;object-fit:cover}
.mac-main{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,85px);align-items:center}
.mac-main img{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;margin:0}
.mac-copy{max-width:470px}
.device-sequence .mac-chapter .version-strip{margin-top:30px}
@media(max-width:700px){.news-cell p{display:block}.device-sequence{gap:45px}.device-sequence .android-chapter{padding-bottom:45px}.mac-main{grid-template-columns:1fr}.mac-copy{max-width:none}.device-sequence .mac-chapter{padding-top:0}}
@media(max-width:430px){.device-sequence .android-bottom{grid-template-columns:minmax(0,1fr) minmax(110px,.7fr)}.device-sequence .android-bottom img{height:340px}}