/* 紧凑工作区；节点规则和数据保持原样。 */
body{line-height:1.55}
header{padding:10px 20px;gap:12px}
main{max-width:none;padding:16px 20px}
.intro{gap:16px;align-items:center}
h1,.intro h1{font-size:25px;margin:3px 0;letter-spacing:0}
.intro p{font-size:12px}
.stats{gap:20px}.stats b{font-size:23px}
nav{margin-top:12px}nav button{padding:9px 13px}
.introline{margin:12px 0 9px;gap:12px}h2{font-size:18px}.sub{margin-top:2px}
.toolbar{padding:8px 10px;gap:6px}
button.control,select{padding:4px 8px;font-size:12px}
.toolbar .search{padding:5px 8px;width:190px}
.diagram-workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;border:1px solid var(--line);border-top:0;border-radius:0 0 8px 8px;overflow:hidden;height:clamp(460px,calc(100dvh - 265px),1000px)}
.diagram-canvas{display:flex;flex-direction:column;min-width:0;min-height:0}
.viewport{flex:1;min-height:0;height:auto;border:0}
.legend{padding:7px 10px;gap:12px;border:0;border-top:1px solid var(--line);border-radius:0;line-height:1.4}
.legend .hint{width:100%;margin:0}
.inspector{min-width:0;min-height:0;display:flex;flex-direction:column;border-left:1px solid var(--line);background:var(--panel)}
.inspector-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);font-size:12px}
.selection{display:block;flex:1;overflow:auto;overscroll-behavior:contain;margin:0;border:0;border-radius:0;padding:14px;overflow-wrap:anywhere;scrollbar-color:#55716f #16232d}
.selection h3{font-size:18px;line-height:1.4;margin:5px 0 9px}.selection p{font-size:12px;margin-bottom:12px}
.selection>div+div{margin-top:16px}.field{margin:10px 0}.field div,.params,.boundary{font-size:12px}
.params,.boundary{padding:9px 10px}.source{padding-top:10px;margin-top:12px}
.inspector-hidden{grid-template-columns:minmax(0,1fr)}.inspector-hidden .inspector{display:none}
details{margin-top:16px;padding:12px 0}.foot{padding-top:12px;margin-top:16px}
.contractgrid{gap:12px;margin:14px 0}.card{padding:15px}.relation{padding:14px}
/* 动画页：保持环节说明固定在流程右边。 */
.practice-page .layout{max-width:none;grid-template-columns:210px minmax(0,1fr)}
.practice-page aside{padding:18px 12px}.practice-page aside p{margin:18px 8px}
.practice-page nav{margin-top:0}.practice-page nav button{padding:8px;gap:10px;margin:2px 0}
.practice-page .main{min-width:0;padding:16px 20px}.practice-page .eyebrow{margin-bottom:8px}
.practice-page .index{font-size:36px}.workspace{margin-top:14px;border-radius:8px}
.bar{padding:8px 12px;flex-wrap:wrap}.bar #fullscreen{margin-left:auto}
.viz{grid-template-columns:minmax(0,1.5fr) minmax(270px,1fr);min-height:270px}
.stage{padding:18px 16px}.detail{padding:18px;min-width:0;overflow-wrap:anywhere}.detail h2{font-size:19px;margin:6px 0 10px}
.flow{margin:22px 0 12px}.node{padding:12px 9px}.wire{width:44px}
.branch{padding:9px 12px;min-height:0}.controls{padding:10px 12px;gap:7px}
button.ctrl,.controls select{padding:5px 10px;font-size:12px}
.steps{gap:5px;margin:10px 0 18px}.steps button{padding:7px;min-width:85px}.steps b{margin-bottom:2px}
.columns{gap:20px}.section{padding-top:14px}.section h3{margin-bottom:10px}
.lab{margin-top:18px;padding:18px}.lab-layout{gap:20px;margin-top:14px}
/* 原生全屏不可用时使用同样可退出的页面全屏。 */
.page-fullscreen{overflow:hidden}
.page-fullscreen header,.page-fullscreen .intro,.page-fullscreen .foot{display:none}
.page-fullscreen main{padding:10px 14px}
.page-fullscreen .architecture-page{overflow:hidden}
.page-fullscreen .architecture-page #views{margin-top:0}
.page-fullscreen .architecture-page #diagramPanel{display:flex;flex-direction:column;min-height:0;flex:1}
.page-fullscreen .architecture-page main{height:100dvh;display:flex;flex-direction:column}
.page-fullscreen .architecture-page .diagram-workspace{height:auto;flex:1;min-height:0}
.page-fullscreen .architecture-page #diagramPanel>details{display:none}
.page-fullscreen .architecture-page #contracts{overflow:auto}
.page-fullscreen .practice-page .layout{height:100dvh}
.page-fullscreen .practice-page .main{height:100dvh;overflow:auto}
.page-fullscreen .practice-page .workspace{margin-top:0}
.page-fullscreen .practice-page .viz{min-height:clamp(270px,calc(100dvh - 220px),750px)}
@media(max-width:1100px){
 .stats{display:none}.diagram-workspace{grid-template-columns:minmax(0,1fr) 300px;height:calc(100dvh - 290px);min-height:420px}
 .inspector-hidden{grid-template-columns:minmax(0,1fr)}
 .practice-page .layout{grid-template-columns:180px minmax(0,1fr)}
 .viz{grid-template-columns:minmax(0,1.2fr) minmax(240px,1fr)}
 .practice-page .columns,.practice-page .lab-layout{grid-template-columns:1fr}
}
@media(max-width:700px){
 header{padding:8px 12px}.brand,header strong{font-size:15px}.headerlinks{gap:10px;font-size:11px}
 main,.practice-page .main{padding:12px}h1,.intro h1{font-size:21px}
 .eyebrow{font-size:9px;letter-spacing:1px}.introline{display:block}.toolbar .search{width:100%;margin-left:0}
 .diagram-workspace{grid-template-columns:minmax(0,1fr) minmax(170px,44%);min-height:460px;height:calc(100dvh - 310px)}
 .inspector-hidden{grid-template-columns:minmax(0,1fr)}.selection{padding:10px}.selection h3{font-size:16px}.inspector-heading{padding:7px;font-size:11px}
 .legend{gap:6px;font-size:10px}.legend .hint{display:none}
 .practice-page .layout{display:block}.practice-page aside{padding:8px 12px;border-right:0;border-bottom:1px solid var(--line)}
 .practice-page aside p,.practice-page aside .eyebrow{display:none}.practice-page nav{display:flex;overflow:auto}
 .practice-page nav button{min-width:145px}.practice-page .tag{font-size:9px}
 .viz{grid-template-columns:minmax(0,1fr) minmax(160px,44%)}
 .stage{padding:12px 8px;border-right:1px solid var(--line);border-bottom:0}.detail{padding:12px 10px;font-size:12px}.detail h2{font-size:16px}
 .flow{flex-direction:column;gap:8px;margin:16px 0}.node{width:100%;flex:auto;padding:8px}.wire{width:2px;height:24px}.wire:after{right:-4px;top:auto;bottom:0;transform:rotate(90deg)}.packet{animation:travel-vertical 1.8s linear infinite;left:-3px;top:0}
 .signal{height:65px}.caption{font-size:10px}.stage .fine{font-size:10px}
 .page-fullscreen .practice-page .layout{display:flex;flex-direction:column}.page-fullscreen .practice-page .main{flex:1;min-height:0;height:auto}
}
@keyframes travel-vertical{from{top:0}to{top:90%}}
@media print{
 .diagram-workspace{display:block!important;height:auto!important;overflow:visible;border:0}
 .diagram-canvas,.inspector{display:block!important;overflow:visible;border:0}.inspector-heading,#fullscreen{display:none!important}
 .selection{overflow:visible}.page-fullscreen{overflow:visible}.page-fullscreen .architecture-page main{height:auto;display:block}
}

/* 整图模式由脚本按实际可用宽高缩放，缩小后水平居中。 */
.viewport svg{margin-inline:auto;max-width:none;flex-shrink:0}
.diagram-workspace{min-height:280px}
@media(max-width:700px){.diagram-workspace{min-height:280px}}
/* 就地解释和可搜索速查，独立滚动，不挤占架构图。 */
.term-context{margin-top:16px;padding:12px 0 0;border-top:1px solid var(--line);font-size:12px}
.term-context summary{color:#d5f58a;font-weight:600}
.term-context dl,.term-dialog dl{margin:12px 0 0}
.term-context dt,.term-dialog dt{font-weight:650;color:#d5f58a;overflow-wrap:anywhere}
.term-context dd,.term-dialog dd{margin:3px 0 12px;color:var(--muted);line-height:1.65;font-size:12px}
.term-dialog{width:min(680px,calc(100vw - 28px));max-height:80dvh;overflow:auto;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:20px;overscroll-behavior:contain}
.term-dialog::backdrop{background:#000a}
.term-dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
.term-dialog h2{font-size:18px}.term-dialog p{font-size:12px;color:var(--muted)}
.term-dialog input{width:100%;padding:9px 12px;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:5px}
#termResults{font-size:11px;color:var(--muted);margin-top:8px}
@media print{.term-dialog,#termHelp{display:none!important}}
/* 动画页解释较多时在右侧滚动，保持流程和播放按钮可见。 */
.practice-page .viz{height:340px;min-height:0}
.practice-page .detail,.practice-page .stage{overflow:auto;min-height:0;overscroll-behavior:contain}
.page-fullscreen .practice-page .viz{height:clamp(300px,calc(100dvh - 220px),750px);min-height:0}
@media(max-width:700px){.practice-page .viz{height:380px}}