diff --git a/style-bhl.css b/style-bhl.css
index 2c69b0a..dd096ad 100644
--- a/style-bhl.css
+++ b/style-bhl.css
@@ -1,229 +1,307 @@
-@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:ital,wght@0,400;0,700;1,400;1,700&display=fallback");
-@supports((display: -ms-grid) or (display: grid)) {
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:ital,wght@0,400;0,700;1,400;1,700&display=swap");
+
 :root {
-    --body-font: "Noto Sans SC", Verdana, "Microsoft YaHei", "微软雅黑", Geneva, sans-serif, STXihei, "华文细黑";
-    --white-monochrome: 252, 252, 252;
-    --black-monochrome: 12, 12, 12;
-    --bright-accent: 133, 0, 5;
-    --medium-accent: 100, 46, 44;
-    --dark-accent: 100, 3, 15;
-    --swatch-primary-darker: var(--medium-accent);
-    --swatch-menubg-hover-color: var(--black-monochrome);
-    --swatch-menutxt-dark-color: var(--black-monochrome);
-    --swatch-menutxt-light-color: var(--white-monochrome);
-    --swatch-menutxt-general-color: var(--swatch-menutxt-dark-color);
-    --swatch-border-color: var(--black-monochrome);
-    --swatch-text-secondary-color: var(--swatch-menutxt-light-color);
-    --sidebar-links-text: var(--swatch-menutxt-general-color);
-    --gradient-sidemenu-header: linear-gradient(10deg, rgba(var(--swatch-primary-darker), 0.45) 0%, rgba(var(--swatch-primary-darker), 0.55) 100%);
-    --sidebar-internal-border-thickness: 0.125rem;
-    --base-font-size: 0.9375rem;
+/* ===TYPEFACES=== */
+	--body-font: Inter, "Noto Sans SC", Verdana, "Microsoft YaHei", "微软雅黑",
+		Geneva, sans-serif, STXihei, "华文细黑";
+	--UI-font: PTRootUI, "方体", "PingFang SC", "黑体", "Heiti SC",
+		"Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto,
+		"Noto Sans CJK SC", sans-serif;
+	--title-font: var(--body-font);
+
+	/* ===BASE FONT SIZE & LINE HEIGHT=== */
+	--min-font-size: 0.8125rem; /* 13px */
+	--max-font-size: 0.9375rem; /* 15px */
+	--base-font-size:
+		clamp(
+			var(--min-font-size),
+			2vw,
+			var(--max-font-size)
+		);
+	--base-font-size: var(--max-font-size);
+
+/* ===VARIABLE FONT SETTINGS=== */
+	--ui-wght: 500;
+	--ui-hvr-wght: 500;
+	--ital: 0;
+	--slnt: 0;
+	--CASL: 0;
+	--CRSV: 0;
+	--MONO: 1;
+	--lnum: 1;
+	--pnum: 1;
+	--kern: 1;
+	--cpsp: 1;
+	--liga: 1;
+	--case: 1;
+	--clig: 1;
+	--dlig: 0;
+	--calt: 1;
+	--aalt: 0;
+	--ss01: 1;
+	--ss02: 0;
+	--ss03: 1;
+	--ss04: 1;
+	--zero: 1;
+	--cv11: 0;
+
+/* ===STANDARD THEME COLORS=== */
+	/* white */
+	--white-monochrome: 252, 252, 252;
+	/* black */
+	--black-monochrome: 12, 12, 12;
+	/* vivid theme color, the "default" accent color */
+	--bright-accent: 133, 0, 5;
+	/* theme color */
+	--medium-accent: 100, 46, 44;
+	/* darker theme color */
+	--dark-accent: 100, 3, 15;
+
+/* ===PRIMARY COLORS=== */
+	/* ===GENERAL COLORS=== */
+	--swatch-primary: var(--bright-accent);
+	--swatch-primary-darker: var(--medium-accent);
+	--swatch-primary-darkest: var(--dark-accent);
+	--swatch-border-color: var(--black-monochrome);
+
+/* ===MENU COLORS=== */
+	/* ===MENU TEXT COLORS=== */
+	--swatch-menutxt-dark-color: var(--black-monochrome);
+	--swatch-menutxt-light-color: var(--white-monochrome);
+	--swatch-menutxt-general-color: var(--swatch-menutxt-dark-color);
+
+/* ===SECONDARY & TERTIARY COLORS=== */
+	/* Text Colors for Secondary & Tertiary items like Sidebar Headers and Top-Bar Menu Text */
+	--swatch-text-secondary-color: var(--swatch-menutxt-light-color);
+
+/* ===STRUCTURAL SPACING ELEMENTS=== */
+	/* ===SIDEBAR MEASUREMENTS=== */
+	--sidebar-internal-border-thickness: 0.125rem;
 }
 
+/* ===OPENTYPE STYLING=== */
+
+/* Opentype Supported Styles and Variables */
+
+* {
+	-webkit-font-kerning: auto;
+	        font-kerning: auto;
+	font-variant-ligatures: common-ligatures contextual;
+	font-variant-numeric: lining-nums proportional-nums;
+	font-weight: var(--wght, revert);
+}
+
+@supports (font-variation-settings: inherit) {
+	* {
+		font-variation-settings:
+			"ital" var(--ital, 0),
+			"slnt" var(--slnt, 0),
+			"CASL" var(--CASL, 0),
+			"CRSV" var(--CRSV, 0),
+			"MONO" var(--MONO, 0),
+			"FLAR" var(--FLAR, 0);
+	}
+}
+
+@supports (font-feature-settings: inherit) {
+	* {
+		font-feature-settings:
+			"lnum" var(--lnum, 1),
+			"pnum" var(--pnum, 1),
+			"kern" var(--kern, 1),
+			"cpsp" var(--cpsp, 1),
+			"liga" var(--liga, 1),
+			"case" var(--case, 1),
+			"clig" var(--clig, 1),
+			"dlig" var(--dlig, 0),
+			"calt" var(--calt, 1),
+			"aalt" var(--aalt, 0),
+			"ss01" var(--ss01, 1),
+			"ss02" var(--ss02, 0),
+			"ss03" var(--ss03, 1),
+			"ss04" var(--ss04, 1),
+			"zero" var(--zero, 1),
+			"cv11" var(--cv11, 0);
+	}
+}
+
+/* ===HTML & BODY GLOBAL STYLING=== */
+
+html {
+	font-size: 1em;
+	line-height: var(--base-line-height);
+}
+
+html,
 body {
-    background: transparent;
-    margin: 0;
-    padding: 0;
-    font-family: var(--body-font);
-    font-size: var(--base-font-size);
-    font-weight: 400;
-    -webkit-font-kerning: auto;
-    font-kerning: auto;
-    font-variant-ligatures: common-ligatures contextual;
-    font-variant-numeric: lining-nums proportional-nums;
-    -webkit-font-feature-settings: "lnum","kern","clig","calt";
-    -moz-font-feature-settings: "lnum","kern","clig","calt";
-    font-feature-settings: "lnum", "kern", "clig", "calt";
-    overflow: hidden;
+	margin: 0;
+	padding: 0;
+	font-variant-ligatures: none;
 }
 
+body {
+	font-family: var(--body-font);
+}
+
+/* ===SUB-BLOCK=== */
+
 .side-block {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-    -webkit-flex-direction: row;
-    -moz-box-orient: horizontal;
-    -moz-box-direction: normal;
-    -ms-flex-direction: row;
-    flex-direction: row;
-    -webkit-flex-wrap: wrap;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    -webkit-flex-shrink: 0;
-    -ms-flex-negative: 0;
-    flex-shrink: 0;
-    border: 0;
-    margin-top: 1rem;
-    background: rgba(0,0,0,0);
-    overflow: hidden;
+		/* ===SIDEBLOCK MENU=== */
+	--sideblock-bg-color: 0,0,0,0; /* Transparent */
+	--sideblock-heading-border-color: var(--swatch-primary);
+	--sideblock-heading-bg-color: 0,0,0,0; /* Transparent */
+	--sideblock-heading-text-color: var(--swatch-primary-darker);
+
+		/* ===MENU-ITEMS=== */
+	--sidebar-border-color: var(--swatch-border-color), 0.08;
+
+	--sidebar-links-text: var(--swatch-menutxt-general-color);
+	--sidebar-links-bg-color: 0,0,0,0; /* Transparent */
+	--sidebar-links-hover-bg-color: var(--swatch-primary);
+	--sidebar-links-hover-text-color: var(--swatch-text-secondary-color);
+
+	display: grid;
+	grid-template-rows: repeat(auto-fit, minmax(1.3125rem, 1fr));
+	margin: 0.5rem 0.5rem 0 0;
+	border: 0;
+	background: rgb(var(--sideblock-bg-color));
+	font-family: var(--UI-font), var(--header-font);
+	direction: ltr;
 }
 
+/* ===HEADING=== */
+
 .side-block .heading {
-    margin-top: 0.5rem;
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    min-height: 1.25rem;
-    background: var(--gradient-sidemenu-header);
+	display: flex;
+	align-items: flex-end;
+	justify-content: flex-start;
+	min-height: 1.5rem;
+	margin: 0 0 0.25rem 0;
+	box-shadow: 0 0.0625rem 0 0 rgb(var(--sideblock-heading-border-color));
+	background-color: rgb(var(--sideblock-heading-bg-color));
 }
 
 .side-block .heading p {
-    --text-shadow: rgb(var(--swatch-border-color));
-    margin: 0;
-    color: rgb(252, 252, 252);
-    color: rgb(var(--swatch-text-secondary-color));
-    height: 1.25rem;
-    line-height: 1.25rem;
-    text-transform: uppercase;
-    font-size: -webkit-calc((var(--base-font-size) * (14/15)) * 0.9);
-    font-size: -moz-calc((var(--base-font-size) * (14/15)) * 0.9);
-    font-size: calc((var(--base-font-size) * (14/15)) * 0.9);
-    font-weight: 700;
-    letter-spacing: 0.016em;
-    text-align: center;
-    text-shadow: 0.063rem 0.063rem 0.063rem var(--text-shadow);
-    display: block;
-    cursor: default;
-}
-
-.side-block .heading p a {
-    display: block;
-    cursor: pointer;
+	--wght: calc(var(--ui-wght) + 300);
+	font-weight: var(--wght);
+	margin: 0;
+	color: rgb(var(--sideblock-heading-text-color));
+	font-family: var(--title-font);
+	font-size: calc((var(--base-font-size) * (14 / 15)) * 0.9);
+	letter-spacing: 0.016em;
+	line-height: 1.15;
+	text-indent: 0.25rem;
+	text-transform: uppercase;
+	cursor: pointer;
 }
 
+/* ===MENU ITEMS=== */
+
 .side-block div.menu-item {
-    margin: 0;
-    text-align: right;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-    -webkit-flex-direction: row;
-    -moz-box-orient: horizontal;
-    -moz-box-direction: normal;
-    -ms-flex-direction: row;
-    flex-direction: row;
-    -webkit-flex-wrap: nowrap;
-    -ms-flex-wrap: nowrap;
-    flex-wrap: nowrap;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
-    -moz-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    -webkit-box-pack: start;
-    -webkit-justify-content: flex-start;
-    -moz-box-pack: start;
-    -ms-flex-pack: start;
-    justify-content: flex-start;
-    -webkit-flex-shrink: 0;
-    -ms-flex-negative: 0;
-    flex-shrink: 0;
-    -webkit-flex-basis: 100%;
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    font-size: 0;
-    min-height: -webkit-calc(1.5rem - var(--sidebar-internal-border-thickness));
-    min-height: -moz-calc(1.5rem - var(--sidebar-internal-border-thickness));
-    min-height: calc(1.5rem - var(--sidebar-internal-border-thickness));
-    border-bottom: var(--sidebar-internal-border-thickness) solid rgba(var(--swatch-border-color), 0.08);
+	display: flex;
+	flex-basis: 100%;
+	flex-flow: row wrap;
+	flex-shrink: 0;
+	align-items: center;
+	justify-content: flex-start;
+	height: 1.5rem;
+	min-height: 1.5rem;
+	margin: 0;
+	padding: 0;
+	box-shadow:
+		inset 0 calc(var(--sidebar-internal-border-thickness) * -1) 0 0 rgba(var(--sidebar-border-color));
+	font-size: 0;
 }
 
-.side-block div.menu-item img {
-    display: none;
+/* ===MAIN LINKS & TEXT=== */
+
+.side-block div.menu-item a {
+	position: relative;
+	z-index: 2;
+	height: inherit;
+	overflow: hidden;
+}
+
+.side-block div.menu-item a,
+.side-block div.menu-item a:visited {
+	--wght: var(--ui-wght);
+	font-weight: var(--wght);
+	display: flex;
+	flex-grow: 2;
+	justify-content: flex-start;
+	height: 1.5em;
+	margin: 0;
+	padding: 0 0.6em;
+	transition:
+		background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+		color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+		font-weight 200ms cubic-bezier(0.4, 0, 0.2, 1),
+		font-variation-settings 200ms cubic-bezier(0.4, 0, 0.2, 1);
+	background-clip: padding-box;
+	background-color: rgba(var(--sidebar-links-bg-color));
+	color: rgb(var(--sidebar-links-text));
+	font-size: calc(var(--base-font-size) * 0.93333);
+	letter-spacing: 0.04em;
+	line-height: 1.5;
+	text-decoration: none;
 }
 
 .side-block div.menu-item a {
-    position: relative;
-    z-index: 2;
-    padding: 0 0.6em;
-    margin: 0;
-    color: rgb(12, 12, 12);
-    color: rgb(var(--sidebar-links-text));
-    font-size: -webkit-calc(var(--base-font-size) * (14/15));
-    font-size: -moz-calc(var(--base-font-size) * (14/15));
-    font-size: calc(var(--base-font-size) * (14/15));
-    letter-spacing: 0.04em;
-    background-color: rgba(12, 12, 12, 0);
-    background-color: rgba(var(--swatch-menubg-hover-color), 0);
-    -webkit-transition: background-color 80ms cubic-bezier(0.4, 0, 0.2, 1);
-    -moz-transition: background-color 80ms cubic-bezier(0.4, 0, 0.2, 1);
-    -o-transition: background-color 80ms cubic-bezier(0.4, 0, 0.2, 1);
-    transition: background-color 80ms cubic-bezier(0.4, 0, 0.2, 1);
-    display: block;
-    height: -webkit-calc(1.5rem - var(--sidebar-internal-border-thickness));
-    height: -moz-calc(1.5rem - var(--sidebar-internal-border-thickness));
-    height: calc(1.5rem - var(--sidebar-internal-border-thickness));
-    line-height: -webkit-calc(1.5rem - var(--sidebar-internal-border-thickness));
-    line-height: -moz-calc(1.5rem - var(--sidebar-internal-border-thickness));
-    line-height: calc(1.5rem - var(--sidebar-internal-border-thickness));
-    background-clip: padding-box;
-    -webkit-box-flex: 2;
-    -webkit-flex-grow: 2;
-    -moz-box-flex: 2;
-    -ms-flex-positive: 2;
-    flex-grow: 2;
-    text-align: left;
-    -webkit-box-pack: start;
-    -webkit-justify-content: flex-start;
-    -moz-box-pack: start;
-    -ms-flex-pack: start;
-    justify-content: flex-start;
-    overflow: hidden;
-    text-decoration: none;
-}
-
-.side-block div.menu-item a:visited,
-.side-block div.menu-item a:active {
-    color: rgb(12, 12, 12);
-    color: rgb(var(--sidebar-links-text));
-}
-
-.side-block div.menu-item a:hover {
-    background-color: rgba(12, 12, 12, 0.15);
-    background-color: rgba(var(--swatch-menubg-hover-color), 0.15);
-    text-decoration: none;
-}
-
-.side-block div.menu-item a::before,
-.side-block div.menu-item a:hover::before {
-    content: " ";
-    width: 125%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    background-color: rgb(var(--bright-accent),0.25);
-    opacity: 1;
-    z-index: -1;
-    -webkit-clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
-    clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
+	justify-content: flex-start;
+	padding: 0 0 0 calc(var(--base-font-size) * (14 / 15));
 }
 
+.side-block div.menu-item a:hover,
+.side-block div.menu-item a:active,
+.side-block div.menu-item a:focus-within {
+	--wght: var(--ui-hvr-wght);
+	font-weight: var(--wght);
+	background-color: rgba(var(--sidebar-links-hover-bg-color), 0.15);
+	color: rgb(var(--sidebar-links-hover-text-color));
+	text-decoration: none;
+}
+
+/* ===MAIN LINKS HOVER BG BAR=== */
+
+/* Menu Item Hover Color Bar */
+
 .side-block div.menu-item a::before {
-    -webkit-transform: translateX(-webkit-calc(-100% - 4rem));
-    -moz-transform: translateX(-moz-calc(-100% - 4rem));
-    -ms-transform: translateX(calc(-100% - 4rem));
-    -o-transform: translateX(calc(-100% - 4rem));
-    transform: translateX(calc(-100% - 4rem));
-    -webkit-transition: -webkit-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
-    -moz-transition: -moz-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
-    -o-transition: -o-transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
-    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
-    pointer-events: none;
-}
-
-.side-block div.menu-item a:hover::before {
-    -webkit-transform: translateX(-2rem);
-    -moz-transform: translateX(-2rem);
-    -ms-transform: translateX(-2rem);
-    -o-transform: translateX(-2rem);
-    transform: translateX(-2rem);
+	--clip-path:
+		polygon(
+			0 0,
+			0 0,
+			0 100%,
+			0 100%
+		);
+	content: " ";
+	position: absolute;
+	z-index: -1;
+	top: 0;
+	left: calc(var(--base-font-size) * (14 / 15) * -1);
+	width: calc(100% + calc(var(--base-font-size) * (14 / 15)));
+	height: 100%;
+	transition: -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1);
+	transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1);
+	transition: clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1);
+	opacity: 1;
+	background-color: rgb(var(--sidebar-links-hover-bg-color));
+	pointer-events: none;
+	-webkit-clip-path: var(--clip-path);
+	        clip-path: var(--clip-path);
+}
+
+.side-block div.menu-item a:hover::before,
+.side-block div.menu-item a:active::before,
+.side-block div.menu-item a:focus-within::before {
+	--clip-path:
+		polygon(
+			-15% 0,
+			115% 0,
+			100% 100%,
+			0 100%
+		);
 }
+
+.side-block div.menu-item img {
+	display: none;
 }