diff --git a/.stylelintrc.json b/.stylelintrc.json
index 6514933211f..d150ebe1bf3 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -3,26 +3,19 @@
   "extends": "stylelint-config-standard-scss",
   "rules": {
     "alpha-value-notation": "number",
-    "at-rule-empty-line-before": null,
     "block-no-redundant-nested-style-rules": null,
     "color-function-alias-notation": null,
     "color-function-notation": ["legacy", { "ignore": ["with-var-inside"] }],
-    "comment-empty-line-before": null,
-    "custom-property-empty-line-before": null,
     "custom-property-pattern": null,
     "declaration-block-no-redundant-longhand-properties": null,
-    "declaration-empty-line-before": null,
     "font-family-no-missing-generic-family-keyword": null,
     "hue-degree-notation": "number",
     "no-invalid-position-at-import-rule": null,
-    "rule-empty-line-before": null,
     "selector-class-pattern": null,
     "selector-id-pattern": null,
     "selector-type-no-unknown": null,
     "shorthand-property-no-redundant-values": null,
     "scss/dollar-variable-pattern": null,
-    "scss/dollar-variable-empty-line-before": null,
-    "scss/double-slash-comment-empty-line-before": null,
     "scss/no-global-function-names": null,
     "scss/operator-no-newline-after": null
   }
diff --git a/ui/analyse/css/_action-menu.scss b/ui/analyse/css/_action-menu.scss
index 5e206454abf..861bfa0ae20 100644
--- a/ui/analyse/css/_action-menu.scss
+++ b/ui/analyse/css/_action-menu.scss
@@ -4,6 +4,7 @@
 
 .action-menu {
   @extend %border-bottom-active, %flex-column;
+
   position: absolute;
   z-index: $z-action-menu-99;
   inset: 0;
@@ -66,13 +67,14 @@
     @extend %flex-wrap;
 
     .button {
-      &-empty {
-        color: $c-font-dim;
-      }
       font-size: 0.9em;
       flex: 1 1 auto;
       padding: 7px 0;
       text-align: center;
+
+      &-empty {
+        color: $c-font-dim;
+      }
     }
   }
 
@@ -114,6 +116,7 @@
 
   span {
     @extend %flex-center;
+
     justify-content: start;
     gap: 0.6em;
   }
diff --git a/ui/analyse/css/_analyse.embed.scss b/ui/analyse/css/_analyse.embed.scss
index 2f3aa71a337..c685dea40f3 100644
--- a/ui/analyse/css/_analyse.embed.scss
+++ b/ui/analyse/css/_analyse.embed.scss
@@ -14,6 +14,7 @@ body {
   @media (min-width: at-least($small)) {
     ---main-margin: 1vw;
     ---block-gap: 15px;
+
     overflow-y: hidden;
 
     #main-wrap {
diff --git a/ui/analyse/css/_analyse.free.scss b/ui/analyse/css/_analyse.free.scss
index ecb493d0805..05a302b2274 100644
--- a/ui/analyse/css/_analyse.free.scss
+++ b/ui/analyse/css/_analyse.free.scss
@@ -6,6 +6,7 @@ $label-width: 5ch;
 .copyables {
   .pair {
     @extend %flex-center;
+
     position: relative;
   }
 
@@ -66,8 +67,8 @@ $label-width: 5ch;
 
   .bottom-action {
     @extend %box-radius-bottom;
-
     @include inline-end(0);
+
     text-align: right;
   }
 
@@ -97,6 +98,7 @@ $label-width: 5ch;
   margin-bottom: 1em; // col1
   .control-960 {
     margin-top: 0.7em;
+
     button {
       margin-left: 1em;
     }
diff --git a/ui/analyse/css/_chart-loader.scss b/ui/analyse/css/_chart-loader.scss
index 0fd13e40442..60b85fb5295 100644
--- a/ui/analyse/css/_chart-loader.scss
+++ b/ui/analyse/css/_chart-loader.scss
@@ -3,12 +3,12 @@
 }
 
 #acpl-chart-container-loader {
+  @include padding-direction(7px, 10px, 7px, 0);
+
   font-size: 0.9em;
   position: absolute;
   top: 91px;
   background: $c-bg-box;
-  @include padding-direction(7px, 10px, 7px, 0);
-
   line-height: 20px;
   box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.3);
   display: flex;
diff --git a/ui/analyse/css/_context-menu.scss b/ui/analyse/css/_context-menu.scss
index 27bb67fb191..ab69805381c 100644
--- a/ui/analyse/css/_context-menu.scss
+++ b/ui/analyse/css/_context-menu.scss
@@ -26,6 +26,7 @@
     @extend %flex-center-nowrap;
 
     color: $c-font;
+
     @include padding-direction(0.5em, 0.6em, 0.5em, 0.3em);
 
     &::before {
diff --git a/ui/analyse/css/_fork.scss b/ui/analyse/css/_fork.scss
index 72c01e3801f..c1e6ee77004 100644
--- a/ui/analyse/css/_fork.scss
+++ b/ui/analyse/css/_fork.scss
@@ -8,6 +8,7 @@ $c-fork: $c-primary;
   move {
     @include prevent-select;
     @extend %san, %flex-center;
+
     background: $m-primary_bg--mix-25;
     color: $c-font-clear;
     flex: 0 0 50%;
@@ -19,9 +20,11 @@ $c-fork: $c-primary;
     &:nth-child(odd) {
       border-inline-end: 1px solid $c-bg-box;
     }
+
     &.correct {
       background: $m-secondary_bg--mix-25;
     }
+
     &.wrong {
       background: $m-bad_bg--mix-25;
     }
@@ -34,6 +37,7 @@ $c-fork: $c-primary;
       font-size: 1.5em;
       border: 1px solid $c-bg-box;
       flex: 1 1 auto;
+
       index,
       eval {
         display: none;
@@ -60,9 +64,11 @@ $c-fork: $c-primary;
     &:not(:hover) move.selected {
       background: $c-fork;
       color: #fff;
+
       &.correct {
         background: $c-secondary;
       }
+
       &.wrong {
         background: $c-bad;
       }
diff --git a/ui/analyse/css/_layout.scss b/ui/analyse/css/_layout.scss
index b3364e6de92..b609de1043f 100644
--- a/ui/analyse/css/_layout.scss
+++ b/ui/analyse/css/_layout.scss
@@ -68,6 +68,7 @@ body {
   }
 
   ---chat-height: fit-content(0);
+
   &--wiki {
     ---chat-height: 0;
   }
@@ -104,6 +105,7 @@ body {
     &__side {
       margin: $analyse-block-gap 0 0 0;
     }
+
     .chat__members {
       margin: calc($analyse-block-gap / 2) 0 0 0;
     }
diff --git a/ui/analyse/css/_persistence.scss b/ui/analyse/css/_persistence.scss
index f1d9336cf6d..93755ad0c45 100644
--- a/ui/analyse/css/_persistence.scss
+++ b/ui/analyse/css/_persistence.scss
@@ -2,18 +2,23 @@
   &__persistence {
     &__help {
       @extend %flex-center-nowrap;
+
       font-size: 0.9em;
       background: $c-bg-zebra;
       padding: 0.4em 0.8em;
       margin: 0;
+
       i {
         font-size: 1.5em;
         margin-right: 0.4em;
       }
     }
+
     &__actions {
       @extend %flex-between-nowrap;
+
       font-size: 0.9em;
+
       .button {
         &::before {
           margin-right: 0.4em;
diff --git a/ui/analyse/css/_player-clock.scss b/ui/analyse/css/_player-clock.scss
index da2befffc8d..66355432eff 100644
--- a/ui/analyse/css/_player-clock.scss
+++ b/ui/analyse/css/_player-clock.scss
@@ -3,8 +3,9 @@
 $clock-height: 20px;
 
 .analyse__player_strip {
-  position: absolute;
   @include inline-end(0);
+
+  position: absolute;
   display: flex;
 
   &.top {
@@ -66,6 +67,7 @@ $clock-height: 20px;
       margin-inline-start: -10px;
     }
   }
+
   score {
     margin-top: -2px;
   }
diff --git a/ui/analyse/css/_practice.scss b/ui/analyse/css/_practice.scss
index 9421c1a418d..3d4c939716c 100644
--- a/ui/analyse/css/_practice.scss
+++ b/ui/analyse/css/_practice.scss
@@ -1,5 +1,6 @@
 .practice-box {
   @include prevent-select;
+
   flex: 0 0 135px;
 
   .comment {
@@ -20,6 +21,7 @@
         @extend %san;
       }
     }
+
     .next {
       border: 0;
       background: $m-primary_bg--mix-80;
@@ -110,16 +112,19 @@
 
 .ceval .practice-mode {
   @extend %flex-column;
+
   justify-content: center;
   flex: 1 0 auto;
   height: 38px;
   width: 64px;
   text-align: center;
   font-weight: bold;
+
   p {
     margin: 0;
     font-size: 1rem;
   }
+
   p.secondary {
     font-size: 0.9rem;
     opacity: 0.6;
diff --git a/ui/analyse/css/_round-training.scss b/ui/analyse/css/_round-training.scss
index 9cf0c8979d4..6f585a9e745 100644
--- a/ui/analyse/css/_round-training.scss
+++ b/ui/analyse/css/_round-training.scss
@@ -1,9 +1,12 @@
 .analyse__puzzle {
   margin-top: $analyse-block-gap;
+
   a {
     @extend %flex-center-nowrap;
+
     text-transform: inherit;
     text-align: start;
+
     &::before {
       font-size: 2.8em;
     }
@@ -32,28 +35,36 @@
 
   &__side > div {
     display: flex;
+
     i,
     strong {
       flex: 0 1 6ch;
       text-align: center;
     }
+
     &.symbol {
       cursor: pointer;
     }
+
     &.inaccuracy {
       color: $c-inaccuracy;
+
       &:hover {
         color: $m-inaccuracy_font--mix-70;
       }
     }
+
     &.mistake {
       color: $c-mistake;
+
       &:hover {
         color: $m-mistake_font--mix-70;
       }
     }
+
     &.blunder {
       color: $c-blunder;
+
       &:hover {
         color: $m-blunder_font--mix-70;
       }
diff --git a/ui/analyse/css/_round-underboard.scss b/ui/analyse/css/_round-underboard.scss
index 75e3b18ae50..e5edff69d2e 100644
--- a/ui/analyse/css/_round-underboard.scss
+++ b/ui/analyse/css/_round-underboard.scss
@@ -78,6 +78,7 @@ $col2-panel-height: 240px;
   .computer-analysis {
     position: relative;
   }
+
   .future-game-analysis {
     text-align: center;
     margin-top: 2em;
@@ -91,8 +92,8 @@ $col2-panel-height: 240px;
 
     > div {
       @extend %flex-center-nowrap;
-      gap: 1em;
 
+      gap: 1em;
       margin-bottom: 1em;
     }
 
@@ -161,6 +162,7 @@ $col2-panel-height: 240px;
 
   .gif-actions {
     @extend %flex-center-nowrap;
+
     gap: 1em;
   }
 }
diff --git a/ui/analyse/css/_side.scss b/ui/analyse/css/_side.scss
index 8eb4ca0edca..6708e33ee90 100644
--- a/ui/analyse/css/_side.scss
+++ b/ui/analyse/css/_side.scss
@@ -3,21 +3,22 @@
     align-self: start;
 
     .back-to-game {
+      text-align: center;
       margin-top: 2em;
 
       @include mq-at-least-col3 {
         margin-top: 10vh;
       }
 
-      text-align: center;
-
       .button {
         margin: 0 auto;
       }
     }
+
     .analyse__wiki {
       margin: 2vh 0;
       flex: 1 1 auto;
+
       @include mq-at-least-col3 {
         flex: 1 1 0;
       }
@@ -27,10 +28,13 @@
       }
     }
   }
+
   &--wiki .analyse__side {
     @extend %flex-column;
+
     align-self: auto;
   }
+
   &__wiki {
     overflow-y: auto;
     padding: 1rem 1rem 0 1rem;
@@ -40,11 +44,14 @@
       text-align: justify;
       line-height: 1.5;
     }
+
     h1,
     h2 {
       @include fluid-size('font-size', 17px, 23px);
+
       margin-bottom: 1rem;
     }
+
     h3 {
       font-size: 1.2em;
       font-weight: bold;
diff --git a/ui/analyse/css/_tools-mobile.scss b/ui/analyse/css/_tools-mobile.scss
index 9182e63c59e..9c195120d7d 100644
--- a/ui/analyse/css/_tools-mobile.scss
+++ b/ui/analyse/css/_tools-mobile.scss
@@ -3,23 +3,28 @@
     .sub-box {
       order: 0;
     }
+
     .ceval,
     .pv_box,
     .analyse__fork,
     .gamebook-edit {
       order: 1;
     }
+
     .analyse__moves {
       order: 2;
     }
+
     .ceval .engine {
       margin-inline-start: 12px;
     }
+
     .ceval .cmn-toggle,
     .ceval pearl {
       display: none;
     }
   }
+
   .analyse__controls {
     padding-top: 6px;
     height: 5rem;
@@ -28,9 +33,11 @@
     .jumps {
       order: 1;
     }
+
     [data-act='opening-explorer'] {
       order: 2;
     }
+
     [data-act='menu'] {
       order: 3;
     }
@@ -43,6 +50,7 @@
       border-radius: 6px 6px 0 0;
       background: $m-bg_bg-page--mix-50;
     }
+
     .scrub-help {
       margin-inline: 3px;
       align-self: center;
@@ -50,32 +58,40 @@
       font-size: 1.1em;
       color: $c-border;
     }
+
     .jumps {
       flex: 40%;
     }
+
     .jumps:has([data-act='first']) {
       padding-inline: 8px;
       flex: 50%;
     }
+
     .jumps .fbt {
       margin: 5px 2px;
       background: $m-bg_bg-page--mix-50;
       border: 1px solid $m-clearer--fade-95;
     }
+
     .jumps .fbt[data-act='first'],
     .jumps .fbt[data-act='last'] {
       flex: 1.6;
     }
+
     .fbt.active {
       padding-top: 0;
       border-bottom: none;
     }
+
     eval {
       @media (min-width: at-least($xx-small)) {
         font-size: 1.2em;
       }
+
       pointer-events: none;
     }
+
     [data-mode] {
       position: relative;
       overflow-x: hidden;
@@ -86,28 +102,34 @@
 
       .cmn-toggle {
         margin-inline-start: 10px;
+
         @media (max-width: at-most($xxx-small)) {
           transform: scale(0.7);
           margin-inline-start: 0;
         }
+
         label {
           background-color: $c-font-dimmer !important;
         }
       }
     }
+
     [data-mode]::before,
     [data-mode]::after {
       font-size: 1.3em;
       font-family: lichess;
     }
+
     [data-mode='practice']::before {
       content: $licon-Bullseye;
       padding-inline-end: 8px;
     }
+
     [data-mode='retro']::before {
       font-size: 1.5em;
       content: $licon-GraduateCap;
     }
+
     [data-mode='practice'].active::after,
     [data-mode='retro'].active::after {
       position: absolute;
@@ -117,17 +139,21 @@
       color: $m-bg_secondary--mix-50;
       content: $licon-X;
     }
+
     [data-mode='ceval']::after {
       content: $licon-Cogs;
       color: $c-font-dimmer;
       padding-inline-end: 10px;
     }
+
     [data-mode='ceval']:has(eval)::after {
       content: '';
     }
+
     [data-mode] .bar {
       display: none;
     }
+
     [data-mode]:not(.active) .bar {
       position: absolute;
       display: block;
@@ -145,10 +171,12 @@
           no-repeat,
         linear-gradient(45deg, transparent, $m-good--fade-30, transparent) -100% 0 / 200% 100% no-repeat;
     }
+
     [data-mode].computing:not([data-mode='ceval'].active) .bar {
       opacity: 1;
       animation-play-state: running;
     }
+
     @keyframes computing {
       to {
         background-position:
@@ -157,17 +185,21 @@
       }
     }
   }
+
   .analyse[data-active-tool] .analyse__tools,
   .analyse[data-active-mode] .analyse__tools {
     border-radius: 0 0 $box-radius-size $box-radius-size;
   }
+
   .analyse[data-active-tool] .analyse__tools,
   .analyse[data-active-mode='retro'] .analyse__tools {
     border-top: 3px solid $c-secondary;
   }
+
   .analyse[data-active-mode='practice'] .analyse__tools .ceval {
     order: 0;
   }
+
   .analyse[data-active-mode='practice'] .analyse__fork,
   .analyse[data-active-mode='retro'] .analyse__fork {
     display: none;
diff --git a/ui/analyse/css/_tools.scss b/ui/analyse/css/_tools.scss
index e19fb075a60..83113465151 100644
--- a/ui/analyse/css/_tools.scss
+++ b/ui/analyse/css/_tools.scss
@@ -17,6 +17,7 @@
       line-height: 1.9em;
       background: $m-secondary_bg--mix-40;
       padding: 0 7px;
+
       a {
         font-weight: bold;
       }
@@ -43,6 +44,7 @@
 
 .analyse__moves {
   @include prevent-select;
+
   flex: 2 1 0;
   display: flex;
   flex-direction: column;
@@ -51,7 +53,6 @@
   // 0 size forces vertical scrollbar
   overflow-y: auto;
   overflow-x: hidden;
-
   position: relative;
 
   /* required so line::before scrolls along the moves! */
diff --git a/ui/analyse/css/_training.scss b/ui/analyse/css/_training.scss
index 0282130be96..76fdde62604 100644
--- a/ui/analyse/css/_training.scss
+++ b/ui/analyse/css/_training.scss
@@ -73,6 +73,7 @@
 
   .instruction {
     @extend %flex-column;
+
     flex: 1;
   }
 
@@ -83,6 +84,7 @@
 
   .choices {
     @extend %flex-between;
+
     line-height: 1.6em;
     margin: 5px 0 -5px 0;
   }
diff --git a/ui/analyse/css/build/analyse.free.embed.scss b/ui/analyse/css/build/analyse.free.embed.scss
index 1f08e1a1ad4..60060e0f893 100644
--- a/ui/analyse/css/build/analyse.free.embed.scss
+++ b/ui/analyse/css/build/analyse.free.embed.scss
@@ -12,6 +12,5 @@
 @import '../../../lib/css/component/dialog';
 @import '../../../lib/css/component/box';
 @import '../../../lib/css/component/button';
-
 @import '../analyse.free';
 @import '../analyse.embed';
diff --git a/ui/analyse/css/build/analyse.free.scss b/ui/analyse/css/build/analyse.free.scss
index 826faf4305c..94edb0a128e 100644
--- a/ui/analyse/css/build/analyse.free.scss
+++ b/ui/analyse/css/build/analyse.free.scss
@@ -1,5 +1,4 @@
 @import '../analyse.abstract';
 @import '../../../lib/css/component/mselect';
 @import '../../../lib/css/component/toggle-box';
-
 @import '../analyse.free';
diff --git a/ui/analyse/css/build/analyse.relay-admin.scss b/ui/analyse/css/build/analyse.relay-admin.scss
index c48df6e3beb..bcf2c66d9b5 100644
--- a/ui/analyse/css/build/analyse.relay-admin.scss
+++ b/ui/analyse/css/build/analyse.relay-admin.scss
@@ -1,3 +1,2 @@
 @import '../../../lib/css/plugin';
-
 @import '../study/relay/admin';
diff --git a/ui/analyse/css/build/analyse.relay.embed.scss b/ui/analyse/css/build/analyse.relay.embed.scss
index 5f210e3a775..0f21e3861d8 100644
--- a/ui/analyse/css/build/analyse.relay.embed.scss
+++ b/ui/analyse/css/build/analyse.relay.embed.scss
@@ -1,5 +1,4 @@
 @import '../../../lib/css/embed';
-@import '../analyse.abstract';
 @import '../../../lib/css/base/util';
 @import '../../../lib/css/base/form';
 @import '../../../lib/css/form/form3';
@@ -14,9 +13,10 @@
 @import '../../../lib/css/component/button';
 @import '../../../fide/css/table';
 @import '../../../fide/css/show';
-
+@import '../analyse.abstract';
 @import '../study/show';
 
 $player-height: 45px;
+
 @import '../study/relay/show';
 @import '../study/relay/embed';
diff --git a/ui/analyse/css/build/analyse.relay.scss b/ui/analyse/css/build/analyse.relay.scss
index 9650f97b597..247051d279d 100644
--- a/ui/analyse/css/build/analyse.relay.scss
+++ b/ui/analyse/css/build/analyse.relay.scss
@@ -12,8 +12,8 @@
 @import '../../../lib/css/chat/chat';
 @import '../../../fide/css/table';
 @import '../../../fide/css/show';
-
 @import '../study/show';
 
 $player-height: 45px;
+
 @import '../study/relay/show';
diff --git a/ui/analyse/css/build/analyse.round.scss b/ui/analyse/css/build/analyse.round.scss
index 29269efcdd2..44c7fe9f816 100644
--- a/ui/analyse/css/build/analyse.round.scss
+++ b/ui/analyse/css/build/analyse.round.scss
@@ -1,8 +1,5 @@
 @import '../analyse.abstract';
-
 @import '../../../lib/css/component/context-streamer';
-
 @import '../../../round/css/meta';
 @import '../../../lib/css/chat/chat';
-
 @import '../analyse.round';
diff --git a/ui/analyse/css/build/analyse.study.scss b/ui/analyse/css/build/analyse.study.scss
index cca2aab5358..1f811045a69 100644
--- a/ui/analyse/css/build/analyse.study.scss
+++ b/ui/analyse/css/build/analyse.study.scss
@@ -6,6 +6,5 @@
 @import '../../../lib/css/component/vertical-resize';
 @import '../../../lib/css/chat/chat';
 @import '../../../lib/css/chess/zh-pocket';
-
 @import '../zh';
 @import '../study/show';
diff --git a/ui/analyse/css/explorer/_config.scss b/ui/analyse/css/explorer/_config.scss
index b4f0618fe89..f0f6e5b8fb4 100644
--- a/ui/analyse/css/explorer/_config.scss
+++ b/ui/analyse/css/explorer/_config.scss
@@ -19,13 +19,12 @@
 
     button {
       @extend %metal;
+      @include transition;
+
       flex-grow: 1;
       padding: 5px 0;
       text-align: center;
       cursor: pointer;
-
-      @include transition;
-
       border: $border;
       border-width: 1px 0 1px 1px;
       text-transform: capitalize;
@@ -51,6 +50,7 @@
         text-shadow: 1px 0 0 rgba(0, 0, 0, 0.5);
         font-weight: bold;
       }
+
       &[aria-pressed='true'] {
         box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2) inset;
       }
@@ -61,6 +61,7 @@
     > div {
       @extend %flex-center;
     }
+
     .player-name {
       border-radius: $box-radius-size !important;
       font-weight: bold;
@@ -68,10 +69,12 @@
       padding-right: 1em;
       text-transform: none;
       margin-inline-end: 0.5em;
+
       &.active:hover {
         background: $m-secondary_white--mix-80;
       }
     }
+
     .color {
       margin-inline-start: 1ch;
     }
@@ -87,10 +90,12 @@
     label {
       @extend %flex-between-nowrap;
     }
+
     input {
       border: none;
       background: none;
       padding: 0.1em 0.5em;
+
       &:invalid {
         background: $m-bad_bg--mix-30;
       }
@@ -110,20 +115,25 @@
       overflow: visible !important;
       position: relative;
       display: inline-block;
-
       padding-top: 2em;
       margin-bottom: 2em;
     }
+
     .previous {
       @extend %flex-wrap;
+
       gap: 0.4em;
+
       .button {
         margin: 0.3em 0.2em;
         text-transform: none;
       }
+
       .remove {
         $remove-button-diameter: 1.75em;
+
         @include inline-end(-0.65em);
+
         margin-inline-start: -$remove-button-diameter;
         width: $remove-button-diameter;
         height: $remove-button-diameter;
@@ -131,6 +141,7 @@
         background-color: $c-bg-popup;
         position: relative;
         border-radius: 50%;
+
         &:hover {
           background-color: $c-error;
         }
diff --git a/ui/analyse/css/explorer/_explorer.scss b/ui/analyse/css/explorer/_explorer.scss
index af682c014c2..4debf19781f 100644
--- a/ui/analyse/css/explorer/_explorer.scss
+++ b/ui/analyse/css/explorer/_explorer.scss
@@ -39,10 +39,13 @@
 
   .title {
     @extend %ellipsis;
+
     user-select: text;
   }
+
   .explorer-title {
     @extend %flex-center-nowrap;
+
     align-items: stretch;
     font-size: 0.9rem;
     line-height: 1.9em;
@@ -52,27 +55,34 @@
     .ddloader {
       padding-inline-start: 7px;
     }
+
     .active {
       @extend %flex-center-nowrap;
+
       direction: ltr;
       padding: 0 7px;
       color: $c-font-clear;
       background: $m-secondary_bg--mix-40;
+
       strong {
         margin-inline-end: 0.5ch;
       }
+
       &.player {
         cursor: pointer;
       }
     }
+
     .long {
       letter-spacing: -0.1ch;
     }
+
     button {
       display: inline-block;
       padding: 0 0.5ch;
       margin-inline-start: 1px;
       color: $c-font-dim;
+
       &:hover {
         color: $c-font-clear;
         background: $m-secondary_bg--mix-50;
@@ -109,11 +119,13 @@
     will-change: transform, opacity; /* Prevents flicker in Safari */
     th {
       @extend %roboto;
+
       font-size: 0.8rem;
       line-height: 1.8em;
       background: $m-secondary_bg--mix-40;
       padding-inline-start: 7px;
     }
+
     td:first-child {
       @extend %san;
 
@@ -184,6 +196,7 @@
   .white {
     background: #ccc;
     box-shadow: 0 -5px 7px rgba(0, 0, 0, 0.25) inset;
+
     @include if-light {
       background: #fff;
       box-shadow: 0 -5px 7px rgba(0, 0, 0, 0.1) inset;
@@ -198,6 +211,7 @@
   .black {
     color: #ddd;
     box-shadow: 0 5px 7px rgba(255, 255, 255, 0.1) inset;
+
     @include if-light {
       color: #fff;
       box-shadow: 0 5px 7px rgba(255, 255, 255, 0.2) inset;
@@ -206,6 +220,7 @@
 
   .draws {
     background: #666;
+
     @include if-light {
       background: #a0a0a0;
     }
@@ -213,9 +228,11 @@
 
   .black {
     background: #333;
+
     @include if-light {
       background: #555;
     }
+
     color: #ddd;
   }
 
@@ -226,6 +243,7 @@
       @include padding-direction(5px, 0, 5px, 7px);
 
       max-width: 110px;
+
       &:nth-child(2) {
         max-width: none;
       }
@@ -298,9 +316,10 @@
   }
 
   .toconf {
+    @include inline-end(0);
+
     position: absolute;
     top: 0;
-    @include inline-end(0);
     cursor: pointer;
     display: block;
     font-size: 1.2em;
@@ -316,6 +335,7 @@
 
   .message {
     @extend %flex-column;
+
     flex: 1 1 auto;
     justify-content: center;
     text-align: center;
@@ -357,6 +377,7 @@
   .explorer-box .explorer-title {
     line-height: 3em;
   }
+
   .explorer-box button.toconf {
     font-size: 1.5em;
     margin-top: 2px;
diff --git a/ui/analyse/css/gamebook/_play.scss b/ui/analyse/css/gamebook/_play.scss
index 480a8a915af..262604a8e9b 100644
--- a/ui/analyse/css/gamebook/_play.scss
+++ b/ui/analyse/css/gamebook/_play.scss
@@ -60,7 +60,9 @@
       position: absolute;
       content: '';
       bottom: -9px;
+
       @include inline-end(20%);
+
       width: 15px;
       height: 15px;
       background: $c-bg-box;
@@ -231,6 +233,7 @@
 
         &:last-child {
           @extend %box-radius-right;
+
           &:first-child {
             @extend %box-radius;
           }
diff --git a/ui/analyse/css/practice/_side.scss b/ui/analyse/css/practice/_side.scss
index a234fabd44f..b19d5cf41d4 100644
--- a/ui/analyse/css/practice/_side.scss
+++ b/ui/analyse/css/practice/_side.scss
@@ -36,10 +36,9 @@
 
   .finally {
     @extend %flex-center-nowrap;
-
-    flex: 0 0 auto;
     @include padding-direction(0.7em, 0.7em, 0.7em, 0);
 
+    flex: 0 0 auto;
     background: $c-bg-low;
     font-size: 0.9em;
 
diff --git a/ui/analyse/css/study/_chapters.scss b/ui/analyse/css/study/_chapters.scss
index fdbe9014168..7a884857284 100644
--- a/ui/analyse/css/study/_chapters.scss
+++ b/ui/analyse/css/study/_chapters.scss
@@ -37,6 +37,7 @@ $span-width: 1.7em;
 
     res {
       @extend %flex-center;
+
       align-self: center;
       font-size: 0.9em;
       white-space: nowrap;
diff --git a/ui/analyse/css/study/_desc.scss b/ui/analyse/css/study/_desc.scss
index d52c047c0a4..5c63fab73fe 100644
--- a/ui/analyse/css/study/_desc.scss
+++ b/ui/analyse/css/study/_desc.scss
@@ -17,10 +17,10 @@
 
   .contrib {
     @extend %popup-shadow;
+    @include inline-end(0);
 
     position: absolute;
     top: 0;
-    @include inline-end(0);
     background: $m-accent_bg--mix-10;
     padding: 0.5em 0.8em;
     display: none;
diff --git a/ui/analyse/css/study/_editor.scss b/ui/analyse/css/study/_editor.scss
index e42f2c669ed..056fd961128 100644
--- a/ui/analyse/css/study/_editor.scss
+++ b/ui/analyse/css/study/_editor.scss
@@ -12,10 +12,12 @@
 
 .board-editor {
   @include prevent-select;
+
   display: grid;
   grid-template-columns: 280px 2vmin 210px;
   grid-template-rows: min-content auto min-content;
   grid-template-areas: '.            . e-tools' 'spare-top    . e-tools' 'e-board      . e-tools' 'spare-bottom . e-tools' '.            . e-tools';
+
   @media (width <= 576px) {
     grid-template-columns: 100%;
     grid-template-rows: auto min-content;
diff --git a/ui/analyse/css/study/_layout.scss b/ui/analyse/css/study/_layout.scss
index 88f2b0eeb0b..cf431e1a98f 100644
--- a/ui/analyse/css/study/_layout.scss
+++ b/ui/analyse/css/study/_layout.scss
@@ -20,13 +20,16 @@
     .vertical-resize {
       display: flex;
     }
+
     .mchat {
       margin-top: 0;
       min-height: 34px;
     }
   }
+
   .analyse.variant-crazyhouse {
     $pocket-height: 60px;
+
     grid-template-rows: $pocket-height auto var(---chat-height) $pocket-height minmax(0, auto) 1fr;
     grid-template-areas:
       'side    . board   gauge pocket-top'
diff --git a/ui/analyse/css/study/_list-widget.scss b/ui/analyse/css/study/_list-widget.scss
index 94f97e746b3..0936e10739f 100644
--- a/ui/analyse/css/study/_list-widget.scss
+++ b/ui/analyse/css/study/_list-widget.scss
@@ -49,6 +49,7 @@
 
     .top {
       @extend %flex-center-nowrap, %break-word, %roboto;
+
       gap: 1rem;
 
       .study-name {
@@ -76,6 +77,7 @@
         flex: 0 0 auto;
         color: $m-primary_bg--mix-80;
         font-size: 3em;
+
         img {
           margin: 0;
         }
diff --git a/ui/analyse/css/study/_list.scss b/ui/analyse/css/study/_list.scss
index 593db297e4c..00312715b6a 100644
--- a/ui/analyse/css/study/_list.scss
+++ b/ui/analyse/css/study/_list.scss
@@ -1,6 +1,7 @@
 %study-list {
   @extend %box-neat;
   @include prevent-select;
+
   background: $c-bg-box;
 
   .study-list > div,
@@ -54,6 +55,7 @@
 %study-list-ongoing {
   ongoing {
     @extend %flex-center-center;
+
     align-self: center;
     font-size: 0.7em;
     color: $c-bad;
diff --git a/ui/analyse/css/study/_members.scss b/ui/analyse/css/study/_members.scss
index a506cb1f2bb..6bcd492fe79 100644
--- a/ui/analyse/css/study/_members.scss
+++ b/ui/analyse/css/study/_members.scss
@@ -22,6 +22,7 @@
 
   .status {
     @extend %flex-center-center;
+
     width: 2.4em;
     margin-inline-end: 0.1em;
     transition: 2.5s;
@@ -106,7 +107,6 @@
 
   m-config {
     @extend %flex-between;
-
     @include padding-direction(0.4em, 0.8em, 1em, 0.8em);
   }
 }
diff --git a/ui/analyse/css/study/_modal.scss b/ui/analyse/css/study/_modal.scss
index dbc78099078..e253cbbe7e4 100644
--- a/ui/analyse/css/study/_modal.scss
+++ b/ui/analyse/css/study/_modal.scss
@@ -70,10 +70,13 @@
       margin: -1em 0 1.6em 0;
       border-bottom: $border;
     }
+
     .import-from__chapter {
       @extend %break-word-hard, %ellipsis;
+
       max-width: 100%;
     }
+
     .preview-in-editor {
       float: right;
       margin-top: 0.2em;
@@ -82,9 +85,11 @@
 
   &.study-edit .flair-and-name {
     gap: 4%;
+
     .form-group:last-child {
       flex: 1 1 auto;
     }
+
     .uflair {
       margin: 0;
       font-size: 1.3em;
diff --git a/ui/analyse/css/study/_player.scss b/ui/analyse/css/study/_player.scss
index 3275f7eb343..36e44bb9b97 100644
--- a/ui/analyse/css/study/_player.scss
+++ b/ui/analyse/css/study/_player.scss
@@ -22,9 +22,9 @@ $player-height: 1.6rem;
 
 .study__player {
   @extend %flex-between-nowrap, %metal, %box-shadow;
+  @include inline-end(0);
 
   position: absolute;
-  @include inline-end(0);
   font-weight: bold;
   width: var(---cg-width, 100%);
   height: $player-height;
@@ -84,17 +84,21 @@ $player-height: 1.6rem;
 
   .info {
     @extend %flex-center-nowrap;
+
     margin-inline-start: 10px;
     overflow: hidden;
 
     .team,
     .name {
       @extend %ellipsis;
+
       max-width: fit-content;
       flex: 1;
     }
+
     a.name {
       color: $c-font;
+
       &:hover {
         color: $c-link;
       }
@@ -105,13 +109,16 @@ $player-height: 1.6rem;
     margin-inline-start: 0.5ch;
     flex: 3;
   }
+
   .team {
     @extend %roboto;
+
     margin-inline-end: 1ch;
     padding: 0 1ch;
     flex: 2;
     color: $c-font-dim;
   }
+
   .mini-game__flag {
     height: 1em;
     width: 1em;
diff --git a/ui/analyse/css/study/_search.scss b/ui/analyse/css/study/_search.scss
index 632d47fe097..8dd82b0c067 100644
--- a/ui/analyse/css/study/_search.scss
+++ b/ui/analyse/css/study/_search.scss
@@ -2,26 +2,34 @@
   @media (min-width: at-least($xx-small)) {
     width: 500px;
   }
+
   input {
     width: 100%;
   }
+
   &__results {
     @extend %study-list, %study-list-ongoing;
+
     box-shadow: none !important;
     height: 20em;
     margin-top: 1em;
     text-align: start;
+
     button {
       width: 100%;
       padding: 0.5em 1em;
     }
+
     h3 {
       @extend %nowrap-ellipsis;
+
       flex: 0 1 auto;
     }
+
     res {
       flex: 0 0 auto;
     }
+
     high {
       background-color: $m-yellow_bg--mix-30;
       color: $c-font-clearer;
diff --git a/ui/analyse/css/study/_show.scss b/ui/analyse/css/study/_show.scss
index 740626c051c..59e8909e0b3 100644
--- a/ui/analyse/css/study/_show.scss
+++ b/ui/analyse/css/study/_show.scss
@@ -1,6 +1,5 @@
 @import '../analyse.base';
 @import '../round-training';
-
 @import 'layout';
 @import 'list';
 @import 'chapters';
diff --git a/ui/analyse/css/study/panel/_comment.scss b/ui/analyse/css/study/panel/_comment.scss
index 57eb8f53f06..84b8e3158d0 100644
--- a/ui/analyse/css/study/panel/_comment.scss
+++ b/ui/analyse/css/study/panel/_comment.scss
@@ -19,9 +19,11 @@
 
   .study__wiki {
     @extend %box-neat;
+
     background: $c-bg-box;
     padding: 0.8em 1em;
     margin-top: 1vh;
+
     &.empty {
       display: none;
     }
diff --git a/ui/analyse/css/study/panel/_glyph.scss b/ui/analyse/css/study/panel/_glyph.scss
index 500f7912b6f..a5fab0b0104 100644
--- a/ui/analyse/css/study/panel/_glyph.scss
+++ b/ui/analyse/css/study/panel/_glyph.scss
@@ -19,6 +19,7 @@
 
     &::before {
       @extend %flex-center-center;
+
       content: attr(data-symbol);
       font-size: 1.2em;
       font-weight: bold;
diff --git a/ui/analyse/css/study/panel/_metadata.scss b/ui/analyse/css/study/panel/_metadata.scss
index 9b2e55662d0..101898540b1 100644
--- a/ui/analyse/css/study/panel/_metadata.scss
+++ b/ui/analyse/css/study/panel/_metadata.scss
@@ -47,6 +47,7 @@
     font-weight: bold;
     color: $c-font-dim;
     width: 1px;
+
     @include padding-direction(0, 0.3em, 0, 1em, true);
   }
 
@@ -58,8 +59,9 @@
   input,
   span,
   a {
-    display: block;
     @include padding-direction(0.6em, 1em, 0.6em, 0.7em);
+
+    display: block;
     line-height: 1.7;
   }
 
diff --git a/ui/analyse/css/study/panel/_multiboard.scss b/ui/analyse/css/study/panel/_multiboard.scss
index 7511e99ccaf..5dece73842f 100644
--- a/ui/analyse/css/study/panel/_multiboard.scss
+++ b/ui/analyse/css/study/panel/_multiboard.scss
@@ -1,6 +1,7 @@
 .study__multiboard {
   .analyse__underboard & {
     @extend %box-neat;
+
     background: $c-bg-box;
   }
 
@@ -14,16 +15,21 @@
 
   &__top {
     @extend %flex-between;
+
     gap: 0.4em;
     padding: 0.4em 1em 1em 0.4em;
   }
+
   &__options {
     @extend %flex-center;
+
     gap: 1em;
+
     .cmn-toggle-wrap {
       font-size: 0.9em;
       gap: 0;
     }
+
     .cmn-toggle {
       transform: scale(0.7);
     }
@@ -42,6 +48,7 @@
           display: none;
         }
       }
+
       max-width: 25vw;
       margin-inline-end: 1ch;
     }
@@ -72,12 +79,11 @@
 
     a {
       @extend %box-radius;
-      container-type: inline-size;
 
+      container-type: inline-size;
       color: $c-font;
       padding: 0.4em 0.3em;
       border: 1px solid transparent;
-
       overflow: hidden;
 
       &.active {
@@ -85,40 +91,49 @@
         color: $c-font-clear;
         border-color: $m-primary_bg--mix-40;
       }
+
       &:hover {
         background: $m-primary_bg--mix-12;
         color: $c-font-clear;
         border-color: $m-primary_bg--mix-50;
       }
     }
+
     cg-board {
       box-shadow: none;
     }
   }
 }
+
 @container (width < 250px) {
   .now-playing .rating {
     display: none;
   }
 }
+
 .mini-game__gauge {
   --c-eval-mini-gauge-white: #c0c0c0;
   --c-eval-mini-gauge-black: #444;
+
   @include if-light {
     --c-eval-mini-gauge-white: #fff;
     --c-eval-mini-gauge-black: #606060;
   }
 }
+
 .mini-game {
   .cg-gauge {
     display: flex;
     flex-flow: row nowrap;
   }
+
   &__board {
     flex: 1 1 auto;
   }
+
   &__gauge {
     @extend %box-radius;
+
     order: 1;
     position: relative;
     flex: 0 0 4%;
@@ -127,6 +142,7 @@
     opacity: 0.4;
     margin-left: 4px;
     background: linear-gradient(to top, var(--c-eval-mini-gauge-white), var(--c-eval-mini-gauge-black));
+
     &::after {
       content: '';
       display: block;
@@ -144,6 +160,7 @@
 
     &--flip {
       background: linear-gradient(to bottom, var(--c-eval-mini-gauge-white), var(--c-eval-mini-gauge-black));
+
       .mini-game__gauge__black {
         position: absolute;
         bottom: 0;
@@ -153,9 +170,11 @@
     &--set {
       opacity: 1;
       background: var(--c-eval-mini-gauge-white);
+
       .mini-game__gauge__black {
         display: block;
       }
+
       tick {
         position: absolute;
         width: 100%;
diff --git a/ui/analyse/css/study/panel/_server-eval.scss b/ui/analyse/css/study/panel/_server-eval.scss
index 0acd486c564..85ea5153f2a 100644
--- a/ui/analyse/css/study/panel/_server-eval.scss
+++ b/ui/analyse/css/study/panel/_server-eval.scss
@@ -2,8 +2,8 @@
 
 .study__server-eval {
   @extend %box-neat;
-  position: relative;
 
+  position: relative;
   background: $c-bg-box;
   text-align: center;
 
diff --git a/ui/analyse/css/study/panel/_share.scss b/ui/analyse/css/study/panel/_share.scss
index 04a8ae08201..30bca1db754 100644
--- a/ui/analyse/css/study/panel/_share.scss
+++ b/ui/analyse/css/study/panel/_share.scss
@@ -28,6 +28,7 @@
 
   .downloads {
     @extend %flex-center-center;
+
     margin-bottom: 1.5em;
 
     .button {
@@ -38,8 +39,10 @@
 
 .study__share .url-start-at-ply {
   @extend %flex-center;
+
   gap: 0.8ch;
   margin-top: 0.3rem;
+
   .cmn-toggle-wrap {
     transform: scale(0.8);
   }
diff --git a/ui/analyse/css/study/relay/_admin.scss b/ui/analyse/css/study/relay/_admin.scss
index 25d2281333e..3e8d8c4a5d3 100644
--- a/ui/analyse/css/study/relay/_admin.scss
+++ b/ui/analyse/css/study/relay/_admin.scss
@@ -16,12 +16,11 @@
 
   .state {
     @extend %flex-center-nowrap;
+    @include transition;
 
     border-bottom: $border;
     min-height: 3.5em;
 
-    @include transition;
-
     &::before {
       @extend %flex-center;
 
@@ -31,6 +30,7 @@
 
     > span {
       @extend %ellipsis;
+
       overflow-wrap: anywhere;
     }
 
@@ -48,6 +48,7 @@
       color: $c-over;
     }
   }
+
   button.clickable:hover {
     cursor: pointer;
     background: $c-primary;
@@ -88,6 +89,7 @@
     }
   }
 }
+
 .relay-admin__container {
   .study__chapters {
     max-height: 25vh;
diff --git a/ui/analyse/css/study/relay/_back-to-live.scss b/ui/analyse/css/study/relay/_back-to-live.scss
index cc297a19638..73c57c29999 100644
--- a/ui/analyse/css/study/relay/_back-to-live.scss
+++ b/ui/analyse/css/study/relay/_back-to-live.scss
@@ -1,10 +1,10 @@
 .relay-back-to-live {
   @extend %flex-center-center;
+
   padding: 0.5em 0;
   background: $c-accent;
   color: $c-over;
   cursor: pointer;
-
   flex: 0 0 auto;
 
   @include mq-is-col1 {
@@ -22,6 +22,7 @@
 .mchat:has(.chat-liveboard) {
   box-shadow: none;
 }
+
 .mchat .liveboard {
   cg-board {
     border-top-right-radius: 0;
diff --git a/ui/analyse/css/study/relay/_board-player.scss b/ui/analyse/css/study/relay/_board-player.scss
index e496d3a185a..86fb544abc5 100644
--- a/ui/analyse/css/study/relay/_board-player.scss
+++ b/ui/analyse/css/study/relay/_board-player.scss
@@ -8,9 +8,10 @@
 
 .relay-board-player {
   @extend %flex-between-nowrap, %metal, %box-shadow;
+  @include inline-end(0);
+
   overflow: hidden;
   position: absolute;
-  @include inline-end(0);
   font-weight: bold;
   width: var(---cg-width, 100%);
   height: $player-height;
@@ -41,6 +42,7 @@
 
   .left {
     @extend %flex-center-nowrap;
+
     flex: 1 1 100%;
     gap: 1em;
     overflow: hidden;
@@ -67,11 +69,14 @@
 
   .info-split {
     @extend %flex-column;
+
     line-height: 1.2;
     overflow: hidden;
   }
+
   .info-secondary {
     @extend %flex-center-nowrap;
+
     gap: 0.5em;
     font-size: 0.9em;
   }
@@ -79,12 +84,15 @@
   .team,
   .name {
     @extend %ellipsis;
+
     max-width: fit-content;
     flex: 1;
   }
+
   a.name {
     color: $c-font;
     font-size: 1.1em;
+
     &:hover {
       color: $c-link;
     }
@@ -92,12 +100,15 @@
 
   .team {
     @extend %roboto;
+
     flex: 2;
     color: $c-font-dim;
   }
+
   a.team:hover {
     color: $c-link;
   }
+
   .mini-game__flag {
     width: 1em;
     height: 1em;
diff --git a/ui/analyse/css/study/relay/_embed.scss b/ui/analyse/css/study/relay/_embed.scss
index d1c2ff665b0..a2c54f6bde9 100644
--- a/ui/analyse/css/study/relay/_embed.scss
+++ b/ui/analyse/css/study/relay/_embed.scss
@@ -10,12 +10,12 @@ body {
   ---sticky-gap: 0px;
   ---block-gap: 10px;
   ---zoom: 95 !important;
-
   ---col2-board-width: calc(min(calc(100vw - 340px), calc(100vh - 45px * 2)));
 
   @media (min-width: at-least($small)) {
     ---main-margin: 1vw;
     ---block-gap: 15px;
+
     overflow-y: hidden;
   }
 }
@@ -30,25 +30,31 @@ main.analyse.is-relay:not(.has-relay-tour) {
       'board gauge side'
       'board gauge tools'
       'board . controls';
+
     .main-board {
       align-self: center;
     }
+
     .relay-tour__side {
       margin-top: 0;
     }
   }
+
   @include mq-is-col1 {
     .main-board {
       /* space for the top player bar */
       margin-top: $player-height;
     }
   }
+
   cg-resize {
     display: none;
   }
+
   .analyse__controls .features {
     flex: 0 0 2.5rem;
   }
+
   &,
   .analyse__tools {
     /* undo the site negative margins for player names */
diff --git a/ui/analyse/css/study/relay/_layout.scss b/ui/analyse/css/study/relay/_layout.scss
index a7f6b9145d5..fbc19668f04 100644
--- a/ui/analyse/css/study/relay/_layout.scss
+++ b/ui/analyse/css/study/relay/_layout.scss
@@ -10,13 +10,16 @@ body {
   .vertical-resize {
     display: flex;
   }
+
   .mchat {
     margin-top: 0;
     min-height: 52px;
   }
+
   .chat__members {
     margin: 2px;
   }
+
   .relay-admin {
     margin-top: 0;
   }
@@ -25,27 +28,33 @@ body {
 main.is-relay {
   .relay-tour {
     grid-area: relay-tour;
+
     &__side {
       grid-area: side;
     }
   }
+
   &:not(.has-relay-tour) {
     // room for extra player heights
     margin-top: $player-height;
+
     @include mq-at-least-col2 {
       .relay-tour__side {
         margin-top: #{-$player-height};
       }
     }
+
     @include mq-at-least-col3 {
       .analyse__tools {
         margin-top: #{-$player-height};
+
         .ceval {
           flex: 0 0 $player-height;
         }
       }
     }
   }
+
   .analyse__round-training,
   .relay-admin__container {
     grid-area: relay-admin;
@@ -55,10 +64,12 @@ main.is-relay {
     button.streamer-show {
       display: block;
     }
+
     @media (pointer: fine) {
       .relay-admin__container {
         grid-area: none;
       }
+
       @include resizable-side;
     }
   }
@@ -71,6 +82,7 @@ main.is-relay.has-relay-tour {
     'relay-tour'
     'side'
     'relay-admin';
+
   .relay-games {
     height: 40vh;
   }
@@ -78,6 +90,7 @@ main.is-relay.has-relay-tour {
   @include mq-at-least-col2 {
     grid-template-areas: 'relay-tour . side';
     grid-template-columns: minmax(auto, 80vw) var(---block-gap) 350px;
+
     @media (pointer: fine) {
       @include resizable-side;
     }
@@ -102,10 +115,12 @@ main.analyse.is-relay:not(.has-relay-tour) {
     'side'
     'relay-admin'
     'under';
+
   .mchat,
   .chat__members {
     display: none;
   }
+
   @include mq-at-least-col2 {
     grid-template-rows: repeat(2, calc(var(---cg-height) / 2)) $player-height;
     grid-template-areas:
@@ -114,47 +129,60 @@ main.analyse.is-relay:not(.has-relay-tour) {
       'board        .     controls'
       'under        under under'
       'relay-admin  .     .';
+
     .analyse__underboard {
       margin-top: unset;
+
       .is3d & {
         margin-top: calc(var(---cg-height) * 2 / 100);
       }
     }
+
     .eval-chart-and-training {
       flex-wrap: nowrap;
     }
+
     .analyse__controls {
       height: $player-height;
+
       .jumps {
         padding-bottom: 0;
       }
     }
   }
+
   @include mq-at-least-col3 {
     grid-template-rows: var(---cg-height) $player-height;
     grid-template-areas:
       'side           . board gauge tools'
       'side           . board .     controls'
       'side           . under under under';
+
     .mchat,
     .chat__members {
       display: flex;
     }
+
     .mchat:has(.liveboard.mchat__tab-active) {
       max-height: 380px;
       min-height: 380px; // constrain height set by vertical-resize
     }
   }
+
   .eval-chart-and-training {
     @extend %flex-center;
+
     gap: $analyse-block-gap;
+
     .study__server-eval {
       flex: 1 1 100%;
     }
+
     .analyse__round-training {
       flex: 1 0 200px;
     }
   }
+
   &.relay-in-variation {
     .main-board cg-board {
       filter: saturate(0.7) brightness(0.9);
diff --git a/ui/analyse/css/study/relay/_player-tip.scss b/ui/analyse/css/study/relay/_player-tip.scss
index a321a0d7863..0d760726ff4 100644
--- a/ui/analyse/css/study/relay/_player-tip.scss
+++ b/ui/analyse/css/study/relay/_player-tip.scss
@@ -1,10 +1,10 @@
 #tour-player-tip {
   @extend %box-radius-force, %popup-shadow;
+
   visibility: hidden;
   background: $c-bg-box;
   position: absolute;
   z-index: $z-powertip-120;
-
   border: 1px solid $c-brag;
   min-width: 370px;
 }
@@ -13,35 +13,46 @@
   a {
     color: $c-font;
   }
+
   &__player {
     @extend %flex-center-nowrap;
+
     align-items: stretch;
     background: $c-bg-popup;
     gap: 1em;
+
     .fide-players__photo {
       width: 150px;
       height: fit-content;
     }
+
     &__info {
       @extend %flex-column;
+
       justify-content: space-between;
       font-size: 1.1em;
       margin: 1em 0.5em 1em 0;
     }
+
     &__name {
       @extend %flex-center-nowrap, %ellipsis;
+
       font-size: 1.2em;
+
       &:hover {
         color: $c-primary;
       }
     }
+
     &__team {
       &:hover {
         color: $c-primary;
       }
     }
+
     &__details {
       @extend %flex-column;
+
       gap: 0.5em;
 
       > div {
@@ -49,40 +60,50 @@
 
         .diff {
           @extend %flex-center;
+
           gap: 0.5em;
         }
+
         .diffs {
           @extend %flex-column;
         }
       }
     }
   }
+
   &__preload {
     margin: 1em auto;
   }
+
   &__games {
     margin-bottom: 0.3em;
     max-height: 40vh;
     overflow-y: auto;
+
     &__status {
       font-weight: bold;
     }
+
     table {
       width: 100%;
     }
+
     td {
       padding: 0.4rem;
       border-top: $border;
     }
+
     tr:first-child td {
       border-top: none;
     }
+
     td:first-child {
       padding-inline-start: 1.5rem;
       text-align: end;
       color: $c-font-dimmer;
       font-weight: bold;
     }
+
     td:last-child {
       padding-inline-end: 1.5rem;
     }
diff --git a/ui/analyse/css/study/relay/_result-box.scss b/ui/analyse/css/study/relay/_result-box.scss
index 2ef99ee0e91..d9acfbfb280 100644
--- a/ui/analyse/css/study/relay/_result-box.scss
+++ b/ui/analyse/css/study/relay/_result-box.scss
@@ -1,6 +1,7 @@
 %result-box {
   .result {
     @extend %box-radius;
+
     flex: 0 0 auto;
     padding: 0.1em 0.6em;
     background: $c-font-dimmer;
@@ -8,9 +9,11 @@
     color: $c-over;
     font-weight: bold;
   }
+
   good.result {
     background: $c-good;
   }
+
   bad.result {
     background: $c-bad;
   }
diff --git a/ui/analyse/css/study/relay/_rounds.scss b/ui/analyse/css/study/relay/_rounds.scss
index 6b94890aeb6..8e6de895095 100644
--- a/ui/analyse/css/study/relay/_rounds.scss
+++ b/ui/analyse/css/study/relay/_rounds.scss
@@ -7,6 +7,7 @@ $span-width: 1.7em;
 
   .link {
     @extend %break-word;
+
     flex: 1 1 100%;
     color: $c-font;
     margin-inline-start: 1em;
@@ -20,6 +21,7 @@ $span-width: 1.7em;
 
   finished {
     @extend %flex-center-center;
+
     align-self: center;
     font-size: 0.7em;
     color: $c-good;
diff --git a/ui/analyse/css/study/relay/_teams.scss b/ui/analyse/css/study/relay/_teams.scss
index ae05aee2065..be9fe41fe56 100644
--- a/ui/analyse/css/study/relay/_teams.scss
+++ b/ui/analyse/css/study/relay/_teams.scss
@@ -1,4 +1,5 @@
 @import './result-box';
+
 .relay-tour {
   &__team-table {
     &.loading {
@@ -9,61 +10,82 @@
       padding: 2em;
     }
   }
+
   &__team-match {
     border-top: $border;
+
     &__teams,
     &__game {
       @extend %flex-center-nowrap;
+
       > * {
         flex: 0 1 43%;
+
         &:nth-child(2) {
           flex: 1 0 14%;
         }
       }
     }
+
     &__teams {
       @extend %metal;
+
       border-bottom: $border;
       padding: 0.5em 1em;
+
       > * {
         text-align: center;
       }
     }
+
     &__team {
       a {
         color: $c-font;
+
         &:hover {
           color: $c-primary;
         }
       }
+
       padding: 0.5em 1em;
+
       &__points {
         @extend %flex-around;
+
         flex-flow: row nowrap;
+
         @extend %result-box;
+
         points {
           font-weight: bold;
         }
+
         vs {
           font-style: italic;
         }
       }
     }
+
     &__game {
       @extend %roboto;
+
+      color: $c-font;
+      border: 1px solid transparent;
+
       &:nth-child(even) {
         background: $c-bg-zebra;
       }
-      color: $c-font;
-      border: 1px solid transparent;
+
       &:hover {
         background: $m-primary_bg--mix-12;
         border-color: $m-primary_bg--mix-50;
         color: $c-font-clearer;
+
         .mini-game__flag {
           opacity: 1;
         }
       }
+
       &__status {
         padding: 0.4em 1em;
         text-align: center;
@@ -72,10 +94,13 @@
         font-weight: bold;
         white-space: nowrap;
       }
+
       &__player {
         @extend %flex-between-nowrap;
+
         padding: 0.4em 2em;
         container-type: inline-size;
+
         .name {
           @extend %nowrap-ellipsis;
         }
@@ -93,11 +118,14 @@
 .eval-gauge-horiz {
   $white: #c0c0c0;
   $black: #444;
+
   @include if-light {
     $white: #fff;
     $black: #606060;
   }
+
   @extend %box-neat-force;
+
   display: block;
   position: relative;
   height: 1em;
@@ -113,12 +141,15 @@
 
   opacity: 0.7;
   background: linear-gradient(to left, $white, $black);
+
   &--set {
     opacity: 1;
     background: $white !important;
+
     .eval-gauge-horiz__black {
       display: block;
     }
+
     tick {
       position: absolute;
       height: 100%;
@@ -128,8 +159,10 @@
       width: 50%;
     }
   }
+
   &.pov-white {
     background: linear-gradient(to right, $white, $black);
+
     .eval-gauge-horiz__black {
       right: 0;
     }
diff --git a/ui/analyse/css/study/relay/_tour.scss b/ui/analyse/css/study/relay/_tour.scss
index 33fb690ee00..706dc7c2429 100644
--- a/ui/analyse/css/study/relay/_tour.scss
+++ b/ui/analyse/css/study/relay/_tour.scss
@@ -6,37 +6,50 @@ $hover-bg: $m-primary_bg--mix-30;
 
 .relay-tour {
   @extend %box-neat-force, %flex-column;
+
   gap: 3vh;
   background: $c-bg-box;
+
   &__side {
     @extend %flex-column;
+
     overflow: hidden;
+
     &__preload {
       @extend %box-neat;
+
       flex: 1;
       background: $c-bg-box;
     }
+
     &__header {
       @extend %flex-center-nowrap, %box-radius-top;
       @include prevent-select;
+
       position: relative;
       overflow: hidden;
       align-items: stretch;
       flex: 0 0 $player-height;
+
       button {
         @extend %flex-center-nowrap, %metal;
+
         outline: none;
+
         &:hover {
           background: $hover-bg;
         }
+
         &:hover::before {
           color: $c-font-clear;
           text-shadow: none;
         }
       }
     }
+
     &__empty {
       @extend %box-neat;
+
       align-items: center;
       justify-content: center;
       background: $c-bg-box;
@@ -44,51 +57,65 @@ $hover-bg: $m-primary_bg--mix-30;
       padding: 1.5rem 1em 2rem 1em;
       display: none;
       flex-flow: column;
+
       &::before {
         font-size: 6em;
         color: $c-font-dimmer;
       }
+
       strong {
         @extend %break-word;
+
         font-size: 1.2em;
         color: $c-font-dim;
       }
+
       @include mq-at-least-col2 {
         display: flex;
       }
     }
+
     &__name {
       @extend %nowrap-ellipsis;
+
       flex: 1;
       padding: 1em;
       gap: 0.7em;
       font-weight: bold;
+
       &:hover {
         background: $hover-bg !important;
       }
+
       &::before {
         @extend %data-icon;
+
         content: $licon-LessThan;
         font-size: 1.5em;
         color: $c-font-dim;
       }
+
       main.has-relay-tour &::before {
         content: $licon-RadioTower;
       }
+
       main.has-relay-tour & {
         background: $c-bg-zebra;
       }
     }
+
     &__search {
       border-left: $border !important;
       padding: 0 1.2rem;
     }
+
     .chat__members {
       flex: 0 0 auto;
       height: unset;
       line-height: 1.3em;
       min-height: 1.3em;
     }
+
     .streamer-show {
       display: none;
       position: relative;
@@ -118,9 +145,11 @@ $hover-bg: $m-primary_bg--mix-30;
 
       &::after {
         transform: translate(-80%, 80%);
+
         @include if-rtl {
           transform: translate(80%, 80%);
         }
+
         background-color: $c-brag;
       }
     }
@@ -132,6 +161,7 @@ $hover-bg: $m-primary_bg--mix-30;
 
     .streamer-menu {
       @extend %flex-column, %dropdown-shadow, %box-radius-bottom;
+
       position: absolute;
       max-height: 12em;
       overflow-y: auto;
@@ -143,16 +173,20 @@ $hover-bg: $m-primary_bg--mix-30;
 
     .streamer {
       @extend %flex-center-nowrap;
+
       padding: 0.7em 1em;
       font-size: 1.1em;
       color: $c-font;
+
       i {
         margin-inline-start: auto;
         color: $c-font-dimmer;
       }
+
       &::before {
         font-size: 1.3em;
       }
+
       &:hover {
         background: $m-primary_bg--mix-30;
         color: $c-font-clearer;
@@ -162,14 +196,18 @@ $hover-bg: $m-primary_bg--mix-30;
 
   &__round {
     @extend %box-padding-horiz, %flex-between-nowrap;
+
     padding-top: 1em;
     padding-bottom: 1em;
     margin: -1em 0;
     background: $m-primary_bg--mix-10;
+
     strong {
       @extend %roboto;
+
       font-size: 1.2em;
     }
+
     &.ongoing {
       background: $m-accent_bg--mix-10;
       color: $c-accent;
@@ -184,19 +222,26 @@ $hover-bg: $m-primary_bg--mix-30;
     &__image {
       display: none;
       flex: 0 0 38%;
+
       &.video {
         flex: 0 0 50%;
       }
+
       line-height: 0;
+
       > img {
         width: 100%;
+
         @include broken-img(2 / 1);
       }
+
       .video-player-close {
         display: none;
       }
+
       text-align: center;
     }
+
     &__image-upload {
       margin: 3em auto;
       line-height: 2em;
@@ -212,30 +257,37 @@ $hover-bg: $m-primary_bg--mix-30;
       @extend %break-word;
       @include line-clamp(2);
       @include fluid-size('font-size', 14px, 31px);
+
       color: $c-brag;
     }
 
     &__content {
       @extend %flex-column, %tour-margin-horiz;
+
       flex: 1;
       min-width: 0; // somehow this prevents overflow when mselect is large
       gap: 1em;
+
       @include mq-at-least-col3 {
         gap: calc(var(---box-padding) / 3);
       }
+
       margin-top: 1em;
       margin-bottom: 1em;
     }
 
     &__selectors {
       @extend %flex-center;
+
       gap: 1em;
       position: relative;
     }
 
     .setting {
       @extend %flex-center-nowrap;
+
       margin-inline-end: -1em;
+
       label {
         padding: 0 0.5em;
         cursor: pointer;
@@ -247,70 +299,90 @@ $hover-bg: $m-primary_bg--mix-30;
   &__mselect {
     position: unset;
     flex: auto;
+
     @include fluid-size('font-size', 12px, 19px);
+
     white-space: wrap;
+
     &.mselect__active {
       overflow: visible;
     }
+
     .fullscreen-mask {
       display: block;
     }
+
     .mselect__item {
       opacity: unset;
     }
+
     .mselect__list {
       transform: unset;
+
       a {
         gap: 1em;
       }
     }
   }
+
   &__tour-select {
     .mselect__item {
       @extend %flex-between;
     }
+
     .tour-state {
       &.finished::before {
         color: $c-good;
         font-size: 0.8em;
       }
+
       &.ongoing::before {
         color: $c-bad;
         font-size: 0.7em;
       }
     }
+
     a:hover .tour-state::before {
       color: $c-over;
     }
   }
+
   &__round-select {
     &__name {
       @extend %ellipsis;
+
       flex: 3 1 100%;
     }
+
     &__status {
       font-size: 1rem;
       margin-inline-end: 1ch;
       white-space: nowrap;
     }
+
     &__label {
       .round-state {
         @extend %flex-center-nowrap;
+
         gap: 1ch;
       }
     }
+
     .ongoing::before {
       color: $c-bad;
     }
+
     .finished::before {
       color: $c-good;
     }
+
     .mselect__list {
       left: unset;
       right: 0;
       overflow-x: auto;
       overflow-y: auto;
       max-height: 50vh;
+
       @media (max-width: at-most($medium)) {
         position: fixed;
         top: 10vh;
@@ -319,35 +391,44 @@ $hover-bg: $m-primary_bg--mix-30;
         min-width: unset;
       }
     }
+
     a {
       display: flex;
       padding: 0 1em 0 0;
       align-items: center;
       border-left: 3px solid transparent;
+
       &.current-round {
         background: $c-bg-zebra;
         border-left-color: $c-primary;
       }
+
       &:hover {
         background: $c-primary;
+
         *,
         .round-state::before {
           color: $c-over;
         }
       }
     }
+
     .name {
       @include ellipsis;
+
       padding: 0.3em 0 0.3em 1em;
       width: 100%;
     }
+
     .time,
     .status {
       @extend %roboto;
+
       font-size: 0.9rem;
       color: $c-font-dim;
       margin-left: auto;
     }
+
     .status {
       &:empty {
         display: none;
@@ -357,39 +438,52 @@ $hover-bg: $m-primary_bg--mix-30;
 
   &__note {
     @extend %box-neat, %flex-center-nowrap, %tour-margin-horiz;
+
     gap: 1.5vw;
     background: $c-bg-zebra;
     padding: 1em 2vw;
     white-space: pre-line;
+
     &::before {
       @extend %data-icon;
+
       content: $licon-InfoCircle;
       font-size: 2.5em;
     }
+
     &.pinned::before {
       content: $licon-RadioTower;
     }
+
     small {
       color: $c-font-dim;
     }
   }
+
   &__nav {
     @extend %flex-between, %tour-margin-horiz;
+
     gap: 1em;
+
     @include prevent-select;
   }
 
   &__tabs {
     @extend %flex-center;
+
     gap: 1em;
+
     button {
       @extend %box-radius;
+
       cursor: pointer;
       padding: 0.6em 1.5em;
       border: $border;
+
       &:hover {
         @extend %box-shadow;
       }
+
       &.active {
         border: 1px solid $c-brag;
       }
@@ -398,13 +492,17 @@ $hover-bg: $m-primary_bg--mix-30;
 
   &__info {
     @extend %box-neat, %flex-between, %tour-margin-horiz;
+
     gap: 1ch;
     background: $c-bg-zebra;
     padding: 1em 2vw;
+
     > div {
       @extend %flex-center-nowrap;
+
       gap: 1ch;
     }
+
     img {
       height: 1.7em;
       aspect-ratio: 1;
@@ -415,19 +513,26 @@ $hover-bg: $m-primary_bg--mix-30;
     @extend %tour-margin-horiz;
     @include rendered-markdown(2em, 50vh);
   }
+
   &__source {
     @extend %tour-margin-horiz;
+
     font-style: italic;
+
     @media (max-width: at-most($x-large)) {
       display: none;
     }
+
     &:last-child {
       margin-bottom: 3em;
     }
   }
+
   &__share {
     @extend %tour-margin-horiz;
+
     padding: 3em 2vw 0 2vw;
+
     &.toggle-box--toggle-off {
       padding: 0 2vw;
     }
@@ -436,9 +541,11 @@ $hover-bg: $m-primary_bg--mix-30;
   &__players {
     overflow: auto;
   }
+
   &__players__table {
     thead {
       background: none;
+
       th {
         white-space: nowrap;
         border: none;
@@ -456,6 +563,7 @@ $hover-bg: $m-primary_bg--mix-30;
 
         a {
           @extend %flex-center-nowrap;
+
           color: $c-font;
 
           &:hover {
@@ -469,6 +577,7 @@ $hover-bg: $m-primary_bg--mix-30;
         }
       }
     }
+
     td {
       &.rank,
       &.score {
@@ -480,6 +589,7 @@ $hover-bg: $m-primary_bg--mix-30;
         text-align: end;
       }
     }
+
     .rp,
     .rp--same {
       margin-inline-start: 1ch;
@@ -497,53 +607,68 @@ $hover-bg: $m-primary_bg--mix-30;
   &__teams__standings {
     a {
       color: $c-font;
+
       &:hover {
         color: $c-primary;
       }
     }
   }
+
   .fide-player {
     &__photo {
       @extend %box-neat;
+
       aspect-ratio: 1;
       max-width: 300px;
     }
+
     &__header {
       @extend %tour-margin-horiz;
     }
+
     &__cards {
       @extend %tour-margin-horiz;
+
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
       gap: 1em;
+
       @media (min-width: at-least($medium)) {
         grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
         font-size: 1.1em;
       }
     }
+
     &__card {
       @extend %box-neat, %flex-column;
+
       font-family: monospace;
       align-items: center;
       gap: 0.5em;
       background: $c-bg-zebra;
       padding: 1em 1em;
+
       &.active span {
         color: $c-brag;
         font-weight: bold;
       }
+
       em {
         @extend %roboto, %flex-center;
+
         text-transform: uppercase;
         gap: 0.5ch;
         color: $c-font-dim;
       }
+
       .performance,
       .diff {
         @extend %flex-center;
+
         gap: 0.5ch;
       }
     }
+
     .mini-game__flag {
       width: 1em;
       height: 1em;
@@ -558,52 +683,67 @@ $hover-bg: $m-primary_bg--mix-30;
 
   &__team-summary {
     @extend %flex-column;
+
     gap: 3vh;
+
     &__header,
     &__matches__header {
       @extend %tour-margin-horiz;
     }
+
     &__roster {
       overflow: auto;
     }
+
     &__header {
       &__stats {
         @extend %tour-margin-horiz;
+
         tr {
           font-size: 1.1em;
+
           th {
             width: 1%;
             white-space: nowrap;
           }
+
           th + td {
             padding-left: 3em;
           }
         }
+
         border-collapse: separate;
         border-spacing: 0 0.5em;
+
         td {
           padding-left: 1em;
         }
       }
     }
+
     .score {
       font-weight: bold;
     }
+
     &__table {
       th:first-child,
       td.game-link {
         width: 1%;
         white-space: nowrap;
         padding-right: 2em;
+
         a.game-link {
           @extend %game-link-styles;
         }
       }
+
       .team-name {
         font-size: 1.1em;
       }
+
       a {
         color: $c-font;
+
         &:hover {
           color: $c-primary;
         }
@@ -613,10 +753,12 @@ $hover-bg: $m-primary_bg--mix-30;
 
   %game-link-styles {
     @extend %flex-center-nowrap, %box-radius;
+
     @media (min-width: at-least($medium)) {
       padding: 0.4em 0.5em;
       font-size: 1.6em;
     }
+
     &:hover {
       background: $m-primary_bg--mix-20;
       color: $c-font-clearer;
@@ -641,10 +783,12 @@ $hover-bg: $m-primary_bg--mix-30;
       }
     }
   }
+
   @media (max-width: at-most($medium)) {
     .player-intro__photo {
       display: none;
     }
+
     .player-intro__name {
       @include ellipsis;
     }
@@ -653,38 +797,48 @@ $hover-bg: $m-primary_bg--mix-30;
 
 .relay-games {
   @extend %flex-column, %box-radius-bottom, %box-shadow;
+
   background: $c-bg-box;
   flex: 1 1 auto;
   overflow-y: auto;
   font-size: 0.9em;
   position: relative;
 }
+
 .relay-game {
   @extend %flex-center-nowrap;
+
   align-items: stretch;
   gap: 0.5em;
   padding: 0.5em 0.7em 0.5em 0.2em;
   height: 50px;
   border-bottom: $border;
   border-left: 3px solid transparent;
+
   &:hover {
     background: $m-primary_bg--mix-12;
     color: $c-font-clearer;
+
     .mini-game__flag {
       opacity: 1;
     }
+
     border-left-color: $c-primary;
   }
+
   &--current {
     background: $m-primary_bg--mix-20;
     border-left-color: $c-primary;
   }
+
   &__players {
     @extend %flex-column;
+
     gap: 0.15em;
     flex: 1;
     overflow: hidden;
   }
+
   &::before {
     content: attr(data-n);
     font-size: 0.9em;
@@ -694,26 +848,34 @@ $hover-bg: $m-primary_bg--mix-30;
     text-align: end;
     color: $c-font-dimmer;
   }
+
   &--current::before,
   &:hover::before {
     color: $c-primary;
   }
+
   &__player {
     @extend %flex-between-nowrap;
+
     color: $c-font;
+
     good,
     bad {
       font-weight: bold;
     }
+
     .mini-game__user .name {
       @extend %nowrap-ellipsis;
     }
+
     .mini-game__flag {
       width: 1.1em;
     }
   }
+
   .mini-game__gauge {
     order: 0;
+
     tick {
       top: 1.5px;
       border-bottom-width: 3px;
@@ -723,15 +885,20 @@ $hover-bg: $m-primary_bg--mix-30;
 
 .relay-tour__stats {
   @extend %flex-column;
+
   gap: 1em;
+
   .spinner {
     margin: 10em auto;
   }
+
   &__unique {
     @extend %tour-margin-horiz;
+
     background: $c-bg-zebra;
     padding: 1em 2vw;
   }
+
   canvas {
     min-height: 50vh;
     margin: 0 2em 0 1em;
diff --git a/ui/analyse/css/study/relay/_video-player.scss b/ui/analyse/css/study/relay/_video-player.scss
index 4eb319077a2..7a94243adf6 100644
--- a/ui/analyse/css/study/relay/_video-player.scss
+++ b/ui/analyse/css/study/relay/_video-player.scss
@@ -23,6 +23,7 @@
   border-radius: 50%;
   background-color: black;
   cursor: pointer;
+
   &:hover {
     filter: brightness(3);
   }
@@ -68,6 +69,7 @@
 
   .text-box {
     @extend %flex-column;
+
     position: absolute;
     pointer-events: none;
     justify-content: center;
@@ -95,6 +97,7 @@
     .play-button {
       opacity: 1;
     }
+
     .image {
       filter: blur(4px) brightness(0.6);
     }
diff --git a/ui/bits/css/_appeal.scss b/ui/bits/css/_appeal.scss
index b4ca7afca61..e1153f5ac61 100644
--- a/ui/bits/css/_appeal.scss
+++ b/ui/bits/css/_appeal.scss
@@ -94,6 +94,7 @@
 
   &__rules {
     @extend %box-radius;
+
     margin-top: 3em;
     padding: 2em 3em;
     background: $c-bg-zebra;
@@ -109,6 +110,7 @@
     95% {
       opacity: 0;
     }
+
     100% {
       opacity: 1;
     }
@@ -117,6 +119,7 @@
   #help-engine-deny form {
     opacity: 0;
   }
+
   #help-engine-deny:target form {
     animation: 20s reveal forwards !important; // play even with "prefers-reduced-motion: reduce"
   }
diff --git a/ui/bits/css/_auth.scss b/ui/bits/css/_auth.scss
index 2cc1f6ced57..f85c396a78b 100644
--- a/ui/bits/css/_auth.scss
+++ b/ui/bits/css/_auth.scss
@@ -5,6 +5,7 @@
 .checklist {
   font-size: 1.5em;
   font-weight: 700;
+
   li {
     list-style: disc inside;
   }
@@ -25,6 +26,7 @@
 
   .alternative {
     @extend %flex-between;
+
     margin-top: 2rem;
     font-size: 0.9em;
     line-height: 2em;
@@ -39,6 +41,7 @@
     .login-remember {
       @extend %flex-center-nowrap;
       @include prevent-select;
+
       margin-top: 1em;
       gap: 1ch;
       cursor: pointer;
@@ -46,6 +49,7 @@
 
     &__blanked {
       @extend %box-radius;
+
       margin-bottom: 2em;
       padding: 1em 2em;
       background: $c-bg-zebra;
diff --git a/ui/bits/css/_blind.scss b/ui/bits/css/_blind.scss
index cdf5b205026..f76f650ffd5 100644
--- a/ui/bits/css/_blind.scss
+++ b/ui/bits/css/_blind.scss
@@ -1,5 +1,6 @@
 body.blind-mode {
   @include topnav-unsticky;
+
   .is::before,
   .is::after,
   [data-icon]::before {
diff --git a/ui/bits/css/_clas.scss b/ui/bits/css/_clas.scss
index 52fad81be06..df9ee9171f6 100644
--- a/ui/bits/css/_clas.scss
+++ b/ui/bits/css/_clas.scss
@@ -6,6 +6,7 @@ $c-clas-light: mix($c-clas, #fff, 86%);
 body {
   --bg-clas: linear-gradient(to right bottom, hsl(276, 29%, 49%), hsl(276, 65%, 32%), hsl(286, 37%, 21%));
   --bg-clas-title: linear-gradient(to right, hsl(252, 97%, 80%), hsl(276, 97%, 79%), hsl(234, 81%, 78%));
+
   @include if-light {
     --bg-clas: linear-gradient(to right bottom, hsl(276, 29%, 52%), hsl(276, 65%, 38%), hsl(286, 37%, 30%));
     --bg-clas-title: linear-gradient(to right, hsl(252, 97%, 86%), hsl(276, 97%, 84%), hsl(234, 81%, 83%));
@@ -48,6 +49,7 @@ body {
 
   &.student {
     @extend %roboto;
+
     padding: 0.4rem 2vw 0.4rem 2rem;
     line-height: 1.2em;
   }
@@ -55,6 +57,7 @@ body {
 
 h1 {
   @extend %base-font;
+
   background-image: var(--bg-clas-title);
   background-clip: text;
   color: transparent;
@@ -64,6 +67,7 @@ h1 {
 .clas-index {
   .box__top {
     background: var(--bg-clas);
+
     & a {
       color: $c-bg-clas-over;
     }
@@ -73,9 +77,11 @@ h1 {
 
   .button.new {
     opacity: 0.8;
+
     &:hover {
       color: $c-over;
     }
+
     &::before {
       font-size: 3em;
     }
@@ -88,19 +94,19 @@ h1 {
 
     .clas-widget {
       @extend %flex-center-nowrap, %break-word;
+      @include transition;
 
       border-bottom: $border;
       padding: 2em var(---box-padding);
       position: relative;
 
-      @include transition;
-
       &::before {
+        @include transition;
+
         color: $m-clas_bg--mix-80;
         font-size: 5em;
         margin-inline-end: 0.4em;
 
-        @include transition;
         @media (max-width: at-most($xx-small)) {
           display: none;
         }
@@ -172,6 +178,7 @@ h1 {
 
   &__body {
     @extend %box-padding, %flex-column;
+
     gap: 3em;
   }
 
@@ -183,12 +190,15 @@ h1 {
     &__helps {
       margin-top: -2em;
     }
+
     &__help {
       @extend %box-radius;
+
       display: block;
       background: $c-bg-zebra2;
       margin-bottom: 1em;
       padding: 0.5em 1em;
+
       strong {
         color: $c-font-clear;
         line-height: 2em;
@@ -408,6 +418,7 @@ h1 {
   from {
     background: $m-accent_bg-popup--mix-80;
   }
+
   to {
     background: $m-accent_bg-popup--mix-15;
   }
@@ -417,8 +428,10 @@ h1 {
   &__archive {
     text-align: right;
   }
+
   #clas-team:target {
     @extend %box-neat;
+
     padding: 1em 1em 1em 1.5em;
     border: 1px solid $c-accent;
     animation: target-fade 1.5s forwards;
@@ -427,6 +440,7 @@ h1 {
 
 .button-clas {
   background: $m-clas_bg--mix-75;
+
   &:hover {
     background: $m-clas_bg--mix-90 !important;
   }
@@ -445,6 +459,7 @@ h1 {
 
   &__actions {
     @extend %flex-center-center;
+
     margin-top: 4em;
 
     .button {
@@ -501,10 +516,12 @@ h1 {
 
     &__meta {
       @extend %flex-between;
+
       justify-items: center;
 
       .button-empty {
         color: rgba(255, 255, 255, 0.7);
+
         &:hover {
           background: rgba(255, 255, 255, 0.1) !important;
           color: inherit;
@@ -616,6 +633,7 @@ h1 {
     }
   }
 }
+
 .student-add-many {
   form {
     margin-top: 2em;
@@ -648,9 +666,12 @@ h1 {
 
   &__login {
     @extend %flex-center-center;
+
     form {
       @extend %flex-center;
+
       align-items: stretch;
+
       input {
         @extend %box-radius-inline-start;
 
@@ -660,6 +681,7 @@ h1 {
 
       .button {
         @extend %box-radius-inline-end;
+
         background: $c-clas-light;
         padding: 0 1.5em;
         border-inline-start: 0;
@@ -674,38 +696,49 @@ h1 {
 
 .clas-login {
   @extend %flex-column;
+
   gap: 2em;
+
   &__title {
     @extend %flex-between;
   }
+
   &__expiration {
     @extend %box-radius;
+
     background: $c-bg-zebra;
     font-size: 1.2em;
     padding: 0.3em 1em;
+
     .timeago {
       font-weight: bold;
       color: $c-font-clear;
     }
   }
+
   &__cards {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     gap: 1em;
   }
+
   &__card {
     @extend %box-neat, %flex-column;
+
     padding: 1em;
     background: $c-bg-zebra;
     border: $border;
     font-size: 1.5em;
+
     h3 {
       color: $c-font-clear;
     }
+
     a {
       font-size: 0.7em;
       color: $c-font-dim;
     }
+
     code {
       font-size: 1.8em;
       text-align: center;
@@ -713,6 +746,7 @@ h1 {
       margin-top: 1rem;
       color: $c-font-dim;
     }
+
     i {
       font-size: 0.8em;
       color: $c-bad;
diff --git a/ui/bits/css/_cms.scss b/ui/bits/css/_cms.scss
index b089a3bfcd6..5e70e7c8610 100644
--- a/ui/bits/css/_cms.scss
+++ b/ui/bits/css/_cms.scss
@@ -9,38 +9,48 @@
         $img: false,
         $list: false
       );
+
       h3 {
         font-size: 1.3em;
         color: $c-font-dim;
         border-bottom: $border;
       }
+
       h4 {
         font-size: 1.25em;
       }
     }
   }
+
   #form3-markdown {
     display: none;
   }
+
   &__pages {
     th {
       white-space: nowrap;
       min-width: 9ch;
     }
+
     td {
       @extend %break-word;
+
       &:first-child {
         min-width: 30ch;
       }
+
       &:nth-child(2) {
         font-size: 0.9em;
       }
     }
+
     time {
       white-space: nowrap;
     }
+
     &.searching tbody tr {
       border-bottom: $border;
+
       &:nth-child(even) {
         background: none;
       }
diff --git a/ui/bits/css/_cropDialog.scss b/ui/bits/css/_cropDialog.scss
index eb1459f5933..72474487357 100644
--- a/ui/bits/css/_cropDialog.scss
+++ b/ui/bits/css/_cropDialog.scss
@@ -1,5 +1,6 @@
 .crop-viewer {
   @extend %flex-column;
+
   row-gap: 2em;
 
   .spinner {
diff --git a/ui/bits/css/_dailyFeed.scss b/ui/bits/css/_dailyFeed.scss
index 1adb83c6a94..e66e7616f88 100644
--- a/ui/bits/css/_dailyFeed.scss
+++ b/ui/bits/css/_dailyFeed.scss
@@ -2,13 +2,16 @@ $marker-margin-top: -14px;
 
 .daily-feed {
   overflow: visible;
+
   &__updates {
     margin: 3em 3em 0 3em;
     border-inline-start: 3px solid $c-contours;
   }
+
   .atom {
     font-size: 2.6em;
     color: $c-font-dimmer;
+
     &:hover {
       color: $c-accent;
     }
@@ -18,6 +21,7 @@ $marker-margin-top: -14px;
     padding-inline-start: 45px;
     margin-bottom: 4em;
     scroll-margin-top: -$marker-margin-top;
+
     @include mq-sticky-header {
       &:target {
         scroll-margin-top: calc(#{$site-header-outer-height} - #{$marker-margin-top});
@@ -43,18 +47,22 @@ $marker-margin-top: -14px;
 
     &__day {
       @extend %flex-center;
+
       h2 {
         display: inline;
         font-size: 1.5em;
       }
+
       a {
         font-weight: bold;
         color: $c-contours;
       }
+
       time {
         font-size: 1em;
         opacity: 1;
       }
+
       margin-bottom: 1rem;
     }
 
@@ -67,11 +75,13 @@ $marker-margin-top: -14px;
         $img: false,
         $list: false
       );
+
       h3 {
         font-size: 1.3em;
         color: $c-font-dim;
         border-bottom: $border;
       }
+
       h4 {
         font-size: 1.25em;
       }
diff --git a/ui/bits/css/_diagnosticDialog.scss b/ui/bits/css/_diagnosticDialog.scss
index f4f6a0e84b3..7def45c444c 100644
--- a/ui/bits/css/_diagnosticDialog.scss
+++ b/ui/bits/css/_diagnosticDialog.scss
@@ -1,5 +1,6 @@
 .diagnostic {
   @extend %flex-column;
+
   align-items: center;
   padding: 1em 2em 2em;
   row-gap: 1em;
@@ -18,6 +19,7 @@
 
   h2 {
     @extend %base-font;
+
     font-size: 1.3em;
   }
 
diff --git a/ui/bits/css/_email-confirm.scss b/ui/bits/css/_email-confirm.scss
index 503f1f51ac0..6ca46068d03 100644
--- a/ui/bits/css/_email-confirm.scss
+++ b/ui/bits/css/_email-confirm.scss
@@ -1,5 +1,6 @@
 .email-confirm-banner {
   @extend %flex-center-center;
+
   flex-wrap: nowrap;
   gap: 0.6em;
   padding: 1em;
@@ -12,15 +13,18 @@
   left: 0;
   right: 0;
   z-index: 107;
+
   &.error {
     background: $c-error;
     flex-flow: column;
+
     code {
       font-size: 1rem;
       overflow-wrap: anywhere;
     }
   }
 }
+
 .email-confirm-banner a {
   color: $c-over !important;
   text-decoration: underline;
@@ -55,18 +59,23 @@
     5% {
       transform: translateY(0);
     }
+
     10% {
       opacity: 1;
     }
+
     20% {
       opacity: 0.4;
     }
+
     50% {
       opacity: 1;
     }
+
     70% {
       opacity: 0.4;
     }
+
     100% {
       opacity: 1;
       transform: translateY(0);
@@ -131,8 +140,10 @@
 
 .signup-confirm {
   text-align: center;
+
   form {
     margin: 6em 0 4em 0;
+
     .button-fat {
       border: 10px solid $m-primary_bg--mix-30;
     }
diff --git a/ui/bits/css/_linkPopup.scss b/ui/bits/css/_linkPopup.scss
index ecc71cadc3b..1645bc908d0 100644
--- a/ui/bits/css/_linkPopup.scss
+++ b/ui/bits/css/_linkPopup.scss
@@ -5,19 +5,23 @@
 
   &__content {
     @extend %flex-center-nowrap, %box-radius-top;
+
     background: $c-bg-zebra;
     padding: 2em;
 
     &::before {
       @extend %data-icon;
+
       content: $licon-InfoCircle;
       font-size: 5em;
       opacity: 0.5;
       margin-inline: 0 2rem;
     }
+
     &__title {
       text-align: start;
     }
+
     &__advice {
       font-size: 1.1em;
       color: $c-brag;
@@ -28,6 +32,7 @@
 
   &__actions {
     @extend %flex-center-center;
+
     padding: 2em;
     gap: 2em;
   }
diff --git a/ui/bits/css/_lpv.embed.scss b/ui/bits/css/_lpv.embed.scss
index 000a27f8255..6a8151c0559 100644
--- a/ui/bits/css/_lpv.embed.scss
+++ b/ui/bits/css/_lpv.embed.scss
@@ -2,10 +2,12 @@ body {
   margin: 0;
   background: $lpv-bg;
 }
+
 .lpv {
   border-radius: 0;
   box-shadow: none;
 }
+
 .not-found {
   @extend %flex-center-center;
 
diff --git a/ui/bits/css/_markdown-textarea.scss b/ui/bits/css/_markdown-textarea.scss
index ea2d5286676..88ec0da9b3a 100644
--- a/ui/bits/css/_markdown-textarea.scss
+++ b/ui/bits/css/_markdown-textarea.scss
@@ -2,9 +2,11 @@
   overflow: visible; // don't clip textarea focus ring
 
   $c-bg-preview: $c-bg-input;
+
   @include if-transp {
     $c-bg-preview: $c-bg-opaque;
   }
+
   .comment-header {
     position: relative;
     display: flex;
@@ -18,6 +20,7 @@
       border-top-left-radius: 0;
     }
   }
+
   .header-tab {
     all: unset;
     font-family: Roboto, sans-serif;
@@ -33,6 +36,7 @@
     color: $c-font-dimmer;
     cursor: pointer;
   }
+
   .header-tab.active {
     position: relative;
     background: $c-bg-preview;
@@ -45,6 +49,7 @@
       background-color: $c-bg-input;
     }
   }
+
   .header-tab.active::after {
     position: absolute;
     content: ''; // hide a bit of textarea focus ring
@@ -54,9 +59,11 @@
     height: 4px;
     background-color: $c-bg-preview;
   }
+
   .header-tab.active.write::after {
     background-color: $c-bg-input;
   }
+
   &:has(textarea:focus) .write.active {
     outline: $outline;
     outline-offset: -2px;
@@ -66,6 +73,7 @@
       right: 1px;
     }
   }
+
   .upload-image {
     all: unset;
     margin: 0 16px;
@@ -75,6 +83,7 @@
     cursor: pointer;
     mask: url('../images/buttons/add-photo-outline-material.svg') 0 0 / contain no-repeat;
   }
+
   .upload-image.disabled {
     background-color: $c-border;
     cursor: default;
@@ -84,6 +93,7 @@
     overflow: visible; // don't clip textarea focus ring
     position: relative;
   }
+
   .comment-preview {
     position: absolute;
     inset: 1px;
@@ -93,22 +103,27 @@
     border-radius: 6px 6px 24px 6px;
     background: $c-bg-preview;
   }
+
   .comment-preview img {
     max-width: 100%;
     margin: 0 auto;
     height: auto;
   }
+
   &:has(.uploading) {
     .comment-preview {
       background: $m-bg--alpha-50;
     }
+
     button {
       pointer-events: none;
     }
+
     .spinner {
       margin: 24px 0 0;
     }
   }
+
   .comment-preview .uploading {
     width: 100%;
     height: 100%;
@@ -125,6 +140,7 @@
     border-color: $m-border--fade-60;
     color: $c-font;
   }
+
   .markdown-textarea .upload-image:hover:not(.disabled) {
     background-color: $c-primary;
   }
diff --git a/ui/bits/css/_markdown-toastui.scss b/ui/bits/css/_markdown-toastui.scss
index 27f7a0a8073..ce5ed60905b 100644
--- a/ui/bits/css/_markdown-toastui.scss
+++ b/ui/bits/css/_markdown-toastui.scss
@@ -3,43 +3,56 @@
 
 .markdown-toastui {
   height: 60vh;
+
   .tab-item {
     background: $c-bg-box;
+
     &.active {
       @extend %metal;
     }
   }
+
   .toastui-editor {
     &-defaultUI {
       @extend %base-font;
+
       border: none;
+
       &-toolbar {
         @extend %metal;
+
         border-radius: $box-radius-size $box-radius-size 0 0 !important;
         border: $border;
         flex-flow: row wrap;
       }
     }
+
     &-toolbar {
       height: auto;
+
       &-icons {
         border-color: $c-border;
+
         &:not(:disabled) {
           background-color: $c-bg-zebra;
+
           &:hover {
             background-color: $c-bg-box;
           }
         }
       }
     }
+
     &-toolbar-group button {
       margin: 6px 3px;
     }
+
     &-dropdown {
       &-toolbar {
         display: flex;
         flex-flow: column;
         border: 0;
+
         .toastui-editor {
           &-toolbar {
             &-group {
@@ -51,23 +64,30 @@
         }
       }
     }
+
     &-md-tab-container {
       display: none;
     }
+
     &-tabs {
       @extend %flex-center;
+
       align-content: flex-end;
       margin: 0 1ch 0 0;
+
       .tab-item {
         height: 2em;
         line-height: 2em;
         margin: 0 0 -1px 0;
+
         /* preview is not accurate to what lichess shows */
         display: none;
       }
     }
+
     &-popup {
       @extend %box-radius;
+
       border: $border;
       background-color: $c-bg-page;
       margin-left: 0;
@@ -80,46 +100,58 @@
         text-align: center;
       }
     }
+
     &-ok-button {
       background-color: $c-primary !important;
     }
+
     &-ww-container,
     &-md-container {
       @extend %box-radius-bottom;
+
       border: $border;
       border-top: 0;
     }
+
     &.ww-mode,
     &.md-mode,
     &-md-preview {
       @extend %base-font;
+
       font-size: 1rem;
       background: $c-bg-input;
       color: $c-font;
     }
+
     &-contents {
       font-size: 1rem;
+
       & p,
       & h2,
       & h3,
       & h4 {
         color: $c-font;
       }
+
       & h2 {
         border-color: $c-brag;
       }
+
       & h3 {
         border: none;
       }
     }
+
     .ProseMirror {
       font-size: 1rem;
       padding: 0.8em 1.2em;
     }
+
     &-mode-switch {
       background: none;
       border: none;
     }
+
     &-popup-body {
       li[data-type='Heading'] {
         &[data-level='1'],
@@ -128,6 +160,7 @@
           display: none;
         }
       }
+
       input {
         width: 100%;
         border: $border;
@@ -136,8 +169,10 @@
     }
   }
 }
+
 .toastui-editor-popup-add-image {
   padding-top: 20px;
+
   &::before {
     padding-inline: 20px;
     content: 'Drag an edge to resize your image.';
diff --git a/ui/bits/css/_mobile.scss b/ui/bits/css/_mobile.scss
index 1184aa0a718..7c0a6251353 100644
--- a/ui/bits/css/_mobile.scss
+++ b/ui/bits/css/_mobile.scss
@@ -1,12 +1,14 @@
 .mobile {
   .sides {
     @extend %flex-wrap;
+
     justify-content: space-around;
   }
 
   .left-side {
     .stores {
       @extend %flex-center-center;
+
       gap: 1em;
     }
 
@@ -38,7 +40,6 @@
   .right-side {
     flex: 0 0 33%;
     text-align: center;
-
     margin-left: 2em;
 
     @media (max-width: at-most($x-small)) {
diff --git a/ui/bits/css/_oauth.scss b/ui/bits/css/_oauth.scss
index 8b4ad39a98d..8ee437ffdac 100644
--- a/ui/bits/css/_oauth.scss
+++ b/ui/bits/css/_oauth.scss
@@ -9,14 +9,17 @@
   ul {
     margin: 25px;
   }
+
   li {
     list-style: disc outside;
   }
 
   strong {
     @extend %break-word;
+
     color: $c-brag;
   }
+
   code {
     overflow-wrap: anywhere;
   }
@@ -33,6 +36,7 @@
 
   h1 {
     @extend %break-word;
+
     margin: 1rem 0 1.5rem 0;
   }
 
@@ -40,14 +44,18 @@
     li {
       margin: 0.7em 0;
     }
+
     .danger {
       @extend %box-neat;
+
       font-weight: bold;
       color: $c-over;
       background: $c-bad;
       padding: 0.3em 0.8em;
+
       &::before {
         @extend %data-icon;
+
         font-size: 1.5em;
         margin-inline: 0 0.2em;
         content: $licon-CautionTriangle;
@@ -78,12 +86,15 @@
   #main-wrap {
     margin-top: 0;
   }
+
   .oauth__top {
     margin-bottom: 3vh;
   }
+
   .oauth {
     padding-block: 3vh;
   }
+
   p {
     overflow-wrap: break-word;
     word-break: normal;
diff --git a/ui/bits/css/_relation.scss b/ui/bits/css/_relation.scss
index 5fc35377b1d..ec0fcf40a1f 100644
--- a/ui/bits/css/_relation.scss
+++ b/ui/bits/css/_relation.scss
@@ -7,9 +7,11 @@ table td {
     &:nth-child(1) {
       width: 30%;
     }
+
     &:nth-child(2) {
       width: 15%;
     }
+
     &:nth-child(3) {
       width: 20%;
     }
diff --git a/ui/bits/css/_search.scss b/ui/bits/css/_search.scss
index dd2bc9946ac..926b825a6da 100644
--- a/ui/bits/css/_search.scss
+++ b/ui/bits/css/_search.scss
@@ -39,11 +39,13 @@
 
     .two-columns {
       @extend %flex-wrap;
+
       gap: 1em;
 
       > * {
-        flex: 1 150px;
         @extend %flex-between-nowrap;
+
+        flex: 1 150px;
         gap: 2ch;
       }
     }
@@ -106,6 +108,7 @@
 
     .toggle-columns {
       @extend %flex-wrap;
+
       margin: 0.5rem 0;
 
       > * {
diff --git a/ui/bits/css/_titleRequest.scss b/ui/bits/css/_titleRequest.scss
index 3aa34917aa9..9bb10568256 100644
--- a/ui/bits/css/_titleRequest.scss
+++ b/ui/bits/css/_titleRequest.scss
@@ -7,11 +7,12 @@
 
 .title-image-edit {
   @extend %flex-column, %box-neat;
+
   padding: 2em;
   gap: 2em;
   background: $c-bg-zebra;
-
   margin-bottom: 2em;
+
   h2 {
     align-self: flex-start;
     width: auto;
@@ -21,25 +22,31 @@
 
 .title__status {
   @extend %box-neat;
+
   padding: 0.3em 0.7em;
   background: $c-accent;
   color: white;
   font-size: 0.9rem;
   font-weight: bold;
   text-transform: uppercase;
+
   &--building {
     background: $c-bg-zebra;
     color: $c-font;
   }
+
   &--approved {
     background: $c-good;
   }
+
   &--rejected {
     background: $c-bad;
   }
+
   &--feedback {
     background: $c-primary;
   }
+
   &--imported {
     background: $c-fancy;
   }
@@ -47,6 +54,7 @@
 
 .title__status-full {
   @extend %flex-center-nowrap, %box-neat;
+
   margin-bottom: 2em;
   padding: 2em 2em;
   background: $c-bg-zebra;
@@ -56,6 +64,7 @@
     margin-inline: 0 2rem;
     height: 60px;
   }
+
   h2 {
     margin-bottom: 1rem;
   }
@@ -64,6 +73,7 @@
 .title-mod .mod-zone {
   margin: 0;
 }
+
 .title-mod > .mz-section {
   max-height: 250px;
 }
@@ -73,6 +83,7 @@
 .title-mod__data,
 .title-mod__actions {
   margin-top: 4em;
+
   h2 {
     line-height: 3;
   }
@@ -80,6 +91,7 @@
 
 .title-mod__actions {
   @extend %box-neat;
+
   background: $c-bg-zebra;
   padding: 2em;
 }
@@ -90,6 +102,7 @@
   margin: auto;
   cursor: pointer;
 }
+
 .title-image--fallback {
   padding: 3rem;
   text-align: center;
diff --git a/ui/bits/css/_video.scss b/ui/bits/css/_video.scss
index cb2da44e3f2..79986020642 100644
--- a/ui/bits/css/_video.scss
+++ b/ui/bits/css/_video.scss
@@ -24,12 +24,10 @@
 
   .card {
     @extend %box-radius, %button-shadow;
+    @include transition;
 
     position: relative;
     overflow: hidden;
-
-    @include transition;
-
     color: $c-font;
 
     &:hover {
@@ -131,6 +129,7 @@
 
     .meta {
       @extend %box-padding-horiz;
+
       padding-bottom: 10px;
 
       .target__wrapper {
diff --git a/ui/bits/css/build/bits.cms.scss b/ui/bits/css/build/bits.cms.scss
index 7f0b49e01b8..bfcadb6aeb1 100644
--- a/ui/bits/css/build/bits.cms.scss
+++ b/ui/bits/css/build/bits.cms.scss
@@ -6,5 +6,4 @@
 @import '../../../lib/css/form/form3';
 @import '../../../lib/css/component/flash-absolute';
 @import '../markdown-toastui';
-
 @import '../cms';
diff --git a/ui/bits/css/build/bits.dailyFeed.scss b/ui/bits/css/build/bits.dailyFeed.scss
index 444e1ab1706..7f439f8a77f 100644
--- a/ui/bits/css/build/bits.dailyFeed.scss
+++ b/ui/bits/css/build/bits.dailyFeed.scss
@@ -3,5 +3,4 @@
 @import '../../../lib/css/component/slist';
 @import '../../../lib/css/form/form3';
 @import '../../../lib/css/vendor/flatpickr';
-
 @import '../dailyFeed';
diff --git a/ui/bits/css/build/bits.dialog.scss b/ui/bits/css/build/bits.dialog.scss
index ab9bf791d5a..3a6e99a2576 100644
--- a/ui/bits/css/build/bits.dialog.scss
+++ b/ui/bits/css/build/bits.dialog.scss
@@ -1,3 +1,2 @@
 @import '../../../lib/css/plugin';
-
 @import '../../../lib/css/component/dialog';
diff --git a/ui/bits/css/build/bits.lpv.embed.scss b/ui/bits/css/build/bits.lpv.embed.scss
index ca1256da6f0..0cd348a398e 100644
--- a/ui/bits/css/build/bits.lpv.embed.scss
+++ b/ui/bits/css/build/bits.lpv.embed.scss
@@ -1,7 +1,5 @@
 @import '../../../lib/css/abstract/all';
 @import '../../../lib/css/base/typography';
-
 @import '../../../lib/css/theme/board/chessground';
-
 @import 'bits.lpv';
 @import '../lpv.embed';
diff --git a/ui/bits/css/build/bits.lpv.scss b/ui/bits/css/build/bits.lpv.scss
index 9cb23400331..2e933b1ec15 100644
--- a/ui/bits/css/build/bits.lpv.scss
+++ b/ui/bits/css/build/bits.lpv.scss
@@ -6,12 +6,16 @@
 .lpv--gamebook {
   position: relative;
 }
+
 .lpv__gamebook {
   @extend %popup-shadow;
+
   z-index: $z-cg__board_overlay-100;
   position: absolute;
   top: 50%;
+
   @include inline-start(50%);
+
   transform: translate(-50%, -50%);
   display: block;
   padding: 1.5em 3em;
@@ -19,6 +23,7 @@
   font-size: 1.5em;
   white-space: normal;
 }
+
 .lpv__pgn__text {
   font-family: monospace;
   font-size: 0.8em;
diff --git a/ui/bits/css/build/bits.not-found-embed.scss b/ui/bits/css/build/bits.not-found-embed.scss
index 37f3e5c379e..24d7634c381 100644
--- a/ui/bits/css/build/bits.not-found-embed.scss
+++ b/ui/bits/css/build/bits.not-found-embed.scss
@@ -1,5 +1,4 @@
 @import '../../../lib/css/embed';
 @import '../../../lib/css/base/util';
 @import '../../../lib/css/component/box';
-
 @import '../not-found';
diff --git a/ui/bits/css/build/bits.slist.scss b/ui/bits/css/build/bits.slist.scss
index 49c3bdded7e..9157c6e90f5 100644
--- a/ui/bits/css/build/bits.slist.scss
+++ b/ui/bits/css/build/bits.slist.scss
@@ -5,9 +5,11 @@
   width: 24px;
   text-align: center;
 }
+
 .slist td {
   vertical-align: middle;
 }
+
 .slist td .lb__trophy {
   display: inline-block;
   vertical-align: middle;
@@ -16,6 +18,7 @@
   overflow: visible;
   line-height: 0;
 }
+
 .slist .lb__trophy img {
   display: inline-block;
   height: 16px;
@@ -24,10 +27,12 @@
   transform: scale(1.6) translateY(-2px);
   transform-origin: left center;
 }
+
 .slist td .lb__rank-num {
   display: inline-block;
   vertical-align: middle;
 }
+
 .pager__label {
   margin-right: 6px;
 }
@@ -37,10 +42,13 @@
     td:first-child {
       white-space: nowrap;
     }
+
     td:nth-child(2) {
       padding-right: 0;
+
       a.user-link {
         @include ellipsis;
+
         display: inline-block;
         max-width: min(26ch, 50vw);
         white-space: nowrap;
diff --git a/ui/bits/css/build/bits.team.scss b/ui/bits/css/build/bits.team.scss
index 49ff1640ab8..91679ed42b6 100644
--- a/ui/bits/css/build/bits.team.scss
+++ b/ui/bits/css/build/bits.team.scss
@@ -5,5 +5,4 @@
 @import '../../../lib/css/form/form3';
 @import '../../../lib/css/form/captcha';
 @import '../../../lib/css/chat/chat';
-
 @import '../team/team';
diff --git a/ui/bits/css/coach/_editor.scss b/ui/bits/css/coach/_editor.scss
index 28520836116..3b7319e5750 100644
--- a/ui/bits/css/coach/_editor.scss
+++ b/ui/bits/css/coach/_editor.scss
@@ -8,10 +8,12 @@
   .top {
     > span {
       @extend %flex-between;
+
       padding: 1em;
 
       > h1 {
         @extend %roboto;
+
         margin: 0;
         padding: 0 1em !important;
         font-size: 2rem;
@@ -25,6 +27,7 @@
       }
     }
   }
+
   .overview {
     width: 100%;
     display: flex;
@@ -103,7 +106,9 @@
 
   .status {
     opacity: 0;
+
     @include transition;
+
     text-align: center;
     color: $c-good;
   }
diff --git a/ui/bits/css/coach/_show.scss b/ui/bits/css/coach/_show.scss
index e6f2b50a8d2..3d2422eeb75 100644
--- a/ui/bits/css/coach/_show.scss
+++ b/ui/bits/css/coach/_show.scss
@@ -69,6 +69,7 @@
   &__studies,
   &__posts {
     margin-top: 2em;
+
     .coach-show__title {
       padding: 1em var(---box-padding);
     }
diff --git a/ui/bits/css/coach/_widget.scss b/ui/bits/css/coach/_widget.scss
index 8b25bd9906b..f7096fea909 100644
--- a/ui/bits/css/coach/_widget.scss
+++ b/ui/bits/css/coach/_widget.scss
@@ -4,6 +4,7 @@
   padding-bottom: 1rem;
 
   @include transition;
+
   @include mq-at-least-picture {
     height: 300px;
   }
@@ -54,6 +55,7 @@
 
     th {
       @extend %break-nope;
+
       font-size: 0.9em;
       color: $c-font-dim;
       padding-inline-end: 1.2em;
diff --git a/ui/bits/css/forum/_post.scss b/ui/bits/css/forum/_post.scss
index ee1d6ab4a55..1c3a1e513ef 100644
--- a/ui/bits/css/forum/_post.scss
+++ b/ui/bits/css/forum/_post.scss
@@ -6,6 +6,7 @@
   &__metas {
     > div {
       @extend %flex-center;
+
       flex: 1;
     }
 
@@ -18,6 +19,7 @@
 
     a.author--op {
       @extend %box-radius;
+
       padding: 0.2em;
       padding-inline-end: 0.8em;
       background: $m-primary_bg--mix-12;
@@ -52,6 +54,7 @@
       text-align: center;
       margin-bottom: 2em;
     }
+
     .forum-post__metas {
       justify-content: flex-end;
     }
@@ -61,6 +64,7 @@
     .forum-post__message {
       display: none;
     }
+
     > button {
       margin: 2em;
     }
@@ -95,6 +99,7 @@
 
   &:hover {
     color: $c-primary;
+
     &.delete {
       color: $c-bad;
     }
@@ -121,7 +126,6 @@
 
   margin-top: 1em;
   margin-bottom: 1em;
-
   text-align: start;
 
   .lpv {
diff --git a/ui/bits/css/forum/_topic.scss b/ui/bits/css/forum/_topic.scss
index 09f90429bcb..917728cd8c4 100644
--- a/ui/bits/css/forum/_topic.scss
+++ b/ui/bits/css/forum/_topic.scss
@@ -52,6 +52,7 @@
       }
     }
   }
+
   .reply label[for='form3-text'] {
     display: none;
   }
diff --git a/ui/bits/css/plan/_icon-shiny.scss b/ui/bits/css/plan/_icon-shiny.scss
index 6c114289675..8b10bec29bc 100644
--- a/ui/bits/css/plan/_icon-shiny.scss
+++ b/ui/bits/css/plan/_icon-shiny.scss
@@ -8,11 +8,13 @@
   i {
     @extend %data-icon;
   }
+
   i::before {
     content: $licon-Wings !important;
     background-clip: text;
     color: transparent;
   }
+
   @each $id, $color in $patron-colors-dark {
     &--#{$id} {
       i::before {
@@ -20,6 +22,7 @@
       }
     }
   }
+
   @each $id, $color in $patron-colors-light {
     html.light &--#{$id} {
       i::before {
diff --git a/ui/bits/css/plan/_page.scss b/ui/bits/css/plan/_page.scss
index bf716f916e0..9607df459ba 100644
--- a/ui/bits/css/plan/_page.scss
+++ b/ui/bits/css/plan/_page.scss
@@ -26,6 +26,7 @@
       &.up {
         color: #639b24;
       }
+
       &.down {
         color: #ac524f;
       }
@@ -46,9 +47,11 @@
         width: 5em;
         padding: 3px 5px;
       }
+
       p {
         margin-bottom: 1em;
       }
+
       button,
       a {
         margin-inline-start: 10px;
@@ -101,6 +104,7 @@
 
   .wrapper {
     @extend %flex-between;
+
     align-items: flex-start;
     font-size: 1.3em;
   }
@@ -108,11 +112,13 @@
   .text,
   .content {
     @extend %flex-center;
+
     flex: 1 1 50%;
   }
 
   .text {
     @extend %flex-column;
+
     flex: 1 1 45%;
     margin-inline-end: 1em;
   }
@@ -122,6 +128,7 @@
 
     h3 {
       @extend %roboto;
+
       display: block;
       text-transform: uppercase;
       margin: 0;
@@ -156,6 +163,7 @@
 
     .cover-fees {
       @extend %flex-center-nowrap;
+
       margin-bottom: 1.5em;
       font-size: 0.95em;
 
@@ -163,6 +171,7 @@
         margin-inline-end: 0.5em;
         transform: scale(1.2);
       }
+
       label {
         cursor: pointer;
         color: $c-font-dim;
@@ -173,6 +182,7 @@
     .service {
       .buttons {
         @extend %flex-between;
+
         font-size: 1.1em;
         gap: 1em;
 
@@ -180,13 +190,16 @@
         .paypal {
           height: 55px;
         }
+
         .button {
           flex: 1 1 auto;
           font-weight: normal;
         }
+
         .paypal {
           display: flex;
           overflow: hidden;
+
           iframe {
             color-scheme: normal;
           }
@@ -202,6 +215,7 @@
 
     .gift {
       @extend %flex-center-center;
+
       margin: -1em 0 1em 0;
     }
   }
@@ -215,6 +229,7 @@
 
   .faq {
     @extend %flex-between;
+
     align-items: flex-start;
     margin: 50px 0 40px 0;
     padding: 30px 0;
@@ -228,6 +243,7 @@
     dt {
       font-size: 1.3em;
       margin-bottom: 1em;
+
       &:nth-of-type(2) {
         margin-top: 1.5em;
       }
@@ -236,6 +252,7 @@
     dd {
       margin: 0;
     }
+
     code {
       font-size: 0.9em;
     }
@@ -261,10 +278,12 @@
 
     .list {
       @extend %flex-center;
+
       font-size: 1.1em;
 
       div {
         @extend %ellipsis;
+
         flex: 1 1 25%;
         min-width: 17ch;
       }
@@ -285,6 +304,7 @@
 
     a {
       color: $c-font-page;
+
       &:hover {
         color: $c-link;
       }
diff --git a/ui/bits/css/plan/_style-selector.scss b/ui/bits/css/plan/_style-selector.scss
index 416005e83e2..4d2f6d47f0b 100644
--- a/ui/bits/css/plan/_style-selector.scss
+++ b/ui/bits/css/plan/_style-selector.scss
@@ -3,9 +3,11 @@
 
 .patron-style-selector {
   @extend %flex-column;
+
   gap: 3em;
   border-bottom: $border;
   padding-bottom: 4em;
+
   &.box__pad {
     margin: 5em 0;
   }
@@ -16,8 +18,10 @@
   grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
   gap: 1em;
 }
+
 .pss__color {
   @extend %box-neat, %flex-column;
+
   justify-content: space-between;
   overflow: hidden;
   background: $c-bg-high;
@@ -31,17 +35,23 @@
 
   &--selectable {
     cursor: pointer;
+
     @include transition;
+
     &:hover {
       background: $c-bg-zebra;
     }
   }
+
   &:disabled {
     cursor: not-allowed;
+
     .patron-icon--shiny {
       position: relative;
+
       &::after {
         @extend %data-icon;
+
         content: $licon-Padlock;
         position: absolute;
         opacity: 1;
@@ -52,10 +62,12 @@
       }
     }
   }
+
   &--active {
     border-width: 5px 5px 1px 5px;
     border-radius: 10px 10px 6px 6px;
     box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
+
     .patron-icon--shiny {
       margin-top: calc(0.7rem - 4px);
     }
@@ -63,11 +75,13 @@
 
   &__tier-name {
     @extend %nowrap-hidden, %roboto;
+
     font-size: 0.9em;
     font-weight: bold;
     text-align: center;
     text-transform: uppercase;
     padding: 0.5em;
+
     .pss__color--selectable & {
       color: $c-over;
       text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
@@ -78,12 +92,15 @@
     &--#{$id}.pss__color--selectable {
       border-color: var(--c-paco#{$id});
       box-shadow: 0 0 9px transparentize($color, 0.7);
+
       &:hover {
         box-shadow: 0 0 14px transparentize($color, 0.3);
       }
+
       &.pss__color--active {
         box-shadow: 0 0 23px $color;
       }
+
       .pss__color__tier-name {
         width: 100%;
         background-color: var(--c-paco#{$id});
diff --git a/ui/bits/css/relay/_announcement.scss b/ui/bits/css/relay/_announcement.scss
index b3cdfb6fd7c..d59acccf356 100644
--- a/ui/bits/css/relay/_announcement.scss
+++ b/ui/bits/css/relay/_announcement.scss
@@ -1,5 +1,6 @@
 .relay__announcement {
   @extend %box-neat;
+
   border: 1px solid $c-brag;
   background-color: $c-bg-zebra;
   padding: 1em 3em;
diff --git a/ui/bits/css/relay/_calendar.scss b/ui/bits/css/relay/_calendar.scss
index 42ec8b3942a..2556060d003 100644
--- a/ui/bits/css/relay/_calendar.scss
+++ b/ui/bits/css/relay/_calendar.scss
@@ -11,18 +11,22 @@
       }
     }
   }
+
   @media (min-width: at-least($xx-small)) {
     .relay-card {
       grid-column: span 1;
       grid-row: span 2;
+
       &--tier-3 {
         grid-row: span 1;
       }
+
       &--tier-5 {
         display: flex;
         flex-flow: column;
         grid-column: span 2;
         grid-row: span 4;
+
         .relay-card__body {
           display: flex;
           flex-flow: column;
diff --git a/ui/bits/css/relay/_card.scss b/ui/bits/css/relay/_card.scss
index 4cce3a80314..a80a4672dcd 100644
--- a/ui/bits/css/relay/_card.scss
+++ b/ui/bits/css/relay/_card.scss
@@ -6,10 +6,12 @@
 
   &--tier-best {
     grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+
     @media (max-width: at-most($xx-small)) {
       grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     }
   }
+
   &--tier-high {
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   }
@@ -17,7 +19,6 @@
 
 .relay-card {
   @extend %box-neat-force;
-
   @include transition(box-shadow);
 
   background: $c-bg-zebra;
@@ -34,6 +35,7 @@
 
   &--live {
     outline: 3px solid $m-bad--alpha-50;
+
     &:hover {
       box-shadow:
         0 0 5px $c-live,
@@ -45,10 +47,13 @@
     width: 100%;
     height: auto;
     opacity: 0.7;
+
     .relay-card--live & {
       opacity: 0.9;
     }
+
     @include transition(opacity);
+
     .relay-card:hover & {
       opacity: 1;
     }
@@ -60,46 +65,59 @@
 
   &__body {
     @extend %flex-column;
+
     padding: 0.6em 0 0.6em 1em;
   }
 
   &__info {
     @extend %flex-center-nowrap;
+
     margin-right: 1rem;
     color: $c-font-dim;
     gap: 1ch;
   }
+
   &__live {
     @extend %flex-between;
+
     flex: 1;
     color: $c-live;
     font-weight: bold;
   }
+
   &__finished {
     color: $c-good;
     font-weight: bold;
   }
+
   &__title {
     @include line-clamp(2);
+
     margin: 0.2em 0.3rem 0.3em 0;
     font-weight: normal;
     color: $c-font-clearer;
     font-size: 1.3em;
+
     .relay-cards--tier-best & {
       font-size: 1.4em;
     }
   }
+
   &__players {
     @extend %roboto, %flex-center;
+
     color: $c-font-dim;
     overflow: hidden;
     height: 1.2em;
+
     span:not(:first-child)::before {
       content: ', ';
     }
   }
+
   &__errors {
     @extend %break-word, %nowrap-ellipsis;
+
     font-family: monospace;
     color: $c-bad;
   }
diff --git a/ui/bits/css/relay/_form.scss b/ui/bits/css/relay/_form.scss
index 239583eaa8c..2deea90c898 100644
--- a/ui/bits/css/relay/_form.scss
+++ b/ui/bits/css/relay/_form.scss
@@ -1,19 +1,24 @@
 .relay-form {
   &__actions {
     @extend %flex-between;
+
     margin: 2em 0;
     border-top: $border;
     padding-top: 3em;
+
     form {
       flex: 0 0 50%;
+
       .button {
         @extend %flex-column;
+
         text-align: left;
         width: 100%;
 
         strong {
           display: block;
         }
+
         em {
           color: $c-font-dim;
           text-transform: none;
@@ -22,6 +27,7 @@
       }
     }
   }
+
   &__image {
     padding: 4vh var(---box-padding) 0;
     background: $c-bg-zebra;
@@ -81,23 +87,30 @@
     font-weight: bold;
     color: $c-font-dimmer;
   }
+
   .relay-form__subnav__tour-parent {
     @include box-radius;
+
     background: $c-bg-box;
     margin-bottom: 5px;
   }
+
   .subnav {
     width: 30ch;
+
     a {
       white-space: wrap;
     }
+
     .subnav__subitem {
       margin-left: 1em;
     }
+
     .subnav__subitem2 {
       margin-left: 2em;
       letter-spacing: 0;
     }
+
     .button {
       margin-inline-end: 1em;
     }
diff --git a/ui/bits/css/relay/_group.scss b/ui/bits/css/relay/_group.scss
index ad3d09d2663..006bad1fbbd 100644
--- a/ui/bits/css/relay/_group.scss
+++ b/ui/bits/css/relay/_group.scss
@@ -9,26 +9,33 @@
         color: $c-font-clear;
       }
     }
+
     &__info {
       @extend %flex-between;
+
       align-self: stretch;
     }
+
     &__live {
       flex: 0 0 auto;
     }
   }
+
   @media (min-width: at-least($xx-small)) {
     .relay-card {
       grid-column: span 1;
       grid-row: span 2;
+
       &--tier-3 {
         grid-row: span 1;
       }
+
       &--tier-5 {
         display: flex;
         flex-flow: column;
         grid-column: span 2;
         grid-row: span 4;
+
         .relay-card__body {
           display: flex;
           flex-flow: column;
diff --git a/ui/bits/css/relay/_image.scss b/ui/bits/css/relay/_image.scss
index defd33c79b9..41cd2281a80 100644
--- a/ui/bits/css/relay/_image.scss
+++ b/ui/bits/css/relay/_image.scss
@@ -1,6 +1,7 @@
 .relay-image {
   &--fallback {
     @extend %flex-center-center;
+
     width: 100%;
     aspect-ratio: 2 / 1;
     background: linear-gradient(to bottom, $m-primary--alpha-70, $m-brag--alpha-70);
diff --git a/ui/bits/css/relay/_relay.scss b/ui/bits/css/relay/_relay.scss
index a4a9d8f8adb..998c9d24f4e 100644
--- a/ui/bits/css/relay/_relay.scss
+++ b/ui/bits/css/relay/_relay.scss
@@ -11,20 +11,25 @@
     margin: 2em 0 1em 0;
   }
 }
+
 .relay-index__admin {
   h2 {
     margin: 0 0 1em 0;
     color: $c-bad;
   }
+
   padding-bottom: 1em;
   border-bottom: $border;
   margin-bottom: 2em;
 }
+
 .relay-index__calendar {
   text-align: center;
+
   .button {
     padding: 1.5em 4em;
     white-space: normal;
+
     strong {
       font-size: 1.5em;
       display: block;
diff --git a/ui/bits/css/streamer/_form.scss b/ui/bits/css/streamer/_form.scss
index 0003c343d9a..d87434a9897 100644
--- a/ui/bits/css/streamer/_form.scss
+++ b/ui/bits/css/streamer/_form.scss
@@ -11,16 +11,19 @@
     flex-direction: column;
     padding: 2em 2em 0;
     row-gap: 2em;
+
     @include mq-at-least-picture {
       flex-direction: row;
     }
 
     .picture-edit {
       @extend %flex-column;
+
       row-gap: 2em;
 
       > span {
         @extend %flex-center-center;
+
         column-gap: 1em;
       }
     }
@@ -31,6 +34,7 @@
       height: min(350px, calc(100vw - 4em));
     }
   }
+
   .twitch-link-box,
   .youtube-link-box {
     display: flex;
@@ -38,13 +42,16 @@
     align-items: center;
     justify-content: start;
     gap: 1em;
+
     &.linked button.link {
       display: none;
     }
+
     &:not(.linked) button.unlink {
       display: none;
     }
   }
+
   .status {
     @extend %box-radius;
 
diff --git a/ui/bits/css/streamer/_header.scss b/ui/bits/css/streamer/_header.scss
index 664efa55a04..2e05a6058be 100644
--- a/ui/bits/css/streamer/_header.scss
+++ b/ui/bits/css/streamer/_header.scss
@@ -70,6 +70,7 @@
 
   span {
     @extend %roboto;
+
     position: absolute;
     transform: rotate(45deg);
     display: block;
@@ -88,6 +89,7 @@
 
 .live-ribbon {
   @extend %streamer-ribbon;
+
   top: -10px;
   right: -10px;
 
@@ -116,6 +118,7 @@
     bottom: 0;
     right: 0;
   }
+
   span {
     top: 35px;
     left: -20px;
@@ -124,6 +127,7 @@
 
 .streamer-title {
   @extend %flex-between;
+
   gap: 1em;
   margin: 1.5em var(---box-padding) 1em 0;
 }
@@ -142,6 +146,7 @@
 
 .streamer-footer {
   @extend %flex-wrap;
+
   align-items: center;
   gap: 3em;
 }
diff --git a/ui/bits/css/streamer/_list.scss b/ui/bits/css/streamer/_list.scss
index abc167ee5a6..a4d3fc2a491 100644
--- a/ui/bits/css/streamer/_list.scss
+++ b/ui/bits/css/streamer/_list.scss
@@ -18,11 +18,12 @@
   }
 
   .streamer {
+    @include transition;
+
     border-top: $border;
     position: relative;
     display: flex;
 
-    @include transition;
     @include mq-subnav-top {
       overflow-x: hidden;
     }
@@ -47,6 +48,7 @@
     &:nth-child(even) {
       background: $c-bg-zebra;
       justify-content: space-between;
+
       div.picture {
         order: 3;
       }
@@ -63,7 +65,6 @@
 
   img.picture {
     flex: 0 0 300px;
-
     display: none;
 
     @include mq-at-least-picture {
diff --git a/ui/bits/css/streamer/_show.scss b/ui/bits/css/streamer/_show.scss
index a53ab189ded..99027ae52c1 100644
--- a/ui/bits/css/streamer/_show.scss
+++ b/ui/bits/css/streamer/_show.scss
@@ -8,14 +8,11 @@
 
 .streamer-show {
   .page-menu__content {
-    overflow: hidden;
-
-    /* help with responsive overflow of activity */
+    overflow: hidden; // help with responsive overflow of activity
   }
 
   h1 {
     @extend %roboto, %ellipsis;
-
     @include fluid-size('font-size', 23px, 40px);
 
     &::before {
@@ -70,6 +67,7 @@
 
   .description {
     @include padding-direction(2.5em, 50px, 2.5em, 65px);
+
     font-size: 1.4em;
   }
 
@@ -86,6 +84,7 @@
     @extend %flex-center;
 
     justify-content: space-between;
+
     @include padding-direction(2em, 50px, 1em, 58px);
 
     font-size: 1.6em;
diff --git a/ui/bits/css/team/_admin.scss b/ui/bits/css/team/_admin.scss
index dae76174f9b..080fedc8a76 100644
--- a/ui/bits/css/team/_admin.scss
+++ b/ui/bits/css/team/_admin.scss
@@ -2,15 +2,18 @@
   .inline {
     display: inline;
   }
+
   .accent {
     textarea {
       border-color: $c-brag;
     }
+
     label {
       color: $c-brag;
     }
   }
 }
+
 .team-permissions {
   p.error {
     font-size: 1.3em;
@@ -19,49 +22,61 @@
   .form-help {
     margin: 2em 0 0 0;
   }
+
   .form-actions {
     border: none;
     padding-bottom: $box-padding-vert;
   }
+
   table {
     @media (min-width: at-least($x-small)) {
       .highlight,
       tbody tr:hover td,
       tbody tr:hover th {
         background: $m-primary_bg-page--mix-15 !important;
+
         a {
           color: $c-font-clearer;
         }
       }
     }
+
     @media (max-width: at-most($x-small)) {
       .highlight {
         background: $m-primary_bg-page--mix-15 !important;
       }
     }
+
     th {
       padding-top: 1em;
       padding-bottom: 1em;
+
       strong {
         @extend %break-nope;
+
         font-size: 1.3em;
         color: $c-brag;
       }
+
       p {
         margin: 0;
       }
     }
+
     td,
     th {
       border-left: $border;
     }
   }
 }
+
 .team-add-leader {
   &__input {
     display: flex;
   }
+
   margin-bottom: $box-padding-vert;
+
   .error {
     color: $c-bad;
   }
diff --git a/ui/bits/css/team/_forum.scss b/ui/bits/css/team/_forum.scss
index 4432b2859b8..44fb3e480e2 100644
--- a/ui/bits/css/team/_forum.scss
+++ b/ui/bits/css/team/_forum.scss
@@ -36,12 +36,14 @@
 
     p {
       @extend %zalgoverflow;
+
       color: $c-font-dim;
       text-align: start;
     }
 
     a.more {
       @extend %zalgoverflow;
+
       display: block;
       text-align: right;
       margin: 10px 10px 0 0;
diff --git a/ui/bits/css/tv/_games.scss b/ui/bits/css/tv/_games.scss
index 292bed737ec..ad0d584c3e5 100644
--- a/ui/bits/css/tv/_games.scss
+++ b/ui/bits/css/tv/_games.scss
@@ -1,5 +1,4 @@
 @import 'side';
-
 @include body-fixed-scroll;
 
 .tv-games {
diff --git a/ui/bits/css/tv/_side.scss b/ui/bits/css/tv/_side.scss
index a382ae07268..709d8642fbb 100644
--- a/ui/bits/css/tv/_side.scss
+++ b/ui/bits/css/tv/_side.scss
@@ -39,6 +39,7 @@
   .round__side {
     overflow: hidden;
   }
+
   .subnav strong {
     letter-spacing: -1px;
   }
diff --git a/ui/bits/css/ublog/_form.scss b/ui/bits/css/ublog/_form.scss
index 78fbeab01c8..963c9778218 100644
--- a/ui/bits/css/ublog/_form.scss
+++ b/ui/bits/css/ublog/_form.scss
@@ -8,29 +8,37 @@
     padding-left: var(---box-padding);
     padding-right: var(---box-padding);
   }
+
   .toggle-box,
   .flash {
     @extend %box-margin-horiz;
   }
+
   &__delete {
     padding-top: 4em;
   }
+
   &__etiquette {
     @extend %box-neat;
+
     background: $c-bg-zebra;
     padding: 2em 3em;
     margin: 0 auto 3em auto;
     max-width: 80ch;
   }
+
   .tagify {
     margin: 0;
   }
 }
+
 #form3-markdown {
   display: none;
 }
+
 .ublog-image-edit {
   @extend %image-preview-and-upload;
+
   img {
     width: 65%;
   }
diff --git a/ui/bits/css/ublog/_post.scss b/ui/bits/css/ublog/_post.scss
index 4022b3cfe40..ae46d99d42b 100644
--- a/ui/bits/css/ublog/_post.scss
+++ b/ui/bits/css/ublog/_post.scss
@@ -1,9 +1,11 @@
 .ublog-post {
   &__title {
     @extend %break-word;
+
     text-align: center;
     margin: 3rem 0 3rem;
   }
+
   &__meta {
     display: flex;
     flex-flow: row wrap;
@@ -11,31 +13,39 @@
     column-gap: 1.5em;
     align-items: center;
     margin-bottom: 2rem;
+
     &__report {
       color: $c-font-dim !important;
+
       &:hover {
         color: $c-bad !important;
       }
     }
+
     .user-link {
       color: $c-link;
       font-size: 1.2em;
     }
+
     &__disclaimer {
       color: $c-font-dimmer;
       font-size: 0.9rem;
       margin-inline-start: -0.5rem;
       vertical-align: top;
+
       @media (hover: none) {
         display: none;
       }
     }
+
     &__date {
       unicode-bidi: embed;
     }
   }
+
   &__topics {
     @extend %flex-wrap;
+
     justify-content: center;
     line-height: 2em;
 
@@ -57,55 +67,71 @@
       margin-bottom: 2em;
     }
   }
+
   &__tier {
     margin-inline-start: 1em;
   }
+
   &__ads-disclosure {
     @extend %box-radius;
+
     padding: 1rem 1.5rem;
     margin-top: 3vh;
     background: $c-bg-zebra;
   }
+
   &__like {
     font-weight: bold;
     cursor: pointer;
+
     &::before {
       margin: 0 0.4em;
       content: $licon-HeartOutline;
     }
+
     &.ublog-post__like--liked::before {
       content: $licon-Heart;
     }
+
     &--mini {
       margin-inline-start: 1rem;
       color: $c-font;
       transition: 0.3s;
+
       &:hover {
         opacity: 1;
         color: $c-bad;
       }
     }
   }
+
   &__discuss {
     width: 100%;
     margin-bottom: 4rem;
   }
+
   &__views {
     white-space: nowrap;
   }
+
   &__image {
     @extend %box-neat-force;
+
     width: 100%;
     height: auto;
+
     &-credit {
       @extend %break-word;
+
       font-size: 0.9em;
       color: $c-font-dim;
       text-align: right;
     }
   }
+
   &__intro {
     @extend %break-word;
+
     font-size: 1.2em;
     margin: 5vh 0 5vh 0;
     display: block;
@@ -114,28 +140,36 @@
   &__patron-info {
     margin: 2em 2em 0;
   }
+
   &__lichess {
     text-align: center;
     margin: 3em 0 3em 0;
+
     .connect-links a {
       display: inline-block;
       margin: 1em 0.5em;
     }
   }
+
   &__footer {
     margin: 5em 0 0 0;
+
     h2 {
       margin-bottom: 1.5em;
     }
   }
+
   &__actions {
     @extend %flex-center-center;
+
     font-size: 2em;
     margin: 0 0 2rem 0;
+
     .button {
       margin: 0 1em 2rem 1em;
       padding: 0.8em 1.5em;
       border-radius: 5px;
+
       &-label {
         display: block;
         margin-top: 1em;
@@ -144,11 +178,13 @@
       }
     }
   }
+
   &__follow {
     .ublog-post__follow__yes,
     &.followed .ublog-post__follow__no {
       display: none;
     }
+
     .ublog-post__follow__no,
     &.followed .ublog-post__follow__yes {
       display: block;
@@ -159,25 +195,31 @@
 #mod-tools {
   display: flex;
   gap: 2rem;
+
   @media (max-width: at-most($small)) {
     flex-direction: column;
     gap: 1rem;
   }
+
   margin-bottom: 2rem;
 
   fieldset,
   div {
     @extend %flex-column;
+
     align-items: stretch;
     justify-content: space-between;
     gap: 1rem;
   }
+
   fieldset {
     border: $border-width $border-style $c-border;
     padding: 1rem 1.5rem 1.5rem;
   }
+
   legend {
     @extend %flex-between;
+
     align-items: center;
     padding: 0 0.5rem;
     gap: 1ch;
@@ -186,50 +228,65 @@
     button {
       padding: 0.3rem 0.6rem;
     }
+
     label {
       font-size: 1.2rem;
     }
   }
+
   span {
     @extend %flex-center;
   }
+
   input {
     flex: auto;
     padding: 4px 6px;
   }
+
   input[type]:not([type='text']) {
     cursor: pointer;
   }
+
   .btn-rack {
     margin: 0 auto;
   }
+
   .carousel-fields {
     align-items: center;
+
     span {
       gap: 1ch;
     }
   }
+
   .submit-fields {
     flex: auto;
+
     &:has(.submit:not(.none)) {
       border-color: $c-primary;
     }
+
     > span {
       @extend %flex-center;
+
       gap: 1rem;
       height: 2rem;
     }
+
     input[type='checkbox'] {
       flex: none;
       width: 1.2rem;
       height: 1.2rem;
     }
+
     .commercial {
       color: $c-secondary;
     }
+
     .flagged {
       color: $c-bad;
     }
+
     .empty {
       color: $c-font-dimmer;
     }
diff --git a/ui/bits/css/ublog/_topic.scss b/ui/bits/css/ublog/_topic.scss
index 3d5747f1436..056f859f692 100644
--- a/ui/bits/css/ublog/_topic.scss
+++ b/ui/bits/css/ublog/_topic.scss
@@ -5,17 +5,22 @@
     gap: 0 2%;
     grid-template-rows: auto; /* first row auto */
     grid-auto-rows: 0; /* all the other rows 0 */
+    opacity: 0.85;
+
     @media (min-width: at-least($xx-small)) {
       display: grid;
     }
-    opacity: 0.85;
+
     @include transition(opacity);
   }
+
   .ublog-post-card {
     &--mini {
       @extend %box-neat-force;
+
       font-size: 0.85em;
       line-height: 0;
+
       .ublog-post-card__title {
         position: absolute;
         bottom: 0;
@@ -27,26 +32,34 @@
         line-height: 1.5em;
       }
     }
+
     &__title {
       color: $c-font-clearer;
     }
   }
+
   &__topic {
     @extend %flex-column, %box-radius;
+    @include transition(background);
+
     gap: 1em;
     padding: 1em 1.5em 1.5em;
-    @include transition(background);
+
     &:hover {
       background: $m-primary_bg--mix-18;
     }
+
     h2 {
       @extend %flex-between;
+
       span {
         font-size: 1rem;
       }
     }
+
     &:hover .ublog-post-cards {
       opacity: 1;
+
       .ublog-post-card__title {
         color: $c-font-clear;
       }
diff --git a/ui/bits/css/ublog/_ublog.scss b/ui/bits/css/ublog/_ublog.scss
index ac43e0c97f9..c311b334ba0 100644
--- a/ui/bits/css/ublog/_ublog.scss
+++ b/ui/bits/css/ublog/_ublog.scss
@@ -4,6 +4,7 @@
 
 .ublog-index {
   @extend %flex-column;
+
   gap: 2rem;
   padding-top: 2rem;
   padding-bottom: 3rem;
@@ -42,6 +43,7 @@
     .atom {
       font-size: 2.6em;
       color: $c-font-dimmer;
+
       &:hover {
         color: $c-accent;
       }
@@ -58,12 +60,14 @@
 
       input {
         @extend %box-radius-inline-start;
+
         flex: auto;
         font-size: 1.2em;
       }
 
       .button {
         @extend %box-radius-inline-end;
+
         padding: 0 1rem;
         border-inline-start: 0;
       }
@@ -94,9 +98,11 @@
     flex: auto;
     padding: 0.2em;
     gap: 0;
+
     div {
       gap: 0.5em;
     }
+
     label {
       padding: 0.2em;
     }
@@ -107,6 +113,7 @@
     font-family: lichess;
     content: $licon-DownTriangle;
   }
+
   .ascending::after {
     margin-inline-start: 1ch;
     font-family: lichess;
@@ -117,6 +124,7 @@
     h1.collapsible {
       display: none;
     }
+
     .filter-and-sort,
     .search-sort,
     .box__top__actions {
@@ -127,6 +135,7 @@
 
 .column-gap {
   @extend %flex-column;
+
   gap: 4rem;
 }
 
@@ -134,18 +143,24 @@
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
   gap: 3rem;
+
   div {
     @extend %flex-column;
+
     gap: 1rem;
   }
+
   span {
     @extend %flex-between;
+
     font-size: 0.9em;
   }
+
   label {
     display: flex;
     gap: 4px;
   }
+
   .pull {
     font-family: lichess;
     font-size: 1rem;
@@ -154,10 +169,12 @@
     border-radius: 50%;
     border: 2px solid $c-bad;
     cursor: pointer;
+
     &:hover {
       filter: brightness(1.2);
     }
   }
+
   .user-link {
     display: flex;
     color: $c-primary;
@@ -166,7 +183,9 @@
 
 .ublog-mod-note-dlg {
   @extend %flex-column;
+
   gap: 2em;
+
   span {
     display: flex;
     justify-content: end;
diff --git a/ui/botDev/css/_asset-dialog.scss b/ui/botDev/css/_asset-dialog.scss
index 87afcccd0f7..154a4ab3962 100644
--- a/ui/botDev/css/_asset-dialog.scss
+++ b/ui/botDev/css/_asset-dialog.scss
@@ -1,5 +1,6 @@
 .asset-dialog {
   @extend %flex-column;
+
   align-items: stretch;
   min-width: 704px;
   width: 70vw;
@@ -9,6 +10,7 @@
     width: 90vw;
     height: 90vh;
   }
+
   .asset-grid {
     display: grid;
     width: 100%;
@@ -17,18 +19,22 @@
     grid-auto-rows: auto;
     gap: 1em;
   }
+
   .tab {
     justify-content: center;
     font-size: 1.2em;
     font-weight: bold;
   }
+
   img {
     width: 176px;
     aspect-ratio: 1/1;
     border-radius: 8px;
   }
+
   .asset-item {
     @extend %flex-column;
+
     position: relative;
     align-items: center;
     gap: 0.5em;
@@ -40,55 +46,68 @@
     .asset-preview {
       width: min-content;
     }
+
     &.local-only {
       background: $c-bg-low;
     }
+
     .upper-right {
       z-index: $z-above-dialog-14;
       top: -4px;
       right: -4px;
     }
+
     .upper-left {
       z-index: $z-above-dialog-14;
       top: -4px;
       left: -4px;
     }
+
     .asset-label {
       font-size: 0.9em;
       font-weight: bold;
     }
+
     input.asset-label {
       text-align: center;
       background-color: transparent;
       border: none;
       outline: none;
       padding: 2px 4px;
+
       &[disabled] {
         pointer-events: none;
       }
+
       &:hover {
         background-color: $m-primary_bg--mix-40;
       }
+
       &:focus:not([disabled]) {
         background-color: $c-bg-page; // $m-primary_bg--mix-60;
         outline: 1px solid;
       }
     }
+
     .preview-sound {
       @extend %flex-center-nowrap;
+
       text-transform: none;
       color: $c-font-dim;
+
       &::before {
         margin-inline-end: 0.5em;
         font-size: 24px;
       }
     }
   }
+
   .chooser .asset-item,
   .asset-item[data-action='add'] {
     &:hover {
       cursor: pointer;
     }
+
     &:hover:not(:has(button:hover)) {
       background: $m-bg_high--lighten-11;
       outline: $c-primary 2px dashed;
@@ -100,16 +119,20 @@ div.import-dialog {
   &,
   > div {
     @extend %flex-column;
+
     gap: 2em;
   }
+
   .options {
     .name {
       width: 160px;
     }
+
     .ply {
       width: 50px;
     }
   }
+
   .progress {
     .bar {
       height: 16px;
@@ -118,10 +141,12 @@ div.import-dialog {
       background-color: $c-primary;
       transition: width 0.3s;
     }
+
     .text {
       color: $c-font-dim;
     }
   }
+
   button {
     align-self: end;
   }
diff --git a/ui/botDev/css/_base-dialog.scss b/ui/botDev/css/_base-dialog.scss
index bb3b1bb35d2..87d939ad172 100644
--- a/ui/botDev/css/_base-dialog.scss
+++ b/ui/botDev/css/_base-dialog.scss
@@ -31,6 +31,7 @@ dialog .with-cards {
 
   .player {
     @extend %flex-column;
+
     position: relative;
     width: 100%;
     border-radius: 10px;
@@ -49,6 +50,7 @@ dialog .with-cards {
     &[data-color='white'] {
       background-color: hsl(37, 12%, 92%);
     }
+
     &[data-color='black'] {
       background-color: hsl(37, 5%, 23%);
     }
@@ -72,6 +74,7 @@ dialog .with-cards {
     background-color: #242424;
     border: 1px solid #444;
     color: white;
+
     &[data-color='white'] {
       background-color: $c-body-gradient;
       color: $c-font-clearer;
diff --git a/ui/botDev/css/_bot-dev.scss b/ui/botDev/css/_bot-dev.scss
index eeffb181bc7..51c052d2226 100644
--- a/ui/botDev/css/_bot-dev.scss
+++ b/ui/botDev/css/_bot-dev.scss
@@ -1,44 +1,56 @@
 .dev-view {
   @extend %flex-column;
+
   gap: 1em;
 
   span {
     @extend %flex-center-nowrap;
+
     white-space: nowrap;
     gap: 1em;
   }
+
   textarea,
   select,
   input {
     padding: 3px 5px;
+
     &.invalid {
       background-color: $m-bg_bad--mix-80;
     }
   }
+
   select,
   input:not([type='text']) {
     cursor: pointer;
   }
+
   *:focus-visible,
   input[type='range']:focus-visible {
     outline: 2px solid $c-font;
     outline-offset: -2px;
   }
+
   .disabled label > span {
     opacity: 0.5;
   }
+
   .disabled .hide-disabled {
     display: none;
   }
+
   .preview-sound::before {
     color: $c-secondary;
+
     &:hover {
       color: $m-secondary--lighten-11;
     }
   }
+
   .icon-btn {
     padding: 6px;
   }
+
   .upper-right {
     position: absolute;
     font-size: 1.25em;
@@ -46,14 +58,17 @@
     right: 0;
     color: $c-bad;
     cursor: pointer;
+
     &.show {
       display: block;
     }
+
     &:hover {
       color: $m-bad--lighten-11;
       filter: saturate(1);
     }
   }
+
   .upper-left {
     position: absolute;
     font-size: 1.25em;
@@ -61,17 +76,21 @@
     left: 0;
     color: $c-primary;
     cursor: pointer;
+
     &.show {
       display: block;
     }
+
     &:hover {
       color: $m-primary--lighten-11;
       filter: saturate(1);
     }
   }
+
   .clean {
     background-color: white;
   }
+
   .dirty {
     &::after {
       content: '';
@@ -82,12 +101,15 @@
       border: 5px solid $c-bad;
     }
   }
+
   .local-only {
     background-color: $m-brag_white--mix-25;
   }
+
   .local-changes {
     background-color: $m-clas_white--mix-28;
   }
+
   .upstream-changes {
     background-color: $m-primary_white--mix-30;
   }
@@ -109,21 +131,27 @@ main.round {
   input:not([type='text']) {
     cursor: pointer;
   }
+
   span,
   h3 {
     @extend %flex-between-nowrap;
+
     gap: 1em;
   }
 
   label {
     @extend %flex-center-nowrap;
+
     gap: 0.5em;
   }
+
   button {
     padding: 0.5em;
   }
+
   .player {
     @extend %flex-center-nowrap;
+
     position: relative;
     padding-inline-end: 8px;
     border-radius: 5px;
@@ -132,48 +160,62 @@ main.round {
     width: 100%;
     font-size: 1em;
     gap: 0.5em;
+
     img {
       width: 10vh;
       height: 10vh;
     }
+
     &:hover {
       cursor: pointer;
     }
+
     &[data-color='white'] {
       background-color: #eee;
       color: #333;
+
       &:hover:not(:has(button:hover)) {
         background-color: hsl(209, 79%, 85%);
       }
     }
+
     &[data-color='black'] {
       background-color: #333;
       color: white;
+
       &:hover:not(:has(button:hover)) {
         background-color: hsl(209, 29%, 20%);
       }
     }
+
     .select-bot {
       width: 60%;
     }
+
     .stats {
       @extend %flex-column;
+
       align-items: center;
       flex: auto;
+
       span {
         @extend %flex-center-nowrap;
+
         justify-content: center;
         font-size: 1.2em;
         gap: 0.5em;
       }
     }
+
     .upper-right {
       background: none;
       border: none;
       outline: none;
     }
+
     .bot-actions {
       @extend %flex-column;
+
       gap: 1em;
     }
   }
@@ -181,57 +223,77 @@ main.round {
   .spacer {
     flex: 1 1 auto;
   }
+
   .fen {
     font-family: monospace;
     font-size: 12px;
+
     &::placeholder {
       color: #888;
     }
+
     width: 100%;
   }
+
   .num-games {
     width: 50px;
   }
+
   .results-action {
     flex: auto;
   }
+
   .board-action::before {
     color: $c-font;
+
     &:hover {
       color: $c-font-clearer;
     }
   }
+
   .reset::before {
     @extend %data-icon;
+
     content: $licon-X;
     color: $c-bad;
+
     &:hover {
       color: $m-bad--lighten-11;
     }
   }
+
   .play-pause {
     margin-inline-start: auto;
+
     &.play::before {
       @extend %data-icon;
+
       color: $c-secondary;
       content: $licon-PlayTriangle;
+
       &:hover {
         color: $m-secondary--lighten-4;
       }
     }
+
     &.pause::before {
       @extend %data-icon;
+
       color: $c-bad;
       content: $licon-Pause;
+
       &:hover {
         color: $m-bad--lighten-11;
       }
     }
   }
 }
+
 .round-robin-dialog {
   @extend %flex-column;
+
   gap: 1em;
+
   ul {
     display: grid;
     grid-auto-flow: column;
@@ -239,16 +301,20 @@ main.round {
     grid-template-rows: repeat(12, 1fr);
     gap: 2px;
   }
+
   li {
     justify-self: start;
   }
+
   input[type='checkbox'] {
     margin-inline-end: 0.5em;
   }
+
   span {
     justify-content: center;
   }
 }
+
 .dev-progress {
   position: relative;
   padding: 0.5em;
@@ -262,18 +328,22 @@ main.round {
     gap: 2px;
     font-size: 12px;
     font-family: monospace;
+
     > div {
       justify-self: start;
     }
   }
 }
+
 .dev-dashboard {
   @extend %flex-column, %box-radius-bottom;
+
   z-index: z(mz-menu);
   width: 100%;
   background: $c-bg-high;
   gap: 1em;
   padding: 1.5em 1em;
+
   > hr {
     margin: 5px;
   }
@@ -291,9 +361,11 @@ main.round {
     justify-content: center;
     height: 80vh;
     width: 100vw;
+
     > * {
       display: none;
     }
+
     &::before {
       content: '';
       display: block;
@@ -303,6 +375,7 @@ main.round {
       min-width: 320px;
       min-height: 320px;
     }
+
     &::after {
       content: '\A Your device is not worthy.';
       font-size: 32px;
@@ -310,6 +383,7 @@ main.round {
     }
   }
 }
+
 #bot-view {
   display: flex;
   flex-flow: column nowrap;
@@ -328,8 +402,10 @@ main.round {
   img {
     width: 80px;
   }
+
   span {
     @extend %flex-center-nowrap;
+
     margin-inline-end: auto;
   }
 }
@@ -357,6 +433,7 @@ main.round {
   &:nth-child(odd) {
     background: $c-bg-box;
   }
+
   &:nth-child(even) {
     background: $c-bg-zebra;
   }
@@ -368,14 +445,17 @@ main.round {
   img {
     width: 96px;
   }
+
   h2 {
     font-size: 1.4em;
     font-weight: bold;
     color: $c-font-clearer;
   }
+
   p {
     margin-left: 1em;
   }
+
   .overview {
     padding: 1em;
     display: flex;
diff --git a/ui/botDev/css/_bot-dev.setup.scss b/ui/botDev/css/_bot-dev.setup.scss
index 4c7f450d1f1..caec6e987b4 100644
--- a/ui/botDev/css/_bot-dev.setup.scss
+++ b/ui/botDev/css/_bot-dev.setup.scss
@@ -4,6 +4,7 @@
   top: 25%;
   font-size: 4em;
   color: $c-bg-zebra2;
+
   &:hover {
     color: $c-font-dimmer;
   }
@@ -31,8 +32,10 @@ body:has(.base-view.setup-view) {
 
   .from-position {
     position: relative;
+
     .resets {
       @extend %flex-center-center;
+
       padding: 2em;
       gap: 2em;
     }
@@ -45,11 +48,13 @@ body:has(.base-view.setup-view) {
 
   .go-to-board {
     @include go-to-button;
+
     right: 20px;
   }
 
   .go-to-opponent {
     @include go-to-button;
+
     left: 20px;
   }
 
@@ -65,6 +70,7 @@ body:has(.base-view.setup-view) {
 
   .vs {
     @extend %flex-column;
+
     align-items: center;
     justify-content: center;
     height: 70%;
@@ -80,26 +86,32 @@ body:has(.base-view.setup-view) {
 
   .chin {
     @extend %flex-center-center;
+
     padding: 1em;
     border-radius: 5px;
     border-top: 1px solid $c-border;
     background: $c-bg-zebra2;
+
     * {
       padding: 6px;
       gap: 0.5em;
     }
+
     span {
       @extend %flex-center-center;
     }
+
     input {
       min-height: 32px;
       flex: auto;
     }
+
     @include mq-is-col1 {
       select {
         height: 32px;
       }
     }
+
     button {
       i {
         display: block;
@@ -112,9 +124,11 @@ body:has(.base-view.setup-view) {
       &.white i {
         background-image: url('../images/buttons/play-as-white.svg');
       }
+
       &.black i {
         background-image: url('../images/buttons/play-as-black.svg');
       }
+
       &.random i {
         background-image: url('../images/buttons/play-as-random.svg');
       }
@@ -123,40 +137,52 @@ body:has(.base-view.setup-view) {
 
   .params {
     @extend %flex-column;
+
     flex: auto;
     gap: 0.5em;
   }
+
   .actions {
     @extend %flex-center-center;
   }
+
   @include mq-is-col1 {
     .fen {
       display: none;
     }
   }
+
   @include mq-phone-landscape {
     flex-flow: row nowrap;
+
     .fen {
       display: none;
     }
+
     .main-content {
       width: 56%;
     }
+
     .from-position {
       gap: 0;
+
       .resets {
         padding: 4px;
+
         button {
           padding: 4px;
         }
       }
     }
+
     .chin {
       padding-top: 3em;
       width: 44%;
     }
+
     div.player {
       width: 38vh;
+
       .placard {
         display: none;
       }
diff --git a/ui/botDev/css/_edit-dialog.scss b/ui/botDev/css/_edit-dialog.scss
index 5e28d82013b..fd4362be114 100644
--- a/ui/botDev/css/_edit-dialog.scss
+++ b/ui/botDev/css/_edit-dialog.scss
@@ -7,35 +7,45 @@
   button {
     padding: 0.8em 0.8em;
   }
+
   textarea {
     white-space: pre-wrap;
     width: 100%;
     resize: none;
   }
+
   hr {
     margin: 0;
     flex: auto;
   }
+
   label {
     @extend %flex-center-nowrap;
+
     position: relative;
     flex: initial;
     gap: 12px;
   }
+
   canvas {
     min-height: 300px;
   }
+
   fieldset {
     @extend %flex-column, %box-radius;
+
     align-items: stretch;
     border: 1px solid $c-border;
     padding: 0.75em 0 1em;
     row-gap: 0.5em;
+
     > div {
       @extend %flex-column;
+
       align-items: stretch;
       row-gap: 0.5em;
     }
+
     &.disabled {
       padding: 0;
       border-left: none;
@@ -43,18 +53,23 @@
       border-bottom: none;
     }
   }
+
   legend {
     @extend %flex-center;
+
     z-index: $z-above-dialog-12; // get around safari z-index bug in legend / fieldset
     align-self: start;
     text-align: left;
     margin: 0 0.5em;
+
     > label {
       font-weight: bold;
     }
   }
+
   .deck {
     @extend %flex-between-nowrap;
+
     grid-area: deck;
     width: 100%;
     height: 100%;
@@ -66,11 +81,14 @@
       aspect-ratio: 1/1;
     }
   }
+
   .deck-legend {
     padding: 0.5em;
     row-gap: 0;
+
     label {
       @extend %flex-around;
+
       flex-wrap: nowrap;
       font-size: 12px;
       padding: 4px 12px;
@@ -98,23 +116,29 @@
     background: none;
     border: none;
     outline: none;
+
     &:hover {
       color: $c-bad;
     }
   }
+
   [data-action='remove'] {
     cursor: pointer;
     color: $c-bad;
+
     &:hover {
       color: $m-bad--lighten-11;
     }
   }
+
   [data-action='add'] {
     cursor: pointer;
     color: $c-secondary;
+
     &:hover {
       color: $m-secondary--lighten-11;
     }
+
     &.disabled {
       color: $c-border;
       pointer-events: none;
@@ -123,6 +147,7 @@
 
   .bot-card {
     @extend %flex-column;
+
     border-radius: 10px;
     gap: 1em;
     grid-area: info;
@@ -130,6 +155,7 @@
     > div {
       padding: 0;
     }
+
     .uid {
       z-index: $z-above-dialog-14;
       font-size: 1.5em;
@@ -138,14 +164,18 @@
       padding: 0 4px;
       color: $c-font-dim;
     }
+
     textarea {
       text-align: center;
     }
+
     .player {
       ---scale-factor: 0.8;
+
       aspect-ratio: 1/1;
       cursor: pointer;
     }
+
     .placard {
       padding: 0;
       width: 90%;
@@ -156,6 +186,7 @@
 
   .under-bot {
     @extend %flex-column;
+
     max-height: 30%;
     gap: 1em;
     overflow: auto;
@@ -163,6 +194,7 @@
 
   .bot-actions {
     @extend %flex-wrap;
+
     justify-content: end;
     align-items: start;
     gap: 1em;
@@ -179,28 +211,35 @@
       padding: 0;
     }
   }
+
   .setting {
     @extend %flex-center-nowrap;
+
     padding: 0 1em;
     width: 100%;
     gap: 1em;
+
     input[data-type] {
       width: 60px;
       flex-grow: 1;
     }
+
     &.disabled > input[data-type] {
       opacity: 0.5;
     }
   }
+
   .books,
   .sound-events {
     input[type='text'] {
       max-width: 5ch;
     }
   }
+
   .books {
     label img {
       @extend %box-radius-force, %popup-shadow;
+
       position: absolute;
       opacity: 0;
       pointer-events: none;
@@ -211,50 +250,64 @@
       transition: opacity 0.4s ease;
       z-index: $z-powertip-120;
     }
+
     label:hover img {
       opacity: 1;
     }
+
     .btn-rack {
       gap: 4px;
       border: none;
+
       button {
         padding: 0.6em;
         border: 1px solid $c-border;
       }
+
       button.active {
         border-color: $c-primary;
         outline: 4px solid $c-primary;
       }
+
       button[data-color='white'] {
         border-radius: 0 6px 6px 0;
         background: $c-paper;
       }
+
       button[data-color='black'] {
         border-radius: 6px 0 0 6px;
         background: $c-dark;
       }
     }
   }
+
   .sound-events {
     padding: 0.5em 1em;
+
     .hide-disabled {
       width: 100%;
     }
   }
+
   .sound-event > span > label {
     width: 100%;
   }
+
   .total-chance.invalid {
     color: $c-bad;
   }
+
   fieldset.sound {
     @extend %flex-between;
+
     flex-wrap: nowrap;
     padding: 0.25em 0.5em 0.5em;
+
     label {
       gap: 6px;
     }
   }
+
   .behavior,
   .filters {
     overflow-y: auto;
@@ -275,27 +328,34 @@
       display: none;
     }
   }
+
   .behavior {
     @extend %flex-column;
+
     grid-area: behavior;
     padding: 0 1em;
     min-width: 300px;
     justify-content: start;
     gap: 1em;
   }
+
   .filters {
     @extend %flex-column;
+
     min-width: 0;
     gap: 1em;
     grid-area: filters;
   }
+
   .filter {
     @extend %flex-column, %box-radius;
+
     label {
       flex-flow: row nowrap;
       height: 32px;
       padding-inline-start: 0.5em;
     }
+
     .graph-wrapper {
       border: 1px solid $c-border-light;
       position: relative;
@@ -303,19 +363,24 @@
       background: $c-paper;
       cursor: pointer;
       padding: 1em 1em 0.5em 0.5em;
+
       &.hidden {
         background: $m-paper_dimmer--mix-50;
+
         canvas {
           display: none;
         }
       }
     }
+
     .btn-rack {
       width: 100%;
       border: none;
     }
+
     .facet {
       @extend %flex-center-nowrap, %box-radius-top;
+
       z-index: $z-above-dialog-12;
       justify-content: center;
       background: $m-paper_dimmer--mix-50;
@@ -336,6 +401,7 @@
       &:last-child {
         margin-inline-end: 0;
       }
+
       &.active {
         background: $c-paper;
         margin-bottom: -1px;
@@ -352,6 +418,7 @@
       }
     }
   }
+
   .global-actions {
     display: flex;
     justify-content: end;
diff --git a/ui/botDev/css/_from-position.scss b/ui/botDev/css/_from-position.scss
index 228fe4a76d3..8abd5bbc858 100644
--- a/ui/botDev/css/_from-position.scss
+++ b/ui/botDev/css/_from-position.scss
@@ -7,6 +7,7 @@
     '. board .'
     '. spare-bottom .';
 }
+
 .board-editor .spare {
   @extend %box-radius;
 
diff --git a/ui/botDev/css/_hand-of-cards.scss b/ui/botDev/css/_hand-of-cards.scss
index d044f232645..5aff29fa565 100644
--- a/ui/botDev/css/_hand-of-cards.scss
+++ b/ui/botDev/css/_hand-of-cards.scss
@@ -3,6 +3,7 @@
 
   .card {
     @include prevent-select;
+
     cursor: pointer;
     position: absolute;
     border-radius: 6px;
@@ -15,10 +16,12 @@
       transform 0.3s ease,
       background-color 0.2s,
       border-color 0.2s;
+
     img {
       -webkit-touch-callout: none;
       width: calc(192px * var(---scale-factor, 1));
     }
+
     label {
       font-size: 1.3em;
       text-align: center;
@@ -29,6 +32,7 @@
       transform: translateX(-50%);
       display: none;
     }
+
     &.left label {
       font-weight: bold;
       text-align: start;
@@ -36,21 +40,26 @@
       left: 110%;
       transform: none;
     }
+
     &.dragging {
       transition: 0.05s;
+
       @media (hover: none) {
         z-index: $z-above-dialog-14;
         transition: none;
       }
     }
+
     &.selected {
       pointer-events: none;
       border-color: transparent;
       overflow: hidden;
     }
+
     &.hovered:not(&.selected) label {
       display: inline-block;
     }
+
     &:focus {
       background-color: $c-bad;
       outline: $c-primary solid 2px;
@@ -75,12 +84,13 @@
   width: 20px;
   top: 5px;
   right: 5px;
-
   cursor: pointer;
   filter: grayscale(1);
+
   &.show {
     display: block;
   }
+
   &:hover {
     filter: saturate(1);
   }
diff --git a/ui/botDev/css/_history-dialog.scss b/ui/botDev/css/_history-dialog.scss
index 0d963de6e4e..8f552a0ace7 100644
--- a/ui/botDev/css/_history-dialog.scss
+++ b/ui/botDev/css/_history-dialog.scss
@@ -9,40 +9,51 @@
 
   .versions {
     @extend %flex-column;
+
     overflow: auto;
     background: $c-bg-zebra;
     border: $c-border 1px solid;
     border-right: none;
     border-radius: 10px 0 0 10px;
   }
+
   .version {
     @extend %flex-center-nowrap;
+
     border-bottom: 1px solid $c-border;
     padding: 0.5em;
     gap: 1em;
     cursor: pointer;
+
     .author {
       @extend %flex-between-nowrap;
+
       width: 65%;
       font-size: 1em;
       color: $c-font;
     }
+
     .version-number {
       @extend %flex-center-nowrap;
+
       width: 20%;
       font-size: 1.2em;
       font-weight: bold;
     }
+
     span {
       pointer-events: none;
     }
+
     &:hover {
       background-color: $m-primary--alpha-30;
     }
+
     &.selected {
       background-color: $m-clas--alpha-30;
     }
   }
+
   .json {
     display: block;
     text-align: left;
@@ -62,19 +73,24 @@
       all: unset;
       display: inline;
     }
+
     .selected {
       background-color: $m-clas--alpha-30;
     }
+
     .hovered {
       background-color: $m-primary--alpha-30;
     }
+
     .selected + .hovered,
     .hovered + .selected {
       margin-left: 5px;
     }
   }
+
   .actions {
     @extend %flex-center;
+
     height: 64px;
     justify-content: end;
   }
diff --git a/ui/botDev/css/_json-dialog.scss b/ui/botDev/css/_json-dialog.scss
index f893fba1f5a..dcf8a42b5f0 100644
--- a/ui/botDev/css/_json-dialog.scss
+++ b/ui/botDev/css/_json-dialog.scss
@@ -1,5 +1,6 @@
 .json-dialog {
   @extend %flex-column;
+
   width: 1080px;
   height: 800px;
   padding-bottom: 0;
@@ -19,8 +20,10 @@
     font-size: 11px;
     white-space: pre;
   }
+
   .actions {
     @extend %flex-center;
+
     height: 64px;
     justify-content: end;
   }
diff --git a/ui/botDev/css/build/botDev.scss b/ui/botDev/css/build/botDev.scss
index 777ee2c398a..939a97a0a44 100644
--- a/ui/botDev/css/build/botDev.scss
+++ b/ui/botDev/css/build/botDev.scss
@@ -1,7 +1,6 @@
 @import '../../../lib/css/plugin';
 @import '../../../lib/css/form/range';
 @import '../../../lib/css/component/tabs-horiz';
-
 @import '../hand-of-cards';
 @import '../base-dialog';
 @import '../edit-dialog';
diff --git a/ui/botDev/css/build/botDev.setup.scss b/ui/botDev/css/build/botDev.setup.scss
index 361d3692198..5331b06518c 100644
--- a/ui/botDev/css/build/botDev.setup.scss
+++ b/ui/botDev/css/build/botDev.setup.scss
@@ -1,7 +1,6 @@
 @import '../../../lib/css/plugin';
 @import '../../../lib/css/form/range';
 @import '../../../lobby/css/setup';
-
 @import '../hand-of-cards';
 @import '../base-dialog';
 @import '../from-position';
diff --git a/ui/botPlay/css/build/botPlay.scss b/ui/botPlay/css/build/botPlay.scss
index 4e812410057..be82bb73da7 100644
--- a/ui/botPlay/css/build/botPlay.scss
+++ b/ui/botPlay/css/build/botPlay.scss
@@ -15,7 +15,6 @@
 @import '../../../lib/css/chess/variant-style';
 @import '../../../lib/css/chess/promotion';
 @import '../../../lib/css/chess/blindfold';
-
 @import '../colors';
 @import '../setup/layout';
 @import '../setup/card';
diff --git a/ui/botPlay/css/play/_clock.scss b/ui/botPlay/css/play/_clock.scss
index dbb07d75ade..6d6bc25eb0b 100644
--- a/ui/botPlay/css/play/_clock.scss
+++ b/ui/botPlay/css/play/_clock.scss
@@ -1,4 +1,5 @@
 @import '../../../lib/css/game/clock';
+
 .rclock .time {
   font-size: 2em;
 }
diff --git a/ui/botPlay/css/play/_layout.scss b/ui/botPlay/css/play/_layout.scss
index 6a8bb46cf08..8012c8511e6 100644
--- a/ui/botPlay/css/play/_layout.scss
+++ b/ui/botPlay/css/play/_layout.scss
@@ -33,23 +33,29 @@ $col1-moves-height: 4em;
       'moves moves'
       'voice voice'
       'kb-move kb-move';
+
     &__opponent {
       display: flex;
       align-items: flex-end;
+
       &__header {
         flex: 1;
       }
+
       &__image {
         max-height: calc($col1-player-clock-height + 6vh) !important;
         margin-right: $block-gap !important;
       }
     }
+
     &__clock--top {
       min-width: 30vw;
     }
+
     &__mat--bottom {
       padding: 0.3em 0 0 1em;
     }
+
     &__table {
       display: none;
     }
@@ -110,27 +116,35 @@ $col1-moves-height: 4em;
 .bot-game__opponent {
   grid-area: opponent;
 }
+
 .bot-game__moves {
   grid-area: moves;
 }
+
 .bot-game__nav {
   grid-area: nav;
 }
+
 .bot-game__actions {
   grid-area: actions;
 }
+
 .bot-game__board {
   grid-area: board;
 }
+
 .bot-game__mat--top {
   grid-area: mat-top;
 }
+
 .bot-game__clock--top {
   grid-area: clock-top;
 }
+
 .bot-game__clock--bottom {
   grid-area: clock-bottom;
 }
+
 .bot-game__mat--bottom {
   grid-area: mat-bottom;
 }
diff --git a/ui/botPlay/css/play/_opponent.scss b/ui/botPlay/css/play/_opponent.scss
index c6bd31169d4..b3e1bcc4abc 100644
--- a/ui/botPlay/css/play/_opponent.scss
+++ b/ui/botPlay/css/play/_opponent.scss
@@ -1,6 +1,7 @@
 .bot-game__opponent {
   &__header {
     @extend %flex-column;
+
     padding: 0.8em 0.6em 0.8em 1em;
   }
 
@@ -15,11 +16,14 @@
     font-weight: normal;
     color: var(--bot-color);
     font-size: 1.3em;
+
     @media (min-width: at-least($xx-small)) {
       font-size: 1.6em;
     }
+
     white-space: nowrap;
   }
+
   &__rating {
     color: $c-font-dim;
   }
diff --git a/ui/botPlay/css/play/_table.scss b/ui/botPlay/css/play/_table.scss
index 596fac4a422..b8fe3fb48d2 100644
--- a/ui/botPlay/css/play/_table.scss
+++ b/ui/botPlay/css/play/_table.scss
@@ -1,17 +1,22 @@
 .bot-game__table {
   @extend %box-neat;
+
   border-radius: $box-radius-size 0 $box-radius-size 0;
   background: $c-bg-box;
 }
+
 .bot-game__nav {
   @extend %box-shadow;
-  position: relative;
+
   $buttons-height: 2.5rem;
+
+  position: relative;
   flex: 0 0 $buttons-height;
   display: flex;
   justify-content: stretch;
   background: $c-bg-zebra;
   font-size: 0.9em;
+
   .fbt,
   .noop {
     flex: 0 0 calc(100% / 6);
@@ -19,16 +24,20 @@
     height: $buttons-height;
     line-height: calc($buttons-height - 0.1rem);
   }
+
   .board-menu {
     @include mq-at-least-col2 {
       @include box-radius-top;
+
       bottom: $buttons-height;
       border-bottom: 2px solid $c-secondary;
     }
   }
 }
+
 .bot-game__moves {
   @include prevent-select;
+
   height: 8em;
   display: flex;
   flex-flow: row wrap;
@@ -87,19 +96,23 @@
     margin-bottom: 0.5em;
   }
 }
+
 .bot-game__actions {
   @extend %flex-between;
+
   .bot-game__close,
   .bot-game__restart {
     font-size: 0.9em;
     padding: 0.7em 1.2em;
   }
+
   .bot-game__rematch {
     width: 100%;
     background: $m-primary_bg--mix-70;
     color: $c-over;
     padding: 1em 2em;
     font-size: 1.5em;
+
     &:hover {
       background: $c-primary;
     }
@@ -118,6 +131,7 @@
       margin-inline-start: -10px;
     }
   }
+
   score {
     margin-top: -2px;
   }
diff --git a/ui/botPlay/css/play/_zen.scss b/ui/botPlay/css/play/_zen.scss
index ef59e326a93..3700ea58438 100644
--- a/ui/botPlay/css/play/_zen.scss
+++ b/ui/botPlay/css/play/_zen.scss
@@ -13,6 +13,7 @@ body.zenable.zen {
   .bot-game__table__moves {
     display: none;
   }
+
   .bot-game__table__nav {
     @extend %box-radius-top;
   }
diff --git a/ui/botPlay/css/setup/_card.scss b/ui/botPlay/css/setup/_card.scss
index d6ecce3108d..c2f8d563809 100644
--- a/ui/botPlay/css/setup/_card.scss
+++ b/ui/botPlay/css/setup/_card.scss
@@ -1,12 +1,10 @@
 .bot-card {
   @extend %box-neat, %flex-column;
-
   @include transition(box-shadow);
 
   background: $c-bg-box;
   margin-top: 20%;
   cursor: pointer;
-
   border: 1px solid var(--bot-color);
 
   &--ongoing {
@@ -26,15 +24,18 @@
   }
 
   &__image {
+    @include transition(opacity);
+
     aspect-ratio: 1;
     width: 82%;
     margin: auto;
     margin-top: -20%;
     line-height: 0;
-    @include transition(opacity);
+
     .bot-card:hover & {
       opacity: 1;
     }
+
     // animate translateX back and forth once on hover
     .bot-card:hover & {
       animation: bot-card-image-hover 1s ease-in-out;
@@ -45,15 +46,19 @@
     0% {
       transform: translateX(0);
     }
+
     25% {
       transform: translateX(-4px);
     }
+
     50% {
       transform: translateX(4px);
     }
+
     75% {
       transform: translateX(-4px);
     }
+
     100% {
       transform: translateX(0);
     }
@@ -61,6 +66,7 @@
 
   &__content {
     @extend %box-radius-bottom;
+
     flex: 1;
     background: $c-bg-zebra;
     padding: 0 0.6em 0 0.8em;
@@ -69,15 +75,19 @@
 
   &__header {
     @extend %flex-center-center;
+
     gap: 1ch;
   }
+
   &__name {
     @include line-clamp(2);
+
     margin: 0.4em 0 0.2em 0;
     font-weight: normal;
     color: $c-font-clearer;
     font-size: 1.6em;
   }
+
   &__rating {
     color: $c-font-dim;
   }
diff --git a/ui/botPlay/css/setup/_dialog.scss b/ui/botPlay/css/setup/_dialog.scss
index 91b3ddd4156..18b4b8813f5 100644
--- a/ui/botPlay/css/setup/_dialog.scss
+++ b/ui/botPlay/css/setup/_dialog.scss
@@ -2,16 +2,17 @@
 
 .bot-setup dialog {
   animation: show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
-
   opacity: 0;
   transform: translate(-50%, calc(-50% - 30px));
 
   @media (max-width: at-most($small)) {
     width: 70%;
   }
+
   @media (max-width: at-most($x-small)) {
     width: 90%;
   }
+
   @media (max-width: at-most($xx-small)) {
     width: 100%;
   }
@@ -26,6 +27,7 @@
 
 .bot-setup__dialog {
   @extend %flex-column, %box-neat;
+
   gap: 2vh;
   filter: none;
   border: 1px solid var(--bot-color);
@@ -37,20 +39,24 @@
     margin-top: -30%;
     line-height: 0;
   }
+
   &__title {
     font-size: 3em;
     font-weight: bold;
     color: var(--bot-color);
     margin-top: -1vh;
   }
+
   &__desc {
     font-style: italic;
     font-size: 1.3em;
   }
+
   .button {
     padding: 2em 1em;
     background: var(--bot-color);
     background: hsl(from var(--bot-color) h calc(s - 10) calc(l - 10));
+
     &:not(.disabled):hover {
       background: hsl(from var(--bot-color) h s l);
     }
@@ -59,6 +65,7 @@
 
 .bot-setup__form {
   @extend %flex-column;
+
   gap: 1.5em;
   padding-bottom: 2em;
   text-align: left;
@@ -66,6 +73,7 @@
   .radio-pane,
   .label-select {
     @extend %flex-center;
+
     gap: 1em;
   }
 
@@ -81,6 +89,7 @@
       width: 100%;
     }
   }
+
   .time-choice {
     margin-top: 0.5rem;
   }
diff --git a/ui/botPlay/css/setup/_layout.scss b/ui/botPlay/css/setup/_layout.scss
index bf47526e5cb..eb6e679dd11 100644
--- a/ui/botPlay/css/setup/_layout.scss
+++ b/ui/botPlay/css/setup/_layout.scss
@@ -1,6 +1,7 @@
 .bot-setup {
   width: 85vw;
   max-width: 1000px;
+
   @media (max-width: at-most($x-small)) {
     width: 95vw;
   }
diff --git a/ui/botPlay/css/setup/_ongoing.scss b/ui/botPlay/css/setup/_ongoing.scss
index 54d1727ac20..0a90fdebf54 100644
--- a/ui/botPlay/css/setup/_ongoing.scss
+++ b/ui/botPlay/css/setup/_ongoing.scss
@@ -2,6 +2,7 @@ $height: 144px;
 
 .bot-setup__ongoing {
   @extend %flex-center-nowrap, %box-neat;
+
   background: $c-bg-zebra;
   margin: 2em 0;
   gap: 1em;
@@ -12,23 +13,28 @@ $height: 144px;
     0 0 5px $c-brag,
     0 0 20px $c-brag;
   color: $c-brag;
+
   &:hover {
     box-shadow:
       0 0 5px $c-link,
       0 0 20px $c-link;
     color: $c-link;
   }
+
   .mini-board {
     width: $height;
   }
+
   @media (max-width: at-most($x-small)) {
     .mini-board {
       display: none;
     }
   }
+
   cg-board {
     @extend %box-radius-left;
   }
+
   &__image {
     flex: 0 0 150px;
     aspect-ratio: 1;
diff --git a/ui/botPlay/css/setup/_setup.scss b/ui/botPlay/css/setup/_setup.scss
index dd3e673a9dc..eeabfd0f850 100644
--- a/ui/botPlay/css/setup/_setup.scss
+++ b/ui/botPlay/css/setup/_setup.scss
@@ -1,13 +1,16 @@
 .bot-setup {
   @extend %flex-column;
+
   gap: 2vmin;
   margin-top: 2vh;
 }
 
 .bot-setup__title {
   @extend %flex-center-center;
+
   .beta {
     @extend %box-radius;
+
     font-family: monospace;
     font-size: 0.5em;
     margin-inline-start: 0.5em;
@@ -19,9 +22,11 @@
 
 .bot-setup__bots {
   --min-card-width: 200px;
+
   @media (max-width: at-most($x-small)) {
     --min-card-width: 140px;
   }
+
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(var(--min-card-width), 1fr));
   gap: 3vmin;
@@ -30,10 +35,12 @@
 
   &--tier-best {
     grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+
     @media (max-width: at-most($xx-small)) {
       grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     }
   }
+
   &--tier-high {
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   }
diff --git a/ui/challenge/css/_challenge.scss b/ui/challenge/css/_challenge.scss
index 845188cc239..07700d21521 100644
--- a/ui/challenge/css/_challenge.scss
+++ b/ui/challenge/css/_challenge.scss
@@ -1,5 +1,6 @@
 #challenge-app {
   @extend %box-radius-left, %dropdown-shadow;
+
   overflow: hidden scroll;
   max-height: 90vh;
   width: 300px;
@@ -33,6 +34,7 @@
 
     .buttons {
       @extend %flex-between-nowrap;
+
       align-items: stretch;
 
       @media (hover: hover) {
diff --git a/ui/challenge/css/_page.scss b/ui/challenge/css/_page.scss
index a5d9147fe69..0a203e922f5 100644
--- a/ui/challenge/css/_page.scss
+++ b/ui/challenge/css/_page.scss
@@ -10,18 +10,21 @@
 
     > div {
       @extend %box-neat;
+
       padding: $block-gap;
       background: $c-bg-zebra;
     }
 
     &__qrcode {
       @extend %flex-between-nowrap;
+
       gap: $block-gap;
     }
 
     &__user {
       &__recent {
         @extend %flex-center;
+
         margin-top: 1em;
         gap: 0.5em;
 
@@ -90,6 +93,7 @@
 
       > div {
         flex: 0 1 auto;
+
         @extend %flex-center, %roboto;
 
         &::before {
@@ -125,6 +129,7 @@
 
       > div {
         @extend %flex-center;
+
         gap: 1em;
         margin-top: 1em;
 
@@ -142,6 +147,7 @@
 
   .mobile-instructions {
     @extend %flex-center-center;
+
     font-size: 1.5rem;
   }
 
diff --git a/ui/cli/css/_clinput.scss b/ui/cli/css/_clinput.scss
index 413663abcd2..0c7e05dbd35 100644
--- a/ui/cli/css/_clinput.scss
+++ b/ui/cli/css/_clinput.scss
@@ -60,6 +60,7 @@ body.clinput #top {
   .complete-result--menu {
     &::before {
       @extend %data-icon;
+
       content: $licon-GreaterThan;
       display: inline-block;
       text-align: center;
@@ -67,6 +68,7 @@ body.clinput #top {
       color: $c-link;
       opacity: 0.5;
     }
+
     &:has(+ .user-link) {
       border-bottom: $border;
     }
diff --git a/ui/coordinateTrainer/css/_coordinateTrainer.scss b/ui/coordinateTrainer/css/_coordinateTrainer.scss
index 577c5a0068c..de26d2b7548 100644
--- a/ui/coordinateTrainer/css/_coordinateTrainer.scss
+++ b/ui/coordinateTrainer/css/_coordinateTrainer.scss
@@ -57,8 +57,10 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+
     &--color {
       flex-flow: row;
+
       i {
         width: 60px;
         height: 60px;
@@ -96,6 +98,7 @@
 
   .back {
     @extend %flex-column;
+
     align-items: center;
     margin-top: $block-gap;
   }
@@ -107,9 +110,12 @@
 
   .progress {
     @extend %box-radius;
+
     background-color: $c-bg-zebra;
+
     &__bar {
       @extend %box-radius;
+
       width: 100%;
       height: 10px;
       background-color: $c-secondary;
@@ -118,6 +124,7 @@
 
   .table {
     @extend %flex-column;
+
     align-items: center;
     justify-content: space-around;
     gap: 1em;
@@ -154,15 +161,19 @@
 
   .keyboard-container {
     @extend %flex-between;
+
     grid-area: keyboard;
     width: 100%;
+
     a {
       margin-right: 2vw;
     }
+
     input.keyboard {
       width: 4em;
       margin-inline-end: 1em;
     }
+
     &.hidden {
       display: none;
     }
@@ -177,6 +188,7 @@
     display: grid;
     width: 100%;
     grid-template-columns: repeat(8, 1fr);
+
     button.file-rank {
       height: 3em;
       border-width: 3px;
@@ -186,11 +198,13 @@
 
   .side {
     @extend %flex-column;
+
     gap: $block-gap;
   }
 
   .settings {
     @extend %flex-column;
+
     gap: $block-gap;
   }
 }
diff --git a/ui/coordinateTrainer/css/_layout.scss b/ui/coordinateTrainer/css/_layout.scss
index 725c560cb38..925128b6d31 100644
--- a/ui/coordinateTrainer/css/_layout.scss
+++ b/ui/coordinateTrainer/css/_layout.scss
@@ -27,9 +27,12 @@
 .trainer {
   grid-area: main;
   display: grid;
+  grid-template-areas: 'board' 'progress' 'co-input' 'table' 'side';
+  row-gap: $block-gap;
 
   .side {
     @extend %zen;
+
     grid-area: side;
   }
 
@@ -47,6 +50,7 @@
 
   .progress {
     @extend %zen;
+
     grid-area: progress;
   }
 
@@ -54,9 +58,6 @@
     grid-area: co-input;
   }
 
-  grid-template-areas: 'board' 'progress' 'co-input' 'table' 'side';
-  row-gap: $block-gap;
-
   @include mq-at-least-col2 {
     grid-template-columns: var(---col2-uniboard-width) $block-gap $col2-uniboard-table;
     grid-template-rows: fit-content(0);
diff --git a/ui/coordinateTrainer/css/_svgAnimation.scss b/ui/coordinateTrainer/css/_svgAnimation.scss
index 667bc0295bd..7a7d62ab842 100644
--- a/ui/coordinateTrainer/css/_svgAnimation.scss
+++ b/ui/coordinateTrainer/css/_svgAnimation.scss
@@ -10,6 +10,7 @@ $timing: 150ms;
 
 svg.coords-svg {
   @include prevent-select;
+
   z-index: 3;
   width: 100%;
   height: 100%;
@@ -52,24 +53,29 @@ svg.coords-svg {
       transform: translate3d($next-x, $next-y, 0);
       opacity: $next-opacity;
     }
+
     to {
       transform: translate3d($current-x, $current-y, 0);
       opacity: $current-opacity;
     }
   }
+
   @keyframes enlarge-current {
     from {
       font-size: $next-font-size;
     }
+
     to {
       font-size: $current-font-size;
     }
   }
+
   @keyframes slide-in-next {
     from {
       transform: translate3d($next-x + 20px, $next-y, 0);
       opacity: 0;
     }
+
     to {
       transform: translate3d($next-x, $next-y, 0);
       opacity: $next-opacity;
@@ -90,9 +96,11 @@ rect.current-target {
   0% {
     transform: scale(1);
   }
+
   50% {
     transform: scale(1.4);
   }
+
   100% {
     transform: scale(1);
   }
diff --git a/ui/dasher/css/_board.scss b/ui/dasher/css/_board.scss
index 06139132609..fd971220a96 100644
--- a/ui/dasher/css/_board.scss
+++ b/ui/dasher/css/_board.scss
@@ -18,6 +18,7 @@
     display: block;
     width: 64px;
     height: 32px;
+
     body:not(.simple-board) & {
       filter: hue-rotate(calc(var(---board-hue) * 3.6deg));
     }
@@ -37,6 +38,7 @@
 
   .reset {
     padding: 0.5rem 1rem;
+
     &:hover {
       color: $c-primary;
     }
@@ -46,6 +48,7 @@
     display: flex;
     justify-content: stretch;
   }
+
   .zoom,
   .board-brightness,
   .board-contrast,
@@ -55,6 +58,7 @@
     grid-template-columns: 45% 55%;
     align-items: center;
     padding: 0.5rem 1rem;
+
     label {
       white-space: nowrap;
     }
diff --git a/ui/dasher/css/_dasher.scss b/ui/dasher/css/_dasher.scss
index b7e7211f10a..0900b3922f2 100644
--- a/ui/dasher/css/_dasher.scss
+++ b/ui/dasher/css/_dasher.scss
@@ -22,8 +22,9 @@
     border-top: $border;
 
     signal {
-      position: absolute;
       @include inline-end(1rem);
+
+      position: absolute;
       top: 1rem;
       font-size: 1.7rem;
     }
@@ -91,6 +92,7 @@
 
       &:hover {
         @extend %box-radius-bottom;
+
         background: $c-link;
         color: $c-over;
       }
@@ -208,6 +210,7 @@
 
   .button.more {
     @extend %box-radius-bottom;
+
     width: 100%;
     color: $c-over;
     font-size: 1.2em;
@@ -234,9 +237,11 @@
     #images-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
+
       @media (min-width: at-least($x-small)) {
         grid-template-columns: repeat(4, 1fr);
       }
+
       background-attachment: scroll;
 
       div {
diff --git a/ui/dasher/css/_link.scss b/ui/dasher/css/_link.scss
index fc520f0cb22..8943504bcba 100644
--- a/ui/dasher/css/_link.scss
+++ b/ui/dasher/css/_link.scss
@@ -23,9 +23,11 @@
 
   .links .line {
     width: auto;
+
     &::before {
       display: inline-block;
       margin-inline: 0 0.4em;
+
       @include if-rtl {
         transform: scaleX(-1);
       }
diff --git a/ui/dasher/css/_piece.scss b/ui/dasher/css/_piece.scss
index ac3e8121798..063c98dc6ff 100644
--- a/ui/dasher/css/_piece.scss
+++ b/ui/dasher/css/_piece.scss
@@ -1,15 +1,14 @@
 #dasher_app {
   .piece {
     piece {
+      @include inline-start(0);
+
       position: absolute;
       width: 100%;
       height: 100%;
       top: 0;
-      @include inline-start(0);
       background-size: cover;
-      z-index: 2;
-
-      /* no less than 2 */
+      z-index: 2; // no less than 2
       pointer-events: none;
     }
 
diff --git a/ui/dgt/css/_dgt.scss b/ui/dgt/css/_dgt.scss
index e9d8b3a2c80..ebd1875a88c 100644
--- a/ui/dgt/css/_dgt.scss
+++ b/ui/dgt/css/_dgt.scss
@@ -2,8 +2,10 @@
   h1 {
     color: $c-accent;
   }
+
   &__play__help {
     margin-top: 3rem;
+
     h2 {
       font-size: 1.4em;
       margin-bottom: 1rem;
@@ -16,6 +18,7 @@
   height: 60vh;
   padding: 2em;
   background: #333;
+
   &-log {
     font-family: monospace;
     font-size: 1.2em;
@@ -25,26 +28,33 @@
 .log-warn {
   color: orange;
 }
+
 .log-error {
   color: red;
 }
+
 .log-info {
   color: skyblue;
 }
+
 .log-log {
   color: silver;
 }
+
 .log-table {
   color: cyan;
 }
+
 .log-warn,
 .log-error {
   font-weight: bold;
 }
+
 .dgt-black-move {
   color: brown;
   font-size: xx-large;
 }
+
 .dgt-white-move {
   color: tan;
   font-size: xx-large;
diff --git a/ui/editor/css/_editor.scss b/ui/editor/css/_editor.scss
index b9ced01ea55..cb6a4c0f930 100644
--- a/ui/editor/css/_editor.scss
+++ b/ui/editor/css/_editor.scss
@@ -1,7 +1,6 @@
 @import 'layout';
 @import 'spare';
 @import 'tools';
-
 @include body-fixed-scroll;
 
 .board-editor {
@@ -21,7 +20,9 @@
 
     p {
       @extend %flex-center-nowrap;
+
       gap: 1em;
+
       > *:not(strong) {
         flex: 1 1 auto;
       }
diff --git a/ui/editor/css/_spare.scss b/ui/editor/css/_spare.scss
index e546a7d9aa3..6945f7f8f11 100644
--- a/ui/editor/css/_spare.scss
+++ b/ui/editor/css/_spare.scss
@@ -79,7 +79,9 @@
       /* original size: width: 140.625%; height: 179.6875%; size on 3D board, with height/width = 90.78571% */
       width: 100%;
       height: 140.7465%;
+
       @include inline-start(0);
+
       top: -34%;
     }
   }
diff --git a/ui/editor/css/_tools.scss b/ui/editor/css/_tools.scss
index 11ae8d193b0..6081dfc2241 100644
--- a/ui/editor/css/_tools.scss
+++ b/ui/editor/css/_tools.scss
@@ -62,6 +62,7 @@
           margin: 3px;
           vertical-align: middle;
         }
+
         input.not-allowed {
           visibility: hidden;
         }
@@ -69,10 +70,13 @@
 
       .enpassant {
         @extend %flex-between;
+
         margin-top: 1em;
+
         label {
           font-weight: bold;
         }
+
         select {
           width: 9ch;
         }
@@ -80,6 +84,7 @@
 
       .chess960-position-row {
         @extend %flex-center-nowrap;
+
         gap: 0.5rem;
       }
 
diff --git a/ui/fide/css/_card.scss b/ui/fide/css/_card.scss
index b88253585f6..e913c7f83f3 100644
--- a/ui/fide/css/_card.scss
+++ b/ui/fide/css/_card.scss
@@ -3,18 +3,23 @@
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   gap: 1em;
   font-size: 1.5em;
+
   @media (min-width: at-least($x-small)) {
     grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
     font-size: 1.8em;
   }
 }
+
 .fide-card {
   @extend %box-neat, %flex-column;
+
   gap: 1em;
   background: $c-bg-zebra;
   padding: 1.5em 1em;
+
   em {
     @extend %roboto;
+
     text-transform: uppercase;
     color: $c-font-dim;
   }
diff --git a/ui/fide/css/_federation.scss b/ui/fide/css/_federation.scss
index 48e7bdadff6..667c2ee5fc7 100644
--- a/ui/fide/css/_federation.scss
+++ b/ui/fide/css/_federation.scss
@@ -4,29 +4,37 @@
   &__head {
     justify-content: flex-start;
     gap: 2em;
+
     .flag {
       @extend %box-radius;
+
       height: 5em;
       width: 5em;
     }
   }
+
   &__cards {
     margin-bottom: var(---box-padding);
   }
+
   &__card {
     div {
       width: 100%;
     }
+
     p {
       @extend %flex-between;
+
       color: $c-font-dim;
       font-size: 1.2rem;
       margin-bottom: 0.5em;
     }
+
     strong {
       color: $c-brag;
     }
   }
+
   &__kosovo {
     font-size: 0.8em;
     color: $c-font-dim;
@@ -41,6 +49,7 @@
     margin-right: 1em;
     vertical-align: middle;
   }
+
   a {
     font-weight: bold;
   }
diff --git a/ui/fide/css/_list.scss b/ui/fide/css/_list.scss
index 6c36b79eaab..d638be9ed63 100644
--- a/ui/fide/css/_list.scss
+++ b/ui/fide/css/_list.scss
@@ -4,6 +4,7 @@
   a {
     font-weight: bold;
   }
+
   &__search {
     &-form {
       flex: 2 1 auto;
@@ -33,13 +34,16 @@
 .fide-players-table--sortable {
   th {
     padding: 0;
+
     a {
       color: $c-font-dim;
       font-weight: normal;
       padding: 0.5em 0.8em;
+
       &:hover {
         color: $c-brag;
       }
+
       &.active {
         font-weight: bold;
         color: $c-brag;
diff --git a/ui/fide/css/_ratings.scss b/ui/fide/css/_ratings.scss
index 4b86c4ee787..77c7ed89062 100644
--- a/ui/fide/css/_ratings.scss
+++ b/ui/fide/css/_ratings.scss
@@ -1,28 +1,38 @@
 .fide-player__ratings {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+
   @media (min-width: at-least($x-small)) {
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   }
+
   gap: 1rem;
+
   @include fluid-size('font-size', 14px, 24px);
 }
+
 .fide-player__rating {
   @extend %box-neat-force, %flex-column;
+
   align-items: center;
   justify-content: space-between;
+  background: $c-bg-zebra;
+
   > div {
     @extend %flex-between-nowrap;
+
     width: 100%;
     padding: 1em 0.8em 0 0.8em;
     line-height: 0.3em; // for wrapping
   }
-  background: $c-bg-zebra;
+
   em {
     @extend %roboto;
+
     text-transform: uppercase;
     color: $c-font-dim;
   }
+
   &__history {
     aspect-ratio: 2; // also in JS
   }
diff --git a/ui/fide/css/_show.scss b/ui/fide/css/_show.scss
index 1c67809cf17..fb8d4e50277 100644
--- a/ui/fide/css/_show.scss
+++ b/ui/fide/css/_show.scss
@@ -2,17 +2,24 @@
 
 .fide-player {
   @extend %flex-column;
+
   gap: 2em;
+
   &__photo {
     @extend %flex-column;
+
     flex: 0 2 300px;
+
     img {
       @extend %box-neat;
+
       aspect-ratio: 1;
       display: block;
       max-width: 300px;
     }
+
     gap: 3px;
+
     &__credit {
       color: $c-font-dim;
       font-style: italic;
@@ -20,50 +27,64 @@
       text-align: center;
     }
   }
+
   &__header {
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
     gap: 2em;
+
     &__name {
       @extend %flex-between;
       @include fluid-size('font-size', 18px, 38px);
+
       align-items: center;
       gap: 1em;
     }
+
     &__info {
       @extend %flex-column;
+
       gap: 2em;
       flex: 2 0 220px;
     }
+
     &__table {
       border: none !important;
+
       tr {
         background: none !important;
       }
+
       td {
         font-size: 1.5em;
         padding: 0.4em 0.5em;
       }
     }
   }
+
   &__follow {
     @extend %flex-center-nowrap, %box-radius;
+
     width: fit-content;
     gap: 1ch;
     cursor: pointer;
     border: $border;
     padding: 0.5em 1em;
     background: $m-brag--fade-90;
+
     &:hover {
       border-color: $c-brag;
     }
   }
+
   &__user {
     font-size: 0.7em;
   }
+
   &__federation {
     @extend %flex-center-nowrap;
+
     .flag {
       height: 1em;
       width: 1em;
@@ -71,14 +92,17 @@
       vertical-align: middle;
     }
   }
+
   &__tours {
     h2 {
       margin-bottom: 1em;
     }
   }
+
   .toggle-box {
     margin: -1.5rem 0 -1rem 0;
   }
+
   .toggle-box--toggle-off {
     opacity: 0.6;
     font-size: 0.5em;
diff --git a/ui/fide/css/_table.scss b/ui/fide/css/_table.scss
index 3cc1743e835..d3382c7fa16 100644
--- a/ui/fide/css/_table.scss
+++ b/ui/fide/css/_table.scss
@@ -3,39 +3,52 @@
     padding-top: 0.7rem;
     padding-bottom: 0.7rem;
   }
+
   .fide-players__photo {
     @extend %box-radius;
+
     width: 50px;
     height: 50px;
   }
+
   .fide-players__photo--fallback {
     opacity: 0.5;
   }
+
   .player-intro {
     @extend %flex-center-nowrap;
+
     gap: 1em;
+
     &__photo {
       line-height: 0;
     }
+
     &__info {
       @extend %flex-column;
+
       gap: 0.2em;
     }
+
     &__name {
       white-space: nowrap;
       color: $c-font;
       font-size: 1.1em;
     }
+
     &__fed {
       @extend %flex-center-nowrap, %roboto;
+
       white-space: nowrap;
       font-size: 0.9em;
       gap: 0.5em;
+
       .flag {
         height: 1.2em;
         width: 1.2em;
         margin-inline-end: 0;
       }
+
       .mini-game__flag {
         margin-inline-end: 0;
       }
diff --git a/ui/insight/css/_filters.scss b/ui/insight/css/_filters.scss
index a252ac2d984..1c39fda3775 100644
--- a/ui/insight/css/_filters.scss
+++ b/ui/insight/css/_filters.scss
@@ -25,11 +25,11 @@
   }
 
   .ms-choice {
+    @include transition;
+
     padding: 15px 10px;
     border-width: 0 0 1px 0;
 
-    @include transition;
-
     &.selected {
       background: $m-primary_bg--mix-20;
       border-left: 3px solid $c-link;
@@ -37,9 +37,11 @@
 
     span {
       text-align: right;
+
       @media (max-width: at-most($x-small)) {
         text-align: left;
       }
+
       line-height: 30px;
       background: none;
     }
@@ -55,11 +57,13 @@
   }
 
   .ms-drop {
+    top: 0;
     margin-inline-start: 99%;
+
     @media (max-width: at-most($x-small)) {
       margin-inline-start: 50%;
     }
-    top: 0;
+
     @include inline-start(0);
   }
 }
diff --git a/ui/insight/css/_insight.scss b/ui/insight/css/_insight.scss
index 113b1ff87e6..536a0429665 100644
--- a/ui/insight/css/_insight.scss
+++ b/ui/insight/css/_insight.scss
@@ -38,7 +38,9 @@
       height: 2px;
       position: absolute;
       width: 96%;
+
       @include inline-start(2%);
+
       bottom: -2px;
 
       @include transition(all, 0.25s);
@@ -69,9 +71,9 @@
 
     .spinner {
       @extend %abs-100, %flex-center;
+      @include inline-start(0);
 
       top: 0;
-      @include inline-start(0);
       height: var(---chart-height);
       opacity: 0.7;
 
@@ -125,10 +127,12 @@
   header {
     @extend %box-radius-top;
     @extend %flex-between;
+
     padding: 0 1vw;
     flex-wrap: nowrap;
     height: var(---header-height);
     background: $c-bg-zebra;
+
     h2 {
       line-height: var(---header-height);
     }
@@ -161,6 +165,7 @@
 
   .axis-form .by {
     margin: 0 8px;
+
     @media (max-width: at-most(400px)) {
       display: none;
     }
@@ -168,10 +173,12 @@
 
   .axis-form .ms-choice {
     padding: calc(var(---header-height) / 2) 10px;
+
     @media (max-width: at-most($xx-small)) {
       padding-left: 2px;
       padding-right: 2px;
     }
+
     border-width: 0 1px;
     border-radius: 0;
     transition: 0.15s;
@@ -307,13 +314,16 @@
 
   .box {
     @extend %box-radius-bottom;
+
     overflow: visible;
+
     .top {
       @extend %metal, %box-radius-top;
 
       padding: 1rem $block-gap;
       font-weight: bold;
       border-bottom: $border;
+
       .utitle {
         margin-right: 3px;
       }
@@ -346,14 +356,18 @@
 
   .tutor-link {
     @extend %flex-center, %box-neat;
+
     padding: 0.5em 1em;
     gap: 1em;
+
     img {
       height: 3em;
     }
+
     > span {
       @extend %flex-column;
     }
+
     background: $m-primary_bg--mix-10;
     border: 1px solid $c-primary;
     margin-bottom: 1em;
@@ -392,7 +406,6 @@
 
     a {
       @extend %box-radius;
-
       @include transition(background);
 
       color: $c-font;
diff --git a/ui/keyboardMove/css/_keyboardMove.scss b/ui/keyboardMove/css/_keyboardMove.scss
index 45f55e4ba78..467c57a56a8 100644
--- a/ui/keyboardMove/css/_keyboardMove.scss
+++ b/ui/keyboardMove/css/_keyboardMove.scss
@@ -1,5 +1,6 @@
 .keyboard-move {
   @extend %flex-center-nowrap;
+
   height: fit-content;
 
   input {
diff --git a/ui/learn/css/_board.scss b/ui/learn/css/_board.scss
index d894db2ac1c..2832a4245bb 100644
--- a/ui/learn/css/_board.scss
+++ b/ui/learn/css/_board.scss
@@ -9,6 +9,7 @@
     0% {
       scale: 1;
     }
+
     50% {
       scale: 1.08;
     }
@@ -55,7 +56,9 @@
     content: '';
     position: absolute;
     bottom: 12.5%;
+
     @include inline-start(0);
+
     box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
     background-color: rgba(255, 255, 255, 0.2);
     animation: 1s rank-glow ease-in-out infinite;
@@ -75,7 +78,9 @@
     background: $c-bg-popup;
     position: absolute;
     top: 25%;
+
     @include inline-start(25%);
+
     width: 50%;
     height: 50%;
     padding: 20px;
@@ -91,9 +96,10 @@
   }
 
   .piece-values cg-board piece::before {
+    @include inline-end(4px);
+
     position: absolute;
     top: 14px;
-    @include inline-end(4px);
     color: #fff;
     text-shadow:
       0 0 9px rgba(0, 0, 0, 1),
diff --git a/ui/learn/css/_map.scss b/ui/learn/css/_map.scss
index 3920f9ec5b9..abbe8cb9cee 100644
--- a/ui/learn/css/_map.scss
+++ b/ui/learn/css/_map.scss
@@ -110,6 +110,7 @@
       overflow: hidden;
       position: absolute;
       top: -3px;
+
       @include inline-end(-3px);
     }
   }
@@ -121,12 +122,16 @@
     text-align: center;
     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
     transform: rotate(45deg);
+
     @include if-rtl {
       transform: rotate(-45deg);
     }
+
     position: relative;
     padding: 7px 0;
+
     @include inline-start(-5px);
+
     top: 15px;
     width: 120px;
     color: #6a6340;
@@ -184,6 +189,7 @@
 
   .what_next > p {
     @extend %page-text-shadow !optional;
+
     width: 100%;
     text-align: center;
     margin: 0.5em 0 1.5em;
diff --git a/ui/learn/css/_screen.scss b/ui/learn/css/_screen.scss
index 72ddae73ccb..c99529129f4 100644
--- a/ui/learn/css/_screen.scss
+++ b/ui/learn/css/_screen.scss
@@ -82,9 +82,10 @@
   }
 
   .stars .star-wrap::before {
+    @include inline-start(5px);
+
     position: absolute;
     top: 5px;
-    @include inline-start(5px);
     display: block;
     width: 45px;
     height: 45px;
diff --git a/ui/learn/css/_side-home.scss b/ui/learn/css/_side-home.scss
index ce793f4dd20..30b7b290542 100644
--- a/ui/learn/css/_side-home.scss
+++ b/ui/learn/css/_side-home.scss
@@ -80,7 +80,9 @@
   .progress .text {
     position: absolute;
     top: 0;
+
     @include inline-start(0);
+
     width: 100%;
     line-height: 30px;
     z-index: 3;
diff --git a/ui/learn/css/_side-map.scss b/ui/learn/css/_side-map.scss
index e429227941f..adaeeedbf79 100644
--- a/ui/learn/css/_side-map.scss
+++ b/ui/learn/css/_side-map.scss
@@ -60,7 +60,6 @@
 
   .stage {
     @extend %roboto, %flex-center;
-
     @include transition;
 
     font-size: 1.1em;
diff --git a/ui/learn/css/_table.scss b/ui/learn/css/_table.scss
index 1a47f1f37d2..0c22795c7b2 100644
--- a/ui/learn/css/_table.scss
+++ b/ui/learn/css/_table.scss
@@ -40,6 +40,7 @@
 
   .result {
     @extend %flex-center-center;
+
     flex-flow: column nowrap;
     border: $border;
     border-top: none;
diff --git a/ui/lib/css/_embed.scss b/ui/lib/css/_embed.scss
index ffdb809bf06..c816c38b402 100644
--- a/ui/lib/css/_embed.scss
+++ b/ui/lib/css/_embed.scss
@@ -5,8 +5,6 @@
 @import 'base/typography';
 @import 'base/data-icon';
 @import 'base/ltr';
-
-@include theme-style;
-
 @import 'theme/board/chessground';
 @import 'layout/vars';
+@include theme-style;
diff --git a/ui/lib/css/abstract/_box.scss b/ui/lib/css/abstract/_box.scss
index a948fdac181..a2703d8cde7 100644
--- a/ui/lib/css/abstract/_box.scss
+++ b/ui/lib/css/abstract/_box.scss
@@ -5,6 +5,7 @@
 /* helps with clipping background into border-radius */
 %box-radius-force {
   @extend %box-radius;
+
   overflow: hidden;
 }
 
diff --git a/ui/lib/css/abstract/_dir.scss b/ui/lib/css/abstract/_dir.scss
index 27f70086f21..86e0f447480 100644
--- a/ui/lib/css/abstract/_dir.scss
+++ b/ui/lib/css/abstract/_dir.scss
@@ -14,6 +14,7 @@
   @include if-ltr {
     left: $x;
   }
+
   @include if-rtl {
     right: $x;
   }
@@ -23,6 +24,7 @@
   @include if-ltr {
     right: $x;
   }
+
   @include if-rtl {
     left: $x;
   }
diff --git a/ui/lib/css/abstract/_extends.scss b/ui/lib/css/abstract/_extends.scss
index 7d11339cca5..cfa49342fa4 100644
--- a/ui/lib/css/abstract/_extends.scss
+++ b/ui/lib/css/abstract/_extends.scss
@@ -24,6 +24,7 @@
 
   draw {
     @extend %roboto;
+
     margin-inline-start: 1ch;
     font-weight: normal;
   }
@@ -48,7 +49,6 @@
 
 %page-link {
   @extend %page-link-font !optional;
-
   @extend %page-text-shadow !optional;
 }
 
@@ -139,6 +139,7 @@
   @include if-transp {
     @include back-blur;
   }
+
   box-shadow: -1px 5px 6px rgba(0, 0, 0, 0.3);
 }
 
@@ -146,6 +147,7 @@
   @include if-transp {
     @include back-blur;
   }
+
   box-shadow:
     0 14px 28px rgba(0, 0, 0, 0.25),
     0 10px 10px rgba(0, 0, 0, 0.22);
diff --git a/ui/lib/css/abstract/_media-queries.scss b/ui/lib/css/abstract/_media-queries.scss
index 874d11df235..50bb240d822 100644
--- a/ui/lib/css/abstract/_media-queries.scss
+++ b/ui/lib/css/abstract/_media-queries.scss
@@ -3,76 +3,91 @@
     @content;
   }
 }
+
 @mixin mq-phone-landscape {
   @media (max-height: at-most($tall)) and (orientation: landscape) {
     @content;
   }
 }
+
 @mixin mq-at-least-col2 {
   @media (min-width: at-least($small)), (orientation: landscape) {
     @content;
   }
 }
+
 @mixin mq-is-col2-squeeze {
   @media (max-width: at-most($small)) and (orientation: landscape) {
     @content;
   }
 }
+
 @mixin mq-at-least-col3 {
   @media (min-width: at-least($x-large)) {
     @content;
   }
 }
+
 @mixin mq-less-than-col3 {
   @media (max-width: at-most($x-large)) {
     @content;
   }
 }
+
 @mixin mq-site-header-tall {
   @media (min-height: at-least($tall)) {
     @content;
   }
 }
+
 @mixin mq-topnav-hidden {
   @media (max-width: at-most($topnav-visible)) {
     @content;
   }
 }
+
 @mixin mq-topnav-visible {
   @media (min-width: at-least($topnav-visible)) {
     @content;
   }
 }
+
 @mixin mq-topnav-visible-and-tall {
   @media (min-width: at-least($topnav-visible)) and (min-height: at-least($tall)) {
     @content;
   }
 }
+
 @mixin mq-sticky-header {
   @media (prefers-reduced-motion: no-preference) and (min-height: $tall) {
     @content;
   }
 }
+
 @mixin mq-subnav-top {
   @media (max-width: at-most($small)) {
     @content;
   }
 }
+
 @mixin mq-subnav-side {
   @media (min-width: at-least($small)) {
     @content;
   }
 }
+
 @mixin mq-zoom-enabled {
   @media (min-width: at-least($small)) and (min-height: at-least($short)) {
     @content;
   }
 }
+
 @mixin mq-board-resizable {
   @media (min-width: at-least($small)) {
     @content;
   }
 }
+
 @mixin mq-safari {
   @supports (-webkit-touch-callout: none) {
     @content;
diff --git a/ui/lib/css/abstract/_mixins.scss b/ui/lib/css/abstract/_mixins.scss
index 3d4ca648030..77b2964937c 100644
--- a/ui/lib/css/abstract/_mixins.scss
+++ b/ui/lib/css/abstract/_mixins.scss
@@ -23,10 +23,11 @@
     display: none;
 
     @include mq-zoom-enabled {
+      @include inline-end(3px);
+
       display: block;
       position: fixed;
       bottom: 3px;
-      @include inline-end(3px);
       width: 10vw;
     }
   }
@@ -35,9 +36,11 @@
 @mixin transition($prop: all, $dur: $transition-duration, $timing: ease) {
   @if type-of($prop) == 'list' and length($prop) > 1 {
     $out: ();
+
     @for $i from 1 through length($prop) {
       $out: append($out, nth($prop, $i) $dur $timing, comma);
     }
+
     transition: $out;
   } @else {
     transition: $prop $dur $timing;
@@ -47,6 +50,7 @@
 @mixin hoverflow {
   scrollbar-gutter: stable;
   overflow-y: auto;
+
   @media (hover: hover) {
     &:not(:hover) {
       overflow: hidden;
@@ -107,6 +111,7 @@
     background: unset;
     border-bottom-color: transparent;
     transform: unset;
+
     ---site-header-sticky-padding: 0;
 
     #topnav,
@@ -117,6 +122,7 @@
       transition: unset;
     }
   }
+
   #main-wrap {
     margin-top: var(---sticky-gap);
   }
@@ -126,8 +132,10 @@
   display: block;
   position: relative;
   aspect-ratio: $aspect-ratio;
+
   &::after {
     @extend %flex-center-center;
+
     content: attr(alt);
     position: absolute;
     top: 0;
diff --git a/ui/lib/css/abstract/_patron-colors.scss b/ui/lib/css/abstract/_patron-colors.scss
index 44ec01d89fb..808dc5c1f60 100644
--- a/ui/lib/css/abstract/_patron-colors.scss
+++ b/ui/lib/css/abstract/_patron-colors.scss
@@ -1,5 +1,4 @@
 $patron-colors-ids: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
-
 $patron-colors-dark: (
   1: hsl(90, 52%, 57%),
   2: hsl(120, 32%, 62%),
@@ -12,7 +11,6 @@ $patron-colors-dark: (
   9: hsl(0, 52%, 65%),
   10: hsl(37, 74%, 43%),
 );
-
 $patron-colors-light: (
   1: hsl(90, 60%, 43%),
   2: hsl(120, 52%, 52%),
diff --git a/ui/lib/css/abstract/_uniboard.scss b/ui/lib/css/abstract/_uniboard.scss
index f369e33a121..a0726156a7a 100644
--- a/ui/lib/css/abstract/_uniboard.scss
+++ b/ui/lib/css/abstract/_uniboard.scss
@@ -1,14 +1,12 @@
 /* Uniboard: keep the same page layout across pages */
 
 $scrollbar-width: 20px;
-
 $col3-uniboard-side-min: var(---col3-uniboard-side-min, 250px);
 $col3-uniboard-table-min: 240px;
 $col3-uniboard-side: minmax(#{$col3-uniboard-side-min}, 350px);
 $col3-uniboard-table: minmax(#{$col3-uniboard-table-min}, 400px);
 $col3-uniboard-controls: 3rem;
 $col3-min-bottom-margin: 1rem;
-
 $col3-uniboard-max-width: calc(
   100vw - #{$col3-uniboard-side-min} - #{$block-gap} - #{$col3-uniboard-table-min} - 2 *
     var(---main-margin, 0px) - #{$scrollbar-width}
@@ -31,27 +29,22 @@ $col3-uniboard-default-width: minmax(
   #{$col3-uniboard-default-max-width}
 );
 $col2-uniboard-default-width: $col3-uniboard-default-width;
-
 $col2-uniboard-table: $col3-uniboard-table;
 $col2-uniboard-controls: $col3-uniboard-controls;
-
 $col2-uniboard-max-width: calc(
   100vw - #{$block-gap} - #{$col3-uniboard-table-min} - 2 * var(---main-margin, 0px) - #{$scrollbar-width}
 );
 $col2-uniboard-max-height: $col3-uniboard-max-height;
 $col2-uniboard-max-size: min(#{$col2-uniboard-max-width}, #{$col2-uniboard-max-height});
 $col2-uniboard-width: calc(#{$col2-uniboard-max-size} * var(---board-scale));
-
 $col2-uniboard-default-max-width: calc(#{$col2-uniboard-max-size} * #{$uniboard-default-scale});
 $col2-uniboard-default-width: minmax(
   #{$col3-uniboard-default-min-width},
   #{$col2-uniboard-default-max-width}
 );
-
 $col2-uniboard-squeeze-table: minmax(200px, 240px);
 $col2-uniboard-squeeze-width: minmax(
   calc(55vmin),
   calc(100vh - #{$site-header-outer-height} - #{$block-gap})
 );
-
 $col1-uniboard-controls: 5rem;
diff --git a/ui/lib/css/abstract/_variables.scss b/ui/lib/css/abstract/_variables.scss
index 9c4e47023e6..e719674c5da 100644
--- a/ui/lib/css/abstract/_variables.scss
+++ b/ui/lib/css/abstract/_variables.scss
@@ -1,14 +1,9 @@
 $debug: false;
-
 $viewport-min-width: 320px;
-
 $block-gap: var(---block-gap);
-
 $box-radius-size: 6px;
 $box-padding-vert: 4vh;
-
 $transition-duration: 150ms;
-
 $site-header-tall-height: 60px;
 $site-header-short-height: 40px;
 $site-header-sticky-max-width: 1780px;
@@ -16,10 +11,8 @@ $site-header-height: var(---site-header-height);
 $site-header-margin: var(---site-header-margin);
 $site-header-margin-extra: 1.3em;
 $site-header-outer-height: calc($site-header-height + $site-header-margin + var(---sticky-gap));
-
 $main-margin: var(---main-margin);
 $main-max-width: 1300px;
-
 $topnav-visible: 1020px; // where topnav menu & WWWWWWWWWWWWWWWWWWWW both fit at 100%
 
 $xxx-small: 400px;
@@ -30,7 +23,6 @@ $medium: 980px;
 $large: 1120px;
 $x-large: 1260px;
 $xx-large: 1500px;
-
 $x-short: 400px;
 $short: 500px;
 $tall: 600px;
diff --git a/ui/lib/css/abstract/_z-index.scss b/ui/lib/css/abstract/_z-index.scss
index ee53acfd96b..cb7668ee605 100644
--- a/ui/lib/css/abstract/_z-index.scss
+++ b/ui/lib/css/abstract/_z-index.scss
@@ -2,7 +2,6 @@
 
 $z-cg__promotion-205: 205;
 $z-cg__piece_dragging-204: 204;
-
 $z-modal-alert-200: 200;
 $z-powertip-120: 120;
 $z-complete-113: 113;
diff --git a/ui/lib/css/base/_elements.scss b/ui/lib/css/base/_elements.scss
index 5e20b05163f..516e0852b68 100644
--- a/ui/lib/css/base/_elements.scss
+++ b/ui/lib/css/base/_elements.scss
@@ -1,6 +1,7 @@
 html {
   min-height: 100%;
   color-scheme: light dark;
+
   @include mq-sticky-header {
     :target {
       scroll-margin-top: $site-header-outer-height;
@@ -24,10 +25,9 @@ html {
 body {
   background: $c-bg-page linear-gradient(to bottom, $c-body-gradient, $c-bg-page 116px) no-repeat;
   color: $c-font;
-
   text-align: start;
-
   overflow-x: hidden;
+
   &.fixed-scroll {
     /* prevents scroll bar flicker when dragging a piece out */
     overflow-y: scroll;
diff --git a/ui/lib/css/base/_form.scss b/ui/lib/css/base/_form.scss
index 08ec6fe46f5..c644b1bacb4 100644
--- a/ui/lib/css/base/_form.scss
+++ b/ui/lib/css/base/_form.scss
@@ -5,6 +5,7 @@ select,
 textarea {
   font: inherit;
   color: $c-font;
+
   &:focus-visible {
     outline: $outline;
     outline-offset: -2px;
diff --git a/ui/lib/css/base/_typography.scss b/ui/lib/css/base/_typography.scss
index f9b0628798f..579d4100f17 100644
--- a/ui/lib/css/base/_typography.scss
+++ b/ui/lib/css/base/_typography.scss
@@ -1,6 +1,5 @@
 html {
   @extend %base-font-fallback;
-
   @include fluid-size('font-size', 12px, 14px);
 
   -webkit-font-smoothing: antialiased;
diff --git a/ui/lib/css/base/_unread.scss b/ui/lib/css/base/_unread.scss
index a5d540489cf..5bc147809bc 100644
--- a/ui/lib/css/base/_unread.scss
+++ b/ui/lib/css/base/_unread.scss
@@ -12,9 +12,10 @@
 }
 
 .data-count::after {
+  @include inline-end(0);
+
   content: attr(data-count);
   top: -5px;
-  @include inline-end(0);
   position: absolute;
   padding: 0 3px;
   height: 15px;
diff --git a/ui/lib/css/base/_util.scss b/ui/lib/css/base/_util.scss
index 31a8a76d322..b3a10f4779f 100644
--- a/ui/lib/css/base/_util.scss
+++ b/ui/lib/css/base/_util.scss
@@ -45,6 +45,7 @@ bad {
 
 .icon-flair {
   @include prevent-select;
+
   height: 1.1em;
   aspect-ratio: 1 / 1;
   vertical-align: middle;
diff --git a/ui/lib/css/ceval/_ctrl.scss b/ui/lib/css/ceval/_ctrl.scss
index f7f629182f9..ca5dad86a64 100644
--- a/ui/lib/css/ceval/_ctrl.scss
+++ b/ui/lib/css/ceval/_ctrl.scss
@@ -1,5 +1,6 @@
 .ceval {
   @extend %metal-bg;
+
   position: relative;
   display: flex;
   column-gap: 6px;
@@ -12,6 +13,7 @@
 
   .cmn-toggle {
     @extend %flex-center;
+
     flex: 0 0 40px;
     margin-inline-start: 6px;
   }
@@ -30,6 +32,7 @@
 
   .engine {
     @extend %nowrap-hidden;
+
     flex: 2 1 auto;
     font-size: 12px;
     line-height: 16px;
@@ -42,6 +45,7 @@
     .cloud,
     .infinite {
       @extend %roboto, %box-radius;
+
       margin-inline-start: 4px;
       background: $c-secondary-dim;
       color: $c-over;
@@ -49,6 +53,7 @@
       text-transform: uppercase;
       font-size: 11px;
     }
+
     .info {
       display: block;
       white-space: nowrap;
@@ -145,6 +150,7 @@
 
 .engine-error {
   @extend %flex-column;
+
   align-items: center;
   row-gap: 1em;
   padding: 3em;
@@ -154,6 +160,7 @@
   @media (max-width: at-most($medium)) {
     max-width: 80vw;
   }
+
   @media (max-width: at-most($xx-small)) {
     max-width: unset;
     width: 96vw;
@@ -161,13 +168,16 @@
 
   h2 {
     @extend %base-font;
+
     font-size: 1.3em;
   }
+
   li {
     margin: 0 2em;
     line-height: 1.5em;
     list-style: disc;
   }
+
   pre {
     width: 100%;
     border: 1px solid #888;
diff --git a/ui/lib/css/ceval/_eval-gauge.scss b/ui/lib/css/ceval/_eval-gauge.scss
index 022cb423127..4ede31d8d85 100644
--- a/ui/lib/css/ceval/_eval-gauge.scss
+++ b/ui/lib/css/ceval/_eval-gauge.scss
@@ -2,10 +2,11 @@
   width: $block-gap;
   position: relative;
   background: #c0c0c0;
+  overflow: hidden;
+
   @include if-light {
     background: #fff;
   }
-  overflow: hidden;
 
   @include mq-is-col1 {
     display: none;
@@ -14,6 +15,7 @@
   &.empty {
     opacity: 0.5;
   }
+
   &.reverse {
     transform: rotateX(180deg);
   }
@@ -27,15 +29,17 @@
   }
 
   tick {
+    @include inline-start(0);
+
     position: absolute;
     top: 0;
-    @include inline-start(0);
     width: 100%;
+    opacity: 0.4;
     border-bottom: 2px ridge #888;
+
     @include if-light {
       border-bottom-color: #ccc;
     }
-    opacity: 0.4;
   }
 
   tick.zero {
@@ -48,10 +52,11 @@
   .black {
     width: 100%;
     height: 50%;
+    transition: height 1s;
     background: #444;
+
     @include if-light {
       background: #606060;
     }
-    transition: height 1s;
   }
 }
diff --git a/ui/lib/css/ceval/_pv.scss b/ui/lib/css/ceval/_pv.scss
index 3136048a1c1..4e280cc0686 100644
--- a/ui/lib/css/ceval/_pv.scss
+++ b/ui/lib/css/ceval/_pv.scss
@@ -13,10 +13,11 @@
     min-height: 2em;
 
     &.pv--nowrap {
+      @extend %nowrap-ellipsis;
+
       display: block; // "flex" doesn't support ellipsis so switch back to "block"
       flex-wrap: initial;
       height: 2em;
-      @extend %nowrap-ellipsis;
     }
 
     strong {
@@ -32,9 +33,10 @@
     }
 
     .pv-wrap-toggle {
+      @include inline-end(0);
+
       position: absolute;
       top: 0;
-      @include inline-end(0);
       padding: 0 4px;
       margin: 0;
       cursor: pointer;
@@ -50,9 +52,10 @@
   }
 
   .pv-board {
+    @include inline-start(34px);
+
     position: absolute;
     width: 80%;
-    @include inline-start(34px);
     max-width: 240px;
     z-index: 1;
 
@@ -62,6 +65,7 @@
       .cg-wrap {
         @extend %abs-100;
       }
+
       cg-board {
         @extend %popup-shadow;
       }
@@ -74,9 +78,11 @@
     background: $m-secondary_bg--mix-20;
     cursor: pointer;
   }
+
   .pv_box .pv[data-uci] .pv-san:hover {
     color: $c-primary;
   }
+
   .pv_box .pv .pv-wrap-toggle:hover {
     background: $c-secondary;
     color: $c-over;
@@ -88,13 +94,16 @@
     background: $m-secondary_bg--mix-20;
     padding-inline: 8px;
   }
+
   .pv_box .pv {
     font-size: 1.2em;
     padding-inline-end: 20px;
   }
+
   .pv_box .pv strong {
     padding-inline-end: 8px;
   }
+
   .pv_box .pv .pv-wrap-toggle {
     padding: 0;
   }
diff --git a/ui/lib/css/ceval/_settings.scss b/ui/lib/css/ceval/_settings.scss
index 4107ca50d99..3347ab7fb67 100644
--- a/ui/lib/css/ceval/_settings.scss
+++ b/ui/lib/css/ceval/_settings.scss
@@ -4,6 +4,7 @@
 
 #ceval-settings {
   @extend %flex-column, %dropdown-shadow, %box-radius-bottom;
+
   position: absolute;
   border-top: 2px solid $c-primary;
   z-index: $z-mz-menu-4;
@@ -14,6 +15,7 @@
 
   @media (max-width: at-most($small)) {
     gap: 1em;
+
     br {
       display: none;
     }
@@ -21,6 +23,7 @@
 
   .setting {
     @extend %flex-center-nowrap;
+
     white-space: nowrap;
 
     input[type='range'],
@@ -35,6 +38,7 @@
 
     select {
       @extend %ellipsis;
+
       flex: 1 4 auto;
       min-width: 0;
       margin-inline-start: 1ch;
diff --git a/ui/lib/css/chat/_chat.scss b/ui/lib/css/chat/_chat.scss
index b91f17d8a7f..78ba58d9181 100644
--- a/ui/lib/css/chat/_chat.scss
+++ b/ui/lib/css/chat/_chat.scss
@@ -1,5 +1,4 @@
 @import '../form/cmn-toggle';
-
 @import 'tab';
 @import 'members';
 @import 'discussion';
@@ -26,6 +25,7 @@
       line-height: 1.7em;
       outline: none;
       resize: none;
+
       &:focus {
         border-color: $c-primary;
       }
diff --git a/ui/lib/css/chat/_discussion.scss b/ui/lib/css/chat/_discussion.scss
index 317686f08c9..eb6a2970144 100644
--- a/ui/lib/css/chat/_discussion.scss
+++ b/ui/lib/css/chat/_discussion.scss
@@ -15,9 +15,9 @@
     font-size: 0.9em;
 
     li {
-      position: relative;
       @include padding-direction(0.5em, 5px, 0.5em, 10px);
 
+      position: relative;
       line-height: 1.2em;
       overflow-y: hidden;
       user-select: text;
@@ -77,10 +77,11 @@
     }
 
     action {
+      @include inline-end(0);
+
       display: none;
       position: absolute;
       top: 5px;
-      @include inline-end(0);
       cursor: pointer;
       margin-inline-end: 3px;
       padding: 1px 5px;
@@ -121,11 +122,12 @@
   }
 
   &__say {
+    @include padding-direction(3px, 20px, 3px, 4px);
+
     flex: 0 0 auto;
     border: 0;
     border-top: $border;
     border-radius: 0;
-    @include padding-direction(3px, 20px, 3px, 4px);
 
     &:focus {
       outline: 1px solid $c-primary;
diff --git a/ui/lib/css/chat/_members.scss b/ui/lib/css/chat/_members.scss
index af1ff06d604..f2d41a98d31 100644
--- a/ui/lib/css/chat/_members.scss
+++ b/ui/lib/css/chat/_members.scss
@@ -12,7 +12,9 @@
 
   &__number {
     @extend %flex-center-nowrap;
+
     margin-inline-end: 1ch;
+
     &::before {
       font-size: 1em;
       color: $c-font-dim;
diff --git a/ui/lib/css/chat/_preset.scss b/ui/lib/css/chat/_preset.scss
index 17100945627..41d2d8d1651 100644
--- a/ui/lib/css/chat/_preset.scss
+++ b/ui/lib/css/chat/_preset.scss
@@ -1,6 +1,7 @@
 .mchat {
   &__presets {
     @include prevent-select;
+
     display: flex;
     flex: 0 0 auto;
     align-items: center;
diff --git a/ui/lib/css/chat/_voicechat.scss b/ui/lib/css/chat/_voicechat.scss
index 4a8f997ba0c..05d7fb92526 100644
--- a/ui/lib/css/chat/_voicechat.scss
+++ b/ui/lib/css/chat/_voicechat.scss
@@ -46,8 +46,10 @@
 
   &::after {
     top: 1px;
+
     @include inline-start(0);
     @include inline-end(auto);
+
     background: none;
     box-shadow: none;
   }
diff --git a/ui/lib/css/chess/_control.scss b/ui/lib/css/chess/_control.scss
index f60c674762a..b1b1e1fa49e 100644
--- a/ui/lib/css/chess/_control.scss
+++ b/ui/lib/css/chess/_control.scss
@@ -9,6 +9,7 @@
   .fbt {
     @extend %box-radius-bottom;
     @include prevent-select;
+
     -webkit-touch-callout: none;
     text-align: center;
   }
@@ -30,11 +31,13 @@
       &[data-act='last'] {
         font-size: 0.7em;
       }
+
       &[data-act='line'] {
         font-size: 0.9em;
       }
     }
   }
+
   @include mq-is-col1 {
     .jumps .fbt[data-act='prev'],
     .jumps .fbt[data-act='next'] {
@@ -42,6 +45,7 @@
       font-size: 1.2em;
     }
   }
+
   @media (hover: hover) {
     .jumps .fbt:hover:not(.disabled, :disabled) {
       background-color: $m-primary_bg--mix-30;
diff --git a/ui/lib/css/chess/_promotion.scss b/ui/lib/css/chess/_promotion.scss
index b87cb4dbc31..56fcc0f8bb5 100644
--- a/ui/lib/css/chess/_promotion.scss
+++ b/ui/lib/css/chess/_promotion.scss
@@ -1,10 +1,10 @@
 #promotion-choice {
   background: $m-bg--fade-30;
   z-index: $z-cg__promotion-205;
-
   position: absolute;
   width: var(---cg-width, 100%);
   height: var(---cg-height, 100%);
+
   @include inline-end(0);
 
   square {
@@ -13,27 +13,26 @@
     background-color: #b0b0b0;
     box-shadow: inset 0 0 25px 3px #808080;
     pointer-events: all;
+
     @include transition;
   }
 
   piece {
     pointer-events: none;
-    opacity: 1;
-    /* cancels blindfold */
+    opacity: 1; // cancels blindfold
   }
 
   .is2d & piece {
-    width: 100%;
-    height: 100%;
-
     @include transition;
 
+    width: 100%;
+    height: 100%;
     transform: scale(0.8);
   }
 
   square:hover {
     box-shadow: inset 0 0 48px 8px $c-accent;
-    border-radius: 0%;
+    border-radius: 0;
   }
 
   .is2d & square:hover piece {
diff --git a/ui/lib/css/chess/_variant-style.scss b/ui/lib/css/chess/_variant-style.scss
index e61887491ba..c291c7b4239 100644
--- a/ui/lib/css/chess/_variant-style.scss
+++ b/ui/lib/css/chess/_variant-style.scss
@@ -1,5 +1,7 @@
 .variant-racingKings .cg-wrap {
   &.cg-wrap cg-container::before {
+    @include inline-start(0);
+
     box-shadow:
       0 14px 28px rgba(0, 0, 0, 0.25),
       0 10px 10px rgba(0, 0, 0, 0.22);
@@ -8,7 +10,6 @@
     height: 12.5%;
     content: '';
     position: absolute;
-    @include inline-start(0);
     z-index: 1;
     pointer-events: none;
   }
@@ -23,6 +24,8 @@
 }
 
 .variant-kingOfTheHill cg-container::before {
+  @include inline-start(37.5%);
+
   width: 25%;
   height: 25%;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
@@ -30,7 +33,6 @@
   content: '';
   position: absolute;
   top: 37.5%;
-  @include inline-start(37.5%);
   z-index: 1;
   pointer-events: none;
 }
diff --git a/ui/lib/css/chess/_zh-pocket.scss b/ui/lib/css/chess/_zh-pocket.scss
index 5891d8d8c65..9c3be7685ab 100644
--- a/ui/lib/css/chess/_zh-pocket.scss
+++ b/ui/lib/css/chess/_zh-pocket.scss
@@ -33,7 +33,9 @@
 
       content: attr(data-nb);
       bottom: 0;
+
       @include inline-end(0);
+
       position: absolute;
       line-height: 0.9em;
       padding: 3px 0.3em;
diff --git a/ui/lib/css/component/_announce.scss b/ui/lib/css/component/_announce.scss
index 2592adc2097..d37d6c7461f 100644
--- a/ui/lib/css/component/_announce.scss
+++ b/ui/lib/css/component/_announce.scss
@@ -1,9 +1,9 @@
 #announce {
   @extend %flex-between, %popup-shadow;
+  @include inline-start(0);
 
   position: fixed;
   bottom: 0;
-  @include inline-start(0);
   font-size: 1.4em;
   background: $c-primary;
   color: $c-over;
diff --git a/ui/lib/css/component/_bar-glider.scss b/ui/lib/css/component/_bar-glider.scss
index b28b3eed174..e4b003941eb 100644
--- a/ui/lib/css/component/_bar-glider.scss
+++ b/ui/lib/css/component/_bar-glider.scss
@@ -13,12 +13,13 @@
   overflow: hidden;
 
   &::after {
+    @include inline-start(0);
+
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     width: 70px;
-    @include inline-start(0);
     background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
     animation: bar-glider-anim 3s linear infinite;
 
diff --git a/ui/lib/css/component/_blindfold-toggle.scss b/ui/lib/css/component/_blindfold-toggle.scss
index 8017a770426..7c30cefcc85 100644
--- a/ui/lib/css/component/_blindfold-toggle.scss
+++ b/ui/lib/css/component/_blindfold-toggle.scss
@@ -1,10 +1,12 @@
 #blindfoldzone {
   @extend %flex-center-nowrap;
+
   position: fixed;
   bottom: 20px;
   inset-inline-end: 6px;
   height: 4em;
   z-index: $z-above-link-overlay-3;
+
   @include mq-topnav-hidden {
     bottom: auto;
     top: 0;
@@ -13,6 +15,7 @@
     justify-content: center;
     z-index: $z-zen-toggle-111;
   }
+
   @media (max-width: at-most($xx-small)) {
     bottom: 10px;
     top: auto;
@@ -21,6 +24,7 @@
 
 #blindfoldtog {
   @extend %box-radius;
+
   flex: 0 0 auto;
   padding: 0.2em 1em;
   opacity: 0.9;
@@ -29,6 +33,7 @@
   font-weight: bold;
   text-transform: uppercase;
   line-height: 1.2;
+
   &:hover {
     opacity: 1;
   }
diff --git a/ui/lib/css/component/_board-menu.scss b/ui/lib/css/component/_board-menu.scss
index 9f622524e11..10e8a136f86 100644
--- a/ui/lib/css/component/_board-menu.scss
+++ b/ui/lib/css/component/_board-menu.scss
@@ -11,8 +11,10 @@
     min-width: 100%;
     z-index: $z-mz-menu-4;
   }
+
   @media (max-width: at-most($small)) {
     @include box-radius;
+
     position: fixed;
     top: 50% !important;
     left: 50%;
@@ -23,14 +25,17 @@
 
   > div {
     @extend %flex-column;
+
     gap: 2em;
     text-align: start;
   }
 
   section {
     @extend %flex-column;
+
     gap: 1.5em;
     padding: 1.2em 0;
+
     &:not(:last-child) {
       border-bottom: $border;
     }
diff --git a/ui/lib/css/component/_board.scss b/ui/lib/css/component/_board.scss
index 06faf3c8baa..c160f6d2e7c 100644
--- a/ui/lib/css/component/_board.scss
+++ b/ui/lib/css/component/_board.scss
@@ -15,10 +15,12 @@
 cg-board {
   @extend %box-radius;
 }
+
 .mini-board cg-board,
 .mini-game cg-board {
   border-radius: 4px;
 }
+
 .mini-board:not(.manipulable) cg-board,
 .mini-game cg-board {
   overflow: hidden;
@@ -28,6 +30,7 @@ cg-board {
 .mini-game .cg-wrap {
   @extend %square;
 }
+
 .gauge-on .main-board cg-board {
   @extend %box-radius-left;
 }
diff --git a/ui/lib/css/component/_box.scss b/ui/lib/css/component/_box.scss
index ecdc7fe740d..efa5c7a0af4 100644
--- a/ui/lib/css/component/_box.scss
+++ b/ui/lib/css/component/_box.scss
@@ -16,6 +16,7 @@ $vp-max-width: 1200px;
 
   &__top {
     @extend %box-padding, %flex-between;
+
     gap: 1rem;
 
     &__actions {
@@ -35,6 +36,7 @@ $vp-max-width: 1200px;
 
   @include if-transp {
     position: relative;
+
     @include back-blur;
   }
 }
@@ -42,6 +44,7 @@ $vp-max-width: 1200px;
 @media (min-width: at-least($small)) {
   .box {
     @include box-radius;
+
     overflow: hidden;
   }
 }
diff --git a/ui/lib/css/component/_btn-rack.scss b/ui/lib/css/component/_btn-rack.scss
index 6d2552cebcd..7c8b8590cf3 100644
--- a/ui/lib/css/component/_btn-rack.scss
+++ b/ui/lib/css/component/_btn-rack.scss
@@ -54,6 +54,7 @@
 
       color: #fff;
     }
+
     &[disabled] {
       opacity: 0.7;
       cursor: not-allowed;
diff --git a/ui/lib/css/component/_button.scss b/ui/lib/css/component/_button.scss
index 81aab497ba7..49dd985e091 100644
--- a/ui/lib/css/component/_button.scss
+++ b/ui/lib/css/component/_button.scss
@@ -1,6 +1,5 @@
 .button {
   @extend %roboto, %button-shadow, %box-radius;
-
   @include prevent-select;
   @include transition;
   @include backdrop-blur-if-transparent;
@@ -153,7 +152,9 @@
     color: #fff;
   }
 }
+
 .button-set {
   @extend %flex-center;
+
   gap: 1.5em;
 }
diff --git a/ui/lib/css/component/_calendar-mselect.scss b/ui/lib/css/component/_calendar-mselect.scss
index bc8b99f6553..f416ee0d60d 100644
--- a/ui/lib/css/component/_calendar-mselect.scss
+++ b/ui/lib/css/component/_calendar-mselect.scss
@@ -1,20 +1,27 @@
 .calendar-mselect {
   @extend %box-neat, %flex-between-nowrap;
+
   font-size: 1.5em;
   background: $c-bg-zebra;
   padding: 1em 2em;
+
   &--top {
     margin-bottom: 2em;
   }
+
   &--bottom {
     margin-top: 2em;
   }
+
   &__selects {
     @extend %flex-center-center; // for col1
+
     gap: 1em;
   }
+
   > a {
     font-size: 2em;
+
     &.disabled {
       opacity: 0.3;
     }
diff --git a/ui/lib/css/component/_chart.scss b/ui/lib/css/component/_chart.scss
index ebfb0480815..f6b346184de 100644
--- a/ui/lib/css/component/_chart.scss
+++ b/ui/lib/css/component/_chart.scss
@@ -23,11 +23,12 @@
 
     &.active {
       background-color: #262421;
+      color: $c-font;
+      text-shadow: none !important;
+
       @include if-light {
         background-color: #dbebfc;
       }
-      color: $c-font;
-      text-shadow: none !important;
     }
   }
 
@@ -38,14 +39,17 @@
   .noUi-target,
   .noUi-target * {
     @include prevent-select;
+
     -webkit-touch-callout: none;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     touch-action: none;
     box-sizing: border-box;
   }
+
   .noUi-target {
     position: relative;
   }
+
   .noUi-base,
   .noUi-connects {
     width: 100%;
@@ -53,11 +57,13 @@
     position: relative;
     z-index: 1;
   }
+
   /* Wrapper for all connect elements. */
   .noUi-connects {
     overflow: hidden;
     z-index: 0;
   }
+
   .noUi-connect,
   .noUi-origin {
     will-change: transform;
@@ -70,33 +76,40 @@
     transform-origin: 0 0;
     transform-style: preserve-3d;
   }
+
   /* Offset direction */
   .noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
     left: 0;
     right: auto;
   }
+
   /* Give origins 0 height/width so they don't interfere with clicking the
      * connect elements.
      */
   .noUi-horizontal .noUi-origin {
     height: 0;
   }
+
   .noUi-handle {
     backface-visibility: hidden;
     position: absolute;
   }
+
   .noUi-touch-area {
     cursor: ew-resize;
     height: 100%;
     width: 100%;
   }
+
   .noUi-state-tap .noUi-connect,
   .noUi-state-tap .noUi-origin {
     transition: transform 0.3s;
   }
+
   .noUi-state-drag * {
     cursor: grabbing !important;
   }
+
   /* Slider size and handle placement;
      */
   .noUi-horizontal {
@@ -105,16 +118,19 @@
     margin-left: 32px;
     margin-right: 36px;
   }
+
   .noUi-horizontal .noUi-handle {
     width: 5px;
     height: 21px;
     right: 0;
     top: -6px;
   }
+
   .noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
     left: 0;
     right: auto;
   }
+
   /* Styling;
      * Giving the connect element a border radius causes issues with using transform: scale
      */
@@ -123,13 +139,16 @@
     border-radius: 4px;
     border: 1px solid $c-font;
   }
+
   .noUi-connects {
     border-radius: 3px;
   }
+
   .noUi-connect {
     background: rgb(118, 197, 243);
     cursor: grab;
   }
+
   /* Handles and cursors;
      */
   .noUi-handle {
@@ -142,18 +161,21 @@
       inset 0 1px 7px #ebebeb,
       0 3px 6px -3px #bbb;
   }
+
   .noUi-active {
     box-shadow:
       inset 0 0 1px #fff,
       inset 0 1px 7px #ddd,
       0 3px 6px -3px #bbb;
   }
+
   /* Handle stripes;
      */
   .noUi-handle::before,
   .noUi-handle::after {
     left: 17px;
   }
+
   /* Base;
      *
      */
@@ -161,10 +183,12 @@
   .noUi-pips * {
     box-sizing: border-box;
   }
+
   .noUi-pips {
     position: absolute;
     color: $c-font;
   }
+
   /* Values;
      *
      */
@@ -173,10 +197,12 @@
     white-space: nowrap;
     text-align: center;
   }
+
   .noUi-value-sub {
     color: #ccc;
     font-size: 10px;
   }
+
   /* Markings;
      *
      */
@@ -184,12 +210,15 @@
     position: absolute;
     background: $c-font;
   }
+
   .noUi-marker-sub {
     background: #aaa;
   }
+
   .noUi-marker-large {
     background: #aaa;
   }
+
   /* Horizontal layout;
      *
      */
@@ -199,20 +228,25 @@
     left: 0;
     width: 100%;
   }
+
   .noUi-value-horizontal {
     transform: translate(-50%, 50%);
   }
+
   .noUi-rtl .noUi-value-horizontal {
     transform: translate(50%, 50%);
   }
+
   .noUi-marker-horizontal.noUi-marker {
     margin-left: -1px;
     width: 2px;
     height: 5px;
   }
+
   .noUi-marker-horizontal.noUi-marker-sub {
     height: 10px;
   }
+
   .noUi-marker-horizontal.noUi-marker-large {
     height: 15px;
   }
diff --git a/ui/lib/css/component/_color-icon.scss b/ui/lib/css/component/_color-icon.scss
index adc023a0b0e..d7542a0cbf7 100644
--- a/ui/lib/css/component/_color-icon.scss
+++ b/ui/lib/css/component/_color-icon.scss
@@ -6,6 +6,7 @@
   &.black::before {
     content: $licon-DiscBigOutline;
   }
+
   @include if-light {
     &.white::before {
       content: $licon-DiscBigOutline;
diff --git a/ui/lib/css/component/_complete.scss b/ui/lib/css/component/_complete.scss
index 50a94e986e0..ce789247042 100644
--- a/ui/lib/css/component/_complete.scss
+++ b/ui/lib/css/component/_complete.scss
@@ -21,9 +21,9 @@
   }
 
   &-result {
-    color: $c-font;
     @include padding-direction(0.4em, 0, 0.4em, 0.4em);
 
+    color: $c-font;
     display: block;
     cursor: pointer;
     text-align: left;
diff --git a/ui/lib/css/component/_continue-with.scss b/ui/lib/css/component/_continue-with.scss
index cbe682cacca..58796cbd370 100644
--- a/ui/lib/css/component/_continue-with.scss
+++ b/ui/lib/css/component/_continue-with.scss
@@ -1,8 +1,10 @@
 .continue-with {
   @extend %flex-column;
+
   @media (hover: none) {
     padding: 2em;
   }
+
   > *:not(:first-child) {
     margin-top: 1em;
   }
diff --git a/ui/lib/css/component/_copy-me.scss b/ui/lib/css/component/_copy-me.scss
index 9d06f43ca8e..032ee1f78ab 100644
--- a/ui/lib/css/component/_copy-me.scss
+++ b/ui/lib/css/component/_copy-me.scss
@@ -3,6 +3,7 @@
 
   &__target {
     @extend %nowrap-ellipsis, %box-radius-left;
+
     flex: 1 1 auto;
     padding: 0 1em;
     outline: 0;
@@ -16,6 +17,7 @@
 
       &:focus-visible {
         @extend %box-radius-left;
+
         outline-offset: -2px;
       }
     }
@@ -23,6 +25,7 @@
 
   &__button {
     @extend %box-radius-right;
+
     flex: 0 0 auto;
     border: $border;
     border-left: 0;
diff --git a/ui/lib/css/component/_dialog.scss b/ui/lib/css/component/_dialog.scss
index 2cd1374b499..8c71bdbdf6c 100644
--- a/ui/lib/css/component/_dialog.scss
+++ b/ui/lib/css/component/_dialog.scss
@@ -4,20 +4,23 @@ body:has(dialog.touch-scroll) {
 
 dialog {
   @extend %box-radius, %popup-shadow;
+  @include inline-start(50%);
+
   position: fixed;
   max-height: 100%;
   max-width: 100%;
   top: 50%;
-  @include inline-start(50%);
   transform: translate(-50%, -50%);
-  @include if-rtl {
-    transform: translate(50%, -50%);
-  }
   padding: 0;
   border: none;
   outline: none;
   background: $c-bg-high;
   z-index: $z-modal-111;
+
+  @include if-rtl {
+    transform: translate(50%, -50%);
+  }
+
   &:has(.dialog-content.alert) {
     z-index: $z-modal-alert-200;
   }
@@ -40,10 +43,10 @@ dialog {
 
   button.close-button {
     @extend %flex-around;
+    @include inline-end(4px);
 
     position: absolute;
     top: 4px;
-    @include inline-end(4px);
     width: 40px; // bigger for phones
     height: 40px;
     z-index: $z-modal-111 + 1;
@@ -53,7 +56,6 @@ dialog {
     border: $border;
     font-size: 20px;
     text-align: center;
-
     cursor: pointer;
 
     &:not(:focus) {
@@ -67,16 +69,20 @@ dialog {
 
     button.close-button {
       transform: translate(18px, -18px);
+
       @include if-rtl {
         transform: translate(-18px, -18px);
       }
+
       width: 32px;
       height: 32px;
       font-size: 16px;
       border-radius: 50%;
       border: none;
+
       &:hover {
         @include box-shadow;
+
         background: $c-bad;
         color: #fff;
       }
@@ -97,16 +103,19 @@ dialog {
   &.alert,
   &.debug {
     @extend %flex-column;
+
     gap: 2em;
     width: unset;
     height: unset;
     border-radius: 6px;
     border: 3px solid $c-primary;
   }
+
   &.alert {
     width: 480px;
     max-width: 100%;
     font-size: 16px;
+
     span {
       display: flex;
       gap: 2em;
@@ -116,10 +125,12 @@ dialog {
         justify-content: space-around;
       }
     }
+
     input {
       align-self: center;
       width: min(40ch, 90%);
     }
+
     .invalid {
       background-color: $m-bad_bg--mix-30;
     }
diff --git a/ui/lib/css/component/_flash-absolute.scss b/ui/lib/css/component/_flash-absolute.scss
index 988d1c2bd7c..9bd76bef8c0 100644
--- a/ui/lib/css/component/_flash-absolute.scss
+++ b/ui/lib/css/component/_flash-absolute.scss
@@ -3,11 +3,14 @@
 main.page-menu {
   position: relative;
 }
+
 .flash {
+  @include inline-end(0);
+
   position: absolute;
   top: 0;
-  @include inline-end(0);
   margin: 0;
+
   &.fade {
     opacity: 0;
     transition: 3s;
diff --git a/ui/lib/css/component/_flash.scss b/ui/lib/css/component/_flash.scss
index 2bd710cf6f6..00635dc3a32 100644
--- a/ui/lib/css/component/_flash.scss
+++ b/ui/lib/css/component/_flash.scss
@@ -1,5 +1,6 @@
 .flash {
   @extend %flex-center-nowrap, %box-radius;
+
   margin: 1em 0 2em 0;
   padding: 1em 2em;
   background: $c-good;
@@ -43,12 +44,15 @@
 
   &-quiet {
     @extend %box-neat;
+
     background: $c-bg-zebra;
   }
 
   &-box {
     @extend %box-neat;
+
     background: $c-bg-zebra;
+
     a {
       color: $c-primary;
     }
diff --git a/ui/lib/css/component/_friend-box.scss b/ui/lib/css/component/_friend-box.scss
index b0490d0dfb6..65a0f6e9ba2 100644
--- a/ui/lib/css/component/_friend-box.scss
+++ b/ui/lib/css/component/_friend-box.scss
@@ -1,13 +1,10 @@
 #friend_box {
+  @include inline-end(0);
+  @include hoverflow;
+
   display: none;
-
-  @include mq-topnav-visible-and-tall {
-    display: block;
-  }
-
   position: fixed;
   bottom: 0;
-  @include inline-end(0);
   z-index: $z-friend-box-2;
   background: $c-bg-popup;
   border: $border;
@@ -17,11 +14,11 @@
   font-size: 0.9rem;
   min-width: 150px;
   max-height: 95%;
+  backface-visibility: hidden; // improve scroll perfs
 
-  /* improve scroll perfs */
-  backface-visibility: hidden;
-
-  @include hoverflow;
+  @include mq-topnav-visible-and-tall {
+    display: block;
+  }
 
   .friend_box_title {
     @extend %metal;
diff --git a/ui/lib/css/component/_loader.scss b/ui/lib/css/component/_loader.scss
index 3eed55a7755..2ecb011e9a3 100755
--- a/ui/lib/css/component/_loader.scss
+++ b/ui/lib/css/component/_loader.scss
@@ -8,6 +8,7 @@ $total_len: $len1 + $len2 + $len3;
   0% {
     stroke-dashoffset: $total_len;
   }
+
   100% {
     stroke-dashoffset: -$total_len;
   }
@@ -17,6 +18,7 @@ $total_len: $len1 + $len2 + $len3;
   0% {
     stroke-dashoffset: $total_len + $len1;
   }
+
   100% {
     stroke-dashoffset: -$total_len + $len1;
   }
@@ -26,6 +28,7 @@ $total_len: $len1 + $len2 + $len3;
   0% {
     stroke-dashoffset: $total_len + $len1 + $len2;
   }
+
   100% {
     stroke-dashoffset: -$total_len + $len1 + $len2;
   }
@@ -36,12 +39,15 @@ $total_len: $len1 + $len2 + $len3;
   100% {
     stroke: $c-primary;
   }
+
   25% {
     stroke: $c-error;
   }
+
   50% {
     stroke: $c-secondary;
   }
+
   75% {
     stroke: $c-brag;
   }
@@ -52,12 +58,15 @@ $total_len: $len1 + $len2 + $len3;
   100% {
     stroke: #42a5f5;
   }
+
   25% {
     stroke: #f44336;
   }
+
   50% {
     stroke: #fdd835;
   }
+
   75% {
     stroke: #4caf50;
   }
@@ -71,9 +80,11 @@ $total_len: $len1 + $len2 + $len3;
   path {
     animation: mask1 2.75s cubic-bezier(0.49, 0.67, 0.45, 0.29) infinite;
   }
+
   path:nth-child(2) {
     animation-name: mask2;
   }
+
   path:nth-child(3) {
     animation-name: mask3;
   }
@@ -101,6 +112,7 @@ $total_len: $len1 + $len2 + $len3;
 
 .ddloader {
   background: url('../images/loader/whitex1.png') no-repeat;
+
   @include if-light {
     background: url('../images/loader/blackx1.png') no-repeat;
   }
diff --git a/ui/lib/css/component/_markdown-img-resizer.scss b/ui/lib/css/component/_markdown-img-resizer.scss
index 7db6cf80dcf..260f3ae0e5d 100644
--- a/ui/lib/css/component/_markdown-img-resizer.scss
+++ b/ui/lib/css/component/_markdown-img-resizer.scss
@@ -10,11 +10,13 @@
     line-height: 0 !important;
     margin: 0 !important;
   }
+
   > .resize-handle {
     position: absolute;
     background: transparent;
     pointer-events: auto;
   }
+
   > .resize-handle.bottom {
     left: 16px;
     right: 16px;
@@ -22,6 +24,7 @@
     height: 16px;
     cursor: ns-resize;
   }
+
   > .resize-handle.left,
   > .resize-handle.right {
     top: 0;
@@ -29,12 +32,15 @@
     height: 100%;
     cursor: ew-resize;
   }
+
   > .resize-handle.left {
     left: 0;
   }
+
   > .resize-handle.right {
     right: 0;
   }
+
   > .resize-handle.left::before,
   > .resize-handle.right::before {
     content: '';
@@ -43,16 +49,19 @@
     width: 100%;
     height: 14px;
   }
+
   > .resize-handle.left::before {
     left: 2px;
     background: repeating-linear-gradient(225deg, $c-border-light 0 1px, transparent 0 2.4px);
     mask: linear-gradient(225deg, transparent 0 50%, #000 0);
   }
+
   > .resize-handle.right::before {
     right: 2px;
     background: repeating-linear-gradient(135deg, $c-border-light 0 1px, transparent 0 2.4px);
     mask: linear-gradient(135deg, transparent 0 50%, #000 0);
   }
+
   > .resize-handle.left::after,
   > .resize-handle.right::after {
     content: '';
@@ -61,10 +70,12 @@
     width: 100%;
     height: 16px;
   }
+
   > .resize-handle.left::after,
   > .resize-handle.left.corner-drag {
     cursor: nesw-resize;
   }
+
   > .resize-handle.right::after,
   > .resize-handle.right.corner-drag {
     cursor: nwse-resize;
diff --git a/ui/lib/css/component/_markdown.scss b/ui/lib/css/component/_markdown.scss
index a77c082d518..af5796aab8b 100644
--- a/ui/lib/css/component/_markdown.scss
+++ b/ui/lib/css/component/_markdown.scss
@@ -62,6 +62,7 @@
       &:not(:first-child) {
         margin-top: calc(0.9 * #{$element-margin});
       }
+
       border-bottom: 1px solid $c-brag;
       line-height: 1.5em;
       padding-bottom: calc(0.25 * #{$element-margin});
@@ -119,14 +120,17 @@
     table {
       margin: $element-margin 0;
     }
+
     th,
     td {
       &[align='left'] {
         text-align: left;
       }
+
       &[align='center'] {
         text-align: center;
       }
+
       &[align='right'] {
         text-align: right;
       }
@@ -144,6 +148,7 @@
       & > time {
         border-color: $c-link;
       }
+
       &:hover > time {
         border-color: $c-link-hover;
       }
@@ -154,8 +159,10 @@
 @mixin rendered-markdown-code {
   $c-code-bg: $c-bg-zebra;
   $c-code-font: $c-font-clear;
+
   code {
     @extend %box-radius;
+
     font-family: monospace;
     padding: 0.2em 0.5em;
     background: $c-code-bg;
@@ -166,9 +173,11 @@
 
   pre {
     @extend %box-neat;
+
     background: $c-code-bg;
     padding: 1em 1.5em;
     line-height: 1.4em;
+
     code {
       background: none;
       padding: 0;
@@ -187,12 +196,15 @@
 @mixin rendered-markdown-img {
   img {
     @extend %box-neat;
+
     max-width: 100%;
   }
+
   /* image caption */
   img + br:has(+ em) {
     display: none;
   }
+
   img + em,
   img + br + em {
     color: $c-font-dim;
@@ -206,7 +218,9 @@
 @mixin rendered-markdown-embed {
   .embed {
     @extend %video;
+
     margin: $block-gap auto;
+
     > iframe {
       left: 0;
     }
diff --git a/ui/lib/css/component/_mascot.scss b/ui/lib/css/component/_mascot.scss
index daa616c2790..7a20e3cfaa6 100644
--- a/ui/lib/css/component/_mascot.scss
+++ b/ui/lib/css/component/_mascot.scss
@@ -1,5 +1,6 @@
 .mascot-says {
   @extend %flex-between-nowrap;
+
   align-items: start;
   background: $c-bg-zebra;
 
@@ -7,6 +8,7 @@
     width: 160px;
     height: 160px;
     margin: -4em var(---box-padding) 1vh 1vw;
+
     @media (max-width: at-most($x-small)) {
       display: none;
       margin: 0;
@@ -15,12 +17,15 @@
 
   &__content {
     padding: 3vh var(---box-padding);
+
     .mascot__intro {
       font-size: 1.3em;
     }
+
     p:first-child {
       margin-top: 1em;
     }
+
     h2 {
       font-size: 1.1em;
       font-weight: bold;
diff --git a/ui/lib/css/component/_mini-game.scss b/ui/lib/css/component/_mini-game.scss
index e47789526ba..6b2316801b6 100644
--- a/ui/lib/css/component/_mini-game.scss
+++ b/ui/lib/css/component/_mini-game.scss
@@ -21,6 +21,7 @@
 
   &__user {
     @extend %flex-center-nowrap;
+
     overflow: hidden;
   }
 
@@ -30,6 +31,7 @@
     vertical-align: middle;
     opacity: 0.75;
     margin-inline-end: 0.75ch;
+
     .mini-game:hover &,
     .relay-game--current &,
     .mini-game.active & {
@@ -46,6 +48,7 @@
 
     margin-inline-start: 1ch;
     font-size: 0.9em;
+
     body.no-rating & {
       display: none;
     }
diff --git a/ui/lib/css/component/_mselect.scss b/ui/lib/css/component/_mselect.scss
index 71f97adf220..95accf04603 100644
--- a/ui/lib/css/component/_mselect.scss
+++ b/ui/lib/css/component/_mselect.scss
@@ -50,7 +50,9 @@ $c-mselect: $c-primary;
 
     position: absolute;
     top: 0;
+
     @include inline-start(0);
+
     min-width: 100%;
     max-height: 60vh;
     overflow-y: auto;
@@ -83,6 +85,7 @@ $c-mselect: $c-primary;
       }
     }
   }
+
   &__item {
     white-space: nowrap;
     display: block;
@@ -91,20 +94,24 @@ $c-mselect: $c-primary;
     opacity: 0;
     color: $c-mselect;
     border-left: 3px solid transparent;
+
     @include transition(background-color border-color);
 
     &.current {
       background: $c-bg-zebra;
       border-color: $c-mselect;
     }
+
     &:hover {
       background: $c-mselect;
       color: $c-over;
     }
+
     &:focus-visible {
       outline: $outline;
       outline-offset: -2px;
     }
+
     &::before {
       margin-inline-end: 0.4em;
     }
diff --git a/ui/lib/css/component/_nav-tree.scss b/ui/lib/css/component/_nav-tree.scss
index 7f952c71531..ea4e506c196 100644
--- a/ui/lib/css/component/_nav-tree.scss
+++ b/ui/lib/css/component/_nav-tree.scss
@@ -33,20 +33,21 @@
   .branch {
     .content {
       @extend %box-radius;
+
       background: $c-bg-zebra;
       margin: 3em 0;
       padding: 2em 3em;
     }
+
     .links a {
       @extend %box-radius;
+      @include transition;
 
       font-size: 1.2em;
       display: block;
       padding: 1em;
       padding-inline-start: 30px;
 
-      @include transition;
-
       &:hover {
         color: $c-over;
         background: $c-primary;
diff --git a/ui/lib/css/component/_now-playing.scss b/ui/lib/css/component/_now-playing.scss
index 6dee0ed9e6d..b00085be833 100644
--- a/ui/lib/css/component/_now-playing.scss
+++ b/ui/lib/css/component/_now-playing.scss
@@ -1,5 +1,6 @@
 .now-playing {
   display: grid;
+
   ---np-min-width: 200px;
 
   @media (max-width: at-most($xx-small)) {
diff --git a/ui/lib/css/component/_pgn-viewer.scss b/ui/lib/css/component/_pgn-viewer.scss
index 17f667d6968..62690d9a185 100644
--- a/ui/lib/css/component/_pgn-viewer.scss
+++ b/ui/lib/css/component/_pgn-viewer.scss
@@ -10,9 +10,9 @@
   --c-lpv-bg-pane: #{$m-bg-zebra2--fade-1};
   --c-lpv-pgn-text: #{$c-bg-zebra2};
   --c-lpv-font: #{$c-font};
+
   // TODO: erase or replace with `--c-lpv-past-moves` when lpv-pgn-viewer > 2.1.0 is out
   --c-lpv-font-accent: #{$c-font};
-
   --c-lpv-font-shy: #{$c-font-dim};
   --c-lpv-accent-over: #{$c-over};
   --c-lpv-fbt-hover: #{$m-primary_bg--mix-75};
@@ -35,6 +35,7 @@
   --c-lpv-bg-interesting-hover: #{$m-interesting_bg--mix-30};
 
   @extend %box-neat-force;
+
   &__player__title {
     color: $c-brag;
   }
diff --git a/ui/lib/css/component/_podium.scss b/ui/lib/css/component/_podium.scss
index eb4e7add180..65fa50204d2 100644
--- a/ui/lib/css/component/_podium.scss
+++ b/ui/lib/css/component/_podium.scss
@@ -15,6 +15,7 @@
   @media (max-width: at-most($xx-small)) {
     display: none;
   }
+
   > div {
     @extend %ellipsis;
 
@@ -23,10 +24,12 @@
 
     &.lame {
       opacity: 0.5;
+
       .user-link {
         text-decoration: line-through;
         font-weight: normal;
       }
+
       .trophy {
         opacity: 0.3;
         filter: grayscale(100%) contrast(10%);
diff --git a/ui/lib/css/component/_power-tip.scss b/ui/lib/css/component/_power-tip.scss
index 19274c7d6e7..5778200620a 100644
--- a/ui/lib/css/component/_power-tip.scss
+++ b/ui/lib/css/component/_power-tip.scss
@@ -26,12 +26,14 @@
     body.no-rating & {
       height: unset;
     }
+
     padding: 0.4em 0.5em 0.3em 0.5em;
     border-bottom: $border;
     overflow: hidden;
 
     &__top {
       @extend %flex-between-nowrap, %ellipsis;
+
       gap: 0.6ch;
 
       .user-link {
@@ -39,8 +41,10 @@
         display: block;
         font-size: 1.1em;
       }
+
       &__flag {
         @extend %flex-center;
+
         margin-inline-start: 0.5ch;
         gap: 0.5ch;
         flex: 1 1 auto;
@@ -48,6 +52,7 @@
         font-size: 0.9em;
         color: $c-font-dim;
       }
+
       signal {
         flex: 0 0 auto;
       }
@@ -70,6 +75,7 @@
         padding: 2px 3px;
         text-align: left;
       }
+
       body.no-rating & {
         display: none;
       }
@@ -110,6 +116,7 @@
 
   &__details {
     @extend %flex-between;
+
     white-space: nowrap;
 
     &__marks {
diff --git a/ui/lib/css/component/_reconnecting.scss b/ui/lib/css/component/_reconnecting.scss
index 15a930ad393..515b22b5940 100644
--- a/ui/lib/css/component/_reconnecting.scss
+++ b/ui/lib/css/component/_reconnecting.scss
@@ -21,7 +21,9 @@ $recon-height: 2.5rem;
   background: $c-bad;
   color: $c-over;
   bottom: 0;
+
   @include inline-start(0);
+
   height: $recon-height;
   padding: 0 1rem;
   border-top-right-radius: 3px;
diff --git a/ui/lib/css/component/_slist.scss b/ui/lib/css/component/_slist.scss
index b58b6537cce..201d27909ed 100644
--- a/ui/lib/css/component/_slist.scss
+++ b/ui/lib/css/component/_slist.scss
@@ -73,6 +73,7 @@
   @media (max-width: at-most($x-small)) {
     border-collapse: collapse;
     table-layout: fixed;
+
     thead {
       border: none;
       clip-path: rect(0 0 0 0);
diff --git a/ui/lib/css/component/_subnav.scss b/ui/lib/css/component/_subnav.scss
index 01c6513b75b..34c60b080f0 100644
--- a/ui/lib/css/component/_subnav.scss
+++ b/ui/lib/css/component/_subnav.scss
@@ -1,6 +1,7 @@
 .subnav {
   a {
     @extend %page-text;
+
     white-space: nowrap;
   }
 
@@ -13,6 +14,7 @@
     flex-direction: row;
     overflow: hidden;
     width: 100%;
+
     &__inner {
       display: flex;
       flex-flow: row nowrap;
@@ -40,6 +42,7 @@
       &.active {
         color: $c-font-clear;
         position: relative;
+
         &::after {
           content: '';
           position: absolute;
@@ -70,6 +73,7 @@
     /* active border must go over the page content */
     a {
       @include box-radius;
+
       display: flex;
       align-items: center;
       gap: 1ch;
diff --git a/ui/lib/css/component/_tablesort.scss b/ui/lib/css/component/_tablesort.scss
index 165474d1484..66a7e34d584 100644
--- a/ui/lib/css/component/_tablesort.scss
+++ b/ui/lib/css/component/_tablesort.scss
@@ -1,11 +1,13 @@
 th[role='columnheader']:not([data-sort-method='none']) {
   @include prevent-select;
+
   cursor: pointer;
 }
 
 th[role='columnheader']:not([data-sort-method='none'])::after {
   @extend %data-icon;
   @include prevent-select;
+
   content: $licon-UpTriangle;
   display: inline;
   margin-inline-start: 0.5em;
@@ -22,6 +24,7 @@ th[aria-sort='descending']:not([data-sort-method='none'])::after {
 th[aria-sort]:not([data-sort-method='none']) {
   background: $m-accent--fade-85;
   color: $c-font-clear;
+
   &::after {
     visibility: visible;
     opacity: 0.7;
diff --git a/ui/lib/css/component/_tabs-horiz.scss b/ui/lib/css/component/_tabs-horiz.scss
index 9705d0abff2..854aeb4b7e3 100644
--- a/ui/lib/css/component/_tabs-horiz.scss
+++ b/ui/lib/css/component/_tabs-horiz.scss
@@ -25,6 +25,7 @@ $c-tabs-hover: $m-accent--fade-50 !default;
     border-bottom: 2px solid transparent;
     min-width: 15%;
     letter-spacing: -0.5px;
+
     @include transition(color border-color, 0.25s);
 
     @media (min-width: at-least($xx-small)) {
diff --git a/ui/lib/css/component/_tagify.scss b/ui/lib/css/component/_tagify.scss
index 637774ba5b5..565dbab7310 100644
--- a/ui/lib/css/component/_tagify.scss
+++ b/ui/lib/css/component/_tagify.scss
@@ -12,13 +12,10 @@
   $tags-border-color: $c-border !default;
   $tags-hover-border-color: $m-dimmer_clearer--mix-63 !default;
   $tags-focus-border-color: $c-primary !default;
-
   $tagMargin: 5px !default;
   $tag-pad: 0.3em 0.5em !default;
-
   $tag-min-width: 1ch !default;
   $tag-max-width: auto !default;
-
   $tag-text-color: $c-font-clearer !default;
   $tag-text-color--edit: $c-font-clearer !default;
   $tag-bg: $c-bg-zebra2 !default;
@@ -31,7 +28,6 @@
   $tag-invalid-bg: $m-bad_bg-zebra2--mix-20 !default;
   $tag-inset-shadow-size: 1.5em !default;
   $tag-hide-transition: 0.3s !default;
-
   $placeholder-color: $m-font--fade-50 !default;
   $placeholder-color-focus: $m-font--fade-70 !default;
   $input-color: inherit !default;
@@ -188,6 +184,7 @@
 
       &::after {
         @include loader;
+
         content: '' !important;
         margin: -2px 0 -2px 0.5em;
       }
@@ -212,7 +209,9 @@
   &__tag {
     display: inline-flex;
     align-items: center;
+
     @include margin-direction($tagMargin, 0, $tagMargin, $tagMargin);
+
     position: relative;
     z-index: 1;
     outline: none;
@@ -239,6 +238,7 @@
 
       > * {
         @extend %ellipsis;
+
         white-space: pre-wrap;
         display: inline-block;
         vertical-align: top;
@@ -270,7 +270,6 @@
         pointer-events: none;
         transition: 120ms ease;
         animation: tags-bump 0.3s ease-out 1;
-
         box-shadow: 0 0 0 var(--tag-inset-shadow-size, $tag-inset-shadow-size) var(--tag-bg, $tag-bg) inset;
       }
     }
@@ -280,6 +279,7 @@
         &::before {
           $size: -$tagMargin / 2;
           $size: -2px;
+
           inset: $size;
           box-shadow: 0 0 0 $tag-inset-shadow-size $tag-hover inset;
           box-shadow: 0 0 0 var(--tag-inset-shadow-size, $tag-inset-shadow-size) var(--tag-hover, $tag-hover)
@@ -297,7 +297,9 @@
 
       &::after {
         --loader-size: 0.4em;
+
         @include loader;
+
         margin: 0 0.5em 0 -0.1em;
       }
     }
@@ -405,12 +407,10 @@
       background: var(--tag-remove-btn-bg, $tag-remove-btn-bg);
       color: $tag-remove-btn-color;
       color: var(--tag-remove-btn-color, $tag-remove-btn-color);
-
       width: $size;
       height: $size;
       margin-inline-end: $size / 3;
       margin-inline-start: auto;
-
       overflow: hidden;
       transition: 0.2s ease-out;
 
@@ -469,7 +469,6 @@
 
     // #160 Line break (\n) as delimiter
     white-space: pre-wrap;
-
     color: $input-color;
     color: var(--input-color, $input-color);
     box-sizing: inherit;
@@ -483,8 +482,8 @@
 
       &::before {
         @include placeholder;
-        display: inline-block;
 
+        display: inline-block;
         width: auto;
 
         #{ $self }--mix & {
@@ -500,10 +499,12 @@
         @include placeholder(false);
 
         /* ALL MS BROWSERS: hide placeholder (on focus) otherwise the caret is places after it, which is weird */
+
         /* IE10+ CSS styles go here */
         @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
           display: none;
         }
+
         /* IE Edge 12+ CSS styles go here */
         @supports (-ms-ime-align: auto) {
           display: none;
@@ -620,7 +621,9 @@
       opacity: 0.5;
       position: absolute;
       top: 50%;
+
       @include inline-end(0);
+
       bottom: 0;
       font: $size monospace;
       line-height: $size / 2;
@@ -639,7 +642,9 @@
     #{$self}__tag {
       position: absolute;
       top: 0;
+
       @include inline-end(1.8em);
+
       bottom: 0;
 
       div {
diff --git a/ui/lib/css/component/_toggle-box.scss b/ui/lib/css/component/_toggle-box.scss
index 76ccaba0242..be93b21ced0 100644
--- a/ui/lib/css/component/_toggle-box.scss
+++ b/ui/lib/css/component/_toggle-box.scss
@@ -1,5 +1,6 @@
 .toggle-box {
   @extend %box-radius;
+
   border: $border;
   background: $c-bg-zebra;
   margin: 1rem 0 3rem 0;
@@ -8,44 +9,54 @@
   legend {
     @extend %box-radius;
     @include prevent-select;
+
     background: $c-bg-zebra;
     padding: 0.5em 1.5em;
     text-align: right;
     font-size: 1.2em;
     line-height: 26px;
+
     &:focus-visible {
       outline: $outline;
     }
   }
 }
+
 .toggle-box--toggle {
   legend {
     border: 1px solid transparent;
     border-top-color: $c-border;
     cursor: pointer;
+
     &::after {
       content: '▲';
       margin-left: 1ch;
     }
   }
 }
+
 .toggle-box--toggle-off {
   background: none;
   border-color: transparent;
   border-top-color: $c-border;
   border-radius: 0;
   padding-top: 0;
+
   legend {
     border: $border;
     background: none;
+
     &:hover {
       @extend %box-neat;
+
       background: $c-bg-zebra;
     }
+
     &::after {
       content: '▼';
     }
   }
+
   > *:not(legend) {
     display: none;
   }
diff --git a/ui/lib/css/component/_ublog-card.scss b/ui/lib/css/component/_ublog-card.scss
index 0ffda4f51c5..4781c6725a9 100644
--- a/ui/lib/css/component/_ublog-card.scss
+++ b/ui/lib/css/component/_ublog-card.scss
@@ -3,9 +3,9 @@
   grid-template-columns: repeat(auto-fill, minmax(22em, 1fr));
   gap: 1em;
 }
+
 .ublog-post-card {
   @extend %box-neat-force;
-
   @include transition(box-shadow);
 
   background: $c-bg-zebra;
@@ -32,12 +32,16 @@
     position: absolute;
     top: 0;
     line-height: 1.3em;
+
     &.pos-bottom {
       top: unset;
       bottom: 0;
     }
+
     @include padding-direction(0.2em, 0.5em, 0.3em, 0.5em);
+
     --c-ublog-post-card-over-image: #ddd;
+
     @include if-light {
       --c-ublog-post-card-over-image: #333;
     }
@@ -50,25 +54,32 @@
       background: rgba(255, 255, 255, 0.65);
       text-shadow: 0 1px 1px white;
     }
+
     opacity: 1;
   }
+
   time {
     @include inline-start(0);
+
     border-radius: 0 0 $box-radius-size 0;
   }
+
   .user-link {
     @include inline-end(0);
+
     border-radius: 0 0 0 $box-radius-size;
   }
 
   &__image {
     width: 100%;
     height: auto;
+
     &.ublog-post-image-default {
       background-image: url('../images/placeholder-margin.png');
       background-size: cover;
       background-position: center;
     }
+
     @include broken-img(16 / 10);
   }
 
@@ -80,6 +91,7 @@
 
   &__title {
     @include line-clamp(2);
+
     font-size: 1.3em;
     color: $c-font-clear;
   }
@@ -94,6 +106,7 @@
 
   &--by-lichess {
     border: 1px solid $c-brag;
+
     .user-link {
       color: $c-brag;
       font-weight: bold;
diff --git a/ui/lib/css/component/_user-link.scss b/ui/lib/css/component/_user-link.scss
index 617cb056fe5..0c638e1efba 100644
--- a/ui/lib/css/component/_user-link.scss
+++ b/ui/lib/css/component/_user-link.scss
@@ -12,12 +12,13 @@
   color: $c-font;
 
   &.online .line {
+    opacity: 0.9;
+    color: $c-good;
+
     &::before {
       content: $licon-Disc;
     }
-    opacity: 0.9;
 
-    color: $c-good;
     &.patron {
       opacity: 1;
     }
@@ -53,6 +54,7 @@
       content: $licon-Agent;
     }
   }
+
   .rating {
     body.no-rating & {
       display: none;
@@ -66,6 +68,7 @@ a.user-link {
       color: $c-link;
     }
   }
+
   @media (hover: none) and (pointer: coarse) {
     &:active {
       color: $c-link;
@@ -84,11 +87,13 @@ a.user-link {
 
 .uflair {
   @include prevent-select;
+
   height: 1.1em;
   aspect-ratio: 1;
   vertical-align: middle;
   margin-left: 0.5ch;
   transform: translateY(-0.1em);
+
   // keeps the username easily selectable
   body.no-flair & {
     display: none;
diff --git a/ui/lib/css/component/_vertical-resize.scss b/ui/lib/css/component/_vertical-resize.scss
index 7b58e210468..20511dd8648 100644
--- a/ui/lib/css/component/_vertical-resize.scss
+++ b/ui/lib/css/component/_vertical-resize.scss
@@ -1,6 +1,7 @@
 .vertical-resize {
   @extend %flex-column;
   @include transition;
+
   position: relative;
   display: none;
   justify-content: center;
@@ -28,11 +29,13 @@
 
   hr {
     @include transition;
+
     margin: 0;
     width: 14px;
     height: 1px;
     pointer-events: none;
   }
+
   .chat__members {
     position: absolute;
     top: 0;
diff --git a/ui/lib/css/component/_zen-toggle.scss b/ui/lib/css/component/_zen-toggle.scss
index 6645e30213d..df7688673e8 100644
--- a/ui/lib/css/component/_zen-toggle.scss
+++ b/ui/lib/css/component/_zen-toggle.scss
@@ -14,21 +14,27 @@
     height: 4em;
     padding: 1em 1em;
     background: center no-repeat url('../logo/lichess-white.svg');
+
     @include if-light {
       background-image: url('../logo/lichess.svg');
     }
+
     background-size: 2em;
     opacity: 0.5;
+
     &:hover {
       opacity: 1;
     }
   }
 }
+
 #zentog {
   @extend %box-radius;
+
   flex: 0 0 auto;
   padding: 0.2em 1em;
   opacity: 0.5;
+
   &:hover {
     opacity: 1;
   }
diff --git a/ui/lib/css/form/_check.scss b/ui/lib/css/form/_check.scss
index 1f0f5f0bb69..0813452133f 100644
--- a/ui/lib/css/form/_check.scss
+++ b/ui/lib/css/form/_check.scss
@@ -1,10 +1,13 @@
 .form-check__container {
   @extend %flex-center-nowrap;
+
   user-select: none;
+
   .form-label {
     margin-bottom: 0;
     cursor: pointer;
   }
+
   &:has(.form-label:hover) .form-check__label {
     border-color: $c-good;
   }
@@ -14,12 +17,14 @@
   position: relative;
   cursor: pointer;
 }
+
 .form-check__input + .form-label {
   margin-inline-start: 0.5rem;
 }
 
 .form-check__label {
   @extend %box-radius;
+
   position: relative;
   display: block;
   margin-bottom: 0;
@@ -28,10 +33,13 @@
   cursor: pointer;
   height: 24px;
   width: 24px;
+
   @include transition(background-color border-color, 0.1s ease-in-out);
+
   &:hover {
     border-color: $c-good;
   }
+
   &::after {
     border: 2.5px solid #fff;
     border-top: none;
@@ -49,22 +57,29 @@
 
 .form-check__input input {
   @extend %visually-hidden;
+
   position: absolute;
+
   &:disabled + .form-check__label {
     opacity: 0.6;
     cursor: not-allowed !important;
   }
+
   &:not(:disabled):focus-visible + .form-check__label {
     @extend %focus-shadow;
+
     border-color: $c-font;
   }
+
   &:checked + .form-check__label {
     background-color: $c-good;
     border-color: $c-good;
   }
+
   &:checked:hover + .form-check__label {
     background-color: $m-good--fade-20;
   }
+
   &:checked + .form-check__label::after {
     opacity: 1;
   }
diff --git a/ui/lib/css/form/_cmn-favourite.scss b/ui/lib/css/form/_cmn-favourite.scss
index 28ab7b45dfe..ae680f40100 100644
--- a/ui/lib/css/form/_cmn-favourite.scss
+++ b/ui/lib/css/form/_cmn-favourite.scss
@@ -1,7 +1,9 @@
 .cmn-favourite input {
   @extend %double-tap;
+
   position: absolute;
   margin-inline-start: -99999px;
+
   .force-ltr & {
     margin-left: -99999px;
   }
@@ -11,6 +13,7 @@ $star-width: 1.8rem;
 
 .cmn-favourite label {
   @include prevent-select;
+
   display: block;
   position: relative;
   cursor: pointer;
@@ -21,6 +24,7 @@ $star-width: 1.8rem;
   &::before {
     @extend %data-icon;
     @include inline-start(0);
+
     content: $licon-StarOutline;
     display: block;
     position: absolute;
@@ -29,9 +33,11 @@ $star-width: 1.8rem;
     text-align: center;
   }
 }
+
 .cmn-favourite:hover label {
   color: $c-brag;
 }
+
 .cmn-favourite input:checked + label {
   &::before {
     content: $licon-Star;
diff --git a/ui/lib/css/form/_cmn-toggle.scss b/ui/lib/css/form/_cmn-toggle.scss
index 70f630ae417..c058d90612f 100644
--- a/ui/lib/css/form/_cmn-toggle.scss
+++ b/ui/lib/css/form/_cmn-toggle.scss
@@ -5,12 +5,15 @@
   cursor: pointer;
   user-select: none;
 }
+
 .cmn-toggle input {
   @extend %double-tap, %visually-hidden;
 }
 
 .cmn-toggle label {
   @include prevent-select;
+  @include transition(background box-shadow);
+
   display: block;
   position: relative;
   cursor: pointer;
@@ -22,7 +25,6 @@
   border-radius: 24px;
   background-clip: padding-box;
   background-color: $c-font-dimmer;
-  @include transition(background box-shadow);
 
   &::before,
   &::after {
@@ -32,28 +34,32 @@
     width: 22px;
     height: 22px;
     bottom: 0;
+
     @include inline-start(0);
   }
 
   &::before {
     @extend %data-icon;
+    @include transition(margin color);
+
     font-size: 1em;
     z-index: 1;
     text-align: center;
     line-height: 22px;
     content: $licon-X;
     color: $c-font-dimmer;
-    @include transition(margin color);
   }
 
   &::after {
     @extend %metal;
+    @include transition(margin box-shadow);
+
+    border-radius: 100%;
+    box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.3);
+
     @include if-transp {
       background: linear-gradient(to bottom, hsl($site-hue, 7%, 22), hsl($site-hue, 5%, 19) 100%);
     }
-    border-radius: 100%;
-    box-shadow: 0 1px 2.5px rgba(0, 0, 0, 0.3);
-    @include transition(margin box-shadow);
   }
 }
 
diff --git a/ui/lib/css/form/_emoji-picker.scss b/ui/lib/css/form/_emoji-picker.scss
index cfdca7759c5..cc5ad0b59a1 100644
--- a/ui/lib/css/form/_emoji-picker.scss
+++ b/ui/lib/css/form/_emoji-picker.scss
@@ -1,5 +1,6 @@
 .emoji-details {
   position: relative;
+
   // ensure the emoji picker is above the text and its licon
   z-index: 2;
   width: 50px;
@@ -30,6 +31,7 @@
     position: absolute;
     width: 50px;
   }
+
   img {
     display: none;
     position: absolute;
diff --git a/ui/lib/css/form/_form3.scss b/ui/lib/css/form/_form3.scss
index bc8f9b616b5..dcdf03fa0e5 100644
--- a/ui/lib/css/form/_form3.scss
+++ b/ui/lib/css/form/_form3.scss
@@ -72,8 +72,10 @@ textarea.form-control {
 .password-complexity-label {
   color: $c-font-dim;
 }
+
 .form-help pre {
   @extend %box-radius;
+
   padding: 0.2em 1em;
   margin: 0.2em 0;
   background: $c-bg-page;
diff --git a/ui/lib/css/form/_image.scss b/ui/lib/css/form/_image.scss
index 2950b323958..37f3825957b 100644
--- a/ui/lib/css/form/_image.scss
+++ b/ui/lib/css/form/_image.scss
@@ -1,12 +1,15 @@
 %image-preview-and-upload {
   @extend %flex-center;
+
   gap: var(---box-padding);
   background: $c-bg-zebra;
+
   img,
   i {
     flex: 1 1 50%;
     cursor: pointer;
   }
+
   > div {
     flex: 0 0 230px;
   }
diff --git a/ui/lib/css/form/_password.scss b/ui/lib/css/form/_password.scss
index c110dbdd753..a32c77f9c7e 100644
--- a/ui/lib/css/form/_password.scss
+++ b/ui/lib/css/form/_password.scss
@@ -3,10 +3,12 @@ input[type='password'] {
     display: none;
   }
 }
+
 .password-complexity {
   margin-top: -2rem;
   margin-bottom: 3rem;
 }
+
 .password-complexity-meter {
   display: flex;
   gap: 0.25rem;
@@ -28,6 +30,7 @@ input[type='password'] {
     outline: $outline;
   }
 }
+
 .password-reveal.revealed {
   color: $c-bad;
 }
diff --git a/ui/lib/css/form/_radio.scss b/ui/lib/css/form/_radio.scss
index 0a156c8ddb4..e57339ba35c 100644
--- a/ui/lib/css/form/_radio.scss
+++ b/ui/lib/css/form/_radio.scss
@@ -1,4 +1,5 @@
 $c-border: hsl(37, 5%, 13%) !default;
+
 group.radio {
   @extend %box-neat, %flex-wrap;
 
diff --git a/ui/lib/css/game/_clock.scss b/ui/lib/css/game/_clock.scss
index 3ff61738d9b..2173d3c1f5d 100644
--- a/ui/lib/css/game/_clock.scss
+++ b/ui/lib/css/game/_clock.scss
@@ -1,5 +1,6 @@
 .rclock {
   @include prevent-select;
+
   position: relative;
   display: flex;
   justify-content: flex-end;
@@ -157,6 +158,7 @@
     &.low {
       opacity: 0.15;
     }
+
     @media (prefers-reduced-motion: reduce) {
       &.low {
         opacity: 0.5;
diff --git a/ui/lib/css/header/_buttons.scss b/ui/lib/css/header/_buttons.scss
index a1e3dbbac9a..015cb4cb5fd 100644
--- a/ui/lib/css/header/_buttons.scss
+++ b/ui/lib/css/header/_buttons.scss
@@ -6,19 +6,21 @@
 
 .site-buttons {
   @extend %flex-center-nowrap;
+
   position: relative;
 
   .link {
     @include transition(color);
     @extend %top-icon;
+
     color: $c-font;
+    font-size: 1.1rem;
+    padding: 0 20px;
+
     @include if-transp {
       @extend %page-text;
     }
 
-    font-size: 1.1rem;
-    padding: 0 20px;
-
     body[data-user] & {
       padding: 0 0.7rem;
     }
@@ -43,6 +45,7 @@
 
   .initiating {
     @extend %flex-center-center;
+
     height: 300px;
     width: 225px;
   }
@@ -52,7 +55,9 @@
 
     display: none;
     position: absolute;
+
     @include inline-end(0);
+
     top: $site-header-height;
     background: $c-bg-header-dropdown;
     z-index: $z-dropdown-109;
@@ -76,7 +81,9 @@
 
   .signin-or-signup {
     @extend %flex-center;
+
     gap: 1em;
+
     .signup {
       background: none;
       border: 2px solid $c-link;
@@ -97,6 +104,7 @@
       text-shadow: none;
       font-weight: normal;
     }
+
     &--low::after {
       color: $c-good !important;
     }
@@ -126,12 +134,14 @@
 
 #user_tag {
   @extend %flex-center-nowrap;
+
   white-space: nowrap;
   gap: 0.5rem;
 
   &::after {
     @include transition(color);
     @extend %data-icon;
+
     color: $m-font_dimmer--mix-85;
     content: $licon-AccountCircle;
     font-size: 2rem;
diff --git a/ui/lib/css/header/_header.scss b/ui/lib/css/header/_header.scss
index b4d0ed5633d..6ec5eb2a935 100644
--- a/ui/lib/css/header/_header.scss
+++ b/ui/lib/css/header/_header.scss
@@ -5,6 +5,7 @@
 
 body > header {
   @include prevent-select;
+
   height: $site-header-height;
   display: flex;
   justify-content: space-between;
@@ -14,17 +15,19 @@ body > header {
   margin: 0 auto;
 
   @include mq-sticky-header {
+    @include transition(transform border-color, $transition-duration, ease-in-out);
+
     max-width: unset;
     position: fixed;
     top: 0;
     width: 100%;
     padding: 0 var(---site-header-sticky-padding);
     border-bottom: 1px solid transparent;
-    @include transition(transform border-color, $transition-duration, ease-in-out);
 
     &.scrolled {
       background-image: linear-gradient(to bottom, $c-body-gradient, $m-body-gradient_bg-page--mix-50 60px);
       border-color: black;
+
       @include if-light {
         border-color: hsl(0, 0%, 70%);
       }
@@ -32,6 +35,7 @@ body > header {
 
     @include if-transp {
       @include back-blur(6px);
+
       border: none;
       background: hsla(0, 0, 60%, 0.14);
     }
@@ -63,6 +67,7 @@ body > header {
 
 body.zen {
   @include topnav-unsticky;
+
   header::before {
     display: none;
   }
@@ -70,13 +75,18 @@ body.zen {
 
 #topnav .community-patron {
   @extend %flex-center;
+
   &::after {
     @extend %data-icon;
+
     content: $licon-Wings;
     font-size: 1.3em;
     color: $c-brag;
+
     @include margin-direction(0, 0, 0.08ch, 0.3ch);
+
     transform: scaleX(-1);
+
     @include if-rtl {
       transform: none;
     }
@@ -89,10 +99,12 @@ body.zen {
 
   &__donate {
     @extend %flex-center;
+
     color: $c-brag;
     padding: 0 1rem;
     text-transform: uppercase;
     line-height: $site-header-height;
+
     @media (max-width: at-most($xx-small)) {
       display: none;
     }
diff --git a/ui/lib/css/header/_title.scss b/ui/lib/css/header/_title.scss
index b7775fbdb13..f941a060be8 100644
--- a/ui/lib/css/header/_title.scss
+++ b/ui/lib/css/header/_title.scss
@@ -1,5 +1,6 @@
 .site-title {
   @extend %base-font, %page-text-shadow, %flex-center-nowrap;
+
   padding: 0 1rem;
   margin-inline-start: 0.5rem;
   gap: 0.75rem;
@@ -32,11 +33,12 @@
   }
 
   .site-icon {
+    display: none;
     font-size: 24px;
+
     @media (min-height: at-least($tall)) {
       font-size: 36px;
     }
-    display: none;
   }
 
   @media (max-width: at-least($xx-small)) {
@@ -53,6 +55,7 @@
     .site-name {
       display: block;
     }
+
     .site-icon {
       display: none;
     }
diff --git a/ui/lib/css/header/_topnav-hidden.scss b/ui/lib/css/header/_topnav-hidden.scss
index 1684167b099..c9c6a1cf3f9 100644
--- a/ui/lib/css/header/_topnav-hidden.scss
+++ b/ui/lib/css/header/_topnav-hidden.scss
@@ -12,15 +12,25 @@
   }
 
   .hbg {
+    @include inline-start(0);
+
     position: absolute;
     top: 0;
-    @include inline-start(0);
     width: $site-header-height;
     height: $site-header-height;
     cursor: pointer;
     z-index: $z-topnav-111;
 
     &__in {
+      @include inline-start(8.5px);
+
+      transition: transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+      top: 50%;
+
+      @include mq-site-header-tall {
+        @include inline-start(13px);
+      }
+
       &,
       &::after,
       &::before {
@@ -38,15 +48,6 @@
         }
       }
 
-      top: 50%;
-      @include inline-start(8.5px);
-
-      @include mq-site-header-tall {
-        @include inline-start(13px);
-      }
-
-      transition: transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
-
       &::after,
       &::before {
         content: '';
@@ -106,28 +107,29 @@
   }
 
   #topnav {
-    @include if-transp {
-      @include back-blur;
-    }
+    @include inline-start(0);
+
     display: flex;
     flex-flow: row wrap;
     position: fixed;
     top: $site-header-height;
     bottom: 0;
-    @include inline-start(0);
     background: $c-bg-high;
-
-    transform: translateX(calc(-100% - 10px));
-    @include if-rtl {
-      transform: translateX(calc(100% + 10px));
-    }
-
     padding-bottom: 1.2rem;
     overflow-y: auto;
     overscroll-behavior: contain;
     box-shadow: 2px 5px 7px hsla(0, 0, 0%, 0.5);
     border-radius: 0 3px 0 0;
     max-width: 80%;
+    transform: translateX(calc(-100% - 10px));
+
+    @include if-rtl {
+      transform: translateX(calc(100% + 10px));
+    }
+
+    @include if-transp {
+      @include back-blur;
+    }
 
     @include mq-safari {
       min-height: 75vh; // safari has funny ideas about fixed parents bounding fixed children
@@ -185,6 +187,7 @@
     .topnav-toggle:checked ~ & {
       z-index: $z-topnav-111;
       transform: translateX(0);
+
       a {
         opacity: 1;
         transition: opacity 125ms ease-in-out 125ms;
@@ -197,7 +200,6 @@
   }
 
   body.masked {
-    /* prevent scrolling while topnav is open */
-    overflow: hidden;
+    overflow: hidden; // prevent scrolling while topnav is open
   }
 }
diff --git a/ui/lib/css/header/_topnav-visible.scss b/ui/lib/css/header/_topnav-visible.scss
index 7f32dc928cc..fccc53ff3e2 100644
--- a/ui/lib/css/header/_topnav-visible.scss
+++ b/ui/lib/css/header/_topnav-visible.scss
@@ -19,12 +19,6 @@
       height: var(---nav-section);
 
       > a {
-        @include if-light {
-          text-shadow: 0 1px 0 $c-font-shadow;
-        }
-        @include if-transp {
-          text-shadow: 0.5px 1px 1px #000;
-        }
         color: $c-font-page;
         display: block;
         height: 100%;
@@ -33,6 +27,14 @@
         text-transform: uppercase;
         border-inline-start: 2px solid transparent;
 
+        @include if-light {
+          text-shadow: 0 1px 0 $c-font-shadow;
+        }
+
+        @include if-transp {
+          text-shadow: 0.5px 1px 1px #000;
+        }
+
         &:focus-visible {
           outline-offset: -2px;
         }
@@ -47,12 +49,15 @@
       visibility: hidden;
       max-height: inherit;
       position: absolute;
+
       @include inline-start(0);
+
       background: $c-bg-header-dropdown;
       min-width: 10rem;
       box-shadow: 2px 5px 6px rgba(0, 0, 0, 0.3);
       border-radius: 0 3px 3px 3px;
       border-inline-start: 2px solid $c-primary;
+
       @include if-transp {
         @include back-blur;
       }
@@ -64,6 +69,7 @@
 
         &:hover {
           background: $c-primary;
+
           &,
           &::after {
             color: $c-over;
diff --git a/ui/lib/css/layout/_base.scss b/ui/lib/css/layout/_base.scss
index 935e6cae2ca..cb34efeb433 100644
--- a/ui/lib/css/layout/_base.scss
+++ b/ui/lib/css/layout/_base.scss
@@ -1,4 +1,5 @@
 @import 'vars';
+
 $vp-min-width: 320px;
 $vp-max-width: 1200px;
 
@@ -9,6 +10,7 @@ body {
   ---main-margin: 0px;
   ---sticky-gap: 0px;
   ---block-gap: 10px;
+
   @include fluid-size('---box-padding', 15px, 50px);
 
   @include mq-site-header-tall {
@@ -23,12 +25,14 @@ body {
   @media (min-width: at-least($small)) {
     ---main-margin: 1vw;
     ---block-gap: 15px;
+
     margin-bottom: $block-gap;
   }
 }
 
 #main-wrap {
   ---main-max-width: #{$main-max-width};
+
   display: grid;
   grid-template-areas: '. . main . .';
   grid-template-columns: $main-margin 1fr minmax(auto, var(---main-max-width)) 1fr $main-margin;
diff --git a/ui/lib/css/layout/_uniboard.scss b/ui/lib/css/layout/_uniboard.scss
index a933f8233ec..7f751b04b82 100644
--- a/ui/lib/css/layout/_uniboard.scss
+++ b/ui/lib/css/layout/_uniboard.scss
@@ -5,6 +5,7 @@ body {
     // ---zoom: 80; defined in the HTML, loaded from server
     ---board-scale: calc((var(---zoom) / 100) * 0.75 + 0.25);
   }
+
   ---col2-uniboard-width: #{$col2-uniboard-width};
   ---col3-uniboard-width: #{$col3-uniboard-width};
 }
diff --git a/ui/lib/css/layout/_vars.scss b/ui/lib/css/layout/_vars.scss
index f0f5ebd8bab..9ea3928a5f9 100644
--- a/ui/lib/css/layout/_vars.scss
+++ b/ui/lib/css/layout/_vars.scss
@@ -2,9 +2,11 @@ body {
   @include mq-is-col1 {
     ---display-columns: 1;
   }
+
   @include mq-at-least-col2 {
     ---display-columns: 2;
   }
+
   @include mq-at-least-col3 {
     ---display-columns: 3;
   }
diff --git a/ui/lib/css/page/_lichess.scss b/ui/lib/css/page/_lichess.scss
index 35504e55773..da0d54a4c40 100644
--- a/ui/lib/css/page/_lichess.scss
+++ b/ui/lib/css/page/_lichess.scss
@@ -6,16 +6,11 @@
 @import '../base/util';
 @import '../base/scrollbar';
 @import '../base/ltr';
-
-@include theme-style;
-
 @import '../layout/vars';
 @import '../layout/base';
 @import '../layout/page-menu';
-
 @import '../theme/board/chessground';
-
 @import '../header/header';
 @import '../../../cli/css/clinput';
-
 @import 'components';
+@include theme-style;
diff --git a/ui/lib/css/puz/_combo.scss b/ui/lib/css/puz/_combo.scss
index fdc1178ffdc..22ac985fba3 100644
--- a/ui/lib/css/puz/_combo.scss
+++ b/ui/lib/css/puz/_combo.scss
@@ -58,7 +58,9 @@
 
       position: absolute;
       bottom: 0;
+
       @include inline-start(0);
+
       height: 100%;
     }
 
@@ -108,7 +110,6 @@
 
   &__levels {
     @extend %flex-center;
-
     @include margin-direction(0.3em, 0, 0, -0.6em);
   }
 
@@ -117,9 +118,11 @@
 
     direction: ltr;
     transform: skewX(-45deg);
+
     @include if-rtl {
       transform: skewX(45deg);
     }
+
     flex: 21% 0 0;
     margin-inline-end: 4%;
     font-size: 0.9em;
@@ -133,9 +136,11 @@
 
     span {
       transform: skewX(45deg);
+
       @include if-rtl {
         transform: skewX(-45deg);
       }
+
       display: block;
     }
 
diff --git a/ui/lib/css/puz/_history.scss b/ui/lib/css/puz/_history.scss
index f2e714f3d55..dfb086ea3ee 100644
--- a/ui/lib/css/puz/_history.scss
+++ b/ui/lib/css/puz/_history.scss
@@ -1,10 +1,12 @@
 .puz-history {
   .box__top {
     margin: -1em 0 0 0;
+
     &__actions {
       margin: 0;
     }
   }
+
   &__filter {
     margin: 0;
   }
diff --git a/ui/lib/css/setup/_colorChoice.scss b/ui/lib/css/setup/_colorChoice.scss
index 91626f27e14..4fc38c5de16 100644
--- a/ui/lib/css/setup/_colorChoice.scss
+++ b/ui/lib/css/setup/_colorChoice.scss
@@ -1,5 +1,6 @@
 .color-picker {
   --king-size: 32px;
+
   &__button {
     i {
       display: block;
diff --git a/ui/lib/css/theme/_pieces.scss b/ui/lib/css/theme/_pieces.scss
index 975647dd852..8328ddc0757 100644
--- a/ui/lib/css/theme/_pieces.scss
+++ b/ui/lib/css/theme/_pieces.scss
@@ -1,36 +1,47 @@
 .is2d .pawn.white {
   background-image: var(---white-pawn);
 }
+
 .is2d .knight.white {
   background-image: var(---white-knight);
 }
+
 .is2d .bishop.white {
   background-image: var(---white-bishop);
 }
+
 .is2d .rook.white {
   background-image: var(---white-rook);
 }
+
 .is2d .queen.white {
   background-image: var(---white-queen);
 }
+
 .is2d .king.white {
   background-image: var(---white-king);
 }
+
 .is2d .pawn.black {
   background-image: var(---black-pawn);
 }
+
 .is2d .knight.black {
   background-image: var(---black-knight);
 }
+
 .is2d .bishop.black {
   background-image: var(---black-bishop);
 }
+
 .is2d .rook.black {
   background-image: var(---black-rook);
 }
+
 .is2d .queen.black {
   background-image: var(---black-queen);
 }
+
 .is2d .king.black {
   background-image: var(---black-king);
 }
diff --git a/ui/lib/css/theme/_theme.default.scss b/ui/lib/css/theme/_theme.default.scss
index ee957c2b9a1..2abb143bf70 100644
--- a/ui/lib/css/theme/_theme.default.scss
+++ b/ui/lib/css/theme/_theme.default.scss
@@ -43,7 +43,6 @@ $c-dimmer: #000;
 $c-clearer: #fff;
 $c-mv-branch-white: #fff;
 $c-mv-branch-black: #000;
-
 $patron-colors: $patron-colors-dark;
 
 // shared-color-defs lists theme colors that share definitions. the assigned values usually depend on
@@ -75,20 +74,17 @@ $patron-colors: $patron-colors-dark;
   --c-metal-bottom: #{hsl($site-hue, 5%, 19%)};
   --c-metal-top-hover: #{hsl($site-hue, 7%, 25%)};
   --c-metal-bottom-hover: #{hsl($site-hue, 5%, 22%)};
-
   --c-font-dim: #{$c-font-dim};
   --c-font-dimmer: #{change-color($c-font, $lightness: 42%)};
   --c-font-clear: #{change-color($c-font, $lightness: 80%)};
   --c-font-clearer: #{change-color($c-font, $lightness: 89%)};
   --c-font-page: var(--c-font-dim);
   --c-font-shadow: hsla(0, 0, 0%, 0);
-
   --c-primary-dim: #{dim($c-primary, 15%)};
   --c-link-hover: #{clear(saturate($c-primary, 100%), 25%)};
   --c-chat-host-bg: rgba(78, 122, 29, 0.4);
   --c-chat-mention-bg: rgba(59, 92, 22, 0.4);
   --c-fancy: hsl(294, 62%, 48%);
-
   --c-border: #{$c-border};
   --c-border-page: hsl(0, 0%, 22%);
   --c-border-tour: #{mix(hsl(0, 0%, 22%), $c-bg-page, 50)};
@@ -108,7 +104,6 @@ $patron-colors: $patron-colors-dark;
   --c-accent-dim: #{dim($c-accent)};
   --c-accent-faint: hsla(22, 100%, 42%, 0.4);
   --c-accent-clear: #{dim($c-accent)};
-
   --c-dasher: #{$c-secondary};
   --c-bot: var(--c-fancy);
   --c-good: #{$c-secondary};
@@ -116,7 +111,6 @@ $patron-colors: $patron-colors-dark;
   --c-bad: #{$c-bad};
   --c-error: #{$c-bad};
   --c-live: #{$c-bad};
-
   --c-dasher-light: #{mix($c-secondary, $c-bg-low, 40%)};
   --c-racer-boost: #{adjust-color($c-brag, $saturation: 50%, $lightness: 70%)};
   --c-marathon: #{adjust-color($c-primary, $hue: -190deg, $saturation: -70%)};
@@ -131,7 +125,6 @@ $patron-colors: $patron-colors-dark;
   --c-mv-branch-black: #{$c-mv-branch-black};
   --c-pool-button: #{hsla($site-hue, 7%, 19%, 66%)};
   --c-paper: #{$c-paper};
-
   --c-paco1: #{map-get($patron-colors, 1)};
   --c-paco2: #{map-get($patron-colors, 2)};
   --c-paco3: #{map-get($patron-colors, 3)};
diff --git a/ui/lib/css/theme/_theme.light.scss b/ui/lib/css/theme/_theme.light.scss
index db182c77a96..9e9b3ef4bc3 100644
--- a/ui/lib/css/theme/_theme.light.scss
+++ b/ui/lib/css/theme/_theme.light.scss
@@ -30,7 +30,6 @@ $c-paper: hsl(60, 56%, 86%);
 $c-border: hsl(0, 0%, 85%);
 $c-dimmer: #fff;
 $c-clearer: #000;
-
 $patron-colors: $patron-colors-light;
 
 html.light {
@@ -45,20 +44,17 @@ html.light {
   --c-metal-bottom: hsl(0, 0%, 93%);
   --c-metal-top-hover: hsl(0, 0%, 98%);
   --c-metal-bottom-hover: hsl(0, 0%, 95%);
-
   --c-font-dim: #{$c-font-dim};
   --c-font-dimmer: #{change-color($c-font, $lightness: 70%)};
   --c-font-clear: #{change-color($c-font, $lightness: 12%)};
   --c-font-clearer: #{change-color($c-font, $lightness: 0%)};
   --c-font-page: #{change-color($c-font, $lightness: 37%)};
   --c-font-shadow: #fff;
-
   --c-primary-dim: #{dim($c-primary)};
   --c-link-hover: #{clear(saturate($c-primary, 100%), 35%)};
   --c-chat-host-bg: rgba(125, 170, 73, 0.4);
   --c-chat-mention-bg: rgba(161, 194, 124, 0.4);
   --c-fancy: hsl(294, 61%, 62%);
-
   --c-border-page: hsl(0, 0%, 80%);
   --c-border-tour: #{mix(hsl(0, 0%, 80%), $c-bg-page, 50)};
   --c-border-light: hsl(0, 0%, 80%);
diff --git a/ui/lib/css/theme/_theme.transp.scss b/ui/lib/css/theme/_theme.transp.scss
index d573ba21f80..827e8df39ce 100644
--- a/ui/lib/css/theme/_theme.transp.scss
+++ b/ui/lib/css/theme/_theme.transp.scss
@@ -14,13 +14,11 @@ html.transp {
   --c-bg-input: hsla(0, 0%, 0%, 0.7);
   --c-bg-variation: hsla(0, 0%, 0%, 0.25);
   --c-bg-header-dropdown: hsla(0, 0%, 0%, 0.75);
-
   --c-font-dim: #{change-color($c-font, $lightness: 69%)};
   --c-font-dimmer: #{change-color($c-font, $lightness: 48%)};
   --c-font-clear: #{change-color($c-font, $lightness: 89%)};
   --c-font-clearer: #{change-color($c-font, $lightness: 97%)};
   --c-font-page: #{change-color($c-font, $lightness: 97%)};
-
   --c-metal-top: hsla(37, 7%, 19%, 0.56);
   --c-metal-bottom: hsla(37, 7%, 19%, 0.66);
   --c-metal-top-hover: hsla(22, 100%, 42%, 0.4);
diff --git a/ui/lib/css/theme/board/_board-2d.scss b/ui/lib/css/theme/board/_board-2d.scss
index 305a4eea420..172af921ed7 100644
--- a/ui/lib/css/theme/board/_board-2d.scss
+++ b/ui/lib/css/theme/board/_board-2d.scss
@@ -7,6 +7,7 @@
       $name-override: map-get($board-theme, name-override);
       $file-name: if($name-override, $name-override, $name);
       $dir-name: 'board#{if($file-ext == "svg", "/svg", "")}';
+
       &::before {
         background-image: url(../images/#{$dir-name}/#{$file-name}.#{$file-ext});
       }
diff --git a/ui/lib/css/theme/board/_board-3d.scss b/ui/lib/css/theme/board/_board-3d.scss
index 3f24a258cef..e7877b9e526 100644
--- a/ui/lib/css/theme/board/_board-3d.scss
+++ b/ui/lib/css/theme/board/_board-3d.scss
@@ -21,8 +21,8 @@ $td-inner-relative-percent: $td-inner-height-ratio / $td-outer-height-ratio * 10
 }
 
 piece {
-  /* original size: width: 140.625%; height: 179.6875%; */
-  /* size on 3D board, with height/width = 90.78571% */
+  /* original size: width: 140.625%; height: 179.6875%;
+     size on 3D board, with height/width = 90.78571% */
   width: 16.741%;
   height: 23.563%;
   left: -1.85%;
@@ -76,6 +76,7 @@ $piece-files: (
       }
     }
   }
+
   @if $flips {
     @each $color, $orientation in ('White': 'black', 'Black': 'white') {
       @each $type in 'Bishop', 'Knight' {
diff --git a/ui/lib/css/theme/board/_boards.scss b/ui/lib/css/theme/board/_boards.scss
index 294d4ccf622..22f0a12e757 100644
--- a/ui/lib/css/theme/board/_boards.scss
+++ b/ui/lib/css/theme/board/_boards.scss
@@ -147,7 +147,6 @@ $board-themes-2d: (
     coord-color-black: #946d46,
   ),
 );
-
 $board-themes-3d: (
   'Black-White-Aluminium': (
     coord-color-white: #d9ded9,
diff --git a/ui/lib/css/theme/board/_chessground.scss b/ui/lib/css/theme/board/_chessground.scss
index 6fa303f0a4d..5e018720332 100644
--- a/ui/lib/css/theme/board/_chessground.scss
+++ b/ui/lib/css/theme/board/_chessground.scss
@@ -181,6 +181,7 @@ cg-container .cg-shapes {
   overflow: hidden;
   z-index: $z-cg__svg-shapes-2;
 }
+
 cg-container .cg-shapes-below {
   overflow: hidden;
   z-index: $z-cg-below-pieces-1;
diff --git a/ui/lib/css/theme/board/_coords-in.scss b/ui/lib/css/theme/board/_coords-in.scss
index 7838d4139fe..c645317950c 100644
--- a/ui/lib/css/theme/board/_coords-in.scss
+++ b/ui/lib/css/theme/board/_coords-in.scss
@@ -6,7 +6,6 @@ coords {
   position: absolute;
   display: flex;
   pointer-events: none;
-
   color: #fff;
   text-shadow: 0 1px 2px #000;
   font-weight: bold;
@@ -15,6 +14,7 @@ coords {
   .coords-no & {
     display: none;
   }
+
   &.ranks {
     flex-flow: column-reverse;
     top: 1px;
diff --git a/ui/lib/css/tree/_tree.scss b/ui/lib/css/tree/_tree.scss
index 816c41c3c62..078bebab349 100644
--- a/ui/lib/css/tree/_tree.scss
+++ b/ui/lib/css/tree/_tree.scss
@@ -3,32 +3,41 @@ $disclosure-btn-size: calc(15px + var(---button-size-pointer-adjust, 0px));
 
 .tview2 {
   white-space: normal;
+
   --c-base: var(--c-font);
 
   .active {
     --c-base: var(--c-primary);
   }
+
   .inaccuracy {
     --c-base: var(--c-inaccuracy);
   }
+
   .mistake {
     --c-base: var(--c-mistake);
   }
+
   .blunder {
     --c-base: var(--c-blunder);
   }
+
   .good {
     --c-base: var(--c-good);
   }
+
   .brilliant {
     --c-base: var(--c-brilliant);
   }
+
   .interesting {
     --c-base: var(--c-interesting);
   }
+
   .anchor {
     position: relative;
   }
+
   * {
     overflow: visible;
   }
@@ -40,6 +49,7 @@ $disclosure-btn-size: calc(15px + var(---button-size-pointer-adjust, 0px));
 
 .tview2 move {
   @extend %san, %nowrap-hidden;
+
   display: inline-block;
   color: var(--c-base);
   padding: 0.25em 0.17em;
@@ -60,20 +70,25 @@ $disclosure-btn-size: calc(15px + var(---button-size-pointer-adjust, 0px));
     index {
       color: white;
     }
+
     .disclosure {
       background-color: $c-font-dimmer;
     }
   }
+
   &.current {
     border: 1px solid $c-accent;
   }
+
   &.nongame {
     font-style: italic;
   }
+
   &.empty {
     pointer-events: none;
     color: $c-font-dimmer;
   }
+
   &.context-menu {
     border: 0;
     background: $c-accent !important;
@@ -83,10 +98,12 @@ $disclosure-btn-size: calc(15px + var(---button-size-pointer-adjust, 0px));
       color: $c-over;
     }
   }
+
   &.pending-deletion {
     border-radius: unset;
     background: color-mix(in srgb, $c-bad 30%, transparent) !important;
   }
+
   &.pending-copy {
     border-radius: unset;
     background: color-mix(in srgb, $c-good 30%, transparent) !important;
@@ -95,6 +112,7 @@ $disclosure-btn-size: calc(15px + var(---button-size-pointer-adjust, 0px));
 
 .tview2 eval {
   @extend %roboto;
+
   margin-inline-start: auto;
   font-size: 0.8em;
   color: $c-font-dim;
@@ -110,8 +128,10 @@ $disclosure-btn-size: calc(15px + var(---button-size-pointer-adjust, 0px));
 .tview2 shapes {
   margin-inline-start: 0.4em;
   color: $c-good;
+
   &::before {
     @extend %data-icon;
+
     vertical-align: baseline;
     font-size: 13px;
     content: $licon-DiscBigOutline;
@@ -210,6 +230,7 @@ $disclosure-btn-size: calc(15px + var(---button-size-pointer-adjust, 0px));
   move {
     margin-inline-start: 0;
   }
+
   &::before,
   &::after {
     vertical-align: 7px;
@@ -272,7 +293,9 @@ $disclosure-btn-size: calc(15px + var(---button-size-pointer-adjust, 0px));
 .tview2 .disclosure-connector.riser {
   inset-inline: unset;
   inset-inline-end: 0;
+
   $riser-height: calc((10px - var(---button-size-pointer-adjust, 0px)) / 2);
+
   top: calc(-2px - $riser-height);
   height: $riser-height;
   width: 2px;
@@ -296,16 +319,19 @@ $disclosure-btn-size: calc(15px + var(---button-size-pointer-adjust, 0px));
 
   index {
     padding-inline-start: 5px;
+
     &:first-child {
       padding-inline-start: 0;
     }
   }
+
   glyph {
     flex: 0 1 auto;
     text-align: center;
     overflow: hidden;
     font-size: 0.82em;
   }
+
   &.active {
     font-weight: bold;
   }
@@ -357,6 +383,7 @@ $disclosure-btn-size: calc(15px + var(---button-size-pointer-adjust, 0px));
 
   > comment {
     @extend %break-word;
+
     color: var(--c-base);
     display: block;
     padding: 3px 5px;
@@ -371,22 +398,27 @@ $disclosure-btn-size: calc(15px + var(---button-size-pointer-adjust, 0px));
     font-weight: bold;
     background: color-mix(in srgb, $c-clearer 4%, transparent);
   }
+
   move {
     @extend %box-radius;
+
     margin-inline-end: 2px;
     font-size: 13px;
     font-weight: bold;
   }
+
   move index {
     padding-inline-end: 0.2em;
     line-height: 111.11%;
   }
+
   comment {
     vertical-align: 45%;
     overflow-wrap: break-word;
     margin: 0 0.2em 0 0.1em;
     font-size: 0.9em;
   }
+
   inline::before,
   inline::after {
     vertical-align: 0.7em;
@@ -403,14 +435,17 @@ $disclosure-btn-size: calc(15px + var(---button-size-pointer-adjust, 0px));
   .tview2 move:not(.active):hover {
     background: color-mix(in srgb, var(--c-base) 15%, transparent);
     color: $c-font-clear;
+
     eval,
     index {
       color: $c-font;
     }
+
     .disclosure {
       background-color: $c-font-dimmer;
     }
   }
+
   .tview2 move.active:hover {
     cursor: default;
 
@@ -418,6 +453,7 @@ $disclosure-btn-size: calc(15px + var(---button-size-pointer-adjust, 0px));
       background-color: #ddd;
     }
   }
+
   .tview2 move:hover .disclosure:hover {
     background-color: $c-font-dim;
     cursor: pointer;
diff --git a/ui/lib/css/vendor/_flatpickr.scss b/ui/lib/css/vendor/_flatpickr.scss
index cf89b313799..8896749e8bf 100644
--- a/ui/lib/css/vendor/_flatpickr.scss
+++ b/ui/lib/css/vendor/_flatpickr.scss
@@ -22,38 +22,46 @@
     0 -1px 0 #20222c,
     0 3px 13px rgba(0, 0, 0, 0.08);
 }
+
 .flatpickr-calendar.open,
 .flatpickr-calendar.inline {
   opacity: 1;
   max-height: 640px;
   visibility: visible;
 }
+
 .flatpickr-calendar.open {
   display: inline-block;
   z-index: 99999;
 }
+
 .flatpickr-calendar.animate.open {
   animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
 }
+
 .flatpickr-calendar.inline {
   display: block;
   position: relative;
   top: 2px;
 }
+
 .flatpickr-calendar.static {
   position: absolute;
   top: calc(100% + 2px);
 }
+
 .flatpickr-calendar.static.open {
   z-index: 999;
   display: block;
 }
+
 .flatpickr-calendar.multiMonth
   .flatpickr-days
   .dayContainer:nth-child(n + 1)
   .flatpickr-day.inRange:nth-child(7n + 7) {
   box-shadow: none !important;
 }
+
 .flatpickr-calendar.multiMonth
   .flatpickr-days
   .dayContainer:nth-child(n + 2)
@@ -62,22 +70,27 @@
     -2px 0 0 #e6e6e6,
     5px 0 0 #e6e6e6;
 }
+
 .flatpickr-calendar .hasWeeks .dayContainer,
 .flatpickr-calendar .hasTime .dayContainer {
   border-bottom: 0;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
+
 .flatpickr-calendar .hasWeeks .dayContainer {
   border-left: 0;
 }
+
 .flatpickr-calendar.hasTime .flatpickr-time {
   height: 40px;
   border-top: 1px solid #20222c;
 }
+
 .flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
   height: auto;
 }
+
 .flatpickr-calendar::before,
 .flatpickr-calendar::after {
   position: absolute;
@@ -89,6 +102,7 @@
   width: 0;
   left: 22px;
 }
+
 .flatpickr-calendar.rightMost::before,
 .flatpickr-calendar.arrowRight::before,
 .flatpickr-calendar.rightMost::after,
@@ -96,49 +110,62 @@
   left: auto;
   right: 22px;
 }
+
 .flatpickr-calendar.arrowCenter::before,
 .flatpickr-calendar.arrowCenter::after {
   left: 50%;
   right: 50%;
 }
+
 .flatpickr-calendar::before {
   border-width: 5px;
   margin: 0 -5px;
 }
+
 .flatpickr-calendar::after {
   border-width: 4px;
   margin: 0 -4px;
 }
+
 .flatpickr-calendar.arrowTop::before,
 .flatpickr-calendar.arrowTop::after {
   bottom: 100%;
 }
+
 .flatpickr-calendar.arrowTop::before {
   border-bottom-color: #20222c;
 }
+
 .flatpickr-calendar.arrowTop::after {
   border-bottom-color: #3f4458;
 }
+
 .flatpickr-calendar.arrowBottom::before,
 .flatpickr-calendar.arrowBottom::after {
   top: 100%;
 }
+
 .flatpickr-calendar.arrowBottom::before {
   border-top-color: #20222c;
 }
+
 .flatpickr-calendar.arrowBottom::after {
   border-top-color: #3f4458;
 }
+
 .flatpickr-calendar:focus {
   outline: 0;
 }
+
 .flatpickr-wrapper {
   position: relative;
   display: inline-block;
 }
+
 .flatpickr-months {
   display: flex;
 }
+
 .flatpickr-months .flatpickr-month {
   background: #3f4458;
   color: #fff;
@@ -151,6 +178,7 @@
   overflow: hidden;
   flex: 1;
 }
+
 .flatpickr-months .flatpickr-prev-month,
 .flatpickr-months .flatpickr-next-month {
   text-decoration: none;
@@ -163,63 +191,79 @@
   color: #fff;
   fill: #fff;
 }
+
 .flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
 .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
   display: none;
 }
+
 .flatpickr-months .flatpickr-prev-month i,
 .flatpickr-months .flatpickr-next-month i {
   position: relative;
 }
+
 .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
 .flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
   /* rtl:begin:ignore */
   left: 0;
+
   /* rtl:end:ignore */
 }
+
 .flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
 .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
   /* rtl:begin:ignore */
   right: 0;
+
   /* rtl:end:ignore */
 }
+
 .flatpickr-months .flatpickr-prev-month:hover,
 .flatpickr-months .flatpickr-next-month:hover {
   color: #eee;
 }
+
 .flatpickr-months .flatpickr-prev-month:hover svg,
 .flatpickr-months .flatpickr-next-month:hover svg {
   fill: #f64747;
 }
+
 .flatpickr-months .flatpickr-prev-month svg,
 .flatpickr-months .flatpickr-next-month svg {
   width: 14px;
   height: 14px;
 }
+
 .flatpickr-months .flatpickr-prev-month svg path,
 .flatpickr-months .flatpickr-next-month svg path {
   transition: fill 0.1s;
   fill: inherit;
 }
+
 .numInputWrapper {
   position: relative;
   height: auto;
 }
+
 .numInputWrapper input,
 .numInputWrapper span {
   display: inline-block;
 }
+
 .numInputWrapper input {
   width: 100%;
 }
+
 .numInputWrapper input::-ms-clear {
   display: none;
 }
+
 .numInputWrapper input::-webkit-outer-spin-button,
 .numInputWrapper input::-webkit-inner-spin-button {
   margin: 0;
   appearance: none;
 }
+
 .numInputWrapper span {
   position: absolute;
   right: 0;
@@ -232,49 +276,61 @@
   border: 1px solid rgba(255, 255, 255, 0.15);
   box-sizing: border-box;
 }
+
 .numInputWrapper span:hover {
   background: rgba(192, 187, 167, 0.1);
 }
+
 .numInputWrapper span:active {
   background: rgba(192, 187, 167, 0.2);
 }
+
 .numInputWrapper span::after {
   display: block;
   content: '';
   position: absolute;
 }
+
 .numInputWrapper span.arrowUp {
   top: 0;
   border-bottom: 0;
 }
+
 .numInputWrapper span.arrowUp::after {
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   border-bottom: 4px solid rgba(255, 255, 255, 0.6);
   top: 26%;
 }
+
 .numInputWrapper span.arrowDown {
   top: 50%;
 }
+
 .numInputWrapper span.arrowDown::after {
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   border-top: 4px solid rgba(255, 255, 255, 0.6);
   top: 40%;
 }
+
 .numInputWrapper span svg {
   width: inherit;
   height: auto;
 }
+
 .numInputWrapper span svg path {
   fill: rgba(255, 255, 255, 0.5);
 }
+
 .numInputWrapper:hover {
   background: rgba(192, 187, 167, 0.05);
 }
+
 .numInputWrapper:hover span {
   opacity: 1;
 }
+
 .flatpickr-current-month {
   font-size: 135%;
   font-weight: 300;
@@ -289,6 +345,7 @@
   text-align: center;
   transform: translate3d(0, 0, 0);
 }
+
 .flatpickr-current-month span.cur-month {
   font-family: inherit;
   font-weight: 700;
@@ -297,19 +354,24 @@
   margin-left: 0.5ch;
   padding: 0;
 }
+
 .flatpickr-current-month span.cur-month:hover {
   background: rgba(192, 187, 167, 0.05);
 }
+
 .flatpickr-current-month .numInputWrapper {
   width: 7ch;
   display: inline-block;
 }
+
 .flatpickr-current-month .numInputWrapper span.arrowUp::after {
   border-bottom-color: #fff;
 }
+
 .flatpickr-current-month .numInputWrapper span.arrowDown::after {
   border-top-color: #fff;
 }
+
 .flatpickr-current-month input.cur-year {
   background: transparent;
   box-sizing: border-box;
@@ -328,9 +390,11 @@
   vertical-align: initial;
   appearance: textfield;
 }
+
 .flatpickr-current-month input.cur-year:focus {
   outline: 0;
 }
+
 .flatpickr-current-month input.cur-year[disabled],
 .flatpickr-current-month input.cur-year[disabled]:hover {
   font-size: 100%;
@@ -338,6 +402,7 @@
   background: transparent;
   pointer-events: none;
 }
+
 .flatpickr-current-month .flatpickr-monthDropdown-months {
   background: #3f4458;
   border: none;
@@ -358,18 +423,22 @@
   appearance: auto;
   width: auto;
 }
+
 .flatpickr-current-month .flatpickr-monthDropdown-months:focus,
 .flatpickr-current-month .flatpickr-monthDropdown-months:active {
   outline: none;
 }
+
 .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
   background: rgba(192, 187, 167, 0.05);
 }
+
 .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
   background-color: #3f4458;
   outline: none;
   padding: 0;
 }
+
 .flatpickr-weekdays {
   background: transparent;
   text-align: center;
@@ -379,10 +448,12 @@
   align-items: center;
   height: 28px;
 }
+
 .flatpickr-weekdays .flatpickr-weekdaycontainer {
   display: flex;
   flex: 1;
 }
+
 span.flatpickr-weekday {
   cursor: default;
   font-size: 90%;
@@ -395,10 +466,12 @@ span.flatpickr-weekday {
   flex: 1;
   font-weight: bolder;
 }
+
 .dayContainer,
 .flatpickr-weeks {
   padding: 1px 0 0 0;
 }
+
 .flatpickr-days {
   position: relative;
   overflow: hidden;
@@ -406,9 +479,11 @@ span.flatpickr-weekday {
   align-items: flex-start;
   width: 307.875px;
 }
+
 .flatpickr-days:focus {
   outline: 0;
 }
+
 .dayContainer {
   padding: 0;
   outline: 0;
@@ -422,9 +497,11 @@ span.flatpickr-weekday {
   transform: translate3d(0, 0, 0);
   opacity: 1;
 }
+
 .dayContainer + .dayContainer {
   box-shadow: -1px 0 0 #20222c;
 }
+
 .flatpickr-day {
   background: none;
   border: 1px solid transparent;
@@ -445,6 +522,7 @@ span.flatpickr-weekday {
   justify-content: center;
   text-align: center;
 }
+
 .flatpickr-day.inRange,
 .flatpickr-day.prevMonthDay.inRange,
 .flatpickr-day.nextMonthDay.inRange,
@@ -462,15 +540,18 @@ span.flatpickr-weekday {
   background: #646c8c;
   border-color: #646c8c;
 }
+
 .flatpickr-day.today {
   border-color: #eee;
 }
+
 .flatpickr-day.today:hover,
 .flatpickr-day.today:focus {
   border-color: #eee;
   background: #eee;
   color: #3f4458;
 }
+
 .flatpickr-day.selected,
 .flatpickr-day.startRange,
 .flatpickr-day.endRange,
@@ -494,32 +575,38 @@ span.flatpickr-weekday {
   color: #fff;
   border-color: #80cbc4;
 }
+
 .flatpickr-day.selected.startRange,
 .flatpickr-day.startRange.startRange,
 .flatpickr-day.endRange.startRange {
   border-radius: 50px 0 0 50px;
 }
+
 .flatpickr-day.selected.endRange,
 .flatpickr-day.startRange.endRange,
 .flatpickr-day.endRange.endRange {
   border-radius: 0 50px 50px 0;
 }
+
 .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
 .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
 .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
   box-shadow: -10px 0 0 #80cbc4;
 }
+
 .flatpickr-day.selected.startRange.endRange,
 .flatpickr-day.startRange.startRange.endRange,
 .flatpickr-day.endRange.startRange.endRange {
   border-radius: 50px;
 }
+
 .flatpickr-day.inRange {
   border-radius: 0;
   box-shadow:
     -5px 0 0 #646c8c,
     5px 0 0 #646c8c;
 }
+
 .flatpickr-day.flatpickr-disabled,
 .flatpickr-day.flatpickr-disabled:hover,
 .flatpickr-day.prevMonthDay,
@@ -532,35 +619,43 @@ span.flatpickr-weekday {
   border-color: transparent;
   cursor: default;
 }
+
 .flatpickr-day.flatpickr-disabled,
 .flatpickr-day.flatpickr-disabled:hover {
   cursor: not-allowed;
   color: rgba(255, 255, 255, 0.1);
 }
+
 .flatpickr-day.week.selected {
   border-radius: 0;
   box-shadow:
     -5px 0 0 #80cbc4,
     5px 0 0 #80cbc4;
 }
+
 .flatpickr-day.hidden {
   visibility: hidden;
 }
+
 .rangeMode .flatpickr-day {
   margin-top: 1px;
 }
+
 .flatpickr-weekwrapper {
   float: left;
 }
+
 .flatpickr-weekwrapper .flatpickr-weeks {
   padding: 0 12px;
   box-shadow: 1px 0 0 #20222c;
 }
+
 .flatpickr-weekwrapper .flatpickr-weekday {
   float: none;
   width: 100%;
   line-height: 28px;
 }
+
 .flatpickr-weekwrapper span.flatpickr-day,
 .flatpickr-weekwrapper span.flatpickr-day:hover {
   display: block;
@@ -571,16 +666,19 @@ span.flatpickr-weekday {
   cursor: default;
   border: none;
 }
+
 .flatpickr-innerContainer {
   display: flex;
   box-sizing: border-box;
   overflow: hidden;
 }
+
 .flatpickr-rContainer {
   display: inline-block;
   padding: 0;
   box-sizing: border-box;
 }
+
 .flatpickr-time {
   text-align: center;
   outline: 0;
@@ -591,29 +689,36 @@ span.flatpickr-weekday {
   overflow: hidden;
   display: flex;
 }
+
 .flatpickr-time::after {
   content: '';
   display: table;
   clear: both;
 }
+
 .flatpickr-time .numInputWrapper {
   flex: 1;
   width: 40%;
   height: 40px;
   float: left;
 }
+
 .flatpickr-time .numInputWrapper span.arrowUp::after {
   border-bottom-color: rgba(255, 255, 255, 0.95);
 }
+
 .flatpickr-time .numInputWrapper span.arrowDown::after {
   border-top-color: rgba(255, 255, 255, 0.95);
 }
+
 .flatpickr-time.hasSeconds .numInputWrapper {
   width: 26%;
 }
+
 .flatpickr-time.time24hr .numInputWrapper {
   width: 49%;
 }
+
 .flatpickr-time input {
   background: transparent;
   box-shadow: none;
@@ -630,17 +735,21 @@ span.flatpickr-weekday {
   box-sizing: border-box;
   appearance: textfield;
 }
+
 .flatpickr-time input.flatpickr-hour {
   font-weight: bold;
 }
+
 .flatpickr-time input.flatpickr-minute,
 .flatpickr-time input.flatpickr-second {
   font-weight: 400;
 }
+
 .flatpickr-time input:focus {
   outline: 0;
   border: 0;
 }
+
 .flatpickr-time .flatpickr-time-separator,
 .flatpickr-time .flatpickr-am-pm {
   height: inherit;
@@ -652,6 +761,7 @@ span.flatpickr-weekday {
   user-select: none;
   align-self: center;
 }
+
 .flatpickr-time .flatpickr-am-pm {
   outline: 0;
   width: 18%;
@@ -659,20 +769,24 @@ span.flatpickr-weekday {
   text-align: center;
   font-weight: 400;
 }
+
 .flatpickr-time input:hover,
 .flatpickr-time .flatpickr-am-pm:hover,
 .flatpickr-time input:focus,
 .flatpickr-time .flatpickr-am-pm:focus {
   background: #6a7395;
 }
+
 .flatpickr-input[readonly] {
   cursor: pointer;
 }
+
 @keyframes fp-fade-in-down {
   from {
     opacity: 0;
     transform: translate3d(0, -20px, 0);
   }
+
   to {
     opacity: 1;
     transform: translate3d(0, 0, 0);
diff --git a/ui/lib/css/vendor/_multiple-select.scss b/ui/lib/css/vendor/_multiple-select.scss
index 43d6adb1a02..67d85b394a4 100644
--- a/ui/lib/css/vendor/_multiple-select.scss
+++ b/ui/lib/css/vendor/_multiple-select.scss
@@ -6,6 +6,7 @@
 
 .ms-choice {
   @extend %nowrap-hidden;
+
   display: block;
   width: 100%;
   height: 26px;
@@ -27,6 +28,7 @@
 
 .ms-choice > span {
   @extend %nowrap-ellipsis;
+
   position: absolute;
   top: 0;
   left: 0;
@@ -124,6 +126,7 @@
 
 .ms-drop ul > li.multiple label {
   @extend %nowrap-ellipsis;
+
   width: 100%;
   display: block;
 }
diff --git a/ui/lobby/css/_about.scss b/ui/lobby/css/_about.scss
index a0eb25774f0..f22b98f68b7 100644
--- a/ui/lobby/css/_about.scss
+++ b/ui/lobby/css/_about.scss
@@ -26,6 +26,7 @@
 
 .connect-links {
   @extend %flex-center-center;
+
   flex: 1 0 100%;
   margin-top: 0.5em;
 
diff --git a/ui/lobby/css/_box.scss b/ui/lobby/css/_box.scss
index d5e6ff92769..92aa6eab60c 100644
--- a/ui/lobby/css/_box.scss
+++ b/ui/lobby/css/_box.scss
@@ -48,6 +48,7 @@
       padding: 0.5em 0.4em;
       border-bottom: $border;
       max-width: 21ch;
+
       @media (max-width: at-most($x-small)) {
         max-width: 18ch;
       }
@@ -80,42 +81,50 @@
   .progress-td {
     padding: 0.3em 0.4em;
   }
+
   .progress {
     border-radius: 2em;
     display: block;
     position: relative;
     width: 30ch;
     height: 1.25em;
-
     background: $m-bg-page--fade-40;
+
     @include if-light {
       background: $m-shade--fade-40;
     }
+
     @include if-transp {
       background: $m-bg--fade-40;
     }
+
     overflow: hidden;
+
     @media (max-width: at-most($x-small)) {
       max-width: 23ch;
       margin: auto;
     }
+
     @media (max-width: at-most($xx-small)) {
       max-width: 16ch;
     }
   }
+
   .progress__bar {
     border-radius: 2em;
     display: block;
     height: 100%;
     background: $m-primary_bg-page__mix-20--fade-70;
   }
+
   .progress__text {
+    @include inline-start(1.5ch);
+
     position: absolute;
     color: $c-font;
     font-size: 0.9em;
     top: 0;
     width: 100%;
-    @include inline-start(1.5ch);
     z-index: 3;
   }
 }
diff --git a/ui/lobby/css/_carousel.scss b/ui/lobby/css/_carousel.scss
index 09831c996ff..ad91073706e 100644
--- a/ui/lobby/css/_carousel.scss
+++ b/ui/lobby/css/_carousel.scss
@@ -15,6 +15,8 @@
 
   .controls {
     @extend %flex-between;
+    @include transition(opacity);
+
     position: absolute;
     top: 0;
     left: 0;
@@ -22,7 +24,6 @@
     height: 100%;
     width: 100%;
     opacity: 0;
-    @include transition(opacity);
     pointer-events: none;
 
     button {
@@ -30,6 +31,7 @@
       font-size: 3em;
       pointer-events: auto;
       height: 100%;
+
       &:hover {
         color: $c-primary;
       }
diff --git a/ui/lobby/css/_clas.scss b/ui/lobby/css/_clas.scss
index 734d9501e63..bfca4d779c0 100644
--- a/ui/lobby/css/_clas.scss
+++ b/ui/lobby/css/_clas.scss
@@ -1,10 +1,14 @@
 .lobby__classes {
   @extend %flex-column;
+
   gap: 1em;
+
   a {
     @extend %flex-center-nowrap, %nowrap-hidden, %box-neat;
     @include transition;
+
     background: linear-gradient(to right bottom, hsl(276, 29%, 49%), hsl(276, 65%, 32%), hsl(286, 37%, 21%));
+
     @include if-light {
       background: linear-gradient(
         to right bottom,
@@ -13,13 +17,16 @@
         hsl(286, 37%, 37%)
       );
     }
+
     color: rgba(255, 255, 255, 0.7);
     font-weight: bold;
     padding: 0.8em 0.5em 0.8em 1.5em;
+
     &::before {
       font-size: 1.7em;
       margin-inline-end: 0.5em;
     }
+
     &:hover {
       filter: brightness(120%);
     }
diff --git a/ui/lobby/css/_feed.scss b/ui/lobby/css/_feed.scss
index 53b14ed065e..09d3505cac0 100644
--- a/ui/lobby/css/_feed.scss
+++ b/ui/lobby/css/_feed.scss
@@ -1,9 +1,11 @@
 .lobby__feed {
   @extend %box-neat;
   @include hoverflow;
+
   background: $c-bg-box;
   min-height: 20em;
 }
+
 .daily-feed {
   &__updates {
     margin-inline-start: 24px;
@@ -38,18 +40,22 @@
 
     &__day {
       @extend %flex-center;
+
       display: inline;
       font-size: 1.15em;
       font-weight: bold;
       color: $c-contours;
+
       time {
         font-size: 1em;
         opacity: 1;
       }
+
       &:hover {
         color: $c-brag;
       }
     }
+
     @include rendered-markdown(
       $element-margin: 0.6em,
       $h1: false,
@@ -58,11 +64,13 @@
       $img: false,
       $list: false
     );
+
     h3 {
       font-size: 1.2em;
       color: $c-font-dim;
       border-bottom: $border;
     }
+
     h4 {
       font-size: 1.15em;
     }
diff --git a/ui/lobby/css/_layout.scss b/ui/lobby/css/_layout.scss
index 21b3de17ebf..2c01bcd35ef 100644
--- a/ui/lobby/css/_layout.scss
+++ b/ui/lobby/css/_layout.scss
@@ -1,5 +1,6 @@
 .lobby {
   ---cols: 1; // ui/lobby/src/main.ts
+
   grid-area: main;
   display: grid;
   grid-template-areas: 'app' 'table' 'side' 'blog' 'support' 'feed' 'tv' 'puzzle' 'tours' 'timeline' 'about';
@@ -9,12 +10,14 @@
   &__simuls {
     max-height: 30em;
   }
+
   &__start {
     margin: 0 $block-gap;
   }
 
   @include mq-at-least-col2 {
     ---cols: 2; // ui/lobby/src/main.ts
+
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: auto fit-content(0) repeat(3, min-content) 20em;
     grid-template-areas:
@@ -33,6 +36,7 @@
       grid-template-columns: 1fr 1fr;
       gap: 2%;
     }
+
     &__start {
       margin-inline-end: $block-gap;
     }
@@ -40,6 +44,7 @@
 
   @include mq-at-least-col3 {
     ---cols: 3; // ui/lobby/src/main.ts
+
     grid-template-columns: 34% 1fr;
     grid-template-rows:
       minmax(12em, auto) fit-content(0) min-content 1fr fit-content(15em) repeat(2, fit-content(0))
@@ -78,6 +83,7 @@
 
   @include mq-at-least-col4 {
     ---cols: 4; // ui/lobby/src/main.ts
+
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: fit-content(0) min-content 1fr repeat(3, fit-content(0));
     grid-template-areas:
@@ -128,6 +134,7 @@
   &__tournaments-simuls {
     grid-area: tours;
   }
+
   &__simuls {
     margin-top: $block-gap;
   }
diff --git a/ui/lobby/css/_lobby.scss b/ui/lobby/css/_lobby.scss
index 7cb481a6b3c..9d8b97a7770 100644
--- a/ui/lobby/css/_lobby.scss
+++ b/ui/lobby/css/_lobby.scss
@@ -95,17 +95,23 @@ body {
 .lobby__blog {
   gap: $block-gap;
   font-size: 0.9em;
+
   h2 {
     @extend %page-text-shadow !optional;
     @include line-clamp(4);
+
     font-size: 1.3em;
   }
+
   .ublog-post-card {
     background: $c-bg-box;
+
     &:hover {
       @extend %box-shadow;
+
       background: $c-bg-zebra;
     }
+
     .user-link {
       border-radius: $box-radius-size 0 0 0;
     }
diff --git a/ui/lobby/css/_setup.scss b/ui/lobby/css/_setup.scss
index 507998d9640..08a94d1839f 100644
--- a/ui/lobby/css/_setup.scss
+++ b/ui/lobby/css/_setup.scss
@@ -27,6 +27,7 @@ $c-slider: $c-setup;
 
       .text {
         @extend %flex-center-nowrap;
+
         gap: 0.8rem;
         overflow: hidden;
         width: 100%;
@@ -84,6 +85,7 @@ $c-slider: $c-setup;
 
   .setup-content {
     @extend %flex-column;
+
     border-block: $border;
     padding: 1.8rem 1.2rem;
     gap: 1.8rem;
@@ -101,6 +103,7 @@ $c-slider: $c-setup;
 
   .config-group {
     @extend %flex-column;
+
     gap: 0.5rem;
 
     .label {
@@ -119,18 +122,21 @@ $c-slider: $c-setup;
     width: 50%;
     margin-inline: auto;
   }
+
   #fen-input {
     flex: 1 1 100%;
   }
 
   .failure {
     @extend %box-radius;
+
     background: $m-bad_bg--mix-20;
     box-shadow: 0 0 13px 6px $m-bad_bg--mix-20;
   }
 
   .footer {
     @extend %flex-center-center;
+
     position: relative;
     padding: 1.5rem;
   }
@@ -141,6 +147,7 @@ $c-slider: $c-setup;
     gap: 0.8rem;
     color: $c-font;
     border: $border;
+
     &::before {
       color: $c-setup !important;
     }
@@ -154,6 +161,7 @@ $c-slider: $c-setup;
 
   .rating-range {
     @extend %flex-center-nowrap;
+
     justify-content: center;
 
     .rating-min,
@@ -161,6 +169,7 @@ $c-slider: $c-setup;
       font-weight: bold;
       flex: 0 0 5.5ch;
     }
+
     input {
       padding: 0;
       width: 30%;
@@ -170,6 +179,7 @@ $c-slider: $c-setup;
   .ratings {
     width: 100%;
     text-align: center;
+
     strong {
       margin-inline-end: 0.25rem;
     }
@@ -180,11 +190,13 @@ $c-slider: $c-setup;
       border-bottom: $border;
       margin-bottom: 1rem;
       width: 100%;
+
       button {
         &.active,
         &:hover {
           border-color: $c-setup;
         }
+
         &.active {
           color: $c-setup;
         }
@@ -193,27 +205,33 @@ $c-slider: $c-setup;
 
     .time-panel {
       @extend %flex-column;
+
       gap: 1.2rem;
 
       .presets {
         @extend %flex-wrap;
+
         justify-content: center;
         margin-top: -0.5rem;
         gap: 0.3rem;
 
         .preset-btn {
           @extend %box-radius;
+
           color: $c-font-dim;
           padding: 0.2rem 0.5rem;
           font-size: 0.9rem;
           background: $c-bg-low;
+
           &:hover {
             background: $c-bg-zebra2;
             color: $c-font-clear;
           }
+
           &:focus-visible {
             outline: $outline;
           }
+
           &.active {
             background: $c-setup;
             color: $c-over;
@@ -228,9 +246,12 @@ $c-slider: $c-setup;
 
       .slider-container {
         @extend %flex-column;
+
         justify-content: space-between;
+
         .label-row {
           @extend %flex-between-nowrap;
+
           align-items: flex-start;
           margin-bottom: 0.5rem;
 
@@ -248,6 +269,7 @@ $c-slider: $c-setup;
           padding: 0;
         }
       }
+
       .slider-separator {
         line-height: 1.7;
       }
@@ -259,6 +281,7 @@ $c-slider: $c-setup;
 
     .card-radio {
       @extend %flex-column;
+
       padding: 0.75rem;
 
       .text {
@@ -273,15 +296,19 @@ $c-slider: $c-setup;
     h2 {
       margin-block: 1.1rem;
     }
+
     .footer {
       padding: 1.1rem;
     }
+
     .setup-content {
       padding: 1.25rem 0.75rem;
     }
+
     .fen__board {
       width: 40%;
     }
+
     &:has(.increment-choice) .fen__board {
       width: 30%;
     }
@@ -292,6 +319,7 @@ $c-slider: $c-setup;
   .game-setup select {
     font-size: 1.2rem;
   }
+
   .game-setup .lobby__start__button {
     border: 2px solid $c-setup;
   }
diff --git a/ui/lobby/css/_spotlight.scss b/ui/lobby/css/_spotlight.scss
index 30fb5d8c0c6..52e8bd4e68e 100644
--- a/ui/lobby/css/_spotlight.scss
+++ b/ui/lobby/css/_spotlight.scss
@@ -21,6 +21,7 @@
   &.event-spotlight,
   &:hover {
     @extend %metal-hover;
+
     text-shadow: none;
 
     @include if-light {
diff --git a/ui/lobby/css/_stream.scss b/ui/lobby/css/_stream.scss
index ee4c84ce239..eac49caa33b 100644
--- a/ui/lobby/css/_stream.scss
+++ b/ui/lobby/css/_stream.scss
@@ -2,6 +2,7 @@
   &:empty {
     display: none;
   }
+
   .stream {
     @extend %roboto, %nowrap-ellipsis, %page-text;
 
diff --git a/ui/lobby/css/_table.scss b/ui/lobby/css/_table.scss
index e6ed134012a..caeb33d4b68 100644
--- a/ui/lobby/css/_table.scss
+++ b/ui/lobby/css/_table.scss
@@ -8,6 +8,7 @@
 
   &__start {
     @extend %flex-column;
+
     flex: 1 1 auto;
     justify-content: stretch;
     gap: 9px; // grid gap in app/_pool.scss
@@ -20,33 +21,43 @@
       padding-inline: 2em 3em;
       height: 3.2em;
       text-transform: none;
+
       &.disabled {
         opacity: 0.2;
       }
+
       &::before {
         @include transition(color);
         @extend %data-icon;
+
         font-size: 32px;
         color: $c-font-dimmer;
       }
+
       &--hook.button::before {
         content: $licon-Group;
       }
+
       &--friend.button::before {
         content: $licon-User;
       }
+
       &--ai.button::before {
         content: $licon-Cpu;
       }
+
       &--friend-user.button::before {
         content: $licon-Swords;
       }
+
       @media (hover: hover) {
         &:hover.disabled {
           cursor: default;
         }
+
         &:hover:not(.disabled) {
           color: $c-font-clear !important;
+
           &::before {
             color: $c-accent;
           }
@@ -57,11 +68,13 @@
 
   &__counters {
     @extend %flex-between-nowrap, %page-text;
+
     margin-top: 1rem;
     display: none;
 
     a {
       @extend %nowrap-ellipsis;
+
       color: $c-font-page;
 
       @include transition(color);
diff --git a/ui/lobby/css/_timeline.scss b/ui/lobby/css/_timeline.scss
index f750fe995d5..9708e587cdb 100644
--- a/ui/lobby/css/_timeline.scss
+++ b/ui/lobby/css/_timeline.scss
@@ -1,5 +1,6 @@
 .lobby__timeline {
   @extend %page-text;
+
   flex: 1 1 auto;
   margin-inline-start: $block-gap;
 
@@ -10,6 +11,7 @@
 
     a {
       @extend %base-font, %page-font;
+
       font-weight: normal;
     }
 
@@ -24,6 +26,7 @@
       height: 1px;
       background: linear-gradient(to start, $c-border 20%, $c-bg-page);
       margin: 0.7em 0;
+
       @include if-rtl {
         background: linear-gradient(to end, $c-border 20%, $c-bg-page);
       }
diff --git a/ui/lobby/css/app/_app.scss b/ui/lobby/css/app/_app.scss
index 8f37b44a542..cd0eb5ddd9f 100644
--- a/ui/lobby/css/app/_app.scss
+++ b/ui/lobby/css/app/_app.scss
@@ -5,7 +5,6 @@
 
 .lobby__app {
   @extend %flex-column;
-
   @include lobby-app-size;
   @include prevent-select;
 
@@ -16,19 +15,24 @@
   &__content {
     @extend %box-neat;
 
+    $logo-color: '383633';
+
     flex: 1 1 100%;
     position: relative;
     background-color: $c-bg-box;
     background-size: 100% 100%;
-    $logo-color: '383633';
     background-image: url("data:image/svg+xml,%3Csvg viewBox='-2 -2 54 54' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23#{$logo-color}' stroke='%23#{$logo-color}' stroke-linejoin='round'%0Ad='M38.956.5c-3.53.418-6.452.902-9.286 2.984C5.534 1.786-.692 18.533.68 29.364 3.493 50.214 31.918 55.785 41.329 41.7c-7.444 7.696-19.276 8.752-28.323 3.084C3.959 39.116-.506 27.392 4.683 17.567 9.873 7.742 18.996 4.535 29.03 6.405c2.43-1.418 5.225-3.22 7.655-3.187l-1.694 4.86 12.752 21.37c-.439 5.654-5.459 6.112-5.459 6.112-.574-1.47-1.634-2.942-4.842-6.036-3.207-3.094-17.465-10.177-15.788-16.207-2.001 6.967 10.311 14.152 14.04 17.663 3.73 3.51 5.426 6.04 5.795 6.756 0 0 9.392-2.504 7.838-8.927L37.4 7.171z'/%3E%3C/svg%3E%0A");
+
     @include if-light {
       $logo-color: 'dadada';
+
       background-image: url("data:image/svg+xml,%3Csvg viewBox='-2 -2 54 54' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23#{$logo-color}' stroke='%23#{$logo-color}' stroke-linejoin='round'%0Ad='M38.956.5c-3.53.418-6.452.902-9.286 2.984C5.534 1.786-.692 18.533.68 29.364 3.493 50.214 31.918 55.785 41.329 41.7c-7.444 7.696-19.276 8.752-28.323 3.084C3.959 39.116-.506 27.392 4.683 17.567 9.873 7.742 18.996 4.535 29.03 6.405c2.43-1.418 5.225-3.22 7.655-3.187l-1.694 4.86 12.752 21.37c-.439 5.654-5.459 6.112-5.459 6.112-.574-1.47-1.634-2.942-4.842-6.036-3.207-3.094-17.465-10.177-15.788-16.207-2.001 6.967 10.311 14.152 14.04 17.663 3.73 3.51 5.426 6.04 5.795 6.756 0 0 9.392-2.504 7.838-8.927L37.4 7.171z'/%3E%3C/svg%3E%0A");
     }
+
     @include if-transp {
       background: $m-bg--fade-20;
     }
+
     overflow-x: hidden;
     overflow-y: auto;
   }
diff --git a/ui/lobby/css/app/_hook-chart.scss b/ui/lobby/css/app/_hook-chart.scss
index 85293ba3c89..3867fc257be 100644
--- a/ui/lobby/css/app/_hook-chart.scss
+++ b/ui/lobby/css/app/_hook-chart.scss
@@ -1,23 +1,25 @@
 .hooks__chart {
   @extend %abs-100;
+  @include inline-end(0);
 
   bottom: 0;
-  @include inline-end(0);
   overflow: hidden;
 
   .label {
     @extend %page-text-shadow;
+    @include inline-start(3px);
+
     color: $c-font-dim;
     font-size: 0.7em;
     position: absolute;
-    @include inline-start(3px);
     bottom: 1px;
     font-weight: bold;
   }
 
   .grid {
-    position: absolute;
     @include inline-start(0);
+
+    position: absolute;
     bottom: 0;
 
     &.horiz {
@@ -38,14 +40,13 @@
   }
 
   .plot {
+    @include transition;
+
     position: absolute;
     cursor: pointer;
     z-index: 3;
     font-size: 1.6em;
     opacity: 0.7;
-
-    @include transition;
-
     transform: scale(1);
 
     &.rated {
diff --git a/ui/lobby/css/app/_hook-filters.scss b/ui/lobby/css/app/_hook-filters.scss
index 52cd61ae874..4843ff73680 100644
--- a/ui/lobby/css/app/_hook-filters.scss
+++ b/ui/lobby/css/app/_hook-filters.scss
@@ -54,12 +54,16 @@
     display: block;
     text-align: center;
   }
+
   .rating-range {
     @extend %flex-center-nowrap;
+
     justify-content: center;
+
     input {
       padding: 0.6em 0;
       margin: 0 1ch;
+
       @media (max-width: at-most($xx-small)) {
         width: 26vw;
       }
diff --git a/ui/lobby/css/app/_hook-list.scss b/ui/lobby/css/app/_hook-list.scss
index 8488c56d652..0b5108aec9f 100644
--- a/ui/lobby/css/app/_hook-list.scss
+++ b/ui/lobby/css/app/_hook-list.scss
@@ -81,6 +81,7 @@
     &:first-child {
       padding-inline-start: 2em;
     }
+
     &:last-child ::before {
       margin-inline-end: 8px;
       line-height: 0.9;
@@ -97,6 +98,7 @@
       // player name
       &:first-child {
         @include ellipsis;
+
         max-width: 25vw;
       }
     }
diff --git a/ui/lobby/css/app/_playing.scss b/ui/lobby/css/app/_playing.scss
index 4e1697b2670..ec0cced3f60 100644
--- a/ui/lobby/css/app/_playing.scss
+++ b/ui/lobby/css/app/_playing.scss
@@ -7,9 +7,11 @@
 
   .local {
     position: relative;
+
     .mini-board-wrapper {
       padding: 12px;
     }
+
     img {
       pointer-events: none;
       position: absolute;
@@ -24,20 +26,24 @@
       &.white {
         background-color: $c-paper;
       }
+
       &.black {
         background-color: $c-dark;
       }
+
       @include if-transp {
         backdrop-filter: blur(6px);
 
         &.white {
           background-color: $m-paper--fade-40;
         }
+
         &.black {
           background-color: $m-dark--fade-40;
         }
       }
     }
+
     button {
       position: absolute;
       background: center / contain url('../flair/img/symbols.cancel.webp') $c-bg-page;
@@ -48,12 +54,14 @@
       z-index: $z-above-pieces-9;
       width: 24px;
       height: 24px;
+
       @include mq-is-col1 {
         top: 2px;
         right: 2px;
         width: 32px; // fat fingers
         height: 32px;
       }
+
       &:hover {
         filter: brightness(140%);
       }
diff --git a/ui/lobby/css/app/_pool.scss b/ui/lobby/css/app/_pool.scss
index 8df6f476763..88c6803b4f4 100644
--- a/ui/lobby/css/app/_pool.scss
+++ b/ui/lobby/css/app/_pool.scss
@@ -31,6 +31,7 @@
     0% {
       background-position: 180% 0;
     }
+
     100% {
       background-position: -90% 0;
     }
@@ -49,20 +50,18 @@
 
 .lpool {
   @extend %flex-column, %box-radius, %break-word;
+  @include transition;
 
   justify-content: center;
   align-items: center;
   cursor: pointer;
-
+  color: $c-font-dim;
   background: $c-pool-button;
+
   @include if-light {
     background: $m-bg--fade-50;
   }
 
-  color: $c-font-dim;
-
-  @include transition;
-
   &:hover {
     color: $c-font;
     background: $m-accent--fade-80 !important;
diff --git a/ui/mod/css/_activity.scss b/ui/mod/css/_activity.scss
index 00be5abeccc..492a6d9596f 100644
--- a/ui/mod/css/_activity.scss
+++ b/ui/mod/css/_activity.scss
@@ -1,6 +1,7 @@
 .mod-activity,
 .mod-queues {
   overflow: hidden;
+
   h1 {
     .mselect {
       display: inline-block;
@@ -11,26 +12,33 @@
       }
     }
   }
+
   .slist {
     white-space: nowrap;
+
     td {
       @extend %roboto;
+
       text-align: right;
     }
   }
+
   .chart,
   .chart-grid {
     padding: 4vh 4vw;
     background: $c-bg-zebra;
   }
+
   .chart {
     min-height: 40vh;
     max-width: 100%;
     overflow: hidden;
+
     &:last-child {
       border-top: 1px solid white;
     }
   }
+
   .chart-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(30em, 1fr));
diff --git a/ui/mod/css/_communication.scss b/ui/mod/css/_communication.scss
index a7bd10e7e4d..ce862e239c2 100644
--- a/ui/mod/css/_communication.scss
+++ b/ui/mod/css/_communication.scss
@@ -3,6 +3,7 @@
 
 #communication {
   @extend %flex-column;
+
   gap: 2vh;
 
   h1 {
@@ -22,6 +23,7 @@
       margin-inline-start: 1em;
       font-weight: normal;
     }
+
     .comms-export {
       margin-inline-start: 1em;
     }
@@ -98,6 +100,7 @@
     cursor: pointer;
     border-bottom: 1px dashed $m-accent--fade-50;
     min-width: 6ch;
+
     &:hover {
       background: $m-accent--fade-80;
     }
@@ -109,12 +112,14 @@
     max-height: 300px;
     border-bottom: $border;
   }
+
   .thread td {
     padding: 0.3em 1em;
   }
 
   .thread .title {
     margin-bottom: 20px;
+
     strong {
       font-size: 1.2em;
       margin-right: 1em;
diff --git a/ui/mod/css/_dev.scss b/ui/mod/css/_dev.scss
index 0cc080fb00b..ac96b46f0c9 100644
--- a/ui/mod/css/_dev.scss
+++ b/ui/mod/css/_dev.scss
@@ -1,10 +1,12 @@
 #settings .toggle-box {
   > div > div {
     @extend %flex-column;
+
     gap: 1.5em;
     padding-bottom: 2em;
   }
 }
+
 #settings form {
   @extend %flex-center;
 
diff --git a/ui/mod/css/_games.scss b/ui/mod/css/_games.scss
index 5a9201272fb..68ed93df330 100644
--- a/ui/mod/css/_games.scss
+++ b/ui/mod/css/_games.scss
@@ -1,25 +1,31 @@
 .game-list {
   @include prevent-select;
+
   .result {
     @extend %box-radius;
+
     font-weight: bold;
     color: white;
     margin-inline-end: 1ch;
     padding: 2px 1em;
   }
+
   good.result {
     background: $m-secondary_bg--mix-50;
   }
+
   bad.result {
     background: $m-bad_bg--mix-50;
   }
 
   td.input {
     cursor: pointer;
+
     &:hover {
       background: $c-bg-zebra2;
     }
   }
+
   input {
     cursor: pointer;
   }
@@ -30,9 +36,11 @@
     > *:not(:first-child) {
       margin-inline-start: 1em;
     }
+
     select {
       max-width: 30ch;
     }
+
     input[name='nbGamesOpt'] {
       width: 14ch;
     }
diff --git a/ui/mod/css/_image-queue.scss b/ui/mod/css/_image-queue.scss
index 235585c4bcc..239219b3e81 100644
--- a/ui/mod/css/_image-queue.scss
+++ b/ui/mod/css/_image-queue.scss
@@ -9,33 +9,42 @@
     max-height: 22vh;
     opacity: 0.7;
   }
+
   > div {
     display: flex;
     flex-direction: column;
     gap: 0.5em;
     padding: 0.8em;
+
     a {
       text-align: center;
     }
+
     &:hover {
       background-color: $c-bg-zebra;
+
       img {
         opacity: 1;
       }
+
       .image-queue--actions {
         opacity: 1;
       }
     }
   }
+
   &--flag {
     font-style: italic;
   }
+
   &--actions {
     @extend %flex-between;
+
     gap: 1em;
     opacity: 0.2;
     flex: 1;
     align-content: flex-end;
+
     button {
       padding: 0.5em 3em;
     }
diff --git a/ui/mod/css/_inquiry.scss b/ui/mod/css/_inquiry.scss
index 028662187d2..a2e2408afbf 100644
--- a/ui/mod/css/_inquiry.scss
+++ b/ui/mod/css/_inquiry.scss
@@ -150,6 +150,7 @@ body.no-inquiry {
 
   .doc.note {
     margin-top: 1em;
+
     p {
       margin: 0;
     }
@@ -194,6 +195,7 @@ body.no-inquiry {
 
   form.note {
     padding-top: 1em;
+
     textarea {
       width: 100%;
       resize: vertical;
@@ -300,7 +302,9 @@ body.no-inquiry {
       display: none;
       position: absolute;
       top: 100%;
+
       @include inline-end(0);
+
       background: $c-bg-zebra2;
       overflow: scroll;
       max-height: 80vh;
@@ -361,7 +365,9 @@ body.no-inquiry {
     &.counter > div,
     &.warn > div {
       width: 360px;
+
       @include inline-end(-155px);
+
       max-height: 500px;
       overflow-y: auto;
     }
@@ -377,6 +383,7 @@ body.no-inquiry {
     flex-flow: column;
     justify-content: center;
     text-align: center;
+
     .view-games-dropdown {
       a {
         display: block;
@@ -400,10 +407,12 @@ body.no-inquiry {
   .notes {
     span {
       transition: all 1s ease-out;
+
       &.note-flash {
         background: $c-primary;
         box-shadow: 0 0 15px $c-primary;
         transition: none;
+
         &.warning {
           background: $c-warn;
           box-shadow: 0 0 15px $c-warn;
diff --git a/ui/mod/css/_misc.scss b/ui/mod/css/_misc.scss
index 47b4f0fbbe6..932e038ab64 100644
--- a/ui/mod/css/_misc.scss
+++ b/ui/mod/css/_misc.scss
@@ -59,6 +59,7 @@
   h1 small {
     font-size: 70%;
   }
+
   textarea {
     width: 100%;
   }
@@ -71,5 +72,6 @@
 
 .user-note__text {
   @extend %break-word-hard;
+
   font-size: 0.9em;
 }
diff --git a/ui/mod/css/_mod-timeline.scss b/ui/mod/css/_mod-timeline.scss
index 4a2c9e136f6..2f1870604e4 100644
--- a/ui/mod/css/_mod-timeline.scss
+++ b/ui/mod/css/_mod-timeline.scss
@@ -1,5 +1,6 @@
 .mod-timeline {
   @extend %flex-column, %box-neat;
+
   gap: 0.6em;
   background: $c-bg-zebra;
   padding: 1em 1em 1em 2em;
@@ -7,104 +8,138 @@
   overflow-y: auto;
   overflow-x: hidden;
 }
+
 .mod-timeline__period {
   @extend %flex-center-nowrap;
+
   gap: 1em;
+  padding-bottom: 0.6em;
+
   h3 {
     white-space: nowrap;
     flex: 0 0 12ch;
     font-size: 1.1em;
     text-transform: capitalize;
   }
-  padding-bottom: 0.6em;
 }
+
 .mod-timeline__period:not(:last-child) {
   border-bottom: 1px solid $c-font-dimmer;
 }
+
 .mod-timeline__period__events {
   @extend %flex-column;
+
   flex: 1 1 auto;
 }
+
 .mod-timeline__event {
   @extend %flex-center-nowrap;
+
   gap: 1em;
   padding: 0.1em 1em;
 }
+
 .mod-timeline__event__from {
   @extend %nowrap-ellipsis;
+
   min-width: 15ch;
   max-width: 40ch;
 }
+
 .mod-timeline__event__flair {
   @extend %flex-center;
+
   padding: 0.2em;
+
   img {
     width: 1.6em;
     height: 1.6em;
   }
 }
+
 .mod-timeline__event__body {
   @extend %flex-center-nowrap;
+
   margin-left: 1em;
   gap: 1.5ch;
+
   .uflair {
     display: none;
   }
+
   .user-link {
     flex: 0 0 auto;
   }
 }
+
 .mod-timeline__event:has(i.moderator) {
   .user-link,
   .user-link i.line {
     color: $m-brag_font--mix-60;
   }
 }
+
 .mod-timeline__event__action {
   @extend %flex-center;
+
   flex: 0 0 auto;
   gap: 1ch;
 }
+
 .mod-timeline__report-form .button {
   line-height: 1.2;
 }
+
 .mod-timeline__report-form--open .button {
   background: $c-bad;
 }
+
 .mod-timeline__text {
   @extend %break-word-hard;
+
   font-size: 0.9em;
 }
+
 .mod-timeline__event--report-new {
   @extend %box-radius;
+
   background: $m-bad_bg--mix-10;
 }
+
 .mod-timeline__event:has(.mod-timeline__event__action--modMessage),
 .mod-timeline__event:has(.mod-timeline__event__action--sentence),
 .mod-timeline__event:has(.mod-timeline__event__action--undo) {
   @extend %box-radius;
+
   background: $m-brag_bg--mix-15;
 }
+
 .mod-timeline__event--recent:has(.mod-timeline__event__action--modMessage),
 .mod-timeline__event--recent:has(.mod-timeline__event__action--sentence),
 .mod-timeline__event--recent:has(.mod-timeline__event__action--undo) {
   padding: 0.5em 1em;
   border-left: 4px solid $c-brag;
   margin-left: -4px;
+
   .mod-timeline__event__flair {
     padding: 0;
+
     img {
       width: 2em;
       height: 2em;
     }
   }
+
   .mod-timeline__event__action {
     font-weight: bold;
   }
 }
+
 .mod-timeline__event__action--warning strong {
   color: $c-brag;
 }
+
 .mod-timeline__event__action--account-sentence {
   font-weight: bold;
   color: $c-brag;
@@ -114,18 +149,23 @@
   .mod-timeline {
     padding: 1em;
   }
+
   .mod-timeline__period {
     display: block;
+
     h3 {
       line-height: 2em;
     }
   }
+
   .mod-timeline__event {
     padding: 0;
   }
+
   .mod-timeline__event__flair {
     display: none;
   }
+
   .mod-timeline__event__body {
     margin: 0;
   }
diff --git a/ui/mod/css/_publicChats.scss b/ui/mod/css/_publicChats.scss
index d1313f9d1e3..d39af6c8f0d 100644
--- a/ui/mod/css/_publicChats.scss
+++ b/ui/mod/css/_publicChats.scss
@@ -4,11 +4,11 @@
   position: relative;
 
   .auto-refresh {
+    @include inline-end(20px);
+    @include transition;
+
     position: absolute;
     top: 30px;
-    @include inline-end(20px);
-
-    @include transition;
 
     &.active.hold {
       opacity: 0.4;
@@ -26,6 +26,7 @@
 
   .line:not(.lichess) {
     cursor: pointer;
+
     &:hover {
       background: $m-accent--fade-80;
     }
@@ -34,11 +35,13 @@
   .player_chats .game {
     .title-time {
       @extend %flex-between;
+
       overflow: hidden;
       padding: 0.5em 1em;
       border-bottom: $border;
       margin-bottom: 0.3em;
     }
+
     .title {
       padding: 0;
     }
diff --git a/ui/mod/css/_report.form.scss b/ui/mod/css/_report.form.scss
index fd109153f01..a72eaeecbe4 100644
--- a/ui/mod/css/_report.form.scss
+++ b/ui/mod/css/_report.form.scss
@@ -3,6 +3,7 @@
     max-height: 40vh;
     overflow-y: auto;
   }
+
   li input {
     margin-right: 1ch;
   }
diff --git a/ui/mod/css/_report.scss b/ui/mod/css/_report.scss
index 4fb612a0feb..4bf2750eac3 100644
--- a/ui/mod/css/_report.scss
+++ b/ui/mod/css/_report.scss
@@ -144,6 +144,7 @@ $c-report-high-over: white;
 
   .marked-by-me {
     @include user-marks;
+
     background: $m-brag_bg--mix-60;
   }
 
diff --git a/ui/mod/css/_user.scss b/ui/mod/css/_user.scss
index 42bf2b5ee31..1d5905df63e 100644
--- a/ui/mod/css/_user.scss
+++ b/ui/mod/css/_user.scss
@@ -1,11 +1,14 @@
 .user-show .mod-zone {
   margin: 0 20px 1em 20px;
 }
+
 .user-show:has(.mod-zone-full:not(.none)) .mod-zone-toggle {
   @extend %active;
 }
+
 .mod-zone {
   @extend %flex-wrap;
+
   gap: 0.5em;
 
   > * {
@@ -51,6 +54,7 @@
 
   .mz-section > strong {
     display: block;
+
     &.inline {
       display: inline;
     }
@@ -180,9 +184,11 @@
     > form {
       margin: 1em 1em 0 0;
     }
+
     select {
       max-width: 8em;
     }
+
     .inquiry {
       height: 2em;
       width: 2em;
@@ -191,6 +197,7 @@
       vertical-align: top;
       background: #484541;
       border-radius: 4px 0 0 4px;
+
       i {
         display: block;
         height: 30px;
@@ -268,6 +275,7 @@
             background: $m-brag_bg--mix-15;
             cursor: pointer;
           }
+
           &.selected {
             background: $m-brag_bg--mix-40;
           }
@@ -336,15 +344,18 @@
     .appeal-recent {
       color: $c-brag;
     }
+
     .appeal-old {
       color: $c-font-dim;
     }
+
     .appeal-muted {
       color: $c-bad;
     }
 
     .add-to-note {
       cursor: pointer;
+
       &:hover {
         background: $m-accent--fade-80;
       }
@@ -367,6 +378,7 @@
         font-size: 0.9em;
         padding: 0.1em 0.5em;
         border-radius: 0.3em;
+
         &.green {
           /* actually blue */
           background-color: rgba(32, 119, 192, 0.4);
@@ -426,6 +438,7 @@
       text-align: center;
       font-weight: bold;
       margin-bottom: 10px;
+
       span {
         padding: 10px;
       }
@@ -516,6 +529,7 @@
         font-size: 1.4em;
         text-transform: uppercase;
         letter-spacing: 3px;
+
         img {
           height: 50px;
           width: 50px;
@@ -574,6 +588,7 @@
 
     .moves {
       padding: 0;
+
       a {
         width: 400px;
         height: 48px;
@@ -585,6 +600,7 @@
         flex: 0 1 10px;
         margin-inline-start: 3px;
       }
+
       .green {
         /* actually blue */
         background-color: #2077c0;
diff --git a/ui/msg/css/_convo.scss b/ui/msg/css/_convo.scss
index ef735af223c..64e37b5ecc7 100644
--- a/ui/msg/css/_convo.scss
+++ b/ui/msg/css/_convo.scss
@@ -51,6 +51,7 @@
         .line {
           flex: 0 0 auto;
           font-size: 1.5em;
+
           @include if-rtl {
             transform: scaleX(-1);
           }
@@ -59,6 +60,7 @@
 
       bad {
         @extend %flex-center-nowrap;
+
         margin-inline-start: 0.5em;
       }
 
diff --git a/ui/msg/css/_convoMsgs.scss b/ui/msg/css/_convoMsgs.scss
index 1a264318625..7976243ea8b 100644
--- a/ui/msg/css/_convoMsgs.scss
+++ b/ui/msg/css/_convoMsgs.scss
@@ -110,6 +110,7 @@
 
     &--game {
       @extend %box-neat-force;
+
       padding-bottom: 75%;
     }
 
@@ -121,6 +122,7 @@
 
   form.unsub {
     display: inline;
+
     .button {
       text-transform: none;
     }
diff --git a/ui/msg/css/_msg.scss b/ui/msg/css/_msg.scss
index e8637c5fcf4..b25d9f76ceb 100644
--- a/ui/msg/css/_msg.scss
+++ b/ui/msg/css/_msg.scss
@@ -5,6 +5,7 @@ $msg-top-height: 4em;
 
 body {
   ---app-height: 100vh;
+
   overflow: hidden;
 }
 
diff --git a/ui/msg/css/_side.scss b/ui/msg/css/_side.scss
index a338e00d5e1..11581fa74e4 100644
--- a/ui/msg/css/_side.scss
+++ b/ui/msg/css/_side.scss
@@ -71,9 +71,9 @@
 
       &__user {
         @extend %nowrap-ellipsis;
+        @include padding-direction(0.8em, 1.5em, 0.8em, 0);
 
         flex: 1 1 auto;
-        @include padding-direction(0.8em, 1.5em, 0.8em, 0);
       }
 
       &__head {
diff --git a/ui/notify/css/_notify.scss b/ui/notify/css/_notify.scss
index d8dc1da10f9..46c7f52c120 100644
--- a/ui/notify/css/_notify.scss
+++ b/ui/notify/css/_notify.scss
@@ -16,14 +16,18 @@
     top: 0;
     padding: 0.5rem;
   }
+
   .settings {
     @include inline-end(0);
+
     &:hover {
       color: $c-link;
     }
   }
+
   .delete {
     @include inline-start(0);
+
     &:hover {
       color: $c-bad;
     }
@@ -85,6 +89,7 @@
 
       &:last-child {
         @extend %ellipsis;
+
         display: block;
       }
     }
@@ -120,6 +125,7 @@
 
     &:hover {
       background: $m-secondary_bg-popup--mix-36;
+
       i {
         opacity: 1;
       }
diff --git a/ui/opening/css/_config.scss b/ui/opening/css/_config.scss
index 83b9b95e8c7..5ec811694c6 100644
--- a/ui/opening/css/_config.scss
+++ b/ui/opening/css/_config.scss
@@ -8,63 +8,84 @@ $c-opcfg: $c-accent;
 
 .opening__config {
   @extend %box-neat;
+
   flex: 0 0 auto;
+
   &[open] {
     flex: 1 0 auto;
   }
+
   @include mq-col-one {
     display: none;
   }
+
   @include mq-details-large {
     flex: 1 0 auto;
   }
+
   background: $c-bg-zebra;
+
   &:hover {
     outline: 3px solid $m-accent_bg--mix-60;
     background: $m-accent_bg-zebra--mix-10;
   }
+
   &__summary {
     @include prevent-select;
+
     padding: 1em 2em;
     cursor: pointer;
+
     &__speed,
     &__rating {
       color: $c-accent;
     }
+
     &__large {
       display: none;
+
       .opening__config[open] & {
         display: inline-block;
       }
+
       @include mq-details-large {
         display: inline-block;
       }
     }
+
     &__short {
       display: inline-block;
+
       @include mq-details-large {
         display: none;
       }
+
       .opening__config[open] & {
         display: none;
       }
     }
   }
+
   &__form {
     padding: 0 2em 1em 2em;
+
     group {
       margin-top: 1em;
+
       label {
         height: auto;
       }
+
       input:checked + label {
         @extend %metal;
       }
     }
+
     &__submit {
       margin-top: 1em;
       display: flex;
       justify-content: stretch;
+
       button {
         color: $c-accent !important;
         flex: 0 0 100%;
diff --git a/ui/opening/css/_next.scss b/ui/opening/css/_next.scss
index 1b57ee8d30d..106efd7aed4 100644
--- a/ui/opening/css/_next.scss
+++ b/ui/opening/css/_next.scss
@@ -4,65 +4,83 @@
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
     gap: $block-gap;
   }
+
   &__next {
     @extend %flex-column, %box-neat;
+
     background: $c-bg-zebra;
     position: relative;
     outline: 3px solid $m-font_bg--mix-30;
     cursor: pointer;
     color: $c-font;
+
     &:hover {
       outline: 3px solid $m-primary_bg--mix-60;
       background: $m-primary_bg-zebra--mix-10;
       box-shadow: 0 0 30px $m-primary_bg--mix-50;
+
       piece {
         opacity: 0.8;
       }
     }
+
     &__title {
       @extend %flex-between-nowrap;
     }
+
     &__name {
       @extend %roboto, %nowrap-ellipsis;
+
       flex: 1 1 auto;
       font-size: 1.3em;
       margin: 0 0 0.2em 0.5em;
     }
+
     &__san {
       flex: 0 1 auto;
       font-size: 2em;
       margin: -1.2rem 0.5rem 0 0;
     }
+
     &__result-board {
       display: flex;
       flex-flow: row nowrap;
       align-items: stretch;
     }
+
     &__board {
       flex: 1 1 100%;
+
       .cg-wrap {
         @extend %square;
       }
+
       cg-board {
         box-shadow: none;
         background-color: $m-bg--alpha-40;
         background-blend-mode: darken;
+
         @include if-light {
           background-blend-mode: soft-light;
         }
       }
+
       piece {
         opacity: 0.6;
+
         &.highlight {
           opacity: 1;
         }
       }
     }
+
     &__popularity {
       display: flex;
       flex-flow: row nowrap;
+
       span {
         @extend %box-radius-bottom-right;
+
         background: $c-primary;
         color: $c-over;
         padding-right: 0.5em;
diff --git a/ui/opening/css/_opening.scss b/ui/opening/css/_opening.scss
index 52ca46e8900..3abdaa3911e 100644
--- a/ui/opening/css/_opening.scss
+++ b/ui/opening/css/_opening.scss
@@ -11,10 +11,13 @@
 .opening {
   h1 {
     @extend %flex-center;
+
     gap: 1rem;
   }
+
   &__beta {
     @extend %box-radius;
+
     display: inline-block;
     vertical-align: text-top;
     margin-left: 1em;
@@ -22,12 +25,15 @@
     font-size: 1rem;
     font-weight: bold;
   }
+
   &__error {
     @extend %box-neat;
+
     background: $m-bad_bg--mix-20;
     border: 1px solid $c-error;
     padding: 1em 2em;
   }
+
   .box__top__actions a {
     margin-left: 2em;
   }
diff --git a/ui/opening/css/_panels.scss b/ui/opening/css/_panels.scss
index ba122b75822..40e8ca6cfdd 100644
--- a/ui/opening/css/_panels.scss
+++ b/ui/opening/css/_panels.scss
@@ -1,19 +1,27 @@
 $c-op-panels: $c-brag;
+
 .opening__panels {
   .tab-list {
     @extend %flex-center;
+
     gap: 1em;
     margin-bottom: 3em;
+
     &__tab {
       @extend %box-radius;
+
       color: $c-op-panels;
+
       @include mq-col-many {
         font-size: 1.3em;
       }
+
       padding: 0.4em 1em;
+
       &:hover {
         background: $m-brag_bg--mix-20;
       }
+
       &[aria-selected='true'] {
         background: $c-op-panels;
         color: white;
diff --git a/ui/opening/css/_result.scss b/ui/opening/css/_result.scss
index 42aab180c85..377f3269597 100644
--- a/ui/opening/css/_result.scss
+++ b/ui/opening/css/_result.scss
@@ -1,8 +1,11 @@
 $result-width: 2rem;
+
 .result-bar {
   @extend %flex-column;
+
   flex: 0 0 $result-width;
   font-size: 0.7em;
+
   span {
     text-align: center;
     display: inline-block;
@@ -16,9 +19,11 @@ $result-width: 2rem;
 
   .white {
     background: #ccc;
+
     @include if-light {
       background: #fff;
     }
+
     @include if-not-light {
       color: #222;
     }
@@ -26,6 +31,7 @@ $result-width: 2rem;
 
   .draws {
     background: #666;
+
     @include if-light {
       background: #a0a0a0;
     }
@@ -33,9 +39,11 @@ $result-width: 2rem;
 
   .black {
     background: #333;
+
     @include if-light {
       background: #555;
     }
+
     color: #ddd;
   }
 }
diff --git a/ui/opening/css/_search.scss b/ui/opening/css/_search.scss
index d9050f4829b..0b215512384 100644
--- a/ui/opening/css/_search.scss
+++ b/ui/opening/css/_search.scss
@@ -1,10 +1,12 @@
 .opening {
   &__search-config {
     @extend %flex-center;
+
     align-items: flex-start;
     gap: 1em;
     margin-bottom: 3em;
   }
+
   &__search {
     &-form {
       flex: 2 1 auto;
@@ -28,28 +30,35 @@
         border-inline-start: 0;
       }
     }
+
     &__results {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
       gap: $block-gap;
       margin-bottom: var(---box-padding);
     }
+
     &__result {
       @extend %flex-column, %box-neat;
+
       background: $c-bg-zebra;
       outline: 3px solid $m-font_bg--mix-30;
       cursor: pointer;
       color: $c-font;
+
       &:hover {
         outline: 3px solid $m-primary_bg--mix-60;
         background: $m-primary_bg-zebra--mix-10;
         box-shadow: 0 0 30px $m-primary_bg--mix-50;
       }
+
       &__title {
         @extend %roboto, %metal;
+
         flex: 1 1 100%;
         font-size: 1.3em;
         padding: 0.4em 0.7em 0.3em 1em;
+
         .opening-name {
           &__variation {
             font-size: 0.8em;
diff --git a/ui/opening/css/_show.scss b/ui/opening/css/_show.scss
index 9a3a8f6f1a3..34eca96790b 100644
--- a/ui/opening/css/_show.scss
+++ b/ui/opening/css/_show.scss
@@ -3,86 +3,109 @@
     @content;
   }
 }
+
 @mixin mq-col-one {
   @media (max-width: at-most($x-small)) {
     @content;
   }
 }
+
 .opening {
   &__title {
     flex-flow: row nowrap !important;
     margin-bottom: 3rem;
   }
+
   &__name {
     line-height: 1em;
     font-size: 0.8em;
+
     &__section--1 {
       font-size: 1.15em;
     }
+
     &__move {
       font-size: 0.8em;
     }
   }
+
   &__intro {
     display: flex;
+    gap: $block-gap;
+    margin-bottom: 3em;
     flex-flow: column;
     align-items: stretch;
+
     @include mq-col-many {
       flex-flow: row;
       align-items: flex-start;
     }
-    gap: $block-gap;
-    margin-bottom: 3em;
+
     &__result-lpv {
       flex: 0 0 100%;
+
       @include mq-col-many {
         flex: 0 0 calc(300px + #{$result-width});
       }
+
       display: flex;
       flex-flow: row nowrap;
       align-items: stretch;
     }
+
     &__result {
       @extend %box-radius-left;
+
       overflow: hidden;
     }
+
     .lpv {
       flex: 0 0 calc(100% - #{$result-width});
+
       @include mq-col-many {
         flex: 0 0 300px;
       }
     }
+
     &__content {
       @extend %flex-column;
+
       justify-content: space-between;
       flex: 1 1 auto;
       align-self: stretch;
       gap: $block-gap;
     }
   }
+
   $op-chart-height: calc(160px - 2vmin);
+
   &__popularity-actions {
     flex: 0 0 $op-chart-height;
     display: flex;
+    align-items: stretch;
+    gap: 2em;
     flex-flow: column;
 
     @media (min-width: at-least($small)) {
       flex-flow: row nowrap;
     }
-    align-items: stretch;
-    gap: 2em;
   }
+
   &__popularity {
     flex: 1 1 auto;
     margin-top: -10px;
+
     &__chart {
       width: 100%;
       height: $op-chart-height;
       max-height: $op-chart-height;
     }
   }
+
   &__actions {
     display: flex;
+    align-items: stretch;
+    gap: 2em;
     flex-flow: row;
 
     @media (min-width: at-least($small)) {
@@ -90,8 +113,7 @@
       flex-flow: column;
       order: 1;
     }
-    align-items: stretch;
-    gap: 2em;
+
     .button {
       text-align: start;
       max-width: 17em;
diff --git a/ui/opening/css/_tree.scss b/ui/opening/css/_tree.scss
index 0ef2ad94edd..c55e8666832 100644
--- a/ui/opening/css/_tree.scss
+++ b/ui/opening/css/_tree.scss
@@ -1,75 +1,99 @@
 .opening {
   &__tree {
     @include prevent-select;
+
     details[open] {
       border-color: $c-primary;
       padding-bottom: 0.4em;
 
       > summary {
         @extend %box-radius-top;
+
         border-bottom: $border;
       }
     }
+
     summary {
       cursor: pointer;
+
       &:focus-visible {
         outline: $outline;
       }
     }
+
     > div,
     > details {
       font-size: 2em;
       margin-bottom: 0.7em;
     }
+
     > div {
       padding: 0.5em 0.5em 0.5em 2em;
     }
+
     > details {
       @extend %box-neat;
+
       background: $c-bg-zebra;
       border: $border;
+
       > summary {
         @extend %box-radius;
+
         padding: 0.5em 0.5em 0.5em 1em;
+
         &:hover {
           background: $m-primary_bg--mix-20;
         }
       }
+
       > div,
       > details {
         margin: 0.5em 0.5em 0 1rem;
         font-size: 0.7em;
       }
+
       > div {
         padding: 0.5em 0.5em 0.5em 1.9em;
       }
+
       > details {
         @extend %box-radius;
+
         border: $border;
         background: $c-bg-zebra2;
+
         > summary {
           @extend %box-radius;
+
           padding: 0.5em 0.5em 0.5em 1em;
+
           &:hover {
             background: $m-primary_bg--mix-20;
           }
         }
+
         > div,
         > details {
           margin: 0.5em 0.5em 0 1.5rem;
           font-size: 0.8em;
         }
+
         > div {
           padding: 0.5em 0.5em 0.5em 1.7em;
         }
+
         > details {
           > summary {
             padding: 0.5em 0.5em 0.5em 1em;
+
             &:hover {
               @extend %box-radius;
+
               background: $m-primary_bg--mix-20;
             }
           }
+
           div,
           details {
             margin: 0.5em 0.5em 0.3em 3rem;
diff --git a/ui/opening/css/_wiki.scss b/ui/opening/css/_wiki.scss
index 9a26e3b46a9..5e9cf168d98 100644
--- a/ui/opening/css/_wiki.scss
+++ b/ui/opening/css/_wiki.scss
@@ -1,69 +1,91 @@
 .opening__wiki {
   @extend %box-neat;
+
   background: $c-bg-zebra;
   flex: 2 1 auto;
+
   &__markup {
     max-height: 220px;
+
     @media (min-width: at-least($small)) {
       max-height: 300px;
     }
+
     overflow-y: auto;
     padding: 1em 2em;
+
     @include rendered-markdown(1em);
+
     ul {
       padding: 0;
     }
+
     h2:not(first-child) {
       line-height: 1.3em;
       padding-bottom: 0.4em;
     }
   }
+
   &__editor {
     padding: 0.5em 2em;
+
     &__summary {
       @extend %flex-between;
+
       cursor: pointer;
       color: $c-primary;
+
       .priority {
         @extend %box-neat;
+
         text-transform: uppercase;
         padding: 0.2em 0.8em;
         background: $c-bg-zebra2;
         color: $c-font-dim;
+
         &--0 {
           color: $c-brag;
         }
+
         &--1 {
           color: $c-good;
         }
+
         &--3,
         &--4 {
           color: $c-bad;
         }
       }
     }
+
     form {
       @extend %flex-column;
+
       margin-top: 1em;
+
       textarea {
         flex: 5 1 auto;
         height: 20em;
       }
     }
+
     &__revisions {
       max-height: 30vh;
       overflow: auto;
+
       summary {
         cursor: pointer;
         color: $c-primary;
         margin-top: 1em;
       }
     }
+
     &__revision {
       border-top: $border;
       margin-top: 1em;
       padding: 1em 0 0.5em 0;
       font-size: 0.8em;
+
       textarea {
         width: 90%;
         height: 10em;
diff --git a/ui/opening/css/build/opening.scss b/ui/opening/css/build/opening.scss
index 424d20a6a45..3df3b7d1951 100644
--- a/ui/opening/css/build/opening.scss
+++ b/ui/opening/css/build/opening.scss
@@ -2,5 +2,4 @@
 @import '../../../lib/css/component/pgn-viewer';
 @import '../../../lib/css/form/radio';
 @import '../../../lib/css/component/markdown';
-
 @import '../opening';
diff --git a/ui/puzzle/css/_after.scss b/ui/puzzle/css/_after.scss
index 819da7cc31e..0b2171460d7 100644
--- a/ui/puzzle/css/_after.scss
+++ b/ui/puzzle/css/_after.scss
@@ -27,6 +27,7 @@
 
   .complete {
     @extend %flex-center-center;
+
     flex: 1 1 50%;
     font-size: 1.3em;
     white-space: nowrap;
@@ -104,6 +105,7 @@
 
   .vote {
     @extend %flex-center-center;
+
     flex: 0 0 50%;
     cursor: pointer;
     color: $c-good;
diff --git a/ui/puzzle/css/_dashboard.scss b/ui/puzzle/css/_dashboard.scss
index 6b1c41f2a1f..22c56d6068b 100644
--- a/ui/puzzle/css/_dashboard.scss
+++ b/ui/puzzle/css/_dashboard.scss
@@ -83,7 +83,6 @@
       $c-fail: $m-bad_dark--mix-80;
 
       color: $c-over;
-
       background:
         #{$glow-gradient},
         linear-gradient(
diff --git a/ui/puzzle/css/_layout.scss b/ui/puzzle/css/_layout.scss
index 1a6d1643b6e..d74d77700aa 100644
--- a/ui/puzzle/css/_layout.scss
+++ b/ui/puzzle/css/_layout.scss
@@ -26,6 +26,7 @@ $puzzle-block-gap: $block-gap;
 
   &__side {
     @extend %zen;
+
     grid-area: side;
   }
 
@@ -39,11 +40,13 @@ $puzzle-block-gap: $block-gap;
 
   &__controls {
     @extend %zen;
+
     grid-area: controls;
   }
 
   &__session {
     @extend %zen;
+
     grid-area: session;
     align-self: start;
   }
diff --git a/ui/puzzle/css/_of-player.scss b/ui/puzzle/css/_of-player.scss
index 3e6430008b0..5a01e00fd68 100644
--- a/ui/puzzle/css/_of-player.scss
+++ b/ui/puzzle/css/_of-player.scss
@@ -25,12 +25,14 @@
 
     &__meta {
       @extend %flex-between;
+
       font-size: 0.9em;
       padding: 0 0.3em;
     }
 
     &__id {
       opacity: 0;
+
       @include transition;
     }
 
diff --git a/ui/puzzle/css/_openings.scss b/ui/puzzle/css/_openings.scss
index 9a4d5c32e58..f43b1447671 100644
--- a/ui/puzzle/css/_openings.scss
+++ b/ui/puzzle/css/_openings.scss
@@ -3,6 +3,7 @@
     border-bottom: $border;
     background: $c-bg-zebra;
     padding-top: 3vh;
+
     h2 {
       margin: 0 0 1em 0;
     }
@@ -31,6 +32,7 @@
     &.opening-mine {
       color: $c-brag;
       font-weight: bold;
+
       &:hover {
         background: $m-brag_bg--mix-20;
       }
diff --git a/ui/puzzle/css/_page.scss b/ui/puzzle/css/_page.scss
index 9726f93b45b..b215f720878 100644
--- a/ui/puzzle/css/_page.scss
+++ b/ui/puzzle/css/_page.scss
@@ -4,12 +4,15 @@
 
 h2#openings {
   @extend %flex-between;
+
   a {
     font-size: 1rem;
   }
 }
+
 .help {
   @extend %box-padding-horiz, %box-radius;
+
   padding-top: 2em;
   padding-bottom: 2em;
   background: $c-bg-zebra;
@@ -17,14 +20,17 @@ h2#openings {
   &-touchscreen {
     display: none;
   }
+
   &-keyboard {
     display: block;
   }
 }
+
 @media (hover: none) {
   .help-touchscreen {
     display: block;
   }
+
   .help-keyboard {
     display: none;
   }
diff --git a/ui/puzzle/css/_session.scss b/ui/puzzle/css/_session.scss
index 0de3693cd13..9d0deed0ee3 100644
--- a/ui/puzzle/css/_session.scss
+++ b/ui/puzzle/css/_session.scss
@@ -16,6 +16,7 @@
 
     &.result-empty::before {
       @extend %data-icon;
+
       content: $licon-Checkmark;
       font-size: 0.9em;
     }
diff --git a/ui/puzzle/css/_side.scss b/ui/puzzle/css/_side.scss
index dd2473ea604..9692cc379e4 100644
--- a/ui/puzzle/css/_side.scss
+++ b/ui/puzzle/css/_side.scss
@@ -3,13 +3,12 @@
     @extend %box-neat-force;
 
     background: $c-bg-box;
+    padding: 2vmin;
 
     p {
       margin: 0;
     }
 
-    padding: 2vmin;
-
     .hidden {
       color: $c-font-dimmer;
     }
@@ -50,10 +49,13 @@
     &__rating {
       strong {
         @extend %flex-center-center;
+
         font-size: 3.5em;
       }
+
       &__casual {
         @extend %roboto;
+
         font-size: 0.9em;
         margin-top: 1em;
       }
@@ -77,9 +79,12 @@
     &__info {
       h1 {
         color: $c-brag;
+
         @extend %flex-center-nowrap;
+
         font-size: 2.2rem;
         margin-bottom: 1rem;
+
         &::before {
           font-size: 1.5em;
         }
@@ -88,7 +93,9 @@
 
     &__score {
       color: $c-brag;
+
       @extend %flex-center-nowrap;
+
       justify-content: center;
       font-size: 4em;
 
@@ -116,6 +123,7 @@
 
     &__color {
       margin-top: 1.5vh;
+
       i {
         display: block;
         width: 24px;
@@ -124,6 +132,7 @@
         background-repeat: no-repeat;
         padding: 0;
       }
+
       .color-white i {
         background-image: url('../piece/cburnett/wK.svg');
       }
@@ -135,6 +144,7 @@
       .color-black i {
         background-image: url('../piece/cburnett/bK.svg');
       }
+
       .label.active {
         background: $m-primary_bg--mix-50;
       }
@@ -172,7 +182,9 @@
         position: absolute;
         top: 0;
         bottom: 0;
+
         @include inline-start(0);
+
         width: var(---p);
         background: $m-primary_bg-page--mix-60
           linear-gradient(180deg, rgba(255%, 255%, 255%, 0.15) 0%, transparent 35%);
@@ -199,6 +211,7 @@
       display: block;
       font-size: 1.5em;
       margin-bottom: 0.8rem;
+
       &.long {
         font-size: 1.3em;
         letter-spacing: 0;
@@ -207,6 +220,7 @@
 
     &--daily {
       outline: 3px solid $m-primary_bg-page--mix-50;
+
       a {
         margin: 0;
         text-align: center;
@@ -252,6 +266,7 @@
 
   &__vote {
     @extend %flex-center-center;
+
     flex: 0 0 50%;
     cursor: pointer;
     color: $c-font-dimmer;
@@ -289,6 +304,7 @@
 
   &__lock {
     @extend %flex-center-center;
+
     flex: 0 0 100%;
     color: $c-font-dimmer;
     opacity: 0.5;
diff --git a/ui/puzzle/css/_tools.scss b/ui/puzzle/css/_tools.scss
index 270ef907de5..3f0712bb48d 100644
--- a/ui/puzzle/css/_tools.scss
+++ b/ui/puzzle/css/_tools.scss
@@ -14,6 +14,7 @@
 
 .puzzle__moves {
   @include prevent-select;
+
   flex: 2 1 auto;
   overflow: auto;
   border-bottom: $border;
@@ -141,9 +142,11 @@
     position: relative;
     flex: 1 1 auto;
   }
+
   .board-menu {
     @include mq-at-least-col2 {
       @include box-radius-top;
+
       bottom: $col3-uniboard-controls;
       border-bottom: 2px solid $c-secondary;
     }
diff --git a/ui/puzzle/css/build/puzzle.dashboard.scss b/ui/puzzle/css/build/puzzle.dashboard.scss
index b9cabaf5f33..2ebbf5943d4 100644
--- a/ui/puzzle/css/build/puzzle.dashboard.scss
+++ b/ui/puzzle/css/build/puzzle.dashboard.scss
@@ -1,4 +1,3 @@
 @import '../../../lib/css/plugin';
 @import '../../../lib/css/component/mselect';
-
 @import '../dashboard';
diff --git a/ui/puzzle/css/build/puzzle.page.scss b/ui/puzzle/css/build/puzzle.page.scss
index 4734b0f55b8..dd99872d776 100644
--- a/ui/puzzle/css/build/puzzle.page.scss
+++ b/ui/puzzle/css/build/puzzle.page.scss
@@ -1,5 +1,4 @@
 @import '../../../lib/css/plugin';
 @import '../../../lib/css/form/form3';
 @import '../../../lib/css/component/mselect';
-
 @import '../page';
diff --git a/ui/puzzle/css/build/puzzle.scss b/ui/puzzle/css/build/puzzle.scss
index 08d5d978ed5..12be4b7860c 100644
--- a/ui/puzzle/css/build/puzzle.scss
+++ b/ui/puzzle/css/build/puzzle.scss
@@ -16,5 +16,4 @@
 @import '../../../lib/css/chess/control';
 @import '../../../lib/css/chess/promotion';
 @import '../../../lib/css/chess/blindfold';
-
 @import '../puzzle';
diff --git a/ui/racer/css/_countdown.scss b/ui/racer/css/_countdown.scss
index f7bbd7a6d69..a9299ecf003 100644
--- a/ui/racer/css/_countdown.scss
+++ b/ui/racer/css/_countdown.scss
@@ -1,6 +1,7 @@
 .racer {
   &__countdown {
     @extend %box-radius, %popup-shadow, %flex-center-nowrap;
+
     background: $c-bg-zebra;
     z-index: 100;
     position: absolute;
@@ -27,27 +28,34 @@
         display: block;
         opacity: 0.3;
         transition: all 1s;
+
         &.active {
           opacity: 1;
         }
+
         &.red {
           background: $c-bad;
+
           &.active {
             box-shadow:
               0 0 2em $c-bad,
               0 0 4em $c-bad;
           }
         }
+
         &.orange {
           background: $c-brag;
+
           &.active {
             box-shadow:
               0 0 2em $c-brag,
               0 0 4em $c-brag;
           }
         }
+
         &.green {
           background: $c-good;
+
           &.active {
             box-shadow:
               0 0 2em $c-good,
@@ -59,6 +67,7 @@
 
     &__seconds {
       @extend %flex-center;
+
       font-family: storm;
       font-size: 8em;
       color: $c-font;
diff --git a/ui/racer/css/_home.scss b/ui/racer/css/_home.scss
index 9f39fa4504f..106dba33331 100644
--- a/ui/racer/css/_home.scss
+++ b/ui/racer/css/_home.scss
@@ -5,6 +5,7 @@
 
   &__buttons {
     @extend %flex-between;
+
     margin: 4em 0 3em 0;
   }
 
@@ -14,6 +15,7 @@
 
   .button {
     @extend %flex-column;
+
     align-items: center;
     font-size: 1.5em;
     padding: 4em 0;
@@ -21,7 +23,9 @@
     opacity: 0.75;
     overflow: hidden;
     white-space: normal;
+
     @include transition;
+
     .car {
       position: relative;
       font-family: racer-car;
@@ -30,15 +34,20 @@
       display: block;
       margin-top: -0.5em;
     }
+
     &:hover {
       opacity: 1;
+
       .car {
         transform: translateX(0.1em) scaleX(0.95) skewX(6deg) rotate(-3deg);
         transition: all 0.15s ease-out;
+
         &::before {
           content: 'A';
           position: absolute;
+
           @include inline-start(-0.9em);
+
           bottom: 0.6em;
           font-size: 0.3em;
           animation: boost 0.1s ease-in infinite;
@@ -52,6 +61,7 @@
       transform: translateX(0%);
       opacity: 1;
     }
+
     to {
       transform: translateX(-3px);
       opacity: 0.6;
diff --git a/ui/racer/css/_race.scss b/ui/racer/css/_race.scss
index b1b98fe51cd..aa366e2fc56 100644
--- a/ui/racer/css/_race.scss
+++ b/ui/racer/css/_race.scss
@@ -5,17 +5,18 @@ $c-bg-position-y: 2px;
 
 .racer__race {
   @extend %box-neat;
-  overflow: hidden;
 
+  overflow: hidden;
   position: relative;
   background: $c-bg-box;
   font-size: 0.9em;
 
   &::before,
   &__tracks {
+    @include inline-start(0);
+
     position: absolute;
     top: 0;
-    @include inline-start(0);
   }
 
   &::before {
@@ -26,6 +27,7 @@ $c-bg-position-y: 2px;
     background-image: url('../images/racer/road1.webp');
     background-repeat: repeat;
     background-position-y: 7px;
+
     .racer--racing & {
       animation: road-scroll 1s linear infinite;
 
@@ -39,14 +41,17 @@ $c-bg-position-y: 2px;
     from {
       transform: translateX(0);
     }
+
     to {
       transform: translateX(-101px);
     }
   }
+
   @keyframes road-scroll-rtl {
     from {
       transform: translateX(0);
     }
+
     to {
       transform: translateX(101px);
     }
@@ -66,13 +71,14 @@ $c-bg-position-y: 2px;
 
   &__score {
     @extend %flex-center;
+    @include inline-end(-140px);
+
     direction: ltr;
     font-family: storm;
     font-size: 20px;
     justify-content: flex-end;
     position: absolute;
     top: 0;
-    @include inline-end(-140px);
     color: #bbb;
     width: 3.8ch;
     padding-right: 0.8ch;
@@ -80,13 +86,16 @@ $c-bg-position-y: 2px;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     transition: color ease-out 0.5s;
+
     .racer__race__track--boost & {
       transition: none;
       color: #fff;
     }
+
     .racer__race__track--first & {
       color: $c-brag;
     }
+
     .racer__race__track--boost.racer__race__track--first & {
       color: $c-racer-boost;
     }
@@ -112,18 +121,22 @@ $c-bg-position-y: 2px;
       font-size: $car-width;
       line-height: 0;
       text-shadow: -1px 1px 2px #000;
+      transition: all 0.9s ease-out;
       transform: scaleX(1) translateX(0);
+
       @include if-rtl {
         transform: scaleX(-1) translateX(0);
       }
-      transition: all 0.9s ease-out;
 
       .racer__race__track--boost & {
         transform: translateX(6px) scaleX(0.95) skewX(7deg) rotate(-3deg);
+
         @include if-rtl {
           transform: translateX(6px) scaleX(-0.95) skewX(7deg) rotate(-3deg);
         }
+
         transition: all 0.15s ease-out;
+
         &::before {
           content: 'A';
           position: absolute;
@@ -131,12 +144,15 @@ $c-bg-position-y: 2px;
           font-size: 0.4em;
           animation: boost 0.1s ease-in infinite;
         }
+
         &.vehicle3::before {
           left: -0.1em;
         }
+
         &.vehicle2::before {
           left: -0.6em;
         }
+
         &.vehicle0::before,
         &.vehicle1::before {
           left: -0.9em;
@@ -147,10 +163,12 @@ $c-bg-position-y: 2px;
     .user-link,
     anonymous {
       color: #ddd;
+
       .racer__race__track--me & {
         color: #efab3e;
       }
     }
+
     .utitle {
       margin-right: 0.6ch;
     }
@@ -162,6 +180,7 @@ $c-bg-position-y: 2px;
     transform: translateX(0%);
     opacity: 1;
   }
+
   to {
     transform: translateX(-3px);
     opacity: 0.6;
@@ -180,6 +199,7 @@ $car-colors: (
   8: #daa520,
   9: hsl(32, 75%, 47%),
 );
+
 @each $index, $color in $car-colors {
   .car-#{$index} {
     color: #{$color};
diff --git a/ui/racer/css/_racer.scss b/ui/racer/css/_racer.scss
index ad631f250fb..d0ab7f68dce 100644
--- a/ui/racer/css/_racer.scss
+++ b/ui/racer/css/_racer.scss
@@ -59,13 +59,16 @@
 
   &__skip {
     @extend %flex-column;
-    align-items: center;
     @include transition;
+
+    align-items: center;
     outline: none;
+
     &.disabled {
       opacity: 0;
       cursor: default;
     }
+
     &::before {
       content: '';
       background-image: url('../images/racer/gear-stick.svg');
@@ -73,10 +76,12 @@
       height: 4ch;
       margin-bottom: 0.6ch;
     }
+
     &:hover::before {
       transform: scaleX(-1);
     }
   }
+
   &--pre .racer__skip {
     cursor: not-allowed;
   }
@@ -88,11 +93,14 @@
   &__pre__message {
     &--with-skip {
       @extend %flex-center-nowrap;
+
       justify-content: space-between;
     }
+
     &__pov {
       color: $c-brag;
       margin: 1em 0;
+
       @include mq-at-least-col2 {
         margin: 1em 0 0 0;
       }
@@ -107,6 +115,7 @@
     &__new {
       margin: 2em 0 1em 0;
     }
+
     &__button {
       width: 100%;
     }
diff --git a/ui/racer/css/build/racer.home.scss b/ui/racer/css/build/racer.home.scss
index 581e2f3f788..bb005fb6b09 100644
--- a/ui/racer/css/build/racer.home.scss
+++ b/ui/racer/css/build/racer.home.scss
@@ -1,3 +1,2 @@
 @import '../../../lib/css/plugin';
-
 @import '../home';
diff --git a/ui/racer/css/build/racer.scss b/ui/racer/css/build/racer.scss
index b76dab79ffc..bfb9b943ed1 100644
--- a/ui/racer/css/build/racer.scss
+++ b/ui/racer/css/build/racer.scss
@@ -7,5 +7,4 @@
 @import '../../../lib/css/theme/board/coords';
 @import '../../../lib/css/chess/promotion';
 @import '../../../lib/css/puz/puz';
-
 @import '../racer';
diff --git a/ui/recap/css/_recap.scss b/ui/recap/css/_recap.scss
index b8afa573455..ac5d8371c45 100644
--- a/ui/recap/css/_recap.scss
+++ b/ui/recap/css/_recap.scss
@@ -4,8 +4,10 @@ $gradient-end: #764ba2;
 // dark theme is forced on this page
 body {
   background-image: linear-gradient(135deg, $gradient-start 0%, $gradient-end 100%);
+
   --c-font-page: #fff;
   --c-font-shadow: hsla(0, 0, 0%, 0);
+
   &,
   .site-title,
   .site-title span,
@@ -17,6 +19,7 @@ body {
       color: #fff;
     }
   }
+
   .hbg__in {
     &,
     &::before,
@@ -24,11 +27,13 @@ body {
       background-color: #fff;
     }
   }
+
   #clinput,
   #friend_box,
   .site-title-nav__donate {
     display: none;
   }
+
   @media (min-width: at-least($medium)) {
     #topnav {
       display: none;
@@ -48,6 +53,7 @@ body {
     }
   }
 }
+
 .recap {
   position: absolute;
   inset: 0 1vw;
@@ -85,12 +91,16 @@ body {
 .swiper {
   height: 100%;
   opacity: 0;
+
   @include transition(opacity 0.2s);
+
   &-initialized {
     opacity: 1;
   }
+
   --swiper-theme-color: #fff;
 }
+
 .swiper-button-next,
 .swiper-button-prev {
   color: #fff;
@@ -99,9 +109,12 @@ body {
 
 .swiper-slide {
   @extend %flex-column;
+
   justify-content: center;
   align-items: center;
+
   @include fluid-size('font-size', 15px, 25px);
+
   gap: 3em;
 }
 
@@ -112,8 +125,10 @@ body {
     max-width: 61vw;
     max-height: 50vh;
   }
+
   .lpv {
     --c-lpv-bg: transparent;
+
     outline: none;
     box-shadow: none;
   }
@@ -131,6 +146,7 @@ body {
 
 .recap__content {
   @extend %flex-column;
+
   gap: 2em;
   font-size: 1.6em;
 }
@@ -141,13 +157,17 @@ body {
 
 .recap--massive {
   @extend %flex-column;
+
   align-items: center;
   max-width: 80%;
+
   @include fluid-size('font-size', 19px, 42px);
+
   strong {
     font-size: 3em;
   }
 }
+
 .recap--big {
   font-size: 1.5em;
 }
@@ -158,8 +178,10 @@ body {
 
 .recap__perfs {
   @extend %flex-column;
+
   gap: 1em;
 }
+
 .recap__perf {
   position: relative;
   color: white;
@@ -176,18 +198,23 @@ body {
   color: $c-over;
   padding-right: 0.5em;
 }
+
 .recap__perf__data {
   @extend %flex-center-nowrap;
+
   gap: 3rem;
   padding: 0 2rem;
+
   i {
     font-size: 3em;
   }
+
   strong {
     font-size: 1.7em;
     line-height: 1;
   }
 }
+
 .recap__perf__games strong {
   display: block;
   font-weight: 2em;
@@ -210,6 +237,7 @@ body {
   h2 {
     display: none;
   }
+
   .grid {
     display: flex;
     flex-wrap: wrap;
@@ -243,6 +271,7 @@ body {
     flex: 50%;
   }
 }
+
 @media screen and (orientation: landscape) {
   .recap__shareable .grid .stat {
     flex: 33%;
@@ -255,10 +284,12 @@ body {
       display: inline;
       height: 30px;
     }
+
     h2 {
       display: block;
       margin: 0.5em 0;
     }
+
     .grid {
       row-gap: 1em;
       padding: 0.5em;
@@ -279,8 +310,10 @@ body {
     .logo {
       height: 40px;
     }
+
     .openings {
       margin-top: 2em;
+
       .stat {
         font-size: 1em;
       }
@@ -316,6 +349,7 @@ body {
 
   svg {
     --progress: 0;
+
     position: absolute;
     left: 0;
     top: 0;
@@ -335,9 +369,11 @@ body {
   td {
     padding: 0.5em 0;
   }
+
   td:first-child {
     text-align: left;
   }
+
   td:last-child {
     text-align: right;
     font-size: 0.8em;
@@ -346,18 +382,22 @@ body {
     padding-left: 1em;
   }
 }
+
 .recap__slide--opponents {
   a {
     border: none;
   }
+
   .uflair,
   .noflair {
     font-size: 1.5em;
     margin-right: 0.5em;
   }
+
   .noflair {
     opacity: 0.8;
   }
+
   .trophy {
     height: 1em;
   }
@@ -375,8 +415,10 @@ body {
 
 .recap ul {
   text-align: left;
+
   li {
     @extend %flex-center;
+
     &::before {
       content: '✓';
       font-size: 1.5em;
diff --git a/ui/recap/css/build/recap.scss b/ui/recap/css/build/recap.scss
index 2de8162511b..9fcb731aada 100644
--- a/ui/recap/css/build/recap.scss
+++ b/ui/recap/css/build/recap.scss
@@ -2,6 +2,6 @@
 @import '../../../lib/css/plugin';
 
 $c-lpv-bg: transparent;
-@import '../../../lib/css/component/pgn-viewer';
 
+@import '../../../lib/css/component/pgn-viewer';
 @import '../recap';
diff --git a/ui/round/css/_app-layout.scss b/ui/round/css/_app-layout.scss
index f1e64dcd956..3814396b7c2 100644
--- a/ui/round/css/_app-layout.scss
+++ b/ui/round/css/_app-layout.scss
@@ -71,9 +71,11 @@
       .ruser {
         justify-content: end;
       }
+
       .rclock {
         justify-self: start;
       }
+
       .material {
         justify-self: end;
         margin-inline-end: 6px;
@@ -82,6 +84,7 @@
 
     .ricons {
       margin: 0.5em 0;
+
       &.empty {
         margin-bottom: 0;
       }
diff --git a/ui/round/css/_control.scss b/ui/round/css/_control.scss
index ccbb3daf0e7..f134897f0fc 100644
--- a/ui/round/css/_control.scss
+++ b/ui/round/css/_control.scss
@@ -65,6 +65,7 @@
 
   .question {
     @extend %flex-center-nowrap;
+
     animation: flash-once 1s ease-in;
     border: none;
     padding: 1px;
@@ -219,9 +220,11 @@
       0% {
         opacity: 0;
       }
+
       60% {
         opacity: 0.2;
       }
+
       85% {
         opacity: 0;
       }
@@ -231,6 +234,7 @@
       position: relative;
       animation: none;
       color: $c-font-clear;
+
       &::before {
         content: '';
         position: absolute;
@@ -243,6 +247,7 @@
 
       span {
         display: block;
+
         // this animation somewhat changes the element width,
         // and can cause overflow on narrow screens, where it already
         // is at 100% width
@@ -264,7 +269,9 @@
       justify-content: center;
       position: absolute;
       top: 0;
+
       @include inline-end(-25px);
+
       width: 25px;
       height: 6rem;
       border: 0;
@@ -282,7 +289,9 @@
       &:hover {
         background: $c-bad;
         color: $c-over;
+
         @include inline-end(-36px);
+
         width: 35px;
       }
     }
diff --git a/ui/round/css/_icon.scss b/ui/round/css/_icon.scss
index 2d99bfa7bc6..8d8f88dc157 100644
--- a/ui/round/css/_icon.scss
+++ b/ui/round/css/_icon.scss
@@ -17,19 +17,21 @@
     width: 60px;
 
     .fbt.no {
+      @include inline-end(-34px);
+
       padding: 0.1em 0;
       width: 30px;
       text-align: center;
       position: absolute;
       top: 0;
-      @include inline-end(-34px);
     }
 
     .fbt.yes {
+      @include inline-end(0);
+
       $act-confirm-shade: $m-accent_black--mix-70;
 
       position: absolute;
-      @include inline-end(0);
       top: -3px;
       border-radius: 8px;
       color: #fff;
diff --git a/ui/round/css/_layout.scss b/ui/round/css/_layout.scss
index 1ba6ff20ad5..db448cc3223 100644
--- a/ui/round/css/_layout.scss
+++ b/ui/round/css/_layout.scss
@@ -12,8 +12,10 @@
   grid-area: main;
   display: grid;
   gap: $block-gap;
+
   @include mq-is-col1 {
     gap: 0;
+
     .game__meta__players {
       display: none;
     }
diff --git a/ui/round/css/_material.scss b/ui/round/css/_material.scss
index 75eaff1650d..d61abc775a8 100644
--- a/ui/round/css/_material.scss
+++ b/ui/round/css/_material.scss
@@ -25,6 +25,7 @@
 
   score {
     @extend %roboto;
+
     line-height: 32px;
     vertical-align: top;
   }
diff --git a/ui/round/css/_meta.scss b/ui/round/css/_meta.scss
index c53abbf9508..eb094a674fc 100644
--- a/ui/round/css/_meta.scss
+++ b/ui/round/css/_meta.scss
@@ -50,8 +50,9 @@
   }
 
   .bookmark {
-    position: absolute;
     @include inline-end(0);
+
+    position: absolute;
     z-index: $z-game-bookmark-2;
     color: $c-font-dim;
 
diff --git a/ui/round/css/_moves-col1.scss b/ui/round/css/_moves-col1.scss
index 44d2360f8b2..e44cd6c370a 100644
--- a/ui/round/css/_moves-col1.scss
+++ b/ui/round/css/_moves-col1.scss
@@ -29,6 +29,7 @@
     @include if-light {
       box-shadow: 0 4px 4px #aaa inset;
     }
+
     &::-webkit-scrollbar {
       height: 0;
     }
@@ -58,6 +59,7 @@
     &.#{$active-class},
     &:hover {
       background: $c-bg-zebra;
+
       @include if-light {
         background: hsl($site-hue, 20%, 85%);
       }
diff --git a/ui/round/css/_moves-col2.scss b/ui/round/css/_moves-col2.scss
index 04a45872d50..741d54abe42 100644
--- a/ui/round/css/_moves-col2.scss
+++ b/ui/round/css/_moves-col2.scss
@@ -10,6 +10,7 @@
 
   #{$moves-tag} {
     @include prevent-select;
+
     display: flex;
     flex-flow: row wrap;
     align-items: center;
diff --git a/ui/round/css/_moves.scss b/ui/round/css/_moves.scss
index 9bcb5e73ddd..df3eb6c3f36 100644
--- a/ui/round/css/_moves.scss
+++ b/ui/round/css/_moves.scss
@@ -10,6 +10,7 @@ $buttons-height: 2.5rem;
 
 #{$rmoves-tag} {
   @extend %flex-column, %double-tap;
+
   position: relative;
 
   #{$rbuttons-tag} {
@@ -30,8 +31,8 @@ $buttons-height: 2.5rem;
   .fbt,
   .noop {
     @include prevent-select;
-    -webkit-callout-touch: none;
 
+    -webkit-callout-touch: none;
     flex: 0 0 calc(100% / 6);
     text-align: center;
   }
diff --git a/ui/round/css/_nvui.scss b/ui/round/css/_nvui.scss
index 0194305bd0a..f8939d06d62 100644
--- a/ui/round/css/_nvui.scss
+++ b/ui/round/css/_nvui.scss
@@ -24,14 +24,17 @@
     line-height: 32px;
     border-collapse: collapse;
     text-align: center;
+
     td,
     th {
       width: 32px;
       border: 1px solid black;
+
       .black {
         background-color: black;
         color: white;
       }
+
       .white {
         background-color: white;
         color: black;
@@ -70,33 +73,41 @@
       overflow: hidden;
       white-space: nowrap;
     }
+
     .board-wrapper div button.light {
       background-color: #cecece;
     }
+
     .board-wrapper div button.dark {
       background-color: #535353;
     }
+
     .board-wrapper div button.selected {
       border-color: #303030;
       border-width: thick;
       border-style: groove;
     }
+
     .actions,
     .board-wrapper {
       max-width: $xx-small;
     }
+
     .actions {
       display: flex;
     }
+
     @media (max-width: at-most($xx-small)) {
       .actions button,
       .actions div,
       .board-wrapper div button {
         width: 12vw;
       }
+
       .board {
         text-align: left;
       }
+
       h2,
       .boardstatus {
         position: absolute;
@@ -107,12 +118,14 @@
         overflow: hidden;
       }
     }
+
     @media (min-width: at-least($xx-small)) {
       .actions button,
       .actions div,
       .board-wrapper div button {
         width: 12.5%;
       }
+
       .board {
         text-align: center;
       }
diff --git a/ui/round/css/_user.scss b/ui/round/css/_user.scss
index eee4a741040..109ae78366b 100644
--- a/ui/round/css/_user.scss
+++ b/ui/round/css/_user.scss
@@ -27,6 +27,7 @@
     margin: 0 0.25em 0 0.3em;
     color: $c-font-dim;
     letter-spacing: -0.5px;
+
     body.no-rating & {
       display: none;
     }
@@ -73,10 +74,12 @@
       flex: 1 1 auto;
     }
   }
+
   @include mq-is-col1 {
     &-top {
       align-self: flex-end;
     }
+
     &-bottom {
       align-self: flex-start;
     }
diff --git a/ui/simul/css/_list.scss b/ui/simul/css/_list.scss
index 501cdc3d949..ccb2b717695 100644
--- a/ui/simul/css/_list.scss
+++ b/ui/simul/css/_list.scss
@@ -1,5 +1,6 @@
 .simul-list {
   overflow: hidden;
+
   &__help {
     @extend %page-text-shadow !optional;
 
@@ -61,6 +62,7 @@
 
     .name {
       @extend %break-word;
+
       font-size: 1.7em;
       display: block;
     }
diff --git a/ui/simul/css/_user-list.scss b/ui/simul/css/_user-list.scss
index 862508d150a..ff421d88691 100644
--- a/ui/simul/css/_user-list.scss
+++ b/ui/simul/css/_user-list.scss
@@ -1,5 +1,6 @@
 .simul-list {
   overflow: hidden;
+
   .count {
     @extend %roboto;
 
@@ -19,8 +20,10 @@
 
   .name {
     @extend %break-word;
+
     font-size: 1.7em;
   }
+
   time {
     white-space: nowrap;
   }
diff --git a/ui/site/css/build/site.scss b/ui/site/css/build/site.scss
index 0aa1fb5704e..dbced0b7345 100644
--- a/ui/site/css/build/site.scss
+++ b/ui/site/css/build/site.scss
@@ -1,3 +1,2 @@
 @import '../../../lib/css/abstract/all';
-
 @import '../../../lib/css/page/lichess';
diff --git a/ui/storm/css/_play-again.scss b/ui/storm/css/_play-again.scss
index faf92b0571d..b1d6203dacb 100644
--- a/ui/storm/css/_play-again.scss
+++ b/ui/storm/css/_play-again.scss
@@ -23,6 +23,7 @@
 
 .storm-play-again {
   @extend %flex-center-center;
+
   font-size: 1.5em;
   letter-spacing: 0.4em;
   padding: 1em 0;
diff --git a/ui/storm/css/_play.scss b/ui/storm/css/_play.scss
index 5df69fa8f82..116dc25abd0 100644
--- a/ui/storm/css/_play.scss
+++ b/ui/storm/css/_play.scss
@@ -1,7 +1,6 @@
 .storm {
   &--play {
     display: grid;
-
     row-gap: $block-gap;
     column-gap: $block-gap;
     grid-template-areas: 'board' 'side';
diff --git a/ui/storm/css/build/storm.dashboard.scss b/ui/storm/css/build/storm.dashboard.scss
index 1811546e61a..5356c2928ca 100644
--- a/ui/storm/css/build/storm.dashboard.scss
+++ b/ui/storm/css/build/storm.dashboard.scss
@@ -1,4 +1,3 @@
 @import '../../../lib/css/plugin';
 @import '../../../lib/css/component/slist';
-
 @import '../dashboard';
diff --git a/ui/storm/css/build/storm.scss b/ui/storm/css/build/storm.scss
index 582b1d95827..31d19b9be1a 100644
--- a/ui/storm/css/build/storm.scss
+++ b/ui/storm/css/build/storm.scss
@@ -7,5 +7,4 @@
 @import '../../../lib/css/theme/board/coords';
 @import '../../../lib/css/chess/promotion';
 @import '../../../lib/css/puz/puz';
-
 @import '../storm';
diff --git a/ui/swiss/css/_app-control.scss b/ui/swiss/css/_app-control.scss
index 5b1c9e7010a..2373dcdb093 100644
--- a/ui/swiss/css/_app-control.scss
+++ b/ui/swiss/css/_app-control.scss
@@ -16,8 +16,9 @@
   }
 
   .highlight {
-    position: absolute;
     @include inline-end(5px);
+
+    position: absolute;
     top: -3px;
     padding: 8px 20px;
     border-radius: 8px;
diff --git a/ui/swiss/css/_app-standing.scss b/ui/swiss/css/_app-standing.scss
index d0da7e07436..b127b6b7884 100644
--- a/ui/swiss/css/_app-standing.scss
+++ b/ui/swiss/css/_app-standing.scss
@@ -48,12 +48,12 @@
 
   tr.active td:last-child {
     $c-active-border: $m-primary_bg--mix-70;
+
     @include gradient-border($c-active-border, to left, to right);
   }
 
   td.rank {
     @extend %roboto;
-
     @include padding-direction(1em, 0.5em, 1em, 10px);
 
     width: 1px;
@@ -79,6 +79,7 @@
 
       & > * {
         @extend %flex-center-center;
+
         flex: 0 0 2em;
         text-align: center;
       }
diff --git a/ui/swiss/css/_boards.scss b/ui/swiss/css/_boards.scss
index f86f6cd0572..bdd7f65030e 100644
--- a/ui/swiss/css/_boards.scss
+++ b/ui/swiss/css/_boards.scss
@@ -1,6 +1,7 @@
 .swiss__boards {
   margin: $block-gap 0;
   gap: 1ch;
+
   ---np-min-width: 200px;
 }
 
diff --git a/ui/swiss/css/_form.scss b/ui/swiss/css/_form.scss
index 5702897546c..9f6b54c808c 100644
--- a/ui/swiss/css/_form.scss
+++ b/ui/swiss/css/_form.scss
@@ -1,14 +1,17 @@
 .swiss__form {
   summary {
     cursor: pointer;
+
     &:hover {
       color: $c-link;
     }
   }
+
   details[open] summary {
     margin-bottom: 3rem;
     color: $c-accent;
   }
+
   details,
   details * {
     box-sizing: border-box;
diff --git a/ui/swiss/css/_player-info.scss b/ui/swiss/css/_player-info.scss
index 05e3dfed50d..15d12210a99 100644
--- a/ui/swiss/css/_player-info.scss
+++ b/ui/swiss/css/_player-info.scss
@@ -10,13 +10,12 @@
   }
 
   .close {
-    position: absolute;
-    top: 4px;
     @include inline-end(5px);
-    opacity: 0.6;
-
     @include transition;
 
+    position: absolute;
+    top: 4px;
+    opacity: 0.6;
     color: $c-bad;
 
     &:hover {
diff --git a/ui/swiss/css/_round-pairings.scss b/ui/swiss/css/_round-pairings.scss
index da4eae93e81..372c33e485d 100644
--- a/ui/swiss/css/_round-pairings.scss
+++ b/ui/swiss/css/_round-pairings.scss
@@ -1,9 +1,11 @@
 .pagination {
   margin-inline-start: var(---box-padding);
+
   &--top {
     padding-bottom: 1em;
     border-bottom: $border;
   }
+
   &--bottom {
     padding: 1em 0;
   }
diff --git a/ui/swiss/css/_show.scss b/ui/swiss/css/_show.scss
index 5b62bb81401..6fb753bdb32 100644
--- a/ui/swiss/css/_show.scss
+++ b/ui/swiss/css/_show.scss
@@ -22,10 +22,9 @@
   }
 
   &__main-created {
-    padding-bottom: 2em;
-
-    /* as quote margin */
+    padding-bottom: 2em; // as quote margin
   }
+
   &__main .box {
     overflow: hidden;
   }
diff --git a/ui/swiss/css/_stats.scss b/ui/swiss/css/_stats.scss
index 9aad892fbb3..8bbfdf56b39 100644
--- a/ui/swiss/css/_stats.scss
+++ b/ui/swiss/css/_stats.scss
@@ -24,6 +24,7 @@
 
   &__links {
     margin: 2em auto 0 auto;
+
     a {
       display: block;
       margin: 0.5em 0;
diff --git a/ui/tournament/css/_actor-info.scss b/ui/tournament/css/_actor-info.scss
index 5af1d7136ba..41f60b54b06 100644
--- a/ui/tournament/css/_actor-info.scss
+++ b/ui/tournament/css/_actor-info.scss
@@ -10,13 +10,12 @@
   }
 
   .close {
-    position: absolute;
-    top: 4px;
     @include inline-end(5px);
-    opacity: 0.6;
-
     @include transition;
 
+    position: absolute;
+    top: 4px;
+    opacity: 0.6;
     color: $c-bad;
 
     &:hover {
@@ -26,6 +25,7 @@
 
   .stats {
     @extend %flex-column;
+
     gap: 1em;
     padding-bottom: 1em;
     justify-content: center;
@@ -33,8 +33,8 @@
 
     h2 {
       @extend %metal;
-      align-self: stretch;
 
+      align-self: stretch;
       direction: ltr;
       font-size: 1.4em;
       padding: 0.6rem 1rem;
diff --git a/ui/tournament/css/_app-control.scss b/ui/tournament/css/_app-control.scss
index 039abaa30d0..3ba4b5cd76e 100644
--- a/ui/tournament/css/_app-control.scss
+++ b/ui/tournament/css/_app-control.scss
@@ -17,7 +17,7 @@
 
   @keyframes tour-delay {
     0% {
-      width: 0%;
+      width: 0;
     }
 
     100% {
@@ -27,7 +27,7 @@
 
   .delay {
     background: rgba(117, 153, 0, 0.5);
-    width: 0%;
+    width: 0;
 
     button {
       opacity: 0.7;
@@ -37,8 +37,9 @@
   }
 
   .highlight {
-    position: absolute;
     @include inline-end(5px);
+
+    position: absolute;
     top: -3px;
     padding: 8px 20px;
     border-radius: 8px;
diff --git a/ui/tournament/css/_app-header.scss b/ui/tournament/css/_app-header.scss
index f54cbee381b..331035e5662 100644
--- a/ui/tournament/css/_app-header.scss
+++ b/ui/tournament/css/_app-header.scss
@@ -107,9 +107,10 @@
   }
 
   .tour-sched-marathon & .fire-trophy {
+    @include inline-start(10px);
+
     position: absolute;
     top: 0;
-    @include inline-start(10px);
     width: 70px;
     height: 80px;
     opacity: 0.7;
@@ -130,7 +131,9 @@
       .shield-trophy {
         position: absolute;
         top: -8px;
+
         @include inline-start(12px);
+
         display: block;
         width: 67px;
         height: 80px;
diff --git a/ui/tournament/css/_app-standing.scss b/ui/tournament/css/_app-standing.scss
index 11cbba899d2..0a427e1a995 100644
--- a/ui/tournament/css/_app-standing.scss
+++ b/ui/tournament/css/_app-standing.scss
@@ -15,6 +15,7 @@
       display: inline-block;
       padding-inline-end: 5px;
       max-width: 140px;
+
       @media (min-width: at-least($x-large)) {
         max-width: 200px;
       }
@@ -62,6 +63,7 @@
 
   td.rank {
     @include padding-direction(1em, 0.5em, 1em, 10px);
+
     width: 1px;
 
     /* helps keeping it as small as possible */
diff --git a/ui/tournament/css/_leaderboard.scss b/ui/tournament/css/_leaderboard.scss
index dc40462b001..029f1476b47 100644
--- a/ui/tournament/css/_leaderboard.scss
+++ b/ui/tournament/css/_leaderboard.scss
@@ -34,7 +34,6 @@ $user-list-width: 35ch;
 
   li {
     @extend %flex-between;
-
     @include padding-direction(1.2rem, 1.2rem, 1.2rem, 0.5rem);
 
     &:nth-child(even) {
@@ -58,9 +57,10 @@ $user-list-width: 35ch;
 }
 
 .shield-trophy {
+  @include inline-start(15px);
+
   position: absolute;
   top: -11px;
-  @include inline-start(15px);
   width: 67px;
   height: 80px;
   background: url('../images/trophy/shield-gold.png') no-repeat;
@@ -87,6 +87,7 @@ $user-list-width: 35ch;
 
   .shield-trophy {
     @include inline-start(calc(var(---box-padding) - 10px));
+
     transform: scale(0.7);
   }
 
diff --git a/ui/tournament/css/_side.scss b/ui/tournament/css/_side.scss
index eaabdaa6461..9357a95aa8b 100644
--- a/ui/tournament/css/_side.scss
+++ b/ui/tournament/css/_side.scss
@@ -13,6 +13,7 @@
       font-family: lichess;
       font-size: 1em;
     }
+
     &:hover {
       color: $c-primary;
     }
@@ -22,9 +23,11 @@
     .disclosure::before {
       content: $licon-DownTriangle;
     }
+
     .tour__meta > * {
       display: none;
     }
+
     .tour__meta__head,
     .disclosure {
       display: flex;
@@ -44,14 +47,15 @@
 
 .tour__meta {
   @extend %flex-column, %box-neat-force;
+
   gap: $block-gap;
   position: relative;
-
   background: $c-bg-box;
   padding: $block-gap 0;
 
   .scrollable-content {
     @extend %flex-column;
+
     gap: $block-gap;
     overflow-y: scroll;
   }
@@ -116,6 +120,7 @@
 
   .description {
     @extend %break-word;
+
     height: fit-content;
   }
 
@@ -128,6 +133,7 @@
 
 .tour__bots-warning {
   @extend %box-neat, %flex-center-nowrap;
+
   gap: 1em;
   margin-top: 1em;
   background: $m-accent_bg--mix-10;
diff --git a/ui/tournament/css/_stats.scss b/ui/tournament/css/_stats.scss
index 75377d52b9b..fa7c90b2c2c 100644
--- a/ui/tournament/css/_stats.scss
+++ b/ui/tournament/css/_stats.scss
@@ -24,6 +24,7 @@
 
   &__links {
     margin: 2em auto 0 auto;
+
     a {
       display: block;
       margin: 0.5em 0;
diff --git a/ui/tournament/css/_team-battle.scss b/ui/tournament/css/_team-battle.scss
index a869dac5f31..5358dcc5153 100644
--- a/ui/tournament/css/_team-battle.scss
+++ b/ui/tournament/css/_team-battle.scss
@@ -91,6 +91,7 @@ team {
 
   tr.active td:last-child {
     $c-active-border: $m-primary_bg--mix-70;
+
     @include gradient-border($c-active-border, to left, to right);
   }
 
diff --git a/ui/tournament/css/_team-info.scss b/ui/tournament/css/_team-info.scss
index 6b26a285c7f..922941702e9 100644
--- a/ui/tournament/css/_team-info.scss
+++ b/ui/tournament/css/_team-info.scss
@@ -1,8 +1,10 @@
 .tour__team-info {
   .players {
     width: 100%;
+
     .name {
       @extend %nowrap-ellipsis;
+
       padding-inline-end: 5px;
     }
 
diff --git a/ui/tournament/css/schedule/_finished.scss b/ui/tournament/css/schedule/_finished.scss
index 0554302c671..26d69884fff 100644
--- a/ui/tournament/css/schedule/_finished.scss
+++ b/ui/tournament/css/schedule/_finished.scss
@@ -5,6 +5,7 @@
         display: none;
       }
     }
+
     .players {
       @media (max-width: at-most($xx-small)) {
         display: none;
diff --git a/ui/tournament/css/schedule/_form.scss b/ui/tournament/css/schedule/_form.scss
index 4c2c4a98fe0..d60b7bfe4e2 100644
--- a/ui/tournament/css/schedule/_form.scss
+++ b/ui/tournament/css/schedule/_form.scss
@@ -1,8 +1,10 @@
 .tour__form {
   .tour-name > div {
     @extend %flex-center-nowrap;
+
     overflow: hidden;
     gap: 1em;
+
     > * {
       flex: 1 1 auto;
     }
diff --git a/ui/tournament/css/schedule/_schedule.scss b/ui/tournament/css/schedule/_schedule.scss
index 98a5419923d..5c5c0e6d3fd 100644
--- a/ui/tournament/css/schedule/_schedule.scss
+++ b/ui/tournament/css/schedule/_schedule.scss
@@ -13,6 +13,7 @@ $c-tour-variant: #7c5133;
 
 .tour-chart {
   @include prevent-select;
+
   min-height: 400px;
   position: relative;
 
@@ -59,11 +60,14 @@ $c-tour-variant: #7c5133;
       height: calc(100% - 2em);
       margin-inline-start: 1px;
       border-inline-start: 3px dashed $c-accent;
+
       &::after {
         content: '';
         position: absolute;
         top: -24px;
+
         @include inline-start(-10px);
+
         width: 0;
         height: 0;
         border-left: 8px solid transparent;
diff --git a/ui/tournament/css/schedule/_side.scss b/ui/tournament/css/schedule/_side.scss
index 93d19c76b99..d03e18549ce 100644
--- a/ui/tournament/css/schedule/_side.scss
+++ b/ui/tournament/css/schedule/_side.scss
@@ -1,5 +1,6 @@
 .tour-home__side {
   @extend %page-text-shadow !optional;
+
   h2 {
     font-size: 1.5em;
     margin-top: 30px;
@@ -60,7 +61,9 @@
 .scheduled {
   a {
     color: $c-font;
+
     @include padding-direction(0.5em, 0, 0.5em, 2.7em);
+
     display: block;
     position: relative;
     line-height: 1.2;
@@ -75,6 +78,7 @@
 
       &::before {
         @include inline-start(0.5rem);
+
         opacity: 1;
       }
     }
@@ -90,7 +94,9 @@
 
     position: absolute;
     top: 0.3rem;
+
     @include inline-start(0);
+
     font-size: 2.2em;
     opacity: 0.6;
     color: $c-brag;
diff --git a/ui/tutor/css/_angles.scss b/ui/tutor/css/_angles.scss
index d31de1d6418..a6fa4fec885 100644
--- a/ui/tutor/css/_angles.scss
+++ b/ui/tutor/css/_angles.scss
@@ -1,19 +1,24 @@
 .tutor__perf__angle {
   @extend %flex-column;
+
   &--pieces {
     @media (min-width: at-least($medium)) {
       grid-column: span 2;
     }
+
     .tutor-grades {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
     }
   }
+
   .tutor-grades {
     flex: 1 1 100%;
   }
+
   &--na {
     @extend %flex-center-center;
+
     color: $c-font-dim;
   }
 }
diff --git a/ui/tutor/css/_badge.scss b/ui/tutor/css/_badge.scss
index bbfe1b3c975..3b796defb57 100644
--- a/ui/tutor/css/_badge.scss
+++ b/ui/tutor/css/_badge.scss
@@ -1,13 +1,17 @@
 .tutor-badge {
   @extend %box-radius;
+
   display: inline-flex;
   flex-flow: column;
   padding: 0.5em 1em;
+
   &--time {
     background: $m-brag_bg--mix-20;
   }
+
   &--meta {
     background: $m-good_bg--mix-20;
+
     &:is(bad) {
       background: $m-bad_bg--mix-20;
     }
diff --git a/ui/tutor/css/_card.scss b/ui/tutor/css/_card.scss
index ad659bc2dfe..09b6329fdca 100644
--- a/ui/tutor/css/_card.scss
+++ b/ui/tutor/css/_card.scss
@@ -2,22 +2,29 @@
   &-cards {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
+
     @media (width < $xxx-small) {
       grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
     }
+
     gap: $block-gap;
+
     &--triple {
       grid-template-columns: 1fr;
+
       @media (min-width: at-least($medium)) {
         grid-template-columns: 1fr 1fr 1fr;
       }
     }
+
     &--full-size {
       grid-template-columns: 100%;
     }
   }
+
   &-card {
     @extend %box-neat;
+
     background: $c-bg-box;
 
     $card-padding-w: 2em;
@@ -27,6 +34,7 @@
       border-radius: 12px;
       position: relative;
       cursor: pointer;
+
       &:hover {
         outline: 1px solid $m-primary_bg--mix-60;
         background: $m-primary_bg--mix-08;
@@ -36,46 +44,58 @@
 
     &__top {
       @extend %flex-center-nowrap;
+
       &__title {
         @extend %flex-column;
+
         &--pad {
           @include padding-direction(2rem, #{$card-padding-w}, 0, #{$card-padding-w});
         }
+
         &__text {
           font-size: 1.7em;
           margin-top: 0.7rem;
         }
+
         &--pad .tutor-card__top__title__text {
           margin-top: 0;
         }
+
         &__sub {
           margin-top: 0.3rem;
           color: $c-font-dim;
         }
+
         .tutor-icon {
           height: 2.5em;
         }
       }
     }
+
     &--perf {
       &__top {
         @extend %flex-center-nowrap;
 
         i {
           @extend %page-text-shadow;
+
           font-size: 4em;
           margin: 0 1rem 0 1rem;
           opacity: 0.7;
         }
+
         &__title {
           @extend %flex-column;
+
           i + & {
             margin-top: 1em;
           }
+
           &__text {
             font-size: 1.7em;
             margin-top: 0.7rem;
           }
+
           &__sub {
             margin-top: 0.3rem;
             color: $c-font-dim;
@@ -87,6 +107,7 @@
     &__content {
       padding: #{$card-padding-h} #{$card-padding-w};
     }
+
     &__more {
       display: block;
       text-align: right;
diff --git a/ui/tutor/css/_concepts.scss b/ui/tutor/css/_concepts.scss
index 26ce6f8f16b..a283121a3ce 100644
--- a/ui/tutor/css/_concepts.scss
+++ b/ui/tutor/css/_concepts.scss
@@ -2,11 +2,13 @@ $c-tutor-concept: $c-good;
 
 .tutor__concepts {
   @extend %flex-column;
+
   gap: 2em;
+  margin: 1rem 0;
+
   h2 {
     margin-bottom: 1em;
   }
-  margin: 1rem 0;
 }
 
 .tutor-concept {
@@ -19,24 +21,28 @@ $c-tutor-concept: $c-good;
   &:first-child {
     padding-top: 0;
   }
+
   &:last-child {
     border-bottom: none;
   }
 
   &__icon {
     flex: 0 0 8em;
+
     @media (max-width: at-most($xx-small)) {
       display: none;
     }
   }
 
   $icon-size: 7em;
+
   .tutor-icon {
     flex: 0 0 $icon-size;
     width: $icon-size;
     height: $icon-size;
     color: $c-tutor-concept;
   }
+
   i[data-icon] {
     font-size: 6em;
     color: $c-tutor-concept;
@@ -45,11 +51,14 @@ $c-tutor-concept: $c-good;
   &__content,
   &__desc {
     @extend %flex-column;
+
     gap: 0.4em;
     flex: 1 1 auto;
   }
+
   &__name {
     @extend %flex-center-nowrap;
+
     font-weight: normal;
     font-size: 1.7em;
     color: $c-tutor-concept;
diff --git a/ui/tutor/css/_form.scss b/ui/tutor/css/_form.scss
index 9f5feaffd6b..b08ac5a8832 100644
--- a/ui/tutor/css/_form.scss
+++ b/ui/tutor/css/_form.scss
@@ -2,13 +2,16 @@
   .toggle-box {
     margin-bottom: $block-gap;
   }
+
   .form-split {
     padding-bottom: 2em;
     gap: 1em;
   }
+
   .form-group {
     margin: 0;
   }
+
   &__limit {
     display: block;
     margin: 0 0 0.5em 0;
diff --git a/ui/tutor/css/_grade.scss b/ui/tutor/css/_grade.scss
index 813d8cee9eb..9f7962fff1b 100644
--- a/ui/tutor/css/_grade.scss
+++ b/ui/tutor/css/_grade.scss
@@ -1,35 +1,46 @@
 .tutor {
   &-grades {
     @extend %flex-column;
+
     gap: 2em;
   }
+
   &-grade {
     display: flex;
     align-items: stretch;
     gap: 1.2em;
+
     &__content {
       @extend %flex-column;
+
       gap: 0.4em;
       flex: 1 1 auto;
     }
+
     &__name {
       @extend %flex-center-nowrap;
+
       font-weight: normal;
       font-size: 1.3em;
     }
+
     &--detail .tutor-grade__name {
       text-transform: uppercase;
       font-size: 1.7em;
       margin-bottom: 0.5em;
     }
+
     &--detail.tutor-grade--narrow .tutor-grade__name {
       font-size: 1.3em;
     }
+
     &--narrow .tutor-grade__concept {
       @extend %roboto;
     }
+
     &__visual {
       @extend %flex-center;
+
       > div {
         flex: 13% 0 0;
         margin-inline-end: 1.28%;
@@ -38,16 +49,19 @@
         border: $border;
         border-radius: 4px;
         background: $c-bg-low;
+
         &.lit {
           background: $c-grade-good;
         }
       }
+
       &--1,
       &--2 {
         > div.lit {
           background: $c-grade-bad;
         }
       }
+
       &--3,
       &--4 {
         > div.lit {
@@ -55,20 +69,25 @@
         }
       }
     }
+
     &--detail {
       gap: var(---box-padding);
       align-items: center;
+
       &:not(:last-child) {
         padding-bottom: 2em;
         border-bottom: $border;
       }
+
       $icon-size: max(5em, min(11em, 17vw));
+
       .tutor-icon {
         flex: 0 0 $icon-size;
         width: $icon-size;
         height: $icon-size;
       }
     }
+
     &__detail {
       font-size: 0.9em;
       color: $c-font-dim;
@@ -78,6 +97,7 @@
     .tutor-grade__name {
       color: $c-grade-good;
     }
+
     &--1,
     &--2 {
       .tutor-icon,
@@ -85,6 +105,7 @@
         color: $c-grade-bad;
       }
     }
+
     &--3,
     &--4 {
       .tutor-icon,
@@ -92,6 +113,7 @@
         color: $c-grade-avg;
       }
     }
+
     &--narrow .tutor-icon {
       display: none;
     }
diff --git a/ui/tutor/css/_home.scss b/ui/tutor/css/_home.scss
index e755c5207d0..28dc66667a8 100644
--- a/ui/tutor/css/_home.scss
+++ b/ui/tutor/css/_home.scss
@@ -1,24 +1,30 @@
 .tutor {
   &-home {
     @extend %flex-column;
+
     gap: $block-gap;
     overflow: hidden;
 
     .box {
       @extend %box-neat-force;
     }
+
     &__first-wait .tutor__waiting__games {
       padding-top: 0;
     }
   }
+
   &__first-report {
     text-align: center;
+
     button {
       margin: 5vh 0;
     }
   }
+
   ol {
     margin-bottom: 1em;
+
     li {
       list-style: number;
       list-style-position: inside;
@@ -27,6 +33,7 @@
 
   &__reports-list {
     @extend %flex-column;
+
     gap: 0.3em;
   }
 }
diff --git a/ui/tutor/css/_layout.scss b/ui/tutor/css/_layout.scss
index 518b41b1ced..621c48b9206 100644
--- a/ui/tutor/css/_layout.scss
+++ b/ui/tutor/css/_layout.scss
@@ -2,9 +2,11 @@
   @include mq-subnav-side {
     .subnav {
       width: 22ch;
+
       .subnav__subitem {
         margin-left: 1em;
       }
+
       .subnav__subitem2 {
         margin-left: 2em;
         letter-spacing: 0;
@@ -14,6 +16,7 @@
 
   &-layout {
     @extend %flex-column;
+
     gap: $block-gap;
   }
 }
diff --git a/ui/tutor/css/_opening.scss b/ui/tutor/css/_opening.scss
index 73d38831a8c..3bb5d2998eb 100644
--- a/ui/tutor/css/_opening.scss
+++ b/ui/tutor/css/_opening.scss
@@ -5,15 +5,19 @@
       flex-flow: row nowrap;
       align-items: flex-start;
       gap: 2em;
+
       .lpv {
         max-width: 240px;
       }
+
       @media (max-width: at-most($xx-small)) {
         flex-direction: column;
       }
     }
+
     &__buttons {
       @extend %flex-column;
+
       align-items: flex-start;
       gap: 1em;
     }
diff --git a/ui/tutor/css/_openings.scss b/ui/tutor/css/_openings.scss
index c82d2bee0f3..195f5f928bd 100644
--- a/ui/tutor/css/_openings.scss
+++ b/ui/tutor/css/_openings.scss
@@ -2,44 +2,56 @@
   &__openings {
     &__colors {
       @extend %flex-wrap;
+
       gap: $block-gap;
     }
+
     &__color {
       flex: 250px 1 1;
+
       h2 {
         font-size: 2em;
         margin-bottom: $block-gap;
         color: $c-font-page;
       }
+
       &__openings {
         display: grid;
         gap: 2vmin;
       }
+
       &__explorer {
         margin-top: $block-gap;
         width: 100%;
       }
     }
+
     &__opening {
       .tutor-card__top {
         gap: 1em;
+
         &__board {
           flex: 0 0 9em;
           aspect-ratio: 1;
           margin: 0.6em 0 0 0.8em;
+
           cg-container {
             left: 0;
           }
         }
       }
+
       .slist tr td {
         font-weight: bold;
+
         &:last-child {
           opacity: 0.8;
         }
+
         &.good {
           background: $m-secondary_bg-zebra--mix-20;
         }
+
         &.bad {
           background: $m-bad_bg-zebra--mix-20;
         }
diff --git a/ui/tutor/css/_phases.scss b/ui/tutor/css/_phases.scss
index 82a3cdc620d..9ebfc4e9a9a 100644
--- a/ui/tutor/css/_phases.scss
+++ b/ui/tutor/css/_phases.scss
@@ -3,20 +3,27 @@
     &__phase {
       .tutor-card__top {
         justify-content: center;
+
         &__title {
           @extend %flex-center-nowrap;
+
           gap: 1em;
+
           .tutor-icon {
             height: 3.5em;
           }
         }
       }
+
       .tutor-card__content {
         @extend %flex-column;
       }
+
       &__buttons {
         @extend %flex-column;
+
         gap: 1em;
+
         a {
           text-align: start;
           white-space: normal;
diff --git a/ui/tutor/css/_pieces.scss b/ui/tutor/css/_pieces.scss
index 77ab12e80bc..c42dfdd26e6 100644
--- a/ui/tutor/css/_pieces.scss
+++ b/ui/tutor/css/_pieces.scss
@@ -3,13 +3,16 @@
     grid-template-columns: 1fr 1fr;
     gap: $block-gap;
   }
+
   .tutor-card__top {
     justify-content: center;
     padding-top: 1em;
     gap: 1em;
+
     &__title {
       text-transform: capitalize;
     }
+
     .tutor-icon {
       width: 5em;
       color: $c-font-dim;
diff --git a/ui/tutor/css/_preview.scss b/ui/tutor/css/_preview.scss
index 5ae817e52ec..efee0f4d8a2 100644
--- a/ui/tutor/css/_preview.scss
+++ b/ui/tutor/css/_preview.scss
@@ -1,5 +1,6 @@
 .tutor-preview {
   @extend %box-neat, %flex-between-nowrap, %nowrap-hidden;
+
   background: $c-bg-box;
   padding: 1em var(---box-padding);
   color: $c-font;
@@ -12,6 +13,7 @@
 
   &--empty {
     background: $m-bad_bg--mix-05;
+
     &:hover {
       background: $m-bad_bg--mix-10;
     }
@@ -19,25 +21,34 @@
 
   &__badges {
     @extend %flex-center-nowrap;
+
     gap: 1em;
   }
+
   &__perfs {
     @extend %flex-center-nowrap;
+
     gap: 1em;
   }
+
   &__perf {
     @extend %flex-center-nowrap, %box-radius;
+
     @media (width > $xxx-small) {
       padding: 0.5em 1em;
       border: $border;
     }
+
     gap: 1ch;
+
     &::before {
       font-size: 2.5em;
       opacity: 0.8;
     }
+
     &__data {
       @extend %flex-column;
+
       @media (width < $x-small) {
         display: none;
       }
diff --git a/ui/tutor/css/_report.scss b/ui/tutor/css/_report.scss
index d356947bee8..581851a3635 100644
--- a/ui/tutor/css/_report.scss
+++ b/ui/tutor/css/_report.scss
@@ -1,11 +1,14 @@
 .tutor__report {
   &__header {
     @extend %flex-center;
+
     gap: 1em;
     margin-bottom: 2em;
   }
+
   &__delete {
     font-size: 0.9em;
+
     button {
       color: $c-bad;
     }
diff --git a/ui/tutor/css/_title.scss b/ui/tutor/css/_title.scss
index 31e398a5839..d624906fa8a 100644
--- a/ui/tutor/css/_title.scss
+++ b/ui/tutor/css/_title.scss
@@ -1,21 +1,27 @@
 .tutor {
   h1 {
     @extend %flex-center;
+
     justify-content: flex-start;
     gap: 1ch;
+
     .user-link {
       color: $c-good;
       font-size: 0.6em;
     }
+
     .mselect__label {
       height: 1.5em;
     }
   }
+
   .tutor-header {
     overflow: visible;
   }
+
   @media (max-width: at-most($xx-small)) {
     gap: 0.5ch;
+
     .mselect {
       font-size: 0.8em;
     }
diff --git a/ui/tutor/css/_util.scss b/ui/tutor/css/_util.scss
index 72940ed8b0a..6c5d3f383f5 100644
--- a/ui/tutor/css/_util.scss
+++ b/ui/tutor/css/_util.scss
@@ -1,16 +1,21 @@
 .tutor {
   &__concept {
     text-transform: capitalize;
+
     @extend %flex-center-nowrap;
+
     i {
       position: relative;
       font-size: 0.8em;
       margin-left: 1ch;
       opacity: 0.5;
+
       &:hover {
         opacity: 1;
+
         &::after {
           @extend %box-neat, %popup-shadow;
+
           font-size: 1rem;
           background: $c-bg-popup;
           bottom: 100%;
@@ -25,12 +30,15 @@
       }
     }
   }
+
   .mascot-says {
     @extend %box-radius-bottom;
+
     bad {
       color: $c-grade-bad;
       font-weight: bold;
     }
+
     good {
       color: $c-grade-good;
       font-weight: bold;
diff --git a/ui/tutor/css/_waiting.scss b/ui/tutor/css/_waiting.scss
index d72f11fd113..690acad3a37 100644
--- a/ui/tutor/css/_waiting.scss
+++ b/ui/tutor/css/_waiting.scss
@@ -1,18 +1,20 @@
 .tutor {
   &__waiting__games {
     overflow: hidden;
-    @media (prefers-reduced-motion: reduce) {
-      display: none;
-    }
     min-height: 255px;
     padding: $box-padding-vert 0;
-
     position: relative;
+
     ---move-initial: calc(0%);
     ---move-final: calc(-200px * 30);
 
+    @media (prefers-reduced-motion: reduce) {
+      display: none;
+    }
+
     &__carousel {
       @extend %flex-center-nowrap;
+
       gap: 2em;
       width: fit-content;
       position: relative;
@@ -21,22 +23,28 @@
       animation-play-state: running;
     }
   }
+
   &__waiting-game {
     flex: 0 0 200px;
     transition: 0.5s;
+
     .lpv__player {
       overflow: hidden;
+
       &__name {
         font-size: 1.5em;
         white-space: nowrap;
       }
     }
+
     &.lpv:hover {
       @extend %popup-shadow;
+
       transform: scale(1.2);
       z-index: 50;
     }
   }
+
   @keyframes marquee {
     0% {
       transform: translate3d(var(---move-initial), 0, 0);
diff --git a/ui/tutor/css/build/tutor.home.scss b/ui/tutor/css/build/tutor.home.scss
index ba16d18b03d..3a29cbd115e 100644
--- a/ui/tutor/css/build/tutor.home.scss
+++ b/ui/tutor/css/build/tutor.home.scss
@@ -5,7 +5,6 @@
 @import '../../../lib/css/component/pgn-viewer';
 @import '../../../lib/css/form/form3';
 @import '../../../lib/css/vendor/flatpickr';
-
 @import '../layout';
 @import '../home';
 @import '../title';
diff --git a/ui/user/css/_account.scss b/ui/user/css/_account.scss
index dd463a84e24..9129734c922 100644
--- a/ui/user/css/_account.scss
+++ b/ui/user/css/_account.scss
@@ -29,6 +29,7 @@
 
   .box {
     margin-bottom: 4em;
+
     > p {
       padding-bottom: 2em;
     }
@@ -40,6 +41,7 @@
     display: block;
     margin: 2em auto;
   }
+
   .redacted {
     background: black;
     color: black;
@@ -104,33 +106,42 @@
 
     fieldset {
       @extend %box-neat;
+
       border: $c-border;
       background: $m-accent_bg--mix-10;
       flex: 1 1 49%;
     }
+
     legend {
       @extend %roboto, %box-radius-top;
+
       text-transform: uppercase;
       letter-spacing: 0.2ch;
       background: $m-accent_bg--mix-10;
       padding: 0.2em 1em;
       margin-left: 1em;
     }
+
     .form-check__container {
       margin-inline-start: 1em;
     }
+
     .form-label {
       font-weight: normal;
     }
 
     div {
       @extend %flex-center-nowrap;
+
       margin-top: 1em;
+
       &:last-child {
         margin-bottom: 1em;
       }
+
       em {
         @extend %roboto;
+
         margin-inline-start: 1rem;
         color: $c-font-dimmer;
         unicode-bidi: plaintext;
@@ -162,6 +173,7 @@
 
     &:focus-visible {
       outline: none;
+
       h2 {
         outline: $outline;
         outline-offset: 2px;
@@ -186,6 +198,7 @@
         width: 100%;
         height: 1px;
         background: linear-gradient(to right, $m-accent--fade-50, $c-bg-box 80%);
+
         @include if-rtl {
           background: linear-gradient(to left, $m-accent--fade-50, $c-bg-box 80%);
         }
@@ -232,6 +245,7 @@
     th {
       vertical-align: bottom;
       color: $c-font-dim;
+
       i {
         font-size: 2em;
         display: block;
@@ -282,10 +296,13 @@
 .personal-data {
   &__header {
     @extend %flex-between;
+
     margin-bottom: 3em;
   }
+
   .raw-text {
     @extend %box-radius, %break-word;
+
     font-family: monospace;
     background: $c-bg-page;
     padding: 1em 2em;
diff --git a/ui/user/css/_activity.scss b/ui/user/css/_activity.scss
index d48803b4a6c..65fd9cb29cb 100644
--- a/ui/user/css/_activity.scss
+++ b/ui/user/css/_activity.scss
@@ -28,6 +28,7 @@
 
   .entry {
     @extend %flex-center;
+
     min-height: 64px;
     position: relative;
     padding: 6px 0;
@@ -70,6 +71,7 @@
 
   .sub {
     @extend %zalgoverflow;
+
     margin: 1px 0 3px;
     font-size: 1rem;
     direction: ltr;
diff --git a/ui/user/css/_list-bot.scss b/ui/user/css/_list-bot.scss
index 4dd2a856264..1a30c9b9c80 100644
--- a/ui/user/css/_list-bot.scss
+++ b/ui/user/css/_list-bot.scss
@@ -1,26 +1,31 @@
 .bots {
   @extend %flex-column;
+
   gap: $block-gap;
 
   &__categ {
     &.box-pad {
       padding: 3vh var(---box-padding);
     }
+
     .box__top {
       padding-bottom: 1.5em;
     }
   }
 
   --c-bot: #{$c-primary};
+
   &__featured {
     --c-bot: #{$c-brag};
   }
 
   &__list {
     --min-card-width: 300px;
+
     @media (max-width: at-most($x-small)) {
       --min-card-width: 240px;
     }
+
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(var(--min-card-width), 1fr));
     gap: 1em;
@@ -28,15 +33,16 @@
 
     &__entry {
       @extend %box-neat, %flex-column;
+
       justify-content: space-between;
       gap: 1em;
-
       background: $c-bg-box;
       border: 1px solid var(--c-bot);
       cursor: pointer;
 
       &__head {
         @extend %flex-column;
+
         padding: 1em 1.5em 0 1.5em;
         gap: 0.5em;
 
@@ -48,6 +54,7 @@
 
       &__bio {
         @include line-clamp(4);
+
         color: $c-font-dim;
         font-size: 0.9em;
         padding: 0 1.5em;
@@ -55,14 +62,17 @@
 
       &__rating {
         @extend %flex-center-nowrap;
+
         gap: 1em;
         color: $c-font-dim;
       }
 
       &__play {
         @extend %flex-center-center, %box-radius-bottom;
+
         padding: 1.5em 0;
         color: $c-bot;
+
         &:hover {
           background: var(--c-bot);
           color: $c-over;
diff --git a/ui/user/css/_note-zone.scss b/ui/user/css/_note-zone.scss
index 24e1c6c6a32..434f7afbfd0 100644
--- a/ui/user/css/_note-zone.scss
+++ b/ui/user/css/_note-zone.scss
@@ -33,6 +33,7 @@
     button[value='dox'] {
       margin-left: 1.5em;
     }
+
     button[value='normal'] {
       margin-left: auto;
     }
diff --git a/ui/user/css/_number-menu.scss b/ui/user/css/_number-menu.scss
index 43ade3f845f..b8b9e9226a9 100644
--- a/ui/user/css/_number-menu.scss
+++ b/ui/user/css/_number-menu.scss
@@ -1,5 +1,6 @@
 .number-menu {
   @include prevent-select;
+
   display: flex;
 
   .nm-item {
diff --git a/ui/user/css/_perf-stat.scss b/ui/user/css/_perf-stat.scss
index 3fe7197da02..fe664029d9f 100644
--- a/ui/user/css/_perf-stat.scss
+++ b/ui/user/css/_perf-stat.scss
@@ -3,6 +3,7 @@
 
   .box__top__title {
     @extend %flex-center-nowrap;
+
     gap: 0.4em;
   }
 
@@ -22,6 +23,7 @@
     &.top50 img {
       transform: translateY(-12px);
     }
+
     &.top100 img {
       transform: translateY(-15px);
     }
diff --git a/ui/user/css/_profile.scss b/ui/user/css/_profile.scss
index 08cddf82ee6..8c9cc10583b 100644
--- a/ui/user/css/_profile.scss
+++ b/ui/user/css/_profile.scss
@@ -90,25 +90,31 @@
 
   .tutor-link {
     @extend %flex-center;
+
     padding: 0.3em 1em;
     border-top: $border;
     gap: 1em;
+
     img {
       height: 2.5em;
     }
+
     strong {
       font-weight: normal;
       font-size: 1.5em;
     }
+
     > span {
       @extend %flex-column;
     }
+
     background: $m-primary_bg--mix-10;
   }
 
   .col2 {
     display: flex;
     flex-flow: row wrap;
+
     + .col2 {
       margin-top: 0.5em;
     }
@@ -118,6 +124,7 @@
 
       flex: 0 0 50%;
     }
+
     > strong {
       flex: 0 0 100%;
       margin-bottom: 0.3em;
@@ -132,6 +139,7 @@
       max-height: 300px;
     }
   }
+
   .muted {
     color: $c-font-dimmer;
   }
diff --git a/ui/user/css/_rating.stats.scss b/ui/user/css/_rating.stats.scss
index 54368d6ae54..1c0c24a2aaa 100644
--- a/ui/user/css/_rating.stats.scss
+++ b/ui/user/css/_rating.stats.scss
@@ -29,6 +29,7 @@
 
     &__item {
       font-size: 1.3rem;
+
       @include padding-direction(0.3em, 1em, 0.3em, 0.7em);
     }
   }
diff --git a/ui/user/css/_search.scss b/ui/user/css/_search.scss
index 4c3d360d8d6..8e449625833 100644
--- a/ui/user/css/_search.scss
+++ b/ui/user/css/_search.scss
@@ -13,11 +13,13 @@
 
       .two-columns {
         @extend %flex-wrap;
+
         gap: 1em;
 
         > * {
-          flex: 1 150px;
           @extend %flex-between-nowrap;
+
+          flex: 1 150px;
           gap: 2ch;
         }
       }
diff --git a/ui/user/css/_show.scss b/ui/user/css/_show.scss
index b5833c225d5..3ed6cd51bb1 100644
--- a/ui/user/css/_show.scss
+++ b/ui/user/css/_show.scss
@@ -9,12 +9,15 @@
 
 @mixin hamburger-visible {
   @include box-radius-top;
+
   background: $c-bg-header-dropdown;
   color: $c-font-clear;
   box-shadow: -1px 5px 6px rgba(0, 0, 0, 0.3);
 }
+
 @mixin dropdown-action-highlight {
   background: $c-primary;
+
   &,
   &::after {
     color: $c-over;
@@ -37,8 +40,8 @@
 
   &__social {
     @extend %flex-between-nowrap;
-    gap: 1vw;
 
+    gap: 1vw;
     background: $c-bg-zebra;
 
     .number-menu {
@@ -48,6 +51,7 @@
 
     .user-actions {
       @extend %flex-center-nowrap;
+
       flex: 1 0 auto;
       justify-content: flex-end;
       margin: 0 1em 0 0.3em;
@@ -61,6 +65,7 @@
           button {
             padding: 0.2em 0.6em;
             color: $c-header-dropdown;
+
             &::before {
               margin-inline: 0 1rem;
               font-size: 1.4em;
@@ -76,6 +81,7 @@
         color: $c-font-dim;
         padding: 0 0.7em;
       }
+
       .dropdown:not(.btn-rack__btn) .dropdown-window {
         top: 3rem;
       }
@@ -85,60 +91,74 @@
 
         .dropdown-window {
           @extend %dropdown-shadow;
+
           z-index: $z-link-overlay-2;
           visibility: hidden;
           background: $c-bg-header-dropdown;
           border-radius: $box-radius-size 0 $box-radius-size $box-radius-size;
           position: absolute;
           top: 2.4rem;
+
           @include inline-end(0);
+
           body.blind-mode & {
             visibility: visible;
           }
+
           a,
           button {
             @extend %flex-center-nowrap, %break-word;
+
             width: 20em;
             padding: 0.6rem 1rem;
             line-height: normal;
             white-space: normal;
             text-align: start;
             color: $c-header-dropdown;
+
             &::before {
               margin-inline: 0 1rem;
               font-size: 1.4em;
             }
           }
+
           > a {
             &:first-child {
               border-top-left-radius: $box-radius-size;
             }
+
             &:last-child {
               @extend %box-radius-bottom;
             }
           }
         }
       }
+
       .dropdown.visible {
         .dropdown-window {
           visibility: visible;
         }
+
         > a {
           @include hamburger-visible;
         }
       }
+
       .dropdown .dropdown-window a:active,
       .dropdown .dropdown-window button:active {
         @include dropdown-action-highlight;
       }
+
       @media (hover: hover) and (pointer: fine) {
         .dropdown:not(.btn-rack__btn):hover > a {
           @include hamburger-visible;
         }
+
         .dropdown .dropdown-window a:hover,
         .dropdown .dropdown-window button:hover {
           @include dropdown-action-highlight;
         }
+
         .dropdown:hover .dropdown-window,
         .dropdown:focus-within .dropdown-window {
           visibility: visible;
diff --git a/ui/user/css/_sub-rating.scss b/ui/user/css/_sub-rating.scss
index 14c1616465e..6de2f8df635 100644
--- a/ui/user/css/_sub-rating.scss
+++ b/ui/user/css/_sub-rating.scss
@@ -1,13 +1,11 @@
 .sub-ratings {
   a {
     @extend %box-radius-left, %flex-center-nowrap, %page-text;
-
     @include padding-direction(0.7em, $block-gap, 0.7em, 0.4em);
+    @include transition(background);
 
     white-space: nowrap;
 
-    @include transition(background);
-
     &.empty {
       opacity: 0.5;
     }
@@ -16,6 +14,7 @@
       font-size: 3em;
       opacity: 0.5;
       margin-inline-end: 0.2em;
+
       @include transition(opacity color);
     }
 
diff --git a/ui/user/css/_trophy.scss b/ui/user/css/_trophy.scss
index e24d02d352d..5f0a0066ffe 100644
--- a/ui/user/css/_trophy.scss
+++ b/ui/user/css/_trophy.scss
@@ -1,7 +1,8 @@
 .trophies {
+  @include inline-end(1.5em);
+
   position: absolute;
   top: 35px;
-  @include inline-end(1.5em);
   height: 40px;
   display: flex;
   flex-flow: row wrap;
@@ -143,9 +144,11 @@
   font-size: 60px;
   margin: 0 -10px 0 30px;
   transform: scaleX(-1);
+
   @include if-rtl {
     transform: none;
   }
+
   color: $c-brag;
   transition: margin-top 0.5s;
 
diff --git a/ui/voice/css/_voice.scss b/ui/voice/css/_voice.scss
index b174a8ab83e..1257a9884a2 100644
--- a/ui/voice/css/_voice.scss
+++ b/ui/voice/css/_voice.scss
@@ -1,5 +1,6 @@
 #voice-bar {
   @include prevent-select;
+
   position: relative;
   flex: 1 1 auto;
   grid-area: voice;
@@ -7,6 +8,7 @@
 
 #voice-status-row {
   @extend %box-neat, %flex-center-nowrap;
+
   font-size: 1rem;
   align-items: stretch;
   background: $c-bg-box;
@@ -43,9 +45,11 @@
     0% {
       background-color: $c-bg-zebra2;
     }
+
     50% {
       background-color: #c338;
     }
+
     100% {
       background-color: $c-bg-zebra2;
     }
@@ -54,6 +58,7 @@
 
 #voice-status {
   @extend %flex-center-nowrap;
+
   flex: 1 1 auto;
 }
 
@@ -65,6 +70,7 @@ button#microphone-button {
   border: 1px solid transparent;
   border-radius: 4px;
   background-color: transparent;
+
   @include if-light {
     &:hover {
       background-color: $c-font-dimmer;
@@ -93,9 +99,11 @@ button#microphone-button {
     0% {
       border-color: transparent;
     }
+
     50% {
       border-color: $c-primary;
     }
+
     100% {
       border-color: transparent;
     }
@@ -111,6 +119,7 @@ button#microphone-button {
 
 #voice-settings {
   @extend %flex-column, %dropdown-shadow, %box-radius-bottom;
+
   position: absolute;
   border-top: 2px solid $c-primary;
   z-index: $z-mz-menu-4;
@@ -118,6 +127,7 @@ button#microphone-button {
   background: $c-bg-high;
   gap: 1.5em;
   padding: 1.5em;
+
   > hr {
     margin: 5px;
   }
@@ -125,6 +135,7 @@ button#microphone-button {
 
 .voice-setting {
   @extend %flex-center-nowrap;
+
   white-space: nowrap;
 
   input[type='range'] {
@@ -138,6 +149,7 @@ button#microphone-button {
 
   select {
     @extend %ellipsis;
+
     flex: 1 4 auto;
     min-width: 0;
     margin-inline-start: 1ch;
@@ -153,6 +165,7 @@ button#microphone-button {
 
 .voice-choices {
   @extend %flex-between;
+
   gap: 1em;
 
   .active {
diff --git a/ui/voice/css/_voiceMove.help.scss b/ui/voice/css/_voiceMove.help.scss
index 65613b0cead..77a6a14dbdc 100644
--- a/ui/voice/css/_voiceMove.help.scss
+++ b/ui/voice/css/_voiceMove.help.scss
@@ -1,5 +1,6 @@
 .voice-move-help {
   max-width: 800px;
+
   td.tips li {
     list-style: disc;
     font-size: 1.1em;
@@ -21,11 +22,13 @@
   }
 
   .commands {
+    display: flex;
+    flex-direction: row;
+
     td:first-child {
       padding-inline-start: 2em;
     }
-    display: flex;
-    flex-direction: row;
+
     @media (width <= 600px) {
       flex-direction: column;
     }
@@ -39,12 +42,15 @@
   .big-table {
     td {
       @extend %nowrap-ellipsis;
+
       padding: 0 1em;
     }
+
     tr {
       td:nth-child(even) {
         border-right: 1px solid $c-brag;
       }
+
       td:last-child {
         border-right: none;
       }