:root{color-scheme:dark;--bg:#0b1116;--panel:#101a20;--panel-alt:#142027;--line:#26343b;--muted:#8d9fa7;--text:#edf1ed;--accent:#d4f484;--amber:#e7aa71;--mono:'DM Mono','Courier New',monospace;--sans:Manrope,'Trebuchet MS',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}button{font:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button{cursor:pointer}.shell{max-width:1680px;margin:auto;padding:0 clamp(18px,4vw,72px)}
.topbar{height:86px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #26323a}.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--text);font-weight:800;font-size:16px;letter-spacing:.12em}.brand strong{font-weight:500;color:var(--muted);font-size:13px}.brand-divider{color:#526066;padding:0 8px}.brand-mark{width:30px;height:30px;position:relative;display:grid;place-items:center;transform:rotate(-25deg)}.brand-mark span{position:absolute;width:22px;height:10px;border:2px solid var(--accent);border-radius:12px;transform:rotate(55deg)}.brand-mark span:nth-child(2){transform:rotate(-55deg)}.brand-mark span:nth-child(3){width:7px;height:7px;background:var(--accent);border:0}.topbar-right{display:flex;align-items:center;gap:15px;color:#a4b2b8;font:10px var(--mono);letter-spacing:.11em}.status-led{width:7px;height:7px;background:var(--accent);border-radius:50%;box-shadow:0 0 12px #d4f48480}.topbar-line{height:15px;width:1px;background:#37444a}
.intro{padding:70px 0 62px;display:grid;grid-template-columns:1.35fr .65fr;gap:60px;align-items:end}.eyebrow,.section-number,.panel-kicker{font:11px var(--mono);letter-spacing:.15em;color:var(--accent)}.eyebrow{display:flex;align-items:center;gap:13px;margin:0 0 24px}.eyebrow-line{width:29px;height:1px;background:var(--accent)}.eyebrow-index{color:#768b90}.intro h1{font-size:clamp(52px,5.6vw,94px);line-height:1.03;letter-spacing:-.072em;font-weight:600;margin:0}.intro h1 em,.inspector h2 em{font-family:Georgia,serif;font-weight:400;color:var(--accent);letter-spacing:-.06em}.lead{max-width:650px;color:#a7b7bd;font-size:clamp(14px,1.25vw,18px);line-height:1.75;margin:25px 0 0}.intro-aside{border-left:1px solid var(--line);padding:6px 0 2px 32px;max-width:420px}.simulation-badge,.live-pill{font:10px var(--mono);color:var(--accent);letter-spacing:.08em}.simulation-badge{display:flex;align-items:center;gap:9px}.badge-pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 15px var(--accent)}.intro-aside p{font-size:12px;line-height:1.7;color:#a1b0b6;margin:19px 0 23px}.aside-metrics{display:flex;justify-content:space-between;gap:10px}.aside-metrics div{display:flex;flex-direction:column;gap:5px}.aside-metrics strong{font-size:29px;font-weight:500;letter-spacing:-.07em}.aside-metrics span{color:#86989e;font:9px var(--mono);letter-spacing:.08em}
.workspace{border:1px solid #334249;background:#111b20;box-shadow:0 35px 90px #0004}.workspace-head{height:66px;padding:0 27px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:16px}.section-title{display:flex;align-items:center;gap:15px}.section-title h2{font-size:15px;font-weight:600;white-space:nowrap;margin:0}.section-number{white-space:nowrap}.live-pill{border:1px solid #3a5140;border-radius:3px;padding:7px 10px;display:flex;align-items:center;gap:8px;font-size:9px}.live-pill span{background:var(--accent);width:5px;height:5px;border-radius:50%}.legend{display:flex;gap:22px;font:10px var(--mono);color:#a9b8bc}.legend>span{display:flex;align-items:center;gap:7px;white-space:nowrap}.legend-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.legend-dot.outgoing{background:var(--accent)}.legend-dot.incoming{background:var(--amber)}.legend-line{display:inline-block;width:17px;border-top:1px dashed #7c9093}
.workspace-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;min-height:650px}.visual-column{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line)}.scene-toolbar{height:55px;padding:0 22px;display:flex;justify-content:space-between;align-items:center}.scene-caption,.transport-state{font:10px var(--mono);letter-spacing:.07em;color:#9cafb1}.scene-caption-separator{padding:0 7px;color:#475b61}.camera-tools{display:flex;gap:3px}.icon-button{width:29px;height:29px;border:1px solid #3b4b50;background:#1b292e;color:#d2ddda;font-size:17px;line-height:1}.icon-button:hover{background:#314148;color:var(--accent)}.reset-camera{font-size:21px}
.scene{position:relative;flex:1;min-height:550px;overflow:hidden;background:radial-gradient(ellipse at 48% 48%,#26382c 0%,#17272b 29%,#0c171d 74%,#0a151a 100%);cursor:grab;touch-action:pan-y}.scene.dragging{cursor:grabbing}.scene-wash{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 39px,#d4f48405 40px),repeating-linear-gradient(90deg,transparent 0 39px,#d4f48406 40px);mask-image:radial-gradient(ellipse,black 18%,transparent 80%);pointer-events:none}.world{position:absolute;width:1120px;height:720px;left:50%;top:50%;margin-left:-560px;margin-top:-360px;transform-style:preserve-3d;transform:scale(var(--fit,1)) rotateX(var(--rx,14deg)) rotateY(var(--ry,-12deg));will-change:transform;pointer-events:none}.world-grid{position:absolute;inset:32px 50px;background:linear-gradient(#8dc57c12 1px,transparent 1px),linear-gradient(90deg,#8dc57c12 1px,transparent 1px);background-size:46px 46px;border:1px solid #8dc57c12;transform:translateZ(-35px);mask-image:radial-gradient(ellipse,black 35%,transparent 75%)}.column-heading{position:absolute;top:48px;color:var(--accent);font:12px var(--mono);transform:translateZ(50px)}.column-heading span{color:#b5c6be;padding-left:7px;letter-spacing:.05em}.clients-heading{left:85px}.core-heading{left:474px}.backends-heading{left:811px}.connections{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:translateZ(0)}.route-line{fill:none;stroke-width:1.5;stroke-dasharray:3 6;opacity:.47;transition:opacity .25s,stroke-width .25s}.route-line.second{stroke-dasharray:5 8}.world.has-focus .route-line:not(.selected){opacity:.1}.route-line.selected{opacity:.92;stroke-width:2}.node-layer,.packet-layer{position:absolute;inset:0;transform-style:preserve-3d}.node{position:absolute;height:57px;width:190px;display:flex;align-items:center;gap:12px;background:#203036ee;border:1px solid #5370678c;box-shadow:0 14px 14px #0207077a,0 3px 0 #080e10;transform:translateZ(32px);transition:opacity .25s,border-color .25s,box-shadow .25s;pointer-events:auto;color:var(--text);text-align:left;padding:0 12px}.node:hover,.node.selected{border-color:var(--node-color);box-shadow:0 14px 20px #0207078c,0 0 22px color-mix(in srgb,var(--node-color) 20%,transparent)}.node .node-icon{width:33px;height:33px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--node-color) 60%,transparent);color:var(--node-color);background:color-mix(in srgb,var(--node-color) 12%,transparent);font-size:15px;font-weight:700;flex-shrink:0}.node-copy{display:flex;flex-direction:column;gap:3px;min-width:0}.node-copy strong{font-size:14px;font-weight:700;white-space:nowrap}.node-copy small{font:10px var(--mono);color:#9fb2b4;white-space:nowrap}.node.backend{width:185px;background:#26312fe9;border-color:#4d6b60}.node.backend .node-icon{border-radius:50%}.node.backend.selected{border-color:var(--node-color)}.world.has-focus .node:not(.selected):not(.gateway):not(.matched){opacity:.37}.node.gateway{left:474px;top:290px;width:173px;height:140px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:linear-gradient(140deg,#334a40,#1a322f);border:1px solid #c8ee85;box-shadow:0 28px 35px #000a,0 8px 0 #132322,0 0 70px #b6ee6144;transform:translateZ(100px)}.gateway-icon{width:52px;height:52px;border:1px solid var(--accent);border-radius:14px;display:grid;place-items:center;transform:rotate(45deg);margin-bottom:11px}.gateway-icon span{transform:rotate(-45deg);font-size:24px;color:var(--accent)}.gateway-label{font-weight:800;letter-spacing:.08em;font-size:15px}.gateway-small{font:9px var(--mono);color:#bbd29a;letter-spacing:.04em;margin-top:4px}.gateway-orbit{position:absolute;width:238px;height:238px;left:441px;top:241px;border:1px dashed #c6ee8a70;border-radius:50%;transform:translateZ(54px);box-shadow:0 0 50px #a8d96e15;pointer-events:none}.gateway-orbit:after{content:'';position:absolute;inset:18px;border:1px solid #afd97e2c;border-radius:50%}.packet{position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;background:var(--node-color);box-shadow:0 0 0 7px color-mix(in srgb,var(--node-color) 15%,transparent),0 0 22px var(--node-color);transform:translate3d(-100px,-100px,70px);pointer-events:none}.packet.returning{background:var(--amber);box-shadow:0 0 0 7px #e7aa712a,0 0 22px var(--amber)}.world.has-focus .packet:not(.selected){opacity:.18}.packet.paused{opacity:.5}.scene-corner{position:absolute;width:21px;height:21px;border-color:#a5bb91;opacity:.45;pointer-events:none}.top-left{left:17px;top:17px;border-left:1px solid;border-top:1px solid}.top-right{right:17px;top:17px;border-right:1px solid;border-top:1px solid}.bottom-left{left:17px;bottom:17px;border-left:1px solid;border-bottom:1px solid}.bottom-right{right:17px;bottom:17px;border-right:1px solid;border-bottom:1px solid}
.transport{height:70px;padding:0 24px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);gap:12px}.transport-actions{display:flex;align-items:center;gap:8px}.primary-button,.secondary-button{height:38px;border-radius:2px;font-size:11px;font-weight:700;white-space:nowrap}.primary-button{background:var(--accent);color:#182419;border:1px solid var(--accent);min-width:104px}.primary-button:hover{background:#ebffbb}.primary-button span:first-child{padding-right:6px}.secondary-button{background:transparent;border:1px solid #3c4c51;color:#c0cfca;padding:0 13px}.secondary-button:hover{border-color:var(--accent);color:var(--accent)}.transport-state{display:flex;align-items:center;gap:9px;white-space:nowrap}.transport-indicator{width:6px;height:6px;background:#81948f;border-radius:50%}.transport-indicator.running{background:var(--accent);box-shadow:0 0 10px var(--accent)}.transport-separator{color:#53666a}
.inspector{display:flex;flex-direction:column;background:#121e24}.inspector-top{padding:31px 25px 18px;border-bottom:1px solid var(--line)}.panel-kicker{font-size:9px}.panel-kicker span{color:#7e9296}.inspector h2{font-size:34px;line-height:1.05;letter-spacing:-.065em;font-weight:600;margin:23px 0 14px}.inspector h2 em{font-size:37px}.inspector-top p{font-size:12px;color:#9eb0b4;line-height:1.65;max-width:270px;margin:0}.filters{padding:20px 22px 18px;border-bottom:1px solid var(--line)}.filters-label{display:flex;justify-content:space-between;font:10px var(--mono);color:#d5e3df;letter-spacing:.04em;margin-bottom:13px}.filters-label span{color:#799198}.filter-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.filter{height:36px;border:1px solid #34474e;background:#1c2b30;color:#acbec0;text-align:left;font:10px var(--mono);padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filter:hover{border-color:#7d988f;color:white}.filter[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:#263b30}.filter.all{grid-column:span 2;text-align:center}.route-details{padding:21px 24px 28px;min-height:275px}.route-placeholder{color:#819a9b;font-size:12px;line-height:1.7}.detail-kicker{font:10px var(--mono);color:var(--accent);letter-spacing:.1em}.detail-title{font-size:17px;margin:11px 0 8px}.detail-desc{font-size:11px;line-height:1.55;color:#a8b9b9;margin:0 0 19px}.detail-row{border-top:1px solid #314249;padding:10px 0;display:flex;flex-direction:column;gap:5px}.detail-row span{font:9px var(--mono);color:#8ca2a5;letter-spacing:.06em}.detail-row code{font:10px var(--mono);color:#d5e3df;overflow-wrap:anywhere;line-height:1.4}.detail-status{font:10px var(--mono);color:var(--accent);padding-top:12px}.detail-note{font-size:10px;color:#84999b;line-height:1.6;margin:13px 0 0}
.explainer{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:28px;padding:76px 0 85px}.explainer h2{font-size:clamp(28px,3vw,42px);line-height:1.15;letter-spacing:-.055em;font-weight:600;margin:16px 0 0;max-width:320px}.step{border-top:1px solid #485753;padding-top:18px;display:flex;gap:13px}.step>span{font:11px var(--mono);color:var(--accent);margin-top:3px}.step h3{font-size:13px;margin:0 0 10px}.step p{font-size:12px;color:#9baeb1;line-height:1.7;margin:0}footer{border-top:1px solid var(--line);padding:26px 0 33px;display:flex;justify-content:space-between;gap:15px;font:9px var(--mono);letter-spacing:.05em;color:#7f969b}
@media(max-width:1180px){.workspace-body{grid-template-columns:minmax(0,1fr) 285px}.intro{gap:30px}.legend{gap:11px}.transport-state{font-size:9px}.explainer{grid-template-columns:repeat(3,1fr)}.explainer>div:first-child{grid-column:1/-1}}@media(max-width:850px){.intro{grid-template-columns:1fr;padding:50px 0}.intro-aside{max-width:none}.workspace-body{display:flex;flex-direction:column}.visual-column{border-right:0}.scene{height:510px;flex:auto}.inspector{border-top:1px solid var(--line)}.filter-list{grid-template-columns:repeat(4,minmax(0,1fr))}.filter.all{grid-column:span 4}.route-details{min-height:0}.explainer{padding:60px 0}}@media(max-width:620px){.topbar{height:70px}.topbar-right{display:none}.intro{padding:42px 0}.intro h1{font-size:clamp(49px,12vw,70px)}.workspace-head{height:auto;min-height:68px;padding:14px;align-items:flex-start;flex-direction:column}.section-title{flex-wrap:wrap;gap:8px}.section-title h2{font-size:13px}.legend{font-size:9px}.scene-toolbar{padding:0 12px}.scene-caption{font-size:9px}.scene{height:390px;min-height:390px}.transport{height:auto;min-height:68px;padding:10px;flex-wrap:wrap}.secondary-button{padding:0 7px}.transport-state{font-size:9px}.filter-list{grid-template-columns:repeat(2,minmax(0,1fr))}.filter.all{grid-column:span 2}.explainer{display:block}.explainer>div:first-child{margin-bottom:28px}.step{margin-bottom:25px}footer{flex-direction:column;gap:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}