:root {
  --brand:#e87722; --brand-dark:#c85e10; --brand-soft:#fff6ef;
  --ink:#2c2c2c; --ink-deep:#202020; --muted:#666666; --subtle:#8a8a8a;
  --line:#e6e6e6; --paper:#ffffff; --wash:#f5f5f5;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; overflow-x:hidden; background:var(--wash); color:var(--ink); font-family:Inter,"Helvetica Neue","PingFang SC","Microsoft YaHei",Arial,sans-serif; line-height:1.7; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.content-nav { position:sticky; top:0; z-index:10; display:grid; min-height:78px; grid-template-columns:auto 1fr; align-items:center; gap:28px; padding:0 max(24px,calc((100vw - 1320px)/2)); border-bottom:1px solid rgba(44,44,44,.08); background:rgba(255,255,255,.96); backdrop-filter:blur(16px); }
.brand { display:flex; align-items:center; gap:12px; font-size:19px; font-weight:800; }
.brand span { position:relative; display:inline-flex; width:42px; height:42px; align-items:center; justify-content:center; border-radius:50%; background:var(--brand); color:#fff; font-size:17px; font-weight:900; }
.brand span i { position:absolute; right:7px; bottom:7px; width:8px; height:8px; border:2px solid #fff; border-radius:50%; background:var(--ink); }
.brand strong { display:block; font-size:19px; line-height:1.1; }
.brand small { display:block; margin-top:4px; color:var(--subtle); font-size:9px; font-weight:500; letter-spacing:.04em; }
.content-nav nav,.content-footer div:last-child { display:flex; align-items:center; justify-content:flex-end; gap:25px; color:var(--muted); font-size:11px; font-weight:700; white-space:nowrap; }
.content-nav nav a:hover { color:var(--brand-dark); }
.content-nav .nav-whitepaper { min-height:38px; padding:8px 14px; background:var(--brand); color:#fff; }
.content-shell { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:0 0 100px; }
.content-hero { position:relative; margin:0 calc((1180px - 100vw)/2); padding:100px max(20px,calc((100vw - 1180px)/2)) 82px; overflow:hidden; color:#fff; background:var(--ink-deep); }
.content-hero::after { position:absolute; top:0; right:0; width:9px; height:100%; background:var(--brand); content:""; }
.content-hero::before { position:absolute; right:9%; bottom:-190px; width:420px; height:420px; border:1px solid rgba(232,119,34,.32); border-radius:50%; content:""; box-shadow:0 0 0 75px rgba(232,119,34,.035); }
.content-hero.compact { padding-top:78px; padding-bottom:64px; }
.content-eyebrow { position:relative; z-index:2; margin:0 0 18px!important; color:var(--brand)!important; font-size:10px!important; font-weight:800; letter-spacing:.2em; }
.content-hero h1 { position:relative; z-index:2; max-width:840px; margin:0; font-size:clamp(46px,6vw,76px); font-weight:560; letter-spacing:-.06em; line-height:1.1; text-wrap:balance; }
.content-hero.compact h1 { font-size:clamp(40px,5vw,64px); }
.content-hero>p:not(.content-eyebrow) { position:relative; z-index:2; max-width:700px; margin:24px 0 0; color:rgba(255,255,255,.6); font-size:14px; line-height:1.9; }
.content-hero>span { position:relative; z-index:2; display:inline-flex; margin-top:28px; padding:7px 11px; border:1px solid rgba(232,119,34,.5); color:#fff; font-size:10px; }
.toolbar { display:flex; max-height:156px; flex-wrap:wrap; gap:8px; margin:34px 0; padding:20px; overflow:auto; border:1px solid var(--line); background:#fff; }
.tag { display:inline-flex; min-height:32px; align-items:center; gap:6px; padding:5px 11px; border:1px solid var(--line); background:var(--paper); color:var(--muted); font-size:11px; font-weight:700; }
.tag.active,.tag:hover { border-color:var(--brand); background:var(--brand); color:#fff; }
.tag span { opacity:.55; }
.article-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.article-card { position:relative; display:grid; min-height:300px; gap:18px; padding:30px; overflow:hidden; border:1px solid var(--line); background:var(--paper); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.article-card:nth-child(3n+1) { border-top:4px solid var(--brand); }
.article-card:hover { border-color:var(--brand); box-shadow:0 22px 55px rgba(44,44,44,.08); transform:translateY(-4px); }
.article-card h2 { margin:auto 0 0; font-size:25px; letter-spacing:-.035em; line-height:1.35; }
.article-card h2 a::after { position:absolute; inset:0; content:""; }
.article-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.8; }
.card-tags { display:flex; flex-wrap:wrap; gap:7px; }
.card-tags span { display:inline-flex; min-height:27px; align-items:center; padding:3px 9px; border:1px solid rgba(232,119,34,.3); background:var(--brand-soft); color:var(--brand-dark); font-size:9px; }
.card-foot { display:flex; align-self:end; align-items:center; justify-content:space-between; gap:14px; color:var(--subtle); font-size:10px; font-weight:700; }
.card-foot a { display:inline-flex; align-items:center; gap:8px; color:var(--brand-dark); }
.card-foot a::after { content:"→"; }
.article-layout { max-width:900px; margin:0 auto; padding-top:70px; }
.article-head { padding:0 30px 50px; text-align:center; }
.back-link { display:inline-block; margin-bottom:36px; color:var(--brand-dark); font-size:11px; font-weight:700; }
.article-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin-bottom:22px; }
.article-meta span { padding:5px 9px; border:1px solid rgba(232,119,34,.3); background:var(--brand-soft); color:var(--brand-dark); font-size:9px; }
.article-meta time { margin-left:8px; color:var(--subtle); font-size:10px; letter-spacing:.08em; }
.article-head h1 { margin:0; font-size:clamp(38px,5.2vw,64px); font-weight:560; letter-spacing:-.055em; line-height:1.16; text-wrap:balance; }
.article-head>p { max-width:740px; margin:24px auto 0; color:var(--muted); font-size:14px; line-height:1.85; }
.article-body { padding:54px clamp(28px,6vw,72px); border:1px solid var(--line); border-top:5px solid var(--brand); background:var(--paper); box-shadow:0 20px 55px rgba(44,44,44,.06); }
.article-body h2 { margin:46px 0 16px; font-size:31px; letter-spacing:-.035em; }
.article-body h2:first-child { margin-top:0; }
.article-body h3 { margin:30px 0 12px; font-size:23px; }
.article-body p,.article-body li { color:#4b4b4b; font-size:16px; line-height:1.95; }
.article-body p { margin:0 0 20px; }
.article-body ul,.article-body ol { margin:0 0 22px; padding-left:1.35rem; }
.article-body hr { margin:34px 0; border:0; border-top:1px solid var(--line); }
.article-body code { padding:2px 5px; background:var(--brand-soft); color:var(--brand-dark); }
.article-body pre { overflow-x:auto; padding:18px; background:var(--ink-deep); color:#f3f3f3; font-size:13px; line-height:1.7; }
.article-source { display:flex; justify-content:flex-end; margin-top:18px; color:var(--brand-dark); font-size:11px; font-weight:800; }
.related-section { margin-top:80px; }
.related-section>h2 { margin-bottom:24px; font-size:32px; letter-spacing:-.035em; }
.content-footer { display:grid; grid-template-columns:minmax(260px,1fr) auto; gap:30px; padding:48px max(24px,calc((100vw - 1320px)/2)); color:#fff; background:#171717; }
.content-footer strong { font-size:20px; }
.content-footer p { max-width:620px; margin:8px 0 0; color:rgba(255,255,255,.5); font-size:12px; }
.content-footer div:last-child { color:rgba(255,255,255,.55); }
.content-footer>small { grid-column:1/-1; padding-top:26px; border-top:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.32); font-size:9px; }
@media (max-width:980px) {
  .article-grid { grid-template-columns:1fr; }
  .content-hero { margin:0 -20px; padding-right:20px; padding-left:20px; }
}
@media (max-width:780px) {
  .content-nav { min-height:70px; }
  .brand small { display:none; }
  .content-nav nav { gap:12px; }
  .content-nav nav a:not(.nav-whitepaper) { display:none; }
  .content-nav .nav-whitepaper { padding:7px 11px; }
  .content-hero { padding-top:72px; padding-bottom:62px; }
  .content-hero h1 { font-size:42px; }
  .toolbar { max-height:180px; padding:16px; }
  .article-card { min-height:270px; padding:24px; }
  .article-head { padding-right:0; padding-left:0; }
  .article-head h1 { font-size:38px; }
  .article-body { padding:36px 22px; }
  .article-body h2 { font-size:27px; }
  .article-body p,.article-body li { font-size:15px; }
  .content-footer { grid-template-columns:1fr; }
  .content-nav nav { justify-content:flex-end; }
  .content-footer div:last-child { justify-content:flex-start; flex-wrap:wrap; }
  .card-foot { align-items:flex-start; flex-direction:column; }
}