feat(docs): add flexible-alerts plugin and callout styles

1 files changed, 63 insertions, 14 deletions

diff --git a/docs/css/dev-light.css b/docs/css/dev-light.css
index 4de3083..4122f25 100644
--- a/docs/css/dev-light.css
+++ b/docs/css/dev-light.css
@@ -33,7 +33,8 @@ img.emoji {
     vertical-align: middle;
 }
 span.emoji {
-    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    font-family:
+        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
         "Noto Color Emoji";
     font-size: 1.2em;
     vertical-align: middle;
@@ -47,7 +48,9 @@ span.emoji {
     position: fixed;
     right: 0;
     top: 0;
-    transition: width 0.2s, opacity 0.4s;
+    transition:
+        width 0.2s,
+        opacity 0.4s;
     width: 0%;
     z-index: 999999;
 }
@@ -72,8 +75,14 @@ body {
     -webkit-font-smoothing: antialiased;
     background-color: #ffffff;
     color: #24292f;
-    font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans",
-        Helvetica, Arial, sans-serif;
+    font-family:
+        system-ui,
+        -apple-system,
+        "Segoe UI",
+        "Noto Sans",
+        Helvetica,
+        Arial,
+        sans-serif;
     font-size: 15px;
     line-height: 1.7;
     letter-spacing: 0;
@@ -100,8 +109,14 @@ kbd {
 
 /* ── Nav bar (top) ── */
 .app-nav {
-    font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans",
-        Helvetica, Arial, sans-serif;
+    font-family:
+        system-ui,
+        -apple-system,
+        "Segoe UI",
+        "Noto Sans",
+        Helvetica,
+        Arial,
+        sans-serif;
     margin: 0 0 0 auto;
     position: fixed;
     right: 30px;
@@ -372,9 +387,9 @@ body.sticky .sidebar-toggle {
 .markdown-section code {
     background: rgba(27, 31, 36, 0.06);
     border-radius: 4px;
-    font-family: "JetBrains Mono", "Fira Code", "Cascadia Code",
-        "SF Mono", "Fira Mono", "Source Code Pro", Menlo, Consolas,
-        "DejaVu Sans Mono", monospace;
+    font-family:
+        "JetBrains Mono", "Fira Code", "Cascadia Code", "SF Mono", "Fira Mono",
+        "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
     font-size: 13px;
     margin: 0;
     padding: 2px 6px;
@@ -386,9 +401,9 @@ body.sticky .sidebar-toggle {
     background: #f6f8fa;
     border: 1px solid #d0d7de;
     border-radius: 6px;
-    font-family: "JetBrains Mono", "Fira Code", "Cascadia Code",
-        "SF Mono", "Fira Mono", "Source Code Pro", Menlo, Consolas,
-        "DejaVu Sans Mono", monospace;
+    font-family:
+        "JetBrains Mono", "Fira Code", "Cascadia Code", "SF Mono", "Fira Mono",
+        "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
     font-size: 13px;
     line-height: 1.6;
     margin: 16px 0;
@@ -526,6 +541,34 @@ code .token {
     min-height: 24px;
 }
 
+/* ── Flexible alerts ── */
+.alert.callout {
+    border-radius: 6px;
+}
+.alert.callout.note {
+    border: 1px solid #0969da;
+    background: rgba(9, 105, 218, 0.06);
+}
+.alert.callout.tip {
+    border: 1px solid #1a7f37;
+    background: rgba(26, 127, 55, 0.06);
+}
+.alert.callout.important {
+    border: 1px solid #8250df;
+    background: rgba(130, 80, 223, 0.06);
+}
+.alert.callout.warning {
+    border: 1px solid #d29922;
+    background: rgba(210, 153, 34, 0.06);
+}
+.alert.callout.attention {
+    border: 1px solid #cf222e;
+    background: rgba(207, 34, 46, 0.06);
+}
+.alert.callout code {
+    background-color: transparent;
+}
+
 /* ── Search panel ── */
 .search {
     border-bottom: 1px solid #d0d7de;
@@ -539,8 +582,14 @@ code .token {
     border: 1px solid #d0d7de;
     border-radius: 6px;
     color: #24292f;
-    font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans",
-        Helvetica, Arial, sans-serif;
+    font-family:
+        system-ui,
+        -apple-system,
+        "Segoe UI",
+        "Noto Sans",
+        Helvetica,
+        Arial,
+        sans-serif;
     font-size: 14px;
     outline: none;
     padding: 6px 32px 6px 12px;