:root{scroll-behavior:smooth;scroll-padding-top:90px}.study-main{max-width:1080px;margin:auto;padding:24px 24px 70px}.site-header{position:relative;z-index:10}.skip-link{position:absolute;left:-9999px;top:10px}.skip-link:focus{left:10px;z-index:20;background:#fff;color:#111;padding:10px}.back-link,.study-footer a{color:#8db6ff;text-decoration:none}.study-hero{padding:52px 0 32px}.study-hero h1{font-size:clamp(2.7rem,7vw,5rem);letter-spacing:-.06em;margin:.18em 0}.gradient-word{background:linear-gradient(90deg,#72a8ff,#7ce4c5);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy{font-size:1.15rem;max-width:690px;color:#b7c6d9;line-height:1.75}.hero-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:24px 0}.link-button{text-decoration:none;display:inline-flex;gap:10px;align-items:center}.gentle-note{font-size:.9rem;color:#95a9c1}.learning-principles{display:flex;flex-wrap:wrap;gap:9px}.learning-principles span{font-size:.83rem;padding:8px 11px;background:#101f30;border:1px solid #263e56;border-radius:999px;color:#c6d6e8}.progress-card{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center;padding:23px;background:linear-gradient(120deg,#12243a,#111d2e);border:1px solid #304760;border-radius:18px;margin:16px 0 24px}.progress-card h2{font-size:1.5rem;margin:.25em 0}.progress-card p:not(.eyebrow){color:#aebdd1;margin:.3em 0}.progress-side strong{font-size:1.15rem}.progress-track{height:10px;background:#263a50;border-radius:99px;overflow:hidden;margin:10px 0}.progress-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,#4f8cff,#4fe0b0);border-radius:inherit;transition:width .5s ease}.progress-side small{color:#91a5bf}.study-nav{position:sticky;top:0;z-index:5;display:flex;gap:6px;flex-wrap:wrap;background:rgba(10,17,29,.96);backdrop-filter:blur(12px);padding:12px 0;border-bottom:1px solid #26354a}.study-nav a{font-size:.84rem;color:#c9d7ea;text-decoration:none;padding:8px 10px;border-radius:9px;transition:background .2s,color .2s}.study-nav a:hover,.study-nav a:focus-visible{background:#1a3550;color:#fff}.study-section{padding:42px 0;border-bottom:1px solid #26354a;scroll-margin-top:84px}.section-heading{max-width:780px;margin-bottom:23px}.section-heading h2{font-size:clamp(1.8rem,4vw,2.65rem);letter-spacing:-.035em;margin:.25em 0}.section-heading p:not(.eyebrow){color:#aebdd1;line-height:1.7}.network-scene{display:grid;grid-template-columns:1fr .7fr 1fr .7fr 1fr .7fr 1fr;align-items:center;gap:8px;padding:22px 16px;background:#0d1928;border:1px solid #263b53;border-radius:18px;overflow:hidden}.network-node{min-width:0;display:grid;justify-items:center;text-align:center;gap:5px}.node-art{display:grid;place-items:center;width:58px;height:58px;border-radius:17px;font-size:1.8rem;color:#081522;background:linear-gradient(135deg,#74b0ff,#6ee0c0);box-shadow:0 0 0 7px #72a8ff10}.router-art{background:linear-gradient(135deg,#d1b5ff,#7da7ff)}.server-art{background:linear-gradient(135deg,#ffc982,#71e0c1)}.network-node strong{font-size:.9rem}.network-node small,.link-label{color:#91a5bf;font-size:.72rem}.network-link{height:3px;position:relative;background:#30465f;border-radius:5px}.travel-packet{position:absolute;top:50%;left:0;width:10px;height:10px;border-radius:50%;background:#7ce4c5;box-shadow:0 0 14px #7ce4c5;transform:translateY(-50%);animation:packet-travel 2.7s linear infinite}.delay-one{animation-delay:.9s}.delay-two{animation-delay:1.8s}.link-label{position:absolute;top:10px;left:50%;transform:translateX(-50%);white-space:nowrap}.scene-caption{display:flex;align-items:center;gap:9px;color:#91a5bf;font-size:.85rem;margin:14px 0 0}.pulse-dot{width:8px;height:8px;border-radius:50%;background:#67dfba;box-shadow:0 0 0 0 #67dfba66;animation:pulse 2s infinite}.device-selector{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}.device-tab,.secondary-btn{cursor:pointer;border:1px solid #2c435d;background:#101d2d;color:#c9d7e9;border-radius:10px;padding:11px 14px;font:inherit;transition:transform .2s,border-color .2s,background .2s}.device-tab:hover{transform:translateY(-2px)}.device-tab.is-active{background:#1c3a53;border-color:#65d8bb;color:#fff;box-shadow:inset 0 0 0 1px #65d8bb30}.device-explainer{display:grid;grid-template-columns:.8fr 1.2fr;gap:25px;align-items:center;padding:22px;background:#111d2e;border:1px solid #293b52;border-radius:17px}.device-visual{position:relative;display:grid;place-items:center;min-height:210px;overflow:hidden;border-radius:13px;background:radial-gradient(ellipse,#1a3c53 0%,#0b1523 70%)}.device-visual>span:first-child{font-size:5rem;z-index:1;animation:float 3.5s ease-in-out infinite}.device-orbit{position:absolute;width:155px;height:155px;border:1px solid #49748a;border-radius:50%;transform:scaleY(.45) rotate(-20deg)}.orbit-b{width:190px;height:190px;transform:scaleY(.45) rotate(45deg);border-color:#35516e}.micro-label{font-size:.72rem;letter-spacing:.14em;color:#72dfc0;font-weight:800}.device-copy h3,.osi-detail h3{font-size:1.6rem;margin:.2em 0}.device-copy>p:not(.micro-label){color:#b5c5d9;line-height:1.7}.memory-hook{padding:12px 14px;background:#0c202b;border-left:3px solid #64dabb;border-radius:0 10px 10px 0;color:#d4e2ee;line-height:1.6}.command-hint{color:#9eb1c8;font-size:.9rem;margin-top:16px}.command-hint code{color:#8ce8d0;overflow-wrap:anywhere}.complete-btn{margin-top:14px;border:1px solid #31526a;background:transparent;color:#9fb4cb;padding:9px 12px;border-radius:9px;cursor:pointer;font:inherit;font-size:.86rem;transition:all .2s}.complete-btn:hover{border-color:#6cddbc;color:#fff}.complete-btn.is-complete{background:#10362e;border-color:#4bd1a7;color:#8aefd1}.osi-explorer{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}.osi-stack{display:grid;gap:7px}.osi-layer{display:flex;align-items:center;text-align:left;gap:12px;padding:10px 13px;border:1px solid #2a4059;border-radius:11px;background:#111d2e;color:#eef4ff;cursor:pointer;transition:transform .2s,border-color .2s,background .2s}.osi-layer:hover{transform:translateX(3px)}.osi-layer.is-active{border-color:#66dabb;background:#153043;box-shadow:inset 3px 0 #66dabb}.osi-layer>b{display:grid;place-items:center;width:35px;height:35px;flex-shrink:0;border-radius:9px;background:#1d3551;color:#7de2ca}.osi-layer strong,.osi-layer small{display:block}.osi-layer small{color:#9fb0c7;margin-top:2px}.osi-detail{position:relative;overflow:hidden;padding:23px;border:1px solid #2c435b;border-radius:15px;background:radial-gradient(circle at top right,#1b3a50,#111d2e 65%)}.layer-number{font-size:3.8rem;line-height:1;font-weight:900;color:#72dfc0;opacity:.9;margin-bottom:18px;animation:pop-in .25s ease}.osi-detail>p:not(.micro-label){color:#b8c8db;line-height:1.7}.symptom-box{padding:12px;margin-top:20px;background:#0b1523;border-radius:10px}.symptom-box p{margin:.4em 0 0;color:#c4d5e7;line-height:1.6}.mnemonic{margin-top:15px}.mnemonic small{display:block;color:#9eb1c8;margin-top:5px}.subnet-input-row{display:flex;align-items:end;gap:12px;flex-wrap:wrap;padding:16px;background:#111d2e;border:1px solid #293b52;border-radius:14px}.subnet-input-row label{display:grid;gap:6px;color:#aebdd1;font-size:.82rem}.subnet-input-row input,.subnet-input-row select{min-width:160px;padding:11px 12px;border:1px solid #344c67;border-radius:9px;background:#091421;color:#eef4ff;font:inherit;font-size:.95rem}.subnet-input-row select{min-width:95px}.primary-btn{border:0;background:#4fe0b0;color:#071b19;padding:11px 15px;border-radius:9px;font:inherit;font-weight:800;cursor:pointer;transition:transform .18s,filter .18s}.primary-btn:hover{transform:translateY(-1px);filter:brightness(1.07)}.input-feedback{min-height:1.5em;color:#aebdd1;font-size:.9rem}.subnet-steps{display:grid;gap:10px}.subnet-step{display:grid;grid-template-columns:38px 1fr;gap:13px;padding:17px;background:#101c2b;border:1px solid #283b52;border-radius:13px;opacity:.56;transition:opacity .3s,border-color .3s,transform .3s}.subnet-step.is-current{opacity:1;border-color:#66dabb;transform:translateX(3px);box-shadow:0 7px 30px #00000016}.step-index{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#1d3551;color:#a9c8ed;font-weight:800}.is-current .step-index{background:#4fe0b0;color:#071b19}.subnet-step h3{margin:.2em 0;font-size:1.08rem}.subnet-step p,.subnet-step small{color:#aebdd1;line-height:1.65}.equation{display:inline-flex;gap:8px;align-items:center;margin:5px 0;padding:10px 14px;background:#07131f;border-radius:9px;font-family:ui-monospace,Consolas,monospace}.equation strong{color:#7ce4c5}.block-visual{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:12px 0}.block-visual span{display:grid;place-items:center;min-height:55px;padding:7px;background:#0b1523;border:1px solid #283e57;border-radius:8px;color:#91a5bf;font-size:.78rem;text-align:center}.block-visual .chosen-block{background:#12382f;border-color:#4fe0b0;color:#d9fff3;font-weight:800}.chosen-block b{font-size:.65rem;display:block}.answer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.answer-grid>div{padding:11px;background:#091421;border-radius:9px;min-width:0}.answer-grid small,.answer-grid strong{display:block}.answer-grid small{color:#91a5bf;margin-bottom:5px}.answer-grid strong{font-size:.91rem;overflow-wrap:anywhere;color:#8ce8d0}.step-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:15px}.step-controls span{color:#9eb1c8;font-size:.85rem}.secondary-btn:disabled{opacity:.4;cursor:not-allowed}.callout{margin:18px 0 0;padding:15px 17px;border-left:3px solid #54d6b2;background:#102333;color:#c6d6e8;line-height:1.7;border-radius:0 10px 10px 0}.vlan-demo{padding:18px;background:#0d1928;border:1px solid #263b53;border-radius:16px}.vlan-neighborhood{display:grid;grid-template-columns:1fr 1fr;gap:12px}.vlan-zone{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center;padding:15px;border:1px dashed #4c8ac2;border-radius:12px;background:#11243a}.vlan-zone strong,.vlan-zone small{grid-column:1/-1}.vlan-zone strong{font-size:.9rem}.vlan-zone small{color:#a7bad0;font-size:.78rem}.vlan-green{border-color:#55b99b;background:#102b2b}.tiny-device{display:grid;place-items:center;min-height:50px;background:#0a1826;border:1px solid #2b4b67;border-radius:9px;font-size:1.6rem;animation:float 3s ease-in-out infinite}.tiny-device:nth-of-type(2){animation-delay:.5s}.vlan-switch{display:grid;justify-items:center;gap:3px;margin:12px auto 0;padding:12px;max-width:260px;border-radius:12px;background:#172d43;border:1px solid #3a5974}.vlan-switch>span{font-size:1.8rem;color:#7ce4c5}.vlan-switch small{color:#9eb1c8;text-align:center}.config-reveal{margin-top:14px;padding:14px 16px;border:1px solid #293b52;background:#111d2e;border-radius:12px}summary{cursor:pointer;font-weight:700;color:#dbe7f5}pre{padding:18px;overflow-x:auto;background:#070d16;border:1px solid #29384d;border-radius:12px;line-height:1.8;color:#d7e5f7}pre code{white-space:pre;color:#85e5cb}.quiz-form{display:grid;gap:12px}.quiz-form fieldset{margin:0;display:grid;gap:9px;padding:17px;background:#111d2e;border:1px solid #293b52;border-radius:13px}.quiz-form legend{font-weight:700;line-height:1.5;padding:0 5px}.quiz-form label{display:flex;gap:9px;align-items:flex-start;color:#c0cee0;padding:5px;border-radius:6px}.quiz-form input{accent-color:#61d8b7;margin-top:5px}.answer-feedback{margin:0;font-size:.88rem;color:#9fb4cb}.answer-feedback.correct{color:#7ce4c5}.answer-feedback.incorrect{color:#ffca8a}#quiz-result{font-weight:800;color:#7de2ca;min-height:1.5em}.command-list{display:grid;gap:9px}.command-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 16px;border:1px solid #2a4059;border-radius:11px;background:#111d2e}.command-row small{display:block;margin-top:4px;color:#9fb0c7;line-height:1.5}.copy-btn{border:1px solid #365575;background:#1a3550;color:#e7f1ff;padding:9px 13px;border-radius:8px;cursor:pointer;white-space:nowrap}.study-footer{padding:30px 0;color:#8fa2ba;font-size:.9rem;line-height:1.6}.study-footer p{max-width:700px}.lesson-section{position:relative}@keyframes packet-travel{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:calc(100% - 10px);opacity:0}}@keyframes pulse{0%{box-shadow:0 0 0 0 #67dfba66}70%{box-shadow:0 0 0 7px #67dfba00}100%{box-shadow:0 0 0 0 #67dfba00}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes pop-in{from{transform:scale(.8);opacity:.2}to{transform:scale(1);opacity:.9}}@media(max-width:760px){.progress-card,.device-explainer,.osi-explorer{grid-template-columns:1fr}.network-scene{grid-template-columns:1fr;gap:7px}.network-node{grid-template-columns:55px 1fr;justify-items:start;text-align:left;align-items:center;column-gap:12px}.network-node .node-art{grid-row:span 2;width:50px;height:50px}.network-link{width:3px;height:28px;margin-left:24px}.travel-packet{top:0;left:50%;animation:packet-down 2.2s linear infinite}.delay-one{animation-delay:.7s}.delay-two{animation-delay:1.4s}.link-label{left:14px;top:50%;transform:translateY(-50%)}.device-visual{min-height:160px}.device-visual>span:first-child{font-size:4rem}.osi-detail{min-height:280px}.progress-card{gap:10px}.study-nav{overflow-x:auto;flex-wrap:nowrap}.study-nav a{white-space:nowrap}}@keyframes packet-down{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:calc(100% - 10px);opacity:0}}@media(max-width:520px){.study-main{padding:18px 16px 50px}.study-hero{padding-top:32px}.study-hero h1{font-size:2.8rem}.learning-principles{gap:6px}.learning-principles span{font-size:.75rem}.subnet-input-row{align-items:stretch}.subnet-input-row label{flex:1}.subnet-input-row input{min-width:0;width:100%}.block-visual{grid-template-columns:repeat(2,minmax(0,1fr))}.answer-grid{grid-template-columns:1fr}.step-controls{flex-wrap:wrap}.step-controls span{order:-1;width:100%;text-align:center}.vlan-neighborhood{grid-template-columns:1fr}.command-row{align-items:flex-start}.command-row code{font-size:.82rem}.command-row small{max-width:240px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* Layout guardrails: keep long learning titles and diagrams inside the viewport. */
.study-main{width:100%;min-width:0;overflow-wrap:anywhere}
.study-main *{min-width:0}
.study-hero h1{max-width:100%;font-size:clamp(2.25rem,7.2vw,5rem);line-height:1.04;overflow-wrap:break-word}
.section-heading h2,.progress-card h2,.device-copy h3{max-width:100%;overflow-wrap:break-word}
.progress-card,.device-explainer,.osi-explorer,.network-scene,.vlan-demo,.subnet-step{min-width:0;max-width:100%}
.network-scene{width:100%}
.network-node strong,.network-node small,.command-row code,.command-row small{overflow-wrap:anywhere}
.gradient-word{display:inline-block}
.hero-actions{align-items:center}
.link-button{text-decoration:none!important}
@media(max-width:760px){
 .study-main{padding-left:18px;padding-right:18px}
 .study-hero h1{font-size:clamp(2.25rem,8.5vw,3.5rem);letter-spacing:-.045em}
 .section-heading h2{font-size:clamp(1.65rem,6vw,2.3rem)}
 .progress-card{padding:18px}
 .network-scene{padding:16px 12px}
}
@media(max-width:420px){
 .study-hero h1{font-size:2.25rem}
 .study-nav a{font-size:.78rem;padding:7px 8px}
 .step-controls .primary-btn,.step-controls .secondary-btn{padding:9px 11px}
}