@charset "UTF-8";
:root{--bg:#f7f8f6;--paper:#fff;--ink:#1a2e29;--muted:#6c7872;--line:#e1e6e1;--green:#285c48;--lime:#d5edb3;--dark:#142f29;--radius:16px;--sidebar:238px;--l7:#b0a0d8;--l6:#9aaee0;--l5:#89bfca;--l4:#94c7a6;--l3:#d2cf92;--l2:#dfb28c;--l1:#d99e98;font-family:"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none;scroll-behavior:smooth;scroll-padding-top:24px}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button,summary{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #72a15b;outline-offset:4px}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}h1,h2,h3,h4,p{margin:0}button{border:0}input,select{min-width:0}input{width:100%}input,select{background:#fff;border:1px solid #cfd8cf;padding:12px 14px;border-radius:8px;color:var(--ink)}input:hover,select:hover{border-color:#7f9a87}label{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:600}select{max-width:100%}[hidden]{display:none!important}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}.skip-link{position:fixed;top:-70px;left:20px;z-index:20;padding:14px;background:var(--dark);color:#fff}.skip-link:focus{top:10px}.mono,.mini-label,.eyebrow,.section-tag,.sidebar-caption,.brand-dot,.strip-number,.visual-top,.stack-label,.packet-path,.concept-tag,.simulation-label,.lab-watermark,.terminal,table td:first-child{font-family:Consolas,"Courier New",monospace}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);padding:36px 22px 22px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:10}.brand{display:flex;align-items:center;gap:10px;font-size:28px;letter-spacing:-1.5px;font-weight:750;white-space:nowrap}.brand-light{font-weight:400}.brand-dot{color:#6a974f}.brand-symbol{display:grid;place-items:center;background:var(--dark);color:#d5edb3;width:37px;height:40px;border-radius:9px}.brand-symbol svg{width:25px;height:25px}.sidebar-caption{font-size:9px;letter-spacing:1.3px;color:#86918a;margin:14px 0 47px 1px}.sidebar nav{display:flex;flex-direction:column;gap:7px}.nav-item{display:flex;align-items:center;gap:12px;border-radius:9px;padding:13px 12px;font-size:13px;color:#748078;transition:background .2s,color .2s}.nav-item svg{width:18px;height:18px}.nav-item:hover{background:#f2f5ee;color:var(--ink)}.nav-item.active{background:#edf3e8;color:#355b3d;font-weight:600}.nav-arrow,.nav-count{margin-left:auto;font-size:14px}.nav-count{background:#dbe7d0;padding:1px 5px;border-radius:4px;font-size:10px}.new-dot{width:6px;height:6px;background:#7eac5d;border-radius:50%;margin-left:auto}.progress-box{border-top:1px solid var(--line);margin:34px 10px 0;padding-top:25px}.progress-top{display:flex;justify-content:space-between;font-size:10px;font-weight:600}.progress-top span:last-child{color:#739356}.progress-track{height:4px;background:#eaf0e4;border-radius:5px;overflow:hidden;margin:11px 0}#learning-progress{height:100%;background:#88ad62;width:0;transition:width .4s}.progress-box p{color:#879087;font-size:10px}.sidebar-bottom{margin-top:auto;font-size:10px;color:#7b877e;line-height:1.7;padding:25px 5px 0}.status-dot{display:inline-block;vertical-align:middle;width:6px;height:6px;border-radius:50%;background:#79a359;margin-right:7px}.version{display:block;font-size:8px;letter-spacing:.8px;margin-top:12px;color:#9aa29a}
main{margin-left:var(--sidebar);padding:0 48px;max-width:1800px}.topbar{height:88px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#89928b}.topbar strong{font-weight:500;color:#546358}.breadcrumb-slash{margin:0 12px;color:#bac2b9}.topbar-link{display:flex;align-items:center;color:#5a6e5d;font-size:11px;gap:3px}.topbar-link svg{width:15px;margin-left:13px}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:45px;padding:63px 0 50px;align-items:center}.eyebrow{font-size:10px;font-weight:600;letter-spacing:1.6px;color:#79906c;margin-bottom:17px;line-height:1.6}.eyebrow>span{display:inline-block;width:6px;height:6px;margin-right:8px;background:#85a764;border-radius:2px}h1{font-size:clamp(42px,4.55vw,76px);line-height:1.07;letter-spacing:-3.5px;font-weight:650;max-width:650px}.highlight{position:relative;display:inline-block;z-index:0}.highlight::after{content:"";position:absolute;background:#d3e8b7;left:-3px;right:-8px;height:25%;bottom:3px;z-index:-1;transform:rotate(-2deg)}.hero-description{max-width:410px;font-size:14px;color:#7b857d;line-height:1.85;margin-top:24px}.hero-actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:29px}.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:13px 18px;border-radius:7px;min-height:44px;font-size:11px;font-weight:600;transition:background .2s,transform .2s;white-space:nowrap;border:1px solid transparent}.button:hover{transform:translateY(-1px)}.button svg{width:17px;height:17px}.primary{background:var(--dark);color:#fff}.primary:hover{background:#285c48}.secondary{background:#fff;border-color:var(--line)}.secondary:hover{background:#f0f4eb}.text-link{background:none;padding:0;font-size:11px;font-weight:600;color:#64775d}.text-link:hover{text-decoration:underline}.hero-meta{display:flex;gap:15px;flex-wrap:wrap;margin-top:27px;color:#82907e;font-size:9px}.tiny-check{color:#5e8352;margin-right:3px}.hero-visual{background:var(--dark);border-radius:18px;padding:22px 28px 20px;color:#d4e2d3;position:relative;overflow:hidden;box-shadow:0 12px 30px #18392c0a}.hero-visual::before{content:"";background-image:radial-gradient(#6c85733b .8px,transparent .8px);background-size:13px 13px;position:absolute;inset:0;pointer-events:none}.visual-top{position:relative;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;padding-bottom:20px;border-bottom:1px solid #c6d5be1c;color:#a2b7a2}.visual-top .mono{font-size:8px;color:#a5b89e;letter-spacing:0}.stack-label{position:relative;display:flex;justify-content:space-between;margin:19px 15px 14px;color:#819e8b;font-size:8px;letter-spacing:1px}.stack-label span{color:#c6e299}.hero-stack{position:relative;display:flex;flex-direction:column;gap:6px;padding:0 15px}.hero-layer{display:flex;align-items:center;gap:12px;width:100%;border:1px solid #dbe7d12e;background:#244336;color:#e9efde;border-radius:5px;padding:9px 12px;text-align:left;transition:transform .2s,background .2s}.hero-layer:hover{transform:translateX(4px);background:#355342}.hero-layer .layer-number{color:var(--layer-color);border-right:1px solid #dbe7d129;padding-right:13px;font-size:12px;font-family:Consolas,monospace}.hero-layer strong{font-size:11px;font-weight:500}.hero-layer>span:last-child{margin-left:auto;color:#91a996;font-size:8px;font-family:Consolas,monospace}.hero-stack::after{content:"";position:absolute;right:2px;top:6px;height:8px;width:4px;border-radius:2px;background:#c4ec8b;box-shadow:0 0 10px #bfe78b;animation:packet-travel 7s ease-in-out infinite}.visual-bottom{position:relative;display:flex;gap:10px;align-items:center;margin-top:20px;border-top:1px solid #c6d5be1c;padding-top:18px;font-size:9px;color:#a8baa4}.visual-plus{margin-left:auto;font-size:18px;color:#7f9e7f}.signal-bars{display:flex;align-items:flex-end;gap:2px;height:12px}.signal-bars i{width:3px;background:#b2d989;height:4px}.signal-bars i:nth-child(2){height:7px}.signal-bars i:nth-child(3){height:10px}.signal-bars i:nth-child(4){height:13px}.orbit-label{position:absolute;right:4px;top:53%;font-family:monospace;font-size:8px;writing-mode:vertical-lr;color:#5c7c66;letter-spacing:3px}@keyframes packet-travel{0%,5%{top:6px;opacity:0}10%{opacity:1}90%{top:94%;opacity:1}100%{top:94%;opacity:0}}
.learning-strip{display:grid;grid-template-columns:repeat(3,1fr);padding:23px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);gap:25px}.learning-strip>div{display:flex;align-items:center;gap:13px;border-right:1px solid var(--line);padding-right:20px}.learning-strip>div:last-child{border:0}.strip-icon{color:#718767;display:grid;place-items:center;width:34px;height:35px;background:#edf2e7;border-radius:8px}.strip-icon svg{width:19px}.learning-strip strong{display:block;font-size:11px;font-weight:600;margin-bottom:4px}.learning-strip p>span{font-size:10px;color:#8a9388}.strip-number{color:#b7c0b2;font-size:10px;margin-left:auto}.content-section{padding-top:64px}.section-anchor{scroll-margin-top:25px}.section-heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:27px}.section-heading .eyebrow{margin-bottom:11px;font-size:9px}.section-heading h2{font-size:27px;line-height:1.25;font-weight:600;letter-spacing:-1px}.section-heading p:not(.eyebrow){margin-top:10px;font-size:12px;color:#84907f;line-height:1.7}.section-tag{font-size:8px;color:#8b9785;letter-spacing:1px;white-space:nowrap;padding-bottom:4px}.section-tag svg{width:12px;height:12px;vertical-align:middle;margin-right:3px}.green-tag{color:#627e4b}.explorer{display:grid;grid-template-columns:310px 1fr;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.layer-list{padding:17px;background:#f0f3ed;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:7px}.layer-button{display:flex;align-items:center;gap:13px;text-align:left;width:100%;background:transparent;border:1px solid transparent;padding:12px;border-radius:8px;transition:background .2s}.layer-button:hover{background:#fff8}.layer-button[aria-selected="true"]{background:#fff;border-color:#dce3d5;box-shadow:0 2px 4px #30472405}.layer-badge{width:30px;height:30px;background:color-mix(in srgb,var(--layer-color),white 68%);color:#485247;border:1px solid color-mix(in srgb,var(--layer-color),white 30%);display:grid;place-items:center;border-radius:7px;font-size:11px;font-family:Consolas,monospace;flex-shrink:0}.layer-button strong{display:block;font-size:12px;font-weight:600}.layer-button small{display:block;font-size:9px;color:#8d9688;margin-top:3px}.layer-chevron{margin-left:auto;font-size:14px;color:#bac4b4}.layer-button[aria-selected="true"] .layer-chevron{color:#4d6944}.layer-detail{padding:32px 34px;min-height:460px}.layer-detail-top{display:flex;justify-content:space-between;gap:10px}.detail-badge{display:inline-block;font-family:Consolas,monospace;color:#66715f;background:#f0f3eb;border:1px solid #e5e9e0;border-radius:5px;padding:5px 8px;font-size:9px;letter-spacing:.7px}.layer-detail h3{font-size:29px;letter-spacing:-1px;margin-top:17px;font-weight:600}.layer-detail .english-name{margin-top:5px;color:#95a08e;font-family:Consolas,monospace;font-size:10px}.detail-tabs{display:flex;gap:20px;border-bottom:1px solid var(--line);margin:24px 0 18px}.detail-tabs button{padding:0 0 11px;background:none;border-bottom:2px solid transparent;font-size:10px;color:#8d9688}.detail-tabs button.selected{color:#385633;border-color:#5a7b44;font-weight:600}.detail-copy{font-size:12px;line-height:1.9;color:#75816e}.function-list{list-style:none;padding:0;margin:16px 0 20px;display:flex;flex-direction:column;gap:8px}.function-list li{font-size:11px;line-height:1.6;display:flex;align-items:baseline;gap:10px;color:#51634c}.function-list li::before{content:"✓";color:#789a5e;font-size:11px}.protocol-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px}.protocol-chips span{border:1px solid #e2e8dd;border-radius:5px;padding:5px 9px;font-size:9px;font-family:Consolas,monospace;color:#7b886e;background:#fafbf8}.example-box{background:#f2f5ed;border-left:2px solid #93ae76;padding:15px 17px;font-size:11px;line-height:1.8;color:#5f7255;margin-top:16px}.detail-neighbors{margin-top:22px;padding-top:15px;border-top:1px solid #eaf0e4;color:#87927e;font-size:10px;line-height:1.7}.note{display:flex;gap:12px;align-items:flex-start;margin-top:17px;padding:15px 17px;border-radius:8px;background:#edf1e8;color:#7b876f;font-size:10px;line-height:1.8}.note strong{font-weight:600;color:#5b7050}.note-icon{display:grid;place-items:center;width:16px;height:16px;flex-shrink:0;border:1px solid #99ac8a;border-radius:50%;font-family:Georgia,serif;font-size:10px;margin-top:2px}
.journey-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.journey-toolbar{padding:18px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px}.segmented{display:inline-flex;gap:3px;padding:4px;border-radius:7px;background:#f0f3ed}.segmented button{font-size:10px;color:#7c8874;background:none;padding:8px 12px;border-radius:5px}.segmented button.selected{background:#fff;color:#3a5233;box-shadow:0 1px 4px #243d1d0d}.simulation-label{font-size:8px;color:#93a08b;letter-spacing:.7px}.journey-layout{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:25px;padding:30px}.device-heading{display:flex;align-items:center;gap:10px;margin-bottom:20px}.device-heading svg{color:#768b69;width:26px;height:26px}.device-heading strong{display:block;font-size:12px;font-weight:600}.device-heading span{display:block;font-size:9px;color:#96a08c;margin-top:3px}.mini-stack{display:flex;flex-direction:column;gap:5px}.mini-layer{padding:9px 10px;background:#f6f7f3;border:1px solid #e9ede4;border-radius:5px;display:flex;align-items:center;gap:9px;font-size:9px;text-align:left;transition:background .25s,border .25s}.mini-layer>span{font-family:Consolas,monospace;color:#8b9880}.mini-layer.current{border-color:#8cac70;background:#edf5e2;font-weight:600}.mini-layer.complete{color:#8c987f}.mini-layer.current::after{content:"●";color:#89a96c;margin-left:auto;font-size:6px}.journey-center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:5px 0}.packet-path{font-size:7px;color:#92a185;letter-spacing:1px}.packet-path>span{margin:0 10px}.packet-icon{width:52px;height:52px;border:1px solid #dfe8d4;background:#f1f6e9;border-radius:14px;display:grid;place-items:center;margin:18px 0;color:#78925e}.packet-icon svg{width:28px;height:28px}.journey-center .eyebrow{font-size:8px;margin-bottom:7px;letter-spacing:1px}.journey-center h3{font-size:17px;letter-spacing:-.4px;margin-bottom:10px}.journey-center p{font-size:10px;color:#7f8d74;line-height:1.9;min-height:75px}.packet-envelope{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;margin-top:15px;min-height:22px;align-items:center}.packet-envelope span{padding:5px 7px;background:#edf2e7;color:#6e815d;font-size:8px;font-family:monospace;border:1px solid #dde6d2;border-radius:4px}.journey-controls{border-top:1px solid var(--line);padding:18px 24px;display:flex;align-items:center;gap:10px}.icon-button{border:1px solid var(--line);border-radius:7px;background:#fff;width:43px;height:43px;font-size:20px;flex-shrink:0}.icon-button:hover{background:#f0f4eb}.journey-progress{height:4px;flex:1;background:#e8eddf;border-radius:5px;margin-left:15px;overflow:hidden}#journey-progress{height:100%;background:#8eab70;transition:width .25s}.journey-footnote{color:#9aa38f;padding:0 24px 18px;font-size:9px;line-height:1.7}
.lab-tabs{display:flex;gap:5px;overflow-x:auto;border-bottom:1px solid var(--line);padding-bottom:0;scrollbar-width:thin}.lab-tabs button{padding:14px 14px 16px;white-space:nowrap;font-size:11px;background:transparent;border-bottom:2px solid transparent;color:#86917c}.lab-tabs button.selected{border-color:#547847;color:#35562d;font-weight:600}.lab-panel{padding:29px;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius) var(--radius)}.lab-intro{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:24px}.mini-label{font-size:8px;letter-spacing:1px;color:#8b9a7c}.lab-intro h3{font-size:23px;font-weight:600;letter-spacing:-.8px;margin:8px 0}.lab-intro p{font-size:11px;color:#87927c;line-height:1.8}.lab-watermark{font-size:44px;letter-spacing:-3px;color:#e7eddf}.calculator-form{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}.calculator-form label:first-child{flex:1;min-width:170px}.calculator-form input,.calculator-form select{font-size:13px;font-family:Consolas,monospace;height:45px}.calculator-form label{color:#6a7a5f}.calculator-form label:nth-child(2){max-width:130px}.calculator-form label:nth-child(2) input{width:110px}.form-error{font-size:11px;color:#a54738;margin-top:9px;min-height:12px}.result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#e4e9de;border:1px solid #e4e9de;border-radius:8px;overflow:hidden;margin:14px 0 22px}.result-cell{background:#fafbf8;padding:17px}.result-cell>span{display:block;color:#92a084;font-size:9px;margin-bottom:9px}.result-cell>strong{font-family:Consolas,monospace;font-size:13px;overflow-wrap:anywhere;font-weight:500;line-height:1.65}.result-cell small{font-size:9px;color:#94a186;display:block;margin-top:5px}.binary-box{padding:18px;border:1px solid var(--line);border-radius:8px}.binary-legend{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:9px}.binary-legend>strong{font-weight:600}.binary-legend>span{color:#8e9b80}.net-dot,.host-dot,.vlan20-dot{display:inline-block;width:7px;height:7px;border-radius:2px;background:#85a67a;margin-right:4px;vertical-align:middle}.host-dot{background:#dfca90;margin-left:10px}.vlan20-dot{background:#a59bc3}.binary-row{display:flex;gap:10px;margin:16px 0;flex-wrap:wrap}.binary-octet{display:flex;gap:3px}.bit{font-family:Consolas,monospace;font-size:11px;display:grid;place-items:center;width:19px;height:25px;background:#e8f1df;color:#648352;border-radius:3px}.bit.host{background:#f7efda;color:#988149}.binary-box>p{font-size:10px;color:#8b987c;line-height:1.7}.compare-row{margin-top:22px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.compare-row label{font-size:10px;color:#7c8d6d}.compare-row input{width:180px;font-size:11px;font-family:Consolas,monospace}.compare-row strong{font-size:10px;font-weight:500}.compare-row .good{color:#5b854a}.compare-row .bad{color:#a46e4c}.learn-more{border-top:1px solid var(--line);margin-top:24px;padding-top:19px;font-size:11px;color:#6c7f5c;line-height:1.8}.learn-more summary{font-weight:600}.learn-more p{margin:14px 0}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:10px;text-align:left}th{font-size:9px;font-weight:500;color:#8e9c82;background:#f7f9f3;padding:11px 13px;white-space:nowrap}td{padding:12px 13px;border-top:1px solid #e9eee2;color:#6a7d5a;line-height:1.6}.learn-more table{margin-top:14px}.ipv6-anatomy{background:#f1f5ea;border:1px solid #e3ead9;border-radius:8px;padding:20px;font-size:11px;color:#748960;line-height:1.9;overflow-wrap:anywhere}.ipv6-anatomy strong{font-family:Consolas,monospace;color:#506c40;font-weight:500;letter-spacing:1px}.ipv6-anatomy p{font-size:10px;margin-top:7px}.concept-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-top:25px}.concept-grid article{border-right:1px solid var(--line);padding-right:20px}.concept-grid article:last-child{border:0;padding-right:0}.concept-tag{font-size:8px;color:#879c75;letter-spacing:1px}.concept-grid h4{font-size:13px;font-weight:600;margin:8px 0}.concept-grid p{font-size:10px;line-height:1.85;color:#87967a}.dora-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.dora-step{background:#f5f7f0;border:1px solid #e7ecdf;border-radius:8px;text-align:left;padding:15px 13px;color:#8e9d80}.dora-step strong{font-family:Consolas,monospace;display:inline-flex;margin-right:7px;font-size:20px;font-weight:500}.dora-step span{font-size:10px}.dora-step small{font-size:8px;display:block;margin-top:5px}.dora-step.selected{background:#eaf2df;border-color:#96b77b;color:#486e32}.dora-network{display:flex;align-items:center;gap:22px;padding:35px 15px}.network-node{display:flex;align-items:center;flex-direction:column;gap:8px;min-width:140px}.network-node svg{width:38px;height:38px;color:#7d9665}.network-node strong{font-size:11px;font-weight:600}.network-node span{font-size:9px;font-family:Consolas,monospace;color:#8d9b7e;text-align:center}.dora-wire{flex:1;display:flex;flex-direction:column;align-items:center;gap:14px;font-size:9px;color:#7c945f;text-align:center;min-width:0}.dora-wire>span:first-child{font-family:Consolas,monospace;font-weight:600;letter-spacing:.5px}.dora-wire>span:last-child{font-size:8px;overflow-wrap:anywhere}.wire-line{width:100%;height:2px;background:#cadcba;position:relative}.wire-line::after{content:"";width:8px;height:8px;background:#8eac70;position:absolute;right:0;top:-3px;border-radius:50%}.dora-explanation{background:#f6f8f1;padding:18px 20px;border-radius:8px;font-size:12px;line-height:1.8;color:#6d825a;min-height:120px}.dora-explanation h4{font-size:14px;color:#48663b;margin-bottom:6px}.dora-explanation code{font-family:Consolas,monospace;color:#496b39}.control-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px}.control-row>span{font-size:9px;color:#8fa17b;margin-left:auto}.inline-note{font-size:9px;background:transparent;border:1px solid var(--line)}.vlan-legend{display:flex;gap:25px;font-size:10px;color:#8b9b7d;margin-bottom:15px}.switch-chassis{background:#253e31;border:1px solid #1f392b;border-radius:10px;padding:18px 20px;color:#b9c9ae}.switch-top{display:flex;gap:10px;align-items:center;border-bottom:1px solid #b8c9a71c;padding-bottom:14px;margin-bottom:18px;font-size:10px}.switch-top svg{width:16px;height:16px}.switch-top strong{font-weight:500;letter-spacing:1px;font-family:Consolas,monospace}.switch-top>span:not(.status-dot){font-size:7px;color:#839d72;margin-left:auto;letter-spacing:1px}.switch-top .status-dot{margin-left:8px}.switch-ports{display:grid;grid-template-columns:repeat(6,1fr);gap:13px}.switch-port{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:10px 6px;border-radius:5px;border:1px solid transparent;transition:background .3s}.switch-port.lit{background:#729f4640;border-color:#8bbd5c}.rj45{position:relative;background:#122b1b;border:2px solid #829b6f;border-radius:3px;width:42px;height:30px;display:grid;place-items:center;font-family:Consolas,monospace;font-size:13px;color:#aacb8d}.switch-port.vlan20 .rj45{border-color:#afa3ce;color:#c7bce0}.rj45::before{content:"";height:4px;width:24px;background:repeating-linear-gradient(90deg,#a8b67a 0 2px,transparent 2px 4px);position:absolute;bottom:3px}.switch-port strong{font-size:9px;font-weight:500}.switch-port small{font-size:7px;color:#9eb18f;font-family:Consolas,monospace}.switch-port select{padding:5px 4px;background:#314d3b;color:#c8dab8;font-size:8px;border-color:#50674a;border-radius:4px}.switch-controls{display:flex;gap:13px;align-items:flex-end;margin-top:21px;flex-wrap:wrap}.switch-controls label{flex:1;font-size:10px;color:#8b9c79;min-width:100px}.switch-controls select{font-size:11px}.switch-results{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}.switch-results h4{font-size:11px;font-weight:600;margin-bottom:12px}.switch-results h4>span{float:right;font-size:9px;color:#9caa8c;font-weight:400}.terminal{background:#f2f5ed;border:1px solid #e4ebda;border-radius:7px;padding:14px;color:#748961;font-size:10px;line-height:1.9;min-height:115px;white-space:pre-wrap;overflow-wrap:anywhere}.switch-results td{font-size:9px;padding:8px 10px}.switch-results th{font-size:8px;padding:8px 10px}.protocol-picker{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:22px}.protocol-picker button{border:1px solid var(--line);padding:9px 14px;background:#fafbf8;border-radius:6px;color:#889a75;font-family:Consolas,monospace;font-size:10px}.protocol-picker button.selected{background:#eaf2df;border-color:#a2ba8c;color:#50733b}.protocol-detail{padding:25px;background:#f5f8ef;border-radius:10px}.protocol-detail h4{font-size:19px;font-weight:600;margin-bottom:13px;letter-spacing:-.5px}.protocol-detail p{font-size:12px;line-height:1.9;color:#7d916a}.protocol-detail .example-box{border-left-color:#a9bd94;background:#eaf1e0}.troubleshooting{padding-left:20px;line-height:2.1;margin-bottom:0}.quiz-card{border:1px solid var(--line);background:#fff;border-radius:var(--radius);padding:30px;min-height:370px}.quiz-top{display:flex;justify-content:space-between;font-size:9px;color:#8f9f7d;font-family:Consolas,monospace;letter-spacing:1px}.quiz-meter{height:3px;background:#e9efdf;border-radius:5px;margin:15px 0 27px;overflow:hidden}.quiz-meter>div{height:100%;background:#9cb97f}.quiz-card h3{font-size:22px;font-weight:600;letter-spacing:-.5px;margin-bottom:23px;line-height:1.45}.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quiz-option{border:1px solid var(--line);background:#fff;text-align:left;border-radius:7px;padding:15px;font-size:11px;display:flex;align-items:center;gap:14px;line-height:1.6;min-height:57px}.quiz-option:hover:not(:disabled){border-color:#94b078;background:#f7faf3}.quiz-option>span{font-family:Consolas,monospace;display:grid;place-items:center;width:24px;height:24px;border:1px solid #e3e9db;border-radius:5px;color:#94a181;font-size:9px;flex-shrink:0}.quiz-option.correct{background:#eff7e6;border-color:#8cb466;color:#567d3a;opacity:1}.quiz-option.wrong{background:#fcf1eb;border-color:#d2a48c;color:#a16c50;opacity:1}.quiz-feedback{font-size:11px;line-height:1.8;color:#7c8f68;padding:17px 0 0}.quiz-feedback strong{color:#4d7035}.quiz-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:22px;gap:15px}.quiz-bottom small{font-size:9px;color:#8b9e77}.quiz-result{text-align:center;padding:17px 0}.quiz-result .score{font-size:67px;font-weight:600;letter-spacing:-4px;line-height:1.3;margin:13px 0;color:#587a3c}.quiz-result>p{font-size:12px;color:#8d9d7c;line-height:1.9;max-width:500px;margin:0 auto 20px}.quiz-result h3{margin-bottom:10px}.cheat-sheet{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}.cheat-table th{font-size:9px;padding:16px 18px;background:#edf2e6}.cheat-table td{padding:13px 18px;font-size:10px}.cheat-table td:first-child{white-space:nowrap;color:#50673f}.cheat-table .cheat-number{display:inline-block;width:19px;font-size:9px;color:#8b9e75;margin-right:7px}.cheat-bottom{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);padding:22px 25px;gap:35px}.cheat-bottom h4{font-size:11px;margin-bottom:9px;font-weight:600}.cheat-bottom p{font-size:10px;color:#8a9b75;line-height:2}.cheat-bottom b{font-weight:600;color:#6d8556}.memory-note{text-align:center;padding:26px 20px;border:1px dashed #d9e2cd;border-radius:9px;margin-top:18px;background:#f2f6eb}.memory-note>span{font-family:Consolas,monospace;font-size:8px;letter-spacing:1px;color:#96a581}.memory-note p{font-size:16px;color:#7d9366;margin:12px 0 7px;line-height:1.6}.memory-note strong{color:#4d7136;font-weight:600}.memory-note small{font-size:8px;color:#9aa98a;line-height:1.8}footer{margin-top:60px;border-top:1px solid var(--line);padding:26px 0 30px;display:flex;align-items:flex-start;gap:25px;flex-wrap:wrap}.footer-brand{font-size:22px;gap:0}.footer-brand .brand-light{margin-left:0}footer>p{font-size:9px;color:#95a285;margin-top:8px}.source-details{font-size:9px;margin:8px 0 0 auto;max-width:650px;color:#9aa789}.source-details summary{text-align:right}.source-details p{margin-top:15px;line-height:1.9}.source-details a{text-decoration:underline}.source-details button{font-size:9px;margin-top:10px}.noscript{position:fixed;bottom:10px;left:10px;right:10px;background:#fff1d1;padding:15px;z-index:30}
@media(min-width:1600px){main{padding:0 65px}.hero{gap:75px;min-height:550px}.hero-description{font-size:16px;max-width:460px}.hero-layer{padding:12px}.hero-visual{padding:28px 35px}.hero-meta{font-size:11px}.button{font-size:12px}.layer-list{padding:23px}.layer-button{padding:13px}.content-section{padding-top:75px}}
@media(max-width:1250px){:root{--sidebar:205px}main{padding:0 30px}.sidebar{padding:30px 16px 20px}.nav-item{padding:12px 8px;font-size:12px;gap:9px}.hero{gap:25px;padding-top:46px}.hero-actions{gap:16px}.hero-visual{padding:20px}.hero-stack{padding:0 6px}.hero-layer{padding:8px 10px}.hero-layer>span:last-child{font-size:7px}.hero-meta{gap:9px;font-size:8px}.hero-description{font-size:12px}.explorer{grid-template-columns:265px 1fr}.layer-detail{padding:27px}.journey-layout{padding:25px;gap:18px}.bit{width:15px}.binary-row{gap:8px}.binary-octet{gap:2px}.section-tag{display:none}.switch-ports{gap:5px}.lab-tabs button{font-size:10px;padding:14px 10px}.learning-strip{gap:15px}.learning-strip>div{padding-right:10px;gap:9px}.strip-number{display:none}}
@media(max-width:1000px){:root{--sidebar:78px}.sidebar{padding:25px 12px;align-items:center}.sidebar .brand>span:last-child,.sidebar-caption,.sidebar .nav-item .nav-count,.sidebar .nav-arrow,.progress-box,.sidebar-bottom,.new-dot{display:none}.sidebar nav{margin-top:45px;gap:14px;width:100%}.nav-item{font-size:0;justify-content:center;gap:0;padding:13px 0}.nav-item svg{width:21px;height:21px}.sidebar .brand{gap:0}.hero{gap:24px}.hero-visual{padding:20px}.hero-actions .button{font-size:10px;padding:12px}.hero-actions .text-link{font-size:10px}h1{font-size:52px;letter-spacing:-2.8px}.explorer{grid-template-columns:240px 1fr}.layer-detail{padding:24px}.layer-detail h3{font-size:26px}.layer-list{padding:12px}.journey-layout{gap:14px}.simulation-label{display:none}.section-heading h2{font-size:25px}.switch-results{grid-template-columns:1fr}.switch-controls label{min-width:90px}.lab-watermark{font-size:36px}.binary-row{gap:12px}.bit{width:18px}.lab-panel{padding:24px}.topbar{height:75px}}
@media(max-width:760px){:root{--sidebar:0px}.sidebar{position:sticky;top:0;width:100%;height:62px;flex-direction:row;padding:0 20px;justify-content:space-between;border-right:0;border-bottom:1px solid var(--line)}.sidebar .brand>span:last-child{display:inline;font-size:23px}.brand-symbol{width:30px;height:33px}.brand-symbol svg{width:21px}.sidebar .brand{gap:7px}.sidebar nav{margin:0;flex-direction:row;width:auto;gap:6px}.nav-item{padding:9px;width:34px;border-radius:6px}.nav-item svg{width:18px;height:18px}.sidebar .nav-item:first-child,.sidebar .nav-item:last-child{display:none}main{margin:0;padding:0 23px}.topbar{height:58px;font-size:9px}.topbar-link{font-size:9px}.topbar-link svg{margin-left:3px}.hero{padding:35px 0 30px;grid-template-columns:1fr;gap:30px}.hero-copy{max-width:550px}h1{font-size:58px;letter-spacing:-3.2px}.eyebrow{font-size:9px}.hero-description{font-size:13px;margin-top:20px;max-width:460px}.hero-actions{gap:23px;margin-top:23px}.hero-actions .button{font-size:11px;padding:13px 17px}.hero-meta{font-size:9px;gap:18px;margin-top:21px}.hero-visual{padding:22px 25px;max-width:550px;width:100%;justify-self:center}.hero-layer{padding:9px 13px}.hero-layer strong{font-size:12px}.hero-layer>span:last-child{font-size:9px}.visual-top{font-size:8px}.learning-strip{grid-template-columns:1fr;padding:0;gap:0}.learning-strip>div{padding:15px 0;border:0;border-bottom:1px solid var(--line)}.learning-strip>div:last-child{border:0}.learning-strip strong{font-size:12px}.learning-strip p>span{font-size:10px}.strip-number{display:block}.strip-icon{width:32px;height:32px}.content-section{padding-top:43px}.section-anchor{scroll-margin-top:80px}.section-heading{margin-bottom:20px}.section-heading h2{font-size:25px;letter-spacing:-.8px}.section-heading p:not(.eyebrow){font-size:11px}.explorer{grid-template-columns:1fr}.layer-list{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:12px;gap:7px}.layer-button{width:auto;min-width:48px;padding:8px;justify-content:center}.layer-button>span:nth-child(2),.layer-chevron{display:none}.layer-button .layer-badge{border:0;background:transparent;width:25px;height:25px;font-size:14px}.layer-button[aria-selected="true"]{border-color:#aec696}.layer-detail{padding:23px;min-height:385px}.layer-detail h3{font-size:28px}.detail-copy{font-size:12px}.function-list li{font-size:11px}.note{font-size:10px;padding:14px}.journey-toolbar{padding:14px}.journey-layout{grid-template-columns:1fr 1fr;padding:20px;gap:17px}.journey-center{grid-row:1;grid-column:1/-1;min-height:245px;padding:0 5px}.journey-center p{min-height:0;font-size:11px;max-width:400px}.packet-icon{margin:13px 0;width:44px;height:44px}.journey-center h3{font-size:19px}.packet-path{font-size:8px}.device-heading{margin-bottom:12px}.device-heading strong{font-size:11px}.device-heading span{font-size:8px}.mini-layer{font-size:9px;padding:8px}.journey-controls{padding:15px;gap:8px;flex-wrap:wrap}.journey-controls .button{font-size:10px;padding:10px 12px}.journey-progress{flex-basis:100%;margin:7px 0 0;height:3px}.journey-footnote{font-size:9px;padding:0 15px 15px}.lab-tabs{gap:0}.lab-tabs button{padding:13px 12px}.lab-panel{padding:20px 16px}.lab-intro h3{font-size:23px}.lab-intro p{font-size:11px}.lab-watermark{display:none}.calculator-form{gap:12px}.calculator-form label:first-child{min-width:160px}.calculator-form .button{width:100%}.calculator-form label:nth-child(2){max-width:100px}.calculator-form input{font-size:12px}.result-grid{grid-template-columns:1fr 1fr}.result-cell{padding:14px}.result-cell>strong{font-size:12px}.binary-box{padding:14px}.binary-legend{flex-wrap:wrap}.binary-row{gap:9px}.bit{width:21px;height:27px}.compare-row{gap:10px}.compare-row label{width:100%;font-size:11px}.compare-row input{flex:1}.compare-row strong{width:100%}.concept-grid{grid-template-columns:1fr;gap:18px}.concept-grid article{border-right:0;border-bottom:1px solid var(--line);padding:0 0 17px}.concept-grid p{font-size:11px}.concept-grid h4{font-size:14px}.dora-steps{gap:5px}.dora-step{padding:10px 8px}.dora-step strong{font-size:17px}.dora-step span{font-size:8px}.dora-step small{font-size:7px}.dora-network{gap:8px;padding:28px 0}.network-node{min-width:82px;max-width:105px}.network-node span{font-size:8px}.network-node strong{font-size:10px}.dora-wire{gap:10px;font-size:8px}.dora-wire>span:last-child{font-size:7px}.dora-explanation{font-size:11px;padding:16px}.dora-explanation h4{font-size:13px}.control-row>span{width:100%;margin:3px 0}.switch-chassis{padding:14px 10px}.switch-top>span:not(.status-dot){font-size:6px;letter-spacing:0}.switch-ports{grid-template-columns:repeat(3,1fr);gap:8px}.switch-port{padding:12px 5px}.switch-port small{font-size:8px}.switch-port strong{font-size:10px}.switch-port select{font-size:9px;padding:6px 9px}.switch-controls{gap:10px}.switch-controls label{min-width:80px}.switch-controls .primary{flex:1}.switch-results h4{font-size:12px}.terminal{font-size:10px}.protocol-detail{padding:20px}.protocol-detail p{font-size:11px}.quiz-card{padding:23px}.quiz-card h3{font-size:20px}.quiz-options{grid-template-columns:1fr}.quiz-option{font-size:11px}.quiz-feedback{font-size:11px}.quiz-bottom{flex-wrap:wrap}.cheat-bottom{grid-template-columns:1fr;gap:22px;padding:20px}.section-heading:has(#print-button){flex-wrap:wrap}.cheat-table th,.cheat-table td{padding:11px 12px}.memory-note p{font-size:14px}.memory-note small{font-size:8px}.source-details{width:100%;margin:0}.source-details summary{text-align:left}footer{gap:12px}footer>p{margin-top:5px}.footer-brand{font-size:20px}}
@media(max-width:380px){main{padding:0 16px}.sidebar{padding:0 14px}.sidebar nav{gap:3px}.nav-item{width:30px}.sidebar .brand>span:last-child{font-size:20px}h1{font-size:51px}.hero-meta{gap:10px;font-size:8px}.bit{width:18px}.hero-layer>span:last-child{font-size:8px}.hero-visual{padding:20px}.hero-actions{gap:15px}.quiz-card{padding:18px}.lab-panel{padding:18px 13px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{@page{size:A4 landscape;margin:15mm}:root{--ink:#000;--muted:#333;--bg:#fff}body,main{background:#fff!important}main{margin:0;padding:0;max-width:none}.sidebar,.topbar,.hero,.learning-strip,.content-section:not(#spickzettel),footer,.skip-link,.icon-defs,#print-button,.section-heading>div>p:not(.eyebrow){display:none!important}#spickzettel{padding:0;margin:0}.section-heading{margin:0 0 15px}.section-heading h2{font-size:22px}.section-heading .eyebrow{font-size:9px}.cheat-sheet{border-color:#bbb;break-inside:avoid}.cheat-table td{font-size:10px;color:#111;padding:9px 13px}.cheat-table th{color:#333}.cheat-bottom{padding:14px 20px}.cheat-bottom p,.cheat-bottom b{font-size:9px;color:#333}.memory-note{padding:14px;margin-top:14px;break-inside:avoid}.memory-note p,.memory-note strong,.memory-note small{color:#333}.table-scroll{overflow:visible}a{color:#000}}