:root{--primary-color:#2c3e50;--osi-color:#3498db;--tcpip-color:#e67e22;--highlight-color:#f1c40f;--pdu-color:#9b59b6;--bg-color:#f8f9fa;--text-color:#333}body{background-color:var(--bg-color);color:var(--text-color);margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.container{flex-direction:column;max-width:1000px;min-height:100vh;margin:0 auto;padding:2rem;display:flex}header{text-align:center;margin-bottom:2rem}h1{color:var(--primary-color);margin-bottom:1.5rem}.controls{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}button{cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:4px;padding:.6rem 1.2rem;font-weight:500;transition:all .2s}button:hover{background:#eee}button.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}main{flex:1;grid-template-columns:1fr 1fr;gap:2rem;display:grid}main.osi,main.tcpip,main.switching{grid-template-columns:1fr}.model-column{flex-direction:column;align-items:center;display:flex}h2{color:var(--primary-color);margin-bottom:1rem;font-size:1.2rem}.layers{flex-direction:column;gap:8px;width:100%;display:flex}.layer-box{cursor:pointer;-webkit-user-select:none;user-select:none;background:#fff;border:2px solid #ddd;border-radius:8px;justify-content:space-between;align-items:center;padding:1rem;transition:all .2s;display:flex;position:relative}.osi .layer-box{border-left:6px solid var(--osi-color)}.tcpip .layer-box{border-left:6px solid var(--tcpip-color)}.layer-box:hover{border-color:#bbb;transform:translate(5px)}.layer-box.highlighted{border-color:var(--highlight-color);z-index:10;background-color:#fffde7;transform:scale(1.02)}.layer-box.selected{border-color:var(--primary-color);box-shadow:0 4px 12px #0000001a}.layer-num{color:#7f8c8d;width:30px;font-size:1.2rem;font-weight:700}.layer-name{flex:1;font-weight:500}.layer-pdu-badge{color:#666;text-transform:uppercase;background:#eee;border-radius:4px;padding:2px 8px;font-size:.75rem;font-weight:600}.highlighted .layer-pdu-badge{background:var(--highlight-color);color:var(--primary-color)}.tcp-app{height:160px}.tcp-net-if{height:100px}.details-panel{background:#fff;border:1px solid #eee;border-radius:12px;grid-column:span 2;margin-top:1rem;padding:1.5rem;position:relative;box-shadow:0 4px 20px #0000000d}main.osi .details-panel,main.tcpip .details-panel{grid-column:span 1}.details-header{border-bottom:2px solid #eee;justify-content:space-between;align-items:flex-start;margin-bottom:1rem;padding-bottom:.5rem;display:flex}.details-header h3{color:var(--primary-color);margin:0}.pdu-tag{background:var(--pdu-color);color:#fff;border-radius:20px;padding:4px 12px;font-size:.85rem;font-weight:600}.description{color:#444;margin-bottom:1rem;line-height:1.6}.info-grid{gap:1rem;display:grid}.protocols ul{flex-wrap:wrap;gap:.5rem;margin-top:.5rem;padding:0;list-style:none;display:flex}.protocols li{color:#555;background:#f0f2f5;border-radius:15px;padding:4px 10px;font-size:.9rem}.close-btn{width:100%;margin-top:1.5rem}.placeholder{color:#7f8c8d;text-align:center;justify-content:center;align-items:center;font-style:italic;display:flex}footer{text-align:center;color:#95a5a6;border-top:1px solid #eee;margin-top:3rem;padding:1rem}@media (width<=768px){main{grid-template-columns:1fr}.details-panel{grid-column:span 1}.details-header{flex-direction:column;gap:.5rem}.tcp-app,.tcp-net-if{height:auto}}.switching-container{grid-column:span 2;width:100%}.switching-demo{background:#fff;border:1px solid #eee;border-radius:12px;padding:2rem;box-shadow:0 4px 20px #0000000d}.switching-tabs{border-bottom:1px solid #eee;justify-content:center;gap:.5rem;margin-bottom:1.5rem;padding-bottom:1rem;display:flex}.switching-tabs button{padding:.4rem .8rem;font-size:.85rem}.switching-tabs button.active{background:var(--pdu-color);border-color:var(--pdu-color)}.visual-area{background:#f8f9fa;border-radius:8px;margin:3rem 0;padding:2rem;position:relative;overflow:hidden}.nodes-container{z-index:1;justify-content:space-between;align-items:center;display:flex;position:relative}.node-wrapper{flex-direction:column;align-items:center;gap:.5rem;width:80px;display:flex}.node{text-align:center;background:#fff;border:3px solid #ddd;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;font-size:.8rem;font-weight:700;line-height:1.2;transition:all .3s;display:flex}.node.active{border-color:var(--osi-color);transform:scale(1.1);box-shadow:0 0 15px #3498db66}.node.source{border-color:#2ecc71}.node.destination{border-color:#e74c3c}.node-label{color:#7f8c8d;white-space:nowrap;font-size:.7rem;font-weight:600}.path-line{background:#eee;flex:1;height:4px;margin:0 -10px;transition:background .5s}.path-line.established{background:#2ecc71;box-shadow:0 0 10px #2ecc714d}.moving-message,.packet{background:var(--pdu-color);color:#fff;z-index:2;border-radius:4px;padding:8px 15px;font-size:.75rem;font-weight:700;transition:left 1s linear,top 1s ease-in-out;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 4px 8px #0003}.packet{text-align:center;min-width:30px;padding:5px 10px}.bit-stream{z-index:2;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.bit{color:#2ecc71;font-family:monospace;font-weight:700;animation:2s linear infinite bit-flow;position:absolute;left:-20px}@keyframes bit-flow{0%{opacity:1;left:0%}to{opacity:.5;left:100%}}.status-overlay{color:var(--primary-color);background:#ffffffe6;border:1px solid #ddd;border-radius:20px;padding:5px 15px;font-size:.8rem;font-weight:600;position:absolute;top:10px;right:10px;box-shadow:0 2px 5px #0000000d}.demo-controls{justify-content:center;gap:1rem;margin-bottom:2rem;display:flex}.action-btn{background:var(--osi-color);color:#fff;border:none;min-width:120px}.action-btn:disabled{background:#bdc3c7}.reset-btn{color:#fff;background:#95a5a6;border:none}.switching-info{border-top:1px solid #eee;padding-top:2rem}.info-card{margin-bottom:1.5rem}.primary-card h3{color:var(--primary-color);margin-bottom:.5rem}.comparison-grid{grid-template-columns:1fr 1fr;gap:1.5rem;display:grid}.comp-box{border-radius:8px;padding:1.2rem}.comp-box h4{margin-top:0;margin-bottom:.5rem}.pros{background:#e8f5e9;border:1px solid #c8e6c9}.pros h4{color:#2e7d32}.cons{background:#ffebee;border:1px solid #ffcdd2}.cons h4{color:#c62828}.comp-box ul{margin:0;padding-left:1.2rem;font-size:.9rem}.comp-box li{margin-bottom:.3rem}.multiplexing-container{grid-column:span 2;width:100%}.multiplexing-visual{justify-content:center;align-items:center;height:300px;display:flex}.fdm-viz{flex-direction:column;justify-content:space-around;width:100%;height:100%;padding:1rem;display:flex}.fdm-channel{background:#fff;border:1px dashed #ccc;border-radius:4px;align-items:center;height:60px;display:flex;position:relative;overflow:hidden}.sine-wave{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='60'%3E%3Cpath d='M0 30 Q 25 0, 50 30 T 100 30' fill='none' stroke='%233498db' stroke-width='2'/%3E%3C/svg%3E");background-repeat:repeat-x;width:200%;height:100%;animation:2s linear infinite wave-flow}.ch-2 .sine-wave{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='60'%3E%3Cpath d='M0 30 Q 12.5 0, 25 30 T 50 30' fill='none' stroke='%23e67e22' stroke-width='2'/%3E%3C/svg%3E");animation-duration:1s}.ch-3 .sine-wave{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='60'%3E%3Cpath d='M0 30 Q 6.25 0, 12.5 30 T 25 30' fill='none' stroke='%239b59b6' stroke-width='2'/%3E%3C/svg%3E");animation-duration:.5s}@keyframes wave-flow{0%{transform:translate(0)}to{transform:translate(-50%)}}.ch-label{color:#666;background:#fffc;border-radius:3px;padding:2px 5px;font-size:.7rem;position:absolute;bottom:5px;right:10px}.tdm-viz{justify-content:space-around;align-items:center;gap:1rem;width:100%;display:flex}.users-input{flex-direction:column;gap:1rem;display:flex}.user-box{text-align:center;background:#fff;border:2px solid #ddd;border-radius:4px;width:100px;padding:.5rem;font-size:.9rem;transition:all .3s}.user-box.active{border-color:var(--osi-color);background:#e3f2fd;transform:scale(1.05)}.user-box.inactive{opacity:.4;background:#f5f5f5}.data-toggle{align-items:center;gap:4px;margin-top:4px;font-size:.7rem;display:flex}.mux-gate{border:2px solid var(--primary-color);border-radius:50%;width:60px;height:60px;position:relative}.rotator{background:var(--primary-color);transform-origin:bottom;width:2px;height:30px;transition:transform .5s cubic-bezier(.4,0,.2,1);position:absolute;top:0;left:50%}.mux-channel{background:#fff;border:2px solid #ddd;border-radius:4px;flex:1;height:50px;padding:5px}.time-slots{gap:5px;height:100%;display:flex}.slot-box{background:#f0f2f5;border-radius:2px;flex:1}.cdm-viz{flex-direction:column;gap:1.5rem;width:100%;display:flex}.cdm-users{justify-content:space-around;display:flex}.cdm-user-input{background:#fff;border:2px solid #ddd;border-radius:8px;padding:10px;transition:all .5s}.cdm-user-input.encoding{border-color:var(--osi-color);box-shadow:0 0 10px #3498db33}.cdm-mux,.cdm-decoder{text-align:center;background:#fff;border:2px solid #ddd;border-radius:8px;padding:15px;font-weight:700;transition:all .5s}.cdm-mux.active{border-color:var(--tcpip-color);background:#fff3e0}.cdm-decoder.active{background:#e8f5e9;border-color:#4caf50}.csmacd-container{grid-column:span 2;width:100%}.csmacd-demo{background:#fff;border:1px solid #eee;border-radius:12px;padding:2rem;box-shadow:0 4px 20px #0000000d}.csmacd-visual{background:#f8f9fa;justify-content:center;align-items:center;height:250px;margin:2rem 0;display:flex}.shared-bus{width:90%;height:120px;position:relative}.bus-line{background:#2c3e50;border-radius:4px;width:100%;height:8px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.csmacd-nodes{z-index:2;justify-content:space-between;height:100%;display:flex;position:relative}.node-station{flex-direction:column;justify-content:space-between;align-items:center;display:flex}.station-box{background:#fff;border:2px solid #ddd;border-radius:6px;justify-content:center;align-items:center;width:80px;height:50px;font-size:.9rem;font-weight:700;transition:all .3s;display:flex}.station-box.sensing{background:#fffde7;border-color:#f1c40f}.station-box.sending{background:#e3f2fd;border-color:#3498db}.station-box.collision{background:#ffebee;border-color:#e74c3c;animation:.2s infinite shake}.station-box.backoff{opacity:.7;background:#f5f5f5;border-color:#95a5a6}.station-box.success{background:#e8f5e9;border-color:#2ecc71;box-shadow:0 0 10px #2ecc7166}.status-indicator{color:#7f8c8d;margin-top:5px;font-size:.7rem;font-weight:700}.signals{z-index:1;width:100%;height:8px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.signal{background:#3498db99;height:100%;transition:width .1s linear;position:absolute}.signal.from-left{border-radius:4px 0 0 4px;left:0}.signal.from-right{border-radius:0 4px 4px 0;right:0}.collision-spark{color:#e74c3c;z-index:3;font-size:1.5rem;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-100%)}@keyframes shake{0%{transform:translate(0)}25%{transform:translate(-3px)}50%{transform:translate(3px)}75%{transform:translate(-3px)}to{transform:translate(0)}}.principle-grid{grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.5rem;display:grid}.principle-item{border-left:4px solid var(--osi-color);background:#f8f9fa;border-radius:8px;padding:1rem}.principle-item strong{color:var(--primary-color);margin-bottom:.3rem;display:block}.principle-item span{color:#555;font-size:.9rem;line-height:1.4}@media (width<=600px){.principle-grid{grid-template-columns:1fr}.station-box{width:60px;font-size:.75rem}}.secondary-card{border-top:1px solid #eee;margin-top:1.5rem;padding-top:1.5rem}.formula-box{text-align:center;color:#33691e;background:#f1f8e9;border:1px solid #c5e1a5;border-radius:8px;margin:1rem 0;padding:1rem;font-family:Cambria,Georgia,serif;font-size:1.1rem}.factor-grid{grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem;display:grid}.factor-item{text-align:center;background:#fff;border:1px solid #eee;border-radius:6px;padding:.8rem}.factor-item strong{color:var(--primary-color);margin-bottom:.3rem;font-size:.9rem;display:block}.factor-item span{color:#666;font-size:.8rem}.example-box{background:#fff3e0;border-left:4px solid #ff9800;border-radius:0 8px 8px 0;padding:1rem}.example-box strong{color:#e65100;font-size:.9rem}.example-box p{color:#5d4037;margin:.5rem 0 0;font-size:.9rem;line-height:1.5}@media (width<=768px){.factor-grid{grid-template-columns:1fr}}.subnet-container{grid-column:span 2;width:100%}.subnet-card{background:#fff;border:1px solid #eee;border-radius:12px;padding:2rem;box-shadow:0 4px 20px #0000000d}.subnet-inputs{border-bottom:1px solid #eee;gap:2rem;margin:2rem 0;padding-bottom:2rem;display:flex}.input-group{flex-direction:column;flex:1;gap:.5rem;display:flex}.input-group label{color:var(--primary-color);font-size:.9rem;font-weight:700}.input-group input{border:1px solid #ddd;border-radius:6px;padding:.8rem;font-size:1rem}.mask-input{align-items:center;gap:1rem;display:flex}.mask-input input{width:100px}.mask-input span{color:#666;font-weight:700}.result-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:2rem;display:grid}.result-item{background:#f8f9fa;border:1px solid #eee;border-radius:8px;padding:1rem}.result-item label{color:#7f8c8d;margin-bottom:.4rem;font-size:.75rem;font-weight:600;display:block}.result-item .value{color:var(--osi-color);font-family:monospace;font-size:1.1rem;font-weight:700}.binary-display{color:#fff;background:#2c3e50;border-radius:8px;margin-bottom:2rem;padding:1.5rem}.binary-display label{opacity:.7;margin-bottom:.5rem;font-size:.8rem;display:block}.binary-mask{letter-spacing:2px;font-family:monospace;font-size:1.2rem}.error-msg{color:#c62828;text-align:center;background:#ffebee;border-radius:8px;margin-bottom:2rem;padding:1rem}.subnet-info{border-top:1px solid #eee;padding-top:2rem}.subnet-info h3{margin-bottom:1.5rem}.subnet-info .info-item{background:#fff;border:1px solid #eee;border-radius:8px;padding:1rem}.subnet-info .info-item strong{color:var(--primary-color);margin-bottom:.5rem;display:block}.subnet-info .info-item p{color:#666;margin:0;font-size:.9rem;line-height:1.5}@media (width<=768px){.subnet-inputs{flex-direction:column;gap:1rem}.result-grid{grid-template-columns:1fr}.binary-mask{letter-spacing:1px;font-size:1rem}}.routing-container{grid-column:span 2;width:100%}.routing-card{background:#fff;border:1px solid #eee;border-radius:12px;padding:2rem;box-shadow:0 4px 20px #0000000d}.as-concept{text-align:center;background:#f8f9fa;border-radius:12px;margin:2rem 0;padding:2rem}.as-viz{justify-content:center;align-items:center;gap:2rem;margin-bottom:1.5rem;display:flex}.as-box{border:2px dashed var(--osi-color);background:#fff;border-radius:12px;width:180px;padding:1rem}.as-title{color:var(--primary-color);margin-bottom:1rem;font-size:.8rem;font-weight:700;display:block}.internal-nodes{justify-content:center;gap:10px;display:flex}.node-dot{background:#ddd;border-radius:50%;width:10px;height:10px}.bgp-link{background:var(--tcpip-color);color:#fff;border-radius:20px;padding:5px 15px;font-size:.8rem;font-weight:700;position:relative}.bgp-link:before,.bgp-link:after{content:"";background:var(--tcpip-color);width:20px;height:2px;position:absolute;top:50%}.bgp-link:before{left:-20px}.bgp-link:after{right:-20px}.as-desc{color:#555;max-width:800px;margin:0 auto;font-size:.95rem;line-height:1.6}.routing-grid{grid-template-columns:1fr;gap:2rem;margin:3rem 0;display:grid}.algo-comparison{grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1rem;display:grid}.algo-box{border:1px solid #eee;border-radius:12px;padding:1.5rem}.algo-box h4{color:var(--primary-color);margin-top:0}.algo-box ul{color:#666;padding-left:1.2rem;font-size:.9rem}.dv{background:#fff3e0;border-left:5px solid #ff9800}.ls{background:#e3f2fd;border-left:5px solid #2196f3}.pv{background:#f3e5f5;border-left:5px solid #9c27b0}.rip-logic{border-top:1px solid #eee;padding-top:2rem}.rip-steps{flex-direction:column;gap:1rem;margin-top:1.5rem;display:flex}.step{background:#f8f9fa;border-radius:8px;align-items:flex-start;gap:1.5rem;padding:1rem;display:flex}.step-num{background:var(--primary-color);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;font-weight:700;display:flex}.step p{color:#444;margin:0;font-size:.95rem;line-height:1.5}.step.warning{background:#fff3e0;border:1px solid #ffe0b2}.step.warning .step-num{background:#e65100}@media (width<=900px){.arch-viz{flex-direction:column;gap:1rem}.arch-link:before{content:"↓"}.p-grid,.security-grid{grid-template-columns:1fr}}.bridge-container{grid-column:span 2;width:100%}.bridge-card{background:#fff;border:1px solid #eee;border-radius:12px;padding:2rem;box-shadow:0 4px 20px #0000000d}.bridge-topology{background:#f8f9fa;border:1px solid #ddd;border-radius:12px;justify-content:space-around;align-items:center;margin-bottom:2rem;padding:2rem;display:flex}.lan-group{flex-direction:column;align-items:center;gap:10px;display:flex}.lan-label{color:#7f8c8d;font-size:.75rem;font-weight:700}.hosts{gap:10px;display:flex}.host-node{border:2px solid var(--osi-color);background:#fff;border-radius:4px;justify-content:center;align-items:center;width:35px;height:35px;font-weight:700;display:flex}.bridge-node{color:#fff;background:#2c3e50;border-radius:6px;justify-content:center;align-items:center;width:60px;height:40px;font-weight:700;display:flex;position:relative}.bridge-node:before,.bridge-node:after{content:"";background:#ccc;width:20px;height:2px;position:absolute;top:50%}.bridge-node:before{left:-20px}.bridge-node:after{right:-20px}.bridge-controls{background:#f1f8e9;border-radius:8px;justify-content:center;align-items:center;gap:2rem;margin-bottom:2rem;padding:1.5rem;display:flex}.control-item{align-items:center;gap:10px;display:flex}.control-item select{border:1px solid #ddd;border-radius:4px;padding:5px 10px}.bridge-table-wrapper{margin-bottom:3rem;overflow-x:auto}.bridge-log-table{border-collapse:collapse;width:100%;font-size:.9rem}.bridge-log-table th,.bridge-log-table td{text-align:left;border:1px solid #ddd;padding:12px}.bridge-log-table th{color:var(--primary-color);background:#f8f9fa}.empty-msg{text-align:center;color:#999;font-style:italic}.bridge-info{border-top:1px solid #eee;padding-top:2rem}@media (width<=768px){.bridge-topology{flex-direction:column;gap:2rem}.bridge-node:before,.bridge-node:after{display:none}.bridge-controls{flex-direction:column;gap:1rem}}.tcp-container{grid-column:span 2;width:100%}.tcp-card{background:#fff;border:1px solid #eee;border-radius:12px;padding:2rem;box-shadow:0 4px 20px #0000000d}.tcp-format-section,.tcp-handshake-section{margin-bottom:3rem}.section-desc{color:#666;margin-bottom:1.5rem;font-size:.9rem}.tcp-header-grid{border:2px solid var(--primary-color);background:#f8f9fa;margin-bottom:1.5rem}.header-row{border-bottom:1px solid #ddd;display:flex}.header-row:last-child{border-bottom:none}.header-cell{text-align:center;border-right:1px solid #ddd;justify-content:center;align-items:center;padding:.8rem;font-size:.85rem;font-weight:600;display:flex}.header-cell:last-child{border-right:none}.col-16{flex:16}.col-4{flex:4}.col-6{flex:6}.flags{background:#e3f2fd;justify-content:space-around;font-size:.75rem;display:flex}.flags span{padding:0 2px}.options{background:#fffde7;height:50px}.data{background:#f1f8e9;height:80px}.flag-legend ul{grid-template-columns:repeat(3,1fr);gap:.5rem;padding:0;font-size:.85rem;list-style:none;display:grid}.tcp-details-grid{grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.5rem;display:grid}.detail-item{background:#f1f8e9;border:1px solid #c5e1a5;border-radius:8px;padding:1rem}.detail-item strong{color:#33691e;margin-bottom:.5rem;font-size:.95rem;display:block}.detail-item p{color:#555;margin:0;font-size:.85rem;line-height:1.5}.handshake-viz{background:#f8f9fa;border-radius:12px;justify-content:space-between;align-items:center;margin:3rem 0;padding:2rem;display:flex}.handshake-node{flex-direction:column;align-items:center;gap:.5rem;display:flex}.node-icon{font-size:3rem}.state-tag{background:var(--primary-color);color:#fff;border-radius:10px;padding:2px 8px;font-size:.75rem}.handshake-steps{flex-direction:column;flex:1;gap:1.5rem;padding:0 2rem;display:flex}.h-step{height:60px;position:relative}.h-arrow{background:#ccc;width:100%;height:2px;position:absolute;top:50%}.h-arrow:after{content:"";border-top:2px solid #ccc;border-right:2px solid #ccc;width:10px;height:10px;position:absolute;top:-4px}.h-arrow.to-right:after{right:0;transform:rotate(45deg)}.h-arrow.to-left:after{left:0;transform:rotate(-135deg)}.h-info{text-align:center;flex-direction:column;width:100%;display:flex;position:absolute;top:-20px}.msg-type{color:var(--osi-color);font-family:monospace;font-size:.85rem;font-weight:700}.msg-desc{color:#666;font-size:.75rem;font-style:italic}.logic-card{background:#e1f5fe;border-left:4px solid #03a9f4;border-radius:8px;padding:1.2rem}.logic-card h4{color:#01579b;margin-top:0;margin-bottom:.5rem}.logic-card p{color:#0277bd;margin:0;font-size:.9rem;line-height:1.5}@media (width<=768px){.tcp-header-grid{display:block;overflow-x:auto}.header-row{min-width:600px}.handshake-viz{flex-direction:column;gap:2rem}.handshake-steps{width:100%;padding:0}.flag-legend ul{grid-template-columns:1fr 1fr}}.socket-container{grid-column:span 2;width:100%}.socket-card{background:#fff;border:1px solid #eee;border-radius:12px;padding:2rem;box-shadow:0 4px 20px #0000000d}.socket-definition{margin-bottom:3rem}.definition-box{border-left:6px solid var(--primary-color);background:#f8f9fa;border-radius:8px;padding:1.5rem}.socket-formula{color:var(--primary-color);background:#fff;border:2px solid #ddd;max-width:400px;margin:1.5rem 0;font-weight:700}.type-grid{grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:3rem;display:grid}.type-item{border:1px solid #eee;border-radius:12px;padding:1.5rem}.type-item h4{color:var(--primary-color);margin-top:0}.stream{background:#e3f2fd;border-left:5px solid #2196f3}.datagram{background:#fff3e0;border-left:5px solid #ff9800}.flow-viz{background:#f8f9fa;border-radius:12px;justify-content:space-around;gap:4rem;margin-top:2rem;padding:2rem;display:flex}.flow-column{flex-direction:column;flex:1;gap:12px;display:flex}.column-label{text-align:center;color:var(--primary-color);background:#eee;border-radius:4px;margin-bottom:1rem;padding:5px;font-weight:700}.flow-step{background:#fff;border:1px solid #ddd;border-radius:6px;flex-direction:column;padding:12px;font-family:monospace;font-weight:700;display:flex;position:relative}.flow-step span{color:#7f8c8d;margin-top:4px;font-family:sans-serif;font-size:.75rem;font-weight:400}.flow-step.highlight{border-color:var(--osi-color);background:#e3f2fd}.flow-step.empty{background:0 0;border:none;height:40px}.flow-step-arrow{height:30px;color:var(--osi-color);justify-content:center;align-items:center;font-size:.8rem;font-weight:700;display:flex;position:relative}.flow-step-arrow:after{content:"↔";font-size:1.5rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media (width<=768px){.type-grid{grid-template-columns:1fr}.flow-viz{flex-direction:column;gap:2rem}}.dns-container{grid-column:span 2;width:100%}.dns-card{background:#fff;border:1px solid #eee;border-radius:12px;padding:2rem;box-shadow:0 4px 20px #0000000d}.dns-intro{color:#555;text-align:center;margin-bottom:2rem;font-size:1.1rem}.dns-flow-viz{background:#f8f9fa;border-radius:12px;flex-direction:column;align-items:center;gap:1.5rem;margin-bottom:2rem;padding:2rem;display:flex}.dns-step-box{text-align:center;background:#fff;border:1px solid #ddd;border-radius:8px;width:100%;max-width:500px;padding:1.2rem;box-shadow:0 2px 5px #0000000d}.dns-icon{margin-bottom:.5rem;font-size:2rem}.dns-arrow{color:var(--osi-color);padding:10px 0;font-size:.8rem;font-weight:700;position:relative}.dns-arrow:before,.dns-arrow:after{content:"↓";font-size:1.2rem;display:block}.iterative-steps{border-left:3px dashed #ccc;flex-direction:column;gap:1rem;width:100%;max-width:500px;margin-top:1rem;padding-left:1.5rem;display:flex}.i-step{align-items:center;gap:1rem;display:flex}.i-arrow{color:var(--tcpip-color);font-weight:700}.i-server{background:#fff;border:1px solid #eee;border-radius:6px;flex:1;padding:.8rem;font-size:.9rem;font-weight:600}.i-server span{color:#7f8c8d;margin-top:4px;font-size:.75rem;font-style:italic;font-weight:400;display:block}.dns-concepts .concept-grid{grid-template-columns:1fr 1fr;gap:2rem;display:grid}.concept-item{background:#f1f8e9;border:1px solid #c5e1a5;border-radius:12px;padding:1.5rem}.concept-item h4{color:#33691e;margin-top:0}.concept-item ul{color:#555;padding-left:1.2rem;font-size:.9rem}.concept-item li{margin-bottom:.5rem}@media (width<=768px){.dns-concepts .concept-grid{grid-template-columns:1fr}}.email-container{grid-column:span 2;width:100%}.email-card{background:#fff;border:1px solid #eee;border-radius:12px;padding:2rem;box-shadow:0 4px 20px #0000000d}.arch-viz{background:#f8f9fa;border-radius:12px;justify-content:space-around;align-items:center;margin:1.5rem 0;padding:2rem;display:flex}.arch-node{text-align:center;flex-direction:column;align-items:center;gap:.5rem;display:flex}.arch-node .icon{font-size:2rem}.arch-node span{font-size:.8rem;font-weight:700}.arch-node .ua,.arch-node .mta{color:#7f8c8d;font-family:monospace;font-size:.7rem}.arch-link{color:var(--osi-color);padding:0 10px;font-size:.75rem;font-weight:700;position:relative}.arch-link:before{content:"→";font-size:1.2rem;display:block}.p-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem;margin:1.5rem 0;display:grid}.p-item{border:1px solid #eee;border-radius:12px;padding:1.5rem}.p-item h4{color:var(--primary-color);margin-top:0}.p-item p{color:#555;font-size:.85rem;line-height:1.5}.p-item .port{color:#7f8c8d;margin-top:1rem;font-size:.75rem;font-weight:700;display:block}.smtp{background:#e3f2fd;border-left:5px solid #2196f3}.pop3{background:#fff3e0;border-left:5px solid #ff9800}.imap{background:#f3e5f5;border-left:5px solid #9c27b0}.security-grid{grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.5rem;display:grid}.sec-item{background:#f1f8e9;border:1px solid #c5e1a5;border-radius:8px;padding:1rem}.sec-item strong{color:#33691e;margin-bottom:.5rem;display:block}.sec-item p{color:#555;margin:0;font-size:.85rem}@media (width<=900px){.arch-viz{flex-direction:column;gap:1rem}.arch-link:before{content:"↓"}.p-grid,.security-grid{grid-template-columns:1fr}}