.lesson-visual{container-type:inline-size;border:1px solid #d4e0c8;background:#fff;border-radius:15px;padding:27px;margin:30px 0 38px;scroll-margin-top:140px;min-width:0;overflow:hidden}
.lesson-visual>h2{font-size:30px;line-height:1.3;margin:13px 0 16px}.visual-intro{font-size:17px;line-height:1.85;color:#4c6842;margin-bottom:24px}.visual-footnote{font-size:12px;color:#627655;line-height:1.85;border-top:1px solid #e4ebdc;margin:25px 0 0;padding-top:17px}.lesson-picture{width:68px;height:68px;flex-shrink:0;color:#46623c}.visual-toolbar{display:flex;flex-wrap:wrap;gap:10px}.visual-toolbar .button{font-size:13px;padding:11px 15px;min-height:46px}.visual-toolbar .button:disabled{opacity:.45}.visual-help{font-size:14px;line-height:1.8;color:#607650;margin:15px 0 22px}.pc-diagram{position:relative;aspect-ratio:640/480;background:#f5f7ef;border:2px solid #d9e2d0;border-radius:14px;isolation:isolate;overflow:hidden}.pc-board-surface{position:absolute;inset:7% 4% 21%;background-color:#dce8d1;background-image:radial-gradient(#b8cbaa 1px,transparent 1px);background-size:16px 16px;border:2px solid #b5cda1;border-radius:10px;z-index:-1}.pc-board-surface.is-selected{box-shadow:inset 0 0 0 3px #5b803f}.diagram-caption{position:absolute;top:2%;left:7%;font-size:9px;letter-spacing:1.5px;color:#698253}.pc-connections{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.board-trace{fill:none;stroke:#a7be97;stroke-width:3}.data-trace{fill:none;stroke:transparent;stroke-width:5}.data-trace.is-flow{stroke:#c2833e;stroke-dasharray:8 6;animation:visual-data-flow 1.4s linear infinite}.data-trace.reverse-flow{animation-direction:reverse}.pc-tall{display:none}.pc-diagram-part{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px;border:2px solid #c2d3b4;background:#fcfff7;border-radius:10px;box-shadow:0 3px 0 #859d6d12;min-width:0}.pc-diagram-part:hover{border-color:#709456;background:#f3f8e9}.pc-diagram-part .lesson-picture{width:46px;height:46px}.pc-diagram-part strong{font-size:17px;line-height:1.25;font-weight:600}.pc-diagram-part small{font-size:12px;line-height:1.35;color:#5d784b;max-width:100%}.pc-diagram-part.is-selected{outline:3px solid #1c5947;outline-offset:3px;z-index:2}.pc-diagram-part.in-flow{background:#eff4ce;border-color:#c3984a}.part-mainboard{left:8%;top:9%;width:56%;height:13%;display:grid;grid-template-columns:42px 1fr;grid-template-rows:1fr 1fr;text-align:left;gap:0 9px;padding:7px 12px;justify-items:start}.part-mainboard .lesson-picture{grid-row:1/3;width:38px;height:38px}.part-mainboard strong{align-self:end}.part-mainboard small{align-self:start}.part-cpu{left:40%;top:27%;width:23%;height:24%}.part-ram{left:67%;top:27%;width:18%;height:24%}.part-ssd{left:13%;top:55%;width:26%;height:20%}.part-ssd .lesson-picture{width:37px;height:37px}.part-power{left:12%;top:81%;width:76%;height:17%;display:grid;grid-template-columns:55px 1fr;grid-template-rows:1fr 1fr;text-align:left;gap:0 12px;padding:10px 20px;justify-items:start;background:#f8efdf}.part-power .lesson-picture{grid-row:1/3;width:51px;height:51px}.part-power strong{align-self:end}.part-power small{align-self:start}.power-off .pc-board-surface{background-color:#e8eae3}.power-off .part-cpu,.power-off .part-ram,.power-off .part-mainboard{filter:grayscale(.8);background:#f1f2ec}.simulation-state{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:17px 0 22px}.simulation-state>div{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid #d7e3cb;background:#f1f7e8;border-radius:9px;min-width:0}.simulation-state .lesson-picture{width:42px;height:42px}.simulation-state span{font-size:14px;line-height:1.7;color:#446435;overflow-wrap:anywhere}.simulation-state b{display:block;font-size:12px;color:#6b8257;line-height:1.5;font-weight:500}.simulation-state em{font-style:normal;display:block;font-size:12px;color:#607c4a}.simulation-state .has-changes{background:#fff3df;border-color:#e1c495}.simulation-state .has-changes em{color:#8c612b}.visual-stepper{border:1px solid #d1dfc3;background:#edf4e6;border-radius:11px;padding:22px;margin:23px 0}.stepper-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:#5b7848;margin-bottom:14px}.stepper-top .eyebrow{font-size:10px}.visual-stepper h3{font-size:23px;line-height:1.5;margin:0 0 12px}.visual-stepper>p{font-size:16px;line-height:1.9;color:#4c6b3b;margin:0}.stepper-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:22px}.stepper-controls .button{font-size:13px;padding:11px 16px}.step-dots{display:flex;gap:6px}.step-dots i{display:block;width:7px;height:7px;border-radius:50%;background:#cfddbf}.step-dots i.active{background:#527e3a}.visual-explanation{border:1px solid #dde6d3;border-radius:11px;padding:23px;background:#fcfef9;margin-top:22px}.visual-explanation-title{display:flex;align-items:center;gap:15px;margin-bottom:18px}.visual-explanation-title>.lesson-picture{width:58px;height:58px}.visual-explanation .eyebrow{font-size:10px}.visual-explanation h3{font-size:24px;line-height:1.4;margin:9px 0 15px}.visual-explanation-title h3{margin:7px 0 0}.visual-explanation>p{font-size:16px;line-height:1.9;color:#4d6b3e}.visual-explanation>p strong{font-weight:550}.visual-explanation .de-line{font-size:16px;margin-top:17px}.visual-bottom{margin:24px 0 0}.visual-bottom p{font-size:15px;line-height:1.85;color:#5c764b;margin:0 0 13px}.visual-bottom .text-button{font-size:14px}.network-scenarios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.network-scenarios button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;background:#fcfef9;border:1px solid #ceddc0;border-radius:8px;padding:12px 8px;font-size:14px;font-weight:500;line-height:1.5;min-width:0}.network-scenarios .lesson-picture{width:40px;height:40px}.network-scenarios button[aria-pressed=true]{background:#e8f1da;border:2px solid #6c9251;padding:11px 7px}.outage-control{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:19px 0}.outage-control .button{font-size:13px}.outage-control>span{font-size:12px;color:#527541;line-height:1.7}.outage-control .is-offline{color:#9a6334}.network-diagram{aspect-ratio:720/450;position:relative;isolation:isolate}.local-network-boundary{position:absolute;left:2%;top:9%;width:72.5%;height:84%;border:2px dashed #a5bf91;background:#f0f6e9;border-radius:12px;z-index:-1}.local-network-boundary>span{position:absolute;left:14px;top:13px;font-size:10px;letter-spacing:.8px;color:#587d43;font-weight:500}.network-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.network-tall{display:none}.net-wire{fill:none;stroke:#8eae75;stroke-width:3}.net-wire.wireless{stroke-dasharray:5 5;stroke:#9a89ac}.net-wire.is-flow{stroke:#c1853f;stroke-width:5;stroke-dasharray:8 5;animation:visual-data-flow 1.3s linear infinite}.net-wire.disconnected{stroke:#b7b8ae;stroke-dasharray:3 8;stroke-width:2}.network-picture-node{position:absolute;border:2px solid #cfdec0;border-radius:11px;background:white;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;padding:7px;min-width:0}.network-picture-node:hover{background:#edf5e4;border-color:#719752}.network-picture-node .lesson-picture{width:43px;height:43px}.network-picture-node strong{font-size:15px;font-weight:550;line-height:1.3}.network-picture-node small{font-size:11px;line-height:1.4;color:#5b7a47}.network-picture-node.is-selected{outline:3px solid #1b5845;outline-offset:3px;z-index:2}.network-picture-node.in-flow{background:#f0f4cf;border-color:#bf9646}.node-pc{left:7.5%;top:27%;width:14%;height:25%}.node-switch{left:30.5%;top:27%;width:14%;height:25%}.node-router{left:54%;top:27%;width:18%;height:25%}.node-internet{left:82%;top:27%;width:14%;height:25%;background:#e6efdd}.node-printer{left:30.5%;top:62%;width:14%;height:24%}.node-phone{left:54%;top:62%;width:18%;height:24%}.network-edge-status{position:absolute;left:79%;top:13%;width:20%;font-size:9px;line-height:1.6;color:#5f7e4a;text-align:center}.network-edge-status.is-offline{color:#9d5d2b}.diagram-legend{display:flex;flex-wrap:wrap;gap:9px 19px;color:#587649;font-size:12px;margin:15px 0}.diagram-legend>span{display:flex;align-items:center;gap:8px}.diagram-legend i{width:21px;height:0;border-top:3px solid #8eae75}.diagram-legend .legend-radio{border-top-style:dashed;border-top-color:#9a89ac}.diagram-legend .legend-flow{border-top-color:#c1853f}.route-failed{background:#fff1e4;border-color:#e5c7a7}.route-failed>p{color:#805e3d}.picture-sequence{display:grid;grid-template-columns:1fr 21px 1fr 21px 1fr;align-items:center;gap:7px;margin:24px 0}.picture-sequence>button{display:flex;align-items:center;flex-direction:column;justify-content:center;position:relative;gap:13px;padding:21px 9px;border:2px solid #d5e2ca;background:#f9fcf4;border-radius:12px;min-height:170px;min-width:0}.picture-sequence>button.is-selected{background:#eaf2dc;border-color:#477637}.picture-sequence .lesson-picture{width:70px;height:70px}.picture-sequence strong{font-size:16px;line-height:1.5;font-weight:550;overflow-wrap:anywhere;max-width:100%}.picture-sequence button>small{position:absolute;top:8px;left:10px;color:#65864f;font-size:12px}.sequence-arrow{font-size:23px;text-align:center;color:#98b082}.byte-count-picker{display:flex;gap:12px;margin:20px 0}.byte-count-picker button{border:1px solid #d0dfc1;background:#fff;border-radius:8px;padding:12px 23px;font-size:17px;min-height:48px}.byte-count-picker button[aria-pressed=true]{background:#e4efd2;border-color:#668e49;color:#365e28}.byte-picture{background:#f4f8ec;border:2px solid #d2e1c3;border-radius:12px;padding:18px;margin:16px 0}.byte-picture h3{font-size:19px;margin:0 0 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}.byte-picture h3 span{font-size:13px;color:#65834f;font-weight:400}.bit-switches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px}.bit-switches button{display:grid;place-items:center;min-height:53px;border:1px solid #bfcfb0;background:#fff;border-radius:7px;font-size:24px;color:#657d55}.bit-switches button[aria-pressed=true]{background:#245a43;color:#f4f9dc;border-color:#245a43}.byte-total{padding:22px;background:#eaf2dc;border:1px solid #cfdfbd;border-radius:11px;margin-top:20px}.byte-total>strong{font-size:29px;color:#355c28;line-height:1.5}.byte-total p{font-size:16px;line-height:1.9;color:#4c6d3c;margin:15px 0}.backup-pictures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0}.backup-pictures button{min-width:0;display:flex;align-items:center;flex-direction:column;gap:12px;text-align:center;padding:20px 10px;border:2px solid #d4dfca;border-radius:11px;background:#f8fbf2}.backup-pictures button strong{font-size:16px;line-height:1.6;font-weight:550}.backup-pictures button span{font-size:13px;line-height:1.7;color:#536f43}.backup-pictures button.is-selected{outline:3px solid #255a40;outline-offset:2px}.backup-pictures button.data-unavailable{background:#f7eee3;border-color:#dbc5a7}.backup-pictures button.data-unavailable span{color:#8b643a}.backup-pictures .lesson-picture{width:67px;height:67px}.same-disk-caption{font-size:14px;line-height:1.85;color:#735f42;background:#f7f0e5;padding:14px;border-radius:7px;margin:0 0 21px}
@keyframes visual-data-flow{to{stroke-dashoffset:-28}}
@container(max-width:560px){.pc-diagram{aspect-ratio:360/650}.pc-wide{display:none}.pc-tall{display:block}.pc-board-surface{inset:7% 3% 23%}.diagram-caption{font-size:9px;top:2.5%}.part-mainboard{left:7%;top:9%;width:85%;height:13%;padding:10px 12px;grid-template-columns:46px 1fr}.part-mainboard .lesson-picture{width:43px;height:43px}.part-cpu{left:8%;top:28%;width:38%;height:22%}.part-ram{left:55%;top:28%;width:37%;height:22%}.part-ssd{left:8%;top:54%;width:38%;height:20%}.part-power{left:8%;top:80%;width:84%;height:17%;padding:10px 13px}.pc-diagram-part strong{font-size:17px}.pc-diagram-part small{font-size:12px}.pc-diagram-part .lesson-picture{width:50px;height:50px}.part-mainboard .lesson-picture{width:43px;height:43px}.part-ssd .lesson-picture{width:43px;height:43px}.simulation-state{grid-template-columns:1fr}.simulation-state span{font-size:16px}.simulation-state b,.simulation-state em{font-size:13px}.network-diagram{aspect-ratio:360/650}.network-wide{display:none}.network-tall{display:block}.local-network-boundary{left:0;top:2%;width:100%;height:74%}.local-network-boundary>span{font-size:10px;left:12px;top:12px}.network-picture-node{width:36%;height:14%;padding:7px 6px;gap:3px}.network-picture-node .lesson-picture{width:37px;height:37px}.network-picture-node strong{font-size:15px}.network-picture-node small{font-size:11px}.node-pc{left:7%;top:9%}.node-switch{left:7%;top:32%}.node-router{left:7%;top:55%}.node-printer{left:58%;top:32%}.node-phone{left:58%;top:55%}.node-internet{left:7%;top:83%}.network-edge-status{left:53%;top:82%;width:42%;font-size:11px;text-align:left}.network-scenarios{gap:7px}.network-scenarios button{font-size:13px;padding:12px 6px}.network-scenarios .lesson-picture{width:33px;height:33px}.outage-control .button{width:100%;font-size:13px}.network-edge-status.is-offline{font-size:11px}.picture-sequence{grid-template-columns:1fr;gap:9px}.picture-sequence>button{display:grid;grid-template-columns:70px 1fr;align-items:center;justify-items:start;min-height:105px;padding:17px 18px;gap:18px;text-align:left}.picture-sequence button>small{top:8px;left:auto;right:12px;font-size:12px}.picture-sequence strong{font-size:20px}.sequence-arrow{transform:rotate(90deg);font-size:23px;line-height:1}.picture-sequence .lesson-picture{width:65px;height:65px}.bit-switches{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.bit-switches button{min-height:55px}.byte-total>strong{font-size:26px}.backup-pictures{grid-template-columns:1fr 1fr;gap:14px}.backup-pictures>button:last-child{grid-column:1/3;display:grid;grid-template-columns:70px 1fr;text-align:left;align-items:center;justify-items:start;padding:18px}.backup-pictures>button:last-child .lesson-picture{grid-row:1/3}.backup-pictures>button:last-child strong{align-self:end}.backup-pictures>button:last-child span{align-self:start}.backup-pictures button strong{font-size:15px}.backup-pictures button span{font-size:12px}.backup-pictures .lesson-picture{width:58px;height:58px}}
@media(max-width:760px){.lesson-visual{scroll-margin-top:205px}}
@media(max-width:520px){.lesson-visual{padding:23px 16px;border-radius:12px}.lesson-visual>h2{font-size:29px}.visual-intro{font-size:17px}.visual-toolbar{gap:9px}.visual-toolbar .button{font-size:14px;padding:12px;width:100%}.visual-help{font-size:14px}.visual-stepper{padding:20px 16px}.visual-stepper h3{font-size:22px}.visual-stepper>p{font-size:16px}.stepper-top .eyebrow{font-size:9px}.stepper-controls .button{font-size:12px;padding:11px 13px}.step-dots{gap:4px}.step-dots i{width:6px;height:6px}.visual-explanation{padding:21px 17px}.visual-explanation-title{gap:10px}.visual-explanation-title .lesson-picture{width:44px;height:44px}.visual-explanation h3{font-size:23px}.visual-explanation>p{font-size:16px}.visual-explanation .de-line{font-size:15px}.visual-explanation .eyebrow{font-size:9px}.visual-bottom p{font-size:15px}.visual-footnote{font-size:12px}.diagram-legend{font-size:12px;gap:11px}.same-disk-caption{font-size:14px}.byte-count-picker{display:grid;grid-template-columns:1fr 1fr}.byte-count-picker button{font-size:17px}.byte-picture{padding:16px 13px}.byte-total{padding:20px 16px}.byte-total .de-line{font-size:15px}}
@media(prefers-reduced-motion:reduce){.data-trace.is-flow,.net-wire.is-flow{animation:none}}
.lesson-jumps .visual-jump{grid-column:1/-1;background:#f4eddb;border-color:#dcc59f;color:#795a31}.visual-return{display:block;font-size:14px;min-height:44px;margin-top:16px;color:#315f2d}.visual-explanation{scroll-margin-top:140px}.pc-diagram,.network-diagram,.picture-sequence,.backup-pictures{scroll-margin-top:145px}
@media(max-width:760px){.visual-explanation,.pc-diagram,.network-diagram,.picture-sequence,.backup-pictures{scroll-margin-top:205px}}
.mini-flow-controls{display:flex;align-items:center;justify-content:space-between;gap:15px;background:#edf4e3;border:1px solid #cddfbc;border-radius:9px;padding:15px;margin:17px 0}.mini-flow-controls>span{min-width:0}.mini-flow-controls small{font-size:10px;display:block;letter-spacing:1px;color:#64824d;margin-bottom:5px}.mini-flow-controls strong{font-size:15px;font-weight:500;line-height:1.65;display:block;color:#355d2a}.mini-flow-controls>div{display:flex;gap:8px;flex-shrink:0}.mini-flow-controls button{width:44px;height:44px;border:1px solid #b7cea2;background:#fff;border-radius:7px;font-size:20px;color:#3d652e}.mini-flow-controls button:disabled{opacity:.35}.lesson-visual{scroll-margin-top:185px}.visual-explanation{scroll-margin-top:185px}.pc-diagram,.network-diagram,.picture-sequence,.backup-pictures{scroll-margin-top:190px}
@media(max-width:760px){.lesson-visual,.visual-explanation,.pc-diagram,.network-diagram,.picture-sequence,.backup-pictures{scroll-margin-top:205px}.mini-flow-controls{align-items:flex-start;padding:13px;gap:10px}.mini-flow-controls strong{font-size:14px}.mini-flow-controls>div{gap:5px}.mini-flow-controls button{width:40px;height:44px}.mini-flow-controls small{font-size:9px}}
@container(min-width:561px){.part-cpu,.part-ram{top:24%;height:30%}.part-ssd{top:52.5%;height:25%}.network-picture-node{top:23%;height:33%;padding:6px}.network-picture-node .lesson-picture{width:36px;height:36px}.network-picture-node strong{font-size:14px}.node-printer,.node-phone{top:59%;height:30%}}
@container(max-width:560px){.pc-diagram{min-height:620px}.network-diagram{min-height:700px}.network-picture-node{height:18%;padding:6px}.network-picture-node .lesson-picture{width:33px;height:33px}.network-picture-node strong{font-size:14px}.node-pc{top:6.85%}.node-switch,.node-printer{top:29.92%}.node-router,.node-phone{top:53%}.node-internet{top:80.54%}}
.pc-diagram,.network-diagram{width:100%;max-width:100%}