:root{--ink:#1d3552;--muted:#526a82;--mint:#22c3a6;--mint-soft:#ddf8f2;--sky:#f3f8fc;--line:#dde8f3;--white:#fff;--radius:20px;--space:80px;--shadow:0 20px 65px rgba(29,53,82,.07)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--white);color:var(--ink);font-family:"PingFang SC","Noto Sans SC",system-ui,sans-serif;font-size:16px;line-height:1.7}a{color:inherit;text-decoration:none}button,input{font:inherit}a:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:5px}img{max-width:100%;height:auto;display:block}p{color:var(--muted);margin:16px 0}h1,h2,h3{line-height:1.3;margin:0;font-weight:650}h1{font-size:56px}h2{font-size:36px}h3{font-size:21px}small{font-size:13px;color:var(--muted)}.wrap{width:calc(100% - 64px);max-width:1120px;margin-inline:auto}.section{padding-block:var(--space)}.tint{background:var(--sky)}.eyebrow{font-size:14px;color:var(--muted);margin:0 0 22px;display:flex;align-items:center;gap:12px}.eyebrow:before{content:"";display:block;width:22px;height:1px;background:var(--mint)}.section-intro{max-width:680px;margin-bottom:42px}.section-intro>p{max-width:600px}.button{display:inline-flex;min-height:48px;align-items:center;justify-content:center;padding:12px 26px;background:var(--mint);color:var(--ink);border-radius:12px;font-weight:650;transition:background .16s}.button:hover{background:#41d2b7}.text-link{display:inline-flex;min-height:44px;align-items:center;border-bottom:1px solid var(--line);font-weight:550}.actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap}.skip-link{position:absolute;top:-100px;left:20px;z-index:20;background:var(--white);padding:12px}.skip-link:focus{top:10px}.site-header{background:var(--white);border-bottom:1px solid var(--line)}.nav{display:flex;align-items:center;gap:32px;min-height:80px}.wordmark{font-size:24px;font-weight:750;display:inline-flex;align-items:center;gap:12px}.brand-scales{display:flex;gap:3px}.brand-scales i{width:8px;height:11px;background:var(--mint);border-radius:7px 1px 7px 7px;transform:rotate(15deg)}.brand-scales i:nth-child(2){opacity:.55}.brand-scales i:nth-child(3){opacity:.25}.nav>nav{display:flex;gap:32px;margin-left:auto;font-size:14px}.nav a{padding-block:12px}.nav a:hover{color:#087c6a}.login{font-size:14px;border:1px solid var(--line);border-radius:9px;padding:8px 14px!important;white-space:nowrap}.mobile-nav{display:none}.hero{padding:86px 0 88px;background:linear-gradient(135deg,#fff 50%,#f3f8fc)}.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}.hero-copy>p:not(.eyebrow){max-width:440px;font-size:17px;margin:26px 0 32px}.hero-copy>small{display:block;margin-top:22px}.hero h1 span{display:block}.hero-art{position:relative;padding:32px;border-radius:24px;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow)}.art-label{display:flex;justify-content:space-between;gap:16px;font-size:13px;color:var(--muted);padding-bottom:22px;border-bottom:1px solid var(--line)}.track-path{margin:28px 0 0 9px;padding-left:28px;border-left:1px solid var(--mint)}.path-node{position:relative;margin-bottom:26px}.path-node:last-child{margin-bottom:0}.path-node:before{content:"";position:absolute;left:-34px;top:9px;width:11px;height:11px;border:2px solid var(--mint);border-radius:50%;background:var(--white)}.path-node small{display:block}.path-node>p{margin:4px 0;font-size:14px}.path-node.current{padding:20px;background:var(--sky);border-radius:12px}.path-node.current:before{left:-34px;top:27px;background:var(--mint);box-shadow:0 0 0 5px var(--mint-soft)}.path-node strong{display:block;font-size:18px}.document{margin-top:18px;border-top:1px solid var(--line);padding-top:12px;display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)}.document i{width:28px;height:34px;border:1px solid var(--line);border-radius:4px;background:repeating-linear-gradient(0deg,#fff 0 5px,#dde8f3 6px 7px);border-inline-width:6px}.philosophy{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.philosophy h2{font-size:38px}.philosophy blockquote{margin:28px 0 0;border-left:2px solid var(--mint);padding-left:22px;font-size:21px;font-weight:550;line-height:1.65}.scales{display:flex;gap:8px;margin:30px 0 0;align-items:center}.scales i{display:block;width:44px;height:56px;border:1px solid #9bddcf;background:#effbf8;border-radius:40px 4px 40px 40px;transform:rotate(22deg)}.scales i:nth-child(2){width:32px;height:40px;opacity:.65}.scales i:nth-child(3){width:22px;height:28px;opacity:.4}.loop{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid #a5d8d0;padding-top:32px}.loop article{position:relative;padding:0 24px}.loop article:first-child{padding-left:0}.loop article:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--mint);position:absolute;top:-37px;left:24px}.loop article:first-child:before{left:0}.loop span{display:block;font-size:12px;margin-bottom:16px;color:var(--muted)}.loop p{font-size:15px}.ai-support{border-top:1px solid var(--line);margin-top:30px;padding-top:22px;display:flex;gap:24px;align-items:center;flex-wrap:wrap;font-size:14px}.ai-support p{margin:0}.capabilities{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:56px}.capabilities article{border-top:1px solid var(--line);padding-top:24px}.capabilities p{font-size:15px}.roles-grid{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:40px;align-items:center;text-align:center}.role{padding:24px}.role img{height:140px;width:140px;object-fit:contain;margin:0 auto 18px}.role p{font-size:15px;margin:10px 0}.role-person{padding:42px 24px;border:1px solid #92dace;border-radius:50%;aspect-ratio:1;display:flex;flex-direction:column;justify-content:center}.role-person h3{font-size:36px}.person-symbol{display:block;width:25px;height:25px;background:var(--ink);border-radius:50%;margin:0 auto 28px;position:relative}.person-symbol:after{content:"";position:absolute;width:45px;height:20px;border-radius:24px 24px 5px 5px;background:var(--ink);top:29px;left:-10px}.guardian-symbol{display:block;width:54px;height:64px;border:2px solid #91d6ca;border-radius:12px 12px 32px 32px;margin:0 auto 24px}.role-note{text-align:center;font-size:14px;margin:32px 0 0}.download-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.download-item{padding:32px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column}.download-head{display:flex;align-items:center;gap:14px}.download-icon{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--mint-soft);border-radius:12px;color:#087c6a}.download-icon svg{width:22px;height:22px}.download-item h3{font-size:22px}.download-item p{font-size:15px}.download-qr{display:flex;align-items:center;gap:22px;margin-top:auto;padding:18px;background:#f2f8f5;border:1px solid #d9ebe4;border-radius:14px}.download-qr img{width:148px;height:148px;flex:none;object-fit:contain;background:var(--white);border-radius:10px}.download-qr-copy{display:grid;gap:10px}.download-qr-copy p{margin:0;font-size:14px}.download-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:24px}.download-actions .button{font-size:14px;gap:8px}.download-actions .button svg{width:15px;height:15px}.button-plain{background:var(--white);border:1px solid #d7e5e0;color:var(--ink)}.button-plain:hover{background:#f2f8f5}.download-command{display:flex;align-items:center;gap:12px;margin-top:auto;padding:14px 16px;background:#eef3f1;border-radius:12px}.download-command code{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.6;color:#102c38;overflow-wrap:anywhere}.download-copy{flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--white);border:1px solid #d7e5e0;border-radius:10px;color:#087c6a;cursor:pointer;transition:border-color .18s,background .18s}.download-copy:hover{border-color:#9bddcf;background:#eefbf6}.download-copy svg{width:18px;height:18px}.download-copy .copy-check{display:none}.download-copy.is-copied{border-color:#22c3a6}.download-copy.is-copied .copy-icon{display:none}.download-copy.is-copied .copy-check{display:block}.site-footer{background:var(--ink);color:var(--white);padding:42px 0 24px}.footer-top{display:flex;justify-content:space-between;gap:30px}.site-footer p{color:#c7d7e6;font-size:14px}.site-footer nav{display:flex;align-items:center;flex-wrap:wrap;gap:24px;font-size:14px}.site-footer a{min-height:44px;display:inline-flex;align-items:center}.footer-bottom{border-top:1px solid #42566e;margin-top:32px;padding-top:18px;display:flex;justify-content:space-between;color:#c7d7e6;font-size:12px}.reading-hero{padding:70px 0 48px;max-width:820px}.reading-hero h1{font-size:42px}.reading-hero p{font-size:18px}.manual-layout{display:grid;grid-template-columns:200px 1fr;gap:64px;padding-bottom:80px}.toc{position:sticky;top:24px;align-self:start;display:grid;gap:4px;font-size:14px}.toc a{padding:9px 0}.toc a:hover{color:#087c6a}.manual section{padding:0 0 44px;margin-bottom:36px;border-bottom:1px solid var(--line);scroll-margin-top:32px}.manual h2{font-size:28px;margin-bottom:20px}.manual h3{margin-top:25px}.manual ol,.manual ul{padding-left:24px;color:var(--muted)}.manual li{margin:12px 0}.manual details{border-top:1px solid var(--line);padding:16px 0}.manual summary{cursor:pointer;font-weight:600;min-height:32px}.manual details p{margin-bottom:0}.note{background:var(--sky);padding:20px;border-radius:12px;font-size:15px}.contact-options{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:80px}.contact-options article{padding:30px;border:1px solid var(--line);border-radius:var(--radius)}code{font-size:13px;overflow-wrap:anywhere}.code-block{display:block;padding:20px;background:var(--sky);border:1px solid var(--line);border-radius:12px}
@media(max-width:1000px){.hero-grid{gap:32px}h1{font-size:46px}.philosophy{gap:40px}.roles-grid{gap:12px}.role{padding:12px}.role-person{padding:32px 16px}.download-item{padding:28px}.download-qr{flex-direction:column;align-items:flex-start;gap:14px}.manual-layout{grid-template-columns:160px 1fr;gap:32px}}
@media(max-width:700px){:root{--space:56px}.wrap{width:calc(100% - 40px)}.nav{min-height:68px;gap:16px;justify-content:space-between}.nav>nav,.nav>.login{display:none}.mobile-nav{display:block}.mobile-nav summary{list-style:none;width:44px;height:44px;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:6px;cursor:pointer}.mobile-nav summary::-webkit-details-marker{display:none}.mobile-nav summary span{width:22px;height:2px;background:var(--ink)}.mobile-nav[open] nav{position:absolute;left:0;right:0;top:68px;display:grid;gap:6px;padding:24px;background:var(--white);border-bottom:1px solid var(--line);z-index:10}.hero{padding:48px 0 56px}.hero-grid{grid-template-columns:1fr;gap:38px}h1{font-size:36px}h2,.philosophy h2{font-size:28px}h3{font-size:20px}.hero-copy>p:not(.eyebrow){font-size:16px;margin:22px 0}.hero .actions{gap:18px}.hero-art{padding:24px}.philosophy{grid-template-columns:1fr;gap:24px}.philosophy blockquote{font-size:20px}.loop{grid-template-columns:1fr;border-top:0;padding-top:0;border-left:1px solid #a5d8d0;margin-left:6px;gap:24px}.loop article,.loop article:first-child{padding:0 0 0 26px}.loop article:before,.loop article:first-child:before{top:8px;left:-5px}.loop span{margin-bottom:6px}.loop p{margin:8px 0}.ai-support{display:block}.capabilities{grid-template-columns:1fr;gap:20px;margin-top:36px}.roles-grid{grid-template-columns:1fr;gap:24px}.role-person{grid-row:1;border-radius:var(--radius);aspect-ratio:auto;padding:30px}.person-symbol{margin-bottom:30px}.role{padding:16px 0}.role img{width:120px;height:120px}.role p{max-width:300px;margin-inline:auto}.guardian-symbol{width:34px;height:40px}.role-note{text-align:left}.download-grid{grid-template-columns:1fr}.download-item{padding:22px}.download-qr img{width:120px;height:120px}.footer-top{display:block}.site-footer nav{gap:20px}.footer-bottom{gap:12px;flex-wrap:wrap}.reading-hero{padding:48px 0 32px}.reading-hero h1{font-size:32px}.manual-layout{grid-template-columns:1fr;gap:28px}.toc{position:static;display:flex;flex-wrap:wrap;gap:4px 20px;border-bottom:1px solid var(--line);padding-bottom:20px}.manual h2{font-size:25px}.contact-options{grid-template-columns:1fr;gap:20px}.contact-options article{padding:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Brand-led navigation and a deliberate, user-controlled example switcher. */
.site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(16px)}
.nav{gap:24px}.wordmark{gap:10px;white-space:nowrap}.wordmark img{width:40px;height:40px;object-fit:contain;border-radius:10px}.nav>nav{gap:24px}.nav .header-download{padding:10px 16px;white-space:nowrap;font-size:14px;min-height:44px}.nav .login{border:0;padding:10px 0!important}.nav a{transition:color .18s,background .18s,transform .18s}.button:hover{transform:translateY(-2px)}.button:active{transform:translateY(0)}
section[id]{scroll-margin-top:100px}h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}.text-link{transition:color .18s,border-color .18s}.text-link:hover{color:#087c6a;border-color:currentColor}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.example-switcher{min-width:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:28px;gap:0;box-shadow:0 18px 60px rgba(30,55,82,.07);border-radius:18px}
.example-switcher .art-label{grid-column:1/-1;padding-bottom:18px;margin-bottom:8px;font-size:12px}
.example-tab{cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;font-weight:600;min-height:48px;border-bottom:2px solid transparent;color:var(--muted);transition:color .2s,border-color .2s,background .2s;padding:8px 3px}
.example-tab:hover{background:var(--sky);color:var(--ink)}
.example-radio:checked+label{color:var(--ink);border-color:var(--mint)}
.example-radio:focus-visible+label{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.example-panels{grid-column:1/-1;display:grid;min-width:0}
.example-panel{grid-area:1/1;visibility:hidden;min-width:0;pointer-events:none;opacity:0}
#example-0:checked~.example-panels .panel-0,#example-1:checked~.example-panels .panel-1,#example-2:checked~.example-panels .panel-2{visibility:visible;pointer-events:auto;opacity:1;animation:example-in .28s ease-out}
.example-panel h2{font-size:24px;line-height:1.35;margin:24px 0 0;letter-spacing:-.035em}.example-panel .track-path{margin-top:20px;padding-left:22px}.example-panel .path-node:before{left:-28px}.example-panel .path-node.current:before{left:-28px}.example-panel .path-node{margin-bottom:18px}.example-panel .path-node.current{padding:16px 18px;background:var(--sky);border-radius:8px}.example-panel .document{margin-top:14px;padding-top:12px;font-size:11px}.document b{display:block;font-weight:500;color:var(--ink);font-size:13px;margin-top:3px}.example-note{grid-column:1/-1;font-size:11px;margin:22px 0 0;padding-top:14px;border-top:1px solid var(--line);line-height:1.65}
@keyframes example-in{from{opacity:.2;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.nav{gap:16px}.nav>nav{gap:16px}.nav>.login{display:none}}
@media(min-width:701px) and (max-width:1100px){.mobile-nav{display:block}.mobile-nav summary{cursor:pointer;list-style:none;padding:10px;font-size:0}.mobile-nav summary{width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px}.mobile-nav summary span{width:22px;height:2px;background:var(--ink)}.mobile-nav[open] nav{position:absolute;right:20px;top:70px;display:grid;padding:24px;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}}
@media(max-width:700px){.nav{gap:10px}.nav .header-download{margin-left:auto;font-size:12px;padding:8px 12px}.wordmark{font-size:21px;gap:7px}.wordmark img{width:34px;height:34px}.hero-art{padding:20px}.example-tab{font-size:12px}.example-panel h2{font-size:23px}.example-panel .path-node strong{font-size:17px}.hero{padding-top:38px}.mobile-nav[open] nav{box-shadow:0 18px 35px rgba(30,55,82,.08)}}
@media(prefers-reduced-motion:reduce){.example-panel{animation:none!important}.button:hover{transform:none}}

.example-subtitle{font-size:13px;margin:10px 0 0}.example-features{font-size:11px;margin:22px 0 0;color:var(--muted);letter-spacing:.015em}.example-panel h2{max-width:100%}

/* Contact page: group QR cards, official channels (loaded from the public API) and contact options. */
.migration-hint{margin:0 0 56px;padding:18px 22px;background:#fdf7e8;border:1px solid #f0e3bd;border-radius:12px;font-size:15px;line-height:1.75;color:#6d5a26}
.migration-hint strong{color:#a16207;font-weight:600}
.group-section{margin-bottom:56px}
.channels-section,.contact-section{margin-bottom:56px}
.channels-section h2,.contact-section h2{font-size:28px;margin-bottom:24px}
.channel-list{display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin:0;padding:0}
.channel-list a{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:8px 20px;background:var(--white);border:1px solid var(--line);border-radius:999px;font-size:15px;font-weight:550;transition:border-color .18s,color .18s}
.channel-list a:hover{border-color:#9bddcf;color:#087c6a}
.channel-list img{width:28px;height:28px;border-radius:8px;object-fit:contain}
.contact-section .contact-options{margin-bottom:0}
@media(max-width:700px){.migration-hint{margin-bottom:40px}.group-section,.channels-section,.contact-section{margin-bottom:40px}.channels-section h2,.contact-section h2{font-size:24px}}

/* Chrome extension guide: numbered local-install steps with product screenshots. */
ol.ext-steps{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:44px;color:var(--ink)}ol.ext-steps>li{margin:0}ol.ext-steps h3{font-size:19px;margin:0 0 10px}ol.ext-steps p{margin:0;font-size:15px;line-height:1.9}.step-shot{display:grid;gap:12px;margin:18px 0 0}.step-shot img{width:100%;max-width:600px;border:1px solid #d7e5e0;border-radius:12px;background:var(--white)}
@media(max-width:700px){ol.ext-steps{gap:32px}ol.ext-steps h3{font-size:17px}}

/* Contact page: user group QR card — WeCom customer group (long-lived QR). */
.join-groups{display:grid;grid-template-columns:minmax(0,420px);justify-content:center;gap:24px;margin-top:26px}.join-card{position:relative;overflow:hidden;display:grid;justify-items:center;align-content:start;gap:14px;margin:0;padding:32px 24px 26px;background:linear-gradient(165deg,#f2faf7 0%,#fff 64%);border:1px solid #d9ebe4;border-radius:18px;text-align:center;box-shadow:0 14px 40px rgba(31,64,104,.06)}.join-card:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--mint),#8be0ba)}.join-label{padding:6px 18px;background:#effbf8;border:1px solid #9bddcf;border-radius:999px;font-size:14px;font-weight:600;color:#087c6a}.join-card img{height:236px;width:auto;max-width:100%;object-fit:contain;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:10px;box-shadow:0 10px 26px rgba(31,64,104,.08)}.join-card figcaption{font-size:12px;color:var(--muted)}.join-card .join-fallback{display:none;margin:0;font-size:13px;line-height:1.7;color:var(--muted)}.join-card.is-missing img,.join-card.is-missing figcaption{display:none}.join-card.is-missing .join-fallback{display:block}
@media(max-width:700px){.join-groups{grid-template-columns:1fr}.join-card img{height:220px}}

/* Chrome extension release: version line filled in by site-assets/extension-release.js from the OSS manifest. */
.download-item .extension-release-meta,.reading-hero .extension-release-meta{margin:14px 0 0;font-size:13px;color:var(--muted)}