md-redline 0.1.0

package/src/index.css

@@ -0,0 +1,1047 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+/* ========== Semantic Color Tokens ========== */
+@theme {
+  /* Surfaces */
+  --color-surface: var(--theme-bg);
+  --color-surface-secondary: var(--theme-bg-secondary);
+  --color-surface-raised: var(--theme-bg-raised);
+  --color-surface-inset: var(--theme-bg-inset);
+
+  /* Borders */
+  --color-border: var(--theme-border);
+  --color-border-subtle: var(--theme-border-subtle);
+
+  /* Text content */
+  --color-content: var(--theme-text);
+  --color-content-secondary: var(--theme-text-secondary);
+  --color-content-muted: var(--theme-text-muted);
+  --color-content-faint: var(--theme-text-faint);
+
+  /* Primary accent */
+  --color-primary: var(--theme-accent);
+  --color-primary-hover: var(--theme-accent-hover);
+  --color-primary-bg: var(--theme-accent-bg);
+  --color-primary-bg-strong: var(--theme-accent-bg-strong);
+  --color-primary-text: var(--theme-accent-text);
+  --color-primary-border: var(--theme-accent-border);
+  --color-primary-ring: var(--theme-accent-ring);
+  --color-on-primary: var(--theme-on-accent);
+
+  /* Danger */
+  --color-danger: var(--theme-danger);
+  --color-danger-bg: var(--theme-danger-bg);
+  --color-danger-text: var(--theme-danger-text);
+
+  /* Success */
+  --color-success: var(--theme-success);
+  --color-success-bg: var(--theme-success-bg);
+  --color-success-text: var(--theme-success-text);
+
+  /* Warning */
+  --color-warning: var(--theme-warning);
+  --color-warning-bg: var(--theme-warning-bg);
+  --color-warning-text: var(--theme-warning-text);
+
+  /* Comment anchors */
+  --color-comment-anchor-bg: var(--theme-comment-anchor-bg);
+  --color-comment-anchor-text: var(--theme-comment-anchor-text);
+  --color-comment-anchor-border: var(--theme-comment-anchor-border);
+
+  /* Status badges */
+  --color-status-open-bg: var(--theme-status-open-bg);
+  --color-status-open-text: var(--theme-status-open-text);
+  --color-status-resolved-bg: var(--theme-status-resolved-bg);
+  --color-status-resolved-text: var(--theme-status-resolved-text);
+
+  /* Diff */
+  --color-diff-added-bg: var(--theme-diff-added-bg);
+  --color-diff-added-text: var(--theme-diff-added-text);
+  --color-diff-removed-bg: var(--theme-diff-removed-bg);
+  --color-diff-removed-text: var(--theme-diff-removed-text);
+
+  /* Interactive hover tints — stronger than base -bg for clear hover feedback */
+  --color-tint: var(--theme-tint);
+  --color-tint-primary: var(--theme-tint-primary);
+  --color-tint-success: var(--theme-tint-success);
+  --color-tint-danger: var(--theme-tint-danger);
+
+  /* Gradient */
+  --color-gradient-from: var(--theme-gradient-from);
+  --color-gradient-to: var(--theme-gradient-to);
+}
+
+/* ========== Light Theme (default) ========== */
+:root, [data-theme="light"] {
+  color-scheme: light;
+  --theme-bg: #ffffff;
+  --theme-bg-secondary: #f8fafc;
+  --theme-bg-raised: #ffffff;
+  --theme-bg-inset: #f1f5f9;
+  --theme-border: #e2e8f0;
+  --theme-border-subtle: #f1f5f9;
+  --theme-text: #1e293b;
+  --theme-text-secondary: #475569;
+  --theme-text-muted: #94a3b8;
+  --theme-text-faint: #cbd5e1;
+  --theme-accent: #4f46e5;
+  --theme-accent-hover: #4338ca;
+  --theme-accent-bg: #eef2ff;
+  --theme-accent-bg-strong: #e0e7ff;
+  --theme-accent-text: #4f46e5;
+  --theme-accent-border: #a5b4fc;
+  --theme-accent-ring: #c7d2fe;
+  --theme-on-accent: #ffffff;
+  --theme-danger: #ef4444;
+  --theme-danger-bg: #fef2f2;
+  --theme-danger-text: #dc2626;
+  --theme-success: #10b981;
+  --theme-success-bg: #ecfdf5;
+  --theme-success-text: #059669;
+  --theme-warning: #f59e0b;
+  --theme-warning-bg: #fffbeb;
+  --theme-warning-text: #d97706;
+  --theme-comment-anchor-bg: #fffbeb;
+  --theme-comment-anchor-text: #b45309;
+  --theme-comment-anchor-border: #fde68a;
+  --theme-status-open-bg: #dbeafe;
+  --theme-status-open-text: #2563eb;
+  --theme-status-resolved-bg: #dcfce7;
+  --theme-status-resolved-text: #16a34a;
+  --theme-tint: rgba(0, 0, 0, 0.1);
+  --theme-tint-primary: rgba(79, 70, 229, 0.18);
+  --theme-tint-success: rgba(16, 185, 129, 0.18);
+  --theme-tint-danger: rgba(239, 68, 68, 0.15);
+  --theme-comment-bg: #fef3c7;
+  /* Pre-composited comment-bg over page-bg. Used for mermaid SVG highlights
+     where semi-transparent backgrounds don't work. For new themes, compute:
+     R = bg_R + (fg_R - bg_R) * alpha, same for G and B. */
+  --theme-comment-bg-opaque: #fef3c7;
+  --theme-comment-bg-hover: #fde68a;
+  --theme-comment-underline: #f59e0b;
+  --theme-comment-underline-active: #d97706;
+  --theme-comment-ring: rgba(217, 119, 6, 0.3);
+  --theme-selection-bg: #dbeafe;
+  --theme-native-selection: #c7d2fe;
+  --theme-drag-handle: #d97706;
+  --theme-drag-handle-hover: #b45309;
+  --theme-diff-added-bg: #ecfdf5;
+  --theme-diff-added-text: #065f46;
+  --theme-diff-removed-bg: #fef2f2;
+  --theme-diff-removed-text: #991b1b;
+  --theme-gradient-from: #f8fafc;
+  --theme-gradient-to: rgba(238, 242, 255, 0.3);
+  --theme-search-bg: rgba(74, 222, 128, 0.3);
+  --theme-search-active-bg: #f97316;
+  --theme-search-active-text: #ffffff;
+  --theme-scrollbar-thumb: #c1c9d4;
+  --theme-scrollbar-thumb-hover: #a0aab6;
+  --theme-scrollbar-track: #f1f5f9;
+}
+
+/* ========== Dark Theme ========== */
+[data-theme="dark"] {
+  color-scheme: dark;
+  --theme-bg: #0f172a;
+  --theme-bg-secondary: #1e293b;
+  --theme-bg-raised: #1e293b;
+  --theme-bg-inset: #0a1120;
+  --theme-border: #334155;
+  --theme-border-subtle: #1e293b;
+  --theme-text: #f1f5f9;
+  --theme-text-secondary: #cbd5e1;
+  --theme-text-muted: #64748b;
+  --theme-text-faint: #475569;
+  --theme-accent: #818cf8;
+  --theme-accent-hover: #a5b4fc;
+  --theme-accent-bg: rgba(99, 102, 241, 0.15);
+  --theme-accent-bg-strong: rgba(99, 102, 241, 0.25);
+  --theme-accent-text: #a5b4fc;
+  --theme-accent-border: rgba(99, 102, 241, 0.4);
+  --theme-accent-ring: rgba(99, 102, 241, 0.3);
+  --theme-on-accent: #ffffff;
+  --theme-danger: #f87171;
+  --theme-danger-bg: rgba(239, 68, 68, 0.15);
+  --theme-danger-text: #f87171;
+  --theme-success: #34d399;
+  --theme-success-bg: rgba(16, 185, 129, 0.15);
+  --theme-success-text: #34d399;
+  --theme-warning: #fbbf24;
+  --theme-warning-bg: rgba(245, 158, 11, 0.15);
+  --theme-warning-text: #fbbf24;
+  --theme-comment-anchor-bg: rgba(245, 158, 11, 0.15);
+  --theme-comment-anchor-text: #fcd34d;
+  --theme-comment-anchor-border: rgba(245, 158, 11, 0.3);
+  --theme-status-open-bg: rgba(59, 130, 246, 0.2);
+  --theme-status-open-text: #93c5fd;
+  --theme-status-resolved-bg: rgba(34, 197, 94, 0.2);
+  --theme-status-resolved-text: #86efac;
+  --theme-tint: rgba(255, 255, 255, 0.12);
+  --theme-tint-primary: rgba(129, 140, 248, 0.25);
+  --theme-tint-success: rgba(52, 211, 153, 0.25);
+  --theme-tint-danger: rgba(248, 113, 113, 0.2);
+  --theme-comment-bg: rgba(245, 158, 11, 0.2);
+  --theme-comment-bg-opaque: #3d3224;
+  --theme-comment-bg-hover: rgba(245, 158, 11, 0.3);
+  --theme-comment-underline: #f59e0b;
+  --theme-comment-underline-active: #fbbf24;
+  --theme-comment-ring: rgba(251, 191, 36, 0.3);
+  --theme-selection-bg: rgba(59, 130, 246, 0.25);
+  --theme-native-selection: rgba(129, 140, 248, 0.4);
+  --theme-drag-handle: #f59e0b;
+  --theme-drag-handle-hover: #fbbf24;
+  --theme-diff-added-bg: rgba(16, 185, 129, 0.15);
+  --theme-diff-added-text: #6ee7b7;
+  --theme-diff-removed-bg: rgba(239, 68, 68, 0.15);
+  --theme-diff-removed-text: #fca5a5;
+  --theme-gradient-from: #0f172a;
+  --theme-gradient-to: rgba(99, 102, 241, 0.08);
+  --theme-search-bg: rgba(74, 222, 128, 0.2);
+  --theme-search-active-bg: rgba(249, 115, 22, 0.7);
+  --theme-search-active-text: #ffffff;
+  --theme-scrollbar-thumb: #475569;
+  --theme-scrollbar-thumb-hover: #64748b;
+  --theme-scrollbar-track: #1e293b;
+}
+
+/* ========== Sepia Theme ========== */
+[data-theme="sepia"] {
+  color-scheme: light;
+  --theme-bg: #faf6f1;
+  --theme-bg-secondary: #f5efe6;
+  --theme-bg-raised: #faf6f1;
+  --theme-bg-inset: #f0e8db;
+  --theme-border: #e0d5c5;
+  --theme-border-subtle: #f0e8db;
+  --theme-text: #3d3229;
+  --theme-text-secondary: #5c4f42;
+  --theme-text-muted: #8b7e6f;
+  --theme-text-faint: #b8ad9e;
+  --theme-accent: #8b5e3c;
+  --theme-accent-hover: #714b2f;
+  --theme-accent-bg: rgba(139, 94, 60, 0.1);
+  --theme-accent-bg-strong: rgba(139, 94, 60, 0.18);
+  --theme-accent-text: #8b5e3c;
+  --theme-accent-border: rgba(139, 94, 60, 0.35);
+  --theme-accent-ring: rgba(139, 94, 60, 0.25);
+  --theme-on-accent: #faf6f1;
+  --theme-danger: #c0392b;
+  --theme-danger-bg: rgba(192, 57, 43, 0.1);
+  --theme-danger-text: #c0392b;
+  --theme-success: #27ae60;
+  --theme-success-bg: rgba(39, 174, 96, 0.1);
+  --theme-success-text: #27ae60;
+  --theme-warning: #d4a04a;
+  --theme-warning-bg: rgba(212, 160, 74, 0.12);
+  --theme-warning-text: #b8862e;
+  --theme-comment-anchor-bg: rgba(212, 160, 74, 0.15);
+  --theme-comment-anchor-text: #8b5e3c;
+  --theme-comment-anchor-border: rgba(212, 160, 74, 0.3);
+  --theme-status-open-bg: rgba(41, 128, 185, 0.15);
+  --theme-status-open-text: #2980b9;
+  --theme-status-resolved-bg: rgba(39, 174, 96, 0.15);
+  --theme-status-resolved-text: #27ae60;
+  --theme-tint: rgba(61, 50, 41, 0.1);
+  --theme-tint-primary: rgba(139, 94, 60, 0.18);
+  --theme-tint-success: rgba(39, 174, 96, 0.18);
+  --theme-tint-danger: rgba(192, 57, 43, 0.15);
+  --theme-comment-bg: rgba(212, 160, 74, 0.2);
+  --theme-comment-bg-opaque: #f2e5d0;
+  --theme-comment-bg-hover: rgba(212, 160, 74, 0.3);
+  --theme-comment-underline: #d4a04a;
+  --theme-comment-underline-active: #b8862e;
+  --theme-comment-ring: rgba(184, 134, 46, 0.3);
+  --theme-selection-bg: rgba(41, 128, 185, 0.15);
+  --theme-native-selection: rgba(139, 94, 60, 0.25);
+  --theme-drag-handle: #b8862e;
+  --theme-drag-handle-hover: #8b5e3c;
+  --theme-diff-added-bg: rgba(39, 174, 96, 0.12);
+  --theme-diff-added-text: #1e7a45;
+  --theme-diff-removed-bg: rgba(192, 57, 43, 0.12);
+  --theme-diff-removed-text: #922b21;
+  --theme-gradient-from: #f5efe6;
+  --theme-gradient-to: rgba(139, 94, 60, 0.06);
+  --theme-search-bg: rgba(74, 222, 128, 0.2);
+  --theme-search-active-bg: rgba(194, 120, 3, 0.6);
+  --theme-search-active-text: #faf6f1;
+  --theme-scrollbar-thumb: #c4b8a6;
+  --theme-scrollbar-thumb-hover: #a89880;
+  --theme-scrollbar-track: #f0e8db;
+}
+
+/* ========== Nord Theme ========== */
+[data-theme="nord"] {
+  color-scheme: dark;
+  --theme-bg: #2e3440;
+  --theme-bg-secondary: #3b4252;
+  --theme-bg-raised: #3b4252;
+  --theme-bg-inset: #272d38;
+  --theme-border: #4c566a;
+  --theme-border-subtle: #3b4252;
+  --theme-text: #eceff4;
+  --theme-text-secondary: #d8dee9;
+  --theme-text-muted: #7b88a1;
+  --theme-text-faint: #4c566a;
+  --theme-accent: #88c0d0;
+  --theme-accent-hover: #8fbcbb;
+  --theme-accent-bg: rgba(136, 192, 208, 0.15);
+  --theme-accent-bg-strong: rgba(136, 192, 208, 0.25);
+  --theme-accent-text: #88c0d0;
+  --theme-accent-border: rgba(136, 192, 208, 0.4);
+  --theme-accent-ring: rgba(136, 192, 208, 0.3);
+  --theme-on-accent: #2e3440;
+  --theme-danger: #bf616a;
+  --theme-danger-bg: rgba(191, 97, 106, 0.15);
+  --theme-danger-text: #bf616a;
+  --theme-success: #a3be8c;
+  --theme-success-bg: rgba(163, 190, 140, 0.15);
+  --theme-success-text: #a3be8c;
+  --theme-warning: #ebcb8b;
+  --theme-warning-bg: rgba(235, 203, 139, 0.15);
+  --theme-warning-text: #ebcb8b;
+  --theme-comment-anchor-bg: rgba(235, 203, 139, 0.15);
+  --theme-comment-anchor-text: #ebcb8b;
+  --theme-comment-anchor-border: rgba(235, 203, 139, 0.3);
+  --theme-status-open-bg: rgba(136, 192, 208, 0.2);
+  --theme-status-open-text: #88c0d0;
+  --theme-status-resolved-bg: rgba(163, 190, 140, 0.2);
+  --theme-status-resolved-text: #a3be8c;
+  --theme-tint: rgba(236, 239, 244, 0.12);
+  --theme-tint-primary: rgba(136, 192, 208, 0.25);
+  --theme-tint-success: rgba(163, 190, 140, 0.25);
+  --theme-tint-danger: rgba(191, 97, 106, 0.2);
+  --theme-comment-bg: rgba(235, 203, 139, 0.2);
+  --theme-comment-bg-opaque: #54524f;
+  --theme-comment-bg-hover: rgba(235, 203, 139, 0.3);
+  --theme-comment-underline: #ebcb8b;
+  --theme-comment-underline-active: #d08770;
+  --theme-comment-ring: rgba(208, 135, 112, 0.3);
+  --theme-selection-bg: rgba(94, 129, 172, 0.25);
+  --theme-native-selection: rgba(136, 192, 208, 0.3);
+  --theme-drag-handle: #d08770;
+  --theme-drag-handle-hover: #ebcb8b;
+  --theme-diff-added-bg: rgba(163, 190, 140, 0.15);
+  --theme-diff-added-text: #a3be8c;
+  --theme-diff-removed-bg: rgba(191, 97, 106, 0.15);
+  --theme-diff-removed-text: #bf616a;
+  --theme-gradient-from: #2e3440;
+  --theme-gradient-to: rgba(136, 192, 208, 0.08);
+  --theme-search-bg: rgba(163, 190, 140, 0.3);
+  --theme-search-active-bg: rgba(208, 135, 112, 0.7);
+  --theme-search-active-text: #eceff4;
+  --theme-scrollbar-thumb: #4c566a;
+  --theme-scrollbar-thumb-hover: #5e6a82;
+  --theme-scrollbar-track: #3b4252;
+}
+
+/* ========== Rosé Pine Theme ========== */
+[data-theme="rose-pine"] {
+  color-scheme: dark;
+  --theme-bg: #191724;
+  --theme-bg-secondary: #1f1d2e;
+  --theme-bg-raised: #26233a;
+  --theme-bg-inset: #13111e;
+  --theme-border: #403d52;
+  --theme-border-subtle: #26233a;
+  --theme-text: #e0def4;
+  --theme-text-secondary: #908caa;
+  --theme-text-muted: #6e6a86;
+  --theme-text-faint: #524f67;
+  --theme-accent: #c4a7e7;
+  --theme-accent-hover: #d4bdf7;
+  --theme-accent-bg: rgba(196, 167, 231, 0.15);
+  --theme-accent-bg-strong: rgba(196, 167, 231, 0.25);
+  --theme-accent-text: #c4a7e7;
+  --theme-accent-border: rgba(196, 167, 231, 0.4);
+  --theme-accent-ring: rgba(196, 167, 231, 0.3);
+  --theme-on-accent: #191724;
+  --theme-danger: #eb6f92;
+  --theme-danger-bg: rgba(235, 111, 146, 0.15);
+  --theme-danger-text: #eb6f92;
+  --theme-success: #9ccfd8;
+  --theme-success-bg: rgba(156, 207, 216, 0.15);
+  --theme-success-text: #9ccfd8;
+  --theme-warning: #f6c177;
+  --theme-warning-bg: rgba(246, 193, 119, 0.15);
+  --theme-warning-text: #f6c177;
+  --theme-comment-anchor-bg: rgba(246, 193, 119, 0.15);
+  --theme-comment-anchor-text: #f6c177;
+  --theme-comment-anchor-border: rgba(246, 193, 119, 0.3);
+  --theme-status-open-bg: rgba(196, 167, 231, 0.2);
+  --theme-status-open-text: #c4a7e7;
+  --theme-status-resolved-bg: rgba(156, 207, 216, 0.2);
+  --theme-status-resolved-text: #9ccfd8;
+  --theme-tint: rgba(224, 222, 244, 0.12);
+  --theme-tint-primary: rgba(196, 167, 231, 0.25);
+  --theme-tint-success: rgba(156, 207, 216, 0.25);
+  --theme-tint-danger: rgba(235, 111, 146, 0.2);
+  --theme-comment-bg: rgba(246, 193, 119, 0.2);
+  --theme-comment-bg-opaque: #453935;
+  --theme-comment-bg-hover: rgba(246, 193, 119, 0.3);
+  --theme-comment-underline: #f6c177;
+  --theme-comment-underline-active: #ea9d34;
+  --theme-comment-ring: rgba(234, 157, 52, 0.3);
+  --theme-selection-bg: rgba(196, 167, 231, 0.2);
+  --theme-native-selection: rgba(196, 167, 231, 0.3);
+  --theme-drag-handle: #ea9d34;
+  --theme-drag-handle-hover: #f6c177;
+  --theme-diff-added-bg: rgba(156, 207, 216, 0.15);
+  --theme-diff-added-text: #9ccfd8;
+  --theme-diff-removed-bg: rgba(235, 111, 146, 0.15);
+  --theme-diff-removed-text: #eb6f92;
+  --theme-gradient-from: #191724;
+  --theme-gradient-to: rgba(196, 167, 231, 0.08);
+  --theme-search-bg: rgba(156, 207, 216, 0.3);
+  --theme-search-active-bg: rgba(234, 157, 52, 0.7);
+  --theme-search-active-text: #e0def4;
+  --theme-scrollbar-thumb: #403d52;
+  --theme-scrollbar-thumb-hover: #524f67;
+  --theme-scrollbar-track: #1f1d2e;
+}
+
+/* ========== Solarized Light Theme ========== */
+[data-theme="solarized"] {
+  color-scheme: light;
+  --theme-bg: #fdf6e3;
+  --theme-bg-secondary: #eee8d5;
+  --theme-bg-raised: #fdf6e3;
+  --theme-bg-inset: #eee8d5;
+  --theme-border: #d3cbb7;
+  --theme-border-subtle: #eee8d5;
+  --theme-text: #073642;
+  --theme-text-secondary: #586e75;
+  --theme-text-muted: #93a1a1;
+  --theme-text-faint: #c0c4bb;
+  --theme-accent: #268bd2;
+  --theme-accent-hover: #1a6fb0;
+  --theme-accent-bg: rgba(38, 139, 210, 0.1);
+  --theme-accent-bg-strong: rgba(38, 139, 210, 0.18);
+  --theme-accent-text: #268bd2;
+  --theme-accent-border: rgba(38, 139, 210, 0.35);
+  --theme-accent-ring: rgba(38, 139, 210, 0.25);
+  --theme-on-accent: #fdf6e3;
+  --theme-danger: #dc322f;
+  --theme-danger-bg: rgba(220, 50, 47, 0.1);
+  --theme-danger-text: #dc322f;
+  --theme-success: #859900;
+  --theme-success-bg: rgba(133, 153, 0, 0.1);
+  --theme-success-text: #859900;
+  --theme-warning: #b58900;
+  --theme-warning-bg: rgba(181, 137, 0, 0.12);
+  --theme-warning-text: #b58900;
+  --theme-comment-anchor-bg: rgba(181, 137, 0, 0.12);
+  --theme-comment-anchor-text: #b58900;
+  --theme-comment-anchor-border: rgba(181, 137, 0, 0.3);
+  --theme-status-open-bg: rgba(38, 139, 210, 0.15);
+  --theme-status-open-text: #268bd2;
+  --theme-status-resolved-bg: rgba(133, 153, 0, 0.15);
+  --theme-status-resolved-text: #859900;
+  --theme-tint: rgba(7, 54, 66, 0.1);
+  --theme-tint-primary: rgba(38, 139, 210, 0.18);
+  --theme-tint-success: rgba(133, 153, 0, 0.18);
+  --theme-tint-danger: rgba(220, 50, 47, 0.15);
+  --theme-comment-bg: rgba(181, 137, 0, 0.18);
+  --theme-comment-bg-opaque: #f0e2ba;
+  --theme-comment-bg-hover: rgba(181, 137, 0, 0.28);
+  --theme-comment-underline: #b58900;
+  --theme-comment-underline-active: #926e00;
+  --theme-comment-ring: rgba(146, 110, 0, 0.3);
+  --theme-selection-bg: rgba(38, 139, 210, 0.15);
+  --theme-native-selection: rgba(38, 139, 210, 0.25);
+  --theme-drag-handle: #926e00;
+  --theme-drag-handle-hover: #b58900;
+  --theme-diff-added-bg: rgba(133, 153, 0, 0.12);
+  --theme-diff-added-text: #586e75;
+  --theme-diff-removed-bg: rgba(220, 50, 47, 0.12);
+  --theme-diff-removed-text: #dc322f;
+  --theme-gradient-from: #eee8d5;
+  --theme-gradient-to: rgba(38, 139, 210, 0.06);
+  --theme-search-bg: rgba(133, 153, 0, 0.25);
+  --theme-search-active-bg: rgba(203, 75, 22, 0.6);
+  --theme-search-active-text: #fdf6e3;
+  --theme-scrollbar-thumb: #c0c4bb;
+  --theme-scrollbar-thumb-hover: #a5a99e;
+  --theme-scrollbar-track: #eee8d5;
+}
+
+/* ========== GitHub Theme ========== */
+[data-theme="github"] {
+  color-scheme: light;
+  --theme-bg: #ffffff;
+  --theme-bg-secondary: #f6f8fa;
+  --theme-bg-raised: #ffffff;
+  --theme-bg-inset: #f6f8fa;
+  --theme-border: #d0d7de;
+  --theme-border-subtle: #e8ecf0;
+  --theme-text: #1f2328;
+  --theme-text-secondary: #656d76;
+  --theme-text-muted: #8b949e;
+  --theme-text-faint: #c0c8d0;
+  --theme-accent: #0969da;
+  --theme-accent-hover: #0550ae;
+  --theme-accent-bg: rgba(9, 105, 218, 0.08);
+  --theme-accent-bg-strong: rgba(9, 105, 218, 0.15);
+  --theme-accent-text: #0969da;
+  --theme-accent-border: rgba(9, 105, 218, 0.35);
+  --theme-accent-ring: rgba(9, 105, 218, 0.25);
+  --theme-on-accent: #ffffff;
+  --theme-danger: #cf222e;
+  --theme-danger-bg: rgba(207, 34, 46, 0.08);
+  --theme-danger-text: #cf222e;
+  --theme-success: #1a7f37;
+  --theme-success-bg: rgba(26, 127, 55, 0.08);
+  --theme-success-text: #1a7f37;
+  --theme-warning: #bf8700;
+  --theme-warning-bg: rgba(191, 135, 0, 0.1);
+  --theme-warning-text: #9a6700;
+  --theme-comment-anchor-bg: rgba(191, 135, 0, 0.1);
+  --theme-comment-anchor-text: #9a6700;
+  --theme-comment-anchor-border: rgba(191, 135, 0, 0.3);
+  --theme-status-open-bg: rgba(9, 105, 218, 0.1);
+  --theme-status-open-text: #0969da;
+  --theme-status-resolved-bg: rgba(26, 127, 55, 0.1);
+  --theme-status-resolved-text: #1a7f37;
+  --theme-tint: rgba(31, 35, 40, 0.08);
+  --theme-tint-primary: rgba(9, 105, 218, 0.15);
+  --theme-tint-success: rgba(26, 127, 55, 0.15);
+  --theme-tint-danger: rgba(207, 34, 46, 0.12);
+  --theme-comment-bg: rgba(191, 135, 0, 0.15);
+  --theme-comment-bg-opaque: #f5edd9;
+  --theme-comment-bg-hover: rgba(191, 135, 0, 0.25);
+  --theme-comment-underline: #bf8700;
+  --theme-comment-underline-active: #9a6700;
+  --theme-comment-ring: rgba(154, 103, 0, 0.3);
+  --theme-selection-bg: rgba(9, 105, 218, 0.12);
+  --theme-native-selection: rgba(9, 105, 218, 0.2);
+  --theme-drag-handle: #9a6700;
+  --theme-drag-handle-hover: #bf8700;
+  --theme-diff-added-bg: #dafbe1;
+  --theme-diff-added-text: #116329;
+  --theme-diff-removed-bg: #ffebe9;
+  --theme-diff-removed-text: #82071e;
+  --theme-gradient-from: #f6f8fa;
+  --theme-gradient-to: rgba(9, 105, 218, 0.04);
+  --theme-search-bg: rgba(74, 222, 128, 0.25);
+  --theme-search-active-bg: #f59e0b;
+  --theme-search-active-text: #ffffff;
+  --theme-scrollbar-thumb: #c8cdd2;
+  --theme-scrollbar-thumb-hover: #a8b0b8;
+  --theme-scrollbar-track: #f6f8fa;
+}
+
+/* ========== Catppuccin Mocha Theme ========== */
+[data-theme="catppuccin"] {
+  color-scheme: dark;
+  --theme-bg: #1e1e2e;
+  --theme-bg-secondary: #313244;
+  --theme-bg-raised: #313244;
+  --theme-bg-inset: #181825;
+  --theme-border: #45475a;
+  --theme-border-subtle: #313244;
+  --theme-text: #cdd6f4;
+  --theme-text-secondary: #bac2de;
+  --theme-text-muted: #6c7086;
+  --theme-text-faint: #45475a;
+  --theme-accent: #cba6f7;
+  --theme-accent-hover: #d8bcf9;
+  --theme-accent-bg: rgba(203, 166, 247, 0.15);
+  --theme-accent-bg-strong: rgba(203, 166, 247, 0.25);
+  --theme-accent-text: #cba6f7;
+  --theme-accent-border: rgba(203, 166, 247, 0.4);
+  --theme-accent-ring: rgba(203, 166, 247, 0.3);
+  --theme-on-accent: #1e1e2e;
+  --theme-danger: #f38ba8;
+  --theme-danger-bg: rgba(243, 139, 168, 0.15);
+  --theme-danger-text: #f38ba8;
+  --theme-success: #a6e3a1;
+  --theme-success-bg: rgba(166, 227, 161, 0.15);
+  --theme-success-text: #a6e3a1;
+  --theme-warning: #f9e2af;
+  --theme-warning-bg: rgba(249, 226, 175, 0.15);
+  --theme-warning-text: #f9e2af;
+  --theme-comment-anchor-bg: rgba(249, 226, 175, 0.15);
+  --theme-comment-anchor-text: #f9e2af;
+  --theme-comment-anchor-border: rgba(249, 226, 175, 0.3);
+  --theme-status-open-bg: rgba(203, 166, 247, 0.2);
+  --theme-status-open-text: #cba6f7;
+  --theme-status-resolved-bg: rgba(166, 227, 161, 0.2);
+  --theme-status-resolved-text: #a6e3a1;
+  --theme-tint: rgba(205, 214, 244, 0.12);
+  --theme-tint-primary: rgba(203, 166, 247, 0.25);
+  --theme-tint-success: rgba(166, 227, 161, 0.25);
+  --theme-tint-danger: rgba(243, 139, 168, 0.2);
+  --theme-comment-bg: rgba(249, 226, 175, 0.2);
+  --theme-comment-bg-opaque: #4a4548;
+  --theme-comment-bg-hover: rgba(249, 226, 175, 0.3);
+  --theme-comment-underline: #f9e2af;
+  --theme-comment-underline-active: #f2c97d;
+  --theme-comment-ring: rgba(242, 201, 125, 0.3);
+  --theme-selection-bg: rgba(137, 180, 250, 0.2);
+  --theme-native-selection: rgba(203, 166, 247, 0.3);
+  --theme-drag-handle: #f2c97d;
+  --theme-drag-handle-hover: #f9e2af;
+  --theme-diff-added-bg: rgba(166, 227, 161, 0.15);
+  --theme-diff-added-text: #a6e3a1;
+  --theme-diff-removed-bg: rgba(243, 139, 168, 0.15);
+  --theme-diff-removed-text: #f38ba8;
+  --theme-gradient-from: #1e1e2e;
+  --theme-gradient-to: rgba(203, 166, 247, 0.08);
+  --theme-search-bg: rgba(166, 227, 161, 0.3);
+  --theme-search-active-bg: rgba(250, 179, 135, 0.7);
+  --theme-search-active-text: #1e1e2e;
+  --theme-scrollbar-thumb: #45475a;
+  --theme-scrollbar-thumb-hover: #585b70;
+  --theme-scrollbar-track: #313244;
+}
+
+/* ========== Scrollbar Styles ========== */
+* {
+  scrollbar-color: var(--theme-scrollbar-thumb) var(--theme-scrollbar-track);
+  scrollbar-width: thin;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--theme-scrollbar-track);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--theme-scrollbar-thumb);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb-hover);
+}
+
+.no-scrollbar {
+  scrollbar-width: none;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  display: none;
+}
+
+/* ========== Prose Theme Overrides ========== */
+.prose {
+  --tw-prose-body: var(--theme-text-secondary);
+  --tw-prose-headings: var(--theme-text);
+  --tw-prose-links: var(--theme-accent-text);
+  --tw-prose-bold: var(--theme-text);
+  --tw-prose-code: var(--theme-accent-text);
+  --tw-prose-quotes: var(--theme-text-secondary);
+  --tw-prose-quote-borders: var(--theme-border);
+  --tw-prose-counters: var(--theme-text-muted);
+  --tw-prose-bullets: var(--theme-text-muted);
+  --tw-prose-hr: var(--theme-border);
+  --tw-prose-th-borders: var(--theme-border);
+  --tw-prose-td-borders: var(--theme-border);
+  --tw-prose-captions: var(--theme-text-muted);
+  --tw-prose-pre-bg: var(--theme-bg-inset);
+  --tw-prose-pre-code: var(--theme-text-secondary);
+}
+
+.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  color: var(--theme-accent-text);
+  background-color: var(--theme-accent-bg);
+}
+
+.prose :where(th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  background-color: var(--theme-bg-secondary);
+}
+
+.prose :where(td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  border-color: var(--theme-border);
+}
+
+.prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  border-color: var(--theme-border);
+}
+
+.prose :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  border-color: var(--theme-border);
+}
+
+.prose :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  background-color: var(--theme-bg-inset);
+  color: var(--theme-text-secondary);
+}
+
+.prose :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  padding: 0;
+  background-color: transparent;
+  color: inherit;
+}
+
+/* Reset prose mark styling so our highlights aren't overridden by the
+   Typography plugin or browser dark-mode defaults */
+.prose mark,
+mark {
+  background-color: transparent;
+  color: inherit;
+}
+
+/* ========== Comment Highlight Styles ========== */
+.prose mark.comment-highlight,
+mark.comment-highlight {
+  background-color: var(--theme-comment-bg);
+  color: var(--theme-text);
+  text-decoration: underline 2px var(--theme-comment-underline);
+  text-underline-offset: 2px;
+  cursor: pointer;
+  border-radius: 2px;
+  transition: background-color 0.15s ease;
+  line-height: inherit;
+}
+
+/* Mermaid highlights use inline styles — Chrome ignores class-based
+   background-color on inline elements inside SVG foreignObject. */
+.mermaid-comment-highlight {
+  cursor: pointer;
+}
+
+.prose mark.comment-highlight:hover,
+mark.comment-highlight:hover {
+  background-color: var(--theme-comment-bg-hover);
+}
+
+.prose mark.comment-highlight-active,
+mark.comment-highlight-active {
+  background-color: var(--theme-comment-bg-hover);
+  text-decoration-color: var(--theme-comment-underline-active);
+  outline: 1px solid var(--theme-comment-ring);
+}
+
+/* Smooth scrolling for the viewer */
+.overflow-y-auto {
+  scroll-behavior: smooth;
+}
+
+/* Pending selection highlight */
+.prose mark.selection-highlight,
+mark.selection-highlight {
+  background-color: var(--theme-selection-bg);
+  color: var(--theme-text);
+  border-radius: 2px;
+  line-height: inherit;
+}
+
+/* Search highlights */
+.prose mark.search-highlight,
+mark.search-highlight {
+  background-color: var(--theme-search-bg);
+  color: inherit;
+  border-radius: 2px;
+  line-height: inherit;
+}
+
+.prose mark.search-highlight-active,
+mark.search-highlight-active {
+  background-color: var(--theme-search-active-bg);
+  color: var(--theme-search-active-text);
+  border-radius: 2px;
+  line-height: inherit;
+}
+
+/* Browser native selection color */
+::selection {
+  background-color: var(--theme-native-selection);
+  color: inherit;
+}
+
+/* Drag handles for resizing comment highlights */
+.drag-handle {
+  width: 4px;
+  background-color: var(--theme-drag-handle);
+  border-radius: 2px;
+  cursor: ew-resize;
+  z-index: 10;
+  position: absolute;
+  transition: background-color 0.15s ease, transform 0.1s ease;
+}
+
+.drag-handle::before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  bottom: -2px;
+  left: -8px;
+  right: -8px;
+}
+
+.drag-handle:hover {
+  background-color: var(--theme-drag-handle-hover);
+  transform: scaleX(1.5);
+}
+
+/* During drag, lock cursor across entire page */
+body.anchor-dragging,
+body.anchor-dragging * {
+  cursor: ew-resize !important;
+  user-select: none !important;
+}
+
+/* Textarea focus reset */
+textarea:focus {
+  outline: none;
+}
+
+/* Reset body margin */
+body {
+  margin: 0;
+}
+
+/* Context menu animation */
+@keyframes context-menu-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.context-menu-enter {
+  animation: context-menu-in 0.1s ease-out;
+}
+
+/* ========== Mermaid Block Styles ========== */
+.mermaid-block {
+  position: relative;
+  margin: 1rem 0;
+}
+
+.mermaid-block .mermaid-svg {
+  display: block;
+  padding: 1.5rem 1rem;
+  background-color: var(--theme-bg-inset);
+  border-radius: 8px;
+  overflow: auto;
+}
+
+.mermaid-block .mermaid-svg svg {
+  display: block;
+  margin: 0 auto;
+  height: auto;
+  overflow: visible;
+}
+
+/* Mermaid sets foreignObject to a tight calculated height that can clip text
+   when browser font metrics differ slightly from the measurement pass. */
+.mermaid-block .mermaid-svg foreignObject {
+  overflow: visible;
+}
+
+.mermaid-error {
+  padding: 1rem;
+  color: var(--theme-danger-text);
+  background-color: var(--theme-danger-bg);
+  border-radius: 8px;
+  font-size: 0.8rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  white-space: pre-wrap;
+}
+
+/* ========== Panel Edge Shadows ========== */
+/* Inset shadows on the center content area create depth against side panels */
+.panel-center {
+  box-shadow:
+    inset 6px 0 8px -6px rgba(0, 0, 0, 0.08),
+    inset -6px 0 8px -6px rgba(0, 0, 0, 0.08);
+}
+
+[data-theme="dark"] .panel-center,
+[data-theme="nord"] .panel-center,
+[data-theme="rose-pine"] .panel-center,
+[data-theme="catppuccin"] .panel-center {
+  box-shadow:
+    inset 6px 0 8px -6px rgba(0, 0, 0, 0.3),
+    inset -6px 0 8px -6px rgba(0, 0, 0, 0.3);
+}
+
+/* ========== Raw View Styles ========== */
+.raw-view {
+  position: relative;
+}
+
+.raw-view-table {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.8125rem;
+  line-height: 1.625;
+}
+
+.raw-line {
+  display: flex;
+  align-items: baseline;
+}
+
+.raw-line-number {
+  flex-shrink: 0;
+  width: 3rem;
+  padding-right: 1rem;
+  text-align: right;
+  color: var(--theme-text-faint);
+  user-select: none;
+  border-right: 1px solid var(--theme-border-subtle);
+  box-sizing: border-box;
+}
+
+.raw-line-content {
+  flex: 1;
+  min-width: 0;
+  padding-left: 1rem;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: var(--theme-text-secondary);
+}
+
+/* Ensure empty lines still have height */
+.raw-line-content:empty::after {
+  content: '\a0';
+}
+
+/* Diff overlay in raw view */
+.raw-line-diff-added {
+  background-color: var(--color-diff-added-bg);
+}
+
+.raw-line-diff-added .raw-line-content {
+  color: var(--color-diff-added-text);
+}
+
+.raw-line-diff-removed {
+  background-color: var(--color-diff-removed-bg);
+  opacity: 0.7;
+}
+
+.raw-line-diff-removed .raw-line-content {
+  color: var(--color-diff-removed-text);
+  text-decoration: line-through;
+}
+
+/* Raw view toolbar — matches panel headers (h-10 = 2.5rem) */
+.raw-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 2.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  border-bottom: 1px solid var(--theme-border-subtle);
+  background-color: var(--theme-bg);
+  flex-shrink: 0;
+}
+
+.raw-toolbar-left,
+.raw-toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+/* Comment markers hidden when toggle is off */
+.raw-view-comments-hidden .raw-comment-marker {
+  display: none;
+}
+
+/* --- Syntax highlighting --- */
+.raw-heading {
+  color: var(--theme-text);
+  font-weight: 600;
+}
+
+.raw-bold {
+  color: var(--theme-text);
+  font-weight: 600;
+}
+
+.raw-italic {
+  color: var(--theme-text);
+  font-style: italic;
+}
+
+.raw-inline-code {
+  color: var(--theme-accent-text);
+  background-color: var(--theme-accent-bg);
+  border-radius: 3px;
+  padding: 0.1em 0.3em;
+}
+
+.raw-code-block {
+  color: var(--theme-text-secondary);
+  background-color: var(--theme-bg-inset);
+  border-radius: 4px;
+  display: inline;
+}
+
+.raw-link {
+  color: var(--theme-accent-text);
+  text-decoration: underline;
+  text-decoration-color: var(--theme-accent-border);
+  text-underline-offset: 2px;
+}
+
+.raw-blockquote {
+  color: var(--theme-text-muted);
+  border-left: 2px solid var(--theme-border);
+  padding-left: 0.5em;
+}
+
+.raw-list-marker {
+  color: var(--theme-text-muted);
+}
+
+.raw-hr {
+  color: var(--theme-text-faint);
+}
+
+.raw-table {
+  color: var(--theme-text-secondary);
+}
+
+.raw-frontmatter {
+  color: var(--theme-text-muted);
+  background-color: var(--theme-bg-inset);
+  border-radius: 4px;
+}
+
+.raw-html-comment {
+  color: var(--theme-text-faint);
+  font-style: italic;
+}
+
+/* --- Comment marker highlighting --- */
+.raw-comment-marker {
+  background-color: var(--theme-comment-bg);
+  color: var(--theme-comment-anchor-text);
+  border-radius: 3px;
+  padding: 0.1em 0.2em;
+  border-bottom: 2px solid var(--theme-comment-underline);
+  cursor: default;
+}
+
+.raw-comment-marker-active {
+  background-color: var(--theme-comment-bg-hover);
+  border-bottom-color: var(--theme-comment-underline-active);
+  outline: 1px solid var(--theme-comment-ring);
+}
+
+/* Flash animation when scrolling to a comment marker */
+@keyframes raw-marker-flash {
+  0% { background-color: var(--theme-comment-bg-hover); }
+  30% { background-color: var(--theme-warning-bg); outline: 2px solid var(--theme-warning); }
+  100% { background-color: var(--theme-comment-bg); outline: none; }
+}
+
+.raw-comment-marker-flash {
+  animation: raw-marker-flash 1.5s ease-out;
+}