diff --git a/Gemfile.lock b/Gemfile.lock
index 2bbe45b..9f4d6ce 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -27,28 +27,28 @@ GEM
     ffi (1.17.0-x86_64-linux-gnu)
     ffi (1.17.0-x86_64-linux-musl)
     forwardable-extended (2.6.0)
-    google-protobuf (4.27.5)
+    google-protobuf (4.28.2)
       bigdecimal
       rake (>= 13)
-    google-protobuf (4.27.5-aarch64-linux)
+    google-protobuf (4.28.2-aarch64-linux)
       bigdecimal
       rake (>= 13)
-    google-protobuf (4.27.5-arm64-darwin)
+    google-protobuf (4.28.2-arm64-darwin)
       bigdecimal
       rake (>= 13)
-    google-protobuf (4.27.5-x86-linux)
+    google-protobuf (4.28.2-x86-linux)
       bigdecimal
       rake (>= 13)
-    google-protobuf (4.27.5-x86_64-darwin)
+    google-protobuf (4.28.2-x86_64-darwin)
       bigdecimal
       rake (>= 13)
-    google-protobuf (4.27.5-x86_64-linux)
+    google-protobuf (4.28.2-x86_64-linux)
       bigdecimal
       rake (>= 13)
     http_parser.rb (0.8.0)
-    i18n (1.14.5)
+    i18n (1.14.6)
       concurrent-ruby (~> 1.0)
-    jekyll (4.3.3)
+    jekyll (4.3.4)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
@@ -92,66 +92,64 @@ GEM
     rb-fsevent (0.11.2)
     rb-inotify (0.11.1)
       ffi (~> 1.0)
-    rexml (3.3.6)
-      strscan
-    rouge (4.3.0)
+    rexml (3.3.8)
+    rouge (4.4.0)
     safe_yaml (1.0.5)
-    sass-embedded (1.77.8)
-      google-protobuf (~> 4.26)
+    sass-embedded (1.80.3)
+      google-protobuf (~> 4.28)
       rake (>= 13)
-    sass-embedded (1.77.8-aarch64-linux-android)
-      google-protobuf (~> 4.26)
-    sass-embedded (1.77.8-aarch64-linux-gnu)
-      google-protobuf (~> 4.26)
-    sass-embedded (1.77.8-aarch64-linux-musl)
-      google-protobuf (~> 4.26)
-    sass-embedded (1.77.8-aarch64-mingw-ucrt)
-      google-protobuf (~> 4.26)
-    sass-embedded (1.77.8-arm-linux-androideabi)
-      google-protobuf (~> 4.26)
-    sass-embedded (1.77.8-arm-linux-gnueabihf)
-      google-protobuf (~> 4.26)
-    sass-embedded (1.77.8-arm-linux-musleabihf)
-      google-protobuf (~> 4.26)
-    sass-embedded (1.77.8-arm64-darwin)
-      google-protobuf (~> 4.26)
-    sass-embedded (1.77.8-riscv64-linux-android)
-      google-protobuf (~> 4.26)
-    sass-embedded (1.77.8-riscv64-linux-gnu)
-      google-protobuf (~> 4.26)
-    sass-embedded (1.77.8-riscv64-linux-musl)
-      google-protobuf (~> 4.26)
-    sass-embedded (1.77.8-x86-cygwin)
-      google-protobuf (~> 4.26)
-    sass-embedded (1.77.8-x86-linux-android)
-      google-protobuf (~> 4.26)
-    sass-embedded (1.77.8-x86-linux-gnu)
-      google-protobuf (~> 4.26)
-    sass-embedded (1.77.8-x86-linux-musl)
-      google-protobuf (~> 4.26)
-    sass-embedded (1.77.8-x86-mingw-ucrt)
-      google-protobuf (~> 4.26)
-    sass-embedded (1.77.8-x86_64-cygwin)
-      google-protobuf (~> 4.26)
-    sass-embedded (1.77.8-x86_64-darwin)
-      google-protobuf (~> 4.26)
-    sass-embedded (1.77.8-x86_64-linux-android)
-      google-protobuf (~> 4.26)
-    sass-embedded (1.77.8-x86_64-linux-gnu)
-      google-protobuf (~> 4.26)
-    sass-embedded (1.77.8-x86_64-linux-musl)
-      google-protobuf (~> 4.26)
-    strscan (3.1.0)
+    sass-embedded (1.80.3-aarch64-linux-android)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.3-aarch64-linux-gnu)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.3-aarch64-linux-musl)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.3-aarch64-mingw-ucrt)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.3-arm-linux-androideabi)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.3-arm-linux-gnueabihf)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.3-arm-linux-musleabihf)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.3-arm64-darwin)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.3-riscv64-linux-android)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.3-riscv64-linux-gnu)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.3-riscv64-linux-musl)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.3-x86-cygwin)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.3-x86-linux-android)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.3-x86-linux-gnu)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.3-x86-linux-musl)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.3-x86-mingw-ucrt)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.3-x86_64-cygwin)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.3-x86_64-darwin)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.3-x86_64-linux-android)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.3-x86_64-linux-gnu)
+      google-protobuf (~> 4.28)
+    sass-embedded (1.80.3-x86_64-linux-musl)
+      google-protobuf (~> 4.28)
     sync (0.5.0)
     term-ansicolor (1.11.2)
       tins (~> 1.0)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
-    tins (1.33.0)
+    tins (1.36.1)
       bigdecimal
       sync
-    unicode-display_width (2.5.0)
-    webrick (1.8.1)
+    unicode-display_width (2.6.0)
+    webrick (1.8.2)
 
 PLATFORMS
   aarch64-linux
@@ -198,7 +196,7 @@ DEPENDENCIES
   webrick
 
 RUBY VERSION
-   ruby 3.3.4p94
+   ruby 3.3.5p100
 
 BUNDLED WITH
-   2.5.11
+   2.5.16
diff --git a/_sass/_base.scss b/_sass/_base.scss
index 6ec81a3..f3d073f 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 /**
  * Reset some basic elements
  */
@@ -47,11 +49,6 @@ ul, ol, dl, figure,
 /**
  * Vertical writing, Base
  */
-@mixin vertical-writing {
-  @supports ((writing-mode: vertical-rl) or (-webkit-writing-mode: vertical-rl)) {
-    @content;
-  }
-}
 @include vertical-writing {
   html.vertical-writing-recommended {
     writing-mode: vertical-rl;
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index 2b726bf..3773641 100644
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
 /*
  * Site Header
  */
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
new file mode 100644
index 0000000..4d27c9e
--- /dev/null
+++ b/_sass/_variables.scss
@@ -0,0 +1,66 @@
+@use "sass:color";
+
+// Our variables
+$base-font-family: 'Fira Sans',
+                   'Source Han Sans',
+                   'Source Han Sans JP',
+                   'Noto Sans CJK',
+                   'Noto Sans CJK JP',
+                   'Yu Gothic',
+                   'YuGothic',
+                   'Hiragino Kaku Gothic Std',
+                   'HGPGothicE',
+                   sans-serif;
+$code-font-family: 'Fira Mono',
+                   //'Osaka-Mono',
+                   'Droid Sans Mono',
+                   monospace;
+$base-font-size:   16px;
+$small-font-size:  $base-font-size * 0.875;
+$base-line-height: 1.5;
+$long-line-height: 1.75;
+
+$spacing-unit:     30px;
+
+$text-color:       #333;
+$background-color: #F9F9F9;
+$primary-color:    #FFC107;
+$accent-color:     #03A9F4;
+$alt-color:        #FF5252;
+
+
+$grey-color:       #c6c6c6;
+$grey-color-light: #efefef;
+$grey-color-dark:  #5c5c5c;
+
+$link-color:          $accent-color;
+$active-link-color:   $alt-color;
+$visited-link-color:  color.adjust($accent-color, $lightness: -25%, $space: hsl);
+
+$on-palm:          600px;
+$on-laptop:        800px;
+
+// Vertical Writing
+@mixin vertical-writing {
+  @supports ((writing-mode: vertical-rl) or (-webkit-writing-mode: vertical-rl)) {
+    @content;
+  }
+}
+
+// Using media queries with like this:
+// @include media-query($palm) {
+//     .wrapper {
+//         padding-right: $spacing-unit / 2;
+//         padding-left: $spacing-unit / 2;
+//     }
+// }
+@mixin media-query($device) {
+    @media screen and (max-width: $device) {
+        @content;
+    }
+}
+@mixin media-query-vertical($device) {
+    @media screen and (max-height: $device) {
+        @content;
+    }
+}
diff --git a/css/main.scss b/css/main.scss
index faeb4b1..d2da63e 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -1,73 +1,7 @@
 ---
 # Only the main Sass file needs front matter (the dashes are enough)
 ---
-@charset "utf-8";
-
-// Our variables
-$base-font-family: 'Fira Sans',
-                   'Source Han Sans',
-                   'Source Han Sans JP',
-                   'Noto Sans CJK',
-                   'Noto Sans CJK JP',
-                   'Yu Gothic',
-                   'YuGothic',
-                   'Hiragino Kaku Gothic Std',
-                   'HGPGothicE',
-                   sans-serif;
-$code-font-family: 'Fira Mono',
-                   //'Osaka-Mono',
-                   'Droid Sans Mono',
-                   monospace;
-$base-font-size:   16px;
-$small-font-size:  $base-font-size * 0.875;
-$base-line-height: 1.5;
-$long-line-height: 1.75;
-
-$spacing-unit:     30px;
-
-$text-color:       #333;
-$background-color: #F9F9F9;
-$primary-color:    #FFC107;
-$accent-color:     #03A9F4;
-$alt-color:        #FF5252;
-
-
-$grey-color:       #c6c6c6;
-$grey-color-light: #efefef;
-$grey-color-dark:  #5c5c5c;
-
-$link-color:          $accent-color;
-$active-link-color:   $alt-color;
-$visited-link-color:  darken($accent-color, 25%);
-
-$on-palm:          600px;
-$on-laptop:        800px;
-
-
-
-// Using media queries with like this:
-// @include media-query($palm) {
-//     .wrapper {
-//         padding-right: $spacing-unit / 2;
-//         padding-left: $spacing-unit / 2;
-//     }
-// }
-@mixin media-query($device) {
-    @media screen and (max-width: $device) {
-        @content;
-    }
-}
-@mixin media-query-vertical($device) {
-    @media screen and (max-height: $device) {
-        @content;
-    }
-}
-
-
-
 // Import partials from `sass_dir` (defaults to `_sass`)
-@import
-        "base",
-        "layout",
-        "syntax-highlighting"
-;
+@use 'base';
+@use 'layout';
+@use 'syntax-highlighting'