.compat{flex-direction:column;gap:14px;margin:8px 0 24px;display:flex}.compat-hero{border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-1);align-items:center;gap:18px;padding:22px 24px;display:flex}.compat-hero h2{letter-spacing:-.02em;margin:0 0 4px;font-size:30px}.compat-hero p{color:var(--ink-2);margin:0}.compat-hero-icon{color:#fff;border-radius:50%;flex:none;place-items:center;width:56px;height:56px;font-size:26px;font-weight:700;display:grid}.compat-hero[data-tone=ok]{background:var(--ok-bg);border-color:color-mix(in srgb, var(--ok) 30%, transparent)}.compat-hero[data-tone=ok] .compat-hero-icon{background:var(--ok)}.compat-hero[data-tone=warn]{background:var(--warn-bg);border-color:color-mix(in srgb, var(--warn) 30%, transparent)}.compat-hero[data-tone=warn] .compat-hero-icon{background:var(--warn)}.compat-hero[data-tone=bad]{background:var(--bad-bg);border-color:color-mix(in srgb, var(--bad) 30%, transparent)}.compat-hero[data-tone=bad] .compat-hero-icon{background:var(--bad)}.compat-hero[data-tone=nodata]{background:var(--nodata-bg)}.compat-hero[data-tone=nodata] .compat-hero-icon{background:var(--ink-3)}.compat-table{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden}.compat-row{border-top:1px solid var(--line);grid-template-columns:1.1fr 1fr 1fr auto;align-items:center;gap:4px 16px;padding:14px 20px;display:grid}.compat-row:first-child{border-top:0}.compat-row-head{background:var(--surface-2);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding-block:10px;font-size:11.5px;font-weight:600}.compat-label{font-weight:600}.compat-value{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-2);font-size:14px}.compat-status{white-space:nowrap;border-radius:999px;justify-self:end;align-items:center;gap:6px;padding:3px 10px 3px 4px;font-size:12.5px;font-weight:600;display:inline-flex}.compat-status i{color:#fff;border-radius:50%;place-items:center;width:18px;height:18px;font-size:11px;font-style:normal;display:grid}.compat-row[data-status=ok] .compat-status{background:var(--ok-bg);color:var(--ok)}.compat-row[data-status=ok] .compat-status i{background:var(--ok)}.compat-row[data-status=warn] .compat-status{background:var(--warn-bg);color:#8a5a12}.compat-row[data-status=warn] .compat-status i{background:var(--warn)}.compat-row[data-status=bad] .compat-status{background:var(--bad-bg);color:var(--bad)}.compat-row[data-status=bad] .compat-status i{background:var(--bad)}.compat-row[data-status=nodata] .compat-status{background:var(--nodata-bg);color:var(--ink-3)}.compat-row[data-status=nodata] .compat-status i{background:var(--ink-3)}.compat-note{color:var(--ink-2);grid-column:1/-1;margin:2px 0 0;font-size:13px}.compat-footnote{border-radius:var(--radius-sm);background:var(--surface-2);color:var(--ink-2);margin:0;padding:12px 16px;font-size:13.5px;line-height:1.6}.compat-footnote b{color:var(--ink);font-weight:600}.compat-sources summary{cursor:pointer;color:var(--brand);font-size:13.5px;font-weight:600}.compat-sources .source-list{margin-top:10px}@media (max-width:700px){.compat-hero{gap:14px;padding:18px}.compat-hero h2{font-size:24px}.compat-hero-icon{width:44px;height:44px;font-size:20px}.compat-row-head{display:none}.compat-row{grid-template-columns:1fr 1fr;padding:14px 16px}.compat-status{justify-self:end}.compat-value:before{content:attr(data-caption) " · ";color:var(--ink-3);font-family:inherit;font-size:12px}}
