diff --git a/.stylelintrc.json b/.stylelintrc.json
index 76e040b..27cec21 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -1,10 +1,14 @@
 {
-	"extends": "stylelint-config-recommended-scss",
+	"extends": "stylelint-config-standard-scss",
 	"plugins": [
-		"stylelint-scss"
+		"stylelint-scss",
+		"stylelint-order"
 	],
 	"rules": {
 		"no-descending-specificity": null,
-		"scss/comment-no-empty": null
+		"number-max-precision": 12,
+		"custom-property-pattern": null,
+		"scss/comment-no-empty": null,
+		"order/properties-alphabetical-order": true
 	}
 }
diff --git a/_site/scss/styles.scss b/_site/scss/styles.scss
index 044e765..328ddb6 100644
--- a/_site/scss/styles.scss
+++ b/_site/scss/styles.scss
@@ -1,8 +1,8 @@
 @use "sass:meta";
 
-/* ==================== */
-/* == Vendors
-/* ==================== */
+// ====================
+// == Vendors
+// ====================
 @layer sseeeedd {
 	@include meta.load-css("sseeeedd/src/sseeeedd");
 }
diff --git a/package-lock.json b/package-lock.json
index b65f884..3f4103e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,7 +33,8 @@
 				"servor": "^4.0.2",
 				"shx": "^0.3.4",
 				"stylelint": "^15.10.3",
-				"stylelint-config-recommended-scss": "^13.0.0",
+				"stylelint-config-standard-scss": "^11.0.0",
+				"stylelint-order": "^6.0.3",
 				"stylelint-scss": "^5.2.1",
 				"terser": "^5.20.0"
 			}
@@ -7997,6 +7998,15 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/postcss-sorting": {
+			"version": "8.0.2",
+			"resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-8.0.2.tgz",
+			"integrity": "sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==",
+			"dev": true,
+			"peerDependencies": {
+				"postcss": "^8.4.20"
+			}
+		},
 		"node_modules/postcss-svgo": {
 			"version": "6.0.0",
 			"resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-6.0.0.tgz",
@@ -9371,6 +9381,53 @@
 				}
 			}
 		},
+		"node_modules/stylelint-config-standard": {
+			"version": "34.0.0",
+			"resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-34.0.0.tgz",
+			"integrity": "sha512-u0VSZnVyW9VSryBG2LSO+OQTjN7zF9XJaAJRX/4EwkmU0R2jYwmBSN10acqZisDitS0CLiEiGjX7+Hrq8TAhfQ==",
+			"dev": true,
+			"dependencies": {
+				"stylelint-config-recommended": "^13.0.0"
+			},
+			"engines": {
+				"node": "^14.13.1 || >=16.0.0"
+			},
+			"peerDependencies": {
+				"stylelint": "^15.10.0"
+			}
+		},
+		"node_modules/stylelint-config-standard-scss": {
+			"version": "11.0.0",
+			"resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-11.0.0.tgz",
+			"integrity": "sha512-fGE79NBOLg09a9afqGH/guJulRULCaQWWv4cv1v2bMX92B+fGb0y56WqIguwvFcliPmmUXiAhKrrnXilIeXoHA==",
+			"dev": true,
+			"dependencies": {
+				"stylelint-config-recommended-scss": "^13.0.0",
+				"stylelint-config-standard": "^34.0.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.3.3",
+				"stylelint": "^15.10.0"
+			},
+			"peerDependenciesMeta": {
+				"postcss": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/stylelint-order": {
+			"version": "6.0.3",
+			"resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-6.0.3.tgz",
+			"integrity": "sha512-1j1lOb4EU/6w49qZeT2SQVJXm0Ht+Qnq9GMfUa3pMwoyojIWfuA+JUDmoR97Bht1RLn4ei0xtLGy87M7d29B1w==",
+			"dev": true,
+			"dependencies": {
+				"postcss": "^8.4.21",
+				"postcss-sorting": "^8.0.2"
+			},
+			"peerDependencies": {
+				"stylelint": "^14.0.0 || ^15.0.0"
+			}
+		},
 		"node_modules/stylelint-scss": {
 			"version": "5.2.1",
 			"resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-5.2.1.tgz",
diff --git a/package.json b/package.json
index 66be263..8046a83 100644
--- a/package.json
+++ b/package.json
@@ -79,7 +79,8 @@
 		"servor": "^4.0.2",
 		"shx": "^0.3.4",
 		"stylelint": "^15.10.3",
-		"stylelint-config-recommended-scss": "^13.0.0",
+		"stylelint-config-standard-scss": "^11.0.0",
+		"stylelint-order": "^6.0.3",
 		"stylelint-scss": "^5.2.1",
 		"terser": "^5.20.0"
 	},
diff --git a/src/_chaarts-bar.scss b/src/_chaarts-bar.scss
index a7b2d2b..72c9eb3 100644
--- a/src/_chaarts-bar.scss
+++ b/src/_chaarts-bar.scss
@@ -3,9 +3,10 @@
 @use "sass:list";
 @use "abstracts/variables";
 
-/* ==================== */
-/* == Bar Charts
- *
+// ====================
+// == Bar Charts
+
+/*
  * @note Grid charts based on:
  * @see https://css-tricks.com/css-charts-grid-custom-properties/
  * @author Miriam Suzanne
@@ -19,7 +20,7 @@
  * @see https://www.ffoodd.fr/le-web-en-kit/
  * @see http://dabblet.com/gist/08fddf3666c39ebc62ca
  * @author Gaël Poupard
-/* ==================== */
+// ==================== */
 
 .chaarts.bar {
 	caption {
@@ -53,6 +54,7 @@
 	td {
 		--size: calc(var(--scale, 100) * 100%);
 		--position: calc(var(--value, 0) / var(--scale, 100) * 100%);
+
 		background: linear-gradient(to right,
 			var(--chaarts-green),
 			var(--chaarts-gray),
@@ -69,7 +71,6 @@
 
 	span {
 		background: inherit;
-		-webkit-background-clip: text;
 		background-clip: text;
 		color: transparent;
 		font-weight: bold;
diff --git a/src/_chaarts-column.scss b/src/_chaarts-column.scss
index 457ce40..6ea1bb7 100644
--- a/src/_chaarts-column.scss
+++ b/src/_chaarts-column.scss
@@ -3,18 +3,20 @@
 @use "sass:list";
 @use "abstracts/variables";
 
-/* ==================== */
-/* == Column Charts
- *
+// ====================
+// == Column Charts
+
+/*
  * @note Grid charts based on:
  * @see https://css-tricks.com/css-charts-grid-custom-properties/
  * @author Miriam Suzanne
-/* ==================== */
+// ==================== */
 
 .chaarts[class*="column"] {
 	--gap: #{variables.$gutter * 0.5};
 	--size: calc(var(--scale, 100) * 100%);
 	--width: calc(#{variables.$width} / var(--y) - #{variables.$gutter});
+
 	display: grid;
 	grid-column-gap: var(--gap);
 	max-block-size: variables.$width;
@@ -47,6 +49,7 @@
 
 	td {
 		--integer: calc(var(--value));
+
 		grid-row: list.slash(calc((var(--scale, 100) + 2) - var(--integer)), -2);
 		pointer-events: none;
 		position: relative;
@@ -61,16 +64,15 @@
 
 	span {
 		background: inherit;
-		-webkit-background-clip: text;
 		background-clip: text;
-		inset-block-end: 100%;
 		color: transparent;
 		font-weight: bold;
+		inset-block-end: 100%;
+		inset-inline-end: 0;
 		inset-inline-start: 0;
 		line-height: 1.5;
 		pointer-events: auto;
 		position: absolute;
-		inset-inline-end: 0;
 
 		@media (prefers-contrast: more) {
 			background: var(--background-lighter);
@@ -84,8 +86,8 @@
 		grid-template-rows: 2ex repeat(var(--scale, 100), minmax(0, .25rem)) minmax(min-content, 2rem);
 
 		tbody th {
-			grid-row: -6 / -3;
 			grid-column: 1;
+			grid-row: -6 / -3;
 			line-height: 1;
 		}
 
@@ -95,6 +97,7 @@
 
 		td {
 			--position: calc(var(--integer, 0) / var(--scale, 100) * 100%);
+
 			background: linear-gradient(to top,
 				var(--chaarts-green),
 				var(--chaarts-gray),
@@ -114,14 +117,14 @@
 			&::after {
 				background: var(--background) var(--stripes);
 				background-blend-mode: exclusion;
-				inset-block-end: #{variables.$gutter * 4};
 				content: "";
+				inline-size: var(--width);
+				inset-block-end: #{variables.$gutter * 4};
+				inset-block-start: variables.$gutter;
 				mix-blend-mode: color;
 				opacity: 0;
 				position: absolute;
 				transition: opacity .3s var(--move);
-				inset-block-start: variables.$gutter;
-				inline-size: var(--width);
 				z-index: 0;
 			}
 
@@ -158,8 +161,8 @@
 		}
 
 		thead tr * {
-			grid-row: -2;
 			grid-column: 1;
+			grid-row: -2;
 
 			@each $number in 2, 3, 4, 5, 6 {
 				&:nth-of-type(#{$number}) {
@@ -183,14 +186,14 @@
 			&:nth-child(even)::after {
 				background: var(--background) var(--stripes);
 				background-blend-mode: exclusion;
-				inset-block-end: #{variables.$gutter * 4};
 				content: "";
+				inline-size: calc((var(--width) * 2) + (var(--gap) / 2) + 1px);
+				inset-block-end: #{variables.$gutter * 4};
+				inset-block-start: calc(#{variables.$gutter} + 2ex);
 				mix-blend-mode: color;
 				opacity: .25;
 				position: absolute;
 				transition: opacity .3s var(--move);
-				inset-block-start: calc(#{variables.$gutter} + 2ex);
-				inline-size: calc((var(--width) * 2) + (var(--gap) / 2) + 1px);
 				z-index: 0;
 			}
 
diff --git a/src/_chaarts-line.scss b/src/_chaarts-line.scss
index 4856bcc..38c216d 100644
--- a/src/_chaarts-line.scss
+++ b/src/_chaarts-line.scss
@@ -3,9 +3,10 @@
 @use "abstracts/variables";
 @use "abstracts/mixins";
 
-/* ==================== */
-/* == Line Charts
- *
+// ====================
+// ==Line Charts
+
+/*
  * @note Grid charts based on
  * @see https://css-tricks.com/css-charts-grid-custom-properties/
  * @author Miriam Suzanne
@@ -19,6 +20,7 @@
 	--offset: calc((100% / var(--x)) / 2);
 	--height: calc(#{variables.$width * 0.5} - #{variables.$gutter * 2});
 	--bottom: calc(100% - var(--height));
+
 	padding: var(--height) 0 variables.$gutter;
 	position: relative;
 	transition: background .3s var(--move),
@@ -26,16 +28,17 @@
 
 	&::after {
 		--scale: calc((100% - (var(--y) * 1px)) / var(--y));
+
 		background: repeating-linear-gradient(
 				to bottom,
 				var(--background-lighter) 0 var(--scale),
 				var(--foreground-o-25) calc(var(--scale) + 1px)
 		);
-		inset-block-end: var(--bottom);
 		content: "";
-		position: absolute;
-		inset-block-start: 0;
 		inline-size: 100%;
+		inset-block-end: var(--bottom);
+		inset-block-start: 0;
+		position: absolute;
 		z-index: 1;
 	}
 
@@ -51,8 +54,16 @@
 	}
 
 	[style]::before {
-		inset-block-end: var(--bottom);
 		background: linear-gradient(to top, var(--chaarts-blue), var(--chaarts-red) 75%);
+		clip-path: var(--polygon);
+		content: "";
+		inline-size: 100%;
+		inset-block-end: var(--bottom);
+		inset-block-start: 0;
+		position: absolute;
+		scale: var(--is-rtl, 1) 1;
+		z-index: 2;
+
 		--polygon: polygon(
 				0% 100%,
 				calc((100% / var(--x) * 1)) 100%,
@@ -73,13 +84,6 @@
 				100% 100%,
 				0% 100%
 		);
-		clip-path: var(--polygon);
-		content: "";
-		position: absolute;
-		inset-block-start: 0;
-		inline-size: 100%;
-		scale: var(--is-rtl, 1) 1;
-		z-index: 2;
 
 		@media (prefers-contrast: more) {
 			background: var(--chaarts-blue);
@@ -90,23 +94,23 @@
 	td {
 		background: var(--background-lighter);
 		font-weight: bold;
-		text-align: center;
 		inline-size: calc(100% / var(--x));
+		text-align: center;
 	}
 
 	[scope="col"] {
 		&:not(:first-child)::after {
 			background: var(--background-lighter) var(--stripes);
 			background-blend-mode: exclusion;
-			inset-block-end: variables.$gutter * 4;
-			content: "";
 			block-size: calc(100% - #{variables.$gutter * 4});
+			content: "";
+			inline-size: inherit;
+			inset-block-end: variables.$gutter * 4;
 			inset-inline-start: calc(100% / var(--x) * var(--index));
 			mix-blend-mode: soft-light;
 			opacity: 0;
 			position: absolute;
 			transition: opacity .3s var(--move);
-			inline-size: inherit;
 			z-index: 3;
 
 			@include mixins.dark-mode {
@@ -128,14 +132,15 @@
 	td {
 		--value: var(--1);
 		--term: var(--t-1);
+
 		line-height: 1.5;
 
 		&::before {
-			content: "";
 			block-size: 1.5rem;
+			content: "";
+			inline-size: inherit;
 			position: absolute;
 			translate: calc(-50% * var(--is-rtl, 1)) 0;
-			inline-size: inherit;
 			z-index: 10;
 		}
 
@@ -171,19 +176,20 @@
 					0% var(--arrow)
 			);
 			--integer: calc(var(--value)); // 3
+
 			background-color: var(--foreground-lighter);
 			clip-path: var(--polygon);
 			color: var(--background-lighter);
 			content: var(--term) " " var(--year) "\A " counter(value) "\A0" var(--unit); // 1
 			counter-reset: value var(--integer); // 2, 3
+			inset-block-start: var(--top, 0);
+			inset-inline-start: calc(var(--offset) * 3);
 			opacity: 0;
 			padding: variables.$gutter * 0.5;
-			inset-inline-start: calc(var(--offset) * 3);
 			pointer-events: none;
 			position: absolute;
-			inset-block-start: var(--top, 0);
-			transform-origin: 50% calc(100% + 10px);
 			transform: translate3d(var(--rtl-offset, -50%), -125%, 0) perspective(1000px) rotate3d(1, 0, 0, 45deg);
+			transform-origin: 50% calc(100% + 10px);
 			transition: opacity .2s var(--enter),
 			transform .2s var(--enter);
 			white-space: pre;
@@ -224,6 +230,9 @@
 	[style] {
 		&::before {
 			background: var(--color, currentColor) var(--background);
+			scale: var(--is-rtl, 1) 1;
+			transition: opacity .3s var(--move);
+
 			--polygon: polygon(
 					calc((100% / var(--x) * 1) + var(--offset)) calc(100% - (var(--1) / var(--y) * 100%)),
 					calc((100% / var(--x) * 2) + var(--offset)) calc(100% - (var(--2) / var(--y) * 100%)),
@@ -254,36 +263,35 @@
 					calc((100% / var(--x) * 2) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--2) / var(--y) * 100%)),
 					calc((100% / var(--x) * 1) + var(--offset)) calc((100% + #{variables.$gutter * 0.25}) - (var(--1) / var(--y) * 100%))
 			);
-			transition: opacity .3s var(--move);
-			scale: var(--is-rtl, 1) 1;
 		}
 
 		th::before {
 			background: var(--color, currentColor) var(--background);
+			block-size: 1rem;
 			content: "";
 			display: inline-block;
-			block-size: 1rem;
-			translate: -.2rem .1rem 0;
 			inline-size: 1rem;
+			translate: -.2rem .1rem 0;
 		}
 
 		td {
 			&::before {
 				--size: #{variables.$gutter};
 				--top: calc(var(--height) - (var(--value) / var(--y) * var(--height)));
+
 				background: var(--color, currentcolor) var(--background);
+				block-size: var(--size);
 				border: 2px solid var(--background-lighter);
 				border-radius: 50%;
 				box-shadow: 0 0 #{variables.$gutter * 0.25} var(--foreground-o-50);
 				content: "";
-				block-size: var(--size);
+				inline-size: var(--size);
+				inset-block-start: var(--top, 100%);
 				inset-inline-start: calc(var(--offset) * 3);
 				position: absolute;
-				inset-block-start: var(--top, 100%);
-				translate: calc(var(--size) / -2) calc(var(--size) / -2) 0;
 				transition: opacity .3s var(--move),
 				transform .3s var(--move);
-				inline-size: var(--size);
+				translate: calc(var(--size) / -2) calc(var(--size) / -2) 0;
 				z-index: 4;
 			}
 
@@ -324,8 +332,8 @@
 	}
 
 	tbody:hover [style]:hover td::before {
-		translate: calc(var(--size) / -2) calc(var(--size) / -2) 0;
 		scale: 1.25;
+		translate: calc(var(--size) / -2) calc(var(--size) / -2) 0;
 	}
 
 	[scope="col"]:not(:first-child) {
diff --git a/src/_chaarts-pie.scss b/src/_chaarts-pie.scss
index 3d9f302..328aa36 100644
--- a/src/_chaarts-pie.scss
+++ b/src/_chaarts-pie.scss
@@ -2,12 +2,14 @@
 @use "sass:map";
 @use "abstracts/variables";
 
-/* ==================== */
-/* == Pie Charts
-/* ==================== */
+// ====================
+// == Pie Charts
+//
+// ====================
 
 .chaarts.pie {
 	--radius: 32em;
+
 	margin: 0 auto;
 	padding-block-start: calc(var(--radius) - #{variables.$gutter * 2});
 	position: relative;
@@ -26,11 +28,11 @@
 
 		&::before {
 			background: var(--color, currentColor) var(--background);
+			block-size: variables.$gutter;
 			content: "";
 			display: inline-block;
-			block-size: variables.$gutter;
-			translate: calc(-.2rem * var(--is-rtl, 1)) .1rem 0;
 			inline-size: variables.$gutter;
+			translate: calc(-.2rem * var(--is-rtl, 1)) .1rem 0;
 		}
 	}
 
@@ -40,9 +42,9 @@
 
 	td::after,
 	td::before {
+		inset-block-start: calc(var(--radius) / 2);
 		inset-inline-start: 50%;
 		position: absolute;
-		inset-block-start: calc(var(--radius) / 2);
 		transform-origin: center center;
 	}
 
@@ -90,20 +92,22 @@
 				calc(50% - (var(--pos-A) * 1% * var(--gt-75, 0))) calc(50% - (var(--pos-B) * 1% * var(--gt-75, 0))),
 				50% 50%
 		);
-		background: var(--color, currentColor) var(--background);
+
+		background: var(--color, currentcolor) var(--background);
+		block-size: var(--radius);
 		border-radius: 50%;
 		clip-path: var(--polygon);
 		content: '';
-		block-size: var(--radius);
+		inline-size: var(--radius);
+		mask-image: var(--mask);
+		transform: translate3d(calc(-50% * var(--is-rtl, 1)), -50%, 0) rotate(var(--position)) scale(var(--zoom));
+		transition: transform .2s var(--move);
+
 		--mask: radial-gradient(
 				circle at center,
 				#ffff 0 calc((var(--radius) / 2) - 1px),
 				#0000 0
 		);
-		mask-image: var(--mask);
-		transform: translate3d(calc(-50%* var(--is-rtl, 1)), -50%, 0) rotate(var(--position)) scale(var(--zoom));
-		transition: transform .2s var(--move);
-		inline-size: var(--radius);
 	}
 
 	tr:hover td::before {
@@ -134,6 +138,7 @@
 		--axis: calc(var(--position) - .25turn + var(--value) * .005turn);
 		--away: calc(var(--radius) / 2 - #{variables.$gutter});
 		--integer: calc(var(--value)); // 2
+
 		background-color: var(--foreground-lighter);
 		color: var(--background-lighter);
 		content: var(--term) "\A0: " counter(value) "\A0%"; // 1
@@ -141,8 +146,8 @@
 		opacity: 0;
 		padding: variables.$gutter * 0.5;
 		pointer-events: none;
-		transform-origin: 50% calc(100% + 10px);
 		transform: translate3d(-50%, -50%, 0) rotate(var(--axis)) translate(var(--away)) rotate(calc(var(--axis) * -1)) perspective(1000px) rotate3d(1, 0, 0, 45deg);
+		transform-origin: 50% calc(100% + 10px);
 		transition: opacity .2s var(--enter),
 		transform .2s var(--enter);
 	}
@@ -166,7 +171,8 @@
 .chaarts.polar {
 	td::before {
 		--zoom: 50;
-		transform: translate3d(calc(-50%* var(--is-rtl, 1)), -50%, 0) rotate(var(--position)) scale(calc((var(--zoom) + (var(--value) / (100 / var(--zoom)))) / 100));
+
+		transform: translate3d(calc(-50% * var(--is-rtl, 1)), -50%, 0) rotate(var(--position)) scale(calc((var(--zoom) + (var(--value) / (100 / var(--zoom)))) / 100));
 	}
 
 	td::after {
@@ -180,10 +186,11 @@
 
 .chaarts.donut {
 	--mask: radial-gradient(
-			circle at 50% calc(50% - #{variables.$gutter  * 0.25}),
+			circle at 50% calc(50% - #{variables.$gutter * 0.25}),
 			#0000 0 var(--offset),
 			#ffff calc(var(--offset) + 1px) 100%
 	);
+
 	mask-image: var(--mask);
 
 	td::after {
diff --git a/src/_chaarts-radar.scss b/src/_chaarts-radar.scss
index bd4d0e9..62917ff 100644
--- a/src/_chaarts-radar.scss
+++ b/src/_chaarts-radar.scss
@@ -2,9 +2,10 @@
 @use "sass:math";
 @use "abstracts/variables";
 
-/* ==================== */
-/* == Radar Charts
-/* ==================== */
+// ====================
+// ==Radar Charts
+//
+// ====================
 
 .chaarts[class*="radar"] {
 	--radius: #{variables.$width * 0.2};
@@ -12,6 +13,7 @@
 	--size: calc(var(--radius) / var(--scale));
 	--part: calc(360deg / var(--items));
 	--integer: calc(var(--scale));
+
 	background-image:
 		repeating-radial-gradient(
 			circle at 50%,
@@ -23,15 +25,15 @@
 			var(--foreground-o-10) 0 2px,
 			transparent 0 var(--size)
 		);
+	block-size: calc(var(--radius) * 2);
 	border: 2px solid;
 	border-radius: 50%;
 	contain: layout;
 	counter-reset: scale var(--integer);
-	block-size: calc(var(--radius) * 2);
+	inline-size: calc(var(--radius) * 2);
 	margin: variables.$gutter * 6 auto variables.$gutter * 12;
 	overflow: visible;
 	position: relative;
-	inline-size: calc(var(--radius) * 2);
 
 	caption {
 		background: none;
@@ -49,6 +51,7 @@
 	 */
 	[scope="col"] {
 		--away: calc((var(--radius) * -1) - 50%);
+
 		background-color: transparent;
 		left: 50%;
 		margin: 0;
@@ -79,15 +82,16 @@
 	 */
 	td {
 		--skew: calc(90deg - var(--part));
-		border-block-end: 1px solid var(--chaarts-purple);
+
 		block-size: 50%;
+		border-block-end: 1px solid var(--chaarts-purple);
+		inline-size: 50%;
 		left: 0;
 		margin: 0;
 		position: absolute;
 		top: 0;
 		transform: rotate(calc(var(--part) * var(--index, 1))) skew(var(--skew));
 		transform-origin: 100% 100%;
-		inline-size: 50%;
 
 		@each $number in 1, 2, 3, 4, 5, 6, 7 {
 			&:nth-of-type(#{$number}) span {
@@ -104,11 +108,14 @@
 
 	span {
 		--opposite: calc(180 - (90 + (90 - (360 / var(--items)))));
+
 		// get opposite angle in radians
 		--angle: calc(var(--opposite) * 0.01745329251);
 		--sin-angle: sin(var(--angle));
+
 		// calc() hypothenuse
 		--hypo: calc(var(--unitless-radius) / var(--sin-angle));
+
 		// get the ratio: skewed / initial width
 		--ratio: calc(var(--hypo) / var(--unitless-radius));
 		--polygon: polygon(
@@ -116,12 +123,13 @@
 				calc(100% - (var(--point) * 100% / var(--scale))) 100%,
 				100% 100%
 		);
+
 		background: var(--chaarts-purple);
+		block-size: 100%;
 		clip-path: var(--polygon);
 		filter: drop-shadow(0 0 variables.$gutter var(--chaarts-purple));
-		block-size: 100%;
-		position: absolute;
 		inline-size: 100%;
+		position: absolute;
 	}
 }
 
@@ -147,8 +155,9 @@
 	@each $number in 1, 2, 3, 4, 5, 6, 7 {
 		&:nth-child(#{$number})::after {
 			--integer: calc(var(--#{$number})); // 2
-			counter-reset: value var(--integer); // 1
+
 			content: counter(value) "\A0/\A0" counter(scale); // 1
+			counter-reset: value var(--integer); // 1
 		}
 	}
 }
@@ -162,19 +171,19 @@
 	}
 
 	[scope="row"] {
-		bottom: variables.$gutter * -8;
 		block-size: variables.$gutter * 2;
+		bottom: variables.$gutter * -8;
 		left: variables.$gutter;
 		position: absolute;
 
 		&::before {
 			background: var(--color, currentColor);
+			block-size: variables.$gutter;
 			content: "";
 			display: inline-block;
-			block-size: variables.$gutter;
+			inline-size: variables.$gutter;
 			margin-inline-end: variables.$gutter * 0.25;
 			transform: translate3d(0, .1rem, 0);
-			inline-size: variables.$gutter;
 		}
 	}
 
@@ -199,18 +208,19 @@
 			display: block;
 			font-size: small;
 			font-weight: 700;
+			inline-size: 100%;
 			text-indent: math.div(variables.$gutter, -2);
 			transform: skew(calc(var(--skew) * -1)) rotate(calc(var(--part) * var(--index, 1) * -1));
 			transform-origin: 0 0;
-			inline-size: 100%;
 			white-space: nowrap;
 		}
 
 		@each $number in 1, 2, 3, 4, 5, 6, 7 {
 			&:nth-of-type(#{$number})::after {
 				--integer: calc(var(--#{$number})); // 2
-				counter-reset: value var(--integer); // 1
+
 				content: counter(value); // 1
+				counter-reset: value var(--integer); // 1
 				inline-size: calc(var(--#{$number}) * 100% / var(--scale));
 			}
 		}
@@ -218,6 +228,7 @@
 
 	span {
 		--mask: radial-gradient(circle at bottom right, var(--foreground), var(--foreground-o-50));
+
 		background: var(--color, currentColor);
 		mask-image: var(--mask);
 		pointer-events: auto;
diff --git a/src/chaarts.scss b/src/chaarts.scss
index 532bd74..06f22d8 100644
--- a/src/chaarts.scss
+++ b/src/chaarts.scss
@@ -1,14 +1,16 @@
-/* ==================== */
-/* == Abstracts
-/* ==================== */
+// ====================
+// ==Abstracts
+//
+// ====================
 @use "sass:math";
 @use "sass:meta";
 @use "abstracts/variables";
 @use "abstracts/mixins";
 
-/* ==================== */
-/* == Convert <Number> to <Integer>
-/* ==================== */
+// ====================
+// ==Convert <Number> to <Integer>
+// ====================
+
 /**
  * Using Houdini's @property to ensure --integer is <Integer> type in Chromium-based browsers
  * @link https://developer.mozilla.org/en-US/docs/Web/CSS/@property
@@ -17,22 +19,22 @@
  ** @author Carter Li
  ** @link https://css-tricks.com/animating-number-counters/#the-new-school-css-solution
  */
-//noinspection ALL
 @property --integer {
-	syntax: "<integer>";
-	initial-value: 0;
 	inherits: false;
+	initial-value: 0;
+	syntax: "<integer>";
 }
 
-/* ==================== */
-/* == Tables
-/* ==================== */
+// ====================
+// ==Tables
+//
+// ====================
 table {
 	border-collapse: collapse;
 	caption-side: top;
 	font-feature-settings: "tnum";
-	margin-block-end: variables.$gutter * 1.5;
 	inline-size: 100%;
+	margin-block-end: variables.$gutter * 1.5;
 	vertical-align: top;
 
 	> caption:first-child {
@@ -54,17 +56,38 @@ td {
 }
 
 tbody {
-	border: 1px solid hsl(0 0% 80%);
+	border: 1px solid hsl(0deg 0% 80%);
 }
 
 thead {
 	border: 1px solid var(--foreground);
 }
 
-/* ==================== */
-/* == Charts
-/* ==================== */
+// ====================
+// == Charts
+//
+// ====================
 .chaarts-container {
+	// ====================
+	// Improve table UX
+	//
+	// @note Gives scrollable table some UX hints with shadows
+	// @author Chen Hui Jing
+	// @link https://codepen.io/huijing/pen/XBGaNQ
+	// Based on:
+	// @author Lea Verou
+	// @link http://lea.verou.me/2012/04/background-attachment-local/
+	// ====================
+	background: linear-gradient(to right, var(--background-lighter) 30%, transparent),
+							linear-gradient(to right, transparent, var(--background-lighter) 70%) 0 100%,
+							radial-gradient(farthest-side at 0% 50%, var(--foreground), transparent),
+							radial-gradient(farthest-side at 100% 50%, var(--foreground), transparent) 0 100%;
+	background-attachment: local, local, scroll, scroll;
+	background-color: var(--background-lighter);
+	background-position: 0 0, 100%, 0 0, 100%;
+	background-repeat: no-repeat;
+	background-size: 2.5rem 100%, 2.5rem 100%, 1rem 100%, 1rem 100%;
+
 	// ====================
 	// == Colors
 	//
@@ -72,26 +95,32 @@ thead {
 	// @see https://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/
 	// ====================
 	color-scheme: light;
+	margin: variables.$gutter * 2 0;
+	max-inline-size: 100%;
+	-webkit-overflow-scrolling: touch;
+	overflow-x: auto;
+	overflow-y: hidden;
+
 	--background-lightness: 100%;
 	--foreground-lightness: 0%;
 	--diff: 4%;
-	--background-lighter: hsl(0 0% var(--background-lightness));
-	--background: hsl(0 0% calc(var(--background-lightness) - var(--diff)));
-	--foreground: hsl(0 0% var(--foreround-lightness));
-	--foreground-lighter: hsl(0 0% calc(var(--foreround-lightness) + var(--diff)));
-	--foreground-o-50: hsl(0 0% var(--foreround-lightness) / .5);
-	--foreground-o-25: hsl(0 0% var(--foreround-lightness) / .25);
-	--foreground-o-10: hsl(0 0% var(--foreround-lightness) / .1);
+	--background-lighter: hsl(0deg 0% var(--background-lightness));
+	--background: hsl(0deg 0% calc(var(--background-lightness) - var(--diff)));
+	--foreground: hsl(0deg 0% var(--foreround-lightness));
+	--foreground-lighter: hsl(0deg 0% calc(var(--foreround-lightness) + var(--diff)));
+	--foreground-o-50: hsl(0deg 0% var(--foreround-lightness) / 50%);
+	--foreground-o-25: hsl(0deg 0% var(--foreround-lightness) / 25%);
+	--foreground-o-10: hsl(0deg 0% var(--foreround-lightness) / 10%);
 	--hue: 270;
 	--lightness: 50%;
 	--saturation: 100%;
 	--chaarts-purple: hsl(var(--hue) calc(var(--saturation) / 2) var(--lightness)); // 1
 	--chaarts-pink: hsl(calc(var(--hue) + 60) var(--saturation) var(--lightness));
 	--chaarts-blue: hsl(calc(var(--hue) - 60) var(--saturation) var(--lightness));
-	--chaarts-yellow: hsl(40 var(--saturation) var(--lightness));
+	--chaarts-yellow: hsl(40deg var(--saturation) var(--lightness));
 	--chaarts-green: hsl(calc(var(--hue) - 120) var(--saturation) var(--lightness));
 	--chaarts-red: hsl(calc(var(--hue) + 90) var(--saturation) var(--lightness));
-	--chaarts-gray: hsl(0 0% var(--lightness));
+	--chaarts-gray: hsl(0deg 0% var(--lightness));
 
 	@media (min-width: #{math.div(600em, 16)}) {
 		--lightness: 40%;
@@ -103,12 +132,13 @@ thead {
 	// @note Based on sseeeedd for progressive enhancement
 	// @link https://github.com/ffoodd/sseeeedd
 	// ====================
-	@include mixins.dark-mode() {
+	@include mixins.dark-mode {
 		color-scheme: dark;
+
 		--background-lightness: 0%;
 		--foreground-lightness: 100%;
-		--background: hsl(0 0% calc(var(--diff) * 5));
-		--foreground-lighter: hsl(0 0% calc(var(--foreground-lightness) - var(--diff)));
+		--background: hsl(0deg 0% calc(var(--diff) * 5));
+		--foreground-lighter: hsl(0deg 0% calc(var(--foreground-lightness) - var(--diff)));
 	}
 
 	// ====================
@@ -152,6 +182,7 @@ thead {
 	--zig: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'><g fill-rule='evenodd'><g fill='hsl(0 0% 100% / .6)'><path d='M9.8 12L0 2.2V.8l10 10 10-10v1.4L10.2 12h-.4zm-4 0L0 6.2V4.8L7.2 12H5.8zm8.4 0L20 6.2V4.8L12.8 12h1.4zM9.8 0l.2.2.2-.2h-.4zm-4 0L10 4.2 14.2 0h-1.4L10 2.8 7.2 0H5.8z'/></g></g></svg>");
 	--stripes: url("data:image/svg+xml,<svg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'><g fill='hsl(0 0% 100% / .6)' fill-rule='evenodd'><path d='M5 0h1L0 6V5zM6 5v1H5z'/></g></svg>");
 	--dots: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'><g fill='hsl(0 0% 100% / .6)' fill-rule='evenodd'><circle cx='3' cy='3' r='3'/><circle cx='13' cy='13' r='3'/></g></svg>");
+
 	// ====================
 	// == Timing functions
 	//
@@ -163,31 +194,6 @@ thead {
 	--exit: cubic-bezier(.5, 0, 1, .5);
 	--move: cubic-bezier(.5, 0, .5, 1);
 
-	// ====================
-	// Improve table UX
-	//
-	// @note Gives scrollable table some UX hints with shadows
-	// @author Chen Hui Jing
-	// @link https://codepen.io/huijing/pen/XBGaNQ
-	// Based on:
-	// @author Lea Verou
-	// @link http://lea.verou.me/2012/04/background-attachment-local/
-	// ====================
-	background: linear-gradient(to right, var(--background-lighter) 30%, transparent),
-							linear-gradient(to right, transparent, var(--background-lighter) 70%) 0 100%,
-							radial-gradient(farthest-side at 0% 50%, var(--foreground), transparent),
-							radial-gradient(farthest-side at 100% 50%, var(--foreground), transparent) 0 100%;
-	background-repeat: no-repeat;
-	background-color: var(--background-lighter);
-	background-size: 2.5rem 100%, 2.5rem 100%, 1rem 100%, 1rem 100%;
-	background-position: 0 0, 100%, 0 0, 100%;
-	background-attachment: local, local, scroll, scroll;
-	margin: variables.$gutter * 2 0;
-	max-inline-size: 100%;
-	overflow-x: auto;
-	overflow-y: hidden;
-	-webkit-overflow-scrolling: touch;
-
 	[dir="rtl"] & {
 		--is-rtl: -1;
 	}
@@ -221,9 +227,9 @@ thead {
 }
 
 table:not(.chaarts) .sr-only {
+	block-size: auto;
 	clip: auto;
 	clip-path: none;
-	block-size: auto;
 	inline-size: auto;
 	overflow: visible;
 	position: static;