:root{--background:#07110f;--foreground:#f2f7ed;--card:#0d1d19;--card-foreground:#f2f7ed;--popover:#0d1d19;--popover-foreground:#f2f7ed;--primary:#b9f227;--primary-foreground:#07110f;--secondary:#142621;--secondary-foreground:#f2f7ed;--muted:#142621;--muted-foreground:#94a49d;--accent:#173129;--accent-foreground:#f2f7ed;--destructive:#ff7167;--border:#294039;--input:#294039;--ring:#b9f227;--radius:.8rem}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--background);color:var(--foreground);margin:0;font-family:Trebuchet MS,Arial,sans-serif;font-size:16px}button,a{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--primary);outline-offset:3px}.topbar{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;max-width:1240px;height:76px;margin:auto;padding:0 28px;display:flex}.brand{color:inherit;align-items:center;gap:11px;font-weight:800;text-decoration:none;display:flex}.brand>span{background:var(--primary);color:#07110f;border-radius:9px;place-items:center;width:34px;height:34px;display:grid;transform:rotate(-4deg)}.brand svg{width:19px}.topbar nav{gap:32px;display:flex}.topbar nav a{color:#a8b7b1;font-size:.9rem;text-decoration:none}.pill{border:1px solid var(--border);color:#cbd6d2;border-radius:99px;align-items:center;gap:7px;padding:8px 12px;font-size:.82rem;display:flex}.pill svg{width:15px;color:var(--primary)}.intro{grid-template-columns:1.3fr .7fr;align-items:end;gap:80px;max-width:1184px;margin:auto;padding:82px 28px 70px;display:grid}.eyebrow{color:var(--primary);text-transform:uppercase;letter-spacing:.12em;margin:0 0 16px;font-family:monospace;font-size:.78rem;font-weight:700}.intro h1{letter-spacing:-.075em;margin:0;font-size:clamp(3.2rem,7vw,6.7rem);line-height:.91}.intro h1 em{color:var(--primary);font-style:normal}.intro>p{color:#a7b7b0;max-width:420px;margin:0;font-size:1.15rem;line-height:1.65}.lab{color:#11201b;background:#eef3eb;padding:74px max(28px,50vw - 592px)}.lab-head{justify-content:space-between;align-items:end;margin-bottom:34px;display:flex}.lab-head small,.principles>small{color:#7c8b85;font-family:monospace;font-size:.72rem}.lab-head .eyebrow,.principles .eyebrow{color:#47615a;margin:9px 0 8px}.lab-head h2,.principles h2{letter-spacing:-.055em;margin:0;font-size:clamp(2.2rem,4vw,4rem)}.lab-head>p{color:#587068;max-width:390px;margin:0;line-height:1.55}.tabs{border-bottom:1px solid #bdc9c2;gap:8px;overflow:auto;background:0 0!important;border-radius:0!important;justify-content:flex-start!important;width:100%!important;height:auto!important;padding:0!important}.tabs button{color:#60736d!important;border-radius:12px 12px 0 0!important;flex:none!important;height:auto!important;padding:14px 18px!important}.tabs button[data-state=active]{color:#f4f7f1!important;box-shadow:none!important;background:#11201b!important}.lesson{color:#f1f5ef;background:#11201b;border-radius:0 0 22px 22px;grid-template-columns:1.4fr .8fr;min-height:520px;overflow:hidden;display:grid!important}.stage{background-image:radial-gradient(#294039 1px,#0000 1px);background-size:20px 20px;border-right:1px solid #294039;min-height:520px;padding:50px}.tcp{grid-template-columns:150px 1fr 150px;align-items:center;display:grid}.device{z-index:2;color:#15241f;background:#e8eee8;border-radius:20px;flex-direction:column;justify-content:center;align-items:center;min-height:150px;display:flex;box-shadow:0 18px 40px #0004}.device.server{background:var(--primary)}.device i{background:#d3ddd6;border-radius:14px;place-items:center;width:48px;height:48px;margin-bottom:12px;font-style:normal;display:grid}.device.server i{color:#fff;background:#111f1a}.device i svg{width:22px}.device small{color:#6b7a74;margin-top:4px}.lane{height:240px;position:relative}.lane>i{border-top:2px dashed #547067;position:absolute;top:50%;left:0;right:0}.lane small{text-align:center;color:#80958d;width:100%;font-size:.72rem;position:absolute;bottom:0}.packet{background:var(--primary);color:#102019;border-radius:7px;padding:7px 12px;font-family:monospace;font-size:.72rem;animation:.5s pop;position:absolute;box-shadow:0 0 25px #b9f22766}.p0{top:27%;left:65%}.p1{background:#6fe1d2;top:47%;right:65%}.p2{top:67%;left:65%}@keyframes pop{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.explain{flex-direction:column;padding:52px 42px;display:flex}.kicker{color:#789087;letter-spacing:.08em;margin:0 0 20px;font-family:monospace;font-size:.72rem}.explain h3{letter-spacing:-.04em;margin:0 0 18px;font-size:2.1rem;line-height:1.05}.summary{color:#9eb0a9;margin:0 0 30px;line-height:1.55}.readout{border:1px solid #2c433b;border-left:3px solid var(--primary);background:#0a1713;flex-direction:column;gap:8px;min-height:92px;margin-top:auto;padding:18px;display:flex}.readout strong{color:var(--primary)}.readout span{color:#c3cec9;font-size:.91rem;line-height:1.45}.controls{gap:10px;margin-top:18px;display:flex}.controls button{color:#fff;background:#21342e;border:1px solid #354b44;border-radius:10px;justify-content:center;align-items:center;gap:9px;min-height:45px;font-weight:800;display:flex}.controls .primary{background:var(--primary);color:#102019;border:0;flex:1;padding:0 18px}.controls button:disabled{opacity:.65}.controls svg{width:17px}.controls button:not(.primary){width:45px}.dots{gap:6px;margin-top:18px;display:flex}.dots i{background:#30463f;flex:1;height:3px}.dots .on{background:var(--primary)}.map{grid-template-columns:1fr 1fr;align-content:center;gap:22px 50px;display:grid}.map button{text-align:left;color:#81968e;background:#10211b;border:1px solid #345047;border-radius:14px;min-height:92px;padding:16px;transition:all .25s}.map button:nth-child(2n){transform:translateY(20px)}.map small{margin-bottom:7px;font-family:monospace;display:block}.map strong{font-size:.94rem}.map .reached{border-color:var(--primary);color:#fff;background:#1b3028;box-shadow:0 0 25px #b9f22712}.map .reached small{color:var(--primary)}.structures{flex-direction:column;justify-content:center;align-items:center;display:flex}.items{justify-content:center;align-items:end;gap:8px;min-height:260px;display:flex}.items>div{background:#16312a;border:2px solid #7ad7c8;border-radius:13px;flex-direction:column;justify-content:center;align-items:center;width:90px;height:90px;animation:.35s pop;display:flex;box-shadow:0 12px 24px #0004}.items small{color:#79938a}.items strong{font-size:1.45rem}.items.stack{flex-direction:column-reverse;gap:5px}.items.stack>div{width:230px;height:55px}.items.queue>div{border-radius:50%;width:82px;height:82px}.structures>p{color:#a0b2ab;margin-top:28px}.choices{grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:18px;display:grid}.choices button{color:#a9b9b3;background:#152821;border:1px solid #354b44;border-radius:8px;padding:10px}.choices .selected{background:var(--primary);color:#102019;border-color:var(--primary);font-weight:800}.principles{max-width:1184px;margin:auto;padding:100px 28px}.principles>div{background:var(--border);border:1px solid var(--border);grid-template-columns:repeat(3,1fr);gap:1px;margin-top:50px;display:grid}.principles article{background:var(--background);padding:36px}.principles b{color:var(--primary);font-family:monospace;font-size:.75rem}.principles h3{margin:42px 0 12px;font-size:1.25rem}.principles article p{color:#91a49c;margin:0;line-height:1.6}footer{border-top:1px solid var(--border);color:#82958d;justify-content:space-between;align-items:center;max-width:1184px;margin:auto;padding:30px 28px;display:flex}footer p{margin:0;font-size:.85rem}@media (width<=850px){.topbar nav{display:none}.intro{grid-template-columns:1fr;gap:30px;padding-top:60px}.lab-head{display:block}.lab-head>p{margin-top:20px}.lesson{grid-template-columns:1fr}.stage{border-bottom:1px solid #294039;border-right:0;min-height:420px}.tcp{grid-template-columns:110px 1fr 110px;padding:28px}.device{min-height:125px;font-size:.82rem}.explain{padding:36px 28px}.principles>div{grid-template-columns:1fr}.principles h3{margin-top:20px}.map{gap:18px;padding:35px 25px}.items>div{width:66px;height:66px}.pill{display:none}}@media (width<=520px){.topbar{padding:0 18px}.intro{padding:60px 18px}.intro h1{font-size:3.45rem}.lab{padding-left:18px;padding-right:18px}.tabs button{padding:12px!important;font-size:.76rem!important}.tabs svg{display:none}.tcp{grid-template-columns:85px 1fr 85px;padding:18px}.device{text-align:center;min-height:105px}.device i{width:38px;height:38px;margin-bottom:7px}.lane small{display:none}.packet{padding:5px;font-size:.62rem}.map{grid-template-columns:1fr 1fr}.map button{padding:11px}.items.array,.items.queue{gap:4px}.items>div{width:55px;height:55px}.items.queue>div{width:58px;height:58px}.items.stack>div{width:180px}.principles{padding-left:18px;padding-right:18px}footer{margin:0 18px;padding-left:0;padding-right:0}}