/* 学习 · 课件组件(2026-10-18,配 fxisv-learn.js) * 只作用于文章正文 .detail-body;颜色沿用学习页暖黑 token(#main 上定义),固定定位的目录/看大图用字面色值。 */ /* JS 升级前先藏住钩子块,免得先闪原始列表再变样;脚本没跑起来 2.5 秒后自动露出来 */ html.fx-js #main .blog-main .detail-body [title^="fx:"]{visibility:hidden;animation:fxl-reveal 0s 2.5s forwards;} @keyframes fxl-reveal{to{visibility:visible}} #main .blog-main .detail-body .fxl{margin:36px 0;position:relative;} #main .blog-main .detail-body .fxl-k{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0 0 14px; font:600 12px/1.4 "SF Mono",Menlo,monospace;letter-spacing:.14em;color:var(--y);text-transform:uppercase;} #main .blog-main .detail-body .fxl-k b{font:700 15px/1.4 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:0;color:var(--fg);text-transform:none;} #main .blog-main .detail-body .fxl-btn{flex:none;background:none;border:1px solid var(--line-strong);color:var(--soft);font:500 12.5px/1 "SF Mono",Menlo,"PingFang SC",monospace; padding:8px 12px;cursor:pointer;transition:color .3s,border-color .3s,background .3s;} #main .blog-main .detail-body .fxl-btn:hover{border-color:var(--y);color:var(--y);} #main .blog-main .detail-body .fxl-btn.ok{background:var(--y);border-color:var(--y);color:#14110d;} #main .blog-main .detail-body .fxl :is(p,ul,ol):last-child{margin-bottom:0;} @keyframes fxl-up{from{opacity:0;transform:translateY(8px)}} /* ---- term 终端回放 ---- */ #main .blog-main .detail-body .fxl-term{background:#0c0a08;border:1px solid var(--line);} #main .blog-main .detail-body .fxl-tbar{display:flex;align-items:center;gap:10px;padding:9px 10px 9px 16px;border-bottom:1px solid var(--line); font:500 12.5px "SF Mono",Menlo,"PingFang SC",monospace;color:var(--mute);} #main .blog-main .detail-body .fxl-tbar i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--y);box-shadow:0 0 0 3px rgba(255,196,61,.16);} #main .blog-main .detail-body .fxl-tbar span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #main .blog-main .detail-body .fxl-tscr{padding:18px 20px 20px;font:14px/1.8 "SF Mono",Menlo,Consolas,"PingFang SC",monospace;color:#bdb3a2;overflow-x:auto;} #main .blog-main .detail-body .fxl-l{display:flex;gap:10px;opacity:0;transition:opacity .18s;} #main .blog-main .detail-body .fxl-l.on{opacity:1;} #main .blog-main .detail-body .fxl-l em{flex:none;font-style:normal;color:var(--y);} #main .blog-main .detail-body .fxl-l .w{position:relative;flex:1;min-width:0;white-space:pre-wrap;word-break:break-word;} #main .blog-main .detail-body .fxl-l .g{visibility:hidden;} #main .blog-main .detail-body .fxl-l .t{position:absolute;left:0;top:0;right:0;} #main .blog-main .detail-body .fxl-cmd .w,#main .blog-main .detail-body .fxl-in .w{color:#fff7e8;} #main .blog-main .detail-body .fxl-in em{color:#9a9081;} #main .blog-main .detail-body .fxl-cmt{color:#8f8676;} #main .blog-main .detail-body .fxl-ok{color:#ffd77a;} #main .blog-main .detail-body .fxl-ask .w{color:#fff7e8;} #main .blog-main .detail-body .fxl-err,#main .blog-main .detail-body .fxl-err em{color:#e8936f;} #main .blog-main .detail-body .fxl-l.cur .t::after,#main .blog-main .detail-body .fxl-tscr.done .fxl-end .t::after{content:"";display:inline-block;width:.55em;height:1.15em;margin-left:1px; vertical-align:-.2em;background:var(--y);animation:fxl-blink 1.05s steps(1) infinite;} #main .blog-main .detail-body .fxl-end{opacity:0;} @keyframes fxl-blink{50%{opacity:0}} /* ---- chat 对话回放 ---- */ #main .blog-main .detail-body .fxl-msgs{display:flex;flex-direction:column;gap:12px;} #main .blog-main .detail-body .fxl-m{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;} html.fx-js #main .blog-main .detail-body .fxl-m{opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease);} html.fx-js #main .blog-main .detail-body .fxl-m.on{opacity:1;transform:none;} #main .blog-main .detail-body .fxl-who{padding-top:13px;font:600 12px/1.4 "SF Mono",Menlo,"PingFang SC",monospace;color:var(--mute);letter-spacing:.04em;} #main .blog-main .detail-body .fxl-me .fxl-who{color:var(--y);} #main .blog-main .detail-body .fxl-say{position:relative;padding:12px 18px;border-left:1px solid var(--line-strong);color:var(--fg);font-size:16px;line-height:1.85;} #main .blog-main .detail-body .fxl-me .fxl-say{background:#1c1813;border-left-color:var(--y);} #main .blog-main .detail-body .fxl-say>:first-child{margin-top:0;} #main .blog-main .detail-body .fxl-say>:last-child{margin-bottom:0;} #main .blog-main .detail-body .fxl-m.typing .fxl-say>*{visibility:hidden;} #main .blog-main .detail-body .fxl-m.typing .fxl-say::after{content:"";position:absolute;left:18px;top:22px;width:6px;height:6px;border-radius:50%;background:var(--soft); box-shadow:12px 0 0 var(--soft),24px 0 0 var(--soft);animation:fxl-dots 1s infinite;} @keyframes fxl-dots{50%{opacity:.25}} #main .blog-main .detail-body .fxl-replay{margin-top:14px;} /* ---- vs 改前改后 ---- */ #main .blog-main .detail-body .fxl-tabs{position:relative;display:flex;gap:30px;border-bottom:1px solid var(--line);margin-bottom:18px;} #main .blog-main .detail-body .fxl-tab{display:flex;align-items:center;gap:9px;background:none;border:0;padding:2px 0 13px;color:var(--mute);font-size:16px;font-weight:700;cursor:pointer;transition:color .3s;} #main .blog-main .detail-body .fxl-tab s{text-decoration:none;font:700 12px "SF Mono",Menlo,monospace;color:inherit;} #main .blog-main .detail-body .fxl-tab.bad.on s{color:#e8936f;} #main .blog-main .detail-body .fxl-tab.good s{color:var(--y);} #main .blog-main .detail-body .fxl-tab:hover,#main .blog-main .detail-body .fxl-tab.on{color:var(--fg);} #main .blog-main .detail-body .fxl-tab.hint{animation:fxl-hint 1.6s var(--ease) 3;} @keyframes fxl-hint{40%{color:var(--y);transform:translateY(-3px)}} #main .blog-main .detail-body .fxl-tabs u{position:absolute;bottom:-1px;left:0;height:2px;background:var(--y);transition:left .5s var(--ease),width .5s var(--ease);} #main .blog-main .detail-body .fxl-pane{display:none;} #main .blog-main .detail-body .fxl-pane.on{display:block;animation:fxl-up .45s var(--ease);} #main .blog-main .detail-body .fxl-pane.bad :is(blockquote,pre){border-left-color:#8a5a45;color:var(--soft);} /* ---- flow 流程点亮 ---- */ #main .blog-main .detail-body .fxl-rail{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;} #main .blog-main .detail-body .fxl-rail::before,#main .blog-main .detail-body .fxl-rail::after{content:"";position:absolute;left:17px;top:17px;height:1px;} #main .blog-main .detail-body .fxl-rail::before{width:var(--track,0px);} #main .blog-main .detail-body .fxl-rail::before{background:var(--line-strong);} #main .blog-main .detail-body .fxl-rail::after{width:var(--fill,0px);background:var(--y);box-shadow:0 0 10px rgba(255,196,61,.55);transition:width .9s var(--ease);} #main .blog-main .detail-body .fxl-st{position:relative;z-index:1;display:block;background:none;border:0;padding:0 4px 0 0;text-align:left;cursor:pointer;color:var(--mute);} #main .blog-main .detail-body .fxl-st i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#14110d;border:1px solid var(--line-strong); font:700 16px/1 "DIN Condensed","DIN Alternate","SF Mono",sans-serif;font-style:normal;color:var(--mute);transition:all .5s var(--ease);} #main .blog-main .detail-body .fxl-st>span{display:block;margin-top:12px;font-size:15px;font-weight:700;line-height:1.45;transition:color .4s;} #main .blog-main .detail-body .fxl-st .fxl-sd{display:none;} #main .blog-main .detail-body .fxl-st.done i{border-color:var(--y);color:var(--y);} #main .blog-main .detail-body .fxl-st.on i{background:var(--y);border-color:var(--y);color:#14110d;box-shadow:0 0 0 6px rgba(255,196,61,.14);} #main .blog-main .detail-body .fxl-st:is(.on,.done)>span{color:var(--fg);} #main .blog-main .detail-body .fxl-desc{margin-top:22px;min-height:4.2em;padding:14px 2px 0;border-top:1px solid var(--line-strong);color:var(--fg);font-size:16px;line-height:1.8;} #main .blog-main .detail-body .fxl-desc.swap{animation:fxl-up .4s var(--ease);} #main .blog-main .detail-body .fxl-loop{display:flex;gap:10px;align-items:center;margin-top:12px;font:500 13px/1.5 "SF Mono",Menlo,"PingFang SC",monospace;color:var(--mute);transition:color .5s;} #main .blog-main .detail-body .fxl-loop i{font-style:normal;font-size:18px;display:inline-block;transition:transform .9s var(--ease);} #main .blog-main .detail-body .fxl-flow.loop-on .fxl-loop{color:var(--y);} #main .blog-main .detail-body .fxl-flow.loop-on .fxl-loop i{transform:rotate(-360deg);} @media (max-width:720px){ #main .blog-main .detail-body .fxl-rail{grid-auto-flow:row;grid-auto-rows:auto;gap:0;} #main .blog-main .detail-body .fxl-rail::before{width:1px;height:var(--track,0px);} #main .blog-main .detail-body .fxl-rail::after{width:1px;height:var(--fill,0px);transition:height .9s var(--ease);} #main .blog-main .detail-body .fxl-st{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:16px;padding:0 0 18px;} #main .blog-main .detail-body .fxl-st>span{margin-top:6px;} #main .blog-main .detail-body .fxl-st .fxl-sd{display:block;grid-column:2;margin-top:4px;font-size:15px;font-weight:400;line-height:1.75;color:var(--mute);transition:color .4s;} #main .blog-main .detail-body .fxl-st:is(.on,.done) .fxl-sd{color:var(--soft);} #main .blog-main .detail-body .fxl-desc{display:none;} } /* ---- pick 按需挑选 ---- */ #main .blog-main .detail-body .fxl-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;} #main .blog-main .detail-body .fxl-chip{background:none;border:1px solid var(--line-strong);color:var(--soft);padding:8px 14px;font-size:14.5px;line-height:1.3;cursor:pointer;transition:all .3s var(--ease);} #main .blog-main .detail-body .fxl-chip:hover{border-color:var(--y);color:var(--fg);} #main .blog-main .detail-body .fxl-chip.on{background:var(--y);border-color:var(--y);color:#14110d;font-weight:700;} #main .blog-main .detail-body .fxl-res{min-height:5em;padding:16px 2px 0;border-top:1px solid var(--line-strong);color:var(--fg);font-size:16px;line-height:1.85;} #main .blog-main .detail-body .fxl-res.swap{animation:fxl-up .4s var(--ease);} #main .blog-main .detail-body .fxl-res>:first-child{margin-top:0;} #main .blog-main .detail-body .fxl-res>:last-child{margin-bottom:0;} /* ---- build 拼装器 ---- */ #main .blog-main .detail-body .fxl-parts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;} #main .blog-main .detail-body .fxl-part{display:flex;align-items:center;gap:8px;background:none;border:1px solid var(--line-strong);color:var(--mute);padding:8px 13px 8px 10px; font-size:14.5px;line-height:1.2;cursor:pointer;transition:all .3s var(--ease);} #main .blog-main .detail-body .fxl-part em{font:700 12px "SF Mono",Menlo,monospace;font-style:normal;width:18px;height:18px;display:grid;place-items:center;border:1px solid currentColor;transition:all .3s;} #main .blog-main .detail-body .fxl-part:hover{color:var(--fg);border-color:var(--soft);} #main .blog-main .detail-body .fxl-part.on{color:var(--fg);border-color:var(--line-strong);} #main .blog-main .detail-body .fxl-part.on em{background:var(--y);border-color:var(--y);color:#14110d;} #main .blog-main .detail-body .fxl-outp{min-height:8em;padding:16px 20px;background:#0c0a08;border:1px solid var(--line);font-size:15.5px;line-height:1.85;color:var(--fg);} #main .blog-main .detail-body .fxl-seg{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;padding:6px 0;} #main .blog-main .detail-body .fxl-seg+.fxl-seg{border-top:1px dashed var(--line);} #main .blog-main .detail-body .fxl-seg>em{padding-top:4px;font:600 11.5px/1.5 "SF Mono",Menlo,"PingFang SC",monospace;font-style:normal;color:var(--y);} #main .blog-main .detail-body .fxl-seg>div>:first-child{margin-top:0;} #main .blog-main .detail-body .fxl-seg>div>:last-child{margin-bottom:0;} #main .blog-main .detail-body .fxl-seg.new{animation:fxl-seg .7s var(--ease);} @keyframes fxl-seg{from{opacity:0;transform:translateY(8px);background:rgba(255,196,61,.12)}} #main .blog-main .detail-body .fxl-ph{color:var(--mute);padding:6px 0;} #main .blog-main .detail-body .fxl-meter{display:flex;align-items:center;gap:14px;margin-top:14px;font-size:14.5px;color:var(--soft);} #main .blog-main .detail-body .fxl-meter b{font:700 24px/1 "DIN Condensed","DIN Alternate","SF Mono",sans-serif;color:var(--y);min-width:2.4em;} #main .blog-main .detail-body .fxl-meter i{position:relative;flex:0 0 120px;height:3px;background:var(--line);} #main .blog-main .detail-body .fxl-meter i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:var(--y);transition:width .6s var(--ease);} #main .blog-main .detail-body .fxl-meter span{flex:1;min-width:0;} #main .blog-main .detail-body .fxl-meter.full span{color:var(--y);font-weight:700;} @media (max-width:720px){ #main .blog-main .detail-body .fxl-seg{grid-template-columns:1fr;gap:2px;} #main .blog-main .detail-body .fxl-meter{flex-wrap:wrap;row-gap:8px;} #main .blog-main .detail-body .fxl-meter i{flex:1 1 auto;} #main .blog-main .detail-body .fxl-meter span{flex-basis:100%;order:3;} #main .blog-main .detail-body .fxl-btn{min-height:38px;} } /* ---- quiz 小测 ---- */ #main .blog-main .detail-body .fxl-quiz{padding:24px 0 6px;border-top:1px solid var(--line-strong);} #main .blog-main .detail-body .fxl-qq{font-size:18px;font-weight:700;line-height:1.7;color:var(--fg);margin-bottom:14px;} #main .blog-main .detail-body .fxl-qq>*{margin:0;} #main .blog-main .detail-body .fxl-opts{display:grid;border-top:1px solid var(--line);} #main .blog-main .detail-body .fxl-opt{display:flex;align-items:baseline;gap:14px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);box-shadow:inset 0 0 0 0 var(--y);padding:13px 16px; color:var(--soft);font-size:16px;line-height:1.7;cursor:pointer;transition:all .3s var(--ease);} #main .blog-main .detail-body .fxl-opt em{flex:none;font:700 13px "SF Mono",Menlo,monospace;font-style:normal;color:var(--soft);} #main .blog-main .detail-body .fxl-opt:hover{background:rgba(255,240,210,.04);color:var(--fg);} #main .blog-main .detail-body .fxl-quiz.done .fxl-opt{cursor:default;} #main .blog-main .detail-body .fxl-opt:disabled{opacity:.45;} #main .blog-main .detail-body .fxl-opt.right{box-shadow:inset 2px 0 0 var(--y);color:var(--fg);background:rgba(255,196,61,.08);opacity:1;} #main .blog-main .detail-body .fxl-opt.right em{color:var(--y);} #main .blog-main .detail-body .fxl-opt.wrong{box-shadow:inset 2px 0 0 #c9704f;color:#e8936f;opacity:1;} #main .blog-main .detail-body .fxl-exp{display:none;margin-top:16px;padding:14px 18px;background:#1c1813;border-left:2px solid var(--y);color:var(--fg);font-size:16px;line-height:1.85;} #main .blog-main .detail-body .fxl-quiz.done .fxl-exp{display:block;animation:fxl-up .45s var(--ease);} #main .blog-main .detail-body .fxl-exp .v{display:block;color:var(--y);margin-bottom:4px;} #main .blog-main .detail-body .fxl-exp>p{margin:0;} /* ---- check 动手清单 ---- */ #main .blog-main .detail-body .fxl-check .fxl-k .fxl-prog{margin-left:auto;font:600 12px "SF Mono",Menlo,monospace;letter-spacing:.06em;color:var(--mute);text-transform:none;} #main .blog-main .detail-body .fxl-check.all .fxl-prog{color:var(--y);} #main .blog-main .detail-body .fxl-cl{border-top:1px solid var(--line-strong);} #main .blog-main .detail-body .fxl-ci{display:flex;gap:14px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:14px 2px; color:var(--soft);font-size:16px;line-height:1.75;cursor:pointer;transition:color .3s;} #main .blog-main .detail-body .fxl-ci i{position:relative;flex:none;width:18px;height:18px;margin-top:.3em;border:1.5px solid var(--line-strong);transition:all .3s var(--ease);} #main .blog-main .detail-body .fxl-ci i::after{content:"";position:absolute;left:4.5px;top:1px;width:5px;height:9px;border:solid #14110d;border-width:0 2px 2px 0;transform:rotate(40deg) scale(0);transition:transform .3s var(--ease);} #main .blog-main .detail-body .fxl-ci:hover{color:var(--fg);} #main .blog-main .detail-body .fxl-ci:hover i{border-color:var(--y);} #main .blog-main .detail-body .fxl-ci.on{color:var(--fg);} #main .blog-main .detail-body .fxl-ci.on i{background:var(--y);border-color:var(--y);} #main .blog-main .detail-body .fxl-ci.on i::after{transform:rotate(40deg) scale(1);} #main .blog-main .detail-body .fxl-ci code{white-space:normal;} /* ---- copy 复制模板 ---- */ #main .blog-main .detail-body .fxl-copy{background:#0c0a08;border:1px solid var(--line);} #main .blog-main .detail-body .fxl-chead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px 9px 16px;border-bottom:1px solid var(--line); font:500 12.5px "SF Mono",Menlo,"PingFang SC",monospace;color:var(--mute);} #main .blog-main .detail-body .fxl-copy pre{margin:0;border:0;background:none;padding:18px 20px;white-space:pre-wrap;word-break:break-word; font:14.5px/1.9 "SF Mono",Menlo,"PingFang SC",monospace;color:var(--fg);} #main .blog-main .detail-body .fxl-copy mark{background:none;color:var(--y);border-bottom:1px dashed rgba(255,196,61,.6);} /* ---- 组件里嵌的引用、代码块:不再套第二条黄线和双层边框 ---- */ #main .blog-main .detail-body :is(.fxl-res,.fxl-pane,.fxl-desc,.fxl-say,.fxl-exp,.fxl-seg) blockquote{margin:12px 0 0;padding:2px 0 2px 16px;background:none;border-left:1px solid var(--line-strong);color:var(--fg);font-size:16px;} #main .blog-main .detail-body .fxl-pane>blockquote{margin:0 0 14px;padding:14px 18px;background:#1c1813;border-left:2px solid var(--y);} #main .blog-main .detail-body .fxl-pane.bad>blockquote{border-left-color:#8a5a45;color:var(--soft);} #main .blog-main .detail-body :is(.fxl-res,.fxl-pane,.fxl-desc,.fxl-exp) pre{margin:10px 0 0;padding:12px 16px;background:#0c0a08;border:1px solid var(--line);border-radius:0;} #main .blog-main .detail-body .fxl-copy pre{border-radius:0;} #main .blog-main .detail-body .fxl-res>:last-child,#main .blog-main .detail-body .fxl-pane>:last-child{margin-bottom:0;} /* ---- 正文列表:统一成黄色短横 ---- */ #main .blog-main .detail-body>ul{padding-left:0;} #main .blog-main .detail-body>ul>li{list-style:none;position:relative;padding-left:22px;margin:8px 0;} #main .blog-main .detail-body>ul>li::before{content:"";position:absolute;left:2px;top:.95em;width:9px;height:2px;background:var(--y);} /* ---- 自动:金句 / 表格 / 看大图 ---- */ html.fx-js #main .blog-main .detail-body blockquote.fxl-q{background:linear-gradient(#1c1813,#1c1813) left/0% 100% no-repeat;transition:background-size 1.1s var(--ease),color .8s;color:var(--soft);} html.fx-js #main .blog-main .detail-body blockquote.fxl-q.on{background-size:100% 100%;color:var(--fg);} #main .blog-main .detail-body .fxl-tw{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0;} #main .blog-main .detail-body .fxl-tw>table{margin:0;width:100%;border:0;border-collapse:collapse;font-size:15.5px;line-height:1.7;} #main .blog-main .detail-body .fxl-tw>table.fxl-wide4{min-width:520px;} @media (max-width:720px){#main .blog-main .detail-body .fxl-tw>table{font-size:14.5px;}#main .blog-main .detail-body .fxl-tw :is(th,td){padding:10px 10px 10px 0;}#main .blog-main .detail-body .fxl-tw .fxl-c1 tr>:first-child{padding-right:12px;}} #main .blog-main .detail-body .fxl-tw :is(th,td){border:0;border-bottom:1px solid var(--line);padding:12px 14px 12px 0;text-align:left;vertical-align:top;background:none;} #main .blog-main .detail-body .fxl-tw th{border-bottom-color:var(--line-strong);color:var(--mute);font:600 12.5px/1.5 "SF Mono",Menlo,"PingFang SC",monospace;letter-spacing:.04em;} #main .blog-main .detail-body .fxl-tw tr>:first-child{color:var(--fg);} #main .blog-main .detail-body .fxl-tw .fxl-c1 tr>:first-child{white-space:nowrap;padding-right:22px;} #main .blog-main .detail-body .fxl-tw.fxl-scroll{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);} #main .blog-main .detail-body .fxl-tw.fxl-scroll.fxl-end{-webkit-mask-image:none;mask-image:none;} #main .blog-main .detail-body .fxl-tw.fxl-scroll::before{content:"左右滑动看全表";position:sticky;left:0;display:block;margin-bottom:6px;font:500 12px "SF Mono",Menlo,"PingFang SC",monospace;color:var(--mute);} #main .blog-main .detail-body tbody tr{transition:background .25s;} #main .blog-main .detail-body tbody tr:hover{background:rgba(255,240,210,.04);} #main .blog-main .detail-body figure img,.detail-body>p>img{cursor:zoom-in;} .fxl-zoom{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;background:rgba(10,8,6,.94);cursor:zoom-out;opacity:0;transition:opacity .3s;} .fxl-zoom.on{opacity:1;} .fxl-zoom img{max-width:min(1500px,100%);max-height:100%;object-fit:contain;} /* ---- 自动:宽屏左侧本讲目录 ---- */ .fxl-toc{position:fixed;top:150px;z-index:5;width:200px;display:flex;flex-direction:column;font-size:13px;line-height:1.5; opacity:0;pointer-events:none;transition:opacity .5s;} .fxl-toc.on{opacity:1;pointer-events:auto;} .fxl-toc b{font:600 11px "SF Mono",Menlo,monospace;letter-spacing:.16em;color:#ffc43d;margin-bottom:10px;} .fxl-toc a{display:flex;gap:10px;padding:5px 0;color:#9a9081;text-decoration:none;transition:color .3s;} .fxl-toc a i{flex:none;min-width:20px;font:700 14px/1.45 "DIN Condensed","DIN Alternate","SF Mono",sans-serif;font-style:normal;} .fxl-toc a:hover{color:#cfc6b6;} .fxl-toc a.on{color:#f2ece0;} .fxl-toc a.on i{color:#ffc43d;} @media (max-width:1279px){.fxl-toc{display:none;}} /* ---- anim 一图看懂(开头自动播放的动画舞台) ---- */ #main .blog-main .detail-body .fxl-anim{margin:34px 0 44px;} #main .blog-main .detail-body .fxa-top{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;} #main .blog-main .detail-body .fxa-top span{font:600 12px/1.4 "SF Mono",Menlo,monospace;letter-spacing:.14em;color:var(--y);} #main .blog-main .detail-body .fxa-top b{flex:1;min-width:0;font-size:15px;color:var(--fg);} #main .blog-main .detail-body .fxa-pp{background:none;border:0;color:var(--mute);font:500 12.5px "SF Mono",Menlo,"PingFang SC",monospace;cursor:pointer;padding:4px 0;} #main .blog-main .detail-body .fxa-pp:hover{color:var(--y);} #main .blog-main .detail-body .fxa-stage{position:relative;aspect-ratio:16/9;overflow:hidden;container-type:inline-size;border:1px solid var(--line); background:radial-gradient(60% 70% at 78% 85%,rgba(255,196,61,.08),transparent 70%), linear-gradient(rgba(255,240,210,.035) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(255,240,210,.035) 1px,transparent 1px) 0 0/40px 40px,#0c0a08;} #main .blog-main .detail-body .fxa-sc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3.2cqw;padding:5cqw 7cqw 11cqw; opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s;} #main .blog-main .detail-body .fxa-sc.on{opacity:1;visibility:visible;transition:opacity .5s var(--ease);} #main .blog-main .detail-body .fxa-cap{position:absolute;left:7cqw;right:7cqw;bottom:4cqw;text-align:center;font-size:clamp(14px,2.1cqw,19px);line-height:1.5;color:var(--soft);text-shadow:0 0 8px #0c0a08,0 0 2px #0c0a08; opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease) 1.1s,transform .6s var(--ease) 1.1s;} #main .blog-main .detail-body .fxa-sc.go .fxa-cap{opacity:1;transform:none;} #main .blog-main .detail-body .fxa-cap>*{margin:0;} #main .blog-main .detail-body .fxa-bar{display:flex;gap:6px;margin-top:10px;} #main .blog-main .detail-body .fxa-seg{flex:1;height:14px;padding:6px 0;background:none;border:0;cursor:pointer;} #main .blog-main .detail-body .fxa-seg i{display:block;height:2px;background:var(--line-strong);position:relative;overflow:hidden;} #main .blog-main .detail-body .fxa-seg i::after{content:"";position:absolute;inset:0;background:var(--y);transform:scaleX(0);transform-origin:left;transition:transform 0s linear;transition-duration:inherit;} #main .blog-main .detail-body .fxa-seg.now i::after{transform:scaleX(1);} #main .blog-main .detail-body .fxa-seg.past i::after{transform:scaleX(1);transition-duration:0s;} #main .blog-main .detail-body .fxa-seg.hold i::after{transform:scaleX(.5);transition-duration:0s;opacity:.6;} /* big:逐字浮起,em 黄色划亮 */ #main .blog-main .detail-body .fxa-h{font-size:clamp(24px,5.6cqw,56px);font-weight:800;line-height:1.28;letter-spacing:-.02em;color:var(--fg);text-align:center;max-width:22em;} #main .blog-main .detail-body .fxa-h em{font-style:normal;color:var(--y);background:linear-gradient(rgba(255,196,61,.18),rgba(255,196,61,.18)) left 88%/0% 28% no-repeat;transition:background-size .8s var(--ease);transition-delay:calc(var(--n,20) * 1ms + 900ms);} #main .blog-main .detail-body .fxa-sc.go .fxa-h em{background-size:100% 28%;} #main .blog-main .detail-body .fxa-w{white-space:nowrap;} #main .blog-main .detail-body .fxa-ch{display:inline-block;white-space:pre;opacity:0;transform:translateY(.45em);filter:blur(2px);transition:opacity .5s var(--ease),transform .6s var(--ease),filter .5s;transition-delay:calc(var(--i) * 45ms + 150ms);} #main .blog-main .detail-body .fxa-sc.go .fxa-ch{opacity:1;transform:none;filter:none;} /* race:横条赛跑 */ #main .blog-main .detail-body .fxa-race{width:min(100%,46em);display:grid;gap:2.6cqw;} #main .blog-main .detail-body .fxa-rr{display:grid;grid-template-columns:minmax(5em,max-content) minmax(0,1fr) minmax(6em,max-content);align-items:center;gap:2.4cqw;font-size:clamp(14px,2.4cqw,22px);color:var(--fg);} #main .blog-main .detail-body .fxa-rr .nm{font-weight:700;} #main .blog-main .detail-body .fxa-rr .tr{height:clamp(10px,1.8cqw,18px);background:rgba(255,240,210,.06);position:relative;} #main .blog-main .detail-body .fxa-rr .tr i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--y);box-shadow:0 0 14px rgba(255,196,61,.45);} #main .blog-main .detail-body .fxa-rr:first-child .tr i{background:#8a7d66;box-shadow:none;} #main .blog-main .detail-body .fxa-sc.go .fxa-rr .tr i{width:var(--w);transition:width var(--t) cubic-bezier(.33,1,.68,1) .25s;} #main .blog-main .detail-body .fxa-rr .vl{font:700 clamp(15px,2.6cqw,26px)/1 "DIN Condensed","DIN Alternate","SF Mono",sans-serif;color:var(--y);text-align:right;white-space:nowrap;} #main .blog-main .detail-body .fxa-rr .vl small{font:500 max(13px,.6em) "PingFang SC",sans-serif;color:var(--soft);} /* path:节点依次点亮(loop 画成一圈) */ #main .blog-main .detail-body .fxa-path{position:relative;width:100%;display:flex;justify-content:space-between;gap:1cqw;} #main .blog-main .detail-body .fxa-path:not(.ring)::before{content:"";position:absolute;left:4%;right:4%;top:2.3cqw;height:1px;background:var(--line-strong);} #main .blog-main .detail-body .fxa-nd{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:1.4cqw;text-align:center;opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease);transition-delay:calc(var(--i) * 90ms + 150ms);} #main .blog-main .detail-body .fxa-sc.go .fxa-nd{opacity:1;transform:none;} #main .blog-main .detail-body .fxa-nd i{display:grid;place-items:center;width:4.6cqw;height:4.6cqw;min-width:28px;min-height:28px;border-radius:50%;background:#14110d;border:1px solid var(--line-strong); font:700 clamp(12px,1.8cqw,18px)/1 "DIN Condensed","DIN Alternate","SF Mono",sans-serif;font-style:normal;color:#b5ab98;border-width:1.5px;transition:all .35s var(--ease);} #main .blog-main .detail-body .fxa-nd span{font-size:clamp(13px,2cqw,19px);font-weight:700;line-height:1.35;color:#b5ab98;transition:color .35s;} #main .blog-main .detail-body .fxa-nd.lit i{border-color:var(--y);color:var(--y);} #main .blog-main .detail-body .fxa-nd.lit span{color:var(--fg);} #main .blog-main .detail-body .fxa-nd.cur i{background:var(--y);color:#14110d;box-shadow:0 0 0 1.2cqw rgba(255,196,61,.14),0 0 22px rgba(255,196,61,.5);transform:scale(1.12);} #main .blog-main .detail-body .fxa-path.ring{display:block;width:76cqw;height:38cqw;flex:none;} #main .blog-main .detail-body .fxa-path.ring .fxa-nd{position:absolute;width:9em;margin:0;flex:none;translate:-50% -1.6cqw;gap:.5cqw;font-size:clamp(13px,1.8cqw,17px);} #main .blog-main .detail-body .fxa-path.ring .fxa-nd span{font-size:inherit;} #main .blog-main .detail-body .fxa-ringline{position:absolute;left:10%;right:10%;top:10%;bottom:18%;border:1px dashed var(--line-strong);border-radius:50%;} #main .blog-main .detail-body .fxa-ringc{position:absolute;left:50%;top:46%;translate:-50% -50%;font-size:clamp(22px,5cqw,48px);color:var(--y);opacity:.85;} #main .blog-main .detail-body .fxa-sc.go .fxa-ringc{animation:fxa-spin 2.4s var(--ease) .6s 2;} @keyframes fxa-spin{to{transform:rotate(-360deg)}} /* type:逐行敲出 */ #main .blog-main .detail-body .fxa-term{width:min(100%,46em);padding:3cqw 3.4cqw;background:#080706;border:1px solid var(--line);font:clamp(12px,1.9cqw,17px)/1.75 "SF Mono",Menlo,Consolas,"PingFang SC",monospace;color:#bdb3a2;} #main .blog-main .detail-body .fxa-tl{display:flex;gap:.7em;min-height:1.75em;opacity:0;white-space:pre-wrap;word-break:break-all;} #main .blog-main .detail-body .fxa-tl.on{opacity:1;} #main .blog-main .detail-body .fxa-tl em{font-style:normal;color:var(--y);flex:none;} #main .blog-main .detail-body .fxa-tl.cmd span,#main .blog-main .detail-body .fxa-tl.in span{color:#fff7e8;} #main .blog-main .detail-body .fxa-tl.in em{color:#9a9081;} #main .blog-main .detail-body .fxa-tl.ok{color:#ffd77a;} #main .blog-main .detail-body .fxa-tl.cmt{color:#8f8676;} #main .blog-main .detail-body .fxa-tl.cur span::after{content:"";display:inline-block;width:.55em;height:1.1em;vertical-align:-.18em;margin-left:1px;background:var(--y);animation:fxl-blink 1s steps(1) infinite;} /* stack:积木飞来拼一排 */ #main .blog-main .detail-body .fxa-stack{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.2cqw 1cqw;max-width:100%;} #main .blog-main .detail-body .fxa-blk{padding:1cqw 1.8cqw;border:1px solid var(--y);background:rgba(255,196,61,.08);color:var(--fg);font-size:clamp(14px,2.3cqw,22px);font-weight:700;white-space:nowrap; opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.85);transition:opacity .4s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i) * 320ms + 300ms);} #main .blog-main .detail-body .fxa-plus{color:var(--mute);font-size:clamp(14px,2.2cqw,22px);opacity:0;transition:opacity .4s;transition-delay:calc(var(--i) * 320ms + 500ms);} #main .blog-main .detail-body .fxa-sc.go :is(.fxa-blk,.fxa-plus){opacity:1;transform:none;} #main .blog-main .detail-body .fxa-res{display:flex;align-items:center;gap:1.6cqw;font-size:clamp(20px,4.4cqw,42px);font-weight:800;color:var(--y);opacity:0;transform:scale(.9);transition:opacity .5s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i) * 320ms + 700ms);} #main .blog-main .detail-body .fxa-res s{text-decoration:none;color:var(--mute);font-weight:500;} #main .blog-main .detail-body .fxa-sc.go .fxa-res{opacity:1;transform:none;} /* sort:东西落进对应格子 */ #main .blog-main .detail-body .fxa-sort{width:100%;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2cqw;} #main .blog-main .detail-body .fxa-bin{min-height:11cqw;border-top:2px solid var(--line-strong);padding-top:1.6cqw;} #main .blog-main .detail-body .fxa-bin.g0{border-top-color:var(--y);} #main .blog-main .detail-body .fxa-bin>b{display:block;margin-bottom:1.4cqw;font-size:clamp(14px,2.2cqw,21px);color:var(--fg);} #main .blog-main .detail-body .fxa-bin .in{display:flex;flex-wrap:wrap;gap:1cqw;} #main .blog-main .detail-body .fxa-drop{height:6cqw;min-height:30px;display:flex;justify-content:center;align-items:center;} #main .blog-main .detail-body .fxa-chip{padding:.7cqw 1.4cqw;border:1px solid var(--line-strong);font-size:clamp(13px,1.9cqw,18px);color:var(--fg);white-space:nowrap;background:#14110d;} #main .blog-main .detail-body .fxa-chip.g0{border-color:rgba(255,196,61,.6);} #main .blog-main .detail-body .fxa-chip.fly{animation:fxa-fly .46s var(--ease);} #main .blog-main .detail-body .fxa-chip.land{animation:fxa-land .45s var(--ease);} @keyframes fxa-fly{from{opacity:0;transform:translateY(-14px) scale(1.15)}} @keyframes fxa-land{from{opacity:0;transform:translateY(-22px)}} /* check:逐条打勾,错的划掉 */ #main .blog-main .detail-body .fxa-check{display:grid;gap:1.3cqw;min-width:min(100%,24em);} #main .blog-main .detail-body .fxa-ck{display:flex;align-items:center;gap:1.6cqw;font-size:clamp(15px,2.4cqw,23px);color:var(--mute);transition:color .35s;} #main .blog-main .detail-body .fxa-ck i{position:relative;flex:none;width:2.6cqw;height:2.6cqw;min-width:16px;min-height:16px;border:1.5px solid var(--line-strong);transition:all .35s var(--ease);} #main .blog-main .detail-body .fxa-ck.done{color:var(--fg);} #main .blog-main .detail-body .fxa-ck.done i{background:var(--y);border-color:var(--y);} #main .blog-main .detail-body .fxa-ck.done i::after{content:"";position:absolute;left:32%;top:10%;width:28%;height:55%;border:solid #14110d;border-width:0 2px 2px 0;transform:rotate(40deg);} #main .blog-main .detail-body .fxa-ck.no.done{color:#ff8a73;text-decoration:line-through;text-decoration-color:rgba(232,147,111,.7);} #main .blog-main .detail-body .fxa-ck.no.done i{background:none;border-color:#c9704f;} #main .blog-main .detail-body .fxa-ck.no.done i::after{content:"✕";border:0;transform:none;left:0;top:0;width:100%;height:100%;display:grid;place-items:center;color:#e8936f;font-size:.8em;line-height:1;} /* 手机:舞台竖一点,横向流程改竖排 */ @media (max-width:720px){ #main .blog-main .detail-body .fxa-stage{aspect-ratio:1/1;} #main .blog-main .detail-body .fxa-sc{padding:6cqw 6cqw 18cqw;gap:4cqw;} #main .blog-main .detail-body .fxa-cap{bottom:6cqw;font-size:15px;} #main .blog-main .detail-body .fxa-h{font-size:clamp(24px,8.6cqw,40px);} #main .blog-main .detail-body .fxa-path:not(.ring){flex-direction:column;gap:3.2cqw;width:auto;align-self:center;min-width:62%;} #main .blog-main .detail-body .fxa-path:not(.ring)::before{left:calc(4.3cqw + 13px);right:auto;top:4%;bottom:4%;width:1px;height:auto;} #main .blog-main .detail-body .fxa-path:not(.ring) .fxa-nd{flex-direction:row;gap:4cqw;text-align:left;margin-left:4.3cqw;} #main .blog-main .detail-body .fxa-nd span{font-size:15px;} #main .blog-main .detail-body .fxa-path.ring{width:100%;height:74cqw;} #main .blog-main .detail-body .fxa-path.ring .fxa-nd{width:7.5em;font-size:13px;translate:-50% -14px;} #main .blog-main .detail-body .fxa-nd i{width:28px;height:28px;} #main .blog-main .detail-body .fxa-rr{grid-template-columns:1fr auto;font-size:16px;row-gap:6px;} #main .blog-main .detail-body .fxa-rr .vl{font-size:22px;} #main .blog-main .detail-body .fxa-rr .tr{grid-column:1 / -1;grid-row:2;} #main .blog-main .detail-body .fxa-term{font-size:12.5px;padding:4cqw;} #main .blog-main .detail-body .fxa-sort{gap:3cqw;} #main .blog-main .detail-body .fxa-chip{font-size:13px;padding:3px 7px;} #main .blog-main .detail-body .fxa-bin>b{font-size:14px;} #main .blog-main .detail-body .fxa-bin{min-height:0;} #main .blog-main .detail-body .fxa-check{gap:3cqw;} #main .blog-main .detail-body .fxa-ck{font-size:16px;gap:3cqw;} } /* 减少动态效果:不播,直接把每一幕的最终画面摊开 */ #main .blog-main .detail-body .fxa-static .fxa-stage{aspect-ratio:auto;} #main .blog-main .detail-body .fxa-static .fxa-sc{position:relative;opacity:1;visibility:visible;padding:5cqw 6cqw 10cqw;border-bottom:1px solid var(--line);} #main .blog-main .detail-body .fxa-static .fxa-sc:last-child{border-bottom:0;} #main .blog-main .detail-body .fxa-static .fxa-bar{display:none;} /* ---- 学习列表:基础篇 / 实战篇 分段标题 ---- */ #main .blog-article-grid .fxl-parthead{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding:64px 0 16px;border-bottom:1px solid var(--line-strong);} #main .blog-article-grid.fx-route .fxl-parthead{padding-left:56px;} #main .blog-article-grid .fxl-parthead span{font:600 12.5px/1.4 "SF Mono",Menlo,monospace;letter-spacing:.16em;color:var(--y);} #main .blog-article-grid .fxl-parthead b{font-size:15px;font-weight:600;color:var(--soft);} @media (max-width:720px){#main .blog-article-grid.fx-route .fxl-parthead{padding-left:30px;padding-top:44px;}} @media (prefers-reduced-motion:reduce){ #main .blog-main .detail-body .fxl *,#main .blog-main .detail-body .fxl *::after,#main .blog-main .detail-body .fxl *::before,.fxl-toc,.fxl-zoom{animation:none!important;transition:none!important;} }