diff --git a/docs/playground.css b/docs/playground.css
index 15a6093..0d396e8 100644
--- a/docs/playground.css
+++ b/docs/playground.css
@@ -198,6 +198,87 @@ button:disabled {
width: 100%;
}
+.challenge-panel {
+ border: 1px solid #d7dcd6;
+ border-radius: 10px;
+ margin-top: 12px;
+ overflow: hidden;
+}
+
+.challenge-head {
+ align-items: center;
+ background: #eef1ec;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ justify-content: space-between;
+ padding: 8px 12px;
+}
+
+.challenge-head span {
+ color: var(--ink-soft, #5a6b67);
+ font-size: 0.82rem;
+}
+
+.challenge-board {
+ padding: 12px;
+}
+
+.challenge-empty {
+ color: var(--ink-soft, #5a6b67);
+ font-size: 0.85rem;
+}
+
+.challenge-verdict {
+ border-radius: 8px;
+ font-weight: 800;
+ margin-bottom: 10px;
+ padding: 8px 12px;
+}
+
+.challenge-verdict.win {
+ background: #e3f3dc;
+ color: #2f6b1f;
+}
+
+.challenge-verdict.lose {
+ background: #f7e6df;
+ color: #9a3d22;
+}
+
+.challenge-verdict.tie {
+ background: #eef1ec;
+ color: #4a5b57;
+}
+
+.challenge-table {
+ border-collapse: collapse;
+ font-size: 0.85rem;
+ width: 100%;
+}
+
+.challenge-table th,
+.challenge-table td {
+ border-bottom: 1px solid #e4e8e2;
+ padding: 5px 8px;
+ text-align: right;
+}
+
+.challenge-table th:first-child,
+.challenge-table td:first-child {
+ text-align: left;
+}
+
+.challenge-table thead th {
+ color: var(--ink-soft, #5a6b67);
+ font-weight: 700;
+}
+
+.challenge-table td.better {
+ background: #e3f3dc;
+ font-weight: 800;
+}
+
.status-strip {
display: grid;
gap: 10px;
diff --git a/docs/playground.html b/docs/playground.html
index 0d3a6fa..d52e18e 100644
--- a/docs/playground.html
+++ b/docs/playground.html
@@ -124,6 +124,14 @@
Playground
+
+
+
+ Challenge — your edited agent vs. the shipped one, across 10 seeds
+
+
+
+