.article-main{padding:24px 0 80px}@media(min-width:1024px){.article-main{padding:32px 0 120px}}.crumbs{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted-2);margin-bottom:24px}.crumbs a:hover{color:var(--ink-2)}.crumbs .cur{color:var(--ink)}@media(min-width:1024px){.crumbs{margin-bottom:32px}}.art-hero{display:flex;flex-direction:column;gap:24px;margin-bottom:56px}@media(min-width:1024px){.art-hero{flex-direction:row;gap:16px;margin-bottom:120px}}.art-hero-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:24px}.art-badge{align-self:flex-start;padding:4px 10px;border:1px solid var(--border);border-radius:6px;font-size:12px;font-weight:500;color:var(--ink)}.art-hero-text h1{font-size:clamp(26px,4vw,32px);font-weight:500;line-height:1.25;color:var(--ink)}.byline{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.byline .author{display:flex;align-items:center;gap:12px}.byline .author img{width:40px;height:40px;border-radius:50%}.byline .name{font-size:14px;font-weight:500;color:var(--ink)}.byline .meta{font-size:14px;color:var(--muted)}.art-hero-img{flex:1;min-width:0}.art-hero-img img{width:100%;height:auto;aspect-ratio:672 / 311;object-fit:cover;border-radius:var(--r-xl)}.art-body{display:flex;flex-direction:column;gap:40px;margin-bottom:56px}@media(min-width:1024px){.art-body{flex-direction:row;align-items:flex-start;gap:40px;margin-bottom:120px}}.art-side{display:flex;flex-direction:column;gap:40px;order:2}.art-content{order:1}@media(min-width:1024px){.art-side{width:328px;flex:none;position:sticky;top:88px;order:0}.art-content{order:0}}.toc{border:1px solid var(--border);border-radius:var(--r-lg);padding:16px}.toc h4,.toc .toc-h{font-size:16px;font-weight:500;color:var(--ink);margin-bottom:16px}.toc-list{display:flex;gap:16px}.toc-bar{width:4px;flex:none;border-radius:2px;background:var(--cta-bg);position:relative;overflow:hidden}.toc-fill{position:absolute;top:0;left:0;width:4px;height:22px;border-radius:2px;background:var(--green);transition:height .15s ease}.toc-items{display:flex;flex-direction:column;gap:16px}.toc-items a{font-size:12px;color:var(--muted);transition:color .15s ease}.toc-items a.on{font-weight:500;color:#181a1f}.toc-items a:hover{color:#181a1f}.share{display:flex;align-items:center;justify-content:space-between;gap:16px}.share>span{font-size:16px;color:var(--ink)}.share .icons{display:flex;gap:8px}.share .icons img{width:24px;height:24px}.art-cta{position:relative;overflow:hidden;background:#cbf2dc;border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:40px}.art-cta .t{font-size:16px;font-weight:500;color:var(--ink);margin-bottom:8px}.art-cta .d{font-size:14px;color:var(--muted);max-width:230px}.art-cta .btn{align-self:flex-start;position:relative;z-index:2}.art-cta .hand{position:absolute;right:0;bottom:0;width:104px;height:104px;pointer-events:none}.art-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:32px}.art-content h2{font-size:24px;font-weight:500;color:var(--ink)}.art-content p{font-size:16px;font-weight:400;line-height:1.5;color:var(--muted)}.callout{background:#eff6ff;border-radius:var(--r-lg);padding:32px;display:flex;flex-direction:column;gap:16px}.callout h3{font-size:16px;font-weight:700;color:var(--ink)}.art-list{display:flex;flex-direction:column;gap:12px}.art-list li{list-style:none;display:flex;align-items:center;gap:12px;font-size:18px;font-weight:400;color:var(--ink)}.art-list .dot{width:6px;height:6px;border-radius:50%;background:var(--muted);flex:none}.figure{display:flex;flex-direction:column;gap:16px}.figure img{width:100%;height:auto;aspect-ratio:992 / 400;object-fit:cover;border-radius:var(--r-lg)}.figure figcaption{font-size:14px;color:var(--muted)}.related h2{font-size:24px;font-weight:500;color:var(--ink);margin-bottom:32px}.art-cards{display:grid;grid-template-columns:1fr;gap:16px}@media(min-width:768px){.art-cards{grid-template-columns:repeat(3,1fr)}}.art-card img{width:100%;height:auto;aspect-ratio:443 / 277;object-fit:cover;border-radius:var(--r-lg);margin-bottom:16px}.art-card .cmeta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-bottom:8px}.art-card h3{font-size:16px;font-weight:500;color:var(--ink);margin-bottom:8px}.art-card .tags{display:flex;flex-wrap:wrap;gap:8px}.art-card .tag{padding:4px 8px;border:1px solid var(--border);border-radius:6px;font-size:12px;font-weight:500;color:var(--ink)}.art-card:hover h3{color:var(--green-hover)}