.cbg {
	--cbg-ink: #1b1a19; --cbg-muted: #6d6662; --cbg-line: #c9c1bd; --cbg-red: #e2141b;
	--cbg-ocean: #dfe3e6; --cbg-ocean-edge: #aab2b8; --cbg-land: #4e4a48; --cbg-land-stroke: #6f6a67;
	--cbg-tag-bg: #fff; --cbg-halo: #f7f4f3;
	container-type: inline-size;
	/* як внутрішня обгортка розділу Spectra: до 1200px по центру, колонка блоків з проміжком 20px */
	display: flex; flex-direction: column; row-gap: 20px; width: 100%; max-width: min(100%, 1200px); margin-inline: auto;
}
/* як сам розділ Spectra: на всю ширину, 10px зверху й з боків, 70px знизу */
.cbg-section { box-sizing: border-box; padding: 10px 10px 70px; }
.cbg > * { width: 100%; }
.cbg-stage { position: relative; display: grid; grid-template-columns: 1fr minmax(260px, 480px) 1fr; align-items: center; gap: 20px; }
.cbg-col { display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 2; min-width: 0; }
.cbg-left { align-items: flex-end; }
.cbg-right { align-items: flex-start; }
.cbg-tag { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; row-gap: 4px;
	background: var(--cbg-tag-bg); border: 1px solid var(--cbg-line); border-radius: 4px; padding: 7px 12px 7px 10px;
	min-width: 190px; cursor: pointer; font: inherit; color: inherit; text-align: left; letter-spacing: normal;
	text-transform: none; line-height: 1.3; box-shadow: none; transition: border-color .2s, opacity .3s; }
.cbg-tag:hover, .cbg-tag:focus-visible, .cbg-tag.is-active { border-color: var(--cbg-red); background: var(--cbg-tag-bg); color: inherit; }
.cbg-tag:focus-visible { outline: 2px solid var(--cbg-red); outline-offset: 2px; }
.cbg-tag.is-back { opacity: .45; }
.cbg-pct { font-weight: 700; font-size: 17px; color: var(--cbg-red); font-variant-numeric: tabular-nums; min-width: 4.4ch; text-align: right; }
.cbg-name { font-weight: 600; font-size: 14px; }
.cbg-bar { grid-column: 2; height: 3px; background: var(--cbg-ocean); border-radius: 2px; overflow: hidden; }
.cbg-bar i { display: block; height: 100%; background: var(--cbg-red); }
.cbg-globe { position: relative; width: 100%; aspect-ratio: 1; max-width: 100%; }
.cbg-globe svg { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.cbg-globe svg:active { cursor: grabbing; }
.cbg-globe svg text { pointer-events: none; }
.cbg-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
/* без JS або до завантаження: просто список */
.cbg:not(.is-ready) .cbg-globe { display: none; }
.cbg:not(.is-ready) .cbg-stage { grid-template-columns: 1fr 1fr; }
.cbg:not(.is-ready) .cbg-col { align-items: stretch; }
@container (max-width: 860px) {
	.cbg .cbg-globe { order: -1; max-width: 420px; margin: 0 auto; }
	.cbg .cbg-stage { grid-template-columns: 1fr 1fr; column-gap: 14px; }
	.cbg .cbg-globe { grid-column: 1 / -1; }
	.cbg .cbg-col { align-items: stretch; }
	.cbg .cbg-tag { min-width: 0; }
	.cbg .cbg-lines { display: none; }
}
@container (max-width: 480px) {
	.cbg .cbg-stage { grid-template-columns: 1fr; }
}