.article-page .metrics-lanes{display:grid;grid-template-columns:auto minmax(0,1fr);grid-gap:var(--cf-space-150) var(--cf-space-200);gap:var(--cf-space-150) var(--cf-space-200);align-items:center}.article-page .metrics-lane-label{color:var(--cf-color-text-secondary);font-family:var(--cf-font-mono);font-size:var(--cf-font-size-200)}.article-page .metrics-lane{position:relative;block-size:var(--cf-space-400);border-radius:var(--cf-radius-050);background:var(--cf-color-surface-raised)}.article-page .metrics-lane.is-stacked{block-size:var(--cf-space-800)}.article-page .metrics-tick{position:absolute;inset-block:0;inline-size:var(--cf-space-050);background:var(--cf-color-primary-solid)}.article-page .metrics-tick.is-screen{background:var(--cf-color-success)}.article-page .metrics-bar{position:absolute;block-size:30%;border-radius:var(--cf-radius-050);background:var(--cf-color-warning)}.article-page .metrics-bar.is-partial{background:var(--cf-color-danger)}.article-page .metrics-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:var(--cf-space-100) var(--cf-space-300);gap:var(--cf-space-100) var(--cf-space-300);margin:0;-webkit-padding-start:var(--cf-space-400);padding-inline-start:var(--cf-space-400);font-size:var(--cf-font-size-200)}.article-page .metrics-list li{display:flex;justify-content:space-between;gap:var(--cf-space-200)}.article-page .metrics-list span{font-family:var(--cf-font-mono);white-space:nowrap}@media(max-width:560px){.article-page .metrics-lanes,.article-page .metrics-list{grid-template-columns:minmax(0,1fr)}}