.net-lesson{--browser:#dff3ff;--server:#eee7ff;--secret:#fff0bd;--protected:#dff7e9;--danger:#ffe2e8}.net-lesson .ds-kicker{color:#276fb4}.network-lab{position:relative;display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:1rem;align-items:stretch;min-height:210px;margin:1rem 0}.net-node,.net-middle{position:relative;display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;padding:1rem;border-radius:20px;text-align:center}.net-node.browser{background:var(--browser)}.net-node.server{background:var(--server)}.net-middle{border:1px dashed #aab7c9;background:#fff}.net-icon{font-size:2.2rem}.net-node h2,.net-middle h2{margin:.25rem 0;font-size:1.05rem}.net-node small{color:#59677a}.net-payload{max-width:100%;margin-top:.55rem;padding:.55rem .7rem;border-radius:10px;background:#fff;font-family:ui-monospace,monospace;font-weight:900;overflow-wrap:anywhere}.net-key{display:inline-block;margin-top:.5rem;padding:.4rem .65rem;border-radius:999px;background:var(--secret);font-weight:900}.attacker-bubble{min-height:3.4em;margin-top:.55rem;padding:.5rem .7rem;border-radius:12px;background:var(--danger);font-weight:800}.data-packet{position:absolute;z-index:3;top:45%;left:17%;max-width:160px;padding:.5rem .65rem;border:2px solid #d14b61;border-radius:10px;background:#fff;color:#8a2034;font-family:ui-monospace,monospace;font-size:.76rem;font-weight:900;opacity:0;transform:translateX(0);overflow-wrap:anywhere}.network-lab.is-sending .data-packet{animation:send-packet 1.35s ease-in-out forwards}.network-lab.is-protected .data-packet{border-color:#36a467;background:var(--protected);color:#176436}@keyframes send-packet{0%{opacity:0;transform:translateX(0)}15%{opacity:1}55%{opacity:1;transform:translateX(260%)}100%{opacity:0;transform:translateX(520%)}}.quiz-card{display:grid;gap:.45rem;margin-top:1rem;padding:1rem;border:1px solid #dce3ee;border-radius:16px;background:#fff}.quiz-card legend{padding:.25rem;font-weight:900}.quiz-card label{padding:.45rem;border-radius:8px;background:#f5f7fb}.quiz-card button{justify-self:start}.lab-controls{display:flex;flex-wrap:wrap;align-items:end;gap:.75rem}.lab-controls label:not(.switch){flex:1;min-width:220px;font-weight:850}.lab-controls input[type=text],.lab-controls input:not([type]){width:100%;min-height:42px;margin-top:.25rem;padding:.55rem;border:1px solid #bdc9d9;border-radius:9px}.switch{display:flex;align-items:center;gap:.55rem;min-height:42px;padding:.55rem .75rem;border-radius:10px;background:#fff}.switch input{width:22px;height:22px}.decision-grid,.key-pair-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.decision-grid button{min-height:110px;padding:1rem;border:2px solid transparent;border-radius:16px;background:#fff;cursor:pointer;text-align:left}.decision-grid b{display:grid;width:32px;height:32px;place-items:center;margin-bottom:.5rem;border-radius:50%;background:#e7eff8}.decision-grid button.is-bad{border-color:#d55a6e;background:#fff0f3}.decision-grid button.is-good{border-color:#43a65d;background:#effaf2}.reflection,.final-explanation{display:grid;gap:.35rem;margin-top:1rem;font-weight:850}.reflection textarea,.final-explanation textarea{min-height:85px;padding:.65rem;border:1px solid #c5cfdd;border-radius:10px}.asym-explainer{margin:1rem 0;padding:1.15rem 1.3rem;border-left:5px solid #6c55d9;border-radius:0 18px 18px 0;background:#fff}.asym-explainer h2{margin:0 0 .45rem}.asym-explainer p{margin:.4rem 0}.asym-explainer ol{display:grid;gap:.45rem;margin:.7rem 0;padding-left:1.35rem}.asym-warning{padding:.65rem .8rem;border-radius:10px;background:var(--danger)}.key-pair-grid{grid-template-columns:1fr 1fr;margin:1rem 0}.key-pair-grid article{padding:1rem;border-radius:18px}.public-key{background:var(--browser)}.private-key{background:var(--secret)}.key-pair-grid span{font-size:2rem}.key-pair-grid h2{margin:.3rem 0}.model-note{margin:.5rem 0;padding:.65rem .8rem;border-radius:10px;background:#f0f3f8;color:#4d5a6e;font-size:.88rem}.signature-note,.tech-words{margin-top:1rem;border:1px solid #ccd6e4;border-radius:12px;background:#fff}.signature-note summary,.tech-words summary{padding:.75rem 1rem;cursor:pointer;font-weight:900}.signature-note p,.tech-words p{margin:0;padding:0 1rem 1rem;color:#445169}.asym-lab{display:grid;grid-template-columns:180px 1fr auto;gap:.65rem;align-items:end;padding:1rem;border-radius:18px;background:#fff}.asym-lab label{font-weight:850}.asym-lab input,.asym-lab select{width:100%;min-height:42px;margin-top:.25rem;padding:.55rem;border:1px solid #bdc9d9;border-radius:9px;background:#fff}.locked-message{grid-column:1/-1;padding:.85rem;border-radius:12px;background:var(--protected);font-family:ui-monospace,monospace;font-weight:900}.asym-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.6rem}.simple-roadmap{display:grid;grid-template-columns:repeat(5,1fr);gap:.45rem;margin:0 0 1rem}.simple-roadmap span{display:flex;align-items:center;gap:.4rem;padding:.55rem;border-radius:10px;background:#fff;font-size:.78rem;font-weight:850}.simple-roadmap b{display:grid;width:25px;height:25px;flex:none;place-items:center;border-radius:50%;color:#fff;background:#6c55d9}.tls-lab{display:grid;grid-template-columns:1.55fr 1fr;gap:1rem}.tls-lab .network-lab{grid-template-columns:1fr .9fr 1fr;min-height:270px;margin:0}.tls-panel{padding:1rem;border-radius:20px;background:#fff;box-shadow:0 10px 30px rgba(16,33,60,.07)}.tls-panel>span{color:#6c55d9;font-size:.76rem;font-weight:900;text-transform:uppercase}.tls-panel h2{margin:.35rem 0}.tls-artifact{margin-top:.75rem;padding:.8rem;border-radius:12px;background:#f2efff}.certificate{display:grid;gap:.25rem}.certificate b{color:#216d3b}.secret-recipe{display:grid;gap:.35rem;text-align:center}.secret-recipe span{padding:.45rem;border-radius:8px;background:#fff}.secret-recipe b{color:#176436}.session-keys{display:flex;flex-wrap:wrap;gap:.4rem}.session-keys span{padding:.45rem;border-radius:9px;background:var(--secret);font-weight:900}.tls-order{margin-top:1rem;padding:1rem;border-radius:18px;background:#eef1ff}.tls-order h2{margin-top:0;font-size:1.05rem}.order-row{display:grid;grid-template-columns:34px 1fr 140px;gap:.55rem;align-items:center;margin:.4rem 0;padding:.5rem;border-radius:10px;background:#fff}.order-row select{min-height:38px}.order-row.is-correct{outline:2px solid #43a65d}.order-row.is-wrong{outline:2px solid #d75a70}.mode-tabs{display:flex;gap:.5rem}.mode-tabs button{min-width:110px;min-height:44px;border:1px solid #c6d0de;border-radius:10px;background:#fff;font-weight:900}.mode-tabs button.is-active{color:#fff;background:#176fb4}.attacker-view{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1rem}.attacker-view article{padding:1rem;border-radius:16px;background:#fff0f3}.attacker-view article+article{background:#e5f8ec}.phishing-card{margin-top:1rem;padding:1rem;border:2px solid #e2b13b;border-radius:18px;background:#fff9df}.phishing-card h2{font-size:1.05rem}.fake-address{padding:.65rem;border-radius:9px;background:#fff;font-family:ui-monospace,monospace;font-weight:850}.choice-buttons{display:flex;gap:.5rem}.choice-buttons button{min-width:90px;min-height:42px;border:1px solid #c5cfdd;border-radius:9px;background:#fff;font-weight:900}.net-exit{display:grid;grid-template-columns:repeat(2,1fr);gap:.65rem;margin:1rem 0}.net-exit fieldset{padding:1rem;border:1px solid #dce3ee;border-radius:14px;background:#fff}.net-exit legend{font-weight:900}.net-exit label{display:block;margin:.4rem 0;padding:.4rem;border-radius:8px;background:#f5f7fb}.net-exit fieldset.is-correct{border-color:#43a65d;background:#effaf2}.net-exit fieldset.is-wrong{border-color:#d75a70;background:#fff1f3}.finish-card{margin-top:1rem;padding:1.2rem;border-radius:20px;color:#fff;background:linear-gradient(135deg,#176fb4,#6548b5)}.finish-card strong{font-size:1.3rem}.finish-card p{margin:.4rem 0}.finish-card small{color:#e4edff}.net-card{border-top-color:#249886;background:linear-gradient(145deg,#fff,#eafaf5)}
@media(max-width:900px){.network-lab,.tls-lab{grid-template-columns:1fr}.network-lab{min-height:0}.data-packet{display:none}.decision-grid{grid-template-columns:1fr}.asym-lab{grid-template-columns:1fr 1fr}.asym-lab button{grid-column:1/-1}.net-exit{grid-template-columns:1fr}.tls-lab .network-lab{grid-template-columns:repeat(3,1fr);min-height:210px}.attacker-view{grid-template-columns:1fr}.simple-roadmap{grid-template-columns:repeat(5,minmax(110px,1fr));overflow-x:auto}}
@media(max-width:600px){.tls-lab .network-lab,.key-pair-grid{grid-template-columns:1fr}.asym-lab{grid-template-columns:1fr}.order-row{grid-template-columns:30px 1fr}.order-row select{grid-column:1/-1}.lab-controls{align-items:stretch;flex-direction:column}.lab-controls>*{width:100%}}
@media(prefers-reduced-motion:reduce){.network-lab.is-sending .data-packet{animation-duration:.01ms}.ds-progress b{transition:none}}