/* capstone.css — 第 25 课画布样式（T5）：只用 tokens 变量圆角 0；端口三型色 token橙=--accent-dim、tensor蓝/logits紫 为本文件局部新色 */ .cap-lab {--cap-token: var(--accent-dim); --cap-tensor: #1F6FB2;  /* 白底 4.6:1 */ --cap-logits: #6D4FA3;  /* 白底 5.0:1 */ display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-4); align-items: start; -webkit-user-select: none; user-select: none; font-family: var(--font-sans); color: var(--text);}
.cap-side {display: flex; flex-direction: column; gap: var(--space-2);}
.cap-side-title {font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 0;}
.cap-side-hint {font-size: var(--text-xs); line-height: var(--leading-mono); color: var(--text-faint); margin-bottom: var(--space-1);}
.cap-lib-item {display: flex; flex-direction: column; gap: 2px; text-align: left; border: 1px solid var(--border-color); border-left: 3px solid var(--border-strong); background: var(--surface); padding: var(--space-2) var(--space-3); cursor: grab; touch-action: none; /* 拖拽归画布，不滚页面 */ font: inherit; color: inherit;}
.cap-lib-item:active {cursor: grabbing;}
.cap-lib-item:hover {border-color: var(--border-strong);}
.cap-lib-item.is-full {opacity: 0.55; cursor: not-allowed;}
.cap-lib-name {display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); font-weight: 600; font-size: var(--text-base); line-height: var(--leading-tight);}
.cap-lib-badge {font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; color: var(--accent-dim); white-space: nowrap;}
.cap-lib-badge2 {font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-dim);}
.cap-lib-blurb {font-size: var(--text-xs); line-height: var(--leading-mono); color: var(--text-dim);}
.cap-lib-item[data-type="tokenizer"] {border-left-color: var(--cap-token);}
.cap-lib-item[data-type="embedding"], .cap-lib-item[data-type="layer"], .cap-lib-item[data-type="ln_f"] {border-left-color: var(--cap-tensor);}
.cap-lib-item[data-type="lm_head"], .cap-lib-item[data-type="sampler"] {border-left-color: var(--cap-logits);}
.cap-lib-item[data-type="quant"] {border-left-color: var(--border-color); border-style: dashed;}
.cap-ghost {position: fixed; z-index: calc(var(--z-modal) + 1); pointer-events: none; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--on-accent); background: var(--accent); padding: 2px var(--space-2);}
.cap-stage {position: relative; min-width: 0;}
.cap-toolbar {display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2);}
.cap-btn {font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); padding: var(--space-1) var(--space-3); cursor: pointer;}
.cap-btn:hover {color: var(--accent-dim); border-color: var(--accent-dim);}
.cap-count {margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-dim);}
.cap-canvas {border: 1px solid var(--border-color); background: var(--surface); overflow-x: auto; overflow-y: hidden;}
.cap-wrap {position: relative; min-width: 920px; touch-action: pan-y; /* 空白区保留页面竖向滚动 */ background: linear-gradient(var(--border-color) 1px, transparent 1px) 0 0 / 100% 48px, linear-gradient(90deg, var(--border-color) 1px, transparent 1px) 0 0 / 48px 100%;}
.cap-edges {position: absolute; inset: 0; display: block;}
.cap-guide {position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); opacity: 0.6; pointer-events: none;}
.cap-edge-line {fill: none; stroke-width: 2;}
.cap-edge--token .cap-edge-line {stroke: var(--cap-token);}
.cap-edge--tensor .cap-edge-line {stroke: var(--cap-tensor);}
.cap-edge--logits .cap-edge-line {stroke: var(--cap-logits);}
.cap-edge-hit {fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer;}
.cap-edge.is-sel .cap-edge-line {stroke-width: 4; stroke-dasharray: 4 4;}
.cap-edge.is-flash .cap-edge-line {stroke-dasharray: 6 6; animation: cap-dash 0.5s linear infinite;}
@keyframes cap-dash {to {stroke-dashoffset: -24;}
}
.cap-temp-line {fill: none; stroke: var(--text-dim); stroke-width: 2; stroke-dasharray: 5 5; pointer-events: none;}
.cap-node {position: absolute; width: 148px; height: 84px; box-sizing: border-box; border: 1px solid var(--border-strong); border-left-width: 3px; background: var(--surface); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); cursor: grab; touch-action: none; /* 节点拖拽归画布 */ font-size: var(--text-xs);}
.cap-node.is-drag, .cap-node:active {cursor: grabbing;}
.cap-node:focus-visible {outline: 2px solid var(--accent); outline-offset: 2px;}
.cap-node.is-sel {border-color: var(--accent-dim); box-shadow: inset 0 0 0 1px var(--accent-dim);}
.cap-node.is-lit {border-color: var(--accent); box-shadow: 0 0 0 3px var(--surface-2), 0 0 0 5px var(--accent);}
.cap-node--tokenizer {border-left-color: var(--cap-token);}
.cap-node--embedding, .cap-node--layer, .cap-node--ln_f {border-left-color: var(--cap-tensor);}
.cap-node--lm_head, .cap-node--sampler {border-left-color: var(--cap-logits);}
.cap-node--quant {border-left-color: var(--border-color); border-style: dashed;}
.cap-node--term {border-left-width: 1px; background: var(--surface-2); cursor: default;}
.cap-node-name {font-weight: 600; font-size: var(--text-base); line-height: var(--leading-tight); display: flex; align-items: baseline; gap: var(--space-1); white-space: nowrap;}
.cap-node-no {font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; color: var(--accent-dim); white-space: nowrap;}
.cap-node-badge {font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-dim); margin-top: 2px;}
.cap-node-blurb {font-size: var(--text-xs); line-height: 1.35; color: var(--text-dim); margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.cap-mini {font-family: var(--font-mono); font-size: 10px; line-height: 1.5; color: var(--text-dim); white-space: nowrap;}
/* 变换层卡面 mini 流程图 */ .cap-del {position: absolute; top: 0; right: 0; width: 20px; height: 20px; border: none; border-left: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); background: var(--surface); color: var(--text-dim); font-size: 13px; line-height: 1; cursor: pointer; padding: 0;}
.cap-del:hover {color: var(--on-accent); background: var(--accent);}
.cap-port {position: absolute; top: 50%; width: 20px; height: 20px; margin-top: -10px; box-sizing: border-box; border: 1px dashed transparent; cursor: crosshair; touch-action: none;}
.cap-port::after {content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 2px solid currentColor; background: var(--surface);}
.cap-port--in {left: -10px;}
.cap-port--out {right: -10px;}
.cap-port--text {color: var(--text);}
.cap-port--token {color: var(--cap-token);}
.cap-port--tensor {color: var(--cap-tensor);}
.cap-port--logits {color: var(--cap-logits);}
.cap-port.is-hot {border-color: currentColor; background: var(--surface-2);}
.cap-port.is-near {border-style: solid; border-color: var(--accent); background: var(--accent);}
.cap-port.is-near::after {background: var(--surface);}
.cap-lab.is-linking .cap-port:not(.is-hot):not(.is-near):not(.is-from) {opacity: 0.25;}
.cap-lab.is-linking .cap-canvas {cursor: crosshair;}
.cap-status {font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-mono); color: var(--text-dim); margin-top: var(--space-2); min-height: 1.5em;}
.cap-status.is-ok {color: var(--accent-dim); font-weight: 600;}
.cap-formula {position: absolute; top: 40px; right: 0; z-index: var(--z-raised); width: 280px; max-width: 90%; border: 1px solid var(--border-strong); border-left: 3px solid var(--accent); background: var(--surface); padding: var(--space-3) var(--space-4); box-shadow: 4px 4px 0 var(--surface-2);}
.cap-formula-close {position: absolute; top: 0; right: 0; width: 24px; height: 24px; border: none; border-left: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); background: var(--surface); color: var(--text-dim); font-size: 14px; line-height: 1; cursor: pointer; padding: 0;}
.cap-formula-close:hover {color: var(--accent-dim);}
.cap-formula-title {font-weight: 600; font-size: var(--text-base); margin-bottom: var(--space-1);}
.cap-formula-badge {font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; color: var(--text-dim); margin-left: var(--space-1);}
.cap-formula-line {font-size: var(--text-xs); line-height: var(--leading-body); color: var(--text); margin-bottom: var(--space-1);}
.cap-formula-tensor {font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-dim); margin-bottom: var(--space-1);}
.cap-formula-links {font-size: var(--text-xs); line-height: var(--leading-mono); margin-bottom: 0;}
.cap-formula-links a {color: var(--text); text-decoration: underline; text-underline-offset: 2px;}
.cap-formula-links a:hover {color: var(--accent-dim);}
.capstone-mount {border: 1px solid var(--border-color); background: var(--bg); padding: var(--space-4); min-height: 200px;}
.capstone-mount.is-offline {opacity: 0.5;}
.cap-runbar {grid-column: 1 / -1; display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); border-top: 1px solid var(--border-color); padding-top: var(--space-3);}
.cap-run {font-family: var(--font-mono); font-size: var(--text-xs); padding: var(--space-2) var(--space-4); border: 1px solid var(--border-strong); background: var(--accent); color: var(--on-accent); cursor: pointer;}
.cap-run:disabled {background: var(--surface-2); color: var(--text-faint); border-style: dashed; cursor: not-allowed;}
.cap-run:not(:disabled):hover {border-color: var(--accent-dim);}
.cap-run-hint {font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-dim);}
@media (max-width: 900px) {.cap-lab {grid-template-columns: 1fr;}
.cap-side {flex-direction: row; overflow-x: auto; padding-bottom: var(--space-2);}
.cap-side-title, .cap-side-hint {display: none;}
.cap-lib-item {flex: 0 0 auto; width: 168px;}
.cap-count {margin-left: 0; flex-basis: 100%;}
.cap-formula {position: static; width: auto; max-width: none; margin-top: var(--space-2); box-shadow: none;}
}
@media (prefers-reduced-motion: reduce) {.cap-edge.is-flash .cap-edge-line {animation: none;}
}
.rm .cap-edge.is-flash .cap-edge-line {animation: none;}

/* ---- T6 运行时：运行条 / 结果区 / top-5 条形图 / 量化面板 / 连跑日志 ---- */
.cap-runbar {display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); border: 1px solid var(--border-color); background: var(--surface); padding: var(--space-3);}
.cap-inlabel {font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-dim);}
.cap-input {font: inherit; color: inherit; border: 1px solid var(--border-strong); background: var(--surface-2); padding: var(--space-2); resize: vertical;}
.cap-ctl {display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);}
.cap-btn:disabled {opacity: 0.5; cursor: not-allowed;}
.cap-btn--run {color: var(--on-accent); background: var(--accent); border-color: var(--accent); font-weight: 600;}
.cap-btn--run:hover {color: var(--on-accent); border-color: var(--accent);}
.cap-slider {display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-dim);}
.cap-slider b {color: var(--text); min-width: 2.4em;}
.cap-result {margin-top: var(--space-3); border: 1px solid var(--border-color); border-left: 3px solid var(--accent); background: var(--surface); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2);}
.cap-log {display: flex; flex-direction: column; gap: 4px;}
.cap-line {margin: 0; font-size: var(--text-xs); line-height: 1.6; color: var(--text);}
.cap-line--engine {color: var(--text-faint);}
.cap-line--sink {font-weight: 600;}
.cap-line--err {color: #B3261E;}
.cap-bars {display: flex; flex-direction: column; gap: 5px; margin: var(--space-1) 0;}
.cap-bar-row {display: grid; grid-template-columns: 1.2em 8.5em 1fr 4.2em; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs);}
.cap-bar-rank {color: var(--text-dim);}
.cap-bar-tok {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.cap-bar-track {height: 10px; background: var(--surface-2); border: 1px solid var(--border-color);}
.cap-bar-fill {display: block; height: 100%; background: var(--accent-dim);}
.cap-bar-row.is-top1 .cap-bar-fill {background: var(--accent);}
.cap-bar-row.is-top1 .cap-bar-tok {font-weight: 600;}
.cap-bar-pct {text-align: right; color: var(--text-dim);}
.cap-quant {display: flex; flex-direction: column; gap: 2px; border: 1px dashed var(--border-strong); padding: var(--space-2); font-size: var(--text-xs); color: var(--text-dim);}
.cap-quant b {color: var(--text);}
.cap-gen {display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--border-color); padding-top: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-dim);}