Checkpoint WebGL book renderer work

public/css/style.css

@@ -1940,7 +1940,8 @@ body.webgl-mode {
     background: #090705;
 }
 
-#webgl_canvas {
+#webgl_canvas,
+#scene {
     position: absolute;
     inset: 0;
     width: 100%;
@@ -1981,7 +1982,20 @@ body.webgl-mode {
     flex: 0 0 auto;
 }
 
+.control_group {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+}
+
+.control_group label,
+#lab_status {
+    white-space: nowrap;
+}
+
 #top_menu_controls button,
+.transport_button,
 .modal-overview-row {
     font-family: 'EB Garamond', serif;
     font-size: 14px;
@@ -1995,10 +2009,24 @@ body.webgl-mode {
 }
 
 #top_menu_controls button:hover,
+.transport_button:hover,
 .modal-overview-row:hover {
     background: rgba(87, 55, 31, 0.78);
 }
 
+.transport_button {
+    width: 28px;
+    height: 26px;
+    display: grid;
+    place-items: center;
+    padding: 0;
+}
+
+.transport_button:disabled {
+    cursor: var(--default-cursor, default);
+    opacity: 0.38;
+}
+
 #modal_overview {
     position: fixed;
     z-index: 45;
@@ -2038,47 +2066,6 @@ body.webgl-mode {
     color: rgba(246, 231, 201, 0.62);
 }
 
-body.webgl-mode #book {
-    position: fixed;
-    z-index: 20;
-    inset: 38px 0 0;
-    width: 100vw;
-    height: calc(100vh - 38px);
-    max-width: none;
-    max-height: none;
-    background: transparent;
-    pointer-events: none;
-    transform: none;
-    opacity: 0;
-}
-
-body.webgl-mode #page_left,
-body.webgl-mode #page_right {
-    pointer-events: none;
-    top: 10%;
-    bottom: auto;
-    height: 68vh;
-    max-height: 760px;
-    width: min(31vw, 500px);
-    background: #f2dfb8;
-    border: 0;
-    box-shadow: none;
-    opacity: 1;
-    mix-blend-mode: normal;
-}
-
-body.webgl-mode #page_left {
-    left: calc(50vw - min(33vw, 530px));
-    transform: none;
-    transform-origin: right center;
-}
-
-body.webgl-mode #page_right {
-    right: calc(50vw - min(33vw, 530px));
-    transform: none;
-    transform-origin: left center;
-}
-
 body.webgl-mode #lighting {
     display: none;
 }
@@ -2099,22 +2086,9 @@ body.webgl-mode #lighting {
         padding: 6px 7px;
     }
 
-    body.webgl-mode #book {
-        inset: 46px 0 0;
+    #lab_status,
+    .control_group label {
+        display: none;
     }
 
-    body.webgl-mode #page_left,
-    body.webgl-mode #page_right {
-        width: 44vw;
-        height: 66vh;
-        top: 12%;
-    }
-
-    body.webgl-mode #page_left {
-        left: 6vw;
-    }
-
-    body.webgl-mode #page_right {
-        right: 6vw;
-    }
 }