.diagnostic-guide .diagnostic-charts {
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:48px;
 padding:8px 0 16px;
}
.diagnostic-charts .diagnostic-metric {
 min-width:0;
 margin:0;
 padding-top:24px;
 border-top:1px solid #ffffff35;
}
.diagnostic-charts .diagnostic-metric figcaption {
 display:flex;
 align-items:baseline;
 justify-content:space-between;
 gap:16px;
 margin:0 0 28px;
 color:#fff;
 font:500 18px/1.5 Inter,Arial,sans-serif;
}
.diagnostic-metric output {
 flex-shrink:0;
 color:#c6c6c6;
 font:400 13px/1.5 Inter,Arial,sans-serif;
 font-variant-numeric:tabular-nums;
}
.diagnostic-charts .diagnostic-bars { display:grid; gap:20px; }
.diagnostic-charts .diagnostic-bar-row {
 display:grid;
 grid-template-columns:46px minmax(0,1fr) 48px;
 align-items:center;
 gap:12px;
 font:400 13px/1.5 Inter,Arial,sans-serif;
}
.diagnostic-bar-row > span { color:#bcbcbc; }
.diagnostic-bar-row > strong {
 text-align:right;
 color:#fff;
 font-size:14px;
 font-weight:500;
 font-variant-numeric:tabular-nums;
}
.diagnostic-charts .diagnostic-bar-track {
 height:14px;
 background:#ffffff0d;
 border-radius:2px;
 overflow:hidden;
}
.diagnostic-charts .diagnostic-bar-track b {
 height:100%;
 border-radius:2px;
 transition:width 450ms cubic-bezier(.22,1,.36,1);
}
.diagnostic-charts .diagnostic-bar-track .before { background:#737373; }
.diagnostic-charts .diagnostic-bar-track .after { background:#f5f5f5; }
.diagnostic-charts .diagnostic-chart-axis {
 display:flex;
 justify-content:space-between;
 margin:14px 60px 0 58px;
 padding-top:8px;
 border-top:1px solid #ffffff1f;
 color:#aaa;
 font:400 11px/1.5 Inter,Arial,sans-serif;
 font-variant-numeric:tabular-nums;
}
.diagnostic-guide .diagnostic-charts + .chart-key { margin:16px 0 36px; }
@media(max-width:767px) {
 .diagnostic-guide .diagnostic-charts { grid-template-columns:minmax(0,1fr); gap:32px; }
 .diagnostic-charts .diagnostic-metric figcaption { font-size:16px; margin-bottom:24px; }
 .diagnostic-charts .diagnostic-bar-row { grid-template-columns:44px minmax(0,1fr) 44px; gap:10px; }
 .diagnostic-charts .diagnostic-chart-axis { margin-right:54px; margin-left:54px; }
}
@media(prefers-reduced-motion:reduce) {
 .diagnostic-charts .diagnostic-bar-track b { transition:none; }
}