diff --git a/docs/screenshots/agent-graph-four-participants-layout-preview.svg b/docs/screenshots/agent-graph-four-participants-layout-preview.svg
deleted file mode 100644
index 2a03d844..00000000
--- a/docs/screenshots/agent-graph-four-participants-layout-preview.svg
+++ /dev/null
@@ -1,189 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1400" height="1000" viewBox="0 0 1400 1000">
-  <defs>
-    <radialGradient id="bg" cx="50%" cy="48%" r="70%">
-      <stop offset="0%" stop-color="#111827"/>
-      <stop offset="58%" stop-color="#08091a"/>
-      <stop offset="100%" stop-color="#050510"/>
-    </radialGradient>
-    <filter id="glow" x="-80%" y="-80%" width="260%" height="260%">
-      <feGaussianBlur stdDeviation="10" result="blur"/>
-      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
-    </filter>
-  </defs>
-  <style>
-    .title{font:700 30px Inter,Arial,sans-serif;fill:#f8fafc;letter-spacing:0}
-    .sub{font:500 18px Inter,Arial,sans-serif;fill:#94a3b8;letter-spacing:0}
-    .edge{fill:none;stroke:#1d4ed8;stroke-width:2;opacity:.42}
-    .card{fill:#090b1d;stroke:#26314f;stroke-width:1.5}
-    .lead{fill:#142006;stroke:#9bef13;stroke-width:2;filter:url(#glow)}
-    .label{font:700 18px Inter,Arial,sans-serif;fill:#f8fafc;text-anchor:middle;letter-spacing:0}
-    .small{font:500 14px Inter,Arial,sans-serif;fill:#94a3b8;text-anchor:middle;letter-spacing:0}
-    .badge{font:700 12px Inter,Arial,sans-serif;fill:#020617;text-anchor:middle;letter-spacing:0}
-  </style>
-  <rect width="100%" height="100%" fill="url(#bg)"/>
-  <circle cx="0" cy="0" r="0.60" fill="#dbeafe" opacity="0.25"/>
-<circle cx="97" cy="211" r="1.54" fill="#dbeafe" opacity="0.56"/>
-<circle cx="194" cy="422" r="1.49" fill="#dbeafe" opacity="0.32"/>
-<circle cx="291" cy="633" r="1.43" fill="#dbeafe" opacity="0.63"/>
-<circle cx="388" cy="844" r="1.38" fill="#dbeafe" opacity="0.39"/>
-<circle cx="485" cy="55" r="1.32" fill="#dbeafe" opacity="0.70"/>
-<circle cx="582" cy="266" r="1.27" fill="#dbeafe" opacity="0.46"/>
-<circle cx="679" cy="477" r="1.21" fill="#dbeafe" opacity="0.77"/>
-<circle cx="776" cy="688" r="1.16" fill="#dbeafe" opacity="0.53"/>
-<circle cx="873" cy="899" r="1.10" fill="#dbeafe" opacity="0.29"/>
-<circle cx="970" cy="110" r="1.04" fill="#dbeafe" opacity="0.60"/>
-<circle cx="1067" cy="321" r="0.99" fill="#dbeafe" opacity="0.36"/>
-<circle cx="1164" cy="532" r="0.93" fill="#dbeafe" opacity="0.67"/>
-<circle cx="1261" cy="743" r="0.88" fill="#dbeafe" opacity="0.43"/>
-<circle cx="1358" cy="954" r="0.82" fill="#dbeafe" opacity="0.74"/>
-<circle cx="55" cy="165" r="0.77" fill="#dbeafe" opacity="0.50"/>
-<circle cx="152" cy="376" r="0.71" fill="#dbeafe" opacity="0.26"/>
-<circle cx="249" cy="587" r="0.66" fill="#dbeafe" opacity="0.57"/>
-<circle cx="346" cy="798" r="0.60" fill="#dbeafe" opacity="0.33"/>
-<circle cx="443" cy="9" r="1.54" fill="#dbeafe" opacity="0.64"/>
-<circle cx="540" cy="220" r="1.49" fill="#dbeafe" opacity="0.40"/>
-<circle cx="637" cy="431" r="1.43" fill="#dbeafe" opacity="0.71"/>
-<circle cx="734" cy="642" r="1.38" fill="#dbeafe" opacity="0.47"/>
-<circle cx="831" cy="853" r="1.32" fill="#dbeafe" opacity="0.78"/>
-<circle cx="928" cy="64" r="1.27" fill="#dbeafe" opacity="0.54"/>
-<circle cx="1025" cy="275" r="1.21" fill="#dbeafe" opacity="0.30"/>
-<circle cx="1122" cy="486" r="1.16" fill="#dbeafe" opacity="0.61"/>
-<circle cx="1219" cy="697" r="1.10" fill="#dbeafe" opacity="0.37"/>
-<circle cx="1316" cy="908" r="1.04" fill="#dbeafe" opacity="0.68"/>
-<circle cx="13" cy="119" r="0.99" fill="#dbeafe" opacity="0.44"/>
-<circle cx="110" cy="330" r="0.93" fill="#dbeafe" opacity="0.75"/>
-<circle cx="207" cy="541" r="0.88" fill="#dbeafe" opacity="0.51"/>
-<circle cx="304" cy="752" r="0.82" fill="#dbeafe" opacity="0.27"/>
-<circle cx="401" cy="963" r="0.77" fill="#dbeafe" opacity="0.58"/>
-<circle cx="498" cy="174" r="0.71" fill="#dbeafe" opacity="0.34"/>
-<circle cx="595" cy="385" r="0.66" fill="#dbeafe" opacity="0.65"/>
-<circle cx="692" cy="596" r="0.60" fill="#dbeafe" opacity="0.41"/>
-<circle cx="789" cy="807" r="1.54" fill="#dbeafe" opacity="0.72"/>
-<circle cx="886" cy="18" r="1.49" fill="#dbeafe" opacity="0.48"/>
-<circle cx="983" cy="229" r="1.43" fill="#dbeafe" opacity="0.79"/>
-<circle cx="1080" cy="440" r="1.38" fill="#dbeafe" opacity="0.55"/>
-<circle cx="1177" cy="651" r="1.32" fill="#dbeafe" opacity="0.31"/>
-<circle cx="1274" cy="862" r="1.27" fill="#dbeafe" opacity="0.62"/>
-<circle cx="1371" cy="73" r="1.21" fill="#dbeafe" opacity="0.38"/>
-<circle cx="68" cy="284" r="1.16" fill="#dbeafe" opacity="0.69"/>
-<circle cx="165" cy="495" r="1.10" fill="#dbeafe" opacity="0.45"/>
-<circle cx="262" cy="706" r="1.04" fill="#dbeafe" opacity="0.76"/>
-<circle cx="359" cy="917" r="0.99" fill="#dbeafe" opacity="0.52"/>
-<circle cx="456" cy="128" r="0.93" fill="#dbeafe" opacity="0.28"/>
-<circle cx="553" cy="339" r="0.88" fill="#dbeafe" opacity="0.59"/>
-<circle cx="650" cy="550" r="0.82" fill="#dbeafe" opacity="0.35"/>
-<circle cx="747" cy="761" r="0.77" fill="#dbeafe" opacity="0.66"/>
-<circle cx="844" cy="972" r="0.71" fill="#dbeafe" opacity="0.42"/>
-<circle cx="941" cy="183" r="0.66" fill="#dbeafe" opacity="0.73"/>
-<circle cx="1038" cy="394" r="0.60" fill="#dbeafe" opacity="0.49"/>
-<circle cx="1135" cy="605" r="1.54" fill="#dbeafe" opacity="0.25"/>
-<circle cx="1232" cy="816" r="1.49" fill="#dbeafe" opacity="0.56"/>
-<circle cx="1329" cy="27" r="1.43" fill="#dbeafe" opacity="0.32"/>
-<circle cx="26" cy="238" r="1.38" fill="#dbeafe" opacity="0.63"/>
-<circle cx="123" cy="449" r="1.32" fill="#dbeafe" opacity="0.39"/>
-<circle cx="220" cy="660" r="1.27" fill="#dbeafe" opacity="0.70"/>
-<circle cx="317" cy="871" r="1.21" fill="#dbeafe" opacity="0.46"/>
-<circle cx="414" cy="82" r="1.16" fill="#dbeafe" opacity="0.77"/>
-<circle cx="511" cy="293" r="1.10" fill="#dbeafe" opacity="0.53"/>
-<circle cx="608" cy="504" r="1.04" fill="#dbeafe" opacity="0.29"/>
-<circle cx="705" cy="715" r="0.99" fill="#dbeafe" opacity="0.60"/>
-<circle cx="802" cy="926" r="0.93" fill="#dbeafe" opacity="0.36"/>
-<circle cx="899" cy="137" r="0.88" fill="#dbeafe" opacity="0.67"/>
-<circle cx="996" cy="348" r="0.82" fill="#dbeafe" opacity="0.43"/>
-<circle cx="1093" cy="559" r="0.77" fill="#dbeafe" opacity="0.74"/>
-<circle cx="1190" cy="770" r="0.71" fill="#dbeafe" opacity="0.50"/>
-<circle cx="1287" cy="981" r="0.66" fill="#dbeafe" opacity="0.26"/>
-<circle cx="1384" cy="192" r="0.60" fill="#dbeafe" opacity="0.57"/>
-<circle cx="81" cy="403" r="1.54" fill="#dbeafe" opacity="0.33"/>
-<circle cx="178" cy="614" r="1.49" fill="#dbeafe" opacity="0.64"/>
-<circle cx="275" cy="825" r="1.43" fill="#dbeafe" opacity="0.40"/>
-<circle cx="372" cy="36" r="1.38" fill="#dbeafe" opacity="0.71"/>
-<circle cx="469" cy="247" r="1.32" fill="#dbeafe" opacity="0.47"/>
-<circle cx="566" cy="458" r="1.27" fill="#dbeafe" opacity="0.78"/>
-<circle cx="663" cy="669" r="1.21" fill="#dbeafe" opacity="0.54"/>
-<circle cx="760" cy="880" r="1.16" fill="#dbeafe" opacity="0.30"/>
-<circle cx="857" cy="91" r="1.10" fill="#dbeafe" opacity="0.61"/>
-<circle cx="954" cy="302" r="1.04" fill="#dbeafe" opacity="0.37"/>
-<circle cx="1051" cy="513" r="0.99" fill="#dbeafe" opacity="0.68"/>
-<circle cx="1148" cy="724" r="0.93" fill="#dbeafe" opacity="0.44"/>
-<circle cx="1245" cy="935" r="0.88" fill="#dbeafe" opacity="0.75"/>
-<circle cx="1342" cy="146" r="0.82" fill="#dbeafe" opacity="0.51"/>
-<circle cx="39" cy="357" r="0.77" fill="#dbeafe" opacity="0.27"/>
-<circle cx="136" cy="568" r="0.71" fill="#dbeafe" opacity="0.58"/>
-<circle cx="233" cy="779" r="0.66" fill="#dbeafe" opacity="0.34"/>
-<circle cx="330" cy="990" r="0.60" fill="#dbeafe" opacity="0.65"/>
-<circle cx="427" cy="201" r="1.54" fill="#dbeafe" opacity="0.41"/>
-<circle cx="524" cy="412" r="1.49" fill="#dbeafe" opacity="0.72"/>
-<circle cx="621" cy="623" r="1.43" fill="#dbeafe" opacity="0.48"/>
-<circle cx="718" cy="834" r="1.38" fill="#dbeafe" opacity="0.79"/>
-<circle cx="815" cy="45" r="1.32" fill="#dbeafe" opacity="0.55"/>
-<circle cx="912" cy="256" r="1.27" fill="#dbeafe" opacity="0.31"/>
-<circle cx="1009" cy="467" r="1.21" fill="#dbeafe" opacity="0.62"/>
-<circle cx="1106" cy="678" r="1.16" fill="#dbeafe" opacity="0.38"/>
-<circle cx="1203" cy="889" r="1.10" fill="#dbeafe" opacity="0.69"/>
-<circle cx="1300" cy="100" r="1.04" fill="#dbeafe" opacity="0.45"/>
-<circle cx="1397" cy="311" r="0.99" fill="#dbeafe" opacity="0.76"/>
-<circle cx="94" cy="522" r="0.93" fill="#dbeafe" opacity="0.52"/>
-<circle cx="191" cy="733" r="0.88" fill="#dbeafe" opacity="0.28"/>
-<circle cx="288" cy="944" r="0.82" fill="#dbeafe" opacity="0.59"/>
-<circle cx="385" cy="155" r="0.77" fill="#dbeafe" opacity="0.35"/>
-<circle cx="482" cy="366" r="0.71" fill="#dbeafe" opacity="0.66"/>
-<circle cx="579" cy="577" r="0.66" fill="#dbeafe" opacity="0.42"/>
-<circle cx="676" cy="788" r="0.60" fill="#dbeafe" opacity="0.73"/>
-<circle cx="773" cy="999" r="1.54" fill="#dbeafe" opacity="0.49"/>
-<circle cx="870" cy="210" r="1.49" fill="#dbeafe" opacity="0.25"/>
-<circle cx="967" cy="421" r="1.43" fill="#dbeafe" opacity="0.56"/>
-<circle cx="1064" cy="632" r="1.38" fill="#dbeafe" opacity="0.32"/>
-<circle cx="1161" cy="843" r="1.32" fill="#dbeafe" opacity="0.63"/>
-<circle cx="1258" cy="54" r="1.27" fill="#dbeafe" opacity="0.39"/>
-<circle cx="1355" cy="265" r="1.21" fill="#dbeafe" opacity="0.70"/>
-<circle cx="52" cy="476" r="1.16" fill="#dbeafe" opacity="0.46"/>
-<circle cx="149" cy="687" r="1.10" fill="#dbeafe" opacity="0.77"/>
-<circle cx="246" cy="898" r="1.04" fill="#dbeafe" opacity="0.53"/>
-<circle cx="343" cy="109" r="0.99" fill="#dbeafe" opacity="0.29"/>
-  <text x="70" y="76" class="title">4 participants - current radial layout</text>
-  <text x="70" y="110" class="sub">Strict small-team preset: top / right / bottom / left around Lead</text>
-  <path d="M 700 500 C 700 500, 700 235, 700 235" class="edge"/>
-<path d="M 700 500 C 895 500, 895 500, 1090 500" class="edge"/>
-<path d="M 700 500 C 700 500, 700 765, 700 765" class="edge"/>
-<path d="M 700 500 C 505 500, 505 500, 310 500" class="edge"/>
-  <rect x="615" y="457" width="170" height="86" rx="16" class="lead"/>
-  <text x="700" y="496" class="label">Lead</text>
-  <text x="700" y="524" class="small">center reserved zone</text>
-  
-    <rect x="570" y="160" width="260" height="150" rx="10" class="card"/>
-    <circle cx="700" cy="187" r="20" fill="#38bdf8" opacity=".18" filter="url(#glow)"/>
-    <circle cx="700" cy="187" r="14" fill="#38bdf8"/>
-    <text x="700" y="227" class="label">Participant 1</text>
-    <text x="700" y="255" class="small">top side</text>
-    <rect x="658" y="278" width="84" height="24" rx="6" fill="#38bdf8"/>
-    <text x="700" y="295" class="badge">slot 1</text>
-  
-
-    <rect x="960" y="425" width="260" height="150" rx="10" class="card"/>
-    <circle cx="1090" cy="452" r="20" fill="#facc15" opacity=".18" filter="url(#glow)"/>
-    <circle cx="1090" cy="452" r="14" fill="#facc15"/>
-    <text x="1090" y="492" class="label">Participant 2</text>
-    <text x="1090" y="520" class="small">right side</text>
-    <rect x="1048" y="543" width="84" height="24" rx="6" fill="#facc15"/>
-    <text x="1090" y="560" class="badge">slot 2</text>
-  
-
-    <rect x="570" y="690" width="260" height="150" rx="10" class="card"/>
-    <circle cx="700" cy="717" r="20" fill="#ef4444" opacity=".18" filter="url(#glow)"/>
-    <circle cx="700" cy="717" r="14" fill="#ef4444"/>
-    <text x="700" y="757" class="label">Participant 3</text>
-    <text x="700" y="785" class="small">bottom side</text>
-    <rect x="658" y="808" width="84" height="24" rx="6" fill="#ef4444"/>
-    <text x="700" y="825" class="badge">slot 3</text>
-  
-
-    <rect x="180" y="425" width="260" height="150" rx="10" class="card"/>
-    <circle cx="310" cy="452" r="20" fill="#a78bfa" opacity=".18" filter="url(#glow)"/>
-    <circle cx="310" cy="452" r="14" fill="#a78bfa"/>
-    <text x="310" y="492" class="label">Participant 4</text>
-    <text x="310" y="520" class="small">left side</text>
-    <rect x="268" y="543" width="84" height="24" rx="6" fill="#a78bfa"/>
-    <text x="310" y="560" class="badge">slot 4</text>
-  
-</svg>
\ No newline at end of file
diff --git a/docs/screenshots/agent-graph-row-orbit-layout-preview.svg b/docs/screenshots/agent-graph-row-orbit-layout-preview.svg
deleted file mode 100644
index 4ffbd6d1..00000000
--- a/docs/screenshots/agent-graph-row-orbit-layout-preview.svg
+++ /dev/null
@@ -1,125 +0,0 @@
-<svg width="1800" height="1050" viewBox="0 0 1800 1050" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <radialGradient id="bg" cx="50%" cy="42%" r="75%">
-      <stop offset="0%" stop-color="#111733"/>
-      <stop offset="55%" stop-color="#090d20"/>
-      <stop offset="100%" stop-color="#050717"/>
-    </radialGradient>
-    <filter id="glow" x="-80%" y="-80%" width="260%" height="260%">
-      <feGaussianBlur stdDeviation="10" result="blur"/>
-      <feColorMatrix in="blur" type="matrix" values="0 0 0 0 0.25 0 0 0 0 0.75 0 0 0 0 1 0 0 0 0.65 0"/>
-      <feBlend in="SourceGraphic"/>
-    </filter>
-    <style>
-      .panel-title { font: 700 28px ui-monospace, SFMono-Regular, Menlo, monospace; fill: #e6f0ff; letter-spacing: 0; }
-      .panel-subtitle { font: 500 15px ui-monospace, SFMono-Regular, Menlo, monospace; fill: #8fa4c6; letter-spacing: 0; }
-      .label { font: 700 13px ui-monospace, SFMono-Regular, Menlo, monospace; fill: #eff6ff; letter-spacing: 0; }
-      .role { font: 500 10px ui-monospace, SFMono-Regular, Menlo, monospace; fill: #8ea0bd; letter-spacing: 0; }
-      .hint { font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace; fill: #8fa4c6; letter-spacing: 0; }
-      .card { fill: rgba(11, 16, 36, 0.84); stroke: rgba(148, 163, 184, 0.22); stroke-width: 1; }
-      .slot { fill: rgba(59, 130, 246, 0.035); stroke: rgba(125, 211, 252, 0.16); stroke-width: 1; stroke-dasharray: 5 7; }
-      .edge { stroke: rgba(96, 165, 250, 0.18); stroke-width: 2; }
-      .row-guide { stroke: rgba(148, 163, 184, 0.14); stroke-width: 1; stroke-dasharray: 6 10; }
-      .divider { stroke: rgba(148, 163, 184, 0.16); stroke-width: 1; }
-    </style>
-  </defs>
-
-  <rect width="1800" height="1050" fill="url(#bg)"/>
-  <g opacity="0.85">
-    <circle cx="108" cy="102" r="1.5" fill="#94a3b8"/>
-    <circle cx="238" cy="860" r="1.2" fill="#64748b"/>
-    <circle cx="385" cy="145" r="1.3" fill="#94a3b8"/>
-    <circle cx="520" cy="950" r="1.4" fill="#cbd5e1"/>
-    <circle cx="690" cy="372" r="1.1" fill="#94a3b8"/>
-    <circle cx="823" cy="787" r="1.2" fill="#64748b"/>
-    <circle cx="982" cy="210" r="1.1" fill="#94a3b8"/>
-    <circle cx="1112" cy="902" r="1.5" fill="#cbd5e1"/>
-    <circle cx="1286" cy="118" r="1.2" fill="#94a3b8"/>
-    <circle cx="1458" cy="730" r="1.3" fill="#64748b"/>
-    <circle cx="1632" cy="340" r="1.5" fill="#cbd5e1"/>
-    <circle cx="1748" cy="934" r="1.1" fill="#94a3b8"/>
-  </g>
-
-  <line x1="900" y1="70" x2="900" y2="980" class="divider"/>
-
-  <text x="70" y="72" class="panel-title">8 participants</text>
-  <text x="70" y="101" class="panel-subtitle">3 top / 2 at lead level / 3 bottom</text>
-  <text x="970" y="72" class="panel-title">12 participants</text>
-  <text x="970" y="101" class="panel-subtitle">4 top / 2 + lead + 2 middle / 4 bottom</text>
-
-  <g id="eight-layout">
-    <line x1="110" y1="245" x2="790" y2="245" class="row-guide"/>
-    <line x1="110" y1="525" x2="790" y2="525" class="row-guide"/>
-    <line x1="110" y1="805" x2="790" y2="805" class="row-guide"/>
-    <text x="118" y="232" class="hint">top row</text>
-    <text x="118" y="512" class="hint">lead row</text>
-    <text x="118" y="792" class="hint">bottom row</text>
-
-    <path d="M450 525 C370 430 305 330 245 245" class="edge"/>
-    <path d="M450 525 C450 425 450 335 450 245" class="edge"/>
-    <path d="M450 525 C530 430 595 330 655 245" class="edge"/>
-    <path d="M450 525 C360 515 285 515 200 525" class="edge"/>
-    <path d="M450 525 C540 515 615 515 700 525" class="edge"/>
-    <path d="M450 525 C370 620 305 720 245 805" class="edge"/>
-    <path d="M450 525 C450 625 450 715 450 805" class="edge"/>
-    <path d="M450 525 C530 620 595 720 655 805" class="edge"/>
-
-    <g transform="translate(450 525)">
-      <circle r="56" fill="rgba(132, 204, 22, 0.11)" filter="url(#glow)"/>
-      <path d="M0 -35 L31 -17.5 L31 17.5 L0 35 L-31 17.5 L-31 -17.5 Z" fill="#1a2f0d" stroke="#a3e635" stroke-width="2"/>
-      <circle r="17" fill="#84cc16"/>
-      <text x="0" y="66" text-anchor="middle" class="label">lead</text>
-    </g>
-
-    <g transform="translate(245 245)"><rect x="-92" y="-64" width="184" height="128" rx="8" class="slot"/><rect x="-78" y="-46" width="156" height="92" rx="7" class="card"/><circle cy="-18" r="20" fill="#0ea5e9"/><text y="17" text-anchor="middle" class="label">alice</text><text y="34" text-anchor="middle" class="role">reviewer</text></g>
-    <g transform="translate(450 245)"><rect x="-92" y="-64" width="184" height="128" rx="8" class="slot"/><rect x="-78" y="-46" width="156" height="92" rx="7" class="card"/><circle cy="-18" r="20" fill="#22c55e"/><text y="17" text-anchor="middle" class="label">nova</text><text y="34" text-anchor="middle" class="role">developer</text></g>
-    <g transform="translate(655 245)"><rect x="-92" y="-64" width="184" height="128" rx="8" class="slot"/><rect x="-78" y="-46" width="156" height="92" rx="7" class="card"/><circle cy="-18" r="20" fill="#eab308"/><text y="17" text-anchor="middle" class="label">tom</text><text y="34" text-anchor="middle" class="role">developer</text></g>
-    <g transform="translate(200 525)"><rect x="-92" y="-64" width="184" height="128" rx="8" class="slot"/><rect x="-78" y="-46" width="156" height="92" rx="7" class="card"/><circle cy="-18" r="20" fill="#8b5cf6"/><text y="17" text-anchor="middle" class="label">jack</text><text y="34" text-anchor="middle" class="role">developer</text></g>
-    <g transform="translate(700 525)"><rect x="-92" y="-64" width="184" height="128" rx="8" class="slot"/><rect x="-78" y="-46" width="156" height="92" rx="7" class="card"/><circle cy="-18" r="20" fill="#06b6d4"/><text y="17" text-anchor="middle" class="label">atlas</text><text y="34" text-anchor="middle" class="role">assistant</text></g>
-    <g transform="translate(245 805)"><rect x="-92" y="-64" width="184" height="128" rx="8" class="slot"/><rect x="-78" y="-46" width="156" height="92" rx="7" class="card"/><circle cy="-18" r="20" fill="#ef4444"/><text y="17" text-anchor="middle" class="label">bob</text><text y="34" text-anchor="middle" class="role">developer</text></g>
-    <g transform="translate(450 805)"><rect x="-92" y="-64" width="184" height="128" rx="8" class="slot"/><rect x="-78" y="-46" width="156" height="92" rx="7" class="card"/><circle cy="-18" r="20" fill="#f97316"/><text y="17" text-anchor="middle" class="label">maya</text><text y="34" text-anchor="middle" class="role">qa</text></g>
-    <g transform="translate(655 805)"><rect x="-92" y="-64" width="184" height="128" rx="8" class="slot"/><rect x="-78" y="-46" width="156" height="92" rx="7" class="card"/><circle cy="-18" r="20" fill="#14b8a6"/><text y="17" text-anchor="middle" class="label">kai</text><text y="34" text-anchor="middle" class="role">ops</text></g>
-  </g>
-
-  <g id="twelve-layout">
-    <line x1="970" y1="245" x2="1730" y2="245" class="row-guide"/>
-    <line x1="970" y1="525" x2="1730" y2="525" class="row-guide"/>
-    <line x1="970" y1="805" x2="1730" y2="805" class="row-guide"/>
-    <text x="978" y="232" class="hint">top row</text>
-    <text x="978" y="512" class="hint">lead row</text>
-    <text x="978" y="792" class="hint">bottom row</text>
-
-    <path d="M1350 525 C1245 425 1135 330 1030 245" class="edge"/>
-    <path d="M1350 525 C1295 420 1270 335 1243 245" class="edge"/>
-    <path d="M1350 525 C1405 420 1430 335 1457 245" class="edge"/>
-    <path d="M1350 525 C1455 425 1565 330 1670 245" class="edge"/>
-    <path d="M1350 525 C1235 515 1135 515 1030 525" class="edge"/>
-    <path d="M1350 525 C1270 520 1235 520 1210 525" class="edge"/>
-    <path d="M1350 525 C1430 520 1465 520 1490 525" class="edge"/>
-    <path d="M1350 525 C1465 515 1565 515 1670 525" class="edge"/>
-    <path d="M1350 525 C1245 625 1135 720 1030 805" class="edge"/>
-    <path d="M1350 525 C1295 630 1270 715 1243 805" class="edge"/>
-    <path d="M1350 525 C1405 630 1430 715 1457 805" class="edge"/>
-    <path d="M1350 525 C1455 625 1565 720 1670 805" class="edge"/>
-
-    <g transform="translate(1350 525)">
-      <circle r="56" fill="rgba(132, 204, 22, 0.11)" filter="url(#glow)"/>
-      <path d="M0 -35 L31 -17.5 L31 17.5 L0 35 L-31 17.5 L-31 -17.5 Z" fill="#1a2f0d" stroke="#a3e635" stroke-width="2"/>
-      <circle r="17" fill="#84cc16"/>
-      <text x="0" y="66" text-anchor="middle" class="label">lead</text>
-    </g>
-
-    <g transform="translate(1030 245)"><rect x="-80" y="-62" width="160" height="124" rx="8" class="slot"/><rect x="-68" y="-44" width="136" height="88" rx="7" class="card"/><circle cy="-18" r="18" fill="#0ea5e9"/><text y="17" text-anchor="middle" class="label">alice</text></g>
-    <g transform="translate(1243 245)"><rect x="-80" y="-62" width="160" height="124" rx="8" class="slot"/><rect x="-68" y="-44" width="136" height="88" rx="7" class="card"/><circle cy="-18" r="18" fill="#22c55e"/><text y="17" text-anchor="middle" class="label">nova</text></g>
-    <g transform="translate(1457 245)"><rect x="-80" y="-62" width="160" height="124" rx="8" class="slot"/><rect x="-68" y="-44" width="136" height="88" rx="7" class="card"/><circle cy="-18" r="18" fill="#eab308"/><text y="17" text-anchor="middle" class="label">tom</text></g>
-    <g transform="translate(1670 245)"><rect x="-80" y="-62" width="160" height="124" rx="8" class="slot"/><rect x="-68" y="-44" width="136" height="88" rx="7" class="card"/><circle cy="-18" r="18" fill="#8b5cf6"/><text y="17" text-anchor="middle" class="label">jack</text></g>
-    <g transform="translate(1030 525)"><rect x="-80" y="-62" width="160" height="124" rx="8" class="slot"/><rect x="-68" y="-44" width="136" height="88" rx="7" class="card"/><circle cy="-18" r="18" fill="#06b6d4"/><text y="17" text-anchor="middle" class="label">atlas</text></g>
-    <g transform="translate(1210 525)"><rect x="-80" y="-62" width="160" height="124" rx="8" class="slot"/><rect x="-68" y="-44" width="136" height="88" rx="7" class="card"/><circle cy="-18" r="18" fill="#ef4444"/><text y="17" text-anchor="middle" class="label">bob</text></g>
-    <g transform="translate(1490 525)"><rect x="-80" y="-62" width="160" height="124" rx="8" class="slot"/><rect x="-68" y="-44" width="136" height="88" rx="7" class="card"/><circle cy="-18" r="18" fill="#f97316"/><text y="17" text-anchor="middle" class="label">maya</text></g>
-    <g transform="translate(1670 525)"><rect x="-80" y="-62" width="160" height="124" rx="8" class="slot"/><rect x="-68" y="-44" width="136" height="88" rx="7" class="card"/><circle cy="-18" r="18" fill="#14b8a6"/><text y="17" text-anchor="middle" class="label">kai</text></g>
-    <g transform="translate(1030 805)"><rect x="-80" y="-62" width="160" height="124" rx="8" class="slot"/><rect x="-68" y="-44" width="136" height="88" rx="7" class="card"/><circle cy="-18" r="18" fill="#a855f7"/><text y="17" text-anchor="middle" class="label">ivy</text></g>
-    <g transform="translate(1243 805)"><rect x="-80" y="-62" width="160" height="124" rx="8" class="slot"/><rect x="-68" y="-44" width="136" height="88" rx="7" class="card"/><circle cy="-18" r="18" fill="#f43f5e"/><text y="17" text-anchor="middle" class="label">rex</text></g>
-    <g transform="translate(1457 805)"><rect x="-80" y="-62" width="160" height="124" rx="8" class="slot"/><rect x="-68" y="-44" width="136" height="88" rx="7" class="card"/><circle cy="-18" r="18" fill="#38bdf8"/><text y="17" text-anchor="middle" class="label">zoe</text></g>
-    <g transform="translate(1670 805)"><rect x="-80" y="-62" width="160" height="124" rx="8" class="slot"/><rect x="-68" y="-44" width="136" height="88" rx="7" class="card"/><circle cy="-18" r="18" fill="#84cc16"/><text y="17" text-anchor="middle" class="label">sam</text></g>
-  </g>
-</svg>
diff --git a/docs/screenshots/cover-frame.png b/docs/screenshots/cover-frame.png
new file mode 100644
index 00000000..5ffef519
Binary files /dev/null and b/docs/screenshots/cover-frame.png differ
diff --git a/docs/screenshots/screenshots-animated.webp b/docs/screenshots/screenshots-animated.webp
new file mode 100644
index 00000000..000931d5
Binary files /dev/null and b/docs/screenshots/screenshots-animated.webp differ