/* Scoped replacement of the financial theatre's sphere; all other orbs stay intact. */
#financial-charts { scroll-margin-top: 105px; }
.value-chart-theatre { min-height: 490px; }
.value-chart-theatre::before { opacity: .13; mask-image: none; }
.value-chart-theatre::after { display: none; }
.value-chart-theatre .value-theatre-head { color: #919aae; }
.value-chart-stage { position: absolute; z-index: 3; inset: 65px 28px 122px; display: flex; flex-direction: column; gap: 16px; }
.value-chart-summary { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.value-chart-summary small { display: block; margin-bottom: 10px; color: #adb9e9; font-size: 11px; letter-spacing: .08em; }
.value-chart-summary strong { display: block; color: #f4f5fb; font-size: clamp(38px, 3.7vw, 58px); font-weight: 500; line-height: 1; letter-spacing: -.065em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.value-chart-context { padding-bottom: 3px; text-align: right; white-space: nowrap; }
.value-chart-context p { margin: 0 0 8px; color: #d3d9e7; font-size: 10px; }
.value-chart-context span { color: #9ea8be; font-size: 10px; }
.value-chart-plot { flex: 1; min-height: 0; }
.value-chart-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.value-chart-plot svg text { fill: #e5e9f5; font-family: inherit; font-size: 15px; font-variant-numeric: tabular-nums; }
.value-chart-plot .chart-axis { fill: #a0abbe; font-size: 13px; }
.value-chart-plot .chart-label { font-size: 15px; }
.value-chart-plot .chart-value { fill: #f2f4fc; font-size: 20px; font-weight: 550; }
.value-chart-plot .chart-callout { fill: #dac5a4; font-size: 23px; font-weight: 550; }
.chart-grid { stroke: #a4b1d6; stroke-opacity: .12; stroke-width: 1; }
.chart-connector { stroke: #a6b5df; stroke-opacity: .4; stroke-width: 1; stroke-dasharray: 4 4; }
.chart-focus-line { stroke: #d6be97; stroke-width: 2; }
.chart-tick { stroke: #9aa8c4; stroke-opacity: .6; stroke-width: 1; }
.chart-track { fill: #242d3f; }
.chart-mark { transform-box: fill-box; animation-duration: 450ms; animation-delay: var(--chart-delay, 0ms); animation-timing-function: cubic-bezier(.16,.84,.24,1); animation-fill-mode: both; }
.chart-expand { transform-origin: left center; animation-name: valueChartExpand; }
.chart-rise { transform-origin: center bottom; animation-name: valueChartRise; }
.chart-reveal { animation: valueChartReveal 450ms ease both; }
.value-chart-plot svg { animation: valueChartEnter 360ms cubic-bezier(.16,.84,.24,1) both; }
.value-chart-foot { position: absolute; z-index: 3; bottom: 103px; left: 28px; right: 28px; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #929eb5; font-size: 9px; }
.value-chart-foot > span:first-child { flex-shrink: 0; letter-spacing: .12em; }
.value-chart-foot b { color: #d0d8f4; font-weight: 500; }
.value-chart-foot > span:last-child { text-align: right; }
.value-chart-delivery .value-rail button { transition-duration: 160ms; }
.value-chart-delivery .value-rail button::after { transition-duration: 300ms; }
.value-chart-delivery .value-rail button:focus-visible { outline: 2px solid #d6be97; outline-offset: -4px; }
.value-chart-delivery.is-switching .value-detail { opacity: 1; filter: none; transform: none; }
.value-chart-fallback { color: #c0c9e9; font-size: 16px; line-height: 2; }
@keyframes valueChartExpand { from { transform: scaleX(.015); opacity: .3; } to { transform: scaleX(1); opacity: 1; } }
@keyframes valueChartRise { from { transform: scaleY(.015); opacity: .3; } to { transform: scaleY(1); opacity: 1; } }
@keyframes valueChartReveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes valueChartEnter { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@media (max-width: 1100px) {
  .value-chart-theatre { min-height: 490px; }
  .value-chart-summary strong { font-size: 48px; }
}
@media (max-width: 600px) {
  .value-chart-theatre { min-height: 440px; }
  .value-chart-stage { inset: 65px 16px 117px; gap: 10px; }
  .value-chart-summary strong { font-size: 38px; }
  .value-chart-summary small { font-size: 10px; }
  .value-chart-context p, .value-chart-context span { font-size: 9px; }
  .value-chart-foot { left: 16px; right: 16px; bottom: 95px; font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .value-chart-plot svg, .chart-mark, .chart-reveal { animation: none; }
}