/* figures for the tensor-layouts post; everything is scoped under .tl-fig */
.tl-fig{--paper:#FAFAFA;--ink:#222;--ink-2:#555;--ink-3:#8c8c8c;--rule:#ddd;--good:#1c8455;--bad:#cf3f3f;
  --mono:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;margin:1.7rem 0 1.9rem;padding:0}
.tl-fig .tl-stage{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tl-fig .tl-stage svg{display:block;width:100%;height:auto;margin:0 auto}
.tl-fig .tl-controls{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 0 16px}
.tl-fig .tl-controls button{font:500 12.5px/1 var(--mono);color:#444;background:#fff;border:1px solid #ccc;border-radius:5px;padding:8px 9px;cursor:pointer}
.tl-fig .tl-controls button:hover{border-color:#888;color:#111}
.tl-fig .tl-controls button[aria-pressed="true"]{background:#232323;border-color:#232323;color:whitesmoke}
.tl-fig .tl-controls button:focus-visible{outline:2px solid var(--accent-dark,#35A7FF);outline-offset:2px}
.tl-fig .tl-controls small{font-size:.85em;opacity:.7;margin-left:.45em;font-weight:400}
.tl-fig .tl-readout{font-size:16px;line-height:1.45;color:#666;text-align:center;margin:12px 0 0;min-height:2.9em}
.tl-fig.tl-legend{display:grid;gap:8px;font-size:15px;margin:1.2rem 0}
.tl-fig.tl-legend > div{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.tl-fig.tl-legend .lg{width:6.4em;white-space:nowrap;color:#555}
.tl-fig.tl-legend .grp{display:inline-flex;align-items:center;gap:1px}
.tl-fig.tl-legend .grp em{font:normal 13px var(--mono);color:var(--ink-3);margin-left:6px}
.tl-fig.tl-legend .sw{width:15px;height:15px;display:inline-block}
.tl-fig.tl-legend .grp .sw:first-child{border-radius:3px 0 0 3px}
.tl-fig.tl-legend .grp .sw:nth-last-child(2){border-radius:0 3px 3px 0}
.tl-fig.tl-legend .grp .sw:first-child:nth-last-child(2){border-radius:3px}
/* inside the SVGs */
.tl-fig .lbl{font:11px var(--mono);fill:var(--ink-2)}
.tl-fig .lbl.code{font-size:12px;fill:var(--ink)}
.tl-fig .lbl.sm{font-size:9.5px;fill:var(--ink-3)}
.tl-fig .lbl.ttl{font-size:10px;fill:var(--ink-2)}
.tl-fig .lbl.mid{dominant-baseline:central}
.tl-fig .lbl.ok{fill:var(--good);font-size:12px}
.tl-fig .lbl.bad{fill:var(--bad);font-size:12px}
.tl-fig .lbl.mk{font-size:15px;font-weight:600}
.tl-fig .lbl.op{font-size:13px;fill:var(--ink-3)}
.tl-fig .tag{font:9px var(--mono);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.tl-fig .tb{fill:rgba(18,20,26,.8)}
.tl-fig .tw{fill:#fff}
.tl-fig .cell rect{stroke:var(--paper);stroke-width:1.2}
.tl-fig .cell.ghost rect{fill-opacity:.38}
.tl-fig[id^="fig-gqa"] .cell.ghost rect{fill-opacity:.22;stroke:var(--ink-3);stroke-width:1;stroke-dasharray:2 2}
.tl-fig .sep{stroke:var(--paper);stroke-width:1.5}
.tl-fig .slot{fill:none;stroke:var(--rule);stroke-width:1}
.tl-fig .tl-controls button[data-replay]{border-style:dashed}
.tl-fig .brk{fill:none;stroke:var(--ink-3);stroke-width:1.2}
.tl-fig .brk-o{stroke:var(--ink)}
.tl-fig .rp{fill:none;stroke:var(--ink);stroke-width:1.3}
.tl-fig .rpj{stroke:var(--ink-2);stroke-dasharray:3 3}
.tl-fig .ah{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tl-fig .rb circle{fill:var(--ink)}
.tl-fig .dot{fill:var(--ink)}
.tl-fig .ring{fill:var(--paper);stroke:var(--ink);stroke-width:1.3}
.tl-fig .rb text{fill:var(--paper);font:600 9px var(--mono);text-anchor:middle;dominant-baseline:central}
.tl-fig .mir{fill:none;stroke:var(--ink-2);stroke-width:1.2;stroke-dasharray:5 4;opacity:.55;pointer-events:none}
.tl-fig .rib{opacity:.5}
.tl-fig .cell,.tl-fig .rib{transition:opacity .12s}
.tl-fig.hov .cell{opacity:.2}
.tl-fig.hov .cell.von{opacity:.72}
.tl-fig.hov .cell.on{opacity:1}
.tl-fig.hov .rib{opacity:.1}
.tl-fig.hov .rib.von,.tl-fig.hov .rib.on{opacity:.8}
.tl-fig.hov .cell.on rect{stroke:var(--ink);stroke-width:1.6}