.article-page .font-optimization-lesson .fo-rows{display:grid;grid-gap:var(--cf-space-150);gap:var(--cf-space-150);margin:0 0 var(--cf-space-300);list-style:none;font-size:var(--cf-font-size-325)}.article-page .font-optimization-lesson .fo-rows li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-gap:var(--cf-space-200);gap:var(--cf-space-200);align-items:baseline;-webkit-padding-start:var(--cf-space-150);padding-inline-start:var(--cf-space-150);-webkit-border-start:2px solid var(--cf-color-border);border-inline-start:2px solid var(--cf-color-border)}.article-page .font-optimization-lesson .fo-rows li[data-kind=strong]{border-inline-start-color:var(--cf-color-primary-solid)}.article-page .font-optimization-lesson .fo-label{color:var(--cf-color-text-secondary);overflow-wrap:anywhere}.article-page .font-optimization-lesson .fo-value{font-family:var(--cf-font-mono);text-align:end;overflow-wrap:anywhere}.article-page .font-optimization-lesson .fo-frames{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));grid-gap:var(--cf-space-200);gap:var(--cf-space-200);margin:0 0 var(--cf-space-300);padding:0;list-style:none}.article-page .font-optimization-lesson .fo-frames li{display:grid;grid-gap:var(--cf-space-050);gap:var(--cf-space-050);font-size:var(--cf-font-size-300);color:var(--cf-color-text-secondary)}.article-page .font-optimization-lesson .fo-frames img{display:block;width:100%;height:auto;border:1px solid var(--cf-color-border);border-radius:var(--cf-radius-100);background:var(--cf-color-surface)}.article-page .font-optimization-lesson .fo-slider,.article-page .font-optimization-lesson .fo-text-input{display:grid;grid-gap:var(--cf-space-100);gap:var(--cf-space-100);max-width:28rem;font-size:var(--cf-font-size-325)}.article-page .font-optimization-lesson .fo-slider input{width:100%}.article-page .font-optimization-lesson .fo-text-input input{width:100%;padding:var(--cf-space-100) var(--cf-space-150);border:1px solid var(--cf-color-border);border-radius:var(--cf-radius-100);background:var(--cf-color-surface);color:var(--cf-color-text-strong);font:inherit}.article-page .font-optimization-lesson .fo-sample{margin:0 0 var(--cf-space-300);font-size:var(--cf-font-size-550);color:var(--cf-color-text-strong);overflow-wrap:anywhere}.article-page .font-optimization-lesson .fo-bars{display:grid;grid-gap:var(--cf-space-200);gap:var(--cf-space-200);margin:0 0 var(--cf-space-300);padding:0;list-style:none;font-size:var(--cf-font-size-325)}.article-page .font-optimization-lesson .fo-bars li{display:grid;grid-template-columns:9rem minmax(0,1fr) 9rem;grid-gap:var(--cf-space-200);gap:var(--cf-space-200);align-items:center}.article-page .font-optimization-lesson .fo-bar-name{color:var(--cf-color-text-secondary)}.article-page .font-optimization-lesson .fo-bar-track{display:block;min-height:var(--cf-space-300);border:1px solid var(--cf-color-border);border-radius:var(--cf-radius-050);background:var(--cf-color-surface-sunken)}.article-page .font-optimization-lesson .fo-bar-fill{display:block;min-height:var(--cf-space-300);border-radius:var(--cf-radius-050);background:var(--cf-color-primary-solid)}.article-page .font-optimization-lesson .fo-bar-value{font-family:var(--cf-font-mono);text-align:end}@media(max-width:560px){.article-page .font-optimization-lesson .fo-bars li,.article-page .font-optimization-lesson .fo-rows li{grid-template-columns:minmax(0,1fr);gap:var(--cf-space-050)}.article-page .font-optimization-lesson .fo-bar-value,.article-page .font-optimization-lesson .fo-value{text-align:start}}