/* Professional visual system; network decisions remain owned by the simulator. */
:root{--ink:#142d42;--muted:#526b80;--primary:#007cab;--line:#dbe5ed;--bg:#eef3f7;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}body{background:linear-gradient(180deg,#f6f9fb,#edf2f6);color:var(--ink);letter-spacing:-.12px}main{max-width:1400px}.app-header{border-bottom:1px solid #dce6ed;box-shadow:0 1px 8px #12334604}.product-name{letter-spacing:-.4px}.primary,.secondary{border-radius:8px}.primary{background:linear-gradient(180deg,#078bbd,#057dab);box-shadow:0 3px 8px #0876a417}.primary.action-next{box-shadow:0 0 0 3px #1599c712,0 4px 10px #065b8917}.eyebrow{font-size:12px;letter-spacing:1.3px}.work-card{box-shadow:0 4px 18px #16395105}.lab-heading h1{font-size:30px;letter-spacing:-.8px}.simple-steps{border:1px solid #dce5ed;background:#fff;border-radius:12px;padding:12px 18px;box-shadow:0 2px 7px #153e4c04}.simple-steps .current{color:#087da8}.case-banner{background:#fff;border:1px solid #dde7ee;border-left:3px solid #284b65;border-radius:12px;padding:18px 22px}.case-banner h2{font-size:21px}.case-objective{font-size:16px}.case-banner summary{font-size:14px}.next-guidance{background:#eaf6fc;border-left-width:3px;box-shadow:none}.next-guidance h2{font-size:21px}.next-guidance p{font-size:17px}.next-guidance .guidance-number{border-radius:10px;width:40px;height:40px}.catalog-intro{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr);gap:36px;padding:42px;border-radius:20px;background:radial-gradient(ellipse at 90% 20%,#14546b99,transparent 60%),linear-gradient(125deg,#0a2034,#122f47);color:#fff;border:1px solid #173f57;box-shadow:0 16px 36px #17354d12;margin-bottom:28px;overflow:hidden}.catalog-intro .eyebrow{color:#69c9ef}.catalog-intro h1{font-size:42px;line-height:1.2;letter-spacing:-1.4px;max-width:620px;margin:16px 0}.catalog-hero-copy>p{font-size:19px;line-height:1.7;max-width:620px;color:#c1d3df}.catalog-stats{gap:24px;font-size:16px;color:#b7cad7;border-top:1px solid #84b4cd24;padding-top:22px;margin-top:26px}.catalog-stats b{font-family:var(--mono);color:#fff;font-size:27px;margin-right:6px}.catalog-hero-network{align-self:center;padding:28px 24px;border:1px solid #719bb334;border-radius:16px;background:linear-gradient(140deg,#ffffff09,#ffffff02);position:relative}.hero-network-title{font:11px var(--mono);letter-spacing:1.5px;color:#79c9e9}.hero-network-row{display:flex;align-items:center;justify-content:space-between;margin:28px 0}.hero-network-row>span{display:flex;flex-direction:column;align-items:center;gap:14px}.hero-network-row svg{width:54px;height:54px;fill:none;stroke:#91d5ef;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.hero-network-row .hero-firewall svg{stroke:#ffb08c}.hero-network-row small{font:10px var(--mono);color:#c4d6e0;letter-spacing:1px}.hero-network-row i{font-style:normal;color:#5fc4e7;font-size:24px}.hero-network-tags{display:flex;gap:10px}.hero-network-tags span{padding:5px 12px;border-radius:5px;border:1px solid #65a8c545;font:12px var(--mono);color:#afdcf0}.catalog-hero-network>p{color:#98b6ca;font-size:13px;margin-top:16px}.catalog-instructions{background:#fff;border:1px solid #dce6ee}.catalog-instructions summary{font-size:18px}.catalog-grid{gap:20px}.laboratory-card{border-radius:14px;padding:24px;border-color:#d8e3eb;box-shadow:0 2px 8px #163a4a05}.laboratory-card:hover{transform:translateY(-2px);border-color:#63b4d2;box-shadow:0 9px 22px #133a5610}.laboratory-number{font-family:var(--mono);font-size:24px;background:#ecf5fa;border:1px solid #d4e7ef;border-radius:10px}.laboratory-card h2{font-size:22px;letter-spacing:-.35px}.laboratory-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.laboratory-tags span{font-size:12px;padding:4px 8px;border-radius:5px;background:#f1f5f8;border:1px solid #e0e8ee;color:#496579}.laboratory-topic{font-size:13px}.laboratory-card p{font-size:16px}.laboratory-card-bottom{font-size:14px}.topology-panel{border:1px solid #cddde8;border-radius:15px;background:#fff;box-shadow:0 7px 24px #142e4508;overflow:hidden}.topology-header{padding:22px 24px;background:linear-gradient(180deg,#fff,#fafcfd);border-bottom:1px solid #e3ebf1}.topology-header h2{font-size:23px;letter-spacing:-.5px}.topology-click-hint{background:#f5f9fc;border:0;border-bottom:1px solid #e2eaf0;color:#526f83;font-size:15px;padding:12px 24px}.topology-click-hint>span{font-size:20px}.topology-layout{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch}.topology-layout.inspector-open{grid-template-columns:minmax(0,1fr) 320px}.topology-map{min-width:0}.topology-canvas{background-color:#fcfdff;background-image:radial-gradient(#c6d8e5 .8px,transparent .8px);background-size:22px 22px;min-width:900px;max-width:1100px;margin:20px auto}.inspector-open .topology-canvas{min-width:760px}.node-icon{border-color:#b6ccdb;border-radius:12px;box-shadow:0 5px 14px #11385409;background:#fff}.node-icon svg{stroke:#216681}.topo-node.firewall .node-icon{background:#fff7f1;border-color:#ebc6a8}.topo-node.firewall .node-icon svg{stroke:#b96b36}.topo-node.isp .node-icon{background:#edf5fa;border:1px dashed #a9c7d9}.topo-node>strong{font-size:16px;letter-spacing:-.25px}.topo-node .node-ip{font:13px var(--mono);margin-top:6px;color:#36566d}.topo-node .node-caption{font-size:12px;color:#71899a;line-height:1.5}.inspector-open .topo-node{width:145px}.inspector-open .node-icon{width:64px;height:64px;padding:13px}.topo-route-chip,.topo-policy-chip{border:1px solid #c4d9e6;border-radius:8px;box-shadow:0 3px 9px #20486307}.topo-route-chip>span,.topo-policy-chip>span{font:10px var(--mono);letter-spacing:.8px}.topo-route-chip strong,.topo-policy-chip strong{font-size:14px}.topo-route-chip small,.topo-policy-chip small{font:11px/1.6 var(--mono);color:#688598}.network-wires>path{stroke-width:2.5}.topology-legend{background:#fbfdff;border-top:1px solid #e4edf2;font-size:13px;gap:18px;padding:14px 22px}.topology-tip{font-size:14px}.node-inspector{background:#f6f9fc;border-top:0;border-left:1px solid #d9e5ed;padding:22px;min-width:0;align-self:stretch;overflow-wrap:anywhere}.inspector-kicker{font:10px var(--mono);letter-spacing:1px;color:#66869b;display:block;margin-bottom:14px}.inspector-heading{align-items:flex-start;gap:12px}.inspector-heading h3{font-size:20px;line-height:1.4}.inspector-heading .text-button{padding:4px;white-space:nowrap;font-size:13px}.node-inspector p{font-size:15px;line-height:1.75;margin:16px 0}.inspector-rule{padding:14px 0;border-bottom:1px solid #dce6ed}.inspector-rule strong{font-size:15px}.inspector-note{font-size:13px!important;color:#627c8d}.inspector-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px}.inspector-actions .primary{font-size:15px;width:100%}.inspector-extra summary{font-size:14px}.inspector-extra .secondary{font-size:14px;width:100%}.journey-controls{background:#f5f8fb;border-top:1px solid #dbe6ed;padding:22px}.journey-instruction{font-size:17px;color:#435f74}.journey-buttons{gap:9px;margin-top:12px}.journey-buttons .primary{font-size:16px}.journey-buttons .secondary{font-size:14px}.trace-console{background:#0d2234;border:1px solid #183b51;border-radius:11px;color:#d2e1eb;overflow:hidden;margin-top:22px;box-shadow:0 7px 18px #122c4a14}.trace-console-bar{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:12px 18px;background:#132e43;border-bottom:1px solid #244459;font:11px var(--mono);letter-spacing:.7px;color:#97b7cd}.trace-console-bar>span:first-child{display:flex;gap:9px;align-items:center}.trace-console-bar i{width:7px;height:7px;border-radius:50%;background:#62c8e9;box-shadow:0 0 8px #62c8e940}.trace-console-body{padding:20px}.trace-console-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font:11px var(--mono);color:#8bb9d0}.trace-status{padding:5px 8px;border-radius:5px;background:#153b36;color:#89d8b2}.trace-status.fail{background:#4b292b;color:#ffb9ad}.trace-status.skip{background:#324051;color:#bbc9d8}.trace-direction{margin-left:auto;color:#81cceb}.trace-direction.return-direction{color:#c2abf0}.trace-console h3{font-size:22px;color:#eff8fe;margin:18px 0 10px;letter-spacing:-.35px}.trace-console-body>p{font-size:17px;line-height:1.7;color:#bcd0de}.trace-packet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;border-top:1px solid #254156;padding-top:17px;margin-top:20px}.trace-packet-grid>div{display:grid;gap:8px;min-width:0}.trace-packet-grid span{font:10px var(--mono);letter-spacing:1px;color:#789eb6}.trace-packet-grid code{font:14px var(--mono);color:#dfedf5;overflow-wrap:anywhere}.test-endpoints strong,.packet-fields b,.client-evidence,.evidence-table-wrap td{font-family:var(--mono)}.immediate-verdict{border-color:#cadde8}.prediction-verdict.correct{background:#eff8f3;border-color:#b9d8c8}.prediction-verdict.incorrect{background:#fff5f0;border-color:#e8c7b9}.comparison,.simple-comparison{border-radius:10px}.compare-box{border:1px solid #cddfe9;background:#f5f9fc}.comparison>div{background:white;border:1px solid #dbe6ee;border-radius:9px;padding:18px}.completion-icon{border-radius:12px}
@media(max-width:1100px){.topology-layout.inspector-open{grid-template-columns:minmax(0,1fr)}.node-inspector{border-left:0;border-top:1px solid #d9e5ed}.inspector-open .topology-canvas{min-width:900px}.inspector-open .node-icon{width:74px;height:74px;padding:15px}.inspector-open .topo-node{width:180px}.catalog-intro{padding:30px;gap:24px}.catalog-intro h1{font-size:36px}}@media(max-width:720px){.catalog-intro{grid-template-columns:1fr;padding:26px;border-radius:14px;gap:24px}.catalog-intro h1{font-size:32px;letter-spacing:-.8px}.catalog-hero-copy>p{font-size:18px}.catalog-hero-network{padding:20px}.hero-network-row{margin:20px 0}.catalog-stats{font-size:14px;gap:16px}.catalog-stats b{font-size:24px}.lab-heading h1{font-size:26px}.case-banner h2{font-size:19px}.next-guidance h2{font-size:20px}.topology-header h2{font-size:21px}.trace-console-bar{font-size:10px;padding:12px}.trace-console-body{padding:16px}.trace-console h3{font-size:20px}.trace-packet-grid{grid-template-columns:1fr 1fr}.trace-packet-grid>div:last-child{grid-column:1/-1}.trace-direction{margin-left:0}.topology-click-hint{padding:13px 18px;font-size:15px}.trace-console-body>p{font-size:16px}}@media(prefers-reduced-motion:reduce){.laboratory-card:hover{transform:none}}
.node-inspector code{font:13px/1.7 var(--mono);color:#244f6b}.inspector-actions>.primary{font-size:14px;padding-left:10px;padding-right:10px;white-space:nowrap}.node-inspector .inspector-actions{margin-top:18px}
@media(min-width:1101px){.topology-layout.simulation-live:not(.inspector-open){grid-template-columns:minmax(0,1fr) 390px}.simulation-live:not(.inspector-open) .topology-canvas{min-width:760px}.simulation-live:not(.inspector-open)>.journey-controls{border-top:0;border-left:1px solid #d9e5ed;padding:20px}.simulation-live:not(.inspector-open) .journey-buttons{display:grid;grid-template-columns:1fr 1fr}.simulation-live:not(.inspector-open) .journey-buttons>.primary{grid-column:1/-1}.simulation-live:not(.inspector-open) .journey-buttons .text-button{font-size:13px;padding:8px 0}.simulation-live:not(.inspector-open) .trace-packet-grid{grid-template-columns:1fr 1fr}.simulation-live:not(.inspector-open) .trace-packet-grid>div:last-child{grid-column:1/-1}.simulation-live:not(.inspector-open) .trace-console-bar{font-size:10px;padding:12px}.simulation-live:not(.inspector-open) .trace-console-body{padding:16px}.simulation-live:not(.inspector-open) .trace-console h3{font-size:20px}.simulation-live.inspector-open{grid-template-areas:'map inspector' 'console inspector'}.simulation-live.inspector-open>.topology-map{grid-area:map}.simulation-live.inspector-open>.journey-controls{grid-area:console}.simulation-live.inspector-open>.node-inspector{grid-area:inspector}}
@media(min-width:1101px){.simulation-live:not(.inspector-open) .journey-instruction{font-size:16px;line-height:1.5;margin-bottom:10px}.simulation-live:not(.inspector-open) .journey-buttons .secondary{font-size:13px;padding-left:8px;padding-right:8px}.simulation-live:not(.inspector-open) .trace-console{margin-top:14px}.simulation-live:not(.inspector-open) .trace-console-body{padding:14px}.simulation-live:not(.inspector-open) .trace-console h3{font-size:18px;margin:12px 0 8px}.simulation-live:not(.inspector-open) .trace-console-body>p{font-size:16px;line-height:1.55}.simulation-live:not(.inspector-open) .trace-packet-grid{gap:10px;padding-top:12px;margin-top:12px}.simulation-live:not(.inspector-open) .trace-packet-grid code{font-size:13px}}
.protocol-tag{font-family:var(--mono);color:#116286!important;border-color:#cfe3ee!important;background:#edf7fb!important}.scenario-service{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:12px 0 2px;font-size:15px;color:#49677c}.scenario-service b{font:600 13px var(--mono);padding:6px 9px;border:1px solid #cddfe9;border-radius:6px;background:#eff7fb;color:#176182}.service-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.service-options small{font-size:13px;line-height:1.6}.service-options button{min-width:0;padding:14px 8px}@media(max-width:700px){.service-options{grid-template-columns:repeat(2,minmax(0,1fr))}.scenario-service{align-items:flex-start;flex-direction:column;font-size:14px}}