Wire Strong's dictionary concordance UI

src/App.css

@@ -218,6 +218,37 @@ input:focus-visible {
   line-height: 1.55;
 }
 
+.linked-word-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 22px;
+  padding-top: 18px;
+  border-top: 1px solid #e4e0d6;
+}
+
+.word-link {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 7px;
+  padding: 7px 9px;
+  border-color: #cfc8b8;
+  background: #f3efe4;
+  color: #202124;
+  font-size: 13px;
+}
+
+.word-link small {
+  color: #657061;
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.word-link.active {
+  border-color: #2f6f5e;
+  background: #e7f0eb;
+}
+
 .study-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
@@ -255,13 +286,17 @@ input:focus-visible {
   padding-top: 14px;
 }
 
-.strong-entry {
-  border: 1px solid #e4e0d6;
+.strong-focus {
+  display: grid;
+  gap: 9px;
+  margin-top: 14px;
+  padding: 16px;
+  border: 1px solid #b9cabf;
   border-radius: 8px;
-  padding: 14px;
-  background: #fbfaf4;
+  background: #eef6f1;
 }
 
+.strong-focus div,
 .strong-entry div {
   display: flex;
   justify-content: space-between;
@@ -271,6 +306,39 @@ input:focus-visible {
   font-size: 12px;
 }
 
+.strong-focus h4 {
+  margin: 0;
+  color: #1f211e;
+  font-size: 22px;
+}
+
+.strong-focus p {
+  margin: 0;
+  color: #3f443d;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.strong-focus button {
+  justify-self: start;
+  margin-top: 4px;
+  background: #2f6f5e;
+  color: #ffffff;
+}
+
+.strong-entry {
+  border: 1px solid #e4e0d6;
+  border-radius: 8px;
+  padding: 14px;
+  background: #fbfaf4;
+  cursor: pointer;
+}
+
+.strong-entry.active {
+  border-color: #2f6f5e;
+  background: #f3faf6;
+}
+
 .strong-entry h4 {
   margin-top: 8px;
   color: #1f211e;