.guide01-widget button,.guide01-widget input{font-family:inherit}.guide01-widget button:disabled{opacity:.45;cursor:not-allowed}.guide01-widget button:focus-visible,.guide01-widget input:focus-visible{outline:3px solid #6798df;outline-offset:3px}.device-options{border:0;padding:0;margin:18px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.device-options legend{font-size:15px;color:#456086;margin-bottom:12px}.device-options label{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #c9d8ed;border-radius:10px;padding:12px;min-height:50px;font-size:15px;cursor:pointer}.device-options label:has(input:checked){background:#eaf2ff;border-color:#7fa8ee;color:#195cb9}.device-options input{accent-color:#3978df;width:18px;height:18px;flex-shrink:0}.device-version{padding-top:15px;border-top:1px dashed #c9d8ed}.lesson-result{padding:17px 20px;background:#edf3fc;border-radius:11px;border:1px solid #d9e4f5;margin:18px 0;min-width:0}.lesson-result>strong{display:block;font-size:18px;color:#234571}.lesson-result p,.lesson-result li,.route-sandbox p{font-size:15px!important;line-height:1.85;margin:9px 0!important}.lesson-result ul{padding-left:22px;margin:10px 0}.lesson-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.lesson-tabs button{padding:9px 13px;min-height:44px;border:1px solid #ccdbee;border-radius:9px;background:#fff;color:#526b8f;font-size:14px;cursor:pointer}.lesson-tabs button[aria-pressed=true]{background:#eaf2ff;border-color:#7fa8ed;color:#195cb9}.lesson-tabs button:hover{background:#f0f5fe}.package-stage{min-height:390px}.package-stage .comparison-emotion{background:#fffaf6}.package-facts{margin:18px 0}.package-facts>div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:14px;border-bottom:1px solid #dde5ef;padding:12px 0}.package-facts dt{font-size:14px;color:#62789a;margin:0;font-weight:400}.package-facts dd{margin:0;font-size:16px;color:#243c5f;line-height:1.8}.demo-subscription{box-sizing:border-box;width:100%;min-width:0;border:1px solid #cad9ee;background:#fff;padding:14px;border-radius:10px;color:#365782;font:13px/1.8 ui-monospace,Consolas,monospace!important}.cooperation-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:24px 0;position:relative}.cooperation-card{position:relative;display:flex;align-items:center;flex-direction:column;text-align:center;gap:8px;min-height:135px;padding:15px 9px;background:#fff;border:1px dashed #bfcfe7;border-radius:12px;transition:background .35s,border-color .35s}.cooperation-card:after{content:'→';position:absolute;left:calc(100% + 1px);top:40%;color:#7b9bc7;font:18px system-ui,sans-serif}.cooperation-card:last-child:after{display:none}.lesson-symbol{font:28px/1.2 system-ui,sans-serif;color:#7796c0}.cooperation-card strong{font-size:16px;color:#355379}.cooperation-card small{font-size:12px;color:#5d7394;line-height:1.8}.cooperation-card.is-ready{background:#eef5ff;border-style:solid;border-color:#88aae0}.cooperation-card.is-current{box-shadow:0 0 0 3px #c9dcf9}.cooperation-flow.playing .cooperation-card.is-current .lesson-symbol{animation:lesson-pulse 1.2s ease-in-out infinite}.route-sandbox{padding:16px 20px;border:1px solid #c9ded9;border-radius:12px;background:#f4fbf8}.route-sandbox>strong{font-size:16px;color:#396c60}.route-sandbox .widget-button[aria-pressed=true]{background:#e4f3ed;border-color:#8cbdaa}.transmission-scene{display:grid;grid-template-columns:100px minmax(0,1fr) 100px;gap:12px;align-items:center;min-height:175px;padding:20px 0}.transmission-end{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:#3c5c89}.transmission-end>span{font:30px system-ui,sans-serif}.transmission-end strong{font-size:15px}.transmission-channel{position:relative;min-width:0;padding:8px 0 18px}.transmission-channel:after{content:'';position:absolute;bottom:4px;left:0;right:0;height:2px;background:#b8cce8}.packet-layer{padding:13px;text-align:center;border:1px solid #dcc49e;border-radius:12px;background:#fffaf3}.packet-layer strong{font-size:16px;color:#6c5739}.packet-layer span{display:none;font-size:13px;margin:0 0 8px}.transmission-scene[data-mode=https] .packet-layer,.transmission-scene[data-mode=proxy] .packet-layer{border-color:#8ab7ce;background:#f0f8fc}.transmission-scene[data-mode=https] .tls-shell,.transmission-scene[data-mode=proxy] .tls-shell{display:block;color:#397090}.transmission-scene[data-mode=proxy] .packet-layer{border:4px double #8daadd;background:#edf3fc}.transmission-scene[data-mode=proxy] .tunnel-shell{display:block;color:#3a60a1}.packet-dot{display:none;position:absolute;z-index:1;left:0;bottom:0;width:10px;height:10px;border-radius:50%;background:#3978df}.transmission-scene.playing .packet-dot{display:block;animation:lesson-travel 1.6s linear forwards}.leak-option{display:flex;align-items:center;gap:10px;font-size:14px;color:#795d38;padding:12px;background:#fff8ed;border:1px solid #e1cba8;border-radius:10px}.visibility-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.visibility-fact{padding:15px;background:#fff;border:1px solid #d0dded;border-radius:11px;min-width:0}.visibility-fact>strong{font-size:15px;display:block;color:#415e87}.visibility-fact .visibility-label{display:inline-block;font-size:12px;line-height:1.6;padding:3px 8px;margin-top:9px;border-radius:15px;background:#eaf2fc;color:#376394}.visibility-fact[data-level=visible] .visibility-label{background:#fff1da;color:#805b26}.visibility-fact[data-level=hidden] .visibility-label{background:#e9f4ef;color:#356b55}.visibility-fact p{font-size:14px!important;color:#516885;line-height:1.8;margin:9px 0 0!important}.visibility-empty{grid-column:1/-1}.visibility-empty p{font-size:15px!important}.guide01-widget .widget-footnote a{overflow-wrap:anywhere}@keyframes lesson-pulse{50%{opacity:.4;transform:translateY(-2px)}}@keyframes lesson-travel{from{left:0}to{left:calc(100% - 10px)}}
@media(max-width:640px){.device-options{gap:8px}.device-options label{font-size:13px;padding:10px 8px;align-items:flex-start}.device-options legend{font-size:14px}.lesson-result{padding:14px}.lesson-result>strong{font-size:16px}.lesson-result p,.lesson-result li,.route-sandbox p{font-size:14px!important}.lesson-tabs button{font-size:12px;padding:8px 10px}.package-stage{min-height:480px}.package-stage .comparison-pane{padding:18px 13px}.package-stage .comparison-pane h5{font-size:18px}.package-facts>div{grid-template-columns:1fr;gap:4px;padding:10px 0}.package-facts dt{font-size:12px}.package-facts dd{font-size:14px}.cooperation-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.cooperation-card{padding:12px 7px;min-height:130px}.cooperation-card:after{display:none}.cooperation-card strong{font-size:14px}.cooperation-card small{font-size:12px}.route-sandbox{padding:14px}.transmission-scene{grid-template-columns:52px minmax(0,1fr) 52px;gap:7px;min-height:155px}.transmission-end strong{font-size:11px}.transmission-end>span{font-size:23px}.packet-layer{padding:10px 5px}.packet-layer strong{font-size:13px}.packet-layer span{font-size:11px}.leak-option{align-items:flex-start;font-size:12px}.visibility-facts{grid-template-columns:1fr}.visibility-fact{padding:13px}.demo-subscription{font-size:11px!important}}
@media(prefers-reduced-motion:reduce){.cooperation-flow.playing .cooperation-card.is-current .lesson-symbol,.transmission-scene.playing .packet-dot{animation:none}.cooperation-card{transition:none}}