Add study margin display settings

src/App.css

@@ -461,6 +461,44 @@ textarea:focus-visible {
   background: #fffdf6;
 }
 
+.margin-section-header {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.collapse-button,
+.mini-settings {
+  border: 0;
+  background: transparent;
+  color: #657061;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.collapse-button {
+  padding: 0;
+  text-align: left;
+}
+
+.collapse-button::before {
+  margin-right: 5px;
+  color: #735c0f;
+  content: 'v';
+}
+
+.mini-settings {
+  width: auto;
+  height: auto;
+  padding: 3px 6px;
+  border: 1px solid #d8cfbf;
+  border-radius: 4px;
+  background: #fbf8ef;
+}
+
 .original-language-verse h3 {
   margin: 0;
   color: #657061;
@@ -512,33 +550,40 @@ textarea:focus-visible {
   outline: none;
 }
 
-.linked-word-list {
-  display: flex;
-  flex-wrap: wrap;
+.english-strong-line {
+  display: grid;
   gap: 8px;
   margin: 0 0 14px;
+  padding: 12px;
+  border: 1px solid #dfd6c2;
+  border-radius: 6px;
+  background: #fffdf6;
 }
 
-.word-link {
-  display: inline-flex;
-  align-items: baseline;
-  gap: 7px;
-  padding: 7px 9px;
-  border-color: #cfc8b8;
-  background: #f3efe4;
+.linked-line-text {
+  margin: 0;
   color: #202124;
-  font-size: 13px;
+  line-height: 1.65;
+  overflow-wrap: anywhere;
 }
 
-.word-link small {
-  color: #657061;
-  font-size: 11px;
-  font-weight: 800;
+.linked-word {
+  display: inline;
+  padding: 0 2px;
+  border-radius: 3px;
+  cursor: pointer;
+  overflow-wrap: anywhere;
 }
 
-.word-link.active {
-  border-color: #2f6f5e;
-  background: #e7f0eb;
+.linked-word + .linked-word {
+  margin-inline-start: 0.35em;
+}
+
+.linked-word:hover,
+.linked-word:focus-visible,
+.linked-word.active {
+  background: rgba(214, 168, 79, 0.25);
+  outline: none;
 }
 
 .strong-focus {
@@ -559,6 +604,11 @@ textarea:focus-visible {
   font-size: 12px;
 }
 
+.strong-focus > .margin-section-header span {
+  color: #657061;
+  font-size: 12px;
+}
+
 .strong-focus h4 {
   color: #1f211e;
   font-size: 22px;
@@ -970,6 +1020,37 @@ textarea:focus-visible {
   width: min(1080px, 100%);
 }
 
+.settings-modal {
+  width: min(780px, 100%);
+}
+
+.settings-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.settings-grid .modal-section:last-child {
+  grid-column: 1 / -1;
+}
+
+.settings-grid input[type='range'] {
+  padding: 0;
+}
+
+.checkbox-row {
+  display: flex !important;
+  gap: 9px !important;
+  align-items: center;
+  color: #252821 !important;
+  font-size: 14px !important;
+  text-transform: none !important;
+}
+
+.checkbox-row input {
+  width: auto;
+}
+
 .about-modal p {
   margin: 0;
   color: #3f443d;