diff --git a/.prettierrc b/.prettierrc
index 6b783636..c773ca0d 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,4 +1,4 @@
 {
-  "plugins": ["prettier-plugin-svelte"],
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-css-order"],
   "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }
diff --git a/.stylelintrc.json b/.stylelintrc.json
index 97b2cec3..a127665c 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -3,7 +3,6 @@
     "stylelint-config-standard-scss",
     "stylelint-config-recommended-scss",
     "stylelint-config-html/svelte",
-    "stylelint-config-clean-order",
     "stylelint-config-prettier-scss"
   ],
   "rules": {
diff --git a/package.json b/package.json
index 8f699aa9..18ee93fb 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,7 @@
     "matrix-js-sdk": "^37.12.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.6.2",
+    "prettier-plugin-css-order": "^2.1.2",
     "prettier-plugin-svelte": "^3.4.0",
     "rxjs": "^7.8.2",
     "sass": "^1.89.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bf6eabc3..1b00f27f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -116,6 +116,9 @@ importers:
       prettier:
         specifier: ^3.6.2
         version: 3.6.2
+      prettier-plugin-css-order:
+        specifier: ^2.1.2
+        version: 2.1.2(postcss@8.5.3)(prettier@3.6.2)
       prettier-plugin-svelte:
         specifier: ^3.4.0
         version: 3.4.0(prettier@3.6.2)(svelte@5.37.1)
@@ -1944,6 +1947,12 @@ packages:
     resolution: {integrity: sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==}
     engines: {node: '>=8'}
 
+  css-declaration-sorter@7.2.0:
+    resolution: {integrity: sha512-h70rUM+3PNFuaBDTLe8wF/cdWu+dOZmb7pJt8Z2sedYbAcQVQV/tEchueg3GWxwqS0cxtbxmaHEdkNACqcvsow==}
+    engines: {node: ^14 || ^16 || >=18}
+    peerDependencies:
+      postcss: ^8.0.9
+
   css-functions-list@3.2.3:
     resolution: {integrity: sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==}
     engines: {node: '>=12 || >=16'}
@@ -2831,9 +2840,6 @@ packages:
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
-  js-tokens@9.0.0:
-    resolution: {integrity: sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ==}
-
   js-tokens@9.0.1:
     resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
 
@@ -3262,6 +3268,12 @@ packages:
     resolution: {integrity: sha512-MfcMpSUIaR/nNgeVS8AyvyDugXlADjN9AcV7e5rDfrF1wduIAGSkL4q2+wgrZgA3sHVAHLDO9FuauHhZYW2nBw==}
     engines: {node: ^12 || >=14}
 
+  postcss-less@6.0.0:
+    resolution: {integrity: sha512-FPX16mQLyEjLzEuuJtxA8X3ejDLNGGEG503d2YGZR5Ask1SpDN8KmZUMpzCvyalWRywAn1n1VOA5dcqfCLo5rg==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      postcss: ^8.3.5
+
   postcss-media-query-parser@0.2.3:
     resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
 
@@ -3306,6 +3318,12 @@ packages:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
 
+  prettier-plugin-css-order@2.1.2:
+    resolution: {integrity: sha512-vomxPjHI6pOMYcBuouSJHxxQClJXaUpU9rsV9IAO2wrSTZILRRlrxAAR8t9UF6wtczLkLfNRFUwM+ZbGXOONUA==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      prettier: 3.x
+
   prettier-plugin-svelte@3.4.0:
     resolution: {integrity: sha512-pn1ra/0mPObzqoIQn/vUTR3ZZI6UuZ0sHqMK5x2jMLGrs53h0sXhkVuDcrlssHwIMk7FYrMjHBPoUSyyEEDlBQ==}
     peerDependencies:
@@ -4361,7 +4379,7 @@ snapshots:
       '@babel/traverse': 7.24.7
       '@babel/types': 7.24.7
       convert-source-map: 2.0.0
-      debug: 4.4.0(supports-color@8.1.1)
+      debug: 4.4.1
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -4421,7 +4439,7 @@ snapshots:
       '@babel/core': 7.24.7
       '@babel/helper-compilation-targets': 7.24.7
       '@babel/helper-plugin-utils': 7.24.7
-      debug: 4.4.0(supports-color@8.1.1)
+      debug: 4.4.1
       lodash.debounce: 4.0.8
       resolve: 1.22.8
     transitivePeerDependencies:
@@ -5098,7 +5116,7 @@ snapshots:
       '@babel/helper-split-export-declaration': 7.24.7
       '@babel/parser': 7.24.7
       '@babel/types': 7.24.7
-      debug: 4.4.0(supports-color@8.1.1)
+      debug: 4.4.1
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
@@ -6175,6 +6193,10 @@ snapshots:
 
   crypto-random-string@2.0.0: {}
 
+  css-declaration-sorter@7.2.0(postcss@8.5.3):
+    dependencies:
+      postcss: 8.5.3
+
   css-functions-list@3.2.3: {}
 
   css-tree@3.1.0:
@@ -7193,8 +7215,6 @@ snapshots:
 
   js-tokens@4.0.0: {}
 
-  js-tokens@9.0.0: {}
-
   js-tokens@9.0.1: {}
 
   js-yaml@4.1.0:
@@ -7578,10 +7598,14 @@ snapshots:
   postcss-html@1.7.0:
     dependencies:
       htmlparser2: 8.0.2
-      js-tokens: 9.0.0
+      js-tokens: 9.0.1
       postcss: 8.5.6
       postcss-safe-parser: 6.0.0(postcss@8.5.6)
 
+  postcss-less@6.0.0(postcss@8.5.3):
+    dependencies:
+      postcss: 8.5.3
+
   postcss-media-query-parser@0.2.3: {}
 
   postcss-resolve-nested-selector@0.1.6: {}
@@ -7621,6 +7645,15 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  prettier-plugin-css-order@2.1.2(postcss@8.5.3)(prettier@3.6.2):
+    dependencies:
+      css-declaration-sorter: 7.2.0(postcss@8.5.3)
+      postcss-less: 6.0.0(postcss@8.5.3)
+      postcss-scss: 4.0.9(postcss@8.5.3)
+      prettier: 3.6.2
+    transitivePeerDependencies:
+      - postcss
+
   prettier-plugin-svelte@3.4.0(prettier@3.6.2)(svelte@5.37.1):
     dependencies:
       prettier: 3.6.2
@@ -8235,7 +8268,7 @@ snapshots:
   terser@5.31.1:
     dependencies:
       '@jridgewell/source-map': 0.3.6
-      acorn: 8.12.1
+      acorn: 8.15.0
       commander: 2.20.3
       source-map-support: 0.5.21
 
diff --git a/src/lib/charrecorder/CharRecorder.svelte b/src/lib/charrecorder/CharRecorder.svelte
index 90784d54..97ca6de1 100644
--- a/src/lib/charrecorder/CharRecorder.svelte
+++ b/src/lib/charrecorder/CharRecorder.svelte
@@ -113,15 +113,15 @@
     position: absolute;
     top: 0;
     left: 0;
-    font-family: inherit;
-    font-size: inherit;
     color: inherit;
+    font-size: inherit;
+    font-family: inherit;
     user-select: none;
   }
 
   svg > :global(text) {
-    font-family: inherit;
     font-size: inherit;
+    font-family: inherit;
     fill: currentColor;
     dominant-baseline: middle;
   }
diff --git a/src/lib/charrecorder/ChordHud.svelte b/src/lib/charrecorder/ChordHud.svelte
index 7af7d8b0..00e7d39b 100644
--- a/src/lib/charrecorder/ChordHud.svelte
+++ b/src/lib/charrecorder/ChordHud.svelte
@@ -83,24 +83,24 @@
 
 <style>
   section {
+    display: grid;
     position: relative;
     margin: 1em;
     margin-bottom: 0;
-    display: grid;
     height: 3em;
     font-size: 2em;
   }
 
   .rating {
-    font-weight: bold;
     font-style: italic;
+    font-weight: bold;
     text-transform: uppercase;
   }
 
   .tile {
+    border-radius: 0.1em;
     width: 100%;
     height: 0.2em;
-    border-radius: 0.1em;
   }
 
   kbd {
@@ -112,19 +112,19 @@
   }
 
   .chord {
-    will-change: transform, opacity, scale;
+    display: flex;
     position: absolute;
     top: 0;
     left: 50%;
-    display: flex;
     flex-direction: column;
-    margin-inline-end: 1em;
-    padding-inline: 0.1em;
     justify-content: center;
     align-items: center;
     transition:
       opacity 0.3s ease,
       translate 0.3s ease,
       scale 0.3s ease;
+    will-change: transform, opacity, scale;
+    margin-inline-end: 1em;
+    padding-inline: 0.1em;
   }
 </style>
diff --git a/src/lib/chat/MatrixRoomMembers.svelte b/src/lib/chat/MatrixRoomMembers.svelte
index 900aa005..86d2d76d 100644
--- a/src/lib/chat/MatrixRoomMembers.svelte
+++ b/src/lib/chat/MatrixRoomMembers.svelte
@@ -37,16 +37,16 @@
 
 <style lang="scss">
   .avatar {
+    flex-shrink: 0;
     border-radius: 50%;
     width: 32px;
     height: 32px;
-    flex-shrink: 0;
   }
 
   .avatar-placeholder {
     display: flex;
-    align-items: center;
     justify-content: center;
+    align-items: center;
     font-size: 24px;
   }
 
@@ -61,8 +61,8 @@
     flex-direction: column;
     gap: 0.5rem;
     padding: 8px;
-    overflow-y: auto;
     height: 100%;
+    overflow-y: auto;
   }
 
   span {
diff --git a/src/lib/chat/MatrixRooms.svelte b/src/lib/chat/MatrixRooms.svelte
index 71306d97..c99d237d 100644
--- a/src/lib/chat/MatrixRooms.svelte
+++ b/src/lib/chat/MatrixRooms.svelte
@@ -53,17 +53,17 @@
 
   .room {
     display: flex;
-    align-items: center;
     justify-content: flex-start;
+    align-items: center;
     gap: 0.5rem;
     cursor: pointer;
-    padding-block: 2px;
-    min-height: 0;
-    height: unset;
-    padding-inline: 16px;
-    padding-block: 4px;
     border-radius: 8px;
+    padding-inline: 16px;
+    padding-block: 2px;
+    padding-block: 4px;
     width: 100%;
+    height: unset;
+    min-height: 0;
 
     &.active {
       background: var(--md-sys-color-primary-container);
diff --git a/src/lib/chat/MatrixTimeline.svelte b/src/lib/chat/MatrixTimeline.svelte
index 40b3e1d4..3f85111b 100644
--- a/src/lib/chat/MatrixTimeline.svelte
+++ b/src/lib/chat/MatrixTimeline.svelte
@@ -178,17 +178,17 @@
   $border-radius: 16px;
 
   .input {
-    border: 1px solid var(--md-sys-color-outline);
     flex-grow: 1;
     cursor: text;
+    border: 1px solid var(--md-sys-color-outline);
+    border-radius: $border-radius;
     padding: 0.5em;
     font-size: 1rem;
-    border-radius: $border-radius;
 
     text-wrap: wrap;
     white-space: pre-wrap;
-    overflow-wrap: break-word;
     word-break: break-word;
+    overflow-wrap: break-word;
 
     &:focus-visible {
       outline: none;
@@ -197,9 +197,9 @@
 
   .input-box {
     display: flex;
+    flex-shrink: 0;
     gap: 4px;
     padding-block: 8px;
-    flex-shrink: 0;
     width: 100%;
   }
 
@@ -209,23 +209,23 @@
   }
 
   .timeline {
-    contain: content;
-    height: auto;
     display: flex;
-    flex-direction: column-reverse;
-    overflow-y: scroll;
-    overflow-x: hidden;
     flex-grow: 1;
+    flex-direction: column-reverse;
+    contain: content;
     width: 100%;
+    height: auto;
+    overflow-x: hidden;
+    overflow-y: scroll;
   }
 
   section {
     display: flex;
     flex-direction: column;
-    overflow: hidden;
     justify-content: flex-end;
 
     width: 100%;
     height: 100%;
+    overflow: hidden;
   }
 </style>
diff --git a/src/lib/chat/events/MatrixEvent.svelte b/src/lib/chat/events/MatrixEvent.svelte
index bffe20e6..2e2f365a 100644
--- a/src/lib/chat/events/MatrixEvent.svelte
+++ b/src/lib/chat/events/MatrixEvent.svelte
@@ -255,21 +255,21 @@
   }
 
   .toolbar {
+    display: flex;
     position: absolute;
     top: -26px;
     right: 0;
-    background: var(--md-sys-color-secondary-container);
-    color: var(--md-sys-color-on-secondary-container);
-    padding: 4px;
-    border-radius: 4px;
-    display: flex;
     z-index: 100;
+    border-radius: 4px;
+    background: var(--md-sys-color-secondary-container);
+    padding: 4px;
+    color: var(--md-sys-color-on-secondary-container);
 
     a,
     button {
-      font-size: 16px;
       width: 24px;
       height: 24px;
+      font-size: 16px;
     }
   }
 
@@ -289,10 +289,10 @@
   }
 
   .dot {
+    animation: bounce 1s infinite;
+    border-radius: 50%;
     width: 6px;
     height: 6px;
-    border-radius: 50%;
-    animation: bounce 1s infinite;
   }
 
   .sender,
@@ -302,10 +302,10 @@
 
   .avatar {
     grid-area: avatar;
+    translate: 0 2px;
+    border-radius: 50%;
     width: 32px;
     height: 32px;
-    border-radius: 50%;
-    translate: 0 2px;
   }
 
   div.avatar {
@@ -322,18 +322,18 @@
   }
 
   .reactions {
-    grid-area: reactions;
-    margin-top: 2px;
     display: flex;
+    grid-area: reactions;
     gap: 4px;
+    margin-top: 2px;
   }
 
   .reaction {
-    border: 1px solid var(--md-sys-color-outline);
-    padding: 6px;
-    border-radius: 6px;
-    height: 24px;
     display: flex;
+    border: 1px solid var(--md-sys-color-outline);
+    border-radius: 6px;
+    padding: 6px;
+    height: 24px;
     font-size: 12px;
 
     > .count {
@@ -344,16 +344,16 @@
   .event {
     display: grid;
     position: relative;
-    padding-inline: 0.5em;
-    margin-inline: 0.5em;
-    padding-block: 0.25em;
-    border-radius: 4px;
+    grid-template-columns: 32px 1fr auto;
 
     grid-template-areas:
       "avatar sender date"
       "avatar content content"
       "none reactions reactions";
-    grid-template-columns: 32px 1fr auto;
+    margin-inline: 0.5em;
+    border-radius: 4px;
+    padding-inline: 0.5em;
+    padding-block: 0.25em;
   }
 
   .content {
@@ -370,12 +370,12 @@
 
   .backdrop {
     position: absolute;
-    inset: 0;
-    z-index: -1;
     opacity: 0.25;
-
-    background: var(--md-sys-color-surface-variant);
+    z-index: -1;
+    inset: 0;
 
     border-radius: 8px;
+
+    background: var(--md-sys-color-surface-variant);
   }
 </style>
diff --git a/src/lib/chat/events/MatrixMessageEvent.svelte b/src/lib/chat/events/MatrixMessageEvent.svelte
index 465be181..91518ee7 100644
--- a/src/lib/chat/events/MatrixMessageEvent.svelte
+++ b/src/lib/chat/events/MatrixMessageEvent.svelte
@@ -39,9 +39,9 @@
   }
 
   img {
+    border-radius: 8px;
     max-width: 100%;
     max-height: 16em;
-    border-radius: 8px;
   }
 
   .content {
diff --git a/src/lib/components/Action.svelte b/src/lib/components/Action.svelte
index de7f5900..b4f6b1d6 100644
--- a/src/lib/components/Action.svelte
+++ b/src/lib/components/Action.svelte
@@ -20,17 +20,17 @@
 </script>
 
 {#snippet popoverSnippet()}
-<div bind:this={popover} popover="hint">
-&lt;{info.id ?? `0x${info.code.toString(16)}`}&gt;
-{#if info.title} 
-{info.title}
-{/if}
-  {#if info.variant === "left"}
-    (Left)
-  {:else if info.variant === "right"}
-    (Right)
-  {/if}
-</div>
+  <div bind:this={popover} popover="hint">
+    &lt;{info.id ?? `0x${info.code.toString(16)}`}&gt;
+    {#if info.title}
+      {info.title}
+    {/if}
+    {#if info.variant === "left"}
+      (Left)
+    {:else if info.variant === "right"}
+      (Right)
+    {/if}
+  </div>
 {/snippet}
 
 {#if display === "keys"}
@@ -50,15 +50,17 @@
 {:else if display === "inline-keys"}
   {#if !info.icon && dynamicMapping?.length === 1}
     <span
-    {@attach tooltip(popover)}
+      {@attach tooltip(popover)}
       class:left={info.variant === "left"}
-      class:right={info.variant === "right"}>{dynamicMapping}{@render popoverSnippet()}</span
+      class:right={info.variant === "right"}
+      >{dynamicMapping}{@render popoverSnippet()}</span
     >
   {:else if !info.icon && info.id?.length === 1}
     <span
-    {@attach tooltip(popover)}
+      {@attach tooltip(popover)}
       class:left={info.variant === "left"}
-      class:right={info.variant === "right"}>{info.id}{@render popoverSnippet()}</span
+      class:right={info.variant === "right"}
+      >{info.id}{@render popoverSnippet()}</span
     >
   {:else}
     <kbd
@@ -66,7 +68,7 @@
       class:left={info.variant === "left"}
       class:right={info.variant === "right"}
       class:icon={!!info.icon}
-    {@attach tooltip(popover)}
+      {@attach tooltip(popover)}
     >
       {dynamicMapping ??
         info.icon ??
@@ -79,9 +81,9 @@
 
 <style lang="scss">
   kbd:not(.inline-kbd) {
-    height: 24px;
-    padding-block: auto;
     transition: color 250ms ease;
+    padding-block: auto;
+    height: 24px;
   }
 
   .left {
diff --git a/src/lib/components/ActionListItem.svelte b/src/lib/components/ActionListItem.svelte
index 2f60d6a1..ee49e0a3 100644
--- a/src/lib/components/ActionListItem.svelte
+++ b/src/lib/components/ActionListItem.svelte
@@ -48,33 +48,33 @@
 <style lang="scss">
   button {
     display: flex;
-    gap: 4px;
     align-items: center;
+    gap: 4px;
+    margin: 0;
+    border-radius: 8px;
+    padding: 8px;
 
     width: 100%;
     height: auto;
-    margin: 0;
-    padding: 8px;
 
     font-family: "Noto Sans Mono", monospace;
-    border-radius: 8px;
 
     @media not (forced-colors: active) {
-      color: inherit;
-
-      background: transparent;
       border: none;
 
+      background: transparent;
+      color: inherit;
+
       &:focus-visible {
-        color: var(--md-sys-color-on-surface-variant);
-        background: var(--md-sys-color-surface-variant);
         outline: none;
+        background: var(--md-sys-color-surface-variant);
+        color: var(--md-sys-color-on-surface-variant);
       }
     }
 
     @media (forced-colors: active) {
-      border: 1px solid ButtonBorder;
       margin-block: 4px;
+      border: 1px solid ButtonBorder;
 
       &:hover {
         color: ActiveText;
@@ -86,8 +86,8 @@
     display: flex;
     flex: 1;
     flex-direction: column;
-    align-items: flex-start;
     justify-content: flex-start;
+    align-items: flex-start;
 
     text-align: start;
   }
diff --git a/src/lib/components/AnimatedNumber.svelte b/src/lib/components/AnimatedNumber.svelte
index 51d0b823..c2cfb929 100644
--- a/src/lib/components/AnimatedNumber.svelte
+++ b/src/lib/components/AnimatedNumber.svelte
@@ -29,15 +29,15 @@
 
 <style lang="scss">
   .digits {
-    position: relative;
     display: inline-block;
+    position: relative;
     transition: width 500ms ease;
   }
 
   .digit-wrapper {
     display: inline-grid;
-    height: 1em;
     width: 1ch;
+    height: 1em;
   }
 
   .digit {
diff --git a/src/lib/components/PwaStatus.svelte b/src/lib/components/PwaStatus.svelte
index c130b553..3157b9d1 100644
--- a/src/lib/components/PwaStatus.svelte
+++ b/src/lib/components/PwaStatus.svelte
@@ -16,8 +16,8 @@
 <style lang="scss">
   button {
     cursor: pointer;
-    color: var(--md-sys-color-on-background);
-    background: transparent;
     border: none;
+    background: transparent;
+    color: var(--md-sys-color-on-background);
   }
 </style>
diff --git a/src/lib/components/Terminal.svelte b/src/lib/components/Terminal.svelte
index d28bbd6e..293e9d77 100644
--- a/src/lib/components/Terminal.svelte
+++ b/src/lib/components/Terminal.svelte
@@ -33,63 +33,61 @@
 
 <style lang="scss">
   form {
+    display: flex;
     position: relative;
+    flex-direction: column;
 
     contain: strict;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
+
+    border-radius: 16px;
 
     width: 100%;
     height: 100%;
+    overflow: hidden;
+    color: var(--md-sys-color-on-secondary);
+    font-size: 0.75rem;
 
     font-family: "Noto Sans Mono", monospace;
-    font-size: 0.75rem;
-    color: var(--md-sys-color-on-secondary);
-
-    border-radius: 16px;
   }
 
   fieldset::before {
-    content: "$";
-
     position: absolute;
     bottom: 8px;
     left: 8px;
+    content: "$";
 
     font-weight: 900;
   }
 
   input {
-    width: 100%;
+    appearance: none;
     margin-block-start: -16px;
+    border: none;
+    background: var(--md-sys-color-secondary);
     padding: 8px;
-    padding-block-start: 24px;
     padding-inline-start: calc(8px + 1.5ch);
+    padding-block-start: 24px;
+    width: 100%;
+    color: var(--md-sys-color-on-secondary);
+    font-weight: 600;
 
     font-family: "Noto Sans Mono", monospace;
-    font-weight: 600;
-    color: var(--md-sys-color-on-secondary);
-
-    appearance: none;
-    background: var(--md-sys-color-secondary);
-    border: none;
   }
 
   .io {
     --scrollbar-color: var(--md-sys-color-secondary);
+    flex: 1;
 
     z-index: 1;
+    border-radius: 0 0 16px 16px;
 
-    overflow-y: auto;
-    flex: 1;
+    background: var(--md-sys-color-secondary-container);
 
     padding: 12px;
 
-    color: var(--md-sys-color-on-secondary-container);
+    overflow-y: auto;
 
-    background: var(--md-sys-color-secondary-container);
-    border-radius: 0 0 16px 16px;
+    color: var(--md-sys-color-on-secondary-container);
   }
 
   :focus-visible {
@@ -99,10 +97,10 @@
   fieldset {
     all: unset;
 
-    position: relative;
-
     display: block;
 
+    position: relative;
+
     opacity: 0.8;
 
     transition: opacity 250ms ease;
@@ -113,16 +111,16 @@
   }
 
   .anchor {
-    overflow-anchor: auto;
     height: 1px;
+    overflow-anchor: auto;
   }
 
   code,
   samp,
   p {
     display: block;
-    overflow-anchor: none;
     margin-block: 0.15rem;
+    overflow-anchor: none;
   }
 
   p {
@@ -130,24 +128,24 @@
     justify-content: center;
 
     margin-block-end: 1rem;
+    border-radius: 8px;
+
+    background: var(--md-sys-color-secondary);
     padding: 0.25rem;
 
     color: var(--md-sys-color-on-secondary);
-
-    background: var(--md-sys-color-secondary);
-    border-radius: 8px;
   }
 
   code::before {
-    content: "> ";
     margin-block-end: 0.25rem;
-    font-weight: 900;
+    content: "> ";
     color: var(--md-sys-color-primary);
+    font-weight: 900;
   }
 
   ::selection {
-    color: var(--md-sys-color-background);
     background: var(--md-sys-color-on-background);
+    color: var(--md-sys-color-background);
   }
 
   @keyframes blink {
diff --git a/src/lib/components/Tooltip.svelte b/src/lib/components/Tooltip.svelte
index 1ad3c8ac..e1c57659 100644
--- a/src/lib/components/Tooltip.svelte
+++ b/src/lib/components/Tooltip.svelte
@@ -20,8 +20,8 @@
 
     :global(kbd.icon) {
       display: inline-flex;
-      font-size: inherit;
       translate: 0 0.2em;
+      font-size: inherit;
     }
   }
 </style>
diff --git a/src/lib/components/layout/ActionSelector.svelte b/src/lib/components/layout/ActionSelector.svelte
index 13916fb9..09f9d99d 100644
--- a/src/lib/components/layout/ActionSelector.svelte
+++ b/src/lib/components/layout/ActionSelector.svelte
@@ -189,18 +189,17 @@
     border: none;
 
     label {
-      height: unset;
-      padding-block: 2px;
+      border: 1px solid currentcolor;
+      border-radius: 6px;
       padding-inline: 4px;
+      padding-block: 2px;
+      height: unset;
 
       font-size: 14px;
 
-      border: 1px solid currentcolor;
-      border-radius: 6px;
-
       &:has(:checked) {
-        color: var(--md-sys-color-on-secondary);
         background: var(--md-sys-color-secondary);
+        color: var(--md-sys-color-on-secondary);
       }
 
       input {
@@ -211,34 +210,33 @@
 
   dialog {
     display: flex;
-    align-items: center;
     justify-content: center;
+    align-items: center;
 
-    width: 100%;
-    height: 100%;
+    border: none;
 
     background: rgba(0 0 0 / 60%);
 
-    border: none;
+    width: 100%;
+    height: 100%;
   }
 
   aside {
-    pointer-events: none;
+    opacity: 0.4;
 
     margin: 8px;
-
-    opacity: 0.4;
     border: 1px dashed var(--md-sys-color-outline);
     border-radius: 8px;
+    pointer-events: none;
 
     > h3 {
-      width: fit-content;
+      margin-inline-start: 16px;
       margin-block-start: -13px;
       margin-block-end: 0;
-      margin-inline-start: 16px;
-      padding-inline: 8px;
 
       background: var(--md-sys-color-background);
+      padding-inline: 8px;
+      width: fit-content;
     }
 
     @media (prefers-contrast: more) {
@@ -253,26 +251,26 @@
 
   .search-row {
     display: flex;
-    gap: 4px;
     align-items: center;
+    gap: 4px;
     margin-inline: 16px;
   }
 
   .content {
-    position: relative;
-    transform-origin: top left;
-
-    overflow: hidden;
     display: flex;
+    position: relative;
     flex-direction: column;
+    transform-origin: top left;
+    border-radius: 16px;
+
+    background: var(--md-sys-color-background);
 
     width: calc(min(30cm, 90%));
     height: calc(min(100% - 128px, 90%));
 
-    color: var(--md-sys-color-on-background);
+    overflow: hidden;
 
-    background: var(--md-sys-color-background);
-    border-radius: 16px;
+    color: var(--md-sys-color-on-background);
 
     @media (forced-colors: active) {
       border: 1px solid CanvasText;
@@ -280,39 +278,38 @@
   }
 
   input[type="search"] {
-    width: 100%;
-    height: 64px;
+    transition: all 250ms ease;
     margin-block-end: 8px;
-    padding-inline: 16px;
-
-    font-family: inherit;
-    font-size: 16px;
-    color: currentcolor;
-
-    background: none;
     border: none;
     border-bottom: 1px solid var(--md-sys-color-surface-variant);
 
-    transition: all 250ms ease;
+    background: none;
+    padding-inline: 16px;
+    width: 100%;
+    height: 64px;
+    color: currentcolor;
+    font-size: 16px;
+
+    font-family: inherit;
 
     &:focus {
-      border-bottom: 1px solid var(--md-sys-color-primary);
       outline: none;
+      border-bottom: 1px solid var(--md-sys-color-primary);
     }
   }
 
   ul {
     --scrollbar-color: var(--md-sys-color-surface-variant);
 
-    scrollbar-gutter: both-edges stable;
-
-    overflow-y: auto;
-
     box-sizing: border-box;
-    height: 100%;
     margin: 0;
     padding: 0;
     padding-inline: 4px;
+    height: 100%;
+
+    overflow-y: auto;
+
+    scrollbar-gutter: both-edges stable;
   }
 
   li {
@@ -322,27 +319,27 @@
   .exact {
     display: flex;
     flex-direction: column;
-    align-items: center;
     justify-content: center;
-
-    width: 100%;
+    align-items: center;
     margin-block-start: 8px;
 
     border: 1px solid var(--md-sys-color-primary);
     border-radius: 8px;
 
+    width: 100%;
+
     > i {
       display: flex;
-      gap: 4px;
-      align-items: center;
       justify-content: center;
+      align-items: center;
+      gap: 4px;
+      border-radius: 0 0 8px 8px;
+
+      background: var(--md-sys-color-primary);
 
       padding-inline: 6px;
 
       color: var(--md-sys-color-on-primary);
-
-      background: var(--md-sys-color-primary);
-      border-radius: 0 0 8px 8px;
     }
 
     @media (forced-colors: active) {
diff --git a/src/lib/components/layout/GenericLayout.svelte b/src/lib/components/layout/GenericLayout.svelte
index 38ac28f9..d47ea142 100644
--- a/src/lib/components/layout/GenericLayout.svelte
+++ b/src/lib/components/layout/GenericLayout.svelte
@@ -219,9 +219,9 @@
 
 <style lang="scss">
   svg {
-    overflow: visible;
     grid-area: "d";
     width: calc(min(100%, 35cm));
     max-height: calc(100% - 170px);
+    overflow: visible;
   }
 </style>
diff --git a/src/lib/components/layout/KeyText.svelte b/src/lib/components/layout/KeyText.svelte
index 02ca3059..39f02fef 100644
--- a/src/lib/components/layout/KeyText.svelte
+++ b/src/lib/components/layout/KeyText.svelte
@@ -83,15 +83,15 @@
   $transition: 200ms;
 
   text {
-    will-change: translate, scale;
-    user-select: none;
-    transform-origin: center;
     transform-box: fill-box;
+    transform-origin: center;
     transition:
       fill #{$focus-transition} ease,
       opacity #{$transition} ease,
       translate #{$transition} ease,
       scale #{$transition} ease;
+    will-change: translate, scale;
+    user-select: none;
 
     @media (prefers-contrast: more) {
       --inactive-opacity: 0.8;
diff --git a/src/lib/components/layout/KeyboardKey.svelte b/src/lib/components/layout/KeyboardKey.svelte
index 172ce25e..84e1a7bb 100644
--- a/src/lib/components/layout/KeyboardKey.svelte
+++ b/src/lib/components/layout/KeyboardKey.svelte
@@ -113,14 +113,14 @@
   $transition: 200ms;
 
   rect {
-    transform-origin: center;
     transform-box: fill-box;
+    transform-origin: center;
   }
 
   path,
   g {
-    transform-origin: top left;
     transform-box: fill-box;
+    transform-origin: top left;
   }
 
   path,
@@ -138,15 +138,15 @@
 
   g.faded,
   g:hover {
-    cursor: default;
     opacity: 0.6;
     transition: opacity #{$transition} ease;
+    cursor: default;
   }
 
   g.highlight,
   g:focus-within {
-    color: var(--md-sys-color-primary);
     outline: none;
+    color: var(--md-sys-color-primary);
 
     > path,
     > rect {
diff --git a/src/lib/components/layout/Layout.svelte b/src/lib/components/layout/Layout.svelte
index 5ca92f2c..8bbccf95 100644
--- a/src/lib/components/layout/Layout.svelte
+++ b/src/lib/components/layout/Layout.svelte
@@ -76,8 +76,8 @@
   .container {
     display: flex;
     flex-direction: column;
-    align-items: center;
     justify-content: center;
+    align-items: center;
 
     width: 100%;
     height: 100%;
@@ -85,24 +85,23 @@
   }
 
   fieldset {
-    position: relative;
-
     display: flex;
-    align-items: center;
+    position: relative;
     justify-content: center;
-
-    padding: 8px;
+    align-items: center;
 
     border: none;
+
+    padding: 8px;
   }
 
   .layers {
     display: flex;
-    align-items: center;
     justify-content: center;
-
-    margin-inline: auto;
+    align-items: center;
 
     gap: 2px;
+
+    margin-inline: auto;
   }
 </style>
diff --git a/src/lib/dialogs/ConnectionFailed.svelte b/src/lib/dialogs/ConnectionFailed.svelte
index 3f3c3156..43fef284 100644
--- a/src/lib/dialogs/ConnectionFailed.svelte
+++ b/src/lib/dialogs/ConnectionFailed.svelte
@@ -83,9 +83,9 @@
 
 <style lang="scss">
   h1 {
+    color: var(--md-sys-color-error);
     font-size: 2em;
     text-align: center;
-    color: var(--md-sys-color-error);
   }
 
   .buttons {
@@ -100,7 +100,7 @@
 
   a {
     display: inline;
-    color: var(--md-sys-color-primary);
     padding: 0;
+    color: var(--md-sys-color-primary);
   }
 </style>
diff --git a/src/lib/dialogs/Dialog.svelte b/src/lib/dialogs/Dialog.svelte
index d19ab2e5..a35984ce 100644
--- a/src/lib/dialogs/Dialog.svelte
+++ b/src/lib/dialogs/Dialog.svelte
@@ -16,15 +16,15 @@
 
 <style lang="scss">
   dialog {
+    box-shadow: 0 0 48px rgba(0 0 0 / 60%);
+    border: none;
+    border-radius: 38px;
+
+    background: var(--md-sys-color-background);
     min-width: 300px;
     max-width: 512px;
 
     color: var(--md-sys-color-on-background);
-
-    background: var(--md-sys-color-background);
-    border: none;
-    border-radius: 38px;
-    box-shadow: 0 0 48px rgba(0 0 0 / 60%);
   }
 
   dialog::backdrop {
diff --git a/src/lib/fonts/material-symbols-rounded.scss b/src/lib/fonts/material-symbols-rounded.scss
index fa3d2f37..1a0d44ee 100644
--- a/src/lib/fonts/material-symbols-rounded.scss
+++ b/src/lib/fonts/material-symbols-rounded.scss
@@ -1,33 +1,33 @@
 @font-face {
-  font-family: "Material Symbols Rounded";
-  font-weight: 100 700;
   font-style: normal;
+  font-weight: 100 700;
   src: url("$lib/assets/icons.min.woff2") format("woff2");
+  font-family: "Material Symbols Rounded";
 }
 
 .icon {
-  user-select: none;
-
-  direction: ltr;
   display: inline-block;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 24px;
+  line-height: 1;
 
   /* stylelint-disable-next-line */
   font-family: "Material Symbols Rounded";
-  font-size: 24px;
-  font-feature-settings: "liga";
   font-variation-settings:
     "FILL" var(--icon-fill, 0),
     "wght" var(--icon-weigth, 400),
     "GRAD" var(--icon-grade, 0);
-  font-weight: normal;
-  font-style: normal;
-  line-height: 1;
-  text-transform: none;
+  font-feature-settings: "liga";
   letter-spacing: normal;
+
+  direction: ltr;
+  user-select: none;
+  text-transform: none;
   word-wrap: normal;
-  white-space: nowrap;
 
   transition: font-variation-settings 250ms ease;
+  white-space: nowrap;
 
   -moz-osx-font-smoothing: grayscale;
 }
diff --git a/src/lib/fonts/noto-sans-mono.scss b/src/lib/fonts/noto-sans-mono.scss
index f7b6adbd..314fdcf5 100644
--- a/src/lib/fonts/noto-sans-mono.scss
+++ b/src/lib/fonts/noto-sans-mono.scss
@@ -66,13 +66,13 @@
 
 /* noto-sans-mono-latin-ext-wght-normal */
 @font-face {
-  font-family: "Noto Sans Mono Variable";
-  font-weight: 100 900;
   font-style: normal;
-  font-display: swap;
+  font-weight: 100 900;
   font-stretch: 62.5% 100%;
   src: url("@fontsource-variable/noto-sans-mono/files/noto-sans-mono-latin-ext-wght-normal.woff2")
     format("woff2-variations");
+  font-family: "Noto Sans Mono Variable";
+  font-display: swap;
   unicode-range:
     U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
     U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F,
@@ -81,13 +81,13 @@
 
 /* noto-sans-mono-latin-wght-normal */
 @font-face {
-  font-family: "Noto Sans Mono";
-  font-weight: 100 900;
   font-style: normal;
-  font-display: swap;
+  font-weight: 100 900;
   font-stretch: 62.5% 100%;
   src: url("@fontsource-variable/noto-sans-mono/files/noto-sans-mono-latin-wght-normal.woff2")
     format("woff2-variations");
+  font-family: "Noto Sans Mono";
+  font-display: swap;
   unicode-range:
     U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
     U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074,
diff --git a/src/lib/setting.ts b/src/lib/setting.ts
index fc00e463..37403fcd 100644
--- a/src/lib/setting.ts
+++ b/src/lib/setting.ts
@@ -62,22 +62,22 @@ function hsvToRgb(h: number, s: number, v: number): [number, number, number] {
 
   switch (i % 6) {
     case 0:
-      (r = v), (g = t), (b = p);
+      ((r = v), (g = t), (b = p));
       break;
     case 1:
-      (r = q), (g = v), (b = p);
+      ((r = q), (g = v), (b = p));
       break;
     case 2:
-      (r = p), (g = v), (b = t);
+      ((r = p), (g = v), (b = t));
       break;
     case 3:
-      (r = p), (g = q), (b = v);
+      ((r = p), (g = q), (b = v));
       break;
     case 4:
-      (r = t), (g = p), (b = v);
+      ((r = t), (g = p), (b = v));
       break;
     case 5:
-      (r = v), (g = p), (b = q);
+      ((r = v), (g = p), (b = q));
       break;
   }
 
diff --git a/src/lib/style/_kbd.scss b/src/lib/style/_kbd.scss
index 24eab6b5..93d0f13e 100644
--- a/src/lib/style/_kbd.scss
+++ b/src/lib/style/_kbd.scss
@@ -1,18 +1,18 @@
 kbd {
   display: inline-flex;
-  align-items: center;
   justify-content: center;
-
-  height: 20px;
+  align-items: center;
   margin-block: 6px;
-  padding: 4px;
-
-  font-size: 14px;
-  font-weight: normal;
-  color: currentcolor;
 
   border: 1px solid currentcolor;
   border-radius: 4px;
+  padding: 4px;
+
+  height: 20px;
+  color: currentcolor;
+  font-weight: normal;
+
+  font-size: 14px;
 
   &.icon {
     padding: 2px;
@@ -21,8 +21,8 @@ kbd {
 
   &:has(> kbd) {
     gap: 4px;
-    padding: 0;
     border: none;
+    padding: 0;
   }
 
   > kbd {
diff --git a/src/lib/style/_reset.scss b/src/lib/style/_reset.scss
index 6bbf8109..ae364cf9 100644
--- a/src/lib/style/_reset.scss
+++ b/src/lib/style/_reset.scss
@@ -1,4 +1,4 @@
 * {
-  box-sizing: border-box;
   appearance: none;
+  box-sizing: border-box;
 }
diff --git a/src/lib/style/elements/_h1.scss b/src/lib/style/elements/_h1.scss
index 68febdb4..f5361f5c 100644
--- a/src/lib/style/elements/_h1.scss
+++ b/src/lib/style/elements/_h1.scss
@@ -1,6 +1,6 @@
 h1 {
   margin-block-start: 0;
-  font-size: 4rem;
-  font-weight: 700;
   color: var(--md-sys-color-secondary);
+  font-weight: 700;
+  font-size: 4rem;
 }
diff --git a/src/lib/style/elements/_popover.scss b/src/lib/style/elements/_popover.scss
index d48be244..6776e697 100644
--- a/src/lib/style/elements/_popover.scss
+++ b/src/lib/style/elements/_popover.scss
@@ -3,20 +3,8 @@ $translate: translateY(8px);
 
 [popover] {
   position: absolute;
-  inset: unset;
-
-  margin: 0;
-  padding: 8px;
-  border: 1px solid var(--md-sys-color-outline);
-  border-radius: 8px;
-
-  font-family: "Noto Sans Mono", monospace;
-  font-size: initial;
-  font-weight: initial;
-  color: var(--md-sys-color-on-surface);
 
   opacity: 0;
-  background: var(--md-sys-color-surface);
 
   transition:
     transform $animation-duration ease,
@@ -24,6 +12,18 @@ $translate: translateY(8px);
     overlay $animation-duration allow-discrete,
     display $animation-duration allow-discrete;
 
+  margin: 0;
+  inset: unset;
+  border: 1px solid var(--md-sys-color-outline);
+  border-radius: 8px;
+  background: var(--md-sys-color-surface);
+  padding: 8px;
+  color: var(--md-sys-color-on-surface);
+  font-weight: initial;
+  font-size: initial;
+
+  font-family: "Noto Sans Mono", monospace;
+
   position-area: bottom span-all;
   position-try-fallbacks:
     top span-all,
diff --git a/src/lib/style/form/_button.scss b/src/lib/style/form/_button.scss
index 1cdba0ce..56d999be 100644
--- a/src/lib/style/form/_button.scss
+++ b/src/lib/style/form/_button.scss
@@ -5,31 +5,30 @@ a {
 a,
 label:has(input),
 button {
-  cursor: pointer;
-
   display: flex;
-  gap: 4px;
-  align-items: center;
   justify-content: center;
+  align-items: center;
+  gap: 4px;
+  transition: all 250ms ease;
+  cursor: pointer;
+  border-radius: 32px;
+  padding-inline: 16px;
+  padding-block: 8px;
 
   width: max-content;
   height: 48px;
-  padding-block: 8px;
-  padding-inline: 16px;
+  font-weight: 600;
 
   font-family: inherit;
-  font-weight: 600;
-  border-radius: 32px;
-  transition: all 250ms ease;
 
   @media not (forced-colors: active) {
-    color: currentcolor;
-    background: transparent;
     border: none;
+    background: transparent;
+    color: currentcolor;
 
     &.primary {
-      color: var(--md-sys-color-on-primary);
       background: var(--md-sys-color-primary);
+      color: var(--md-sys-color-on-primary);
     }
   }
 
@@ -40,17 +39,17 @@ button {
 
   &.icon {
     display: inline-flex;
+    border-radius: 50%;
+    padding-inline: 0;
+    padding-block: 0;
 
     aspect-ratio: 1;
-    padding-block: 0;
-    padding-inline: 0;
 
     font-size: 24px;
-    border-radius: 50%;
 
     @media (forced-colors: active) {
-      padding: 2px;
       margin: 2px;
+      padding: 2px;
     }
   }
 
@@ -88,8 +87,8 @@ button {
     }
     &.active,
     &:active {
-      color: SelectedItemText;
       background: SelectedItem;
+      color: SelectedItemText;
     }
   }
 }
diff --git a/src/lib/style/form/_radio.scss b/src/lib/style/form/_radio.scss
index 3d03c9f5..b3f03dce 100644
--- a/src/lib/style/form/_radio.scss
+++ b/src/lib/style/form/_radio.scss
@@ -1,20 +1,19 @@
 label:has(input[type="radio"]) {
-  cursor: pointer;
-
   z-index: 1;
 
-  aspect-ratio: unset;
-  height: 1.5em;
-  padding-inline: 12px;
+  transition: all 250ms ease;
+  cursor: pointer;
   border: none;
   border-radius: 0;
 
-  font-size: 16px;
+  background: var(--md-sys-color-surface-variant);
+  padding-inline: 12px;
+
+  aspect-ratio: unset;
+  height: 1.5em;
   color: var(--md-sys-color-on-surface-variant);
 
-  background: var(--md-sys-color-surface-variant);
-
-  transition: all 250ms ease;
+  font-size: 16px;
 
   > input[type="radio"] {
     display: none;
@@ -29,8 +28,8 @@ label:has(input[type="radio"]) {
   }
 
   &:has(:checked) {
-    font-weight: 900;
-    color: var(--md-sys-color-on-tertiary);
     background: var(--md-sys-color-tertiary);
+    color: var(--md-sys-color-on-tertiary);
+    font-weight: 900;
   }
 }
diff --git a/src/lib/style/form/_toggle.scss b/src/lib/style/form/_toggle.scss
index b0c8b6df..286c00b1 100644
--- a/src/lib/style/form/_toggle.scss
+++ b/src/lib/style/form/_toggle.scss
@@ -3,57 +3,55 @@ $border: 2px;
 $height: 1.5em;
 
 label:has(input[type="checkbox"]) {
-  cursor: pointer;
-  user-select: none;
-
   display: flex;
-  gap: $padding;
-  align-items: center;
   justify-content: center;
+  align-items: center;
+  gap: $padding;
+  cursor: pointer;
 
   font-size: 12px;
+  user-select: none;
 
   input[type="checkbox"] {
     $width: calc($height * (5 / 3));
     $diameter: calc($height - ((2 * $padding) + (2 * $border)));
     $radius: calc($diameter / 2);
-
-    cursor: pointer;
+    display: flex;
 
     position: relative;
 
-    overflow: hidden;
-    display: flex;
-
-    width: $width;
-    height: $height;
-    border-radius: calc($height / 2);
-
-    font-size: inherit;
-    color: inherit;
+    cursor: pointer;
 
     outline: $border solid currentcolor;
     outline-offset: calc(-1 * $border);
+    border-radius: calc($height / 2);
+
+    width: $width;
+    height: $height;
+
+    overflow: hidden;
+    color: inherit;
+
+    font-size: inherit;
 
     &::after {
-      content: "";
+      display: block;
 
       position: absolute;
       top: calc($padding + $border);
       left: calc($padding + $border);
 
-      display: block;
-
-      width: $diameter;
-      height: $diameter;
-      border-radius: calc($radius);
+      transition: all 250ms ease;
 
       outline-color: inherit;
       outline-style: solid;
       outline-width: $radius;
       outline-offset: calc(-1 * $radius);
+      border-radius: calc($radius);
 
-      transition: all 250ms ease;
+      width: $diameter;
+      height: $diameter;
+      content: "";
     }
 
     &:checked::after {
@@ -73,14 +71,8 @@ label:has(input[type="checkbox"]) {
     }
 
     > span.icon {
-      position: relative;
-
       display: block;
-
-      width: 1em;
-      height: 1em;
-
-      font-size: inherit;
+      position: relative;
 
       clip-path: polygon(
         0% $side,
@@ -101,22 +93,26 @@ label:has(input[type="checkbox"]) {
 
       transition: all 250ms ease;
 
+      width: 1em;
+      height: 1em;
+
+      font-size: inherit;
+
       &::before {
-        content: "";
+        display: block;
 
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, 0) rotate(45deg);
 
-        display: block;
-
-        width: calc(100% * sqrt(2));
-        height: $line-width;
+        transition: all 250ms ease;
 
         background-color: currentcolor;
 
-        transition: all 250ms ease;
+        width: calc(100% * sqrt(2));
+        height: $line-width;
+        content: "";
       }
     }
 
diff --git a/src/lib/style/scrollbar.scss b/src/lib/style/scrollbar.scss
index b940575b..b7958fd1 100644
--- a/src/lib/style/scrollbar.scss
+++ b/src/lib/style/scrollbar.scss
@@ -1,14 +1,14 @@
 @media not (forced-colors: active) {
   ::-webkit-scrollbar {
-    width: 8px;
-    background: transparent;
     border-radius: 4px;
+    background: transparent;
+    width: 8px;
   }
 
   ::-webkit-scrollbar-thumb {
-    background: var(--scrollbar-color, white);
-    border-radius: 4px;
     transition: all 250ms ease;
+    border-radius: 4px;
+    background: var(--scrollbar-color, white);
 
     &:hover {
       filter: brightness(120%);
diff --git a/src/lib/style/theme.scss b/src/lib/style/theme.scss
index d0c8c1d9..238bfa99 100644
--- a/src/lib/style/theme.scss
+++ b/src/lib/style/theme.scss
@@ -11,26 +11,26 @@
 @use "elements/popover";
 
 body {
-  overflow: hidden;
   display: flex;
   flex-direction: column;
+  margin: 0;
+
+  background: var(--md-sys-color-background);
 
   width: 100vw;
   height: 100vh;
-  margin: 0;
-
-  font-family: "Noto Sans Mono", monospace;
+  overflow: hidden;
   color: var(--md-sys-color-on-background);
 
-  background: var(--md-sys-color-background);
+  font-family: "Noto Sans Mono", monospace;
 }
 
 main {
-  contain: strict;
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
   align-items: center;
+  contain: strict;
 
   padding-inline: 16px;
 }
diff --git a/src/lib/style/tippy.scss b/src/lib/style/tippy.scss
index 2b442741..49cc8bbb 100644
--- a/src/lib/style/tippy.scss
+++ b/src/lib/style/tippy.scss
@@ -1,10 +1,10 @@
 $padding: 16px;
 
 .tippy-box[data-theme~="surface-variant"] {
-  color: var(--md-sys-color-on-surface-variant);
-  background-color: var(--md-sys-color-surface-variant);
   filter: drop-shadow(0 0 12px #000a);
   border-radius: calc(24px + $padding);
+  background-color: var(--md-sys-color-surface-variant);
+  color: var(--md-sys-color-on-surface-variant);
 
   .tippy-content {
     padding: $padding;
@@ -24,10 +24,10 @@ $padding: 16px;
   }
 
   @media (forced-colors: active) {
-    color: CanvasText;
-    background-color: Canvas;
     filter: none;
     border: 1px solid CanvasText;
+    background-color: Canvas;
+    color: CanvasText;
 
     > .tippy-arrow {
       display: none;
@@ -36,16 +36,16 @@ $padding: 16px;
 }
 
 .tippy-box[data-theme~="tooltip"] {
-  color: var(--md-sys-color-on-background);
-  background-color: var(--md-sys-color-background);
   border: 1px solid var(--md-sys-color-outline);
   border-radius: 8px;
+  background-color: var(--md-sys-color-background);
+  color: var(--md-sys-color-on-background);
 }
 
 .tippy-box[data-theme~="search-completion"] {
-  overflow: hidden;
   filter: none;
   border-radius: 0 0 16px 16px;
+  overflow: hidden;
 
   .tippy-content {
     padding: 0;
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 87f0e19c..3e733de0 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -131,14 +131,13 @@
 
 <style lang="scss">
   .layout {
-    width: 100vw;
-    height: 100vh;
-
     display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: auto 1fr;
     grid-template-areas:
       "sidebar main"
       "sidebar footer";
-    grid-template-columns: auto 1fr;
-    grid-template-rows: 1fr;
+    width: 100vw;
+    height: 100vh;
   }
 </style>
diff --git a/src/routes/(app)/BrowserWarning.svelte b/src/routes/(app)/BrowserWarning.svelte
index 00114ae4..f0d0e535 100644
--- a/src/routes/(app)/BrowserWarning.svelte
+++ b/src/routes/(app)/BrowserWarning.svelte
@@ -26,17 +26,17 @@
   dialog {
     display: flex;
     flex-direction: column;
-    align-items: center;
     justify-content: center;
+    align-items: center;
+    border: none;
+
+    background: var(--md-sys-color-error);
 
     width: 100vw;
     height: 100vh;
 
     color: var(--md-sys-color-on-error);
 
-    background: var(--md-sys-color-error);
-    border: none;
-
     > * {
       max-width: 20cm;
     }
@@ -54,8 +54,8 @@
 
   div > p {
     display: flex;
-    gap: 8px;
     align-items: center;
+    gap: 8px;
     list-style: none;
   }
 
diff --git a/src/routes/(app)/Footer.svelte b/src/routes/(app)/Footer.svelte
index 5a20c7c2..15f1993f 100644
--- a/src/routes/(app)/Footer.svelte
+++ b/src/routes/(app)/Footer.svelte
@@ -175,9 +175,9 @@
 <style lang="scss">
   .sync-box {
     display: flex;
-    align-items: center;
-    justify-content: center;
     position: relative;
+    justify-content: center;
+    align-items: center;
 
     button {
       text-wrap: nowrap;
@@ -186,14 +186,14 @@
 
   progress {
     position: absolute;
-    z-index: -1;
+    right: 16px;
     bottom: 0;
     left: 16px;
-    right: 16px;
-    overflow: hidden;
+    z-index: -1;
+    border-radius: 4px;
     width: calc(100% - 32px);
     height: 8px;
-    border-radius: 4px;
+    overflow: hidden;
   }
 
   progress::-webkit-progress-bar {
@@ -205,32 +205,32 @@
   }
 
   .warning {
-    color: var(--md-sys-color-error);
-    gap: 8px;
     display: flex;
-    align-items: center;
     justify-content: center;
+    align-items: center;
+    gap: 8px;
+    color: var(--md-sys-color-error);
   }
 
   input[type="color"] {
-    cursor: pointer;
-
-    overflow: hidden;
     display: flex;
-    align-items: center;
     justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    margin: 0;
+    border: none;
+    border-radius: 50%;
+
+    background: transparent;
+    padding: 0;
 
     inline-size: 20px;
     block-size: 20px;
-    margin: 0;
-    padding: 0;
+
+    overflow: hidden;
 
     color: inherit;
 
-    background: transparent;
-    border: none;
-    border-radius: 50%;
-
     &::-webkit-color-swatch-wrapper {
       padding: 0;
     }
@@ -242,16 +242,16 @@
 
   footer {
     display: grid;
-    align-items: center;
-    justify-content: center;
     grid-template-columns: 1fr auto 1fr;
+    justify-content: center;
+    align-items: center;
 
-    width: 100%;
+    opacity: 0.4;
     padding: 8px;
     padding-inline-end: 16px;
     padding-block-start: 0;
 
-    opacity: 0.4;
+    width: 100%;
 
     @media (prefers-contrast: more) {
       opacity: 0.8;
@@ -264,8 +264,8 @@
 
   ul {
     display: flex;
-    gap: 8px;
     align-items: center;
+    gap: 8px;
 
     margin: 0;
     padding: 0;
@@ -288,13 +288,13 @@
 
   a {
     display: flex;
-    align-items: center;
     justify-content: center;
+    align-items: center;
+
+    padding-inline: 12px;
 
     font-size: 12px;
     text-decoration: none;
-
-    padding-inline: 12px;
   }
 
   .icon {
diff --git a/src/routes/(app)/Sidebar.svelte b/src/routes/(app)/Sidebar.svelte
index bb12499b..b4e1c175 100644
--- a/src/routes/(app)/Sidebar.svelte
+++ b/src/routes/(app)/Sidebar.svelte
@@ -81,15 +81,15 @@
 
 <style lang="scss">
   .sidebar {
-    margin: 8px;
-    padding-inline-end: 8px;
-    width: 64px;
     display: flex;
-    flex-direction: column;
-    justify-content: space-between;
 
     grid-area: sidebar;
+    flex-direction: column;
+    justify-content: space-between;
+    margin: 8px;
     border-right: 1px solid var(--md-sys-color-outline);
+    padding-inline-end: 8px;
+    width: 64px;
   }
 
   li {
@@ -104,18 +104,18 @@
     font-size: 12px;
 
     &.wip {
-      color: var(--md-sys-color-error);
       opacity: 0.5;
+      color: var(--md-sys-color-error);
     }
 
     .icon {
       display: flex;
       justify-content: center;
-      font-size: 24px;
-      padding: 8px;
-      border-radius: 8px;
 
       transition: all 250ms ease;
+      border-radius: 8px;
+      padding: 8px;
+      font-size: 24px;
     }
 
     > .content {
@@ -132,24 +132,24 @@
       }
 
       .icon {
+        border-radius: 50%;
         background: var(--md-sys-color-primary);
         color: var(--md-sys-color-on-primary);
-        border-radius: 50%;
       }
     }
   }
 
   ul {
-    list-style: none;
-    padding: 0;
     margin: 0;
+    padding: 0;
+    list-style: none;
   }
 
   ul + ul::before {
-    content: "";
     display: block;
-    height: 1px;
-    background: var(--md-sys-color-outline);
     margin: 16px 0;
+    background: var(--md-sys-color-outline);
+    height: 1px;
+    content: "";
   }
 </style>
diff --git a/src/routes/(app)/SyncOverlay.svelte b/src/routes/(app)/SyncOverlay.svelte
index 802eedb6..eee471cb 100644
--- a/src/routes/(app)/SyncOverlay.svelte
+++ b/src/routes/(app)/SyncOverlay.svelte
@@ -33,8 +33,8 @@
   .container {
     display: flex;
     flex-direction: column;
-    align-items: center;
     justify-content: center;
+    align-items: center;
   }
 
   div {
@@ -42,10 +42,10 @@
   }
 
   progress {
-    overflow: hidden;
+    border-radius: 4px;
     width: 100%;
     height: 8px;
-    border-radius: 4px;
+    overflow: hidden;
   }
 
   progress::-webkit-progress-bar {
@@ -53,7 +53,7 @@
   }
 
   progress::-webkit-progress-value {
-    background: var(--md-sys-color-primary);
     transition: width 2s ease;
+    background: var(--md-sys-color-primary);
   }
 </style>
diff --git a/src/routes/(app)/ccos/+layout.svelte b/src/routes/(app)/ccos/+layout.svelte
index 958ffaee..5a969490 100644
--- a/src/routes/(app)/ccos/+layout.svelte
+++ b/src/routes/(app)/ccos/+layout.svelte
@@ -97,8 +97,8 @@
   }
 
   .correct-device {
-    color: var(--md-sys-color-primary);
     opacity: 1;
+    color: var(--md-sys-color-primary);
   }
 
   .incorrect-device {
diff --git a/src/routes/(app)/ccos/+page.svelte b/src/routes/(app)/ccos/+page.svelte
index 86aa8c9f..91a48551 100644
--- a/src/routes/(app)/ccos/+page.svelte
+++ b/src/routes/(app)/ccos/+page.svelte
@@ -28,8 +28,8 @@
 <style lang="scss">
   ul {
     display: flex;
-    list-style: none;
     gap: 8px;
+    list-style: none;
   }
 
   li {
@@ -38,13 +38,13 @@
   }
 
   a {
-    outline: 1px solid var(--md-sys-color-outline);
-    border-radius: 8px;
     transition:
       background-color 200ms ease,
       color 200ms ease,
       outline-offset 200ms ease,
       outline-color 200ms ease;
+    outline: 1px solid var(--md-sys-color-outline);
+    border-radius: 8px;
   }
 
   @keyframes highlight {
@@ -71,9 +71,9 @@
   }
 
   .highlight {
-    outline-width: 2px;
-    outline-color: var(--md-sys-color-primary);
     animation: wiggle 500ms ease 2 alternate;
+    outline-color: var(--md-sys-color-primary);
+    outline-width: 2px;
     background-color: var(--md-sys-color-primary-container);
     color: var(--md-sys-color-on-primary-container);
   }
diff --git a/src/routes/(app)/ccos/[device]/+page.svelte b/src/routes/(app)/ccos/[device]/+page.svelte
index 25291894..2033de98 100644
--- a/src/routes/(app)/ccos/[device]/+page.svelte
+++ b/src/routes/(app)/ccos/[device]/+page.svelte
@@ -38,21 +38,21 @@
   }
 
   ul {
-    list-style: none;
     padding: 0;
+    list-style: none;
   }
 
   li {
-    height: 2em;
-    overflow: hidden;
     transition:
       height 200ms ease,
       opacity 200ms ease;
+    height: 2em;
+    overflow: hidden;
   }
 
   label {
-    padding: 0;
     opacity: 0.6;
+    padding: 0;
   }
 
   .title {
@@ -64,8 +64,8 @@
       margin-block-end: 0;
 
       em {
-        font-style: normal;
         color: var(--md-sys-color-primary);
+        font-style: normal;
       }
     }
   }
@@ -73,13 +73,13 @@
   time {
     opacity: 0.5;
     &:before {
-      content: "•";
       padding-inline: 0.4ch;
+      content: "•";
     }
   }
 
   div.title:has(input:not(:checked)) ~ ul .pre-release {
-    height: 0;
     opacity: 0;
+    height: 0;
   }
 </style>
diff --git a/src/routes/(app)/ccos/[device]/[version]/+page.svelte b/src/routes/(app)/ccos/[device]/[version]/+page.svelte
index 2738b622..fdba0246 100644
--- a/src/routes/(app)/ccos/[device]/[version]/+page.svelte
+++ b/src/routes/(app)/ccos/[device]/[version]/+page.svelte
@@ -353,8 +353,8 @@
   }
 
   .changelog ul {
-    list-style: none;
     padding-inline-start: 0em;
+    list-style: none;
   }
 
   .changelog li {
@@ -364,11 +364,11 @@
 
   .changelog b {
     display: inline-block;
-    color: var(--md-sys-color-on-tertiary-container);
+    translate: -0.5em -0.2em;
+    border-radius: 8px;
     background: var(--md-sys-color-tertiary-container);
     padding: 0.2em 0.5em;
-    border-radius: 8px;
-    translate: -0.5em -0.2em;
+    color: var(--md-sys-color-on-tertiary-container);
   }
 
   pre {
@@ -376,8 +376,8 @@
   }
 
   .unsafe-opt-in {
-    margin-block: 1em;
     opacity: 0.6;
+    margin-block: 1em;
     font-size: 0.7em;
 
     & + .unsafe-updates {
@@ -425,22 +425,22 @@
 
   button.inline-button {
     display: inline;
-    padding: 0;
     margin: 0;
+    padding: 0;
     height: unset;
-    font-size: inherit;
     color: var(--md-sys-color-primary);
+    font-size: inherit;
 
     .icon {
-      font-size: 1.2em;
       translate: 0 0.1em;
       padding-inline-end: 0.2em;
+      font-size: 1.2em;
     }
   }
 
   .icon.ok {
-    font-size: 1.2em;
     translate: 0 0.1em;
+    font-size: 1.2em;
     --icon-fill: 1;
   }
 
@@ -449,17 +449,7 @@
   }
 
   button.update-button {
-    overflow: hidden;
     position: relative;
-    height: 42px;
-
-    border: 2px solid currentcolor;
-    border-radius: 8px;
-
-    outline: 2px dashed currentcolor;
-    outline-offset: 4px;
-
-    background: var(--md-sys-color-background);
     transition:
       border 200ms ease,
       color 200ms ease;
@@ -467,9 +457,19 @@
     margin: 6px;
     margin-block: 16px;
 
+    outline: 2px dashed currentcolor;
+    outline-offset: 4px;
+
+    border: 2px solid currentcolor;
+    border-radius: 8px;
+
+    background: var(--md-sys-color-background);
+    height: 42px;
+    overflow: hidden;
+
     &.primary {
-      color: var(--md-sys-color-primary);
       background: none;
+      color: var(--md-sys-color-primary);
     }
 
     &.progress,
@@ -478,34 +478,34 @@
     }
 
     &.working::before {
-      z-index: -1;
       position: absolute;
+      z-index: -1;
+      border-radius: 8px;
       background: var(--md-sys-color-background);
       width: calc(100% - 4px);
       height: calc(100% - 4px);
-      border-radius: 8px;
       content: "";
     }
 
     &.working::after {
-      z-index: -2;
       position: absolute;
-      content: "";
-      background: var(--md-sys-color-primary);
+      z-index: -2;
       animation: rotate 1s ease-out forwards infinite;
-      height: 30%;
+      background: var(--md-sys-color-primary);
       width: 120%;
+      height: 30%;
+      content: "";
     }
 
     &.progress::after {
-      z-index: -2;
       position: absolute;
       left: 0;
-      content: "";
-      background: var(--md-sys-color-primary);
       opacity: 0.2;
-      height: 100%;
+      z-index: -2;
+      background: var(--md-sys-color-primary);
       width: var(--progress);
+      height: 100%;
+      content: "";
     }
   }
 
diff --git a/src/routes/(app)/chat-rx/+page.svelte b/src/routes/(app)/chat-rx/+page.svelte
index 6496c957..f91ece57 100644
--- a/src/routes/(app)/chat-rx/+page.svelte
+++ b/src/routes/(app)/chat-rx/+page.svelte
@@ -55,8 +55,8 @@
 
   .layout {
     display: flex;
-    height: 100%;
     width: 100%;
+    height: 100%;
   }
 
   hr {
@@ -65,20 +65,20 @@
   }
 
   ul {
-    list-style: none;
-    padding: 0;
     margin: 0;
+    padding: 0;
+    list-style: none;
   }
 
   button,
   a {
     display: flex;
-    align-items: center;
     justify-content: center;
-    overflow: hidden;
+    align-items: center;
+    background: var(--md-sys-color-surface-variant);
     width: 56px;
     height: 56px;
-    background: var(--md-sys-color-surface-variant);
+    overflow: hidden;
   }
 
   .chats {
@@ -86,7 +86,7 @@
   }
 
   .space {
-    font-size: 20px;
     margin-bottom: 8px;
+    font-size: 20px;
   }
 </style>
diff --git a/src/routes/(app)/chat/+page.svelte b/src/routes/(app)/chat/+page.svelte
index 02f68583..0815cd58 100644
--- a/src/routes/(app)/chat/+page.svelte
+++ b/src/routes/(app)/chat/+page.svelte
@@ -174,7 +174,7 @@
   }
 
   .members {
-    width: 200px;
     flex-shrink: 0;
+    width: 200px;
   }
 </style>
diff --git a/src/routes/(app)/config/EditActions.svelte b/src/routes/(app)/config/EditActions.svelte
index 341b8654..86a41c96 100644
--- a/src/routes/(app)/config/EditActions.svelte
+++ b/src/routes/(app)/config/EditActions.svelte
@@ -193,19 +193,19 @@
 <style lang="scss">
   .click-me {
     display: flex;
-    align-items: center;
     justify-content: center;
-    height: fit-content;
+    align-items: center;
     margin-inline: 8px;
-    padding-block: 2px;
-    padding-inline-start: 8px;
-    padding-inline-end: 12px;
-    font-family: inherit;
-    font-weight: bold;
-    color: var(--md-sys-color-primary);
-    border: 2px solid var(--md-sys-color-primary);
-    border-radius: 18px;
     outline: 2px dashed var(--md-sys-color-primary);
     outline-offset: 2px;
+    border: 2px solid var(--md-sys-color-primary);
+    border-radius: 18px;
+    padding-inline-start: 8px;
+    padding-inline-end: 12px;
+    padding-block: 2px;
+    height: fit-content;
+    color: var(--md-sys-color-primary);
+    font-weight: bold;
+    font-family: inherit;
   }
 </style>
diff --git a/src/routes/(app)/config/Navigation.svelte b/src/routes/(app)/config/Navigation.svelte
index 1af3b4f4..05e7ffd0 100644
--- a/src/routes/(app)/config/Navigation.svelte
+++ b/src/routes/(app)/config/Navigation.svelte
@@ -56,33 +56,32 @@
   nav {
     display: grid;
     grid-template-columns: 1fr auto 1fr;
+    margin-inline: auto;
+    margin-block: 8px;
+    padding-inline: 16px;
 
     width: calc(min(100%, 28cm));
-    margin-block: 8px;
-    margin-inline: auto;
-    padding-inline: 16px;
   }
 
   .icon {
-    cursor: pointer;
+    display: flex;
 
     position: relative;
-
-    display: flex;
-    align-items: center;
     justify-content: center;
+    align-items: center;
 
-    aspect-ratio: 1;
-    padding: 0;
-
-    color: inherit;
-    text-decoration: none;
-
-    background: transparent;
+    transition: all 250ms ease;
+    cursor: pointer;
     border: none;
     border-radius: 50%;
 
-    transition: all 250ms ease;
+    background: transparent;
+    padding: 0;
+
+    aspect-ratio: 1;
+
+    color: inherit;
+    text-decoration: none;
   }
 
   .actions {
@@ -96,13 +95,13 @@
 
   .profiles {
     display: flex;
-    gap: 2px;
-    align-items: center;
     justify-content: center;
+    align-items: center;
+    gap: 2px;
   }
 
   :disabled {
-    pointer-events: none;
     opacity: 0.5;
+    pointer-events: none;
   }
 </style>
diff --git a/src/routes/(app)/config/chords/+page.svelte b/src/routes/(app)/config/chords/+page.svelte
index 0143a90b..e2abc67a 100644
--- a/src/routes/(app)/config/chords/+page.svelte
+++ b/src/routes/(app)/config/chords/+page.svelte
@@ -360,8 +360,8 @@
 <style lang="scss">
   .search-container {
     display: flex;
-    align-items: center;
     justify-content: center;
+    align-items: center;
   }
 
   .paginator {
@@ -386,14 +386,14 @@
   textarea {
     flex: 1;
     transition: outline-color 250ms ease;
-    background: none;
-    color: inherit;
-    border: 1px dashed var(--md-sys-color-outline);
+    margin: 2px;
     outline: 2px solid transparent;
     outline-offset: -1px;
-    margin: 2px;
-    padding: 8px;
+    border: 1px dashed var(--md-sys-color-outline);
     border-radius: 4px;
+    background: none;
+    padding: 8px;
+    color: inherit;
 
     &:focus {
       outline-color: var(--md-sys-color-primary);
@@ -413,34 +413,33 @@
   }
 
   input[type="search"] {
-    width: 512px;
+    transition: all 250ms ease;
     margin-block-start: 16px;
-    padding-block: 8px;
-    padding-inline: 16px;
-
-    font-size: 16px;
-    color: inherit;
-
-    background: none;
     border: 0 solid var(--md-sys-color-surface-variant);
     border-bottom-width: 1px;
 
-    transition: all 250ms ease;
+    background: none;
+    padding-inline: 16px;
+    padding-block: 8px;
+    width: 512px;
+    color: inherit;
+
+    font-size: 16px;
 
     @media (prefers-contrast: more) {
-      border-color: var(--md-sys-color-outline);
       border-style: dashed;
+      border-color: var(--md-sys-color-outline);
     }
 
     &::placeholder {
-      color: var(--md-sys-color-on-surface-variant);
       opacity: 0.8;
+      color: var(--md-sys-color-on-surface-variant);
     }
 
     &:focus {
-      border-color: var(--md-sys-color-primary);
-      border-style: solid;
       outline: none;
+      border-style: solid;
+      border-color: var(--md-sys-color-primary);
     }
 
     &.loading {
@@ -449,25 +448,25 @@
   }
 
   section {
-    position: relative;
     display: flex;
-
-    overflow: hidden;
-
-    height: 100%;
-    padding-inline: 8px;
+    position: relative;
 
     border-radius: 16px;
+    padding-inline: 8px;
+
+    height: 100%;
+
+    overflow: hidden;
   }
 
   .results {
-    height: 100%;
     min-width: min(90vw, 16.5cm);
+    height: 100%;
   }
 
   table {
+    transition: all 1s ease;
     height: fit-content;
     overflow-y: hidden;
-    transition: all 1s ease;
   }
 </style>
diff --git a/src/routes/(app)/config/chords/ChordActionEdit.svelte b/src/routes/(app)/config/chords/ChordActionEdit.svelte
index ad95938f..a5ff28ec 100644
--- a/src/routes/(app)/config/chords/ChordActionEdit.svelte
+++ b/src/routes/(app)/config/chords/ChordActionEdit.svelte
@@ -176,9 +176,9 @@
   }
 
   .add {
-    font-size: 18px;
-    height: 20px;
     opacity: 0;
+    height: 20px;
+    font-size: 18px;
     --icon-fill: 1;
   }
 
@@ -187,13 +187,12 @@
   }
 
   .chord {
-    position: relative;
-
     display: inline-flex;
+    position: relative;
     gap: 4px;
+    margin-inline: 4px;
 
     height: 32px;
-    margin-inline: 4px;
 
     &:focus-within {
       outline: none;
@@ -201,22 +200,21 @@
   }
 
   .chord::after {
-    content: "";
-
     position: absolute;
     top: 50%;
     transform-origin: center left;
     translate: -20px 0;
     scale: 0 1;
 
-    width: calc(100% - 60px);
-    height: 1px;
-
-    background: currentcolor;
-
     transition:
       scale 250ms ease,
       color 250ms ease;
+
+    background: currentcolor;
+
+    width: calc(100% - 60px);
+    height: 1px;
+    content: "";
   }
 
   .edited {
diff --git a/src/routes/(app)/config/chords/ChordEdit.svelte b/src/routes/(app)/config/chords/ChordEdit.svelte
index 37838e98..032d2fa3 100644
--- a/src/routes/(app)/config/chords/ChordEdit.svelte
+++ b/src/routes/(app)/config/chords/ChordEdit.svelte
@@ -133,11 +133,11 @@
   .separator {
     display: inline-flex;
 
-    width: 1px;
-    height: 24px;
-
     opacity: 0.2;
     background: currentcolor;
+
+    width: 1px;
+    height: 24px;
   }
 
   button {
@@ -153,12 +153,12 @@
   }
 
   .table-buttons {
-    opacity: 0;
-    transition: opacity 75ms ease;
     position: absolute;
     top: 0;
     right: 0;
     transform: translate(100%, -50%);
+    opacity: 0;
+    transition: opacity 75ms ease;
     background: var(--md-sys-color-surface-variant);
   }
 
diff --git a/src/routes/(app)/config/chords/ChordPhraseEdit.svelte b/src/routes/(app)/config/chords/ChordPhraseEdit.svelte
index dc15d6c8..43d2898f 100644
--- a/src/routes/(app)/config/chords/ChordPhraseEdit.svelte
+++ b/src/routes/(app)/config/chords/ChordPhraseEdit.svelte
@@ -260,26 +260,26 @@
     transform: translateX(-50%);
     translate: 0 0;
 
-    width: 2px;
-    height: 100%;
+    transition: translate 50ms ease;
 
     background: var(--md-sys-color-on-secondary-container);
 
-    transition: translate 50ms ease;
+    width: 2px;
+    height: 100%;
 
     button {
       position: absolute;
       top: -24px;
       left: 0;
-
-      height: 24px;
-      padding: 0;
-
-      color: var(--md-sys-color-on-secondary-container);
-
-      background: var(--md-sys-color-secondary-container);
       border: 2px solid currentcolor;
       border-radius: 12px 12px 12px 0;
+
+      background: var(--md-sys-color-secondary-container);
+      padding: 0;
+
+      height: 24px;
+
+      color: var(--md-sys-color-on-secondary-container);
     }
   }
 
@@ -292,13 +292,13 @@
   }
 
   .auto-space-edit {
-    padding-inline: 0;
-    font-size: 1.3em;
     margin-inline: 8px;
-    background: var(--md-sys-color-tertiary-container);
-    color: var(--md-sys-color-on-tertiary-container);
-    height: 1em;
     border-radius: 4px;
+    background: var(--md-sys-color-tertiary-container);
+    padding-inline: 0;
+    height: 1em;
+    color: var(--md-sys-color-on-tertiary-container);
+    font-size: 1.3em;
 
     &:first-of-type:not(:has(:checked)),
     &:last-of-type:has(:checked) {
@@ -312,9 +312,9 @@
 
   .wrapper {
     display: flex;
-    align-items: center;
 
     position: relative;
+    align-items: center;
 
     padding-block: 4px;
 
@@ -322,20 +322,19 @@
 
     &::after,
     &::before {
-      content: "";
-
       position: absolute;
       bottom: -4px;
 
-      width: calc(100% - 8px);
-      height: 1px;
-
       opacity: 0;
-      background: currentcolor;
 
       transition:
         opacity 150ms ease,
         scale 250ms ease;
+      background: currentcolor;
+
+      width: calc(100% - 8px);
+      height: 1px;
+      content: "";
     }
 
     &::after {
@@ -354,12 +353,11 @@
   }
 
   [role="textbox"] {
-    cursor: text;
+    display: flex;
 
     position: relative;
-
-    display: flex;
     align-items: center;
+    cursor: text;
     white-space: pre;
 
     &:focus-within {
diff --git a/src/routes/(app)/config/layout/+page.svelte b/src/routes/(app)/config/layout/+page.svelte
index b3c2e300..a74a4e16 100644
--- a/src/routes/(app)/config/layout/+page.svelte
+++ b/src/routes/(app)/config/layout/+page.svelte
@@ -64,8 +64,8 @@
 <style lang="scss">
   section {
     display: flex;
-    align-items: center;
     justify-content: center;
+    align-items: center;
 
     width: 100%;
     height: 100%;
diff --git a/src/routes/(app)/config/settings/+page.svelte b/src/routes/(app)/config/settings/+page.svelte
index e4e19190..c8a08946 100644
--- a/src/routes/(app)/config/settings/+page.svelte
+++ b/src/routes/(app)/config/settings/+page.svelte
@@ -179,17 +179,17 @@
   }
 
   .content {
+    max-width: 20cm;
     overflow-y: auto;
     scroll-behavior: smooth;
-    max-width: 20cm;
   }
 
   legend {
-    color: var(--md-sys-color-primary);
-    font-size: 32px;
-    font-weight: bold;
     position: relative;
     padding: 0;
+    color: var(--md-sys-color-primary);
+    font-weight: bold;
+    font-size: 32px;
   }
 
   input[type="checkbox"] {
@@ -198,31 +198,31 @@
 
   fieldset {
     display: flex;
-    flex-direction: column;
     position: relative;
+    flex-direction: column;
+    margin-inline: 0;
+    margin-block-end: 32px;
+    border: none;
 
     width: 100%;
-    margin-inline: 0;
-    border: none;
-    margin-block-end: 32px;
 
     > p {
       padding-inline-start: 16px;
     }
 
     > label {
-      appearance: none;
-      position: relative;
       display: flex;
+      position: relative;
       flex-wrap: wrap;
-      align-items: center;
       justify-content: flex-start;
-      height: auto;
-      font-weight: normal;
-      padding: 8px;
-      width: fit-content;
+      align-items: center;
+      appearance: none;
 
       margin-block: 4px;
+      padding: 8px;
+      width: fit-content;
+      height: auto;
+      font-weight: normal;
 
       font-size: 14px;
 
@@ -235,11 +235,11 @@
       }
 
       &.enable-item {
-        background: var(--md-sys-color-surface-variant);
-        color: var(--md-sys-color-on-surface-variant);
         margin-inline-start: 8px;
-        padding-inline-end: 16px;
+        background: var(--md-sys-color-surface-variant);
         padding-inline-start: 8px;
+        padding-inline-end: 16px;
+        color: var(--md-sys-color-on-surface-variant);
       }
     }
 
@@ -251,41 +251,41 @@
     .description {
       width: 100%;
       font-size: 12px;
-      white-space: normal;
       text-wrap: wrap;
+      white-space: normal;
     }
 
     .unit {
-      overflow: hidden;
       display: flex;
-      gap: 4px;
-      align-items: center;
       justify-content: flex-start;
-
-      width: 67px;
-      padding-inline-end: auto;
-
-      font-size: 12px;
-      font-weight: bold;
+      align-items: center;
+      gap: 4px;
+      border-radius: 16px;
 
       background: var(--md-sys-color-secondary-container);
-      border-radius: 16px;
+      padding-inline-end: auto;
+
+      width: 67px;
+      overflow: hidden;
+      font-weight: bold;
+
+      font-size: 12px;
     }
 
     input[type="number"] {
       display: flex;
+      border: none;
+
+      background: var(--md-sys-color-secondary);
+      padding-block: 4px;
 
       width: 5ch;
       height: 100%;
-      padding-block: 4px;
+      color: var(--md-sys-color-on-secondary);
 
       font-family: "Noto Sans Mono", monospace;
-      color: var(--md-sys-color-on-secondary);
       text-align: end;
 
-      background: var(--md-sys-color-secondary);
-      border: none;
-
       &::-webkit-inner-spin-button {
         display: none;
       }
@@ -302,10 +302,10 @@
 
   select {
     appearance: none;
-    background: var(--md-sys-color-secondary);
     border: none;
-    padding: 4px 8px;
     border-radius: 8px;
+    background: var(--md-sys-color-secondary);
+    padding: 4px 8px;
     font: inherit;
     font-size: 12px;
   }
@@ -316,10 +316,10 @@
 
     &::before {
       position: absolute;
-      font-size: 16px;
       top: 0.5em;
       right: 0.25em;
       content: "•";
+      font-size: 16px;
     }
   }
 
diff --git a/src/routes/(app)/config/settings/ResetPopup.svelte b/src/routes/(app)/config/settings/ResetPopup.svelte
index c184f865..0a2c37cd 100644
--- a/src/routes/(app)/config/settings/ResetPopup.svelte
+++ b/src/routes/(app)/config/settings/ResetPopup.svelte
@@ -50,8 +50,8 @@
   }
 
   button.icon {
-    font-size: 20px;
     opacity: 0.5;
+    font-size: 20px;
   }
 
   form {
@@ -62,12 +62,12 @@
   }
 
   input[type="text"] {
-    color: inherit;
-    font-family: inherit;
-    background: none;
     border: none;
     border-bottom: 1px solid transparent;
+    background: none;
     width: fit-content;
+    color: inherit;
+    font-family: inherit;
 
     &:focus {
       outline: none;
@@ -79,8 +79,8 @@
     color: var(--md-sys-color-error);
 
     & + button {
-      color: var(--md-sys-color-error);
       opacity: 1;
+      color: var(--md-sys-color-error);
     }
   }
 </style>
diff --git a/src/routes/(app)/editor/+page.svelte b/src/routes/(app)/editor/+page.svelte
index 58a008df..e5fde088 100644
--- a/src/routes/(app)/editor/+page.svelte
+++ b/src/routes/(app)/editor/+page.svelte
@@ -102,21 +102,21 @@
     left: 0;
     transition: opacity 0.1s;
     padding: 16px;
-    padding-left: 0;
     padding-bottom: 5em;
+    padding-left: 0;
   }
 
   .toolbar {
+    display: flex;
     position: fixed;
+    right: 0;
     bottom: 0;
     left: 0;
-    right: 0;
-    padding-right: 16px;
-    display: flex;
     flex-direction: row;
-    align-items: center;
     justify-content: space-between;
+    align-items: center;
     backdrop-filter: blur(10px);
+    padding-right: 16px;
 
     > div {
       display: flex;
diff --git a/src/routes/(app)/learn/+page.svelte b/src/routes/(app)/learn/+page.svelte
index 392b7554..0ed68878 100644
--- a/src/routes/(app)/learn/+page.svelte
+++ b/src/routes/(app)/learn/+page.svelte
@@ -9,11 +9,11 @@
 
 <style lang="scss">
   ul {
-    margin: 16px;
     display: flex;
     gap: 16px;
-    list-style-type: none;
+    margin: 16px;
     padding: 0;
+    list-style-type: none;
   }
 
   a {
diff --git a/src/routes/(app)/learn/chords/+page.svelte b/src/routes/(app)/learn/chords/+page.svelte
index bd40c46a..3dd8c798 100644
--- a/src/routes/(app)/learn/chords/+page.svelte
+++ b/src/routes/(app)/learn/chords/+page.svelte
@@ -186,22 +186,21 @@
   @use "sass:math";
 
   input {
-    background: none;
-    font: inherit;
-    color: inherit;
     border: none;
+    background: none;
     width: 5ch;
+    color: inherit;
+    font: inherit;
     text-align: right;
   }
 
   div {
-    min-width: 20ch;
-    padding: 1ch;
-
     display: flex;
     flex-direction: column;
-    align-items: center;
     justify-content: center;
+    align-items: center;
+    padding: 1ch;
+    min-width: 20ch;
   }
 
   .stats {
diff --git a/src/routes/(app)/learn/layout/+page.svelte b/src/routes/(app)/learn/layout/+page.svelte
index 4355dfd0..4d67584e 100644
--- a/src/routes/(app)/learn/layout/+page.svelte
+++ b/src/routes/(app)/learn/layout/+page.svelte
@@ -117,8 +117,8 @@
   section {
     display: flex;
     flex-direction: column;
-    align-items: center;
     justify-content: center;
+    align-items: center;
 
     width: 100%;
     height: 100%;
diff --git a/src/routes/(app)/learn/sentence/+page.svelte b/src/routes/(app)/learn/sentence/+page.svelte
index a7ebecfc..629ed3ba 100644
--- a/src/routes/(app)/learn/sentence/+page.svelte
+++ b/src/routes/(app)/learn/sentence/+page.svelte
@@ -526,9 +526,9 @@
   }
 
   .wpm {
-    width: min-content;
     display: grid;
     transition: scale 0.2s ease;
+    width: min-content;
 
     * {
       grid-row: 1;
@@ -538,25 +538,25 @@
   .finish {
     display: grid;
     grid-template-rows: repeat(2, 1fr);
-    font-weight: bold;
-    justify-items: center;
     align-items: center;
+    justify-items: center;
+    font-weight: bold;
   }
 
   .sentence {
     display: grid;
-    width: min-content;
-    gap: 4px 1ch;
     grid-template-rows: repeat(4, auto);
+    gap: 4px 1ch;
     margin-block: 1rem;
+    width: min-content;
 
     .word,
     .arch {
       transition: opacity 0.2s ease;
 
       &.mastered {
-        color: var(--md-sys-color-primary);
         border-color: var(--md-sys-color-primary);
+        color: var(--md-sys-color-primary);
       }
     }
 
@@ -568,40 +568,40 @@
 
   .progress {
     position: relative;
-    height: 1rem;
-    width: auto;
-    background: var(--md-sys-color-outline-variant);
-    border: none;
-    overflow: hidden;
     grid-row: 2;
+    border: none;
+    background: var(--md-sys-color-outline-variant);
+    width: auto;
+    height: 1rem;
+    overflow: hidden;
 
     &::before,
     &::after {
-      position: absolute;
-      content: "";
       display: block;
-      height: 100%;
-      width: 100%;
+      position: absolute;
       transition: transform 0.2s;
+      width: 100%;
+      height: 100%;
+      content: "";
     }
 
     &::before {
-      background: var(--md-sys-color-outline);
       transform: translateX(var(--progress));
+      background: var(--md-sys-color-outline);
     }
 
     &::after {
-      background: var(--md-sys-color-primary);
       transform: translateX(var(--mastered));
+      background: var(--md-sys-color-primary);
     }
   }
 
   .threshold {
-    width: auto;
+    grid-row: 1;
     justify-self: center;
     opacity: 0.5;
     transition: opacity 0.2s;
-    grid-row: 1;
+    width: auto;
 
     &.mastered,
     &.active {
@@ -626,15 +626,15 @@
     display: flex;
     grid-row: 1;
     grid-column: 1;
-    font-size: 1.5rem;
-    padding: 1rem;
-    max-width: 16cm;
-    outline: 2px dashed transparent;
-    border-radius: 0.25rem;
-    margin-block: 1rem;
     transition:
       outline 0.2s ease,
       border-radius 0.2s ease;
+    margin-block: 1rem;
+    outline: 2px dashed transparent;
+    border-radius: 0.25rem;
+    padding: 1rem;
+    max-width: 16cm;
+    font-size: 1.5rem;
   }
 
   .input-section:focus-within {
diff --git a/src/routes/(app)/plugin/+page.svelte b/src/routes/(app)/plugin/+page.svelte
index 2056d538..cc3ad00b 100644
--- a/src/routes/(app)/plugin/+page.svelte
+++ b/src/routes/(app)/plugin/+page.svelte
@@ -238,23 +238,22 @@
   }
 
   button {
-    cursor: pointer;
-
     display: flex;
-    align-items: center;
     justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    border: none;
+    border-radius: 4px;
 
-    width: min-content;
+    background: var(--md-sys-color-primary);
     padding-inline-start: 0;
     padding-inline-end: 8px;
 
-    font-size: 14px;
-    font-weight: bold;
+    width: min-content;
     color: var(--md-sys-color-on-primary);
+    font-weight: bold;
 
-    background: var(--md-sys-color-primary);
-    border: none;
-    border-radius: 4px;
+    font-size: 14px;
   }
 
   .editor-root {
diff --git a/src/routes/(app)/terminal/+page.svelte b/src/routes/(app)/terminal/+page.svelte
index 412d8c51..ff16c66c 100644
--- a/src/routes/(app)/terminal/+page.svelte
+++ b/src/routes/(app)/terminal/+page.svelte
@@ -8,15 +8,15 @@
 
 <style lang="scss">
   section {
-    contain: size;
-    overflow: hidden;
     display: flex;
-    flex-direction: column;
     flex-grow: 1;
+    flex-direction: column;
     gap: 16px;
+    contain: size;
+    margin-block-end: 48px;
 
     width: calc(min(100%, 28cm));
     height: 100%;
-    margin-block-end: 48px;
+    overflow: hidden;
   }
 </style>