/* Small interactive diagrams for technical posts. */
.ts-diagram-figure{margin:2rem 0}.ts-diagram-figure figcaption{margin-top:.6rem;text-align:center;font-size:.85rem;opacity:.75;font-style:italic}.ts-diagram{--bg:#f7f8fa;--card:#fff;--hover:#fff;--border:#d9dee6;--text:#1f2430;--muted:#5b6472;--line:#c2cad6;--blue:#2563eb;--green:#16a34a;--red:#dc2626;--orange:#ea580c;--slate:#64748b;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:1.25rem;color:var(--text);font-size:.95rem;line-height:1.45}:root[data-theme="dark"] .ts-diagram,body.dark .ts-diagram{--bg:#1e2030;--card:#24273a;--hover:#2a2e42;--border:#363b54;--text:#cad3f5;--muted:#939ab7;--line:#494d64;--blue:#8aadf4;--green:#a6da95;--red:#ed8796;--orange:#f5a97f;--slate:#939ab7}:root[data-theme="sepia"] .ts-diagram{--bg:#efe5cd;--card:#f6efde;--hover:#f1e8d3;--border:#d8c9a8;--text:#3a2f24;--muted:#7c6a52;--line:#cdbd9a;--blue:#3a5a8a;--green:#4a6a3a;--red:#9b2226;--orange:#8a541a;--slate:#7c6a52}:root[data-theme="red"] .ts-diagram{--bg:#3a0606;--card:#490808;--hover:#5a0c0c;--border:#6e1414;--text:#f3e3e3;--muted:#d9a9a9;--line:#6e1c1c;--blue:#ff9e9e;--green:#9df39f;--red:#ff5e5e;--orange:#fec758;--slate:#d9a9a9}.ts-diagram__title{text-align:center;text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-size:.8rem;color:var(--muted);margin-bottom:1rem}.ts-flow{display:flex;align-items:center;justify-content:center;gap:0}.ts-flow--vertical{flex-direction:column}.ts-flow--horizontal{flex-direction:row}.ts-node,.ts-step,.ts-layer{background:var(--card);border:1px solid var(--border);border-left:4px solid var(--blue);border-radius:10px;padding:.8rem .95rem;min-width:150px;box-shadow:0 1px 2px rgba(0,0,0,.04)}.ts-node__label,.ts-step__label{font-weight:700}.ts-node__sub,.ts-detail,.ts-layer__a{color:var(--muted);font-size:.88rem;margin-top:.25rem}.ts-detail{display:none}.is-open .ts-detail{display:block}.ts-click{cursor:pointer}.ts-click:hover{background:var(--hover)}.ts-connector{color:var(--muted);display:flex;align-items:center;justify-content:center;min-width:54px;min-height:38px;position:relative}.ts-flow--vertical .ts-connector{min-height:44px}.ts-connector__line::before{content:"→"}.ts-flow--vertical .ts-connector__line::before{content:"↓"}.ts-connector__label{font-size:.75rem;margin-left:.35rem}.ts-flow--vertical .ts-connector__label{margin-left:0;margin-top:.15rem}.ts-badges{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.5rem}.ts-badge{border:1px solid var(--border);border-radius:999px;padding:.1rem .45rem;font-size:.75rem;color:var(--muted)}.ts-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.ts-column__title{text-align:center;font-weight:700;margin-bottom:.7rem}.ts-column__steps{display:flex;flex-direction:column;gap:.55rem}.ts-layer{display:grid;grid-template-columns:minmax(140px,.8fr) 1.2fr;gap:1rem;margin:.55rem 0}.ts-layer__q{font-weight:700}@media(max-width:720px){.ts-flow--horizontal{flex-direction:column}.ts-compare{grid-template-columns:1fr}.ts-layer{grid-template-columns:1fr}.ts-connector__line::before{content:"↓"}}

.ts-connector__line::before{display:inline-block}@keyframes ts-flow-down{0%{transform:translateY(-3px);opacity:.35}50%{opacity:1}100%{transform:translateY(3px);opacity:.35}}@keyframes ts-flow-right{0%{transform:translateX(-3px);opacity:.35}50%{opacity:1}100%{transform:translateX(3px);opacity:.35}}.ts-animate .ts-flow--vertical .ts-connector__line::before{animation:ts-flow-down 1.6s ease-in-out infinite}.ts-animate .ts-flow--horizontal .ts-connector__line::before{animation:ts-flow-right 1.6s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.ts-animate .ts-connector__line::before{animation:none}}