/* LOGIN BACKGROUNDS: the paint for Branding > Backgrounds (branding/backgrounds/list.ts names them).
   One element, .bgx[data-bg], with ::before/::after and two empty children (.bgx_a, .bgx_b) as layers,
   and .bgx_art for the few that carry an inline SVG. Sizes are px on a 1440 x 900 frame: the gallery
   scales that frame down whole, so a thumbnail is the real thing, smaller. No images, no grain, no blur
   filter; motion is transform or opacity, so it composites and never repaints. Unlayered on purpose:
   this sheet only paints .bgx, and nothing in system.css styles it. */
@keyframes bgxDrift { from { transform: translate3d(-6%, -4%, 0); } to { transform: translate3d(6%, 5%, 0); } }
@keyframes bgxSway  { from { transform: translate3d(-4%, 0, 0) skewX(-6deg); } to { transform: translate3d(4%, 2%, 0) skewX(6deg); } }
@keyframes bgxSpin  { to { transform: rotate(1turn); } }
@keyframes bgxRise  { to { transform: translate3d(0, -160px, 0); } }
@keyframes bgxRoll  { to { transform: translate3d(-720px, 0, 0); } }
@keyframes bgxRun   { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes bgxBeam  { 0% { transform: translate3d(-160%, 0, 0) rotate(18deg); } 55%,100% { transform: translate3d(420%, 0, 0) rotate(18deg); } }
@keyframes bgxBreathe { from { transform: scale(.86); opacity: .55; } to { transform: scale(1.08); opacity: 1; } }
@keyframes bgxRipple { from { transform: scale(.12); opacity: 0; } 12% { opacity: 1; } to { transform: scale(1); opacity: 0; } }
@keyframes bgxTwinkle { from { opacity: .25; } to { opacity: 1; } }

.bgx{--contour:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='white' stroke-opacity='0.075' stroke-width='1.4'%3E%3Cpath d='M447 400C448 404 447 410 445 413S437 420 433 423S425 427 420 429S412 433 407 434S397 434 393 433S384 430 381 428S373 424 370 421S363 415 361 412S359 404 359 400S358 392 358 388S360 378 363 374S371 368 376 367S388 367 393 368S402 370 406 371S415 372 418 374S426 377 429 380S437 385 440 388S446 396 447 400Z'/%3E%3Cpath d='M503 396C505 405 502 416 497 424S480 437 472 442S455 451 446 455S429 463 420 464S400 464 391 463S373 456 365 452S348 445 342 440S328 427 325 420S321 404 320 396S318 379 320 371S323 351 329 344S347 331 357 328S381 329 391 330S409 334 418 336S435 339 443 342S458 350 465 355S480 365 487 372S502 387 503 396Z'/%3E%3Cpath d='M561 392C563 405 558 422 549 434S523 453 510 461S485 474 472 480S446 492 432 493S402 494 389 491S362 483 350 478S323 467 312 459S292 440 287 429S282 405 281 392S278 367 281 353S286 324 296 313S324 295 339 291S374 292 389 293S417 298 430 301S455 306 467 311S490 322 501 329S525 344 535 355S558 379 561 392Z'/%3E%3Cpath d='M619 388C621 406 613 428 601 444S566 470 549 480S515 498 497 505S462 520 444 522S405 522 387 519S351 510 333 504S295 491 281 480S255 453 249 438S243 405 242 388S238 354 242 336S250 297 263 284S301 260 322 256S367 255 387 257S424 261 442 265S476 272 492 279S521 295 537 304S571 324 584 337S616 370 619 388Z'/%3E%3Cpath d='M677 384C680 406 668 434 653 454S608 486 586 498S544 521 522 529S478 546 455 549S408 549 385 545S340 538 317 530S267 515 249 502S217 466 210 447S204 405 203 384S198 341 203 319S215 271 232 254S280 226 305 221S360 219 385 220S432 224 453 228S496 239 516 247S553 267 573 279S617 302 635 320S674 362 677 384Z'/%3E%3Cpath d='M736 380C739 407 722 440 704 463S650 502 624 517S573 544 547 554S494 572 467 575S412 575 384 572S328 566 300 558S237 541 216 524S178 480 170 456S164 406 163 380S158 328 165 302S181 245 202 226S259 194 289 187S353 183 383 184S439 186 466 191S517 205 541 215S585 239 609 253S665 281 686 302S733 353 736 380Z'/%3E%3Cpath d='M794 376C797 407 776 446 753 473S691 517 661 535S603 567 572 578S510 597 478 601S415 600 382 598S315 595 282 587S207 567 181 547S139 494 129 466S124 406 123 376S118 315 126 285S148 221 173 199S240 164 274 155S347 147 381 147S447 147 478 153S538 170 566 182S618 210 646 227S713 259 738 284S792 345 794 376Z'/%3E%3Cpath d='M852 372C854 408 828 451 802 482S732 533 698 553S631 590 597 602S525 621 489 625S419 625 381 624S302 625 263 616S175 595 146 571S99 509 89 475S83 406 83 372S78 302 89 269S117 197 146 173S221 134 260 123S340 111 379 110S455 107 491 114S559 135 592 149S651 181 684 201S763 237 791 266S850 336 852 372Z'/%3E%3Cpath d='M909 368C910 408 879 456 850 490S773 548 735 571S660 612 621 625S541 644 500 649S422 650 379 650S289 656 244 647S142 623 109 596S59 523 48 485S42 407 42 368S39 289 52 252S88 174 120 148S204 106 246 93S333 75 376 72S463 66 503 74S581 99 617 116S685 152 723 173S813 215 844 247S908 328 909 368Z'/%3E%3C/g%3E%3C/svg%3E");
  position:absolute;inset:0;overflow:hidden;isolation:isolate;pointer-events:none;background:#121517}
.bgx.is-fixed{position:fixed;z-index:0}
.bgx::before,.bgx::after,.bgx_a,.bgx_b,.bgx_a::before,.bgx_b::before{position:absolute;inset:0;pointer-events:none}
.bgx_art,.bgx_art svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.bgx.is-paused,.bgx.is-paused *,.bgx.is-paused::before,.bgx.is-paused::after,.bgx.is-paused *::before{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.bgx,.bgx *,.bgx::before,.bgx::after,.bgx *::before{animation:none!important}}

/* 01 Graphite Pools: the site's card light, as the whole ground */
.bgx[data-bg="pools"]{background:
  radial-gradient(900px 640px at 0% 0%,rgba(0,255,163,.12),transparent 62%),
  radial-gradient(860px 720px at 100% 100%,rgba(163,0,255,.16),transparent 62%),
  radial-gradient(600px 470px at 94% 4%,rgba(255,0,92,.07),transparent 60%),#1D2023}

/* 02 Dot Lattice */
.bgx[data-bg="dots"]{background:radial-gradient(640px 480px at 50% 48%,rgba(0,255,163,.07),transparent 70%),#1B1E21}
.bgx[data-bg="dots"]::before{content:"";background:radial-gradient(circle at 1.5px 1.5px,rgba(255,255,255,.12) 1px,transparent 1.7px) 0 0/24px 24px;
  -webkit-mask-image:radial-gradient(72% 70% at 50% 50%,#000 25%,transparent 100%);mask-image:radial-gradient(72% 70% at 50% 50%,#000 25%,transparent 100%)}

/* 03 Hub Wires + 04 Signal Wires (the SVG is in list.ts) */
.bgx[data-bg="hub"],.bgx[data-bg="signal"]{background:radial-gradient(520px 420px at 50% 50%,rgba(0,255,163,.06),transparent 70%),#181B1E}
.bgx[data-bg="hub"]::before,.bgx[data-bg="signal"]::before{content:"";background:radial-gradient(circle at 1.5px 1.5px,rgba(255,255,255,.06) 1px,transparent 1.7px) 0 0/28px 28px}
.bgx .bgx_run{animation:bgxRun 9s cubic-bezier(.45,0,.55,1) infinite}

/* 05 Slow Tide */
.bgx[data-bg="tide"]{background:#0D1113}
.bgx[data-bg="tide"] .bgx_a{inset:-30%;background:radial-gradient(34% 34% at 36% 40%,rgba(0,255,163,.12),transparent 70%);
  animation:bgxDrift 38s ease-in-out infinite alternate}
.bgx[data-bg="tide"] .bgx_b{inset:-30%;background:radial-gradient(36% 36% at 64% 62%,rgba(76,125,255,.14),transparent 70%);
  animation:bgxDrift 46s ease-in-out infinite alternate-reverse}

/* 06 Aurora */
.bgx[data-bg="aurora"]{background:linear-gradient(180deg,#0A1012,#08090B 70%)}
.bgx[data-bg="aurora"] .bgx_a{inset:-25% -20% 45%;background:
  radial-gradient(40% 46% at 28% 60%,rgba(0,255,163,.15),transparent 70%),
  radial-gradient(34% 40% at 52% 48%,rgba(0,220,255,.11),transparent 70%),
  radial-gradient(34% 44% at 76% 62%,rgba(163,0,255,.13),transparent 70%);
  animation:bgxSway 26s ease-in-out infinite alternate}

/* 07 Contour + 08 Contour Drift */
.bgx[data-bg="contour"],.bgx[data-bg="contour-drift"]{background:radial-gradient(700px 520px at 50% 50%,rgba(102,187,154,.07),transparent 70%),#1A1D20}
.bgx[data-bg="contour"]::before{content:"";background:var(--contour) 78% 40%/1500px auto no-repeat}
.bgx[data-bg="contour-drift"] .bgx_a{inset:auto;left:50%;top:50%;width:1800px;height:1800px;margin:-900px 0 0 -900px;
  background:var(--contour) center/100% auto no-repeat;animation:bgxSpin 300s linear infinite}

/* 09 Hairline Grid: neutral, not green */
.bgx[data-bg="hairline"]{background:#15181A}
.bgx[data-bg="hairline"]::before{content:"";background:
  linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px) -1px -1px/160px 160px,
  linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px) -1px -1px/160px 160px,
  linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) -1px -1px/32px 32px,
  linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) -1px -1px/32px 32px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 20%,transparent 100%);mask-image:radial-gradient(70% 70% at 50% 50%,#000 20%,transparent 100%)}

/* 10 Isometric */
.bgx[data-bg="iso"]{background:radial-gradient(800px 560px at 50% 45%,#191D20,#0E1012)}
.bgx[data-bg="iso"]::before{content:"";background:
  repeating-linear-gradient(30deg,rgba(255,255,255,.07) 0 1px,transparent 1px 40px),
  repeating-linear-gradient(150deg,rgba(255,255,255,.07) 0 1px,transparent 1px 40px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 46.19px);
  -webkit-mask-image:radial-gradient(75% 75% at 50% 50%,#000 10%,transparent 90%);mask-image:radial-gradient(75% 75% at 50% 50%,#000 10%,transparent 90%)}

/* 11 Pinstripe */
.bgx[data-bg="pinstripe"]{background:
  radial-gradient(760px 560px at 0% 100%,rgba(0,255,163,.09),transparent 65%),
  repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 1px,transparent 1px 14px),#17191C}

/* 12 Spotlight */
.bgx[data-bg="spotlight"]{background:
  radial-gradient(36% 9% at 50% 82%,rgba(220,240,235,.05),transparent 70%),
  radial-gradient(42% 92% at 50% -8%,rgba(220,240,235,.12),rgba(220,240,235,.03) 55%,transparent 75%),#07090A}

/* 13 Horizon */
.bgx[data-bg="horizon"]{background:linear-gradient(180deg,#07090B 0%,#0B1214 55%,#0B1715 66%,#050607 100%)}
.bgx[data-bg="horizon"]::before{content:"";background:radial-gradient(48% 90px at 50% 0,rgba(0,255,163,.09),transparent 100%) 0 76%/100% 200px no-repeat}
.bgx[data-bg="horizon"]::after{content:"";top:76%;bottom:auto;height:1px;background:linear-gradient(90deg,transparent 4%,rgba(0,255,163,.5) 50%,transparent 96%)}

/* 14 Eclipse */
.bgx[data-bg="eclipse"]{background:
  radial-gradient(circle at 57% 45%,#040506 0 379px,rgba(102,187,154,.42) 380px,rgba(102,187,154,.12) 392px,rgba(102,187,154,.03) 470px,transparent 600px),
  radial-gradient(900px 700px at 57% 45%,#101517,#060708)}

/* 15 Orbits */
.bgx[data-bg="orbit"]{background:#0D1012}
.bgx[data-bg="orbit"]::before{content:"";background:repeating-radial-gradient(circle at 50% 50%,transparent 0 159px,rgba(255,255,255,.075) 159px 160px);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 72%);mask-image:radial-gradient(circle at 50% 50%,#000 30%,transparent 72%)}
.bgx[data-bg="orbit"] .bgx_a,.bgx[data-bg="orbit"] .bgx_b{inset:auto;left:50%;top:50%;border-radius:50%}
.bgx[data-bg="orbit"] .bgx_a{width:640px;height:640px;margin:-320px 0 0 -320px;animation:bgxSpin 48s linear infinite}
.bgx[data-bg="orbit"] .bgx_b{width:960px;height:960px;margin:-480px 0 0 -480px;animation:bgxSpin 80s linear infinite reverse}
.bgx[data-bg="orbit"] .bgx_a::before,.bgx[data-bg="orbit"] .bgx_b::before{content:"";inset:auto;left:50%;top:-3px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%}
.bgx[data-bg="orbit"] .bgx_a::before{background:#00FFA3;box-shadow:0 0 14px 2px rgba(0,255,163,.3)}
.bgx[data-bg="orbit"] .bgx_b::before{background:#00DCFF;box-shadow:0 0 14px 2px rgba(0,220,255,.3)}

/* 16 Radar */
.bgx[data-bg="radar"]{background:#0B0E0F}
.bgx[data-bg="radar"]::before{content:"";background:repeating-radial-gradient(circle at 50% 50%,transparent 0 119px,rgba(102,187,154,.06) 119px 120px);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 25%,transparent 70%);mask-image:radial-gradient(circle at 50% 50%,#000 25%,transparent 70%)}
.bgx[data-bg="radar"] .bgx_a{inset:auto;left:50%;top:50%;width:1600px;height:1600px;margin:-800px 0 0 -800px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(102,187,154,.03) 20deg,rgba(102,187,154,.12) 74deg,transparent 82deg);
  -webkit-mask-image:radial-gradient(circle,#000 20%,transparent 60%);mask-image:radial-gradient(circle,#000 20%,transparent 60%);
  animation:bgxSpin 22s linear infinite}

/* 17 Deep Mesh */
.bgx[data-bg="mesh"]{background:
  radial-gradient(700px 520px at 18% 22%,rgba(76,125,255,.16),transparent 70%),
  radial-gradient(640px 560px at 82% 30%,rgba(0,190,160,.12),transparent 70%),
  radial-gradient(760px 600px at 70% 92%,rgba(163,0,255,.13),transparent 70%),
  radial-gradient(560px 480px at 12% 88%,rgba(0,220,255,.08),transparent 70%),#0B0D11}

/* 18 Prism */
.bgx[data-bg="prism"]{background:#0A0C0E}
.bgx[data-bg="prism"]::before{content:"";background:
  repeating-linear-gradient(90deg,transparent 0,rgba(255,255,255,.022) 70px,transparent 140px),
  linear-gradient(90deg,rgba(0,255,163,.13),rgba(0,220,255,.11) 25%,rgba(76,125,255,.12) 50%,rgba(163,0,255,.12) 75%,rgba(255,0,92,.1));
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 45%,transparent 85%);mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35) 45%,transparent 85%)}

/* 19 Chevron Rise: the tile is one chevron in each of two staggered slots, so a 160px rise lands on itself */
.bgx[data-bg="chevrons"]{background:radial-gradient(700px 520px at 50% 50%,rgba(0,255,163,.05),transparent 70%),#111416}
.bgx[data-bg="chevrons"] .bgx_a{inset:0 0 -160px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%2300FFA3' stroke-opacity='.15' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M26 52l14-14 14 14'/%3E%3Cpath d='M106 132l14-14 14 14'/%3E%3C/g%3E%3C/svg%3E") 0 0/160px 160px;
  animation:bgxRise 14s linear infinite;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 20%,transparent 100%);mask-image:radial-gradient(70% 70% at 50% 50%,#000 20%,transparent 100%)}

/* 20 Chevron Mark */
.bgx[data-bg="chevron-mark"]{background:radial-gradient(900px 700px at 80% 50%,#172023,#0A0C0D)}

/* 21 Light Beam */
.bgx[data-bg="beam"]{background:radial-gradient(900px 640px at 50% 50%,#15191B,#090B0C)}
.bgx[data-bg="beam"] .bgx_a{inset:-40% auto -40% 0;width:34%;
  background:linear-gradient(90deg,transparent,rgba(170,255,225,.09) 50%,transparent);
  animation:bgxBeam 16s cubic-bezier(.5,0,.5,1) infinite}

/* 22 Glass Panes (SVG) */
.bgx[data-bg="panes"]{background:radial-gradient(620px 480px at 50% 50%,rgba(0,255,163,.06),transparent 70%),radial-gradient(1000px 760px at 50% 40%,#171B1E,#0A0C0E)}

/* 23 Soft Tiles: a bevel per tile (light top left, shade bottom right) and a dark gutter */
.bgx[data-bg="tiles"]{background:#1D2023}
.bgx[data-bg="tiles"]::before{content:"";background:
  linear-gradient(90deg,rgba(0,0,0,.32) 0 4px,transparent 4px) -2px 0/112px 112px,
  linear-gradient(rgba(0,0,0,.32) 0 4px,transparent 4px) 0 -2px/112px 112px,
  linear-gradient(135deg,rgba(255,255,255,.045),transparent 45%,transparent 55%,rgba(0,0,0,.2)) 0 0/112px 112px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 25%,transparent 100%);mask-image:radial-gradient(70% 70% at 50% 50%,#000 25%,transparent 100%)}

/* 24 Circuit (SVG) */
.bgx[data-bg="circuit"]{background:radial-gradient(900px 640px at 50% 50%,#121719,#080A0B)}

/* 25 Starfield: three sparse tiles of crisp points, two of them twinkling out of step */
.bgx[data-bg="stars"]{background:radial-gradient(1000px 700px at 50% 0,#0F151B,#06070A)}
.bgx[data-bg="stars"]::before{content:"";background:
  radial-gradient(circle at 37px 61px,rgba(255,255,255,.5) .8px,transparent 1.3px) 0 0/173px 173px,
  radial-gradient(circle at 120px 20px,rgba(200,255,235,.4) .8px,transparent 1.3px) 0 0/251px 251px}
.bgx[data-bg="stars"] .bgx_a{background:radial-gradient(circle at 90px 140px,rgba(255,255,255,.75) 1px,transparent 1.6px) 0 0/337px 337px;
  animation:bgxTwinkle 5s ease-in-out infinite alternate}
.bgx[data-bg="stars"] .bgx_b{background:radial-gradient(circle at 210px 60px,rgba(0,255,163,.7) 1px,transparent 1.6px) 0 0/419px 419px;
  animation:bgxTwinkle 7s ease-in-out infinite alternate-reverse}

/* 26 Waveform: a 720px wave tile, rolled one tile so it lands on itself */
.bgx[data-bg="wave"]{background:linear-gradient(180deg,#0B0E10,#0E1416)}
.bgx[data-bg="wave"] .bgx_a{inset:auto -720px 4% 0;height:300px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='300'%3E%3Cg fill='none' stroke-width='1.4'%3E%3Cpath stroke='%2300FFA3' stroke-opacity='.3' d='M0 150C120 70 240 70 360 150S600 230 720 150'/%3E%3Cpath stroke='%2300FFA3' stroke-opacity='.16' d='M0 150C120 100 240 100 360 150S600 200 720 150'/%3E%3Cpath stroke='%2300DCFF' stroke-opacity='.18' d='M0 150C120 40 240 40 360 150S600 260 720 150'/%3E%3Cpath stroke='%2300DCFF' stroke-opacity='.1' d='M0 150C120 120 240 120 360 150S600 180 720 150'/%3E%3Cpath stroke='%2366BB9A' stroke-opacity='.12' d='M0 150C120 10 240 10 360 150S600 290 720 150'/%3E%3C/g%3E%3C/svg%3E") 0 0/720px 300px repeat-x;
  animation:bgxRoll 30s linear infinite;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}

/* 27 Bar Skyline + 28 Rising Line (SVG) */
.bgx[data-bg="skyline"]{background:radial-gradient(1000px 700px at 50% 30%,#151A1C,#08090A)}
.bgx[data-bg="graph"]{background:radial-gradient(1000px 700px at 60% 30%,#131819,#08090A)}

/* 29 Diagonal Split */
.bgx[data-bg="split"]{background:linear-gradient(118deg,#1A1D20 0 54%,rgba(102,187,154,.4) 54%,rgba(102,187,154,.4) calc(54% + 1px),#0A1916 calc(54% + 1px))}
.bgx[data-bg="split"]::before{content:"";background:radial-gradient(800px 600px at 80% 70%,rgba(0,255,163,.06),transparent 70%)}

/* 30 Plain Graphite */
.bgx[data-bg="plain"]{background:radial-gradient(85% 75% at 50% 42%,#24282C,#0B0C0E)}

/* 31 Seafoam Wash */
.bgx[data-bg="seafoam"]{background:radial-gradient(90% 60% at 50% 0,rgba(102,187,154,.2),transparent 70%),linear-gradient(180deg,#0E211C,#090D0D 55%,#060708)}

/* 32 Breathing Light */
.bgx[data-bg="breathe"]{background:#0A0D0F}
.bgx[data-bg="breathe"] .bgx_a{inset:auto;left:50%;top:50%;width:1300px;height:1100px;margin:-550px 0 0 -650px;
  background:radial-gradient(closest-side,rgba(0,255,163,.15),rgba(0,255,163,.1) 25%,rgba(0,255,163,.05) 55%,rgba(0,255,163,.015) 80%,transparent);
  animation:bgxBreathe 9s ease-in-out infinite alternate}

/* 33 Ripple: three rings, a third of a loop apart */
.bgx[data-bg="ripple"]{background:radial-gradient(900px 640px at 50% 50%,#121618,#08090A)}
.bgx[data-bg="ripple"] .bgx_a,.bgx[data-bg="ripple"] .bgx_b,.bgx[data-bg="ripple"]::after{content:"";inset:auto;left:50%;top:50%;width:1500px;height:1500px;margin:-750px 0 0 -750px;
  border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(0,255,163,.42);animation:bgxRipple 12s cubic-bezier(.2,.6,.4,1) infinite}
.bgx[data-bg="ripple"] .bgx_b{animation-delay:-4s}
.bgx[data-bg="ripple"]::after{animation-delay:-8s}

/* the full-size page's strip: which one this is, and the way to the next */
.bgp{position:fixed;z-index:5;top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;
  max-width:calc(100vw - 24px);padding:7px 14px;border-radius:100px;background:rgba(10,13,14,.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  font:500 12px/1.4 'Schibsted Grotesk',system-ui,sans-serif;color:#D3DBD9}
.bgp[hidden]{display:none}
.bgp_name b{font:600 12px 'Azeret Mono',monospace;color:#00FFA3;margin-right:4px}
.bgp_of,.bgp_hint{color:#8E9997}
.bgp_keys{display:flex;gap:14px;align-items:center}
.bgp_link{color:#F1F5F4;text-decoration:none}
.bgp_link:hover{color:#00FFA3}
@media (max-width:640px){.bgp_hint{display:none}}