Heavier box borders, shaded givens

index.html

@@ -20,11 +20,11 @@
   .card .big{font-size:20px;font-weight:700}
   table.g{border-collapse:collapse;margin:0 auto;font-family:ui-monospace,monospace}
   table.g td{width:26px;height:26px;text-align:center;font-size:15px;border:1px solid #cbd5e1;padding:0}
-  table.g tr:nth-child(3n) td{border-bottom:2px solid #334155}
-  table.g tr:first-child td{border-top:2px solid #334155}
-  table.g td:nth-child(3n){border-right:2px solid #334155}
-  table.g td:first-child{border-left:2px solid #334155}
-  .gv{background:#e5e7eb;font-weight:700}
+  table.g tr:nth-child(3n) td{border-bottom:3px solid #111}
+  table.g tr:first-child td{border-top:3px solid #111}
+  table.g td:nth-child(3n){border-right:3px solid #111}
+  table.g td:first-child{border-left:3px solid #111}
+  .gv{background:#d1d5db;font-weight:700}
   .ok{background:#bbf7d0;color:#14532d}
   .bad{background:#fecaca;color:#7f1d1d}
   .na{background:#f1f5f9;color:#94a3b8}
@@ -107,7 +107,7 @@ function render() {
   const id = document.getElementById("pick").value;
   const s = SAMPLES.find(x => x.id === id);
   const given = promptGrid(s.prompt_text);
-  let html = `<div class="card"><h3>Puzzle</h3>${table(given.map(v => v || ""), given.map(v => v ? "gv" : ""))}
+  let html = `<div class="card"><h3>Puzzle<br><span style="font-weight:400;font-size:12px">input</span></h3>${table(given.map(v => v || ""), given.map(v => v ? "gv" : ""))}
     <div class="sub">${given.filter(v => !v).length} blanks · difficulty ${s.difficulty} (${bucket(s.difficulty)})</div></div>`;
   for (const [key, name, kind] of MODELS) {
     const r = score(s, key);