:root{color-scheme:dark;--bridge-bg:#08131c;--bridge-panel:#101f2a;--bridge-panel-soft:#132531;--bridge-line:#29414f;--bridge-ink:#eaf2f5;--bridge-muted:#91a8b6;--bridge-soft:#bdcbd3;--bridge-mint:#83edc9;--bridge-blue:#95c8ff;--bridge-violet:#c0a4ff;--bridge-amber:#f2c58c;--bridge-red:#ff9b91}
*{box-sizing:border-box}
body{min-width:320px;margin:0;background:radial-gradient(1000px 610px at 4% -12%,#527cad2a,transparent 65%),radial-gradient(940px 570px at 98% 4%,#46c4a119,transparent 62%),var(--bridge-bg);color:var(--bridge-ink);font:15px/1.5 var(--site-font,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif)}
button,a{font:inherit}
a{color:inherit}
button:focus-visible,a:focus-visible{outline:2px solid var(--bridge-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)}
.bridge-header{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100vw - 1320px)/2));border-bottom:1px solid #263844;background:#08131cbf;backdrop-filter:blur(14px)}
.brand{display:inline-flex;align-items:center;gap:9px;color:var(--bridge-ink);font-size:19px;font-weight:730;letter-spacing:-.04em;text-decoration:none}.brand>span{color:var(--bridge-mint);font-size:24px}
.back-link{padding:9px 13px;border:1px solid #314856;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}
.bridge-shell{width:min(1320px,100%);margin:0 auto;padding:50px 28px 34px}
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,.55fr);align-items:end;gap:42px;margin-bottom:28px}
.eyebrow,.section-label,.layer-label{margin:0;color:#99b2c0;font-size:10px;font-weight:780;letter-spacing:.14em}
.eyebrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--bridge-mint);box-shadow:0 0 14px #83edc977}
.sim-pill{padding:5px 8px;border:1px solid #476074;border-radius:999px;background:#142532;color:#b5cad6;font-size:8px;letter-spacing:.1em}
.intro h1{max-width:830px;margin:17px 0 12px;font-size:clamp(43px,6.3vw,82px);font-weight:610;line-height:.99;letter-spacing:-.065em}.intro h1 em{color:var(--bridge-mint);font-style:normal}
.intro-lede{max-width:700px;margin:0;color:#a8bbc6;font-size:17px;line-height:1.58}
.intro-note{display:grid;grid-template-columns:37px minmax(0,1fr);align-items:start;gap:12px;margin-bottom:4px;padding:16px;border:1px solid #294451;border-radius:14px;background:linear-gradient(145deg,#142b35cc,#10212cbf)}
.note-icon{display:grid;place-items:center;width:34px;height:34px;border:1px solid #37685f;border-radius:10px;background:#12342d;color:var(--bridge-mint);font-size:20px}.intro-note p{margin:0;color:#9fb4c0;font-size:12px;line-height:1.55}.intro-note b{display:block;margin:0 0 4px;color:#e3f1f1;font-size:13px}
.lab-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:15px}
.left-column{display:grid;gap:15px;min-width:0}
.route-card,.scenario-panel,.layers{min-width:0;border:1px solid #293f4d;border-radius:18px;background:linear-gradient(155deg,#10202bfa,#0c1923fa);box-shadow:0 20px 70px #02090d35}
.route-card{padding:22px 24px 19px}
.card-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:19px}.card-heading h2,.layers-heading h2{margin:5px 0 0;font-size:22px;font-weight:620;letter-spacing:-.035em;line-height:1.18}
.live-tag{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:780;letter-spacing:.1em;white-space:nowrap}.live-tag i{width:6px;height:6px;border-radius:50%;background:#71e4b5;box-shadow:0 0 11px #71e4b5aa}
.route-scroll{overflow-x:auto;scrollbar-color:#405967 #0d1a24;scrollbar-width:thin}
.route-map{display:grid;grid-template-columns:minmax(116px,1fr) 64px minmax(116px,1fr) 94px minmax(116px,1fr) 80px minmax(116px,1fr);align-items:center;min-width:760px;margin:0;padding:0;list-style:none}
.route-node{position:relative;display:grid;justify-items:start;align-content:start;min-height:164px;padding:13px 12px 12px;border:1px solid #2e4654;border-radius:12px;background:linear-gradient(145deg,#162a36,#101f29);transition:border-color .25s,background .25s,box-shadow .25s,transform .25s}
.route-node[data-state=active],.route-node[data-state=checking]{transform:translateY(-3px);border-color:#73cbaa;background:linear-gradient(145deg,#17362f,#12252b);box-shadow:0 0 26px #6de0b21c}
.route-node[data-state=passed]{border-color:#477363;background:linear-gradient(145deg,#15332e,#102127)}
.route-node[data-state=blocked]{border-color:#9a6156;background:linear-gradient(145deg,#382623,#201d20);box-shadow:0 0 25px #ea89751c}
.node-icon{display:grid;place-items:center;width:34px;height:34px;margin-bottom:10px;border:1px solid #40596a;border-radius:10px;background:#1a303d;color:#b7d5e4}.node-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.edge-icon{color:#a7c8ff}.gateway-icon{color:#c8b1ff}.service-icon{color:#91eccd}
.node-type{color:#8099a8;font-size:8px;font-weight:780;letter-spacing:.13em}.route-node>b{margin-top:3px;color:#e6eff2;font-size:13px;font-weight:690;letter-spacing:-.02em}.route-node small{max-width:140px;margin-top:4px;color:#91a6b2;font-size:9px;line-height:1.35}
.node-state{align-self:end;margin-top:auto;padding-top:13px;color:#8095a2;font-size:8px;font-weight:780;letter-spacing:.1em}.route-node[data-state=active] .node-state,.route-node[data-state=checking] .node-state{color:var(--bridge-mint)}.route-node[data-state=passed] .node-state{color:#9bd6bb}.route-node[data-state=blocked] .node-state{color:var(--bridge-red)}
.route-link{display:grid;justify-items:center;gap:8px;min-width:0}.route-wire{position:relative;width:100%;height:2px;background:#344c59;transition:background .25s}.route-wire::before{position:absolute;top:50%;right:-1px;width:7px;height:7px;border-top:1px solid #607b88;border-right:1px solid #607b88;content:"";transform:translateY(-50%) rotate(45deg)}.route-wire i{position:absolute;top:50%;left:0;width:7px;height:7px;border:1px solid #cbffec;border-radius:50%;background:#60d9aa;box-shadow:0 0 14px #6ef2bd;opacity:0;transform:translate(-50%,-50%)}
.route-link[data-state=active] .route-wire,.route-link[data-state=passed] .route-wire{background:#61c99e}.route-link[data-state=blocked] .route-wire{background:#a85e57}.route-link[data-state=active] .route-wire i{opacity:1;animation:packet .7s ease-in-out infinite alternate}.route-link[data-state=blocked] .route-wire::before{border-color:#ed9587}.wire-label{color:#8da3ae;font-size:8px;font-weight:760;letter-spacing:.055em;text-align:center;white-space:nowrap}.route-link-tunnel .wire-label{color:#b6a1ec}.route-link-mtls .wire-label{color:#98ddc1}
@keyframes packet{to{left:100%;transform:translate(-50%,-50%) scale(1.3)}}
.route-caption{display:flex;align-items:flex-start;gap:8px;margin:14px 0 17px;padding:10px 12px;border:1px solid #233b47;border-radius:10px;background:#0b1821;color:#94aab6;font-size:10px;line-height:1.5}.route-caption b{color:#c9e3df}.caption-mark{flex:none;color:#a5c8ff;font-size:14px}
.trace-console{display:grid;grid-template-columns:34px minmax(0,1fr);gap:11px;align-items:start;min-height:95px;padding:15px;border:1px solid #344957;border-radius:12px;background:radial-gradient(ellipse at 0 0,#5287a01a,transparent 65%),#0d1b25;transition:border-color .2s,background .2s}.trace-console[data-outcome=success]{border-color:#397561;background:radial-gradient(ellipse at 0 0,#4fb78d24,transparent 65%),#0d1d23}.trace-console[data-outcome=blocked],.trace-console[data-outcome=denied]{border-color:#81564d;background:radial-gradient(ellipse at 0 0,#e1806820,transparent 65%),#211b1e}.console-icon{display:grid;place-items:center;width:32px;height:32px;border:1px solid #426178;border-radius:10px;background:#172c38;color:#accdfc;font-size:19px}.trace-console[data-outcome=success] .console-icon{border-color:#48846a;color:var(--bridge-mint)}.trace-console[data-outcome=blocked] .console-icon,.trace-console[data-outcome=denied] .console-icon{border-color:#8c5e52;color:var(--bridge-red)}.trace-console>div{min-width:0}.console-kicker{margin:0 0 3px;color:#91a8b7;font-size:8px;font-weight:800;letter-spacing:.13em}.trace-console h3{margin:0;color:#e7f1f2;font-size:17px;font-weight:640;letter-spacing:-.025em;line-height:1.25}.trace-console>div>p:last-child{margin:5px 0 0;color:#9db1bc;font-size:11px;line-height:1.5}
.trace-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:10px 0 0;padding:0;list-style:none}.trace-steps li{display:grid;grid-template-columns:22px minmax(0,1fr);align-content:start;gap:6px;min-height:60px;padding:9px 8px;border:1px solid #243b47;border-radius:9px;background:#0e1c26}.trace-steps li>span{display:grid;place-items:center;width:21px;height:21px;border:1px solid #38505d;border-radius:6px;color:#8ea6b2;font:700 9px ui-monospace,monospace}.trace-steps b{align-self:center;color:#a8bbc4;font-size:8px;font-weight:650;line-height:1.3}.trace-steps i{grid-column:2;color:#718894;font-size:7px;font-style:normal;font-weight:800;letter-spacing:.08em}.trace-steps li[data-state=active]{border-color:#4d866f;background:#112820}.trace-steps li[data-state=passed]{border-color:#365d50;background:#11241f}.trace-steps li[data-state=blocked]{border-color:#81564d;background:#2b211f}.trace-steps li[data-state=active] i,.trace-steps li[data-state=passed] i{color:#91e3bc}.trace-steps li[data-state=blocked] i{color:var(--bridge-red)}
.scenario-panel{position:sticky;top:18px;padding:22px 18px 17px}.scenario-heading h2{margin:5px 0 7px;font-size:24px;font-weight:620;letter-spacing:-.04em;line-height:1.1}.scenario-heading>p:last-child{margin:0;color:#96aab6;font-size:12px;line-height:1.5}
.scenario-list{display:grid;gap:7px;margin-top:17px}.scenario-choice{display:grid;grid-template-columns:27px minmax(0,1fr) 20px;align-items:center;gap:8px;width:100%;min-height:62px;padding:9px;border:1px solid #2a414e;border-radius:10px;background:#101f29;color:inherit;text-align:left;cursor:pointer;transition:border-color .18s,background .18s,transform .18s}.scenario-choice:hover{border-color:#547181;background:#142733;transform:translateY(-1px)}.scenario-choice:disabled{opacity:.65;cursor:progress;transform:none}.scenario-index{display:grid;place-items:center;width:25px;height:25px;border:1px solid #3a5360;border-radius:8px;color:#9ab1bd;font:700 10px ui-monospace,monospace}.scenario-choice>span:nth-child(2){min-width:0}.scenario-choice b,.scenario-choice small{display:block}.scenario-choice b{color:#dce8eb;font-size:11px;font-weight:690}.scenario-choice small{margin-top:2px;color:#8da3af;font-size:9px;line-height:1.35}.scenario-check{display:grid;place-items:center;width:19px;height:19px;border:1px solid #435c68;border-radius:50%;color:transparent;font-size:11px}.scenario-choice[aria-pressed=true]{border-color:#65aa8c;background:linear-gradient(100deg,#17372e,#132631)}.scenario-choice[aria-pressed=true] .scenario-index{border-color:#5b9f80;background:#14392e;color:#b7f6d8}.scenario-choice[aria-pressed=true] .scenario-check{border-color:#61b38c;background:#1b4937;color:#c5ffe2}
.scenario-footer{margin-top:15px;padding-top:14px;border-top:1px solid #263b46}.run-button{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:48px;padding:0 15px;border:1px solid #79ddba;border-radius:10px;background:linear-gradient(110deg,#a1f0d1,#73d9b4);box-shadow:0 8px 25px #67d6aa25;color:#08241b;font-size:12px;font-weight:800;letter-spacing:.01em;cursor:pointer;transition:filter .2s,transform .2s}.run-button:hover{filter:brightness(1.08);transform:translateY(-1px)}.run-button:disabled{opacity:.72;cursor:progress;transform:none}.scenario-footer>p{margin:9px 0 0;color:#8299a6;font-size:9px;text-align:center}
.layers{padding:19px 21px 20px}.layers-heading h2{font-size:19px}.layer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:15px}.layer-card{position:relative;min-height:159px;padding:14px;border:1px solid #2a414d;border-radius:11px;background:linear-gradient(145deg,#142531,#101d27);overflow:hidden}.layer-card::after{position:absolute;right:-28px;top:-34px;width:88px;height:88px;border:1px solid #89c7ac1c;border-radius:50%;box-shadow:0 0 0 13px #89c7ac08,0 0 0 28px #89c7ac06;content:""}.layer-number{position:absolute;top:12px;right:13px;color:#728996;font:700 9px ui-monospace,monospace}.layer-label{color:#8fa7b2;font-size:7px}.layer-card h3{margin:6px 0;color:#dce9ec;font-size:13px;font-weight:690;letter-spacing:-.02em}.layer-card>p:last-child{margin:0;color:#91a7b2;font-size:9px;line-height:1.55}.layer-card>p b{color:#c7e6db}.layer-bridge::after{border-color:#afa0e525;box-shadow:0 0 0 13px #afa0e508,0 0 0 28px #afa0e506}.layer-identity::after{border-color:#88bded25;box-shadow:0 0 0 13px #88bded08,0 0 0 28px #88bded06}
.bridge-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px;padding:0 3px;color:#8499a5;font-size:10px}.bridge-footer p{margin:0}.footer-mark{color:var(--bridge-mint);font-size:15px}.footer-separator{padding:0 7px;color:#465c67}.bridge-footer a{color:#bcebd8;text-decoration:none}.bridge-footer a:hover{text-decoration:underline}
@media(max-width:1050px){.lab-layout{grid-template-columns:minmax(0,1fr) 300px}.route-card{padding:19px}.trace-steps{grid-template-columns:repeat(3,minmax(0,1fr))}.trace-steps li:nth-child(4),.trace-steps li:nth-child(5){grid-column:span 1}.layer-card{padding:12px}.layer-card>p:last-child{font-size:8.5px}}
@media(max-width:790px){.bridge-shell{padding:34px 18px 27px}.intro{grid-template-columns:1fr;gap:17px;margin-bottom:18px}.intro h1{max-width:650px;font-size:clamp(44px,10vw,68px)}.intro-note{max-width:600px}.lab-layout{grid-template-columns:1fr}.scenario-panel{position:static;grid-row:1}.scenario-list{grid-template-columns:repeat(2,minmax(0,1fr))}.scenario-choice:last-child{grid-column:1/-1}.scenario-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}.scenario-footer>p{margin:0;text-align:right}.route-map{min-width:760px}}
@media(max-width:560px){.bridge-header{height:56px;padding:0 15px}.bridge-shell{padding:27px 13px 22px}.intro h1{margin-top:15px;font-size:clamp(42px,12vw,58px)}.intro-lede{font-size:15px}.sim-pill{font-size:7px}.scenario-panel{padding:18px 13px 14px}.scenario-list{grid-template-columns:1fr;gap:6px;margin-top:13px}.scenario-choice:last-child{grid-column:auto}.scenario-choice{min-height:56px}.scenario-footer{grid-template-columns:1fr}.scenario-footer>p{text-align:center}.route-card{padding:16px 12px 13px}.card-heading{align-items:flex-start;gap:10px}.card-heading h2{font-size:20px}.live-tag{padding:6px 7px;font-size:7px}.route-caption{font-size:9px}.trace-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.trace-steps li:last-child{grid-column:1/-1}.trace-console{grid-template-columns:29px minmax(0,1fr);gap:8px;padding:12px}.console-icon{width:28px;height:28px}.trace-console h3{font-size:15px}.trace-console>div>p:last-child{font-size:10px}.layers{padding:17px 13px}.layers-heading h2{font-size:18px}.layer-grid{grid-template-columns:1fr}.layer-card{min-height:0;padding:13px}.layer-card>p:last-child{max-width:52ch;font-size:10px}.bridge-footer{align-items:flex-start;flex-direction:column;gap:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}