/* Cinematic 4.1. Typography and diagram geometry are the artwork. No filters or second canvas. */
#network-section{--network-ink:#f1f4f7;--network-muted:#aebfcd;--network-accent:#b8dcea;color:var(--network-ink)}
#network-section em{font-style:normal;color:var(--network-accent)}
.network-bed{position:absolute;inset:0;background:#030810;opacity:0;pointer-events:none}
.network-kicker{position:absolute;left:5%;right:5%;top:130px;display:flex;justify-content:space-between;color:#abc7d8;font:10px/1.5 monospace;letter-spacing:.13em}
.network-story{position:absolute;left:5%;right:5%;top:185px;bottom:145px;perspective:1600px}
.story-layer{position:absolute;inset:0;visibility:hidden;pointer-events:none}
.small-heading{font:10px/1.6 monospace;letter-spacing:.15em;color:#a6c6d8;margin:0 0 28px}
.network-opening{display:flex;flex-direction:column;justify-content:center;padding-bottom:25px}
.network-opening h2{font-size:clamp(70px,10.9vw,176px);letter-spacing:-.077em;line-height:.92;font-weight:400;margin:0 0 35px}
.word-mask{display:block;overflow:hidden;padding:0 .05em .08em 0;margin-bottom:-.08em}.word-mask>span{display:block;transform-origin:left center}
.opening-description{font-size:clamp(17px,1.4vw,23px);line-height:1.6;color:#b7c9d6;margin:0}
.opening-index{position:absolute;right:0;top:11%;height:70%;width:17%;display:flex;flex-direction:column;justify-content:space-between;border-left:1px solid #355168;padding-left:27px;font:10px/1.6 monospace;letter-spacing:.07em;color:#abc7d8}
.opening-index i{position:absolute;left:-1px;top:0;width:2px;height:32%;background:#beddea;transform-origin:center top}
.architecture-field{position:absolute;inset:0;visibility:hidden;transform-origin:center center;pointer-events:none}
.architecture-node{position:absolute;left:0;top:0;transform-origin:left top;white-space:nowrap;will-change:transform}
.architecture-node strong{display:block;font-weight:400;font-size:clamp(32px,4.1vw,66px);line-height:1.12;letter-spacing:-.058em;margin:10px 0}
.node-number{font:10px/1.5 monospace;letter-spacing:.12em;color:#8eb4cb;display:block}
.node-caption{font-size:13px;line-height:1.6;color:#a9c1d2;display:block}
.architecture-context{position:absolute;bottom:0;left:0;font:9px/1.6 monospace;letter-spacing:.1em;color:#91b0c4}
.architecture-heading h2{font-size:clamp(30px,3.15vw,49px);line-height:1.07;letter-spacing:-.055em;max-width:70%;margin:0}
.architecture-heading>p{position:absolute;right:0;top:0;font-size:14px;line-height:1.6;color:#aebfcd;margin:0}
.protocol-stage,.capability-stage{position:absolute;inset:0;pointer-events:none}
.protocol-frame{padding-top:5%}
.protocol-name{position:absolute;left:-.045em;top:18%;font-size:clamp(140px,22.5vw,350px);line-height:.9;letter-spacing:-.075em;margin:0;font-weight:400;transform-origin:left center}
.protocol-explanation{position:absolute;left:62%;right:0;top:23%;}
.protocol-explanation h3{font-size:clamp(25px,3.1vw,49px);font-weight:400;line-height:1.08;letter-spacing:-.05em;margin:22px 0}
.protocol-explanation p{font-size:14px;line-height:1.75;color:#afc3d2;margin:0}
.protocol-explanation .relation-label{font:10px/1.6 monospace;letter-spacing:.09em;color:#a4d4ea}
.technology-frame h2{display:flex;align-items:baseline;gap:28px;font-size:clamp(65px,11.4vw,178px);line-height:.97;margin:15px 0 20px;letter-spacing:-.066em}
.tech-divider{font-size:.5em;color:#617f96}
.protocol-description{font-size:clamp(22px,2.2vw,36px);line-height:1.17;letter-spacing:-.04em;position:absolute;top:50%;left:0;margin:0}
.deployment-context{position:absolute;left:61%;right:0;top:51%;}
.deployment-context p{display:grid;grid-template-columns:85px 1fr;gap:10px;font-size:12px;color:#a8bfd0;margin:0 0 16px}.deployment-context b{font-weight:400;color:#dceaf2;font-family:monospace;font-size:11px}
.capability-frame{display:flex;flex-direction:column;justify-content:center;padding-bottom:80px}
.capability-frame h2{overflow:hidden;font-size:clamp(70px,13.8vw,220px);font-weight:400;line-height:1.06;letter-spacing:-.074em;margin:5px -.05em 25px -.05em;padding:0 .05em;}
.capability-frame h2>span{display:block;transform-origin:left center}
.capability-frame>p:not(.small-heading){font-size:clamp(23px,3vw,46px);line-height:1.13;letter-spacing:-.045em;margin:0}
.capability-annotation{position:absolute;right:0;bottom:19%;font:11px/1.8 monospace;color:#9eb9cb;letter-spacing:.03em}
.capability-relations{position:absolute;bottom:1%;left:0;right:0;display:flex;gap:20px;align-items:center;color:#91b6cb;font:10px/1.6 monospace;letter-spacing:.13em;visibility:hidden}
.capability-relations i{height:1px;flex:1;background:#37586d}
.relation-focus{position:absolute;bottom:-12px;left:0;width:33%;height:2px;background:#c3e4f2;transform-origin:left center}
.network-ending{display:flex;flex-direction:column;justify-content:center}
.network-ending h2{font-size:clamp(62px,8.2vw,130px);line-height:1.02;letter-spacing:-.067em;margin:0 0 25px}
.network-ending>p:last-child{font-size:16px;color:#a5c1d3;margin:0}
.ending-service{position:absolute;right:0;top:38%;width:27%;display:grid;grid-template-columns:1fr 1.5fr;gap:20px;align-items:center;font:10px/1.8 monospace;letter-spacing:.1em;color:#bdd9e8}
.ending-service svg{position:absolute;left:20%;top:-80px;width:140px;height:190px;overflow:visible}.ending-service path{fill:none;stroke:#55788f;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.ending-service span:last-child{padding-top:135px}
.network-bottom{position:absolute;bottom:83px;left:5%;right:5%;display:flex;align-items:flex-end;justify-content:space-between;visibility:hidden}
.network-disclaimer{font:10px/1.5 monospace;color:#859fb2;margin:0}
.network-bottom nav{display:flex;gap:25px;font-size:11px;color:#a8bfce}.network-bottom a{padding:12px 0;border-bottom:1px solid #486276;min-height:44px}
.network-bottom a[aria-current]{color:#e5f4fb;border-color:#c0e3f3}
.network-static{display:none;position:absolute;inset:140px 5% 90px;overflow-y:auto;padding-right:12px;line-height:1.6}
.network-static h2{font-size:42px}.network-static dl{display:grid;grid-template-columns:120px 1fr;gap:15px}.network-static dt{font-weight:400;color:#b4d9eb}.network-static dd{margin:0;color:#b3c6d5;font-size:14px}
#network-section[data-static=true] .network-story,#network-section[data-static=true] .network-bottom{display:none}#network-section[data-static=true] .network-static{display:block}

/* 7.2: masks belong to the glyph reveal, never to the settled composition. */
.node-title-mask{display:block;overflow:clip;padding:0 .09em .10em 0;margin:0 -.09em -.10em 0}
.node-title-mask>span{display:block;transform-origin:left bottom}
