/* Keep the article at its 700px reading width; figures only use spare space. */
body {
  --ptx-var-data: #0f6e78;
  --ptx-var-full: #985200;
  --ptx-var-done1: #7945ad;
  --ptx-var-done2: #b13c70;
  --ptx-var-empty: #197444;
}
.ptx-v-data { --ptx-variable-color: var(--ptx-var-data); }
.ptx-v-full { --ptx-variable-color: var(--ptx-var-full); }
.ptx-v-done1 { --ptx-variable-color: var(--ptx-var-done1); }
.ptx-v-done2 { --ptx-variable-color: var(--ptx-var-done2); }
.ptx-v-empty { --ptx-variable-color: var(--ptx-var-empty); }
.ptx-var { color: var(--ptx-variable-color) !important; fill: var(--ptx-variable-color); font-weight: 500; }
/* 数值用正文色；只有变量带颜色，避免数字也变成高亮的蓝。 */
code span.dv, code span.bn, code span.fl, code span.cn, code span.il { color: inherit; }
#ptx-lab { display: none; min-width: 0; }
#ptx-lab[hidden] { display: none !important; }
#ptx-lab-figure { min-width: 0; }
#ptx-lab .tl-card { width: 100% !important; }
.ptx-inline-figure { margin: 1.5rem 0; }
.ptx-inline-figure:empty { display: none; }
#quarto-margin-sidebar { display: none; }
.ptx-program-scroll { max-width: 100%; overflow-x: auto; margin: 1.25rem 0; }
.ptx-program-table { table-layout: fixed; width: 100%; margin: 0; border-collapse: collapse; }
.ptx-program-table th { width: 33.333%; padding: 10px 12px; font-size: 14px; border-bottom: 1px solid #dce2e8; }
.ptx-program-table td { vertical-align: top; padding: 0; border-bottom: 1px solid #dce2e8; }
.ptx-program-table th + th, .ptx-program-table td + td { border-left: 1px solid #dce2e8; }
.ptx-program-table div.sourceCode { margin: 0; border: 0; border-radius: 0; }
.ptx-program-table pre.sourceCode { margin: 0; padding: 12px; border: 0; border-radius: 0; min-height: 180px; }
.ptx-program-table pre.sourceCode code { font-size: 13px; line-height: 1.75; }
.ptx-phase-key { font-size: 12px; color: var(--tl-muted); }
.ptx-phase-label { font: 12px var(--tl-body); fill: var(--tl-muted); }
.ptx-phase-divider { stroke: var(--tl-rule); }
.ptx-phase-label-bg { fill: var(--tl-bg); }
.ptx-variable-legend { display: flex; gap: 5px 12px; flex-wrap: wrap; font: 12px var(--tl-mono); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tl-card {
    --ptx-var-data: #6fd3e0;
    --ptx-var-full: #ffbe69;
    --ptx-var-done1: #c2a0f0;
    --ptx-var-done2: #f399bd;
    --ptx-var-empty: #7dd6a0;
  }
}
@media (max-width: 600px) {
  .ptx-program-table { min-width: 600px; }
  .ptx-program-table pre.sourceCode { padding: 10px; }
}
/* 栏宽和断点在全站 styles.css 里，这里只放本篇右栏的图卡。
 * 断点要和 styles.css、reader.js 一致：≥ 1086px 有右栏，图卡放在右栏；更窄时放进正文。 */
@media (min-width: 1086px) {
  #ptx-lab {
    display: block;
    grid-column: margin-start / margin-end;
    grid-row: content-top / content-bottom;
    position: sticky;
    top: calc(var(--ptx-header-bottom, 136px) + 16px);
    align-self: start;
    max-height: calc(100vh - var(--ptx-header-bottom, 136px) - 36px);
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 0 0 12px;
    z-index: 2;
  }
  .ptx-inline-figure { display: none; }
}
@media (max-width: 1085.98px) {
  .ptx-inline-figure .tl-card { max-width: 550px; margin-inline: auto; }
}

/* 正文里的控件和普通图片一样，上下留一样的间距 */
[data-code-run] { margin: 1.5rem 0; }

/* 2.5 的程序块：fence 行要加粗，代码块里做不到，改用 <pre> + <b> */
.ptx-program-table pre.ptx-prog {
  margin: 0; padding: 12px; border: 0; border-radius: 0; min-height: 180px;
  font: 13px/1.75 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--code-bg, #efefef); overflow-x: auto;
}
.ptx-program-table pre.ptx-prog b { font-weight: 700; }

/* 四象限坐标系 */
.qd-svg { display: block; width: 100%; height: auto; }
.qd-box { fill: var(--tl-bg); stroke: var(--tl-rule); stroke-width: 1.2; }
.qd-node.is-on .qd-box { stroke: var(--tl-po); stroke-width: 1.6; fill: color-mix(in srgb, var(--tl-po) 6%, var(--tl-bg)); }
.qd-node.is-empty .qd-box { stroke-dasharray: 3 3; }
.qd-code { font: 600 11px var(--tl-mono); fill: var(--tl-ink); }
.qd-dot { font: 14px var(--tl-mono); fill: var(--tl-muted); }
.qd-axis { font: 12px var(--tl-body); fill: var(--tl-muted); }
.qd-fence { stroke: var(--tl-ink); stroke-width: 3; }
.qd-edge { fill: none; stroke-width: 1.6; }
.qd-head { stroke: none; }
.qd-e-keep { stroke: var(--tl-po); stroke-width: 2.6; }
.qd-h-keep { fill: var(--tl-po); }
.qd-e-free { stroke: var(--tl-muted); stroke-dasharray: 3 4; }
.qd-h-free { fill: var(--tl-muted); }
.qd-tag { font: 600 11.5px var(--tl-mono); color: var(--tl-po); border: 1px solid var(--tl-po); border-radius: 999px; padding: 1px 8px; }
.qd-note { font-size: 12px; color: var(--tl-muted); line-height: 1.5; }



/* 代码与机器码对照（3.5、4.5）：每行一个 span，行号用计数器；红＝被删掉，蓝＝要看的行 */
.ptx-asm-table th { width: auto; }
.ptx-asm-table th:first-child { width: 64px; }
.ptx-asm-table th[scope="row"] { padding: 10px 8px; font: 400 12px var(--tl-body); color: var(--tl-muted); text-align: right; vertical-align: top; }
.ptx-asm-table th code { font-size: 12px; }
.ptx-asm-table pre.ptx-prog { min-height: 0; padding: 8px 0; counter-reset: ln; }
.ptx-asm-table .ln { display: block; padding-right: 12px; counter-increment: ln; }
.ptx-asm-table .ln::before {
  content: counter(ln); display: inline-block; width: 2.6em; padding-right: .9em;
  text-align: right; color: var(--tl-muted); opacity: .65;
}
.ptx-asm-table .ln.is-gone { background: color-mix(in srgb, var(--tl-bad) 14%, transparent); }
.ptx-asm-table .ln.is-kept { background: color-mix(in srgb, var(--tl-po) 14%, transparent); }
.ptx-asm-table .ln.is-gone::before { color: var(--tl-bad); opacity: 1; font-weight: 700; }
.ptx-asm-table .ln.is-kept::before { color: var(--tl-po); opacity: 1; font-weight: 700; }

/* 5.3 两条访问路径图：颜色沿用时间线变量，暗色模式跟着变 */
.ptx-paths { margin: 1.5rem 0; }
.ptx-paths svg { display: block; width: 100%; min-width: 560px; height: auto; }
.ptx-paths .pp-box { fill: var(--tl-bg); stroke: var(--tl-rule); stroke-width: 1.4; }
.ptx-paths .pp-path { fill: var(--tl-bg); stroke-width: 2; }
.ptx-paths .pp-generic { stroke: var(--tl-po); }
.ptx-paths .pp-async { stroke: var(--tl-rf); }
.ptx-paths text { text-anchor: middle; font: 14px var(--tl-body); fill: var(--tl-ink); }
.ptx-paths .pp-title { font-weight: 700; font-size: 15px; }
.ptx-paths .pp-code { font: 13.5px var(--tl-mono); }
.ptx-paths .pp-note { font: 12px var(--tl-body); fill: var(--tl-muted); }
.ptx-paths .pp-small { font-size: 12px; }
.ptx-paths .pp-line { fill: none; stroke: var(--tl-muted); stroke-width: 1.6; }
.ptx-paths .pp-line.pp-c-generic { stroke: var(--tl-po); }
.ptx-paths .pp-line.pp-c-async { stroke: var(--tl-rf); }
.ptx-paths .pp-head { fill: var(--tl-muted); }
.ptx-paths .pp-fence { fill: none; stroke: var(--tl-sync); stroke-width: 2.2; stroke-dasharray: 5 3; }
.ptx-paths .pp-head-f { fill: var(--tl-sync); }
.ptx-paths .pp-c-generic { fill: var(--tl-po); }
.ptx-paths .pp-c-async { fill: var(--tl-rf); }
.ptx-paths text.pp-c-fence, .ptx-paths span.pp-c-fence { fill: var(--tl-sync); color: var(--tl-sync); }
.ptx-paths .pp-key { font-weight: 700; }
.ptx-paths .pp-flag { fill: var(--tl-sync); color: var(--tl-sync); }
.ptx-paths figcaption { display: grid; gap: 2px; margin-top: 6px; font-size: 13px; color: var(--tl-muted); }