:root { color-scheme: dark; --bg: #101317; --panel: #171c22; --line: #2a323b; --text: #edf2f7; --muted: #8e9aa7; --green: #45d483; --red: #ff6f78; --amber: #ffca63; --blue: #77bdfb; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at top right, #172a31 0, var(--bg) 35rem); color: var(--text); font: 15px/1.55 system-ui, -apple-system, sans-serif; }
a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; }
.site-header { max-width: 1180px; margin: 0 auto; padding: 24px 28px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); } .brand { color: var(--text); font-weight: 750; letter-spacing: -.02em; } .tagline { color: var(--muted); margin-left: 12px; font-size: 12px; } nav a { margin-left: 20px; font-size: 13px; }
.shell { max-width: 1180px; margin: 0 auto; padding: 42px 28px 80px; } .hero { max-width: 720px; margin-bottom: 30px; } h1 { margin: 4px 0 8px; font-size: clamp(30px, 5vw, 52px); line-height: 1.05; letter-spacing: -.045em; } h2 { margin: 0; font-size: 17px; } .lede { margin: 0; color: var(--muted); font-size: 17px; } .eyebrow { color: var(--green); font: 11px/1.2 ui-monospace, SFMono-Regular, monospace; letter-spacing: .13em; margin: 0 0 10px; }
.counter-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 24px; } .counter { background: rgba(23,28,34,.9); border: 1px solid var(--line); border-radius: 10px; padding: 15px; min-height: 76px; } .counter span { display: block; color: var(--muted); font-size: 12px; } .counter strong { display: block; margin-top: 4px; font-size: 21px; }
.panel { background: rgba(23,28,34,.92); border: 1px solid var(--line); border-radius: 12px; margin: 18px 0; padding: 20px; } .panel.compact { padding-bottom: 14px; } .panel-heading { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 13px; } .panel-heading span, .muted { color: var(--muted); font-size: 12px; }
.table-wrap { overflow-x: auto; } table { border-collapse: collapse; width: 100%; min-width: 760px; } th, td { padding: 13px 9px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; } th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; } .post-title { color: var(--text); display: block; max-width: 420px; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; } .status { display: inline-block; border: 1px solid currentColor; border-radius: 999px; padding: 2px 8px; font: 10px/1.35 ui-monospace, SFMono-Regular, monospace; letter-spacing: .04em; white-space: nowrap; } .status-supported, .status-sent, .status-draft { color: var(--green); } .status-unsupported, .status-errored { color: var(--red); } .status-unverifiable, .status-stale, .status-blocked, .status-rejected { color: var(--amber); } .status-correction { color: var(--blue); }
.verdict-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .verdict-row strong { margin-right: 15px; } .empty { color: var(--muted); padding: 14px 0; } footer { max-width: 1180px; margin: 0 auto; padding: 0 28px 28px; color: var(--muted); font-size: 12px; }
.back { margin: 0 0 25px; } .post-head { display: flex; justify-content: space-between; gap: 24px; align-items: end; } .post-head h1 { font-size: clamp(26px, 4vw, 42px); } .range { display: grid; gap: 5px; justify-items: end; color: var(--muted); font-size: 12px; } .post-copy p { white-space: pre-line; font-size: 18px; } .sentence { border-top: 1px solid var(--line); padding: 18px 0 4px; } .sentence:first-of-type { border-top: 0; } .sentence-top { display: flex; gap: 8px; align-items: center; } .source { color: var(--muted); font-size: 11px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; } .sentence-text { font-size: 17px; margin: 9px 0 4px; } .reason { color: var(--muted); font-size: 13px; margin: 0 0 9px; } .evidence { margin: 0; padding-left: 20px; color: var(--muted); font-size: 13px; } .evidence li { padding: 2px 0; } .alert { background: #172b39; border: 1px solid #31536b; border-radius: 10px; padding: 13px 16px; margin-bottom: 18px; } .alert-warn { background: #342719; border-color: #735525; } .alert-error { background: #351f25; border-color: #70373f; } .miss { border-top: 1px solid var(--line); padding: 11px 0; margin: 0; }
@media (max-width: 900px) { .counter-grid { grid-template-columns: repeat(3, 1fr); } .post-head { display: block; } .range { justify-items: start; margin-top: 18px; } }
@media (max-width: 560px) { .site-header { padding: 18px; } .tagline { display: none; } .shell { padding: 30px 18px 60px; } .counter-grid { grid-template-columns: repeat(2, 1fr); } .panel { padding: 15px; } }