:root{
  --bg:#f6f4f2;
  --card:#ffffff;
  --text:#111111;
  --muted:#6b6b6b;
  --line:#ece7e2;
  --brand:#ff7a3d;
  --brand-dark:#f05f1f;
  --shadow:0 20px 60px rgba(17,17,17,.08);
  --radius:24px;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#faf8f6 0%,#f4f1ee 100%);
  line-height:1.75;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--max);margin:0 auto;padding:0 24px}
.site-top{
  position:sticky;top:0;z-index:20;
  backdrop-filter:blur(12px);
  background:rgba(250,248,246,.8);
  border-bottom:1px solid rgba(17,17,17,.06);
}
.site-top .inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.brand{font-weight:800;letter-spacing:.02em}
.brand span{color:var(--brand)}
.nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.nav a{font-size:14px;color:#444}
.nav .btn{
  padding:10px 16px;border-radius:999px;background:var(--brand);color:#fff;font-weight:700;
  box-shadow:0 12px 24px rgba(255,122,61,.22);
}
.article-hero{padding:56px 0 28px;position:relative;overflow:hidden}
.article-hero:before,
.article-hero:after{
  content:"";position:absolute;border-radius:999px;filter:blur(30px);opacity:.45;pointer-events:none
}
.article-hero:before{width:260px;height:260px;background:rgba(255,122,61,.18);right:-60px;top:-30px}
.article-hero:after{width:180px;height:180px;background:rgba(255,180,80,.22);left:-50px;bottom:0}
.kicker{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);padding:8px 14px;border-radius:999px;font-size:13px;color:#444;box-shadow:var(--shadow)}
.kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--brand)}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:end;margin-top:22px}
.hero-card,.panel,.article-card,.cta-box,.page-card,.summary-item{background:rgba(255,255,255,.8);border:1px solid rgba(17,17,17,.06);box-shadow:var(--shadow)}
.hero-card{padding:34px;border-radius:32px;position:relative;overflow:hidden}
.hero-card h1{font-size:clamp(32px,5vw,58px);line-height:1.1;margin:12px 0 18px;letter-spacing:-.03em}
.hero-card p{font-size:18px;color:#4f4f4f;max-width:820px;margin:0}
.hero-meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.meta-pill{padding:9px 14px;border-radius:999px;background:#f8f5f2;border:1px solid var(--line);font-size:13px;color:#555}
.hero-visual{padding:28px;border-radius:32px;min-height:280px;background:linear-gradient(135deg,#111 0%,#2b2b2b 62%,#3b3b3b 100%);color:#fff;position:relative;overflow:hidden}
.hero-visual .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px, transparent 1px);background-size:34px 34px;mask-image:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.1));}
.hero-visual .orb{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%, #ffc39c, #ff7a3d 42%, rgba(255,122,61,.06) 72%);filter:blur(2px);box-shadow:0 0 80px rgba(255,122,61,.35)}
.hero-visual .orb.a{width:150px;height:150px;top:38px;right:42px}
.hero-visual .orb.b{width:90px;height:90px;bottom:56px;left:34px}
.hero-visual .line{position:absolute;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);transform-origin:left center;opacity:.85}
.hero-visual .line.l1{width:210px;top:84px;left:36px;transform:rotate(18deg)}
.hero-visual .line.l2{width:180px;bottom:98px;right:42px;transform:rotate(-24deg)}
.hero-visual .copy{position:relative;z-index:1;max-width:280px}
.hero-visual strong{display:block;font-size:28px;line-height:1.2;margin:0 0 10px}
.hero-visual p{margin:0;color:rgba(255,255,255,.78);font-size:14px;line-height:1.8}
.main{padding:18px 0 84px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px}
.article-card{border-radius:28px;padding:34px}
.article-card h2{font-size:30px;line-height:1.25;margin:0 0 14px;letter-spacing:-.02em}
.article-card h3{font-size:22px;line-height:1.35;margin:34px 0 10px}
.article-card p{margin:0 0 16px;color:#313131}
.article-card ul{padding-left:20px;margin:10px 0 18px}
.article-card li{margin:8px 0;color:#313131}
.lead{font-size:18px;color:#424242}
.callout{margin:24px 0;padding:22px 22px 22px 20px;border-left:4px solid var(--brand);background:#fff7f2;border-radius:18px}
.diagram{margin:22px 0;padding:24px;border-radius:24px;background:linear-gradient(180deg,#fff,#faf6f2);border:1px solid var(--line)}
.diagram-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step{padding:18px;border-radius:18px;background:#fff;border:1px solid var(--line);min-height:120px;position:relative}
.step .num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:14px;margin-bottom:10px}
.step strong{display:block;font-size:16px;margin-bottom:6px}
.step p{font-size:13px;color:#666;line-height:1.65;margin:0}
.panel{border-radius:28px;padding:24px;position:sticky;top:88px;height:max-content}
.panel h4{margin:0 0 14px;font-size:17px}
.toc{display:grid;gap:10px;margin-bottom:18px}
.toc a{padding:12px 14px;border-radius:16px;background:#fff;border:1px solid var(--line);font-size:14px;color:#444}
.summary-grid{display:grid;gap:12px}
.summary-item{border-radius:20px;padding:18px}
.summary-item strong{display:block;font-size:15px;margin-bottom:6px}
.summary-item p{margin:0;color:#666;font-size:13px;line-height:1.7}
.cta-box{margin-top:20px;border-radius:24px;padding:24px;background:linear-gradient(135deg,#111 0%, #282828 100%);color:#fff;position:relative;overflow:hidden}
.cta-box:after{content:"";position:absolute;right:-18px;top:-18px;width:110px;height:110px;border-radius:50%;background:rgba(255,122,61,.25);filter:blur(8px)}
.cta-box h5{font-size:22px;line-height:1.3;margin:0 0 8px;position:relative;z-index:1}
.cta-box p{margin:0 0 16px;color:rgba(255,255,255,.76);position:relative;z-index:1}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:1}
.cta-actions a{padding:11px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.16)}
.cta-actions .primary{background:var(--brand);border-color:transparent}
.footer{padding:28px 0 56px;color:#666;font-size:13px}
.page-index{padding:44px 0 80px}
.page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.page-card{padding:26px;border-radius:28px}
.page-card .tag{display:inline-block;padding:8px 12px;border-radius:999px;background:#fff5ef;color:var(--brand-dark);font-weight:700;font-size:12px;margin-bottom:14px}
.page-card h3{font-size:26px;line-height:1.25;margin:0 0 12px}
.page-card p{color:#555;margin:0 0 18px}
.page-card a{display:inline-flex;align-items:center;gap:8px;color:var(--brand-dark);font-weight:700}
@media (max-width: 1100px){
  .layout{grid-template-columns:1fr}
  .panel{position:static}
}
@media (max-width: 900px){
  .hero-grid,.page-grid,.diagram-row{grid-template-columns:1fr}
  .hero-visual{min-height:220px}
  .article-card,.hero-card,.panel{padding:24px}
  .hero-card p,.lead{font-size:16px}
}