/* Homepage band graphics. Line-art SVG, CSS motion. Field palette. */
.band{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,400px);gap:56px;align-items:center}
.band-text{min-width:0}
.art{margin:0;width:100%;max-width:400px;justify-self:end}
.art svg{display:block;width:100%;height:auto;overflow:visible}
.art path,.art line,.art circle,.art rect{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.art .grid{stroke:rgba(232,236,241,.05);stroke-width:1}
.art .grid2{stroke:rgba(143,179,217,.22);stroke-width:1}
.art .brk{stroke:rgba(143,179,217,.55);stroke-width:1.2}
.art .brk2{stroke:rgba(143,179,217,.6);stroke-width:1}
.art .ln{stroke:rgba(232,236,241,.26);stroke-width:1}
.art .acln{stroke:#8fb3d9;stroke-width:1.4}
.art .ac{stroke:#8fb3d9}.art .thin{stroke-width:1;opacity:.75}
.art .slab{stroke:rgba(232,236,241,.38);stroke-width:1.2;fill:rgba(16,20,27,.92)}
.art .slab.nda{stroke:#8fb3d9;fill:rgba(4,6,10,.95)}
.art .hatch{stroke:rgba(143,179,217,.22);stroke-width:1}
.art .lockb{stroke:#8fb3d9;stroke-width:1.4;fill:rgba(11,14,18,.9)}
.art .lbl{fill:#8fb3d9;font:500 11px "IBM Plex Mono",monospace;letter-spacing:.24em}
.art .lead{stroke:rgba(143,179,217,.25);stroke-width:1;stroke-dasharray:.01 .02}
.art .dot{fill:#8fb3d9;stroke:none}
.art .nd{fill:#8fb3d9;stroke:none}
.art .ring{stroke:#8fb3d9;stroke-width:1.2;fill:rgba(11,14,18,.85)}
.art .ring2{stroke:rgba(143,179,217,.3);stroke-width:1;stroke-dasharray:3 5}
.art .trk{stroke:#e8ecf1;stroke-width:1.2;fill:rgba(11,14,18,.6)}
.art .dec{stroke:#8fb3d9;stroke-width:1.4;fill:rgba(143,179,217,.18)}
.art .contour{stroke:rgba(143,179,217,.34);stroke-width:1}
.art .mesh{stroke:rgba(232,236,241,.34);stroke-width:1}
.art .bar{stroke:rgba(232,236,241,.45);stroke-width:5}
.art .wall{stroke:rgba(232,236,241,.55);stroke-width:2.4}
.art .wall2{stroke:rgba(232,236,241,.4);stroke-width:1.6}
.art .sealbg{stroke:none;fill:#10141a}
.art .chk{stroke:#8fb3d9;stroke-width:2.4}
.art .flow{stroke:#cfe0f2;stroke-width:1.6;stroke-dasharray:.04 .96;stroke-dashoffset:1;opacity:0}
.art .scan{fill:rgba(143,179,217,.10);stroke:none;opacity:0}
.art .scanl{stroke:rgba(143,179,217,.7);stroke-width:1;opacity:0}
.art .pr{stroke:#8fb3d9;stroke-width:1.6;opacity:0}
.art .pop,.art .blk,.art .pr,.art .scan,.art .scanl{transform-box:fill-box;transform-origin:center}
.art .scan,.art .scanl{transform-box:view-box;transform-origin:0 0}

@media (max-width:900px){.band{grid-template-columns:1fr;gap:40px}.art{justify-self:start;max-width:360px}}

@media (prefers-reduced-motion:no-preference){
  /* Initial state only when the script is running; without it the final state shows. */
  .art-js .art .draw{stroke-dasharray:1;stroke-dashoffset:1}
  .art-js .art .lead.draw{stroke-dasharray:.01 .02;stroke-dashoffset:0;opacity:0}
  .art-js .art .pop{opacity:0}
  .art-js .art .blk{opacity:0}
  .art-js .art.in .draw{animation:art-draw 1.3s cubic-bezier(.65,0,.25,1) both}
  .art-js .art.in .lead.draw{animation:art-fade .8s ease both}
  .art-js .art.in .pop{animation:art-pop .6s cubic-bezier(.2,.8,.2,1) both}
  .art-js .art.in .blk{animation:art-drop .9s cubic-bezier(.2,.8,.2,1) both}
  .art-js .art.in .d1{animation-delay:.05s}.art-js .art.in .d2{animation-delay:.35s}.art-js .art.in .d3{animation-delay:.65s}
  .art-js .art.in .d4{animation-delay:.95s}.art-js .art.in .d5{animation-delay:1.25s}.art-js .art.in .d6{animation-delay:1.6s}
  .art-js .art.in .b1{animation-delay:.1s}.art-js .art.in .b2{animation-delay:.35s}.art-js .art.in .b3{animation-delay:.6s}.art-js .art.in .b4{animation-delay:1s}
  /* Ambient loops start after the build-up. */
  .art-js .art.in.live .flow{animation:art-flow 2.6s linear 2s infinite}
  .art-js .art.in.live .flow.f1{animation-delay:2.6s}.art-js .art.in.live .flow.f2{animation-delay:3.3s}.art-js .art.in.live .flow.fo{animation-delay:2.3s;animation-duration:1.6s}
  .art-js .art.in.live .blink{animation:art-blink 3s ease-in-out 2s infinite}
  .art-js .art.in.live .blink.k1{animation-delay:3s}.art-js .art.in.live .blink.k2{animation-delay:4s}
  .art-js .art.in.live .scan,.art-js .art.in.live .scanl{animation:art-scan 3.6s cubic-bezier(.5,0,.5,1) 1.6s infinite}
  .art-js .art.in.live .pr{animation:art-ping 3s ease-out 1.8s infinite}.art-js .art.in.live .p2{animation-delay:3.3s}
  /* Scroll-driven entrance for the whole figure where supported. */
  @supports (animation-timeline:view()){
    .art{animation:art-rise linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
  }
}
@media (prefers-reduced-motion:reduce){.art *{animation:none!important}.art .scan,.art .scanl,.art .flow{opacity:0}.art .pr.p1{opacity:.5}}
@keyframes art-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes art-fade{from{opacity:0}to{opacity:1}}
@keyframes art-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes art-drop{from{opacity:0;transform:translateY(-34px)}to{opacity:1;transform:none}}
@keyframes art-flow{0%{stroke-dashoffset:1;opacity:0}8%{opacity:1}92%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes art-blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes art-scan{0%{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(250px);opacity:0}}
@keyframes art-ping{0%{transform:scale(.15);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@keyframes art-rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
/* Additional motifs */
.art .warnln{stroke:rgba(255,90,78,.85);stroke-width:1.6}
.art .warnbox{fill:none;stroke:#ff5a4e;stroke-width:1.4}
.art .cell-sq{fill:rgba(143,179,217,.04);stroke:rgba(232,236,241,.16);stroke-width:1}
.art .cell-on{fill:rgba(143,179,217,.16);stroke:#8fb3d9;stroke-width:1}
.art .thinbar{stroke-width:3;stroke:rgba(232,236,241,.32)}
.art .dash{stroke-dasharray:.02 .015}
.art-js .art.in .dash.draw{animation:art-fade 1s ease both}
.art-js .art .dash.draw{stroke-dasharray:.02 .015;stroke-dashoffset:0;opacity:0}