:root {
  --ink:#21334c; --muted:#61738b; --page:#f5f9fd; --line:#d9e5f0; --card:#fff;
  --accent:#326ddd; --pale:#e8f0ff; --shadow:0 14px 37px rgba(27,61,100,.09);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-width:320px; margin:0; color:var(--ink); background:radial-gradient(circle at 8% 0,#e7f1ff 0,transparent 28rem),var(--page); font:16px/1.65 Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; }
a { color:inherit; }
.topbar { display:flex; align-items:center; gap:18px; width:min(1400px,calc(100% - 40px)); margin:auto; padding:22px 0; }
.topbar .back:last-child { margin-left:auto; }
.back { display:inline-flex; align-items:center; min-height:38px; color:#3268ca; font-size:13px; font-weight:800; text-decoration:none; }
.back:hover { text-decoration:underline; }
.page-shell { display:grid; grid-template-columns:210px minmax(0,1fr); gap:26px; width:min(1400px,calc(100% - 40px)); margin:0 auto; }
.side-nav { position:sticky; top:24px; align-self:start; padding:16px 12px; border:1px solid #dce7f0; border-radius:16px; background:rgba(255,255,255,.86); box-shadow:0 10px 25px rgba(29,60,98,.07); }
.side-nav p { margin:0 0 8px; color:#718298; font:800 11px ui-monospace,monospace; letter-spacing:.07em; }
.side-nav a { display:block; padding:8px 9px; border-radius:8px; color:#526780; font-size:13px; font-weight:750; text-decoration:none; }
.side-nav a:hover,.side-nav a:focus-visible { color:var(--accent); background:var(--pale); outline:none; }
.side-nav .back-nav { margin-top:8px; border-top:1px solid #e1eaf3; border-radius:0; color:var(--accent); }
.content { min-width:0; }
.hero { padding:26px 0 46px; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; margin:0 0 13px; color:var(--accent); font-size:13px; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
.eyebrow::before { width:22px; height:2px; background:currentColor; content:""; }
h1 { max-width:780px; margin:0; font-size:clamp(35px,5vw,62px); letter-spacing:-.06em; line-height:1.1; }
h1 span { color:var(--accent); }
.lede { max-width:730px; margin:21px 0 0; color:#50647d; font-size:clamp(16px,1.8vw,19px); }
.tags { display:flex; flex-wrap:wrap; gap:9px; padding:0; margin:24px 0 0; list-style:none; }
.tags li { padding:6px 11px; border:1px solid #d3e1ef; border-radius:99px; color:#4d627b; background:rgba(255,255,255,.76); font-size:12px; font-weight:750; }
.section { padding:12px 0 50px; scroll-margin-top:24px; }
.heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:18px; }
.heading h2 { margin:0; font-size:clamp(26px,3vw,37px); letter-spacing:-.045em; line-height:1.16; }
.heading p { max-width:510px; margin:0; color:var(--muted); font-size:14px; }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }
.card { padding:20px; border:1px solid #dce7f0; border-radius:20px; background:var(--card); box-shadow:0 8px 23px rgba(29,60,98,.06); }
.card h3 { margin:9px 0 0; font-size:20px; letter-spacing:-.025em; }
.card p { margin:8px 0 0; color:#566980; font-size:14px; }
.label { display:inline-flex; min-height:25px; align-items:center; padding:3px 9px; border-radius:99px; color:var(--accent); background:var(--pale); font:800 11px ui-monospace,monospace; letter-spacing:.06em; }
.diagram { position:relative; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; min-height:112px; margin-top:14px; padding:14px; overflow:hidden; border:1px solid #dce7f0; border-radius:14px; background:linear-gradient(135deg,#fff,var(--pale)); }
.node { display:grid; place-items:center; min-height:54px; padding:8px; border:2px solid var(--accent); border-radius:10px; color:var(--accent); background:#fff; font:800 11px/1.35 ui-monospace,monospace; text-align:center; }
.link { height:3px; border-radius:99px; background:repeating-linear-gradient(90deg,var(--accent) 0 7px,transparent 7px 12px); animation:flow 1.2s linear infinite; }
.pulse { position:absolute; top:19px; right:17px; width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 16%,transparent); animation:pulse 1.7s ease-in-out infinite; }
.list { padding:0; margin:13px 0 0; list-style:none; }
.list li { position:relative; padding-left:16px; color:#52667e; font-size:13px; }
.list li::before { position:absolute; top:.72em; left:1px; width:7px; height:7px; border-radius:50%; background:var(--accent); content:""; }
.chain { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; padding:20px; border:1px solid #dce7f0; border-radius:20px; background:#fff; box-shadow:var(--shadow); }
.chain div { min-height:86px; padding:12px; border-left:3px solid var(--accent); border-radius:0 11px 11px 0; background:#f8fbfe; }
.chain b { display:block; color:var(--accent); font:800 11px ui-monospace,monospace; }
.chain span { display:block; margin-top:5px; color:#4d6078; font-size:12px; font-weight:750; }
.qa { padding:22px; border:1px solid #dce7f0; border-radius:20px; background:#fff; box-shadow:var(--shadow); }
.qa h2 { margin:0; font-size:25px; letter-spacing:-.035em; }
.qa details { margin-top:10px; border:1px solid #e0e9f2; border-radius:11px; background:#f9fbfe; }
.qa summary { padding:11px; cursor:pointer; color:#40556f; font-size:14px; font-weight:800; }
.qa p { padding:0 12px 12px; margin:0; color:#596c83; font-size:13px; }
footer { padding:0 20px 34px; color:#8392a6; text-align:center; font-size:12px; }
@keyframes flow { to { background-position:24px 0; } }
@keyframes pulse { 50% { transform:scale(.72); opacity:.55; } }
@media (max-width:980px) { .page-shell { grid-template-columns:1fr; } .side-nav { position:static; display:flex; flex-wrap:wrap; gap:4px; } .side-nav p { flex-basis:100%; } .side-nav a { display:inline-block; } .side-nav .back-nav { margin-top:0; border-top:0; } }
@media (max-width:780px) { .cards { grid-template-columns:1fr; } .heading { display:block; } .heading p { margin-top:10px; } .chain { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .topbar,.page-shell { width:min(100% - 28px,1400px); } .hero { padding-top:17px; } .chain { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } }