:root { color-scheme: light dark; --line: #8886; --accent: #0b62d6; --bad: #c62828; --warn: #b26a00; --good: #2e7d32; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, sans-serif; }
main { max-width: 72rem; margin: 0 auto; padding: 1rem; }
.top { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; padding: .5rem 1rem; border-bottom: 1px solid var(--line); }
.top nav { display: flex; flex-wrap: wrap; gap: 1rem; flex: 1; }
.brand { font-weight: 700; text-decoration: none; }
a { color: var(--accent); }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
label { display: block; margin: .5rem 0; }
textarea { width: 100%; font: 14px/1.4 ui-monospace, monospace; }
fieldset { border: 1px solid var(--line); margin-top: 1rem; }
button, .button { font: inherit; padding: .35rem .8rem; cursor: pointer; }
.notice, .banner, .error { padding: .5rem .75rem; border-left: 4px solid var(--accent); }
.banner { border-color: var(--warn); }
.error { border-color: var(--bad); }
.hint { opacity: .75; font-size: .9rem; }
.violation td { color: var(--bad); }
.accepted td, .advisory td { color: var(--warn); }
.allowed td { color: var(--good); }
.stale::after { content: " (stale)"; color: var(--warn); }
.diagnostics li { color: var(--bad); }
#graph { overflow: auto; }
#graph svg { display: block; }
#graph rect { fill: none; stroke: currentColor; }
#graph text { fill: currentColor; font-size: 12px; }
#graph .layer { font-weight: 700; }
#graph path { fill: none; stroke: currentColor; opacity: .55; }
#graph path.violation { stroke: var(--bad); opacity: 1; stroke-width: 2; }
#graph path.accepted { stroke: var(--warn); opacity: 1; stroke-dasharray: 4 3; }
#graph path.advisory { stroke: var(--warn); opacity: .9; }
#graph path.allowed { stroke: var(--good); opacity: .9; }
#graph marker path { fill: currentColor; stroke: none; opacity: 1; }