@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;600;700;800&display=swap');

:root { --bg:#f3f7f4; --surface:rgba(255,255,255,.82); --ink:#16252a; --muted:#617176; --line:#d9e5e0; --cyan:#118f82; --blue:#3867c7; --orange:#da6948; --yellow:#b68717; --mono:'DM Mono',monospace; --sans:'Manrope','Noto Sans SC',sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; color:var(--ink); background:var(--bg); font-family:var(--sans); line-height:1.6; }
a { color:inherit; text-decoration:none; }
button, a { -webkit-tap-highlight-color: transparent; }
#ambient-canvas { position:fixed; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; }
.topbar { position:fixed; top:0; right:0; left:0; z-index:20; display:flex; align-items:center; justify-content:space-between; height:76px; padding:0 5vw; border-bottom:1px solid rgba(147,170,161,.35); background:rgba(243,247,244,.78); backdrop-filter:blur(18px); }
.wordmark { display:flex; align-items:center; gap:11px; color:var(--ink); font-weight:800; letter-spacing:.06em; }
.wordmark span { display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--cyan); color:var(--cyan); border-radius:50%; font:500 10px var(--mono); }
.topbar-right { display:flex; align-items:center; gap:13px; color:#75868a; font:10px var(--mono); letter-spacing:.08em; }
.live-dot { width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 13px rgba(17,143,130,.55); }
.scroll-hint { display:flex; align-items:center; gap:7px; margin-left:22px; color:#56706e; }
.scroll-hint svg { width:13px; }
main { position:relative; z-index:1; }
.intro-stage { position:relative; display:grid; place-items:center; min-height:100svh; overflow:hidden; }
.intro-content { position:relative; z-index:2; width:min(900px, calc(100% - 40px)); text-align:center; }
.eyebrow { margin:0 0 25px; color:var(--cyan); font:500 11px var(--mono); letter-spacing:.18em; text-transform:uppercase; }
.intro-content h1 { margin:0; color:var(--ink); font-size:clamp(50px, 10vw, 142px); line-height:1; letter-spacing:-.07em; }
.intro-description { margin:28px auto 0; color:var(--muted); font-size:17px; }
.intro-line { display:flex; align-items:center; justify-content:center; gap:13px; margin-top:70px; color:#718388; font:10px var(--mono); letter-spacing:.1em; }
.intro-line span { width:36px; height:1px; background:var(--cyan); box-shadow:0 0 12px rgba(17,143,130,.45); }
.intro-line svg { width:14px; color:var(--cyan); }
.intro-index { position:absolute; right:5vw; bottom:9vh; color:#718388; font:18px var(--mono); letter-spacing:.08em; }
.intro-index span { color:#9baead; font-size:10px; }
.flow-intro { padding:170px 8vw 90px; border-top:1px solid var(--line); background:rgba(243,247,244,.68); }
.flow-intro-inner { width:min(720px, 100%); }
.flow-intro h2 { margin:0 0 25px; color:var(--ink); font-size:clamp(42px, 7vw, 92px); line-height:1.04; letter-spacing:-.065em; }
.flow-intro h2 span { color:var(--cyan); }
.flow-intro p:last-child { max-width:450px; color:var(--muted); font-size:16px; }
.waterfall { padding:0 5vw 170px; background:rgba(243,247,244,.68); }
.waterfall-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:24px; align-items:start; max-width:1300px; margin:auto; }
.flow-card { position:relative; display:block; min-width:0; grid-column:span 7; min-height:410px; padding:31px; border:1px solid rgba(129,157,148,.35); border-radius:8px; background:var(--surface); box-shadow:0 25px 70px rgba(53,83,71,.1); overflow:hidden; }
.flow-card.flow-offset { grid-column:6 / span 7; margin-top:100px; }
.flow-card::before { position:absolute; top:-110px; right:-80px; width:250px; height:250px; border:1px solid currentColor; border-radius:50%; opacity:.13; content:''; }
.flow-cyan { color:var(--cyan); }.flow-violet { color:#7a5bc7; background:rgba(252,250,255,.88); }.flow-orange { color:var(--orange); background:rgba(255,250,247,.9); }.flow-lime { color:#6f9b25; background:rgba(251,253,243,.9); }.flow-blue { color:var(--blue); background:rgba(247,250,255,.9); }
.flow-card-top { display:flex; justify-content:space-between; color:currentColor; font:10px var(--mono); letter-spacing:.11em; }.flow-card-top b { padding:3px 8px; border:1px solid currentColor; border-radius:2px; font-weight:400; }
.flow-card h3 { margin:65px 0 15px; max-width:100%; color:var(--ink); font-size:clamp(26px,3vw,43px); line-height:1.08; letter-spacing:-.045em; overflow-wrap:anywhere; word-break:break-word; }
.flow-card > p { max-width:500px; min-height:57px; margin:0; color:#617176; font-size:15px; overflow-wrap:anywhere; }
.flow-card pre { max-width:100%; margin:35px 0 28px; padding:19px; border:1px solid rgba(118,143,136,.23); border-radius:4px; background:#eef4f0; color:#36565a; font:12px/1.8 var(--mono); overflow-x:auto; overflow-y:hidden; white-space:pre; }
.flow-card footer { display:flex; align-items:center; justify-content:space-between; color:#728488; font:10px var(--mono); }.flow-card footer svg { width:18px; color:currentColor; }
.end-stage { position:relative; display:grid; place-items:center; min-height:480px; border-top:1px solid var(--line); background:rgba(243,247,244,.72); text-align:center; }.end-mark { color:var(--cyan); font:700 48px var(--mono); text-shadow:0 0 28px rgba(17,143,130,.22); }.end-stage p { margin:15px 0 8px; color:var(--ink); font-size:22px; }.end-stage small { color:#718388; font:10px var(--mono); letter-spacing:.15em; }
.footer { position:relative; z-index:1; display:flex; justify-content:space-between; padding:25px 5vw; border-top:1px solid var(--line); color:#66777b; background:rgba(243,247,244,.88); font:10px var(--mono); }.footer svg { width:13px; vertical-align:middle; }
@media (max-width:760px) { .topbar { height:64px; padding:0 20px; }.topbar-right > span:nth-child(2),.scroll-hint { display:none; }.intro-stage { min-height:100svh; min-height:100dvh; padding-top:64px; }.intro-content { width:calc(100% - 32px); }.intro-content h1 { max-width:100%; font-size:clamp(45px, 13vw, 58px); line-height:1.05; word-break:keep-all; overflow-wrap:break-word; }.intro-description { font-size:14px; }.intro-line { margin-top:52px; }.intro-index { right:20px; bottom:35px; font-size:14px; }.flow-intro { padding:110px 20px 65px; }.flow-intro h2 { max-width:100%; font-size:clamp(34px, 9vw, 49px); line-height:1.1; letter-spacing:-.045em; word-break:keep-all; overflow-wrap:break-word; }.flow-intro p:last-child { font-size:14px; }.waterfall { padding:0 16px 110px; }.waterfall-grid { display:block; width:100%; min-width:0; }.flow-card,.flow-card.flow-offset { width:100%; min-width:0; min-height:0; margin:0 0 18px; padding:23px; }.flow-card h3 { margin-top:50px; font-size:clamp(27px, 8vw, 32px); line-height:1.12; }.flow-card > p { font-size:14px; line-height:1.7; }.flow-card pre { width:100%; max-width:100%; min-width:0; margin-top:27px; padding:15px; font-size:10px; line-height:1.7; }.flow-card-top { min-width:0; gap:10px; }.flow-card-top span { min-width:0; overflow-wrap:anywhere; }.flow-card-top b { flex:0 0 auto; }.flow-card footer span { min-width:0; overflow-wrap:anywhere; }.footer { display:block; line-height:2; padding:20px; }.footer span { display:block; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }

/* 深度解析页 */
.reading-progress { position:fixed; top:76px; left:0; z-index:25; width:100%; height:3px; background:rgba(217,229,224,.55); }.reading-progress span { display:block; width:0; height:100%; background:var(--cyan); box-shadow:0 0 12px rgba(17,143,130,.45); transition:width .08s linear; }
.detail-page { position:relative; z-index:1; padding:150px 5vw 140px; }.detail-hero { width:min(980px,100%); margin:0 auto 110px; }.detail-back { display:inline-flex; align-items:center; gap:8px; margin-bottom:56px; color:#58716f; font:11px var(--mono); }.detail-back svg { width:15px; }.detail-meta { display:flex; flex-wrap:wrap; gap:18px; margin-bottom:24px; color:var(--cyan); font:10px var(--mono); letter-spacing:.08em; text-transform:uppercase; }.detail-meta span + span { color:#80928f; }.detail-hero h1 { max-width:900px; margin:0 0 28px; color:var(--ink); font-size:clamp(44px,7vw,92px); line-height:1.03; letter-spacing:-.065em; }.detail-hero > p { max-width:680px; margin:0; color:var(--muted); font-size:18px; }.detail-layout { display:grid; grid-template-columns:220px minmax(0,760px); gap:90px; width:min(1070px,100%); margin:0 auto; }.aside-sticky { position:sticky; top:118px; }.aside-label { display:block; margin-bottom:17px; color:#8aa09c; font:10px var(--mono); letter-spacing:.12em; }.detail-aside nav { display:grid; gap:8px; padding-left:12px; border-left:1px solid var(--line); }.detail-aside nav a { color:#8b9e9c; font-size:11px; line-height:1.45; }.detail-aside nav a.is-active { color:var(--cyan); }.copy-all { display:inline-flex; align-items:center; gap:7px; margin-top:28px; padding:8px 11px; border:1px solid #c8d9d3; border-radius:3px; color:#4d6c68; background:rgba(255,255,255,.55); font:10px var(--mono); cursor:pointer; }.copy-all svg { width:13px; }.copy-all.is-copied { color:var(--cyan); border-color:var(--cyan); }.detail-content { color:#485e60; font-size:16px; line-height:1.9; }.detail-content h2 { margin:72px 0 22px; padding-top:22px; border-top:1px solid var(--line); color:var(--ink); font-size:30px; line-height:1.2; letter-spacing:-.035em; }.detail-content h3 { margin:40px 0 13px; color:var(--ink); font-size:21px; }.detail-content p { margin:0 0 20px; }.detail-content blockquote { margin:26px 0; padding:18px 22px; border-left:3px solid var(--cyan); background:rgba(232,243,239,.72); color:#55716c; }.detail-content pre { position:relative; margin:26px 0 30px; padding:22px; border:1px solid #d2e0db; border-radius:5px; background:#f7faf8; box-shadow:0 14px 35px rgba(49,83,73,.08); overflow:auto; }.detail-content pre code { color:#315b5a; font:12px/1.75 var(--mono); }.copy-code { position:absolute; top:10px; right:10px; display:grid; place-items:center; width:28px; height:28px; border:1px solid #cdded8; border-radius:3px; color:#5c7772; background:#fff; cursor:pointer; }.copy-code svg { width:13px; }.copy-code.is-copied { color:var(--cyan); border-color:var(--cyan); }.detail-content code:not(pre code) { padding:2px 5px; border:1px solid #d6e3df; border-radius:3px; color:#1e766c; background:#eef5f1; font:12px var(--mono); }.detail-missing { display:grid; place-items:start; min-height:80vh; padding:180px 8vw; }.detail-missing h1 { margin:0 0 30px; font-size:64px; }.detail-missing .detail-back { margin:0; }
@media (max-width:760px) { .reading-progress { top:64px; }.detail-page { padding:110px 20px 90px; }.detail-hero { margin-bottom:72px; }.detail-back { margin-bottom:38px; }.detail-hero h1 { max-width:100%; font-size:clamp(36px, 11vw, 48px); line-height:1.1; word-break:keep-all; overflow-wrap:break-word; }.detail-hero > p { font-size:15px; }.detail-layout { display:block; }.detail-aside { display:none; }.detail-content { font-size:15px; }.detail-content h2 { margin-top:54px; font-size:27px; }.detail-content pre { width:100%; max-width:100%; min-width:0; margin-right:0; margin-left:0; padding:17px 52px 17px 17px; }.detail-content pre code { font-size:10px; }.detail-missing { padding:130px 20px; }.detail-missing h1 { font-size:47px; } }