*{box-sizing:border-box} :root{--ink:#153147;--muted:#50667a;--line:#d9e4e9;--teal:#007e72;--mint:#e8f8f1;--amber:#935500;--red:#ba3447;--blue:#3269b5}body{margin:0;background:#f2f5f5;color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;line-height:1.7}main{max-width:1140px;margin:auto;padding:38px 28px}button,select,input{font:inherit}button,select{cursor:pointer}button{color:var(--ink);background:white;border:1px solid #c6d6dd;border-radius:10px;padding:8px 14px;font-size:14px;font-weight:650}button:hover{border-color:var(--teal);background:#f0faf7}button:disabled{cursor:default;opacity:.4}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #da9b24;outline-offset:4px}.hero{padding:4px 0 28px}.eyebrow{font-size:11px;font-weight:750;letter-spacing:1.6px;color:var(--teal)}h1{font-size:clamp(28px,4vw,48px);line-height:1.3;letter-spacing:-1.5px;margin:12px 0}h1 span{color:var(--teal)}.hero p{max-width:740px;color:var(--muted);margin:12px 0}.meta{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted)}.meta span+span:before{content:"/";margin-right:10px;color:#9aacb5}nav{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}nav button{text-align:left;padding:12px;font-weight:600;display:flex;gap:10px;align-items:center}nav b{font-size:11px;opacity:.6}nav button[aria-current=true]{color:white;background:var(--ink);border-color:var(--ink)}.player{background:white;border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:0 12px 36px #183d4d08}.episode-head{display:flex;align-items:center;justify-content:space-between;gap:15px}h2{font-size:25px;line-height:1.4;margin:8px 0}h3{font-size:20px;line-height:1.5;margin:0 0 8px}.pill{background:#f0f4f7;border-radius:20px;color:var(--muted);padding:5px 10px;font-size:11px;white-space:nowrap}.intro{color:var(--muted);font-size:14px;margin:8px 0 16px}.scenarios{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.scenarios button{font-size:12px;padding:5px 12px;border-radius:30px}.scenarios button[aria-pressed=true]{background:var(--mint);color:var(--teal);border-color:#6bbaa6}.stage{position:relative;border:1px solid var(--line);border-radius:14px;background:linear-gradient(130deg,#f7fafb,#eff6f3);padding:48px 18px 22px;overflow:hidden}.stage-label{position:absolute;top:12px;left:18px;right:18px;display:flex;justify-content:space-between;gap:12px;font-size:10px;color:var(--muted);letter-spacing:.5px}.stage-label span:last-child{color:var(--teal)}.nodes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 28px;position:relative;z-index:2}.node{min-height:124px;background:#fff;border:1px solid #ccdce2;border-radius:12px;padding:14px;transition:background .35s,border-color .35s,box-shadow .35s;position:relative}.node .number{font-family:monospace;font-size:10px;color:#6c8796;display:flex;align-items:center;justify-content:space-between}.node h4{margin:6px 0 3px;font-size:16px;line-height:1.4}.node p{font-size:12px;color:var(--muted);margin:0;line-height:1.5;overflow-wrap:anywhere}.node.active{border:2px solid var(--teal);padding:13px;background:var(--mint);box-shadow:0 0 0 5px #007e7210}.node.done{border-color:#8bc4b0;background:#f2faf6}.node.bad{background:#fff0f1;border-color:var(--red)}.node.bad h4{color:var(--red)}.node.locked{background:#fff7e7;border-color:#dcb06c}.node[data-zone="secure"]:after{content:"安全世界";position:absolute;right:10px;top:10px;font-size:9px;color:var(--teal);background:var(--mint);padding:1px 5px;border-radius:4px}#wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}#wires path{fill:none;stroke:#becfd5;stroke-width:2;stroke-dasharray:4 4}#wires path.past{stroke:#78b49e;stroke-dasharray:none}#packet{position:absolute;z-index:3;background:var(--teal);border:3px solid #fff;width:15px;height:15px;border-radius:50%;box-shadow:0 0 0 4px #007e7220;pointer-events:none;display:none}.explain{display:grid;grid-template-columns:42px 1fr;gap:14px;margin:24px 0 20px;min-height:174px}.step-count{width:36px;height:36px;border-radius:50%;background:var(--ink);color:white;text-align:center;line-height:36px;font-size:13px}.explain p{font-size:15px;margin:0;color:#355269;line-height:1.85}.payload{display:inline-block;max-width:100%;background:#f1f5f7;border:1px solid #e3eaee;border-radius:7px;font-family:ui-monospace,Consolas,monospace;font-size:12px;margin-top:12px;padding:6px 10px;overflow-wrap:anywhere}.controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.controls .primary{background:var(--teal);border-color:var(--teal);color:white;min-width:96px}.speed{font-size:12px;margin-left:auto;color:var(--muted)}select{border:1px solid var(--line);border-radius:7px;padding:5px;color:var(--ink);background:white}#position{font-size:11px;color:var(--muted);min-width:36px}.seek-label{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--muted);margin:12px 0 18px}input[type=range]{width:100%;accent-color:var(--teal)}.verdict{border-left:3px solid var(--teal);background:var(--mint);font-size:13px;padding:11px 14px;line-height:1.8}.verdict.warn{background:#fff6e7;border-color:#d39b3e}.evidence{display:grid;grid-template-columns:160px 1fr;gap:12px;font-size:12px;color:var(--muted);padding:18px 0}.evidence b{color:var(--ink)}.evidence p{margin:0}details{border-top:1px solid var(--line);padding:14px 0 0;font-size:13px}summary{cursor:pointer;font-weight:650}details li{margin:10px 0}#transcriptBody p{color:var(--muted)}.reference,.boundaries{margin-top:32px}.reference>p{font-size:14px;color:var(--muted)}.glossary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.term{background:white;border:1px solid var(--line);border-radius:10px;padding:15px}.term b{color:var(--teal);font-size:14px}.term p{font-size:12px;color:var(--muted);margin:6px 0 0}.boundaries{border:1px solid #e1cda5;background:#fff9ed;border-radius:14px;padding:20px 24px}.boundaries h2{font-size:20px}.boundaries li{font-size:13px;margin:9px 0}footer{color:var(--muted);font-size:12px;padding-top:24px}a{color:var(--teal);text-underline-offset:3px}.small{font-size:11px}@media(max-width:740px){main{padding:20px 14px}.player{padding:18px 14px}.episode-head{display:block}.pill{display:inline-block;margin:6px 0}nav{grid-template-columns:repeat(2,1fr)}nav button{padding:9px;font-size:12px}.nodes{gap:24px 20px;grid-template-columns:repeat(2,minmax(0,1fr))}.node{min-height:122px;padding:12px}.node.active{padding:11px}.node h4{font-size:14px}.node p{font-size:11px}.stage{padding:46px 12px 18px}.stage-label{left:12px;right:12px;font-size:9px}.stage-label span:first-child{max-width:66%}.stage-label span:last-child{white-space:nowrap}.explain{grid-template-columns:30px 1fr;gap:10px;min-height:220px}.step-count{width:28px;height:28px;line-height:28px}.explain h3{font-size:18px}.explain p{font-size:14px}.controls button{padding:7px 10px;font-size:12px}.controls .primary{min-width:75px}.speed{margin-left:0}h2{font-size:22px}.evidence{grid-template-columns:1fr;gap:4px}.glossary{grid-template-columns:repeat(2,minmax(0,1fr))}.term{padding:12px}.boundaries{padding:15px}.boundaries ol{padding-left:22px}}
.workbench{display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:14px;gap:12px;align-items:center;--phase:1}.workbench small{display:block;font-size:9px;color:var(--muted);letter-spacing:1px;margin-bottom:4px}.workbench strong{font-size:12px;display:block;overflow-wrap:anywhere}.work-in,.work-out{border:1px solid var(--line);background:#f7fafb;border-radius:9px;padding:10px;min-height:64px;display:flex;flex-direction:column;justify-content:center}.work-out{background:var(--mint);border-color:#bbdfcf}.work-process{font-size:11px;display:flex;gap:8px;justify-content:space-between;align-items:center;text-align:center;color:var(--teal)}.work-process span{font-size:20px}.workbench.is-playing .work-in strong{transform:translateX(calc(var(--phase) * 5px));opacity:calc(1 - var(--phase) * .45)}.workbench.is-playing .work-out strong{opacity:var(--phase);transform:translateY(calc((1 - var(--phase)) * 6px))}.workbench.is-playing .work-process span{opacity:calc(.25 + var(--phase) * .75)}.workbench.bad .work-out{background:#fff0f1;border-color:#e6bac1;color:var(--red)}.seek-label{white-space:nowrap}.time-track{height:3px;background:#edf2f3;border-radius:4px;margin-top:15px;overflow:hidden}#timeFill{height:100%;width:0;background:var(--teal)}.node .state{display:block;font-size:10px;font-weight:650;color:var(--teal);margin-top:8px;min-height:17px}.node.bad .state{color:var(--red)}.node.locked .state{color:var(--amber)}
@media(max-width:480px){.workbench{gap:6px;grid-template-columns:1fr .8fr 1fr}.work-in,.work-out{padding:8px}.work-process{gap:2px;font-size:10px}.work-process span{font-size:14px}.workbench strong{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}#packet{display:none!important}}
body.embed main{padding:12px;max-width:1100px}body.embed .hero,body.embed .reference,body.embed .boundaries,body.embed footer{display:none}body.embed .player{box-shadow:none}body.embed nav{margin-bottom:12px}