refactor: swap stylelint css order plugin for prettier plugin

2026-01-22 18:02:42 +00:00 · 2025-07-31 13:41:39 +02:00
parent 048dee0a6d
commit 0b2695a380
64 changed files with 649 additions and 635 deletions
--- 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" } }]
 }
--- 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": {
--- 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",
--- 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

--- 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;
  }
--- 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>
--- 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 {
--- 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);
--- 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>
--- 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>
--- 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 {
--- a/src/lib/components/Action.svelte
+++ b/src/lib/components/Action.svelte
@@ -52,13 +52,15 @@
    <span
      {@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)}
      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
@@ -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 {
--- 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;
  }
--- 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 {
--- 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>
--- 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 {
--- 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>
--- 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) {
--- 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>
--- 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;
--- 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 {
--- 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>
--- 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>
--- 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 {
--- 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;
 }
--- 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,
--- 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;
  }

--- 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 {
--- 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;
 }
--- 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;
 }
--- 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,
--- 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;
    }
  }
 }
--- 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;
  }
 }
--- 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: "";
      }
    }

--- 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%);
--- 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;
 }
--- 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;
--- 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>
--- 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;
  }

--- 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 {
--- 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>
--- 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>
--- 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 {
--- 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);
  }
--- 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>
--- 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: "";
    }
  }

--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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 {
--- 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);
  }

--- 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 {
--- 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%;
--- 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;
    }
  }

--- 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>
--- 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;
--- 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 {
--- 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 {
--- 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%;
--- 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 {
--- 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 {
--- 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>