:root {
  --ink: #142a2b;
  --muted: #647474;
  --paper: #f5f2e9;
  --panel: #fffdf8;
  --line: #d9ddd5;
  --navy: #16383a;
  --teal: #0b7c72;
  --mint: #9bd5c4;
  --mint-light: #dff1e9;
  --orange: #f26b38;
  --yellow: #ffc85a;
  --red: #d9534f;
  --blue: #3c78d8;
  --shadow: 0 18px 50px rgba(28, 53, 51, .10);
  --mono: "DejaVu Sans Mono", "SFMono-Regular", Consolas, monospace;
  --sans: Inter, Avenir, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { color: inherit; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 272px; background: var(--navy); color: #fff; padding: 34px 24px 26px; display: flex; flex-direction: column; z-index: 50; }
.brand { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; font-size: 21px; letter-spacing: -.5px; }
.brand strong { font-weight: 800; }
.brand-mark { width: 35px; height: 35px; display: grid; place-items: center; background: var(--orange); border-radius: 9px 9px 9px 2px; transform: rotate(-4deg); }
.brand-mark svg { width: 21px; height: 21px; transform: rotate(4deg); stroke-width: 2.2; }
.course-label { margin: 58px 9px 15px; color: #8ea4a3; font-size: 10px; font-weight: 800; letter-spacing: 1.8px; }
.lesson-nav { display: grid; gap: 7px; }
.nav-item { position: relative; width: 100%; display: grid; grid-template-columns: 30px 1fr 16px; gap: 10px; align-items: center; border: 0; background: transparent; color: #aac0bd; padding: 13px 10px; text-align: left; border-radius: 10px; cursor: pointer; transition: .2s ease; }
.nav-item::before { content: ""; position: absolute; left: -24px; width: 3px; height: 0; background: var(--orange); border-radius: 0 3px 3px 0; transition: .2s; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.045); }
.nav-item.active { color: #fff; background: rgba(255,255,255,.075); }
.nav-item.active::before { height: 36px; }
.nav-item.completed .nav-number { color: var(--navy); background: var(--mint); border-color: var(--mint); font-size: 0; }
.nav-item.completed .nav-number::after { content: "✓"; font-size: 12px; font-weight: 800; }
.nav-item > svg { width: 15px; opacity: .35; }
.nav-item.active > svg { opacity: 1; color: var(--orange); }
.nav-number { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid #56706f; border-radius: 50%; font: 500 10px var(--mono); }
.nav-item strong { display: block; font-size: 12px; font-weight: 700; }
.nav-item small { display: block; margin-top: 3px; font-size: 9px; color: #829b99; }
.sidebar-progress { margin-top: auto; padding: 17px 15px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.045); border-radius: 10px; }
.progress-copy { display: flex; justify-content: space-between; font-size: 10px; }
.progress-copy span { color: #a6b9b7; }
.progress-copy strong { color: var(--yellow); font-family: var(--mono); }
.progress-track { height: 4px; margin: 11px 0 10px; background: #2a4a4b; border-radius: 10px; overflow: hidden; }
.progress-track span { display: block; width: 0; height: 100%; background: var(--yellow); border-radius: inherit; transition: width .4s ease; }
.sidebar-progress small { color: #79928f; font-size: 8px; line-height: 1.5; }

.page-wrap { margin-left: 272px; min-width: 0; }
.topbar { height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 42px; border-bottom: 1px solid var(--line); background: rgba(245,242,233,.92); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 40; }
.breadcrumb { display: flex; align-items: center; gap: 11px; font-size: 9px; letter-spacing: 1.2px; }
.breadcrumb span { color: #7a8988; font-weight: 700; }
.breadcrumb strong { font-size: 9px; }
.breadcrumb svg { width: 12px; height: 12px; color: #9eaaa9; }
.top-actions { display: flex; align-items: center; gap: 18px; }
.lesson-time { font: 500 9px var(--mono); color: #70817f; }
.lesson-time::first-letter { color: var(--orange); }
.icon-button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); background: #faf8f2; border-radius: 8px; cursor: pointer; }
.icon-button svg { width: 17px; color: #56706e; }
.icon-button.muted svg { opacity: .35; }
.menu-button { display: none; }

main { max-width: 1320px; margin: 0 auto; padding: 50px 54px 70px; }
.content-section { display: none; animation: sectionIn .35s ease both; }
.content-section.active { display: block; }
@keyframes sectionIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lesson-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; margin-bottom: 30px; }
.eyebrow { display: flex; align-items: center; gap: 9px; font-size: 9px; font-weight: 800; letter-spacing: 1.5px; color: #6e7f7e; }
.eyebrow span { color: var(--orange); }
.eyebrow i { width: 20px; height: 1px; background: #aab5b3; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 13px 0 10px; font-size: clamp(36px, 4vw, 56px); letter-spacing: -3.2px; line-height: .98; }
h1 em, h2 em { font-style: normal; color: var(--teal); }
.lesson-heading > div:first-child > p, .section-intro > p, .section-intro > div > p { margin: 0; color: var(--muted); font-size: 13px; }
.learning-goal { max-width: 320px; display: flex; gap: 12px; padding: 16px 18px; background: #fff8df; border: 1px solid #eadba7; border-radius: 10px; }
.learning-goal > svg { flex: 0 0 auto; color: #b47b07; }
.learning-goal span { display: block; margin-bottom: 4px; font-size: 8px; font-weight: 800; letter-spacing: 1.2px; color: #9a771e; }
.learning-goal strong { display: block; font-size: 11px; line-height: 1.4; }

.simulator-card { border: 1px solid #cfd8d3; background: var(--panel); box-shadow: var(--shadow); border-radius: 14px; overflow: hidden; }
.sim-toolbar { height: 51px; padding: 0 19px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.sim-title { display: flex; align-items: center; gap: 8px; }
.sim-title strong { font: 500 10px var(--mono); letter-spacing: .6px; }
.sim-title small { padding-left: 8px; border-left: 1px solid var(--line); color: #84918f; font-size: 9px; }
.live-dot { width: 7px; height: 7px; background: #2ba471; box-shadow: 0 0 0 4px #def3e9; border-radius: 50%; }
.sim-stats { display: flex; align-items: center; gap: 18px; color: #768684; font: 400 8px var(--mono); }
.sim-stats strong { color: var(--ink); }
.status-online { display: inline-block; width: 5px; height: 5px; background: #39a979; border-radius: 50%; margin-right: 4px; }
.sim-body { min-height: 440px; display: grid; grid-template-columns: minmax(0, 1fr) 296px; }
.network-stage { position: relative; overflow: hidden; min-height: 440px; border-right: 1px solid var(--line); background-color: #eef3ec; background-image: radial-gradient(#c9d4cb 1px, transparent 1px); background-size: 17px 17px; }
.network-stage::after { content: ""; position: absolute; width: min(92%, 720px); height: 520px; left: 50%; bottom: -250px; transform: translateX(-50%); border: 1px dashed rgba(31,86,78,.26); background: rgba(143,203,183,.10); border-radius: 50%; }
.zone-label { position: absolute; z-index: 2; left: 18px; bottom: 15px; color: #769088; font: 500 8px var(--mono); letter-spacing: .7px; }
.internet-cloud { position: absolute; z-index: 5; top: 32px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; color: #617979; }
.internet-cloud svg { width: 39px; height: 39px; color: var(--teal); }
.internet-cloud span { margin-top: 4px; font: 500 8px var(--mono); letter-spacing: 1px; }
.internet-cloud small { margin-top: 2px; font-size: 7px; color: #8c9b99; }
.device { position: absolute; z-index: 7; display: flex; align-items: center; gap: 10px; }
.device-icon { position: relative; width: 54px; height: 54px; display: grid; flex: 0 0 auto; place-items: center; background: #fff; color: var(--teal); border: 1px solid #c4d5ce; border-radius: 14px; box-shadow: 0 7px 15px rgba(31,66,61,.08); }
.device-icon svg { width: 29px; height: 29px; stroke-width: 1.5; }
.bitcoin-icon { color: #d37613; background: #fff9ec; border-color: #ead2aa; }
.device-copy { background: rgba(255,253,248,.9); padding: 8px 10px; border-radius: 8px; box-shadow: 0 3px 10px rgba(38,62,59,.05); }
.device-copy strong, .device-copy span, .device-copy small { display: block; white-space: nowrap; }
.device-copy strong { font-size: 10px; }
.device-copy span { margin: 2px 0; color: var(--teal); font: 500 9px var(--mono); }
.device-copy small { color: #80908e; font-size: 7px; }
.router-device { left: 50%; top: 187px; transform: translateX(-27px); }
.laptop-device { left: 9%; bottom: 61px; }
.node-device { left: 74%; bottom: 61px; }
.active-device .device-icon { box-shadow: 0 0 0 4px #d5ece3, 0 7px 15px rgba(31,66,61,.08); }
.you-badge { position: absolute; left: 15px; top: -18px; color: #fff; background: var(--orange); padding: 3px 7px; font: 700 7px var(--mono); border-radius: 4px; }
.info-hotspot { position: absolute; width: 18px; height: 18px; display: grid; place-items: center; right: -4px; top: -6px; border: 0; color: #fff; background: var(--teal); font: 700 9px var(--mono); border-radius: 50%; cursor: pointer; box-shadow: 0 2px 7px rgba(0,0,0,.15); }
.network-links { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.network-links line { fill: none; stroke: #91aaa3; stroke-width: 1.5; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
.connection { position: absolute; z-index: 4; pointer-events: none; }
.line-internet { top: 135px; left: calc(50% + 8px); }
.line-laptop { left: 29%; bottom: 90px; }
.line-node { right: 18%; bottom: 90px; }
.hop-label { position: absolute; left: 50%; top: -12px; transform: translateX(-50%); color: #849792; font: 400 7px var(--mono); white-space: nowrap; }
.line-internet .hop-label { left: 0; top: 0; }
.packet { display: none; position: absolute; z-index: 20; left: 11%; top: 77%; width: 34px; height: 27px; place-items: center; color: #fff; background: var(--orange); border: 3px solid #fff; border-radius: 7px; box-shadow: 0 0 0 5px rgba(242,107,56,.18), 0 5px 14px rgba(173,68,25,.35); }
.packet::before { content: ""; position: absolute; inset: -9px; border: 2px solid rgba(242,107,56,.35); border-radius: 10px; animation: packetPulse 1s ease-in-out infinite; }
.packet svg { width: 14px; height: 14px; fill: currentColor; stroke-width: 0; }
.packet.moving { box-shadow: 0 0 0 5px rgba(242,107,56,.22), -15px 7px 20px rgba(242,107,56,.25); }
@keyframes packetPulse { 50% { opacity: .2; transform: scale(1.18); } }
.packet-label { display: none; position: absolute; z-index: 15; color: var(--orange); font: 700 7px var(--mono); letter-spacing: .7px; }
.device.packet-stop .device-icon { animation: deviceReceive .7s ease both; }
@keyframes deviceReceive { 35% { box-shadow: 0 0 0 9px rgba(242,107,56,.25), 0 7px 15px rgba(31,66,61,.08); transform: scale(1.08); } }
.stage-callout { position: absolute; z-index: 9; left: 50%; bottom: 18px; transform: translateX(-50%); min-width: 170px; text-align: center; padding: 9px 12px; background: rgba(255,253,248,.92); border: 1px solid #d4ddd8; border-radius: 8px; box-shadow: 0 6px 16px rgba(35,66,61,.08); transition: .25s; }
.stage-callout span { display: block; color: var(--orange); font: 500 7px var(--mono); letter-spacing: 1px; }
.stage-callout strong { display: block; margin-top: 3px; font-size: 9px; }
.stage-callout.success { border-color: #98cbb7; background: #ecf8f2; }
.stage-callout.blocked { border-color: #e3aaa3; background: #fff0ed; }
.stage-callout.blocked span { color: var(--red); }

.control-panel { padding: 22px 18px 17px; background: #fbfaf5; }
.control-step { display: flex; gap: 9px; align-items: center; }
.step-index { width: 21px; height: 21px; display: grid; place-items: center; color: #fff; background: var(--navy); border-radius: 50%; font: 500 8px var(--mono); }
.control-step strong, .control-step small { display: block; }
.control-step strong { font-size: 10px; }
.control-step small { color: #84918f; font-size: 8px; }
.choice-stack { display: grid; gap: 6px; margin-top: 11px; }
.choice-card { display: grid; grid-template-columns: 27px 1fr 14px; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; text-align: left; background: #fff; border: 1px solid #d9dfdb; border-radius: 7px; cursor: pointer; transition: .2s; }
.choice-card:hover { border-color: #87afa5; transform: translateY(-1px); }
.choice-card.selected { background: #eef7f3; border-color: var(--teal); box-shadow: inset 3px 0 var(--teal); }
.choice-card > svg { width: 19px; color: var(--teal); }
.choice-card strong, .choice-card small { display: block; }
.choice-card strong { font-size: 9px; }
.choice-card small { margin-top: 2px; color: #71817f; font: 400 8px var(--mono); }
.choice-card > i { width: 12px; height: 12px; border: 1px solid #bec9c5; border-radius: 50%; }
.choice-card.selected > i { border: 3px solid var(--teal); background: #fff; }
.second-step { margin-top: 18px; }
.port-toggle { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 10px; border: 1px solid #d9dfdb; background: #fff; border-radius: 7px; overflow: hidden; }
.port-toggle button { padding: 8px 3px; border: 0; border-right: 1px solid #d9dfdb; background: transparent; cursor: pointer; }
.port-toggle button:last-child { border-right: 0; }
.port-toggle button.selected { background: var(--navy); color: #fff; }
.port-toggle strong, .port-toggle small { display: block; }
.port-toggle strong { font: 500 10px var(--mono); }
.port-toggle small { margin-top: 2px; font-size: 6px; color: #788987; }
.port-toggle .selected small { color: #a9c0bd; }
.send-button { width: 100%; height: 42px; display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 19px; color: #fff; background: var(--orange); border: 0; border-radius: 7px; font-size: 9px; font-weight: 800; letter-spacing: .8px; cursor: pointer; box-shadow: 0 7px 15px rgba(242,107,56,.2); transition: .2s; }
.send-button:hover { background: #db5828; transform: translateY(-1px); }
.send-button:disabled { opacity: .55; cursor: wait; transform: none; }
.send-button svg { width: 15px; }
.control-note { display: flex; gap: 5px; align-items: flex-start; margin: 10px 3px 0; color: #899694; font-size: 7px; line-height: 1.4; }
.control-note svg { flex: 0 0 auto; width: 11px; height: 11px; }
.event-tray { display: none; padding: 16px 19px 19px; border-top: 1px solid var(--line); background: #fff; }
.event-tray.visible { display: block; animation: trayIn .3s ease both; }
@keyframes trayIn { from { opacity: 0; transform: translateY(-6px); } }
.event-tray-head { display: flex; justify-content: space-between; align-items: center; }
.event-tray-head span, .event-tray-head strong { display: block; }
.event-tray-head span { color: var(--orange); font: 500 7px var(--mono); letter-spacing: 1px; }
.event-tray-head strong { margin-top: 3px; font-size: 11px; }
.event-tray-head button { display: flex; align-items: center; gap: 5px; border: 0; background: transparent; color: #778886; font-size: 8px; cursor: pointer; }
.event-tray-head button svg { width: 13px; }
.journey-steps { display: flex; align-items: center; margin-top: 15px; }
.journey-step { display: flex; align-items: center; gap: 7px; min-width: 110px; opacity: .36; transition: .25s; }
.journey-step > span { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #9ba9a6; border-radius: 50%; font: 500 8px var(--mono); }
.journey-step strong, .journey-step small { display: block; }
.journey-step strong { font-size: 8px; }
.journey-step small { font-size: 7px; color: #7f8c8a; }
.journey-step.active, .journey-step.done { opacity: 1; }
.journey-step.active > span { color: #fff; background: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 4px #ffeadf; }
.journey-step.done > span { color: #fff; background: var(--teal); border-color: var(--teal); font-size: 0; }
.journey-step.done > span::after { content: "✓"; font-size: 10px; font-weight: 800; }
.journey-step.blocked > span { background: var(--red); border-color: var(--red); }
.journey-line { height: 1px; flex: 1; min-width: 12px; background: #d7ddda; margin: 0 8px; }

.analogy-strip { display: flex; align-items: center; justify-content: space-around; margin-top: 24px; padding: 17px 20px; background: #e9eee8; border-radius: 10px; }
.analogy-strip > div { display: flex; align-items: center; gap: 10px; }
.analogy-strip > i { height: 25px; width: 1px; background: #c8d1cc; }
.mini-icon { width: 31px; height: 31px; display: grid; place-items: center; color: var(--teal); background: #fff; font: 700 16px var(--mono); border-radius: 8px; }
.mini-icon svg { width: 17px; }
.analogy-strip p { margin: 0; }
.analogy-strip strong, .analogy-strip small { display: block; }
.analogy-strip strong { font-size: 9px; }
.analogy-strip small { margin-top: 2px; color: #7b8987; font-size: 8px; }
.continue-button { display: flex; align-items: center; gap: 10px; margin: 28px 0 0 auto; padding: 13px 18px; border: 0; color: #fff; background: var(--navy); border-radius: 7px; font-size: 8px; font-weight: 800; letter-spacing: .8px; cursor: pointer; }
.continue-button svg { width: 14px; }

.section-intro { margin-bottom: 32px; }
.section-intro h2 { max-width: 710px; margin: 12px 0 9px; font-size: clamp(32px, 3.7vw, 50px); letter-spacing: -2.5px; line-height: 1.02; }
.address-scenario { display: grid; grid-template-columns: 1fr 1.05fr; gap: 46px; align-items: center; padding: 34px 44px; background: #eaf1eb; border: 1px solid #d4ddd6; border-radius: 14px; }
.perspective-visual { position: relative; height: 335px; }
.perspective-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; justify-content: center; border: 1px dashed; border-radius: 50%; }
.perspective-ring span { position: absolute; top: 10px; font: 500 7px var(--mono); letter-spacing: 1px; }
.public-ring { width: 325px; height: 325px; border-color: #9db8ae; background: rgba(255,255,255,.22); color: #6b8c82; }
.private-ring { width: 227px; height: 227px; border-color: #77a99a; background: rgba(164,213,196,.18); color: #367b6b; }
.local-ring { width: 129px; height: 129px; border-color: var(--orange); background: rgba(242,107,56,.1); color: var(--orange); }
.perspective-device { position: absolute; left: 50%; top: 54%; transform: translate(-50%,-50%); width: 54px; height: 48px; display: grid; place-items: center; color: var(--navy); background: #fff; border: 1px solid #c6d4ce; border-radius: 10px; box-shadow: 0 7px 15px rgba(27,61,56,.12); }
.perspective-device svg { width: 28px; height: 28px; }
.address-cards { display: grid; gap: 9px; }
.address-card { position: relative; display: grid; grid-template-columns: 92px 132px 1fr; align-items: center; gap: 10px; width: 100%; padding: 15px; text-align: left; background: #fff; border: 1px solid #d4ddd7; border-radius: 9px; cursor: pointer; transition: .2s; }
.address-card:hover { transform: translateX(3px); border-color: #89aa9f; }
.address-card.selected { border-color: var(--teal); box-shadow: inset 4px 0 var(--teal), 0 7px 18px rgba(24,77,68,.08); }
.address-card > strong { font: 500 12px var(--mono); }
.address-card p { margin: 0; color: #647573; font-size: 9px; line-height: 1.45; }
.address-card > small { display: none; grid-column: 2 / 4; color: var(--teal); font-size: 8px; }
.address-card.selected > small { display: flex; align-items: center; gap: 5px; }
.address-card > small svg { width: 12px; height: 12px; }
.address-tag { width: fit-content; padding: 5px 7px; font: 500 7px var(--mono); letter-spacing: .6px; border-radius: 4px; }
.tag-local { color: #bb4f28; background: #ffeadf; }
.tag-private { color: #17705f; background: #def1e9; }
.tag-public { color: #376fb4; background: #e5effe; }
.explain-panel { display: grid; grid-template-columns: 50px 1fr auto; gap: 16px; align-items: center; margin-top: 17px; padding: 20px 24px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.panel-number { font: 500 24px var(--mono); color: #cad3cf; }
.explain-panel h3 { margin: 0 0 5px; font-size: 14px; }
.explain-panel p { margin: 0; color: #687876; font-size: 10px; line-height: 1.55; }
.explain-panel code { padding: 9px 12px; color: #d7e5df; background: var(--navy); border-radius: 6px; font: 400 10px var(--mono); }
.range-card { display: grid; grid-template-columns: .8fr 1.2fr; gap: 35px; margin-top: 28px; padding: 27px 30px; color: #fff; background: var(--navy); border-radius: 12px; }
.section-kicker { color: var(--orange); font: 500 8px var(--mono); letter-spacing: 1.2px; }
.range-card h3 { margin: 7px 0; font-size: 19px; }
.range-card p { margin: 0; color: #a4b8b5; font-size: 9px; line-height: 1.5; }
.range-list { display: grid; gap: 7px; }
.range-list > span { display: grid; grid-template-columns: minmax(230px, 1fr) 130px; align-items: center; gap: 12px; padding: 9px 12px; background: rgba(255,255,255,.07); border-radius: 6px; color: #c8d6d3; }
.range-list code { white-space: nowrap; font: 400 9px var(--mono); color: inherit; }
.range-list strong { color: var(--yellow); }
.range-list small { text-align: right; color: #849d99; font: 400 8px var(--sans); }

.helper-layout { display: grid; grid-template-columns: 290px 1fr; min-height: 430px; border: 1px solid var(--line); background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.helper-tabs { padding: 20px 14px; background: #f0f1eb; border-right: 1px solid var(--line); }
.helper-tab { width: 100%; display: grid; grid-template-columns: 37px 1fr 15px; align-items: center; gap: 10px; padding: 13px 10px; text-align: left; background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.helper-tab:hover { background: rgba(255,255,255,.7); }
.helper-tab.selected { background: #fff; box-shadow: 0 5px 14px rgba(31,58,53,.07); }
.helper-tab > span { width: 35px; height: 35px; display: grid; place-items: center; color: var(--teal); background: #e0eee8; border-radius: 8px; font: 700 17px var(--mono); }
.helper-tab > span svg { width: 19px; }
.helper-tab > div strong, .helper-tab > div small { display: block; }
.helper-tab > div strong { font-size: 10px; }
.helper-tab > div small { margin-top: 2px; color: #7f8d8b; font-size: 8px; }
.helper-tab > svg { width: 13px; opacity: .25; }
.helper-tab.selected > svg { opacity: 1; color: var(--orange); }
.helper-detail { display: grid; grid-template-columns: 1fr .9fr; min-width: 0; }
.helper-illustration { position: relative; overflow: hidden; min-height: 430px; background-color: #e8f1eb; background-image: radial-gradient(#c7d6ce 1px,transparent 1px); background-size: 17px 17px; }
.helper-illustration::before { content: ""; position: absolute; width: 260px; height: 260px; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 1px dashed #8fb9ab; border-radius: 50%; }
.helper-links { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.helper-links line { fill: none; stroke: #79a99c; stroke-width: 1.5; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.router-orb { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 90px; height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; background: var(--teal); border: 7px solid #cce7dc; border-radius: 50%; box-shadow: 0 7px 18px rgba(27,84,73,.2); }
.router-orb svg { width: 31px; height: 31px; }
.router-orb span { margin-top: 4px; font: 500 7px var(--mono); letter-spacing: .7px; }
.lease { position: absolute; z-index: 2; min-width: 127px; padding: 9px; background: #fff; border: 1px solid #bed3ca; border-radius: 8px; box-shadow: 0 5px 12px rgba(31,72,63,.08); }
.lease > span { position: absolute; width: 24px; height: 24px; display: grid; place-items: center; left: -11px; top: -11px; color: #fff; background: var(--orange); border-radius: 50%; font: 500 7px var(--mono); }
.lease strong, .lease small { display: block; }
.lease strong { font: 500 9px var(--mono); }
.lease small { margin-top: 3px; color: #7b8c89; font-size: 7px; }
.lease-one { left: 7%; top: 19%; }
.lease-two { right: 6%; top: 19%; }
.lease-three { left: 12%; bottom: 15%; }
.helper-copy { align-self: center; padding: 35px; }
.helper-count { color: var(--orange); font: 500 8px var(--mono); letter-spacing: 1px; }
.helper-copy h3 { margin: 10px 0 12px; font-size: 22px; line-height: 1.2; letter-spacing: -.6px; }
.helper-copy > p { color: #657572; font-size: 11px; line-height: 1.65; }
.remember { display: flex; gap: 9px; margin-top: 23px; padding: 13px; background: #fff7df; border-left: 3px solid var(--yellow); }
.remember svg { flex: 0 0 auto; width: 17px; color: #ad790e; }
.remember p { margin: 0; color: #6c654b; font-size: 9px; line-height: 1.5; }
.remember strong { display: block; color: #8d6919; font-size: 8px; }
.helper-illustration.simple-visual { display: grid; place-items: center; }
.simple-diagram { position: relative; z-index: 2; width: 78%; padding: 25px; text-align: center; background: rgba(255,255,255,.9); border: 1px solid #c4d7ce; border-radius: 12px; box-shadow: 0 10px 22px rgba(26,75,65,.1); }
.simple-diagram svg { width: 48px; height: 48px; color: var(--teal); }
.simple-diagram strong { display: block; margin: 10px 0 5px; font-size: 15px; }
.simple-diagram code { color: var(--orange); font: 500 11px var(--mono); }
.simple-flow { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 17px; }
.simple-flow span { padding: 7px 9px; background: #edf4f0; border-radius: 5px; font: 500 7px var(--mono); }
.simple-flow i { color: var(--orange); font-style: normal; }
.port-table-card { margin-top: 27px; padding: 25px 28px; background: #fff; border: 1px solid var(--line); border-radius: 11px; }
.port-table-card > div:first-child { display: flex; align-items: baseline; gap: 20px; }
.port-table-card h3 { margin: 0; font-size: 16px; }
.port-grid { display: grid; grid-template-columns: repeat(5,1fr); margin-top: 18px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.port-grid > div { display: flex; align-items: center; gap: 8px; padding: 13px; border-right: 1px solid var(--line); }
.port-grid > div:last-child { border-right: 0; }
.port-grid > div > strong { color: var(--teal); font: 500 12px var(--mono); }
.port-grid span, .port-grid small { display: block; }
.port-grid span { font-size: 8px; font-weight: 700; }
.port-grid small { color: #83918e; font-size: 7px; font-weight: 400; }
.port-grid .bitcoin-port { background: #fff9e9; }
.port-grid .bitcoin-port > strong { color: #c57a0d; }
.port-grid .danger-port { background: #fff0ed; }
.port-grid .danger-port > strong { color: var(--red); }

.terminal-lab { display: grid; grid-template-columns: 260px 1fr; min-height: 510px; border: 1px solid #203d3e; background: #102d2f; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.mission-list { padding: 23px 15px; background: #eef0e9; }
.mission-list > .section-kicker { display: block; margin: 0 8px 13px; }
.mission { display: grid; grid-template-columns: 27px 1fr 13px; gap: 9px; align-items: center; width: 100%; padding: 11px 8px; text-align: left; border: 0; background: transparent; border-radius: 7px; cursor: pointer; }
.mission:hover { background: #fff; }
.mission.active { background: #fff; box-shadow: 0 4px 10px rgba(32,58,52,.07); }
.mission.completed > span { color: #fff; background: var(--teal); border-color: var(--teal); font-size: 0; }
.mission.completed > span::after { content: "✓"; font-size: 9px; }
.mission > span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #b9c4c0; border-radius: 50%; font: 500 8px var(--mono); }
.mission strong, .mission small { display: block; }
.mission strong { font-size: 9px; }
.mission small { margin-top: 2px; color: #788986; font: 400 7px var(--mono); }
.mission > i { width: 8px; height: 8px; border-radius: 50%; background: #ccd3cf; }
.mission.active > i { background: var(--orange); box-shadow: 0 0 0 3px #ffdfd3; }
.terminal-wrap { display: grid; grid-template-rows: 42px 1fr auto; min-width: 0; }
.terminal-bar { display: flex; align-items: center; padding: 0 17px; color: #77918f; background: #173638; border-bottom: 1px solid #264649; font: 400 8px var(--mono); }
.terminal-bar > span { display: flex; gap: 5px; }
.terminal-bar > span i { width: 8px; height: 8px; background: #e86448; border-radius: 50%; }
.terminal-bar > span i:nth-child(2) { background: #e7b94c; }
.terminal-bar > span i:nth-child(3) { background: #58a879; }
.terminal-bar strong { margin: 0 auto; font-weight: 400; }
.terminal-bar small { color: #e4b857; font: 500 7px var(--mono); letter-spacing: .7px; }
.terminal-screen { min-height: 385px; max-height: 430px; overflow-y: auto; padding: 21px; color: #b7cfca; font: 400 10px/1.65 var(--mono); scrollbar-color: #315456 transparent; }
.terminal-welcome { color: #6f9290; }
.terminal-welcome b { color: var(--yellow); }
.terminal-entry { margin: 10px 0 15px; white-space: pre-wrap; }
.terminal-entry .prompt { color: var(--mint); }
.terminal-entry .command { color: #fff; }
.terminal-entry .output { display: block; color: #99aeaa; margin-top: 4px; }
.terminal-entry .highlight { color: var(--yellow); }
#terminalForm { display: flex; gap: 8px; }
#terminalForm label { color: var(--mint); white-space: nowrap; }
#terminalInput { width: 100%; padding: 0; color: #fff; background: transparent; border: 0; outline: 0; font: inherit; caret-color: var(--orange); }
.terminal-tip { display: flex; gap: 10px; align-items: center; padding: 13px 20px; background: #173638; border-top: 1px solid #28494a; }
.terminal-tip svg { color: var(--yellow); flex: 0 0 auto; }
.terminal-tip p { margin: 0; color: #97aaa7; font-size: 8px; }
.terminal-tip strong { display: block; color: #d9e5e2; }
.terminal-tip code { color: var(--yellow); font-family: var(--mono); }

.quiz-intro { display: flex; align-items: flex-end; justify-content: space-between; }
.score-ring { width: 96px; height: 96px; position: relative; display: flex; align-items: baseline; justify-content: center; padding-top: 24px; background: conic-gradient(var(--orange) 0deg, #dde1d9 0deg); border-radius: 50%; }
.score-ring::before { content: ""; position: absolute; inset: 7px; background: var(--paper); border-radius: 50%; }
.score-ring strong, .score-ring span, .score-ring small { position: relative; z-index: 2; }
.score-ring strong { font: 500 25px var(--mono); }
.score-ring span { color: #80908d; font: 500 10px var(--mono); }
.score-ring small { position: absolute; bottom: 20px; font-size: 6px; letter-spacing: 1px; }
.scenario-card { display: flex; gap: 17px; align-items: center; padding: 19px 22px; color: #fff; background: var(--navy); border-radius: 10px; }
.scenario-icon { width: 45px; height: 45px; display: grid; flex: 0 0 auto; place-items: center; color: #744400; background: var(--yellow); border-radius: 9px; }
.scenario-icon svg { width: 27px; height: 27px; }
.scenario-card span { color: var(--yellow); font: 500 7px var(--mono); letter-spacing: 1px; }
.scenario-card p { margin: 4px 0 0; color: #bdd0cd; font-size: 10px; line-height: 1.5; }
.scenario-card p strong { color: #fff; font-family: var(--mono); font-weight: 400; }
.quiz-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.quiz-question { padding: 19px; background: #fff; border: 1px solid var(--line); border-radius: 10px; transition: .2s; }
.quiz-question.correct { border-color: #76b8a1; box-shadow: inset 0 3px #76b8a1; }
.quiz-question.wrong { border-color: #df9b91; box-shadow: inset 0 3px #df9b91; }
.question-head { min-height: 43px; display: flex; gap: 10px; }
.question-head > span { color: var(--orange); font: 500 9px var(--mono); }
.question-head p { margin: 0; font-size: 10px; font-weight: 700; line-height: 1.45; }
.answer-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.answer-options button { min-height: 35px; padding: 6px; background: #f4f3ed; border: 1px solid #e0e2dc; border-radius: 6px; font: 500 8px var(--mono); cursor: pointer; }
.answer-options button:hover { border-color: #8eb0a6; }
.answer-options button.selected { color: #fff; background: var(--teal); border-color: var(--teal); }
.quiz-question.wrong .answer-options button.selected { background: var(--red); border-color: var(--red); }
.quiz-question.correct .answer-options button.selected { background: var(--teal); }
.answer-options button.actual-answer { color: var(--teal); background: #e7f5ef; border-color: var(--teal); }
.answer-feedback { min-height: 0; margin-top: 0; font-size: 8px; transition: .2s; }
.quiz-question.correct .answer-feedback, .quiz-question.wrong .answer-feedback { min-height: 18px; margin-top: 9px; }
.quiz-question.correct .answer-feedback { color: var(--teal); }
.quiz-question.wrong .answer-feedback { color: var(--red); }
.check-button { grid-column: 1 / -1; width: 230px; height: 43px; justify-self: center; margin-top: 8px; color: #fff; background: var(--orange); border: 0; border-radius: 7px; font-size: 9px; font-weight: 800; letter-spacing: 1px; cursor: pointer; }
.check-button:disabled { background: #a7afaa; cursor: not-allowed; }
.completion-card { display: none; align-items: center; gap: 20px; margin-top: 22px; padding: 25px; color: #fff; background: var(--teal); border-radius: 12px; }
.completion-card.visible { display: flex; animation: sectionIn .35s ease; }
.completion-burst { width: 58px; height: 58px; display: grid; place-items: center; flex: 0 0 auto; color: var(--teal); background: var(--yellow); border-radius: 50%; font-size: 25px; font-weight: 800; }
.completion-card > div > span { color: #a9ddd0; font: 500 8px var(--mono); letter-spacing: 1px; }
.completion-card h3 { margin: 5px 0; font-size: 17px; }
.completion-card p { margin: 0; color: #c2e2da; font-size: 9px; }
.completion-card button { margin-left: auto; display: flex; gap: 7px; align-items: center; padding: 11px 14px; color: #fff; background: rgba(0,0,0,.16); border: 1px solid rgba(255,255,255,.25); border-radius: 6px; font-size: 8px; font-weight: 700; cursor: pointer; }
.completion-card button svg { width: 14px; }

footer { display: flex; justify-content: space-between; margin: 0 54px; padding: 23px 0 30px; border-top: 1px solid var(--line); color: #87938f; font: 400 7px var(--mono); letter-spacing: .6px; }
footer p { margin: 0; }
.toast { position: fixed; z-index: 100; right: 24px; bottom: 24px; max-width: 320px; padding: 12px 16px; color: #fff; background: var(--navy); border-left: 4px solid var(--orange); box-shadow: 0 10px 30px rgba(0,0,0,.2); border-radius: 7px; font-size: 10px; line-height: 1.5; opacity: 0; transform: translateY(12px); pointer-events: none; transition: .25s; }
.toast.visible { opacity: 1; transform: none; }
.tooltip-card { display: none; position: fixed; z-index: 90; width: 245px; padding: 15px; color: #d6e4e1; background: var(--navy); border: 1px solid #315355; border-radius: 9px; box-shadow: 0 12px 30px rgba(0,0,0,.23); font-size: 9px; line-height: 1.55; }
.tooltip-card.visible { display: block; animation: sectionIn .2s ease; }
.tooltip-card strong { display: block; color: var(--yellow); margin-bottom: 4px; font-size: 10px; }

@media (max-width: 1080px) {
  .sidebar { width: 235px; padding-left: 18px; padding-right: 18px; }
  .page-wrap { margin-left: 235px; }
  main { padding: 42px 32px 60px; }
  .sim-body { grid-template-columns: minmax(0,1fr) 260px; }
  .device-copy { display: none; }
  .laptop-device { left: 9%; }
  .node-device { left: 74%; }
  .helper-detail { grid-template-columns: 1fr; }
  .helper-copy { padding: 25px; }
  .helper-illustration { min-height: 310px; }
  .helper-illustration::before { width: 210px; height: 210px; }
  .address-scenario { padding: 25px; gap: 20px; }
  .address-card { grid-template-columns: 85px 1fr; }
  .address-card p { grid-column: 1 / -1; }
  .address-card > small { grid-column: 1 / -1; }
  .port-grid { grid-template-columns: repeat(3,1fr); }
  .port-grid > div:nth-child(3) { border-right: 0; }
  .port-grid > div:nth-child(n+4) { border-top: 1px solid var(--line); }
}

@media (max-width: 800px) {
  .sidebar { transform: translateX(-100%); width: 272px; transition: transform .25s ease; box-shadow: 15px 0 40px rgba(0,0,0,.2); }
  .sidebar.open { transform: translateX(0); }
  .page-wrap { margin-left: 0; }
  .menu-button { display: flex; flex-direction: column; justify-content: center; gap: 3px; }
  .menu-button span { width: 15px; height: 1px; background: var(--ink); }
  .topbar { padding: 0 20px; }
  main { padding: 34px 20px 50px; }
  .lesson-heading { align-items: flex-start; flex-direction: column; }
  .sim-body { grid-template-columns: 1fr; }
  .network-stage { border-right: 0; border-bottom: 1px solid var(--line); }
  .control-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
  .choice-stack, .port-toggle { grid-column: span 1; margin-top: 0; }
  .second-step { margin-top: 0; }
  .send-button, .control-note { grid-column: 1/-1; margin-top: 0; }
  .address-scenario { grid-template-columns: 1fr; }
  .perspective-visual { height: 300px; }
  .helper-layout { grid-template-columns: 1fr; }
  .helper-tabs { display: grid; grid-template-columns: repeat(5,1fr); padding: 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .helper-tab { display: flex; flex-direction: column; text-align: center; padding: 7px; }
  .helper-tab > svg, .helper-tab small { display: none !important; }
  .helper-detail { grid-template-columns: 1fr 1fr; }
  .terminal-lab { grid-template-columns: 1fr; }
  .mission-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
  .mission-list > .section-kicker { grid-column: 1/-1; }
  .mission { grid-template-columns: 25px 1fr; }
  .mission > i { display: none; }
  footer { margin: 0 20px; }
}

@media (max-width: 560px) {
  .breadcrumb span, .lesson-time, .sim-stats { display: none; }
  .top-actions { gap: 7px; }
  h1 { font-size: 39px; letter-spacing: -2.3px; }
  .learning-goal { max-width: none; }
  .sim-toolbar { padding: 0 12px; }
  .network-stage { min-height: 385px; }
  .network-stage::after { width: 94%; height: 400px; bottom: -180px; }
  .sim-body { min-height: 385px; }
  .router-device { top: 165px; }
  .laptop-device, .node-device { bottom: 55px; }
  .line-internet { top: 115px; left: calc(50% + 8px); }
  .line-laptop { left: 27%; bottom: 82px; }
  .line-node { right: 16%; bottom: 82px; }
  .stage-callout { bottom: 14px; }
  .control-panel { display: block; }
  .choice-stack, .port-toggle { margin: 10px 0 17px; }
  .send-button { margin-top: 15px; }
  .journey-step { min-width: 24px; }
  .journey-step div { display: none; }
  .analogy-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
  .analogy-strip > i { display: none; }
  .address-scenario { padding: 18px; }
  .public-ring { width: 285px; height: 285px; }
  .private-ring { width: 200px; height: 200px; }
  .local-ring { width: 115px; height: 115px; }
  .address-card { grid-template-columns: 83px 1fr; }
  .explain-panel { grid-template-columns: 35px 1fr; }
  .explain-panel code { grid-column: 2; width: fit-content; }
  .range-card { grid-template-columns: 1fr; }
  .range-list > span { grid-template-columns: 1fr; gap: 4px; }
  .range-list code { font-size: 8px; }
  .range-list small { text-align: left; }
  .helper-tabs { grid-template-columns: repeat(5,58px); overflow-x: auto; }
  .helper-detail { grid-template-columns: 1fr; }
  .helper-illustration { min-height: 330px; }
  .port-table-card > div:first-child { display: block; }
  .port-table-card h3 { margin-top: 7px; }
  .port-grid { grid-template-columns: 1fr 1fr; }
  .port-grid > div { border-bottom: 1px solid var(--line); }
  .port-grid > div:nth-child(odd) { border-right: 1px solid var(--line); }
  .port-grid > div:nth-child(even) { border-right: 0; }
  .mission-list { grid-template-columns: 1fr 1fr; }
  .terminal-screen { padding: 15px; font-size: 9px; }
  .quiz-intro { align-items: flex-start; gap: 14px; }
  .score-ring { flex: 0 0 auto; width: 78px; height: 78px; padding-top: 18px; }
  .score-ring small { bottom: 14px; }
  .quiz-form { grid-template-columns: 1fr; }
  .answer-options { grid-template-columns: 1fr; }
  .completion-card { align-items: flex-start; flex-wrap: wrap; }
  .completion-card button { margin-left: 0; }
  footer { display: block; line-height: 1.6; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}