diff --git a/docs/.vitepress/theme/styles/custom.scss b/docs/.vitepress/theme/styles/custom.scss
index 69df61e0..0f2b1b24 100644
--- a/docs/.vitepress/theme/styles/custom.scss
+++ b/docs/.vitepress/theme/styles/custom.scss
@@ -430,3 +430,68 @@ html.dark {
     align-items: end;
 }
 // vitepress homepage styles end
+// macos styled pre tag code block styles with three colored dots
+.vp-doc div[class*=language-] {
+    position: relative;
+    border-radius: 8px;
+    overflow: hidden;
+    // box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%);
+    z-index: 1;
+}
+
+/* No line number: add macOS-style small dot */
+.vp-doc div[class*=language-]::before {
+    content: "";
+    display: block;
+    position: relative;
+    top: 12px;
+    left: 12px;
+    width: 12px;
+    height: 12px;
+    background-color: #ff5f56;
+    border-radius: 50%;
+    box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
+    z-index: 1;
+}
+
+/* With line number: add background shadow */
+div[class*="language-"].vp-adaptive-theme.line-numbers-mode {
+    position: relative;
+    border-radius: 8px;
+    overflow: hidden;
+    // box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%);
+}
+
+
+/* With line number: add macOS-style small dot */
+.vp-doc div[class*="language-"].line-numbers-mode::before {
+    content: "";
+    display: block;
+    position: relative;
+    top: 12px;
+    left: -22px;
+    width: 12px;
+    height: 12px;
+    background-color: #ff5f56;
+    border-radius: 50%;
+    box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
+    z-index: 1;
+}
+
+
+
+/* Move line number down to align with code; hide right vertical line */
+.vp-doc .line-numbers-wrapper {
+    padding-top: 32px;
+    border-right: none;
+}
+
+/* Rebuild the right vertical line for line numbers */
+.vp-doc .line-numbers-wrapper::after {
+    content: "";
+    position: absolute;
+    top: 38px;
+    right: 0;
+    border-right: 1px solid var(--vp-code-block-divider-color);
+    height: calc(100% - 66px);
+}