Add Strong display modes and book page boundaries

src/App.css

@@ -125,7 +125,7 @@ textarea:focus-visible {
 
 .page-controls {
   display: grid;
-  grid-template-columns: minmax(130px, 1.1fr) minmax(130px, 1.3fr) minmax(86px, 0.7fr) minmax(78px, 0.6fr);
+  grid-template-columns: minmax(130px, 1.1fr) minmax(130px, 1.3fr) minmax(86px, 0.7fr) minmax(78px, 0.6fr) minmax(120px, 0.9fr);
   gap: 8px;
   align-items: end;
 }
@@ -250,9 +250,13 @@ textarea:focus-visible {
 .strong-token {
   display: inline;
   position: relative;
+  cursor: pointer;
+}
+
+.strong-token.highlight,
+.strong-token.numbers {
   border-radius: 3px;
   box-shadow: inset 0 -0.45em 0 rgba(214, 168, 79, 0.22);
-  cursor: pointer;
 }
 
 .strong-token:hover,
@@ -266,23 +270,16 @@ textarea:focus-visible {
 }
 
 .strong-code {
-  display: inline-block;
-  margin: 0 2px 0 3px;
-  transform: translateY(-0.12em);
-  border: 1px solid rgba(138, 109, 46, 0.34);
-  border-radius: 4px;
-  padding: 0 3px;
-  background: #fff8e6;
+  margin-left: 2px;
   color: #735c0f;
   font-family: ui-sans-serif, system-ui, sans-serif;
   font-size: 9px;
   font-weight: 800;
-  line-height: 1.35;
+  line-height: 0;
+  vertical-align: super;
 }
 
 .strong-token.active .strong-code {
-  border-color: rgba(47, 111, 94, 0.42);
-  background: #e7f0eb;
   color: #225446;
 }