: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; }
.site-nav { display:flex; gap:30px; font-size:14px; color:var(--muted); }.site-nav a { padding:6px 2px; border-bottom:2px solid transparent; transition:color .2s, border-color .2s; }.site-nav a:hover { color:var(--ink); }.site-nav a.active { color:var(--ink); border-bottom-color:var(--lime); font-weight:500; }
.header-actions { display:flex; align-items:center; gap:12px; }
.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 { display:flex; align-items:center; gap:8px; border:1px solid #ccd5cb; border-radius:9px; padding:8px 12px; background:#fff9; color:var(--ink); font-size:12px; }.status-dot { width:7px; height:7px; 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{opacity:0;transform:translateY(15px);transition:opacity .6s ease,transform .6s ease}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s}
@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}}