.tl{--tl-red: #e0505f;--tl-black: #161d2e;--tl-focus: var(--accent-2);margin:2.2rem 0;padding:1rem 1rem .85rem;border:1px solid var(--border);border-radius:16px;background:var(--surface)}.tl-tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.7rem}.tl-tab{font:inherit;font-size:.88rem;padding:.34rem .8rem;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text-dim);cursor:pointer;transition:color .12s,border-color .12s,background .12s}.tl-tab:hover{color:var(--text);border-color:var(--border-strong)}.tl-tab[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.tl-invariant{margin:0 0 .8rem;font-size:.9rem;line-height:1.5;color:var(--text-dim)}.tl-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-bottom:.7rem}.tl-input{font:inherit;font-size:.9rem;width:6.2rem;padding:.34rem .6rem;border-radius:8px;border:1px solid var(--border);background:var(--code-bg);color:var(--text)}.tl-input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.tl-btn{font:inherit;font-size:.88rem;padding:.34rem .75rem;border-radius:8px;border:1px solid var(--border);background:var(--surface-raised);color:var(--text);cursor:pointer;transition:border-color .12s,color .12s}.tl-btn:hover:not(:disabled){border-color:var(--border-strong)}.tl-btn:disabled{opacity:.45;cursor:default}.tl-btn--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}.tl-spacer{flex:1 1 .5rem}.tl-select{font:inherit;font-size:.85rem;padding:.3rem .4rem;border-radius:8px;border:1px solid var(--border);background:var(--code-bg);color:var(--text)}.tl-field{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--text-dim)}.tl-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:210px;padding:.4rem;border:1px solid var(--border);border-radius:12px;background:var(--code-bg)}.tl-svg{display:block;max-width:100%;height:auto;overflow:visible}.tl-empty{margin:0;font-size:.9rem;color:var(--text-faint)}.tl-edge{stroke:var(--text-faint);stroke-width:1.5;fill:none}.tl-node text{font-family:var(--font-mono, ui-monospace, monospace);font-size:.82rem;text-anchor:middle;dominant-baseline:central;pointer-events:none}.tl-node{cursor:pointer}.tl-node circle,.tl-node rect{transition:fill .2s,stroke .2s}.tl-node--plain circle{fill:var(--surface-raised);stroke:var(--border-strong);stroke-width:1.5}.tl-node--plain text{fill:var(--text)}.tl-node--red circle{fill:var(--tl-red);stroke:var(--tl-red)}.tl-node--red text,.tl-node--black text{fill:#f6f8ff}.tl-node--black circle{fill:var(--tl-black);stroke:var(--border-strong);stroke-width:1.5}.tl-annotation{font-size:.6rem!important;fill:var(--accent)!important}.tl-box rect{fill:var(--surface-raised);stroke:var(--border-strong);stroke-width:1.5}.tl-box text{fill:var(--text)}.tl-divider{stroke:var(--border);stroke-width:1}.tl-key--focus{fill:var(--accent)!important;font-weight:700}.tl-node--focus circle,.tl-node--focus rect{stroke:var(--tl-focus);stroke-width:3;filter:drop-shadow(0 0 7px var(--tl-focus))}.tl-mark-insert{--tl-focus: #3ddc84}.tl-mark-remove{--tl-focus: #ff8a5b}.tl-mark-rotate,.tl-mark-split,.tl-mark-merge,.tl-mark-borrow{--tl-focus: var(--accent)}.tl-mark-recolor,.tl-mark-swap{--tl-focus: var(--accent-2)}.tl-enter{animation:tl-pop .26s ease-out;transform-box:fill-box;transform-origin:center}@keyframes tl-pop{0%{opacity:0;scale:.4}to{opacity:1;scale:1}}.tl-playback{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin:.6rem 0 0}.tl-step-count{font-family:var(--font-mono, ui-monospace, monospace);font-size:.76rem;letter-spacing:.04em;color:var(--text-faint);min-width:7.5rem}.tl-speed{accent-color:var(--accent)}.tl-caption{margin:.6rem 0 0;padding:.55rem .7rem;min-height:3.2em;border-radius:10px;background:var(--chip-bg);border:1px solid var(--border);font-size:.9rem;line-height:1.5;color:var(--text)}.tl-caption--idle{background:transparent;color:var(--text-faint)}.tl-log{margin:.6rem 0 0;padding:0;list-style:none;max-height:8.4rem;overflow-y:auto;border-radius:10px;border:1px solid var(--border)}.tl-log li{margin:0}.tl-log-item{display:flex;gap:.55rem;width:100%;padding:.3rem .6rem;font:inherit;font-size:.8rem;line-height:1.45;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--border);color:var(--text-dim);cursor:pointer}.tl-log li:last-child .tl-log-item{border-bottom:0}.tl-log-item:hover{color:var(--text)}.tl-log-item[aria-current=step]{background:var(--chip-bg);color:var(--text)}.tl-log-mark{font-family:var(--font-mono, ui-monospace, monospace);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);flex:0 0 4.6rem;padding-top:.15rem}.tl-footer{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin:.6rem 0 .2rem;font-size:.78rem;color:var(--text-faint)}.tl-swatch{display:inline-flex;align-items:center;gap:.35rem}.tl-swatch i{width:.7rem;height:.7rem;border-radius:50%;border:1px solid var(--border-strong)}.tl-swatch--red i{background:var(--tl-red);border-color:var(--tl-red)}.tl-swatch--black i{background:var(--tl-black)}.tl-error{margin:.4rem 0 0;font-size:.82rem;color:#ff8a5b}@media(prefers-reduced-motion:reduce){.tl-enter{animation:none}}@media(max-width:540px){.tl{padding:.8rem .7rem .7rem}.tl-step-count{min-width:0}}