/* 训练化学 Agent 指南：只用 shared-nav.css 的颜色与字体变量。 */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--cr-nav-height,64px) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.75 var(--font-sans)}
a{color:var(--accent-text)}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.skip{position:fixed;top:-100px;left:16px;background:var(--accent);color:var(--accent-ink);padding:10px 14px;z-index:100}
.skip:focus{top:8px}
.tr{max-width:1240px;margin:0 auto;padding:0 32px 64px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:44px}
.tr-toc{position:sticky;top:calc(var(--cr-nav-height,64px) + 20px);align-self:start;padding-top:52px;font-size:13px}
.tr-toc b{display:block;font-size:11px;letter-spacing:1.6px;color:var(--muted);margin-bottom:10px}
.tr-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.tr-toc a{display:block;padding:5px 12px;color:var(--ink-2);text-decoration:none;border-left:2px solid transparent;margin-left:-1px}
.tr-toc a:hover,.tr-toc a.on{color:var(--ink);border-left-color:var(--accent-2);background:color-mix(in srgb,var(--surface) 70%,transparent)}
.tr-main{min-width:0}
.hero{padding:52px 0 26px;border-bottom:1px solid var(--line)}
.eyebrow{font-size:10.5px;letter-spacing:2px;font-weight:700;color:var(--muted);margin:0 0 12px}
.hero h1{font-size:clamp(28px,3.3vw,44px);line-height:1.3;letter-spacing:-1px;margin:0 0 16px;font-weight:600}
.hero h1 em{font-style:normal;font-family:var(--font-serif);font-weight:500;color:var(--accent-2)}
.lead{color:var(--muted);font-size:15.5px;line-height:1.9;max-width:72ch;margin:0 0 18px}
.stamp{display:flex;flex-wrap:wrap;gap:8px;font-size:12px}
.stamp span{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:3px 10px;color:var(--muted)}
.stamp b{color:var(--ink)}
section{padding:34px 0 8px}
h2{font-size:23px;letter-spacing:-.4px;margin:0 0 10px;font-weight:600;display:flex;align-items:baseline;gap:12px}
h2 .n{font:400 15px var(--font-num);color:var(--gold)}
h3{font-size:16px;margin:24px 0 8px}
p{margin:0 0 12px}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.route{list-style:none;margin:16px 0 8px;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;counter-reset:s}
.route li{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:12px 12px 13px;position:relative}
.route li::before{content:counter(s);font:400 22px/1 var(--font-num);color:var(--gold);display:block;margin-bottom:6px}
.route b{display:block;font-size:13.5px;margin-bottom:3px}
.route small{display:block;font-size:12px;color:var(--muted);line-height:1.6}
.route a{text-decoration:none;color:inherit}
.note{border-left:3px solid var(--gold);background:var(--gold-soft);padding:10px 14px;border-radius:0 4px 4px 0;font-size:13.5px;margin:12px 0}
.note.ok{border-left-color:var(--ok);background:color-mix(in srgb,var(--ok) 8%,transparent)}
.picker{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px 16px;margin:14px 0}
.picker label{display:grid;gap:5px;font-size:12px;color:var(--muted)}
.picker select{font:inherit;font-size:14px;color:var(--ink);background:var(--paper);border:1px solid var(--line-strong);border-radius:4px;padding:8px 10px;min-height:40px}
.picker output{flex:1 1 320px;font-size:13.5px;color:var(--ink-2);line-height:1.7}
.filters{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.filters button{font:600 12.5px var(--font-sans);border:1px solid var(--line-strong);background:var(--surface);color:var(--muted);border-radius:99px;padding:5px 12px;cursor:pointer}
.filters button[aria-pressed=true]{background:var(--accent-soft);color:var(--ink);border-color:var(--accent-2)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:6px;background:var(--surface);margin:10px 0 18px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:9px 11px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
thead th{background:var(--surface-2);font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;position:sticky;top:0}
tbody tr:last-child>*{border-bottom:0}
tbody tr.fit{background:color-mix(in srgb,var(--ok) 7%,transparent)}
tbody tr.nofit{opacity:.45}
td.m{white-space:nowrap;font-weight:600}
td.m small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
td.num{font-family:var(--font-mono);font-size:12px;white-space:nowrap}
td a{white-space:nowrap}
.tag{display:inline-block;font-size:11px;padding:1px 7px;border-radius:3px;background:var(--surface-2);color:var(--muted);white-space:nowrap;margin:1px 2px 1px 0}
.tag.new{background:var(--gold);color:#fff}
.tag.pick{background:var(--accent);color:var(--accent-ink)}
.tag.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
code{font-family:var(--font-mono);font-size:.9em;background:var(--surface-2);padding:1px 5px;border-radius:3px}
.code{border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:10px 0 18px;background:var(--paper)}
.code-bar{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 12px;background:var(--surface-2);font:12px var(--font-mono);color:var(--muted)}
.code-bar span{margin-right:auto}
.code-bar button{font:600 12px var(--font-sans);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:4px;padding:3px 10px;cursor:pointer}
.code pre{margin:0;padding:12px 14px;overflow:auto;max-height:520px}
.code pre code{background:none;padding:0;font-size:12.3px;line-height:1.65;white-space:pre}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.box{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:16px 18px}
.box h3{margin-top:0}
ul.tight{margin:0 0 12px;padding-left:20px}
ul.tight li{margin:3px 0}
.foot{border-top:1px solid var(--line);margin-top:30px;padding-top:16px;font-size:12.5px;color:var(--muted)}
@media(max-width:1100px){.route{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.tr{grid-template-columns:1fr;padding:0 16px 48px;gap:0}.tr-toc{display:none}.grid2{grid-template-columns:1fr}.route{grid-template-columns:1fr 1fr}}
@media print{.tr-toc,.picker,.filters,.code-bar button{display:none!important}.tr{display:block}}
/* 模型介绍展开 */
table.models tbody tr:not(.detail){cursor:pointer}
table.models tbody tr:not(.detail):hover{background:color-mix(in srgb,var(--surface-2) 60%,transparent)}
table.models tbody tr.open{background:var(--accent-soft)}
button.more{display:block;margin-top:6px;font:600 11.5px var(--font-sans);border:1px solid var(--line-strong);background:var(--paper);color:var(--accent-text);border-radius:99px;padding:2px 10px;cursor:pointer}
button.more:hover{border-color:var(--accent-2)}
tr.detail>td{background:var(--paper);padding:0}
.d{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:18px;padding:14px 16px 16px;border-left:3px solid var(--accent-2)}
.d h4{margin:0 0 6px;font-size:12px;letter-spacing:.5px;color:var(--muted)}
.d ul{margin:0 0 8px;padding-left:18px}
.d li{margin:3px 0;font-size:13px;line-height:1.7}
.d p{font-size:13px;line-height:1.7;margin:0 0 10px}
.d pre{margin:0 0 8px;padding:8px 10px;background:var(--surface-2);border-radius:4px;overflow:auto}
.d pre code{background:none;padding:0;font-size:11.8px;white-space:pre}
.d .est{font-size:12px;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:none}
@media(max-width:900px){.d{grid-template-columns:1fr}}
/* 固定列宽，展开的介绍不会超出可视区域 */
table.models{table-layout:fixed;min-width:760px}
table.models th:nth-child(1){width:23%}table.models th:nth-child(2){width:10%}table.models th:nth-child(3){width:14%}table.models th:nth-child(4){width:11%}table.models th:nth-child(5){width:30%}table.models th:nth-child(6){width:12%}
table.models td{overflow-wrap:anywhere}
table.models td.m{white-space:normal}
table.models td a{white-space:normal}