/* A check that has not run looks different from one that passed, which looks
   different from one that failed. The state is the first thing on the row
   because it is the only thing most readers will look at. */
.proof{padding:26px 30px 34px;max-width:780px;margin:0 auto}
.pf-head h1{margin:6px 0 12px;font-size:var(--t-h2);line-height:var(--lh-tight);letter-spacing:-.02em;font-weight:400}
.pf-lede{margin:0 0 18px;font-size:var(--t-body);line-height:var(--lh-read);max-width:62ch;opacity:.88}
.pf-run{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 24px}
.pf-go{font-size:var(--t-body);padding:10px 18px;border-radius:10px;border:1px solid currentColor;background:none;color:inherit;min-height:42px}
.pf-go:hover:not(:disabled){background:color-mix(in srgb,currentColor 8%,transparent)}
.pf-go:disabled{opacity:.5}
.pf-score{margin:0;font-size:var(--t-fine);font-variant-numeric:tabular-nums}

.pf-list{display:grid;gap:9px;margin:0 0 28px}
.pf-check{padding:14px 16px;border-radius:12px;border:1px solid color-mix(in srgb,currentColor 12%,transparent);background:color-mix(in srgb,currentColor 3%,transparent)}
.pf-check header{display:grid;grid-template-columns:22px 1fr auto;align-items:baseline;gap:10px;margin:0 0 6px}
.pf-check h2{margin:0;font-size:var(--t-body);font-weight:500;line-height:var(--lh-snug)}
.pf-state{font-size:var(--t-lead);line-height:1;opacity:.4;text-align:center}
.pf-ms{font-size:var(--t-micro);opacity:.6;font-variant-numeric:tabular-nums}
.pf-q{margin:0 0 8px 32px;font-size:var(--t-fine);line-height:var(--lh-snug);opacity:.78}
.pf-method{margin:0 0 6px 32px;font-size:var(--t-micro);opacity:.62;display:flex;gap:8px;flex-wrap:wrap}
.pf-method span{letter-spacing:.09em;text-transform:uppercase;flex:none}
.pf-method code{font-size:inherit;word-break:break-word}
.pf-detail{margin:8px 0 0 32px;font-size:var(--t-fine);line-height:var(--lh-snug)}

.pf-check.is-pass{border-color:color-mix(in srgb,#2f7d4f 34%,transparent)}
.pf-check.is-pass .pf-state{color:#2f7d4f;opacity:1}
.pf-check.is-fail{border-color:#c4553d;background:color-mix(in srgb,#c4553d 7%,transparent)}
.pf-check.is-fail .pf-state{color:#c4553d;opacity:1}
.pf-check.is-fail .pf-detail{color:#a8402c}
.pf-check.is-running .pf-state{opacity:1;animation:pf-tick 900ms linear infinite}
@keyframes pf-tick{50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.pf-check.is-running .pf-state{animation:none}}
.pf-check.is-external{border-style:dashed}

.pf-external{margin:0 0 24px;padding:16px 18px;border-radius:12px;border:1px dashed color-mix(in srgb,currentColor 24%,transparent)}
.pf-external h2{margin:0 0 8px;font-size:var(--t-lead);font-weight:400}
.pf-external p{margin:0 0 12px;font-size:var(--t-fine);line-height:var(--lh-read);max-width:64ch;opacity:.86}
.pf-external button{font-size:var(--t-fine);padding:8px 14px;border-radius:9px;border:1px solid color-mix(in srgb,currentColor 28%,transparent);background:none;color:inherit;min-height:36px}
.pf-external button:disabled{opacity:.5}
.pf-foot{margin:0;font-size:var(--t-micro);line-height:var(--lh-read);opacity:.66}

@media(max-width:760px){ .proof{padding:20px 18px 28px} .pf-q,.pf-method,.pf-detail{margin-left:0} }