.cx-network-entry { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-top: 26px; padding: 32px; border: 1px solid #cbdfe8; border-radius: 14px; color: #09233e; background: linear-gradient(120deg,#edf9fb,#f1f5fd); }
.cx-network-entry > span:first-child { display: grid; gap: 10px; }.cx-network-entry strong { font-size: clamp(22px,3vw,30px); letter-spacing: -.035em; }.cx-network-entry .cx-kicker { margin: 0; }.cx-network-entry > span:last-child { font-size: 36px; }.cx-network-entry:hover { border-color: #247b97; }
.cx-cloud-models { padding-top: 75px; }.cx-cloud-card { margin: 0 0 25px; padding: 28px; border: 1px solid #2d4f68; border-radius: 16px; background: #0b2238; color: #d7eaf4; }.cx-cloud-card figcaption { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; }.cx-cloud-number { color: #86e0dd; font: 22px monospace; }.cx-cloud-card h3 { margin: 0 0 7px; color: #f4fbff; font-size: 26px; font-weight: 550; letter-spacing: -.025em; }.cx-cloud-card figcaption p { margin: 0; font-size: 13px; color: #a7c3d6; }.cx-cloud-tag { margin-left: auto; color: #7fb7ca; font: 9px monospace; letter-spacing: .1em; }.cx-cloud-scroll { overflow: auto; border-block: 1px solid #2b485e; }.cx-cloud-diagram { display: block; width: 100%; min-width: 650px; }.cx-cloud-boundary { fill: #153b511c; stroke: #3e7387; stroke-dasharray: 5 5; }.cx-cloud-boundary-private { fill: #1f4e4326; stroke: #5c9385; }.cx-cloud-zone { fill: #a4c9db; font: 9px system-ui,sans-serif; letter-spacing: .5px; }.cx-cloud-request { stroke: #80dbe8; stroke-width: 2; }.cx-cloud-return { stroke: #a4e4ae; stroke-width: 2; }.cx-cloud-diagram marker path { fill: #a0d9df; }.cx-cloud-node { cursor: pointer; }.cx-cloud-node rect { fill: #142f46; stroke: #527790; }.cx-cloud-node circle { fill: #8be0dc; }.cx-cloud-node text { fill: #eff9ff; font: 12px system-ui,sans-serif; }.cx-cloud-node text.cx-cloud-node-type { fill: #abc5d7; font-size: 9px; }.cx-cloud-node.is-selected rect,.cx-cloud-node:focus-visible rect { stroke: #a4eceb; stroke-width: 2.5; }.cx-cloud-description { margin: 20px 0 12px; color: #c1d6e4; font-size: 14px; line-height: 1.85; }.cx-cloud-benefit { font: 11px monospace; color: #99e1d1; }.cx-cloud-detail { min-height: 62px; margin-top: 20px; padding: 16px; background: #07192b; border: 1px solid #294c63; border-radius: 8px; color: #b4d4e4; font-size: 13px; line-height: 1.7; }.cx-cloud-sources { margin-block: 30px; font-size: 12px; line-height: 2; color: #42627c; }.cx-cloud-sources a { color: #185683; text-decoration: underline; }
.nl { --nl-accent: #9ce8e2; --nl-text: #b7cfdf; padding: 30px; color: #e9f5fc; background: radial-gradient(ellipse at 85% 0,#153b52 0,transparent 55%),#071b2e; border: 1px solid #2c4d64; border-radius: 18px; font-size: 13px; line-height: 1.7; }.nl [hidden] { display: none !important; }.nl[data-mode='beginner'] .nl-technical { display: none; }.nl *, .nl *::before, .nl *::after { box-sizing: border-box; }.nl h2,.nl h3,.nl h4 { color: #ecf7ff; }.nl h2 { margin: 0; font-size: clamp(26px,3.1vw,39px); font-weight: 550; line-height: 1.2; letter-spacing: -.035em; }.nl h3 { margin: 0 0 12px; font-size: 21px; font-weight: 550; line-height: 1.3; letter-spacing: -.02em; }.nl h4 { font-size: 13px; font-weight: 550; }.nl p { color: var(--nl-text); }.nl-topline { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 22px; border-bottom: 1px solid #305069; color: #9dbaca; font-size: 10px; }.nl-badge { display: inline-flex; align-items: center; gap: 9px; color: #a5e3dd; font: 9px monospace; letter-spacing: .08em; }.nl-badge > span { width: 6px; height: 6px; background: #9ce8e2; border-radius: 50%; }.nl label { display: grid; gap: 6px; color: #b6d1e0; font-size: 11px; }.nl select { max-width: 100%; min-height: 43px; padding: 9px 30px 9px 12px; color: #e9f8ff; background: #122d43; border: 1px solid #42647c; border-radius: 7px; font: inherit; font-size: 12px; color-scheme: dark; }.nl button { min-height: 43px; padding: 9px 14px; color: #daeff7; background: #17374e; border: 1px solid #436982; border-radius: 7px; cursor: pointer; font: inherit; font-size: 12px; line-height: 1.5; }.nl button:hover:not(:disabled) { border-color: #a8e9e4; background: #20465b; }.nl button:disabled { opacity: .4; cursor: not-allowed; }.nl button.nl-primary,.nl [data-nl-play] { background: #a0e7df; border-color: #a0e7df; color: #08273a; font-weight: 650; }.nl button.nl-primary:hover,.nl [data-nl-play]:hover { background: #c9f7f0; color: #08273a; }.nl :focus-visible,.cx-cloud-models :focus-visible,.cx-network-entry:focus-visible { outline: 3px solid #e8bf70; outline-offset: 4px; }.nl-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding-top: 22px; }.nl-toolbar label { min-width: 160px; }.nl-toolbar button:first-of-type { margin-left: auto; }.nl-mode-note { font-size: 11px; margin-block: 14px 22px; }.nl-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; padding: 5px; background: #031424; border: 1px solid #244359; border-radius: 10px; }.nl-tabs button { text-align: left; background: transparent; border-color: transparent; color: #a6c0d2; padding: 14px 12px; font-size: 12px; }.nl-tabs button[aria-selected='true'] { color: #d9ffff; background: #1b3e51; border-color: #477e8c; }.nl-playback { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; }.nl-playback > div { display: flex; flex-wrap: wrap; gap: 6px; }.nl-playback > span { color: #a2c4d5; font-size: 10px; }.nl-notice { padding: 12px 15px; border-left: 2px solid #629fbb; background: #13314766; font-size: 11px; }.nl-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; margin-block: 35px 24px; align-items: end; }.nl-heading > p { margin: 0; line-height: 1.85; font-size: 13px; }.nl .nl-eyebrow { margin: 0 0 12px; font: 9px monospace; letter-spacing: .12em; color: #8bd9da; }.nl-device-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 22px; }.nl-device { min-width: 0; padding: 15px; border: 1px solid #385a73; border-radius: 9px; background: #112c42; }.nl-device label { display: flex; gap: 8px; font-size: 12px; align-items: center; color: #e1f2ff; }.nl-device input { accent-color: #a0e7df; width: 17px; height: 17px; }.nl-device code { display: block; margin: 8px 0 12px; color: #a5c7da; font-size: 11px; }.nl-device button { width: 100%; background: #0a2135; }.nl-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-block: 20px; }.nl-controls > label { flex: 1 1 170px; }.nl-workspace { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(260px,1fr); align-items: start; gap: 18px; }.nl-workspace > * { min-width: 0; }.nl-canvas-panel { border: 1px solid #2b4d66; border-radius: 12px; overflow: hidden; background: radial-gradient(ellipse at 45% 45%,#16344b66,transparent 75%),#07182a; }.nl-canvas-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-bottom: 1px solid #2b475b; color: #8fb5ca; font: 9px monospace; }.nl-canvas-toolbar > div { display: flex; gap: 5px; }.nl-canvas-toolbar button { min-width: 35px; min-height: 34px; padding: 4px 10px; }.nl-map { display: block; width: 100%; height: auto; min-height: 300px; touch-action: pan-y; }.nl-map.is-dragging { cursor: grabbing; touch-action: none; }.nl-map text { user-select: none; }.nl-map-zone { fill: #153b4b22; stroke: #3a6980; stroke-dasharray: 6 5; }.nl-map-zone-label { fill: #8db6cc; font: 11px system-ui,sans-serif; letter-spacing: 1px; }.nl-map-node { cursor: pointer; }.nl-map-node rect { fill: #163247; stroke: #52778c; stroke-width: 1.3; }.nl-map-node text { fill: #e8f8ff; font: 13px system-ui,sans-serif; }.nl-map-node .nl-map-node-subtitle { fill: #a2c4d7; font-size: 10px; }.nl-map-node.is-active rect,.nl-map-node:focus-visible rect { stroke: #9ce8e2; stroke-width: 3; }.nl-map-node.is-failed rect { stroke: #f29c99; fill: #482d3e; }.nl-map-edge { stroke: #39617a; stroke-width: 2; fill: none; }.nl-map-edge.is-active { stroke: #8fe0e6; stroke-width: 3; }.nl-map-packet { fill: #8de6e9; cursor: pointer; }.nl-map-packet[data-kind='response'] { fill: #a2e7b0; }.nl-map-packet[data-kind='dns'] { fill: #c7b2ff; }.nl-map-packet[data-kind='blocked'] { fill: #fb9d9c; }.nl-packet-arrow { fill: #062238; font: bold 13px monospace; text-anchor: middle; }.nl-canvas-help { margin: 5px 12px 10px; font-size: 9px; text-align: center; }.nl-legend { display: flex; flex-wrap: wrap; gap: 8px 17px; justify-content: center; padding: 10px; border-top: 1px solid #244358; color: #91c0d5; font-size: 9px; }.nl-legend span:nth-child(2) { color: #a2e7b0; }.nl-legend span:nth-child(3) { color: #fb9d9c; }.nl-legend span:nth-child(4) { color: #c7b2ff; }.nl-inspector { padding: 22px; border: 1px solid #3a5b73; border-radius: 12px; background: #102b40; }.nl-inspector > p { font-size: 12px; line-height: 1.9; }.nl-business { margin-top: 22px; padding-top: 15px; border-top: 1px solid #3b566d; }.nl-business > span { font: 9px monospace; color: #a3dfc9; }.nl-business p { margin: 7px 0; font-size: 12px; color: #bddbd9; }.nl progress { width: 100%; height: 5px; margin-top: 20px; accent-color: #8dded9; border: none; }.nl-timeline { max-height: 145px; overflow: auto; padding-left: 25px; scrollbar-width: thin; font-size: 10px; color: #95b7cc; }.nl-timeline li { padding: 4px 0; }.nl-timeline li[aria-current] { color: #cefff5; }.nl-table-heading { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: end; gap: 18px; margin-top: 32px; }.nl-table-heading h3 { margin-bottom: 6px; }.nl-table-heading p { margin: 0; max-width: 650px; font-size: 11px; }.nl-table-scroll { overflow: auto; margin-top: 16px; border: 1px solid #35566d; border-radius: 10px; }.nl-table { width: 100%; min-width: 700px; text-align: left; border-collapse: collapse; font-size: 11px; }.nl-table th { padding: 14px; color: #a2cbd8; background: #18364c; font-weight: 500; font-size: 10px; }.nl-table td { padding: 13px 14px; color: #c1d7e5; border-top: 1px solid #2b485d; font-family: monospace; }.nl-table tr.is-matched td { color: #b7fff1; background: #16464766; }.nl-result { padding: 15px; margin: 16px 0; border: 1px solid #355a6c; border-radius: 8px; background: #091f32; font-size: 12px; overflow-wrap: anywhere; }.nl-result.is-blocked { border-color: #9d6065; color: #ffc1bd; }.nl-reference { margin-block: 22px; padding: 18px; border: 1px solid #36556b; border-radius: 9px; color: #a9ccdb; font-size: 12px; }.nl summary { cursor: pointer; color: #d5eafa; }.nl-reference p { line-height: 1.9; }.nl-note { font-size: 10px !important; color: #a3bcd0; }.nl-packet-fields { display: grid; grid-template-columns: minmax(90px,.6fr) minmax(0,1.4fr); gap: 0 14px; font-size: 11px; }.nl-packet-fields dt { padding-block: 9px; color: #a6c3d6; border-bottom: 1px solid #315065; }.nl-packet-fields dd { min-width: 0; padding-block: 9px; margin: 0; color: #e1f3fa; border-bottom: 1px solid #315065; overflow-wrap: anywhere; }.nl-layer-stack { list-style: none; padding: 0; counter-reset: layer; }.nl-layer-stack li { margin-block: 5px; padding: 10px; border-left: 2px solid #80cfcf; background: #0b2337; font-size: 12px; }.nl-layer-stack span { display: block; color: #89afc7; font-size: 10px; }.nl-code { max-height: 430px; overflow: auto; margin: 14px 0; padding: 18px; color: #baebdf; background: #041423; border: 1px solid #2b4b61; border-radius: 9px; font: 11px/1.9 ui-monospace,monospace; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }.nl-http-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 20px; color: #9fe6d3; font: 11px monospace; }.nl-http-summary span { padding: 7px 10px; background: #153b47; border-radius: 5px; }.nl-supports { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }.nl-supports button { padding: 8px 12px; font-size: 10px; }.nl-hop-chain { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }.nl-hop-chain span { display: flex; align-items: center; gap: 8px; font-size: 11px; }.nl-hop-chain span:not(:last-child)::after { content: '→'; color: #92e0df; }.nl-security-result { padding: 22px; background: #153b47; border: 1px solid #588675; border-radius: 10px; color: #c2edda; }.nl-security-result.is-blocked { background: #3e2937; border-color: #87555f; color: #f2c0c2; }.nl-security-result strong { display: block; margin-bottom: 8px; font-size: 16px; }.nl-defenses { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }.nl-defenses span { padding: 5px 10px; border: 1px solid #3e6075; border-radius: 5px; color: #9bbfd3; font-size: 10px; }.nl-pipeline { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; list-style: none; padding: 0; counter-reset: pipeline; margin-block: 25px; }.nl-pipeline li { counter-increment: pipeline; padding: 12px; border: 1px solid #32546a; border-radius: 7px; background: #10293d; color: #92b4c9; font-size: 10px; }.nl-pipeline li::before { content: counter(pipeline,decimal-leading-zero) ' / '; color: #59869e; }.nl-pipeline li.is-complete { color: #a8e6d3; border-color: #3d716b; }.nl-pipeline li[aria-current] { color: #ddfff4; background: #1a4b4c; border-color: #9ce8e2; }.nl-pipeline li.is-failed { background: #402c3d; border-color: #a05c65; color: #f2b0b4; }.nl-replicas { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 18px; }.nl-replicas > span { display: grid; min-width: 100px; padding: 14px; border: 1px solid #5a8f83; border-radius: 8px; color: #b2ead9; background: #173e40; font-size: 11px; }.nl-replicas .is-candidate { border-style: dashed; color: #a9c6e1; background: #163349; }.nl-replicas .is-down { color: #ffbab6; border-color: #a86269; background: #422c3b; }.nl-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-block: 22px; }.nl-metric { padding: 18px; border: 1px solid #35596c; border-radius: 10px; background: #102d41; }.nl-metric span { display: block; font-size: 10px; color: #94bacd; }.nl-metric strong { display: block; margin-top: 5px; color: #b5e9e2; font: 23px ui-monospace,monospace; }.nl-metric.is-alert { border-color: #9e6870; }.nl-metric.is-alert strong { color: #f2b8b9; }.nl-footer-note { padding-top: 25px; margin-top: 35px; border-top: 1px solid #345269; }.nl-footer-note p { font-size: 10px; }.nl-cta { padding: 70px 20px 40px; text-align: center; }.nl-cta h2 { font-size: clamp(26px,3.7vw,43px); line-height: 1.2; letter-spacing: -.035em; }.nl-cta p:not(.cx-kicker) { color: #5a6e83; margin-block: 22px; }.nl.is-presentation { position: fixed; inset: 0; z-index: 150; overflow: auto; border-radius: 0; padding: clamp(18px,3vw,48px); }.nl.is-presentation .nl-toolbar { position: sticky; top: -1px; z-index: 2; padding-block: 12px; background: #0c2437; }.nl-presentation-open { overflow: hidden; }
@media (max-width: 1050px) { .nl-workspace { grid-template-columns: 1fr; }.nl-device-list { grid-template-columns: repeat(2,minmax(0,1fr)); }.nl-map { max-height: 510px; }.nl-heading { gap: 22px; }.nl-tabs button { font-size: 11px; padding: 11px 8px; } }
@media (max-width: 680px) { .nl { padding: 20px 15px; border-radius: 12px; }.nl-topline { font-size: 9px; }.nl-heading { grid-template-columns: 1fr; gap: 18px; }.nl-toolbar label { min-width: 0; flex: 1 1 140px; }.nl-toolbar button:first-of-type { margin-left: 0; }.nl-tabs { grid-template-columns: 1fr 1fr; }.nl-tabs button { padding: 12px 9px; }.nl-controls > button { flex: 1 1 170px; }.nl-playback > div { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }.nl select { font-size: 16px; }.nl-pipeline { grid-template-columns: 1fr 1fr; }.nl-metrics { grid-template-columns: 1fr 1fr; }.nl-map { min-height: 240px; }.nl-inspector { padding: 18px; }.nl-code { font-size: 11px; }.cx-network-entry { padding: 24px 20px; }.cx-cloud-models { padding-top: 48px; }.cx-cloud-card { padding: 20px 16px; }.cx-cloud-card figcaption { flex-wrap: wrap; gap: 12px; }.cx-cloud-tag { margin-left: 0; width: 100%; }.cx-cloud-description { font-size: 12px; }.cx-cloud-benefit { line-height: 1.7; }.nl-device { padding: 12px; }.nl-device label { font-size: 11px; }.nl-metric { padding: 14px; }.nl-metric strong { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { .nl *, .cx-cloud-models * { animation: none !important; transition: none !important; scroll-behavior: auto; } }
.cx-sim-node[role='button'] { cursor: pointer; }.cx-sim-node.is-selected rect,.cx-sim-node:focus-visible rect { stroke: #e8bf70; stroke-width: 2.5; }.nl-canvas-panel { overflow: auto; }.nl-map { min-width: 650px; }
.nl select { width: 100%; min-width: 0; }.nl-toolbar > label { min-width: 0; }
.nl-map-edge.is-blocked { stroke: #f19b9b; stroke-dasharray: 5 6; }
.nl [data-nl-panel='network'] .nl-workspace { grid-template-columns: minmax(0,1fr); }
.nl [data-nl-network-map] { min-width: 1080px; max-height: none; touch-action: auto; }
.nl-service-icon { color: #99e5df; }
.nl-service-icon path { fill: none; stroke: currentColor; stroke-width: 1.6; }
.nl-network-explanation { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 28px; }
.nl-network-explanation > div { min-width: 0; }
.nl-network-explanation p { font-size: 12px; line-height: 1.9; }
.nl-data-flow { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; padding: 0; margin: 22px 0; list-style: none; }
.nl-data-flow li { padding: 12px; border: 1px solid #365b72; border-radius: 7px; background: #102c40; color: #b2d2e2; font-size: 11px; }
.nl-data-flow li[aria-current] { color: #cefff3; border-color: #98e0d7; background: #1a464a; }
@media (max-width: 680px) { .nl-network-explanation { grid-template-columns: 1fr; gap: 12px; }.nl-data-flow { grid-template-columns: 1fr 1fr; } }