.reading-page { max-width: 48rem; padding-block: 3.5rem 5rem; }
.reading-page h1, .example-page h1 { font-size: clamp(2rem, 3vw, 3rem); letter-spacing: -.025em; }
.page-lede { margin-top: 1rem; color: var(--muted); font-size: var(--lm-font-size-lg); }
.reading-page section { margin-top: 2.25rem; scroll-margin-top: 6rem; }
.reading-page h2 { margin-bottom: .75rem; font-size: var(--lm-font-size-xl); scroll-margin-top: 6rem; }
.reading-page p + p { margin-top: .75rem; }
.example-page { padding-block: 3rem 4rem; }
.example-workbench { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: 2.5rem; align-items: start; }
.example-workbench h2 { font-size: var(--lm-font-size-xl); }
.example-context { margin-top: .75rem; color: var(--muted); }
.example-inputs fieldset { display: flex; flex-wrap: wrap; gap: 1.5rem; border: 0; padding: 1.5rem 0; margin: 0; }
.example-inputs legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.example-inputs label { display: grid; gap: .5rem; font-weight: 600; flex: 1; }
.example-inputs select { min-height: 3rem; padding: .5rem 1rem; border: 1px solid var(--rack-edge); border-radius: var(--lm-radius-control); font: inherit; color: var(--ink); background: var(--surface); font-variant-numeric: tabular-nums; }
.example-page .btn { border: 0; cursor: pointer; }
.example-page button:disabled { opacity: .55; cursor: wait; }
.example-readings { margin-top: 1.5rem; border-top: 1px solid var(--line); }
.example-readings summary, .example-report summary { padding-block: 1rem; color: var(--ink); cursor: pointer; font-weight: 600; }
.example-readings table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.example-readings th, .example-readings td { text-align: left; padding: .4rem .75rem; border-bottom: 1px solid var(--line); }
.example-readings tbody th { font-weight: 400; color: var(--muted); }
.example-output { background: var(--surface); border: 1px solid var(--line); border-radius: var(--lm-radius-md); padding: 1.75rem; }
.example-verdict { padding: .75rem 1rem; margin-block: 1rem; font-weight: 600; border: 1px solid transparent; border-radius: var(--lm-radius-sm); }
.example-verdict.met { background: #eff6f0; color: #2b643f; }
.example-verdict.not-met { border-color: #a84743; color: #8e3632; }
.example-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; margin-block: 1.25rem 1.75rem; font-variant-numeric: tabular-nums; }
.example-metrics dt { color: var(--muted); font-size: var(--lm-font-size-sm); }
.example-metrics dd { margin-top: .25rem; color: var(--ink); font-size: var(--lm-font-size-xl); font-weight: 500; }
.example-metrics dd span { font-size: var(--lm-font-size-sm); font-weight: 400; }
#example-feedback:not(:empty) { margin-block: 1rem; }
.example-report { margin-top: 2.5rem; border-block: 1px solid var(--rack-edge); }
.example-report-actions { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; margin-block: .25rem 1rem; }
.example-report iframe { display: block; width: 100%; height: 70rem; border: 1px solid var(--line); background: white; margin-bottom: 1rem; }
.example-report iframe[hidden] { visibility: hidden; }
#example-report-feedback:not(:empty) { margin-bottom: 1rem; }
[aria-disabled="true"] { pointer-events: none; opacity: .55; }
@media (max-width: 62rem) { .example-workbench { grid-template-columns: 1fr; gap: 2rem; } }