@import '../../network-basics/css/style.css?v=20260920-032225';

.TransportChoices { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 28px; }
.TransportChoice { padding:11px 13px; border:1px solid rgba(117,214,210,.4); background:transparent; color:var(--academy-muted); font:inherit; cursor:pointer; }
.TransportChoice:hover, .TransportChoice:focus-visible, .TransportChoice.is-selected { border-color:var(--academy-lime); color:var(--academy-lime); }
.TransportChoice:focus-visible { outline:2px solid var(--academy-coral); outline-offset:3px; }
.MultiplexControls { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 18px; }
.MultiplexChoice { padding:11px 13px; border:1px solid rgba(117,214,210,.4); background:transparent; color:var(--academy-muted); font:inherit; cursor:pointer; }
.MultiplexChoice:hover, .MultiplexChoice:focus-visible, .MultiplexChoice.is-selected { border-color:var(--academy-lime); color:var(--academy-lime); }
.MultiplexChoice:focus-visible { outline:2px solid var(--academy-coral); outline-offset:3px; }
.MultiplexStage { display:grid; grid-template-columns:minmax(120px, 1fr) minmax(180px, 1.4fr) minmax(120px, 1fr); gap:14px; align-items:center; padding:24px; border:1px solid rgba(117,214,210,.25); background:rgba(9,20,22,.35); }
.MultiplexEndpoint { display:grid; gap:6px; padding:16px 12px; border:1px solid rgba(241,199,91,.65); background:rgba(241,199,91,.1); text-align:center; }
.MultiplexEndpoint strong { color:var(--academy-paper); font-family:'Orbitron',sans-serif; font-size:.8rem; font-weight:400; }
.MultiplexEndpoint small, .MultiplexChannel small { color:var(--academy-muted); font-size:.78rem; }
.MultiplexChannel { display:grid; gap:8px; justify-items:center; color:var(--academy-cyan); text-align:center; }
.MultiplexChannel i { position:relative; display:block; width:100%; height:3px; background:var(--academy-cyan); }
.MultiplexChannel i::after { content:''; position:absolute; top:-5px; right:0; border-width:6px 0 6px 10px; border-style:solid; border-color:transparent transparent transparent var(--academy-cyan); }
.UdpDatagramStage { padding:24px; border:1px solid rgba(117,214,210,.25); background:rgba(9,20,22,.35); }
.UdpDatagramDiagram { display:grid; gap:5px; max-width:700px; margin:0 auto; color:var(--academy-paper); font-family:'Orbitron',sans-serif; font-size:.72rem; }
.UdpHeaderRow { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.UdpHeaderRow span, .UdpPayload { display:flex; min-height:58px; align-items:center; justify-content:center; padding:12px; border:1px solid rgba(117,214,210,.6); background:rgba(117,214,210,.1); text-align:center; }
.UdpPayload { min-height:78px; flex-direction:column; gap:6px; border-color:rgba(255,111,97,.7); background:rgba(255,111,97,.1); }
.UdpPayload small { color:var(--academy-muted); font-family:'Exo',sans-serif; font-size:.82rem; }
.UdpLegend { display:flex; flex-wrap:wrap; gap:16px 24px; max-width:700px; margin:18px auto 0; color:var(--academy-muted); font-size:.86rem; }
.UdpLegend span { display:flex; align-items:center; gap:8px; }
.UdpLegendSwatch { display:inline-block; width:11px; height:11px; border:1px solid; }
.UdpLegendHeader { border-color:var(--academy-cyan); background:rgba(117,214,210,.35); }
.UdpLegendPayload { border-color:var(--academy-coral); background:rgba(255,111,97,.35); }
.UdpDatagramStage .LessonStatus { max-width:700px; margin:18px auto 0; }
.TcpSegmentStage { padding:24px; border:1px solid rgba(117,214,210,.25); background:rgba(9,20,22,.35); }
.TcpSegmentDiagram { display:grid; gap:5px; max-width:700px; margin:0 auto; color:var(--academy-paper); font-family:'Orbitron',sans-serif; font-size:.68rem; }
.TcpHeaderRow { display:grid; gap:5px; }
.TcpHeaderRowThree { grid-template-columns:1fr 1fr 1.35fr; }
.TcpHeaderRowTwo { grid-template-columns:1fr 2fr; }
.TcpHeaderRow span, .TcpPayload { display:flex; min-height:52px; align-items:center; justify-content:center; padding:10px 8px; border:1px solid rgba(117,214,210,.6); background:rgba(117,214,210,.1); text-align:center; }
.TcpHeaderRowTwo span { border-color:rgba(241,199,91,.65); background:rgba(241,199,91,.1); }
.TcpPayload { min-height:78px; flex-direction:column; gap:6px; border-color:rgba(255,111,97,.7); background:rgba(255,111,97,.1); }
.TcpPayload small { color:var(--academy-muted); font-family:'Exo',sans-serif; font-size:.82rem; }
.TcpLegend { display:flex; flex-wrap:wrap; gap:16px 24px; max-width:700px; margin:18px auto 0; color:var(--academy-muted); font-size:.86rem; }
.TcpLegend span { display:flex; align-items:center; gap:8px; }
.TcpLegendSwatch { display:inline-block; width:11px; height:11px; border:1px solid; }
.TcpLegendHeader { border-color:var(--academy-cyan); background:rgba(117,214,210,.35); }
.TcpLegendPayload { border-color:var(--academy-coral); background:rgba(255,111,97,.35); }
.TcpSegmentStage .LessonStatus { max-width:700px; margin:18px auto 0; }
@media (max-width:560px) {
	.MultiplexStage { grid-template-columns:1fr; padding:14px 10px; }
	.MultiplexChannel i { width:3px; height:38px; }
	.MultiplexChannel i::after { top:auto; right:-5px; bottom:-1px; border-width:10px 6px 0; border-color:var(--academy-cyan) transparent transparent; }
	.TcpSegmentStage { padding:14px 10px; }
	.TcpSegmentDiagram { font-size:.53rem; }
	.TcpHeaderRow span, .TcpPayload { min-height:46px; padding:7px 4px; }
	.TcpPayload small { font-size:.68rem; }
}
@media (max-width:560px) {
	.UdpDatagramStage { padding:14px 10px; }
	.UdpDatagramDiagram { font-size:.62rem; }
	.UdpHeaderRow span, .UdpPayload { min-height:48px; padding:8px 5px; }
	.UdpPayload small { font-size:.7rem; }
}
.TransportResult { display:grid; grid-template-columns:auto 1fr; gap:10px 18px; align-items:center; padding:25px; border:1px solid rgba(117,214,210,.3); background:rgba(9,20,22,.35); }
.TransportLabel { color:var(--academy-cyan); font-family:'Orbitron',sans-serif; font-size:.68rem; letter-spacing:.08em; }
.TransportResult strong { color:var(--academy-lime); font-family:'Orbitron',sans-serif; font-size:1.35rem; font-weight:400; }
.TransportResult p { grid-column:1 / -1; margin:0; color:var(--academy-muted); line-height:1.6; }