:root { --green:#188453; --deep:#073c2b; --ink:#182238; --muted:#778193; --line:#dfede5; --paper:#fff; --mint:#eef9f2; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:85px; }
body { margin:0; background:linear-gradient(180deg,#fff 25%,#f7fcf9 68%,#edf8f1); color:var(--ink); font:14px/1.55 "PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--green); }
button,input { font:inherit; }
button { cursor:pointer; }
img { max-width:100%; }
h1,h2,h3,p { margin:0; }
a:focus-visible,button:focus-visible,input:focus-visible { outline:3px solid #38a977; outline-offset:4px; }
.shell { width:min(1250px,calc(100% - 88px)); margin-inline:auto; }
.icon { width:25px; height:25px; flex-shrink:0; vertical-align:middle; color:var(--green); object-fit:contain; }
.sr-only,.skip-link:not(:focus) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link:focus { position:fixed; top:0; left:0; z-index:99; background:#fff; padding:12px; }
.site-header { height:66px; background:#fbfefcf5; position:sticky; top:0; z-index:20; border-bottom:1px solid #e8f2eb; backdrop-filter:blur(12px); }
.header-inner { height:100%; display:flex; align-items:center; gap:30px; }
.brand { display:inline-flex; align-items:center; gap:9px; flex-shrink:0; color:#103e31; }
.brand>img { object-fit:contain; width:45px; height:45px; }
.brand strong { display:block; font-size:24px; line-height:1.2; letter-spacing:-.7px; font-weight:750; }
.brand small { display:block; color:#6b827b; font-size:8px; margin-top:2px; letter-spacing:1.5px; }
.site-header nav { display:flex; align-self:stretch; align-items:stretch; gap:28px; margin-left:auto; }
.site-header nav>a { font-size:13px; font-weight:600; position:relative; white-space:nowrap; display:flex; align-items:center; }
.site-header nav>a[aria-current] { color:var(--green); }
.site-header nav>a[aria-current]:after { content:""; position:absolute; bottom:11px; left:0; right:0; height:2px; background:#21a968; }
.search { display:flex; align-items:center; background:#fff; border:1px solid #a8d6bb; border-radius:10px; overflow:hidden; }
.search .icon { width:22px; height:22px; margin-left:17px; }
.search input { flex:1; min-width:0; border:0; background:transparent; outline:none; padding:12px; color:var(--ink); }
.search input::placeholder { color:#8d98aa; }
.search button,.button { display:inline-flex; justify-content:center; align-items:center; border:0; background:linear-gradient(110deg,#178b57,#127c4d); color:white; border-radius:8px; font-weight:600; padding:10px 28px; }
.search button:hover,.button:hover { background:#08673f; color:#fff; }
.nav-search { width:268px; height:35px; margin-left:auto; border-color:#b4c4c4; border-radius:9px; }
.nav-search input { font-size:11px; padding:8px; }
.nav-search .icon { height:16px; width:16px; margin-left:11px; color:#3c7769; }
.menu-toggle { display:none; border:0; background:transparent; font-size:25px; color:var(--deep); }
.hero { background:radial-gradient(ellipse at 84% 15%,#c9efd780,transparent 58%),linear-gradient(105deg,#edf9f2,#effaf4 60%,#e2f5e9); overflow:hidden; position:relative; }
.hero:before { content:""; position:absolute; width:1000px; height:320px; background:#b7e7cb22; transform:rotate(22deg); border-radius:50%; top:120px; left:-90px; }
.hero-inner { min-height:410px; display:grid; grid-template-columns:1.1fr 1fr; gap:10px; position:relative; }
.hero-copy { padding:38px 0 26px 20px; z-index:2; }
.hero h1 { font-size:43px; color:var(--deep); line-height:1.18; font-weight:850; letter-spacing:1.5px; }
.hero h1 span { font-size:51px; letter-spacing:1px; }
.hero-promise { font-size:17px; font-weight:600; color:#267550; margin:9px 0 3px; }
.hero-description { color:#486872; font-size:15px; line-height:1.55; margin:5px 0 17px; letter-spacing:.2px; }
.hero-search { height:49px; width:100%; box-shadow:0 2px 4px #22734205; }
.hero-search input { font-size:13px; }
.hero-search button { min-width:94px; height:41px; margin-right:4px; }
.hot-search { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; align-items:center; font-size:10px; }
.hot-search strong { color:#2a6b54; font-size:11px; }
.hot-search a { background:#e4edeb; color:#4c6067; padding:2px 9px; border-radius:16px; font-size:10px; white-space:nowrap; }
.hot-search a:hover { background:#d0eadb; color:var(--deep); }
.metrics { display:flex; align-items:center; gap:26px; margin-top:27px; }
.metrics>div { display:flex; gap:11px; align-items:center; position:relative; }
.metrics>div+div:before { content:""; position:absolute; top:4px; bottom:4px; left:-14px; width:1px; background:#d3e9dd; }
.metrics .icon { width:36px; height:36px; color:#21895b; }
.metrics>div:first-child>.icon { background:#7dbb96; color:#fff; border-radius:50%; padding:7px; }
.metrics strong { display:block; color:#097347; font-size:22px; font-weight:750; line-height:1.1; letter-spacing:.4px; }
.metrics small { color:#688079; font-size:11px; display:block; margin-top:4px; }
.hero-art { position:relative; min-width:0; align-self:stretch; }
.hero-illustration { position:absolute; width:110%; height:100%; max-width:none; object-fit:contain; right:-25px; bottom:-4px; mix-blend-mode:multiply; }
.art-label { position:absolute; padding:9px 17px; color:#14603c; background:#ffffffeb; border-radius:14px; box-shadow:0 8px 16px #3a8a4d0c; font-size:16px; font-weight:650; white-space:nowrap; }
.label-doc { left:18%; top:10%; }
.label-github { right:12%; top:27%; display:flex; gap:6px; align-items:center; font-size:14px; }
.label-github .icon { width:17px; height:17px; }
.art-words { display:grid; gap:9px; position:absolute; right:0; top:47%; }
.art-words span { background:#ffffffdc; padding:5px 13px; border-radius:5px; box-shadow:0 4px 8px #3287510b; color:#398a5c; font-size:13px; }
.art-note { position:absolute; right:0; bottom:28px; transform:rotate(-9deg); color:#315e4e; font-size:15px; font-family:"STKaiti","Kaiti SC",serif; letter-spacing:4px; text-align:right; }
.homepage-content { padding-top:23px; padding-bottom:18px; }
.homepage-content>section { margin-bottom:27px; }
.homepage-content>section:last-child { margin-bottom:0; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:13px; }
.section-heading>div { display:flex; gap:12px; align-items:flex-start; border-left:3px solid var(--green); padding-left:12px; }
.section-heading h2 { font-size:20px; line-height:1.35; font-weight:750; }
.section-heading p { font-size:12px; color:#7a8990; line-height:1.55; margin-top:2px; letter-spacing:.25px; }
.section-heading>div>.icon { margin-top:1px; }
.section-heading>a { color:#277d56; font-size:12px; white-space:nowrap; display:flex; gap:7px; align-items:center; }
.section-heading>a .icon { width:16px; height:16px; }
.categories-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px; }
.category-card { background:#ffffffda; border:1px solid var(--line); border-radius:9px; box-shadow:0 5px 12px #185c3106; padding:17px 8px 12px; text-align:center; transition:transform .16s,box-shadow .16s; }
.category-card:hover,.content-card:hover,.topic-card:hover { transform:translateY(-3px); box-shadow:0 9px 22px #26764212; border-color:#b9ddc7; }
.category-card>.icon { height:32px; width:32px; margin-bottom:9px; color:#2b9a76; stroke-width:2.2; }
.category-card h3 { font-size:14px; margin-bottom:7px; font-weight:650; white-space:nowrap; }
.category-card p { color:var(--muted); font-size:12px; line-height:1.65; }
.category-foot { display:flex; justify-content:center; align-items:center; gap:6px; margin-top:9px; }
.category-foot small { font-size:9px; color:#889990; }
.category-foot b { border-radius:50%; display:inline-flex; width:22px; height:22px; background:#ddf5e7; align-items:center; justify-content:center; font-size:14px; font-weight:400; color:#279567; }
.docs-grid,.projects-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:13px; }
.content-card { min-width:0; background:#ffffffeb; border:1px solid #dceee4; border-radius:11px; padding:14px 16px 12px; box-shadow:0 6px 13px #1c7f400a; display:flex; flex-direction:column; transition:transform .16s,box-shadow .16s; }
.card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:11px; min-height:46px; }
.product-logo { width:43px; height:43px; object-fit:contain; }
.status { font-size:10px; padding:3px 9px; line-height:1.2; white-space:nowrap; border-radius:20px; color:#398d61; background:#d7f3e3; }
.status.update { color:#bd702e; background:#fff0e3; }
.status.archived { color:#67717d; background:#f0f1f2; }
.content-card h3 { font-size:14px; line-height:1.45; margin-bottom:9px; font-weight:650; }
.content-card>p { font-size:12px; color:var(--muted); line-height:1.65; min-height:79px; margin-bottom:12px; }
.tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:auto; margin-bottom:13px; min-height:21px; align-items:start; }
.tags span { font-size:10px; background:#edf6fb; color:#55718a; padding:3px 7px; border-radius:5px; white-space:nowrap; }
.card-meta { display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:11px; color:#647085; }
.card-meta .icon { height:12px; width:12px; color:#647085; margin-right:3px; }
.card-meta a { white-space:nowrap; }
.card-meta>span { font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.project-language { font-size:10px; background:#f0fbf3; color:#479367; padding:3px 7px; border-radius:20px; }
.project-card .card-top { margin-bottom:9px; }
.project-card>p { min-height:79px; }
.project-card h3 { margin-bottom:7px; }
.snapshot-note { font-size:9px; text-align:right; color:#829b8c; margin-top:6px; }
.topics-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; }
.topic-card { border:1px solid #e2efe7; border-radius:10px; overflow:hidden; background:#ffffffed; box-shadow:0 6px 15px #297a3808; transition:transform .16s,box-shadow .16s; }
.topic-cover { height:80px; background:#093d2a; position:relative; overflow:hidden; }
.topic-cover>img { display:block; width:100%; height:100%; object-fit:cover; }
.topic-cover:after { content:""; position:absolute; inset:0; background:linear-gradient(30deg,#00673244,transparent); }
.topic-cover.apache-cover { background:#c5ead2 url('/assets/home/mountains.webp') center/cover; }
.apache-cover>img { object-fit:contain; width:70%; padding:13px; margin:auto; transform:rotate(18deg); }
.topic-body { padding:10px 12px 11px; }
.topic-body h3 { font-size:13px; line-height:1.4; margin-bottom:5px; }
.topic-body p { font-size:11px; color:#7e8998; line-height:1.5; min-height:32px; }
.topic-body>span { display:block; font-size:11px; color:#65758a; margin-top:6px; }
.library-strip { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 21px; border:1px solid #daebe0; background:#edf7f0aa; border-radius:10px; }
.library-strip>div { display:flex; gap:13px; align-items:center; }
.library-strip h2 { font-size:16px; font-weight:650; color:#285d42; }
.library-strip p { color:#708677; font-size:11px; margin-top:3px; }
.library-strip nav { display:flex; gap:20px; white-space:nowrap; font-size:11px; color:#267d50; }
.how-panel { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) 1.2fr; gap:12px; background:#ffffffdb; border:1px solid #ebf4ee; border-radius:12px; padding:19px 17px 15px; min-height:126px; }
.how-step { display:flex; gap:12px; align-items:flex-start; position:relative; }
.step-number { display:flex; align-items:center; justify-content:center; height:33px; width:33px; border-radius:50%; background:#c9efd7; color:#167a4b; font-size:18px; font-weight:700; flex-shrink:0; }
.how-step .icon { width:26px; height:26px; margin-bottom:6px; }
.how-step h3 { font-size:12px; font-weight:650; color:#204a38; margin-bottom:5px; }
.how-step p { font-size:10px; color:#7a8594; line-height:1.65; }
.step-arrow { position:absolute; top:3px; right:0; color:#59af81; }
.how-step:nth-child(4) .step-arrow { display:none; }
.how-landscape { display:flex; flex-direction:column; justify-content:flex-end; text-align:right; background:url('/assets/home/mountains.webp') 66% 50%/cover; color:#458668; margin:-32px -17px -15px 0; padding:40px 20px 15px 0; border-radius:0 12px 12px 0; }
.how-landscape strong { font-size:15px; font-weight:500; }
.how-landscape span { font-size:10px; }
.how-landscape small { font-size:8px; margin-top:5px; white-space:nowrap; }
.site-footer { border-top:1px solid #deeee3; background:#fbfcfd; padding-top:22px; }
.footer-grid { display:grid; grid-template-columns:1.35fr 1.05fr 1.45fr 1fr; gap:26px; padding-bottom:20px; }
.site-footer .brand>img { width:39px; height:39px; }
.site-footer .brand strong { font-size:19px; }
.site-footer .brand small { font-size:7px; letter-spacing:1px; }
.footer-about p { color:#7a8596; font-size:11px; line-height:1.8; margin-top:12px; }
.footer-group { border-left:1px solid #e7edeb; padding-left:25px; }
.footer-grid h2 { font-size:13px; margin-bottom:13px; font-weight:650; }
.footer-group>div { display:flex; flex-wrap:wrap; gap:9px 17px; font-size:11px; color:#657288; }
.footer-mission { border-left:1px solid #e7edeb; padding-left:20px; background:url('/assets/home/mountains.webp') bottom center/100% auto no-repeat; }
.footer-mission h2 { margin-bottom:4px; font-size:12px; }
.footer-mission p { font-size:10px; color:#8893a2; }
.footer-bottom { border-top:1px solid #e4ece8; padding:9px 0 12px; font-size:9px; color:#83909e; display:flex; justify-content:space-between; gap:16px; }
.footer-bottom>span>a { padding-left:14px; }
.footer-bottom>div { display:flex; gap:18px; }
.ad-slot[hidden] { display:none; }
.ad-slot:not([hidden]) { min-height:120px; max-width:1250px; margin:24px auto; overflow:hidden; }
.inner-page { padding:28px 0 60px; min-height:70vh; }
.breadcrumbs { font-size:12px; color:#718a7c; margin-bottom:25px; }
.inner-page h1 { font-size:34px; color:var(--deep); }
.page-intro { font-size:15px; color:#75857b; margin:10px 0 25px; max-width:950px; }
.inner-page .docs-grid,.inner-page .projects-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.inner-page .content-card>p { min-height:40px; }
.inner-page .topics-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.inner-page .topic-cover { height:145px; }
.inner-page .topic-body p { min-height:0; }
.filter-links { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.filter-links a { border:1px solid #d2e6da; border-radius:20px; padding:6px 15px; background:#fff; color:#35825c; }
.content-note { padding:13px 18px; border-left:3px solid #6bb58c; background:#edf7f0; color:#607968; margin-bottom:22px; font-size:13px; }
.article-panel { max-width:880px; border:1px solid var(--line); border-radius:12px; padding:28px; background:#fff; font-size:15px; line-height:1.8; }
.article-panel h2 { font-size:21px; margin:25px 0 10px; }
.article-panel p { color:#617468; margin-bottom:15px; }
.article-panel dl { display:grid; grid-template-columns:150px 1fr; gap:10px; background:#f2f8f4; padding:20px; border-radius:8px; margin:20px 0; }
.article-panel dt { color:#728678; }
.article-panel dd { margin:0; }
.detail-summary { display:flex; gap:20px; align-items:center; margin-bottom:20px; }
.detail-summary img { object-fit:contain; }
.detail-actions { display:flex; gap:20px; flex-wrap:wrap; align-items:center; margin:22px 0; color:var(--green); }
.subheading { font-size:22px; margin:30px 0 18px; }
.resource-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.resource-list>a { background:#fff; border:1px solid var(--line); border-radius:9px; padding:20px; overflow-wrap:anywhere; }
.resource-list h2 { font-size:19px; margin-bottom:8px; }
.resource-list p { color:#74877b; margin-bottom:12px; }
.resource-list span { color:var(--green); font-size:12px; }
.empty-state { background:#edf8f1; border:1px solid #d9ecdf; border-radius:12px; padding:25px; }
.empty-state p { margin:10px 0 20px; color:#6b8173; }
.page-search { max-width:750px; margin-bottom:20px; }
#search-status { margin-bottom:20px; color:#62806c; }
@media(min-width:1400px) { .hero-inner { min-height:450px; }.hero-copy { padding-top:40px; }.hero h1 { font-size:47px; }.hero h1 span { font-size:57px; }.hero-description { font-size:17px; }.metrics { margin-top:29px; }.metrics strong { font-size:24px; }.hero-art { margin-left:-25px; }.content-card>p { min-height:79px; } }
@media(max-width:1199px) { .shell { width:calc(100% - 64px); }.header-inner { gap:20px; }.brand strong { font-size:22px; }.site-header nav { gap:20px; }.site-header nav>a { font-size:12px; }.nav-search { width:235px; }.hero-copy { padding-left:15px; padding-top:32px; }.hero-inner { grid-template-columns:1.12fr 1fr; min-height:398px; }.hero h1 { font-size:38px; }.hero h1 span { font-size:47px; }.hero-promise { font-size:15px; }.hero-description { font-size:13px; }.hero-search input { font-size:11px; }.hot-search { gap:6px; }.hot-search a { font-size:9px; padding:2px 7px; }.hot-search strong { font-size:10px; }.metrics { gap:24px; margin-top:23px; }.metrics .icon { width:31px; height:31px; }.metrics strong { font-size:21px; }.metrics small { font-size:10px; }.hero-art { margin-left:-25px; }.art-note { font-size:13px; }.art-label { font-size:14px; padding:8px 14px; }.label-github { right:8%; font-size:12px; }.art-words { right:-4px; }.art-words span { font-size:12px; padding:4px 11px; }.categories-grid { gap:10px; }.category-card { padding-inline:5px; }.category-card h3 { font-size:13px; }.category-card p { font-size:11px; }.category-foot { gap:4px; }.category-foot small { font-size:8px; }.docs-grid,.projects-grid { gap:10px; }.content-card { padding:12px 11px; }.product-logo { width:38px; height:38px; }.status { font-size:9px; padding:3px 6px; }.content-card h3 { font-size:12px; }.content-card>p { font-size:11px; min-height:74px; }.tags { gap:4px; min-height:43px; margin-bottom:9px; }.tags span { font-size:9px; padding:2px 5px; }.card-meta { font-size:10px; }.card-meta .icon { display:none; }.card-top { gap:3px; }.topics-grid { gap:12px; }.topic-cover { height:72px; }.topic-body { padding:9px; }.topic-body h3 { font-size:12px; }.topic-body p { font-size:10px; }.topic-body>span { font-size:10px; }.library-strip nav { gap:12px; font-size:10px; }.library-strip p { max-width:440px; }.how-panel { grid-template-columns:repeat(4,minmax(0,1fr)) 1fr; gap:9px; padding:16px 15px 12px; }.how-step { gap:9px; }.step-number { width:29px; height:29px; font-size:16px; }.how-step h3 { font-size:11px; }.how-step p { font-size:9px; }.how-landscape { margin-right:-15px; margin-bottom:-12px; padding-right:13px; }.how-landscape small { font-size:7px; white-space:normal; }.footer-grid { gap:20px; }.footer-group { padding-left:20px; }.footer-about p { font-size:10px; }.footer-group>div { gap:9px 12px; font-size:10px; } }
@media(max-width:1000px) { .site-header nav { gap:15px; }.header-inner { gap:15px; }.nav-search { width:190px; }.brand strong { font-size:20px; }.brand small { font-size:7px; letter-spacing:1px; }.brand>img { width:40px; height:40px; }.hero-inner { grid-template-columns:1.2fr 1fr; }.hero h1 { font-size:35px; }.hero h1 span { font-size:42px; }.hero-description br { display:none; }.hero-copy { padding-left:5px; }.metrics { gap:20px; }.metrics>div { gap:8px; }.metrics strong { font-size:19px; }.metrics small { font-size:9px; }.art-label { padding:7px 10px; font-size:12px; }.art-words { display:none; }.art-note { right:-10px; }.categories-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }.category-card { padding:17px 10px 12px; }.category-card h3 { font-size:14px; }.category-card p { font-size:12px; }.category-foot small { font-size:10px; }.docs-grid,.projects-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.content-card { padding:17px; }.content-card h3 { font-size:15px; }.content-card>p { font-size:13px; min-height:65px; }.tags { min-height:21px; }.tags span { font-size:10px; }.card-meta { font-size:11px; }.status { font-size:10px; }.topics-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.topic-cover { height:105px; }.topic-body { padding:12px; }.topic-body h3 { font-size:14px; }.topic-body p { font-size:12px; min-height:0; }.topic-body>span { font-size:11px; }.library-strip { align-items:start; flex-direction:column; gap:12px; }.library-strip p { max-width:none; }.library-strip nav { font-size:12px; gap:20px; }.how-panel { grid-template-columns:repeat(4,minmax(0,1fr)); padding:20px; }.how-landscape { display:none; }.how-step p { font-size:10px; }.how-step h3 { font-size:12px; }.footer-grid { grid-template-columns:1.4fr 1fr 1fr; }.footer-mission { display:none; } }
@media(max-width:800px) { .shell { width:calc(100% - 40px); }.site-header { height:66px; }.header-inner { gap:15px; }.site-header nav { display:none; position:absolute; top:66px; left:0; right:0; background:#fff; padding:16px 22px 20px; box-shadow:0 12px 20px #0c523310; grid-template-columns:repeat(4,1fr); gap:14px; }.site-header nav.is-open { display:grid; }.site-header nav>a { padding:8px 0; }.site-header nav>a[aria-current]:after { bottom:0; }.menu-toggle { display:block; }.nav-search { width:210px; margin-left:auto; }.hero-inner { min-height:380px; grid-template-columns:1.4fr 1fr; }.hero-copy { padding:30px 0 25px; }.hero h1 { font-size:32px; }.hero h1 span { font-size:38px; }.hero-promise { font-size:14px; }.hero-description { font-size:12px; }.hero-search .icon { margin-left:12px; height:19px; width:19px; }.hero-search button { padding:8px 20px; min-width:68px; }.hero-search input { padding:10px 7px; }.hot-search { gap:5px; }.metrics { gap:15px; }.metrics>div { gap:6px; }.metrics .icon { height:27px; width:27px; }.metrics strong { font-size:17px; }.metrics small { font-size:8px; }.metrics>div+div:before { left:-8px; }.hero-art { margin-left:-12px; }.hero-illustration { width:130%; right:-50px; }.label-doc { left:10%; top:19%; }.label-github { right:-5%; top:38%; font-size:11px; }.art-note { bottom:45px; font-size:11px; letter-spacing:2px; }.section-heading h2 { font-size:19px; }.section-heading p { font-size:11px; }.section-heading>a { font-size:11px; }.homepage-content>section { margin-bottom:24px; }.content-card { padding:13px; }.content-card h3 { font-size:13px; }.content-card>p { font-size:12px; min-height:80px; }.tags { min-height:44px; }.how-panel { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }.how-step p { font-size:12px; }.how-step h3 { font-size:14px; }.how-step .icon { margin-bottom:8px; }.step-arrow { right:20px; }.how-step:nth-child(2) .step-arrow { display:none; }.step-number { width:32px; height:32px; }.footer-bottom { flex-direction:column; gap:8px; }.inner-page .docs-grid,.inner-page .projects-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.inner-page .categories-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:540px) { .shell { width:calc(100% - 32px); }.header-inner { gap:10px; }.brand>img { width:39px; height:39px; }.brand strong { font-size:21px; }.brand small { font-size:7px; }.nav-search { width:34px; border:0; background:transparent; position:relative; overflow:visible; }.nav-search .icon { margin-left:5px; width:19px; height:19px; }.nav-search input { position:absolute; opacity:0; right:0; width:34px; cursor:pointer; }.nav-search:focus-within { position:absolute; left:16px; right:55px; width:auto; z-index:5; height:42px; background:#fff; border:1px solid #b7d6c2; }.nav-search:focus-within input { position:static; opacity:1; width:100%; cursor:text; }.nav-search:focus-within button { position:static; width:auto; height:auto; margin:0; clip:auto; overflow:visible; padding:8px 12px; }.menu-toggle { font-size:24px; }.hero-inner { display:block; min-height:0; }.hero-art { display:none; }.hero-copy { padding:30px 0 25px; }.hero h1 { font-size:35px; line-height:1.22; letter-spacing:.7px; }.hero h1 span { font-size:41px; letter-spacing:.5px; }.hero-promise { font-size:15px; margin-top:12px; }.hero-description { font-size:13px; line-height:1.7; margin-top:7px; margin-bottom:17px; }.hero-search { height:49px; }.hero-search input { font-size:11px; }.hero-search button { min-width:70px; }.hot-search { margin-top:14px; gap:6px; }.hot-search a { font-size:10px; }.hot-search strong { font-size:10px; }.metrics { justify-content:space-between; gap:10px; margin-top:24px; }.metrics>div { gap:7px; }.metrics .icon { width:26px; height:26px; }.metrics strong { font-size:18px; }.metrics small { font-size:8px; }.metrics>div+div:before { display:none; }.homepage-content { padding-top:23px; }.section-heading { gap:8px; align-items:flex-start; margin-bottom:13px; }.section-heading>div { gap:8px; padding-left:8px; }.section-heading>div>.icon { width:21px; height:21px; }.section-heading h2 { font-size:18px; }.section-heading p { font-size:10px; max-width:240px; line-height:1.6; }.section-heading>a { font-size:10px; gap:3px; margin-top:4px; }.section-heading>a .icon { width:13px; height:13px; }.categories-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }.category-card { padding:17px 9px 13px; }.category-card h3 { font-size:14px; }.category-card p { font-size:12px; }.category-card:last-child { grid-column:1 / -1; }.category-card:last-child .category-foot { margin-top:7px; }.category-foot small { font-size:10px; }.docs-grid,.projects-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }.content-card { padding:12px; border-radius:9px; }.card-top { gap:3px; min-height:39px; margin-bottom:10px; }.product-logo { width:35px; height:35px; }.status { font-size:8px; padding:3px 5px; }.content-card h3 { font-size:12px; min-height:35px; margin-bottom:7px; }.content-card>p { font-size:11px; min-height:90px; margin-bottom:10px; line-height:1.6; }.tags { gap:4px; margin-bottom:9px; min-height:42px; }.tags span { font-size:9px; padding:2px 5px; }.card-meta { font-size:9px; gap:4px; }.project-language { font-size:9px; padding:3px 5px; }.project-card h3 { min-height:20px; }.project-card>p { min-height:89px; }.snapshot-note { font-size:8px; }.topics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.topic-cover { height:79px; }.topic-body { padding:10px; }.topic-body h3 { font-size:12px; }.topic-body p { font-size:10px; min-height:30px; }.topic-body>span { font-size:10px; }.library-strip { padding:15px; }.library-strip>div { gap:9px; align-items:flex-start; }.library-strip h2 { font-size:15px; }.library-strip p { font-size:11px; line-height:1.7; }.library-strip nav { gap:10px; font-size:10px; flex-wrap:wrap; }.how-panel { padding:17px 13px; gap:23px 15px; }.how-step { gap:8px; }.step-number { width:24px; height:24px; font-size:14px; }.how-step .icon { width:23px; height:23px; }.how-step h3 { font-size:11px; }.how-step p { font-size:9px; }.step-arrow { right:0; font-size:12px; }.footer-grid { grid-template-columns:1fr 1fr; gap:20px; }.footer-about { grid-column:1 / -1; }.footer-about p { font-size:11px; }.footer-group { padding:0; border:0; }.footer-group>div { font-size:11px; gap:9px 14px; }.footer-bottom { font-size:8px; }.footer-bottom>span>a { display:block; padding:3px 0 0; }.footer-bottom>div { flex-wrap:wrap; gap:14px; }.inner-page h1 { font-size:27px; }.page-intro { font-size:14px; }.inner-page .categories-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.inner-page .docs-grid,.inner-page .projects-grid,.inner-page .topics-grid,.resource-list { grid-template-columns:1fr; }.inner-page .content-card h3 { font-size:17px; min-height:0; }.inner-page .content-card>p { min-height:0; font-size:13px; }.inner-page .tags { min-height:0; }.inner-page .card-meta { font-size:12px; }.inner-page .status { font-size:10px; }.article-panel { padding:20px; font-size:14px; }.article-panel dl { grid-template-columns:1fr; gap:4px; padding:14px; }.article-panel dd { margin-bottom:8px; }.detail-actions { gap:16px; }.content-note { font-size:12px; }.filter-links { gap:8px; }.filter-links a { padding:5px 10px; font-size:12px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }
/* Blend the lightweight illustration into the mint hero without a rectangular edge. */
.hero-illustration { mask-image:linear-gradient(90deg,transparent,#000 15%,#000 88%,transparent),linear-gradient(0deg,transparent,#000 13%,#000 88%,transparent); mask-composite:intersect; }
.legacy-stat-widget { text-align:center; font-size:10px; color:#809086; }
.version-note { display:block; font-size:9px; color:#879489; margin:-4px 0 10px; line-height:1.4; }

.pagination{display:flex;justify-content:center;gap:10px;margin:28px 0;flex-wrap:wrap}.pagination a{display:grid;place-items:center;min-width:40px;min-height:40px;border:1px solid #d8e9e0;border-radius:8px;background:#fff}.pagination a[aria-current="page"]{background:#168554;color:#fff;border-color:#168554}

.sponsor-card .card-meta>span { flex-shrink:0; }

/* Copyright, live statistics and legal links share one desktop footer row. */
.footer-bottom { display:grid; grid-template-columns:max-content minmax(0,1fr) max-content; align-items:center; }
.footer-bottom>.legacy-stat-widget { display:block; min-width:0; font-size:inherit; color:inherit; }
.footer-legal-links { white-space:nowrap; }
@media(max-width:800px) {
  .footer-bottom { grid-template-columns:1fr; justify-items:start; }
  .footer-bottom>.legacy-stat-widget { width:100%; text-align:left; }
}

/* Seven curated learning directions share the site's document styling. */
.learning-path { margin:28px 0; padding:24px; border:1px solid var(--line); border-radius:12px; background:#fff; scroll-margin-top:90px; }
.path-intro { color:#667d70; margin:0 0 20px; line-height:1.8; }
.learning-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; padding:0; margin:18px 0 28px; list-style:none; counter-reset:learning-step; }
.learning-steps>li { counter-increment:learning-step; background:#f1f9f5; border:1px solid var(--line); border-radius:10px; padding:20px; min-width:0; }
.learning-steps>li:before { content:counter(learning-step,decimal-leading-zero); display:block; color:var(--green); font-size:23px; font-weight:700; margin-bottom:12px; }
.learning-steps h3 { font-size:17px; margin-bottom:10px; }
.learning-steps p { color:#667d70; font-size:14px; line-height:1.8; margin-bottom:16px; }
.learning-links { display:flex; flex-direction:column; gap:10px; }
.learning-links a { color:var(--green); font-size:14px; overflow-wrap:anywhere; }
.learning-links a:hover { text-decoration:underline; }
@media(max-width:800px) { .learning-steps { grid-template-columns:1fr; }.learning-path { padding:18px; } }

.featured-categories { grid-template-columns:repeat(5,minmax(0,1fr)); }
.scenarios-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px; }
.scenario-card { min-width:0; }
.status.reference { background:#edf3fa; color:#456582; }
@media(max-width:1000px) { .featured-categories { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:800px) { .scenarios-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:540px) { .featured-categories { grid-template-columns:repeat(2,minmax(0,1fr)); }.featured-categories .category-card:last-child { grid-column:auto; }.scenarios-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.direction-grid { grid-template-columns:repeat(7,minmax(0,1fr)); }
.category-group { margin:32px 0; }
.beginner-entry { display:flex; justify-content:space-between; align-items:center; gap:22px; padding:22px; margin:0 0 30px; background:#eaf7ef; border:1px solid #cbe5d5; border-radius:12px; }
.beginner-entry strong { color:#165637; font-size:18px; }
.beginner-entry p { margin-top:6px; color:#667d70; font-size:13px; }
.beginner-entry nav { display:flex; flex-wrap:wrap; gap:10px; flex-shrink:0; }
.beginner-entry a { padding:8px 12px; background:#fff; color:var(--green); border-radius:7px; font-size:13px; }
@media(max-width:1000px) { .beginner-entry { align-items:start; flex-direction:column; }.beginner-entry nav { flex-shrink:1; } }
@media(max-width:540px) { .direction-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.beginner-entry { padding:17px; }.beginner-entry a { font-size:12px; } }

/* Compact seven-column desktop directory; retain readable tablet/mobile cards. */
.direction-grid .category-card,.scenarios-grid .category-card { padding:13px 7px 10px; }
.direction-grid .category-card>.icon,.scenarios-grid .category-card>.icon { width:27px; height:27px; margin-bottom:6px; }
.direction-grid .category-card h3,.scenarios-grid .category-card h3 { margin-bottom:5px; }
.direction-grid .category-foot,.scenarios-grid .category-foot { margin-top:7px; }
@media(max-width:1000px) { .direction-grid,.inner-page .direction-grid,.scenarios-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:540px) { .direction-grid,.inner-page .direction-grid,.scenarios-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* Keep both seven-column sections aligned at every responsive breakpoint. */
.direction-grid,.scenarios-grid { gap:12px; }

.filter-links a[aria-current="page"] { background:var(--green); color:#fff; }
.trending-list { display:grid; gap:14px; }
.trending-card { display:grid; grid-template-columns:40px minmax(0,1fr); gap:15px; padding:24px; background:#fff; border:1px solid var(--line); border-radius:10px; }
.trend-rank { font-size:22px; color:var(--green); font-weight:700; }
.trending-card h2 { font-size:19px; margin:0 0 8px; overflow-wrap:anywhere; }
.trending-card p { line-height:1.8; overflow-wrap:anywhere; }
.trend-description { margin:10px 0; }
.trending-card details { color:var(--muted); font-size:13px; margin:10px 0; }
.trending-card summary { cursor:pointer; }
.trend-meta { display:flex; flex-wrap:wrap; gap:8px 20px; color:#667d70; font-size:12px; margin-top:13px; }
@media(max-width:540px) { .trending-card { padding:16px; gap:9px; grid-template-columns:27px minmax(0,1fr); }.trending-card h2 { font-size:16px; }.trending-card p { font-size:13px; } }

.category-resources>summary { cursor:pointer; color:var(--green); font-size:14px; padding:12px 0; }
.category-resources[open]>summary { margin-bottom:12px; }

.category-back { margin:0 0 22px; color:var(--green); font-size:14px; }

/* Compact product navigation, shared by all seven creative directories. */
.inner-page.scenario-page { min-height:0; padding-bottom:48px; }
.scenario-page .page-intro { margin-bottom:18px; }
.scenario-tabs { display:flex; flex-wrap:wrap; gap:6px; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--line); }
.scenario-tabs a { padding:7px 13px; font-size:13px; border-radius:6px; color:#576b60; }
.scenario-tabs a:hover { background:#eaf5ee; color:var(--green); }
.scenario-tabs a[aria-current="page"] { background:var(--deep); color:#fff; }
.website-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.website-heading h2 { font-size:17px; font-weight:650; }
.website-heading>span { font-size:12px; color:var(--muted); }
.website-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.website-card { display:grid; grid-template-columns:38px minmax(0,1fr) 16px; gap:12px 10px; align-items:start; padding:17px; border:1px solid #dae8e0; border-radius:10px; background:#fff; transition:border-color .16s,box-shadow .16s; }
.website-card:hover { border-color:#66ae8d; box-shadow:0 4px 14px #1655350a; }
.website-badge { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:#e2f3ea; color:#15744b; font-size:19px; font-weight:750; }
.website-card[data-site="gemini"] .website-badge,.website-card[data-site="vidu"] .website-badge { background:#eaf0ff; color:#3869b6; }
.website-card[data-site="qianwen"] .website-badge,.website-card[data-site="jimeng"] .website-badge { background:#f0ebfa; color:#70509b; }
.website-card[data-site="doubao"] .website-badge,.website-card[data-site="fish-audio"] .website-badge { background:#fff0e7; color:#a66a37; }
.website-card[data-site="midjourney"] .website-badge,.website-card[data-site="runway"] .website-badge,.website-card[data-site="elevenlabs"] .website-badge { background:#eef0f2; color:#32414b; }
.website-copy { min-width:0; }
.website-copy h3 { font-size:15px; line-height:1.4; margin-bottom:5px; color:var(--ink); }
.website-copy p { font-size:12px; line-height:1.6; color:#708078; }
.website-arrow { color:#8a9b92; font-size:17px; line-height:1.3; }
.website-domain { grid-column:1 / 3; color:#7d8c84; font-size:11px; overflow-wrap:anywhere; padding-top:9px; border-top:1px solid #eff4f0; }
.website-visit { grid-column:3; grid-row:2; justify-self:end; align-self:end; white-space:nowrap; font-size:11px; color:var(--green); }
@media(max-width:1199px) { .website-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:900px) { .website-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:540px) {
 .website-grid { grid-template-columns:1fr; gap:9px; }
 .website-card { padding:13px 14px; gap:6px 11px; grid-template-columns:38px minmax(0,1fr) 22px; }
 .website-badge { grid-row:1 / 3; }
 .website-domain { grid-column:2; grid-row:2; padding:0; border:0; }
 .website-arrow { grid-column:3; grid-row:1; }
 .website-visit { grid-column:3; grid-row:2; }
 .website-copy p { margin-right:8px; }
 .scenario-tabs { gap:4px; padding-bottom:14px; margin-bottom:16px; }
 .scenario-tabs a { font-size:12px; padding:6px 10px; }
 .inner-page.scenario-page { padding-top:20px; padding-bottom:30px; }
}

/* Homepage selections: five cards; retain the existing smaller-screen layouts. */
@media (min-width:1001px) {
  .homepage-content #documents .docs-grid,
  .homepage-content #github .projects-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
}
.community-content {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.community-content section {min-width:0;padding:24px;border:1px solid var(--line,#dcebe5);border-radius:14px;background:#fff}
.community-content section:has(.community-table) {grid-column:1/-1}
.community-content h2 {margin:0 0 14px;font-size:20px}
.community-content p {line-height:1.8;overflow-wrap:anywhere}
.community-content a {color:#078350}
.community-content img {max-width:100%;height:auto}
.community-highlight {color:#d84c4c}
.community-table-scroll {overflow-x:auto}
.community-table {width:100%;border-collapse:collapse;font-size:14px;line-height:1.7}
.community-table th,.community-table td {padding:12px 16px;border-bottom:1px solid #e4eee9;text-align:left}
.community-table th {background:#eef8f2;color:#187247;white-space:nowrap}
.community-table td:first-child {white-space:nowrap}
.community-table tbody tr:hover {background:#f4faf6}
@media(max-width:640px) {
  .community-content {grid-template-columns:1fr;gap:14px}
  .community-content section {padding:18px}
  .community-table {min-width:700px}
}

/* Compact, readable ranking rows with descriptions always visible. */
.trending-page .page-intro {margin-bottom:18px}
.trend-toolbar {display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:16px}
.trend-toolbar .filter-links {margin:0;gap:8px}
.trend-toolbar .filter-links a {padding:5px 13px;font-size:13px}
.trending-page .content-note {margin:8px 0;font-size:12px;line-height:1.7}
.trending-page .trending-list {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px;align-items:start}
.trending-page .trending-card {min-width:0;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:16px;border:1px solid var(--line);border-radius:10px}
@media(max-width:760px) { .trending-page .trending-list {grid-template-columns:1fr;gap:10px} }
.trending-page .trending-card:hover {background:#f7fcf9}
.trending-page .trend-rank {font-size:17px;line-height:1.5;font-variant-numeric:tabular-nums}
.trending-page .trending-card h2 {font-size:17px;line-height:1.5;margin:0 0 5px}
.trending-page .trend-description {font-size:14px;line-height:1.7;margin:0;color:#42564e}
.trending-page .trend-meta {margin:8px 0 0;gap:5px 18px;font-variant-numeric:tabular-nums}
.trending-page .trend-meta span:last-child {color:#087e4b}
@media(max-width:540px) {
 .trending-page .trending-card {padding:14px 12px;grid-template-columns:23px minmax(0,1fr);gap:8px}
 .trending-page .trending-card h2 {font-size:15px}
 .trending-page .trend-description {font-size:13px}
 .trending-page .trend-meta {font-size:11px;gap:5px 12px}
 .trend-toolbar {gap:10px}
}
.trending-page .content-note {padding:0;border:0;background:none;color:var(--muted)}
.trending-page h1 {margin:18px 0 10px;font-size:30px;line-height:1.4}
.trending-page .breadcrumb {margin-bottom:12px}
@media(max-width:540px) {
 .trending-page {padding-top:20px}
 .trending-page h1 {font-size:23px;margin-top:16px}
}

/* Dedicated 360 × 720 detail-page ad, separated from all content controls. */
.detail-ad-sidebar {display:none}
.detail-main {min-width:0}
@media(min-width:1100px) {
 /* Reserve horizontal space only; the floating ad never contributes to article height. */
 .detail-main {width:calc(100% - 392px);max-width:880px}
 .detail-ad-sidebar {display:block;position:fixed;top:82px;right:max(44px,calc((100% - 1250px)/2));width:360px;max-height:calc(100vh - 98px);overflow-y:auto;z-index:10}
 .detail-ad-sticky {width:360px}
 .detail-ad-label {display:block;color:var(--muted);font-size:11px;line-height:20px;text-align:center;margin-bottom:6px}
 .detail-ad-sidebar ins {vertical-align:top}
 .detail-ad-sidebar:has(ins[data-ad-status="unfilled"]) {visibility:hidden}
}
@media(min-width:1100px) and (max-width:1199px) {
 .detail-ad-sidebar {right:32px}
}

/* About follows the community page's shared card layout. */
.about-content .about-welcome {grid-column:1/-1;margin:0;color:var(--muted)}
.about-gallery {grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.about-gallery img {display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
.about-content .about-story {grid-column:1/-1}
.about-content section p:last-child {margin-bottom:0}
@media(max-width:640px) {
 .about-gallery {gap:8px}
 .about-gallery img {border-radius:8px}
}