html{scroll-behavior:smooth;scroll-padding-top:24px}.jump{display:flex;flex-wrap:wrap;gap:12px 25px;margin-top:24px;font-size:14px}.studio,.cable-stage{background:#e7ecdd}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 22px}.network-drawing{overflow:auto}.network-drawing svg{width:100%;min-width:560px;display:block}svg text{font:15px system-ui;fill:#244638;text-anchor:middle}svg .small{font-size:12px}.light text{fill:#f8f7f2}.packet{fill:none;stroke:#c29c55;stroke-width:5;stroke-dasharray:10 15;animation:packet 1.2s linear infinite}.part{transition:opacity .3s}.part.dim{opacity:.4}.explain{padding:20px 28px;border-top:1px solid #b9c3b2}.explain h3{margin:0;font-size:23px}.explain p{max-width:70ch;font-size:14px}.cable-stage svg{width:100%;display:block}.rate-lab{padding:28px;background:#e7ecdd}.rate-lab label{font-size:13px;margin-right:10px}.rate-lab select{font:inherit;padding:8px;color:#244638;background:#f8f7f2;border:1px solid #728365;margin:0 20px 14px 0}.rate-lab output{display:block;font-size:38px;font-family:Georgia,serif}.rate-lab p{font-size:13px;max-width:70ch}.questions{padding-left:24px}.questions li{padding:15px 0;border-bottom:1px solid #c6cfbb}.questions h3{margin:0;font-size:22px}.questions p,details p{font-size:14px;max-width:70ch}details{padding:18px 0;border-bottom:1px solid #c6cfbb}summary{cursor:pointer}footer{margin-top:60px}.paused .packet,.offscreen .packet,.hidden .packet{animation-play-state:paused}@keyframes packet{to{stroke-dashoffset:-50}}@media(max-width:600px){.toolbar{padding:0 12px;align-items:center}.toolbar .tabs{gap:5px}.toolbar .tabs button{padding:8px;font-size:12px}.toolbar>.control{font-size:11px;padding:7px;white-space:nowrap}.explain{padding:18px}.cable-stage svg{min-width:400px}.cable-stage{overflow:auto}.rate-lab label{display:block}.rate-lab{padding:20px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.packet{animation:none}.part{transition:none}}
.switch-lab{background:#e7ecdd}.tour-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr)}.tour-canvas{min-width:0;overflow:auto;padding:8px 15px}.tour-canvas svg{display:block;width:100%;min-width:450px}.tour-caption{font-size:11px;color:#52645b}.tour-reading{padding:24px;border-left:1px solid #b9c3b2}.tour-reading h3{font-size:25px;line-height:1.45;margin:0 0 16px}.tour-reading p{font-size:14px;line-height:1.9}.tour-parts{display:flex;flex-wrap:wrap;gap:7px;margin:24px 0 12px}.tour-parts button{font:inherit;font-size:12px;padding:8px;border:1px solid #728365;background:none;color:#244638;cursor:pointer}.tour-parts button[aria-pressed=true]{background:#244638;color:#f8f7f2}#tour-detail{border-top:1px solid #b9c3b2;padding-top:15px}.tour-electric,.tour-optical{fill:none;stroke-width:3;stroke-dasharray:8 7;animation:packet 1.6s linear infinite}.tour-electric{stroke:#d6b46c}.tour-optical{stroke:#c5e8b1}.tour-led{animation:tour-led 1.7s ease-in-out infinite}.real-switch{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;margin-top:30px;align-items:center}.real-switch figure{margin:0}.real-switch img{display:block;width:100%;height:auto}.real-switch figcaption{font-size:11px}.real-switch p{font-size:14px}.tour-paused svg *,.tour-offscreen svg *,.hidden .switch-lab svg *{animation-play-state:paused}@keyframes tour-led{50%{opacity:.25}}@media(max-width:760px){.tour-layout,.real-switch{grid-template-columns:1fr}.tour-reading{border-left:0;border-top:1px solid #b9c3b2;padding:20px}.tour-canvas{padding:8px 12px}.tour-caption{min-width:0}.real-switch{gap:15px}.tour-reading h3{font-size:23px}}@media(prefers-reduced-motion:reduce){.tour-electric,.tour-optical,.tour-led{animation:none}}