diff --git a/.github/workflows/assets.yml b/.github/workflows/assets.yml
index 21fb93273222d..5ff190698c5d9 100644
--- a/.github/workflows/assets.yml
+++ b/.github/workflows/assets.yml
@@ -39,7 +39,7 @@ jobs:
         id: ab
       - run: pnpm link "$GITHUB_WORKSPACE/ab"
         if: steps.ab.outcome == 'success'
-      - run: ./ui/build --no-install -ps
+      - run: ./ui/build --no-install -p
       - run: cd ui && pnpm run test && cd -
       - run: mkdir assets && mv public assets/ && cp bin/download-lifat LICENSE COPYING.md README.md assets/ && git log -n 1 --pretty=oneline > assets/commit.txt
       - run: cd assets && tar --zstd -cvpf ../assets.tar.zst . && cd -
diff --git a/.gitignore b/.gitignore
index 1a4e89cd05992..d69e05f00f0ee 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,7 @@
 project/.bloop/
 conf/application.conf
 conf/version.conf
+conf/manifest.*
 
 logs
 project/metals.sbt
@@ -21,6 +22,7 @@ data/
 dist/
 node_modules/
 local/
+gen/
 ui/common/**/*.js
 ui/common/**/*.d.ts
 ui/chess/**/*.js
diff --git a/.ignore b/.ignore
index e445169f606cc..9f530961c0b71 100644
--- a/.ignore
+++ b/.ignore
@@ -1,7 +1,6 @@
 # search ignores
 vendor
 translation/dest
-ui/*/css/build
 public/font
 public/sound
 public/piece
diff --git a/app/Env.scala b/app/Env.scala
index efcfdc4d82683..c653f8fd8b1ec 100644
--- a/app/Env.scala
+++ b/app/Env.scala
@@ -23,6 +23,7 @@ final class Env(
     SessionCookieBaker
 ):
   val net: NetConfig = config.get[NetConfig]("net")
+
   export net.{ domain, baseUrl, assetBaseUrlInternal }
 
   given Mode                   = environment.mode
@@ -138,6 +139,7 @@ given ConfigLoader[NetConfig] = ConfigLoader(config =>
       assetBaseUrl = get[AssetBaseUrl]("asset.base_url"),
       assetBaseUrlInternal = get[AssetBaseUrlInternal]("asset.base_url_internal"),
       minifiedAssets = get[Boolean]("asset.minified"),
+      externalManifest = get[Boolean]("asset.external_manifest"),
       stageBanner = get[Boolean]("stage.banner"),
       siteName = get[String]("site.name"),
       socketDomains = get[List[String]]("socket.domains"),
diff --git a/app/controllers/Plan.scala b/app/controllers/Plan.scala
index 9b3b28753ab4c..a30e997eddba1 100644
--- a/app/controllers/Plan.scala
+++ b/app/controllers/Plan.scala
@@ -84,6 +84,7 @@ final class Plan(env: Env) extends LilaController(env):
     res <- info match
       case Some(info: CustomerInfo.Monthly) =>
         Ok.page(html.plan.indexStripe(me, patron, info, env.plan.stripePublicKey, pricing, gifts))
+
       case Some(CustomerInfo.OneTime(cus)) =>
         renderIndex(cus.email.map { EmailAddress(_) }, patron.some)
       case None =>
diff --git a/app/controllers/RelayRound.scala b/app/controllers/RelayRound.scala
index 26c9cf99863b4..9b57a6f6fe2f1 100644
--- a/app/controllers/RelayRound.scala
+++ b/app/controllers/RelayRound.scala
@@ -220,7 +220,9 @@ final class RelayRound(
         page <- renderPage:
           html.relay.show(rt.withStudy(sc.study), data, chat, sVersion, crossSiteIsolation)
         _ = if HTTPRequest.isHuman(req) then lila.mon.http.path(rt.tour.path).increment()
-      yield if crossSiteIsolation then Ok(page).enforceCrossSiteIsolation else Ok(page)
+      yield
+        if crossSiteIsolation then Ok(page).enforceCrossSiteIsolation
+        else Ok(page).withHeaders(crossOriginPolicy.unsafe*)
     )(
       studyC.privateUnauthorizedFu(oldSc.study),
       studyC.privateForbiddenFu(oldSc.study)
diff --git a/app/templating/AssetHelper.scala b/app/templating/AssetHelper.scala
index c98e56b69d4eb..05d004985f9e2 100644
--- a/app/templating/AssetHelper.scala
+++ b/app/templating/AssetHelper.scala
@@ -7,6 +7,7 @@ import lila.core.net.AssetVersion
 import lila.core.data.SafeJsonStr
 import lila.common.String.html.safeJsonValue
 import lila.web.ui.*
+import lila.web.Nonce
 import lila.web.ContentSecurityPolicy
 
 trait AssetHelper:
@@ -16,6 +17,12 @@ trait AssetHelper:
   def env: Env
 
   case class PageModule(name: String, data: JsValue | SafeJsonStr)
+  case class EsmInit(key: String, init: Frag)
+  type EsmList = List[Option[EsmInit]]
+  given Conversion[EsmInit, EsmList] with
+    def apply(esmInit: EsmInit): EsmList = List(Some(esmInit))
+  given Conversion[Option[EsmInit], EsmList] with
+    def apply(esmOption: Option[EsmInit]): EsmList = List(esmOption)
 
   private lazy val netDomain      = env.net.domain
   private lazy val assetDomain    = env.net.assetDomain
@@ -30,6 +37,8 @@ trait AssetHelper:
 
   def assetVersion = AssetVersion.current
 
+  def updateManifest() = if !env.net.isProd then env.web.manifest.update()
+
   // bump flairs version if a flair is changed only (not added or removed)
   val flairVersion = "______2"
 
@@ -40,26 +49,8 @@ trait AssetHelper:
 
   def flairSrc(flair: Flair): String = staticAssetUrl(s"$flairVersion/flair/img/$flair.webp")
 
-  def cssTag(name: String)(using ctx: Context): Frag =
-    cssTagWithTheme(name, ctx.pref.currentBg)
-
-  def cssTagWithTheme(name: String, theme: String): Frag =
-    if theme == "system" then
-      frag(
-        cssTagWithSimpleTheme(name, "light")(media := "(prefers-color-scheme: light)"),
-        cssTagWithSimpleTheme(name, "dark")(media  := "(prefers-color-scheme: dark)")
-      )
-    else cssTagWithSimpleTheme(name, theme)
-
-  private def cssTagWithSimpleTheme(name: String, theme: String): Tag =
-    cssAt:
-      s"css/$name.$theme.${if minifiedAssets then "min" else "dev"}.css"
-
-  def cssTagNoTheme(name: String): Frag =
-    cssAt(s"css/$name.${if minifiedAssets then "min" else "dev"}.css")
-
-  private def cssAt(path: String): Tag =
-    link(href := assetUrl(path), rel := "stylesheet")
+  def cssTag(key: String)(using ctx: Context): Frag =
+    link(href := staticAssetUrl(s"css/${env.web.manifest.css(key).getOrElse(key)}"), rel := "stylesheet")
 
   def jsonScript(json: JsValue | SafeJsonStr, id: String = "page-init-data") =
     script(tpe := "application/json", st.id := id):
@@ -68,40 +59,39 @@ trait AssetHelper:
           case json: JsValue => safeJsonValue(json).value
           case json          => json.toString
 
-  val systemThemePolyfillJs = """
-if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all')
-    document.querySelectorAll('[media="(prefers-color-scheme: dark)"]').forEach(e=>e.media='')
-"""
-
   // load iife scripts in <head> and defer
   def iifeModule(path: String): Frag = script(deferAttr, src := assetUrl(path))
 
-  private val loadEsmFunction = "site.asset.loadEsm"
-
-  // jsModule is esm, no defer needed
-  def jsModule(name: String): Frag =
-    script(tpe := "module", src := assetUrl(s"compiled/$name${minifiedAssets.so(".min")}.js"))
-
-  def jsModuleInit(name: String)(using PageContext): Frag =
-    frag(jsModule(name), embedJsUnsafeLoadThen(s"$loadEsmFunction('$name')"))
-  def jsModuleInit(name: String, json: SafeJsonStr)(using PageContext): Frag =
-    frag(jsModule(name), embedJsUnsafeLoadThen(s"$loadEsmFunction('$name',{init:$json})"))
-  def jsModuleInit[A: Writes](name: String, value: A)(using PageContext): Frag =
-    jsModuleInit(name, safeJsonValue(Json.toJson(value)))
-
-  def jsModuleInit(name: String, text: SafeJsonStr, nonce: lila.web.Nonce): Frag =
-    frag(jsModule(name), embedJsUnsafeLoadThen(s"$loadEsmFunction('$name',{init:$text})", nonce))
-  def jsModuleInit(name: String, json: JsValue, nonce: lila.web.Nonce): Frag =
-    jsModuleInit(name, safeJsonValue(json), nonce)
-
-  def jsPageModule(name: String)(using PageContext) =
-    frag(jsModule(name), embedJsUnsafeLoadThen(s"site.asset.loadPageEsm('$name')"))
-
-  def analyseNvuiTag(using ctx: PageContext) = ctx.blind.option(jsModule("analysisBoard.nvui"))
+  private val load = "site.asset.loadEsm"
+
+  def jsName(key: String): String =
+    env.web.manifest.js(key).fold(key)(_.name)
+  def jsTag(key: String): Frag =
+    script(tpe := "module", src := staticAssetUrl(s"compiled/${jsName(key)}"))
+  def jsDeps(keys: List[String]): Frag = frag:
+    env.web.manifest.deps(keys).map { dep =>
+      script(tpe := "module", src := staticAssetUrl(s"compiled/$dep"))
+    }
+  def jsModule(key: String): EsmInit =
+    EsmInit(key, emptyFrag)
+  def jsModuleInit(key: String)(using PageContext): EsmInit =
+    EsmInit(key, embedJsUnsafeLoadThen(s"$load('${jsName(key)}')"))
+  def jsModuleInit(key: String, json: SafeJsonStr)(using PageContext): EsmInit =
+    EsmInit(key, embedJsUnsafeLoadThen(s"$load('${jsName(key)}',{init:$json})"))
+  def jsModuleInit[A: Writes](key: String, value: A)(using PageContext): EsmInit =
+    jsModuleInit(key, safeJsonValue(Json.toJson(value)))
+  def jsModuleInit(key: String, text: SafeJsonStr, nonce: Nonce): EsmInit =
+    EsmInit(key, embedJsUnsafeLoadThen(s"$load('${jsName(key)}',{init:$text})", nonce))
+  def jsModuleInit(key: String, json: JsValue, nonce: Nonce): EsmInit =
+    jsModuleInit(key, safeJsonValue(json), nonce)
+  def jsPageModule(key: String)(using PageContext): EsmInit =
+    EsmInit(key, embedJsUnsafeLoadThen(s"site.asset.loadPageEsm('${jsName(key)}')"))
+
+  def analyseNvuiTag(using ctx: PageContext) = ctx.blind.option(jsModule("analyse.nvui"))
   def puzzleNvuiTag(using ctx: PageContext)  = ctx.blind.option(jsModule("puzzle.nvui"))
   def roundNvuiTag(using ctx: PageContext)   = ctx.blind.option(jsModule("round.nvui"))
-  def infiniteScrollTag(using PageContext)   = jsModuleInit("infiniteScroll")
-  def captchaTag                             = jsModule("captcha")
+  def infiniteScrollTag(using PageContext)   = jsModuleInit("bits.infiniteScroll")
+  def captchaTag                             = jsModule("bits.captcha")
   def cashTag                                = iifeModule("javascripts/vendor/cash.min.js")
   def fingerprintTag                         = iifeModule("javascripts/fipr.js")
   def chessgroundTag = script(tpe := "module", src := assetUrl("npm/chessground.min.js"))
@@ -126,7 +116,7 @@ if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all')
       s""" nonce="$nonce""""
     s"""<script$nonce>$js</script>"""
 
-  def embedJsUnsafe(js: String, nonce: lila.web.Nonce): Frag = raw:
+  def embedJsUnsafe(js: String, nonce: Nonce): Frag = raw:
     s"""<script nonce="$nonce">$js</script>"""
 
   private val onLoadFunction = "site.load.then"
@@ -134,5 +124,5 @@ if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all')
   def embedJsUnsafeLoadThen(js: String)(using PageContext): Frag =
     embedJsUnsafe(s"""$onLoadFunction(()=>{$js})""")
 
-  def embedJsUnsafeLoadThen(js: String, nonce: lila.web.Nonce): Frag =
+  def embedJsUnsafeLoadThen(js: String, nonce: Nonce): Frag =
     embedJsUnsafe(s"""$onLoadFunction(()=>{$js})""", nonce)
diff --git a/app/views/account/layout.scala b/app/views/account/layout.scala
index fa27ea43198bd..d9680ad3edc69 100644
--- a/app/views/account/layout.scala
+++ b/app/views/account/layout.scala
@@ -11,12 +11,14 @@ object layout:
       title: String,
       active: String,
       evenMoreCss: Frag = emptyFrag,
-      evenMoreJs: Frag = emptyFrag
+      evenMoreJs: Frag = emptyFrag,
+      modules: EsmList = Nil
   )(body: Frag)(using ctx: PageContext): Frag =
     views.html.base.layout(
       title = title,
       moreCss = frag(cssTag("account"), evenMoreCss),
-      moreJs = frag(jsModule("account"), evenMoreJs)
+      moreJs = evenMoreJs,
+      modules = jsModule("bits.account") ++ modules
     ):
       def activeCls(c: String) = cls := active.activeO(c)
       main(cls := "account page-menu")(
diff --git a/app/views/account/passwd.scala b/app/views/account/passwd.scala
index 8d9aa8d5f0fac..ba4943bb36d93 100644
--- a/app/views/account/passwd.scala
+++ b/app/views/account/passwd.scala
@@ -12,7 +12,7 @@ object passwd:
     account.layout(
       title = trans.site.changePassword.txt(),
       active = "password",
-      evenMoreJs = jsModuleInit("passwordComplexity")
+      modules = jsModuleInit("bits.passwordComplexity")
     ):
       div(cls := "box box-pad")(
         h1(cls := "box__top")(trans.site.changePassword()),
diff --git a/app/views/analyse/bits.scala b/app/views/analyse/bits.scala
index 4546ebc6e6974..b9fa586448dc8 100644
--- a/app/views/analyse/bits.scala
+++ b/app/views/analyse/bits.scala
@@ -13,12 +13,14 @@ object bits:
       pageModule: PageModule,
       moreCss: Frag = emptyFrag,
       moreJs: Frag = emptyFrag,
+      modules: EsmList = Nil,
       openGraph: Option[lila.web.OpenGraph] = None
   )(body: Frag)(using PageContext): Frag =
     views.html.base.layout(
       title = title,
       moreCss = moreCss,
       moreJs = moreJs,
+      modules = modules,
       pageModule = pageModule.some,
       openGraph = openGraph,
       robots = false,
@@ -29,4 +31,4 @@ object bits:
   def csp(using PageContext) = analysisCsp.withPeer.withInlineIconFont.withChessDbCn.some
 
   def analyseModule(mode: String, json: JsObject)(using ctx: PageContext) =
-    PageModule("analysisBoard", Json.obj("mode" -> mode, "cfg" -> json))
+    PageModule("analyse", Json.obj("mode" -> mode, "cfg" -> json))
diff --git a/app/views/analyse/embed.scala b/app/views/analyse/embed.scala
index b5df43d5464b6..c8214a23ddfb4 100644
--- a/app/views/analyse/embed.scala
+++ b/app/views/analyse/embed.scala
@@ -16,7 +16,7 @@ object embed:
       cssModule = "lpv.embed"
     )(
       div(cls := "is2d")(div(pgn)),
-      jsModule("lpv.embed"),
+      jsTag("site.lpv.embed"),
       lpvJs(orientation, getPgn)
     )
 
diff --git a/app/views/analyse/replay.scala b/app/views/analyse/replay.scala
index 5bccc19eb128e..7f6699b5d00e1 100644
--- a/app/views/analyse/replay.scala
+++ b/app/views/analyse/replay.scala
@@ -122,7 +122,7 @@ object replay:
         (pov.game.variant == Crazyhouse).option(cssTag("analyse.zh")),
         ctx.blind.option(cssTag("round.nvui"))
       ),
-      moreJs = analyseNvuiTag,
+      modules = analyseNvuiTag,
       pageModule = bits.analyseModule(
         "replay",
         Json
diff --git a/app/views/appeal/bits.scala b/app/views/appeal/bits.scala
index 8cb8cc927d3de..d1b40e6f8c2b1 100644
--- a/app/views/appeal/bits.scala
+++ b/app/views/appeal/bits.scala
@@ -14,8 +14,5 @@ object bits:
         cssTag("appeal"),
         isGranted(_.UserModView).option(cssTag("mod.user"))
       ),
-      moreJs = frag(
-        jsModule("appeal"),
-        isGranted(_.UserModView).option(jsModule("mod.user"))
-      )
+      modules = jsModule("mod.appeal") ++ isGranted(_.UserModView).so(jsModule("mod.user"))
     )(body)
diff --git a/app/views/auth/bits.scala b/app/views/auth/bits.scala
index dc7f343674c3c..27b3429ac7a67 100644
--- a/app/views/auth/bits.scala
+++ b/app/views/auth/bits.scala
@@ -73,7 +73,7 @@ object bits:
     views.html.base.layout(
       title = s"${me.username} - ${trans.site.changePassword.txt()}",
       moreCss = cssTag("form3"),
-      moreJs = jsModuleInit("passwordComplexity")
+      modules = jsModuleInit("bits.passwordComplexity")
     ):
       main(cls := "page-small box box-pad")(
         boxTop(
diff --git a/app/views/auth/login.scala b/app/views/auth/login.scala
index c244ab91cd65d..79aa874ed4658 100644
--- a/app/views/auth/login.scala
+++ b/app/views/auth/login.scala
@@ -14,7 +14,7 @@ object login:
   def apply(form: Form[?], referrer: Option[String])(using PageContext) =
     views.html.base.layout(
       title = trans.site.signIn.txt(),
-      moreJs = jsModuleInit("login", "login"),
+      modules = jsModuleInit("bits.login", "login"),
       moreCss = cssTag("auth"),
       withHrefLangs = lila.core.app.LangPath(routes.Auth.login).some
     ) {
diff --git a/app/views/auth/signup.scala b/app/views/auth/signup.scala
index c6da53ca13147..c1e62c481d0ea 100644
--- a/app/views/auth/signup.scala
+++ b/app/views/auth/signup.scala
@@ -14,11 +14,8 @@ object signup:
   def apply(form: lila.core.security.HcaptchaForm[?])(using ctx: PageContext) =
     views.html.base.layout(
       title = trans.site.signUp.txt(),
-      moreJs = frag(
-        jsModuleInit("login", "signup"),
-        lila.web.views.hcaptcha.script(form),
-        fingerprintTag
-      ),
+      modules = jsModuleInit("bits.login", "signup"),
+      moreJs = frag(lila.web.views.hcaptcha.script(form), fingerprintTag),
       moreCss = cssTag("auth"),
       csp = defaultCsp.withHcaptcha.some,
       withHrefLangs = LangPath(routes.Auth.signup).some
diff --git a/app/views/base/embed.scala b/app/views/base/embed.scala
index 6c5b76be5c911..e883874fa2a93 100644
--- a/app/views/base/embed.scala
+++ b/app/views/base/embed.scala
@@ -15,9 +15,10 @@ object embed:
           layout.bits.viewport,
           layout.bits.metaCsp(basicCsp.withNonce(ctx.nonce).withInlineIconFont),
           st.headTitle(title),
+          layout.bits.systemThemeEmbedScript,
           layout.bits.pieceSprite(ctx.pieceSet),
-          cssTagWithTheme(cssModule, ctx.bg),
-          (ctx.bg == "system").option(embedJsUnsafe(systemThemePolyfillJs, ctx.nonce))
+          cssTag("theme-light"), // includes both light & dark colors
+          cssTag(cssModule)
         ),
         st.body(cls := s"${ctx.bg} highlight ${ctx.boardClass}")(
           layout.dataSoundSet := SoundSet.silent.key,
diff --git a/app/views/base/layout.scala b/app/views/base/layout.scala
index d0bf0fdbc654d..c13f69d877224 100644
--- a/app/views/base/layout.scala
+++ b/app/views/base/layout.scala
@@ -16,9 +16,9 @@ object layout:
 
   object bits:
     val doctype = raw("<!DOCTYPE html>")
-    def htmlTag(using lang: Lang) =
+    def htmlTag(using lang: Lang, ctx: Context) =
       val isRTL = lila.i18n.LangList.isRTL(lang)
-      html(st.lang := lang.code, dir := isRTL.option("rtl"), cls := (if isRTL then "dir-rtl" else "dir-ltr"))
+      html(st.lang := lang.code, dir := isRTL.option("rtl"))
     val topComment = raw("""<!-- Lichess is open source! See https://lichess.org/source -->""")
     val charset    = raw("""<meta charset="utf-8">""")
     val viewport = raw:
@@ -28,13 +28,20 @@ object layout:
     def metaCsp(csp: Option[ContentSecurityPolicy])(using ctx: PageContext): Frag =
       metaCsp(csp.getOrElse(defaultCsp))
     def metaThemeColor(using ctx: PageContext): Frag =
-      if ctx.pref.bg == lila.pref.Pref.Bg.SYSTEM then
-        raw:
-          s"""<meta name="theme-color" media="(prefers-color-scheme: light)" content="${ctx.pref.themeColorLight}">""" +
-            s"""<meta name="theme-color" media="(prefers-color-scheme: dark)" content="${ctx.pref.themeColorDark}">"""
-      else
-        raw:
+      raw:
+        s"""<meta name="theme-color" media="(prefers-color-scheme: light)" content="${ctx.pref.themeColorLight}">""" +
+          s"""<meta name="theme-color" media="(prefers-color-scheme: dark)" content="${ctx.pref.themeColorDark}">""" +
           s"""<meta name="theme-color" content="${ctx.pref.themeColor}">"""
+    def systemThemeScript(using ctx: PageContext) =
+      (ctx.pref.bg === lila.pref.Pref.Bg.SYSTEM).option(
+        embedJsUnsafe(
+          "if (window.matchMedia('(prefers-color-scheme: light)')?.matches) " +
+            "document.documentElement.classList.add('light');"
+        )
+      )
+    def systemThemeEmbedScript(using ctx: EmbedContext) =
+      "<script>if (window.matchMedia('(prefers-color-scheme: light)')?.matches) " +
+        "document.documentElement.classList.add('light');</script>"
     def pieceSprite(using ctx: PageContext): Frag = pieceSprite(ctx.pref.currentPieceSet)
     def pieceSprite(ps: lila.pref.PieceSet): Frag =
       link(
@@ -180,17 +187,23 @@ object layout:
       style := "display:inline;width:34px;height:34px;vertical-align:top;margin-right:5px;vertical-align:text-top"
     )
 
-  private def loadScripts(moreJs: Frag)(using ctx: PageContext) =
+  // consolidate script packaging here to dedup chunk dependencies
+  private def modulesPreload(modules: EsmList)(using ctx: PageContext) =
+    val keys: List[String] = "site" :: {
+      ctx.data.inquiry.isDefined.option("mod.inquiry")
+        :: (!netConfig.isProd).option("site.devMode")
+        :: modules.map(_.map(_.key))
+    }.flatten // in head
     frag(
-      ctx.needsFp.option(fingerprintTag),
-      ctx.nonce.map(inlineJs.apply),
-      frag(cashTag, jsModule("site")),
-      moreJs,
-      ctx.data.inquiry.isDefined.option(jsModule("mod.inquiry")),
-      (ctx.pref.bg == lila.pref.Pref.Bg.SYSTEM).option(embedJsUnsafe(systemThemePolyfillJs)),
-      (!netConfig.isProd).option(jsModule("devMode"))
+      jsTag("manifest"),
+      cashTag,
+      keys.map(jsTag),
+      env.web.manifest.deps(keys).map(jsTag)
     )
 
+  private def modulesInit(modules: EsmList)(using ctx: PageContext) =
+    modules.flatMap(_.map(_.init)) // in body
+
   private def hrefLang(langStr: String, path: String) =
     s"""<link rel="alternate" hreflang="$langStr" href="$netBaseUrl$path"/>"""
 
@@ -245,6 +258,7 @@ object layout:
       fullTitle: Option[String] = None,
       robots: Boolean = netConfig.crawlable,
       moreCss: Frag = emptyFrag,
+      modules: EsmList = Nil,
       moreJs: Frag = emptyFrag,
       pageModule: Option[PageModule] = None,
       playing: Boolean = false,
@@ -257,9 +271,12 @@ object layout:
       withHrefLangs: Option[LangPath] = None
   )(body: Frag)(using ctx: PageContext): Frag =
     import ctx.pref
+    updateManifest()
     frag(
       doctype,
       htmlTag(
+        (ctx.data.inquiry.isEmpty && ctx.impersonatedBy.isEmpty && !ctx.blind)
+          .option(cls := ctx.pref.themeColorClass),
         topComment,
         head(
           charset,
@@ -271,11 +288,12 @@ object layout:
             if netConfig.isProd then prodTitle
             else s"${ctx.me.so(_.username + " ")} $prodTitle"
           ,
+          cssTag("theme-all"),
           cssTag("site"),
           pref.is3d.option(cssTag("board-3d")),
-          ctx.data.inquiry.isDefined.option(cssTagNoTheme("mod.inquiry")),
-          ctx.impersonatedBy.isDefined.option(cssTagNoTheme("mod.impersonate")),
-          ctx.blind.option(cssTagNoTheme("blind")),
+          ctx.data.inquiry.isDefined.option(cssTag("mod.inquiry")),
+          ctx.impersonatedBy.isDefined.option(cssTag("mod.impersonate")),
+          ctx.blind.option(cssTag("blind")),
           moreCss,
           pieceSprite,
           meta(
@@ -290,7 +308,7 @@ object layout:
           atomLinkTag | dailyNewsAtom,
           (pref.bg == lila.pref.Pref.Bg.TRANSPARENT).option(pref.bgImgOrDefault).map { img =>
             raw:
-              s"""<style id="bg-data">body.transp::before{background-image:url("${escapeHtmlRaw(img)
+              s"""<style id="bg-data">html.transp::before{background-image:url("${escapeHtmlRaw(img)
                   .replace("&amp;", "&")}");}</style>"""
           },
           fontPreload,
@@ -298,7 +316,9 @@ object layout:
           piecesPreload,
           manifests,
           jsLicense,
-          withHrefLangs.map(hrefLangs)
+          withHrefLangs.map(hrefLangs),
+          modulesPreload(modules ++ pageModule.so(module => jsPageModule(module.name))),
+          systemThemeScript
         ),
         st.body(
           cls := {
@@ -332,7 +352,7 @@ object layout:
           dataBoardTheme   := pref.currentTheme.name,
           dataPieceSet     := pref.currentPieceSet.name,
           dataAnnounce     := lila.web.AnnounceApi.get.map(a => safeJsonValue(a.json)),
-          style            := zoomable.option(s"--zoom:$pageZoom")
+          style            := zoomable.option(s"---zoom:$pageZoom")
         )(
           blindModeForm,
           ctx.data.inquiry.map { views.html.mod.inquiry(_) },
@@ -372,9 +392,12 @@ object layout:
             )
           ),
           spinnerMask,
-          loadScripts(moreJs),
-          pageModule.map: mod =>
-            frag(jsonScript(mod.data), jsPageModule(mod.name))
+          div(id := "inline-scripts")(
+            frag(ctx.needsFp.option(fingerprintTag), ctx.nonce.map(inlineJs.apply)),
+            modulesInit(modules ++ pageModule.so(module => jsPageModule(module.name))),
+            moreJs,
+            pageModule.map { mod => frag(jsonScript(mod.data)) }
+          )
         )
       )
     )
@@ -500,6 +523,9 @@ object layout:
         _ =>
           val qty  = lila.i18n.JsQuantity(t.lang)
           val i18n = safeJsonValue(i18nJsObject(i18nKeys))
-          s"""site={load:new Promise(r=>document.addEventListener("DOMContentLoaded",r)),quantity:$qty,siteI18n:$i18n}"""
+          "if (!window.site) window.site={};" +
+            """window.site.load=new Promise(r=>document.addEventListener("DOMContentLoaded",r));""" +
+            s"window.site.quantity=$qty;" +
+            s"window.site.siteI18n=$i18n;"
       )
   end inlineJs
diff --git a/app/views/board/userAnalysis.scala b/app/views/board/userAnalysis.scala
index 14d39f5531e56..8d89260ed93ac 100644
--- a/app/views/board/userAnalysis.scala
+++ b/app/views/board/userAnalysis.scala
@@ -24,7 +24,7 @@ object userAnalysis:
         withForecast.option(cssTag("analyse.forecast")),
         ctx.blind.option(cssTag("round.nvui"))
       ),
-      moreJs = analyseNvuiTag,
+      modules = analyseNvuiTag,
       pageModule = views.html.analyse.bits
         .analyseModule(
           "userAnalysis",
diff --git a/app/views/clas/bits.scala b/app/views/clas/bits.scala
index 467837b2c94e7..776c1a4902592 100644
--- a/app/views/clas/bits.scala
+++ b/app/views/clas/bits.scala
@@ -19,7 +19,8 @@ object bits:
     views.html.base.layout(
       title = title,
       moreCss = cssTag("clas"),
-      moreJs = frag(jsModule("clas"), moreJs),
+      modules = jsModule("bits.clas"),
+      moreJs = moreJs,
       csp = csp
     )(
       if isGranted(_.Teacher) then
diff --git a/app/views/cms.scala b/app/views/cms.scala
index 5b0af8b61bee0..6c06b14703ec4 100644
--- a/app/views/cms.scala
+++ b/app/views/cms.scala
@@ -37,7 +37,7 @@ object cms:
     views.html.base.layout(
       title = title,
       moreCss = cssTag("cms"),
-      moreJs = jsModule("cms")
+      modules = jsModule("cms")
     ):
       main(cls := "page-menu")(mod.menu("cms"), div(cls := "page-menu__content cms box")(body))
 
diff --git a/app/views/coach/edit.scala b/app/views/coach/edit.scala
index 7f625de53802e..8b5d36b6d4c4b 100644
--- a/app/views/coach/edit.scala
+++ b/app/views/coach/edit.scala
@@ -32,7 +32,7 @@ object edit:
     views.html.account.layout(
       title = s"${c.user.titleUsername} coach page",
       evenMoreCss = frag(cssTag("coach.editor"), cssTag("tagify")),
-      evenMoreJs = jsModule("coach.form"),
+      modules = jsModule("bits.coach.form"),
       active = "coach"
     ):
       div(cls := "coach-edit box")(
diff --git a/app/views/coach/index.scala b/app/views/coach/index.scala
index bbaba09953493..c1ea9398fe482 100644
--- a/app/views/coach/index.scala
+++ b/app/views/coach/index.scala
@@ -27,7 +27,7 @@ object index:
     views.html.base.layout(
       title = lichessCoaches.txt(),
       moreCss = cssTag("coach"),
-      moreJs = infiniteScrollTag,
+      modules = infiniteScrollTag,
       withHrefLangs = LangPath(routes.Coach.all(1)).some
     ):
       val langSelections = ("all", "All languages") :: lila.i18n.LangPicker
diff --git a/app/views/dgt.scala b/app/views/dgt.scala
index dfa0933d53ea5..1c77c6bed616b 100644
--- a/app/views/dgt.scala
+++ b/app/views/dgt.scala
@@ -206,7 +206,7 @@ object dgt:
   private def layout(path: String, token: Option[String] = None)(body: Modifier*)(using PageContext) =
     views.html.base.layout(
       moreCss = cssTag("dgt"),
-      moreJs = token.fold(jsModuleInit("dgt"))(jsModuleInit("dgt", _)),
+      modules = token.fold(jsModuleInit("dgt"))(jsModuleInit("dgt", _)),
       title = playWithDgtBoard.txt(),
       csp = defaultCsp.withAnyWs.some
     ):
diff --git a/app/views/event.scala b/app/views/event.scala
index 1079d18aca8ba..88fe81830ec4d 100644
--- a/app/views/event.scala
+++ b/app/views/event.scala
@@ -48,7 +48,7 @@ object event:
     views.html.base.layout(
       title = e.title,
       moreCss = cssTag("event"),
-      moreJs = jsModule("eventCountdown")
+      modules = jsModule("bits.eventCountdown")
     ):
       main(cls := "page-small event box box-pad")(
         boxTop(
@@ -205,7 +205,7 @@ object event:
     views.html.base.layout(
       title = title,
       moreCss = cssTag(css),
-      moreJs = jsModule("flatpickr")
+      modules = jsModule("bits.flatpickr")
     ):
       main(cls := "page-menu")(
         mod.menu("event"),
diff --git a/app/views/feed.scala b/app/views/feed.scala
index b328a2e8f5f0d..dced0684d8bbb 100644
--- a/app/views/feed.scala
+++ b/app/views/feed.scala
@@ -12,12 +12,15 @@ import lila.feed.Feed.Update
 object feed:
 
   private def layout(title: String, edit: Boolean = false)(using PageContext) =
-    views.html.site.page.layout(
-      title = title,
-      active = "news",
-      moreCss = cssTag("dailyFeed"),
-      moreJs = frag(infiniteScrollTag, edit.option(jsModule("flatpickr")), edit.option(jsModule("dailyFeed")))
-    )
+    views.html.site.page
+      .layout(
+        title = title,
+        active = "news",
+        moreCss = cssTag("dailyFeed"),
+        modules = infiniteScrollTag
+          ++ edit.so(jsModule("bits.flatpickr"))
+          ++ edit.so(jsModule("bits.dailyFeed"))
+      )
 
   def index(ups: Paginator[Update])(using PageContext) =
     layout("Updates"):
diff --git a/app/views/fide/bits.scala b/app/views/fide/bits.scala
index 5a8ecbd363de8..dd889d190e206 100644
--- a/app/views/fide/bits.scala
+++ b/app/views/fide/bits.scala
@@ -9,7 +9,7 @@ private object bits:
     views.html.base.layout(
       moreCss = cssTag("fide"),
       title = title,
-      moreJs = frag(infiniteScrollTag)
+      modules = infiniteScrollTag
     ):
       main(cls := "page-menu")(
         views.html.relay.tour.pageMenu(active),
diff --git a/app/views/forum/categ.scala b/app/views/forum/categ.scala
index 8df766be10775..440b57b48d62a 100644
--- a/app/views/forum/categ.scala
+++ b/app/views/forum/categ.scala
@@ -77,7 +77,7 @@ object categ:
     views.html.base.layout(
       title = categ.name,
       moreCss = cssTag("forum"),
-      moreJs = infiniteScrollTag,
+      modules = infiniteScrollTag,
       csp = defaultCsp.withInlineIconFont.some,
       openGraph = lila.web
         .OpenGraph(
diff --git a/app/views/forum/search.scala b/app/views/forum/search.scala
index d268c8238c602..2b5c63d4a1c47 100644
--- a/app/views/forum/search.scala
+++ b/app/views/forum/search.scala
@@ -12,7 +12,7 @@ object search:
     val title = s"""${trans.search.search.txt()} "${text.trim}""""
     views.html.base.layout(
       title = title,
-      moreJs = infiniteScrollTag,
+      modules = infiniteScrollTag,
       moreCss = cssTag("forum")
     )(
       main(cls := "box search")(
diff --git a/app/views/forum/topic.scala b/app/views/forum/topic.scala
index 60ccb7da86242..8be24ac57f332 100644
--- a/app/views/forum/topic.scala
+++ b/app/views/forum/topic.scala
@@ -17,10 +17,7 @@ object topic:
     views.html.base.layout(
       title = "New forum topic",
       moreCss = cssTag("forum"),
-      moreJs = frag(
-        jsModule("forum"),
-        captchaTag
-      )
+      modules = jsModule("bits.forum") ++ captchaTag
     ):
       main(cls := "forum forum-topic topic-form page-small box box-pad")(
         boxTop(
@@ -79,11 +76,8 @@ object topic:
   )(using ctx: PageContext) =
     views.html.base.layout(
       title = s"${topic.name} • page ${posts.currentPage}/${posts.nbPages} • ${categ.name}",
-      moreJs = frag(
-        jsModule("forum"),
-        formWithCaptcha.isDefined.option(captchaTag),
-        jsModule("expandText")
-      ),
+      modules = jsModule("bits.forum") ++ jsModule("bits.expandText") ++
+        formWithCaptcha.isDefined.so(captchaTag),
       moreCss = cssTag("forum"),
       openGraph = lila.web
         .OpenGraph(
@@ -213,10 +207,7 @@ object topic:
     views.html.base.layout(
       title = "Diagnostic report",
       moreCss = cssTag("forum"),
-      moreJs = frag(
-        jsModule("forum"),
-        captchaTag
-      )
+      modules = jsModule("bits.forum") ++ captchaTag
     ):
       main(cls := "forum forum-topic topic-form page-small box box-pad")(
         boxTop(h1(dataIcon := Icon.BubbleConvo, cls := "text")("Diagnostics")),
diff --git a/app/views/mod/communication.scala b/app/views/mod/communication.scala
index 3e380826df95e..9927ecf5c8883 100644
--- a/app/views/mod/communication.scala
+++ b/app/views/mod/communication.scala
@@ -31,8 +31,7 @@ object communication:
         cssTag("mod.communication"),
         isGranted(_.UserModView).option(cssTag("mod.user"))
       ),
-      moreJs = frag:
-        isGranted(_.UserModView).option(jsModule("mod.user"))
+      modules = isGranted(_.UserModView).so(jsModule("mod.user"))
     ):
       main(id := "communication", cls := "box box-pad")(
         boxTop(
diff --git a/app/views/mod/games.scala b/app/views/mod/games.scala
index 986378b6f1c92..558f180c85a7c 100644
--- a/app/views/mod/games.scala
+++ b/app/views/mod/games.scala
@@ -28,7 +28,7 @@ object games:
     views.html.base.layout(
       title = s"${user.username} games",
       moreCss = cssTag("mod.games"),
-      moreJs = jsModule("mod.games")
+      modules = jsModule("mod.games")
     ) {
       main(cls := "mod-games box")(
         boxTop(
diff --git a/app/views/mod/publicChat.scala b/app/views/mod/publicChat.scala
index 9164232e7746b..cd17da549b4d9 100644
--- a/app/views/mod/publicChat.scala
+++ b/app/views/mod/publicChat.scala
@@ -15,7 +15,7 @@ object publicChat:
     views.html.base.layout(
       title = "Public Chats",
       moreCss = cssTag("mod.publicChats"),
-      moreJs = jsModule("publicChats")
+      modules = jsModule("mod.publicChats")
     ):
       main(cls := "page-menu")(
         views.html.mod.menu("public-chat"),
diff --git a/app/views/mod/search.scala b/app/views/mod/search.scala
index 87e8952ac586f..82579dcbafa1e 100644
--- a/app/views/mod/search.scala
+++ b/app/views/mod/search.scala
@@ -20,7 +20,7 @@ object search:
     views.html.base.layout(
       title = "Search users",
       moreCss = cssTag("mod.misc"),
-      moreJs = jsModule("mod.search")
+      modules = jsModule("mod.search")
     ) {
       main(cls := "page-menu")(
         views.html.mod.menu("search"),
@@ -48,7 +48,7 @@ object search:
     views.html.base.layout(
       title = "Fingerprint",
       moreCss = cssTag("mod.misc"),
-      moreJs = jsModule("mod.search")
+      modules = jsModule("mod.search")
     ):
       main(cls := "page-menu")(
         views.html.mod.menu("search"),
@@ -90,7 +90,7 @@ object search:
     views.html.base.layout(
       title = "IP address",
       moreCss = cssTag("mod.misc"),
-      moreJs = jsModule("mod.search")
+      modules = jsModule("mod.search")
     ):
       main(cls := "page-menu")(
         views.html.mod.menu("search"),
@@ -124,7 +124,7 @@ object search:
     views.html.base.layout(
       title = "IP address",
       moreCss = cssTag("mod.misc"),
-      moreJs = jsModule("mod.search")
+      modules = jsModule("mod.search")
     ):
       main(cls := "page-menu")(
         views.html.mod.menu("search"),
@@ -187,7 +187,7 @@ object search:
     views.html.base.layout(
       title = "Mod notes",
       moreCss = frag(cssTag("mod.misc"), cssTag("slist")),
-      moreJs = infiniteScrollTag
+      modules = infiniteScrollTag
     ) {
       main(cls := "page-menu")(
         views.html.mod.menu("notes"),
diff --git a/app/views/plan/index.scala b/app/views/plan/index.scala
index 5ea198ef278e8..5ef8a25afdbf9 100644
--- a/app/views/plan/index.scala
+++ b/app/views/plan/index.scala
@@ -45,12 +45,12 @@ object index:
               namespaceAttr := "paypalSubscription"
             )
           ),
-          jsModule("checkout"),
           embedJsUnsafeLoadThen(s"""checkoutStart("$stripePublicKey", ${safeJsonValue(
               lila.plan.PlanPricingApi.pricingWrites.writes(pricing)
             )})""")
         )
       ),
+      modules = jsModule("bits.checkout"),
       openGraph = lila.web
         .OpenGraph(
           title = becomePatron.txt(),
diff --git a/app/views/plan/indexPayPal.scala b/app/views/plan/indexPayPal.scala
index 072691c3b3395..0f1ee22707c6b 100644
--- a/app/views/plan/indexPayPal.scala
+++ b/app/views/plan/indexPayPal.scala
@@ -20,7 +20,8 @@ object indexPayPal:
     views.html.base.layout(
       title = thankYou.txt(),
       moreCss = cssTag("plan"),
-      moreJs = frag(jsModule("plan"), embedJsUnsafeLoadThen("""plan.payPalStart()"""))
+      modules = jsModule("bits.plan"),
+      moreJs = embedJsUnsafeLoadThen("""plan.payPalStart()""")
     ) {
       main(cls := "box box-pad plan")(
         boxTop(
diff --git a/app/views/plan/indexStripe.scala b/app/views/plan/indexStripe.scala
index 47130ffb8f0e2..9d6813af32dfc 100644
--- a/app/views/plan/indexStripe.scala
+++ b/app/views/plan/indexStripe.scala
@@ -23,9 +23,9 @@ object indexStripe:
     views.html.base.layout(
       title = thankYou.txt(),
       moreCss = cssTag("plan"),
+      modules = jsModule("bits.plan"),
       moreJs = frag(
         index.stripeScript,
-        jsModule("plan"),
         embedJsUnsafeLoadThen(s"""plan.stripeStart("$stripePublicKey")""")
       ),
       csp = defaultCsp.withStripe.some
diff --git a/app/views/practice/show.scala b/app/views/practice/show.scala
index 89b7658373c0b..2618e7a1052df 100644
--- a/app/views/practice/show.scala
+++ b/app/views/practice/show.scala
@@ -15,9 +15,9 @@ object show:
     views.html.base.layout(
       title = us.practiceStudy.name.value,
       moreCss = cssTag("analyse.practice"),
-      moreJs = analyseNvuiTag,
+      modules = List(analyseNvuiTag),
       pageModule = PageModule(
-        "analysisBoard.study",
+        "analyse.study",
         Json.obj(
           "practice" -> data.practice,
           "study"    -> data.study,
diff --git a/app/views/puzzle/dashboard.scala b/app/views/puzzle/dashboard.scala
index ba78d325fad42..c645840059dd9 100644
--- a/app/views/puzzle/dashboard.scala
+++ b/app/views/puzzle/dashboard.scala
@@ -152,7 +152,7 @@ object dashboard:
       ),
       div(
         cls   := s"$metricClass $metricClass--win",
-        style := s"--first:${results.firstWinPercent}%;--win:${results.winPercent}%"
+        style := s"---first:${results.firstWinPercent}%;---win:${results.winPercent}%"
       )(
         trans.puzzle.percentSolved(strong(s"${results.winPercent}%"))
       ),
diff --git a/app/views/puzzle/embed.scala b/app/views/puzzle/embed.scala
index 0d5d6a25b8760..a40fb1b8dfd1e 100644
--- a/app/views/puzzle/embed.scala
+++ b/app/views/puzzle/embed.scala
@@ -20,7 +20,7 @@ object embed:
         cls := "embedded"
       ),
       chessgroundTag,
-      jsModule("puzzle.embed")
+      jsTag("puzzle.embed")
     )
 
   def dailyLink(daily: DailyPuzzle.WithHtml)(using Translate) = a(
diff --git a/app/views/puzzle/history.scala b/app/views/puzzle/history.scala
index 4061af133174b..f18b6631b1874 100644
--- a/app/views/puzzle/history.scala
+++ b/app/views/puzzle/history.scala
@@ -18,7 +18,7 @@ object history:
     views.html.base.layout(
       title = title,
       moreCss = cssTag("puzzle.dashboard"),
-      moreJs = infiniteScrollTag
+      modules = infiniteScrollTag
     )(
       main(cls := "page-menu")(
         bits.pageMenu("history", user.some),
diff --git a/app/views/puzzle/ofPlayer.scala b/app/views/puzzle/ofPlayer.scala
index 36c8b192cd74f..d8beb67fab414 100644
--- a/app/views/puzzle/ofPlayer.scala
+++ b/app/views/puzzle/ofPlayer.scala
@@ -14,7 +14,7 @@ object ofPlayer:
     views.html.base.layout(
       title = user.fold(trans.puzzle.lookupOfPlayer.txt())(u => trans.puzzle.fromXGames.txt(u.username)),
       moreCss = cssTag("puzzle.page"),
-      moreJs = infiniteScrollTag
+      modules = infiniteScrollTag
     )(
       main(cls := "page-menu")(
         bits.pageMenu("player", user),
diff --git a/app/views/puzzle/opening.scala b/app/views/puzzle/opening.scala
index 5855b13c8f897..9a9cfcf1e3372 100644
--- a/app/views/puzzle/opening.scala
+++ b/app/views/puzzle/opening.scala
@@ -17,7 +17,7 @@ object opening:
     views.html.base.layout(
       title = trans.puzzle.puzzlesByOpenings.txt(),
       moreCss = cssTag("puzzle.page"),
-      moreJs = jsModule("puzzle.opening")
+      modules = jsModule("puzzle.opening")
     ):
       main(cls := "page-menu")(
         bits.pageMenu("openings", ctx.me),
diff --git a/app/views/puzzle/show.scala b/app/views/puzzle/show.scala
index 95b8533c454d1..04fac8aaeee32 100644
--- a/app/views/puzzle/show.scala
+++ b/app/views/puzzle/show.scala
@@ -25,7 +25,7 @@ object show:
         ctx.pref.hasVoice.option(cssTag("voice")),
         ctx.blind.option(cssTag("round.nvui"))
       ),
-      moreJs = puzzleNvuiTag,
+      modules = puzzleNvuiTag,
       pageModule = PageModule(
         "puzzle",
         Json
diff --git a/app/views/relation/bits.scala b/app/views/relation/bits.scala
index 43a02eb927c85..a46541b1400ef 100644
--- a/app/views/relation/bits.scala
+++ b/app/views/relation/bits.scala
@@ -67,7 +67,7 @@ object bits:
     views.html.base.layout(
       title = title,
       moreCss = cssTag("relation"),
-      moreJs = infiniteScrollTag
+      modules = infiniteScrollTag
     ):
       main(cls := "box page-small")(content)
 
diff --git a/app/views/relay/roundForm.scala b/app/views/relay/roundForm.scala
index 379fe829324cc..65ad9525cc755 100644
--- a/app/views/relay/roundForm.scala
+++ b/app/views/relay/roundForm.scala
@@ -51,7 +51,7 @@ object roundForm:
     views.html.base.layout(
       title = title,
       moreCss = cssTag("relay.form"),
-      moreJs = jsModule("flatpickr")
+      modules = jsModule("bits.flatpickr")
     ):
       main(cls := "page-small box box-pad")(body)
 
diff --git a/app/views/relay/show.scala b/app/views/relay/show.scala
index 046ea581b58d4..46ceb65f9a6dc 100644
--- a/app/views/relay/show.scala
+++ b/app/views/relay/show.scala
@@ -20,9 +20,9 @@ object show:
     views.html.base.layout(
       title = rt.fullName,
       moreCss = cssTag("analyse.relay"),
-      moreJs = analyseNvuiTag,
+      modules = analyseNvuiTag,
       pageModule = PageModule(
-        "analysisBoard.study",
+        "analyse.study",
         Json
           .obj(
             "relay"    -> data.relay,
diff --git a/app/views/relay/tour.scala b/app/views/relay/tour.scala
index 9bb8b3fd65300..8986e42ee4f95 100644
--- a/app/views/relay/tour.scala
+++ b/app/views/relay/tour.scala
@@ -27,7 +27,7 @@ object tour:
     views.html.base.layout(
       title = liveBroadcasts.txt(),
       moreCss = cssTag("relay.index"),
-      moreJs = infiniteScrollTag,
+      modules = infiniteScrollTag,
       withHrefLangs = LangPath(routes.RelayTour.index()).some
     ):
       def nonEmptyTier(selector: RelayTour.Tier.Selector, tier: String) =
@@ -61,7 +61,7 @@ object tour:
     views.html.base.layout(
       title = liveBroadcasts.txt(),
       moreCss = cssTag("relay.index"),
-      moreJs = infiniteScrollTag
+      modules = infiniteScrollTag
     )(main(cls := "relay-index page-menu")(div(cls := "page-menu__content box box-pad")(body)))
 
   def search(pager: Paginator[WithLastRound], query: String)(using PageContext) =
diff --git a/app/views/relay/tourForm.scala b/app/views/relay/tourForm.scala
index 678e5f19a1ac1..b22480da88bfd 100644
--- a/app/views/relay/tourForm.scala
+++ b/app/views/relay/tourForm.scala
@@ -76,7 +76,7 @@ object tourForm:
     views.html.base.layout(
       title = title,
       moreCss = cssTag("relay.form"),
-      moreJs = jsModule("relayForm")
+      modules = jsModule("bits.relayForm")
     )(menu match
       case Some(active) =>
         main(cls := "page page-menu")(
diff --git a/app/views/round/bits.scala b/app/views/round/bits.scala
index 88ecbbd1eaf10..9788da4f2508d 100644
--- a/app/views/round/bits.scala
+++ b/app/views/round/bits.scala
@@ -19,6 +19,7 @@ object bits:
       title: String,
       pageModule: Option[PageModule],
       moreJs: Frag = emptyFrag,
+      modules: EsmList = Nil,
       openGraph: Option[lila.web.OpenGraph] = None,
       moreCss: Frag = emptyFrag,
       playing: Boolean = false,
@@ -37,6 +38,7 @@ object bits:
         ctx.blind.option(cssTag("round.nvui")),
         moreCss
       ),
+      modules = modules,
       pageModule = pageModule,
       playing = playing,
       zenable = zenable,
diff --git a/app/views/round/player.scala b/app/views/round/player.scala
index 659200834105b..6446df47ca616 100644
--- a/app/views/round/player.scala
+++ b/app/views/round/player.scala
@@ -48,7 +48,7 @@ object player:
     bits.layout(
       variant = pov.game.variant,
       title = s"${trans.site.play.txt()} $opponentNameOrZen",
-      moreJs = frag(roundNvuiTag),
+      modules = roundNvuiTag,
       pageModule = PageModule(
         "round",
         Json
diff --git a/app/views/round/watcher.scala b/app/views/round/watcher.scala
index d36eaca353223..fe9a0f107b726 100644
--- a/app/views/round/watcher.scala
+++ b/app/views/round/watcher.scala
@@ -35,7 +35,7 @@ object watcher:
     bits.layout(
       variant = pov.game.variant,
       title = s"${gameVsText(pov.game, withRatings = ctx.pref.showRatings)} • spectator",
-      moreJs = frag(roundNvuiTag),
+      modules = roundNvuiTag,
       pageModule = PageModule(
         "round",
         Json.obj(
diff --git a/app/views/search/index.scala b/app/views/search/index.scala
index f281244f394f8..a596608c25889 100644
--- a/app/views/search/index.scala
+++ b/app/views/search/index.scala
@@ -18,10 +18,7 @@ object index:
     import commons.*
     views.html.base.layout(
       title = searchInXGames.txt(nbGames.localize, nbGames),
-      moreJs = frag(
-        jsModule("gameSearch"),
-        infiniteScrollTag
-      ),
+      modules = jsModule("bits.gameSearch") ++ infiniteScrollTag,
       moreCss = cssTag("search")
     ) {
       main(cls := "box page-small search")(
diff --git a/app/views/simul/form.scala b/app/views/simul/form.scala
index c265e2d5c72af..960563543ef7f 100644
--- a/app/views/simul/form.scala
+++ b/app/views/simul/form.scala
@@ -15,7 +15,7 @@ object form:
     views.html.base.layout(
       title = trans.site.hostANewSimul.txt(),
       moreCss = cssTag("simul.form"),
-      moreJs = jsModule("flatpickr")
+      modules = jsModule("bits.flatpickr")
     ) {
       main(cls := "box box-pad page-small simul-form")(
         h1(cls := "box__top")(trans.site.hostANewSimul()),
@@ -37,7 +37,7 @@ object form:
     views.html.base.layout(
       title = s"Edit ${simul.fullName}",
       moreCss = cssTag("simul.form"),
-      moreJs = jsModule("flatpickr")
+      modules = jsModule("bits.flatpickr")
     ) {
       main(cls := "box box-pad page-small simul-form")(
         h1(cls := "box__top")("Edit ", simul.fullName),
diff --git a/app/views/simul/hosted.scala b/app/views/simul/hosted.scala
index c5c9665035e09..691c7fa3b40ac 100644
--- a/app/views/simul/hosted.scala
+++ b/app/views/simul/hosted.scala
@@ -13,7 +13,7 @@ object hosted:
     views.html.base.layout(
       title = s"${user.username} hosted simuls",
       moreCss = cssTag("user-simul"),
-      moreJs = infiniteScrollTag
+      modules = infiniteScrollTag
     ) {
       main(cls := "page-small box simul-list")(
         if pager.nbResults == 0 then
diff --git a/app/views/site/contact.scala b/app/views/site/contact.scala
index a81f192dde775..0a4dcf105a234 100644
--- a/app/views/site/contact.scala
+++ b/app/views/site/contact.scala
@@ -345,7 +345,7 @@ object contact:
       title = trans.contact.contact.txt(),
       active = "contact",
       moreCss = cssTag("contact"),
-      moreJs = jsModule("contact"),
+      modules = jsModule("bits.contact"),
       contentCls = "page box box-pad"
     )(
       frag(
diff --git a/app/views/site/lag.scala b/app/views/site/lag.scala
index d246f8c9e650e..c5ad7630417ef 100644
--- a/app/views/site/lag.scala
+++ b/app/views/site/lag.scala
@@ -12,7 +12,7 @@ object lag:
       title = "Is Lichess lagging?",
       active = "lag",
       moreCss = cssTag("lag"),
-      moreJs = jsModuleInit("chart.lag")
+      modules = jsModuleInit("chart.lag")
     ):
       div(cls := "box box-pad lag")(
         h1(cls := "box__top")(
diff --git a/app/views/site/page.scala b/app/views/site/page.scala
index 3f04ab013a707..9159cbd3ac85c 100644
--- a/app/views/site/page.scala
+++ b/app/views/site/page.scala
@@ -223,11 +223,13 @@ $('#asset-version-message').text(site.info.message);"""
       active: String,
       contentCls: String = "",
       moreCss: Frag = emptyFrag,
-      moreJs: Frag = emptyFrag
+      moreJs: Frag = emptyFrag,
+      modules: EsmList = Nil
   )(body: Frag)(using PageContext) =
     views.html.base.layout(
       title = title,
       moreCss = moreCss,
+      modules = modules,
       moreJs = moreJs
     ):
       val sep                  = div(cls := "sep")
diff --git a/app/views/site/variant.scala b/app/views/site/variant.scala
index a0d91f8830711..4b9b25a506639 100644
--- a/app/views/site/variant.scala
+++ b/app/views/site/variant.scala
@@ -54,7 +54,7 @@ object variant:
     views.html.base.layout(
       title = title,
       moreCss = cssTag("variant"),
-      moreJs = jsModule("expandText"),
+      modules = jsModule("bits.expandText"),
       openGraph = openGraph
     ):
       main(cls := "page-menu")(
diff --git a/app/views/storm.scala b/app/views/storm.scala
index 896c2b438f8e9..8da7af7bb5b4e 100644
--- a/app/views/storm.scala
+++ b/app/views/storm.scala
@@ -63,7 +63,7 @@ object storm:
     views.html.base.layout(
       title = s"${user.username} Puzzle Storm",
       moreCss = frag(cssTag("storm.dashboard")),
-      moreJs = infiniteScrollTag
+      modules = infiniteScrollTag
     )(
       main(cls := "storm-dashboard page-small")(
         div(cls := "storm-dashboard__high box box-pad")(
diff --git a/app/views/streamer/edit.scala b/app/views/streamer/edit.scala
index ef7d36b47970c..3f9d044585114 100644
--- a/app/views/streamer/edit.scala
+++ b/app/views/streamer/edit.scala
@@ -18,7 +18,7 @@ object edit:
   )(using ctx: PageContext) =
     views.html.base.layout(
       title = s"${s.user.titleUsername} ${lichessStreamer.txt()}",
-      moreJs = jsModule("streamer"),
+      modules = jsModule("bits.streamer"),
       moreCss = cssTag("streamer.form")
     ) {
       main(cls := "page-menu")(
diff --git a/app/views/streamer/index.scala b/app/views/streamer/index.scala
index cfe08047d4dc5..d35a510ac34ff 100644
--- a/app/views/streamer/index.scala
+++ b/app/views/streamer/index.scala
@@ -62,7 +62,7 @@ object index:
     views.html.base.layout(
       title = title,
       moreCss = cssTag("streamer.list"),
-      moreJs = frag(infiniteScrollTag, jsModule("streamer"))
+      modules = infiniteScrollTag ++ jsModule("bits.streamer")
     ) {
       main(cls := "page-menu")(
         bits.menu(if requests then "requests" else "index", none)(cls := " page-menu__menu"),
diff --git a/app/views/streamer/show.scala b/app/views/streamer/show.scala
index 4c7cde057dedb..a027ae2c1028c 100644
--- a/app/views/streamer/show.scala
+++ b/app/views/streamer/show.scala
@@ -23,7 +23,7 @@ object show:
     views.html.base.layout(
       title = s"${s.titleName} streams chess",
       moreCss = cssTag("streamer.show"),
-      moreJs = jsModule("streamer"),
+      modules = jsModule("bits.streamer"),
       openGraph = lila.web
         .OpenGraph(
           title = s"${s.titleName} streams chess",
diff --git a/app/views/study/embed.scala b/app/views/study/embed.scala
index 4e093e32632ea..c96e613295f44 100644
--- a/app/views/study/embed.scala
+++ b/app/views/study/embed.scala
@@ -17,7 +17,7 @@ object embed:
       cssModule = "lpv.embed"
     )(
       div(cls := "is2d")(div(pgn)),
-      jsModule("lpv.embed"),
+      jsTag("site.lpv.embed"),
       lpvJs:
         lpvConfig(orientation = none, getPgn = canGetPgn) ++ Json
           .obj()
diff --git a/app/views/study/list.scala b/app/views/study/list.scala
index 59a07d5ab0bde..2313231fa2c26 100644
--- a/app/views/study/list.scala
+++ b/app/views/study/list.scala
@@ -100,7 +100,7 @@ object list:
       title = text,
       moreCss = cssTag("study.index"),
       wrapClass = "full-screen-force",
-      moreJs = infiniteScrollTag
+      modules = infiniteScrollTag
     ) {
       main(cls := "page-menu")(
         menu("search", Order.default),
@@ -182,7 +182,7 @@ object list:
       title = title,
       moreCss = cssTag("study.index"),
       wrapClass = "full-screen-force",
-      moreJs = infiniteScrollTag,
+      modules = infiniteScrollTag,
       withHrefLangs = withHrefLangs
     ):
       main(cls := "page-menu")(
diff --git a/app/views/study/show.scala b/app/views/study/show.scala
index 1b608b1066b54..a3428afd27986 100644
--- a/app/views/study/show.scala
+++ b/app/views/study/show.scala
@@ -20,9 +20,9 @@ object show:
     views.html.base.layout(
       title = s.name.value,
       moreCss = cssTag("analyse.study"),
-      moreJs = analyseNvuiTag,
+      modules = analyseNvuiTag,
       pageModule = PageModule(
-        "analysisBoard.study",
+        "analyse.study",
         Json.obj(
           "study" -> data.study
             .add("admin", isGranted(_.StudyAdmin))
diff --git a/app/views/study/topic.scala b/app/views/study/topic.scala
index 0c4792a6c5e0e..8c9b4d1f4e87e 100644
--- a/app/views/study/topic.scala
+++ b/app/views/study/topic.scala
@@ -15,7 +15,7 @@ object topic:
     views.html.base.layout(
       title = trans.study.topics.txt(),
       moreCss = frag(cssTag("study.index"), cssTag("form3"), cssTag("tagify")),
-      moreJs = jsModule("study.topic.form"),
+      modules = jsModule("analyse.study.topic.form"),
       wrapClass = "full-screen-force"
     ) {
       main(cls := "page-menu")(
@@ -47,7 +47,7 @@ object topic:
       title = topic.value,
       moreCss = cssTag("study.index"),
       wrapClass = "full-screen-force",
-      moreJs = infiniteScrollTag
+      modules = infiniteScrollTag
     ) {
       val active = s"topic:$topic"
       val url    = (o: String) => routes.Study.byTopic(topic.value, o)
diff --git a/app/views/swiss/form.scala b/app/views/swiss/form.scala
index 01fac0db86f7a..b4157bdc3cc8e 100644
--- a/app/views/swiss/form.scala
+++ b/app/views/swiss/form.scala
@@ -15,7 +15,7 @@ object form:
     views.html.base.layout(
       title = trans.swiss.newSwiss.txt(),
       moreCss = cssTag("swiss.form"),
-      moreJs = jsModule("tourForm")
+      modules = jsModule("bits.tourForm")
     ) {
       val fields = new SwissFields(form, none)
       main(cls := "page-small")(
@@ -56,7 +56,7 @@ object form:
     views.html.base.layout(
       title = swiss.name,
       moreCss = cssTag("swiss.form"),
-      moreJs = jsModule("tourForm")
+      modules = jsModule("bits.tourForm")
     ) {
       val fields = new SwissFields(form, swiss.some)
       main(cls := "page-small")(
diff --git a/app/views/swiss/show.scala b/app/views/swiss/show.scala
index a25b31b062141..689bf848afa62 100644
--- a/app/views/swiss/show.scala
+++ b/app/views/swiss/show.scala
@@ -28,7 +28,7 @@ object show:
     val hasScheduleInput = isDirector && s.settings.manualRounds && s.isNotFinished
     views.html.base.layout(
       title = fullName(s, team),
-      moreJs = frag(hasScheduleInput.option(jsModule("flatpickr"))),
+      modules = hasScheduleInput.so(jsModule("bits.flatpickr")),
       pageModule = PageModule(
         "swiss",
         Json
diff --git a/app/views/team/admin.scala b/app/views/team/admin.scala
index d87950be32922..4269921df082f 100644
--- a/app/views/team/admin.scala
+++ b/app/views/team/admin.scala
@@ -21,7 +21,7 @@ object admin:
     views.html.base.layout(
       title = s"${t.name} • ${teamLeaders.txt()}",
       moreCss = frag(cssTag("team"), cssTag("tagify")),
-      moreJs = jsModule("team.admin")
+      modules = jsModule("mod.team.admin")
     ):
       val dataLabel = attrData("label")
       main(cls := "page-menu")(
@@ -83,7 +83,7 @@ object admin:
     views.html.base.layout(
       title = s"${t.name} • ${kickSomeone.txt()}",
       moreCss = frag(cssTag("team"), cssTag("tagify")),
-      moreJs = jsModule("team.admin")
+      modules = jsModule("mod.team.admin")
     ):
       main(cls := "page-menu page-small")(
         bits.menu(none),
diff --git a/app/views/team/bits.scala b/app/views/team/bits.scala
index 2d66ea42d8dcb..d9f57b53c4350 100644
--- a/app/views/team/bits.scala
+++ b/app/views/team/bits.scala
@@ -82,12 +82,14 @@ object bits:
       openGraph: Option[lila.web.OpenGraph] = None,
       pageModule: Option[PageModule] = None,
       moreJs: Frag = emptyFrag,
+      modules: EsmList = Nil,
       robots: Boolean = netConfig.crawlable
   )(body: Frag)(using PageContext) =
     views.html.base.layout(
       title = title,
       moreCss = cssTag("team"),
-      moreJs = frag(infiniteScrollTag, moreJs),
+      modules = infiniteScrollTag ++ modules,
+      moreJs = moreJs,
       pageModule = pageModule,
       openGraph = openGraph,
       robots = robots
diff --git a/app/views/team/declinedRequest.scala b/app/views/team/declinedRequest.scala
index 3da8957a33780..81aa88351e8fa 100644
--- a/app/views/team/declinedRequest.scala
+++ b/app/views/team/declinedRequest.scala
@@ -17,7 +17,7 @@ object declinedRequest:
     views.html.base.layout(
       title = title,
       moreCss = frag(cssTag("team")),
-      moreJs = jsModule("team.admin")
+      modules = jsModule("mod.team.admin")
     ) {
       val pager = views.html.base.bits
         .paginationByQuery(teamRoutes.declinedRequests(team.id, 1), requests, showPost = true)
diff --git a/app/views/team/form.scala b/app/views/team/form.scala
index 1e541a5838652..cdf152b95b16d 100644
--- a/app/views/team/form.scala
+++ b/app/views/team/form.scala
@@ -16,7 +16,7 @@ object form:
     views.html.base.layout(
       title = newTeam.txt(),
       moreCss = cssTag("team"),
-      moreJs = captchaTag
+      modules = captchaTag
     ):
       main(cls := "page-menu page-small")(
         bits.menu("form".some),
@@ -37,7 +37,7 @@ object form:
       )
 
   def edit(t: Team, form: Form[?], member: Option[TeamMember])(using ctx: PageContext) =
-    bits.layout(title = s"Edit Team ${t.name}", moreJs = jsModule("team")):
+    bits.layout(title = s"Edit Team ${t.name}", modules = jsModule("bits.team")):
       main(cls := "page-menu page-small team-edit")(
         bits.menu(none),
         div(cls := "page-menu__content box box-pad")(
diff --git a/app/views/tournament/crud.scala b/app/views/tournament/crud.scala
index 22fdccbd69236..89fbde54f820d 100644
--- a/app/views/tournament/crud.scala
+++ b/app/views/tournament/crud.scala
@@ -13,16 +13,19 @@ import lila.tournament.crud.CrudForm
 object crud:
   given prefix: tournament.FormPrefix = tournament.FormPrefix.make("setup")
 
-  private def layout(title: String, evenMoreJs: Frag = emptyFrag, css: String = "mod.misc")(
+  private def layout(
+      title: String,
+      modules: EsmList = Nil,
+      evenMoreJs: Frag = emptyFrag,
+      css: String = "mod.misc"
+  )(
       body: Frag
   )(using PageContext) =
     views.html.base.layout(
       title = title,
       moreCss = cssTag(css),
-      moreJs = frag(
-        jsModule("flatpickr"),
-        evenMoreJs
-      )
+      modules = jsModule("bits.flatpick") ++ modules,
+      moreJs = evenMoreJs
     ) {
       main(cls := "page-menu")(
         views.html.mod.menu("tour"),
@@ -110,7 +113,7 @@ object crud:
   def index(tours: Paginator[Tournament])(using PageContext) =
     layout(
       title = "Tournament manager",
-      evenMoreJs = infiniteScrollTag
+      modules = infiniteScrollTag
     ) {
       div(cls := "crud page-menu__content box")(
         boxTop(
diff --git a/app/views/tournament/form.scala b/app/views/tournament/form.scala
index c0c0819acf6ea..cb02df3c8d5f5 100644
--- a/app/views/tournament/form.scala
+++ b/app/views/tournament/form.scala
@@ -17,7 +17,7 @@ object form:
     views.html.base.layout(
       title = trans.site.newTournament.txt(),
       moreCss = cssTag("tournament.form"),
-      moreJs = jsModule("tourForm")
+      modules = jsModule("bits.tourForm")
     ):
       val fields = TourFields(form, none)
       main(cls := "page-small")(
@@ -94,7 +94,7 @@ object form:
     views.html.base.layout(
       title = tour.name(),
       moreCss = cssTag("tournament.form"),
-      moreJs = jsModule("tourForm")
+      modules = jsModule("bits.tourForm")
     ):
       TourFields(form, tour.some)
       main(cls := "page-small")(
diff --git a/app/views/tournament/history.scala b/app/views/tournament/history.scala
index a69ca7e539722..794a7ea3fa27e 100644
--- a/app/views/tournament/history.scala
+++ b/app/views/tournament/history.scala
@@ -13,7 +13,7 @@ object history:
   def apply(freq: Freq, pager: Paginator[Tournament])(using PageContext) =
     views.html.base.layout(
       title = "Tournament history",
-      moreJs = infiniteScrollTag,
+      modules = infiniteScrollTag,
       moreCss = cssTag("tournament.history")
     ) {
       main(cls := "page-menu arena-history")(
diff --git a/app/views/tournament/home.scala b/app/views/tournament/home.scala
index 731671421aa24..87249e1d609da 100644
--- a/app/views/tournament/home.scala
+++ b/app/views/tournament/home.scala
@@ -21,7 +21,7 @@ object home:
       title = trans.site.tournaments.txt(),
       moreCss = cssTag("tournament.home"),
       wrapClass = "full-screen-force",
-      moreJs = infiniteScrollTag,
+      modules = infiniteScrollTag,
       pageModule = PageModule(
         "tournament.schedule",
         Json.obj("data" -> json, "i18n" -> bits.scheduleJsI18n)
diff --git a/app/views/tournament/teamBattle.scala b/app/views/tournament/teamBattle.scala
index 166ff68de9e64..d63e612517f52 100644
--- a/app/views/tournament/teamBattle.scala
+++ b/app/views/tournament/teamBattle.scala
@@ -14,7 +14,7 @@ object teamBattle:
     views.html.base.layout(
       title = tour.name(),
       moreCss = cssTag("tournament.form"),
-      moreJs = jsModule("teamBattleForm")
+      modules = jsModule("bits.teamBattleForm")
     ):
       main(cls := "page-small")(
         div(cls := "tour__form box box-pad")(
diff --git a/app/views/tutor/bits.scala b/app/views/tutor/bits.scala
index c137cd98f5472..9cb566e37d8ec 100644
--- a/app/views/tutor/bits.scala
+++ b/app/views/tutor/bits.scala
@@ -32,7 +32,7 @@ object bits:
   )(content: Modifier*)(using PageContext) =
     views.html.base.layout(
       moreCss = cssTag("tutor"),
-      moreJs = jsModule("tutor"),
+      modules = jsModule("tutor"),
       title = title,
       csp = defaultCsp.withInlineIconFont.some
     ):
diff --git a/app/views/tv/embed.scala b/app/views/tv/embed.scala
index 1ca7dc2493516..f0864789d0b23 100644
--- a/app/views/tv/embed.scala
+++ b/app/views/tv/embed.scala
@@ -19,5 +19,5 @@ object embed:
       ),
       cashTag,
       chessgroundTag,
-      jsModule("tvEmbed")
+      jsTag("site.tvEmbed")
     )
diff --git a/app/views/tv/games.scala b/app/views/tv/games.scala
index afceda560459f..686ee4b755d11 100644
--- a/app/views/tv/games.scala
+++ b/app/views/tv/games.scala
@@ -13,7 +13,7 @@ object games:
     views.html.base.layout(
       title = s"${channel.name} • ${trans.site.currentGames.txt()}",
       moreCss = cssTag("tv.games"),
-      moreJs = jsModule("tvGames")
+      modules = jsModule("bits.tvGames")
     ) {
       main(
         cls     := "page-menu tv-games",
diff --git a/app/views/ublog/blog.scala b/app/views/ublog/blog.scala
index cfac8bbda264d..4672551401f00 100644
--- a/app/views/ublog/blog.scala
+++ b/app/views/ublog/blog.scala
@@ -16,10 +16,7 @@ object blog:
     val title = trans.ublog.xBlog.txt(user.username)
     views.html.base.layout(
       moreCss = cssTag("ublog"),
-      moreJs = frag(
-        posts.hasNextPage.option(infiniteScrollTag),
-        ctx.isAuth.option(jsModule("ublog"))
-      ),
+      modules = posts.hasNextPage.option(infiniteScrollTag) ++ ctx.isAuth.so(jsModule("bits.ublog")),
       title = title,
       atomLinkTag = link(
         href     := routes.Ublog.userAtom(user.username),
diff --git a/app/views/ublog/form.scala b/app/views/ublog/form.scala
index eff9b30c89dbc..e1d7c42f5cc59 100644
--- a/app/views/ublog/form.scala
+++ b/app/views/ublog/form.scala
@@ -19,7 +19,7 @@ object form:
   def create(user: User, f: Form[UblogPostData], captcha: Captcha)(using PageContext) =
     views.html.base.layout(
       moreCss = moreCss,
-      moreJs = frag(jsModule("ublogForm"), captchaTag),
+      modules = jsModule("bits.ublogForm") ++ captchaTag,
       title = s"${trans.ublog.xBlog.txt(user.username)} • ${trans.ublog.newPost.txt()}"
     ):
       main(cls := "page-menu page-small")(
@@ -35,7 +35,7 @@ object form:
   def edit(post: UblogPost, f: Form[UblogPostData])(using ctx: PageContext) =
     views.html.base.layout(
       moreCss = moreCss,
-      moreJs = jsModule("ublogForm"),
+      modules = jsModule("bits.ublogForm"),
       title = s"${trans.ublog.xBlog.txt(titleNameOrId(post.created.by))} • ${post.title}"
     ):
       main(cls := "page-menu page-small")(
diff --git a/app/views/ublog/index.scala b/app/views/ublog/index.scala
index 8de627e104ec0..b5b17f87f4249 100644
--- a/app/views/ublog/index.scala
+++ b/app/views/ublog/index.scala
@@ -17,7 +17,7 @@ object index:
   def drafts(user: User, posts: Paginator[UblogPost.PreviewPost])(using PageContext) =
     views.html.base.layout(
       moreCss = frag(cssTag("ublog")),
-      moreJs = posts.hasNextPage.option(infiniteScrollTag),
+      modules = posts.hasNextPage.option(infiniteScrollTag),
       title = trans.ublog.drafts.txt()
     ) {
       main(cls := "page-menu")(
@@ -72,7 +72,7 @@ object index:
   def community(language: Option[Language], posts: Paginator[UblogPost.PreviewPost])(using ctx: PageContext) =
     views.html.base.layout(
       moreCss = cssTag("ublog"),
-      moreJs = posts.hasNextPage.option(infiniteScrollTag),
+      modules = posts.hasNextPage.option(infiniteScrollTag),
       title = "Community blogs",
       atomLinkTag = link(
         href     := routes.Ublog.communityAtom(language.fold("all")(_.value)),
@@ -158,7 +158,7 @@ object index:
   )(using PageContext) =
     views.html.base.layout(
       moreCss = cssTag("ublog"),
-      moreJs = posts.hasNextPage.option(infiniteScrollTag),
+      modules = posts.hasNextPage.option(infiniteScrollTag),
       title = title
     ) {
       main(cls := "page-menu")(
diff --git a/app/views/ublog/post.scala b/app/views/ublog/post.scala
index 99fc989de6472..c4642dab565c1 100644
--- a/app/views/ublog/post.scala
+++ b/app/views/ublog/post.scala
@@ -22,10 +22,7 @@ object post:
   )(using ctx: PageContext) =
     views.html.base.layout(
       moreCss = cssTag("ublog"),
-      moreJs = frag(
-        jsModule("expandText"),
-        ctx.isAuth.option(jsModule("ublog"))
-      ),
+      modules = jsModule("bits.expandText") ++ ctx.isAuth.so(jsModule("bits.ublog")),
       title = s"${trans.ublog.xBlog.txt(user.username)} • ${post.title}",
       openGraph = lila.web
         .OpenGraph(
diff --git a/app/views/user/download.scala b/app/views/user/download.scala
index 804effc95c9e3..35e6fa4fd4fab 100644
--- a/app/views/user/download.scala
+++ b/app/views/user/download.scala
@@ -12,7 +12,7 @@ object download:
     views.html.base.layout(
       title = s"${user.username} • ${trans.site.exportGames.txt()}",
       moreCss = cssTag("search"),
-      moreJs = jsModule("userGamesDownload")
+      modules = jsModule("bits.userGamesDownload")
     ) {
       main(cls := "box page-small search")(
         boxTop(h1(userLink(user), s" • ${trans.site.exportGames.txt()}")),
diff --git a/app/views/user/perfStat.scala b/app/views/user/perfStat.scala
index 089e833c39893..69b4a78f579b6 100644
--- a/app/views/user/perfStat.scala
+++ b/app/views/user/perfStat.scala
@@ -21,14 +21,13 @@ object perfStat:
     views.html.base.layout(
       title = s"${user.username} - ${perfStats.txt(perfType.trans)}",
       robots = false,
-      moreJs = frag(
-        jsModule("user"),
-        ratingChart.map: rc =>
+      modules = jsModule("bits.user") ++
+        ratingChart.map { rc =>
           jsModuleInit(
             "chart.ratingHistory",
             SafeJsonStr(s"{data:$rc,singlePerfName:'${perfType.trans(using ctxTrans.translator.toDefault)}'}")
-          )
-      ),
+          ).some
+        },
       moreCss = cssTag("perf-stat")
     ):
       main(cls := s"page-menu")(
diff --git a/app/views/user/show/page.scala b/app/views/user/show/page.scala
index 4abf9c40306cd..623882195eb78 100644
--- a/app/views/user/show/page.scala
+++ b/app/views/user/show/page.scala
@@ -31,7 +31,7 @@ object page:
         )
         .some,
       pageModule = pageModule(info),
-      moreJs = moreJs(info),
+      modules = esModules(info),
       moreCss = frag(
         cssTag("user.show"),
         isGranted(_.UserModView).option(cssTag("mod.user"))
@@ -60,7 +60,7 @@ object page:
     views.html.base.layout(
       title = s"${u.username} $filterName$pageName",
       pageModule = pageModule(info),
-      moreJs = moreJs(info, filters.current.name == "search"),
+      modules = esModules(info, filters.current.name == "search"),
       moreCss = frag(
         cssTag("user.show"),
         (filters.current.name == "search").option(cssTag("user.show.search")),
@@ -77,14 +77,12 @@ object page:
       )
     }
 
-  private def moreJs(info: UserInfo, withSearch: Boolean = false)(using PageContext) =
+  private def esModules(info: UserInfo, withSearch: Boolean = false)(using PageContext): EsmList =
     import play.api.libs.json.Json
-    frag(
-      infiniteScrollTag,
-      jsModuleInit("user", Json.obj("i18n" -> i18nJsObject(i18nKeys))),
-      withSearch.option(jsModule("gameSearch")),
-      isGranted(_.UserModView).option(jsModule("mod.user"))
-    )
+    infiniteScrollTag
+      ++ jsModuleInit("bits.user", Json.obj("i18n" -> i18nJsObject(i18nKeys)))
+      ++ withSearch.so(jsModule("bits.gameSearch"))
+      ++ isGranted(_.UserModView).so(jsModule("mod.user"))
 
   private def pageModule(info: UserInfo)(using PageContext) =
     info.ratingChart.map: rc =>
diff --git a/app/views/userTournament/bits.scala b/app/views/userTournament/bits.scala
index fae44e1a61c91..808f1352040c4 100644
--- a/app/views/userTournament/bits.scala
+++ b/app/views/userTournament/bits.scala
@@ -14,7 +14,7 @@ object bits:
       u,
       title = s"${u.username} best tournaments",
       path = "best",
-      moreJs = infiniteScrollTag
+      modules = infiniteScrollTag
     ):
       views.html.userTournament.list(u, "best", pager, "BEST")
 
@@ -23,17 +23,17 @@ object bits:
       u,
       title = s"${u.username} recent tournaments",
       path = "recent",
-      moreJs = infiniteScrollTag
+      modules = infiniteScrollTag
     ):
       views.html.userTournament.list(u, "recent", pager, pager.nbResults.toString)
 
-  def layout(u: User, title: String, path: String, moreJs: Frag = emptyFrag)(
+  def layout(u: User, title: String, path: String, modules: EsmList = Nil)(
       body: Frag
   )(using ctx: PageContext) =
     views.html.base.layout(
       title = title,
       moreCss = cssTag("user-tournament"),
-      moreJs = moreJs
+      modules = modules
     ):
       main(cls := "page-menu")(
         views.html.base.bits.pageMenuSubnav(
diff --git a/app/views/userTournament/created.scala b/app/views/userTournament/created.scala
index d922f6f4270c2..7c61e787e8170 100644
--- a/app/views/userTournament/created.scala
+++ b/app/views/userTournament/created.scala
@@ -16,7 +16,7 @@ object created:
       u = u,
       title = s"${u.username} created tournaments",
       path = path,
-      moreJs = infiniteScrollTag
+      modules = infiniteScrollTag
     ):
       if pager.nbResults == 0 then div(cls := "box-pad")(trans.site.nothingToSeeHere())
       else
diff --git a/app/views/video/layout.scala b/app/views/video/layout.scala
index ab95ee21599d8..c41ed11c7a3f8 100644
--- a/app/views/video/layout.scala
+++ b/app/views/video/layout.scala
@@ -15,7 +15,7 @@ object layout:
     views.html.base.layout(
       title = title,
       moreCss = cssTag("video"),
-      moreJs = infiniteScrollTag,
+      modules = infiniteScrollTag,
       wrapClass = "full-screen-force",
       openGraph = openGraph
     ):
diff --git a/conf/base.conf b/conf/base.conf
index c9d52bef8bceb..5b31afae8e13b 100644
--- a/conf/base.conf
+++ b/conf/base.conf
@@ -19,6 +19,7 @@ net {
   asset.base_url = "http://"${net.asset.domain}
   asset.base_url_internal = ${net.asset.base_url}
   asset.minified = false
+  asset.external_manifest = false # ignored on prod. true will cause dev builds to fetch manifest from asset.base_url_internal
   base_url = "http://"${net.domain}
   email = ""
   crawlable = false
diff --git a/modules/api/src/main/Cli.scala b/modules/api/src/main/Cli.scala
index f40b8e1fac9db..ce67b10b4720c 100644
--- a/modules/api/src/main/Cli.scala
+++ b/modules/api/src/main/Cli.scala
@@ -18,7 +18,8 @@ final private[api] class Cli(
     video: lila.video.Env,
     puzzle: lila.puzzle.Env,
     team: lila.team.Env,
-    notify: lila.notify.Env
+    notify: lila.notify.Env,
+    manifest: lila.web.AssetManifest
 )(using Executor)
     extends lila.common.Cli:
 
@@ -32,6 +33,7 @@ final private[api] class Cli(
   def process =
     case "uptime" :: Nil => fuccess(s"${lila.common.Uptime.seconds} seconds")
     case "change" :: ("asset" | "assets") :: "version" :: Nil =>
+      manifest.update()
       import lila.core.net.AssetVersion
       val current = AssetVersion.change()
       Bus.publish(AssetVersion.Changed(current), "assetVersion")
diff --git a/modules/api/src/main/Env.scala b/modules/api/src/main/Env.scala
index 755f88c2e7d2d..1ae50f6534399 100644
--- a/modules/api/src/main/Env.scala
+++ b/modules/api/src/main/Env.scala
@@ -60,7 +60,8 @@ final class Env(
     cmsApi: lila.cms.CmsApi,
     cacheApi: lila.memo.CacheApi,
     webConfig: lila.web.WebConfig,
-    realPlayerApi: lila.web.RealPlayerApi
+    realPlayerApi: lila.web.RealPlayerApi,
+    manifest: lila.web.AssetManifest
 )(using val mode: Mode, scheduler: Scheduler)(using
     Executor,
     ActorSystem,
diff --git a/modules/core/src/main/config.scala b/modules/core/src/main/config.scala
index b8667388b4aea..7a682919cbf00 100644
--- a/modules/core/src/main/config.scala
+++ b/modules/core/src/main/config.scala
@@ -65,6 +65,7 @@ object config:
       assetBaseUrl: AssetBaseUrl,
       assetBaseUrlInternal: AssetBaseUrlInternal,
       minifiedAssets: Boolean,
+      externalManifest: Boolean,
       stageBanner: Boolean,
       siteName: String,
       socketDomains: List[String],
diff --git a/modules/core/src/main/net.scala b/modules/core/src/main/net.scala
index 81c897a09bd73..289254b4e74ce 100644
--- a/modules/core/src/main/net.scala
+++ b/modules/core/src/main/net.scala
@@ -73,6 +73,7 @@ object net:
     def change() =
       stored = random
       current
+
     private def random = AssetVersion(SecureRandom.nextString(6))
     case class Changed(version: AssetVersion)
 
diff --git a/modules/pref/src/main/Pref.scala b/modules/pref/src/main/Pref.scala
index fa37b18453811..73a59a8117848 100644
--- a/modules/pref/src/main/Pref.scala
+++ b/modules/pref/src/main/Pref.scala
@@ -57,6 +57,11 @@ case class Pref(
   val themeColorLight = "#dbd7d1"
   val themeColorDark  = "#2e2a24"
   def themeColor      = if bg == Bg.LIGHT then themeColorLight else themeColorDark
+  def themeColorClass =
+    if bg == Bg.LIGHT then "light".some
+    else if bg == Bg.TRANSPARENT then "transp".some
+    else if bg == Bg.SYSTEM then none
+    else "dark".some
 
   def realSoundSet = SoundSet(soundSet)
 
diff --git a/modules/web/src/main/AssetManifest.scala b/modules/web/src/main/AssetManifest.scala
new file mode 100644
index 0000000000000..fd845e0ab55fc
--- /dev/null
+++ b/modules/web/src/main/AssetManifest.scala
@@ -0,0 +1,103 @@
+package lila.web
+
+import play.api.Environment
+import play.api.libs.ws.StandaloneWSClient
+import play.api.libs.ws.JsonBodyReadables.*
+import play.api.libs.json.{ JsObject, Json, JsValue, JsString }
+import java.nio.file.{ Files, Path, Paths }
+
+import lila.core.config.NetConfig
+
+case class SplitAsset(name: String, imports: List[String])
+case class AssetMaps(js: Map[String, SplitAsset], css: Map[String, String])
+
+final class AssetManifest(environment: Environment, net: NetConfig)(using ws: StandaloneWSClient)(using
+    Executor
+):
+
+  private var lastModified: Instant = java.time.Instant.MIN
+  private var maps: AssetMaps       = AssetMaps(Map.empty, Map.empty)
+  private val filename              = s"manifest.${if net.minifiedAssets then "prod" else "dev"}.json"
+  private val logger                = lila.log("assetManifest")
+
+  def js(key: String): Option[SplitAsset]    = maps.js.get(key)
+  def css(key: String): Option[String]       = maps.css.get(key)
+  def deps(keys: List[String]): List[String] = keys.flatMap { key => js(key).so(_.imports) }.distinct
+  def lastUpdate: Instant                    = lastModified
+
+  def update(): Unit =
+    if environment.mode.isProd || net.externalManifest then
+      fetchManifestJson(filename).foreach:
+        _.foreach: manifestJson =>
+          maps = readMaps(manifestJson)
+          lastModified = nowInstant
+    else
+      val pathname = environment.getFile(s"public/compiled/$filename").toPath
+      try
+        val current = Files.getLastModifiedTime(pathname).toInstant
+        if current.isAfter(lastModified) then
+          maps = readMaps(Json.parse(Files.newInputStream(pathname)))
+          lastModified = current
+      catch
+        case e: Throwable =>
+          logger.error(s"Error reading $pathname", e)
+
+  update()
+
+  private val keyRe = """^(?!common\.)(\S+)\.([A-Z0-9]{8})\.(?:js|css)""".r
+  private def keyOf(fullName: String): String =
+    fullName match
+      case keyRe(k, _) => k
+      case _           => fullName
+
+  private def closure(
+      name: String,
+      jsMap: Map[String, SplitAsset],
+      visited: Set[String] = Set.empty
+  ): List[String] =
+    val k = keyOf(name)
+    jsMap.get(k) match
+      case Some(asset) if !visited.contains(k) =>
+        asset.imports.flatMap: importName =>
+          importName :: closure(importName, jsMap, visited + name)
+      case _ => Nil
+
+  // throws an Exception if JsValue is not as expected
+  private def readMaps(manifest: JsValue): AssetMaps =
+    val js = (manifest \ "js")
+      .as[JsObject]
+      .value
+      .map { (k, value) =>
+        val name    = (value \ "hash").asOpt[String].fold(s"$k.js")(h => s"$k.$h.js")
+        val imports = (value \ "imports").asOpt[List[String]].getOrElse(Nil)
+        (k, SplitAsset(name, imports))
+      }
+      .toMap
+    AssetMaps(
+      js.map { (k, asset) =>
+        k -> (if asset.imports.nonEmpty then asset.copy(imports = closure(asset.name, js).distinct)
+              else asset)
+      },
+      (manifest \ "css")
+        .as[JsObject]
+        .value
+        .map { (k, asset) =>
+          val hash = (asset \ "hash").as[String]
+          (k, s"$k.$hash.css")
+        }
+        .toMap
+    )
+
+  private def fetchManifestJson(filename: String) =
+    val resource = s"${net.assetBaseUrlInternal}/assets/compiled/$filename"
+    ws.url(resource)
+      .get()
+      .map:
+        case res if res.status == 200 => res.body[JsValue].some
+        case res =>
+          logger.error(s"${res.status} fetching $resource")
+          none
+      .recoverWith:
+        case e: Exception =>
+          logger.error(s"fetching $resource", e)
+          fuccess(none)
diff --git a/modules/web/src/main/Env.scala b/modules/web/src/main/Env.scala
index a97034c6f84c7..a0dc29ec12809 100644
--- a/modules/web/src/main/Env.scala
+++ b/modules/web/src/main/Env.scala
@@ -2,20 +2,22 @@ package lila.web
 
 import play.api.libs.ws.StandaloneWSClient
 import com.softwaremill.macwire.*
-import lila.core.config.BaseUrl
-import play.api.Configuration
 
 @Module
 final class Env(
-    appConfig: Configuration,
+    appConfig: play.api.Configuration,
+    environment: play.api.Environment,
     cacheApi: lila.memo.CacheApi,
     settingStore: lila.memo.SettingStore.Builder,
     ws: StandaloneWSClient,
-    baseUrl: BaseUrl
+    net: lila.core.config.NetConfig
 )(using mode: play.api.Mode, scheduler: Scheduler)(using Executor):
 
   val config = WebConfig.loadFrom(appConfig)
   export config.{ pagerDuty as pagerDutyConfig }
+  export net.baseUrl
+
+  val manifest = wire[AssetManifest]
 
   val realPlayers = wire[RealPlayerApi]
 
diff --git a/package.json b/package.json
index 81bda7d067f9d..df44eff1d50f4 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,6 @@
     "metals": "tail -F .metals/metals.log | stdbuf -oL cut -c 21- | rg -v '(notification for request|handleCancellation)'",
     "serverlog": "pnpm journal & pnpm metals",
     "multilog": "pnpm serverlog & ui/build -r",
-    "minilog": "pnpm journal | grep -E -v fishnet & ui/build -cdrs"
+    "minilog": "pnpm journal | grep -E -v fishnet & ui/build -cdr"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 75b5533c5f08f..8ff52ad71420c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,16 +13,16 @@ importers:
         version: link:ui/@types/lichess
       '@types/node':
         specifier: ^20.11.28
-        version: 20.11.28
+        version: 20.12.2
       '@types/web':
         specifier: ^0.0.142
         version: 0.0.142
       '@typescript-eslint/eslint-plugin':
         specifier: ^7.2.0
-        version: 7.2.0(@typescript-eslint/parser@7.2.0)(eslint@8.57.0)(typescript@5.4.2)
+        version: 7.5.0(@typescript-eslint/parser@7.5.0)(eslint@8.57.0)(typescript@5.4.3)
       '@typescript-eslint/parser':
         specifier: ^7.2.0
-        version: 7.2.0(eslint@8.57.0)(typescript@5.4.2)
+        version: 7.5.0(eslint@8.57.0)(typescript@5.4.3)
       ab:
         specifier: github:lichess-org/ab-stub
         version: github.com/lichess-org/ab-stub/94236bf34dbc9c05daf50f4c9842d859b9142be0
@@ -43,7 +43,7 @@ importers:
         version: 3.0.2
       typescript:
         specifier: ^5.4.2
-        version: 5.4.2
+        version: 5.4.3
 
   bin:
     dependencies:
@@ -58,7 +58,7 @@ importers:
         version: 29.5.12
       jest:
         specifier: ^29.7.0
-        version: 29.7.0(@types/node@20.11.28)
+        version: 29.7.0(@types/node@20.12.2)
       jest-environment-jsdom:
         specifier: ^29.7.0
         version: 29.7.0
@@ -119,6 +119,69 @@ importers:
         specifier: workspace:*
         version: link:../tree
 
+  ui/bits:
+    dependencies:
+      '@fnando/sparkline':
+        specifier: ^0.3.10
+        version: 0.3.10
+      '@textcomplete/core':
+        specifier: ^0.1.13
+        version: 0.1.13
+      '@textcomplete/textarea':
+        specifier: ^0.1.13
+        version: 0.1.13(@textcomplete/core@0.1.13)
+      '@toast-ui/editor':
+        specifier: 3.1.7
+        version: 3.1.7
+      '@types/debounce-promise':
+        specifier: ^3.1.6
+        version: 3.1.9
+      '@types/fnando__sparkline':
+        specifier: ^0.3.7
+        version: 0.3.7
+      '@types/yaireo__tagify':
+        specifier: 4.17.5
+        version: 4.17.5
+      '@types/zxcvbn':
+        specifier: ^4.4.4
+        version: 4.4.4
+      '@yaireo/tagify':
+        specifier: 4.17.9
+        version: 4.17.9(prop-types@15.8.1)
+      chat:
+        specifier: workspace:*
+        version: link:../chat
+      chess:
+        specifier: workspace:*
+        version: link:../chess
+      common:
+        specifier: workspace:*
+        version: link:../common
+      cropperjs:
+        specifier: ^1.6.1
+        version: 1.6.1
+      debounce-promise:
+        specifier: ^3.1.2
+        version: 3.1.2
+      emoji-mart:
+        specifier: ^5.5.2
+        version: 5.5.2
+      flatpickr:
+        specifier: ^4.6.13
+        version: 4.6.13
+      lichess-pgn-viewer:
+        specifier: ^2.1.0
+        version: 2.1.0
+      prop-types:
+        specifier: ^15.8.1
+        version: 15.8.1
+      tablesort:
+        specifier: ^5.3.0
+        version: 5.3.0
+      zxcvbn:
+        specifier: ^4.4.2
+        version: 4.4.2
+
   ui/board:
     dependencies:
       common:
@@ -233,8 +296,8 @@ importers:
   ui/common:
     dependencies:
       lichess-pgn-viewer:
-        specifier: ^2.0.1
-        version: 2.0.1
+        specifier: ^2.1.0
+        version: 2.1.0
       snabbdom:
         specifier: 3.5.1
         version: 3.5.1
@@ -372,7 +435,7 @@ importers:
     dependencies:
       '@types/debounce-promise':
         specifier: ^3.1.6
-        version: 3.1.6
+        version: 3.1.9
       '@types/yaireo__tagify':
         specifier: 4.17.5
         version: 4.17.5
@@ -381,7 +444,7 @@ importers:
         version: 4.17.9(prop-types@15.8.1)
       apexcharts:
         specifier: ^3.36.3
-        version: 3.44.0
+        version: 3.48.0
       common:
         specifier: workspace:*
         version: link:../common
@@ -446,71 +509,8 @@ importers:
         specifier: ^3.1.2
         version: 3.1.2
       lichess-pgn-viewer:
-        specifier: ^2.0.1
-        version: 2.0.1
-
-  ui/pagelets:
-    dependencies:
-      '@fnando/sparkline':
-        specifier: ^0.3.10
-        version: 0.3.10
-      '@textcomplete/core':
-        specifier: ^0.1.13
-        version: 0.1.13
-      '@textcomplete/textarea':
-        specifier: ^0.1.13
-        version: 0.1.13(@textcomplete/core@0.1.13)
-      '@toast-ui/editor':
-        specifier: 3.1.7
-        version: 3.1.7
-      '@types/debounce-promise':
-        specifier: ^3.1.6
-        version: 3.1.6
-      '@types/fnando__sparkline':
-        specifier: ^0.3.7
-        version: 0.3.7
-      '@types/yaireo__tagify':
-        specifier: 4.17.5
-        version: 4.17.5
-      '@types/zxcvbn':
-        specifier: ^4.4.4
-        version: 4.4.4
-      '@yaireo/tagify':
-        specifier: 4.17.9
-        version: 4.17.9(prop-types@15.8.1)
-      chat:
-        specifier: workspace:*
-        version: link:../chat
-      chess:
-        specifier: workspace:*
-        version: link:../chess
-      common:
-        specifier: workspace:*
-        version: link:../common
-      cropperjs:
-        specifier: ^1.6.1
-        version: 1.6.1
-      debounce-promise:
-        specifier: ^3.1.2
-        version: 3.1.2
-      emoji-mart:
-        specifier: ^5.5.2
-        version: 5.5.2
-      flatpickr:
-        specifier: ^4.6.13
-        version: 4.6.13
-      lichess-pgn-viewer:
-        specifier: ^2.0.1
-        version: 2.0.1
-      prop-types:
-        specifier: ^15.8.1
-        version: 15.8.1
-      tablesort:
-        specifier: ^5.3.0
-        version: 5.3.0
-      zxcvbn:
-        specifier: ^4.4.2
-        version: 4.4.2
+        specifier: ^2.1.0
+        version: 2.1.0
 
   ui/palantir:
     dependencies:
@@ -659,8 +659,8 @@ importers:
         specifier: 0.5.6
         version: 0.5.6
       lichess-pgn-viewer:
-        specifier: 2.0.1
-        version: 2.0.1
+        specifier: ^2.1.0
+        version: 2.1.0
       tablesort:
         specifier: ^5.3.0
         version: 5.3.0
@@ -706,42 +706,24 @@ importers:
 
   ui/tournament:
     dependencies:
+      '@types/dragscroll':
+        specifier: 0.0.0
+        version: 0.0.0
       chat:
         specifier: workspace:*
         version: link:../chat
-      common:
-        specifier: workspace:*
-        version: link:../common
-      game:
-        specifier: workspace:*
-        version: link:../game
-      snabbdom:
-        specifier: 3.5.1
-        version: 3.5.1
-
-  ui/tournamentCalendar:
-    dependencies:
       common:
         specifier: workspace:*
         version: link:../common
       date-fns:
         specifier: 2.29.3
         version: 2.29.3
-      snabbdom:
-        specifier: 3.5.1
-        version: 3.5.1
-
-  ui/tournamentSchedule:
-    dependencies:
-      '@types/dragscroll':
-        specifier: 0.0.0
-        version: 0.0.0
-      common:
-        specifier: workspace:*
-        version: link:../common
       dragscroll:
         specifier: ^0.0.8
         version: 0.0.8
+      game:
+        specifier: workspace:*
+        version: link:../game
       snabbdom:
         specifier: 3.5.1
         version: 3.5.1
@@ -758,8 +740,8 @@ importers:
         specifier: workspace:*
         version: link:../common
       lichess-pgn-viewer:
-        specifier: ^2.0.1
-        version: 2.0.1
+        specifier: ^2.1.0
+        version: 2.1.0
 
   ui/voice:
     dependencies:
@@ -786,76 +768,40 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
-  /@ampproject/remapping@2.2.0:
-    resolution: {integrity: sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==}
+  /@ampproject/remapping@2.3.0:
+    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      '@jridgewell/gen-mapping': 0.1.1
-      '@jridgewell/trace-mapping': 0.3.19
-    dev: false
-
-  /@babel/code-frame@7.22.10:
-    resolution: {integrity: sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/highlight': 7.22.10
-      chalk: 2.4.2
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.25
     dev: false
 
-  /@babel/code-frame@7.23.5:
-    resolution: {integrity: sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==}
+  /@babel/code-frame@7.24.2:
+    resolution: {integrity: sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/highlight': 7.23.4
-      chalk: 2.4.2
-    dev: false
-
-  /@babel/compat-data@7.22.9:
-    resolution: {integrity: sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ==}
-    engines: {node: '>=6.9.0'}
-    dev: false
-
-  /@babel/compat-data@7.23.5:
-    resolution: {integrity: sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==}
-    engines: {node: '>=6.9.0'}
+      '@babel/highlight': 7.24.2
+      picocolors: 1.0.0
     dev: false
 
-  /@babel/core@7.22.10:
-    resolution: {integrity: sha512-fTmqbbUBAwCcre6zPzNngvsI0aNrPZe77AeqvDxWM9Nm+04RrJ3CAmGHA9f7lJQY6ZMhRztNemy4uslDxTX4Qw==}
+  /@babel/compat-data@7.24.1:
+    resolution: {integrity: sha512-Pc65opHDliVpRHuKfzI+gSA4zcgr65O4cl64fFJIWEEh8JoHIHh0Oez1Eo8Arz8zq/JhgKodQaxEwUPRtZylVA==}
     engines: {node: '>=6.9.0'}
-    dependencies:
-      '@ampproject/remapping': 2.2.0
-      '@babel/code-frame': 7.22.10
-      '@babel/generator': 7.22.10
-      '@babel/helper-compilation-targets': 7.22.10
-      '@babel/helper-module-transforms': 7.22.9(@babel/core@7.22.10)
-      '@babel/helpers': 7.22.10
-      '@babel/parser': 7.22.10
-      '@babel/template': 7.22.5
-      '@babel/traverse': 7.22.10
-      '@babel/types': 7.22.10
-      convert-source-map: 1.9.0
-      debug: 4.3.4
-      gensync: 1.0.0-beta.2
-      json5: 2.2.2
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
     dev: false
 
-  /@babel/core@7.24.0:
-    resolution: {integrity: sha512-fQfkg0Gjkza3nf0c7/w6Xf34BW4YvzNfACRLmmb7XRLa6XHdR+K9AlJlxneFfWYf6uhOzuzZVTjF/8KfndZANw==}
+  /@babel/core@7.24.3:
+    resolution: {integrity: sha512-5FcvN1JHw2sHJChotgx8Ek0lyuh4kCKelgMTTqhYJJtloNvUfpAFMeNQUtdlIaktwrSV9LtCdqwk48wL2wBacQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@ampproject/remapping': 2.2.0
-      '@babel/code-frame': 7.23.5
-      '@babel/generator': 7.23.6
+      '@ampproject/remapping': 2.3.0
+      '@babel/code-frame': 7.24.2
+      '@babel/generator': 7.24.1
       '@babel/helper-compilation-targets': 7.23.6
-      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.0)
-      '@babel/helpers': 7.24.0
-      '@babel/parser': 7.24.0
+      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.3)
+      '@babel/helpers': 7.24.1
+      '@babel/parser': 7.24.1
       '@babel/template': 7.24.0
-      '@babel/traverse': 7.24.0
+      '@babel/traverse': 7.24.1
       '@babel/types': 7.24.0
       convert-source-map: 2.0.0
       debug: 4.3.4
@@ -866,42 +812,21 @@ packages:
       - supports-color
     dev: false
 
-  /@babel/generator@7.22.10:
-    resolution: {integrity: sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.22.10
-      '@jridgewell/gen-mapping': 0.3.2
-      '@jridgewell/trace-mapping': 0.3.19
-      jsesc: 2.5.2
-    dev: false
-
-  /@babel/generator@7.23.6:
-    resolution: {integrity: sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==}
+  /@babel/generator@7.24.1:
+    resolution: {integrity: sha512-DfCRfZsBcrPEHUfuBMgbJ1Ut01Y/itOs+hY2nFLgqsqXd52/iSiVq5TITtUasIUgm+IIKdY2/1I7auiQOEeC9A==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.24.0
-      '@jridgewell/gen-mapping': 0.3.2
-      '@jridgewell/trace-mapping': 0.3.19
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.25
       jsesc: 2.5.2
     dev: false
 
-  /@babel/helper-compilation-targets@7.22.10:
-    resolution: {integrity: sha512-JMSwHD4J7SLod0idLq5PKgI+6g/hLD/iuWBq08ZX49xE14VpVEojJ5rHWptpirV2j020MvypRLAXAO50igCJ5Q==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/compat-data': 7.22.9
-      '@babel/helper-validator-option': 7.22.5
-      browserslist: 4.21.10
-      lru-cache: 5.1.1
-      semver: 6.3.1
-    dev: false
-
   /@babel/helper-compilation-targets@7.23.6:
     resolution: {integrity: sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/compat-data': 7.23.5
+      '@babel/compat-data': 7.24.1
       '@babel/helper-validator-option': 7.23.5
       browserslist: 4.23.0
       lru-cache: 5.1.1
@@ -913,19 +838,6 @@ packages:
     engines: {node: '>=6.9.0'}
     dev: false
 
-  /@babel/helper-environment-visitor@7.22.5:
-    resolution: {integrity: sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==}
-    engines: {node: '>=6.9.0'}
-    dev: false
-
-  /@babel/helper-function-name@7.22.5:
-    resolution: {integrity: sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/template': 7.22.5
-      '@babel/types': 7.22.10
-    dev: false
-
   /@babel/helper-function-name@7.23.0:
     resolution: {integrity: sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==}
     engines: {node: '>=6.9.0'}
@@ -937,59 +849,33 @@ packages:
   /@babel/helper-hoist-variables@7.22.5:
     resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==}
     engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/types': 7.22.10
-    dev: false
-
-  /@babel/helper-module-imports@7.22.15:
-    resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==}
-    engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.24.0
     dev: false
 
-  /@babel/helper-module-imports@7.22.5:
-    resolution: {integrity: sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==}
+  /@babel/helper-module-imports@7.24.3:
+    resolution: {integrity: sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.10
-    dev: false
-
-  /@babel/helper-module-transforms@7.22.9(@babel/core@7.22.10):
-    resolution: {integrity: sha512-t+WA2Xn5K+rTeGtC8jCsdAH52bjggG5TKRuRrAGNM/mjIbO4GxvlLMFOEz9wXY5I2XQ60PMFsAG2WIcG82dQMQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-environment-visitor': 7.22.5
-      '@babel/helper-module-imports': 7.22.5
-      '@babel/helper-simple-access': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/helper-validator-identifier': 7.22.5
+      '@babel/types': 7.24.0
     dev: false
 
-  /@babel/helper-module-transforms@7.23.3(@babel/core@7.24.0):
+  /@babel/helper-module-transforms@7.23.3(@babel/core@7.24.3):
     resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.24.0
+      '@babel/core': 7.24.3
       '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-module-imports': 7.22.15
+      '@babel/helper-module-imports': 7.24.3
       '@babel/helper-simple-access': 7.22.5
       '@babel/helper-split-export-declaration': 7.22.6
       '@babel/helper-validator-identifier': 7.22.20
     dev: false
 
-  /@babel/helper-plugin-utils@7.20.2:
-    resolution: {integrity: sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==}
-    engines: {node: '>=6.9.0'}
-    dev: false
-
-  /@babel/helper-plugin-utils@7.22.5:
-    resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==}
+  /@babel/helper-plugin-utils@7.24.0:
+    resolution: {integrity: sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==}
     engines: {node: '>=6.9.0'}
     dev: false
 
@@ -997,23 +883,18 @@ packages:
     resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.10
+      '@babel/types': 7.24.0
     dev: false
 
   /@babel/helper-split-export-declaration@7.22.6:
     resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.22.10
-    dev: false
-
-  /@babel/helper-string-parser@7.22.5:
-    resolution: {integrity: sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==}
-    engines: {node: '>=6.9.0'}
+      '@babel/types': 7.24.0
     dev: false
 
-  /@babel/helper-string-parser@7.23.4:
-    resolution: {integrity: sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==}
+  /@babel/helper-string-parser@7.24.1:
+    resolution: {integrity: sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==}
     engines: {node: '>=6.9.0'}
     dev: false
 
@@ -1022,253 +903,189 @@ packages:
     engines: {node: '>=6.9.0'}
     dev: false
 
-  /@babel/helper-validator-identifier@7.22.5:
-    resolution: {integrity: sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==}
-    engines: {node: '>=6.9.0'}
-    dev: false
-
-  /@babel/helper-validator-option@7.22.5:
-    resolution: {integrity: sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==}
-    engines: {node: '>=6.9.0'}
-    dev: false
-
   /@babel/helper-validator-option@7.23.5:
     resolution: {integrity: sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==}
     engines: {node: '>=6.9.0'}
     dev: false
 
-  /@babel/helpers@7.22.10:
-    resolution: {integrity: sha512-a41J4NW8HyZa1I1vAndrraTlPZ/eZoga2ZgS7fEr0tZJGVU4xqdE80CEm0CcNjha5EZ8fTBYLKHF0kqDUuAwQw==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/template': 7.22.5
-      '@babel/traverse': 7.22.10
-      '@babel/types': 7.22.10
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@babel/helpers@7.24.0:
-    resolution: {integrity: sha512-ulDZdc0Aj5uLc5nETsa7EPx2L7rM0YJM8r7ck7U73AXi7qOV44IHHRAYZHY6iU1rr3C5N4NtTmMRUJP6kwCWeA==}
+  /@babel/helpers@7.24.1:
+    resolution: {integrity: sha512-BpU09QqEe6ZCHuIHFphEFgvNSrubve1FtyMton26ekZ85gRGi6LrTF7zArARp2YvyFxloeiRmtSCq5sjh1WqIg==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/template': 7.24.0
-      '@babel/traverse': 7.24.0
+      '@babel/traverse': 7.24.1
       '@babel/types': 7.24.0
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /@babel/highlight@7.22.10:
-    resolution: {integrity: sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/helper-validator-identifier': 7.22.5
-      chalk: 2.4.2
-      js-tokens: 4.0.0
-    dev: false
-
-  /@babel/highlight@7.23.4:
-    resolution: {integrity: sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==}
+  /@babel/highlight@7.24.2:
+    resolution: {integrity: sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/helper-validator-identifier': 7.22.20
       chalk: 2.4.2
       js-tokens: 4.0.0
+      picocolors: 1.0.0
     dev: false
 
-  /@babel/parser@7.22.10:
-    resolution: {integrity: sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-    dependencies:
-      '@babel/types': 7.22.10
-    dev: false
-
-  /@babel/parser@7.24.0:
-    resolution: {integrity: sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==}
+  /@babel/parser@7.24.1:
+    resolution: {integrity: sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==}
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
-      '@babel/types': 7.22.10
+      '@babel/types': 7.24.0
     dev: false
 
-  /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.22.10):
+  /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.24.3):
     resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.24.3
+      '@babel/helper-plugin-utils': 7.24.0
     dev: false
 
-  /@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.22.10):
+  /@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.24.3):
     resolution: {integrity: sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.24.3
+      '@babel/helper-plugin-utils': 7.24.0
     dev: false
 
-  /@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.22.10):
+  /@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.24.3):
     resolution: {integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.24.3
+      '@babel/helper-plugin-utils': 7.24.0
     dev: false
 
-  /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.22.10):
+  /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.24.3):
     resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.24.3
+      '@babel/helper-plugin-utils': 7.24.0
     dev: false
 
-  /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.22.10):
+  /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.24.3):
     resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.24.3
+      '@babel/helper-plugin-utils': 7.24.0
     dev: false
 
-  /@babel/plugin-syntax-jsx@7.18.6(@babel/core@7.22.10):
-    resolution: {integrity: sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==}
+  /@babel/plugin-syntax-jsx@7.24.1(@babel/core@7.24.3):
+    resolution: {integrity: sha512-2eCtxZXf+kbkMIsXS4poTvT4Yu5rXiRa+9xGVT56raghjmBTKMpFNc9R4IDiB4emao9eO22Ox7CxuJG7BgExqA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.20.2
+      '@babel/core': 7.24.3
+      '@babel/helper-plugin-utils': 7.24.0
     dev: false
 
-  /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.22.10):
+  /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.24.3):
     resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.24.3
+      '@babel/helper-plugin-utils': 7.24.0
     dev: false
 
-  /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.22.10):
+  /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.24.3):
     resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.24.3
+      '@babel/helper-plugin-utils': 7.24.0
     dev: false
 
-  /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.22.10):
+  /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.24.3):
     resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.24.3
+      '@babel/helper-plugin-utils': 7.24.0
     dev: false
 
-  /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.22.10):
+  /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.24.3):
     resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.24.3
+      '@babel/helper-plugin-utils': 7.24.0
     dev: false
 
-  /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.22.10):
+  /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.24.3):
     resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.24.3
+      '@babel/helper-plugin-utils': 7.24.0
     dev: false
 
-  /@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.22.10):
+  /@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.24.3):
     resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.24.3
+      '@babel/helper-plugin-utils': 7.24.0
     dev: false
 
-  /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.22.10):
+  /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.24.3):
     resolution: {integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/core': 7.24.3
+      '@babel/helper-plugin-utils': 7.24.0
     dev: false
 
-  /@babel/plugin-syntax-typescript@7.20.0(@babel/core@7.22.10):
-    resolution: {integrity: sha512-rd9TkG+u1CExzS4SM1BlMEhMXwFLKVjOAFFCDx9PbX5ycJWDoWMcwdJH9RhkPu1dOgn5TrxLot/Gx6lWFuAUNQ==}
+  /@babel/plugin-syntax-typescript@7.24.1(@babel/core@7.24.3):
+    resolution: {integrity: sha512-Yhnmvy5HZEnHUty6i++gcfH1/l68AHnItFHnaCv6hn9dNh0hQvvQJsxpi4BMBFN5DLeHBuucT/0DgzXif/OyRw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/core': 7.22.10
-      '@babel/helper-plugin-utils': 7.20.2
-    dev: false
-
-  /@babel/template@7.22.5:
-    resolution: {integrity: sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/code-frame': 7.22.10
-      '@babel/parser': 7.22.10
-      '@babel/types': 7.22.10
+      '@babel/core': 7.24.3
+      '@babel/helper-plugin-utils': 7.24.0
     dev: false
 
   /@babel/template@7.24.0:
     resolution: {integrity: sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/code-frame': 7.23.5
-      '@babel/parser': 7.24.0
+      '@babel/code-frame': 7.24.2
+      '@babel/parser': 7.24.1
       '@babel/types': 7.24.0
     dev: false
 
-  /@babel/traverse@7.22.10:
-    resolution: {integrity: sha512-Q/urqV4pRByiNNpb/f5OSv28ZlGJiFiiTh+GAHktbIrkPhPbl90+uW6SmpoLyZqutrg9AEaEf3Q/ZBRHBXgxig==}
+  /@babel/traverse@7.24.1:
+    resolution: {integrity: sha512-xuU6o9m68KeqZbQuDt2TcKSxUw/mrsvavlEqQ1leZ/B+C9tk6E4sRWy97WaXgvq5E+nU3cXMxv3WKOCanVMCmQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/code-frame': 7.22.10
-      '@babel/generator': 7.22.10
-      '@babel/helper-environment-visitor': 7.22.5
-      '@babel/helper-function-name': 7.22.5
-      '@babel/helper-hoist-variables': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/parser': 7.22.10
-      '@babel/types': 7.22.10
-      debug: 4.3.4
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /@babel/traverse@7.24.0:
-    resolution: {integrity: sha512-HfuJlI8qq3dEDmNU5ChzzpZRWq+oxCZQyMzIMEqLho+AQnhMnKQUzH6ydo3RBl/YjPCuk68Y6s0Gx0AeyULiWw==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/code-frame': 7.23.5
-      '@babel/generator': 7.23.6
+      '@babel/code-frame': 7.24.2
+      '@babel/generator': 7.24.1
       '@babel/helper-environment-visitor': 7.22.20
       '@babel/helper-function-name': 7.23.0
       '@babel/helper-hoist-variables': 7.22.5
       '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/parser': 7.24.0
+      '@babel/parser': 7.24.1
       '@babel/types': 7.24.0
       debug: 4.3.4
       globals: 11.12.0
@@ -1276,20 +1093,11 @@ packages:
       - supports-color
     dev: false
 
-  /@babel/types@7.22.10:
-    resolution: {integrity: sha512-obaoigiLrlDZ7TUQln/8m4mSqIW2QFeOrCQc9r+xsaHGNoplVNYlRVpsfE8Vj35GEm2ZH4ZhrNYogs/3fj85kg==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/helper-string-parser': 7.22.5
-      '@babel/helper-validator-identifier': 7.22.5
-      to-fast-properties: 2.0.0
-    dev: false
-
   /@babel/types@7.24.0:
     resolution: {integrity: sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/helper-string-parser': 7.23.4
+      '@babel/helper-string-parser': 7.24.1
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
     dev: false
@@ -1320,8 +1128,8 @@ packages:
       eslint-visitor-keys: 3.4.3
     dev: false
 
-  /@eslint-community/regexpp@4.6.2:
-    resolution: {integrity: sha512-pPTNuaAG3QMH+buKyBIGJs3g/S5y0caxw0ygM3YyE6yJFySwiGGSzA+mM3KJ8QQvzeLh3blwgSonkFjgQdxzMw==}
+  /@eslint-community/regexpp@4.10.0:
+    resolution: {integrity: sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
     dev: false
 
@@ -1332,8 +1140,8 @@ packages:
       ajv: 6.12.6
       debug: 4.3.4
       espree: 9.6.1
-      globals: 13.20.0
-      ignore: 5.2.4
+      globals: 13.24.0
+      ignore: 5.3.1
       import-fresh: 3.3.0
       js-yaml: 4.1.0
       minimatch: 3.1.2
@@ -1347,21 +1155,21 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: false
 
-  /@floating-ui/core@1.5.2:
-    resolution: {integrity: sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==}
+  /@floating-ui/core@1.6.0:
+    resolution: {integrity: sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==}
     dependencies:
-      '@floating-ui/utils': 0.1.6
+      '@floating-ui/utils': 0.2.1
     dev: false
 
-  /@floating-ui/dom@1.5.3:
-    resolution: {integrity: sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==}
+  /@floating-ui/dom@1.6.3:
+    resolution: {integrity: sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==}
     dependencies:
-      '@floating-ui/core': 1.5.2
-      '@floating-ui/utils': 0.1.6
+      '@floating-ui/core': 1.6.0
+      '@floating-ui/utils': 0.2.1
     dev: false
 
-  /@floating-ui/utils@0.1.6:
-    resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==}
+  /@floating-ui/utils@0.2.1:
+    resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==}
     dev: false
 
   /@fnando/sparkline@0.3.10:
@@ -1372,7 +1180,7 @@ packages:
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}
     dependencies:
-      '@humanwhocodes/object-schema': 2.0.2
+      '@humanwhocodes/object-schema': 2.0.3
       debug: 4.3.4
       minimatch: 3.1.2
     transitivePeerDependencies:
@@ -1384,8 +1192,8 @@ packages:
     engines: {node: '>=12.22'}
     dev: false
 
-  /@humanwhocodes/object-schema@2.0.2:
-    resolution: {integrity: sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==}
+  /@humanwhocodes/object-schema@2.0.3:
+    resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
     dev: false
 
   /@istanbuljs/load-nyc-config@1.1.0:
@@ -1409,7 +1217,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/types': 29.6.3
-      '@types/node': 20.11.28
+      '@types/node': 20.12.2
       chalk: 4.1.2
       jest-message-util: 29.7.0
       jest-util: 29.7.0
@@ -1430,14 +1238,14 @@ packages:
       '@jest/test-result': 29.7.0
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 20.11.28
+      '@types/node': 20.12.2
       ansi-escapes: 4.3.2
       chalk: 4.1.2
-      ci-info: 3.7.0
+      ci-info: 3.9.0
       exit: 0.1.2
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
       jest-changed-files: 29.7.0
-      jest-config: 29.7.0(@types/node@20.11.28)
+      jest-config: 29.7.0(@types/node@20.12.2)
       jest-haste-map: 29.7.0
       jest-message-util: 29.7.0
       jest-regex-util: 29.6.3
@@ -1465,7 +1273,7 @@ packages:
     dependencies:
       '@jest/fake-timers': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 20.11.28
+      '@types/node': 20.12.2
       jest-mock: 29.7.0
     dev: false
 
@@ -1492,7 +1300,7 @@ packages:
     dependencies:
       '@jest/types': 29.6.3
       '@sinonjs/fake-timers': 10.3.0
-      '@types/node': 20.11.28
+      '@types/node': 20.12.2
       jest-message-util: 29.7.0
       jest-mock: 29.7.0
       jest-util: 29.7.0
@@ -1524,25 +1332,25 @@ packages:
       '@jest/test-result': 29.7.0
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
-      '@jridgewell/trace-mapping': 0.3.19
-      '@types/node': 20.11.28
+      '@jridgewell/trace-mapping': 0.3.25
+      '@types/node': 20.12.2
       chalk: 4.1.2
-      collect-v8-coverage: 1.0.1
+      collect-v8-coverage: 1.0.2
       exit: 0.1.2
       glob: 7.2.3
-      graceful-fs: 4.2.10
-      istanbul-lib-coverage: 3.2.0
+      graceful-fs: 4.2.11
+      istanbul-lib-coverage: 3.2.2
       istanbul-lib-instrument: 6.0.2
-      istanbul-lib-report: 3.0.0
+      istanbul-lib-report: 3.0.1
       istanbul-lib-source-maps: 4.0.1
-      istanbul-reports: 3.1.5
+      istanbul-reports: 3.1.7
       jest-message-util: 29.7.0
       jest-util: 29.7.0
       jest-worker: 29.7.0
       slash: 3.0.0
       string-length: 4.0.2
       strip-ansi: 6.0.1
-      v8-to-istanbul: 9.0.1
+      v8-to-istanbul: 9.2.0
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -1558,9 +1366,9 @@ packages:
     resolution: {integrity: sha512-MHjT95QuipcPrpLM+8JMSzFx6eHp5Bm+4XeFDJlwsvVBjmKNiIAvasGK2fxz2WbGRlnvqehFbh07MMa7n3YJnw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.19
+      '@jridgewell/trace-mapping': 0.3.25
       callsites: 3.1.0
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
     dev: false
 
   /@jest/test-result@29.7.0:
@@ -1569,8 +1377,8 @@ packages:
     dependencies:
       '@jest/console': 29.7.0
       '@jest/types': 29.6.3
-      '@types/istanbul-lib-coverage': 2.0.4
-      collect-v8-coverage: 1.0.1
+      '@types/istanbul-lib-coverage': 2.0.6
+      collect-v8-coverage: 1.0.2
     dev: false
 
   /@jest/test-sequencer@29.7.0:
@@ -1578,7 +1386,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/test-result': 29.7.0
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
       jest-haste-map: 29.7.0
       slash: 3.0.0
     dev: false
@@ -1587,19 +1395,19 @@ packages:
     resolution: {integrity: sha512-ok/BTPFzFKVMwO5eOHRrvnBVHdRy9IrsrW1GpMaQ9MCnilNLXQKmAX8s1YXDFaai9xJpac2ySzV0YeRRECr2Vw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      '@babel/core': 7.22.10
+      '@babel/core': 7.24.3
       '@jest/types': 29.6.3
-      '@jridgewell/trace-mapping': 0.3.19
+      '@jridgewell/trace-mapping': 0.3.25
       babel-plugin-istanbul: 6.1.1
       chalk: 4.1.2
       convert-source-map: 2.0.0
       fast-json-stable-stringify: 2.1.0
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
       jest-haste-map: 29.7.0
       jest-regex-util: 29.6.3
       jest-util: 29.7.0
       micromatch: 4.0.5
-      pirates: 4.0.5
+      pirates: 4.0.6
       slash: 3.0.0
       write-file-atomic: 4.0.2
     transitivePeerDependencies:
@@ -1611,49 +1419,41 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/schemas': 29.6.3
-      '@types/istanbul-lib-coverage': 2.0.4
-      '@types/istanbul-reports': 3.0.1
-      '@types/node': 20.11.28
-      '@types/yargs': 17.0.17
+      '@types/istanbul-lib-coverage': 2.0.6
+      '@types/istanbul-reports': 3.0.4
+      '@types/node': 20.12.2
+      '@types/yargs': 17.0.32
       chalk: 4.1.2
     dev: false
 
-  /@jridgewell/gen-mapping@0.1.1:
-    resolution: {integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==}
+  /@jridgewell/gen-mapping@0.3.5:
+    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
     engines: {node: '>=6.0.0'}
     dependencies:
-      '@jridgewell/set-array': 1.1.2
-      '@jridgewell/sourcemap-codec': 1.4.14
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/trace-mapping': 0.3.25
     dev: false
 
-  /@jridgewell/gen-mapping@0.3.2:
-    resolution: {integrity: sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==}
+  /@jridgewell/resolve-uri@3.1.2:
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
-    dependencies:
-      '@jridgewell/set-array': 1.1.2
-      '@jridgewell/sourcemap-codec': 1.4.14
-      '@jridgewell/trace-mapping': 0.3.19
     dev: false
 
-  /@jridgewell/resolve-uri@3.1.0:
-    resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==}
+  /@jridgewell/set-array@1.2.1:
+    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
     engines: {node: '>=6.0.0'}
     dev: false
 
-  /@jridgewell/set-array@1.1.2:
-    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
-    engines: {node: '>=6.0.0'}
+  /@jridgewell/sourcemap-codec@1.4.15:
+    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
     dev: false
 
-  /@jridgewell/sourcemap-codec@1.4.14:
-    resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
-    dev: false
-
-  /@jridgewell/trace-mapping@0.3.19:
-    resolution: {integrity: sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==}
+  /@jridgewell/trace-mapping@0.3.25:
+    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
     dependencies:
-      '@jridgewell/resolve-uri': 3.1.0
-      '@jridgewell/sourcemap-codec': 1.4.14
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.4.15
     dev: false
 
   /@juggle/resize-observer@3.4.0:
@@ -1682,15 +1482,15 @@ packages:
     engines: {node: '>= 8'}
     dependencies:
       '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.15.0
+      fastq: 1.17.1
     dev: false
 
   /@sinclair/typebox@0.27.8:
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
     dev: false
 
-  /@sinonjs/commons@3.0.0:
-    resolution: {integrity: sha512-jXBtWAF4vmdNmZgD5FoKsVLv3rPgDnLgPbU84LIJ3otV44vJlDRokVng5v8NFJdCf/da9legHcKaRuZs4L7faA==}
+  /@sinonjs/commons@3.0.1:
+    resolution: {integrity: sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==}
     dependencies:
       type-detect: 4.0.8
     dev: false
@@ -1698,7 +1498,7 @@ packages:
   /@sinonjs/fake-timers@10.3.0:
     resolution: {integrity: sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==}
     dependencies:
-      '@sinonjs/commons': 3.0.0
+      '@sinonjs/commons': 3.0.1
     dev: false
 
   /@textcomplete/core@0.1.13:
@@ -1725,14 +1525,14 @@ packages:
   /@toast-ui/editor@3.1.7:
     resolution: {integrity: sha512-SEfahMrrphveuGhOQyYX3UwjJWjCRnnL6pVPc67uVDBS/JsOESJDG2kcfW9MHJhHnOv6m6WV1jRQW9kPatgumw==}
     dependencies:
-      dompurify: 2.4.1
-      prosemirror-commands: 1.1.12
-      prosemirror-history: 1.1.3
-      prosemirror-inputrules: 1.1.3
-      prosemirror-keymap: 1.1.5
-      prosemirror-model: 1.18.3
-      prosemirror-state: 1.4.2
-      prosemirror-view: 1.29.1
+      dompurify: 2.4.9
+      prosemirror-commands: 1.5.2
+      prosemirror-history: 1.4.0
+      prosemirror-inputrules: 1.4.0
+      prosemirror-keymap: 1.2.2
+      prosemirror-model: 1.19.4
+      prosemirror-state: 1.4.3
+      prosemirror-view: 1.33.3
     dev: false
 
   /@tootallnate/once@2.0.0:
@@ -1744,43 +1544,39 @@ packages:
     resolution: {integrity: sha512-WR1XcwT2LhCaUiKDDgHdTjrVjoBZnTz6FhszeIKgY9i2UYfIRKtnNvqToUDnbCPXBpVuu4Qo5+mMJt+wDphRew==}
     dev: false
 
-  /@types/babel__core@7.1.20:
-    resolution: {integrity: sha512-PVb6Bg2QuscZ30FvOU7z4guG6c926D9YRvOxEaelzndpMsvP+YM74Q/dAFASpg2l6+XLalxSGxcq/lrgYWZtyQ==}
+  /@types/babel__core@7.20.5:
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
     dependencies:
-      '@babel/parser': 7.22.10
-      '@babel/types': 7.22.10
-      '@types/babel__generator': 7.6.4
-      '@types/babel__template': 7.4.1
-      '@types/babel__traverse': 7.18.3
+      '@babel/parser': 7.24.1
+      '@babel/types': 7.24.0
+      '@types/babel__generator': 7.6.8
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.20.5
     dev: false
 
-  /@types/babel__generator@7.6.4:
-    resolution: {integrity: sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==}
+  /@types/babel__generator@7.6.8:
+    resolution: {integrity: sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==}
     dependencies:
-      '@babel/types': 7.22.10
+      '@babel/types': 7.24.0
     dev: false
 
-  /@types/babel__template@7.4.1:
-    resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==}
+  /@types/babel__template@7.4.4:
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
     dependencies:
-      '@babel/parser': 7.22.10
-      '@babel/types': 7.22.10
+      '@babel/parser': 7.24.1
+      '@babel/types': 7.24.0
     dev: false
 
-  /@types/babel__traverse@7.18.3:
-    resolution: {integrity: sha512-1kbcJ40lLB7MHsj39U4Sh1uTd2E7rLEa79kmDpI6cy+XiXsteB3POdQomoq4FxszMrO3ZYchkhYJw7A2862b3w==}
+  /@types/babel__traverse@7.20.5:
+    resolution: {integrity: sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==}
     dependencies:
-      '@babel/types': 7.22.10
+      '@babel/types': 7.24.0
     dev: false
 
   /@types/chess.js@0.10.1:
     resolution: {integrity: sha512-cuFMyrUYOWpKm5PRayvk22jLV3BOuWs7iJ7Q4PZJXMWoF7uhjWEojMS4GPk441gn4Ki9BHxbKsll7mrwJ3KT3g==}
     dev: false
 
-  /@types/debounce-promise@3.1.6:
-    resolution: {integrity: sha512-DowqK95aku+OxMCeG2EQSeXeGeE8OCwLpMsUfIbP7hMF8Otj8eQXnzpwdtIKV+UqQBtkMcF6vbi4Otbh8P/wmg==}
-    dev: false
-
   /@types/debounce-promise@3.1.9:
     resolution: {integrity: sha512-awNxydYSU+E2vL7EiOAMtiSOfL5gUM5X4YSE2A92qpxDJQ/rXz6oMPYBFDcDywlUmvIDI6zsqgq17cGm5CITQw==}
     dev: false
@@ -1793,26 +1589,26 @@ packages:
     resolution: {integrity: sha512-irYrS2clNGbnKBBIBAulPH6hDZ/HlBkNsDbYPfO8B2obcxtC9UzKFS5IBSzrUtfKbwf8U01xHj+5iEJ7TtY04Q==}
     dev: false
 
-  /@types/graceful-fs@4.1.5:
-    resolution: {integrity: sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==}
+  /@types/graceful-fs@4.1.9:
+    resolution: {integrity: sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==}
     dependencies:
-      '@types/node': 20.11.28
+      '@types/node': 20.12.2
     dev: false
 
-  /@types/istanbul-lib-coverage@2.0.4:
-    resolution: {integrity: sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==}
+  /@types/istanbul-lib-coverage@2.0.6:
+    resolution: {integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==}
     dev: false
 
-  /@types/istanbul-lib-report@3.0.0:
-    resolution: {integrity: sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==}
+  /@types/istanbul-lib-report@3.0.3:
+    resolution: {integrity: sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==}
     dependencies:
-      '@types/istanbul-lib-coverage': 2.0.4
+      '@types/istanbul-lib-coverage': 2.0.6
     dev: false
 
-  /@types/istanbul-reports@3.0.1:
-    resolution: {integrity: sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==}
+  /@types/istanbul-reports@3.0.4:
+    resolution: {integrity: sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==}
     dependencies:
-      '@types/istanbul-lib-report': 3.0.0
+      '@types/istanbul-lib-report': 3.0.3
     dev: false
 
   /@types/jest@29.5.12:
@@ -1825,53 +1621,42 @@ packages:
   /@types/jsdom@20.0.1:
     resolution: {integrity: sha512-d0r18sZPmMQr1eG35u12FZfhIXNrnsPU/g5wvRKCUf/tOGilKKwYMYGqh33BNR6ba+2gkHw1EUiHoN3mn7E5IQ==}
     dependencies:
-      '@types/node': 20.11.28
-      '@types/tough-cookie': 4.0.2
+      '@types/node': 20.12.2
+      '@types/tough-cookie': 4.0.5
       parse5: 7.1.2
     dev: false
 
-  /@types/json-schema@7.0.12:
-    resolution: {integrity: sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==}
-    dev: false
-
-  /@types/node@20.11.28:
-    resolution: {integrity: sha512-M/GPWVS2wLkSkNHVeLkrF2fD5Lx5UC4PxA0uZcKc6QqbIQUJyW1jVjueJYi1z8n0I5PxYrtpnPnWglE+y9A0KA==}
-    dependencies:
-      undici-types: 5.26.5
+  /@types/json-schema@7.0.15:
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
     dev: false
 
-  /@types/node@20.9.1:
-    resolution: {integrity: sha512-HhmzZh5LSJNS5O8jQKpJ/3ZcrrlG6L70hpGqMIAoM9YVD0YBRNWYsfwcXq8VnSjlNpCpgLzMXdiPo+dxcvSmiA==}
+  /@types/node@20.12.2:
+    resolution: {integrity: sha512-zQ0NYO87hyN6Xrclcqp7f8ZbXNbRfoGWNcMvHTPQp9UUrwI0mI7XBz+cu7/W6/VClYo2g63B0cjull/srU7LgQ==}
     dependencies:
       undici-types: 5.26.5
     dev: false
 
-  /@types/prop-types@15.7.5:
-    resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
+  /@types/prop-types@15.7.12:
+    resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==}
     dev: false
 
-  /@types/react@18.0.26:
-    resolution: {integrity: sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==}
+  /@types/react@18.2.74:
+    resolution: {integrity: sha512-9AEqNZZyBx8OdZpxzQlaFEVCSFUM2YXJH46yPOiOpm078k6ZLOCcuAzGum/zK8YBwY+dbahVNbHrbgrAwIRlqw==}
     dependencies:
-      '@types/prop-types': 15.7.5
-      '@types/scheduler': 0.16.2
-      csstype: 3.1.1
-    dev: false
-
-  /@types/scheduler@0.16.2:
-    resolution: {integrity: sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==}
+      '@types/prop-types': 15.7.12
+      csstype: 3.1.3
     dev: false
 
-  /@types/semver@7.5.0:
-    resolution: {integrity: sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==}
+  /@types/semver@7.5.8:
+    resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
     dev: false
 
-  /@types/stack-utils@2.0.1:
-    resolution: {integrity: sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==}
+  /@types/stack-utils@2.0.3:
+    resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
     dev: false
 
-  /@types/tough-cookie@4.0.2:
-    resolution: {integrity: sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==}
+  /@types/tough-cookie@4.0.5:
+    resolution: {integrity: sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==}
     dev: false
 
   /@types/web@0.0.142:
@@ -1885,26 +1670,26 @@ packages:
   /@types/yaireo__tagify@4.17.5:
     resolution: {integrity: sha512-nYk4xqky1ZnbgTlP7dO24GA/Kz4Q7mvNGNOsRPygnaVV8kBXIhROFVLG141Y0EF+TZKbmIMUolaJ+Z69Pr9FwQ==}
     dependencies:
-      '@types/react': 18.0.26
+      '@types/react': 18.2.74
     dev: false
 
-  /@types/yargs-parser@21.0.0:
-    resolution: {integrity: sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==}
+  /@types/yargs-parser@21.0.3:
+    resolution: {integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==}
     dev: false
 
-  /@types/yargs@17.0.17:
-    resolution: {integrity: sha512-72bWxFKTK6uwWJAVT+3rF6Jo6RTojiJ27FQo8Rf60AL+VZbzoVPnMFhKsUnbjR8A3BTCYQ7Mv3hnl8T0A+CX9g==}
+  /@types/yargs@17.0.32:
+    resolution: {integrity: sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==}
     dependencies:
-      '@types/yargs-parser': 21.0.0
+      '@types/yargs-parser': 21.0.3
     dev: false
 
   /@types/zxcvbn@4.4.4:
     resolution: {integrity: sha512-Tuk4q7q0DnpzyJDI4aMeghGuFu2iS1QAdKpabn8JfbtfGmVDUgvZv1I7mEjP61Bvnp3ljKCC8BE6YYSTNxmvRQ==}
     dev: false
 
-  /@typescript-eslint/eslint-plugin@7.2.0(@typescript-eslint/parser@7.2.0)(eslint@8.57.0)(typescript@5.4.2):
-    resolution: {integrity: sha512-mdekAHOqS9UjlmyF/LSs6AIEvfceV749GFxoBAjwAv0nkevfKHWQFDMcBZWUiIC5ft6ePWivXoS36aKQ0Cy3sw==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  /@typescript-eslint/eslint-plugin@7.5.0(@typescript-eslint/parser@7.5.0)(eslint@8.57.0)(typescript@5.4.3):
+    resolution: {integrity: sha512-HpqNTH8Du34nLxbKgVMGljZMG0rJd2O9ecvr2QLYp+7512ty1j42KnsFwspPXg1Vh8an9YImf6CokUBltisZFQ==}
+    engines: {node: ^18.18.0 || >=20.0.0}
     peerDependencies:
       '@typescript-eslint/parser': ^7.0.0
       eslint: ^8.56.0
@@ -1913,27 +1698,27 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@eslint-community/regexpp': 4.6.2
-      '@typescript-eslint/parser': 7.2.0(eslint@8.57.0)(typescript@5.4.2)
-      '@typescript-eslint/scope-manager': 7.2.0
-      '@typescript-eslint/type-utils': 7.2.0(eslint@8.57.0)(typescript@5.4.2)
-      '@typescript-eslint/utils': 7.2.0(eslint@8.57.0)(typescript@5.4.2)
-      '@typescript-eslint/visitor-keys': 7.2.0
+      '@eslint-community/regexpp': 4.10.0
+      '@typescript-eslint/parser': 7.5.0(eslint@8.57.0)(typescript@5.4.3)
+      '@typescript-eslint/scope-manager': 7.5.0
+      '@typescript-eslint/type-utils': 7.5.0(eslint@8.57.0)(typescript@5.4.3)
+      '@typescript-eslint/utils': 7.5.0(eslint@8.57.0)(typescript@5.4.3)
+      '@typescript-eslint/visitor-keys': 7.5.0
       debug: 4.3.4
       eslint: 8.57.0
       graphemer: 1.4.0
-      ignore: 5.2.4
+      ignore: 5.3.1
       natural-compare: 1.4.0
-      semver: 7.5.4
-      ts-api-utils: 1.0.1(typescript@5.4.2)
-      typescript: 5.4.2
+      semver: 7.6.0
+      ts-api-utils: 1.3.0(typescript@5.4.3)
+      typescript: 5.4.3
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.2):
-    resolution: {integrity: sha512-5FKsVcHTk6TafQKQbuIVkXq58Fnbkd2wDL4LB7AURN7RUOu1utVP+G8+6u3ZhEroW3DF6hyo3ZEXxgKgp4KeCg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  /@typescript-eslint/parser@7.5.0(eslint@8.57.0)(typescript@5.4.3):
+    resolution: {integrity: sha512-cj+XGhNujfD2/wzR1tabNsidnYRaFfEkcULdcIyVBYcXjBvBKOes+mpMBP7hMpOyk+gBcfXsrg4NBGAStQyxjQ==}
+    engines: {node: ^18.18.0 || >=20.0.0}
     peerDependencies:
       eslint: ^8.56.0
       typescript: '*'
@@ -1941,28 +1726,28 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/scope-manager': 7.2.0
-      '@typescript-eslint/types': 7.2.0
-      '@typescript-eslint/typescript-estree': 7.2.0(typescript@5.4.2)
-      '@typescript-eslint/visitor-keys': 7.2.0
+      '@typescript-eslint/scope-manager': 7.5.0
+      '@typescript-eslint/types': 7.5.0
+      '@typescript-eslint/typescript-estree': 7.5.0(typescript@5.4.3)
+      '@typescript-eslint/visitor-keys': 7.5.0
       debug: 4.3.4
       eslint: 8.57.0
-      typescript: 5.4.2
+      typescript: 5.4.3
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /@typescript-eslint/scope-manager@7.2.0:
-    resolution: {integrity: sha512-Qh976RbQM/fYtjx9hs4XkayYujB/aPwglw2choHmf3zBjB4qOywWSdt9+KLRdHubGcoSwBnXUH2sR3hkyaERRg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  /@typescript-eslint/scope-manager@7.5.0:
+    resolution: {integrity: sha512-Z1r7uJY0MDeUlql9XJ6kRVgk/sP11sr3HKXn268HZyqL7i4cEfrdFuSSY/0tUqT37l5zT0tJOsuDP16kio85iA==}
+    engines: {node: ^18.18.0 || >=20.0.0}
     dependencies:
-      '@typescript-eslint/types': 7.2.0
-      '@typescript-eslint/visitor-keys': 7.2.0
+      '@typescript-eslint/types': 7.5.0
+      '@typescript-eslint/visitor-keys': 7.5.0
     dev: false
 
-  /@typescript-eslint/type-utils@7.2.0(eslint@8.57.0)(typescript@5.4.2):
-    resolution: {integrity: sha512-xHi51adBHo9O9330J8GQYQwrKBqbIPJGZZVQTHHmy200hvkLZFWJIFtAG/7IYTWUyun6DE6w5InDReePJYJlJA==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  /@typescript-eslint/type-utils@7.5.0(eslint@8.57.0)(typescript@5.4.3):
+    resolution: {integrity: sha512-A021Rj33+G8mx2Dqh0nMO9GyjjIBK3MqgVgZ2qlKf6CJy51wY/lkkFqq3TqqnH34XyAHUkq27IjlUkWlQRpLHw==}
+    engines: {node: ^18.18.0 || >=20.0.0}
     peerDependencies:
       eslint: ^8.56.0
       typescript: '*'
@@ -1970,67 +1755,67 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/typescript-estree': 7.2.0(typescript@5.4.2)
-      '@typescript-eslint/utils': 7.2.0(eslint@8.57.0)(typescript@5.4.2)
+      '@typescript-eslint/typescript-estree': 7.5.0(typescript@5.4.3)
+      '@typescript-eslint/utils': 7.5.0(eslint@8.57.0)(typescript@5.4.3)
       debug: 4.3.4
       eslint: 8.57.0
-      ts-api-utils: 1.0.1(typescript@5.4.2)
-      typescript: 5.4.2
+      ts-api-utils: 1.3.0(typescript@5.4.3)
+      typescript: 5.4.3
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /@typescript-eslint/types@7.2.0:
-    resolution: {integrity: sha512-XFtUHPI/abFhm4cbCDc5Ykc8npOKBSJePY3a3s+lwumt7XWJuzP5cZcfZ610MIPHjQjNsOLlYK8ASPaNG8UiyA==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  /@typescript-eslint/types@7.5.0:
+    resolution: {integrity: sha512-tv5B4IHeAdhR7uS4+bf8Ov3k793VEVHd45viRRkehIUZxm0WF82VPiLgHzA/Xl4TGPg1ZD49vfxBKFPecD5/mg==}
+    engines: {node: ^18.18.0 || >=20.0.0}
     dev: false
 
-  /@typescript-eslint/typescript-estree@7.2.0(typescript@5.4.2):
-    resolution: {integrity: sha512-cyxS5WQQCoBwSakpMrvMXuMDEbhOo9bNHHrNcEWis6XHx6KF518tkF1wBvKIn/tpq5ZpUYK7Bdklu8qY0MsFIA==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  /@typescript-eslint/typescript-estree@7.5.0(typescript@5.4.3):
+    resolution: {integrity: sha512-YklQQfe0Rv2PZEueLTUffiQGKQneiIEKKnfIqPIOxgM9lKSZFCjT5Ad4VqRKj/U4+kQE3fa8YQpskViL7WjdPQ==}
+    engines: {node: ^18.18.0 || >=20.0.0}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': 7.2.0
-      '@typescript-eslint/visitor-keys': 7.2.0
+      '@typescript-eslint/types': 7.5.0
+      '@typescript-eslint/visitor-keys': 7.5.0
       debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.3
-      semver: 7.5.4
-      ts-api-utils: 1.0.1(typescript@5.4.2)
-      typescript: 5.4.2
+      semver: 7.6.0
+      ts-api-utils: 1.3.0(typescript@5.4.3)
+      typescript: 5.4.3
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /@typescript-eslint/utils@7.2.0(eslint@8.57.0)(typescript@5.4.2):
-    resolution: {integrity: sha512-YfHpnMAGb1Eekpm3XRK8hcMwGLGsnT6L+7b2XyRv6ouDuJU1tZir1GS2i0+VXRatMwSI1/UfcyPe53ADkU+IuA==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  /@typescript-eslint/utils@7.5.0(eslint@8.57.0)(typescript@5.4.3):
+    resolution: {integrity: sha512-3vZl9u0R+/FLQcpy2EHyRGNqAS/ofJ3Ji8aebilfJe+fobK8+LbIFmrHciLVDxjDoONmufDcnVSF38KwMEOjzw==}
+    engines: {node: ^18.18.0 || >=20.0.0}
     peerDependencies:
       eslint: ^8.56.0
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
-      '@types/json-schema': 7.0.12
-      '@types/semver': 7.5.0
-      '@typescript-eslint/scope-manager': 7.2.0
-      '@typescript-eslint/types': 7.2.0
-      '@typescript-eslint/typescript-estree': 7.2.0(typescript@5.4.2)
+      '@types/json-schema': 7.0.15
+      '@types/semver': 7.5.8
+      '@typescript-eslint/scope-manager': 7.5.0
+      '@typescript-eslint/types': 7.5.0
+      '@typescript-eslint/typescript-estree': 7.5.0(typescript@5.4.3)
       eslint: 8.57.0
-      semver: 7.5.4
+      semver: 7.6.0
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: false
 
-  /@typescript-eslint/visitor-keys@7.2.0:
-    resolution: {integrity: sha512-c6EIQRHhcpl6+tO8EMR+kjkkV+ugUNXOmeASA1rlzkd8EPIriavpWoiEz1HR/VLhbVIdhqnV6E7JZm00cBDx2A==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+  /@typescript-eslint/visitor-keys@7.5.0:
+    resolution: {integrity: sha512-mcuHM/QircmA6O7fy6nn2w/3ditQkj+SgtOc8DW3uQ10Yfj42amm2i+6F2K4YAOPNNTmE6iM1ynM6lrSwdendA==}
+    engines: {node: ^18.18.0 || >=20.0.0}
     dependencies:
-      '@typescript-eslint/types': 7.2.0
+      '@typescript-eslint/types': 7.5.0
       eslint-visitor-keys: 3.4.3
     dev: false
 
@@ -2059,25 +1844,25 @@ packages:
   /acorn-globals@7.0.1:
     resolution: {integrity: sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==}
     dependencies:
-      acorn: 8.9.0
-      acorn-walk: 8.2.0
+      acorn: 8.11.3
+      acorn-walk: 8.3.2
     dev: false
 
-  /acorn-jsx@5.3.2(acorn@8.9.0):
+  /acorn-jsx@5.3.2(acorn@8.11.3):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      acorn: 8.9.0
+      acorn: 8.11.3
     dev: false
 
-  /acorn-walk@8.2.0:
-    resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==}
+  /acorn-walk@8.3.2:
+    resolution: {integrity: sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==}
     engines: {node: '>=0.4.0'}
     dev: false
 
-  /acorn@8.9.0:
-    resolution: {integrity: sha512-jaVNAFBHNLXspO543WnNNPZFRtavh3skAkITqD0/2aeMkKZTN+254PyhwxFYrk3vQ1xfY+2wbesJMs/JC8/PwQ==}
+  /acorn@8.11.3:
+    resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
     engines: {node: '>=0.4.0'}
     hasBin: true
     dev: false
@@ -2107,11 +1892,9 @@ packages:
       type-fest: 0.21.3
     dev: false
 
-  /ansi-escapes@6.2.0:
-    resolution: {integrity: sha512-kzRaCqXnpzWs+3z5ABPQiVke+iq0KXkHo8xiWV4RPTi5Yli0l97BEQuhXV1s7+aSU/fu1kUuxgS4MsQ0fRuygw==}
+  /ansi-escapes@6.2.1:
+    resolution: {integrity: sha512-4nJ3yixlEthEJ9Rk4vPcdBRkZvQZlYyu8j4/Mqz5sgIkddmEnH2Yj2ZrnP9S3tQOvSNRUIgVNF/1yPpRAGNRig==}
     engines: {node: '>=14.16'}
-    dependencies:
-      type-fest: 3.13.1
     dev: false
 
   /ansi-regex@5.0.1:
@@ -2156,8 +1939,8 @@ packages:
       picomatch: 2.3.1
     dev: false
 
-  /apexcharts@3.44.0:
-    resolution: {integrity: sha512-u7Xzrbcxc2yWznN78Jh5NMCYVAsWDfBjRl5ea++rVzFAqjU2hLz4RgKIFwYOBDRQtW1e/Qz8azJTqIJ1+Vu9Qg==}
+  /apexcharts@3.48.0:
+    resolution: {integrity: sha512-Lhpj1Ij6lKlrUke8gf+P+SE6uGUn+Pe1TnCJ+zqrY0YMvbqM3LMb1lY+eybbTczUyk0RmMZomlTa2NgX2EUs4Q==}
     dependencies:
       '@yr/monotone-cubic-spline': 1.0.3
       svg.draggable.js: 2.2.2
@@ -2191,19 +1974,19 @@ packages:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
     dev: false
 
-  /babel-jest@29.7.0(@babel/core@7.22.10):
+  /babel-jest@29.7.0(@babel/core@7.24.3):
     resolution: {integrity: sha512-BrvGY3xZSwEcCzKvKsCi2GgHqDqsYkOP4/by5xCgIwGXQxIEh+8ew3gmrE1y7XRR6LHZIj6yLYnUi/mm2KXKBg==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
       '@babel/core': ^7.8.0
     dependencies:
-      '@babel/core': 7.22.10
+      '@babel/core': 7.24.3
       '@jest/transform': 29.7.0
-      '@types/babel__core': 7.1.20
+      '@types/babel__core': 7.20.5
       babel-plugin-istanbul: 6.1.1
-      babel-preset-jest: 29.6.3(@babel/core@7.22.10)
+      babel-preset-jest: 29.6.3(@babel/core@7.24.3)
       chalk: 4.1.2
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
       slash: 3.0.0
     transitivePeerDependencies:
       - supports-color
@@ -2213,7 +1996,7 @@ packages:
     resolution: {integrity: sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==}
     engines: {node: '>=8'}
     dependencies:
-      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-plugin-utils': 7.24.0
       '@istanbuljs/load-nyc-config': 1.1.0
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-instrument: 5.2.1
@@ -2226,49 +2009,49 @@ packages:
     resolution: {integrity: sha512-ESAc/RJvGTFEzRwOTT4+lNDk/GNHMkKbNzsvT0qKRfDyyYTskxB5rnU2njIDYVxXCBHHEI1c0YwHob3WaYujOg==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      '@babel/template': 7.22.5
-      '@babel/types': 7.22.10
-      '@types/babel__core': 7.1.20
-      '@types/babel__traverse': 7.18.3
+      '@babel/template': 7.24.0
+      '@babel/types': 7.24.0
+      '@types/babel__core': 7.20.5
+      '@types/babel__traverse': 7.20.5
     dev: false
 
-  /babel-preset-current-node-syntax@1.0.1(@babel/core@7.22.10):
+  /babel-preset-current-node-syntax@1.0.1(@babel/core@7.24.3):
     resolution: {integrity: sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.22.10
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.22.10)
-      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.22.10)
-      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.22.10)
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.22.10)
-      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.22.10)
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.22.10)
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.22.10)
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.22.10)
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.22.10)
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.22.10)
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.22.10)
-      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.22.10)
-    dev: false
-
-  /babel-preset-jest@29.6.3(@babel/core@7.22.10):
+      '@babel/core': 7.24.3
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.3)
+      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.24.3)
+      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.24.3)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.24.3)
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.3)
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.3)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.3)
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.3)
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.3)
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.3)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.3)
+      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.24.3)
+    dev: false
+
+  /babel-preset-jest@29.6.3(@babel/core@7.24.3):
     resolution: {integrity: sha512-0B3bhxR6snWXJZtR/RliHTDPRgn1sNHOR0yVtq/IiQFyuOVjFS+wuio/R4gSNkyYmKmJB4wGZv2NZanmKmTnNA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
       '@babel/core': ^7.0.0
     dependencies:
-      '@babel/core': 7.22.10
+      '@babel/core': 7.24.3
       babel-plugin-jest-hoist: 29.6.3
-      babel-preset-current-node-syntax: 1.0.1(@babel/core@7.22.10)
+      babel-preset-current-node-syntax: 1.0.1(@babel/core@7.24.3)
     dev: false
 
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: false
 
-  /binary-extensions@2.2.0:
-    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
+  /binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
     dev: false
 
@@ -2292,24 +2075,13 @@ packages:
       fill-range: 7.0.1
     dev: false
 
-  /browserslist@4.21.10:
-    resolution: {integrity: sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-    dependencies:
-      caniuse-lite: 1.0.30001521
-      electron-to-chromium: 1.4.494
-      node-releases: 2.0.13
-      update-browserslist-db: 1.0.11(browserslist@4.21.10)
-    dev: false
-
   /browserslist@4.23.0:
     resolution: {integrity: sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001599
-      electron-to-chromium: 1.4.708
+      caniuse-lite: 1.0.30001605
+      electron-to-chromium: 1.4.723
       node-releases: 2.0.14
       update-browserslist-db: 1.0.13(browserslist@4.23.0)
     dev: false
@@ -2339,12 +2111,8 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
-  /caniuse-lite@1.0.30001521:
-    resolution: {integrity: sha512-fnx1grfpEOvDGH+V17eccmNjucGUnCbP6KL+l5KqBIerp26WK/+RQ7CIDE37KGJjaPyqWXXlFUyKiWmvdNNKmQ==}
-    dev: false
-
-  /caniuse-lite@1.0.30001599:
-    resolution: {integrity: sha512-LRAQHZ4yT1+f9LemSMeqdMpMxZcc4RMWdj4tiFe3G8tNkWK+E58g+/tzotb5cU6TbcVJLr4fySiAW7XmxQvZQA==}
+  /caniuse-lite@1.0.30001605:
+    resolution: {integrity: sha512-nXwGlFWo34uliI9z3n6Qc0wZaf7zaZWA1CPZ169La5mV3I/gem7bst0vr5XQH5TJXZIMfDeZyOrZnSlVzKxxHQ==}
     dev: false
 
   /chalk@2.4.2:
@@ -2432,8 +2200,8 @@ packages:
       '@badrap/result': 0.2.13
     dev: false
 
-  /chokidar@3.5.3:
-    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
+  /chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
     dependencies:
       anymatch: 3.1.3
@@ -2447,13 +2215,13 @@ packages:
       fsevents: 2.3.3
     dev: false
 
-  /ci-info@3.7.0:
-    resolution: {integrity: sha512-2CpRNYmImPx+RXKLq6jko/L07phmS9I02TyqkcNU20GCF/GgaWvc58hPtjxDX8lPpkdwc9sNh72V9k00S7ezog==}
+  /ci-info@3.9.0:
+    resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
     engines: {node: '>=8'}
     dev: false
 
-  /cjs-module-lexer@1.2.2:
-    resolution: {integrity: sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==}
+  /cjs-module-lexer@1.2.3:
+    resolution: {integrity: sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==}
     dev: false
 
   /cli-cursor@4.0.0:
@@ -2485,8 +2253,8 @@ packages:
     engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'}
     dev: false
 
-  /collect-v8-coverage@1.0.1:
-    resolution: {integrity: sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==}
+  /collect-v8-coverage@1.0.2:
+    resolution: {integrity: sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q==}
     dev: false
 
   /color-convert@1.9.3:
@@ -2530,15 +2298,11 @@ packages:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: false
 
-  /convert-source-map@1.9.0:
-    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
-    dev: false
-
   /convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
     dev: false
 
-  /create-jest@29.7.0(@types/node@20.11.28):
+  /create-jest@29.7.0(@types/node@20.12.2):
     resolution: {integrity: sha512-Adz2bdH0Vq3F53KEMJOoftQFutWCukm6J24wbPWRO4k1kMY7gS7ds/uoJkNuV8wDCtWWnuwGcJwpWcih+zEW1Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     hasBin: true
@@ -2546,8 +2310,8 @@ packages:
       '@jest/types': 29.6.3
       chalk: 4.1.2
       exit: 0.1.2
-      graceful-fs: 4.2.10
-      jest-config: 29.7.0(@types/node@20.11.28)
+      graceful-fs: 4.2.11
+      jest-config: 29.7.0(@types/node@20.12.2)
       jest-util: 29.7.0
       prompts: 2.4.2
     transitivePeerDependencies:
@@ -2585,8 +2349,8 @@ packages:
       cssom: 0.3.8
     dev: false
 
-  /csstype@3.1.1:
-    resolution: {integrity: sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==}
+  /csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
     dev: false
 
   /data-urls@3.0.2:
@@ -2686,20 +2450,16 @@ packages:
       webidl-conversions: 7.0.0
     dev: false
 
-  /dompurify@2.4.1:
-    resolution: {integrity: sha512-ewwFzHzrrneRjxzmK6oVz/rZn9VWspGFRDb4/rRtIsM1n36t9AKma/ye8syCpcw+XJ25kOK/hOG7t1j2I2yBqA==}
+  /dompurify@2.4.9:
+    resolution: {integrity: sha512-iHtnxYMotKgOTvxIqq677JsKHvCOkAFqj9x8Mek2zdeHW1XjuFKwjpmZeMaXQRQ8AbJZDbcRz/+r1QhwvFtmQg==}
     dev: false
 
   /dragscroll@0.0.8:
     resolution: {integrity: sha512-nMrx/KErHpEkiKZlrghcT/nLWCj8vEJgv6s6TF84gmgn6uROPx2wRvClkcnjSEyvppYY9okOI1DIv573Toql1w==}
     dev: false
 
-  /electron-to-chromium@1.4.494:
-    resolution: {integrity: sha512-KF7wtsFFDu4ws1ZsSOt4pdmO1yWVNWCFtijVYZPUeW4SV7/hy/AESjLn/+qIWgq7mHscNOKAwN5AIM1+YAy+Ww==}
-    dev: false
-
-  /electron-to-chromium@1.4.708:
-    resolution: {integrity: sha512-iWgEEvREL4GTXXHKohhh33+6Y8XkPI5eHihDmm8zUk5Zo7HICEW+wI/j5kJ2tbuNUCXJ/sNXa03ajW635DiJXA==}
+  /electron-to-chromium@1.4.723:
+    resolution: {integrity: sha512-rxFVtrMGMFROr4qqU6n95rUi9IlfIm+lIAt+hOToy/9r6CDv0XiEcQdC3VP71y1pE5CFTzKV0RvxOGYCPWWHPw==}
     dev: false
 
   /emittery@0.13.1:
@@ -2730,8 +2490,8 @@ packages:
       is-arrayish: 0.2.1
     dev: false
 
-  /escalade@3.1.1:
-    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
+  /escalade@3.1.2:
+    resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
     engines: {node: '>=6'}
     dev: false
 
@@ -2750,15 +2510,14 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
-  /escodegen@2.0.0:
-    resolution: {integrity: sha512-mmHKys/C8BFUGI+MAWNcSYoORYLMdPzjrknd2Vc+bUsjN5bXcr8EhrNB+UTqfL1y3I9c4fw2ihgtMPQLBRiQxw==}
+  /escodegen@2.1.0:
+    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
     engines: {node: '>=6.0'}
     hasBin: true
     dependencies:
       esprima: 4.0.1
       estraverse: 5.3.0
       esutils: 2.0.3
-      optionator: 0.8.3
     optionalDependencies:
       source-map: 0.6.1
     dev: false
@@ -2782,7 +2541,7 @@ packages:
     hasBin: true
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
-      '@eslint-community/regexpp': 4.6.2
+      '@eslint-community/regexpp': 4.10.0
       '@eslint/eslintrc': 2.1.4
       '@eslint/js': 8.57.0
       '@humanwhocodes/config-array': 0.11.14
@@ -2804,9 +2563,9 @@ packages:
       file-entry-cache: 6.0.1
       find-up: 5.0.0
       glob-parent: 6.0.2
-      globals: 13.20.0
+      globals: 13.24.0
       graphemer: 1.4.0
-      ignore: 5.2.4
+      ignore: 5.3.1
       imurmurhash: 0.1.4
       is-glob: 4.0.3
       is-path-inside: 3.0.3
@@ -2827,8 +2586,8 @@ packages:
     resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      acorn: 8.9.0
-      acorn-jsx: 5.3.2(acorn@8.9.0)
+      acorn: 8.11.3
+      acorn-jsx: 5.3.2(acorn@8.11.3)
       eslint-visitor-keys: 3.4.3
     dev: false
 
@@ -2890,7 +2649,7 @@ packages:
       human-signals: 5.0.0
       is-stream: 3.0.0
       merge-stream: 2.0.0
-      npm-run-path: 5.1.0
+      npm-run-path: 5.3.0
       onetime: 6.0.0
       signal-exit: 4.1.0
       strip-final-newline: 3.0.0
@@ -2935,8 +2694,8 @@ packages:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
     dev: false
 
-  /fastq@1.15.0:
-    resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
+  /fastq@1.17.1:
+    resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
     dependencies:
       reusify: 1.0.4
     dev: false
@@ -2951,7 +2710,7 @@ packages:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
     dependencies:
-      flat-cache: 3.0.4
+      flat-cache: 3.2.0
     dev: false
 
   /fill-range@7.0.1:
@@ -2977,11 +2736,12 @@ packages:
       path-exists: 4.0.0
     dev: false
 
-  /flat-cache@3.0.4:
-    resolution: {integrity: sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==}
+  /flat-cache@3.2.0:
+    resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
     engines: {node: ^10.12.0 || >=12.0.0}
     dependencies:
-      flatted: 3.2.7
+      flatted: 3.3.1
+      keyv: 4.5.4
       rimraf: 3.0.2
     dev: false
 
@@ -2989,8 +2749,8 @@ packages:
     resolution: {integrity: sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==}
     dev: false
 
-  /flatted@3.2.7:
-    resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
+  /flatted@3.3.1:
+    resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
     dev: false
 
   /form-data@4.0.0:
@@ -3014,8 +2774,8 @@ packages:
     dev: false
     optional: true
 
-  /function-bind@1.1.1:
-    resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
+  /function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
     dev: false
 
   /gensync@1.0.0-beta.2:
@@ -3078,8 +2838,8 @@ packages:
     engines: {node: '>=4'}
     dev: false
 
-  /globals@13.20.0:
-    resolution: {integrity: sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==}
+  /globals@13.24.0:
+    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
     engines: {node: '>=8'}
     dependencies:
       type-fest: 0.20.2
@@ -3092,13 +2852,13 @@ packages:
       array-union: 2.1.0
       dir-glob: 3.0.1
       fast-glob: 3.3.2
-      ignore: 5.2.4
+      ignore: 5.3.1
       merge2: 1.4.1
       slash: 3.0.0
     dev: false
 
-  /graceful-fs@4.2.10:
-    resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==}
+  /graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
     dev: false
 
   /graphemer@1.4.0:
@@ -3120,11 +2880,11 @@ packages:
     engines: {node: '>=8'}
     dev: false
 
-  /has@1.0.3:
-    resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
-    engines: {node: '>= 0.4.0'}
+  /hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
     dependencies:
-      function-bind: 1.1.1
+      function-bind: 1.1.2
     dev: false
 
   /html-encoding-sniffer@3.0.0:
@@ -3180,8 +2940,8 @@ packages:
     resolution: {integrity: sha512-8Sb3veuYCyrZL+VBt9LJfZjLUPWVvqn8tG28VqYNFCo43KHcKuq+b4EiXGeuaLAQWL2YmyDgMp2aSpH9JHsEQg==}
     dev: false
 
-  /ignore@5.2.4:
-    resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
+  /ignore@5.3.1:
+    resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
     engines: {node: '>= 4'}
     dev: false
 
@@ -3226,13 +2986,13 @@ packages:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
     dependencies:
-      binary-extensions: 2.2.0
+      binary-extensions: 2.3.0
     dev: false
 
-  /is-core-module@2.11.0:
-    resolution: {integrity: sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==}
+  /is-core-module@2.13.1:
+    resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
     dependencies:
-      has: 1.0.3
+      hasown: 2.0.2
     dev: false
 
   /is-extglob@2.1.1:
@@ -3297,8 +3057,8 @@ packages:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
     dev: false
 
-  /istanbul-lib-coverage@3.2.0:
-    resolution: {integrity: sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==}
+  /istanbul-lib-coverage@3.2.2:
+    resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
     engines: {node: '>=8'}
     dev: false
 
@@ -3306,10 +3066,10 @@ packages:
     resolution: {integrity: sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==}
     engines: {node: '>=8'}
     dependencies:
-      '@babel/core': 7.22.10
-      '@babel/parser': 7.22.10
+      '@babel/core': 7.24.3
+      '@babel/parser': 7.24.1
       '@istanbuljs/schema': 0.1.3
-      istanbul-lib-coverage: 3.2.0
+      istanbul-lib-coverage: 3.2.2
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
@@ -3319,21 +3079,21 @@ packages:
     resolution: {integrity: sha512-1WUsZ9R1lA0HtBSohTkm39WTPlNKSJ5iFk7UwqXkBLoHQT+hfqPsfsTDVuZdKGaBwn7din9bS7SsnoAr943hvw==}
     engines: {node: '>=10'}
     dependencies:
-      '@babel/core': 7.24.0
-      '@babel/parser': 7.24.0
+      '@babel/core': 7.24.3
+      '@babel/parser': 7.24.1
       '@istanbuljs/schema': 0.1.3
-      istanbul-lib-coverage: 3.2.0
-      semver: 7.5.4
+      istanbul-lib-coverage: 3.2.2
+      semver: 7.6.0
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /istanbul-lib-report@3.0.0:
-    resolution: {integrity: sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==}
-    engines: {node: '>=8'}
+  /istanbul-lib-report@3.0.1:
+    resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
+    engines: {node: '>=10'}
     dependencies:
-      istanbul-lib-coverage: 3.2.0
-      make-dir: 3.1.0
+      istanbul-lib-coverage: 3.2.2
+      make-dir: 4.0.0
       supports-color: 7.2.0
     dev: false
 
@@ -3342,18 +3102,18 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       debug: 4.3.4
-      istanbul-lib-coverage: 3.2.0
+      istanbul-lib-coverage: 3.2.2
       source-map: 0.6.1
     transitivePeerDependencies:
       - supports-color
     dev: false
 
-  /istanbul-reports@3.1.5:
-    resolution: {integrity: sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==}
+  /istanbul-reports@3.1.7:
+    resolution: {integrity: sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==}
     engines: {node: '>=8'}
     dependencies:
       html-escaper: 2.0.2
-      istanbul-lib-report: 3.0.0
+      istanbul-lib-report: 3.0.1
     dev: false
 
   /jest-changed-files@29.7.0:
@@ -3373,7 +3133,7 @@ packages:
       '@jest/expect': 29.7.0
       '@jest/test-result': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 20.11.28
+      '@types/node': 20.12.2
       chalk: 4.1.2
       co: 4.6.0
       dedent: 1.5.1
@@ -3386,7 +3146,7 @@ packages:
       jest-util: 29.7.0
       p-limit: 3.1.0
       pretty-format: 29.7.0
-      pure-rand: 6.0.2
+      pure-rand: 6.1.0
       slash: 3.0.0
       stack-utils: 2.0.6
     transitivePeerDependencies:
@@ -3394,7 +3154,7 @@ packages:
       - supports-color
     dev: false
 
-  /jest-cli@29.7.0(@types/node@20.11.28):
+  /jest-cli@29.7.0(@types/node@20.12.2):
     resolution: {integrity: sha512-OVVobw2IubN/GSYsxETi+gOe7Ka59EFMR/twOU3Jb2GnKKeMGJB5SGUUrEz3SFVmJASUdZUzy83sLNNQ2gZslg==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     hasBin: true
@@ -3408,13 +3168,13 @@ packages:
       '@jest/test-result': 29.7.0
       '@jest/types': 29.6.3
       chalk: 4.1.2
-      create-jest: 29.7.0(@types/node@20.11.28)
+      create-jest: 29.7.0(@types/node@20.12.2)
       exit: 0.1.2
       import-local: 3.1.0
-      jest-config: 29.7.0(@types/node@20.11.28)
+      jest-config: 29.7.0(@types/node@20.12.2)
       jest-util: 29.7.0
       jest-validate: 29.7.0
-      yargs: 17.6.2
+      yargs: 17.7.2
     transitivePeerDependencies:
       - '@types/node'
       - babel-plugin-macros
@@ -3422,7 +3182,7 @@ packages:
       - ts-node
     dev: false
 
-  /jest-config@29.7.0(@types/node@20.11.28):
+  /jest-config@29.7.0(@types/node@20.12.2):
     resolution: {integrity: sha512-uXbpfeQ7R6TZBqI3/TxCU4q4ttk3u0PJeC+E0zbfSoSjq6bJ7buBPxzQPL0ifrkY4DNu4JUdk0ImlBUYi840eQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
@@ -3434,16 +3194,16 @@ packages:
       ts-node:
         optional: true
     dependencies:
-      '@babel/core': 7.22.10
+      '@babel/core': 7.24.3
       '@jest/test-sequencer': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 20.11.28
-      babel-jest: 29.7.0(@babel/core@7.22.10)
+      '@types/node': 20.12.2
+      babel-jest: 29.7.0(@babel/core@7.24.3)
       chalk: 4.1.2
-      ci-info: 3.7.0
+      ci-info: 3.9.0
       deepmerge: 4.3.1
       glob: 7.2.3
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
       jest-circus: 29.7.0
       jest-environment-node: 29.7.0
       jest-get-type: 29.6.3
@@ -3503,7 +3263,7 @@ packages:
       '@jest/fake-timers': 29.7.0
       '@jest/types': 29.6.3
       '@types/jsdom': 20.0.1
-      '@types/node': 20.11.28
+      '@types/node': 20.12.2
       jest-mock: 29.7.0
       jest-util: 29.7.0
       jsdom: 20.0.3
@@ -3520,7 +3280,7 @@ packages:
       '@jest/environment': 29.7.0
       '@jest/fake-timers': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 20.11.28
+      '@types/node': 20.12.2
       jest-mock: 29.7.0
       jest-util: 29.7.0
     dev: false
@@ -3535,11 +3295,11 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/types': 29.6.3
-      '@types/graceful-fs': 4.1.5
-      '@types/node': 20.11.28
+      '@types/graceful-fs': 4.1.9
+      '@types/node': 20.12.2
       anymatch: 3.1.3
       fb-watchman: 2.0.2
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
       jest-regex-util: 29.6.3
       jest-util: 29.7.0
       jest-worker: 29.7.0
@@ -3571,11 +3331,11 @@ packages:
     resolution: {integrity: sha512-GBEV4GRADeP+qtB2+6u61stea8mGcOT4mCtrYISZwfu9/ISHFJ/5zOMXYbpBE9RsS5+Gb63DW4FgmnKJ79Kf6w==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      '@babel/code-frame': 7.22.10
+      '@babel/code-frame': 7.24.2
       '@jest/types': 29.6.3
-      '@types/stack-utils': 2.0.1
+      '@types/stack-utils': 2.0.3
       chalk: 4.1.2
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
       micromatch: 4.0.5
       pretty-format: 29.7.0
       slash: 3.0.0
@@ -3587,7 +3347,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/types': 29.6.3
-      '@types/node': 20.11.28
+      '@types/node': 20.12.2
       jest-util: 29.7.0
     dev: false
 
@@ -3623,12 +3383,12 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       chalk: 4.1.2
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
       jest-haste-map: 29.7.0
       jest-pnp-resolver: 1.2.3(jest-resolve@29.7.0)
       jest-util: 29.7.0
       jest-validate: 29.7.0
-      resolve: 1.22.1
+      resolve: 1.22.8
       resolve.exports: 2.0.2
       slash: 3.0.0
     dev: false
@@ -3642,10 +3402,10 @@ packages:
       '@jest/test-result': 29.7.0
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 20.11.28
+      '@types/node': 20.12.2
       chalk: 4.1.2
       emittery: 0.13.1
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
       jest-docblock: 29.7.0
       jest-environment-node: 29.7.0
       jest-haste-map: 29.7.0
@@ -3673,12 +3433,12 @@ packages:
       '@jest/test-result': 29.7.0
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 20.11.28
+      '@types/node': 20.12.2
       chalk: 4.1.2
-      cjs-module-lexer: 1.2.2
-      collect-v8-coverage: 1.0.1
+      cjs-module-lexer: 1.2.3
+      collect-v8-coverage: 1.0.2
       glob: 7.2.3
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
       jest-haste-map: 29.7.0
       jest-message-util: 29.7.0
       jest-mock: 29.7.0
@@ -3696,18 +3456,18 @@ packages:
     resolution: {integrity: sha512-Rm0BMWtxBcioHr1/OX5YCP8Uov4riHvKPknOGs804Zg9JGZgmIBkbtlxJC/7Z4msKYVbIJtfU+tKb8xlYNfdkw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      '@babel/core': 7.22.10
-      '@babel/generator': 7.22.10
-      '@babel/plugin-syntax-jsx': 7.18.6(@babel/core@7.22.10)
-      '@babel/plugin-syntax-typescript': 7.20.0(@babel/core@7.22.10)
-      '@babel/types': 7.22.10
+      '@babel/core': 7.24.3
+      '@babel/generator': 7.24.1
+      '@babel/plugin-syntax-jsx': 7.24.1(@babel/core@7.24.3)
+      '@babel/plugin-syntax-typescript': 7.24.1(@babel/core@7.24.3)
+      '@babel/types': 7.24.0
       '@jest/expect-utils': 29.7.0
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
-      babel-preset-current-node-syntax: 1.0.1(@babel/core@7.22.10)
+      babel-preset-current-node-syntax: 1.0.1(@babel/core@7.24.3)
       chalk: 4.1.2
       expect: 29.7.0
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
       jest-diff: 29.7.0
       jest-get-type: 29.6.3
       jest-matcher-utils: 29.7.0
@@ -3715,7 +3475,7 @@ packages:
       jest-util: 29.7.0
       natural-compare: 1.4.0
       pretty-format: 29.7.0
-      semver: 7.5.4
+      semver: 7.6.0
     transitivePeerDependencies:
       - supports-color
     dev: false
@@ -3725,10 +3485,10 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@jest/types': 29.6.3
-      '@types/node': 20.11.28
+      '@types/node': 20.12.2
       chalk: 4.1.2
-      ci-info: 3.7.0
-      graceful-fs: 4.2.10
+      ci-info: 3.9.0
+      graceful-fs: 4.2.11
       picomatch: 2.3.1
     dev: false
 
@@ -3750,7 +3510,7 @@ packages:
     dependencies:
       '@jest/test-result': 29.7.0
       '@jest/types': 29.6.3
-      '@types/node': 20.11.28
+      '@types/node': 20.12.2
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       emittery: 0.13.1
@@ -3762,13 +3522,13 @@ packages:
     resolution: {integrity: sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
-      '@types/node': 20.11.28
+      '@types/node': 20.12.2
       jest-util: 29.7.0
       merge-stream: 2.0.0
       supports-color: 8.1.1
     dev: false
 
-  /jest@29.7.0(@types/node@20.11.28):
+  /jest@29.7.0(@types/node@20.12.2):
     resolution: {integrity: sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     hasBin: true
@@ -3781,7 +3541,7 @@ packages:
       '@jest/core': 29.7.0
       '@jest/types': 29.6.3
       import-local: 3.1.0
-      jest-cli: 29.7.0(@types/node@20.11.28)
+      jest-cli: 29.7.0(@types/node@20.12.2)
     transitivePeerDependencies:
       - '@types/node'
       - babel-plugin-macros
@@ -3818,30 +3578,30 @@ packages:
         optional: true
     dependencies:
       abab: 2.0.6
-      acorn: 8.9.0
+      acorn: 8.11.3
       acorn-globals: 7.0.1
       cssom: 0.5.0
       cssstyle: 2.3.0
       data-urls: 3.0.2
       decimal.js: 10.4.3
       domexception: 4.0.0
-      escodegen: 2.0.0
+      escodegen: 2.1.0
       form-data: 4.0.0
       html-encoding-sniffer: 3.0.0
       http-proxy-agent: 5.0.0
       https-proxy-agent: 5.0.1
       is-potential-custom-element-name: 1.0.1
-      nwsapi: 2.2.2
+      nwsapi: 2.2.7
       parse5: 7.1.2
       saxes: 6.0.0
       symbol-tree: 3.2.4
-      tough-cookie: 4.1.2
+      tough-cookie: 4.1.3
       w3c-xmlserializer: 4.0.0
       webidl-conversions: 7.0.0
       whatwg-encoding: 2.0.0
       whatwg-mimetype: 3.0.0
       whatwg-url: 11.0.0
-      ws: 8.11.0
+      ws: 8.16.0
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - bufferutil
@@ -3855,6 +3615,10 @@ packages:
     hasBin: true
     dev: false
 
+  /json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+    dev: false
+
   /json-parse-even-better-errors@2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
     dev: false
@@ -3867,18 +3631,18 @@ packages:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
     dev: false
 
-  /json5@2.2.2:
-    resolution: {integrity: sha512-46Tk9JiOL2z7ytNQWFLpj99RZkVgeHf87yGQKsIkaPz1qSH9UczKH1rO7K3wgRselo0tYMUNfecYpm/p1vC7tQ==}
-    engines: {node: '>=6'}
-    hasBin: true
-    dev: false
-
   /json5@2.2.3:
     resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
     engines: {node: '>=6'}
     hasBin: true
     dev: false
 
+  /keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+    dependencies:
+      json-buffer: 3.0.1
+    dev: false
+
   /kleur@3.0.3:
     resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
     engines: {node: '>=6'}
@@ -3889,14 +3653,6 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
-  /levn@0.3.0:
-    resolution: {integrity: sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==}
-    engines: {node: '>= 0.8.0'}
-    dependencies:
-      prelude-ls: 1.1.2
-      type-check: 0.3.2
-    dev: false
-
   /levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
@@ -3905,10 +3661,10 @@ packages:
       type-check: 0.4.0
     dev: false
 
-  /lichess-pgn-viewer@2.0.1:
-    resolution: {integrity: sha512-WISw0/08RKQiv2gdAmIcdXNP9mg3e8Ybp31ORu9dKkl9+tRz2Q9Gx6efo5V29Pr+o6hUDTmjB7UFI1H+l4s9Ag==}
+  /lichess-pgn-viewer@2.1.0:
+    resolution: {integrity: sha512-mWr/OtdB4D55ZUvZvIvcE3jjhghrAmqgqlOTLLP2U48eMi6wqAbA9sae8mQajg4tDJuN5yNQuvxiJaFXTeiYuw==}
     dependencies:
-      '@types/node': 20.9.1
+      '@types/node': 20.12.2
       chessground: 9.0.4
       chessops: 0.12.7
       snabbdom: 3.5.1
@@ -3954,7 +3710,7 @@ packages:
       colorette: 2.0.20
       eventemitter3: 5.0.1
       log-update: 6.0.0
-      rfdc: 1.3.0
+      rfdc: 1.3.1
       wrap-ansi: 9.0.0
     dev: false
 
@@ -3980,7 +3736,7 @@ packages:
     resolution: {integrity: sha512-niTvB4gqvtof056rRIrTZvjNYE4rCUzO6X/X+kYjd7WFxXeJ0NwEFnRxX6ehkvv3jTwrXnNdtAak5XYZuIyPFw==}
     engines: {node: '>=18'}
     dependencies:
-      ansi-escapes: 6.2.0
+      ansi-escapes: 6.2.1
       cli-cursor: 4.0.0
       slice-ansi: 7.1.0
       strip-ansi: 7.1.0
@@ -4007,11 +3763,11 @@ packages:
       yallist: 4.0.0
     dev: false
 
-  /make-dir@3.1.0:
-    resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
-    engines: {node: '>=8'}
+  /make-dir@4.0.0:
+    resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
+    engines: {node: '>=10'}
     dependencies:
-      semver: 6.3.1
+      semver: 7.6.0
     dev: false
 
   /makeerror@1.0.12:
@@ -4088,10 +3844,6 @@ packages:
     resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==}
     dev: false
 
-  /node-releases@2.0.13:
-    resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
-    dev: false
-
   /node-releases@2.0.14:
     resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
     dev: false
@@ -4112,15 +3864,15 @@ packages:
       path-key: 3.1.1
     dev: false
 
-  /npm-run-path@5.1.0:
-    resolution: {integrity: sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==}
+  /npm-run-path@5.3.0:
+    resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dependencies:
       path-key: 4.0.0
     dev: false
 
-  /nwsapi@2.2.2:
-    resolution: {integrity: sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw==}
+  /nwsapi@2.2.7:
+    resolution: {integrity: sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==}
     dev: false
 
   /object-assign@4.1.1:
@@ -4141,9 +3893,9 @@ packages:
       '@blakeembrey/deque': 1.0.5
       '@blakeembrey/template': 1.1.0
       arg: 4.1.3
-      chokidar: 3.5.3
+      chokidar: 3.6.0
       cross-spawn: 7.0.3
-      ignore: 5.2.4
+      ignore: 5.3.1
       tree-kill: 1.2.2
     dev: false
 
@@ -4161,18 +3913,6 @@ packages:
       mimic-fn: 4.0.0
     dev: false
 
-  /optionator@0.8.3:
-    resolution: {integrity: sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==}
-    engines: {node: '>= 0.8.0'}
-    dependencies:
-      deep-is: 0.1.4
-      fast-levenshtein: 2.0.6
-      levn: 0.3.0
-      prelude-ls: 1.1.2
-      type-check: 0.3.2
-      word-wrap: 1.2.3
-    dev: false
-
   /optionator@0.9.3:
     resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
     engines: {node: '>= 0.8.0'}
@@ -4185,8 +3925,8 @@ packages:
       type-check: 0.4.0
     dev: false
 
-  /orderedmap@2.1.0:
-    resolution: {integrity: sha512-/pIFexOm6S70EPdznemIz3BQZoJ4VTFrhqzu0ACBqBgeLsLxq8e6Jim63ImIfwW/zAD1AlXpRMlOv3aghmo4dA==}
+  /orderedmap@2.1.1:
+    resolution: {integrity: sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==}
     dev: false
 
   /p-limit@2.3.0:
@@ -4233,7 +3973,7 @@ packages:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
     dependencies:
-      '@babel/code-frame': 7.22.10
+      '@babel/code-frame': 7.24.2
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
@@ -4289,8 +4029,8 @@ packages:
     hasBin: true
     dev: false
 
-  /pirates@4.0.5:
-    resolution: {integrity: sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==}
+  /pirates@4.0.6:
+    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
     dev: false
 
@@ -4301,11 +4041,6 @@ packages:
       find-up: 4.1.0
     dev: false
 
-  /prelude-ls@1.1.2:
-    resolution: {integrity: sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==}
-    engines: {node: '>= 0.8.0'}
-    dev: false
-
   /prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -4342,75 +4077,76 @@ packages:
       react-is: 16.13.1
     dev: false
 
-  /prosemirror-commands@1.1.12:
-    resolution: {integrity: sha512-+CrMs3w/ZVPSkR+REg8KL/clyFLv/1+SgY/OMN+CB22Z24j9TZDje72vL36lOZ/E4NeRXuiCcmENcW/vAcG67A==}
+  /prosemirror-commands@1.5.2:
+    resolution: {integrity: sha512-hgLcPaakxH8tu6YvVAaILV2tXYsW3rAdDR8WNkeKGcgeMVQg3/TMhPdVoh7iAmfgVjZGtcOSjKiQaoeKjzd2mQ==}
     dependencies:
-      prosemirror-model: 1.18.3
-      prosemirror-state: 1.4.2
-      prosemirror-transform: 1.7.0
+      prosemirror-model: 1.19.4
+      prosemirror-state: 1.4.3
+      prosemirror-transform: 1.8.0
     dev: false
 
-  /prosemirror-history@1.1.3:
-    resolution: {integrity: sha512-zGDotijea+vnfnyyUGyiy1wfOQhf0B/b6zYcCouBV8yo6JmrE9X23M5q7Nf/nATywEZbgRLG70R4DmfSTC+gfg==}
+  /prosemirror-history@1.4.0:
+    resolution: {integrity: sha512-UUiGzDVcqo1lovOPdi9YxxUps3oBFWAIYkXLu3Ot+JPv1qzVogRbcizxK3LhHmtaUxclohgiOVesRw5QSlMnbQ==}
     dependencies:
-      prosemirror-state: 1.4.2
-      prosemirror-transform: 1.7.0
-      rope-sequence: 1.3.3
+      prosemirror-state: 1.4.3
+      prosemirror-transform: 1.8.0
+      prosemirror-view: 1.33.3
+      rope-sequence: 1.3.4
     dev: false
 
-  /prosemirror-inputrules@1.1.3:
-    resolution: {integrity: sha512-ZaHCLyBtvbyIHv0f5p6boQTIJjlD6o2NPZiEaZWT2DA+j591zS29QQEMT4lBqwcLW3qRSf7ZvoKNbf05YrsStw==}
+  /prosemirror-inputrules@1.4.0:
+    resolution: {integrity: sha512-6ygpPRuTJ2lcOXs9JkefieMst63wVJBgHZGl5QOytN7oSZs3Co/BYbc3Yx9zm9H37Bxw8kVzCnDsihsVsL4yEg==}
     dependencies:
-      prosemirror-state: 1.4.2
-      prosemirror-transform: 1.7.0
+      prosemirror-state: 1.4.3
+      prosemirror-transform: 1.8.0
     dev: false
 
-  /prosemirror-keymap@1.1.5:
-    resolution: {integrity: sha512-8SZgPH3K+GLsHL2wKuwBD9rxhsbnVBTwpHCO4VUO5GmqUQlxd/2GtBVWTsyLq4Dp3N9nGgPd3+lZFKUDuVp+Vw==}
+  /prosemirror-keymap@1.2.2:
+    resolution: {integrity: sha512-EAlXoksqC6Vbocqc0GtzCruZEzYgrn+iiGnNjsJsH4mrnIGex4qbLdWWNza3AW5W36ZRrlBID0eM6bdKH4OStQ==}
     dependencies:
-      prosemirror-state: 1.4.2
-      w3c-keyname: 2.2.6
+      prosemirror-state: 1.4.3
+      w3c-keyname: 2.2.8
     dev: false
 
-  /prosemirror-model@1.18.3:
-    resolution: {integrity: sha512-yUVejauEY3F1r7PDy4UJKEGeIU+KFc71JQl5sNvG66CLVdKXRjhWpBW6KMeduGsmGOsw85f6EGrs6QxIKOVILA==}
+  /prosemirror-model@1.19.4:
+    resolution: {integrity: sha512-RPmVXxUfOhyFdayHawjuZCxiROsm9L4FCUA6pWI+l7n2yCBsWy9VpdE1hpDHUS8Vad661YLY9AzqfjLhAKQ4iQ==}
     dependencies:
-      orderedmap: 2.1.0
+      orderedmap: 2.1.1
     dev: false
 
-  /prosemirror-state@1.4.2:
-    resolution: {integrity: sha512-puuzLD2mz/oTdfgd8msFbe0A42j5eNudKAAPDB0+QJRw8cO1ygjLmhLrg9RvDpf87Dkd6D4t93qdef00KKNacQ==}
+  /prosemirror-state@1.4.3:
+    resolution: {integrity: sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==}
     dependencies:
-      prosemirror-model: 1.18.3
-      prosemirror-transform: 1.7.0
-      prosemirror-view: 1.29.1
+      prosemirror-model: 1.19.4
+      prosemirror-transform: 1.8.0
+      prosemirror-view: 1.33.3
     dev: false
 
-  /prosemirror-transform@1.7.0:
-    resolution: {integrity: sha512-O4T697Cqilw06Zvc3Wm+e237R6eZtJL/xGMliCi+Uo8VL6qHk6afz1qq0zNjT3eZMuYwnP8ZS0+YxX/tfcE9TQ==}
+  /prosemirror-transform@1.8.0:
+    resolution: {integrity: sha512-BaSBsIMv52F1BVVMvOmp1yzD3u65uC3HTzCBQV1WDPqJRQ2LuHKcyfn0jwqodo8sR9vVzMzZyI+Dal5W9E6a9A==}
     dependencies:
-      prosemirror-model: 1.18.3
+      prosemirror-model: 1.19.4
     dev: false
 
-  /prosemirror-view@1.29.1:
-    resolution: {integrity: sha512-OhujVZSDsh0l0PyHNdfaBj6DBkbhYaCfbaxmTeFrMKd/eWS+G6IC+OAbmR9IsLC8Se1HSbphMaXnsXjupHL3UQ==}
+  /prosemirror-view@1.33.3:
+    resolution: {integrity: sha512-P4Ao/bc4OrU/2yLIf8dL4lJaEtjLR3QjIvQHgJYp2jUS7kYM4bSR6okbBjkqzOs/FwUon6UGjTLdKMnPL1MZqw==}
     dependencies:
-      prosemirror-model: 1.18.3
-      prosemirror-state: 1.4.2
-      prosemirror-transform: 1.7.0
+      prosemirror-model: 1.19.4
+      prosemirror-state: 1.4.3
+      prosemirror-transform: 1.8.0
     dev: false
 
   /psl@1.9.0:
     resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
     dev: false
 
-  /punycode@2.3.0:
-    resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
+  /punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
     dev: false
 
-  /pure-rand@6.0.2:
-    resolution: {integrity: sha512-6Yg0ekpKICSjPswYOuC5sku/TSWaRYlA0qsXqJgM/d/4pLPHPuTxK7Nbf7jFKzAeedUhR8C7K9Uv63FBsSo8xQ==}
+  /pure-rand@6.1.0:
+    resolution: {integrity: sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==}
     dev: false
 
   /querystringify@2.2.0:
@@ -4467,11 +4203,11 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
-  /resolve@1.22.1:
-    resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==}
+  /resolve@1.22.8:
+    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
     hasBin: true
     dependencies:
-      is-core-module: 2.11.0
+      is-core-module: 2.13.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
     dev: false
@@ -4489,8 +4225,8 @@ packages:
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
     dev: false
 
-  /rfdc@1.3.0:
-    resolution: {integrity: sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==}
+  /rfdc@1.3.1:
+    resolution: {integrity: sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg==}
     dev: false
 
   /rimraf@3.0.2:
@@ -4500,8 +4236,8 @@ packages:
       glob: 7.2.3
     dev: false
 
-  /rope-sequence@1.3.3:
-    resolution: {integrity: sha512-85aZYCxweiD5J8yTEbw+E6A27zSnLPNDL0WfPdw3YYodq7WjnTKo0q4dtyQ2gz23iPT8Q9CUyJtAaUNcTxRf5Q==}
+  /rope-sequence@1.3.4:
+    resolution: {integrity: sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==}
     dev: false
 
   /run-parallel@1.2.0:
@@ -4514,8 +4250,8 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: false
 
-  /sax@1.2.4:
-    resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
+  /sax@1.3.0:
+    resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==}
     dev: false
 
   /saxes@6.0.0:
@@ -4530,8 +4266,8 @@ packages:
     hasBin: true
     dev: false
 
-  /semver@7.5.4:
-    resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
+  /semver@7.6.0:
+    resolution: {integrity: sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==}
     engines: {node: '>=10'}
     hasBin: true
     dependencies:
@@ -4554,7 +4290,7 @@ packages:
     resolution: {integrity: sha512-2hbz3N7GuuTjI7y3sfnoqKnH0cNhExx67IJtCTGQI2KhBEyvegsDYW5qjj5BlvvVtQjmL/O/J1GQEciwfoZWpw==}
     engines: {node: 16.* || >= 18}
     dependencies:
-      '@floating-ui/dom': 1.5.3
+      '@floating-ui/dom': 1.6.3
       deepmerge: 4.3.1
     dev: false
 
@@ -4822,12 +4558,12 @@ packages:
       is-number: 7.0.0
     dev: false
 
-  /tough-cookie@4.1.2:
-    resolution: {integrity: sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==}
+  /tough-cookie@4.1.3:
+    resolution: {integrity: sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==}
     engines: {node: '>=6'}
     dependencies:
       psl: 1.9.0
-      punycode: 2.3.0
+      punycode: 2.3.1
       universalify: 0.2.0
       url-parse: 1.5.10
     dev: false
@@ -4836,7 +4572,7 @@ packages:
     resolution: {integrity: sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==}
     engines: {node: '>=12'}
     dependencies:
-      punycode: 2.3.0
+      punycode: 2.3.1
     dev: false
 
   /tree-kill@1.2.2:
@@ -4844,20 +4580,13 @@ packages:
     hasBin: true
     dev: false
 
-  /ts-api-utils@1.0.1(typescript@5.4.2):
-    resolution: {integrity: sha512-lC/RGlPmwdrIBFTX59wwNzqh7aR2otPNPR/5brHZm/XKFYKsfqxihXUe9pU3JI+3vGkl+vyCoNNnPhJn3aLK1A==}
-    engines: {node: '>=16.13.0'}
+  /ts-api-utils@1.3.0(typescript@5.4.3):
+    resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==}
+    engines: {node: '>=16'}
     peerDependencies:
       typescript: '>=4.2.0'
     dependencies:
-      typescript: 5.4.2
-    dev: false
-
-  /type-check@0.3.2:
-    resolution: {integrity: sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==}
-    engines: {node: '>= 0.8.0'}
-    dependencies:
-      prelude-ls: 1.1.2
+      typescript: 5.4.3
     dev: false
 
   /type-check@0.4.0:
@@ -4882,17 +4611,12 @@ packages:
     engines: {node: '>=10'}
     dev: false
 
-  /type-fest@3.13.1:
-    resolution: {integrity: sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==}
-    engines: {node: '>=14.16'}
-    dev: false
-
   /types-serviceworker@0.0.1:
     resolution: {integrity: sha512-EKO/SZ3AsHEZsqv+bsdlTCz5k955riOksnYGlG6JhVwNTVsPWj/TScTbiNVZ5+mmX8TcEXF0C8aSxUw0jTDpIw==}
     dev: false
 
-  /typescript@5.4.2:
-    resolution: {integrity: sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==}
+  /typescript@5.4.3:
+    resolution: {integrity: sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==}
     engines: {node: '>=14.17'}
     hasBin: true
     dev: false
@@ -4910,17 +4634,6 @@ packages:
     engines: {node: '>= 4.0.0'}
     dev: false
 
-  /update-browserslist-db@1.0.11(browserslist@4.21.10):
-    resolution: {integrity: sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==}
-    hasBin: true
-    peerDependencies:
-      browserslist: '>= 4.21.0'
-    dependencies:
-      browserslist: 4.21.10
-      escalade: 3.1.1
-      picocolors: 1.0.0
-    dev: false
-
   /update-browserslist-db@1.0.13(browserslist@4.23.0):
     resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
     hasBin: true
@@ -4928,14 +4641,14 @@ packages:
       browserslist: '>= 4.21.0'
     dependencies:
       browserslist: 4.23.0
-      escalade: 3.1.1
+      escalade: 3.1.2
       picocolors: 1.0.0
     dev: false
 
   /uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
     dependencies:
-      punycode: 2.3.0
+      punycode: 2.3.1
     dev: false
 
   /url-parse@1.5.10:
@@ -4950,13 +4663,13 @@ packages:
     hasBin: true
     dev: false
 
-  /v8-to-istanbul@9.0.1:
-    resolution: {integrity: sha512-74Y4LqY74kLE6IFyIjPtkSTWzUZmj8tdHT9Ii/26dvQ6K9Dl2NbEfj0XgU2sHCtKgt5VupqhlO/5aWuqS+IY1w==}
+  /v8-to-istanbul@9.2.0:
+    resolution: {integrity: sha512-/EH/sDgxU2eGxajKdwLCDmQ4FWq+kpi3uCmBGpw1xJtnAxEjlD8j8PEiGWpCIMIs3ciNAgH0d3TTJiUkYzyZjA==}
     engines: {node: '>=10.12.0'}
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.19
-      '@types/istanbul-lib-coverage': 2.0.4
-      convert-source-map: 1.9.0
+      '@jridgewell/trace-mapping': 0.3.25
+      '@types/istanbul-lib-coverage': 2.0.6
+      convert-source-map: 2.0.0
     dev: false
 
   /vosk-browser@0.0.8:
@@ -4965,8 +4678,8 @@ packages:
       uuid: 9.0.0
     dev: false
 
-  /w3c-keyname@2.2.6:
-    resolution: {integrity: sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg==}
+  /w3c-keyname@2.2.8:
+    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
     dev: false
 
   /w3c-xmlserializer@4.0.0:
@@ -5015,11 +4728,6 @@ packages:
       isexe: 2.0.0
     dev: false
 
-  /word-wrap@1.2.3:
-    resolution: {integrity: sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
   /wrap-ansi@7.0.0:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
     engines: {node: '>=10'}
@@ -5050,12 +4758,12 @@ packages:
       signal-exit: 3.0.7
     dev: false
 
-  /ws@8.11.0:
-    resolution: {integrity: sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==}
+  /ws@8.16.0:
+    resolution: {integrity: sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==}
     engines: {node: '>=10.0.0'}
     peerDependencies:
       bufferutil: ^4.0.1
-      utf-8-validate: ^5.0.2
+      utf-8-validate: '>=5.0.2'
     peerDependenciesMeta:
       bufferutil:
         optional: true
@@ -5072,7 +4780,7 @@ packages:
     resolution: {integrity: sha512-drPFnkQJik/O+uPKpqSgr22mpuFHqKdbS835iAQrUC73L2F5WkboIRd63ai/2Yg6I1jzifPFKH2NTK+cfglkIA==}
     engines: {node: '>=4.0.0'}
     dependencies:
-      sax: 1.2.4
+      sax: 1.3.0
       xmlbuilder: 11.0.1
     dev: false
 
@@ -5108,12 +4816,12 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
-  /yargs@17.6.2:
-    resolution: {integrity: sha512-1/9UrdHjDZc0eOU0HxOHoS78C69UD3JRMvzlJ7S79S2nTaWRA/whGCTV8o9e/N/1Va9YIV7Q4sOxD8VV4pCWOw==}
+  /yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
     engines: {node: '>=12'}
     dependencies:
       cliui: 8.0.1
-      escalade: 3.1.1
+      escalade: 3.1.2
       get-caller-file: 2.0.5
       require-directory: 2.1.1
       string-width: 4.2.3
diff --git a/public/css/README b/public/css/README
deleted file mode 100644
index 7db2043cb4578..0000000000000
--- a/public/css/README
+++ /dev/null
@@ -1,2 +0,0 @@
-Don't modify these files.
-They are generated from SCSS code in ui/ modules.
diff --git a/ui/.build/package.json b/ui/.build/package.json
index 24a656a1beb35..a276a56dffea3 100644
--- a/ui/.build/package.json
+++ b/ui/.build/package.json
@@ -6,10 +6,12 @@
   "license": "AGPL-3.0-or-later",
   "type": "commonjs",
   "dependencies": {
-    "@types/node": "^20.11.28",
-    "typescript": "^5.4.2",
+    "@types/node": "^20.11.30",
+    "@types/tinycolor2": "^1.4.6",
     "esbuild": "^0.20.2",
-    "fast-glob": "^3.3.2"
+    "fast-glob": "^3.3.2",
+    "tinycolor2": "^1.6.0",
+    "typescript": "^5.4.3"
   },
   "scripts": {
     "dev": "tsc && node dist/main.js"
diff --git a/ui/.build/readme b/ui/.build/readme
index 9a3c63fd90e4a..d36c0bc9d1bb9 100644
--- a/ui/.build/readme
+++ b/ui/.build/readme
@@ -22,7 +22,7 @@ Options:
 
 Examples:
   ./build -c                 # clean build artifacts, exit without building
-  ./build -d                 # build client sssets with site.debug = true
+  ./build -d                 # build client assets with site.debug = true
   ./build -wn                # build, watch for changes, no pnpm install
   ./build -r                 # build, watch, and rebuild on package.json change
   ./build -rd                # build, watch, rebuild on package.json change, site.debug = true
diff --git a/ui/.build/src/build.ts b/ui/.build/src/build.ts
index fdc5dacee00c1..52e82aba8372b 100644
--- a/ui/.build/src/build.ts
+++ b/ui/.build/src/build.ts
@@ -6,7 +6,7 @@ import { tsc, stopTsc } from './tsc';
 import { sass, stopSass } from './sass';
 import { esbuild, stopEsbuild } from './esbuild';
 import { copies, stopCopies } from './copies';
-import { startTickling, stopTickling } from './tickler';
+import { startMonitor, stopMonitor } from './monitor';
 import { clean } from './clean';
 import { LichessModule, env, errorMark, colors as c } from './main';
 
@@ -30,16 +30,21 @@ export async function build(mods: string[]) {
 
   if (mods.length) env.log(`Building ${c.grey(buildModules.map(x => x.name).join(', '))}`);
 
-  await Promise.allSettled([fs.promises.mkdir(env.jsDir), fs.promises.mkdir(env.cssDir)]);
+  await Promise.allSettled([
+    fs.promises.mkdir(env.jsDir),
+    fs.promises.mkdir(env.cssDir),
+    fs.promises.mkdir(env.themeGenDir),
+    fs.promises.mkdir(env.cssTempDir),
+  ]);
   sass();
   await tsc();
   await copies();
   await esbuild();
-  startTickling(mods);
+  startMonitor(mods);
 }
 
 export async function stop() {
-  stopTickling();
+  stopMonitor();
   stopSass();
   stopTsc();
   stopCopies();
diff --git a/ui/.build/src/clean.ts b/ui/.build/src/clean.ts
index 4e0df6824a1e4..ef6912907bcd5 100644
--- a/ui/.build/src/clean.ts
+++ b/ui/.build/src/clean.ts
@@ -9,23 +9,24 @@ const globOpts: fg.Options = {
   markDirectories: true,
 };
 
+const globs = [
+  '**/node_modules',
+  '**/css/**/gen',
+  'ui/.build/dist/css',
+  'ui/*/dist',
+  'ui/*/tsconfig.tsbuildinfo',
+  'public/compiled',
+  'public/npm',
+  'public/css/*.css*',
+];
+
 export async function clean() {
   if (!env.clean) return;
 
-  const globs = [
-    '**/node_modules',
-    'ui/*/dist',
-    'ui/*/tsconfig.tsbuildinfo',
-    'public/compiled',
-    'public/npm',
-    'public/css/*.css*',
-  ];
-  if (env.cleanTheme) globs.push('**/css/build/gen');
-
   for (const glob of globs) {
     env.log(`Cleaning '${c.cyan(glob)}'...`);
     for await (const f of fg.stream(glob, { cwd: env.rootDir, ...globOpts })) {
-      if (f.includes('ui/.build')) continue;
+      if (f.includes('ui/.build') && !f.includes('dist/css')) continue;
       if (f[f.length - 1] === '/') await fs.rm(f, { recursive: true });
       else await fs.unlink(f);
     }
diff --git a/ui/.build/src/copies.ts b/ui/.build/src/copies.ts
index c0ff27b7dfd93..c9f36ef80ca19 100644
--- a/ui/.build/src/copies.ts
+++ b/ui/.build/src/copies.ts
@@ -1,34 +1,34 @@
 import * as fs from 'node:fs';
 import * as path from 'node:path';
 import { globArray } from './parse';
-import { Copy, env, errorMark, colors as c } from './main';
+import { Sync, env, errorMark, colors as c } from './main';
 import { buildModules } from './build';
 
 const globRe = /[*?!{}[\]()]|\*\*|\[[^[\]]*\]/;
-const copyWatch: fs.FSWatcher[] = [];
+const syncWatch: fs.FSWatcher[] = [];
 let watchTimeout: NodeJS.Timeout | undefined;
 
 export function stopCopies() {
   clearTimeout(watchTimeout);
   watchTimeout = undefined;
-  for (const watcher of copyWatch) watcher.close();
-  copyWatch.length = 0;
+  for (const watcher of syncWatch) watcher.close();
+  syncWatch.length = 0;
 }
 
 export async function copies() {
   if (!env.copies) return;
-  const watched = new Map<string, Copy[]>();
+  const watched = new Map<string, Sync[]>();
   const updated = new Set<string>();
 
   const fire = () => {
-    updated.forEach(d => watched.get(d)?.forEach(globCopy));
+    updated.forEach(d => watched.get(d)?.forEach(globSync));
     updated.clear();
     watchTimeout = undefined;
   };
   for (const mod of buildModules) {
-    if (!mod?.copy) continue;
-    for (const cp of mod.copy) {
-      for (const src of await globCopy(cp)) {
+    if (!mod?.sync) continue;
+    for (const cp of mod.sync) {
+      for (const src of await globSync(cp)) {
         watched.set(src, [...(watched.get(src) ?? []), cp]);
       }
     }
@@ -41,14 +41,14 @@ export async function copies() {
         watchTimeout = setTimeout(fire, 2000);
       });
       watcher.on('error', (err: Error) => env.error(err));
-      copyWatch.push(watcher);
+      syncWatch.push(watcher);
     }
   }
 }
 
-async function globCopy(cp: Copy): Promise<Set<string>> {
+async function globSync(cp: Sync): Promise<Set<string>> {
   const watchDirs = new Set<string>();
-  const dest = path.join(cp.mod.root, cp.dest) + path.sep;
+  const dest = path.join(env.rootDir, cp.dest) + path.sep;
 
   const globIndex = cp.src.search(globRe);
   const globRoot =
@@ -66,13 +66,13 @@ async function globCopy(cp: Copy): Promise<Set<string>> {
     const srcPath = path.join(cp.mod.root, src);
     watchDirs.add(path.dirname(srcPath));
     const destPath = path.join(dest, src.slice(globRoot.length));
-    fileCopies.push(copyOne(srcPath, destPath, cp.mod.name));
+    fileCopies.push(syncOne(srcPath, destPath, cp.mod.name));
   }
   await Promise.allSettled(fileCopies);
   return watchDirs;
 }
 
-async function copyOne(absSrc: string, absDest: string, modName: string) {
+async function syncOne(absSrc: string, absDest: string, modName: string) {
   try {
     const [src, dest] = (
       await Promise.allSettled([
@@ -86,7 +86,7 @@ async function copyOne(absSrc: string, absDest: string, modName: string) {
       fs.utimes(absDest, src.atime, src.mtime, () => {});
     }
   } catch (_) {
-    env.log(`[${c.grey(modName)}] - ${errorMark} - failed copy '${c.cyan(absSrc)}' to '${c.cyan(absDest)}'`);
+    env.log(`[${c.grey(modName)}] - ${errorMark} - failed sync '${c.cyan(absSrc)}' to '${c.cyan(absDest)}'`);
   }
 }
 
diff --git a/ui/.build/src/esbuild.ts b/ui/.build/src/esbuild.ts
index 5b6bedbc6a60d..cbee222b55a98 100644
--- a/ui/.build/src/esbuild.ts
+++ b/ui/.build/src/esbuild.ts
@@ -1,62 +1,52 @@
-import * as cps from 'node:child_process';
 import * as path from 'node:path';
 import * as es from 'esbuild';
 import { preModule, buildModules } from './build';
 import { env, errorMark, colors as c } from './main';
+import { js as jsManifest } from './manifest';
 
-const typeBundles = new Map<string, Map<string, string>>();
+const bundles = new Map<string, string>();
 const esbuildCtx: es.BuildContext[] = [];
 
 export async function stopEsbuild() {
   const proof = Promise.allSettled(esbuildCtx.map(x => x.dispose()));
   esbuildCtx.length = 0;
-  typeBundles.clear();
+  bundles.clear();
   return proof;
 }
 
 export async function esbuild(): Promise<void> {
   if (!env.esbuild) return;
 
-  const define: { [_: string]: string } = {
-    __info__: JSON.stringify({
-      date: new Date(new Date().toUTCString()).toISOString().split('.')[0] + '+00:00',
-      commit: cps.execSync('git rev-parse -q HEAD', { encoding: 'utf-8' }).trim(),
-      message: cps.execSync('git log -1 --pretty=%s', { encoding: 'utf-8' }).trim(),
-    }),
-    __debug__: String(env.debug),
-  };
+  const entryPoints = [];
   for (const mod of buildModules) {
     preModule(mod);
-    for (const tpe in mod.bundles) {
-      if (!typeBundles.has(tpe)) typeBundles.set(tpe, new Map());
-      for (const r of mod.bundles[tpe]) {
-        typeBundles.get(tpe)?.set(r.output, path.join(mod.root, r.input));
-      }
+    for (const r of mod.bundles ?? []) {
+      entryPoints.push(path.join(mod.root, r.input));
     }
   }
-  for (const [tpe, bundles] of typeBundles) {
-    const ctx = await es.context({
-      sourcemap: !env.prod,
-      define,
-      format: tpe as es.Format,
-      target: 'es2018',
-      logLevel: 'silent',
-      splitting: env.split && tpe === 'esm',
-      bundle: true,
-      outdir: env.jsDir,
-      minify: env.prod,
-      entryPoints: Object.fromEntries(bundles),
-      treeShaking: true,
-      outExtension: { '.js': env.prod ? '.min.js' : '.js' },
-      plugins: [onEndPlugin],
-    });
-    if (env.watch) {
-      ctx.watch();
-      esbuildCtx.push(ctx);
-    } else {
-      await ctx.rebuild();
-      await ctx.dispose();
-    }
+
+  const ctx = await es.context({
+    entryPoints,
+    bundle: true,
+    metafile: true,
+    treeShaking: true,
+    splitting: true,
+    format: 'esm',
+    target: 'es2018',
+    logLevel: 'silent',
+    sourcemap: !env.prod,
+    minify: env.prod,
+    outdir: env.jsDir,
+    entryNames: '[name].[hash]',
+    chunkNames: 'common.[hash]',
+    plugins: [onEndPlugin],
+  });
+  if (env.watch) {
+    ctx.watch();
+    esbuildCtx.push(ctx);
+  } else {
+    await ctx.rebuild();
+    await ctx.dispose();
   }
 }
 
@@ -66,8 +56,9 @@ const onEndPlugin = {
     build.onEnd((result: es.BuildResult) => {
       for (const err of result.errors) esbuildMessage(err, true);
       for (const warn of result.warnings) esbuildMessage(warn);
-      typeBundles.delete(typeBundles.keys().next().value);
-      if (result.errors.length || !typeBundles.size) env.done(result.errors.length, 'esbuild');
+      env.done(result.errors.length, 'esbuild');
+      if (result.errors.length) return;
+      jsManifest(result.metafile!);
     });
   },
 };
diff --git a/ui/.build/src/main.ts b/ui/.build/src/main.ts
index 13e6fda449885..1eaf2f9d7ada7 100644
--- a/ui/.build/src/main.ts
+++ b/ui/.build/src/main.ts
@@ -4,27 +4,29 @@ import * as fs from 'node:fs';
 import { clean } from './clean';
 import { build, postBuild } from './build';
 
-const shortArgs = 'hrwpsdcn';
-const longArgs = [
-  '--tsc',
-  '--sass',
-  '--esbuild',
-  '--copies',
-  '--no-color',
-  '--no-time',
-  '--no-context',
-  '--help',
-  '--rebuild',
-  '--watch',
-  '--prod',
-  '--split',
-  '--debug',
-  '--clean',
-  '--clean-theme',
-  '--update',
-  '--no-install',
+// readme should be up to date but this is the definitive list of flags
+const args = [
+  ['--tsc'],
+  ['--sass'],
+  ['--esbuild'],
+  ['--copies'],
+  ['--no-color'],
+  ['--no-time'],
+  ['--no-context'],
+  ['--help'],
+  ['--rebuild', '-r'],
+  ['--watch', '-w'],
+  ['--prod', '-p'],
+  ['--debug', '-d'],
+  ['--clean-build', '-c'],
+  ['--clean'],
+  ['--update'],
+  ['--no-install', '-n'],
 ];
 
+const longArgs = args.map(x => x[0]);
+const shortArgs = args.map(x => x[1] && x[1][1]).filter(x => x);
+
 export function main() {
   const args = ps.argv.slice(2);
   const oneDashArgs = args.filter(x => /^-([a-z]+)$/.test(x))?.flatMap(x => x.slice(1).split(''));
@@ -47,11 +49,10 @@ export function main() {
   env.rebuild = args.includes('--rebuild') || oneDashArgs.includes('r');
   env.watch = env.rebuild || args.includes('--watch') || oneDashArgs.includes('w');
   env.prod = args.includes('--prod') || oneDashArgs.includes('p');
-  env.split = args.includes('--split') || oneDashArgs.includes('s');
   env.debug = args.includes('--debug') || oneDashArgs.includes('d');
-  env.clean = args.some(x => x.startsWith('--clean')) || oneDashArgs.includes('c');
-  env.cleanTheme = args.includes('--clean-theme');
+  env.clean = args.some(x => x === '--clean-build') || oneDashArgs.includes('c');
   env.install = !args.includes('--no-install') && !oneDashArgs.includes('n');
+  env.rgb = args.includes('--rgb');
 
   if (env.rebuild && !env.install) {
     env.warn(`--rebuild incompatible with --no-install`);
@@ -60,7 +61,8 @@ export function main() {
 
   if (args.length === 1 && (args[0] === '--help' || args[0] === '-h')) {
     console.log(fs.readFileSync(path.resolve(__dirname, '../readme'), 'utf8'));
-  } else if (args.length === 1 && (args[0].startsWith('--clean') || args[0] === '-c')) {
+  } else if (args.includes('--clean')) {
+    env.log('Cleaning then exiting. Use --clean-build or -c to clean then build');
     clean();
   } else {
     build(args.filter(x => !x.startsWith('-')));
@@ -74,14 +76,12 @@ export interface LichessModule {
   pre: string[][]; // pre-bundle build steps from package.json scripts
   post: string[][]; // post-bundle build steps from package.json scripts
   hasTsconfig?: boolean; // fileExists('tsconfig.json')
-  bundles?: {
-    [moduleType: string]: LichessBundle[];
-  };
-  copy?: Copy[]; // pre-bundle filesystem copies from package json
+  bundles?: LichessBundle[];
+  sync?: Sync[]; // pre-bundle filesystem copies from package json
 }
 
-export interface Copy {
-  // src must be a file or a glob expression, use <dir>/** to copy whole directory
+export interface Sync {
+  // src must be a file or a glob expression, use <dir>/** to sync entire directories
   src: string;
   dest: string;
   mod: LichessModule;
@@ -119,10 +119,9 @@ class Env {
   watch = false;
   rebuild = false;
   clean = false;
-  cleanTheme = false;
   prod = false;
-  split = false;
   debug = false;
+  rgb = false;
   install = true;
   copies = true;
   exitCode = new Map<'sass' | 'tsc' | 'esbuild', number | false>();
@@ -152,9 +151,18 @@ class Env {
   get outDir(): string {
     return path.join(this.rootDir, 'public');
   }
+  get themeDir(): string {
+    return path.join(this.uiDir, 'common', 'css', 'theme');
+  }
+  get themeGenDir(): string {
+    return path.join(this.themeDir, 'gen');
+  }
   get cssDir(): string {
     return path.join(this.outDir, 'css');
   }
+  get cssTempDir(): string {
+    return path.join(this.buildDir, 'dist', 'css');
+  }
   get jsDir(): string {
     return path.join(this.outDir, 'compiled');
   }
diff --git a/ui/.build/src/manifest.ts b/ui/.build/src/manifest.ts
new file mode 100644
index 0000000000000..ade563e365066
--- /dev/null
+++ b/ui/.build/src/manifest.ts
@@ -0,0 +1,117 @@
+import * as cps from 'node:child_process';
+import * as path from 'node:path';
+import * as fs from 'node:fs';
+import * as crypto from 'node:crypto';
+import * as es from 'esbuild';
+import { env } from './main';
+import { globArray } from './parse';
+
+type Manifest = { [key: string]: { hash?: string; imports?: string[] } };
+const current: { js: Manifest; css: Manifest } = { js: {}, css: {} };
+let writeTimer: NodeJS.Timeout;
+
+export async function css() {
+  const files = await globArray(path.join(env.cssTempDir, '*.css'), { abs: true });
+  const css: string[][] = await Promise.all(files.map(hashMove));
+  const newCssManifest: Manifest = {};
+  for (const [name, hash] of css) newCssManifest[name] = { hash };
+  if (equivalent(newCssManifest, current.css)) return;
+  current.css = shallowSort({ ...current.css, ...newCssManifest });
+  clearTimeout(writeTimer);
+  writeTimer = setTimeout(write, 500);
+}
+
+const jsPathRe = /\.\.\/\.\.\/public\/compiled\/(.*)\.([A-Z0-9]+)\.js$/;
+export async function js(meta: es.Metafile) {
+  const newJsManifest: Manifest = {};
+  for (const [filename, info] of Object.entries(meta.outputs)) {
+    const match = filename.match(jsPathRe);
+    if (!match || !match[1] || !match[2]) continue;
+    let [name, hash] = [match[1], match[2]];
+    if (name === 'common') {
+      name = `common.${hash}`;
+      newJsManifest[name] = {};
+    } else newJsManifest[name] = { hash };
+    const imports: string[] = [];
+    for (const imp of info.imports) {
+      if (imp.kind === 'import-statement') {
+        const path = parsePath(imp.path);
+        if (path) imports.push(`${path.name}.${path.hash}.js`);
+      }
+    }
+    newJsManifest[name].imports = imports;
+  }
+  if (equivalent(newJsManifest, current.js)) return;
+  current.js = shallowSort({ ...current.js, ...newJsManifest });
+  clearTimeout(writeTimer);
+  writeTimer = setTimeout(write, 500);
+}
+
+async function write() {
+  const commitMessage = cps
+    .execSync('git log -1 --pretty=%s', { encoding: 'utf-8' })
+    .trim()
+    .replace(/'/g, '&#39;')
+    .replace(/"/g, '&quot;');
+  const clientJs: string[] = [
+    'if (!window.site) window.site={};',
+    'if (!window.site.info) window.site.info={};',
+    `window.site.info.date='${new Date(new Date().toUTCString()).toISOString().split('.')[0] + '+00:00'}';`,
+    `window.site.info.commit='${cps.execSync('git rev-parse -q HEAD', { encoding: 'utf-8' }).trim()}';`,
+    `window.site.info.message='${commitMessage}';`,
+    `window.site.debug=${env.debug};`,
+    'const m=window.site.manifest={css:{},js:{}};',
+  ];
+  for (const [name, info] of Object.entries(current.js)) {
+    if (!/common\.[A-Z0-9]{8}/.test(name)) clientJs.push(`m.js['${name}']='${info.hash}';`);
+  }
+  for (const [name, info] of Object.entries(current.css)) {
+    clientJs.push(`m.css['${name}']='${info.hash}';`);
+  }
+
+  const clientManifest = clientJs.join('\n');
+  const hash = crypto.createHash('sha256').update(clientManifest).digest('hex').slice(0, 8);
+  const serverManifest = { js: { manifest: { hash }, ...current.js }, css: { ...current.css } };
+
+  await Promise.all([
+    fs.promises.writeFile(path.join(env.jsDir, `manifest.${hash}.js`), clientManifest),
+    fs.promises.writeFile(
+      path.join(env.jsDir, `manifest.${env.prod ? 'prod' : 'dev'}.json`),
+      JSON.stringify(serverManifest, null, env.prod ? undefined : 2),
+    ),
+  ]);
+}
+
+async function hashMove(src: string) {
+  const content = await fs.promises.readFile(src, 'utf-8');
+  const hash = crypto.createHash('sha256').update(content).digest('hex').slice(0, 8);
+  const basename = path.basename(src, '.css');
+  await Promise.allSettled([
+    env.prod ? undefined : fs.promises.rename(`${src}.map`, path.join(env.cssDir, `${basename}.css.map`)),
+    fs.promises.rename(src, path.join(env.cssDir, `${basename}.${hash}.css`)),
+  ]);
+  return [path.basename(src, '.css'), hash];
+}
+
+function shallowSort(obj: { [key: string]: any }): { [key: string]: any } {
+  // es6 string properties are insertion order, we need more determinism
+  const sorted: { [key: string]: any } = {};
+  for (const key of Object.keys(obj).sort()) sorted[key] = obj[key];
+  return sorted;
+}
+
+function parsePath(path: string) {
+  const match = path.match(jsPathRe);
+  return match ? { name: match[1], hash: match[2] } : undefined;
+}
+
+function equivalent(a: any, b: any) {
+  // key order does NOT matter
+  if (typeof a !== typeof b) return false;
+  if (Array.isArray(a)) return a.length === b.length && a.every(x => b.includes(x));
+  if (typeof a !== 'object') return a === b;
+  for (const key in a) {
+    if (!(key in b) || !equivalent(a[key], b[key])) return false;
+  }
+  return true;
+}
diff --git a/ui/.build/src/tickler.ts b/ui/.build/src/monitor.ts
similarity index 90%
rename from ui/.build/src/tickler.ts
rename to ui/.build/src/monitor.ts
index 0011ab52a7a04..4a54b3e4ae418 100644
--- a/ui/.build/src/tickler.ts
+++ b/ui/.build/src/monitor.ts
@@ -11,7 +11,7 @@ const watchers: fs.FSWatcher[] = [];
 let reinitTimeout: NodeJS.Timeout | undefined;
 let tscTimeout: NodeJS.Timeout | undefined;
 
-export function stopTickling() {
+export function stopMonitor() {
   for (const w of watchers) w.close();
   watchers.length = 0;
   clearTimeout(tscTimeout);
@@ -19,16 +19,17 @@ export function stopTickling() {
   reinitTimeout = undefined;
 }
 
-export async function startTickling(mods: string[]) {
+export async function startMonitor(mods: string[]) {
   if (!env.watch) return;
   const typePkgs = await globArray('*/package.json', { cwd: env.typesDir, abs: true });
   const typings = await globArray('*/*.d.ts', { cwd: env.typesDir, abs: true });
-
   const tscChange = (t: any) => {
     if (reinitTimeout) return;
     stopTsc();
     clearTimeout(tscTimeout);
-    tscTimeout = setTimeout(() => reinitTimeout ?? tsc(), 2000);
+    tscTimeout = setTimeout(() => {
+      if (!reinitTimeout) tsc();
+    }, 2000);
   };
   const packageChange = async () => {
     if (env.rebuild) {
diff --git a/ui/.build/src/parse.ts b/ui/.build/src/parse.ts
index c5a307cfafb34..f99cefa13b3aa 100644
--- a/ui/.build/src/parse.ts
+++ b/ui/.build/src/parse.ts
@@ -18,8 +18,6 @@ export const parseModules = async (): Promise<[Map<string, LichessModule>, Map<s
       if (modules.has(dep)) deplist.push(dep);
     }
     moduleDeps.set(mod.name, deplist);
-    // for package.jsons with multiple esm bundles, subsequent bundles depend on the first
-    mod.bundles?.esm?.slice(1).forEach(r => moduleDeps.set(r.output, [mod.name, ...deplist]));
   }
   return [modules, moduleDeps];
 };
@@ -47,35 +45,17 @@ async function parseModule(moduleDir: string): Promise<LichessModule> {
   parseScripts(mod, 'scripts' in pkg ? pkg.scripts : {});
 
   if ('lichess' in pkg && 'modules' in pkg.lichess) {
-    for (const moduleType in pkg.lichess.modules) {
-      if (moduleType !== 'esm' && moduleType !== 'iife') {
-        env.log(
-          c.warn('WARNING') +
-            ` - Unsupported module type '${c.cyan(moduleType)}' in '${c.cyan(mod.name + '/package.json')}'`,
-        );
-        continue;
-      }
-      mod.bundles ??= {};
-      mod.bundles[moduleType] = Object.entries(pkg.lichess.modules[moduleType]).map(x => ({
-        input: x[0],
-        output: x[1] as string,
-      }));
-    }
+    mod.bundles = Object.entries(pkg.lichess.modules).map(x => ({
+      input: x[0],
+      output: x[1] as string,
+    }));
   }
-  if ('lichess' in pkg && 'copy' in pkg.lichess) {
-    const copy: any[] = Array.isArray(pkg.lichess.copy) ? pkg.lichess.copy : [pkg.lichess.copy];
-    const flattener = new Map<string, Set<string>>();
-    for (const s of copy) {
-      if (!Array.isArray(s.src)) s.src = [s.src];
-      for (const src of s.src) {
-        const srcDest = flattener.get(src) ?? new Set<string>();
-        srcDest.add(s.dest);
-        flattener.set(src, srcDest);
-      }
-    }
-    mod.copy = [];
-    for (const [src, dests] of flattener.entries())
-      for (const dest of dests) mod.copy.push({ src, dest, mod });
+  if ('lichess' in pkg && 'sync' in pkg.lichess) {
+    mod.sync = Object.entries(pkg.lichess.sync).map(x => ({
+      src: x[0],
+      dest: x[1] as string,
+      mod,
+    }));
   }
   return mod;
 }
diff --git a/ui/.build/src/sass.ts b/ui/.build/src/sass.ts
index dc15ca65d8ab0..b3aa2111ffce1 100644
--- a/ui/.build/src/sass.ts
+++ b/ui/.build/src/sass.ts
@@ -2,129 +2,189 @@ import * as cps from 'node:child_process';
 import * as fs from 'node:fs';
 import * as ps from 'node:process';
 import * as path from 'node:path';
+import clr from 'tinycolor2';
 import { env, colors as c, lines, errorMark } from './main';
-import { buildModules } from './build';
 import { globArray } from './parse';
+import { css as cssManifest } from './manifest';
 
-const partialRe = /(.*)\/_(.*)\.scss$/;
-const importRe = /@import ['"](.*)['"]/g;
-const sassArgs = ['--no-error-css', '--stop-on-error', '--no-color', '--quiet', '--quiet-deps'];
+const colorMixMap = new Map<string, { c1: string; c2?: string; op: string; val: number }>();
+const themeColorMap = new Map<string, Map<string, clr.Instance>>();
 const sassWatch: fs.FSWatcher[] = [];
 const importMap = new Map<string, Set<string>>(); // (cssFile, sourcesThatImportIt)
+const processed = new Set<string>();
 let sassPs: cps.ChildProcessWithoutNullStreams | undefined;
+let builder: BuildTimer | undefined;
 
 export function stopSass() {
+  sassPs?.removeAllListeners();
   sassPs?.kill();
   sassPs = undefined;
   for (const x of sassWatch) x.close();
   sassWatch.length = 0;
-  builder.clear();
+  builder?.clear();
+  builder = undefined;
   importMap.clear();
+  processed.clear();
+  colorMixMap.clear();
+  themeColorMap.clear();
 }
 
 export async function sass(): Promise<void> {
   if (!env.sass) return;
 
-  await buildThemedScss();
-
-  const allSources = await globArray('./*/css/**/[^_]*.scss', { abs: false });
-
-  const modNames = buildModules.map(x => x.name);
-
-  // filter to modules we're actually building
-  builder.sources = new Set<string>(
-    allSources.filter(x => modNames.find(y => x.startsWith(`${y}${path.sep}`))),
-  );
-
-  await Promise.allSettled([...builder.sources].map(src => parseImports(src)));
+  const sources = [
+    ...new Set((await globArray('./*/css/**/[^_]*.scss', { abs: false })).filter(x => !x.includes('/gen/'))),
+  ];
+  builder = new BuildTimer();
+  await Promise.allSettled([parseThemeColorDefs(), ...sources.map(src => parseScss(src))]);
+  await buildColorMixes().then(buildColorWrap);
 
   if (env.watch) {
     for (const dir of [...importMap.keys()].map(path.dirname)) {
       const watcher = fs.watch(dir);
-      watcher.on('change', onChanges.bind(null, dir));
+      watcher.on('change', builder.onChanges.bind(builder, dir));
       watcher.on('error', (err: Error) => env.error(err, 'sass'));
       sassWatch.push(watcher);
     }
   }
-  if (builder.sources.size) {
-    compile([...builder.sources], false);
-  } else env.done(0, 'sass');
+  compile(sources, false);
+  if (!sources.length) env.done(0, 'sass');
 }
-const builder = new (class {
-  fileSet = new Set<string>();
-  timeout: NodeJS.Timeout | undefined;
-  sources: Set<string>;
 
-  clear() {
-    clearTimeout(this.timeout);
-    this.timeout = undefined;
-    this.fileSet.clear();
+// recursively parse scss file and its imports to build dependency and color maps
+async function parseScss(src: string) {
+  if (path.dirname(src).endsWith('/gen')) return;
+  if (processed.has(src)) return;
+  processed.add(src);
+  try {
+    const text = await fs.promises.readFile(src, 'utf8');
+    for (const match of text.matchAll(/\$m-([-_a-z0-9]+)/g)) {
+      const [str, mix] = [match[1], parseColor(match[1])];
+      if (!mix) {
+        env.log(`${errorMark} - invalid color mix: '${c.magenta(str)}' in '${c.cyan(src)}'`, {
+          ctx: 'sass',
+        });
+        continue;
+      }
+      colorMixMap.set(str, mix);
+    }
+    for (const match of text.matchAll(/@(?:import|use)\s+['"](.*)['"]/g)) {
+      if (match.length !== 2) continue;
+
+      const absDep = fs.existsSync(path.resolve(path.dirname(src), match[1]) + '.scss')
+        ? path.resolve(path.dirname(src), match[1] + '.scss')
+        : path.resolve(path.dirname(src), resolvePartial(match[1]));
+
+      if (!absDep.startsWith(env.uiDir) || /node_modules.*\.css/.test(absDep)) continue;
+
+      const dep = absDep.slice(env.uiDir.length + 1);
+      if (!importMap.get(dep)?.add(src)) importMap.set(dep, new Set<string>([src]));
+      await parseScss(dep);
+    }
+  } catch (e) {
+    env.log(`${errorMark} failed to read ${src} - ${JSON.stringify(e, undefined, 2)}`);
   }
+}
 
-  add(files: string[]): boolean {
-    // filenames relative to lila/ui
-    const oldCount = this.fileSet.size;
-    files.forEach(src => imports(src).forEach(dest => this.fileSet.add(dest)));
-    if (this.timeout) {
-      clearTimeout(this.timeout);
+// collect mixable scss color definitions from theme files
+async function parseThemeColorDefs() {
+  const themeFiles = await globArray('./common/css/theme/_*.scss', { abs: false });
+  const themes: string[] = ['dark'];
+  for (const themeFile of themeFiles ?? []) {
+    const theme = /_([^/]+)\.scss/.exec(themeFile)?.[1];
+    if (!theme) {
+      env.log(`${errorMark} - invalid theme filename '${c.cyan(themeFile)}'`, { ctx: 'sass' });
+      continue;
     }
-    this.timeout = setTimeout(() => this.fire(), 200);
-    return this.fileSet.size > oldCount;
+    const text = fs.readFileSync(themeFile, 'utf8');
+    const colorMap = new Map<string, clr.Instance>();
+    for (const match of text.matchAll(/\s\$c-([-a-z0-9]+):\s*([^;]+);/g)) {
+      colorMap.set(match[1], clr(match[2]));
+    }
+    if (theme !== 'default') themes.push(theme);
+    themeColorMap.set(theme, colorMap);
   }
+  for (const theme of themes) {
+    const colorDefMap = themeColorMap.get(theme) ?? new Map<string, clr.Instance>();
 
-  fire() {
-    compile([...this.fileSet].filter(x => this.sources.has(x)));
-    this.clear();
+    for (const [color, colorVal] of themeColorMap.get('default') ?? []) {
+      if (!colorDefMap.has(color)) colorDefMap.set(color, colorVal.clone());
+    }
   }
-})();
+}
 
-async function buildThemedScss() {
-  env.log('Building themed scss', { ctx: 'sass' });
+// given color definitions and mix instructions, build mixed color css variables in themed scss mixins
+async function buildColorMixes() {
+  const out = fs.createWriteStream(path.join(env.themeGenDir, '_mix.scss'));
+  for (const theme of themeColorMap.keys()) {
+    const colorMap = themeColorMap.get(theme)!;
+    out.write(`@mixin ${theme}-mix {\n`);
+    const colors: string[] = [];
+    for (const [colorMix, mix] of colorMixMap) {
+      const c1 = colorMap.get(mix.c1)?.clone() ?? new clr(mix.c1);
+      const c2 = (mix.c2 ? colorMap.get(mix.c2) : undefined) ?? new clr(mix.c2);
+      const mixed =
+        mix.op === 'mix'
+          ? clr.mix(c2!, c1, clamp(mix.val, { min: 0, max: 100 }))
+          : mix.op === 'lighten'
+          ? c1.lighten(clamp(mix.val, { min: 0, max: 100 }))
+          : mix.op === 'alpha'
+          ? c1.setAlpha(clamp(mix.val / 100, { min: 0, max: 1 }))
+          : mix.op === 'fade'
+          ? c1.setAlpha(c1.getAlpha() * (1 - clamp(mix.val / 100, { min: 0, max: 1 })))
+          : undefined;
+      if (mixed) colors.push(`  --m-${colorMix}: ${env.rgb ? mixed.toRgbString() : mixed.toHslString()};`);
+      else env.log(`${errorMark} - invalid mix op: '${c.magenta(colorMix)}'`, { ctx: 'sass' });
+    }
+    out.write(colors.sort().join('\n') + '\n}\n\n');
+  }
+  out.end();
+}
 
-  const partials: string[] = (await globArray('./*/css/build/_*.scss', { abs: false })).filter(
-    (f: string) => !f.endsWith('.abstract.scss'),
-  );
-  for (const file of partials) {
-    const match = partialRe.exec(file);
-    if (!match || match.length < 3) continue;
-    const path = match[1];
-    const partial = match[2];
-    fs.mkdirSync(`${path}/gen`, { recursive: true });
-    for (const theme of ['light', 'dark', 'transp']) {
-      const themed = `${path}/gen/${partial}.${theme}.scss`;
-      if (fs.existsSync(themed)) {
-        continue;
-      }
-      const code = `@import '../../../../common/css/theme/${theme}';\n` + `@import '../${partial}';\n`;
-      try {
-        await fs.promises.writeFile(themed, code);
-      } catch (e) {
-        env.log(e, { error: true });
-      }
+// create scss variables for all css color variables as $c-color: var(--c-color) in _wrap.scss
+async function buildColorWrap() {
+  const cssVars = new Set<string>();
+  for (const color of colorMixMap.keys()) cssVars.add(`m-${color}`);
+
+  for (const file of await globArray(path.join(env.themeDir, '_*.scss'))) {
+    for (const line of (await fs.promises.readFile(file, 'utf8')).split('\n')) {
+      if (line.startsWith('//') || !/--[cm]/.test(line)) continue;
+      cssVars.add(line.split(':')[0].trim().replace('--', ''));
     }
   }
+  const scssWrap =
+    [...new Set(Array.from(cssVars))]
+      .sort()
+      .map(variable => `$${variable}: var(--${variable});`)
+      .join('\n') + '\n';
+
+  const wrapFile = path.join(env.themeDir, 'gen', '_wrap.scss');
+  await fs.promises.mkdir(path.dirname(wrapFile), { recursive: true });
+  if (fs.existsSync(wrapFile)) {
+    if ((await fs.promises.readFile(wrapFile, 'utf8')) === scssWrap) return; // dont touch wrap if no changes
+  }
+  await fs.promises.writeFile(wrapFile, scssWrap);
 }
 
+// compile an array of concrete scss files to ui/.build/dist/css/*.css (css temp dir prior to hashMove)
 function compile(sources: string[], tellTheWorld = true) {
+  if (!sources.length) return;
   if (tellTheWorld) {
     for (const srcFile of sources) {
       env.log(`Building '${c.cyan(srcFile)}'`, { ctx: 'sass' });
     }
-  } else {
-    env.log(`Building css with ${ps.platform}-${ps.arch}/sass`, { ctx: 'sass' });
-  }
+  } else env.log(`Building css with ${ps.platform}-${ps.arch}/sass`, { ctx: 'sass' });
 
   const sassExec = path.join(env.buildDir, 'dart-sass', `${ps.platform}-${ps.arch}`, 'sass');
+  const sassArgs = ['--no-error-css', '--stop-on-error', '--no-color', '--quiet', '--quiet-deps'];
+  sassPs?.removeAllListeners();
   sassPs = cps.spawn(
     sassExec,
     sassArgs.concat(
       env.prod ? ['--style=compressed', '--no-source-map'] : ['--embed-sources'],
       sources.map(
         (src: string) =>
-          `${src}:${path.join(
-            env.cssDir,
-            path.basename(src).replace(/(.*)scss$/, env.prod ? '$1min.css' : '$1dev.css'),
-          )}`,
+          `${src}:${path.join(env.cssTempDir, path.basename(src).replace(/(.*)scss$/, '$1css'))}`,
       ),
     ),
   );
@@ -134,63 +194,117 @@ function compile(sources: string[], tellTheWorld = true) {
     for (const txt of txts) env.log(c.red(txt), { ctx: 'sass' });
   });
   sassPs.stderr?.on('data', (buf: Buffer) => sassError(buf.toString('utf8')));
-  sassPs.on('close', (code: number) => env.done(code, 'sass'));
+  sassPs.on('close', (code: number) => {
+    if (code === 0) cssManifest();
+    env.done(code, 'sass');
+  });
+}
+
+function parseColor(colorMix: string) {
+  const [clrs, opval] = colorMix.split('--');
+  const [c1, c2] = clrs.split('_');
+  const [op, valstr] = opval.split('-');
+  const val = parseInt(valstr);
+  const validColor = (c: string) => themeColorMap.get('default')?.has(c) || clr(c).isValid();
+  return validColor(c1) &&
+    (op !== 'mix' || validColor(c2)) &&
+    ['mix', 'lighten', 'alpha', 'fade'].includes(op) &&
+    val >= 0 &&
+    val <= 100
+    ? { c1, c2, op, val }
+    : undefined;
+}
+
+function resolvePartial(partial: string): string {
+  const nameBegin = partial.lastIndexOf(path.sep) + 1;
+  return `${partial.slice(0, nameBegin)}_${partial.slice(nameBegin)}.scss`;
+}
+
+function sassError(error: string) {
+  for (const err of lines(error)) {
+    if (err.startsWith('Error:')) {
+      env.log(c.grey('-'.repeat(75)), { ctx: 'sass' });
+      env.log(`${errorMark} - ${err.slice(7)}`, { ctx: 'sass' });
+    } else env.log(err, { ctx: 'sass' });
+  }
+}
+
+function clamp(val: number, { min, max }: { min: number; max: number }) {
+  return Math.min(max, Math.max(min, val));
 }
 
-function imports(srcFile: string, bset = new Set<string>()): Set<string> {
+function importersOf(srcFile: string, bset = new Set<string>()): Set<string> {
   if (bset.has(srcFile)) return bset;
   bset.add(srcFile);
-  for (const dep of importMap.get(srcFile) ?? []) imports(dep, bset);
+  for (const dep of importMap.get(srcFile) ?? []) importersOf(dep, bset);
   return bset;
 }
 
-function onChanges(dir: string, eventType: string, srcFile: string): void {
-  if (eventType === 'change') {
-    if (builder.add([path.join(dir, srcFile)])) env.log(`File '${c.cyanBold(srcFile)}' changed`);
-  } else if (eventType === 'rename') {
-    globArray('*.scss', { cwd: dir, abs: false }).then(files => {
-      if (builder.add(files.map(f => path.join(dir, f)))) {
-        env.log(`Directory '${c.cyanBold(dir)}' changed`, { ctx: 'sass' });
-      }
-    });
+class BuildTimer {
+  dependencies = new Set<string>();
+  touched = new Set<string>();
+  timeout: NodeJS.Timeout | undefined;
+
+  clear() {
+    clearTimeout(this.timeout);
+    this.timeout = undefined;
+    this.dependencies.clear();
+    this.touched.clear();
   }
-}
 
-async function parseImports(src: string, depth = 1, processed = new Set<string>()) {
-  if (depth > 10) {
-    // arbitrary
-    env.log(`${errorMark} '${c.cyan(src)}' - max depth exceeded (${depth})`);
-    ps.exit(-2);
+  add(files: string[]): boolean {
+    clearTimeout(this.timeout);
+    this.timeout = setTimeout(() => this.fire(), 200);
+    if (files.every(f => this.touched.has(f))) return false;
+    files.forEach(src => {
+      this.touched.add(src);
+      importersOf(src).forEach(dest => this.dependencies.add(dest));
+    });
+    return true;
   }
-  if (processed.has(src)) return;
-  processed.add(src);
 
-  try {
-    for (const match of (await fs.promises.readFile(src, 'utf8')).matchAll(importRe)) {
-      if (match.length !== 2) continue;
-      const absDep = path.resolve(path.dirname(src), resolvePartial(match[1]));
-      if (!absDep.startsWith(env.uiDir)) continue;
-      const dep = absDep.slice(env.uiDir.length + 1);
-      if (!importMap.get(dep)?.add(src)) importMap.set(dep, new Set<string>([src]));
-      await parseImports(dep, depth + 1, processed);
+  onChanges = (dir: string, eventType: string, srcFile: string) => {
+    if (eventType === 'change') {
+      if (this.add([path.join(dir, srcFile)])) env.log(`File '${c.cyanBold(srcFile)}' changed`);
+    } else if (eventType === 'rename') {
+      globArray('*.scss', { cwd: dir, abs: false }).then(files => {
+        if (this.add(files.map(f => path.join(dir, f)))) {
+          env.log(`Directory '${c.cyanBold(dir)}' changed`, { ctx: 'sass' });
+        }
+      });
     }
-  } catch (e) {
-    env.log(`${errorMark} failed to read ${src} - ${JSON.stringify(e, undefined, 2)}`);
-  }
-}
+  };
 
-function resolvePartial(partial: string): string {
-  const nameBegin = partial.lastIndexOf(path.sep) + 1;
-  return `${partial.slice(0, nameBegin)}_${partial.slice(nameBegin)}.scss`;
-}
+  async fire() {
+    const sources = [...this.dependencies].filter(src => /\/[^_][^/]+\.scss$/.test(src));
+    const touched = [...this.touched];
+    this.clear();
 
-const hrule = '---------------------------------------------------------------------------';
+    let rebuildColors = false;
 
-function sassError(error: string) {
-  for (const err of lines(error)) {
-    if (err.startsWith('Error:')) {
-      env.log(c.grey(hrule), { ctx: 'sass' });
-      env.log(`${errorMark} - ${err.slice(7)}`, { ctx: 'sass' });
-    } else env.log(err, { ctx: 'sass' });
+    for (const src of touched) {
+      processed.delete(src);
+      if (src.includes('common/css/theme/_')) {
+        rebuildColors = true;
+        await parseThemeColorDefs();
+      }
+    }
+    const oldMixSet = new Set([...colorMixMap.keys()]);
+    for (const src of touched) await parseScss(src);
+    const newMixSet = new Set([...colorMixMap.keys()]);
+    if (oldMixSet.size !== newMixSet.size) rebuildColors = true;
+    else if (!rebuildColors) {
+      for (const mix of newMixSet) {
+        if (!oldMixSet.has(mix)) {
+          rebuildColors = true;
+          break;
+        }
+      }
+    }
+    if (rebuildColors) {
+      buildColorMixes()
+        .then(buildColorWrap)
+        .then(() => compile(sources));
+    } else compile(sources);
   }
 }
diff --git a/ui/@types/lichess/index.d.ts b/ui/@types/lichess/index.d.ts
index e3c743d94ee42..61f07b7f9ace7 100644
--- a/ui/@types/lichess/index.d.ts
+++ b/ui/@types/lichess/index.d.ts
@@ -85,6 +85,7 @@ interface Site {
   socket: any;
   quietMode?: boolean;
   analysis?: any; // expose the analysis ctrl
+  manifest: { css: Record<string, string>; js: Record<string, string> };
 }
 
 interface LichessLog {
diff --git a/ui/analyse/css/_analyse.abstract.scss b/ui/analyse/css/_analyse.abstract.scss
new file mode 100644
index 0000000000000..7d4bb96ad048f
--- /dev/null
+++ b/ui/analyse/css/_analyse.abstract.scss
@@ -0,0 +1,17 @@
+@import '../../common/css/plugin';
+@import '../../common/css/vendor/chessground/coords';
+@import '../../common/css/layout/uniboard';
+@import '../../common/css/base/scrollbar';
+@import '../../common/css/component/board-resize';
+@import '../../common/css/component/continue-with';
+@import '../../common/css/component/color-icon';
+@import '../../common/css/component/crosstable';
+@import '../../common/css/component/fbt';
+@import '../../common/css/form/cmn-toggle';
+@import '../../common/css/form/range';
+@import '../../tree/css/tree';
+@import '../../ceval/css/ceval';
+@import '../../ceval/css/eval-gauge';
+@import '../../chess/css/control';
+@import '../../chess/css/promotion';
+@import '../../chess/css/variant-style';
diff --git a/ui/analyse/css/_context-menu.scss b/ui/analyse/css/_context-menu.scss
index 4885a1c15cd03..09dba62142b6b 100644
--- a/ui/analyse/css/_context-menu.scss
+++ b/ui/analyse/css/_context-menu.scss
@@ -35,7 +35,7 @@
     }
 
     &:hover {
-      background: mix($c-accent, $c-bg-box, 10%);
+      background: $m-accent_bg--mix-10;
     }
   }
 }
diff --git a/ui/analyse/css/_forecast.scss b/ui/analyse/css/_forecast.scss
index 615927606c3c3..58758e152427d 100644
--- a/ui/analyse/css/_forecast.scss
+++ b/ui/analyse/css/_forecast.scss
@@ -32,7 +32,7 @@
     cursor: pointer;
     &:hover {
       background: $c-primary;
-      color: $c-primary-over;
+      color: $c-over;
     }
 
     @include padding-direction(0.7em, 0.1em, 0.7em, 0.6em);
@@ -68,7 +68,7 @@
       @include transition;
 
       background: $c-bad;
-      color: $c-bad-over;
+      color: $c-over;
       border-radius: 50%;
       z-index: 1;
 
diff --git a/ui/analyse/css/_fork.scss b/ui/analyse/css/_fork.scss
index 793bae476ff27..249d7e5f70f51 100644
--- a/ui/analyse/css/_fork.scss
+++ b/ui/analyse/css/_fork.scss
@@ -11,8 +11,7 @@ $c-fork: $c-primary;
 
   move {
     @extend %san, %flex-center;
-
-    background: mix($c-fork, $c-bg-box, 25%);
+    background: $m-primary_bg--mix-25;
     color: $c-font-clear;
     flex: 0 0 50%;
     cursor: pointer;
@@ -23,10 +22,10 @@ $c-fork: $c-primary;
       border-inline-end: 1px solid $c-bg-box;
     }
     &.correct {
-      background: mix($c-secondary, $c-bg-box, 25%);
+      background: $m-secondary_bg--mix-25;
     }
     &.wrong {
-      background: mix($c-bad, $c-bg-box, 25%);
+      background: $m-bad_bg--mix-25;
     }
   }
 
diff --git a/ui/analyse/css/_layout.scss b/ui/analyse/css/_layout.scss
index 0db421f0273cc..e709ff7ddaa67 100644
--- a/ui/analyse/css/_layout.scss
+++ b/ui/analyse/css/_layout.scss
@@ -6,10 +6,10 @@ body {
 }
 
 #main-wrap {
-  --main-max-width: calc(100vh - #{$site-header-outer-height} - #{$col1-uniboard-controls});
+  ---main-max-width: calc(100vh - #{$site-header-outer-height} - #{$col1-uniboard-controls});
 
   @include mq-at-least-col2 {
-    --main-max-width: auto;
+    ---main-max-width: auto;
   }
 }
 
@@ -63,9 +63,9 @@ body {
     display: none;
   }
 
-  --chat-height: fit-content(0);
+  ---chat-height: fit-content(0);
   &--wiki {
-    --chat-height: 0;
+    ---chat-height: 0;
   }
 
   .mchat {
@@ -84,7 +84,7 @@ body {
     'uchat';
 
   @include mq-at-least-col2 {
-    grid-template-columns: var(--col2-uniboard-width) $analyse-block-gap $col2-uniboard-table;
+    grid-template-columns: var(---col2-uniboard-width) $analyse-block-gap $col2-uniboard-table;
     grid-template-rows: fit-content(0);
     grid-template-areas:
       'board      gauge tools'
@@ -116,7 +116,7 @@ body {
   }
 
   @include mq-at-least-col3 {
-    grid-template-columns: $col3-uniboard-side $analyse-block-gap var(--col3-uniboard-width) $analyse-block-gap $col3-uniboard-table;
+    grid-template-columns: $col3-uniboard-side $analyse-block-gap var(---col3-uniboard-width) $analyse-block-gap $col3-uniboard-table;
     grid-template-rows: auto $chat-height 2.5em 1fr;
     grid-template-areas:
       'side    . board gauge tools'
diff --git a/ui/analyse/css/_player-clock.scss b/ui/analyse/css/_player-clock.scss
index 01741103e90bf..10dca4edb442c 100644
--- a/ui/analyse/css/_player-clock.scss
+++ b/ui/analyse/css/_player-clock.scss
@@ -17,11 +17,11 @@ $clock-height: 20px;
   }
 
   &.bottom {
-    top: var(--cg-height, 100%);
+    top: var(--cg-height, 100%); // TODO add hyphen once chessground is updated
     z-index: 1; // over the board coords
 
     .is3d & {
-      top: calc(var(--cg-height, 100%) + 15px);
+      top: calc(var(--cg-height, 100%) + 15px); // TODO add hyphen once chessground is updated
     }
   }
 
@@ -53,7 +53,7 @@ $clock-height: 20px;
   }
 
   &.active {
-    background: mix($c-primary, $c-bg-box, 30%);
+    background: $m-primary_bg--mix-30;
   }
 
   tenths {
diff --git a/ui/analyse/css/_practice.scss b/ui/analyse/css/_practice.scss
index 19102f558f923..ee190eaed658f 100644
--- a/ui/analyse/css/_practice.scss
+++ b/ui/analyse/css/_practice.scss
@@ -93,8 +93,8 @@
     }
     .next {
       border: 0;
-      background: mix($c-primary, $c-bg-box, 80%);
-      color: $c-primary-over;
+      background: $m-primary_bg--mix-80;
+      color: $c-over;
       width: 100%;
 
       @include transition;
diff --git a/ui/analyse/css/_round-training.scss b/ui/analyse/css/_round-training.scss
index 568015a676911..160b564c3c6a3 100644
--- a/ui/analyse/css/_round-training.scss
+++ b/ui/analyse/css/_round-training.scss
@@ -31,19 +31,19 @@
     &.inaccuracy {
       color: $c-inaccuracy;
       &:hover {
-        color: c-clearer(saturate($c-inaccuracy, 100%), 40%);
+        color: $m-inaccuracy_font--mix-70;
       }
     }
     &.mistake {
       color: $c-mistake;
       &:hover {
-        color: c-clearer($c-mistake, 40%);
+        color: $m-mistake_font--mix-70;
       }
     }
     &.blunder {
       color: $c-blunder;
       &:hover {
-        color: c-clearer(saturate($c-blunder, 100%), 40%);
+        color: $m-blunder_font--mix-70;
       }
     }
   }
diff --git a/ui/analyse/css/_round-underboard.scss b/ui/analyse/css/_round-underboard.scss
index df331e36f9eeb..9731a06be3b84 100644
--- a/ui/analyse/css/_round-underboard.scss
+++ b/ui/analyse/css/_round-underboard.scss
@@ -25,7 +25,7 @@ $col2-panel-height: 240px;
       position: relative;
 
       &:hover {
-        background: mix($c-bg-page, #888, 88%);
+        background: $c-body-gradient;
       }
 
       border-bottom: 1px solid $c-border;
@@ -40,14 +40,14 @@ $col2-panel-height: 240px;
   }
 
   &__panels {
-    --panel-height: #{$col1-panel-height};
+    ---panel-height: #{$col1-panel-height};
 
     @include mq-at-least-col2 {
-      --panel-height: #{$col2-panel-height};
+      ---panel-height: #{$col2-panel-height};
     }
 
     > div {
-      height: var(--panel-height);
+      height: var(---panel-height);
       display: none;
       text-align: left;
 
@@ -122,7 +122,7 @@ $col2-panel-height: 240px;
 #acpl-chart-container,
 #movetimes-chart-container {
   width: 100%;
-  height: var(--panel-height);
+  height: var(---panel-height);
   background: linear-gradient(
     to bottom,
     rgba(255, 255, 255, 0) 0%,
diff --git a/ui/analyse/css/_tools.scss b/ui/analyse/css/_tools.scss
index aae4144c23499..93ff2ee2ee296 100644
--- a/ui/analyse/css/_tools.scss
+++ b/ui/analyse/css/_tools.scss
@@ -16,7 +16,7 @@
       .title {
         font-size: 0.9rem;
         line-height: 1.9em;
-        background: mix($c-secondary, $c-bg-box, 40%);
+        background: $m-secondary_bg--mix-40;
         padding: 0 7px;
         a {
           font-weight: bold;
@@ -96,8 +96,8 @@
       }
 
       &.highlighted {
-        background: mix($c-primary, $c-bg-box, 80%);
-        color: $c-primary-over;
+        background: $m-primary_bg--mix-80;
+        color: $c-over;
 
         &:hover {
           background: $c-primary;
@@ -137,7 +137,7 @@
     .active {
       margin-top: -3px;
       padding-top: 3px;
-      color: $c-good-over;
+      color: $c-over;
     }
 
     @include mq-is-col1 {
diff --git a/ui/analyse/css/_variables.scss b/ui/analyse/css/_variables.scss
index 9a1f933758e10..c53a7a053114b 100644
--- a/ui/analyse/css/_variables.scss
+++ b/ui/analyse/css/_variables.scss
@@ -1,2 +1,2 @@
-$meta-height: var(--meta-height);
-$chat-height: var(--chat-height);
+$meta-height: var(---meta-height);
+$chat-height: var(---chat-height);
diff --git a/ui/analyse/css/build/_analyse.abstract.scss b/ui/analyse/css/build/_analyse.abstract.scss
deleted file mode 100644
index 843bf49775d4c..0000000000000
--- a/ui/analyse/css/build/_analyse.abstract.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@import '../../../common/css/plugin';
-@import '../../../common/css/vendor/chessground/coords';
-@import '../../../common/css/layout/uniboard';
-@import '../../../common/css/base/scrollbar';
-@import '../../../common/css/component/board-resize';
-@import '../../../common/css/component/continue-with';
-@import '../../../common/css/component/color-icon';
-@import '../../../common/css/component/crosstable';
-@import '../../../common/css/component/fbt';
-@import '../../../common/css/form/cmn-toggle';
-@import '../../../common/css/form/range';
-@import '../../../tree/css/tree';
-@import '../../../ceval/css/ceval';
-@import '../../../ceval/css/eval-gauge';
-@import '../../../chess/css/control';
-@import '../../../chess/css/promotion';
-@import '../../../chess/css/variant-style';
diff --git a/ui/analyse/css/build/_analyse.practice.scss b/ui/analyse/css/build/_analyse.practice.scss
deleted file mode 100644
index 412e0a76a5df2..0000000000000
--- a/ui/analyse/css/build/_analyse.practice.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import 'analyse.abstract';
-@import '../practice/show';
diff --git a/ui/analyse/css/build/_analyse.forecast.scss b/ui/analyse/css/build/analyse.forecast.scss
similarity index 100%
rename from ui/analyse/css/build/_analyse.forecast.scss
rename to ui/analyse/css/build/analyse.forecast.scss
diff --git a/ui/analyse/css/build/_analyse.free.scss b/ui/analyse/css/build/analyse.free.scss
similarity index 71%
rename from ui/analyse/css/build/_analyse.free.scss
rename to ui/analyse/css/build/analyse.free.scss
index ef6c70f7661fe..2b4dd4d49d818 100644
--- a/ui/analyse/css/build/_analyse.free.scss
+++ b/ui/analyse/css/build/analyse.free.scss
@@ -1,4 +1,4 @@
-@import 'analyse.abstract';
+@import '../analyse.abstract';
 @import '../../../common/css/component/mselect';
 
 @import '../analyse.free';
diff --git a/ui/analyse/css/build/_analyse.gamebook.edit.scss b/ui/analyse/css/build/analyse.gamebook.edit.scss
similarity index 100%
rename from ui/analyse/css/build/_analyse.gamebook.edit.scss
rename to ui/analyse/css/build/analyse.gamebook.edit.scss
diff --git a/ui/analyse/css/build/_analyse.gamebook.play.scss b/ui/analyse/css/build/analyse.gamebook.play.scss
similarity index 100%
rename from ui/analyse/css/build/_analyse.gamebook.play.scss
rename to ui/analyse/css/build/analyse.gamebook.play.scss
diff --git a/ui/analyse/css/build/_analyse.keyboard.scss b/ui/analyse/css/build/analyse.keyboard.scss
similarity index 100%
rename from ui/analyse/css/build/_analyse.keyboard.scss
rename to ui/analyse/css/build/analyse.keyboard.scss
diff --git a/ui/analyse/css/build/analyse.practice.scss b/ui/analyse/css/build/analyse.practice.scss
new file mode 100644
index 0000000000000..d82de6bb618a5
--- /dev/null
+++ b/ui/analyse/css/build/analyse.practice.scss
@@ -0,0 +1,2 @@
+@import '../analyse.abstract';
+@import '../practice/show';
diff --git a/ui/analyse/css/build/_analyse.relay-admin.scss b/ui/analyse/css/build/analyse.relay-admin.scss
similarity index 100%
rename from ui/analyse/css/build/_analyse.relay-admin.scss
rename to ui/analyse/css/build/analyse.relay-admin.scss
diff --git a/ui/analyse/css/build/_analyse.relay.scss b/ui/analyse/css/build/analyse.relay.scss
similarity index 93%
rename from ui/analyse/css/build/_analyse.relay.scss
rename to ui/analyse/css/build/analyse.relay.scss
index 322cefeb769bf..65088016ecaaa 100644
--- a/ui/analyse/css/build/_analyse.relay.scss
+++ b/ui/analyse/css/build/analyse.relay.scss
@@ -1,4 +1,4 @@
-@import 'analyse.abstract';
+@import '../analyse.abstract';
 @import '../../../common/css/form/form3';
 @import '../../../common/css/component/tabs-horiz';
 @import '../../../common/css/component/markdown';
diff --git a/ui/analyse/css/build/_analyse.round.scss b/ui/analyse/css/build/analyse.round.scss
similarity index 83%
rename from ui/analyse/css/build/_analyse.round.scss
rename to ui/analyse/css/build/analyse.round.scss
index f1d246d35d98f..644ef2010ca4d 100644
--- a/ui/analyse/css/build/_analyse.round.scss
+++ b/ui/analyse/css/build/analyse.round.scss
@@ -1,4 +1,4 @@
-@import 'analyse.abstract';
+@import '../analyse.abstract';
 
 @import '../../../common/css/component/context-streamer';
 
diff --git a/ui/analyse/css/build/_analyse.study.scss b/ui/analyse/css/build/analyse.study.scss
similarity index 91%
rename from ui/analyse/css/build/_analyse.study.scss
rename to ui/analyse/css/build/analyse.study.scss
index c6544335d4628..c3e79148be9af 100644
--- a/ui/analyse/css/build/_analyse.study.scss
+++ b/ui/analyse/css/build/analyse.study.scss
@@ -1,4 +1,4 @@
-@import 'analyse.abstract';
+@import '../analyse.abstract';
 @import '../../../common/css/form/form3';
 @import '../../../common/css/component/tabs-horiz';
 @import '../../../common/css/component/slist';
diff --git a/ui/analyse/css/build/_analyse.zh.scss b/ui/analyse/css/build/analyse.zh.scss
similarity index 100%
rename from ui/analyse/css/build/_analyse.zh.scss
rename to ui/analyse/css/build/analyse.zh.scss
diff --git a/ui/analyse/css/build/gen/analyse.forecast.dark.scss b/ui/analyse/css/build/gen/analyse.forecast.dark.scss
deleted file mode 100644
index c1576a8ad5b7e..0000000000000
--- a/ui/analyse/css/build/gen/analyse.forecast.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../analyse.forecast';
diff --git a/ui/analyse/css/build/gen/analyse.forecast.light.scss b/ui/analyse/css/build/gen/analyse.forecast.light.scss
deleted file mode 100644
index b2f7a972220d9..0000000000000
--- a/ui/analyse/css/build/gen/analyse.forecast.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../analyse.forecast';
diff --git a/ui/analyse/css/build/gen/analyse.forecast.transp.scss b/ui/analyse/css/build/gen/analyse.forecast.transp.scss
deleted file mode 100644
index 985680197cdff..0000000000000
--- a/ui/analyse/css/build/gen/analyse.forecast.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../analyse.forecast';
diff --git a/ui/analyse/css/build/gen/analyse.free.dark.scss b/ui/analyse/css/build/gen/analyse.free.dark.scss
deleted file mode 100644
index b8f21ea812797..0000000000000
--- a/ui/analyse/css/build/gen/analyse.free.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../analyse.free';
diff --git a/ui/analyse/css/build/gen/analyse.free.light.scss b/ui/analyse/css/build/gen/analyse.free.light.scss
deleted file mode 100644
index 4008d37ade392..0000000000000
--- a/ui/analyse/css/build/gen/analyse.free.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../analyse.free';
diff --git a/ui/analyse/css/build/gen/analyse.free.transp.scss b/ui/analyse/css/build/gen/analyse.free.transp.scss
deleted file mode 100644
index f77964c4adef7..0000000000000
--- a/ui/analyse/css/build/gen/analyse.free.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../analyse.free';
diff --git a/ui/analyse/css/build/gen/analyse.gamebook.edit.dark.scss b/ui/analyse/css/build/gen/analyse.gamebook.edit.dark.scss
deleted file mode 100644
index 04d9d2ce36672..0000000000000
--- a/ui/analyse/css/build/gen/analyse.gamebook.edit.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../analyse.gamebook.edit';
diff --git a/ui/analyse/css/build/gen/analyse.gamebook.edit.light.scss b/ui/analyse/css/build/gen/analyse.gamebook.edit.light.scss
deleted file mode 100644
index fc12a7c8a44c7..0000000000000
--- a/ui/analyse/css/build/gen/analyse.gamebook.edit.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../analyse.gamebook.edit';
diff --git a/ui/analyse/css/build/gen/analyse.gamebook.edit.transp.scss b/ui/analyse/css/build/gen/analyse.gamebook.edit.transp.scss
deleted file mode 100644
index 8089227445cbb..0000000000000
--- a/ui/analyse/css/build/gen/analyse.gamebook.edit.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../analyse.gamebook.edit';
diff --git a/ui/analyse/css/build/gen/analyse.gamebook.play.dark.scss b/ui/analyse/css/build/gen/analyse.gamebook.play.dark.scss
deleted file mode 100644
index b6fd35dd61042..0000000000000
--- a/ui/analyse/css/build/gen/analyse.gamebook.play.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../analyse.gamebook.play';
diff --git a/ui/analyse/css/build/gen/analyse.gamebook.play.light.scss b/ui/analyse/css/build/gen/analyse.gamebook.play.light.scss
deleted file mode 100644
index d5694b9118003..0000000000000
--- a/ui/analyse/css/build/gen/analyse.gamebook.play.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../analyse.gamebook.play';
diff --git a/ui/analyse/css/build/gen/analyse.gamebook.play.transp.scss b/ui/analyse/css/build/gen/analyse.gamebook.play.transp.scss
deleted file mode 100644
index 35835ea14707c..0000000000000
--- a/ui/analyse/css/build/gen/analyse.gamebook.play.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../analyse.gamebook.play';
diff --git a/ui/analyse/css/build/gen/analyse.keyboard.dark.scss b/ui/analyse/css/build/gen/analyse.keyboard.dark.scss
deleted file mode 100644
index f3d0b6a4cc27c..0000000000000
--- a/ui/analyse/css/build/gen/analyse.keyboard.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../analyse.keyboard';
diff --git a/ui/analyse/css/build/gen/analyse.keyboard.light.scss b/ui/analyse/css/build/gen/analyse.keyboard.light.scss
deleted file mode 100644
index 91446afea61ad..0000000000000
--- a/ui/analyse/css/build/gen/analyse.keyboard.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../analyse.keyboard';
diff --git a/ui/analyse/css/build/gen/analyse.keyboard.transp.scss b/ui/analyse/css/build/gen/analyse.keyboard.transp.scss
deleted file mode 100644
index 1fa798ba23dd8..0000000000000
--- a/ui/analyse/css/build/gen/analyse.keyboard.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../analyse.keyboard';
diff --git a/ui/analyse/css/build/gen/analyse.practice.dark.scss b/ui/analyse/css/build/gen/analyse.practice.dark.scss
deleted file mode 100644
index de8caed3661e0..0000000000000
--- a/ui/analyse/css/build/gen/analyse.practice.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../analyse.practice';
diff --git a/ui/analyse/css/build/gen/analyse.practice.light.scss b/ui/analyse/css/build/gen/analyse.practice.light.scss
deleted file mode 100644
index 68a0c3614519e..0000000000000
--- a/ui/analyse/css/build/gen/analyse.practice.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../analyse.practice';
diff --git a/ui/analyse/css/build/gen/analyse.practice.transp.scss b/ui/analyse/css/build/gen/analyse.practice.transp.scss
deleted file mode 100644
index 1cd904eb98ce5..0000000000000
--- a/ui/analyse/css/build/gen/analyse.practice.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../analyse.practice';
diff --git a/ui/analyse/css/build/gen/analyse.relay-admin.dark.scss b/ui/analyse/css/build/gen/analyse.relay-admin.dark.scss
deleted file mode 100644
index 36909793c66b6..0000000000000
--- a/ui/analyse/css/build/gen/analyse.relay-admin.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../analyse.relay-admin';
diff --git a/ui/analyse/css/build/gen/analyse.relay-admin.light.scss b/ui/analyse/css/build/gen/analyse.relay-admin.light.scss
deleted file mode 100644
index 32be81b7d2a47..0000000000000
--- a/ui/analyse/css/build/gen/analyse.relay-admin.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../analyse.relay-admin';
diff --git a/ui/analyse/css/build/gen/analyse.relay-admin.transp.scss b/ui/analyse/css/build/gen/analyse.relay-admin.transp.scss
deleted file mode 100644
index ab1b4ed9784f2..0000000000000
--- a/ui/analyse/css/build/gen/analyse.relay-admin.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../analyse.relay-admin';
diff --git a/ui/analyse/css/build/gen/analyse.relay.dark.scss b/ui/analyse/css/build/gen/analyse.relay.dark.scss
deleted file mode 100644
index d4adc20105829..0000000000000
--- a/ui/analyse/css/build/gen/analyse.relay.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../analyse.relay';
diff --git a/ui/analyse/css/build/gen/analyse.relay.light.scss b/ui/analyse/css/build/gen/analyse.relay.light.scss
deleted file mode 100644
index f23e068feee1d..0000000000000
--- a/ui/analyse/css/build/gen/analyse.relay.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../analyse.relay';
diff --git a/ui/analyse/css/build/gen/analyse.relay.transp.scss b/ui/analyse/css/build/gen/analyse.relay.transp.scss
deleted file mode 100644
index d40b153767cd6..0000000000000
--- a/ui/analyse/css/build/gen/analyse.relay.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../analyse.relay';
diff --git a/ui/analyse/css/build/gen/analyse.round.dark.scss b/ui/analyse/css/build/gen/analyse.round.dark.scss
deleted file mode 100644
index fa30c04c4a01d..0000000000000
--- a/ui/analyse/css/build/gen/analyse.round.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../analyse.round';
diff --git a/ui/analyse/css/build/gen/analyse.round.light.scss b/ui/analyse/css/build/gen/analyse.round.light.scss
deleted file mode 100644
index 6159e49864448..0000000000000
--- a/ui/analyse/css/build/gen/analyse.round.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../analyse.round';
diff --git a/ui/analyse/css/build/gen/analyse.round.transp.scss b/ui/analyse/css/build/gen/analyse.round.transp.scss
deleted file mode 100644
index bbae8c3cc1335..0000000000000
--- a/ui/analyse/css/build/gen/analyse.round.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../analyse.round';
diff --git a/ui/analyse/css/build/gen/analyse.study.dark.scss b/ui/analyse/css/build/gen/analyse.study.dark.scss
deleted file mode 100644
index 0c26b545c3c7e..0000000000000
--- a/ui/analyse/css/build/gen/analyse.study.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../analyse.study';
diff --git a/ui/analyse/css/build/gen/analyse.study.light.scss b/ui/analyse/css/build/gen/analyse.study.light.scss
deleted file mode 100644
index f739dbabbf9b1..0000000000000
--- a/ui/analyse/css/build/gen/analyse.study.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../analyse.study';
diff --git a/ui/analyse/css/build/gen/analyse.study.transp.scss b/ui/analyse/css/build/gen/analyse.study.transp.scss
deleted file mode 100644
index f42fe5e9853d8..0000000000000
--- a/ui/analyse/css/build/gen/analyse.study.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../analyse.study';
diff --git a/ui/analyse/css/build/gen/analyse.zh.dark.scss b/ui/analyse/css/build/gen/analyse.zh.dark.scss
deleted file mode 100644
index e0f149e271b8b..0000000000000
--- a/ui/analyse/css/build/gen/analyse.zh.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../analyse.zh';
diff --git a/ui/analyse/css/build/gen/analyse.zh.light.scss b/ui/analyse/css/build/gen/analyse.zh.light.scss
deleted file mode 100644
index e216933cf4ca8..0000000000000
--- a/ui/analyse/css/build/gen/analyse.zh.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../analyse.zh';
diff --git a/ui/analyse/css/build/gen/analyse.zh.transp.scss b/ui/analyse/css/build/gen/analyse.zh.transp.scss
deleted file mode 100644
index 3baed4b397d75..0000000000000
--- a/ui/analyse/css/build/gen/analyse.zh.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../analyse.zh';
diff --git a/ui/analyse/css/build/gen/shepherd.dark.scss b/ui/analyse/css/build/gen/shepherd.dark.scss
deleted file mode 100644
index b0b878cc65d51..0000000000000
--- a/ui/analyse/css/build/gen/shepherd.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../shepherd';
diff --git a/ui/analyse/css/build/gen/shepherd.light.scss b/ui/analyse/css/build/gen/shepherd.light.scss
deleted file mode 100644
index db59696c1bf06..0000000000000
--- a/ui/analyse/css/build/gen/shepherd.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../shepherd';
diff --git a/ui/analyse/css/build/gen/shepherd.transp.scss b/ui/analyse/css/build/gen/shepherd.transp.scss
deleted file mode 100644
index 29296fff329f6..0000000000000
--- a/ui/analyse/css/build/gen/shepherd.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../shepherd';
diff --git a/ui/analyse/css/build/gen/study.create.dark.scss b/ui/analyse/css/build/gen/study.create.dark.scss
deleted file mode 100644
index 8f69c062b7c80..0000000000000
--- a/ui/analyse/css/build/gen/study.create.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../study.create';
diff --git a/ui/analyse/css/build/gen/study.create.light.scss b/ui/analyse/css/build/gen/study.create.light.scss
deleted file mode 100644
index 4717eb862f613..0000000000000
--- a/ui/analyse/css/build/gen/study.create.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../study.create';
diff --git a/ui/analyse/css/build/gen/study.create.transp.scss b/ui/analyse/css/build/gen/study.create.transp.scss
deleted file mode 100644
index 3dd1d97f4d34c..0000000000000
--- a/ui/analyse/css/build/gen/study.create.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../study.create';
diff --git a/ui/analyse/css/build/gen/study.index.dark.scss b/ui/analyse/css/build/gen/study.index.dark.scss
deleted file mode 100644
index 6ce16a18e3f8b..0000000000000
--- a/ui/analyse/css/build/gen/study.index.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../study.index';
diff --git a/ui/analyse/css/build/gen/study.index.light.scss b/ui/analyse/css/build/gen/study.index.light.scss
deleted file mode 100644
index 2b640693ced6a..0000000000000
--- a/ui/analyse/css/build/gen/study.index.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../study.index';
diff --git a/ui/analyse/css/build/gen/study.index.transp.scss b/ui/analyse/css/build/gen/study.index.transp.scss
deleted file mode 100644
index 81466a701c177..0000000000000
--- a/ui/analyse/css/build/gen/study.index.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../study.index';
diff --git a/ui/analyse/css/build/_shepherd.scss b/ui/analyse/css/build/shepherd.scss
similarity index 100%
rename from ui/analyse/css/build/_shepherd.scss
rename to ui/analyse/css/build/shepherd.scss
diff --git a/ui/analyse/css/build/_study.create.scss b/ui/analyse/css/build/study.create.scss
similarity index 100%
rename from ui/analyse/css/build/_study.create.scss
rename to ui/analyse/css/build/study.create.scss
diff --git a/ui/analyse/css/build/_study.index.scss b/ui/analyse/css/build/study.index.scss
similarity index 100%
rename from ui/analyse/css/build/_study.index.scss
rename to ui/analyse/css/build/study.index.scss
diff --git a/ui/analyse/css/explorer/_config.scss b/ui/analyse/css/explorer/_config.scss
index 7880dad7c9e48..86ccf2d85549d 100644
--- a/ui/analyse/css/explorer/_config.scss
+++ b/ui/analyse/css/explorer/_config.scss
@@ -47,7 +47,7 @@
       &[aria-pressed='true'],
       &.active {
         background: $c-secondary;
-        color: $c-secondary-over;
+        color: $c-over;
         text-shadow: 1px 0 0 rgba(0, 0, 0, 0.5);
         font-weight: bold;
       }
@@ -69,7 +69,7 @@
       text-transform: none;
       margin-inline-end: 0.5em;
       &.active:hover {
-        background: mix($c-secondary, white, 80);
+        background: $m-secondary_white--mix-80;
       }
     }
     .color {
@@ -92,7 +92,7 @@
       background: none;
       padding: 0.1em 0.5em;
       &:invalid {
-        background: mix($c-error, $c-bg-box, 30%);
+        background: $m-bad_bg--mix-30;
       }
     }
   }
diff --git a/ui/analyse/css/explorer/_explorer.scss b/ui/analyse/css/explorer/_explorer.scss
index 75786af7d0ddb..27d0a49a8938e 100644
--- a/ui/analyse/css/explorer/_explorer.scss
+++ b/ui/analyse/css/explorer/_explorer.scss
@@ -49,7 +49,7 @@
     font-size: 0.9rem;
     line-height: 1.9em;
     padding: 0;
-    background: mix($c-secondary, $c-bg-box, 30%);
+    background: $m-secondary_bg--mix-30;
     .ddloader {
       padding-inline-start: 7px;
     }
@@ -58,7 +58,7 @@
       direction: ltr;
       padding: 0 7px;
       color: $c-font-clear;
-      background: mix($c-secondary, $c-bg-box, 40%);
+      background: $m-secondary_bg--mix-40;
       strong {
         margin-inline-end: 0.5ch;
       }
@@ -76,7 +76,7 @@
       color: $c-font-dim;
       &:hover {
         color: $c-font-clear;
-        background: mix($c-secondary, $c-bg-box, 50%);
+        background: $m-secondary_bg--mix-50;
       }
     }
   }
@@ -97,7 +97,7 @@
     }
 
     &:hover {
-      background: mix($c-secondary, $c-bg-box, 20%);
+      background: $m-secondary_bg--mix-20;
     }
   }
 
@@ -112,7 +112,7 @@
       @extend %roboto;
       font-size: 0.8rem;
       line-height: 1.8em;
-      background: mix($c-secondary, $c-bg-box, 40%);
+      background: $m-secondary_bg--mix-40;
       padding-inline-start: 7px;
     }
     td:first-child {
@@ -135,7 +135,7 @@
 
     tbody tr.sum {
       /* sum row */
-      background: mix($c-primary, $c-bg-box, 25%);
+      background: $m-primary_bg--mix-25;
       font-weight: bold;
 
       @include mq-at-least-col2 {
@@ -157,7 +157,7 @@
     overflow: hidden;
     vertical-align: middle;
     background-clip: padding-box;
-    border: 0 solid fade-out($c-font, 0.83);
+    border: 0 solid $m-font--fade-83;
     border-width: 1px 0;
     height: 16px;
     line-height: 14px;
@@ -166,26 +166,40 @@
   }
 
   .white {
-    background: if($theme-light, #fff, #ccc);
-    box-shadow: 0 -5px 7px rgba(0, 0, 0, if($theme-light, 0.1, 0.25)) inset;
+    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;
+    }
 
-    @if $theme-dark {
+    @include if-not-light {
       color: #222;
     }
   }
 
   .draws,
   .black {
-    color: if($theme-light, #fff, #ddd);
-    box-shadow: 0 5px 7px rgba(255, 255, 255, if($theme-light, 0.2, 0.1)) inset;
+    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;
+    }
   }
 
   .draws {
-    background: if($theme-light, #a0a0a0, #666);
+    background: #666;
+    @include if-light {
+      background: #a0a0a0;
+    }
   }
 
   .black {
-    background: if($theme-light, #555, #333);
+    background: #333;
+    @include if-light {
+      background: #555;
+    }
     color: #ddd;
   }
 
@@ -247,7 +261,7 @@
 
     .game_title {
       text-align: center;
-      color: $c-secondary-over;
+      color: $c-over;
       margin: 3px 0 1px 0;
     }
 
diff --git a/ui/analyse/css/gamebook/_edit.scss b/ui/analyse/css/gamebook/_edit.scss
index 240efc77f3350..661b654230fe1 100644
--- a/ui/analyse/css/gamebook/_edit.scss
+++ b/ui/analyse/css/gamebook/_edit.scss
@@ -36,7 +36,7 @@
     &.clickable:hover {
       cursor: pointer;
       background: $c-primary;
-      color: $c-primary-over;
+      color: $c-over;
 
       i {
         opacity: 0.9;
@@ -53,7 +53,7 @@
 
   .todo i {
     background: $c-bad;
-    color: $c-bad-over;
+    color: $c-over;
   }
 
   .done i {
diff --git a/ui/analyse/css/gamebook/_play.scss b/ui/analyse/css/gamebook/_play.scss
index 3b5d83e4ebebd..4a686eb42054f 100644
--- a/ui/analyse/css/gamebook/_play.scss
+++ b/ui/analyse/css/gamebook/_play.scss
@@ -47,7 +47,7 @@
     /* fixes firefox overflow when comment is long https://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */
     min-height: 0;
 
-    @if $theme-dark {
+    @include if-not-light {
       border: 1px solid $c-font-dimmer;
     }
 
@@ -90,7 +90,7 @@
       div.hint {
         padding: 0.8em 1em;
         background: $c-primary;
-        color: $c-primary-over;
+        color: $c-over;
         border-radius: 0 0 1rem 1rem;
         cursor: pointer;
         font-size: 0.9em;
@@ -198,8 +198,8 @@
         @extend %flex-column, %button-none;
 
         flex: 1 1 100%;
-        background: mix($c-primary, $c-bg-box, 80%);
-        color: $c-primary-over;
+        background: $m-primary_bg--mix-80;
+        color: $c-over;
         font-size: 1.2em;
         align-items: center;
         justify-content: center;
diff --git a/ui/analyse/css/practice/_show.scss b/ui/analyse/css/practice/_show.scss
index 767e9ccd12df6..8e7f9eb523cf8 100644
--- a/ui/analyse/css/practice/_show.scss
+++ b/ui/analyse/css/practice/_show.scss
@@ -1,7 +1,7 @@
 @import '../analyse.base';
 @import '../study/desc';
 @import '../study/player';
-@import '../../../pagelets/css/practice/icons';
+@import '../../../bits/css/practice/icons';
 @import 'layout';
 @import 'side';
 @import 'underboard';
diff --git a/ui/analyse/css/practice/_side.scss b/ui/analyse/css/practice/_side.scss
index 48c7f72d26737..e4502c2578712 100644
--- a/ui/analyse/css/practice/_side.scss
+++ b/ui/analyse/css/practice/_side.scss
@@ -9,7 +9,7 @@
     flex: 0 0 auto;
     padding: 0.7em;
     background: $c-primary;
-    color: $c-primary-over;
+    color: $c-over;
 
     i {
       flex: 0 0 3.5em;
@@ -86,15 +86,15 @@
   }
 
   &:hover {
-    background: mix($c-primary, $c-bg-box, 10%);
+    background: $m-primary_bg--mix-10;
   }
 
   &.active {
-    background: mix($c-primary, $c-bg-box, 10%);
+    background: $m-primary_bg--mix-10;
 
     .status {
       background: $c-primary;
-      color: $c-primary-over;
+      color: $c-over;
     }
   }
 }
diff --git a/ui/analyse/css/practice/_underboard.scss b/ui/analyse/css/practice/_underboard.scss
index a75f7d215540f..cb6af849b9f7b 100644
--- a/ui/analyse/css/practice/_underboard.scss
+++ b/ui/analyse/css/practice/_underboard.scss
@@ -15,7 +15,7 @@
   &.fail {
     padding: 2em 1.5em;
     background: $c-good;
-    color: $c-good-over;
+    color: $c-over;
     animation: 1.7s soft-bright ease-in-out infinite;
     opacity: 0.8;
 
diff --git a/ui/analyse/css/study/_buttons.scss b/ui/analyse/css/study/_buttons.scss
index 806e50dc163c4..9fec2d66b2140 100644
--- a/ui/analyse/css/study/_buttons.scss
+++ b/ui/analyse/css/study/_buttons.scss
@@ -20,7 +20,7 @@ $c-study-button: $c-accent;
 
   .behind {
     background: $c-bad;
-    color: $c-bad-over;
+    color: $c-over;
     padding: 0 5px;
     border-radius: 9px;
     margin-inline-end: 4px;
diff --git a/ui/analyse/css/study/_chapters.scss b/ui/analyse/css/study/_chapters.scss
index 3cbff3a6d6f1a..74c29c0ab543a 100644
--- a/ui/analyse/css/study/_chapters.scss
+++ b/ui/analyse/css/study/_chapters.scss
@@ -51,7 +51,7 @@ $span-width: 1.7em;
     &,
     .status {
       background: $c-secondary !important;
-      color: $c-secondary-over !important;
+      color: $c-over !important;
     }
   }
 }
diff --git a/ui/analyse/css/study/_create.scss b/ui/analyse/css/study/_create.scss
index 2a3d8e8e1ee51..70e8b67a2572c 100644
--- a/ui/analyse/css/study/_create.scss
+++ b/ui/analyse/css/study/_create.scss
@@ -29,7 +29,7 @@
       overflow: hidden;
       margin-bottom: 3px;
       text-transform: none;
-      background: mix($c-link, #000, 70%);
+      background: $m-primary_black--mix-70;
     }
   }
 }
diff --git a/ui/analyse/css/study/_desc.scss b/ui/analyse/css/study/_desc.scss
index fb25258dd6578..d52c047c0a42d 100644
--- a/ui/analyse/css/study/_desc.scss
+++ b/ui/analyse/css/study/_desc.scss
@@ -21,7 +21,7 @@
     position: absolute;
     top: 0;
     @include inline-end(0);
-    background: mix($c-accent, $c-bg-box, 10%);
+    background: $m-accent_bg--mix-10;
     padding: 0.5em 0.8em;
     display: none;
     z-index: 1;
diff --git a/ui/analyse/css/study/_invite.scss b/ui/analyse/css/study/_invite.scss
index 3ff6b4a705a88..cbbb71184e9ce 100644
--- a/ui/analyse/css/study/_invite.scss
+++ b/ui/analyse/css/study/_invite.scss
@@ -6,7 +6,7 @@
     @extend %box-radius, %flex-center-nowrap;
 
     background: $c-accent;
-    color: $c-primary-over;
+    color: $c-over;
     padding: 1em;
     margin-bottom: 2em;
     text-align: left;
diff --git a/ui/analyse/css/study/_list-widget.scss b/ui/analyse/css/study/_list-widget.scss
index c4f0eb8554014..9b1ba4285c336 100644
--- a/ui/analyse/css/study/_list-widget.scss
+++ b/ui/analyse/css/study/_list-widget.scss
@@ -1,5 +1,3 @@
-$c-study: $c-primary;
-
 .studies {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax($viewport-min-width, 1fr));
@@ -57,7 +55,7 @@ $c-study: $c-primary;
 
         font-size: 1.5em;
         font-weight: normal;
-        color: $c-study;
+        color: $c-primary;
         display: block;
         margin: 0;
         unicode-bidi: plaintext;
@@ -74,7 +72,7 @@ $c-study: $c-primary;
       }
 
       &::before {
-        color: mix($c-link, $c-bg-box, 80%);
+        color: $m-primary_bg--mix-80;
         font-size: 4em;
         margin-inline-end: 0.2em;
 
@@ -90,10 +88,10 @@ $c-study: $c-primary;
     }
 
     &:hover {
-      background: mix($c-study, $c-bg-box, 10%);
+      background: $m-primary_bg--mix-10;
 
       .top::before {
-        color: mix($c-link, $c-bg-box, 100%);
+        color: $c-link;
       }
     }
   }
diff --git a/ui/analyse/css/study/_list.scss b/ui/analyse/css/study/_list.scss
index 642ca1cf7cc75..d569d6edb6ca3 100644
--- a/ui/analyse/css/study/_list.scss
+++ b/ui/analyse/css/study/_list.scss
@@ -18,7 +18,7 @@
     &:hover,
     &.active {
       color: $c-font-clear;
-      background: mix($c-link, $c-bg-box, 10%);
+      background: $m-primary_bg--mix-10;
     }
   }
 
@@ -42,7 +42,7 @@
 
     &:hover {
       background: $c-primary;
-      color: $c-primary-over;
+      color: $c-over;
       opacity: 1;
     }
   }
@@ -59,7 +59,7 @@
     align-self: center;
     justify-content: center;
     font-size: 0.7em;
-    color: $c-red;
+    color: $c-bad;
     margin-inline-end: 0.7rem;
   }
 }
diff --git a/ui/analyse/css/study/_members.scss b/ui/analyse/css/study/_members.scss
index a7a6a8e4a8787..b83cc6ccaa36a 100644
--- a/ui/analyse/css/study/_members.scss
+++ b/ui/analyse/css/study/_members.scss
@@ -98,7 +98,7 @@
 
   m-config,
   .editing {
-    background: mix($c-accent, $c-bg-box, 10%) !important;
+    background: $m-accent_bg--mix-10 !important;
   }
 
   m-config {
diff --git a/ui/analyse/css/study/_player.scss b/ui/analyse/css/study/_player.scss
index 9991a5c77c90d..4d46eeb3c870a 100644
--- a/ui/analyse/css/study/_player.scss
+++ b/ui/analyse/css/study/_player.scss
@@ -26,7 +26,7 @@ $player-height: 1.6rem;
   position: absolute;
   @include inline-end(0);
   font-weight: bold;
-  width: var(--cg-width, 100%);
+  width: var(--cg-width, 100%); // TODO add hyphen once chessground is updated
   height: $player-height;
   white-space: nowrap;
 
@@ -38,14 +38,14 @@ $player-height: 1.6rem;
     .is3d & {
       @extend %box-radius;
 
-      top: calc(#{-$player-height} - var(--cg-width) / 20);
+      top: calc(#{-$player-height} - var(--cg-width) / 20); // TODO add hyphen once chessground is updated
     }
   }
 
   &-bot {
     @extend %box-radius-bottom;
 
-    top: var(--cg-height, 100%);
+    top: var(--cg-height, 100%); // TODO add hyphen once chessground is updated
   }
 
   .left {
@@ -78,7 +78,7 @@ $player-height: 1.6rem;
 
   &.ticking .analyse__clock {
     background: $c-secondary;
-    color: $c-secondary-over;
+    color: $c-over;
     text-shadow: none;
   }
 
diff --git a/ui/analyse/css/study/_search.scss b/ui/analyse/css/study/_search.scss
index 9f62ab67bbadf..2b85d5822d179 100644
--- a/ui/analyse/css/study/_search.scss
+++ b/ui/analyse/css/study/_search.scss
@@ -23,7 +23,7 @@
       flex: 0 0 auto;
     }
     high {
-      background-color: mix(yellow, $c-bg-box, 30%);
+      background-color: $m-yellow_bg--mix-30;
       color: $c-font-clearer;
       padding: 0 0.1ch;
     }
diff --git a/ui/analyse/css/study/_topics.scss b/ui/analyse/css/study/_topics.scss
index 304d0f4de2a94..15374c84c22f8 100644
--- a/ui/analyse/css/study/_topics.scss
+++ b/ui/analyse/css/study/_topics.scss
@@ -12,12 +12,12 @@
   a {
     @extend %box-radius;
 
-    background: mix($c-primary, $c-bg-box, 12%);
+    background: $m-primary_bg--mix-12;
     padding: 0.2em 0.6em;
     margin: 0.2em;
 
     &:hover {
-      background: mix($c-primary, $c-bg-box, 15%);
+      background: $m-primary_bg--mix-15;
     }
 
     white-space: nowrap;
diff --git a/ui/analyse/css/study/panel/_glyph.scss b/ui/analyse/css/study/panel/_glyph.scss
index 0197cfd949a90..2f522f69c3590 100644
--- a/ui/analyse/css/study/panel/_glyph.scss
+++ b/ui/analyse/css/study/panel/_glyph.scss
@@ -41,7 +41,7 @@
 
     &.active::before {
       background: $c-secondary;
-      color: $c-secondary-over;
+      color: $c-over;
     }
   }
 }
diff --git a/ui/analyse/css/study/panel/_metadata.scss b/ui/analyse/css/study/panel/_metadata.scss
index 38ec6c70ab530..c905611bdb72c 100644
--- a/ui/analyse/css/study/panel/_metadata.scss
+++ b/ui/analyse/css/study/panel/_metadata.scss
@@ -35,7 +35,7 @@
 
     .liking:hover {
       opacity: 1;
-      color: $c-red;
+      color: $c-bad;
     }
   }
 }
@@ -69,7 +69,7 @@
 
   input:hover,
   input:focus {
-    background: mix($c-primary, $c-bg-box, 10%);
+    background: $m-primary_bg--mix-10;
   }
 
   select {
@@ -88,7 +88,7 @@
   .topic {
     @extend %box-radius;
 
-    background: mix($c-primary, $c-bg-box, 17%);
+    background: $m-primary_bg--mix-17;
     padding: 0.2em 0.6em;
     margin: 0.2em;
     unicode-bidi: plaintext;
diff --git a/ui/analyse/css/study/panel/_multiboard.scss b/ui/analyse/css/study/panel/_multiboard.scss
index 95bc642f80aa0..062c9455d6ad1 100644
--- a/ui/analyse/css/study/panel/_multiboard.scss
+++ b/ui/analyse/css/study/panel/_multiboard.scss
@@ -62,14 +62,14 @@
       overflow: hidden;
 
       &.active {
-        background: mix($c-primary, $c-bg-box, 20%);
+        background: $m-primary_bg--mix-20;
         color: $c-font-clear;
-        border-color: mix($c-primary, $c-bg-box, 40%);
+        border-color: $m-primary_bg--mix-40;
       }
       &:hover {
-        background: mix($c-primary, $c-bg-box, 12%);
+        background: $m-primary_bg--mix-12;
         color: $c-font-clear;
-        border-color: mix($c-primary, $c-bg-box, 50%);
+        border-color: $m-primary_bg--mix-50;
       }
     }
     cg-board {
@@ -85,7 +85,7 @@
 .mini-game {
   $white: #a0a0a0;
   $black: #606060;
-  @if $theme-light {
+  @include if-light {
     $white: #fff;
     $black: #888;
   }
@@ -137,7 +137,7 @@
         width: 100%;
         top: 2.5px;
         opacity: 1;
-        border-bottom: 5px solid fade-out($c-accent, 0.5);
+        border-bottom: 5px solid $m-accent--fade-50;
         height: 50%;
       }
     }
diff --git a/ui/analyse/css/study/relay/_admin.scss b/ui/analyse/css/study/relay/_admin.scss
index af6f4a00ebda7..1c7af11f95a28 100644
--- a/ui/analyse/css/study/relay/_admin.scss
+++ b/ui/analyse/css/study/relay/_admin.scss
@@ -32,7 +32,7 @@
     &.clickable:hover {
       cursor: pointer;
       background: $c-primary;
-      color: $c-primary-over;
+      color: $c-over;
     }
 
     > div {
@@ -45,13 +45,13 @@
     }
 
     &.off {
-      background: mix($c-primary, $c-bg-box, 80%);
+      background: $m-primary_bg--mix-80;
       color: #fff;
     }
 
     &.on {
       background: $c-good;
-      color: $c-good-over;
+      color: $c-over;
     }
   }
 
diff --git a/ui/analyse/css/study/relay/_layout.scss b/ui/analyse/css/study/relay/_layout.scss
index 1ca3ac54dbc78..316c00f0a887c 100644
--- a/ui/analyse/css/study/relay/_layout.scss
+++ b/ui/analyse/css/study/relay/_layout.scss
@@ -1,11 +1,11 @@
 $mq-col3-side-height: calc(100vh - #{$site-header-outer-height} - #{$col1-uniboard-controls});
 
 body {
-  --site-header-margin: 1em;
-  --allow-video: false;
+  ---site-header-margin: 1em;
+  ---allow-video: false;
 
   @include mq-at-least-col3 {
-    --allow-video: true;
+    ---allow-video: true;
   }
 }
 
@@ -58,7 +58,7 @@ main.is-relay.has-relay-tour {
   }
 
   @include mq-at-least-col3 {
-    grid-template-columns: $col3-uniboard-side $analyse-block-gap var(--col3-uniboard-width) $analyse-block-gap $col3-uniboard-table;
+    grid-template-columns: $col3-uniboard-side $analyse-block-gap var(---col3-uniboard-width) $analyse-block-gap $col3-uniboard-table;
     grid-template-rows: $mq-col3-side-height;
     grid-template-areas:
       'side        . relay-tour relay-tour relay-tour'
@@ -82,7 +82,7 @@ main.analyse.is-relay:not(.has-relay-tour) {
     display: none;
   }
   @include mq-at-least-col2 {
-    grid-template-rows: calc(var(--cg-height) / 2) calc(var(--cg-height) / 2) 2.5em;
+    grid-template-rows: repeat(2, calc(var(--cg-height) / 2)) 2.5em; // TODO add hyphen once chessground is updated
     grid-template-areas:
       'board        gauge side'
       'board        gauge tools'
@@ -97,7 +97,7 @@ main.analyse.is-relay:not(.has-relay-tour) {
     }
   }
   @include mq-at-least-col3 {
-    grid-template-rows: var(--cg-height) 2.5em;
+    grid-template-rows: var(--cg-height) 2.5em; // TODO add hyphen once chessground is updated
     grid-template-areas:
       'side           . board gauge tools'
       'side           . board .     controls'
diff --git a/ui/analyse/css/study/relay/_teams.scss b/ui/analyse/css/study/relay/_teams.scss
index f8d89c5598ad8..2baf4e3a0be07 100644
--- a/ui/analyse/css/study/relay/_teams.scss
+++ b/ui/analyse/css/study/relay/_teams.scss
@@ -48,8 +48,8 @@
       color: $c-font;
       border: 1px solid transparent;
       &:hover {
-        background: mix($c-link, $c-bg-box, 12%);
-        border-color: mix($c-link, $c-bg-box, 50%);
+        background: $m-primary_bg--mix-12;
+        border-color: $m-primary_bg--mix-50;
         color: $c-font-clearer;
         .mini-game__flag {
           opacity: 1;
@@ -84,7 +84,7 @@
 .eval-gauge-horiz {
   $white: #a0a0a0;
   $black: #606060;
-  @if $theme-light {
+  @include if-light {
     $white: #fff;
     $black: #888;
   }
@@ -115,7 +115,7 @@
       height: 100%;
       left: 2.5px;
       opacity: 1;
-      border-right: 5px solid fade-out($c-accent, 0.5);
+      border-right: 5px solid $m-accent--fade-50;
       width: 50%;
     }
   }
diff --git a/ui/analyse/css/study/relay/_tour.scss b/ui/analyse/css/study/relay/_tour.scss
index e75a4c8ca8b11..5440822c6baa9 100644
--- a/ui/analyse/css/study/relay/_tour.scss
+++ b/ui/analyse/css/study/relay/_tour.scss
@@ -1,4 +1,4 @@
-$hover-bg: mix($c-primary, $c-bg-box, 30%);
+$hover-bg: $m-primary_bg--mix-30;
 
 .relay-tour {
   @extend %box-neat-force;
@@ -88,13 +88,13 @@ $hover-bg: mix($c-primary, $c-bg-box, 30%);
     padding-top: 1em;
     padding-bottom: 1em;
     margin: -1em 0;
-    background: mix($c-primary, $c-bg-box, 10%);
+    background: $m-primary_bg--mix-10;
     strong {
       @extend %roboto;
       font-size: 1.2em;
     }
     &.ongoing {
-      background: mix($c-accent, $c-bg-box, 10%);
+      background: $m-accent_bg--mix-10;
       color: $c-accent;
     }
   }
@@ -109,7 +109,6 @@ $hover-bg: mix($c-primary, $c-bg-box, 30%);
       flex: 0 0 38%;
       &.video {
         flex: 0 0 50%;
-        cursor: pointer;
       }
       line-height: 0;
       img {
@@ -140,7 +139,7 @@ $hover-bg: mix($c-primary, $c-bg-box, 30%);
       flex: 1;
       gap: 1em;
       @include mq-at-least-col3 {
-        gap: calc(var(--box-padding) / 3);
+        gap: calc(var(---box-padding) / 3);
       }
       margin: 1em 2em;
     }
@@ -192,7 +191,7 @@ $hover-bg: mix($c-primary, $c-bg-box, 30%);
       }
     }
     .ongoing::before {
-      color: $c-red;
+      color: $c-bad;
     }
     .finished::before {
       color: $c-good;
@@ -207,14 +206,14 @@ $hover-bg: mix($c-primary, $c-bg-box, 30%);
     tr {
       display: table-row;
       &.current-round {
-        background: mix($c-primary, $c-bg-box, 15%);
-        border: 1px solid mix($c-primary, $c-bg-box, 40%);
+        background: $m-primary_bg--mix-15;
+        border: 1px solid $m-primary_bg--mix-40;
         border-width: 1px 0;
       }
       &:hover *,
       &:hover .round-state::before {
         background: $c-primary;
-        color: $c-primary-over;
+        color: $c-over;
       }
     }
     td {
@@ -240,7 +239,7 @@ $hover-bg: mix($c-primary, $c-bg-box, 30%);
 
   &__nav {
     @extend %flex-between;
-    margin: 2em var(--box-padding);
+    margin: 2em var(---box-padding);
     gap: 1em;
     user-select: none;
   }
@@ -271,7 +270,7 @@ $hover-bg: mix($c-primary, $c-bg-box, 30%);
 
   &__markup {
     @include rendered-markdown(2em, 50vh);
-    margin: 3em var(--box-padding);
+    margin: 3em var(---box-padding);
   }
 
   &__leaderboard {
@@ -317,7 +316,7 @@ $hover-bg: mix($c-primary, $c-bg-box, 30%);
 
   .study__multiboard {
     @media (min-width: at-least($xx-large)) {
-      margin: 0 calc(var(--box-padding) - 1em);
+      margin: 0 calc(var(---box-padding) - 1em);
       .now-playing a {
         padding: 0.8em;
       }
@@ -341,7 +340,7 @@ $hover-bg: mix($c-primary, $c-bg-box, 30%);
   border-bottom: $border;
   border-left: 3px solid transparent;
   &:hover {
-    background: mix($c-primary, $c-bg-box, 12%);
+    background: $m-primary_bg--mix-12;
     color: $c-font-clearer;
     .mini-game__flag {
       opacity: 1;
@@ -349,7 +348,7 @@ $hover-bg: mix($c-primary, $c-bg-box, 30%);
     border-left-color: $c-primary;
   }
   &--current {
-    background: mix($c-primary, $c-bg-box, 20%);
+    background: $m-primary_bg--mix-20;
     border-left-color: $c-primary;
   }
   &__players {
@@ -417,7 +416,7 @@ $hover-bg: mix($c-primary, $c-bg-box, 30%);
 
       &:hover,
       &:hover::before {
-        background: c-clearer($c-primary, 10%);
+        background: $m-primary_font--mix-90;
         color: white;
       }
     }
@@ -455,7 +454,7 @@ $hover-bg: mix($c-primary, $c-bg-box, 30%);
     }
 
     &:hover {
-      background: mix($c-primary, $c-bg-box, 30%);
+      background: $m-primary_bg--mix-30;
       &,
       &::before {
         color: $c-font-clearer;
diff --git a/ui/analyse/package.json b/ui/analyse/package.json
index 0d240591217ea..994d2810133a8 100644
--- a/ui/analyse/package.json
+++ b/ui/analyse/package.json
@@ -34,17 +34,14 @@
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "src/main.ts": "analysisBoard",
-        "src/plugins/studyMain.ts": "analysisBoard.study",
-        "src/plugins/nvui.ts": "analysisBoard.nvui",
-        "src/plugins/studyTopicForm.ts": "study.topic.form",
-        "src/plugins/studyTour.ts": "study.tour"
-      }
+      "src/analyse.ts": "analyse",
+      "src/plugins/analyse.study.ts": "analyse.study",
+      "src/plugins/analyse.nvui.ts": "analyse.nvui",
+      "src/plugins/analyse.study.topic.form.ts": "analyse.study.topic.form",
+      "src/plugins/analyse.study.tour.ts": "analyse.study.tour"
     },
-    "copy": {
-      "src": "node_modules/@yaireo/tagify/dist/tagify.min.js",
-      "dest": "../../public/npm/tagify"
+    "sync": {
+      "node_modules/@yaireo/tagify/dist/tagify.min.js": "public/npm/tagify"
     }
   }
 }
diff --git a/ui/analyse/src/main.ts b/ui/analyse/src/analyse.ts
similarity index 100%
rename from ui/analyse/src/main.ts
rename to ui/analyse/src/analyse.ts
diff --git a/ui/analyse/src/autoShape.ts b/ui/analyse/src/autoShape.ts
index d3b71f1dacaca..e281650a4b41a 100644
--- a/ui/analyse/src/autoShape.ts
+++ b/ui/analyse/src/autoShape.ts
@@ -148,7 +148,7 @@ function hiliteVariations(ctrl: AnalyseCtrl, autoShapes: DrawShape[]) {
     if (existing) {
       if (i === ctrl.fork.selected()) {
         existing.brush = brush;
-        existing.modifiers ??= {};
+        if (!existing.modifiers) existing.modifiers = {};
         existing.modifiers.hilite = true;
       }
     } else if (!userShape) {
diff --git a/ui/analyse/src/ctrl.ts b/ui/analyse/src/ctrl.ts
index 2f38b2b68a748..c9006e6570324 100644
--- a/ui/analyse/src/ctrl.ts
+++ b/ui/analyse/src/ctrl.ts
@@ -142,7 +142,7 @@ export default class AnalyseCtrl {
     if (this.data.forecast) this.forecast = new ForecastCtrl(this.data.forecast, this.data, redraw);
     if (this.opts.wiki) this.wiki = wikiTheory();
     if (site.blindMode)
-      site.asset.loadEsm<NvuiPlugin>('analysisBoard.nvui', { init: this }).then(nvui => (this.nvui = nvui));
+      site.asset.loadEsm<NvuiPlugin>('analyse.nvui', { init: this }).then(nvui => (this.nvui = nvui));
 
     this.instanciateEvalCache();
 
diff --git a/ui/analyse/src/plugins/nvui.ts b/ui/analyse/src/plugins/analyse.nvui.ts
similarity index 100%
rename from ui/analyse/src/plugins/nvui.ts
rename to ui/analyse/src/plugins/analyse.nvui.ts
diff --git a/ui/analyse/src/plugins/studyTopicForm.ts b/ui/analyse/src/plugins/analyse.study.topic.form.ts
similarity index 100%
rename from ui/analyse/src/plugins/studyTopicForm.ts
rename to ui/analyse/src/plugins/analyse.study.topic.form.ts
diff --git a/ui/analyse/src/plugins/studyTour.ts b/ui/analyse/src/plugins/analyse.study.tour.ts
similarity index 100%
rename from ui/analyse/src/plugins/studyTour.ts
rename to ui/analyse/src/plugins/analyse.study.tour.ts
diff --git a/ui/analyse/src/plugins/studyMain.ts b/ui/analyse/src/plugins/analyse.study.ts
similarity index 100%
rename from ui/analyse/src/plugins/studyMain.ts
rename to ui/analyse/src/plugins/analyse.study.ts
diff --git a/ui/analyse/src/study/chapterNewForm.ts b/ui/analyse/src/study/chapterNewForm.ts
index bde4034091b55..21bd953026fa3 100644
--- a/ui/analyse/src/study/chapterNewForm.ts
+++ b/ui/analyse/src/study/chapterNewForm.ts
@@ -79,7 +79,7 @@ export class StudyChapterNewForm {
   };
   startTour = async () => {
     const [tour] = await Promise.all([
-      site.asset.loadEsm<StudyTour>('study.tour'),
+      site.asset.loadEsm<StudyTour>('analyse.study.tour'),
       site.asset.loadCssPath('shepherd'),
     ]);
 
diff --git a/ui/analyse/src/study/relay/relayView.ts b/ui/analyse/src/study/relay/relayView.ts
index e2dd4293520f4..027f548f1e7c2 100644
--- a/ui/analyse/src/study/relay/relayView.ts
+++ b/ui/analyse/src/study/relay/relayView.ts
@@ -78,7 +78,7 @@ export function renderPinnedImage(ctx: RelayViewContext): MaybeVNode {
 }
 
 export function allowVideo(): boolean {
-  return window.getComputedStyle(document.body).getPropertyValue('--allow-video') === 'true';
+  return window.getComputedStyle(document.body).getPropertyValue('---allow-video') === 'true';
 }
 
 function renderBoardView(ctx: RelayViewContext) {
diff --git a/ui/analyse/src/study/relay/videoPlayerView.ts b/ui/analyse/src/study/relay/videoPlayerView.ts
index 2883d3005359c..baa0ac058ee7c 100644
--- a/ui/analyse/src/study/relay/videoPlayerView.ts
+++ b/ui/analyse/src/study/relay/videoPlayerView.ts
@@ -6,7 +6,7 @@ let player: VideoPlayer;
 
 export function renderVideoPlayer(relay: RelayCtrl): VNode | undefined {
   if (!relay.data.videoUrls) return undefined;
-  player ??= new VideoPlayer(relay);
+  if (!player) player = new VideoPlayer(relay);
   return h('div#video-player-placeholder', {
     hook: {
       insert: (vnode: VNode) => player.cover(vnode.elm as HTMLElement),
@@ -42,6 +42,7 @@ class VideoPlayer {
 
     this.iframe.id = 'video-player';
     this.iframe.src = relay.data.videoUrls![0];
+    this.iframe.setAttribute('credentialless', ''); // a feeble mewling ignored by all
     this.iframe.allow = 'autoplay';
     this.iframe.setAttribute('credentialless', 'credentialless');
     this.close = document.createElement('img');
diff --git a/ui/analyse/src/study/studyCtrl.ts b/ui/analyse/src/study/studyCtrl.ts
index 72fc48519daf7..78639011923c4 100644
--- a/ui/analyse/src/study/studyCtrl.ts
+++ b/ui/analyse/src/study/studyCtrl.ts
@@ -261,7 +261,7 @@ export default class StudyCtrl {
 
   startTour = async () => {
     const [tour] = await Promise.all([
-      site.asset.loadEsm<StudyTour>('study.tour'),
+      site.asset.loadEsm<StudyTour>('analyse.study.tour'),
       site.asset.loadCssPath('shepherd'),
     ]);
 
diff --git a/ui/pagelets/README.md b/ui/bits/README.md
similarity index 90%
rename from ui/pagelets/README.md
rename to ui/bits/README.md
index 210ad86457368..681a74d59df86 100644
--- a/ui/pagelets/README.md
+++ b/ui/bits/README.md
@@ -1,3 +1,3 @@
-# pagelets
+# bits
 
 A collection of single file modules that are loaded dynamically but may also export types and loading stubs.
diff --git a/ui/pagelets/css/_account.scss b/ui/bits/css/_account.scss
similarity index 90%
rename from ui/pagelets/css/_account.scss
rename to ui/bits/css/_account.scss
index 2b3adad0f27e1..5c06da7676733 100644
--- a/ui/pagelets/css/_account.scss
+++ b/ui/bits/css/_account.scss
@@ -65,7 +65,7 @@
   .brand {
     @extend %box-neat;
 
-    background: mix($c-accent, $c-bg-box, 10);
+    background: $m-accent_bg--mix-10;
     padding: 1.5em;
   }
 
@@ -83,14 +83,14 @@
     fieldset {
       @extend %box-neat;
       border: $c-border;
-      background: mix($c-accent, $c-bg-box, 10);
+      background: $m-accent_bg--mix-10;
       flex: 1 1 49%;
     }
     legend {
       @extend %roboto, %box-radius-top;
       text-transform: uppercase;
       letter-spacing: 0.2ch;
-      background: mix($c-accent, $c-bg-box, 10);
+      background: $m-accent_bg--mix-10;
       padding: 0.2em 1em;
       margin-left: 1em;
     }
@@ -170,9 +170,9 @@
         vertical-align: middle;
         width: 100%;
         height: 1px;
-        background: linear-gradient(to right, fade-out($c-accent, 0.5), $c-bg-box 80%);
+        background: linear-gradient(to right, $m-accent--fade-50, $c-bg-box 80%);
         @include if-rtl {
-          background: linear-gradient(to left, fade-out($c-accent, 0.5), $c-bg-box 80%);
+          background: linear-gradient(to left, $m-accent--fade-50, $c-bg-box 80%);
         }
       }
     }
@@ -201,7 +201,7 @@
 
       div {
         background: transparent;
-        color: c-dimmer($c-font-dimmer);
+        color: $m-font_dimmer--mix-50;
       }
 
       div.always-on {
@@ -231,7 +231,7 @@
     text-align: center;
     color: $c-good;
     border: 1px solid $c-good;
-    background: mix($c-good, $c-bg-box, 10);
+    background: $m-secondary_bg--mix-10;
     padding: 2rem;
   }
 
diff --git a/ui/pagelets/css/_appeal.scss b/ui/bits/css/_appeal.scss
similarity index 94%
rename from ui/pagelets/css/_appeal.scss
rename to ui/bits/css/_appeal.scss
index 43e6bb9983393..890b44e9b53ae 100644
--- a/ui/pagelets/css/_appeal.scss
+++ b/ui/bits/css/_appeal.scss
@@ -70,7 +70,7 @@
 
     border-radius: 20px;
     padding: 1rem;
-    background: mix($c-warn, $c-bg-box, 60%);
+    background: $m-brag_bg--mix-60;
     border: 1px solid $c-warn;
     text-align: center;
     font-size: 1.2em;
@@ -80,12 +80,12 @@
     padding: 0.7em;
     text-align: center;
     background: $c-good;
-    color: $c-good-over;
+    color: $c-over;
   }
 
   .marked .root h2 {
     background: $c-bad;
-    color: $c-bad-over;
+    color: $c-over;
   }
 
   .appeal-presets {
diff --git a/ui/pagelets/css/_auth.scss b/ui/bits/css/_auth.scss
similarity index 100%
rename from ui/pagelets/css/_auth.scss
rename to ui/bits/css/_auth.scss
diff --git a/ui/pagelets/css/_blind.scss b/ui/bits/css/_blind.scss
similarity index 100%
rename from ui/pagelets/css/_blind.scss
rename to ui/bits/css/_blind.scss
diff --git a/ui/pagelets/css/_clas.scss b/ui/bits/css/_clas.scss
similarity index 89%
rename from ui/pagelets/css/_clas.scss
rename to ui/bits/css/_clas.scss
index a939ced0cf921..61ea081b46ab5 100644
--- a/ui/pagelets/css/_clas.scss
+++ b/ui/bits/css/_clas.scss
@@ -1,9 +1,6 @@
-$c-clas: rgb(127, 90, 240);
-
-$c-font-clas: mix($c-font-clear, $c-clas, 30%);
 $c-bg-clas: $c-clas;
 $c-bg-clas-over: white;
-$c-bg-clas-over-dim: mix($c-bg-clas-over, $c-bg-clas, 80%);
+$c-bg-clas-over-dim: $m-clas_white--mix-20;
 
 %archived {
   @extend %box-radius, %flex-between;
@@ -22,7 +19,7 @@ $c-bg-clas-over-dim: mix($c-bg-clas-over, $c-bg-clas, 80%);
   }
 
   &.active {
-    color: $c-font-clas;
+    color: $m-font_clas--mix-40;
   }
 
   &::after {
@@ -49,7 +46,7 @@ $c-bg-clas-over-dim: mix($c-bg-clas-over, $c-bg-clas, 80%);
 }
 
 .slist tbody tr:nth-child(2n) {
-  background: mix($c-bg-box, $c-bg-clas, 93%);
+  background: $m-clas_bg--mix-7;
 }
 
 .clas-index {
@@ -77,13 +74,13 @@ $c-bg-clas-over-dim: mix($c-bg-clas-over, $c-bg-clas, 80%);
       @extend %flex-center-nowrap, %break-word;
 
       border-bottom: $border;
-      padding: 2em var(--box-padding);
+      padding: 2em var(---box-padding);
       position: relative;
 
       @include transition;
 
       &::before {
-        color: mix($c-clas, $c-bg-box, 80%);
+        color: $m-clas_bg--mix-80;
         font-size: 5em;
         margin-inline-end: 0.4em;
 
@@ -94,10 +91,10 @@ $c-bg-clas-over-dim: mix($c-bg-clas-over, $c-bg-clas, 80%);
       }
 
       &:hover {
-        background: mix($c-clas, $c-bg-box, 10%);
+        background: $m-clas_bg--mix-10;
 
         &::before {
-          color: mix($c-clas, $c-bg-box, 100%);
+          color: $c-clas;
         }
       }
 
@@ -164,7 +161,7 @@ $c-bg-clas-over-dim: mix($c-bg-clas-over, $c-bg-clas, 80%);
     margin: 2em 2em 0 2em;
 
     &__content {
-      padding: 2em var(--box-padding);
+      padding: 2em var(---box-padding);
     }
   }
 
@@ -176,14 +173,14 @@ $c-bg-clas-over-dim: mix($c-bg-clas-over, $c-bg-clas, 80%);
 
     .button {
       font-size: 1.2em;
-      color: $c-font-clas;
+      color: $m-font_clas--mix-40;
     }
 
     .user-link {
       @extend %flex-center;
 
       &:hover {
-        color: $c-font-clas;
+        color: $m-font_clas--mix-40;
       }
 
       span {
@@ -240,12 +237,12 @@ $c-bg-clas-over-dim: mix($c-bg-clas-over, $c-bg-clas, 80%);
       }
 
       &:hover {
-        background: mix($c-bg-zebra, $c-clas, 20%);
+        background: $m-clas_bg-zebra--mix-20;
       }
 
       &.active {
         background: $c-bg-box;
-        color: $c-font-clas;
+        color: $m-font_clas--mix-40;
         font-weight: bold;
 
         .dashboard-teacher-overview &,
@@ -285,7 +282,7 @@ $c-bg-clas-over-dim: mix($c-bg-clas-over, $c-bg-clas, 80%);
 
   &-teacher {
     .clas-show__top h1 {
-      padding: 1.5em var(--box-padding);
+      padding: 1.5em var(---box-padding);
       margin: 0;
     }
 
@@ -316,7 +313,7 @@ $c-bg-clas-over-dim: mix($c-bg-clas-over, $c-bg-clas, 80%);
       &-choices {
         @extend %flex-center, %box-neat-force;
 
-        @if $theme-dark {
+        @include if-not-light {
           box-shadow: none;
         }
 
@@ -332,13 +329,13 @@ $c-bg-clas-over-dim: mix($c-bg-clas-over, $c-bg-clas, 80%);
         color: $c-clas;
 
         &:hover {
-          background: mix($c-bg-box, $c-clas, 70%);
+          background: $m-clas_bg--mix-30;
           color: $c-font-clear;
         }
 
         &.active {
           background: $c-clas;
-          color: $c-good-over;
+          color: $c-over;
         }
 
         border-inline-end: 1px solid $c-border;
@@ -417,7 +414,7 @@ $c-bg-clas-over-dim: mix($c-bg-clas-over, $c-bg-clas, 80%);
   padding-bottom: 3em;
 
   &__top {
-    padding: calc(#{$box-padding-vert} - 1rem) var(--box-padding);
+    padding: calc(#{$box-padding-vert} - 1rem) var(---box-padding);
     background: $c-bg-clas;
     margin-bottom: 3em;
 
@@ -473,7 +470,7 @@ $c-bg-clas-over-dim: mix($c-bg-clas-over, $c-bg-clas, 80%);
   &__managed {
     @extend %box-radius, %flex-between;
 
-    background: fade-out($c-primary, 0.8);
+    background: $m-primary--fade-80;
     padding: 1em 2em;
     margin: 1em 0 2em 0;
 
@@ -526,7 +523,7 @@ $c-bg-clas-over-dim: mix($c-bg-clas-over, $c-bg-clas, 80%);
   &__choice {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
-    grid-gap: var(--box-padding);
+    grid-gap: var(---box-padding);
     align-items: center;
 
     h2 {
@@ -591,7 +588,7 @@ $c-bg-clas-over-dim: mix($c-bg-clas-over, $c-bg-clas, 80%);
     .button {
       margin-bottom: 2em;
       display: inline-block;
-      background: mix($c-bg-clas, white, 86%);
+      background: $c-clas-light;
     }
   }
 }
@@ -617,7 +614,7 @@ $c-bg-clas-over-dim: mix($c-bg-clas-over, $c-bg-clas, 80%);
 
   li:hover,
   .active {
-    background-color: mix($c-accent, $c-bg-popup, 10%);
+    background-color: $m-accent_bg-popup--mix-10;
   }
 
   a {
diff --git a/ui/pagelets/css/_cms.scss b/ui/bits/css/_cms.scss
similarity index 100%
rename from ui/pagelets/css/_cms.scss
rename to ui/bits/css/_cms.scss
diff --git a/ui/pagelets/css/_cropDialog.scss b/ui/bits/css/_cropDialog.scss
similarity index 100%
rename from ui/pagelets/css/_cropDialog.scss
rename to ui/bits/css/_cropDialog.scss
diff --git a/ui/pagelets/css/_dailyFeed.scss b/ui/bits/css/_dailyFeed.scss
similarity index 96%
rename from ui/pagelets/css/_dailyFeed.scss
rename to ui/bits/css/_dailyFeed.scss
index 803ae032a3d16..404398fb72a08 100644
--- a/ui/pagelets/css/_dailyFeed.scss
+++ b/ui/bits/css/_dailyFeed.scss
@@ -1,5 +1,3 @@
-$c-contours: mix($c-brag, $c-shade, 80%);
-
 .daily-feed {
   &__updates {
     margin: 3em 3em 0 3em;
diff --git a/ui/pagelets/css/_dgt.scss b/ui/bits/css/_dgt.scss
similarity index 100%
rename from ui/pagelets/css/_dgt.scss
rename to ui/bits/css/_dgt.scss
diff --git a/ui/pagelets/css/_diagnosticDialog.scss b/ui/bits/css/_diagnosticDialog.scss
similarity index 100%
rename from ui/pagelets/css/_diagnosticDialog.scss
rename to ui/bits/css/_diagnosticDialog.scss
diff --git a/ui/pagelets/css/_email-confirm.scss b/ui/bits/css/_email-confirm.scss
similarity index 100%
rename from ui/pagelets/css/_email-confirm.scss
rename to ui/bits/css/_email-confirm.scss
diff --git a/ui/pagelets/css/_event.scss b/ui/bits/css/_event.scss
similarity index 100%
rename from ui/pagelets/css/_event.scss
rename to ui/bits/css/_event.scss
diff --git a/ui/pagelets/css/_faq.scss b/ui/bits/css/_faq.scss
similarity index 100%
rename from ui/pagelets/css/_faq.scss
rename to ui/bits/css/_faq.scss
diff --git a/ui/pagelets/css/_feature.scss b/ui/bits/css/_feature.scss
similarity index 96%
rename from ui/pagelets/css/_feature.scss
rename to ui/bits/css/_feature.scss
index 5e2a8a7ec03e6..7b0fe2b5a13e4 100644
--- a/ui/pagelets/css/_feature.scss
+++ b/ui/bits/css/_feature.scss
@@ -56,7 +56,7 @@
 
     margin: 3em 10% 1em 10%;
     padding: 2em 3em 3em 3em;
-    background: mix($c-good, $c-bg-box, 30%);
+    background: $m-secondary_bg--mix-30;
     font-size: 1.3em;
 
     strong {
diff --git a/ui/pagelets/css/_fide.scss b/ui/bits/css/_fide.scss
similarity index 94%
rename from ui/pagelets/css/_fide.scss
rename to ui/bits/css/_fide.scss
index bcdfbedf715b9..2dca55effabdd 100644
--- a/ui/pagelets/css/_fide.scss
+++ b/ui/bits/css/_fide.scss
@@ -75,7 +75,7 @@
     }
   }
   &__cards {
-    margin-bottom: var(--box-padding);
+    margin-bottom: var(---box-padding);
   }
   &__card {
     div {
@@ -107,10 +107,10 @@
     }
   }
   &__cards {
-    margin-top: var(--box-padding);
+    margin-top: var(---box-padding);
   }
   &__tours {
-    margin-top: var(--box-padding);
+    margin-top: var(---box-padding);
     h2 {
       margin-bottom: 1em;
     }
diff --git a/ui/pagelets/css/_importer.scss b/ui/bits/css/_importer.scss
similarity index 100%
rename from ui/pagelets/css/_importer.scss
rename to ui/bits/css/_importer.scss
diff --git a/ui/pagelets/css/_lag.scss b/ui/bits/css/_lag.scss
similarity index 100%
rename from ui/pagelets/css/_lag.scss
rename to ui/bits/css/_lag.scss
diff --git a/ui/pagelets/css/_linkPopup.scss b/ui/bits/css/_linkPopup.scss
similarity index 100%
rename from ui/pagelets/css/_linkPopup.scss
rename to ui/bits/css/_linkPopup.scss
diff --git a/ui/pagelets/css/_lpv.embed.scss b/ui/bits/css/_lpv.embed.scss
similarity index 100%
rename from ui/pagelets/css/_lpv.embed.scss
rename to ui/bits/css/_lpv.embed.scss
diff --git a/ui/pagelets/css/_markdown-editor.scss b/ui/bits/css/_markdown-editor.scss
similarity index 100%
rename from ui/pagelets/css/_markdown-editor.scss
rename to ui/bits/css/_markdown-editor.scss
diff --git a/ui/pagelets/css/_mobile.scss b/ui/bits/css/_mobile.scss
similarity index 100%
rename from ui/pagelets/css/_mobile.scss
rename to ui/bits/css/_mobile.scss
diff --git a/ui/pagelets/css/_not-found.scss b/ui/bits/css/_not-found.scss
similarity index 100%
rename from ui/pagelets/css/_not-found.scss
rename to ui/bits/css/_not-found.scss
diff --git a/ui/pagelets/css/_oauth.scss b/ui/bits/css/_oauth.scss
similarity index 95%
rename from ui/pagelets/css/_oauth.scss
rename to ui/bits/css/_oauth.scss
index 9074af668c486..644b4a1a94b08 100644
--- a/ui/pagelets/css/_oauth.scss
+++ b/ui/bits/css/_oauth.scss
@@ -43,7 +43,7 @@
     .danger {
       @extend %box-neat;
       font-weight: bold;
-      color: $c-bad-over;
+      color: $c-over;
       background: $c-bad;
       padding: 0.3em 0.8em;
       &::before {
@@ -51,7 +51,7 @@
         font-size: 1.5em;
         @include margin-inline-end(0.2em);
         content: $licon-CautionTriangle;
-        color: $c-bad-over;
+        color: $c-over;
       }
     }
   }
diff --git a/ui/pagelets/css/_page.scss b/ui/bits/css/_page.scss
similarity index 100%
rename from ui/pagelets/css/_page.scss
rename to ui/bits/css/_page.scss
diff --git a/ui/pagelets/css/_perf-stat.scss b/ui/bits/css/_perf-stat.scss
similarity index 100%
rename from ui/pagelets/css/_perf-stat.scss
rename to ui/bits/css/_perf-stat.scss
diff --git a/ui/pagelets/css/_plan.scss b/ui/bits/css/_plan.scss
similarity index 98%
rename from ui/pagelets/css/_plan.scss
rename to ui/bits/css/_plan.scss
index b8343efafa67c..e4bc9666d6605 100644
--- a/ui/pagelets/css/_plan.scss
+++ b/ui/bits/css/_plan.scss
@@ -77,7 +77,7 @@
 
     margin-bottom: 2.5em;
     background: $c-good;
-    color: $c-good-over;
+    color: $c-over;
     text-align: center;
     font-size: 1.3em;
     min-height: 200px;
@@ -144,7 +144,7 @@
       background: $c-good;
       border-color: $c-border;
       box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15) inset !important;
-      color: $c-good-over;
+      color: $c-over;
       text-shadow: 0 1px 0 #000 !important;
     }
 
diff --git a/ui/pagelets/css/_relation.scss b/ui/bits/css/_relation.scss
similarity index 100%
rename from ui/pagelets/css/_relation.scss
rename to ui/bits/css/_relation.scss
diff --git a/ui/pagelets/css/_search.scss b/ui/bits/css/_search.scss
similarity index 100%
rename from ui/pagelets/css/_search.scss
rename to ui/bits/css/_search.scss
diff --git a/ui/pagelets/css/_source.scss b/ui/bits/css/_source.scss
similarity index 100%
rename from ui/pagelets/css/_source.scss
rename to ui/bits/css/_source.scss
diff --git a/ui/pagelets/css/_user-simul.scss b/ui/bits/css/_user-simul.scss
similarity index 100%
rename from ui/pagelets/css/_user-simul.scss
rename to ui/bits/css/_user-simul.scss
diff --git a/ui/pagelets/css/_user-tournament.scss b/ui/bits/css/_user-tournament.scss
similarity index 100%
rename from ui/pagelets/css/_user-tournament.scss
rename to ui/bits/css/_user-tournament.scss
diff --git a/ui/pagelets/css/_variant.scss b/ui/bits/css/_variant.scss
similarity index 93%
rename from ui/pagelets/css/_variant.scss
rename to ui/bits/css/_variant.scss
index ae801fdf2a785..c762e189b8de6 100644
--- a/ui/pagelets/css/_variant.scss
+++ b/ui/bits/css/_variant.scss
@@ -22,7 +22,7 @@
     @include transition;
 
     &:hover {
-      background: mix($c-link, $c-bg-box, 20%);
+      background: $m-primary_bg--mix-20;
     }
 
     &::before {
diff --git a/ui/pagelets/css/_video.scss b/ui/bits/css/_video.scss
similarity index 98%
rename from ui/pagelets/css/_video.scss
rename to ui/bits/css/_video.scss
index 5d291708fbfc0..fc72456725685 100644
--- a/ui/pagelets/css/_video.scss
+++ b/ui/bits/css/_video.scss
@@ -94,7 +94,7 @@
       z-index: 2;
       opacity: 1;
       padding: 0 5px;
-      background: fade-out($c-bg-box, 0.2);
+      background: $m-bg--fade-20;
     }
 
     .view {
@@ -209,7 +209,7 @@
 
         @include mq-subnav-top {
           background: $c-accent;
-          color: $c-accent-over;
+          color: $c-over;
         }
       }
 
diff --git a/ui/pagelets/css/build/_account.scss b/ui/bits/css/build/account.scss
similarity index 100%
rename from ui/pagelets/css/build/_account.scss
rename to ui/bits/css/build/account.scss
diff --git a/ui/pagelets/css/build/_appeal.scss b/ui/bits/css/build/appeal.scss
similarity index 100%
rename from ui/pagelets/css/build/_appeal.scss
rename to ui/bits/css/build/appeal.scss
diff --git a/ui/pagelets/css/build/_auth.scss b/ui/bits/css/build/auth.scss
similarity index 100%
rename from ui/pagelets/css/build/_auth.scss
rename to ui/bits/css/build/auth.scss
diff --git a/ui/pagelets/css/build/blind.scss b/ui/bits/css/build/blind.scss
similarity index 100%
rename from ui/pagelets/css/build/blind.scss
rename to ui/bits/css/build/blind.scss
diff --git a/ui/pagelets/css/build/_board-3d.scss b/ui/bits/css/build/board-3d.scss
similarity index 100%
rename from ui/pagelets/css/build/_board-3d.scss
rename to ui/bits/css/build/board-3d.scss
diff --git a/ui/pagelets/css/build/_bot.list.scss b/ui/bits/css/build/bot.list.scss
similarity index 100%
rename from ui/pagelets/css/build/_bot.list.scss
rename to ui/bits/css/build/bot.list.scss
diff --git a/ui/pagelets/css/build/_clas.scss b/ui/bits/css/build/clas.scss
similarity index 100%
rename from ui/pagelets/css/build/_clas.scss
rename to ui/bits/css/build/clas.scss
diff --git a/ui/pagelets/css/build/_cms.scss b/ui/bits/css/build/cms.scss
similarity index 100%
rename from ui/pagelets/css/build/_cms.scss
rename to ui/bits/css/build/cms.scss
diff --git a/ui/pagelets/css/build/_coach.editor.scss b/ui/bits/css/build/coach.editor.scss
similarity index 100%
rename from ui/pagelets/css/build/_coach.editor.scss
rename to ui/bits/css/build/coach.editor.scss
diff --git a/ui/pagelets/css/build/_coach.scss b/ui/bits/css/build/coach.scss
similarity index 100%
rename from ui/pagelets/css/build/_coach.scss
rename to ui/bits/css/build/coach.scss
diff --git a/ui/pagelets/css/build/_complete.scss b/ui/bits/css/build/complete.scss
similarity index 100%
rename from ui/pagelets/css/build/_complete.scss
rename to ui/bits/css/build/complete.scss
diff --git a/ui/pagelets/css/build/_contact.scss b/ui/bits/css/build/contact.scss
similarity index 100%
rename from ui/pagelets/css/build/_contact.scss
rename to ui/bits/css/build/contact.scss
diff --git a/ui/pagelets/css/build/_cropDialog.scss b/ui/bits/css/build/cropDialog.scss
similarity index 100%
rename from ui/pagelets/css/build/_cropDialog.scss
rename to ui/bits/css/build/cropDialog.scss
diff --git a/ui/pagelets/css/build/_crosstable.scss b/ui/bits/css/build/crosstable.scss
similarity index 100%
rename from ui/pagelets/css/build/_crosstable.scss
rename to ui/bits/css/build/crosstable.scss
diff --git a/ui/pagelets/css/build/_dailyFeed.scss b/ui/bits/css/build/dailyFeed.scss
similarity index 100%
rename from ui/pagelets/css/build/_dailyFeed.scss
rename to ui/bits/css/build/dailyFeed.scss
diff --git a/ui/pagelets/css/build/_dgt.scss b/ui/bits/css/build/dgt.scss
similarity index 100%
rename from ui/pagelets/css/build/_dgt.scss
rename to ui/bits/css/build/dgt.scss
diff --git a/ui/pagelets/css/build/_diagnosticDialog.scss b/ui/bits/css/build/diagnosticDialog.scss
similarity index 100%
rename from ui/pagelets/css/build/_diagnosticDialog.scss
rename to ui/bits/css/build/diagnosticDialog.scss
diff --git a/ui/pagelets/css/build/_email-confirm.scss b/ui/bits/css/build/email-confirm.scss
similarity index 100%
rename from ui/pagelets/css/build/_email-confirm.scss
rename to ui/bits/css/build/email-confirm.scss
diff --git a/ui/pagelets/css/build/_event.scss b/ui/bits/css/build/event.scss
similarity index 100%
rename from ui/pagelets/css/build/_event.scss
rename to ui/bits/css/build/event.scss
diff --git a/ui/pagelets/css/build/_faq.scss b/ui/bits/css/build/faq.scss
similarity index 100%
rename from ui/pagelets/css/build/_faq.scss
rename to ui/bits/css/build/faq.scss
diff --git a/ui/pagelets/css/build/_feature.scss b/ui/bits/css/build/feature.scss
similarity index 100%
rename from ui/pagelets/css/build/_feature.scss
rename to ui/bits/css/build/feature.scss
diff --git a/ui/pagelets/css/build/_fide.scss b/ui/bits/css/build/fide.scss
similarity index 100%
rename from ui/pagelets/css/build/_fide.scss
rename to ui/bits/css/build/fide.scss
diff --git a/ui/pagelets/css/build/_flatpickr.scss b/ui/bits/css/build/flatpickr.scss
similarity index 100%
rename from ui/pagelets/css/build/_flatpickr.scss
rename to ui/bits/css/build/flatpickr.scss
diff --git a/ui/pagelets/css/build/_form3-captcha.scss b/ui/bits/css/build/form3-captcha.scss
similarity index 100%
rename from ui/pagelets/css/build/_form3-captcha.scss
rename to ui/bits/css/build/form3-captcha.scss
diff --git a/ui/pagelets/css/build/_form3.scss b/ui/bits/css/build/form3.scss
similarity index 100%
rename from ui/pagelets/css/build/_form3.scss
rename to ui/bits/css/build/form3.scss
diff --git a/ui/pagelets/css/build/_forum.scss b/ui/bits/css/build/forum.scss
similarity index 100%
rename from ui/pagelets/css/build/_forum.scss
rename to ui/bits/css/build/forum.scss
diff --git a/ui/pagelets/css/build/_importer.scss b/ui/bits/css/build/importer.scss
similarity index 100%
rename from ui/pagelets/css/build/_importer.scss
rename to ui/bits/css/build/importer.scss
diff --git a/ui/pagelets/css/build/_lag.scss b/ui/bits/css/build/lag.scss
similarity index 100%
rename from ui/pagelets/css/build/_lag.scss
rename to ui/bits/css/build/lag.scss
diff --git a/ui/pagelets/css/build/_linkPopup.scss b/ui/bits/css/build/linkPopup.scss
similarity index 100%
rename from ui/pagelets/css/build/_linkPopup.scss
rename to ui/bits/css/build/linkPopup.scss
diff --git a/ui/pagelets/css/build/_lpv.embed.scss b/ui/bits/css/build/lpv.embed.scss
similarity index 100%
rename from ui/pagelets/css/build/_lpv.embed.scss
rename to ui/bits/css/build/lpv.embed.scss
diff --git a/ui/pagelets/css/build/_lpv.scss b/ui/bits/css/build/lpv.scss
similarity index 100%
rename from ui/pagelets/css/build/_lpv.scss
rename to ui/bits/css/build/lpv.scss
diff --git a/ui/pagelets/css/build/_mobile.scss b/ui/bits/css/build/mobile.scss
similarity index 100%
rename from ui/pagelets/css/build/_mobile.scss
rename to ui/bits/css/build/mobile.scss
diff --git a/ui/pagelets/css/build/_mod.activity.scss b/ui/bits/css/build/mod.activity.scss
similarity index 100%
rename from ui/pagelets/css/build/_mod.activity.scss
rename to ui/bits/css/build/mod.activity.scss
diff --git a/ui/pagelets/css/build/_mod.communication.scss b/ui/bits/css/build/mod.communication.scss
similarity index 100%
rename from ui/pagelets/css/build/_mod.communication.scss
rename to ui/bits/css/build/mod.communication.scss
diff --git a/ui/pagelets/css/build/_mod.form.scss b/ui/bits/css/build/mod.form.scss
similarity index 100%
rename from ui/pagelets/css/build/_mod.form.scss
rename to ui/bits/css/build/mod.form.scss
diff --git a/ui/pagelets/css/build/_mod.games.scss b/ui/bits/css/build/mod.games.scss
similarity index 100%
rename from ui/pagelets/css/build/_mod.games.scss
rename to ui/bits/css/build/mod.games.scss
diff --git a/ui/pagelets/css/build/_mod.gamify.scss b/ui/bits/css/build/mod.gamify.scss
similarity index 100%
rename from ui/pagelets/css/build/_mod.gamify.scss
rename to ui/bits/css/build/mod.gamify.scss
diff --git a/ui/pagelets/css/build/mod.impersonate.scss b/ui/bits/css/build/mod.impersonate.scss
similarity index 70%
rename from ui/pagelets/css/build/mod.impersonate.scss
rename to ui/bits/css/build/mod.impersonate.scss
index d914d16542f4a..d2cecb6611996 100644
--- a/ui/pagelets/css/build/mod.impersonate.scss
+++ b/ui/bits/css/build/mod.impersonate.scss
@@ -1,4 +1,4 @@
 @import '../../../common/css/abstract/dir';
-@import '../../../common/css/theme/dark';
+@import '../../../common/css/abstract/theme';
 @import '../../../common/css/plugin';
 @import '../mod/impersonate';
diff --git a/ui/pagelets/css/build/mod.inquiry.scss b/ui/bits/css/build/mod.inquiry.scss
similarity index 81%
rename from ui/pagelets/css/build/mod.inquiry.scss
rename to ui/bits/css/build/mod.inquiry.scss
index 150bae12db170..5004c1dd0daf4 100644
--- a/ui/pagelets/css/build/mod.inquiry.scss
+++ b/ui/bits/css/build/mod.inquiry.scss
@@ -1,5 +1,5 @@
 @import '../../../common/css/abstract/dir';
-@import '../../../common/css/theme/dark';
+@import '../../../common/css/abstract/theme';
 @import '../../../common/css/plugin';
 @import '../../../common/css/form/cmn-toggle';
 @import '../../../common/css/component/fbt';
diff --git a/ui/pagelets/css/build/_mod.misc.scss b/ui/bits/css/build/mod.misc.scss
similarity index 100%
rename from ui/pagelets/css/build/_mod.misc.scss
rename to ui/bits/css/build/mod.misc.scss
diff --git a/ui/pagelets/css/build/_mod.permission.scss b/ui/bits/css/build/mod.permission.scss
similarity index 100%
rename from ui/pagelets/css/build/_mod.permission.scss
rename to ui/bits/css/build/mod.permission.scss
diff --git a/ui/pagelets/css/build/_mod.publicChats.scss b/ui/bits/css/build/mod.publicChats.scss
similarity index 100%
rename from ui/pagelets/css/build/_mod.publicChats.scss
rename to ui/bits/css/build/mod.publicChats.scss
diff --git a/ui/pagelets/css/build/_mod.report.scss b/ui/bits/css/build/mod.report.scss
similarity index 100%
rename from ui/pagelets/css/build/_mod.report.scss
rename to ui/bits/css/build/mod.report.scss
diff --git a/ui/pagelets/css/build/_mod.user.scss b/ui/bits/css/build/mod.user.scss
similarity index 100%
rename from ui/pagelets/css/build/_mod.user.scss
rename to ui/bits/css/build/mod.user.scss
diff --git a/ui/pagelets/css/build/_not-found.scss b/ui/bits/css/build/not-found.scss
similarity index 100%
rename from ui/pagelets/css/build/_not-found.scss
rename to ui/bits/css/build/not-found.scss
diff --git a/ui/pagelets/css/build/_oauth.scss b/ui/bits/css/build/oauth.scss
similarity index 100%
rename from ui/pagelets/css/build/_oauth.scss
rename to ui/bits/css/build/oauth.scss
diff --git a/ui/pagelets/css/build/_page.scss b/ui/bits/css/build/page.scss
similarity index 100%
rename from ui/pagelets/css/build/_page.scss
rename to ui/bits/css/build/page.scss
diff --git a/ui/pagelets/css/build/_perf-stat.scss b/ui/bits/css/build/perf-stat.scss
similarity index 100%
rename from ui/pagelets/css/build/_perf-stat.scss
rename to ui/bits/css/build/perf-stat.scss
diff --git a/ui/pagelets/css/build/_plan.scss b/ui/bits/css/build/plan.scss
similarity index 100%
rename from ui/pagelets/css/build/_plan.scss
rename to ui/bits/css/build/plan.scss
diff --git a/ui/pagelets/css/build/_practice.index.scss b/ui/bits/css/build/practice.index.scss
similarity index 100%
rename from ui/pagelets/css/build/_practice.index.scss
rename to ui/bits/css/build/practice.index.scss
diff --git a/ui/pagelets/css/build/_relation.scss b/ui/bits/css/build/relation.scss
similarity index 100%
rename from ui/pagelets/css/build/_relation.scss
rename to ui/bits/css/build/relation.scss
diff --git a/ui/pagelets/css/build/_relay.form.scss b/ui/bits/css/build/relay.form.scss
similarity index 100%
rename from ui/pagelets/css/build/_relay.form.scss
rename to ui/bits/css/build/relay.form.scss
diff --git a/ui/pagelets/css/build/_relay.index.scss b/ui/bits/css/build/relay.index.scss
similarity index 100%
rename from ui/pagelets/css/build/_relay.index.scss
rename to ui/bits/css/build/relay.index.scss
diff --git a/ui/pagelets/css/build/_search.scss b/ui/bits/css/build/search.scss
similarity index 100%
rename from ui/pagelets/css/build/_search.scss
rename to ui/bits/css/build/search.scss
diff --git a/ui/pagelets/css/build/_slist.scss b/ui/bits/css/build/slist.scss
similarity index 100%
rename from ui/pagelets/css/build/_slist.scss
rename to ui/bits/css/build/slist.scss
diff --git a/ui/pagelets/css/build/_source.scss b/ui/bits/css/build/source.scss
similarity index 100%
rename from ui/pagelets/css/build/_source.scss
rename to ui/bits/css/build/source.scss
diff --git a/ui/pagelets/css/build/_streamer.form.scss b/ui/bits/css/build/streamer.form.scss
similarity index 100%
rename from ui/pagelets/css/build/_streamer.form.scss
rename to ui/bits/css/build/streamer.form.scss
diff --git a/ui/pagelets/css/build/_streamer.list.scss b/ui/bits/css/build/streamer.list.scss
similarity index 100%
rename from ui/pagelets/css/build/_streamer.list.scss
rename to ui/bits/css/build/streamer.list.scss
diff --git a/ui/pagelets/css/build/_streamer.show.scss b/ui/bits/css/build/streamer.show.scss
similarity index 100%
rename from ui/pagelets/css/build/_streamer.show.scss
rename to ui/bits/css/build/streamer.show.scss
diff --git a/ui/pagelets/css/build/_tagify.scss b/ui/bits/css/build/tagify.scss
similarity index 100%
rename from ui/pagelets/css/build/_tagify.scss
rename to ui/bits/css/build/tagify.scss
diff --git a/ui/pagelets/css/build/_team.scss b/ui/bits/css/build/team.scss
similarity index 100%
rename from ui/pagelets/css/build/_team.scss
rename to ui/bits/css/build/team.scss
diff --git a/ui/pagelets/css/build/_tv.embed.scss b/ui/bits/css/build/tv.embed.scss
similarity index 100%
rename from ui/pagelets/css/build/_tv.embed.scss
rename to ui/bits/css/build/tv.embed.scss
diff --git a/ui/pagelets/css/build/_tv.games.scss b/ui/bits/css/build/tv.games.scss
similarity index 100%
rename from ui/pagelets/css/build/_tv.games.scss
rename to ui/bits/css/build/tv.games.scss
diff --git a/ui/pagelets/css/build/_tv.single.scss b/ui/bits/css/build/tv.single.scss
similarity index 100%
rename from ui/pagelets/css/build/_tv.single.scss
rename to ui/bits/css/build/tv.single.scss
diff --git a/ui/pagelets/css/build/_ublog.form.scss b/ui/bits/css/build/ublog.form.scss
similarity index 100%
rename from ui/pagelets/css/build/_ublog.form.scss
rename to ui/bits/css/build/ublog.form.scss
diff --git a/ui/pagelets/css/build/_ublog.scss b/ui/bits/css/build/ublog.scss
similarity index 100%
rename from ui/pagelets/css/build/_ublog.scss
rename to ui/bits/css/build/ublog.scss
diff --git a/ui/pagelets/css/build/_user-simul.scss b/ui/bits/css/build/user-simul.scss
similarity index 100%
rename from ui/pagelets/css/build/_user-simul.scss
rename to ui/bits/css/build/user-simul.scss
diff --git a/ui/pagelets/css/build/_user-tournament.scss b/ui/bits/css/build/user-tournament.scss
similarity index 100%
rename from ui/pagelets/css/build/_user-tournament.scss
rename to ui/bits/css/build/user-tournament.scss
diff --git a/ui/pagelets/css/build/_user.list.scss b/ui/bits/css/build/user.list.scss
similarity index 100%
rename from ui/pagelets/css/build/_user.list.scss
rename to ui/bits/css/build/user.list.scss
diff --git a/ui/pagelets/css/build/_user.rating.stats.scss b/ui/bits/css/build/user.rating.stats.scss
similarity index 100%
rename from ui/pagelets/css/build/_user.rating.stats.scss
rename to ui/bits/css/build/user.rating.stats.scss
diff --git a/ui/pagelets/css/build/_user.show.scss b/ui/bits/css/build/user.show.scss
similarity index 100%
rename from ui/pagelets/css/build/_user.show.scss
rename to ui/bits/css/build/user.show.scss
diff --git a/ui/pagelets/css/build/_user.show.search.scss b/ui/bits/css/build/user.show.search.scss
similarity index 100%
rename from ui/pagelets/css/build/_user.show.search.scss
rename to ui/bits/css/build/user.show.search.scss
diff --git a/ui/pagelets/css/build/_variant.scss b/ui/bits/css/build/variant.scss
similarity index 100%
rename from ui/pagelets/css/build/_variant.scss
rename to ui/bits/css/build/variant.scss
diff --git a/ui/pagelets/css/build/_video.scss b/ui/bits/css/build/video.scss
similarity index 100%
rename from ui/pagelets/css/build/_video.scss
rename to ui/bits/css/build/video.scss
diff --git a/ui/pagelets/css/coach/_coach.scss b/ui/bits/css/coach/_coach.scss
similarity index 100%
rename from ui/pagelets/css/coach/_coach.scss
rename to ui/bits/css/coach/_coach.scss
diff --git a/ui/pagelets/css/coach/_editor.scss b/ui/bits/css/coach/_editor.scss
similarity index 95%
rename from ui/pagelets/css/coach/_editor.scss
rename to ui/bits/css/coach/_editor.scss
index 0dafc0df19228..b924e061d30bc 100644
--- a/ui/pagelets/css/coach/_editor.scss
+++ b/ui/bits/css/coach/_editor.scss
@@ -33,7 +33,7 @@
     width: 100%;
     display: flex;
     flex-flow: column;
-    padding: 0 var(--box-padding);
+    padding: 0 var(---box-padding);
   }
 
   .overview .todo {
@@ -57,7 +57,7 @@
     display: block;
     border-radius: 20px;
     padding: 1rem;
-    background: mix($c-error, $c-bg-box, 15%);
+    background: $m-bad_bg--mix-15;
     border: 1px solid $c-error;
     margin-bottom: 2rem;
   }
diff --git a/ui/pagelets/css/coach/_layout.scss b/ui/bits/css/coach/_layout.scss
similarity index 100%
rename from ui/pagelets/css/coach/_layout.scss
rename to ui/bits/css/coach/_layout.scss
diff --git a/ui/pagelets/css/coach/_list.scss b/ui/bits/css/coach/_list.scss
similarity index 93%
rename from ui/pagelets/css/coach/_list.scss
rename to ui/bits/css/coach/_list.scss
index 4e0e400cc3049..6d1b9171e24b5 100644
--- a/ui/pagelets/css/coach/_list.scss
+++ b/ui/bits/css/coach/_list.scss
@@ -43,7 +43,7 @@
       }
 
       &:hover {
-        background: mix($c-accent, $c-bg-box, 12%);
+        background: $m-accent_bg--mix-12;
       }
     }
 
diff --git a/ui/pagelets/css/coach/_picture.scss b/ui/bits/css/coach/_picture.scss
similarity index 88%
rename from ui/pagelets/css/coach/_picture.scss
rename to ui/bits/css/coach/_picture.scss
index 9ab1d7b0b6abe..491a8e8c0d4cf 100644
--- a/ui/pagelets/css/coach/_picture.scss
+++ b/ui/bits/css/coach/_picture.scss
@@ -4,7 +4,7 @@
   }
 
   form {
-    padding: 2em var(--box-padding);
+    padding: 2em var(---box-padding);
     border-top: $border;
     text-align: center;
   }
diff --git a/ui/pagelets/css/coach/_show.scss b/ui/bits/css/coach/_show.scss
similarity index 91%
rename from ui/pagelets/css/coach/_show.scss
rename to ui/bits/css/coach/_show.scss
index 2ce6574e6731e..a78851cf46fe3 100644
--- a/ui/pagelets/css/coach/_show.scss
+++ b/ui/bits/css/coach/_show.scss
@@ -25,7 +25,7 @@
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     grid-auto-flow: dense;
     grid-gap: 3em;
-    margin: var(--box-padding);
+    margin: var(---box-padding);
 
     section {
       font-size: 1.2em;
@@ -70,7 +70,7 @@
   &__posts {
     margin-top: 2em;
     .coach-show__title {
-      padding: 1em var(--box-padding);
+      padding: 1em var(---box-padding);
     }
   }
 
@@ -82,7 +82,7 @@
 
   &__posts {
     .ublog-post-cards {
-      margin: 0 var(--box-padding);
+      margin: 0 var(---box-padding);
     }
   }
 }
diff --git a/ui/pagelets/css/coach/_widget.scss b/ui/bits/css/coach/_widget.scss
similarity index 100%
rename from ui/pagelets/css/coach/_widget.scss
rename to ui/bits/css/coach/_widget.scss
diff --git a/ui/pagelets/css/forum/_completion.scss b/ui/bits/css/forum/_completion.scss
similarity index 100%
rename from ui/pagelets/css/forum/_completion.scss
rename to ui/bits/css/forum/_completion.scss
diff --git a/ui/pagelets/css/forum/_forum.scss b/ui/bits/css/forum/_forum.scss
similarity index 83%
rename from ui/pagelets/css/forum/_forum.scss
rename to ui/bits/css/forum/_forum.scss
index 55bd97d492d0c..ff7e25b4cdecd 100644
--- a/ui/pagelets/css/forum/_forum.scss
+++ b/ui/bits/css/forum/_forum.scss
@@ -20,11 +20,11 @@
     padding-bottom: 1rem;
 
     .sticky {
-      background: mix($c-secondary, $c-bg-box, 12%);
+      background: $m-secondary_bg--mix-12;
     }
 
     .sticky:nth-child(even) {
-      background: mix($c-secondary, $c-bg-zebra, 12%);
+      background: $m-secondary_bg-zebra--mix-12;
     }
 
     .bar {
diff --git a/ui/pagelets/css/forum/_mention.scss b/ui/bits/css/forum/_mention.scss
similarity index 86%
rename from ui/pagelets/css/forum/_mention.scss
rename to ui/bits/css/forum/_mention.scss
index c25e8aa848fd3..39d6b6f0ce08d 100644
--- a/ui/pagelets/css/forum/_mention.scss
+++ b/ui/bits/css/forum/_mention.scss
@@ -19,7 +19,7 @@
 
   li:hover,
   .active {
-    background-color: mix($c-accent, $c-bg-popup, 10%);
+    background-color: $m-accent_bg-popup--mix-10;
   }
 
   a {
diff --git a/ui/pagelets/css/forum/_post.scss b/ui/bits/css/forum/_post.scss
similarity index 97%
rename from ui/pagelets/css/forum/_post.scss
rename to ui/bits/css/forum/_post.scss
index 5f6e121f3881b..8da26d5f70bdb 100644
--- a/ui/pagelets/css/forum/_post.scss
+++ b/ui/bits/css/forum/_post.scss
@@ -21,7 +21,7 @@
       @extend %box-radius;
       padding: 0.2em;
       padding-inline-end: 0.8em;
-      background: mix($c-primary, $c-bg-box, 12%);
+      background: $m-primary_bg--mix-12;
     }
 
     .anchor {
diff --git a/ui/pagelets/css/forum/_reactions.scss b/ui/bits/css/forum/_reactions.scss
similarity index 90%
rename from ui/pagelets/css/forum/_reactions.scss
rename to ui/bits/css/forum/_reactions.scss
index 0c250b04d2f64..d978de997f18a 100644
--- a/ui/pagelets/css/forum/_reactions.scss
+++ b/ui/bits/css/forum/_reactions.scss
@@ -18,7 +18,7 @@
     height: 2.5em;
 
     &.mine {
-      background: mix($c-primary, $c-bg-box, 10%);
+      background: $m-primary_bg--mix-10;
 
       &:first-child {
         @extend %box-radius-left;
@@ -46,7 +46,7 @@
     &:hover {
       opacity: 0.7;
       filter: grayscale(0%);
-      background: mix($c-primary, $c-bg-box, 15%);
+      background: $m-primary_bg--mix-15;
 
       img {
         transform: scale(1.2) !important;
diff --git a/ui/pagelets/css/forum/_search.scss b/ui/bits/css/forum/_search.scss
similarity index 100%
rename from ui/pagelets/css/forum/_search.scss
rename to ui/bits/css/forum/_search.scss
diff --git a/ui/pagelets/css/forum/_table.scss b/ui/bits/css/forum/_table.scss
similarity index 100%
rename from ui/pagelets/css/forum/_table.scss
rename to ui/bits/css/forum/_table.scss
diff --git a/ui/pagelets/css/forum/_topic.scss b/ui/bits/css/forum/_topic.scss
similarity index 94%
rename from ui/pagelets/css/forum/_topic.scss
rename to ui/bits/css/forum/_topic.scss
index cbb5783c9de55..bff97ca04dcf4 100644
--- a/ui/pagelets/css/forum/_topic.scss
+++ b/ui/bits/css/forum/_topic.scss
@@ -10,7 +10,7 @@
 
       border-radius: 20px;
       padding: 1rem;
-      background: mix($c-error, $c-bg-box, 15%);
+      background: $m-bad_bg--mix-15;
       border: 1px solid $c-error;
       text-align: center;
       font-size: 1.3em;
diff --git a/ui/pagelets/css/mod/_activity.scss b/ui/bits/css/mod/_activity.scss
similarity index 100%
rename from ui/pagelets/css/mod/_activity.scss
rename to ui/bits/css/mod/_activity.scss
diff --git a/ui/pagelets/css/mod/_communication.scss b/ui/bits/css/mod/_communication.scss
similarity index 98%
rename from ui/pagelets/css/mod/_communication.scss
rename to ui/bits/css/mod/_communication.scss
index a507ea038c1d4..4202d1199139c 100644
--- a/ui/pagelets/css/mod/_communication.scss
+++ b/ui/bits/css/mod/_communication.scss
@@ -109,7 +109,7 @@
     opacity: 1;
     cursor: pointer;
     &:hover {
-      background: fade-out($c-accent, 0.8);
+      background: $m-accent--fade-80;
     }
   }
 
diff --git a/ui/pagelets/css/mod/_crud.scss b/ui/bits/css/mod/_crud.scss
similarity index 100%
rename from ui/pagelets/css/mod/_crud.scss
rename to ui/bits/css/mod/_crud.scss
diff --git a/ui/pagelets/css/mod/_dev.scss b/ui/bits/css/mod/_dev.scss
similarity index 100%
rename from ui/pagelets/css/mod/_dev.scss
rename to ui/bits/css/mod/_dev.scss
diff --git a/ui/pagelets/css/mod/_games.scss b/ui/bits/css/mod/_games.scss
similarity index 85%
rename from ui/pagelets/css/mod/_games.scss
rename to ui/bits/css/mod/_games.scss
index 32bc6e15c6310..a3d0cc1a4dfa2 100644
--- a/ui/pagelets/css/mod/_games.scss
+++ b/ui/bits/css/mod/_games.scss
@@ -8,10 +8,10 @@
     padding: 2px 1em;
   }
   good.result {
-    background: mix($c-good, $c-bg-box, 50%);
+    background: $m-secondary_bg--mix-50;
   }
   bad.result {
-    background: mix($c-bad, $c-bg-box, 50%);
+    background: $m-bad_bg--mix-50;
   }
 
   td.input {
diff --git a/ui/pagelets/css/mod/_gamify.scss b/ui/bits/css/mod/_gamify.scss
similarity index 100%
rename from ui/pagelets/css/mod/_gamify.scss
rename to ui/bits/css/mod/_gamify.scss
diff --git a/ui/pagelets/css/mod/_impersonate.scss b/ui/bits/css/mod/_impersonate.scss
similarity index 100%
rename from ui/pagelets/css/mod/_impersonate.scss
rename to ui/bits/css/mod/_impersonate.scss
diff --git a/ui/pagelets/css/mod/_inquiry.scss b/ui/bits/css/mod/_inquiry.scss
similarity index 100%
rename from ui/pagelets/css/mod/_inquiry.scss
rename to ui/bits/css/mod/_inquiry.scss
diff --git a/ui/pagelets/css/mod/_irwin.scss b/ui/bits/css/mod/_irwin.scss
similarity index 100%
rename from ui/pagelets/css/mod/_irwin.scss
rename to ui/bits/css/mod/_irwin.scss
diff --git a/ui/pagelets/css/mod/_misc.scss b/ui/bits/css/mod/_misc.scss
similarity index 100%
rename from ui/pagelets/css/mod/_misc.scss
rename to ui/bits/css/mod/_misc.scss
diff --git a/ui/pagelets/css/mod/_permission.scss b/ui/bits/css/mod/_permission.scss
similarity index 94%
rename from ui/pagelets/css/mod/_permission.scss
rename to ui/bits/css/mod/_permission.scss
index 5fde5786add3b..d34884f3b677f 100644
--- a/ui/pagelets/css/mod/_permission.scss
+++ b/ui/bits/css/mod/_permission.scss
@@ -35,7 +35,7 @@
   }
 
   .granted {
-    background: mix($c-good, $c-bg-box, 10%);
+    background: $m-secondary_bg--mix-10;
     color: $c-good;
     padding: 0.5em 0;
   }
diff --git a/ui/pagelets/css/mod/_practice.scss b/ui/bits/css/mod/_practice.scss
similarity index 100%
rename from ui/pagelets/css/mod/_practice.scss
rename to ui/bits/css/mod/_practice.scss
diff --git a/ui/pagelets/css/mod/_publicChats.scss b/ui/bits/css/mod/_publicChats.scss
similarity index 95%
rename from ui/pagelets/css/mod/_publicChats.scss
rename to ui/bits/css/mod/_publicChats.scss
index cbda6a48bcfba..d1313f9d1e39d 100644
--- a/ui/pagelets/css/mod/_publicChats.scss
+++ b/ui/bits/css/mod/_publicChats.scss
@@ -27,7 +27,7 @@
   .line:not(.lichess) {
     cursor: pointer;
     &:hover {
-      background: fade-out($c-accent, 0.8);
+      background: $m-accent--fade-80;
     }
   }
 
diff --git a/ui/pagelets/css/mod/_report.scss b/ui/bits/css/mod/_report.scss
similarity index 96%
rename from ui/pagelets/css/mod/_report.scss
rename to ui/bits/css/mod/_report.scss
index 2f4465c61eb73..595cdc0bf22c7 100644
--- a/ui/pagelets/css/mod/_report.scss
+++ b/ui/bits/css/mod/_report.scss
@@ -33,7 +33,7 @@ $c-report-high-over: white;
       justify-content: center;
 
       &:hover {
-        background: fade-out($c-report-high, 0.5);
+        background: $m-brag--fade-50;
         color: $c-report-high-over;
       }
 
@@ -146,7 +146,7 @@ $c-report-high-over: white;
 
   .marked-by-me {
     @include user_marks;
-    background: mix($c-warn, $c-bg-box, 60%);
+    background: $m-brag_bg--mix-60;
   }
 
   .appeal-queue {
diff --git a/ui/pagelets/css/mod/_user-marks.scss b/ui/bits/css/mod/_user-marks.scss
similarity index 100%
rename from ui/pagelets/css/mod/_user-marks.scss
rename to ui/bits/css/mod/_user-marks.scss
diff --git a/ui/pagelets/css/mod/_user.scss b/ui/bits/css/mod/_user.scss
similarity index 97%
rename from ui/pagelets/css/mod/_user.scss
rename to ui/bits/css/mod/_user.scss
index 0a9ea9fbdf59a..823531bf34043 100644
--- a/ui/pagelets/css/mod/_user.scss
+++ b/ui/bits/css/mod/_user.scss
@@ -144,7 +144,7 @@
 
     a {
       padding: 1.2em 1.2em;
-      color: $c-brag-over;
+      color: $c-over;
       font-size: 1.1em;
       font-weight: bold;
       opacity: 0.5;
@@ -154,7 +154,7 @@
       }
 
       &:not(.disabled):hover {
-        background: mix(white, $c-brag, 20%);
+        background: $m-brag_white--mix-80;
       }
 
       i {
@@ -259,11 +259,11 @@
       &.spy_filter {
         tbody tr {
           &:hover {
-            background: mix($c-brag, $c-bg-box, 15%);
+            background: $m-brag_bg--mix-15;
             cursor: pointer;
           }
           &.selected {
-            background: mix($c-brag, $c-bg-box, 40%);
+            background: $m-brag_bg--mix-40;
           }
         }
       }
diff --git a/ui/pagelets/css/practice/_app.scss b/ui/bits/css/practice/_app.scss
similarity index 94%
rename from ui/pagelets/css/practice/_app.scss
rename to ui/bits/css/practice/_app.scss
index 72648dca64684..454545cf0db04 100644
--- a/ui/pagelets/css/practice/_app.scss
+++ b/ui/bits/css/practice/_app.scss
@@ -12,14 +12,14 @@
   }
 
   .studies {
-    --min-width: 100vw;
+    ---min-width: 100vw;
 
     @media (min-width: at-least($xx-small)) {
-      --min-width: 400px;
+      ---min-width: 400px;
     }
 
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(var(--min-width), 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(var(---min-width), 1fr));
     grid-gap: 1em;
     margin: 0.8em 0 3em 0;
   }
diff --git a/ui/pagelets/css/practice/_icons.scss b/ui/bits/css/practice/_icons.scss
similarity index 100%
rename from ui/pagelets/css/practice/_icons.scss
rename to ui/bits/css/practice/_icons.scss
diff --git a/ui/pagelets/css/practice/_index.scss b/ui/bits/css/practice/_index.scss
similarity index 100%
rename from ui/pagelets/css/practice/_index.scss
rename to ui/bits/css/practice/_index.scss
diff --git a/ui/pagelets/css/practice/_side.scss b/ui/bits/css/practice/_side.scss
similarity index 91%
rename from ui/pagelets/css/practice/_side.scss
rename to ui/bits/css/practice/_side.scss
index 047e46a1c491c..e0ff0b98acabe 100644
--- a/ui/pagelets/css/practice/_side.scss
+++ b/ui/bits/css/practice/_side.scss
@@ -2,7 +2,7 @@
   @extend %box-radius;
 
   background: $c-primary;
-  color: $c-primary-over;
+  color: $c-over;
   text-align: center;
   padding: 1.2em;
   align-self: start;
@@ -39,7 +39,7 @@
     position: relative;
     width: 100%;
     height: 2em;
-    background: mix($c-font-clear, $c-primary, 10%);
+    background: #ccc3; // better
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
   }
 
@@ -67,7 +67,7 @@
     @extend %box-radius-right;
 
     height: 100%;
-    background: mix($c-font-clearer, $c-primary, 25%);
+    background: #ccc3; // better
     background-image: img-url('grain.png');
     transform: translateX(-100px);
     animation:
diff --git a/ui/pagelets/css/relay/_card.scss b/ui/bits/css/relay/_card.scss
similarity index 97%
rename from ui/pagelets/css/relay/_card.scss
rename to ui/bits/css/relay/_card.scss
index 2c0b39326e8d1..a461e6cdcce13 100644
--- a/ui/pagelets/css/relay/_card.scss
+++ b/ui/bits/css/relay/_card.scss
@@ -30,7 +30,7 @@
   }
 
   &--ongoing {
-    outline: 3px solid rgba($c-live, 0.5);
+    outline: 3px solid $m-bad--alpha-50;
     &:hover {
       box-shadow:
         0 0 5px $c-live,
diff --git a/ui/pagelets/css/relay/_form.scss b/ui/bits/css/relay/_form.scss
similarity index 95%
rename from ui/pagelets/css/relay/_form.scss
rename to ui/bits/css/relay/_form.scss
index 984819ad5ece7..4518e6ad7041c 100644
--- a/ui/pagelets/css/relay/_form.scss
+++ b/ui/bits/css/relay/_form.scss
@@ -23,7 +23,7 @@
     }
   }
   &__image {
-    padding: 4vh var(--box-padding) 0;
+    padding: 4vh var(---box-padding) 0;
     background: $c-bg-zebra;
     margin-bottom: 2em;
   }
diff --git a/ui/pagelets/css/relay/_relay.scss b/ui/bits/css/relay/_relay.scss
similarity index 82%
rename from ui/pagelets/css/relay/_relay.scss
rename to ui/bits/css/relay/_relay.scss
index e44be1f43b4b1..0745f2bc38026 100644
--- a/ui/pagelets/css/relay/_relay.scss
+++ b/ui/bits/css/relay/_relay.scss
@@ -20,7 +20,7 @@
     justify-content: center;
     width: 100%;
     aspect-ratio: 2 / 1;
-    background: linear-gradient(to bottom, set-alpha($c-primary, 0.7), set-alpha($c-brag, 0.7));
+    background: linear-gradient(to bottom, $m-primary--alpha-70, $m-brag--alpha-70);
     background-repeat: no-repeat;
     box-shadow: 0 0 40px rgba(0, 0, 0, 0.3) inset;
     color: $c-font;
diff --git a/ui/pagelets/css/streamer/_form.scss b/ui/bits/css/streamer/_form.scss
similarity index 100%
rename from ui/pagelets/css/streamer/_form.scss
rename to ui/bits/css/streamer/_form.scss
diff --git a/ui/pagelets/css/streamer/_header.scss b/ui/bits/css/streamer/_header.scss
similarity index 96%
rename from ui/pagelets/css/streamer/_header.scss
rename to ui/bits/css/streamer/_header.scss
index da48be3ffeac8..85acbf50b38ac 100644
--- a/ui/pagelets/css/streamer/_header.scss
+++ b/ui/bits/css/streamer/_header.scss
@@ -76,7 +76,7 @@
     padding: 15px 0;
     background-color: $c-primary;
     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
-    color: $c-primary-over;
+    color: $c-over;
     font: 700 18px/1 Roboto;
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
     text-transform: uppercase;
@@ -123,7 +123,7 @@
 .streamer-title {
   @extend %flex-between;
   gap: 1em;
-  margin: 1.5em var(--box-padding) 1em 0;
+  margin: 1.5em var(---box-padding) 1em 0;
 }
 
 .streamer-subscribe {
diff --git a/ui/pagelets/css/streamer/_list.scss b/ui/bits/css/streamer/_list.scss
similarity index 97%
rename from ui/pagelets/css/streamer/_list.scss
rename to ui/bits/css/streamer/_list.scss
index d71f652803520..abc167ee5a64e 100644
--- a/ui/pagelets/css/streamer/_list.scss
+++ b/ui/bits/css/streamer/_list.scss
@@ -53,7 +53,7 @@
     }
 
     &:hover {
-      background: mix($c-link, $c-bg-box, 15%);
+      background: $m-primary_bg--mix-15;
     }
   }
 
diff --git a/ui/pagelets/css/streamer/_show.scss b/ui/bits/css/streamer/_show.scss
similarity index 97%
rename from ui/pagelets/css/streamer/_show.scss
rename to ui/bits/css/streamer/_show.scss
index 03c7d120e036c..a53ab189ded70 100644
--- a/ui/pagelets/css/streamer/_show.scss
+++ b/ui/bits/css/streamer/_show.scss
@@ -90,7 +90,7 @@
 
     font-size: 1.6em;
     line-height: 0.9;
-    background: mix($c-brag, $c-bg-box, 20%);
+    background: $m-brag_bg--mix-20;
     color: $c-font;
 
     span {
diff --git a/ui/pagelets/css/team/_admin.scss b/ui/bits/css/team/_admin.scss
similarity index 89%
rename from ui/pagelets/css/team/_admin.scss
rename to ui/bits/css/team/_admin.scss
index ecfdc43345ee0..c54761663eaad 100644
--- a/ui/pagelets/css/team/_admin.scss
+++ b/ui/bits/css/team/_admin.scss
@@ -28,7 +28,7 @@
       .highlight,
       tbody tr:hover td,
       tbody tr:hover th {
-        background: mix($c-primary, $c-bg-page, 15%) !important;
+        background: $m-primary_bg-page--mix-15 !important;
         a {
           color: $c-font-clearer;
         }
@@ -36,7 +36,7 @@
     }
     @media (max-width: at-most($x-small)) {
       .highlight {
-        background: mix($c-primary, $c-bg-page, 15%) !important;
+        background: $m-primary_bg-page--mix-15 !important;
       }
       .cmn-toggle + label {
         display: inline-block;
diff --git a/ui/pagelets/css/team/_declined-request.scss b/ui/bits/css/team/_declined-request.scss
similarity index 100%
rename from ui/pagelets/css/team/_declined-request.scss
rename to ui/bits/css/team/_declined-request.scss
diff --git a/ui/pagelets/css/team/_forum.scss b/ui/bits/css/team/_forum.scss
similarity index 93%
rename from ui/pagelets/css/team/_forum.scss
rename to ui/bits/css/team/_forum.scss
index ecffa508031c5..4432b2859b81f 100644
--- a/ui/pagelets/css/team/_forum.scss
+++ b/ui/bits/css/team/_forum.scss
@@ -14,7 +14,7 @@
       }
 
       &:hover {
-        background: mix($c-link, $c-bg-box, 10%);
+        background: $m-primary_bg--mix-10;
 
         span {
           color: $c-font;
diff --git a/ui/pagelets/css/team/_list.scss b/ui/bits/css/team/_list.scss
similarity index 96%
rename from ui/pagelets/css/team/_list.scss
rename to ui/bits/css/team/_list.scss
index 6a3c9781666ca..fa75daa12a062 100644
--- a/ui/pagelets/css/team/_list.scss
+++ b/ui/bits/css/team/_list.scss
@@ -26,7 +26,7 @@
 
       padding: 1px 5px;
       background: $c-primary;
-      color: $c-primary-over;
+      color: $c-over;
       text-transform: uppercase;
       font-size: 0.9rem;
       margin-inline-start: 1em;
diff --git a/ui/pagelets/css/team/_show.scss b/ui/bits/css/team/_show.scss
similarity index 95%
rename from ui/pagelets/css/team/_show.scss
rename to ui/bits/css/team/_show.scss
index 605ca30fed7c2..5da143d9f0799 100644
--- a/ui/pagelets/css/team/_show.scss
+++ b/ui/bits/css/team/_show.scss
@@ -20,7 +20,7 @@ $section-margin-more: 5vh;
     height: 40vh;
     margin-bottom: $section-margin;
 
-    @if $theme-dark {
+    @include if-not-light {
       box-shadow: none;
 
       &__tabs,
@@ -38,14 +38,14 @@ $section-margin-more: 5vh;
   }
 
   &__content {
-    margin: 0 var(--box-padding);
+    margin: 0 var(---box-padding);
 
     @media (min-width: at-least($small)) {
       display: flex;
 
       &__col1 {
         flex: 0 0 30%;
-        margin-inline-end: var(--box-padding);
+        margin-inline-end: var(---box-padding);
       }
 
       &__col2 {
diff --git a/ui/pagelets/css/team/_team.scss b/ui/bits/css/team/_team.scss
similarity index 100%
rename from ui/pagelets/css/team/_team.scss
rename to ui/bits/css/team/_team.scss
diff --git a/ui/pagelets/css/team/_tournaments.scss b/ui/bits/css/team/_tournaments.scss
similarity index 100%
rename from ui/pagelets/css/team/_tournaments.scss
rename to ui/bits/css/team/_tournaments.scss
diff --git a/ui/pagelets/css/tv/_embed.scss b/ui/bits/css/tv/_embed.scss
similarity index 100%
rename from ui/pagelets/css/tv/_embed.scss
rename to ui/bits/css/tv/_embed.scss
diff --git a/ui/pagelets/css/tv/_games.scss b/ui/bits/css/tv/_games.scss
similarity index 100%
rename from ui/pagelets/css/tv/_games.scss
rename to ui/bits/css/tv/_games.scss
diff --git a/ui/pagelets/css/tv/_side.scss b/ui/bits/css/tv/_side.scss
similarity index 94%
rename from ui/pagelets/css/tv/_side.scss
rename to ui/bits/css/tv/_side.scss
index b2077bfd2373e..a382ae07268b3 100644
--- a/ui/pagelets/css/tv/_side.scss
+++ b/ui/bits/css/tv/_side.scss
@@ -9,7 +9,7 @@
 
     &::before {
       order: 2;
-      color: mix($c-brag, $c-bg-page, 60%);
+      color: $m-brag_bg-page--mix-60;
       font-size: 2.5em;
       margin-inline-start: 0.8rem;
     }
diff --git a/ui/pagelets/css/tv/_single.scss b/ui/bits/css/tv/_single.scss
similarity index 89%
rename from ui/pagelets/css/tv/_single.scss
rename to ui/bits/css/tv/_single.scss
index bfe34dc32aa2b..d8e297190a6b5 100644
--- a/ui/pagelets/css/tv/_single.scss
+++ b/ui/bits/css/tv/_single.scss
@@ -14,7 +14,7 @@
   }
 
   @include mq-at-least-col3 {
-    grid-template-columns: $col3-uniboard-side var(--col3-uniboard-width) $col3-uniboard-table;
+    grid-template-columns: $col3-uniboard-side var(---col3-uniboard-width) $col3-uniboard-table;
     grid-template-rows: fit-content(0);
     grid-template-areas: 'side app   app' 'side under .';
 
diff --git a/ui/pagelets/css/ublog/_card.scss b/ui/bits/css/ublog/_card.scss
similarity index 92%
rename from ui/pagelets/css/ublog/_card.scss
rename to ui/bits/css/ublog/_card.scss
index b1c439759aac3..1490fd232d48e 100644
--- a/ui/pagelets/css/ublog/_card.scss
+++ b/ui/bits/css/ublog/_card.scss
@@ -36,11 +36,11 @@
     }
     @include padding-direction(0.2em, 0.5em, 0.3em, 0.5em);
 
-    @if $theme-dark {
-      background: rgba(0, 0, 0, 0.65);
-      color: #ddd;
-      text-shadow: 0 1px 1px black;
-    } @else {
+    background: rgba(0, 0, 0, 0.65);
+    color: #ddd;
+    text-shadow: 0 1px 1px black;
+
+    @include if-light {
       background: rgba(255, 255, 255, 0.65);
       color: #333;
       text-shadow: 0 1px 1px white;
diff --git a/ui/pagelets/css/ublog/_form.scss b/ui/bits/css/ublog/_form.scss
similarity index 92%
rename from ui/pagelets/css/ublog/_form.scss
rename to ui/bits/css/ublog/_form.scss
index f64eb110b3d10..a88600ba199f0 100644
--- a/ui/pagelets/css/ublog/_form.scss
+++ b/ui/bits/css/ublog/_form.scss
@@ -6,8 +6,8 @@
   &__main .form-actions,
   &__delete .form-actions,
   &__image {
-    padding-left: var(--box-padding);
-    padding-right: var(--box-padding);
+    padding-left: var(---box-padding);
+    padding-right: var(---box-padding);
   }
   &__image-text {
     background: $c-bg-zebra;
diff --git a/ui/pagelets/css/ublog/_markup.scss b/ui/bits/css/ublog/_markup.scss
similarity index 100%
rename from ui/pagelets/css/ublog/_markup.scss
rename to ui/bits/css/ublog/_markup.scss
diff --git a/ui/pagelets/css/ublog/_post.scss b/ui/bits/css/ublog/_post.scss
similarity index 96%
rename from ui/pagelets/css/ublog/_post.scss
rename to ui/bits/css/ublog/_post.scss
index 92b51ded214e8..157331e2b41a2 100644
--- a/ui/pagelets/css/ublog/_post.scss
+++ b/ui/bits/css/ublog/_post.scss
@@ -46,12 +46,12 @@
     a {
       @extend %box-radius;
 
-      background: mix($c-primary, $c-bg-box, 12%);
+      background: $m-primary_bg--mix-12;
       padding: 0.2em 0.6em;
       margin: 0.2em;
 
       &:hover {
-        background: mix($c-primary, $c-bg-box, 15%);
+        background: $m-primary_bg--mix-15;
       }
 
       white-space: nowrap;
@@ -80,7 +80,7 @@
       transition: 0.3s;
       &:hover {
         opacity: 1;
-        color: $c-red;
+        color: $c-bad;
       }
     }
   }
diff --git a/ui/pagelets/css/ublog/_topic.scss b/ui/bits/css/ublog/_topic.scss
similarity index 90%
rename from ui/pagelets/css/ublog/_topic.scss
rename to ui/bits/css/ublog/_topic.scss
index 611fe8d028dcb..fa0e43e08c8cc 100644
--- a/ui/pagelets/css/ublog/_topic.scss
+++ b/ui/bits/css/ublog/_topic.scss
@@ -33,10 +33,10 @@
   }
   &__topic {
     display: block;
-    padding: 1.2em var(--box-padding) 2.3em var(--box-padding);
+    padding: 1.2em var(---box-padding) 2.3em var(---box-padding);
     @include transition(background);
     &:hover {
-      background: mix($c-link, $c-bg-box, 18%);
+      background: $m-primary_bg--mix-18;
     }
     h2 {
       @extend %flex-between;
diff --git a/ui/pagelets/css/ublog/_ublog.scss b/ui/bits/css/ublog/_ublog.scss
similarity index 100%
rename from ui/pagelets/css/ublog/_ublog.scss
rename to ui/bits/css/ublog/_ublog.scss
diff --git a/ui/pagelets/css/user/_activity.scss b/ui/bits/css/user/_activity.scss
similarity index 97%
rename from ui/pagelets/css/user/_activity.scss
rename to ui/bits/css/user/_activity.scss
index 8aec0d8fd6b91..e5c50bfac552a 100644
--- a/ui/pagelets/css/user/_activity.scss
+++ b/ui/bits/css/user/_activity.scss
@@ -1,5 +1,3 @@
-$c-contours: mix($c-brag, $c-shade, 80%);
-
 .activity {
   section {
     font-size: 1.2em;
diff --git a/ui/pagelets/css/user/_games.scss b/ui/bits/css/user/_games.scss
similarity index 100%
rename from ui/pagelets/css/user/_games.scss
rename to ui/bits/css/user/_games.scss
diff --git a/ui/pagelets/css/user/_header.scss b/ui/bits/css/user/_header.scss
similarity index 100%
rename from ui/pagelets/css/user/_header.scss
rename to ui/bits/css/user/_header.scss
diff --git a/ui/pagelets/css/user/_list-bot.scss b/ui/bits/css/user/_list-bot.scss
similarity index 95%
rename from ui/pagelets/css/user/_list-bot.scss
rename to ui/bits/css/user/_list-bot.scss
index d2fecb81b2940..3a1084ede8228 100644
--- a/ui/pagelets/css/user/_list-bot.scss
+++ b/ui/bits/css/user/_list-bot.scss
@@ -12,7 +12,7 @@
       @extend %flex-center-nowrap;
       gap: $block-gap;
 
-      padding: 2em var(--box-padding);
+      padding: 2em var(---box-padding);
 
       &:nth-child(odd) {
         background: $c-bg-zebra;
diff --git a/ui/pagelets/css/user/_list.scss b/ui/bits/css/user/_list.scss
similarity index 96%
rename from ui/pagelets/css/user/_list.scss
rename to ui/bits/css/user/_list.scss
index c34f19afea0ca..34879de8f76e2 100644
--- a/ui/pagelets/css/user/_list.scss
+++ b/ui/bits/css/user/_list.scss
@@ -52,7 +52,7 @@ $user-list-width: 30ch;
       grid-template-columns: repeat(auto-fit, minmax($user-list-width, 1fr));
 
       .user-top {
-        border: 1px solid fade-out($c-lead, 0.5);
+        border: 1px solid $m-brag--fade-50;
       }
 
       h2 {
diff --git a/ui/pagelets/css/user/_note-zone.scss b/ui/bits/css/user/_note-zone.scss
similarity index 100%
rename from ui/pagelets/css/user/_note-zone.scss
rename to ui/bits/css/user/_note-zone.scss
diff --git a/ui/pagelets/css/user/_number-menu.scss b/ui/bits/css/user/_number-menu.scss
similarity index 95%
rename from ui/pagelets/css/user/_number-menu.scss
rename to ui/bits/css/user/_number-menu.scss
index 38748b1ccb673..be9531c853b9d 100644
--- a/ui/pagelets/css/user/_number-menu.scss
+++ b/ui/bits/css/user/_number-menu.scss
@@ -40,7 +40,7 @@
     }
 
     &:hover {
-      background: mix($c-link, $c-bg-box, 10%);
+      background: $m-primary_bg--mix-10;
       color: $c-font-clear;
     }
 
diff --git a/ui/pagelets/css/user/_profile.scss b/ui/bits/css/user/_profile.scss
similarity index 92%
rename from ui/pagelets/css/user/_profile.scss
rename to ui/bits/css/user/_profile.scss
index 9a6e90f1fc9ab..8709a80865b21 100644
--- a/ui/pagelets/css/user/_profile.scss
+++ b/ui/bits/css/user/_profile.scss
@@ -7,8 +7,8 @@
     @extend %box-radius, %flex-center-nowrap;
 
     padding: 0.7em;
-    background: mix($c-bad, $c-bg-box, 10%);
-    border: 1px solid mix($c-bad, $c-bg-box, 30%);
+    background: $m-bad_bg--mix-10;
+    border: 1px solid $m-bad_bg--mix-30;
     color: $c-bad;
 
     span {
@@ -75,7 +75,7 @@
       @include transition;
 
       background: $c-primary;
-      color: $c-primary-over;
+      color: $c-over;
     }
   }
 
diff --git a/ui/pagelets/css/user/_rating.stats.scss b/ui/bits/css/user/_rating.stats.scss
similarity index 100%
rename from ui/pagelets/css/user/_rating.stats.scss
rename to ui/bits/css/user/_rating.stats.scss
diff --git a/ui/pagelets/css/user/_search.scss b/ui/bits/css/user/_search.scss
similarity index 100%
rename from ui/pagelets/css/user/_search.scss
rename to ui/bits/css/user/_search.scss
diff --git a/ui/pagelets/css/user/_show.scss b/ui/bits/css/user/_show.scss
similarity index 100%
rename from ui/pagelets/css/user/_show.scss
rename to ui/bits/css/user/_show.scss
diff --git a/ui/pagelets/css/user/_sub-rating.scss b/ui/bits/css/user/_sub-rating.scss
similarity index 97%
rename from ui/pagelets/css/user/_sub-rating.scss
rename to ui/bits/css/user/_sub-rating.scss
index 0f2380edef424..2264ecdaab299 100644
--- a/ui/pagelets/css/user/_sub-rating.scss
+++ b/ui/bits/css/user/_sub-rating.scss
@@ -25,7 +25,7 @@
     }
 
     &[href]:hover {
-      background: mix($c-bg-box, $c-bg-page, 50%);
+      background: $m-bg-page_bg--mix-50;
 
       &::before {
         color: $c-link;
diff --git a/ui/pagelets/css/user/_trophy.scss b/ui/bits/css/user/_trophy.scss
similarity index 95%
rename from ui/pagelets/css/user/_trophy.scss
rename to ui/bits/css/user/_trophy.scss
index abd33fc65966e..3b48f249719bd 100644
--- a/ui/pagelets/css/user/_trophy.scss
+++ b/ui/bits/css/user/_trophy.scss
@@ -58,7 +58,7 @@
 .fire-trophy {
   &,
   &:hover {
-    color: if($theme-light, $c-font-dim, $c-font-clear);
+    color: $m-font_white--mix-20;
   }
 
   opacity: 0.9;
@@ -73,7 +73,7 @@
   &.marathonTopTen,
   &.marathonTopFifty {
     filter: hue-rotate(190deg);
-    color: adjust-color($c-link, $hue: -190deg, $saturation: -70%);
+    color: $c-marathon;
   }
 
   &.marathonTopTen {
diff --git a/ui/bits/package.json b/ui/bits/package.json
new file mode 100644
index 0000000000000..db0fe6b82d22b
--- /dev/null
+++ b/ui/bits/package.json
@@ -0,0 +1,85 @@
+{
+  "name": "bits",
+  "version": "2.0.0",
+  "private": true,
+  "description": "assorted modules",
+  "author": "T-Bone Duplexus",
+  "license": "AGPL-3.0-or-later",
+  "exports": {
+    "./*": "./dist/load/*.js"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/load/*"
+      ]
+    }
+  },
+  "dependencies": {
+    "@fnando/sparkline": "^0.3.10",
+    "@toast-ui/editor": "3.1.7",
+    "@textcomplete/core": "^0.1.13",
+    "@textcomplete/textarea": "^0.1.13",
+    "@types/debounce-promise": "^3.1.6",
+    "@types/fnando__sparkline": "^0.3.7",
+    "@types/yaireo__tagify": "4.17.5",
+    "@types/zxcvbn": "^4.4.4",
+    "@yaireo/tagify": "4.17.9",
+    "chat": "workspace:*",
+    "chess": "workspace:*",
+    "common": "workspace:*",
+    "cropperjs": "^1.6.1",
+    "debounce-promise": "^3.1.2",
+    "emoji-mart": "^5.5.2",
+    "flatpickr": "^4.6.13",
+    "lichess-pgn-viewer": "^2.1.0",
+    "prop-types": "^15.8.1",
+    "tablesort": "^5.3.0",
+    "zxcvbn": "^4.4.2"
+  },
+  "sideEffects": false,
+  "lichess": {
+    "modules": {
+      "src/bits.account.ts": "bits.account",
+      "src/bits.appeal.ts": "bits.appeal",
+      "src/bits.captcha.ts": "bits.captcha",
+      "src/bits.challengePage.ts": "bits.challengePage",
+      "src/bits.checkout.ts": "bits.checkout",
+      "src/bits.clas.ts": "bits.clas",
+      "src/bits.cms.ts": "bits.cms",
+      "src/bits.coachForm.ts": "bits.coach.form",
+      "src/bits.contact.ts": "bits.contact",
+      "src/bits.cropDialog.ts": "bits.cropDialog",
+      "src/bits.dailyFeed.ts": "bits.dailyFeed",
+      "src/bits.diagnosticDialog.ts": "bits.diagnosticDialog",
+      "src/bits.eventCountdown.ts": "bits.eventCountdown",
+      "src/bits.expandText.ts": "bits.expandText",
+      "src/bits.flairPicker.ts": "bits.flairPicker",
+      "src/bits.flatpickr.ts": "bits.flatpickr",
+      "src/bits.forum.ts": "bits.forum",
+      "src/bits.gameSearch.ts": "bits.gameSearch",
+      "src/bits.infiniteScroll.ts": "bits.infiniteScroll",
+      "src/bits.login.ts": "bits.login",
+      "src/bits.lpv.ts": "bits.lpv",
+      "src/bits.passwordComplexity.ts": "bits.passwordComplexity",
+      "src/bits.plan.ts": "bits.plan",
+      "src/bits.publicChats.ts": "bits.publicChats",
+      "src/bits.relayForm.ts": "bits.relayForm",
+      "src/bits.soundMove.ts": "bits.soundMove",
+      "src/bits.streamer.ts": "bits.streamer",
+      "src/bits.team.ts": "bits.team",
+      "src/bits.teamBattleForm.ts": "bits.teamBattleForm",
+      "src/bits.tourForm.ts": "bits.tourForm",
+      "src/bits.tvGames.ts": "bits.tvGames",
+      "src/bits.ublog.ts": "bits.ublog",
+      "src/bits.ublogForm.ts": "bits.ublogForm",
+      "src/bits.user.ts": "bits.user",
+      "src/bits.userComplete.ts": "bits.userComplete",
+      "src/bits.userGamesDownload.ts": "bits.userGamesDownload"
+    },
+    "sync": {
+      "node_modules/cropperjs/dist/cropper.min.css": "public/npm",
+      "../../node_modules/chessground/dist/chessground.min.js": "public/npm"
+    }
+  }
+}
diff --git a/ui/pagelets/src/account.ts b/ui/bits/src/bits.account.ts
similarity index 100%
rename from ui/pagelets/src/account.ts
rename to ui/bits/src/bits.account.ts
diff --git a/ui/pagelets/src/appeal.ts b/ui/bits/src/bits.appeal.ts
similarity index 100%
rename from ui/pagelets/src/appeal.ts
rename to ui/bits/src/bits.appeal.ts
diff --git a/ui/pagelets/src/captcha.ts b/ui/bits/src/bits.captcha.ts
similarity index 100%
rename from ui/pagelets/src/captcha.ts
rename to ui/bits/src/bits.captcha.ts
diff --git a/ui/pagelets/src/challengePage.ts b/ui/bits/src/bits.challengePage.ts
similarity index 100%
rename from ui/pagelets/src/challengePage.ts
rename to ui/bits/src/bits.challengePage.ts
diff --git a/ui/pagelets/src/checkout.ts b/ui/bits/src/bits.checkout.ts
similarity index 99%
rename from ui/pagelets/src/checkout.ts
rename to ui/bits/src/bits.checkout.ts
index 770c5d5116335..b5df753870893 100644
--- a/ui/pagelets/src/checkout.ts
+++ b/ui/bits/src/bits.checkout.ts
@@ -1,5 +1,5 @@
 import * as xhr from 'common/xhr';
-import contactEmail from './contactEmail';
+import contactEmail from './bits.contactEmail';
 
 export interface Pricing {
   currency: string;
diff --git a/ui/pagelets/src/clas.ts b/ui/bits/src/bits.clas.ts
similarity index 96%
rename from ui/pagelets/src/clas.ts
rename to ui/bits/src/bits.clas.ts
index e88b74a00e79c..b7ecf1faa7369 100644
--- a/ui/pagelets/src/clas.ts
+++ b/ui/bits/src/bits.clas.ts
@@ -5,7 +5,7 @@ import * as xhr from 'common/xhr';
 import { Textcomplete } from '@textcomplete/core';
 import { TextareaEditor } from '@textcomplete/textarea';
 
-import type { Result as UserCompleteResult } from './userComplete';
+import type { Result as UserCompleteResult } from './bits.userComplete';
 
 site.load.then(() => {
   $('table.sortable').each(function (this: HTMLElement) {
diff --git a/ui/pagelets/src/cms.ts b/ui/bits/src/bits.cms.ts
similarity index 100%
rename from ui/pagelets/src/cms.ts
rename to ui/bits/src/bits.cms.ts
diff --git a/ui/pagelets/src/coachForm.ts b/ui/bits/src/bits.coachForm.ts
similarity index 100%
rename from ui/pagelets/src/coachForm.ts
rename to ui/bits/src/bits.coachForm.ts
diff --git a/ui/pagelets/src/contact.ts b/ui/bits/src/bits.contact.ts
similarity index 62%
rename from ui/pagelets/src/contact.ts
rename to ui/bits/src/bits.contact.ts
index 54464f4ac20c1..046dd142b4d2c 100644
--- a/ui/pagelets/src/contact.ts
+++ b/ui/bits/src/bits.contact.ts
@@ -1,4 +1,4 @@
-import contactEmail from './contactEmail';
+import contactEmail from './bits.contactEmail';
 
 site.load.then(() => {
   location.hash ||= '#help-root';
diff --git a/ui/pagelets/src/contactEmail.ts b/ui/bits/src/bits.contactEmail.ts
similarity index 100%
rename from ui/pagelets/src/contactEmail.ts
rename to ui/bits/src/bits.contactEmail.ts
diff --git a/ui/pagelets/src/crop.ts b/ui/bits/src/bits.cropDialog.ts
similarity index 100%
rename from ui/pagelets/src/crop.ts
rename to ui/bits/src/bits.cropDialog.ts
diff --git a/ui/pagelets/src/dailyFeed.ts b/ui/bits/src/bits.dailyFeed.ts
similarity index 100%
rename from ui/pagelets/src/dailyFeed.ts
rename to ui/bits/src/bits.dailyFeed.ts
diff --git a/ui/pagelets/src/diagnostic.ts b/ui/bits/src/bits.diagnosticDialog.ts
similarity index 100%
rename from ui/pagelets/src/diagnostic.ts
rename to ui/bits/src/bits.diagnosticDialog.ts
diff --git a/ui/pagelets/src/eventCountdown.ts b/ui/bits/src/bits.eventCountdown.ts
similarity index 100%
rename from ui/pagelets/src/eventCountdown.ts
rename to ui/bits/src/bits.eventCountdown.ts
diff --git a/ui/pagelets/src/expandText.ts b/ui/bits/src/bits.expandText.ts
similarity index 98%
rename from ui/pagelets/src/expandText.ts
rename to ui/bits/src/bits.expandText.ts
index 9e47045ab4e0a..b6de31b36d5ff 100644
--- a/ui/pagelets/src/expandText.ts
+++ b/ui/bits/src/bits.expandText.ts
@@ -153,5 +153,5 @@ site.load.then(() => {
 
   as.filter(a => a.type === 'twitter').forEach(expandTwitter);
 
-  if ($('.lpv--autostart').length) site.asset.loadEsm('lpv');
+  if ($('.lpv--autostart').length) site.asset.loadEsm('bits.lpv');
 });
diff --git a/ui/pagelets/src/flairPicker.ts b/ui/bits/src/bits.flairPicker.ts
similarity index 100%
rename from ui/pagelets/src/flairPicker.ts
rename to ui/bits/src/bits.flairPicker.ts
diff --git a/ui/pagelets/src/flatpickr.ts b/ui/bits/src/bits.flatpickr.ts
similarity index 100%
rename from ui/pagelets/src/flatpickr.ts
rename to ui/bits/src/bits.flatpickr.ts
diff --git a/ui/pagelets/src/forum.ts b/ui/bits/src/bits.forum.ts
similarity index 100%
rename from ui/pagelets/src/forum.ts
rename to ui/bits/src/bits.forum.ts
diff --git a/ui/pagelets/src/gameSearch.ts b/ui/bits/src/bits.gameSearch.ts
similarity index 100%
rename from ui/pagelets/src/gameSearch.ts
rename to ui/bits/src/bits.gameSearch.ts
diff --git a/ui/pagelets/src/infiniteScroll.ts b/ui/bits/src/bits.infiniteScroll.ts
similarity index 100%
rename from ui/pagelets/src/infiniteScroll.ts
rename to ui/bits/src/bits.infiniteScroll.ts
diff --git a/ui/pagelets/src/login.ts b/ui/bits/src/bits.login.ts
similarity index 98%
rename from ui/pagelets/src/login.ts
rename to ui/bits/src/bits.login.ts
index 5da4d88994781..901119e530ffa 100644
--- a/ui/pagelets/src/login.ts
+++ b/ui/bits/src/bits.login.ts
@@ -108,5 +108,5 @@ function signupStart() {
     else return false;
   });
 
-  site.asset.loadEsm('passwordComplexity', { init: 'form3-password' });
+  site.asset.loadEsm('bits.passwordComplexity', { init: 'form3-password' });
 }
diff --git a/ui/pagelets/src/lpv.ts b/ui/bits/src/bits.lpv.ts
similarity index 100%
rename from ui/pagelets/src/lpv.ts
rename to ui/bits/src/bits.lpv.ts
diff --git a/ui/pagelets/src/passwordComplexity.ts b/ui/bits/src/bits.passwordComplexity.ts
similarity index 100%
rename from ui/pagelets/src/passwordComplexity.ts
rename to ui/bits/src/bits.passwordComplexity.ts
diff --git a/ui/pagelets/src/plan.ts b/ui/bits/src/bits.plan.ts
similarity index 100%
rename from ui/pagelets/src/plan.ts
rename to ui/bits/src/bits.plan.ts
diff --git a/ui/pagelets/src/publicChats.ts b/ui/bits/src/bits.publicChats.ts
similarity index 100%
rename from ui/pagelets/src/publicChats.ts
rename to ui/bits/src/bits.publicChats.ts
diff --git a/ui/pagelets/src/relayForm.ts b/ui/bits/src/bits.relayForm.ts
similarity index 100%
rename from ui/pagelets/src/relayForm.ts
rename to ui/bits/src/bits.relayForm.ts
diff --git a/ui/pagelets/src/soundMove.ts b/ui/bits/src/bits.soundMove.ts
similarity index 100%
rename from ui/pagelets/src/soundMove.ts
rename to ui/bits/src/bits.soundMove.ts
diff --git a/ui/pagelets/src/streamer.ts b/ui/bits/src/bits.streamer.ts
similarity index 100%
rename from ui/pagelets/src/streamer.ts
rename to ui/bits/src/bits.streamer.ts
diff --git a/ui/pagelets/src/team.ts b/ui/bits/src/bits.team.ts
similarity index 100%
rename from ui/pagelets/src/team.ts
rename to ui/bits/src/bits.team.ts
diff --git a/ui/pagelets/src/teamBattleForm.ts b/ui/bits/src/bits.teamBattleForm.ts
similarity index 100%
rename from ui/pagelets/src/teamBattleForm.ts
rename to ui/bits/src/bits.teamBattleForm.ts
diff --git a/ui/pagelets/src/tourForm.ts b/ui/bits/src/bits.tourForm.ts
similarity index 100%
rename from ui/pagelets/src/tourForm.ts
rename to ui/bits/src/bits.tourForm.ts
diff --git a/ui/pagelets/src/tvGames.ts b/ui/bits/src/bits.tvGames.ts
similarity index 100%
rename from ui/pagelets/src/tvGames.ts
rename to ui/bits/src/bits.tvGames.ts
diff --git a/ui/pagelets/src/ublog.ts b/ui/bits/src/bits.ublog.ts
similarity index 100%
rename from ui/pagelets/src/ublog.ts
rename to ui/bits/src/bits.ublog.ts
diff --git a/ui/pagelets/src/ublogForm.ts b/ui/bits/src/bits.ublogForm.ts
similarity index 100%
rename from ui/pagelets/src/ublogForm.ts
rename to ui/bits/src/bits.ublogForm.ts
diff --git a/ui/pagelets/src/user.ts b/ui/bits/src/bits.user.ts
similarity index 100%
rename from ui/pagelets/src/user.ts
rename to ui/bits/src/bits.user.ts
diff --git a/ui/pagelets/src/userComplete.ts b/ui/bits/src/bits.userComplete.ts
similarity index 100%
rename from ui/pagelets/src/userComplete.ts
rename to ui/bits/src/bits.userComplete.ts
diff --git a/ui/pagelets/src/userGamesDownload.ts b/ui/bits/src/bits.userGamesDownload.ts
similarity index 100%
rename from ui/pagelets/src/userGamesDownload.ts
rename to ui/bits/src/bits.userGamesDownload.ts
diff --git a/ui/pagelets/src/load/crop.ts b/ui/bits/src/load/crop.ts
similarity index 60%
rename from ui/pagelets/src/load/crop.ts
rename to ui/bits/src/load/crop.ts
index 56c57d03ee224..aee3ad15a99ca 100644
--- a/ui/pagelets/src/load/crop.ts
+++ b/ui/bits/src/load/crop.ts
@@ -1,5 +1,6 @@
 import { isSafari } from 'common/device';
-export { type CropOpts } from '../crop';
+import { type CropOpts as Params } from '../bits.cropDialog';
+export { type CropOpts } from '../bits.cropDialog';
 
 export function wireCropDialog(args?: {
   aspectRatio: number;
@@ -10,25 +11,28 @@ export function wireCropDialog(args?: {
   onCropped?: (result: Blob | boolean) => void;
 }) {
   if (!args) {
-    site.asset.loadEsm('cropDialog'); // preload
+    site.asset.loadEsm('bits.cropDialog'); // preload
     return;
   }
   const cropOpts = { ...args };
   if (!cropOpts.onCropped) cropOpts.onCropped = () => site.reload();
   cropOpts.max = { ...(cropOpts.max || {}), megabytes: 6 }; // mirrors the nginx config `client_max_body_size`
-  cropOpts.selectClicks?.on('click', () => site.asset.loadEsm('cropDialog', { init: cropOpts }));
+  cropOpts.selectClicks?.on('click', () => site.asset.loadEsm('bits.cropDialog', { init: cropOpts }));
   cropOpts.selectDrags?.on('dragover', e => e.preventDefault());
   cropOpts.selectDrags?.on('drop', e => {
     e.preventDefault();
+    const init = { ...cropOpts } as Params;
     for (const item of e.dataTransfer.items) {
       if (item.kind === 'file' && item.type.startsWith('image/')) {
-        site.asset.loadEsm('cropDialog', { init: { ...cropOpts, source: item.getAsFile() } });
-      } else if (item.kind === 'string' && item.type === 'text/uri-list') {
-        item.getAsString((uri: string) =>
-          site.asset.loadEsm('cropDialog', { init: { ...cropOpts, source: uri } }),
-        );
+        init.source = item.getAsFile();
+      } else if (item.type === 'text/uri-list') {
+        item.getAsString((uri: string) => (init.source = uri));
       } else continue;
-      break;
+
+      if (init.source) {
+        site.asset.loadEsm('bits.cropDialog', { init });
+        break;
+      }
     }
   });
 }
diff --git a/ui/pagelets/src/load/flairPicker.ts b/ui/bits/src/load/flairPicker.ts
similarity index 94%
rename from ui/pagelets/src/load/flairPicker.ts
rename to ui/bits/src/load/flairPicker.ts
index 8e5c6ff83dbca..27de0c373e898 100644
--- a/ui/pagelets/src/load/flairPicker.ts
+++ b/ui/bits/src/load/flairPicker.ts
@@ -13,7 +13,7 @@ export default function flairPicker(element: HTMLElement) {
     $(e.target).remove();
   });
   $(element).on('toggle', () =>
-    site.asset.loadEsm('flairPicker', {
+    site.asset.loadEsm('bits.flairPicker', {
       init: {
         element: element.querySelector('.flair-picker')!,
         close,
diff --git a/ui/pagelets/tsconfig.json b/ui/bits/tsconfig.json
similarity index 100%
rename from ui/pagelets/tsconfig.json
rename to ui/bits/tsconfig.json
diff --git a/ui/pagelets/types/tablesort.d.ts b/ui/bits/types/tablesort.d.ts
similarity index 100%
rename from ui/pagelets/types/tablesort.d.ts
rename to ui/bits/types/tablesort.d.ts
diff --git a/ui/board/package.json b/ui/board/package.json
index d6dbaecbdbf26..129581411e633 100644
--- a/ui/board/package.json
+++ b/ui/board/package.json
@@ -4,10 +4,10 @@
   "private": true,
   "description": "lichess.org chess utils",
   "type": "module",
-  "module": "main.js",
-  "types": "main.d.ts",
+  "module": "board.js",
+  "types": "board.d.ts",
   "exports": {
-    ".": "./dist/main.js",
+    ".": "./dist/board.js",
     "./*": "./dist/*.js"
   },
   "typesVersions": {
diff --git a/ui/board/src/board.ts b/ui/board/src/board.ts
new file mode 100644
index 0000000000000..86a1fedd2d635
--- /dev/null
+++ b/ui/board/src/board.ts
@@ -0,0 +1,96 @@
+import { h } from 'snabbdom';
+import { Toggle, onClickAway } from 'common/common';
+import { bindMobileMousedown } from 'common/device';
+import * as licon from 'common/licon';
+import { MaybeVNode, MaybeVNodes, dataIcon, onInsert } from 'common/snabbdom';
+import { Redraw } from 'chessground/types';
+import * as controls from 'common/controls';
+
+export const toggleButton = (toggle: Toggle, title: string) =>
+  h('button.fbt.board-menu-toggle', {
+    class: { active: toggle() },
+    attrs: { title, 'data-icon': licon.Hamburger },
+    hook: onInsert(bindMobileMousedown(toggle.toggle)),
+  });
+
+export const menu = (
+  trans: Trans,
+  redraw: Redraw,
+  toggle: Toggle,
+  content: (menu: BoardMenu) => MaybeVNodes,
+): MaybeVNode =>
+  toggle()
+    ? h(
+        'div.board-menu',
+        { hook: onInsert(onClickAway(() => toggle(false))) },
+        content(new BoardMenu(trans, redraw)),
+      )
+    : undefined;
+
+export class BoardMenu {
+  anonymous = document.querySelector('body[data-user]') === null;
+
+  constructor(
+    readonly trans: Trans,
+    readonly redraw: Redraw,
+  ) {}
+
+  flip = (name: string, active: boolean, onChange: () => void) =>
+    h(
+      'button.button.text',
+      {
+        class: { active },
+        attrs: { title: 'Hotkey: f', ...dataIcon(licon.ChasingArrows) },
+        hook: onInsert(bindMobileMousedown(onChange)),
+      },
+      name,
+    );
+
+  zenMode = (enabled = true) =>
+    this.cmnToggle({
+      name: 'Zen mode',
+      id: 'zen',
+      checked: $('body').hasClass('zen'),
+      change: () => site.pubsub.emit('zen'),
+      disabled: !enabled,
+    });
+
+  voiceInput = (toggle: Toggle, enabled = true) =>
+    this.cmnToggle({
+      name: 'Voice input',
+      id: 'voice',
+      checked: toggle(),
+      change: toggle,
+      title: this.anonymous ? 'Must be logged in' : '',
+      disabled: this.anonymous || !enabled,
+    });
+
+  keyboardInput = (toggle: Toggle, enabled = true) =>
+    this.cmnToggle({
+      name: 'Keyboard input',
+      id: 'keyboard',
+      checked: toggle(),
+      change: toggle,
+      title: this.anonymous ? 'Must be logged in' : '',
+      disabled: this.anonymous || !enabled,
+    });
+
+  blindfold = (toggle: Toggle, enabled = true) =>
+    this.cmnToggle({
+      name: 'Blindfold',
+      id: 'blindfold',
+      checked: toggle(),
+      change: toggle,
+      disabled: !enabled,
+    });
+  confirmMove = (toggle: Toggle, enabled = true) =>
+    this.cmnToggle({
+      name: 'Confirm move',
+      id: 'confirmmove',
+      checked: toggle(),
+      change: toggle,
+      disabled: !enabled,
+    });
+
+  private cmnToggle = (t: controls.ToggleSettings) => controls.toggle(t, this.trans, this.redraw);
+}
diff --git a/ui/ceval/css/_ctrl.scss b/ui/ceval/css/_ctrl.scss
index 5616ebbc2263f..32d54f0eaca45 100644
--- a/ui/ceval/css/_ctrl.scss
+++ b/ui/ceval/css/_ctrl.scss
@@ -46,7 +46,7 @@
       @extend %roboto, %box-radius;
       margin-inline-start: 4px;
       background: $c-secondary-dim;
-      color: $c-secondary-over;
+      color: $c-over;
       padding: 1px 3px;
       text-transform: uppercase;
       font-size: 11px;
@@ -76,7 +76,7 @@
 
     &:hover:not(.hidden),
     &.active {
-      color: $c-red;
+      color: $c-bad;
     }
 
     &.hidden {
@@ -113,7 +113,7 @@
 
     &:hover:not(.hidden),
     &.active {
-      color: $c-red;
+      color: $c-bad;
     }
 
     &.hidden {
diff --git a/ui/ceval/css/_eval-gauge.scss b/ui/ceval/css/_eval-gauge.scss
index 250d94bb07609..3334108d5b2b9 100644
--- a/ui/ceval/css/_eval-gauge.scss
+++ b/ui/ceval/css/_eval-gauge.scss
@@ -1,7 +1,10 @@
 .eval-gauge {
   width: $block-gap;
   position: relative;
-  background: if($theme-light, #fff, #a0a0a0);
+  background: #a0a0a0;
+  @include if-light {
+    background: #fff;
+  }
   overflow: hidden;
 
   @include mq-is-col1 {
@@ -31,21 +34,27 @@
     top: 0;
     @include inline-start(0);
     width: 100%;
-    border-bottom: 2px ridge if($theme-light, #eee, #a0a0a0);
+    border-bottom: 2px ridge #a0a0a0;
+    @include if-light {
+      border-bottom: 2px ridge #eee;
+    }
     opacity: 0.4;
   }
 
   tick.zero {
     top: 6px;
     opacity: 1;
-    border-bottom: 7px solid fade-out($c-accent, 0.6);
+    border-bottom: 7px solid $m-accent--fade-50 !important;
     margin-top: -3px;
   }
 
   .black {
     width: 100%;
     height: 50%;
-    background: if($theme-light, #888, #666);
+    background: #666;
+    @include if-light {
+      background: #888;
+    }
     transition: height 1s;
   }
 }
diff --git a/ui/ceval/css/_pv.scss b/ui/ceval/css/_pv.scss
index b5d53013aafa4..2dcc461e2d1ef 100644
--- a/ui/ceval/css/_pv.scss
+++ b/ui/ceval/css/_pv.scss
@@ -20,7 +20,7 @@
     }
 
     &[data-uci]:hover {
-      background: mix($c-secondary, $c-bg-box, 20%);
+      background: $m-secondary_bg--mix-20;
       cursor: pointer;
     }
 
@@ -50,7 +50,7 @@
 
       &:hover {
         background: $c-secondary;
-        color: $c-secondary-over;
+        color: $c-over;
       }
       &::before {
         content: '▲';
diff --git a/ui/ceval/css/_settings.scss b/ui/ceval/css/_settings.scss
index 4f6347f4c7698..cc19d82570867 100644
--- a/ui/ceval/css/_settings.scss
+++ b/ui/ceval/css/_settings.scss
@@ -107,7 +107,7 @@
         border-bottom: 3px solid $c-primary;
 
         &:hover {
-          border-color: mix(#fff, $c-primary, 20%);
+          border-color: $m-primary_white--mix-80;
         }
 
         &.arrow-down {
@@ -125,7 +125,7 @@
         border-color: $c-secondary;
 
         &:hover {
-          border-color: mix(#fff, $c-secondary, 20%);
+          border-color: $m-secondary_white--mix-80;
         }
       }
     }
diff --git a/ui/ceval/package.json b/ui/ceval/package.json
index a56fc82c8aff1..adff2ce7480f9 100644
--- a/ui/ceval/package.json
+++ b/ui/ceval/package.json
@@ -4,8 +4,8 @@
   "private": true,
   "description": "lichess.org local computer analysis",
   "type": "module",
-  "module": "dist/main.js",
-  "types": "dist/main.d.ts",
+  "module": "dist/ceval.js",
+  "types": "dist/ceval.d.ts",
   "keywords": [
     "chess",
     "lichess",
@@ -27,11 +27,8 @@
     "stockfish.wasm": "^0.10.0"
   },
   "lichess": {
-    "copy": [
-      {
-        "src": "node_modules/*stockfish*/*.{js,wasm}",
-        "dest": "../../public/npm"
-      }
-    ]
+    "sync": {
+      "node_modules/*stockfish*/*.{js,wasm}": "public/npm"
+    }
   }
 }
diff --git a/ui/ceval/src/main.ts b/ui/ceval/src/ceval.ts
similarity index 100%
rename from ui/ceval/src/main.ts
rename to ui/ceval/src/ceval.ts
diff --git a/ui/challenge/css/_challenge.scss b/ui/challenge/css/_challenge.scss
index f106667045f0b..23a843ef62beb 100644
--- a/ui/challenge/css/_challenge.scss
+++ b/ui/challenge/css/_challenge.scss
@@ -16,7 +16,7 @@
 
     @media (hover: hover) {
       &:hover {
-        background: mix($c-bg-box, $c-primary, 70%);
+        background: $m-primary_bg--mix-30;
         padding-bottom: 0;
         outline: 1px solid $c-primary;
 
@@ -80,7 +80,7 @@
       .owner:hover .view {
         display: block;
         background: $c-primary;
-        color: $c-primary-over;
+        color: $c-over;
 
         &::before {
           vertical-align: middle;
@@ -99,7 +99,7 @@
 
     button:hover {
       background: $c-good;
-      color: $c-good-over;
+      color: $c-over;
     }
 
     button.decline:hover {
diff --git a/ui/challenge/css/_page.scss b/ui/challenge/css/_page.scss
index 19780c3e8c68b..57bdbffaed3ab 100644
--- a/ui/challenge/css/_page.scss
+++ b/ui/challenge/css/_page.scss
@@ -78,9 +78,8 @@
   .details {
     @extend %flex-between, %box-neat;
 
-    $c-bg: mix($c-good, $c-bg-box, 10%);
-    --c-font: #{$c-good};
-    --c-bg: #{$c-bg};
+    --c-font: #{$c-secondary};
+    --c-bg: #{$m-secondary_bg--mix-10};
 
     padding: $block-gap 4vw;
     margin-bottom: 4rem;
@@ -125,9 +124,8 @@
   }
 
   &.challenge--declined .details {
-    $c-bg: mix($c-bad, $c-bg-box, 10%);
     --c-font: #{$c-bad};
-    --c-bg: #{$c-bg};
+    --c-bg: #{c_bad_bg--mix-10};
   }
 
   .challenge-reason {
diff --git a/ui/challenge/css/build/_challenge.page.scss b/ui/challenge/css/build/challenge.page.scss
similarity index 100%
rename from ui/challenge/css/build/_challenge.page.scss
rename to ui/challenge/css/build/challenge.page.scss
diff --git a/ui/challenge/css/build/_challenge.scss b/ui/challenge/css/build/challenge.scss
similarity index 100%
rename from ui/challenge/css/build/_challenge.scss
rename to ui/challenge/css/build/challenge.scss
diff --git a/ui/challenge/css/build/gen/challenge.dark.scss b/ui/challenge/css/build/gen/challenge.dark.scss
deleted file mode 100644
index dbab9a211931c..0000000000000
--- a/ui/challenge/css/build/gen/challenge.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../challenge';
diff --git a/ui/challenge/css/build/gen/challenge.light.scss b/ui/challenge/css/build/gen/challenge.light.scss
deleted file mode 100644
index 66cb9a6e3ec2e..0000000000000
--- a/ui/challenge/css/build/gen/challenge.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../challenge';
diff --git a/ui/challenge/css/build/gen/challenge.page.dark.scss b/ui/challenge/css/build/gen/challenge.page.dark.scss
deleted file mode 100644
index 01fcfbef425b4..0000000000000
--- a/ui/challenge/css/build/gen/challenge.page.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../challenge.page';
diff --git a/ui/challenge/css/build/gen/challenge.page.light.scss b/ui/challenge/css/build/gen/challenge.page.light.scss
deleted file mode 100644
index 3a6a63dcd62ff..0000000000000
--- a/ui/challenge/css/build/gen/challenge.page.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../challenge.page';
diff --git a/ui/challenge/css/build/gen/challenge.page.transp.scss b/ui/challenge/css/build/gen/challenge.page.transp.scss
deleted file mode 100644
index d6c5e4f566e56..0000000000000
--- a/ui/challenge/css/build/gen/challenge.page.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../challenge.page';
diff --git a/ui/challenge/css/build/gen/challenge.transp.scss b/ui/challenge/css/build/gen/challenge.transp.scss
deleted file mode 100644
index 345f889ec9c7f..0000000000000
--- a/ui/challenge/css/build/gen/challenge.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../challenge';
diff --git a/ui/challenge/package.json b/ui/challenge/package.json
index aaa02d9d24584..cf9018d82fca9 100644
--- a/ui/challenge/package.json
+++ b/ui/challenge/package.json
@@ -11,9 +11,7 @@
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "src/main.ts": "challenge"
-      }
+      "src/challenge.ts": "challenge"
     }
   }
 }
diff --git a/ui/challenge/src/main.ts b/ui/challenge/src/challenge.ts
similarity index 100%
rename from ui/challenge/src/main.ts
rename to ui/challenge/src/challenge.ts
diff --git a/ui/chart/package.json b/ui/chart/package.json
index 5c46ea5cf9b48..3586fa1cd753d 100644
--- a/ui/chart/package.json
+++ b/ui/chart/package.json
@@ -6,8 +6,8 @@
   "author": "Thibault Duplessis",
   "license": "AGPL-3.0-or-later",
   "type": "module",
-  "module": "dist/game.js",
-  "types": "dist/game.d.ts",
+  "module": "dist/chart.game.js",
+  "types": "dist/chart.game.d.ts",
   "dependencies": {
     "@juggle/resize-observer": "^3.4.0",
     "ceval": "workspace:*",
@@ -21,13 +21,11 @@
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "src/ratingDistribution.ts": "chart.ratingDistribution",
-        "src/ratingHistory.ts": "chart.ratingHistory",
-        "src/game.ts": "chart.game",
-        "src/resizePolyfill.ts": "chart.resizePolyfill",
-        "src/lag.ts": "chart.lag"
-      }
+      "src/chart.ratingDistribution.ts": "chart.ratingDistribution",
+      "src/chart.ratingHistory.ts": "chart.ratingHistory",
+      "src/chart.game.ts": "chart.game",
+      "src/chart.resizePolyfill.ts": "chart.resizePolyfill",
+      "src/chart.lag.ts": "chart.lag"
     }
   }
 }
diff --git a/ui/chart/src/game.ts b/ui/chart/src/chart.game.ts
similarity index 100%
rename from ui/chart/src/game.ts
rename to ui/chart/src/chart.game.ts
diff --git a/ui/chart/src/lag.ts b/ui/chart/src/chart.lag.ts
similarity index 100%
rename from ui/chart/src/lag.ts
rename to ui/chart/src/chart.lag.ts
diff --git a/ui/chart/src/ratingDistribution.ts b/ui/chart/src/chart.ratingDistribution.ts
similarity index 100%
rename from ui/chart/src/ratingDistribution.ts
rename to ui/chart/src/chart.ratingDistribution.ts
diff --git a/ui/chart/src/ratingHistory.ts b/ui/chart/src/chart.ratingHistory.ts
similarity index 100%
rename from ui/chart/src/ratingHistory.ts
rename to ui/chart/src/chart.ratingHistory.ts
diff --git a/ui/chart/src/resizePolyfill.ts b/ui/chart/src/chart.resizePolyfill.ts
similarity index 100%
rename from ui/chart/src/resizePolyfill.ts
rename to ui/chart/src/chart.resizePolyfill.ts
diff --git a/ui/chat/css/_discussion.scss b/ui/chat/css/_discussion.scss
index cabafb44d7013..b66b29df34e39 100644
--- a/ui/chat/css/_discussion.scss
+++ b/ui/chat/css/_discussion.scss
@@ -28,11 +28,11 @@
       }
 
       &.host {
-        background-color: rgba($c-secondary-dim, 0.4);
+        background-color: $c-chat-host-bg;
       }
 
       &.mentioned {
-        background-color: rgba($c-secondary-dimmer, 0.4);
+        background-color: $c-chat-mention-bg;
       }
     }
 
@@ -106,7 +106,7 @@
 
     &.as-mod {
       li:hover {
-        background: mix($c-accent, $c-bg-box, 10%);
+        background: $m-accent_bg--mix-10;
       }
     }
   }
diff --git a/ui/chat/css/_palantir.scss b/ui/chat/css/_palantir.scss
index 61952058bbf48..9b6cc201a2c52 100644
--- a/ui/chat/css/_palantir.scss
+++ b/ui/chat/css/_palantir.scss
@@ -4,11 +4,11 @@
   }
 
   50% {
-    background: mix($c-secondary, $c-bg-box, 30%);
+    background: $m-secondary_bg--mix-30;
   }
 
   60% {
-    background: mix($c-primary, $c-bg-box, 30%);
+    background: $m-primary_bg--mix-30;
   }
 
   70% {
@@ -36,12 +36,12 @@
 
   &-on {
     background: $c-good;
-    color: $c-good-over;
+    color: $c-over;
     animation: none;
 
     &:hover {
       background: $c-bad !important;
-      color: $c-bad-over !important;
+      color: $c-over !important;
     }
   }
 
diff --git a/ui/chat/css/_preset.scss b/ui/chat/css/_preset.scss
index 8c2f2d4760564..fa5985010c58c 100644
--- a/ui/chat/css/_preset.scss
+++ b/ui/chat/css/_preset.scss
@@ -21,14 +21,14 @@
       @include transition;
 
       &.disabled {
-        background: mix($c-accent, $c-bg-box, 15%);
+        background: $m-accent_bg--mix-15;
         color: transparent;
         cursor: default;
       }
 
       &:not(.disabled):hover {
         background: $c-accent;
-        color: $c-accent-over;
+        color: $c-over;
         opacity: 1;
       }
     }
diff --git a/ui/chat/css/_tab.scss b/ui/chat/css/_tab.scss
index 1cae76c04aa72..c403310c80966 100644
--- a/ui/chat/css/_tab.scss
+++ b/ui/chat/css/_tab.scss
@@ -18,7 +18,7 @@
     @include transition;
 
     &:hover {
-      background: mix($c-accent, $c-bg-box, 15%);
+      background: $m-accent_bg--mix-15;
     }
 
     &-active {
diff --git a/ui/chat/css/build/_chat.mod.scss b/ui/chat/css/build/chat.mod.scss
similarity index 100%
rename from ui/chat/css/build/_chat.mod.scss
rename to ui/chat/css/build/chat.mod.scss
diff --git a/ui/chat/css/build/gen/chat.mod.dark.scss b/ui/chat/css/build/gen/chat.mod.dark.scss
deleted file mode 100644
index fd62cf642e5e0..0000000000000
--- a/ui/chat/css/build/gen/chat.mod.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../chat.mod';
diff --git a/ui/chat/css/build/gen/chat.mod.light.scss b/ui/chat/css/build/gen/chat.mod.light.scss
deleted file mode 100644
index 49619a001385f..0000000000000
--- a/ui/chat/css/build/gen/chat.mod.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../chat.mod';
diff --git a/ui/chat/css/build/gen/chat.mod.transp.scss b/ui/chat/css/build/gen/chat.mod.transp.scss
deleted file mode 100644
index 322fa345bb600..0000000000000
--- a/ui/chat/css/build/gen/chat.mod.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../chat.mod';
diff --git a/ui/chat/package.json b/ui/chat/package.json
index 3281d6a1d4ee3..5cb36abe4fbfc 100644
--- a/ui/chat/package.json
+++ b/ui/chat/package.json
@@ -3,7 +3,7 @@
   "version": "2.0.0",
   "private": true,
   "description": "lichess.org chat ui",
-  "types": "dist/main.d.ts",
+  "types": "dist/chat.d.ts",
   "author": "Thibault Duplessis",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
@@ -13,9 +13,7 @@
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "dist/main.js": "chat"
-      }
+      "dist/chat.js": "chat"
     }
   }
 }
diff --git a/ui/chat/src/main.ts b/ui/chat/src/chat.ts
similarity index 100%
rename from ui/chat/src/main.ts
rename to ui/chat/src/chat.ts
diff --git a/ui/chess/css/_promotion.scss b/ui/chess/css/_promotion.scss
index e9119bf98a6fa..9d1493af576d6 100644
--- a/ui/chess/css/_promotion.scss
+++ b/ui/chess/css/_promotion.scss
@@ -1,10 +1,10 @@
 #promotion-choice {
-  background: fade-out($c-bg-page, 0.3);
+  background: $m-bg--fade-30;
   z-index: z('cg__promotion');
 
   position: absolute;
-  width: var(--cg-width, 100%);
-  height: var(--cg-height, 100%);
+  width: var(--cg-width, 100%); // TODO add hyphen once chessground is updated
+  height: var(--cg-height, 100%); // TODO add hyphen once chessground is updated
   @include inline-end(0);
 
   square {
diff --git a/ui/chess/package.json b/ui/chess/package.json
index 660fb4df8a7af..d7fb184595928 100644
--- a/ui/chess/package.json
+++ b/ui/chess/package.json
@@ -4,10 +4,10 @@
   "private": true,
   "description": "lichess.org chess utils",
   "type": "module",
-  "module": "main.js",
-  "types": "main.d.ts",
+  "module": "chess.js",
+  "types": "chess.d.ts",
   "exports": {
-    ".": "./dist/main.js",
+    ".": "./dist/chess.js",
     "./*": "./dist/*.js"
   },
   "typesVersions": {
diff --git a/ui/chess/src/main.ts b/ui/chess/src/chess.ts
similarity index 100%
rename from ui/chess/src/main.ts
rename to ui/chess/src/chess.ts
diff --git a/ui/cli/css/build/_clinput.help.scss b/ui/cli/css/build/clinput.help.scss
similarity index 100%
rename from ui/cli/css/build/_clinput.help.scss
rename to ui/cli/css/build/clinput.help.scss
diff --git a/ui/cli/css/build/gen/clinput.help.dark.scss b/ui/cli/css/build/gen/clinput.help.dark.scss
deleted file mode 100644
index 271441a14ba9e..0000000000000
--- a/ui/cli/css/build/gen/clinput.help.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../clinput.help';
diff --git a/ui/cli/css/build/gen/clinput.help.light.scss b/ui/cli/css/build/gen/clinput.help.light.scss
deleted file mode 100644
index 13cec4cbda3e6..0000000000000
--- a/ui/cli/css/build/gen/clinput.help.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../clinput.help';
diff --git a/ui/cli/css/build/gen/clinput.help.transp.scss b/ui/cli/css/build/gen/clinput.help.transp.scss
deleted file mode 100644
index 9afbdcb7e7ffd..0000000000000
--- a/ui/cli/css/build/gen/clinput.help.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../clinput.help';
diff --git a/ui/cli/package.json b/ui/cli/package.json
index 580f1a8478bbd..efb93ea52ecfb 100644
--- a/ui/cli/package.json
+++ b/ui/cli/package.json
@@ -11,9 +11,7 @@
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "src/main.ts": "cli"
-      }
+      "src/cli.ts": "cli"
     }
   }
 }
diff --git a/ui/cli/src/main.ts b/ui/cli/src/cli.ts
similarity index 100%
rename from ui/cli/src/main.ts
rename to ui/cli/src/cli.ts
diff --git a/ui/common/css/abstract/_all.scss b/ui/common/css/abstract/_all.scss
index a531826f36980..e3b02e8110b82 100644
--- a/ui/common/css/abstract/_all.scss
+++ b/ui/common/css/abstract/_all.scss
@@ -1,3 +1,4 @@
+@import 'theme';
 @import 'functions';
 @import 'z-index';
 @import 'variables';
diff --git a/ui/common/css/abstract/_dir.scss b/ui/common/css/abstract/_dir.scss
index 213940137241d..f8151208b8056 100644
--- a/ui/common/css/abstract/_dir.scss
+++ b/ui/common/css/abstract/_dir.scss
@@ -1,11 +1,11 @@
 @mixin if-rtl {
-  html.dir-rtl & {
+  html[dir='rtl'] & {
     @content;
   }
 }
 
 @mixin if-ltr {
-  html.dir-ltr & {
+  html:not([dir='rtl']) & {
     @content;
   }
 }
@@ -56,7 +56,7 @@
   }
 }
 
-html.dir-rtl .force-ltr {
+html[dir='rtl'] .force-ltr {
   direction: ltr;
   text-align: left;
 }
diff --git a/ui/common/css/abstract/_extends.scss b/ui/common/css/abstract/_extends.scss
index 541f7518e2ccd..25f5108847411 100644
--- a/ui/common/css/abstract/_extends.scss
+++ b/ui/common/css/abstract/_extends.scss
@@ -81,13 +81,13 @@
 }
 
 %active-hover {
-  background: mix(white, $c-accent, 20%);
+  background: $m-accent_white--mix-80;
 }
 
 %active-soft {
   @extend %active-inset-shadow;
 
-  background: $c-shade;
+  background: $c-shade !important;
   color: $c-font-clearer;
   text-shadow: 1px 1px 1px $c-font-shadow !important;
   font-weight: bold;
@@ -102,14 +102,14 @@
 }
 
 %dropdown-shadow {
-  @if $theme == 'transp' {
+  @include if-transp {
     @include back-blur();
   }
   box-shadow: -1px 5px 6px rgba(0, 0, 0, 0.3);
 }
 
 %popup-shadow {
-  @if $theme == 'transp' {
+  @include if-transp {
     @include back-blur();
   }
   box-shadow:
@@ -169,15 +169,15 @@
 }
 
 %box-padding {
-  padding: $box-padding-vert var(--box-padding);
+  padding: $box-padding-vert var(---box-padding);
 }
 
 %box-padding-horiz {
-  padding: 0 var(--box-padding);
+  padding: 0 var(---box-padding);
 }
 %box-margin-horiz {
-  margin-left: var(--box-padding);
-  margin-right: var(--box-padding);
+  margin-left: var(---box-padding);
+  margin-right: var(---box-padding);
 }
 
 %break-word {
diff --git a/ui/common/css/abstract/_functions.scss b/ui/common/css/abstract/_functions.scss
index dae7405e03e3f..25c6652a3a4b0 100644
--- a/ui/common/css/abstract/_functions.scss
+++ b/ui/common/css/abstract/_functions.scss
@@ -1,7 +1,3 @@
-@function c-light($color, $value) {
-  @return change-color($color, $lightness: $value);
-}
-
 @function img-url($path) {
   @return url('#{$img-path}/#{$path}');
 }
diff --git a/ui/common/css/abstract/_mixins.scss b/ui/common/css/abstract/_mixins.scss
index 998e1b64f7437..07c6f60d44f5e 100644
--- a/ui/common/css/abstract/_mixins.scss
+++ b/ui/common/css/abstract/_mixins.scss
@@ -3,7 +3,10 @@
 }
 
 @mixin box-shadow {
-  box-shadow: $box-shadow;
+  box-shadow:
+    0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
 @mixin box-neat {
@@ -82,8 +85,17 @@
 }
 
 @mixin back-blur($size: 6px) {
-  backdrop-filter: blur($size);
-  -webkit-backdrop-filter: blur($size);
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    backdrop-filter: blur($size);
+    -webkit-backdrop-filter: blur($size);
+  }
 }
 
 @mixin topnav-unsticky {
@@ -96,7 +108,7 @@
     background: unset;
     border-bottom: unset;
     transform: unset;
-    --site-header-sticky-padding: 0px;
+    ---site-header-sticky-padding: 0px;
 
     #topnav,
     .dropdown {
diff --git a/ui/common/css/abstract/_theme.scss b/ui/common/css/abstract/_theme.scss
new file mode 100644
index 0000000000000..070d3d95b0a64
--- /dev/null
+++ b/ui/common/css/abstract/_theme.scss
@@ -0,0 +1,128 @@
+@import '../theme/gen/wrap';
+
+$site-hue: 37;
+$border-width: 1px;
+$border-style: solid;
+$border: $border-width $border-style $c-border;
+
+@mixin if-light {
+  html.light & {
+    @content;
+  }
+}
+
+@mixin if-transp {
+  html.transp & {
+    @content;
+  }
+}
+
+@mixin if-not-light {
+  html:not(.light) & {
+    @content;
+  }
+}
+
+@mixin if-not-transp {
+  html:not(.transp) & {
+    @content;
+  }
+}
+
+@mixin to-bottom($c-top, $c-bottom) {
+  background: linear-gradient(to bottom, $c-top, $c-bottom 100%);
+}
+
+@mixin metal-bg {
+  @include to-bottom(hsl($site-hue, 7%, 22), hsl($site-hue, 5%, 19));
+
+  html.transp & {
+    @include to-bottom(hsla(0, 0, 0, 0.4), hsla(0, 0, 0, 0.5));
+  }
+
+  html.light & {
+    @include to-bottom(hsl(0, 0, 96) 0%, hsl(0, 0, 93));
+  }
+}
+
+@mixin metal {
+  @include to-bottom(hsl($site-hue, 7%, 22), hsl($site-hue, 5%, 19));
+
+  html.transp & {
+    @include to-bottom(hsla(0, 0, 0, 0.4), hsla(0, 0, 0, 0.5));
+  }
+
+  html.light & {
+    text-shadow: 0 1px 0 $c-font-shadow;
+    @include to-bottom(hsl(0, 0, 96) 0%, hsl(0, 0, 93));
+  }
+}
+
+@mixin metal-hover {
+  @include to-bottom(hsl($site-hue, 7%, 25), hsl($site-hue, 5%, 22));
+  color: $c-font-clear;
+
+  html.transp & {
+    @include to-bottom(hsla(0, 0, 0, 0.45), hsla(0, 0, 0, 0.55));
+  }
+
+  html.light & {
+    text-shadow: 0 1px 0 $c-font-shadow;
+    @include to-bottom(hsl(0, 0, 98) 0%, hsl(0, 0, 95));
+  }
+}
+
+@mixin page-metal {
+  @include to-bottom(hsl($site-hue, 7%, 22), hsl($site-hue, 5%, 19));
+
+  html.transp & {
+    @include to-bottom(hsla(0, 0, 0, 0.4), hsla(0, 0, 0, 0.5));
+  }
+
+  html.light & {
+    text-shadow: 0 1px 0 $c-font-shadow;
+    @include to-bottom($m-primary_bg--mix-20 0%, rgb(197, 216, 234));
+  }
+}
+
+@mixin page-metal-hover {
+  @include to-bottom(hsl($site-hue, 7%, 25), hsl($site-hue, 5%, 22));
+  color: $c-font-clear;
+
+  html.transp & {
+    @include to-bottom(hsla(0, 0, 0, 0.45), hsla(0, 0, 0, 0.55));
+  }
+
+  html.light & {
+    text-shadow: 0 1px 0 $c-font-shadow;
+    @include to-bottom($m-primary_bg--mix-25 0%, $m-primary_bg-page--mix-20);
+    text-shadow: $text-shadow;
+  }
+}
+
+@mixin theme-style {
+  html.transp::before {
+    content: ' ';
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    will-change: transform;
+    z-index: -1;
+  }
+}
+
+%page-text-shadow {
+  @include if-light {
+    text-shadow: 0 1px 0 $c-font-shadow;
+  }
+  @include if-transp {
+    text-shadow: 0.5px 1px 1px #000;
+  }
+}
+
+%page-link-font {
+  color: $c-font-clearer;
+}
diff --git a/ui/common/css/abstract/_uniboard.scss b/ui/common/css/abstract/_uniboard.scss
index 8d2a1857c0d5e..bef6ec6f073c4 100644
--- a/ui/common/css/abstract/_uniboard.scss
+++ b/ui/common/css/abstract/_uniboard.scss
@@ -11,13 +11,13 @@ $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,
+      ---main-margin,
       0px
     ) - #{$scrollbar-width}
 );
 $col3-uniboard-max-height: calc(100vh - #{$site-header-outer-height} - #{$col3-min-bottom-margin});
 $col3-uniboard-max-size: min(#{$col3-uniboard-max-width}, #{$col3-uniboard-max-height});
-$col3-uniboard-width: calc(#{$col3-uniboard-max-size} * var(--board-scale));
+$col3-uniboard-width: calc(#{$col3-uniboard-max-size} * var(---board-scale));
 
 // default zoom setting is 85% which gives a board-scale of 0.85*0.75+0.25 = 0,8875 ≈ 0.9
 // this is used for 3-col pages that don't actually have a board, e.g. tournament pages
@@ -39,11 +39,11 @@ $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}
+  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-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(
@@ -60,9 +60,9 @@ $col2-uniboard-squeeze-width: minmax(
 $col1-uniboard-controls: 5rem;
 
 // fallbacks for really old browsers that don't support css min() and max() functions
-$col3-uniboard-fallback-min-width: calc(70vmin * var(--board-scale));
+$col3-uniboard-fallback-min-width: calc(70vmin * var(---board-scale));
 $col3-uniboard-fallback-max-width: calc(
-  100vh * var(--board-scale) - #{$site-header-outer-height} - #{$col3-uniboard-controls}
+  100vh * var(---board-scale) - #{$site-header-outer-height} - #{$col3-uniboard-controls}
 );
 $col3-uniboard-fallback-width: minmax($col3-uniboard-fallback-min-width, $col3-uniboard-fallback-max-width);
 $col2-uniboard-fallback-width: $col3-uniboard-fallback-width;
diff --git a/ui/common/css/abstract/_variables.scss b/ui/common/css/abstract/_variables.scss
index 659f80b8b8286..1d36e6a2e43a0 100644
--- a/ui/common/css/abstract/_variables.scss
+++ b/ui/common/css/abstract/_variables.scss
@@ -5,7 +5,7 @@ $img-path: '../images';
 
 $viewport-min-width: 320px;
 
-$block-gap: var(--block-gap);
+$block-gap: var(---block-gap);
 
 $box-radius-size: 5px;
 $box-padding-vert: 5vh;
@@ -15,11 +15,11 @@ $transition-duration: 150ms;
 $site-header-tall-height: 60px;
 $site-header-short-height: 40px;
 $site-header-sticky-max-width: 1780px;
-$site-header-height: var(--site-header-height);
-$site-header-margin: var(--site-header-margin);
-$site-header-outer-height: calc($site-header-height + $site-header-margin + var(--sticky-gap));
+$site-header-height: var(---site-header-height);
+$site-header-margin: var(---site-header-margin);
+$site-header-outer-height: calc($site-header-height + $site-header-margin + var(---sticky-gap));
 
-$main-margin: var(--main-margin);
+$main-margin: var(---main-margin);
 $main-max-width: 1300px !default;
 
 $topnav-visible: 1020px; // where topnav menu & WWWWWWWWWWWWWWWWWWWW both fit at 100%
diff --git a/ui/common/css/base/_data-icon.scss b/ui/common/css/base/_data-icon.scss
index 45a47b7d97229..0cb961ce9bb15 100644
--- a/ui/common/css/base/_data-icon.scss
+++ b/ui/common/css/base/_data-icon.scss
@@ -21,7 +21,7 @@
   color: $c-brag;
 }
 
-html.dir-rtl {
+html[dir='rtl'] {
   [data-icon='#{$licon-Wings}'],
   [data-icon='#{$licon-PlayTriangle}'],
   [data-icon='#{$licon-GreaterThan}'],
diff --git a/ui/common/css/base/_elements.scss b/ui/common/css/base/_elements.scss
index 2a5ec64bbb055..394a50be7f42d 100644
--- a/ui/common/css/base/_elements.scss
+++ b/ui/common/css/base/_elements.scss
@@ -1,7 +1,7 @@
 html {
   box-sizing: border-box;
   min-height: 100%;
-  color-scheme: unquote($color-scheme);
+  color-scheme: light dark;
 }
 
 *,
diff --git a/ui/common/css/base/_form.scss b/ui/common/css/base/_form.scss
index e37a0a39cb086..e7bd3d4454648 100644
--- a/ui/common/css/base/_form.scss
+++ b/ui/common/css/base/_form.scss
@@ -10,7 +10,7 @@ textarea {
 
 option,
 optgroup {
-  background: $c-bg-box-opaque;
+  background: $c-bg-box;
   color: $c-font-clear;
 }
 
@@ -50,5 +50,5 @@ textarea:-webkit-autofill,
 select:-webkit-autofill {
   border: $border;
   -webkit-text-fill-color: $c-font;
-  -webkit-box-shadow: 0 0 0px 1000px mix($c-good, $c-bg-input, 10%) inset;
+  -webkit-box-shadow: 0 0 0px 1000px $m-secondary_bg--mix-10 inset;
 }
diff --git a/ui/common/css/build/theme-all.scss b/ui/common/css/build/theme-all.scss
new file mode 100644
index 0000000000000..9cffabd465b46
--- /dev/null
+++ b/ui/common/css/build/theme-all.scss
@@ -0,0 +1,9 @@
+@import '../theme/default';
+
+:root {
+  @include shared-color-defs;
+  @include default-mix;
+}
+
+@import '../theme/light';
+@import '../theme/transp';
diff --git a/ui/common/css/build/theme-dark.scss b/ui/common/css/build/theme-dark.scss
new file mode 100644
index 0000000000000..20e6182eb57f8
--- /dev/null
+++ b/ui/common/css/build/theme-dark.scss
@@ -0,0 +1,6 @@
+@import '../theme/default';
+
+:root {
+  @include shared-color-defs;
+  @include default-mix;
+}
diff --git a/ui/common/css/build/theme-light.scss b/ui/common/css/build/theme-light.scss
new file mode 100644
index 0000000000000..833c81538a9a9
--- /dev/null
+++ b/ui/common/css/build/theme-light.scss
@@ -0,0 +1 @@
+@import '../theme/light';
diff --git a/ui/common/css/build/theme-transp.scss b/ui/common/css/build/theme-transp.scss
new file mode 100644
index 0000000000000..c45ec5a09a3f6
--- /dev/null
+++ b/ui/common/css/build/theme-transp.scss
@@ -0,0 +1 @@
+@import '../theme/transp';
diff --git a/ui/common/css/component/_announce.scss b/ui/common/css/component/_announce.scss
index 389ab03f92144..cc9b4f6c7c056 100644
--- a/ui/common/css/component/_announce.scss
+++ b/ui/common/css/component/_announce.scss
@@ -6,7 +6,7 @@
   @include inline-start(0);
   font-size: 1.4em;
   background: $c-primary;
-  color: $c-primary-over;
+  color: $c-over;
   padding: 0.7rem 1rem;
   z-index: z('tour-reminder');
   width: 100%;
@@ -17,7 +17,7 @@
   }
 
   a {
-    color: $c-primary-over;
+    color: $c-over;
   }
 
   time {
diff --git a/ui/common/css/component/_board-resize.scss b/ui/common/css/component/_board-resize.scss
index f46e5bdab0c30..3fdbf6531c8a0 100644
--- a/ui/common/css/component/_board-resize.scss
+++ b/ui/common/css/component/_board-resize.scss
@@ -38,12 +38,12 @@ cg-resize {
 
     &:hover {
       border-radius: 50%;
-      background: fade-out($c-accent, 0.5);
+      background: $m-accent--fade-50;
     }
 
     .resizing & {
       border-radius: 50%;
-      background: fade-out($c-secondary, 0.5);
+      background: $m-secondary--fade-50;
     }
   }
 }
diff --git a/ui/common/css/component/_box.scss b/ui/common/css/component/_box.scss
index b149e04a51d8d..2039ce16591a9 100644
--- a/ui/common/css/component/_box.scss
+++ b/ui/common/css/component/_box.scss
@@ -6,7 +6,7 @@ $vp-max-width: 1200px;
 
   background: $c-bg-box;
 
-  @include fluid-size('--box-padding', 15px, 60px);
+  @include fluid-size('---box-padding', 15px, 60px);
 
   &-pad {
     @extend %box-padding;
diff --git a/ui/common/css/component/_button.scss b/ui/common/css/component/_button.scss
index 2dfde17bae211..9f86b8beb6a58 100644
--- a/ui/common/css/component/_button.scss
+++ b/ui/common/css/component/_button.scss
@@ -16,14 +16,14 @@
   &,
   &:visited,
   &:focus {
-    color: $c-primary-over;
+    color: $c-over;
   }
 
   &:not(.disabled):hover {
     @extend %button-raised-shadow;
 
-    color: $c-primary-over;
-    background: lighten($c-primary, 7);
+    color: $c-over;
+    background: $m-primary--lighten-7;
   }
 
   &:not(.disabled):focus-visible {
@@ -47,7 +47,7 @@
     background: $c-secondary;
 
     &:not(.disabled):hover {
-      background: lighten($c-secondary, 4);
+      background: $m-secondary--lighten-4;
     }
   }
 
@@ -55,7 +55,7 @@
     background: $c-error;
 
     &:not(.disabled):hover {
-      background: lighten($c-error, 11);
+      background: $m-bad--lighten-11;
     }
   }
 
diff --git a/ui/common/css/component/_chart.scss b/ui/common/css/component/_chart.scss
index 7d9f37f100f7d..c9686e19af604 100644
--- a/ui/common/css/component/_chart.scss
+++ b/ui/common/css/component/_chart.scss
@@ -22,7 +22,10 @@
     border: $border;
 
     &.active {
-      background-color: if($theme-light, #dbebfc, #262421);
+      background-color: #262421;
+      @include if-light {
+        background-color: #dbebfc;
+      }
       color: $c-font;
       text-shadow: none !important;
     }
diff --git a/ui/common/css/component/_color-icon.scss b/ui/common/css/component/_color-icon.scss
index 9cebe610a66f2..adc023a0b0e85 100644
--- a/ui/common/css/component/_color-icon.scss
+++ b/ui/common/css/component/_color-icon.scss
@@ -1,5 +1,12 @@
 .color-icon {
-  @if $theme-light {
+  &.white::before {
+    content: $licon-DiscBig;
+  }
+
+  &.black::before {
+    content: $licon-DiscBigOutline;
+  }
+  @include if-light {
     &.white::before {
       content: $licon-DiscBigOutline;
     }
@@ -7,14 +14,6 @@
     &.black::before {
       content: $licon-DiscBig;
     }
-  } @else {
-    &.white::before {
-      content: $licon-DiscBig;
-    }
-
-    &.black::before {
-      content: $licon-DiscBigOutline;
-    }
   }
 
   &.random::before {
diff --git a/ui/common/css/component/_complete.scss b/ui/common/css/component/_complete.scss
index e5cfc468bd03c..3bf7122d06a9f 100644
--- a/ui/common/css/component/_complete.scss
+++ b/ui/common/css/component/_complete.scss
@@ -36,7 +36,7 @@
         color: $c-font-clearer !important;
       }
 
-      background: mix($c-link, $c-bg-box, 20%);
+      background: $m-primary_bg--mix-20;
     }
   }
 }
diff --git a/ui/common/css/component/_crosstable.scss b/ui/common/css/component/_crosstable.scss
index 35e83ffb7345c..588f463aa2904 100644
--- a/ui/common/css/component/_crosstable.scss
+++ b/ui/common/css/component/_crosstable.scss
@@ -50,7 +50,7 @@
   &__matchup {
     flex: 1 1 auto;
     font-weight: bold;
-    background: mix($c-primary, $c-bg-box, 20%);
+    background: $m-primary_bg--mix-20;
   }
 
   povs {
@@ -72,7 +72,7 @@
     }
 
     &.current a {
-      background: mix($c-accent, $c-bg-box, 70%);
+      background: $m-accent_bg--mix-70;
       color: #fff;
       opacity: 1 !important;
     }
diff --git a/ui/common/css/component/_dialog.scss b/ui/common/css/component/_dialog.scss
index 24bb4fb83d9b3..9f544157d558a 100644
--- a/ui/common/css/component/_dialog.scss
+++ b/ui/common/css/component/_dialog.scss
@@ -19,7 +19,7 @@ dialog {
   }
 
   > div.scrollable {
-    max-height: calc(var(--viewport-height) - 16px);
+    max-height: calc(var(---viewport-height) - 16px);
     overflow-x: clip;
     overflow-y: auto;
   }
@@ -68,7 +68,7 @@ dialog {
       border-radius: 50%;
       border: none;
       &:hover {
-        box-shadow: $box-shadow;
+        @include box-shadow;
         background: $c-bad;
         color: #fff;
       }
diff --git a/ui/common/css/component/_fbt.scss b/ui/common/css/component/_fbt.scss
index 798ec3d8f9141..288e65f94cb20 100644
--- a/ui/common/css/component/_fbt.scss
+++ b/ui/common/css/component/_fbt.scss
@@ -1,5 +1,3 @@
-$c-fbt-bg: $c-secondary !default;
-
 .fbt {
   @extend %button-none;
 
@@ -10,13 +8,13 @@ $c-fbt-bg: $c-secondary !default;
 
   @media (hover: hover) {
     &:hover:not(.disabled):not([disabled]) {
-      background: mix($c-fbt-bg, $c-bg-box, 75%);
+      background: $m-secondary_bg--mix-75;
       color: #fff;
     }
   }
 
   &.active {
-    background: $c-fbt-bg !important;
+    background: $c-secondary !important;
     color: #fff;
   }
 
diff --git a/ui/common/css/component/_flash.scss b/ui/common/css/component/_flash.scss
index 5a3ba6bc33f69..f758b925c8bd9 100644
--- a/ui/common/css/component/_flash.scss
+++ b/ui/common/css/component/_flash.scss
@@ -3,7 +3,7 @@
   margin: 1em 0 2em 0;
   padding: 1em 2em;
   background: $c-good;
-  color: $c-good-over;
+  color: $c-over;
 
   &::before {
     @extend %data-icon;
@@ -15,14 +15,14 @@
 
   &__content {
     a {
-      color: $c-good-over;
+      color: $c-over;
       unicode-bidi: plaintext;
     }
   }
 
   &-warning {
     background: $c-warn;
-    color: $c-warn-over;
+    color: $c-over;
 
     &::before {
       content: $licon-InfoCircle;
@@ -31,7 +31,7 @@
 
   &-failure {
     background: $c-bad;
-    color: $c-bad-over;
+    color: $c-over;
 
     &::before {
       content: $licon-CautionCircle;
diff --git a/ui/common/css/component/_friend-box.scss b/ui/common/css/component/_friend-box.scss
index 2fe6996291af4..303efdeba76b7 100644
--- a/ui/common/css/component/_friend-box.scss
+++ b/ui/common/css/component/_friend-box.scss
@@ -44,7 +44,7 @@
       display: flex;
 
       &:hover {
-        background: mix($c-secondary, $c-bg-popup, 10%);
+        background: $m-secondary_bg-popup--mix-10;
       }
     }
 
diff --git a/ui/common/css/component/_glowing.scss b/ui/common/css/component/_glowing.scss
index 369db3f9c305a..862446eddaf76 100644
--- a/ui/common/css/component/_glowing.scss
+++ b/ui/common/css/component/_glowing.scss
@@ -4,7 +4,7 @@
   }
 
   50% {
-    background: mix($c-link, $c-bg-box, 20%);
+    background: $m-primary_bg--mix-20;
   }
 
   58% {
diff --git a/ui/common/css/component/_help.scss b/ui/common/css/component/_help.scss
index 99fa38f4dc68a..52af95b7df916 100644
--- a/ui/common/css/component/_help.scss
+++ b/ui/common/css/component/_help.scss
@@ -14,7 +14,7 @@ dialog .help {
   th p {
     margin: 1.2em 0 0.6em 0;
     background: $c-brag;
-    color: $c-brag-over;
+    color: $c-over;
     font-weight: bold;
     padding: 0.3em 0;
   }
diff --git a/ui/common/css/component/_lichess-pgn-viewer.scss b/ui/common/css/component/_lichess-pgn-viewer.scss
index ad993fd2fc09c..6d0e86d9c7990 100644
--- a/ui/common/css/component/_lichess-pgn-viewer.scss
+++ b/ui/common/css/component/_lichess-pgn-viewer.scss
@@ -1,26 +1,36 @@
-$lpv-site-hue: 37;
-$lpv-accent: $c-primary;
-$lpv-accent-over: $c-primary-over;
-$lpv-bg: $c-bg-zebra;
-$lpv-bg-controls: $lpv-bg;
-$lpv-bg-movelist: $lpv-bg;
-$lpv-bg-variation: $c-bg-zebra2;
-$lpv-bg-pane: fade-out($c-bg-zebra2, 0.01);
-$lpv-font: $c-font;
-$lpv-font-shy: $c-font-dim;
-$lpv-font-accent: mix($lpv-bg, $c-font, 20%);
-$lpv-border: $c-border;
-
-$lpv-inaccuracy: $c-inaccuracy;
-$lpv-mistake: $c-mistake;
-$lpv-blunder: $c-blunder;
-$lpv-good-move: $c-good;
-$lpv-brilliant: $c-brilliant;
-$lpv-interesting: $c-interesting;
-
 @import '../../node_modules/lichess-pgn-viewer/scss/lichess-pgn-viewer.lib';
 
 .lpv {
+  --c-lpv-accent: #{$c-primary};
+  --c-lpv-bg: #{$c-bg-zebra};
+  --c-lpv-bg-player: var(--c-lpv-bg);
+  --c-lpv-bg-controls: var(--c-lpv-bg);
+  --c-lpv-bg-movelist: var(--c-lpv-bg);
+  --c-lpv-bg-variation: #{$c-bg-zebra2};
+  --c-lpv-bg-pane: #{$m-bg-zebra2--fade-1};
+  --c-lpv-pgn-text: #{$c-bg-zebra2};
+  --c-lpv-font: #{$c-font};
+  --c-lpv-font-shy: #{$c-font-dim};
+  --c-lpv-accent-over: #{$c-over};
+  --c-lpv-fbt-hover: #{$m-primary_bg--mix-75};
+  --c-lpv-font-bg: #{$m-font_bg--mix-20};
+  --c-lpv-current-move: #{$m-primary_bg--mix-70};
+  --c-lpv-move-hover: #{$m-primary_bg--mix-30};
+  --c-lpv-border: #{$c-border};
+  --c-lpv-side-border: hsl(37deg, 5%, 13%); //#{$c-border-page};
+  --c-lpv-inaccuracy: #{$c-inaccuracy};
+  --c-lpv-mistake: #{$c-mistake};
+  --c-lpv-blunder: #{$c-blunder};
+  --c-lpv-good-move: #{$c-good};
+  --c-lpv-brilliant: #{$c-brilliant};
+  --c-lpv-interesting: #{$c-interesting};
+  --c-lpv-bg-inaccuracy-hover: #{$m-inaccuracy_bg--mix-30};
+  --c-lpv-bg-mistake-hover: #{$m-mistake_bg--mix-30};
+  --c-lpv-bg-blunder-hover: #{$m-blunder_bg--mix-30};
+  --c-lpv-bg-good-hover: #{$m-good-move_bg--mix-30};
+  --c-lpv-bg-brilliant-hover: #{$m-brilliant_bg--mix-30};
+  --c-lpv-bg-interesting-hover: #{$m-interesting_bg--mix-30};
+
   @extend %box-neat-force;
   &__player__title {
     color: $c-brag;
diff --git a/ui/common/css/component/_loader.scss b/ui/common/css/component/_loader.scss
index 66185eb6dcf10..5745102ee8655 100755
--- a/ui/common/css/component/_loader.scss
+++ b/ui/common/css/component/_loader.scss
@@ -100,10 +100,9 @@ $total_len: $len1 + $len2 + $len3;
 }
 
 .ddloader {
-  @if $theme-light {
+  background: img-url('loader/whitex1.png') no-repeat;
+  @include if-light {
     background: img-url('loader/blackx1.png') no-repeat;
-  } @else {
-    background: img-url('loader/whitex1.png') no-repeat;
   }
 
   animation: ddloader 0.5s steps(15) infinite !important;
diff --git a/ui/common/css/component/_mascot.scss b/ui/common/css/component/_mascot.scss
index 599307d2ec18a..c25ec99670ce5 100644
--- a/ui/common/css/component/_mascot.scss
+++ b/ui/common/css/component/_mascot.scss
@@ -9,7 +9,7 @@
   .mascot {
     width: 160px;
     height: 160px;
-    margin: -4em var(--box-padding) 1vh 1vw;
+    margin: -4em var(---box-padding) 1vh 1vw;
     @media (max-width: at-most($x-small)) {
       display: none;
       margin: 0;
@@ -17,7 +17,7 @@
   }
 
   &__content {
-    padding: 3vh var(--box-padding);
+    padding: 3vh var(---box-padding);
     .mascot__intro {
       font-size: 1.3em;
     }
diff --git a/ui/common/css/component/_material.scss b/ui/common/css/component/_material.scss
index 9358ea4251ea7..b04e1fe8adb13 100644
--- a/ui/common/css/component/_material.scss
+++ b/ui/common/css/component/_material.scss
@@ -35,7 +35,7 @@
       background-image: url(../piece/mono/K.svg);
     }
 
-    @if $theme == 'transp' {
+    @include if-transp {
       filter: brightness(1.3) drop-shadow(0 1px 1px #000);
     }
   }
diff --git a/ui/common/css/component/_mselect.scss b/ui/common/css/component/_mselect.scss
index 6bd84796b3edb..4347534cb95b2 100644
--- a/ui/common/css/component/_mselect.scss
+++ b/ui/common/css/component/_mselect.scss
@@ -60,44 +60,42 @@ $c-mselect: $c-primary;
         transform: translateY(-50%) scale(1, 1);
       }
 
-      .mselect__item {
+      > * {
         opacity: 1;
         transition: opacity 125ms ease-in-out 125ms;
       }
     }
-  }
-  &__item {
-    white-space: nowrap;
-    display: block;
-    padding: 0.3em 1em;
+    &__item {
+      white-space: nowrap;
+      display: block;
+      padding: 0.3em 1em;
 
-    @include transition;
+      @include transition;
 
-    color: $c-mselect;
+      color: $c-mselect;
 
-    &.current {
-      background: $c-bg-zebra;
+      &.current {
+        background: $c-bg-zebra;
 
-      @extend %flex-between-nowrap;
+        @extend %flex-between-nowrap;
 
-      &::after {
-        @extend %data-icon;
+        &::after {
+          @extend %data-icon;
 
-        content: $licon-Checkmark;
-        flex: 1 1 100%;
-        text-align: right;
+          content: $licon-Checkmark;
+          flex: 1 1 100%;
+          text-align: right;
+        }
+      }
+      &:hover {
+        background: $c-mselect;
+        color: $c-over;
+      }
+      &::before {
+        margin-inline-end: 0.4em;
       }
-    }
-
-    &:hover {
-      background: $c-mselect;
-      color: #fff;
-    }
 
-    &::before {
-      margin-inline-end: 0.4em;
+      opacity: 0;
     }
-
-    opacity: 0;
   }
 }
diff --git a/ui/common/css/component/_nav-tree.scss b/ui/common/css/component/_nav-tree.scss
index c59d4fb8274ac..ebd8b8a37029a 100644
--- a/ui/common/css/component/_nav-tree.scss
+++ b/ui/common/css/component/_nav-tree.scss
@@ -48,7 +48,7 @@
       @include transition;
 
       &:hover {
-        color: $c-primary-over;
+        color: $c-over;
         background: $c-primary;
       }
     }
diff --git a/ui/common/css/component/_now-playing.scss b/ui/common/css/component/_now-playing.scss
index 3ab933677af45..0b9d936f04e67 100644
--- a/ui/common/css/component/_now-playing.scss
+++ b/ui/common/css/component/_now-playing.scss
@@ -1,12 +1,12 @@
 .now-playing {
   display: grid;
-  --np-min-width: 200px;
+  ---np-min-width: 200px;
 
   @media (max-width: at-most($xx-small)) {
-    --np-min-width: 50%;
+    ---np-min-width: 50%;
   }
 
-  grid-template-columns: repeat(auto-fill, minmax(var(--np-min-width), 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(var(---np-min-width), 1fr));
 
   > a {
     color: $c-font;
diff --git a/ui/common/css/component/_pagination.scss b/ui/common/css/component/_pagination.scss
index a2f0a3f6c56f4..00d2b9b7066b9 100644
--- a/ui/common/css/component/_pagination.scss
+++ b/ui/common/css/component/_pagination.scss
@@ -20,11 +20,11 @@
   }
 
   a:hover {
-    background: mix($c-primary, $c-bg-box, 10);
+    background: $m-primary_bg--mix-10;
   }
 
   .current {
     background: $c-primary;
-    color: $c-primary-over;
+    color: $c-over;
   }
 }
diff --git a/ui/common/css/component/_quote.scss b/ui/common/css/component/_quote.scss
index c0cb99826c88c..98b81907ae2bc 100644
--- a/ui/common/css/component/_quote.scss
+++ b/ui/common/css/component/_quote.scss
@@ -11,7 +11,7 @@
     font-style: italic;
     font-size: 1.1rem;
 
-    @if $theme != 'transp' {
+    html:not(.transp) & {
       border: $border;
       border-width: 1px 0;
 
diff --git a/ui/common/css/component/_reconnecting.scss b/ui/common/css/component/_reconnecting.scss
index 30629cbb1f813..dee881bf20cbf 100644
--- a/ui/common/css/component/_reconnecting.scss
+++ b/ui/common/css/component/_reconnecting.scss
@@ -19,7 +19,7 @@ $recon-height: 2.5rem;
   font-weight: bold;
   position: fixed;
   background: $c-bad;
-  color: $c-bad-over;
+  color: $c-over;
   bottom: 0;
   @include inline-start(0);
   height: $recon-height;
diff --git a/ui/common/css/component/_signal.scss b/ui/common/css/component/_signal.scss
index d621f6f0dd173..795482aae1ec1 100644
--- a/ui/common/css/component/_signal.scss
+++ b/ui/common/css/component/_signal.scss
@@ -11,7 +11,7 @@ signal > i {
   margin-inline-start: 1px;
   display: inline-block;
   height: 40%;
-  background-color: c-dimmer($c-good);
+  background-color: $m-secondary_dimmer--mix-82;
 }
 
 signal > i:nth-child(2) {
diff --git a/ui/common/css/component/_slist.scss b/ui/common/css/component/_slist.scss
index 0bd5a600cc27f..55337a53cb201 100644
--- a/ui/common/css/component/_slist.scss
+++ b/ui/common/css/component/_slist.scss
@@ -37,12 +37,12 @@
   &-pad {
     td:first-child,
     th:first-child {
-      padding-inline-start: var(--box-padding);
+      padding-inline-start: var(---box-padding);
     }
 
     td:last-child,
     th:last-child {
-      padding-inline-end: var(--box-padding);
+      padding-inline-end: var(---box-padding);
     }
   }
 
@@ -59,11 +59,11 @@
 
 .slist-wrapper {
   overflow-x: auto;
-  max-width: calc(100vw - var(--box-padding) * 2);
+  max-width: calc(100vw - var(---box-padding) * 2);
 
   .slist {
     @media (max-width: at-most($x-small)) {
-      min-width: calc(650px - var(--box-padding) * 2);
+      min-width: calc(650px - var(---box-padding) * 2);
     }
   }
 }
@@ -94,7 +94,7 @@
       flex-flow: row wrap;
       align-items: center;
       justify-content: space-between;
-      padding: 0.5rem var(--box-padding);
+      padding: 0.5rem var(---box-padding);
       border-top: $border;
     }
 
diff --git a/ui/common/css/component/_sparkline.scss b/ui/common/css/component/_sparkline.scss
index 5f9912f743ffb..8c5ac67373451 100644
--- a/ui/common/css/component/_sparkline.scss
+++ b/ui/common/css/component/_sparkline.scss
@@ -1,5 +1,5 @@
 /* line with highlight area */
 .sparkline {
   stroke: $c-primary;
-  fill: mix($c-primary, $c-bg-box, 20%);
+  fill: $m-primary_bg--mix-20;
 }
diff --git a/ui/common/css/component/_subnav.scss b/ui/common/css/component/_subnav.scss
index 6ae48dcb3fcd3..797ce2c29b36e 100644
--- a/ui/common/css/component/_subnav.scss
+++ b/ui/common/css/component/_subnav.scss
@@ -68,7 +68,7 @@
 
       &::after {
         content: '';
-        background: fade-out($c-accent, 0.4);
+        background: $m-accent--fade-40;
         width: 3px;
         position: absolute;
         height: 98%;
diff --git a/ui/common/css/component/_tablesort.scss b/ui/common/css/component/_tablesort.scss
index 98bc7c177c27b..0d15587497839 100644
--- a/ui/common/css/component/_tablesort.scss
+++ b/ui/common/css/component/_tablesort.scss
@@ -21,7 +21,7 @@ th[aria-sort='descending']:not(.no-sort):after {
 }
 
 th[aria-sort]:not(.no-sort) {
-  background: fade-out($c-accent, 0.85);
+  background: $m-accent--fade-85;
   color: $c-font-clear;
   &:after {
     visibility: visible;
diff --git a/ui/common/css/component/_tagify.scss b/ui/common/css/component/_tagify.scss
index 152396df60a40..d09e7847be814 100644
--- a/ui/common/css/component/_tagify.scss
+++ b/ui/common/css/component/_tagify.scss
@@ -8,7 +8,7 @@
   // SCSS "default" allows overriding variables BEFORE they are set in the below lines of code
   $self: &;
   $tags-border-color: $c-border !default;
-  $tags-hover-border-color: c-clearer($c-border) !default;
+  $tags-hover-border-color: $m-dimmer_clearer--mix-63 !default;
   $tags-focus-border-color: $c-primary !default;
 
   $tagMargin: 5px !default;
@@ -20,18 +20,18 @@
   $tag-text-color: $c-font-clearer !default;
   $tag-text-color--edit: $c-font-clearer !default;
   $tag-bg: $c-bg-zebra2 !default;
-  $tag-hover: mix($c-primary, $c-bg-zebra2, 20%) !default;
-  $tag-remove: mix($c-bad, $c-bg-zebra2, 60%) !default;
+  $tag-hover: $m-primary_bg-zebra2--mix-20 !default;
+  $tag-remove: $m-bad_bg-zebra2--mix-60 !default;
   $tag-remove-btn-color: $tag-text-color !default;
   $tag-remove-btn-bg: none !default;
   $tag-remove-btn-bg--hover: $c-bad !default;
   $tag-invalid-color: $tag-remove !default;
-  $tag-invalid-bg: mix($c-bad, $c-bg-zebra2, 20%) !default;
+  $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: rgba($tag-text-color, 0.4) !default;
-  $placeholder-color-focus: rgba($tag-text-color, 0.25) !default;
+  $placeholder-color: $m-font--fade-50 !default;
+  $placeholder-color-focus: $m-font--fade-70 !default;
   $input-color: inherit !default;
   $tagify-dd-bg-color: white !default;
   $tagify-dd-color-primary: $c-primary !default;
@@ -48,7 +48,7 @@
   --tag-inset-shadow-size: #{$tag-inset-shadow-size};
   --tag-invalid-color: #{$tag-invalid-color};
   --tag-invalid-bg: #{$tag-invalid-bg};
-  --tag-remove-bg: #{rgba($tag-remove, 0.3)};
+  --tag-remove-bg: #{$m-bad_bg-zebra2--mix-30};
   --tag-remove-btn-color: #{$tag-remove-btn-color};
   --tag-remove-btn-bg: #{$tag-remove-btn-bg};
   --tag-remove-btn-bg--hover: #{$tag-remove-btn-bg--hover};
@@ -272,7 +272,6 @@
         transition: 120ms ease;
         animation: tags--bump 0.3s ease-out 1;
 
-        box-shadow: 0 0 0 $tag-inset-shadow-size $tag-bg inset;
         box-shadow: 0 0 0 var(--tag-inset-shadow-size, $tag-inset-shadow-size) var(--tag-bg, $tag-bg) inset;
       }
     }
diff --git a/ui/common/css/component/_zen-toggle.scss b/ui/common/css/component/_zen-toggle.scss
index dddc224c4a6a9..9171b9dc94d20 100644
--- a/ui/common/css/component/_zen-toggle.scss
+++ b/ui/common/css/component/_zen-toggle.scss
@@ -14,7 +14,7 @@
     height: 4em;
     padding: 1em 1em;
     background: center no-repeat url('../logo/lichess-white.svg');
-    @if $theme-light {
+    @include if-light {
       background-image: url('../logo/lichess.svg');
     }
     background-size: 2em;
diff --git a/ui/common/css/form/_captcha.scss b/ui/common/css/form/_captcha.scss
index 13026db5e1ca0..0154379956202 100644
--- a/ui/common/css/form/_captcha.scss
+++ b/ui/common/css/form/_captcha.scss
@@ -11,7 +11,7 @@
     @extend %box-radius;
 
     border: 1px solid $c-error;
-    background: mix($c-error, $c-bg-high, 10%);
+    background: $m-bad_bg--mix-10;
   }
 
   .challenge {
diff --git a/ui/common/css/form/_cmn-toggle.scss b/ui/common/css/form/_cmn-toggle.scss
index 28594eadc4c9a..827265290b9a5 100644
--- a/ui/common/css/form/_cmn-toggle.scss
+++ b/ui/common/css/form/_cmn-toggle.scss
@@ -39,10 +39,9 @@
   }
 
   &::after {
-    @if $theme == 'transp' {
-      background: linear-gradient(to bottom, hsl($c-site-hue, 7%, 22), hsl($c-site-hue, 5%, 19) 100%);
-    } @else {
-      @extend %metal;
+    @extend %metal;
+    @include if-transp {
+      background: linear-gradient(to bottom, hsl($site-hue, 7%, 22), hsl($site-hue, 5%, 19) 100%);
     }
 
     border-radius: 100%;
@@ -83,10 +82,9 @@
     }
 
     &::after {
-      @if $theme == 'transp' {
-        background: linear-gradient(to bottom, hsl($c-site-hue, 7%, 25), hsl($c-site-hue, 5%, 22) 100%);
-      } @else {
-        @extend %metal;
+      @extend %metal;
+      @include if-transp {
+        background: linear-gradient(to bottom, hsl($site-hue, 7%, 22), hsl($site-hue, 5%, 19) 100%);
       }
       @include transition(margin);
     }
diff --git a/ui/common/css/form/_image.scss b/ui/common/css/form/_image.scss
index a73e7ad407a25..4f3e923f38cb0 100644
--- a/ui/common/css/form/_image.scss
+++ b/ui/common/css/form/_image.scss
@@ -1,7 +1,7 @@
 %image-preview-and-upload {
   @extend %flex-center;
-  padding: var(--box-padding);
-  gap: var(--box-padding);
+  padding: var(---box-padding);
+  gap: var(---box-padding);
   background: $c-bg-zebra;
   img,
   i {
diff --git a/ui/common/css/form/_ui-slider.scss b/ui/common/css/form/_ui-slider.scss
index ec535c03375f2..b13e53431ec8c 100644
--- a/ui/common/css/form/_ui-slider.scss
+++ b/ui/common/css/form/_ui-slider.scss
@@ -1,4 +1,4 @@
-$c-slider: mix($c-secondary, $c-bg-box, 90%) !default;
+$c-slider: $m-secondary_bg--mix-90 !default;
 $slider-width: 12px;
 
 .ui-slider {
@@ -19,7 +19,7 @@ $slider-width: 12px;
 .ui-widget-content {
   @extend %box-radius;
 
-  background: c-dimmer($c-slider, 70%);
+  background: $m-secondary_dimmer--mix-25;
 }
 
 .ui-slider-handle {
@@ -35,7 +35,7 @@ $slider-width: 12px;
   &:hover,
   &:active,
   &:focus {
-    box-shadow: 0 0 0 9px fade-out($c-slider, 0.85);
+    box-shadow: 0 0 0 9px $m-secondary--fade-85;
     outline: 0;
   }
 }
diff --git a/ui/common/css/header/_buttons.scss b/ui/common/css/header/_buttons.scss
index eb635d1bcccb6..8bc84148c77c8 100644
--- a/ui/common/css/header/_buttons.scss
+++ b/ui/common/css/header/_buttons.scss
@@ -10,19 +10,16 @@
 
   .link {
     @extend %top-icon;
-
-    /* we don't want a lighter dark font in the top gradient */
-    @if $theme == 'transp' {
+    color: $c-font;
+    @include if-transp {
       @extend %page-text;
-    } @else {
-      color: $c-font;
     }
 
     font-size: 1.1rem;
     padding: 0 0.7rem;
 
     &:hover {
-      color: $c-font-clearer;
+      color: $c-font-clearer !important;
     }
 
     span::before {
@@ -109,7 +106,7 @@
     }
 
     a:hover {
-      color: c-clearer($c-bad, 20%);
+      color: $m-bad_clearer--mix-80;
     }
   }
 
@@ -125,7 +122,7 @@
 
   &::after {
     @extend %data-icon;
-    color: c-dimmer($c-font, 15%);
+    color: $m-font_dimmer--mix-85;
     content: $licon-AccountCircle;
     font-size: 2rem;
   }
diff --git a/ui/common/css/header/_header.scss b/ui/common/css/header/_header.scss
index f728cf54058b0..2945741618361 100644
--- a/ui/common/css/header/_header.scss
+++ b/ui/common/css/header/_header.scss
@@ -19,29 +19,28 @@ body > header {
     z-index: z('above-link-overlay');
     top: 0;
     width: 100%;
-    padding: 0 var(--site-header-sticky-padding);
+    padding: 0 var(---site-header-sticky-padding);
     transition:
       transform $transition-duration ease-in-out,
       border-color $transition-duration ease-in-out;
 
-    @if $theme == 'transp' {
+    @include if-transp {
       @include back-blur(6px);
       background: hsla(0, 0, 60%, 0.14);
-    } @else {
+    }
+
+    @include if-not-transp {
       &.scrolled {
         z-index: z('site-header');
-        @if $theme == 'dark' {
-          border-color: black;
-        } @else {
-          border-color: hsl(0, 0%, 70%);
-        }
+        border-color: black;
+      }
+      border-bottom: 1px solid $m-body-gradient_bg-page--mix-50;
+      background-image: linear-gradient(to bottom, $c-body-gradient, $m-body-gradient_bg-page--mix-50 60px);
+    }
+    @include if-light {
+      &.scrolled {
+        border-color: hsl(0, 0%, 70%);
       }
-      border-bottom: 1px solid mix($c-body-gradient, $c-bg-page, 50%);
-      background-image: linear-gradient(
-        to bottom,
-        $c-body-gradient,
-        mix($c-body-gradient, $c-bg-page, 50%) 60px
-      );
     }
 
     &:hover {
diff --git a/ui/common/css/header/_title.scss b/ui/common/css/header/_title.scss
index 725cbc047785c..210621372e8c4 100644
--- a/ui/common/css/header/_title.scss
+++ b/ui/common/css/header/_title.scss
@@ -1,11 +1,10 @@
 .site-title {
-  @extend %base-font, %flex-center-nowrap;
+  @extend %base-font, %page-text-shadow, %flex-center-nowrap;
   padding: 0 1rem;
   margin-inline-start: 0.5rem;
   gap: 0.75rem;
   font-size: 25px;
   transform: translateY(-3px);
-  text-shadow: $text-shadow;
   color: $c-font;
 
   @include mq-topnav-hidden {
diff --git a/ui/common/css/header/_topnav-hidden.scss b/ui/common/css/header/_topnav-hidden.scss
index 985928d1e808c..a227284c3b0d8 100644
--- a/ui/common/css/header/_topnav-hidden.scss
+++ b/ui/common/css/header/_topnav-hidden.scss
@@ -101,7 +101,9 @@
   }
 
   #topnav {
-    @include back-blur(6px);
+    @include if-transp {
+      @include back-blur();
+    }
     display: flex;
     flex-flow: row wrap;
     position: fixed;
@@ -110,14 +112,11 @@
     @include inline-start(0);
     background: $c-bg-high;
 
-    -webkit-clip-path: inset(0 100% 0 0); // ios 12.x
-    clip-path: inset(0 100% 0 0);
-
+    transform: translateX(calc(-100% - 10px));
     @include if-rtl {
-      -webkit-clip-path: inset(0 0 0 100%);
-      clip-path: inset(0 0 0 100%);
+      transform: translateX(calc(100% + 10px));
     }
-    transition: clip-path 200ms;
+    transition: transform 200ms;
 
     padding-bottom: 1.2rem;
     overflow-y: auto;
@@ -146,6 +145,7 @@
     section {
       flex: 1 0 50%;
       margin-top: 1rem;
+      z-index: z('topnav');
 
       > a {
         font-size: 1.2em;
@@ -169,14 +169,13 @@
 
       a:active {
         background: $c-primary;
-        color: $c-primary-over;
+        color: $c-over;
       }
     }
 
     .topnav-toggle:checked ~ & {
       z-index: z('topnav');
-      -webkit-clip-path: inset(0 0 0 0); // ios 12.x
-      clip-path: inset(0 0 0 0);
+      transform: translateX(0);
       a {
         opacity: 1;
         transition: opacity 125ms ease-in-out 125ms;
diff --git a/ui/common/css/header/_topnav-visible.scss b/ui/common/css/header/_topnav-visible.scss
index bd5886a481e4a..72dfad61ca3ae 100644
--- a/ui/common/css/header/_topnav-visible.scss
+++ b/ui/common/css/header/_topnav-visible.scss
@@ -6,25 +6,30 @@
   }
 
   #topnav {
-    --nav-section: 26px;
-    --nav-section-hover: 35px;
+    ---nav-section: 26px;
+    ---nav-section-hover: 35px;
 
     @include mq-site-header-tall {
-      --nav-section: 48px;
-      --nav-section-hover: 53px;
+      ---nav-section: 48px;
+      ---nav-section-hover: 53px;
     }
 
     display: flex;
 
     section {
       position: relative;
-      height: var(--nav-section);
+      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;
-        text-shadow: $text-shadow;
         display: block;
-        height: var(--nav-section);
+        height: var(---nav-section);
         line-height: $site-header-height;
         padding: 0 0.7rem;
         text-transform: uppercase;
@@ -46,7 +51,7 @@
       box-shadow: 2px 5px 6px rgba(0, 0, 0, 0.3);
       border-radius: 0 3px 3px 3px;
       border-inline-start: 2px solid $c-primary;
-      @if $theme == 'transp' {
+      @include if-transp {
         @include back-blur();
       }
 
@@ -59,13 +64,17 @@
           background: $c-primary;
           &,
           &::after {
-            color: $c-primary-over;
+            color: $c-over;
           }
         }
 
         &:first-child {
           border-radius: 0 3px 0 0;
         }
+
+        &:last-child {
+          border-radius: 0 0 3px 1px;
+        }
       }
     }
 
@@ -77,7 +86,7 @@
     &.hover section:hover,
     section:active {
       > a {
-        height: var(--nav-section-hover);
+        height: var(---nav-section-hover);
         background: $c-bg-header-dropdown;
         color: $c-header-dropdown;
         border-color: $c-primary;
diff --git a/ui/common/css/layout/_base.scss b/ui/common/css/layout/_base.scss
index 625c8c826227c..c5120a56e78d7 100644
--- a/ui/common/css/layout/_base.scss
+++ b/ui/common/css/layout/_base.scss
@@ -2,25 +2,25 @@ $vp-min-width: 320px;
 $vp-max-width: 1200px;
 
 body {
-  --site-header-height: #{$site-header-short-height};
-  --site-header-margin: 0px;
-  --site-header-sticky-padding: calc((100vw - #{$site-header-sticky-max-width}) / 2);
-  --main-margin: 0px;
-  --sticky-gap: 0px;
-  --block-gap: 10px;
+  ---site-header-height: #{$site-header-short-height};
+  ---site-header-margin: 0px;
+  ---site-header-sticky-padding: calc((100vw - #{$site-header-sticky-max-width}) / 2);
+  ---main-margin: 0px;
+  ---sticky-gap: 0px;
+  ---block-gap: 10px;
 
   @include mq-site-header-tall {
-    --site-header-height: #{$site-header-tall-height};
-    --sticky-gap: 0.5vmin;
+    ---site-header-height: #{$site-header-tall-height};
+    ---sticky-gap: 0.5vmin;
   }
 
   &.header-margin {
-    --site-header-margin: 1em;
+    ---site-header-margin: 1em;
   }
 
   @media (min-width: at-least($small)) {
-    --main-margin: 1vw;
-    --block-gap: 15px;
+    ---main-margin: 1vw;
+    ---block-gap: 15px;
     margin-bottom: $block-gap;
   }
 }
@@ -28,8 +28,8 @@ body {
 #main-wrap {
   display: grid;
   grid-template-areas: '. . main . .';
-  grid-template-columns: $main-margin 1fr minmax(auto, var(--main-max-width)) 1fr $main-margin;
-  --main-max-width: #{$main-max-width};
+  grid-template-columns: $main-margin 1fr minmax(auto, var(---main-max-width)) 1fr $main-margin;
+  ---main-max-width: #{$main-max-width};
   margin-top: $site-header-margin;
 
   @include mq-sticky-header {
@@ -37,11 +37,11 @@ body {
   }
 
   &.full-screen {
-    --main-max-width: auto;
+    ---main-max-width: auto;
   }
 
   &.full-screen-force {
-    --main-max-width: 100%;
+    ---main-max-width: 100%;
   }
 
   @media (hover: none) {
diff --git a/ui/common/css/layout/_uniboard.scss b/ui/common/css/layout/_uniboard.scss
index 837e83a75eb3c..5954eeef51d06 100644
--- a/ui/common/css/layout/_uniboard.scss
+++ b/ui/common/css/layout/_uniboard.scss
@@ -1,24 +1,24 @@
 body {
-  --board-scale: 1;
+  ---board-scale: 1;
 
   @include mq-zoom-enabled {
-    // --zoom: 80; defined in the HTML, loaded from server
-    --board-scale: calc((var(--zoom) / 100) * 0.75 + 0.25);
+    // ---zoom: 80; defined in the HTML, loaded from server
+    ---board-scale: calc((var(---zoom) / 100) * 0.75 + 0.25);
   }
 
   // use old fallback values for browsers that don't support min()
-  --col2-uniboard-width: #{$col2-uniboard-fallback-width};
-  --col3-uniboard-width: #{$col3-uniboard-fallback-width};
+  ---col2-uniboard-width: #{$col2-uniboard-fallback-width};
+  ---col3-uniboard-width: #{$col3-uniboard-fallback-width};
 
   @supports (width: min(1px, 2px)) {
-    --col2-uniboard-width: #{$col2-uniboard-width};
-    --col3-uniboard-width: #{$col3-uniboard-width};
+    ---col2-uniboard-width: #{$col2-uniboard-width};
+    ---col3-uniboard-width: #{$col3-uniboard-width};
   }
 }
 
 @include mq-is-col1 {
   body {
-    --col1: 1;
+    ---col1: 1;
   }
 
   .main-board cg-board {
diff --git a/ui/common/css/theme/_dark.scss b/ui/common/css/theme/_dark.scss
deleted file mode 100644
index 52eed949675d4..0000000000000
--- a/ui/common/css/theme/_dark.scss
+++ /dev/null
@@ -1,117 +0,0 @@
-@import 'default';
-
-$theme: 'dark';
-$color-scheme: 'dark';
-$theme-light: false;
-$theme-dark: true;
-
-@function c-dimmer($color, $weight: 20%) {
-  @return mix(#000, $color, $weight);
-}
-
-@function c-clearer($color, $weight: 20%) {
-  @return mix(#fff, $color, $weight);
-}
-
-$c-bg-page: hsl($c-site-hue, 10%, 8%);
-$c-bg-high: hsl($c-site-hue, 7%, 14%);
-$c-bg-low: hsl($c-site-hue, 7%, 22%);
-
-/* even rows in list or tables, subtle shade of $c-bg-high */
-$c-bg-zebra: hsl($c-site-hue, 5%, 18%);
-$c-bg-zebra2: hsl($c-site-hue, 5%, 23%);
-
-$c-body-gradient: hsl($c-site-hue, 12%, 16%);
-
-$c-font: hsl(0, 0%, 73%);
-$c-font-dim: c-light($c-font, 60%);
-$c-font-dimmer: c-light($c-font, 42%);
-$c-font-clear: c-light($c-font, 80%);
-$c-font-clearer: c-light($c-font, 89%);
-$c-shade: c-light($c-font, 30%);
-$c-font-page: $c-font-dim;
-
-/* Primary: blue */
-$c-primary: hsl(209, 79%, 56%);
-$c-primary-dim: c-dimmer($c-primary, 15%);
-$c-primary-clear: c-clearer($c-primary);
-
-/* Secondary: green */
-$c-secondary: hsl(88, 62%, 37%);
-$c-secondary-dim: c-dimmer($c-secondary);
-$c-secondary-dimmer: c-dimmer($c-secondary, 40%);
-
-/* Brag: gold */
-$c-brag: hsl(37, 74%, 43%);
-
-/* Fancy: pink */
-$c-fancy: hsl(294, 62%, 48%);
-
-/* Good: green */
-$c-good: $c-secondary;
-$c-good-over: $c-secondary-over;
-
-/* Warn: orange */
-$c-warn: $c-brag;
-$c-warn-over: $c-brag-over;
-
-/* move error highlights */
-$c-inaccuracy: hsl(202, 78%, 62%);
-$c-mistake: hsl(41, 100%, 45%);
-$c-blunder: hsl(0, 69%, 60%);
-
-/* good move highlights */
-$c-good-move: hsl(130, 67%, 62%);
-$c-brilliant: hsl(129, 71%, 45%);
-$c-interesting: hsl(307, 80%, 70%);
-
-$c-link: $c-primary;
-$c-link-dim: $c-primary-dim;
-$c-link-clear: $c-primary-clear;
-$c-link-hover: c-clearer(saturate($c-primary, 100%), 25%);
-
-$c-bg-box: $c-bg-high;
-$c-bg-box-opaque: $c-bg-box;
-$c-bg-input: c-light($c-bg-page, 13%);
-$c-bg-variation: hsl($c-site-hue, 5%, 15%);
-
-$c-bg-popup: $c-bg-low;
-$c-popup: $c-font-clear;
-
-$c-bg-header-dropdown: $c-bg-popup;
-$c-header-dropdown: $c-popup;
-
-$c-bot: $c-fancy;
-
-$c-page-input: $c-bg-box;
-
-$c-border: hsl(0, 0%, 25%);
-$c-border-page: hsl(0, 0%, 22%);
-$border: $border-width $border-style $c-border;
-
-$c-font-shadow: black;
-$text-shadow: none;
-
-@mixin metal-bg {
-  background: linear-gradient(to bottom, hsl($c-site-hue, 7%, 22), hsl($c-site-hue, 5%, 19) 100%);
-}
-
-@mixin metal {
-  @include metal-bg;
-}
-
-@mixin metal-hover {
-  background: linear-gradient(to bottom, hsl($c-site-hue, 7%, 25), hsl($c-site-hue, 5%, 22) 100%);
-  color: $c-font-clear;
-}
-
-@mixin page-metal {
-  @include metal;
-}
-
-@mixin page-metal-hover {
-  @include metal-hover;
-}
-
-@mixin theme-style {
-}
diff --git a/ui/common/css/theme/_default.scss b/ui/common/css/theme/_default.scss
index 74ca2688753e4..060560c998128 100644
--- a/ui/common/css/theme/_default.scss
+++ b/ui/common/css/theme/_default.scss
@@ -1,156 +1,122 @@
-@import '../abstract/functions';
+@import 'gen/mix';
 
-/* Colors */
+// this may not import anything from outside common/css/colors
 
-@function c-dimmer($color, $weight: 17%) {
+@function _clear($color, $weight: 20%) {
   @return mix(#fff, $color, $weight);
 }
 
-@function c-clearer($color, $weight: 17%) {
+@function _dim($color, $weight: 20%) {
   @return mix(#000, $color, $weight);
 }
 
-@function set-alpha($color, $alpha) {
-  // set alpha channel if it already exists, add it if not
-  @return rgba(red($color), green($color), blue($color), $alpha);
-}
-
-$c-site-hue: 37;
-
-$c-bg-page: hsl($c-site-hue, 10%, 92%);
-
-// hsl(210, 17%, 95%)
-$c-bg-high: hsl(0, 0%, 100%);
-$c-bg-low: hsl(0, 0%, 89%);
-
-/* even rows in list or tables, subtle shade of $c-bg-high */
-$c-bg-zebra: hsl($c-site-hue, 12%, 96.5%);
-$c-bg-zebra2: hsl($c-site-hue, 12%, 92%);
+$site-hue: 37;
 
-$c-body-gradient: hsl($c-site-hue, 12%, 84%);
+/* top level $c-variables must be valid css format (rgba, hsla, hex) and are mixable by ui/build
+*/
 
-$c-font: hsl(0, 0%, 30%);
-$c-font-dim: c-light($c-font, 47%);
-$c-font-dimmer: c-light($c-font, 70%);
-$c-font-clear: c-light($c-font, 12%);
-$c-font-clearer: c-light($c-font, 0%);
-$c-shade: c-dimmer($c-font, 80%);
-$c-font-page: c-light($c-font, 37%);
-
-/* Primary: blue */
-$c-primary: hsl(209, 77%, 46%);
-$c-primary-dim: c-dimmer($c-primary);
-$c-primary-clear: c-clearer($c-primary);
-$c-primary-over: #fff;
-
-/* text over primary background */
-
-/* Secondary: green */
+$c-bg: hsl(37, 7%, 14%); // alias for $c-bg-high
+$c-bg-page: hsl(37, 10%, 8%);
+$c-bg-low: hsl(37, 7%, 22%);
+$c-bg-zebra: hsl(37, 5%, 18%);
+$c-bg-zebra2: hsl(37, 5%, 23%);
+$c-bg-popup: hsl(37, 7%, 22%);
+$c-body-gradient: hsl(37, 12%, 16%);
+$c-font: hsl(0, 0%, 73%);
+$c-primary: hsl(209, 79%, 56%);
 $c-secondary: hsl(88, 62%, 37%);
-$c-secondary-dim: c-dimmer($c-secondary);
-$c-secondary-dimmer: c-dimmer($c-secondary, 40%);
-$c-secondary-over: #fff;
-
-/* text over secondary background */
-
-/* Accent: orange */
 $c-accent: hsl(22, 100%, 42%);
-$c-accent-dim: c-dimmer($c-accent);
-$c-accent-faint: hsla(22, 100%, 42%, 0.4);
-$c-accent-clear: c-clearer($c-accent);
-$c-accent-over: #fff;
-
-/* text over accent background */
-
-/* Brag: gold */
-$c-brag: hsl(37, 74%, 48%);
-$c-brag-over: #fff;
-
-/* text over brag background */
-
-/* Error: red */
-$c-red: hsl(0, 60%, 50%);
-$c-error: $c-red;
-$c-error-over: #fff;
-
-/* text over brag background */
-
-/* Good: green */
-$c-good: $c-secondary;
-$c-good-over: $c-secondary-over;
-
-/* Warn: orange */
-$c-warn: $c-brag;
-$c-warn-over: $c-brag-over;
-
-/* Bad: red */
-$c-bad: $c-error;
-$c-bad-over: $c-error-over;
-
-/* Live: red */
-$c-live: $c-error;
-$c-live-over: $c-error-over;
-
-/* Heart: red */
-$c-heart: $c-error;
-$c-heart-over: $c-error-over;
-
-/* Fancy: pink */
-$c-fancy: hsl(294, 61%, 62%);
-$c-fancy-over: white;
-
-/* move error highlights */
-$c-inaccuracy: hsl(202, 78%, 40%);
-$c-mistake: hsl(41, 100%, 35%);
-$c-blunder: hsl(0, 68%, 50%);
-
-/* good move highlights */
-$c-good-move: hsl(130, 67%, 40%);
-$c-brilliant: hsl(129, 71%, 30%);
-$c-interesting: hsl(307, 80%, 59%);
-
-/* text over brag background */
-
-$c-link: $c-primary;
-$c-link-dim: $c-primary-dim;
-$c-link-clear: $c-primary-clear;
-$c-link-hover: c-clearer(saturate($c-primary, 100%), 35%);
-$c-link-over: $c-primary-over;
-
-$c-bg-box: $c-bg-high;
-$c-bg-box-opaque: $c-bg-box;
-$c-bg-input: c-light($c-bg-page, 98%);
-$c-bg-variation: $c-bg-zebra2;
-
-$c-border: hsl(0, 0%, 85%);
-$c-border-page: hsl(0, 0%, 80%);
-
-$c-page-mask: hsla(0, 0, 0%, 0.6);
-
-$c-bg-popup: $c-bg-high;
-$c-popup: $c-font;
-
-$c-bg-header-dropdown: $c-bg-popup;
-$c-header-dropdown: $c-popup;
-
-$c-font-shadow: white;
-$text-shadow: 0 1px 0 $c-font-shadow;
-
-$c-bot: $c-fancy;
-
-$c-page-input: $c-bg-low;
-
-/* Borders */
-
-$border-width: 1px;
-$border-style: solid;
-$border: $border-width $border-style $c-border;
-
-/* Shadows */
-
-$box-shadow:
-  0 2px 2px 0 rgba(0, 0, 0, 0.14),
-  0 3px 1px -2px rgba(0, 0, 0, 0.2),
-  0 1px 5px 0 rgba(0, 0, 0, 0.12);
-
-// $box-shadow: 0 2px 2px 0 rgba(0,0,0,.157);
+$c-bad: hsl(0, 60%, 50%);
+$c-brag: hsl(37, 74%, 43%);
+$c-clas: rgb(127, 90, 240);
+$c-shade: hsl(0, 0%, 30%);
+$c-inaccuracy: hsl(202, 78%, 62%);
+$c-mistake: hsl(41, 100%, 45%);
+$c-blunder: hsl(0, 69%, 60%);
+$c-good-move: hsl(130, 67%, 62%);
+$c-brilliant: hsl(129, 71%, 45%);
+$c-interesting: hsl(307, 80%, 70%);
+$c-dark: #333;
+$c-dimmer: #000;
+$c-clearer: #fff;
+
+/* shared-color-defs is the location for theme colors that share the same definition syntax.
+   note that many of the assigned values may depend on variables from the including scope and
+   therefore may differ between themes.
+*/
+@mixin shared-color-defs {
+  --c-bg: #{$c-bg};
+  --c-bg-box: #{$c-bg};
+  --c-bg-high: #{$c-bg};
+  --c-bg-low: #{$c-bg-low};
+  --c-bg-page: #{$c-bg-page};
+  --c-bg-zebra: #{$c-bg-zebra};
+  --c-bg-zebra2: #{$c-bg-zebra2};
+  --c-bg-popup: #{$c-bg-popup};
+  --c-bg-header-dropdown: #{$c-bg-popup};
+  --c-bg-input: #{change-color($c-bg-page, $lightness: 13%)};
+  --c-bg-variation: #{hsl($site-hue, 5%, 15%)};
+  --c-body-gradient: #{$c-body-gradient};
+  --c-font: #{$c-font};
+  --c-shade: #{$c-shade};
+  --c-dark: #{$c-dark};
+  --c-dimmer: #{$c-dimmer};
+  --c-clearer: #{$c-clearer};
+
+  --c-page-input: #{$c-bg};
+  --c-page-mask: hsla(0, 0%, 0%, 0.6);
+
+  --c-font-dim: #{change-color($c-font, $lightness: 60%)};
+  --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: #000;
+
+  --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: hsl(0, 0%, 25%);
+  --c-border-page: hsl(0, 0%, 22%);
+  --c-border-tour: #{mix(hsl(0, 0%, 22%), $c-bg-page, 50)};
+  --c-primary: #{$c-primary};
+  --c-primary-clear: #{_clear($c-primary)};
+  --c-secondary: #{$c-secondary};
+  --c-secondary-dim: #{_dim($c-secondary, 20%)};
+  --c-secondary-dimmer: #{_dim($c-secondary, 40%)};
+  --c-accent: #{$c-accent};
+  --c-link: #{$c-primary};
+  --c-link-dim: var(--c-primary-dim);
+  --c-link-clear: var(--c-primary-clear);
+  --c-over: #fff;
+  --c-brag: #{$c-brag};
+  --c-contours: #{mix($c-brag, $c-shade, 80%)};
+  --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-clas: #{$c-clas};
+  --c-clas-light: #{mix($c-clas, #fff, 86%)};
+  --c-bot: var(--c-fancy);
+  --c-good: #{$c-secondary};
+  --c-warn: #{$c-brag};
+  --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%)};
+  --c-tutor-bg: #{desaturate(mix($c-secondary, $c-bg, 80%), 10%)};
+  --c-inaccuracy: #{$c-inaccuracy};
+  --c-mistake: #{$c-mistake};
+  --c-blunder: #{$c-blunder};
+  --c-good-move: #{$c-good-move};
+  --c-brilliant: #{$c-brilliant};
+  --c-interesting: #{$c-interesting};
+}
diff --git a/ui/common/css/theme/_light.scss b/ui/common/css/theme/_light.scss
index 265a5c467f3d7..8a2a019eb417d 100644
--- a/ui/common/css/theme/_light.scss
+++ b/ui/common/css/theme/_light.scss
@@ -1,42 +1,62 @@
 @import 'default';
 
-$theme: 'light';
-$color-scheme: 'light';
-$theme-light: true;
-$theme-dark: false;
+// this may not import anything from outside common/css/colors
 
-@mixin metal-bg {
-  background: linear-gradient(to bottom, hsl(0, 0, 96) 0%, hsl(0, 0, 93) 100%);
+@function _clear($color, $weight: 17%) {
+  @return mix(#000, $color, $weight);
 }
 
-@mixin metal {
-  @include metal-bg;
-
-  text-shadow: $text-shadow;
-}
-
-@mixin metal-hover {
-  background: linear-gradient(to bottom, hsl(0, 0, 98) 0%, hsl(0, 0, 95) 100%);
-  text-shadow: $text-shadow;
-}
-
-@mixin page-metal {
-  background: linear-gradient(
-    to bottom,
-    mix($c-link, hsl(0, 0%, 100%), 20%) 0%,
-    mix($c-link, hsl(0, 0%, 94%), 20%) 100%
-  );
-  text-shadow: $text-shadow;
-}
-
-@mixin page-metal-hover {
-  background: linear-gradient(
-    to bottom,
-    mix($c-link, #fff, 25%) 0%,
-    mix($c-link, c-light($c-bg-page, 90%), 25%) 100%
-  );
-  text-shadow: $text-shadow;
+@function _dim($color, $weight: 17%) {
+  @return mix(#fff, $color, $weight);
 }
 
-@mixin theme-style {
+$c-bg: hsl(0, 0%, 100%); // alias for $c-bg-high
+$c-bg-page: hsl(37, 10%, 92%);
+$c-bg-low: hsl(0, 0%, 89%);
+$c-bg-zebra: hsl(37, 12%, 96.5%);
+$c-bg-zebra2: hsl(37, 12%, 92%);
+$c-body-gradient: hsl(37, 12%, 84%);
+$c-font: hsl(0, 0%, 30%);
+$c-primary: hsl(209, 77%, 46%);
+$c-brag: hsl(37, 74%, 48%);
+$c-shade: hsl(0, 0%, 84%);
+$c-inaccuracy: hsl(202, 78%, 40%);
+$c-mistake: hsl(41, 100%, 35%);
+$c-blunder: hsl(0, 68%, 50%);
+$c-good-move: hsl(130, 67%, 40%);
+$c-brilliant: hsl(129, 71%, 30%);
+$c-interesting: hsl(307, 80%, 59%);
+$c-dimmer: #fff;
+$c-clearer: #000;
+
+html.light {
+  @include shared-color-defs;
+
+  --c-bg-input: #{change-color($c-bg-page, $lightness: 98%)};
+  --c-bg-variation: #{$c-bg-zebra2};
+  --c-bg-popup: #{$c-bg};
+  --c-bg-header-dropdown: #{$c-bg};
+  --c-page-input: #{$c-bg-low};
+  --c-popup: #{$c-font};
+  --c-header-dropdown: #{$c-font};
+
+  --c-font-dim: #{change-color($c-font, $lightness: 47%)};
+  --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: hsl(0, 0%, 85%);
+  --c-border-page: hsl(0, 0%, 80%);
+  --c-border-tour: #{mix(hsl(0, 0%, 80%), $c-bg-page, 50)};
+
+  @include light-mix;
 }
diff --git a/ui/common/css/theme/_transp.scss b/ui/common/css/theme/_transp.scss
index 2693bf1ab7447..b9a3cb46448e9 100644
--- a/ui/common/css/theme/_transp.scss
+++ b/ui/common/css/theme/_transp.scss
@@ -1,70 +1,24 @@
-@import 'dark';
+@import 'default';
 
-$theme: 'transp';
-
-$c-bg-high: hsla(0, 0%, 0%, 0.6);
-$c-bg-low: hsla(0, 0%, 0%, 0.5);
+// this may not import anything from outside common/css/colors
 
 $c-font: hsl(0, 0%, 80%);
-$c-font-dim: c-light($c-font, 69%);
-$c-font-dimmer: c-light($c-font, 48%);
-$c-font-clear: c-light($c-font, 89%);
-$c-font-clearer: c-light($c-font, 97%);
-$c-font-page: $c-font-clearer;
-
-$c-bg-box: $c-bg-high;
+$c-bg: hsla(0, 0%, 0%, 0.6); // alias for $c-bg-high
+$c-bg-low: hsla(0, 0%, 0%, 0.5);
 $c-bg-zebra: hsla(0, 0%, 100%, 0.05);
-$c-bg-input: $c-bg-zebra;
-$c-bg-variation: hsla(0, 0%, 0%, 0.25);
-
-$c-bg-popup: $c-bg-high;
-
-$c-bg-header-dropdown: hsla(0, 0%, 0%, 0.75);
-
-$c-page-input: $c-bg-box;
-
-$text-shadow: 0.5px 1px 1px #000;
-
-%page-text-shadow {
-  text-shadow: $text-shadow;
-}
+$c-bg-popup: hsla(0, 0%, 0%, 0.6);
 
-%page-link-font {
-  color: $c-font-clearer;
-}
-
-@mixin metal-bg {
-  background: linear-gradient(to bottom, hsla(0, 0, 0, 0.4), hsla(0, 0, 0, 0.5) 100%);
-}
-
-@mixin metal {
-  @include metal-bg;
-}
+html.transp {
+  @include shared-color-defs;
 
-@mixin metal-hover {
-  background: linear-gradient(to bottom, hsla(0, 0, 0, 0.45), hsla(0, 0, 0, 0.55) 100%);
-}
-
-@mixin page-metal {
-  @include metal;
-}
-
-@mixin page-metal-hover {
-  @include metal-hover;
-}
+  --c-bg-input: #{$c-bg-low};
+  --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%)};
 
-@mixin theme-style {
-  body.transp {
-    &::before {
-      content: ' ';
-      position: fixed;
-      width: 100%;
-      height: 100%;
-      background-position: center center;
-      background-repeat: no-repeat;
-      background-size: cover;
-      will-change: transform;
-      z-index: -1;
-    }
-  }
+  @include transp-mix;
 }
diff --git a/ui/common/css/theme/readme.md b/ui/common/css/theme/readme.md
new file mode 100644
index 0000000000000..32a0f6ce966ad
--- /dev/null
+++ b/ui/common/css/theme/readme.md
@@ -0,0 +1,124 @@
+# IMPORTANT
+
+### If you're just seeing this for the first time, you probably want to run:
+
+```
+ui/build --update --clean
+```
+
+`--update` tells ui/build, which has recently acquired new capabilities, to update itself.
+`--clean` tells it to clean up the mess it made last time.
+
+## css variables vs scss variables
+
+- scss variables start with $ (dollar sign) and are compile-time macros. when the css is
+  generated, they're replaced by values and no longer exist.
+- css variables begin with -- (two or more hyphens) and exist at runtime. they are set and accessed by
+  the browser when it applies styles and can also be set and accessed by javascript.
+
+## how color themes work
+
+each partial scss file in the `ui/common/css/theme` directory describes a color theme. `_default.scss` is special though - in addition to defining the dark theme, it provides
+important definitions to other named themes (`_light.scss`, `_transp.scss`, ...).
+some (or all) of the included colors from `_default.scss` may be overridden by the named theme.
+
+all of your external style rules will still reference colors as scss variables. under the
+hood, they're generated wrappers defined in theme/gen/\_wrap.scss that look something like:
+
+```scss
+  $c-bg: var(--c-bg);
+  $c-primary: var(--c-primary);
+  ...
+  $m-bad_bg-zebra--mix-20: var(--m-bad_bg-zebra--mix-20);
+  $m-bad_bg-zebra2--mix-20: var(--m-bad_bg-zebra2--mix-20);
+  ... // and so on
+```
+
+### scss variables in theme files
+
+these are always prefixed by `$c-` define the base colors of a theme.
+
+currently, the values must be valid css color definitions (hsla, rgba, hex) and may not
+contain scss color functions.
+
+### mixable scss variables in your scss
+
+when the ui/build encounters a variable name
+starting with `$m-` and following the pattern
+
+```scss
+$m-<color-1>_<optional-color-2>--<operation>-<val>
+```
+
+it performs
+a mutation on the color(s) like the equivalent scss color function would, resulting in a new
+css/scss variable pair in `gen/_mix.scss` and `gen/_wrap.scss` respectively. you don't
+have to do anything special to make this happen aside from following the special syntax
+above within a style rule.
+
+for example, say we have $c-primary and $c-bg-zebra defined in a theme file. if ui/build
+encounters
+
+```scss
+background: $m-primary_bg-zebra--mix-40;
+```
+
+then the background will be set to
+a 40% mix of `$c-primary` with `$c-bg-zebra`.
+
+supported operations are `fade`, `mix`, `alpha`, and `lighten`. `val` is always between
+0 and 100 (where 100 represents either 100% or 1.0 depending on the function). other
+functions `saturate`, `desaturate` etc can be added to `ui/.build/src/sass.ts` if needed.
+
+### css variables
+
+these are not mixable at compile time. but we need them for all colors save ones that are
+auto-created by one of the mix operations described above.
+most of these css variables are defined by the `shared-color-defs` mixin in `_default.scss`.
+this mixin uses the scss variables of the including scope to inform most of the values.
+others, such as `--c-page-mask` are the same for all current themes and are just given
+an explicit value, but anything given a value in shared-color-defs can also be
+overridden by the including theme file. that's why the light and transp themes include
+the `shared-color-defs` mixin first thing in their selector block, so they can then
+override the values they want to change.
+
+## too long didn't read. give me an example
+
+here's a complete theme file:
+
+```scss
+// ugly theme
+@import 'default'; // for default defs and shared-color-defs mixin
+
+$c-font: #f00; // these are your tentpole colors
+$c-bg: #00f;
+$c-primary: #0f0; // anything you don't specify here will be inherited from default
+
+html.ugly {
+  // the 'ugly' class is added to the html element by the theme switcher
+  @include shared-color-defs;
+
+  --c-bg-variation: #f0f;
+  --c-bg-header-dropdown: #ff0;
+  --c-border: #0ff;
+
+  @include ugly-mix;
+  // ugly-mix is a mixin created by ui/build that contains color mixes specified
+  // elsewhere in your scss. these reflect the scss variable values above, so
+  // `background: $m-font_bg--mix-50;` will give a purple background
+}
+```
+
+elsewhere in your scss you can refer to $m-font_bg--mix-50 and that color will be generated
+from the $c-font and $c-bg colors you defined in the theme file.
+
+## how do i run this crap?
+
+same as before
+
+```
+ui/build -r
+```
+
+watch mode should keep everything in sync for you, but you might need to restart if
+you create a brand new file somewhere
diff --git a/ui/common/css/vendor/chessground/_board-2d.scss b/ui/common/css/vendor/chessground/_board-2d.scss
index 88096ab23457f..82c31e8a090a0 100644
--- a/ui/common/css/vendor/chessground/_board-2d.scss
+++ b/ui/common/css/vendor/chessground/_board-2d.scss
@@ -16,9 +16,9 @@
 
     @if $coord-color-white and $coord-color-black {
       coords {
-        --cg-ccw: #{$coord-color-white};
-        --cg-ccb: #{$coord-color-black};
-        --cg-cs: none;
+        ---cg-ccw: #{$coord-color-white};
+        ---cg-ccb: #{$coord-color-black};
+        ---cg-cs: none;
       }
     }
   }
diff --git a/ui/common/css/vendor/chessground/_board-3d.scss b/ui/common/css/vendor/chessground/_board-3d.scss
index 003f5f3d12581..aa557b4569ba9 100644
--- a/ui/common/css/vendor/chessground/_board-3d.scss
+++ b/ui/common/css/vendor/chessground/_board-3d.scss
@@ -70,9 +70,9 @@ cg-board::before {
 
     @if $coord-color-white and $coord-color-black {
       coords {
-        --cg-ccw: #{$coord-color-white};
-        --cg-ccb: #{$coord-color-black};
-        --cg-cs: none;
+        ---cg-ccw: #{$coord-color-white};
+        ---cg-ccb: #{$coord-color-black};
+        ---cg-cs: none;
       }
     }
   }
diff --git a/ui/common/css/vendor/chessground/_coords-colors.scss b/ui/common/css/vendor/chessground/_coords-colors.scss
index 703ba192c49cb..82af5e8d17409 100644
--- a/ui/common/css/vendor/chessground/_coords-colors.scss
+++ b/ui/common/css/vendor/chessground/_coords-colors.scss
@@ -2,19 +2,19 @@ $coord-color-default: #fff;
 $coord-shadow-default: 0 1px 2px #000;
 
 coords {
-  text-shadow: var(--cg-cs, $coord-shadow-default);
+  text-shadow: var(---cg-cs, $coord-shadow-default);
 }
 
 .orientation-white .files coord:nth-child(2n + 1),
 .orientation-white .ranks coord:nth-child(2n),
 .orientation-black .files coord:nth-child(2n),
 .orientation-black .ranks coord:nth-child(2n + 1) {
-  color: var(--cg-ccw, $coord-color-default);
+  color: var(---cg-ccw, $coord-color-default);
 }
 
 .orientation-white .files coord:nth-child(2n),
 .orientation-white .ranks coord:nth-child(2n + 1),
 .orientation-black .files coord:nth-child(2n + 1),
 .orientation-black .ranks coord:nth-child(2n) {
-  color: var(--cg-ccb, $coord-color-default);
+  color: var(---cg-ccb, $coord-color-default);
 }
diff --git a/ui/common/css/vendor/chessground/_dark-board.scss b/ui/common/css/vendor/chessground/_dark-board.scss
index c76200e2396b8..743188af6b8db 100644
--- a/ui/common/css/vendor/chessground/_dark-board.scss
+++ b/ui/common/css/vendor/chessground/_dark-board.scss
@@ -1,32 +1,30 @@
-@if $theme-dark {
-  body.dark-board {
-    --dark-factor: 0.4;
+html:not(.light) body.dark-board {
+  ---dark-factor: 0.4;
 
-    cg-board,
-    .is3d cg-board::before {
-      background-color: rgba(0, 0, 0, var(--dark-factor));
-      background-blend-mode: darken;
-    }
+  cg-board,
+  .is3d cg-board::before {
+    background-color: rgba(0, 0, 0, var(---dark-factor));
+    background-blend-mode: darken;
+  }
 
-    &.coords-in coord {
-      color: #fff !important;
-      opacity: calc(1 - var(--dark-factor));
-    }
+  &.coords-in coord {
+    color: #fff !important;
+    opacity: calc(1 - var(---dark-factor));
+  }
 
-    cg-board square {
-      opacity: calc(1 - var(--dark-factor));
-    }
+  cg-board square {
+    opacity: calc(1 - var(---dark-factor));
+  }
 
-    cg-board piece {
-      filter: brightness(calc(1 - 0.6 * var(--dark-factor)));
-    }
+  cg-board piece {
+    filter: brightness(calc(1 - 0.6 * var(---dark-factor)));
+  }
 
-    cg-board square.move-dest {
-      background: radial-gradient(rgba(8, 46, 8, 0.8) 19%, rgba(0, 0, 0, 0) 20%);
-    }
+  cg-board square.move-dest {
+    background: radial-gradient(rgba(8, 46, 8, 0.8) 19%, rgba(0, 0, 0, 0) 20%);
+  }
 
-    cg-board square.oc.move-dest {
-      background: radial-gradient(transparent 0%, transparent 79%, rgba(20, 85, 0, 0.3) 80%);
-    }
+  cg-board square.oc.move-dest {
+    background: radial-gradient(transparent 0%, transparent 79%, rgba(20, 85, 0, 0.3) 80%);
   }
 }
diff --git a/ui/common/package.json b/ui/common/package.json
index 9e74f5560bb37..4fa502ae7ca27 100644
--- a/ui/common/package.json
+++ b/ui/common/package.json
@@ -24,7 +24,7 @@
   "author": "Thibault Duplessis",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "lichess-pgn-viewer": "^2.0.1",
+    "lichess-pgn-viewer": "^2.1.0",
     "snabbdom": "3.5.1",
     "tablesort": "^5.3.0"
   }
diff --git a/ui/common/pnpm-lock.yaml b/ui/common/pnpm-lock.yaml
new file mode 100644
index 0000000000000..ad1be80bf574a
--- /dev/null
+++ b/ui/common/pnpm-lock.yaml
@@ -0,0 +1,83 @@
+lockfileVersion: '6.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+dependencies:
+  lichess-pgn-viewer:
+    specifier: ^2.0.1
+    version: 2.0.1
+  snabbdom:
+    specifier: 3.5.1
+    version: 3.5.1
+  tablesort:
+    specifier: ^5.3.0
+    version: 5.3.0
+
+packages:
+  /@badrap/result@0.2.13:
+    resolution:
+      {
+        integrity: sha512-Qvyzz0dmGY0h8pwvBFo1BznAKf5Y5NXIDiqhPALWtfU7oHbAToCtPu4FlYQ3uysskSWLx8GUiyhe0nv0nDd/7Q==,
+      }
+    dev: false
+
+  /@types/node@20.11.30:
+    resolution:
+      {
+        integrity: sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==,
+      }
+    dependencies:
+      undici-types: 5.26.5
+    dev: false
+
+  /chessground@9.0.4:
+    resolution:
+      {
+        integrity: sha512-KeZd/kcXSKQOGO6LOKu/3bAyVSMh7hgPPharMF15HMfNlHfcBpIVZIDAQRO2PNaNMzPWl0LKc05uFHt0D+lZGA==,
+      }
+    dev: false
+
+  /chessops@0.12.7:
+    resolution:
+      {
+        integrity: sha512-ylWwKOudgTNJCDq7vx/Rs9fkZwPB3CEk0AJ8NtAfEYOoA3DGRQdS/Z/oQRsnQvs92rUu0yEobn4ZIPzLh8y9/w==,
+      }
+    dependencies:
+      '@badrap/result': 0.2.13
+    dev: false
+
+  /lichess-pgn-viewer@2.0.1:
+    resolution:
+      {
+        integrity: sha512-WISw0/08RKQiv2gdAmIcdXNP9mg3e8Ybp31ORu9dKkl9+tRz2Q9Gx6efo5V29Pr+o6hUDTmjB7UFI1H+l4s9Ag==,
+      }
+    dependencies:
+      '@types/node': 20.11.30
+      chessground: 9.0.4
+      chessops: 0.12.7
+      snabbdom: 3.5.1
+    dev: false
+
+  /snabbdom@3.5.1:
+    resolution:
+      {
+        integrity: sha512-wHMNIOjkm/YNE5EM3RCbr/+DVgPg6AqQAX1eOxO46zYNvCXjKP5Y865tqQj3EXnaMBjkxmQA5jFuDpDK/dbfiA==,
+      }
+    engines: { node: '>=8.3.0' }
+    dev: false
+
+  /tablesort@5.3.0:
+    resolution:
+      {
+        integrity: sha512-WkfcZBHsp47gVH9CBHG0ZXopriG01IA87arGrchvIe868d4RiXVvoYPS1zMq9IdW05kBs5iGsqxTABqLyWonbg==,
+      }
+    dev: false
+
+  /undici-types@5.26.5:
+    resolution:
+      {
+        integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==,
+      }
+    dev: false
diff --git a/ui/common/src/isCol1.ts b/ui/common/src/isCol1.ts
index 7c215116b1fa4..0e45773fbadc7 100644
--- a/ui/common/src/isCol1.ts
+++ b/ui/common/src/isCol1.ts
@@ -13,7 +13,7 @@ export default function (): boolean {
           cache = 'rec';
         });
     }
-    cache = !!window.getComputedStyle(document.body).getPropertyValue('--col1');
+    cache = !!window.getComputedStyle(document.body).getPropertyValue('---col1');
   }
   return cache;
 }
diff --git a/ui/common/src/resize.ts b/ui/common/src/resize.ts
index 2bcf919bc3eeb..ba5f9eb67419c 100644
--- a/ui/common/src/resize.ts
+++ b/ui/common/src/resize.ts
@@ -30,7 +30,7 @@ export default function resizeHandle(
     const mousemoveEvent = start.type === 'touchstart' ? 'touchmove' : 'mousemove',
       mouseupEvent = start.type === 'touchstart' ? 'touchend' : 'mouseup',
       startPos = eventPosition(start)!,
-      initialZoom = parseInt(window.getComputedStyle(document.body).getPropertyValue('--zoom'));
+      initialZoom = parseInt(window.getComputedStyle(document.body).getPropertyValue('---zoom'));
     let zoom = initialZoom;
 
     const saveZoom = debounce(() => xhr.text(`/pref/zoom?v=${zoom}`, { method: 'post' }), 700);
@@ -41,7 +41,7 @@ export default function resizeHandle(
 
       zoom = Math.round(Math.min(100, Math.max(0, initialZoom + delta / 10)));
 
-      document.body.style.setProperty('--zoom', zoom.toString());
+      document.body.style.setProperty('---zoom', zoom.toString());
       window.dispatchEvent(new Event('resize'));
 
       saveZoom();
diff --git a/ui/coordinateTrainer/css/_layout.scss b/ui/coordinateTrainer/css/_layout.scss
index 9cf620f7379bc..9769452db344b 100644
--- a/ui/coordinateTrainer/css/_layout.scss
+++ b/ui/coordinateTrainer/css/_layout.scss
@@ -17,10 +17,10 @@
 }
 
 #main-wrap {
-  --main-max-width: calc(100vh - #{$site-header-outer-height});
+  ---main-max-width: calc(100vh - #{$site-header-outer-height});
 
   @include mq-at-least-col2 {
-    --main-max-width: auto;
+    ---main-max-width: auto;
   }
 }
 
@@ -58,7 +58,7 @@
   grid-row-gap: $block-gap;
 
   @include mq-at-least-col2 {
-    grid-template-columns: var(--col2-uniboard-width) $block-gap $col2-uniboard-table;
+    grid-template-columns: var(---col2-uniboard-width) $block-gap $col2-uniboard-table;
     grid-template-rows: fit-content(0);
     grid-template-areas:
       'board    . table'
@@ -74,7 +74,7 @@
       'side . progress . .'
       'side . co-input . .'
       'side . .        . .';
-    grid-template-columns: $col3-uniboard-side $block-gap var(--col3-uniboard-width) $block-gap $col3-uniboard-table;
+    grid-template-columns: $col3-uniboard-side $block-gap var(---col3-uniboard-width) $block-gap $col3-uniboard-table;
   }
 }
 
diff --git a/ui/coordinateTrainer/css/build/_coordinateTrainer.scss b/ui/coordinateTrainer/css/build/coordinateTrainer.scss
similarity index 100%
rename from ui/coordinateTrainer/css/build/_coordinateTrainer.scss
rename to ui/coordinateTrainer/css/build/coordinateTrainer.scss
diff --git a/ui/coordinateTrainer/css/build/gen/coordinateTrainer.dark.scss b/ui/coordinateTrainer/css/build/gen/coordinateTrainer.dark.scss
deleted file mode 100644
index c70fcb3b38a2d..0000000000000
--- a/ui/coordinateTrainer/css/build/gen/coordinateTrainer.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../coordinateTrainer';
diff --git a/ui/coordinateTrainer/css/build/gen/coordinateTrainer.light.scss b/ui/coordinateTrainer/css/build/gen/coordinateTrainer.light.scss
deleted file mode 100644
index 2d3ca3ccd8014..0000000000000
--- a/ui/coordinateTrainer/css/build/gen/coordinateTrainer.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../coordinateTrainer';
diff --git a/ui/coordinateTrainer/css/build/gen/coordinateTrainer.transp.scss b/ui/coordinateTrainer/css/build/gen/coordinateTrainer.transp.scss
deleted file mode 100644
index 18f72caff5fec..0000000000000
--- a/ui/coordinateTrainer/css/build/gen/coordinateTrainer.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../coordinateTrainer';
diff --git a/ui/coordinateTrainer/package.json b/ui/coordinateTrainer/package.json
index 4b827734b092b..d093eb9b71b2c 100644
--- a/ui/coordinateTrainer/package.json
+++ b/ui/coordinateTrainer/package.json
@@ -20,9 +20,7 @@
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "src/main.ts": "coordinateTrainer"
-      }
+      "src/coordinateTrainer.ts": "coordinateTrainer"
     }
   }
 }
diff --git a/ui/coordinateTrainer/src/main.ts b/ui/coordinateTrainer/src/coordinateTrainer.ts
similarity index 100%
rename from ui/coordinateTrainer/src/main.ts
rename to ui/coordinateTrainer/src/coordinateTrainer.ts
diff --git a/ui/dasher/css/_dasher.scss b/ui/dasher/css/_dasher.scss
index 223d7783e383a..c3ad324812576 100644
--- a/ui/dasher/css/_dasher.scss
+++ b/ui/dasher/css/_dasher.scss
@@ -84,7 +84,7 @@
 
     .current {
       background: $c-dasher !important;
-      color: $c-dasher-over !important;
+      color: $c-over !important;
       border-inline-start: none;
     }
 
@@ -95,7 +95,7 @@
 
       &:hover {
         background: $c-link;
-        color: $c-link-over;
+        color: $c-over;
       }
     }
   }
@@ -120,7 +120,7 @@
 
       &.active {
         background: $c-dasher !important;
-        color: $c-dasher-over !important;
+        color: $c-over !important;
       }
 
       &::before {
@@ -137,7 +137,7 @@
 
       &.active::before {
         opacity: 1;
-        color: $c-dasher-over !important;
+        color: $c-over !important;
       }
     }
 
@@ -228,7 +228,7 @@
     background-color: #000000bb;
 
     #images-viewport {
-      max-height: min(100vh - 450px, 30vh);
+      max-height: 30vh;
       overflow: hidden auto;
     }
 
diff --git a/ui/dasher/css/_link.scss b/ui/dasher/css/_link.scss
index 96018747e042c..a5b7eac6c8752 100644
--- a/ui/dasher/css/_link.scss
+++ b/ui/dasher/css/_link.scss
@@ -34,7 +34,7 @@
   .links button:hover,
   .subs .sub:hover {
     background: $c-dasher;
-    color: $c-dasher-over;
+    color: $c-over;
     opacity: 1;
   }
 
@@ -62,7 +62,7 @@
     }
 
     &:hover::before {
-      color: $c-dasher-over;
+      color: $c-over;
       opacity: 0.9;
     }
   }
diff --git a/ui/dasher/css/_piece.scss b/ui/dasher/css/_piece.scss
index cc24f5b634e6c..7d26ed17dba0e 100644
--- a/ui/dasher/css/_piece.scss
+++ b/ui/dasher/css/_piece.scss
@@ -33,7 +33,7 @@
     }
 
     .no-square.active {
-      background: fade-out($c-dasher, 0.3);
+      background: $m-secondary--fade-30;
     }
 
     piece {
diff --git a/ui/dasher/css/build/_dasher.scss b/ui/dasher/css/build/_dasher.scss
deleted file mode 100644
index bbc59c5c2fb14..0000000000000
--- a/ui/dasher/css/build/_dasher.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import '../../../common/css/plugin';
-@import '../../../common/css/form/range';
-$c-dasher: $c-secondary;
-$c-dasher-over: $c-secondary-over;
-$c-dasher-light: mix($c-dasher, $c-bg-header-dropdown, 40%);
-@import '../dasher';
diff --git a/ui/dasher/css/build/dasher.scss b/ui/dasher/css/build/dasher.scss
new file mode 100644
index 0000000000000..461b34a63cfb0
--- /dev/null
+++ b/ui/dasher/css/build/dasher.scss
@@ -0,0 +1,3 @@
+@import '../../../common/css/plugin';
+@import '../../../common/css/form/range';
+@import '../dasher';
diff --git a/ui/dasher/css/build/gen/dasher.dark.scss b/ui/dasher/css/build/gen/dasher.dark.scss
deleted file mode 100644
index 997e9500c6a2a..0000000000000
--- a/ui/dasher/css/build/gen/dasher.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../dasher';
diff --git a/ui/dasher/css/build/gen/dasher.light.scss b/ui/dasher/css/build/gen/dasher.light.scss
deleted file mode 100644
index 66f0cf5cbb2b4..0000000000000
--- a/ui/dasher/css/build/gen/dasher.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../dasher';
diff --git a/ui/dasher/css/build/gen/dasher.transp.scss b/ui/dasher/css/build/gen/dasher.transp.scss
deleted file mode 100644
index 511c74139b033..0000000000000
--- a/ui/dasher/css/build/gen/dasher.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../dasher';
diff --git a/ui/dasher/package.json b/ui/dasher/package.json
index f190470adef45..ca1b947c0dd95 100644
--- a/ui/dasher/package.json
+++ b/ui/dasher/package.json
@@ -5,17 +5,15 @@
   "description": "lichess.org multipurpose dropdown",
   "author": "Thibault Duplessis",
   "license": "AGPL-3.0-or-later",
-  "module": "dist/main.js",
-  "types": "dist/main.d.ts",
+  "module": "dist/dasher.js",
+  "types": "dist/dasher.d.ts",
   "dependencies": {
     "common": "workspace:*",
     "snabbdom": "3.5.1"
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "src/main.ts": "dasher"
-      }
+      "src/dasher.ts": "dasher"
     }
   }
 }
diff --git a/ui/dasher/src/background.ts b/ui/dasher/src/background.ts
index 467a07f073268..f7916fa1c82e4 100644
--- a/ui/dasher/src/background.ts
+++ b/ui/dasher/src/background.ts
@@ -5,7 +5,6 @@ import * as licon from 'common/licon';
 import { bind, onInsert, Redraw } from 'common/snabbdom';
 import * as xhr from 'common/xhr';
 import { throttlePromiseDelay } from 'common/throttle';
-import { supportsSystemTheme } from 'common/theme';
 
 export interface BackgroundData {
   current: string;
@@ -53,7 +52,7 @@ export class BackgroundCtrl {
     () => 700,
     (c: string) => {
       this.data.current = c;
-      applyBackground(this.data, this.list);
+      applyBackground(this.data);
       this.redraw();
       return xhr
         .text('/pref/bg', { body: xhr.form({ bg: c }), method: 'post' })
@@ -67,7 +66,7 @@ export class BackgroundCtrl {
       .textRaw('/pref/bgImg', { body: xhr.form({ bgImg: i }), method: 'post' })
       .then(res => (res.ok ? res.text() : Promise.reject(res.text())))
       .then(this.reloadAllTheThings, err => err.then(this.announceFail));
-    applyBackground(this.data, this.list);
+    applyBackground(this.data);
     this.redraw();
   };
 }
@@ -121,56 +120,22 @@ function imageInput(ctrl: BackgroundCtrl) {
   ]);
 }
 
-function applyBackground(data: BackgroundData, list: Background[]) {
+function applyBackground(data: BackgroundData) {
   const key = data.current;
-  const cls = key == 'transp' ? 'dark transp' : key == 'darkBoard' ? 'dark dark-board' : key;
-
-  $('body')
-    .removeClass([...list.map(b => b.key), 'dark-board'].join(' '))
-    .addClass(cls);
-
-  const prev = document.body.dataset.theme!;
-  const sheet = key == 'darkBoard' ? 'dark' : key;
-  document.body.dataset.theme = sheet;
-  if (prev === 'system') {
-    const active = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
-    const other = active === 'dark' ? 'light' : 'dark';
-    $('link[href*=".' + other + '."]').remove();
-    $('link[href*=".' + active + '."]').each(function (this: HTMLLinkElement) {
-      replaceStylesheet(this, active, sheet);
-    });
-  } else {
-    $('link[href*=".' + prev + '."]').each(function (this: HTMLLinkElement) {
-      if (sheet === 'system') {
-        if (supportsSystemTheme()) {
-          replaceStylesheet(this, prev, 'light', 'light');
-          replaceStylesheet(this, prev, 'dark', 'dark');
-        } else {
-          replaceStylesheet(this, prev, 'dark');
-        }
-      } else replaceStylesheet(this, prev, sheet);
-    });
-  }
+  document.body.dataset.theme = key === 'darkBoard' ? 'dark' : key;
+  document.documentElement.className =
+    key === 'system' ? (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark') : key;
 
   if (key === 'transp') {
     const bgData = document.getElementById('bg-data');
     bgData
-      ? (bgData.innerHTML = 'body.transp::before{background-image:url(' + data.image + ');}')
+      ? (bgData.innerHTML = 'html.transp::before{background-image:url(' + data.image + ');}')
       : $('head').append(
-          '<style id="bg-data">body.transp::before{background-image:url(' + data.image + ');}</style>',
+          '<style id="bg-data">html.transp::before{background-image:url(' + data.image + ');}</style>',
         );
   }
 }
 
-function replaceStylesheet(old: HTMLLinkElement, oldKey: string, newKey: string, media?: 'dark' | 'light') {
-  const link = document.createElement('link') as HTMLLinkElement;
-  link.rel = 'stylesheet';
-  link.href = old.href.replace('.' + oldKey + '.', '.' + newKey + '.');
-  if (media) link.media = `(prefers-color-scheme: ${media})`;
-  link.onload = () => setTimeout(() => old.remove(), 100);
-  document.head.insertBefore(link, document.getElementById('piece-sprite'));
-}
-
 function galleryInput(ctrl: BackgroundCtrl) {
   const urlId = (url: string) => url.replace(/[^\w]/g, '_');
 
@@ -188,8 +153,7 @@ function galleryInput(ctrl: BackgroundCtrl) {
   const width = cols * (160 + 2) + (gallery.images.length > cols * 4 ? elementScrollBarWidthSlowGuess() : 0);
 
   return h('div#gallery', { attrs: { style: `width: ${width}px` } }, [
-    h(
-      'div#images-viewport',
+    h('div#images-viewport', [
       h(
         'div#images-grid',
         { attrs: { style: `background-image: url(${montageUrl});` } },
@@ -199,18 +163,18 @@ function galleryInput(ctrl: BackgroundCtrl) {
           return h(`div#${urlId(assetUrl)}${divClass}`, { hook: bind('click', () => setImg(assetUrl)) });
         }),
       ),
-    ),
-    h('span#url', [
-      h('label', 'URL'),
-      h('input', {
-        attrs: { type: 'text', placeholder: 'https://', value: ctrl.data.image },
-        hook: onInsert((el: HTMLInputElement) =>
-          $(el).on(
-            'change keyup paste',
-            debounce(() => setImg(el.value.trim()), 300),
+      h('span#url', [
+        h('label', 'URL'),
+        h('input', {
+          attrs: { type: 'text', placeholder: 'https://', value: ctrl.data.image },
+          hook: onInsert((el: HTMLInputElement) =>
+            $(el).on(
+              'change keyup paste',
+              debounce(() => setImg(el.value.trim()), 300),
+            ),
           ),
-        ),
-      }),
+        }),
+      ]),
     ]),
   ]);
 }
diff --git a/ui/dasher/src/board.ts b/ui/dasher/src/board.ts
index 08ba3ed960c88..15770c2dadcf4 100644
--- a/ui/dasher/src/board.ts
+++ b/ui/dasher/src/board.ts
@@ -17,7 +17,7 @@ export class BoardCtrl {
     readonly close: Close,
   ) {}
 
-  readZoom = () => parseInt(window.getComputedStyle(document.body).getPropertyValue('--zoom'));
+  readZoom = () => parseInt(window.getComputedStyle(document.body).getPropertyValue('---zoom'));
 
   saveZoom = debounce(
     () =>
@@ -36,7 +36,7 @@ export class BoardCtrl {
   };
 
   setZoom = (v: number) => {
-    document.body.style.setProperty('--zoom', v.toString());
+    document.body.style.setProperty('---zoom', v.toString());
     window.dispatchEvent(new Event('resize'));
     this.redraw();
     this.saveZoom();
diff --git a/ui/dasher/src/ctrl.ts b/ui/dasher/src/ctrl.ts
new file mode 100644
index 0000000000000..59340e69360a5
--- /dev/null
+++ b/ui/dasher/src/ctrl.ts
@@ -0,0 +1,51 @@
+import { PingCtrl } from './ping';
+import { LangsCtrl } from './langs';
+import { SoundCtrl } from './sound';
+import { BackgroundCtrl } from './background';
+import { BoardCtrl } from './board';
+import { ThemeCtrl } from './theme';
+import { PieceCtrl } from './piece';
+import { Redraw } from 'common/snabbdom';
+import { DasherData, Mode } from './interfaces';
+import { Prop, prop } from 'common';
+
+const defaultMode = 'links';
+
+export class DasherCtrl {
+  trans: Trans;
+  ping: PingCtrl;
+  langs: LangsCtrl;
+  sound: SoundCtrl;
+  background: BackgroundCtrl;
+  board: BoardCtrl;
+  theme: ThemeCtrl;
+  piece: PieceCtrl;
+  opts = {
+    playing: $('body').hasClass('playing'),
+    zenable: $('body').hasClass('zenable'),
+  };
+
+  constructor(
+    readonly data: DasherData,
+    readonly redraw: Redraw,
+  ) {
+    this.trans = site.trans(data.i18n);
+    this.ping = new PingCtrl(this.trans, this.redraw);
+    const dimension = () => (this.data.board.is3d ? 'd3' : 'd2');
+    this.langs = new LangsCtrl(this.data.lang, this.trans, this.close);
+    this.sound = new SoundCtrl(this.data.sound.list, this.trans, this.redraw, this.close);
+    this.background = new BackgroundCtrl(this.data.background, this.trans, this.redraw, this.close);
+    this.board = new BoardCtrl(this.data.board, this.trans, this.redraw, this.close);
+    this.theme = new ThemeCtrl(this.data.theme, this.trans, dimension, this.redraw, this.close);
+    this.piece = new PieceCtrl(this.data.piece, this.trans, dimension, this.redraw, this.close);
+    site.pubsub.on('top.toggle.user_tag', () => this.setMode(defaultMode));
+  }
+
+  mode: Prop<Mode> = prop(defaultMode as Mode);
+
+  setMode = (m: Mode) => {
+    this.mode(m);
+    this.redraw();
+  };
+  close = () => this.setMode(defaultMode);
+}
diff --git a/ui/dasher/src/dasher.ts b/ui/dasher/src/dasher.ts
index d03c73acc3ad3..d7f32dbdcbe90 100644
--- a/ui/dasher/src/dasher.ts
+++ b/ui/dasher/src/dasher.ts
@@ -1,72 +1,39 @@
-import { PingCtrl } from './ping';
-import { LangsCtrl, LangsData } from './langs';
-import { SoundCtrl } from './sound';
-import { BackgroundCtrl, BackgroundData } from './background';
-import { BoardCtrl, BoardData } from './board';
-import { ThemeCtrl, ThemeData } from './theme';
-import { PieceCtrl, PieceData } from './piece';
 import { Redraw } from 'common/snabbdom';
-import { Prop, prop } from 'common';
+import { DasherCtrl } from './ctrl';
+import { loading, loaded } from './view';
+import * as xhr from 'common/xhr';
+import { init as initSnabbdom, VNode, classModule, attributesModule } from 'snabbdom';
 
-export interface DasherData {
-  user?: LightUser;
-  lang: LangsData;
-  sound: {
-    list: string[];
-  };
-  background: BackgroundData;
-  board: BoardData;
-  theme: ThemeData;
-  piece: PieceData;
-  coach: boolean;
-  streamer: boolean;
-  i18n: I18nDict;
-}
+const patch = initSnabbdom([classModule, attributesModule]);
 
-export type Mode = 'links' | 'langs' | 'sound' | 'background' | 'board' | 'theme' | 'piece';
+export function load() {
+  return site.asset.loadEsm<DasherCtrl>('dasher');
+}
 
-const defaultMode = 'links';
+export async function initModule() {
+  let vnode: VNode,
+    ctrl: DasherCtrl | undefined = undefined;
 
-export interface DasherOpts {
-  playing: boolean;
-  zenable: boolean;
-}
+  const $el = $('#dasher_app').html(`<div class="initiating">${site.spinnerHtml}</div>`);
+  const element = $el.empty()[0] as HTMLElement;
+  const toggle = $('#top .dasher')[0] as HTMLElement;
 
-export default class DasherCtrl {
-  trans: Trans;
-  ping: PingCtrl;
-  langs: LangsCtrl;
-  sound: SoundCtrl;
-  background: BackgroundCtrl;
-  board: BoardCtrl;
-  theme: ThemeCtrl;
-  piece: PieceCtrl;
-  opts = {
-    playing: $('body').hasClass('playing'),
-    zenable: $('body').hasClass('zenable'),
+  const redraw: Redraw = () => {
+    vnode = patch(vnode || element, ctrl ? loaded(ctrl) : loading());
   };
 
-  constructor(
-    readonly data: DasherData,
-    readonly redraw: Redraw,
-  ) {
-    this.trans = site.trans(data.i18n);
-    this.ping = new PingCtrl(this.trans, this.redraw);
-    const dimension = () => (this.data.board.is3d ? 'd3' : 'd2');
-    this.langs = new LangsCtrl(this.data.lang, this.trans, this.close);
-    this.sound = new SoundCtrl(this.data.sound.list, this.trans, this.redraw, this.close);
-    this.background = new BackgroundCtrl(this.data.background, this.trans, this.redraw, this.close);
-    this.board = new BoardCtrl(this.data.board, this.trans, this.redraw, this.close);
-    this.theme = new ThemeCtrl(this.data.theme, this.trans, dimension, this.redraw, this.close);
-    this.piece = new PieceCtrl(this.data.piece, this.trans, dimension, this.redraw, this.close);
-    site.pubsub.on('top.toggle.user_tag', () => this.setMode(defaultMode));
-  }
+  redraw();
 
-  mode: Prop<Mode> = prop(defaultMode as Mode);
+  const data = await xhr.json('/dasher');
+  ctrl = new DasherCtrl(data, redraw);
+  redraw();
 
-  setMode = (m: Mode) => {
-    this.mode(m);
-    this.redraw();
-  };
-  close = () => this.setMode(defaultMode);
+  new MutationObserver(_ => site.pubsub.emit('dasher.toggle', toggle.classList.contains('shown'))).observe(
+    toggle,
+    {
+      attributes: true,
+    },
+  );
+
+  return ctrl;
 }
diff --git a/ui/dasher/src/interfaces.ts b/ui/dasher/src/interfaces.ts
new file mode 100644
index 0000000000000..6f1cc24b742bb
--- /dev/null
+++ b/ui/dasher/src/interfaces.ts
@@ -0,0 +1,27 @@
+import { LangsData } from './langs';
+import { BackgroundData } from './background';
+import { BoardData } from './board';
+import { ThemeData } from './theme';
+import { PieceData } from './piece';
+
+export interface DasherData {
+  user?: LightUser;
+  lang: LangsData;
+  sound: {
+    list: string[];
+  };
+  background: BackgroundData;
+  board: BoardData;
+  theme: ThemeData;
+  piece: PieceData;
+  coach: boolean;
+  streamer: boolean;
+  i18n: I18nDict;
+}
+
+export type Mode = 'links' | 'langs' | 'sound' | 'background' | 'board' | 'theme' | 'piece';
+
+export interface DasherOpts {
+  playing: boolean;
+  zenable: boolean;
+}
diff --git a/ui/dasher/src/links.ts b/ui/dasher/src/links.ts
index 6a3a2d2116906..d03eaf7137fde 100644
--- a/ui/dasher/src/links.ts
+++ b/ui/dasher/src/links.ts
@@ -1,6 +1,7 @@
 import { Attrs, h, VNode } from 'snabbdom';
 import * as licon from 'common/licon';
-import DasherCtrl, { Mode } from './dasher';
+import { Mode } from './interfaces';
+import { DasherCtrl } from './ctrl';
 import { view as pingView } from './ping';
 import { bind } from 'common/snabbdom';
 
diff --git a/ui/dasher/src/main.ts b/ui/dasher/src/main.ts
deleted file mode 100644
index 7b153cf97df9f..0000000000000
--- a/ui/dasher/src/main.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Redraw } from 'common/snabbdom';
-import DasherCtrl from './dasher';
-import { loading, loaded } from './view';
-import * as xhr from 'common/xhr';
-import { init as initSnabbdom, VNode, classModule, attributesModule } from 'snabbdom';
-
-const patch = initSnabbdom([classModule, attributesModule]);
-
-export function load() {
-  return site.asset.loadEsm<DasherCtrl>('dasher');
-}
-
-export async function initModule() {
-  let vnode: VNode,
-    ctrl: DasherCtrl | undefined = undefined;
-
-  const $el = $('#dasher_app').html(`<div class="initiating">${site.spinnerHtml}</div>`);
-  const element = $el.empty()[0] as HTMLElement;
-  const toggle = $('#top .dasher')[0] as HTMLElement;
-
-  const redraw: Redraw = () => {
-    vnode = patch(vnode || element, ctrl ? loaded(ctrl) : loading());
-  };
-
-  redraw();
-
-  const data = await xhr.json('/dasher');
-  ctrl = new DasherCtrl(data, redraw);
-  redraw();
-
-  new MutationObserver(_ => site.pubsub.emit('dasher.toggle', toggle.classList.contains('shown'))).observe(
-    toggle,
-    {
-      attributes: true,
-    },
-  );
-
-  return ctrl;
-}
diff --git a/ui/dasher/src/view.ts b/ui/dasher/src/view.ts
index 45a617a133125..79336ed975062 100644
--- a/ui/dasher/src/view.ts
+++ b/ui/dasher/src/view.ts
@@ -1,7 +1,7 @@
 import { h, VNode } from 'snabbdom';
 import { spinnerVdom as spinner } from 'common/spinner';
 
-import DasherCtrl from './dasher';
+import { DasherCtrl } from './ctrl';
 import links from './links';
 import { view as langsView } from './langs';
 import { view as soundView } from './sound';
diff --git a/ui/dgt/package.json b/ui/dgt/package.json
index 9edb4387264d1..ffe87dfdb4e37 100644
--- a/ui/dgt/package.json
+++ b/ui/dgt/package.json
@@ -10,9 +10,7 @@
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "src/main.ts": "dgt"
-      }
+      "src/dgt.ts": "dgt"
     }
   }
 }
diff --git a/ui/dgt/src/main.ts b/ui/dgt/src/dgt.ts
similarity index 100%
rename from ui/dgt/src/main.ts
rename to ui/dgt/src/dgt.ts
diff --git a/ui/editor/css/_layout.scss b/ui/editor/css/_layout.scss
index cea2de55457b8..5fc4ef2fa16fc 100644
--- a/ui/editor/css/_layout.scss
+++ b/ui/editor/css/_layout.scss
@@ -1,9 +1,9 @@
 #main-wrap {
-  --main-max-width: auto;
+  ---main-max-width: auto;
 }
 
 .board-editor {
-  $board-width: calc((100vh - 4vmin) * var(--board-scale) * 0.8 - #{$site-header-outer-height});
+  $board-width: calc((100vh - 4vmin) * var(---board-scale) * 0.8 - #{$site-header-outer-height});
 
   display: grid;
   grid-template-columns: minmax(0, $board-width);
diff --git a/ui/editor/css/_spare.scss b/ui/editor/css/_spare.scss
index b0ff91c230f1f..7f2c91b127d8d 100644
--- a/ui/editor/css/_spare.scss
+++ b/ui/editor/css/_spare.scss
@@ -21,11 +21,11 @@
     @include transition;
 
     &:hover {
-      background: fade-out($c-primary, 0.8);
+      background: $m-primary--fade-80;
     }
 
     &.selected-square {
-      background: fade-out($c-primary, 0.5);
+      background: $m-primary--fade-50;
     }
 
     div {
@@ -36,11 +36,11 @@
       @extend %box-radius-left;
 
       &:hover {
-        background: fade-out($c-good, 0.8);
+        background: $m-secondary--fade-80;
       }
 
       &.selected-square {
-        background: fade-out($c-good, 0.4);
+        background: $m-secondary--fade-40;
       }
 
       piece {
@@ -52,11 +52,11 @@
       @extend %box-radius-right;
 
       &:hover {
-        background: fade-out($c-bad, 0.8);
+        background: $m-bad--fade-80;
       }
 
       &.selected-square {
-        background: fade-out($c-bad, 0.4);
+        background: $m-bad--fade-40;
       }
 
       piece {
diff --git a/ui/editor/css/build/_editor.scss b/ui/editor/css/build/editor.scss
similarity index 100%
rename from ui/editor/css/build/_editor.scss
rename to ui/editor/css/build/editor.scss
diff --git a/ui/editor/css/build/gen/editor.dark.scss b/ui/editor/css/build/gen/editor.dark.scss
deleted file mode 100644
index 9428e5d12c8f2..0000000000000
--- a/ui/editor/css/build/gen/editor.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../editor';
diff --git a/ui/editor/css/build/gen/editor.light.scss b/ui/editor/css/build/gen/editor.light.scss
deleted file mode 100644
index 69a86bdcf7d18..0000000000000
--- a/ui/editor/css/build/gen/editor.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../editor';
diff --git a/ui/editor/css/build/gen/editor.transp.scss b/ui/editor/css/build/gen/editor.transp.scss
deleted file mode 100644
index 2a3cac27292fd..0000000000000
--- a/ui/editor/css/build/gen/editor.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../editor';
diff --git a/ui/editor/package.json b/ui/editor/package.json
index 2ac3047576b02..6358a84961652 100644
--- a/ui/editor/package.json
+++ b/ui/editor/package.json
@@ -18,9 +18,7 @@
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "src/main.ts": "editor"
-      }
+      "src/editor.ts": "editor"
     }
   }
 }
diff --git a/ui/editor/src/main.ts b/ui/editor/src/editor.ts
similarity index 100%
rename from ui/editor/src/main.ts
rename to ui/editor/src/editor.ts
diff --git a/ui/game/css/_row.scss b/ui/game/css/_row.scss
index 0a1e977d85df2..81d3b733e41d7 100644
--- a/ui/game/css/_row.scss
+++ b/ui/game/css/_row.scss
@@ -13,7 +13,7 @@
   }
 
   &:hover {
-    background: mix($c-link, $c-bg-box, 20%);
+    background: $m-primary_bg--mix-20;
   }
 
   &__overlay {
diff --git a/ui/insight/css/_filters.scss b/ui/insight/css/_filters.scss
index 0ee835cb63994..a46085b43f0d3 100644
--- a/ui/insight/css/_filters.scss
+++ b/ui/insight/css/_filters.scss
@@ -15,12 +15,11 @@
     }
 
     &.selected .ms-choice {
-      $c-sel-ms-choice: fade-out($c-accent, 0.3);
-      @include gradient-border($c-sel-ms-choice, to right, to left);
+      @include gradient-border($m-accent--fade-30, to right, to left);
     }
 
     &:hover .ms-choice {
-      background: mix($c-accent, $c-bg-box, 20%);
+      background: $m-accent_bg--mix-20;
     }
   }
 
@@ -31,7 +30,7 @@
     @include transition;
 
     &.selected {
-      background: mix($c-link, $c-bg-box, 20%);
+      background: $m-primary_bg--mix-20;
       border-left: 3px solid $c-link;
     }
 
diff --git a/ui/insight/css/_insight.scss b/ui/insight/css/_insight.scss
index 90625ce14dd15..6cf06bd7bed78 100644
--- a/ui/insight/css/_insight.scss
+++ b/ui/insight/css/_insight.scss
@@ -2,9 +2,9 @@
 
 // formatting is also done in view.ts. if your changes aren't behaving as expected - check there!
 #insight {
-  --chart-height: 550px;
-  --header-height: 60px;
-  --drop-menu-width: 200px;
+  ---chart-height: 550px;
+  ---header-height: 60px;
+  ---drop-menu-width: 200px;
 
   > div {
     display: flex;
@@ -34,7 +34,7 @@
 
     &::after {
       content: '';
-      background: fade-out($c-accent, 0.4);
+      background: $m-accent--fade-40;
       height: 2px;
       position: absolute;
       width: 96%;
@@ -72,7 +72,7 @@
 
       top: 0;
       @include inline-start(0);
-      height: var(--chart-height);
+      height: var(---chart-height);
       opacity: 0.7;
 
       svg {
@@ -97,7 +97,7 @@
   }
 
   .chart {
-    height: var(--chart-height);
+    height: var(---chart-height);
   }
 
   .loading .chart {
@@ -127,18 +127,18 @@
     @extend %flex-between;
     padding: 0 1vw;
     flex-wrap: nowrap;
-    height: var(--header-height);
+    height: var(---header-height);
     background: #333;
     color: #ddd;
     h2 {
       font-size: vmax;
-      line-height: var(--header-height);
+      line-height: var(---header-height);
     }
 
     h2::before {
       font-size: vmax;
       vertical-align: top;
-      line-height: var(--header-height);
+      line-height: var(---header-height);
       margin: 0 10px;
     }
 
@@ -160,7 +160,7 @@
   }
 
   .axis-form {
-    height: var(--header-height);
+    height: var(---header-height);
     display: flex;
     flex-flow: row nowrap;
     flex: auto;
@@ -176,7 +176,7 @@
   }
 
   .axis-form .ms-choice {
-    padding: calc(var(--header-height) / 2) 10px;
+    padding: calc(var(---header-height) / 2) 10px;
     @media (max-width: at-most($xx-small)) {
       padding-left: 2px;
       padding-right: 2px;
@@ -187,17 +187,17 @@
   }
 
   .axis-form .ms-choice span {
-    line-height: var(--header-height);
+    line-height: var(---header-height);
     text-align: center;
   }
 
   .axis-form .ms-choice div {
-    top: calc(var(--header-height) / 2 - 12px);
+    top: calc(var(---header-height) / 2 - 12px);
   }
 
   .axis-form .ms-drop {
     color: $c-font;
-    width: var(--drop-menu-width);
+    width: var(---drop-menu-width);
 
     ul > li label input {
       display: none;
@@ -205,7 +205,7 @@
 
     ul > li.selected label {
       background: $c-accent;
-      color: $c-accent-over;
+      color: $c-over;
     }
   }
 
@@ -240,7 +240,7 @@
     }
 
     a:hover {
-      background: mix($c-accent, $c-bg-box, 20%);
+      background: $m-accent_bg--mix-20;
     }
 
     a:hover::before {
@@ -278,7 +278,7 @@
 
   .ms-drop {
     font-size: 0.9em;
-    max-height: calc(99vh - $site-header-height - var(--header-height));
+    max-height: calc(99vh - $site-header-height - var(---header-height));
     overflow-y: auto;
 
     ul {
@@ -296,7 +296,7 @@
     }
 
     ul > li label:not(.optgroup):hover {
-      background: mix($c-accent, $c-bg-box, 20%);
+      background: $m-accent_bg--mix-20;
     }
 
     ul > li label.optgroup {
@@ -398,7 +398,7 @@
       }
 
       &:hover {
-        background: mix($c-link, $c-bg-box, 20%);
+        background: $m-accent_bg--mix-20;
       }
     }
 
diff --git a/ui/insight/css/build/gen/insight.dark.scss b/ui/insight/css/build/gen/insight.dark.scss
deleted file mode 100644
index d75c61464456b..0000000000000
--- a/ui/insight/css/build/gen/insight.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../insight';
diff --git a/ui/insight/css/build/gen/insight.light.scss b/ui/insight/css/build/gen/insight.light.scss
deleted file mode 100644
index c96cd545e0d4e..0000000000000
--- a/ui/insight/css/build/gen/insight.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../insight';
diff --git a/ui/insight/css/build/gen/insight.transp.scss b/ui/insight/css/build/gen/insight.transp.scss
deleted file mode 100644
index ec40dbb979035..0000000000000
--- a/ui/insight/css/build/gen/insight.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../insight';
diff --git a/ui/insight/css/build/_insight.scss b/ui/insight/css/build/insight.scss
similarity index 100%
rename from ui/insight/css/build/_insight.scss
rename to ui/insight/css/build/insight.scss
diff --git a/ui/insight/package.json b/ui/insight/package.json
index b9cf4ae77859c..bdc056f7263ec 100644
--- a/ui/insight/package.json
+++ b/ui/insight/package.json
@@ -3,8 +3,6 @@
   "version": "2.0.0",
   "private": true,
   "description": "lichess.org chess insights",
-  "type": "module",
-  "module": "src/main.js",
   "keywords": [
     "chess",
     "lichess",
@@ -22,9 +20,7 @@
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "src/main.ts": "insight"
-      }
+      "src/insight.ts": "insight"
     }
   }
 }
diff --git a/ui/insight/src/axis.ts b/ui/insight/src/axis.ts
index 2368a01920db0..617a1b57b0b9c 100644
--- a/ui/insight/src/axis.ts
+++ b/ui/insight/src/axis.ts
@@ -5,7 +5,7 @@ import { Categ, Dimension, Metric } from './interfaces';
 
 const selectData = (onClick: (v: { value: string }) => void, getValue: () => string): VNodeData => ({
   hook: {
-    insert: vnode => $(vnode.elm).multipleSelect({ width: 'var(--drop-menu-width)', single: true, onClick }),
+    insert: vnode => $(vnode.elm).multipleSelect({ width: 'var(---drop-menu-width)', single: true, onClick }),
     update: vnode => $(vnode.elm).multipleSelect('setSelects', [getValue()]),
   },
 });
diff --git a/ui/insight/src/main.ts b/ui/insight/src/insight.ts
similarity index 100%
rename from ui/insight/src/main.ts
rename to ui/insight/src/insight.ts
diff --git a/ui/insight/src/view.ts b/ui/insight/src/view.ts
index e993b75aff0b0..a7b53d627067c 100644
--- a/ui/insight/src/view.ts
+++ b/ui/insight/src/view.ts
@@ -169,9 +169,9 @@ const containerStyle = () => ({
     // i would encrypt this if i could.  just look away
     style:
       ` width: ${availW()}px;` +
-      ` --header-height: ${interpolateBetween(mainW(), { x: 500, y: 30 }, { x: 800, y: 60 })}px;` +
-      ` --drop-menu-width: ${interpolateBetween(mainW(), { x: 320, y: 154 }, { x: 800, y: 200 })}px;` +
-      ` --chart-height: ${Math.max(300, Math.min(600, window.innerHeight - 100))}px;`,
+      ` ---header-height: ${interpolateBetween(mainW(), { x: 500, y: 30 }, { x: 800, y: 60 })}px;` +
+      ` ---drop-menu-width: ${interpolateBetween(mainW(), { x: 320, y: 154 }, { x: 800, y: 200 })}px;` +
+      ` ---chart-height: ${Math.max(300, Math.min(600, window.innerHeight - 100))}px;`,
   },
 });
 
diff --git a/ui/keyboardMove/css/_keyboardMove.scss b/ui/keyboardMove/css/_keyboardMove.scss
index 392d693ace6ac..b2514f7dd7121 100644
--- a/ui/keyboardMove/css/_keyboardMove.scss
+++ b/ui/keyboardMove/css/_keyboardMove.scss
@@ -13,7 +13,7 @@
 
     &.wrong {
       background: $c-bad;
-      color: $c-bad-over;
+      color: $c-over;
     }
   }
 
diff --git a/ui/keyboardMove/css/build/gen/keyboardMove.dark.scss b/ui/keyboardMove/css/build/gen/keyboardMove.dark.scss
deleted file mode 100644
index c35feebd33e9d..0000000000000
--- a/ui/keyboardMove/css/build/gen/keyboardMove.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../keyboardMove';
diff --git a/ui/keyboardMove/css/build/gen/keyboardMove.light.scss b/ui/keyboardMove/css/build/gen/keyboardMove.light.scss
deleted file mode 100644
index 742205f24866c..0000000000000
--- a/ui/keyboardMove/css/build/gen/keyboardMove.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../keyboardMove';
diff --git a/ui/keyboardMove/css/build/gen/keyboardMove.transp.scss b/ui/keyboardMove/css/build/gen/keyboardMove.transp.scss
deleted file mode 100644
index 93e1a0370c025..0000000000000
--- a/ui/keyboardMove/css/build/gen/keyboardMove.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../keyboardMove';
diff --git a/ui/keyboardMove/css/build/_keyboardMove.scss b/ui/keyboardMove/css/build/keyboardMove.scss
similarity index 100%
rename from ui/keyboardMove/css/build/_keyboardMove.scss
rename to ui/keyboardMove/css/build/keyboardMove.scss
diff --git a/ui/keyboardMove/package.json b/ui/keyboardMove/package.json
index e25e0e3365fe0..c91a1c3e60acc 100644
--- a/ui/keyboardMove/package.json
+++ b/ui/keyboardMove/package.json
@@ -4,8 +4,8 @@
   "private": true,
   "description": "lichess.org keyboard move",
   "type": "module",
-  "module": "dist/main.js",
-  "types": "dist/main.d.ts",
+  "module": "dist/keyboardMove.js",
+  "types": "dist/keyboardMove.d.ts",
   "keywords": [
     "chess",
     "lichess",
@@ -22,9 +22,7 @@
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "src/plugins/keyboardMove.ts": "keyboardMove"
-      }
+      "src/plugins/keyboard.move.ts": "keyboard.move"
     }
   }
 }
diff --git a/ui/keyboardMove/src/main.ts b/ui/keyboardMove/src/keyboardMove.ts
similarity index 98%
rename from ui/keyboardMove/src/main.ts
rename to ui/keyboardMove/src/keyboardMove.ts
index 1ffac143b9a5b..4ddd8802cb9ae 100644
--- a/ui/keyboardMove/src/main.ts
+++ b/ui/keyboardMove/src/keyboardMove.ts
@@ -4,7 +4,7 @@ import { onInsert } from 'common/snabbdom';
 import { promote } from 'chess/promotion';
 import { propWithEffect, Prop } from 'common';
 import { MoveRootCtrl, MoveUpdate } from 'chess/moveRootCtrl';
-import { load as loadKeyboardMove } from './plugins/keyboardMove';
+import { load as loadKeyboardMove } from './plugins/keyboard.move';
 import KeyboardChecker from './plugins/keyboardChecker';
 
 export type KeyboardMoveHandler = (fen: cg.FEN, dests?: cg.Dests, yourMove?: boolean) => void;
diff --git a/ui/keyboardMove/src/plugins/keyboardMove.test.ts b/ui/keyboardMove/src/plugins/keyboard.move.test.ts
similarity index 99%
rename from ui/keyboardMove/src/plugins/keyboardMove.test.ts
rename to ui/keyboardMove/src/plugins/keyboard.move.test.ts
index fe81a08d41b28..206209884ca11 100644
--- a/ui/keyboardMove/src/plugins/keyboardMove.test.ts
+++ b/ui/keyboardMove/src/plugins/keyboard.move.test.ts
@@ -1,6 +1,6 @@
 import { jest, beforeEach, describe, expect, test } from '@jest/globals';
 import { Prop, propWithEffect } from 'common';
-import { initModule as keyboardMove } from './keyboardMove';
+import { initModule as keyboardMove } from './keyboard.move';
 
 // Tips for working with this file:
 // - use https://lichess.org/editor to create positions and get their FENs
diff --git a/ui/keyboardMove/src/plugins/keyboardMove.ts b/ui/keyboardMove/src/plugins/keyboard.move.ts
similarity index 99%
rename from ui/keyboardMove/src/plugins/keyboardMove.ts
rename to ui/keyboardMove/src/plugins/keyboard.move.ts
index 6d82191be336a..3e35bf89bc537 100644
--- a/ui/keyboardMove/src/plugins/keyboardMove.ts
+++ b/ui/keyboardMove/src/plugins/keyboard.move.ts
@@ -1,6 +1,6 @@
 import { Dests, files } from 'chessground/types';
 import { sanWriter, SanToUci, destsToUcis } from 'chess';
-import { KeyboardMoveHandler, KeyboardMove } from '../main';
+import { KeyboardMoveHandler, KeyboardMove } from '../keyboardMove';
 
 const keyRegex = /^[a-h][1-8]$/;
 const fileRegex = /^[a-h]$/;
diff --git a/ui/learn/css/_layout.scss b/ui/learn/css/_layout.scss
index 641ed46129211..01e2163aae5de 100644
--- a/ui/learn/css/_layout.scss
+++ b/ui/learn/css/_layout.scss
@@ -1,8 +1,8 @@
 #main-wrap {
-  --main-max-width: calc(100vh - #{$site-header-outer-height} - 10rem);
+  ---main-max-width: calc(100vh - #{$site-header-outer-height} - 10rem);
 
   @include mq-at-least-col2 {
-    --main-max-width: auto;
+    ---main-max-width: auto;
   }
 }
 
@@ -34,7 +34,7 @@
 
   @include mq-at-least-col2 {
     &--run {
-      grid-template-columns: var(--col2-uniboard-width) $col2-uniboard-table;
+      grid-template-columns: var(---col2-uniboard-width) $col2-uniboard-table;
       grid-template-rows: fit-content(0);
       grid-template-areas: 'main table' 'side .';
     }
@@ -51,7 +51,7 @@
 
   @include mq-at-least-col3 {
     &--run {
-      grid-template-columns: $col3-uniboard-side var(--col3-uniboard-width) $col3-uniboard-table;
+      grid-template-columns: $col3-uniboard-side var(---col3-uniboard-width) $col3-uniboard-table;
       grid-template-areas: 'side main table';
     }
   }
diff --git a/ui/learn/css/_map.scss b/ui/learn/css/_map.scss
index c57c75404c2fe..1c7376aec5b16 100644
--- a/ui/learn/css/_map.scss
+++ b/ui/learn/css/_map.scss
@@ -2,25 +2,24 @@
   padding-top: 10px;
 
   .categ > h2 {
-    @extend %roboto;
+    @extend %roboto, %page-text-shadow;
 
     font-size: 2em;
     letter-spacing: 8px;
     text-transform: uppercase;
     color: #999;
-    text-shadow: $text-shadow;
     text-align: center;
   }
 
   .categ_stages {
-    --min-width: 100vw;
+    ---min-width: 100vw;
 
     @media (min-width: at-least($xx-small)) {
-      --min-width: 400px;
+      ---min-width: 400px;
     }
 
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(var(--min-width), 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(var(---min-width), 1fr));
     grid-gap: 1em;
     margin: 0.8em 0 3em 0;
   }
diff --git a/ui/learn/css/_side-home.scss b/ui/learn/css/_side-home.scss
index ad2bcf88513a0..255dc50bf4194 100644
--- a/ui/learn/css/_side-home.scss
+++ b/ui/learn/css/_side-home.scss
@@ -2,7 +2,7 @@
   @extend %box-neat;
 
   background: $c-primary;
-  color: $c-primary-over;
+  color: $c-over;
   text-align: center;
   padding: 1em 0;
 
diff --git a/ui/learn/css/_side-map.scss b/ui/learn/css/_side-map.scss
index c3674baa5f2c7..241f1f737b099 100644
--- a/ui/learn/css/_side-map.scss
+++ b/ui/learn/css/_side-map.scss
@@ -36,7 +36,7 @@
   }
 
   .categ > h2:hover {
-    background: fade-out($c-primary, 0.8);
+    background: $m-primary--fade-80;
   }
 
   .categ.active {
@@ -51,7 +51,7 @@
   .categ.active > h2 {
     cursor: default;
     background: $c-primary;
-    color: $c-primary-over;
+    color: $c-over;
   }
 
   .categ:not(.active) .categ_stages {
@@ -81,7 +81,7 @@
     }
 
     &.active {
-      background: fade-out($c-primary, 0.8);
+      background: $m-primary--fade-80;
     }
 
     &.active img {
@@ -89,7 +89,7 @@
     }
 
     &.done:hover {
-      background: fade-out($c-good, 0.8);
+      background: $m-secondary--fade-80;
     }
 
     &.done img {
@@ -97,7 +97,7 @@
     }
 
     &.future:hover {
-      background: fade-out($c-primary, 0.8);
+      background: $m-primary--fade-80;
     }
 
     &.future img {
diff --git a/ui/learn/css/_table.scss b/ui/learn/css/_table.scss
index 5b162ad66616e..5d0ea984ddc88 100644
--- a/ui/learn/css/_table.scss
+++ b/ui/learn/css/_table.scss
@@ -8,7 +8,7 @@
   .title {
     display: flex;
     background: $c-primary;
-    color: $c-primary-over;
+    color: $c-over;
 
     h2,
     h3 {
@@ -106,7 +106,7 @@
 
     &.completed {
       background: $c-good;
-      color: $c-good-over;
+      color: $c-over;
     }
 
     &.completed button {
@@ -115,7 +115,7 @@
 
     &.failed {
       background: $c-bad;
-      color: $c-bad-over;
+      color: $c-over;
     }
 
     &.failed button {
@@ -176,13 +176,13 @@
     }
 
     a.done {
-      color: $c-good-over;
+      color: $c-over;
       background: $c-good;
     }
 
     a.active {
       opacity: 1;
-      color: $c-primary-over;
+      color: $c-over;
       background: $c-primary;
     }
   }
diff --git a/ui/learn/css/build/gen/learn.dark.scss b/ui/learn/css/build/gen/learn.dark.scss
deleted file mode 100644
index 97a6ec5e68bb6..0000000000000
--- a/ui/learn/css/build/gen/learn.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../learn';
diff --git a/ui/learn/css/build/gen/learn.light.scss b/ui/learn/css/build/gen/learn.light.scss
deleted file mode 100644
index 15bf1df45d02c..0000000000000
--- a/ui/learn/css/build/gen/learn.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../learn';
diff --git a/ui/learn/css/build/gen/learn.transp.scss b/ui/learn/css/build/gen/learn.transp.scss
deleted file mode 100644
index 5c9d5f5290e05..0000000000000
--- a/ui/learn/css/build/gen/learn.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../learn';
diff --git a/ui/learn/css/build/_learn.scss b/ui/learn/css/build/learn.scss
similarity index 100%
rename from ui/learn/css/build/_learn.scss
rename to ui/learn/css/build/learn.scss
diff --git a/ui/learn/package.json b/ui/learn/package.json
index da7c2ead6b98c..b4039ecd51888 100644
--- a/ui/learn/package.json
+++ b/ui/learn/package.json
@@ -3,8 +3,6 @@
   "version": "2.0.0",
   "private": true,
   "description": "lichess.org chess performance statistics",
-  "type": "module",
-  "module": "src/main.js",
   "keywords": [
     "chess",
     "lichess",
@@ -21,9 +19,7 @@
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "src/main.ts": "learn"
-      }
+      "src/learn.ts": "learn"
     }
   }
 }
diff --git a/ui/learn/src/main.ts b/ui/learn/src/learn.ts
similarity index 100%
rename from ui/learn/src/main.ts
rename to ui/learn/src/learn.ts
diff --git a/ui/learn/src/map/mapMain.ts b/ui/learn/src/map/mapMain.ts
index a43e82b941ed9..281bdc7512453 100644
--- a/ui/learn/src/map/mapMain.ts
+++ b/ui/learn/src/map/mapMain.ts
@@ -2,7 +2,7 @@ import mapView from './mapView';
 import * as stages from '../stage/list';
 import * as scoring from '../score';
 import * as timeouts from '../timeouts';
-import { LearnOpts, LearnProgress } from '../main';
+import { LearnOpts, LearnProgress } from '../learn';
 
 export interface MapCtrl {
   opts: LearnOpts;
diff --git a/ui/learn/src/map/mapSide.ts b/ui/learn/src/map/mapSide.ts
index ff31cf9a10252..901c547bb5cf6 100644
--- a/ui/learn/src/map/mapSide.ts
+++ b/ui/learn/src/map/mapSide.ts
@@ -2,7 +2,7 @@ import m from '../mithrilFix';
 import * as util from '../util';
 import * as stages from '../stage/list';
 import * as scoring from '../score';
-import { LearnOpts, LearnProgress } from '../main';
+import { LearnOpts, LearnProgress } from '../learn';
 
 export interface SideCtrl {
   trans: Trans;
diff --git a/ui/learn/src/map/mapView.ts b/ui/learn/src/map/mapView.ts
index a28e9b2d57ae9..db28ea64565f8 100644
--- a/ui/learn/src/map/mapView.ts
+++ b/ui/learn/src/map/mapView.ts
@@ -4,7 +4,7 @@ import * as util from '../util';
 import * as scoring from '../score';
 import * as stages from '../stage/list';
 import { MapCtrl } from './mapMain';
-import { StageProgress } from '../main';
+import { StageProgress } from '../learn';
 
 function makeStars(nb: number) {
   const stars = [];
diff --git a/ui/learn/src/progress.ts b/ui/learn/src/progress.ts
index 8218338bafc8e..9970d54e9e315 100644
--- a/ui/learn/src/progress.ts
+++ b/ui/learn/src/progress.ts
@@ -2,7 +2,7 @@ import m from './mithrilFix';
 import { LevelCtrl } from './level';
 import * as scoring from './score';
 import { Level, Stage } from './stage/list';
-import { LearnProgress } from './main';
+import { LearnProgress } from './learn';
 
 const star = m('i[data-icon=]');
 
diff --git a/ui/learn/src/run/runCtrl.ts b/ui/learn/src/run/runCtrl.ts
index c4fc78b100122..59253b900e58a 100644
--- a/ui/learn/src/run/runCtrl.ts
+++ b/ui/learn/src/run/runCtrl.ts
@@ -4,7 +4,7 @@ import makeLevel, { LevelCtrl } from '../level';
 import { ctrl as makeProgress, Progress } from '../progress';
 import * as sound from '../sound';
 import * as timeouts from '../timeouts';
-import { LearnOpts } from '../main';
+import { LearnOpts } from '../learn';
 
 export interface Ctrl {
   opts: LearnOpts;
diff --git a/ui/learn/src/run/runMain.ts b/ui/learn/src/run/runMain.ts
index 4a43cfc56651e..393ef1c67a40d 100644
--- a/ui/learn/src/run/runMain.ts
+++ b/ui/learn/src/run/runMain.ts
@@ -1,4 +1,4 @@
-import { LearnOpts } from '../main';
+import { LearnOpts } from '../learn';
 import runCtrl from './runCtrl';
 import runView from './runView';
 
diff --git a/ui/learn/src/storage.ts b/ui/learn/src/storage.ts
index 1bbebacfe99d9..d58ddaaec7f06 100644
--- a/ui/learn/src/storage.ts
+++ b/ui/learn/src/storage.ts
@@ -1,4 +1,4 @@
-import { LearnProgress } from './main';
+import { LearnProgress } from './learn';
 import m from './mithrilFix';
 import { Stage } from './stage/list';
 
diff --git a/ui/lobby/css/_box.scss b/ui/lobby/css/_box.scss
index 59a284a3ae99d..ebad18c4e86a0 100644
--- a/ui/lobby/css/_box.scss
+++ b/ui/lobby/css/_box.scss
@@ -33,7 +33,6 @@
     }
 
     .user-link {
-      padding-inline-start: -1em;
       font-weight: bold;
       color: $c-font-dim;
     }
diff --git a/ui/lobby/css/_feed.scss b/ui/lobby/css/_feed.scss
index 5ca9a26835641..1f7127dc5dc22 100644
--- a/ui/lobby/css/_feed.scss
+++ b/ui/lobby/css/_feed.scss
@@ -1,5 +1,3 @@
-$c-contours: mix($c-brag, $c-shade, 80%);
-
 .lobby__feed {
   @extend %box-neat;
   @include hoverflow;
diff --git a/ui/lobby/css/_layout.scss b/ui/lobby/css/_layout.scss
index 00544dfdee063..fb26a5a5587ac 100644
--- a/ui/lobby/css/_layout.scss
+++ b/ui/lobby/css/_layout.scss
@@ -1,5 +1,5 @@
 .lobby {
-  --cols: 1; // ui/lobby/src/main.ts
+  ---cols: 1; // ui/lobby/src/main.ts
   grid-area: main;
   display: grid;
   grid-template-areas: 'app' 'table' 'side' 'blog' 'support' 'feed' 'tv' 'puzzle' 'tours' 'leader' 'winner' 'timeline' 'about';
@@ -22,7 +22,7 @@
   }
 
   @include mq-at-least-col2 {
-    --cols: 2; // ui/lobby/src/main.ts
+    ---cols: 2; // ui/lobby/src/main.ts
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: auto repeat(4, fit-content(0)) 20em;
     grid-template-areas:
@@ -45,7 +45,7 @@
   }
 
   @include mq-at-least-col3 {
-    --cols: 3; // ui/lobby/src/main.ts
+    ---cols: 3; // ui/lobby/src/main.ts
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: 12em repeat(2, fit-content(0)) auto fit-content(15em) repeat(2, fit-content(0)) minmax(
         0,
@@ -79,7 +79,7 @@
   }
 
   @include mq-at-least-col4 {
-    --cols: 4; // ui/lobby/src/main.ts
+    ---cols: 4; // ui/lobby/src/main.ts
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: repeat(2, fit-content(0)) auto repeat(6, fit-content(0));
     grid-template-areas:
diff --git a/ui/lobby/css/_lobby.scss b/ui/lobby/css/_lobby.scss
index f50f0757388d9..3c4fc0eed7691 100644
--- a/ui/lobby/css/_lobby.scss
+++ b/ui/lobby/css/_lobby.scss
@@ -16,7 +16,7 @@ body {
 }
 
 #main-wrap {
-  --main-max-width: 1400px;
+  ---main-max-width: 1400px;
 }
 
 %lobby__side__more {
diff --git a/ui/lobby/css/_setup.scss b/ui/lobby/css/_setup.scss
index 51cd5dbaa3a01..560e2079240c4 100644
--- a/ui/lobby/css/_setup.scss
+++ b/ui/lobby/css/_setup.scss
@@ -78,8 +78,8 @@ $c-slider: $c-setup;
   }
 
   .failure {
-    background: mix($c-bg-box, $c-bad, 80%);
-    box-shadow: 0 0 13px 6px mix($c-bg-box, $c-bad, 80%);
+    background: $m-bad_bg--mix-20;
+    box-shadow: 0 0 13px 6px $m-bad_bg--mix-20;
     border-radius: 0.5em;
   }
 
diff --git a/ui/lobby/css/_spotlight.scss b/ui/lobby/css/_spotlight.scss
index a59830a4ca5b1..21d96b925d6c1 100644
--- a/ui/lobby/css/_spotlight.scss
+++ b/ui/lobby/css/_spotlight.scss
@@ -5,7 +5,7 @@
 }
 
 .tour-spotlight {
-  @extend %flex-center-nowrap, %nowrap-hidden, %page-metal;
+  @extend %flex-center-nowrap, %page-text-shadow, %nowrap-hidden, %page-metal;
 
   flex: 0 0 auto;
   padding: 0.3em;
@@ -13,7 +13,6 @@
 
   @include transition;
 
-  text-shadow: $text-shadow;
   color: $c-font;
 
   &.invert,
@@ -38,13 +37,13 @@
     color: #fff;
     font-size: 42px;
 
-    @if $theme-light {
+    @include if-light {
       text-shadow: 1px 1px 2px $c-link;
     }
   }
 
   img.img.icon {
-    @if $theme-light {
+    @include if-light {
       filter: drop-shadow(1px 1px 1px $c-link);
     }
   }
diff --git a/ui/lobby/css/app/_app.scss b/ui/lobby/css/app/_app.scss
index d708353f4479f..6a702aa868b74 100644
--- a/ui/lobby/css/app/_app.scss
+++ b/ui/lobby/css/app/_app.scss
@@ -19,20 +19,17 @@
 
     flex: 1 1 100%;
     position: relative;
-
-    @if $theme == 'transp' {
-      background: fade-out($c-bg-box, 0.2);
-    } @else {
+    $logo-color: '383633';
+    background: $c-bg-box
+      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';
-
-      @if $theme-dark {
-        $logo-color: '383633';
-      }
-
       background: $c-bg-box
         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;
+    }
     background-size: 100% 100%;
     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 3406187802a68..9f1eafda45a49 100644
--- a/ui/lobby/css/app/_hook-chart.scss
+++ b/ui/lobby/css/app/_hook-chart.scss
@@ -6,12 +6,12 @@
   overflow: hidden;
 
   .label {
+    @extend %page-text-shadow;
     color: $c-font-dim;
     font-size: 0.7em;
     position: absolute;
     @include inline-start(3px);
     bottom: 1px;
-    text-shadow: $text-shadow;
     font-weight: bold;
   }
 
diff --git a/ui/lobby/css/app/_hook-filters.scss b/ui/lobby/css/app/_hook-filters.scss
index 4e76df093d83a..f5f9d2c0c6146 100644
--- a/ui/lobby/css/app/_hook-filters.scss
+++ b/ui/lobby/css/app/_hook-filters.scss
@@ -1,6 +1,6 @@
 .hook__filters {
   padding: $block-gap 1.5em;
-  background: fade-out($c-bg-high, 0.5);
+  background: $m-bg--fade-50;
   height: 100%;
   white-space: nowrap;
   display: block;
diff --git a/ui/lobby/css/app/_hook-list.scss b/ui/lobby/css/app/_hook-list.scss
index 4849e3ae6ea08..1b8491cc066be 100644
--- a/ui/lobby/css/app/_hook-list.scss
+++ b/ui/lobby/css/app/_hook-list.scss
@@ -13,11 +13,11 @@
     }
 
     &.cancel td {
-      background: fade-out($c-secondary, 0.6);
+      background: $m-secondary--fade-60;
     }
 
     &.join:hover td {
-      background: fade-out($c-accent, 0.5);
+      background: $m-accent--fade-50;
       color: #fff;
     }
 
@@ -76,7 +76,7 @@
     padding: 0.5em 0.7em;
     border-bottom: $border;
     cursor: pointer;
-    background: fade-out($c-bg-box, 0.5);
+    background: $m-bg--fade-50;
 
     &:first-child {
       width: 16px;
diff --git a/ui/lobby/css/app/_pool.scss b/ui/lobby/css/app/_pool.scss
index 056492aa0fcd9..fdfb119465b8f 100644
--- a/ui/lobby/css/app/_pool.scss
+++ b/ui/lobby/css/app/_pool.scss
@@ -17,10 +17,9 @@
     cursor: pointer;
     border: $border;
 
-    @if $theme-light {
-      background: fade-out($c-bg-box, 0.5);
-    } @else {
-      background: fade-out($c-font, 0.95);
+    background: $m-font--fade-95;
+    @include if-light {
+      background: $m-bg--fade-50;
     }
 
     color: $c-font;
@@ -28,15 +27,14 @@
     @include transition;
 
     &:hover {
-      background: fade-out($c-accent, 0.8);
+      background: $m-accent--fade-80 !important;
       opacity: 1;
     }
   }
 
   .active {
     @extend %popup-shadow;
-
-    background: $c-bg-popup;
+    @include back-blur(); // for all themes, not just transp
 
     .perf {
       display: none;
diff --git a/ui/lobby/css/build/gen/lobby.dark.scss b/ui/lobby/css/build/gen/lobby.dark.scss
deleted file mode 100644
index 61184ac65285e..0000000000000
--- a/ui/lobby/css/build/gen/lobby.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../lobby';
diff --git a/ui/lobby/css/build/gen/lobby.light.scss b/ui/lobby/css/build/gen/lobby.light.scss
deleted file mode 100644
index 3658b3eb20b5f..0000000000000
--- a/ui/lobby/css/build/gen/lobby.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../lobby';
diff --git a/ui/lobby/css/build/gen/lobby.setup.dark.scss b/ui/lobby/css/build/gen/lobby.setup.dark.scss
deleted file mode 100644
index 973843dfa412e..0000000000000
--- a/ui/lobby/css/build/gen/lobby.setup.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../lobby.setup';
diff --git a/ui/lobby/css/build/gen/lobby.setup.light.scss b/ui/lobby/css/build/gen/lobby.setup.light.scss
deleted file mode 100644
index 8168f5cb0d73f..0000000000000
--- a/ui/lobby/css/build/gen/lobby.setup.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../lobby.setup';
diff --git a/ui/lobby/css/build/gen/lobby.setup.transp.scss b/ui/lobby/css/build/gen/lobby.setup.transp.scss
deleted file mode 100644
index da863e4043b56..0000000000000
--- a/ui/lobby/css/build/gen/lobby.setup.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../lobby.setup';
diff --git a/ui/lobby/css/build/gen/lobby.transp.scss b/ui/lobby/css/build/gen/lobby.transp.scss
deleted file mode 100644
index 69610c2f66f2c..0000000000000
--- a/ui/lobby/css/build/gen/lobby.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../lobby';
diff --git a/ui/lobby/css/build/_lobby.scss b/ui/lobby/css/build/lobby.scss
similarity index 90%
rename from ui/lobby/css/build/_lobby.scss
rename to ui/lobby/css/build/lobby.scss
index fa9148ee97e3d..34e4488bb47e1 100644
--- a/ui/lobby/css/build/_lobby.scss
+++ b/ui/lobby/css/build/lobby.scss
@@ -6,5 +6,5 @@
 @import '../../../common/css/component/tabs-horiz';
 @import '../../../common/css/component/markdown';
 @import '../../../common/css/base/scrollbar';
-@import '../../../pagelets/css/ublog/card';
+@import '../../../bits/css/ublog/card';
 @import '../lobby';
diff --git a/ui/lobby/css/build/_lobby.setup.scss b/ui/lobby/css/build/lobby.setup.scss
similarity index 100%
rename from ui/lobby/css/build/_lobby.setup.scss
rename to ui/lobby/css/build/lobby.setup.scss
diff --git a/ui/lobby/package.json b/ui/lobby/package.json
index 4400eaf05195d..d30b670acbba8 100644
--- a/ui/lobby/package.json
+++ b/ui/lobby/package.json
@@ -3,8 +3,6 @@
   "version": "2.0.0",
   "private": true,
   "description": "lichess.org lobby",
-  "type": "module",
-  "module": "src/main.js",
   "keywords": [
     "chess",
     "lichess",
@@ -22,9 +20,7 @@
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "src/boot.ts": "lobby"
-      }
+      "src/lobby.ts": "lobby"
     }
   }
 }
diff --git a/ui/lobby/src/boot.ts b/ui/lobby/src/lobby.ts
similarity index 100%
rename from ui/lobby/src/boot.ts
rename to ui/lobby/src/lobby.ts
diff --git a/ui/lobby/src/main.ts b/ui/lobby/src/main.ts
index 51e27f2d1801e..b37dca48d907c 100644
--- a/ui/lobby/src/main.ts
+++ b/ui/lobby/src/main.ts
@@ -38,7 +38,7 @@ const layoutHacks = () => {
   cancelAnimationFrame(animationFrameId); // avoid more than one call per frame
   animationFrameId = requestAnimationFrame(() => {
     $('main.lobby').each(function (this: HTMLElement) {
-      const newCols = Number(window.getComputedStyle(this).getPropertyValue('--cols'));
+      const newCols = Number(window.getComputedStyle(this).getPropertyValue('---cols'));
       if (newCols != cols) {
         cols = newCols;
         if (cols > 2) $('.lobby .lobby__timeline').appendTo('.lobby__side');
diff --git a/ui/mod/package.json b/ui/mod/package.json
index d69f0e33bd60e..a1179c7ba1698 100644
--- a/ui/mod/package.json
+++ b/ui/mod/package.json
@@ -17,14 +17,12 @@
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "src/activity.ts": "mod.activity",
-        "src/user.ts": "mod.user",
-        "src/inquiry.ts": "mod.inquiry",
-        "src/games.ts": "mod.games",
-        "src/search.ts": "mod.search",
-        "src/teamAdmin.ts": "team.admin"
-      }
+      "src/mod.activity.ts": "mod.activity",
+      "src/mod.user.ts": "mod.user",
+      "src/mod.inquiry.ts": "mod.inquiry",
+      "src/mod.games.ts": "mod.games",
+      "src/mod.search.ts": "mod.search",
+      "src/mod.teamAdmin.ts": "mod.team.admin"
     }
   }
 }
diff --git a/ui/mod/src/activity.ts b/ui/mod/src/mod.activity.ts
similarity index 100%
rename from ui/mod/src/activity.ts
rename to ui/mod/src/mod.activity.ts
diff --git a/ui/mod/src/games.ts b/ui/mod/src/mod.games.ts
similarity index 100%
rename from ui/mod/src/games.ts
rename to ui/mod/src/mod.games.ts
diff --git a/ui/mod/src/inquiry.ts b/ui/mod/src/mod.inquiry.ts
similarity index 100%
rename from ui/mod/src/inquiry.ts
rename to ui/mod/src/mod.inquiry.ts
diff --git a/ui/mod/src/search.ts b/ui/mod/src/mod.search.ts
similarity index 100%
rename from ui/mod/src/search.ts
rename to ui/mod/src/mod.search.ts
diff --git a/ui/mod/src/teamAdmin.ts b/ui/mod/src/mod.teamAdmin.ts
similarity index 100%
rename from ui/mod/src/teamAdmin.ts
rename to ui/mod/src/mod.teamAdmin.ts
diff --git a/ui/mod/src/user.ts b/ui/mod/src/mod.user.ts
similarity index 100%
rename from ui/mod/src/user.ts
rename to ui/mod/src/mod.user.ts
diff --git a/ui/msg/css/_convo.scss b/ui/msg/css/_convo.scss
index 2a235879f63c4..df44d338e2c0a 100644
--- a/ui/msg/css/_convo.scss
+++ b/ui/msg/css/_convo.scss
@@ -116,7 +116,7 @@
 
         &.connected,
         &.connected:hover {
-          background: $c-msg;
+          background: $c-secondary;
         }
       }
     }
diff --git a/ui/msg/css/_convoMsgs.scss b/ui/msg/css/_convoMsgs.scss
index 1a194530b2484..dfa7d263d7976 100644
--- a/ui/msg/css/_convoMsgs.scss
+++ b/ui/msg/css/_convoMsgs.scss
@@ -44,7 +44,7 @@
     border-radius: 6px;
     box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
 
-    @if $theme-dark {
+    @include if-not-light {
       box-shadow: 0 1px 0.5px rgb(0, 0, 0);
     }
 
@@ -57,7 +57,7 @@
   day {
     @extend %roboto;
 
-    background: mix($c-primary, $c-bg-box, 15%);
+    background: $m-primary_bg--mix-15;
     align-self: center;
     font-size: 0.9em;
     color: $c-font;
@@ -66,7 +66,7 @@
 
   mine {
     align-self: flex-end;
-    background: mix($c-msg, $c-bg-box, 15%);
+    background: $m-secondary_bg--mix-15;
 
     &:first-child {
       border-top-right-radius: 0;
@@ -75,7 +75,7 @@
 
   their {
     align-self: flex-start;
-    background: mix($c-brag, $c-bg-box, 15%);
+    background: $m-brag_bg--mix-15;
 
     &:first-child {
       border-top-left-radius: 0;
diff --git a/ui/msg/css/_msg.scss b/ui/msg/css/_msg.scss
index 435924ab45c48..e8637c5fcf491 100644
--- a/ui/msg/css/_msg.scss
+++ b/ui/msg/css/_msg.scss
@@ -1,11 +1,10 @@
-$c-msg: $c-secondary;
 $msg-top-height: 4em;
 
 @import 'side';
 @import 'convo';
 
 body {
-  --app-height: 100vh;
+  ---app-height: 100vh;
   overflow: hidden;
 }
 
@@ -14,17 +13,17 @@ body {
   border-color: $c-bg-zebra2;
 
   &:focus {
-    border-color: mix($c-msg, $c-bg-box, 50%);
+    border-color: $m-secondary_bg--mix-50;
   }
 }
 
 .msg-app {
   display: flex;
   flex-flow: row nowrap;
-  height: calc(var(--app-height) - $site-header-height);
+  height: calc(var(---app-height) - $site-header-height);
 
   @media (min-width: at-least($small)) {
-    height: calc(var(--app-height) * 0.98 - $site-header-height);
+    height: calc(var(---app-height) * 0.98 - $site-header-height);
   }
 
   overflow: hidden;
diff --git a/ui/msg/css/_side.scss b/ui/msg/css/_side.scss
index 3d5587d1cddf8..1c1703a6aceea 100644
--- a/ui/msg/css/_side.scss
+++ b/ui/msg/css/_side.scss
@@ -56,12 +56,12 @@
       cursor: pointer;
 
       &:hover {
-        background: mix($c-msg, $c-bg-box, 15%);
+        background: $m-secondary_bg--mix-15;
       }
 
       &:active,
       &.active {
-        background: mix($c-msg, $c-bg-box, 30%);
+        background: $m-secondary_bg--mix-30;
       }
 
       .user-link {
diff --git a/ui/msg/css/build/gen/msg.dark.scss b/ui/msg/css/build/gen/msg.dark.scss
deleted file mode 100644
index 1d9640f17463a..0000000000000
--- a/ui/msg/css/build/gen/msg.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../msg';
diff --git a/ui/msg/css/build/gen/msg.light.scss b/ui/msg/css/build/gen/msg.light.scss
deleted file mode 100644
index 78f3c56a5d5c3..0000000000000
--- a/ui/msg/css/build/gen/msg.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../msg';
diff --git a/ui/msg/css/build/gen/msg.transp.scss b/ui/msg/css/build/gen/msg.transp.scss
deleted file mode 100644
index 5c74649cc14a4..0000000000000
--- a/ui/msg/css/build/gen/msg.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../msg';
diff --git a/ui/msg/css/build/_msg.scss b/ui/msg/css/build/msg.scss
similarity index 100%
rename from ui/msg/css/build/_msg.scss
rename to ui/msg/css/build/msg.scss
diff --git a/ui/msg/package.json b/ui/msg/package.json
index d9d69d0c2592a..7b5f88588b9db 100644
--- a/ui/msg/package.json
+++ b/ui/msg/package.json
@@ -11,9 +11,7 @@
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "src/main.ts": "msg"
-      }
+      "src/msg.ts": "msg"
     }
   }
 }
diff --git a/ui/msg/src/main.ts b/ui/msg/src/msg.ts
similarity index 87%
rename from ui/msg/src/main.ts
rename to ui/msg/src/msg.ts
index 30dc4af437104..3b00a8906877f 100644
--- a/ui/msg/src/main.ts
+++ b/ui/msg/src/msg.ts
@@ -9,7 +9,7 @@ import MsgCtrl from './ctrl';
 export function initModule(opts: MsgOpts) {
   const element = document.querySelector('.msg-app') as HTMLElement,
     patch = init([classModule, attributesModule]),
-    appHeight = () => document.body.style.setProperty('--app-height', `${window.innerHeight}px`);
+    appHeight = () => document.body.style.setProperty('---app-height', `${window.innerHeight}px`);
   window.addEventListener('resize', appHeight);
   appHeight();
   const ctrl = new MsgCtrl(upgradeData(opts.data), site.trans(opts.i18n), redraw);
diff --git a/ui/msg/src/view/enhance.ts b/ui/msg/src/view/enhance.ts
index 89017e2ce3590..8f72661889ecc 100644
--- a/ui/msg/src/view/enhance.ts
+++ b/ui/msg/src/view/enhance.ts
@@ -116,7 +116,7 @@ const expandGame = async (exp: Expandable) => {
   const $lpv = $('<div>');
   $(exp.element).parent().parent().addClass('has-embed');
   $(exp.element).replaceWith($('<div>').prepend($lpv));
-  await site.asset.loadEsm('lpv', {
+  await site.asset.loadEsm('bits.lpv', {
     init: { el: $lpv[0] as HTMLElement, url: exp.link.src, lpvOpts: exp.link.opts },
   });
   scroller.auto();
diff --git a/ui/notify/css/_notify.scss b/ui/notify/css/_notify.scss
index 14dc4913da0fc..3984cc33027a9 100644
--- a/ui/notify/css/_notify.scss
+++ b/ui/notify/css/_notify.scss
@@ -50,7 +50,7 @@
 
     &:not(.disabled):hover {
       background: $c-primary;
-      color: $c-primary-over;
+      color: $c-over;
     }
 
     &.prev {
@@ -62,7 +62,7 @@
     display: block;
     padding: 0.5em 1em;
     background: $c-brag;
-    color: $c-brag-over;
+    color: $c-over;
   }
 
   .content {
@@ -102,16 +102,15 @@
   }
 
   &.new {
-    background: mix($c-new, $c-bg-header-dropdown, 27%);
+    background: $m-secondary_bg-popup--mix-27;
 
     i {
-      color: $c-new;
+      color: $c-secondary;
       opacity: 0.7;
     }
 
     &:hover {
-      background: mix($c-new, $c-bg-header-dropdown, 36%);
-
+      background: $m-secondary_bg-popup--mix-36;
       i {
         opacity: 1;
       }
diff --git a/ui/notify/css/build/gen/notify.dark.scss b/ui/notify/css/build/gen/notify.dark.scss
deleted file mode 100644
index 4c773772e7c73..0000000000000
--- a/ui/notify/css/build/gen/notify.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../notify';
diff --git a/ui/notify/css/build/gen/notify.light.scss b/ui/notify/css/build/gen/notify.light.scss
deleted file mode 100644
index c86ef3b8b9481..0000000000000
--- a/ui/notify/css/build/gen/notify.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../notify';
diff --git a/ui/notify/css/build/gen/notify.transp.scss b/ui/notify/css/build/gen/notify.transp.scss
deleted file mode 100644
index 49ab01bdb6d4a..0000000000000
--- a/ui/notify/css/build/gen/notify.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../notify';
diff --git a/ui/notify/css/build/_notify.scss b/ui/notify/css/build/notify.scss
similarity index 100%
rename from ui/notify/css/build/_notify.scss
rename to ui/notify/css/build/notify.scss
diff --git a/ui/notify/package.json b/ui/notify/package.json
index 065de3154f06c..373ce8a04153e 100644
--- a/ui/notify/package.json
+++ b/ui/notify/package.json
@@ -11,9 +11,7 @@
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "src/main.ts": "notify"
-      }
+      "src/notify.ts": "notify"
     }
   }
 }
diff --git a/ui/notify/src/main.ts b/ui/notify/src/notify.ts
similarity index 100%
rename from ui/notify/src/main.ts
rename to ui/notify/src/notify.ts
diff --git a/ui/opening/css/_config.scss b/ui/opening/css/_config.scss
index 8efc9487608a4..b61f4e87b541c 100644
--- a/ui/opening/css/_config.scss
+++ b/ui/opening/css/_config.scss
@@ -20,8 +20,8 @@ $c-opcfg: $c-accent;
   }
   background: $c-bg-zebra;
   &:hover {
-    outline: 3px solid mix($c-opcfg, $c-bg-box, 60%);
-    background: mix($c-opcfg, $c-bg-zebra, 10%);
+    outline: 3px solid $m-accent_bg--mix-60;
+    background: $m-accent_bg-zebra--mix-10;
   }
   &__summary {
     padding: 1em 2em;
@@ -29,7 +29,7 @@ $c-opcfg: $c-accent;
     user-select: none;
     &__speed,
     &__rating {
-      color: $c-opcfg;
+      color: $c-accent;
     }
     &__large {
       display: none;
@@ -66,7 +66,7 @@ $c-opcfg: $c-accent;
       display: flex;
       justify-content: stretch;
       button {
-        color: $c-opcfg !important;
+        color: $c-accent !important;
         flex: 0 0 100%;
       }
     }
diff --git a/ui/opening/css/_next.scss b/ui/opening/css/_next.scss
index 8a20393106516..d0d99a9ed8b6e 100644
--- a/ui/opening/css/_next.scss
+++ b/ui/opening/css/_next.scss
@@ -8,13 +8,13 @@
     @extend %flex-column, %box-neat;
     background: $c-bg-zebra;
     position: relative;
-    outline: 3px solid mix($c-font, $c-bg-box, 30%);
+    outline: 3px solid $m-font_bg--mix-30;
     cursor: pointer;
     color: $c-font;
     &:hover {
-      outline: 3px solid mix($c-link, $c-bg-box, 60%);
-      background: mix($c-link, $c-bg-zebra, 10%);
-      box-shadow: 0 0 30px mix($c-link, $c-bg-box, 50%);
+      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;
       }
@@ -51,10 +51,9 @@
       }
       cg-board {
         box-shadow: none;
-        background-color: rgba($c-bg-box, 0.4);
-        @if $theme-dark {
-          background-blend-mode: darken;
-        } @else {
+        background-color: $m-bg--alpha-40;
+        background-blend-mode: darken;
+        @include if-light {
           background-blend-mode: soft-light;
         }
       }
@@ -71,7 +70,7 @@
       span {
         @extend %box-radius-bottom-right;
         background: $c-primary;
-        color: $c-primary-over;
+        color: $c-over;
         padding-right: 0.5em;
         font-size: 0.8em;
         text-align: right;
diff --git a/ui/opening/css/_opening.scss b/ui/opening/css/_opening.scss
index 33c3c3bac118d..52ca46e8900be 100644
--- a/ui/opening/css/_opening.scss
+++ b/ui/opening/css/_opening.scss
@@ -24,7 +24,7 @@
   }
   &__error {
     @extend %box-neat;
-    background: mix($c-error, $c-bg-box, 20%);
+    background: $m-bad_bg--mix-20;
     border: 1px solid $c-error;
     padding: 1em 2em;
   }
diff --git a/ui/opening/css/_panels.scss b/ui/opening/css/_panels.scss
index 02abbc0c30b14..7b969e5883af7 100644
--- a/ui/opening/css/_panels.scss
+++ b/ui/opening/css/_panels.scss
@@ -12,7 +12,7 @@ $c-op-panels: $c-brag;
       }
       padding: 0.4em 1em;
       &:hover {
-        background: mix($c-op-panels, $c-bg-box, 20%);
+        background: $m-brag_bg--mix-20;
       }
       &[aria-selected='true'] {
         background: $c-op-panels;
diff --git a/ui/opening/css/_result.scss b/ui/opening/css/_result.scss
index 693c4dc10b66a..42aab180c857f 100644
--- a/ui/opening/css/_result.scss
+++ b/ui/opening/css/_result.scss
@@ -9,30 +9,33 @@ $result-width: 2rem;
     overflow: hidden;
     vertical-align: middle;
     background-clip: padding-box;
-    border: 0 solid fade-out($c-font, 0.83);
+    border: 0 solid $m-font--fade-83;
     border-width: 1px 0;
     padding: 3px 0;
   }
 
   .white {
-    background: if($theme-light, #fff, #ccc);
-
-    @if $theme-dark {
+    background: #ccc;
+    @include if-light {
+      background: #fff;
+    }
+    @include if-not-light {
       color: #222;
     }
   }
 
-  .draws,
-  .black {
-    color: if($theme-light, #fff, #ddd);
-  }
-
   .draws {
-    background: if($theme-light, #a0a0a0, #666);
+    background: #666;
+    @include if-light {
+      background: #a0a0a0;
+    }
   }
 
   .black {
-    background: if($theme-light, #555, #333);
+    background: #333;
+    @include if-light {
+      background: #555;
+    }
     color: #ddd;
   }
 }
diff --git a/ui/opening/css/_search.scss b/ui/opening/css/_search.scss
index 148b2d898f1cc..64191b571877c 100644
--- a/ui/opening/css/_search.scss
+++ b/ui/opening/css/_search.scss
@@ -33,18 +33,18 @@
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
       grid-gap: $block-gap;
-      margin-bottom: var(--box-padding);
+      margin-bottom: var(---box-padding);
     }
     &__result {
       @extend %flex-column, %box-neat;
       background: $c-bg-zebra;
-      outline: 3px solid mix($c-font, $c-bg-box, 30%);
+      outline: 3px solid $m-font_bg--mix-30;
       cursor: pointer;
       color: $c-font;
       &:hover {
-        outline: 3px solid mix($c-link, $c-bg-box, 60%);
-        background: mix($c-link, $c-bg-zebra, 10%);
-        box-shadow: 0 0 30px mix($c-link, $c-bg-box, 50%);
+        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;
diff --git a/ui/opening/css/_tree.scss b/ui/opening/css/_tree.scss
index 695f3d5599077..e217dd1b670e2 100644
--- a/ui/opening/css/_tree.scss
+++ b/ui/opening/css/_tree.scss
@@ -23,7 +23,7 @@
         @extend %box-radius;
         padding: 1em 0 1em 1em;
         &:hover {
-          background: mix($c-primary, $c-bg-box, 20%);
+          background: $m-primary_bg--mix-20;
         }
       }
       > div,
@@ -42,7 +42,7 @@
           @extend %box-radius;
           padding: 0.5em 0 0.5em 1em;
           &:hover {
-            background: mix($c-primary, $c-bg-box, 20%);
+            background: $m-primary_bg--mix-20;
           }
         }
         > div,
@@ -57,7 +57,7 @@
           > summary {
             padding: 0.5em 0 0.5em 1em;
             &:hover {
-              background: mix($c-primary, $c-bg-box, 20%);
+              background: $m-primary_bg--mix-20;
             }
           }
           div,
diff --git a/ui/opening/css/build/gen/opening.dark.scss b/ui/opening/css/build/gen/opening.dark.scss
deleted file mode 100644
index 34d2b0e81b272..0000000000000
--- a/ui/opening/css/build/gen/opening.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../opening';
diff --git a/ui/opening/css/build/gen/opening.light.scss b/ui/opening/css/build/gen/opening.light.scss
deleted file mode 100644
index 8f84bac43a7ea..0000000000000
--- a/ui/opening/css/build/gen/opening.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../opening';
diff --git a/ui/opening/css/build/gen/opening.transp.scss b/ui/opening/css/build/gen/opening.transp.scss
deleted file mode 100644
index ebe7f5ff1dc0b..0000000000000
--- a/ui/opening/css/build/gen/opening.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../opening';
diff --git a/ui/opening/css/build/_opening.scss b/ui/opening/css/build/opening.scss
similarity index 100%
rename from ui/opening/css/build/_opening.scss
rename to ui/opening/css/build/opening.scss
diff --git a/ui/opening/package.json b/ui/opening/package.json
index 678cba44a848b..cdedfa5d046f5 100644
--- a/ui/opening/package.json
+++ b/ui/opening/package.json
@@ -12,13 +12,11 @@
     "common": "workspace:*",
     "dayjs": "^1.11.10",
     "debounce-promise": "^3.1.2",
-    "lichess-pgn-viewer": "^2.0.1"
+    "lichess-pgn-viewer": "^2.1.0"
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "src/main.ts": "opening"
-      }
+      "src/opening.ts": "opening"
     }
   }
 }
diff --git a/ui/opening/src/main.ts b/ui/opening/src/opening.ts
similarity index 100%
rename from ui/opening/src/main.ts
rename to ui/opening/src/opening.ts
diff --git a/ui/pagelets/css/build/gen/account.dark.scss b/ui/pagelets/css/build/gen/account.dark.scss
deleted file mode 100644
index a07f00ebb9ee6..0000000000000
--- a/ui/pagelets/css/build/gen/account.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../account';
diff --git a/ui/pagelets/css/build/gen/account.light.scss b/ui/pagelets/css/build/gen/account.light.scss
deleted file mode 100644
index 583d27455f394..0000000000000
--- a/ui/pagelets/css/build/gen/account.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../account';
diff --git a/ui/pagelets/css/build/gen/account.transp.scss b/ui/pagelets/css/build/gen/account.transp.scss
deleted file mode 100644
index 9638e9b426cd3..0000000000000
--- a/ui/pagelets/css/build/gen/account.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../account';
diff --git a/ui/pagelets/css/build/gen/appeal.dark.scss b/ui/pagelets/css/build/gen/appeal.dark.scss
deleted file mode 100644
index dbaedff8cf577..0000000000000
--- a/ui/pagelets/css/build/gen/appeal.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../appeal';
diff --git a/ui/pagelets/css/build/gen/appeal.light.scss b/ui/pagelets/css/build/gen/appeal.light.scss
deleted file mode 100644
index fee40fc191170..0000000000000
--- a/ui/pagelets/css/build/gen/appeal.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../appeal';
diff --git a/ui/pagelets/css/build/gen/appeal.transp.scss b/ui/pagelets/css/build/gen/appeal.transp.scss
deleted file mode 100644
index 4b08ed7fcf107..0000000000000
--- a/ui/pagelets/css/build/gen/appeal.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../appeal';
diff --git a/ui/pagelets/css/build/gen/auth.dark.scss b/ui/pagelets/css/build/gen/auth.dark.scss
deleted file mode 100644
index aa2d51704e367..0000000000000
--- a/ui/pagelets/css/build/gen/auth.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../auth';
diff --git a/ui/pagelets/css/build/gen/auth.light.scss b/ui/pagelets/css/build/gen/auth.light.scss
deleted file mode 100644
index 3135d3e3c4809..0000000000000
--- a/ui/pagelets/css/build/gen/auth.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../auth';
diff --git a/ui/pagelets/css/build/gen/auth.transp.scss b/ui/pagelets/css/build/gen/auth.transp.scss
deleted file mode 100644
index 664a9a3cd09ff..0000000000000
--- a/ui/pagelets/css/build/gen/auth.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../auth';
diff --git a/ui/pagelets/css/build/gen/board-3d.dark.scss b/ui/pagelets/css/build/gen/board-3d.dark.scss
deleted file mode 100644
index fdbd7af31b364..0000000000000
--- a/ui/pagelets/css/build/gen/board-3d.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../board-3d';
diff --git a/ui/pagelets/css/build/gen/board-3d.light.scss b/ui/pagelets/css/build/gen/board-3d.light.scss
deleted file mode 100644
index 05f2342ba9443..0000000000000
--- a/ui/pagelets/css/build/gen/board-3d.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../board-3d';
diff --git a/ui/pagelets/css/build/gen/board-3d.transp.scss b/ui/pagelets/css/build/gen/board-3d.transp.scss
deleted file mode 100644
index 3f4e951e68e8a..0000000000000
--- a/ui/pagelets/css/build/gen/board-3d.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../board-3d';
diff --git a/ui/pagelets/css/build/gen/bot.list.dark.scss b/ui/pagelets/css/build/gen/bot.list.dark.scss
deleted file mode 100644
index 31a8d703dcaa3..0000000000000
--- a/ui/pagelets/css/build/gen/bot.list.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../bot.list';
diff --git a/ui/pagelets/css/build/gen/bot.list.light.scss b/ui/pagelets/css/build/gen/bot.list.light.scss
deleted file mode 100644
index 667cd21f7d706..0000000000000
--- a/ui/pagelets/css/build/gen/bot.list.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../bot.list';
diff --git a/ui/pagelets/css/build/gen/bot.list.transp.scss b/ui/pagelets/css/build/gen/bot.list.transp.scss
deleted file mode 100644
index 48b30a03209a6..0000000000000
--- a/ui/pagelets/css/build/gen/bot.list.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../bot.list';
diff --git a/ui/pagelets/css/build/gen/clas.dark.scss b/ui/pagelets/css/build/gen/clas.dark.scss
deleted file mode 100644
index c4a8bf175ab7c..0000000000000
--- a/ui/pagelets/css/build/gen/clas.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../clas';
diff --git a/ui/pagelets/css/build/gen/clas.light.scss b/ui/pagelets/css/build/gen/clas.light.scss
deleted file mode 100644
index 291556be7c98f..0000000000000
--- a/ui/pagelets/css/build/gen/clas.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../clas';
diff --git a/ui/pagelets/css/build/gen/clas.transp.scss b/ui/pagelets/css/build/gen/clas.transp.scss
deleted file mode 100644
index 298104eec8256..0000000000000
--- a/ui/pagelets/css/build/gen/clas.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../clas';
diff --git a/ui/pagelets/css/build/gen/cms.dark.scss b/ui/pagelets/css/build/gen/cms.dark.scss
deleted file mode 100644
index f188d91f0481c..0000000000000
--- a/ui/pagelets/css/build/gen/cms.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../cms';
diff --git a/ui/pagelets/css/build/gen/cms.light.scss b/ui/pagelets/css/build/gen/cms.light.scss
deleted file mode 100644
index ec0972f1c1575..0000000000000
--- a/ui/pagelets/css/build/gen/cms.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../cms';
diff --git a/ui/pagelets/css/build/gen/cms.transp.scss b/ui/pagelets/css/build/gen/cms.transp.scss
deleted file mode 100644
index ad7d709e721e3..0000000000000
--- a/ui/pagelets/css/build/gen/cms.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../cms';
diff --git a/ui/pagelets/css/build/gen/coach.dark.scss b/ui/pagelets/css/build/gen/coach.dark.scss
deleted file mode 100644
index cd56e11115962..0000000000000
--- a/ui/pagelets/css/build/gen/coach.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../coach';
diff --git a/ui/pagelets/css/build/gen/coach.editor.dark.scss b/ui/pagelets/css/build/gen/coach.editor.dark.scss
deleted file mode 100644
index fa368f4d93153..0000000000000
--- a/ui/pagelets/css/build/gen/coach.editor.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../coach.editor';
diff --git a/ui/pagelets/css/build/gen/coach.editor.light.scss b/ui/pagelets/css/build/gen/coach.editor.light.scss
deleted file mode 100644
index 57917cbe71c89..0000000000000
--- a/ui/pagelets/css/build/gen/coach.editor.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../coach.editor';
diff --git a/ui/pagelets/css/build/gen/coach.editor.transp.scss b/ui/pagelets/css/build/gen/coach.editor.transp.scss
deleted file mode 100644
index 9758fba1e7cec..0000000000000
--- a/ui/pagelets/css/build/gen/coach.editor.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../coach.editor';
diff --git a/ui/pagelets/css/build/gen/coach.light.scss b/ui/pagelets/css/build/gen/coach.light.scss
deleted file mode 100644
index a3646acf00726..0000000000000
--- a/ui/pagelets/css/build/gen/coach.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../coach';
diff --git a/ui/pagelets/css/build/gen/coach.transp.scss b/ui/pagelets/css/build/gen/coach.transp.scss
deleted file mode 100644
index ac10aa1856b14..0000000000000
--- a/ui/pagelets/css/build/gen/coach.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../coach';
diff --git a/ui/pagelets/css/build/gen/complete.dark.scss b/ui/pagelets/css/build/gen/complete.dark.scss
deleted file mode 100644
index 3d06db5192a7e..0000000000000
--- a/ui/pagelets/css/build/gen/complete.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../complete';
diff --git a/ui/pagelets/css/build/gen/complete.light.scss b/ui/pagelets/css/build/gen/complete.light.scss
deleted file mode 100644
index cef1c2459c03e..0000000000000
--- a/ui/pagelets/css/build/gen/complete.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../complete';
diff --git a/ui/pagelets/css/build/gen/complete.transp.scss b/ui/pagelets/css/build/gen/complete.transp.scss
deleted file mode 100644
index 3d7d84a1e7900..0000000000000
--- a/ui/pagelets/css/build/gen/complete.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../complete';
diff --git a/ui/pagelets/css/build/gen/contact.dark.scss b/ui/pagelets/css/build/gen/contact.dark.scss
deleted file mode 100644
index 1a1a910d603dc..0000000000000
--- a/ui/pagelets/css/build/gen/contact.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../contact';
diff --git a/ui/pagelets/css/build/gen/contact.light.scss b/ui/pagelets/css/build/gen/contact.light.scss
deleted file mode 100644
index 8214116cc2fcd..0000000000000
--- a/ui/pagelets/css/build/gen/contact.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../contact';
diff --git a/ui/pagelets/css/build/gen/contact.transp.scss b/ui/pagelets/css/build/gen/contact.transp.scss
deleted file mode 100644
index 15b9dc50d1a11..0000000000000
--- a/ui/pagelets/css/build/gen/contact.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../contact';
diff --git a/ui/pagelets/css/build/gen/cropDialog.dark.scss b/ui/pagelets/css/build/gen/cropDialog.dark.scss
deleted file mode 100644
index 54cdf007ff5a9..0000000000000
--- a/ui/pagelets/css/build/gen/cropDialog.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../cropDialog';
diff --git a/ui/pagelets/css/build/gen/cropDialog.light.scss b/ui/pagelets/css/build/gen/cropDialog.light.scss
deleted file mode 100644
index c76ec782e6652..0000000000000
--- a/ui/pagelets/css/build/gen/cropDialog.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../cropDialog';
diff --git a/ui/pagelets/css/build/gen/cropDialog.transp.scss b/ui/pagelets/css/build/gen/cropDialog.transp.scss
deleted file mode 100644
index 93b28f289104f..0000000000000
--- a/ui/pagelets/css/build/gen/cropDialog.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../cropDialog';
diff --git a/ui/pagelets/css/build/gen/crosstable.dark.scss b/ui/pagelets/css/build/gen/crosstable.dark.scss
deleted file mode 100644
index e04d36173c61b..0000000000000
--- a/ui/pagelets/css/build/gen/crosstable.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../crosstable';
diff --git a/ui/pagelets/css/build/gen/crosstable.light.scss b/ui/pagelets/css/build/gen/crosstable.light.scss
deleted file mode 100644
index 56d132e1ec92b..0000000000000
--- a/ui/pagelets/css/build/gen/crosstable.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../crosstable';
diff --git a/ui/pagelets/css/build/gen/crosstable.transp.scss b/ui/pagelets/css/build/gen/crosstable.transp.scss
deleted file mode 100644
index 097eefd1cdf47..0000000000000
--- a/ui/pagelets/css/build/gen/crosstable.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../crosstable';
diff --git a/ui/pagelets/css/build/gen/dailyFeed.dark.scss b/ui/pagelets/css/build/gen/dailyFeed.dark.scss
deleted file mode 100644
index 79caf75253f6f..0000000000000
--- a/ui/pagelets/css/build/gen/dailyFeed.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../dailyFeed';
diff --git a/ui/pagelets/css/build/gen/dailyFeed.light.scss b/ui/pagelets/css/build/gen/dailyFeed.light.scss
deleted file mode 100644
index 90e4e71b0d52a..0000000000000
--- a/ui/pagelets/css/build/gen/dailyFeed.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../dailyFeed';
diff --git a/ui/pagelets/css/build/gen/dailyFeed.transp.scss b/ui/pagelets/css/build/gen/dailyFeed.transp.scss
deleted file mode 100644
index d68464f68f858..0000000000000
--- a/ui/pagelets/css/build/gen/dailyFeed.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../dailyFeed';
diff --git a/ui/pagelets/css/build/gen/dgt.dark.scss b/ui/pagelets/css/build/gen/dgt.dark.scss
deleted file mode 100644
index ef3b0ef85229b..0000000000000
--- a/ui/pagelets/css/build/gen/dgt.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../dgt';
diff --git a/ui/pagelets/css/build/gen/dgt.light.scss b/ui/pagelets/css/build/gen/dgt.light.scss
deleted file mode 100644
index a6bc2bfd84b7d..0000000000000
--- a/ui/pagelets/css/build/gen/dgt.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../dgt';
diff --git a/ui/pagelets/css/build/gen/dgt.transp.scss b/ui/pagelets/css/build/gen/dgt.transp.scss
deleted file mode 100644
index bb8b3231b0b28..0000000000000
--- a/ui/pagelets/css/build/gen/dgt.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../dgt';
diff --git a/ui/pagelets/css/build/gen/diagnosticDialog.dark.scss b/ui/pagelets/css/build/gen/diagnosticDialog.dark.scss
deleted file mode 100644
index 452ec1a570bfb..0000000000000
--- a/ui/pagelets/css/build/gen/diagnosticDialog.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../diagnosticDialog';
diff --git a/ui/pagelets/css/build/gen/diagnosticDialog.light.scss b/ui/pagelets/css/build/gen/diagnosticDialog.light.scss
deleted file mode 100644
index d8cebeb84b2ad..0000000000000
--- a/ui/pagelets/css/build/gen/diagnosticDialog.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../diagnosticDialog';
diff --git a/ui/pagelets/css/build/gen/diagnosticDialog.transp.scss b/ui/pagelets/css/build/gen/diagnosticDialog.transp.scss
deleted file mode 100644
index 354354d4c4845..0000000000000
--- a/ui/pagelets/css/build/gen/diagnosticDialog.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../diagnosticDialog';
diff --git a/ui/pagelets/css/build/gen/email-confirm.dark.scss b/ui/pagelets/css/build/gen/email-confirm.dark.scss
deleted file mode 100644
index aa3be816b1b00..0000000000000
--- a/ui/pagelets/css/build/gen/email-confirm.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../email-confirm';
diff --git a/ui/pagelets/css/build/gen/email-confirm.light.scss b/ui/pagelets/css/build/gen/email-confirm.light.scss
deleted file mode 100644
index 098c43ba8b039..0000000000000
--- a/ui/pagelets/css/build/gen/email-confirm.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../email-confirm';
diff --git a/ui/pagelets/css/build/gen/email-confirm.transp.scss b/ui/pagelets/css/build/gen/email-confirm.transp.scss
deleted file mode 100644
index a479d98724bd5..0000000000000
--- a/ui/pagelets/css/build/gen/email-confirm.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../email-confirm';
diff --git a/ui/pagelets/css/build/gen/event.dark.scss b/ui/pagelets/css/build/gen/event.dark.scss
deleted file mode 100644
index 60eea7944416a..0000000000000
--- a/ui/pagelets/css/build/gen/event.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../event';
diff --git a/ui/pagelets/css/build/gen/event.light.scss b/ui/pagelets/css/build/gen/event.light.scss
deleted file mode 100644
index c414a69459219..0000000000000
--- a/ui/pagelets/css/build/gen/event.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../event';
diff --git a/ui/pagelets/css/build/gen/event.transp.scss b/ui/pagelets/css/build/gen/event.transp.scss
deleted file mode 100644
index 4a8de2517162b..0000000000000
--- a/ui/pagelets/css/build/gen/event.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../event';
diff --git a/ui/pagelets/css/build/gen/faq.dark.scss b/ui/pagelets/css/build/gen/faq.dark.scss
deleted file mode 100644
index 318d83fb2f05c..0000000000000
--- a/ui/pagelets/css/build/gen/faq.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../faq';
diff --git a/ui/pagelets/css/build/gen/faq.light.scss b/ui/pagelets/css/build/gen/faq.light.scss
deleted file mode 100644
index ba11d2b6c1893..0000000000000
--- a/ui/pagelets/css/build/gen/faq.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../faq';
diff --git a/ui/pagelets/css/build/gen/faq.transp.scss b/ui/pagelets/css/build/gen/faq.transp.scss
deleted file mode 100644
index 64d17ac2faba6..0000000000000
--- a/ui/pagelets/css/build/gen/faq.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../faq';
diff --git a/ui/pagelets/css/build/gen/feature.dark.scss b/ui/pagelets/css/build/gen/feature.dark.scss
deleted file mode 100644
index 7510a77d3df45..0000000000000
--- a/ui/pagelets/css/build/gen/feature.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../feature';
diff --git a/ui/pagelets/css/build/gen/feature.light.scss b/ui/pagelets/css/build/gen/feature.light.scss
deleted file mode 100644
index 8b3aa43fdb138..0000000000000
--- a/ui/pagelets/css/build/gen/feature.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../feature';
diff --git a/ui/pagelets/css/build/gen/feature.transp.scss b/ui/pagelets/css/build/gen/feature.transp.scss
deleted file mode 100644
index 4f4e05439949a..0000000000000
--- a/ui/pagelets/css/build/gen/feature.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../feature';
diff --git a/ui/pagelets/css/build/gen/fide.dark.scss b/ui/pagelets/css/build/gen/fide.dark.scss
deleted file mode 100644
index cb46de4ba7846..0000000000000
--- a/ui/pagelets/css/build/gen/fide.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../fide';
diff --git a/ui/pagelets/css/build/gen/fide.light.scss b/ui/pagelets/css/build/gen/fide.light.scss
deleted file mode 100644
index d89aa21eb00dc..0000000000000
--- a/ui/pagelets/css/build/gen/fide.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../fide';
diff --git a/ui/pagelets/css/build/gen/fide.transp.scss b/ui/pagelets/css/build/gen/fide.transp.scss
deleted file mode 100644
index f5722cd044f0b..0000000000000
--- a/ui/pagelets/css/build/gen/fide.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../fide';
diff --git a/ui/pagelets/css/build/gen/flatpickr.dark.scss b/ui/pagelets/css/build/gen/flatpickr.dark.scss
deleted file mode 100644
index 0b6adb34c4d6d..0000000000000
--- a/ui/pagelets/css/build/gen/flatpickr.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../flatpickr';
diff --git a/ui/pagelets/css/build/gen/flatpickr.light.scss b/ui/pagelets/css/build/gen/flatpickr.light.scss
deleted file mode 100644
index 7696b9fcb131f..0000000000000
--- a/ui/pagelets/css/build/gen/flatpickr.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../flatpickr';
diff --git a/ui/pagelets/css/build/gen/flatpickr.transp.scss b/ui/pagelets/css/build/gen/flatpickr.transp.scss
deleted file mode 100644
index e986693944785..0000000000000
--- a/ui/pagelets/css/build/gen/flatpickr.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../flatpickr';
diff --git a/ui/pagelets/css/build/gen/form3-captcha.dark.scss b/ui/pagelets/css/build/gen/form3-captcha.dark.scss
deleted file mode 100644
index 0ac482b692307..0000000000000
--- a/ui/pagelets/css/build/gen/form3-captcha.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../form3-captcha';
diff --git a/ui/pagelets/css/build/gen/form3-captcha.light.scss b/ui/pagelets/css/build/gen/form3-captcha.light.scss
deleted file mode 100644
index 1f939a970dd60..0000000000000
--- a/ui/pagelets/css/build/gen/form3-captcha.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../form3-captcha';
diff --git a/ui/pagelets/css/build/gen/form3-captcha.transp.scss b/ui/pagelets/css/build/gen/form3-captcha.transp.scss
deleted file mode 100644
index b03523f486f4d..0000000000000
--- a/ui/pagelets/css/build/gen/form3-captcha.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../form3-captcha';
diff --git a/ui/pagelets/css/build/gen/form3.dark.scss b/ui/pagelets/css/build/gen/form3.dark.scss
deleted file mode 100644
index 0d67647dd5906..0000000000000
--- a/ui/pagelets/css/build/gen/form3.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../form3';
diff --git a/ui/pagelets/css/build/gen/form3.light.scss b/ui/pagelets/css/build/gen/form3.light.scss
deleted file mode 100644
index 500efa44bb10f..0000000000000
--- a/ui/pagelets/css/build/gen/form3.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../form3';
diff --git a/ui/pagelets/css/build/gen/form3.transp.scss b/ui/pagelets/css/build/gen/form3.transp.scss
deleted file mode 100644
index 867da0d50005b..0000000000000
--- a/ui/pagelets/css/build/gen/form3.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../form3';
diff --git a/ui/pagelets/css/build/gen/forum.dark.scss b/ui/pagelets/css/build/gen/forum.dark.scss
deleted file mode 100644
index 135d42aa43848..0000000000000
--- a/ui/pagelets/css/build/gen/forum.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../forum';
diff --git a/ui/pagelets/css/build/gen/forum.light.scss b/ui/pagelets/css/build/gen/forum.light.scss
deleted file mode 100644
index 929f8e629ade0..0000000000000
--- a/ui/pagelets/css/build/gen/forum.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../forum';
diff --git a/ui/pagelets/css/build/gen/forum.transp.scss b/ui/pagelets/css/build/gen/forum.transp.scss
deleted file mode 100644
index bfe36eadab9e9..0000000000000
--- a/ui/pagelets/css/build/gen/forum.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../forum';
diff --git a/ui/pagelets/css/build/gen/importer.dark.scss b/ui/pagelets/css/build/gen/importer.dark.scss
deleted file mode 100644
index 9e95eeb0a3f31..0000000000000
--- a/ui/pagelets/css/build/gen/importer.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../importer';
diff --git a/ui/pagelets/css/build/gen/importer.light.scss b/ui/pagelets/css/build/gen/importer.light.scss
deleted file mode 100644
index 1dc85f8a1ad01..0000000000000
--- a/ui/pagelets/css/build/gen/importer.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../importer';
diff --git a/ui/pagelets/css/build/gen/importer.transp.scss b/ui/pagelets/css/build/gen/importer.transp.scss
deleted file mode 100644
index 5a978cabd87d6..0000000000000
--- a/ui/pagelets/css/build/gen/importer.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../importer';
diff --git a/ui/pagelets/css/build/gen/lag.dark.scss b/ui/pagelets/css/build/gen/lag.dark.scss
deleted file mode 100644
index feed4cf9abe19..0000000000000
--- a/ui/pagelets/css/build/gen/lag.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../lag';
diff --git a/ui/pagelets/css/build/gen/lag.light.scss b/ui/pagelets/css/build/gen/lag.light.scss
deleted file mode 100644
index 76af515207ce0..0000000000000
--- a/ui/pagelets/css/build/gen/lag.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../lag';
diff --git a/ui/pagelets/css/build/gen/lag.transp.scss b/ui/pagelets/css/build/gen/lag.transp.scss
deleted file mode 100644
index 0abbe73875e2e..0000000000000
--- a/ui/pagelets/css/build/gen/lag.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../lag';
diff --git a/ui/pagelets/css/build/gen/linkPopup.dark.scss b/ui/pagelets/css/build/gen/linkPopup.dark.scss
deleted file mode 100644
index 4f1d0d22b5715..0000000000000
--- a/ui/pagelets/css/build/gen/linkPopup.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../linkPopup';
diff --git a/ui/pagelets/css/build/gen/linkPopup.light.scss b/ui/pagelets/css/build/gen/linkPopup.light.scss
deleted file mode 100644
index 5648030895b94..0000000000000
--- a/ui/pagelets/css/build/gen/linkPopup.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../linkPopup';
diff --git a/ui/pagelets/css/build/gen/linkPopup.transp.scss b/ui/pagelets/css/build/gen/linkPopup.transp.scss
deleted file mode 100644
index 66ae110ebd671..0000000000000
--- a/ui/pagelets/css/build/gen/linkPopup.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../linkPopup';
diff --git a/ui/pagelets/css/build/gen/lpv.dark.scss b/ui/pagelets/css/build/gen/lpv.dark.scss
deleted file mode 100644
index a77816141c20c..0000000000000
--- a/ui/pagelets/css/build/gen/lpv.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../lpv';
diff --git a/ui/pagelets/css/build/gen/lpv.embed.dark.scss b/ui/pagelets/css/build/gen/lpv.embed.dark.scss
deleted file mode 100644
index cf60b58c60c56..0000000000000
--- a/ui/pagelets/css/build/gen/lpv.embed.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../lpv.embed';
diff --git a/ui/pagelets/css/build/gen/lpv.embed.light.scss b/ui/pagelets/css/build/gen/lpv.embed.light.scss
deleted file mode 100644
index 85b8aa626b66c..0000000000000
--- a/ui/pagelets/css/build/gen/lpv.embed.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../lpv.embed';
diff --git a/ui/pagelets/css/build/gen/lpv.embed.transp.scss b/ui/pagelets/css/build/gen/lpv.embed.transp.scss
deleted file mode 100644
index d0c9d859e21f2..0000000000000
--- a/ui/pagelets/css/build/gen/lpv.embed.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../lpv.embed';
diff --git a/ui/pagelets/css/build/gen/lpv.light.scss b/ui/pagelets/css/build/gen/lpv.light.scss
deleted file mode 100644
index 6887fcaeb1204..0000000000000
--- a/ui/pagelets/css/build/gen/lpv.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../lpv';
diff --git a/ui/pagelets/css/build/gen/lpv.transp.scss b/ui/pagelets/css/build/gen/lpv.transp.scss
deleted file mode 100644
index c9a1825c51a7d..0000000000000
--- a/ui/pagelets/css/build/gen/lpv.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../lpv';
diff --git a/ui/pagelets/css/build/gen/mobile.dark.scss b/ui/pagelets/css/build/gen/mobile.dark.scss
deleted file mode 100644
index 6e4082868004d..0000000000000
--- a/ui/pagelets/css/build/gen/mobile.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../mobile';
diff --git a/ui/pagelets/css/build/gen/mobile.light.scss b/ui/pagelets/css/build/gen/mobile.light.scss
deleted file mode 100644
index 006148837346c..0000000000000
--- a/ui/pagelets/css/build/gen/mobile.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../mobile';
diff --git a/ui/pagelets/css/build/gen/mobile.transp.scss b/ui/pagelets/css/build/gen/mobile.transp.scss
deleted file mode 100644
index 2e6a3fc100b1c..0000000000000
--- a/ui/pagelets/css/build/gen/mobile.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../mobile';
diff --git a/ui/pagelets/css/build/gen/mod.activity.dark.scss b/ui/pagelets/css/build/gen/mod.activity.dark.scss
deleted file mode 100644
index c9a8e8632def5..0000000000000
--- a/ui/pagelets/css/build/gen/mod.activity.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../mod.activity';
diff --git a/ui/pagelets/css/build/gen/mod.activity.light.scss b/ui/pagelets/css/build/gen/mod.activity.light.scss
deleted file mode 100644
index ad1445375a63f..0000000000000
--- a/ui/pagelets/css/build/gen/mod.activity.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../mod.activity';
diff --git a/ui/pagelets/css/build/gen/mod.activity.transp.scss b/ui/pagelets/css/build/gen/mod.activity.transp.scss
deleted file mode 100644
index 950e1ea486cae..0000000000000
--- a/ui/pagelets/css/build/gen/mod.activity.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../mod.activity';
diff --git a/ui/pagelets/css/build/gen/mod.communication.dark.scss b/ui/pagelets/css/build/gen/mod.communication.dark.scss
deleted file mode 100644
index 0e694440ecb95..0000000000000
--- a/ui/pagelets/css/build/gen/mod.communication.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../mod.communication';
diff --git a/ui/pagelets/css/build/gen/mod.communication.light.scss b/ui/pagelets/css/build/gen/mod.communication.light.scss
deleted file mode 100644
index 230b7123012ca..0000000000000
--- a/ui/pagelets/css/build/gen/mod.communication.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../mod.communication';
diff --git a/ui/pagelets/css/build/gen/mod.communication.transp.scss b/ui/pagelets/css/build/gen/mod.communication.transp.scss
deleted file mode 100644
index ad6edef3a136f..0000000000000
--- a/ui/pagelets/css/build/gen/mod.communication.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../mod.communication';
diff --git a/ui/pagelets/css/build/gen/mod.form.dark.scss b/ui/pagelets/css/build/gen/mod.form.dark.scss
deleted file mode 100644
index 9b76c52d4b417..0000000000000
--- a/ui/pagelets/css/build/gen/mod.form.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../mod.form';
diff --git a/ui/pagelets/css/build/gen/mod.form.light.scss b/ui/pagelets/css/build/gen/mod.form.light.scss
deleted file mode 100644
index e6d8c6f4996e0..0000000000000
--- a/ui/pagelets/css/build/gen/mod.form.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../mod.form';
diff --git a/ui/pagelets/css/build/gen/mod.form.transp.scss b/ui/pagelets/css/build/gen/mod.form.transp.scss
deleted file mode 100644
index c1e6d0c96a0a0..0000000000000
--- a/ui/pagelets/css/build/gen/mod.form.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../mod.form';
diff --git a/ui/pagelets/css/build/gen/mod.games.dark.scss b/ui/pagelets/css/build/gen/mod.games.dark.scss
deleted file mode 100644
index 171948d972c1f..0000000000000
--- a/ui/pagelets/css/build/gen/mod.games.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../mod.games';
diff --git a/ui/pagelets/css/build/gen/mod.games.light.scss b/ui/pagelets/css/build/gen/mod.games.light.scss
deleted file mode 100644
index 4762e337d8c2c..0000000000000
--- a/ui/pagelets/css/build/gen/mod.games.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../mod.games';
diff --git a/ui/pagelets/css/build/gen/mod.games.transp.scss b/ui/pagelets/css/build/gen/mod.games.transp.scss
deleted file mode 100644
index a40ca01eff08b..0000000000000
--- a/ui/pagelets/css/build/gen/mod.games.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../mod.games';
diff --git a/ui/pagelets/css/build/gen/mod.gamify.dark.scss b/ui/pagelets/css/build/gen/mod.gamify.dark.scss
deleted file mode 100644
index e2f6889b93b44..0000000000000
--- a/ui/pagelets/css/build/gen/mod.gamify.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../mod.gamify';
diff --git a/ui/pagelets/css/build/gen/mod.gamify.light.scss b/ui/pagelets/css/build/gen/mod.gamify.light.scss
deleted file mode 100644
index 1654e1a36d50a..0000000000000
--- a/ui/pagelets/css/build/gen/mod.gamify.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../mod.gamify';
diff --git a/ui/pagelets/css/build/gen/mod.gamify.transp.scss b/ui/pagelets/css/build/gen/mod.gamify.transp.scss
deleted file mode 100644
index 5979df9127b30..0000000000000
--- a/ui/pagelets/css/build/gen/mod.gamify.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../mod.gamify';
diff --git a/ui/pagelets/css/build/gen/mod.misc.dark.scss b/ui/pagelets/css/build/gen/mod.misc.dark.scss
deleted file mode 100644
index 6fae9b1ba91fd..0000000000000
--- a/ui/pagelets/css/build/gen/mod.misc.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../mod.misc';
diff --git a/ui/pagelets/css/build/gen/mod.misc.light.scss b/ui/pagelets/css/build/gen/mod.misc.light.scss
deleted file mode 100644
index f19f8a9f3f7b9..0000000000000
--- a/ui/pagelets/css/build/gen/mod.misc.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../mod.misc';
diff --git a/ui/pagelets/css/build/gen/mod.misc.transp.scss b/ui/pagelets/css/build/gen/mod.misc.transp.scss
deleted file mode 100644
index 1f4cb92fcfbf9..0000000000000
--- a/ui/pagelets/css/build/gen/mod.misc.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../mod.misc';
diff --git a/ui/pagelets/css/build/gen/mod.permission.dark.scss b/ui/pagelets/css/build/gen/mod.permission.dark.scss
deleted file mode 100644
index 26e6febe7a891..0000000000000
--- a/ui/pagelets/css/build/gen/mod.permission.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../mod.permission';
diff --git a/ui/pagelets/css/build/gen/mod.permission.light.scss b/ui/pagelets/css/build/gen/mod.permission.light.scss
deleted file mode 100644
index ef15fba911578..0000000000000
--- a/ui/pagelets/css/build/gen/mod.permission.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../mod.permission';
diff --git a/ui/pagelets/css/build/gen/mod.permission.transp.scss b/ui/pagelets/css/build/gen/mod.permission.transp.scss
deleted file mode 100644
index 6b16b5026f20f..0000000000000
--- a/ui/pagelets/css/build/gen/mod.permission.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../mod.permission';
diff --git a/ui/pagelets/css/build/gen/mod.publicChats.dark.scss b/ui/pagelets/css/build/gen/mod.publicChats.dark.scss
deleted file mode 100644
index df77fe2ad8c4e..0000000000000
--- a/ui/pagelets/css/build/gen/mod.publicChats.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../mod.publicChats';
diff --git a/ui/pagelets/css/build/gen/mod.publicChats.light.scss b/ui/pagelets/css/build/gen/mod.publicChats.light.scss
deleted file mode 100644
index 2f7a222c7303f..0000000000000
--- a/ui/pagelets/css/build/gen/mod.publicChats.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../mod.publicChats';
diff --git a/ui/pagelets/css/build/gen/mod.publicChats.transp.scss b/ui/pagelets/css/build/gen/mod.publicChats.transp.scss
deleted file mode 100644
index 79cf68d26282f..0000000000000
--- a/ui/pagelets/css/build/gen/mod.publicChats.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../mod.publicChats';
diff --git a/ui/pagelets/css/build/gen/mod.report.dark.scss b/ui/pagelets/css/build/gen/mod.report.dark.scss
deleted file mode 100644
index f061d3e6c618f..0000000000000
--- a/ui/pagelets/css/build/gen/mod.report.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../mod.report';
diff --git a/ui/pagelets/css/build/gen/mod.report.light.scss b/ui/pagelets/css/build/gen/mod.report.light.scss
deleted file mode 100644
index db6644c869398..0000000000000
--- a/ui/pagelets/css/build/gen/mod.report.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../mod.report';
diff --git a/ui/pagelets/css/build/gen/mod.report.transp.scss b/ui/pagelets/css/build/gen/mod.report.transp.scss
deleted file mode 100644
index 00867fec54d83..0000000000000
--- a/ui/pagelets/css/build/gen/mod.report.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../mod.report';
diff --git a/ui/pagelets/css/build/gen/mod.user.dark.scss b/ui/pagelets/css/build/gen/mod.user.dark.scss
deleted file mode 100644
index f8625d2fbcc56..0000000000000
--- a/ui/pagelets/css/build/gen/mod.user.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../mod.user';
diff --git a/ui/pagelets/css/build/gen/mod.user.light.scss b/ui/pagelets/css/build/gen/mod.user.light.scss
deleted file mode 100644
index 1e66bb3e6cccf..0000000000000
--- a/ui/pagelets/css/build/gen/mod.user.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../mod.user';
diff --git a/ui/pagelets/css/build/gen/mod.user.transp.scss b/ui/pagelets/css/build/gen/mod.user.transp.scss
deleted file mode 100644
index ad86c9b3bd98b..0000000000000
--- a/ui/pagelets/css/build/gen/mod.user.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../mod.user';
diff --git a/ui/pagelets/css/build/gen/not-found.dark.scss b/ui/pagelets/css/build/gen/not-found.dark.scss
deleted file mode 100644
index af0a2093d1b96..0000000000000
--- a/ui/pagelets/css/build/gen/not-found.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../not-found';
diff --git a/ui/pagelets/css/build/gen/not-found.light.scss b/ui/pagelets/css/build/gen/not-found.light.scss
deleted file mode 100644
index 241ef37ea0944..0000000000000
--- a/ui/pagelets/css/build/gen/not-found.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../not-found';
diff --git a/ui/pagelets/css/build/gen/not-found.transp.scss b/ui/pagelets/css/build/gen/not-found.transp.scss
deleted file mode 100644
index a557905442cbf..0000000000000
--- a/ui/pagelets/css/build/gen/not-found.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../not-found';
diff --git a/ui/pagelets/css/build/gen/oauth.dark.scss b/ui/pagelets/css/build/gen/oauth.dark.scss
deleted file mode 100644
index 2e4c730df0476..0000000000000
--- a/ui/pagelets/css/build/gen/oauth.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../oauth';
diff --git a/ui/pagelets/css/build/gen/oauth.light.scss b/ui/pagelets/css/build/gen/oauth.light.scss
deleted file mode 100644
index 5ccf24ef2cc81..0000000000000
--- a/ui/pagelets/css/build/gen/oauth.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../oauth';
diff --git a/ui/pagelets/css/build/gen/oauth.transp.scss b/ui/pagelets/css/build/gen/oauth.transp.scss
deleted file mode 100644
index 4c8f722a12955..0000000000000
--- a/ui/pagelets/css/build/gen/oauth.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../oauth';
diff --git a/ui/pagelets/css/build/gen/page.dark.scss b/ui/pagelets/css/build/gen/page.dark.scss
deleted file mode 100644
index 54637ec1f82c8..0000000000000
--- a/ui/pagelets/css/build/gen/page.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../page';
diff --git a/ui/pagelets/css/build/gen/page.light.scss b/ui/pagelets/css/build/gen/page.light.scss
deleted file mode 100644
index 190c611245043..0000000000000
--- a/ui/pagelets/css/build/gen/page.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../page';
diff --git a/ui/pagelets/css/build/gen/page.transp.scss b/ui/pagelets/css/build/gen/page.transp.scss
deleted file mode 100644
index df2592b4c7939..0000000000000
--- a/ui/pagelets/css/build/gen/page.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../page';
diff --git a/ui/pagelets/css/build/gen/perf-stat.dark.scss b/ui/pagelets/css/build/gen/perf-stat.dark.scss
deleted file mode 100644
index c06b7f2038505..0000000000000
--- a/ui/pagelets/css/build/gen/perf-stat.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../perf-stat';
diff --git a/ui/pagelets/css/build/gen/perf-stat.light.scss b/ui/pagelets/css/build/gen/perf-stat.light.scss
deleted file mode 100644
index 3c9d8885d5ae5..0000000000000
--- a/ui/pagelets/css/build/gen/perf-stat.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../perf-stat';
diff --git a/ui/pagelets/css/build/gen/perf-stat.transp.scss b/ui/pagelets/css/build/gen/perf-stat.transp.scss
deleted file mode 100644
index f2e552b5c70f1..0000000000000
--- a/ui/pagelets/css/build/gen/perf-stat.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../perf-stat';
diff --git a/ui/pagelets/css/build/gen/plan.dark.scss b/ui/pagelets/css/build/gen/plan.dark.scss
deleted file mode 100644
index faabb7d3a468c..0000000000000
--- a/ui/pagelets/css/build/gen/plan.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../plan';
diff --git a/ui/pagelets/css/build/gen/plan.light.scss b/ui/pagelets/css/build/gen/plan.light.scss
deleted file mode 100644
index 893f00f06b9d8..0000000000000
--- a/ui/pagelets/css/build/gen/plan.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../plan';
diff --git a/ui/pagelets/css/build/gen/plan.transp.scss b/ui/pagelets/css/build/gen/plan.transp.scss
deleted file mode 100644
index f3e7f7230c4f7..0000000000000
--- a/ui/pagelets/css/build/gen/plan.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../plan';
diff --git a/ui/pagelets/css/build/gen/practice.index.dark.scss b/ui/pagelets/css/build/gen/practice.index.dark.scss
deleted file mode 100644
index 23a6787945cfa..0000000000000
--- a/ui/pagelets/css/build/gen/practice.index.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../practice.index';
diff --git a/ui/pagelets/css/build/gen/practice.index.light.scss b/ui/pagelets/css/build/gen/practice.index.light.scss
deleted file mode 100644
index ef4386bbd6dd8..0000000000000
--- a/ui/pagelets/css/build/gen/practice.index.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../practice.index';
diff --git a/ui/pagelets/css/build/gen/practice.index.transp.scss b/ui/pagelets/css/build/gen/practice.index.transp.scss
deleted file mode 100644
index d7f594a6da949..0000000000000
--- a/ui/pagelets/css/build/gen/practice.index.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../practice.index';
diff --git a/ui/pagelets/css/build/gen/relation.dark.scss b/ui/pagelets/css/build/gen/relation.dark.scss
deleted file mode 100644
index cbb500d1cf276..0000000000000
--- a/ui/pagelets/css/build/gen/relation.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../relation';
diff --git a/ui/pagelets/css/build/gen/relation.light.scss b/ui/pagelets/css/build/gen/relation.light.scss
deleted file mode 100644
index 624121b7eb0f2..0000000000000
--- a/ui/pagelets/css/build/gen/relation.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../relation';
diff --git a/ui/pagelets/css/build/gen/relation.transp.scss b/ui/pagelets/css/build/gen/relation.transp.scss
deleted file mode 100644
index 497a3eca1f6f2..0000000000000
--- a/ui/pagelets/css/build/gen/relation.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../relation';
diff --git a/ui/pagelets/css/build/gen/relay.form.dark.scss b/ui/pagelets/css/build/gen/relay.form.dark.scss
deleted file mode 100644
index 6086cb2088619..0000000000000
--- a/ui/pagelets/css/build/gen/relay.form.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../relay.form';
diff --git a/ui/pagelets/css/build/gen/relay.form.light.scss b/ui/pagelets/css/build/gen/relay.form.light.scss
deleted file mode 100644
index 83f06d42eeb7c..0000000000000
--- a/ui/pagelets/css/build/gen/relay.form.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../relay.form';
diff --git a/ui/pagelets/css/build/gen/relay.form.transp.scss b/ui/pagelets/css/build/gen/relay.form.transp.scss
deleted file mode 100644
index eeb257f818203..0000000000000
--- a/ui/pagelets/css/build/gen/relay.form.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../relay.form';
diff --git a/ui/pagelets/css/build/gen/relay.index.dark.scss b/ui/pagelets/css/build/gen/relay.index.dark.scss
deleted file mode 100644
index ddce34b8e0dd2..0000000000000
--- a/ui/pagelets/css/build/gen/relay.index.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../relay.index';
diff --git a/ui/pagelets/css/build/gen/relay.index.light.scss b/ui/pagelets/css/build/gen/relay.index.light.scss
deleted file mode 100644
index c2a4a691e8b7d..0000000000000
--- a/ui/pagelets/css/build/gen/relay.index.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../relay.index';
diff --git a/ui/pagelets/css/build/gen/relay.index.transp.scss b/ui/pagelets/css/build/gen/relay.index.transp.scss
deleted file mode 100644
index e306e1a0a572b..0000000000000
--- a/ui/pagelets/css/build/gen/relay.index.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../relay.index';
diff --git a/ui/pagelets/css/build/gen/search.dark.scss b/ui/pagelets/css/build/gen/search.dark.scss
deleted file mode 100644
index ce989dc57a595..0000000000000
--- a/ui/pagelets/css/build/gen/search.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../search';
diff --git a/ui/pagelets/css/build/gen/search.light.scss b/ui/pagelets/css/build/gen/search.light.scss
deleted file mode 100644
index e7253ae103bb2..0000000000000
--- a/ui/pagelets/css/build/gen/search.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../search';
diff --git a/ui/pagelets/css/build/gen/search.transp.scss b/ui/pagelets/css/build/gen/search.transp.scss
deleted file mode 100644
index 2ff3a51d266b0..0000000000000
--- a/ui/pagelets/css/build/gen/search.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../search';
diff --git a/ui/pagelets/css/build/gen/slist.dark.scss b/ui/pagelets/css/build/gen/slist.dark.scss
deleted file mode 100644
index 7989447d8e36b..0000000000000
--- a/ui/pagelets/css/build/gen/slist.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../slist';
diff --git a/ui/pagelets/css/build/gen/slist.light.scss b/ui/pagelets/css/build/gen/slist.light.scss
deleted file mode 100644
index 17c5117b6e800..0000000000000
--- a/ui/pagelets/css/build/gen/slist.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../slist';
diff --git a/ui/pagelets/css/build/gen/slist.transp.scss b/ui/pagelets/css/build/gen/slist.transp.scss
deleted file mode 100644
index 9d969ca23d513..0000000000000
--- a/ui/pagelets/css/build/gen/slist.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../slist';
diff --git a/ui/pagelets/css/build/gen/source.dark.scss b/ui/pagelets/css/build/gen/source.dark.scss
deleted file mode 100644
index 48738e29df386..0000000000000
--- a/ui/pagelets/css/build/gen/source.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../source';
diff --git a/ui/pagelets/css/build/gen/source.light.scss b/ui/pagelets/css/build/gen/source.light.scss
deleted file mode 100644
index 38e0b1bc73598..0000000000000
--- a/ui/pagelets/css/build/gen/source.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../source';
diff --git a/ui/pagelets/css/build/gen/source.transp.scss b/ui/pagelets/css/build/gen/source.transp.scss
deleted file mode 100644
index 9f130a5daf541..0000000000000
--- a/ui/pagelets/css/build/gen/source.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../source';
diff --git a/ui/pagelets/css/build/gen/streamer.form.dark.scss b/ui/pagelets/css/build/gen/streamer.form.dark.scss
deleted file mode 100644
index ae9232ed9eb77..0000000000000
--- a/ui/pagelets/css/build/gen/streamer.form.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../streamer.form';
diff --git a/ui/pagelets/css/build/gen/streamer.form.light.scss b/ui/pagelets/css/build/gen/streamer.form.light.scss
deleted file mode 100644
index 2d957e91a69b9..0000000000000
--- a/ui/pagelets/css/build/gen/streamer.form.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../streamer.form';
diff --git a/ui/pagelets/css/build/gen/streamer.form.transp.scss b/ui/pagelets/css/build/gen/streamer.form.transp.scss
deleted file mode 100644
index 6ecc067fe5146..0000000000000
--- a/ui/pagelets/css/build/gen/streamer.form.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../streamer.form';
diff --git a/ui/pagelets/css/build/gen/streamer.list.dark.scss b/ui/pagelets/css/build/gen/streamer.list.dark.scss
deleted file mode 100644
index 533adc56c8def..0000000000000
--- a/ui/pagelets/css/build/gen/streamer.list.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../streamer.list';
diff --git a/ui/pagelets/css/build/gen/streamer.list.light.scss b/ui/pagelets/css/build/gen/streamer.list.light.scss
deleted file mode 100644
index 97687028bed08..0000000000000
--- a/ui/pagelets/css/build/gen/streamer.list.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../streamer.list';
diff --git a/ui/pagelets/css/build/gen/streamer.list.transp.scss b/ui/pagelets/css/build/gen/streamer.list.transp.scss
deleted file mode 100644
index 6c269d1888ecf..0000000000000
--- a/ui/pagelets/css/build/gen/streamer.list.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../streamer.list';
diff --git a/ui/pagelets/css/build/gen/streamer.show.dark.scss b/ui/pagelets/css/build/gen/streamer.show.dark.scss
deleted file mode 100644
index 52f3867d0581b..0000000000000
--- a/ui/pagelets/css/build/gen/streamer.show.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../streamer.show';
diff --git a/ui/pagelets/css/build/gen/streamer.show.light.scss b/ui/pagelets/css/build/gen/streamer.show.light.scss
deleted file mode 100644
index 17cc7dc10c175..0000000000000
--- a/ui/pagelets/css/build/gen/streamer.show.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../streamer.show';
diff --git a/ui/pagelets/css/build/gen/streamer.show.transp.scss b/ui/pagelets/css/build/gen/streamer.show.transp.scss
deleted file mode 100644
index 6d1add972df0b..0000000000000
--- a/ui/pagelets/css/build/gen/streamer.show.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../streamer.show';
diff --git a/ui/pagelets/css/build/gen/tagify.dark.scss b/ui/pagelets/css/build/gen/tagify.dark.scss
deleted file mode 100644
index 30df68acec48b..0000000000000
--- a/ui/pagelets/css/build/gen/tagify.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../tagify';
diff --git a/ui/pagelets/css/build/gen/tagify.light.scss b/ui/pagelets/css/build/gen/tagify.light.scss
deleted file mode 100644
index b56fc2b99317d..0000000000000
--- a/ui/pagelets/css/build/gen/tagify.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../tagify';
diff --git a/ui/pagelets/css/build/gen/tagify.transp.scss b/ui/pagelets/css/build/gen/tagify.transp.scss
deleted file mode 100644
index 275c59071196f..0000000000000
--- a/ui/pagelets/css/build/gen/tagify.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../tagify';
diff --git a/ui/pagelets/css/build/gen/team.dark.scss b/ui/pagelets/css/build/gen/team.dark.scss
deleted file mode 100644
index d12e027d9f4d6..0000000000000
--- a/ui/pagelets/css/build/gen/team.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../team';
diff --git a/ui/pagelets/css/build/gen/team.light.scss b/ui/pagelets/css/build/gen/team.light.scss
deleted file mode 100644
index ddf53985da38d..0000000000000
--- a/ui/pagelets/css/build/gen/team.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../team';
diff --git a/ui/pagelets/css/build/gen/team.transp.scss b/ui/pagelets/css/build/gen/team.transp.scss
deleted file mode 100644
index e50299f0e36bb..0000000000000
--- a/ui/pagelets/css/build/gen/team.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../team';
diff --git a/ui/pagelets/css/build/gen/tv.embed.dark.scss b/ui/pagelets/css/build/gen/tv.embed.dark.scss
deleted file mode 100644
index 9a1be6aed643e..0000000000000
--- a/ui/pagelets/css/build/gen/tv.embed.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../tv.embed';
diff --git a/ui/pagelets/css/build/gen/tv.embed.light.scss b/ui/pagelets/css/build/gen/tv.embed.light.scss
deleted file mode 100644
index 85a27d70b1731..0000000000000
--- a/ui/pagelets/css/build/gen/tv.embed.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../tv.embed';
diff --git a/ui/pagelets/css/build/gen/tv.embed.transp.scss b/ui/pagelets/css/build/gen/tv.embed.transp.scss
deleted file mode 100644
index 8b47c2f285c79..0000000000000
--- a/ui/pagelets/css/build/gen/tv.embed.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../tv.embed';
diff --git a/ui/pagelets/css/build/gen/tv.games.dark.scss b/ui/pagelets/css/build/gen/tv.games.dark.scss
deleted file mode 100644
index 0ccad7f0a0279..0000000000000
--- a/ui/pagelets/css/build/gen/tv.games.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../tv.games';
diff --git a/ui/pagelets/css/build/gen/tv.games.light.scss b/ui/pagelets/css/build/gen/tv.games.light.scss
deleted file mode 100644
index e3d917398b94c..0000000000000
--- a/ui/pagelets/css/build/gen/tv.games.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../tv.games';
diff --git a/ui/pagelets/css/build/gen/tv.games.transp.scss b/ui/pagelets/css/build/gen/tv.games.transp.scss
deleted file mode 100644
index a54ceb9734738..0000000000000
--- a/ui/pagelets/css/build/gen/tv.games.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../tv.games';
diff --git a/ui/pagelets/css/build/gen/tv.single.dark.scss b/ui/pagelets/css/build/gen/tv.single.dark.scss
deleted file mode 100644
index 5d016c7e003cd..0000000000000
--- a/ui/pagelets/css/build/gen/tv.single.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../tv.single';
diff --git a/ui/pagelets/css/build/gen/tv.single.light.scss b/ui/pagelets/css/build/gen/tv.single.light.scss
deleted file mode 100644
index ecff56610913a..0000000000000
--- a/ui/pagelets/css/build/gen/tv.single.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../tv.single';
diff --git a/ui/pagelets/css/build/gen/tv.single.transp.scss b/ui/pagelets/css/build/gen/tv.single.transp.scss
deleted file mode 100644
index 509d55de08a16..0000000000000
--- a/ui/pagelets/css/build/gen/tv.single.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../tv.single';
diff --git a/ui/pagelets/css/build/gen/ublog.dark.scss b/ui/pagelets/css/build/gen/ublog.dark.scss
deleted file mode 100644
index 033aa51852921..0000000000000
--- a/ui/pagelets/css/build/gen/ublog.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../ublog';
diff --git a/ui/pagelets/css/build/gen/ublog.form.dark.scss b/ui/pagelets/css/build/gen/ublog.form.dark.scss
deleted file mode 100644
index 1b1818e2966be..0000000000000
--- a/ui/pagelets/css/build/gen/ublog.form.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../ublog.form';
diff --git a/ui/pagelets/css/build/gen/ublog.form.light.scss b/ui/pagelets/css/build/gen/ublog.form.light.scss
deleted file mode 100644
index 022b1d68d4e6b..0000000000000
--- a/ui/pagelets/css/build/gen/ublog.form.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../ublog.form';
diff --git a/ui/pagelets/css/build/gen/ublog.form.transp.scss b/ui/pagelets/css/build/gen/ublog.form.transp.scss
deleted file mode 100644
index 042aa8ae1cd3a..0000000000000
--- a/ui/pagelets/css/build/gen/ublog.form.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../ublog.form';
diff --git a/ui/pagelets/css/build/gen/ublog.light.scss b/ui/pagelets/css/build/gen/ublog.light.scss
deleted file mode 100644
index 12c8e57c46b06..0000000000000
--- a/ui/pagelets/css/build/gen/ublog.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../ublog';
diff --git a/ui/pagelets/css/build/gen/ublog.transp.scss b/ui/pagelets/css/build/gen/ublog.transp.scss
deleted file mode 100644
index 69fe5ee160274..0000000000000
--- a/ui/pagelets/css/build/gen/ublog.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../ublog';
diff --git a/ui/pagelets/css/build/gen/user-simul.dark.scss b/ui/pagelets/css/build/gen/user-simul.dark.scss
deleted file mode 100644
index dc2f221ba1cbd..0000000000000
--- a/ui/pagelets/css/build/gen/user-simul.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../user-simul';
diff --git a/ui/pagelets/css/build/gen/user-simul.light.scss b/ui/pagelets/css/build/gen/user-simul.light.scss
deleted file mode 100644
index f71188a146aa3..0000000000000
--- a/ui/pagelets/css/build/gen/user-simul.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../user-simul';
diff --git a/ui/pagelets/css/build/gen/user-simul.transp.scss b/ui/pagelets/css/build/gen/user-simul.transp.scss
deleted file mode 100644
index 4447cb4e6e564..0000000000000
--- a/ui/pagelets/css/build/gen/user-simul.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../user-simul';
diff --git a/ui/pagelets/css/build/gen/user-tournament.dark.scss b/ui/pagelets/css/build/gen/user-tournament.dark.scss
deleted file mode 100644
index f9b45ddaaf53d..0000000000000
--- a/ui/pagelets/css/build/gen/user-tournament.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../user-tournament';
diff --git a/ui/pagelets/css/build/gen/user-tournament.light.scss b/ui/pagelets/css/build/gen/user-tournament.light.scss
deleted file mode 100644
index b005297b6646d..0000000000000
--- a/ui/pagelets/css/build/gen/user-tournament.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../user-tournament';
diff --git a/ui/pagelets/css/build/gen/user-tournament.transp.scss b/ui/pagelets/css/build/gen/user-tournament.transp.scss
deleted file mode 100644
index 400b05ffcab75..0000000000000
--- a/ui/pagelets/css/build/gen/user-tournament.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../user-tournament';
diff --git a/ui/pagelets/css/build/gen/user.list.dark.scss b/ui/pagelets/css/build/gen/user.list.dark.scss
deleted file mode 100644
index c59730585f88c..0000000000000
--- a/ui/pagelets/css/build/gen/user.list.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../user.list';
diff --git a/ui/pagelets/css/build/gen/user.list.light.scss b/ui/pagelets/css/build/gen/user.list.light.scss
deleted file mode 100644
index 861a6dacbfa8f..0000000000000
--- a/ui/pagelets/css/build/gen/user.list.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../user.list';
diff --git a/ui/pagelets/css/build/gen/user.list.transp.scss b/ui/pagelets/css/build/gen/user.list.transp.scss
deleted file mode 100644
index 519b2ca5bf079..0000000000000
--- a/ui/pagelets/css/build/gen/user.list.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../user.list';
diff --git a/ui/pagelets/css/build/gen/user.rating.stats.dark.scss b/ui/pagelets/css/build/gen/user.rating.stats.dark.scss
deleted file mode 100644
index 1effd830eead9..0000000000000
--- a/ui/pagelets/css/build/gen/user.rating.stats.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../user.rating.stats';
diff --git a/ui/pagelets/css/build/gen/user.rating.stats.light.scss b/ui/pagelets/css/build/gen/user.rating.stats.light.scss
deleted file mode 100644
index daebf6dcdc104..0000000000000
--- a/ui/pagelets/css/build/gen/user.rating.stats.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../user.rating.stats';
diff --git a/ui/pagelets/css/build/gen/user.rating.stats.transp.scss b/ui/pagelets/css/build/gen/user.rating.stats.transp.scss
deleted file mode 100644
index 760ae564bae81..0000000000000
--- a/ui/pagelets/css/build/gen/user.rating.stats.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../user.rating.stats';
diff --git a/ui/pagelets/css/build/gen/user.show.dark.scss b/ui/pagelets/css/build/gen/user.show.dark.scss
deleted file mode 100644
index 3b549c80e2f0a..0000000000000
--- a/ui/pagelets/css/build/gen/user.show.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../user.show';
diff --git a/ui/pagelets/css/build/gen/user.show.light.scss b/ui/pagelets/css/build/gen/user.show.light.scss
deleted file mode 100644
index 6ab68b047a50d..0000000000000
--- a/ui/pagelets/css/build/gen/user.show.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../user.show';
diff --git a/ui/pagelets/css/build/gen/user.show.search.dark.scss b/ui/pagelets/css/build/gen/user.show.search.dark.scss
deleted file mode 100644
index 266a8d0d218a7..0000000000000
--- a/ui/pagelets/css/build/gen/user.show.search.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../user.show.search';
diff --git a/ui/pagelets/css/build/gen/user.show.search.light.scss b/ui/pagelets/css/build/gen/user.show.search.light.scss
deleted file mode 100644
index a1758426a7244..0000000000000
--- a/ui/pagelets/css/build/gen/user.show.search.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../user.show.search';
diff --git a/ui/pagelets/css/build/gen/user.show.search.transp.scss b/ui/pagelets/css/build/gen/user.show.search.transp.scss
deleted file mode 100644
index 7f2724b28b2df..0000000000000
--- a/ui/pagelets/css/build/gen/user.show.search.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../user.show.search';
diff --git a/ui/pagelets/css/build/gen/user.show.transp.scss b/ui/pagelets/css/build/gen/user.show.transp.scss
deleted file mode 100644
index 858e79a9396c6..0000000000000
--- a/ui/pagelets/css/build/gen/user.show.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../user.show';
diff --git a/ui/pagelets/css/build/gen/variant.dark.scss b/ui/pagelets/css/build/gen/variant.dark.scss
deleted file mode 100644
index 350cee73ce5c3..0000000000000
--- a/ui/pagelets/css/build/gen/variant.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../variant';
diff --git a/ui/pagelets/css/build/gen/variant.light.scss b/ui/pagelets/css/build/gen/variant.light.scss
deleted file mode 100644
index 0f3609de9307e..0000000000000
--- a/ui/pagelets/css/build/gen/variant.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../variant';
diff --git a/ui/pagelets/css/build/gen/variant.transp.scss b/ui/pagelets/css/build/gen/variant.transp.scss
deleted file mode 100644
index 602715abb1c93..0000000000000
--- a/ui/pagelets/css/build/gen/variant.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../variant';
diff --git a/ui/pagelets/css/build/gen/video.dark.scss b/ui/pagelets/css/build/gen/video.dark.scss
deleted file mode 100644
index d57e3a14af438..0000000000000
--- a/ui/pagelets/css/build/gen/video.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../video';
diff --git a/ui/pagelets/css/build/gen/video.light.scss b/ui/pagelets/css/build/gen/video.light.scss
deleted file mode 100644
index b6386a07028d0..0000000000000
--- a/ui/pagelets/css/build/gen/video.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../video';
diff --git a/ui/pagelets/css/build/gen/video.transp.scss b/ui/pagelets/css/build/gen/video.transp.scss
deleted file mode 100644
index 86e485b52c006..0000000000000
--- a/ui/pagelets/css/build/gen/video.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../video';
diff --git a/ui/pagelets/package.json b/ui/pagelets/package.json
deleted file mode 100644
index 06bb25aaad1f6..0000000000000
--- a/ui/pagelets/package.json
+++ /dev/null
@@ -1,93 +0,0 @@
-{
-  "name": "pagelets",
-  "version": "2.0.0",
-  "private": true,
-  "description": "assorted modules",
-  "author": "T-Bone Duplexus",
-  "license": "AGPL-3.0-or-later",
-  "exports": {
-    "./*": "./dist/load/*.js"
-  },
-  "typesVersions": {
-    "*": {
-      "*": [
-        "dist/load/*"
-      ]
-    }
-  },
-  "dependencies": {
-    "@fnando/sparkline": "^0.3.10",
-    "@toast-ui/editor": "3.1.7",
-    "@textcomplete/core": "^0.1.13",
-    "@textcomplete/textarea": "^0.1.13",
-    "@types/debounce-promise": "^3.1.6",
-    "@types/fnando__sparkline": "^0.3.7",
-    "@types/yaireo__tagify": "4.17.5",
-    "@types/zxcvbn": "^4.4.4",
-    "@yaireo/tagify": "4.17.9",
-    "chat": "workspace:*",
-    "chess": "workspace:*",
-    "common": "workspace:*",
-    "cropperjs": "^1.6.1",
-    "debounce-promise": "^3.1.2",
-    "emoji-mart": "^5.5.2",
-    "flatpickr": "^4.6.13",
-    "lichess-pgn-viewer": "^2.0.1",
-    "prop-types": "^15.8.1",
-    "tablesort": "^5.3.0",
-    "zxcvbn": "^4.4.2"
-  },
-  "sideEffects": false,
-  "lichess": {
-    "modules": {
-      "esm": {
-        "src/user.ts": "user",
-        "src/clas.ts": "clas",
-        "src/captcha.ts": "captcha",
-        "src/expandText.ts": "expandText",
-        "src/lpv.ts": "lpv",
-        "src/team.ts": "team",
-        "src/forum.ts": "forum",
-        "src/account.ts": "account",
-        "src/passwordComplexity.ts": "passwordComplexity",
-        "src/coachForm.ts": "coach.form",
-        "src/challengePage.ts": "challengePage",
-        "src/checkout.ts": "checkout",
-        "src/plan.ts": "plan",
-        "src/login.ts": "login",
-        "src/teamBattleForm.ts": "teamBattleForm",
-        "src/tourForm.ts": "tourForm",
-        "src/gameSearch.ts": "gameSearch",
-        "src/userComplete.ts": "userComplete",
-        "src/infiniteScroll.ts": "infiniteScroll",
-        "src/flatpickr.ts": "flatpickr",
-        "src/appeal.ts": "appeal",
-        "src/publicChats.ts": "publicChats",
-        "src/contact.ts": "contact",
-        "src/userGamesDownload.ts": "userGamesDownload",
-        "src/tvGames.ts": "tvGames",
-        "src/ublog.ts": "ublog",
-        "src/ublogForm.ts": "ublogForm",
-        "src/streamer.ts": "streamer",
-        "src/soundMove.ts": "soundMove",
-        "src/flairPicker.ts": "flairPicker",
-        "src/dailyFeed.ts": "dailyFeed",
-        "src/relayForm.ts": "relayForm",
-        "src/diagnostic.ts": "diagnosticDialog",
-        "src/crop.ts": "cropDialog",
-        "src/cms.ts": "cms",
-        "src/eventCountdown.ts": "eventCountdown"
-      }
-    },
-    "copy": [
-      {
-        "src": "node_modules/cropperjs/dist/cropper.min.css",
-        "dest": "../../public/npm"
-      },
-      {
-        "src": "../../node_modules/chessground/dist/chessground.min.js",
-        "dest": "../../public/npm"
-      }
-    ]
-  }
-}
diff --git a/ui/palantir/package.json b/ui/palantir/package.json
index 7b750c7e0f777..5fc599061e389 100644
--- a/ui/palantir/package.json
+++ b/ui/palantir/package.json
@@ -4,8 +4,8 @@
   "private": true,
   "description": "lichess.org webrtc media calls",
   "type": "module",
-  "module": "dist/main.js",
-  "types": "dist/main.d.ts",
+  "module": "dist/palantir.js",
+  "types": "dist/palantir.d.ts",
   "keywords": [
     "chess",
     "lichess",
@@ -20,9 +20,7 @@
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "src/main.ts": "palantir"
-      }
+      "src/palantir.ts": "palantir"
     }
   }
 }
diff --git a/ui/palantir/src/main.ts b/ui/palantir/src/palantir.ts
similarity index 100%
rename from ui/palantir/src/main.ts
rename to ui/palantir/src/palantir.ts
diff --git a/ui/puz/css/_combo.scss b/ui/puz/css/_combo.scss
index 9c2290f231f84..427fd818a9dd3 100644
--- a/ui/puz/css/_combo.scss
+++ b/ui/puz/css/_combo.scss
@@ -154,7 +154,7 @@
 
     &.active {
       animation: level-fade-in 1s ease-out;
-      background: mix($c-level, black, 80%);
+      background: $m-primary_black--mix-80;
       border: 1px solid $c-level;
       box-shadow: 0 0 10px $c-level;
       color: white;
@@ -164,11 +164,11 @@
       }
 
       &:nth-child(3) {
-        background: mix($c-level, white, 60%);
+        background: $m-primary_white--mix-60;
       }
 
       &:nth-child(4) {
-        background: mix($c-level, white, 40%);
+        background: $m-primary_white--mix-40;
       }
     }
   }
diff --git a/ui/puz/css/_puz.scss b/ui/puz/css/_puz.scss
index c17fa55b7ea3d..9355ff054355d 100644
--- a/ui/puz/css/_puz.scss
+++ b/ui/puz/css/_puz.scss
@@ -5,10 +5,10 @@
 @import 'history';
 
 #main-wrap {
-  --main-max-width: calc(100vh - #{$site-header-outer-height} - 9rem);
+  ---main-max-width: calc(100vh - #{$site-header-outer-height} - 9rem);
 
   @include mq-at-least-col2 {
-    --main-max-width: auto;
+    ---main-max-width: auto;
   }
 
   user-select: none;
diff --git a/ui/puz/package.json b/ui/puz/package.json
index 9266c164cd569..fea28a2b28efc 100644
--- a/ui/puz/package.json
+++ b/ui/puz/package.json
@@ -4,10 +4,7 @@
   "private": true,
   "description": "lichess.org fast puzzle utils",
   "type": "module",
-  "module": "dist/main.js",
-  "types": "dist/main.d.ts",
   "exports": {
-    ".": "./dist/main.js",
     "./*": "./dist/*.js"
   },
   "typesVersions": {
diff --git a/ui/puzzle/css/_after.scss b/ui/puzzle/css/_after.scss
index c6800fb22149e..aefabf3ed74c1 100644
--- a/ui/puzzle/css/_after.scss
+++ b/ui/puzzle/css/_after.scss
@@ -11,12 +11,12 @@
     justify-content: center;
     font-size: 1.3em;
     background: $c-primary;
-    color: $c-primary-over;
+    color: $c-over;
     text-transform: uppercase;
     padding: 2em;
 
     &:hover {
-      background: lighten($c-primary, 10%);
+      background: $m-primary--lighten-10;
     }
 
     i::before {
@@ -130,7 +130,7 @@
     &:hover,
     &.active {
       background: $c-good;
-      color: $c-good-over;
+      color: $c-over;
     }
 
     &.vote-down:hover,
diff --git a/ui/puzzle/css/_dashboard.scss b/ui/puzzle/css/_dashboard.scss
index efa2c1ee33837..205f134a48cfc 100644
--- a/ui/puzzle/css/_dashboard.scss
+++ b/ui/puzzle/css/_dashboard.scss
@@ -83,24 +83,22 @@
 
     background: $c-bg-zebra2;
 
-    $c-darken: #333;
-
     &--win {
-      $c-first: mix($c-good, $c-darken, 85%);
-      $c-fix: mix($c-good, $c-darken, 50%);
-      $c-fail: mix($c-bad, $c-darken, 80%);
+      $c-first: $m-secondary_dark--mix-85;
+      $c-fix: $m-secondary_dark--mix-50;
+      $c-fail: $m-bad_dark--mix-80;
 
-      color: $c-good-over;
+      color: $c-over;
 
       background:
         #{$glow-gradient},
         linear-gradient(
           to right,
           $c-first 0%,
-          $c-first var(--first),
-          $c-fix var(--first),
-          $c-fix var(--win),
-          $c-fail var(--win),
+          $c-first var(---first),
+          $c-fix var(---first),
+          $c-fix var(---win),
+          $c-fail var(---win),
           $c-fail 100%
         );
 
@@ -110,18 +108,18 @@
           linear-gradient(
             to left,
             $c-first 0%,
-            $c-first var(--first),
-            $c-fix var(--first),
-            $c-fix var(--win),
-            $c-fail var(--win),
+            $c-first var(---first),
+            $c-fix var(---first),
+            $c-fix var(---win),
+            $c-fail var(---win),
             $c-fail 100%
           );
       }
     }
 
     &--perf {
-      background: #{$glow-gradient} mix($c-brag, $c-darken, 85%);
-      color: $c-good-over;
+      background: #{$glow-gradient} $m-brag_dark--mix-85;
+      color: $c-over;
     }
 
     &--fix {
@@ -131,17 +129,17 @@
         justify-content: space-evenly;
       }
 
-      color: $c-good-over;
+      color: $c-over;
       opacity: 0.7;
 
       &[href] {
         opacity: 1;
         cursor: pointer;
-        background: #{$glow-gradient} mix($c-primary, $c-darken, 80%);
+        background: #{$glow-gradient} $m-primary_dark--mix-80;
 
         &:hover {
           background: #{$glow-gradient} $c-primary;
-          color: $c-good-over;
+          color: $c-over;
         }
       }
 
@@ -152,7 +150,7 @@
 
         i {
           opacity: 1;
-          color: mix($c-primary, $c-bg-box, 70%);
+          color: $m-primary_bg--mix-70;
           position: absolute;
           font-size: 5.5em !important;
           margin-bottom: 0.2em;
@@ -168,11 +166,11 @@
       i {
         font-size: 4em;
         opacity: 0.8;
-        color: $c-good-over;
+        color: $c-over;
       }
     }
 
-    @if $theme-light {
+    @include if-light {
       &--played span {
         color: $c-font-dim !important;
       }
diff --git a/ui/puzzle/css/_layout.scss b/ui/puzzle/css/_layout.scss
index 4a9810b9f89e4..e9efa36ec617e 100644
--- a/ui/puzzle/css/_layout.scss
+++ b/ui/puzzle/css/_layout.scss
@@ -1,10 +1,10 @@
 $puzzle-block-gap: $block-gap;
 
 #main-wrap {
-  --main-max-width: calc(100vh - #{$site-header-outer-height} - #{$col1-uniboard-controls});
+  ---main-max-width: calc(100vh - #{$site-header-outer-height} - #{$col1-uniboard-controls});
 
   @include mq-at-least-col2 {
-    --main-max-width: auto;
+    ---main-max-width: auto;
   }
 }
 
@@ -64,7 +64,7 @@ $puzzle-block-gap: $block-gap;
   }
 
   @include mq-at-least-col2 {
-    grid-template-columns: var(--col2-uniboard-width) $puzzle-block-gap $col2-uniboard-table;
+    grid-template-columns: var(---col2-uniboard-width) $puzzle-block-gap $col2-uniboard-table;
     grid-template-rows: fit-content(0);
     grid-template-areas:
       'board   gauge tools'
@@ -87,7 +87,7 @@ $puzzle-block-gap: $block-gap;
       'side    . session .     controls'
       'side    . kb-move .     controls'
       'side    . .       .     .';
-    grid-template-columns: $col3-uniboard-side $puzzle-block-gap var(--col3-uniboard-width) $puzzle-block-gap $col3-uniboard-table;
+    grid-template-columns: $col3-uniboard-side $puzzle-block-gap var(---col3-uniboard-width) $puzzle-block-gap $col3-uniboard-table;
   }
 
   &__side {
diff --git a/ui/puzzle/css/_openings.scss b/ui/puzzle/css/_openings.scss
index ad6f0897d2321..57119eda4d4dd 100644
--- a/ui/puzzle/css/_openings.scss
+++ b/ui/puzzle/css/_openings.scss
@@ -10,7 +10,7 @@
 
   &__list {
     display: grid;
-    margin: 0 0 3em var(--box-padding);
+    margin: 0 0 3em var(---box-padding);
     grid-template-columns: repeat(auto-fill, minmax(40ch, 1fr));
 
     @media (max-width: at-most($xx-small)) {
@@ -25,14 +25,14 @@
     padding: 0.5em 0.7em 0.5em 1.5em;
 
     &:hover {
-      background: mix($c-bg-box, $c-link, 90%);
+      background: $m-primary_bg--mix-10;
     }
 
     &.opening-mine {
       color: $c-brag;
       font-weight: bold;
       &:hover {
-        background: mix($c-bg-box, $c-brag, 80%);
+        background: $m-brag_bg--mix-20;
       }
     }
 
diff --git a/ui/puzzle/css/_side.scss b/ui/puzzle/css/_side.scss
index 1aefd76d5c539..8708987c004d8 100644
--- a/ui/puzzle/css/_side.scss
+++ b/ui/puzzle/css/_side.scss
@@ -156,7 +156,7 @@
         background-image: url(../piece/cburnett/bK.svg);
       }
       .label.active {
-        background: mix($c-bg-box, $c-primary, 50%);
+        background: $m-primary_bg--mix-50;
       }
     }
   }
@@ -194,8 +194,8 @@
         top: 0;
         bottom: 0;
         @include inline-start(0);
-        width: var(--p);
-        background: mix($c-bg-page, $c-primary, 40%)
+        width: var(---p);
+        background: $m-primary_bg-page--mix-60
           linear-gradient(180deg, rgba(255%, 255%, 255%, 0.15) 0%, transparent 35%);
         animation: bar-glider-anim 3s linear infinite;
 
@@ -227,7 +227,7 @@
     }
 
     &--daily {
-      outline: 3px solid mix($c-bg-page, $c-good, 50%);
+      outline: 3px solid $m-secondary_bg-page--mix-50;
       h2 {
         margin: 0;
         text-align: center;
@@ -254,7 +254,7 @@
       }
 
       &:hover {
-        background: mix($c-bg-box, $c-link, 90%);
+        background: $m-primary_bg--mix-10;
       }
 
       &.strike a {
@@ -301,7 +301,7 @@
     &:hover,
     &.active {
       background: $c-good;
-      color: $c-good-over !important;
+      color: $c-over !important;
     }
 
     &.vote-down:hover,
diff --git a/ui/puzzle/css/_themes.scss b/ui/puzzle/css/_themes.scss
index 337594386c7ef..769bf34914a6d 100644
--- a/ui/puzzle/css/_themes.scss
+++ b/ui/puzzle/css/_themes.scss
@@ -7,7 +7,7 @@
 
   &__list {
     display: grid;
-    margin-inline-start: var(--box-padding);
+    margin-inline-start: var(---box-padding);
     grid-template-columns: repeat(auto-fill, minmax(50ch, 1fr));
 
     @media (max-width: at-most($xx-small)) {
@@ -32,7 +32,7 @@
     }
 
     &:hover {
-      background: mix($c-bg-box, $c-link, 90%);
+      background: $m-primary_bg--mix-10;
 
       img {
         opacity: 1;
@@ -73,7 +73,7 @@
       @extend %box-neat;
 
       font-size: 1.2em;
-      background: mix($c-bg-box, $c-good, 80%);
+      background: $m-secondary_bg--mix-20;
       color: $c-good;
       margin: 2em 4em;
 
@@ -86,11 +86,11 @@
       }
 
       &:hover {
-        background: mix($c-bg-box, $c-good, 74%);
+        background: $m-secondary_bg--mix-25;
       }
 
       @media (max-width: at-most($small)) {
-        margin: 2em var(--box-padding) 2em 0;
+        margin: 2em var(---box-padding) 2em 0;
       }
     }
   }
diff --git a/ui/puzzle/css/build/gen/puzzle.dark.scss b/ui/puzzle/css/build/gen/puzzle.dark.scss
deleted file mode 100644
index 25d0a50ef97e5..0000000000000
--- a/ui/puzzle/css/build/gen/puzzle.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../puzzle';
diff --git a/ui/puzzle/css/build/gen/puzzle.dashboard.dark.scss b/ui/puzzle/css/build/gen/puzzle.dashboard.dark.scss
deleted file mode 100644
index fdf1781c49beb..0000000000000
--- a/ui/puzzle/css/build/gen/puzzle.dashboard.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../puzzle.dashboard';
diff --git a/ui/puzzle/css/build/gen/puzzle.dashboard.light.scss b/ui/puzzle/css/build/gen/puzzle.dashboard.light.scss
deleted file mode 100644
index fa5ea56568584..0000000000000
--- a/ui/puzzle/css/build/gen/puzzle.dashboard.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../puzzle.dashboard';
diff --git a/ui/puzzle/css/build/gen/puzzle.dashboard.transp.scss b/ui/puzzle/css/build/gen/puzzle.dashboard.transp.scss
deleted file mode 100644
index e90fa73725275..0000000000000
--- a/ui/puzzle/css/build/gen/puzzle.dashboard.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../puzzle.dashboard';
diff --git a/ui/puzzle/css/build/gen/puzzle.light.scss b/ui/puzzle/css/build/gen/puzzle.light.scss
deleted file mode 100644
index 5171496b10f9a..0000000000000
--- a/ui/puzzle/css/build/gen/puzzle.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../puzzle';
diff --git a/ui/puzzle/css/build/gen/puzzle.page.dark.scss b/ui/puzzle/css/build/gen/puzzle.page.dark.scss
deleted file mode 100644
index 9b459fb0dca69..0000000000000
--- a/ui/puzzle/css/build/gen/puzzle.page.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../puzzle.page';
diff --git a/ui/puzzle/css/build/gen/puzzle.page.light.scss b/ui/puzzle/css/build/gen/puzzle.page.light.scss
deleted file mode 100644
index 62e427a6107d0..0000000000000
--- a/ui/puzzle/css/build/gen/puzzle.page.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../puzzle.page';
diff --git a/ui/puzzle/css/build/gen/puzzle.page.transp.scss b/ui/puzzle/css/build/gen/puzzle.page.transp.scss
deleted file mode 100644
index a77cad200c2d0..0000000000000
--- a/ui/puzzle/css/build/gen/puzzle.page.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../puzzle.page';
diff --git a/ui/puzzle/css/build/gen/puzzle.transp.scss b/ui/puzzle/css/build/gen/puzzle.transp.scss
deleted file mode 100644
index 7660810217b48..0000000000000
--- a/ui/puzzle/css/build/gen/puzzle.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../puzzle';
diff --git a/ui/puzzle/css/build/_puzzle.dashboard.scss b/ui/puzzle/css/build/puzzle.dashboard.scss
similarity index 100%
rename from ui/puzzle/css/build/_puzzle.dashboard.scss
rename to ui/puzzle/css/build/puzzle.dashboard.scss
diff --git a/ui/puzzle/css/build/_puzzle.page.scss b/ui/puzzle/css/build/puzzle.page.scss
similarity index 100%
rename from ui/puzzle/css/build/_puzzle.page.scss
rename to ui/puzzle/css/build/puzzle.page.scss
diff --git a/ui/puzzle/css/build/_puzzle.scss b/ui/puzzle/css/build/puzzle.scss
similarity index 100%
rename from ui/puzzle/css/build/_puzzle.scss
rename to ui/puzzle/css/build/puzzle.scss
diff --git a/ui/puzzle/package.json b/ui/puzzle/package.json
index 4a09125e563b6..9d51d6ffe64ed 100644
--- a/ui/puzzle/package.json
+++ b/ui/puzzle/package.json
@@ -26,12 +26,10 @@
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "src/main.ts": "puzzle",
-        "src/dashboard.ts": "puzzle.dashboard",
-        "src/opening.ts": "puzzle.opening",
-        "src/plugins/nvui.ts": "puzzle.nvui"
-      }
+      "src/puzzle.ts": "puzzle",
+      "src/puzzle.dashboard.ts": "puzzle.dashboard",
+      "src/puzzle.opening.ts": "puzzle.opening",
+      "src/plugins/puzzle.nvui.ts": "puzzle.nvui"
     }
   }
 }
diff --git a/ui/puzzle/src/ctrl.ts b/ui/puzzle/src/ctrl.ts
index a89f40f658594..7a92b89df9ada 100644
--- a/ui/puzzle/src/ctrl.ts
+++ b/ui/puzzle/src/ctrl.ts
@@ -153,7 +153,7 @@ export default class PuzzleCtrl implements ParentCtrl {
       else this.voiceMove = makeVoiceMove(makeRoot(), up);
     }
     if (this.opts.pref.keyboardMove) {
-      this.keyboardMove ??= makeKeyboardMove(makeRoot());
+      if (!this.keyboardMove) this.keyboardMove = makeKeyboardMove(makeRoot());
       this.keyboardMove.update(up);
     }
     requestAnimationFrame(() => this.redraw());
diff --git a/ui/puzzle/src/plugins/nvui.ts b/ui/puzzle/src/plugins/puzzle.nvui.ts
similarity index 100%
rename from ui/puzzle/src/plugins/nvui.ts
rename to ui/puzzle/src/plugins/puzzle.nvui.ts
diff --git a/ui/puzzle/src/dashboard.ts b/ui/puzzle/src/puzzle.dashboard.ts
similarity index 100%
rename from ui/puzzle/src/dashboard.ts
rename to ui/puzzle/src/puzzle.dashboard.ts
diff --git a/ui/puzzle/src/opening.ts b/ui/puzzle/src/puzzle.opening.ts
similarity index 100%
rename from ui/puzzle/src/opening.ts
rename to ui/puzzle/src/puzzle.opening.ts
diff --git a/ui/puzzle/src/main.ts b/ui/puzzle/src/puzzle.ts
similarity index 100%
rename from ui/puzzle/src/main.ts
rename to ui/puzzle/src/puzzle.ts
diff --git a/ui/puzzle/src/view/side.ts b/ui/puzzle/src/view/side.ts
index 159fe1bb95bce..a35bf269d9ce0 100644
--- a/ui/puzzle/src/view/side.ts
+++ b/ui/puzzle/src/view/side.ts
@@ -165,7 +165,7 @@ export function replay(ctrl: PuzzleCtrl): MaybeVNode {
     ]),
     h('div.puzzle__side__replay__bar', {
       attrs: {
-        style: `--p:${replay.of ? Math.round((100 * i) / replay.of) : 1}%`,
+        style: `---p:${replay.of ? Math.round((100 * i) / replay.of) : 1}%`,
         'data-text': `${i} / ${replay.of}`,
       },
     }),
diff --git a/ui/puzzle/tsconfig.json b/ui/puzzle/tsconfig.json
index a7f3052684119..b5f998f2165ed 100644
--- a/ui/puzzle/tsconfig.json
+++ b/ui/puzzle/tsconfig.json
@@ -6,6 +6,7 @@
   },
   "isolatedModules": true,
   "references": [
+    { "path": "../board/tsconfig.json" },
     { "path": "../ceval/tsconfig.json" },
     { "path": "../chess/tsconfig.json" },
     { "path": "../common/tsconfig.json" },
diff --git a/ui/racer/css/_countdown.scss b/ui/racer/css/_countdown.scss
index 97a23d5551284..379d2e46b5bb7 100644
--- a/ui/racer/css/_countdown.scss
+++ b/ui/racer/css/_countdown.scss
@@ -31,11 +31,11 @@
           opacity: 1;
         }
         &.red {
-          background: $c-red;
+          background: $c-bad;
           &.active {
             box-shadow:
-              0 0 2em $c-red,
-              0 0 4em $c-red;
+              0 0 2em $c-bad,
+              0 0 4em $c-bad;
           }
         }
         &.orange {
diff --git a/ui/racer/css/_race.scss b/ui/racer/css/_race.scss
index 6ed6ddef943d5..6c104cbcb68c5 100644
--- a/ui/racer/css/_race.scss
+++ b/ui/racer/css/_race.scss
@@ -88,7 +88,7 @@ $c-bg-position-y: 2px;
       color: $c-brag;
     }
     .racer__race__track--boost.racer__race__track--first & {
-      color: mix(saturate($c-brag, 50%), #fff, 70%);
+      color: $c-racer-boost;
     }
   }
 
diff --git a/ui/racer/css/_racer.scss b/ui/racer/css/_racer.scss
index ed6f87a0b6762..046c500ccde3d 100644
--- a/ui/racer/css/_racer.scss
+++ b/ui/racer/css/_racer.scss
@@ -14,7 +14,7 @@
   grid-template-areas: 'board' 'race' 'side' 'history';
 
   @include mq-at-least-col2 {
-    grid-template-columns: var(--col2-uniboard-width) $col2-uniboard-table;
+    grid-template-columns: var(---col2-uniboard-width) $col2-uniboard-table;
     grid-template-rows: auto fit-content(0);
     grid-template-areas:
       'board  side'
diff --git a/ui/racer/css/build/gen/racer-home.dark.scss b/ui/racer/css/build/gen/racer-home.dark.scss
deleted file mode 100644
index 53bbd419a8e38..0000000000000
--- a/ui/racer/css/build/gen/racer-home.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../racer-home';
diff --git a/ui/racer/css/build/gen/racer-home.light.scss b/ui/racer/css/build/gen/racer-home.light.scss
deleted file mode 100644
index fd8bfaec05e75..0000000000000
--- a/ui/racer/css/build/gen/racer-home.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../racer-home';
diff --git a/ui/racer/css/build/gen/racer-home.transp.scss b/ui/racer/css/build/gen/racer-home.transp.scss
deleted file mode 100644
index b0ad42ce94b9b..0000000000000
--- a/ui/racer/css/build/gen/racer-home.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../racer-home';
diff --git a/ui/racer/css/build/gen/racer.dark.scss b/ui/racer/css/build/gen/racer.dark.scss
deleted file mode 100644
index 7e5f9c3ed101f..0000000000000
--- a/ui/racer/css/build/gen/racer.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../racer';
diff --git a/ui/racer/css/build/gen/racer.light.scss b/ui/racer/css/build/gen/racer.light.scss
deleted file mode 100644
index fcf524e7ff3c3..0000000000000
--- a/ui/racer/css/build/gen/racer.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../racer';
diff --git a/ui/racer/css/build/gen/racer.transp.scss b/ui/racer/css/build/gen/racer.transp.scss
deleted file mode 100644
index 700f3fed756ed..0000000000000
--- a/ui/racer/css/build/gen/racer.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../racer';
diff --git a/ui/racer/css/build/_racer-home.scss b/ui/racer/css/build/racer-home.scss
similarity index 100%
rename from ui/racer/css/build/_racer-home.scss
rename to ui/racer/css/build/racer-home.scss
diff --git a/ui/racer/css/build/_racer.scss b/ui/racer/css/build/racer.scss
similarity index 100%
rename from ui/racer/css/build/_racer.scss
rename to ui/racer/css/build/racer.scss
diff --git a/ui/racer/package.json b/ui/racer/package.json
index 2e153a4751e81..7e7528cbc6abd 100644
--- a/ui/racer/package.json
+++ b/ui/racer/package.json
@@ -20,9 +20,7 @@
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "src/main.ts": "racer"
-      }
+      "src/racer.ts": "racer"
     }
   }
 }
diff --git a/ui/racer/src/main.ts b/ui/racer/src/racer.ts
similarity index 100%
rename from ui/racer/src/main.ts
rename to ui/racer/src/racer.ts
diff --git a/ui/round/css/_app-layout.scss b/ui/round/css/_app-layout.scss
index e5d2d3b120b57..09b5867cef452 100644
--- a/ui/round/css/_app-layout.scss
+++ b/ui/round/css/_app-layout.scss
@@ -78,7 +78,7 @@
 
   @include mq-at-least-col2 {
     grid-template-areas: 'board voice' 'board .' 'board mat-top' 'board clock-top' 'board expi-top' 'board user-top' 'board moves' 'board controls' 'board user-bot' 'board expi-bot' 'board clock-bot' 'board mat-bot' 'board .' 'kb-move .';
-    grid-template-columns: var(--col2-uniboard-width) $col2-uniboard-table;
+    grid-template-columns: var(---col2-uniboard-width) $col2-uniboard-table;
     grid-column-gap: $block-gap;
 
     &__table {
@@ -110,7 +110,7 @@
   }
 
   @include mq-at-least-col3 {
-    grid-template-columns: var(--col3-uniboard-width) $col3-uniboard-table;
+    grid-template-columns: var(---col3-uniboard-width) $col3-uniboard-table;
   }
 
   @include mq-is-col2-squeeze {
diff --git a/ui/round/css/_clock.scss b/ui/round/css/_clock.scss
index 49a4c922e568e..ad865cf4e3659 100644
--- a/ui/round/css/_clock.scss
+++ b/ui/round/css/_clock.scss
@@ -159,17 +159,17 @@
   }
 
   &.running .time {
-    background: mix($c-secondary, $c-bg-box, 30%);
+    background: $m-secondary_bg--mix-30;
     color: $c-font-clearer;
   }
 
   &.emerg .time,
   &.outoftime .time {
-    background-color: mix($c-bad, $c-bg-box, 25%);
+    background-color: $m-bad_bg--mix-25;
   }
 
   &.emerg.running .time {
-    background-color: mix($c-bad, $c-bg-box, 50%);
+    background-color: $m-bad_bg--mix-50;
     color: $c-font-clearer;
   }
 
diff --git a/ui/round/css/_control.scss b/ui/round/css/_control.scss
index 3a03a636c39c3..d1cfc976fe416 100644
--- a/ui/round/css/_control.scss
+++ b/ui/round/css/_control.scss
@@ -54,7 +54,7 @@
   @keyframes flash-once {
     from {
       background: $c-accent;
-      color: $c-accent-over;
+      color: $c-over;
     }
 
     to {
@@ -178,7 +178,7 @@
     }
 
     &.me {
-      background: mix($c-primary, $c-bg-box, 80%);
+      background: $m-primary_bg--mix-80;
     }
 
     @keyframes rubber-band {
@@ -247,7 +247,7 @@
     }
 
     &.fbt:not(.disabled):hover {
-      background: mix($c-link, $c-bg-box, 70%);
+      background: $m-primary_bg--mix-70;
       color: #fff;
       animation: none;
     }
@@ -263,7 +263,7 @@
       height: 6rem;
       border: 0;
       opacity: 0.7;
-      background: mix($c-bad, $c-bg-box, 50%);
+      background: $m-bad_bg--mix-50;
 
       @include transition;
 
@@ -275,7 +275,7 @@
 
       &:hover {
         background: $c-bad;
-        color: $c-bad-over;
+        color: $c-over;
         @include inline-end(-36px);
         width: 35px;
       }
diff --git a/ui/round/css/_icon.scss b/ui/round/css/_icon.scss
index 4e03df53f4601..8442f11e7a734 100644
--- a/ui/round/css/_icon.scss
+++ b/ui/round/css/_icon.scss
@@ -27,7 +27,7 @@
     }
 
     .fbt.yes {
-      $act-confirm-shade: mix(#000, $c-accent, 30%);
+      $act-confirm-shade: $m-accent_black--mix-70;
 
       position: absolute;
       @include inline-end(0);
diff --git a/ui/round/css/_layout.scss b/ui/round/css/_layout.scss
index 8b4d04d994100..774a07b339d35 100644
--- a/ui/round/css/_layout.scss
+++ b/ui/round/css/_layout.scss
@@ -1,8 +1,8 @@
 #main-wrap {
-  --main-max-width: auto;
+  ---main-max-width: auto;
 
   @include mq-is-col1 {
-    --main-max-width: calc(
+    ---main-max-width: calc(
       100vh - #{$site-header-outer-height} - #{$col1-player-clock-height * 2} - #{$col1-moves-height}
     );
   }
@@ -46,7 +46,7 @@
   }
 
   @include mq-at-least-col3 {
-    grid-template-columns: $col3-uniboard-side var(--col3-uniboard-width) $col3-uniboard-table;
+    grid-template-columns: $col3-uniboard-side var(---col3-uniboard-width) $col3-uniboard-table;
     grid-template-rows: fit-content(0);
     grid-template-areas: 'side  app   app' 'uchat under .';
 
diff --git a/ui/round/css/_meta.scss b/ui/round/css/_meta.scss
index 5b92d08619619..cb441e3ad9eb9 100644
--- a/ui/round/css/_meta.scss
+++ b/ui/round/css/_meta.scss
@@ -45,7 +45,7 @@
 
     abbr {
       text-decoration: none;
-      color: mix($c-font, $c-link, 50%);
+      color: $m-primary_font--mix-50;
     }
   }
 
diff --git a/ui/round/css/_moves-col1.scss b/ui/round/css/_moves-col1.scss
index c0307b851f861..6f3c5cd9f616b 100644
--- a/ui/round/css/_moves-col1.scss
+++ b/ui/round/css/_moves-col1.scss
@@ -24,13 +24,11 @@
     white-space: nowrap;
     overflow-x: scroll;
     color: $c-font-page;
+    box-shadow: 0 4px 12px #000 inset;
 
-    @if $theme-light {
-      box-shadow: 0 4px 4px c-light($c-bg-page, 78%) inset;
-    } @else {
-      box-shadow: 0 4px 12px #000 inset;
+    @include if-light {
+      box-shadow: 0 4px 4px #aaa inset;
     }
-
     &::-webkit-scrollbar {
       height: 0px;
     }
@@ -59,10 +57,9 @@
 
     &.#{$active-class},
     &:hover {
-      @if $theme-light {
-        background: hsl($c-site-hue, 20%, 85%);
-      } @else {
-        background: $c-bg-zebra;
+      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 4b454d250611e..b7143e5120ffe 100644
--- a/ui/round/css/_moves-col2.scss
+++ b/ui/round/css/_moves-col2.scss
@@ -49,7 +49,7 @@
 
     &.#{$active-class} {
       font-weight: bold;
-      background: mix($c-primary, $c-bg-box, 20%);
+      background: $m-primary_bg--mix-20;
       color: $c-font-clear;
     }
   }
diff --git a/ui/round/css/build/gen/round.dark.scss b/ui/round/css/build/gen/round.dark.scss
deleted file mode 100644
index 57105fc9a53cc..0000000000000
--- a/ui/round/css/build/gen/round.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../round';
diff --git a/ui/round/css/build/gen/round.light.scss b/ui/round/css/build/gen/round.light.scss
deleted file mode 100644
index f6496423cd704..0000000000000
--- a/ui/round/css/build/gen/round.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../round';
diff --git a/ui/round/css/build/gen/round.nvui.dark.scss b/ui/round/css/build/gen/round.nvui.dark.scss
deleted file mode 100644
index cdcc5acd2ab7d..0000000000000
--- a/ui/round/css/build/gen/round.nvui.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../round.nvui';
diff --git a/ui/round/css/build/gen/round.nvui.light.scss b/ui/round/css/build/gen/round.nvui.light.scss
deleted file mode 100644
index f013ce26a6b0e..0000000000000
--- a/ui/round/css/build/gen/round.nvui.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../round.nvui';
diff --git a/ui/round/css/build/gen/round.nvui.transp.scss b/ui/round/css/build/gen/round.nvui.transp.scss
deleted file mode 100644
index 9083e712ec9fb..0000000000000
--- a/ui/round/css/build/gen/round.nvui.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../round.nvui';
diff --git a/ui/round/css/build/gen/round.tour-standing.dark.scss b/ui/round/css/build/gen/round.tour-standing.dark.scss
deleted file mode 100644
index 664b54f3d7b58..0000000000000
--- a/ui/round/css/build/gen/round.tour-standing.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../round.tour-standing';
diff --git a/ui/round/css/build/gen/round.tour-standing.light.scss b/ui/round/css/build/gen/round.tour-standing.light.scss
deleted file mode 100644
index 34c5076a770c2..0000000000000
--- a/ui/round/css/build/gen/round.tour-standing.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../round.tour-standing';
diff --git a/ui/round/css/build/gen/round.tour-standing.transp.scss b/ui/round/css/build/gen/round.tour-standing.transp.scss
deleted file mode 100644
index 27725072d23e5..0000000000000
--- a/ui/round/css/build/gen/round.tour-standing.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../round.tour-standing';
diff --git a/ui/round/css/build/gen/round.transp.scss b/ui/round/css/build/gen/round.transp.scss
deleted file mode 100644
index 1523241682a55..0000000000000
--- a/ui/round/css/build/gen/round.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../round';
diff --git a/ui/round/css/build/gen/round.zh.dark.scss b/ui/round/css/build/gen/round.zh.dark.scss
deleted file mode 100644
index 3c87d57c9c9f3..0000000000000
--- a/ui/round/css/build/gen/round.zh.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../round.zh';
diff --git a/ui/round/css/build/gen/round.zh.light.scss b/ui/round/css/build/gen/round.zh.light.scss
deleted file mode 100644
index 450ec64d637b3..0000000000000
--- a/ui/round/css/build/gen/round.zh.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../round.zh';
diff --git a/ui/round/css/build/gen/round.zh.transp.scss b/ui/round/css/build/gen/round.zh.transp.scss
deleted file mode 100644
index aa730090579c3..0000000000000
--- a/ui/round/css/build/gen/round.zh.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../round.zh';
diff --git a/ui/round/css/build/_round.nvui.scss b/ui/round/css/build/round.nvui.scss
similarity index 100%
rename from ui/round/css/build/_round.nvui.scss
rename to ui/round/css/build/round.nvui.scss
diff --git a/ui/round/css/build/_round.scss b/ui/round/css/build/round.scss
similarity index 100%
rename from ui/round/css/build/_round.scss
rename to ui/round/css/build/round.scss
diff --git a/ui/round/css/build/_round.tour-standing.scss b/ui/round/css/build/round.tour-standing.scss
similarity index 100%
rename from ui/round/css/build/_round.tour-standing.scss
rename to ui/round/css/build/round.tour-standing.scss
diff --git a/ui/round/css/build/_round.zh.scss b/ui/round/css/build/round.zh.scss
similarity index 100%
rename from ui/round/css/build/_round.zh.scss
rename to ui/round/css/build/round.zh.scss
diff --git a/ui/round/package.json b/ui/round/package.json
index ed21a11dc1a2c..efc9e62324d20 100644
--- a/ui/round/package.json
+++ b/ui/round/package.json
@@ -25,11 +25,9 @@
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "src/main.ts": "round",
-        "src/plugins/nvui.ts": "round.nvui",
-        "src/plugins/tour.ts": "round.tour"
-      }
+      "src/round.ts": "round",
+      "src/plugins/round.nvui.ts": "round.nvui",
+      "src/plugins/round.tour.ts": "round.tour"
     }
   }
 }
diff --git a/ui/round/src/ctrl.ts b/ui/round/src/ctrl.ts
index d06be12fa9b0f..f1fc588c6593f 100644
--- a/ui/round/src/ctrl.ts
+++ b/ui/round/src/ctrl.ts
@@ -829,7 +829,7 @@ export default class RoundController implements MoveRootCtrl {
     const up = { fen: this.stepAt(this.ply).fen, canMove: this.canMove(), cg };
     if (!this.isPlaying()) return;
     if (this.data.pref.keyboardMove) {
-      this.keyboardMove ??= makeKeyboardMove(this);
+      if (!this.keyboardMove) this.keyboardMove = makeKeyboardMove(this);
       this.keyboardMove.update(up);
     }
     if (this.data.pref.voiceMove) {
diff --git a/ui/round/src/main.ts b/ui/round/src/main.ts
deleted file mode 100644
index fd0876ee2425c..0000000000000
--- a/ui/round/src/main.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { attributesModule, classModule, init } from 'snabbdom';
-import boot from './boot';
-import menuHover from 'common/menuHover';
-import RoundController from './ctrl';
-import { main as view } from './view/main';
-import { RoundOpts, NvuiPlugin } from './interfaces';
-
-const patch = init([classModule, attributesModule]);
-
-export function initModule(opts: RoundOpts) {
-  boot(opts, app);
-}
-
-function app(opts: RoundOpts, nvui?: NvuiPlugin) {
-  const ctrl = new RoundController(opts, redraw, nvui);
-
-  const blueprint = view(ctrl);
-  opts.element.innerHTML = '';
-  let vnode = patch(opts.element, blueprint);
-
-  function redraw() {
-    vnode = patch(vnode, view(ctrl));
-  }
-
-  window.addEventListener('resize', redraw); // col1 / col2+ transition
-
-  if (ctrl.isPlaying()) menuHover();
-
-  site.sound.preloadBoardSounds();
-
-  return {
-    socketReceive: ctrl.socket.receive,
-    moveOn: ctrl.moveOn,
-  };
-}
diff --git a/ui/round/src/plugins/nvui.ts b/ui/round/src/plugins/round.nvui.ts
similarity index 100%
rename from ui/round/src/plugins/nvui.ts
rename to ui/round/src/plugins/round.nvui.ts
diff --git a/ui/round/src/plugins/tour.ts b/ui/round/src/plugins/round.tour.ts
similarity index 100%
rename from ui/round/src/plugins/tour.ts
rename to ui/round/src/plugins/round.tour.ts
diff --git a/ui/round/src/round.ts b/ui/round/src/round.ts
index c7d5efd5d8c02..ea5ffb932cf03 100644
--- a/ui/round/src/round.ts
+++ b/ui/round/src/round.ts
@@ -1,4 +1,15 @@
-import { RoundData, Step } from './interfaces';
+import { RoundData, Step, RoundOpts, NvuiPlugin } from './interfaces';
+import { attributesModule, classModule, init } from 'snabbdom';
+import boot from './boot';
+import menuHover from 'common/menuHover';
+import RoundController from './ctrl';
+import { main as view } from './view/main';
+
+const patch = init([classModule, attributesModule]);
+
+export function initModule(opts: RoundOpts) {
+  boot(opts, app);
+}
 
 export const firstPly = (d: RoundData): number => d.steps[0].ply;
 
@@ -20,3 +31,26 @@ export const massage = (d: RoundData): void => {
 
   if (d.expiration) d.expiration.movedAt = Date.now() - d.expiration.idleMillis;
 };
+
+function app(opts: RoundOpts, nvui?: NvuiPlugin) {
+  const ctrl = new RoundController(opts, redraw, nvui);
+
+  const blueprint = view(ctrl);
+  opts.element.innerHTML = '';
+  let vnode = patch(opts.element, blueprint);
+
+  function redraw() {
+    vnode = patch(vnode, view(ctrl));
+  }
+
+  window.addEventListener('resize', redraw); // col1 / col2+ transition
+
+  if (ctrl.isPlaying()) menuHover();
+
+  site.sound.preloadBoardSounds();
+
+  return {
+    socketReceive: ctrl.socket.receive,
+    moveOn: ctrl.moveOn,
+  };
+}
diff --git a/ui/round/tsconfig.json b/ui/round/tsconfig.json
index 6680e5fdb94bf..0bc4209dc7d9a 100644
--- a/ui/round/tsconfig.json
+++ b/ui/round/tsconfig.json
@@ -3,6 +3,7 @@
   "compilerOptions": { "noEmit": true },
   "isolatedModules": true,
   "references": [
+    { "path": "../board/tsconfig.json" },
     { "path": "../chat/tsconfig.json" },
     { "path": "../chess/tsconfig.json" },
     { "path": "../common/tsconfig.json" },
diff --git a/ui/serviceWorker/package.json b/ui/serviceWorker/package.json
index 8f9ef606224da..2c6c6c1e00cb3 100644
--- a/ui/serviceWorker/package.json
+++ b/ui/serviceWorker/package.json
@@ -10,9 +10,7 @@
   },
   "lichess": {
     "modules": {
-      "iife": {
-        "src/main.ts": "serviceWorker"
-      }
+      "src/serviceWorker.ts": "serviceWorker"
     }
   }
 }
diff --git a/ui/serviceWorker/src/main.ts b/ui/serviceWorker/src/serviceWorker.ts
similarity index 100%
rename from ui/serviceWorker/src/main.ts
rename to ui/serviceWorker/src/serviceWorker.ts
diff --git a/ui/simul/css/_show.scss b/ui/simul/css/_show.scss
index 5fe0506dd867e..d7e94eca263a2 100644
--- a/ui/simul/css/_show.scss
+++ b/ui/simul/css/_show.scss
@@ -4,7 +4,7 @@
   }
 }
 
-$box-padding: var(--box-padding);
+$box-padding: var(---box-padding);
 
 @import 'layout';
 @import 'side';
diff --git a/ui/simul/css/_started.scss b/ui/simul/css/_started.scss
index 4f1fbb6b630ad..62227d70c833f 100644
--- a/ui/simul/css/_started.scss
+++ b/ui/simul/css/_started.scss
@@ -32,12 +32,12 @@
     .host {
       @extend %box-radius;
 
-      background: fade-out($c-accent, 0.7);
+      background: $m-accent--fade-70;
 
       &,
       a,
       .mini-game__clock {
-        color: $c-accent-over;
+        color: $c-over;
       }
     }
   }
diff --git a/ui/simul/css/build/gen/simul.form.dark.scss b/ui/simul/css/build/gen/simul.form.dark.scss
deleted file mode 100644
index 3692e43695e97..0000000000000
--- a/ui/simul/css/build/gen/simul.form.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../simul.form';
diff --git a/ui/simul/css/build/gen/simul.form.light.scss b/ui/simul/css/build/gen/simul.form.light.scss
deleted file mode 100644
index 19f93c69ba7a6..0000000000000
--- a/ui/simul/css/build/gen/simul.form.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../simul.form';
diff --git a/ui/simul/css/build/gen/simul.form.transp.scss b/ui/simul/css/build/gen/simul.form.transp.scss
deleted file mode 100644
index 21178af85c717..0000000000000
--- a/ui/simul/css/build/gen/simul.form.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../simul.form';
diff --git a/ui/simul/css/build/gen/simul.list.dark.scss b/ui/simul/css/build/gen/simul.list.dark.scss
deleted file mode 100644
index 12f0642ec91d5..0000000000000
--- a/ui/simul/css/build/gen/simul.list.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../simul.list';
diff --git a/ui/simul/css/build/gen/simul.list.light.scss b/ui/simul/css/build/gen/simul.list.light.scss
deleted file mode 100644
index 1e278d263c825..0000000000000
--- a/ui/simul/css/build/gen/simul.list.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../simul.list';
diff --git a/ui/simul/css/build/gen/simul.list.transp.scss b/ui/simul/css/build/gen/simul.list.transp.scss
deleted file mode 100644
index 6681be818a1af..0000000000000
--- a/ui/simul/css/build/gen/simul.list.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../simul.list';
diff --git a/ui/simul/css/build/gen/simul.show.dark.scss b/ui/simul/css/build/gen/simul.show.dark.scss
deleted file mode 100644
index 3b13282d99a28..0000000000000
--- a/ui/simul/css/build/gen/simul.show.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../simul.show';
diff --git a/ui/simul/css/build/gen/simul.show.light.scss b/ui/simul/css/build/gen/simul.show.light.scss
deleted file mode 100644
index 7ab20be35167e..0000000000000
--- a/ui/simul/css/build/gen/simul.show.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../simul.show';
diff --git a/ui/simul/css/build/gen/simul.show.transp.scss b/ui/simul/css/build/gen/simul.show.transp.scss
deleted file mode 100644
index 81da335b617a9..0000000000000
--- a/ui/simul/css/build/gen/simul.show.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../simul.show';
diff --git a/ui/simul/css/build/_simul.form.scss b/ui/simul/css/build/simul.form.scss
similarity index 100%
rename from ui/simul/css/build/_simul.form.scss
rename to ui/simul/css/build/simul.form.scss
diff --git a/ui/simul/css/build/_simul.list.scss b/ui/simul/css/build/simul.list.scss
similarity index 100%
rename from ui/simul/css/build/_simul.list.scss
rename to ui/simul/css/build/simul.list.scss
diff --git a/ui/simul/css/build/_simul.show.scss b/ui/simul/css/build/simul.show.scss
similarity index 100%
rename from ui/simul/css/build/_simul.show.scss
rename to ui/simul/css/build/simul.show.scss
diff --git a/ui/simul/package.json b/ui/simul/package.json
index 8d5181fb38bba..258b40bcfd0fd 100644
--- a/ui/simul/package.json
+++ b/ui/simul/package.json
@@ -18,9 +18,7 @@
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "src/main.ts": "simul"
-      }
+      "src/simul.ts": "simul"
     }
   }
 }
diff --git a/ui/simul/src/main.ts b/ui/simul/src/simul.ts
similarity index 100%
rename from ui/simul/src/main.ts
rename to ui/simul/src/simul.ts
diff --git a/ui/site/css/build/gen/site.dark.scss b/ui/site/css/build/gen/site.dark.scss
deleted file mode 100644
index fcea9db95ee4c..0000000000000
--- a/ui/site/css/build/gen/site.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../site';
diff --git a/ui/site/css/build/gen/site.light.scss b/ui/site/css/build/gen/site.light.scss
deleted file mode 100644
index 7e626b363a651..0000000000000
--- a/ui/site/css/build/gen/site.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../site';
diff --git a/ui/site/css/build/gen/site.transp.scss b/ui/site/css/build/gen/site.transp.scss
deleted file mode 100644
index 2c375dd1194a2..0000000000000
--- a/ui/site/css/build/gen/site.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../site';
diff --git a/ui/site/css/build/_site.scss b/ui/site/css/build/site.scss
similarity index 100%
rename from ui/site/css/build/_site.scss
rename to ui/site/css/build/site.scss
diff --git a/ui/site/package.json b/ui/site/package.json
index 08984b8ae350d..b9fcf753b9364 100644
--- a/ui/site/package.json
+++ b/ui/site/package.json
@@ -10,25 +10,20 @@
     "chat": "workspace:*",
     "chess": "workspace:*",
     "common": "workspace:*",
-    "lichess-pgn-viewer": "2.0.1",
+    "lichess-pgn-viewer": "^2.1.0",
     "voice": "workspace:*",
     "tablesort": "^5.3.0"
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "src/main.ts": "site",
-        "src/tvEmbed.ts": "tvEmbed",
-        "src/puzzleEmbed.ts": "puzzle.embed",
-        "src/lpvEmbed.ts": "lpv.embed",
-        "src/devMode.ts": "devMode"
-      }
+      "src/site.ts": "site",
+      "src/site.tvEmbed.ts": "site.tvEmbed",
+      "src/site.puzzleEmbed.ts": "site.puzzle.embed",
+      "src/site.lpvEmbed.ts": "site.lpv.embed",
+      "src/site.devMode.ts": "site.devMode"
     },
-    "copy": [
-      {
-        "src": "node_modules/dialog-polyfill/dist/dialog-polyfill.esm.js",
-        "dest": "../../public/npm"
-      }
-    ]
+    "sync": {
+      "node_modules/dialog-polyfill/dist/dialog-polyfill.esm.js": "public/npm"
+    }
   }
 }
diff --git a/ui/site/src/assets.ts b/ui/site/src/assets.ts
index 3123c9da6cd26..03f8ae6c550ab 100644
--- a/ui/site/src/assets.ts
+++ b/ui/site/src/assets.ts
@@ -1,5 +1,4 @@
 import * as xhr from 'common/xhr';
-import { supportsSystemTheme } from 'common/theme';
 import { memoize } from 'common';
 
 export const baseUrl = memoize(() => document.body.getAttribute('data-asset-url') || '');
@@ -16,38 +15,30 @@ export const url = (path: string, opts: AssetUrlOpts = {}) => {
 // bump flairs version if a flair is changed only (not added or removed)
 export const flairSrc = (flair: Flair) => url(`flair/img/${flair}.webp`, { version: '_____2' });
 
-const loadedCss = new Map<string, Promise<void>>();
-export const loadCss = (href: string, media?: 'dark' | 'light'): Promise<void> => {
-  if (!loadedCss.has(href)) {
+const loadedCss = new Set<string>();
+export const loadCss = (href: string): Promise<void> =>
+  new Promise(resolve => {
+    if (loadedCss.has(href)) return resolve();
     const el = document.createElement('link');
     el.rel = 'stylesheet';
-    el.href = url(site.debug ? `${href}?_=${Date.now()}` : href);
-    if (media) el.media = `(prefers-color-scheme: ${media})`;
-    loadedCss.set(
-      href,
-      new Promise<void>(resolve => {
-        el.onload = () => resolve();
-      }),
-    );
+    el.href = url(href, { noVersion: true });
+    el.onload = () => {
+      loadedCss.add(href);
+      resolve();
+    };
     document.head.append(el);
-  }
-  return loadedCss.get(href)!;
-};
+  });
 
 export const loadCssPath = async (key: string): Promise<void> => {
-  const theme = document.body.dataset.theme!;
-  const load = (theme: string, media?: 'dark' | 'light') =>
-    loadCss(`css/${key}.${theme}.${document.body.dataset.dev ? 'dev' : 'min'}.css`, media);
-  if (theme === 'system') {
-    if (supportsSystemTheme()) {
-      await Promise.all([load('dark', 'dark'), load('light', 'light')]);
-    } else {
-      await load('dark');
-    }
-  } else await load(theme);
+  const hash = site.manifest.css[key];
+  await loadCss(`css/${key}${hash ? `.${hash}` : ''}.css`);
 };
 
-export const jsModule = (name: string) => `compiled/${name}${document.body.dataset.dev ? '' : '.min'}.js`;
+export const jsModule = (name: string) => {
+  if (name.endsWith('.js')) name = name.slice(0, -3);
+  const hash = site.manifest.js[name];
+  return `compiled/${name}${hash ? `.${hash}` : ''}.js`;
+};
 
 const scriptCache = new Map<string, Promise<void>>();
 
@@ -60,12 +51,13 @@ export async function loadEsm<T, ModuleOpts = any>(
   name: string,
   opts?: { init?: ModuleOpts; url?: AssetUrlOpts },
 ): Promise<T> {
-  const module = await import(url(jsModule(name), opts?.url));
+  const urlOpts = opts?.url?.version ? opts?.url : { ...opts?.url, noVersion: true };
+  const module = await import(url(jsModule(name), urlOpts));
   return module.initModule ? module.initModule(opts?.init) : module.default(opts?.init);
 }
 
 export const loadPageEsm = async (name: string) => {
-  const modulePromise = import(url(jsModule(name)));
+  const modulePromise = import(url(jsModule(name), { noVersion: true }));
   const dataScript = document.getElementById('page-init-data');
   const opts = dataScript && JSON.parse(dataScript.innerHTML);
   dataScript?.remove();
@@ -75,7 +67,7 @@ export const loadPageEsm = async (name: string) => {
 
 export const userComplete = async (opts: UserCompleteOpts): Promise<UserComplete> => {
   const [userComplete] = await Promise.all([
-    loadEsm('userComplete', { init: opts }),
+    loadEsm('bits.userComplete', { init: opts }),
     loadCssPath('complete'),
   ]);
   return userComplete as UserComplete;
diff --git a/ui/site/src/main.ts b/ui/site/src/boot.ts
similarity index 95%
rename from ui/site/src/main.ts
rename to ui/site/src/boot.ts
index 87f558d29aae0..41b3dd0ebb1ae 100644
--- a/ui/site/src/main.ts
+++ b/ui/site/src/boot.ts
@@ -4,7 +4,6 @@ import * as miniGame from './miniGame';
 import * as timeago from './timeago';
 import * as xhr from 'common/xhr';
 import announce from './announce';
-import exportSiteGlobals from './site';
 import OnlineFriends from './friends';
 import powertip from './powertip';
 import pubsub from './pubsub';
@@ -18,11 +17,7 @@ import { isIOS } from 'common/device';
 import { scrollToInnerSelector } from 'common';
 import { dispatchChessgroundResize } from 'common/resize';
 
-window.$as = <T>(cashOrHtml: Cash | string) =>
-  (typeof cashOrHtml === 'string' ? $(cashOrHtml) : cashOrHtml)[0] as T;
-exportSiteGlobals();
-
-site.load.then(() => {
+export function boot() {
   $('#user_tag').removeAttr('href');
   const setBlind = location.hash === '#blind';
   const showDebug = location.hash.startsWith('#debug');
@@ -135,7 +130,7 @@ site.load.then(() => {
 
     if (setBlind && !site.blindMode) setTimeout(() => $('#blind-mode button').trigger('click'), 1500);
 
-    if (showDebug) site.asset.loadEsm('diagnosticDialog');
+    if (showDebug) site.asset.loadEsm('bits.diagnosticDialog');
 
     const pageAnnounce = document.body.getAttribute('data-announce');
     if (pageAnnounce) announce(JSON.parse(pageAnnounce));
@@ -182,5 +177,9 @@ site.load.then(() => {
           ),
       );
     });
+    window.matchMedia('(prefers-color-scheme: light)')?.addEventListener('change', e => {
+      if (document.body.dataset.theme === 'system')
+        document.documentElement.className = e.matches ? 'light' : 'dark';
+    });
   }, 800);
-});
+}
diff --git a/ui/site/src/dialog.ts b/ui/site/src/dialog.ts
index bc93f7f3a5618..183773375e71a 100644
--- a/ui/site/src/dialog.ts
+++ b/ui/site/src/dialog.ts
@@ -118,7 +118,7 @@ class DialogWrapper implements Dialog {
     const cancelOnInterval = () => Date.now() - justThen > 200 && this.close('cancel');
 
     this.observer.observe(document.body, { childList: true, subtree: true });
-    view.parentElement?.style.setProperty('--viewport-height', `${window.innerHeight}px`);
+    view.parentElement?.style.setProperty('---viewport-height', `${window.innerHeight}px`);
     view.addEventListener('click', e => e.stopPropagation());
 
     dialog.addEventListener('cancel', () => !this.returnValue && (this.returnValue = 'cancel'));
@@ -220,7 +220,7 @@ function onModalKeydown(e: KeyboardEvent) {
 
 function onResize() {
   // ios safari vh behavior workaround
-  $('dialog > div.scrollable').css('--viewport-height', `${window.innerHeight}px`);
+  $('dialog > div.scrollable').css('---viewport-height', `${window.innerHeight}px`);
 }
 
 const focusQuery = ['button', 'input', 'select', 'textarea']
diff --git a/ui/site/src/log.ts b/ui/site/src/log.ts
index 8f2267dc43de7..c4802ee89c8c0 100644
--- a/ui/site/src/log.ts
+++ b/ui/site/src/log.ts
@@ -44,7 +44,7 @@ export default function makeLog(): LichessLog {
   }
 
   const log: LichessLog = async (...args: any[]) => {
-    const msg = `#${site.info.commit.substr(0, 7)} - ${args.map(stringify).join(' ')}`;
+    const msg = `#${site.info ? `${site.info.commit.substr(0, 7)} - ` : ''}${args.map(stringify).join(' ')}`;
     let nextKey = Date.now();
     console.log(...args);
     if (nextKey === lastKey) {
diff --git a/ui/site/src/mic.ts b/ui/site/src/mic.ts
index cfc64e619d2a1..d4a08ebc1d10e 100644
--- a/ui/site/src/mic.ts
+++ b/ui/site/src/mic.ts
@@ -212,9 +212,10 @@ export const mic = new (class implements Voice.Microphone {
     const downloadAsync = this.downloadModel(`/vosk/${modelUrl.replace(/[\W]/g, '_')}`);
     const audioAsync = this.initAudio();
 
-    this.vosk ??= await site.asset.loadEsm<VoskModule>('voice.vosk', {
-      url: { version: VOSK_TS_VERSION },
-    });
+    if (!this.vosk)
+      this.vosk = await site.asset.loadEsm<VoskModule>('voice.vosk', {
+        url: { version: VOSK_TS_VERSION },
+      });
 
     await downloadAsync;
     await this.vosk.initModel(modelUrl, this.lang);
diff --git a/ui/site/src/powertip.ts b/ui/site/src/powertip.ts
index 788e7eab176b8..8bf17d8d2353a 100644
--- a/ui/site/src/powertip.ts
+++ b/ui/site/src/powertip.ts
@@ -431,7 +431,8 @@ class TooltipController {
 
   constructor(readonly options: Options) {
     this.tipElement = $('#' + options.popupId);
-    this.scoped = session.scoped[options.popupId!] ??= {};
+    if (!session.scoped[options.popupId!]) session.scoped[options.popupId!] = {};
+    this.scoped = session.scoped[options.popupId!];
     // build and append tooltip div if it does not already exist
     if (this.tipElement.length === 0) {
       const tip = document.createElement('div');
diff --git a/ui/site/src/devMode.ts b/ui/site/src/site.devMode.ts
similarity index 100%
rename from ui/site/src/devMode.ts
rename to ui/site/src/site.devMode.ts
diff --git a/ui/site/src/lpvEmbed.ts b/ui/site/src/site.lpvEmbed.ts
similarity index 100%
rename from ui/site/src/lpvEmbed.ts
rename to ui/site/src/site.lpvEmbed.ts
diff --git a/ui/site/src/puzzleEmbed.ts b/ui/site/src/site.puzzleEmbed.ts
similarity index 100%
rename from ui/site/src/puzzleEmbed.ts
rename to ui/site/src/site.puzzleEmbed.ts
diff --git a/ui/site/src/site.ts b/ui/site/src/site.ts
index 9ac667278c904..488ba8514e240 100644
--- a/ui/site/src/site.ts
+++ b/ui/site/src/site.ts
@@ -1,4 +1,5 @@
 import StrongSocket from './socket';
+import { boot } from './boot';
 import Mousetrap from './mousetrap';
 import { requestIdleCallback, escapeHtml } from './functions';
 import once from './once';
@@ -23,52 +24,45 @@ import watchers from './watchers';
 import { Chessground } from 'chessground';
 import { domDialog, ready, snabDialog } from './dialog';
 
-declare const __debug__: boolean;
-declare const __info__: {
-  date: string;
-  commit: string;
-  message: string;
-};
+// window.site.{load, quantity, i18n} are initialized in layout.scala embedded script tags
 
-export default () => {
-  const s = window.site;
-  s.debug = __debug__;
-  s.info = __info__;
-  s.StrongSocket = StrongSocket;
-  s.mousetrap = new Mousetrap(document);
-  s.requestIdleCallback = requestIdleCallback;
-  s.sri = sri;
-  s.storage = storage;
-  s.tempStorage = tempStorage;
-  s.once = once;
-  s.powertip = powertip;
-  s.clockWidget = clockWidget;
-  s.spinnerHtml = spinnerHtml;
-  s.asset = assets;
-  s.idleTimer = idleTimer;
-  s.pubsub = pubsub;
-  s.unload = unload;
-  s.redirect = redirect;
-  s.reload = reload;
-  s.watchers = watchers;
-  s.escapeHtml = escapeHtml;
-  s.announce = announce;
-  s.trans = trans;
-  s.sound = sound;
-  s.mic = mic;
-  s.miniBoard = miniBoard;
-  s.miniGame = miniGame;
-  s.timeago = timeago;
-  s.dateFormat = dateFormat;
-  s.contentLoaded = (parent?: HTMLElement) => pubsub.emit('content-loaded', parent);
-  s.blindMode = document.body.classList.contains('blind-mode');
-  s.makeChat = data =>
-    site.asset.loadEsm('chat', { init: { el: document.querySelector('.mchat')!, ...data } });
-  s.makeChessground = Chessground;
-  s.log = makeLog();
-  (s.dialog as any) = { ready };
-  ready.then(() => {
-    s.dialog.dom = domDialog;
-    s.dialog.snab = snabDialog;
-  });
-};
+window.$as = <T>(cashOrHtml: Cash | string) =>
+  (typeof cashOrHtml === 'string' ? $(cashOrHtml) : cashOrHtml)[0] as T;
+const s = window.site;
+s.StrongSocket = StrongSocket;
+s.mousetrap = new Mousetrap(document);
+s.requestIdleCallback = requestIdleCallback;
+s.sri = sri;
+s.storage = storage;
+s.tempStorage = tempStorage;
+s.once = once;
+s.powertip = powertip;
+s.clockWidget = clockWidget;
+s.spinnerHtml = spinnerHtml;
+s.asset = assets;
+s.idleTimer = idleTimer;
+s.pubsub = pubsub;
+s.unload = unload;
+s.redirect = redirect;
+s.reload = reload;
+s.watchers = watchers;
+s.escapeHtml = escapeHtml;
+s.announce = announce;
+s.trans = trans;
+s.sound = sound;
+s.mic = mic;
+s.miniBoard = miniBoard;
+s.miniGame = miniGame;
+s.timeago = timeago;
+s.dateFormat = dateFormat;
+s.contentLoaded = (parent?: HTMLElement) => pubsub.emit('content-loaded', parent);
+s.blindMode = document.body.classList.contains('blind-mode');
+s.makeChat = data => site.asset.loadEsm('chat', { init: { el: document.querySelector('.mchat')!, ...data } });
+s.makeChessground = Chessground;
+s.log = makeLog();
+(s.dialog as any) = { ready };
+ready.then(() => {
+  s.dialog.dom = domDialog;
+  s.dialog.snab = snabDialog;
+});
+s.load.then(boot);
diff --git a/ui/site/src/tvEmbed.ts b/ui/site/src/site.tvEmbed.ts
similarity index 100%
rename from ui/site/src/tvEmbed.ts
rename to ui/site/src/site.tvEmbed.ts
diff --git a/ui/site/src/sound.ts b/ui/site/src/sound.ts
index 1a5c23740f13e..788aac127c027 100644
--- a/ui/site/src/sound.ts
+++ b/ui/site/src/sound.ts
@@ -77,7 +77,7 @@ export default new (class implements SoundI {
       }
     }
     if (o?.filter === 'game' || this.theme !== 'music') return;
-    this.music ??= await site.asset.loadEsm<SoundMove>('soundMove');
+    if (!this.music) this.music = await site.asset.loadEsm<SoundMove>('site.soundMove');
     this.music(o);
   }
 
diff --git a/ui/site/src/topBar.ts b/ui/site/src/topBar.ts
index c77c1f630a5f1..7e08f4ac727d3 100644
--- a/ui/site/src/topBar.ts
+++ b/ui/site/src/topBar.ts
@@ -17,13 +17,16 @@ export default function () {
   if ('ontouchstart' in window && window.matchMedia('(min-width: 1020px)').matches)
     $('#topnav section > a').removeAttr('href');
 
+  const blockBodyScroll = (e: Event) => {
+    // on iOS, overflow: hidden isn't sufficient
+    if (!document.getElementById('topnav')!.contains(e.target as HTMLElement)) e.preventDefault();
+  };
+
   $('#tn-tg').on('change', e => {
     const menuOpen = (e.target as HTMLInputElement).checked;
+    if (menuOpen) document.body.addEventListener('touchmove', blockBodyScroll, { passive: false });
+    else document.body.removeEventListener('touchmove', blockBodyScroll);
     document.body.classList.toggle('masked', menuOpen);
-    const header = $as<HTMLElement>('#top');
-    // transp #top's blur filter creates a stacking context. turn it off so 'bottom: 0' matches screen height
-    if (menuOpen) header.style.backdropFilter = 'unset';
-    else setTimeout(() => (header.style.backdropFilter = ''), 200); // 200ms is slide transition duration
   });
 
   $(top).on('click', '.toggle', function (this: HTMLElement) {
diff --git a/ui/storm/css/_end.scss b/ui/storm/css/_end.scss
index 035b7b6a59e2f..838a59b7d507a 100644
--- a/ui/storm/css/_end.scss
+++ b/ui/storm/css/_end.scss
@@ -36,7 +36,7 @@
 
     padding: 1.5em 1.5em;
     background: $c-brag;
-    color: $c-brag-over;
+    color: $c-over;
 
     &__content {
       @extend %flex-between;
@@ -70,7 +70,7 @@
   &__stats {
     @extend %flex-center;
 
-    padding: 2vh var(--box-padding);
+    padding: 2vh var(---box-padding);
     align-items: stretch;
 
     table {
@@ -94,7 +94,7 @@
     justify-content: center;
     align-items: center;
     background: $c-good;
-    color: $c-good-over;
+    color: $c-over;
     padding: 1em 0;
 
     @media (min-width: at-least($xx-small)) {
diff --git a/ui/storm/css/_high.scss b/ui/storm/css/_high.scss
index c4bd3bbd2c744..8997f4cbe7929 100644
--- a/ui/storm/css/_high.scss
+++ b/ui/storm/css/_high.scss
@@ -40,7 +40,7 @@
     .highlight-alltime & {
       &:first-child {
         background: linear-gradient(145deg, rgba(255, 255, 255, 0.3) 0%, transparent 45%) $c-brag;
-        color: $c-brag-over;
+        color: $c-over;
 
         strong {
           font-size: 4em;
diff --git a/ui/storm/css/_play.scss b/ui/storm/css/_play.scss
index d1afef4883826..95804c8effd45 100644
--- a/ui/storm/css/_play.scss
+++ b/ui/storm/css/_play.scss
@@ -7,7 +7,7 @@
     grid-template-areas: 'board' 'side';
 
     @include mq-at-least-col2 {
-      grid-template-columns: var(--col2-uniboard-width) $col2-uniboard-table;
+      grid-template-columns: var(---col2-uniboard-width) $col2-uniboard-table;
       grid-template-rows: fit-content(0);
       grid-template-areas: 'board   side';
     }
diff --git a/ui/storm/css/build/gen/storm.dark.scss b/ui/storm/css/build/gen/storm.dark.scss
deleted file mode 100644
index a2b9b5905862e..0000000000000
--- a/ui/storm/css/build/gen/storm.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../storm';
diff --git a/ui/storm/css/build/gen/storm.dashboard.dark.scss b/ui/storm/css/build/gen/storm.dashboard.dark.scss
deleted file mode 100644
index a69fe33bb33dc..0000000000000
--- a/ui/storm/css/build/gen/storm.dashboard.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../storm.dashboard';
diff --git a/ui/storm/css/build/gen/storm.dashboard.light.scss b/ui/storm/css/build/gen/storm.dashboard.light.scss
deleted file mode 100644
index 603a64d689b76..0000000000000
--- a/ui/storm/css/build/gen/storm.dashboard.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../storm.dashboard';
diff --git a/ui/storm/css/build/gen/storm.dashboard.transp.scss b/ui/storm/css/build/gen/storm.dashboard.transp.scss
deleted file mode 100644
index 85d7beb695b3e..0000000000000
--- a/ui/storm/css/build/gen/storm.dashboard.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../storm.dashboard';
diff --git a/ui/storm/css/build/gen/storm.light.scss b/ui/storm/css/build/gen/storm.light.scss
deleted file mode 100644
index db4d673dd524f..0000000000000
--- a/ui/storm/css/build/gen/storm.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../storm';
diff --git a/ui/storm/css/build/gen/storm.transp.scss b/ui/storm/css/build/gen/storm.transp.scss
deleted file mode 100644
index b743f7bb3597f..0000000000000
--- a/ui/storm/css/build/gen/storm.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../storm';
diff --git a/ui/storm/css/build/_storm.dashboard.scss b/ui/storm/css/build/storm.dashboard.scss
similarity index 100%
rename from ui/storm/css/build/_storm.dashboard.scss
rename to ui/storm/css/build/storm.dashboard.scss
diff --git a/ui/storm/css/build/_storm.scss b/ui/storm/css/build/storm.scss
similarity index 100%
rename from ui/storm/css/build/_storm.scss
rename to ui/storm/css/build/storm.scss
diff --git a/ui/storm/package.json b/ui/storm/package.json
index f51483be2f932..9422320385db1 100644
--- a/ui/storm/package.json
+++ b/ui/storm/package.json
@@ -20,9 +20,7 @@
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "src/main.ts": "storm"
-      }
+      "src/storm.ts": "storm"
     }
   }
 }
diff --git a/ui/storm/src/main.ts b/ui/storm/src/storm.ts
similarity index 100%
rename from ui/storm/src/main.ts
rename to ui/storm/src/storm.ts
diff --git a/ui/swiss/css/_app-control.scss b/ui/swiss/css/_app-control.scss
index 466f688279fd7..14942a0aec438 100644
--- a/ui/swiss/css/_app-control.scss
+++ b/ui/swiss/css/_app-control.scss
@@ -60,7 +60,7 @@
 
     input {
       border: none;
-      background: fade-out($c-secondary, 0.8);
+      background: $m-secondary--fade-80;
     }
 
     .search,
diff --git a/ui/swiss/css/_app-header.scss b/ui/swiss/css/_app-header.scss
index 7e9415414a2e7..bef0c2ce0b455 100644
--- a/ui/swiss/css/_app-header.scss
+++ b/ui/swiss/css/_app-header.scss
@@ -13,7 +13,7 @@
 
     a {
       /* GM wikipedia */
-      color: mix($c-link, $c-font, 35%);
+      color: $m-primary_font--mix-35;
 
       &:hover {
         color: $c-link;
diff --git a/ui/swiss/css/_app-standing.scss b/ui/swiss/css/_app-standing.scss
index 3fe11e4c2fb43..515a6aef73ab0 100644
--- a/ui/swiss/css/_app-standing.scss
+++ b/ui/swiss/css/_app-standing.scss
@@ -37,18 +37,18 @@
   }
 
   &:not(.created):not(.loading) tbody tr:hover {
-    background: mix($c-primary, $c-bg-box, 15%);
+    background: $m-primary_bg--mix-15;
     cursor: pointer;
   }
 
   tr.me td:first-child {
-    $c-me-border: mix($c-secondary, $c-bg-box, 70%);
+    $c-me-border: $m-secondary_bg--mix-70;
 
     @include gradient-border($c-me-border, to right, to left);
   }
 
   tr.active td:last-child {
-    $c-active-border: mix($c-primary, $c-bg-box, 70%);
+    $c-active-border: $m-primary_bg--mix-70;
     @include gradient-border($c-active-border, to left, to right);
   }
 
@@ -92,7 +92,7 @@
 
       // background: mix($c-link, $c-bg-box, 15%);
       &:hover {
-        background: mix($c-link, $c-bg-box, 35%);
+        background: $m-primary_bg--mix-35;
       }
     }
 
@@ -101,21 +101,21 @@
 
       // background: mix($c-good, $c-bg-box, 15%);
       &:hover {
-        background: mix($c-good, $c-bg-box, 35%);
+        background: $m-secondary_bg--mix-35;
       }
     }
 
     .loss {
-      color: mix($c-bad, $c-bg-box, 60%);
+      color: $m-bad_bg--mix-60;
 
       // background: mix($c-bad, $c-bg-box, 10%);
       &:hover {
-        background: mix($c-bad, $c-bg-box, 20%);
+        background: $m-bad_bg--mix-20;
       }
     }
 
     .draw {
-      color: mix($c-brag, $c-bg-box, 70);
+      color: $m-brag_bg--mix-70;
     }
 
     bye {
@@ -127,7 +127,7 @@
     }
 
     absent {
-      color: mix($c-bad, $c-bg-box, 60%);
+      color: $m-bad_bg--mix-60;
     }
 
     r {
diff --git a/ui/swiss/css/_boards.scss b/ui/swiss/css/_boards.scss
index e462065aefeaa..730a251443297 100644
--- a/ui/swiss/css/_boards.scss
+++ b/ui/swiss/css/_boards.scss
@@ -1,7 +1,7 @@
 .swiss__boards {
   margin: $block-gap 0;
   grid-gap: 1ch;
-  --np-min-width: 200px;
+  ---np-min-width: 200px;
 }
 
 .swiss__board {
diff --git a/ui/swiss/css/_layout.scss b/ui/swiss/css/_layout.scss
index 756ec80115e90..b9bc1c85262b1 100644
--- a/ui/swiss/css/_layout.scss
+++ b/ui/swiss/css/_layout.scss
@@ -1,6 +1,6 @@
 @include mq-at-least-col2 {
   #main-wrap {
-    --main-max-width: auto;
+    ---main-max-width: auto;
   }
 }
 
diff --git a/ui/swiss/css/_player-info.scss b/ui/swiss/css/_player-info.scss
index c9777ae86194b..05e3dfed50d28 100644
--- a/ui/swiss/css/_player-info.scss
+++ b/ui/swiss/css/_player-info.scss
@@ -17,7 +17,7 @@
 
     @include transition;
 
-    color: $c-red;
+    color: $c-bad;
 
     &:hover {
       opacity: 1;
@@ -66,7 +66,7 @@
       }
 
       &:hover {
-        background: mix($c-link, $c-bg-box, 10%);
+        background: $m-primary_bg--mix-10;
       }
     }
 
@@ -96,7 +96,7 @@
       }
 
       &:hover {
-        background: mix($c-link, $c-bg-box, 10%);
+        background: $m-primary_bg--mix-10;
       }
     }
 
diff --git a/ui/swiss/css/_round-pairings.scss b/ui/swiss/css/_round-pairings.scss
index 4b9955f386bb5..da4eae93e8117 100644
--- a/ui/swiss/css/_round-pairings.scss
+++ b/ui/swiss/css/_round-pairings.scss
@@ -1,5 +1,5 @@
 .pagination {
-  margin-inline-start: var(--box-padding);
+  margin-inline-start: var(---box-padding);
   &--top {
     padding-bottom: 1em;
     border-bottom: $border;
diff --git a/ui/swiss/css/build/gen/swiss.form.dark.scss b/ui/swiss/css/build/gen/swiss.form.dark.scss
deleted file mode 100644
index df36ec4a33eb9..0000000000000
--- a/ui/swiss/css/build/gen/swiss.form.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../swiss.form';
diff --git a/ui/swiss/css/build/gen/swiss.form.light.scss b/ui/swiss/css/build/gen/swiss.form.light.scss
deleted file mode 100644
index 4cc59a10e2ad0..0000000000000
--- a/ui/swiss/css/build/gen/swiss.form.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../swiss.form';
diff --git a/ui/swiss/css/build/gen/swiss.form.transp.scss b/ui/swiss/css/build/gen/swiss.form.transp.scss
deleted file mode 100644
index 73fff9ba6d13e..0000000000000
--- a/ui/swiss/css/build/gen/swiss.form.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../swiss.form';
diff --git a/ui/swiss/css/build/gen/swiss.home.dark.scss b/ui/swiss/css/build/gen/swiss.home.dark.scss
deleted file mode 100644
index 84e28f05921be..0000000000000
--- a/ui/swiss/css/build/gen/swiss.home.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../swiss.home';
diff --git a/ui/swiss/css/build/gen/swiss.home.light.scss b/ui/swiss/css/build/gen/swiss.home.light.scss
deleted file mode 100644
index d28438abbc209..0000000000000
--- a/ui/swiss/css/build/gen/swiss.home.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../swiss.home';
diff --git a/ui/swiss/css/build/gen/swiss.home.transp.scss b/ui/swiss/css/build/gen/swiss.home.transp.scss
deleted file mode 100644
index 05f7c154ed9b5..0000000000000
--- a/ui/swiss/css/build/gen/swiss.home.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../swiss.home';
diff --git a/ui/swiss/css/build/gen/swiss.show.dark.scss b/ui/swiss/css/build/gen/swiss.show.dark.scss
deleted file mode 100644
index 7ed9ab62f9bad..0000000000000
--- a/ui/swiss/css/build/gen/swiss.show.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../swiss.show';
diff --git a/ui/swiss/css/build/gen/swiss.show.light.scss b/ui/swiss/css/build/gen/swiss.show.light.scss
deleted file mode 100644
index 2f7ddd9d628ca..0000000000000
--- a/ui/swiss/css/build/gen/swiss.show.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../swiss.show';
diff --git a/ui/swiss/css/build/gen/swiss.show.transp.scss b/ui/swiss/css/build/gen/swiss.show.transp.scss
deleted file mode 100644
index ff520fe4bd446..0000000000000
--- a/ui/swiss/css/build/gen/swiss.show.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../swiss.show';
diff --git a/ui/swiss/css/build/_swiss.form.scss b/ui/swiss/css/build/swiss.form.scss
similarity index 100%
rename from ui/swiss/css/build/_swiss.form.scss
rename to ui/swiss/css/build/swiss.form.scss
diff --git a/ui/swiss/css/build/_swiss.home.scss b/ui/swiss/css/build/swiss.home.scss
similarity index 100%
rename from ui/swiss/css/build/_swiss.home.scss
rename to ui/swiss/css/build/swiss.home.scss
diff --git a/ui/swiss/css/build/_swiss.show.scss b/ui/swiss/css/build/swiss.show.scss
similarity index 100%
rename from ui/swiss/css/build/_swiss.show.scss
rename to ui/swiss/css/build/swiss.show.scss
diff --git a/ui/swiss/package.json b/ui/swiss/package.json
index a33bc40961b9c..79fed4f768cea 100644
--- a/ui/swiss/package.json
+++ b/ui/swiss/package.json
@@ -20,9 +20,7 @@
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "src/main.ts": "swiss"
-      }
+      "src/swiss.ts": "swiss"
     }
   }
 }
diff --git a/ui/swiss/src/main.ts b/ui/swiss/src/swiss.ts
similarity index 100%
rename from ui/swiss/src/main.ts
rename to ui/swiss/src/swiss.ts
diff --git a/ui/tournament/css/_actor-info.scss b/ui/tournament/css/_actor-info.scss
index 1f708931a1ffd..e6c18ef49fc8f 100644
--- a/ui/tournament/css/_actor-info.scss
+++ b/ui/tournament/css/_actor-info.scss
@@ -17,7 +17,7 @@
 
     @include transition;
 
-    color: $c-red;
+    color: $c-bad;
 
     &:hover {
       opacity: 1;
@@ -67,7 +67,7 @@
       }
 
       &:hover {
-        background: mix($c-link, $c-bg-box, 10%);
+        background: $m-primary_bg--mix-10;
       }
     }
 
diff --git a/ui/tournament/css/_app-control.scss b/ui/tournament/css/_app-control.scss
index f10ee5c1d0711..9283571413931 100644
--- a/ui/tournament/css/_app-control.scss
+++ b/ui/tournament/css/_app-control.scss
@@ -81,7 +81,7 @@
 
     input {
       border: none;
-      background: fade-out($c-secondary, 0.8);
+      background: $m-secondary--fade-80;
     }
 
     .search,
diff --git a/ui/tournament/css/_app-header.scss b/ui/tournament/css/_app-header.scss
index 9cf6a56a74ae2..eb7af83910d1e 100644
--- a/ui/tournament/css/_app-header.scss
+++ b/ui/tournament/css/_app-header.scss
@@ -13,7 +13,7 @@
 
     a {
       /* GM wikipedia */
-      color: mix($c-link, $c-font, 35%);
+      color: $m-primary_font--mix-35;
 
       &:hover {
         color: $c-link;
diff --git a/ui/tournament/css/_app-standing.scss b/ui/tournament/css/_app-standing.scss
index 45fce1507e9b7..834f1665fd21e 100644
--- a/ui/tournament/css/_app-standing.scss
+++ b/ui/tournament/css/_app-standing.scss
@@ -49,18 +49,16 @@
   }
 
   &:not(.created):not(.loading) tbody tr:hover {
-    background: mix($c-primary, $c-bg-box, 30%);
+    background: $m-primary_bg--mix-30;
     cursor: pointer;
   }
 
   tr.me td:first-child {
-    $c-me-border: mix($c-secondary, $c-bg-box, 70%);
-    @include gradient-border($c-me-border, to right, to left);
+    @include gradient-border($m-secondary_bg--mix-70, to right, to left);
   }
 
   tr.active td:last-child {
-    $c-active-border: mix($c-primary, $c-bg-box, 70%);
-    @include gradient-border($c-active-border, to left, to right);
+    @include gradient-border($m-primary_bg--mix-70, to left, to right);
   }
 
   td.rank {
diff --git a/ui/tournament/css/_calendar.scss b/ui/tournament/css/_calendar.scss
index 438caa580715c..6499a53bd1a93 100644
--- a/ui/tournament/css/_calendar.scss
+++ b/ui/tournament/css/_calendar.scss
@@ -149,5 +149,5 @@
 }
 
 #main-wrap {
-  --main-max-width: min(90vw, 100vw - 140px);
+  ---main-max-width: min(90vw, 100vw - 140px);
 }
diff --git a/ui/tournament/css/_duel.scss b/ui/tournament/css/_duel.scss
index fbbd97fd9b393..164ca8ad21a1b 100644
--- a/ui/tournament/css/_duel.scss
+++ b/ui/tournament/css/_duel.scss
@@ -25,12 +25,12 @@
     padding: 0.5em 0.7em;
     white-space: nowrap;
     line-height: 1.9em;
-    border-top: 1px solid mix($c-bg-page, $c-border-page, 50%);
+    border-top: 1px solid $c-border-tour;
 
     @include transition;
 
     &:hover {
-      background: mix($c-link, $c-bg-page, 20%);
+      background: $m-primary_bg-page--mix-20;
     }
   }
 
diff --git a/ui/tournament/css/_layout.scss b/ui/tournament/css/_layout.scss
index 9111a60598db2..66a488f6bca52 100644
--- a/ui/tournament/css/_layout.scss
+++ b/ui/tournament/css/_layout.scss
@@ -1,6 +1,6 @@
 @include mq-at-least-col2 {
   #main-wrap {
-    --main-max-width: auto;
+    ---main-max-width: auto;
   }
 }
 
diff --git a/ui/tournament/css/_leaderboard.scss b/ui/tournament/css/_leaderboard.scss
index 552bd9565855b..de0a2af2bfacb 100644
--- a/ui/tournament/css/_leaderboard.scss
+++ b/ui/tournament/css/_leaderboard.scss
@@ -86,7 +86,7 @@ $user-list-width: 35ch;
   font-size: 1.1em;
 
   .shield-trophy {
-    @include inline-start(calc(var(--box-padding) - 10px));
+    @include inline-start(calc(var(---box-padding) - 10px));
     transform: scale(0.7);
   }
 
@@ -95,7 +95,7 @@ $user-list-width: 35ch;
 
     position: relative;
     height: 60px;
-    padding: 0 var(--box-padding) 0 calc(var(--box-padding) + 70px);
+    padding: 0 var(---box-padding) 0 calc(var(---box-padding) + 70px);
 
     &:nth-child(odd) {
       background: $c-bg-zebra;
diff --git a/ui/tournament/css/_player-info.scss b/ui/tournament/css/_player-info.scss
index 91492d75e642a..bd12a7e0bfdc4 100644
--- a/ui/tournament/css/_player-info.scss
+++ b/ui/tournament/css/_player-info.scss
@@ -13,7 +13,7 @@
       }
 
       &:hover {
-        background: mix($c-link, $c-bg-box, 10%);
+        background: $m-primary_bg--mix-10;
       }
     }
 
diff --git a/ui/tournament/css/_show.scss b/ui/tournament/css/_show.scss
index 4606a10491777..3525f95591fb4 100644
--- a/ui/tournament/css/_show.scss
+++ b/ui/tournament/css/_show.scss
@@ -31,7 +31,7 @@
 }
 
 .tour__faq {
-  padding: 4em var(--box-padding);
+  padding: 4em var(---box-padding);
   display: none;
 
   @include mq-at-least-col2 {
diff --git a/ui/tournament/css/_team-battle.scss b/ui/tournament/css/_team-battle.scss
index 07871df3ab545..071fc929320d5 100644
--- a/ui/tournament/css/_team-battle.scss
+++ b/ui/tournament/css/_team-battle.scss
@@ -91,12 +91,12 @@ team {
   }
 
   tr.active td:last-child {
-    $c-active-border: mix($c-primary, $c-bg-box, 70%);
+    $c-active-border: $m-primary_bg--mix-70;
     @include gradient-border($c-active-border, to left, to right);
   }
 
   .tour__main & tr:hover {
-    background: mix($c-primary, $c-bg-box, 30%) !important;
+    background: $m-primary_bg--mix-30 !important;
   }
 
   td {
diff --git a/ui/tournament/css/_team-info.scss b/ui/tournament/css/_team-info.scss
index ec75e54b13b39..6b26a285c7fe9 100644
--- a/ui/tournament/css/_team-info.scss
+++ b/ui/tournament/css/_team-info.scss
@@ -16,7 +16,7 @@
       }
 
       &:hover {
-        background: mix($c-link, $c-bg-box, 10%);
+        background: $m-primary_bg--mix-10;
       }
     }
 
diff --git a/ui/tournament/css/build/gen/tournament.calendar.dark.scss b/ui/tournament/css/build/gen/tournament.calendar.dark.scss
deleted file mode 100644
index a4878a037e98e..0000000000000
--- a/ui/tournament/css/build/gen/tournament.calendar.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../tournament.calendar';
diff --git a/ui/tournament/css/build/gen/tournament.calendar.light.scss b/ui/tournament/css/build/gen/tournament.calendar.light.scss
deleted file mode 100644
index 3effd0a51026f..0000000000000
--- a/ui/tournament/css/build/gen/tournament.calendar.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../tournament.calendar';
diff --git a/ui/tournament/css/build/gen/tournament.calendar.transp.scss b/ui/tournament/css/build/gen/tournament.calendar.transp.scss
deleted file mode 100644
index 344be64601f57..0000000000000
--- a/ui/tournament/css/build/gen/tournament.calendar.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../tournament.calendar';
diff --git a/ui/tournament/css/build/gen/tournament.leaderboard.dark.scss b/ui/tournament/css/build/gen/tournament.leaderboard.dark.scss
deleted file mode 100644
index 6612f683fedfd..0000000000000
--- a/ui/tournament/css/build/gen/tournament.leaderboard.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../tournament.leaderboard';
diff --git a/ui/tournament/css/build/gen/tournament.leaderboard.light.scss b/ui/tournament/css/build/gen/tournament.leaderboard.light.scss
deleted file mode 100644
index b21b15e1e0d10..0000000000000
--- a/ui/tournament/css/build/gen/tournament.leaderboard.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../tournament.leaderboard';
diff --git a/ui/tournament/css/build/gen/tournament.leaderboard.transp.scss b/ui/tournament/css/build/gen/tournament.leaderboard.transp.scss
deleted file mode 100644
index 2ae70a565365a..0000000000000
--- a/ui/tournament/css/build/gen/tournament.leaderboard.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../tournament.leaderboard';
diff --git a/ui/tournament/css/build/gen/tournament.show.dark.scss b/ui/tournament/css/build/gen/tournament.show.dark.scss
deleted file mode 100644
index db0c6ffd579fd..0000000000000
--- a/ui/tournament/css/build/gen/tournament.show.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../tournament.show';
diff --git a/ui/tournament/css/build/gen/tournament.show.light.scss b/ui/tournament/css/build/gen/tournament.show.light.scss
deleted file mode 100644
index abb0f49a08041..0000000000000
--- a/ui/tournament/css/build/gen/tournament.show.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../tournament.show';
diff --git a/ui/tournament/css/build/gen/tournament.show.team-battle.dark.scss b/ui/tournament/css/build/gen/tournament.show.team-battle.dark.scss
deleted file mode 100644
index aab53610a72cf..0000000000000
--- a/ui/tournament/css/build/gen/tournament.show.team-battle.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../tournament.show.team-battle';
diff --git a/ui/tournament/css/build/gen/tournament.show.team-battle.light.scss b/ui/tournament/css/build/gen/tournament.show.team-battle.light.scss
deleted file mode 100644
index e48a5ead73c64..0000000000000
--- a/ui/tournament/css/build/gen/tournament.show.team-battle.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../tournament.show.team-battle';
diff --git a/ui/tournament/css/build/gen/tournament.show.team-battle.transp.scss b/ui/tournament/css/build/gen/tournament.show.team-battle.transp.scss
deleted file mode 100644
index 3c5e806bf197c..0000000000000
--- a/ui/tournament/css/build/gen/tournament.show.team-battle.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../tournament.show.team-battle';
diff --git a/ui/tournament/css/build/gen/tournament.show.transp.scss b/ui/tournament/css/build/gen/tournament.show.transp.scss
deleted file mode 100644
index 39e63f20508c9..0000000000000
--- a/ui/tournament/css/build/gen/tournament.show.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../tournament.show';
diff --git a/ui/tournament/css/build/_tournament.calendar.scss b/ui/tournament/css/build/tournament.calendar.scss
similarity index 100%
rename from ui/tournament/css/build/_tournament.calendar.scss
rename to ui/tournament/css/build/tournament.calendar.scss
diff --git a/ui/tournament/css/build/_tournament.leaderboard.scss b/ui/tournament/css/build/tournament.leaderboard.scss
similarity index 100%
rename from ui/tournament/css/build/_tournament.leaderboard.scss
rename to ui/tournament/css/build/tournament.leaderboard.scss
diff --git a/ui/tournament/css/build/_tournament.show.scss b/ui/tournament/css/build/tournament.show.scss
similarity index 100%
rename from ui/tournament/css/build/_tournament.show.scss
rename to ui/tournament/css/build/tournament.show.scss
diff --git a/ui/tournament/css/build/_tournament.show.team-battle.scss b/ui/tournament/css/build/tournament.show.team-battle.scss
similarity index 100%
rename from ui/tournament/css/build/_tournament.show.team-battle.scss
rename to ui/tournament/css/build/tournament.show.team-battle.scss
diff --git a/ui/tournamentSchedule/css/_finished.scss b/ui/tournament/css/schedule/_finished.scss
similarity index 100%
rename from ui/tournamentSchedule/css/_finished.scss
rename to ui/tournament/css/schedule/_finished.scss
diff --git a/ui/tournamentSchedule/css/_form.scss b/ui/tournament/css/schedule/_form.scss
similarity index 93%
rename from ui/tournamentSchedule/css/_form.scss
rename to ui/tournament/css/schedule/_form.scss
index 5d45c58f01625..27ab5bdda741a 100644
--- a/ui/tournamentSchedule/css/_form.scss
+++ b/ui/tournament/css/schedule/_form.scss
@@ -56,7 +56,7 @@
 
   li:hover,
   .active {
-    background-color: mix($c-accent, $c-bg-popup, 10%);
+    background-color: $m-accent_bg-popup--mix-10;
   }
 
   a {
diff --git a/ui/tournamentSchedule/css/_history.scss b/ui/tournament/css/schedule/_history.scss
similarity index 100%
rename from ui/tournamentSchedule/css/_history.scss
rename to ui/tournament/css/schedule/_history.scss
diff --git a/ui/tournamentSchedule/css/_home.scss b/ui/tournament/css/schedule/_home.scss
similarity index 100%
rename from ui/tournamentSchedule/css/_home.scss
rename to ui/tournament/css/schedule/_home.scss
diff --git a/ui/tournamentSchedule/css/_layout.scss b/ui/tournament/css/schedule/_layout.scss
similarity index 100%
rename from ui/tournamentSchedule/css/_layout.scss
rename to ui/tournament/css/schedule/_layout.scss
diff --git a/ui/tournamentSchedule/css/_schedule.scss b/ui/tournament/css/schedule/_schedule.scss
similarity index 100%
rename from ui/tournamentSchedule/css/_schedule.scss
rename to ui/tournament/css/schedule/_schedule.scss
diff --git a/ui/tournamentSchedule/css/_side.scss b/ui/tournament/css/schedule/_side.scss
similarity index 96%
rename from ui/tournamentSchedule/css/_side.scss
rename to ui/tournament/css/schedule/_side.scss
index 69a845b7a5bf9..5acb433e57f5b 100644
--- a/ui/tournamentSchedule/css/_side.scss
+++ b/ui/tournament/css/schedule/_side.scss
@@ -72,7 +72,7 @@
       @extend %box-radius;
 
       padding-inline-start: 3.2rem;
-      background: mix($c-brag, $c-bg-page, 20%);
+      background: $m-brag_bg-page--mix-20;
 
       &::before {
         @include inline-start(0.5rem);
diff --git a/ui/tournament/css/schedule/build/tournament.form.scss b/ui/tournament/css/schedule/build/tournament.form.scss
new file mode 100644
index 0000000000000..f8551638f2874
--- /dev/null
+++ b/ui/tournament/css/schedule/build/tournament.form.scss
@@ -0,0 +1,5 @@
+@import '../../../../common/css/plugin';
+@import '../../../../common/css/form/form3';
+@import '../../../../common/css/form/cmn-toggle';
+@import '../../../../common/css/vendor/flatpickr';
+@import '../form';
diff --git a/ui/tournament/css/schedule/build/tournament.history.scss b/ui/tournament/css/schedule/build/tournament.history.scss
new file mode 100644
index 0000000000000..175775cf1260f
--- /dev/null
+++ b/ui/tournament/css/schedule/build/tournament.history.scss
@@ -0,0 +1,3 @@
+@import '../../../../common/css/plugin';
+@import '../../../../common/css/component/slist';
+@import '../history';
diff --git a/ui/tournament/css/schedule/build/tournament.home.scss b/ui/tournament/css/schedule/build/tournament.home.scss
new file mode 100644
index 0000000000000..38dda0fcce524
--- /dev/null
+++ b/ui/tournament/css/schedule/build/tournament.home.scss
@@ -0,0 +1,4 @@
+@import '../../../../common/css/plugin';
+@import '../../../../common/css/component/slist';
+@import '../../../../common/css/base/scrollbar';
+@import '../home';
diff --git a/ui/tournament/package.json b/ui/tournament/package.json
index b418da9ac9984..a9857bed86e4c 100644
--- a/ui/tournament/package.json
+++ b/ui/tournament/package.json
@@ -12,16 +12,19 @@
   "author": "Thibault Duplessis",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
+    "@types/dragscroll": "0.0.0",
     "chat": "workspace:*",
     "common": "workspace:*",
+    "date-fns": "2.29.3",
+    "dragscroll": "^0.0.8",
     "game": "workspace:*",
     "snabbdom": "3.5.1"
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "src/main.ts": "tournament"
-      }
+      "src/tournament.ts": "tournament",
+      "src/tournament.calendar.ts": "tournament.calendar",
+      "src/tournament.schedule.ts": "tournament.schedule"
     }
   }
 }
diff --git a/ui/tournament/src/interfaces.ts b/ui/tournament/src/interfaces.ts
index ab721c90707c9..996b69f575856 100644
--- a/ui/tournament/src/interfaces.ts
+++ b/ui/tournament/src/interfaces.ts
@@ -246,3 +246,37 @@ export interface Pagination {
   nbResults: number;
   nbPages: number;
 }
+
+export interface Tournament {
+  id: string;
+  fullName: string;
+  bounds: {
+    start: Date;
+    end: Date;
+  };
+  schedule: {
+    freq: string;
+    speed: string;
+  };
+  perf: {
+    key: Exclude<Perf, 'fromPosition'>;
+    position: number;
+    name: string;
+  };
+  hasMaxRating: boolean;
+  variant: Variant;
+  startsAt: number;
+  finishesAt: number;
+  status: number;
+  position: number;
+  rated: boolean;
+  minutes: number;
+  createdBy: string;
+  clock: Clock;
+  nbPlayers: number;
+}
+
+export interface Clock {
+  limit: number;
+  increment: number;
+}
diff --git a/ui/tournamentCalendar/src/main.ts b/ui/tournament/src/tournament.calendar.ts
similarity index 63%
rename from ui/tournamentCalendar/src/main.ts
rename to ui/tournament/src/tournament.calendar.ts
index e473faae0cfa3..81729b5b3d7a1 100644
--- a/ui/tournamentCalendar/src/main.ts
+++ b/ui/tournament/src/tournament.calendar.ts
@@ -1,12 +1,23 @@
-import view from './view';
+import view from './view/calendarView';
 
 import { init, VNode, classModule, attributesModule } from 'snabbdom';
-
-import { Ctrl, Opts } from './interfaces';
+import { Tournament } from './interfaces';
 
 const patch = init([classModule, attributesModule]);
 
-export function initModule(opts: Opts) {
+export type Lanes = Array<Array<Tournament>>;
+
+export interface Data {
+  since: number;
+  to: number;
+  tournaments: Tournament[];
+}
+
+export interface Ctrl {
+  data: Data;
+}
+
+export function initModule(opts: { data: Data; i18n: I18nDict }) {
   const element = document.getElementById('tournament-calendar');
   // enrich tournaments
   opts.data.tournaments.forEach(t => {
diff --git a/ui/tournamentSchedule/src/main.ts b/ui/tournament/src/tournament.schedule.ts
similarity index 74%
rename from ui/tournamentSchedule/src/main.ts
rename to ui/tournament/src/tournament.schedule.ts
index 40e64f63e7b1f..e468ca5d0ae30 100644
--- a/ui/tournamentSchedule/src/main.ts
+++ b/ui/tournament/src/tournament.schedule.ts
@@ -1,10 +1,23 @@
-import view from './view';
+import view from './view/scheduleView';
 
 import { init, VNode, classModule, attributesModule } from 'snabbdom';
-import { Opts, Tournament } from './interfaces';
+import { Tournament } from './interfaces';
 
 const patch = init([classModule, attributesModule]);
-export function initModule(opts: Opts) {
+
+export type Lane = Tournament[];
+
+export interface Data {
+  created: Tournament[];
+  started: Tournament[];
+  finished: Tournament[];
+}
+export interface Ctrl {
+  data(): Data;
+  trans: Trans;
+}
+
+export function initModule(opts: { data: Data; i18n: I18nDict }) {
   site.StrongSocket.defaultParams.flag = 'tournament';
 
   const element = document.querySelector('.tour-chart') as HTMLElement;
diff --git a/ui/tournament/src/main.ts b/ui/tournament/src/tournament.ts
similarity index 100%
rename from ui/tournament/src/main.ts
rename to ui/tournament/src/tournament.ts
diff --git a/ui/tournamentCalendar/src/view.ts b/ui/tournament/src/view/calendarView.ts
similarity index 97%
rename from ui/tournamentCalendar/src/view.ts
rename to ui/tournament/src/view/calendarView.ts
index bda2da3367dce..4bd6536329bcb 100644
--- a/ui/tournamentCalendar/src/view.ts
+++ b/ui/tournament/src/view/calendarView.ts
@@ -5,7 +5,8 @@ import getHours from 'date-fns/getHours';
 import getMinutes from 'date-fns/getMinutes';
 import areIntervalsOverlapping from 'date-fns/areIntervalsOverlapping';
 import format from 'date-fns/format';
-import { Tournament, Lanes, Ctrl } from './interfaces';
+import { Tournament } from '../interfaces';
+import { Ctrl, Lanes } from '../tournament.calendar';
 import * as licon from 'common/licon';
 import perfIcons from 'common/perfIcons';
 
diff --git a/ui/tournamentSchedule/src/view.ts b/ui/tournament/src/view/scheduleView.ts
similarity index 98%
rename from ui/tournamentSchedule/src/view.ts
rename to ui/tournament/src/view/scheduleView.ts
index 650c79ae7981d..2a21745ff77fe 100644
--- a/ui/tournamentSchedule/src/view.ts
+++ b/ui/tournament/src/view/scheduleView.ts
@@ -1,7 +1,8 @@
 import { Classes, h, VNode } from 'snabbdom';
 import * as licon from 'common/licon';
 import perfIcons from 'common/perfIcons';
-import { Clock, Ctrl, Lane, Tournament } from './interfaces';
+import { Tournament, Clock } from '../interfaces';
+import { Ctrl, Lane } from '../tournament.schedule';
 import dragscroll from 'dragscroll';
 
 const scale = 8;
diff --git a/ui/tournamentCalendar/package.json b/ui/tournamentCalendar/package.json
deleted file mode 100644
index 3de846592ce77..0000000000000
--- a/ui/tournamentCalendar/package.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-  "name": "tournamentCalendar",
-  "version": "2.0.0",
-  "private": true,
-  "description": "lichess.org tournament calendar",
-  "keywords": [
-    "chess",
-    "lichess",
-    "tournament",
-    "calendar"
-  ],
-  "author": "Thibault Duplessis",
-  "license": "AGPL-3.0-or-later",
-  "dependencies": {
-    "common": "workspace:*",
-    "date-fns": "2.29.3",
-    "snabbdom": "3.5.1"
-  },
-  "lichess": {
-    "modules": {
-      "esm": {
-        "src/main.ts": "tournament.calendar"
-      }
-    }
-  }
-}
diff --git a/ui/tournamentCalendar/src/interfaces.ts b/ui/tournamentCalendar/src/interfaces.ts
deleted file mode 100644
index cc3ec4cc44b82..0000000000000
--- a/ui/tournamentCalendar/src/interfaces.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-export interface Tournament {
-  id: string;
-  bounds: {
-    start: Date;
-    end: Date;
-  };
-  startsAt: number;
-  minutes: number;
-  rated: boolean;
-  hasMaxRating: boolean;
-  schedule: {
-    freq: string;
-  };
-  fullName: string;
-  perf: {
-    key: Exclude<Perf, 'fromPosition'>;
-  };
-}
-
-export interface Ctrl {
-  data: Data;
-}
-
-export interface Opts {
-  data: Data;
-  i18n: I18nDict;
-}
-
-export interface Data {
-  since: number;
-  to: number;
-  tournaments: Tournament[];
-}
-
-export type Lanes = Array<Array<Tournament>>;
diff --git a/ui/tournamentCalendar/tsconfig.json b/ui/tournamentCalendar/tsconfig.json
deleted file mode 100644
index 94054ae696c92..0000000000000
--- a/ui/tournamentCalendar/tsconfig.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "extends": "../tsconfig.base.json",
-  "compilerOptions": { "noEmit": true },
-  "isolatedModules": true,
-  "references": [{ "path": "../common/tsconfig.json" }]
-}
diff --git a/ui/tournamentSchedule/css/build/_tournament.form.scss b/ui/tournamentSchedule/css/build/_tournament.form.scss
deleted file mode 100644
index 7207162e2ba9a..0000000000000
--- a/ui/tournamentSchedule/css/build/_tournament.form.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import '../../../common/css/plugin';
-@import '../../../common/css/form/form3';
-@import '../../../common/css/form/cmn-toggle';
-@import '../../../common/css/vendor/flatpickr';
-@import '../form';
diff --git a/ui/tournamentSchedule/css/build/_tournament.history.scss b/ui/tournamentSchedule/css/build/_tournament.history.scss
deleted file mode 100644
index 071b6419f0392..0000000000000
--- a/ui/tournamentSchedule/css/build/_tournament.history.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import '../../../common/css/plugin';
-@import '../../../common/css/component/slist';
-@import '../history';
diff --git a/ui/tournamentSchedule/css/build/_tournament.home.scss b/ui/tournamentSchedule/css/build/_tournament.home.scss
deleted file mode 100644
index 6c70a4c1a9b18..0000000000000
--- a/ui/tournamentSchedule/css/build/_tournament.home.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@import '../../../common/css/plugin';
-@import '../../../common/css/component/slist';
-@import '../../../common/css/base/scrollbar';
-@import '../home';
diff --git a/ui/tournamentSchedule/css/build/gen/tournament.form.dark.scss b/ui/tournamentSchedule/css/build/gen/tournament.form.dark.scss
deleted file mode 100644
index e10a10d3dbbbf..0000000000000
--- a/ui/tournamentSchedule/css/build/gen/tournament.form.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../tournament.form';
diff --git a/ui/tournamentSchedule/css/build/gen/tournament.form.light.scss b/ui/tournamentSchedule/css/build/gen/tournament.form.light.scss
deleted file mode 100644
index b72c558821582..0000000000000
--- a/ui/tournamentSchedule/css/build/gen/tournament.form.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../tournament.form';
diff --git a/ui/tournamentSchedule/css/build/gen/tournament.form.transp.scss b/ui/tournamentSchedule/css/build/gen/tournament.form.transp.scss
deleted file mode 100644
index 66f2f464f202a..0000000000000
--- a/ui/tournamentSchedule/css/build/gen/tournament.form.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../tournament.form';
diff --git a/ui/tournamentSchedule/css/build/gen/tournament.history.dark.scss b/ui/tournamentSchedule/css/build/gen/tournament.history.dark.scss
deleted file mode 100644
index b306d65eeff73..0000000000000
--- a/ui/tournamentSchedule/css/build/gen/tournament.history.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../tournament.history';
diff --git a/ui/tournamentSchedule/css/build/gen/tournament.history.light.scss b/ui/tournamentSchedule/css/build/gen/tournament.history.light.scss
deleted file mode 100644
index 7c65de8a1e34f..0000000000000
--- a/ui/tournamentSchedule/css/build/gen/tournament.history.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../tournament.history';
diff --git a/ui/tournamentSchedule/css/build/gen/tournament.history.transp.scss b/ui/tournamentSchedule/css/build/gen/tournament.history.transp.scss
deleted file mode 100644
index c8ce4ef845822..0000000000000
--- a/ui/tournamentSchedule/css/build/gen/tournament.history.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../tournament.history';
diff --git a/ui/tournamentSchedule/css/build/gen/tournament.home.dark.scss b/ui/tournamentSchedule/css/build/gen/tournament.home.dark.scss
deleted file mode 100644
index ae324f6f182f2..0000000000000
--- a/ui/tournamentSchedule/css/build/gen/tournament.home.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../tournament.home';
diff --git a/ui/tournamentSchedule/css/build/gen/tournament.home.light.scss b/ui/tournamentSchedule/css/build/gen/tournament.home.light.scss
deleted file mode 100644
index 4abaee3dbc3fb..0000000000000
--- a/ui/tournamentSchedule/css/build/gen/tournament.home.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../tournament.home';
diff --git a/ui/tournamentSchedule/css/build/gen/tournament.home.transp.scss b/ui/tournamentSchedule/css/build/gen/tournament.home.transp.scss
deleted file mode 100644
index ad1042bf5e94c..0000000000000
--- a/ui/tournamentSchedule/css/build/gen/tournament.home.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../tournament.home';
diff --git a/ui/tournamentSchedule/package.json b/ui/tournamentSchedule/package.json
deleted file mode 100644
index d39a36ed203ae..0000000000000
--- a/ui/tournamentSchedule/package.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "name": "tournamentSchedule",
-  "version": "2.0.0",
-  "private": true,
-  "description": "lichess.org tournament schedule",
-  "keywords": [
-    "chess",
-    "lichess",
-    "tournament",
-    "schedule"
-  ],
-  "author": "Thibault Duplessis",
-  "license": "AGPL-3.0-or-later",
-  "dependencies": {
-    "@types/dragscroll": "0.0.0",
-    "common": "workspace:*",
-    "dragscroll": "^0.0.8",
-    "snabbdom": "3.5.1"
-  },
-  "lichess": {
-    "modules": {
-      "esm": {
-        "src/main.ts": "tournament.schedule"
-      }
-    }
-  }
-}
diff --git a/ui/tournamentSchedule/src/interfaces.ts b/ui/tournamentSchedule/src/interfaces.ts
deleted file mode 100644
index e8b77cad585d2..0000000000000
--- a/ui/tournamentSchedule/src/interfaces.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import perfIcons from 'common/perfIcons';
-
-export interface Tournament {
-  id: string;
-  fullName: string;
-  schedule: {
-    freq: string;
-    speed: string;
-  };
-  perf: {
-    key: keyof typeof perfIcons;
-    position: number;
-    name: string;
-  };
-  hasMaxRating: boolean;
-  variant: Variant;
-  startsAt: number;
-  finishesAt: number;
-  status: number;
-  position: number;
-  rated: boolean;
-  minutes: number;
-  createdBy: string;
-  clock: Clock;
-  nbPlayers: number;
-}
-
-export interface Data {
-  created: Tournament[];
-  started: Tournament[];
-  finished: Tournament[];
-}
-
-export interface Opts {
-  data: Data;
-  i18n: I18nDict;
-}
-
-export interface Clock {
-  limit: number;
-  increment: number;
-}
-
-export interface Ctrl {
-  data(): Data;
-  trans: Trans;
-}
-
-export type Lane = Tournament[];
diff --git a/ui/tournamentSchedule/tsconfig.json b/ui/tournamentSchedule/tsconfig.json
deleted file mode 100644
index 94054ae696c92..0000000000000
--- a/ui/tournamentSchedule/tsconfig.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "extends": "../tsconfig.base.json",
-  "compilerOptions": { "noEmit": true },
-  "isolatedModules": true,
-  "references": [{ "path": "../common/tsconfig.json" }]
-}
diff --git a/ui/tree/css/_tree.scss b/ui/tree/css/_tree.scss
index dd3b1666c55f6..9c5bf91bd9998 100644
--- a/ui/tree/css/_tree.scss
+++ b/ui/tree/css/_tree.scss
@@ -1,12 +1,5 @@
 @import 'extend';
 
-$c-bg-inaccuracy-hover: c-dimmer($c-inaccuracy, 70%);
-$c-bg-mistake-hover: c-dimmer($c-mistake, 70%);
-$c-bg-blunder-hover: c-dimmer($c-blunder, 70%);
-$c-bg-good-hover: c-dimmer($c-good-move, 70%);
-$c-bg-brilliant-hover: c-dimmer($c-brilliant, 70%);
-$c-bg-interesting-hover: c-dimmer($c-interesting, 70%);
-
 .tview2 {
   white-space: normal;
 
@@ -28,37 +21,37 @@ $c-bg-interesting-hover: c-dimmer($c-interesting, 70%);
     &.inaccuracy {
       color: $c-inaccuracy;
       &:hover {
-        background: $c-bg-inaccuracy-hover;
+        background: $m-inaccuracy_bg--mix-30;
       }
     }
     &.mistake {
       color: $c-mistake;
       &:hover {
-        background: $c-bg-mistake-hover;
+        background: $m-mistake_bg--mix-30;
       }
     }
     &.blunder {
       color: $c-blunder;
       &:hover {
-        background: $c-bg-blunder-hover;
+        background: $m-blunder_bg--mix-30;
       }
     }
     &.good {
       color: $c-good-move;
       &:hover {
-        background: $c-bg-good-hover;
+        background: $m-good-move_bg--mix-30;
       }
     }
     &.brilliant {
       color: $c-brilliant;
       &:hover {
-        background: $c-bg-brilliant-hover;
+        background: $m-brilliant_bg--mix-30;
       }
     }
     &.interesting {
       color: $c-interesting;
       &:hover {
-        background: $c-bg-interesting-hover;
+        background: $m-interesting_bg--mix-30;
       }
     }
   }
@@ -92,16 +85,16 @@ $c-bg-interesting-hover: c-dimmer($c-interesting, 70%);
 
   move.active {
     font-weight: bold;
-    background: mix($c-primary, $c-bg-box, 25%);
+    background: $m-primary_bg--mix-25;
     color: $c-font-clear;
   }
 
   &-inline move.active,
   line move.active {
     @extend %box-radius;
-    background: mix($c-primary, $c-bg-box, 40%);
+    background: $m-primary_bg--mix-40;
     color: $c-font-clearer;
-    outline: 1px solid mix($c-primary, $c-bg-box, 60%);
+    outline: 1px solid $m-primary_bg--mix-60;
   }
 
   move.nongame {
@@ -115,7 +108,7 @@ $c-bg-interesting-hover: c-dimmer($c-interesting, 70%);
     index,
     eval {
       background: $c-primary;
-      color: $c-primary-over;
+      color: $c-over;
     }
   }
 
@@ -135,10 +128,10 @@ $c-bg-interesting-hover: c-dimmer($c-interesting, 70%);
 
   move.context-menu {
     background: $c-accent;
-    color: $c-accent-over;
+    color: $c-over;
 
     index {
-      color: $c-accent-over;
+      color: $c-over;
     }
   }
 
diff --git a/ui/tree/package.json b/ui/tree/package.json
index df157dc1b93b2..badbcf82c190a 100644
--- a/ui/tree/package.json
+++ b/ui/tree/package.json
@@ -4,8 +4,8 @@
   "private": true,
   "description": "lichess.org moves tree",
   "type": "module",
-  "module": "dist/main.js",
-  "types": "dist/main.d.ts",
+  "module": "dist/tree.js",
+  "types": "dist/tree.d.ts",
   "keywords": [
     "chess",
     "lichess"
diff --git a/ui/tree/src/main.ts b/ui/tree/src/main.ts
deleted file mode 100644
index 2387feffb7754..0000000000000
--- a/ui/tree/src/main.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { build, TreeWrapper } from './tree';
-import * as path from './path';
-import * as ops from './ops';
-
-export { build, type TreeWrapper, path, ops };
diff --git a/ui/tree/src/tree.ts b/ui/tree/src/tree.ts
index 9f0804ad48239..3ccac90adca99 100644
--- a/ui/tree/src/tree.ts
+++ b/ui/tree/src/tree.ts
@@ -2,6 +2,8 @@ import * as treePath from './path';
 import * as ops from './ops';
 import { defined } from 'common';
 
+export { treePath as path, ops };
+
 export type MaybeNode = Tree.Node | undefined;
 
 export interface TreeWrapper {
diff --git a/ui/tutor/css/_card.scss b/ui/tutor/css/_card.scss
index 11d453c39c95b..fce501d59d163 100644
--- a/ui/tutor/css/_card.scss
+++ b/ui/tutor/css/_card.scss
@@ -4,7 +4,7 @@
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
     grid-gap: 1em;
-    margin: var(--box-padding) 0;
+    margin: var(---box-padding) 0;
     &--triple {
       grid-template-columns: 1fr;
       @media (min-width: at-least($medium)) {
@@ -28,9 +28,9 @@
       // outline: 3px solid mix($c-link, $c-bg-box, 30%);
       cursor: pointer;
       &:hover {
-        outline: 3px solid mix($c-link, $c-bg-box, 60%);
-        background: mix($c-link, $c-bg-zebra, 10%);
-        box-shadow: 0 0 30px mix($c-link, $c-bg-box, 20%);
+        outline: 3px solid $m-primary_bg--mix-60;
+        background: $m-primary_bg-zebra--mix-10;
+        box-shadow: 0 0 30px $m-primary_bg--mix-20;
       }
     }
 
@@ -38,7 +38,7 @@
       @extend %flex-center-nowrap;
 
       i {
-        text-shadow: $text-shadow;
+        @extend %page-text-shadow;
         font-size: 4em;
         margin: 0 1rem 0 1rem;
         color: $c-primary;
diff --git a/ui/tutor/css/_grade.scss b/ui/tutor/css/_grade.scss
index d239c7b7b73fc..1c13a0e4ae35e 100644
--- a/ui/tutor/css/_grade.scss
+++ b/ui/tutor/css/_grade.scss
@@ -27,23 +27,23 @@
         border: $border;
         background: $c-bg-low;
         &.lit {
-          background: mix($c-good, $c-bg-box, 80%);
+          background: $m-secondary_bg--mix-80;
         }
       }
       &--1,
       &--2 {
         > div.lit {
-          background: mix($c-bad, $c-bg-box, 80%);
+          background: $m-bad_bg--mix-80;
         }
       }
       &--3 {
         > div.lit {
-          background: mix($c-brag, $c-bg-box, 80%);
+          background: $m-brag_bg--mix-80;
         }
       }
       &--4 {
         > div.lit {
-          background: desaturate(mix($c-good, $c-bg-box, 80%), 10%);
+          background: $c-tutor-bg;
         }
       }
     }
diff --git a/ui/tutor/css/_home.scss b/ui/tutor/css/_home.scss
index 395d525312eb9..a872911468083 100644
--- a/ui/tutor/css/_home.scss
+++ b/ui/tutor/css/_home.scss
@@ -36,15 +36,15 @@
     min-height: 255px;
 
     position: relative;
-    --move-initial: calc(0%);
-    --move-final: calc(-200px * 30);
+    ---move-initial: calc(0%);
+    ---move-final: calc(-200px * 30);
 
     &__carousel {
       @extend %flex-center-nowrap;
       gap: 2em;
       width: fit-content;
       position: relative;
-      transform: translate3d(var(--move-initial), 0, 0);
+      transform: translate3d(var(---move-initial), 0, 0);
       animation: marquee 61s linear infinite;
       animation-play-state: running;
     }
@@ -67,11 +67,11 @@
   }
   @keyframes marquee {
     0% {
-      transform: translate3d(var(--move-initial), 0, 0);
+      transform: translate3d(var(---move-initial), 0, 0);
     }
 
     100% {
-      transform: translate3d(var(--move-final), 0, 0);
+      transform: translate3d(var(---move-final), 0, 0);
     }
   }
 }
diff --git a/ui/tutor/css/_openings.scss b/ui/tutor/css/_openings.scss
index 33bcbb98aff9f..2d9a18f7f7604 100644
--- a/ui/tutor/css/_openings.scss
+++ b/ui/tutor/css/_openings.scss
@@ -37,10 +37,10 @@
           opacity: 0.8;
         }
         &.good {
-          background: mix($c-good, $c-bg-zebra, 20%);
+          background: $m-secondary_bg-zebra--mix-20;
         }
         &.bad {
-          background: mix($c-bad, $c-bg-zebra, 20%);
+          background: $m-bad_bg-zebra--mix-20;
         }
       }
     }
diff --git a/ui/tutor/css/_util.scss b/ui/tutor/css/_util.scss
index a4bc07075a19a..2b7836022c967 100644
--- a/ui/tutor/css/_util.scss
+++ b/ui/tutor/css/_util.scss
@@ -13,7 +13,7 @@
   }
 
   &__pad {
-    padding: 0 var(--box-padding) $box-padding-vert var(--box-padding);
+    padding: 0 var(---box-padding) $box-padding-vert var(---box-padding);
   }
 
   &__concept {
diff --git a/ui/tutor/css/build/gen/tutor.dark.scss b/ui/tutor/css/build/gen/tutor.dark.scss
deleted file mode 100644
index 7e830dee43685..0000000000000
--- a/ui/tutor/css/build/gen/tutor.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../tutor';
diff --git a/ui/tutor/css/build/gen/tutor.light.scss b/ui/tutor/css/build/gen/tutor.light.scss
deleted file mode 100644
index 9c3b97e80f703..0000000000000
--- a/ui/tutor/css/build/gen/tutor.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../tutor';
diff --git a/ui/tutor/css/build/gen/tutor.transp.scss b/ui/tutor/css/build/gen/tutor.transp.scss
deleted file mode 100644
index a8f4e1635958e..0000000000000
--- a/ui/tutor/css/build/gen/tutor.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../tutor';
diff --git a/ui/tutor/css/build/_tutor.scss b/ui/tutor/css/build/tutor.scss
similarity index 100%
rename from ui/tutor/css/build/_tutor.scss
rename to ui/tutor/css/build/tutor.scss
diff --git a/ui/tutor/package.json b/ui/tutor/package.json
index e4c2a0805d92e..70dfdbac944c8 100644
--- a/ui/tutor/package.json
+++ b/ui/tutor/package.json
@@ -7,13 +7,11 @@
   "license": "AGPL-3.0-or-later",
   "dependencies": {
     "common": "workspace:*",
-    "lichess-pgn-viewer": "^2.0.1"
+    "lichess-pgn-viewer": "^2.1.0"
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "src/main.ts": "tutor"
-      }
+      "src/tutor.ts": "tutor"
     }
   }
 }
diff --git a/ui/tutor/src/main.ts b/ui/tutor/src/tutor.ts
similarity index 100%
rename from ui/tutor/src/main.ts
rename to ui/tutor/src/tutor.ts
diff --git a/ui/voice/css/_voice.scss b/ui/voice/css/_voice.scss
index c374dba447a60..8c67c1d17dcee 100644
--- a/ui/voice/css/_voice.scss
+++ b/ui/voice/css/_voice.scss
@@ -1,5 +1,3 @@
-$c-mic-bg-hover: if($theme == 'light', $c-font-dimmer, transparent);
-
 #voice-bar {
   position: relative;
   user-select: none;
@@ -67,9 +65,11 @@ button#microphone-button {
   height: 30px;
   border: 1px solid transparent;
   border-radius: 4px;
-
-  &:hover {
-    background-color: $c-mic-bg-hover;
+  background-color: transparent;
+  @include if-light {
+    &:hover {
+      background-color: $c-font-dimmer;
+    }
   }
 
   &.push-to-talk {
diff --git a/ui/voice/css/build/gen/voice.dark.scss b/ui/voice/css/build/gen/voice.dark.scss
deleted file mode 100644
index de6e80ce342d0..0000000000000
--- a/ui/voice/css/build/gen/voice.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../voice';
diff --git a/ui/voice/css/build/gen/voice.light.scss b/ui/voice/css/build/gen/voice.light.scss
deleted file mode 100644
index 2cfbe19a2a867..0000000000000
--- a/ui/voice/css/build/gen/voice.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../voice';
diff --git a/ui/voice/css/build/gen/voice.transp.scss b/ui/voice/css/build/gen/voice.transp.scss
deleted file mode 100644
index d99e8c86e46e3..0000000000000
--- a/ui/voice/css/build/gen/voice.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../voice';
diff --git a/ui/voice/css/build/gen/voiceMove.help.dark.scss b/ui/voice/css/build/gen/voiceMove.help.dark.scss
deleted file mode 100644
index b40b95faa54c8..0000000000000
--- a/ui/voice/css/build/gen/voiceMove.help.dark.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/dark';
-@import '../voiceMove.help';
diff --git a/ui/voice/css/build/gen/voiceMove.help.light.scss b/ui/voice/css/build/gen/voiceMove.help.light.scss
deleted file mode 100644
index cdcc1c22eaec5..0000000000000
--- a/ui/voice/css/build/gen/voiceMove.help.light.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/light';
-@import '../voiceMove.help';
diff --git a/ui/voice/css/build/gen/voiceMove.help.transp.scss b/ui/voice/css/build/gen/voiceMove.help.transp.scss
deleted file mode 100644
index 48852e105f32b..0000000000000
--- a/ui/voice/css/build/gen/voiceMove.help.transp.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import '../../../../common/css/theme/transp';
-@import '../voiceMove.help';
diff --git a/ui/voice/css/build/_voice.scss b/ui/voice/css/build/voice.scss
similarity index 100%
rename from ui/voice/css/build/_voice.scss
rename to ui/voice/css/build/voice.scss
diff --git a/ui/voice/css/build/_voiceMove.help.scss b/ui/voice/css/build/voiceMove.help.scss
similarity index 100%
rename from ui/voice/css/build/_voiceMove.help.scss
rename to ui/voice/css/build/voiceMove.help.scss
diff --git a/ui/voice/package.json b/ui/voice/package.json
index 77fe8d5fe5749..5e2b354d72bb8 100644
--- a/ui/voice/package.json
+++ b/ui/voice/package.json
@@ -4,8 +4,8 @@
   "private": true,
   "description": "lichess.org voice rec",
   "type": "module",
-  "module": "dist/main.js",
-  "types": "dist/main.d.ts",
+  "module": "dist/voice.js",
+  "types": "dist/voice.d.ts",
   "keywords": [
     "chess",
     "lichess"
@@ -21,14 +21,11 @@
   },
   "lichess": {
     "modules": {
-      "esm": {
-        "src/vosk.ts": "voice.vosk",
-        "src/move/moveCtrl.ts": "voice.move"
-      }
+      "src/vosk.ts": "voice.vosk",
+      "src/move/voice.move.ts": "voice.move"
     },
-    "copy": {
-      "src": "grammar/**",
-      "dest": "../../public/compiled/grammar"
+    "sync": {
+      "grammar/**": "public/compiled/grammar"
     }
   }
 }
diff --git a/ui/voice/src/move/moveCtrl.ts b/ui/voice/src/move/voice.move.ts
similarity index 99%
rename from ui/voice/src/move/moveCtrl.ts
rename to ui/voice/src/move/voice.move.ts
index 94947e9abdff3..002a2225e0914 100644
--- a/ui/voice/src/move/moveCtrl.ts
+++ b/ui/voice/src/move/voice.move.ts
@@ -5,7 +5,7 @@ import * as cs from 'chess';
 import { from as src, to as dest } from 'chess';
 import { PromotionCtrl, promote } from 'chess/promotion';
 import { MoveRootCtrl, MoveUpdate } from 'chess/moveRootCtrl';
-import { VoiceMove, VoiceCtrl, Entry, Match, makeCtrl } from '../main';
+import { VoiceMove, VoiceCtrl, Entry, Match, makeCtrl } from '../voice';
 import { coloredArrows, numberedArrows, brushes } from './arrows';
 import { settingNodes } from './view';
 import { spread, type SparseMap, spreadMap, getSpread, remove, pushMap, as } from 'common';
diff --git a/ui/voice/src/view.ts b/ui/voice/src/view.ts
index 5ba95b8d25000..d69e0b4e4f5d3 100644
--- a/ui/voice/src/view.ts
+++ b/ui/voice/src/view.ts
@@ -3,7 +3,7 @@ import { onInsert, bind, looseH as h } from 'common/snabbdom';
 import * as xhr from 'common/xhr';
 import { onClickAway } from 'common';
 import { Entry, VoiceCtrl } from './interfaces';
-import { supportedLangs } from './main';
+import { supportedLangs } from './voice';
 
 export function renderVoiceBar(ctrl: VoiceCtrl, redraw: () => void, cls?: string) {
   return h(`div#voice-bar${cls ? '.' + cls : ''}`, [
diff --git a/ui/voice/src/main.ts b/ui/voice/src/voice.ts
similarity index 97%
rename from ui/voice/src/main.ts
rename to ui/voice/src/voice.ts
index 650af9a062146..c2ee9bfb12b91 100644
--- a/ui/voice/src/main.ts
+++ b/ui/voice/src/voice.ts
@@ -5,7 +5,7 @@ import { flash } from './view';
 
 export * from './interfaces';
 export * from './move/interfaces';
-export { makeVoiceMove } from './move/moveCtrl';
+export { makeVoiceMove } from './move/voice.move';
 export { renderVoiceBar } from './view';
 
 export const VOSK_TS_VERSION = '_____1'; // this versions the wasm asset (see vosk.ts)