header{height:64px;display:flex;justify-content:space-between;align-items:center;padding:0 var(--space-8);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:var(--space-3);align-items:center;text-decoration:none}.brand b{letter-spacing:.07em;font-size:var(--text-lg)}.brand svg{color:var(--accent)}.brand span{font:var(--text-xs) var(--mono);color:var(--muted);letter-spacing:.07em}
header nav{display:flex;gap:var(--space-4);align-items:center}header nav a{font-size:var(--text-xs);text-decoration:none}header nav button{width:44px;border:1px solid var(--line);border-radius:50%;font-size:var(--text-lg)}
.heading{display:flex;justify-content:space-between;align-items:center;padding:22px var(--space-8);gap:var(--space-6)}
.eyebrow{font:10px var(--mono);letter-spacing:.09em;color:var(--accent);text-transform:uppercase}
h1{font:500 29px/1.45 var(--font-display);margin:var(--space-2) 0}h1 span{font:400 15px var(--font-body);color:var(--muted);margin-left:var(--space-5)}
.heading p{color:var(--muted);font-size:13px}
.edition{font-size:var(--text-xs);text-align:right;white-space:nowrap}.edition small{display:block;font:var(--text-xs) var(--mono);color:var(--muted);margin-top:var(--space-3)}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:var(--space-2)}
.topnav{display:flex;align-items:center;justify-content:space-between;margin:0 var(--space-8);border-top:1px solid var(--line);border-bottom:1px solid var(--line);gap:var(--space-3)}
.topnav>div{display:flex;gap:var(--space-5);overflow-x:auto;scrollbar-width:none}.topnav button{padding:var(--space-3) 0;border-bottom:2px solid transparent;white-space:nowrap;color:var(--muted);font-size:13px}
.topnav button.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}.topnav>span{font-size:var(--text-xs);color:var(--muted);white-space:nowrap}
.workspace{display:grid;grid-template-columns:200px minmax(0,1fr) 320px;margin:0 var(--space-8);border:1px solid var(--line);border-top:0;align-items:stretch}
.rail{padding:var(--space-5) var(--space-3)}.rail-heading{display:flex;justify-content:space-between;margin:0 var(--space-2) var(--space-3);font-size:var(--text-xs);color:var(--muted)}.rail-heading small{font:20px var(--mono);color:var(--accent)}
#partList button{display:flex;gap:10px;width:100%;text-align:left;padding:8px 8px;border-left:2px solid transparent;align-items:flex-start;line-height:1.35}
#partList button .n{font:11px var(--mono);color:var(--muted);padding-top:2px}#partList strong{display:block;font-size:12px;font-weight:500}#partList small{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
#partList button:hover{background:var(--surface)}#partList button.active{border-left-color:var(--accent);background:var(--soft);color:var(--accent)}
.rail-note{margin:var(--space-6) var(--space-2) 0;padding-top:var(--space-5);border-top:1px solid var(--line)}.rail-note p{font:400 19px/1.8 var(--font-display);margin:var(--space-3) 0 var(--space-4)}.rail-note small{color:var(--muted);line-height:1.7;display:block}
.visual{border-left:1px solid var(--line);border-right:1px solid var(--line);min-width:0;background:var(--surface)}
.intro{padding:20px 24px 14px;background:var(--scene);border-bottom:1px solid var(--line)}.intro span{font:10px var(--mono);color:var(--muted);letter-spacing:.07em}
.intro h2{font:500 21px/1.5 var(--font-display);margin:6px 0 6px;text-wrap:balance}.intro p{font-size:12.5px;color:var(--muted);max-width:720px;line-height:1.8}
#sceneWrap{position:relative;height:520px;background:var(--scene);overflow:hidden}
#canvasHost,#labels{position:absolute;inset:0}#canvasHost canvas{display:block;width:100%;height:100%;touch-action:none}#labels{pointer-events:none;overflow:hidden}
.c-label{position:absolute;left:0;top:0;pointer-events:auto;white-space:nowrap;font-size:11px;line-height:1.35;min-height:0;padding:3px 8px;background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--line);border-radius:3px;box-shadow:0 1px 6px rgba(30,50,40,.08);text-align:center}
.c-label b{font-weight:600;display:block}.c-label small{display:block;font:10px var(--mono);color:var(--muted)}
.c-label[tabindex="-1"]{pointer-events:none}.c-label:hover{border-color:var(--accent)}
.c-label.warn{border-color:#d8a399;color:var(--danger)}.c-label.ok{border-color:#9cc6ad;color:var(--accent)}.c-label.gold{border-color:#d9bd8a;color:#8a5e1f}
[data-theme=dark] .c-label.gold{color:#e3bf7f}
.c-label.tag{font-size:10px;padding:2px 7px;background:var(--soft);color:var(--accent)}.c-label.tag.gold{background:#f3e7cf;color:#7e561c}[data-theme=dark] .c-label.tag.gold{background:#4a3d25;color:#f0d29a}
.c-label.station{background:var(--ink);color:var(--bg);border-color:var(--ink)}.c-label.station small{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.c-label.num b{font:600 13px var(--mono)}.c-label.prog{background:transparent;border-color:transparent;box-shadow:none}
.c-label.mutl{cursor:pointer}.c-label.mutl.active{border-color:#c2944e;background:#f8eedb;color:#7e561c}[data-theme=dark] .c-label.mutl.active{background:#4a3d25;color:#f0d29a}
#loader,#fallback{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:var(--muted);gap:8px}
.scene-tools{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;gap:6px}.scene-tools button{width:38px;min-height:38px;border:1px solid var(--line);background:var(--surface);border-radius:3px;font-size:14px}
.scene-tools button[aria-pressed=true]#pause{background:var(--soft)}
.scene-foot{position:absolute;left:14px;bottom:10px;font:10px var(--mono);color:var(--muted);pointer-events:none}
.stepbar{display:flex;justify-content:space-between;align-items:center;padding:8px 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);gap:12px}
.steps{display:flex;gap:4px;flex-wrap:wrap}.steps button{min-width:44px;font:12px var(--mono);border:1px solid var(--line);border-radius:3px;color:var(--muted)}.steps button.active{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.stepctl{display:flex;gap:6px}.stepctl button{border:1px solid var(--line);border-radius:3px;padding:0 14px;font-size:12px}.stepctl .primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.stage-note{display:flex;gap:16px;padding:16px 22px;border-bottom:1px solid var(--line);align-items:flex-start}.stage-note span{font:12px var(--mono);color:var(--accent);padding-top:3px;white-space:nowrap}.stage-note p{font-size:13.5px;line-height:1.85;max-width:760px}
.controls{padding:16px 22px 22px;display:grid;gap:14px}
.ctl label,.ctl .lab{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:6px}.ctl output{font:600 12px var(--mono);color:var(--accent)}
.ctl input[type=range]{width:100%;accent-color:var(--accent);min-height:28px}
.seg{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:4px;padding:2px;background:var(--bg);width:fit-content;max-width:100%}.seg button{padding:0 14px;font-size:12px;border-radius:3px;min-height:38px}.seg button.active{background:var(--surface);color:var(--accent);font-weight:600;box-shadow:0 0 0 1px var(--line)}
.ctl-note{border-left:2px solid var(--accent);padding:4px 0 4px 14px}.ctl-note b{font-size:13px;font-weight:600}.ctl-note p{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.8}
.readout{width:100%;border-collapse:collapse;font-size:12.5px}.readout th,.readout td{border-bottom:1px solid var(--line);padding:7px 6px;text-align:left;font-weight:400}.readout td{font:600 12.5px var(--mono);font-variant-numeric:tabular-nums}.readout td.m,.watch td.m{font:400 11px var(--mono);color:var(--muted)}.readout thead th{font-size:11px;color:var(--muted)}
.formula{font-size:11.5px;color:var(--muted);line-height:1.8;background:var(--bg);padding:10px 12px;border-radius:3px}
.panel{padding:var(--space-5);display:flex;flex-direction:column;gap:22px;min-width:0}
.part-card{background:var(--surface);border:1px solid var(--line);padding:16px;border-radius:3px}.part-card small{font:10px var(--mono);color:var(--accent);letter-spacing:.04em}.part-card h3{font:500 18px/1.5 var(--font-display);margin:6px 0}.part-card p{font-size:12.5px;line-height:1.8;color:var(--ink)}
.sectionline{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:8px}.sectionline h3{font:500 18px var(--font-display);margin-top:4px}
#facts{margin:0}#facts div{padding:7px 0;border-bottom:1px dashed var(--line)}#facts dt{font-size:11px;color:var(--muted)}#facts dd{margin:2px 0 0;font-size:12.5px;font-weight:500}#facts dd small{display:block;font-weight:400;font-size:10.5px;margin-top:2px}#facts a,.sources a,.risk a,.logic a{color:var(--accent)}
.sources ul{margin:0;padding-left:16px;font-size:12px;line-height:1.9}
.lower{margin:0 var(--space-8);padding:var(--space-8) 0;display:grid;gap:var(--space-8)}
.logic{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border:1px solid var(--line)}
.logic li{display:flex;gap:10px;padding:16px;border-right:1px solid var(--line);background:var(--surface)}.logic li:last-child{border-right:0}.logic .n{font:20px var(--mono);color:var(--accent)}.logic b{font-size:13.5px}.logic p{font-size:12px;line-height:1.8;color:var(--muted);margin:6px 0}.logic small{font-size:10.5px}.jump{min-height:0;color:var(--accent);font-size:10.5px;padding:0;text-decoration:underline;text-underline-offset:3px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8)}
.risks{display:grid;gap:0}.risk{padding:12px 0;border-bottom:1px solid var(--line)}.risk b{font-size:13.5px}.risk p{font-size:12.5px;line-height:1.8;margin:4px 0;color:var(--muted)}.risk small{font-size:10.5px}
.watch{width:100%;border-collapse:collapse;font-size:12.5px}.watch th,.watch td{text-align:left;padding:9px 6px;border-bottom:1px solid var(--line);vertical-align:top}.watch th{font-size:11px;color:var(--muted);font-weight:400}
.fine{font-size:11px;color:var(--muted)}
footer{display:flex;justify-content:space-between;margin:0 var(--space-8);padding:18px 0 28px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}footer a{color:var(--muted)}
@media(max-width:1180px){.workspace{grid-template-columns:minmax(0,1fr) 300px}.rail{display:none}.logic{grid-template-columns:repeat(2,1fr)}.logic li{border-bottom:1px solid var(--line)}}
@media(max-width:820px){header,.heading{padding-left:16px;padding-right:16px}.heading{flex-direction:column;align-items:flex-start}.edition{text-align:left}h1 span{display:block;margin:0}.topnav,.workspace,.lower,footer{margin-left:12px;margin-right:12px}.workspace{grid-template-columns:1fr}.visual{border:0}.panel{border-top:1px solid var(--line)}#sceneWrap{height:420px}.two,.logic{grid-template-columns:1fr}.logic li{border-right:0}.stepbar{flex-direction:column;align-items:stretch}.scene-foot{display:none}.brand span{display:none}}

/* 教学阅读与组件目录：保持 12px 下限，正文可读。 */
.eyebrow,.intro span,.scene-foot,.part-card small,.logic small,.jump,.fine,
#partList button .n,#partList small,#facts dt,#facts dd small,.risk small,
.readout td.m,.watch td.m,.readout thead th,.watch th,footer{font-size:var(--text-xs)}
.intro h2{font-family:var(--font-body);font-size:var(--text-lg);font-weight:600}
.intro p,.stage-note p,.part-card p,.ctl-note p,.risk p,.logic p{font-size:var(--text-sm)}
.c-label{font-size:var(--text-xs);padding:var(--space-1) var(--space-2);max-width:220px;white-space:normal}
.c-label small,.c-label.tag{font-size:var(--text-xs)}
.formula{font-size:var(--text-xs)}
.perf{position:absolute;right:var(--space-3);bottom:var(--space-2);font:var(--text-xs) var(--mono);color:var(--muted);pointer-events:none}
.company-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.company-grid button{border:1px solid var(--line);padding:var(--space-2);border-radius:3px;text-align:left;font-size:var(--text-sm);background:var(--bg)}
.company-grid button small{display:block;color:var(--muted);font-size:var(--text-xs)}
.company-grid button.active{border-color:var(--accent);background:var(--soft)}
.delivery{border-left:2px solid var(--accent);padding:var(--space-3) var(--space-4);background:var(--bg)}
.delivery h3{font-size:var(--text-lg);margin-bottom:var(--space-3)}
.delivery dl{display:grid;gap:var(--space-3);margin:0}
.delivery dl div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:var(--space-2)}
.delivery dt{font-size:var(--text-xs);color:var(--muted)}
.delivery dd{font-size:var(--text-sm);margin:0}
.delivery>small{display:block;margin-top:var(--space-3);color:var(--accent)}
details.fine summary{cursor:pointer;padding:var(--space-3) 0}
details.fine p{padding-bottom:var(--space-4)}
@media(max-width:820px){
 .intro{padding:var(--space-4)}
 .heading{padding-block:var(--space-4)}
 h1{font-size:var(--text-xl)}
 .topnav>span{display:none}
 .c-label{max-width:145px}
 .c-label small{font-size:var(--text-xs)}
 .company-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .delivery dl div{grid-template-columns:1fr;gap:var(--space-1)}
 .controls,.stage-note{padding:var(--space-4)}
 .scene-tools{gap:var(--space-1)}
 .scene-tools button{width:40px;min-height:40px}
 #sceneWrap{height:380px}
 .readout td.m{max-width:105px}
 .c-label.num,.c-label.prog{padding:var(--space-1);max-width:60px}
 .c-label.num small,.c-label.prog small{display:none}
}