:root{color:#172136;font-synthesis:none;text-rendering:optimizelegibility;--navy:#17233c;--blue:#2563eb;--blue-soft:#e8f0ff;--teal:#087f8c;--teal-soft:#e3f7f8;--green:#157347;--green-soft:#e6f5ec;--amber:#c86508;--amber-soft:#fff0df;--purple:#6842c2;--purple-soft:#f1ecff;--red:#b42318;--red-soft:#fff0ef;--line:#cfdae8;--muted:#5e6d82;--card:#fff;background:#edf2f7;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:linear-gradient(#edf3f9 0,#f7f9fc 100%);min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}code{background:#eef2f7;border-radius:6px;padding:2px 6px;font-family:Cascadia Code,Consolas,monospace}.app-shell{width:min(1440px,100% - 30px);margin:22px auto 50px}.site-nav{border:1px solid var(--line);background:var(--card);border-radius:12px;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-bottom:14px;padding:10px 14px;display:flex;box-shadow:0 10px 28px #17233c1a}.site-nav a{color:var(--muted);border-radius:8px;padding:7px 10px;font-size:.9rem;font-weight:800;text-decoration:none}.site-nav a:hover,.site-nav a:focus-visible{color:var(--blue);background:var(--blue-soft)}.site-nav a[aria-current=page]{color:#fff;background:var(--blue)}.hero{color:#fff;background:linear-gradient(135deg,#14213a,#284b83);border-radius:26px;justify-content:space-between;align-items:flex-start;gap:24px;padding:32px 34px;display:flex;box-shadow:0 18px 40px #17233c29}.hero h1{letter-spacing:-.045em;margin:3px 0 8px;font-size:clamp(2.15rem,5vw,4.3rem);line-height:1}.hero-copy{color:#dce7f7;max-width:860px;margin:0;font-size:1.08rem;line-height:1.65}.eyebrow,.section-kicker{text-transform:uppercase;letter-spacing:.12em;margin:0;font-size:.77rem;font-weight:850}.eyebrow{color:#a9c8ff}.ghost-button{color:#fff;white-space:nowrap;background:#ffffff14;border:1px solid #ffffff8c;border-radius:13px;padding:11px 15px;font-weight:800}.progress-panel{border:1px solid var(--line);background:#fff;border-radius:16px;grid-template-columns:auto minmax(200px,1fr);align-items:center;gap:22px;margin:15px 0;padding:14px 17px;display:grid}.progress-panel strong,.progress-panel span{display:block}.progress-panel span{color:var(--muted);margin-top:2px;font-size:.84rem}.progress-track,.mini-progress{background:#dfe7f1;border-radius:999px;height:10px;overflow:hidden}.progress-track span,.mini-progress span{background:linear-gradient(90deg, var(--blue), var(--teal));border-radius:inherit;height:100%;transition:width .35s;display:block}.tab-bar{scrollbar-width:thin;gap:8px;padding:5px 1px 14px;display:flex;overflow-x:auto}.tab{color:#45536a;background:#fff;border:1px solid #bdc9d9;border-radius:12px;flex:none;padding:11px 14px;font-weight:790}.tab.active{color:#fff;background:var(--blue);border-color:var(--blue)}.tab.complete:not(.active){color:var(--green);background:var(--green-soft);border-color:#8ac5a5}main{min-height:640px}.panel-stack{gap:17px;display:grid}.lesson-intro{border:1px solid var(--line);background:#fff;border-radius:22px;grid-template-columns:72px 1fr;align-items:start;gap:20px;padding:28px 30px;display:grid}.lesson-number{color:#fff;background:var(--blue);border-radius:20px;place-items:center;width:64px;height:64px;font-size:1.85rem;font-weight:900;display:grid}.lesson-intro h2{color:var(--navy);letter-spacing:-.025em;margin:4px 0 8px;font-size:clamp(1.65rem,3vw,2.45rem)}.section-kicker{color:var(--blue)}.lead-copy{color:#415069;font-size:1.02rem;line-height:1.68}.outcome-row{flex-wrap:wrap;gap:8px;margin-top:14px;display:flex}.outcome-row span{background:var(--blue-soft);color:#174aa9;border-radius:999px;padding:7px 10px;font-size:.83rem;font-weight:780}.content-card,.prefix-lab,.range-stage,.analogy-scene{border:1px solid var(--line);background:#fff;border-radius:20px;padding:22px}.content-card h3,.prefix-lab h3,.range-stage h3,.analogy-scene h3{color:var(--navy);margin:0 0 10px}.content-card p{line-height:1.6}.carry-forward{background:var(--purple-soft);border-left:6px solid var(--purple);border-radius:15px;padding:15px 18px;line-height:1.55}.scene-with-controls{grid-template-columns:minmax(0,1fr) 230px;align-items:stretch;gap:16px;display:grid}.scene-column{gap:12px;min-width:0;display:grid}.step-controls{background:var(--navy);color:#fff;border-radius:20px;flex-direction:column;align-self:stretch;gap:12px;min-height:290px;padding:18px;display:flex;position:sticky;top:12px}.step-count{color:#bcd0ef;text-transform:uppercase;letter-spacing:.09em;font-size:.84rem;font-weight:850}.step-button-row{grid-template-columns:1fr 1fr;gap:8px;display:grid}.step-controls .secondary-button{color:#fff;background:#ffffff14;border-color:#ffffff61}.step-controls .primary-button{color:var(--navy);background:#fff;border-color:#fff}.step-controls .full{width:100%}.step-controls .text-button{color:#bcd0ef}.step-controls .mini-progress{background:#ffffff26;margin-top:auto}.primary-button,.secondary-button,.complete-button{border:1px solid #0000;border-radius:11px;padding:10px 14px;font-weight:820}.primary-button{color:#fff;background:var(--blue);border-color:var(--blue)}.secondary-button{color:#34435c;background:#fff;border-color:#b8c5d6}.complete-button{color:#0d5f3a;background:var(--green-soft);border-color:#7bb897}.text-button{background:0 0;border:0;padding:5px;font-weight:780}.network-scene{border:1px solid var(--line);background:#f8fafc;border-radius:20px;min-height:390px;position:relative;overflow:hidden}.network-scene svg{width:100%;display:block}.network-line{stroke:#aab6c5;stroke-width:4px}.active-link{stroke-width:8px;stroke-linecap:round;animation:1.2s infinite pulse-line}.active-link.blue{stroke:var(--blue)}.active-link.amber{stroke:var(--amber);stroke-dasharray:12 9}.active-link.green{stroke:var(--green)}@keyframes pulse-line{50%{opacity:.48}}.switch-shape{fill:#1e3154;stroke:#0d1728;stroke-width:3px}.switch-title{fill:#fff;font-size:18px;font-weight:900}.switch-subtitle{fill:#c7d5ea;font-size:11px}.pc-shape{fill:#fff;stroke:#7889a1;stroke-width:2px;transition:all .25s}.pc-shape.active-pc{fill:#e9f1ff;stroke:var(--blue);stroke-width:4px}.pc-title{fill:var(--navy);font-size:17px;font-weight:900}.pc-sub{fill:#5d6e85;font-size:11px;font-weight:750}.port-text{fill:#53657d;font-size:12px;font-weight:850}.legend-row{flex-wrap:wrap;gap:8px;padding:0 16px 16px;display:flex}.legend-row span{border-radius:999px;padding:5px 9px;font-size:.76rem;font-weight:800}.legend-blue{color:var(--blue);background:var(--blue-soft)}.legend-amber{color:var(--amber);background:var(--amber-soft)}.legend-green{color:var(--green);background:var(--green-soft)}.explanation-card{background:#fff;border-left:7px solid #8d9bb0;border-radius:18px;padding:19px 21px}.explanation-card span{color:var(--muted);text-transform:uppercase;letter-spacing:.09em;font-size:.77rem;font-weight:850}.explanation-card h3{color:var(--navy);margin:5px 0}.explanation-card p{color:#46556c;margin:0;line-height:1.65}.explanation-card.blue{border-left-color:var(--blue);background:var(--blue-soft)}.explanation-card.amber{border-left-color:var(--amber);background:var(--amber-soft)}.explanation-card.green{border-left-color:var(--green);background:var(--green-soft)}.two-panel-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.three-panel-grid{grid-template-columns:1fr 1fr 1fr;gap:16px;display:grid}.data-table{border-collapse:collapse;border-radius:12px;width:100%;overflow:hidden}.data-table th,.data-table td{border-bottom:1px solid var(--line);text-align:left;padding:11px 10px}.data-table th{color:#fff;background:var(--navy)}.empty-cell{color:var(--muted);text-align:center!important}.frame-strip{border:3px solid var(--navy);border-radius:14px;grid-template-columns:1.1fr 1.1fr 1.5fr .65fr;display:grid;overflow:hidden}.frame-strip div{background:var(--blue-soft);border-right:2px solid #fff;padding:12px}.frame-strip div:last-child{border:0}.frame-strip .data{background:var(--teal-soft)}.frame-strip .trailer{background:var(--amber-soft)}.frame-strip span,.frame-strip strong{overflow-wrap:anywhere;display:block}.frame-strip span{color:var(--muted);text-transform:uppercase;font-size:.72rem;font-weight:850}.frame-strip strong{margin-top:4px}.muted{color:var(--muted)}.key-point{color:#fff;background:linear-gradient(135deg, var(--navy), #294b7b);border-radius:19px;padding:19px 22px}.key-point span{color:#a9c8ff;text-transform:uppercase;letter-spacing:.09em;font-size:.78rem;font-weight:850}.key-point p{margin:6px 0 0;font-size:1.05rem;line-height:1.62}.choice-row{flex-wrap:wrap;gap:8px;display:flex}.choice-row.compact{margin-top:8px}.choice{color:#47566d;background:#fff;border:1px solid #b8c5d6;border-radius:10px;padding:8px 12px;font-weight:800}.choice.active{background:var(--blue);border-color:var(--blue);color:#fff}.delivery-visual{grid-template-columns:110px 60px 1fr;align-items:center;gap:12px;margin:17px 0;display:grid}.sender-dot{background:var(--blue);color:#fff;border-radius:50%;place-items:center;width:82px;height:82px;font-weight:900;display:grid}.arrow-line{color:var(--blue);font-size:2.2rem}.receiver-cluster{grid-template-columns:repeat(4,64px);gap:11px;display:grid}.receiver-cluster span{background:#fff;border:3px solid #b7c3d3;border-radius:50%;place-items:center;width:64px;height:64px;font-weight:850;display:grid}.receiver-cluster.unicast span:first-child,.receiver-cluster.broadcast span,.receiver-cluster.multicast span:nth-child(-n+3),.receiver-cluster.anycast span:nth-child(3){border-color:var(--green);background:var(--green-soft);color:var(--green)}.prefix-toolbar{border-bottom:1px solid var(--line);grid-template-columns:1fr 1.3fr;align-items:center;gap:20px;padding-bottom:18px;display:grid}.prefix-toolbar>div>span,.boundary-slider>span{color:var(--muted);font-size:.82rem;font-weight:800;display:block}.boundary-slider input{width:100%;accent-color:var(--blue)}.boundary-slider small{color:var(--muted);margin-top:3px;display:block}.ipv4-stage{padding-top:20px}.stage-header span,.range-explanation span{color:var(--blue);text-transform:uppercase;letter-spacing:.09em;font-size:.78rem;font-weight:850}.stage-header h3,.range-explanation h3{margin:5px 0}.stage-header p,.range-explanation p{color:#43526a;margin:0 0 18px;line-height:1.62}.octet-row{flex-wrap:nowrap;justify-content:center;align-items:stretch;gap:9px;margin:18px 0;display:flex}.octet-card{text-align:center;background:#f9fbfd;border:2px solid #b9c6d7;border-radius:16px;flex:180px;min-width:115px;max-width:230px;padding:14px}.octet-card strong{color:var(--navy);font-size:clamp(1.5rem,3.5vw,2.45rem);display:block}.octet-card span,.octet-card small{color:var(--muted);display:block}.octet-card code{background:var(--blue-soft);color:#174aa9;margin:8px 0;font-weight:850;display:block}.dot-separator{color:#5f7088;align-self:center;font-size:2rem;font-weight:900}.bit-boundary-wrap{margin-top:20px}.boundary-labels{border-radius:12px 12px 0 0;height:39px;display:flex;overflow:hidden}.boundary-labels span{text-align:center;place-items:center;min-width:0;font-size:.78rem;font-weight:850;display:grid}.boundary-labels span:first-child{color:#174aa9;background:var(--blue-soft)}.boundary-labels span:last-child{color:#0c6872;background:var(--teal-soft)}.bit-strip{background:#cbd5e1;border:2px solid #9aa9bb;border-radius:0 0 11px 11px;grid-template-columns:repeat(32,minmax(8px,1fr));gap:2px;padding:3px;display:grid;overflow:hidden}.bit-strip span{place-items:center;height:36px;font-family:Cascadia Code,Consolas,monospace;font-size:clamp(.65rem,1.2vw,.95rem);font-weight:900;display:grid}.network-bit{color:#0c4296;background:#cfe0ff}.host-bit{color:#09626a;background:#cceff1}.mask-strip{border-radius:11px;margin-top:7px}.bit-boundary-wrap h4{color:var(--navy);margin:18px 0 7px}.octet-guides{text-align:right;color:var(--muted);grid-template-columns:repeat(4,1fr);padding:3px 0;font-size:.74rem;display:grid}.mask-decimal-row{justify-content:center;align-items:center;gap:15px;margin-top:10px;display:flex}.mask-decimal-row strong{color:var(--navy);font-size:1.5rem}.mask-decimal-row b{color:var(--muted);font-size:1.5rem}.equivalence{grid-template-columns:1fr auto 1fr;align-items:center;gap:17px;margin:20px 0;display:grid}.equivalence>div:not(.equals){text-align:center;background:#f9fbfd;border:2px solid #b9c6d7;border-radius:16px;padding:16px}.equivalence span,.equivalence strong{display:block}.equivalence span{color:var(--muted);font-size:.8rem}.equivalence strong{color:var(--navy);margin-top:6px;font-size:1.14rem}.equals{color:var(--blue);font-size:2rem;font-weight:900}.capacity-panel{border:2px solid var(--teal);background:var(--teal-soft);border-radius:18px;grid-template-columns:1fr 1.5fr;gap:16px;padding:19px;display:grid;position:relative;overflow:hidden}.capacity-text span,.capacity-text strong{display:block}.capacity-text span{color:#0c6872;font-weight:850}.capacity-text strong{color:var(--navy);margin:3px 0;font-size:2rem}.capacity-text p{margin:5px 0}.host-icons{color:var(--teal);flex-wrap:wrap;align-content:center;gap:7px;font-size:1.3rem;display:flex}.host-icons b{color:var(--navy)}.sliding-message{color:#0b6670;border-top:1px solid #9fd8dc;grid-column:1/-1;justify-content:space-between;padding-top:10px;font-size:.82rem;font-weight:850;display:flex}.inline-step-controls{justify-content:space-between;align-items:center;gap:12px;margin-top:18px;display:flex}.inline-step-controls span{color:var(--muted);text-align:center;font-size:.85rem}.mask-reference{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.mask-card{text-align:center;background:#fff;border:2px solid #c3cedd;border-radius:16px;padding:17px}.mask-card.active{border-color:var(--blue);background:var(--blue-soft)}.mask-card strong,.mask-card span,.mask-card small{display:block}.mask-card strong{color:var(--blue);font-size:1.7rem}.mask-card span{color:var(--navy);margin:4px 0;font-weight:850}.mask-card small{color:var(--muted)}.warning-callout{background:#fff8df;border-left:6px solid #d39a00;border-radius:16px;padding:17px 19px}.warning-callout p{color:#4a5668;margin:6px 0 0;line-height:1.6}.address-controls{grid-template-columns:1.5fr .65fr .8fr;align-items:end;gap:13px;display:grid}label{color:#34435b;font-weight:780}input,select{width:100%;color:var(--navy);background:#fff;border:1px solid #acbbcd;border-radius:10px;margin-top:6px;padding:10px 11px;display:block}.validation-status{color:#0d5f3a;background:var(--green-soft);text-align:center;border-radius:10px;padding:10px;font-weight:800}.range-stage{padding:24px}.range-visual{border:1px solid var(--line);background:#f9fbfd;border-radius:18px;padding:18px}.role-card-grid{grid-template-columns:repeat(3,1fr);gap:13px;margin:18px 0;display:grid}.role-card{opacity:.28;border:2px dashed #bec8d6;border-radius:15px;flex-direction:column;justify-content:center;min-height:115px;padding:15px;display:flex}.role-card.visible{opacity:1}.role-card span,.role-card strong,.role-card small{display:block}.role-card strong{overflow-wrap:anywhere;margin:5px 0}.network-role{color:#174aa9;background:var(--blue-soft);border-color:var(--blue)}.device-role{color:#0c6872;background:var(--teal-soft);border-color:var(--teal)}.broadcast-role{color:#984608;background:var(--amber-soft);border-color:var(--amber)}.address-line{grid-template-columns:auto 1fr auto;align-items:stretch;margin:20px 0;display:grid}.endpoint{text-align:center;min-width:145px;padding:14px}.endpoint strong,.endpoint span{display:block}.endpoint.network{color:#174aa9;background:var(--blue-soft);border-radius:13px 0 0 13px}.endpoint.broadcast{color:#984608;background:var(--amber-soft);border-radius:0 13px 13px 0}.usable-track{background:var(--teal-soft);border-top:5px solid var(--teal);border-bottom:5px solid var(--teal);grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:0 15px;display:grid}.usable-track span{font-family:Consolas,monospace;font-size:.78rem}.usable-track b{text-align:center;color:#0c6872}.calculation-box{grid-template-columns:repeat(3,1fr);gap:13px;margin:18px 0;display:grid}.calculation-box div{border:1px solid var(--line);background:#fff;border-radius:14px;padding:15px}.calculation-box span,.calculation-box strong{display:block}.calculation-box span{color:var(--muted);font-size:.78rem}.calculation-box strong{color:var(--navy);margin-top:5px;font-size:1.13rem}.special-grid{grid-template-columns:repeat(3,1fr);gap:13px;display:grid}.special-grid>div{border:1px solid var(--line);background:#fff;border-radius:15px;padding:16px}.special-grid strong,.special-grid span{display:block}.special-grid strong{color:var(--purple);font-size:1.28rem}.special-grid span{margin:3px 0;font-weight:850}.special-grid p{color:var(--muted);margin:5px 0 0;line-height:1.5}.classifier-list{gap:10px;display:grid}.classifier-row{border:1px solid var(--line);border-radius:12px;grid-template-columns:1fr 1fr 110px;align-items:center;gap:12px;padding:11px;display:grid}.classifier-row select{margin:0}.correct-text{color:var(--green);font-weight:850}.wrong-text{color:var(--red);font-weight:850}.arp-question{background:var(--purple-soft);text-align:center;border-radius:17px;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:16px 20px;display:grid}.arp-question span,.arp-question strong{display:block}.arp-question span{color:var(--muted);font-size:.8rem}.arp-question strong{color:var(--purple);font-size:1.5rem}.arp-question .arrow{color:var(--purple);font-size:2rem}.arp-scene{background:0 0;border:0;min-height:0;overflow:visible}.arp-scene>.network-scene{min-height:390px}.arp-bubbles{pointer-events:none;position:absolute;inset:0}.bubble{border:2px solid var(--amber);color:#8a4207;background:#fff;border-radius:12px;padding:8px 10px;font-size:.76rem;font-weight:850;position:absolute}.bubble.b{top:69%;left:18%}.bubble.c{top:15%;right:17%}.bubble.d{top:69%;right:17%}.packet-stack{border:2px solid var(--navy);border-radius:15px;flex-direction:column;display:flex;overflow:hidden}.packet-stack>div{padding:13px 15px}.packet-stack span,.packet-stack b{display:block}.packet-stack span{text-transform:uppercase;letter-spacing:.06em;opacity:.72;font-size:.75rem;font-weight:850}.packet-stack b{margin-top:4px}.packet-stack .ethernet{background:var(--blue-soft);color:#174aa9}.packet-stack .arp{background:var(--purple-soft);color:#5531aa}.packet-stack .ip{background:var(--teal-soft);color:#0c6872}.packet-stack .tcp{background:var(--amber-soft);color:#984608}.packet-stack .app{color:var(--navy);background:#fff}.packet-stack.mini{font-size:.9rem}.speech{background:var(--amber-soft);border:2px solid var(--amber);text-align:center;color:#7e3d07;border-radius:35px 35px 35px 8px;place-items:center;min-height:100px;padding:18px;font-weight:850;display:grid}.remote-flow{grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:12px;margin-top:15px;display:grid}.remote-flow>div:not(.flow-arrow){text-align:center;border:2px solid #bac7d8;border-radius:15px;padding:14px}.remote-flow span,.remote-flow strong{display:block}.remote-flow span{color:var(--muted);font-size:.78rem}.remote-flow p{background:var(--blue-soft);border-radius:12px;grid-column:1/-1;margin:5px 0 0;padding:13px}.flow-arrow{color:var(--blue);text-align:center;font-size:1.8rem;font-weight:900}.section-title-row{justify-content:space-between;align-items:center;gap:16px;display:flex}.section-title-row p{color:var(--muted);margin:0}.analogy-scene{overflow:hidden}.analogy-flow{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:9px;margin-top:16px;display:grid}.analogy-node{text-align:center;background:#f9fbfd;border:2px solid #b9c6d7;border-radius:17px;flex-direction:column;justify-content:center;min-height:150px;padding:14px;display:flex}.analogy-node span,.analogy-node strong,.analogy-node small{display:block}.analogy-node span{color:var(--muted);font-size:.77rem}.analogy-node strong{color:var(--blue);margin:7px 0;font-size:1.15rem}.analogy-node small{color:#45546c;line-height:1.4}.analogy-note{background:var(--purple-soft);border-left:6px solid var(--purple);border-radius:13px;padding:13px 15px;line-height:1.58}.server-building{border:3px solid var(--navy);border-radius:16px;margin:16px 0;overflow:hidden}.server-sign{color:#fff;background:var(--navy);text-align:center;padding:11px;font-weight:850}.server-room{border-bottom:1px solid var(--line);grid-template-columns:105px 1fr;gap:10px;padding:10px 13px;transition:all .2s;display:grid}.server-room:last-child{border-bottom:0}.server-room.active{background:var(--green-soft);color:#0d5f3a;box-shadow:inset 6px 0 var(--green)}.server-room.closed.active{background:var(--red-soft);color:var(--red);box-shadow:inset 6px 0 var(--red)}.address-rule{gap:7px;margin-top:15px;display:grid}.address-rule p{background:#f3f6fa;border-radius:10px;margin:0;padding:9px 11px}.feedback{border-radius:12px;padding:12px 14px;line-height:1.55}.correct-feedback{color:#0d5f3a;background:var(--green-soft)}.wrong-feedback{color:#8d2118;background:var(--red-soft)}.url-display{text-align:center;overflow-wrap:anywhere;background:#f2f5f9;border:2px solid #bdc8d7;border-radius:15px;padding:15px;font-family:Cascadia Code,Consolas,monospace;font-size:clamp(1rem,2.4vw,1.8rem);line-height:1.8}.url-display span{border-radius:7px;padding:3px 5px;transition:all .2s}.url-display .highlight{color:#fff;background:var(--blue)}.url-explanation{text-align:center;max-width:650px;margin:15px auto}.url-explanation span,.url-explanation strong{display:block}.url-explanation span{color:var(--blue);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;font-weight:850}.url-explanation strong{color:var(--navy);margin:4px 0;font-size:1.35rem}.url-explanation p{color:var(--muted);margin:0}.port-reference{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.port-reference>div{border:1px solid var(--line);background:#fff;border-radius:16px;padding:17px}.port-reference strong,.port-reference span,.port-reference small{display:block}.port-reference strong{color:var(--blue);font-size:1.35rem}.port-reference span{color:var(--navy);margin:4px 0;font-weight:850}.port-reference small{color:var(--muted);line-height:1.45}.journey-map{border:1px solid var(--line);background:#f8fafc;border-radius:20px;grid-template-columns:1fr 150px 1fr 150px 1fr;align-items:center;gap:12px;padding:20px;display:grid}.journey-node{text-align:center;background:#fff;border:2px solid #b8c5d6;border-radius:17px;padding:18px;transition:all .25s}.journey-node.active{border-color:var(--blue);background:var(--blue-soft);transform:translateY(-3px)}.journey-node span,.journey-node strong,.journey-node small{display:block}.journey-node span{color:var(--blue);text-transform:uppercase;font-size:.74rem;font-weight:850}.journey-node strong{color:var(--navy);margin:6px 0}.journey-node small{color:var(--muted)}.journey-link{color:var(--muted);text-align:center;border-top:5px dashed #b8c5d6;padding-top:6px;font-size:.76rem;font-weight:850}.journey-link.travelled{color:var(--green);border-color:var(--green)}.journey-layer-grid{grid-template-columns:repeat(5,1fr);gap:10px;display:grid}.journey-layer{opacity:.45;border:2px dashed #c2cddd;border-radius:13px;min-height:85px;padding:12px}.journey-layer.visible{opacity:1;border-style:solid;border-color:var(--teal);background:var(--teal-soft)}.journey-layer span,.journey-layer strong{display:block}.journey-layer span{color:var(--muted);font-size:.73rem}.journey-layer strong{overflow-wrap:anywhere;margin-top:5px}.end-to-end-comparison{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.end-to-end-comparison>div{border:1px solid var(--line);background:#fff;border-radius:16px;padding:18px}.end-to-end-comparison span,.end-to-end-comparison strong{display:block}.end-to-end-comparison span{color:var(--muted);font-size:.78rem}.end-to-end-comparison strong{color:var(--blue);margin:5px 0}.end-to-end-comparison p{color:#4a5870;margin:0;line-height:1.5}.review-list{gap:14px;display:grid}.question-card{border:1px solid var(--line);background:#fff;border-radius:18px;padding:20px}.question-card h3{color:var(--navy);margin:0 0 13px}.option-list{grid-template-columns:repeat(2,1fr);gap:9px;display:grid}.option-list label{border:1px solid #bdc9d9;border-radius:11px;align-items:center;gap:9px;padding:11px;font-weight:650;display:flex}.option-list input{width:auto;margin:0}.option-list .correct-option{border-color:var(--green);background:var(--green-soft)}.option-list .wrong-option{border-color:var(--red);background:var(--red-soft)}.review-actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.score-box{background:var(--navy);color:#fff;border-radius:15px;flex:360px;padding:14px 17px}.score-box span,.score-box strong{display:block}.score-box span{color:#bcd0ef;font-size:.78rem}.score-box strong{font-size:2rem}.score-box p{color:#d7e4f5;margin:3px 0 0}.lesson-navigation{border:1px solid var(--line);background:#fff;border-radius:16px;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:17px;padding:14px;display:flex}footer{color:#dbe6f7;background:var(--navy);text-align:center;border-radius:16px;margin-top:16px;padding:16px 20px}.resource-footer p{max-width:1050px;margin:5px auto}.resource-footer a{color:#a8d8ff}.resource-footer details{max-width:1050px;margin:10px auto 0}.resource-footer summary{color:#fff;cursor:pointer;font-weight:800}@media (width<=1120px){.scene-with-controls{grid-template-columns:1fr}.step-controls{grid-template-columns:auto 1fr 1fr auto;align-items:center;min-height:0;display:grid;position:static}.step-controls .mini-progress{grid-column:1/-1;width:100%}.step-controls .text-button{color:#cbd8eb}.analogy-flow{grid-template-columns:1fr}.analogy-flow .flow-arrow{transform:rotate(90deg)}.analogy-node{min-height:0}.journey-map{grid-template-columns:1fr}.journey-link{border-top:0;border-left:5px dashed #b8c5d6;place-items:center;min-height:50px;padding:0 0 0 12px;display:grid}}@media (width<=900px){.two-panel-grid,.three-panel-grid,.prefix-toolbar,.capacity-panel,.end-to-end-comparison{grid-template-columns:1fr}.address-controls{grid-template-columns:1fr 1fr}.validation-status{grid-column:1/-1}.mask-reference,.port-reference,.special-grid,.calculation-box{grid-template-columns:1fr}.journey-layer-grid{grid-template-columns:repeat(2,1fr)}.remote-flow{grid-template-columns:1fr}.remote-flow .flow-arrow{transform:rotate(90deg)}.address-line{grid-template-columns:1fr}.endpoint.network,.endpoint.broadcast{border-radius:13px}.usable-track{border-left:5px solid var(--teal);border-right:5px solid var(--teal);text-align:center;border-top:0;border-bottom:0;grid-template-columns:1fr;min-height:100px;padding:12px}.option-list,.role-card-grid{grid-template-columns:1fr}}@media (width<=680px){.app-shell{width:min(100% - 16px,1440px);margin-top:8px}.hero{border-radius:18px;flex-direction:column;padding:23px 20px}.progress-panel{grid-template-columns:1fr}.lesson-intro{grid-template-columns:1fr;padding:22px 19px}.lesson-number{border-radius:15px;width:50px;height:50px}.content-card,.prefix-lab,.range-stage,.analogy-scene{padding:16px}.step-controls{grid-template-columns:1fr}.step-button-row,.frame-strip{grid-template-columns:1fr 1fr}.octet-row{grid-template-columns:1fr 1fr;display:grid}.dot-separator{display:none}.bit-strip{grid-template-columns:repeat(16,minmax(8px,1fr))}.boundary-labels{height:auto}.boundary-labels span{padding:8px 4px}.equivalence{grid-template-columns:1fr}.equals{text-align:center}.capacity-panel{padding:14px}.sliding-message{flex-direction:column;gap:6px}.inline-step-controls{flex-wrap:wrap;justify-content:center}.address-controls{grid-template-columns:1fr}.validation-status{grid-column:auto}.classifier-row,.arp-question{grid-template-columns:1fr}.arp-question .arrow{transform:rotate(90deg)}.journey-layer-grid{grid-template-columns:1fr}.delivery-visual{grid-template-columns:1fr;justify-items:center}.arrow-line{transform:rotate(90deg)}.receiver-cluster{grid-template-columns:repeat(2,64px)}}.assignment-cards{grid-template-columns:1fr 1fr;gap:12px;display:grid}.assignment-cards>div{border:1px solid var(--line);background:#f8fafc;border-radius:14px;padding:14px}.assignment-cards strong{color:var(--blue);font-size:1.12rem}.assignment-cards p{color:var(--muted);margin:5px 0 0;line-height:1.5}.command-card pre{color:#e4efff;background:#101a2e;border-radius:13px;margin:12px 0;padding:15px;overflow-x:auto}.command-card pre code{color:inherit;background:0 0;padding:0}.command-card p{color:var(--muted);margin-bottom:0}.dns-flow{grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:14px 0;display:grid}.dns-flow>div:not(.flow-arrow){text-align:center;border:2px solid #b9c6d7;border-radius:14px;padding:14px}.dns-flow span,.dns-flow strong{display:block}.dns-flow span{color:var(--muted);font-size:.78rem}.dns-flow strong{overflow-wrap:anywhere;margin-top:4px}@media (width<=680px){.assignment-cards,.dns-flow{grid-template-columns:1fr}.dns-flow .flow-arrow{transform:rotate(90deg)}}.active-link.purple{stroke:var(--purple)}.legend-purple{color:var(--purple);background:var(--purple-soft)}.explanation-card.purple{border-left-color:var(--purple);background:var(--purple-soft)}.switch-port rect{fill:#f7f9fc;stroke:#8291a7;stroke-width:2px;transition:all .25s}.switch-port text{fill:#283850;pointer-events:none;font-size:10px;font-weight:900}.switch-port.selected rect{fill:var(--purple-soft);stroke:var(--purple);stroke-width:4px;filter:drop-shadow(0 0 7px #6842c28c);animation:1s infinite alternate port-glow}.switch-port.selected.blue rect{fill:var(--blue-soft);stroke:var(--blue)}.switch-port.selected.green rect{fill:var(--green-soft);stroke:var(--green)}.switch-port.selected.amber rect{fill:var(--amber-soft);stroke:var(--amber)}@keyframes port-glow{to{filter:drop-shadow(0 0 13px #6842c2cc)}}.moving-packet circle{fill:var(--blue);stroke:#fff;stroke-width:3px;filter:drop-shadow(0 4px 7px #00000040);transition:cx .75s,cy .75s}.moving-packet text{fill:#fff;pointer-events:none;font-size:9px;font-weight:900}.moving-packet.green circle{fill:var(--green)}.moving-packet.amber circle{fill:var(--amber)}.moving-packet.purple circle{fill:var(--purple)}.arp-switch-workbench{grid-template-columns:1.25fr .75fr;gap:16px;display:grid}.switching-lookup-table tr{transition:all .25s}.learned-row{background:var(--blue-soft);animation:.8s row-flash}.lookup-row{background:var(--purple-soft);box-shadow:inset 6px 0 var(--purple);animation:1s infinite alternate lookup-pulse}.matched-row{background:var(--green-soft);box-shadow:inset 6px 0 var(--green)}@keyframes row-flash{0%{background:#fff;transform:translate(-5px)}to{background:var(--blue-soft);transform:translate(0)}}@keyframes lookup-pulse{to{background:#e4dafd}}.table-complete-badge{color:#0d5f3a;background:var(--green-soft);text-align:center;border:1px solid #8ac5a5;border-radius:11px;margin-top:12px;padding:10px 12px;font-weight:850}.switch-decision-card{flex-direction:column;justify-content:center;display:flex}.decision-line,.decision-result{text-align:center;background:#f8fafc;border:2px solid #bec9d8;border-radius:14px;padding:14px}.decision-line span,.decision-line strong,.decision-result span,.decision-result strong{display:block}.decision-line span,.decision-result span{color:var(--muted);font-size:.78rem}.decision-line strong,.decision-result strong{color:var(--purple);margin-top:4px;font-size:1.45rem}.decision-arrow{text-align:center;color:var(--purple);padding:9px;font-weight:850}.decision-result.matched{border-color:var(--green);background:var(--green-soft)}.decision-result.matched strong{color:var(--green)}.animated-analogy .analogy-node{opacity:.55;transition:all .35s}.animated-analogy .analogy-node.active{opacity:1;border-color:var(--purple);background:var(--purple-soft);transform:translateY(-4px);box-shadow:0 8px 18px #6842c229}.animated-url{transition:all .3s}.port-delivery-scene{border:1px solid var(--line);background:#f8fafc;border-radius:20px;overflow:hidden}.port-delivery-scene svg{width:100%;display:block}.delivery-line{stroke:#aeb9c7;stroke-width:6px;stroke-linecap:round}.delivery-line.travelled{stroke:var(--green);animation:1.2s infinite pulse-line}.delivery-node{fill:#fff;stroke:#8796aa;stroke-width:2px;transition:all .3s}.delivery-node.active{fill:var(--blue-soft);stroke:var(--blue);stroke-width:4px}.delivery-title{fill:var(--navy);font-size:17px;font-weight:900}.delivery-sub{fill:var(--muted);font-size:11px;font-weight:750}.delivery-port rect{fill:#f4f6fa;stroke:#8090a5;stroke-width:2px}.delivery-port text{fill:var(--navy);font-size:10px;font-weight:900}.delivery-port.active rect{fill:var(--purple-soft);stroke:var(--purple);stroke-width:4px;animation:1s infinite alternate port-glow}.delivery-service{fill:var(--muted);font-size:11px;font-weight:800}.delivery-service.active{fill:var(--green);font-size:12px}.delivery-packet circle{fill:var(--purple);stroke:#fff;stroke-width:3px;filter:drop-shadow(0 4px 7px #00000040);transition:cx .8s}.delivery-packet text{fill:#fff;font-size:12px;font-weight:900}.lookup-caption{fill:var(--purple);font-size:13px;font-weight:850}.layer-active{box-shadow:inset 7px 0 var(--green);animation:.55s layer-reveal}@keyframes layer-reveal{0%{opacity:.35;transform:translate(-8px)}}.pulse-room{animation:1.1s infinite alternate room-pulse}@keyframes room-pulse{to{box-shadow:inset 9px 0 var(--green), 0 0 14px #15734738}}.mini-port-result{background:#f8fafc;border:2px solid #bdc9d8;border-radius:14px;margin-top:14px;padding:14px}.mini-port-result strong,.mini-port-result span{display:block}.mini-port-result strong{color:var(--blue);font-size:1.35rem}.mini-port-result span{color:var(--navy);margin-top:3px;font-weight:850}.mini-port-result p{color:var(--muted);margin:6px 0 0}.journey-animation{border:1px solid var(--line);background:#f8fafc;border-radius:20px;overflow:hidden}.journey-animation svg{width:100%;display:block}.journey-route,.dns-route{stroke:#aab6c5;stroke-width:6px;stroke-linecap:round;fill:none}.journey-route.active,.dns-route.active{stroke:var(--green);animation:1.1s infinite pulse-line}.dns-route{stroke-dasharray:10 7}.journey-svg-node rect{fill:#fff;stroke:#8796aa;stroke-width:2px;transition:all .3s}.journey-svg-node text{fill:var(--navy);font-size:15px;font-weight:900}.journey-svg-node text.small{fill:var(--muted);font-size:10px;font-weight:750}.journey-svg-node.active rect{fill:var(--blue-soft);stroke:var(--blue);stroke-width:4px}.journey-svg-node.dns.active rect{fill:var(--purple-soft);stroke:var(--purple)}.server-port-text,.resource-text{fill:var(--muted);font-size:11px;font-weight:800}.server-port-text.active{fill:var(--green);font-size:13px}.resource-text.active{fill:var(--purple);font-size:12px}.journey-moving-packet circle{fill:var(--purple);stroke:#fff;stroke-width:3px;filter:drop-shadow(0 4px 7px #0000003d);transition:cx .9s,cy .9s}.journey-moving-packet text{fill:#fff;font-size:8px;font-weight:900}.journey-caption{fill:var(--muted);font-size:11px}.arp-wave circle{fill:none;stroke:var(--amber);stroke-width:4px;opacity:.7;transform-origin:305px 178px;animation:1.2s infinite arp-wave}.arp-wave circle:nth-child(2){animation-delay:.35s}@keyframes arp-wave{0%{opacity:.8;transform:scale(.55)}to{opacity:0;transform:scale(1.25)}}.journey-envelope{border:2px solid var(--navy);border-radius:16px;grid-template-columns:repeat(4,1fr);display:grid;overflow:hidden}.envelope-layer{opacity:.4;border-right:2px solid #fff;min-height:92px;padding:13px;transition:all .35s}.envelope-layer:last-child{border-right:0}.envelope-layer span,.envelope-layer strong{display:block}.envelope-layer span{text-transform:uppercase;opacity:.75;font-size:.73rem;font-weight:850}.envelope-layer strong{overflow-wrap:anywhere;margin-top:6px}.envelope-layer.ethernet{background:var(--blue-soft);color:#174aa9}.envelope-layer.ip{background:var(--teal-soft);color:#0c6872}.envelope-layer.tcp{background:var(--amber-soft);color:#984608}.envelope-layer.app{background:var(--purple-soft);color:#5531aa}.envelope-layer.active{opacity:1;box-shadow:inset 0 -7px}@media (width<=900px){.arp-switch-workbench{grid-template-columns:1fr}.journey-envelope{grid-template-columns:1fr 1fr}}@media (width<=680px){.journey-envelope{grid-template-columns:1fr}.envelope-layer{border-bottom:2px solid #fff;border-right:0}.animated-analogy .analogy-node.active{transform:none}}