.bgr{--brass:#A79976;--ice:#CFE0FF;--midnight:#0E1226;--electric:#2C59E6;--electric-soft:#7C9BFF;--mute-d:#8F99BF;--ink:#0B0F1F;color:#EEF1F8}
.bgr { width: 100%; }
.bgr-stage { position: relative; width: 100%; height: calc(640px * var(--s, .96)); }
.bgr-stage::before { content: ""; position: absolute; inset: -6% 0; background: radial-gradient(50% 50% at 50% 50%, rgba(59,108,255,.22), transparent 72%); pointer-events: none; }
.bgr-field { position: absolute; left: 50%; top: 0; width: 860px; height: 640px; transform: translateX(-50%) scale(var(--s, .96)); transform-origin: 50% 0; }
.bgr-ln { position: absolute; height: 1px; transform-origin: 0 0; transition: opacity .6s; }
.bgr-hub { position: absolute; width: 124px; transform: translate(-50%, -8px); display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; transition: opacity .5s; }
.bgr-hdot { width: 16px; height: 16px; border-radius: 50%; background: var(--midnight); border: 2px solid var(--brass); box-sizing: border-box; }
.bgr-hname { font-size: 12px; font-weight: 700; line-height: 1.2; }
.bgr-hcount { font: 500 10px "JetBrains Mono", monospace; color: var(--brass); letter-spacing: .04em; }
.bgr-bd { position: absolute; display: inline-block; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; transform: translate(-50%, -50%); transition: opacity .4s, transform .4s, box-shadow .4s; }
.bgr-bd.b-f { background: var(--ice); } .bgr-bd.b-c { background: var(--brass); }
.bgr-bd.b-p { background: var(--brass); box-shadow: 0 0 0 2px var(--midnight), 0 0 0 3px var(--electric-soft); }
.bgr-bd.b-m { border: 1px dashed var(--mute-d); }
.bgr-bd.b-new { transform: translate(-50%, -50%) scale(1.6); box-shadow: 0 0 0 4px rgba(59,108,255,.5); }
.bgr-core { position: absolute; left: 430px; top: 320px; width: 124px; height: 124px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--ink); border: 2px solid var(--brass); box-shadow: 0 0 0 14px rgba(167,153,118,.12), 0 30px 60px rgba(0,0,0,.45); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.bgr-core b { font-size: 13px; line-height: 1.15; }
.bgr-core span { font: 500 10px "JetBrains Mono", monospace; color: var(--brass); }
.bgr-tag { position: absolute; transform: translate(-50%, calc(-100% - 14px)); padding: 8px 12px; border-radius: 9px; background: rgba(14,18,38,.88); border: 1px solid var(--electric); font-size: 13px; white-space: nowrap; box-shadow: 0 10px 30px rgba(0,0,0,.4); transition: left .4s, top .4s; }
.bgr-tag span { color: var(--mute-d); font-size: 12px; margin-left: 6px; }
.bgr-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 8px; font-size: 13px; color: var(--mute-d); justify-content: center; }
.bgr-key span { display: inline-flex; align-items: center; gap: 8px; }
.bgr-key em { font-style: normal; flex-basis: 100%; text-align: center; color: #6F79A0; }
@media (prefers-reduced-motion: reduce) { .bgr-ln, .bgr-hub, .bgr-bd, .bgr-tag { transition: none; } }
/* organic BrandGraph */
.bgr-field { height: 600px; }
.bgr-field::before { content: ""; position: absolute; inset: -40px; background-image: radial-gradient(circle, rgba(207,224,255,.14) 1.2px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(55% 55% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(55% 55% at 50% 50%, #000 30%, transparent 100%); }
.bgr-stage { height: calc(600px * var(--s, .96)); }
.bgr-cl { position: absolute; inset: 0; animation: bgr-drift 9s ease-in-out infinite alternate; }
@keyframes bgr-drift { from { transform: translate(0, 0); } to { transform: translate(var(--dx), var(--dy)); } }
.bgr-ln { background: rgba(207,224,255,.4); }
.bgr-ln.hub { background: rgba(167,153,118,.45); }
.bgr-ln.rel { height: 0; background: none; border-top: 1px dashed var(--electric-soft); transition: opacity .8s; }
.bgr-core { left: 410px; top: 300px; width: 112px; height: 112px; }
.bgr-tag { transform: none; }
@media (prefers-reduced-motion: reduce) { .bgr-cl { animation: none; } }
.bgr-tag { background: #0E1226; color: #FFFFFF; z-index: 5; } .bgr-tag b { color: #FFFFFF; } .bgr-tag span { color: #A9B1CF; }
.v-cap, .bgr-key em { color: #8F99BF; }
.bgr-hcount { color: #CDBF97; }
.bgr-stage { container-name: bgr; aspect-ratio: 860 / 600; }
.bgr-stage{container-type:inline-size;height:auto!important}
.bgr-stage{container-type:inline-size;height:auto!important}
.bgr-field{--s:.3}
@container bgr (min-width: 275px) { .bgr-field { --s: 0.32; } }
@container bgr (min-width: 292px) { .bgr-field { --s: 0.34; } }
@container bgr (min-width: 310px) { .bgr-field { --s: 0.36; } }
@container bgr (min-width: 327px) { .bgr-field { --s: 0.38; } }
@container bgr (min-width: 344px) { .bgr-field { --s: 0.4; } }
@container bgr (min-width: 361px) { .bgr-field { --s: 0.42; } }
@container bgr (min-width: 378px) { .bgr-field { --s: 0.44; } }
@container bgr (min-width: 396px) { .bgr-field { --s: 0.46; } }
@container bgr (min-width: 413px) { .bgr-field { --s: 0.48; } }
@container bgr (min-width: 430px) { .bgr-field { --s: 0.5; } }
@container bgr (min-width: 447px) { .bgr-field { --s: 0.52; } }
@container bgr (min-width: 464px) { .bgr-field { --s: 0.54; } }
@container bgr (min-width: 482px) { .bgr-field { --s: 0.56; } }
@container bgr (min-width: 499px) { .bgr-field { --s: 0.58; } }
@container bgr (min-width: 516px) { .bgr-field { --s: 0.6; } }
@container bgr (min-width: 533px) { .bgr-field { --s: 0.62; } }
@container bgr (min-width: 550px) { .bgr-field { --s: 0.64; } }
@container bgr (min-width: 568px) { .bgr-field { --s: 0.66; } }
@container bgr (min-width: 585px) { .bgr-field { --s: 0.68; } }
@container bgr (min-width: 602px) { .bgr-field { --s: 0.7; } }
@container bgr (min-width: 619px) { .bgr-field { --s: 0.72; } }
@container bgr (min-width: 636px) { .bgr-field { --s: 0.74; } }
@container bgr (min-width: 654px) { .bgr-field { --s: 0.76; } }
@container bgr (min-width: 671px) { .bgr-field { --s: 0.78; } }
@container bgr (min-width: 688px) { .bgr-field { --s: 0.8; } }
@container bgr (min-width: 705px) { .bgr-field { --s: 0.82; } }
@container bgr (min-width: 722px) { .bgr-field { --s: 0.84; } }
@container bgr (min-width: 740px) { .bgr-field { --s: 0.86; } }
@container bgr (min-width: 757px) { .bgr-field { --s: 0.88; } }
@container bgr (min-width: 774px) { .bgr-field { --s: 0.9; } }
@container bgr (min-width: 791px) { .bgr-field { --s: 0.92; } }
@container bgr (min-width: 808px) { .bgr-field { --s: 0.94; } }
@container bgr (min-width: 826px) { .bgr-field { --s: 0.96; } }
@container bgr (min-width: 843px) { .bgr-field { --s: 0.98; } }
@container bgr (min-width: 860px) { .bgr-field { --s: 1.0; } }