.page{--ink:#172033;--muted:#788298;--line:#e5e9f1;min-height:100vh;background:#f5f7fb;color:var(--ink);font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif}.page *{box-sizing:border-box}.page button,.page input{font:inherit}.header{position:sticky;top:0;z-index:30;height:70px;display:flex;align-items:center;padding:0 5vw;border-bottom:1px solid rgba(224,228,237,.88);background:rgba(255,255,255,.9);backdrop-filter:blur(16px)}.brand{display:flex;align-items:center;gap:11px;min-width:290px}.brand>span,.page footer>div>span{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(145deg,#2e6ff2,#7357d8);box-shadow:0 8px 18px rgba(54,95,207,.24);color:#fff;font-weight:800}.brand>div{display:flex;flex-direction:column;gap:2px}.brand strong{font-size:14px;letter-spacing:.1px}.brand small{color:#9aa2b2;font-size:7px;letter-spacing:1.7px}.header nav{display:flex;align-self:stretch;gap:7px}.header nav a{display:flex;align-items:center;padding:0 12px;border-bottom:2px solid transparent;color:#7e8798;text-decoration:none;font-size:10px}.header nav a:hover{border-bottom-color:#376fe5;color:#315fbf}.version{display:flex;align-items:center;gap:6px;margin-left:auto;color:#7f899b;font-size:9px}.version i{width:7px;height:7px;border:2px solid #b8f0d4;border-radius:50%;background:#31b978}.version b{margin-left:6px;padding:4px 7px;border-radius:5px;background:#f0f3f8;color:#697488;font-size:8px}.page>main{overflow:hidden}.hero{min-height:520px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:55px;padding:74px 7vw 88px;background:radial-gradient(circle at 75% 30%,rgba(95,120,240,.1),transparent 30%),linear-gradient(180deg,#fff,#f7f9fc)}.heroCopy>p,.sectionHeading>div>p,.about>div>p{margin:0 0 13px;color:#3d70de;font-size:8px;font-weight:800;letter-spacing:2.4px}.heroCopy h1{margin:0;color:#182135;font-size:40px;line-height:1.25;letter-spacing:-1.8px}.heroCopy h1 em{color:#356fe5;font-style:normal}.heroCopy>span{max-width:650px;display:block;margin-top:18px;color:#7d8799;font-size:12px;line-height:1.9}.heroActions{display:flex;gap:9px;margin-top:28px}.heroActions a{padding:11px 16px;border:1px solid #dfe4ee;border-radius:8px;background:#fff;color:#657187;text-decoration:none;font-size:10px;font-weight:700}.heroActions a:first-child{border-color:#356fe5;background:#356fe5;color:#fff;box-shadow:0 8px 18px rgba(53,111,229,.2)}.heroActions a:hover{transform:translateY(-1px)}.heroVisual{position:relative;min-width:0;padding:15px 0 0 10px}.visualWindow{overflow:hidden;border:1px solid #dfe4ee;border-radius:14px;background:#fff;box-shadow:0 34px 80px rgba(41,62,103,.17);transform:rotate(1.5deg)}.visualWindow>span{height:38px;display:flex;align-items:center;gap:5px;padding:0 12px;border-bottom:1px solid #edf0f5;background:#fafbfd}.visualWindow>span>i{width:6px;height:6px;border-radius:50%;background:#d3d8e2}.visualWindow>span>i:first-child{background:#f09882}.visualWindow>span>i:nth-child(2){background:#e7bd69}.visualWindow>span>i:nth-child(3){background:#63c58e}.visualWindow>span>b{margin-left:10px;padding:5px 48px;border-radius:5px;background:#f0f3f7;color:#a2a9b7;font-size:7px;font-weight:500}.visualBody{height:310px;display:grid;grid-template-columns:82px 1fr}.visualBody>aside{display:flex;flex-direction:column;gap:10px;padding:17px 12px;background:#17233b}.visualBody>aside i{height:8px;border-radius:3px;background:#2d3b58}.visualBody>aside i:first-child{background:#3b72e5}.visualBody>main{padding:22px;background:#f4f6fa}.visualBody>main>p{width:38%;height:13px;margin:0 0 18px;border-radius:4px;background:#cbd2df}.visualBody>main>section{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.visualBody>main>section b{height:57px;border:1px solid #e3e7ef;border-radius:8px;background:#fff}.visualBody>main>section b:before{content:"";width:22px;height:22px;display:block;margin:12px;border-radius:6px;background:#e9f0ff}.visualBody>main>div{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.visualBody>main>div i{height:73px;border:1px solid #e3e7ef;border-radius:8px;background:#fff}.floatingCard{position:absolute;right:-18px;bottom:-26px;display:flex;align-items:center;gap:10px;padding:13px 18px;border:1px solid #e2e7ef;border-radius:11px;background:#fff;box-shadow:0 18px 38px rgba(47,67,107,.15)}.floatingCard>span{width:29px;height:29px;display:grid;place-items:center;border-radius:50%;background:#e9f8f0;color:#26a96b;font-size:11px}.floatingCard p{display:flex;flex-direction:column;gap:3px;margin:0}.floatingCard strong{font-size:10px}.floatingCard small{color:#98a0af;font-size:8px}.featured{position:relative;z-index:3;width:min(1340px,90vw);display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:-38px auto 0}.featuredCard{min-height:128px;display:flex;align-items:flex-start;gap:15px;padding:20px;border:1px solid #e1e6ef;border-radius:12px;background:#fff;color:inherit;text-decoration:none;box-shadow:0 15px 38px rgba(38,59,97,.08);transition:transform .18s,border-color .18s,box-shadow .18s}.featuredCard:hover{border-color:var(--accent);box-shadow:0 18px 42px rgba(38,59,97,.12);transform:translateY(-3px)}.featuredCard>span{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:8px;background:var(--soft);color:var(--accent);font-size:10px;font-weight:800}.featuredCard>div{display:flex;min-width:0;flex:1;flex-direction:column}.featuredCard small{color:var(--accent);font-size:7px;font-weight:800;letter-spacing:1px}.featuredCard strong{margin-top:5px;font-size:13px}.featuredCard p{margin:6px 0 0;color:#8a93a3;font-size:9px;line-height:1.6}.featuredCard>b{color:#9ba3b1;font-size:14px}.templates{width:min(1340px,90vw);margin:0 auto;padding:86px 0}.sectionHeading{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin-bottom:25px}.sectionHeading h2,.about h2{margin:0 0 7px;font-size:25px;letter-spacing:-.6px}.sectionHeading>div>span{color:#858e9e;font-size:10px}.sectionHeading label{width:min(340px,34vw);height:39px;display:flex;align-items:center;gap:8px;padding:0 11px;border:1px solid #dfe4ed;border-radius:8px;background:#fff;color:#9098a7}.sectionHeading label:focus-within{border-color:#9db9f2;box-shadow:0 0 0 3px rgba(53,111,229,.08)}.sectionHeading input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#46536a;font-size:10px}.sectionHeading label button{border:0;background:transparent;color:#9aa2b0;cursor:pointer}.filters{display:flex;gap:5px;margin-bottom:36px;padding:5px;border:1px solid #e1e5ed;border-radius:9px;background:#fff;width:fit-content}.filters button{padding:8px 12px;border:0;border-radius:6px;background:transparent;color:#788295;cursor:pointer;font-size:10px}.filters button b{margin-left:6px;color:#a5adba;font-size:8px}.filters button:hover,.filters .filterActive{background:#edf3ff;color:#356bd7}.filters .filterActive b{color:#6790df}.group{margin-bottom:44px}.groupTitle{display:flex;align-items:center;gap:11px;margin-bottom:15px}.groupTitle>span{width:36px;height:36px;display:grid;place-items:center;border:1px solid #e0e5ee;border-radius:9px;background:#fff;color:#5275bb;font-size:14px}.groupTitle>div{display:flex;flex-direction:column;gap:2px}.groupTitle h3{margin:0;font-size:14px}.groupTitle p{margin:0;color:#9099a8;font-size:8px}.groupTitle>b{margin-left:auto;padding:4px 8px;border-radius:6px;background:#e9edf4;color:#798397;font-size:8px}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.card{overflow:hidden;border:1px solid #e0e5ed;border-radius:12px;background:#fff;color:inherit;text-decoration:none;transition:transform .18s,border-color .18s,box-shadow .18s}.card:hover{border-color:var(--accent);box-shadow:0 14px 35px rgba(37,57,96,.1);transform:translateY(-3px)}.cardPreview{position:relative;height:118px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,var(--soft),#fff)}.cardPreview:before,.cardPreview:after{content:"";position:absolute;border-radius:50%;background:var(--accent);opacity:.08}.cardPreview:before{width:130px;height:130px;right:-45px;top:-55px}.cardPreview:after{width:80px;height:80px;left:-25px;bottom:-40px}.cardPreview>span{position:relative;z-index:2;width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.7);border-radius:12px;background:rgba(255,255,255,.65);box-shadow:0 8px 20px rgba(34,52,88,.08);color:var(--accent);font-size:18px;font-weight:800;backdrop-filter:blur(6px)}.cardPreview>small{position:absolute;left:13px;bottom:11px;color:var(--accent);font-size:6px;font-weight:800;letter-spacing:1px}.cardPreview>div{position:absolute;right:12px;bottom:12px;display:flex;gap:3px}.cardPreview>div i{width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.45}.cardWithCover .cardPreview{background-position:center;background-size:cover}.cardWithCover .cardPreview:before,.cardWithCover .cardPreview:after{display:none}.cardWithCover .cardPreview>span{background:rgba(14,23,40,.5);color:#fff}.cardWithCover .cardPreview>small{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5)}.cardBody{padding:15px}.cardBody>div{display:flex;align-items:center;justify-content:space-between;gap:8px}.cardBody strong{font-size:12px}.cardBody>div>b{color:var(--accent);font-size:7px;opacity:0;transition:opacity .18s}.card:hover .cardBody>div>b{opacity:1}.cardBody p{min-height:35px;margin:8px 0 12px;color:#818b9c;font-size:9px;line-height:1.75}.cardBody>span{display:flex;flex-wrap:wrap;gap:4px}.cardBody>span i{padding:4px 6px;border-radius:5px;background:#f3f5f8;color:#8993a4;font-size:7px;font-style:normal}.empty{min-height:300px;display:grid;place-content:center;justify-items:center;color:#9099a8;text-align:center}.empty>span{font-size:28px}.empty h3{margin:12px 0 5px;color:#5c687d;font-size:13px}.empty p{margin:0;font-size:9px}.empty button{margin-top:14px;padding:8px 12px;border:1px solid #d9e0eb;border-radius:7px;background:#fff;color:#5272b0;cursor:pointer;font-size:9px}.about{display:grid;grid-template-columns:1fr 1.2fr auto;align-items:center;gap:45px;padding:52px 7vw;background:#15213a;color:#fff}.about>div>p{color:#7fa7ff}.about h2{margin:0;color:#fff}.about>span{color:#9ca9c0;font-size:10px;line-height:1.8}.about>a{padding:11px 15px;border:1px solid #40506e;border-radius:7px;color:#dbe5f7;text-decoration:none;font-size:9px}.about>a:hover{border-color:#6992e8;background:#1d2e50}.page footer{height:76px;display:flex;align-items:center;padding:0 7vw;background:#0f192c;color:#8f9bb1}.page footer>div{display:flex;align-items:center;gap:9px}.page footer>div>span{width:27px;height:27px;border-radius:7px;font-size:10px}.page footer strong{color:#d2d9e6;font-size:10px}.page footer p{margin:0 auto;font-size:8px}.page footer a{color:#9aa7bd;text-decoration:none;font-size:8px}@media(max-width:1100px){.hero{min-height:480px;gap:35px;padding-right:5vw;padding-left:5vw}.heroCopy h1{font-size:34px}.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.featured{width:92vw}.templates{width:92vw}}@media(max-width:820px){.header{padding:0 18px}.brand{min-width:auto}.header nav{display:none}.hero{grid-template-columns:1fr;padding:55px 7vw 85px}.heroCopy{max-width:650px}.heroVisual{display:none}.featured{grid-template-columns:1fr;margin-top:-45px}.featuredCard{min-height:auto}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.about{grid-template-columns:1fr;gap:15px}.about>a{width:fit-content}}@media(max-width:560px){.header{height:62px}.brand>div small,.version{display:none}.hero{min-height:auto;padding:47px 18px 78px}.heroCopy h1{font-size:28px}.heroCopy>span{font-size:10px}.heroActions{align-items:stretch;flex-direction:column}.heroActions a{text-align:center}.featured{width:calc(100% - 28px)}.templates{width:calc(100% - 28px);padding:68px 0}.sectionHeading{align-items:flex-start;flex-direction:column}.sectionHeading label{width:100%}.filters{width:100%;overflow-x:auto}.filters button{white-space:nowrap}.grid{grid-template-columns:1fr}.cardPreview{height:135px}.about{padding:42px 18px}.page footer{height:auto;align-items:flex-start;flex-direction:column;gap:12px;padding:24px 18px}.page footer p{margin:0}}