.interactive-figure { margin: 26px 0 30px; }
.interactive-content[hidden] { display: none; }
.charts-ready > .chart-fallback .figure-link { display: none; }
.charts-ready > .chart-fallback { margin: 16px 0 0; }
.charts-ready > .source-fallback { display: none; }
.chart-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 17px; }
.chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 15px; margin: 0 0 22px; }
.chart-legend button { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid transparent; border-radius: 7px; color: #424b55; padding: 5px 7px; font-size: 13px; cursor: pointer; transition: background .15s; }
.chart-legend button:hover { background: #eaf0f4; }
.chart-legend button[aria-pressed="false"] { color: #949aa1; text-decoration: line-through; }
.chart-legend button[aria-pressed="false"] svg { opacity: .3; }
.chart-legend svg { width: 26px; height: 12px; flex: none; }
.chart-legend button[data-model="tuned"], .chart-legend button[data-model="qwen-v3-clean"] { font-weight: 700; }
.chart-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.chart-card { min-width: 0; padding: 20px 17px 15px; border: 1px solid #e4e9ee; border-radius: 12px; background: #fff; }
.chart-card h4 { margin: 0 0 14px; font-size: 16px; font-weight: 600; color: #344453; }
.chart-surface { position: relative; width: 100%; height: 280px; }
.chart-surface canvas { width: 100%; height: 100%; max-width: 100%; max-height: 100%; }
.chart-surface canvas:focus-visible { outline-offset: 3px; border-radius: 4px; }
.chart-card.radar .chart-surface { height: 345px; }
.chart-card.bars .chart-surface { height: 300px; }
.chart-grid.realworld-grid { grid-template-columns: 1fr; }
.chart-grid.sources-grid { grid-template-columns: 1.35fr 1fr; }
.chart-card.sources .chart-surface { height: 345px; }
.chart-card.pie .chart-surface { height: 310px; }
.chart-card.pie { display: flex; flex-direction: column; }
.chart-total { margin: auto 0 0; text-align: center; color: #606e7b; font-size: 14px; padding-top: 8px; }
.chart-total strong { color: #254157; font-size: 22px; margin-right: 5px; }
.chart-segments { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid #dfe5eb; background: #fff; border-radius: 999px; }
.chart-segments button { border: 0; background: transparent; border-radius: 999px; padding: 7px 17px; color: #687681; font-size: 14px; cursor: pointer; }
.chart-segments button[aria-pressed="true"] { background: #187aa5; color: #fff; }
.chart-data { margin-top: 16px; font-size: 13px; color: #687580; }
.chart-data:not([open]) > :not(summary), .source-fallback:not([open]) > :not(summary) { display: none; }
.chart-data summary, .source-fallback summary { cursor: pointer; width: fit-content; }
.chart-table-scroll { max-height: 340px; overflow: auto; margin-top: 12px; border: 1px solid #e1e7ed; border-radius: 8px; background: #fff; }
.chart-table-scroll table { border-collapse: collapse; width: 100%; white-space: nowrap; font-size: 12px; }
.chart-table-scroll caption { text-align: left; padding: 10px 12px; color: #526576; }
.chart-table-scroll th, .chart-table-scroll td { padding: 7px 12px; border-bottom: 1px solid #edf0f3; text-align: right; }
.chart-table-scroll th:first-child, .chart-table-scroll td:first-child { text-align: left; }
.chart-table-scroll thead th { background: #f3f6f9; position: sticky; top: 0; }
.chart-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip: rect(0,0,0,0); overflow: hidden; white-space: nowrap; border: 0; }
.dataset-explorer { margin: 38px 0 50px; }
.dataset-explorer > h3 { text-align: center; }
@media (max-width: 650px) {
  .chart-grid, .chart-grid.sources-grid { grid-template-columns: 1fr; gap: 14px; }
  .chart-card { padding: 17px 12px 14px; }
  .chart-surface, .chart-card.bars .chart-surface { height: 290px; }
  .chart-card.radar .chart-surface { height: 300px; }
  .chart-legend { gap: 3px 6px; justify-content: flex-start; margin-bottom: 16px; }
  .chart-legend button { font-size: 11px; padding: 6px 4px; }
  .chart-toolbar { align-items: flex-start; }
  .chart-segments button { padding: 7px 12px; }
}