@liminis/editor 0.1.0-rc.1

package/dist/styles.css

@@ -0,0 +1,2477 @@
+/* Loop-inspired theme for editor with design tokens (OKLCH) */
+:root {
+  /* ========================================
+     DESIGN TOKENS - Editor Light Theme
+     ======================================== */
+
+  /* Brand Color - Purple theme (matches renderer) */
+  --editor-brand: oklch(0.55 0.20 303);
+
+  /* Typography */
+  --vscode-font-family: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --vscode-font-size: 16px;
+
+  /* Computed Colors (OKLCH) */
+  --vscode-foreground: oklch(0.35 0.01 265);
+  --vscode-background: oklch(1 0 0);
+  --vscode-selection: oklch(0.55 0.20 303 / 0.2);
+  --vscode-border: oklch(0.91 0.03 303);
+  --vscode-link: oklch(0.55 0.20 303);
+  --vscode-external-link: oklch(0.55 0.20 255); /* blue for external links */
+  --vscode-code-bg: oklch(0.98 0.02 303);
+  --checkbox-border: oklch(0.65 0.08 303);
+
+  /* Syntax Highlighting - VitePress/Shiki inspired (OKLCH) */
+  --slashmd-token-comment: oklch(0.70 0.03 135);
+  --slashmd-token-punctuation: oklch(0.65 0 0);
+  --slashmd-token-property: oklch(0.60 0.12 85);
+  --slashmd-token-selector: oklch(0.52 0.14 145);
+  --slashmd-token-operator: oklch(0.55 0.20 25);
+  --slashmd-token-keyword: oklch(0.55 0.20 25);
+  --slashmd-token-variable: oklch(0.60 0.18 50);
+  --slashmd-token-function: oklch(0.50 0.18 303);
+
+  /* Typography - VitePress style (OKLCH) */
+  --slashmd-heading-color: oklch(0.35 0.01 265);
+  --slashmd-h1-color: oklch(0.35 0.01 265);
+  --slashmd-h2-color: oklch(0.35 0.01 265);
+  --slashmd-h3-color: oklch(0.35 0.01 265);
+  --slashmd-h4-color: oklch(0.35 0.01 265);
+  --slashmd-h5-color: oklch(0.35 0.01 265);
+  --slashmd-h1-indent: 0;
+  --slashmd-h2-indent: 0;
+  --slashmd-h3-indent: 0;
+  --slashmd-h4-indent: 0;
+  --slashmd-h5-indent: 0;
+  --slashmd-bold-color: inherit;
+  --slashmd-italic-color: inherit;
+
+  /* Callouts - Uses brand color for note type (OKLCH) */
+  --slashmd-callout-note-bg: oklch(0.55 0.20 303 / 0.08);
+  --slashmd-callout-note-border: oklch(0.55 0.20 303);
+  --slashmd-callout-tip-bg: oklch(0.65 0.18 160 / 0.08);
+  --slashmd-callout-tip-border: oklch(0.65 0.18 160);
+  --slashmd-callout-warning-bg: oklch(0.80 0.18 85 / 0.08);
+  --slashmd-callout-warning-border: oklch(0.80 0.18 85);
+  --slashmd-callout-important-bg: oklch(0.58 0.22 290 / 0.08);
+  --slashmd-callout-important-border: oklch(0.58 0.22 290);
+  --slashmd-callout-caution-bg: oklch(0.63 0.24 27 / 0.08);
+  --slashmd-callout-caution-border: oklch(0.63 0.24 27);
+}
+
+/* ========================================
+   DESIGN TOKENS - Editor Dark Theme
+   ======================================== */
+.dark {
+  /* Brand Color - Lighter for dark mode visibility */
+  --editor-brand: oklch(0.70 0.20 303);
+
+  /* Computed Colors (OKLCH) */
+  --vscode-foreground: oklch(0.97 0.01 90 / 0.86);
+  --vscode-background: oklch(0.17 0.01 265);
+  --vscode-selection: oklch(0.70 0.20 303 / 0.2);
+  --vscode-border: oklch(0.27 0.02 303);
+  --vscode-link: oklch(0.70 0.20 303);
+  --vscode-external-link: oklch(0.70 0.18 255); /* lighter blue for dark mode */
+  --vscode-code-bg: oklch(0.20 0.02 303);
+  --checkbox-border: oklch(0.55 0.06 303);
+
+  /* Syntax Highlighting - Dark mode (OKLCH) */
+  --slashmd-token-comment: oklch(0.60 0.10 140);
+  --slashmd-token-punctuation: oklch(0.85 0 0);
+  --slashmd-token-property: oklch(0.85 0.10 95);
+  --slashmd-token-selector: oklch(0.60 0.10 140);
+  --slashmd-token-operator: oklch(0.85 0 0);
+  --slashmd-token-keyword: oklch(0.65 0.12 240);
+  --slashmd-token-variable: oklch(0.78 0.10 220);
+  --slashmd-token-function: oklch(0.85 0.10 95);
+
+  /* Typography - Dark mode (OKLCH) */
+  --slashmd-heading-color: oklch(0.97 0.01 90 / 0.86);
+  --slashmd-h1-color: oklch(0.97 0.01 90 / 0.86);
+  --slashmd-h2-color: oklch(0.97 0.01 90 / 0.86);
+  --slashmd-h3-color: oklch(0.97 0.01 90 / 0.86);
+  --slashmd-h4-color: oklch(0.97 0.01 90 / 0.86);
+  --slashmd-h5-color: oklch(0.97 0.01 90 / 0.86);
+
+  /* Callouts - Dark mode, uses brand color for note type (OKLCH) */
+  --slashmd-callout-note-bg: oklch(0.70 0.20 303 / 0.1);
+  --slashmd-callout-note-border: oklch(0.70 0.20 303);
+  --slashmd-callout-tip-bg: oklch(0.65 0.18 160 / 0.1);
+  --slashmd-callout-tip-border: oklch(0.65 0.18 160);
+  --slashmd-callout-warning-bg: oklch(0.80 0.18 85 / 0.1);
+  --slashmd-callout-warning-border: oklch(0.80 0.18 85);
+  --slashmd-callout-important-bg: oklch(0.58 0.22 290 / 0.1);
+  --slashmd-callout-important-border: oklch(0.58 0.22 290);
+  --slashmd-callout-caution-bg: oklch(0.63 0.24 27 / 0.1);
+  --slashmd-callout-caution-border: oklch(0.63 0.24 27);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--vscode-font-family);
+  font-size: var(--vscode-font-size);
+  color: var(--vscode-foreground);
+  background: var(--vscode-background);
+  line-height: 1.8;  /* Slightly more generous line height like Loop */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Loading spinner animation */
+.loading-spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--vscode-border);
+  border-top-color: var(--vscode-link);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Editor inner wrapper - used for hover state targeting of drag handles */
+.editor-inner {
+  /* Layout handled by Tailwind - this class exists for CSS hover rules */
+}
+
+/* Editor content area */
+.editor-input {
+  min-height: 300px;
+  outline: none;
+  padding: 16px 32px 16px 16px;
+}
+
+.editor-placeholder {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  color: var(--vscode-foreground);
+  opacity: 0.5;
+  pointer-events: none;
+  user-select: none;
+}
+
+/* Typography - Loop-inspired with generous whitespace */
+.editor-paragraph {
+  margin: 0 0 16px 0;  /* More space between paragraphs like Loop */
+}
+
+.editor-heading-h1 {
+  font-size: 2.5em;  /* Larger title like Loop */
+  font-weight: 700;
+  margin: 32px 0 24px 0;  /* More generous margins */
+  line-height: 1.2;
+  color: var(--slashmd-h1-color);
+  margin-left: var(--slashmd-h1-indent);
+}
+
+.editor-heading-h2 {
+  font-size: 1.75em;  /* Slightly larger */
+  font-weight: 600;
+  margin: 28px 0 16px 0;  /* More generous margins */
+  line-height: 1.3;
+  color: var(--slashmd-h2-color);
+  margin-left: var(--slashmd-h2-indent);
+}
+
+.editor-heading-h3 {
+  font-size: 1.35em;  /* Slightly larger */
+  font-weight: 600;
+  margin: 24px 0 12px 0;  /* More generous margins */
+  line-height: 1.4;
+  color: var(--slashmd-h3-color);
+  margin-left: var(--slashmd-h3-indent);
+}
+
+.editor-heading-h4 {
+  font-size: 1.15em;
+  font-weight: 600;
+  margin: 20px 0 10px 0;  /* More generous margins */
+  line-height: 1.4;
+  color: var(--slashmd-h4-color);
+  margin-left: var(--slashmd-h4-indent);
+}
+
+.editor-heading-h5 {
+  font-size: 1.05em;
+  font-weight: 600;
+  margin: 16px 0 8px 0;  /* More generous margins */
+  line-height: 1.4;
+  color: var(--slashmd-h5-color);
+  margin-left: var(--slashmd-h5-indent);
+}
+
+/* Lists - Loop-inspired spacing */
+.editor-list-ul {
+  margin: 16px 0;  /* More space around lists */
+  padding-left: 28px;
+  list-style-type: disc;
+}
+
+.editor-list-ol {
+  margin: 16px 0;  /* More space around lists */
+  padding-left: 28px;
+  list-style-type: decimal;
+}
+
+.editor-listitem {
+  margin: 8px 0;  /* More space between list items like Loop */
+}
+
+.editor-listitem-checked,
+.editor-listitem-unchecked {
+  list-style-type: none;
+  position: relative;
+  margin-left: -24px;
+  padding-left: 24px;
+}
+
+.editor-listitem-checked::before,
+.editor-listitem-unchecked::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 4px;
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--checkbox-border);
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.editor-listitem-checked::before {
+  background: var(--vscode-link);
+  border-color: var(--vscode-link);
+}
+
+.editor-listitem-checked::after {
+  content: '✓';
+  position: absolute;
+  left: 3px;
+  top: 2px;
+  font-size: 12px;
+  color: white;
+}
+
+/*
+ * Ordered task items keep native <ol> decimal numbering (unlike
+ * .editor-listitem-checked/-unchecked above, which set `list-style-type:
+ * none` and pull the marker box back with a negative margin to make room for
+ * the checkbox where the bullet would have been). Here the decimal marker
+ * still renders in the <ol>'s own padding-left area, undisturbed; the
+ * checkbox instead claims new space via this item's own padding-left, placed
+ * between the number and the item's text.
+ */
+.editor-listitem-ordered-checked,
+.editor-listitem-ordered-unchecked {
+  position: relative;
+  padding-left: 24px;
+}
+
+.editor-listitem-ordered-checked::before,
+.editor-listitem-ordered-unchecked::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 4px;
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--checkbox-border);
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.editor-listitem-ordered-checked::before {
+  background: var(--vscode-link);
+  border-color: var(--vscode-link);
+}
+
+.editor-listitem-ordered-checked::after {
+  content: '✓';
+  position: absolute;
+  left: 3px;
+  top: 2px;
+  font-size: 12px;
+  color: white;
+}
+
+.editor-nested-listitem {
+  list-style-type: none;
+}
+
+/* Quote - Loop-inspired spacing */
+.editor-quote {
+  margin: 20px 0;  /* More generous margins */
+  padding: 12px 20px;  /* More padding */
+  border-left: 4px solid var(--vscode-border);
+  background: var(--vscode-code-bg);
+  font-style: italic;
+}
+
+/* Code - Loop-inspired spacing */
+.editor-code {
+  display: block;
+  position: relative;
+  margin: 20px 0;  /* More generous margins */
+  padding: 16px 20px;  /* More padding */
+  background: var(--vscode-code-bg);
+  border-radius: 10px;  /* Friendlier rounded corners */
+  font-family: 'Fira Code', 'Consolas', monospace;
+  font-size: 0.9em;
+  overflow-x: auto;
+  white-space: pre;
+}
+
+/* Code Block Toolbar */
+.code-block-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  z-index: 50;
+  pointer-events: auto;
+}
+
+/* Code Language Selector Button */
+.code-language-button {
+  padding: 2px 8px;
+  font-size: 11px;
+  font-family: var(--vscode-font-family);
+  color: var(--vscode-foreground);
+  background: var(--vscode-code-bg);
+  border: 1px solid var(--vscode-border);
+  border-radius: 4px;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.15s, background 0.15s;
+}
+
+.code-language-button:hover {
+  opacity: 1;
+  background: var(--vscode-toolbar-hoverBackground, rgba(128, 128, 128, 0.15));
+}
+
+/* Code Copy Button */
+.code-copy-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 20px;
+  padding: 0;
+  color: var(--vscode-foreground);
+  background: var(--vscode-code-bg);
+  border: 1px solid var(--vscode-border);
+  border-radius: 4px;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.15s, background 0.15s, color 0.15s;
+}
+
+.code-copy-button:hover {
+  opacity: 1;
+  background: var(--vscode-toolbar-hoverBackground, rgba(128, 128, 128, 0.15));
+}
+
+.code-copy-button.copied {
+  opacity: 1;
+  color: var(--vscode-notificationsInfoIcon-foreground, #3794ff);
+}
+
+/* Code Language Selector Menu */
+.code-language-menu {
+  min-width: 180px;
+  max-height: 320px;
+  display: flex;
+  flex-direction: column;
+  background: var(--vscode-background);
+  border: 1px solid var(--vscode-border);
+  border-radius: 12px;  /* Friendlier rounded corners */
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);  /* Softer shadow */
+  z-index: 300;
+  overflow: hidden;
+}
+
+.code-language-search {
+  margin: 8px;
+  padding: 6px 10px;
+  font-size: 13px;
+  font-family: var(--vscode-font-family);
+  color: var(--vscode-foreground);
+  background: var(--vscode-code-bg);
+  border: 1px solid var(--vscode-border);
+  border-radius: 4px;
+  outline: none;
+}
+
+.code-language-search:focus {
+  border-color: var(--vscode-link);
+}
+
+.code-language-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+
+.code-language-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 6px 12px;
+  font-size: 13px;
+  font-family: var(--vscode-font-family);
+  color: var(--vscode-foreground);
+  background: transparent;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+}
+
+.code-language-item:hover {
+  background: var(--vscode-selection);
+}
+
+.code-language-item.current {
+  font-weight: 500;
+}
+
+.code-language-check {
+  color: var(--vscode-link);
+  font-size: 12px;
+}
+
+.code-language-empty {
+  padding: 12px;
+  text-align: center;
+  color: var(--vscode-foreground);
+  opacity: 0.6;
+  font-size: 13px;
+}
+
+/* Inline text formatting */
+.editor-text-bold {
+  font-weight: 700;
+  color: var(--slashmd-bold-color);
+}
+
+.editor-text-italic {
+  font-style: italic;
+  color: var(--slashmd-italic-color);
+}
+
+.editor-text-strikethrough {
+  text-decoration: line-through;
+}
+
+.editor-text-underline {
+  text-decoration: underline;
+}
+
+.editor-text-code {
+  font-family: 'Fira Code', 'Consolas', monospace;
+  background: var(--vscode-code-bg);
+  padding: 2px 6px;
+  border-radius: 6px;  /* Friendlier rounded corners */
+  font-size: 0.9em;
+}
+
+/* Links */
+.editor-link {
+  color: var(--vscode-link);
+  text-decoration: none;
+  cursor: text; /* Normal text cursor for editing */
+}
+
+.editor-link:hover {
+  text-decoration: underline;
+}
+
+/* External links (http/https/mailto) - blue color to differentiate from wiki-links */
+.editor-link-external {
+  color: var(--vscode-external-link);
+}
+
+/* When Cmd/Ctrl is held, show pointer cursor on links to indicate they can be opened */
+.modifier-held .editor-link {
+  cursor: pointer;
+}
+
+.modifier-held .editor-link:hover {
+  text-decoration: underline;
+  opacity: 0.8;
+}
+
+/* In read-only mode, links are always clickable - show pointer cursor */
+.links-clickable .editor-link {
+  cursor: pointer;
+}
+
+.links-clickable .editor-link:hover {
+  text-decoration: underline;
+  opacity: 0.9;
+}
+
+/* Broken wiki links - links to non-existent files */
+.editor-link-broken {
+  color: var(--vscode-errorForeground, #f14c4c) !important;
+}
+
+.editor-link-broken:hover {
+  color: var(--vscode-errorForeground, #f14c4c) !important;
+  opacity: 0.8;
+}
+
+/* Tables */
+.editor-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 16px 0;
+}
+
+.editor-table-row {
+}
+
+.editor-table-cell,
+.editor-table-cell-header {
+  border: 1px solid var(--vscode-border);
+  padding: 8px 12px;
+  text-align: left;
+}
+
+.editor-table-cell-header {
+  background: var(--vscode-code-bg);
+  font-weight: 600;
+}
+
+/* Divider */
+.divider-block {
+  border: none;
+  height: 24px;
+  margin: 12px 0;
+  background: transparent;
+  position: relative;
+}
+
+.divider-block::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: var(--vscode-border);
+}
+
+/* Image */
+.image-block {
+  margin: 16px 0;
+}
+
+.image-block img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+}
+
+/* Image wrapper with resize handles */
+.image-wrapper {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+}
+
+.image-wrapper.no-dimensions {
+  display: block;
+}
+
+.image-wrapper img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.image-wrapper.selected img {
+  outline: 2px solid var(--vscode-link);
+  outline-offset: 2px;
+}
+
+.image-wrapper.resizing img {
+  opacity: 0.8;
+}
+
+/* Resize handles */
+.image-resize-handle {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background: var(--vscode-link);
+  border: 2px solid var(--vscode-background);
+  border-radius: 2px;
+  z-index: 10;
+}
+
+.image-resize-handle.nw {
+  top: -6px;
+  left: -6px;
+  cursor: nwse-resize;
+}
+
+.image-resize-handle.ne {
+  top: -6px;
+  right: -6px;
+  cursor: nesw-resize;
+}
+
+.image-resize-handle.sw {
+  bottom: -6px;
+  left: -6px;
+  cursor: nesw-resize;
+}
+
+.image-resize-handle.se {
+  bottom: -6px;
+  right: -6px;
+  cursor: nwse-resize;
+}
+
+.image-resize-handle:hover {
+  transform: scale(1.2);
+}
+
+/* Size badge */
+.image-size-badge {
+  position: absolute;
+  bottom: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 2px 8px;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  font-size: 11px;
+  border-radius: 4px;
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+/* Callout */
+.callout {
+  margin: 16px 0;
+  padding: 14px 18px;  /* Slightly more padding */
+  border-radius: 10px;  /* Friendlier rounded corners */
+  border-left: 4px solid;
+}
+
+.callout-note {
+  background: var(--slashmd-callout-note-bg);
+  border-left-color: var(--slashmd-callout-note-border);
+}
+
+.callout-tip {
+  background: var(--slashmd-callout-tip-bg);
+  border-left-color: var(--slashmd-callout-tip-border);
+}
+
+.callout-warning {
+  background: var(--slashmd-callout-warning-bg);
+  border-left-color: var(--slashmd-callout-warning-border);
+}
+
+.callout-important {
+  background: var(--slashmd-callout-important-bg);
+  border-left-color: var(--slashmd-callout-important-border);
+}
+
+.callout-caution {
+  background: var(--slashmd-callout-caution-bg);
+  border-left-color: var(--slashmd-callout-caution-border);
+}
+
+/* Remove bottom margin from last paragraph in callout */
+.callout > .editor-paragraph:last-child {
+  margin-bottom: 0;
+}
+
+/* Toggle - New ElementNode-based structure */
+.toggle-container {
+  margin: 8px 0;
+  border: 1px solid var(--vscode-border);
+  border-radius: 10px;  /* Friendlier rounded corners */
+  overflow: hidden;
+}
+
+.toggle-title {
+  display: flex;
+  align-items: center;
+  padding: 10px 14px;
+  padding-left: 32px;
+  background: var(--vscode-code-bg);
+  position: relative;
+  min-height: 24px;
+}
+
+/* Toggle arrow - positioned absolutely */
+.toggle-title::before {
+  content: '▶';
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 10px;
+  color: var(--vscode-foreground);
+  opacity: 0.7;
+  transition: transform 0.2s;
+  cursor: pointer;
+}
+
+.toggle-container--open .toggle-title::before {
+  transform: translateY(-50%) rotate(90deg);
+}
+
+/* Make the arrow click area larger */
+.toggle-title::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 32px;
+  height: 100%;
+  cursor: pointer;
+}
+
+.toggle-title:hover {
+  background: var(--vscode-selection);
+}
+
+/* The paragraph inside the title */
+.toggle-title > .editor-paragraph {
+  margin: 0;
+  font-weight: 500;
+  flex: 1;
+}
+
+/* Content area - hidden when collapsed */
+.toggle-content-area {
+  display: none;
+  padding: 12px 14px;
+  border-top: 1px solid var(--vscode-border);
+}
+
+.toggle-container--open .toggle-content-area {
+  display: block;
+}
+
+/* Nested content should have proper spacing */
+.toggle-content-area > .editor-paragraph {
+  margin: 0 0 8px 0;
+}
+
+.toggle-content-area > .editor-paragraph:last-child {
+  margin-bottom: 0;
+}
+
+.toggle-content-area > .editor-list-ul,
+.toggle-content-area > .editor-list-ol {
+  margin: 8px 0;
+}
+
+/* Make sure code blocks inside toggle look good */
+.toggle-content-area > .editor-code {
+  margin: 8px 0;
+}
+
+/* Empty content placeholder */
+.toggle-content-area:empty::before {
+  content: 'Type content here...';
+  color: var(--vscode-foreground);
+  opacity: 0.4;
+}
+
+/* Legacy classes (for backwards compatibility) */
+.toggle-wrapper {
+  margin: 8px 0;
+}
+
+.toggle-block {
+  border: 1px solid var(--vscode-border);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+/* Toolbar */
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px;
+  background: var(--vscode-background);
+  border: 1px solid var(--vscode-border);
+  border-radius: 10px;  /* Friendlier rounded corners */
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);  /* Softer shadow */
+  z-index: 100;
+}
+
+.toolbar-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--vscode-foreground);
+  font-size: 14px;
+}
+
+.toolbar-button:hover {
+  background: var(--vscode-code-bg);
+}
+
+.toolbar-button.active {
+  background: var(--vscode-selection);
+}
+
+.toolbar-divider {
+  width: 1px;
+  height: 20px;
+  background: var(--vscode-border);
+  margin: 0 4px;
+}
+
+.toolbar-link-input {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 4px;
+  padding: 8px;
+  background: var(--vscode-background);
+  border: 1px solid var(--vscode-border);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.toolbar-link-input input {
+  width: 220px;
+  padding: 6px 10px;
+  font-size: 13px;
+  color: var(--vscode-text);
+  background: var(--vscode-input-bg, var(--vscode-code-bg));
+  border: 1px solid var(--vscode-border);
+  border-radius: 4px;
+  outline: none;
+}
+
+.toolbar-link-input input:focus {
+  border-color: var(--vscode-focus-border, #007acc);
+}
+
+/* Slash Menu */
+.slash-menu {
+  position: fixed;
+  min-width: 280px;
+  max-height: 320px;
+  display: flex;
+  flex-direction: column;
+  background: var(--vscode-background);
+  border: 1px solid var(--vscode-border);
+  border-radius: 12px;  /* Friendlier rounded corners */
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);  /* Softer shadow */
+  z-index: 200;
+}
+
+.slash-menu-header {
+  padding: 8px 12px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--vscode-foreground);
+  opacity: 0.6;
+  border-bottom: 1px solid var(--vscode-border);
+  flex-shrink: 0;
+}
+
+.slash-menu-list {
+  list-style: none;
+  margin: 0;
+  padding: 4px 0;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.slash-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+.slash-menu-item:hover,
+.slash-menu-item.selected {
+  background: var(--vscode-selection);
+}
+
+.slash-menu-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: var(--vscode-code-bg);
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.slash-menu-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.slash-menu-label {
+  font-weight: 500;
+}
+
+.slash-menu-description {
+  font-size: 12px;
+  opacity: 0.7;
+}
+
+.slash-menu-empty {
+  padding: 16px;
+  text-align: center;
+  color: var(--vscode-foreground);
+  opacity: 0.6;
+}
+
+/* Drag Handle */
+.drag-handle {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  cursor: grab;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  z-index: 50;
+  /* Extend hit area to the right to eliminate gap */
+  padding: 4px 12px 4px 4px;
+}
+
+.editor-inner:hover .drag-handle {
+  opacity: 0.4;
+}
+
+.drag-handle:hover {
+  opacity: 1;
+}
+
+.drag-handle.dragging {
+  cursor: grabbing;
+  opacity: 1;
+}
+
+.drag-handle-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  font-size: 14px;
+  letter-spacing: -3px;
+  color: var(--vscode-foreground);
+  user-select: none;
+  border-radius: 4px;
+}
+
+.drag-handle:hover .drag-handle-icon {
+  background: var(--vscode-toolbar-hoverBackground, rgba(128, 128, 128, 0.1));
+}
+
+/* Block Delete Button */
+.block-delete-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  z-index: 50;
+  padding: 4px 4px 4px 12px;
+  background: none;
+  border: none;
+}
+
+.editor-inner:hover .block-delete-button {
+  opacity: 0.4;
+}
+
+.block-delete-button:hover {
+  opacity: 1;
+}
+
+.block-delete-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  font-size: 16px;
+  color: var(--vscode-foreground);
+  user-select: none;
+  border-radius: 4px;
+}
+
+.block-delete-button:hover .block-delete-icon {
+  background: var(--vscode-inputValidation-errorBackground, rgba(255, 0, 0, 0.15));
+  color: var(--vscode-errorForeground, #f44336);
+}
+
+/* Code syntax highlighting */
+.editor-tokenComment {
+  color: var(--slashmd-token-comment);
+}
+
+.editor-tokenPunctuation {
+  color: var(--slashmd-token-punctuation);
+}
+
+.editor-tokenProperty {
+  color: var(--slashmd-token-property);
+}
+
+.editor-tokenSelector {
+  color: var(--slashmd-token-selector);
+}
+
+.editor-tokenOperator {
+  color: var(--slashmd-token-operator);
+}
+
+.editor-tokenAttr {
+  color: var(--slashmd-token-keyword);
+}
+
+.editor-tokenVariable {
+  color: var(--slashmd-token-variable);
+}
+
+.editor-tokenFunction {
+  color: var(--slashmd-token-function);
+}
+
+/* Scrollbar - auto-hides on macOS, styled when visible */
+/* Only style when hovering or scrolling to maintain macOS auto-hide behavior */
+::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 6px;
+  border: 3px solid transparent;
+  background-clip: padding-box;
+}
+
+/* Show scrollbar when hovering over scrollable area */
+*:hover::-webkit-scrollbar-thumb {
+  background: rgba(128, 128, 128, 0.3);
+}
+
+*:hover::-webkit-scrollbar-thumb:hover {
+  background: rgba(128, 128, 128, 0.5);
+}
+
+/* Firefox scrollbar styling - auto mode */
+* {
+  scrollbar-width: auto;
+  scrollbar-color: rgba(128, 128, 128, 0.3) transparent;
+}
+
+/* Focus styles for accessibility */
+*:focus-visible {
+  outline: 2px solid var(--vscode-link);
+  outline-offset: 2px;
+}
+
+/* Remove focus outline from editor content */
+.editor-input:focus-visible,
+.editor-input:focus {
+  outline: none;
+}
+
+/* Selection */
+::selection {
+  background: var(--vscode-selection);
+}
+
+/* Table Actions Menu */
+.table-actions-menu {
+  min-width: 200px;
+  background: var(--vscode-background);
+  border: 1px solid var(--vscode-border);
+  border-radius: 12px;  /* Friendlier rounded corners */
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);  /* Softer shadow */
+  z-index: 300;
+  overflow: hidden;
+}
+
+.table-actions-section {
+  padding: 4px 0;
+}
+
+.table-actions-header {
+  padding: 6px 12px 4px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--vscode-foreground);
+  opacity: 0.6;
+}
+
+.table-actions-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  background: transparent;
+  color: var(--vscode-foreground);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.table-actions-button:hover {
+  background: var(--vscode-selection);
+}
+
+.table-actions-button.table-actions-danger {
+  color: #e74c3c;
+}
+
+.table-actions-button.table-actions-danger:hover {
+  background: rgba(231, 76, 60, 0.1);
+}
+
+.table-actions-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  font-size: 12px;
+}
+
+.table-actions-divider {
+  height: 1px;
+  background: var(--vscode-border);
+  margin: 4px 0;
+}
+
+/* Table cell selection styles */
+.editor-table td:focus,
+.editor-table th:focus,
+.editor-table-cell:focus,
+.editor-table-cell-header:focus {
+  outline: 2px solid var(--vscode-link);
+  outline-offset: -2px;
+}
+
+/* Table hover row highlight */
+.editor-table tr:hover {
+  background: rgba(128, 128, 128, 0.05);
+}
+
+/* Table cell min-width for usability */
+.editor-table-cell,
+.editor-table-cell-header {
+  min-width: 80px;
+  vertical-align: top;
+}
+
+/* Cursor in table cells */
+.editor-table-cell p,
+.editor-table-cell-header p {
+  margin: 0;
+}
+
+/* Image Modal */
+.image-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.image-modal {
+  width: 480px;
+  max-width: 90vw;
+  max-height: 90vh;
+  background: var(--vscode-background);
+  border: 1px solid var(--vscode-border);
+  border-radius: 16px;  /* Friendlier rounded corners */
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);  /* Softer shadow */
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.image-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid var(--vscode-border);
+}
+
+.image-modal-header h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.image-modal-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 20px;
+  color: var(--vscode-foreground);
+  opacity: 0.7;
+}
+
+.image-modal-close:hover {
+  opacity: 1;
+  background: var(--vscode-code-bg);
+}
+
+.image-modal-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--vscode-border);
+}
+
+.image-modal-tab {
+  flex: 1;
+  padding: 12px 16px;
+  border: none;
+  background: transparent;
+  color: var(--vscode-foreground);
+  font-size: 14px;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.15s, background 0.15s;
+}
+
+.image-modal-tab:hover {
+  opacity: 1;
+  background: var(--vscode-code-bg);
+}
+
+.image-modal-tab.active {
+  opacity: 1;
+  border-bottom: 2px solid var(--vscode-link);
+  margin-bottom: -1px;
+}
+
+.image-modal-content {
+  padding: 16px;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.image-modal-dropzone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 160px;
+  border: 2px dashed var(--vscode-border);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.image-modal-dropzone:hover {
+  border-color: var(--vscode-link);
+  background: rgba(0, 102, 204, 0.05);
+}
+
+.image-modal-dropzone.drag-over {
+  border-color: var(--vscode-link);
+  background: rgba(0, 102, 204, 0.1);
+}
+
+.image-modal-dropzone.has-preview {
+  border-style: solid;
+  border-color: var(--vscode-border);
+  padding: 8px;
+}
+
+.image-modal-dropzone-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  color: var(--vscode-foreground);
+  opacity: 0.7;
+}
+
+.image-modal-dropzone-icon {
+  font-size: 32px;
+}
+
+.image-modal-preview {
+  max-width: 100%;
+  max-height: 200px;
+  border-radius: 4px;
+  object-fit: contain;
+}
+
+.image-modal-url-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.image-modal-url-preview {
+  display: flex;
+  justify-content: center;
+  padding: 8px;
+  border: 1px solid var(--vscode-border);
+  border-radius: 8px;
+  background: var(--vscode-code-bg);
+}
+
+.image-modal-alt-section {
+  margin-top: 16px;
+}
+
+.image-modal-label {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 13px;
+  color: var(--vscode-foreground);
+  opacity: 0.8;
+}
+
+.image-modal-input {
+  width: 100%;
+  padding: 10px 12px;
+  font-size: 14px;
+  font-family: var(--vscode-font-family);
+  color: var(--vscode-foreground);
+  background: var(--vscode-code-bg);
+  border: 1px solid var(--vscode-border);
+  border-radius: 6px;
+  outline: none;
+}
+
+.image-modal-input:focus {
+  border-color: var(--vscode-link);
+}
+
+.image-modal-input::placeholder {
+  color: var(--vscode-foreground);
+  opacity: 0.5;
+}
+
+.image-modal-error {
+  margin-top: 12px;
+  padding: 10px 12px;
+  background: rgba(244, 67, 54, 0.1);
+  border: 1px solid #f44336;
+  border-radius: 6px;
+  color: #f44336;
+  font-size: 13px;
+}
+
+.image-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px;
+  border-top: 1px solid var(--vscode-border);
+}
+
+.image-modal-button {
+  padding: 8px 16px;
+  font-size: 14px;
+  font-family: var(--vscode-font-family);
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.image-modal-button.secondary {
+  color: var(--vscode-foreground);
+  background: var(--vscode-code-bg);
+}
+
+.image-modal-button.secondary:hover {
+  background: var(--vscode-selection);
+}
+
+.image-modal-button.primary {
+  color: white;
+  background: var(--vscode-link);
+}
+
+.image-modal-button.primary:hover {
+  filter: brightness(1.1);
+}
+
+/* Search Bar */
+.search-bar {
+  position: fixed;
+  top: 8px;
+  right: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--vscode-background);
+  border: 1px solid var(--vscode-border);
+  border-radius: 12px;  /* Friendlier rounded corners */
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);  /* Softer shadow */
+  z-index: 500;
+}
+
+.search-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--vscode-code-bg);
+  border: 1px solid var(--vscode-border);
+  border-radius: 6px;
+  padding: 4px 8px;
+}
+
+.search-input-wrapper:focus-within {
+  outline: none;
+}
+
+.search-bar *:focus,
+.search-bar *:focus-visible {
+  outline: none !important;
+}
+
+.search-icon {
+  flex-shrink: 0;
+  color: var(--vscode-foreground);
+  opacity: 0.5;
+}
+
+.search-input {
+  width: 200px;
+  border: none;
+  background: transparent;
+  color: var(--vscode-foreground);
+  font-size: 14px;
+  font-family: var(--vscode-font-family);
+  outline: none !important;
+}
+
+.search-input:focus,
+.search-input:focus-visible {
+  outline: none !important;
+  box-shadow: none;
+}
+
+.search-input::placeholder {
+  color: var(--vscode-foreground);
+  opacity: 0.5;
+}
+
+.search-count {
+  flex-shrink: 0;
+  font-size: 12px;
+  color: var(--vscode-foreground);
+  opacity: 0.7;
+  white-space: nowrap;
+}
+
+.search-buttons {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.search-nav-button,
+.search-close-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--vscode-foreground);
+  transition: background 0.15s;
+}
+
+.search-nav-button:hover:not(:disabled),
+.search-close-button:hover {
+  background: var(--vscode-code-bg);
+}
+
+.search-nav-button:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.search-close-button:hover {
+  color: var(--vscode-errorForeground, #f44336);
+}
+
+/* Search Highlight Layer */
+.search-highlight-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.search-highlight {
+  position: absolute;
+  background: rgba(255, 213, 0, 0.4);
+  border-radius: 2px;
+  mix-blend-mode: multiply;
+}
+
+/* Dark theme adjustment */
+@media (prefers-color-scheme: dark) {
+  .search-highlight {
+    background: rgba(255, 213, 0, 0.3);
+    mix-blend-mode: screen;
+  }
+}
+
+.search-highlight.current {
+  background: rgba(255, 153, 0, 0.6);
+  outline: 2px solid rgba(255, 153, 0, 0.8);
+}
+
+/* ===== Equation / Math Styles ===== */
+
+.editor-equation {
+  cursor: pointer;
+  user-select: none;
+}
+
+.equation-renderer {
+  display: inline;
+}
+
+.equation-renderer.block {
+  display: block;
+  text-align: center;
+  margin: 1em 0;
+}
+
+.equation-renderer.inline {
+  display: inline;
+}
+
+/* MathJax SVG output: ensure inline math flows with text and block math centers */
+.equation-renderer mjx-container {
+  display: inline !important;
+}
+
+.equation-renderer.block mjx-container {
+  display: block !important;
+}
+
+.equation-renderer mjx-container svg {
+  display: inline;
+}
+
+/* Equation Editor Styles */
+.equation-editor-background {
+  background-color: var(--vscode-code-bg);
+  padding: 4px 8px;
+  border-radius: 4px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.equation-dollar-sign {
+  color: var(--vscode-foreground);
+  opacity: 0.5;
+  font-family: monospace;
+  white-space: pre;
+}
+
+.equation-inline-editor {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  outline: 0;
+  color: #8421a2;
+  background-color: inherit;
+  font-family: monospace;
+  font-size: inherit;
+  min-width: 50px;
+}
+
+.equation-block-editor {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  outline: 0;
+  color: #8421a2;
+  background-color: inherit;
+  font-family: monospace;
+  font-size: inherit;
+  resize: vertical;
+  width: 100%;
+  min-height: 60px;
+}
+
+/* KaTeX styling adjustments */
+.katex {
+  font-size: 1.1em;
+}
+
+.katex-display {
+  margin: 0.5em 0;
+}
+
+.katex-error {
+  color: #cc0000;
+  font-size: 0.9em;
+}
+
+/* ===== Mermaid Diagram Styles ===== */
+
+.editor-mermaid {
+  margin: 1em 0;
+}
+
+.mermaid-renderer {
+  border-radius: 8px;
+  transition: box-shadow 0.2s ease;
+}
+
+.mermaid-renderer:hover {
+  box-shadow: none;
+}
+
+.mermaid-loading {
+  padding: 2rem;
+  text-align: center;
+  color: var(--vscode-foreground);
+  opacity: 0.7;
+}
+
+/* Mermaid Editor Styles */
+.mermaid-editor-container {
+  background: var(--vscode-code-bg);
+  border-radius: 8px;
+  overflow: hidden;
+  margin: 1em 0;
+}
+
+.mermaid-editor-header,
+.mermaid-editor-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.mermaid-editor-label {
+  font-family: monospace;
+  font-size: 12px;
+  color: var(--vscode-foreground);
+  opacity: 0.7;
+}
+
+.mermaid-editor-close {
+  background: transparent;
+  border: none;
+  color: var(--vscode-foreground);
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 14px;
+  opacity: 0.7;
+  transition: opacity 0.15s, background 0.15s;
+}
+
+.mermaid-editor-close:hover {
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.mermaid-editor-textarea {
+  width: 100%;
+  min-height: 150px;
+  padding: 12px;
+  border: none;
+  background: transparent;
+  color: var(--vscode-foreground);
+  font-family: monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  resize: vertical;
+  outline: none;
+}
+
+.mermaid-editor-textarea::placeholder {
+  color: var(--vscode-foreground);
+  opacity: 0.5;
+}
+
+/* ===== C4 Architecture Diagram Styles ===== */
+
+.editor-c4 {
+  margin: 1em 0;
+}
+
+.c4-renderer {
+  border-radius: 8px;
+  transition: box-shadow 0.2s ease;
+}
+
+.c4-renderer svg {
+  max-width: 100%;
+  height: auto;
+}
+
+.c4-renderer:hover {
+  box-shadow: none;
+}
+
+.c4-loading {
+  padding: 2rem;
+  text-align: center;
+  color: var(--vscode-foreground);
+  opacity: 0.7;
+}
+
+/* C4 Editor Styles */
+.c4-editor-container {
+  background: var(--vscode-code-bg);
+  border-radius: 8px;
+  overflow: hidden;
+  margin: 1em 0;
+}
+
+.c4-editor-header,
+.c4-editor-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.c4-editor-label {
+  font-family: monospace;
+  font-size: 12px;
+  color: var(--vscode-foreground);
+  opacity: 0.7;
+}
+
+.c4-editor-close {
+  background: transparent;
+  border: none;
+  color: var(--vscode-foreground);
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 14px;
+  opacity: 0.7;
+  transition: opacity 0.15s, background 0.15s;
+}
+
+.c4-editor-close:hover {
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.c4-editor-textarea {
+  width: 100%;
+  min-height: 150px;
+  padding: 12px;
+  border: none;
+  background: transparent;
+  color: var(--vscode-foreground);
+  font-family: monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  resize: vertical;
+  outline: none;
+}
+
+.c4-editor-textarea::placeholder {
+  color: var(--vscode-foreground);
+  opacity: 0.5;
+}
+
+/* ===== Frontmatter Styles ===== */
+
+/* Hide frontmatter in the editor - it's displayed in a separate tray overlay */
+.frontmatter-code {
+  display: none;
+}
+
+/* Frontmatter toggle button */
+.frontmatter-toggle-button {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid var(--vscode-border);
+  border-radius: 6px;
+  background: var(--vscode-background);
+  color: var(--vscode-foreground);
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.15s, background-color 0.15s, border-color 0.15s;
+}
+
+.frontmatter-toggle-button:hover {
+  opacity: 1;
+  background: var(--vscode-code-bg);
+}
+
+.frontmatter-toggle-button.frontmatter-toggle-active {
+  opacity: 1;
+  background: var(--vscode-link);
+  border-color: var(--vscode-link);
+  color: #ffffff;
+}
+
+/* Frontmatter tray overlay */
+.frontmatter-tray {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 5;
+  background: var(--vscode-background);
+  border-bottom: 1px solid var(--vscode-border);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transform: translateY(-100%);
+  opacity: 0;
+  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
+  pointer-events: none;
+}
+
+.dark .frontmatter-tray {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
+.frontmatter-tray.frontmatter-tray-open {
+  transform: translateY(0);
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.frontmatter-tray-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--vscode-border);
+  background: var(--vscode-code-bg);
+}
+
+.frontmatter-tray-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--vscode-foreground);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.frontmatter-tray-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--vscode-foreground);
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.15s, background-color 0.15s;
+}
+
+.frontmatter-tray-close:hover {
+  opacity: 1;
+  background: var(--vscode-border);
+}
+
+.frontmatter-tray-content {
+  padding: 12px;
+}
+
+.frontmatter-tray-textarea {
+  width: 100%;
+  min-height: 80px;
+  max-height: 300px;
+  padding: 12px;
+  border: 1px solid var(--vscode-border);
+  border-radius: 4px;
+  background: var(--vscode-code-bg);
+  color: var(--vscode-foreground);
+  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  resize: none;
+  overflow-y: auto;
+}
+
+.frontmatter-tray-textarea:focus {
+  outline: none;
+  border-color: var(--vscode-link);
+}
+
+.frontmatter-tray-textarea::placeholder {
+  color: var(--vscode-foreground);
+  opacity: 0.5;
+}
+
+/* Header actions container */
+.frontmatter-tray-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.frontmatter-tray-toggle-raw {
+  padding: 4px 8px;
+  border: 1px solid var(--vscode-border);
+  border-radius: 4px;
+  background: transparent;
+  color: var(--vscode-foreground);
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s, border-color 0.15s;
+}
+
+.frontmatter-tray-toggle-raw:hover {
+  background: var(--vscode-border);
+  border-color: var(--vscode-foreground-muted, var(--vscode-border));
+}
+
+/* MDC Form Styles */
+.mdc-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.mdc-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.mdc-form-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--vscode-foreground);
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.mdc-form-label-cursor {
+  font-weight: 400;
+  text-transform: none;
+  opacity: 0.6;
+  font-size: 11px;
+}
+
+.mdc-form-required {
+  color: #e53e3e;
+  font-weight: 700;
+}
+
+.mdc-form-input {
+  padding: 8px 12px;
+  border: 1px solid var(--vscode-border);
+  border-radius: 4px;
+  background: var(--vscode-code-bg);
+  color: var(--vscode-foreground);
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.mdc-form-input:focus {
+  outline: none;
+  border-color: var(--vscode-link);
+}
+
+.mdc-form-input::placeholder {
+  color: var(--vscode-foreground);
+  opacity: 0.5;
+}
+
+.mdc-form-select {
+  padding: 8px 12px;
+  border: 1px solid var(--vscode-border);
+  border-radius: 4px;
+  background: var(--vscode-code-bg);
+  color: var(--vscode-foreground);
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.mdc-form-select:focus {
+  outline: none;
+  border-color: var(--vscode-link);
+}
+
+.mdc-form-hint {
+  font-size: 11px;
+  color: var(--vscode-foreground);
+  opacity: 0.7;
+  line-height: 1.4;
+}
+
+.mdc-form-hint-info {
+  padding: 6px 10px;
+  background: rgba(6, 150, 215, 0.08);
+  border-radius: 4px;
+  opacity: 1;
+  color: var(--vscode-link);
+}
+
+.dark .mdc-form-hint-info {
+  background: rgba(61, 185, 235, 0.1);
+}
+
+.mdc-form-hint-warn {
+  padding: 6px 10px;
+  background: rgba(234, 179, 8, 0.12);
+  border-radius: 4px;
+  opacity: 1;
+  color: #b45309;
+}
+
+.dark .mdc-form-hint-warn {
+  background: rgba(234, 179, 8, 0.15);
+  color: #fbbf24;
+}
+
+/* Globs list */
+.mdc-globs-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+
+.mdc-glob-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 10px;
+  background: var(--vscode-code-bg);
+  border: 1px solid var(--vscode-border);
+  border-radius: 4px;
+}
+
+.mdc-glob-pattern {
+  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+  font-size: 13px;
+  color: var(--vscode-link);
+}
+
+.mdc-glob-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--vscode-foreground);
+  cursor: pointer;
+  opacity: 0.5;
+  transition: opacity 0.15s, background-color 0.15s;
+}
+
+.mdc-glob-remove:hover {
+  opacity: 1;
+  background: rgba(255, 0, 0, 0.1);
+  color: #e53e3e;
+}
+
+.mdc-glob-add {
+  display: flex;
+  gap: 8px;
+}
+
+.mdc-glob-add .mdc-form-input {
+  flex: 1;
+}
+
+.mdc-glob-add-btn {
+  padding: 8px 16px;
+  border: 1px solid var(--vscode-link);
+  border-radius: 4px;
+  background: transparent;
+  color: var(--vscode-link);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s, color 0.15s;
+}
+
+.mdc-glob-add-btn:hover:not(:disabled) {
+  background: var(--vscode-link);
+  color: #ffffff;
+}
+
+.mdc-glob-add-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Other YAML preview */
+.mdc-other-yaml {
+  margin: 0;
+  padding: 10px 12px;
+  background: var(--vscode-code-bg);
+  border: 1px solid var(--vscode-border);
+  border-radius: 4px;
+  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--vscode-foreground);
+  opacity: 0.8;
+  white-space: pre-wrap;
+  overflow-x: auto;
+}
+
+/* ============================================================
+   Annotation markers (ADR-077)
+   ============================================================
+   Default styling for the live `MarkNode` elements `AnnotationMarkerPlugin`
+   decorates. The class names are derived from a kind's `markerStyle`
+   (`annotation-mark-highlight` / `annotation-mark-squiggle`; `none` places no
+   mark at all), plus `-active` for the host's current selection and `-pulse`
+   for the scroll-to arrival flash.
+
+   These ship with the package because the annotation mechanism is a
+   package-shipped capability, not an extension point — a host that enables the
+   `comment` kind should get a visible, working marker without first having to
+   discover and reimplement these exact class names (review finding,
+   @handarbeit-pruefer). A host that wants a different look overrides these
+   rules, or supplies its own class per annotation via
+   `presentation.className`, which is applied alongside the kind's style.
+
+   Liminis itself renders none of this: its only kind is `correction`, which is
+   `markerStyle: 'none'` (FR-006).
+*/
+
+/* The UA default for <mark> is a solid yellow background. Neutralize it so a
+   marker looks like whatever its kind asks for, not like a highlighter pen
+   with a squiggle added on top. */
+.annotation-mark-highlight,
+.annotation-mark-squiggle {
+  color: inherit;
+  cursor: pointer;
+  border-radius: 2px;
+  transition: background-color 120ms ease-out;
+}
+
+.annotation-mark-highlight {
+  background-color: oklch(0.85 0.13 95 / 0.45);
+}
+
+.annotation-mark-squiggle {
+  background-color: transparent;
+  text-decoration: underline wavy oklch(0.60 0.19 25);
+  text-decoration-skip-ink: none;
+  text-underline-offset: 3px;
+}
+
+/* Keyboard focus must be visible — the plugin makes these role="button" and
+   focusable, so they are reachable by Tab. */
+.annotation-mark-highlight:focus-visible,
+.annotation-mark-squiggle:focus-visible {
+  outline: 2px solid var(--vscode-link);
+  outline-offset: 1px;
+}
+
+/* The annotation the host currently has open. Strengthened rather than
+   recolored, so an active marker still reads as the same kind. */
+.annotation-mark-active.annotation-mark-highlight {
+  background-color: oklch(0.82 0.16 95 / 0.75);
+  box-shadow: inset 0 -2px 0 oklch(0.65 0.17 60);
+}
+
+.annotation-mark-active.annotation-mark-squiggle {
+  background-color: oklch(0.70 0.19 25 / 0.16);
+  text-decoration-thickness: 2px;
+}
+
+/* Arrival flash for `scrollToAnnotation`. The plugin removes the class after
+   1400ms, so this must finish inside that window. */
+@keyframes annotation-mark-pulse {
+  0% {
+    background-color: oklch(0.75 0.19 303 / 0.60);
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+
+.annotation-mark-pulse {
+  animation: annotation-mark-pulse 1200ms ease-out;
+}
+
+.dark .annotation-mark-highlight {
+  background-color: oklch(0.75 0.14 95 / 0.30);
+}
+
+.dark .annotation-mark-active.annotation-mark-highlight {
+  background-color: oklch(0.78 0.16 95 / 0.48);
+  box-shadow: inset 0 -2px 0 oklch(0.72 0.17 60);
+}
+
+.dark .annotation-mark-squiggle {
+  text-decoration-color: oklch(0.70 0.18 25);
+}
+
+.dark .annotation-mark-active.annotation-mark-squiggle {
+  background-color: oklch(0.70 0.19 25 / 0.24);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .annotation-mark-highlight,
+  .annotation-mark-squiggle {
+    transition: none;
+  }
+
+  .annotation-mark-pulse {
+    animation: none;
+  }
+}
+
+/* ============================================================
+   Print Styles for Editor Content
+   ============================================================
+   These styles are for native browser printing (Cmd/Ctrl+P).
+   Note: The "Export to PDF" feature uses a separate hidden window
+   with its own embedded styles (in src/main/index.ts), so changes
+   here will NOT affect PDF exports - only native browser print.
+   Ensures the editor content prints cleanly with proper formatting.
+*/
+@media print {
+  /* Reset editor colors for print */
+  :root,
+  .dark {
+    --vscode-foreground: #000000;
+    --vscode-background: #ffffff;
+    --vscode-code-bg: #f5f5f5;
+    --vscode-border: #cccccc;
+    --checkbox-border: #666666;
+    --vscode-link: #0066cc;
+    --slashmd-heading-color: #000000;
+    --slashmd-h1-color: #000000;
+    --slashmd-h2-color: #000000;
+    --slashmd-h3-color: #000000;
+    --slashmd-h4-color: #000000;
+    --slashmd-h5-color: #000000;
+  }
+
+  body {
+    background: white !important;
+    color: black !important;
+  }
+
+  /* Editor input - show all content, remove scroll */
+  .editor-input {
+    min-height: auto !important;
+    height: auto !important;
+    overflow: visible !important;
+    padding: 0 !important;
+  }
+
+  /* Hide interactive elements */
+  .drag-handle,
+  .block-delete-button,
+  .toolbar,
+  .slash-menu,
+  .search-bar,
+  .code-block-toolbar,
+  .frontmatter-tray,
+  .frontmatter-toggle-button,
+  .image-modal-overlay,
+  .table-actions-menu,
+  .code-language-menu {
+    display: none !important;
+  }
+
+  /* Ensure code blocks print with background */
+  .editor-code {
+    background: #f5f5f5 !important;
+    color: #333333 !important;
+    border: 1px solid #ddd !important;
+    white-space: pre-wrap !important;
+    word-wrap: break-word !important;
+    page-break-inside: avoid !important;
+  }
+
+  /* Inline code */
+  .editor-text-code {
+    background: #f0f0f0 !important;
+    color: #333333 !important;
+  }
+
+  /* Links - readable in print */
+  .editor-link {
+    color: #0066cc !important;
+    text-decoration: underline !important;
+  }
+
+  /* Tables */
+  .editor-table {
+    page-break-inside: auto !important;
+  }
+
+  .editor-table-row {
+    page-break-inside: avoid !important;
+  }
+
+  .editor-table-cell,
+  .editor-table-cell-header {
+    border: 1px solid #999 !important;
+    background: white !important;
+  }
+
+  .editor-table-cell-header {
+    background: #f0f0f0 !important;
+  }
+
+  /* Blockquotes */
+  .editor-quote {
+    border-left: 3px solid #999 !important;
+    background: #fafafa !important;
+    color: #333 !important;
+  }
+
+  /* Callouts - ensure they print with visible borders */
+  .callout {
+    background: #fafafa !important;
+    border-left: 4px solid #666 !important;
+    page-break-inside: avoid !important;
+  }
+
+  .callout-note { border-left-color: #0696d7 !important; }
+  .callout-tip { border-left-color: #10b981 !important; }
+  .callout-warning { border-left-color: #eab308 !important; }
+  .callout-important { border-left-color: #8b5cf6 !important; }
+  .callout-caution { border-left-color: #ef4444 !important; }
+
+  /* Checkboxes - ensure visibility */
+  .editor-listitem-checked::before,
+  .editor-listitem-unchecked::before,
+  .editor-listitem-ordered-checked::before,
+  .editor-listitem-ordered-unchecked::before {
+    border-color: #666 !important;
+  }
+
+  .editor-listitem-checked::before,
+  .editor-listitem-ordered-checked::before {
+    background: #333 !important;
+    border-color: #333 !important;
+  }
+
+  /* Toggles - expand and print content */
+  .toggle-container {
+    border: 1px solid #ccc !important;
+  }
+
+  .toggle-content-area {
+    display: block !important; /* Always show content in print */
+  }
+
+  .toggle-title::before {
+    transform: translateY(-50%) rotate(90deg) !important; /* Show as expanded */
+  }
+
+  /* Images */
+  .image-wrapper img,
+  .image-block img {
+    max-width: 100% !important;
+    page-break-inside: avoid !important;
+  }
+
+  /* Hide image resize handles */
+  .image-resize-handle,
+  .image-size-badge {
+    display: none !important;
+  }
+
+  /* Mermaid diagrams */
+  .mermaid-renderer {
+    page-break-inside: avoid !important;
+  }
+
+  /* Dividers */
+  .divider-block::before {
+    background: #ccc !important;
+  }
+
+  /* Math */
+  .katex {
+    color: black !important;
+  }
+}