diff --git a/test/annotation_layer_builder_overrides.css b/test/annotation_layer_builder_overrides.css
index 4ed6e9c6a719a..8bcf91d0c95ee 100644
--- a/test/annotation_layer_builder_overrides.css
+++ b/test/annotation_layer_builder_overrides.css
@@ -17,59 +17,55 @@
 
 .annotationLayer {
   position: absolute;
-}
 
-.annotationLayer .wasCanvas {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-}
+  .wasCanvas {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
 
-.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
-  -webkit-appearance: none;
-}
+  .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
+    -webkit-appearance: none;
+  }
 
-.annotationLayer
-  :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder)
-  > a,
-.annotationLayer .popupTriggerArea::after,
-.annotationLayer
-  .fileAttachmentAnnotation:not(.hasFillAlpha)
-  .popupTriggerArea {
-  opacity: 0.2;
-  background: rgb(255 255 0);
-  box-shadow: 0 2px 10px rgb(255 255 0);
-}
-.annotationLayer .fileAttachmentAnnotation.hasFillAlpha {
-  outline: 2px solid yellow;
-}
+  :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder) > a,
+  .popupTriggerArea::after,
+  .fileAttachmentAnnotation:not(.hasFillAlpha) .popupTriggerArea {
+    opacity: 0.2;
+    background: rgb(255 255 0);
+    box-shadow: 0 2px 10px rgb(255 255 0);
+  }
+  .fileAttachmentAnnotation.hasFillAlpha {
+    outline: 2px solid yellow;
+  }
 
-.annotationLayer .hasClipPath::after {
-  box-shadow: none;
-}
+  .hasClipPath::after {
+    box-shadow: none;
+  }
 
-.annotationLayer .linkAnnotation.hasBorder {
-  background-color: rgb(255 255 0 / 0.2);
-}
+  .linkAnnotation.hasBorder {
+    background-color: rgb(255 255 0 / 0.2);
+  }
 
-.annotationLayer .popupTriggerArea::after {
-  display: block;
-  width: 100%;
-  height: 100%;
-  content: "";
-}
+  .popupTriggerArea::after {
+    display: block;
+    width: 100%;
+    height: 100%;
+    content: "";
+  }
 
-.annotationLayer .popup :is(h1, p) {
-  margin: 0;
-  padding: 0;
-}
+  .popup :is(h1, p) {
+    margin: 0;
+    padding: 0;
+  }
 
-.annotationLayer .annotationTextContent {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  opacity: 0.4;
-  background-color: transparent;
-  color: red;
-  font-size: 10px;
+  .annotationTextContent {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 0.4;
+    background-color: transparent;
+    color: red;
+    font-size: 10px;
+  }
 }
diff --git a/web/annotation_layer_builder.css b/web/annotation_layer_builder.css
index e53db8b37be16..215f3bf43eec8 100644
--- a/web/annotation_layer_builder.css
+++ b/web/annotation_layer_builder.css
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-:root {
+.annotationLayer {
   --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
   --input-focus-border-color: Highlight;
   --input-focus-outline: 1px solid Canvas;
@@ -21,355 +21,343 @@
   --input-disabled-border-color: transparent;
   --input-hover-border-color: black;
   --link-outline: none;
-}
 
-@media screen and (forced-colors: active) {
-  :root {
+  @media screen and (forced-colors: active) {
     --input-focus-border-color: CanvasText;
     --input-unfocused-border-color: ActiveText;
     --input-disabled-border-color: GrayText;
     --input-hover-border-color: Highlight;
     --link-outline: 1.5px solid LinkText;
     --hcm-highligh-filter: invert(100%);
-  }
-  .annotationLayer .textWidgetAnnotation :is(input, textarea):required,
-  .annotationLayer .choiceWidgetAnnotation select:required,
-  .annotationLayer
-    .buttonWidgetAnnotation:is(.checkBox, .radioButton)
-    input:required {
-    outline: 1.5px solid selectedItem;
-  }
 
-  .annotationLayer .linkAnnotation:hover {
-    backdrop-filter: var(--hcm-highligh-filter);
+    .textWidgetAnnotation :is(input, textarea):required,
+    .choiceWidgetAnnotation select:required,
+    .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
+      outline: 1.5px solid selectedItem;
+    }
+
+    .linkAnnotation {
+      outline: var(--link-outline);
+
+      &:hover {
+        backdrop-filter: var(--hcm-highligh-filter);
+      }
+
+      & > a:hover {
+        opacity: 0 !important;
+        background: none !important;
+        box-shadow: none;
+      }
+    }
+
+    .popupAnnotation .popup {
+      outline: calc(1.5px * var(--scale-factor)) solid CanvasText !important;
+      background-color: ButtonFace !important;
+      color: ButtonText !important;
+    }
+
+    .highlightArea:hover::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      backdrop-filter: var(--hcm-highligh-filter);
+      content: "";
+      pointer-events: none;
+    }
+
+    .popupAnnotation.focused .popup {
+      outline: calc(3px * var(--scale-factor)) solid Highlight !important;
+    }
   }
 
-  .annotationLayer .linkAnnotation > a:hover {
-    opacity: 0 !important;
-    background: none !important;
-    box-shadow: none;
-  }
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  transform-origin: 0 0;
+  z-index: 3;
 
-  .annotationLayer .popupAnnotation .popup {
-    outline: calc(1.5px * var(--scale-factor)) solid CanvasText !important;
-    background-color: ButtonFace !important;
-    color: ButtonText !important;
+  &[data-main-rotation="90"] .norotate {
+    transform: rotate(270deg) translateX(-100%);
+  }
+  &[data-main-rotation="180"] .norotate {
+    transform: rotate(180deg) translate(-100%, -100%);
+  }
+  &[data-main-rotation="270"] .norotate {
+    transform: rotate(90deg) translateY(-100%);
   }
 
-  .annotationLayer .highlightArea:hover::after {
+  canvas {
     position: absolute;
-    top: 0;
-    left: 0;
     width: 100%;
     height: 100%;
-    backdrop-filter: var(--hcm-highligh-filter);
-    content: "";
     pointer-events: none;
   }
 
-  .annotationLayer .popupAnnotation.focused .popup {
-    outline: calc(3px * var(--scale-factor)) solid Highlight !important;
+  section {
+    position: absolute;
+    text-align: initial;
+    pointer-events: auto;
+    box-sizing: border-box;
+    transform-origin: 0 0;
   }
-}
-
-.annotationLayer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-  transform-origin: 0 0;
-  z-index: 3;
-}
 
-.annotationLayer[data-main-rotation="90"] .norotate {
-  transform: rotate(270deg) translateX(-100%);
-}
-.annotationLayer[data-main-rotation="180"] .norotate {
-  transform: rotate(180deg) translate(-100%, -100%);
-}
-.annotationLayer[data-main-rotation="270"] .norotate {
-  transform: rotate(90deg) translateY(-100%);
-}
-
-.annotationLayer canvas {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-}
-
-.annotationLayer section {
-  position: absolute;
-  text-align: initial;
-  pointer-events: auto;
-  box-sizing: border-box;
-  transform-origin: 0 0;
-}
-
-.annotationLayer .linkAnnotation {
-  outline: var(--link-outline);
-}
-
-.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a {
-  position: absolute;
-  font-size: 1em;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
+  :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a {
+    position: absolute;
+    font-size: 1em;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
 
-.annotationLayer
   :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder)
-  > a:hover {
-  opacity: 0.2;
-  background-color: rgb(255 255 0);
-  box-shadow: 0 2px 10px rgb(255 255 0);
-}
+    > a:hover {
+    opacity: 0.2;
+    background-color: rgb(255 255 0);
+    box-shadow: 0 2px 10px rgb(255 255 0);
+  }
 
-.annotationLayer .linkAnnotation.hasBorder:hover {
-  background-color: rgb(255 255 0 / 0.2);
-}
+  .linkAnnotation.hasBorder:hover {
+    background-color: rgb(255 255 0 / 0.2);
+  }
 
-.annotationLayer .hasBorder {
-  background-size: 100% 100%;
-}
+  .hasBorder {
+    background-size: 100% 100%;
+  }
 
-.annotationLayer .textAnnotation img {
-  position: absolute;
-  cursor: pointer;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-}
+  .textAnnotation img {
+    position: absolute;
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
 
-.annotationLayer .textWidgetAnnotation :is(input, textarea),
-.annotationLayer .choiceWidgetAnnotation select,
-.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
-  background-image: var(--annotation-unfocused-field-background);
-  border: 2px solid var(--input-unfocused-border-color);
-  box-sizing: border-box;
-  font: calc(9px * var(--scale-factor)) sans-serif;
-  height: 100%;
-  margin: 0;
-  vertical-align: top;
-  width: 100%;
-}
+  .textWidgetAnnotation :is(input, textarea),
+  .choiceWidgetAnnotation select,
+  .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
+    background-image: var(--annotation-unfocused-field-background);
+    border: 2px solid var(--input-unfocused-border-color);
+    box-sizing: border-box;
+    font: calc(9px * var(--scale-factor)) sans-serif;
+    height: 100%;
+    margin: 0;
+    vertical-align: top;
+    width: 100%;
+  }
 
-.annotationLayer .textWidgetAnnotation :is(input, textarea):required,
-.annotationLayer .choiceWidgetAnnotation select:required,
-.annotationLayer
-  .buttonWidgetAnnotation:is(.checkBox, .radioButton)
-  input:required {
-  outline: 1.5px solid red;
-}
+  .textWidgetAnnotation :is(input, textarea):required,
+  .choiceWidgetAnnotation select:required,
+  .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
+    outline: 1.5px solid red;
+  }
 
-.annotationLayer .choiceWidgetAnnotation select option {
-  padding: 0;
-}
+  .choiceWidgetAnnotation select option {
+    padding: 0;
+  }
 
-.annotationLayer .buttonWidgetAnnotation.radioButton input {
-  border-radius: 50%;
-}
+  .buttonWidgetAnnotation.radioButton input {
+    border-radius: 50%;
+  }
 
-.annotationLayer .textWidgetAnnotation textarea {
-  resize: none;
-}
+  .textWidgetAnnotation textarea {
+    resize: none;
+  }
 
-.annotationLayer .textWidgetAnnotation :is(input, textarea)[disabled],
-.annotationLayer .choiceWidgetAnnotation select[disabled],
-.annotationLayer
-  .buttonWidgetAnnotation:is(.checkBox, .radioButton)
-  input[disabled] {
-  background: none;
-  border: 2px solid var(--input-disabled-border-color);
-  cursor: not-allowed;
-}
+  .textWidgetAnnotation :is(input, textarea)[disabled],
+  .choiceWidgetAnnotation select[disabled],
+  .buttonWidgetAnnotation:is(.checkBox, .radioButton) input[disabled] {
+    background: none;
+    border: 2px solid var(--input-disabled-border-color);
+    cursor: not-allowed;
+  }
 
-.annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
-.annotationLayer .choiceWidgetAnnotation select:hover,
-.annotationLayer
-  .buttonWidgetAnnotation:is(.checkBox, .radioButton)
-  input:hover {
-  border: 2px solid var(--input-hover-border-color);
-}
-.annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
-.annotationLayer .choiceWidgetAnnotation select:hover,
-.annotationLayer .buttonWidgetAnnotation.checkBox input:hover {
-  border-radius: 2px;
-}
+  .textWidgetAnnotation :is(input, textarea):hover,
+  .choiceWidgetAnnotation select:hover,
+  .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:hover {
+    border: 2px solid var(--input-hover-border-color);
+  }
+  .textWidgetAnnotation :is(input, textarea):hover,
+  .choiceWidgetAnnotation select:hover,
+  .buttonWidgetAnnotation.checkBox input:hover {
+    border-radius: 2px;
+  }
 
-.annotationLayer .textWidgetAnnotation :is(input, textarea):focus,
-.annotationLayer .choiceWidgetAnnotation select:focus {
-  background: none;
-  border: 2px solid var(--input-focus-border-color);
-  border-radius: 2px;
-  outline: var(--input-focus-outline);
-}
+  .textWidgetAnnotation :is(input, textarea):focus,
+  .choiceWidgetAnnotation select:focus {
+    background: none;
+    border: 2px solid var(--input-focus-border-color);
+    border-radius: 2px;
+    outline: var(--input-focus-outline);
+  }
 
-.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus {
-  background-image: none;
-  background-color: transparent;
-}
+  .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus {
+    background-image: none;
+    background-color: transparent;
+  }
 
-.annotationLayer .buttonWidgetAnnotation.checkBox :focus {
-  border: 2px solid var(--input-focus-border-color);
-  border-radius: 2px;
-  outline: var(--input-focus-outline);
-}
+  .buttonWidgetAnnotation.checkBox :focus {
+    border: 2px solid var(--input-focus-border-color);
+    border-radius: 2px;
+    outline: var(--input-focus-outline);
+  }
 
-.annotationLayer .buttonWidgetAnnotation.radioButton :focus {
-  border: 2px solid var(--input-focus-border-color);
-  outline: var(--input-focus-outline);
-}
+  .buttonWidgetAnnotation.radioButton :focus {
+    border: 2px solid var(--input-focus-border-color);
+    outline: var(--input-focus-outline);
+  }
 
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,
-.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
-  background-color: CanvasText;
-  content: "";
-  display: block;
-  position: absolute;
-}
+  .buttonWidgetAnnotation.checkBox input:checked::before,
+  .buttonWidgetAnnotation.checkBox input:checked::after,
+  .buttonWidgetAnnotation.radioButton input:checked::before {
+    background-color: CanvasText;
+    content: "";
+    display: block;
+    position: absolute;
+  }
 
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
-  height: 80%;
-  left: 45%;
-  width: 1px;
-}
+  .buttonWidgetAnnotation.checkBox input:checked::before,
+  .buttonWidgetAnnotation.checkBox input:checked::after {
+    height: 80%;
+    left: 45%;
+    width: 1px;
+  }
 
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before {
-  transform: rotate(45deg);
-}
+  .buttonWidgetAnnotation.checkBox input:checked::before {
+    transform: rotate(45deg);
+  }
 
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
-  transform: rotate(-45deg);
-}
+  .buttonWidgetAnnotation.checkBox input:checked::after {
+    transform: rotate(-45deg);
+  }
 
-.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
-  border-radius: 50%;
-  height: 50%;
-  left: 30%;
-  top: 20%;
-  width: 50%;
-}
+  .buttonWidgetAnnotation.radioButton input:checked::before {
+    border-radius: 50%;
+    height: 50%;
+    left: 30%;
+    top: 20%;
+    width: 50%;
+  }
 
-.annotationLayer .textWidgetAnnotation input.comb {
-  font-family: monospace;
-  padding-left: 2px;
-  padding-right: 0;
-}
+  .textWidgetAnnotation input.comb {
+    font-family: monospace;
+    padding-left: 2px;
+    padding-right: 0;
+  }
 
-.annotationLayer .textWidgetAnnotation input.comb:focus {
-  /*
-   * Letter spacing is placed on the right side of each character. Hence, the
-   * letter spacing of the last character may be placed outside the visible
-   * area, causing horizontal scrolling. We avoid this by extending the width
-   * when the element has focus and revert this when it loses focus.
-   */
-  width: 103%;
-}
+  .textWidgetAnnotation input.comb:focus {
+    /*
+     * Letter spacing is placed on the right side of each character. Hence, the
+     * letter spacing of the last character may be placed outside the visible
+     * area, causing horizontal scrolling. We avoid this by extending the width
+     * when the element has focus and revert this when it loses focus.
+     */
+    width: 103%;
+  }
 
-.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
-  appearance: none;
-}
+  .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
+    appearance: none;
+  }
 
-.annotationLayer .fileAttachmentAnnotation .popupTriggerArea {
-  height: 100%;
-  width: 100%;
-}
+  .fileAttachmentAnnotation .popupTriggerArea {
+    height: 100%;
+    width: 100%;
+  }
 
-.annotationLayer .popupAnnotation {
-  position: absolute;
-  font-size: calc(9px * var(--scale-factor));
-  pointer-events: none;
-  width: max-content;
-  max-width: 45%;
-  height: auto;
-}
+  .popupAnnotation {
+    position: absolute;
+    font-size: calc(9px * var(--scale-factor));
+    pointer-events: none;
+    width: max-content;
+    max-width: 45%;
+    height: auto;
+  }
 
-.annotationLayer .popup {
-  background-color: rgb(255 255 153);
-  box-shadow: 0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor))
-    rgb(136 136 136);
-  border-radius: calc(2px * var(--scale-factor));
-  outline: 1.5px solid rgb(255 255 74);
-  padding: calc(6px * var(--scale-factor));
-  cursor: pointer;
-  font: message-box;
-  white-space: normal;
-  word-wrap: break-word;
-  pointer-events: auto;
-}
+  .popup {
+    background-color: rgb(255 255 153);
+    box-shadow: 0 calc(2px * var(--scale-factor))
+      calc(5px * var(--scale-factor)) rgb(136 136 136);
+    border-radius: calc(2px * var(--scale-factor));
+    outline: 1.5px solid rgb(255 255 74);
+    padding: calc(6px * var(--scale-factor));
+    cursor: pointer;
+    font: message-box;
+    white-space: normal;
+    word-wrap: break-word;
+    pointer-events: auto;
+  }
 
-.annotationLayer .popupAnnotation.focused .popup {
-  outline-width: 3px;
-}
+  .popupAnnotation.focused .popup {
+    outline-width: 3px;
+  }
 
-.annotationLayer .popup * {
-  font-size: calc(9px * var(--scale-factor));
-}
+  .popup * {
+    font-size: calc(9px * var(--scale-factor));
+  }
 
-.annotationLayer .popup > .header {
-  display: inline-block;
-}
+  .popup > .header {
+    display: inline-block;
+  }
 
-.annotationLayer .popup > .header h1 {
-  display: inline;
-}
+  .popup > .header h1 {
+    display: inline;
+  }
 
-.annotationLayer .popup > .header .popupDate {
-  display: inline-block;
-  margin-left: calc(5px * var(--scale-factor));
-  width: fit-content;
-}
+  .popup > .header .popupDate {
+    display: inline-block;
+    margin-left: calc(5px * var(--scale-factor));
+    width: fit-content;
+  }
 
-.annotationLayer .popupContent {
-  border-top: 1px solid rgb(51 51 51);
-  margin-top: calc(2px * var(--scale-factor));
-  padding-top: calc(2px * var(--scale-factor));
-}
+  .popupContent {
+    border-top: 1px solid rgb(51 51 51);
+    margin-top: calc(2px * var(--scale-factor));
+    padding-top: calc(2px * var(--scale-factor));
+  }
 
-.annotationLayer .richText > * {
-  white-space: pre-wrap;
-  font-size: calc(9px * var(--scale-factor));
-}
+  .richText > * {
+    white-space: pre-wrap;
+    font-size: calc(9px * var(--scale-factor));
+  }
 
-.annotationLayer .popupTriggerArea {
-  cursor: pointer;
-}
+  .popupTriggerArea {
+    cursor: pointer;
+  }
 
-.annotationLayer section svg {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-}
+  section svg {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
 
-.annotationLayer .annotationTextContent {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  color: transparent;
-  user-select: none;
-  pointer-events: none;
-}
+  .annotationTextContent {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    color: transparent;
+    user-select: none;
+    pointer-events: none;
 
-.annotationLayer .annotationTextContent span {
-  width: 100%;
-  display: inline-block;
-}
+    span {
+      width: 100%;
+      display: inline-block;
+    }
+  }
 
-.annotationLayer svg.quadrilateralsContainer {
-  contain: strict;
-  width: 0;
-  height: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: -1;
+  svg.quadrilateralsContainer {
+    contain: strict;
+    width: 0;
+    height: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+  }
 }