.native-chart-group { margin: 22px 0 30px; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 32px; }
.chart-grid.single { grid-template-columns: minmax(0, 1fr); }
.chart-grid.six { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 30px; }
.chart-grid.six .native-plot { height: 215px; }
.chart-panel { min-width: 0; }
.chart-panel h4 { font-size: .86rem; font-weight: 400; line-height: 1.45; text-align: center; margin: 0 0 10px; }
.chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font-size: .9rem; line-height: 1.5; margin: 0 0 22px; }
.chart-legend.six-keys { display: grid; grid-template-columns: repeat(6, max-content); justify-content: center; gap: 8px 22px; }
.chart-legend-item { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.chart-key { display: block; flex: 0 0 36px; width: 36px; height: 16px; overflow: visible; }
.chart-key.point-key { flex-basis: 16px; width: 16px; }
.legend-dot { stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.native-plot { width: 100%; height: 240px; display: block; overflow: visible; }
.native-plot text { font-family: inherit; font-size: 13px; fill: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.native-plot .plot-grid { stroke: #292929; stroke-width: 1; }
.native-plot .plot-axis { stroke: #454545; stroke-width: 1; }
.native-plot .plot-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.native-plot .plot-interval { fill: none; stroke-width: 1; opacity: .65; }
.native-plot .plot-dot { stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.native-plot .model-label { font-size: 15px; }
.native-plot .score-value { font-size: 14px; }
.chart-x-label { font-size: .86rem; text-align: center; margin-top: 12px; }
.chart-footnote { text-align: center; font-size: .8rem; line-height: 1.5; margin-top: 8px; }
.router-scores { width: min(100%, 460px); min-width: 0; margin-inline: auto; }
.router-scores th, .router-scores td { padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 900px) {
  .chart-grid.six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 740px) {
  .chart-legend.six-keys { grid-template-columns: repeat(3, max-content); }
}
@media (max-width: 600px) {
  .chart-grid, .chart-grid.six { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .chart-grid.six .native-plot { height: 240px; }
  .chart-legend { gap: 8px 20px; }
  .native-plot .model-label { font-size: 14px; }
}
@media (max-width: 380px) {
  .chart-legend.six-keys { grid-template-columns: repeat(2, max-content); justify-content: center; column-gap: 24px; }
}
@media print {
  .chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-panel { break-inside: avoid; }
  .native-plot text { fill: #222; }
  .native-plot .plot-dot { fill: white; }
}