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

.LayerControls { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 28px; }
.LayerChoice { padding:11px 13px; border:1px solid rgba(117,214,210,.4); background:transparent; color:var(--academy-muted); font:inherit; cursor:pointer; }
.LayerChoice:hover, .LayerChoice:focus-visible, .LayerChoice.is-selected { border-color:var(--academy-lime); color:var(--academy-lime); }
.LayerChoice:focus-visible, #ResetLayersButton:focus-visible { outline:2px solid var(--academy-coral); outline-offset:3px; }
.OsiControls { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:7px; margin:24px 0 18px; }
.OsiChoice { padding:12px 13px; border:1px solid rgba(117,214,210,.4); background:transparent; color:var(--academy-muted); font:inherit; text-align:left; cursor:pointer; }
.OsiChoice:hover, .OsiChoice:focus-visible, .OsiChoice.is-selected { border-color:var(--academy-lime); color:var(--academy-lime); }
.OsiChoice:focus-visible { outline:2px solid var(--academy-coral); outline-offset:3px; }
.OsiResult { display:grid; gap:8px; padding:24px; border-left:3px solid var(--academy-lime); background:rgba(9,20,22,.35); }
.OsiResultLabel { color:var(--academy-cyan); font-family:'Orbitron',sans-serif; font-size:.68rem; letter-spacing:.08em; }
.OsiResult strong { color:var(--academy-paper); font-family:'Orbitron',sans-serif; font-size:1.25rem; font-weight:400; }
.OsiResult p { margin:0; color:var(--academy-muted); line-height:1.65; }
.OsiResult small { color:var(--academy-coral); font-size:.88rem; }
.DatagramControls { display:flex; gap:8px; margin:24px 0 18px; }
.DatagramChoice { padding:11px 16px; border:1px solid rgba(117,214,210,.4); background:transparent; color:var(--academy-muted); font:inherit; cursor:pointer; }
.DatagramChoice:hover, .DatagramChoice:focus-visible, .DatagramChoice.is-selected { border-color:var(--academy-lime); color:var(--academy-lime); }
.DatagramChoice:focus-visible { outline:2px solid var(--academy-coral); outline-offset:3px; }
.DatagramStage { padding:24px; border:1px solid rgba(117,214,210,.25); background:rgba(9,20,22,.35); }
.DatagramDiagram { display:grid; gap:5px; max-width:700px; margin:0 auto; color:var(--academy-paper); font-family:'Orbitron',sans-serif; font-size:.72rem; }
.DatagramRow { display:grid; gap:5px; }
.DatagramRow span, .DatagramPayload { display:flex; min-height:48px; align-items:center; justify-content:center; padding:10px 12px; border:1px solid rgba(117,214,210,.55); background:rgba(117,214,210,.1); text-align:center; }
.DatagramRowCompact { grid-template-columns:1fr 1.2fr 1.25fr; }
.DatagramRowWide { grid-template-columns:1fr 1fr 1.5fr; }
.DatagramRowAddress { grid-template-columns:1fr 1fr; }
.DatagramRowAddress span { min-height:58px; border-color:rgba(241,199,91,.65); background:rgba(241,199,91,.1); }
.DatagramPayload { min-height:68px; flex-direction:column; gap:5px; border-color:rgba(255,111,97,.7); background:rgba(255,111,97,.1); }
.DatagramPayload small { color:var(--academy-muted); font-family:'Exo',sans-serif; font-size:.82rem; }
.DatagramStage[data-version='ipv6'] .DatagramRowCompact:nth-child(2) span:first-child,
.DatagramStage[data-version='ipv6'] .DatagramRowCompact:nth-child(2) span:nth-child(2),
.DatagramStage[data-version='ipv6'] .DatagramRowCompact:nth-child(2) span:nth-child(3) { opacity:.45; }
@media (max-width:560px) {
	.OsiControls { grid-template-columns:1fr; }
	.DatagramStage { padding:14px 10px; }
	.DatagramDiagram { font-size:.58rem; }
	.DatagramRow span, .DatagramPayload { min-height:42px; padding:8px 5px; }
	.DatagramPayload small { font-size:.7rem; }
}
.EncapsulationStage { min-height:245px; display:grid; align-content:center; gap:24px; padding:28px; border:1px solid rgba(117,214,210,.25); background:rgba(9,20,22,.35); }
.EncapsulationStack { display:grid; gap:7px; max-width:540px; margin:0 auto; width:100%; }
.LayerBlock { display:flex; justify-content:space-between; gap:15px; padding:14px 16px; border-left:3px solid var(--academy-lime); background:var(--academy-panel); color:var(--academy-paper); font-family:'Orbitron',sans-serif; font-size:.78rem; }
.LayerBlock small { color:var(--academy-muted); font-family:'Exo',sans-serif; font-size:.8rem; }
.layer-transport { border-left-color:var(--academy-cyan); }
.layer-network { border-left-color:var(--academy-coral); }
.layer-link { border-left-color:#f1c75b; }
#ResetLayersButton { margin-top:22px; border:0; font:inherit; cursor:pointer; }