.tnlflow{width:100%;max-width:640px;display:flex;flex-direction:column;gap:20px;font-family:var(--font-body);color:var(--text-primary);font-size:15px;line-height:1.4}.tnlflow .tf-lane{display:flex;flex-direction:column;gap:8px}.tnlflow .tf-lane-label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--apx-slate)}.tnlflow .tf-card{background:var(--surface-card);border:1px solid var(--apx-fog)}.tnlflow .tf-icon{flex:none;color:var(--text-primary)}.tnlflow .tf-clients{padding:16px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}.tnlflow .tf-clients-text{display:flex;flex-direction:column;gap:2px}.tnlflow .tf-clients-title{font-weight:600;font-size:15px}.tnlflow .tf-clients-sub{font-size:13px;color:var(--text-secondary)}.tnlflow .tf-clients-host{margin-left:auto;font-family:var(--font-mono);font-size:12px;background:var(--surface-inset);padding:8px 10px}.tnlflow .tf-conn{position:relative;display:flex;align-items:center;justify-content:center}.tnlflow .tf-conn-labels{position:absolute;left:calc(50% + 16px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px;font-family:var(--font-mono);font-size:11px;white-space:nowrap}.tnlflow .tf-conn-main{color:var(--apx-slate)}.tnlflow .tf-conn-sub{color:var(--apx-stone)}.tnlflow .tf-conn-quic{color:var(--apx-blue-deep);font-weight:600}[data-theme=dark] .tnlflow .tf-conn-quic{color:var(--apx-blue)}.tnlflow .tf-stack{position:relative;margin-right:-16px;padding-right:16px;padding-bottom:16px}.tnlflow .tf-stack-back,.tnlflow .tf-stack-mid{position:absolute;background:var(--surface-card);border:1px solid var(--apx-fog)}.tnlflow .tf-stack-back{inset:16px 0 0 16px}.tnlflow .tf-stack-mid{inset:8px}.tnlflow .tf-pop{position:relative;background:var(--surface-card);border:1px solid var(--border-strong);padding:20px;display:flex;flex-direction:column;gap:14px}.tnlflow .tf-pop-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.tnlflow .tf-pop-title{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px}.tnlflow .tf-pop-regions{font-family:var(--font-mono);font-size:11px;color:var(--apx-slate)}.tnlflow .tf-pop-row{border:1px solid var(--apx-fog);padding:12px 14px;display:flex;flex-direction:column;gap:8px}.tnlflow .tf-pop-row-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.tnlflow .tf-pop-row-title{font-size:13px;font-weight:600}.tnlflow .tf-pop-row-sub{font-size:12px;color:var(--apx-slate)}.tnlflow .tf-chips{display:flex;gap:6px;flex-wrap:wrap}.tnlflow .tf-chip{font-family:var(--font-mono);font-size:11px;border:1px solid var(--apx-fog);padding:3px 8px;color:var(--text-secondary)}.tnlflow .tf-chip-plain{font-family:var(--font-body)}.tnlflow .tf-agent{padding:20px;display:flex;flex-direction:column;gap:12px}.tnlflow .tf-agent-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.tnlflow .tf-agent-title{font-weight:600;font-size:15px}.tnlflow .tf-agent-modes{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}.tnlflow .tf-term{font-family:var(--font-mono);font-size:12px;background:var(--surface-invert);color:var(--text-on-invert);padding:8px 10px}.tnlflow .tf-agent-svc{border-top:1px solid var(--apx-mist);padding-top:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.tnlflow .tf-agent-svc-label{font-size:13px;color:var(--text-secondary)}.tnlflow .tf-agent-svc-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.tnlflow .tf-agent-port{font-family:var(--font-mono);font-size:12px}.tnlflow .tf-callouts{display:flex;flex-direction:column;gap:12px;margin-top:8px}.tnlflow .tf-callout{background:var(--surface-card);border:1px solid var(--apx-fog);border-left:2px solid var(--border-strong);padding:16px 20px;display:flex;flex-direction:column;gap:6px}.tnlflow .tf-callout-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}.tnlflow .tf-callout-body{font-size:13px;color:var(--text-secondary);line-height:1.5}.tnlflow .tf-callout-body a{color:var(--text-primary);text-decoration:underline}.tnlflow .tf-callout-body a:hover{color:var(--apx-blue)}.tnlflow .tf-dataplane{display:flex;align-items:stretch;gap:10px}.tnlflow .tf-dataplane-opt{flex:1;border:1px solid var(--apx-fog);padding:10px 12px;display:flex;flex-direction:column;gap:3px}.tnlflow .tf-dataplane-name{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--apx-blue-deep)}[data-theme=dark] .tnlflow .tf-dataplane-name{color:var(--apx-blue)}.tnlflow .tf-dataplane-or{align-self:center;font-size:10px;font-weight:600;letter-spacing:.1em;color:var(--apx-slate);flex:none}.tnlflow .tf-mono{font-family:var(--font-mono);font-size:12px}.tnlflow .tf-egress{border:1px dashed var(--apx-stone);padding:14px 20px;display:flex;align-items:center;gap:14px}.tnlflow .tf-egress-text{font-size:13px;color:var(--text-secondary)}.tnlflow .tf-egress-text strong{color:var(--text-primary)}@media(max-width:480px){.tnlflow .tf-clients-host,.tnlflow .tf-agent-modes,.tnlflow .tf-agent-svc-right{margin-left:0}.tnlflow .tf-dataplane{flex-direction:column}}