.network-page{--green:#edb294}
.network-page .chapter-link.active,.network-page .quiz-options button.correct{background:#39291f}
.network-page .breadcrumbs{flex-wrap:wrap}
.network-page .lab-body{min-height:340px}
.network-page .table-wrap{overflow:auto;margin:20px 0}
.nw-code{max-width:100%;overflow:auto;padding:20px;border:1px solid #5d5046;background:#211d19;border-radius:7px;font:.82rem/1.8 ui-monospace,monospace;color:#edc3a9;margin:22px 0}
.nw-tiles{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0 25px;min-height:36px}
.nw-tiles>span{display:grid;place-items:center;min-width:40px;min-height:36px;padding:8px;border-radius:5px;border:1px solid #57646b;font:.85rem ui-monospace,monospace;background:#232c30;color:#a2b2bc}
.nw-tiles .ready,.nw-tiles .received{border-color:#75aa8b;background:#284234;color:#bfebd0}
.nw-tiles .held,.nw-tiles .flight{background:#3b3020;border-color:#b78d58;color:#edc28b}
.nw-tiles .missing{border:2px dashed #db9292;background:#3c292c;color:#f1b4b4}
.nw-tiles .overflow{border-color:#e6a097;background:#412c28;color:#f0b8ae}
.nw-tiles .pending{opacity:.55}
.nw-verdict{padding:18px;text-align:center;border:1px solid;border-radius:7px;margin:22px 0;font:1.05rem var(--display);line-height:1.5}
.network-page .good{background:#22392c;border-color:#659a79;color:#bbdfc9}
.network-page .bad{background:#3a2726;border-color:#b27670;color:#f0b8ae}
.nw-route{display:flex;gap:10px;align-items:center;margin:20px 0;flex-wrap:wrap}
.nw-route>div{flex:1 1 95px;padding:15px 8px;border:1px solid #475459;border-radius:6px;background:#20292d;text-align:center;display:flex;flex-direction:column;gap:10px}
.nw-route .active{border-color:#edb294;background:#382c23}
.nw-route span{font-size:.85rem}
.nw-route small{font-size:.65rem}
.nw-route>b{color:#ae947d}
.nw-envelope{border:1px solid #a58666;border-radius:9px;background:#342a20;padding:18px;margin:25px 0}
.nw-envelope>div{margin:14px 0 0;padding:16px;border:1px solid #7a6797;border-radius:6px;background:#2c2538}
.nw-envelope>div>div{margin-top:14px;padding:16px;border:1px solid #5e91a7;border-radius:6px;background:#20323c}
.nw-envelope>div>div>div{padding:20px;margin-top:14px;background:#284536;border:1px solid #6d9e7f;color:#bfe3cb;border-radius:4px;text-align:center;font:.9rem ui-monospace,monospace}
.nw-envelope small{font:.7rem/1.6 ui-monospace,monospace;color:#e2d3bc}
.nw-route-table{display:grid;gap:9px;margin:25px 0}
.nw-route-table>div{display:grid;grid-template-columns:140px minmax(0,1fr) 60px;gap:10px;padding:18px;border:1px solid #414e53;border-radius:6px;background:#202a2d;font-size:.85rem;align-items:center}
.nw-route-table .selected{border-color:#edb294;background:#392b23;color:#f2c5a9}
.nw-route-table code{font-size:.83rem}
.nw-route-table b{font-size:.7rem;font-weight:400;text-align:right}
.nw-dns{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:18px;align-items:center;margin:24px 0}
.nw-dns>div{display:grid;gap:15px;min-width:0;padding:10px;border:1px solid transparent;border-radius:7px}
.nw-dns>div.selected{border-color:#edb294;background:#312820}
.nw-dns small{text-align:center;font-size:.72rem;line-height:1.5}
.nw-meters{display:grid;gap:18px;margin:25px 0}
.nw-meters>div{display:grid;grid-template-columns:160px minmax(0,1fr) 45px;gap:12px;align-items:center;font-size:.8rem}
.nw-meters>div>div{height:24px;border-radius:4px;background:#273036;overflow:hidden}
.nw-meters i{display:block;height:100%;transition:width .2s}
.nw-meters b{text-align:right;font-weight:400}
.nw-packet-fit{position:relative;margin:30px 0;height:55px;padding:12px 0;border-bottom:1px solid #666}
.nw-packet-fit>span{display:block;white-space:nowrap;padding:8px;font:.7rem ui-monospace,monospace;border-radius:3px;min-width:140px;box-sizing:border-box}
.nw-packet-fit>i{position:absolute;top:0;bottom:0;width:2px;background:#edb294}
.nw-formula{padding:20px;background:#2c2620;border:1px solid #705940;text-align:center;font:.9rem/1.8 ui-monospace,monospace;margin:24px 0;border-radius:6px}
.nw-formula b{font-size:1.3rem;color:#edb294}
.nw-chart{display:block;width:100%;margin:22px 0;background:#192126;border-radius:8px}
.nw-chart path{fill:none;stroke:#677880;stroke-width:1}
.nw-chart polyline{fill:none;stroke:#edb294;stroke-width:3;stroke-linejoin:round}
.nw-chart circle{fill:#edb294}
.nw-chart text{fill:#b7c0c4;font:11px ui-monospace,monospace}
.nw-connections{display:grid;gap:8px;margin:25px 0}
.nw-connections>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border:1px solid #52616a;background:#1e2a30;border-radius:5px;flex-wrap:wrap}
.nw-connections strong,.nw-connections small{font:.75rem ui-monospace,monospace;color:#c5d1d7}
.nw-connections b{font-size:.7rem;color:#edb294;font-weight:400}
.nw-streams{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:22px 0}
.nw-streams>div{padding:20px;border:1px solid #536871;background:#1d2a30;border-radius:8px}
.nw-streams h3{font-size:1rem;margin:0 0 20px}
.nw-key{display:flex;flex-wrap:wrap;gap:15px;font-size:.72rem;color:#b9c5c2;line-height:1.7}
.nw-proxy,.nw-redirects{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;margin:25px 0}
.nw-proxy .node{flex:1 1 120px;min-width:0}
.nw-proxy>span{font-size:.68rem;color:#a5c8d4;padding:12px 0;border-bottom:2px dashed #80aebe;max-width:80px;text-align:center;line-height:1.5}
.nw-redirects .node{max-width:140px;flex:1 1 80px;min-width:0}
.nw-workers{display:grid;gap:18px;margin:25px 0}
.nw-workers>div{padding:17px;border:1px solid #60513f;border-radius:7px;background:#29241e}
.nw-workers h3{font-size:.9rem;margin-bottom:14px}
.nw-workers>div>div{display:flex;gap:3px;flex-wrap:wrap;margin-bottom:12px;min-height:24px}
.nw-workers i{display:block;height:24px;border:1px solid #edb294;background:#855f3e;border-radius:3px}
.nw-workers small{font-size:.75rem}
.nw-age{height:80px;background:#232c30;border:1px solid #536067;border-radius:7px;position:relative;margin:30px 0;overflow:hidden}
.nw-age>div{height:100%;background:#5e4531;transition:width .2s}
.nw-age>i{position:absolute;top:0;bottom:0;width:2px;background:#91cce2}
.nw-age>span{position:absolute;top:30px;left:15px;font:.8rem ui-monospace,monospace;color:#f1dcc8}
.nw-cache-keys{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:25px 0}
.nw-cache-keys>div{padding:22px;border:1px solid #61747e;background:#1d2b33;border-radius:8px;display:flex;flex-direction:column;gap:20px;min-width:0}
.nw-cache-keys strong{font:.95rem/1.6 ui-monospace,monospace;overflow-wrap:anywhere}
.nw-cache-keys span{font-size:.8rem;line-height:1.6}
.nw-origin{display:flex;gap:8px;flex-wrap:wrap;margin:25px 0}
.nw-origin>span{flex:1 1 100px;display:flex;flex-direction:column;gap:15px;padding:20px;background:#2d2536;border:1px solid #746283;border-radius:6px;font-size:.8rem;color:#c9b9df}
.nw-origin b{font:.95rem ui-monospace,monospace;color:#e6d8ee;overflow-wrap:anywhere}
.nw-events{padding:15px 25px 15px 5px;margin:25px 0;background:#1b252b;border:1px solid #475c68;border-radius:8px}
.nw-events>div{position:relative;height:100px;margin:30px 10px 0 120px;border-top:1px solid #647880}
.nw-events>div>span{position:absolute;left:-115px;top:15px;font-size:.8rem;max-width:90px;line-height:1.5}
.nw-events i{position:absolute;top:15px;width:9px;height:9px;background:#edb294;border-radius:50%;transform:translateX(-50%)}
.nw-events i b{position:absolute;top:18px;left:-3px;color:#c9d5d9;font:10px ui-monospace,monospace}
.nw-events>div+div i{background:#91cce2}
.nw-events>p{margin:0 15px;line-height:1.6}
.nw-deadline{padding:20px 24px;margin:30px 0;background:#1c282d;border:1px solid #4f6872;border-radius:7px}
.nw-deadline-track{height:95px;position:relative;border-bottom:1px solid #637c87;margin:20px 10px}
.nw-deadline-track span{position:absolute;top:28px;transform:translateX(-50%);padding:5px;font:.75rem ui-monospace,monospace;border:1px solid #69837b;border-radius:4px}
.nw-deadline-track .ready{background:#2c4837;color:#beebcf}
.nw-deadline-track .pending{background:#30383b;color:#95a0a3;border-style:dashed;opacity:.65}
.nw-deadline-track i{position:absolute;top:0;bottom:0;width:2px;background:#edb294}
.nw-evidence{padding:25px;border-left:3px solid #edb294;background:#30261f;margin:25px 0}
.nw-evidence h3{font-size:1.1rem;margin:15px 0}
.nw-evidence p{font-size:.9rem;line-height:1.8;color:#d0c6be;margin:0}
@media(max-width:800px){.nw-dns{grid-template-columns:1fr}.nw-dns>div:last-child{grid-template-columns:1fr 1fr}.nw-streams,.nw-cache-keys{grid-template-columns:1fr}.nw-route-table>div{grid-template-columns:110px minmax(0,1fr) 45px}.nw-meters>div{grid-template-columns:110px minmax(0,1fr) 38px;font-size:.75rem}.nw-proxy{flex-direction:column;align-items:stretch}.nw-proxy .node{flex:auto}.nw-proxy>span{max-width:none;padding:10px}}
@media(max-width:600px){.nw-envelope{padding:12px}.nw-envelope>div,.nw-envelope>div>div{padding:10px}.nw-envelope small{font-size:.63rem}.nw-route{gap:5px}.nw-route>div{flex-basis:90px}.nw-route-table>div{grid-template-columns:1fr auto;padding:14px}.nw-route-table>div span{grid-row:2;grid-column:1/-1}.nw-route-table>div b{grid-row:1;grid-column:2}.nw-dns>div:last-child{grid-template-columns:1fr}.nw-events>div{margin-left:80px}.nw-events>div>span{left:-75px;max-width:65px;font-size:.7rem}.nw-code{font-size:.72rem;padding:15px}.network-page .toplinks .active{max-width:100px;line-height:1.3}.nw-deadline{padding:12px 18px}.nw-deadline-track span{padding:3px;font-size:.65rem}}