:root{color-scheme:dark;--bg:#07121a;--panel:#0c1a23;--panel-2:#11232d;--line:#29414e;--ink:#e9f2f4;--muted:#95aab5;--soft:#bdccd3;--mint:#81e9c5;--blue:#91c5ff;--violet:#c2a5ff;--amber:#f0c57e;--red:#ff998d}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{min-width:320px;margin:0;background:radial-gradient(920px 500px at 5% -10%,#4f91c423,transparent 67%),radial-gradient(860px 570px at 103% 13%,#46cfab16,transparent 66%),var(--bg);color:var(--ink);font:15px/1.5 var(--site-font,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif)}
a,button{font:inherit}
a{color:inherit}
button:focus-visible,a:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.skip-link{position:absolute;z-index:20;top:8px;left:8px;padding:8px 12px;transform:translateY(-160%);border-radius:8px;background:#f5fffb;color:#092018}.skip-link:focus{transform:translateY(0)}
.path-header{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100vw - 1320px)/2));border-bottom:1px solid #263b46;background:#07121acb;backdrop-filter:blur(14px)}
.brand{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-size:19px;font-weight:740;letter-spacing:-.04em;text-decoration:none}.brand>span{color:var(--mint);font-size:24px}
.back-link{padding:9px 13px;border:1px solid #314956;border-radius:999px;color:#c4d4dd;font-size:12px;text-decoration:none;transition:border-color .2s,color .2s}.back-link:hover{border-color:#70c8a9;color:#e6fff5}
.path-shell{width:min(1320px,100%);margin:0 auto;padding:48px 28px 34px}
.path-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.48fr);align-items:end;gap:42px;margin:0 0 26px}
.eyebrow,.section-kicker{margin:0;color:#94acb8;font-size:9px;font-weight:800;letter-spacing:.145em}
.eyebrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 13px #83edc977}
.sim-pill{padding:5px 8px;border:1px solid #456071;border-radius:999px;background:#13242e;color:#b5cad6;font-size:8px;letter-spacing:.09em}
.path-hero h1{margin:16px 0 11px;font-size:clamp(42px,6.1vw,78px);font-weight:600;line-height:.99;letter-spacing:-.066em}.path-hero h1 em,.why-panel h2 em{color:var(--mint);font-style:normal}
.hero-lede{max-width:700px;margin:0;color:#a7bac4;font-size:16px;line-height:1.6}
.hero-note{display:grid;grid-template-columns:34px 1fr;align-items:start;gap:12px;margin:0 0 3px;padding:15px 16px;border:1px solid #294450;border-radius:13px;background:linear-gradient(145deg,#142b35df,#0e1d27df)}.hero-note>span{display:grid;place-items:center;width:33px;height:33px;border:1px solid #37685f;border-radius:10px;background:#12342d;color:var(--mint);font-size:19px}.hero-note p{margin:0;color:#9fb4c0;font-size:11px;line-height:1.55}.hero-note b{display:block;margin:0 0 3px;color:#e0eeee;font-size:12px}
.path-console{overflow:hidden;border:1px solid #2b4350;border-radius:19px;background:linear-gradient(155deg,#0f202afa,#0b1822fa);box-shadow:0 24px 80px #01080c49}
.console-topline{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 23px 14px}.console-topline h2{margin:4px 0 0;font-size:22px;font-weight:620;letter-spacing:-.04em}.run-state{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid #31594e;border-radius:999px;background:#10251f;color:#b2ebd2;font-size:8px;font-weight:800;letter-spacing:.1em;white-space:nowrap}.run-state i{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px #71e4b5aa}.run-state[data-state=blocked]{border-color:#81564d;background:#281d1b;color:#ffc1b5}.run-state[data-state=blocked] i{background:var(--red);box-shadow:0 0 10px #ff998d88}
.network-stage{padding:0 18px 15px}.stage-legend{display:flex;align-items:center;gap:16px;padding:0 6px 9px;color:#95aab5;font-size:8px;font-weight:780;letter-spacing:.08em}.stage-legend>span{display:inline-flex;align-items:center;gap:6px}.stage-legend i{display:inline-block;width:13px;height:2px;border-radius:2px}.legend-request{background:#82bfff}.legend-response{background:#7ee4be}.stage-synthetic{margin-left:auto;color:#778d99;font-size:7px;letter-spacing:.11em}.mobile-scroll-hint{display:none}
.stage-scroll{overflow-x:auto;border:1px solid #263d49;border-radius:15px;background:#091720;scrollbar-color:#3b5664 #0b1922;scrollbar-width:thin}.network-map{display:block;width:100%;min-width:760px;height:auto;aspect-ratio:1000/410}
.route-line{fill:none;stroke:#304b58;stroke-width:2;stroke-linecap:round;transition:stroke .3s,filter .3s}.route-glow{fill:none;stroke:#64d7ae;stroke-opacity:0;stroke-width:8;filter:url(#node-glow);transition:stroke-opacity .3s}.route-line[data-state=active],.route-line[data-state=passed]{stroke:#70dcb6;filter:drop-shadow(0 0 7px #70dcb660)}.route-line[data-state=blocked]{stroke:#d3786d;stroke-dasharray:4 7}.network-stage[data-state=running] .route-glow{stroke-opacity:.16}
.link-label rect{fill:#10212a;stroke:#2e4652;stroke-width:1}.link-label text{fill:#b2c9d4;font-size:10px;font-weight:800;letter-spacing:.09em;text-anchor:middle}.link-label .label-sub{fill:#9aafba;font-size:8px;letter-spacing:.1em}.label-tunnel rect{stroke:#6b5c8e}.label-tunnel text:first-of-type{fill:#c3b0f1}.label-mtls rect{stroke:#457562}.label-mtls text:first-of-type{fill:#a5e6cc}
.flow-arrow{fill:none;stroke:#74a9d7;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.7}.response-arrows{stroke:#57bc95;opacity:.72}.network-stage[data-direction=response] .flow-arrow:not(.response-arrows){opacity:.18}.network-stage[data-direction=request] .response-arrows{opacity:.18}
.network-node .node-halo{fill:#6fe5c1;fill-opacity:0;filter:url(#node-glow);transition:fill-opacity .3s}.network-node .node-card{fill:#12242e;stroke:#304a57;stroke-width:1.2;transition:fill .3s,stroke .3s,filter .3s}.network-node .node-icon{fill:none;stroke:#aac8d4;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.network-node:nth-of-type(6) .node-icon{stroke:#b7d1dc}.node-kind{fill:#829aa7;font-size:8px;font-weight:800;letter-spacing:.15em;text-anchor:middle}.node-title{fill:#e0edf0;font-size:13px;font-weight:680;letter-spacing:-.02em;text-anchor:middle}.network-node[data-state=active] .node-halo,.network-node[data-state=checking] .node-halo{fill-opacity:.3}.network-node[data-state=active] .node-card,.network-node[data-state=checking] .node-card{fill:#18352f;stroke:#75d9b2;filter:drop-shadow(0 0 12px #78e7c229)}.network-node[data-state=passed] .node-card{fill:#14302a;stroke:#4e8b70}.network-node[data-state=blocked] .node-card{fill:#312321;stroke:#bd756a}.network-node[data-state=blocked] .node-kind,.network-node[data-state=blocked] .node-title{fill:#ffd0c6}
.packet{opacity:0;filter:drop-shadow(0 0 8px currentColor)}.packet[data-state=active]{opacity:1}.packet-request{fill:#91c5ff;color:#91c5ff}.packet-server{fill:#c2a5ff;color:#c2a5ff}.packet-client{fill:#ffc882;color:#ffc882}.packet-response{fill:#81e9c5;color:#81e9c5}.connector-beacon{opacity:0}.connector-beacon circle:first-child{fill:#a5a0ed}.connector-beacon circle:last-child{fill:none;stroke:#a5a0ed;stroke-opacity:.5;stroke-width:1}.connector-beacon.is-active{opacity:1;animation:beacon-pulse 1s ease-out infinite}
@keyframes beacon-pulse{50%{opacity:.5;transform:scale(.84)}}
.lane-caption rect{fill:#101f28;stroke:#2c434f}.lane-caption circle{fill:#a493e9}.lane-caption text{fill:#9fb3bd;font-size:8px;font-weight:760;letter-spacing:.075em}.lane-bottom rect{fill:#0e201d;stroke:#315448}.lane-bottom path{fill:none;stroke:#7ce0bb;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.lane-bottom text{fill:#b7e5d2;font-size:10px;font-weight:630;letter-spacing:.015em}.map-foot{fill:#647c89;font-size:7px;font-weight:760;letter-spacing:.13em}
.route-key{display:flex;flex-wrap:wrap;gap:14px;padding:11px 7px 0;color:#8ea4af;font-size:9px}.route-key>span{display:inline-flex;align-items:center;gap:6px}.key-dot{width:7px;height:7px;border-radius:50%}.key-public{background:#91c5ff}.key-tunnel{background:#c2a5ff}.key-private{background:#81e9c5}
.console-bottom{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);border-top:1px solid #243b46}.trace-column{min-width:0;padding:19px 21px 20px}.control-column{min-width:0;padding:19px 20px 20px;border-left:1px solid #243b46;background:#0c1922}
.subheading{display:flex;align-items:center;justify-content:space-between;gap:14px}.subheading h3{margin:4px 0 0;font-size:17px;font-weight:620;letter-spacing:-.03em}.trace-counter{color:#a4b8c1;font-size:8px;font-weight:800;letter-spacing:.1em;white-space:nowrap}
.trace-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:13px 0;padding:0;list-style:none}.trace-list li{display:grid;grid-template-columns:22px minmax(0,1fr);align-content:start;gap:5px;min-height:88px;padding:8px 7px;border:1px solid #233b47;border-radius:9px;background:#0d1b25;transition:border-color .2s,background .2s}.trace-list li>span{display:grid;place-items:center;width:20px;height:20px;border:1px solid #3a515d;border-radius:6px;color:#94aab5;font:700 9px ui-monospace,monospace}.trace-list li>div{min-width:0}.trace-list b{display:block;color:#c3d2d8;font-size:8px;font-weight:700;line-height:1.35}.trace-list small{display:block;margin-top:4px;color:#8095a1;font-size:7px;line-height:1.4}.trace-list i{grid-column:2;color:#6f8591;font-size:7px;font-style:normal;font-weight:820;letter-spacing:.09em}.trace-list li[data-state=active]{border-color:#5e9c81;background:#112921}.trace-list li[data-state=passed]{border-color:#3b6b56;background:#10241e}.trace-list li[data-state=blocked]{border-color:#905a50;background:#281e1c}.trace-list li[data-state=active] i,.trace-list li[data-state=passed] i{color:#9ae8c4}.trace-list li[data-state=blocked] i{color:var(--red)}
.trace-result{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:start;gap:9px;min-height:84px;padding:11px 12px;border:1px solid #304753;border-radius:11px;background:radial-gradient(ellipse at 0 0,#5287a01a,transparent 65%),#0b1922;transition:border-color .2s,background .2s}.trace-result[data-result=success]{border-color:#397561;background:radial-gradient(ellipse at 0 0,#4fb78d24,transparent 65%),#0d1d22}.trace-result[data-result=blocked],.trace-result[data-result=denied]{border-color:#80564d;background:radial-gradient(ellipse at 0 0,#df80691c,transparent 65%),#211a1d}.result-icon{display:grid;place-items:center;width:29px;height:29px;border:1px solid #426178;border-radius:9px;background:#162b37;color:#a9c9f8;font-size:16px}.trace-result[data-result=success] .result-icon{border-color:#48846a;color:var(--mint)}.trace-result[data-result=blocked] .result-icon,.trace-result[data-result=denied] .result-icon{border-color:#8c5e52;color:var(--red)}.trace-result>div{min-width:0}.result-kicker{margin:0 0 2px;color:#8ea5b1;font-size:7px;font-weight:820;letter-spacing:.13em}.trace-result h3{margin:0;color:#e1edef;font-size:14px;font-weight:650;letter-spacing:-.025em;line-height:1.3}.trace-result>div>p:last-child{margin:4px 0 0;color:#96aab5;font-size:9px;line-height:1.5}
.request-mode{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px 0 10px}.request-mode button{display:grid;grid-template-columns:25px 1fr;align-items:center;gap:0 7px;min-height:55px;padding:7px 9px;border:1px solid #2b424f;border-radius:9px;background:#0e1d27;color:inherit;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}.request-mode button>span{grid-row:span 2;display:grid;place-items:center;width:24px;height:24px;border:1px solid #3a5460;border-radius:7px;color:#91bfd1;font-size:13px}.request-mode b{font-size:9px;font-weight:700}.request-mode small{color:#8095a1;font-size:7px}.request-mode button[aria-pressed=true]{border-color:#5d9c80;background:#142c25}.request-mode button[aria-pressed=true]>span{border-color:#528b70;background:#15372b;color:#a7efcf}
.scenario-list{display:grid;gap:5px}.scenario-list button{display:grid;grid-template-columns:23px minmax(0,1fr) 17px;align-items:center;gap:7px;width:100%;min-height:48px;padding:6px 8px;border:1px solid #283e4a;border-radius:8px;background:#0e1c26;color:inherit;text-align:left;cursor:pointer;transition:background .16s,border-color .16s,transform .16s}.scenario-list button:hover{border-color:#567381;background:#142631;transform:translateY(-1px)}.scenario-list button:disabled,.request-mode button:disabled{opacity:.6;cursor:progress;transform:none}.scenario-index{display:grid;place-items:center;width:22px;height:22px;border:1px solid #3a515e;border-radius:7px;color:#9cb2bd;font:700 8px ui-monospace,monospace}.scenario-list button>span:nth-child(2){min-width:0}.scenario-list b,.scenario-list small{display:block}.scenario-list b{color:#d5e2e5;font-size:9px;font-weight:680}.scenario-list small{margin-top:1px;color:#8da3af;font-size:7px;line-height:1.35}.scenario-list button>i{display:grid;place-items:center;width:16px;height:16px;border:1px solid #3b535f;border-radius:50%;color:transparent;font-size:9px;font-style:normal}.scenario-list button[aria-pressed=true]{border-color:#5e9b7e;background:linear-gradient(100deg,#15332a,#10232c)}.scenario-list button[aria-pressed=true] .scenario-index{border-color:#5c9879;background:#15372b;color:#c0f2da}.scenario-list button[aria-pressed=true]>i{border-color:#5ca583;background:#184332;color:#c5ffe2}
.run-button{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:44px;margin:12px 0 0;padding:0 14px;border:1px solid #79ddba;border-radius:9px;background:linear-gradient(110deg,#a1f0d1,#73d9b4);box-shadow:0 8px 25px #67d6aa22;color:#08241b;font-size:11px;font-weight:820;cursor:pointer;transition:filter .2s,transform .2s}.run-button:hover{filter:brightness(1.08);transform:translateY(-1px)}.run-button:disabled{opacity:.68;cursor:progress;transform:none}.control-note{margin:8px 0 0;color:#7d929e;font-size:8px;line-height:1.45;text-align:center}
.why-panel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:36px;margin-top:20px;padding:25px;border:1px solid #29414d;border-radius:16px;background:linear-gradient(135deg,#10232c,#0c1922)}.why-panel h2{margin:8px 0;font-size:clamp(24px,3vw,35px);font-weight:620;line-height:1.1;letter-spacing:-.045em}.why-panel>div>p:last-child{max-width:55ch;margin:0;color:#9bafb9;font-size:11px;line-height:1.6}.why-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.why-cards article{min-height:111px;padding:11px;border:1px solid #2a414d;border-radius:10px;background:#0c1a23}.why-cards article>span{display:block;color:#8299a5;font-size:7px;font-weight:800;letter-spacing:.1em}.why-cards b{display:block;margin:8px 0 4px;color:#d8e6e9;font-size:12px;font-weight:700}.why-cards p{margin:0;color:#8ea4af;font-size:8px;line-height:1.5}
.path-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:19px;padding:0 3px;color:#8298a4;font-size:9px}.path-footer b{color:#c0d0d7;font-weight:800;letter-spacing:.09em}.path-footer a{color:#bcebd8;text-decoration:none}.path-footer a:hover{text-decoration:underline}
@media(max-width:1000px){.console-bottom{grid-template-columns:minmax(0,1fr) minmax(270px,.75fr)}.trace-list{grid-template-columns:repeat(3,minmax(0,1fr))}.trace-list li{min-height:72px}.trace-list li:nth-child(4),.trace-list li:nth-child(5){grid-column:span 1}.why-panel{gap:22px;padding:21px}.why-cards article{padding:9px}}
@media(max-width:760px){.path-shell{padding:32px 17px 26px}.path-hero{grid-template-columns:1fr;gap:15px;margin-bottom:17px}.path-hero h1{font-size:clamp(41px,9vw,65px)}.hero-note{max-width:580px}.console-bottom{grid-template-columns:1fr}.control-column{border-top:1px solid #243b46;border-left:0}.trace-column{padding:17px}.control-column{padding:17px}.trace-list{grid-template-columns:repeat(5,minmax(0,1fr))}.trace-list li{min-height:84px}.why-panel{grid-template-columns:1fr;gap:16px}}
@media(max-width:540px){.path-header{height:57px;padding:0 14px}.path-shell{padding:25px 11px 21px}.path-hero h1{font-size:clamp(40px,11.5vw,56px)}.hero-lede{font-size:14px}.eyebrow{font-size:8px}.sim-pill{font-size:7px}.console-topline{align-items:flex-start;padding:16px 13px 11px}.console-topline h2{font-size:19px}.run-state{font-size:7px;padding:6px 7px}.network-stage{padding:0 9px 12px}.stage-legend{gap:9px;padding:0 3px 8px;font-size:7px}.stage-synthetic{font-size:6px}.desktop-synthetic{display:none}.mobile-scroll-hint{display:inline}.network-map{min-width:760px}.route-key{gap:7px 12px;padding:9px 3px 0;font-size:8px}.trace-column{padding:15px 11px}.control-column{padding:15px 11px}.trace-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.trace-list li{min-height:75px}.trace-list li:last-child{grid-column:1/-1}.trace-list b{font-size:9px}.trace-list small{font-size:8px}.trace-list i{font-size:7px}.subheading h3{font-size:15px}.trace-result{min-height:79px;padding:10px}.trace-result h3{font-size:13px}.request-mode button{min-height:50px}.scenario-list button{min-height:45px}.why-panel{margin-top:13px;padding:17px 14px}.why-panel h2{font-size:27px}.why-cards{grid-template-columns:1fr}.why-cards article{min-height:0;padding:11px}.why-cards b{margin:5px 0 2px}.why-cards p{font-size:9px}.path-footer{align-items:flex-start;flex-direction:column;gap:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}