:root { --ink:#17211d; --muted:#69746c; --paper:#f4f4ef; --line:#dce2d9; --dark:#172219; --lime:#a7ed62; --soft:#e5f6dd; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans","Noto Sans SC",sans-serif; }
a { color:inherit; text-decoration:none; } button { font:inherit; cursor:pointer; }
.shell { width:min(1120px, calc(100% - 48px)); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:10; width:min(1120px, calc(100% - 48px)); height:76px; margin:auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:#f4f4efee; backdrop-filter:blur(8px); }
.brand { display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:-.03em; }.brand-avatar { width:38px; height:38px; border:1px solid #1656a8; border-radius:50%; object-fit:cover; }
/* 主导航：首页 · 作品 · 文章 · 手绘画板[HOT] · 实验室▾ · 关于 —— 互动项目收进「实验室」下拉 */
.site-nav { display:flex; align-items:center; gap:26px; font-size:14px; color:var(--muted); }
.site-nav a, .nav-drop-btn { padding:6px 2px; border:0; border-bottom:2px solid transparent; background:none; color:inherit; font:inherit; transition:color .2s, border-color .2s; }
.site-nav a:hover, .nav-drop:hover .nav-drop-btn, .nav-drop.open .nav-drop-btn { color:var(--ink); }
.site-nav a.active, .nav-drop.current > .nav-drop-btn { color:var(--ink); border-bottom-color:var(--lime); font-weight:500; }
/* 「手绘画板」的推荐标：暖色小药丸，和品牌绿区分开才看得出是「推荐」而不是装饰 */
.nav-hot { display:inline-block; margin-left:6px; padding:1px 5px; border-radius:5px; background:#f2622e; color:#fff; font-size:9.5px; font-weight:700; letter-spacing:.04em; line-height:1.55; vertical-align:2px; }
.site-nav a:hover .nav-hot { background:#d94f1d; }
/* 窄屏让位：6 项 + 徽标要顶到右侧按钮，先收间距、再把徽标做小（保留「推荐」信息） */
@media (min-width:721px) and (max-width:1180px) { .site-nav { gap:18px; } }
@media (min-width:721px) and (max-width:1040px) { .nav-hot { margin-left:4px; padding:1px 4px; font-size:9px; } }
/* 721~860 是最挤的一段（740px 实测只剩 ~17px 余量），再收一档间距把余量做回 ~37px */
@media (min-width:721px) and (max-width:860px) { .site-nav { gap:14px; } }
.nav-drop { position:relative; display:flex; align-items:center; }
.nav-drop-btn { display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.nav-drop-btn:focus-visible, .site-nav a:focus-visible { outline:2px solid var(--lime); outline-offset:3px; border-radius:4px; }
.nav-caret { width:9px; height:6px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .22s; }
.nav-drop-menu { position:absolute; top:calc(100% + 16px); left:50%; min-width:176px; padding:8px; display:flex; flex-direction:column; gap:2px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 20px 44px #1722191f; opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,-8px); transition:opacity .18s, transform .18s, visibility .18s; }
.nav-drop-menu::before { content:""; position:absolute; left:0; right:0; top:-16px; height:16px; }
.nav-drop-menu a { padding:9px 12px; border:0; border-radius:9px; white-space:nowrap; font-size:13.5px; }
.nav-drop-menu a:hover { background:var(--soft); color:var(--ink); }
.nav-drop-menu a.is-current { background:var(--soft); color:#34753d; font-weight:500; }
@media(min-width:721px){ .nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu, .nav-drop.open .nav-drop-menu { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); } .nav-drop:hover .nav-caret, .nav-drop.open .nav-caret { transform:rotate(180deg); } }
.nav-wechat { display:none; }
.header-actions { display:flex; align-items:center; gap:10px; }
.nav-toggle { display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; padding:9px; border:1px solid #ccd5cb; border-radius:9px; background:#fff9; }.nav-toggle span { display:block; height:2px; border-radius:2px; background:var(--ink); transition:transform .2s, opacity .2s; }.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }.nav-toggle.open span:nth-child(2) { opacity:0; }.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
/* 右上两个动作按钮统一为同尺寸胶囊（图标 + 文字对齐） */
.wechat-trigger, .search-trigger { display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px; border:1px solid #ccd5cb; border-radius:10px; background:#fff9; color:var(--ink); font-size:12.5px; line-height:1; white-space:nowrap; transition:border-color .2s, background .2s; }
.wechat-trigger:hover, .search-trigger:hover { border-color:#b9e989; background:#f2fbeb; }
.status-dot { width:7px; height:7px; flex:none; border-radius:50%; background:#76ce69; box-shadow:0 0 0 3px #e0f6da; }
.hero { min-height:480px; display:grid; grid-template-columns:1fr .91fr; align-items:center; gap:74px; padding:74px 0 67px; background:radial-gradient(circle at 87% 24%,#d9f7d2 0,transparent 20%); }.eyebrow { margin:0 0 13px; color:#4c8d54; font:500 11px "DM Mono",monospace; letter-spacing:.09em; }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:18px; font-size:clamp(42px,5.2vw,66px); line-height:1.04; letter-spacing:-.07em; font-weight:500; } h1 em { color:#438e4d; font-style:normal; }.hero-lede { max-width:425px; margin-bottom:27px; color:var(--muted); font-size:15px; line-height:1.8; }
.hero-actions { display:flex; gap:10px; }.button { display:inline-flex; align-items:center; gap:12px; border-radius:9px; padding:12px 16px; font-size:13px; transition:transform .2s, background .2s; }.button:hover { transform:translateY(-2px); }.button-primary { background:var(--lime); font-weight:500; }.button-secondary { border:1px solid #cad4c9; background:#ffffff8c; }
.code-window { overflow:hidden; border:1px solid #35443a; border-radius:15px; background:#1d2920; color:#d9e7dc; box-shadow:11px 13px 0 #d9e6d4; transform:rotate(1.3deg); }.window-bar { display:flex; align-items:center; gap:6px; height:39px; padding:0 14px; background:#e3eae0; border-bottom:1px solid #36483a; }.traffic { width:8px; height:8px; border-radius:50%; }.red{background:#ed8175}.yellow{background:#e7b95c}.green{background:#72c66e}.file-name { margin-left:7px; color:#5d6a5e; font:11px "DM Mono",monospace; }.code { margin:0; padding:19px 20px 17px; min-height:226px; overflow:hidden; font:12px/1.93 "DM Mono",monospace; }.line-no { display:inline-block; width:25px; color:#748c79; }.token-keyword { color:#b9e989; }.token-string { color:#f0c18d; }.token-fn { color:#81c9ec; }.deploy-status { display:flex; justify-content:space-between; margin:0 18px 18px; padding:12px; border-radius:8px; background:#122018; color:#c9d9cd; font-size:11px; }.deploy-status i { display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:var(--lime); }.deploy-status b { color:var(--lime); font-weight:500; }
.section { padding:65px 0 13px; }.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:19px; }.section-heading .eyebrow { margin-bottom:8px; } h2 { margin:0; font-size:25px; letter-spacing:-.05em; font-weight:500; }.text-button { border:0; background:transparent; color:#478a51; font-size:12px; }.text-button span { margin-left:5px; }
.filters { display:flex; gap:7px; margin-bottom:18px; }.filter { border:1px solid #d7dfd4; border-radius:999px; padding:7px 12px; background:transparent; color:var(--muted); font-size:11px; }.filter.active,.filter:hover { border-color:#d5f2be; background:var(--soft); color:#34753d; }
.project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.project-card { padding:12px; border:1px solid var(--line); border-radius:13px; background:#fbfcf8; transition:transform .22s, box-shadow .22s; }.project-card:hover { transform:translateY(-5px); box-shadow:0 11px 24px #17221912; }.project-card.is-hidden { display:none; }.project-art { position:relative; height:176px; overflow:hidden; border-radius:8px; margin-bottom:15px; }.art-canvas { background:linear-gradient(135deg,#e0f5d8,#b7e4af); }.art-dot { position:absolute; border-radius:50%; background:#f9fcf4; }.dot-one { width:91px;height:91px;top:23px;left:36px; }.dot-two { width:43px;height:43px;right:34px;bottom:30px; }.art-line { position:absolute;width:155px;border-top:1px solid #588d5f; transform:rotate(-28deg); top:86px;left:78px; }.art-label { position:absolute; right:20px; top:22px; color:#36763e; font:500 12px/1.1 "DM Mono",monospace; }.art-flow { background:#e8ede5; }.flow-node { position:absolute; display:grid;place-items:center; width:50px;height:50px;border:1px solid #b7c8b7;border-radius:50%; background:#fbfdf9; color:#4b6e51;font-size:11px; }.n1{top:26px;left:28px}.n2{top:65px;left:122px;background:#c9ebbf}.n3{bottom:20px;right:29px}.flow-link{position:absolute;height:1px;background:#79977c;transform-origin:left}.l1{width:60px;left:74px;top:67px;transform:rotate(25deg)}.l2{width:66px;left:164px;top:104px;transform:rotate(46deg)}.art-crm { display:flex;background:#d7e0d8;padding:12px;gap:11px; }.crm-sidebar{width:22%;padding:13px 7px;border-radius:5px;background:#344b39}.crm-sidebar i{display:block;height:5px;margin-bottom:10px;border-radius:3px;background:#8eb790}.crm-panel{flex:1;padding:14px;border-radius:5px;background:#f8faf5;color:#46684c;font-size:10px}.crm-panel b{font-weight:500}.crm-panel span{display:block;height:16px;margin-top:11px;border-radius:3px;background:#e0ecd9}.project-info{display:flex;justify-content:space-between;gap:9px}.project-info h3{margin-bottom:6px;font-size:15px;font-weight:500}.project-info p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}.project-info a{display:grid;place-items:center;flex:none;width:25px;height:25px;border:1px solid #cdd7cb;border-radius:50%;color:#427d49;font-size:13px}.tags{display:flex;gap:7px;margin-top:15px;color:#719175;font:10px "DM Mono",monospace;text-transform:uppercase}.tags span+span::before{content:"·";margin-right:7px}.empty-state{margin:25px 0;color:var(--muted);font-size:13px;text-align:center}
.writing-section { padding-top:85px; }.writing-layout { display:grid; grid-template-columns:1.42fr 1fr; gap:42px; }.article { display:block; padding:17px 0; border-top:1px solid var(--line); }.article:last-child{border-bottom:1px solid var(--line)}.article h3{margin-bottom:7px;font-size:15px;font-weight:500;letter-spacing:-.02em}.article p{margin-bottom:9px;color:var(--muted);font-size:12px}.article span{color:#849087;font-size:10px}.article:hover h3{color:#3d8248}.wechat-card { display:flex;align-items:center;justify-content:space-between;gap:15px; min-height:187px;padding:21px;background:var(--lime);border-radius:13px}.wechat-card p{margin-bottom:7px;color:#3f7042;font:10px "DM Mono",monospace;letter-spacing:.07em}.wechat-card h3{margin:0 0 17px;font-size:14px;line-height:1.45;font-weight:500}.wechat-card button{border:0;background:transparent;padding:0;color:#286a33;font-size:11px}.qr-image{display:block;flex:none;width:89px;height:89px;background:#fff;object-fit:contain}
.about { display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;margin-top:102px;padding:39px 0;border-top:1px solid var(--line); }.about h2{font-size:clamp(31px,4.2vw,48px);line-height:1.08}.about div p{max-width:430px;margin:3px 0 20px;color:var(--muted);font-size:14px;line-height:1.75}.about a{color:#3d8248;font-size:13px}.site-footer{display:flex;flex-direction:column;gap:10px;margin-top:59px;padding:22px 0 28px;border-top:1px solid var(--line);color:#879188;font:10px "DM Mono",monospace}.footer-row{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}.footer-beian{display:flex;flex-wrap:wrap;gap:14px}.footer-beian a{color:#879188;text-decoration:none;transition:color .2s}.footer-beian a:hover{color:#3d8248;text-decoration:underline}
.modal-backdrop{position:fixed;inset:0;z-index:5;display:grid;place-items:center;padding:24px;background:#10181288;opacity:0;pointer-events:none;transition:opacity .2s}.modal-backdrop.open{opacity:1;pointer-events:auto}.modal{position:relative;width:min(390px,100%);padding:35px;border-radius:16px;background:#f8faf4;box-shadow:0 25px 70px #10181255}.modal h2{margin-bottom:10px}.modal p:not(.eyebrow){color:var(--muted);font-size:13px;line-height:1.7}.modal-close{position:absolute;top:12px;right:14px;border:0;background:none;color:var(--muted);font-size:24px}.large-qr{display:block;width:145px;height:145px;margin:22px auto 0;padding:5px;background:#fff;object-fit:contain}
.reveal{transition:opacity .6s ease,transform .6s ease}.js .reveal{opacity:0;transform:translateY(15px)}.js .reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s}@media print{.js .reveal{opacity:1!important;transform:none!important}}
@media(max-width:720px){.shell,.site-header{width:min(100% - 36px,1120px)}.nav-toggle{display:flex}.site-nav{position:absolute;top:76px;left:0;right:0;display:none;flex-direction:column;gap:0;padding:8px 18px 14px;background:#f8faf5;border-bottom:1px solid var(--line);box-shadow:0 14px 24px #17221914}.site-nav.open{display:flex}.site-nav a{padding:12px 4px;border-bottom:1px solid #e6ece3;font-size:15px}.site-nav a:last-child{border-bottom:0}.site-nav a.active{border-bottom-color:#e6ece3;color:var(--ink)}.hero{grid-template-columns:1fr;gap:35px;min-height:auto;padding:52px 0}.code-window{max-width:470px;justify-self:center;transform:none}.project-grid{grid-template-columns:1fr}.project-card{display:grid;grid-template-columns:130px 1fr;column-gap:14px}.project-art{height:125px;margin:0;grid-row:span 2}.art-label{font-size:9px;right:10px;top:14px}.dot-one{width:64px;height:64px;left:19px;top:18px}.dot-two{width:28px;height:28px;right:14px;bottom:18px}.art-line{width:106px;left:48px;top:62px}.n1{top:15px;left:9px}.n2{top:39px;left:47px}.n3{bottom:12px;right:8px}.flow-node{width:39px;height:39px;font-size:9px}.l1{width:27px;left:43px;top:42px}.l2{width:35px;left:81px;top:72px}.writing-layout,.about{grid-template-columns:1fr;gap:25px}.about{margin-top:73px}.site-footer{margin-top:40px}.wechat-card{max-width:450px}.project-info h3{margin-top:2px}.tags{align-self:end;margin-top:6px}.project-card.is-hidden{display:none}}
@media(max-width:430px){.hero{padding-top:43px}.hero-actions{flex-wrap:wrap}.code{font-size:10px;padding:16px}.line-no{width:19px}.deploy-status{font-size:9px}.section{padding-top:52px}.project-card{grid-template-columns:108px 1fr;padding:10px}.project-art{height:110px}.crm-panel{padding:8px}.site-footer{gap:8px;flex-direction:column}.wechat-card{padding:18px}.qr-image{width:75px;height:75px}}

.listing-page{padding:74px 0 64px}.listing-page h1,.case-page h1,.demo-page h1{margin-bottom:17px;font-size:clamp(42px,5.3vw,66px)}.listing-lede{max-width:460px;color:var(--muted);font-size:15px;line-height:1.8}.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:48px}.case-card{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#fbfcf8;transition:transform .2s,box-shadow .2s}.case-card:hover{transform:translateY(-5px);box-shadow:0 16px 30px #17221912}.case-visual{position:relative;height:235px;overflow:hidden;padding:19px}.case-visual.mint{background:#d8f1d4}.case-visual.blue{background:#d7eaf5}.case-visual.orange{background:#f9e2c6}.case-visual.purple{background:#e5dff5}.visual-kicker{position:relative;z-index:1;color:#466d4d;font:10px "DM Mono",monospace}.visual-ui{position:absolute;left:16%;top:26%;width:65%;height:55%;padding:15px;border:1px solid #ffffffa6;border-radius:8px;background:#fcfffbcc;box-shadow:0 12px 25px #3154391c;color:#3b5d41;font-size:11px}.visual-ui b{font-weight:500}.visual-ui i{display:block;height:10px;margin-top:11px;border-radius:3px;background:#ccdfcb}.visual-ui i:nth-of-type(2){width:68%}.visual-ui i:nth-of-type(3){width:82%}.visual-chart{position:absolute;right:8%;bottom:16%;display:flex;align-items:end;gap:5px;height:60px}.visual-chart span{width:13px;border-radius:3px 3px 0 0;background:#4f8b59}.visual-chart span:nth-child(1){height:28px}.visual-chart span:nth-child(2){height:43px}.visual-chart span:nth-child(3){height:35px}.visual-chart span:nth-child(4){height:57px}.blue .visual-chart span{background:#4f89a4}.orange .visual-chart span{background:#bf7840}.purple .visual-chart span{background:#7960aa}.case-card-copy{padding:19px 20px 14px}.case-card-copy p{margin-bottom:8px;color:#69816d;font:10px "DM Mono",monospace}.case-card-copy h2{margin-bottom:8px;font-size:20px}.case-card-copy>span{color:var(--muted);font-size:13px}.case-card-copy .tags{margin-top:15px}.demo-link{display:flex;justify-content:space-between;margin:0 20px;padding:13px 0;border-top:1px solid var(--line);color:#417c4a;font-size:12px}.demo-link b{font-weight:500}.back-link{display:inline-block;margin:42px 0 28px;color:#4d8654;font-size:12px}.case-hero{display:grid;grid-template-columns:1fr .9fr;align-items:center;gap:70px;padding-bottom:78px}.case-hero>div>p:not(.eyebrow),.demo-hero>p:not(.eyebrow){max-width:470px;color:var(--muted);font-size:15px;line-height:1.8}.case-actions{display:flex;gap:10px;margin-top:25px}.case-content{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;padding:65px 0;border-top:1px solid var(--line)}.case-content h2{font-size:31px;line-height:1.2}.feature-list{margin:0;padding:0;list-style:none}.feature-list li{display:flex;gap:20px;padding:17px 0;border-top:1px solid var(--line);font-size:15px}.feature-list li:last-child{border-bottom:1px solid var(--line)}.feature-list li span{color:#75a26e;font:11px "DM Mono",monospace}.impact-box{margin:0 0 68px;padding:37px;border-radius:14px;background:var(--dark);color:#eff8ed}.impact-box .eyebrow{color:#9fda83}.impact-box h2{max-width:700px;margin-bottom:23px;font-size:27px;line-height:1.35}.impact-box a{color:var(--lime);font-size:13px}.demo-page{padding-bottom:70px}.demo-hero{padding:8px 0 62px}.demo-hero>p:not(.eyebrow){margin-bottom:25px}.button:disabled{cursor:not-allowed;opacity:.65}.demo-notice{display:flex;gap:27px;padding:30px;border:1px solid var(--line);border-radius:14px;background:#fbfcf8}.demo-notice>span{color:#4f9056;font:16px "DM Mono",monospace}.demo-notice h2{margin-bottom:9px;font-size:20px}.demo-notice p{margin:0;color:var(--muted);font-size:13px;line-height:1.8}.demo-notice code{padding:2px 4px;border-radius:3px;background:#eaf2e7;color:#4b734e;font:11px "DM Mono",monospace}.demo-roadmap{margin-top:42px}.demo-roadmap>div{display:flex;justify-content:space-between;padding:15px 0;border-top:1px solid var(--line);font-size:14px}.demo-roadmap>div:last-child{border-bottom:1px solid var(--line)}.demo-roadmap b{color:#879187;font:10px "DM Mono",monospace;font-weight:400}
.reference-works{padding-top:90px}.reference-works h1{margin:0 0 22px;font-size:64px;letter-spacing:-.08em}.reference-works .listing-lede{max-width:none;margin:0;color:#6f7c73;font-size:15px}.reference-filters{display:flex;gap:8px;margin:49px 0 47px}.reference-filter{padding:8px 14px;border:1px solid #d6ded5;border-radius:999px;background:#fff;color:#66766a;font-size:12px}.reference-filter.active{border-color:#d9f1c5;background:#e7f9db;color:#528751}.reference-works .case-grid{margin-top:0;gap:18px}.reference-works .case-card{border-color:#d8e1d6;border-radius:13px;box-shadow:none}.reference-works .case-card:hover{transform:none;box-shadow:0 7px 22px #1722190e}.reference-works .case-visual{height:237px}.reference-works .case-card-copy{padding:20px 20px 14px}.reference-works .case-card-copy p{margin-bottom:9px;color:#638066}.reference-works .case-card-copy h2{margin-bottom:13px;font-size:21px}.reference-works .case-card-copy>span{font-size:13px}.reference-works .demo-link{margin:0 20px;padding:14px 0;color:#4c874f}.reference-works .tags{margin-top:15px}
@media(max-width:720px){.case-grid,.case-hero,.case-content{grid-template-columns:1fr}.case-grid{gap:14px}.case-hero{gap:30px;padding-bottom:54px}.case-visual{height:210px}.case-content{gap:30px;padding:48px 0}.case-content h2{font-size:27px}.back-link{margin-top:30px}.impact-box{padding:27px;margin-bottom:47px}.demo-notice{padding:22px}.listing-page{padding-top:52px}}

/* ===== 文章详情页 ===== */
.article-page{padding:0 0 50px;position:relative;overflow-x:hidden}
/* overflow-x:hidden 会让该元素成为滚动容器，导致子级 position:sticky 的目录失效。
   支持 overflow-x:clip 的浏览器改用 clip：不产生滚动容器、仍裁掉横向溢出，sticky 恢复正常 */
@supports (overflow-x:clip){.article-page{overflow-x:clip;overflow-y:visible}}
.article-page::before{content:"";position:absolute;top:-120px;right:-80px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,#d9f7d2 0%,transparent 60%);opacity:.55;pointer-events:none;z-index:0}
.article-page::after{content:"";position:absolute;top:340px;left:-120px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,#e8f4ff 0%,transparent 60%);opacity:.5;pointer-events:none;z-index:0}
.article-page > *{position:relative;z-index:1}
.article-shell{display:grid;grid-template-columns:1fr 240px;gap:56px;align-items:start;max-width:1080px;margin-inline:auto}
.article-main{min-width:0}
.article-hero-shell{position:relative;margin:24px 0 28px;padding:38px 36px 32px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,#ffffff 0%,#fbfdf8 60%,#f1f7e9 100%);box-shadow:0 10px 30px #1722190d;overflow:hidden}
.article-hero-shell::before{content:"";position:absolute;top:0;right:0;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,#c9ebb9 0%,transparent 65%);opacity:.45;transform:translate(40%,-30%);pointer-events:none}
.article-hero .back-link{margin:0 0 22px;font-size:12px;color:#3d8248}
.article-hero .eyebrow{margin-bottom:14px;color:#4c8d54;font:500 11px "DM Mono",monospace;letter-spacing:.09em}
.article-hero .eyebrow .dot{display:inline-block;width:6px;height:6px;margin:0 7px 1px;border-radius:50%;background:#cad4c9;vertical-align:middle}
.article-hero .h1-wrap{margin-bottom:16px}
.article-hero h1{margin:0 0 8px;font-size:clamp(30px,3.8vw,46px);line-height:1.18;letter-spacing:-.04em;font-weight:500;color:#17211d}
.article-hero h1 .accent{background:linear-gradient(120deg,#3d8248 0%,#76ce69 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#3d8248}
.article-hero .article-lede{max-width:640px;margin:14px 0 22px;color:#51605a;font-size:15px;line-height:1.85}
.article-meta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 4px}
.article-meta .meta-item{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid #e0ead8;border-radius:999px;background:#ffffff;color:#51605a;font-size:11px}
.article-meta .meta-item svg{width:12px;height:12px;flex:none;color:#3d8248}
.article-meta .meta-item .meta-label{color:#849087}
.article-meta .meta-item .meta-value{color:#17211d;font-weight:500}
.article-divider{height:1px;margin:8px 0 6px;background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent)}
.article-body{padding:8px 0 40px;font-size:15px;line-height:1.95;color:#26332b}
.article-body .step-num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin-right:10px;border-radius:8px;background:#f1f7e9;color:#3d8248;font:600 14px "DM Mono",monospace;vertical-align:middle}
.article-body h2{display:flex;align-items:center;margin:48px 0 16px;font-size:23px;letter-spacing:-.02em;font-weight:600}
.article-body h2 .h2-mark{display:inline-block;width:5px;height:22px;margin-right:12px;border-radius:3px;background:linear-gradient(180deg,#76ce69,#3d8248);vertical-align:middle}
.article-body h3{margin:28px 0 12px;font-size:17px;font-weight:600;color:#17211d}
.article-body h3::before{content:"·";margin-right:6px;color:#76ce69;font-weight:700}
.article-body p{margin:0 0 16px}
.article-body ul,.article-body ol{margin:0 0 18px;padding-left:22px}
.article-body li{margin-bottom:10px}
.article-body li::marker{color:#76ce69}
.article-body a{color:#3d8248;text-decoration:none;border-bottom:1px solid #b9e989;transition:border-color .2s}
.article-body a:hover{border-bottom-color:#3d8248}
.article-body code{font:12px "DM Mono",monospace;padding:2px 7px;border-radius:5px;background:#eef4ea;color:#2f5a37;border:1px solid #d9e6d2}
.article-body blockquote{margin:22px 0;padding:16px 20px;border-left:4px solid var(--lime);border-radius:0 12px 12px 0;background:linear-gradient(90deg,#eef7e8 0%,#f6fbf0 100%);color:#3f4a42;box-shadow:0 4px 12px #17221908}
.article-body blockquote p{margin:0}
.article-body table{width:100%;margin:20px 0;border-collapse:separate;border-spacing:0;font-size:13px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.article-body th,.article-body td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left}
.article-body tbody tr:last-child td{border-bottom:0}
.article-body th{background:#f1f7e9;font-weight:600;color:#1d331f}
.article-body tbody tr:nth-child(even){background:#fbfdf8}
/* 代码块：mac 窗口版 */
.code-window{margin:20px 0;border:1px solid #35443a;border-radius:14px;background:#1d2920;color:#d9e7dc;box-shadow:0 10px 24px #17221926;overflow:hidden}
.code-bar{display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;background:#243026;border-bottom:1px solid #35443a}
.code-bar .traffic{width:10px;height:10px;border-radius:50%}.code-bar .red{background:#ed8175}.code-bar .yellow{background:#e7b95c}.code-bar .green{background:#72c66e}
.code-bar .code-file{margin-left:10px;color:#8aa498;font:11px "DM Mono",monospace}
.code-bar .copy-btn{margin-left:auto;border:1px solid #3a4b40;border-radius:6px;padding:4px 10px;background:transparent;color:#a5bcad;font:11px "DM Mono",monospace;transition:background .2s,color .2s}
.code-bar .copy-btn:hover{background:#2d3a31;color:#d9e7dc}
.code-bar .copy-btn.copied{color:#76ce69;border-color:#76ce69}
.code-window pre.code-block{margin:0;padding:18px 20px 17px;overflow-x:auto;background:transparent;border:0;border-radius:0;font:12px/1.85 "DM Mono",monospace;color:#d9e7dc}
.code-window pre.code-block code{background:none;color:inherit;padding:0;font:inherit;border:0;border-radius:0}
/* 兼容旧版 code-block（无窗口条） */
.code-block.standalone{overflow-x:auto;margin:20px 0;padding:18px 20px;border:1px solid #35443a;border-radius:12px;background:#1d2920;color:#d9e7dc;font:12px/1.85 "DM Mono",monospace}
.c-key{color:#b9e989}.c-str{color:#f0c18d}.c-fn{color:#81c9ec}.c-com{color:#748c79;font-style:italic}.c-cmd{color:#d9e7dc}.c-num{color:#d4a3e5}
.article-cta{display:inline-flex;align-items:center;gap:8px;margin:6px 0 4px;padding:12px 18px;border-radius:9px;background:var(--lime);color:#1d331f;font-weight:500;font-size:14px;text-decoration:none;box-shadow:0 6px 16px #76ce6966;transition:transform .2s,box-shadow .2s}
.article-cta:hover{transform:translateY(-2px);box-shadow:0 10px 22px #76ce6988}
.article-note{color:#849087;font-size:12px}
.article-outro{margin:34px 0 0;padding:18px 20px;border-top:1px dashed var(--line);color:#69746c;font-size:13px}
.article-outro p{margin:0}
/* 侧边 TOC */
.article-aside{position:sticky;top:96px;align-self:start}
.toc{position:relative;padding:18px 18px 18px 22px;border:1px solid var(--line);border-radius:14px;background:#fbfdf8;box-shadow:0 6px 18px #17221908}
.toc::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:2px;background:linear-gradient(180deg,#76ce69,#a7ed62)}
.toc-title{margin:0 0 12px;display:flex;align-items:center;gap:8px;font:500 11px "DM Mono",monospace;letter-spacing:.08em;color:#3d8248;text-transform:uppercase}
.toc-title::before{content:"";width:14px;height:1px;background:#3d8248}
.toc-list{list-style:none;margin:0;padding:0}
.toc-list li{margin:0}
.toc-list a{display:block;padding:7px 0;color:#69746c;font-size:12.5px;line-height:1.5;border-bottom:1px dashed transparent;transition:color .2s,padding .2s}
.toc-list a:hover{color:#3d8248;padding-left:4px}
.toc-list a.active{color:#3d8248;font-weight:600}
.toc-list .toc-h3{padding-left:14px;font-size:12px}
/* 文末 CTA 卡片 */
.article-cta-card{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:38px;padding:22px;background:linear-gradient(135deg,#a7ed62 0%,#76ce69 100%);border-radius:14px;box-shadow:0 12px 28px #76ce6944}
.article-cta-card p{margin-bottom:6px;color:#2c5a31;font:10px "DM Mono",monospace;letter-spacing:.07em;text-transform:uppercase}
.article-cta-card h3{margin:0 0 8px;font-size:16px;line-height:1.45;font-weight:600;color:#1d331f}
.article-cta-card button{border:0;background:#fff;color:#286a33;font-size:12px;padding:8px 14px;border-radius:8px;font-weight:500;transition:transform .2s}
.article-cta-card button:hover{transform:translateY(-1px)}
.article-cta-card .qr-image{flex:none;width:78px;height:78px;background:#fff;border-radius:8px;object-fit:contain;padding:4px}
@media(max-width:900px){
  .article-shell{grid-template-columns:1fr;gap:26px;padding-inline:clamp(18px,5vw,40px)}
  .article-aside{position:static}
}
@media(max-width:720px){
  .article-page{padding:0 0 40px}
  .article-hero h1{font-size:27px;line-height:1.22}
  .article-hero .article-lede{font-size:14px;line-height:1.8;margin:12px 0 18px}
  .article-hero-shell{margin:18px 0 22px;padding:24px 18px 20px;border-radius:15px}
  .article-hero .back-link{margin:0 0 16px}
  .article-body{font-size:14.5px;line-height:1.9}
  .article-body h2{margin:38px 0 12px;font-size:20px}
  .article-body h3{margin:24px 0 10px;font-size:16px}
  .article-body blockquote{padding:14px 16px}
  .article-body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .code-window{border-radius:12px}
  .code-bar{height:36px}
  .code-window pre.code-block,.code-block.standalone{padding:13px 14px;font-size:11px}
  .article-cta{width:100%;justify-content:center}
  .article-cta-card{flex-direction:column;text-align:center;padding:20px 18px}
  .article-cta-card h3{font-size:15px}
  .article-aside{padding:0 0 6px}
  .toc{max-width:420px;padding:14px 16px 14px 20px}
}
@media(max-width:430px){
  .article-hero h1{font-size:23px}
  .article-hero .h1-wrap{margin-bottom:12px}
  .article-meta{gap:7px}
  .article-meta .meta-item{padding:4px 9px;font-size:10.5px}
  .article-body{font-size:14px}
  .article-body h2{font-size:18.5px}
  .article-body h2 .h2-mark{height:19px;width:4px;margin-right:10px}
  .article-body code{font-size:11px;padding:1px 5px}
  .article-body table{font-size:12px}
  .article-body th,.article-body td{padding:9px 10px}
  .code-bar .code-file{font-size:10px}
  .code-bar .copy-btn{padding:3px 8px;font-size:10px}
  .code-window pre.code-block,.code-block.standalone{padding:12px;font-size:10.5px;line-height:1.8}
  .article-cta-card .qr-image{width:66px;height:66px}
  .article-outro{padding:15px 16px}
}

/* ===== 搜索（header 触发 + overlay） ===== */
.search-trigger svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
body.no-scroll{overflow:hidden}
.search-overlay{position:fixed;inset:0;z-index:60;display:flex;justify-content:center;align-items:flex-start;padding:9vh 20px 40px;background:#101812a6;opacity:0;pointer-events:none;transition:opacity .2s}
.search-overlay.open{opacity:1;pointer-events:auto}
.search-panel{width:min(640px,100%);max-height:78vh;display:flex;flex-direction:column;border:1px solid #d8e2d3;border-radius:18px;background:#f8faf4;box-shadow:0 28px 80px #0d140f55;overflow:hidden;transform:translateY(-8px);transition:transform .22s}
.search-overlay.open .search-panel{transform:none}
.search-form{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line)}
.search-form svg{width:19px;height:19px;flex:none;fill:none;stroke:#3d8248;stroke-width:2;stroke-linecap:round}
.search-input{flex:1;border:0;background:transparent;outline:0;color:var(--ink);font:15px "DM Sans","Noto Sans SC",sans-serif}
.search-input::placeholder{color:#98a39b}
.search-close{border:0;background:#eef2eb;border-radius:8px;width:30px;height:30px;color:var(--muted);font-size:18px;line-height:1;transition:background .2s,color .2s}
.search-close:hover{background:#e3ece0;color:var(--ink)}
.search-results{overflow-y:auto;padding:8px 10px 12px}
.search-group h4{display:flex;align-items:center;gap:7px;margin:12px 8px 4px;color:#849087;font:500 10px "DM Mono",monospace;letter-spacing:.1em;text-transform:uppercase}
.search-group h4 i{font-style:normal;color:#b3bcb4;font-size:9px}
.search-item{display:flex;align-items:center;gap:11px;padding:11px 10px;border-radius:10px;transition:background .15s}
.search-item:hover{background:#eef5e9}
.search-copy{flex:1;min-width:0}
.search-copy b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:500;letter-spacing:-.01em}
.search-copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px;color:var(--muted);font-size:11.5px}
.search-copy mark{background:#e2f7cd;color:#2c5a31;border-radius:3px;padding:0 2px}
.search-kind{flex:none;padding:3px 8px;border-radius:999px;background:#e6efe2;color:#3d6b46;font-size:9.5px;font-weight:500;letter-spacing:.03em}
.search-kind.kind-ext{background:#fdf3dd;color:#9a6b1f}
.sr-arrow{flex:none;color:#3d8248;font-size:14px}
.search-empty{padding:26px 12px;text-align:center;color:var(--muted);font-size:13px;margin:0}
.search-empty.hint{color:#98a39b;font-size:12px}
.search-box{display:flex;align-items:center;gap:12px;width:min(520px,100%);margin-top:6px;padding:15px 18px;border:1px solid #d8e1d4;border-radius:14px;background:#ffffff;color:#98a39b;font-size:14px;text-align:left;transition:border-color .2s,box-shadow .2s}
.search-box:hover{border-color:#b9e989;box-shadow:0 8px 22px #17221910}
.search-box svg{width:18px;height:18px;flex:none;fill:none;stroke:#3d8248;stroke-width:2;stroke-linecap:round}
.search-box span{flex:1}
.search-box kbd{margin-left:8px;padding:2px 7px;border:1px solid #dbe3d8;border-bottom-width:2px;border-radius:6px;background:#f4f7f1;color:#849087;font:10px "DM Mono",monospace}
/* ===== 文章中心页 articles.html ===== */
.article-center{padding:66px 0 30px}
.center-hero{max-width:760px;padding:12px 0 30px}
.center-hero h1{margin-bottom:13px;font-size:clamp(38px,4.8vw,60px);letter-spacing:-.06em;font-weight:500}
.center-hero .center-lede{max-width:520px;margin:0 0 22px;color:var(--muted);font-size:15px;line-height:1.85}
.center-body{max-width:820px}
.column-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 30px}
.column-tab{padding:8px 15px;border:1px solid #d6dfd3;border-radius:999px;background:#ffffff;color:#66766a;font-size:12px;transition:border-color .2s,background .2s,color .2s}
.column-tab:hover{border-color:#bfe8a6;color:#34753d}
.column-tab.active{border-color:#d9f1c5;background:#e7f9db;color:#34753d;font-weight:500}
.article-column{margin:0 0 34px}
.column-head{display:flex;align-items:baseline;gap:10px;margin:0 0 6px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.column-head h2{margin:0;font-size:20px;font-weight:600;letter-spacing:-.02em}
.column-head h2::before{content:"";display:inline-block;width:9px;height:9px;margin-right:9px;border-radius:2px;background:linear-gradient(135deg,#a7ed62,#4c8d54)}
.column-head span{color:#98a39b;font:11px "DM Mono",monospace}
.column-list .article:first-child{border-top:0}
/* 文章卡片上的站内/外链旗标 */
.article h3{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.article-flag{flex:none;display:inline-block;margin-left:auto;padding:2px 7px;border-radius:5px;background:#eef2eb;color:#849087;font:9px "DM Mono",monospace;letter-spacing:.05em}
.article-flag.flag-local{background:#e2f7cd;color:#34753d}
/* ===== 作品网格 LIVE 徽标 ===== */
.live-badge{position:absolute;top:14px;right:14px;z-index:2;padding:4px 9px;border-radius:999px;background:#172219cc;color:#a7ed62;font:500 9px "DM Mono",monospace;letter-spacing:.08em}
@media(max-width:720px){
  .article-center{padding-top:44px}
  .center-hero{padding-bottom:18px}
  .center-hero h1{font-size:34px}
  .column-tabs{margin-bottom:22px;gap:6px}
  .column-tab{padding:7px 12px;font-size:11px}
  .search-box{padding:13px 15px;font-size:13px}
  .search-overlay{padding:5vh 14px 30px}
  .search-panel{max-height:86vh;border-radius:14px}
}

/* ===== 菜单栏 · 移动端（汉堡面板内「实验室」改手风琴 + 公众号收进菜单） ===== */
@media(max-width:720px){
  .header-actions{gap:8px}
  .wechat-trigger{display:none}
  .search-trigger{padding:0 12px}
  .site-nav{align-items:stretch}
  .site-nav a{text-align:left}
  .site-nav .nav-wechat{display:flex;align-items:center;gap:8px;width:100%;padding:13px 4px;border:0;background:none;color:var(--ink);font:inherit;font-size:15px;text-align:left}
  .nav-drop{display:block;width:100%}
  .nav-drop-btn{width:100%;justify-content:space-between;padding:12px 4px;border-bottom:1px solid #e6ece3;font-size:15px}
  .nav-caret{width:11px;height:7px}
  .nav-drop.current > .nav-drop-btn{border-bottom-color:#e6ece3}
  .nav-drop-menu{position:static;display:none;min-width:0;padding:2px 0 8px 14px;background:none;border:0;border-radius:0;box-shadow:none;opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .nav-drop-menu::before{display:none}
  .nav-drop.open .nav-drop-menu{display:flex}
  .nav-drop-menu a{padding:11px 4px;border-radius:0;border-bottom:1px solid #eef2ec;font-size:14.5px;color:var(--muted)}
  .nav-drop-menu a:last-child{border-bottom:0}
  .nav-drop-menu a:hover{background:none}
  .nav-drop-menu a.is-current{background:none;color:#34753d}
}