diff --git a/src/timelines/RegularToot.css b/src/timelines/RegularToot.css
new file mode 100644
index 0000000..d7a50c3
--- /dev/null
+++ b/src/timelines/RegularToot.css
@@ -0,0 +1,78 @@
+.RegularToot {
+  --card-pad: 16px;
+  --card-gut: 16px;
+  --toot-avatar-size: 40px;
+  margin-block: 0;
+  position: relative;
+  contain: layout style;
+  cursor: pointer;
+
+
+  transition:
+    margin-top 60ms var(--tutu-anim-curve-sharp),
+    margin-bottom 60ms var(--tutu-anim-curve-sharp),
+    height 60ms var(--tutu-anim-curve-sharp),
+    var(--tutu-transition-shadow);
+  border-radius: 0;
+
+  time {
+    color: var(--tutu-color-secondary-text-on-surface);
+  }
+
+  >.retoot-grp {
+    display: flex;
+    gap: 0.25em;
+    margin-bottom: 8px;
+    align-items: center;
+
+    > :first-child {
+      margin-right: 0.25em;
+    }
+  }
+
+  & .custom-emoji {
+    height: 1em;
+    object-fit: contain;
+  }
+
+  &.expanded {
+    margin-block: 20px;
+    box-shadow: var(--tutu-shadow-e9);
+  }
+
+  &.thread-top,
+  &.thread-mid,
+  &.thread-btm {
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 36px;
+      background-color: var(--tutu-color-secondary);
+      width: 2px;
+      display: block;
+    }
+  }
+
+  &.thread-mid {
+    &::before {
+      top: 0;
+      bottom: 0;
+    }
+  }
+
+  &.thread-top {
+    &::before {
+      top: 16px;
+      bottom: 0;
+    }
+  }
+
+  &.thread-btm {
+    &::before {
+      top: 0;
+      height: 16px;
+    }
+  }
+}
diff --git a/src/timelines/RegularToot.tsx b/src/timelines/RegularToot.tsx
index 48bc7cf..fd5c80d 100644
--- a/src/timelines/RegularToot.tsx
+++ b/src/timelines/RegularToot.tsx
@@ -14,11 +14,7 @@ import tootStyle from "./toot.module.css";
 import { formatRelative } from "date-fns";
 import Img from "~material/Img.js";
 import { Body2 } from "~material/typography.js";
-import { css } from "solid-styled";
-import {
-  SmartToySharp,
-  Lock,
-} from "@suid/icons-material";
+import { SmartToySharp, Lock } from "@suid/icons-material";
 import { useTimeSource } from "~platform/timesrc.js";
 import { resolveCustomEmoji } from "../masto/toot.js";
 import { Divider } from "@suid/material";
@@ -30,7 +26,8 @@ import TootContent from "./toots/TootContent";
 import BoostIcon from "./toots/BoostIcon";
 import PreviewCard from "./toots/PreviewCard";
 import TootPoll from "./toots/TootPoll";
-import TootActionGroup from "./toots/TootActionGroup.js"
+import TootActionGroup from "./toots/TootActionGroup.js";
+import "./RegularToot.css";
 
 export type TootEnv = {
   boost: (value: mastodon.v1.Status) => void;
@@ -178,9 +175,9 @@ function onToggleReveal(setValue: Setter<boolean>, event: Event) {
  * You can extract the intent from the attributes of the "actionable" element.
  * The action type is the dataset's `action`.
  */
-const RegularToot: Component<RegularTootProps> = (props) => {
+const RegularToot: Component<RegularTootProps> = (oprops) => {
   let rootRef: HTMLElement;
-  const [managed, rest] = splitProps(props, [
+  const [props, rest] = splitProps(oprops, [
     "status",
     "lang",
     "class",
@@ -189,71 +186,28 @@ const RegularToot: Component<RegularTootProps> = (props) => {
     "thread",
   ]);
   const now = useTimeSource();
-  const status = () => managed.status;
+  const status = () => props.status;
   const toot = () => status().reblog ?? status();
   const session = useDefaultSession();
   const [reveal, setReveal] = createSignal(false);
 
-  css`
-    .reply-sep {
-      margin-left: calc(var(--toot-avatar-size) + var(--card-pad) + 8px);
-      margin-block: 8px;
-    }
-
-    .thread-top,
-    .thread-mid,
-    .thread-btm {
-      position: relative;
-
-      &::before {
-        content: "";
-        position: absolute;
-        left: 36px;
-        background-color: var(--tutu-color-secondary);
-        width: 2px;
-        display: block;
-      }
-    }
-
-    .thread-mid {
-      &::before {
-        top: 0;
-        bottom: 0;
-      }
-    }
-
-    .thread-top {
-      &::before {
-        top: 16px;
-        bottom: 0;
-      }
-    }
-
-    .thread-btm {
-      &::before {
-        top: 0;
-        height: 16px;
-      }
-    }
-  `;
-
   return (
     <>
       <article
         classList={{
-          [tootStyle.toot]: true,
-          [tootStyle.expanded]: managed.evaluated,
-          "thread-top": managed.thread === "top",
-          "thread-mid": managed.thread === "middle",
-          "thread-btm": managed.thread === "bottom",
-          [managed.class || ""]: true,
+          "RegularToot": true,
+          "expanded": props.evaluated,
+          "thread-top": props.thread === "top",
+          "thread-mid": props.thread === "middle",
+          "thread-btm": props.thread === "bottom",
+          [props.class || ""]: true,
         }}
         ref={rootRef!}
-        lang={toot().language || managed.lang}
+        lang={toot().language || props.lang}
         {...rest}
       >
         <Show when={!!status().reblog}>
-          <div class={tootStyle.tootRetootGrp}>
+          <div class="retoot-grp">
             <BoostIcon />
             <Body2
               ref={(e: { innerHTML: string }) => {
@@ -301,7 +255,7 @@ const RegularToot: Component<RegularTootProps> = (props) => {
         <Show when={toot().poll}>
           <TootPoll value={toot().poll!} status={toot()} />
         </Show>
-        <Show when={managed.actionable}>
+        <Show when={props.actionable}>
           <Divider
             class={cardStyle.cardNoPad}
             style={{ "margin-top": "8px" }}
diff --git a/src/timelines/toot.module.css b/src/timelines/toot.module.css
index 1f68542..e666f66 100644
--- a/src/timelines/toot.module.css
+++ b/src/timelines/toot.module.css
@@ -1,37 +1,3 @@
-.toot {
-  --card-pad: 16px;
-  --card-gut: 16px;
-  --toot-avatar-size: 40px;
-  margin-block: 0;
-  position: relative;
-  contain: content;
-  cursor: pointer;
-
-  &.toot {
-    /* fix composition ordering: I think the css module processor should aware the overriding and behaves, but no */
-    transition:
-      margin-top 60ms var(--tutu-anim-curve-sharp),
-      margin-bottom 60ms var(--tutu-anim-curve-sharp),
-      height 60ms var(--tutu-anim-curve-sharp),
-      var(--tutu-transition-shadow);
-    border-radius: 0;
-  }
-
-  time {
-    color: var(--tutu-color-secondary-text-on-surface);
-  }
-
-  & :global(.custom-emoji) {
-    height: 1em;
-    object-fit: contain;
-  }
-
-  &.expanded {
-    margin-block: 20px;
-    box-shadow: var(--tutu-shadow-e9);
-  }
-}
-
 .tootAuthorGrp {
   display: flex;
   align-items: flex-start;
@@ -84,14 +50,3 @@
   border: 1px solid var(--tutu-color-surface);
   background-color: var(--tutu-color-surface-d);
 }
-
-.tootRetootGrp {
-  display: flex;
-  gap: 0.25em;
-  margin-bottom: 8px;
-  align-items: center;
-
-  > :first-child {
-    margin-right: 0.25em;
-  }
-}