.tcp{--ph-handshake:var(--accent);--ph-data:#34d399;--ph-teardown:#fb7185;--ph:var(--accent);max-width:56rem;color:var(--foreground);flex-direction:column;gap:1.5rem;margin:0 auto;display:flex}.tcp-phase-handshake{--ph:var(--ph-handshake)}.tcp-phase-data{--ph:var(--ph-data)}.tcp-phase-teardown{--ph:var(--ph-teardown)}.tcp-head h1{letter-spacing:-.02em;font-size:1.9rem;font-weight:700}.tcp-sub{max-width:44rem;color:var(--muted);margin-top:.6rem;font-size:.95rem;line-height:1.6}.tcp-sub strong{color:var(--foreground);font-weight:600}.tcp-states{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.tcp-state-card{border:1px solid var(--border);background:var(--surface);border-radius:12px;flex-direction:column;gap:.3rem;padding:.9rem 1.1rem;display:flex}.tcp-state-card.tcp-client{border-left:3px solid var(--accent)}.tcp-state-card.tcp-server{border-left:3px solid var(--ph-data)}.tcp-state-role{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:.72rem}.tcp-state-name{font-family:var(--font-mono);letter-spacing:.01em;font-size:1.15rem;font-weight:700}.tcp-client .tcp-state-name{color:var(--accent)}.tcp-server .tcp-state-name{color:var(--ph-data)}.tcp-state-blurb{color:var(--muted);min-height:2.3em;font-size:.82rem;line-height:1.45}.tcp-diagram{border:1px solid var(--border);background:radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 60%), var(--surface);border-radius:14px;padding:2.6rem 0 .5rem;position:relative;overflow:hidden}.tcp-lane-head{letter-spacing:.04em;border:1px solid var(--border);background:var(--background);border-radius:999px;padding:.15rem .7rem;font-size:.8rem;font-weight:600;position:absolute;top:.7rem;transform:translate(-50%)}.tcp-lane-head-l{left:var(--lane-l);color:var(--accent)}.tcp-lane-head-r{left:var(--lane-r);color:var(--ph-data)}.tcp-lifeline{background:repeating-linear-gradient(var(--border) 0 6px, transparent 6px 12px);width:2px;position:absolute;top:2.4rem;bottom:0;transform:translate(-1px)}.tcp-lifeline-l{left:var(--lane-l)}.tcp-lifeline-r{left:var(--lane-r)}.tcp-rows{position:relative}.tcp-row{height:74px;position:relative}.tcp-arrow{left:var(--lane-l);width:calc(var(--lane-r) - var(--lane-l));border-top:2px solid var(--ph);height:0;transition:opacity .25s,border-color .25s;position:absolute;top:50%}.tcp-arrow:after{content:"";border-top:5px solid #0000;border-bottom:5px solid #0000;width:0;height:0;position:absolute;top:50%;transform:translateY(-50%)}.tcp-from-client .tcp-arrow:after{border-left:9px solid var(--ph);right:-1px}.tcp-from-server .tcp-arrow:after{border-right:9px solid var(--ph);left:-1px}.tcp-arrow-label{font-family:var(--font-mono);letter-spacing:.03em;color:var(--ph);white-space:nowrap;font-size:.78rem;font-weight:700;position:absolute;bottom:7px;left:50%;transform:translate(-50%)}.tcp-arrow-nums{font-family:var(--font-mono);color:var(--muted);white-space:nowrap;font-size:.68rem;position:absolute;top:7px;left:50%;transform:translate(-50%)}.tcp-row-future .tcp-arrow{opacity:.35;border-top-style:dashed}.tcp-row-future .tcp-arrow:after{opacity:.35}.tcp-row-future .tcp-arrow-label,.tcp-row-future .tcp-arrow-nums{opacity:.4}.tcp-row-done .tcp-arrow{opacity:.85}.tcp-row-active .tcp-arrow{filter:drop-shadow(0 0 6px color-mix(in srgb, var(--ph) 55%, transparent));border-top-width:3px}.tcp-row-active .tcp-arrow-label{font-size:.82rem}.tcp-packet{background:var(--ph);color:#0a0a0b;font-family:var(--font-mono);white-space:nowrap;box-shadow:0 0 0 1px color-mix(in srgb, var(--ph) 60%, transparent), 0 4px 14px color-mix(in srgb, var(--ph) 45%, transparent);z-index:3;border-radius:7px;padding:.28rem .6rem;font-size:.72rem;font-weight:700;position:absolute;top:50%;transform:translate(-50%,-50%)}.tcp-controls{flex-direction:column;gap:1rem;display:flex}.tcp-transport,.tcp-options{flex-wrap:wrap;align-items:center;gap:.7rem;display:flex}.tcp-btn{font-family:var(--font-mono);border:1px solid var(--border);background:var(--surface);color:var(--foreground);cursor:pointer;border-radius:9px;padding:.5rem .95rem;font-size:.85rem;transition:background .15s,border-color .15s,opacity .15s,transform 50ms}.tcp-btn:hover:not(:disabled){border-color:var(--accent)}.tcp-btn:active:not(:disabled){transform:translateY(1px)}.tcp-btn:disabled{opacity:.4;cursor:not-allowed}.tcp-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-foreground);font-weight:600}.tcp-btn.ghost{background:0 0}.tcp-progress{font-family:var(--font-mono);color:var(--muted);margin-left:auto;font-size:.8rem}.tcp-slider{color:var(--muted);flex-direction:column;gap:.25rem;min-width:11rem;font-size:.8rem;display:flex}.tcp-slider strong{color:var(--foreground)}.tcp-slider input[type=range]{accent-color:var(--accent);cursor:pointer}.tcp-toggle{color:var(--foreground);cursor:pointer;align-items:center;gap:.45rem;font-size:.85rem;display:inline-flex}.tcp-toggle input{accent-color:var(--accent);cursor:pointer}.tcp-detail{border:1px solid var(--border);border-left:3px solid var(--ph);background:var(--surface);border-radius:12px;padding:1.1rem 1.25rem}.tcp-detail-head{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.tcp-detail-flags{gap:.35rem;display:inline-flex}.tcp-flag{font-family:var(--font-mono);background:color-mix(in srgb, var(--ph) 18%, transparent);color:var(--ph);border:1px solid color-mix(in srgb, var(--ph) 40%, transparent);border-radius:5px;padding:.12rem .4rem;font-size:.72rem;font-weight:700}.tcp-detail-dir{color:var(--foreground);font-size:.85rem;font-weight:600}.tcp-detail-phase{text-transform:uppercase;letter-spacing:.06em;color:var(--ph);margin-left:auto;font-size:.72rem}.tcp-detail-nums{flex-wrap:wrap;gap:.4rem;margin-top:.7rem;display:flex}.tcp-detail-nums code{font-family:var(--font-mono);background:color-mix(in srgb, var(--foreground) 7%, transparent);color:var(--foreground);border-radius:5px;padding:.18rem .45rem;font-size:.76rem}.tcp-payload{color:var(--muted)!important}.tcp-note{color:var(--muted);margin-top:.7rem;font-size:.9rem;line-height:1.55}.tcp-banner{border:1px solid color-mix(in srgb, var(--ph-data) 35%, var(--border));background:color-mix(in srgb, var(--ph-data) 9%, var(--surface));color:var(--foreground);border-radius:10px;padding:.85rem 1.1rem;font-size:.88rem;line-height:1.5}.tcp-banner strong{font-family:var(--font-mono);color:var(--ph-data)}.tcp-legend{color:var(--muted);flex-wrap:wrap;align-items:center;gap:.9rem;font-size:.8rem;display:flex}.tcp-legend-item{align-items:center;gap:.4rem;display:inline-flex}.tcp-legend-swatch{background:var(--ph);border-radius:3px;width:.8rem;height:.8rem}.tcp-legend-note{flex:16rem}.tcp-legend-note code{font-family:var(--font-mono);color:var(--foreground)}@media (max-width:640px){.tcp-states{grid-template-columns:1fr}.tcp-progress{margin-left:0}}