docs/social-preview.html

<!doctype html><html><head><meta charset="utf-8"><style>
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:1280px;height:640px}
body{background:#0d0e14;font-family:'DejaVu Sans Mono','JetBrains Mono',Consolas,monospace;overflow:hidden}
.wrap{display:flex;height:100%;align-items:center}
.left{width:600px;padding:0 0 0 80px}
.bar{width:72px;height:7px;background:#a970ff;margin-bottom:34px;border-radius:2px}
h1{font-size:62px;font-weight:700;color:#f4f5f8;letter-spacing:-1px;line-height:1.05}
.tag{margin-top:22px;font-size:23px;color:#9aa0b0;line-height:1.5}
.foot{position:absolute;left:80px;bottom:60px;font-size:19px;color:#7d7f93}
.right{flex:1;display:flex;justify-content:center;align-items:center}
.term{width:500px;background:#191b26;border-radius:10px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.tb{height:38px;background:#22252f;display:flex;align-items:center;padding:0 14px;gap:8px}
.d{width:11px;height:11px;border-radius:50%}
.tt{flex:1;text-align:center;font-size:14px;color:#9aa0b0;margin-right:39px}
.body{padding:20px 22px;font-size:16px;line-height:1.85}
.g{color:#4ade80}.p{color:#a970ff}.w{color:#e6e8ef}.m{color:#7d7f93}.r{color:#ff5a3c}.y{color:#fbbf24}
</style></head><body><div class="wrap">
<div class="left"><div class="bar"></div><h1>ssot-check</h1><div class="tag">Single-source-of-truth drift<br>auditor. 45 tests, no deps.</div></div>
<div class="right"><div class="term">
<div class="tb"><div class="d" style="background:#ff5f57"></div><div class="d" style="background:#febc2e"></div><div class="d" style="background:#28c840"></div><div class="tt">ssot-check</div></div>
<div class="body"><div><span class="g">$</span> <span class="w">ssot-check check</span></div><div><span class="r">DRIFT</span> <span class="w">tool_count</span> <span class="m">canonical=39</span></div><div><span class="m">  README.md:180</span> <span class="r">44</span></div><div><span class="m">  site/tools.md:12</span> <span class="r">41</span></div><div><span class="m">exit 1</span></div></div></div></div>
<div class="foot">Conor Bronsdon &middot; Chain of Thought</div>
</div></body></html>