diff --git a/app/assets/stylesheets/animation.css b/app/assets/stylesheets/animation.css
index 374d26876..5ec81263f 100644
--- a/app/assets/stylesheets/animation.css
+++ b/app/assets/stylesheets/animation.css
@@ -1,64 +1,66 @@
-/* Animation classes */
-.shake {
-  animation: shake 400ms both;
-}
+@layer utilities {
+  /* Animation classes */
+  .shake {
+    animation: shake 400ms both;
+  }
 
-@keyframes appear-then-fade {
-  0%,100% { opacity: 0; }
-  5%,60%  { opacity: 1; }
-}
+  @keyframes appear-then-fade {
+    0%,100% { opacity: 0; }
+    5%,60%  { opacity: 1; }
+  }
 
-/* Keyframes */
-@keyframes float-up-left {
-  0% { transform: translate(10px, 20px); }
-  100% { transform: translate(0, 0); }
-}
+  /* Keyframes */
+  @keyframes float-up-left {
+    0% { transform: translate(10px, 20px); }
+    100% { transform: translate(0, 0); }
+  }
 
-@keyframes float-down-right {
-  0% { transform: translate(-10px, -20px); }
-  100% { transform: translate(0, 0); }
-}
+  @keyframes float-down-right {
+    0% { transform: translate(-10px, -20px); }
+    100% { transform: translate(0, 0); }
+  }
 
-@keyframes react {
-  0%   { transform: scale(0.3);  opacity: 0; }
-  50%  { transform: scale(1.15); opacity: 1; }
-  100% { transform: scale(1); }
-}
+  @keyframes react {
+    0%   { transform: scale(0.3);  opacity: 0; }
+    50%  { transform: scale(1.15); opacity: 1; }
+    100% { transform: scale(1); }
+  }
 
-@keyframes scale-fade-out {
-  0%   { transform: scale(1); opacity: 1; }
-  100% { transform: scale(0); opacity: 0; }
-}
+  @keyframes scale-fade-out {
+    0%   { transform: scale(1); opacity: 1; }
+    100% { transform: scale(0); opacity: 0; }
+  }
 
-@keyframes shake {
-  0%  { transform: translateX(-2rem); }
-  25% { transform: translateX(2rem); }
-  50% { transform: translateX(-1rem); }
-  75% { transform: translateX(1rem); }
-}
+  @keyframes shake {
+    0%  { transform: translateX(-2rem); }
+    25% { transform: translateX(2rem); }
+    50% { transform: translateX(-1rem); }
+    75% { transform: translateX(1rem); }
+  }
 
-@keyframes wobble {
-  0%  { transform: rotate(calc(var(--bubble-rotate) + 90deg)); }
-  15% { border-radius: 66% 34% 72% 28% / 39% 63% 37% 61%; }
-  25% { border-radius: 55% 47% 62% 40% / 58% 50% 52% 44%; }
-  33% { border-radius: 46% 54% 61% 39% / 50% 51% 49% 50%; }
-  50% { border-radius: 54% 46% 61% 39% / 57% 49% 51% 43%; }
-  75% { border-radius: 53% 45% 60% 38% / 56% 48% 50% 42%; }
-}
+  @keyframes wobble {
+    0%  { transform: rotate(calc(var(--bubble-rotate) + 90deg)); }
+    15% { border-radius: 66% 34% 72% 28% / 39% 63% 37% 61%; }
+    25% { border-radius: 55% 47% 62% 40% / 58% 50% 52% 44%; }
+    33% { border-radius: 46% 54% 61% 39% / 50% 51% 49% 50%; }
+    50% { border-radius: 54% 46% 61% 39% / 57% 49% 51% 43%; }
+    75% { border-radius: 53% 45% 60% 38% / 56% 48% 50% 42%; }
+  }
 
-@keyframes wobble-alt {
-  0%  { transform: rotate(calc(var(--bubble-rotate) + -90deg)); }
-  12% { border-radius: 66% 34% 72% 28% / 39% 63% 37% 61%; }
-  25% { border-radius: 53% 45% 60% 38% / 56% 48% 50% 42%; }
-  33% { border-radius: 55% 47% 62% 40% / 58% 50% 52% 44%; }
-  50% { border-radius: 46% 54% 61% 39% / 50% 51% 49% 50%; }
-  75% { border-radius: 54% 46% 61% 39% / 57% 49% 51% 43%; }
-}
+  @keyframes wobble-alt {
+    0%  { transform: rotate(calc(var(--bubble-rotate) + -90deg)); }
+    12% { border-radius: 66% 34% 72% 28% / 39% 63% 37% 61%; }
+    25% { border-radius: 53% 45% 60% 38% / 56% 48% 50% 42%; }
+    33% { border-radius: 55% 47% 62% 40% / 58% 50% 52% 44%; }
+    50% { border-radius: 46% 54% 61% 39% / 50% 51% 49% 50%; }
+    75% { border-radius: 54% 46% 61% 39% / 57% 49% 51% 43%; }
+  }
 
-@keyframes wobble-img {
-  15% { border-radius: 66% 34% 72% 28% / 39% 63% 37% 61%; }
-  25% { border-radius: 55% 47% 62% 40% / 58% 50% 52% 44%; }
-  33% { border-radius: 46% 54% 61% 39% / 50% 51% 49% 50%; }
-  50% { border-radius: 54% 46% 61% 39% / 57% 49% 51% 43%; }
-  75% { border-radius: 53% 45% 60% 38% / 56% 48% 50% 42%; }
+  @keyframes wobble-img {
+    15% { border-radius: 66% 34% 72% 28% / 39% 63% 37% 61%; }
+    25% { border-radius: 55% 47% 62% 40% / 58% 50% 52% 44%; }
+    33% { border-radius: 46% 54% 61% 39% / 50% 51% 49% 50%; }
+    50% { border-radius: 54% 46% 61% 39% / 57% 49% 51% 43%; }
+    75% { border-radius: 53% 45% 60% 38% / 56% 48% 50% 42%; }
+  }
 }
diff --git a/app/assets/stylesheets/qr-codes.css b/app/assets/stylesheets/qr-codes.css
new file mode 100644
index 000000000..5019bf828
--- /dev/null
+++ b/app/assets/stylesheets/qr-codes.css
@@ -0,0 +1,6 @@
+@layer components {
+  .qr-code {
+    aspect-ratio: 1;
+    block-size: 50dvh;
+  }
+}
diff --git a/app/assets/stylesheets/separators.css b/app/assets/stylesheets/separators.css
new file mode 100644
index 000000000..4e3d98241
--- /dev/null
+++ b/app/assets/stylesheets/separators.css
@@ -0,0 +1,18 @@
+@layer components {
+  .separator {
+    block-size: 100%;
+    border-block: 0;
+    border-inline-end: 0;
+    border-inline-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, currentColor);
+    display: inline-flex;
+    inline-size: 0;
+  }
+
+  .separator--horizontal {
+    block-size: 0;
+    border-block-end: 0;
+    border-block-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, currentColor);
+    border-inline: 0;
+    display: flex;
+  }
+}
diff --git a/app/assets/stylesheets/spinners.css b/app/assets/stylesheets/spinners.css
new file mode 100644
index 000000000..3715f18ab
--- /dev/null
+++ b/app/assets/stylesheets/spinners.css
@@ -0,0 +1,22 @@
+@layer components {
+  .spinner {
+    position: relative;
+
+    &::before {
+      --mask: no-repeat radial-gradient(#000 68%, #0000 71%);
+      --dot-size: 1.25em;
+
+      -webkit-mask: var(--mask), var(--mask), var(--mask);
+      -webkit-mask-size: 28% 45%;
+      animation: submitting 1.3s infinite linear;
+      aspect-ratio: 8/5;
+      background: currentColor;
+      content: "";
+      inline-size: var(--dot-size);
+      inset: 50% 0.25em;
+      margin-block: calc((var(--dot-size) / 3) * -1);
+      margin-inline: calc((var(--dot-size) / 2) * -1);
+      position: absolute;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css
index 303aa2f81..614489b3f 100644
--- a/app/assets/stylesheets/utilities.css
+++ b/app/assets/stylesheets/utilities.css
@@ -203,52 +203,6 @@
     }
   }
 
-  /* Separators */
-  .separator {
-    block-size: 100%;
-    border-block: 0;
-    border-inline-end: 0;
-    border-inline-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, currentColor);
-    display: inline-flex;
-    inline-size: 0;
-  }
-
-  .separator--horizontal {
-    block-size: 0;
-    border-block-end: 0;
-    border-block-start: var(--border-size, 1px) var(--border-style, solid) var(--border-color, currentColor);
-    border-inline: 0;
-    display: flex;
-  }
-
-  /* Spinners */
-  .spinner {
-    position: relative;
-
-    &::before {
-      --mask: no-repeat radial-gradient(#000 68%, #0000 71%);
-      --dot-size: 1.25em;
-
-      -webkit-mask: var(--mask), var(--mask), var(--mask);
-      -webkit-mask-size: 28% 45%;
-      animation: submitting 1.3s infinite linear;
-      aspect-ratio: 8/5;
-      background: currentColor;
-      content: "";
-      inline-size: var(--dot-size);
-      inset: 50% 0.25em;
-      margin-block: calc((var(--dot-size) / 3) * -1);
-      margin-inline: calc((var(--dot-size) / 2) * -1);
-      position: absolute;
-    }
-  }
-
-  /* QR Codes */
-  .qr-code {
-    aspect-ratio: 1;
-    block-size: 50dvh;
-  }
-
   /* Accessibility */
   .visually-hidden,
   .for-screen-reader {
@@ -263,9 +217,4 @@
   /* Visibility */
   [hidden] { display: none !important; }
   [contents] { display: contents; }
-
-  /* Turbo */
-  turbo-frame {
-    display: contents;
-  }
 }