diff --git a/docs/devnotes.md b/docs/devnotes.md
index bd97c7b..31f8cb9 100644
--- a/docs/devnotes.md
+++ b/docs/devnotes.md
@@ -41,3 +41,9 @@ export function updateAcctInf(idx: number) {
 ```
 
 Ja, the code is weird, but that's the best we know. Anyway, you need new object on the path of your changed value.
+
+## `transition: *-block or *-inline` does not work on WebKit
+
+Idk why, but transition on logical directions may not work on WebKit - sometimes they work.
+
+Use physical directions to avoid trouble, like "margin-top, margin-bottom".
diff --git a/public/logo.svg b/public/logo.svg
index c3b58f5..9f9c9c6 100644
--- a/public/logo.svg
+++ b/public/logo.svg
@@ -2,9 +2,9 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
-   width="512"
-   height="512"
-   viewBox="0 0 512 512"
+   width="448.06656"
+   height="443.66376"
+   viewBox="0 0 448.06656 443.66376"
    version="1.1"
    id="svg1"
    xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -51,7 +51,7 @@
   </defs>
   <g
      id="layer1"
-     transform="matrix(0,1.4786237,-1.4786237,0,642.78291,-98.6117)"
+     transform="matrix(0,1.4786237,-1.4786237,0,611.53939,-132.05234)"
      style="display:none">
     <path
        style="fill:url(#linearGradient5);stroke:#000000;stroke-width:2;stroke-dasharray:none"
@@ -72,21 +72,21 @@
   </g>
   <g
      id="g9"
-     transform="matrix(0,1.5553086,-1.5553086,0,668.42415,-94.877994)">
+     transform="matrix(0,1.5553086,-1.5553086,0,637.18063,-128.31863)">
     <path
-       style="fill:url(#linearGradient9);stroke:#000000;stroke-width:2;stroke-dasharray:none"
+       style="fill:url(#linearGradient9);stroke:#000000;stroke-width:15.431;stroke-dasharray:none"
        d="m 117.92992,367.86152 c 25.48298,38.39529 93.78536,33.94838 93.78536,33.94838 0,0 58.98001,-7.82594 105.93153,-57.60357 51.75,-54.86494 41.67301,-98.59259 41.67301,-98.59259 0,0 0.85581,-49.23349 -57.70901,-95.79319 -44.18497,-35.12756 -115.71798,-13.75528 -115.71798,-13.75528 0,0 -87.11283,22.14714 -94.699695,109.46821 -7.087568,81.5744 26.736785,122.32804 26.736785,122.32804 z"
        id="path6" />
     <g
        id="g8"
-       style="stroke-width:2;stroke-dasharray:none"
+       style="stroke-width:2.00025;stroke-dasharray:none"
        transform="translate(-1.7787639,5.3362916)">
       <path
-         style="fill:none;stroke:#000000;stroke-width:2.3;stroke-dasharray:none"
+         style="fill:none;stroke:#000000;stroke-width:15.431;stroke-dasharray:none"
          d="m 210.50439,396.31338 c 0,0 -29.4511,-105.3688 -28.96641,-141.50635 0.34942,-26.05202 -0.47344,-34.47943 3.80644,-54.3634 5.96795,-27.72652 12.70659,-35.21402 12.70659,-35.21402"
          id="path7" />
       <path
-         style="fill:none;stroke:#000000;stroke-width:1.8;stroke-dasharray:none"
+         style="fill:none;stroke:#000000;stroke-width:12.8592;stroke-dasharray:none"
          d="m 185.10879,292.14608 c 2.88624,-0.57725 6.83376,-30.94178 44.70393,-42.39467"
          id="path8" />
     </g>
diff --git a/src/timelines/toot.module.css b/src/timelines/toot.module.css
index 56b4d73..e58f602 100644
--- a/src/timelines/toot.module.css
+++ b/src/timelines/toot.module.css
@@ -8,7 +8,8 @@
   &.toot {
     /* fix composition ordering: I think the css module processor should aware the overriding and behaves, but no */
     transition:
-      margin-block 125ms var(--tutu-anim-curve-std),
+      margin-top 125ms var(--tutu-anim-curve-std),
+      margin-bottom 125ms var(--tutu-anim-curve-std),
       height 225ms var(--tutu-anim-curve-std),
       var(--tutu-transition-shadow);
     border-radius: 0;
diff --git a/vite.config.ts b/vite.config.ts
index ae43ff6..7881869 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,6 +5,50 @@ import suid from "@suid/vite-plugin";
 import { VitePWA } from "vite-plugin-pwa";
 import version from "vite-plugin-package-version";
 import manifest from "./manifest.config";
+import { GetManualChunk } from "rollup";
+
+/**
+ * Put all strings (/i18n/{key}.<json|js|ts>) into separated chunks based on the key.
+ */
+const chunkStrs: GetManualChunk = (id, { getModuleInfo }) => {
+  const match = /.*\/i18n\/(.*)\.[jt]s.*$/.exec(id);
+  if (match) {
+    const key = match[1];
+
+    const dependentEntryPoints = [];
+
+    // we use a Set here so we handle each module at most once. This
+    // prevents infinite loops in case of circular dependencies
+    const idsToHandle = new Set(getModuleInfo(id)!.dynamicImporters);
+
+    for (const moduleId of idsToHandle) {
+      const { isEntry, dynamicImporters, importers } = getModuleInfo(moduleId)!;
+      if (isEntry || dynamicImporters.length > 0)
+        dependentEntryPoints.push(moduleId);
+
+      // The Set iterator is intelligent enough to iterate over
+      // elements that are added during iteration
+      for (const importerId of importers) idsToHandle.add(importerId);
+    }
+
+    // If there is a unique entry, we put it into a chunk based on the
+    // entry name
+    if (dependentEntryPoints.length === 1) {
+      return `${key}.${
+        dependentEntryPoints[0].split("/").slice(-1)[0].split(".")[0]
+      }.strings`;
+    }
+    // For multiple entries, we put it into a "shared" chunk
+    if (dependentEntryPoints.length > 1) {
+      return `${key}.shared.strings`;
+    }
+  }
+};
+
+
+const manualChunks: GetManualChunk = (id, meta) => {
+  return chunkStrs(id, meta);
+};
 
 export default defineConfig(({ mode }) => ({
   plugins: [
@@ -48,5 +92,10 @@ export default defineConfig(({ mode }) => ({
   build: {
     target: ["firefox98", "safari15.4", "ios15.4", "chrome84", "edge87"],
     sourcemap: true,
+    rollupOptions: {
+      output: {
+        manualChunks,
+      },
+    },
   },
 }));