fix: dark/light mode compatibility for fullscreen controls

- Close button: use theme CSS vars (--md-default-bg-color,
  --md-default-fg-color) instead of hardcoded rgba — adapts to both
  light mode (dark text on light bg) and dark mode (light text on
  dark bg)
- Remove duplicate margin-top on expand button
- Expand button hover: use CSS var for text color

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: rorar

docs/stylesheets/extra.css

@@ -110,10 +110,9 @@
 /* Mermaid fullscreen button (inserted as sibling after .mermaid element) */
 .mermaid-expand-btn {
   display: flex;
-  margin: 0.5rem auto 0;
   align-items: center;
   gap: 0.3rem;
-  margin-top: 0.5rem;
+  margin: 0.5rem auto 0;
   padding: 0.3rem 0.8rem;
   border: 1px solid var(--md-accent-fg-color);
   border-radius: 4px;
@@ -126,7 +125,7 @@
 
 .mermaid-expand-btn:hover {
   background: var(--md-accent-fg-color);
-  color: #fff;
+  color: var(--md-accent-fg-color--transparent, #fff);
 }
 
 /* Mermaid element in native fullscreen mode */
@@ -140,21 +139,23 @@
   position: relative;
 }
 
+/* Close button — adapts to light/dark mode */
 .mermaid-close-btn {
   position: fixed;
   top: 1rem;
   right: 1rem;
   z-index: 1;
   padding: 0.4rem 1rem;
-  border: none;
+  border: 1px solid var(--md-default-fg-color--lighter);
   border-radius: 6px;
-  background: rgba(0, 0, 0, 0.6);
-  color: #fff;
+  background: var(--md-default-bg-color, #fff);
+  color: var(--md-default-fg-color, #333);
   font-size: 0.85rem;
   cursor: pointer;
-  transition: background 0.15s;
+  opacity: 0.85;
+  transition: opacity 0.15s;
 }
 
 .mermaid-close-btn:hover {
-  background: rgba(0, 0, 0, 0.85);
+  opacity: 1;
 }