*{box-sizing:border-box}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--blue);outline-offset:4px}button:disabled{cursor:default}.small-label,.eyebrow{font-size:11px;letter-spacing:1.4px;font-weight:bold}.eyebrow{color:var(--green);margin:0 0 12px}h1,h2,h3,p{margin-top:0}.main-idea{border-left:3px solid var(--orange);padding:12px 0 12px 26px;min-width:315px}.main-idea .small-label{font-size:9px;color:var(--orange)}.main-idea p{font-size:21px;line-height:1.4;margin:14px 0 7px}.main-idea strong{font-size:30px;color:var(--orange);margin-right:10px}.main-idea>span:last-child{font-size:13px;color:var(--muted)}.chapters{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}.lesson{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-height:510px;box-shadow:0 8px 30px #23362c06}.lesson-heading{padding:28px 30px 0;display:flex;justify-content:space-between;gap:20px;align-items:flex-start}h2{font:normal 30px/1.15 Georgia,serif;margin-bottom:12px}h3{font-size:16px}.lesson-heading p{max-width:780px;color:var(--muted);font-size:15px;margin-bottom:20px}.counter{font:12px monospace;color:var(--muted);white-space:nowrap}.lab-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;padding:0 30px 28px}.canvas{background:radial-gradient(#b7c7bf70 .7px,transparent .7px);background-size:14px 14px;border:1px solid var(--line);border-radius:12px;padding:24px;min-width:0;display:flex;flex-direction:column;justify-content:center;min-height:310px;position:relative}.scene-label{font:10px monospace;color:var(--muted);letter-spacing:1px;margin-bottom:25px}.path{display:grid;grid-template-columns:1fr 45px 1fr 45px 1fr;align-items:center;gap:0}.node{border:1px solid #bdcfc4;border-radius:12px;padding:18px 8px;text-align:center;background:var(--white);min-width:0;box-shadow:0 4px 0 #d4dfd550}.node-icon{display:block;margin:0 auto 12px;width:30px;height:30px;color:var(--green)}.node strong{display:block;font-size:13px;line-height:1.3}.node small{display:block;font:11px/1.7 monospace;color:var(--muted);overflow-wrap:anywhere;margin-top:7px}.node.blue{border-color:#9db8f2;background:#f3f6ff}.node.blue .node-icon{color:var(--blue)}.wire{height:2px;background:#a8bbb0;position:relative}.wire:after{content:'';position:absolute;right:0;top:-3px;border:4px solid transparent;border-right:0;border-left-color:#a8bbb0}.wire.flow:before{content:'';width:8px;height:8px;background:var(--blue);border-radius:50%;position:absolute;top:-3px;animation:packet 1.3s linear infinite}.wire.blocked{background:repeating-linear-gradient(90deg,#c78470 0 5px,transparent 5px 9px)}.wire.blocked:after{content:'×';border:0;right:40%;top:-15px;color:var(--orange);font-size:22px;background:var(--white)}.caption{text-align:center;font-size:12px;color:var(--muted);margin:25px 0 0}.controls label,.control-label{display:block;font-size:12px;font-weight:bold;margin-bottom:7px}.controls input,.controls select{width:100%;border:1px solid #bac8bf;border-radius:8px;padding:10px 12px;background:white;color:var(--ink);margin-bottom:15px}.segments{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:18px}.segments button,.quiz-options button{border:1px solid var(--line);background:var(--white);color:var(--ink);padding:9px 11px;border-radius:8px;font-size:12px}.segments button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:white}.result{padding:15px;border-radius:10px;background:var(--mint);color:#23573d;font-size:14px;line-height:1.5}.result strong{display:block;margin-bottom:5px}.result.warn{background:#fff0e6;color:#91391f}.note{font-size:12px;color:var(--muted);margin:14px 0 0}.action{border:0;background:var(--blue);color:white;border-radius:9px;padding:11px 18px;font-weight:bold;font-size:13px;margin-bottom:14px}.address{font:clamp(22px,3vw,39px)/1.4 monospace;text-align:center;margin:3px 0 0;letter-spacing:-1px}.address span{color:var(--blue)}.address-sub{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:14px 0 24px}.chip{background:#e8eee9;color:var(--green);font-size:11px;padding:4px 9px;border-radius:5px}.address-key{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:10px}.address-key div{border-top:1px solid var(--line);padding-top:14px;font-size:13px}.address-key strong{display:block;margin-bottom:5px}.address-key p{margin:0;color:var(--muted)}.network-tags{display:flex;gap:12px;justify-content:space-between;margin-top:22px;flex-wrap:wrap}.network-tags span{font:11px monospace;background:#e8eee9;border-radius:6px;padding:7px}.nat-table{margin-top:20px;border-collapse:collapse;width:100%;font:11px/1.5 monospace;table-layout:fixed;background:var(--white)}.nat-table th,.nat-table td{text-align:left;border-bottom:1px solid var(--line);padding:9px;overflow-wrap:anywhere}.nat-table th{color:var(--muted);font-weight:normal}.takeaway{display:flex;gap:30px;align-items:center;padding:24px 5px;border-bottom:1px solid var(--line)}.takeaway .small-label{flex:0 0 150px;color:var(--green);font-size:10px}.takeaway p{margin:0;font-size:16px}.quiz-section{display:grid;grid-template-columns:1fr 1.4fr;gap:45px;padding:50px 0}.muted{color:var(--muted);font-size:14px}.quiz-card{padding:19px 0;border-bottom:1px solid var(--line)}.quiz-card:first-child{padding-top:0}.quiz-card h3{font-size:14px;margin-bottom:12px}.quiz-options{display:flex;gap:8px}.quiz-options button[aria-pressed=true]{border-color:var(--blue);background:#e9efff}.quiz-answer{font-size:13px;color:var(--green);margin:12px 0 0}.quiz-answer:empty{display:none}footer{border-top:1px solid var(--line);padding:20px 0 30px;color:var(--muted);font-size:11px;display:flex;gap:35px;justify-content:space-between}footer span{max-width:530px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@keyframes packet{from{left:0}to{left:calc(100% - 8px)}}
.node strong{overflow-wrap:anywhere}
.subnet-layout{grid-template-columns:minmax(0,1fr) 240px}
#subnet-diagram{justify-content:flex-start;padding:20px;display:block}
.subnet-route{padding:14px;border-radius:10px;background:var(--mint);color:var(--green);margin-bottom:20px;font-size:13px}
.subnet-route strong,.subnet-route span{display:block}
.subnet-route[data-route=routed]{background:#fff1df;color:#815012}
.subnet-router{display:flex;justify-content:center;padding-bottom:22px;position:relative}
.subnet-router>.node{width:200px;border-style:dashed;opacity:.7}
.subnet-router.is-active>.node{border:2px solid var(--orange);opacity:1}
.subnet-router:after{content:'';position:absolute;bottom:0;height:22px;border-left:2px dashed var(--line)}
.subnet-router.is-active:after{border-color:var(--orange)}
.subnet-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;border-top:2px dashed var(--line);padding-top:18px}
.subnet-group{min-width:0;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--white)}
.subnet-group.is-active{border-color:var(--green)}
.subnet-group h3{font:12px monospace;color:var(--muted);margin-bottom:12px}
.subnet-switch{display:flex;justify-content:center}
.subnet-switch>.node{width:100%;padding:12px;box-shadow:none;background:var(--mint)}
.subnet-switch .node-icon{height:24px;width:24px;margin-bottom:5px}
.subnet-devices{display:grid;grid-template-columns:1fr;gap:10px;margin-left:10px;padding:14px 0 0 16px;border-left:2px solid var(--line)}
.subnet-device{position:relative;min-width:0;display:flex;flex-direction:column;gap:5px;padding:10px 8px;border:1px solid var(--line);border-radius:8px;background:var(--white);text-align:left;color:var(--ink)}
.subnet-device:before{content:'';width:18px;border-top:1px solid var(--line);position:absolute;top:50%;right:100%}
.subnet-device.is-source,.subnet-device.is-target{border:2px solid var(--blue);background:#eef3ff}
.subnet-device.is-source:before,.subnet-device.is-target:before{border-color:var(--blue)}
.subnet-device strong{font-size:12px}
.subnet-device-role{font-size:9px;color:var(--muted)}
.subnet-address{font:11px monospace;overflow-wrap:anywhere}
@media(max-width:1050px){.subnet-layout{grid-template-columns:1fr}.subnet-layout>.controls{display:grid;grid-template-columns:1fr;max-width:none}}
@media(max-width:650px){#subnet-diagram{padding:12px}.subnet-groups{grid-template-columns:1fr}.subnet-group{padding:10px}}
.embedded .masthead{display:none}.embedded footer{padding-bottom:15px}

@media(max-width:900px){.lab-body{grid-template-columns:minmax(0,1fr) 250px;gap:18px;padding:0 20px 22px}.main-idea{min-width:250px}.main-idea .small-label{display:block;max-width:200px}.canvas{padding:16px}.path{grid-template-columns:1fr 25px 1fr 25px 1fr}.lesson-heading{padding:24px 20px 0}.node strong{font-size:11px}.node small{font-size:10px}}
@media(max-width:650px){.desktop-break{display:none}.main-idea{margin-top:24px;padding:4px 0 4px 16px}.main-idea .small-label{max-width:none;font-size:8px}.main-idea p{font-size:18px;margin:9px 0 3px}.main-idea p br{display:none}.main-idea strong{font-size:21px;margin:0 5px}.main-idea>span:last-child{font-size:12px}.chapters{grid-template-columns:1fr 1fr}.lab-body{grid-template-columns:1fr;padding:0 16px 20px;gap:20px}.lesson-heading{padding:22px 16px 0}h2{font-size:27px}.lesson-heading p{font-size:14px}.counter{display:none}.canvas{min-height:235px;padding:15px 10px}.scene-label{font-size:9px;margin-bottom:18px}.node{padding:14px 5px}.path{grid-template-columns:1fr 24px 1fr 24px 1fr}.node strong{font-size:11px}.node small{font-size:9px}.node-icon{width:25px;height:25px;margin-bottom:9px}.takeaway{display:block;padding:20px 3px}.takeaway .small-label{display:block;margin-bottom:10px}.takeaway p{font-size:15px}.quiz-section{grid-template-columns:1fr;gap:15px;padding:32px 0}.quiz-section h2{margin-bottom:10px}footer{display:block}footer span{display:block;margin-top:9px}.controls input,.controls select{font-size:16px}.address{font-size:31px}.network-tags{gap:6px}.network-tags span{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}.wire.flow:before{left:50%}}