.capability-graphic{height:130px;margin:0 0 20px;overflow:hidden}.capability-graphic svg{height:100%;width:100%;fill:none;stroke:var(--neon);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.capability-graphic .diagram-grid{stroke:#8288a32b;stroke-width:.5}.system-panel.selected .capability-graphic svg{animation:diagram-enter 1s ease both}.lifecycle article{grid-template-columns:48px 1fr 80px}.lifecycle-graphic{grid-column:3;grid-row:1/3;align-self:center}.lifecycle-graphic svg{width:80px;height:80px;fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.technology-flow{margin:28px 0 0;border:1px solid #8288a355;background:#232629}.technology-flow figcaption{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border:0;border-bottom:1px solid #8288a355}.technology-flow figcaption span{font-size:12px;color:#aab2ca}.technology-flow figcaption strong{font-size:19px;font-weight:400}.flow-stages{display:grid;grid-template-columns:1fr 30px 1fr 30px 1fr;align-items:center;padding:28px 20px;gap:12px}.flow-stages>div{text-align:center}.flow-symbol{display:grid;place-items:center;margin:0 auto 18px;width:64px;height:56px;background:var(--neon);color:#202225;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);font-size:38px}.flow-stages h3{font-size:19px;margin-bottom:8px}.flow-stages p{font-size:14px;color:#bfc5d4;margin:0}.flow-arrow{font-size:28px;color:#8288a3}.technology-flow .flow-arrow{animation:flow-pulse 2.8s ease-in-out infinite}.technology-flow .flow-arrow:nth-of-type(2){animation-delay:.7s}@keyframes flow-pulse{50%{color:#d1fe49;transform:translateX(4px)}}@keyframes diagram-enter{from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:none}}@media(max-width:760px){.lifecycle article{grid-template-columns:48px 1fr!important}.lifecycle-graphic{grid-column:2;grid-row:auto;justify-self:end}.lifecycle-graphic svg{width:64px;height:64px}.flow-stages{grid-template-columns:1fr}.flow-arrow{transform:rotate(90deg);text-align:center;animation:none!important}.technology-flow figcaption{align-items:flex-start;gap:10px}.capability-graphic{height:110px}}@media(prefers-reduced-motion:reduce){.technology-flow *,.system-panel.selected .capability-graphic svg{animation:none!important}}
.grid-explainer{padding:0 var(--gutter) 24px;background:#25272b}.grid-content{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center;padding:30px 0}.grid-content h2{margin-bottom:20px}.grid-content p{color:#d0d4df;max-width:470px}.grid-options{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 18px}.grid-options button,.grid-motion{font:inherit;font-size:14px;padding:12px;border:1px solid #8288a3;background:none;color:#f2f2ef;cursor:pointer}.grid-options button[aria-pressed=true]{background:#d1fe49;color:#24262a;border-color:#d1fe49}.grid-explanation{min-height:76px}.grid-graphic{height:300px;position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse,#8288a31a,transparent 70%)}.grid-core{display:grid;text-align:center;font-size:36px;letter-spacing:.12em;z-index:1}.grid-core small{font-size:11px;letter-spacing:.18em;color:#d1fe49}.grid-orbit{position:absolute;width:210px;height:210px;border:1px solid #8288a377;transform:rotate(45deg)}.orbit-b{width:155px;height:155px;border-style:dashed;animation:grid-turn 32s linear infinite}.orbit-a{animation:grid-turn 48s linear infinite reverse}.grid-node{position:absolute;font-size:11px;color:#b9c1df;background:#25272b;padding:8px;z-index:2}.node-a{top:20px;left:40%}.node-b{right:0;top:55%}.node-c{bottom:12px;left:12%}.grid-motion{padding:8px 12px;font-size:12px}.graphic-paused *,.graphic-offscreen *{animation-play-state:paused!important}.grid-options button:focus-visible,.grid-motion:focus-visible{outline:3px solid #d1fe49;outline-offset:3px}@keyframes grid-turn{to{transform:rotate(405deg)}}@media(max-width:760px){.grid-content{grid-template-columns:1fr;gap:8px}.grid-graphic{height:250px}.grid-options button{flex:1}.grid-explanation{min-height:76px}}@media(prefers-reduced-motion:reduce){.grid-explainer *{animation:none!important}}
/* Quiet architectural background, decorative rather than survey data. */
.grid-explainer{position:relative;isolation:isolate;overflow:hidden}.grid-explainer:before{content:'';position:absolute;inset:-60px;z-index:-1;pointer-events:none;background-image:linear-gradient(#8288a319 1px,transparent 1px),linear-gradient(90deg,#8288a319 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(90deg,transparent 25%,#000 100%);animation:grid-drift 24s linear infinite}.grid-explainer:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 80% 55%,#0013c31c,transparent 65%);animation:grid-glow 8s ease-in-out infinite alternate}.grid-explainer .grid-explanation{min-height:0;line-height:1.7;max-width:460px}.grid-explainer .grid-content{padding-top:38px;padding-bottom:38px}.grid-explainer.graphic-paused:before,.grid-explainer.graphic-paused:after,.grid-explainer.graphic-offscreen:before,.grid-explainer.graphic-offscreen:after{animation-play-state:paused}@keyframes grid-drift{to{transform:translate(48px,48px)}}@keyframes grid-glow{to{opacity:.3}}@media(prefers-reduced-motion:reduce){.grid-explainer:before,.grid-explainer:after{animation:none}}
/* Regular hexagonal outlines with transparent label backgrounds. */
.grid-orbit{border:0;clip-path:none;background:none;width:240px;height:208px;display:block}
.grid-orbit:before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 208'%3E%3Cpath d='M60 1H180L239 104 180 207H60L1 104Z' fill='none' stroke='%238288a3' stroke-opacity='.65' stroke-width='1'/%3E%3C/svg%3E");background-size:100% 100%;background-repeat:no-repeat}
.grid-orbit.orbit-b{width:174px;height:151px;border:0}
.grid-orbit.orbit-b:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 208'%3E%3Cpath d='M60 1H180L239 104 180 207H60L1 104Z' fill='none' stroke='%238288a3' stroke-opacity='.65' stroke-width='1.4' stroke-dasharray='4 6'/%3E%3C/svg%3E")}
.grid-node{background:transparent}
/* Ambient motion behind the content, with no simulated readings. */
main>section:not(.grid-explainer){position:relative;isolation:isolate}
.ambient-layer{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:paint}
.ambient-layer:before{content:'';position:absolute;inset:-60px;background-image:linear-gradient(#8288a312 1px,transparent 1px),linear-gradient(90deg,#8288a312 1px,transparent 1px);background-size:60px 60px;mask-image:linear-gradient(110deg,transparent 15%,#000 100%);animation:ambient-drift 42s linear infinite}
.ambient-layer:after{content:'';position:absolute;width:70%;height:120%;top:-10%;left:10%;background:radial-gradient(ellipse,#8288a30c,transparent 68%);animation:ambient-light 24s ease-in-out infinite alternate}
.applications .ambient-layer:before{background-image:linear-gradient(#0013c30a 1px,transparent 1px),linear-gradient(90deg,#0013c30a 1px,transparent 1px)}
main>section:nth-child(even) .ambient-layer:before{animation-direction:reverse;animation-duration:54s}
.ambient-offscreen .ambient-layer:before,.ambient-offscreen .ambient-layer:after{animation-play-state:paused}
@keyframes ambient-drift{to{transform:translate(60px,60px)}}
@keyframes ambient-light{from{transform:translateX(-20%);opacity:.3}to{transform:translateX(35%);opacity:1}}
@media(prefers-reduced-motion:reduce){.ambient-layer:before,.ambient-layer:after{animation:none}}
/* One shared hex pattern: the pointer brightens the existing background. */
:root{--ambient-hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='41.569' viewBox='0 0 72 41.569'%3E%3Cpath d='M12 0H36L48 20.7845 36 41.569H12L0 20.7845Z M48 20.7845H72' fill='none' stroke='%238288a3' stroke-width='.7'/%3E%3C/svg%3E")}
.xray-lens{display:none!important}
.ambient-layer:before,.applications .ambient-layer:before,.grid-explainer:before{background-image:var(--ambient-hex);background-size:72px 41.569px;opacity:.09;animation-name:ambient-hex-drift}
.ambient-layer .ambient-amplifier{position:absolute;inset:-60px;background-image:var(--ambient-hex);background-size:72px 41.569px;opacity:0;pointer-events:none;animation:ambient-hex-drift 42s linear infinite;mask-image:radial-gradient(circle 180px at var(--pointer-x,-1000px) var(--pointer-y,-1000px),#000,transparent 100%);transition:opacity .35s ease}
main>section.pointer-near .ambient-amplifier{opacity:.3}
main>section:nth-child(even) .ambient-amplifier{animation-direction:reverse;animation-duration:54s}
.ambient-offscreen .ambient-amplifier{animation-play-state:paused}
.grid-explainer:before{display:none}.grid-explainer .ambient-layer:before{mask-image:none}
@keyframes ambient-hex-drift{to{transform:translate(72px,41.569px)}}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){main>section.pointer-near .ambient-amplifier{opacity:0}.ambient-amplifier{animation:none!important}}
/* Smaller pointer emphasis and a restrained highlight travelling around panels. */
.ambient-layer .ambient-amplifier{mask-image:radial-gradient(circle 125px at var(--pointer-x,-1000px) var(--pointer-y,-1000px),#000,transparent 100%)}
@property --edge-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.panel-edge-glow{position:absolute;inset:0;pointer-events:none;z-index:3;padding:1px;background:conic-gradient(from var(--edge-angle),transparent 0deg,transparent 275deg,#8288a310 305deg,#8288a380 335deg,transparent 360deg);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:panel-edge-travel 18s linear infinite}
.system-panel,.overview-links>a,.lifecycle article{position:relative;isolation:isolate}.system-panel .panel-edge-glow{animation-duration:14s}.lifecycle article .panel-edge-glow{background:conic-gradient(from var(--edge-angle),transparent 0deg,transparent 290deg,#0013c360 338deg,transparent 360deg)}
.edge-offscreen>.panel-edge-glow{animation-play-state:paused}
@keyframes panel-edge-travel{to{--edge-angle:360deg}}
@media(prefers-reduced-motion:reduce){.panel-edge-glow{animation:none;opacity:.25}}
/* Visible perimeter accents across all primary sections and cards. */
main>section,.prototype,.technology-cycle,.technology-flow,.purpose-tile,.contact-tile{position:relative}
.panel-edge-glow{padding:2px;background:conic-gradient(from var(--edge-angle),transparent 0deg,transparent 220deg,#8288a335 270deg,#a7b2ffb3 320deg,#d1fe49d9 345deg,transparent 360deg);animation-duration:12s}
.system-panel .panel-edge-glow{animation-duration:12s}
.applications>.panel-edge-glow,.lifecycle article .panel-edge-glow,.prototype>.panel-edge-glow,.technology-cycle>.panel-edge-glow,.contact-tile>.panel-edge-glow{background:conic-gradient(from var(--edge-angle),transparent 0deg,transparent 220deg,#0013c326 280deg,#0013c3b3 330deg,#0013c3e6 345deg,transparent 360deg)}