diff --git a/elements/_grouping.scss b/elements/_grouping.scss
index df30a37..6655048 100644
--- a/elements/_grouping.scss
+++ b/elements/_grouping.scss
@@ -1,5 +1,3 @@
-@use "sass:color";
-
 // Grouping content
 // -----------------------------------------------------------------------------
 // p
@@ -73,6 +71,7 @@ hr {
 
 	&.vertical {
 		display: inline;
+		height: $space_tiny;
 		margin: 0 $space_double;
 		border-width: 0 $width_border_basic 0 0;
 	}
@@ -103,12 +102,12 @@ pre {
 
 .pre_code {
 	overflow-x: auto;
-	border-color: color.scale($color_back_basic, $lightness: -$color_diff_tiny);
+	border-color: darken($color_back_basic, $color_diff_tiny);
 	border-style: dotted;
 	border-width: 0 0 0 $width_border_4;
 	border-radius: $radius_basic;
 	padding: $space_basic;
-	background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny);
+	background-color: lighten($color_back_basic, $color_diff_tiny);
 
 	code {
 		background-color: transparent;
@@ -276,20 +275,20 @@ div {}
 .box_placeholder {
 	width: 100%;
 	height: $space_medium;
-	border: $width_border_4 solid color.adjust($alpha_color, $alpha: -0.1);
+	border: $width_border_4 solid transparentize($alpha_color, 0.1);
 	border-radius: $radius_basic;
-	background-color: color.adjust($alpha_color, $alpha: -0.2);
+	background-color: transparentize($alpha_color, 0.2);
 }
 
 .box_placeholder_bkg {
 	width: 100%;
 	height: $space_medium * 2;
-	border: $width_border_4 solid color.adjust($color_front_basic, $alpha: -0.1);
+	border: $width_border_4 solid transparentize($color_front_basic, 0.1);
 	border-radius: $radius_basic;
 	padding: $space_basic;
 	/*data:[<mime type>][;charset=<charset>][;base64],<encoded data>*/
 	background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='0' y1='0' x2='100%' y2='100%' stroke='%23FFF' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='%23FFF' stroke-width='.5'/></svg>") no-repeat;
-	background-color: color.adjust($color_front_basic, $alpha: -0.1);
+	background-color: transparentize($color_front_basic, 0.1);
 }
 
 .box_file_tile {
diff --git a/elements/_interactive.scss b/elements/_interactive.scss
index d36f6fc..5a77aaa 100644
--- a/elements/_interactive.scss
+++ b/elements/_interactive.scss
@@ -1,5 +1,3 @@
-@use "sass:color";
-
 // Forms
 // -----------------------------------------------------------------------------
 // form
@@ -29,12 +27,9 @@ form {
 // -----------------------------------------------------------------------------
 label {
 	@extend %basic;
-}
 
-label,
-p {
 	input, button, textarea, select {
-		margin: 0 $space_basic;
+		margin-left: $space_basic;
 	}
 }
 
@@ -42,6 +37,16 @@ input + label {
 	margin-left: $space_basic;
 }
 
+.label {
+	line-height: 2.5;
+}
+
+.label > input,
+.label > textarea,
+.label > select {
+	margin: 0 $space_basic;
+}
+
 // Input
 // -----------------------------------------------------------------------------
 input {
@@ -74,7 +79,6 @@ td > textarea {
 	}
 }
 
-// TODO: Move to io_module
 .input_io, .button_io, .io_textarea, .io_select {
 	margin: $margin_io;
 }
@@ -90,7 +94,7 @@ td > textarea {
 
 	&[readonly="readonly"],
 	&[readonly] {
-		background-color: color.scale($color_back_io, $lightness: -$color_diff_double);
+		background-color: darken($color_back_io, $color_diff_double);
 	}
 
 	&[disabled="disabled"],
@@ -119,7 +123,7 @@ td > textarea {
 
 	&[readonly="readonly"],
 	&[readonly] {
-		border-color: color.scale($color_border_io, $lightness: -$color_diff_double);
+		border-color: darken($color_border_io, $color_diff_double);
 	}
 
 	&[disabled="disabled"],
@@ -167,7 +171,7 @@ button {
 	&[disabled="disabled"],
 	&[disabled] {
 		border-color: transparent;
-		color: color.scale($color_text_button, $lightness: $color_diff_double);
+		color: lighten($color_text_button, $color_diff_double);
 
 		&:hover {
 			background-color: $color_back_button;
diff --git a/elements/_tables.scss b/elements/_tables.scss
index 94e6b4e..da04d62 100644
--- a/elements/_tables.scss
+++ b/elements/_tables.scss
@@ -1,5 +1,3 @@
-@use "sass:color";
-
 // Tabular data
 // -----------------------------------------------------------------------------
 // table
@@ -42,7 +40,7 @@ table {
 	}
 
 	tr:nth-child(even) td {
-		background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny);
+		background-color: lighten($color_back_basic, $color_diff_tiny);
 	}
 }
 
@@ -127,6 +125,6 @@ td:last-child {
 
 .cell_pre {
 	// border-right-width: $width_border_4;
-	// border-right-color: color.scale($color_back_basic, $lightness: $color_diff_basic);
-	background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny);
+	// border-right-color: lighten($color_back_basic, $color_diff_basic);
+	background-color: lighten($color_back_basic, $color_diff_tiny);
 }
diff --git a/elements/_textlevel.scss b/elements/_textlevel.scss
index 71de523..f94beb7 100644
--- a/elements/_textlevel.scss
+++ b/elements/_textlevel.scss
@@ -1,5 +1,3 @@
-@use "sass:color";
-
 // Text-Level semantics
 // -----------------------------------------------------------------------------
 // a
@@ -40,7 +38,7 @@
 // -----------------------------------------------------------------------------
 a {
 	color: $color_link_basic;
-	//  color: color.scale($color_action_basic, $lightness: 20%);
+	//  color: lighten($color_action_basic, 20%);
 	text-decoration: none;
 
 	&:active,
@@ -82,13 +80,13 @@ a {
 	display: inline-block;
 	padding: $padding_basic;
 	border-radius: $radius_basic;
-	background-color: color.adjust($color_link_basic, $alpha: -0.8);
+	background-color: transparentize($color_link_basic, 0.8);
 
 	&:active,
 	&:focus,
 	&:hover {
 		border-color: transparent;
-		background-color: color.adjust($color_highlight_basic, $alpha: -0.8);
+		background-color: transparentize($color_highlight_basic, 0.8);
 	}
 }
 
@@ -196,8 +194,8 @@ time {
 // -----------------------------------------------------------------------------
 code {
 	@extend %basic_mono;
-	color: color.scale($color_text_basic, $lightness: $color_diff_basic);
-	background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny);
+	color: lighten($color_text_basic, $color_diff_basic);
+	background-color: lighten($color_back_basic, $color_diff_tiny);
 }
 
 .code_solo {
@@ -229,7 +227,7 @@ kbd {
 	border-style: solid;
 	border-color: $color_darker;
 	border-radius: $radius_basic;
-	color: color.scale($color_text_basic, $lightness: $color_diff_basic);
+	color: lighten($color_text_basic, $color_diff_basic);
 }
 
 // Sub- and superscript
@@ -251,17 +249,17 @@ mark {
 }
 
 .mark_cursor {
-	color: color.invert($color_text_basic);
+	color: invert($color_text_basic);
 	background-color: $color_text_basic;
 }
 
 ::-moz-selection {
-	color: color.invert($color_text_basic);
+	color: invert($color_text_basic);
 	background-color: $color_text_basic;
 }
 
 ::selection {
-	color: color.invert($color_text_basic);
+	color: invert($color_text_basic);
 	background-color: $color_text_basic;
 }
 
diff --git a/functions/_color.scss b/functions/_color.scss
index 11fbfac..228ed81 100644
--- a/functions/_color.scss
+++ b/functions/_color.scss
@@ -1,16 +1,13 @@
-@use "sass:map";
-@use "sass:color";
-
 @function createColorMap($color, $percentage, $opacity) {
   $map: (
     base: $color,
-    light: color.scale($color, $lightness: $percentage),
-    dark: color.scale($color, $lightness: -$percentage),
-    trans: color.adjust($color, $alpha: -$opacity)
+    light: lighten($color, $percentage),
+    dark: darken($color, $percentage),
+    trans: transparentize($color, $opacity)
   );
   @return $map;
 }
 
 @function basic_color($key: 'alpha') {
-  @return map.get($color_palette, $key);
+  @return map-get($color_palette, $key);
 }
diff --git a/functions/_shade.scss b/functions/_shade.scss
index 263daed..6607422 100644
--- a/functions/_shade.scss
+++ b/functions/_shade.scss
@@ -1,4 +1,4 @@
-@use "sass:color";
+@charset "UTF-8";
 
 // Mixes a color with black.
 //
@@ -20,5 +20,5 @@
 // @return {Color}
 
 @function shade($color, $percent) {
-  @return color.mix(#000, $color, $percent);
+  @return mix(#000, $color, $percent);
 }
diff --git a/functions/_tint.scss b/functions/_tint.scss
index d925594..7eee931 100644
--- a/functions/_tint.scss
+++ b/functions/_tint.scss
@@ -1,4 +1,4 @@
-@use "sass:color";
+@charset "UTF-8";
 
 // Mixes a color with white.
 //
@@ -20,5 +20,5 @@
 // @return {Color}
 
 @function tint($color, $percent) {
-  @return color.mix(#fff, $color, $percent);
+  @return mix(#fff, $color, $percent);
 }
diff --git a/global/_common.scss b/global/_common.scss
index fc42881..3565a10 100644
--- a/global/_common.scss
+++ b/global/_common.scss
@@ -1,7 +1,7 @@
 // Common styles for global usage
 // -----------------------------------------------------------------------------
 @use "sass:math";
-@use "sass:color";
+
 
 
 // General classes
@@ -53,9 +53,9 @@
 }
 
 @each $size, $variable in (basic, #{$space_basic}),
-	(small, #{$space_small}),
-	(medium, #{$space_medium}),
-	(large, #{$space_large}) {
+(small, #{$space_small}),
+(medium, #{$space_medium}),
+(large, #{$space_large}) {
 	.space_top_#{$size} {
 		margin-top: $variable;
 	}
@@ -108,7 +108,7 @@
 }
 
 .wrap_center {
-	& > * {
+	&>* {
 		margin-right: math.div((100% - $width_basic), 2);
 		margin-left: math.div((100% - $width_basic), 2);
 
@@ -130,6 +130,7 @@
 }
 
 
+
 // Clearing and floating
 // -----------------------------------------------------------------------------
 .clear {
@@ -168,6 +169,7 @@
 }
 
 
+
 // Inlining
 // -----------------------------------------------------------------------------
 .inline {
@@ -175,6 +177,7 @@
 }
 
 
+
 // Flex & grid
 // -----------------------------------------------------------------------------
 %flex-inline {
@@ -202,6 +205,7 @@
 }
 
 
+
 // Positioned elements
 // -----------------------------------------------------------------------------
 %viewport_fixed {
@@ -272,15 +276,13 @@
 .mouse_over {
 	@extend %viewport_fixed;
 	z-index: $z_heaven;
+	background-color: transparentize($color_darkest, 0.5);
 	transition: background-color $duration_long $timing_basic $duration_long;
 	pointer-events: none;
-
-	&.active {
-		background-color: color.adjust($color_darkest, $alpha: -0.5);
-	}
 }
 
 
+
 // Colors
 // -----------------------------------------------------------------------------
 .txt_color_light {
@@ -292,6 +294,7 @@
 }
 
 
+
 // Text
 // -----------------------------------------------------------------------------
 .txt_tiny {
diff --git a/global/_config.scss b/global/_config.scss
index 42b6a91..7d3b1f0 100644
--- a/global/_config.scss
+++ b/global/_config.scss
@@ -1,9 +1,6 @@
-@use "sass:color";
-@use "sass:map";
-@use "sass:math";
-
 // Default configuration
 // ------------------------------------------------------------------------------
+@use "sass:math";
 
 
 
@@ -89,14 +86,15 @@ $color_brightest: white !default;
 
 $color_text_basic: black !default;
 $color_back_basic: #808080 !default;
-$color_border_basic: color.scale($color_text_basic, $lightness: 12%) !default;
+$color_border_basic: lighten($color_text_basic, $color_diff_basic) !default;
 $color_front_basic: white !default;
 
-$color_medium: color.scale($color_darkest, $lightness: 50%);
-$color_dark: color.scale($color_darkest, $lightness: $color_diff_double);
-$color_darker: color.scale($color_back_basic, $lightness: -$color_diff_basic);
-$color_brighter: color.scale($color_back_basic, $lightness: $color_diff_basic);
-$color_bright: color.scale($color_brightest, $lightness: -$color_diff_double);
+$color_medium: lighten($color_darkest, 50%
+);
+$color_dark: lighten($color_darkest, $color_diff_double);
+$color_darker: darken($color_back_basic, $color_diff_basic);
+$color_brighter: lighten($color_back_basic, $color_diff_basic);
+$color_bright: darken($color_brightest, $color_diff_double);
 
 $color_head_basic: $color_text_basic !default;
 $color_link_basic: $delta_color !default;
@@ -113,8 +111,8 @@ $color_list: (
 @each $key, $value in $color_palette {
 	$map: (
 	);
-$map: map.merge($map, ($key: createColorMap($value, 15%, 0.5)));
-$color_list: map.merge($color_list, $map);
+$map: map-merge($map, ($key: createColorMap($value, 15%, 0.5)));
+$color_list: map-merge($color_list, $map);
 }
 
 
@@ -214,9 +212,9 @@ $io_focus_list: 'a[href]',
 	'textarea:not([disabled])',
 	'*[tabindex]';
 
-$color_text_io: color.scale($color_text_basic, $lightness: $color_diff_basic) !default;
+$color_text_io: lighten($color_text_basic, $color_diff_basic) !default;
 $color_text_button: $color_text_basic !default;
-$color_back_io: color.scale($color_front_basic, $lightness: -$color_diff_basic) !default;
+$color_back_io: darken($color_front_basic, $color_diff_basic) !default;
 $color_back_button: $color_darker !default;
 $color_border_io: $color_front_basic !default;
 $color_border_button: $color_dark !default;
@@ -226,7 +224,7 @@ $border_io: $width_border_io solid $color_border_io;
 $border_io_dotted: $width_border_io dotted $color_border_io;
 
 $shadow_basic: inset 0 1px 3px rgba($color_darkest, 0.06);
-$shadow_focus: $shadow_basic, 0 0 5px color.adjust($color_action_basic, $lightness: -5%, $alpha: -0.3);
+$shadow_focus: $shadow_basic, 0 0 5px adjust-color($color_action_basic, $lightness: -5%, $alpha: -0.3);
 
 
 
diff --git a/mixins/_color.scss b/mixins/_color.scss
index 5ace6b1..0849dc9 100644
--- a/mixins/_color.scss
+++ b/mixins/_color.scss
@@ -1,22 +1,20 @@
-@use "sass:map";
-
 @mixin addDefaultColors() {
-  @if map.has-key($color_palette, alpha) {
-    $alpha_color: map.get($color_palette, alpha) !global;
+  @if map-has-key($color_palette, alpha) {
+    $alpha_color: map-get($color_palette, alpha) !global;
   }
-  @if map.has-key($color_palette, bravo) {
-    $bravo_color: map.get($color_palette, bravo) !global;
+  @if map-has-key($color_palette, bravo) {
+    $bravo_color: map-get($color_palette, bravo) !global;
   }
-  @if map.has-key($color_palette, charlie) {
-    $charlie_color: map.get($color_palette, charlie) !global;
+  @if map-has-key($color_palette, charlie) {
+    $charlie_color: map-get($color_palette, charlie) !global;
   }
-  @if map.has-key($color_palette, delta) {
-    $delta_color: map.get($color_palette, delta) !global;
+  @if map-has-key($color_palette, delta) {
+    $delta_color: map-get($color_palette, delta) !global;
   }
-  @if map.has-key($color_palette, echo) {
-    $echo_color: map.get($color_palette, echo) !global;
+  @if map-has-key($color_palette, echo) {
+    $echo_color: map-get($color_palette, echo) !global;
   }
-  @if map.has-key($color_palette, foxtrot) {
-    $foxtrot_color: map.get($color_palette, foxtrot) !global;
+  @if map-has-key($color_palette, foxtrot) {
+    $foxtrot_color: map-get($color_palette, foxtrot) !global;
   }
 }
diff --git a/mixins/_sprite.scss b/mixins/_sprite.scss
index 79d9f1f..6068269 100644
--- a/mixins/_sprite.scss
+++ b/mixins/_sprite.scss
@@ -1,5 +1,3 @@
-@use "sass:list";
-
 // SCSS variables are information about icon's compiled state, stored under its original file name
 //
 // .icon-home {
@@ -86,21 +84,21 @@ $spritesheet: (96px, 64px, '../art/sprite.png', $spritesheet-sprites, );
 // // HTML
 // <i class="icon icon-home"></i>
 @mixin sprite-width($sprite) {
-  width: list.nth($sprite, 5);
+  width: nth($sprite, 5);
 }
 
 @mixin sprite-height($sprite) {
-  height: list.nth($sprite, 6);
+  height: nth($sprite, 6);
 }
 
 @mixin sprite-position($sprite) {
-  $sprite-offset-x: list.nth($sprite, 3);
-  $sprite-offset-y: list.nth($sprite, 4);
+  $sprite-offset-x: nth($sprite, 3);
+  $sprite-offset-y: nth($sprite, 4);
   background-position: $sprite-offset-x  $sprite-offset-y;
 }
 
 @mixin sprite-image($sprite) {
-  $sprite-image: list.nth($sprite, 9);
+  $sprite-image: nth($sprite, 9);
   background-image: url(#{$sprite-image});
 }
 
@@ -117,7 +115,7 @@ $spritesheet: (96px, 64px, '../art/sprite.png', $spritesheet-sprites, );
 // @include sprites($spritesheet-sprites);
 @mixin sprites($sprites) {
   @each $sprite in $sprites {
-    $sprite-name: list.nth($sprite, 10);
+    $sprite-name: nth($sprite, 10);
     .#{$sprite-name} {
       @include sprite($sprite);
     }
diff --git a/modules/explanation/_explanation_module.scss b/modules/explanation/_explanation_module.scss
index 899add5..fe4ed62 100644
--- a/modules/explanation/_explanation_module.scss
+++ b/modules/explanation/_explanation_module.scss
@@ -1,4 +1,3 @@
-@use "sass:color";
 @use "sass:math";
 
 %expose_after {
@@ -37,7 +36,7 @@
 
 .exp_overlay {
 	@extend %full_parent;
-	background-color: color.adjust($alpha_color, $alpha: -0.6);
+	background-color: transparentize($alpha_color, .6);
 }
 
 .exp_pop {
diff --git a/modules/io/_io_module.scss b/modules/io/_io_module.scss
index 3f8c9e6..6e83446 100644
--- a/modules/io/_io_module.scss
+++ b/modules/io/_io_module.scss
@@ -1,21 +1,13 @@
-input[type="range"] {
-	accent-color: $color_text_io;
-}
-
 header,
 aside,
 footer {
 	&.io {
-		nav {
-			li,
-			label,
-			input[type="range"] {
-				margin: 0;
-			}
+		nav li {
+			margin: 0;
 		}
 
+		nav>div:not(.spacer),
 		nav>span,
-		nav label,
 		.a_button {
 			@extend %basic;
 			@extend %size_io_button;
@@ -25,12 +17,7 @@ footer {
 			@extend .button_io;
 		}
 
-		.group {
-			display: flex;
-			flex-flow: row nowrap;
-		}
-
-		input:not([type="range"]) {
+		input {
 			@extend .input_io;
 		}
 
@@ -53,6 +40,13 @@ aside {
 	&.io {
 		padding: $space_basic;
 
+		input,
+		button,
+		textarea,
+		select {
+			margin-inline: $space_half;
+		}
+
 		textarea {
 			@extend .io_textarea;
 		}
diff --git a/modules/print/_print_module.scss b/modules/print/_print_module.scss
index 84d9c0f..053e92f 100644
--- a/modules/print/_print_module.scss
+++ b/modules/print/_print_module.scss
@@ -1,5 +1,5 @@
-@use "sass:list";
-
+// Custom extends and mixins
+// ------------------------------------------------------------------------------
 @import "mixins";
 @import "extends";
 
@@ -31,18 +31,18 @@ $din: $a4, $a5, $a6;
 	}
 
 	@each $space in $din {
-		#{list.nth($space, 1)} {
-			padding-top: list.nth($space, 2) list.nth($space, 3) list.nth($space, 4) list.nth($space, 5);
+		#{nth($space, 1)} {
+			padding-top: nth($space, 2) nth($space, 3) nth($space, 4) nth($space, 5);
 
 			.page_head, .page_foot {
-				right: list.nth($space, 3);
-				left: list.nth($space, 5);
+				right: nth($space, 3);
+				left: nth($space, 5);
 			}
 			.page_head {
-				top: list.nth($space, 2);
+				top: nth($space, 2);
 			}
 			.page_foot {
-				bottom: list.nth($space, 4);
+				bottom: nth($space, 4);
 			}
 		}
 	}