:root{--ink:#162e43;--muted:#6d7e8d;--line:#e3e9ee;--paper:#fff;--soft:#f7f9fb;--blue:#2766cf;--teal:#008674;--red:#d54b4b;--amber:#9c691e;--shadow:0 8px 30px rgba(22,46,67,.035);font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#fff;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button,a{touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #83b6f2;outline-offset:4px}a{color:inherit}button{color:inherit}button svg{pointer-events:none}.skip-link{position:fixed;top:-80px;left:20px;background:#132f43;color:white;padding:12px;z-index:30}.skip-link:focus{top:10px}
.topbar{height:88px;padding:0 4.1%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:28px;background:#fff}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;font-size:19px;letter-spacing:-.5px;white-space:nowrap}.brand strong{font-weight:500;color:#70818e}.brand small{display:block;font-size:8px;letter-spacing:1.65px;color:var(--muted);margin-top:5px;font-weight:600}.brand-symbol{width:33px;height:33px;display:grid;grid-template-columns:1fr 1fr;gap:4px;transform:rotate(-5deg)}.brand-symbol i{display:block;background:var(--ink);border-radius:3px}.brand-symbol i:nth-child(2){background:#148b7c}.brand-symbol i:nth-child(3){background:#baceda}.brand-symbol i:nth-child(4){background:#5c8db8}.recorded-label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;letter-spacing:.1px}.recorded-label>span{width:6px;height:6px;background:#93a7b7;border-radius:50%}.header-actions{display:flex;align-items:center;gap:9px}.quiet-button,.present-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 12px;border-radius:6px;text-decoration:none;font-size:12px;font-weight:600;white-space:nowrap}.quiet-button{background:white;border:1px solid transparent;color:#667a8c}.quiet-button:hover{background:#f3f6f9;border-color:#e7ecf1}.quiet-button>span{font-size:18px;font-weight:400}.present-button{background:var(--ink);border:1px solid var(--ink);color:white;padding:0 16px}.present-button:hover{background:#244964}.present-button>span{font-size:21px;line-height:1}
.presentation{max-width:1920px;margin:auto;padding:32px 4.1% 16px}.slide-intro{display:flex;align-items:center;justify-content:space-between;gap:36px;margin-bottom:25px;min-height:124px}.intro-copy{max-width:1100px}.eyebrow{display:flex;align-items:center;gap:12px;color:#728494;font-size:10px;line-height:1.4;letter-spacing:1.4px;font-weight:650;margin:0 0 12px;text-transform:uppercase}.eyebrow #step-kicker{color:#08796e}.eyebrow-rule{width:26px;height:1px;background:#d1dbe4}.slide-intro h1{margin:0 0 10px;font-size:clamp(27px,2.65vw,45px);line-height:1.12;letter-spacing:-1.4px;font-weight:620;outline:none}.slide-summary{margin:0;max-width:990px;color:#687e8e;font-size:14px;line-height:1.65}.capture-stamp{border-left:1px solid var(--line);padding-left:24px;min-width:175px;flex:none}.capture-stamp>span{font-size:9px;letter-spacing:1.3px;color:#8291a0;display:block;margin-bottom:8px}.capture-stamp time{font-variant-numeric:tabular-nums;font-family:"SFMono-Regular",Consolas,monospace;font-size:20px;display:block;font-weight:500;letter-spacing:-.7px}.capture-stamp small{font-size:10px;color:#8b99a6;display:block;margin-top:7px}
.split-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px;align-items:stretch}.panel{border:1px solid var(--line);border-radius:11px;background:#fff;box-shadow:var(--shadow);min-width:0;overflow:hidden}.panel-header{height:81px;padding:19px 23px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line)}.panel-eyebrow{font-size:8px;font-weight:650;letter-spacing:1.5px;color:#91a1ae;margin:0 0 6px}.panel-header h2{font-size:17px;font-weight:600;letter-spacing:-.35px;margin:0}.topology-actions{display:flex;gap:9px;align-items:center}.small-button{display:inline-flex;align-items:center;gap:7px;justify-content:center;border:1px solid var(--line);background:#fff;border-radius:5px;font-size:10px;min-height:29px;padding:0 9px;color:#718495;white-space:nowrap}.small-button:hover,.small-button[aria-pressed=true]{background:#edf4fb;color:var(--blue);border-color:#c5d8f0}.link-count{font-size:9px;font-weight:600;color:#738594;background:#f5f8fa;padding:7px 9px;border-radius:4px;white-space:nowrap}.diagram-wrap{padding:7px 10px 0;display:flex;align-items:center;justify-content:center;min-height:300px}.diagram-wrap svg{display:block;width:100%;height:auto;max-height:390px;overflow:visible}.diagram-wrap .area-label{font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:12px;font-weight:650;fill:#71859a;letter-spacing:.2px}.diagram-wrap .area-sub{font-size:10px;fill:#9aa9b5}.topology-link{fill:none;stroke:#d4dee7;stroke-width:2.8;stroke-linecap:round;transition:stroke .25s,stroke-width .25s}.topology-link.selected-original{stroke:var(--blue);stroke-width:5}.topology-link.selected-replacement{stroke:var(--teal);stroke-width:5}.topology-link.failed{stroke:var(--red);stroke-width:3;stroke-dasharray:7 6}.topology-link.previous-route{stroke:#9caec0;stroke-width:4;stroke-dasharray:7 7}.topology-node circle{fill:#fff;stroke:#becbd7;stroke-width:1.8;transition:fill .25s,stroke .25s}.topology-node.route-node circle{fill:#f0f6ff;stroke:#5b8cdc;stroke-width:2.3}.topology-node.new-route-node circle{fill:#f0faf7;stroke:#4baf9b;stroke-width:2.3}.topology-node.endpoint circle{stroke-width:2.8}.topology-node text{font-family:Inter,"Segoe UI",Arial,sans-serif;fill:#264258;font-size:15px;font-weight:600;text-anchor:middle}.topology-node .node-ip{font:10px "SFMono-Regular",Consolas,monospace;fill:#9aa8b5;font-weight:400}.node-router-symbol{stroke:#8194a5;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}.route-node .node-router-symbol{stroke:#447ac0}.new-route-node .node-router-symbol{stroke:#188673}.topology-node .abr-label{fill:#597d94;font-size:8px;font-weight:650;letter-spacing:.8px}.failure-label{font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:10px;fill:var(--red);font-weight:650;text-anchor:middle}.diagram-legend{padding:2px 23px 16px;display:flex;gap:15px;flex-wrap:wrap;color:#8b9ba9;font-size:9px;min-height:29px}.legend-item{display:flex;align-items:center;gap:6px}.legend-swatch{height:3px;width:16px;background:#d4dee7;border-radius:4px}.legend-swatch.original{background:var(--blue)}.legend-swatch.replacement{background:var(--teal)}.legend-swatch.failed{background:repeating-linear-gradient(90deg,var(--red) 0 5px,transparent 5px 8px)}.legend-swatch.previous{background:repeating-linear-gradient(90deg,#9caec0 0 5px,transparent 5px 8px)}.route-strip{margin:0 22px;padding:17px 0;border-top:1px solid var(--line);display:flex;align-items:center;gap:12px;min-height:63px}.route-strip>span:first-child{font-size:9px;color:#8294a2;white-space:nowrap}.route-strip strong{font-size:12px;letter-spacing:-.1px;font-weight:600;flex:1}.route-status{font-size:8px!important;font-weight:650!important;text-transform:uppercase;letter-spacing:.5px;color:#078171;background:#eaf7f3;padding:5px 7px;border-radius:4px;white-space:nowrap}.route-status.down{color:var(--red);background:#fdf0ef}.software-flow{padding:15px 20px;display:flex;justify-content:center;gap:10px;align-items:center;border-top:1px solid var(--line);background:#fafcfd;font-size:9px;color:#7d8f9f}.software-flow span{white-space:nowrap}.software-flow i{color:#b9c7d2;font-style:normal;font-size:12px}
.evidence-panel{display:flex;flex-direction:column}.evidence-tabs{display:flex;gap:20px;padding:0 22px;border-bottom:1px solid var(--line);overflow:auto;min-height:47px;flex:none;scrollbar-width:thin}.evidence-tabs button{background:transparent;border:0;border-bottom:2px solid transparent;padding:13px 0 12px;white-space:nowrap;font-size:10px;color:#8a99a7;font-weight:500}.evidence-tabs button[aria-selected=true]{color:#1e4b78;border-color:#2b74cb;font-weight:650}.evidence-tabs button:hover{color:#244d6f}.terminal-meta{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:15px 23px 8px;background:#fafcfe;color:#8d9aa7;font:9px "SFMono-Regular",Consolas,monospace;letter-spacing:.5px}.terminal-meta>span:first-child{display:flex;align-items:center;gap:7px}.capture-dot{width:5px;height:5px;border:1px solid #9cafbf;border-radius:50%;display:inline-block}.code-scroll{background:#fafcfe;flex:1;min-height:310px;max-height:438px;overflow:auto;padding:7px 22px 18px;scrollbar-width:thin;scrollbar-color:#d1dce5 transparent}.code-scroll pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:4}.code-scroll code{font-family:"SFMono-Regular","Cascadia Code",Consolas,"Liberation Mono",monospace;font-size:clamp(10px,.79vw,13.5px);line-height:1.85;color:#4c6073}.code-line{display:block;min-height:1.85em;border-radius:3px;padding-left:7px;margin-left:-7px}.code-line.command{color:#285b8e;font-weight:600}.code-line.good{color:#087b60;background:rgba(25,147,111,.055)}.code-line.bad{color:#b74c4c;background:rgba(203,73,73,.045)}.code-line.attention{color:#9b742a;background:rgba(186,143,57,.055)}.code-line.marked{box-shadow:inset 2px 0 0 #b9d4e9}.evidence-footer{padding:13px 22px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;flex:none;font-size:9px;color:#95a3af;min-height:45px}.text-button{border:0;background:transparent;font-size:10px;font-weight:500;color:#6b8498;padding:3px 0;white-space:nowrap}.text-button:hover{color:#1d68ad}.text-button span{margin-left:4px}.below-panels{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 2px 3px}.below-panels p{display:flex;align-items:center;gap:8px;color:#92a1ad;font-size:10px;margin:0}.lab-dot{width:5px;height:5px;background:#9ab1c2;border-radius:50%}.middot{color:#bbc7d0;margin:0 4px}.speaker-notes{padding:16px 20px;background:#f8fafc;border:1px solid var(--line);border-radius:7px;margin:12px 0 2px}.speaker-notes p{font-size:13px;line-height:1.65;margin:5px 0 0;color:#688093}.speaker-notes[hidden]{display:none}
.presentation-controls{max-width:1920px;margin:0 auto;padding:10px 4.1% 0;background:#fff}.navigation-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0;border-top:1px solid var(--line)}.previous-button,.next-button{display:flex;align-items:center;justify-content:center;gap:12px;font-size:11px;font-weight:600;min-width:112px;height:38px;border-radius:5px;white-space:nowrap;flex:none}.previous-button{background:white;border:1px solid var(--line);color:#7d90a0}.previous-button:disabled{opacity:.38}.previous-button:not(:disabled):hover{background:var(--soft)}.next-button{background:var(--ink);border:1px solid var(--ink);color:#fff;min-width:125px}.next-button:hover{background:#244964}.next-button:disabled{background:#f1f5f8;border-color:#e1e8ee;color:#9aabb8}.previous-button>span,.next-button>span{font-size:17px;font-weight:400}.step-navigation{display:flex;align-items:center;justify-content:center;gap:0;flex:1;min-width:0}.step-navigation button{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;background:transparent;border:0;padding:5px 12px;min-width:0;flex:1;color:#a0adba;font-size:8px;white-space:nowrap}.step-navigation button::after{content:"";position:absolute;top:16px;left:calc(50% + 16px);width:calc(100% - 32px);height:1px;background:#e9eef2}.step-navigation button:last-child::after{display:none}.step-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #e6edf2;border-radius:50%;background:#fff;position:relative;z-index:1;font-size:9px;font-weight:500}.step-navigation button[aria-current=step]{color:#125d94;font-weight:600}.step-navigation button[aria-current=step] .step-number{background:#edf5fc;border-color:#8eb4db;color:#256cae}.step-navigation button.completed .step-number{border-color:#cee3df;color:#298d7b;background:#f6fbf9}.step-navigation button:hover{color:#28699e}.controls-footnote{display:flex;align-items:center;justify-content:space-between;padding:10px 0 17px;color:#a3afba;font-size:8px;letter-spacing:.4px}.controls-footnote>span:last-child{font-size:8px;letter-spacing:.8px}.controls-footnote #step-counter{font-family:"SFMono-Regular",Consolas,monospace;font-size:10px;color:#8fa2b1;letter-spacing:1px}.controls-footnote kbd{font-family:inherit;font-size:9px;letter-spacing:0;border:1px solid #e6ecf1;border-radius:3px;padding:1px 3px;color:#8b9daa}.deck-progress{height:2px;background:#f3f6f8;margin:0 -4.45%;overflow:hidden}.deck-progress>span{height:100%;display:block;background:#2c8f8a;transition:width .2s}
dialog{border:1px solid #dde7ee;border-radius:14px;box-shadow:0 30px 100px rgba(16,35,52,.16);padding:30px;max-height:85vh;color:var(--ink)}dialog::backdrop{background:rgba(22,43,61,.25);backdrop-filter:blur(5px)}.overview-dialog{width:min(880px,92vw)}.sources-dialog{width:min(680px,92vw)}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}.dialog-header h2{font-size:27px;letter-spacing:-.8px;margin:0}.dialog-header .eyebrow{margin-bottom:6px}.dialog-close{background:#f3f6f9;border:0;border-radius:50%;width:30px;height:30px;font-size:22px;color:#7a8c9b}.dialog-close:hover{background:#e8eff5}.overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.overview-card{text-align:left;border:1px solid var(--line);background:white;padding:18px;border-radius:8px;min-height:112px;transition:border-color .2s,background .2s}.overview-card:hover,.overview-card.active{background:#f6fafc;border-color:#90b5d3}.overview-card>span{font-size:9px;color:#208678;letter-spacing:.6px;font-weight:600}.overview-card strong{display:block;font-size:14px;font-weight:600;margin-top:10px;line-height:1.4}.overview-card small{display:block;color:#8fa0ad;font-family:monospace;font-size:10px;margin-top:8px}.dialog-note{font-size:11px;color:#91a0ad;line-height:1.6;margin-bottom:0}.source-facts{display:grid;grid-template-columns:100px 1fr;gap:10px 18px;font-size:12px;line-height:1.6;border-bottom:1px solid var(--line);padding-bottom:20px}.source-facts dt{color:#92a1ae}.source-facts dd{margin:0;overflow-wrap:anywhere}.source-notes p{font-size:12px;line-height:1.75;color:#718595}.source-notes strong{color:#3e5b71;font-weight:600}.toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,12px);background:#183548;color:white;padding:11px 18px;border-radius:7px;font-size:12px;z-index:50;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:1700px){.topbar{height:94px}.presentation{padding-top:42px}.slide-intro{margin-bottom:31px;min-height:139px}.split-layout{gap:27px}.panel-header{height:89px;padding:22px 26px}.panel-header h2{font-size:19px}.diagram-wrap svg{max-height:440px}.code-scroll{max-height:500px;min-height:365px;padding:12px 26px 22px}.evidence-tabs{min-height:51px;padding-left:26px}.evidence-tabs button{font-size:12px}.terminal-meta{padding-left:26px;font-size:10px}.panel-eyebrow{font-size:9px}.small-button{font-size:11px;height:32px}.link-count{font-size:10px}.diagram-legend{font-size:10px}.route-strip strong{font-size:14px}.route-strip>span:first-child{font-size:10px}.route-strip{min-height:70px}.software-flow{font-size:10px;padding:17px}.below-panels{padding-top:19px}.slide-summary{font-size:16px}.eyebrow{font-size:11px}.step-navigation button{font-size:9px}.controls-footnote{font-size:9px}.previous-button,.next-button{height:42px;font-size:12px}.header-actions{gap:12px}.quiet-button,.present-button{font-size:13px;height:39px}}
@media(min-width:1000px) and (max-height:820px){.topbar{height:68px}.presentation{padding-top:21px;padding-bottom:7px}.slide-intro{min-height:103px;margin-bottom:18px}.slide-intro h1{font-size:31px}.slide-summary{font-size:12px;line-height:1.55}.eyebrow{font-size:9px;margin-bottom:9px}.panel-header{height:66px;padding:15px 19px}.panel-header h2{font-size:15px}.diagram-wrap{min-height:225px}.diagram-wrap svg{max-height:285px}.diagram-legend{padding-bottom:10px;font-size:8px}.route-strip{padding:12px 0;min-height:48px}.software-flow{padding:11px;font-size:8px;gap:8px}.code-scroll{min-height:225px;max-height:321px}.code-scroll code{font-size:11px;line-height:1.7}.evidence-tabs{min-height:40px}.evidence-tabs button{padding:11px 0 9px}.terminal-meta{padding-top:10px}.evidence-footer{min-height:37px;padding:10px 19px}.below-panels{padding-top:10px}.presentation-controls{padding-top:3px}.navigation-row{padding:9px 0}.controls-footnote{padding:7px 0 10px}.step-navigation button{padding:2px 7px;gap:3px}.previous-button,.next-button{height:34px}.capture-stamp{padding-left:18px;min-width:158px}.capture-stamp time{font-size:18px}}
@media(max-width:1050px){.recorded-label{display:none}.topbar{padding-left:3%;padding-right:3%}.presentation,.presentation-controls{padding-left:3%;padding-right:3%}.split-layout{gap:14px}.topology-actions{gap:5px}.link-count{padding:6px;font-size:8px}.panel-header{padding-left:17px;padding-right:17px}.step-navigation button{padding-left:7px;padding-right:7px;font-size:7px}.previous-button{min-width:91px}.next-button{min-width:99px}.navigation-row{gap:10px}.capture-stamp{min-width:150px}.slide-summary{font-size:12px}.software-flow{gap:6px;font-size:8px}.code-scroll{padding-left:17px;padding-right:17px}.code-scroll code{font-size:11px}.evidence-tabs{gap:16px;padding-left:17px;padding-right:17px}.diagram-legend{gap:9px;padding-left:17px}.route-strip{margin-left:17px;margin-right:17px;gap:8px}.route-strip strong{font-size:11px}}
@media(max-width:800px){.topbar{height:72px;padding:0 20px;gap:12px}.brand{font-size:16px;gap:10px}.brand-symbol{width:27px;height:27px}.brand small{font-size:6.5px;letter-spacing:1.15px}.offline-link{display:none}.quiet-button{font-size:0;width:32px;padding:0}.quiet-button>span{font-size:23px}.present-button{font-size:11px;padding:0 10px;height:33px}.header-actions{gap:5px}.presentation{padding:25px 20px 10px}.slide-intro{display:block;margin-bottom:23px}.slide-intro h1{font-size:31px;line-height:1.15;letter-spacing:-1px}.slide-summary{font-size:13px;line-height:1.65}.eyebrow{font-size:8px;gap:9px}.eyebrow-rule{width:15px}.capture-stamp{border-left:0;border-top:1px solid #edf1f5;margin-top:17px;padding:12px 0 0;display:flex;align-items:center;gap:10px;min-width:0}.capture-stamp>span{font-size:8px;margin:0}.capture-stamp time{font-size:12px;letter-spacing:0}.capture-stamp small{font-size:8px;margin:0;margin-left:auto}.split-layout{grid-template-columns:1fr;gap:20px}.panel-header{height:73px;padding:17px 18px}.panel-header h2{font-size:17px}.panel-eyebrow{font-size:7px}.diagram-wrap{min-height:250px;padding:8px 1px 0}.diagram-wrap svg{max-height:none}.link-count{font-size:8px;padding:7px}.small-button{font-size:9px}.diagram-legend{padding:5px 18px 15px;font-size:9px;gap:13px}.route-strip{margin:0 18px;padding:15px 0}.route-strip strong{font-size:11px}.route-strip>span:first-child{font-size:8px}.software-flow{font-size:9px;padding:14px;gap:8px}.evidence-tabs{padding:0 18px;gap:20px}.evidence-tabs button{font-size:11px}.terminal-meta{padding:15px 18px 9px}.code-scroll{min-height:260px;max-height:480px;padding:8px 18px 20px}.code-scroll code{font-size:11.5px;line-height:1.85}.evidence-footer{padding:13px 18px;font-size:8px}.below-panels{padding:16px 0 4px;align-items:flex-start}.below-panels p{font-size:8px;gap:5px;line-height:1.8;flex-wrap:wrap}.middot{margin:0 1px}.below-panels .text-button{font-size:9px}.presentation-controls{padding:0 20px;background:white;position:sticky;bottom:0;z-index:10;box-shadow:0 -8px 22px rgba(27,48,66,.04);margin-top:12px}.navigation-row{padding:12px 0;flex-wrap:wrap;justify-content:space-between;gap:5px}.previous-button,.next-button{min-width:108px;height:35px;font-size:11px}.step-navigation{order:3;width:100%;flex:none;justify-content:center;gap:7px;margin-top:7px}.step-navigation button{flex:none;padding:0;min-width:22px}.step-navigation button::after{display:none}.step-navigation button>span:last-child{display:none}.step-number{width:22px;height:22px;font-size:8px}.controls-footnote{padding:3px 0 9px;font-size:7px}.controls-footnote #step-counter{display:none}.controls-footnote>span:last-child{font-size:7px}.desktop-hint{display:none}.deck-progress{margin:0 -20px}.overview-grid{grid-template-columns:1fr}.overview-card{min-height:96px;padding:15px}.dialog-header h2{font-size:23px}dialog{padding:22px}.sources-dialog .source-facts{grid-template-columns:72px 1fr;gap:8px 13px;font-size:11px}}
@media(min-width:801px){.diagram-wrap{min-height:0}.code-scroll code{font-size:clamp(12px,.9vw,16px)}}
@media(min-width:801px) and (min-height:1001px){.diagram-wrap svg{max-height:340px}.code-scroll{min-height:300px;max-height:400px}.presentation{padding-top:36px}}
@media(min-width:801px) and (min-height:821px) and (max-height:1000px){.topbar{height:76px}.presentation{padding-top:25px;padding-bottom:8px}.slide-intro{min-height:112px;margin-bottom:20px}.diagram-wrap svg{max-height:clamp(220px,calc(100vh - 650px),350px)}.code-scroll{min-height:220px;max-height:340px}.presentation-controls{padding-top:4px}.below-panels{padding-top:12px}}
@media(min-width:801px) and (max-height:820px){.topbar{height:64px}.presentation{padding-top:18px;padding-bottom:4px}.slide-intro{min-height:98px;margin-bottom:15px}.diagram-wrap svg{max-height:245px}.code-scroll{min-height:210px;max-height:280px}.code-scroll code{font-size:12px}.navigation-row{padding-top:8px;padding-bottom:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.topbar,.presentation-controls,.header-actions,.below-panels,.toast,dialog{display:none!important}.presentation{padding:0}.slide-intro h1{font-size:26px}.split-layout{grid-template-columns:1fr 1fr;gap:12px}.panel{box-shadow:none;break-inside:avoid}.code-scroll{overflow:visible;max-height:none}.speaker-notes{display:none!important}body{print-color-adjust:exact;-webkit-print-color-adjust:exact}@page{size:landscape;margin:12mm}}
/* Controller walkthrough: native vector arrows, no video assets. */
[hidden]{display:none!important}
.controller-diagram text{font-family:Inter,"Segoe UI",Arial,sans-serif}
.host-box{fill:#f7fafd;stroke:#c5d8e8;stroke-width:1.5}
.host-label{font-size:12px;font-weight:650;letter-spacing:1.3px;fill:#5c7d96}.host-name{font-size:13px;fill:#7f95a7}
.pce-box{fill:#fff;stroke:#c5d9e8;stroke-width:1.4}.pce-title{font-size:20px;font-weight:650;fill:#234e70}.pce-subtitle{font-size:12px;fill:#7e93a4}
.module{fill:#fff;stroke:#d4e0e9;stroke-width:1.2}.module-title{font-size:15px;fill:#385f7b;font-weight:600}.gobgp-module .module-title{font-size:20px}.module-subtitle{font-size:12px;fill:#7b93a5}.module-active{stroke:#2879c4;stroke-width:2;fill:#edf6ff}.api-label{font-size:10px;fill:#7f94a4}
.network-area{fill:#f8fafc;stroke:#e2ebf2}.network-area.area-one{fill:#f5faf8;stroke:#e1eee8}.network-area-label{font-size:12px;fill:#8b9dac;font-weight:600;letter-spacing:.7px}
.signal{fill:none;stroke:#d8e1e8;stroke-width:2;opacity:.6}.signal-active{stroke:#2877c4;stroke-width:3;stroke-dasharray:9 5;animation:signal-travel 1s linear infinite;opacity:1}.compute-signal.signal-active{stroke:#bb892f}.report-confirmation{stroke:#008674}.control-attachment{fill:none;stroke:#c8d3dd;stroke-width:2;stroke-dasharray:3 4}.attachment-active{stroke:#577f9e;stroke-width:3}.attachment-label{font-size:11px;fill:#8ba0b1}.signal-label{font-size:14px;fill:#a9b7c3;font-weight:600}.signal-label.label-active{fill:#256fb1}.protocol-label{font-size:10px;fill:#9baab6;letter-spacing:.2px}.control-router circle{fill:#fff;stroke:#b8cbd9;stroke-width:1.8}.control-router .router-name{text-anchor:middle;fill:#35566e;font-size:16px;font-weight:600}.control-router .router-ip{text-anchor:middle;font-family:Consolas,monospace;font-size:10px;fill:#96a8b5}.pcc-router circle{fill:#eef6ff;stroke:#417eb8;stroke-width:2}.pcc-badge{fill:#e3effb;stroke:#a3c3df}.pcc-text{fill:#2c6a9d;text-anchor:middle;font-size:11px;font-weight:650;letter-spacing:.6px}.baseline-preview{stroke:#8bb4d6;stroke-width:4}.rsvp-signalling{stroke:#008674;stroke-dasharray:10 5;stroke-width:4;animation:signal-travel 1s linear infinite}.diagram-footnote{font-size:11px;fill:#95a7b6}.flow-paused *{animation-play-state:paused!important}
.control-explanation{padding:8px 22px 7px;min-height:91px}.control-explanation>span{display:block;font-size:8px;font-weight:650;color:#278479;letter-spacing:.7px;margin-bottom:5px}.control-explanation>strong{font-size:14px;font-weight:600;color:#2e5572;display:block}.control-explanation>p{font-size:11px;color:#7c91a2;line-height:1.6;margin:5px 0 0;max-width:790px}.flow-controls{display:flex;align-items:center;gap:7px;padding:4px 22px 11px;flex-wrap:wrap}.flow-controls .small-button{font-size:10px;min-height:28px}.flow-controls .small-button:disabled{opacity:.35;cursor:default}.flow-controls #flow-counter{font-family:Consolas,monospace;font-size:10px;color:#98aab7;flex:1;text-align:center}.controller-stage .diagram-legend{font-size:8px;color:#98a8b4;padding-bottom:12px}.controller-stage .evidence-tabs{gap:15px}.controller-stage .evidence-tabs button{font-size:10px}.controller-stage .diagram-wrap{padding-top:10px}
@keyframes signal-travel{to{stroke-dashoffset:-28}}
/* Desktop stages keep navigation visible while long evidence scrolls internally. */
@media(min-width:801px){
 html,body{height:100%;min-height:0}
 body{display:flex;flex-direction:column;min-height:100dvh;height:100dvh}
 .topbar,.presentation-controls{flex:none;width:100%}
 .presentation{display:flex;flex-direction:column;flex:1;min-height:0;width:100%}
 .slide-intro,.below-panels{flex:none}
 .split-layout{flex:1;min-height:0}
 .topology-panel{display:flex;flex-direction:column}
 .panel-header,.evidence-tabs,.terminal-meta,.evidence-footer,.route-strip,.software-flow,.diagram-legend,.control-explanation,.flow-controls{flex:none}
 .diagram-wrap{min-height:0;flex:1;overflow:hidden}
 .diagram-wrap svg{height:100%;max-height:100%;width:100%;min-height:0}
 .code-scroll{min-height:0;max-height:none;flex:1}
 .speaker-notes{position:absolute;bottom:118px;left:4.1%;right:4.1%;z-index:11;box-shadow:0 12px 40px #18354818}
 .controller-stage .control-explanation{min-height:82px}
}
@media(min-width:801px) and (max-height:820px){
 .controller-stage .control-explanation{padding-top:5px;min-height:75px}
 .control-explanation>strong{font-size:12px}.control-explanation>p{font-size:10px;line-height:1.5}
 .flow-controls{padding-bottom:8px}.controller-stage .diagram-legend{padding-bottom:7px;font-size:7px}
}
@media(max-width:800px){
 .controller-stage .diagram-wrap{min-height:0;padding:10px 4px 0}
 .controller-stage .diagram-wrap svg{height:auto;max-height:none}
 .control-explanation{padding:10px 18px 8px;min-height:0}
 .control-explanation>p{font-size:12px}.flow-controls{padding:6px 18px 12px}
 .controller-stage .diagram-legend{padding:2px 18px 13px;font-size:8px}
}
@media(prefers-reduced-motion:reduce){.signal-active,.rsvp-signalling{animation:none;stroke-dasharray:none}}
/* Larger teaching labels; compact chrome gives the diagram more room. */
.controller-diagram .module-title{font-size:18px}.controller-diagram .gobgp-module .module-title{font-size:22px}.controller-diagram .pce-title{font-size:23px}.controller-diagram .network-area-label{font-size:14px}.controller-diagram .router-name{font-size:18px}.controller-diagram .signal-label{font-size:17px}.controller-diagram .host-label{font-size:14px}.controller-diagram .module-subtitle{font-size:13px}.controller-diagram .attachment-label{font-size:12px}
@media(min-width:801px){.controller-stage .split-layout{grid-template-columns:minmax(0,1.18fr) minmax(0,1fr)}.controller-stage .slide-intro{min-height:103px;margin-bottom:20px}.controller-stage .panel-header{height:69px}.controller-stage .control-explanation{min-height:76px;padding-top:5px}.controller-stage .diagram-legend{padding-bottom:8px;min-height:20px}}
@media(min-width:801px) and (max-height:820px){.controller-stage .slide-intro{min-height:76px;margin-bottom:12px}.controller-stage .panel-header{height:54px}.controller-stage .control-explanation{min-height:66px}.controller-stage .control-explanation>p{font-size:10px}.controller-stage .flow-controls{padding-top:1px;padding-bottom:7px}.controller-stage .diagram-legend{padding-bottom:6px;min-height:17px}}
/* BGP-LS: make the two software responsibilities and API boundary visible. */
.bgpls-diagram .pipeline-title{fill:#355c79;font-size:20px;font-weight:600}.bgpls-diagram .pipeline-subtitle{fill:#7c93a6;font-size:13px}.bgpls-diagram .process-number{fill:#879dae;font-size:11px;letter-spacing:.8px;font-weight:650}.bgpls-diagram .pipeline-note{fill:#7d94a5;font-size:13px}.bgpls-diagram .pipeline-interface{fill:#6590ad;font-size:12px}.bgpls-diagram .signal-label{font-size:15px}.bgpls-stage .evidence-tabs button{font-size:10px}.bgpls-stage .control-explanation{min-height:76px}
@media(min-width:801px) and (max-height:820px){.bgpls-stage .control-explanation{min-height:66px}}
/* Control-room topology components copied and scoped from the reference Site. */
:root{--route-baseline:#3f8c6c;--route-replacement:#287a9b}
.network-canvas{position:relative;background:#fcfdfd;background-image:radial-gradient(#dce5e4 .65px,transparent .65px);background-size:15px 15px;padding:10px 5px 19px}
.graph-node{cursor:pointer;outline:none}.graph-node .router-halo{fill:#fff;stroke:#d4e6df;stroke-width:2}.graph-node:focus .router-halo,.graph-node:hover .router-halo{stroke:#40a77e;stroke-width:4}.graph-node text{font-family:Inter,"Segoe UI",Arial,sans-serif}.graph-node .router-name{fill:#405e51;font-size:15px;font-weight:600;text-anchor:middle}.graph-node .router-ip{fill:#8eaaa0;font-size:10px;text-anchor:middle}.graph-node .pcc-badge{fill:#e8f4ed;stroke:#cce4d6}.graph-node .pcc-text{fill:#518168;font-size:9px;font-weight:600;text-anchor:middle}
.graph-controls{position:absolute;left:14px;bottom:9px;display:flex;gap:4px}.graph-controls button{width:27px;height:27px;min-width:27px;background:#fff;border:1px solid #dfe8e3;color:#7e9a8b;border-radius:5px;font-size:16px;box-shadow:0 1px 4px #1c382505;display:grid;place-items:center}.graph-controls button:hover{color:#2f7d59;background:#f1f8f3}.graph-note{position:absolute;right:15px;bottom:17px;font-size:8px;color:#8d9c9e;pointer-events:none}.network-stage .diagram-legend{font-size:9px;padding-top:12px;padding-bottom:13px;gap:13px}.legend-swatch.original{background:var(--route-baseline)}.legend-swatch.replacement{background:var(--route-replacement)}.legend-swatch.control{height:0;background:transparent;border-top:1px dashed #90a8c3}.legend-swatch.node{width:6px;height:6px;background:#64b78a;border-radius:50%}.network-stage .software-flow{color:#7c9589;background:#fafcfb}.network-stage .route-strip{border-top-color:#e8eeea}.node-dialog{width:min(650px,92vw)}.node-discovered{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;background:#eef7f1;color:#4f8868;border:1px solid #deeee4;border-radius:5px;font-size:11px;margin-bottom:21px}.node-discovered i{background:#64b78a;width:6px;height:6px;border-radius:50%}.node-detail-note{font-size:11px;color:#8c9e96;line-height:1.7;margin-bottom:0}.network-stage .topology-panel .panel-header{border-bottom-color:#eaf0ec}
@media(min-width:801px) and (max-height:820px){.network-canvas{padding-top:5px;padding-bottom:20px}.graph-controls{bottom:7px;left:11px}.graph-controls button{width:23px;height:23px;min-width:23px;font-size:14px}.graph-note{bottom:14px;font-size:7px}.network-stage .diagram-legend{font-size:7px;gap:10px;padding-top:8px;padding-bottom:9px}}
:root{--route-baseline:#4e9b75;--route-replacement:#2f7b63}.network-stage .legend-item:first-child .legend-swatch{background:#9ab5ac}.network-stage .legend-swatch.failed{background:repeating-linear-gradient(90deg,#c76f5e 0 5px,transparent 5px 8px)}.controller-diagram .network-area{fill:#f1f7f3;stroke:#e6eee8}.controller-diagram .network-area.area-one{fill:#f9f5ed;stroke:#eee8dc}.graph-node:focus .router-halo,.graph-node:hover .router-halo{stroke:#40a77e!important;stroke-width:4!important}
/* Keep the copied topology large enough for projection beside the CLI. */
.network-stage .software-flow{display:none}.network-stage .panel-header{height:78px}.network-stage .route-strip{min-height:58px;padding:13px 0}
@media(min-width:801px) and (max-height:820px){.network-stage .panel-header{height:54px}.network-stage .route-strip{min-height:48px;padding:12px 0}}
/* Presentation typography: spend viewport space on the graph and its evidence. */
:root{--page-gutter:clamp(20px,2.5vw,48px);--panel-inset:clamp(16px,1.25vw,24px)}
.slide-intro h1{font-weight:650;letter-spacing:-.75px}
.code-scroll code{font-variant-ligatures:none}
.code-line{min-height:1.6em;line-height:1.6}
.code-line.blank{min-height:.65em;line-height:.65}
.evidence-tabs{position:relative;scroll-padding:20px}
.dialog-header h2{font-size:28px;line-height:1.2}
.dialog-note,.node-detail-note,.source-notes p{font-size:14px;line-height:1.7}
.source-facts{font-size:14px;line-height:1.65;gap:12px 20px}
.overview-card strong{font-size:17px;line-height:1.4}
.overview-card small,.overview-card>span{font-size:12px}
.graph-node .router-ip{font-variant-numeric:tabular-nums}
.lab-area-label{font-size:17px!important;letter-spacing:1px!important}
.lab-area-address{font-size:14px!important}
.lab-controller-card>text:first-of-type{font-size:20px!important}
.lab-controller-card>text:last-of-type{font-size:12px!important}
.lab-attachment-label{font-size:15px!important}
.lab-failure-badge text{font-size:13px!important;letter-spacing:0!important}
.lab-failure-badge rect{width:100px;x:-50px}
.controller-diagram .module-title{font-size:21px}
.controller-diagram .pce-title{font-size:23px}
.controller-diagram .host-label,.controller-diagram .host-name{font-size:16px}
.controller-diagram .signal-label{font-size:19px}
.controller-diagram .module-subtitle,.controller-diagram .api-label{font-size:16px}
.controller-diagram .network-area-label{font-size:18px}
.controller-diagram .attachment-label,.controller-diagram .protocol-label{font-size:16px}
.controller-diagram .diagram-footnote{font-size:13px}
.bgpls-diagram .pipeline-title{font-size:23px}
.bgpls-diagram .pipeline-subtitle{font-size:16px}
.bgpls-diagram .pipeline-note,.bgpls-diagram .pipeline-interface{font-size:16px}
.bgpls-diagram .process-number{font-size:14px;letter-spacing:.3px}
.controller-stage .control-explanation,.controller-stage .diagram-legend{display:none}
@media(min-width:801px){
 .topbar{height:64px;padding:0 var(--page-gutter);gap:20px}
 .brand{font-size:21px}.brand small{font-size:10px;letter-spacing:1.1px}
 .recorded-label{font-size:13px}
 .quiet-button,.present-button{height:38px;font-size:14px}
 .presentation{padding:18px var(--page-gutter) 8px}
 .slide-intro,.controller-stage .slide-intro{min-height:0;margin-bottom:18px;gap:28px;align-items:center}
 .intro-copy{max-width:1400px;min-width:0}
 .eyebrow{font-size:11px;letter-spacing:1px;margin-bottom:8px}
 .slide-intro h1{font-size:clamp(28px,2vw,38px);line-height:1.2;margin-bottom:8px}
 .slide-summary{font-size:clamp(15px,.95vw,18px);line-height:1.5;max-width:1200px}
 .capture-stamp{min-width:172px;padding-left:20px}
 .capture-stamp>span{font-size:11px;letter-spacing:.7px;margin-bottom:6px}
 .capture-stamp time{font-size:20px;letter-spacing:-.3px}
 .capture-stamp small{font-size:12px;margin-top:6px}
 .split-layout,.controller-stage .split-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:20px}
 .panel-header,.network-stage .panel-header,.controller-stage .panel-header{height:68px;padding:12px var(--panel-inset);gap:12px}
 .panel-header h2{font-size:clamp(17px,1.1vw,21px);line-height:1.25;letter-spacing:-.25px}
 .panel-eyebrow{font-size:10px;letter-spacing:1px;margin-bottom:5px}
 .small-button,.flow-controls .small-button{font-size:13px;min-height:34px;padding:0 10px}
 .topology-actions{gap:8px}
 .link-count{font-size:12px;padding:8px}
 .network-canvas{padding:8px 5px 35px}
 .network-stage .diagram-legend,.controller-stage .diagram-legend{font-size:12px;line-height:1.4;padding:10px var(--panel-inset);gap:9px 16px;min-height:0}
 .legend-item{gap:7px}.legend-swatch{width:20px}
 .network-stage .route-strip{margin:0 var(--panel-inset);min-height:52px;padding:12px 0;gap:12px}
 .route-strip>span:first-child{font-size:12px}
 .route-strip strong{font-size:clamp(14px,.9vw,17px);line-height:1.4}
 .route-status{font-size:11px!important;letter-spacing:.3px;padding:6px 8px}
 .graph-controls{left:var(--panel-inset);bottom:9px;gap:6px}
 .graph-controls button{width:30px;height:30px;min-width:30px;font-size:19px}
 .graph-note{bottom:17px;font-size:11px;right:var(--panel-inset)}
 .evidence-tabs,.controller-stage .evidence-tabs{min-height:46px;padding:0 var(--panel-inset);gap:20px}
 .evidence-tabs button,.controller-stage .evidence-tabs button,.bgpls-stage .evidence-tabs button{font-size:14px;line-height:1.3;padding:12px 0 10px}
 .terminal-meta{font-size:12px;letter-spacing:.25px;padding:12px var(--panel-inset) 8px}
 .code-scroll{padding:8px var(--panel-inset) 20px}
 .code-scroll code{font-size:clamp(16px,1.09vw,21px);line-height:1.6}
 .evidence-footer{min-height:46px;padding:10px var(--panel-inset);font-size:12px;line-height:1.4}
 .text-button{font-size:13px}
 .below-panels{padding:10px 0 0;gap:16px}
 .below-panels p{font-size:12px;gap:8px}
 .controller-stage .control-explanation{min-height:0;padding:9px var(--panel-inset) 4px}
 .control-explanation>span,.control-explanation>p{display:none}
 .control-explanation>strong{font-size:17px;line-height:1.35}
 .flow-controls{padding:6px var(--panel-inset) 3px;gap:8px}
 .flow-controls #flow-counter{font-size:13px}
 .controller-stage .diagram-wrap{padding:8px 8px 0}
 .presentation-controls{padding:0 var(--page-gutter)}
 .navigation-row{padding:10px 0;gap:16px}
 .previous-button,.next-button{height:40px;font-size:14px;min-width:120px;gap:10px}
 .step-navigation button{font-size:12px;line-height:1.3;padding:2px 6px;gap:5px;white-space:normal;text-align:center}
 .step-navigation button::after{top:16px}
 .step-number{width:28px;height:28px;font-size:12px}
 .controls-footnote{padding:6px 0 10px;font-size:11px;letter-spacing:0}
 .controls-footnote>span:last-child{font-size:11px;letter-spacing:.3px}
 .controls-footnote kbd,.controls-footnote #step-counter{font-size:12px}
 .deck-progress{margin:0 calc(-1 * var(--page-gutter))}
}
@media(min-width:801px) and (max-width:1450px){
 .topbar{height:60px}.recorded-label{display:none}
 .presentation{padding-top:12px}
 .slide-intro,.controller-stage .slide-intro{margin-bottom:12px;gap:20px}
 .capture-stamp{min-width:152px;padding-left:16px}
 .capture-stamp time{font-size:18px}.capture-stamp small{font-size:11px}
 .panel-header,.network-stage .panel-header,.controller-stage .panel-header{height:62px}
 .panel-header h2{font-size:17px}.panel-eyebrow{font-size:10px}
 .topology-actions{gap:6px}.link-count{font-size:11px}
 .small-button,.flow-controls .small-button{font-size:12px;padding:0 8px}
 .split-layout,.controller-stage .split-layout{gap:16px}
 .network-stage .diagram-legend{font-size:11px;gap:7px 12px;padding-top:8px;padding-bottom:8px}
 .route-strip>span:first-child{font-size:11px}
 .network-stage .route-strip{gap:9px}
 .route-strip strong{font-size:14px}
 .evidence-footer{font-size:11px}
 .evidence-tabs,.controller-stage .evidence-tabs{gap:18px}
 .step-navigation button{font-size:11px;padding-left:4px;padding-right:4px}
 .previous-button,.next-button{min-width:106px}
 .controls-footnote>span:last-child{font-size:10px}
}
@media(min-width:801px) and (max-width:1100px){
 .capture-stamp{display:none}
 .topology-actions{flex-wrap:wrap;justify-content:flex-end}
 .panel-header{height:auto!important;min-height:70px}
 .route-strip{flex-wrap:wrap}.route-strip>span:first-child{display:none}
 .step-navigation button>span:last-child{display:none}
 .controls-footnote>span:last-child{display:none}
}
@media(min-width:801px) and (max-height:740px){
 .topbar{height:52px}
 .presentation{padding-top:10px}
 .slide-intro,.controller-stage .slide-intro{margin-bottom:10px}
 .eyebrow{margin-bottom:6px}.slide-intro h1{margin-bottom:6px}
 .panel-header,.network-stage .panel-header,.controller-stage .panel-header{height:60px}
 .terminal-meta{padding-top:8px}
 .evidence-footer{min-height:40px;padding-top:7px;padding-bottom:7px}
 .navigation-row{padding-top:8px;padding-bottom:8px}
}
@media(max-width:800px){
 .slide-summary{font-size:15px;line-height:1.6}
 .brand small{font-size:9px;letter-spacing:.6px}
 .eyebrow{font-size:10px;letter-spacing:.7px;flex-wrap:wrap}
 .panel-eyebrow{font-size:10px;letter-spacing:.7px}
 .panel-header{height:auto;min-height:80px;gap:12px}
 .panel-header h2{font-size:18px;line-height:1.3}
 .link-count,.small-button{font-size:11px}
 .topology-actions{flex-wrap:wrap;justify-content:flex-end}
 .network-stage .diagram-legend,.controller-stage .diagram-legend{font-size:11px;line-height:1.5;gap:8px 14px}
 .route-strip{flex-wrap:wrap;gap:10px}
 .route-strip>span:first-child{font-size:11px}.route-strip strong{font-size:14px;line-height:1.5}
 .route-status{font-size:10px!important}
 .evidence-tabs button,.controller-stage .evidence-tabs button{font-size:13px}
 .terminal-meta,.evidence-footer{font-size:11px;line-height:1.5}
 .code-scroll code{font-size:14px;line-height:1.6}
 .code-scroll{max-height:480px}
 .text-button,.below-panels .text-button{font-size:12px}
 .below-panels p{font-size:11px;line-height:1.6}
 .below-panels{flex-wrap:wrap}
 .control-explanation>strong{font-size:16px;line-height:1.4}
 .control-explanation>p{font-size:14px;line-height:1.6}
 .control-explanation>span{font-size:11px}
 .flow-controls .small-button{font-size:12px;min-height:34px}
 .flow-controls #flow-counter{font-size:12px}
 .previous-button,.next-button{font-size:13px;height:40px}
 .controls-footnote,.controls-footnote>span:last-child{font-size:10px;letter-spacing:0}
 .source-facts{grid-template-columns:1fr;gap:4px}
 .source-facts dd{margin-bottom:10px}
}