:root { color-scheme:dark; --black:#080b10; --white:#edf1f6; --silver:#bac5d1; --muted:#8995a5; --hairline:#9bb0c124; }
* { box-sizing:border-box; }
html { scroll-behavior:auto; background:var(--black); }
body { margin:0; font-family:Arial,Helvetica,sans-serif; background:var(--black); color:var(--white); -webkit-font-smoothing:antialiased; }
button,input,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button,input { font:inherit; }
button { cursor:pointer; color:inherit; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid #d1dfea; outline-offset:5px; }
a { color:inherit; text-decoration:none; }
p,h1,figure,dl,dd { margin:0; }
[hidden] { display:none!important; }
.skip-link { position:fixed; left:20px; top:-90px; z-index:100; background:#e6edf4; color:#12171e; padding:14px 20px; }
.skip-link:focus { top:16px; }
.site-header { position:fixed; top:0; left:0; right:0; height:88px; z-index:20; display:flex; justify-content:space-between; align-items:center; gap:25px; padding-inline:4.5vw; border-bottom:1px solid var(--hairline); background:#080b10f5; transition:opacity .25s; }
.has-welcome:not(.past-welcome) .site-header { opacity:0; visibility:hidden; pointer-events:none; }
.wordmark { position:relative; display:block; width:188px; height:44px; flex-shrink:0; }
.brand-name { position:absolute; top:50%; left:0; width:100%; aspect-ratio:1580/145; overflow:hidden; transform:translateY(-50%); mix-blend-mode:screen; }
.brand-name img { position:absolute; width:129.620253%; max-width:none; height:auto; left:-15.189873%; top:-168.965517%; }
.brand-promise { font-size:9px; letter-spacing:2.2px; text-transform:uppercase; color:#9ca7b6; }
.header-link { display:flex; gap:25px; align-items:center; color:#c7d0dc; font-size:12px; min-height:44px; border-bottom:1px solid #a8b4c350; }
.header-link span:last-child { font-size:19px; }
.network-story { position:relative; }
.network-stage { min-height:100svh; padding:112px 4.5vw 24px; background:radial-gradient(ellipse at 35% 52%,#141e2b 0,#0c111a 38%,#080b10 75%); }
.network-ready { height:250svh; }
.network-ready .network-stage { position:sticky; top:0; height:100svh; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:22px; }
.network-heading { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(270px,.85fr); gap:4vw; align-items:end; }
.eyebrow { display:flex; align-items:center; gap:12px; text-transform:uppercase; letter-spacing:1.8px; font-size:10px; color:#a5b5c8; margin-bottom:13px; line-height:1.5; }
.eyebrow::before { content:''; width:24px; height:1px; background:#a5b5c8; flex:none; }
h1 { font-weight:400; font-size:clamp(34px,3.35vw,62px); line-height:1.1; letter-spacing:-1.8px; color:#edf1f6; text-wrap:balance; background:linear-gradient(145deg,#fff 10%,#d0d9e6 65%,#9ba9bc); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.network-copy { color:#9cabbc; font-size:clamp(13px,1.05vw,16px); line-height:1.65; max-width:490px; padding-bottom:3px; }
.network-visual { position:relative; min-width:0; min-height:0; height:100%; display:grid; grid-template-columns:minmax(0,1.55fr) minmax(270px,.85fr); grid-template-rows:minmax(0,1fr) 30px; gap:0 4vw; isolation:isolate; }
.network-plot { position:relative; grid-column:1; grid-row:1; width:100%; height:100%; min-height:0; }
.network-plane { position:absolute; left:50%; top:50%; width:100%; aspect-ratio:880/540; transform:translate(-50%,-50%); }
.network-svg { display:block; width:100%; height:100%; overflow:visible; }
.network-canvas { position:absolute; inset:0; display:block; width:100%; height:100%; visibility:hidden; pointer-events:none; }
.has-canvas .network-canvas { visibility:visible; }
.has-canvas .network-svg { visibility:hidden; }
.network-threads { position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
.network-labels { position:absolute; inset:0; z-index:2; }
.network-area { position:absolute; left:var(--node-x); top:var(--node-y); transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:9px; white-space:nowrap; opacity:var(--node-opacity,1); min-height:38px; padding:8px 12px; border:1px solid #9cb3ca36; border-radius:3px; background:#0b111bf2; color:#c6d2e1; font-size:12px; line-height:1.2; box-shadow:0 0 18px #07101b40; transition:background .18s,border-color .18s; }
.network-area small { font-size:8px; color:#73869c; }
.network-area .area-short { display:none; }
.network-area:hover { background:#19283b; border-color:#c1d1e382; color:#fff; }
.network-area[aria-pressed="true"] { background:#d1dce8; color:#152232; border-color:#d1dce8; opacity:1; z-index:3; }
.network-area[aria-pressed="true"] small { color:#516578; }
.short-labels .area-long { display:none; }
.short-labels .area-short { display:inline; }
.short-labels .network-area { font-size:11px; min-height:34px; padding:7px 9px; gap:6px; }
.short-labels .network-area small { display:none; }
.network-motion { position:absolute; top:0; right:0; z-index:4; color:#94a8bf; background:#0b111a; border:0; font-size:10px; padding:7px 8px; min-height:30px; }
.network-motion::before { content:'Ⅱ'; margin-right:7px; }
.network-motion[aria-pressed="true"]::before { content:'▷'; }
.network-scanner { position:absolute; left:0; top:0; z-index:4; display:flex; align-items:center; gap:10px; padding:8px 12px; border-left:1px solid #bedfe1; background:#101a24ec; opacity:0; visibility:hidden; transition:opacity .2s; }
.network-scanner b { display:block; font-size:10px; font-weight:400; letter-spacing:1.8px; text-transform:uppercase; color:#d2edf0; }
.network-scanner small { display:block; color:#93aebc; font-size:10px; margin-top:4px; }
.scanner-light { width:5px; height:5px; background:#c4e5df; border-radius:50%; box-shadow:0 0 10px #b0e6df80; }
.is-scanning .network-scanner { opacity:1; visibility:visible; }
.network-rollout { grid-column:2; grid-row:1 / 3; align-self:center; min-width:0; position:relative; z-index:2; }
.rollout-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:15px; }
.rollout-heading p>span { display:block; color:#e1eaf5; font-size:15px; }
.rollout-heading small { display:block; color:#91a3b9; font-size:11px; line-height:1.4; margin-top:6px; }
.network-overview { flex:none; border:1px solid #b6c5d435; padding:8px 10px; background:#0b121c; color:#c4cfdc; font-size:11px; min-height:36px; }
.network-overview:hover { background:#19283b; }
.network-perspectives { display:flex; flex-direction:column; }
.rollout-row { position:relative; padding:12px 0 12px 17px; border-top:1px solid #a1b7c12b; }
.rollout-port { position:absolute; top:50%; left:0; width:5px; height:5px; border-radius:50%; background:var(--perspective-color); transform:translate(-50%,-50%); box-shadow:0 0 10px #bad5de22; }
.rollout-row dt { font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:var(--perspective-color); line-height:1.4; margin-bottom:5px; }
.rollout-row dd { color:#d6e0ed; font-size:clamp(15px,1.2vw,20px); line-height:1.4; text-wrap:pretty; }
.network-caption { grid-column:1; grid-row:2; display:flex; align-items:center; justify-content:center; gap:18px; }
.network-note { color:#899eb6; text-align:center; font-size:10px; line-height:1.4; }
.network-legend { display:flex; justify-content:center; gap:14px; color:#91a6bd; font-size:9px; }
.network-legend span { display:flex; align-items:center; gap:6px; }
.network-legend i { display:inline-block; width:4px; height:4px; background:#b7c9dc; }
.symbol-task { border-radius:50%; }
.network-legend .symbol-decision { transform:rotate(45deg); background:transparent; border:1px solid #b7c9dc; }
.network-transport { border-top:1px solid #8b9fb426; padding-top:10px; display:grid; grid-template-columns:250px minmax(0,1fr); gap:35px; align-items:center; }
.network-guide { font-size:12px; display:flex; align-items:center; gap:18px; color:#b5c2d2; line-height:1.6; }
.network-guide>b { font-size:25px; font-weight:400; line-height:1; color:#ccd7e3; }
.network-guide small { display:block; color:#8da0b7; font-size:10px; font-weight:400; }
.network-timeline { min-width:0; }
.network-progress { --network-progress:0%; width:100%; height:23px; display:block; margin:0; appearance:none; -webkit-appearance:none; background:transparent; cursor:ew-resize; }
.network-progress::-webkit-slider-runnable-track { height:1px; background:linear-gradient(to right,#c1cedd 0 var(--network-progress),#28374a var(--network-progress) 100%); }
.network-progress::-moz-range-track { height:1px; background:#28374a; }
.network-progress::-moz-range-progress { height:1px; background:#c1cedd; }
.network-progress::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:11px; height:11px; border-radius:50%; background:#d1deeb; border:2px solid #121d2c; box-shadow:0 0 0 1px #9dafc3; margin-top:-5px; }
.network-progress::-moz-range-thumb { width:8px; height:8px; border-radius:50%; background:#d1deeb; border:2px solid #121d2c; box-shadow:0 0 0 1px #9dafc3; }
.network-phases { display:flex; justify-content:space-between; gap:20px; }
.network-phases button { background:transparent; border:0; color:#8da0b9; min-height:34px; padding:4px 0; font-size:12px; font-weight:400; }
.network-phases button span { font-size:9px; margin-right:14px; color:#768eac; }
.network-phases button[aria-pressed="true"] { color:#e1e8f1; }
.network-phases button[aria-pressed="true"] span { color:#b8cddd; }
.network-meta { display:flex; justify-content:space-between; align-items:center; gap:20px; color:#8395ae; font-size:9px; line-height:1.5; margin-top:6px; }
.network-meta span:last-child { color:#a3b6cd; font-size:10px; }
.network-timeline,.network-motion { visibility:hidden; }
.network-ready .network-timeline,.network-ready .network-motion { visibility:visible; }
.network-static .network-motion { display:none; }
.network-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; clip:rect(0,0,0,0); overflow:hidden; white-space:nowrap; border:0; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:29px 4.5vw; border-top:1px solid #8b9fb426; color:#91a1b7; font-size:11px; line-height:1.6; }
.site-footer strong { color:#c5cfdd; font-weight:400; letter-spacing:1px; margin-right:20px; }
.site-footer a { color:#b2c0d1; }
.network-noscript { padding:25px 0; color:#c0cada; font-size:14px; }
@media(min-width:1800px) { .network-stage { padding-inline:5.5vw; } .network-area { font-size:14px; padding:10px 16px; } .rollout-row { padding-block:16px; } .rollout-row dt { font-size:11px; } }
@media(max-height:780px) and (min-width:761px) {
 .site-header { height:72px; } .network-stage { padding-top:89px; padding-bottom:14px; }
 .network-ready .network-stage { gap:14px; }
 h1 { font-size:clamp(32px,3vw,46px); letter-spacing:-1.2px; }
 .eyebrow { margin-bottom:8px; font-size:9px; }
 .network-copy { font-size:13px; line-height:1.55; }
 .rollout-heading { padding-bottom:9px; } .rollout-heading small { margin-top:4px; }
 .rollout-row { padding-block:8px; } .rollout-row dt { margin-bottom:3px; } .rollout-row dd { font-size:15px; line-height:1.35; }
 .network-legend { display:none; } .network-transport { padding-top:6px; }
}
@media(max-width:1100px) and (min-width:761px) {
 .network-stage,.site-header { padding-inline:28px; }
 .network-heading,.network-visual { grid-template-columns:minmax(0,1.35fr) minmax(270px,1fr); gap:0 24px; }
 .brand-promise { font-size:8px; letter-spacing:1.1px; }
 .network-transport { grid-template-columns:215px 1fr; gap:22px; }
 .network-guide { font-size:11px; gap:12px; }
 .network-guide small { font-size:9px; }
 .network-phases button span { margin-right:6px; }
 .network-scanner small { display:none; }
}
/* A short screen uses natural page scrolling instead of squeezing the figure and its text. */
@media(max-height:620px) and (min-width:761px) {
 .network-ready { height:auto; }
 .network-ready .network-stage { position:relative; height:auto; min-height:650px; grid-template-rows:auto minmax(390px,1fr) auto; gap:20px; }
 .network-plot { position:sticky; top:78px; height:clamp(210px,calc(100svh - 100px),330px); align-self:start; }
}
/* On a phone the text unfolds downwards; the model stays above the lines while they pass. */
@media(max-width:760px) {
 .site-header { height:64px; padding-inline:20px; }
 .wordmark { width:145px; height:35px; } .brand-promise { display:none; }
 .header-link { font-size:10px; gap:14px; min-height:36px; }
 .network-ready { height:auto; }
 .network-stage,.network-ready .network-stage { position:relative; height:auto; min-height:100svh; padding:84px 20px 20px; display:grid; grid-template-rows:auto auto auto; gap:22px; }
 .network-heading { display:block; }
 .eyebrow { font-size:9px; margin-bottom:10px; }
 h1 { font-size:clamp(29px,7vw,41px); letter-spacing:-1px; max-width:580px; min-height:2.2em; }
 .network-copy { font-size:13px; line-height:1.6; margin-top:14px; max-width:560px; min-height:clamp(5.2em,calc(280px - 38vw),10em); }
 .network-visual { display:block; height:auto; }
 .network-plot { position:sticky; top:64px; height:clamp(245px,39svh,340px); z-index:3; background:radial-gradient(ellipse at 50% 45%,#131e2b,#0b111a 74%); box-shadow:0 14px 22px #0b111a; }
 .network-plane { top:54%; }
 .short-labels .network-area { min-height:38px; padding:9px; font-size:11px; }
 .network-scanner { top:6px; left:0; padding:6px 8px; gap:7px; }
 .network-scanner b { font-size:9px; letter-spacing:1.3px; } .network-scanner small { display:none; }
 .network-motion { top:4px; font-size:9px; }
 .network-threads { z-index:4; }
 .network-rollout { margin:22px 0 0 32px; z-index:2; }
 .rollout-heading { padding-bottom:17px; min-height:80px; }
 .rollout-heading p>span { font-size:16px; }
 .network-overview { min-height:40px; }
 .rollout-row { padding:13px 0 13px 14px; min-height:92px; display:flex; flex-direction:column; justify-content:center; }
 .rollout-row dt { font-size:10px; } .rollout-row dd { font-size:16px; line-height:1.4; }
 .network-caption { display:block; margin-top:20px; } .network-note { font-size:10px; }
 .network-legend { margin-top:9px; font-size:9px; gap:18px; }
 .network-transport { display:block; padding-top:12px; }
 .network-guide { font-size:12px; margin-bottom:10px; gap:12px; } .network-guide small { display:none; }
 .network-phases { gap:7px; } .network-phases button { font-size:11px; min-height:38px; }
 .network-phases button span { font-size:8px; margin-right:5px; }
 .network-meta { font-size:8px; gap:10px; margin-top:3px; } .network-meta span:last-child { font-size:9px; white-space:nowrap; }
 .site-footer { font-size:10px; padding:25px 20px; } .site-footer strong { display:block; margin:0 0 5px; }
}
@media(prefers-reduced-motion:reduce) { .network-area,.site-header,.network-scanner { transition:none; } .network-motion { display:none; } }