.rua-chart .rua-hero-root { color: #151617; -webkit-font-smoothing: antialiased; }
.rua-chart .rua-hero-head { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.1px; }
.rua-chart .rua-hero-head em { font-style: normal; color: #A56D42; }
.rua-chart .rua-hero-key { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 12px; line-height: 1.5; color: #151617; }
.rua-chart .rua-hero-kitem { white-space: nowrap; }
.rua-chart .rua-hero-kitem i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }


.rua-chart .rua-hero-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
.rua-chart .rua-hero-umb { grid-column: 2 / span 2; grid-row: 1; padding: 0 0 12px 18px; }
.rua-chart .rua-hero-umbt { font-size: 12.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: #A56D42; }
.rua-chart .rua-hero-umbt span { margin-left: 7px; font-size: 11.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #6B6E71; }
.rua-chart .rua-hero-brace { margin-top: 6px; height: 8px; border: 2px solid #A56D42; border-bottom: none; border-radius: 3px 3px 0 0; }
.rua-chart .rua-hero-cell { padding: 0 18px; min-width: 0; }
.rua-chart .rua-hero-c1 { grid-column: 1; padding-left: 0; }
.rua-chart .rua-hero-c2 { grid-column: 2; border-left: 1px solid #E2E2DE; }
.rua-chart .rua-hero-c3 { grid-column: 3; border-left: 1px solid #E2E2DE; padding-right: 0; }
.rua-chart .rua-hero-top { grid-row: 2; }
.rua-chart .rua-hero-plot { grid-row: 3; padding-top: 16px; }
.rua-chart .rua-hero-gcell { grid-row: 4; display: flex; padding-top: 14px; }

.rua-chart .rua-hero-lab { font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: #A56D42; }
.rua-chart .rua-hero-name { margin-top: 2px; font-size: 16.5px; font-weight: 600; line-height: 1.25; }
.rua-chart .rua-hero-hack { margin-top: 5px; font-size: 13.5px; line-height: 1.4; color: #46504B; }
.rua-chart .rua-hero-cap { font-size: 11.5px; color: #6B6E71; white-space: nowrap; }
.rua-chart .rua-hero-plot svg { display: block; width: 100%; height: auto; margin-top: 2px; overflow: visible; }
.rua-chart .rua-hero-plot svg text { font-family: inherit; }
.rua-chart .rua-hero-val { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rua-chart .rua-hero-refval { font-size: 11px; font-weight: 500; }
.rua-chart .rua-hero-valsm { font-size: 11px; }
.rua-chart .rua-hero-ckey { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 1px 10px; font-size: 11px; line-height: 1.5; color: #46504B; }
.rua-chart .rua-hero-ckey span { white-space: nowrap; }
.rua-chart .rua-hero-ckey i { display: inline-block; width: 9px; height: 9px; margin-right: 4px; border-radius: 2px; vertical-align: 0; }
.rua-chart .rua-hero-ckey i.rua-hero-dash { width: 13px; height: 0; border-radius: 0; border-top: 1.5px dashed #6B6E71; vertical-align: 3px; }
.rua-chart .rua-hero-anim .rua-hero-base { opacity: 0; transition: opacity 0.4s ease; }
.rua-chart .rua-hero-anim .rua-hero-on .rua-hero-base { opacity: 1; }
.rua-chart .rua-hero-glab { font-size: 11.5px; font-weight: 600; fill: #151617; }
.rua-chart .rua-hero-sub { font-size: 10.5px; fill: #6B6E71; }
.rua-chart .rua-hero-guide { flex: 1; padding: 10px 12px 11px; border-radius: 8px; background: #EAF1EC; }
.rua-chart .rua-hero-guide .rua-hero-glab { font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: #406D5C; }
.rua-chart .rua-hero-gtext { margin-top: 3px; font-size: 13px; line-height: 1.4; color: #2F5244; }


@media (max-width: 640px) {
  .rua-chart .rua-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .rua-chart .rua-hero-umb, .rua-chart .rua-hero-cell { grid-column: 1; grid-row: auto; padding-left: 0; padding-right: 0; border-left: none; }
  .rua-chart .rua-hero-umb, .rua-chart .rua-hero-c2, .rua-chart .rua-hero-c3 { border-left: 3px solid #A56D42; padding-left: 14px; }
  .rua-chart .rua-hero-umb { padding-top: 22px; padding-bottom: 0; }
  .rua-chart .rua-hero-brace { display: none; }
  .rua-chart .rua-hero-top { padding-top: 22px; }
  .rua-chart .rua-hero-plot svg { max-width: 260px; }
  .rua-chart .rua-hero-top.rua-hero-c1 { order: 1; } .rua-chart .rua-hero-plot.rua-hero-c1 { order: 2; } .rua-chart .rua-hero-gcell.rua-hero-c1 { order: 3; }
  .rua-chart .rua-hero-umb { order: 4; }
  .rua-chart .rua-hero-top.rua-hero-c2 { order: 5; } .rua-chart .rua-hero-plot.rua-hero-c2 { order: 6; } .rua-chart .rua-hero-gcell.rua-hero-c2 { order: 7; }
  .rua-chart .rua-hero-top.rua-hero-c3 { order: 8; } .rua-chart .rua-hero-plot.rua-hero-c3 { order: 9; } .rua-chart .rua-hero-gcell.rua-hero-c3 { order: 10; }
}


.rua-chart .rua-hero-anim .rua-hero-bar {
  transform-box: fill-box;
  transform-origin: center bottom;
  transform: scaleY(0);
  transition: transform 0.75s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.rua-chart .rua-hero-anim .rua-hero-val { opacity: 0; transition: opacity 0.3s ease; }
.rua-chart .rua-hero-anim .rua-hero-on .rua-hero-bar { transform: none; }
.rua-chart .rua-hero-anim .rua-hero-on .rua-hero-val { opacity: 1; }
.rua-chart .rua-hero-anim .rua-hero-guide { opacity: 0; transform: translateY(6px); transition: opacity 0.45s ease, transform 0.45s ease; }
.rua-chart .rua-hero-anim .rua-hero-gcell.rua-hero-on .rua-hero-guide { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rua-chart .rua-hero-root * { transition: none !important; transform: none !important; opacity: 1 !important; }
}
.rua-chart .rua-hero-snap, .rua-chart .rua-hero-snap * { transition: none !important; }