:root{--canvas:#f7f8fc;--surface:#fcfdff;--ink:#18243f;--secondary:#53617c;--rule:#d9deea;--rule-strong:#c8d0df;--accent:#ad4120;--accent-wash:#fce9e1;--healthy:#296b52;--healthy-wash:#e4f2eb;--critical:#a62f49;--critical-wash:#fae8ed;--amber:#8a5b13;--amber-wash:#fff0d7;--rule-soft:#e6eaf2;--radius:8px;--hit:44px;--min-type:11px}
*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,th,strong{font-weight:500}
.bar{display:flex;align-items:center;gap:12px;min-height:58px;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--rule)}
.brand{font-weight:500;margin-right:auto}
.who{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
main{max-width:64rem;margin:0 auto;padding:24px 16px}
.card{max-width:28rem;margin:48px auto;padding:24px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius)}
.card h1{font-size:1.25rem;margin:0}
.eyebrow{margin:0;font-size:1.25rem;font-weight:500}
.lede{margin:4px 0 20px;color:var(--secondary);max-width:60ch}
.muted{color:var(--secondary)}
.mono{font-family:ui-monospace,"IBM Plex Mono",Menlo,monospace;font-size:13px}
.section-title{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-bottom:12px}
.section-title h2{margin:0 auto 0 0;font-size:1rem}
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
tr:last-child td{border-bottom:0}
th{color:var(--secondary);font-size:14px}
button{min-height:var(--hit);padding:0 16px;font:inherit;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:var(--radius);cursor:pointer}
button.quiet{background:transparent;color:var(--accent)}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.status-chip{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 10px;border-radius:99px;font-size:var(--min-type);font-weight:500;white-space:nowrap}
.status-chip::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.status-chip.healthy{color:var(--healthy);background:var(--healthy-wash)}
.status-chip.warning{color:var(--amber);background:var(--amber-wash)}
.status-chip.critical{color:var(--critical);background:var(--critical-wash)}
.status-chip.neutral{color:var(--secondary);background:var(--rule-soft)}
#message:not(:empty){margin-top:16px;padding:12px 16px;border:1px solid var(--rule-strong);border-radius:var(--radius);background:var(--surface)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
