.network-lecture .bit-header { min-width: 600px; font-size: 11px; font-variant-numeric: tabular-nums; }
.network-lecture :is(#arp, #fragmentacja, #icmp) .numeric { white-space: nowrap; }
.network-lecture .bit-ruler { display: grid; grid-template-columns: repeat(4, 1fr) auto; padding: 0 0 6px; color: #61717f; font-size: 10px; }
.network-lecture .bit-row { display: grid; grid-template-columns: repeat(32, minmax(0, 1fr)); border-left: 1px solid #b9c9d5; }
.network-lecture .bit-row > span { grid-column: span var(--bits); min-width: 0; padding: 9px 3px; text-align: center; align-content: center; background: #f0f5f8; border: 1px solid #b9c9d5; border-left: 0; margin-top: -1px; }
.network-lecture .bit-row small { display: block; color: #63707a; font-size: 9px; }
.network-lecture .optional-field > span { background: #f8f8f8; border-bottom-style: dashed; }
.network-lecture .payload-field > span { background: #faf4df; }
.network-lecture .quoted-field > span { background: #f5edf1; }
.network-lecture .protocol-status { margin: 14px 0; padding: 10px 12px; background: #f4f7f9; border-left: 2px solid #a5bdcd; min-height: 72px; font-size: 11px; font-variant-numeric: tabular-nums; }
.network-lecture .protocol-sequence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; list-style: none; }
.network-lecture .protocol-sequence li { margin: 0; padding: 10px 12px; border-top: 2px solid #d3dce2; background: #f7f8f9; font-size: 11px; transition: background-color .2s, border-color .2s; }
.network-lecture .protocol-sequence :is(strong, span) { display: block; }
.network-lecture .protocol-sequence strong { margin-bottom: 6px; font-weight: 500; color: #3b5264; }
.network-lecture .protocol-sequence .is-current { background: #eaf2f8; border-color: #28658f; }
.network-lecture .protocol-sequence .is-current strong { font-weight: 600; }
.network-lecture .protocol-sequence .is-complete { border-color: #7d8995; }
.network-lecture .protocol-checkbox { display: flex; align-items: center; align-self: center; gap: 7px; min-height: 36px; }
.network-lecture .protocol-checkbox input { width: 16px; height: 16px; margin: 0; accent-color: #2b6188; }
.network-lecture #fragment-missing { max-width: 210px; }
.network-lecture #fragment-bars { display: grid; gap: 9px; }
.network-lecture .fragment-line { display: grid; grid-template-columns: 165px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 26px; font-size: 10px; font-variant-numeric: tabular-nums; }
.network-lecture .fragment-track { height: 20px; background: #f0f2f4; border-inline: 1px solid #c3ccd3; }
.network-lecture .fragment-track > span { display: block; height: 100%; background: #527c9c; }
.network-lecture .fragment-line.is-missing .fragment-track > span { background: repeating-linear-gradient(135deg, #ecd7dd 0 4px, #fff 4px 8px); border: 1px dashed #995264; }
.network-lecture .fragment-line.is-missing > span { font-weight: 600; color: #813b4a; }
.network-lecture .wire-stack { min-height: 275px; font-size: 11px; }
.network-lecture .wire-layer { border-left: 3px solid #9eabb5; padding: 10px 12px; margin-top: 9px; background: #f6f7f8; }
.network-lecture .wire-layer strong { display: block; font-size: 11px; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
.network-lecture .wire-layer p { font-size: 10px; margin: 10px 0 0; }
.network-lecture .wire-ip { background: #edf3f8; border-color: #6688a4; }
.network-lecture .wire-control { background: #f5eaf0; border-color: #aa7188; }
.network-lecture .wire-data { background: #faf5e4; border-color: #bb9c4b; }
.network-lecture .wire-quote { background: #f2eff5; border-style: dashed; border-color: #8b7d9c; }
.network-lecture :is(#arp-model, #fragment-model, #encapsulation-model) .lab-tools { display: none; }
.protocols-ready .network-lecture :is(#arp-model, #fragment-model, #encapsulation-model) .lab-tools { display: flex; }
.network-lecture #protocol-envelope-caption { min-height: 48px; }
@media (max-width: 760px) {
  .network-lecture .protocol-sequence { grid-template-columns: minmax(0, 1fr); }
  .network-lecture .fragment-line { grid-template-columns: 112px minmax(0, 1fr); gap: 9px; }
  .network-lecture .wire-layer { padding: 9px; }
  .network-lecture .wire-stack { min-height: 330px; }
  .network-lecture .protocol-status { min-height: 106px; }
}
@media (prefers-reduced-motion: reduce) { .network-lecture .protocol-sequence li { transition: none; } }
@media print {
  .network-lecture .bit-header { min-width: 0; font-size: 9px; }
  .network-lecture .bit-row > span { padding-inline: 1px; }
  .protocols-ready .network-lecture :is(#arp-model, #fragment-model, #encapsulation-model) .lab-tools { display: none; }
  .network-lecture .wire-stack { min-height: 0; }
  .network-lecture :is(.bit-row, .fragment-line, .wire-layer) { print-color-adjust: exact; }
}