change units in CSS to properly scaled rem

yeah I should've done that from the start should have I

static/css/tree.css

@@ -1,9 +1,9 @@
 /*** Variables ***/
 
 :root {
-    --tree-indent-width: 2rem;
+    --tree-indent-width: 3.2rem;
     --transition-duration: 0.15s;
-    --button-bar-icon-size: 1.75rem;
+    --button-bar-icon-size: 2.8rem;
 }
 
 /*** Breadcrumbs ***/
@@ -33,8 +33,8 @@
     background-position: 50% 50%;
     opacity: 70%;
 
-    width: 2.25rem;
-    height: 1.2em;
+    width: 3.6rem;
+    height: 1.7rem;
 
     vertical-align: text-bottom;
 }
@@ -54,7 +54,7 @@
 
 .breadcrumbs > .root-breadcrumb {
     display: none; /* only when main logo is hidden */
-    margin-right: -8px;
+    margin-right: -0.8rem;
 
     & a,
     & svg {
@@ -62,9 +62,10 @@
     }
 
     & .logo {
+        /* NOTE: px used for pixel perfection */
         width: 48px;
         height: 48px;
-        padding: 8px;
+        padding: 0.8rem;
         color: var(--text-color);
     }
 }
@@ -97,7 +98,7 @@
 /* Use an indent level appropriate for the viewport. */
 .tree ul {
     --tree-responsive-indent-width: clamp(
-        var(--8px),
+        0.8rem,
         2vw,
         var(--tree-indent-width)
     );
@@ -105,7 +106,7 @@
     /* Draw indent guides. */
     padding-left: calc(var(--tree-responsive-indent-width) / 2);
     margin-left: calc(var(--tree-responsive-indent-width) / 2);
-    border-left: var(--1px) solid var(--tree-indent-guide-dim);
+    border-left: 0.1rem solid var(--tree-indent-guide-dim);
 
     transition: border-left-color var(--transition-duration);
 }
@@ -147,8 +148,8 @@
     & > div {
         box-sizing: border-box;
 
-        margin-bottom: calc(- var(--1px));
-        border-bottom: var(--1px) solid transparent;
+        margin-bottom: -0.1rem;
+        border-bottom: 0.1rem solid transparent;
         transition: border-bottom-color var(--transition-duration);
 
         &:hover {
@@ -168,7 +169,7 @@
     and notably *excludes* children. */
 .tree details > summary {
     /* Slightly round for elegance */
-    border-radius: var(--8px);
+    border-radius: 0.8rem;
 
     /* Give it a shaded background on hover */
     background-color: transparent;
@@ -183,7 +184,7 @@
 @media (hover: none) {
     .tree li > div:first-child,
     .tree li > details > summary:first-child {
-        border-bottom: var(--1px) solid var(--border-1);
+        border-bottom: 0.1rem solid var(--border-1);
     }
 
     .tree details > summary {
@@ -198,7 +199,7 @@
 th-bp {
     display: block;
     width: var(--tree-indent-width);
-    height: 1.75rem;
+    height: 2.8rem;
 
     background-image: var(--icon-leaf);
     background-repeat: no-repeat;
@@ -220,8 +221,8 @@ th-bp {
 /* bc - branch content */
 th-bc {
     display: block;
-    padding-top: var(--6px);
-    padding-bottom: var(--6px);
+    padding-top: 0.6rem;
+    padding-bottom: 0.6rem;
 
     /* Lines that are too long get very hard to read. */
     width: 100%;
@@ -246,7 +247,7 @@ th-bc {
         background-repeat: no-repeat;
         background-position: 50% 50%;
 
-        width: var(--16px);
+        width: 1.6rem;
         height: 1.2em;
 
         vertical-align: text-bottom;
@@ -267,16 +268,16 @@ th-bc {
 
         background-color: #058ef0;
         color: #ffffff;
-        padding: var(--4px) var(--12px);
-        margin-bottom: var(--4px);
-        border-radius: 100px;
+        padding: 0.4rem 1.2rem;
+        margin-bottom: 0.4rem;
+        border-radius: 100rem;
     }
 }
 
 /* bb - button bar */
 th-bb {
     height: 100%;
-    margin: var(--4px);
+    margin: 0.4rem;
 
     /* Should be displayed on the top of the branch rather than in the middle. */
     align-self: start;
@@ -300,18 +301,18 @@ th-bb {
 /* For media without hover functionality, th-bb should always be visible. */
 @media (hover: none) {
     :root {
-        --button-bar-icon-size: 2.25rem;
+        --button-bar-icon-size: 3.6rem;
     }
 
     .tree th-bb {
         opacity: 100%;
 
         /* Replace margin with button size to make it easier to click. */
-        margin: 0px;
+        margin: 0;
 
         & a.icon {
-            width: 2.25rem;
-            height: 2.25rem;
+            width: 3.6rem;
+            height: 3.6rem;
         }
     }
 }
@@ -399,16 +400,16 @@ th-bb .branch-date {
 /* branch-quote class for "air quote branches"; used to separate a subtree from a parent tree
    stylistically such that it's interpretable as a form of block quote. */
 ul.branch-quote {
-    --vertical-margin: var(--8px);
-    --padding: var(--8px);
+    --vertical-margin: 0.8rem;
+    --padding: 0.8rem;
 
     margin-top: var(--vertical-margin);
     margin-bottom: var(--vertical-margin);
     padding-top: var(--padding);
     padding-bottom: var(--padding);
     padding-right: var(--padding);
-    border: var(--1px) solid var(--border-1);
-    border-radius: var(--8px);
+    border: 0.1rem solid var(--border-1);
+    border-radius: 0.8rem;
 
     position: relative;
 
@@ -418,9 +419,9 @@ ul.branch-quote {
 
         content: "“";
         position: absolute;
-        right: var(--16px);
-        top: var(--1px);
-        font-size: 3rem;
+        right: 1.6rem;
+        top: 0.1rem;
+        font-size: 4.8rem;
         opacity: 50%;
 
         transition: opacity var(--transition-duration);