/* ============================================================ python-learning 站点共享设计系统 暗色主题 · 与 ReAct深剖.html 同源的视觉语言 ============================================================ */ :root{ --bg:#0d1626; --panel:#16233a; --panel2:#1a2a45; --line:#24365a; --text:#e9eef6; --dim:#93a4bc; --faint:#5d6f8a; --cyan:#4fc3f7; --violet:#c792ea; --green:#4ade80; --blue:#60a5fa; --orange:#ffa94d; --red:#f87171; --yellow:#ffc94d; --code-bg:#0b1322; --lamp-ink:#2b2007; --content:940px; --serif:"Noto Serif SC","Songti SC","SimSun",serif; --mono:ui-monospace,'Cascadia Code',Consolas,'JetBrains Mono',monospace; } /* 浅色主题：与主站 style.css 的映射同源，由主站 site.js 写 驱动，与全站主题联动（localStorage 共享） */ [data-theme="light"]{ --bg:#f2f4f8; --panel:#ffffff; --panel2:#eef1f6; --line:#d7deea; --text:#1b2739; --dim:#5a6b84; --faint:#8a99b0; --cyan:#0288d1; --violet:#8e4ec0; --green:#2e9e5b; --blue:#2563eb; --orange:#d97a1a; --red:#d64545; --yellow:#9a6b0f; --code-bg:#f6f8fc; --lamp-ink:#fffdf5; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--text); font-family:-apple-system,'Segoe UI','Microsoft YaHei',sans-serif; line-height:1.8;font-size:16px} a{color:var(--cyan);text-decoration:none} a:hover{text-decoration:underline} ::selection{background:rgba(79,195,247,.25)} /* ---------- 阅读进度条 ---------- */ #progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:99; background:linear-gradient(90deg,var(--yellow),var(--orange)); transition:width .1s linear} /* ---------- 顶栏：与主站 style.css 同款视觉 ---------- */ .topbar{position:sticky;top:0;z-index:50; background:color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .topbar .inner{max-width:var(--content);margin:0 auto;padding:0 24px; display:flex;align-items:center;gap:20px;height:56px;font-size:14px} .topbar .brand{font-family:var(--mono);font-size:14px;letter-spacing:.08em; font-weight:700;display:flex;align-items:center;gap:10px;color:var(--text)} .topbar .brand .dot{width:10px;height:10px;border-radius:50%; background:var(--yellow);box-shadow:0 0 10px var(--yellow)} .topbar .sitenav{margin-left:auto;display:flex;gap:6px} .topbar .sitenav a{font-family:var(--mono);font-size:13px;color:var(--dim); padding:6px 12px;border-radius:8px;transition:color .15s,background .15s} .topbar .sitenav a:hover{color:var(--text);background:var(--panel);text-decoration:none} .topbar .sitenav a.active{color:var(--yellow)} /* 主题切换按钮：由主站 site.js 注入太阳/月亮图标并接管逻辑 */ .theme-btn{width:36px;height:36px;border-radius:50%;cursor:pointer; border:1px solid var(--line);background:transparent;color:var(--dim); display:grid;place-items:center;flex:none; transition:color .15s,border-color .15s} .theme-btn:hover{color:var(--yellow);border-color:var(--yellow)} .theme-btn svg{width:17px;height:17px} /* 内容区顶部的系列面包屑（顶栏统一后，章节身份信息放这里） */ .series-crumb{display:flex;justify-content:space-between;align-items:baseline; gap:14px;flex-wrap:wrap;margin-bottom:10px; font-family:var(--mono);font-size:13px;color:var(--faint)} .series-crumb a{color:var(--dim)} .series-crumb a:hover{color:var(--yellow);text-decoration:none} .series-crumb .next-chapter{color:var(--dim)} /* ---------- 版式 ---------- */ .container{max-width:var(--content);margin:0 auto;padding:48px 24px 80px} article > h1{font-family:var(--serif);font-size:34px;line-height:1.3;font-weight:800;margin-bottom:6px} article > h1 .grad, .h1-grad{background:linear-gradient(90deg,var(--yellow),var(--orange)); -webkit-background-clip:text;background-clip:text;color:transparent} article > .lead, article > blockquote:first-of-type{color:var(--dim)} h2{font-family:var(--serif);font-size:24px;margin:56px 0 14px;padding-bottom:10px;font-weight:800; border-bottom:1px solid var(--line)} h2 .no{font-family:var(--mono);color:var(--faint);font-size:14px;font-weight:400;margin-right:8px} h3{font-size:18.5px;margin:32px 0 10px} h4{font-size:16px;margin:22px 0 8px;color:var(--text)} p{margin:12px 0} ul,ol{margin:12px 0;padding-left:26px} li{margin:5px 0} strong{color:var(--text)} hr{border:none;border-top:1px solid var(--line);margin:40px 0} img{max-width:100%} code{font-family:var(--mono);font-size:.88em;color:var(--yellow); background:rgba(255,201,77,.08);padding:1px 6px;border-radius:4px} pre code{background:none;padding:0;color:inherit} .chanav{display:flex;justify-content:space-between;gap:14px;margin-top:64px; padding-top:20px;border-top:1px solid var(--line)} .chanav a{flex:1;background:var(--panel);border:1px solid var(--line); border-radius:12px;padding:14px 18px;font-size:14px} .chanav a:hover{text-decoration:none;border-color:var(--cyan)} .chanav .dir{font-family:var(--mono);font-size:11.5px;color:var(--faint);display:block} .chanav a.next{text-align:right} /* ---------- callout ---------- */ blockquote{border-left:3px solid var(--violet);background:var(--panel); padding:14px 20px;border-radius:0 10px 10px 0;margin:18px 0;color:var(--dim)} blockquote p{margin:8px 0} blockquote.java{border-left-color:var(--orange); background:linear-gradient(90deg,rgba(255,169,77,.07),var(--panel))} blockquote.java strong:first-child, blockquote.java > p:first-child strong{color:var(--orange)} blockquote.warn{border-left-color:var(--yellow);background:linear-gradient(90deg,rgba(255,201,77,.06),var(--panel))} blockquote.tip{border-left-color:var(--cyan);background:linear-gradient(90deg,rgba(79,195,247,.06),var(--panel))} blockquote.good{border-left-color:var(--green)} .callout{border:1px solid var(--line);border-left:3px solid var(--cyan); background:var(--panel);padding:12px 18px;border-radius:0 10px 10px 0; margin:16px 0;font-size:14.5px;color:var(--dim)} .callout .emo{margin-right:6px} .callout.warn{border-left-color:var(--yellow)} .callout.pin{border-left-color:var(--violet)} .callout.good{border-left-color:var(--green)} .callout code{color:var(--yellow)} /* ---------- 表格 ---------- */ table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px;display:block;overflow-x:auto} th,td{border:1px solid var(--line);padding:9px 13px;text-align:left;vertical-align:top} th{background:var(--panel);font-weight:600;font-size:13px;color:var(--dim)} /* ---------- 代码块 ---------- */ pre{background:var(--code-bg);border:1px solid var(--line);border-radius:10px; padding:14px 16px;overflow-x:auto;font-family:var(--mono);font-size:13.2px; line-height:1.65;margin:14px 0} .codeblock{background:var(--code-bg);border:1px solid var(--line);border-radius:12px; margin:16px 0;overflow:hidden} .codeblock > pre{border:none;border-radius:0;margin:0} .codeblock .bar{display:flex;justify-content:space-between;align-items:center; padding:7px 14px;border-bottom:1px solid var(--line);background:var(--panel)} .codeblock .bar .t{font-family:var(--mono);font-size:12px;color:var(--dim)} .copy{font-family:var(--mono);font-size:12px;color:var(--dim);background:none; border:1px solid var(--line);border-radius:6px;padding:3px 10px;cursor:pointer} .copy:hover{color:var(--cyan);border-color:var(--cyan)} .kw{color:#c792ea}.str{color:#a5d6a7}.cm{color:#5d6f8a;font-style:italic} .num{color:#f78c6c}.fn{color:#82aaff}.deco{color:#ffc94d}.bi{color:#f07178} .key{color:#89ddff} /* 浅底下语法高亮加深一档，保住对比度 */ [data-theme="light"] .kw{color:#6a1b9a} [data-theme="light"] .str{color:#2e7d32} [data-theme="light"] .cm{color:#90a4ae} [data-theme="light"] .num{color:#c63f2e} [data-theme="light"] .fn{color:#1565c0} [data-theme="light"] .deco{color:#9a6b0f} [data-theme="light"] .bi{color:#b71c1c} [data-theme="light"] .key{color:#00838f} /* ---------- details / checkbox ---------- */ details{background:var(--panel);border:1px solid var(--line);border-radius:10px; padding:12px 18px;margin:14px 0} details > summary{cursor:pointer;font-weight:600;color:var(--cyan)} details[open] > summary{margin-bottom:10px} input[type="checkbox"]{margin-right:8px;accent-color:var(--cyan); vertical-align:-1px;list-style:none} li input[type="checkbox"]{list-style:none} /* ---------- 滚动动效 ---------- */ .reveal{opacity:0;transform:translateY(14px); transition:opacity .6s ease,transform .6s ease} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none} *{animation-duration:.001s !important} } /* ---------- 章节徽标条 ---------- */ .metaband{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 8px} .metaband span{font-size:12.5px;padding:4px 12px;border:1px solid var(--line); border-radius:999px;color:var(--dim);background:var(--panel)} .metaband b{color:var(--text);font-weight:600} /* ============================================================ 09 章 / demo09 专属 ============================================================ */ /* 生态四件套 */ .eco{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px;margin:22px 0} .eco .box{background:var(--panel);border:1px solid var(--line);border-radius:12px; padding:16px 18px;position:relative;transition:transform .3s,border-color .3s} .eco .box:hover{transform:translateY(-4px)} .eco .box h5{font-size:15px;margin-bottom:6px} .eco .box p{font-size:13px;color:var(--dim);margin:4px 0} .eco .box .lv{font-family:var(--mono);font-size:11px;color:var(--faint)} .eco .box.c1{border-top:2px solid var(--cyan)} .eco .box.c2{border-top:2px solid var(--violet)} .eco .box.c3{border-top:2px solid var(--green)} .eco .box.c4{border-top:2px solid var(--orange)} .eco-flow{border:1px dashed var(--line);border-radius:999px;padding:6px 18px; font-family:var(--mono);font-size:12px;color:var(--faint);text-align:center;margin:6px 0 14px} /* LCEL 管道动效 */ .pipe{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap; margin:24px 0;padding:26px 12px;background:var(--panel); border:1px solid var(--line);border-radius:14px;overflow:hidden;position:relative} .pipe .stage{border:1.5px solid var(--line);background:var(--panel2);border-radius:10px; padding:10px 18px;font-size:14px;text-align:center;min-width:130px;color:var(--dim); font-family:var(--mono)} .pipe .stage small{display:block;font-size:10.5px;color:var(--faint);font-family:var(--mono)} .pipe .link{width:56px;height:2px;background:var(--line);position:relative;overflow:hidden} .pipe .link::after{content:'';position:absolute;left:-14px;top:0;width:14px;height:2px; background:var(--cyan);animation:flow 1.6s linear infinite} @keyframes flow{to{left:100%}} .pipe .stage.hot{border-color:var(--cyan);color:var(--text);box-shadow:0 0 18px rgba(79,195,247,.25)} /* LangGraph 图执行模拟器 */ .lgdemo{background:var(--panel);border:1px solid var(--line);border-radius:16px; padding:20px;margin:22px 0} .lgdemo .hud{display:flex;justify-content:space-between;align-items:center; flex-wrap:wrap;gap:12px;margin-bottom:14px} .lgdemo .stepinfo{font-family:var(--mono);font-size:13px;color:var(--dim)} .lgdemo .stepinfo b{color:var(--cyan)} .btns{display:flex;gap:8px;flex-wrap:wrap} .btn{background:var(--panel2);border:1px solid var(--line);color:var(--text); border-radius:8px;padding:7px 16px;cursor:pointer;font-size:14px} .btn:hover{border-color:var(--cyan);color:var(--cyan)} .btn.primary{background:var(--yellow);border-color:var(--yellow);color:var(--lamp-ink)} .btn:disabled{opacity:.35;cursor:not-allowed} .lggrid{display:grid;grid-template-columns:1.15fr 1fr;gap:16px} @media(max-width:860px){.lggrid{grid-template-columns:1fr}} .lgcanvas{background:var(--code-bg);border:1px solid var(--line);border-radius:12px;padding:8px;min-height:340px} .lgcanvas svg{width:100%;height:auto;display:block} .lgnode{fill:var(--panel2);stroke:var(--line);stroke-width:1.5;rx:10} .lgnlabel{fill:var(--dim);font-size:14px;font-family:-apple-system,'Segoe UI','Microsoft YaHei',sans-serif;text-anchor:middle} .lgnsub{fill:var(--faint);font-size:9.5px;font-family:var(--mono);text-anchor:middle} .lgedge{stroke:var(--line);stroke-width:2;fill:none} .lgedge.cond{stroke-dasharray:5 5} .lgelabel{fill:var(--faint);font-size:10px;font-family:var(--mono);text-anchor:middle} .lgnode.on{stroke:var(--cyan);filter:drop-shadow(0 0 10px rgba(79,195,247,.5))} .lgnode.done{stroke:var(--green)} .lgpanel{background:var(--code-bg);border:1px solid var(--line);border-radius:12px; padding:14px;max-height:400px;overflow-y:auto} .lgpanel .cap{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-bottom:8px} .lgstep{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px} .lgstep .t{font-weight:650;font-size:14px} .lgstep .d{font-size:13px;color:var(--dim);margin-top:4px} .lgstep code{font-family:var(--mono);font-size:12px} .lgstep.cur{border-color:var(--cyan)} .lg-interrupt{border:1px dashed var(--yellow);border-radius:10px;padding:10px 14px; margin:10px 0;font-size:13px;color:var(--yellow);display:none} .lg-interrupt.show{display:block;animation:pop .4s ease} @keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* checkpoint 时间轴 */ .ckpt{display:flex;align-items:center;gap:0;margin:20px 0;padding:18px 10px; background:var(--panel);border:1px solid var(--line);border-radius:14px;flex-wrap:wrap} .ckpt .cp{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:86px} .ckpt .cp .dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--faint);background:var(--panel2)} .ckpt .cp .lb{font-size:11px;color:var(--faint);font-family:var(--mono)} .ckpt .cp.done .dot{border-color:var(--green);background:rgba(74,222,128,.2)} .ckpt .cp.cur .dot{border-color:var(--cyan);box-shadow:0 0 12px rgba(79,195,247,.5); animation:pulse 1.2s ease infinite} @keyframes pulse{50%{box-shadow:0 0 2px rgba(79,195,247,.2)}} .ckpt .seg{flex:1;min-width:30px;height:2px;background:var(--line)} .ckpt .seg.done{background:var(--green)} /* 学习路线三阶段卡片 */ .route{display:flex;gap:14px;align-items:stretch;margin:22px 0;flex-wrap:wrap} .route .stage{flex:1;min-width:230px;background:var(--panel);border:1px solid var(--line); border-radius:12px;padding:14px 18px} .route .stage.c1{border-top:2px solid var(--cyan)} .route .stage.c2{border-top:2px solid var(--violet)} .route .stage.c3{border-top:2px solid var(--green)} .route .rt{font-weight:700;font-size:15px;margin-bottom:6px} .route ul{margin:4px 0;padding-left:18px} .route li{font-size:13.5px;color:var(--dim);margin:4px 0} .route-arrow{align-self:center;font-size:22px;color:var(--faint);font-family:var(--mono)} .route-note{font-size:13px;color:var(--faint);text-align:center;margin:4px 0 10px} /* 页脚 */ footer{border-top:1px solid var(--line);padding:28px 0 48px;text-align:center; color:var(--faint);font-size:13px}