diff --git a/style.css b/style.css
index 9100dcf1..40b53c7c 100644
--- a/style.css
+++ b/style.css
@@ -7,6 +7,15 @@ body {
     width: 100%;
     height: 100%;
     --xRef-badge-size: 30px;
+    --ink: #33210f;
+    --ink-muted: #5b4224;
+    --panel: rgba(244, 230, 197, 0.86);
+    --panel-strong: rgba(250, 238, 207, 0.94);
+    --panel-border: #6d4a21;
+    --accent: #72604a;
+    --accent-dark: #3b2b17;
+    --focus: #f8d166;
+    --shadow: rgba(41, 24, 8, 0.28);
 }
 
 body, input, select, tspan {
@@ -19,6 +28,7 @@ body {
     display: flex;
     background: url('img/Backgrounds/bg_aoe2_hd_paper.jpg') repeat;
     font-size: 10pt;
+    color: var(--ink);
 }
 
 #techtree {
@@ -26,13 +36,58 @@ body {
 }
 
 a, a:hover, a:visited, a:active {
-    color: #4d3617;
+    color: var(--ink-muted);
+}
+
+a:hover {
+    color: var(--accent-dark);
+    text-decoration-thickness: 2px;
+}
+
+body,
+#wrapper,
+#metainfo,
+#techtree {
+    scrollbar-color: var(--accent) rgba(77, 54, 23, 0.18);
+    scrollbar-width: thin;
+}
+
+body::-webkit-scrollbar,
+#wrapper::-webkit-scrollbar,
+#metainfo::-webkit-scrollbar,
+#techtree::-webkit-scrollbar {
+    width: 13px;
+    height: 13px;
+}
+
+body::-webkit-scrollbar-track,
+#wrapper::-webkit-scrollbar-track,
+#metainfo::-webkit-scrollbar-track,
+#techtree::-webkit-scrollbar-track {
+    background-color: rgba(77, 54, 23, 0.16);
+    border: 1px solid rgba(77, 54, 23, 0.18);
+}
+
+body::-webkit-scrollbar-thumb,
+#wrapper::-webkit-scrollbar-thumb,
+#metainfo::-webkit-scrollbar-thumb,
+#techtree::-webkit-scrollbar-thumb {
+    background: linear-gradient(#8a7354, var(--accent));
+    border: 3px solid rgba(245, 231, 198, 0.72);
+    border-radius: 10px;
+}
+
+body::-webkit-scrollbar-thumb:hover,
+#wrapper::-webkit-scrollbar-thumb:hover,
+#metainfo::-webkit-scrollbar-thumb:hover,
+#techtree::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(#9a805d, #59422a);
 }
 
 .credits,
 .credits a {
     font-size: 8pt;
-    color: #4d3617;
+    color: var(--ink-muted);
 }
 
 .credits p {
@@ -56,10 +111,13 @@ a, a:hover, a:visited, a:active {
     position: absolute;
     display: none;
     width: 300px;
-    background-color: #eee;
-    border: 2px solid #bbb;
-    padding: 0.4rem;
+    background-color: var(--panel-strong);
+    border: 2px solid var(--panel-border);
+    box-shadow: 0 10px 26px var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
+    padding: 0.6rem;
     font-size: 10pt;
+    color: var(--ink);
+    z-index: 5;
 }
 
 #helptext p {
@@ -71,7 +129,7 @@ a, a:hover, a:visited, a:active {
     font-family: sans-serif;
     font-size: 9pt;
     text-transform: uppercase;
-    color: #4d3617;
+    color: var(--ink-muted);
     margin: 2px 10px 0 0;
     float: left;
 }
@@ -88,12 +146,20 @@ a, a:hover, a:visited, a:active {
     background-color: transparent;
     border: none;
     padding: 0;
+    cursor: pointer;
 }
 
 /* Style for helptext Cross-Reference image badges */
 #helptext #helptext__x_ref div button img {
     width: var(--xRef-badge-size);
     height: var(--xRef-badge-size);
+    border-radius: 50%;
+    transition: filter 120ms ease, opacity 120ms ease, transform 120ms ease;
+}
+
+#helptext #helptext__x_ref div button:hover img {
+    filter: brightness(1.12);
+    transform: translateY(-1px);
 }
 
 #helptext__x_ref h3 {
@@ -103,9 +169,12 @@ a, a:hover, a:visited, a:active {
 #helptext summary {
     font-family: sans-serif;
     font-size: 8pt;
-    color: #4d3617;
+    color: var(--ink-muted);
     text-transform: uppercase;
     cursor: pointer;
+    border-top: 1px solid rgba(77, 54, 23, 0.22);
+    margin-top: 0.45rem;
+    padding-top: 0.35rem;
 }
 
 #wrapper {
@@ -121,15 +190,17 @@ a, a:hover, a:visited, a:active {
 
 
 #techtree {
-    border-left: 6px solid #4d3617;
+    border-left: 6px solid var(--panel-border);
     flex: 1 0 auto;
     position: relative;
     width: calc(100vw - 22rem - 20px);
     overflow-x: scroll;
+    overflow-y: auto;
+    box-shadow: inset 12px 0 18px -18px #000;
 }
 
 #metainfo {
-    border-right: 6px solid #4d3617;
+    border-right: 6px solid var(--panel-border);
     border-right: none;
     width: 20rem;
     flex: 0 0 auto;
@@ -138,12 +209,14 @@ a, a:hover, a:visited, a:active {
     padding: 1rem;
     overflow: auto;
     height: 100vh;
+    background: linear-gradient(90deg, rgba(255, 245, 217, 0.28), rgba(221, 195, 138, 0.18));
+    box-shadow: inset -1px 0 rgba(255, 255, 255, 0.18), 5px 0 18px -18px #000;
 }
 
 #civselect {
     font-size: 18px;
     font-weight: bold;
-    background-color: #72604a;
+    background-color: var(--accent);
     flex: 1 0 auto;
     margin-right: 1rem;
     color: white;
@@ -151,6 +224,8 @@ a, a:hover, a:visited, a:active {
     box-shadow: inset 0 2px #3f4806, inset 2px -2px #768141, inset -2px 0 #768141;
     height: 36px;
     padding: 5px;
+    border: 1px solid var(--accent-dark);
+    cursor: pointer;
 }
 
 #civselect option {
@@ -158,7 +233,8 @@ a, a:hover, a:visited, a:active {
 }
 
 #civselect:focus {
-    outline: none;
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
 }
 
 #civinfo {
@@ -172,6 +248,10 @@ a, a:hover, a:visited, a:active {
     align-items: center;
 }
 
+#civlogo {
+    filter: drop-shadow(0 4px 5px var(--shadow));
+}
+
 #thanks {
     flex: 0 0 auto;
 }
@@ -239,6 +319,8 @@ hr:before {
     border: 1px solid rgba(0, 0, 0, 0.25);
     border-radius: 0;
     word-break: normal;
+    color: var(--ink);
+    cursor: pointer;
 }
 
 .locale-switcher:hover select {
@@ -247,7 +329,8 @@ hr:before {
 }
 
 .locale-switcher select:focus {
-    outline: none;
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
 }
 
 #navigation {
@@ -260,8 +343,43 @@ hr:before {
     cursor: pointer;
 }
 
+.node rect[id$="_bg"] {
+    stroke: rgba(255, 244, 210, 0.22);
+    stroke-width: 1px;
+    vector-effect: non-scaling-stroke;
+}
+
+.node:hover rect[id$="_bg"],
+.node.is-highlight rect[id$="_bg"] {
+    stroke: rgba(248, 209, 102, 0.72);
+    stroke-width: 1.5px;
+}
+
+.node rect[id$="_imgph"] {
+    stroke: rgba(255, 244, 210, 0.16);
+    stroke-width: 1px;
+    vector-effect: non-scaling-stroke;
+}
+
+.node image {
+    pointer-events: none;
+}
+
+.node text {
+    pointer-events: none;
+}
+
+.node rect[id$="_disabled_gray"] {
+    fill: #000;
+    opacity: 0.24;
+}
+
+.cross {
+    pointer-events: none;
+}
+
 .node.is-highlight .node__overlay {
-    stroke: #fff;
+    stroke: var(--focus);
     stroke-width: 3px;
 }
 
@@ -271,12 +389,12 @@ hr:before {
 
 .connection {
     fill: none;
-    stroke: #000;
+    stroke: rgba(0, 0, 0, 0.72);
     stroke-width: 2px;
 }
 
 .connection.is-highlight {
-    stroke: #fff;
+    stroke: var(--focus);
     stroke-width: 3px;
 }
 
@@ -288,9 +406,10 @@ hr:before {
 }
 
 a.inverted {
-    background-color: rgba(50,50,50,.5);
-    color: #ccc;
-    padding: .2em;
+    background-color: rgba(77, 54, 23, 0.72);
+    color: #f1e2c6;
+    padding: .2em .4em;
+    text-decoration: none;
 }
 
 .helptext__heading,
@@ -298,6 +417,17 @@ a.inverted {
     line-height: 1;
 }
 
+.helptext__heading {
+    color: var(--accent-dark);
+    font-weight: bold;
+}
+
+.helptext__desc,
+.helptext__stats,
+.helptext__upgrade_info {
+    line-height: 1.45;
+}
+
 .cost {
     white-space: nowrap;
     padding-left: .25em;